@ktjs/mui 0.18.0 → 0.18.2

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import { KTHTMLElement, KTAttribute } from 'kt.js';
-import { KTHTMLElement as KTHTMLElement$1 } from '@ktjs/core';
+import { KTHTMLElement as KTHTMLElement$1, KTRef } from '@ktjs/core';
 
 interface AlertProps {
     class?: string;
@@ -38,20 +38,24 @@ declare function Button(props: ButtonProps): KTHTMLElement;
 
 interface CheckboxProps {
     value: string;
-    label?: string | KTHTMLElement | HTMLElement;
+    label?: string | KTHTMLElement$1 | HTMLElement;
     checked?: boolean;
     size?: 'small' | 'medium';
-    'kt:change'?: (checked: boolean, value: string) => void;
+    'kt:change'?: ((checked: boolean, value: string) => void) | KTRef<boolean>;
     disabled?: boolean;
     color?: 'primary' | 'secondary' | 'default' | 'success' | 'error' | 'warning';
     indeterminate?: boolean;
 }
-type KTMuiCheckbox = KTHTMLElement & {
+type KTMuiCheckbox = KTHTMLElement$1 & {
     checked: boolean;
     value: string;
+    disabled: boolean;
 };
-type KTMuiCheckboxGroup = KTHTMLElement & {
+type KTMuiCheckboxGroup = KTHTMLElement$1 & {
     value: string[];
+    disabled: boolean[];
+    disableAll: () => void;
+    enableAll: () => void;
 };
 /**
  * Checkbox component - mimics MUI Checkbox appearance and behavior
@@ -63,7 +67,7 @@ interface CheckboxGroupProps {
     value?: string[];
     size?: 'small' | 'medium';
     options: CheckboxProps[];
-    'kt:change'?: (values: string[]) => void;
+    'kt:change'?: ((values: string[]) => void) | KTRef<string[]>;
     row?: boolean;
 }
 /**
@@ -123,6 +127,8 @@ type KTMuiLinearProgress = KTHTMLElement$1 & {
  */
 declare function LinearProgress(props: LinearProgressProps): KTMuiLinearProgress;
 
+type ChangeHandler<T = string> = (value: T, ...args: any[]) => void;
+
 interface TextFieldProps {
     class?: string;
     style?: string;
@@ -139,14 +145,14 @@ interface TextFieldProps {
     multiline?: boolean;
     rows?: number;
     size?: 'small' | 'medium';
-    'kt:input'?: (value: string, event: Event) => void;
-    'kt-trim:input'?: (value: string, event: Event) => void;
-    'kt:change'?: (value: string, event: Event) => void;
-    'kt-trim:change'?: (value: string, event: Event) => void;
-    'kt:blur'?: (value: string, event: Event) => void;
-    'kt:focus'?: (value: string, event: Event) => void;
+    'kt:input'?: ChangeHandler | KTRef<string>;
+    'kt-trim:input'?: ChangeHandler | KTRef<string>;
+    'kt:change'?: ChangeHandler | KTRef<string>;
+    'kt-trim:change'?: ChangeHandler | KTRef<string>;
+    'kt:blur'?: ChangeHandler | KTRef<string>;
+    'kt:focus'?: ChangeHandler | KTRef<string>;
 }
-type KTMuiTextField = KTHTMLElement & {
+type KTMuiTextField = KTHTMLElement$1 & {
     value: string;
     label: string;
     placeholder: string;
@@ -260,4 +266,4 @@ declare function ContentCopyIcon(props: KTAttribute): JSX.Element;
 declare function SelectAllIcon(props: KTAttribute): JSX.Element;
 
 export { Alert, Button, Checkbox, CheckboxGroup, 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 };
-export type { KTMuiDialog, KTMuiLinearProgress };
+export type { KTMuiDialog, KTMuiLinearProgress, KTMuiTextField };

package/dist/index.iife.js

@@ -44,12 +44,23 @@ var __ktjs_mui__ = (function (exports, jsxRuntime, kt_js) {
         return alert;
     }
 
-    const emptyFn$3 = () => { };
+    const emptyFn$2 = () => { };
+    const generateHandler = (props, key) => {
+        const handler = props[key];
+        if (typeof handler === 'function') {
+            return handler;
+        }
+        else if (handler && typeof handler === 'object' && handler.isKT) {
+            return (value) => (handler.value = value);
+        }
+        return emptyFn$2;
+    };
+
     /**
      * Button component - mimics MUI Button appearance and behavior
      */
     function Button(props) {
-        const { children, variant = 'text', color = 'primary', size = 'medium', disabled = false, fullWidth = false, iconOnly = false, startIcon, endIcon, type = 'button', 'on:click': onClick = emptyFn$3, } = props;
+        const { children, variant = 'text', color = 'primary', size = 'medium', disabled = false, fullWidth = false, iconOnly = false, startIcon, endIcon, type = 'button', 'on:click': onClick = emptyFn$2, } = props;
         const classes = [
             'mui-button',
             `mui-button-${variant}`,
@@ -91,7 +102,6 @@ var __ktjs_mui__ = (function (exports, jsxRuntime, kt_js) {
         return (jsxRuntime.jsxs("button", { class: classes, style: props.style ? props.style : '', type: type, disabled: disabled, "on:click": handleClick, children: [startIcon && jsxRuntime.jsx("span", { class: "mui-button-start-icon", children: startIcon }), jsxRuntime.jsx("span", { class: "mui-button-label", children: children }), endIcon && jsxRuntime.jsx("span", { class: "mui-button-end-icon", children: endIcon }), jsxRuntime.jsx("span", { class: "mui-button-ripple" })] }));
     }
 
-    const emptyFn$2 = () => { };
     /**
      * Checkbox component - mimics MUI Checkbox appearance and behavior
      */
@@ -113,13 +123,14 @@ var __ktjs_mui__ = (function (exports, jsxRuntime, kt_js) {
             if (disabled) {
                 return;
             }
-            checked = inputRef.value.checked;
+            checked = inputEl.checked;
             indeterminate = false;
             toggleIcon(checked, indeterminate);
             onChange(checked, value);
         };
-        let { checked = false, value = '', label = '', size = 'medium', 'kt:change': onChange = emptyFn$2, disabled = false, color = 'primary', indeterminate = false, } = props;
-        const inputRef = kt_js.ref();
+        let { checked = false, value = '', label = '', size = 'medium', disabled = false, color = 'primary', indeterminate = false, } = props;
+        const onChange = generateHandler(props, 'kt:change');
+        const inputEl = (jsxRuntime.jsx("input", { type: "checkbox", class: "mui-checkbox-input", checked: checked, value: value, disabled: disabled, "on:change": handleChange }));
         // Unchecked icon
         const uncheckedIcon = (jsxRuntime.jsx("span", { class: "mui-checkbox-icon-unchecked", children: jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", children: jsxRuntime.jsx("path", { d: "M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z" }) }) }));
         // Checked icon
@@ -128,26 +139,47 @@ var __ktjs_mui__ = (function (exports, jsxRuntime, kt_js) {
         const indeterminateIcon = (jsxRuntime.jsx("span", { class: "mui-checkbox-icon-indeterminate", children: jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", children: jsxRuntime.jsx("path", { d: "M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10H7v-2h10v2z" }) }) }));
         // Initialize icon state
         toggleIcon(checked, indeterminate);
-        const container = (jsxRuntime.jsxs("label", { class: `mui-checkbox-wrapper mui-checkbox-size-${size} ${disabled ? 'mui-checkbox-disabled' : ''} mui-checkbox-color-${color}`, children: [jsxRuntime.jsx("input", { ref: inputRef, type: "checkbox", class: "mui-checkbox-input", checked: checked, value: value, disabled: disabled, "on:change": handleChange }), jsxRuntime.jsxs("span", { class: "mui-checkbox-icon", children: [uncheckedIcon, checkedIcon, indeterminateIcon] }), jsxRuntime.jsx("span", { "k-if": label, class: "mui-checkbox-label", children: label })] }));
-        Object.defineProperty(container, 'checked', {
-            get() {
-                return checked;
+        const container = (jsxRuntime.jsxs("label", { class: `mui-checkbox-wrapper mui-checkbox-size-${size} ${disabled ? 'mui-checkbox-disabled' : ''} mui-checkbox-color-${color}`, children: [inputEl, jsxRuntime.jsxs("span", { class: "mui-checkbox-icon", children: [uncheckedIcon, checkedIcon, indeterminateIcon] }), jsxRuntime.jsx("span", { "k-if": label, class: "mui-checkbox-label", children: label })] }));
+        Object.defineProperties(container, {
+            checked: {
+                get() {
+                    return checked;
+                },
+                set(newChecked) {
+                    checked = newChecked;
+                    indeterminate = false;
+                    inputEl.checked = checked;
+                    toggleIcon(checked, indeterminate);
+                },
             },
-            set(newChecked) {
-                checked = newChecked;
-                indeterminate = false;
-                inputRef.value.checked = checked;
-                toggleIcon(checked, indeterminate);
+            value: {
+                get() {
+                    return value;
+                },
+                set(newValue) {
+                    value = newValue;
+                    inputEl.value = value;
+                },
+            },
+            disabled: {
+                get() {
+                    return disabled;
+                },
+                set(newDisabled) {
+                    disabled = Boolean(newDisabled);
+                    inputEl.disabled = disabled;
+                    container.classList.toggle('mui-checkbox-disabled', disabled);
+                },
             },
         });
-        container.value = value;
         return container;
     }
     /**
      * CheckboxGroup component - groups multiple checkboxes together
      */
     function CheckboxGroup(props) {
-        let { value = [], size = 'medium', 'kt:change': onChange = emptyFn$2, row = false } = props;
+        let { value = [], size = 'medium', row = false } = props;
+        const onChange = generateHandler(props, 'kt:change');
         let selectedValues = new Set(value);
         const changeHandler = (checked, checkboxValue) => {
             if (checked) {
@@ -161,7 +193,7 @@ var __ktjs_mui__ = (function (exports, jsxRuntime, kt_js) {
         const checkboxes = props.options.map((o) => {
             o.size = size;
             o.checked = selectedValues.has(o.value);
-            const originalChange = o['kt:change'];
+            const originalChange = generateHandler(o, 'kt:change');
             if (originalChange) {
                 o['kt:change'] = (checked, value) => {
                     originalChange(checked, value);
@@ -174,28 +206,55 @@ var __ktjs_mui__ = (function (exports, jsxRuntime, kt_js) {
             return Checkbox(o);
         });
         const container = (jsxRuntime.jsx("div", { class: `mui-checkbox-group ${row ? 'mui-checkbox-group-row' : ''} ${props.class ? props.class : ''}`, style: props.style ? props.style : '', role: "group", children: checkboxes }));
-        Object.defineProperty(container, 'value', {
-            get() {
-                return Array.from(selectedValues);
+        Object.defineProperties(container, {
+            value: {
+                get() {
+                    return Array.from(selectedValues);
+                },
+                set(newValues) {
+                    selectedValues = new Set(newValues);
+                    for (let i = 0; i < checkboxes.length; i++) {
+                        const checkbox = checkboxes[i];
+                        checkbox.checked = selectedValues.has(checkbox.value);
+                    }
+                },
             },
-            set(newValues) {
-                selectedValues = new Set(newValues);
-                for (let i = 0; i < checkboxes.length; i++) {
-                    const checkbox = checkboxes[i];
-                    checkbox.checked = selectedValues.has(checkbox.value);
-                }
+            disabled: {
+                get() {
+                    return checkboxes.map((cb) => cb.disabled);
+                },
+                set(newDisabled) {
+                    for (let i = 0; i < checkboxes.length; i++) {
+                        const checkbox = checkboxes[i];
+                        checkbox.disabled = Boolean(newDisabled);
+                    }
+                },
+            },
+            disableAll: {
+                value: () => {
+                    for (let i = 0; i < checkboxes.length; i++) {
+                        checkboxes[i].disabled = true;
+                    }
+                },
+            },
+            enableAll: {
+                value: () => {
+                    for (let i = 0; i < checkboxes.length; i++) {
+                        checkboxes[i].disabled = false;
+                    }
+                },
             },
         });
         return container;
     }
 
-    const noop$1 = () => { };
+    const noop = () => { };
     /**
      * Dialog component - mimics MUI Dialog appearance and behavior
      * Only handles open/close state, title and content are passed as props
      */
     function Dialog(props) {
-        let { open = false, 'kt:close': onClose = noop$1, title, children, actions, maxWidth = 'sm', fullWidth = false, } = props;
+        let { open = false, 'kt:close': onClose = noop, title, children, actions, maxWidth = 'sm', fullWidth = false, } = props;
         // Handle ESC key - store handler for cleanup
         const keyDownHandler = (e) => {
             if (e.key === 'Escape') {
@@ -317,6 +376,31 @@ var __ktjs_mui__ = (function (exports, jsxRuntime, kt_js) {
             },
         };
     }
+    /**
+     * A helper to create redrawable elements
+     * ```tsx
+     * export function MyComponent() {
+     *    let aa = 10;
+     *    // ...
+     *    // aa might be changed
+     *    return createRedrawable(() => <div>{aa}</div>);
+     * }
+     * ```
+     * Then the returned element has a `redraw` method to redraw itself with new values.
+     * @param creator a simple creator function that returns an element
+     * @returns created element's ref
+     */
+    function createRedrawable(creator) {
+        const elRef = ref();
+        elRef.value = creator();
+        const redraw = () => {
+            elRef.value = creator(); // ref setter automatically calls replaceWith
+            elRef.value.redraw = redraw;
+            return elRef.value;
+        };
+        elRef.value.redraw = redraw;
+        return elRef;
+    }
 
     /**
      * LinearProgress component - mimics MUI LinearProgress appearance and behavior
@@ -359,15 +443,17 @@ var __ktjs_mui__ = (function (exports, jsxRuntime, kt_js) {
         return container;
     }
 
-    const noop = () => { };
     /**
      * TextField component - mimics MUI TextField appearance and behavior
      */
     function TextField(props) {
-        let { label = '', placeholder = '', value = '', type = 'text', disabled = false, readonly = false, required = false, error = false, helperText = '', fullWidth = false, multiline = false, rows = 3, size = 'medium', 'kt:input': onInput = noop, 'kt-trim:input': onInputTrim = noop, 'kt:change': onChange = noop, 'kt-trim:change': onChangeTrim = noop, 'kt:blur': onBlur = noop, 'kt:focus': onFocus = noop, } = props;
-        let isFocused = false;
-        const helperTextEl = jsxRuntime.jsx("p", { class: "mui-textfield-helper-text", children: helperText });
-        // Update container classes
+        let { label = '', placeholder = '', value = '', type = 'text', disabled = false, readonly = false, required = false, error = false, helperText = '', fullWidth = false, multiline = false, rows = 3, size = 'medium', } = props;
+        const onInput = generateHandler(props, 'kt:input');
+        const onInputTrim = generateHandler(props, 'kt-trim:input');
+        const onChange = generateHandler(props, 'kt:change');
+        const onChangeTrim = generateHandler(props, 'kt-trim:change');
+        const onBlur = generateHandler(props, 'kt:blur');
+        const onFocus = generateHandler(props, 'kt:focus');
         const updateContainerClass = () => {
             container.className = [
                 'mui-textfield-root',
@@ -380,36 +466,32 @@ var __ktjs_mui__ = (function (exports, jsxRuntime, kt_js) {
                 label ? '' : 'mui-textfield-no-label',
             ].join(' ');
         };
-        const handleInput = (e) => {
-            const target = e.target;
+        const handleInput = () => {
             updateContainerClass();
-            onInput(target.value, e);
-            onInputTrim(target.value.trim(), e);
+            onInput(inputEl.value);
+            onInputTrim(inputEl.value.trim());
         };
-        const handleChange = (e) => {
-            const target = e.target;
-            onChange(target.value, e);
-            onChangeTrim(target.value.trim(), e);
+        const handleChange = () => {
+            onChange(inputEl.value);
+            onChangeTrim(inputEl.value.trim());
         };
-        const handleFocus = (e) => {
+        const handleFocus = () => {
             isFocused = true;
             updateContainerClass();
-            const target = e.target;
-            onFocus(target.value, e);
+            onFocus(inputEl.value);
         };
-        const handleBlur = (e) => {
+        const handleBlur = () => {
             isFocused = false;
             updateContainerClass();
-            const target = e.target;
-            onBlur(target.value, e);
+            onBlur(inputEl.value);
         };
-        // Create input or textarea element
-        // Only show placeholder when label is floating (focused or has value)
         const getPlaceholder = () => (label && !isFocused && !value ? '' : placeholder);
+        let isFocused = false;
         const inputEl = multiline
             ? (jsxRuntime.jsx("textarea", { class: "mui-textfield-input", placeholder: getPlaceholder(), value: value, disabled: disabled, readOnly: readonly, required: required, rows: rows, "on:input": handleInput, "on:change": handleChange, "on:focus": handleFocus, "on:blur": handleBlur }))
             : (jsxRuntime.jsx("input", { type: type, class: "mui-textfield-input", placeholder: getPlaceholder(), value: value, disabled: disabled, readOnly: readonly, required: required, "on:input": handleInput, "on:change": handleChange, "on:focus": handleFocus, "on:blur": handleBlur }));
-        const wrapperRef = kt_js.createRedrawable(() => (jsxRuntime.jsxs("div", { class: "mui-textfield-wrapper", children: [jsxRuntime.jsxs("label", { "k-if": label, class: "mui-textfield-label", children: [label, required && jsxRuntime.jsx("span", { class: "mui-textfield-required", children: "*" })] }), jsxRuntime.jsx("div", { class: "mui-textfield-input-wrapper", children: inputEl }), jsxRuntime.jsx("fieldset", { class: "mui-textfield-fieldset", children: jsxRuntime.jsx("legend", { "k-if": label, class: "mui-textfield-legend", children: jsxRuntime.jsxs("span", { children: [label, required && '*'] }) }) })] })));
+        const helperTextEl = jsxRuntime.jsx("p", { class: "mui-textfield-helper-text", children: helperText });
+        const wrapperRef = createRedrawable(() => (jsxRuntime.jsxs("div", { class: "mui-textfield-wrapper", children: [jsxRuntime.jsxs("label", { "k-if": label, class: "mui-textfield-label", children: [label, required && jsxRuntime.jsx("span", { class: "mui-textfield-required", children: "*" })] }), jsxRuntime.jsx("div", { class: "mui-textfield-input-wrapper", children: inputEl }), jsxRuntime.jsx("fieldset", { class: "mui-textfield-fieldset", children: jsxRuntime.jsx("legend", { "k-if": label, class: "mui-textfield-legend", children: jsxRuntime.jsxs("span", { children: [label, required && '*'] }) }) })] })));
         const container = (jsxRuntime.jsxs("div", { class: 'mui-textfield-root ' + (props.class ? props.class : ''), style: props.style ? props.style : '', children: [wrapperRef, helperTextEl] }));
         // Initialize classes
         setTimeout(() => updateContainerClass(), 0);

package/dist/index.mjs

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'kt.js/jsx-runtime';
-import { ref as ref$1, createRedrawable } from 'kt.js';
+import { ref as ref$1, createRedrawable as createRedrawable$1 } from 'kt.js';
 
 /**s
  * Alert component - mimics MUI Alert appearance and behavior
@@ -44,12 +44,23 @@ function Alert(props) {
     return alert;
 }
 
-const emptyFn$3 = () => { };
+const emptyFn$2 = () => { };
+const generateHandler = (props, key) => {
+    const handler = props[key];
+    if (typeof handler === 'function') {
+        return handler;
+    }
+    else if (handler && typeof handler === 'object' && handler.isKT) {
+        return (value) => (handler.value = value);
+    }
+    return emptyFn$2;
+};
+
 /**
  * Button component - mimics MUI Button appearance and behavior
  */
 function Button(props) {
-    const { children, variant = 'text', color = 'primary', size = 'medium', disabled = false, fullWidth = false, iconOnly = false, startIcon, endIcon, type = 'button', 'on:click': onClick = emptyFn$3, } = props;
+    const { children, variant = 'text', color = 'primary', size = 'medium', disabled = false, fullWidth = false, iconOnly = false, startIcon, endIcon, type = 'button', 'on:click': onClick = emptyFn$2, } = props;
     const classes = [
         'mui-button',
         `mui-button-${variant}`,
@@ -91,7 +102,6 @@ function Button(props) {
     return (jsxs("button", { class: classes, style: props.style ? props.style : '', type: type, disabled: disabled, "on:click": handleClick, children: [startIcon && jsx("span", { class: "mui-button-start-icon", children: startIcon }), jsx("span", { class: "mui-button-label", children: children }), endIcon && jsx("span", { class: "mui-button-end-icon", children: endIcon }), jsx("span", { class: "mui-button-ripple" })] }));
 }
 
-const emptyFn$2 = () => { };
 /**
  * Checkbox component - mimics MUI Checkbox appearance and behavior
  */
@@ -113,13 +123,14 @@ function Checkbox(props) {
         if (disabled) {
             return;
         }
-        checked = inputRef.value.checked;
+        checked = inputEl.checked;
         indeterminate = false;
         toggleIcon(checked, indeterminate);
         onChange(checked, value);
     };
-    let { checked = false, value = '', label = '', size = 'medium', 'kt:change': onChange = emptyFn$2, disabled = false, color = 'primary', indeterminate = false, } = props;
-    const inputRef = ref$1();
+    let { checked = false, value = '', label = '', size = 'medium', disabled = false, color = 'primary', indeterminate = false, } = props;
+    const onChange = generateHandler(props, 'kt:change');
+    const inputEl = (jsx("input", { type: "checkbox", class: "mui-checkbox-input", checked: checked, value: value, disabled: disabled, "on:change": handleChange }));
     // Unchecked icon
     const uncheckedIcon = (jsx("span", { class: "mui-checkbox-icon-unchecked", children: jsx("svg", { viewBox: "0 0 24 24", children: jsx("path", { d: "M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z" }) }) }));
     // Checked icon
@@ -128,26 +139,47 @@ function Checkbox(props) {
     const indeterminateIcon = (jsx("span", { class: "mui-checkbox-icon-indeterminate", children: jsx("svg", { viewBox: "0 0 24 24", children: jsx("path", { d: "M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10H7v-2h10v2z" }) }) }));
     // Initialize icon state
     toggleIcon(checked, indeterminate);
-    const container = (jsxs("label", { class: `mui-checkbox-wrapper mui-checkbox-size-${size} ${disabled ? 'mui-checkbox-disabled' : ''} mui-checkbox-color-${color}`, children: [jsx("input", { ref: inputRef, type: "checkbox", class: "mui-checkbox-input", checked: checked, value: value, disabled: disabled, "on:change": handleChange }), jsxs("span", { class: "mui-checkbox-icon", children: [uncheckedIcon, checkedIcon, indeterminateIcon] }), jsx("span", { "k-if": label, class: "mui-checkbox-label", children: label })] }));
-    Object.defineProperty(container, 'checked', {
-        get() {
-            return checked;
+    const container = (jsxs("label", { class: `mui-checkbox-wrapper mui-checkbox-size-${size} ${disabled ? 'mui-checkbox-disabled' : ''} mui-checkbox-color-${color}`, children: [inputEl, jsxs("span", { class: "mui-checkbox-icon", children: [uncheckedIcon, checkedIcon, indeterminateIcon] }), jsx("span", { "k-if": label, class: "mui-checkbox-label", children: label })] }));
+    Object.defineProperties(container, {
+        checked: {
+            get() {
+                return checked;
+            },
+            set(newChecked) {
+                checked = newChecked;
+                indeterminate = false;
+                inputEl.checked = checked;
+                toggleIcon(checked, indeterminate);
+            },
         },
-        set(newChecked) {
-            checked = newChecked;
-            indeterminate = false;
-            inputRef.value.checked = checked;
-            toggleIcon(checked, indeterminate);
+        value: {
+            get() {
+                return value;
+            },
+            set(newValue) {
+                value = newValue;
+                inputEl.value = value;
+            },
+        },
+        disabled: {
+            get() {
+                return disabled;
+            },
+            set(newDisabled) {
+                disabled = Boolean(newDisabled);
+                inputEl.disabled = disabled;
+                container.classList.toggle('mui-checkbox-disabled', disabled);
+            },
         },
     });
-    container.value = value;
     return container;
 }
 /**
  * CheckboxGroup component - groups multiple checkboxes together
  */
 function CheckboxGroup(props) {
-    let { value = [], size = 'medium', 'kt:change': onChange = emptyFn$2, row = false } = props;
+    let { value = [], size = 'medium', row = false } = props;
+    const onChange = generateHandler(props, 'kt:change');
     let selectedValues = new Set(value);
     const changeHandler = (checked, checkboxValue) => {
         if (checked) {
@@ -161,7 +193,7 @@ function CheckboxGroup(props) {
     const checkboxes = props.options.map((o) => {
         o.size = size;
         o.checked = selectedValues.has(o.value);
-        const originalChange = o['kt:change'];
+        const originalChange = generateHandler(o, 'kt:change');
         if (originalChange) {
             o['kt:change'] = (checked, value) => {
                 originalChange(checked, value);
@@ -174,28 +206,55 @@ function CheckboxGroup(props) {
         return Checkbox(o);
     });
     const container = (jsx("div", { class: `mui-checkbox-group ${row ? 'mui-checkbox-group-row' : ''} ${props.class ? props.class : ''}`, style: props.style ? props.style : '', role: "group", children: checkboxes }));
-    Object.defineProperty(container, 'value', {
-        get() {
-            return Array.from(selectedValues);
+    Object.defineProperties(container, {
+        value: {
+            get() {
+                return Array.from(selectedValues);
+            },
+            set(newValues) {
+                selectedValues = new Set(newValues);
+                for (let i = 0; i < checkboxes.length; i++) {
+                    const checkbox = checkboxes[i];
+                    checkbox.checked = selectedValues.has(checkbox.value);
+                }
+            },
         },
-        set(newValues) {
-            selectedValues = new Set(newValues);
-            for (let i = 0; i < checkboxes.length; i++) {
-                const checkbox = checkboxes[i];
-                checkbox.checked = selectedValues.has(checkbox.value);
-            }
+        disabled: {
+            get() {
+                return checkboxes.map((cb) => cb.disabled);
+            },
+            set(newDisabled) {
+                for (let i = 0; i < checkboxes.length; i++) {
+                    const checkbox = checkboxes[i];
+                    checkbox.disabled = Boolean(newDisabled);
+                }
+            },
+        },
+        disableAll: {
+            value: () => {
+                for (let i = 0; i < checkboxes.length; i++) {
+                    checkboxes[i].disabled = true;
+                }
+            },
+        },
+        enableAll: {
+            value: () => {
+                for (let i = 0; i < checkboxes.length; i++) {
+                    checkboxes[i].disabled = false;
+                }
+            },
         },
     });
     return container;
 }
 
-const noop$1 = () => { };
+const noop = () => { };
 /**
  * Dialog component - mimics MUI Dialog appearance and behavior
  * Only handles open/close state, title and content are passed as props
  */
 function Dialog(props) {
-    let { open = false, 'kt:close': onClose = noop$1, title, children, actions, maxWidth = 'sm', fullWidth = false, } = props;
+    let { open = false, 'kt:close': onClose = noop, title, children, actions, maxWidth = 'sm', fullWidth = false, } = props;
     // Handle ESC key - store handler for cleanup
     const keyDownHandler = (e) => {
         if (e.key === 'Escape') {
@@ -317,6 +376,31 @@ function ref(value, onChange) {
         },
     };
 }
+/**
+ * A helper to create redrawable elements
+ * ```tsx
+ * export function MyComponent() {
+ *    let aa = 10;
+ *    // ...
+ *    // aa might be changed
+ *    return createRedrawable(() => <div>{aa}</div>);
+ * }
+ * ```
+ * Then the returned element has a `redraw` method to redraw itself with new values.
+ * @param creator a simple creator function that returns an element
+ * @returns created element's ref
+ */
+function createRedrawable(creator) {
+    const elRef = ref();
+    elRef.value = creator();
+    const redraw = () => {
+        elRef.value = creator(); // ref setter automatically calls replaceWith
+        elRef.value.redraw = redraw;
+        return elRef.value;
+    };
+    elRef.value.redraw = redraw;
+    return elRef;
+}
 
 /**
  * LinearProgress component - mimics MUI LinearProgress appearance and behavior
@@ -359,15 +443,17 @@ function LinearProgress(props) {
     return container;
 }
 
-const noop = () => { };
 /**
  * TextField component - mimics MUI TextField appearance and behavior
  */
 function TextField(props) {
-    let { label = '', placeholder = '', value = '', type = 'text', disabled = false, readonly = false, required = false, error = false, helperText = '', fullWidth = false, multiline = false, rows = 3, size = 'medium', 'kt:input': onInput = noop, 'kt-trim:input': onInputTrim = noop, 'kt:change': onChange = noop, 'kt-trim:change': onChangeTrim = noop, 'kt:blur': onBlur = noop, 'kt:focus': onFocus = noop, } = props;
-    let isFocused = false;
-    const helperTextEl = jsx("p", { class: "mui-textfield-helper-text", children: helperText });
-    // Update container classes
+    let { label = '', placeholder = '', value = '', type = 'text', disabled = false, readonly = false, required = false, error = false, helperText = '', fullWidth = false, multiline = false, rows = 3, size = 'medium', } = props;
+    const onInput = generateHandler(props, 'kt:input');
+    const onInputTrim = generateHandler(props, 'kt-trim:input');
+    const onChange = generateHandler(props, 'kt:change');
+    const onChangeTrim = generateHandler(props, 'kt-trim:change');
+    const onBlur = generateHandler(props, 'kt:blur');
+    const onFocus = generateHandler(props, 'kt:focus');
     const updateContainerClass = () => {
         container.className = [
             'mui-textfield-root',
@@ -380,35 +466,31 @@ function TextField(props) {
             label ? '' : 'mui-textfield-no-label',
         ].join(' ');
     };
-    const handleInput = (e) => {
-        const target = e.target;
+    const handleInput = () => {
         updateContainerClass();
-        onInput(target.value, e);
-        onInputTrim(target.value.trim(), e);
+        onInput(inputEl.value);
+        onInputTrim(inputEl.value.trim());
     };
-    const handleChange = (e) => {
-        const target = e.target;
-        onChange(target.value, e);
-        onChangeTrim(target.value.trim(), e);
+    const handleChange = () => {
+        onChange(inputEl.value);
+        onChangeTrim(inputEl.value.trim());
     };
-    const handleFocus = (e) => {
+    const handleFocus = () => {
         isFocused = true;
         updateContainerClass();
-        const target = e.target;
-        onFocus(target.value, e);
+        onFocus(inputEl.value);
     };
-    const handleBlur = (e) => {
+    const handleBlur = () => {
         isFocused = false;
         updateContainerClass();
-        const target = e.target;
-        onBlur(target.value, e);
+        onBlur(inputEl.value);
     };
-    // Create input or textarea element
-    // Only show placeholder when label is floating (focused or has value)
     const getPlaceholder = () => (label && !isFocused && !value ? '' : placeholder);
+    let isFocused = false;
     const inputEl = multiline
         ? (jsx("textarea", { class: "mui-textfield-input", placeholder: getPlaceholder(), value: value, disabled: disabled, readOnly: readonly, required: required, rows: rows, "on:input": handleInput, "on:change": handleChange, "on:focus": handleFocus, "on:blur": handleBlur }))
         : (jsx("input", { type: type, class: "mui-textfield-input", placeholder: getPlaceholder(), value: value, disabled: disabled, readOnly: readonly, required: required, "on:input": handleInput, "on:change": handleChange, "on:focus": handleFocus, "on:blur": handleBlur }));
+    const helperTextEl = jsx("p", { class: "mui-textfield-helper-text", children: helperText });
     const wrapperRef = createRedrawable(() => (jsxs("div", { class: "mui-textfield-wrapper", children: [jsxs("label", { "k-if": label, class: "mui-textfield-label", children: [label, required && jsx("span", { class: "mui-textfield-required", children: "*" })] }), jsx("div", { class: "mui-textfield-input-wrapper", children: inputEl }), jsx("fieldset", { class: "mui-textfield-fieldset", children: jsx("legend", { "k-if": label, class: "mui-textfield-legend", children: jsxs("span", { children: [label, required && '*'] }) }) })] })));
     const container = (jsxs("div", { class: 'mui-textfield-root ' + (props.class ? props.class : ''), style: props.style ? props.style : '', children: [wrapperRef, helperTextEl] }));
     // Initialize classes
@@ -632,7 +714,7 @@ function Select(props) {
             }
         }
     };
-    const valueDisplay = createRedrawable(() => {
+    const valueDisplay = createRedrawable$1(() => {
         const o = options.find((opt) => opt.value === value);
         let inner;
         if (o === undefined) {
@@ -643,7 +725,7 @@ function Select(props) {
         }
         return jsx("div", { class: "mui-select-display", children: inner });
     });
-    const menu = createRedrawable(() => {
+    const menu = createRedrawable$1(() => {
         return (jsx("div", { class: "mui-select-menu", style: { display: 'none' }, children: options.map((option) => (jsx("div", { class: `mui-select-option ${option.value === value ? 'selected' : ''}`, "on:click": () => handleOptionClick(option.value), children: option.label }))) }));
     });
     // Create container

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ktjs/mui",
-  "version": "0.18.0",
+  "version": "0.18.2",
   "description": "Material-UI inspired components for kt.js - pre-styled UI components",
   "type": "module",
   "module": "./dist/index.mjs",
@@ -35,7 +35,7 @@
     "directory": "packages/mui"
   },
   "dependencies": {
-    "@ktjs/core": "0.18.4"
+    "@ktjs/core": "0.18.6"
   },
   "scripts": {
     "build": "rollup -c rollup.config.mjs",