@ktjs/mui 0.18.2 → 0.18.4

package/dist/index.d.ts

@@ -129,13 +129,14 @@ declare function LinearProgress(props: LinearProgressProps): KTMuiLinearProgress
 
 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

@@ -462,18 +462,33 @@ var __ktjs_mui__ = (function (exports, jsxRuntime, kt_js) {
                 error ? 'mui-textfield-error' : '',
                 disabled ? 'mui-textfield-disabled' : '',
                 fullWidth ? 'mui-textfield-fullwidth' : '',
-                label && isFocused && inputEl.value ? 'mui-textfield-has-value' : '',
+                label && inputEl.value ? 'mui-textfield-has-value' : '',
                 label ? '' : 'mui-textfield-no-label',
             ].join(' ');
         };
         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

@@ -462,18 +462,33 @@ function TextField(props) {
             error ? 'mui-textfield-error' : '',
             disabled ? 'mui-textfield-disabled' : '',
             fullWidth ? 'mui-textfield-fullwidth' : '',
-            label && isFocused && inputEl.value ? 'mui-textfield-has-value' : '',
+            label && inputEl.value ? 'mui-textfield-has-value' : '',
             label ? '' : 'mui-textfield-no-label',
         ].join(' ');
     };
     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.2",
+  "version": "0.18.4",
   "description": "Material-UI inspired components for kt.js - pre-styled UI components",
   "type": "module",
   "module": "./dist/index.mjs",