@octavius2929-personal/design-system 0.3.0 → 0.5.0

package/dist/index.d.ts

@@ -1,8 +1,609 @@
 import * as react from 'react';
 import { SVGProps, ReactElement, ButtonHTMLAttributes, HTMLAttributes, ReactNode, InputHTMLAttributes, TableHTMLAttributes } from 'react';
 
+declare const tintaSchema: {
+    light: {
+        color: {
+            bg1: string;
+            bg2: string;
+            bg3: string;
+            bgInset: string;
+            fg1: string;
+            fg2: string;
+            fg3: string;
+            fgOnAccent: string;
+            border1: string;
+            border2: string;
+            borderStrong: string;
+            accent: string;
+            accentHover: string;
+            accentSoft: string;
+            ok: string;
+            warn: string;
+            danger: string;
+            info: string;
+            focus: string;
+            scrim: string;
+        };
+        font: {
+            readonly display: "'DM Serif Display', 'Times New Roman', serif";
+            readonly text: "'Newsreader', Georgia, serif";
+            readonly mono: "'IBM Plex Mono', 'SFMono-Regular', monospace";
+            readonly black: "'UnifrakturMaguntia', 'Grenze Gotisch', serif";
+        };
+        text: {
+            readonly eyebrow: {
+                readonly size: "0.694rem";
+                readonly lineHeight: "1.2";
+                readonly weight: "500";
+                readonly letterSpacing: "0.14em";
+            };
+            readonly display: {
+                readonly size: "5.6rem";
+                readonly lineHeight: "1.05";
+                readonly weight: "600";
+                readonly letterSpacing: "-0.01em";
+            };
+            readonly h1: {
+                readonly size: "2.9rem";
+                readonly lineHeight: "1.05";
+                readonly weight: "600";
+                readonly letterSpacing: "-0.01em";
+            };
+            readonly h2: {
+                readonly size: "2.1rem";
+                readonly lineHeight: "1.2";
+                readonly weight: "600";
+                readonly letterSpacing: "0";
+            };
+            readonly h3: {
+                readonly size: "1.563rem";
+                readonly lineHeight: "1.2";
+                readonly weight: "500";
+                readonly letterSpacing: "0";
+            };
+            readonly h4: {
+                readonly size: "1.25rem";
+                readonly lineHeight: "1.2";
+                readonly weight: "600";
+                readonly letterSpacing: "0";
+            };
+            readonly body: {
+                readonly size: "1rem";
+                readonly lineHeight: "1.7";
+                readonly weight: "400";
+                readonly letterSpacing: "0";
+            };
+            readonly lead: {
+                readonly size: "1.25rem";
+                readonly lineHeight: "1.7";
+                readonly weight: "400";
+                readonly letterSpacing: "0";
+            };
+            readonly small: {
+                readonly size: "0.95rem";
+                readonly lineHeight: "1.5";
+                readonly weight: "400";
+                readonly letterSpacing: "0";
+            };
+            readonly caption: {
+                readonly size: "0.833rem";
+                readonly lineHeight: "1.5";
+                readonly weight: "400";
+                readonly letterSpacing: "0.04em";
+            };
+        };
+        space: {
+            readonly none: "0";
+            readonly xs: "0.25rem";
+            readonly sm: "0.5rem";
+            readonly md: "0.75rem";
+            readonly lg: "1rem";
+            readonly xl: "1.5rem";
+            readonly "2xl": "2rem";
+            readonly "3xl": "3rem";
+            readonly "4xl": "4rem";
+            readonly "5xl": "6rem";
+        };
+        radius: {
+            readonly none: "0px";
+            readonly sm: "3px";
+            readonly md: "5px";
+            readonly lg: "8px";
+            readonly base: "4px";
+            readonly full: "999px";
+        };
+        border: {
+            readonly hair: "1px";
+            readonly rule: "1.5px";
+            readonly heavy: "2px";
+        };
+        tracking: {
+            readonly tight: "-0.01em";
+            readonly normal: "0";
+            readonly wide: "0.04em";
+            readonly wider: "0.1em";
+            readonly widest: "0.14em";
+        };
+        weight: {
+            readonly light: "300";
+            readonly regular: "400";
+            readonly medium: "500";
+            readonly semibold: "600";
+            readonly bold: "700";
+        };
+        dur: {
+            readonly fast: "120ms";
+            readonly base: "200ms";
+            readonly slow: "360ms";
+        };
+        ease: {
+            readonly ink: "cubic-bezier(0.2, 0, 0, 1)";
+        };
+        shadow: {
+            readonly sm: "0 1px 0 rgba(20,17,14,0.06)";
+            readonly md: "0 2px 10px -4px rgba(20,17,14,0.22)";
+            readonly lg: "0 12px 32px -10px rgba(20,17,14,0.34)";
+        };
+    };
+    dark: {
+        color: {
+            bg1: string;
+            bg2: string;
+            bg3: string;
+            bgInset: string;
+            fg1: string;
+            fg2: string;
+            fg3: string;
+            fgOnAccent: string;
+            border1: string;
+            border2: string;
+            borderStrong: string;
+            accent: string;
+            accentHover: string;
+            accentSoft: string;
+            ok: string;
+            warn: string;
+            danger: string;
+            info: string;
+            focus: string;
+            scrim: string;
+        };
+        font: {
+            readonly display: "'DM Serif Display', 'Times New Roman', serif";
+            readonly text: "'Newsreader', Georgia, serif";
+            readonly mono: "'IBM Plex Mono', 'SFMono-Regular', monospace";
+            readonly black: "'UnifrakturMaguntia', 'Grenze Gotisch', serif";
+        };
+        text: {
+            readonly eyebrow: {
+                readonly size: "0.694rem";
+                readonly lineHeight: "1.2";
+                readonly weight: "500";
+                readonly letterSpacing: "0.14em";
+            };
+            readonly display: {
+                readonly size: "5.6rem";
+                readonly lineHeight: "1.05";
+                readonly weight: "600";
+                readonly letterSpacing: "-0.01em";
+            };
+            readonly h1: {
+                readonly size: "2.9rem";
+                readonly lineHeight: "1.05";
+                readonly weight: "600";
+                readonly letterSpacing: "-0.01em";
+            };
+            readonly h2: {
+                readonly size: "2.1rem";
+                readonly lineHeight: "1.2";
+                readonly weight: "600";
+                readonly letterSpacing: "0";
+            };
+            readonly h3: {
+                readonly size: "1.563rem";
+                readonly lineHeight: "1.2";
+                readonly weight: "500";
+                readonly letterSpacing: "0";
+            };
+            readonly h4: {
+                readonly size: "1.25rem";
+                readonly lineHeight: "1.2";
+                readonly weight: "600";
+                readonly letterSpacing: "0";
+            };
+            readonly body: {
+                readonly size: "1rem";
+                readonly lineHeight: "1.7";
+                readonly weight: "400";
+                readonly letterSpacing: "0";
+            };
+            readonly lead: {
+                readonly size: "1.25rem";
+                readonly lineHeight: "1.7";
+                readonly weight: "400";
+                readonly letterSpacing: "0";
+            };
+            readonly small: {
+                readonly size: "0.95rem";
+                readonly lineHeight: "1.5";
+                readonly weight: "400";
+                readonly letterSpacing: "0";
+            };
+            readonly caption: {
+                readonly size: "0.833rem";
+                readonly lineHeight: "1.5";
+                readonly weight: "400";
+                readonly letterSpacing: "0.04em";
+            };
+        };
+        space: {
+            readonly none: "0";
+            readonly xs: "0.25rem";
+            readonly sm: "0.5rem";
+            readonly md: "0.75rem";
+            readonly lg: "1rem";
+            readonly xl: "1.5rem";
+            readonly "2xl": "2rem";
+            readonly "3xl": "3rem";
+            readonly "4xl": "4rem";
+            readonly "5xl": "6rem";
+        };
+        radius: {
+            readonly none: "0px";
+            readonly sm: "3px";
+            readonly md: "5px";
+            readonly lg: "8px";
+            readonly base: "4px";
+            readonly full: "999px";
+        };
+        border: {
+            readonly hair: "1px";
+            readonly rule: "1.5px";
+            readonly heavy: "2px";
+        };
+        tracking: {
+            readonly tight: "-0.01em";
+            readonly normal: "0";
+            readonly wide: "0.04em";
+            readonly wider: "0.1em";
+            readonly widest: "0.14em";
+        };
+        weight: {
+            readonly light: "300";
+            readonly regular: "400";
+            readonly medium: "500";
+            readonly semibold: "600";
+            readonly bold: "700";
+        };
+        dur: {
+            readonly fast: "120ms";
+            readonly base: "200ms";
+            readonly slow: "360ms";
+        };
+        ease: {
+            readonly ink: "cubic-bezier(0.2, 0, 0, 1)";
+        };
+        shadow: {
+            readonly sm: "0 1px 0 rgba(20,17,14,0.06)";
+            readonly md: "0 2px 10px -4px rgba(20,17,14,0.22)";
+            readonly lg: "0 12px 32px -10px rgba(20,17,14,0.34)";
+        };
+    };
+    sepia: {
+        color: {
+            bg1: string;
+            bg2: string;
+            bg3: string;
+            bgInset: string;
+            fg1: string;
+            fg2: string;
+            fg3: string;
+            fgOnAccent: string;
+            border1: string;
+            border2: string;
+            borderStrong: string;
+            accent: string;
+            accentHover: string;
+            accentSoft: string;
+            ok: string;
+            warn: string;
+            danger: string;
+            info: string;
+            focus: string;
+            scrim: string;
+        };
+        font: {
+            readonly display: "'DM Serif Display', 'Times New Roman', serif";
+            readonly text: "'Newsreader', Georgia, serif";
+            readonly mono: "'IBM Plex Mono', 'SFMono-Regular', monospace";
+            readonly black: "'UnifrakturMaguntia', 'Grenze Gotisch', serif";
+        };
+        text: {
+            readonly eyebrow: {
+                readonly size: "0.694rem";
+                readonly lineHeight: "1.2";
+                readonly weight: "500";
+                readonly letterSpacing: "0.14em";
+            };
+            readonly display: {
+                readonly size: "5.6rem";
+                readonly lineHeight: "1.05";
+                readonly weight: "600";
+                readonly letterSpacing: "-0.01em";
+            };
+            readonly h1: {
+                readonly size: "2.9rem";
+                readonly lineHeight: "1.05";
+                readonly weight: "600";
+                readonly letterSpacing: "-0.01em";
+            };
+            readonly h2: {
+                readonly size: "2.1rem";
+                readonly lineHeight: "1.2";
+                readonly weight: "600";
+                readonly letterSpacing: "0";
+            };
+            readonly h3: {
+                readonly size: "1.563rem";
+                readonly lineHeight: "1.2";
+                readonly weight: "500";
+                readonly letterSpacing: "0";
+            };
+            readonly h4: {
+                readonly size: "1.25rem";
+                readonly lineHeight: "1.2";
+                readonly weight: "600";
+                readonly letterSpacing: "0";
+            };
+            readonly body: {
+                readonly size: "1rem";
+                readonly lineHeight: "1.7";
+                readonly weight: "400";
+                readonly letterSpacing: "0";
+            };
+            readonly lead: {
+                readonly size: "1.25rem";
+                readonly lineHeight: "1.7";
+                readonly weight: "400";
+                readonly letterSpacing: "0";
+            };
+            readonly small: {
+                readonly size: "0.95rem";
+                readonly lineHeight: "1.5";
+                readonly weight: "400";
+                readonly letterSpacing: "0";
+            };
+            readonly caption: {
+                readonly size: "0.833rem";
+                readonly lineHeight: "1.5";
+                readonly weight: "400";
+                readonly letterSpacing: "0.04em";
+            };
+        };
+        space: {
+            readonly none: "0";
+            readonly xs: "0.25rem";
+            readonly sm: "0.5rem";
+            readonly md: "0.75rem";
+            readonly lg: "1rem";
+            readonly xl: "1.5rem";
+            readonly "2xl": "2rem";
+            readonly "3xl": "3rem";
+            readonly "4xl": "4rem";
+            readonly "5xl": "6rem";
+        };
+        radius: {
+            readonly none: "0px";
+            readonly sm: "3px";
+            readonly md: "5px";
+            readonly lg: "8px";
+            readonly base: "4px";
+            readonly full: "999px";
+        };
+        border: {
+            readonly hair: "1px";
+            readonly rule: "1.5px";
+            readonly heavy: "2px";
+        };
+        tracking: {
+            readonly tight: "-0.01em";
+            readonly normal: "0";
+            readonly wide: "0.04em";
+            readonly wider: "0.1em";
+            readonly widest: "0.14em";
+        };
+        weight: {
+            readonly light: "300";
+            readonly regular: "400";
+            readonly medium: "500";
+            readonly semibold: "600";
+            readonly bold: "700";
+        };
+        dur: {
+            readonly fast: "120ms";
+            readonly base: "200ms";
+            readonly slow: "360ms";
+        };
+        ease: {
+            readonly ink: "cubic-bezier(0.2, 0, 0, 1)";
+        };
+        shadow: {
+            readonly sm: "0 1px 0 rgba(20,17,14,0.06)";
+            readonly md: "0 2px 10px -4px rgba(20,17,14,0.22)";
+            readonly lg: "0 12px 32px -10px rgba(20,17,14,0.34)";
+        };
+    };
+    contrast: {
+        color: {
+            bg1: string;
+            bg2: string;
+            bg3: string;
+            bgInset: string;
+            fg1: string;
+            fg2: string;
+            fg3: string;
+            fgOnAccent: string;
+            border1: string;
+            border2: string;
+            borderStrong: string;
+            accent: string;
+            accentHover: string;
+            accentSoft: string;
+            ok: string;
+            warn: string;
+            danger: string;
+            info: string;
+            focus: string;
+            scrim: string;
+        };
+        font: {
+            readonly display: "'DM Serif Display', 'Times New Roman', serif";
+            readonly text: "'Newsreader', Georgia, serif";
+            readonly mono: "'IBM Plex Mono', 'SFMono-Regular', monospace";
+            readonly black: "'UnifrakturMaguntia', 'Grenze Gotisch', serif";
+        };
+        text: {
+            readonly eyebrow: {
+                readonly size: "0.694rem";
+                readonly lineHeight: "1.2";
+                readonly weight: "500";
+                readonly letterSpacing: "0.14em";
+            };
+            readonly display: {
+                readonly size: "5.6rem";
+                readonly lineHeight: "1.05";
+                readonly weight: "600";
+                readonly letterSpacing: "-0.01em";
+            };
+            readonly h1: {
+                readonly size: "2.9rem";
+                readonly lineHeight: "1.05";
+                readonly weight: "600";
+                readonly letterSpacing: "-0.01em";
+            };
+            readonly h2: {
+                readonly size: "2.1rem";
+                readonly lineHeight: "1.2";
+                readonly weight: "600";
+                readonly letterSpacing: "0";
+            };
+            readonly h3: {
+                readonly size: "1.563rem";
+                readonly lineHeight: "1.2";
+                readonly weight: "500";
+                readonly letterSpacing: "0";
+            };
+            readonly h4: {
+                readonly size: "1.25rem";
+                readonly lineHeight: "1.2";
+                readonly weight: "600";
+                readonly letterSpacing: "0";
+            };
+            readonly body: {
+                readonly size: "1rem";
+                readonly lineHeight: "1.7";
+                readonly weight: "400";
+                readonly letterSpacing: "0";
+            };
+            readonly lead: {
+                readonly size: "1.25rem";
+                readonly lineHeight: "1.7";
+                readonly weight: "400";
+                readonly letterSpacing: "0";
+            };
+            readonly small: {
+                readonly size: "0.95rem";
+                readonly lineHeight: "1.5";
+                readonly weight: "400";
+                readonly letterSpacing: "0";
+            };
+            readonly caption: {
+                readonly size: "0.833rem";
+                readonly lineHeight: "1.5";
+                readonly weight: "400";
+                readonly letterSpacing: "0.04em";
+            };
+        };
+        space: {
+            readonly none: "0";
+            readonly xs: "0.25rem";
+            readonly sm: "0.5rem";
+            readonly md: "0.75rem";
+            readonly lg: "1rem";
+            readonly xl: "1.5rem";
+            readonly "2xl": "2rem";
+            readonly "3xl": "3rem";
+            readonly "4xl": "4rem";
+            readonly "5xl": "6rem";
+        };
+        radius: {
+            readonly none: "0px";
+            readonly sm: "3px";
+            readonly md: "5px";
+            readonly lg: "8px";
+            readonly base: "4px";
+            readonly full: "999px";
+        };
+        border: {
+            readonly hair: "1px";
+            readonly rule: "1.5px";
+            readonly heavy: "2px";
+        };
+        tracking: {
+            readonly tight: "-0.01em";
+            readonly normal: "0";
+            readonly wide: "0.04em";
+            readonly wider: "0.1em";
+            readonly widest: "0.14em";
+        };
+        weight: {
+            readonly light: "300";
+            readonly regular: "400";
+            readonly medium: "500";
+            readonly semibold: "600";
+            readonly bold: "700";
+        };
+        dur: {
+            readonly fast: "120ms";
+            readonly base: "200ms";
+            readonly slow: "360ms";
+        };
+        ease: {
+            readonly ink: "cubic-bezier(0.2, 0, 0, 1)";
+        };
+        shadow: {
+            readonly sm: "0 1px 0 rgba(20,17,14,0.06)";
+            readonly md: "0 2px 10px -4px rgba(20,17,14,0.22)";
+            readonly lg: "0 12px 32px -10px rgba(20,17,14,0.34)";
+        };
+    };
+};
+
 type SchemaName = "tinta";
 type Mode = "light" | "dark" | "sepia" | "contrast";
+declare const colorVars: {
+    bg1: `var(--${string})`;
+    bg2: `var(--${string})`;
+    bg3: `var(--${string})`;
+    bgInset: `var(--${string})`;
+    fg1: `var(--${string})`;
+    fg2: `var(--${string})`;
+    fg3: `var(--${string})`;
+    fgOnAccent: `var(--${string})`;
+    border1: `var(--${string})`;
+    border2: `var(--${string})`;
+    borderStrong: `var(--${string})`;
+    accent: `var(--${string})`;
+    accentHover: `var(--${string})`;
+    accentSoft: `var(--${string})`;
+    ok: `var(--${string})`;
+    warn: `var(--${string})`;
+    danger: `var(--${string})`;
+    info: `var(--${string})`;
+    focus: `var(--${string})`;
+    scrim: `var(--${string})`;
+};
 declare const vars: {
     color: {
         bg1: `var(--${string})`;
@@ -23,6 +624,7 @@ declare const vars: {
         warn: `var(--${string})`;
         danger: `var(--${string})`;
         info: `var(--${string})`;
+        focus: `var(--${string})`;
         scrim: `var(--${string})`;
     };
     font: {
@@ -132,12 +734,6 @@ declare const vars: {
         readonly wider: `var(--${string})`;
         readonly widest: `var(--${string})`;
     };
-    leading: {
-        readonly tight: `var(--${string})`;
-        readonly snug: `var(--${string})`;
-        readonly normal: `var(--${string})`;
-        readonly relaxed: `var(--${string})`;
-    };
     dur: {
         readonly fast: `var(--${string})`;
         readonly base: `var(--${string})`;
@@ -155,6 +751,7 @@ declare const vars: {
 declare const themes: Record<SchemaName, Record<Mode, string>>;
 declare const schemaNames: readonly SchemaName[];
 declare const modeNames: readonly Mode[];
+type ColorTokens = typeof tintaSchema.light.color;
 
 declare function usePrevious<T>(value: T, initial: T): T;
 declare function usePrevious<T>(value: T, initial?: T): T | undefined;
@@ -422,7 +1019,7 @@ interface DialogProps {
     children?: ReactNode;
 }
 
-declare function Dialog({ open, onClose, title, actions, children }: DialogProps): react.JSX.Element | null;
+declare function Dialog({ open, onClose, title, actions, children }: DialogProps): react.ReactPortal | null;
 
 interface SnackbarProps {
     open: boolean;
@@ -431,7 +1028,7 @@ interface SnackbarProps {
     onClose?: () => void;
 }
 
-declare function Snackbar({ open, message, action, onClose }: SnackbarProps): react.JSX.Element | null;
+declare function Snackbar({ open, message, action, onClose }: SnackbarProps): react.ReactPortal | null;
 
 interface TableColumn<Row> {
     key: string;
@@ -496,20 +1093,31 @@ declare function MoreHorizontalIcon({ size, strokeWidth, ...rest }: IconProps):
 
 declare const text: Record<"display" | "eyebrow" | "h1" | "h2" | "h3" | "h4" | "body" | "lead" | "small" | "caption" | "code" | "blackletter", string>;
 
+type ModePreference = Mode | "system";
 interface ThemeContextValue {
     schema: SchemaName;
+    /** Modo efectivo ya resuelto (nunca "system"). */
     mode: Mode;
+    /** La preferencia cruda elegida (puede ser "system"). */
+    preference: ModePreference;
     themeClass: string;
     setSchema: (schema: SchemaName) => void;
-    setMode: (mode: Mode) => void;
+    setMode: (mode: ModePreference) => void;
+    /** Alterna binario claro↔oscuro a partir del modo efectivo. */
     toggleMode: () => void;
+    /** Rota por los cuatro modos en orden. */
+    cycleMode: () => void;
 }
 interface ThemeProviderProps {
     children: ReactNode;
     defaultSchema?: SchemaName;
-    defaultMode?: Mode;
+    defaultMode?: ModePreference;
+    /** Clave de localStorage donde se persiste la elección. */
+    storageKey?: string;
+    /** Si es false, no persiste ni rehidrata (útil para previews/tests). */
+    persist?: boolean;
 }
-declare function ThemeProvider({ children, defaultSchema, defaultMode, }: ThemeProviderProps): react.JSX.Element;
+declare function ThemeProvider({ children, defaultSchema, defaultMode, storageKey, persist, }: ThemeProviderProps): react.JSX.Element;
 declare function useTheme(): ThemeContextValue;
 
-export { Accordion, type AccordionItem, type AccordionProps, Alert, type AlertProps, type AlertSeverity, AppBar, type AppBarProps, Avatar, type AvatarProps, type AvatarSize, Badge, type BadgeProps, type BadgeTone, Breadcrumbs, type BreadcrumbsProps, Button, type ButtonProps, type ButtonSize, type ButtonTone, type ButtonVariant, Card, type CardProps, type CardSectionProps, CheckIcon, Checkbox, type CheckboxProps, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, Chip, type ChipProps, type ChipTone, CircleCheckIcon, CircleXIcon, type Crumb, Dialog, type DialogProps, Divider, type DividerProps, EyeIcon, EyeOffIcon, type Icon, IconButton, type IconButtonProps, type IconButtonTone, type IconProps, InfoIcon, ListItem, type ListItemProps, Menu, type MenuItemDef, type MenuProps, MinusIcon, type Mode, MoreHorizontalIcon, Pagination, type PaginationProps, PlusIcon, Progress, type ProgressProps, type ProgressVariant, Radio, type RadioProps, type SchemaName, SearchIcon, Select, type SelectOption, type SelectProps, Slider, type SliderProps, Snackbar, type SnackbarProps, type Step, Stepper, type StepperProps, Switch, type SwitchProps, type TabItem, Table, type TableColumn, type TableProps, Tabs, type TabsProps, TextField, type TextFieldProps, ThemeProvider, type ThemeProviderProps, Tooltip, type TooltipPlacement, type TooltipProps, TriangleAlertIcon, XIcon, modeNames, schemaNames, text, vars as theme, themes, usePrevious, useTheme, useToggle };
+export { Accordion, type AccordionItem, type AccordionProps, Alert, type AlertProps, type AlertSeverity, AppBar, type AppBarProps, Avatar, type AvatarProps, type AvatarSize, Badge, type BadgeProps, type BadgeTone, Breadcrumbs, type BreadcrumbsProps, Button, type ButtonProps, type ButtonSize, type ButtonTone, type ButtonVariant, Card, type CardProps, type CardSectionProps, CheckIcon, Checkbox, type CheckboxProps, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, Chip, type ChipProps, type ChipTone, CircleCheckIcon, CircleXIcon, type ColorTokens, type Crumb, Dialog, type DialogProps, Divider, type DividerProps, EyeIcon, EyeOffIcon, type Icon, IconButton, type IconButtonProps, type IconButtonTone, type IconProps, InfoIcon, ListItem, type ListItemProps, Menu, type MenuItemDef, type MenuProps, MinusIcon, type Mode, type ModePreference, MoreHorizontalIcon, Pagination, type PaginationProps, PlusIcon, Progress, type ProgressProps, type ProgressVariant, Radio, type RadioProps, type SchemaName, SearchIcon, Select, type SelectOption, type SelectProps, Slider, type SliderProps, Snackbar, type SnackbarProps, type Step, Stepper, type StepperProps, Switch, type SwitchProps, type TabItem, Table, type TableColumn, type TableProps, Tabs, type TabsProps, TextField, type TextFieldProps, ThemeProvider, type ThemeProviderProps, Tooltip, type TooltipPlacement, type TooltipProps, TriangleAlertIcon, XIcon, colorVars, modeNames, schemaNames, text, vars as theme, themes, usePrevious, useTheme, useToggle };