@ktjs/mui 0.24.4 → 0.24.6

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

@@ -71,51 +71,24 @@ 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 {
+interface KTMuiBottomNavigationAction {
     value: string;
     label: string | JSX.Element;
+    icon?: JSX.Element | HTMLElement;
     disabled?: boolean;
+    showLabel?: boolean;
 }
-interface KTMuiDropdownButtonProps extends KTMuiProps {
-    /**
-     * The label for the dropdown button - can be a string or a JSX element
-     */
-    label?: KTMaybeReactive<string | JSX.Element>;
-    /**
-     * The options for the dropdown menu - array of objects with `value`, `label` and optional `disabled`
-     */
-    options: KTMaybeReactive<KTMuiDropdownButtonOption[]>;
-    /**
-     * The variant to use - 'contained', 'outlined' or 'text'
-     */
-    variant?: KTMaybeReactive<KTMuiDropdownButtonVariant>;
-    /**
-     * The color to use - 'primary', 'secondary', 'error', 'warning', 'info' or 'success'
-     */
-    color?: KTMaybeReactive<KTMuiDropdownButtonColor>;
-    /**
-     * The size of the button - 'small', 'medium' or 'large'
-     */
-    size?: KTMaybeReactive<KTMuiDropdownButtonSize>;
-    /**
-     * Whether the button is disabled
-     */
-    disabled?: KTMaybeReactive<boolean>;
-    /**
-     * Whether the button should take the full width of its container
-     */
-    fullWidth?: KTMaybeReactive<boolean>;
-    'on:click'?: (event: MouseEvent) => void;
-    'on:select'?: (value: string, option: KTMuiDropdownButtonOption) => void;
+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 KTMuiDropdownButton = JSX.Element & {};
+type KTMuiBottomNavigation = JSX.Element & {};
 /**
- * DropdownButton component - mimics MUI Dropdown Button appearance and behavior
+ * BottomNavigation component - mimics MUI BottomNavigation appearance and behavior
  */
-declare function DropdownButton(props: KTMuiDropdownButtonProps): KTMuiDropdownButton;
+declare function BottomNavigation(props: KTMuiBottomNavigationProps): KTMuiBottomNavigation;
 
 type KTMuiCheckboxSize = 'small' | 'medium';
 type KTMuiCheckboxColor = 'primary' | 'secondary' | 'default' | 'success' | 'error' | 'warning';
@@ -166,6 +139,13 @@ interface KTMuiDialogProps extends Omit<KTMuiProps, 'children'> {
     actions?: KTMaybeReactive$1<HTMLElement | HTMLElement[]>;
     size?: KTMaybeReactive$1<KTMuiDialogSize>;
     fullWidth?: KTMaybeReactive$1<boolean>;
+    /**
+     * Dialog rendering mode: 'dialog' (native) or 'div' (fallback)
+     * - 'dialog' uses <dialog> element if supported
+     * - 'div' always uses <div>
+     * - Default: 'dialog'
+     */
+    mode?: KTMaybeReactive$1<'dialog' | 'div'>;
     'on:close'?: () => void;
 }
 type KTMuiDialog = JSX.Element;
@@ -234,6 +214,107 @@ type KTMuiLinearProgress = JSX.Element & {
 };
 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 KTMuiTextFieldType = 'text' | 'password' | 'email' | 'number' | 'tel' | 'url';
@@ -396,47 +477,31 @@ type KTMuiBadge = JSX.Element & {};
  */
 declare function Badge(props: KTMuiBadgeProps): KTMuiBadge;
 
-type KTMuiPopoverVerticalOrigin = 'top' | 'center' | 'bottom';
-type KTMuiPopoverHorizontalOrigin = 'left' | 'center' | 'right';
-interface KTMuiPopoverOrigin {
-    vertical: KTMuiPopoverVerticalOrigin;
-    horizontal: KTMuiPopoverHorizontalOrigin;
+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 { 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 };
+export { Alert, Badge, BottomNavigation, Button, Card, Checkbox, CheckboxGroup, Dialog, 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, 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 };