@ktjs/mui 0.18.4 → 0.18.8

package/dist/index.d.ts

@@ -1,10 +1,9 @@
-import { KTHTMLElement, KTAttribute } from 'kt.js';
+import { KTHTMLElement, KTRef as KTRef$1, KTAttribute } from 'kt.js';
 import { KTHTMLElement as KTHTMLElement$1, KTRef } from '@ktjs/core';
 
 interface AlertProps {
     class?: string;
-    style?: string;
-    sx?: Record<string, any>;
+    style?: string | Partial<CSSStyleDeclaration>;
     children: string | HTMLElement | KTHTMLElement | Array<string | HTMLElement | KTHTMLElement>;
     severity?: 'error' | 'warning' | 'info' | 'success';
     variant?: 'standard' | 'filled' | 'outlined';
@@ -18,7 +17,7 @@ declare function Alert(props: AlertProps): KTHTMLElement;
 
 interface ButtonProps {
     class?: string;
-    style?: string;
+    style?: string | Partial<CSSStyleDeclaration>;
     children: string | HTMLElement | KTHTMLElement;
     variant?: 'contained' | 'outlined' | 'text';
     color?: 'primary' | 'secondary' | 'error' | 'warning' | 'info' | 'success';
@@ -36,46 +35,50 @@ interface ButtonProps {
  */
 declare function Button(props: ButtonProps): KTHTMLElement;
 
-interface CheckboxProps {
-    value: string;
-    label?: string | KTHTMLElement$1 | HTMLElement;
-    checked?: boolean;
-    size?: 'small' | 'medium';
-    'kt:change'?: ((checked: boolean, value: string) => void) | KTRef<boolean>;
-    disabled?: boolean;
-    color?: 'primary' | 'secondary' | 'default' | 'success' | 'error' | 'warning';
-    indeterminate?: boolean;
+interface KTMuiCheckboxProps {
+  value: string;
+  label?: string | KTHTMLElement$1 | HTMLElement;
+  checked?: boolean;
+  size?: 'small' | 'medium';
+  'kt:change'?: ((checked: boolean, value: string) => void) | KTRef<boolean>;
+  disabled?: boolean;
+  color?: 'primary' | 'secondary' | 'default' | 'success' | 'error' | 'warning';
+  indeterminate?: boolean;
+}
+
+interface KTMuiCheckboxGroupProps {
+  class?: string;
+  style?: string;
+  value?: string[];
+  size?: 'small' | 'medium';
+  options: KTMuiCheckboxProps[];
+  'kt:change'?: ((values: string[]) => void) | KTRef<string[]>;
+  row?: boolean;
 }
+
 type KTMuiCheckbox = KTHTMLElement$1 & {
-    checked: boolean;
-    value: string;
-    disabled: boolean;
+  checked: boolean;
+  value: string;
+  disabled: boolean;
 };
+
 type KTMuiCheckboxGroup = KTHTMLElement$1 & {
-    value: string[];
-    disabled: boolean[];
-    disableAll: () => void;
-    enableAll: () => void;
+  value: string[];
+  disabled: boolean[];
+  disableAll: () => void;
+  enableAll: () => void;
 };
+
 /**
  * Checkbox component - mimics MUI Checkbox appearance and behavior
  */
-declare function Checkbox(props: CheckboxProps): KTMuiCheckbox;
-interface CheckboxGroupProps {
-    class?: string;
-    style?: string;
-    value?: string[];
-    size?: 'small' | 'medium';
-    options: CheckboxProps[];
-    'kt:change'?: ((values: string[]) => void) | KTRef<string[]>;
-    row?: boolean;
-}
+declare function Checkbox(props: KTMuiCheckboxProps): KTMuiCheckbox;
 /**
  * CheckboxGroup component - groups multiple checkboxes together
  */
-declare function CheckboxGroup(props: CheckboxGroupProps): KTMuiCheckboxGroup;
+declare function CheckboxGroup(props: KTMuiCheckboxGroupProps): KTMuiCheckboxGroup;
 
-interface DialogProps {
+interface KTMuiDialogProps {
     open?: boolean;
     'kt:close'?: () => void;
     title?: string;
@@ -94,7 +97,7 @@ type KTMuiDialog = KTHTMLElement$1 & {
  * Dialog component - mimics MUI Dialog appearance and behavior
  * Only handles open/close state, title and content are passed as props
  */
-declare function Dialog(props: DialogProps): KTMuiDialog;
+declare function Dialog(props: KTMuiDialogProps): KTMuiDialog;
 
 interface FormLabelProps {
     children: string | HTMLElement | KTHTMLElement;
@@ -113,13 +116,15 @@ declare function FormLabel(props: FormLabelProps): KTHTMLElement;
 
 interface LinearProgressProps {
     class?: string;
-    style?: string;
-    sx?: Record<string, any>;
+    style?: string | Partial<CSSStyleDeclaration>;
     variant?: 'determinate' | 'indeterminate';
     progress?: number;
     color?: 'primary' | 'secondary' | 'error' | 'warning' | 'info' | 'success';
 }
 type KTMuiLinearProgress = KTHTMLElement$1 & {
+    /**
+     * Reactive property to get or set the current progress value (0-100)
+     */
     progress: number;
 };
 /**
@@ -130,87 +135,146 @@ declare function LinearProgress(props: LinearProgressProps): KTMuiLinearProgress
 type ChangeHandler<T = string> = (value: T, ...args: any[]) => void;
 
 type InputTypes = 'text' | 'password' | 'email' | 'number' | 'tel' | 'url';
-interface TextFieldProps<T extends InputTypes> {
-    class?: string;
-    style?: string;
-    label?: string;
-    placeholder?: string;
-    value?: any;
-    type?: T;
-    disabled?: boolean;
-    readonly?: boolean;
-    required?: boolean;
-    error?: boolean;
-    helperText?: string;
-    fullWidth?: boolean;
-    multiline?: boolean;
-    rows?: number;
-    size?: 'small' | 'medium';
-    '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;
+
+interface KTMuiTextFieldProps<T extends InputTypes> {
+  class?: string;
+  style?: string | Partial<CSSStyleDeclaration>;
+  label?: string;
+  placeholder?: string;
+  value?: any;
+  type?: T;
+  disabled?: boolean;
+  readonly?: boolean;
+  required?: boolean;
+  error?: boolean;
+  helperText?: string;
+  fullWidth?: boolean;
+  multiline?: boolean;
+  rows?: number;
+  size?: 'small' | 'medium';
+  'kt:input'?: T extends 'number' ? ChangeHandler<number> | KTRef$1<number> : ChangeHandler | KTRef$1<string>;
+  'kt-trim:input'?: T extends 'number' ? ChangeHandler<number> | KTRef$1<number> : ChangeHandler | KTRef$1<string>;
+  'kt:change'?: T extends 'number' ? ChangeHandler<number> | KTRef$1<number> : ChangeHandler | KTRef$1<string>;
+  'kt-trim:change'?: T extends 'number' ? ChangeHandler<number> | KTRef$1<number> : ChangeHandler | KTRef$1<string>;
+  'kt:blur'?: () => void;
+  'kt:focus'?: () => void;
 }
-type KTMuiTextField = KTHTMLElement$1 & {
-    value: string;
-    label: string;
-    placeholder: string;
-    type: string;
-    disabled: boolean;
-    readonly: boolean;
-    required: boolean;
-    error: boolean;
-    helperText: string;
+
+type KTMuiTextField = KTHTMLElement & {
+  /**
+   * Reactive `value` of the input field
+   */
+  value: string;
+
+  /**
+   * Reactive `label` of the input field
+   */
+  label: string;
+
+  /**
+   * Reactive `placeholder` of the input field
+   */
+  placeholder: string;
+
+  /**
+   * Reactive `type` of the input field
+   */
+  type: string;
+
+  /**
+   * Reactive `disabled` state of the input field
+   */
+  disabled: boolean;
+
+  /**
+   * Reactive `readonly` state of the input field
+   */
+  readonly: boolean;
+
+  /**
+   * `required` state of the input field
+   * @readonly
+   */
+  readonly required: boolean;
+
+  /**
+   * Reactive `error` state of the input field
+   */
+  error: boolean;
+
+  /**
+   * Reactive `helperText` of the input field
+   */
+  helperText: string;
 };
+
 /**
  * TextField component - mimics MUI TextField appearance and behavior
  */
-declare function TextField<T extends InputTypes>(props: TextFieldProps<T>): KTMuiTextField;
+declare function TextField<T extends InputTypes>(props: KTMuiTextFieldProps<T>): KTMuiTextField;
+
+interface KTMuiRadioProps {
+  class?: string;
+  style?: string | Partial<CSSStyleDeclaration>;
+  value: string;
+  label: string | KTHTMLElement$1 | HTMLElement;
+  checked?: boolean;
+  size?: 'small' | 'medium';
+  'kt:change'?: (checked: boolean, value: string) => void;
+  disabled?: boolean;
+  color?: 'primary' | 'secondary' | 'default';
+}
 
-interface RadioProps {
-    value: string;
-    text: string | KTHTMLElement | HTMLElement;
-    checked?: boolean;
-    size?: 'small' | 'medium';
-    'kt:change'?: (checked: boolean, value: string) => void;
-    disabled?: boolean;
-    color?: 'primary' | 'secondary' | 'default';
+interface KTMuiRadioGroupProps {
+  class?: string;
+  style?: string | Partial<CSSStyleDeclaration>;
+  value?: string;
+  name?: string;
+  size?: 'small' | 'medium';
+  options: KTMuiRadioProps[];
+  'kt:change'?: ((value: string) => void) | KTRef<string>;
+  'kt:click'?: (checked: boolean) => void;
+  row?: boolean;
 }
-type RadioComponent = KTHTMLElement & {
-    redrawIcon: (newValue: string) => void;
+
+type KTMuiRadio = KTHTMLElement$1 & {
+  /**
+   * The value of the radio button
+   * @readonly
+   */
+  readonly value: string;
+
+  /**
+   * Reactive checked state of the radio button
+   */
+  checked: boolean;
+};
+type KTMuiRadioGroup = KTHTMLElement$1 & {
+  /**
+   * Reactive checked state of the radio button
+   */
+  value: string;
 };
+
 /**
  * Radio component - mimics MUI Radio appearance and behavior
  */
-declare function Radio(props: RadioProps): RadioComponent;
-interface RadioGroupProps {
-    class?: string;
-    style?: string;
-    value?: string;
-    name?: string;
-    size?: 'small' | 'medium';
-    options: RadioProps[];
-    'kt:change'?: (value: string) => void;
-    'kt:click'?: (checked: boolean) => void;
-    row?: boolean;
-}
+declare function Radio(props: KTMuiRadioProps): KTMuiRadio;
 /**
  * RadioGroup component - groups multiple radios together
  */
-declare function RadioGroup(props: RadioGroupProps): JSX.Element;
+declare function RadioGroup(props: KTMuiRadioGroupProps): KTMuiRadioGroup;
 
-interface SelectOption {
+interface KTMuiSelectOption {
     value: string;
     label: string;
 }
-interface SelectProps {
+interface KTMuiSelectProps {
     class?: string;
-    style?: string;
+    style?: string | Partial<CSSStyleDeclaration>;
     size?: 'small' | 'medium';
     value?: string;
-    options: SelectOption[];
+    options: KTMuiSelectOption[];
     label?: string;
     placeholder?: string;
     'kt:change'?: (value: string) => void;
@@ -220,7 +284,7 @@ interface SelectProps {
 /**
  * Select component - mimics MUI Select appearance and behavior
  */
-declare function Select(props: SelectProps): JSX.Element;
+declare function Select(props: KTMuiSelectProps): JSX.Element;
 
 declare function DownloadIcon(props: KTAttribute): JSX.Element;
 
@@ -267,4 +331,4 @@ declare function ContentCopyIcon(props: KTAttribute): JSX.Element;
 declare function SelectAllIcon(props: KTAttribute): JSX.Element;
 
 export { Alert, Button, Checkbox, CheckboxGroup, ColorLensIcon, CompressIcon, ContentCopyIcon, ContentPasteIcon, DeleteIcon, Dialog, DownloadIcon, ExpandMoreIcon, FileOpenIcon as FileOpen, FileOpenIcon, FolderOpenIcon, FormLabel, HomeIcon, LinearProgress, MenuIcon, NewReleasesIcon, PlayArrowIcon, QueuePlayNextIcon, Radio, RadioGroup, SaveIcon, Select, SelectAllIcon, SettingsIcon, StopIcon, SubtitlesIcon, TextField, UploadFileIcon, VideoFileIcon, WallpaperIcon };
-export type { KTMuiDialog, KTMuiLinearProgress, KTMuiTextField };
+export type { KTMuiDialog, KTMuiLinearProgress, KTMuiRadio, KTMuiRadioGroup, KTMuiRadioProps, KTMuiSelectProps, KTMuiTextField, KTMuiTextFieldProps };

package/dist/index.iife.js

@@ -5,12 +5,12 @@ var __ktjs_mui__ = (function (exports, jsxRuntime, kt_js) {
      * Alert component - mimics MUI Alert appearance and behavior
      */
     function Alert(props) {
-        const { children, severity = 'info', variant = 'standard', icon, 'kt:close': onClose, sx } = props;
+        const { children, style = '', severity = 'info', variant = 'standard', icon, 'kt:close': onClose } = props;
         const classes = `mui-alert mui-alert-${severity} mui-alert-${variant} ${props.class ? props.class : ''}`;
         // Convert sx object to style string
-        let styleString = props.style || '';
-        if (sx) {
-            const sxStyles = Object.entries(sx)
+        let styleString = typeof style === 'string' ? style : '';
+        if (style && typeof style === 'object') {
+            const sxStyles = Object.entries(style)
                 .map(([key, value]) => {
                 // Convert camelCase to kebab-case
                 const cssKey = key.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
@@ -44,7 +44,7 @@ var __ktjs_mui__ = (function (exports, jsxRuntime, kt_js) {
         return alert;
     }
 
-    const emptyFn$2 = () => { };
+    const emptyFn = () => { };
     const generateHandler = (props, key) => {
         const handler = props[key];
         if (typeof handler === 'function') {
@@ -53,14 +53,30 @@ var __ktjs_mui__ = (function (exports, jsxRuntime, kt_js) {
         else if (handler && typeof handler === 'object' && handler.isKT) {
             return (value) => (handler.value = value);
         }
-        return emptyFn$2;
+        return emptyFn;
+    };
+
+    const parseStyle = (style) => {
+        if (typeof style === 'string') {
+            return style;
+        }
+        if (style && typeof style === 'object') {
+            return Object.entries(style)
+                .map(([key, value]) => {
+                // Convert camelCase to kebab-case
+                const cssKey = key.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
+                return `${cssKey}: ${value}`;
+            })
+                .join('; ');
+        }
+        return '';
     };
 
     /**
      * 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$2, } = 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}`,
@@ -99,7 +115,7 @@ var __ktjs_mui__ = (function (exports, jsxRuntime, kt_js) {
             }
             onClick(e);
         };
-        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" })] }));
+        return (jsxRuntime.jsxs("button", { class: classes, style: parseStyle(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" })] }));
     }
 
     /**
@@ -248,13 +264,12 @@ var __ktjs_mui__ = (function (exports, jsxRuntime, kt_js) {
         return container;
     }
 
-    const noop = () => { };
     /**
      * Dialog component - mimics MUI Dialog appearance and behavior
      * Only handles open/close state, title and content are passed as props
      */
     function Dialog(props) {
-        let { open = false, 'kt:close': onClose = noop, 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') {
@@ -406,25 +421,14 @@ var __ktjs_mui__ = (function (exports, jsxRuntime, kt_js) {
      * LinearProgress component - mimics MUI LinearProgress appearance and behavior
      */
     function LinearProgress(props) {
-        let { variant = 'indeterminate', progress: value = 0, color = 'primary', sx } = props;
+        let { variant = 'indeterminate', progress: value = 0, color = 'primary' } = props;
         const classes = [
             'mui-linear-progress',
             `mui-linear-progress-${color}`,
             `mui-linear-progress-${variant}`,
             props.class ? props.class : '',
         ].join(' ');
-        // Convert sx object to style string
-        let styleString = props.style || '';
-        if (sx) {
-            const sxStyles = Object.entries(sx)
-                .map(([key, value]) => {
-                // Convert camelCase to kebab-case
-                const cssKey = key.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
-                return `${cssKey}: ${value}`;
-            })
-                .join('; ');
-            styleString = styleString ? `${styleString}; ${sxStyles}` : sxStyles;
-        }
+        const styleString = parseStyle(props.style);
         // Calculate progress percentage
         let progressValue = Math.min(Math.max(value, 0), 100);
         const barRef = ref();
@@ -507,7 +511,7 @@ var __ktjs_mui__ = (function (exports, jsxRuntime, kt_js) {
             : (jsxRuntime.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 = jsxRuntime.jsx("p", { class: "mui-textfield-helper-text", children: helperText });
         const wrapperRef = createRedrawable(() => (jsxRuntime.jsxs("div", { class: "mui-textfield-wrapper", children: [jsxRuntime.jsxs("label", { "k-if": label, class: "mui-textfield-label", children: [label, required && jsxRuntime.jsx("span", { class: "mui-textfield-required", children: "*" })] }), jsxRuntime.jsx("div", { class: "mui-textfield-input-wrapper", children: inputEl }), jsxRuntime.jsx("fieldset", { class: "mui-textfield-fieldset", children: jsxRuntime.jsx("legend", { "k-if": label, class: "mui-textfield-legend", children: jsxRuntime.jsxs("span", { children: [label, required && '*'] }) }) })] })));
-        const container = (jsxRuntime.jsxs("div", { class: 'mui-textfield-root ' + (props.class ? props.class : ''), style: props.style ? props.style : '', children: [wrapperRef, helperTextEl] }));
+        const container = (jsxRuntime.jsxs("div", { class: 'mui-textfield-root ' + (props.class ? props.class : ''), style: parseStyle(props.style), children: [wrapperRef, helperTextEl] }));
         // Initialize classes
         setTimeout(() => updateContainerClass(), 0);
         Object.defineProperties(container, {
@@ -589,11 +593,11 @@ var __ktjs_mui__ = (function (exports, jsxRuntime, kt_js) {
         return container;
     }
 
-    const emptyFn$1 = () => { };
     /**
      * Radio component - mimics MUI Radio appearance and behavior
      */
     function Radio(props) {
+        const onChange = generateHandler(props, 'kt:change');
         const toggleIcon = (checked) => {
             uncheckedIcon.style.display = checked ? 'none' : '';
             checkedIcon.style.display = checked ? '' : 'none';
@@ -603,36 +607,47 @@ var __ktjs_mui__ = (function (exports, jsxRuntime, kt_js) {
             if (disabled) {
                 return;
             }
-            checked = inputRef.value.checked;
+            checked = input.checked;
             toggleIcon(checked);
             onChange(checked, value);
         };
-        const { checked: initChecked = false, value = '', text = '', size = 'small', 'kt:change': onChange = emptyFn$1, disabled: initDisabled = false, color = 'primary', } = props;
-        const inputRef = kt_js.ref();
-        let checked = initChecked;
-        let disabled = initDisabled;
+        let { checked = false, value = '', label: text = '', size = 'small', disabled = false, color = 'primary' } = props;
+        const input = (jsxRuntime.jsx("input", { type: "radio", class: "mui-radio-input", checked: checked, value: value, disabled: disabled, "on:change": handleChange }));
         const uncheckedIcon = (jsxRuntime.jsx("span", { class: "mui-radio-icon-unchecked", children: jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", children: jsxRuntime.jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" }) }) }));
         const checkedIcon = (jsxRuntime.jsx("span", { class: "mui-radio-icon-checked", children: jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", children: jsxRuntime.jsx("path", { d: "M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" }) }) }));
         // initialize icon state
         toggleIcon(checked);
-        const container = (jsxRuntime.jsxs("label", { class: `mui-radio-wrapper mui-radio-size-${size} ${disabled ? 'mui-radio-disabled' : ''} mui-radio-color-${color}`, children: [jsxRuntime.jsx("input", { ref: inputRef, type: "radio", class: "mui-radio-input", checked: checked, value: value, disabled: disabled, "on:change": handleChange }), jsxRuntime.jsxs("span", { class: "mui-radio-icon", children: [uncheckedIcon, checkedIcon] }), jsxRuntime.jsx("span", { class: "mui-radio-label", children: text })] }));
-        container.redrawIcon = (newValue) => {
-            checked = newValue === value;
-            inputRef.value.checked = checked;
-            toggleIcon(checked);
-        };
+        const container = (jsxRuntime.jsxs("label", { class: `mui-radio-wrapper ${props.class ?? ''} mui-radio-size-${size} ${disabled ? 'mui-radio-disabled' : ''} mui-radio-color-${color}`, style: parseStyle(props.style), children: [input, jsxRuntime.jsxs("span", { class: "mui-radio-icon", children: [uncheckedIcon, checkedIcon] }), jsxRuntime.jsx("span", { class: "mui-radio-label", children: text })] }));
+        Object.defineProperties(container, {
+            value: {
+                get() {
+                    return value;
+                },
+            },
+            checked: {
+                get() {
+                    return checked;
+                },
+                set(newChecked) {
+                    checked = newChecked === value;
+                    input.checked = checked;
+                    toggleIcon(checked);
+                },
+            },
+        });
         return container;
     }
     /**
      * RadioGroup component - groups multiple radios together
      */
     function RadioGroup(props) {
-        const { value = '', size = 'small', 'kt:change': onChange = emptyFn$1, row = false } = props;
+        let { value = '', size = 'small', row = false } = props;
+        const onChange = generateHandler(props, 'kt:change');
         const changeHandler = (checked, value) => {
             if (checked) {
                 onChange(value);
             }
-            radios.forEach((radio) => radio.redrawIcon(value));
+            radios.forEach((radio) => (radio.checked = radio.value === value));
         };
         const radios = props.options.map((o) => {
             o.size = size;
@@ -649,15 +664,27 @@ var __ktjs_mui__ = (function (exports, jsxRuntime, kt_js) {
             }
             return Radio(o);
         });
-        return (jsxRuntime.jsx("div", { class: `mui-radio-group ${row ? 'mui-radio-group-row' : ''} ${props.class ? props.class : ''}`, style: props.style ? props.style : '', role: "radiogroup", children: radios }));
+        const container = (jsxRuntime.jsx("div", { class: `mui-radio-group ${row ? 'mui-radio-group-row' : ''} ${props.class ?? ''}`, style: parseStyle(props.style), role: "radiogroup", children: radios }));
+        Object.defineProperties(container, {
+            value: {
+                get() {
+                    return value;
+                },
+                set(newValue) {
+                    value = newValue;
+                    radios.forEach((radio) => (radio.checked = radio.value === value));
+                },
+            },
+        });
+        return container;
     }
 
-    const emptyFn = () => { };
     /**
      * Select component - mimics MUI Select appearance and behavior
      */
     function Select(props) {
-        let { value = '', options = [], label = '', placeholder = '', size = 'medium', 'kt:change': onChange = emptyFn, fullWidth = false, disabled = false, } = props;
+        let { value = '', options = [], label = '', placeholder = '', size = 'medium', fullWidth = false, disabled = false, } = props;
+        const onChange = generateHandler(props, 'kt:change');
         let isOpen = false;
         let isFocused = false;
         const selectRef = kt_js.ref();
@@ -744,7 +771,7 @@ var __ktjs_mui__ = (function (exports, jsxRuntime, kt_js) {
             return (jsxRuntime.jsx("div", { class: "mui-select-menu", style: { display: 'none' }, children: options.map((option) => (jsxRuntime.jsx("div", { class: `mui-select-option ${option.value === value ? 'selected' : ''}`, "on:click": () => handleOptionClick(option.value), children: option.label }))) }));
         });
         // Create container
-        const container = (jsxRuntime.jsxs("div", { ref: selectRef, class: `mui-select-wrapper mui-select-size-${size} ${props.class ? props.class : ''} ${fullWidth ? 'mui-select-fullWidth' : ''} ${disabled ? 'mui-select-disabled' : ''}`, style: props.style ? props.style : '', children: [label && jsxRuntime.jsx("label", { class: `mui-select-label ${value || isFocused ? 'focused' : ''}`, children: label }), jsxRuntime.jsxs("div", { class: "mui-select-control mui-select-outlined", "on:click": toggleMenu, "on:focus": handleFocus, "on:blur": handleBlur, tabIndex: disabled ? -1 : 0, children: [valueDisplay, jsxRuntime.jsx("input", { type: "hidden", value: value }), jsxRuntime.jsx("fieldset", { class: "mui-select-fieldset", children: jsxRuntime.jsx("legend", { children: jsxRuntime.jsx("span", { children: label }) }) }), jsxRuntime.jsx("svg", { class: "mui-select-icon", focusable: "false", "aria-hidden": "true", viewBox: "0 0 24 24", width: "24", height: "24", children: jsxRuntime.jsx("path", { d: "M7 10l5 5 5-5Z", fill: "currentColor" }) })] }), menu] }));
+        const container = (jsxRuntime.jsxs("div", { ref: selectRef, class: `mui-select-wrapper mui-select-size-${size} ${props.class ?? ''} ${fullWidth ? 'mui-select-fullWidth' : ''} ${disabled ? 'mui-select-disabled' : ''}`, style: parseStyle(props.style), children: [label && jsxRuntime.jsx("label", { class: `mui-select-label ${value || isFocused ? 'focused' : ''}`, children: label }), jsxRuntime.jsxs("div", { class: "mui-select-control mui-select-outlined", "on:click": toggleMenu, "on:focus": handleFocus, "on:blur": handleBlur, tabIndex: disabled ? -1 : 0, children: [valueDisplay, jsxRuntime.jsx("input", { type: "hidden", value: value }), jsxRuntime.jsx("fieldset", { class: "mui-select-fieldset", children: jsxRuntime.jsx("legend", { children: jsxRuntime.jsx("span", { children: label }) }) }), jsxRuntime.jsx("svg", { class: "mui-select-icon", focusable: "false", "aria-hidden": "true", viewBox: "0 0 24 24", width: "24", height: "24", children: jsxRuntime.jsx("path", { d: "M7 10l5 5 5-5Z", fill: "currentColor" }) })] }), menu] }));
         // Add global click listener
         setTimeout(() => {
             document.removeEventListener('click', handleClickOutside);

package/dist/index.mjs

@@ -5,12 +5,12 @@ import { ref as ref$1, createRedrawable as createRedrawable$1 } from 'kt.js';
  * Alert component - mimics MUI Alert appearance and behavior
  */
 function Alert(props) {
-    const { children, severity = 'info', variant = 'standard', icon, 'kt:close': onClose, sx } = props;
+    const { children, style = '', severity = 'info', variant = 'standard', icon, 'kt:close': onClose } = props;
     const classes = `mui-alert mui-alert-${severity} mui-alert-${variant} ${props.class ? props.class : ''}`;
     // Convert sx object to style string
-    let styleString = props.style || '';
-    if (sx) {
-        const sxStyles = Object.entries(sx)
+    let styleString = typeof style === 'string' ? style : '';
+    if (style && typeof style === 'object') {
+        const sxStyles = Object.entries(style)
             .map(([key, value]) => {
             // Convert camelCase to kebab-case
             const cssKey = key.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
@@ -44,7 +44,7 @@ function Alert(props) {
     return alert;
 }
 
-const emptyFn$2 = () => { };
+const emptyFn = () => { };
 const generateHandler = (props, key) => {
     const handler = props[key];
     if (typeof handler === 'function') {
@@ -53,14 +53,30 @@ const generateHandler = (props, key) => {
     else if (handler && typeof handler === 'object' && handler.isKT) {
         return (value) => (handler.value = value);
     }
-    return emptyFn$2;
+    return emptyFn;
+};
+
+const parseStyle = (style) => {
+    if (typeof style === 'string') {
+        return style;
+    }
+    if (style && typeof style === 'object') {
+        return Object.entries(style)
+            .map(([key, value]) => {
+            // Convert camelCase to kebab-case
+            const cssKey = key.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
+            return `${cssKey}: ${value}`;
+        })
+            .join('; ');
+    }
+    return '';
 };
 
 /**
  * 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$2, } = 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}`,
@@ -99,7 +115,7 @@ function Button(props) {
         }
         onClick(e);
     };
-    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" })] }));
+    return (jsxs("button", { class: classes, style: parseStyle(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" })] }));
 }
 
 /**
@@ -248,13 +264,12 @@ function CheckboxGroup(props) {
     return container;
 }
 
-const noop = () => { };
 /**
  * Dialog component - mimics MUI Dialog appearance and behavior
  * Only handles open/close state, title and content are passed as props
  */
 function Dialog(props) {
-    let { open = false, 'kt:close': onClose = noop, 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') {
@@ -406,25 +421,14 @@ function createRedrawable(creator) {
  * LinearProgress component - mimics MUI LinearProgress appearance and behavior
  */
 function LinearProgress(props) {
-    let { variant = 'indeterminate', progress: value = 0, color = 'primary', sx } = props;
+    let { variant = 'indeterminate', progress: value = 0, color = 'primary' } = props;
     const classes = [
         'mui-linear-progress',
         `mui-linear-progress-${color}`,
         `mui-linear-progress-${variant}`,
         props.class ? props.class : '',
     ].join(' ');
-    // Convert sx object to style string
-    let styleString = props.style || '';
-    if (sx) {
-        const sxStyles = Object.entries(sx)
-            .map(([key, value]) => {
-            // Convert camelCase to kebab-case
-            const cssKey = key.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
-            return `${cssKey}: ${value}`;
-        })
-            .join('; ');
-        styleString = styleString ? `${styleString}; ${sxStyles}` : sxStyles;
-    }
+    const styleString = parseStyle(props.style);
     // Calculate progress percentage
     let progressValue = Math.min(Math.max(value, 0), 100);
     const barRef = ref();
@@ -507,7 +511,7 @@ function TextField(props) {
         : (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 container = (jsxs("div", { class: 'mui-textfield-root ' + (props.class ? props.class : ''), style: props.style ? props.style : '', children: [wrapperRef, helperTextEl] }));
+    const container = (jsxs("div", { class: 'mui-textfield-root ' + (props.class ? props.class : ''), style: parseStyle(props.style), children: [wrapperRef, helperTextEl] }));
     // Initialize classes
     setTimeout(() => updateContainerClass(), 0);
     Object.defineProperties(container, {
@@ -589,11 +593,11 @@ function TextField(props) {
     return container;
 }
 
-const emptyFn$1 = () => { };
 /**
  * Radio component - mimics MUI Radio appearance and behavior
  */
 function Radio(props) {
+    const onChange = generateHandler(props, 'kt:change');
     const toggleIcon = (checked) => {
         uncheckedIcon.style.display = checked ? 'none' : '';
         checkedIcon.style.display = checked ? '' : 'none';
@@ -603,36 +607,47 @@ function Radio(props) {
         if (disabled) {
             return;
         }
-        checked = inputRef.value.checked;
+        checked = input.checked;
         toggleIcon(checked);
         onChange(checked, value);
     };
-    const { checked: initChecked = false, value = '', text = '', size = 'small', 'kt:change': onChange = emptyFn$1, disabled: initDisabled = false, color = 'primary', } = props;
-    const inputRef = ref$1();
-    let checked = initChecked;
-    let disabled = initDisabled;
+    let { checked = false, value = '', label: text = '', size = 'small', disabled = false, color = 'primary' } = props;
+    const input = (jsx("input", { type: "radio", class: "mui-radio-input", checked: checked, value: value, disabled: disabled, "on:change": handleChange }));
     const uncheckedIcon = (jsx("span", { class: "mui-radio-icon-unchecked", children: jsx("svg", { viewBox: "0 0 24 24", children: jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" }) }) }));
     const checkedIcon = (jsx("span", { class: "mui-radio-icon-checked", children: jsx("svg", { viewBox: "0 0 24 24", children: jsx("path", { d: "M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z" }) }) }));
     // initialize icon state
     toggleIcon(checked);
-    const container = (jsxs("label", { class: `mui-radio-wrapper mui-radio-size-${size} ${disabled ? 'mui-radio-disabled' : ''} mui-radio-color-${color}`, children: [jsx("input", { ref: inputRef, type: "radio", class: "mui-radio-input", checked: checked, value: value, disabled: disabled, "on:change": handleChange }), jsxs("span", { class: "mui-radio-icon", children: [uncheckedIcon, checkedIcon] }), jsx("span", { class: "mui-radio-label", children: text })] }));
-    container.redrawIcon = (newValue) => {
-        checked = newValue === value;
-        inputRef.value.checked = checked;
-        toggleIcon(checked);
-    };
+    const container = (jsxs("label", { class: `mui-radio-wrapper ${props.class ?? ''} mui-radio-size-${size} ${disabled ? 'mui-radio-disabled' : ''} mui-radio-color-${color}`, style: parseStyle(props.style), children: [input, jsxs("span", { class: "mui-radio-icon", children: [uncheckedIcon, checkedIcon] }), jsx("span", { class: "mui-radio-label", children: text })] }));
+    Object.defineProperties(container, {
+        value: {
+            get() {
+                return value;
+            },
+        },
+        checked: {
+            get() {
+                return checked;
+            },
+            set(newChecked) {
+                checked = newChecked === value;
+                input.checked = checked;
+                toggleIcon(checked);
+            },
+        },
+    });
     return container;
 }
 /**
  * RadioGroup component - groups multiple radios together
  */
 function RadioGroup(props) {
-    const { value = '', size = 'small', 'kt:change': onChange = emptyFn$1, row = false } = props;
+    let { value = '', size = 'small', row = false } = props;
+    const onChange = generateHandler(props, 'kt:change');
     const changeHandler = (checked, value) => {
         if (checked) {
             onChange(value);
         }
-        radios.forEach((radio) => radio.redrawIcon(value));
+        radios.forEach((radio) => (radio.checked = radio.value === value));
     };
     const radios = props.options.map((o) => {
         o.size = size;
@@ -649,15 +664,27 @@ function RadioGroup(props) {
         }
         return Radio(o);
     });
-    return (jsx("div", { class: `mui-radio-group ${row ? 'mui-radio-group-row' : ''} ${props.class ? props.class : ''}`, style: props.style ? props.style : '', role: "radiogroup", children: radios }));
+    const container = (jsx("div", { class: `mui-radio-group ${row ? 'mui-radio-group-row' : ''} ${props.class ?? ''}`, style: parseStyle(props.style), role: "radiogroup", children: radios }));
+    Object.defineProperties(container, {
+        value: {
+            get() {
+                return value;
+            },
+            set(newValue) {
+                value = newValue;
+                radios.forEach((radio) => (radio.checked = radio.value === value));
+            },
+        },
+    });
+    return container;
 }
 
-const emptyFn = () => { };
 /**
  * Select component - mimics MUI Select appearance and behavior
  */
 function Select(props) {
-    let { value = '', options = [], label = '', placeholder = '', size = 'medium', 'kt:change': onChange = emptyFn, fullWidth = false, disabled = false, } = props;
+    let { value = '', options = [], label = '', placeholder = '', size = 'medium', fullWidth = false, disabled = false, } = props;
+    const onChange = generateHandler(props, 'kt:change');
     let isOpen = false;
     let isFocused = false;
     const selectRef = ref$1();
@@ -744,7 +771,7 @@ function Select(props) {
         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
-    const container = (jsxs("div", { ref: selectRef, class: `mui-select-wrapper mui-select-size-${size} ${props.class ? props.class : ''} ${fullWidth ? 'mui-select-fullWidth' : ''} ${disabled ? 'mui-select-disabled' : ''}`, style: props.style ? props.style : '', children: [label && jsx("label", { class: `mui-select-label ${value || isFocused ? 'focused' : ''}`, children: label }), jsxs("div", { class: "mui-select-control mui-select-outlined", "on:click": toggleMenu, "on:focus": handleFocus, "on:blur": handleBlur, tabIndex: disabled ? -1 : 0, children: [valueDisplay, jsx("input", { type: "hidden", value: value }), jsx("fieldset", { class: "mui-select-fieldset", children: jsx("legend", { children: jsx("span", { children: label }) }) }), jsx("svg", { class: "mui-select-icon", focusable: "false", "aria-hidden": "true", viewBox: "0 0 24 24", width: "24", height: "24", children: jsx("path", { d: "M7 10l5 5 5-5Z", fill: "currentColor" }) })] }), menu] }));
+    const container = (jsxs("div", { ref: selectRef, class: `mui-select-wrapper mui-select-size-${size} ${props.class ?? ''} ${fullWidth ? 'mui-select-fullWidth' : ''} ${disabled ? 'mui-select-disabled' : ''}`, style: parseStyle(props.style), children: [label && jsx("label", { class: `mui-select-label ${value || isFocused ? 'focused' : ''}`, children: label }), jsxs("div", { class: "mui-select-control mui-select-outlined", "on:click": toggleMenu, "on:focus": handleFocus, "on:blur": handleBlur, tabIndex: disabled ? -1 : 0, children: [valueDisplay, jsx("input", { type: "hidden", value: value }), jsx("fieldset", { class: "mui-select-fieldset", children: jsx("legend", { children: jsx("span", { children: label }) }) }), jsx("svg", { class: "mui-select-icon", focusable: "false", "aria-hidden": "true", viewBox: "0 0 24 24", width: "24", height: "24", children: jsx("path", { d: "M7 10l5 5 5-5Z", fill: "currentColor" }) })] }), menu] }));
     // Add global click listener
     setTimeout(() => {
         document.removeEventListener('click', handleClickOutside);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ktjs/mui",
-  "version": "0.18.4",
+  "version": "0.18.8",
   "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.18.6"
+    "@ktjs/core": "0.18.10"
   },
   "scripts": {
     "build": "rollup -c rollup.config.mjs",