@ktjs/mui 0.23.2 → 0.24.2

package/dist/index.iife.js

@@ -1,1454 +0,0 @@
-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 $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
-     */
-    const $appendChild = HTMLElement.prototype.appendChild;
-    const originAppend = HTMLElement.prototype.append;
-    const $append = // for ie 9/10/11
-     typeof originAppend === 'function'
-        ? originAppend
-        : function (...nodes) {
-            if (nodes.length < 50) {
-                for (let i = 0; i < nodes.length; i++) {
-                    const node = nodes[i];
-                    if (typeof node === 'string') {
-                        $appendChild.call(this, document.createTextNode(node));
-                    }
-                    else {
-                        $appendChild.call(this, node);
-                    }
-                }
-            }
-            else {
-                const fragment = document.createDocumentFragment();
-                for (let i = 0; i < nodes.length; i++) {
-                    const node = nodes[i];
-                    if (typeof node === 'string') {
-                        $appendChild.call(fragment, document.createTextNode(node));
-                    }
-                    else {
-                        $appendChild.call(fragment, node);
-                    }
-                }
-                $appendChild.call(this, fragment);
-            }
-        };
-    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
-    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) {
-            element[key] = !!value;
-        }
-        else {
-            element.setAttribute(key, value);
-        }
-    };
-    const valueHandler = (element, key, value) => {
-        if (key in element) {
-            element[key] = value;
-        }
-        else {
-            element.setAttribute(key, value);
-        }
-    };
-    // Attribute handlers map for optimized lookup
-    const handlers = {
-        checked: booleanHandler,
-        selected: booleanHandler,
-        value: valueHandler,
-        valueAsDate: valueHandler,
-        valueAsNumber: valueHandler,
-        defaultValue: valueHandler,
-        defaultChecked: booleanHandler,
-        defaultSelected: booleanHandler,
-        disabled: booleanHandler,
-        readOnly: booleanHandler,
-        multiple: booleanHandler,
-        required: booleanHandler,
-        autofocus: booleanHandler,
-        open: booleanHandler,
-        controls: booleanHandler,
-        autoplay: booleanHandler,
-        loop: booleanHandler,
-        muted: booleanHandler,
-        defer: booleanHandler,
-        async: booleanHandler,
-        hidden: (element, _key, value) => (element.hidden = !!value),
-    };
-
-    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) {
-            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) {
-            if (typeof style === 'string') {
-                element.setAttribute('style', style);
-            }
-            else if (typeof style === 'object') {
-                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 === 'k-if' ||
-                key === 'k-model' ||
-                key === 'ref' ||
-                key === 'class' ||
-                key === 'className' ||
-                key === 'style' ||
-                key === 'children' ||
-                key === 'k-html') {
-                continue;
-            }
-            const o = attr[key];
-            // normal event handler
-            if (key.startsWith('on:')) {
-                element.addEventListener(key.slice(3), o); // chop off the `on:`
-            }
-            // normal attributes
-            else {
-                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);
-                }
-            }
-        }
-    }
-    function applyAttr(element, attr) {
-        if (!attr) {
-            return;
-        }
-        if (typeof attr === 'object' && attr !== null) {
-            attrIsObject(element, attr);
-        }
-        else {
-            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 (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);
-            // Handle KTFor anchor
-            const list = c.__kt_for_list__;
-            if ($isArray(list)) {
-                apd(element, list);
-            }
-        }
-    }
-    function apd(element, c) {
-        if ($isThenable(c)) {
-            c.then((r) => apd(element, r));
-        }
-        else if ($isArray(c)) {
-            for (let i = 0; i < c.length; i++) {
-                // & might be thenable here too
-                const ci = c[i];
-                if ($isThenable(ci)) {
-                    const comment = document.createComment('ktjs-promise-placeholder');
-                    $append.call(element, comment);
-                    ci.then((awaited) => comment.replaceWith(awaited));
-                }
-                else {
-                    apdSingle(element, ci);
-                }
-            }
-        }
-        else {
-            // & here is thened, so must be a simple elementj
-            apdSingle(element, c);
-        }
-    }
-    function applyContent(element, content) {
-        if ($isArray(content)) {
-            for (let i = 0; i < content.length; i++) {
-                apd(element, content[i]);
-            }
-        }
-        else {
-            apd(element, content);
-        }
-    }
-
-    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;
-    /**
-     * Create an enhanced HTMLElement.
-     * - Only supports HTMLElements, **NOT** SVGElements or other Elements.
-     * @param tag tag of an `HTMLElement`
-     * @param attr attribute object or className
-     * @param content a string or an array of HTMLEnhancedElement as child nodes
-     *
-     * ## About
-     * @package @ktjs/core
-     * @author Kasukabe Tsumugi <futami16237@gmail.com>
-     * @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!
-     * @description Core functionality for kt.js - DOM manipulation utilities with JSX/TSX support
-     * @copyright Copyright (c) 2026 Kasukabe Tsumugi. All rights reserved.
-     */
-    const h = (tag, attr, content) => {
-        if (typeof tag !== 'string') {
-            throw new Error('[kt.js error] tagName must be a string.');
-        }
-        if (attr) {
-            if (SVG_ATTR_FLAG in attr) {
-                delete attr[SVG_ATTR_FLAG];
-                creator = svgCreator;
-            }
-            else if (MATHML_ATTR_FLAG in attr) {
-                delete attr[MATHML_ATTR_FLAG];
-                creator = mathMLCreator;
-            }
-            else {
-                creator = htmlCreator;
-            }
-        }
-        // * start creating the element
-        const element = creator(tag);
-        // * Handle content
-        applyAttr(element, attr);
-        applyContent(element, content);
-        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) {
-        if (isComputed(props.ref)) {
-            throw new Error('[kt.js error] Cannot assign a computed value to an element.');
-        }
-        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;
-            }
-        }
-        el = create(tag, props);
-        maybeDummyRef.value = el;
-        return el;
-    }
-    /**
-     * JSX runtime for React 17+ automatic runtime
-     * This is called when using jsx: "react-jsx" or "react-jsxdev"
-     */
-    const jsxs = jsx;
-
-    function Alert(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 = () => {
-            if (icon === false) {
-                return null;
-            }
-            if (icon) {
-                return icon;
-            }
-            const iconSize = '22px';
-            const iconClass = 'mui-alert-icon';
-            switch (severity) {
-                case 'success':
-                    return (jsx("svg", { class: iconClass, viewBox: "0 0 24 24", width: iconSize, height: iconSize, children: jsx("path", { fill: "currentColor", d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" }) }));
-                case 'error':
-                    return (jsx("svg", { class: iconClass, viewBox: "0 0 24 24", width: iconSize, height: iconSize, children: jsx("path", { fill: "currentColor", d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z" }) }));
-                case 'warning':
-                    return (jsx("svg", { class: iconClass, viewBox: "0 0 24 24", width: iconSize, height: iconSize, children: jsx("path", { fill: "currentColor", d: "M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z" }) }));
-                case 'info':
-                default:
-                    return (jsx("svg", { class: iconClass, viewBox: "0 0 24 24", width: iconSize, height: iconSize, children: jsx("path", { fill: "currentColor", d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z" }) }));
-            }
-        };
-        const alertIcon = getIcon();
-        const alert = (jsxs("div", { class: classes, style: parseStyle(props.style), role: "alert", children: [alertIcon && jsx("div", { class: "mui-alert-icon-wrapper", children: alertIcon }), jsx("div", { class: "mui-alert-message", children: children }), jsx("button", { "k-if": onClose, class: "mui-alert-close", "on:click": onClose, "aria-label": "Close", children: jsx("svg", { viewBox: "0 0 24 24", width: "18px", height: "18px", children: jsx("path", { fill: "currentColor", d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }) }) })] }));
-        return alert;
-    }
-
-    // Shared constants
-    // Empty for now - can be extended with framework-wide constants
-    /**
-     * Mark the attribute as SVG to handle special cases during rendering.
-     */
-    const $is = Object.is;
-    const $random = Math.random;
-
-    // DOM manipulation utilities
-    // # dom natives
-    const $isNode = (x) => x?.nodeType > 0;
-    /**
-     * Safe replace `oldNode` With `newNode`
-     */
-    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)}`;
-        };
-    }
-
-    // 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;
-            }
-            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;
-        }
-    }
-    /**
-     * 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 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.`);
-            }
-            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 {
-                uncheckedIcon.style.display = checked ? 'none' : '';
-                checkedIcon.style.display = checked ? '' : 'none';
-                indeterminateIcon.style.display = 'none';
-            }
-        };
-        // Handle change
-        const handleChange = () => {
-            if (disabledRef.value) {
-                return;
-            }
-            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 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;
-    }
-
-    /**
-     * Dialog component - mimics MUI Dialog appearance and behavior
-     * Only handles open/close state, title and content are passed as props
-     */
-    function Dialog(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') {
-                openRef.value = false;
-                onClose();
-            }
-        };
-        const handleBackdropClick = (e) => {
-            if (e.target === container) {
-                onClose();
-            }
-        };
-        // Backdrop element
-        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;
-        container.remove = () => {
-            if (keyDownHandler) {
-                document.removeEventListener('keydown', keyDownHandler);
-            }
-            return originalRemove.call(container);
-        };
-        return container;
-    }
-
-    /**
-     * FormLabel component - mimics MUI FormLabel appearance and behavior
-     */
-    function FormLabel(props) {
-        const { children, required = false, error = false, disabled = false, focused = false, filled = false, component = 'label', htmlFor, } = props;
-        const classes = [
-            'mui-form-label',
-            error && 'mui-form-label-error',
-            disabled && 'mui-form-label-disabled',
-            focused && 'mui-form-label-focused',
-            filled && 'mui-form-label-filled',
-        ]
-            .filter(Boolean)
-            .join(' ');
-        const labelProps = {
-            class: classes,
-        };
-        if (htmlFor) {
-            labelProps.for = htmlFor;
-        }
-        const element = component === 'legend' ? (jsxs("legend", { ...labelProps, children: [children, required && jsx("span", { class: "mui-form-label-asterisk", children: " *" })] })) : (jsxs("label", { ...labelProps, children: [children, required && jsx("span", { class: "mui-form-label-asterisk", children: " *" })] }));
-        return element;
-    }
-
-    function LinearProgress(props) {
-        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;
-    }
-
-    function TextField(props) {
-        // # 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 = () => {
-            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 = () => {
-            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.value = true;
-            onFocus(inputEl.value);
-        };
-        const handleBlur = () => {
-            isFocused.value = false;
-            onBlur(inputEl.value);
-        };
-        const handleWrapperMouseDown = (e) => {
-            if (disabledRef.value) {
-                return;
-            }
-            const target = e.target;
-            if (!target || target === inputEl) {
-                return;
-            }
-            setTimeout(() => inputEl.focus(), 0);
-        };
-        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: 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;
-    }
-
-    /**
-     * Radio component - mimics MUI Radio appearance and behavior
-     */
-    function Radio(props) {
-        const onChange = props['on:change'] ?? $emptyFn;
-        const toggleIcon = (checked) => {
-            uncheckedIcon.style.display = checked ? 'none' : '';
-            checkedIcon.style.display = checked ? '' : 'none';
-        };
-        // Handle change
-        const handleChange = () => {
-            if (disabled) {
-                return;
-            }
-            checked = input.checked;
-            toggleIcon(checked);
-            onChange(checked, value);
-        };
-        let { checked = false, value = '', label: text = '', size = 'small', disabled = false, color = 'primary' } = props;
-        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
-        toggleIcon(checked);
-        const container = (jsxs("label", { class: `mui-radio-wrapper ${props.class ?? ''} mui-radio-size-${size} ${disabled ? 'mui-radio-disabled' : ''} mui-radio-color-${color}`, style: parseStyle(props.style), children: [input, jsxs("span", { class: "mui-radio-icon", children: [uncheckedIcon, checkedIcon] }), jsx("span", { class: "mui-radio-label", children: text })] }));
-        $defines(container, {
-            value: {
-                get() {
-                    return value;
-                },
-            },
-            checked: {
-                get() {
-                    return checked;
-                },
-                set(newChecked) {
-                    checked = newChecked;
-                    input.checked = checked;
-                    toggleIcon(checked);
-                },
-            },
-        });
-        return container;
-    }
-    /**
-     * RadioGroup component - groups multiple radios together
-     */
-    function RadioGroup(props) {
-        let { value = '', size = 'small', row = false } = props;
-        const onChange = props['on:change'] ?? $emptyFn;
-        const changeHandler = (checked, value) => {
-            if (checked) {
-                onChange(value);
-            }
-            radios.forEach((radio) => (radio.checked = radio.value === value));
-        };
-        const radios = props.options.map((o) => {
-            o.size = size;
-            o.checked = value === o.value;
-            const originalChange = o['on:change'];
-            if (originalChange) {
-                o['on:change'] = (checked, newValue) => {
-                    originalChange(checked, newValue);
-                    changeHandler(checked, newValue);
-                };
-            }
-            else {
-                o['on:change'] = changeHandler;
-            }
-            return Radio(o);
-        });
-        const container = (jsx("div", { class: `mui-radio-group ${row ? 'mui-radio-group-row' : ''} ${props.class ?? ''}`, style: parseStyle(props.style), role: "radiogroup", children: radios }));
-        $defines(container, {
-            value: {
-                get() {
-                    return value;
-                },
-                set(newValue) {
-                    value = newValue;
-                    radios.forEach((radio) => (radio.checked = radio.value === value));
-                },
-            },
-        });
-        return container;
-    }
-
-    /**
-     * Select component - mimics MUI Select appearance and behavior
-     */
-    function Select(props) {
-        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
-            }
-            else {
-                // Hide after animation completes
-                setTimeout(() => {
-                    if (!isOpen) {
-                        menu.value.style.display = 'none';
-                    }
-                }, 200);
-            }
-            menu.value.classList.toggle('mui-select-menu-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 = (e) => {
-            const newValue = e.currentTarget.dataset.value;
-            modelRef.value = newValue;
-            onChange(newValue);
-            open.value = false;
-        };
-        // Close menu when clicking outside
-        const handleClickOutside = (e) => {
-            if (!container.contains(e.target)) {
-                open.value = false;
-            }
-        };
-        // Handle focus
-        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", { 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);
-        }, 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" }) }));
-    }
-
-    function CompressIcon(props) {
-        return (jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "1em", height: "1em", ...props, children: jsx("path", { d: "M4 9h16v2H4zm0 4h16v2H4zm8-9 4 4H8zm0 14 4-4H8z" }) }));
-    }
-
-    function SubtitlesIcon(props) {
-        return (jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "1em", height: "1em", ...props, children: jsx("path", { d: "M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zM4 12h4v2H4v-2zm10 6H4v-2h10v2zm6 0h-4v-2h4v2zm0-4H10v-2h10v2z" }) }));
-    }
-
-    function SettingsIcon(props) {
-        return (jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "1em", height: "1em", ...props, children: jsx("path", { d: "M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.07.62-.07.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z" }) }));
-    }
-
-    function NewReleasesIcon(props) {
-        return (jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "1em", height: "1em", ...props, children: jsx("path", { d: "m23 12-2.44-2.79.34-3.69-3.61-.82-1.89-3.2L12 2.96 8.6 1.5 6.71 4.69 3.1 5.5l.34 3.7L1 12l2.44 2.79-.34 3.7 3.61.82L8.6 22.5l3.4-1.47 3.4 1.46 1.89-3.19 3.61-.82-.34-3.69L23 12zm-12.91 4.72-3.8-3.81 1.48-1.48 2.32 2.33 5.85-5.87 1.48 1.48-7.33 7.35z" }) }));
-    }
-
-    function FolderOpenIcon(props) {
-        return (jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "1em", height: "1em", ...props, children: jsx("path", { d: "M20 6h-8l-2-2H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2zm0 12H4V8h16v10z" }) }));
-    }
-
-    function PlayArrowIcon(props) {
-        return (jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "1em", height: "1em", ...props, children: jsx("path", { d: "M8 5v14l11-7z" }) }));
-    }
-
-    function ContentPasteIcon(props) {
-        return (jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "1em", height: "1em", ...props, children: jsx("path", { d: "M19 2h-4.18C14.4.84 13.3 0 12 0c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm7 18H5V4h2v3h10V4h2v16z" }) }));
-    }
-
-    function DeleteIcon(props) {
-        return (jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "1em", height: "1em", ...props, children: jsx("path", { d: "M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z" }) }));
-    }
-
-    function StopIcon(props) {
-        return (jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "1em", height: "1em", ...props, children: jsx("path", { d: "M6 6h12v12H6z" }) }));
-    }
-
-    function FileOpenIcon(props) {
-        return (jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "1em", height: "1em", ...props, children: jsx("path", { d: "M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H15l6-6V4c0-1.1-.9-2-2-2zm-1 7V3.5L18.5 9H13z" }) }));
-    }
-
-    function ColorLensIcon(props) {
-        return (jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "1em", height: "1em", ...props, children: jsx("path", { d: "M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9c.83 0 1.5-.67 1.5-1.5 0-.39-.15-.74-.39-1.01-.23-.26-.38-.61-.38-.99 0-.83.67-1.5 1.5-1.5H16c2.76 0 5-2.24 5-5 0-4.42-4.03-8-9-8zm-5.5 9c-.83 0-1.5-.67-1.5-1.5S5.67 9 6.5 9 8 9.67 8 10.5 7.33 12 6.5 12zm3-4C8.67 8 8 7.33 8 6.5S8.67 5 9.5 5s1.5.67 1.5 1.5S10.33 8 9.5 8zm5 0c-.83 0-1.5-.67-1.5-1.5S13.67 5 14.5 5s1.5.67 1.5 1.5S15.33 8 14.5 8zm3 4c-.83 0-1.5-.67-1.5-1.5S16.67 9 17.5 9s1.5.67 1.5 1.5-.67 1.5-1.5 1.5z" }) }));
-    }
-
-    function WallpaperIcon(props) {
-        return (jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "1em", height: "1em", ...props, children: jsx("path", { d: "M4 4h7V2H4c-1.1 0-2 .9-2 2v7h2V4zm6 9-4 5h12l-3-4-2.03 2.71L10 13zm7-4.5c0-.83-.67-1.5-1.5-1.5S14 7.67 14 8.5s.67 1.5 1.5 1.5S17 9.33 17 8.5zM20 2h-7v2h7v7h2V4c0-1.1-.9-2-2-2zm0 18h-7v2h7c1.1 0 2-.9 2-2v-7h-2v7zM4 13H2v7c0 1.1.9 2 2 2h7v-2H4v-7z" }) }));
-    }
-
-    function ExpandMoreIcon(props) {
-        return (jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "1em", height: "1em", ...props, children: jsx("path", { d: "M16.59 8.59 12 13.17 7.41 8.59 6 10l6 6 6-6z" }) }));
-    }
-
-    function SaveIcon(props) {
-        return (jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "1em", height: "1em", ...props, children: jsx("path", { d: "M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm3-10H5V5h10v4z" }) }));
-    }
-
-    function UploadFileIcon(props) {
-        return (jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "1em", height: "1em", ...props, children: jsx("path", { d: "M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm4 18H6V4h7v5h5v11zM8 15.01l1.41 1.41L11 14.84V19h2v-4.16l1.59 1.59L16 15.01 12.01 11z" }) }));
-    }
-
-    function VideoFileIcon(props) {
-        return (jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "1em", height: "1em", ...props, children: jsx("path", { d: "M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zM6 20V4h7v5h5v11H6zm10-7v-1.5l2 1.5-2 1.5V13H8v-2h8z" }) }));
-    }
-
-    function QueuePlayNextIcon(props) {
-        return (jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "1em", height: "1em", ...props, children: jsx("path", { d: "M21 3H3c-1.11 0-2 .89-2 2v12c0 1.1.89 2 2 2h5v2h8v-2h2v-2H3V5h18v8h2V5c0-1.11-.9-2-2-2zm-8 7V7h-2v3H8v2h3v3h2v-3h3v-2h-3zm11 8-4.5 4.5L18 21l3-3-3-3 1.5-1.5L24 18z" }) }));
-    }
-
-    function MenuIcon(props) {
-        return (jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "1em", height: "1em", ...props, children: jsx("path", { d: "M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" }) }));
-    }
-
-    function HomeIcon(props) {
-        return (jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "1em", height: "1em", ...props, children: jsx("path", { d: "M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" }) }));
-    }
-
-    function ContentCopyIcon(props) {
-        return (jsx("svg", { viewBox: "0 0 24 24", fill: "currentColor", width: "1em", height: "1em", ...props, children: jsx("path", { d: "M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z" }) }));
-    }
-
-    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" }) }));
-    }
-
-    exports.Alert = Alert;
-    exports.Button = Button;
-    exports.Card = Card;
-    exports.Checkbox = Checkbox;
-    exports.CheckboxGroup = CheckboxGroup;
-    exports.ColorLensIcon = ColorLensIcon;
-    exports.CompressIcon = CompressIcon;
-    exports.ContentCopyIcon = ContentCopyIcon;
-    exports.ContentPasteIcon = ContentPasteIcon;
-    exports.DeleteIcon = DeleteIcon;
-    exports.Dialog = Dialog;
-    exports.DownloadIcon = DownloadIcon;
-    exports.ExpandMoreIcon = ExpandMoreIcon;
-    exports.FileOpenIcon = FileOpenIcon;
-    exports.FolderOpenIcon = FolderOpenIcon;
-    exports.FormLabel = FormLabel;
-    exports.HomeIcon = HomeIcon;
-    exports.LinearProgress = LinearProgress;
-    exports.MenuIcon = MenuIcon;
-    exports.NewReleasesIcon = NewReleasesIcon;
-    exports.PlayArrowIcon = PlayArrowIcon;
-    exports.QueuePlayNextIcon = QueuePlayNextIcon;
-    exports.Radio = Radio;
-    exports.RadioGroup = RadioGroup;
-    exports.SaveIcon = SaveIcon;
-    exports.Select = Select;
-    exports.SelectAllIcon = SelectAllIcon;
-    exports.SettingsIcon = SettingsIcon;
-    exports.StopIcon = StopIcon;
-    exports.SubtitlesIcon = SubtitlesIcon;
-    exports.Switch = Switch;
-    exports.TextField = TextField;
-    exports.UploadFileIcon = UploadFileIcon;
-    exports.VideoFileIcon = VideoFileIcon;
-    exports.WallpaperIcon = WallpaperIcon;
-
-    return exports;
-
-})({});