@camtomlabs/malix-design-system 0.3.0 → 0.4.1

package/dist/index.d.cts

@@ -366,7 +366,14 @@ type ModalProps = {
     cancelLabel?: string;
     children: React__default.ReactNode;
 };
-declare function Modal({ open, title, onClose, onConfirm, confirmLabel, cancelLabel, children, }: ModalProps): react_jsx_runtime.JSX.Element | null;
+/**
+ * <Modal> — opinionated glass-style modal with header/body/footer preset.
+ *
+ * For custom layouts, prefer <Dialog> with slot composition
+ * (<Dialog.Header>, <Dialog.Body>, <Dialog.Footer>). Modal is kept as a
+ * quick preset for simple title + content + confirm flows.
+ */
+declare function Modal({ open, title, onClose, onConfirm, confirmLabel, cancelLabel, children, }: ModalProps): React__default.ReactPortal | null;
 
 type ConfirmDialogVariant = 'default' | 'danger' | 'warning' | 'info';
 type ConfirmDialogProps = {
@@ -382,7 +389,94 @@ type ConfirmDialogProps = {
     children?: React__default.ReactNode;
     loading?: boolean;
 };
-declare function ConfirmDialog({ open, title, description, onConfirm, onCancel, confirmLabel, cancelLabel, variant, icon, children, loading, }: ConfirmDialogProps): react_jsx_runtime.JSX.Element | null;
+/**
+ * <ConfirmDialog> — semantic confirmation preset built on top of the
+ * overlay primitives. Use for binary confirm/cancel flows with a single
+ * message. For custom layouts (reason textareas, multi-step, extra
+ * controls), use <Dialog> instead.
+ */
+declare function ConfirmDialog({ open, title, description, onConfirm, onCancel, confirmLabel, cancelLabel, variant, icon, children, loading, }: ConfirmDialogProps): React__default.ReactPortal | null;
+
+/**
+ * <Dialog> — canonical composable modal dialog.
+ *
+ * Composition:
+ *   <Dialog open={open} onClose={close} variant="danger">
+ *     <Dialog.Header>Delete catalog?</Dialog.Header>
+ *     <Dialog.Body>
+ *       This action can't be undone.
+ *       <textarea ... />
+ *     </Dialog.Body>
+ *     <Dialog.Footer>
+ *       <Button hierarchy="secondary" onClick={close}>Cancel</Button>
+ *       <Button hierarchy="danger" onClick={confirm}>Delete</Button>
+ *     </Dialog.Footer>
+ *   </Dialog>
+ *
+ * Behavior (from useOverlayBehavior):
+ *   - Rendered via React portal into document.body
+ *   - Focus trap + Tab cycling
+ *   - Escape closes (disable via closeOnEsc={false})
+ *   - Backdrop click closes (disable via closeOnBackdropClick={false})
+ *   - Body scroll lock while open
+ *   - Focus restored to the previously-focused element on close
+ *   - Automatic ARIA wiring via useId (labelled by Dialog.Header,
+ *     described by Dialog.Body)
+ *
+ * For the confirm-primitive preset, use <ConfirmDialog> instead.
+ */
+type DialogVariant = 'default' | 'danger' | 'warning' | 'info';
+type DialogSize = 'sm' | 'md' | 'lg';
+type DialogProps = {
+    /** Whether the dialog is visible. */
+    open: boolean;
+    /** Called when the user requests the dialog to close (esc, backdrop, close button). */
+    onClose: () => void;
+    /** Semantic variant — affects accent color of the header border and icons. */
+    variant?: DialogVariant;
+    /** Controls max-width of the panel. */
+    size?: DialogSize;
+    /** Clicking the backdrop closes the dialog. Default true. */
+    closeOnBackdropClick?: boolean;
+    /** Pressing Escape closes the dialog. Default true. */
+    closeOnEsc?: boolean;
+    /** Element to focus when the dialog opens. Defaults to the first focusable. */
+    initialFocusRef?: React__default.RefObject<HTMLElement | null>;
+    /** Optional className on the panel. */
+    className?: string;
+    /**
+     * Role — `dialog` (default) or `alertdialog` for urgent confirmations.
+     * Use `alertdialog` for destructive confirm flows so screen readers
+     * announce immediately.
+     */
+    role?: 'dialog' | 'alertdialog';
+    children: React__default.ReactNode;
+};
+declare function Dialog({ open, onClose, variant, size, closeOnBackdropClick, closeOnEsc, initialFocusRef, className, role, children, }: DialogProps): React__default.ReactPortal | null;
+declare namespace Dialog {
+    var Header: typeof DialogHeader;
+    var Body: typeof DialogBody;
+    var Footer: typeof DialogFooter;
+}
+type DialogHeaderProps = {
+    children: React__default.ReactNode;
+    /** Show the built-in close (X) button. Default true. */
+    showClose?: boolean;
+    /** Accessible label for the close button. */
+    closeLabel?: string;
+};
+declare function DialogHeader({ children, showClose, closeLabel, }: DialogHeaderProps): react_jsx_runtime.JSX.Element;
+type DialogBodyProps = {
+    children: React__default.ReactNode;
+    className?: string;
+};
+declare function DialogBody({ children, className }: DialogBodyProps): react_jsx_runtime.JSX.Element;
+type DialogFooterProps = {
+    children: React__default.ReactNode;
+    /** Where to align action buttons. Default "end". */
+    align?: 'start' | 'center' | 'end' | 'between';
+};
+declare function DialogFooter({ children, align }: DialogFooterProps): react_jsx_runtime.JSX.Element;
 
 type GlassPopoverProps = React__default.HTMLAttributes<HTMLDivElement> & {
     title?: string;
@@ -659,4 +753,4 @@ interface IconProps extends Omit<SVGProps<SVGSVGElement>, 'children' | 'ref'> {
  */
 declare const Icon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
 
-export { type AIAssistantMessage, AIAssistantPanel, type AIAssistantPanelProps, Accordion, type AccordionProps, Avatar, type AvatarProps, Badge, type BadgeProps, type BadgeVariant, Banner, type BannerProps, type BannerVariant, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, type ButtonHierarchy, type ButtonProps, type ButtonSize, type ButtonVariant, Card, type CardLevel, type CardProps, ChatBubble, type ChatBubbleProps, type ChatBubbleVariant, ChatInput, type ChatInputProps, Checkbox, type CheckboxProps, ConfirmDialog, type ConfirmDialogProps, type ConfirmDialogVariant, CreditsIndicator, type CreditsIndicatorProps, DataTable, type DataTableProps, DateInput, type DateInputProps, Divider, type DividerProps, Dropzone, type DropzoneProps, EmptyState, type EmptyStateProps, FileCard, type FileCardProps, type FilterTabItem, FilterTabs, type FilterTabsProps, FlyoutMenu, type FlyoutMenuItem, type FlyoutMenuProps, GlassPopover, type GlassPopoverProps, Header, type HeaderProps, Icon, type IconComponent, type IconProps, type IconSize, Input, InputGroup, type InputGroupProps, type InputProps, LanguageSelector, type LanguageSelectorOption, type LanguageSelectorProps, type MalixTheme, MalixThemeProvider, Modal, type ModalProps, OnboardingPopover, type OnboardingPopoverProps, OperationStatus, type OperationStatusProps, type OperationStatusType, Overlay, type OverlayProps, Pagination, type PaginationProps, type PaginationVariant, Pill, type PillProps, type PillVariant, PricingCard, type PricingCardProps, ProgressBar, type ProgressBarProps, type ProgressBarVariant, Radio, type RadioProps, SearchInput, SectionHeader, type SectionHeaderProps, SegmentedControl, type SegmentedControlItem, type SegmentedControlProps, Select, SelectGroup, type SelectGroupProps, type SelectOption, type SelectProps, SelectionCard, type SelectionCardProps, SidebarItem, type SidebarItemProps, SidebarPanel, type SidebarPanelProps, SplitPane, type SplitPaneProps, StatCard, type StatCardChangeType, type StatCardProps, StatusDot, type StatusDotProps, type StatusDotVariant, type StepItem, type StepStatus, Stepper, type StepperProps, TabBar, type TabBarProps, type TabItem, type TableColumn, type TableRow, Textarea, type TextareaProps, Toggle, type ToggleProps, Tooltip, type TooltipPlacement, type TooltipProps, type UserProfileMenuItem, UserProfilePopover, type UserProfilePopoverProps, ValidationAlert, type ValidationAlertProps, type ValidationAlertVariant, tokens_registry as tokenRegistry, useMalixTheme };
+export { type AIAssistantMessage, AIAssistantPanel, type AIAssistantPanelProps, Accordion, type AccordionProps, Avatar, type AvatarProps, Badge, type BadgeProps, type BadgeVariant, Banner, type BannerProps, type BannerVariant, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, type ButtonHierarchy, type ButtonProps, type ButtonSize, type ButtonVariant, Card, type CardLevel, type CardProps, ChatBubble, type ChatBubbleProps, type ChatBubbleVariant, ChatInput, type ChatInputProps, Checkbox, type CheckboxProps, ConfirmDialog, type ConfirmDialogProps, type ConfirmDialogVariant, CreditsIndicator, type CreditsIndicatorProps, DataTable, type DataTableProps, DateInput, type DateInputProps, Dialog, type DialogBodyProps, type DialogFooterProps, type DialogHeaderProps, type DialogProps, type DialogSize, type DialogVariant, Divider, type DividerProps, Dropzone, type DropzoneProps, EmptyState, type EmptyStateProps, FileCard, type FileCardProps, type FilterTabItem, FilterTabs, type FilterTabsProps, FlyoutMenu, type FlyoutMenuItem, type FlyoutMenuProps, GlassPopover, type GlassPopoverProps, Header, type HeaderProps, Icon, type IconComponent, type IconProps, type IconSize, Input, InputGroup, type InputGroupProps, type InputProps, LanguageSelector, type LanguageSelectorOption, type LanguageSelectorProps, type MalixTheme, MalixThemeProvider, Modal, type ModalProps, OnboardingPopover, type OnboardingPopoverProps, OperationStatus, type OperationStatusProps, type OperationStatusType, Overlay, type OverlayProps, Pagination, type PaginationProps, type PaginationVariant, Pill, type PillProps, type PillVariant, PricingCard, type PricingCardProps, ProgressBar, type ProgressBarProps, type ProgressBarVariant, Radio, type RadioProps, SearchInput, SectionHeader, type SectionHeaderProps, SegmentedControl, type SegmentedControlItem, type SegmentedControlProps, Select, SelectGroup, type SelectGroupProps, type SelectOption, type SelectProps, SelectionCard, type SelectionCardProps, SidebarItem, type SidebarItemProps, SidebarPanel, type SidebarPanelProps, SplitPane, type SplitPaneProps, StatCard, type StatCardChangeType, type StatCardProps, StatusDot, type StatusDotProps, type StatusDotVariant, type StepItem, type StepStatus, Stepper, type StepperProps, TabBar, type TabBarProps, type TabItem, type TableColumn, type TableRow, Textarea, type TextareaProps, Toggle, type ToggleProps, Tooltip, type TooltipPlacement, type TooltipProps, type UserProfileMenuItem, UserProfilePopover, type UserProfilePopoverProps, ValidationAlert, type ValidationAlertProps, type ValidationAlertVariant, tokens_registry as tokenRegistry, useMalixTheme };

package/dist/index.d.ts

@@ -366,7 +366,14 @@ type ModalProps = {
     cancelLabel?: string;
     children: React__default.ReactNode;
 };
-declare function Modal({ open, title, onClose, onConfirm, confirmLabel, cancelLabel, children, }: ModalProps): react_jsx_runtime.JSX.Element | null;
+/**
+ * <Modal> — opinionated glass-style modal with header/body/footer preset.
+ *
+ * For custom layouts, prefer <Dialog> with slot composition
+ * (<Dialog.Header>, <Dialog.Body>, <Dialog.Footer>). Modal is kept as a
+ * quick preset for simple title + content + confirm flows.
+ */
+declare function Modal({ open, title, onClose, onConfirm, confirmLabel, cancelLabel, children, }: ModalProps): React__default.ReactPortal | null;
 
 type ConfirmDialogVariant = 'default' | 'danger' | 'warning' | 'info';
 type ConfirmDialogProps = {
@@ -382,7 +389,94 @@ type ConfirmDialogProps = {
     children?: React__default.ReactNode;
     loading?: boolean;
 };
-declare function ConfirmDialog({ open, title, description, onConfirm, onCancel, confirmLabel, cancelLabel, variant, icon, children, loading, }: ConfirmDialogProps): react_jsx_runtime.JSX.Element | null;
+/**
+ * <ConfirmDialog> — semantic confirmation preset built on top of the
+ * overlay primitives. Use for binary confirm/cancel flows with a single
+ * message. For custom layouts (reason textareas, multi-step, extra
+ * controls), use <Dialog> instead.
+ */
+declare function ConfirmDialog({ open, title, description, onConfirm, onCancel, confirmLabel, cancelLabel, variant, icon, children, loading, }: ConfirmDialogProps): React__default.ReactPortal | null;
+
+/**
+ * <Dialog> — canonical composable modal dialog.
+ *
+ * Composition:
+ *   <Dialog open={open} onClose={close} variant="danger">
+ *     <Dialog.Header>Delete catalog?</Dialog.Header>
+ *     <Dialog.Body>
+ *       This action can't be undone.
+ *       <textarea ... />
+ *     </Dialog.Body>
+ *     <Dialog.Footer>
+ *       <Button hierarchy="secondary" onClick={close}>Cancel</Button>
+ *       <Button hierarchy="danger" onClick={confirm}>Delete</Button>
+ *     </Dialog.Footer>
+ *   </Dialog>
+ *
+ * Behavior (from useOverlayBehavior):
+ *   - Rendered via React portal into document.body
+ *   - Focus trap + Tab cycling
+ *   - Escape closes (disable via closeOnEsc={false})
+ *   - Backdrop click closes (disable via closeOnBackdropClick={false})
+ *   - Body scroll lock while open
+ *   - Focus restored to the previously-focused element on close
+ *   - Automatic ARIA wiring via useId (labelled by Dialog.Header,
+ *     described by Dialog.Body)
+ *
+ * For the confirm-primitive preset, use <ConfirmDialog> instead.
+ */
+type DialogVariant = 'default' | 'danger' | 'warning' | 'info';
+type DialogSize = 'sm' | 'md' | 'lg';
+type DialogProps = {
+    /** Whether the dialog is visible. */
+    open: boolean;
+    /** Called when the user requests the dialog to close (esc, backdrop, close button). */
+    onClose: () => void;
+    /** Semantic variant — affects accent color of the header border and icons. */
+    variant?: DialogVariant;
+    /** Controls max-width of the panel. */
+    size?: DialogSize;
+    /** Clicking the backdrop closes the dialog. Default true. */
+    closeOnBackdropClick?: boolean;
+    /** Pressing Escape closes the dialog. Default true. */
+    closeOnEsc?: boolean;
+    /** Element to focus when the dialog opens. Defaults to the first focusable. */
+    initialFocusRef?: React__default.RefObject<HTMLElement | null>;
+    /** Optional className on the panel. */
+    className?: string;
+    /**
+     * Role — `dialog` (default) or `alertdialog` for urgent confirmations.
+     * Use `alertdialog` for destructive confirm flows so screen readers
+     * announce immediately.
+     */
+    role?: 'dialog' | 'alertdialog';
+    children: React__default.ReactNode;
+};
+declare function Dialog({ open, onClose, variant, size, closeOnBackdropClick, closeOnEsc, initialFocusRef, className, role, children, }: DialogProps): React__default.ReactPortal | null;
+declare namespace Dialog {
+    var Header: typeof DialogHeader;
+    var Body: typeof DialogBody;
+    var Footer: typeof DialogFooter;
+}
+type DialogHeaderProps = {
+    children: React__default.ReactNode;
+    /** Show the built-in close (X) button. Default true. */
+    showClose?: boolean;
+    /** Accessible label for the close button. */
+    closeLabel?: string;
+};
+declare function DialogHeader({ children, showClose, closeLabel, }: DialogHeaderProps): react_jsx_runtime.JSX.Element;
+type DialogBodyProps = {
+    children: React__default.ReactNode;
+    className?: string;
+};
+declare function DialogBody({ children, className }: DialogBodyProps): react_jsx_runtime.JSX.Element;
+type DialogFooterProps = {
+    children: React__default.ReactNode;
+    /** Where to align action buttons. Default "end". */
+    align?: 'start' | 'center' | 'end' | 'between';
+};
+declare function DialogFooter({ children, align }: DialogFooterProps): react_jsx_runtime.JSX.Element;
 
 type GlassPopoverProps = React__default.HTMLAttributes<HTMLDivElement> & {
     title?: string;
@@ -659,4 +753,4 @@ interface IconProps extends Omit<SVGProps<SVGSVGElement>, 'children' | 'ref'> {
  */
 declare const Icon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
 
-export { type AIAssistantMessage, AIAssistantPanel, type AIAssistantPanelProps, Accordion, type AccordionProps, Avatar, type AvatarProps, Badge, type BadgeProps, type BadgeVariant, Banner, type BannerProps, type BannerVariant, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, type ButtonHierarchy, type ButtonProps, type ButtonSize, type ButtonVariant, Card, type CardLevel, type CardProps, ChatBubble, type ChatBubbleProps, type ChatBubbleVariant, ChatInput, type ChatInputProps, Checkbox, type CheckboxProps, ConfirmDialog, type ConfirmDialogProps, type ConfirmDialogVariant, CreditsIndicator, type CreditsIndicatorProps, DataTable, type DataTableProps, DateInput, type DateInputProps, Divider, type DividerProps, Dropzone, type DropzoneProps, EmptyState, type EmptyStateProps, FileCard, type FileCardProps, type FilterTabItem, FilterTabs, type FilterTabsProps, FlyoutMenu, type FlyoutMenuItem, type FlyoutMenuProps, GlassPopover, type GlassPopoverProps, Header, type HeaderProps, Icon, type IconComponent, type IconProps, type IconSize, Input, InputGroup, type InputGroupProps, type InputProps, LanguageSelector, type LanguageSelectorOption, type LanguageSelectorProps, type MalixTheme, MalixThemeProvider, Modal, type ModalProps, OnboardingPopover, type OnboardingPopoverProps, OperationStatus, type OperationStatusProps, type OperationStatusType, Overlay, type OverlayProps, Pagination, type PaginationProps, type PaginationVariant, Pill, type PillProps, type PillVariant, PricingCard, type PricingCardProps, ProgressBar, type ProgressBarProps, type ProgressBarVariant, Radio, type RadioProps, SearchInput, SectionHeader, type SectionHeaderProps, SegmentedControl, type SegmentedControlItem, type SegmentedControlProps, Select, SelectGroup, type SelectGroupProps, type SelectOption, type SelectProps, SelectionCard, type SelectionCardProps, SidebarItem, type SidebarItemProps, SidebarPanel, type SidebarPanelProps, SplitPane, type SplitPaneProps, StatCard, type StatCardChangeType, type StatCardProps, StatusDot, type StatusDotProps, type StatusDotVariant, type StepItem, type StepStatus, Stepper, type StepperProps, TabBar, type TabBarProps, type TabItem, type TableColumn, type TableRow, Textarea, type TextareaProps, Toggle, type ToggleProps, Tooltip, type TooltipPlacement, type TooltipProps, type UserProfileMenuItem, UserProfilePopover, type UserProfilePopoverProps, ValidationAlert, type ValidationAlertProps, type ValidationAlertVariant, tokens_registry as tokenRegistry, useMalixTheme };
+export { type AIAssistantMessage, AIAssistantPanel, type AIAssistantPanelProps, Accordion, type AccordionProps, Avatar, type AvatarProps, Badge, type BadgeProps, type BadgeVariant, Banner, type BannerProps, type BannerVariant, Breadcrumb, type BreadcrumbItem, type BreadcrumbProps, Button, type ButtonHierarchy, type ButtonProps, type ButtonSize, type ButtonVariant, Card, type CardLevel, type CardProps, ChatBubble, type ChatBubbleProps, type ChatBubbleVariant, ChatInput, type ChatInputProps, Checkbox, type CheckboxProps, ConfirmDialog, type ConfirmDialogProps, type ConfirmDialogVariant, CreditsIndicator, type CreditsIndicatorProps, DataTable, type DataTableProps, DateInput, type DateInputProps, Dialog, type DialogBodyProps, type DialogFooterProps, type DialogHeaderProps, type DialogProps, type DialogSize, type DialogVariant, Divider, type DividerProps, Dropzone, type DropzoneProps, EmptyState, type EmptyStateProps, FileCard, type FileCardProps, type FilterTabItem, FilterTabs, type FilterTabsProps, FlyoutMenu, type FlyoutMenuItem, type FlyoutMenuProps, GlassPopover, type GlassPopoverProps, Header, type HeaderProps, Icon, type IconComponent, type IconProps, type IconSize, Input, InputGroup, type InputGroupProps, type InputProps, LanguageSelector, type LanguageSelectorOption, type LanguageSelectorProps, type MalixTheme, MalixThemeProvider, Modal, type ModalProps, OnboardingPopover, type OnboardingPopoverProps, OperationStatus, type OperationStatusProps, type OperationStatusType, Overlay, type OverlayProps, Pagination, type PaginationProps, type PaginationVariant, Pill, type PillProps, type PillVariant, PricingCard, type PricingCardProps, ProgressBar, type ProgressBarProps, type ProgressBarVariant, Radio, type RadioProps, SearchInput, SectionHeader, type SectionHeaderProps, SegmentedControl, type SegmentedControlItem, type SegmentedControlProps, Select, SelectGroup, type SelectGroupProps, type SelectOption, type SelectProps, SelectionCard, type SelectionCardProps, SidebarItem, type SidebarItemProps, SidebarPanel, type SidebarPanelProps, SplitPane, type SplitPaneProps, StatCard, type StatCardChangeType, type StatCardProps, StatusDot, type StatusDotProps, type StatusDotVariant, type StepItem, type StepStatus, Stepper, type StepperProps, TabBar, type TabBarProps, type TabItem, type TableColumn, type TableRow, Textarea, type TextareaProps, Toggle, type ToggleProps, Tooltip, type TooltipPlacement, type TooltipProps, type UserProfileMenuItem, UserProfilePopover, type UserProfilePopoverProps, ValidationAlert, type ValidationAlertProps, type ValidationAlertVariant, tokens_registry as tokenRegistry, useMalixTheme };