@ktjs/mui 0.18.1 → 0.18.3

package/dist/index.d.ts

@@ -38,20 +38,20 @@ declare function Button(props: ButtonProps): KTHTMLElement;
 
 interface CheckboxProps {
     value: string;
-    label?: string | KTHTMLElement | HTMLElement;
+    label?: string | KTHTMLElement$1 | HTMLElement;
     checked?: boolean;
     size?: 'small' | 'medium';
-    'kt:change'?: (checked: boolean, value: string) => void;
+    'kt:change'?: ((checked: boolean, value: string) => void) | KTRef<boolean>;
     disabled?: boolean;
     color?: 'primary' | 'secondary' | 'default' | 'success' | 'error' | 'warning';
     indeterminate?: boolean;
 }
-type KTMuiCheckbox = KTHTMLElement & {
+type KTMuiCheckbox = KTHTMLElement$1 & {
     checked: boolean;
     value: string;
     disabled: boolean;
 };
-type KTMuiCheckboxGroup = KTHTMLElement & {
+type KTMuiCheckboxGroup = KTHTMLElement$1 & {
     value: string[];
     disabled: boolean[];
     disableAll: () => void;
@@ -67,7 +67,7 @@ interface CheckboxGroupProps {
     value?: string[];
     size?: 'small' | 'medium';
     options: CheckboxProps[];
-    'kt:change'?: (values: string[]) => void;
+    'kt:change'?: ((values: string[]) => void) | KTRef<string[]>;
     row?: boolean;
 }
 /**
@@ -127,15 +127,16 @@ type KTMuiLinearProgress = KTHTMLElement$1 & {
  */
 declare function LinearProgress(props: LinearProgressProps): KTMuiLinearProgress;
 
-type ChangeHandler<T = string> = (value: T) => void;
+type ChangeHandler<T = string> = (value: T, ...args: any[]) => void;
 
-interface TextFieldProps {
+type InputTypes = 'text' | 'password' | 'email' | 'number' | 'tel' | 'url';
+interface TextFieldProps<T extends InputTypes> {
     class?: string;
     style?: string;
     label?: string;
     placeholder?: string;
     value?: any;
-    type?: 'text' | 'password' | 'email' | 'number' | 'tel' | 'url';
+    type?: T;
     disabled?: boolean;
     readonly?: boolean;
     required?: boolean;
@@ -145,12 +146,12 @@ interface TextFieldProps {
     multiline?: boolean;
     rows?: number;
     size?: 'small' | 'medium';
-    'kt:input'?: ChangeHandler | KTRef<string>;
-    'kt-trim:input'?: ChangeHandler | KTRef<string>;
-    'kt:change'?: ChangeHandler | KTRef<string>;
-    'kt-trim:change'?: ChangeHandler | KTRef<string>;
-    'kt:blur'?: ChangeHandler | KTRef<string>;
-    'kt:focus'?: ChangeHandler | KTRef<string>;
+    'kt:input'?: T extends 'number' ? ChangeHandler<number> | KTRef<number> : ChangeHandler | KTRef<string>;
+    'kt-trim:input'?: T extends 'number' ? ChangeHandler<number> | KTRef<number> : ChangeHandler | KTRef<string>;
+    'kt:change'?: T extends 'number' ? ChangeHandler<number> | KTRef<number> : ChangeHandler | KTRef<string>;
+    'kt-trim:change'?: T extends 'number' ? ChangeHandler<number> | KTRef<number> : ChangeHandler | KTRef<string>;
+    'kt:blur'?: () => void;
+    'kt:focus'?: () => void;
 }
 type KTMuiTextField = KTHTMLElement$1 & {
     value: string;
@@ -166,7 +167,7 @@ type KTMuiTextField = KTHTMLElement$1 & {
 /**
  * TextField component - mimics MUI TextField appearance and behavior
  */
-declare function TextField(props: TextFieldProps): KTMuiTextField;
+declare function TextField<T extends InputTypes>(props: TextFieldProps<T>): KTMuiTextField;
 
 interface RadioProps {
     value: string;

package/dist/index.iife.js

@@ -44,7 +44,7 @@ var __ktjs_mui__ = (function (exports, jsxRuntime, kt_js) {
         return alert;
     }
 
-    const emptyFn$3 = () => { };
+    const emptyFn$2 = () => { };
     const generateHandler = (props, key) => {
         const handler = props[key];
         if (typeof handler === 'function') {
@@ -53,14 +53,14 @@ var __ktjs_mui__ = (function (exports, jsxRuntime, kt_js) {
         else if (handler && typeof handler === 'object' && handler.isKT) {
             return (value) => (handler.value = value);
         }
-        return emptyFn$3;
+        return emptyFn$2;
     };
 
     /**
      * 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$3, } = props;
+        const { children, variant = 'text', color = 'primary', size = 'medium', disabled = false, fullWidth = false, iconOnly = false, startIcon, endIcon, type = 'button', 'on:click': onClick = emptyFn$2, } = props;
         const classes = [
             'mui-button',
             `mui-button-${variant}`,
@@ -102,7 +102,6 @@ var __ktjs_mui__ = (function (exports, jsxRuntime, kt_js) {
         return (jsxRuntime.jsxs("button", { class: classes, style: props.style ? props.style : '', type: type, disabled: disabled, "on:click": handleClick, children: [startIcon && jsxRuntime.jsx("span", { class: "mui-button-start-icon", children: startIcon }), jsxRuntime.jsx("span", { class: "mui-button-label", children: children }), endIcon && jsxRuntime.jsx("span", { class: "mui-button-end-icon", children: endIcon }), jsxRuntime.jsx("span", { class: "mui-button-ripple" })] }));
     }
 
-    const emptyFn$2 = () => { };
     /**
      * Checkbox component - mimics MUI Checkbox appearance and behavior
      */
@@ -129,7 +128,8 @@ var __ktjs_mui__ = (function (exports, jsxRuntime, kt_js) {
             toggleIcon(checked, indeterminate);
             onChange(checked, value);
         };
-        let { checked = false, value = '', label = '', size = 'medium', 'kt:change': onChange = emptyFn$2, disabled = false, color = 'primary', indeterminate = false, } = props;
+        let { checked = false, value = '', label = '', size = 'medium', disabled = false, color = 'primary', indeterminate = false, } = props;
+        const onChange = generateHandler(props, 'kt:change');
         const inputEl = (jsxRuntime.jsx("input", { type: "checkbox", class: "mui-checkbox-input", checked: checked, value: value, disabled: disabled, "on:change": handleChange }));
         // Unchecked icon
         const uncheckedIcon = (jsxRuntime.jsx("span", { class: "mui-checkbox-icon-unchecked", children: jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", children: jsxRuntime.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" }) }) }));
@@ -193,7 +193,7 @@ var __ktjs_mui__ = (function (exports, jsxRuntime, kt_js) {
         const checkboxes = props.options.map((o) => {
             o.size = size;
             o.checked = selectedValues.has(o.value);
-            const originalChange = o['kt:change'];
+            const originalChange = generateHandler(o, 'kt:change');
             if (originalChange) {
                 o['kt:change'] = (checked, value) => {
                     originalChange(checked, value);
@@ -468,12 +468,27 @@ var __ktjs_mui__ = (function (exports, jsxRuntime, kt_js) {
         };
         const handleInput = () => {
             updateContainerClass();
-            onInput(inputEl.value);
-            onInputTrim(inputEl.value.trim());
+            if (type === 'number') {
+                const v = Number(inputEl.value);
+                onInput(v);
+                onInputTrim(v);
+            }
+            else {
+                onInput(inputEl.value);
+                onInputTrim(inputEl.value.trim());
+            }
         };
         const handleChange = () => {
-            onChange(inputEl.value);
-            onChangeTrim(inputEl.value.trim());
+            updateContainerClass();
+            if (type === 'number') {
+                const v = Number(inputEl.value);
+                onChange(v);
+                onChangeTrim(v);
+            }
+            else {
+                onChange(inputEl.value);
+                onChangeTrim(inputEl.value.trim());
+            }
         };
         const handleFocus = () => {
             isFocused = true;

package/dist/index.mjs

@@ -44,7 +44,7 @@ function Alert(props) {
     return alert;
 }
 
-const emptyFn$3 = () => { };
+const emptyFn$2 = () => { };
 const generateHandler = (props, key) => {
     const handler = props[key];
     if (typeof handler === 'function') {
@@ -53,14 +53,14 @@ const generateHandler = (props, key) => {
     else if (handler && typeof handler === 'object' && handler.isKT) {
         return (value) => (handler.value = value);
     }
-    return emptyFn$3;
+    return emptyFn$2;
 };
 
 /**
  * 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$3, } = props;
+    const { children, variant = 'text', color = 'primary', size = 'medium', disabled = false, fullWidth = false, iconOnly = false, startIcon, endIcon, type = 'button', 'on:click': onClick = emptyFn$2, } = props;
     const classes = [
         'mui-button',
         `mui-button-${variant}`,
@@ -102,7 +102,6 @@ function Button(props) {
     return (jsxs("button", { class: classes, style: props.style ? props.style : '', type: type, disabled: disabled, "on:click": handleClick, children: [startIcon && jsx("span", { class: "mui-button-start-icon", children: startIcon }), jsx("span", { class: "mui-button-label", children: children }), endIcon && jsx("span", { class: "mui-button-end-icon", children: endIcon }), jsx("span", { class: "mui-button-ripple" })] }));
 }
 
-const emptyFn$2 = () => { };
 /**
  * Checkbox component - mimics MUI Checkbox appearance and behavior
  */
@@ -129,7 +128,8 @@ function Checkbox(props) {
         toggleIcon(checked, indeterminate);
         onChange(checked, value);
     };
-    let { checked = false, value = '', label = '', size = 'medium', 'kt:change': onChange = emptyFn$2, disabled = false, color = 'primary', indeterminate = false, } = props;
+    let { checked = false, value = '', label = '', size = 'medium', disabled = false, color = 'primary', indeterminate = false, } = props;
+    const onChange = generateHandler(props, 'kt:change');
     const inputEl = (jsx("input", { type: "checkbox", class: "mui-checkbox-input", checked: checked, value: value, disabled: disabled, "on:change": handleChange }));
     // Unchecked icon
     const uncheckedIcon = (jsx("span", { class: "mui-checkbox-icon-unchecked", children: jsx("svg", { viewBox: "0 0 24 24", children: jsx("path", { d: "M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z" }) }) }));
@@ -193,7 +193,7 @@ function CheckboxGroup(props) {
     const checkboxes = props.options.map((o) => {
         o.size = size;
         o.checked = selectedValues.has(o.value);
-        const originalChange = o['kt:change'];
+        const originalChange = generateHandler(o, 'kt:change');
         if (originalChange) {
             o['kt:change'] = (checked, value) => {
                 originalChange(checked, value);
@@ -468,12 +468,27 @@ function TextField(props) {
     };
     const handleInput = () => {
         updateContainerClass();
-        onInput(inputEl.value);
-        onInputTrim(inputEl.value.trim());
+        if (type === 'number') {
+            const v = Number(inputEl.value);
+            onInput(v);
+            onInputTrim(v);
+        }
+        else {
+            onInput(inputEl.value);
+            onInputTrim(inputEl.value.trim());
+        }
     };
     const handleChange = () => {
-        onChange(inputEl.value);
-        onChangeTrim(inputEl.value.trim());
+        updateContainerClass();
+        if (type === 'number') {
+            const v = Number(inputEl.value);
+            onChange(v);
+            onChangeTrim(v);
+        }
+        else {
+            onChange(inputEl.value);
+            onChangeTrim(inputEl.value.trim());
+        }
     };
     const handleFocus = () => {
         isFocused = true;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ktjs/mui",
-  "version": "0.18.1",
+  "version": "0.18.3",
   "description": "Material-UI inspired components for kt.js - pre-styled UI components",
   "type": "module",
   "module": "./dist/index.mjs",