npm - @ktjs/mui - Versions diffs - 0.17.0 - Mend

@ktjs/mui 0.17.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (8) hide show

package/LICENSE ADDED Viewed

@@ -0,0 +1,21 @@
+MIT License
+Copyright (c) 2025 kasukabe tsumugi
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md ADDED Viewed

@@ -0,0 +1,49 @@
+# @ktjs/mui
+Material-UI inspired components for kt.js framework.
+## Installation
+```bash
+pnpm add @ktjs/mui
+```
+## Usage
+```tsx
+import { Button, Alert, Dialog } from '@ktjs/mui';
+import '@ktjs/mui/styles.css';
+// Create a button
+const myButton = (
+  <Button variant="contained" color="primary">
+    Click me
+  </Button>
+);
+```
+## Available Components
+- **Alert** - Display alert messages with different severity levels
+- **Button** - Material-style buttons with variants and colors
+- **Dialog** - Modal dialogs
+- **FormLabel** - Form labels for inputs
+- **Input** - Text input fields
+- **LinearProgress** - Progress bars
+- **Radio** - Radio buttons
+- **Select** - Dropdown select components
+- **Icons** - Various SVG icons
+## Development
+```bash
+# Build the package
+pnpm build
+# Watch mode for development
+pnpm dev
+```
+## License
+MIT

package/dist/index.css ADDED Viewed

@@ -0,0 +1 @@

+ .mui-alert{align-items:center;border-radius:4px;display:flex;font-family:Roboto,Helvetica,Arial,sans-serif;font-size:.875rem;font-weight:400;gap:12px;letter-spacing:.01071em;line-height:1.43;padding:6px 16px;position:relative}.mui-alert-icon-wrapper{display:flex;font-size:22px;margin-right:-4px;opacity:.9;padding:7px 0}.mui-alert-icon{flex-shrink:0}.mui-alert-message{flex:1;min-width:0;overflow:auto;padding:8px 0}.mui-alert-close{align-items:center;background:none;border:none;border-radius:4px;cursor:pointer;display:flex;justify-content:center;margin-left:auto;margin-right:-8px;opacity:.6;padding:4px;transition:opacity .2s,background-color .2s}.mui-alert-close:hover{background-color:rgba(0,0,0,.04);opacity:1}.mui-alert-standard.mui-alert-success{background-color:#edf7ed;color:#1e4620}.mui-alert-standard.mui-alert-info{background-color:#e5f6fd;color:#014361}.mui-alert-standard.mui-alert-warning{background-color:#fff4e5;color:#663c00}.mui-alert-standard.mui-alert-error{background-color:#fdeded;color:#5f2120}.mui-alert-filled.mui-alert-success{background-color:#2e7d32;color:#fff}.mui-alert-filled.mui-alert-info{background-color:#0288d1;color:#fff}.mui-alert-filled.mui-alert-warning{background-color:#ed6c02;color:#fff}.mui-alert-filled.mui-alert-error{background-color:#d32f2f;color:#fff}.mui-alert-outlined.mui-alert-success{background-color:transparent;border:1px solid #2e7d32;color:#1e4620}.mui-alert-outlined.mui-alert-info{background-color:transparent;border:1px solid #0288d1;color:#014361}.mui-alert-outlined.mui-alert-warning{background-color:transparent;border:1px solid #ed6c02;color:#663c00}.mui-alert-outlined.mui-alert-error{background-color:transparent;border:1px solid #d32f2f;color:#5f2120}@media (prefers-color-scheme:dark){.mui-alert-standard.mui-alert-success{background-color:#0c130d;color:#b7dfb9}.mui-alert-standard.mui-alert-info{background-color:#071318;color:#a6d5fa}.mui-alert-standard.mui-alert-warning{background-color:#191207;color:#ffd599}.mui-alert-standard.mui-alert-error{background-color:#160b0b;color:#f4c7c7}.mui-alert-close:hover{background-color:hsla(0,0%,100%,.08)}}.mui-button{align-items:center;border:0;border-radius:4px;box-sizing:border-box;cursor:pointer;display:inline-flex;font-family:Roboto,Helvetica,Arial,sans-serif;font-weight:500;justify-content:center;letter-spacing:.02857em;line-height:1.75;margin:0;min-width:64px;outline:0;position:relative;text-transform:uppercase;transition:background-color .25s cubic-bezier(.4,0,.2,1) 0ms,box-shadow .25s cubic-bezier(.4,0,.2,1) 0ms,border-color .25s cubic-bezier(.4,0,.2,1) 0ms,color .25s cubic-bezier(.4,0,.2,1) 0ms;user-select:none;vertical-align:middle}.mui-button,.mui-button:hover{text-decoration:none}.mui-button-fullwidth{width:100%}.mui-button-disabled{cursor:default;pointer-events:none}.mui-button-label{align-items:inherit;display:inherit;justify-content:inherit;width:100%}.mui-button-start-icon{display:inherit;margin-left:-4px;margin-right:8px}.mui-button-end-icon{display:inherit;margin-left:8px;margin-right:-4px}.mui-button-size-small .mui-button-start-icon{margin-left:-2px}.mui-button-size-small .mui-button-end-icon{margin-right:-2px}.mui-button-size-small{font-size:.8125rem;padding:4px 10px}.mui-button-size-medium{font-size:.875rem;padding:6px 16px}.mui-button-size-large{font-size:.9375rem;padding:8px 22px}.mui-button-icon-only{min-width:auto;padding:8px}.mui-button-icon-only.mui-button-size-small{padding:5px}.mui-button-icon-only.mui-button-size-medium{padding:8px}.mui-button-icon-only.mui-button-size-large{padding:12px}.mui-button-icon-only .mui-button-end-icon,.mui-button-icon-only .mui-button-start-icon{margin:0}.mui-button-text{padding:6px 8px}.mui-button-text.mui-button-size-small{padding:4px 5px}.mui-button-text.mui-button-size-large{padding:8px 11px}.mui-button-text-primary{color:#1976d2}.mui-button-text-primary:hover{background-color:rgba(25,118,210,.04)}.mui-button-text-secondary{color:#9c27b0}.mui-button-text-secondary:hover{background-color:rgba(156,39,176,.04)}.mui-button-text-error{color:#d32f2f}.mui-button-text-error:hover{background-color:rgba(211,47,47,.04)}.mui-button-text-warning{color:#ed6c02}.mui-button-text-warning:hover{background-color:rgba(237,108,2,.04)}.mui-button-text-info{color:#0288d1}.mui-button-text-info:hover{background-color:rgba(2,136,209,.04)}.mui-button-text-success{color:#2e7d32}.mui-button-text-success:hover{background-color:rgba(46,125,50,.04)}.mui-button-outlined{border:1px solid rgba(25,118,210,.5);padding:5px 15px}.mui-button-outlined.mui-button-size-small{padding:3px 9px}.mui-button-outlined.mui-button-size-large{padding:7px 21px}.mui-button-outlined-primary{border-color:rgba(25,118,210,.5);color:#1976d2}.mui-button-outlined-primary:hover{background-color:rgba(25,118,210,.04);border-color:#1976d2}.mui-button-outlined-secondary{border-color:rgba(156,39,176,.5);color:#9c27b0}.mui-button-outlined-secondary:hover{background-color:rgba(156,39,176,.04);border-color:#9c27b0}.mui-button-outlined-error{border-color:rgba(211,47,47,.5);color:#d32f2f}.mui-button-outlined-error:hover{background-color:rgba(211,47,47,.04);border-color:#d32f2f}.mui-button-outlined-warning{border-color:rgba(237,108,2,.5);color:#ed6c02}.mui-button-outlined-warning:hover{background-color:rgba(237,108,2,.04);border-color:#ed6c02}.mui-button-outlined-info{border-color:rgba(2,136,209,.5);color:#0288d1}.mui-button-outlined-info:hover{background-color:rgba(2,136,209,.04);border-color:#0288d1}.mui-button-outlined-success{border-color:rgba(46,125,50,.5);color:#2e7d32}.mui-button-outlined-success:hover{background-color:rgba(46,125,50,.04);border-color:#2e7d32}.mui-button-contained-primary{background-color:#1976d2;box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);color:#fff}.mui-button-contained-primary:hover{background-color:#1565c0;box-shadow:0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12)}.mui-button-contained-primary:active{box-shadow:0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12)}.mui-button-contained-secondary{background-color:#9c27b0;box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);color:#fff}.mui-button-contained-secondary:hover{background-color:#7b1fa2;box-shadow:0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12)}.mui-button-contained-error{background-color:#d32f2f;box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);color:#fff}.mui-button-contained-error:hover{background-color:#c62828;box-shadow:0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12)}.mui-button-contained-warning{background-color:#ed6c02;box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);color:#fff}.mui-button-contained-warning:hover{background-color:#e65100;box-shadow:0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12)}.mui-button-contained-info{background-color:#0288d1;box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);color:#fff}.mui-button-contained-info:hover{background-color:#01579b;box-shadow:0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12)}.mui-button-contained-success{background-color:#2e7d32;box-shadow:0 3px 1px -2px rgba(0,0,0,.2),0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12);color:#fff}.mui-button-contained-success:hover{background-color:#1b5e20;box-shadow:0 2px 4px -1px rgba(0,0,0,.2),0 4px 5px 0 rgba(0,0,0,.14),0 1px 10px 0 rgba(0,0,0,.12)}.mui-button-text.mui-button-disabled{color:rgba(0,0,0,.26)}.mui-button-outlined.mui-button-disabled{border-color:rgba(0,0,0,.12);color:rgba(0,0,0,.26)}.mui-button-contained.mui-button-disabled{background-color:rgba(0,0,0,.12);box-shadow:none;color:rgba(0,0,0,.26)}.mui-button-ripple{border-radius:inherit;height:100%;left:0;overflow:hidden;pointer-events:none;position:absolute;top:0;width:100%}.mui-button-ripple-effect{animation:mui-ripple-animation .6s ease-out;background-color:currentColor;border-radius:50%;opacity:.3;pointer-events:none;position:absolute;transform:scale(0)}@keyframes mui-ripple-animation{to{opacity:0;transform:scale(2)}}@media (prefers-color-scheme:dark){.mui-button-text-primary{color:#90caf9}.mui-button-text-primary:hover{background-color:rgba(144,202,249,.08)}.mui-button-text-secondary{color:#ce93d8}.mui-button-text-secondary:hover{background-color:rgba(206,147,216,.08)}.mui-button-outlined-primary{border-color:rgba(144,202,249,.5);color:#90caf9}.mui-button-outlined-primary:hover{background-color:rgba(144,202,249,.08);border-color:#90caf9}.mui-button-outlined-secondary{border-color:rgba(206,147,216,.5);color:#ce93d8}.mui-button-outlined-secondary:hover{background-color:rgba(206,147,216,.08);border-color:#ce93d8}.mui-button-contained-primary{background-color:#90caf9;color:rgba(0,0,0,.87)}.mui-button-contained-primary:hover{background-color:#42a5f5}.mui-button-contained-secondary{background-color:#ce93d8;color:rgba(0,0,0,.87)}.mui-button-contained-secondary:hover{background-color:#ab47bc}.mui-button-text.mui-button-disabled{color:hsla(0,0%,100%,.3)}.mui-button-outlined.mui-button-disabled{border-color:hsla(0,0%,100%,.12);color:hsla(0,0%,100%,.3)}.mui-button-contained.mui-button-disabled{background-color:hsla(0,0%,100%,.12);color:hsla(0,0%,100%,.3)}}.kt-dialog-backdrop{align-items:center;background-color:rgba(0,0,0,.5);bottom:0;display:flex;justify-content:center;left:0;opacity:0;pointer-events:none;position:fixed;right:0;top:0;transition:opacity 225ms cubic-bezier(.4,0,.2,1);z-index:1300}.kt-dialog-backdrop-open{opacity:1;pointer-events:auto}.kt-dialog-paper{background-color:#fff;border-radius:4px;box-shadow:0 11px 15px -7px rgba(0,0,0,.2),0 24px 38px 3px rgba(0,0,0,.14),0 9px 46px 8px rgba(0,0,0,.12);display:flex;flex-direction:column;max-height:calc(100% - 64px);overflow-y:auto;transform:scale(.8);transition:transform 225ms cubic-bezier(.4,0,.2,1)}.kt-dialog-backdrop-open .kt-dialog-paper{transform:scale(1)}.kt-dialog-maxWidth-xs{max-width:444px;width:100%}.kt-dialog-maxWidth-sm{max-width:600px;width:100%}.kt-dialog-maxWidth-md{max-width:960px;width:100%}.kt-dialog-maxWidth-lg{max-width:1280px;width:100%}.kt-dialog-maxWidth-xl{max-width:1920px;width:100%}.kt-dialog-fullWidth{width:calc(100% - 64px)}.kt-dialog-title{flex:0 0 auto;margin:0;padding:24px 24px 20px}.kt-dialog-title h2{color:rgba(0,0,0,.87);font-size:1.25rem;font-weight:500;letter-spacing:.0075em;line-height:1.6;margin:0}.kt-dialog-content,.kt-dialog-title h2{font-family:Roboto,Helvetica,Arial,sans-serif}.kt-dialog-content{-webkit-overflow-scrolling:touch;color:rgba(0,0,0,.6);flex:1 1 auto;font-size:1rem;letter-spacing:.00938em;line-height:1.5;overflow-y:auto;padding:20px 24px}.kt-dialog-content:first-child{padding-top:20px}.kt-dialog-actions{align-items:center;display:flex;flex:0 0 auto;gap:8px;justify-content:flex-end;padding:8px}.kt-dialog-actions>*{margin:0}@media (prefers-color-scheme:dark){.kt-dialog-paper{background-color:#1e1e1e}.kt-dialog-paper,.kt-dialog-title h2{color:hsla(0,0%,100%,.87)}.kt-dialog-content{color:hsla(0,0%,100%,.7)}}.mui-form-label{color:rgba(0,0,0,.6);display:block;font-family:Roboto,Helvetica,Arial,sans-serif;font-size:1rem;font-weight:400;letter-spacing:.00938em;line-height:1.4375em;max-width:100%;overflow:hidden;padding:0;text-overflow:ellipsis;transform-origin:top left;transition:color .2s cubic-bezier(0,0,.2,1) 0ms,transform .2s cubic-bezier(0,0,.2,1) 0ms,max-width .2s cubic-bezier(0,0,.2,1) 0ms;white-space:nowrap}.mui-form-label-focused{color:#1976d2}.mui-form-label-error,.mui-form-label-error.mui-form-label-focused{color:#d32f2f}.mui-form-label-disabled{color:rgba(0,0,0,.38)}.mui-form-label-filled{color:rgba(0,0,0,.6)}.mui-form-label-filled.mui-form-label-focused{color:#1976d2}.mui-form-label-asterisk{color:#d32f2f}legend.mui-form-label{display:block;float:unset;margin-bottom:8px;max-width:100%;overflow:hidden;padding:0;white-space:normal;width:auto}@media (prefers-color-scheme:dark){.mui-form-label{color:hsla(0,0%,100%,.7)}.mui-form-label-focused{color:#90caf9}.mui-form-label-error,.mui-form-label-error.mui-form-label-focused{color:#f44336}.mui-form-label-disabled{color:hsla(0,0%,100%,.38)}.mui-form-label-filled{color:hsla(0,0%,100%,.7)}.mui-form-label-filled.mui-form-label-focused{color:#90caf9}}.mui-linear-progress{background-color:rgba(0,0,0,.12);border-radius:2px;display:block;height:4px;overflow:hidden;position:relative;width:100%}.mui-linear-progress-bar{height:100%;transform-origin:left}.mui-linear-progress-bar,.mui-linear-progress-determinate .mui-linear-progress-bar{transition:width .4s cubic-bezier(.4,0,.2,1)}.mui-linear-progress-indeterminate .mui-linear-progress-bar{animation:mui-linear-progress-indeterminate 2.1s cubic-bezier(.65,.815,.735,.395) infinite;width:100%}@keyframes mui-linear-progress-indeterminate{0%{left:-35%;right:100%}60%{left:100%;right:-90%}to{left:100%;right:-90%}}.mui-linear-progress-primary .mui-linear-progress-bar{background-color:#1976d2}.mui-linear-progress-secondary .mui-linear-progress-bar{background-color:#9c27b0}.mui-linear-progress-error .mui-linear-progress-bar{background-color:#d32f2f}.mui-linear-progress-warning .mui-linear-progress-bar{background-color:#ed6c02}.mui-linear-progress-info .mui-linear-progress-bar{background-color:#0288d1}.mui-linear-progress-success .mui-linear-progress-bar{background-color:#2e7d32}@media (prefers-color-scheme:dark){.mui-linear-progress{background-color:hsla(0,0%,100%,.12)}.mui-linear-progress-primary .mui-linear-progress-bar{background-color:#90caf9}.mui-linear-progress-secondary .mui-linear-progress-bar{background-color:#ce93d8}.mui-linear-progress-error .mui-linear-progress-bar{background-color:#f44336}.mui-linear-progress-warning .mui-linear-progress-bar{background-color:#ff9800}.mui-linear-progress-info .mui-linear-progress-bar{background-color:#29b6f6}.mui-linear-progress-success .mui-linear-progress-bar{background-color:#66bb6a}}.mui-textfield-root{border:0;display:inline-flex;flex-direction:column;font-family:Roboto,Helvetica,Arial,sans-serif;margin:0;min-width:0;padding:0;position:relative;vertical-align:top}.mui-textfield-fullwidth{width:100%}.mui-textfield-wrapper{align-items:center;border-radius:4px;box-sizing:border-box;color:rgba(0,0,0,.87);cursor:text;display:inline-flex;font-size:1rem;line-height:1.4375em;position:relative}.mui-textfield-label{color:rgba(0,0,0,.6);display:block;font-size:1rem;left:0;line-height:1;max-width:calc(133% - 32px);overflow:hidden;pointer-events:none;position:absolute;text-overflow:ellipsis;top:2px;transform:translate(14px,16px) scale(1);transform-origin:top left;transition:color .2s cubic-bezier(0,0,.2,1) 0ms,transform .2s cubic-bezier(0,0,.2,1) 0ms,max-width .2s cubic-bezier(0,0,.2,1) 0ms;white-space:nowrap;z-index:1}.mui-textfield-focused .mui-textfield-label,.mui-textfield-has-value .mui-textfield-label{max-width:calc(133% - 32px);transform:translate(14px,-9px) scale(.75)}.mui-textfield-focused .mui-textfield-label{color:#1976d2}.mui-textfield-error .mui-textfield-label{color:#d32f2f}.mui-textfield-disabled .mui-textfield-label{color:rgba(0,0,0,.38)}.mui-textfield-required{color:#d32f2f}.mui-textfield-size-small .mui-textfield-wrapper{font-size:.875rem;line-height:1.4375em}.mui-textfield-size-small .mui-textfield-label{font-size:.875rem;transform:translate(14px,9px) scale(1)}.mui-textfield-size-small.mui-textfield-focused .mui-textfield-label,.mui-textfield-size-small.mui-textfield-has-value .mui-textfield-label{transform:translate(14px,-9px) scale(.75)}.mui-textfield-size-small .mui-textfield-input-wrapper{padding:8.5px 14px}.mui-textfield-size-small .mui-textfield-input{font-size:.875rem}.mui-textfield-input-wrapper{padding:16.5px 14px;position:relative}.mui-textfield-input,.mui-textfield-input-wrapper{background:none;border:0;box-sizing:content-box;color:currentColor;display:block;font:inherit;height:1.4375em;letter-spacing:inherit;margin:0;min-width:0;width:100%}.mui-textfield-input{outline:none;padding:0}.mui-textfield-input::placeholder{color:rgba(0,0,0,.42);opacity:1;transition:opacity .2s cubic-bezier(0,0,.2,1) 0ms}.mui-textfield-focused .mui-textfield-input::placeholder{opacity:.42}.mui-textfield-disabled .mui-textfield-input{color:rgba(0,0,0,.38);cursor:default}textarea.mui-textfield-input{height:auto;overflow:auto;resize:none}.mui-textfield-fieldset{border:1px solid rgba(0,0,0,.23);border-radius:inherit;bottom:0;left:0;margin:0;min-width:0;overflow:hidden;padding:0 8px;pointer-events:none;position:absolute;right:0;text-align:left;top:-5px;transition:border-color .2s cubic-bezier(0,0,.2,1) 0ms}.mui-textfield-wrapper:hover .mui-textfield-fieldset{border-color:rgba(0,0,0,.87)}.mui-textfield-focused .mui-textfield-fieldset{border-color:#1976d2;border-width:2px}.mui-textfield-error .mui-textfield-fieldset,.mui-textfield-error.mui-textfield-focused .mui-textfield-fieldset{border-color:#d32f2f}.mui-textfield-disabled .mui-textfield-fieldset{border-color:rgba(0,0,0,.26)}.mui-textfield-legend{display:block;float:unset;font-size:.75em;height:11px;max-width:.01px;overflow:hidden;padding:0;transition:max-width 50ms cubic-bezier(0,0,.2,1) 0ms;visibility:hidden;white-space:nowrap;width:auto}.mui-textfield-legend>span{display:inline-block;opacity:0;padding-left:5px;padding-right:5px;visibility:visible}.mui-textfield-focused .mui-textfield-legend,.mui-textfield-has-value .mui-textfield-legend{max-width:100%;transition:max-width .1s cubic-bezier(0,0,.2,1) 50ms}.mui-textfield-helper-text{color:rgba(0,0,0,.6);font-size:.75rem;letter-spacing:.03333em;line-height:1.66;margin:3px 14px 0;text-align:left}.mui-textfield-error .mui-textfield-helper-text{color:#d32f2f}.mui-textfield-disabled .mui-textfield-helper-text{color:rgba(0,0,0,.38)}@media (prefers-color-scheme:dark){.mui-textfield-wrapper{color:hsla(0,0%,100%,.87)}.mui-textfield-label{color:hsla(0,0%,100%,.7)}.mui-textfield-focused .mui-textfield-label{color:#90caf9}.mui-textfield-input::placeholder{color:hsla(0,0%,100%,.5)}.mui-textfield-disabled .mui-textfield-input{color:hsla(0,0%,100%,.38)}.mui-textfield-fieldset{border-color:hsla(0,0%,100%,.23)}.mui-textfield-wrapper:hover .mui-textfield-fieldset{border-color:hsla(0,0%,100%,.87)}.mui-textfield-focused .mui-textfield-fieldset{border-color:#90caf9}.mui-textfield-disabled .mui-textfield-fieldset{border-color:hsla(0,0%,100%,.26)}.mui-textfield-helper-text{color:hsla(0,0%,100%,.7)}.mui-textfield-disabled .mui-textfield-helper-text{color:hsla(0,0%,100%,.38)}}.mui-radio-wrapper{align-items:center;border-radius:4px;cursor:pointer;display:inline-flex;margin:-9px;padding:9px;position:relative;transition:background-color .15s cubic-bezier(.4,0,.2,1) 0ms;vertical-align:middle}.mui-radio-disabled{cursor:default;opacity:.38;pointer-events:none}.mui-radio-input{cursor:inherit;height:100%;left:0;margin:0;opacity:0;padding:0;position:absolute;top:0;width:100%;z-index:1}.mui-radio-icon{align-items:center;appearance:none;background-color:transparent;border:0;border-radius:50%;box-sizing:border-box;color:rgba(0,0,0,.6);cursor:pointer;display:inline-flex;justify-content:center;margin:0;outline:0;padding:9px;position:relative;text-decoration:none;transition:background-color .15s cubic-bezier(.4,0,.2,1) 0ms;user-select:none;vertical-align:middle}.mui-radio-icon svg{fill:currentColor;display:inline-block;flex-shrink:0;font-size:1.5rem;height:1em;transition:fill .2s cubic-bezier(.4,0,.2,1) 0ms;user-select:none;width:1em}.mui-radio-size-small .mui-radio-icon{padding:5px}.mui-radio-size-small .mui-radio-icon svg{font-size:1.25rem}.mui-radio-size-medium .mui-radio-icon{padding:9px}.mui-radio-size-medium .mui-radio-icon svg{font-size:1.5rem}.mui-radio-icon-checked,.mui-radio-icon-unchecked{display:flex}.mui-radio-color-primary .mui-radio-input:checked~.mui-radio-icon{color:#1976d2}.mui-radio-color-secondary .mui-radio-input:checked~.mui-radio-icon{color:#dc004e}.mui-radio-color-default .mui-radio-input:checked~.mui-radio-icon,.mui-radio-label{color:rgba(0,0,0,.87)}.mui-radio-label{font-family:Roboto,Helvetica,Arial,sans-serif;font-size:1rem;letter-spacing:.00938em;line-height:1.5;margin-left:8px;user-select:none}.mui-radio-group{display:flex;flex-direction:column;flex-wrap:wrap}.mui-radio-group-row{flex-direction:row}.mui-radio-icon:after{background-color:currentColor;border-radius:50%;bottom:0;content:"";left:0;opacity:0;position:absolute;right:0;top:0;transition:opacity .15s cubic-bezier(.4,0,.2,1) 0ms}.mui-radio-wrapper:active .mui-radio-icon:after{opacity:.12}.mui-radio-input:focus-visible~.mui-radio-icon{box-shadow:0 0 0 8px rgba(25,118,210,.12)}@media (prefers-color-scheme:dark){.mui-radio-icon{color:hsla(0,0%,100%,.7)}.mui-radio-color-primary .mui-radio-input:checked~.mui-radio-icon{color:#90caf9}.mui-radio-color-primary:hover{background-color:rgba(144,202,249,.08)}.mui-radio-color-secondary .mui-radio-input:checked~.mui-radio-icon{color:#f48fb1}.mui-radio-color-secondary:hover{background-color:rgba(244,143,177,.08)}.mui-radio-color-default .mui-radio-input:checked~.mui-radio-icon,.mui-radio-label{color:hsla(0,0%,100%,.87)}.mui-radio-input:focus-visible~.mui-radio-icon{box-shadow:0 0 0 8px rgba(144,202,249,.16)}}.mui-select-wrapper{display:inline-flex;flex-direction:column;margin:8px 0;min-width:120px;position:relative;vertical-align:top}.mui-select-fullWidth{width:100%}.mui-select-disabled{opacity:.6;pointer-events:none}.mui-select-label{color:rgba(0,0,0,.6);display:block;font-family:Roboto,Helvetica,Arial,sans-serif;font-size:1rem;left:0;letter-spacing:.00938em;line-height:1.4375em;max-width:calc(100% - 24px);overflow:hidden;pointer-events:none;position:absolute;text-overflow:ellipsis;top:0;transform:translate(14px,16px) scale(1);transform-origin:top left;transition:color .2s cubic-bezier(0,0,.2,1) 0ms,transform .2s cubic-bezier(0,0,.2,1) 0ms,max-width .2s cubic-bezier(0,0,.2,1) 0ms;white-space:nowrap;z-index:1}.mui-select-label.focused{color:#1976d2;max-width:calc(133.33333% - 24px);transform:translate(14px,-9px) scale(.75)}.mui-select-control{align-items:center;color:rgba(0,0,0,.87);cursor:pointer;display:flex;font-family:Roboto,Helvetica,Arial,sans-serif;font-size:1rem;letter-spacing:.00938em;line-height:1.4375em;position:relative;user-select:none}.mui-select-control:focus{outline:none}.mui-select-size-small .mui-select-control{font-size:.875rem;line-height:1.4375em}.mui-select-size-small .mui-select-label{font-size:.875rem;transform:translate(14px,9px) scale(1)}.mui-select-size-small .mui-select-label.focused{transform:translate(14px,-9px) scale(.75)}.mui-select-size-small .mui-select-outlined{padding:8.5px 32px 8.5px 14px}.mui-select-size-small .mui-select-display{font-size:.875rem}.mui-select-outlined{border-radius:4px;padding:16.5px 32px 16.5px 14px}.mui-select-outlined .mui-select-fieldset{border:1px solid rgba(0,0,0,.23);border-radius:inherit;bottom:0;left:0;margin:0;min-width:0;overflow:hidden;padding:0 8px;pointer-events:none;position:absolute;right:0;text-align:left;top:-5px;transition:border-color .2s cubic-bezier(0,0,.2,1) 0ms}.mui-select-outlined:hover .mui-select-fieldset{border-color:rgba(0,0,0,.87)}.mui-select-open .mui-select-fieldset,.mui-select-wrapper.focused .mui-select-outlined .mui-select-fieldset{border-color:#1976d2!important;border-width:2px}.mui-select-fieldset legend{display:block;float:unset;font-size:.75em;height:11px;max-width:.01px;overflow:hidden;padding:0;transition:max-width 50ms cubic-bezier(0,0,.2,1) 0ms;visibility:hidden;white-space:nowrap;width:auto}.mui-select-label.focused~.mui-select-outlined .mui-select-fieldset legend{max-width:100%;transition:max-width .1s cubic-bezier(0,0,.2,1) 50ms}.mui-select-display{flex:1;line-height:1.4375em;min-height:1.4375em;min-width:0}.mui-select-placeholder{color:rgba(0,0,0,.4)}.mui-select-icon{fill:currentColor;color:rgba(0,0,0,.54);display:inline-block;flex-shrink:0;height:24px;pointer-events:none;position:absolute;right:7px;top:calc(50% - .7em);transition:transform .2s cubic-bezier(.4,0,.2,1) 0ms;user-select:none;width:24px}.mui-select-open .mui-select-icon{transform:rotate(180deg)}.mui-select-menu{background-color:#fff;border-radius:4px;box-shadow:0 5px 5px -3px rgba(0,0,0,.2),0 8px 10px 1px rgba(0,0,0,.14),0 3px 14px 2px rgba(0,0,0,.12);display:none;left:0;margin-top:4px;max-height:300px;opacity:0;overflow-y:auto;padding:8px 0;position:absolute;right:0;top:100%;transform:scale(.75) translateY(-8px);transform-origin:top center;transition:opacity .2s cubic-bezier(.4,0,.2,1) 0ms,transform .2s cubic-bezier(.4,0,.2,1) 0ms;z-index:1300}.mui-select-menu-open{opacity:1;transform:scale(1) translateY(0)}.mui-select-option{align-items:center;box-sizing:border-box;color:rgba(0,0,0,.87);cursor:pointer;display:flex;font-family:Roboto,Helvetica,Arial,sans-serif;font-size:1rem;justify-content:flex-start;letter-spacing:.00938em;line-height:1.5;min-height:48px;padding:6px 16px;position:relative;text-decoration:none;transition:background-color .15s cubic-bezier(.4,0,.2,1) 0ms;user-select:none;white-space:nowrap}.mui-select-option:hover{background-color:rgba(0,0,0,.04)}.mui-select-option.selected{background-color:rgba(25,118,210,.08);font-weight:500}.mui-select-option.selected:hover{background-color:rgba(25,118,210,.12)}@media (prefers-color-scheme:dark){.mui-select-label{color:hsla(0,0%,100%,.7)}.mui-select-label.focused{color:#90caf9}.mui-select-control{color:hsla(0,0%,100%,.87)}.mui-select-outlined .mui-select-fieldset{border-color:hsla(0,0%,100%,.23)}.mui-select-outlined:hover .mui-select-fieldset{border-color:hsla(0,0%,100%,.87)}.mui-select-open .mui-select-fieldset,.mui-select-wrapper.focused .mui-select-outlined .mui-select-fieldset{border-color:#90caf9!important}.mui-select-placeholder{color:hsla(0,0%,100%,.5)}.mui-select-icon{color:hsla(0,0%,100%,.7)}.mui-select-menu{background-color:#1e1e1e}.mui-select-option{color:hsla(0,0%,100%,.87)}.mui-select-option:hover{background-color:hsla(0,0%,100%,.08)}.mui-select-option.selected{background-color:rgba(144,202,249,.16)}.mui-select-option.selected:hover{background-color:rgba(144,202,249,.24)}}

package/dist/index.d.ts ADDED Viewed

@@ -0,0 +1,204 @@
+import { KTHTMLElement, KTAttribute } from 'kt.js';
+interface AlertProps {
+    class?: string;
+    style?: string;
+    sx?: Record<string, any>;
+    children: string | HTMLElement | KTHTMLElement | Array<string | HTMLElement | KTHTMLElement>;
+    severity?: 'error' | 'warning' | 'info' | 'success';
+    variant?: 'standard' | 'filled' | 'outlined';
+    icon?: HTMLElement | KTHTMLElement | false;
+    onClose?: () => void;
+}
+/**
+ * Alert component - mimics MUI Alert appearance and behavior
+ */
+declare function Alert(props: AlertProps): KTHTMLElement;
+interface ButtonProps {
+    class?: string;
+    style?: string;
+    children: string | HTMLElement | KTHTMLElement;
+    variant?: 'contained' | 'outlined' | 'text';
+    color?: 'primary' | 'secondary' | 'error' | 'warning' | 'info' | 'success';
+    size?: 'small' | 'medium' | 'large';
+    disabled?: boolean;
+    fullWidth?: boolean;
+    iconOnly?: boolean;
+    startIcon?: HTMLElement | KTHTMLElement;
+    endIcon?: HTMLElement | KTHTMLElement;
+    type?: 'button' | 'submit' | 'reset';
+    'on:click'?: (event: Event) => void;
+}
+/**
+ * Button component - mimics MUI Button appearance and behavior
+ */
+declare function Button(props: ButtonProps): KTHTMLElement;
+interface DialogProps {
+    open: boolean;
+    onClose?: () => void;
+    title?: string;
+    children?: HTMLElement | HTMLElement[] | string;
+    actions?: HTMLElement | HTMLElement[];
+    maxWidth?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | false;
+    fullWidth?: boolean;
+}
+/**
+ * Dialog component - mimics MUI Dialog appearance and behavior
+ * Only handles open/close state, title and content are passed as props
+ */
+declare function Dialog(props: DialogProps): KTHTMLElement;
+interface FormLabelProps {
+    children: string | HTMLElement | KTHTMLElement;
+    required?: boolean;
+    error?: boolean;
+    disabled?: boolean;
+    focused?: boolean;
+    filled?: boolean;
+    component?: 'label' | 'legend';
+    htmlFor?: string;
+}
+/**
+ * FormLabel component - mimics MUI FormLabel appearance and behavior
+ */
+declare function FormLabel(props: FormLabelProps): KTHTMLElement;
+interface LinearProgressProps {
+    class?: string;
+    style?: string;
+    sx?: Record<string, any>;
+    variant?: 'determinate' | 'indeterminate';
+    progress?: number;
+    color?: 'primary' | 'secondary' | 'error' | 'warning' | 'info' | 'success';
+}
+/**
+ * LinearProgress component - mimics MUI LinearProgress appearance and behavior
+ */
+declare function LinearProgress(props: LinearProgressProps): JSX.Element;
+interface TextFieldProps {
+    class?: string;
+    style?: string;
+    label?: string;
+    placeholder?: string;
+    value?: string;
+    type?: 'text' | 'password' | 'email' | 'number' | 'tel' | 'url';
+    disabled?: boolean;
+    required?: boolean;
+    error?: boolean;
+    helperText?: string;
+    fullWidth?: boolean;
+    multiline?: boolean;
+    rows?: number;
+    maxRows?: number;
+    size?: 'small' | 'medium';
+    'mui:input'?: (value: string, event: Event) => void;
+    'mui:change'?: (value: string, event: Event) => void;
+    'mui:blur'?: (value: string, event: Event) => void;
+    'mui:focus'?: (value: string, event: Event) => void;
+}
+/**
+ * TextField component - mimics MUI TextField appearance and behavior
+ */
+declare function TextField(props: TextFieldProps): KTHTMLElement;
+interface RadioProps {
+    value: string;
+    text: string | KTHTMLElement | HTMLElement;
+    checked?: boolean;
+    size?: 'small' | 'medium';
+    'mui:change'?: (checked: boolean, value: string) => void;
+    disabled?: boolean;
+    color?: 'primary' | 'secondary' | 'default';
+}
+type RadioComponent = KTHTMLElement & {
+    redrawIcon: (newValue: string) => void;
+};
+/**
+ * Radio component - mimics MUI Radio appearance and behavior
+ */
+declare function Radio(props: RadioProps): RadioComponent;
+interface RadioGroupProps {
+    class?: string;
+    style?: string;
+    value?: string;
+    name?: string;
+    size?: 'small' | 'medium';
+    options: RadioProps[];
+    'mui:change'?: (value: string) => void;
+    'mui:click'?: (checked: boolean) => void;
+    row?: boolean;
+}
+/**
+ * RadioGroup component - groups multiple radios together
+ */
+declare function RadioGroup(props: RadioGroupProps): JSX.Element;
+interface SelectOption {
+    value: string;
+    label: string;
+}
+interface SelectProps {
+    class?: string;
+    style?: string;
+    size?: 'small' | 'medium';
+    value?: string;
+    options: SelectOption[];
+    label?: string;
+    placeholder?: string;
+    'mui:change'?: (value: string) => void;
+    fullWidth?: boolean;
+    disabled?: boolean;
+}
+/**
+ * Select component - mimics MUI Select appearance and behavior
+ */
+declare function Select(props: SelectProps): JSX.Element;
+declare function DownloadIcon(props: KTAttribute): JSX.Element;
+declare function CompressIcon(props: KTAttribute): JSX.Element;
+declare function SubtitlesIcon(props: KTAttribute): JSX.Element;
+declare function SettingsIcon(props: KTAttribute): JSX.Element;
+declare function NewReleasesIcon(props: KTAttribute): JSX.Element;
+declare function FolderOpenIcon(props: KTAttribute): JSX.Element;
+declare function PlayArrowIcon(props: KTAttribute): JSX.Element;
+declare function ContentPasteIcon(props: KTAttribute): JSX.Element;
+declare function DeleteIcon(props: KTAttribute): JSX.Element;
+declare function StopIcon(props: KTAttribute): JSX.Element;
+declare function FileOpenIcon(props: KTAttribute): JSX.Element;
+declare function ColorLensIcon(props: KTAttribute): JSX.Element;
+declare function WallpaperIcon(props: KTAttribute): JSX.Element;
+declare function ExpandMoreIcon(props: KTAttribute): JSX.Element;
+declare function SaveIcon(props: KTAttribute): JSX.Element;
+declare function UploadFileIcon(props: KTAttribute): JSX.Element;
+declare function VideoFileIcon(props: KTAttribute): JSX.Element;
+declare function QueuePlayNextIcon(props: KTAttribute): JSX.Element;
+declare function MenuIcon(props: KTAttribute): SVGElement;
+declare function HomeIcon(props: KTAttribute): JSX.Element;
+declare function ContentCopyIcon(props: KTAttribute): JSX.Element;
+declare function SelectAllIcon(props: KTAttribute): JSX.Element;
+export { Alert, Button, ColorLensIcon, CompressIcon, ContentCopyIcon, ContentPasteIcon, DeleteIcon, Dialog, DownloadIcon, ExpandMoreIcon, FileOpenIcon as FileOpen, FileOpenIcon, FolderOpenIcon, FormLabel, HomeIcon, LinearProgress, MenuIcon, NewReleasesIcon, PlayArrowIcon, QueuePlayNextIcon, Radio, RadioGroup, SaveIcon, Select, SelectAllIcon, SettingsIcon, StopIcon, SubtitlesIcon, TextField, UploadFileIcon, VideoFileIcon, WallpaperIcon };

package/dist/index.iife.css ADDED Viewed

@@ -0,0 +1 @@