@ktjs/mui 0.18.3 → 0.18.5

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-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 {
@@ -36,46 +36,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 +98,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;
@@ -120,6 +124,9 @@ interface LinearProgressProps {
     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,76 +137,132 @@ 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;
+  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;
-
-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';
+declare function TextField<T extends InputTypes>(props: KTMuiTextFieldProps<T>): KTMuiTextField;
+
+interface KTMuiRadioProps {
+  value: string;
+  text: string | KTHTMLElement | HTMLElement;
+  checked?: boolean;
+  size?: 'small' | 'medium';
+  'kt:change'?: (checked: boolean, value: string) => void;
+  disabled?: boolean;
+  color?: 'primary' | 'secondary' | 'default';
 }
-type RadioComponent = KTHTMLElement & {
-    redrawIcon: (newValue: string) => void;
+
+type KTMuiRadio = KTHTMLElement & {
+  /**
+   * The value of the radio button
+   * @readonly
+   */
+  readonly value: string;
+
+  /**
+   * Reactive checked state of the radio button
+   */
+  checked: boolean;
+};
+type KTMuiRadioGroup = KTHTMLElement & {
+  /**
+   * Reactive checked state of the radio button
+   */
+  value: string;
 };
+
 /**
  * Radio component - mimics MUI Radio appearance and behavior
  */
-declare function Radio(props: RadioProps): RadioComponent;
+declare function Radio(props: KTMuiRadioProps): KTMuiRadio;
 interface RadioGroupProps {
     class?: string;
     style?: string;
     value?: string;
     name?: string;
     size?: 'small' | 'medium';
-    options: RadioProps[];
-    'kt:change'?: (value: string) => void;
+    options: KTMuiRadioProps[];
+    'kt:change'?: ((value: string) => void) | KTRef<string>;
     'kt:click'?: (checked: boolean) => void;
     row?: boolean;
 }
 /**
  * RadioGroup component - groups multiple radios together
  */
-declare function RadioGroup(props: RadioGroupProps): JSX.Element;
+declare function RadioGroup(props: RadioGroupProps): KTMuiRadioGroup;
 
 interface SelectOption {
     value: string;
@@ -267,4 +330,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, KTMuiTextField, KTMuiTextFieldProps };

package/dist/index.iife.js

@@ -44,7 +44,7 @@ var __ktjs_mui__ = (function (exports, jsxRuntime, kt_js) {
         return alert;
     }
 
-    const emptyFn$2 = () => { };
+    const emptyFn$1 = () => { };
     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$2;
+        return emptyFn$1;
     };
 
     /**
      * 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$1, } = props;
         const classes = [
             'mui-button',
             `mui-button-${variant}`,
@@ -248,13 +248,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$1, title, children, actions, maxWidth = 'sm', fullWidth = false, } = props;
         // Handle ESC key - store handler for cleanup
         const keyDownHandler = (e) => {
             if (e.key === 'Escape') {
@@ -462,7 +461,7 @@ 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(' ');
         };
@@ -589,11 +588,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 +602,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 = '', 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 mui-radio-size-${size} ${disabled ? 'mui-radio-disabled' : ''} mui-radio-color-${color}`, 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,7 +659,19 @@ 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: 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 = () => { };

package/dist/index.mjs

@@ -44,7 +44,7 @@ function Alert(props) {
     return alert;
 }
 
-const emptyFn$2 = () => { };
+const emptyFn$1 = () => { };
 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$2;
+    return emptyFn$1;
 };
 
 /**
  * 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$1, } = props;
     const classes = [
         'mui-button',
         `mui-button-${variant}`,
@@ -248,13 +248,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$1, title, children, actions, maxWidth = 'sm', fullWidth = false, } = props;
     // Handle ESC key - store handler for cleanup
     const keyDownHandler = (e) => {
         if (e.key === 'Escape') {
@@ -462,7 +461,7 @@ 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(' ');
     };
@@ -589,11 +588,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 +602,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 = '', 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 mui-radio-size-${size} ${disabled ? 'mui-radio-disabled' : ''} mui-radio-color-${color}`, 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,7 +659,19 @@ 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: 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 = () => { };

package/package.json

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