@camtomlabs/malix-design-system 0.1.7 → 0.3.0

package/dist/index.d.cts

@@ -1,20 +1,38 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import React from 'react';
+import * as React from 'react';
+import React__default, { ReactNode, SVGProps, ComponentType } from 'react';
 
 var version = 1;
 var tokens = [
 	"--malix-background-main",
 	"--malix-surface",
 	"--malix-surface-secondary",
+	"--malix-surface-elevated",
 	"--malix-surface-hover",
+	"--malix-surface-active",
+	"--malix-surface-disabled",
+	"--malix-input-bg",
+	"--malix-input-autofill-bg",
 	"--malix-foreground",
 	"--malix-foreground-secondary",
 	"--malix-foreground-tertiary",
 	"--malix-foreground-disabled",
+	"--malix-placeholder",
 	"--malix-border",
 	"--malix-border-strong",
 	"--malix-border-focus",
+	"--malix-border-disabled",
 	"--malix-overlay",
+	"--malix-overlay-backdrop",
+	"--malix-focus-ring",
+	"--malix-z-dropdown",
+	"--malix-z-sticky",
+	"--malix-z-overlay",
+	"--malix-z-modal",
+	"--malix-z-tooltip",
+	"--malix-z-notification",
+	"--malix-primary",
+	"--malix-primary-bg",
 	"--malix-cta-primary-bg",
 	"--malix-primary-hover",
 	"--malix-primary-active",
@@ -32,12 +50,25 @@ var tokens = [
 	"--malix-info",
 	"--malix-info-light",
 	"--malix-info-foreground",
+	"--malix-table-header-bg",
+	"--malix-table-row-hover",
+	"--malix-table-border",
 	"--malix-glass-bg",
 	"--malix-glass-border",
 	"--malix-glass-blur",
 	"--malix-sidebar-bg",
 	"--malix-sidebar-hover-bg",
 	"--malix-sidebar-active-bg",
+	"--malix-card-bg",
+	"--malix-card-border",
+	"--malix-card-radius",
+	"--malix-input-border",
+	"--malix-nav-bg",
+	"--malix-nav-height",
+	"--malix-container-sm",
+	"--malix-container-md",
+	"--malix-container-lg",
+	"--malix-container-xl",
 	"--malix-space-xs",
 	"--malix-space-sm",
 	"--malix-space-md",
@@ -56,6 +87,10 @@ var tokens = [
 	"--malix-text-lg",
 	"--malix-text-xl",
 	"--malix-text-2xl",
+	"--malix-text-3xl",
+	"--malix-text-4xl",
+	"--malix-text-5xl",
+	"--malix-text-display",
 	"--malix-font-body",
 	"--malix-font-heading",
 	"--malix-weight-normal",
@@ -79,90 +114,94 @@ var tokens_registry = {
 	tokens: tokens
 };
 
-type DividerProps = React.HTMLAttributes<HTMLHRElement>;
+type DividerProps = React__default.HTMLAttributes<HTMLHRElement>;
 declare function Divider({ className, ...props }: DividerProps): react_jsx_runtime.JSX.Element;
 
-type AvatarProps = React.HTMLAttributes<HTMLSpanElement> & {
+type AvatarProps = React__default.HTMLAttributes<HTMLSpanElement> & {
     initials: string;
     size?: number;
 };
 declare function Avatar({ initials, size, className, style, ...props }: AvatarProps): react_jsx_runtime.JSX.Element;
 
 type PillVariant = 'default' | 'primary' | 'success' | 'error' | 'warning' | 'info';
-type PillProps = React.HTMLAttributes<HTMLSpanElement> & {
+type PillProps = React__default.HTMLAttributes<HTMLSpanElement> & {
     variant?: PillVariant;
 };
 declare function Pill({ variant, children, className, ...props }: PillProps): react_jsx_runtime.JSX.Element;
 
-type ButtonHierarchy = 'primary' | 'secondary' | 'tertiary' | 'ghost';
-type ButtonVariant = 'text' | 'leading-icon-text' | 'icon-only' | 'icon-badge';
-type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+type ButtonHierarchy = 'primary' | 'secondary' | 'tertiary' | 'ghost' | 'outline' | 'danger';
+type ButtonVariant = 'text' | 'leading-icon-text' | 'icon-only' | 'icon-badge' | 'pill';
+type ButtonSize = 'sm' | 'md' | 'lg';
+type ButtonProps = React__default.ButtonHTMLAttributes<HTMLButtonElement> & {
     hierarchy?: ButtonHierarchy;
     variant?: ButtonVariant;
-    icon?: React.ReactNode;
-    badge?: React.ReactNode;
+    size?: ButtonSize;
+    icon?: React__default.ReactNode;
+    badge?: React__default.ReactNode;
     loading?: boolean;
     label?: string;
 };
-declare function Button({ hierarchy, variant, icon, badge, loading, disabled, children, label, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
+declare function Button({ hierarchy, variant, size, icon, badge, loading, disabled, children, label, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
 
-type InputProps = React.InputHTMLAttributes<HTMLInputElement> & {
-    leadingIcon?: React.ReactNode;
+type InputProps = React__default.InputHTMLAttributes<HTMLInputElement> & {
+    leadingIcon?: React__default.ReactNode;
 };
 declare function Input({ leadingIcon, ...props }: InputProps): react_jsx_runtime.JSX.Element;
 declare function SearchInput(props: Omit<InputProps, 'type'>): react_jsx_runtime.JSX.Element;
 
-type InputGroupProps = React.InputHTMLAttributes<HTMLInputElement> & {
+type InputGroupProps = React__default.InputHTMLAttributes<HTMLInputElement> & {
     label?: string;
     helperText?: string;
-    leadingIcon?: React.ReactNode;
+    leadingIcon?: React__default.ReactNode;
     error?: boolean;
 };
 declare function InputGroup({ label, helperText, leadingIcon, error, id, className, ...props }: InputGroupProps): react_jsx_runtime.JSX.Element;
 
 type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right';
 type TooltipProps = {
-    content: React.ReactNode;
-    children: React.ReactElement;
+    content: React__default.ReactNode;
+    children: React__default.ReactElement;
     placement?: TooltipPlacement;
+    /** Render tooltip via portal to avoid overflow:hidden clipping */
+    usePortal?: boolean;
 };
-declare function Tooltip({ content, children, placement }: TooltipProps): react_jsx_runtime.JSX.Element;
+declare function Tooltip({ content, children, placement, usePortal }: TooltipProps): react_jsx_runtime.JSX.Element;
 
-type SidebarItemProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
-    icon?: React.ReactNode;
+type SidebarItemProps = React__default.ButtonHTMLAttributes<HTMLButtonElement> & {
+    icon?: React__default.ReactNode;
     active?: boolean;
 };
 declare function SidebarItem({ icon, active, children, className, ...props }: SidebarItemProps): react_jsx_runtime.JSX.Element;
 
 type FlyoutMenuItem = {
-    icon?: React.ReactNode;
+    icon?: React__default.ReactNode;
     label: string;
     active?: boolean;
     onClick?: () => void;
 };
-type FlyoutMenuProps = React.HTMLAttributes<HTMLDivElement> & {
+type FlyoutMenuProps = React__default.HTMLAttributes<HTMLDivElement> & {
     items: FlyoutMenuItem[];
 };
 declare function FlyoutMenu({ items, className, ...props }: FlyoutMenuProps): react_jsx_runtime.JSX.Element;
 
-type SidebarPanelProps = React.HTMLAttributes<HTMLElement> & {
+type SidebarPanelProps = React__default.HTMLAttributes<HTMLElement> & {
     collapsed?: boolean;
-    logo?: React.ReactNode;
-    collapsedLogo?: React.ReactNode;
-    navigation?: React.ReactNode;
-    footer?: React.ReactNode;
+    logo?: React__default.ReactNode;
+    collapsedLogo?: React__default.ReactNode;
+    navigation?: React__default.ReactNode;
+    footer?: React__default.ReactNode;
     onToggleCollapse?: () => void;
 };
 declare function SidebarPanel({ collapsed, logo, collapsedLogo, navigation, footer, onToggleCollapse, className, ...props }: SidebarPanelProps): react_jsx_runtime.JSX.Element;
 
-type HeaderProps = React.HTMLAttributes<HTMLElement> & {
+type HeaderProps = React__default.HTMLAttributes<HTMLElement> & {
     pageTitle: string;
-    actions?: React.ReactNode;
+    actions?: React__default.ReactNode;
 };
 declare function Header({ pageTitle, actions, className, ...props }: HeaderProps): react_jsx_runtime.JSX.Element;
 
 type CardLevel = 1 | 2 | 3;
-type CardProps = React.HTMLAttributes<HTMLDivElement> & {
+type CardProps = React__default.HTMLAttributes<HTMLDivElement> & {
     level?: CardLevel;
     title?: string;
     description?: string;
@@ -170,7 +209,7 @@ type CardProps = React.HTMLAttributes<HTMLDivElement> & {
 declare function Card({ level, title, description, children, className, ...props }: CardProps): react_jsx_runtime.JSX.Element;
 
 type StatCardChangeType = 'positive' | 'negative' | 'neutral';
-type StatCardProps = React.HTMLAttributes<HTMLDivElement> & {
+type StatCardProps = React__default.HTMLAttributes<HTMLDivElement> & {
     label: string;
     value: string;
     change?: string;
@@ -178,7 +217,7 @@ type StatCardProps = React.HTMLAttributes<HTMLDivElement> & {
 };
 declare function StatCard({ label, value, change, changeType, className, ...props }: StatCardProps): react_jsx_runtime.JSX.Element;
 
-type DateInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'onChange'> & {
+type DateInputProps = Omit<React__default.InputHTMLAttributes<HTMLInputElement>, 'type' | 'onChange'> & {
     value?: string;
     placeholder?: string;
     onChange?: (value: string) => void;
@@ -191,7 +230,7 @@ type FilterTabItem = {
     count?: number;
     value: string;
 };
-type FilterTabsProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> & {
+type FilterTabsProps = Omit<React__default.HTMLAttributes<HTMLDivElement>, 'onChange'> & {
     items: FilterTabItem[];
     value: string;
     onChange: (value: string) => void;
@@ -201,17 +240,17 @@ declare function FilterTabs({ items, value, onChange, className, ...props }: Fil
 type BreadcrumbItem = {
     label: string;
     href?: string;
-    icon?: React.ReactNode;
+    icon?: React__default.ReactNode;
     active?: boolean;
 };
-type BreadcrumbProps = React.HTMLAttributes<HTMLElement> & {
+type BreadcrumbProps = React__default.HTMLAttributes<HTMLElement> & {
     items: BreadcrumbItem[];
-    separator?: React.ReactNode;
+    separator?: React__default.ReactNode;
 };
 declare function Breadcrumb({ items, separator, className, ...props }: BreadcrumbProps): react_jsx_runtime.JSX.Element;
 
 type ProgressBarVariant = 'default' | 'success';
-type ProgressBarProps = React.HTMLAttributes<HTMLDivElement> & {
+type ProgressBarProps = React__default.HTMLAttributes<HTMLDivElement> & {
     value: number;
     label?: string;
     showPercent?: boolean;
@@ -219,18 +258,18 @@ type ProgressBarProps = React.HTMLAttributes<HTMLDivElement> & {
 };
 declare function ProgressBar({ value, label, showPercent, variant, className, ...props }: ProgressBarProps): react_jsx_runtime.JSX.Element;
 
-type EmptyStateProps = React.HTMLAttributes<HTMLDivElement> & {
-    icon?: React.ReactNode;
+type EmptyStateProps = React__default.HTMLAttributes<HTMLDivElement> & {
+    icon?: React__default.ReactNode;
     title: string;
     description?: string;
-    action?: React.ReactNode;
+    action?: React__default.ReactNode;
 };
 declare function EmptyState({ icon, title, description, action, className, ...props }: EmptyStateProps): react_jsx_runtime.JSX.Element;
 
 type StepStatus = 'completed' | 'active' | 'pending';
 type StepItem = {
     label: string;
-    icon?: React.ReactNode;
+    icon?: React__default.ReactNode;
     status: StepStatus;
 };
 type StepperProps = {
@@ -239,7 +278,7 @@ type StepperProps = {
 };
 declare function Stepper({ steps, className }: StepperProps): react_jsx_runtime.JSX.Element;
 
-type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement> & {
+type TextareaProps = React__default.TextareaHTMLAttributes<HTMLTextAreaElement> & {
     label?: string;
     helperText?: string;
     error?: boolean;
@@ -257,18 +296,18 @@ type ChatInputProps = {
 };
 declare function ChatInput({ value, onChange, onSend, placeholder, disabled, className, }: ChatInputProps): react_jsx_runtime.JSX.Element;
 
-type SectionHeaderProps = React.HTMLAttributes<HTMLDivElement> & {
+type SectionHeaderProps = React__default.HTMLAttributes<HTMLDivElement> & {
     title: string;
     description?: string;
-    actions?: React.ReactNode;
+    actions?: React__default.ReactNode;
 };
 declare function SectionHeader({ title, description, actions, className, ...props }: SectionHeaderProps): react_jsx_runtime.JSX.Element;
 
-type FileCardProps = React.HTMLAttributes<HTMLDivElement> & {
+type FileCardProps = React__default.HTMLAttributes<HTMLDivElement> & {
     fileName: string;
     meta?: string;
-    icon?: React.ReactNode;
-    onAction?: React.MouseEventHandler<HTMLButtonElement>;
+    icon?: React__default.ReactNode;
+    onAction?: React__default.MouseEventHandler<HTMLButtonElement>;
 };
 declare function FileCard({ fileName, meta, icon, onAction, className, ...props }: FileCardProps): react_jsx_runtime.JSX.Element;
 
@@ -276,7 +315,7 @@ type TabItem = {
     label: string;
     value: string;
 };
-type TabBarProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> & {
+type TabBarProps = Omit<React__default.HTMLAttributes<HTMLDivElement>, 'onChange'> & {
     items: TabItem[];
     value: string;
     onChange: (value: string) => void;
@@ -284,7 +323,7 @@ type TabBarProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> & {
 declare function TabBar({ items, value, onChange, className, ...props }: TabBarProps): react_jsx_runtime.JSX.Element;
 
 type OperationStatusType = 'active' | 'completed' | 'failed' | 'pending';
-type OperationStatusProps = React.HTMLAttributes<HTMLSpanElement> & {
+type OperationStatusProps = React__default.HTMLAttributes<HTMLSpanElement> & {
     status: OperationStatusType;
     label?: string;
 };
@@ -303,7 +342,7 @@ declare function ValidationAlert({ title, message, onClose, variant, className,
 type SelectionCardProps = {
     title: string;
     description?: string;
-    icon?: React.ReactNode;
+    icon?: React__default.ReactNode;
     active?: boolean;
     onClick?: () => void;
     className?: string;
@@ -314,7 +353,7 @@ type OverlayProps = {
     open: boolean;
     title: string;
     onClose: () => void;
-    children: React.ReactNode;
+    children: React__default.ReactNode;
 };
 declare function Overlay({ open, title, onClose, children }: OverlayProps): react_jsx_runtime.JSX.Element | null;
 
@@ -325,40 +364,56 @@ type ModalProps = {
     onConfirm?: () => void;
     confirmLabel?: string;
     cancelLabel?: string;
-    children: React.ReactNode;
+    children: React__default.ReactNode;
 };
 declare function Modal({ open, title, onClose, onConfirm, confirmLabel, cancelLabel, children, }: ModalProps): react_jsx_runtime.JSX.Element | null;
 
-type GlassPopoverProps = React.HTMLAttributes<HTMLDivElement> & {
+type ConfirmDialogVariant = 'default' | 'danger' | 'warning' | 'info';
+type ConfirmDialogProps = {
+    open: boolean;
+    title: string;
+    description?: string;
+    onConfirm: () => void;
+    onCancel: () => void;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    variant?: ConfirmDialogVariant;
+    icon?: React__default.ReactNode;
+    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;
+
+type GlassPopoverProps = React__default.HTMLAttributes<HTMLDivElement> & {
     title?: string;
     onClose?: () => void;
 };
 declare function GlassPopover({ title, onClose, children, className, ...props }: GlassPopoverProps): react_jsx_runtime.JSX.Element;
 
-type AccordionProps = React.HTMLAttributes<HTMLDivElement> & {
+type AccordionProps = React__default.HTMLAttributes<HTMLDivElement> & {
     title: string;
-    children: React.ReactNode;
+    children: React__default.ReactNode;
     defaultOpen?: boolean;
-    icon?: React.ReactNode;
+    icon?: React__default.ReactNode;
 };
 declare function Accordion({ title, children, defaultOpen, icon, className, ...props }: AccordionProps): react_jsx_runtime.JSX.Element;
 
 type BadgeVariant = 'default' | 'primary' | 'success' | 'warning' | 'error';
-type BadgeProps = React.HTMLAttributes<HTMLSpanElement> & {
+type BadgeProps = React__default.HTMLAttributes<HTMLSpanElement> & {
     variant?: BadgeVariant;
     dot?: boolean;
 };
 declare function Badge({ variant, dot, children, className, ...props }: BadgeProps): react_jsx_runtime.JSX.Element;
 
 type BannerVariant = 'info' | 'success' | 'warning' | 'error';
-type BannerProps = React.HTMLAttributes<HTMLDivElement> & {
+type BannerProps = React__default.HTMLAttributes<HTMLDivElement> & {
     variant?: BannerVariant;
     onClose?: () => void;
-    icon?: React.ReactNode;
+    icon?: React__default.ReactNode;
 };
 declare function Banner({ variant, onClose, icon, children, className, ...props }: BannerProps): react_jsx_runtime.JSX.Element;
 
-type CheckboxProps = Omit<React.HTMLAttributes<HTMLButtonElement>, 'onChange'> & {
+type CheckboxProps = Omit<React__default.HTMLAttributes<HTMLButtonElement>, 'onChange'> & {
     checked?: boolean;
     onChange?: (checked: boolean) => void;
     disabled?: boolean;
@@ -367,7 +422,7 @@ type CheckboxProps = Omit<React.HTMLAttributes<HTMLButtonElement>, 'onChange'> &
 };
 declare function Checkbox({ checked, onChange, disabled, label, indeterminate, className, ...props }: CheckboxProps): react_jsx_runtime.JSX.Element;
 
-type RadioProps = Omit<React.HTMLAttributes<HTMLButtonElement>, 'onChange'> & {
+type RadioProps = Omit<React__default.HTMLAttributes<HTMLButtonElement>, 'onChange'> & {
     checked?: boolean;
     onChange?: (value: string) => void;
     disabled?: boolean;
@@ -377,7 +432,7 @@ type RadioProps = Omit<React.HTMLAttributes<HTMLButtonElement>, 'onChange'> & {
 };
 declare function Radio({ checked, onChange, disabled, label, name, value, className, ...props }: RadioProps): react_jsx_runtime.JSX.Element;
 
-type ToggleProps = Omit<React.HTMLAttributes<HTMLButtonElement>, 'onChange'> & {
+type ToggleProps = Omit<React__default.HTMLAttributes<HTMLButtonElement>, 'onChange'> & {
     checked?: boolean;
     onChange?: (checked: boolean) => void;
     disabled?: boolean;
@@ -389,7 +444,7 @@ type SelectOption = {
     value: string;
     label: string;
 };
-type SelectProps = Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'onChange'> & {
+type SelectProps = Omit<React__default.SelectHTMLAttributes<HTMLSelectElement>, 'onChange'> & {
     placeholder?: string;
     options?: SelectOption[];
     onChange?: (value: string) => void;
@@ -397,7 +452,7 @@ type SelectProps = Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'onChange
 };
 declare function Select({ value, placeholder, options, onChange, disabled, filled, className, ...props }: SelectProps): react_jsx_runtime.JSX.Element;
 
-type SelectGroupProps = React.HTMLAttributes<HTMLDivElement> & {
+type SelectGroupProps = React__default.HTMLAttributes<HTMLDivElement> & {
     label?: string;
     helperText?: string;
     error?: boolean;
@@ -408,7 +463,7 @@ type SegmentedControlItem = {
     label: string;
     value: string;
 };
-type SegmentedControlProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> & {
+type SegmentedControlProps = Omit<React__default.HTMLAttributes<HTMLDivElement>, 'onChange'> & {
     items: SegmentedControlItem[];
     value: string;
     onChange: (value: string) => void;
@@ -419,10 +474,10 @@ type TableColumn = {
     key: string;
     header: string;
     width?: string;
-    render?: (value: any, row: TableRow) => React.ReactNode;
+    render?: (value: any, row: TableRow) => React__default.ReactNode;
 };
 type TableRow = Record<string, any>;
-type DataTableProps = React.HTMLAttributes<HTMLTableElement> & {
+type DataTableProps = React__default.HTMLAttributes<HTMLTableElement> & {
     columns: TableColumn[];
     data: TableRow[];
     onRowClick?: (row: TableRow) => void;
@@ -442,13 +497,13 @@ type PaginationProps = {
 declare function Pagination({ currentPage, totalPages, onPageChange, variant, className, }: PaginationProps): react_jsx_runtime.JSX.Element;
 
 type StatusDotVariant = 'success' | 'warning' | 'error' | 'default';
-type StatusDotProps = React.HTMLAttributes<HTMLSpanElement> & {
+type StatusDotProps = React__default.HTMLAttributes<HTMLSpanElement> & {
     variant?: StatusDotVariant;
     label: string;
 };
 declare function StatusDot({ variant, label, className, ...props }: StatusDotProps): react_jsx_runtime.JSX.Element;
 
-type DropzoneProps = React.HTMLAttributes<HTMLDivElement> & {
+type DropzoneProps = React__default.HTMLAttributes<HTMLDivElement> & {
     onDrop?: (files: File[]) => void;
     accept?: string;
     title?: string;
@@ -457,16 +512,16 @@ type DropzoneProps = React.HTMLAttributes<HTMLDivElement> & {
 };
 declare function Dropzone({ onDrop, accept, title, hint, disabled, className, ...props }: DropzoneProps): react_jsx_runtime.JSX.Element;
 
-type SplitPaneProps = React.HTMLAttributes<HTMLDivElement> & {
-    leftPanel: React.ReactNode;
-    rightPanel: React.ReactNode;
+type SplitPaneProps = React__default.HTMLAttributes<HTMLDivElement> & {
+    leftPanel: React__default.ReactNode;
+    rightPanel: React__default.ReactNode;
     leftTitle?: string;
     rightTitle?: string;
     defaultSplit?: number;
 };
 declare function SplitPane({ leftPanel, rightPanel, leftTitle, rightTitle, defaultSplit, className, ...props }: SplitPaneProps): react_jsx_runtime.JSX.Element;
 
-type PricingCardProps = React.HTMLAttributes<HTMLDivElement> & {
+type PricingCardProps = React__default.HTMLAttributes<HTMLDivElement> & {
     planName: string;
     price: string;
     period?: string;
@@ -478,7 +533,7 @@ type PricingCardProps = React.HTMLAttributes<HTMLDivElement> & {
 };
 declare function PricingCard({ planName, price, period, description, features, ctaLabel, onCtaClick, highlighted, className, ...props }: PricingCardProps): react_jsx_runtime.JSX.Element;
 
-type OnboardingPopoverProps = React.HTMLAttributes<HTMLDivElement> & {
+type OnboardingPopoverProps = React__default.HTMLAttributes<HTMLDivElement> & {
     step: number;
     totalSteps: number;
     title: string;
@@ -489,7 +544,7 @@ type OnboardingPopoverProps = React.HTMLAttributes<HTMLDivElement> & {
 };
 declare function OnboardingPopover({ step, totalSteps, title, description, onNext, onSkip, nextLabel, className, ...props }: OnboardingPopoverProps): react_jsx_runtime.JSX.Element;
 
-type CreditsIndicatorProps = React.HTMLAttributes<HTMLDivElement> & {
+type CreditsIndicatorProps = React__default.HTMLAttributes<HTMLDivElement> & {
     remaining: number;
     label?: string;
 };
@@ -499,7 +554,7 @@ type LanguageSelectorOption = {
     value: string;
     label: string;
 };
-type LanguageSelectorProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> & {
+type LanguageSelectorProps = Omit<React__default.HTMLAttributes<HTMLDivElement>, 'onChange'> & {
     value: string;
     options?: LanguageSelectorOption[];
     onChange?: (value: string) => void;
@@ -507,14 +562,14 @@ type LanguageSelectorProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onChang
 declare function LanguageSelector({ value, options, onChange, className, ...props }: LanguageSelectorProps): react_jsx_runtime.JSX.Element;
 
 type UserProfileMenuItem = {
-    icon?: React.ReactNode;
+    icon?: React__default.ReactNode;
     label: string;
     onClick?: () => void;
 };
-type UserProfilePopoverProps = React.HTMLAttributes<HTMLDivElement> & {
+type UserProfilePopoverProps = React__default.HTMLAttributes<HTMLDivElement> & {
     name: string;
     email: string;
-    avatar?: React.ReactNode;
+    avatar?: React__default.ReactNode;
     menuItems?: UserProfileMenuItem[];
     onLogout?: () => void;
     credits?: number;
@@ -530,7 +585,7 @@ type ChatBubbleProps = {
     /** Optional user initials shown as avatar next to user messages. */
     avatarInitials?: string;
     /** Override content via children instead of message prop. */
-    children?: React.ReactNode;
+    children?: React__default.ReactNode;
     className?: string;
 };
 declare function ChatBubble({ variant, message, avatarInitials, children, className, }: ChatBubbleProps): react_jsx_runtime.JSX.Element;
@@ -559,4 +614,49 @@ type AIAssistantPanelProps = {
 };
 declare function AIAssistantPanel({ title, messages, onSend, onClose, placeholder, userInitials, disabled, className, }: AIAssistantPanelProps): react_jsx_runtime.JSX.Element;
 
-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 ButtonVariant, Card, type CardLevel, type CardProps, ChatBubble, type ChatBubbleProps, type ChatBubbleVariant, ChatInput, type ChatInputProps, Checkbox, type CheckboxProps, 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, Input, InputGroup, type InputGroupProps, type InputProps, LanguageSelector, type LanguageSelectorOption, type LanguageSelectorProps, 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 };
+type MalixTheme = 'light' | 'dark' | 'system';
+interface MalixThemeContextValue {
+    theme: MalixTheme;
+    setTheme: (theme: MalixTheme) => void;
+    toggleTheme: () => void;
+}
+interface MalixThemeProviderProps {
+    children: ReactNode;
+    defaultTheme?: MalixTheme;
+}
+declare function MalixThemeProvider({ children, defaultTheme }: MalixThemeProviderProps): React.FunctionComponentElement<React.ProviderProps<MalixThemeContextValue | null>>;
+declare function useMalixTheme(): MalixThemeContextValue;
+
+type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | number;
+/**
+ * Minimal shape that any icon component (lucide-react, phosphor-react,
+ * custom SVGs) must satisfy. We accept any React component that takes
+ * SVG props so consumers can bring their own icon library and still
+ * get consistent sizing and theming.
+ */
+type IconComponent = ComponentType<SVGProps<SVGSVGElement> & {
+    size?: number | string;
+}>;
+interface IconProps extends Omit<SVGProps<SVGSVGElement>, 'children' | 'ref'> {
+    /** The icon component to render (e.g. any lucide-react icon) */
+    as: IconComponent;
+    /** Visual size — tokens or raw px. Default: 'md' (16px) */
+    size?: IconSize;
+    /** Accessible label. If omitted, icon is decorative (aria-hidden) */
+    label?: string;
+}
+/**
+ * Canonical icon wrapper. Takes any icon component and renders it
+ * with consistent sizing aligned to Malix typography tokens and
+ * `currentColor` so the icon inherits text color.
+ *
+ * @example
+ * import { Icon } from '@camtomlabs/malix-design-system';
+ * import { Plus, Search } from 'lucide-react';
+ *
+ * <Icon as={Plus} size="md" label="Add item" />
+ * <Icon as={Search} size="sm" />  // decorative
+ */
+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 };