@brycks/core-front 0.2.7 → 0.2.9

package/dist/index.d.ts

@@ -1,141 +1,4311 @@
-export { colors, neutrals, primary, accent, success, warning, error, info, spacing, semanticSpacing, fontFamilies, fontWeights, fontSizes, lineHeights, letterSpacings, textStyles, shadows, focusRings, glows, radii, borderWidths, borderStyles, breakpoints, mediaQueries, containers, zIndex, durations, easings, transitions, animations, } from './design-system/tokens';
-export { componentHeights, iconSizes, componentPaddingX, componentPaddingY, componentGap, modalWidths, popoverSizing, controlSizes, switchSizes, sidebarSizes, headerSizes, avatarSizes, iconButtonSizes, quickActionSizes, contentPadding, pageHeaderSpacing, searchInputSizes, statCardSizes, focusRing, focusRingOffset, focusStyles, transition, transitionProperties, duration, easing, keyframes, componentFontSize, componentFontWeight, componentLineHeight, componentTypography, opacity, stateOpacity, scale, } from './design-system/primitives';
-export { ThemeProvider, useTheme, useThemeColors, lightTheme, darkTheme, cssVar, } from './design-system/themes';
-export type { Theme, ThemeColors, ThemeMode, ThemeContextValue, ThemeConfig, } from './design-system/themes';
-export { Box } from './components/layout/Box';
-export { Stack, HStack, VStack } from './components/layout/Stack';
-export { Grid, GridItem } from './components/layout/Grid';
-export { Container } from './components/layout/Container';
-export { Card, CardHeader, CardBody, CardFooter } from './components/layout/Card';
-export { Section } from './components/layout/Section';
-export { Spacer } from './components/layout/Spacer';
-export { Flex, FlexItem } from './components/layout/Flex';
-export { AspectRatio } from './components/layout/AspectRatio';
-export { Image } from './components/media/Image';
-export { Video } from './components/media/Video';
-export { ImageThumbnail } from './components/media/ImageThumbnail';
-export { Text, Code } from './components/typography/Text';
-export { Heading, Display } from './components/typography/Heading';
-export { Button, IconButton } from './components/primitives/Button';
-export { Icon, iconPaths } from './components/primitives/Icon';
-export { Input } from './components/form/Input';
-export { TextField } from './components/form/TextField';
-export { Select } from './components/form/Select';
-export { Checkbox } from './components/form/Checkbox';
-export { Switch } from './components/form/Switch';
-export { Textarea } from './components/form/Textarea';
-export { Radio, RadioGroup } from './components/form/Radio';
-export { Slider } from './components/form/Slider';
-export { DateInput } from './components/form/DateInput';
-export { FileInput } from './components/form/FileInput';
-export { FormField } from './components/form/FormField';
-export { FieldError } from './components/form/FieldError';
-export { Form } from './components/form/Form';
-export { FormLabel } from './components/form/FormLabel';
-export { FormGroup } from './components/form/FormGroup';
-export { DropZone } from './components/form/DropZone';
-export { FormCard } from './components/form/FormCard';
-export { Modal } from './components/feedback/Modal';
-export { Alert } from './components/feedback/Alert';
-export { Tooltip } from './components/feedback/Tooltip';
-export { Toast, ToastProvider, useToast } from './components/feedback/Toast';
-export { Drawer } from './components/feedback/Drawer';
-export { Popover } from './components/feedback/Popover';
-export { Progress } from './components/feedback/Progress';
-export { Tabs, TabList, Tab, TabPanels, TabPanel } from './components/navigation/Tabs';
-export { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from './components/navigation/Accordion';
-export { Dropdown, DropdownItem, DropdownDivider, DropdownLabel } from './components/navigation/Dropdown';
-export { Menu, MenuItem, MenuGroup, MenuDivider } from './components/navigation/Menu';
-export { Pagination } from './components/navigation/Pagination';
-export { Breadcrumb, BreadcrumbItem } from './components/navigation/Breadcrumb';
-export { Table, TableHead, TableBody, TableRow, TableHeader, TableCell, TableFoot, TableCaption } from './components/data/Table';
-export { List, ListItem, ListDivider, ListHeader } from './components/data/List';
-export { InfoItem, InfoList } from './components/data/InfoItem';
-export { Badge } from './components/utility/Badge';
-export { Loader, Spinner } from './components/utility/Loader';
-export { Skeleton, SkeletonText } from './components/utility/Skeleton';
-export { Divider } from './components/utility/Divider';
-export { EmptyState, EmptyStateIcon } from './components/utility/EmptyState';
-export { Portal } from './components/utility/Portal';
-export { FocusTrap } from './components/utility/FocusTrap';
-export { Overlay } from './components/utility/Overlay';
-export { ScreenReaderOnly, SrOnly } from './components/utility/ScreenReaderOnly';
-export { Avatar } from './components/utility/Avatar';
-export { Logo } from './components/utility/Logo';
-export { Header, Nav, Aside, Main, Footer, Article } from './components/layout/Semantic';
-export type { BoxProps, BoxOwnProps } from './components/layout/Box';
-export type { StackProps, StackOwnProps } from './components/layout/Stack';
-export type { GridProps, GridOwnProps, GridItemProps, GridItemOwnProps } from './components/layout/Grid';
-export type { ContainerProps, ContainerOwnProps } from './components/layout/Container';
-export type { CardProps, CardHeaderProps, CardBodyProps, CardFooterProps, CardVariant, CardPadding } from './components/layout/Card';
-export type { SectionProps, SectionSpacing } from './components/layout/Section';
-export type { SpacerProps } from './components/layout/Spacer';
-export type { FlexProps, FlexItemProps } from './components/layout/Flex';
-export type { AspectRatioProps, AspectRatioPreset } from './components/layout/AspectRatio';
-export type { ImageProps, ImageFit, ImageLoading } from './components/media/Image';
-export type { VideoProps, VideoRef, VideoFit, VideoPreload } from './components/media/Video';
-export type { ImageThumbnailProps } from './components/media/ImageThumbnail';
-export type { TextProps, TextOwnProps } from './components/typography/Text';
-export type { HeadingProps, HeadingOwnProps, HeadingLevel } from './components/typography/Heading';
-export type { ButtonProps, ButtonOwnProps, ButtonVariant, ButtonIntent, ButtonSize } from './components/primitives/Button';
-export type { IconProps, IconSize, IconName } from './components/primitives/Icon';
-export type { InputProps, InputSize, InputVariant } from './components/form/Input';
-export type { TextFieldProps } from './components/form/TextField';
-export type { SelectProps, SelectSize, SelectVariant } from './components/form/Select';
-export type { CheckboxProps, CheckboxSize } from './components/form/Checkbox';
-export type { SwitchProps, SwitchSize } from './components/form/Switch';
-export type { TextareaProps, TextareaSize, TextareaVariant } from './components/form/Textarea';
-export type { RadioProps, RadioSize, RadioGroupProps } from './components/form/Radio';
-export type { SliderProps, SliderSize } from './components/form/Slider';
-export type { DateInputProps, DateInputSize, DateInputVariant, DateInputType } from './components/form/DateInput';
-export type { FileInputProps, FileInputSize, FileInputVariant } from './components/form/FileInput';
-export type { FormFieldProps, FormFieldSize } from './components/form/FormField';
-export type { FieldErrorProps, FieldErrorSize } from './components/form/FieldError';
-export type { FormProps, FormGap } from './components/form/Form';
-export type { FormLabelProps, FormLabelSize } from './components/form/FormLabel';
-export type { FormGroupProps, FormGroupGap } from './components/form/FormGroup';
-export type { DropZoneProps } from './components/form/DropZone';
-export type { FormCardProps, FormCardIntent } from './components/form/FormCard';
-export type { ModalProps, ModalSize } from './components/feedback/Modal';
-export type { AlertProps, AlertIntent, AlertVariant } from './components/feedback/Alert';
-export type { TooltipProps, TooltipPlacement } from './components/feedback/Tooltip';
-export type { ToastProps, ToastIntent, ToastPosition, ToastProviderProps } from './components/feedback/Toast';
-export type { DrawerProps, DrawerPlacement, DrawerSize } from './components/feedback/Drawer';
-export type { PopoverProps, PopoverPlacement, PopoverTrigger } from './components/feedback/Popover';
-export type { ProgressProps, ProgressSize, ProgressVariant, ProgressIntent } from './components/feedback/Progress';
-export type { TabsProps, TabListProps, TabProps, TabPanelsProps, TabPanelProps, TabsSize, TabsVariant, TabsOrientation } from './components/navigation/Tabs';
-export type { AccordionProps, AccordionItemProps, AccordionTriggerProps, AccordionContentProps, AccordionVariant } from './components/navigation/Accordion';
-export type { DropdownProps, DropdownItemProps, DropdownDividerProps, DropdownLabelProps, DropdownPlacement } from './components/navigation/Dropdown';
-export type { MenuProps, MenuItemProps, MenuGroupProps, MenuDividerProps, MenuSize } from './components/navigation/Menu';
-export type { PaginationProps, PaginationSize, PaginationVariant } from './components/navigation/Pagination';
-export type { BreadcrumbProps, BreadcrumbItemProps, BreadcrumbSize } from './components/navigation/Breadcrumb';
-export type { TableProps, TableHeadProps, TableBodyProps, TableRowProps, TableHeaderProps, TableCellProps, TableFootProps, TableCaptionProps, TableSize, TableVariant } from './components/data/Table';
-export type { ListProps, ListItemProps, ListDividerProps, ListHeaderProps, ListSize, ListVariant } from './components/data/List';
-export type { InfoItemProps, InfoItemLayout, InfoItemSize, InfoListProps } from './components/data/InfoItem';
-export type { BadgeProps, BadgeVariant, BadgeIntent, BadgeSize } from './components/utility/Badge';
-export type { LoaderProps, LoaderSize, LoaderVariant } from './components/utility/Loader';
-export type { SkeletonProps, SkeletonVariant, SkeletonTextProps } from './components/utility/Skeleton';
-export type { DividerProps, DividerOrientation, DividerVariant } from './components/utility/Divider';
-export type { EmptyStateProps } from './components/utility/EmptyState';
-export type { PortalProps } from './components/utility/Portal';
-export type { FocusTrapProps } from './components/utility/FocusTrap';
-export type { OverlayProps } from './components/utility/Overlay';
-export type { ScreenReaderOnlyProps } from './components/utility/ScreenReaderOnly';
-export type { AvatarProps, AvatarSize } from './components/utility/Avatar';
-export type { LogoProps, LogoSize } from './components/utility/Logo';
-export type { HeaderProps, NavProps, AsideProps, MainProps, FooterProps, ArticleProps } from './components/layout/Semantic';
-export { useMediaQuery, useIsMobile, useIsTablet, useIsDesktop, usePrefersReducedMotion, usePrefersDarkMode, } from './hooks/useMediaQuery';
-export { useDisclosure } from './hooks/useDisclosure';
-export type { UseDisclosureReturn, UseDisclosureOptions } from './hooks/useDisclosure';
-export { useClickOutside } from './hooks/useClickOutside';
-export type { UseClickOutsideOptions } from './hooks/useClickOutside';
-export { useKeyboardNavigation } from './hooks/useKeyboardNavigation';
-export type { UseKeyboardNavigationOptions, UseKeyboardNavigationReturn } from './hooks/useKeyboardNavigation';
-export { useFocusTrap } from './hooks/useFocusTrap';
-export type { UseFocusTrapOptions, UseFocusTrapReturn } from './hooks/useFocusTrap';
-export { useId, useIds } from './hooks/useId';
-export { useControllable } from './hooks/useControllable';
-export type { UseControllableOptions, UseControllableReturn } from './hooks/useControllable';
-export { cx, getSpacingValue, spacingToCss, buildSpacingStyles, generateId, hexToRgba, } from './utils/styles';
-export type { Size, Intent, ComponentState, BaseProps, SpacingProps, FlexProps as FlexLayoutProps, ResponsiveValue, } from './types/common';
-//# sourceMappingURL=index.d.ts.map
+import { ButtonHTMLAttributes } from 'react';
+import { ComponentPropsWithoutRef } from 'react';
+import { ComponentPropsWithRef } from 'react';
+import { ComponentType } from 'react';
+import { CSSProperties } from 'react';
+import { default as default_2 } from 'react';
+import { ElementType } from 'react';
+import { FormHTMLAttributes } from 'react';
+import { ForwardRefExoticComponent } from 'react';
+import { HTMLAttributes } from 'react';
+import { ImgHTMLAttributes } from 'react';
+import { InputHTMLAttributes } from 'react';
+import { JSX } from 'react/jsx-runtime';
+import { LabelHTMLAttributes } from 'react';
+import { LazyExoticComponent } from 'react';
+import { MouseEvent as MouseEvent_2 } from 'react';
+import { ReactElement } from 'react';
+import { ReactNode } from 'react';
+import { RefAttributes } from 'react';
+import { RefObject } from 'react';
+import { SelectHTMLAttributes } from 'react';
+import { SVGAttributes } from 'react';
+import { SyntheticEvent } from 'react';
+import { TdHTMLAttributes } from 'react';
+import { TextareaHTMLAttributes } from 'react';
+import { ThHTMLAttributes } from 'react';
+import { VideoHTMLAttributes } from 'react';
+
+/** Accent colors - warm coral for emphasis */
+export declare const accent: {
+    readonly 50: "#FFF5F3";
+    readonly 100: "#FFE8E3";
+    readonly 200: "#FFD5CC";
+    readonly 300: "#FFB5A6";
+    readonly 400: "#FF8A71";
+    readonly 500: "#F86545";
+    readonly 600: "#E54A28";
+    readonly 700: "#C13A1D";
+    readonly 800: "#9F331C";
+    readonly 900: "#842F1D";
+    readonly 950: "#48140A";
+};
+
+export declare const Accordion: ForwardRefExoticComponent<AccordionProps & RefAttributes<HTMLDivElement>>;
+
+export declare const AccordionContent: ForwardRefExoticComponent<AccordionContentProps & RefAttributes<HTMLDivElement>>;
+
+export declare interface AccordionContentProps extends HTMLAttributes<HTMLDivElement> {
+    /** Custom class name */
+    className?: string;
+}
+
+export declare const AccordionItem: ForwardRefExoticComponent<AccordionItemProps & RefAttributes<HTMLDivElement>>;
+
+export declare interface AccordionItemProps extends HTMLAttributes<HTMLDivElement> {
+    /** Item value (unique identifier) */
+    value: string;
+    /** Whether the item is disabled */
+    disabled?: boolean;
+    /** Custom class name */
+    className?: string;
+}
+
+export declare interface AccordionProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    /** Expanded items (controlled) */
+    value?: string[];
+    /** Default expanded items (uncontrolled) */
+    defaultValue?: string[];
+    /** Callback when items change */
+    onChange?: (value: string[]) => void;
+    /** Allow multiple items to be expanded */
+    allowMultiple?: boolean;
+    /** Accordion variant */
+    variant?: AccordionVariant;
+    /** Custom class name */
+    className?: string;
+    /** Test ID */
+    testId?: string;
+}
+
+export declare const AccordionTrigger: ForwardRefExoticComponent<AccordionTriggerProps & RefAttributes<HTMLButtonElement>>;
+
+export declare interface AccordionTriggerProps extends HTMLAttributes<HTMLButtonElement> {
+    /** Icon to show (replaces default chevron) */
+    icon?: ReactNode;
+    /** Custom class name */
+    className?: string;
+}
+
+export declare type AccordionVariant = 'default' | 'bordered' | 'separated';
+
+export declare const Alert: default_2.ForwardRefExoticComponent<AlertProps & default_2.RefAttributes<HTMLDivElement>>;
+
+export declare type AlertIntent = 'info' | 'success' | 'warning' | 'error';
+
+export declare interface AlertProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** Visual intent/status */
+    intent?: AlertIntent;
+    /** Visual variant */
+    variant?: AlertVariant;
+    /** Alert title */
+    title?: ReactNode;
+    /** Custom icon */
+    icon?: ReactNode;
+    /** Whether to show default icon */
+    showIcon?: boolean;
+    /** Action element (button, link) */
+    action?: ReactNode;
+    /** Whether alert can be dismissed */
+    isDismissible?: boolean;
+    /** Callback when dismissed */
+    onDismiss?: () => void;
+    /** Custom class name */
+    className?: string;
+    /** Test ID */
+    testId?: string;
+    /** Alert content */
+    children?: ReactNode;
+}
+
+export declare type AlertVariant = 'subtle' | 'solid' | 'outline';
+
+/** Animation keyframe names for CSS animations */
+export declare const animations: {
+    /** Fade in */
+    readonly fadeIn: {
+        readonly from: {
+            readonly opacity: 0;
+        };
+        readonly to: {
+            readonly opacity: 1;
+        };
+    };
+    /** Fade out */
+    readonly fadeOut: {
+        readonly from: {
+            readonly opacity: 1;
+        };
+        readonly to: {
+            readonly opacity: 0;
+        };
+    };
+    /** Scale up */
+    readonly scaleIn: {
+        readonly from: {
+            readonly opacity: 0;
+            readonly transform: "scale(0.95)";
+        };
+        readonly to: {
+            readonly opacity: 1;
+            readonly transform: "scale(1)";
+        };
+    };
+    /** Scale down */
+    readonly scaleOut: {
+        readonly from: {
+            readonly opacity: 1;
+            readonly transform: "scale(1)";
+        };
+        readonly to: {
+            readonly opacity: 0;
+            readonly transform: "scale(0.95)";
+        };
+    };
+    /** Slide up */
+    readonly slideUp: {
+        readonly from: {
+            readonly opacity: 0;
+            readonly transform: "translateY(10px)";
+        };
+        readonly to: {
+            readonly opacity: 1;
+            readonly transform: "translateY(0)";
+        };
+    };
+    /** Slide down */
+    readonly slideDown: {
+        readonly from: {
+            readonly opacity: 0;
+            readonly transform: "translateY(-10px)";
+        };
+        readonly to: {
+            readonly opacity: 1;
+            readonly transform: "translateY(0)";
+        };
+    };
+    /** Slide left */
+    readonly slideLeft: {
+        readonly from: {
+            readonly opacity: 0;
+            readonly transform: "translateX(10px)";
+        };
+        readonly to: {
+            readonly opacity: 1;
+            readonly transform: "translateX(0)";
+        };
+    };
+    /** Slide right */
+    readonly slideRight: {
+        readonly from: {
+            readonly opacity: 0;
+            readonly transform: "translateX(-10px)";
+        };
+        readonly to: {
+            readonly opacity: 1;
+            readonly transform: "translateX(0)";
+        };
+    };
+    /** Spin */
+    readonly spin: {
+        readonly from: {
+            readonly transform: "rotate(0deg)";
+        };
+        readonly to: {
+            readonly transform: "rotate(360deg)";
+        };
+    };
+    /** Pulse */
+    readonly pulse: {
+        readonly '0%': {
+            readonly opacity: 1;
+        };
+        readonly '50%': {
+            readonly opacity: 0.5;
+        };
+        readonly '100%': {
+            readonly opacity: 1;
+        };
+    };
+    /** Shake - for errors */
+    readonly shake: {
+        readonly '0%, 100%': {
+            readonly transform: "translateX(0)";
+        };
+        readonly '10%, 30%, 50%, 70%, 90%': {
+            readonly transform: "translateX(-4px)";
+        };
+        readonly '20%, 40%, 60%, 80%': {
+            readonly transform: "translateX(4px)";
+        };
+    };
+};
+
+export declare const Article: ForwardRefExoticComponent<SemanticProps & RefAttributes<HTMLElement>>;
+
+export declare type ArticleProps = SemanticProps;
+
+export declare const Aside: ForwardRefExoticComponent<AsideProps & RefAttributes<HTMLElement>>;
+
+export declare interface AsideProps extends SemanticProps {
+    'aria-label'?: string;
+}
+
+export declare const AspectRatio: ForwardRefExoticComponent<AspectRatioProps & RefAttributes<HTMLDivElement>>;
+
+/** Common aspect ratio presets */
+export declare type AspectRatioPreset = '1:1' | '4:3' | '3:2' | '16:9' | '21:9' | '2:3' | '3:4' | '9:16';
+
+export declare interface AspectRatioProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Aspect ratio as a preset string or custom number.
+     * Number represents width/height (e.g., 16/9 = 1.777...)
+     * @default '16:9'
+     */
+    ratio?: AspectRatioPreset | number;
+    /** Content to render inside the ratio container */
+    children?: ReactNode;
+    /** Custom class name */
+    className?: string;
+    /** Test ID */
+    testId?: string;
+}
+
+export declare const Avatar: ForwardRefExoticComponent<AvatarProps & RefAttributes<HTMLButtonElement | HTMLDivElement>>;
+
+export declare interface AvatarProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children'> {
+    /** Size of the avatar */
+    size?: AvatarSize;
+    /** Name to display initials from */
+    name?: string;
+    /** Image source URL */
+    src?: string;
+    /** Alt text for the image */
+    alt?: string;
+    /** Custom content to render inside */
+    children?: ReactNode;
+    /** Whether the avatar is interactive (button) or static (div) */
+    interactive?: boolean;
+    /** Custom class name */
+    className?: string;
+    /** Test ID */
+    testId?: string;
+}
+
+export declare type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+/**
+ * Avatar dimensions
+ */
+export declare const avatarSizes: {
+    /** 24px - Extra small */
+    readonly xs: number;
+    /** 32px - Small */
+    readonly sm: number;
+    /** 36px - Medium (default) */
+    readonly md: 36;
+    /** 40px - Large */
+    readonly lg: number;
+    /** 48px - Extra large */
+    readonly xl: number;
+    /** 64px - 2x large (for hero sections) */
+    readonly '2xl': number;
+};
+
+export declare const Badge: ForwardRefExoticComponent<BadgeProps & RefAttributes<HTMLSpanElement>>;
+
+export declare type BadgeIntent = 'neutral' | 'primary' | 'accent' | 'success' | 'warning' | 'error' | 'info';
+
+export declare interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+    /** Visual variant */
+    variant?: BadgeVariant;
+    /** Color intent */
+    intent?: BadgeIntent;
+    /** Size */
+    size?: BadgeSize;
+    /** Custom class name */
+    className?: string;
+    /** Test ID */
+    testId?: string;
+    /** Badge content */
+    children?: ReactNode;
+}
+
+export declare type BadgeSize = 'sm' | 'md' | 'lg';
+
+export declare type BadgeVariant = 'solid' | 'subtle' | 'outline';
+
+/** Props that can be spread to elements */
+export declare interface BaseProps {
+    /** Custom class name */
+    className?: string;
+    /** Custom inline styles */
+    style?: CSSProperties;
+    /** Test ID for testing */
+    testId?: string;
+    /** Children */
+    children?: ReactNode;
+}
+
+/** Semantic border styles */
+export declare const borderStyles: {
+    /** Subtle divider */
+    readonly subtle: {
+        readonly width: 1;
+        readonly style: "solid";
+        readonly color: "rgba(0, 0, 0, 0.06)";
+    };
+    /** Default border */
+    readonly default: {
+        readonly width: 1;
+        readonly style: "solid";
+        readonly color: "rgba(0, 0, 0, 0.1)";
+    };
+    /** Strong border - more visible */
+    readonly strong: {
+        readonly width: 1;
+        readonly style: "solid";
+        readonly color: "rgba(0, 0, 0, 0.15)";
+    };
+    /** Focus border */
+    readonly focus: {
+        readonly width: 2;
+        readonly style: "solid";
+        readonly color: "rgba(85, 120, 244, 0.5)";
+    };
+    /** Error border */
+    readonly error: {
+        readonly width: 1;
+        readonly style: "solid";
+        readonly color: "rgba(239, 68, 68, 0.5)";
+    };
+    /** Success border */
+    readonly success: {
+        readonly width: 1;
+        readonly style: "solid";
+        readonly color: "rgba(16, 185, 129, 0.5)";
+    };
+};
+
+/** Border width scale */
+export declare const borderWidths: {
+    /** No border */
+    readonly 0: 0;
+    /** 1px - hairline border */
+    readonly DEFAULT: 1;
+    /** 2px - medium border */
+    readonly 2: 2;
+    /** 3px - thick border */
+    readonly 3: 3;
+    /** 4px - heavy border */
+    readonly 4: 4;
+};
+
+export declare const Box: BoxComponent;
+
+declare interface BoxComponent {
+    <E extends ElementType = 'div'>(props: BoxProps<E> & {
+        ref?: ComponentPropsWithRef<E>['ref'];
+    }): default_2.JSX.Element | null;
+    displayName?: string;
+}
+
+export declare interface BoxOwnProps extends SpacingProps {
+    /** The element type to render */
+    as?: ElementType;
+    /** Custom class name */
+    className?: string;
+    /** Custom inline styles */
+    style?: CSSProperties;
+    /** Display property */
+    display?: CSSProperties['display'];
+    /** Position property */
+    position?: CSSProperties['position'];
+    /** Width */
+    width?: CSSProperties['width'];
+    /** Height */
+    height?: CSSProperties['height'];
+    /** Min width */
+    minWidth?: CSSProperties['minWidth'];
+    /** Max width */
+    maxWidth?: CSSProperties['maxWidth'];
+    /** Min height */
+    minHeight?: CSSProperties['minHeight'];
+    /** Max height */
+    maxHeight?: CSSProperties['maxHeight'];
+    /** Overflow */
+    overflow?: CSSProperties['overflow'];
+    /** Background color (CSS variable or direct value) */
+    bg?: string;
+    /** Border radius */
+    radius?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full';
+    /** Box shadow */
+    shadow?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+    /** Test ID */
+    testId?: string;
+}
+
+export declare type BoxProps<E extends ElementType = 'div'> = BoxOwnProps & Omit<ComponentPropsWithoutRef<E>, keyof BoxOwnProps>;
+
+export declare const Breadcrumb: ForwardRefExoticComponent<BreadcrumbProps & RefAttributes<HTMLElement>>;
+
+export declare const BreadcrumbItem: ForwardRefExoticComponent<BreadcrumbItemProps & RefAttributes<HTMLElement>>;
+
+export declare interface BreadcrumbItemProps extends HTMLAttributes<HTMLElement> {
+    /** Render as link or custom element */
+    as?: ElementType;
+    /** Link href (when as="a") */
+    href?: string;
+    /** Icon before the label */
+    icon?: ReactNode;
+    /** Whether this is the current page (auto-set by parent) */
+    isCurrentPage?: boolean;
+    /** Size (auto-set by parent) */
+    size?: BreadcrumbSize;
+    /** Custom class name */
+    className?: string;
+}
+
+export declare interface BreadcrumbProps extends HTMLAttributes<HTMLElement> {
+    /** Custom separator between items */
+    separator?: ReactNode;
+    /** Breadcrumb size */
+    size?: BreadcrumbSize;
+    /** Maximum items to show (rest collapsed) */
+    maxItems?: number;
+    /** Custom class name */
+    className?: string;
+    /** Test ID */
+    testId?: string;
+}
+
+export declare type BreadcrumbSize = 'sm' | 'md' | 'lg';
+
+/** Breakpoint values in pixels */
+export declare const breakpoints: {
+    /** Mobile portrait - 320px+ */
+    readonly xs: 320;
+    /** Mobile landscape - 480px+ */
+    readonly sm: 480;
+    /** Tablet portrait - 640px+ */
+    readonly md: 640;
+    /** Tablet landscape - 768px+ */
+    readonly lg: 768;
+    /** Desktop - 1024px+ */
+    readonly xl: 1024;
+    /** Large desktop - 1280px+ */
+    readonly '2xl': 1280;
+    /** Extra large screens - 1536px+ */
+    readonly '3xl': 1536;
+    /** Ultra wide - 1920px+ */
+    readonly '4xl': 1920;
+};
+
+/** Build spacing styles from props */
+export declare function buildSpacingStyles(props: SpacingProps): CSSProperties;
+
+export declare const Button: ButtonComponent;
+
+declare interface ButtonComponent {
+    <E extends ElementType = 'button'>(props: ButtonProps<E> & {
+        ref?: ComponentPropsWithRef<E>['ref'];
+    }): default_2.JSX.Element | null;
+    displayName?: string;
+}
+
+/** Button color intents */
+export declare type ButtonIntent = 'primary' | 'accent' | 'neutral' | 'success' | 'warning' | 'error';
+
+export declare interface ButtonOwnProps {
+    /** Visual style variant */
+    variant?: ButtonVariant;
+    /** Color intent */
+    intent?: ButtonIntent;
+    /** Size */
+    size?: ButtonSize;
+    /** Full width button */
+    fullWidth?: boolean;
+    /** Loading state */
+    isLoading?: boolean;
+    /** Disabled state */
+    isDisabled?: boolean;
+    /** Left icon/element */
+    leftIcon?: ReactNode;
+    /** Right icon/element */
+    rightIcon?: ReactNode;
+    /** Icon-only button (square, no text) */
+    isIconOnly?: boolean;
+    /** Custom class name */
+    className?: string;
+    /** Children */
+    children?: ReactNode;
+    /** Test ID */
+    testId?: string;
+}
+
+export declare type ButtonProps<E extends ElementType = 'button'> = ButtonOwnProps & Omit<ComponentPropsWithoutRef<E>, keyof ButtonOwnProps> & {
+    as?: E;
+};
+
+/** Button sizes */
+export declare type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+/** Button visual variants */
+export declare type ButtonVariant = 'solid' | 'outline' | 'ghost' | 'soft' | 'link';
+
+export declare const Card: ForwardRefExoticComponent<CardProps & RefAttributes<HTMLDivElement>>;
+
+export declare const CardBody: ForwardRefExoticComponent<CardBodyProps & RefAttributes<HTMLDivElement>>;
+
+export declare interface CardBodyProps extends HTMLAttributes<HTMLDivElement> {
+    /** Custom class name */
+    className?: string;
+}
+
+export declare const CardFooter: ForwardRefExoticComponent<CardFooterProps & RefAttributes<HTMLDivElement>>;
+
+export declare interface CardFooterProps extends HTMLAttributes<HTMLDivElement> {
+    /** Whether to show a divider above the footer */
+    divider?: boolean;
+    /** Footer alignment */
+    align?: 'left' | 'center' | 'right' | 'between';
+    /** Custom class name */
+    className?: string;
+}
+
+export declare const CardHeader: ForwardRefExoticComponent<CardHeaderProps & RefAttributes<HTMLDivElement>>;
+
+export declare interface CardHeaderProps extends HTMLAttributes<HTMLDivElement> {
+    /** Whether to show a divider below the header */
+    divider?: boolean;
+    /** Custom class name */
+    className?: string;
+}
+
+export declare type CardPadding = 'none' | 'sm' | 'md' | 'lg' | 'xl';
+
+export declare interface CardProps extends HTMLAttributes<HTMLDivElement> {
+    /** Card variant */
+    variant?: CardVariant;
+    /** Card padding */
+    padding?: CardPadding;
+    /** Whether the card is interactive (adds hover effect) */
+    interactive?: boolean;
+    /** Whether the card is selected */
+    selected?: boolean;
+    /** Custom class name */
+    className?: string;
+    /** Test ID */
+    testId?: string;
+}
+
+export declare type CardVariant = 'elevated' | 'outline' | 'filled' | 'ghost';
+
+export declare const Checkbox: ForwardRefExoticComponent<CheckboxProps & RefAttributes<HTMLInputElement>>;
+
+export declare interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> {
+    /** Checkbox size */
+    size?: CheckboxSize;
+    /** Label text */
+    label?: ReactNode;
+    /** Description below label */
+    description?: ReactNode;
+    /** Error state */
+    isInvalid?: boolean;
+    /** Indeterminate state */
+    isIndeterminate?: boolean;
+    /** Custom class name */
+    className?: string;
+    /** Test ID */
+    testId?: string;
+}
+
+export declare type CheckboxSize = 'sm' | 'md' | 'lg';
+
+export declare const Code: TextComponent & {
+    displayName: string;
+};
+
+/** Complete color palette export */
+export declare const colors: {
+    readonly neutrals: {
+        readonly white: "#FFFFFF";
+        readonly gray50: "#FAFAFA";
+        readonly gray100: "#F5F5F7";
+        readonly gray200: "#E8E8ED";
+        readonly gray300: "#D2D2D7";
+        readonly gray400: "#AEAEB2";
+        readonly gray500: "#8E8E93";
+        readonly gray600: "#636366";
+        readonly gray700: "#48484A";
+        readonly gray800: "#3A3A3C";
+        readonly gray900: "#2C2C2E";
+        readonly gray950: "#1D1D1F";
+        readonly black: "#000000";
+    };
+    readonly primary: {
+        readonly 50: "#EEF4FF";
+        readonly 100: "#E0EBFF";
+        readonly 200: "#C7DAFF";
+        readonly 300: "#A4C1FF";
+        readonly 400: "#7A9FFF";
+        readonly 500: "#5578F4";
+        readonly 600: "#3B5CE9";
+        readonly 700: "#2D47D6";
+        readonly 800: "#2A3CAD";
+        readonly 900: "#283889";
+        readonly 950: "#1A2352";
+    };
+    readonly accent: {
+        readonly 50: "#FFF5F3";
+        readonly 100: "#FFE8E3";
+        readonly 200: "#FFD5CC";
+        readonly 300: "#FFB5A6";
+        readonly 400: "#FF8A71";
+        readonly 500: "#F86545";
+        readonly 600: "#E54A28";
+        readonly 700: "#C13A1D";
+        readonly 800: "#9F331C";
+        readonly 900: "#842F1D";
+        readonly 950: "#48140A";
+    };
+    readonly success: {
+        readonly 50: "#ECFDF5";
+        readonly 100: "#D1FAE5";
+        readonly 200: "#A7F3D0";
+        readonly 300: "#6EE7B7";
+        readonly 400: "#34D399";
+        readonly 500: "#10B981";
+        readonly 600: "#059669";
+        readonly 700: "#047857";
+        readonly 800: "#065F46";
+        readonly 900: "#064E3B";
+        readonly 950: "#022C22";
+    };
+    readonly warning: {
+        readonly 50: "#FFFBEB";
+        readonly 100: "#FEF3C7";
+        readonly 200: "#FDE68A";
+        readonly 300: "#FCD34D";
+        readonly 400: "#FBBF24";
+        readonly 500: "#F59E0B";
+        readonly 600: "#D97706";
+        readonly 700: "#B45309";
+        readonly 800: "#92400E";
+        readonly 900: "#78350F";
+        readonly 950: "#451A03";
+    };
+    readonly error: {
+        readonly 50: "#FEF2F2";
+        readonly 100: "#FEE2E2";
+        readonly 200: "#FECACA";
+        readonly 300: "#FCA5A5";
+        readonly 400: "#F87171";
+        readonly 500: "#EF4444";
+        readonly 600: "#DC2626";
+        readonly 700: "#B91C1C";
+        readonly 800: "#991B1B";
+        readonly 900: "#7F1D1D";
+        readonly 950: "#450A0A";
+    };
+    readonly info: {
+        readonly 50: "#ECFEFF";
+        readonly 100: "#CFFAFE";
+        readonly 200: "#A5F3FC";
+        readonly 300: "#67E8F9";
+        readonly 400: "#22D3EE";
+        readonly 500: "#06B6D4";
+        readonly 600: "#0891B2";
+        readonly 700: "#0E7490";
+        readonly 800: "#155E75";
+        readonly 900: "#164E63";
+        readonly 950: "#083344";
+    };
+};
+
+/**
+ * Font sizes mapped to component size variants.
+ * Ensures consistent text sizing across all components.
+ */
+export declare const componentFontSize: {
+    /** 11px - Extra small labels, badges */
+    readonly xs: 11;
+    /** 12px - Small text, captions, helper text */
+    readonly sm: 12;
+    /** 14px - Default component text */
+    readonly md: 14;
+    /** 15px - Large component text */
+    readonly lg: 15;
+    /** 16px - Extra large component text */
+    readonly xl: 16;
+};
+
+/**
+ * Font weights for component states.
+ */
+export declare const componentFontWeight: {
+    /** 400 - Regular body text */
+    readonly regular: 400;
+    /** 500 - Labels, emphasized text */
+    readonly medium: 500;
+    /** 600 - Headings, titles */
+    readonly semibold: 600;
+    /** 700 - Strong emphasis */
+    readonly bold: 700;
+};
+
+/**
+ * Standard gap values for component internals.
+ */
+export declare const componentGap: {
+    /** 4px - Tight spacing between icons and text */
+    readonly xs: 4;
+    /** 6px */
+    readonly sm: number;
+    /** 8px - Default internal spacing */
+    readonly md: number;
+    /** 10px */
+    readonly lg: number;
+    /** 12px - Spacious internal spacing */
+    readonly xl: number;
+};
+
+/**
+ * Standard component heights for interactive elements.
+ * Based on touch-target guidelines (minimum 44px for accessibility).
+ */
+export declare const componentHeights: {
+    /** 24px - Micro elements (tags, small badges) */
+    readonly xs: number;
+    /** 32px - Small inputs, compact buttons */
+    readonly sm: number;
+    /** 40px - Default size for most interactive elements */
+    readonly md: number;
+    /** 48px - Large inputs, prominent buttons */
+    readonly lg: number;
+    /** 56px - Extra large, hero CTAs */
+    readonly xl: number;
+};
+
+/**
+ * Line heights for component text.
+ */
+export declare const componentLineHeight: {
+    /** 1 - Single line, badges */
+    readonly none: 1;
+    /** 1.25 - Tight, headings */
+    readonly tight: 1.25;
+    /** 1.4 - Slightly relaxed, labels */
+    readonly snug: 1.4;
+    /** 1.5 - Default body text */
+    readonly normal: 1.5;
+    /** 1.6 - Relaxed, helper text */
+    readonly relaxed: 1.6;
+};
+
+/**
+ * Standard padding for interactive components (horizontal).
+ * Follows a progressive scale for visual balance.
+ */
+export declare const componentPaddingX: {
+    /** 8px */
+    readonly xs: number;
+    /** 12px */
+    readonly sm: number;
+    /** 16px */
+    readonly md: number;
+    /** 20px */
+    readonly lg: number;
+    /** 24px */
+    readonly xl: number;
+};
+
+/**
+ * Standard padding for interactive components (vertical).
+ */
+export declare const componentPaddingY: {
+    /** 4px */
+    readonly xs: 4;
+    /** 6px */
+    readonly sm: number;
+    /** 8px */
+    readonly md: number;
+    /** 10px */
+    readonly lg: number;
+    /** 12px */
+    readonly xl: number;
+};
+
+/** Component state */
+export declare interface ComponentState {
+    isHovered?: boolean;
+    isFocused?: boolean;
+    isPressed?: boolean;
+    isDisabled?: boolean;
+    isLoading?: boolean;
+}
+
+/**
+ * Pre-composed typography styles for common component elements.
+ */
+export declare const componentTypography: {
+    /** Form field labels */
+    readonly label: {
+        readonly fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif";
+        readonly fontSize: 12;
+        readonly fontWeight: 500;
+        readonly lineHeight: 1.5;
+    };
+    /** Helper/hint text below inputs */
+    readonly helperText: {
+        readonly fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif";
+        readonly fontSize: 11;
+        readonly fontWeight: 400;
+        readonly lineHeight: 1.6;
+    };
+    /** Error messages */
+    readonly errorText: {
+        readonly fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif";
+        readonly fontSize: 11;
+        readonly fontWeight: 400;
+        readonly lineHeight: 1.6;
+    };
+    /** Button text - small */
+    readonly buttonSm: {
+        readonly fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif";
+        readonly fontSize: 12;
+        readonly fontWeight: 500;
+        readonly lineHeight: 1;
+    };
+    /** Button text - medium (default) */
+    readonly buttonMd: {
+        readonly fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif";
+        readonly fontSize: 14;
+        readonly fontWeight: 500;
+        readonly lineHeight: 1;
+    };
+    /** Button text - large */
+    readonly buttonLg: {
+        readonly fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif";
+        readonly fontSize: 15;
+        readonly fontWeight: 500;
+        readonly lineHeight: 1;
+    };
+    /** Badge text */
+    readonly badge: {
+        readonly fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif";
+        readonly fontSize: 11;
+        readonly fontWeight: 500;
+        readonly lineHeight: 1;
+    };
+    /** Tooltip text */
+    readonly tooltip: {
+        readonly fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif";
+        readonly fontSize: 11;
+        readonly fontWeight: 500;
+        readonly lineHeight: 1.4;
+    };
+    /** Alert title */
+    readonly alertTitle: {
+        readonly fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif";
+        readonly fontSize: 14;
+        readonly fontWeight: 600;
+        readonly lineHeight: 1.25;
+    };
+    /** Alert description */
+    readonly alertDescription: {
+        readonly fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif";
+        readonly fontSize: 14;
+        readonly fontWeight: 400;
+        readonly lineHeight: 1.5;
+    };
+    /** Modal title */
+    readonly modalTitle: {
+        readonly fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif";
+        readonly fontSize: 18;
+        readonly fontWeight: 600;
+        readonly lineHeight: 1.25;
+    };
+    /** Modal description */
+    readonly modalDescription: {
+        readonly fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif";
+        readonly fontSize: 14;
+        readonly fontWeight: 400;
+        readonly lineHeight: 1.5;
+    };
+    /** Empty state title */
+    readonly emptyStateTitle: {
+        readonly fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif";
+        readonly fontSize: 18;
+        readonly fontWeight: 600;
+        readonly lineHeight: 1.25;
+    };
+    /** Empty state description */
+    readonly emptyStateDescription: {
+        readonly fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif";
+        readonly fontSize: 14;
+        readonly fontWeight: 400;
+        readonly lineHeight: 1.5;
+    };
+    /** Divider label */
+    readonly dividerLabel: {
+        readonly fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif";
+        readonly fontSize: 11;
+        readonly fontWeight: 500;
+        readonly lineHeight: 1.5;
+    };
+};
+
+export declare const Container: ContainerComponent;
+
+declare interface ContainerComponent {
+    <E extends ElementType = 'div'>(props: ContainerProps<E> & {
+        ref?: ComponentPropsWithRef<E>['ref'];
+    }): default_2.JSX.Element | null;
+    displayName?: string;
+}
+
+export declare interface ContainerOwnProps extends SpacingProps {
+    /** The element type to render */
+    as?: ElementType;
+    /** Custom class name */
+    className?: string;
+    /** Custom inline styles */
+    style?: CSSProperties;
+    /** Container size / max-width */
+    size?: keyof typeof containers;
+    /** Whether to center the container */
+    centered?: boolean;
+    /** Whether to add default horizontal padding */
+    padded?: boolean;
+    /** Children */
+    children?: ReactNode;
+    /** Test ID */
+    testId?: string;
+}
+
+export declare type ContainerProps<E extends ElementType = 'div'> = ContainerOwnProps & Omit<ComponentPropsWithoutRef<E>, keyof ContainerOwnProps>;
+
+/** Container max-widths aligned with breakpoints */
+export declare const containers: {
+    readonly xs: 320;
+    readonly sm: 480;
+    readonly md: 640;
+    readonly lg: 768;
+    readonly xl: 1024;
+    readonly '2xl': 1280;
+    readonly '3xl': 1440;
+    readonly full: "100%";
+};
+
+/**
+ * Content area padding
+ */
+export declare const contentPadding: {
+    /** Mobile padding: 16px */
+    readonly mobile: number;
+    /** Tablet padding: 20px */
+    readonly tablet: number;
+    /** Desktop padding: 24px */
+    readonly desktop: number;
+    /** Large screen padding: 32px */
+    readonly wide: number;
+};
+
+/**
+ * Checkbox and radio sizes.
+ */
+export declare const controlSizes: {
+    readonly sm: {
+        readonly box: 16;
+        readonly icon: 10;
+    };
+    readonly md: {
+        readonly box: 18;
+        readonly icon: 12;
+    };
+    readonly lg: {
+        readonly box: 22;
+        readonly icon: 14;
+    };
+};
+
+/**
+ * Creates a lazy component that loads on interaction (hover/focus).
+ * Useful for components that are likely to be used soon.
+ *
+ * @example
+ * ```tsx
+ * const { Component: Modal, triggerProps } = createInteractionLazyComponent(
+ *   () => import('./Modal')
+ * )
+ *
+ * // The trigger will preload Modal on hover/focus
+ * <button {...triggerProps}>Open Modal</button>
+ * ```
+ */
+export declare function createInteractionLazyComponent<T extends ComponentType<unknown>>(importFn: () => Promise<{
+    default: T;
+}>): {
+    Component: LazyExoticComponent<T>;
+    triggerProps: {
+        onMouseEnter: () => void;
+        onFocus: () => void;
+    };
+    preload: () => Promise<{
+        default: T;
+    }>;
+};
+
+/**
+ * Creates a lazy-loaded component with preloading capability.
+ *
+ * @example
+ * ```tsx
+ * const Modal = createLazyComponent(() => import('./Modal'))
+ *
+ * // Preload before showing
+ * Modal.preload()
+ * ```
+ */
+export declare function createLazyComponent<T extends ComponentType<unknown>>(importFn: () => Promise<{
+    default: T;
+}>): LazyExoticComponent<T> & {
+    preload: () => Promise<{
+        default: T;
+    }>;
+};
+
+/** CSS variable names mapped to theme paths */
+export declare const cssVar: {
+    readonly bgApp: "var(--brycks-background-app)";
+    readonly bgSubtle: "var(--brycks-background-subtle)";
+    readonly bgMuted: "var(--brycks-background-muted)";
+    readonly bgElevated: "var(--brycks-background-elevated)";
+    readonly bgOverlay: "var(--brycks-background-overlay)";
+    readonly bgInverse: "var(--brycks-background-inverse)";
+    readonly fgDefault: "var(--brycks-foreground-default)";
+    readonly fgMuted: "var(--brycks-foreground-muted)";
+    readonly fgSubtle: "var(--brycks-foreground-subtle)";
+    readonly fgDisabled: "var(--brycks-foreground-disabled)";
+    readonly fgInverse: "var(--brycks-foreground-inverse)";
+    readonly fgLink: "var(--brycks-foreground-link)";
+    readonly borderDefault: "var(--brycks-border-default)";
+    readonly borderMuted: "var(--brycks-border-muted)";
+    readonly borderStrong: "var(--brycks-border-strong)";
+    readonly borderFocus: "var(--brycks-border-focus)";
+    readonly primaryDefault: "var(--brycks-primary-default)";
+    readonly primaryHover: "var(--brycks-primary-hover)";
+    readonly primaryActive: "var(--brycks-primary-active)";
+    readonly primaryMuted: "var(--brycks-primary-muted)";
+    readonly primaryForeground: "var(--brycks-primary-foreground)";
+    readonly accentDefault: "var(--brycks-accent-default)";
+    readonly accentHover: "var(--brycks-accent-hover)";
+    readonly accentActive: "var(--brycks-accent-active)";
+    readonly accentMuted: "var(--brycks-accent-muted)";
+    readonly accentForeground: "var(--brycks-accent-foreground)";
+    readonly successDefault: "var(--brycks-success-default)";
+    readonly successHover: "var(--brycks-success-hover)";
+    readonly successMuted: "var(--brycks-success-muted)";
+    readonly successForeground: "var(--brycks-success-foreground)";
+    readonly warningDefault: "var(--brycks-warning-default)";
+    readonly warningHover: "var(--brycks-warning-hover)";
+    readonly warningMuted: "var(--brycks-warning-muted)";
+    readonly warningForeground: "var(--brycks-warning-foreground)";
+    readonly errorDefault: "var(--brycks-error-default)";
+    readonly errorHover: "var(--brycks-error-hover)";
+    readonly errorMuted: "var(--brycks-error-muted)";
+    readonly errorForeground: "var(--brycks-error-foreground)";
+    readonly infoDefault: "var(--brycks-info-default)";
+    readonly infoHover: "var(--brycks-info-hover)";
+    readonly infoMuted: "var(--brycks-info-muted)";
+    readonly infoForeground: "var(--brycks-info-foreground)";
+};
+
+/** Merge class names, filtering out falsy values */
+export declare function cx(...classes: (string | boolean | undefined | null)[]): string;
+
+export declare const darkTheme: Theme;
+
+export declare const DateInput: ForwardRefExoticComponent<DateInputProps & RefAttributes<HTMLInputElement>>;
+
+export declare interface DateInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> {
+    /** Input size */
+    size?: DateInputSize;
+    /** Input variant */
+    variant?: DateInputVariant;
+    /** Type of date input */
+    type?: DateInputType;
+    /** Input label */
+    label?: ReactNode;
+    /** Helper text below input */
+    helperText?: ReactNode;
+    /** Error message */
+    error?: ReactNode;
+    /** Whether the input is invalid */
+    isInvalid?: boolean;
+    /** Icon on the left side */
+    leftIcon?: ReactNode;
+    /** Custom class name */
+    className?: string;
+    /** Test ID */
+    testId?: string;
+}
+
+export declare type DateInputSize = 'sm' | 'md' | 'lg';
+
+export declare type DateInputType = 'date' | 'datetime-local' | 'time' | 'month' | 'week';
+
+export declare type DateInputVariant = 'outline' | 'filled' | 'flushed';
+
+export declare const Display: HeadingComponent;
+
+export declare const Divider: ForwardRefExoticComponent<DividerProps & RefAttributes<HTMLDivElement>>;
+
+export declare type DividerOrientation = 'horizontal' | 'vertical';
+
+export declare interface DividerProps extends HTMLAttributes<HTMLDivElement> {
+    /** Divider orientation */
+    orientation?: DividerOrientation;
+    /** Visual variant */
+    variant?: DividerVariant;
+    /** Label text in the middle */
+    label?: ReactNode;
+    /** Label position */
+    labelPosition?: 'start' | 'center' | 'end';
+    /** Custom class name */
+    className?: string;
+    /** Test ID */
+    testId?: string;
+}
+
+export declare type DividerVariant = 'solid' | 'dashed' | 'dotted';
+
+export declare const Drawer: ForwardRefExoticComponent<DrawerProps & RefAttributes<HTMLDivElement>>;
+
+export declare type DrawerPlacement = 'left' | 'right' | 'top' | 'bottom';
+
+export declare interface DrawerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** Whether the drawer is open */
+    isOpen: boolean;
+    /** Callback when drawer should close */
+    onClose: () => void;
+    /** Drawer placement */
+    placement?: DrawerPlacement;
+    /** Drawer size */
+    size?: DrawerSize;
+    /** Drawer title */
+    title?: ReactNode;
+    /** Whether to close on overlay click */
+    closeOnOverlayClick?: boolean;
+    /** Whether to close on escape key */
+    closeOnEscape?: boolean;
+    /** Whether to show close button */
+    showCloseButton?: boolean;
+    /** Whether to show overlay */
+    showOverlay?: boolean;
+    /** Custom class name */
+    className?: string;
+    /** Test ID */
+    testId?: string;
+}
+
+export declare type DrawerSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
+
+export declare const Dropdown: ForwardRefExoticComponent<DropdownProps & RefAttributes<HTMLDivElement>>;
+
+export declare const DropdownDivider: ForwardRefExoticComponent<DropdownDividerProps & RefAttributes<HTMLDivElement>>;
+
+export declare interface DropdownDividerProps extends HTMLAttributes<HTMLDivElement> {
+    /** Custom class name */
+    className?: string;
+}
+
+export declare const DropdownItem: ForwardRefExoticComponent<DropdownItemProps & RefAttributes<HTMLDivElement>>;
+
+export declare interface DropdownItemProps extends HTMLAttributes<HTMLDivElement> {
+    /** Whether the item is disabled */
+    disabled?: boolean;
+    /** Icon before the label */
+    icon?: ReactNode;
+    /** Shortcut text */
+    shortcut?: string;
+    /** Whether the item is destructive */
+    destructive?: boolean;
+    /** Custom class name */
+    className?: string;
+}
+
+export declare const DropdownLabel: ForwardRefExoticComponent<DropdownLabelProps & RefAttributes<HTMLDivElement>>;
+
+export declare interface DropdownLabelProps extends HTMLAttributes<HTMLDivElement> {
+    /** Custom class name */
+    className?: string;
+}
+
+export declare type DropdownPlacement = 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end';
+
+export declare interface DropdownProps extends HTMLAttributes<HTMLDivElement> {
+    /** Trigger element */
+    trigger: ReactElement;
+    /** Whether the dropdown is open (controlled) */
+    isOpen?: boolean;
+    /** Default open state (uncontrolled) */
+    defaultOpen?: boolean;
+    /** Callback when open state changes */
+    onOpenChange?: (isOpen: boolean) => void;
+    /** Dropdown placement */
+    placement?: DropdownPlacement;
+    /** Offset from trigger */
+    offset?: number;
+    /** Whether to close on item select */
+    closeOnSelect?: boolean;
+    /** Custom class name */
+    className?: string;
+    /** Test ID */
+    testId?: string;
+}
+
+export declare const DropZone: ForwardRefExoticComponent<DropZoneProps & RefAttributes<HTMLDivElement>>;
+
+export declare interface DropZoneProps {
+    /** Callback when files are selected or dropped */
+    onFiles?: (files: File[]) => void;
+    /** Accepted file types (e.g., "image/*", ".pdf,.doc") */
+    accept?: string;
+    /** Whether multiple files can be selected */
+    multiple?: boolean;
+    /** Maximum file size in bytes */
+    maxSize?: number;
+    /** Whether the drop zone is disabled */
+    disabled?: boolean;
+    /** Main text content */
+    children?: ReactNode;
+    /** Icon to display */
+    icon?: ReactNode;
+    /** Helper text shown below main content */
+    helperText?: string;
+    /** Error message */
+    error?: string;
+    /** Custom class name */
+    className?: string;
+    /** Test ID */
+    testId?: string;
+}
+
+/**
+ * Duration values in milliseconds for use in JS.
+ */
+export declare const duration: {
+    readonly instant: 50;
+    readonly fast: 100;
+    readonly quick: 150;
+    readonly default: 200;
+    readonly smooth: 300;
+    readonly slow: 400;
+    readonly slower: 500;
+};
+
+/** Duration scale in milliseconds */
+export declare const durations: {
+    /** Instant - for micro-interactions */
+    readonly instant: 0;
+    /** 50ms - nearly instant */
+    readonly faster: 50;
+    /** 100ms - very fast, state changes */
+    readonly fast: 100;
+    /** 150ms - quick, hover states */
+    readonly quick: 150;
+    /** 200ms - default transitions */
+    readonly normal: 200;
+    /** 300ms - medium, focus changes */
+    readonly relaxed: 300;
+    /** 400ms - slow, content reveals */
+    readonly slow: 400;
+    /** 500ms - slower, modal openings */
+    readonly slower: 500;
+    /** 700ms - very slow, page transitions */
+    readonly lazy: 700;
+    /** 1000ms - dramatic reveals */
+    readonly dramatic: 1000;
+};
+
+/**
+ * Easing functions for use in JS animations.
+ */
+export declare const easing: {
+    readonly linear: "linear";
+    readonly ease: "ease";
+    readonly easeIn: "cubic-bezier(0.4, 0, 1, 1)";
+    readonly easeOut: "cubic-bezier(0, 0, 0.2, 1)";
+    readonly easeInOut: "cubic-bezier(0.4, 0, 0.2, 1)";
+    readonly spring: "cubic-bezier(0.34, 1.56, 0.64, 1)";
+    readonly softSpring: "cubic-bezier(0.22, 1, 0.36, 1)";
+    readonly smooth: "cubic-bezier(0.25, 0.1, 0.25, 1)";
+    readonly snappy: "cubic-bezier(0.2, 0, 0, 1)";
+};
+
+/** Easing functions - natural, Apple-inspired curves */
+export declare const easings: {
+    /** Linear - constant speed */
+    readonly linear: "linear";
+    /** Ease - subtle acceleration/deceleration */
+    readonly ease: "ease";
+    /** Ease in - slow start */
+    readonly easeIn: "cubic-bezier(0.4, 0, 1, 1)";
+    /** Ease out - slow end (most common) */
+    readonly easeOut: "cubic-bezier(0, 0, 0.2, 1)";
+    /** Ease in-out - slow start and end */
+    readonly easeInOut: "cubic-bezier(0.4, 0, 0.2, 1)";
+    /** Apple-style spring - bouncy, natural feel */
+    readonly spring: "cubic-bezier(0.34, 1.56, 0.64, 1)";
+    /** Soft spring - subtle bounce */
+    readonly softSpring: "cubic-bezier(0.22, 1, 0.36, 1)";
+    /** Smooth - very smooth deceleration */
+    readonly smooth: "cubic-bezier(0.25, 0.1, 0.25, 1)";
+    /** Snappy - quick with soft landing */
+    readonly snappy: "cubic-bezier(0.2, 0, 0, 1)";
+    /** Expressive - dramatic entrance */
+    readonly expressive: "cubic-bezier(0.19, 1, 0.22, 1)";
+    /** Bounce - playful */
+    readonly bounce: "cubic-bezier(0.68, -0.55, 0.265, 1.55)";
+};
+
+export declare const EmptyState: ForwardRefExoticComponent<EmptyStateProps & RefAttributes<HTMLDivElement>>;
+
+/** Default empty state icon */
+export declare function EmptyStateIcon({ size }: {
+    size?: number;
+}): JSX.Element;
+
+export declare namespace EmptyStateIcon {
+    var displayName: string;
+}
+
+export declare interface EmptyStateProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** Icon or illustration */
+    icon?: ReactNode;
+    /** Title text */
+    title?: ReactNode;
+    /** Description text */
+    description?: ReactNode;
+    /** Action element (button, link) */
+    action?: ReactNode;
+    /** Secondary action */
+    secondaryAction?: ReactNode;
+    /** Custom class name */
+    className?: string;
+    /** Test ID */
+    testId?: string;
+}
+
+/** Error - refined red */
+export declare const error: {
+    readonly 50: "#FEF2F2";
+    readonly 100: "#FEE2E2";
+    readonly 200: "#FECACA";
+    readonly 300: "#FCA5A5";
+    readonly 400: "#F87171";
+    readonly 500: "#EF4444";
+    readonly 600: "#DC2626";
+    readonly 700: "#B91C1C";
+    readonly 800: "#991B1B";
+    readonly 900: "#7F1D1D";
+    readonly 950: "#450A0A";
+};
+
+export declare const FieldError: ForwardRefExoticComponent<FieldErrorProps & RefAttributes<HTMLSpanElement>>;
+
+export declare interface FieldErrorProps extends Omit<HTMLAttributes<HTMLSpanElement>, 'children'> {
+    /** Error size */
+    size?: FieldErrorSize;
+    /** Error message */
+    children: ReactNode;
+    /** Whether to show the error icon */
+    showIcon?: boolean;
+    /** Custom icon */
+    icon?: ReactNode;
+    /** Custom class name */
+    className?: string;
+    /** Test ID */
+    testId?: string;
+}
+
+export declare type FieldErrorSize = 'sm' | 'md' | 'lg';
+
+export declare const FileInput: ForwardRefExoticComponent<FileInputProps & RefAttributes<HTMLInputElement>>;
+
+export declare interface FileInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type' | 'onChange' | 'value'> {
+    /** Input size */
+    size?: FileInputSize;
+    /** Input variant */
+    variant?: FileInputVariant;
+    /** Accepted file types (e.g., "image/*,.pdf") */
+    accept?: string;
+    /** Whether multiple files can be selected */
+    multiple?: boolean;
+    /** Maximum file size in bytes */
+    maxSize?: number;
+    /** Label text */
+    label?: ReactNode;
+    /** Description text inside dropzone */
+    description?: ReactNode;
+    /** Error message */
+    error?: ReactNode;
+    /** Whether the input is invalid */
+    isInvalid?: boolean;
+    /** Callback when files are selected */
+    onChange?: (files: File[]) => void;
+    /** Icon to display in dropzone */
+    icon?: ReactNode;
+    /** Custom class name */
+    className?: string;
+    /** Test ID */
+    testId?: string;
+}
+
+export declare type FileInputSize = 'sm' | 'md' | 'lg';
+
+export declare type FileInputVariant = 'default' | 'dropzone';
+
+export declare const Flex: ForwardRefExoticComponent<FlexProps & RefAttributes<HTMLDivElement>>;
+
+declare type FlexAlign = 'start' | 'end' | 'center' | 'baseline' | 'stretch';
+
+declare type FlexDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';
+
+export declare const FlexItem: ForwardRefExoticComponent<FlexItemProps & RefAttributes<HTMLDivElement>>;
+
+export declare interface FlexItemProps extends HTMLAttributes<HTMLDivElement> {
+    /** Flex grow */
+    grow?: number;
+    /** Flex shrink */
+    shrink?: number;
+    /** Flex basis */
+    basis?: string | number;
+    /** Align self */
+    alignSelf?: FlexAlign;
+    /** Order */
+    order?: number;
+    /** Children */
+    children?: ReactNode;
+    /** Custom class name */
+    className?: string;
+    /** Custom styles */
+    style?: CSSProperties;
+    /** Test ID */
+    testId?: string;
+}
+
+declare type FlexJustify = 'start' | 'end' | 'center' | 'between' | 'around' | 'evenly';
+
+/** Flex layout props */
+export declare interface FlexLayoutProps {
+    /** Flex direction */
+    direction?: CSSProperties['flexDirection'];
+    /** Flex wrap */
+    wrap?: CSSProperties['flexWrap'];
+    /** Justify content */
+    justify?: CSSProperties['justifyContent'];
+    /** Align items */
+    align?: CSSProperties['alignItems'];
+    /** Gap between items */
+    gap?: SpacingKey;
+}
+
+export declare interface FlexProps extends HTMLAttributes<HTMLDivElement> {
+    /** Flex direction */
+    direction?: FlexDirection;
+    /** Flex wrap */
+    wrap?: FlexWrap;
+    /** Justify content */
+    justify?: FlexJustify;
+    /** Align items */
+    align?: FlexAlign;
+    /** Gap between items */
+    gap?: SpacingKey_3;
+    /** Row gap */
+    rowGap?: SpacingKey_3;
+    /** Column gap */
+    columnGap?: SpacingKey_3;
+    /** Whether to display inline */
+    inline?: boolean;
+    /** Flex grow */
+    grow?: number;
+    /** Flex shrink */
+    shrink?: number;
+    /** Flex basis */
+    basis?: string | number;
+    /** Children */
+    children?: ReactNode;
+    /** Custom class name */
+    className?: string;
+    /** Custom styles */
+    style?: CSSProperties;
+    /** Test ID */
+    testId?: string;
+}
+
+declare type FlexWrap = 'nowrap' | 'wrap' | 'wrap-reverse';
+
+/**
+ * Focus ring box-shadow values.
+ * Uses CSS variables for theme-aware colors.
+ */
+export declare const focusRing: {
+    /** Default focus ring - primary color */
+    readonly default: "0 0 0 3px var(--brycks-focus-ring-color, rgba(85, 120, 244, 0.35))";
+    /** Error state focus ring */
+    readonly error: "0 0 0 3px var(--brycks-focus-ring-error, rgba(239, 68, 68, 0.35))";
+    /** Success state focus ring */
+    readonly success: "0 0 0 3px var(--brycks-focus-ring-success, rgba(16, 185, 129, 0.35))";
+    /** Subtle focus ring - for nested elements */
+    readonly subtle: "0 0 0 2px var(--brycks-focus-ring-color, rgba(85, 120, 244, 0.25))";
+    /** None - explicitly no focus ring */
+    readonly none: "none";
+};
+
+/**
+ * Focus ring with offset (for elements with borders).
+ */
+export declare const focusRingOffset: {
+    readonly default: "0 0 0 2px var(--brycks-background-app), 0 0 0 4px var(--brycks-primary-default)";
+    readonly error: "0 0 0 2px var(--brycks-background-app), 0 0 0 4px var(--brycks-error-default)";
+};
+
+/** Focus ring shadows - for accessibility */
+export declare const focusRings: {
+    /** Default focus ring - primary color */
+    readonly default: "0 0 0 3px rgba(85, 120, 244, 0.35)";
+    /** Strong focus ring - higher visibility */
+    readonly strong: "0 0 0 4px rgba(85, 120, 244, 0.45)";
+    /** Error focus ring */
+    readonly error: "0 0 0 3px rgba(239, 68, 68, 0.35)";
+    /** Success focus ring */
+    readonly success: "0 0 0 3px rgba(16, 185, 129, 0.35)";
+    /** Focus within container */
+    readonly within: "0 0 0 2px rgba(85, 120, 244, 0.2)";
+};
+
+/**
+ * Complete focus styles object for spreading.
+ */
+export declare const focusStyles: {
+    /** Outline-based focus (native) */
+    readonly outline: {
+        readonly outline: "2px solid var(--brycks-border-focus)";
+        readonly outlineOffset: "2px";
+    };
+    /** Box-shadow based focus (custom) */
+    readonly ring: {
+        readonly outline: "none";
+        readonly boxShadow: "0 0 0 3px var(--brycks-focus-ring-color, rgba(85, 120, 244, 0.35))";
+    };
+    /** Error state focus */
+    readonly ringError: {
+        readonly outline: "none";
+        readonly boxShadow: "0 0 0 3px var(--brycks-focus-ring-error, rgba(239, 68, 68, 0.35))";
+    };
+    /** Remove focus styles (use sparingly) */
+    readonly none: {
+        readonly outline: "none";
+        readonly boxShadow: "none";
+    };
+};
+
+export declare const FocusTrap: ForwardRefExoticComponent<FocusTrapProps & RefAttributes<HTMLDivElement>>;
+
+export declare interface FocusTrapProps {
+    /** Content to trap focus within */
+    children: ReactNode;
+    /** Whether the focus trap is active */
+    enabled?: boolean;
+    /** Whether to auto-focus the first element */
+    autoFocus?: boolean;
+    /** Whether to restore focus on unmount */
+    restoreFocus?: boolean;
+    /** Initial element to focus (selector) */
+    initialFocus?: string;
+    /** Custom class name */
+    className?: string;
+    /** Custom inline styles */
+    style?: CSSProperties;
+}
+
+/** Font family stacks */
+export declare const fontFamilies: {
+    /** Primary font - clean, modern sans-serif */
+    readonly sans: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif";
+    /** Monospace for code */
+    readonly mono: "'SF Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace";
+    /** Display font for large headings (optional) */
+    readonly display: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif";
+};
+
+declare type FontSize = keyof typeof fontSizes;
+
+/** Font sizes in pixels */
+export declare const fontSizes: {
+    /** 11px - Micro text, labels */
+    readonly xs: 11;
+    /** 12px - Small text, captions */
+    readonly sm: 12;
+    /** 14px - Body small, secondary text */
+    readonly base: 14;
+    /** 16px - Body default */
+    readonly md: 16;
+    /** 18px - Body large, lead text */
+    readonly lg: 18;
+    /** 20px - Heading 6 */
+    readonly xl: 20;
+    /** 24px - Heading 5 */
+    readonly '2xl': 24;
+    /** 28px - Heading 4 */
+    readonly '3xl': 28;
+    /** 32px - Heading 3 */
+    readonly '4xl': 32;
+    /** 40px - Heading 2 */
+    readonly '5xl': 40;
+    /** 48px - Heading 1 */
+    readonly '6xl': 48;
+    /** 60px - Display small */
+    readonly '7xl': 60;
+    /** 72px - Display medium */
+    readonly '8xl': 72;
+    /** 96px - Display large */
+    readonly '9xl': 96;
+};
+
+declare type FontWeight = keyof typeof fontWeights;
+
+/** Font weights */
+export declare const fontWeights: {
+    /** 400 - Regular body text */
+    readonly regular: 400;
+    /** 500 - Medium emphasis */
+    readonly medium: 500;
+    /** 600 - Semi-bold for subheadings */
+    readonly semibold: 600;
+    /** 700 - Bold for headings */
+    readonly bold: 700;
+};
+
+export declare const Footer: ForwardRefExoticComponent<FooterProps & RefAttributes<HTMLElement>>;
+
+export declare interface FooterProps extends SemanticProps {
+    role?: 'contentinfo' | 'none';
+}
+
+export declare const Form: ForwardRefExoticComponent<FormProps & RefAttributes<HTMLFormElement>>;
+
+export declare const FormCard: ForwardRefExoticComponent<FormCardProps & RefAttributes<HTMLDivElement>>;
+
+export declare type FormCardIntent = 'neutral' | 'primary' | 'success' | 'warning' | 'error' | 'info';
+
+export declare interface FormCardProps extends HTMLAttributes<HTMLDivElement> {
+    /** Card title */
+    title?: string;
+    /** Icon displayed before title */
+    icon?: ReactNode;
+    /** Color intent for the icon circle */
+    iconIntent?: FormCardIntent;
+    /** Additional content in the header (e.g., counter, badge) */
+    headerExtra?: ReactNode;
+    /** Card body content */
+    children?: ReactNode;
+    /** Custom class name */
+    className?: string;
+    /** Test ID */
+    testId?: string;
+}
+
+export declare const FormField: ForwardRefExoticComponent<FormFieldProps & RefAttributes<HTMLDivElement>>;
+
+export declare interface FormFieldProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** Field size */
+    size?: FormFieldSize;
+    /** Field label */
+    label?: ReactNode;
+    /** Whether the field is required */
+    required?: boolean;
+    /** Helper text below the field */
+    helperText?: ReactNode;
+    /** Error message (also sets invalid state) */
+    error?: ReactNode;
+    /** Whether the field is invalid */
+    isInvalid?: boolean;
+    /** Whether the field is disabled */
+    disabled?: boolean;
+    /** Custom ID for the field (auto-generated if not provided) */
+    fieldId?: string;
+    /** Field orientation */
+    orientation?: 'vertical' | 'horizontal';
+    /** Label width for horizontal orientation */
+    labelWidth?: number | string;
+    /** Custom class name */
+    className?: string;
+    /** Children (form input) */
+    children: ReactNode | ((props: {
+        id: string;
+        'aria-describedby'?: string;
+        'aria-invalid'?: boolean;
+    }) => ReactNode);
+    /** Test ID */
+    testId?: string;
+}
+
+export declare type FormFieldSize = 'sm' | 'md' | 'lg';
+
+export declare type FormGap = 'sm' | 'md' | 'lg' | 'xl';
+
+export declare const FormGroup: ForwardRefExoticComponent<FormGroupProps & RefAttributes<HTMLDivElement>>;
+
+export declare type FormGroupGap = 'none' | 'xs' | 'sm' | 'md';
+
+export declare interface FormGroupProps extends HTMLAttributes<HTMLDivElement> {
+    /** Label text for the form field */
+    label?: ReactNode;
+    /** Form field ID - auto-generated if not provided */
+    fieldId?: string;
+    /** Label size */
+    labelSize?: FormLabelSize;
+    /** Whether the field is required */
+    required?: boolean;
+    /** Whether the field is disabled */
+    disabled?: boolean;
+    /** Optional description text below the label */
+    description?: ReactNode;
+    /** Error message to display */
+    error?: ReactNode;
+    /** Helper text to display below the input */
+    helperText?: ReactNode;
+    /** Gap between label and input */
+    gap?: FormGroupGap;
+    /** Children (the form input) */
+    children: ReactNode;
+    /** Custom class name */
+    className?: string;
+    /** Test ID */
+    testId?: string;
+}
+
+export declare const FormLabel: ForwardRefExoticComponent<FormLabelProps & RefAttributes<HTMLLabelElement>>;
+
+export declare interface FormLabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
+    /** Label text */
+    children: ReactNode;
+    /** Label size */
+    size?: FormLabelSize;
+    /** Whether the field is required */
+    required?: boolean;
+    /** Whether the field is disabled */
+    disabled?: boolean;
+    /** Optional description text */
+    description?: ReactNode;
+    /** Custom class name */
+    className?: string;
+    /** Test ID */
+    testId?: string;
+}
+
+export declare type FormLabelSize = 'sm' | 'md' | 'lg';
+
+export declare interface FormProps extends FormHTMLAttributes<HTMLFormElement> {
+    /** Gap between form groups */
+    gap?: FormGap;
+    /** Disable the form */
+    disabled?: boolean;
+    /** Form children */
+    children: ReactNode;
+    /** Custom class name */
+    className?: string;
+    /** Test ID */
+    testId?: string;
+}
+
+export declare function generateId(prefix?: string): string;
+
+/** Convert spacing key to pixel value */
+export declare function getSpacingValue(key: keyof typeof spacing): number;
+
+/** Glow effects - for special elements */
+export declare const glows: {
+    /** Subtle primary glow */
+    readonly primary: "0 0 20px rgba(85, 120, 244, 0.15), 0 0 40px rgba(85, 120, 244, 0.1)";
+    /** Subtle accent glow */
+    readonly accent: "0 0 20px rgba(248, 101, 69, 0.15), 0 0 40px rgba(248, 101, 69, 0.1)";
+    /** Success glow */
+    readonly success: "0 0 20px rgba(16, 185, 129, 0.15), 0 0 40px rgba(16, 185, 129, 0.1)";
+    /** Soft white glow - for dark mode highlights */
+    readonly white: "0 0 30px rgba(255, 255, 255, 0.1)";
+};
+
+export declare const Grid: GridComponent;
+
+declare interface GridComponent {
+    <E extends ElementType = 'div'>(props: GridProps<E> & {
+        ref?: ComponentPropsWithRef<E>['ref'];
+    }): default_2.JSX.Element | null;
+    displayName?: string;
+}
+
+export declare const GridItem: GridItemComponent;
+
+declare interface GridItemComponent {
+    <E extends ElementType = 'div'>(props: GridItemProps<E> & {
+        ref?: ComponentPropsWithRef<E>['ref'];
+    }): default_2.JSX.Element | null;
+    displayName?: string;
+}
+
+/** Grid Item Component */
+export declare interface GridItemOwnProps {
+    /** Column span */
+    colSpan?: number | 'full';
+    /** Row span */
+    rowSpan?: number;
+    /** Column start */
+    colStart?: number;
+    /** Column end */
+    colEnd?: number;
+    /** Row start */
+    rowStart?: number;
+    /** Row end */
+    rowEnd?: number;
+    /** Custom class name */
+    className?: string;
+    /** Custom inline styles */
+    style?: CSSProperties;
+    /** Children */
+    children?: ReactNode;
+    /** Test ID */
+    testId?: string;
+}
+
+export declare type GridItemProps<E extends ElementType = 'div'> = GridItemOwnProps & Omit<ComponentPropsWithoutRef<E>, keyof GridItemOwnProps> & {
+    as?: E;
+};
+
+export declare interface GridOwnProps extends SpacingProps {
+    /** The element type to render */
+    as?: ElementType;
+    /** Custom class name */
+    className?: string;
+    /** Custom inline styles */
+    style?: CSSProperties;
+    /** Number of columns */
+    columns?: number | string;
+    /** Number of rows */
+    rows?: number | string;
+    /** Gap between items */
+    gap?: SpacingKey;
+    /** Column gap */
+    gapX?: SpacingKey;
+    /** Row gap */
+    gapY?: SpacingKey;
+    /** Align items */
+    align?: CSSProperties['alignItems'];
+    /** Justify items */
+    justify?: CSSProperties['justifyItems'];
+    /** Template columns (CSS value) */
+    templateColumns?: string;
+    /** Template rows (CSS value) */
+    templateRows?: string;
+    /** Auto flow */
+    flow?: CSSProperties['gridAutoFlow'];
+    /** Whether to render as inline-grid */
+    inline?: boolean;
+    /** Children */
+    children?: ReactNode;
+    /** Test ID */
+    testId?: string;
+}
+
+export declare type GridProps<E extends ElementType = 'div'> = GridOwnProps & Omit<ComponentPropsWithoutRef<E>, keyof GridOwnProps>;
+
+export declare const Header: ForwardRefExoticComponent<HeaderProps & RefAttributes<HTMLElement>>;
+
+export declare interface HeaderProps extends SemanticProps {
+    role?: 'banner' | 'none';
+}
+
+/**
+ * Header dimensions
+ */
+export declare const headerSizes: {
+    /** Standard header height: 64px */
+    readonly height: number;
+    /** Compact header height: 48px */
+    readonly compact: number;
+};
+
+export declare const Heading: HeadingComponent;
+
+declare interface HeadingComponent {
+    <E extends ElementType = 'h2'>(props: HeadingProps<E> & {
+        ref?: ComponentPropsWithRef<E>['ref'];
+    }): default_2.JSX.Element | null;
+    displayName?: string;
+}
+
+export declare type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+
+export declare interface HeadingOwnProps {
+    /** The element type to render */
+    as?: ElementType;
+    /** Heading level (1-6) - determines semantic element and default styling */
+    level?: HeadingLevel;
+    /** Visual size override - use a different visual style than the semantic level */
+    size?: HeadingLevel | 'display' | 'displayLarge' | 'displaySmall';
+    /** Font weight override */
+    weight?: FontWeight;
+    /** Text alignment */
+    align?: CSSProperties['textAlign'];
+    /** Text color (CSS variable or direct value) */
+    color?: string;
+    /** Whether text should truncate with ellipsis */
+    truncate?: boolean;
+    /** Custom class name */
+    className?: string;
+    /** Custom inline styles */
+    style?: CSSProperties;
+    /** Children */
+    children?: ReactNode;
+    /** Test ID */
+    testId?: string;
+}
+
+export declare type HeadingProps<E extends ElementType = 'h2'> = HeadingOwnProps & Omit<ComponentPropsWithoutRef<E>, keyof HeadingOwnProps>;
+
+/** Convert hex color to rgba */
+export declare function hexToRgba(hex: string, alpha: number): string;
+
+export declare const HStack: StackComponent;
+
+export declare const Icon: ForwardRefExoticComponent<IconProps & RefAttributes<SVGSVGElement>>;
+
+export declare const IconButton: ButtonComponent;
+
+/**
+ * Icon button sizes (square buttons with icons)
+ */
+export declare const iconButtonSizes: {
+    /** 28px */
+    readonly xs: 28;
+    /** 32px */
+    readonly sm: number;
+    /** 36px */
+    readonly md: 36;
+    /** 40px */
+    readonly lg: number;
+    /** 48px */
+    readonly xl: number;
+};
+
+/** Helper type for icon names */
+export declare type IconName = keyof typeof iconPaths;
+
+/**
+ * Icon Paths
+ *
+ * Common SVG path data for icons.
+ */
+export declare const iconPaths: {
+    readonly close: "M18 6L6 18M6 6l12 12";
+    readonly check: "M20 6L9 17l-5-5";
+    readonly chevronDown: "M6 9l6 6 6-6";
+    readonly chevronUp: "M18 15l-6-6-6 6";
+    readonly chevronLeft: "M15 18l-6-6 6-6";
+    readonly chevronRight: "M9 18l6-6-6-6";
+    readonly plus: "M12 5v14m-7-7h14";
+    readonly minus: "M5 12h14";
+    readonly search: "M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z";
+    readonly menu: "M4 6h16M4 12h16M4 18h16";
+    readonly info: "M12 16v-4m0-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z";
+    readonly warning: "M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z";
+    readonly error: "M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z";
+    readonly success: "M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z";
+    readonly eye: "M15 12a3 3 0 11-6 0 3 3 0 016 0z M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z";
+    readonly eyeOff: "M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21";
+    readonly calendar: "M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z";
+    readonly upload: "M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z";
+    readonly download: "M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4";
+    readonly trash: "M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16";
+    readonly edit: "M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z";
+    readonly copy: "M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z";
+    readonly externalLink: "M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14";
+    readonly settings: "M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z M15 12a3 3 0 11-6 0 3 3 0 016 0z";
+    readonly user: "M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z";
+    readonly logout: "M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1";
+    readonly arrowLeft: "M10 19l-7-7m0 0l7-7m-7 7h18";
+    readonly arrowRight: "M14 5l7 7m0 0l-7 7m7-7H3";
+    readonly arrowUp: "M5 10l7-7m0 0l7 7m-7-7v18";
+    readonly arrowDown: "M19 14l-7 7m0 0l-7-7m7 7V3";
+    readonly refresh: "M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15";
+    readonly filter: "M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z";
+    readonly sort: "M3 4h13M3 8h9m-9 4h6m4 0l4-4m0 0l4 4m-4-4v12";
+    readonly home: "M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6";
+    readonly folder: "M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z";
+    readonly file: "M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z";
+    readonly bell: "M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9";
+    readonly mail: "M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z";
+    readonly lock: "M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z";
+    readonly unlock: "M8 11V7a4 4 0 118 0m-4 8v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2z";
+    readonly star: "M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z";
+    readonly heart: "M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z";
+    readonly share: "M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z";
+    readonly link: "M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1";
+    readonly code: "M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4";
+    readonly terminal: "M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z";
+    readonly database: "M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4";
+    readonly cloud: "M3 15a4 4 0 004 4h9a5 5 0 10-.1-9.999 5.002 5.002 0 10-9.78 2.096A4.001 4.001 0 003 15z";
+    readonly sun: "M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z";
+    readonly moon: "M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z";
+    readonly grip: "M4 6a2 2 0 114 0 2 2 0 01-4 0zM10 6a2 2 0 114 0 2 2 0 01-4 0zM16 6a2 2 0 114 0 2 2 0 01-4 0zM4 12a2 2 0 114 0 2 2 0 01-4 0zM10 12a2 2 0 114 0 2 2 0 01-4 0zM16 12a2 2 0 114 0 2 2 0 01-4 0zM4 18a2 2 0 114 0 2 2 0 01-4 0zM10 18a2 2 0 114 0 2 2 0 01-4 0zM16 18a2 2 0 114 0 2 2 0 01-4 0z";
+    readonly moreHorizontal: "M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z";
+    readonly moreVertical: "M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z";
+    readonly layout: "M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z";
+    readonly car: "M19 17h2c.6 0 1-.4 1-1v-3c0-.9-.7-1.7-1.5-1.9L18 10l-1.6-3.2c-.4-.8-1.2-1.3-2.1-1.3H9.7c-.9 0-1.7.5-2.1 1.3L6 10l-2.5 1.1C2.7 11.3 2 12.1 2 13v3c0 .6.4 1 1 1h2M7 17h10M7 17a2 2 0 11-4 0 2 2 0 014 0zm12 0a2 2 0 11-4 0 2 2 0 014 0z";
+    readonly page: "M4 4a2 2 0 012-2h8l6 6v12a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm10 0v6h6";
+    readonly gridVertical: "M9 4a1 1 0 110 2 1 1 0 010-2zm6 0a1 1 0 110 2 1 1 0 010-2zm-6 5a1 1 0 110 2 1 1 0 010-2zm6 0a1 1 0 110 2 1 1 0 010-2zm-6 5a1 1 0 110 2 1 1 0 010-2zm6 0a1 1 0 110 2 1 1 0 010-2zm-6 5a1 1 0 110 2 1 1 0 010-2zm6 0a1 1 0 110 2 1 1 0 010-2z";
+};
+
+export declare interface IconProps extends Omit<SVGAttributes<SVGSVGElement>, 'children'> {
+    /** Icon size */
+    size?: IconSize;
+    /** Custom size in pixels */
+    customSize?: number;
+    /** Icon color (uses currentColor by default) */
+    color?: string;
+    /** SVG path data or children */
+    path?: string;
+    /** Multiple paths */
+    paths?: string[];
+    /** SVG viewBox */
+    viewBox?: string;
+    /** Fill rule for paths */
+    fillRule?: 'nonzero' | 'evenodd';
+    /** Custom class name */
+    className?: string;
+    /** Test ID */
+    testId?: string;
+    /** Accessibility label */
+    label?: string;
+    /** Custom SVG children (overrides path/paths) */
+    children?: ReactNode;
+}
+
+export declare type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+
+/**
+ * Icon sizes that align with component heights.
+ */
+export declare const iconSizes: {
+    /** 12px */
+    readonly xs: number;
+    /** 16px */
+    readonly sm: number;
+    /** 20px */
+    readonly md: number;
+    /** 24px */
+    readonly lg: number;
+    /** 32px */
+    readonly xl: number;
+};
+
+declare const Image_2: ForwardRefExoticComponent<ImageProps & RefAttributes<HTMLImageElement>>;
+export { Image_2 as Image }
+
+export declare type ImageFit = 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';
+
+export declare type ImageLoading = 'lazy' | 'eager';
+
+export declare interface ImageProps extends Omit<ImgHTMLAttributes<HTMLImageElement>, 'placeholder'> {
+    /** Image source URL */
+    src: string;
+    /** Alternative text for accessibility (required) */
+    alt: string;
+    /** Aspect ratio (width/height). If set, maintains ratio */
+    aspectRatio?: number | string;
+    /** How the image should fit within its container */
+    fit?: ImageFit;
+    /** Loading strategy */
+    loading?: ImageLoading;
+    /** Fallback content or URL when image fails to load */
+    fallback?: ReactNode | string;
+    /** Placeholder shown while loading */
+    placeholder?: ReactNode | string;
+    /** Border radius using design tokens */
+    radius?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
+    /** Whether to show a subtle background while loading */
+    showBackground?: boolean;
+    /** Callback when image loads successfully */
+    onLoad?: (event: SyntheticEvent<HTMLImageElement>) => void;
+    /** Callback when image fails to load */
+    onError?: (event: SyntheticEvent<HTMLImageElement>) => void;
+    /** Custom class name */
+    className?: string;
+    /** Test ID */
+    testId?: string;
+}
+
+export declare const ImageThumbnail: ForwardRefExoticComponent<ImageThumbnailProps & RefAttributes<HTMLButtonElement>>;
+
+export declare interface ImageThumbnailProps {
+    /** Image source URL */
+    src: string;
+    /** Alternative text for accessibility */
+    alt: string;
+    /** Whether this thumbnail is selected */
+    isSelected?: boolean;
+    /** Badge content (e.g., "COVER", "PRIMARY") */
+    badge?: ReactNode;
+    /** Callback when thumbnail is clicked */
+    onClick?: (event: MouseEvent_2<HTMLButtonElement>) => void;
+    /** Callback when delete button is clicked */
+    onDelete?: (event: MouseEvent_2<HTMLButtonElement>) => void;
+    /** Size of the thumbnail */
+    size?: 'sm' | 'md' | 'lg';
+    /** Aspect ratio of the thumbnail */
+    aspectRatio?: '1' | '4/3' | '16/9';
+    /** Whether the thumbnail is disabled */
+    disabled?: boolean;
+    /** Custom class name */
+    className?: string;
+    /** Test ID */
+    testId?: string;
+}
+
+/** Info - calm cyan */
+export declare const info: {
+    readonly 50: "#ECFEFF";
+    readonly 100: "#CFFAFE";
+    readonly 200: "#A5F3FC";
+    readonly 300: "#67E8F9";
+    readonly 400: "#22D3EE";
+    readonly 500: "#06B6D4";
+    readonly 600: "#0891B2";
+    readonly 700: "#0E7490";
+    readonly 800: "#155E75";
+    readonly 900: "#164E63";
+    readonly 950: "#083344";
+};
+
+export declare const InfoItem: ForwardRefExoticComponent<InfoItemProps & RefAttributes<HTMLDivElement>>;
+
+export declare type InfoItemLayout = 'vertical' | 'horizontal' | 'inline';
+
+export declare interface InfoItemProps extends HTMLAttributes<HTMLDivElement> {
+    /** Label text */
+    label: ReactNode;
+    /** Value to display */
+    value?: ReactNode;
+    /** Children (alternative to value prop) */
+    children?: ReactNode;
+    /** Layout direction */
+    layout?: InfoItemLayout;
+    /** Size variant */
+    size?: InfoItemSize;
+    /** Hide if value is empty */
+    hideEmpty?: boolean;
+    /** Custom label width (for horizontal layout) */
+    labelWidth?: string | number;
+    /** Custom class name */
+    className?: string;
+    /** Test ID */
+    testId?: string;
+}
+
+export declare type InfoItemSize = 'sm' | 'md' | 'lg';
+
+export declare const InfoList: ForwardRefExoticComponent<InfoListProps & RefAttributes<HTMLDListElement>>;
+
+/**
+ * InfoList Component
+ *
+ * A container for multiple InfoItem components.
+ * Provides consistent spacing and layout for info items.
+ */
+export declare interface InfoListProps extends HTMLAttributes<HTMLDListElement> {
+    /** Gap between items */
+    gap?: 'sm' | 'md' | 'lg';
+    /** Number of columns */
+    columns?: 1 | 2 | 3 | 4;
+    /** Children (InfoItem components) */
+    children: ReactNode;
+    /** Custom class name */
+    className?: string;
+    /** Test ID */
+    testId?: string;
+}
+
+export declare const Input: ForwardRefExoticComponent<InputProps & RefAttributes<HTMLInputElement>>;
+
+export declare interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    /** Input size */
+    size?: InputSize;
+    /** Visual variant */
+    variant?: InputVariant;
+    /** Error state */
+    isInvalid?: boolean;
+    /** Left element/icon */
+    leftElement?: ReactNode;
+    /** Right element/icon */
+    rightElement?: ReactNode;
+    /** Custom class name */
+    className?: string;
+    /** Test ID */
+    testId?: string;
+}
+
+export declare type InputSize = 'sm' | 'md' | 'lg';
+
+export declare type InputVariant = 'outline' | 'filled' | 'flushed';
+
+/** Color intent variants */
+export declare type Intent = 'primary' | 'accent' | 'success' | 'warning' | 'error' | 'info';
+
+/**
+ * CSS animation keyframes (as strings for style injection).
+ */
+export declare const keyframes: {
+    readonly fadeIn: "\n    @keyframes brycks-fade-in {\n      from { opacity: 0; }\n      to { opacity: 1; }\n    }\n  ";
+    readonly fadeOut: "\n    @keyframes brycks-fade-out {\n      from { opacity: 1; }\n      to { opacity: 0; }\n    }\n  ";
+    readonly scaleIn: "\n    @keyframes brycks-scale-in {\n      from { opacity: 0; transform: scale(0.95); }\n      to { opacity: 1; transform: scale(1); }\n    }\n  ";
+    readonly scaleOut: "\n    @keyframes brycks-scale-out {\n      from { opacity: 1; transform: scale(1); }\n      to { opacity: 0; transform: scale(0.95); }\n    }\n  ";
+    readonly slideUp: "\n    @keyframes brycks-slide-up {\n      from { opacity: 0; transform: translateY(8px); }\n      to { opacity: 1; transform: translateY(0); }\n    }\n  ";
+    readonly slideDown: "\n    @keyframes brycks-slide-down {\n      from { opacity: 0; transform: translateY(-8px); }\n      to { opacity: 1; transform: translateY(0); }\n    }\n  ";
+    readonly spin: "\n    @keyframes brycks-spin {\n      from { transform: rotate(0deg); }\n      to { transform: rotate(360deg); }\n    }\n  ";
+    readonly pulse: "\n    @keyframes brycks-pulse {\n      0%, 100% { opacity: 1; }\n      50% { opacity: 0.5; }\n    }\n  ";
+    readonly shimmer: "\n    @keyframes brycks-shimmer {\n      0% { transform: translateX(-100%); }\n      100% { transform: translateX(100%); }\n    }\n  ";
+    readonly bounce: "\n    @keyframes brycks-bounce {\n      0%, 80%, 100% { transform: scale(0); opacity: 0.5; }\n      40% { transform: scale(1); opacity: 1; }\n    }\n  ";
+};
+
+/**
+ * Type for lazy component with preload capability.
+ */
+export declare type LazyComponentWithPreload<T extends ComponentType<unknown>> = LazyExoticComponent<T> & {
+    preload: () => Promise<{
+        default: T;
+    }>;
+};
+
+/** Letter spacing (tracking) */
+export declare const letterSpacings: {
+    /** Tighter - for large display text */
+    readonly tighter: "-0.05em";
+    /** Tight - for headings */
+    readonly tight: "-0.025em";
+    /** Normal - default */
+    readonly normal: "0em";
+    /** Wide - for small caps, labels */
+    readonly wide: "0.025em";
+    /** Wider - for all caps text */
+    readonly wider: "0.05em";
+    /** Widest - for very small text */
+    readonly widest: "0.1em";
+};
+
+export declare const lightTheme: Theme;
+
+declare type LineHeight = keyof typeof lineHeights;
+
+/** Line heights */
+export declare const lineHeights: {
+    /** Tight - for large headings */
+    readonly none: 1;
+    readonly tight: 1.15;
+    /** Snug - for medium headings */
+    readonly snug: 1.25;
+    /** Normal - for body text */
+    readonly normal: 1.5;
+    /** Relaxed - for small text, better readability */
+    readonly relaxed: 1.625;
+    /** Loose - for captions, labels */
+    readonly loose: 1.75;
+};
+
+export declare const List: ForwardRefExoticComponent<ListProps & RefAttributes<HTMLUListElement>>;
+
+export declare const ListDivider: ForwardRefExoticComponent<ListDividerProps & RefAttributes<HTMLLIElement>>;
+
+export declare interface ListDividerProps extends HTMLAttributes<HTMLLIElement> {
+    /** Custom class name */
+    className?: string;
+}
+
+export declare const ListHeader: ForwardRefExoticComponent<ListHeaderProps & RefAttributes<HTMLLIElement>>;
+
+export declare interface ListHeaderProps extends HTMLAttributes<HTMLLIElement> {
+    /** Custom class name */
+    className?: string;
+}
+
+export declare const ListItem: ForwardRefExoticComponent<ListItemProps & RefAttributes<HTMLLIElement>>;
+
+export declare interface ListItemProps extends HTMLAttributes<HTMLLIElement> {
+    /** Icon or avatar on the left */
+    leftElement?: ReactNode;
+    /** Element on the right (badge, button, etc.) */
+    rightElement?: ReactNode;
+    /** Secondary text below the main content */
+    secondary?: ReactNode;
+    /** Whether the item is selected */
+    selected?: boolean;
+    /** Whether the item is disabled */
+    disabled?: boolean;
+    /** Whether the item is clickable */
+    clickable?: boolean;
+    /** Custom class name */
+    className?: string;
+}
+
+export declare interface ListProps extends HTMLAttributes<HTMLUListElement> {
+    /** List size */
+    size?: ListSize;
+    /** List variant */
+    variant?: ListVariant;
+    /** Whether list items are interactive */
+    interactive?: boolean;
+    /** Custom class name */
+    className?: string;
+    /** Test ID */
+    testId?: string;
+}
+
+export declare type ListSize = 'sm' | 'md' | 'lg';
+
+export declare type ListVariant = 'default' | 'bordered' | 'separated';
+
+export declare const Loader: ForwardRefExoticComponent<LoaderProps & RefAttributes<HTMLDivElement>>;
+
+export declare interface LoaderProps extends HTMLAttributes<HTMLDivElement> {
+    /** Loader size */
+    size?: LoaderSize;
+    /** Loader variant */
+    variant?: LoaderVariant;
+    /** Color (CSS value) */
+    color?: string;
+    /** Accessible label */
+    label?: string;
+    /** Custom class name */
+    className?: string;
+    /** Test ID */
+    testId?: string;
+}
+
+export declare type LoaderSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+export declare type LoaderVariant = 'spinner' | 'dots' | 'pulse';
+
+export declare const Logo: ForwardRefExoticComponent<LogoProps & RefAttributes<HTMLDivElement>>;
+
+export declare interface LogoProps extends HTMLAttributes<HTMLDivElement> {
+    /** Size of the logo */
+    size?: LogoSize;
+    /** Content to display (usually a letter or icon) */
+    children?: ReactNode;
+    /** Custom class name */
+    className?: string;
+    /** Test ID */
+    testId?: string;
+}
+
+export declare type LogoSize = 'sm' | 'md' | 'lg' | 'xl';
+
+export declare const Main: ForwardRefExoticComponent<MainProps & RefAttributes<HTMLElement>>;
+
+export declare interface MainProps extends SemanticProps {
+    id?: string;
+}
+
+/** Media query helpers */
+export declare const mediaQueries: {
+    readonly xs: "@media (min-width: 320px)";
+    readonly sm: "@media (min-width: 480px)";
+    readonly md: "@media (min-width: 640px)";
+    readonly lg: "@media (min-width: 768px)";
+    readonly xl: "@media (min-width: 1024px)";
+    readonly '2xl': "@media (min-width: 1280px)";
+    readonly '3xl': "@media (min-width: 1536px)";
+    readonly '4xl': "@media (min-width: 1920px)";
+    /** Max-width queries (mobile-first overrides) */
+    readonly maxXs: `@media (max-width: ${number}px)`;
+    readonly maxSm: `@media (max-width: ${number}px)`;
+    readonly maxMd: `@media (max-width: ${number}px)`;
+    readonly maxLg: `@media (max-width: ${number}px)`;
+    readonly maxXl: `@media (max-width: ${number}px)`;
+    readonly max2xl: `@media (max-width: ${number}px)`;
+    /** Preference queries */
+    readonly prefersReducedMotion: "@media (prefers-reduced-motion: reduce)";
+    readonly prefersDark: "@media (prefers-color-scheme: dark)";
+    readonly prefersLight: "@media (prefers-color-scheme: light)";
+    readonly prefersHighContrast: "@media (prefers-contrast: high)";
+    /** Device specific */
+    readonly hover: "@media (hover: hover)";
+    readonly touch: "@media (hover: none) and (pointer: coarse)";
+    readonly fine: "@media (pointer: fine)";
+};
+
+export declare const Menu: ForwardRefExoticComponent<MenuProps & RefAttributes<HTMLElement>>;
+
+export declare const MenuDivider: ForwardRefExoticComponent<MenuDividerProps & RefAttributes<HTMLDivElement>>;
+
+export declare interface MenuDividerProps extends HTMLAttributes<HTMLDivElement> {
+    /** Custom class name */
+    className?: string;
+}
+
+export declare const MenuGroup: ForwardRefExoticComponent<MenuGroupProps & RefAttributes<HTMLDivElement>>;
+
+export declare interface MenuGroupProps extends HTMLAttributes<HTMLDivElement> {
+    /** Group label */
+    label?: string;
+    /** Custom class name */
+    className?: string;
+}
+
+export declare const MenuItem: ForwardRefExoticComponent<MenuItemProps & RefAttributes<HTMLButtonElement>>;
+
+export declare interface MenuItemProps extends Omit<HTMLAttributes<HTMLButtonElement>, 'onClick'> {
+    /** Item value (unique identifier) */
+    value: string;
+    /** Icon before the label */
+    icon?: ReactNode;
+    /** Badge/count after the label */
+    badge?: ReactNode;
+    /** Whether the item is disabled */
+    disabled?: boolean;
+    /** Callback when clicked */
+    onClick?: (value: string) => void;
+    /** Custom class name */
+    className?: string;
+}
+
+export declare interface MenuProps extends Omit<HTMLAttributes<HTMLElement>, 'onChange'> {
+    /** Currently active item */
+    activeItem?: string | null;
+    /** Callback when active item changes */
+    onChange?: (value: string | null) => void;
+    /** Menu size */
+    size?: MenuSize;
+    /** Whether the menu is collapsed (icons only) */
+    collapsed?: boolean;
+    /** Custom class name */
+    className?: string;
+    /** Test ID */
+    testId?: string;
+}
+
+export declare type MenuSize = 'sm' | 'md' | 'lg';
+
+export declare const Modal: ForwardRefExoticComponent<ModalProps & RefAttributes<HTMLDivElement>>;
+
+export declare interface ModalProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** Whether the modal is open */
+    isOpen: boolean;
+    /** Callback when modal should close */
+    onClose: () => void;
+    /** Modal size */
+    size?: ModalSize;
+    /** Modal title */
+    title?: ReactNode;
+    /** Modal description */
+    description?: ReactNode;
+    /** Whether to close on overlay click */
+    closeOnOverlayClick?: boolean;
+    /** Whether to close on escape key */
+    closeOnEscape?: boolean;
+    /** Whether to show close button */
+    showCloseButton?: boolean;
+    /** Custom class name */
+    className?: string;
+    /** Test ID */
+    testId?: string;
+    /** Modal content */
+    children?: ReactNode;
+}
+
+export declare type ModalSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
+
+/**
+ * Modal/dialog width presets.
+ */
+export declare const modalWidths: {
+    /** 400px - Small dialogs, confirmations */
+    readonly sm: 400;
+    /** 500px - Medium dialogs */
+    readonly md: 500;
+    /** 640px - Large dialogs */
+    readonly lg: 640;
+    /** 800px - Extra large dialogs */
+    readonly xl: 800;
+    /** Full width minus margins */
+    readonly full: "calc(100vw - 48px)";
+};
+
+export declare const Nav: ForwardRefExoticComponent<NavProps & RefAttributes<HTMLElement>>;
+
+export declare interface NavProps extends SemanticProps {
+    'aria-label'?: string;
+}
+
+/** Base neutral palette - grayscale with subtle warmth */
+export declare const neutrals: {
+    readonly white: "#FFFFFF";
+    readonly gray50: "#FAFAFA";
+    readonly gray100: "#F5F5F7";
+    readonly gray200: "#E8E8ED";
+    readonly gray300: "#D2D2D7";
+    readonly gray400: "#AEAEB2";
+    readonly gray500: "#8E8E93";
+    readonly gray600: "#636366";
+    readonly gray700: "#48484A";
+    readonly gray800: "#3A3A3C";
+    readonly gray900: "#2C2C2E";
+    readonly gray950: "#1D1D1F";
+    readonly black: "#000000";
+};
+
+/**
+ * Opacity scale for various visual states.
+ */
+export declare const opacity: {
+    /** 0 - Fully transparent */
+    readonly transparent: 0;
+    /** 0.05 - Barely visible */
+    readonly 5: 0.05;
+    /** 0.1 - Subtle hint */
+    readonly 10: 0.1;
+    /** 0.15 - Light overlay */
+    readonly 15: 0.15;
+    /** 0.2 - Soft background */
+    readonly 20: 0.2;
+    /** 0.25 - Quarter visible */
+    readonly 25: 0.25;
+    /** 0.3 - Light emphasis */
+    readonly 30: 0.3;
+    /** 0.4 - Medium-light */
+    readonly 40: 0.4;
+    /** 0.5 - Half visible (disabled) */
+    readonly 50: 0.5;
+    /** 0.6 - Medium */
+    readonly 60: 0.6;
+    /** 0.7 - Medium-strong */
+    readonly 70: 0.7;
+    /** 0.75 - Three-quarter visible */
+    readonly 75: 0.75;
+    /** 0.8 - Strong */
+    readonly 80: 0.8;
+    /** 0.9 - Almost opaque */
+    readonly 90: 0.9;
+    /** 0.95 - Nearly opaque */
+    readonly 95: 0.95;
+    /** 1 - Fully opaque */
+    readonly opaque: 1;
+};
+
+export declare const Overlay: ForwardRefExoticComponent<OverlayProps & RefAttributes<HTMLDivElement>>;
+
+export declare interface OverlayProps extends HTMLAttributes<HTMLDivElement> {
+    /** Whether the overlay is visible */
+    isOpen: boolean;
+    /** Callback when overlay is clicked */
+    onClose?: () => void;
+    /** Whether clicking the overlay closes it */
+    closeOnClick?: boolean;
+    /** Whether to apply backdrop blur */
+    blur?: boolean;
+    /** Blur intensity (in pixels) */
+    blurAmount?: number;
+    /** Background opacity (0-1) */
+    opacity?: number;
+    /** Whether to use a portal */
+    usePortal?: boolean;
+    /** Z-index for the overlay */
+    zIndex?: number;
+    /** Custom class name */
+    className?: string;
+    /** Test ID */
+    testId?: string;
+}
+
+/**
+ * Page header spacing
+ */
+export declare const pageHeaderSpacing: {
+    /** Bottom margin: 24px */
+    readonly marginBottom: number;
+};
+
+export declare const Pagination: ForwardRefExoticComponent<PaginationProps & RefAttributes<HTMLElement>>;
+
+export declare interface PaginationProps extends Omit<HTMLAttributes<HTMLElement>, 'onChange'> {
+    /** Current page (1-indexed) */
+    page: number;
+    /** Total number of pages */
+    totalPages: number;
+    /** Callback when page changes */
+    onChange: (page: number) => void;
+    /** Pagination size */
+    size?: PaginationSize;
+    /** Pagination variant */
+    variant?: PaginationVariant;
+    /** Number of sibling pages to show on each side */
+    siblingCount?: number;
+    /** Whether to show first/last buttons */
+    showFirstLast?: boolean;
+    /** Whether to show prev/next buttons */
+    showPrevNext?: boolean;
+    /** Whether the component is disabled */
+    disabled?: boolean;
+    /** Custom class name */
+    className?: string;
+    /** Test ID */
+    testId?: string;
+}
+
+export declare type PaginationSize = 'sm' | 'md' | 'lg';
+
+export declare type PaginationVariant = 'default' | 'simple' | 'minimal';
+
+export declare const Popover: default_2.ForwardRefExoticComponent<PopoverProps & default_2.RefAttributes<HTMLDivElement>>;
+
+export declare type PopoverPlacement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end';
+
+export declare interface PopoverProps extends Omit<HTMLAttributes<HTMLDivElement>, 'content'> {
+    /** Popover content */
+    content: ReactNode;
+    /** Trigger element */
+    children: ReactElement;
+    /** Placement relative to trigger */
+    placement?: PopoverPlacement;
+    /** How to trigger the popover */
+    trigger?: PopoverTrigger;
+    /** Whether the popover is open (controlled) */
+    isOpen?: boolean;
+    /** Default open state (uncontrolled) */
+    defaultOpen?: boolean;
+    /** Callback when open state changes */
+    onOpenChange?: (isOpen: boolean) => void;
+    /** Offset from trigger in pixels */
+    offset?: number;
+    /** Delay before showing (hover trigger) */
+    openDelay?: number;
+    /** Delay before hiding (hover trigger) */
+    closeDelay?: number;
+    /** Whether to close on outside click */
+    closeOnOutsideClick?: boolean;
+    /** Whether to show arrow */
+    showArrow?: boolean;
+    /** Custom class name for content */
+    className?: string;
+    /** Test ID */
+    testId?: string;
+}
+
+/**
+ * Tooltip and popover constraints.
+ */
+export declare const popoverSizing: {
+    /** Default tooltip max width */
+    readonly tooltipMaxWidth: 300;
+    /** Default popover max width */
+    readonly popoverMaxWidth: 400;
+    /** Arrow size for tooltips */
+    readonly arrowSize: number;
+    /** Gap between trigger and popover */
+    readonly offset: number;
+};
+
+export declare type PopoverTrigger = 'click' | 'hover';
+
+export declare function Portal({ children, container, disabled }: PortalProps): JSX.Element | null;
+
+export declare namespace Portal {
+    var displayName: string;
+}
+
+export declare interface PortalProps {
+    /** Content to render in the portal */
+    children: ReactNode;
+    /** Container element or selector to render into */
+    container?: HTMLElement | string;
+    /** Whether the portal is disabled (renders inline) */
+    disabled?: boolean;
+}
+
+/**
+ * Preloads multiple components in parallel.
+ * Useful for preloading a group of related components.
+ *
+ * @example
+ * ```tsx
+ * // Preload all form components before navigating to form page
+ * preloadComponents([
+ *   () => import('./Input'),
+ *   () => import('./Select'),
+ *   () => import('./Checkbox'),
+ * ])
+ * ```
+ */
+export declare function preloadComponents(importFns: Array<() => Promise<{
+    default: ComponentType<unknown>;
+}>>): Promise<void>;
+
+/** Primary brand colors - sophisticated blue */
+export declare const primary: {
+    readonly 50: "#EEF4FF";
+    readonly 100: "#E0EBFF";
+    readonly 200: "#C7DAFF";
+    readonly 300: "#A4C1FF";
+    readonly 400: "#7A9FFF";
+    readonly 500: "#5578F4";
+    readonly 600: "#3B5CE9";
+    readonly 700: "#2D47D6";
+    readonly 800: "#2A3CAD";
+    readonly 900: "#283889";
+    readonly 950: "#1A2352";
+};
+
+export declare const Progress: ForwardRefExoticComponent<ProgressProps & RefAttributes<HTMLDivElement>>;
+
+export declare type ProgressIntent = 'primary' | 'success' | 'warning' | 'error';
+
+export declare interface ProgressProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** Current value (0-100) */
+    value?: number;
+    /** Maximum value */
+    max?: number;
+    /** Progress size */
+    size?: ProgressSize;
+    /** Progress variant */
+    variant?: ProgressVariant;
+    /** Progress intent/color */
+    intent?: ProgressIntent;
+    /** Whether to show the value label */
+    showValue?: boolean;
+    /** Whether the progress is indeterminate */
+    indeterminate?: boolean;
+    /** Format value for display */
+    formatValue?: (value: number, max: number) => string;
+    /** Label text */
+    label?: string;
+    /** Custom class name */
+    className?: string;
+    /** Test ID */
+    testId?: string;
+}
+
+export declare type ProgressSize = 'xs' | 'sm' | 'md' | 'lg';
+
+export declare type ProgressVariant = 'linear' | 'circular';
+
+/**
+ * Quick action card dimensions
+ */
+export declare const quickActionSizes: {
+    /** Icon container size: 48px */
+    readonly iconContainer: number;
+    /** Default padding: 16px */
+    readonly padding: number;
+};
+
+/** Border radius scale */
+export declare const radii: {
+    /** No radius - sharp corners */
+    readonly none: 0;
+    /** 2px - very subtle rounding */
+    readonly xs: 2;
+    /** 4px - subtle rounding */
+    readonly sm: 4;
+    /** 6px - slight rounding */
+    readonly md: 6;
+    /** 8px - default rounding */
+    readonly DEFAULT: 8;
+    /** 10px - medium rounding */
+    readonly lg: 10;
+    /** 12px - noticeable rounding */
+    readonly xl: 12;
+    /** 16px - prominent rounding */
+    readonly '2xl': 16;
+    /** 20px - heavy rounding */
+    readonly '3xl': 20;
+    /** 24px - very heavy rounding */
+    readonly '4xl': 24;
+    /** 9999px - full/pill shape */
+    readonly full: 9999;
+};
+
+export declare const Radio: ForwardRefExoticComponent<RadioProps & RefAttributes<HTMLInputElement>>;
+
+export declare function RadioGroup({ name, value: controlledValue, defaultValue, onChange, disabled, size, orientation, gap, children, className, style, }: RadioGroupProps): JSX.Element;
+
+export declare namespace RadioGroup {
+    var displayName: string;
+}
+
+export declare interface RadioGroupProps {
+    /** Radio group name */
+    name: string;
+    /** Current value */
+    value?: string;
+    /** Default value (uncontrolled) */
+    defaultValue?: string;
+    /** Callback when value changes */
+    onChange?: (value: string) => void;
+    /** Whether the group is disabled */
+    disabled?: boolean;
+    /** Radio size */
+    size?: RadioSize;
+    /** Orientation */
+    orientation?: 'horizontal' | 'vertical';
+    /** Gap between items */
+    gap?: number;
+    /** Children (Radio components) */
+    children: ReactNode;
+    /** Custom class name */
+    className?: string;
+    /** Custom styles */
+    style?: CSSProperties;
+}
+
+export declare interface RadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> {
+    /** Radio size */
+    size?: RadioSize;
+    /** Radio label */
+    label?: ReactNode;
+    /** Description below the label */
+    description?: ReactNode;
+    /** Whether the radio is invalid */
+    isInvalid?: boolean;
+    /** Custom class name */
+    className?: string;
+    /** Test ID */
+    testId?: string;
+}
+
+export declare type RadioSize = 'sm' | 'md' | 'lg';
+
+/** Responsive value wrapper */
+export declare type ResponsiveValue<T> = T | {
+    base?: T;
+    sm?: T;
+    md?: T;
+    lg?: T;
+    xl?: T;
+    '2xl'?: T;
+};
+
+/**
+ * Scale transform values for interactive states.
+ */
+export declare const scale: {
+    /** Pressed state - subtle shrink */
+    readonly pressed: 0.98;
+    /** Strong pressed - more noticeable */
+    readonly pressedStrong: 0.95;
+    /** Checkbox pressed */
+    readonly controlPressed: 0.92;
+    /** Hidden/initial state for animations */
+    readonly hidden: 0.95;
+    /** Normal state */
+    readonly normal: 1;
+    /** Slight grow on hover */
+    readonly hover: 1.02;
+    /** Emphasized grow */
+    readonly emphasized: 1.05;
+};
+
+export declare const ScreenReaderOnly: ForwardRefExoticComponent<ScreenReaderOnlyProps & RefAttributes<HTMLSpanElement>>;
+
+export declare interface ScreenReaderOnlyProps extends HTMLAttributes<HTMLSpanElement> {
+    /** Content to be read by screen readers */
+    children: ReactNode;
+    /** Whether to make content focusable (shows on focus) */
+    focusable?: boolean;
+    /** Custom class name */
+    className?: string;
+    /** Test ID */
+    testId?: string;
+}
+
+/**
+ * Search input dimensions
+ */
+export declare const searchInputSizes: {
+    /** Minimum width: 240px */
+    readonly minWidth: 240;
+    /** Icon left offset: 12px */
+    readonly iconLeft: number;
+    /** Input left padding to accommodate icon: 36px */
+    readonly paddingLeft: 36;
+};
+
+export declare const Section: ForwardRefExoticComponent<SectionProps & RefAttributes<HTMLElement>>;
+
+export declare interface SectionProps extends Omit<HTMLAttributes<HTMLElement>, 'title'> {
+    /** Section title */
+    title?: ReactNode;
+    /** Section description */
+    description?: ReactNode;
+    /** Title level for accessibility */
+    titleLevel?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    /** Spacing between sections */
+    spacing?: SectionSpacing;
+    /** Whether to show a divider above the section */
+    divider?: boolean;
+    /** Actions to display in the header (right side) */
+    actions?: ReactNode;
+    /** Custom class name */
+    className?: string;
+    /** Test ID */
+    testId?: string;
+}
+
+export declare type SectionSpacing = 'none' | 'sm' | 'md' | 'lg' | 'xl';
+
+export declare const Select: ForwardRefExoticComponent<SelectProps & RefAttributes<HTMLSelectElement>>;
+
+export declare interface SelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'size'> {
+    /** Select size */
+    size?: SelectSize;
+    /** Visual variant */
+    variant?: SelectVariant;
+    /** Error state */
+    isInvalid?: boolean;
+    /** Placeholder option */
+    placeholder?: string;
+    /** Custom class name */
+    className?: string;
+    /** Test ID */
+    testId?: string;
+    /** Children (option elements) */
+    children?: ReactNode;
+}
+
+export declare type SelectSize = 'sm' | 'md' | 'lg';
+
+export declare type SelectVariant = 'outline' | 'filled';
+
+declare interface SemanticProps extends HTMLAttributes<HTMLElement> {
+    children?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+    testId?: string;
+}
+
+/** Semantic spacing aliases */
+export declare const semanticSpacing: {
+    /** Component internal padding - tight */
+    readonly componentPaddingXs: number;
+    /** Component internal padding - default */
+    readonly componentPaddingSm: number;
+    /** Component internal padding - comfortable */
+    readonly componentPaddingMd: number;
+    /** Component internal padding - spacious */
+    readonly componentPaddingLg: number;
+    /** Gap between inline elements */
+    readonly inlineGapXs: 4;
+    readonly inlineGapSm: number;
+    readonly inlineGapMd: number;
+    readonly inlineGapLg: number;
+    /** Gap between stacked elements */
+    readonly stackGapXs: number;
+    readonly stackGapSm: number;
+    readonly stackGapMd: number;
+    readonly stackGapLg: number;
+    readonly stackGapXl: number;
+    /** Page/section margins */
+    readonly sectionGapSm: number;
+    readonly sectionGapMd: number;
+    readonly sectionGapLg: number;
+    readonly sectionGapXl: number;
+    /** Container padding */
+    readonly containerPaddingSm: number;
+    readonly containerPaddingMd: number;
+    readonly containerPaddingLg: number;
+};
+
+/** Shadow scale - from subtle to elevated */
+export declare const shadows: {
+    /** No shadow */
+    readonly none: "none";
+    /** Extra small - subtle lift, perfect for cards on hover */
+    readonly xs: "0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 3px 0 rgba(0, 0, 0, 0.06)";
+    /** Small - light elevation for cards, inputs */
+    readonly sm: "0 1px 3px 0 rgba(0, 0, 0, 0.04), 0 2px 6px 0 rgba(0, 0, 0, 0.06), 0 0 1px 0 rgba(0, 0, 0, 0.04)";
+    /** Medium - default card shadow */
+    readonly md: "0 2px 4px -1px rgba(0, 0, 0, 0.04), 0 4px 8px -1px rgba(0, 0, 0, 0.06), 0 8px 16px -2px rgba(0, 0, 0, 0.06)";
+    /** Large - dropdown, popover shadows */
+    readonly lg: "0 4px 6px -2px rgba(0, 0, 0, 0.03), 0 8px 16px -4px rgba(0, 0, 0, 0.08), 0 16px 32px -8px rgba(0, 0, 0, 0.08)";
+    /** Extra large - modal shadows */
+    readonly xl: "0 8px 16px -4px rgba(0, 0, 0, 0.04), 0 16px 32px -8px rgba(0, 0, 0, 0.08), 0 32px 64px -16px rgba(0, 0, 0, 0.12)";
+    /** 2XL - floating panels, notifications */
+    readonly '2xl': "0 12px 24px -6px rgba(0, 0, 0, 0.05), 0 24px 48px -12px rgba(0, 0, 0, 0.1), 0 48px 96px -24px rgba(0, 0, 0, 0.15)";
+    /** Inner shadow - for inset effects */
+    readonly inner: "inset 0 2px 4px 0 rgba(0, 0, 0, 0.05)";
+    /** Inner shadow - stronger, for pressed states */
+    readonly innerStrong: "inset 0 2px 6px 0 rgba(0, 0, 0, 0.1)";
+};
+
+/**
+ * Sidebar dimensions
+ */
+export declare const sidebarSizes: {
+    /** Collapsed sidebar width: 72px */
+    readonly collapsed: 72;
+    /** Expanded sidebar width: 240px */
+    readonly expanded: 240;
+    /** Logo size: 32px */
+    readonly logoSize: number;
+    /** Nav icon size: 20px */
+    readonly navIconSize: number;
+};
+
+/** Size variants */
+export declare type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+export declare const Skeleton: ForwardRefExoticComponent<SkeletonProps & RefAttributes<HTMLDivElement>>;
+
+export declare interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
+    /** Skeleton variant */
+    variant?: SkeletonVariant;
+    /** Width */
+    width?: string | number;
+    /** Height */
+    height?: string | number;
+    /** Border radius (for rectangular variant) */
+    radius?: string | number;
+    /** Whether to animate */
+    animate?: boolean;
+    /** Custom class name */
+    className?: string;
+    /** Test ID */
+    testId?: string;
+}
+
+export declare function SkeletonText({ lines, gap, lastLineWidth, className, }: SkeletonTextProps): JSX.Element;
+
+export declare namespace SkeletonText {
+    var displayName: string;
+}
+
+/** Text skeleton with multiple lines */
+export declare interface SkeletonTextProps {
+    /** Number of lines */
+    lines?: number;
+    /** Gap between lines */
+    gap?: number;
+    /** Last line width percentage */
+    lastLineWidth?: string;
+    /** Custom class name */
+    className?: string;
+}
+
+export declare type SkeletonVariant = 'text' | 'circular' | 'rectangular';
+
+export declare const Slider: ForwardRefExoticComponent<SliderProps & RefAttributes<HTMLInputElement>>;
+
+export declare interface SliderProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type' | 'onChange'> {
+    /** Slider size */
+    size?: SliderSize;
+    /** Minimum value */
+    min?: number;
+    /** Maximum value */
+    max?: number;
+    /** Step increment */
+    step?: number;
+    /** Current value (controlled) */
+    value?: number;
+    /** Default value (uncontrolled) */
+    defaultValue?: number;
+    /** Callback when value changes */
+    onChange?: (value: number) => void;
+    /** Whether to show the value label */
+    showValue?: boolean;
+    /** Format the value for display */
+    formatValue?: (value: number) => string;
+    /** Label for the slider */
+    label?: string;
+    /** Whether the slider is disabled */
+    disabled?: boolean;
+    /** Custom class name */
+    className?: string;
+    /** Test ID */
+    testId?: string;
+}
+
+export declare type SliderSize = 'sm' | 'md' | 'lg';
+
+export declare const Spacer: ForwardRefExoticComponent<SpacerProps & RefAttributes<HTMLDivElement>>;
+
+export declare interface SpacerProps extends HTMLAttributes<HTMLDivElement> {
+    /** Fixed size in spacing tokens */
+    size?: SpacingKey_2;
+    /** Custom size in pixels */
+    customSize?: number;
+    /** Whether to expand to fill available space (flex: 1) */
+    flex?: boolean;
+    /** Direction of the spacer */
+    direction?: 'horizontal' | 'vertical';
+    /** Custom class name */
+    className?: string;
+}
+
+declare type Spacing = typeof spacing;
+
+/** Spacing scale - values in pixels */
+export declare const spacing: {
+    /** 0px */
+    readonly 0: 0;
+    /** 1px - hairline */
+    readonly px: 1;
+    /** 2px - micro */
+    readonly 0.5: number;
+    /** 4px - tiny */
+    readonly 1: 4;
+    /** 6px */
+    readonly 1.5: number;
+    /** 8px - extra small */
+    readonly 2: number;
+    /** 10px */
+    readonly 2.5: number;
+    /** 12px - small */
+    readonly 3: number;
+    /** 14px */
+    readonly 3.5: number;
+    /** 16px - medium (base) */
+    readonly 4: number;
+    /** 20px */
+    readonly 5: number;
+    /** 24px - large */
+    readonly 6: number;
+    /** 28px */
+    readonly 7: number;
+    /** 32px - extra large */
+    readonly 8: number;
+    /** 36px */
+    readonly 9: number;
+    /** 40px */
+    readonly 10: number;
+    /** 44px */
+    readonly 11: number;
+    /** 48px - 2x large */
+    readonly 12: number;
+    /** 56px */
+    readonly 14: number;
+    /** 64px - 3x large */
+    readonly 16: number;
+    /** 80px */
+    readonly 20: number;
+    /** 96px - 4x large */
+    readonly 24: number;
+    /** 112px */
+    readonly 28: number;
+    /** 128px */
+    readonly 32: number;
+    /** 160px */
+    readonly 40: number;
+    /** 192px */
+    readonly 48: number;
+    /** 224px */
+    readonly 56: number;
+    /** 256px */
+    readonly 64: number;
+    /** 320px */
+    readonly 80: number;
+    /** 384px */
+    readonly 96: number;
+};
+
+declare type SpacingKey = keyof Spacing;
+
+declare type SpacingKey_2 = keyof typeof spacing;
+
+declare type SpacingKey_3 = keyof typeof spacing;
+
+/** Spacing props for components */
+export declare interface SpacingProps {
+    /** Margin all sides */
+    m?: SpacingKey;
+    /** Margin horizontal (left + right) */
+    mx?: SpacingKey;
+    /** Margin vertical (top + bottom) */
+    my?: SpacingKey;
+    /** Margin top */
+    mt?: SpacingKey;
+    /** Margin right */
+    mr?: SpacingKey;
+    /** Margin bottom */
+    mb?: SpacingKey;
+    /** Margin left */
+    ml?: SpacingKey;
+    /** Padding all sides */
+    p?: SpacingKey;
+    /** Padding horizontal (left + right) */
+    px?: SpacingKey;
+    /** Padding vertical (top + bottom) */
+    py?: SpacingKey;
+    /** Padding top */
+    pt?: SpacingKey;
+    /** Padding right */
+    pr?: SpacingKey;
+    /** Padding bottom */
+    pb?: SpacingKey;
+    /** Padding left */
+    pl?: SpacingKey;
+}
+
+/** Convert spacing key to CSS value with px unit */
+export declare function spacingToCss(key: keyof typeof spacing | undefined): string | undefined;
+
+/** Alias for Loader */
+export declare const Spinner: ForwardRefExoticComponent<LoaderProps & RefAttributes<HTMLDivElement>>;
+
+/**
+ * Alias for ScreenReaderOnly with a shorter name
+ */
+export declare const SrOnly: ForwardRefExoticComponent<ScreenReaderOnlyProps & RefAttributes<HTMLSpanElement>>;
+
+export declare const Stack: StackComponent;
+
+declare interface StackComponent {
+    <E extends ElementType = 'div'>(props: StackProps<E> & {
+        ref?: ComponentPropsWithRef<E>['ref'];
+    }): default_2.JSX.Element | null;
+    displayName?: string;
+}
+
+export declare interface StackOwnProps extends SpacingProps {
+    /** The element type to render */
+    as?: ElementType;
+    /** Custom class name */
+    className?: string;
+    /** Custom inline styles */
+    style?: CSSProperties;
+    /** Stack direction */
+    direction?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
+    /** Gap between items */
+    gap?: SpacingKey;
+    /** Horizontal gap (for row direction) */
+    gapX?: SpacingKey;
+    /** Vertical gap (for column direction) */
+    gapY?: SpacingKey;
+    /** Align items */
+    align?: CSSProperties['alignItems'];
+    /** Justify content */
+    justify?: CSSProperties['justifyContent'];
+    /** Flex wrap */
+    wrap?: CSSProperties['flexWrap'];
+    /** Whether to render as inline-flex */
+    inline?: boolean;
+    /** Children */
+    children?: ReactNode;
+    /** Test ID */
+    testId?: string;
+}
+
+export declare type StackProps<E extends ElementType = 'div'> = StackOwnProps & Omit<ComponentPropsWithoutRef<E>, keyof StackOwnProps>;
+
+/**
+ * Stat card dimensions
+ */
+export declare const statCardSizes: {
+    /** Icon container size: 48px */
+    readonly iconContainer: number;
+};
+
+/**
+ * Semantic opacity values for common states.
+ */
+export declare const stateOpacity: {
+    /** Disabled elements */
+    readonly disabled: 0.5;
+    /** Placeholder text */
+    readonly placeholder: 0.5;
+    /** Hover overlay */
+    readonly hoverOverlay: 0.05;
+    /** Active/pressed overlay */
+    readonly activeOverlay: 0.1;
+    /** Modal backdrop */
+    readonly backdrop: 0.4;
+    /** Loading state */
+    readonly loading: 0.7;
+    /** Secondary text */
+    readonly muted: 0.6;
+    /** Subtle decorative elements */
+    readonly subtle: 0.3;
+};
+
+/** Success - calm green */
+export declare const success: {
+    readonly 50: "#ECFDF5";
+    readonly 100: "#D1FAE5";
+    readonly 200: "#A7F3D0";
+    readonly 300: "#6EE7B7";
+    readonly 400: "#34D399";
+    readonly 500: "#10B981";
+    readonly 600: "#059669";
+    readonly 700: "#047857";
+    readonly 800: "#065F46";
+    readonly 900: "#064E3B";
+    readonly 950: "#022C22";
+};
+
+export declare const Switch: ForwardRefExoticComponent<SwitchProps & RefAttributes<HTMLInputElement>>;
+
+export declare interface SwitchProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> {
+    /** Switch size */
+    size?: SwitchSize;
+    /** Label text */
+    label?: ReactNode;
+    /** Description below label */
+    description?: ReactNode;
+    /** Custom class name */
+    className?: string;
+    /** Test ID */
+    testId?: string;
+}
+
+export declare type SwitchSize = 'sm' | 'md' | 'lg';
+
+/**
+ * Switch/toggle sizes.
+ */
+export declare const switchSizes: {
+    readonly sm: {
+        readonly width: 36;
+        readonly height: 20;
+        readonly thumb: 16;
+    };
+    readonly md: {
+        readonly width: 44;
+        readonly height: 24;
+        readonly thumb: 20;
+    };
+    readonly lg: {
+        readonly width: 52;
+        readonly height: 28;
+        readonly thumb: 24;
+    };
+};
+
+export declare const Tab: ForwardRefExoticComponent<TabProps & RefAttributes<HTMLButtonElement>>;
+
+export declare const Table: ForwardRefExoticComponent<TableProps & RefAttributes<HTMLTableElement>>;
+
+export declare const TableBody: ForwardRefExoticComponent<TableBodyProps & RefAttributes<HTMLTableSectionElement>>;
+
+export declare interface TableBodyProps extends HTMLAttributes<HTMLTableSectionElement> {
+    /** Custom class name */
+    className?: string;
+}
+
+export declare const TableCaption: ForwardRefExoticComponent<TableCaptionProps & RefAttributes<HTMLTableCaptionElement>>;
+
+export declare interface TableCaptionProps extends HTMLAttributes<HTMLTableCaptionElement> {
+    /** Caption placement */
+    placement?: 'top' | 'bottom';
+    /** Custom class name */
+    className?: string;
+}
+
+export declare const TableCell: ForwardRefExoticComponent<TableCellProps & RefAttributes<HTMLTableCellElement>>;
+
+export declare interface TableCellProps extends TdHTMLAttributes<HTMLTableCellElement> {
+    /** Text alignment */
+    align?: 'left' | 'center' | 'right';
+    /** Whether to truncate text */
+    truncate?: boolean;
+    /** Custom class name */
+    className?: string;
+}
+
+export declare const TableFoot: ForwardRefExoticComponent<TableFootProps & RefAttributes<HTMLTableSectionElement>>;
+
+export declare interface TableFootProps extends HTMLAttributes<HTMLTableSectionElement> {
+    /** Custom class name */
+    className?: string;
+}
+
+export declare const TableHead: ForwardRefExoticComponent<TableHeadProps & RefAttributes<HTMLTableSectionElement>>;
+
+export declare const TableHeader: ForwardRefExoticComponent<TableHeaderProps & RefAttributes<HTMLTableCellElement>>;
+
+export declare interface TableHeaderProps extends ThHTMLAttributes<HTMLTableCellElement> {
+    /** Whether the column is sortable */
+    sortable?: boolean;
+    /** Sort direction */
+    sortDirection?: 'asc' | 'desc' | null;
+    /** Callback when sort is requested */
+    onSort?: () => void;
+    /** Text alignment */
+    align?: 'left' | 'center' | 'right';
+    /** Custom class name */
+    className?: string;
+}
+
+export declare interface TableHeadProps extends HTMLAttributes<HTMLTableSectionElement> {
+    /** Whether the header is sticky */
+    sticky?: boolean;
+    /** Custom class name */
+    className?: string;
+}
+
+export declare interface TableProps extends HTMLAttributes<HTMLTableElement> {
+    /** Table size */
+    size?: TableSize;
+    /** Table variant */
+    variant?: TableVariant;
+    /** Whether the table has a sticky header */
+    stickyHeader?: boolean;
+    /** Whether the table is in a loading state */
+    loading?: boolean;
+    /** Custom class name */
+    className?: string;
+    /** Test ID */
+    testId?: string;
+}
+
+export declare const TableRow: ForwardRefExoticComponent<TableRowProps & RefAttributes<HTMLTableRowElement>>;
+
+export declare interface TableRowProps extends HTMLAttributes<HTMLTableRowElement> {
+    /** Whether the row is selected */
+    selected?: boolean;
+    /** Whether the row is clickable */
+    clickable?: boolean;
+    /** Custom class name */
+    className?: string;
+}
+
+export declare type TableSize = 'sm' | 'md' | 'lg';
+
+export declare type TableVariant = 'default' | 'striped' | 'bordered';
+
+export declare const TabList: ForwardRefExoticComponent<TabListProps & RefAttributes<HTMLDivElement>>;
+
+export declare interface TabListProps extends HTMLAttributes<HTMLDivElement> {
+    /** Custom class name */
+    className?: string;
+}
+
+export declare const TabPanel: ForwardRefExoticComponent<TabPanelProps & RefAttributes<HTMLDivElement>>;
+
+export declare interface TabPanelProps extends HTMLAttributes<HTMLDivElement> {
+    /** Panel value (must match a Tab value) */
+    value: string;
+    /** Custom class name */
+    className?: string;
+}
+
+export declare const TabPanels: ForwardRefExoticComponent<TabPanelsProps & RefAttributes<HTMLDivElement>>;
+
+export declare interface TabPanelsProps extends HTMLAttributes<HTMLDivElement> {
+    /** Custom class name */
+    className?: string;
+}
+
+export declare interface TabProps extends Omit<HTMLAttributes<HTMLButtonElement>, 'onClick'> {
+    /** Tab value */
+    value: string;
+    /** Whether the tab is disabled */
+    disabled?: boolean;
+    /** Icon before the label */
+    icon?: ReactNode;
+    /** Custom class name */
+    className?: string;
+}
+
+export declare const Tabs: ForwardRefExoticComponent<TabsProps & RefAttributes<HTMLDivElement>>;
+
+export declare type TabsOrientation = 'horizontal' | 'vertical';
+
+export declare interface TabsProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    /** Currently selected tab value */
+    value?: string;
+    /** Default value (uncontrolled) */
+    defaultValue?: string;
+    /** Callback when tab changes */
+    onChange?: (value: string) => void;
+    /** Tab size */
+    size?: TabsSize;
+    /** Tab variant */
+    variant?: TabsVariant;
+    /** Tab orientation */
+    orientation?: TabsOrientation;
+    /** Custom class name */
+    className?: string;
+    /** Test ID */
+    testId?: string;
+}
+
+export declare type TabsSize = 'sm' | 'md' | 'lg';
+
+export declare type TabsVariant = 'line' | 'enclosed' | 'soft';
+
+declare const Text_2: TextComponent & {
+    displayName: string;
+};
+export { Text_2 as Text }
+
+export declare const Textarea: ForwardRefExoticComponent<TextareaProps & RefAttributes<HTMLTextAreaElement>>;
+
+export declare interface TextareaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'size'> {
+    /** Textarea size */
+    size?: TextareaSize;
+    /** Visual variant */
+    variant?: TextareaVariant;
+    /** Error state */
+    isInvalid?: boolean;
+    /** Auto resize based on content */
+    autoResize?: boolean;
+    /** Minimum rows */
+    minRows?: number;
+    /** Maximum rows */
+    maxRows?: number;
+    /** Show character count */
+    showCount?: boolean;
+    /** Max character length */
+    maxLength?: number;
+    /** Custom class name */
+    className?: string;
+    /** Test ID */
+    testId?: string;
+}
+
+export declare type TextareaSize = 'sm' | 'md' | 'lg';
+
+export declare type TextareaVariant = 'outline' | 'filled';
+
+declare type TextComponent = <E extends ElementType = 'p'>(props: TextProps<E> & {
+    ref?: ComponentPropsWithRef<E>['ref'];
+}) => default_2.JSX.Element | null;
+
+export declare const TextField: ForwardRefExoticComponent<TextFieldProps & RefAttributes<HTMLInputElement>>;
+
+export declare interface TextFieldProps extends InputProps {
+    /** Field label */
+    label?: ReactNode;
+    /** Helper text below the input */
+    helperText?: ReactNode;
+    /** Error message (also sets isInvalid) */
+    errorMessage?: ReactNode;
+    /** Whether the field is required */
+    isRequired?: boolean;
+    /** Whether to hide the label visually (still accessible) */
+    hideLabel?: boolean;
+}
+
+export declare interface TextOwnProps {
+    /** Text style preset */
+    variant?: 'body' | 'bodyLarge' | 'bodySmall' | 'label' | 'caption' | 'overline' | 'code';
+    /** Font size */
+    size?: FontSize;
+    /** Font weight */
+    weight?: FontWeight;
+    /** Line height */
+    leading?: LineHeight;
+    /** Text alignment */
+    align?: CSSProperties['textAlign'];
+    /** Text color (CSS variable or direct value) */
+    color?: string;
+    /** Whether text should truncate with ellipsis */
+    truncate?: boolean;
+    /** Max number of lines before truncating */
+    lineClamp?: number;
+    /** Custom class name */
+    className?: string;
+    /** Custom inline styles */
+    style?: CSSProperties;
+    /** Children */
+    children?: ReactNode;
+    /** Test ID */
+    testId?: string;
+}
+
+export declare type TextProps<E extends ElementType = 'p'> = TextOwnProps & Omit<ComponentPropsWithoutRef<E>, keyof TextOwnProps> & {
+    /** The element type to render */
+    as?: E;
+};
+
+/** Pre-composed text styles */
+export declare const textStyles: {
+    /** Display styles - for hero sections */
+    readonly displayLarge: {
+        readonly fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif";
+        readonly fontSize: 96;
+        readonly fontWeight: 700;
+        readonly lineHeight: 1;
+        readonly letterSpacing: "-0.05em";
+    };
+    readonly displayMedium: {
+        readonly fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif";
+        readonly fontSize: 72;
+        readonly fontWeight: 700;
+        readonly lineHeight: 1;
+        readonly letterSpacing: "-0.05em";
+    };
+    readonly displaySmall: {
+        readonly fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif";
+        readonly fontSize: 60;
+        readonly fontWeight: 700;
+        readonly lineHeight: 1.15;
+        readonly letterSpacing: "-0.025em";
+    };
+    /** Heading styles */
+    readonly h1: {
+        readonly fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif";
+        readonly fontSize: 48;
+        readonly fontWeight: 700;
+        readonly lineHeight: 1.15;
+        readonly letterSpacing: "-0.025em";
+    };
+    readonly h2: {
+        readonly fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif";
+        readonly fontSize: 40;
+        readonly fontWeight: 700;
+        readonly lineHeight: 1.15;
+        readonly letterSpacing: "-0.025em";
+    };
+    readonly h3: {
+        readonly fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif";
+        readonly fontSize: 32;
+        readonly fontWeight: 600;
+        readonly lineHeight: 1.25;
+        readonly letterSpacing: "-0.025em";
+    };
+    readonly h4: {
+        readonly fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif";
+        readonly fontSize: 28;
+        readonly fontWeight: 600;
+        readonly lineHeight: 1.25;
+        readonly letterSpacing: "0em";
+    };
+    readonly h5: {
+        readonly fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif";
+        readonly fontSize: 24;
+        readonly fontWeight: 600;
+        readonly lineHeight: 1.25;
+        readonly letterSpacing: "0em";
+    };
+    readonly h6: {
+        readonly fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif";
+        readonly fontSize: 20;
+        readonly fontWeight: 600;
+        readonly lineHeight: 1.25;
+        readonly letterSpacing: "0em";
+    };
+    /** Body text styles */
+    readonly bodyLarge: {
+        readonly fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif";
+        readonly fontSize: 18;
+        readonly fontWeight: 400;
+        readonly lineHeight: 1.5;
+        readonly letterSpacing: "0em";
+    };
+    readonly bodyDefault: {
+        readonly fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif";
+        readonly fontSize: 16;
+        readonly fontWeight: 400;
+        readonly lineHeight: 1.5;
+        readonly letterSpacing: "0em";
+    };
+    readonly bodySmall: {
+        readonly fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif";
+        readonly fontSize: 14;
+        readonly fontWeight: 400;
+        readonly lineHeight: 1.5;
+        readonly letterSpacing: "0em";
+    };
+    /** Utility text styles */
+    readonly label: {
+        readonly fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif";
+        readonly fontSize: 12;
+        readonly fontWeight: 500;
+        readonly lineHeight: 1.5;
+        readonly letterSpacing: "0.025em";
+    };
+    readonly caption: {
+        readonly fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif";
+        readonly fontSize: 11;
+        readonly fontWeight: 400;
+        readonly lineHeight: 1.625;
+        readonly letterSpacing: "0.025em";
+    };
+    readonly overline: {
+        readonly fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif";
+        readonly fontSize: 11;
+        readonly fontWeight: 600;
+        readonly lineHeight: 1.5;
+        readonly letterSpacing: "0.1em";
+        readonly textTransform: "uppercase";
+    };
+    /** Code styles */
+    readonly code: {
+        readonly fontFamily: "'SF Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace";
+        readonly fontSize: 12;
+        readonly fontWeight: 400;
+        readonly lineHeight: 1.625;
+        readonly letterSpacing: "0em";
+    };
+};
+
+/** Complete theme definition */
+export declare interface Theme {
+    /** Theme name identifier */
+    name: 'light' | 'dark' | string;
+    /** Theme colors */
+    colors: ThemeColors;
+}
+
+/**
+ * Brycks Design System - Theme Types
+ *
+ * Type definitions for the theme system.
+ */
+/** Semantic color tokens that change between themes */
+export declare interface ThemeColors {
+    /** Background colors */
+    background: {
+        /** Main app background */
+        app: string;
+        /** Subtle background - for sections */
+        subtle: string;
+        /** Muted background - for cards, inputs */
+        muted: string;
+        /** Elevated background - for raised elements */
+        elevated: string;
+        /** Overlay background - for modals, drawers */
+        overlay: string;
+        /** Inverse background */
+        inverse: string;
+    };
+    /** Foreground/text colors */
+    foreground: {
+        /** Primary text color */
+        default: string;
+        /** Muted/secondary text */
+        muted: string;
+        /** Subtle/tertiary text */
+        subtle: string;
+        /** Disabled text */
+        disabled: string;
+        /** Inverse text (on dark/light backgrounds) */
+        inverse: string;
+        /** Link text */
+        link: string;
+    };
+    /** Border colors */
+    border: {
+        /** Default border */
+        default: string;
+        /** Muted border - subtle dividers */
+        muted: string;
+        /** Strong border - more visible */
+        strong: string;
+        /** Focus border */
+        focus: string;
+    };
+    /** Primary brand colors (contextual) */
+    primary: {
+        /** Default primary */
+        default: string;
+        /** Hover state */
+        hover: string;
+        /** Active/pressed state */
+        active: string;
+        /** Muted primary - for backgrounds */
+        muted: string;
+        /** Soft variant hover - for soft button hover */
+        softHover: string;
+        /** Primary text on primary background */
+        foreground: string;
+    };
+    /** Accent colors (contextual) */
+    accent: {
+        default: string;
+        hover: string;
+        active: string;
+        muted: string;
+        softHover: string;
+        foreground: string;
+    };
+    /** Semantic status colors */
+    success: {
+        default: string;
+        hover: string;
+        muted: string;
+        softHover: string;
+        foreground: string;
+    };
+    warning: {
+        default: string;
+        hover: string;
+        muted: string;
+        softHover: string;
+        foreground: string;
+    };
+    error: {
+        default: string;
+        hover: string;
+        muted: string;
+        softHover: string;
+        foreground: string;
+    };
+    info: {
+        default: string;
+        hover: string;
+        muted: string;
+        softHover: string;
+        foreground: string;
+    };
+}
+
+/** Theme configuration for customization */
+export declare interface ThemeConfig {
+    /** Light theme overrides */
+    light?: Partial<ThemeColors>;
+    /** Dark theme overrides */
+    dark?: Partial<ThemeColors>;
+    /** Default mode */
+    defaultMode?: ThemeMode;
+}
+
+/** Theme context value */
+export declare interface ThemeContextValue {
+    /** Current theme */
+    theme: Theme;
+    /** Current mode */
+    mode: ThemeMode;
+    /** Resolved mode (light or dark, never system) */
+    resolvedMode: 'light' | 'dark';
+    /** Set theme mode */
+    setMode: (mode: ThemeMode) => void;
+    /** Toggle between light and dark */
+    toggleMode: () => void;
+}
+
+/** Theme mode */
+export declare type ThemeMode = 'light' | 'dark' | 'system';
+
+export declare function ThemeProvider({ children, config, skipCSSVariables, }: ThemeProviderProps): JSX.Element;
+
+declare interface ThemeProviderProps {
+    /** Child components */
+    children: ReactNode;
+    /** Theme configuration for customization */
+    config?: ThemeConfig;
+    /** Skip injecting CSS variables (for SSR or custom handling) */
+    skipCSSVariables?: boolean;
+}
+
+export declare const Toast: ForwardRefExoticComponent<ToastProps & RefAttributes<HTMLDivElement>>;
+
+declare interface ToastContextValue {
+    toasts: ToastItem[];
+    addToast: (props: Omit<ToastProps, 'isOpen' | 'onClose'>) => string;
+    removeToast: (id: string) => void;
+    removeAll: () => void;
+}
+
+export declare type ToastIntent = 'info' | 'success' | 'warning' | 'error';
+
+declare interface ToastItem {
+    id: string;
+    props: Omit<ToastProps, 'isOpen' | 'onClose'>;
+}
+
+export declare type ToastPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
+
+export declare interface ToastProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** Toast intent/type */
+    intent?: ToastIntent;
+    /** Toast title */
+    title?: ReactNode;
+    /** Toast description */
+    description?: ReactNode;
+    /** Whether the toast is visible */
+    isOpen?: boolean;
+    /** Duration in ms before auto-dismiss (0 = no auto-dismiss) */
+    duration?: number;
+    /** Callback when toast should close */
+    onClose?: () => void;
+    /** Whether to show close button */
+    showCloseButton?: boolean;
+    /** Action button */
+    action?: ReactNode;
+    /** Custom icon */
+    icon?: ReactNode;
+    /** Custom class name */
+    className?: string;
+    /** Test ID */
+    testId?: string;
+}
+
+export declare function ToastProvider({ children, position, maxToasts, }: ToastProviderProps): JSX.Element;
+
+export declare interface ToastProviderProps {
+    children: ReactNode;
+    position?: ToastPosition;
+    maxToasts?: number;
+}
+
+export declare const Tooltip: ForwardRefExoticComponent<TooltipProps & RefAttributes<HTMLDivElement>>;
+
+export declare type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right';
+
+export declare interface TooltipProps extends Omit<HTMLAttributes<HTMLDivElement>, 'content'> {
+    /** Tooltip content */
+    content: ReactNode;
+    /** Placement relative to trigger */
+    placement?: TooltipPlacement;
+    /** Delay before showing (ms) */
+    delay?: number;
+    /** Whether tooltip is disabled */
+    isDisabled?: boolean;
+    /** Custom class name */
+    className?: string;
+    /** Test ID */
+    testId?: string;
+    /** Trigger element */
+    children: ReactNode;
+}
+
+/**
+ * Pre-composed CSS transition strings for common use cases.
+ */
+export declare const transition: {
+    /** No transition */
+    readonly none: "none";
+    /** Ultra-fast - for micro-interactions (50ms) */
+    readonly instant: "all 50ms cubic-bezier(0, 0, 0.2, 1)";
+    /** Fast - for hover states, toggles (100ms) */
+    readonly fast: "all 100ms cubic-bezier(0, 0, 0.2, 1)";
+    /** Quick - standard interactive feedback (150ms) */
+    readonly quick: "all 150ms cubic-bezier(0, 0, 0.2, 1)";
+    /** Default - most state changes (200ms) */
+    readonly default: "all 200ms cubic-bezier(0, 0, 0.2, 1)";
+    /** Smooth - focus states, form elements (300ms) */
+    readonly smooth: "all 300ms cubic-bezier(0.25, 0.1, 0.25, 1)";
+    /** Slow - reveals, modals (400ms) */
+    readonly slow: "all 400ms cubic-bezier(0, 0, 0.2, 1)";
+    /** Spring - bouncy, tactile feel (300ms) */
+    readonly spring: "all 300ms cubic-bezier(0.22, 1, 0.36, 1)";
+    /** Colors only - optimized for color transitions */
+    readonly colors: "color 100ms cubic-bezier(0, 0, 0.2, 1), background-color 100ms cubic-bezier(0, 0, 0.2, 1), border-color 100ms cubic-bezier(0, 0, 0.2, 1)";
+    /** Transform only - for scale, translate */
+    readonly transform: "transform 200ms cubic-bezier(0, 0, 0.2, 1)";
+    /** Opacity only - for fade effects */
+    readonly opacity: "opacity 200ms cubic-bezier(0, 0, 0.2, 1)";
+    /** Shadow only - for elevation changes */
+    readonly shadow: "box-shadow 200ms cubic-bezier(0, 0, 0.2, 1)";
+};
+
+/**
+ * CSS transition property groups.
+ */
+export declare const transitionProperties: {
+    readonly all: "all";
+    readonly colors: "color, background-color, border-color, fill, stroke";
+    readonly opacity: "opacity";
+    readonly shadow: "box-shadow";
+    readonly transform: "transform";
+    readonly dimensions: "width, height, padding, margin";
+};
+
+/** Pre-composed transition presets */
+export declare const transitions: {
+    /** No transition */
+    readonly none: "none";
+    /** Default - for most interactions */
+    readonly default: "all 200ms cubic-bezier(0, 0, 0.2, 1)";
+    /** Fast - for hover states, micro-interactions */
+    readonly fast: "all 100ms cubic-bezier(0, 0, 0.2, 1)";
+    /** Quick - for quick feedback */
+    readonly quick: "all 150ms cubic-bezier(0, 0, 0.2, 1)";
+    /** Smooth - for focus states */
+    readonly smooth: "all 300ms cubic-bezier(0.25, 0.1, 0.25, 1)";
+    /** Spring - for interactive elements */
+    readonly spring: "all 300ms cubic-bezier(0.22, 1, 0.36, 1)";
+    /** Slow - for reveals, modals */
+    readonly slow: "all 400ms cubic-bezier(0, 0, 0.2, 1)";
+    /** Transform only */
+    readonly transform: "transform 200ms cubic-bezier(0, 0, 0.2, 1)";
+    /** Opacity only */
+    readonly opacity: "opacity 200ms cubic-bezier(0, 0, 0.2, 1)";
+    /** Colors only */
+    readonly colors: "color 100ms cubic-bezier(0, 0, 0.2, 1), background-color 100ms cubic-bezier(0, 0, 0.2, 1), border-color 100ms cubic-bezier(0, 0, 0.2, 1)";
+    /** Shadow only */
+    readonly shadow: "box-shadow 200ms cubic-bezier(0, 0, 0.2, 1)";
+};
+
+export declare function useClickOutside<T extends HTMLElement = HTMLElement>(handler: (event: MouseEvent | TouchEvent) => void, options?: UseClickOutsideOptions): RefObject<T | null>;
+
+export declare interface UseClickOutsideOptions {
+    /** Whether the listener is active */
+    enabled?: boolean;
+    /** Event type to listen for */
+    eventType?: 'mousedown' | 'mouseup' | 'click';
+}
+
+export declare function useControllable<T>(options: UseControllableOptions<T>): UseControllableReturn<T>;
+
+/**
+ * useControllable Hook
+ *
+ * Manages controlled vs uncontrolled state pattern.
+ * Allows components to work in both controlled and uncontrolled modes.
+ */
+export declare interface UseControllableOptions<T> {
+    /** Controlled value (if provided, component is controlled) */
+    value?: T;
+    /** Default value for uncontrolled mode */
+    defaultValue: T;
+    /** Callback when value changes */
+    onChange?: (value: T) => void;
+}
+
+export declare interface UseControllableReturn<T> {
+    /** Current value */
+    value: T;
+    /** Set the value */
+    setValue: (value: T | ((prev: T) => T)) => void;
+    /** Whether the component is controlled */
+    isControlled: boolean;
+}
+
+export declare function useDisclosure(options?: UseDisclosureOptions): UseDisclosureReturn;
+
+export declare interface UseDisclosureOptions {
+    defaultIsOpen?: boolean;
+    onOpen?: () => void;
+    onClose?: () => void;
+}
+
+/**
+ * useDisclosure Hook
+ *
+ * Manages open/closed state for modals, popovers, drawers, etc.
+ */
+export declare interface UseDisclosureReturn {
+    isOpen: boolean;
+    onOpen: () => void;
+    onClose: () => void;
+    onToggle: () => void;
+    setIsOpen: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+export declare function useFocusTrap<T extends HTMLElement = HTMLDivElement>(options?: UseFocusTrapOptions): UseFocusTrapReturn<T>;
+
+export declare interface UseFocusTrapOptions {
+    /** Whether the focus trap is active */
+    enabled?: boolean;
+    /** Whether to auto-focus the first element */
+    autoFocus?: boolean;
+    /** Whether to restore focus on unmount */
+    restoreFocus?: boolean;
+    /** Initial element to focus (selector or element) */
+    initialFocus?: string | HTMLElement | null;
+}
+
+export declare interface UseFocusTrapReturn<T extends HTMLElement> {
+    /** Ref to attach to the container */
+    ref: RefObject<T | null>;
+    /** Manually focus the first focusable element */
+    focusFirst: () => void;
+    /** Manually focus the last focusable element */
+    focusLast: () => void;
+}
+
+/**
+ * useId Hook
+ *
+ * Generates a stable unique ID for accessibility attributes.
+ * Falls back to custom implementation for React < 18.
+ */
+export declare function useId(prefix?: string): string;
+
+export declare function useIds(count: number, prefix?: string): string[];
+
+export declare function useIsDesktop(): boolean;
+
+/** Pre-built responsive hooks */
+export declare function useIsMobile(): boolean;
+
+export declare function useIsTablet(): boolean;
+
+export declare function useKeyboardNavigation(options: UseKeyboardNavigationOptions): UseKeyboardNavigationReturn;
+
+/**
+ * useKeyboardNavigation Hook
+ *
+ * Handles keyboard navigation for lists, menus, and other navigable components.
+ */
+export declare interface UseKeyboardNavigationOptions {
+    /** Total number of items */
+    itemCount: number;
+    /** Initial focused index */
+    initialIndex?: number;
+    /** Whether navigation wraps around */
+    loop?: boolean;
+    /** Orientation of the list */
+    orientation?: 'horizontal' | 'vertical' | 'both';
+    /** Callback when index changes */
+    onIndexChange?: (index: number) => void;
+    /** Callback when item is selected */
+    onSelect?: (index: number) => void;
+}
+
+export declare interface UseKeyboardNavigationReturn {
+    /** Current focused index */
+    focusedIndex: number;
+    /** Set focused index */
+    setFocusedIndex: (index: number) => void;
+    /** Handle keyboard events */
+    handleKeyDown: (event: React.KeyboardEvent) => void;
+    /** Get props for an item */
+    getItemProps: (index: number) => {
+        tabIndex: number;
+        'data-focused': boolean;
+        onFocus: () => void;
+    };
+}
+
+/**
+ * useMediaQuery Hook
+ *
+ * React hook for responsive design with media queries.
+ */
+export declare function useMediaQuery(query: string): boolean;
+
+export declare function usePrefersDarkMode(): boolean;
+
+export declare function usePrefersReducedMotion(): boolean;
+
+/** Hook to access theme context */
+export declare function useTheme(): ThemeContextValue;
+
+/** Hook to get current theme colors */
+export declare function useThemeColors(): ThemeColors;
+
+export declare function useToast(): ToastContextValue;
+
+export declare const Video: ForwardRefExoticComponent<VideoProps & RefAttributes<VideoRef>>;
+
+export declare type VideoFit = 'cover' | 'contain' | 'fill' | 'none' | 'scale-down';
+
+export declare type VideoPreload = 'none' | 'metadata' | 'auto';
+
+export declare interface VideoProps extends Omit<VideoHTMLAttributes<HTMLVideoElement>, 'autoPlay'> {
+    /** Video source URL */
+    src: string;
+    /** Poster image URL shown before playback */
+    poster?: string;
+    /** Aspect ratio (width/height) */
+    aspectRatio?: number | string;
+    /** How the video should fit within its container */
+    fit?: VideoFit;
+    /** Preload behavior */
+    preload?: VideoPreload;
+    /**
+     * Autoplay behavior.
+     * - true: Autoplay (muted, respects reduced motion)
+     * - 'muted': Autoplay muted only
+     * - false: No autoplay
+     * @default false
+     */
+    autoPlay?: boolean | 'muted';
+    /** Loop video playback */
+    loop?: boolean;
+    /** Show native controls */
+    controls?: boolean;
+    /** Start muted */
+    muted?: boolean;
+    /** Play inline on mobile (vs fullscreen) */
+    playsInline?: boolean;
+    /** Border radius using design tokens */
+    radius?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
+    /** Callback when video starts playing */
+    onPlay?: (event: SyntheticEvent<HTMLVideoElement>) => void;
+    /** Callback when video pauses */
+    onPause?: (event: SyntheticEvent<HTMLVideoElement>) => void;
+    /** Callback when video ends */
+    onEnded?: (event: SyntheticEvent<HTMLVideoElement>) => void;
+    /** Callback when video can play */
+    onCanPlay?: (event: SyntheticEvent<HTMLVideoElement>) => void;
+    /** Callback on error */
+    onError?: (event: SyntheticEvent<HTMLVideoElement>) => void;
+    /** Custom class name */
+    className?: string;
+    /** Test ID */
+    testId?: string;
+}
+
+export declare interface VideoRef {
+    /** Play the video */
+    play: () => Promise<void>;
+    /** Pause the video */
+    pause: () => void;
+    /** Toggle play/pause */
+    toggle: () => void;
+    /** Seek to time in seconds */
+    seek: (time: number) => void;
+    /** Get current time in seconds */
+    getCurrentTime: () => number;
+    /** Get duration in seconds */
+    getDuration: () => number;
+    /** Check if video is playing */
+    isPlaying: () => boolean;
+    /** Get the underlying video element */
+    getElement: () => HTMLVideoElement | null;
+}
+
+export declare const VStack: StackComponent;
+
+/** Warning - warm amber */
+export declare const warning: {
+    readonly 50: "#FFFBEB";
+    readonly 100: "#FEF3C7";
+    readonly 200: "#FDE68A";
+    readonly 300: "#FCD34D";
+    readonly 400: "#FBBF24";
+    readonly 500: "#F59E0B";
+    readonly 600: "#D97706";
+    readonly 700: "#B45309";
+    readonly 800: "#92400E";
+    readonly 900: "#78350F";
+    readonly 950: "#451A03";
+};
+
+/** Z-index scale */
+export declare const zIndex: {
+    /** Hidden - below everything */
+    readonly hide: -1;
+    /** Auto - default stacking */
+    readonly auto: "auto";
+    /** Base - normal content */
+    readonly base: 0;
+    /** Docked - sticky elements */
+    readonly docked: 10;
+    /** Dropdown - menus, selects */
+    readonly dropdown: 1000;
+    /** Sticky - sticky headers */
+    readonly sticky: 1100;
+    /** Banner - notification banners */
+    readonly banner: 1200;
+    /** Overlay - backdrop overlays */
+    readonly overlay: 1300;
+    /** Modal - dialog windows */
+    readonly modal: 1400;
+    /** Popover - popovers, tooltips */
+    readonly popover: 1500;
+    /** Skiplink - accessibility skip links */
+    readonly skipLink: 1600;
+    /** Toast - notification toasts */
+    readonly toast: 1700;
+    /** Tooltip - tooltips (highest) */
+    readonly tooltip: 1800;
+};
+
+export { }