@ktjs/mui 0.18.8 → 0.19.0

package/dist/index.mjs

@@ -1,5 +1,266 @@
-import { jsxs, jsx } from 'kt.js/jsx-runtime';
-import { ref as ref$1, createRedrawable as createRedrawable$1 } from 'kt.js';
+// 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);
+};
+
+// DOM manipulation utilities
+/**
+ * & 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);
+        }
+    };
+
+// Shared utilities and cached native methods for kt.js framework
+// Re-export all utilities
+Object.defineProperty(window, '@ktjs/shared', { value: '0.19.0' });
+
+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);
+function attrIsObject(element, attr) {
+    const classValue = attr.class || attr.className;
+    if (classValue !== undefined) {
+        element.setAttribute('class', classValue);
+    }
+    const style = attr.style;
+    if (style) {
+        if (typeof style === 'string') {
+            element.setAttribute('style', style);
+        }
+        else if (typeof style === 'object') {
+            for (const key in style) {
+                element.style[key] = style[key];
+            }
+        }
+    }
+    for (const key in attr) {
+        if (key === 'class' ||
+            key === 'className' ||
+            key === 'style' ||
+            key === 'children' ||
+            key === 'k-if' ||
+            key === 'ref') {
+            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 {
+            (handlers[key] || defaultHandler)(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: attr must be an object.');
+    }
+}
+
+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);
+    }
+    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);
+    }
+}
+
+const svgTempWrapper = document.createElement('div');
+/**
+ * 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.19.0 (Last Update: 2026.01.31 22:50:55.987)
+ * @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('tagName must be a string.');
+    }
+    // * start creating the element
+    const element = document.createElement(tag);
+    // * Handle content
+    applyAttr(element, attr);
+    applyContent(element, content);
+    if (tag === 'svg') {
+        svgTempWrapper.innerHTML = element.outerHTML;
+        return svgTempWrapper.firstChild;
+    }
+    return element;
+};
+
+const dummyRef = { value: null };
+/**
+ * @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;
+    const redraw = (newProps) => {
+        props = newProps ? { ...props, ...newProps } : props;
+        el = jsx(tag, props);
+        if (ref !== dummyRef) {
+            ref.value = el; // & ref setter automatically replaces old element in DOM
+        }
+        return el;
+    };
+    if ('k-if' in props && !props['k-if']) {
+        el = document.createComment('k-if');
+        ref.value = el; // & ref setter automatically replaces old element in DOM
+        el.redraw = redraw;
+        return el;
+    }
+    // Handle function components
+    if (typeof tag === 'function') {
+        el = tag(props);
+    }
+    else {
+        el = h(tag, props, props.children);
+    }
+    el.redraw ??= redraw;
+    ref.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;
 
 /**s
  * Alert component - mimics MUI Alert appearance and behavior
@@ -44,18 +305,14 @@ function Alert(props) {
     return alert;
 }
 
-const emptyFn = () => { };
-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;
-};
+// Cached native methods for performance optimization
 
+// String manipulation utilities
+/**
+ * Default empty function
+ */
+const $emptyFn = (() => true);
+// Style parsing utilities
 const parseStyle = (style) => {
     if (typeof style === 'string') {
         return style;
@@ -71,12 +328,26 @@ const parseStyle = (style) => {
     }
     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.19.0' });
 
 /**
  * Button component - mimics MUI Button appearance and behavior
  */
 function Button(props) {
-    const { children, variant = 'text', color = 'primary', size = 'medium', disabled = false, fullWidth = false, iconOnly = false, startIcon, endIcon, type = 'button', 'on:click': onClick = emptyFn, } = props;
+    const { 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}`,
@@ -269,7 +540,7 @@ 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 { open = false, 'kt:close': onClose = $emptyFn, title, children, actions, maxWidth = 'sm', fullWidth = false, } = props;
     // Handle ESC key - store handler for cleanup
     const keyDownHandler = (e) => {
         if (e.key === 'Escape') {
@@ -342,54 +613,68 @@ function FormLabel(props) {
     return element;
 }
 
-const emptyPromiseHandler = () => ({});
-if (typeof Promise === 'undefined') {
-    window.Promise = { resolve: emptyPromiseHandler, reject: emptyPromiseHandler };
-}
+// Cached native methods for performance optimization
+
+// Shared utilities and cached native methods for kt.js framework
+// Re-export all utilities
+Object.defineProperty(window, '@ktjs/shared', { value: '0.19.0' });
 
 document.createElement('div');
 
+class KTRef {
+    /**
+     * Indicates that this is a KTRef instance
+     */
+    isKT = true;
+    _value;
+    _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) {
-    let _value = value;
-    let _onChanges = [];
-    return {
-        isKT: true,
-        get value() {
-            return _value;
-        },
-        set value(newValue) {
-            if (newValue === _value) {
-                return;
-            }
-            // replace the old node with the new one in the DOM if both are nodes
-            if (_value instanceof Node && newValue instanceof Node) {
-                if (newValue.contains(_value)) {
-                    _value.remove();
-                }
-                _value.replaceWith(newValue);
-            }
-            const oldValue = _value;
-            _value = newValue;
-            for (let i = 0; i < _onChanges.length; i++) {
-                _onChanges[i](newValue, oldValue);
-            }
-        },
-        addOnChange: (callback) => _onChanges.push(callback),
-        removeOnChange: (callback) => {
-            for (let i = _onChanges.length - 1; i >= 0; i--) {
-                if (_onChanges[i] === callback) {
-                    _onChanges.splice(i, 1);
-                    return true;
-                }
-            }
-            return false;
-        },
-    };
+    return new KTRef(value, []);
 }
 /**
  * A helper to create redrawable elements
@@ -629,7 +914,7 @@ function Radio(props) {
                 return checked;
             },
             set(newChecked) {
-                checked = newChecked === value;
+                checked = newChecked;
                 input.checked = checked;
                 toggleIcon(checked);
             },
@@ -687,7 +972,7 @@ function Select(props) {
     const onChange = generateHandler(props, 'kt:change');
     let isOpen = false;
     let isFocused = false;
-    const selectRef = ref$1();
+    const selectRef = ref();
     // Toggle dropdown
     const toggleMenu = () => {
         if (disabled) {
@@ -701,7 +986,7 @@ function Select(props) {
         if (isOpen) {
             menu.value.style.display = 'block';
             // Trigger reflow to enable animation
-            menu.value.offsetHeight;
+            void menu.value.offsetHeight;
             menu.value.classList.add('mui-select-menu-open');
         }
         else {
@@ -756,7 +1041,7 @@ function Select(props) {
             }
         }
     };
-    const valueDisplay = createRedrawable$1(() => {
+    const valueDisplay = createRedrawable(() => {
         const o = options.find((opt) => opt.value === value);
         let inner;
         if (o === undefined) {
@@ -767,7 +1052,7 @@ function Select(props) {
         }
         return jsx("div", { class: "mui-select-display", children: inner });
     });
-    const menu = createRedrawable$1(() => {
+    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 }))) }));
     });
     // Create container

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ktjs/mui",
-  "version": "0.18.8",
+  "version": "0.19.0",
   "description": "Material-UI inspired components for kt.js - pre-styled UI components",
   "type": "module",
   "module": "./dist/index.mjs",
@@ -35,7 +35,8 @@
     "directory": "packages/mui"
   },
   "dependencies": {
-    "@ktjs/core": "0.18.10"
+    "@ktjs/shared": "0.19.0",
+    "@ktjs/core": "0.19.0"
   },
   "scripts": {
     "build": "rollup -c rollup.config.mjs",