@ktjs/mui 0.17.9 → 0.18.1

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;
@@ -9,7 +9,7 @@ interface AlertProps {
     severity?: 'error' | 'warning' | 'info' | 'success';
     variant?: 'standard' | 'filled' | 'outlined';
     icon?: HTMLElement | KTHTMLElement | false;
-    'mui:close'?: () => void;
+    'kt:close'?: () => void;
 }
 /**s
  * Alert component - mimics MUI Alert appearance and behavior
@@ -41,7 +41,7 @@ interface CheckboxProps {
     label?: string | KTHTMLElement | HTMLElement;
     checked?: boolean;
     size?: 'small' | 'medium';
-    'mui:change'?: (checked: boolean, value: string) => void;
+    'kt:change'?: (checked: boolean, value: string) => void;
     disabled?: boolean;
     color?: 'primary' | 'secondary' | 'default' | 'success' | 'error' | 'warning';
     indeterminate?: boolean;
@@ -49,9 +49,13 @@ interface CheckboxProps {
 type KTMuiCheckbox = KTHTMLElement & {
     checked: boolean;
     value: string;
+    disabled: boolean;
 };
 type KTMuiCheckboxGroup = KTHTMLElement & {
     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[];
-    'mui:change'?: (values: string[]) => void;
+    'kt:change'?: (values: string[]) => void;
     row?: boolean;
 }
 /**
@@ -73,7 +77,7 @@ declare function CheckboxGroup(props: CheckboxGroupProps): KTMuiCheckboxGroup;
 
 interface DialogProps {
     open?: boolean;
-    'mui:close'?: () => void;
+    'kt:close'?: () => void;
     title?: string;
     children?: HTMLElement | HTMLElement[] | string;
     actions?: HTMLElement | HTMLElement[];
@@ -123,6 +127,8 @@ type KTMuiLinearProgress = KTHTMLElement$1 & {
  */
 declare function LinearProgress(props: LinearProgressProps): KTMuiLinearProgress;
 
+type ChangeHandler<T = string> = (value: T) => void;
+
 interface TextFieldProps {
     class?: string;
     style?: string;
@@ -138,15 +144,24 @@ interface TextFieldProps {
     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;
+    '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;
+    type: string;
+    disabled: boolean;
+    readonly: boolean;
+    required: boolean;
+    error: boolean;
+    helperText: string;
 };
 /**
  * TextField component - mimics MUI TextField appearance and behavior
@@ -158,7 +173,7 @@ interface RadioProps {
     text: string | KTHTMLElement | HTMLElement;
     checked?: boolean;
     size?: 'small' | 'medium';
-    'mui:change'?: (checked: boolean, value: string) => void;
+    'kt:change'?: (checked: boolean, value: string) => void;
     disabled?: boolean;
     color?: 'primary' | 'secondary' | 'default';
 }
@@ -176,8 +191,8 @@ interface RadioGroupProps {
     name?: string;
     size?: 'small' | 'medium';
     options: RadioProps[];
-    'mui:change'?: (value: string) => void;
-    'mui:click'?: (checked: boolean) => void;
+    'kt:change'?: (value: string) => void;
+    'kt:click'?: (checked: boolean) => void;
     row?: boolean;
 }
 /**
@@ -197,7 +212,7 @@ interface SelectProps {
     options: SelectOption[];
     label?: string;
     placeholder?: string;
-    'mui:change'?: (value: string) => void;
+    'kt:change'?: (value: string) => void;
     fullWidth?: boolean;
     disabled?: boolean;
 }
@@ -251,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

@@ -5,7 +5,7 @@ var __ktjs_mui__ = (function (exports, jsxRuntime, kt_js) {
      * Alert component - mimics MUI Alert appearance and behavior
      */
     function Alert(props) {
-        const { children, severity = 'info', variant = 'standard', icon, 'mui:close': onClose, sx } = props;
+        const { children, severity = 'info', variant = 'standard', icon, 'kt:close': onClose, sx } = props;
         const classes = `mui-alert mui-alert-${severity} mui-alert-${variant} ${props.class ? props.class : ''}`;
         // Convert sx object to style string
         let styleString = props.style || '';
@@ -44,12 +44,23 @@ var __ktjs_mui__ = (function (exports, jsxRuntime, kt_js) {
         return alert;
     }
 
-    const emptyFn$4 = () => { };
+    const emptyFn$3 = () => { };
+    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$3;
+    };
+
     /**
      * 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$4, } = 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 classes = [
             'mui-button',
             `mui-button-${variant}`,
@@ -91,7 +102,7 @@ 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$3 = () => { };
+    const emptyFn$2 = () => { };
     /**
      * Checkbox component - mimics MUI Checkbox appearance and behavior
      */
@@ -113,13 +124,13 @@ 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', 'mui:change': onChange = emptyFn$3, disabled = false, color = 'primary', indeterminate = false, } = props;
-        const inputRef = kt_js.ref();
+        let { checked = false, value = '', label = '', size = 'medium', 'kt:change': onChange = emptyFn$2, disabled = false, color = 'primary', indeterminate = false, } = props;
+        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', 'mui:change': onChange = emptyFn$3, 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,29 +193,56 @@ 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['mui:change'];
+            const originalChange = o['kt:change'];
             if (originalChange) {
-                o['mui:change'] = (checked, value) => {
+                o['kt:change'] = (checked, value) => {
                     originalChange(checked, value);
                     changeHandler(checked, value);
                 };
             }
             else {
-                o['mui:change'] = changeHandler;
+                o['kt:change'] = changeHandler;
             }
             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;
@@ -195,7 +254,7 @@ var __ktjs_mui__ = (function (exports, jsxRuntime, kt_js) {
      * Only handles open/close state, title and content are passed as props
      */
     function Dialog(props) {
-        let { open = false, 'mui:close': onClose = noop, 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') {
@@ -280,8 +339,67 @@ var __ktjs_mui__ = (function (exports, jsxRuntime, kt_js) {
      * - can alse be used to store normal values, but it is not reactive.
      * @param value mostly an HTMLElement
      */
-    function ref(value) {
-        return { value: value, isKT: true };
+    function ref(value, onChange) {
+        let _value = value;
+        let _onChanges = [];
+        return {
+            isKT: true,
+            get value() {
+                return _value;
+            },
+            set value(newValue) {
+                if (newValue === _value) {
+                    return;
+                }
+                // replace the old node with the new one in the DOM if both are nodes
+                if (_value instanceof Node && newValue instanceof Node) {
+                    if (newValue.contains(_value)) {
+                        _value.remove();
+                    }
+                    _value.replaceWith(newValue);
+                }
+                const oldValue = _value;
+                _value = newValue;
+                for (let i = 0; i < _onChanges.length; i++) {
+                    _onChanges[i](newValue, oldValue);
+                }
+            },
+            addOnChange: (callback) => _onChanges.push(callback),
+            removeOnChange: (callback) => {
+                for (let i = _onChanges.length - 1; i >= 0; i--) {
+                    if (_onChanges[i] === callback) {
+                        _onChanges.splice(i, 1);
+                        return true;
+                    }
+                }
+                return false;
+            },
+        };
+    }
+    /**
+     * 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;
     }
 
     /**
@@ -325,64 +443,132 @@ var __ktjs_mui__ = (function (exports, jsxRuntime, kt_js) {
         return container;
     }
 
-    const emptyFn$2 = () => { };
     /**
      * TextField component - mimics MUI TextField appearance and behavior
      */
     function TextField(props) {
-        const { label = '', placeholder = '', value = '', type = 'text', disabled = false, readonly = false, required = false, error = false, helperText = '', fullWidth = false, multiline = false, rows = 3, maxRows = 10, size = 'medium', 'mui:input': onInput = emptyFn$2, 'mui:change': onChange = emptyFn$2, 'mui:blur': onBlur = emptyFn$2, 'mui:focus': onFocus = emptyFn$2, } = props;
-        let isFocused = false;
-        const inputRef = kt_js.ref();
-        // Update container classes
-        const updateClasses = () => {
-            const hasValue = inputRef.value?.value || '';
-            const 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',
                 `mui-textfield-size-${size}`,
                 isFocused ? 'mui-textfield-focused' : '',
                 error ? 'mui-textfield-error' : '',
                 disabled ? 'mui-textfield-disabled' : '',
                 fullWidth ? 'mui-textfield-fullwidth' : '',
-                label && (isFocused || hasValue) ? 'mui-textfield-has-value' : '',
+                label && isFocused && inputEl.value ? 'mui-textfield-has-value' : '',
                 label ? '' : 'mui-textfield-no-label',
-            ];
-            container.className = classes.join(' ');
+            ].join(' ');
         };
-        const handleInput = (e) => {
-            const target = e.target;
-            updateClasses();
-            onInput(target.value, e);
+        const handleInput = () => {
+            updateContainerClass();
+            onInput(inputEl.value);
+            onInputTrim(inputEl.value.trim());
         };
-        const handleChange = (e) => {
-            const target = e.target;
-            onChange(target.value, e);
+        const handleChange = () => {
+            onChange(inputEl.value);
+            onChangeTrim(inputEl.value.trim());
         };
-        const handleFocus = (e) => {
+        const handleFocus = () => {
             isFocused = true;
-            updateClasses();
-            const target = e.target;
-            onFocus(target.value, e);
+            updateContainerClass();
+            onFocus(inputEl.value);
         };
-        const handleBlur = (e) => {
+        const handleBlur = () => {
             isFocused = false;
-            updateClasses();
-            const target = e.target;
-            onBlur(target.value, e);
+            updateContainerClass();
+            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);
-        const inputElement = multiline ? (jsxRuntime.jsx("textarea", { ref: inputRef, 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", { ref: inputRef, 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 container = (jsxRuntime.jsxs("div", { class: 'mui-textfield-root ' + (props.class ? props.class : ''), style: props.style ? props.style : '', children: [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: inputElement }), 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 && '*'] }) }) })] }), helperText && jsxRuntime.jsx("p", { class: "mui-textfield-helper-text", children: helperText })] }));
+        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 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(() => updateClasses(), 0);
-        Object.defineProperty(container, 'value', {
-            get() {
-                return inputRef.value.value;
+        setTimeout(() => updateContainerClass(), 0);
+        Object.defineProperties(container, {
+            value: {
+                get() {
+                    return inputEl.value;
+                },
+                set(newValue) {
+                    inputEl.value = newValue;
+                    updateContainerClass();
+                },
             },
-            set(newValue) {
-                inputRef.value.value = newValue;
-                updateClasses();
+            label: {
+                get() {
+                    return label;
+                },
+                set(newLabel) {
+                    label = newLabel;
+                    wrapperRef.value.redraw(); // label takes too much and should be redrawn
+                    updateContainerClass();
+                },
+            },
+            placeholder: {
+                get() {
+                    return placeholder;
+                },
+                set(newPlaceholder) {
+                    placeholder = newPlaceholder;
+                    inputEl.placeholder = getPlaceholder();
+                },
+            },
+            type: {
+                get() {
+                    return type;
+                },
+                set(newType) {
+                    type = newType || 'text';
+                    inputEl.type = type;
+                },
+            },
+            disabled: {
+                get() {
+                    return disabled;
+                },
+                set(val) {
+                    disabled = !!val;
+                    inputEl.disabled = disabled;
+                    container.classList.toggle('mui-textfield-disabled', disabled);
+                },
+            },
+            readonly: {
+                get() {
+                    return readonly;
+                },
+                set(val) {
+                    readonly = Boolean(val);
+                    inputEl.readOnly = readonly;
+                },
+            },
+            error: {
+                get() {
+                    return error;
+                },
+                set(val) {
+                    error = Boolean(val);
+                    container.classList.toggle('mui-textfield-error', error);
+                },
+            },
+            helperText: {
+                get() {
+                    return helperText;
+                },
+                set(text) {
+                    helperTextEl.textContent = text;
+                    helperTextEl.style.display = text ? 'block' : 'none';
+                },
             },
         });
         return container;
@@ -406,7 +592,7 @@ var __ktjs_mui__ = (function (exports, jsxRuntime, kt_js) {
             toggleIcon(checked);
             onChange(checked, value);
         };
-        const { checked: initChecked = false, value = '', text = '', size = 'small', 'mui:change': onChange = emptyFn$1, disabled: initDisabled = false, color = 'primary', } = props;
+        const { checked: initChecked = false, value = '', text = '', size = 'small', 'kt:change': onChange = emptyFn$1, disabled: initDisabled = false, color = 'primary', } = props;
         const inputRef = kt_js.ref();
         let checked = initChecked;
         let disabled = initDisabled;
@@ -426,7 +612,7 @@ var __ktjs_mui__ = (function (exports, jsxRuntime, kt_js) {
      * RadioGroup component - groups multiple radios together
      */
     function RadioGroup(props) {
-        const { value = '', size = 'small', 'mui:change': onChange = emptyFn$1, row = false } = props;
+        const { value = '', size = 'small', 'kt:change': onChange = emptyFn$1, row = false } = props;
         const changeHandler = (checked, value) => {
             if (checked) {
                 onChange(value);
@@ -436,15 +622,15 @@ var __ktjs_mui__ = (function (exports, jsxRuntime, kt_js) {
         const radios = props.options.map((o) => {
             o.size = size;
             o.checked = value === o.value;
-            const originalChange = o['mui:change'];
+            const originalChange = o['kt:change'];
             if (originalChange) {
-                o['mui:change'] = (checked, newValue) => {
+                o['kt:change'] = (checked, newValue) => {
                     originalChange(checked, newValue);
                     changeHandler(checked, newValue);
                 };
             }
             else {
-                o['mui:change'] = changeHandler;
+                o['kt:change'] = changeHandler;
             }
             return Radio(o);
         });
@@ -456,7 +642,7 @@ var __ktjs_mui__ = (function (exports, jsxRuntime, kt_js) {
      * Select component - mimics MUI Select appearance and behavior
      */
     function Select(props) {
-        let { value = '', options = [], label = '', placeholder = '', size = 'medium', 'mui:change': onChange = emptyFn, fullWidth = false, disabled = false, } = props;
+        let { value = '', options = [], label = '', placeholder = '', size = 'medium', 'kt:change': onChange = emptyFn, fullWidth = false, disabled = false, } = props;
         let isOpen = false;
         let isFocused = false;
         const selectRef = kt_js.ref();

package/dist/index.mjs

@@ -1,11 +1,11 @@
 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
  */
 function Alert(props) {
-    const { children, severity = 'info', variant = 'standard', icon, 'mui:close': onClose, sx } = props;
+    const { children, severity = 'info', variant = 'standard', icon, 'kt:close': onClose, sx } = props;
     const classes = `mui-alert mui-alert-${severity} mui-alert-${variant} ${props.class ? props.class : ''}`;
     // Convert sx object to style string
     let styleString = props.style || '';
@@ -44,12 +44,23 @@ function Alert(props) {
     return alert;
 }
 
-const emptyFn$4 = () => { };
+const emptyFn$3 = () => { };
+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$3;
+};
+
 /**
  * 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$4, } = 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 classes = [
         'mui-button',
         `mui-button-${variant}`,
@@ -91,7 +102,7 @@ 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$3 = () => { };
+const emptyFn$2 = () => { };
 /**
  * Checkbox component - mimics MUI Checkbox appearance and behavior
  */
@@ -113,13 +124,13 @@ 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', 'mui:change': onChange = emptyFn$3, disabled = false, color = 'primary', indeterminate = false, } = props;
-    const inputRef = ref$1();
+    let { checked = false, value = '', label = '', size = 'medium', 'kt:change': onChange = emptyFn$2, disabled = false, color = 'primary', indeterminate = false, } = props;
+    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', 'mui:change': onChange = emptyFn$3, 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,29 +193,56 @@ function CheckboxGroup(props) {
     const checkboxes = props.options.map((o) => {
         o.size = size;
         o.checked = selectedValues.has(o.value);
-        const originalChange = o['mui:change'];
+        const originalChange = o['kt:change'];
         if (originalChange) {
-            o['mui:change'] = (checked, value) => {
+            o['kt:change'] = (checked, value) => {
                 originalChange(checked, value);
                 changeHandler(checked, value);
             };
         }
         else {
-            o['mui:change'] = changeHandler;
+            o['kt:change'] = changeHandler;
         }
         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;
@@ -195,7 +254,7 @@ const noop = () => { };
  * Only handles open/close state, title and content are passed as props
  */
 function Dialog(props) {
-    let { open = false, 'mui:close': onClose = noop, 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') {
@@ -280,8 +339,67 @@ document.createElement('div');
  * - can alse be used to store normal values, but it is not reactive.
  * @param value mostly an HTMLElement
  */
-function ref(value) {
-    return { value: value, isKT: true };
+function ref(value, onChange) {
+    let _value = value;
+    let _onChanges = [];
+    return {
+        isKT: true,
+        get value() {
+            return _value;
+        },
+        set value(newValue) {
+            if (newValue === _value) {
+                return;
+            }
+            // replace the old node with the new one in the DOM if both are nodes
+            if (_value instanceof Node && newValue instanceof Node) {
+                if (newValue.contains(_value)) {
+                    _value.remove();
+                }
+                _value.replaceWith(newValue);
+            }
+            const oldValue = _value;
+            _value = newValue;
+            for (let i = 0; i < _onChanges.length; i++) {
+                _onChanges[i](newValue, oldValue);
+            }
+        },
+        addOnChange: (callback) => _onChanges.push(callback),
+        removeOnChange: (callback) => {
+            for (let i = _onChanges.length - 1; i >= 0; i--) {
+                if (_onChanges[i] === callback) {
+                    _onChanges.splice(i, 1);
+                    return true;
+                }
+            }
+            return false;
+        },
+    };
+}
+/**
+ * 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;
 }
 
 /**
@@ -325,64 +443,132 @@ function LinearProgress(props) {
     return container;
 }
 
-const emptyFn$2 = () => { };
 /**
  * TextField component - mimics MUI TextField appearance and behavior
  */
 function TextField(props) {
-    const { label = '', placeholder = '', value = '', type = 'text', disabled = false, readonly = false, required = false, error = false, helperText = '', fullWidth = false, multiline = false, rows = 3, maxRows = 10, size = 'medium', 'mui:input': onInput = emptyFn$2, 'mui:change': onChange = emptyFn$2, 'mui:blur': onBlur = emptyFn$2, 'mui:focus': onFocus = emptyFn$2, } = props;
-    let isFocused = false;
-    const inputRef = ref$1();
-    // Update container classes
-    const updateClasses = () => {
-        const hasValue = inputRef.value?.value || '';
-        const 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',
             `mui-textfield-size-${size}`,
             isFocused ? 'mui-textfield-focused' : '',
             error ? 'mui-textfield-error' : '',
             disabled ? 'mui-textfield-disabled' : '',
             fullWidth ? 'mui-textfield-fullwidth' : '',
-            label && (isFocused || hasValue) ? 'mui-textfield-has-value' : '',
+            label && isFocused && inputEl.value ? 'mui-textfield-has-value' : '',
             label ? '' : 'mui-textfield-no-label',
-        ];
-        container.className = classes.join(' ');
+        ].join(' ');
     };
-    const handleInput = (e) => {
-        const target = e.target;
-        updateClasses();
-        onInput(target.value, e);
+    const handleInput = () => {
+        updateContainerClass();
+        onInput(inputEl.value);
+        onInputTrim(inputEl.value.trim());
     };
-    const handleChange = (e) => {
-        const target = e.target;
-        onChange(target.value, e);
+    const handleChange = () => {
+        onChange(inputEl.value);
+        onChangeTrim(inputEl.value.trim());
     };
-    const handleFocus = (e) => {
+    const handleFocus = () => {
         isFocused = true;
-        updateClasses();
-        const target = e.target;
-        onFocus(target.value, e);
+        updateContainerClass();
+        onFocus(inputEl.value);
     };
-    const handleBlur = (e) => {
+    const handleBlur = () => {
         isFocused = false;
-        updateClasses();
-        const target = e.target;
-        onBlur(target.value, e);
+        updateContainerClass();
+        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);
-    const inputElement = multiline ? (jsx("textarea", { ref: inputRef, 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", { ref: inputRef, 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 container = (jsxs("div", { class: 'mui-textfield-root ' + (props.class ? props.class : ''), style: props.style ? props.style : '', children: [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: inputElement }), jsx("fieldset", { class: "mui-textfield-fieldset", children: jsx("legend", { "k-if": label, class: "mui-textfield-legend", children: jsxs("span", { children: [label, required && '*'] }) }) })] }), helperText && jsx("p", { class: "mui-textfield-helper-text", children: helperText })] }));
+    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
-    setTimeout(() => updateClasses(), 0);
-    Object.defineProperty(container, 'value', {
-        get() {
-            return inputRef.value.value;
+    setTimeout(() => updateContainerClass(), 0);
+    Object.defineProperties(container, {
+        value: {
+            get() {
+                return inputEl.value;
+            },
+            set(newValue) {
+                inputEl.value = newValue;
+                updateContainerClass();
+            },
         },
-        set(newValue) {
-            inputRef.value.value = newValue;
-            updateClasses();
+        label: {
+            get() {
+                return label;
+            },
+            set(newLabel) {
+                label = newLabel;
+                wrapperRef.value.redraw(); // label takes too much and should be redrawn
+                updateContainerClass();
+            },
+        },
+        placeholder: {
+            get() {
+                return placeholder;
+            },
+            set(newPlaceholder) {
+                placeholder = newPlaceholder;
+                inputEl.placeholder = getPlaceholder();
+            },
+        },
+        type: {
+            get() {
+                return type;
+            },
+            set(newType) {
+                type = newType || 'text';
+                inputEl.type = type;
+            },
+        },
+        disabled: {
+            get() {
+                return disabled;
+            },
+            set(val) {
+                disabled = !!val;
+                inputEl.disabled = disabled;
+                container.classList.toggle('mui-textfield-disabled', disabled);
+            },
+        },
+        readonly: {
+            get() {
+                return readonly;
+            },
+            set(val) {
+                readonly = Boolean(val);
+                inputEl.readOnly = readonly;
+            },
+        },
+        error: {
+            get() {
+                return error;
+            },
+            set(val) {
+                error = Boolean(val);
+                container.classList.toggle('mui-textfield-error', error);
+            },
+        },
+        helperText: {
+            get() {
+                return helperText;
+            },
+            set(text) {
+                helperTextEl.textContent = text;
+                helperTextEl.style.display = text ? 'block' : 'none';
+            },
         },
     });
     return container;
@@ -406,7 +592,7 @@ function Radio(props) {
         toggleIcon(checked);
         onChange(checked, value);
     };
-    const { checked: initChecked = false, value = '', text = '', size = 'small', 'mui:change': onChange = emptyFn$1, disabled: initDisabled = false, color = 'primary', } = props;
+    const { checked: initChecked = false, value = '', text = '', size = 'small', 'kt:change': onChange = emptyFn$1, disabled: initDisabled = false, color = 'primary', } = props;
     const inputRef = ref$1();
     let checked = initChecked;
     let disabled = initDisabled;
@@ -426,7 +612,7 @@ function Radio(props) {
  * RadioGroup component - groups multiple radios together
  */
 function RadioGroup(props) {
-    const { value = '', size = 'small', 'mui:change': onChange = emptyFn$1, row = false } = props;
+    const { value = '', size = 'small', 'kt:change': onChange = emptyFn$1, row = false } = props;
     const changeHandler = (checked, value) => {
         if (checked) {
             onChange(value);
@@ -436,15 +622,15 @@ function RadioGroup(props) {
     const radios = props.options.map((o) => {
         o.size = size;
         o.checked = value === o.value;
-        const originalChange = o['mui:change'];
+        const originalChange = o['kt:change'];
         if (originalChange) {
-            o['mui:change'] = (checked, newValue) => {
+            o['kt:change'] = (checked, newValue) => {
                 originalChange(checked, newValue);
                 changeHandler(checked, newValue);
             };
         }
         else {
-            o['mui:change'] = changeHandler;
+            o['kt:change'] = changeHandler;
         }
         return Radio(o);
     });
@@ -456,7 +642,7 @@ const emptyFn = () => { };
  * Select component - mimics MUI Select appearance and behavior
  */
 function Select(props) {
-    let { value = '', options = [], label = '', placeholder = '', size = 'medium', 'mui:change': onChange = emptyFn, fullWidth = false, disabled = false, } = props;
+    let { value = '', options = [], label = '', placeholder = '', size = 'medium', 'kt:change': onChange = emptyFn, fullWidth = false, disabled = false, } = props;
     let isOpen = false;
     let isFocused = false;
     const selectRef = ref$1();
@@ -528,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) {
@@ -539,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.17.9",
+  "version": "0.18.1",
   "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.0"
+    "@ktjs/core": "0.18.6"
   },
   "scripts": {
     "build": "rollup -c rollup.config.mjs",