diff --git a/package-lock.json b/package-lock.json
index bb7acdf..ff1f968 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,11 +14,8 @@
"@lit/react": "^1.0.7",
"@material/material-color-utilities": "^0.3.0",
"@material/web": "^2.2.0",
- "@mui/material": "^6.1.6",
"@vitejs/plugin-react": "^4.3.3",
- "beercss": "^3.7.12",
"classnames": "^2.5.1",
- "material-dynamic-colors": "^1.1.2",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"uuid": "^11.1.0"
@@ -341,6 +338,7 @@
"resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.13.5.tgz",
"integrity": "sha512-Z3xbtJ+UcK76eWkagZ1onvn/wAVb1GOMuR15s30Fm2wrMgC7jzpnO2JZXr4eujTTqoQFUrZIw/rT0c6Zzjca1g==",
"license": "MIT",
+ "peer": true,
"dependencies": {
"@emotion/memoize": "^0.9.0",
"@emotion/sheet": "^1.4.0",
@@ -412,7 +410,8 @@
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.4.0.tgz",
"integrity": "sha512-fTBW9/8r2w3dXWYM4HCB1Rdp8NLibOw2+XELH5m5+AkWiL/KqYX6dc0kKYlaYyKjrQ6ds33MCdMPEwgs2z1rqg==",
- "license": "MIT"
+ "license": "MIT",
+ "peer": true
},
"node_modules/@emotion/styled": {
"version": "11.13.5",
@@ -462,7 +461,8 @@
"version": "0.4.0",
"resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.4.0.tgz",
"integrity": "sha512-snKqtPW01tN0ui7yu9rGv69aJXr/a/Ywvl11sUjNtEcRc+ng/mQriFL0wLXMef74iHa/EkftbDzU9F8iFbH+zg==",
- "license": "MIT"
+ "license": "MIT",
+ "peer": true
},
"node_modules/@esbuild-plugins/node-globals-polyfill": {
"version": "0.2.3",
@@ -932,220 +932,6 @@
"tslib": "^2.4.0"
}
},
- "node_modules/@mui/core-downloads-tracker": {
- "version": "6.1.6",
- "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-6.1.6.tgz",
- "integrity": "sha512-nz1SlR9TdBYYPz4qKoNasMPRiGb4PaIHFkzLzhju0YVYS5QSuFF2+n7CsiHMIDcHv3piPu/xDWI53ruhOqvZwQ==",
- "license": "MIT",
- "funding": {
- "type": "opencollective",
- "url": "https://opencollective.com/mui-org"
- }
- },
- "node_modules/@mui/material": {
- "version": "6.1.6",
- "resolved": "https://registry.npmjs.org/@mui/material/-/material-6.1.6.tgz",
- "integrity": "sha512-1yvejiQ/601l5AK3uIdUlAVElyCxoqKnl7QA+2oFB/2qYPWfRwDgavW/MoywS5Y2gZEslcJKhe0s2F3IthgFgw==",
- "license": "MIT",
- "dependencies": {
- "@babel/runtime": "^7.26.0",
- "@mui/core-downloads-tracker": "^6.1.6",
- "@mui/system": "^6.1.6",
- "@mui/types": "^7.2.19",
- "@mui/utils": "^6.1.6",
- "@popperjs/core": "^2.11.8",
- "@types/react-transition-group": "^4.4.11",
- "clsx": "^2.1.1",
- "csstype": "^3.1.3",
- "prop-types": "^15.8.1",
- "react-is": "^18.3.1",
- "react-transition-group": "^4.4.5"
- },
- "engines": {
- "node": ">=14.0.0"
- },
- "funding": {
- "type": "opencollective",
- "url": "https://opencollective.com/mui-org"
- },
- "peerDependencies": {
- "@emotion/react": "^11.5.0",
- "@emotion/styled": "^11.3.0",
- "@mui/material-pigment-css": "^6.1.6",
- "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
- "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
- "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
- },
- "peerDependenciesMeta": {
- "@emotion/react": {
- "optional": true
- },
- "@emotion/styled": {
- "optional": true
- },
- "@mui/material-pigment-css": {
- "optional": true
- },
- "@types/react": {
- "optional": true
- }
- }
- },
- "node_modules/@mui/private-theming": {
- "version": "6.1.6",
- "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-6.1.6.tgz",
- "integrity": "sha512-ioAiFckaD/fJSnTrUMWgjl9HYBWt7ixCh7zZw7gDZ+Tae7NuprNV6QJK95EidDT7K0GetR2rU3kAeIR61Myttw==",
- "license": "MIT",
- "dependencies": {
- "@babel/runtime": "^7.26.0",
- "@mui/utils": "^6.1.6",
- "prop-types": "^15.8.1"
- },
- "engines": {
- "node": ">=14.0.0"
- },
- "funding": {
- "type": "opencollective",
- "url": "https://opencollective.com/mui-org"
- },
- "peerDependencies": {
- "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
- "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
- },
- "peerDependenciesMeta": {
- "@types/react": {
- "optional": true
- }
- }
- },
- "node_modules/@mui/styled-engine": {
- "version": "6.1.6",
- "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-6.1.6.tgz",
- "integrity": "sha512-I+yS1cSuSvHnZDBO7e7VHxTWpj+R7XlSZvTC4lS/OIbUNJOMMSd3UDP6V2sfwzAdmdDNBi7NGCRv2SZ6O9hGDA==",
- "license": "MIT",
- "dependencies": {
- "@babel/runtime": "^7.26.0",
- "@emotion/cache": "^11.13.1",
- "@emotion/serialize": "^1.3.2",
- "@emotion/sheet": "^1.4.0",
- "csstype": "^3.1.3",
- "prop-types": "^15.8.1"
- },
- "engines": {
- "node": ">=14.0.0"
- },
- "funding": {
- "type": "opencollective",
- "url": "https://opencollective.com/mui-org"
- },
- "peerDependencies": {
- "@emotion/react": "^11.4.1",
- "@emotion/styled": "^11.3.0",
- "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
- },
- "peerDependenciesMeta": {
- "@emotion/react": {
- "optional": true
- },
- "@emotion/styled": {
- "optional": true
- }
- }
- },
- "node_modules/@mui/system": {
- "version": "6.1.6",
- "resolved": "https://registry.npmjs.org/@mui/system/-/system-6.1.6.tgz",
- "integrity": "sha512-qOf1VUE9wK8syiB0BBCp82oNBAVPYdj4Trh+G1s+L+ImYiKlubWhhqlnvWt3xqMevR+D2h1CXzA1vhX2FvA+VQ==",
- "license": "MIT",
- "dependencies": {
- "@babel/runtime": "^7.26.0",
- "@mui/private-theming": "^6.1.6",
- "@mui/styled-engine": "^6.1.6",
- "@mui/types": "^7.2.19",
- "@mui/utils": "^6.1.6",
- "clsx": "^2.1.1",
- "csstype": "^3.1.3",
- "prop-types": "^15.8.1"
- },
- "engines": {
- "node": ">=14.0.0"
- },
- "funding": {
- "type": "opencollective",
- "url": "https://opencollective.com/mui-org"
- },
- "peerDependencies": {
- "@emotion/react": "^11.5.0",
- "@emotion/styled": "^11.3.0",
- "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
- "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
- },
- "peerDependenciesMeta": {
- "@emotion/react": {
- "optional": true
- },
- "@emotion/styled": {
- "optional": true
- },
- "@types/react": {
- "optional": true
- }
- }
- },
- "node_modules/@mui/types": {
- "version": "7.2.19",
- "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.19.tgz",
- "integrity": "sha512-6XpZEM/Q3epK9RN8ENoXuygnqUQxE+siN/6rGRi2iwJPgBUR25mphYQ9ZI87plGh58YoZ5pp40bFvKYOCDJ3tA==",
- "license": "MIT",
- "peerDependencies": {
- "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0"
- },
- "peerDependenciesMeta": {
- "@types/react": {
- "optional": true
- }
- }
- },
- "node_modules/@mui/utils": {
- "version": "6.1.6",
- "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-6.1.6.tgz",
- "integrity": "sha512-sBS6D9mJECtELASLM+18WUcXF6RH3zNxBRFeyCRg8wad6NbyNrdxLuwK+Ikvc38sTZwBzAz691HmSofLqHd9sQ==",
- "license": "MIT",
- "dependencies": {
- "@babel/runtime": "^7.26.0",
- "@mui/types": "^7.2.19",
- "@types/prop-types": "^15.7.13",
- "clsx": "^2.1.1",
- "prop-types": "^15.8.1",
- "react-is": "^18.3.1"
- },
- "engines": {
- "node": ">=14.0.0"
- },
- "funding": {
- "type": "opencollective",
- "url": "https://opencollective.com/mui-org"
- },
- "peerDependencies": {
- "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
- "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
- },
- "peerDependenciesMeta": {
- "@types/react": {
- "optional": true
- }
- }
- },
- "node_modules/@popperjs/core": {
- "version": "2.11.8",
- "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
- "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
- "license": "MIT",
- "funding": {
- "type": "opencollective",
- "url": "https://opencollective.com/popperjs"
- }
- },
"node_modules/@rollup/plugin-inject": {
"version": "5.0.5",
"resolved": "https://registry.npmjs.org/@rollup/plugin-inject/-/plugin-inject-5.0.5.tgz",
@@ -1749,15 +1535,6 @@
"@types/react": "*"
}
},
- "node_modules/@types/react-transition-group": {
- "version": "4.4.11",
- "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.11.tgz",
- "integrity": "sha512-RM05tAniPZ5DZPzzNFP+DmrcOdD0efDUxMy3145oljWSl3x9ZV5vhme98gTxFrj2lhXvmGNnUiuDyJgY9IKkNA==",
- "license": "MIT",
- "dependencies": {
- "@types/react": "*"
- }
- },
"node_modules/@types/trusted-types": {
"version": "2.0.7",
"resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
@@ -1798,15 +1575,6 @@
"npm": ">=6"
}
},
- "node_modules/beercss": {
- "version": "3.7.12",
- "resolved": "https://registry.npmjs.org/beercss/-/beercss-3.7.12.tgz",
- "integrity": "sha512-R5QVbMKK/xcuNJcTY8NZINmn/9BV1euy5TXio7QfG/0yorBo+RHFPR/J+AhjwOIvyl1/8A0PyJuEAgnGPesWPQ==",
- "license": "MIT",
- "dependencies": {
- "material-dynamic-colors": "^1.1.2"
- }
- },
"node_modules/browserslist": {
"version": "4.24.2",
"resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.24.2.tgz",
@@ -1874,15 +1642,6 @@
"integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==",
"license": "MIT"
},
- "node_modules/clsx": {
- "version": "2.1.1",
- "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
- "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
- "license": "MIT",
- "engines": {
- "node": ">=6"
- }
- },
"node_modules/convert-source-map": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-2.0.0.tgz",
@@ -1928,16 +1687,6 @@
}
}
},
- "node_modules/dom-helpers": {
- "version": "5.2.1",
- "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
- "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
- "license": "MIT",
- "dependencies": {
- "@babel/runtime": "^7.8.7",
- "csstype": "^3.0.2"
- }
- },
"node_modules/electron-to-chromium": {
"version": "1.5.56",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.56.tgz",
@@ -2236,24 +1985,6 @@
"@jridgewell/sourcemap-codec": "^1.5.0"
}
},
- "node_modules/material-dynamic-colors": {
- "version": "1.1.2",
- "resolved": "https://registry.npmjs.org/material-dynamic-colors/-/material-dynamic-colors-1.1.2.tgz",
- "integrity": "sha512-8KD0jrPTFs2x06UJWbvkg6E0HyzFjrvS5oOc2DsXzIEOqZTbb3ruLMUhNuPSl8WeHA/O/RTAlTLcxqYXJzYwPA==",
- "license": "MIT",
- "dependencies": {
- "@material/material-color-utilities": "^0.2.7"
- },
- "bin": {
- "material-dynamic-colors": "cli.js"
- }
- },
- "node_modules/material-dynamic-colors/node_modules/@material/material-color-utilities": {
- "version": "0.2.7",
- "resolved": "https://registry.npmjs.org/@material/material-color-utilities/-/material-color-utilities-0.2.7.tgz",
- "integrity": "sha512-0FCeqG6WvK4/Cc06F/xXMd/pv4FeisI0c1tUpBbfhA2n9Y8eZEv4Karjbmf2ZqQCPUWMrGp8A571tCjizxoTiQ==",
- "license": "Apache-2.0"
- },
"node_modules/ms": {
"version": "2.1.3",
"resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -2284,15 +2015,6 @@
"integrity": "sha512-d9VeXT4SJ7ZeOqGX6R5EM022wpL+eWPooLI+5UpWn2jCT1aosUQEhQP214x33Wkwx3JQMvIm+tIoVOdodFS40g==",
"license": "MIT"
},
- "node_modules/object-assign": {
- "version": "4.1.1",
- "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
- "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
- "license": "MIT",
- "engines": {
- "node": ">=0.10.0"
- }
- },
"node_modules/parent-module": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -2385,23 +2107,6 @@
"node": "^10 || ^12 || >=14"
}
},
- "node_modules/prop-types": {
- "version": "15.8.1",
- "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
- "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
- "license": "MIT",
- "dependencies": {
- "loose-envify": "^1.4.0",
- "object-assign": "^4.1.1",
- "react-is": "^16.13.1"
- }
- },
- "node_modules/prop-types/node_modules/react-is": {
- "version": "16.13.1",
- "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
- "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
- "license": "MIT"
- },
"node_modules/react": {
"version": "18.3.1",
"resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
@@ -2427,12 +2132,6 @@
"react": "^18.3.1"
}
},
- "node_modules/react-is": {
- "version": "18.3.1",
- "resolved": "https://registry.npmjs.org/react-is/-/react-is-18.3.1.tgz",
- "integrity": "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==",
- "license": "MIT"
- },
"node_modules/react-refresh": {
"version": "0.14.2",
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.2.tgz",
@@ -2442,22 +2141,6 @@
"node": ">=0.10.0"
}
},
- "node_modules/react-transition-group": {
- "version": "4.4.5",
- "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
- "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
- "license": "BSD-3-Clause",
- "dependencies": {
- "@babel/runtime": "^7.5.5",
- "dom-helpers": "^5.0.1",
- "loose-envify": "^1.4.0",
- "prop-types": "^15.6.2"
- },
- "peerDependencies": {
- "react": ">=16.6.0",
- "react-dom": ">=16.6.0"
- }
- },
"node_modules/regenerator-runtime": {
"version": "0.14.1",
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz",
diff --git a/package.json b/package.json
index 9dad2ff..16561d6 100644
--- a/package.json
+++ b/package.json
@@ -14,11 +14,8 @@
"@lit/react": "^1.0.7",
"@material/material-color-utilities": "^0.3.0",
"@material/web": "^2.2.0",
- "@mui/material": "^6.1.6",
"@vitejs/plugin-react": "^4.3.3",
- "beercss": "^3.7.12",
"classnames": "^2.5.1",
- "material-dynamic-colors": "^1.1.2",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"uuid": "^11.1.0"
diff --git a/src/components/Dialog.tsx b/src/components/Dialog.tsx
index 8c16e4f..de5f74d 100644
--- a/src/components/Dialog.tsx
+++ b/src/components/Dialog.tsx
@@ -31,11 +31,38 @@ type DialogProps = {
onOpened?: () => void;
onClosed?: () => void;
onCancel?: () => void;
+ fullScreen?: boolean;
};
export const Dialog = (props: DialogProps) => {
- const { children, quick, returnValue, noFocusTrap, open, style, className, id, onClose, onShow, onOpen, onOpened, onClosed, onCancel } = props;
- return {children};
+ const { children, quick, returnValue, noFocusTrap, open, fullScreen, style, className, id, onClose, onShow, onOpen, onOpened, onClosed, onCancel } = props;
+ return (
+
+ {children}
+
+ );
};
type DialogTitleProps = {
diff --git a/src/components/IconButton.tsx b/src/components/IconButton.tsx
new file mode 100644
index 0000000..8983403
--- /dev/null
+++ b/src/components/IconButton.tsx
@@ -0,0 +1,87 @@
+import React from "react";
+import { createComponent } from "@lit/react";
+import { MdIconButton as MdIconButtonWebComponent } from "@material/web/iconbutton/icon-button";
+import { MdFilledIconButton as MdFilledIconButtonWebComponent } from "@material/web/iconbutton/filled-icon-button";
+import { MdOutlinedIconButton as MdOutlinedIconButtonWebComponent } from "@material/web/iconbutton/outlined-icon-button";
+import { MdFilledTonalIconButton as MdFilledTonalIconButtonWebComponent } from "@material/web/iconbutton/filled-tonal-icon-button";
+
+const MdIconButton = createComponent({
+ react: React,
+ tagName: 'md-icon-button',
+ elementClass: MdIconButtonWebComponent,
+ events: {
+ onChange: 'change',
+ onInput: 'input',
+ onClick: 'click',
+ },
+});
+
+const MdFilledIconButton = createComponent({
+ react: React,
+ tagName: 'md-filled-icon-button',
+ elementClass: MdFilledIconButtonWebComponent,
+ events: {
+ onChange: 'change',
+ onInput: 'input',
+ onClick: 'click',
+ },
+});
+
+const MdOutlinedIconButton = createComponent({
+ react: React,
+ tagName: 'md-outlined-icon-button',
+ elementClass: MdOutlinedIconButtonWebComponent,
+ events: {
+ onChange: 'change',
+ onInput: 'input',
+ onClick: 'click',
+ },
+});
+
+const MdFilledTonalIconButton = createComponent({
+ react: React,
+ tagName: 'md-filled-tonal-icon-button',
+ elementClass: MdFilledTonalIconButtonWebComponent,
+ events: {
+ onChange: 'change',
+ onInput: 'input',
+ onClick: 'click',
+ },
+});
+
+type IconButtonProps = {
+ variant?: 'filled' | 'outlined' | 'filled-tonal' | 'standard';
+ disabled?: boolean;
+ flipIconInRtl?: boolean;
+ href?: string;
+ target?: '_blank' | '_self' | '_parent' | '_top';
+ ariaLabelSelected?: string;
+ toggle?: boolean;
+ selected?: boolean;
+ type?: 'button' | 'submit' | 'reset';
+ value?: string;
+ name?: string;
+ form?: HTMLFormElement;
+ labels?: NodeListOf;
+ children: React.ReactNode;
+ style?: React.CSSProperties;
+ className?: string;
+ id?: string;
+ onChange?: (event: Event) => void;
+ onInput?: (event: Event) => void;
+ onClick?: (event: Event) => void;
+};
+
+export const IconButton = (props: IconButtonProps) => {
+ const variant = props.variant || 'standard';
+ switch (variant) {
+ case 'filled':
+ return ;
+ case 'outlined':
+ return ;
+ case 'filled-tonal':
+ return ;
+ default:
+ return ;
+ }
+};
diff --git a/src/index.tsx b/src/index.tsx
index f83b189..3254c17 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -43,7 +43,7 @@ const mountApp = async () => {
Hello
Hello
-
+