@ktjs/mui 0.18.1 → 0.18.2

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,7 +127,7 @@ 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 {
     class?: 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);

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);

package/package.json

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