@ktjs/mui 0.24.2 → 0.24.4

package/dist/index.d.ts

@@ -8,6 +8,8 @@ interface KTMuiProps {
 
 type KTMaybeReactive<T> = T | KTReactive<T>;
 
+type KTMuiAlertSeverity = 'error' | 'warning' | 'info' | 'success';
+type KTMuiAlertVariant = 'standard' | 'filled' | 'outlined';
 interface KTMuiAlertProps extends KTMuiProps {
     children: NonNullable<KTMuiProps['children']>;
     /**
@@ -18,7 +20,7 @@ interface KTMuiAlertProps extends KTMuiProps {
      * - 'success': Green color, success icon.
      * @default 'info'
      */
-    severity?: KTMaybeReactive$1<'error' | 'warning' | 'info' | 'success'>;
+    severity?: KTMaybeReactive$1<KTMuiAlertSeverity>;
     /**
      * The variant to use. It defines the style of the alert.
      * - 'standard': The default style of the alert.
@@ -26,7 +28,7 @@ interface KTMuiAlertProps extends KTMuiProps {
      * - 'outlined': An outlined version of the alert with a border.
      * @default 'standard'
      */
-    variant?: KTMaybeReactive$1<'standard' | 'filled' | 'outlined'>;
+    variant?: KTMaybeReactive$1<KTMuiAlertVariant>;
     /**
      * The icon to display in the alert. It can be a custom icon or a boolean value.
      * - If `true`, the default icon based on the severity will be displayed.
@@ -47,16 +49,20 @@ interface KTMuiAlertProps extends KTMuiProps {
 }
 declare function Alert(props: KTMuiAlertProps): JSX.Element;
 
+type KTMuiButtonVariant = 'contained' | 'outlined' | 'text';
+type KTMuiButtonColor = 'primary' | 'secondary' | 'error' | 'warning' | 'info' | 'success';
+type KTMuiButtonSize = 'small' | 'medium' | 'large';
+type KTMuiButtonType = 'button' | 'submit' | 'reset';
 interface KTMuiButtonProps extends KTMuiProps {
-    variant?: KTMaybeReactive<'contained' | 'outlined' | 'text'>;
-    color?: KTMaybeReactive<'primary' | 'secondary' | 'error' | 'warning' | 'info' | 'success'>;
-    size?: KTMaybeReactive<'small' | 'medium' | 'large'>;
+    variant?: KTMaybeReactive<KTMuiButtonVariant>;
+    color?: KTMaybeReactive<KTMuiButtonColor>;
+    size?: KTMaybeReactive<KTMuiButtonSize>;
     disabled?: KTMaybeReactive<boolean>;
     fullWidth?: KTMaybeReactive<boolean>;
     iconOnly?: KTMaybeReactive<boolean>;
     startIcon?: KTMaybeReactive<JSX.Element>;
     endIcon?: KTMaybeReactive<JSX.Element>;
-    type?: KTMaybeReactive<'button' | 'submit' | 'reset'>;
+    type?: KTMaybeReactive<KTMuiButtonType>;
     'on:click'?: (e: MouseEvent) => void;
     'on:dblclick'?: (e: MouseEvent) => void;
 }
@@ -65,6 +71,9 @@ interface KTMuiButtonProps extends KTMuiProps {
  */
 declare function Button(props: KTMuiButtonProps): JSX.Element;
 
+type KTMuiDropdownButtonVariant = 'contained' | 'outlined' | 'text';
+type KTMuiDropdownButtonColor = 'primary' | 'secondary' | 'error' | 'warning' | 'info' | 'success';
+type KTMuiDropdownButtonSize = 'small' | 'medium' | 'large';
 interface KTMuiDropdownButtonOption {
     value: string;
     label: string | JSX.Element;
@@ -82,15 +91,15 @@ interface KTMuiDropdownButtonProps extends KTMuiProps {
     /**
      * The variant to use - 'contained', 'outlined' or 'text'
      */
-    variant?: KTMaybeReactive<'contained' | 'outlined' | 'text'>;
+    variant?: KTMaybeReactive<KTMuiDropdownButtonVariant>;
     /**
      * The color to use - 'primary', 'secondary', 'error', 'warning', 'info' or 'success'
      */
-    color?: KTMaybeReactive<'primary' | 'secondary' | 'error' | 'warning' | 'info' | 'success'>;
+    color?: KTMaybeReactive<KTMuiDropdownButtonColor>;
     /**
      * The size of the button - 'small', 'medium' or 'large'
      */
-    size?: KTMaybeReactive<'small' | 'medium' | 'large'>;
+    size?: KTMaybeReactive<KTMuiDropdownButtonSize>;
     /**
      * Whether the button is disabled
      */
@@ -108,12 +117,14 @@ type KTMuiDropdownButton = JSX.Element & {};
  */
 declare function DropdownButton(props: KTMuiDropdownButtonProps): KTMuiDropdownButton;
 
+type KTMuiCheckboxSize = 'small' | 'medium';
+type KTMuiCheckboxColor = 'primary' | 'secondary' | 'default' | 'success' | 'error' | 'warning';
 interface KTMuiCheckboxProps extends Omit<KTMuiProps, 'children'> {
     value?: KTMaybeReactive$1<string>;
     label?: KTMaybeReactive$1<string | JSX.Element | HTMLElement>;
-    size?: KTMaybeReactive$1<'small' | 'medium'>;
+    size?: KTMaybeReactive$1<KTMuiCheckboxSize>;
     disabled?: KTMaybeReactive$1<boolean>;
-    color?: KTMaybeReactive$1<'primary' | 'secondary' | 'default' | 'success' | 'error' | 'warning'>;
+    color?: KTMaybeReactive$1<KTMuiCheckboxColor>;
     indeterminate?: KTMaybeReactive$1<boolean>;
     'on:change'?: (checked: boolean, value: string) => void;
 }
@@ -130,7 +141,7 @@ type KTMuiCheckbox = JSX.Element & {
 declare function Checkbox(props: KTMuiCheckboxProps, onChangeForGroup?: (checked: boolean, value: string) => void): KTMuiCheckbox;
 
 interface KTMuiCheckboxGroupProps extends Omit<KTMuiProps, 'children'> {
-    size?: KTMaybeReactive$1<'small' | 'medium'>;
+    size?: KTMaybeReactive$1<KTMuiCheckboxSize>;
     options: KTMaybeReactive$1<Array<Omit<KTMuiCheckboxProps, 'value'> & {
         value: string;
     }>>;
@@ -143,17 +154,17 @@ type KTMuiCheckboxGroup = JSX.Element & {};
  */
 declare function CheckboxGroup(props: KTMuiCheckboxGroupProps): KTMuiCheckboxGroup;
 
-type DialogSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | false;
+type KTMuiDialogSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | false;
 interface KTMuiDialogProps extends Omit<KTMuiProps, 'children'> {
     /**
      * Controls whether the dialog is open or closed
      * - Provide a `KTReactive` to make it reactive
      */
     open?: KTMaybeReactive$1<boolean>;
-    title?: string;
+    title?: KTMaybeReactive$1<string>;
     children?: JSX.Element | JSX.Element[] | string | KTMaybeReactive$1<string> | KTMaybeReactive$1<JSX.Element> | KTMaybeReactive$1<JSX.Element[]>;
     actions?: KTMaybeReactive$1<HTMLElement | HTMLElement[]>;
-    size?: KTMaybeReactive$1<DialogSize>;
+    size?: KTMaybeReactive$1<KTMuiDialogSize>;
     fullWidth?: KTMaybeReactive$1<boolean>;
     'on:close'?: () => void;
 }
@@ -164,6 +175,7 @@ type KTMuiDialog = JSX.Element;
  */
 declare function Dialog(props: KTMuiDialogProps): KTMuiDialog;
 
+type KTMuiFormLabelComponent = 'label' | 'legend';
 interface KTMuiFormLabelProps extends Omit<KTMuiProps, 'children'> {
     children: string | HTMLElement | JSX.Element;
     /**
@@ -190,7 +202,7 @@ interface KTMuiFormLabelProps extends Omit<KTMuiProps, 'children'> {
      * The component used for the root node. Either 'label' or 'legend'.
      * - Not reactive
      */
-    component?: 'label' | 'legend';
+    component?: KTMuiFormLabelComponent;
     htmlFor?: KTMaybeReactive$1<string>;
 }
 /**
@@ -198,6 +210,8 @@ interface KTMuiFormLabelProps extends Omit<KTMuiProps, 'children'> {
  */
 declare function FormLabel(props: KTMuiFormLabelProps): JSX.Element;
 
+type KTMuiLinearProgressVariant = 'determinate' | 'indeterminate';
+type KTMuiLinearProgressColor = 'primary' | 'secondary' | 'error' | 'warning' | 'info' | 'success';
 interface LinearProgressProps extends KTMuiProps {
     /**
      * The variant to use.
@@ -205,7 +219,7 @@ interface LinearProgressProps extends KTMuiProps {
      * - `indeterminate` - Use when the progress is unknown.
      * Default is `indeterminate`.
      */
-    variant?: KTMaybeReactive$1<'determinate' | 'indeterminate'>;
+    variant?: KTMaybeReactive$1<KTMuiLinearProgressVariant>;
     /**
      * The value of the progress indicator for the determinate variant. Value between 0 and 100.
      */
@@ -213,7 +227,7 @@ interface LinearProgressProps extends KTMuiProps {
     /**
      * The color of the component. It supports those theme colors that make sense for this component.
      */
-    color?: KTMaybeReactive$1<'primary' | 'secondary' | 'error' | 'warning' | 'info' | 'success'>;
+    color?: KTMaybeReactive$1<KTMuiLinearProgressColor>;
 }
 type KTMuiLinearProgress = JSX.Element & {
     value: number;
@@ -222,8 +236,9 @@ declare function LinearProgress(props: LinearProgressProps): KTMuiLinearProgress
 
 type ChangeHandler<T = string> = (value: T, ...args: any[]) => void;
 
-type InputTypes = 'text' | 'password' | 'email' | 'number' | 'tel' | 'url';
-interface KTMuiTextFieldProps<T extends InputTypes = 'text'> extends KTMuiProps {
+type KTMuiTextFieldType = 'text' | 'password' | 'email' | 'number' | 'tel' | 'url';
+type KTMuiTextFieldSize = 'small' | 'medium';
+interface KTMuiTextFieldProps<T extends KTMuiTextFieldType = 'text'> extends KTMuiProps {
     'k-model'?: T extends 'number' ? KTReactive<number> : KTReactive<string>;
     label?: KTMaybeReactive<string>;
     placeholder?: KTMaybeReactive<string>;
@@ -237,28 +252,30 @@ interface KTMuiTextFieldProps<T extends InputTypes = 'text'> extends KTMuiProps
     fullWidth?: KTMaybeReactive<boolean>;
     multiline?: boolean;
     rows?: KTMaybeReactive<number>;
-    size?: 'small' | 'medium' | KTReactive<'small' | 'medium'>;
+    size?: KTMuiTextFieldSize | KTReactive<KTMuiTextFieldSize>;
     'on:input'?: ChangeHandler<T extends 'number' ? number : T extends 'date' ? Date : string>;
     'on:change'?: ChangeHandler<T extends 'number' ? number : T extends 'date' ? Date : string>;
     'on:blur'?: () => void;
     'on:focus'?: () => void;
 }
 type KTMuiTextField = JSX.Element;
-declare function TextField<T extends InputTypes = 'text'>(props: KTMuiTextFieldProps<T>): KTMuiTextField;
+declare function TextField<T extends KTMuiTextFieldType = 'text'>(props: KTMuiTextFieldProps<T>): KTMuiTextField;
 
+type KTMuiRadioSize = 'small' | 'medium';
+type KTMuiRadioColor = 'primary' | 'secondary' | 'default';
 interface KTMuiRadioProps extends KTMuiProps {
     value: string;
     label: string | JSX.Element | HTMLElement | KTReactive<string | JSX.Element | HTMLElement>;
     checked?: boolean;
-    size?: 'small' | 'medium';
+    size?: KTMuiRadioSize;
     'on:change'?: (checked: boolean, value: string) => void;
     disabled?: boolean;
-    color?: 'primary' | 'secondary' | 'default';
+    color?: KTMuiRadioColor;
 }
 interface KTMuiRadioGroupProps extends KTMuiProps {
     value?: string;
     name?: string;
-    size?: 'small' | 'medium';
+    size?: KTMuiRadioSize;
     options: KTMuiRadioProps[];
     'on:change'?: (value: string) => void;
     'on:click'?: (checked: boolean) => void;
@@ -284,8 +301,9 @@ interface KTMuiSelectOption {
     value: string;
     label: string | JSX.Element;
 }
+type KTMuiSelectSize = 'small' | 'medium';
 interface KTMuiSelectProps extends KTMuiProps {
-    size?: KTMaybeReactive$1<'small' | 'medium'>;
+    size?: KTMaybeReactive$1<KTMuiSelectSize>;
     value?: KTMaybeReactive$1<string>;
     options: KTMaybeReactive$1<KTMuiSelectOption[]>;
     label?: KTMaybeReactive$1<string>;
@@ -300,8 +318,9 @@ type KTMuiSelect = JSX.Element & {};
  */
 declare function Select(props: KTMuiSelectProps): KTMuiSelect;
 
+type KTMuiCardVariant = 'elevation' | 'outlined' | 'contained';
 interface KTMuiCardProps extends KTMuiProps {
-    variant?: 'elevation' | 'outlined' | 'contained';
+    variant?: KTMuiCardVariant;
     elevation?: number | KTReactive<number>;
     square?: boolean | KTReactive<boolean>;
     raised?: boolean | KTReactive<boolean>;
@@ -313,12 +332,14 @@ type KTMuiCard = JSX.Element & {};
  */
 declare function Card(props: KTMuiCardProps): KTMuiCard;
 
+type KTMuiSwitchColor = 'primary' | 'secondary' | 'error' | 'warning' | 'info' | 'success';
+type KTMuiSwitchSize = 'small' | 'medium' | 'large';
 interface KTMuiSwitchProps extends KTMuiProps {
     value?: KTMaybeReactive$1<string>;
     label?: KTMaybeReactive$1<string>;
     disabled?: KTMaybeReactive$1<boolean>;
-    color?: KTMaybeReactive$1<'primary' | 'secondary' | 'error' | 'warning' | 'info' | 'success'>;
-    size?: KTMaybeReactive$1<'small' | 'medium' | 'large'>;
+    color?: KTMaybeReactive$1<KTMuiSwitchColor>;
+    size?: KTMaybeReactive$1<KTMuiSwitchSize>;
     'on:change'?: (checked: boolean, value?: string) => void;
 }
 type KTMuiSwitch = JSX.Element & {};
@@ -327,16 +348,16 @@ type KTMuiSwitch = JSX.Element & {};
  */
 declare function Switch(props: KTMuiSwitchProps): KTMuiSwitch;
 
-type PillColor = 'default' | 'primary' | 'secondary' | 'error' | 'warning' | 'info' | 'success';
-type PillVariant = 'filled' | 'outlined';
-type PillSize = 'small' | 'medium';
+type KTMuiPillColor = 'default' | 'primary' | 'secondary' | 'error' | 'warning' | 'info' | 'success';
+type KTMuiPillVariant = 'filled' | 'outlined';
+type KTMuiPillSize = 'small' | 'medium';
 interface KTMuiPillProps extends KTMuiProps {
     label?: KTMaybeReactive$1<string>;
     icon?: KTMaybeReactive$1<HTMLElement | JSX.Element>;
     deleteIcon?: KTMaybeReactive$1<HTMLElement | JSX.Element>;
-    color?: KTMaybeReactive$1<PillColor>;
-    variant?: KTMaybeReactive$1<PillVariant>;
-    size?: KTMaybeReactive$1<PillSize>;
+    color?: KTMaybeReactive$1<KTMuiPillColor>;
+    variant?: KTMaybeReactive$1<KTMuiPillVariant>;
+    size?: KTMaybeReactive$1<KTMuiPillSize>;
     clickable?: KTMaybeReactive$1<boolean>;
     disabled?: KTMaybeReactive$1<boolean>;
     autoRemoveOnDelete?: KTMaybeReactive$1<boolean>;
@@ -349,22 +370,24 @@ type KTMuiPill = JSX.Element & {};
  */
 declare function Pill(props: KTMuiPillProps): KTMuiPill;
 
-type BadgeColor = 'default' | 'primary' | 'secondary' | 'error' | 'warning' | 'info' | 'success';
-type BadgeVariant = 'standard' | 'dot';
-type BadgeOverlap = 'rectangular' | 'circular';
-type BadgeContent = string | number;
+type KTMuiBadgeColor = 'default' | 'primary' | 'secondary' | 'error' | 'warning' | 'info' | 'success';
+type KTMuiBadgeVariant = 'standard' | 'dot';
+type KTMuiBadgeOverlap = 'rectangular' | 'circular';
+type KTMuiBadgeVerticalOrigin = 'top' | 'bottom';
+type KTMuiBadgeHorizontalOrigin = 'left' | 'right';
+type KTMuiBadgeContent = string | number;
 interface KTMuiBadgeAnchorOrigin {
-    vertical: 'top' | 'bottom';
-    horizontal: 'left' | 'right';
+    vertical: KTMuiBadgeVerticalOrigin;
+    horizontal: KTMuiBadgeHorizontalOrigin;
 }
 interface KTMuiBadgeProps extends KTMuiProps {
-    badgeContent?: BadgeContent | KTReactive<number> | KTReactive<string>;
+    badgeContent?: KTMuiBadgeContent | KTReactive<number> | KTReactive<string>;
     max?: KTMaybeReactive$1<number>;
     showZero?: KTMaybeReactive$1<boolean>;
     invisible?: KTMaybeReactive$1<boolean>;
-    color?: KTMaybeReactive$1<BadgeColor>;
-    variant?: KTMaybeReactive$1<BadgeVariant>;
-    overlap?: KTMaybeReactive$1<BadgeOverlap>;
+    color?: KTMaybeReactive$1<KTMuiBadgeColor>;
+    variant?: KTMaybeReactive$1<KTMuiBadgeVariant>;
+    overlap?: KTMaybeReactive$1<KTMuiBadgeOverlap>;
     anchorOrigin?: KTMaybeReactive$1<KTMuiBadgeAnchorOrigin>;
 }
 type KTMuiBadge = JSX.Element & {};
@@ -373,11 +396,11 @@ type KTMuiBadge = JSX.Element & {};
  */
 declare function Badge(props: KTMuiBadgeProps): KTMuiBadge;
 
-type PopoverVerticalOrigin = 'top' | 'center' | 'bottom';
-type PopoverHorizontalOrigin = 'left' | 'center' | 'right';
+type KTMuiPopoverVerticalOrigin = 'top' | 'center' | 'bottom';
+type KTMuiPopoverHorizontalOrigin = 'left' | 'center' | 'right';
 interface KTMuiPopoverOrigin {
-    vertical: PopoverVerticalOrigin;
-    horizontal: PopoverHorizontalOrigin;
+    vertical: KTMuiPopoverVerticalOrigin;
+    horizontal: KTMuiPopoverHorizontalOrigin;
 }
 type KTMuiPopoverCloseReason = 'backdropClick' | 'escapeKeyDown';
 interface KTMuiPopoverProps extends KTMuiProps {
@@ -416,4 +439,4 @@ type KTMuiPopover = JSX.Element & {};
 declare function Popover(props: KTMuiPopoverProps): KTMuiPopover;
 
 export { Alert, Badge, Button, Card, Checkbox, CheckboxGroup, Dialog, DropdownButton, FormLabel, LinearProgress, Pill, Popover, Radio, RadioGroup, Select, Switch, TextField };
-export type { KTMuiBadge, KTMuiBadgeAnchorOrigin, KTMuiBadgeProps, KTMuiCard, KTMuiCardProps, KTMuiCheckbox, KTMuiCheckboxGroup, KTMuiCheckboxGroupProps, KTMuiCheckboxProps, KTMuiDialog, KTMuiDropdownButton, KTMuiDropdownButtonOption, KTMuiDropdownButtonProps, KTMuiLinearProgress, KTMuiPill, KTMuiPillProps, KTMuiPopover, KTMuiPopoverCloseReason, KTMuiPopoverOrigin, KTMuiPopoverProps, KTMuiRadio, KTMuiRadioGroup, KTMuiRadioProps, KTMuiSelect, KTMuiSelectOption, KTMuiSelectProps, KTMuiSwitch, KTMuiSwitchProps, KTMuiTextField, KTMuiTextFieldProps };
+export type { KTMuiAlertSeverity, KTMuiAlertVariant, KTMuiBadge, KTMuiBadgeAnchorOrigin, KTMuiBadgeColor, KTMuiBadgeContent, KTMuiBadgeHorizontalOrigin, KTMuiBadgeOverlap, KTMuiBadgeProps, KTMuiBadgeVariant, KTMuiBadgeVerticalOrigin, KTMuiButtonColor, KTMuiButtonSize, KTMuiButtonType, KTMuiButtonVariant, KTMuiCard, KTMuiCardProps, KTMuiCardVariant, KTMuiCheckbox, KTMuiCheckboxColor, KTMuiCheckboxGroup, KTMuiCheckboxGroupProps, KTMuiCheckboxProps, KTMuiCheckboxSize, KTMuiDialog, KTMuiDialogSize, KTMuiDropdownButton, KTMuiDropdownButtonColor, KTMuiDropdownButtonOption, KTMuiDropdownButtonProps, KTMuiDropdownButtonSize, KTMuiDropdownButtonVariant, KTMuiFormLabelComponent, KTMuiLinearProgress, KTMuiLinearProgressColor, KTMuiLinearProgressVariant, KTMuiPill, KTMuiPillColor, KTMuiPillProps, KTMuiPillSize, KTMuiPillVariant, KTMuiPopover, KTMuiPopoverCloseReason, KTMuiPopoverHorizontalOrigin, KTMuiPopoverOrigin, KTMuiPopoverProps, KTMuiPopoverVerticalOrigin, KTMuiRadio, KTMuiRadioColor, KTMuiRadioGroup, KTMuiRadioProps, KTMuiRadioSize, KTMuiSelect, KTMuiSelectOption, KTMuiSelectProps, KTMuiSelectSize, KTMuiSwitch, KTMuiSwitchColor, KTMuiSwitchProps, KTMuiSwitchSize, KTMuiTextField, KTMuiTextFieldProps, KTMuiTextFieldSize, KTMuiTextFieldType };