@ktjs/mui 0.20.0 → 0.20.2

package/dist/index.d.ts

@@ -37,8 +37,6 @@ declare class KTRef<T> {
      * Indicates that this is a KTRef instance
      */
     isKT: boolean;
-    private _value;
-    private _onChanges;
     constructor(_value: T, _onChanges: Array<RefChangeHandler<T>>);
     /**
      * If new value and old value are both nodes, the old one will be replaced in the DOM
@@ -1106,6 +1104,8 @@ declare global {
     type Element = HTMLElementTagNameMap[keyof HTMLElementTagNameMap];
 
     interface IntrinsicElements {
+      [k: string]: AttributesMap['div']; // Allow any element with div attributes as fallback
+
       // Document-level & metadata
       html: AttributesMap['html'];
       head: AttributesMap['head'];
@@ -1274,6 +1274,67 @@ declare global {
       tspan: SVGAttributesMap['tspan'];
       use: SVGAttributesMap['use'];
       view: SVGAttributesMap['view'];
+
+      // 'svg:svg': AttributesMap['svg'];
+      // 'svg:a': SVGAttributesMap['a'];
+      // 'svg:animate': SVGAttributesMap['animate'];
+      // 'svg:animateMotion': SVGAttributesMap['animateMotion'];
+      // 'svg:animateTransform': SVGAttributesMap['animateTransform'];
+      // 'svg:circle': SVGAttributesMap['circle'];
+      // 'svg:clipPath': SVGAttributesMap['clipPath'];
+      // 'svg:defs': SVGAttributesMap['defs'];
+      // 'svg:desc': SVGAttributesMap['desc'];
+      // 'svg:ellipse': SVGAttributesMap['ellipse'];
+      // 'svg:feBlend': SVGAttributesMap['feBlend'];
+      // 'svg:feColorMatrix': SVGAttributesMap['feColorMatrix'];
+      // 'svg:feComponentTransfer': SVGAttributesMap['feComponentTransfer'];
+      // 'svg:feComposite': SVGAttributesMap['feComposite'];
+      // 'svg:feConvolveMatrix': SVGAttributesMap['feConvolveMatrix'];
+      // 'svg:feDiffuseLighting': SVGAttributesMap['feDiffuseLighting'];
+      // 'svg:feDisplacementMap': SVGAttributesMap['feDisplacementMap'];
+      // 'svg:feDistantLight': SVGAttributesMap['feDistantLight'];
+      // 'svg:feDropShadow': SVGAttributesMap['feDropShadow'];
+      // 'svg:feFlood': SVGAttributesMap['feFlood'];
+      // 'svg:feFuncA': SVGAttributesMap['feFuncA'];
+      // 'svg:feFuncB': SVGAttributesMap['feFuncB'];
+      // 'svg:feFuncG': SVGAttributesMap['feFuncG'];
+      // 'svg:feFuncR': SVGAttributesMap['feFuncR'];
+      // 'svg:feGaussianBlur': SVGAttributesMap['feGaussianBlur'];
+      // 'svg:feImage': SVGAttributesMap['feImage'];
+      // 'svg:feMerge': SVGAttributesMap['feMerge'];
+      // 'svg:feMergeNode': SVGAttributesMap['feMergeNode'];
+      // 'svg:feMorphology': SVGAttributesMap['feMorphology'];
+      // 'svg:feOffset': SVGAttributesMap['feOffset'];
+      // 'svg:fePointLight': SVGAttributesMap['fePointLight'];
+      // 'svg:feSpecularLighting': SVGAttributesMap['feSpecularLighting'];
+      // 'svg:feSpotLight': SVGAttributesMap['feSpotLight'];
+      // 'svg:feTile': SVGAttributesMap['feTile'];
+      // 'svg:feTurbulence': SVGAttributesMap['feTurbulence'];
+      // 'svg:filter': SVGAttributesMap['filter'];
+      // 'svg:foreignObject': SVGAttributesMap['foreignObject'];
+      // 'svg:g': SVGAttributesMap['g'];
+      // 'svg:image': SVGAttributesMap['image'];
+      // 'svg:line': SVGAttributesMap['line'];
+      // 'svg:linearGradient': SVGAttributesMap['linearGradient'];
+      // 'svg:marker': SVGAttributesMap['marker'];
+      // 'svg:mask': SVGAttributesMap['mask'];
+      // 'svg:metadata': SVGAttributesMap['metadata'];
+      // 'svg:mpath': SVGAttributesMap['mpath'];
+      // 'svg:path': SVGAttributesMap['path'];
+      // 'svg:pattern': SVGAttributesMap['pattern'];
+      // 'svg:polygon': SVGAttributesMap['polygon'];
+      // 'svg:polyline': SVGAttributesMap['polyline'];
+      // 'svg:radialGradient': SVGAttributesMap['radialGradient'];
+      // 'svg:rect': SVGAttributesMap['rect'];
+      // 'svg:set': SVGAttributesMap['set'];
+      // 'svg:stop': SVGAttributesMap['stop'];
+      // 'svg:switch': SVGAttributesMap['switch'];
+      // 'svg:symbol': SVGAttributesMap['symbol'];
+      // 'svg:text': SVGAttributesMap['text'];
+      // 'svg:textPath': SVGAttributesMap['textPath'];
+      // 'svg:tspan': SVGAttributesMap['tspan'];
+      // 'svg:use': SVGAttributesMap['use'];
+      // 'svg:view': SVGAttributesMap['view'];
     }
 
     interface IntrinsicAttributes {
@@ -1389,7 +1450,7 @@ type ChangeHandler<T = string> = (value: T, ...args: any[]) => void;
 
 type InputTypes = 'text' | 'password' | 'email' | 'number' | 'tel' | 'url';
 
-interface KTMuiTextFieldProps<T extends InputTypes> {
+interface KTMuiTextFieldProps<T extends InputTypes = 'text'> {
   class?: string;
   style?: string | Partial<CSSStyleDeclaration>;
   label?: string;

package/dist/index.iife.js

@@ -194,7 +194,14 @@ var __ktjs_mui__ = (function (exports) {
         }
     }
 
-    const svgTempWrapper = document.createElement('div');
+    document.createElement('div');
+    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.
@@ -205,7 +212,7 @@ var __ktjs_mui__ = (function (exports) {
      * ## About
      * @package @ktjs/core
      * @author Kasukabe Tsumugi <futami16237@gmail.com>
-     * @version 0.20.0 (Last Update: 2026.02.01 00:47:09.995)
+     * @version 0.20.3 (Last Update: 2026.02.01 18:38:02.198)
      * @license MIT
      * @link https://github.com/baendlorel/kt.js
      * @link https://baendlorel.github.io/ Welcome to my site!
@@ -216,15 +223,32 @@ var __ktjs_mui__ = (function (exports) {
         if (typeof tag !== 'string') {
             $throw('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 = document.createElement(tag);
+        const element = creator(tag);
         // * Handle content
         applyAttr(element, attr);
         applyContent(element, content);
-        if (tag === 'svg') {
-            svgTempWrapper.innerHTML = element.outerHTML;
-            return svgTempWrapper.firstChild;
-        }
+        // 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>;
+        // }
         return element;
     };
 
@@ -233,7 +257,7 @@ var __ktjs_mui__ = (function (exports) {
      * @param tag html tag or function component
      * @param props properties/attributes
      */
-    function jsx(tag, props = {}) {
+    function jsx(tag, props) {
         const ref = props.ref?.isKT ? props.ref : dummyRef;
         let el;
         if ('k-if' in props && !props['k-if']) {
@@ -324,7 +348,7 @@ var __ktjs_mui__ = (function (exports) {
             }
         };
         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 }), onClose && (jsx("button", { 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" }) }) }))] }));
+        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;
     }
 
@@ -620,7 +644,13 @@ var __ktjs_mui__ = (function (exports) {
          * Indicates that this is a KTRef instance
          */
         isKT = true;
+        /**
+         * @internal
+         */
         _value;
+        /**
+         * @internal
+         */
         _onChanges;
         constructor(_value, _onChanges) {
             this._value = _value;
@@ -784,13 +814,23 @@ var __ktjs_mui__ = (function (exports) {
             updateContainerClass();
             onBlur(inputEl.value);
         };
+        const handleWrapperMouseDown = (e) => {
+            if (disabled) {
+                return;
+            }
+            const target = e.target;
+            if (!target || target === inputEl) {
+                return;
+            }
+            setTimeout(() => inputEl.focus(), 0);
+        };
         const getPlaceholder = () => (label && !isFocused && !value ? '' : placeholder);
         let isFocused = 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", 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 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);

package/dist/index.mjs

@@ -191,7 +191,14 @@ function applyContent(element, content) {
     }
 }
 
-const svgTempWrapper = document.createElement('div');
+document.createElement('div');
+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.
@@ -202,7 +209,7 @@ const svgTempWrapper = document.createElement('div');
  * ## About
  * @package @ktjs/core
  * @author Kasukabe Tsumugi <futami16237@gmail.com>
- * @version 0.20.0 (Last Update: 2026.02.01 00:47:09.995)
+ * @version 0.20.3 (Last Update: 2026.02.01 18:38:02.198)
  * @license MIT
  * @link https://github.com/baendlorel/kt.js
  * @link https://baendlorel.github.io/ Welcome to my site!
@@ -213,15 +220,32 @@ const h = (tag, attr, content) => {
     if (typeof tag !== 'string') {
         $throw('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 = document.createElement(tag);
+    const element = creator(tag);
     // * Handle content
     applyAttr(element, attr);
     applyContent(element, content);
-    if (tag === 'svg') {
-        svgTempWrapper.innerHTML = element.outerHTML;
-        return svgTempWrapper.firstChild;
-    }
+    // 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>;
+    // }
     return element;
 };
 
@@ -230,7 +254,7 @@ const dummyRef = { value: null };
  * @param tag html tag or function component
  * @param props properties/attributes
  */
-function jsx(tag, props = {}) {
+function jsx(tag, props) {
     const ref = props.ref?.isKT ? props.ref : dummyRef;
     let el;
     if ('k-if' in props && !props['k-if']) {
@@ -321,7 +345,7 @@ function Alert(props) {
         }
     };
     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 }), onClose && (jsx("button", { 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" }) }) }))] }));
+    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;
 }
 
@@ -617,7 +641,13 @@ class KTRef {
      * Indicates that this is a KTRef instance
      */
     isKT = true;
+    /**
+     * @internal
+     */
     _value;
+    /**
+     * @internal
+     */
     _onChanges;
     constructor(_value, _onChanges) {
         this._value = _value;
@@ -781,13 +811,23 @@ function TextField(props) {
         updateContainerClass();
         onBlur(inputEl.value);
     };
+    const handleWrapperMouseDown = (e) => {
+        if (disabled) {
+            return;
+        }
+        const target = e.target;
+        if (!target || target === inputEl) {
+            return;
+        }
+        setTimeout(() => inputEl.focus(), 0);
+    };
     const getPlaceholder = () => (label && !isFocused && !value ? '' : placeholder);
     let isFocused = 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", 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 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);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ktjs/mui",
-  "version": "0.20.0",
+  "version": "0.20.2",
   "description": "Material-UI inspired components for kt.js - pre-styled UI components",
   "type": "module",
   "module": "./dist/index.mjs",
@@ -35,7 +35,7 @@
     "directory": "packages/mui"
   },
   "dependencies": {
-    "@ktjs/core": "0.20.0",
+    "@ktjs/core": "0.20.3",
     "@ktjs/shared": "0.20.0"
   },
   "scripts": {