@ktjs/mui 0.20.2 → 0.23.2

package/dist/index.iife.js

@@ -1,17 +1,81 @@
 var __ktjs_mui__ = (function (exports) {
     'use strict';
 
+    // Shared constants
+    // Empty for now - can be extended with framework-wide constants
+    /**
+     * Mark the attribute as SVG to handle special cases during rendering.
+     */
+    const $defines = Object.defineProperties;
+    const $entries = Object.entries;
+    const $random$2 = Math.random;
+    const { get: $buttonDisabledGetter$2, set: $buttonDisabledSetter$2 } = Object.getOwnPropertyDescriptor(HTMLButtonElement.prototype, 'disabled');
+    const parseStyle = (style) => {
+        if (!style) {
+            return '';
+        }
+        if (typeof style === 'string') {
+            return style;
+        }
+        if (style && typeof style === 'object') {
+            if (style.isKT) {
+                return parseStyle(style.value);
+            }
+            return $entries(style)
+                .map((entry) => {
+                const cssKey = entry[0].replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
+                return `${cssKey}:${entry[1]}`;
+            })
+                .join(';');
+        }
+        return '';
+    };
+
+    // String manipulation utilities
+    /**
+     * Default empty function
+     */
+    const $emptyFn = (() => true);
+
+    if (typeof Symbol === 'undefined') {
+        window.Symbol = function Symbol(description) {
+            return `@@SYMBOL_${description || ''}_${$random$2().toString(36).slice(2)}`;
+        };
+    }
+
+    // Shared utilities and cached native methods for kt.js framework
+    Object.defineProperty(window, '__ktjs__', { value: '0.23.4' });
+
+    // Shared constants
+    // Empty for now - can be extended with framework-wide constants
+    /**
+     * Mark the attribute as SVG to handle special cases during rendering.
+     */
+    const SVG_ATTR_FLAG = '__kt_svg__';
+    /**
+     * Mark the attribute as MathML to handle special cases during rendering.
+     */
+    const MATHML_ATTR_FLAG = '__kt_mathml__';
+
     // Cached native methods for performance optimization
     const $isArray = Array.isArray;
-    const $isThenable = (o) => typeof o === 'object' && o !== null && typeof o.then === 'function';
-
-    // Error handling utilities
-    const $throw = (message) => {
-        throw new Error('@ktjs/shared: ' + message);
-    };
+    const $random$1 = Math.random;
+    const $isThenable = (o) => typeof o?.then === 'function';
 
     // DOM manipulation utilities
     // # dom natives
+    const $isNode$1 = (x) => x?.nodeType > 0;
+    /**
+     * Safe replace `oldNode` With `newNode`
+     */
+    const $replaceNode$1 = (oldNode, newNode) => {
+        if ($isNode$1(oldNode) && $isNode$1(newNode)) {
+            if (newNode.contains(oldNode)) {
+                newNode.remove();
+            }
+            oldNode.replaceWith(newNode);
+        }
+    };
     /**
      * & Remove `bind` because it is shockingly slower than wrapper
      * & `window.document` is safe because it is not configurable and its setter is undefined
@@ -47,11 +111,28 @@ var __ktjs_mui__ = (function (exports) {
                 $appendChild.call(this, fragment);
             }
         };
-    const { get: $buttonDisabledGetter$2, set: $buttonDisabledSetter$2 } = Object.getOwnPropertyDescriptor(HTMLButtonElement.prototype, 'disabled');
+    const { get: $buttonDisabledGetter$1, set: $buttonDisabledSetter$1 } = Object.getOwnPropertyDescriptor(HTMLButtonElement.prototype, 'disabled');
+    /**
+     * Used for `k-model`
+     */
+    const applyModel = (element, valueRef, propName, eventName) => {
+        element[propName] = valueRef.value; // initialize
+        valueRef.addOnChange((newValue) => (element[propName] = newValue));
+        element.addEventListener(eventName, () => (valueRef.value = element[propName]));
+    };
+
+    if (typeof Symbol === 'undefined') {
+        window.Symbol = function Symbol(description) {
+            return `@@SYMBOL_${description || ''}_${$random$1().toString(36).slice(2)}`;
+        };
+    }
 
     // Shared utilities and cached native methods for kt.js framework
-    // Re-export all utilities
-    Object.defineProperty(window, '@ktjs/shared', { value: '0.20.0' });
+    Object.defineProperty(window, '__ktjs__', { value: '0.23.4' });
+
+    const isKT$1 = (obj) => obj?.isKT;
+    const isRef = (obj) => obj?.ktType === 1 /* KTReactiveType.REF */;
+    const isComputed = (obj) => obj?.ktType === 2 /* KTReactiveType.COMPUTED */;
 
     const booleanHandler = (element, key, value) => {
         if (key in element) {
@@ -95,10 +176,25 @@ var __ktjs_mui__ = (function (exports) {
     };
 
     const defaultHandler = (element, key, value) => element.setAttribute(key, value);
+    const setElementStyle = (element, style) => {
+        if (typeof style === 'string') {
+            element.style.cssText = style;
+            return;
+        }
+        for (const key in style) {
+            element.style[key] = style[key];
+        }
+    };
     function attrIsObject(element, attr) {
         const classValue = attr.class || attr.className;
         if (classValue !== undefined) {
-            element.setAttribute('class', classValue);
+            if (isKT$1(classValue)) {
+                element.setAttribute('class', classValue.value);
+                classValue.addOnChange((v) => element.setAttribute('class', v));
+            }
+            else {
+                element.setAttribute('class', classValue);
+            }
         }
         const style = attr.style;
         if (style) {
@@ -106,18 +202,34 @@ var __ktjs_mui__ = (function (exports) {
                 element.setAttribute('style', style);
             }
             else if (typeof style === 'object') {
-                for (const key in style) {
-                    element.style[key] = style[key];
+                if (isKT$1(style)) {
+                    setElementStyle(element, style.value);
+                    style.addOnChange((v) => setElementStyle(element, v));
+                }
+                else {
+                    setElementStyle(element, style);
                 }
             }
         }
+        if ('k-html' in attr) {
+            const html = attr['k-html'];
+            if (isKT$1(html)) {
+                element.innerHTML = html.value;
+                html.addOnChange((v) => (element.innerHTML = v));
+            }
+            else {
+                element.innerHTML = html;
+            }
+        }
         for (const key in attr) {
-            if (key === 'class' ||
+            if (key === 'k-if' ||
+                key === 'k-model' ||
+                key === 'ref' ||
+                key === 'class' ||
                 key === 'className' ||
                 key === 'style' ||
                 key === 'children' ||
-                key === 'k-if' ||
-                key === 'ref') {
+                key === 'k-html') {
                 continue;
             }
             const o = attr[key];
@@ -127,7 +239,14 @@ var __ktjs_mui__ = (function (exports) {
             }
             // normal attributes
             else {
-                (handlers[key] || defaultHandler)(element, key, o);
+                const handler = handlers[key] || defaultHandler;
+                if (isKT$1(o)) {
+                    handler(element, key, o.value);
+                    o.addOnChange((v) => handler(element, key, v));
+                }
+                else {
+                    handler(element, key, o);
+                }
             }
         }
     }
@@ -139,17 +258,28 @@ var __ktjs_mui__ = (function (exports) {
             attrIsObject(element, attr);
         }
         else {
-            throw new Error('kt.js: attr must be an object.');
+            throw new Error('[kt.js error] attr must be an object.');
         }
     }
 
+    const assureNode = (o) => ($isNode$1(o) ? o : document.createTextNode(o));
     function apdSingle(element, c) {
         // & JSX should ignore false, undefined, and null
         if (c === false || c === undefined || c === null) {
             return;
         }
-        if (typeof c === 'object' && c !== null && 'isKT' in c) {
-            $append.call(element, c.value);
+        if (isKT$1(c)) {
+            let node = assureNode(c.value);
+            $append.call(element, node);
+            c.addOnChange((newValue, oldValue) => {
+                if ($isNode$1(newValue) && $isNode$1(oldValue)) {
+                    // & this case is handled automically in `class KTRef`
+                    return;
+                }
+                const oldNode = node;
+                node = assureNode(newValue);
+                oldNode.replaceWith(node);
+            });
         }
         else {
             $append.call(element, c);
@@ -194,14 +324,34 @@ var __ktjs_mui__ = (function (exports) {
         }
     }
 
-    document.createElement('div');
+    function applyKModel(element, valueRef) {
+        if (!isKT$1(valueRef)) {
+            console.warn('[kt.js warn]','k-model value must be a KTRef.');
+            return;
+        }
+        if (element instanceof HTMLInputElement) {
+            if (element.type === 'radio' || element.type === 'checkbox') {
+                applyModel(element, valueRef, 'checked', 'change');
+            }
+            else {
+                applyModel(element, valueRef, 'value', 'input');
+            }
+        }
+        else if (element instanceof HTMLSelectElement) {
+            applyModel(element, valueRef, 'value', 'change');
+        }
+        else if (element instanceof HTMLTextAreaElement) {
+            applyModel(element, valueRef, 'value', 'input');
+        }
+        else {
+            console.warn('[kt.js warn]','not supported element for k-model:');
+        }
+    }
+
     const htmlCreator = (tag) => document.createElement(tag);
     const svgCreator = (tag) => document.createElementNS('http://www.w3.org/2000/svg', tag);
     const mathMLCreator = (tag) => document.createElementNS('http://www.w3.org/1998/Math/MathML', tag);
     let creator = htmlCreator;
-    // # consts
-    const SVG_ATTR_FLAG = '__kt_svg__';
-    const MATHML_ATTR_FLAG = '__kt_mathml__';
     /**
      * Create an enhanced HTMLElement.
      * - Only supports HTMLElements, **NOT** SVGElements or other Elements.
@@ -212,7 +362,7 @@ var __ktjs_mui__ = (function (exports) {
      * ## About
      * @package @ktjs/core
      * @author Kasukabe Tsumugi <futami16237@gmail.com>
-     * @version 0.20.3 (Last Update: 2026.02.01 18:38:02.198)
+     * @version 0.26.9 (Last Update: 2026.02.09 00:03:34.324)
      * @license MIT
      * @link https://github.com/baendlorel/kt.js
      * @link https://baendlorel.github.io/ Welcome to my site!
@@ -221,7 +371,7 @@ var __ktjs_mui__ = (function (exports) {
      */
     const h = (tag, attr, content) => {
         if (typeof tag !== 'string') {
-            $throw('tagName must be a string.');
+            throw new Error('[kt.js error] tagName must be a string.');
         }
         if (attr) {
             if (SVG_ATTR_FLAG in attr) {
@@ -241,39 +391,57 @@ var __ktjs_mui__ = (function (exports) {
         // * Handle content
         applyAttr(element, attr);
         applyContent(element, content);
-        // if (tag === 'svg') {
-        //   tempWrapper.innerHTML = element.outerHTML;
-        //   return tempWrapper.firstChild as HTML<T>;
-        // }
-        // if (tag === 'math') {
-        //   tempWrapper.innerHTML = element.outerHTML;
-        //   return tempWrapper.firstChild as HTML<T>;
-        // }
+        if (typeof attr === 'object' && attr !== null && 'k-model' in attr) {
+            applyKModel(element, attr['k-model']);
+        }
         return element;
     };
 
     const dummyRef = { value: null };
+    const create = (tag, props) => {
+        if (typeof tag === 'function') {
+            return tag(props);
+        }
+        else {
+            return h(tag, props, props.children);
+        }
+    };
+    const placeholder = () => document.createComment('k-if');
     /**
      * @param tag html tag or function component
      * @param props properties/attributes
      */
     function jsx(tag, props) {
-        const ref = props.ref?.isKT ? props.ref : dummyRef;
-        let el;
-        if ('k-if' in props && !props['k-if']) {
-            // & make comment placeholder in case that ref might be redrawn later
-            el = document.createComment('k-if');
-            ref.value = el;
-            return el;
-        }
-        // Handle function components
-        if (typeof tag === 'function') {
-            el = tag(props);
+        if (isComputed(props.ref)) {
+            throw new Error('[kt.js error] Cannot assign a computed value to an element.');
         }
-        else {
-            el = h(tag, props, props.children);
+        const maybeDummyRef = isRef(props.ref) ? props.ref : dummyRef;
+        let el;
+        if ('k-if' in props) {
+            const kif = props['k-if'];
+            let condition = kif; // assume boolean by default
+            // Handle reactive k-if
+            if (isKT$1(kif)) {
+                kif.addOnChange((newValue, oldValue) => {
+                    if (newValue === oldValue) {
+                        return;
+                    }
+                    const oldEl = el;
+                    el = newValue ? create(tag, props) : placeholder();
+                    $replaceNode$1(oldEl, el);
+                    maybeDummyRef.value = el;
+                });
+                condition = kif.value;
+            }
+            if (!condition) {
+                // & make comment placeholder in case that ref might be redrawn later
+                el = placeholder();
+                maybeDummyRef.value = el;
+                return el;
+            }
         }
-        ref.value = el;
+        el = create(tag, props);
+        maybeDummyRef.value = el;
         return el;
     }
     /**
@@ -282,48 +450,8 @@ var __ktjs_mui__ = (function (exports) {
      */
     const jsxs = jsx;
 
-    // Cached native methods for performance optimization
-    const $defines = Object.defineProperties;
-
-    // String manipulation utilities
-    /**
-     * Default empty function
-     */
-    const $emptyFn = (() => true);
-    const { get: $buttonDisabledGetter$1, set: $buttonDisabledSetter$1 } = Object.getOwnPropertyDescriptor(HTMLButtonElement.prototype, 'disabled');
-    // # DOM utilities
-    const parseStyle = (style) => {
-        if (typeof style === 'string') {
-            return style;
-        }
-        if (style && typeof style === 'object') {
-            return Object.entries(style)
-                .map(([key, value]) => {
-                // Convert camelCase to kebab-case
-                const cssKey = key.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
-                return `${cssKey}: ${value}`;
-            })
-                .join('; ');
-        }
-        return '';
-    };
-    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;
-    };
-
-    // Shared utilities and cached native methods for kt.js framework
-    // Re-export all utilities
-    Object.defineProperty(window, '@ktjs/shared', { value: '0.20.0' });
-
     function Alert(props) {
-        const { children, severity = 'info', variant = 'standard', icon, 'kt:close': onClose } = props;
+        const { children, severity = 'info', variant = 'standard', icon, 'on:close': onClose } = props;
         const classes = `mui-alert mui-alert-${severity} mui-alert-${variant} ${props.class ? props.class : ''}`;
         // Icon SVG paths for different severities
         const getIcon = () => {
@@ -352,201 +480,409 @@ var __ktjs_mui__ = (function (exports) {
         return alert;
     }
 
+    // Shared constants
+    // Empty for now - can be extended with framework-wide constants
     /**
-     * Button component - mimics MUI Button appearance and behavior
+     * Mark the attribute as SVG to handle special cases during rendering.
      */
-    function Button(props) {
-        let { children, variant = 'text', color = 'primary', size = 'medium', disabled = false, fullWidth = false, iconOnly = false, startIcon, endIcon, type = 'button', 'on:click': onClick = $emptyFn, } = props;
-        const classes = [
-            'mui-button',
-            `mui-button-${variant}`,
-            `mui-button-${variant}-${color}`,
-            `mui-button-size-${size}`,
-            fullWidth ? 'mui-button-fullwidth' : '',
-            iconOnly ? 'mui-button-icon-only' : '',
-            disabled ? 'mui-button-disabled' : '',
-            props.class ? props.class : '',
-        ].join(' ');
-        const rippleContainer = jsx("span", { class: "mui-button-ripple" });
-        const handleClick = (e) => {
-            if (disabled) {
-                e.preventDefault();
-                return;
-            }
-            // Create ripple effect
-            const button = e.currentTarget;
-            if (rippleContainer) {
-                const rect = button.getBoundingClientRect();
-                const size = Math.max(rect.width, rect.height);
-                const x = e.clientX - rect.left - size / 2;
-                const y = e.clientY - rect.top - size / 2;
-                const ripple = document.createElement('span');
-                ripple.style.width = ripple.style.height = `${size}px`;
-                ripple.style.left = `${x}px`;
-                ripple.style.top = `${y}px`;
-                ripple.classList.add('mui-button-ripple-effect');
-                rippleContainer.appendChild(ripple);
-                // Remove ripple after animation
-                setTimeout(() => ripple.remove(), 600);
-            }
-            onClick(e);
-        };
-        const container = (jsxs("button", { class: classes, style: parseStyle(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 }), rippleContainer] }));
-        $defines(container, {
-            disabled: {
-                get: $buttonDisabledGetter$1,
-                set: function (value) {
-                    $buttonDisabledSetter$1.call(this, value);
-                    this.classList.toggle('mui-button-disabled', value);
-                },
-            },
-        });
-        return container;
-    }
+    const $is = Object.is;
+    const $random = Math.random;
 
+    // DOM manipulation utilities
+    // # dom natives
+    const $isNode = (x) => x?.nodeType > 0;
     /**
-     * Checkbox component - mimics MUI Checkbox appearance and behavior
+     * Safe replace `oldNode` With `newNode`
      */
-    function Checkbox(props) {
-        const toggleIcon = (checked, indeterminate) => {
-            if (indeterminate) {
-                uncheckedIcon.style.display = 'none';
-                checkedIcon.style.display = 'none';
-                indeterminateIcon.style.display = '';
-            }
-            else {
-                uncheckedIcon.style.display = checked ? 'none' : '';
-                checkedIcon.style.display = checked ? '' : 'none';
-                indeterminateIcon.style.display = 'none';
+    const $replaceNode = (oldNode, newNode) => {
+        if ($isNode(oldNode) && $isNode(newNode)) {
+            if (newNode.contains(oldNode)) {
+                newNode.remove();
             }
+            oldNode.replaceWith(newNode);
+        }
+    };
+    const { get: $buttonDisabledGetter, set: $buttonDisabledSetter } = Object.getOwnPropertyDescriptor(HTMLButtonElement.prototype, 'disabled');
+
+    if (typeof Symbol === 'undefined') {
+        window.Symbol = function Symbol(description) {
+            return `@@SYMBOL_${description || ''}_${$random().toString(36).slice(2)}`;
         };
-        // Handle change
-        const handleChange = () => {
-            if (disabled) {
+    }
+
+    // Shared utilities and cached native methods for kt.js framework
+    Object.defineProperty(window, '__ktjs__', { value: '0.23.4' });
+
+    const isKT = (obj) => obj?.isKT;
+
+    class KTRef {
+        /**
+         * Indicates that this is a KTRef instance
+         */
+        isKT = true;
+        ktType = 1 /* KTReactiveType.REF */;
+        /**
+         * @internal
+         */
+        _value;
+        /**
+         * @internal
+         */
+        _onChanges;
+        constructor(_value, _onChanges) {
+            this._value = _value;
+            this._onChanges = _onChanges;
+        }
+        /**
+         * If new value and old value are both nodes, the old one will be replaced in the DOM
+         */
+        get value() {
+            return this._value;
+        }
+        set value(newValue) {
+            if ($is(newValue, this._value)) {
                 return;
             }
-            checked = inputEl.checked;
-            indeterminate = false;
-            toggleIcon(checked, indeterminate);
-            onChange(checked, value);
-        };
-        let { checked = false, value = '', label = '', size = 'medium', disabled = false, color = 'primary', indeterminate = false, } = props;
-        const onChange = generateHandler(props, 'kt:change');
-        const inputEl = (jsx("input", { type: "checkbox", class: "mui-checkbox-input", checked: checked, value: value, disabled: disabled, "on:change": handleChange }));
-        // Unchecked icon
-        const uncheckedIcon = (jsx("span", { class: "mui-checkbox-icon-unchecked", children: jsx("svg", { viewBox: "0 0 24 24", children: jsx("path", { d: "M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z" }) }) }));
-        // Checked icon
-        const checkedIcon = (jsx("span", { class: "mui-checkbox-icon-checked", children: jsx("svg", { viewBox: "0 0 24 24", children: jsx("path", { d: "M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" }) }) }));
-        // Indeterminate icon
-        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: [inputEl, jsxs("span", { class: "mui-checkbox-icon", children: [uncheckedIcon, checkedIcon, indeterminateIcon] }), jsx("span", { "k-if": label, class: "mui-checkbox-label", children: label })] }));
-        $defines(container, {
-            checked: {
-                get() {
-                    return checked;
-                },
-                set(newChecked) {
-                    checked = newChecked;
-                    indeterminate = false;
-                    inputEl.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);
-                },
-            },
-        });
-        return container;
+            const oldValue = this._value;
+            $replaceNode(oldValue, newValue);
+            this._value = newValue;
+            for (let i = 0; i < this._onChanges.length; i++) {
+                this._onChanges[i](newValue, oldValue);
+            }
+        }
+        /**
+         * Register a callback when the value changes
+         * @param callback (newValue, oldValue) => xxx
+         */
+        addOnChange(callback) {
+            if (typeof callback !== 'function') {
+                throw new Error('[kt.js error] KTRef.addOnChange: callback must be a function');
+            }
+            this._onChanges.push(callback);
+        }
+        removeOnChange(callback) {
+            for (let i = this._onChanges.length - 1; i >= 0; i--) {
+                if (this._onChanges[i] === callback) {
+                    this._onChanges.splice(i, 1);
+                    return true;
+                }
+            }
+            return false;
+        }
     }
     /**
-     * CheckboxGroup component - groups multiple checkboxes together
+     * Reference to the created HTML element.
+     * - **Only** respond to `ref.value` changes, not reactive to internal changes of the element.
+     * - can alse be used to store normal values, but it is not reactive.
+     * - if the value is already a `KTRef`, it will be returned **directly**.
+     * @param value mostly an HTMLElement
      */
-    function CheckboxGroup(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) {
-                selectedValues.add(checkboxValue);
-            }
-            else {
-                selectedValues.delete(checkboxValue);
+    function ref(value, onChange) {
+        return new KTRef(value, onChange ? [onChange] : []);
+    }
+    function deref(value) {
+        return isKT(value) ? value.value : value;
+    }
+    // # asserts
+    /**
+     * Assert k-model to be a ref object
+     */
+    const $modelOrRef = (props, defaultValue) => {
+        // & props is an object. Won't use it in any other place
+        if ('k-model' in props) {
+            const kmodel = props['k-model'];
+            if (!kmodel?.isKT) {
+                throw new Error(`[kt.js error] k-model data must be a KTRef object, please use 'ref(...)' to wrap it.`);
             }
-            onChange(Array.from(selectedValues));
-        };
-        const checkboxes = props.options.map((o) => {
-            o.size = size;
-            o.checked = selectedValues.has(o.value);
-            const originalChange = generateHandler(o, 'kt:change');
-            if (originalChange) {
-                o['kt:change'] = (checked, value) => {
-                    originalChange(checked, value);
-                    changeHandler(checked, value);
-                };
+            return kmodel;
+        }
+        return ref(defaultValue);
+    };
+
+    class KTComputed {
+        /**
+         * Indicates that this is a KTRef instance
+         */
+        isKT = true;
+        ktType = 2 /* KTReactiveType.COMPUTED */;
+        /**
+         * @internal
+         */
+        _calculator;
+        /**
+         * @internal
+         */
+        _value;
+        /**
+         * @internal
+         */
+        _onChanges = [];
+        /**
+         * @internal
+         */
+        _subscribe(reactives) {
+            for (let i = 0; i < reactives.length; i++) {
+                const reactive = reactives[i];
+                reactive.addOnChange(() => {
+                    const oldValue = this._value;
+                    this._value = this._calculator();
+                    if (oldValue === this._value) {
+                        return;
+                    }
+                    $replaceNode(oldValue, this._value);
+                    for (let i = 0; i < this._onChanges.length; i++) {
+                        this._onChanges[i](this._value, oldValue);
+                    }
+                });
+            }
+        }
+        constructor(_calculator, reactives) {
+            this._calculator = _calculator;
+            this._value = _calculator();
+            this._subscribe(reactives);
+        }
+        /**
+         * If new value and old value are both nodes, the old one will be replaced in the DOM
+         */
+        get value() {
+            return this._value;
+        }
+        set value(_newValue) {
+            throw new Error('[kt.js error] KTComputed: cannot set value of a computed value');
+        }
+        /**
+         * Register a callback when the value changes
+         * @param callback (newValue, oldValue) => xxx
+         */
+        addOnChange(callback) {
+            if (typeof callback !== 'function') {
+                throw new Error('[kt.js error] KTRef.addOnChange: callback must be a function');
+            }
+            this._onChanges.push(callback);
+        }
+        /**
+         * Unregister a callback
+         * @param callback (newValue, oldValue) => xxx
+         */
+        removeOnChange(callback) {
+            for (let i = this._onChanges.length - 1; i >= 0; i--) {
+                if (this._onChanges[i] === callback) {
+                    this._onChanges.splice(i, 1);
+                    return true;
+                }
+            }
+            return false;
+        }
+    }
+    /**
+     * Create a reactive computed value
+     * @param computeFn
+     * @param reactives refs and computeds that this computed depends on
+     */
+    function computed(computeFn, reactives) {
+        if (reactives.some((v) => !isKT(v))) {
+            throw new Error('[kt.js error] computed: all reactives must be KTRef or KTComputed instances');
+        }
+        return new KTComputed(computeFn, reactives);
+    }
+
+    const toReactive = (value, onChange) => {
+        if (isKT(value)) {
+            if (onChange) {
+                value.addOnChange(onChange);
+            }
+            return value;
+        }
+        else {
+            return ref(value, onChange);
+        }
+    };
+
+    const registerPrefixedEventsForButton = (element, props) => {
+        for (const key in props) {
+            if (key.startsWith('on:') && key !== 'on:click' && key !== 'on:dblclick') {
+                element.addEventListener(key.slice(3), props[key]);
+            }
+        }
+    };
+
+    /**
+     * Button component - mimics MUI Button appearance and behavior
+     */
+    function Button(props) {
+        let { children, variant = 'text', color = 'primary', size = 'medium', disabled = false, fullWidth = false, iconOnly = false, startIcon, endIcon, type = 'button', 'on:click': onClick = $emptyFn, // & must be bound because of the ripple effect
+         } = props;
+        const updateClass = () => {
+            container.className = [
+                'mui-button',
+                `mui-button-${variant}`,
+                `mui-button-${variant}-${color}`,
+                `mui-button-size-${size}`,
+                fullWidth ? 'mui-button-fullwidth' : '',
+                iconOnly ? 'mui-button-icon-only' : '',
+                disabledRef.value ? 'mui-button-disabled' : '',
+                props.class ? props.class : '',
+            ].join(' ');
+        };
+        const disabledRef = toReactive(disabled, (v) => {
+            container.disabled = v;
+            updateClass();
+        });
+        const rippleContainer = jsx("span", { class: "mui-button-ripple" });
+        const createRippleEffect = (mouseX, mouseY) => {
+            const rect = container.getBoundingClientRect();
+            const size = Math.max(rect.width, rect.height);
+            const x = mouseX - rect.left - size / 2;
+            const y = mouseY - rect.top - size / 2;
+            const ripple = (jsx("span", { class: "mui-button-ripple-effect", style: `width:${size}px; height:${size}px; left:${x}px; top:${y}px;` }));
+            rippleContainer.appendChild(ripple);
+            setTimeout(() => ripple.remove(), 600); // Remove ripple after animation
+        };
+        const handleClick = (e) => {
+            if (disabledRef.value) {
+                e.preventDefault();
+                return;
+            }
+            createRippleEffect(e.clientX, e.clientY);
+            onClick(e);
+        };
+        const container = (jsxs("button", { style: parseStyle(props.style), type: type, disabled: disabledRef.value, "on:click": handleClick, children: [jsx("span", { "k-if": startIcon, class: "mui-button-start-icon", children: startIcon }), jsx("span", { class: "mui-button-label", children: children }), jsx("span", { "k-if": endIcon, class: "mui-button-end-icon", children: endIcon }), rippleContainer] }));
+        const onDblclick = props['on:dblclick'];
+        if (onDblclick) {
+            container.addEventListener('dblclick', (e) => {
+                if (disabledRef.value) {
+                    e.preventDefault();
+                    return;
+                }
+                createRippleEffect(e.clientX, e.clientY);
+                onDblclick(e);
+            });
+        }
+        registerPrefixedEventsForButton(container, props);
+        // # initialize
+        updateClass();
+        return container;
+    }
+
+    const $ArrayPushUnique = (arr, item) => {
+        if (!arr.includes(item)) {
+            arr.push(item);
+        }
+    };
+    const $ArrayDelete = (arr, item) => {
+        const index = arr.indexOf(item);
+        if (index > -1) {
+            arr.splice(index, 1);
+        }
+    };
+
+    const createUncheckedIcon = () => (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" }) }) }));
+    const createCheckedIcon = () => (jsx("span", { class: "mui-checkbox-icon-checked", children: jsx("svg", { viewBox: "0 0 24 24", children: jsx("path", { d: "M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" }) }) }));
+    const createIndeterminateIcon = () => (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" }) }) }));
+    /**
+     * Checkbox component - mimics MUI Checkbox appearance and behavior
+     */
+    function Checkbox(props) {
+        const toggleIcon = (checked, indeterminate) => {
+            if (indeterminate) {
+                uncheckedIcon.style.display = 'none';
+                checkedIcon.style.display = 'none';
+                indeterminateIcon.style.display = '';
             }
             else {
-                o['kt:change'] = changeHandler;
+                uncheckedIcon.style.display = checked ? 'none' : '';
+                checkedIcon.style.display = checked ? '' : 'none';
+                indeterminateIcon.style.display = 'none';
+            }
+        };
+        // Handle change
+        const handleChange = () => {
+            if (disabledRef.value) {
+                return;
             }
-            return Checkbox(o);
+            modelRef.value = inputEl.checked;
+            interminateRef.value = false;
+            toggleIcon(modelRef.value, interminateRef.value);
+            onChange(modelRef.value, valueRef.value);
+        };
+        const onChange = props['on:change'] ?? $emptyFn;
+        const labelRef = toReactive(props.label ?? '');
+        const valueRef = toReactive(props.value ?? '');
+        const interminateRef = toReactive(props.indeterminate ?? false);
+        const colorRef = toReactive(props.color ?? 'primary');
+        const sizeRef = toReactive(props.size ?? 'medium');
+        const disabledRef = toReactive(props.disabled ?? false, (v) => {
+            inputEl.disabled = v;
+            container.classList.toggle('mui-checkbox-disabled', v);
         });
-        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 }));
-        $defines(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);
-                    }
-                },
-            },
-            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;
-                    }
-                },
-            },
+        const modelRef = $modelOrRef(props, props.checked ?? false);
+        modelRef.addOnChange((newValue) => {
+            inputEl.checked = newValue;
+            toggleIcon(newValue, interminateRef.value);
         });
+        const inputEl = (jsx("input", { type: "checkbox", class: "mui-checkbox-input", checked: modelRef.value, value: valueRef, disabled: disabledRef, "on:change": handleChange }));
+        const uncheckedIcon = createUncheckedIcon();
+        const checkedIcon = createCheckedIcon();
+        const indeterminateIcon = createIndeterminateIcon();
+        // Initialize icon state
+        toggleIcon(modelRef.value, interminateRef.value);
+        const classRef = computed(() => {
+            return `mui-checkbox-wrapper mui-checkbox-size-${sizeRef.value} ${disabledRef.value ? 'mui-checkbox-disabled' : ''} mui-checkbox-color-${colorRef.value}`;
+        }, [colorRef, disabledRef, sizeRef]);
+        const container = (jsxs("label", { class: classRef, children: [inputEl, jsxs("span", { class: "mui-checkbox-icon", children: [uncheckedIcon, checkedIcon, indeterminateIcon] }), jsx("span", { "k-if": labelRef, class: "mui-checkbox-label", children: labelRef })] }));
+        return container;
+    }
+    /**
+     * CheckboxGroup component - groups multiple checkboxes together
+     */
+    function CheckboxGroup(props) {
+        let { row = false, 'on:change': onChange = $emptyFn } = props;
+        const changeHandler = (checked, checkboxValue) => {
+            if (checked) {
+                $ArrayPushUnique(modelRef.value, checkboxValue);
+            }
+            else {
+                $ArrayDelete(modelRef.value, checkboxValue);
+            }
+            onChange(modelRef.value);
+        };
+        const rowRef = toReactive(props.row ?? true);
+        const sizeRef = toReactive(props.size ?? 'medium');
+        const modelRef = $modelOrRef(props, props.value ?? []);
+        modelRef.addOnChange((newValues) => {
+            for (let i = 0; i < checkboxes.value.length; i++) {
+                const c = checkboxes.value[i];
+                c.checked = newValues.includes(c.value);
+            }
+        });
+        const customClassRef = toReactive(props.class ?? '');
+        const classRef = computed(() => {
+            return `mui-checkbox-group ${rowRef.value ? 'mui-checkbox-group-row' : ''} ${customClassRef.value}`;
+        }, [rowRef, customClassRef]);
+        const styleRef = toReactive(parseStyle(props.style ?? ''));
+        const optionsRef = toReactive(props.options);
+        const checkboxes = computed(() => {
+            return optionsRef.value.map((o) => {
+                o.size = sizeRef.value;
+                o.checked = modelRef.value.includes(o.value);
+                const originalChange = o['on:change'];
+                if (originalChange) {
+                    if (typeof originalChange !== 'function') {
+                        throw new Error('[kt.js error] CheckboxGroup: handler must be a function');
+                    }
+                    o['on:change'] = (checked, value) => {
+                        originalChange(checked, value);
+                        changeHandler(checked, value);
+                    };
+                }
+                else {
+                    o['on:change'] = changeHandler;
+                }
+                return Checkbox(o);
+            });
+        }, [optionsRef, sizeRef]);
+        console.log('checkboxes', checkboxes.value);
+        const container = (jsx("div", { class: classRef, style: styleRef, role: "group", children: checkboxes }));
         return container;
     }
 
@@ -555,11 +891,30 @@ var __ktjs_mui__ = (function (exports) {
      * Only handles open/close state, title and content are passed as props
      */
     function Dialog(props) {
-        let { open = false, 'kt:close': onClose = $emptyFn, title, children, actions, maxWidth = 'sm', fullWidth = false, } = props;
+        let { 'on:close': onClose = $emptyFn, children, actions } = props;
+        const titleRef = toReactive(props.title ?? '');
+        const openRef = toReactive(props.open ?? false, (isOpen) => {
+            if (isOpen) {
+                // Opening: set display first, then add class with double RAF for animation
+                container.style.display = 'flex';
+                setTimeout(() => container.classList.add('kt-dialog-backdrop-open'), 50);
+            }
+            else {
+                container.classList.remove('kt-dialog-backdrop-open');
+                setTimeout(() => {
+                    if (!openRef.value) {
+                        container.style.display = 'none';
+                    }
+                }, 225);
+            }
+        });
+        const sizeRef = toReactive(props.size ?? 'sm');
+        const fullWidthRef = toReactive(props.fullWidth ?? false);
+        const classNameRef = computed(() => `kt-dialog-paper ${sizeRef.value ? `kt-dialog-maxWidth-${sizeRef.value}` : ''} ${fullWidthRef.value ? 'kt-dialog-fullWidth' : ''}`, [sizeRef, fullWidthRef]);
         // Handle ESC key - store handler for cleanup
         const keyDownHandler = (e) => {
             if (e.key === 'Escape') {
-                open = false;
+                openRef.value = false;
                 onClose();
             }
         };
@@ -569,7 +924,7 @@ var __ktjs_mui__ = (function (exports) {
             }
         };
         // Backdrop element
-        const container = (jsx("div", { class: `kt-dialog-backdrop ${open ? 'kt-dialog-backdrop-open' : ''}`, "on:click": handleBackdropClick, style: { display: open ? 'flex' : 'none' }, children: jsxs("div", { class: `kt-dialog-paper ${maxWidth ? `kt-dialog-maxWidth-${maxWidth}` : ''} ${fullWidth ? 'kt-dialog-fullWidth' : ''}`, "on:click": (e) => e.stopPropagation(), children: [jsx("div", { "k-if": title, class: "kt-dialog-title", children: jsx("h2", { children: title }) }), jsx("div", { "k-if": children, class: "kt-dialog-content", children: children }), jsx("div", { "k-if": actions, class: "kt-dialog-actions", children: actions })] }) }));
+        const container = (jsx("div", { class: `kt-dialog-backdrop ${openRef.value ? 'kt-dialog-backdrop-open' : ''}`, style: { display: openRef.value ? 'flex' : 'none' }, "on:click": handleBackdropClick, children: jsxs("div", { class: classNameRef, "on:click": (e) => e.stopPropagation(), children: [jsx("div", { "k-if": titleRef, class: "kt-dialog-title", children: jsx("h2", { children: titleRef }) }), jsx("div", { "k-if": children, class: "kt-dialog-content", children: children }), jsx("div", { "k-if": actions, class: "kt-dialog-actions", children: actions })] }) }));
         document.addEventListener('keydown', keyDownHandler);
         // Store cleanup function
         const originalRemove = container.remove;
@@ -579,30 +934,6 @@ var __ktjs_mui__ = (function (exports) {
             }
             return originalRemove.call(container);
         };
-        $defines(container, {
-            open: {
-                get: () => open,
-                set: (isOpen) => {
-                    if (isOpen === open) {
-                        return;
-                    }
-                    open = isOpen;
-                    if (isOpen) {
-                        // Opening: set display first, then add class with double RAF for animation
-                        container.style.display = 'flex';
-                        setTimeout(() => container.classList.add('kt-dialog-backdrop-open'), 50);
-                    }
-                    else {
-                        container.classList.remove('kt-dialog-backdrop-open');
-                        setTimeout(() => {
-                            if (!open) {
-                                container.style.display = 'none';
-                            }
-                        }, 225);
-                    }
-                },
-            },
-        });
         return container;
     }
 
@@ -630,192 +961,68 @@ var __ktjs_mui__ = (function (exports) {
         return element;
     }
 
-    // Cached native methods for performance optimization
-    const { get: $buttonDisabledGetter, set: $buttonDisabledSetter } = Object.getOwnPropertyDescriptor(HTMLButtonElement.prototype, 'disabled');
-
-    // Shared utilities and cached native methods for kt.js framework
-    // Re-export all utilities
-    Object.defineProperty(window, '@ktjs/shared', { value: '0.20.0' });
-
-    document.createElement('div');
-
-    class KTRef {
-        /**
-         * Indicates that this is a KTRef instance
-         */
-        isKT = true;
-        /**
-         * @internal
-         */
-        _value;
-        /**
-         * @internal
-         */
-        _onChanges;
-        constructor(_value, _onChanges) {
-            this._value = _value;
-            this._onChanges = _onChanges;
-        }
-        /**
-         * If new value and old value are both nodes, the old one will be replaced in the DOM
-         */
-        get value() {
-            return this._value;
-        }
-        set value(newValue) {
-            if (newValue === this._value) {
-                return;
-            }
-            // replace the old node with the new one in the DOM if both are nodes
-            if (this._value instanceof Node && newValue instanceof Node) {
-                if (newValue.contains(this._value)) {
-                    this._value.remove();
-                }
-                this._value.replaceWith(newValue);
-            }
-            const oldValue = this._value;
-            this._value = newValue;
-            for (let i = 0; i < this._onChanges.length; i++) {
-                this._onChanges[i](newValue, oldValue);
-            }
-        }
-        addOnChange(callback) {
-            this._onChanges.push(callback);
-        }
-        removeOnChange(callback) {
-            for (let i = this._onChanges.length - 1; i >= 0; i--) {
-                if (this._onChanges[i] === callback) {
-                    this._onChanges.splice(i, 1);
-                    return true;
-                }
-            }
-            return false;
-        }
-    }
-    /**
-     * Reference to the created HTML element.
-     * - can alse be used to store normal values, but it is not reactive.
-     * @param value mostly an HTMLElement
-     */
-    function ref(value, onChange) {
-        return new KTRef(value, []);
-    }
-    /**
-     * 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();
-        const redraw = () => {
-            elRef.value = creator(); // ref setter automatically calls replaceWith
-            elRef.redraw = redraw;
-            return elRef.value;
-        };
-        redraw();
-        return elRef;
-    }
-
-    /**
-     * LinearProgress component - mimics MUI LinearProgress appearance and behavior
-     */
     function LinearProgress(props) {
-        let { variant = 'indeterminate', progress: value = 0, color = 'primary' } = props;
-        const classes = [
-            'mui-linear-progress',
-            `mui-linear-progress-${color}`,
-            `mui-linear-progress-${variant}`,
-            props.class ? props.class : '',
-        ].join(' ');
-        const styleString = parseStyle(props.style);
-        // Calculate progress percentage
-        let progressValue = Math.min(Math.max(value, 0), 100);
-        const barRef = ref();
-        const container = (jsx("div", { class: classes, style: styleString, role: "progressbar", "aria-valuenow": progressValue, children: jsx("div", { ref: barRef, class: "mui-linear-progress-bar", style: variant === 'determinate' ? `width: ${progressValue}%` : '' }) }));
-        $defines(container, {
-            progress: {
-                get() {
-                    return progressValue;
-                },
-                set(newValue) {
-                    progressValue = Math.min(Math.max(newValue, 0), 100);
-                    if (variant === 'determinate') {
-                        barRef.value.style.width = `${progressValue}%`;
-                    }
-                },
-            },
-        });
+        const valueRef = ref(props.progress ?? 0);
+        const customClassRef = toReactive(props.class ?? '');
+        const colorRef = toReactive(props.color ?? 'primary');
+        const variantRef = toReactive(props.variant ?? 'indeterminate');
+        const classRef = computed(() => {
+            return `mui-linear-progress mui-linear-progress-${variantRef.value} mui-linear-progress-${colorRef.value} ${customClassRef.value}`;
+        }, [customClassRef, colorRef, variantRef]);
+        const styleRef = toReactive(props.style ?? '');
+        const barLengthRef = computed(() => {
+            return variantRef.value === 'determinate' ? `width: ${valueRef.value}%` : '';
+        }, [variantRef, valueRef]);
+        const container = (jsx("div", { class: classRef, style: styleRef, role: "progressbar", "aria-valuenow": valueRef, children: jsx("div", { class: "mui-linear-progress-bar", style: barLengthRef }) }));
         return container;
     }
 
-    /**
-     * TextField component - mimics MUI TextField appearance and behavior
-     */
     function TextField(props) {
-        let { label = '', placeholder = '', value = '', type = 'text', disabled = false, readonly = false, required = false, error = false, helperText = '', fullWidth = false, multiline = false, rows = 3, size = 'medium', } = 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 && inputEl.value ? 'mui-textfield-has-value' : '',
-                label ? '' : 'mui-textfield-no-label',
-            ].join(' ');
-        };
+        // # events
+        const onInput = props['on:input'] ?? $emptyFn;
+        const onInputTrim = props['on-trim:input'] ?? $emptyFn;
+        const onChange = props['on:change'] ?? $emptyFn;
+        const onChangeTrim = props['on-trim:change'] ?? $emptyFn;
+        const onBlur = props['on:blur'] ?? $emptyFn;
+        const onFocus = props['on:focus'] ?? $emptyFn;
+        const isFocusedRef = ref(false);
+        // # methods
         const handleInput = () => {
-            updateContainerClass();
-            if (type === 'number') {
+            if (inputType === 'number') {
                 const v = Number(inputEl.value);
+                modelRef.value = v;
                 onInput(v);
                 onInputTrim(v);
             }
             else {
+                modelRef.value = inputEl.value;
                 onInput(inputEl.value);
                 onInputTrim(inputEl.value.trim());
             }
         };
         const handleChange = () => {
-            updateContainerClass();
-            if (type === 'number') {
+            if (inputType === 'number') {
                 const v = Number(inputEl.value);
+                modelRef.value = v;
                 onChange(v);
                 onChangeTrim(v);
             }
             else {
+                modelRef.value = inputEl.value;
                 onChange(inputEl.value);
                 onChangeTrim(inputEl.value.trim());
             }
         };
         const handleFocus = () => {
-            isFocused = true;
-            updateContainerClass();
+            isFocused.value = true;
             onFocus(inputEl.value);
         };
         const handleBlur = () => {
-            isFocused = false;
-            updateContainerClass();
+            isFocused.value = false;
             onBlur(inputEl.value);
         };
         const handleWrapperMouseDown = (e) => {
-            if (disabled) {
+            if (disabledRef.value) {
                 return;
             }
             const target = e.target;
@@ -824,92 +1031,55 @@ var __ktjs_mui__ = (function (exports) {
             }
             setTimeout(() => inputEl.focus(), 0);
         };
-        const getPlaceholder = () => (label && !isFocused && !value ? '' : placeholder);
-        let isFocused = false;
+        const getPlaceholder = () => (labelRef.value && !isFocused && !modelRef.value ? '' : placeholderRef.value);
+        // # non-refs
+        const inputType = deref(props.type ?? 'text');
+        const multiline = props.multiline;
+        // # refs
+        // Create refs for all reactive properties
+        const labelRef = toReactive(props.label ?? '');
+        const placeholderRef = toReactive(props.placeholder ?? '', () => (inputEl.placeholder = getPlaceholder()));
+        const disabledRef = toReactive(props.disabled ?? false);
+        const readOnlyRef = toReactive(props.readOnly ?? false);
+        const requiredRef = toReactive(props.required ?? false);
+        const errorRef = toReactive(props.error ?? false);
+        const helperTextRef = toReactive(props.helperText ?? '');
+        const fullWidthRef = toReactive(props.fullWidth ?? false);
+        const rowsRef = toReactive(props.rows ?? 3);
+        const sizeRef = toReactive(props.size ?? 'medium');
+        // k-model takes precedence over value prop for two-way binding
+        const modelRef = $modelOrRef(props, props.value ?? '');
+        // Add change listeners for reactive properties
+        // `k-if` changing triggers redrawing, no need to do this again
+        // // labelRef.addOnChange(() => {
+        // //   wrapperRef.redraw();
+        // //   updateContainerClass();
+        // // });
+        const isFocused = ref(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", "on:mousedown": handleWrapperMouseDown, 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: parseStyle(props.style), children: [wrapperRef, helperTextEl] }));
-        // Initialize classes
-        setTimeout(() => updateContainerClass(), 0);
-        $defines(container, {
-            value: {
-                get() {
-                    return inputEl.value;
-                },
-                set(newValue) {
-                    inputEl.value = newValue;
-                    updateContainerClass();
-                },
-            },
-            label: {
-                get() {
-                    return label;
-                },
-                set(newLabel) {
-                    label = newLabel;
-                    wrapperRef.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';
-                },
-            },
-        });
+            ? (jsx("textarea", { class: "mui-textfield-input", placeholder: getPlaceholder(), value: modelRef.value, disabled: disabledRef, readOnly: readOnlyRef, required: requiredRef, rows: rowsRef, "on:input": handleInput, "on:change": handleChange, "on:focus": handleFocus, "on:blur": handleBlur }))
+            : (jsx("input", { type: inputType, class: "mui-textfield-input", placeholder: getPlaceholder(), value: modelRef.value, disabled: disabledRef, readOnly: readOnlyRef, required: requiredRef, "on:input": handleInput, "on:change": handleChange, "on:focus": handleFocus, "on:blur": handleBlur }));
+        modelRef.addOnChange((newValue) => (inputEl.value = newValue));
+        const styleRef = toReactive(parseStyle(props.style ?? ''));
+        const customClassRef = toReactive(props.class ?? '');
+        const classRef = computed(() => {
+            const className = [
+                'mui-textfield-root',
+                `mui-textfield-size-${sizeRef.value}`,
+                isFocusedRef.value ? 'mui-textfield-focused' : '',
+                errorRef.value ? 'mui-textfield-error' : '',
+                disabledRef.value ? 'mui-textfield-disabled' : '',
+                fullWidthRef.value ? 'mui-textfield-fullwidth' : '',
+                labelRef.value && inputEl.value ? 'mui-textfield-has-value' : '',
+                labelRef.value ? '' : 'mui-textfield-no-label',
+                customClassRef.value ? customClassRef.value : '',
+            ].join(' ');
+            return className;
+        }, [sizeRef, errorRef, disabledRef, fullWidthRef, labelRef, isFocusedRef, customClassRef]);
+        // if (multiline) {
+        //   rowsRef.addOnChange((newRows) => ((inputEl as HTMLTextAreaElement).rows = newRows));
+        // }
+        const container = (jsxs("div", { class: classRef, style: styleRef, children: [jsxs("div", { class: "mui-textfield-wrapper", "on:mousedown": handleWrapperMouseDown, children: [jsxs("label", { class: "mui-textfield-label", children: [labelRef, jsx("span", { "k-if": requiredRef, class: "mui-textfield-required", children: "*" })] }), jsx("div", { class: "mui-textfield-input-wrapper", children: inputEl }), jsx("fieldset", { class: "mui-textfield-fieldset", children: jsx("legend", { class: "mui-textfield-legend", children: jsxs("span", { children: [labelRef, jsx("span", { "k-if": requiredRef, children: "*" })] }) }) })] }), jsx("p", { class: "mui-textfield-helper-text", children: helperTextRef })] }));
         return container;
     }
 
@@ -917,7 +1087,7 @@ var __ktjs_mui__ = (function (exports) {
      * Radio component - mimics MUI Radio appearance and behavior
      */
     function Radio(props) {
-        const onChange = generateHandler(props, 'kt:change');
+        const onChange = props['on:change'] ?? $emptyFn;
         const toggleIcon = (checked) => {
             uncheckedIcon.style.display = checked ? 'none' : '';
             checkedIcon.style.display = checked ? '' : 'none';
@@ -932,7 +1102,9 @@ var __ktjs_mui__ = (function (exports) {
             onChange(checked, value);
         };
         let { checked = false, value = '', label: text = '', size = 'small', disabled = false, color = 'primary' } = props;
-        const input = (jsx("input", { type: "radio", class: "mui-radio-input", checked: checked, value: value, disabled: disabled, "on:change": handleChange }));
+        const valueRef = toReactive(props.value ?? '');
+        const disabledRef = toReactive(props.disabled ?? false);
+        const input = (jsx("input", { type: "radio", class: "mui-radio-input", checked: checked, value: valueRef, disabled: disabledRef, "on:change": handleChange }));
         const uncheckedIcon = (jsx("span", { class: "mui-radio-icon-unchecked", children: jsx("svg", { viewBox: "0 0 24 24", children: jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" }) }) }));
         const checkedIcon = (jsx("span", { class: "mui-radio-icon-checked", children: jsx("svg", { viewBox: "0 0 24 24", children: jsx("path", { d: "M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" }) }) }));
         // initialize icon state
@@ -962,7 +1134,7 @@ var __ktjs_mui__ = (function (exports) {
      */
     function RadioGroup(props) {
         let { value = '', size = 'small', row = false } = props;
-        const onChange = generateHandler(props, 'kt:change');
+        const onChange = props['on:change'] ?? $emptyFn;
         const changeHandler = (checked, value) => {
             if (checked) {
                 onChange(value);
@@ -972,15 +1144,15 @@ var __ktjs_mui__ = (function (exports) {
         const radios = props.options.map((o) => {
             o.size = size;
             o.checked = value === o.value;
-            const originalChange = o['kt:change'];
+            const originalChange = o['on:change'];
             if (originalChange) {
-                o['kt:change'] = (checked, newValue) => {
+                o['on:change'] = (checked, newValue) => {
                     originalChange(checked, newValue);
                     changeHandler(checked, newValue);
                 };
             }
             else {
-                o['kt:change'] = changeHandler;
+                o['on:change'] = changeHandler;
             }
             return Radio(o);
         });
@@ -1003,22 +1175,10 @@ var __ktjs_mui__ = (function (exports) {
      * Select component - mimics MUI Select appearance and behavior
      */
     function Select(props) {
-        let { value = '', options = [], label = '', placeholder = '', size = 'medium', fullWidth = false, disabled = false, } = props;
-        const onChange = generateHandler(props, 'kt:change');
-        let isOpen = false;
-        let isFocused = false;
-        const selectRef = ref();
-        const selectLabelRef = ref();
-        // Toggle dropdown
-        const toggleMenu = () => {
-            if (disabled) {
-                return;
-            }
-            isOpen = !isOpen;
-            updateMenu();
-        };
-        // Update menu visibility
-        const updateMenu = () => {
+        const onChange = props['on:change'] ?? $emptyFn;
+        // # refs
+        const isFocusedRef = ref(false);
+        const open = ref(false, (isOpen) => {
             if (isOpen) {
                 menu.value.style.display = 'block';
                 void menu.value.offsetHeight; // & Trigger reflow to enable animation
@@ -1032,85 +1192,139 @@ var __ktjs_mui__ = (function (exports) {
                 }, 200);
             }
             menu.value.classList.toggle('mui-select-menu-open', isOpen);
-            selectRef.value.classList.toggle('mui-select-open', isOpen);
+            container.classList.toggle('mui-select-open', isOpen);
+        });
+        // # ref props
+        const placeholderRef = toReactive(props.placeholder ?? '');
+        const labelRef = toReactive(props.label ?? '');
+        const optionsRef = toReactive(props.options, (newOptions) => {
+            if (!newOptions.find((o) => o.value === modelRef.value)) {
+                onChange((modelRef.value = ''));
+            }
+        });
+        const disabledRef = toReactive(props.disabled ?? false, (v) => container.classList.toggle('mui-select-disabled', v));
+        const modelRef = $modelOrRef(props, props.value ?? '');
+        const styleRef = toReactive(parseStyle(props.style ?? ''));
+        const classRef = toReactive(props.class ?? '');
+        const sizeRef = toReactive(props.size ?? 'medium');
+        const fullwidthRef = toReactive(props.fullWidth ?? false);
+        const className = computed(() => {
+            return `mui-select-wrapper mui-select-size-${sizeRef.value} ${fullwidthRef.value ? 'mui-select-fullWidth' : ''} ${classRef.value} ${disabledRef.value ? 'mui-select-disabled' : ''}`;
+        }, [sizeRef, fullwidthRef, classRef, disabledRef]);
+        const label = computed(() => {
+            if (labelRef.value) {
+                return (jsx("label", { class: `mui-select-label ${modelRef.value || isFocusedRef.value || placeholderRef.value ? 'focused' : ''}`, children: labelRef }));
+            }
+            return '';
+        }, [labelRef, modelRef, isFocusedRef, placeholderRef]);
+        // Toggle dropdown
+        const toggleMenu = () => {
+            if (!disabledRef.value) {
+                open.value = !open.value;
+            }
         };
         // Handle option click
-        const handleOptionClick = (newValue) => {
-            value = newValue;
-            isOpen = false;
-            onChange(value);
-            updateMenu();
-            updateLabelState();
-            valueDisplay.redraw();
-            setTimeout(() => menu.redraw(), 200);
+        const handleOptionClick = (e) => {
+            const newValue = e.currentTarget.dataset.value;
+            modelRef.value = newValue;
+            onChange(newValue);
+            open.value = false;
         };
         // Close menu when clicking outside
         const handleClickOutside = (e) => {
-            if (!selectRef.value.contains(e.target)) {
-                isOpen = false;
-                updateMenu();
+            if (!container.contains(e.target)) {
+                open.value = false;
             }
         };
         // Handle focus
-        const handleFocus = () => {
-            isFocused = true;
-            updateLabelState();
-        };
-        const handleBlur = () => {
-            isFocused = false;
-            updateLabelState();
-        };
-        // Update label focused state
-        const updateLabelState = () => {
-            selectLabelRef.value.classList?.toggle('focused', isFocused || !!value);
-        };
-        const valueDisplay = createRedrawable(() => {
-            const o = options.find((opt) => opt.value === value);
-            let inner;
-            if (o === undefined) {
-                inner = jsx("span", { class: "mui-select-placeholder", children: placeholder || '\u00a0' });
-            }
-            else {
-                inner = o.label;
-            }
-            return jsx("div", { class: "mui-select-display", children: inner });
-        });
-        const menu = createRedrawable(() => {
-            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 }))) }));
-        });
+        const handleFocus = () => (isFocusedRef.value = true);
+        const handleBlur = () => (isFocusedRef.value = false);
+        const defaultEmpty = jsx("span", { class: "mui-select-placeholder", children: placeholderRef.value || '\u00a0' });
+        const displayedValue = computed(() => {
+            const o = optionsRef.value.find((item) => item.value === modelRef.value);
+            return jsx("div", { class: "mui-select-display", children: o?.label ?? defaultEmpty });
+        }, [modelRef]);
+        const menu = computed(() => {
+            return (jsxs("div", { class: "mui-select-menu", style: "display: none;", children: [optionsRef.value.map((o) => (jsx("div", { class: `mui-select-option ${o.value === modelRef.value ? 'selected' : ''}`, "data-value": o.value, "on:click": handleOptionClick, children: o.label }))), ' '] }));
+        }, [optionsRef, modelRef]);
         // Create container
-        const container = (jsxs("div", { ref: selectRef, class: `mui-select-wrapper mui-select-size-${size} ${props.class ?? ''} ${fullWidth ? 'mui-select-fullWidth' : ''} ${disabled ? 'mui-select-disabled' : ''}`, style: parseStyle(props.style), children: [jsx("label", { "k-if": label, ref: selectLabelRef, class: `mui-select-label ${value || isFocused ? 'focused' : ''}`, children: label }), jsxs("div", { class: "mui-select-control mui-select-outlined", "on:click": toggleMenu, "on:focus": handleFocus, "on:blur": handleBlur, tabIndex: disabled ? -1 : 0, children: [valueDisplay, jsx("input", { type: "hidden", value: value }), jsx("fieldset", { class: "mui-select-fieldset", children: jsx("legend", { children: jsx("span", { children: label }) }) }), jsx("svg", { class: "mui-select-icon", focusable: "false", "aria-hidden": "true", viewBox: "0 0 24 24", width: "24", height: "24", children: jsx("path", { d: "M7 10l5 5 5-5Z", fill: "currentColor" }) })] }), menu] }));
-        $defines(container, {
-            value: {
-                get: () => value,
-                set: (newValue) => {
-                    value = newValue;
-                    updateLabelState();
-                    valueDisplay.redraw();
-                    menu.redraw();
-                },
-            },
-            disabled: {
-                get: () => disabled,
-                set: (newDisabled) => {
-                    disabled = newDisabled;
-                    if (disabled) {
-                        isOpen = false;
-                        updateMenu();
-                    }
-                    container.classList.toggle('mui-select-disabled', disabled);
-                },
-            },
-        });
+        const container = (jsxs("div", { class: className, style: styleRef, children: [label, jsxs("div", { class: "mui-select-control mui-select-outlined", "on:click": toggleMenu, "on:focus": handleFocus, "on:blur": handleBlur, tabIndex: disabledRef.value ? -1 : 0, children: [displayedValue, jsx("input", { type: "hidden", value: modelRef }), jsx("fieldset", { class: "mui-select-fieldset", children: jsx("legend", { class: "mui-select-legend", children: jsx("span", { children: labelRef }) }) }), jsx("svg", { class: "mui-select-icon", focusable: "false", "aria-hidden": "true", viewBox: "0 0 24 24", width: "24", height: "24", children: jsx("path", { d: "M7 10l5 5 5-5Z", fill: "currentColor" }) })] }), menu] }));
         // Add global click listener
         setTimeout(() => {
             document.removeEventListener('click', handleClickOutside);
             document.addEventListener('click', handleClickOutside);
-            updateLabelState();
         }, 0);
         return container;
     }
 
+    /**
+     * Card component - mimics MUI Card appearance and behavior
+     */
+    function Card(props) {
+        // # ref props
+        const variantRef = toReactive(props.variant ?? 'elevation');
+        const elevationRef = toReactive(props.elevation ?? 1);
+        const squareRef = toReactive(props.square ?? false);
+        const raisedRef = toReactive(props.raised ?? false);
+        const styleRef = toReactive(parseStyle(props.style ?? ''));
+        const classRef = toReactive(props.class ?? '');
+        const className = computed(() => {
+            const base = 'mui-card';
+            const variantClass = `mui-card-${variantRef.value}`;
+            const elevationClass = variantRef.value === 'elevation' ? `mui-card-elevation-${Math.min(24, Math.max(0, elevationRef.value))}` : '';
+            const squareClass = squareRef.value ? 'mui-card-square' : '';
+            const raisedClass = raisedRef.value ? 'mui-card-raised' : '';
+            return `${base} ${variantClass} ${elevationClass} ${squareClass} ${raisedClass} ${classRef.value}`.trim().replace(/\s+/g, ' ');
+        }, [variantRef, elevationRef, squareRef, raisedRef, classRef]);
+        // Handle click
+        const handleClick = props['on:click'] ?? (() => { });
+        const container = (jsx("div", { class: className, style: styleRef, "on:click": handleClick, children: props.children }));
+        return container;
+    }
+
+    /**
+     * Switch component - mimics MUI Switch appearance and behavior
+     */
+    function Switch(props) {
+        const onChange = props['on:change'] ?? $emptyFn;
+        // # ref props
+        const labelRef = toReactive(props.label ?? '');
+        const valueRef = toReactive(props.value ?? '');
+        const colorRef = toReactive(props.color ?? 'primary');
+        const sizeRef = toReactive(props.size ?? 'medium');
+        const disabledRef = toReactive(props.disabled ?? false, (v) => {
+            inputEl.disabled = v;
+            container.classList.toggle('mui-switch-disabled', v);
+        });
+        const modelRef = $modelOrRef(props, props.checked ?? false);
+        modelRef.addOnChange((newValue) => {
+            inputEl.checked = newValue;
+            track.classList.toggle('mui-switch-track-checked', newValue);
+            thumb.classList.toggle('mui-switch-thumb-checked', newValue);
+        });
+        const styleRef = toReactive(parseStyle(props.style ?? ''));
+        const classRef = toReactive(props.class ?? '');
+        const className = computed(() => {
+            return `mui-switch-wrapper mui-switch-size-${sizeRef.value} ${disabledRef.value ? 'mui-switch-disabled' : ''} mui-switch-color-${colorRef.value} ${classRef.value}`;
+        }, [colorRef, disabledRef, sizeRef, classRef]);
+        // Handle change
+        const handleChange = () => {
+            if (disabledRef.value) {
+                return;
+            }
+            modelRef.value = inputEl.checked;
+            onChange(modelRef.value, valueRef.value);
+        };
+        const inputEl = (jsx("input", { type: "checkbox", class: "mui-switch-input", checked: modelRef.value, value: valueRef, disabled: disabledRef, "on:change": handleChange }));
+        const track = jsx("span", { class: "mui-switch-track" });
+        const thumb = jsx("span", { class: "mui-switch-thumb" });
+        const container = (jsxs("label", { class: className, style: styleRef, children: [inputEl, jsxs("span", { class: "mui-switch-base", children: [track, thumb] }), jsx("span", { "k-if": labelRef, class: "mui-switch-label", children: labelRef })] }));
+        // Initialize state
+        track.classList.toggle('mui-switch-track-checked', modelRef.value);
+        thumb.classList.toggle('mui-switch-thumb-checked', modelRef.value);
+        return container;
+    }
+
     function DownloadIcon(props) {
         return (jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "1em", height: "1em", ...props, children: jsx("path", { d: "M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z" }) }));
     }
@@ -1201,6 +1415,7 @@ var __ktjs_mui__ = (function (exports) {
 
     exports.Alert = Alert;
     exports.Button = Button;
+    exports.Card = Card;
     exports.Checkbox = Checkbox;
     exports.CheckboxGroup = CheckboxGroup;
     exports.ColorLensIcon = ColorLensIcon;
@@ -1228,6 +1443,7 @@ var __ktjs_mui__ = (function (exports) {
     exports.SettingsIcon = SettingsIcon;
     exports.StopIcon = StopIcon;
     exports.SubtitlesIcon = SubtitlesIcon;
+    exports.Switch = Switch;
     exports.TextField = TextField;
     exports.UploadFileIcon = UploadFileIcon;
     exports.VideoFileIcon = VideoFileIcon;