@ktjs/mui 0.17.8 → 0.18.0

package/dist/index.d.ts

@@ -9,9 +9,9 @@ interface AlertProps {
     severity?: 'error' | 'warning' | 'info' | 'success';
     variant?: 'standard' | 'filled' | 'outlined';
     icon?: HTMLElement | KTHTMLElement | false;
-    onClose?: () => void;
+    'kt:close'?: () => void;
 }
-/**
+/**s
  * Alert component - mimics MUI Alert appearance and behavior
  */
 declare function Alert(props: AlertProps): KTHTMLElement;
@@ -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;
@@ -63,7 +63,7 @@ interface CheckboxGroupProps {
     value?: string[];
     size?: 'small' | 'medium';
     options: CheckboxProps[];
-    'mui:change'?: (values: string[]) => void;
+    'kt:change'?: (values: string[]) => void;
     row?: boolean;
 }
 /**
@@ -73,7 +73,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[];
@@ -138,15 +138,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'?: (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;
 }
 type KTMuiTextField = KTHTMLElement & {
     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 +167,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 +185,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 +206,7 @@ interface SelectProps {
     options: SelectOption[];
     label?: string;
     placeholder?: string;
-    'mui:change'?: (value: string) => void;
+    'kt:change'?: (value: string) => void;
     fullWidth?: boolean;
     disabled?: boolean;
 }

package/dist/index.iife.js

@@ -1,14 +1,12 @@
 var __ktjs_mui__ = (function (exports, jsxRuntime, kt_js) {
     'use strict';
 
-    /**
+    /**s
      * Alert component - mimics MUI Alert appearance and behavior
      */
     function Alert(props) {
-        const { children, severity = 'info', variant = 'standard', icon, onClose, sx } = props;
-        const classes = ['mui-alert', `mui-alert-${severity}`, `mui-alert-${variant}`, props.class ? props.class : '']
-            .filter(Boolean)
-            .join(' ');
+        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 || '';
         if (sx) {
@@ -46,12 +44,12 @@ var __ktjs_mui__ = (function (exports, jsxRuntime, kt_js) {
         return alert;
     }
 
-    const emptyFn$4 = () => { };
+    const 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}`,
@@ -93,7 +91,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
      */
@@ -120,7 +118,7 @@ var __ktjs_mui__ = (function (exports, jsxRuntime, kt_js) {
             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;
+        let { checked = false, value = '', label = '', size = 'medium', 'kt:change': onChange = emptyFn$2, disabled = false, color = 'primary', indeterminate = false, } = props;
         const inputRef = kt_js.ref();
         // 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" }) }) }));
@@ -149,7 +147,7 @@ var __ktjs_mui__ = (function (exports, jsxRuntime, kt_js) {
      * 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', 'kt:change': onChange = emptyFn$2, row = false } = props;
         let selectedValues = new Set(value);
         const changeHandler = (checked, checkboxValue) => {
             if (checked) {
@@ -163,15 +161,15 @@ 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);
         });
@@ -191,13 +189,13 @@ var __ktjs_mui__ = (function (exports, jsxRuntime, kt_js) {
         return container;
     }
 
-    const noop = () => { };
+    const noop$1 = () => { };
     /**
      * 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, 'mui:close': onClose = noop, title, children, actions, maxWidth = 'sm', fullWidth = false, } = props;
+        let { open = false, 'kt:close': onClose = noop$1, title, children, actions, maxWidth = 'sm', fullWidth = false, } = props;
         // Handle ESC key - store handler for cleanup
         const keyDownHandler = (e) => {
             if (e.key === 'Escape') {
@@ -282,8 +280,42 @@ 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;
+            },
+        };
     }
 
     /**
@@ -327,64 +359,134 @@ var __ktjs_mui__ = (function (exports, jsxRuntime, kt_js) {
         return container;
     }
 
-    const emptyFn$2 = () => { };
+    const noop = () => { };
     /**
      * 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 { 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 inputRef = kt_js.ref();
+        const helperTextEl = jsxRuntime.jsx("p", { class: "mui-textfield-helper-text", children: helperText });
         // Update container classes
-        const updateClasses = () => {
-            const hasValue = inputRef.value?.value || '';
-            const classes = [
+        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();
+            updateContainerClass();
             onInput(target.value, e);
+            onInputTrim(target.value.trim(), e);
         };
         const handleChange = (e) => {
             const target = e.target;
             onChange(target.value, e);
+            onChangeTrim(target.value.trim(), e);
         };
         const handleFocus = (e) => {
             isFocused = true;
-            updateClasses();
+            updateContainerClass();
             const target = e.target;
             onFocus(target.value, e);
         };
         const handleBlur = (e) => {
             isFocused = false;
-            updateClasses();
+            updateContainerClass();
             const target = e.target;
             onBlur(target.value, e);
         };
         // 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 })] }));
+        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 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;
@@ -408,7 +510,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;
@@ -428,7 +530,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);
@@ -438,15 +540,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);
         });
@@ -458,7 +560,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,14 +1,12 @@
 import { jsxs, jsx } from 'kt.js/jsx-runtime';
 import { ref as ref$1, createRedrawable } from 'kt.js';
 
-/**
+/**s
  * Alert component - mimics MUI Alert appearance and behavior
  */
 function Alert(props) {
-    const { children, severity = 'info', variant = 'standard', icon, onClose, sx } = props;
-    const classes = ['mui-alert', `mui-alert-${severity}`, `mui-alert-${variant}`, props.class ? props.class : '']
-        .filter(Boolean)
-        .join(' ');
+    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 || '';
     if (sx) {
@@ -46,12 +44,12 @@ function Alert(props) {
     return alert;
 }
 
-const emptyFn$4 = () => { };
+const 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}`,
@@ -93,7 +91,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
  */
@@ -120,7 +118,7 @@ function Checkbox(props) {
         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;
+    let { checked = false, value = '', label = '', size = 'medium', 'kt:change': onChange = emptyFn$2, disabled = false, color = 'primary', indeterminate = false, } = props;
     const inputRef = ref$1();
     // 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" }) }) }));
@@ -149,7 +147,7 @@ function Checkbox(props) {
  * 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', 'kt:change': onChange = emptyFn$2, row = false } = props;
     let selectedValues = new Set(value);
     const changeHandler = (checked, checkboxValue) => {
         if (checked) {
@@ -163,15 +161,15 @@ 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);
     });
@@ -191,13 +189,13 @@ function CheckboxGroup(props) {
     return container;
 }
 
-const noop = () => { };
+const noop$1 = () => { };
 /**
  * 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, 'mui:close': onClose = noop, title, children, actions, maxWidth = 'sm', fullWidth = false, } = props;
+    let { open = false, 'kt:close': onClose = noop$1, title, children, actions, maxWidth = 'sm', fullWidth = false, } = props;
     // Handle ESC key - store handler for cleanup
     const keyDownHandler = (e) => {
         if (e.key === 'Escape') {
@@ -282,8 +280,42 @@ 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;
+        },
+    };
 }
 
 /**
@@ -327,64 +359,134 @@ function LinearProgress(props) {
     return container;
 }
 
-const emptyFn$2 = () => { };
+const noop = () => { };
 /**
  * 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 { 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 inputRef = ref$1();
+    const helperTextEl = jsx("p", { class: "mui-textfield-helper-text", children: helperText });
     // Update container classes
-    const updateClasses = () => {
-        const hasValue = inputRef.value?.value || '';
-        const classes = [
+    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();
+        updateContainerClass();
         onInput(target.value, e);
+        onInputTrim(target.value.trim(), e);
     };
     const handleChange = (e) => {
         const target = e.target;
         onChange(target.value, e);
+        onChangeTrim(target.value.trim(), e);
     };
     const handleFocus = (e) => {
         isFocused = true;
-        updateClasses();
+        updateContainerClass();
         const target = e.target;
         onFocus(target.value, e);
     };
     const handleBlur = (e) => {
         isFocused = false;
-        updateClasses();
+        updateContainerClass();
         const target = e.target;
         onBlur(target.value, e);
     };
     // 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 })] }));
+    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 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;
@@ -408,7 +510,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;
@@ -428,7 +530,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);
@@ -438,15 +540,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);
     });
@@ -458,7 +560,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();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ktjs/mui",
-  "version": "0.17.8",
+  "version": "0.18.0",
   "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.17.4"
+    "@ktjs/core": "0.18.4"
   },
   "scripts": {
     "build": "rollup -c rollup.config.mjs",