@titan-design/react-ui 0.0.1

package/dist/index.d.mts

@@ -0,0 +1,2484 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
+import { ViewProps, PressableProps, View, TextInputProps, TextInput, ImageSourcePropType, ModalProps as ModalProps$1, TextProps } from 'react-native';
+export { ComponentType, ElevationConfig, ElevationLevel, ShadowIntensity, ShadowSurface, ThemeConfig, ThemeMode, buttonSizes, componentElevationRanges, createFlatShadow, createPressedHoverShadow, createPressedShadow, createRaisedHoverShadow, createRaisedShadow, darkThemeCSSVars, darken, discreteRainbow, elevationSystem, getBaseSurfaceColor, getDiscreteRainbowColor, getElevationConfig, getElevationShadow, getElevationSurface, getHoverColors, getSemanticColors, getThemeCSSVars, getValidatedElevation, gluestackConfig, hexToRgb, hsvToRgb, isDark, lightThemeCSSVars, lighten, neumorphicShadows, primitiveBorderRadius, primitiveBreakpoints, primitiveColors, primitiveShadows, primitiveSpacing, primitiveTypography, primitiveZIndex, rgbToHex, rgbToHsv, semanticColorsDark, semanticColorsLight, semanticTypography, shadowColors } from './theme/index.mjs';
+import { ClassValue } from 'clsx';
+
+type AlertStatus = 'success' | 'info' | 'warning' | 'error';
+type AlertVariant = 'subtle' | 'outline' | 'solid';
+interface AlertProps extends ViewProps {
+    /** Alert status type */
+    status?: AlertStatus;
+    /** Visual variant */
+    variant?: AlertVariant;
+    /** Custom icon element */
+    icon?: React.ReactNode;
+    /** Whether to show the default icon */
+    showIcon?: boolean;
+    /** Callback when close button is pressed */
+    onClose?: () => void;
+    /** Additional className */
+    className?: string;
+    children?: React.ReactNode;
+}
+/**
+ * Alert component for displaying status messages.
+ *
+ * @example
+ * <Alert status="success">
+ *   <AlertTitle>Success!</AlertTitle>
+ *   <AlertDescription>Your changes have been saved.</AlertDescription>
+ * </Alert>
+ *
+ * <Alert status="error" variant="solid" onClose={() => {}}>
+ *   <AlertDescription>Something went wrong.</AlertDescription>
+ * </Alert>
+ */
+declare function Alert({ status, variant, icon, showIcon, onClose, className, children, ...props }: AlertProps): react_jsx_runtime.JSX.Element;
+interface AlertTitleProps {
+    children?: React.ReactNode;
+    className?: string;
+}
+/**
+ * Title for Alert component.
+ */
+declare function AlertTitle({ children, className }: AlertTitleProps): react_jsx_runtime.JSX.Element;
+interface AlertDescriptionProps {
+    children?: React.ReactNode;
+    className?: string;
+}
+/**
+ * Description for Alert component.
+ */
+declare function AlertDescription({ children, className }: AlertDescriptionProps): react_jsx_runtime.JSX.Element;
+
+type ButtonVariant = 'solid' | 'outline' | 'ghost' | 'link';
+type ButtonSize = 'sm' | 'md' | 'lg';
+type ButtonColor = 'primary' | 'secondary' | 'success' | 'error' | 'warning' | 'info';
+interface ButtonProps extends Omit<PressableProps, 'children'> {
+    /** Visual style variant */
+    variant?: ButtonVariant;
+    /** Size of the button */
+    size?: ButtonSize;
+    /** Color scheme */
+    color?: ButtonColor;
+    /** Whether this is an icon-only button (square aspect ratio) */
+    isIconButton?: boolean;
+    /** Whether the button is disabled */
+    isDisabled?: boolean;
+    /** Whether the button is in a loading state */
+    isLoading?: boolean;
+    /** Loading text to display */
+    loadingText?: string;
+    /** Whether the button should take full width */
+    fullWidth?: boolean;
+    /** Additional className for styling */
+    className?: string;
+    /** Button content */
+    children?: React.ReactNode;
+}
+/**
+ * Button component following compound component pattern.
+ *
+ * @example
+ * <Button variant="solid" color="primary">
+ *   <ButtonText>Click me</ButtonText>
+ * </Button>
+ *
+ * // Or with icon
+ * <Button variant="outline" color="secondary">
+ *   <ButtonIcon as={PlusIcon} />
+ *   <ButtonText>Add item</ButtonText>
+ * </Button>
+ */
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<View>>;
+interface ButtonTextProps {
+    children: React.ReactNode;
+    className?: string;
+}
+/**
+ * Text component for Button. Use inside Button for consistent styling.
+ */
+declare function ButtonText({ children, className }: ButtonTextProps): react_jsx_runtime.JSX.Element;
+interface ButtonIconProps {
+    /** Icon component to render */
+    as: React.ComponentType<{
+        size?: number;
+        color?: string;
+        className?: string;
+    }>;
+    /** Icon size */
+    size?: number;
+    /** Additional className */
+    className?: string;
+}
+/**
+ * Icon component for Button. Use inside Button for icons.
+ */
+declare function ButtonIcon({ as: Icon, size, className }: ButtonIconProps): react_jsx_runtime.JSX.Element;
+interface ButtonSpinnerProps {
+    className?: string;
+}
+/**
+ * Spinner component for Button loading state.
+ */
+declare function ButtonSpinner({ className }: ButtonSpinnerProps): react_jsx_runtime.JSX.Element;
+
+type InputSize = 'sm' | 'md' | 'lg';
+type InputVariant = 'outline' | 'filled' | 'underline';
+interface InputProps extends Omit<TextInputProps, 'editable'> {
+    /** Input size */
+    size?: InputSize;
+    /** Visual variant */
+    variant?: InputVariant;
+    /** Whether the input is disabled */
+    isDisabled?: boolean;
+    /** Whether the input has an error */
+    isInvalid?: boolean;
+    /** Whether the input is read-only */
+    isReadOnly?: boolean;
+    /** Whether the input is required */
+    isRequired?: boolean;
+    /** Whether this is a multiline textarea */
+    multiline?: boolean;
+    /** Number of visible lines for multiline */
+    numberOfLines?: number;
+    /** Label text */
+    label?: string;
+    /** Helper text shown below input */
+    helperText?: string;
+    /** Error message (shown when isInvalid is true) */
+    errorMessage?: string;
+    /** Left element/icon */
+    leftElement?: React.ReactNode;
+    /** Right element/icon */
+    rightElement?: React.ReactNode;
+    /** Additional className for the container */
+    className?: string;
+    /** Additional className for the input */
+    inputClassName?: string;
+}
+/**
+ * Input component for text entry.
+ *
+ * @example
+ * <Input
+ *   label="Email"
+ *   placeholder="Enter your email"
+ *   helperText="We'll never share your email"
+ * />
+ *
+ * // With error state
+ * <Input
+ *   label="Password"
+ *   isInvalid
+ *   errorMessage="Password is required"
+ * />
+ */
+declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<TextInput>>;
+interface InputGroupProps {
+    children: React.ReactNode;
+    className?: string;
+}
+/**
+ * Container for grouping related inputs.
+ */
+declare function InputGroup({ children, className }: InputGroupProps): react_jsx_runtime.JSX.Element;
+interface PasswordInputProps extends Omit<InputProps, 'secureTextEntry' | 'rightElement'> {
+    /** Custom show password icon */
+    showIcon?: React.ReactNode;
+    /** Custom hide password icon */
+    hideIcon?: React.ReactNode;
+}
+/**
+ * Password input with visibility toggle.
+ *
+ * @example
+ * <PasswordInput
+ *   label="Password"
+ *   placeholder="Enter your password"
+ * />
+ */
+declare const PasswordInput: React.ForwardRefExoticComponent<PasswordInputProps & React.RefAttributes<TextInput>>;
+
+type CardVariant = 'elevated' | 'outline' | 'filled';
+type CardElevation = 1 | 2 | 3;
+interface CardProps extends ViewProps {
+    /** Visual variant */
+    variant?: CardVariant;
+    /** Elevation level (1=subtle, 2=standard, 3=prominent) */
+    elevation?: CardElevation;
+    /** Whether the card is interactive (hoverable/pressable) */
+    isInteractive?: boolean;
+    /** Whether the card is in a loading state (renders skeleton) */
+    isLoading?: boolean;
+    /** Callback when card is pressed (makes card interactive) */
+    onPress?: () => void;
+    /** Custom border color (hex, rgb, or CSS color). Useful for status cards. */
+    borderColor?: string;
+    /** Custom background color (hex, rgb, or CSS color). Useful for colored cards. */
+    bgColor?: string;
+    /** Additional className */
+    className?: string;
+    children?: React.ReactNode;
+    /** Show header skeleton when loading (default: true) */
+    skeletonHasHeader?: boolean;
+    /** Show footer skeleton when loading (default: false) */
+    skeletonHasFooter?: boolean;
+    /** Number of content lines in skeleton when loading (default: 3) */
+    skeletonContentLines?: number;
+}
+/**
+ * Card component for containing related content.
+ *
+ * @example
+ * <Card>
+ *   <CardHeader>
+ *     <CardTitle>Card Title</CardTitle>
+ *     <CardDescription>Card description</CardDescription>
+ *   </CardHeader>
+ *   <CardContent>
+ *     <Text>Card content goes here</Text>
+ *   </CardContent>
+ *   <CardFooter>
+ *     <Button>Action</Button>
+ *   </CardFooter>
+ * </Card>
+ *
+ * // Interactive card
+ * <Card isInteractive onPress={() => console.log('pressed')}>
+ *   <CardContent>Click me</CardContent>
+ * </Card>
+ */
+declare function Card({ variant, elevation, isInteractive, isLoading, onPress, borderColor, bgColor, className, children, style, skeletonHasHeader, skeletonHasFooter, skeletonContentLines, ...props }: CardProps): react_jsx_runtime.JSX.Element;
+interface CardHeaderProps {
+    children?: React.ReactNode;
+    className?: string;
+}
+/**
+ * Header section of a Card.
+ */
+declare function CardHeader({ children, className }: CardHeaderProps): react_jsx_runtime.JSX.Element;
+interface CardTitleProps {
+    children?: React.ReactNode;
+    className?: string;
+}
+/**
+ * Title for CardHeader.
+ */
+declare function CardTitle({ children, className }: CardTitleProps): react_jsx_runtime.JSX.Element;
+interface CardDescriptionProps {
+    children?: React.ReactNode;
+    className?: string;
+}
+/**
+ * Description for CardHeader.
+ */
+declare function CardDescription({ children, className }: CardDescriptionProps): react_jsx_runtime.JSX.Element;
+interface CardContentProps {
+    children?: React.ReactNode;
+    className?: string;
+}
+/**
+ * Content section of a Card.
+ */
+declare function CardContent({ children, className }: CardContentProps): react_jsx_runtime.JSX.Element;
+interface CardFooterProps {
+    children?: React.ReactNode;
+    className?: string;
+}
+/**
+ * Footer section of a Card.
+ */
+declare function CardFooter({ children, className }: CardFooterProps): react_jsx_runtime.JSX.Element;
+interface CardSkeletonProps {
+    /** Whether to show header skeleton */
+    hasHeader?: boolean;
+    /** Whether to show footer skeleton */
+    hasFooter?: boolean;
+    /** Number of content lines */
+    contentLines?: number;
+    /** Additional className */
+    className?: string;
+}
+/**
+ * Skeleton placeholder for Card loading state.
+ */
+declare function CardSkeleton({ hasHeader, hasFooter, contentLines, className, }: CardSkeletonProps): react_jsx_runtime.JSX.Element;
+
+type BadgeVariant = 'solid' | 'subtle' | 'outline';
+type BadgeColor = 'default' | 'primary' | 'secondary' | 'success' | 'error' | 'warning' | 'info';
+type BadgeSize = 'sm' | 'md' | 'lg';
+interface BadgeProps extends ViewProps {
+    /** Visual variant */
+    variant?: BadgeVariant;
+    /** Color scheme */
+    color?: BadgeColor;
+    /** Size */
+    size?: BadgeSize;
+    /** Additional className */
+    className?: string;
+    children?: React.ReactNode;
+}
+/**
+ * Badge component for status indicators and labels.
+ *
+ * @example
+ * <Badge color="success">Active</Badge>
+ * <Badge variant="outline" color="warning">Pending</Badge>
+ */
+declare function Badge({ variant, color, size, className, children, ...props }: BadgeProps): react_jsx_runtime.JSX.Element;
+interface BadgeTextProps {
+    children: React.ReactNode;
+    className?: string;
+}
+/**
+ * Text component for Badge content.
+ */
+declare function BadgeText({ children, className }: BadgeTextProps): react_jsx_runtime.JSX.Element;
+
+type SpinnerSize = 'sm' | 'md' | 'lg' | 'xl';
+type SpinnerColor = 'primary' | 'secondary' | 'white' | 'default';
+interface SpinnerProps extends ViewProps {
+    /** Spinner size */
+    size?: SpinnerSize;
+    /** Color scheme */
+    color?: SpinnerColor;
+    /** Accessibility label */
+    label?: string;
+    /** Additional className */
+    className?: string;
+}
+/**
+ * Spinner component for loading states.
+ *
+ * @example
+ * <Spinner size="md" color="primary" />
+ *
+ * // In a button
+ * <Button isLoading>
+ *   <Spinner size="sm" color="white" />
+ *   <ButtonText>Loading...</ButtonText>
+ * </Button>
+ */
+declare function Spinner({ size, color, label, className, ...props }: SpinnerProps): react_jsx_runtime.JSX.Element;
+
+type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+interface AvatarProps extends ViewProps {
+    /** Avatar size */
+    size?: AvatarSize;
+    /** Image source */
+    source?: ImageSourcePropType;
+    /** Fallback text (usually initials) */
+    fallback?: string;
+    /** Alt text for accessibility */
+    alt?: string;
+    /** Additional className */
+    className?: string;
+}
+/**
+ * Avatar component for user/entity representation.
+ *
+ * @example
+ * // With image
+ * <Avatar source={{ uri: 'https://example.com/avatar.jpg' }} alt="User" />
+ *
+ * // With fallback initials
+ * <Avatar fallback="JD" />
+ *
+ * // With badge
+ * <AvatarGroup>
+ *   <Avatar source={source1} />
+ *   <Avatar source={source2} />
+ *   <AvatarBadge />
+ * </AvatarGroup>
+ */
+declare function Avatar({ size, source, fallback, alt, className, ...props }: AvatarProps): react_jsx_runtime.JSX.Element;
+interface AvatarBadgeProps {
+    /** Badge color */
+    color?: 'success' | 'error' | 'warning' | 'default';
+    /** Additional className */
+    className?: string;
+}
+/**
+ * Status badge for Avatar (e.g., online indicator).
+ */
+declare function AvatarBadge({ color, className }: AvatarBadgeProps): react_jsx_runtime.JSX.Element;
+interface AvatarGroupProps {
+    children: React.ReactNode;
+    /** Maximum avatars to show before +N indicator */
+    max?: number;
+    /** Size of avatars */
+    size?: AvatarSize;
+    /** Additional className */
+    className?: string;
+}
+/**
+ * Group of avatars with stacking effect.
+ */
+declare function AvatarGroup({ children, max, size, className, }: AvatarGroupProps): react_jsx_runtime.JSX.Element;
+
+type DividerOrientation = 'horizontal' | 'vertical';
+interface DividerProps extends ViewProps {
+    /** Divider orientation */
+    orientation?: DividerOrientation;
+    /** Additional className */
+    className?: string;
+}
+/**
+ * Divider component for visual separation of content.
+ *
+ * @example
+ * <Divider />
+ * <Divider orientation="vertical" />
+ */
+declare function Divider({ orientation, className, ...props }: DividerProps): react_jsx_runtime.JSX.Element;
+
+type CheckboxSize = 'sm' | 'md' | 'lg';
+interface CheckboxProps extends Omit<PressableProps, 'children'> {
+    /** Whether the checkbox is checked */
+    isChecked?: boolean;
+    /** Whether the checkbox is in indeterminate state */
+    isIndeterminate?: boolean;
+    /** Whether the checkbox is disabled */
+    isDisabled?: boolean;
+    /** Whether the checkbox is invalid */
+    isInvalid?: boolean;
+    /** Checkbox size */
+    size?: CheckboxSize;
+    /** Label text */
+    label?: string;
+    /** Helper text */
+    helperText?: string;
+    /** Value for forms */
+    value?: string;
+    /** Callback when checked state changes */
+    onCheckedChange?: (checked: boolean) => void;
+    /** Additional className */
+    className?: string;
+}
+/**
+ * Checkbox component for boolean inputs.
+ *
+ * @example
+ * <Checkbox
+ *   isChecked={checked}
+ *   onCheckedChange={setChecked}
+ *   label="Accept terms and conditions"
+ * />
+ */
+declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<View>>;
+interface CheckboxGroupProps {
+    children: React.ReactNode;
+    /** Label for the group */
+    label?: string;
+    /** Orientation of checkboxes */
+    orientation?: 'horizontal' | 'vertical';
+    /** Additional className */
+    className?: string;
+}
+/**
+ * Container for grouping related checkboxes.
+ */
+declare function CheckboxGroup({ children, label, orientation, className, }: CheckboxGroupProps): react_jsx_runtime.JSX.Element;
+
+type SwitchSize = 'sm' | 'md' | 'lg';
+interface SwitchProps extends Omit<PressableProps, 'children'> {
+    /** Whether the switch is on */
+    isChecked?: boolean;
+    /** Whether the switch is disabled */
+    isDisabled?: boolean;
+    /** Switch size */
+    size?: SwitchSize;
+    /** Label text */
+    label?: string;
+    /** Label position */
+    labelPosition?: 'left' | 'right';
+    /** Callback when switch state changes */
+    onCheckedChange?: (checked: boolean) => void;
+    /** Additional className */
+    className?: string;
+}
+/**
+ * Switch component for toggling boolean values.
+ *
+ * @example
+ * <Switch
+ *   isChecked={enabled}
+ *   onCheckedChange={setEnabled}
+ *   label="Enable notifications"
+ * />
+ */
+declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<View>>;
+
+type ModalSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
+type ModalScrollBehavior = 'inside' | 'outside';
+interface ModalProps extends Omit<ModalProps$1, 'visible'> {
+    /** Whether the modal is open */
+    isOpen: boolean;
+    /** Callback when modal should close */
+    onClose?: () => void;
+    /** Modal size */
+    size?: ModalSize;
+    /** Where scrolling happens: inside modal body or whole modal */
+    scrollBehavior?: ModalScrollBehavior;
+    /** Whether clicking backdrop closes modal */
+    closeOnOverlayClick?: boolean;
+    /** Whether to blur the backdrop */
+    backdropBlur?: boolean;
+    /** Additional className for backdrop */
+    backdropClassName?: string;
+    /** Animation type */
+    animationType?: 'none' | 'fade' | 'slide';
+    children?: React.ReactNode;
+}
+/**
+ * Modal component for dialogs and overlays.
+ *
+ * @example
+ * <Modal isOpen={isOpen} onClose={() => setIsOpen(false)}>
+ *   <ModalContent>
+ *     <ModalHeader>
+ *       <ModalTitle>Modal Title</ModalTitle>
+ *       <ModalCloseButton />
+ *     </ModalHeader>
+ *     <ModalBody>
+ *       <Text>Modal content</Text>
+ *     </ModalBody>
+ *     <ModalFooter>
+ *       <Button onPress={() => setIsOpen(false)}>Close</Button>
+ *     </ModalFooter>
+ *   </ModalContent>
+ * </Modal>
+ */
+declare function Modal({ isOpen, onClose, size, scrollBehavior, closeOnOverlayClick, backdropBlur, backdropClassName, animationType, children, ...props }: ModalProps): react_jsx_runtime.JSX.Element;
+interface ModalContentProps {
+    children?: React.ReactNode;
+    className?: string;
+}
+/**
+ * Container for modal content.
+ */
+declare function ModalContent({ children, className }: ModalContentProps): react_jsx_runtime.JSX.Element;
+interface ModalHeaderProps {
+    children?: React.ReactNode;
+    className?: string;
+}
+/**
+ * Header section of modal.
+ */
+declare function ModalHeader({ children, className }: ModalHeaderProps): react_jsx_runtime.JSX.Element;
+interface ModalTitleProps {
+    children?: React.ReactNode;
+    className?: string;
+}
+/**
+ * Title for modal header.
+ */
+declare function ModalTitle({ children, className }: ModalTitleProps): react_jsx_runtime.JSX.Element;
+interface ModalCloseButtonProps {
+    className?: string;
+}
+/**
+ * Close button for modal header.
+ */
+declare function ModalCloseButton({ className }: ModalCloseButtonProps): react_jsx_runtime.JSX.Element;
+interface ModalBodyProps {
+    children?: React.ReactNode;
+    /** Maximum height for scrollable content (when scrollBehavior="inside") */
+    maxHeight?: number;
+    className?: string;
+}
+/**
+ * Body section of modal.
+ */
+declare function ModalBody({ children, maxHeight, className }: ModalBodyProps): react_jsx_runtime.JSX.Element;
+interface ModalFooterProps {
+    children?: React.ReactNode;
+    className?: string;
+}
+/**
+ * Footer section of modal.
+ */
+declare function ModalFooter({ children, className }: ModalFooterProps): react_jsx_runtime.JSX.Element;
+
+type SkeletonVariant = 'text' | 'circle' | 'rect' | 'rounded';
+type SkeletonAnimation = 'pulse' | 'shimmer' | 'none';
+interface SkeletonProps extends ViewProps {
+    /** Shape variant */
+    variant?: SkeletonVariant;
+    /** Animation type */
+    animation?: SkeletonAnimation;
+    /** Width (number for pixels, string for percentages/other) */
+    width?: number | string;
+    /** Height (number for pixels, string for percentages/other) */
+    height?: number | string;
+    /** Border radius (only for 'rect' variant) */
+    borderRadius?: number;
+    /** Additional className */
+    className?: string;
+}
+/**
+ * Skeleton component for loading placeholders.
+ *
+ * @example
+ * // Text skeleton
+ * <Skeleton variant="text" width="60%" />
+ *
+ * // Avatar skeleton
+ * <Skeleton variant="circle" width={48} height={48} />
+ *
+ * // Card skeleton
+ * <Skeleton variant="rounded" width="100%" height={200} />
+ */
+declare function Skeleton({ variant, animation, width, height, borderRadius, className, style, ...props }: SkeletonProps): react_jsx_runtime.JSX.Element;
+interface SkeletonTextProps {
+    /** Number of lines */
+    lines?: number;
+    /** Last line width (percentage) */
+    lastLineWidth?: string;
+    /** Gap between lines */
+    gap?: number;
+    /** Animation type */
+    animation?: SkeletonAnimation;
+    className?: string;
+}
+/**
+ * Multi-line text skeleton.
+ */
+declare function SkeletonText({ lines, lastLineWidth, gap, animation, className, }: SkeletonTextProps): react_jsx_runtime.JSX.Element;
+interface SkeletonCircleProps {
+    /** Size in pixels */
+    size?: number;
+    /** Animation type */
+    animation?: SkeletonAnimation;
+    className?: string;
+}
+/**
+ * Circle skeleton for avatars.
+ */
+declare function SkeletonCircle({ size, animation, className, }: SkeletonCircleProps): react_jsx_runtime.JSX.Element;
+interface SkeletonCardProps {
+    /** Show image area */
+    hasImage?: boolean;
+    /** Image height */
+    imageHeight?: number;
+    /** Number of text lines */
+    lines?: number;
+    /** Animation type */
+    animation?: SkeletonAnimation;
+    className?: string;
+}
+/**
+ * Card skeleton pattern.
+ */
+declare function SkeletonCard({ hasImage, imageHeight, lines, animation, className, }: SkeletonCardProps): react_jsx_runtime.JSX.Element;
+interface SkeletonListItemProps {
+    /** Show avatar */
+    hasAvatar?: boolean;
+    /** Avatar size */
+    avatarSize?: number;
+    /** Number of text lines */
+    lines?: number;
+    /** Animation type */
+    animation?: SkeletonAnimation;
+    className?: string;
+}
+/**
+ * List item skeleton pattern.
+ */
+declare function SkeletonListItem({ hasAvatar, avatarSize, lines, animation, className, }: SkeletonListItemProps): react_jsx_runtime.JSX.Element;
+
+type TabsVariant = 'line' | 'enclosed' | 'soft-rounded';
+type TabsOrientation = 'horizontal' | 'vertical';
+interface TabsProps extends ViewProps {
+    /** Currently active tab index */
+    defaultIndex?: number;
+    /** Controlled active index */
+    index?: number;
+    /** Callback when tab changes */
+    onChange?: (index: number) => void;
+    /** Visual variant */
+    variant?: TabsVariant;
+    /** Tab orientation */
+    orientation?: TabsOrientation;
+    /** Additional className */
+    className?: string;
+    children?: React.ReactNode;
+}
+/**
+ * Tabs component for tabbed navigation.
+ *
+ * @example
+ * <Tabs defaultIndex={0} onChange={(i) => console.log(i)}>
+ *   <TabList>
+ *     <Tab>Tab 1</Tab>
+ *     <Tab>Tab 2</Tab>
+ *     <Tab>Tab 3</Tab>
+ *   </TabList>
+ *   <TabPanels>
+ *     <TabPanel>Content 1</TabPanel>
+ *     <TabPanel>Content 2</TabPanel>
+ *     <TabPanel>Content 3</TabPanel>
+ *   </TabPanels>
+ * </Tabs>
+ */
+declare function Tabs({ defaultIndex, index, onChange, variant, orientation, className, children, ...props }: TabsProps): react_jsx_runtime.JSX.Element;
+interface TabListProps {
+    children?: React.ReactNode;
+    className?: string;
+}
+/**
+ * Container for Tab components.
+ */
+declare function TabList({ children, className }: TabListProps): react_jsx_runtime.JSX.Element;
+interface TabProps {
+    /** Tab index (injected by TabList) */
+    index?: number;
+    /** Whether the tab is disabled */
+    isDisabled?: boolean;
+    /** Additional className */
+    className?: string;
+    children?: React.ReactNode;
+}
+/**
+ * Individual tab button.
+ */
+declare function Tab({ index, isDisabled, className, children, }: TabProps): react_jsx_runtime.JSX.Element;
+interface TabPanelsProps {
+    children?: React.ReactNode;
+    className?: string;
+}
+/**
+ * Container for TabPanel components.
+ */
+declare function TabPanels({ children, className }: TabPanelsProps): react_jsx_runtime.JSX.Element;
+interface TabPanelProps {
+    children?: React.ReactNode;
+    className?: string;
+}
+/**
+ * Individual tab panel content.
+ */
+declare function TabPanel({ children, className }: TabPanelProps): react_jsx_runtime.JSX.Element;
+
+type ChipVariant = 'solid' | 'subtle' | 'outline';
+type ChipColor = 'default' | 'primary' | 'secondary' | 'success' | 'error' | 'warning' | 'info';
+type ChipSize = 'sm' | 'md' | 'lg';
+interface ChipProps extends ViewProps {
+    /** Visual variant */
+    variant?: ChipVariant;
+    /** Color scheme */
+    color?: ChipColor;
+    /** Size */
+    size?: ChipSize;
+    /** Left element (icon, avatar) */
+    leftElement?: React.ReactNode;
+    /** Whether the chip is dismissible */
+    onDelete?: () => void;
+    /** Whether the chip is clickable */
+    onPress?: () => void;
+    /** Whether the chip is disabled */
+    isDisabled?: boolean;
+    /** Additional className */
+    className?: string;
+    children?: React.ReactNode;
+}
+/**
+ * Chip component for tags, labels, and filters.
+ *
+ * @example
+ * <Chip>Default</Chip>
+ * <Chip color="primary" variant="subtle">Primary Subtle</Chip>
+ * <Chip onDelete={() => {}}>Dismissible</Chip>
+ * <Chip onPress={() => {}}>Clickable</Chip>
+ */
+declare function Chip({ variant, color, size, leftElement, onDelete, onPress, isDisabled, className, children, ...props }: ChipProps): react_jsx_runtime.JSX.Element;
+
+type LinkUnderline = 'always' | 'hover' | 'none';
+type LinkColor = 'default' | 'primary' | 'secondary' | 'inherit';
+interface LinkProps extends Omit<TextProps, 'onPress'> {
+    /** URL to navigate to (for accessibility) */
+    href?: string;
+    /** Underline behavior */
+    underline?: LinkUnderline;
+    /** Link color */
+    color?: LinkColor;
+    /** Whether the link opens in a new tab/window */
+    isExternal?: boolean;
+    /** Press handler */
+    onPress?: () => void;
+    /** Whether the link is disabled */
+    isDisabled?: boolean;
+    /** Additional className */
+    className?: string;
+    children?: React.ReactNode;
+}
+/**
+ * Link component for navigation.
+ *
+ * @example
+ * <Link href="https://example.com">Visit Site</Link>
+ * <Link href="https://example.com" isExternal>External Link ↗</Link>
+ * <Link onPress={() => navigate('/page')}>Go to Page</Link>
+ */
+declare function Link({ href, underline, color, isExternal, onPress, isDisabled, className, children, ...props }: LinkProps): react_jsx_runtime.JSX.Element;
+
+type TooltipPlacement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'right';
+interface TooltipProps extends ViewProps {
+    /** Tooltip content */
+    label: string;
+    /** Trigger element */
+    children: React.ReactNode;
+    /** Tooltip placement */
+    placement?: TooltipPlacement;
+    /** Delay before showing (ms) */
+    openDelay?: number;
+    /** Delay before hiding (ms) */
+    closeDelay?: number;
+    /** Whether tooltip has an arrow */
+    hasArrow?: boolean;
+    /** Whether tooltip is disabled */
+    isDisabled?: boolean;
+    /** Additional className for tooltip */
+    className?: string;
+}
+/**
+ * Tooltip component for showing additional information on hover/press.
+ *
+ * Note: On native, tooltips appear on long press. On web, they appear on hover.
+ *
+ * @example
+ * <Tooltip label="This is a tooltip">
+ *   <Button><ButtonText>Hover me</ButtonText></Button>
+ * </Tooltip>
+ */
+declare function Tooltip({ label, children, placement, openDelay, closeDelay, hasArrow, isDisabled, className, ...props }: TooltipProps): react_jsx_runtime.JSX.Element;
+
+interface CollapseProps extends ViewProps {
+    /** Whether the collapse is initially open */
+    defaultIsOpen?: boolean;
+    /** Controlled open state */
+    isOpen?: boolean;
+    /** Callback when state changes */
+    onToggle?: (isOpen: boolean) => void;
+    /** Additional className */
+    className?: string;
+    children?: React.ReactNode;
+}
+/**
+ * Collapsible content container.
+ *
+ * @example
+ * <Collapse>
+ *   <CollapseButton>
+ *     <Text>Click to expand</Text>
+ *   </CollapseButton>
+ *   <CollapseContent>
+ *     <Text>Hidden content</Text>
+ *   </CollapseContent>
+ * </Collapse>
+ */
+declare function Collapse({ defaultIsOpen, isOpen: controlledIsOpen, onToggle, className, children, ...props }: CollapseProps): react_jsx_runtime.JSX.Element;
+interface CollapseButtonProps {
+    children?: React.ReactNode;
+    className?: string;
+}
+/**
+ * Button to toggle collapse state.
+ */
+declare function CollapseButton({ children, className }: CollapseButtonProps): react_jsx_runtime.JSX.Element;
+interface CollapseContentProps {
+    children?: React.ReactNode;
+    className?: string;
+}
+/**
+ * Collapsible content area.
+ */
+declare function CollapseContent({ children, className }: CollapseContentProps): react_jsx_runtime.JSX.Element | null;
+interface AccordionProps extends ViewProps {
+    /** Allow multiple items to be open */
+    allowMultiple?: boolean;
+    /** Default open item indices */
+    defaultIndex?: number[];
+    /** Additional className */
+    className?: string;
+    children?: React.ReactNode;
+}
+/**
+ * Accordion component for multiple collapsible sections.
+ *
+ * @example
+ * <Accordion>
+ *   <AccordionItem>
+ *     <AccordionButton>Section 1</AccordionButton>
+ *     <AccordionPanel>Content 1</AccordionPanel>
+ *   </AccordionItem>
+ *   <AccordionItem>
+ *     <AccordionButton>Section 2</AccordionButton>
+ *     <AccordionPanel>Content 2</AccordionPanel>
+ *   </AccordionItem>
+ * </Accordion>
+ */
+declare function Accordion({ allowMultiple, defaultIndex, className, children, ...props }: AccordionProps): react_jsx_runtime.JSX.Element;
+interface AccordionItemProps {
+    index?: number;
+    children?: React.ReactNode;
+    className?: string;
+}
+/**
+ * Individual accordion item.
+ */
+declare function AccordionItem({ index, children, className }: AccordionItemProps): react_jsx_runtime.JSX.Element;
+interface AccordionButtonProps {
+    isOpen?: boolean;
+    onToggle?: () => void;
+    children?: React.ReactNode;
+    className?: string;
+}
+/**
+ * Accordion item toggle button.
+ */
+declare function AccordionButton({ isOpen, onToggle, children, className, }: AccordionButtonProps): react_jsx_runtime.JSX.Element;
+interface AccordionPanelProps {
+    isOpen?: boolean;
+    children?: React.ReactNode;
+    className?: string;
+}
+/**
+ * Accordion item content panel.
+ */
+declare function AccordionPanel({ isOpen, children, className }: AccordionPanelProps): react_jsx_runtime.JSX.Element | null;
+
+interface BreadcrumbsProps extends ViewProps {
+    /** Custom separator */
+    separator?: React.ReactNode;
+    /** Maximum items to show (with collapse) */
+    maxItems?: number;
+    /** Additional className */
+    className?: string;
+    children?: React.ReactNode;
+}
+/**
+ * Breadcrumbs navigation component.
+ *
+ * @example
+ * <Breadcrumbs>
+ *   <BreadcrumbItem href="/">Home</BreadcrumbItem>
+ *   <BreadcrumbItem href="/products">Products</BreadcrumbItem>
+ *   <BreadcrumbItem isCurrentPage>Widget</BreadcrumbItem>
+ * </Breadcrumbs>
+ */
+declare function Breadcrumbs({ separator, maxItems, className, children, ...props }: BreadcrumbsProps): react_jsx_runtime.JSX.Element;
+interface BreadcrumbItemProps {
+    /** Navigation URL */
+    href?: string;
+    /** Whether this is the current page */
+    isCurrentPage?: boolean;
+    /** Press handler */
+    onPress?: () => void;
+    /** Additional className */
+    className?: string;
+    children?: React.ReactNode;
+}
+/**
+ * Individual breadcrumb item.
+ */
+declare function BreadcrumbItem({ href, isCurrentPage, onPress, className, children, }: BreadcrumbItemProps): react_jsx_runtime.JSX.Element;
+
+type PopoverPlacement = 'top' | 'bottom' | 'left' | 'right';
+interface PopoverProps extends ViewProps {
+    /** Placement of the popover */
+    placement?: PopoverPlacement;
+    /** Controlled open state */
+    isOpen?: boolean;
+    /** Callback when open state changes */
+    onOpenChange?: (isOpen: boolean) => void;
+    /** Whether clicking outside closes the popover */
+    closeOnClickOutside?: boolean;
+    /** Additional className */
+    className?: string;
+    children?: React.ReactNode;
+}
+/**
+ * Popover component for displaying floating content.
+ *
+ * @example
+ * <Popover>
+ *   <PopoverTrigger>
+ *     <Button><ButtonText>Open</ButtonText></Button>
+ *   </PopoverTrigger>
+ *   <PopoverContent>
+ *     <Text>Popover content</Text>
+ *   </PopoverContent>
+ * </Popover>
+ */
+declare function Popover({ placement, isOpen: controlledIsOpen, onOpenChange, closeOnClickOutside, className, children, ...props }: PopoverProps): react_jsx_runtime.JSX.Element;
+interface PopoverTriggerProps {
+    children: React.ReactNode;
+    className?: string;
+}
+/**
+ * Trigger element for the popover.
+ */
+declare function PopoverTrigger({ children, className }: PopoverTriggerProps): react_jsx_runtime.JSX.Element;
+interface PopoverContentProps {
+    children?: React.ReactNode;
+    className?: string;
+}
+/**
+ * Content container for the popover.
+ */
+declare function PopoverContent({ children, className }: PopoverContentProps): react_jsx_runtime.JSX.Element | null;
+interface PopoverCloseButtonProps {
+    children?: React.ReactNode;
+    className?: string;
+}
+/**
+ * Button to close the popover.
+ */
+declare function PopoverCloseButton({ children, className }: PopoverCloseButtonProps): react_jsx_runtime.JSX.Element;
+
+interface MenuProps extends ViewProps {
+    /** Controlled open state */
+    isOpen?: boolean;
+    /** Callback when open state changes */
+    onOpenChange?: (isOpen: boolean) => void;
+    /** Additional className */
+    className?: string;
+    children?: React.ReactNode;
+}
+/**
+ * Menu component for dropdown menus.
+ *
+ * @example
+ * <Menu>
+ *   <MenuTrigger>
+ *     <Button><ButtonText>Options</ButtonText></Button>
+ *   </MenuTrigger>
+ *   <MenuList>
+ *     <MenuItem onPress={() => {}}>Edit</MenuItem>
+ *     <MenuItem onPress={() => {}}>Delete</MenuItem>
+ *     <MenuDivider />
+ *     <MenuItem onPress={() => {}} isDestructive>Remove</MenuItem>
+ *   </MenuList>
+ * </Menu>
+ */
+declare function Menu({ isOpen: controlledIsOpen, onOpenChange, className, children, ...props }: MenuProps): react_jsx_runtime.JSX.Element;
+interface MenuTriggerProps {
+    children: React.ReactNode;
+    className?: string;
+}
+/**
+ * Trigger element for the menu.
+ */
+declare function MenuTrigger({ children, className }: MenuTriggerProps): react_jsx_runtime.JSX.Element;
+interface MenuListProps {
+    children?: React.ReactNode;
+    className?: string;
+}
+/**
+ * Container for menu items.
+ */
+declare function MenuList({ children, className }: MenuListProps): react_jsx_runtime.JSX.Element | null;
+interface MenuItemProps {
+    /** Press handler */
+    onPress?: () => void;
+    /** Whether the item is disabled */
+    isDisabled?: boolean;
+    /** Whether the item is destructive (shows in red) */
+    isDestructive?: boolean;
+    /** Icon element */
+    icon?: React.ReactNode;
+    /** Additional className */
+    className?: string;
+    children?: React.ReactNode;
+}
+/**
+ * Individual menu item.
+ */
+declare function MenuItem({ onPress, isDisabled, isDestructive, icon, className, children, }: MenuItemProps): react_jsx_runtime.JSX.Element;
+interface MenuDividerProps {
+    className?: string;
+}
+/**
+ * Divider between menu items.
+ */
+declare function MenuDivider({ className }: MenuDividerProps): react_jsx_runtime.JSX.Element;
+interface MenuGroupProps {
+    /** Group label */
+    label?: string;
+    children?: React.ReactNode;
+    className?: string;
+}
+/**
+ * Group of menu items with optional label.
+ */
+declare function MenuGroup({ label, children, className }: MenuGroupProps): react_jsx_runtime.JSX.Element;
+
+interface SelectOption<T = string> {
+    value: T;
+    label: string;
+    isDisabled?: boolean;
+}
+interface SelectProps<T = string> extends ViewProps {
+    /** Selected value (single mode) */
+    value?: T | null;
+    /** Selected values (multi mode) */
+    values?: T[];
+    /** Callback when value changes (single mode) */
+    onChange?: (value: T | null) => void;
+    /** Callback when values change (multi mode) */
+    onChangeMulti?: (values: T[]) => void;
+    /** Enable multi-select */
+    isMulti?: boolean;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Whether the select is disabled */
+    isDisabled?: boolean;
+    /** Whether the select has an error */
+    isInvalid?: boolean;
+    /** Options to display */
+    options: SelectOption<T>[];
+    /** Additional className */
+    className?: string;
+}
+/**
+ * Select component for single or multi-selection.
+ *
+ * @example
+ * // Single select
+ * <Select
+ *   value={value}
+ *   onChange={setValue}
+ *   options={[
+ *     { value: '1', label: 'Option 1' },
+ *     { value: '2', label: 'Option 2' },
+ *   ]}
+ * />
+ *
+ * // Multi select
+ * <Select
+ *   isMulti
+ *   values={values}
+ *   onChangeMulti={setValues}
+ *   options={options}
+ * />
+ */
+declare function Select<T extends string = string>({ value, values, onChange, onChangeMulti, isMulti, placeholder, isDisabled, isInvalid, options, className, ...props }: SelectProps<T>): react_jsx_runtime.JSX.Element;
+
+type ToolbarButtonVariant = 'default' | 'neumorphic';
+type ToolbarButtonSize = 'sm' | 'md' | 'lg';
+interface ToolbarButtonContextType {
+    isOpen: boolean;
+    setIsOpen: (open: boolean) => void;
+}
+interface ToolbarButtonProps extends ViewProps {
+    /** Button label */
+    label: string;
+    /** Icon component */
+    icon?: React.ReactNode;
+    /**
+     * Whether the button is in active/selected state.
+     * - `true`: pressed/active appearance (darker, white text, orange icon)
+     * - `undefined`: pressed appearance (darker, white text/icon)
+     * - `false`: raised/inactive appearance (lighter, gray text/icon)
+     */
+    isActive?: boolean;
+    /** Whether the button is disabled */
+    isDisabled?: boolean;
+    /** Size of the button */
+    size?: ToolbarButtonSize;
+    /** Visual variant */
+    variant?: ToolbarButtonVariant;
+    /** Tooltip text (shown when label is hidden) */
+    tooltip?: string;
+    /** Whether to show label (false = icon only) */
+    showLabel?: boolean;
+    /** Press handler */
+    onPress?: () => void;
+    /** Menu content (renders in popover) */
+    menuContent?: React.ReactNode;
+    /** Additional className */
+    className?: string;
+}
+/**
+ * ToolbarButton component for toolbar actions with toggle state support.
+ *
+ * Features:
+ * - Neumorphic styling with inset shadows for pressed/raised 3D effect
+ * - Active (pressed) state is the default visual appearance
+ * - Set isActive={false} explicitly for the raised/inactive appearance
+ * - Orange accent color on icon when isActive={true}
+ * - Hover states that lighten background and remove shadows
+ *
+ * @example
+ * // Toggle button - orange icon when active
+ * <ToolbarButton
+ *   label="Settings"
+ *   icon={<SettingsIcon />}
+ *   isActive={isSettingsOpen}
+ *   onPress={() => setIsSettingsOpen(!isSettingsOpen)}
+ * />
+ *
+ * @example
+ * // Explicitly inactive (raised appearance)
+ * <ToolbarButton
+ *   label="Filter"
+ *   icon={<FilterIcon />}
+ *   isActive={false}
+ * />
+ */
+declare function ToolbarButton({ label, icon, isActive, isDisabled, size, variant, tooltip, showLabel, onPress, menuContent, className, children, ...props }: ToolbarButtonProps): react_jsx_runtime.JSX.Element;
+interface ToolbarButtonGroupProps extends ViewProps {
+    /** Orientation of the button group */
+    orientation?: 'horizontal' | 'vertical';
+    /** Gap between buttons */
+    gap?: 'none' | 'sm' | 'md';
+    /** Additional className */
+    className?: string;
+    children?: React.ReactNode;
+}
+/**
+ * Container for grouping toolbar buttons together.
+ */
+declare function ToolbarButtonGroup({ orientation, gap, className, children, ...props }: ToolbarButtonGroupProps): react_jsx_runtime.JSX.Element;
+/**
+ * Hook to access toolbar button context (for custom menu content)
+ */
+declare function useToolbarButton(): ToolbarButtonContextType;
+
+type RadioSize = 'sm' | 'md' | 'lg';
+type RadioColor = 'primary' | 'secondary' | 'success' | 'error';
+interface RadioGroupProps extends ViewProps {
+    /** Current selected value */
+    value: string | null;
+    /** Callback when value changes */
+    onChange: (value: string) => void;
+    /** Group name for form submission */
+    name?: string;
+    /** Whether all radios are disabled */
+    isDisabled?: boolean;
+    /** Size for all radios */
+    size?: RadioSize;
+    /** Color for all radios */
+    color?: RadioColor;
+    /** Orientation of the group */
+    orientation?: 'horizontal' | 'vertical';
+    /** Gap between items */
+    gap?: 'sm' | 'md' | 'lg';
+    /** Label for the group */
+    label?: string;
+    /** Additional className */
+    className?: string;
+    children?: React.ReactNode;
+}
+/**
+ * RadioGroup component for grouping radio buttons.
+ *
+ * @example
+ * <RadioGroup value={selected} onChange={setSelected}>
+ *   <Radio value="option1">Option 1</Radio>
+ *   <Radio value="option2">Option 2</Radio>
+ *   <Radio value="option3">Option 3</Radio>
+ * </RadioGroup>
+ */
+declare function RadioGroup({ value, onChange, name, isDisabled, size, color, orientation, gap, label, className, children, ...props }: RadioGroupProps): react_jsx_runtime.JSX.Element;
+interface RadioProps extends ViewProps {
+    /** Value of this radio option */
+    value: string;
+    /** Whether this radio is disabled */
+    isDisabled?: boolean;
+    /** Size override */
+    size?: RadioSize;
+    /** Color override */
+    color?: RadioColor;
+    /** Additional className */
+    className?: string;
+    children?: React.ReactNode;
+}
+/**
+ * Radio button component.
+ *
+ * @example
+ * <Radio value="option1">Option 1</Radio>
+ */
+declare function Radio({ value, isDisabled: radioDisabled, size: radioSize, color: radioColor, className, children, ...props }: RadioProps): react_jsx_runtime.JSX.Element;
+
+type DrawerPlacement = 'left' | 'right' | 'top' | 'bottom';
+type DrawerSize = 'sm' | 'md' | 'lg' | 'xl' | 'full';
+interface DrawerProps extends ViewProps {
+    /** Whether the drawer is open */
+    isOpen: boolean;
+    /** Callback when drawer should close */
+    onClose: () => void;
+    /** Placement of the drawer */
+    placement?: DrawerPlacement;
+    /** Size of the drawer */
+    size?: DrawerSize;
+    /** Whether clicking the backdrop closes the drawer */
+    closeOnOverlayClick?: boolean;
+    /** Whether to show the close button */
+    showCloseButton?: boolean;
+    /** Title for the drawer header */
+    title?: string;
+    /** Additional className for the drawer content */
+    className?: string;
+    children?: React.ReactNode;
+}
+/**
+ * Drawer component for side panel overlays.
+ *
+ * @example
+ * <Drawer
+ *   isOpen={isOpen}
+ *   onClose={() => setIsOpen(false)}
+ *   title="Settings"
+ *   placement="right"
+ * >
+ *   <DrawerBody>
+ *     <Text>Drawer content</Text>
+ *   </DrawerBody>
+ * </Drawer>
+ */
+declare function Drawer({ isOpen, onClose, placement, size, closeOnOverlayClick, showCloseButton, title, className, children, ...props }: DrawerProps): react_jsx_runtime.JSX.Element | null;
+interface DrawerHeaderProps extends ViewProps {
+    /** Additional className */
+    className?: string;
+    children?: React.ReactNode;
+}
+/**
+ * Header section for the drawer.
+ */
+declare function DrawerHeader({ className, children, ...props }: DrawerHeaderProps): react_jsx_runtime.JSX.Element;
+interface DrawerBodyProps extends ViewProps {
+    /** Whether the body should scroll */
+    scrollable?: boolean;
+    /** Additional className */
+    className?: string;
+    children?: React.ReactNode;
+}
+/**
+ * Body/content section for the drawer.
+ */
+declare function DrawerBody({ scrollable, className, children, ...props }: DrawerBodyProps): react_jsx_runtime.JSX.Element;
+interface DrawerFooterProps extends ViewProps {
+    /** Additional className */
+    className?: string;
+    children?: React.ReactNode;
+}
+/**
+ * Footer section for the drawer, typically for action buttons.
+ */
+declare function DrawerFooter({ className, children, ...props }: DrawerFooterProps): react_jsx_runtime.JSX.Element;
+
+type ProgressSize = 'sm' | 'md' | 'lg';
+type ProgressColor = 'primary' | 'secondary' | 'success' | 'error' | 'warning' | 'info';
+type ProgressVariant = 'linear' | 'circular';
+interface ProgressProps extends ViewProps {
+    /** Current value (0-100) */
+    value?: number;
+    /** Maximum value */
+    max?: number;
+    /** Whether the progress is indeterminate */
+    isIndeterminate?: boolean;
+    /** Size of the progress bar */
+    size?: ProgressSize;
+    /** Color of the progress */
+    color?: ProgressColor;
+    /** Whether to show the value label */
+    showValue?: boolean;
+    /** Custom value format function */
+    formatValue?: (value: number, max: number) => string;
+    /** Label text */
+    label?: string;
+    /** Additional className */
+    className?: string;
+}
+/**
+ * Linear progress bar component.
+ *
+ * @example
+ * // Determinate progress
+ * <Progress value={75} />
+ *
+ * @example
+ * // With label and value
+ * <Progress value={45} label="Uploading..." showValue />
+ *
+ * @example
+ * // Indeterminate progress
+ * <Progress isIndeterminate />
+ */
+declare function Progress({ value, max, isIndeterminate, size, color, showValue, formatValue, label, className, ...props }: ProgressProps): react_jsx_runtime.JSX.Element;
+interface CircularProgressProps extends ViewProps {
+    /** Current value (0-100) */
+    value?: number;
+    /** Maximum value */
+    max?: number;
+    /** Whether the progress is indeterminate */
+    isIndeterminate?: boolean;
+    /** Size of the progress circle (diameter) */
+    size?: number;
+    /** Stroke width */
+    strokeWidth?: number;
+    /** Color of the progress */
+    color?: ProgressColor;
+    /** Whether to show the value in center */
+    showValue?: boolean;
+    /** Custom value format function */
+    formatValue?: (value: number, max: number) => string;
+    /** Additional className */
+    className?: string;
+}
+/**
+ * Circular progress indicator component.
+ *
+ * @example
+ * <CircularProgress value={75} showValue />
+ */
+declare function CircularProgress({ value, max, isIndeterminate, size, strokeWidth, color, showValue, formatValue, className, ...props }: CircularProgressProps): react_jsx_runtime.JSX.Element;
+interface ProgressStepsProps extends ViewProps {
+    /** Current step (0-indexed) */
+    currentStep: number;
+    /** Total number of steps */
+    totalSteps: number;
+    /** Color of completed steps */
+    color?: ProgressColor;
+    /** Size of step indicators */
+    size?: ProgressSize;
+    /** Labels for each step */
+    labels?: string[];
+    /** Additional className */
+    className?: string;
+}
+/**
+ * Step-based progress indicator.
+ *
+ * @example
+ * <ProgressSteps currentStep={2} totalSteps={4} labels={['Cart', 'Shipping', 'Payment', 'Done']} />
+ */
+declare function ProgressSteps({ currentStep, totalSteps, color, size, labels, className, ...props }: ProgressStepsProps): react_jsx_runtime.JSX.Element;
+
+type ToastStatus = 'success' | 'error' | 'warning' | 'info';
+type ToastPosition = 'top' | 'top-right' | 'top-left' | 'bottom' | 'bottom-right' | 'bottom-left';
+interface ToastConfig {
+    /** Unique ID for the toast */
+    id: string;
+    /** Title text */
+    title: string;
+    /** Description text */
+    description?: string;
+    /** Status/type of the toast */
+    status?: ToastStatus;
+    /** Duration in milliseconds (0 = no auto-dismiss) */
+    duration?: number;
+    /** Whether the toast can be dismissed */
+    isClosable?: boolean;
+    /** Callback when toast is closed */
+    onClose?: () => void;
+}
+interface ToastContextType {
+    toasts: ToastConfig[];
+    addToast: (config: Omit<ToastConfig, 'id'>) => string;
+    removeToast: (id: string) => void;
+    removeAllToasts: () => void;
+}
+interface ToastProviderProps {
+    /** Position of toasts on screen */
+    position?: ToastPosition;
+    /** Default duration for toasts */
+    defaultDuration?: number;
+    /** Maximum number of visible toasts */
+    maxToasts?: number;
+    children?: React.ReactNode;
+}
+/**
+ * Provider component for the toast notification system.
+ *
+ * @example
+ * // Wrap your app with ToastProvider
+ * <ToastProvider position="top-right">
+ *   <App />
+ * </ToastProvider>
+ *
+ * // Then use the useToast hook in any component
+ * const { addToast } = useToast()
+ * addToast({ title: 'Success!', status: 'success' })
+ */
+declare function ToastProvider({ position, defaultDuration, maxToasts, children, }: ToastProviderProps): react_jsx_runtime.JSX.Element;
+/**
+ * Hook to access toast functions.
+ *
+ * @example
+ * const { addToast, removeAllToasts } = useToast()
+ *
+ * // Show a success toast
+ * addToast({
+ *   title: 'Saved!',
+ *   description: 'Your changes have been saved.',
+ *   status: 'success'
+ * })
+ */
+declare function useToast(): ToastContextType;
+interface ToastProps extends ViewProps {
+    /** Title text */
+    title: string;
+    /** Description text */
+    description?: string;
+    /** Status/type of the toast */
+    status?: ToastStatus;
+    /** Whether to show the icon */
+    showIcon?: boolean;
+    /** Whether the toast can be dismissed */
+    isClosable?: boolean;
+    /** Callback when close button is clicked */
+    onClose?: () => void;
+    /** Additional className */
+    className?: string;
+}
+/**
+ * Standalone Toast component (for static rendering without provider).
+ *
+ * @example
+ * <Toast
+ *   title="Success!"
+ *   description="Your changes have been saved."
+ *   status="success"
+ * />
+ */
+declare function Toast({ title, description, status, showIcon, isClosable, onClose, className, ...props }: ToastProps): react_jsx_runtime.JSX.Element;
+
+interface AutocompleteOption<T = string> {
+    value: T;
+    label: string;
+    description?: string;
+    isDisabled?: boolean;
+}
+interface AutocompleteProps<T = string> extends ViewProps {
+    /** Available options */
+    options: AutocompleteOption<T>[];
+    /** Current selected value */
+    value?: T | null;
+    /** Callback when value changes */
+    onChange?: (value: T | null) => void;
+    /** Callback when input text changes (for async loading) */
+    onInputChange?: (inputValue: string) => void;
+    /** Minimum characters before showing options */
+    minChars?: number;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Label text */
+    label?: string;
+    /** Helper text */
+    helperText?: string;
+    /** Error message */
+    errorMessage?: string;
+    /** Whether the field is required */
+    isRequired?: boolean;
+    /** Whether the field is disabled */
+    isDisabled?: boolean;
+    /** Whether the field is loading */
+    isLoading?: boolean;
+    /** Whether to allow clearing the value */
+    isClearable?: boolean;
+    /** Custom filter function */
+    filterFn?: (option: AutocompleteOption<T>, inputValue: string) => boolean;
+    /** Custom render function for options */
+    renderOption?: (option: AutocompleteOption<T>, isHighlighted: boolean) => React.ReactNode;
+    /** Text to show when no options match */
+    noOptionsText?: string;
+    /** Text to show when loading */
+    loadingText?: string;
+    /** Text to show when min chars not met */
+    minCharsText?: string;
+    /** Additional className */
+    className?: string;
+    /** Input props */
+    inputProps?: Partial<TextInputProps>;
+}
+/**
+ * Autocomplete component for searchable dropdown selection.
+ *
+ * @example
+ * // Basic usage
+ * <Autocomplete
+ *   options={[
+ *     { value: '1', label: 'Option 1' },
+ *     { value: '2', label: 'Option 2' },
+ *   ]}
+ *   value={selected}
+ *   onChange={setSelected}
+ *   placeholder="Search..."
+ * />
+ *
+ * @example
+ * // With descriptions
+ * <Autocomplete
+ *   options={[
+ *     { value: 'user1', label: 'John Doe', description: 'john@example.com' },
+ *     { value: 'user2', label: 'Jane Smith', description: 'jane@example.com' },
+ *   ]}
+ *   label="Select User"
+ *   value={selectedUser}
+ *   onChange={setSelectedUser}
+ * />
+ */
+declare function Autocomplete<T extends string = string>({ options, value, onChange, onInputChange, minChars, placeholder, label, helperText, errorMessage, isRequired, isDisabled, isLoading, isClearable, filterFn, renderOption, noOptionsText, loadingText, minCharsText, className, inputProps, ...props }: AutocompleteProps<T>): react_jsx_runtime.JSX.Element;
+
+type HelpTipSize = 'sm' | 'md' | 'lg';
+type HelpTipPlacement = 'top' | 'bottom' | 'left' | 'right';
+type HelpTipIcon = 'help' | 'info' | 'warning';
+interface HelpTipProps extends ViewProps {
+    /** Tooltip content */
+    content: React.ReactNode;
+    /** Size of the icon */
+    size?: HelpTipSize;
+    /** Placement of the tooltip */
+    placement?: HelpTipPlacement;
+    /** Icon type */
+    icon?: HelpTipIcon;
+    /** Icon color */
+    color?: 'default' | 'primary' | 'secondary' | 'muted';
+    /** Whether the tooltip is always visible (controlled) */
+    isOpen?: boolean;
+    /** Whether to show an arrow */
+    hasArrow?: boolean;
+    /** Max width of the tooltip */
+    maxWidth?: number;
+    /** Additional className for the icon */
+    iconClassName?: string;
+    /** Additional className for the tooltip */
+    tooltipClassName?: string;
+}
+/**
+ * HelpTip component for displaying contextual help information.
+ *
+ * A small icon (typically a question mark or info icon) that shows
+ * a tooltip with helpful information when hovered or pressed.
+ *
+ * @example
+ * // Basic usage
+ * <HelpTip content="This field is required for form submission." />
+ *
+ * @example
+ * // With custom icon and placement
+ * <HelpTip
+ *   content="API rate limits apply to this endpoint."
+ *   icon="warning"
+ *   placement="right"
+ *   color="primary"
+ * />
+ *
+ * @example
+ * // Inline with label
+ * <View className="flex-row items-center gap-1">
+ *   <Text>Email Address</Text>
+ *   <HelpTip content="We'll never share your email with anyone." size="sm" />
+ * </View>
+ */
+declare function HelpTip({ content, size, placement, icon, color, isOpen: controlledIsOpen, hasArrow, maxWidth, iconClassName, tooltipClassName, className, ...props }: HelpTipProps): react_jsx_runtime.JSX.Element;
+interface LabelWithHelpProps extends ViewProps {
+    /** Label text */
+    label: string;
+    /** Help content */
+    helpContent: React.ReactNode;
+    /** Whether the field is required */
+    isRequired?: boolean;
+    /** Size of the help icon */
+    helpSize?: HelpTipSize;
+    /** Additional className */
+    className?: string;
+}
+/**
+ * Convenience component combining a label with a help tip.
+ *
+ * @example
+ * <LabelWithHelp
+ *   label="API Key"
+ *   helpContent="Your API key can be found in the developer settings."
+ *   isRequired
+ * />
+ */
+declare function LabelWithHelp({ label, helpContent, isRequired, helpSize, className, ...props }: LabelWithHelpProps): react_jsx_runtime.JSX.Element;
+
+interface FormFieldProps extends ViewProps {
+    /** Label text */
+    label?: string;
+    /** Whether the field is required */
+    isRequired?: boolean;
+    /** Helper text shown below the input */
+    helperText?: string;
+    /** Error message (replaces helper text when present) */
+    errorMessage?: string;
+    /** Whether the field is disabled */
+    isDisabled?: boolean;
+    /** Whether the field is read-only */
+    isReadOnly?: boolean;
+    /** Help tooltip content */
+    helpContent?: React.ReactNode;
+    /** Size of the label */
+    labelSize?: 'sm' | 'md' | 'lg';
+    /** Direction of the layout */
+    orientation?: 'vertical' | 'horizontal';
+    /** Label width (for horizontal layout) */
+    labelWidth?: number | string;
+    /** Additional className */
+    className?: string;
+    children?: React.ReactNode;
+}
+/**
+ * FormField component for wrapping form inputs with label, help text, and error states.
+ *
+ * @example
+ * // Basic usage
+ * <FormField label="Email" isRequired>
+ *   <Input placeholder="Enter your email" />
+ * </FormField>
+ *
+ * @example
+ * // With error
+ * <FormField
+ *   label="Password"
+ *   isRequired
+ *   errorMessage="Password must be at least 8 characters"
+ * >
+ *   <Input type="password" />
+ * </FormField>
+ *
+ * @example
+ * // Horizontal layout
+ * <FormField label="Name" orientation="horizontal" labelWidth={100}>
+ *   <Input />
+ * </FormField>
+ */
+declare function FormField({ label, isRequired, helperText, errorMessage, isDisabled, isReadOnly, helpContent, labelSize, orientation, labelWidth, className, children, ...props }: FormFieldProps): react_jsx_runtime.JSX.Element;
+interface FormSectionProps extends ViewProps {
+    /** Section title */
+    title?: string;
+    /** Section description */
+    description?: string;
+    /** Additional className */
+    className?: string;
+    children?: React.ReactNode;
+}
+/**
+ * FormSection component for grouping related form fields.
+ *
+ * @example
+ * <FormSection title="Personal Information" description="Enter your basic details">
+ *   <FormField label="Name">
+ *     <Input />
+ *   </FormField>
+ *   <FormField label="Email">
+ *     <Input />
+ *   </FormField>
+ * </FormSection>
+ */
+declare function FormSection({ title, description, className, children, ...props }: FormSectionProps): react_jsx_runtime.JSX.Element;
+interface FormActionsProps extends ViewProps {
+    /** Alignment of actions */
+    align?: 'left' | 'center' | 'right' | 'between';
+    /** Additional className */
+    className?: string;
+    children?: React.ReactNode;
+}
+/**
+ * FormActions component for form action buttons.
+ *
+ * @example
+ * <FormActions align="right">
+ *   <Button variant="ghost">Cancel</Button>
+ *   <Button>Submit</Button>
+ * </FormActions>
+ */
+declare function FormActions({ align, className, children, ...props }: FormActionsProps): react_jsx_runtime.JSX.Element;
+interface FormRowProps extends ViewProps {
+    /** Gap between items */
+    gap?: 'sm' | 'md' | 'lg';
+    /** Additional className */
+    className?: string;
+    children?: React.ReactNode;
+}
+/**
+ * FormRow component for laying out multiple form fields horizontally.
+ *
+ * @example
+ * <FormRow>
+ *   <FormField label="First Name" className="flex-1">
+ *     <Input />
+ *   </FormField>
+ *   <FormField label="Last Name" className="flex-1">
+ *     <Input />
+ *   </FormField>
+ * </FormRow>
+ */
+declare function FormRow({ gap, className, children, ...props }: FormRowProps): react_jsx_runtime.JSX.Element;
+
+type TypographyVariant = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'body1' | 'body2' | 'subtitle1' | 'subtitle2' | 'caption' | 'overline' | 'button';
+type TypographyColor = 'primary' | 'secondary' | 'tertiary' | 'disabled' | 'inverse' | 'success' | 'error' | 'warning' | 'info' | 'inherit';
+type TypographyAlign = 'left' | 'center' | 'right' | 'justify';
+type TypographyMarginBottom = 'none' | 'sm' | 'md' | 'lg';
+interface TypographyProps extends TextProps {
+    /** Typography variant */
+    variant?: TypographyVariant;
+    /** Text color */
+    color?: TypographyColor;
+    /** Text alignment */
+    align?: TypographyAlign;
+    /** Whether text should truncate with ellipsis */
+    truncate?: boolean;
+    /** @deprecated Use truncate instead */
+    noWrap?: boolean;
+    /** Margin bottom spacing */
+    marginBottom?: TypographyMarginBottom;
+    /** @deprecated Use marginBottom instead */
+    gutterBottom?: boolean;
+    /** Maximum number of lines before truncating */
+    maxLines?: number;
+    /** Additional className */
+    className?: string;
+    children?: React.ReactNode;
+}
+/**
+ * Typography component for consistent text styling.
+ *
+ * @example
+ * <Typography variant="h1">Page Title</Typography>
+ * <Typography variant="body1" color="secondary">Body text content</Typography>
+ * <Typography variant="caption" marginBottom="md">Small caption text</Typography>
+ * <Typography truncate maxLines={2}>Long text that will truncate...</Typography>
+ */
+declare function Typography({ variant, color, align, truncate, noWrap, // deprecated, kept for backward compatibility
+marginBottom, gutterBottom, // deprecated, kept for backward compatibility
+maxLines, className, children, ...props }: TypographyProps): react_jsx_runtime.JSX.Element;
+interface HeadingProps extends Omit<TypographyProps, 'variant'> {
+    /** Heading level (1-6) */
+    level?: 1 | 2 | 3 | 4 | 5 | 6;
+}
+/**
+ * Heading component - convenience wrapper for Typography with heading variants.
+ *
+ * @example
+ * <Heading level={1}>Page Title</Heading>
+ * <Heading level={2} gutterBottom>Section Title</Heading>
+ */
+declare function Heading({ level, ...props }: HeadingProps): react_jsx_runtime.JSX.Element;
+interface ParagraphProps extends Omit<TypographyProps, 'variant'> {
+    /** Use smaller body2 variant */
+    small?: boolean;
+}
+/**
+ * Paragraph component - convenience wrapper for body text.
+ *
+ * @example
+ * <Paragraph>This is body text content.</Paragraph>
+ * <Paragraph small>This is smaller body text.</Paragraph>
+ */
+declare function Paragraph({ small, ...props }: ParagraphProps): react_jsx_runtime.JSX.Element;
+interface CaptionProps extends Omit<TypographyProps, 'variant'> {
+}
+/**
+ * Caption component - for small helper/secondary text.
+ */
+declare function Caption(props: CaptionProps): react_jsx_runtime.JSX.Element;
+interface LabelProps extends Omit<TypographyProps, 'variant'> {
+}
+/**
+ * Label component - for form labels and similar.
+ */
+declare function Label(props: LabelProps): react_jsx_runtime.JSX.Element;
+interface OverlineProps extends Omit<TypographyProps, 'variant'> {
+}
+/**
+ * Overline component - for section labels, categories.
+ */
+declare function Overline(props: OverlineProps): react_jsx_runtime.JSX.Element;
+
+interface SidebarProps extends ViewProps {
+    /** Whether sidebar is collapsed (icon-only mode) */
+    isCollapsed?: boolean;
+    /** Currently active item ID */
+    activeItem?: string;
+    /** Callback when an item is selected */
+    onItemSelect?: (id: string) => void;
+    /** Width when expanded */
+    width?: number;
+    /** Width when collapsed */
+    collapsedWidth?: number;
+    /** Additional className */
+    className?: string;
+    children?: React.ReactNode;
+}
+/**
+ * Sidebar navigation component.
+ *
+ * @example
+ * <Sidebar activeItem={activeNav} onItemSelect={setActiveNav}>
+ *   <SidebarHeader>
+ *     <Logo />
+ *   </SidebarHeader>
+ *   <SidebarContent>
+ *     <SidebarSection title="Main">
+ *       <SidebarItem id="home" icon={HomeIcon} label="Home" />
+ *       <SidebarItem id="dashboard" icon={DashboardIcon} label="Dashboard" />
+ *     </SidebarSection>
+ *   </SidebarContent>
+ *   <SidebarFooter>
+ *     <SidebarItem id="settings" icon={SettingsIcon} label="Settings" />
+ *   </SidebarFooter>
+ * </Sidebar>
+ */
+declare function Sidebar({ isCollapsed, activeItem, onItemSelect, width, collapsedWidth, className, children, ...props }: SidebarProps): react_jsx_runtime.JSX.Element;
+interface SidebarHeaderProps {
+    children?: React.ReactNode;
+    className?: string;
+}
+/**
+ * Header section of sidebar (typically contains logo).
+ */
+declare function SidebarHeader({ children, className }: SidebarHeaderProps): react_jsx_runtime.JSX.Element;
+interface SidebarContentProps {
+    children?: React.ReactNode;
+    className?: string;
+}
+/**
+ * Scrollable content area of sidebar.
+ */
+declare function SidebarContent({ children, className }: SidebarContentProps): react_jsx_runtime.JSX.Element;
+interface SidebarFooterProps {
+    children?: React.ReactNode;
+    className?: string;
+}
+/**
+ * Footer section of sidebar.
+ */
+declare function SidebarFooter({ children, className }: SidebarFooterProps): react_jsx_runtime.JSX.Element;
+interface SidebarSectionProps {
+    /** Section title */
+    title?: string;
+    children?: React.ReactNode;
+    className?: string;
+}
+/**
+ * Section grouping for sidebar items.
+ */
+declare function SidebarSection({ title, children, className }: SidebarSectionProps): react_jsx_runtime.JSX.Element;
+interface SidebarItemProps extends Omit<PressableProps, 'children'> {
+    /** Unique identifier for the item */
+    id: string;
+    /** Icon component */
+    icon?: React.ComponentType<{
+        size?: number;
+        className?: string;
+    }>;
+    /** Label text */
+    label: string;
+    /** Badge content (e.g., notification count) */
+    badge?: React.ReactNode;
+    /** Whether this item has nested items */
+    hasChildren?: boolean;
+    /** Whether nested items are expanded */
+    isExpanded?: boolean;
+    /** Additional className */
+    className?: string;
+}
+/**
+ * Individual navigation item in sidebar.
+ */
+declare function SidebarItem({ id, icon: Icon, label, badge, hasChildren, isExpanded, className, onPress, ...props }: SidebarItemProps): react_jsx_runtime.JSX.Element;
+interface SidebarDividerProps {
+    className?: string;
+}
+/**
+ * Divider between sidebar sections.
+ */
+declare function SidebarDivider({ className }: SidebarDividerProps): react_jsx_runtime.JSX.Element;
+
+type SortDirection = 'asc' | 'desc' | null;
+interface TableProps extends ViewProps {
+    /** Currently sorted column */
+    sortColumn?: string;
+    /** Sort direction */
+    sortDirection?: SortDirection;
+    /** Callback when sort changes */
+    onSort?: (column: string) => void;
+    /** Selected row IDs (controlled) */
+    selectedRows?: Set<string>;
+    /** Callback when row selection changes */
+    onSelectRow?: (id: string, selected: boolean) => void;
+    /** Callback when select all changes */
+    onSelectAll?: (selected: boolean) => void;
+    /** Enable row selection */
+    selectable?: boolean;
+    /** All row IDs for select all functionality */
+    rowIds?: string[];
+    /** Whether the table is loading */
+    isLoading?: boolean;
+    /** Number of skeleton rows to show when loading */
+    loadingRowCount?: number;
+    /** Additional className */
+    className?: string;
+    children?: React.ReactNode;
+}
+/**
+ * Table component with sorting support.
+ *
+ * @example
+ * <Table sortColumn={sortCol} sortDirection={sortDir} onSort={handleSort}>
+ *   <TableHeader>
+ *     <TableRow>
+ *       <TableHeaderCell sortKey="name">Name</TableHeaderCell>
+ *       <TableHeaderCell sortKey="email">Email</TableHeaderCell>
+ *       <TableHeaderCell sortKey="status">Status</TableHeaderCell>
+ *     </TableRow>
+ *   </TableHeader>
+ *   <TableBody>
+ *     {data.map(row => (
+ *       <TableRow key={row.id}>
+ *         <TableCell>{row.name}</TableCell>
+ *         <TableCell>{row.email}</TableCell>
+ *         <TableCell>{row.status}</TableCell>
+ *       </TableRow>
+ *     ))}
+ *   </TableBody>
+ * </Table>
+ */
+declare function Table({ sortColumn, sortDirection, onSort, selectedRows, onSelectRow, onSelectAll, selectable, rowIds, isLoading, loadingRowCount, className, children, ...props }: TableProps): react_jsx_runtime.JSX.Element;
+interface TableHeaderProps {
+    children?: React.ReactNode;
+    className?: string;
+}
+/**
+ * Table header container.
+ */
+declare function TableHeader({ children, className }: TableHeaderProps): react_jsx_runtime.JSX.Element;
+interface TableBodyProps {
+    children?: React.ReactNode;
+    className?: string;
+}
+/**
+ * Table body container.
+ */
+declare function TableBody({ children, className }: TableBodyProps): react_jsx_runtime.JSX.Element;
+interface TableRowProps extends ViewProps {
+    /** Whether the row is selected */
+    isSelected?: boolean;
+    /** Whether the row is hoverable */
+    isHoverable?: boolean;
+    /** Additional className */
+    className?: string;
+    children?: React.ReactNode;
+}
+/**
+ * Table row.
+ */
+declare function TableRow({ isSelected, isHoverable, className, children, ...props }: TableRowProps): react_jsx_runtime.JSX.Element;
+interface TableHeaderCellProps extends Omit<PressableProps, 'children'> {
+    /** Sort key for this column */
+    sortKey?: string;
+    /** Text alignment */
+    align?: 'left' | 'center' | 'right';
+    /** Cell width in pixels */
+    width?: number;
+    /** Additional className */
+    className?: string;
+    children?: React.ReactNode;
+}
+/**
+ * Table header cell with optional sorting.
+ */
+declare function TableHeaderCell({ sortKey, align, width, className, children, onPress, ...props }: TableHeaderCellProps): react_jsx_runtime.JSX.Element;
+interface TableCellProps extends ViewProps {
+    /** Text alignment */
+    align?: 'left' | 'center' | 'right';
+    /** Cell width in pixels */
+    width?: number;
+    /** Additional className */
+    className?: string;
+    children?: React.ReactNode;
+}
+/**
+ * Table data cell.
+ */
+declare function TableCell({ align, width, className, children, ...props }: TableCellProps): react_jsx_runtime.JSX.Element;
+interface TablePaginationProps {
+    /** Current page (0-indexed) */
+    page: number;
+    /** Items per page */
+    pageSize: number;
+    /** Total number of items */
+    totalItems: number;
+    /** Available page size options */
+    pageSizeOptions?: number[];
+    /** Callback when page changes */
+    onPageChange: (page: number) => void;
+    /** Callback when page size changes */
+    onPageSizeChange?: (pageSize: number) => void;
+    /** Additional className */
+    className?: string;
+}
+/**
+ * Pagination controls for table.
+ *
+ * @example
+ * <TablePagination
+ *   page={page}
+ *   pageSize={pageSize}
+ *   totalItems={100}
+ *   onPageChange={setPage}
+ *   onPageSizeChange={setPageSize}
+ * />
+ */
+declare function TablePagination({ page, pageSize, totalItems, pageSizeOptions, onPageChange, onPageSizeChange, className, }: TablePaginationProps): react_jsx_runtime.JSX.Element;
+interface UseTableOptions<T> {
+    data: T[];
+    defaultPageSize?: number;
+    defaultSortColumn?: string;
+    defaultSortDirection?: SortDirection;
+}
+interface UseTableReturn<T> {
+    sortedData: T[];
+    paginatedData: T[];
+    page: number;
+    pageSize: number;
+    totalItems: number;
+    sortColumn?: string;
+    sortDirection: SortDirection;
+    setPage: (page: number) => void;
+    setPageSize: (size: number) => void;
+    handleSort: (column: string) => void;
+}
+/**
+ * Hook for managing table sorting and pagination state.
+ *
+ * @example
+ * const {
+ *   paginatedData,
+ *   page, pageSize, totalItems,
+ *   sortColumn, sortDirection,
+ *   setPage, setPageSize, handleSort
+ * } = useTable({
+ *   data: users,
+ *   defaultPageSize: 10,
+ * })
+ */
+declare function useTable<T extends Record<string, any>>({ data, defaultPageSize, defaultSortColumn, defaultSortDirection, }: UseTableOptions<T>): UseTableReturn<T>;
+
+interface EmptyStateProps extends ViewProps {
+    /** Icon component to display */
+    icon?: React.ComponentType<{
+        size?: number;
+        className?: string;
+    }>;
+    /** Title text */
+    title: string;
+    /** Description text */
+    description?: string;
+    /** Action element (usually a button) */
+    action?: React.ReactNode;
+    /** Additional className */
+    className?: string;
+}
+/**
+ * Empty state component for when there's no data to display.
+ *
+ * @example
+ * <EmptyState
+ *   icon={InboxIcon}
+ *   title="No messages"
+ *   description="You don't have any messages yet."
+ *   action={<Button>Compose</Button>}
+ * />
+ */
+declare function EmptyState({ icon: Icon, title, description, action, className, ...props }: EmptyStateProps): react_jsx_runtime.JSX.Element;
+
+type StepStatus = 'completed' | 'active' | 'upcoming' | 'error';
+type StepperOrientation = 'horizontal' | 'vertical';
+interface StepperProps extends ViewProps {
+    /** Current active step (0-indexed) */
+    activeStep: number;
+    /** Stepper orientation */
+    orientation?: StepperOrientation;
+    /** Additional className */
+    className?: string;
+    children?: React.ReactNode;
+}
+/**
+ * Stepper component for multi-step flows.
+ *
+ * @example
+ * <Stepper activeStep={1}>
+ *   <Step>
+ *     <StepIndicator />
+ *     <StepLabel>Account</StepLabel>
+ *   </Step>
+ *   <Step>
+ *     <StepIndicator />
+ *     <StepLabel>Profile</StepLabel>
+ *   </Step>
+ *   <Step>
+ *     <StepIndicator />
+ *     <StepLabel>Review</StepLabel>
+ *   </Step>
+ * </Stepper>
+ */
+declare function Stepper({ activeStep, orientation, className, children, ...props }: StepperProps): react_jsx_runtime.JSX.Element;
+interface StepProps {
+    /** Step index (injected by Stepper) */
+    index?: number;
+    /** Override step status */
+    status?: StepStatus;
+    /** Additional className */
+    className?: string;
+    children?: React.ReactNode;
+}
+/**
+ * Individual step in the stepper.
+ */
+declare function Step({ index, status, className, children }: StepProps): react_jsx_runtime.JSX.Element;
+interface StepIndicatorProps {
+    /** Step status (injected by Step) */
+    status?: StepStatus;
+    /** Step index (injected by Step) */
+    index?: number;
+    /** Custom icon */
+    icon?: React.ReactNode;
+    /** Additional className */
+    className?: string;
+}
+/**
+ * Visual indicator for step status.
+ */
+declare function StepIndicator({ status, index, icon, className, }: StepIndicatorProps): react_jsx_runtime.JSX.Element;
+interface StepLabelProps {
+    /** Step status (injected by Step) */
+    status?: StepStatus;
+    /** Additional className */
+    className?: string;
+    children?: React.ReactNode;
+}
+/**
+ * Label for a step.
+ */
+declare function StepLabel({ status, className, children }: StepLabelProps): react_jsx_runtime.JSX.Element;
+interface StepContentProps {
+    /** Step status (injected by Step) */
+    status?: StepStatus;
+    /** Additional className */
+    className?: string;
+    children?: React.ReactNode;
+}
+/**
+ * Content area for vertical stepper.
+ */
+declare function StepContent({ status, className, children }: StepContentProps): react_jsx_runtime.JSX.Element | null;
+
+type DateTimeFormat = 'date' | 'time' | 'datetime' | 'relative' | 'short' | 'medium' | 'long' | 'full';
+interface DateTimeProps extends TextProps {
+    /** Date value (timestamp in ms, Date object, or ISO string) */
+    value: number | Date | string | null | undefined;
+    /** Display format */
+    format?: DateTimeFormat;
+    /** Custom format string (overrides format) */
+    customFormat?: string;
+    /** Whether to show in UTC */
+    isUTC?: boolean;
+    /** Fallback text when value is null/undefined */
+    fallback?: string;
+    /** Text color */
+    color?: 'primary' | 'secondary' | 'tertiary' | 'inherit';
+    /** Additional className */
+    className?: string;
+}
+/**
+ * DateTime component for displaying formatted dates and times.
+ *
+ * @example
+ * // Basic usage
+ * <DateTime value={Date.now()} />
+ *
+ * @example
+ * // Different formats
+ * <DateTime value={date} format="relative" />
+ * <DateTime value={date} format="long" />
+ *
+ * @example
+ * // UTC time
+ * <DateTime value={timestamp} format="datetime" isUTC />
+ */
+declare function DateTime({ value, format, customFormat, isUTC, fallback, color, className, ...props }: DateTimeProps): react_jsx_runtime.JSX.Element;
+/**
+ * Utility function to format dates outside of React components.
+ */
+declare function formatDateTime(value: number | Date | string | null | undefined, format?: DateTimeFormat, isUTC?: boolean, fallback?: string): string;
+
+/**
+ * Utility function to merge Tailwind CSS classes with proper conflict resolution.
+ * Combines clsx for conditional classes with tailwind-merge for deduplication.
+ *
+ * @example
+ * cn('p-4 bg-red-500', isActive && 'bg-blue-500', className)
+ * // If isActive is true, returns 'p-4 bg-blue-500' (not 'p-4 bg-red-500 bg-blue-500')
+ */
+declare function cn(...inputs: ClassValue[]): string;
+
+/**
+ * Color utility functions for the design system
+ *
+ * lighten/darken are re-exported from shadows.ts which uses HSV-based
+ * color math for more perceptually consistent results across hues.
+ */
+
+type StatusType = 'success' | 'error' | 'warning' | 'info';
+type ResultType = 'improve' | 'degrade' | 'inconclusive' | 'neutral';
+/**
+ * Get the semantic color token for a status type.
+ *
+ * @param status - The status type
+ * @returns The CSS variable reference for the status color
+ *
+ * @example
+ * const color = getStatusColor('success') // 'var(--color-status-success)'
+ */
+declare function getStatusColor(status: StatusType): string;
+/**
+ * Get the semantic color token for a result type.
+ *
+ * @param result - The result type
+ * @returns The CSS variable reference for the result color
+ *
+ * @example
+ * const color = getResultColor('improve') // 'var(--color-result-improve)'
+ */
+declare function getResultColor(result: ResultType): string;
+/**
+ * Apply alpha/opacity to a color.
+ * Works with hex colors and rgb values.
+ *
+ * @param color - The color value (hex or rgb)
+ * @param opacity - Opacity value between 0 and 1
+ * @returns The color with alpha applied
+ *
+ * @example
+ * alpha('#5048E5', 0.5) // 'rgba(80, 72, 229, 0.5)'
+ * alpha('rgb(80, 72, 229)', 0.5) // 'rgba(80, 72, 229, 0.5)'
+ */
+declare function alpha(color: string, opacity: number): string;
+/**
+ * Determine if a color is light or dark.
+ * Useful for determining text color contrast.
+ *
+ * @param color - Hex color value
+ * @returns 'light' or 'dark'
+ *
+ * @example
+ * getLuminance('#FFFFFF') // 'light'
+ * getLuminance('#000000') // 'dark'
+ */
+declare function getLuminance(color: string): 'light' | 'dark';
+/**
+ * Get a contrasting text color for a given background.
+ *
+ * @param backgroundColor - The background color (hex)
+ * @returns 'white' or 'black' for contrast
+ *
+ * @example
+ * getContrastText('#5048E5') // 'white'
+ * getContrastText('#FFFFFF') // 'black'
+ */
+declare function getContrastText(backgroundColor: string): string;
+
+/**
+ * Form utility functions for consistent form field handling
+ */
+interface FieldState {
+    /** Whether the field has been touched */
+    touched: boolean;
+    /** Whether the field has an error */
+    hasError: boolean;
+    /** Error message if any */
+    errorMessage?: string;
+    /** Whether the field is required */
+    isRequired?: boolean;
+}
+interface FieldWrapperProps {
+    /** Field label */
+    label?: string;
+    /** Helper text */
+    helperText?: string;
+    /** Error message */
+    errorMessage?: string;
+    /** Whether the field is required */
+    isRequired?: boolean;
+    /** Whether the field is disabled */
+    isDisabled?: boolean;
+    /** Whether to show error state */
+    isInvalid?: boolean;
+}
+/**
+ * Get validation state props from field state
+ */
+declare function getFieldValidationProps(state: FieldState): {
+    isInvalid: boolean;
+    errorMessage?: string;
+};
+/**
+ * Create a field ID from label text
+ */
+declare function createFieldId(label: string): string;
+/**
+ * Get aria attributes for form field
+ */
+declare function getFieldAriaProps(props: FieldWrapperProps & {
+    id: string;
+}): {
+    'aria-invalid'?: boolean;
+    'aria-required'?: boolean;
+    'aria-describedby'?: string;
+};
+/**
+ * Validate email format
+ */
+declare function isValidEmail(email: string): boolean;
+/**
+ * Validate minimum length
+ */
+declare function hasMinLength(value: string, minLength: number): boolean;
+/**
+ * Validate maximum length
+ */
+declare function hasMaxLength(value: string, maxLength: number): boolean;
+/**
+ * Check if value is empty (null, undefined, or empty string)
+ */
+declare function isEmpty(value: unknown): boolean;
+/**
+ * Common validation rules
+ */
+declare const validationRules: {
+    required: (value: unknown) => "This field is required" | undefined;
+    email: (value: string) => "Please enter a valid email address" | undefined;
+    minLength: (min: number) => (value: string) => string | undefined;
+    maxLength: (max: number) => (value: string) => string | undefined;
+    pattern: (regex: RegExp, message: string) => (value: string) => string | undefined;
+    match: (otherValue: string, fieldName: string) => (value: string) => string | undefined;
+};
+/**
+ * Compose multiple validation functions
+ */
+declare function composeValidators(...validators: Array<(value: any) => string | undefined>): (value: any) => string | undefined;
+/**
+ * Type for form values
+ */
+type FormValues = Record<string, unknown>;
+/**
+ * Type for form errors
+ */
+type FormErrors<T extends FormValues> = Partial<Record<keyof T, string>>;
+/**
+ * Type for form touched state
+ */
+type FormTouched<T extends FormValues> = Partial<Record<keyof T, boolean>>;
+
+export { Accordion, AccordionButton, type AccordionButtonProps, AccordionItem, type AccordionItemProps, AccordionPanel, type AccordionPanelProps, type AccordionProps, Alert, AlertDescription, type AlertDescriptionProps, type AlertProps, type AlertStatus, AlertTitle, type AlertTitleProps, type AlertVariant, Autocomplete, type AutocompleteOption, type AutocompleteProps, Avatar, AvatarBadge, type AvatarBadgeProps, AvatarGroup, type AvatarGroupProps, type AvatarProps, type AvatarSize, Badge, type BadgeColor, type BadgeProps, type BadgeSize, BadgeText, type BadgeTextProps, type BadgeVariant, BreadcrumbItem, type BreadcrumbItemProps, Breadcrumbs, type BreadcrumbsProps, Button, type ButtonColor, ButtonIcon, type ButtonIconProps, type ButtonProps, type ButtonSize, ButtonSpinner, type ButtonSpinnerProps, ButtonText, type ButtonTextProps, type ButtonVariant, Caption, type CaptionProps, Card, CardContent, type CardContentProps, CardDescription, type CardDescriptionProps, type CardElevation, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, CardSkeleton, type CardSkeletonProps, CardTitle, type CardTitleProps, type CardVariant, Checkbox, CheckboxGroup, type CheckboxGroupProps, type CheckboxProps, type CheckboxSize, Chip, type ChipColor, type ChipProps, type ChipSize, type ChipVariant, CircularProgress, type CircularProgressProps, Collapse, CollapseButton, type CollapseButtonProps, CollapseContent, type CollapseContentProps, type CollapseProps, DateTime, type DateTimeFormat, type DateTimeProps, Divider, type DividerOrientation, type DividerProps, Drawer, DrawerBody, type DrawerBodyProps, DrawerFooter, type DrawerFooterProps, DrawerHeader, type DrawerHeaderProps, type DrawerPlacement, type DrawerProps, type DrawerSize, EmptyState, type EmptyStateProps, type FieldState, type FieldWrapperProps, FormActions, type FormActionsProps, type FormErrors, FormField, type FormFieldProps, FormRow, type FormRowProps, FormSection, type FormSectionProps, type FormTouched, type FormValues, Heading, type HeadingProps, HelpTip, type HelpTipIcon, type HelpTipPlacement, type HelpTipProps, type HelpTipSize, Input, InputGroup, type InputGroupProps, type InputProps, type InputSize, type InputVariant, Label, type LabelProps, LabelWithHelp, type LabelWithHelpProps, Link, type LinkColor, type LinkProps, type LinkUnderline, Menu, MenuDivider, type MenuDividerProps, MenuGroup, type MenuGroupProps, MenuItem, type MenuItemProps, MenuList, type MenuListProps, type MenuProps, MenuTrigger, type MenuTriggerProps, Modal, ModalBody, type ModalBodyProps, ModalCloseButton, type ModalCloseButtonProps, ModalContent, type ModalContentProps, ModalFooter, type ModalFooterProps, ModalHeader, type ModalHeaderProps, type ModalProps, type ModalSize, ModalTitle, type ModalTitleProps, Overline, type OverlineProps, Paragraph, type ParagraphProps, PasswordInput, type PasswordInputProps, Popover, PopoverCloseButton, type PopoverCloseButtonProps, PopoverContent, type PopoverContentProps, type PopoverPlacement, type PopoverProps, PopoverTrigger, type PopoverTriggerProps, Progress, type ProgressColor, type ProgressProps, type ProgressSize, ProgressSteps, type ProgressStepsProps, type ProgressVariant, Radio, type RadioColor, RadioGroup, type RadioGroupProps, type RadioProps, type RadioSize, type ResultType, Select, type SelectOption, type SelectProps, Sidebar, SidebarContent, type SidebarContentProps, SidebarDivider, type SidebarDividerProps, SidebarFooter, type SidebarFooterProps, SidebarHeader, type SidebarHeaderProps, SidebarItem, type SidebarItemProps, type SidebarProps, SidebarSection, type SidebarSectionProps, Skeleton, type SkeletonAnimation, SkeletonCard, type SkeletonCardProps, SkeletonCircle, type SkeletonCircleProps, SkeletonListItem, type SkeletonListItemProps, type SkeletonProps, SkeletonText, type SkeletonTextProps, type SkeletonVariant, type SortDirection, Spinner, type SpinnerColor, type SpinnerProps, type SpinnerSize, type StatusType, Step, StepContent, type StepContentProps, StepIndicator, type StepIndicatorProps, StepLabel, type StepLabelProps, type StepProps, type StepStatus, Stepper, type StepperOrientation, type StepperProps, Switch, type SwitchProps, type SwitchSize, Tab, TabList, type TabListProps, TabPanel, type TabPanelProps, TabPanels, type TabPanelsProps, type TabProps, Table, TableBody, type TableBodyProps, TableCell, type TableCellProps, TableHeader, TableHeaderCell, type TableHeaderCellProps, type TableHeaderProps, TablePagination, type TablePaginationProps, type TableProps, TableRow, type TableRowProps, Tabs, type TabsOrientation, type TabsProps, type TabsVariant, Toast, type ToastConfig, type ToastPosition, type ToastProps, ToastProvider, type ToastProviderProps, type ToastStatus, ToolbarButton, ToolbarButtonGroup, type ToolbarButtonGroupProps, type ToolbarButtonProps, type ToolbarButtonSize, type ToolbarButtonVariant, Tooltip, type TooltipPlacement, type TooltipProps, Typography, type TypographyAlign, type TypographyColor, type TypographyProps, type TypographyVariant, type UseTableOptions, type UseTableReturn, alpha, cn, composeValidators, createFieldId, formatDateTime, getContrastText, getFieldAriaProps, getFieldValidationProps, getLuminance, getResultColor, getStatusColor, hasMaxLength, hasMinLength, isEmpty, isValidEmail, useTable, useToast, useToolbarButton, validationRules };