@ktjs/mui 0.20.2 → 0.23.2

package/dist/index.mjs

@@ -1,14 +1,78 @@
+// 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
@@ -44,11 +108,28 @@ const $append = // for ie 9/10/11
             $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) {
@@ -92,10 +173,25 @@ const handlers = {
 };
 
 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) {
@@ -103,18 +199,34 @@ function attrIsObject(element, attr) {
             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];
@@ -124,7 +236,14 @@ function attrIsObject(element, attr) {
         }
         // 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);
+            }
         }
     }
 }
@@ -136,17 +255,28 @@ function applyAttr(element, attr) {
         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);
@@ -191,14 +321,34 @@ function applyContent(element, content) {
     }
 }
 
-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.
@@ -209,7 +359,7 @@ const MATHML_ATTR_FLAG = '__kt_mathml__';
  * ## 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!
@@ -218,7 +368,7 @@ const MATHML_ATTR_FLAG = '__kt_mathml__';
  */
 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) {
@@ -238,39 +388,57 @@ const h = (tag, attr, content) => {
     // * 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;
 }
 /**
@@ -279,48 +447,8 @@ function jsx(tag, props) {
  */
 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 = () => {
@@ -349,201 +477,409 @@ function Alert(props) {
     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;
 }
 
@@ -552,11 +888,30 @@ function CheckboxGroup(props) {
  * 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();
         }
     };
@@ -566,7 +921,7 @@ function Dialog(props) {
         }
     };
     // 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;
@@ -576,30 +931,6 @@ function Dialog(props) {
         }
         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;
 }
 
@@ -627,192 +958,68 @@ function FormLabel(props) {
     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;
@@ -821,92 +1028,55 @@ function TextField(props) {
         }
         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;
 }
 
@@ -914,7 +1084,7 @@ function TextField(props) {
  * 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';
@@ -929,7 +1099,9 @@ function Radio(props) {
         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
@@ -959,7 +1131,7 @@ function Radio(props) {
  */
 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);
@@ -969,15 +1141,15 @@ function RadioGroup(props) {
     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);
     });
@@ -1000,22 +1172,10 @@ function RadioGroup(props) {
  * 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
@@ -1029,85 +1189,139 @@ function Select(props) {
             }, 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" }) }));
 }
@@ -1196,4 +1410,4 @@ function SelectAllIcon(props) {
     return (jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "1em", height: "1em", ...props, children: jsx("path", { d: "M3 5h2V3c-1.1 0-2 .9-2 2zm0 8h2v-2H3v2zm4 8h2v-2H7v2zM3 9h2V7H3v2zm10-6h-2v2h2V3zm6 0v2h2c0-1.1-.9-2-2-2zM5 21v-2H3c0 1.1.9 2 2 2zm-2-4h2v-2H3v2zM9 3H7v2h2V3zm2 18h2v-2h-2v2zm8-8h2v-2h-2v2zm0 8c1.1 0 2-.9 2-2h-2v2zm0-12h2V7h-2v2zm0 8h2v-2h-2v2zm-4 4h2v-2h-2v2zm0-16h2V3h-2v2zM7 17h10V7H7v10zm2-8h6v6H9V9z" }) }));
 }
 
-export { Alert, Button, Checkbox, CheckboxGroup, ColorLensIcon, CompressIcon, ContentCopyIcon, ContentPasteIcon, DeleteIcon, Dialog, DownloadIcon, ExpandMoreIcon, FileOpenIcon, FolderOpenIcon, FormLabel, HomeIcon, LinearProgress, MenuIcon, NewReleasesIcon, PlayArrowIcon, QueuePlayNextIcon, Radio, RadioGroup, SaveIcon, Select, SelectAllIcon, SettingsIcon, StopIcon, SubtitlesIcon, TextField, UploadFileIcon, VideoFileIcon, WallpaperIcon };
+export { Alert, Button, Card, Checkbox, CheckboxGroup, ColorLensIcon, CompressIcon, ContentCopyIcon, ContentPasteIcon, DeleteIcon, Dialog, DownloadIcon, ExpandMoreIcon, FileOpenIcon, FolderOpenIcon, FormLabel, HomeIcon, LinearProgress, MenuIcon, NewReleasesIcon, PlayArrowIcon, QueuePlayNextIcon, Radio, RadioGroup, SaveIcon, Select, SelectAllIcon, SettingsIcon, StopIcon, SubtitlesIcon, Switch, TextField, UploadFileIcon, VideoFileIcon, WallpaperIcon };