@ktjs/mui 0.24.3 → 0.24.5

package/README.md

@@ -37,13 +37,17 @@ Styles are injected automatically through Emotion when components are imported.
 - **Button** - Material-style buttons with variants and colors
 - **Pill** - Chip-like pill labels with variants and colors
 - **Badge** - Numeric and dot badges for status/count overlays
+- **BottomNavigation** - Mobile-first bottom navigation bar
 - **Dialog** - Modal dialogs
+- **Menu** - Context and dropdown menus
+- **Modal Helpers** - Async `alert/confirm/prompt` replacements
 - **Popover** - Anchor-based floating layers
 - **FormLabel** - Form labels for inputs
 - **Input** - Text input fields
 - **LinearProgress** - Progress bars
 - **Radio** - Radio buttons
 - **Select** - Dropdown select components
+- **Tabs** - Tabbed navigation
 - **Icons** - Various SVG icons
 
 ## Development

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,28 @@ interface KTMuiButtonProps extends KTMuiProps {
  */
 declare function Button(props: KTMuiButtonProps): JSX.Element;
 
+interface KTMuiBottomNavigationAction {
+    value: string;
+    label: string | JSX.Element;
+    icon?: JSX.Element | HTMLElement;
+    disabled?: boolean;
+    showLabel?: boolean;
+}
+interface KTMuiBottomNavigationProps extends KTMuiProps {
+    value?: KTMaybeReactive<string>;
+    options: KTMaybeReactive<KTMuiBottomNavigationAction[]>;
+    showLabels?: KTMaybeReactive<boolean>;
+    'on:change'?: (value: string, oldValue: string, index: number, option?: KTMuiBottomNavigationAction) => void;
+}
+type KTMuiBottomNavigation = JSX.Element & {};
+/**
+ * BottomNavigation component - mimics MUI BottomNavigation appearance and behavior
+ */
+declare function BottomNavigation(props: KTMuiBottomNavigationProps): KTMuiBottomNavigation;
+
+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 +110,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 +136,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 +160,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 +173,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 +194,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 +221,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 +229,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 +238,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,17 +246,119 @@ 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;
 };
 declare function LinearProgress(props: LinearProgressProps): KTMuiLinearProgress;
 
+type KTMuiPopoverVerticalOrigin = 'top' | 'center' | 'bottom';
+type KTMuiPopoverHorizontalOrigin = 'left' | 'center' | 'right';
+interface KTMuiPopoverOrigin {
+    vertical: KTMuiPopoverVerticalOrigin;
+    horizontal: KTMuiPopoverHorizontalOrigin;
+}
+type KTMuiPopoverCloseReason = 'backdropClick' | 'escapeKeyDown';
+interface KTMuiPopoverProps extends KTMuiProps {
+    /**
+     * Indicates whether the popover is open.
+     */
+    open?: KTMaybeReactive$1<boolean>;
+    /**
+     * The DOM element used as the anchor of the popover. The popover will appear next to this element.
+     */
+    anchorEl?: HTMLElement | null | KTReactive<HTMLElement | null>;
+    /**
+     * Defines which part of the anchor element to align the popover with.
+     */
+    anchorOrigin?: KTMaybeReactive$1<KTMuiPopoverOrigin>;
+    /**
+     * Defines which part of the popover to align with the anchor element.
+     */
+    transformOrigin?: KTMaybeReactive$1<KTMuiPopoverOrigin>;
+    /**
+     * The margin between the popover and the edge of the screen.
+     * This is used to prevent the popover from being positioned in a way that it would be inaccessible to users, such as being off-screen.
+     */
+    marginThreshold?: KTMaybeReactive$1<number>;
+    /**
+     * The elevation of the popover, which affects the shadow depth.
+     * It can be a value between 0 and 24.
+     */
+    elevation?: KTMaybeReactive$1<number>;
+    'on:close'?: (reason: KTMuiPopoverCloseReason) => void;
+}
+type KTMuiPopover = JSX.Element & {};
+/**
+ * Popover component - mimics MUI Popover appearance and behavior
+ */
+declare function Popover(props: KTMuiPopoverProps): KTMuiPopover;
+
+type KTMuiMenuCloseReason = KTMuiPopoverCloseReason | 'itemClick';
+interface KTMuiMenuOption {
+    value: string;
+    label: string | JSX.Element;
+    disabled?: boolean;
+    selected?: boolean;
+}
+type KTMuiMenuContent = KTMuiMenuOption | JSX.Element | HTMLElement | string;
+interface KTMuiMenuProps extends KTMuiProps {
+    open?: KTMaybeReactive<boolean>;
+    anchorEl?: HTMLElement | null | KTReactive<HTMLElement | null>;
+    options?: KTMaybeReactive<KTMuiMenuContent[]>;
+    anchorOrigin?: KTMaybeReactive<KTMuiPopoverOrigin>;
+    transformOrigin?: KTMaybeReactive<KTMuiPopoverOrigin>;
+    marginThreshold?: KTMaybeReactive<number>;
+    elevation?: KTMaybeReactive<number>;
+    autoClose?: KTMaybeReactive<boolean>;
+    disableAutoFocusItem?: KTMaybeReactive<boolean>;
+    'on:close'?: (reason: KTMuiMenuCloseReason) => void;
+    'on:select'?: (value: string, option: KTMuiMenuOption) => void;
+}
+type KTMuiMenu = JSX.Element & {};
+type KTMuiMenuVerticalOrigin = KTMuiPopoverVerticalOrigin;
+type KTMuiMenuHorizontalOrigin = KTMuiPopoverHorizontalOrigin;
+/**
+ * Menu component - mimics MUI Menu appearance and behavior
+ */
+declare function Menu(props: KTMuiMenuProps): KTMuiMenu;
+
+type KTMuiModalContent = string | JSX.Element | HTMLElement;
+interface KTMuiModalCommonOptions extends Pick<KTMuiProps, 'class' | 'style'> {
+    title?: string;
+    size?: KTMuiDialogSize;
+    fullWidth?: boolean;
+    confirmText?: string;
+    cancelText?: string;
+}
+interface KTMuiAlertOptions extends KTMuiModalCommonOptions {
+}
+interface KTMuiConfirmOptions extends KTMuiModalCommonOptions {
+}
+interface KTMuiPromptOptions extends KTMuiModalCommonOptions {
+    defaultValue?: string;
+    placeholder?: string;
+    inputType?: 'text' | 'password' | 'email' | 'number' | 'tel' | 'url';
+    validator?: (value: string) => boolean | string;
+}
+declare function modalAlert(content: KTMuiModalContent, options?: KTMuiAlertOptions): Promise<void>;
+declare function modalConfirm(content: KTMuiModalContent, options?: KTMuiConfirmOptions): Promise<boolean>;
+declare function modalPrompt(content: KTMuiModalContent, options?: KTMuiPromptOptions): Promise<string | null>;
+declare const Modal: {
+    alert: typeof modalAlert;
+    confirm: typeof modalConfirm;
+    prompt: typeof modalPrompt;
+};
+declare const alert: typeof modalAlert;
+declare const confirm: typeof modalConfirm;
+declare const prompt: typeof modalPrompt;
+
 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 +372,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 +421,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 +438,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 +452,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 +468,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 +490,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,47 +516,31 @@ type KTMuiBadge = JSX.Element & {};
  */
 declare function Badge(props: KTMuiBadgeProps): KTMuiBadge;
 
-type PopoverVerticalOrigin = 'top' | 'center' | 'bottom';
-type PopoverHorizontalOrigin = 'left' | 'center' | 'right';
-interface KTMuiPopoverOrigin {
-    vertical: PopoverVerticalOrigin;
-    horizontal: PopoverHorizontalOrigin;
+type KTMuiTabsVariant = 'standard' | 'scrollable' | 'fullWidth';
+type KTMuiTabsTextColor = 'primary' | 'secondary' | 'inherit';
+type KTMuiTabsIndicatorColor = 'primary' | 'secondary';
+type KTMuiTabsOrientation = 'horizontal' | 'vertical';
+interface KTMuiTabOption {
+    value: string;
+    label: string | JSX.Element;
+    icon?: JSX.Element | HTMLElement;
+    disabled?: boolean;
 }
-type KTMuiPopoverCloseReason = 'backdropClick' | 'escapeKeyDown';
-interface KTMuiPopoverProps extends KTMuiProps {
-    /**
-     * Indicates whether the popover is open.
-     */
-    open?: KTMaybeReactive$1<boolean>;
-    /**
-     * The DOM element used as the anchor of the popover. The popover will appear next to this element.
-     */
-    anchorEl?: HTMLElement | null | KTReactive<HTMLElement | null>;
-    /**
-     * Defines which part of the anchor element to align the popover with.
-     */
-    anchorOrigin?: KTMaybeReactive$1<KTMuiPopoverOrigin>;
-    /**
-     * Defines which part of the popover to align with the anchor element.
-     */
-    transformOrigin?: KTMaybeReactive$1<KTMuiPopoverOrigin>;
-    /**
-     * The margin between the popover and the edge of the screen.
-     * This is used to prevent the popover from being positioned in a way that it would be inaccessible to users, such as being off-screen.
-     */
-    marginThreshold?: KTMaybeReactive$1<number>;
-    /**
-     * The elevation of the popover, which affects the shadow depth.
-     * It can be a value between 0 and 24.
-     */
-    elevation?: KTMaybeReactive$1<number>;
-    'on:close'?: (reason: KTMuiPopoverCloseReason) => void;
+interface KTMuiTabsProps extends KTMuiProps {
+    value?: KTMaybeReactive<string>;
+    options: KTMaybeReactive<KTMuiTabOption[]>;
+    variant?: KTMaybeReactive<KTMuiTabsVariant>;
+    textColor?: KTMaybeReactive<KTMuiTabsTextColor>;
+    indicatorColor?: KTMaybeReactive<KTMuiTabsIndicatorColor>;
+    orientation?: KTMaybeReactive<KTMuiTabsOrientation>;
+    centered?: KTMaybeReactive<boolean>;
+    'on:change'?: (value: string, oldValue: string, index: number, option?: KTMuiTabOption) => void;
 }
-type KTMuiPopover = JSX.Element & {};
+type KTMuiTabs = JSX.Element & {};
 /**
- * Popover component - mimics MUI Popover appearance and behavior
+ * Tabs component - mimics MUI Tabs appearance and behavior
  */
-declare function Popover(props: KTMuiPopoverProps): KTMuiPopover;
+declare function Tabs(props: KTMuiTabsProps): KTMuiTabs;
 
-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 { Alert, Badge, BottomNavigation, Button, Card, Checkbox, CheckboxGroup, Dialog, DropdownButton, FormLabel, LinearProgress, Menu, Modal, Pill, Popover, Radio, RadioGroup, Select, Switch, Tabs, TextField, alert, confirm, modalAlert, modalConfirm, modalPrompt, prompt };
+export type { KTMuiAlertOptions, KTMuiAlertSeverity, KTMuiAlertVariant, KTMuiBadge, KTMuiBadgeAnchorOrigin, KTMuiBadgeColor, KTMuiBadgeContent, KTMuiBadgeHorizontalOrigin, KTMuiBadgeOverlap, KTMuiBadgeProps, KTMuiBadgeVariant, KTMuiBadgeVerticalOrigin, KTMuiBottomNavigation, KTMuiBottomNavigationAction, KTMuiBottomNavigationProps, KTMuiButtonColor, KTMuiButtonSize, KTMuiButtonType, KTMuiButtonVariant, KTMuiCard, KTMuiCardProps, KTMuiCardVariant, KTMuiCheckbox, KTMuiCheckboxColor, KTMuiCheckboxGroup, KTMuiCheckboxGroupProps, KTMuiCheckboxProps, KTMuiCheckboxSize, KTMuiConfirmOptions, KTMuiDialog, KTMuiDialogSize, KTMuiDropdownButton, KTMuiDropdownButtonColor, KTMuiDropdownButtonOption, KTMuiDropdownButtonProps, KTMuiDropdownButtonSize, KTMuiDropdownButtonVariant, KTMuiFormLabelComponent, KTMuiLinearProgress, KTMuiLinearProgressColor, KTMuiLinearProgressVariant, KTMuiMenu, KTMuiMenuCloseReason, KTMuiMenuContent, KTMuiMenuHorizontalOrigin, KTMuiMenuOption, KTMuiMenuProps, KTMuiMenuVerticalOrigin, KTMuiModalContent, KTMuiPill, KTMuiPillColor, KTMuiPillProps, KTMuiPillSize, KTMuiPillVariant, KTMuiPopover, KTMuiPopoverCloseReason, KTMuiPopoverHorizontalOrigin, KTMuiPopoverOrigin, KTMuiPopoverProps, KTMuiPopoverVerticalOrigin, KTMuiPromptOptions, KTMuiRadio, KTMuiRadioColor, KTMuiRadioGroup, KTMuiRadioProps, KTMuiRadioSize, KTMuiSelect, KTMuiSelectOption, KTMuiSelectProps, KTMuiSelectSize, KTMuiSwitch, KTMuiSwitchColor, KTMuiSwitchProps, KTMuiSwitchSize, KTMuiTabOption, KTMuiTabs, KTMuiTabsIndicatorColor, KTMuiTabsOrientation, KTMuiTabsProps, KTMuiTabsTextColor, KTMuiTabsVariant, KTMuiTextField, KTMuiTextFieldProps, KTMuiTextFieldSize, KTMuiTextFieldType };