@metacells/mcellui-core 0.1.2 → 0.2.0

package/dist/index.d.ts

@@ -0,0 +1,3851 @@
+import { F as Fonts, f as fontSize, a as fontWeight, l as lineHeight, b as letterSpacing, c as fontFamily, g as geistFontFamily, T as Typography } from './index-DtYPPizh.js';
+export { H as A11yProps, V as ComputedLineHeightKey, k as FontFamilyKey, h as FontSizeKey, i as FontWeightKey, G as GeistFontFamilyKey, O as HapticStyle, j as LetterSpacingKey, L as LineHeightKey, m as TypographyKey, v as androidApiLevel, R as areAnimationsDisabled, A as buttonA11y, n as cn, U as computedLineHeight, e as createTypography, d as defaultFonts, z as getFontScale, S as getLineHeight, I as haptic, N as hapticPresets, J as hapticsAvailable, E as headingA11y, D as imageA11y, u as iosVersion, q as isAndroid, P as isExpoGo, M as isHapticsEnabled, p as isIOS, w as isTablet, r as isWeb, C as linkA11y, o as mergeStyles, x as pixelRatio, y as roundToNearestPixel, Q as setAnimationsDisabled, K as setHapticsEnabled, s as systemFonts, B as toggleA11y, t as typography } from './index-DtYPPizh.js';
+import * as react_native from 'react-native';
+import { ViewStyle, PressableProps as PressableProps$1 } from 'react-native';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React, { ReactNode, Component, ErrorInfo } from 'react';
+export { F as FontFamily, i as FontSize, j as FontWeight, C as LegacyColors, n as LegacyShadows, k as LetterSpacing, L as LineHeight, R as Radius, m as RadiusKey, o as ShadowKey, S as Spacing, h as SpacingKey, a as fontSize, b as fontWeight, c as legacyColors, f as legacyFontFamily, e as legacyShadows, d as letterSpacing, l as lineHeight, r as radius, s as spacing } from './shadows-CwlbfJco.js';
+
+/**
+ * Theme Colors
+ *
+ * Semantic color tokens that adapt to light/dark mode.
+ * Inspired by iOS 17+ Dynamic Colors, Arc Browser, and Linear App.
+ */
+/**
+ * Base color palette (raw values).
+ *
+ * Raw color values for all theme presets. Use semantic colors from `lightColors` or
+ * `darkColors` in components rather than palette directly.
+ *
+ * @example
+ * ```tsx
+ * const { colors } = useTheme();
+ * // Use semantic colors (auto-adapts to light/dark)
+ * <View style={{ backgroundColor: colors.primary }} />
+ *
+ * // Not recommended: using palette directly (no dark mode support)
+ * <View style={{ backgroundColor: palette.primary[500] }} />
+ * ```
+ */
+declare const palette: {
+    readonly neutral: {
+        readonly 0: "#ffffff";
+        readonly 50: "#fafafa";
+        readonly 100: "#f5f5f5";
+        readonly 200: "#e5e5e5";
+        readonly 300: "#d4d4d4";
+        readonly 400: "#a3a3a3";
+        readonly 500: "#737373";
+        readonly 600: "#525252";
+        readonly 700: "#404040";
+        readonly 800: "#262626";
+        readonly 900: "#171717";
+        readonly 950: "#0a0a0a";
+    };
+    readonly primary: {
+        readonly 50: "#eff6ff";
+        readonly 100: "#dbeafe";
+        readonly 200: "#bfdbfe";
+        readonly 300: "#93c5fd";
+        readonly 400: "#60a5fa";
+        readonly 500: "#3b82f6";
+        readonly 600: "#2563eb";
+        readonly 700: "#1d4ed8";
+        readonly 800: "#1e40af";
+        readonly 900: "#1e3a8a";
+    };
+    readonly success: {
+        readonly 50: "#f0fdf4";
+        readonly 100: "#dcfce7";
+        readonly 200: "#bbf7d0";
+        readonly 300: "#86efac";
+        readonly 400: "#4ade80";
+        readonly 500: "#22c55e";
+        readonly 600: "#16a34a";
+        readonly 700: "#15803d";
+        readonly 800: "#166534";
+        readonly 900: "#14532d";
+    };
+    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 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";
+    };
+};
+/**
+ * Semantic colors for light mode.
+ *
+ * Complete semantic color palette for light color scheme. Access via `useTheme().colors`
+ * for automatic light/dark mode adaptation.
+ *
+ * @example
+ * ```tsx
+ * const { colors, isDark } = useTheme();
+ * // colors automatically matches light or dark mode
+ * <View style={{ backgroundColor: colors.background, color: colors.foreground }} />
+ * ```
+ */
+declare const lightColors: {
+    readonly background: "#ffffff";
+    readonly backgroundSubtle: "#fafafa";
+    readonly backgroundMuted: "#f5f5f5";
+    readonly backgroundElevated: "#ffffff";
+    readonly foreground: "#171717";
+    readonly foregroundMuted: "#737373";
+    readonly foregroundSubtle: "#a3a3a3";
+    readonly border: "#e5e5e5";
+    readonly borderMuted: "#f5f5f5";
+    readonly borderFocused: "#3b82f6";
+    readonly primary: "#3b82f6";
+    readonly primaryForeground: "#ffffff";
+    readonly primaryMuted: "#dbeafe";
+    readonly secondary: "#f5f5f5";
+    readonly secondaryForeground: "#171717";
+    readonly destructive: "#ef4444";
+    readonly destructiveForeground: "#ffffff";
+    readonly success: "#22c55e";
+    readonly successForeground: "#ffffff";
+    readonly successMuted: "#dcfce7";
+    readonly warning: "#f59e0b";
+    readonly warningForeground: "#171717";
+    readonly warningMuted: "#fef3c7";
+    readonly error: "#ef4444";
+    readonly errorForeground: "#ffffff";
+    readonly errorMuted: "#fee2e2";
+    readonly card: "#ffffff";
+    readonly cardForeground: "#171717";
+    readonly input: "#ffffff";
+    readonly inputBorder: "#e5e5e5";
+    readonly inputPlaceholder: "#a3a3a3";
+    readonly overlay: "rgba(0, 0, 0, 0.5)";
+    readonly scrim: "rgba(0, 0, 0, 0.3)";
+};
+/**
+ * Semantic colors for dark mode.
+ *
+ * Complete semantic color palette for dark color scheme. Access via `useTheme().colors`
+ * for automatic light/dark mode adaptation.
+ *
+ * @example
+ * ```tsx
+ * const { colors } = useTheme();
+ * // colors automatically matches light or dark mode
+ * <Text style={{ color: colors.foreground }}>Content</Text>
+ * ```
+ */
+declare const darkColors: {
+    readonly background: "#0a0a0a";
+    readonly backgroundSubtle: "#171717";
+    readonly backgroundMuted: "#262626";
+    readonly backgroundElevated: "#171717";
+    readonly foreground: "#fafafa";
+    readonly foregroundMuted: "#a3a3a3";
+    readonly foregroundSubtle: "#737373";
+    readonly border: "#262626";
+    readonly borderMuted: "#171717";
+    readonly borderFocused: "#60a5fa";
+    readonly primary: "#60a5fa";
+    readonly primaryForeground: "#171717";
+    readonly primaryMuted: "#1e3a8a";
+    readonly secondary: "#262626";
+    readonly secondaryForeground: "#fafafa";
+    readonly destructive: "#ef4444";
+    readonly destructiveForeground: "#ffffff";
+    readonly success: "#4ade80";
+    readonly successForeground: "#171717";
+    readonly successMuted: "#14532d";
+    readonly warning: "#fbbf24";
+    readonly warningForeground: "#171717";
+    readonly warningMuted: "#78350f";
+    readonly error: "#f87171";
+    readonly errorForeground: "#ffffff";
+    readonly errorMuted: "#7f1d1d";
+    readonly card: "#171717";
+    readonly cardForeground: "#fafafa";
+    readonly input: "#262626";
+    readonly inputBorder: "#404040";
+    readonly inputPlaceholder: "#737373";
+    readonly overlay: "rgba(0, 0, 0, 0.7)";
+    readonly scrim: "rgba(0, 0, 0, 0.5)";
+};
+/**
+ * Theme colors interface.
+ * Uses string type to allow color customization and presets.
+ */
+interface ThemeColors {
+    background: string;
+    backgroundSubtle: string;
+    backgroundMuted: string;
+    backgroundElevated: string;
+    foreground: string;
+    foregroundMuted: string;
+    foregroundSubtle: string;
+    border: string;
+    borderMuted: string;
+    borderFocused: string;
+    primary: string;
+    primaryForeground: string;
+    primaryMuted: string;
+    secondary: string;
+    secondaryForeground: string;
+    destructive: string;
+    destructiveForeground: string;
+    success: string;
+    successForeground: string;
+    successMuted: string;
+    warning: string;
+    warningForeground: string;
+    warningMuted: string;
+    error: string;
+    errorForeground: string;
+    errorMuted: string;
+    card: string;
+    cardForeground: string;
+    input: string;
+    inputBorder: string;
+    inputPlaceholder: string;
+    overlay: string;
+    scrim: string;
+}
+/** Available semantic color keys */
+type ColorKey = keyof ThemeColors;
+
+/**
+ * Spacing Tokens
+ *
+ * Consistent spacing scale inspired by Tailwind CSS.
+ * All values in logical pixels.
+ *
+ * Usage:
+ * ```tsx
+ * const { spacing } = useTheme();
+ * <View style={{ padding: spacing[4], gap: spacing[2] }} />
+ * ```
+ */
+declare const spacing: {
+    readonly 0: 0;
+    readonly 0.5: 2;
+    readonly 1: 4;
+    readonly 1.5: 6;
+    readonly 2: 8;
+    readonly 2.5: 10;
+    readonly 3: 12;
+    readonly 3.5: 14;
+    readonly 4: 16;
+    readonly 5: 20;
+    readonly 6: 24;
+    readonly 7: 28;
+    readonly 8: 32;
+    readonly 9: 36;
+    readonly 10: 40;
+    readonly 11: 44;
+    readonly 12: 48;
+    readonly 14: 56;
+    readonly 16: 64;
+    readonly 20: 80;
+    readonly 24: 96;
+    readonly 28: 112;
+    readonly 32: 128;
+};
+/** Available spacing scale keys (0, 0.5, 1, 1.5, 2, ..., 32) */
+type SpacingKey = keyof typeof spacing;
+/** Spacing value in logical pixels */
+type SpacingValue = (typeof spacing)[SpacingKey];
+
+/**
+ * Border Radius Tokens
+ *
+ * Consistent border radius scale for all components.
+ * Use the `radius` prop on ThemeProvider to change the base radius
+ * and transform your entire app from sharp to rounded.
+ *
+ * Usage:
+ * ```tsx
+ * // Sharp, brutalist design
+ * <ThemeProvider radius="none">
+ *
+ * // Soft, friendly design
+ * <ThemeProvider radius="lg">
+ *
+ * // In components
+ * const { radius } = useTheme();
+ * <View style={{ borderRadius: radius.md }} />
+ * ```
+ */
+/**
+ * Available radius presets.
+ * Each preset defines a base value that scales all radii.
+ */
+type RadiusPreset = 'none' | 'sm' | 'md' | 'lg' | 'full';
+/**
+ * Base values for each radius preset.
+ */
+declare const radiusPresetBase: Record<RadiusPreset, number>;
+/**
+ * Radius token structure.
+ */
+interface RadiusTokens {
+    none: number;
+    xs: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+    '2xl': number;
+    full: number;
+}
+type RadiusKey = keyof RadiusTokens;
+type RadiusValue = number;
+/**
+ * Creates radius tokens from a preset or base value.
+ *
+ * @param preset - Radius preset name or custom base value
+ * @returns Scaled radius tokens
+ */
+declare function createRadius(preset?: RadiusPreset | number): RadiusTokens;
+/**
+ * Default radius tokens (md preset).
+ */
+declare const radius: RadiusTokens;
+/**
+ * Default radius preset.
+ */
+declare const defaultRadiusPreset: RadiusPreset;
+/**
+ * Component-specific radius tokens structure.
+ */
+interface ComponentRadiusTokens {
+    button: number;
+    buttonSm: number;
+    buttonLg: number;
+    iconButton: number;
+    iconButtonRounded: number;
+    fab: number;
+    segmentedControl: number;
+    segmentedControlIndicator: number;
+    actionSheet: number;
+    actionSheetItem: number;
+    input: number;
+    textarea: number;
+    select: number;
+    slider: number;
+    stepper: number;
+    radio: number;
+    tagInput: number;
+    card: number;
+    badge: number;
+    avatar: number;
+    checkbox: number;
+    switch: number;
+    modal: number;
+    tooltip: number;
+    chip: number;
+    image: number;
+    tabs: number;
+    tabsIndicator: number;
+    accordion: number;
+    carousel: number;
+}
+type ComponentRadiusKey = keyof ComponentRadiusTokens;
+/**
+ * Creates component-specific radius values from radius tokens.
+ *
+ * @param radiusTokens - Base radius tokens
+ * @returns Component-specific radius values
+ */
+declare function createComponentRadius(radiusTokens: RadiusTokens): ComponentRadiusTokens;
+/**
+ * Default component radius values.
+ */
+declare const componentRadius: ComponentRadiusTokens;
+
+/**
+ * Shadow Presets
+ *
+ * Consistent shadow tokens for depth and elevation.
+ * Platform-aware: iOS uses shadow properties, Android uses elevation.
+ *
+ * Inspired by iOS 17+ depth language and Linear App shadows.
+ */
+
+interface ShadowStyle {
+    shadowColor: string;
+    shadowOffset: {
+        width: number;
+        height: number;
+    };
+    shadowOpacity: number;
+    shadowRadius: number;
+    elevation: number;
+}
+declare const lightShadows: {
+    /** Subtle shadow for cards and surfaces */
+    readonly sm: {
+        readonly shadowColor: "#000000";
+        readonly shadowOffset: {
+            readonly width: 0;
+            readonly height: 1;
+        };
+        readonly shadowOpacity: 0.05;
+        readonly shadowRadius: 2;
+        readonly elevation: 1;
+    };
+    /** Default shadow for buttons and interactive elements */
+    readonly md: {
+        readonly shadowColor: "#000000";
+        readonly shadowOffset: {
+            readonly width: 0;
+            readonly height: 2;
+        };
+        readonly shadowOpacity: 0.08;
+        readonly shadowRadius: 4;
+        readonly elevation: 3;
+    };
+    /** Elevated shadow for modals and popovers */
+    readonly lg: {
+        readonly shadowColor: "#000000";
+        readonly shadowOffset: {
+            readonly width: 0;
+            readonly height: 4;
+        };
+        readonly shadowOpacity: 0.12;
+        readonly shadowRadius: 8;
+        readonly elevation: 6;
+    };
+    /** Prominent shadow for floating elements */
+    readonly xl: {
+        readonly shadowColor: "#000000";
+        readonly shadowOffset: {
+            readonly width: 0;
+            readonly height: 8;
+        };
+        readonly shadowOpacity: 0.15;
+        readonly shadowRadius: 16;
+        readonly elevation: 12;
+    };
+    /** Maximum shadow for overlays */
+    readonly '2xl': {
+        readonly shadowColor: "#000000";
+        readonly shadowOffset: {
+            readonly width: 0;
+            readonly height: 12;
+        };
+        readonly shadowOpacity: 0.2;
+        readonly shadowRadius: 24;
+        readonly elevation: 16;
+    };
+    /** No shadow */
+    readonly none: {
+        readonly shadowColor: "transparent";
+        readonly shadowOffset: {
+            readonly width: 0;
+            readonly height: 0;
+        };
+        readonly shadowOpacity: 0;
+        readonly shadowRadius: 0;
+        readonly elevation: 0;
+    };
+};
+/** Available shadow size presets */
+type ShadowSize = keyof typeof lightShadows;
+/**
+ * Get shadow styles for a given size and color scheme.
+ *
+ * Returns platform-specific shadow properties (iOS: shadow*, Android: elevation).
+ * Prefer `platformShadow()` or `theme.platformShadow()` for cleaner API.
+ *
+ * @param size - Shadow size preset ('sm' | 'md' | 'lg' | 'xl' | '2xl' | 'none')
+ * @param isDark - Whether dark mode is active (defaults to false)
+ * @returns Complete shadow style object with all platform properties
+ *
+ * @example
+ * ```tsx
+ * const shadow = getShadow('md', isDark);
+ * <View style={shadow} />
+ * ```
+ */
+declare function getShadow(size: ShadowSize, isDark?: boolean): ShadowStyle;
+/**
+ * Get platform-optimized shadow style.
+ *
+ * Returns only the relevant properties for the current platform:
+ * - iOS: shadowColor, shadowOffset, shadowOpacity, shadowRadius
+ * - Android: elevation
+ * - Web: complete shadow object
+ *
+ * @param size - Shadow size preset ('sm' | 'md' | 'lg' | 'xl' | '2xl' | 'none')
+ * @param isDark - Whether dark mode is active (defaults to false)
+ * @returns Platform-specific shadow style object
+ *
+ * @example
+ * ```tsx
+ * const { platformShadow } = useTheme();
+ * <View style={platformShadow('md')} />
+ * ```
+ */
+declare function getPlatformShadow(size: ShadowSize, isDark?: boolean): ViewStyle;
+/**
+ * Complete shadow preset collections for light and dark modes.
+ *
+ * Prefer using `getShadow()` or `platformShadow()` instead of accessing directly.
+ */
+declare const shadows: {
+    light: {
+        /** Subtle shadow for cards and surfaces */
+        readonly sm: {
+            readonly shadowColor: "#000000";
+            readonly shadowOffset: {
+                readonly width: 0;
+                readonly height: 1;
+            };
+            readonly shadowOpacity: 0.05;
+            readonly shadowRadius: 2;
+            readonly elevation: 1;
+        };
+        /** Default shadow for buttons and interactive elements */
+        readonly md: {
+            readonly shadowColor: "#000000";
+            readonly shadowOffset: {
+                readonly width: 0;
+                readonly height: 2;
+            };
+            readonly shadowOpacity: 0.08;
+            readonly shadowRadius: 4;
+            readonly elevation: 3;
+        };
+        /** Elevated shadow for modals and popovers */
+        readonly lg: {
+            readonly shadowColor: "#000000";
+            readonly shadowOffset: {
+                readonly width: 0;
+                readonly height: 4;
+            };
+            readonly shadowOpacity: 0.12;
+            readonly shadowRadius: 8;
+            readonly elevation: 6;
+        };
+        /** Prominent shadow for floating elements */
+        readonly xl: {
+            readonly shadowColor: "#000000";
+            readonly shadowOffset: {
+                readonly width: 0;
+                readonly height: 8;
+            };
+            readonly shadowOpacity: 0.15;
+            readonly shadowRadius: 16;
+            readonly elevation: 12;
+        };
+        /** Maximum shadow for overlays */
+        readonly '2xl': {
+            readonly shadowColor: "#000000";
+            readonly shadowOffset: {
+                readonly width: 0;
+                readonly height: 12;
+            };
+            readonly shadowOpacity: 0.2;
+            readonly shadowRadius: 24;
+            readonly elevation: 16;
+        };
+        /** No shadow */
+        readonly none: {
+            readonly shadowColor: "transparent";
+            readonly shadowOffset: {
+                readonly width: 0;
+                readonly height: 0;
+            };
+            readonly shadowOpacity: 0;
+            readonly shadowRadius: 0;
+            readonly elevation: 0;
+        };
+    };
+    dark: {
+        readonly sm: {
+            readonly shadowColor: "#000000";
+            readonly shadowOffset: {
+                readonly width: 0;
+                readonly height: 1;
+            };
+            readonly shadowOpacity: 0.2;
+            readonly shadowRadius: 2;
+            readonly elevation: 1;
+        };
+        readonly md: {
+            readonly shadowColor: "#000000";
+            readonly shadowOffset: {
+                readonly width: 0;
+                readonly height: 2;
+            };
+            readonly shadowOpacity: 0.3;
+            readonly shadowRadius: 4;
+            readonly elevation: 3;
+        };
+        readonly lg: {
+            readonly shadowColor: "#000000";
+            readonly shadowOffset: {
+                readonly width: 0;
+                readonly height: 4;
+            };
+            readonly shadowOpacity: 0.4;
+            readonly shadowRadius: 8;
+            readonly elevation: 6;
+        };
+        readonly xl: {
+            readonly shadowColor: "#000000";
+            readonly shadowOffset: {
+                readonly width: 0;
+                readonly height: 8;
+            };
+            readonly shadowOpacity: 0.5;
+            readonly shadowRadius: 16;
+            readonly elevation: 12;
+        };
+        readonly '2xl': {
+            readonly shadowColor: "#000000";
+            readonly shadowOffset: {
+                readonly width: 0;
+                readonly height: 12;
+            };
+            readonly shadowOpacity: 0.6;
+            readonly shadowRadius: 24;
+            readonly elevation: 16;
+        };
+        readonly none: {
+            readonly shadowColor: "transparent";
+            readonly shadowOffset: {
+                readonly width: 0;
+                readonly height: 0;
+            };
+            readonly shadowOpacity: 0;
+            readonly shadowRadius: 0;
+            readonly elevation: 0;
+        };
+    };
+};
+
+/**
+ * Animation Presets
+ *
+ * Consistent animation configurations for micro-interactions.
+ * Uses Reanimated's spring physics for natural motion.
+ *
+ * Inspired by iOS 17+ animations and Linear App micro-interactions.
+ */
+interface SpringConfig {
+    damping?: number;
+    mass?: number;
+    stiffness?: number;
+    overshootClamping?: boolean;
+    restDisplacementThreshold?: number;
+    restSpeedThreshold?: number;
+    velocity?: number;
+}
+/**
+ * Timing config for animations.
+ *
+ * Note: We intentionally omit `easing` from these configs because custom easing
+ * functions must be Reanimated worklets to work with withTiming(). Instead,
+ * consumers should use Reanimated's Easing module directly:
+ *
+ * @example
+ * ```tsx
+ * import { Easing } from 'react-native-reanimated';
+ *
+ * withTiming(value, {
+ *   duration: timing.default.duration,
+ *   easing: Easing.out(Easing.quad),
+ * });
+ * ```
+ */
+interface TimingConfig {
+    duration: number;
+}
+/**
+ * Spring configurations for different animation contexts.
+ *
+ * Reanimated-compatible spring physics presets for natural motion.
+ * Use with `withSpring()` from react-native-reanimated.
+ *
+ * @example
+ * ```tsx
+ * import { withSpring } from 'react-native-reanimated';
+ * const { springs } = useTheme();
+ *
+ * // Animate with spring physics
+ * animatedValue.value = withSpring(targetValue, springs.snappy);
+ * ```
+ */
+declare const springs: SpringTokens;
+/**
+ * Timing configurations for animations.
+ *
+ * Duration-only configs - use Reanimated's Easing module for custom easing.
+ *
+ * @example
+ * ```tsx
+ * import { withTiming, Easing } from 'react-native-reanimated';
+ * const { timing } = useTheme();
+ *
+ * animatedValue.value = withTiming(targetValue, {
+ *   duration: timing.default.duration,
+ *   easing: Easing.out(Easing.quad),
+ * });
+ * ```
+ */
+declare const timing: TimingTokens;
+/**
+ * Scale values for press animations.
+ *
+ * Use with animated press gestures to provide tactile feedback.
+ *
+ * @example
+ * ```tsx
+ * const { pressScale } = useTheme();
+ * const scale = useSharedValue(1);
+ *
+ * const gesture = Gesture.Tap()
+ *   .onBegin(() => { scale.value = withSpring(pressScale.default); })
+ *   .onFinalize(() => { scale.value = withSpring(1); });
+ * ```
+ */
+declare const pressScale: PressScaleTokens;
+/**
+ * Press scale token structure (flexible for presets)
+ */
+interface PressScaleTokens {
+    subtle: number;
+    default: number;
+    prominent: number;
+}
+/**
+ * Common animation durations in milliseconds.
+ *
+ * Standard duration values for consistent animation timing across the app.
+ *
+ * @example
+ * ```tsx
+ * const { durations } = useTheme();
+ * setTimeout(() => { ... }, durations.fast);
+ * ```
+ */
+declare const durations: DurationTokens;
+/**
+ * Duration token structure (flexible for presets)
+ */
+interface DurationTokens {
+    instant: number;
+    fast: number;
+    default: number;
+    slow: number;
+    slower: number;
+}
+/**
+ * Spring tokens structure (flexible for presets)
+ */
+interface SpringTokens {
+    snappy: SpringConfig;
+    default: SpringConfig;
+    bouncy: SpringConfig;
+    gentle: SpringConfig;
+    stiff: SpringConfig;
+    soft: SpringConfig;
+}
+/**
+ * Timing tokens structure (flexible for presets)
+ */
+interface TimingTokens {
+    fast: TimingConfig;
+    default: TimingConfig;
+    slow: TimingConfig;
+    enter: TimingConfig;
+    exit: TimingConfig;
+}
+/** Available spring animation presets */
+type SpringPreset = keyof SpringTokens;
+/** Available timing animation presets */
+type TimingPreset = keyof TimingTokens;
+/** Available press scale presets */
+type PressScalePreset = keyof PressScaleTokens;
+/**
+ * Animation preset type.
+ * Controls the overall feel of animations throughout the app.
+ *
+ * - `subtle`: Professional, smooth animations with minimal overshoot
+ * - `playful`: Bouncy, energetic animations with more personality
+ */
+type AnimationPreset = 'subtle' | 'playful';
+/**
+ * Animation tokens structure for presets
+ */
+interface AnimationTokens {
+    springs: SpringTokens;
+    timing: TimingTokens;
+    pressScale: PressScaleTokens;
+    durations: DurationTokens;
+}
+/**
+ * Subtle animation preset.
+ *
+ * Professional, smooth animations suited for business/productivity apps.
+ * Higher damping = less bounce, faster settling.
+ *
+ * @example
+ * ```tsx
+ * <ThemeProvider animationPreset="subtle">
+ *   <App />
+ * </ThemeProvider>
+ * ```
+ */
+declare const subtleAnimations: AnimationTokens;
+/**
+ * Playful animation preset.
+ *
+ * Bouncy, energetic animations suited for consumer/social apps.
+ * Lower damping = more bounce, more overshoot.
+ *
+ * @example
+ * ```tsx
+ * <ThemeProvider animationPreset="playful">
+ *   <App />
+ * </ThemeProvider>
+ * ```
+ */
+declare const playfulAnimations: AnimationTokens;
+/**
+ * Get animation tokens for a specific preset.
+ *
+ * @param preset - Animation preset ('subtle' | 'playful')
+ * @returns Complete animation token set for the preset
+ *
+ * @example
+ * ```tsx
+ * const tokens = getAnimationPreset('playful');
+ * // tokens contains springs, timing, pressScale, durations
+ * ```
+ */
+declare function getAnimationPreset(preset: AnimationPreset): AnimationTokens;
+/**
+ * Default animation preset.
+ *
+ * Used when no `animationPreset` is specified on ThemeProvider.
+ */
+declare const defaultAnimationPreset: AnimationPreset;
+
+/**
+ * Component Tokens
+ *
+ * Size and proportion tokens for all components.
+ * Change these to globally adjust component dimensions.
+ *
+ * Each component has sm/md/lg size variants with consistent
+ * heights, padding, and typography.
+ *
+ * @example
+ * ```tsx
+ * const { components } = useTheme();
+ *
+ * // Use component tokens for consistent sizing
+ * <View style={{
+ *   height: components.button.md.height,
+ *   paddingHorizontal: components.button.md.paddingHorizontal,
+ * }} />
+ * ```
+ */
+/**
+ * Standard heights for interactive components.
+ *
+ * Based on touch target guidelines (minimum 44px).
+ */
+declare const componentHeight: {
+    /** Small: 32px */
+    readonly sm: 32;
+    /** Medium: 44px (iOS recommended minimum) */
+    readonly md: 44;
+    /** Large: 52px */
+    readonly lg: 52;
+};
+/**
+ * Standard icon sizes for components.
+ */
+declare const iconSize: {
+    /** Extra small: 12px */
+    readonly xs: 12;
+    /** Small: 16px */
+    readonly sm: 16;
+    /** Medium: 20px */
+    readonly md: 20;
+    /** Large: 24px */
+    readonly lg: 24;
+    /** Extra large: 32px */
+    readonly xl: 32;
+};
+/**
+ * Button component size tokens.
+ *
+ * Defines heights, padding, font sizes, and icon sizes for all button variants.
+ */
+declare const buttonTokens: {
+    readonly sm: {
+        readonly height: 32;
+        readonly paddingHorizontal: 12;
+        readonly paddingVertical: 6;
+        readonly fontSize: 14;
+        readonly fontWeight: "600";
+        readonly iconSize: 16;
+        readonly gap: 6;
+    };
+    readonly md: {
+        readonly height: 44;
+        readonly paddingHorizontal: 16;
+        readonly paddingVertical: 10;
+        readonly fontSize: 16;
+        readonly fontWeight: "600";
+        readonly iconSize: 20;
+        readonly gap: 8;
+    };
+    readonly lg: {
+        readonly height: 52;
+        readonly paddingHorizontal: 24;
+        readonly paddingVertical: 14;
+        readonly fontSize: 18;
+        readonly fontWeight: "600";
+        readonly iconSize: 24;
+        readonly gap: 10;
+    };
+};
+/** Input component size tokens */
+declare const inputTokens: {
+    readonly sm: {
+        readonly height: 32;
+        readonly paddingHorizontal: 12;
+        readonly paddingVertical: 6;
+        readonly borderWidth: 1;
+        readonly fontSize: 14;
+        readonly labelFontSize: 12;
+        readonly helperFontSize: 11;
+        readonly iconSize: 16;
+    };
+    readonly md: {
+        readonly height: 44;
+        readonly paddingHorizontal: 12;
+        readonly paddingVertical: 10;
+        readonly borderWidth: 1;
+        readonly fontSize: 16;
+        readonly labelFontSize: 14;
+        readonly helperFontSize: 12;
+        readonly iconSize: 20;
+    };
+    readonly lg: {
+        readonly height: 52;
+        readonly paddingHorizontal: 16;
+        readonly paddingVertical: 12;
+        readonly borderWidth: 1;
+        readonly fontSize: 18;
+        readonly labelFontSize: 16;
+        readonly helperFontSize: 14;
+        readonly iconSize: 24;
+    };
+};
+/** Checkbox component size tokens */
+declare const checkboxTokens: {
+    readonly sm: {
+        readonly size: 18;
+        readonly borderWidth: 2;
+        readonly iconSize: 12;
+        readonly labelFontSize: 14;
+        readonly gap: 8;
+    };
+    readonly md: {
+        readonly size: 22;
+        readonly borderWidth: 2;
+        readonly iconSize: 14;
+        readonly labelFontSize: 16;
+        readonly gap: 10;
+    };
+    readonly lg: {
+        readonly size: 26;
+        readonly borderWidth: 2;
+        readonly iconSize: 18;
+        readonly labelFontSize: 18;
+        readonly gap: 12;
+    };
+};
+/** Switch component size tokens */
+declare const switchTokens: {
+    readonly sm: {
+        readonly trackWidth: 40;
+        readonly trackHeight: 24;
+        readonly thumbSize: 20;
+        readonly thumbOffset: 2;
+        readonly labelFontSize: 14;
+        readonly gap: 12;
+    };
+    readonly md: {
+        readonly trackWidth: 50;
+        readonly trackHeight: 30;
+        readonly thumbSize: 26;
+        readonly thumbOffset: 2;
+        readonly labelFontSize: 16;
+        readonly gap: 12;
+    };
+    readonly lg: {
+        readonly trackWidth: 60;
+        readonly trackHeight: 36;
+        readonly thumbSize: 32;
+        readonly thumbOffset: 2;
+        readonly labelFontSize: 18;
+        readonly gap: 16;
+    };
+};
+/** Badge component size tokens */
+declare const badgeTokens: {
+    readonly sm: {
+        readonly paddingHorizontal: 6;
+        readonly paddingVertical: 2;
+        readonly fontSize: 11;
+        readonly fontWeight: "500";
+    };
+    readonly md: {
+        readonly paddingHorizontal: 10;
+        readonly paddingVertical: 2;
+        readonly fontSize: 12;
+        readonly fontWeight: "500";
+    };
+    readonly lg: {
+        readonly paddingHorizontal: 12;
+        readonly paddingVertical: 4;
+        readonly fontSize: 14;
+        readonly fontWeight: "500";
+    };
+};
+/** Avatar component size tokens */
+declare const avatarTokens: {
+    readonly sm: {
+        readonly size: 32;
+        readonly fontSize: 11;
+        readonly fontWeight: "600";
+    };
+    readonly md: {
+        readonly size: 40;
+        readonly fontSize: 14;
+        readonly fontWeight: "600";
+    };
+    readonly lg: {
+        readonly size: 56;
+        readonly fontSize: 20;
+        readonly fontWeight: "600";
+    };
+};
+/** Card component tokens */
+declare const cardTokens: {
+    readonly borderWidth: 1;
+    readonly padding: 16;
+    readonly headerPadding: 16;
+    readonly contentPadding: 16;
+    readonly footerPadding: 16;
+    readonly gap: 8;
+    readonly titleFontSize: 18;
+    readonly titleFontWeight: "600";
+    readonly descriptionFontSize: 14;
+};
+/** Overlay typography tokens (Dialog, AlertDialog, Sheet) */
+declare const overlayTypography: {
+    readonly title: {
+        readonly fontSize: 18;
+        readonly fontWeight: "600";
+        readonly lineHeight: 24;
+    };
+    readonly description: {
+        readonly fontSize: 14;
+        readonly fontWeight: "400";
+        readonly lineHeight: 20;
+    };
+};
+/** Spinner component size tokens */
+declare const spinnerTokens: {
+    readonly sm: {
+        readonly containerSize: 16;
+        readonly indicatorSize: "small";
+    };
+    readonly md: {
+        readonly containerSize: 24;
+        readonly indicatorSize: "small";
+    };
+    readonly lg: {
+        readonly containerSize: 36;
+        readonly indicatorSize: "large";
+    };
+};
+/** Skeleton component tokens */
+declare const skeletonTokens: {
+    readonly radius: {
+        readonly none: 0;
+        readonly sm: 4;
+        readonly md: 8;
+        readonly lg: 12;
+        readonly full: 9999;
+    };
+    readonly animation: {
+        readonly duration: 1500;
+        readonly minOpacity: 0.3;
+        readonly maxOpacity: 0.6;
+    };
+    readonly text: {
+        readonly defaultLines: 3;
+        readonly defaultGap: 8;
+        readonly defaultLineHeight: 16;
+        readonly lastLineWidth: "60%";
+    };
+};
+/** Progress component size tokens */
+declare const progressTokens: {
+    readonly sm: {
+        readonly height: 4;
+    };
+    readonly md: {
+        readonly height: 8;
+    };
+    readonly lg: {
+        readonly height: 12;
+    };
+    readonly animation: {
+        readonly determinateDuration: 300;
+        readonly indeterminateDuration: 1000;
+    };
+};
+/** CircularProgress component size tokens */
+declare const circularProgressTokens: {
+    readonly sm: {
+        readonly size: 40;
+        readonly strokeWidth: 4;
+        readonly labelSize: 10;
+    };
+    readonly md: {
+        readonly size: 64;
+        readonly strokeWidth: 6;
+        readonly labelSize: 14;
+    };
+    readonly lg: {
+        readonly size: 96;
+        readonly strokeWidth: 8;
+        readonly labelSize: 20;
+    };
+    readonly animation: {
+        readonly rotationDuration: 1200;
+        readonly springDamping: 20;
+        readonly springStiffness: 100;
+    };
+};
+/**
+ * List component constants for consistent dimensions.
+ * dividerInset = iconSize (24) + leftSlot marginRight (spacing[3] = 12) + container paddingHorizontal (spacing[4] = 16) = 52
+ * Using spacing[14] (56) for standard iOS list inset pattern.
+ */
+declare const LIST_CONSTANTS: {
+    /** Standard divider inset (aligns with icon + text layout) */
+    readonly dividerInset: 56;
+    /** Default list item min height */
+    readonly itemMinHeight: 52;
+    /** Legacy minHeight for backwards compatibility (thumbnail variant fallback) */
+    readonly legacyMinHeight: 56;
+};
+/** List component tokens */
+declare const listTokens: {
+    readonly divider: {
+        readonly inset: 56;
+    };
+    readonly item: {
+        readonly minHeight: 52;
+        readonly paddingHorizontal: 16;
+        readonly paddingVertical: 12;
+        readonly iconSize: 24;
+        readonly iconMargin: 12;
+    };
+};
+declare const TABS_CONSTANTS: {
+    /** Indicator animation spring config */
+    readonly spring: {
+        readonly damping: 20;
+        readonly stiffness: 200;
+    };
+    /** Indicator height for underline variant */
+    readonly indicatorHeight: 2;
+    /** Container padding for pill variant */
+    readonly pillPadding: 4;
+};
+/** Tabs component tokens */
+declare const tabsTokens: {
+    readonly trigger: {
+        readonly fontSize: 14;
+        readonly fontWeight: "500";
+        readonly activeFontWeight: "600";
+        readonly paddingVertical: 8;
+        readonly paddingHorizontal: 12;
+    };
+    readonly triggerUnderline: {
+        readonly paddingVertical: 12;
+        readonly paddingHorizontal: 16;
+    };
+    readonly content: {
+        readonly marginTop: 16;
+    };
+    readonly indicator: {
+        readonly pillTop: 4;
+        readonly pillBottom: 4;
+        readonly underlineHeight: 2;
+    };
+};
+declare const ACCORDION_CONSTANTS: {
+    /** Spring animation config for smooth expand/collapse */
+    readonly spring: {
+        readonly damping: 20;
+        readonly stiffness: 200;
+        readonly mass: 0.5;
+    };
+    /** Chevron icon size */
+    readonly chevronSize: 16;
+};
+/** Accordion component tokens */
+declare const accordionTokens: {
+    readonly trigger: {
+        readonly fontSize: 16;
+        readonly fontWeight: "500";
+        readonly paddingVertical: 16;
+        readonly paddingHorizontal: 16;
+        readonly iconMargin: 8;
+    };
+    readonly content: {
+        readonly paddingHorizontal: 16;
+        readonly paddingBottom: 16;
+    };
+    readonly item: {
+        readonly borderWidth: 1;
+    };
+};
+declare const COLLAPSIBLE_CONSTANTS: {
+    /** Spring animation config (same as accordion for consistency) */
+    readonly spring: {
+        readonly damping: 20;
+        readonly stiffness: 200;
+        readonly mass: 0.5;
+    };
+    /** Chevron icon size */
+    readonly chevronSize: 16;
+};
+/** Collapsible component tokens */
+declare const collapsibleTokens: {
+    readonly trigger: {
+        readonly paddingVertical: 12;
+        readonly paddingHorizontal: 16;
+        readonly iconMargin: 8;
+    };
+};
+declare const CAROUSEL_CONSTANTS: {
+    /** Default autoplay interval in ms */
+    readonly autoplayInterval: 4000;
+    /** Scroll event throttle (16ms = 60fps) */
+    readonly scrollEventThrottle: 16;
+};
+/** Carousel component tokens */
+declare const carouselTokens: {
+    readonly indicator: {
+        readonly dotSize: 8;
+        readonly dotActiveWidth: 24;
+        readonly dotActiveScale: 1;
+        readonly dotInactiveScale: 0.8;
+        readonly dotInactiveOpacity: 0.4;
+        readonly gap: 6;
+        readonly paddingVertical: 8;
+    };
+    readonly lineIndicator: {
+        readonly activeWidth: 24;
+        readonly inactiveWidth: 8;
+    };
+};
+declare const SWIPEABLE_ROW_CONSTANTS: {
+    /** Default action button width */
+    readonly actionWidth: 80;
+    /** Spring animation config */
+    readonly spring: {
+        readonly damping: 20;
+        readonly stiffness: 200;
+    };
+    /** Velocity threshold for snap decision (px/s) */
+    readonly velocityThreshold: 500;
+    /** Full swipe trigger ratio (0.5 = 50% of screen width) */
+    readonly fullSwipeRatio: 0.5;
+    /** Resistance factor when overswiping */
+    readonly resistanceFactor: 0.3;
+};
+/** SwipeableRow component tokens */
+declare const swipeableRowTokens: {
+    readonly action: {
+        readonly width: 80;
+        readonly paddingHorizontal: 8;
+        readonly iconMargin: 4;
+        readonly labelFontSize: 11;
+        readonly labelFontWeight: "600";
+    };
+};
+/** Auth block tokens (Login, Signup) */
+declare const authBlockTokens: {
+    readonly header: {
+        readonly titleFontSize: 24;
+        readonly titleFontWeight: "700";
+        readonly subtitleFontSize: 16;
+    };
+    readonly form: {
+        readonly forgotLinkFontSize: 14;
+        readonly forgotLinkFontWeight: "500";
+        readonly passwordHintFontSize: 11;
+    };
+    readonly divider: {
+        readonly fontSize: 14;
+    };
+    readonly footer: {
+        readonly textFontSize: 14;
+        readonly linkFontSize: 14;
+        readonly linkFontWeight: "600";
+    };
+    readonly social: {
+        readonly gap: 12;
+    };
+};
+/** State block tokens (Empty State, Error State) */
+declare const stateBlockTokens: {
+    readonly default: {
+        readonly titleFontSize: 20;
+        readonly descriptionFontSize: 16;
+        readonly iconContainerSize: 80;
+        readonly iconContainerRadius: 40;
+    };
+    readonly compact: {
+        readonly titleFontSize: 18;
+        readonly descriptionFontSize: 14;
+        readonly iconContainerSize: 64;
+        readonly iconContainerRadius: 32;
+    };
+    readonly error: {
+        readonly iconContainerSize: 88;
+        readonly iconContainerRadius: 44;
+        readonly iconContainerSizeCompact: 72;
+        readonly iconContainerRadiusCompact: 36;
+        readonly codeFontSize: 11;
+    };
+    readonly typography: {
+        readonly titleFontWeight: "600";
+    };
+};
+/** Profile block tokens */
+declare const profileBlockTokens: {
+    readonly name: {
+        readonly fontSize: number;
+        readonly fontWeight: "700";
+    };
+    readonly subtitle: {
+        readonly fontSize: 16;
+    };
+    readonly bio: {
+        readonly fontSize: 16;
+        readonly lineHeight: 22;
+    };
+    readonly stat: {
+        readonly valueFontSize: 20;
+        readonly valueFontWeight: "700";
+        readonly labelFontSize: 12;
+    };
+};
+/** Settings block tokens */
+declare const settingsBlockTokens: {
+    readonly group: {
+        readonly titleFontSize: 11;
+        readonly titleFontWeight: "600";
+        readonly titleLetterSpacing: 0.5;
+        readonly descriptionFontSize: 12;
+    };
+    readonly item: {
+        readonly labelFontSize: 16;
+        readonly descriptionFontSize: 12;
+        readonly displayValueFontSize: 16;
+        readonly chevronFontSize: 16;
+        readonly chevronFontWeight: "600";
+        readonly paddingVertical: 14;
+        readonly paddingHorizontal: 16;
+    };
+};
+/** E-commerce block tokens (Banner, Hero, Pricing, Stats) */
+declare const ecommerceBlockTokens: {
+    readonly banner: {
+        readonly sm: {
+            readonly padding: 12;
+            readonly titleFontSize: 14;
+            readonly subtitleFontSize: 11;
+            readonly iconSize: 20;
+            readonly minHeight: 56;
+        };
+        readonly md: {
+            readonly padding: 16;
+            readonly titleFontSize: 16;
+            readonly subtitleFontSize: 14;
+            readonly iconSize: 24;
+            readonly minHeight: 72;
+        };
+        readonly lg: {
+            readonly padding: 20;
+            readonly titleFontSize: 20;
+            readonly subtitleFontSize: 16;
+            readonly iconSize: 32;
+            readonly minHeight: 100;
+        };
+        readonly titleFontWeight: "700";
+        readonly subtitleLineHeight: 20;
+    };
+    readonly hero: {
+        readonly titleFontSize: 30;
+        readonly titleFontWeight: 800;
+        readonly titleLineHeight: 38;
+        readonly subtitleFontSize: 16;
+        readonly subtitleLineHeight: 24;
+        readonly defaultHeight: 400;
+    };
+    readonly pricing: {
+        readonly planNameFontSize: 20;
+        readonly planNameFontWeight: "700";
+        readonly descriptionFontSize: 14;
+        readonly priceFontSize: 40;
+        readonly priceFontWeight: 800;
+        readonly priceLineHeight: 48;
+        readonly intervalFontSize: 16;
+        readonly intervalFontWeight: "500";
+        readonly originalPriceFontSize: 16;
+        readonly savingsFontSize: 12;
+        readonly savingsFontWeight: "600";
+        readonly featureTextFontSize: 14;
+        readonly featureIconSize: 20;
+        readonly featureIconInnerSize: 12;
+        readonly badgeTopOffset: -12;
+    };
+    readonly stats: {
+        readonly labelFontSize: 14;
+        readonly labelFontWeight: "500";
+        readonly valueFontSize: 30;
+        readonly valueFontWeight: "700";
+        readonly trendFontSize: 14;
+        readonly trendFontWeight: "600";
+        readonly trendLabelFontSize: 12;
+    };
+};
+/** Info block tokens (Feature, Content, Onboarding, Media, Notification) */
+declare const infoBlockTokens: {
+    readonly feature: {
+        readonly titleFontSize: 16;
+        readonly titleFontWeight: "600";
+        readonly descriptionFontSize: 14;
+        readonly descriptionLineHeight: 20;
+        readonly iconContainerSize: 56;
+        readonly iconContainerSizeHorizontal: 48;
+    };
+    readonly content: {
+        readonly titleFontSize: 18;
+        readonly titleFontWeight: "700";
+        readonly titleLineHeight: 24;
+        readonly subtitleFontSize: 14;
+        readonly subtitleLineHeight: 20;
+        readonly defaultAspectRatio: number;
+    };
+    readonly onboarding: {
+        readonly titleFontSize: 24;
+        readonly titleFontWeight: "700";
+        readonly titleLineHeight: 34;
+        readonly descriptionFontSize: 16;
+        readonly descriptionLineHeight: 24;
+        readonly dotSize: 8;
+        readonly dotActiveWidth: 24;
+        readonly paginationMarginTop: 32;
+        readonly illustrationPaddingHorizontal: 40;
+    };
+    readonly socialProof: {
+        readonly textFontSize: 14;
+        readonly textLineHeight: 18;
+        readonly avatarOverlapRatio: 0.3;
+    };
+    readonly notification: {
+        readonly textFontSize: 15;
+        readonly textLineHeight: 20;
+        readonly titleFontWeight: "600";
+        readonly timeFontSize: 12;
+        readonly unreadDotSize: 8;
+        readonly avatarSize: 44;
+    };
+    readonly media: {
+        readonly defaultSize: 100;
+        readonly playButtonSize: 44;
+        readonly playIconSize: 24;
+        readonly checkboxSize: 24;
+        readonly checkIconSize: 14;
+        readonly durationBadgeMargin: 4;
+        readonly checkboxOffset: 8;
+    };
+    readonly order: {
+        readonly orderIdFontSize: 15;
+        readonly orderIdFontWeight: "600";
+        readonly dateFontSize: 12;
+        readonly itemCountFontSize: 14;
+        readonly totalFontSize: 16;
+        readonly totalFontWeight: "700";
+        readonly productImageSize: 48;
+        readonly moreTextFontSize: 14;
+        readonly moreTextFontWeight: "600";
+    };
+    readonly task: {
+        readonly titleFontSize: 15;
+        readonly titleFontWeight: "500";
+        readonly titleLineHeight: 20;
+        readonly descriptionFontSize: 12;
+        readonly dueDateFontSize: 11;
+        readonly moreTagsFontSize: 11;
+        readonly flagIconSize: 12;
+        readonly calendarIconSize: 12;
+    };
+    readonly searchHeader: {
+        readonly filterBadgeOffset: -4;
+    };
+};
+/**
+ * Shared card block visual tokens
+ * Used by: ProductCard, ArticleCard, EventCard, ReviewCard
+ */
+/** Card block tokens (Product, Article, Event, Review cards) */
+declare const cardBlockTokens: {
+    readonly shadow: "sm";
+    readonly borderWidth: 1;
+    readonly image: {
+        readonly productAspectRatio: 1;
+        readonly articleAspectRatio: 1.78;
+        readonly eventAspectRatio: 2.4;
+        readonly reviewAspectRatio: 1;
+    };
+    readonly header: {
+        readonly paddingVertical: 12;
+        readonly paddingHorizontal: 16;
+        readonly gap: 8;
+    };
+    readonly content: {
+        readonly paddingVertical: 12;
+        readonly paddingHorizontal: 16;
+        readonly gap: 6;
+    };
+    readonly footer: {
+        readonly paddingVertical: 12;
+        readonly paddingHorizontal: 16;
+        readonly gap: 8;
+    };
+    readonly typography: {
+        readonly titleFontSize: 16;
+        readonly titleFontWeight: "600";
+        readonly subtitleFontSize: 14;
+        readonly priceFontSize: 18;
+        readonly priceFontWeight: "700";
+        readonly metaFontSize: 12;
+    };
+};
+/**
+ * Social interaction block tokens
+ * Used by: FeedPostCard, ChatBubble, CommentItem, UserListItem
+ */
+/** Social block tokens (Feed, Chat, Comments, User lists) */
+declare const socialBlockTokens: {
+    readonly action: {
+        readonly iconSize: 20;
+        readonly gap: 4;
+        readonly touchTarget: 44;
+    };
+    readonly avatar: {
+        readonly postSize: "md";
+        readonly commentSize: "sm";
+        readonly chatSize: "sm";
+        readonly listSize: "md";
+    };
+    readonly bubble: {
+        readonly maxWidth: "75%";
+        readonly paddingVertical: 8;
+        readonly paddingHorizontal: 12;
+        readonly ownBackground: "primary";
+        readonly otherBackground: "secondary";
+    };
+    readonly comment: {
+        readonly indentPerLevel: 24;
+        readonly maxNestingLevels: 3;
+    };
+    readonly typography: {
+        readonly authorFontSize: 14;
+        readonly authorFontWeight: "600";
+        readonly contentFontSize: 16;
+        readonly contentLineHeight: 22;
+        readonly timeFontSize: 12;
+        readonly actionFontSize: 12;
+    };
+};
+/**
+ * Product block tokens (Phase 10 - Product cards and cart items)
+ * Used by: ProductCard, CartItem
+ */
+/** Product block tokens (Product cards, Cart items) */
+declare const productBlockTokens: {
+    readonly product: {
+        readonly badgePosition: {
+            readonly top: 8;
+            readonly left: 8;
+        };
+        readonly wishlistPosition: {
+            readonly top: 8;
+            readonly right: 8;
+        };
+        readonly ratingSize: "sm";
+    };
+    readonly cart: {
+        readonly imageSize: 80;
+        readonly stepperSize: "sm";
+        readonly swipeActionWidth: 80;
+    };
+    readonly pricing: {
+        readonly originalPriceOpacity: 0.6;
+        readonly originalPriceDecoration: "line-through";
+        readonly discountColor: "destructive";
+    };
+};
+/** Calendar component size tokens */
+declare const calendarTokens: {
+    readonly sm: {
+        readonly daySize: 32;
+        readonly fontSize: 12;
+        readonly headerFontSize: 14;
+        readonly gap: 2;
+        readonly containerPadding: 8;
+        readonly weekNumberWidth: 24;
+        readonly navButtonPadding: 8;
+    };
+    readonly md: {
+        readonly daySize: 40;
+        readonly fontSize: 14;
+        readonly headerFontSize: 16;
+        readonly gap: 4;
+        readonly containerPadding: 8;
+        readonly weekNumberWidth: 24;
+        readonly navButtonPadding: 8;
+    };
+};
+/** DateTimePicker component tokens */
+declare const dateTimePickerTokens: {
+    readonly input: {
+        readonly height: 44;
+        readonly paddingHorizontal: 16;
+        readonly paddingVertical: 12;
+        readonly iconMarginLeft: 8;
+    };
+    readonly sheet: {
+        readonly borderRadius: 20;
+        readonly handlePaddingVertical: 12;
+        readonly handleWidth: 36;
+        readonly handleHeight: 4;
+        readonly headerPaddingHorizontal: 16;
+        readonly headerPaddingBottom: 12;
+        readonly pickerPaddingVertical: 16;
+        readonly pickerHeight: 200;
+    };
+    readonly fallback: {
+        readonly padding: 24;
+        readonly gap: 12;
+    };
+    readonly icon: {
+        readonly width: 20;
+        readonly height: 20;
+        readonly topWidth: 14;
+        readonly topHeight: 3;
+        readonly bodyWidth: 16;
+        readonly bodyHeight: 14;
+        readonly dotSize: 3;
+        readonly dotGap: 3;
+    };
+};
+/** Form component tokens */
+declare const formTokens: {
+    readonly item: {
+        readonly marginBottom: 16;
+    };
+    readonly label: {
+        readonly fontSize: 14;
+        readonly fontWeight: "500";
+        readonly marginBottom: 6;
+    };
+    readonly description: {
+        readonly fontSize: 12;
+        readonly marginTop: 4;
+    };
+    readonly message: {
+        readonly fontSize: 12;
+        readonly fontWeight: "500";
+        readonly marginTop: 4;
+    };
+};
+/** ImageGallery component tokens */
+declare const imageGalleryTokens: {
+    readonly grid: {
+        readonly defaultColumns: 3;
+        readonly defaultSpacing: 2;
+        readonly defaultAspectRatio: 1;
+    };
+    readonly fullscreen: {
+        readonly backdropOpacity: 0.95;
+        readonly closeButtonTop: 50;
+        readonly closeButtonTopAndroid: 20;
+        readonly closeButtonSize: 36;
+        readonly closeLineWidth: 18;
+        readonly closeLineHeight: 2;
+        readonly pageIndicatorBottom: 50;
+        readonly dotSize: 6;
+        readonly dotGap: 6;
+    };
+};
+/** Pagination component size tokens */
+declare const paginationTokens: {
+    readonly sm: {
+        readonly dotSize: 6;
+        readonly dotGap: 6;
+        readonly buttonSize: 28;
+        readonly fontSize: 12;
+        readonly numberSize: 28;
+    };
+    readonly md: {
+        readonly dotSize: 8;
+        readonly dotGap: 8;
+        readonly buttonSize: 36;
+        readonly fontSize: 14;
+        readonly numberSize: 36;
+    };
+    readonly lg: {
+        readonly dotSize: 10;
+        readonly dotGap: 10;
+        readonly buttonSize: 44;
+        readonly fontSize: 16;
+        readonly numberSize: 44;
+    };
+    readonly simple: {
+        readonly gap: 4;
+    };
+};
+/** Stories component size tokens */
+declare const storiesTokens: {
+    readonly sm: {
+        readonly outer: 56;
+        readonly inner: 50;
+        readonly avatar: 46;
+        readonly borderWidth: 3;
+        readonly fontSize: 11;
+        readonly plusSize: 14;
+        readonly nameMarginTop: 4;
+    };
+    readonly md: {
+        readonly outer: 72;
+        readonly inner: 64;
+        readonly avatar: 60;
+        readonly borderWidth: 3;
+        readonly fontSize: 11;
+        readonly plusSize: 18;
+        readonly nameMarginTop: 4;
+    };
+    readonly lg: {
+        readonly outer: 88;
+        readonly inner: 80;
+        readonly avatar: 74;
+        readonly borderWidth: 4;
+        readonly fontSize: 12;
+        readonly plusSize: 22;
+        readonly nameMarginTop: 4;
+    };
+    readonly row: {
+        readonly paddingHorizontal: 16;
+        readonly gap: 12;
+    };
+};
+/** SearchInput component tokens */
+declare const searchInputTokens: {
+    readonly height: 44;
+    readonly paddingHorizontal: 12;
+    readonly iconSize: 20;
+    readonly iconMarginRight: 8;
+    readonly clearSize: 18;
+    readonly rightContainerWidth: 24;
+    readonly rightContainerMarginLeft: 8;
+    readonly fontSize: 16;
+};
+/**
+ * Complete component token collection.
+ *
+ * Access all component size and style tokens via `useTheme().components`.
+ */
+declare const components: {
+    readonly button: {
+        readonly sm: {
+            readonly height: 32;
+            readonly paddingHorizontal: 12;
+            readonly paddingVertical: 6;
+            readonly fontSize: 14;
+            readonly fontWeight: "600";
+            readonly iconSize: 16;
+            readonly gap: 6;
+        };
+        readonly md: {
+            readonly height: 44;
+            readonly paddingHorizontal: 16;
+            readonly paddingVertical: 10;
+            readonly fontSize: 16;
+            readonly fontWeight: "600";
+            readonly iconSize: 20;
+            readonly gap: 8;
+        };
+        readonly lg: {
+            readonly height: 52;
+            readonly paddingHorizontal: 24;
+            readonly paddingVertical: 14;
+            readonly fontSize: 18;
+            readonly fontWeight: "600";
+            readonly iconSize: 24;
+            readonly gap: 10;
+        };
+    };
+    readonly iconButton: {
+        readonly sm: {
+            readonly size: 32;
+            readonly iconSize: 16;
+        };
+        readonly md: {
+            readonly size: 40;
+            readonly iconSize: 20;
+        };
+        readonly lg: {
+            readonly size: 48;
+            readonly iconSize: 24;
+        };
+        readonly xl: {
+            readonly size: 56;
+            readonly iconSize: 28;
+        };
+    };
+    readonly fab: {
+        readonly sm: {
+            readonly size: 40;
+            readonly iconSize: 18;
+            readonly fontSize: 12;
+            readonly paddingHorizontal: 12;
+            readonly fontWeight: "600";
+        };
+        readonly md: {
+            readonly size: 56;
+            readonly iconSize: 24;
+            readonly fontSize: 14;
+            readonly paddingHorizontal: 16;
+            readonly fontWeight: "600";
+        };
+        readonly lg: {
+            readonly size: 72;
+            readonly iconSize: 32;
+            readonly fontSize: 16;
+            readonly paddingHorizontal: 20;
+            readonly fontWeight: "600";
+        };
+    };
+    readonly segmentedControl: {
+        readonly sm: {
+            readonly height: 32;
+            readonly fontSize: 12;
+            readonly padding: 4;
+            readonly fontWeight: "500";
+            readonly activeFontWeight: "600";
+        };
+        readonly md: {
+            readonly height: 40;
+            readonly fontSize: 14;
+            readonly padding: 4;
+            readonly fontWeight: "500";
+            readonly activeFontWeight: "600";
+        };
+        readonly lg: {
+            readonly height: 48;
+            readonly fontSize: 16;
+            readonly padding: 4;
+            readonly fontWeight: "500";
+            readonly activeFontWeight: "600";
+        };
+    };
+    readonly actionSheet: {
+        readonly item: {
+            readonly height: 52;
+            readonly fontSize: 16;
+            readonly fontWeight: "500";
+            readonly iconSize: 20;
+            readonly paddingHorizontal: 16;
+            readonly gap: 12;
+        };
+        readonly header: {
+            readonly fontSize: 12;
+            readonly fontWeight: "600";
+            readonly paddingVertical: 12;
+            readonly paddingHorizontal: 16;
+        };
+        readonly cancel: {
+            readonly height: 52;
+            readonly fontSize: 16;
+            readonly fontWeight: "600";
+        };
+    };
+    readonly input: {
+        readonly sm: {
+            readonly height: 32;
+            readonly paddingHorizontal: 12;
+            readonly paddingVertical: 6;
+            readonly borderWidth: 1;
+            readonly fontSize: 14;
+            readonly labelFontSize: 12;
+            readonly helperFontSize: 11;
+            readonly iconSize: 16;
+        };
+        readonly md: {
+            readonly height: 44;
+            readonly paddingHorizontal: 12;
+            readonly paddingVertical: 10;
+            readonly borderWidth: 1;
+            readonly fontSize: 16;
+            readonly labelFontSize: 14;
+            readonly helperFontSize: 12;
+            readonly iconSize: 20;
+        };
+        readonly lg: {
+            readonly height: 52;
+            readonly paddingHorizontal: 16;
+            readonly paddingVertical: 12;
+            readonly borderWidth: 1;
+            readonly fontSize: 18;
+            readonly labelFontSize: 16;
+            readonly helperFontSize: 14;
+            readonly iconSize: 24;
+        };
+    };
+    readonly textarea: {
+        readonly sm: {
+            readonly minHeight: number;
+            readonly paddingHorizontal: 12;
+            readonly paddingVertical: 8;
+            readonly borderWidth: 1;
+            readonly fontSize: 14;
+            readonly lineHeight: 20;
+            readonly labelFontSize: 12;
+            readonly helperFontSize: 11;
+        };
+        readonly md: {
+            readonly minHeight: number;
+            readonly paddingHorizontal: 12;
+            readonly paddingVertical: 10;
+            readonly borderWidth: 1;
+            readonly fontSize: 16;
+            readonly lineHeight: 22;
+            readonly labelFontSize: 14;
+            readonly helperFontSize: 12;
+        };
+        readonly lg: {
+            readonly minHeight: number;
+            readonly paddingHorizontal: 16;
+            readonly paddingVertical: 12;
+            readonly borderWidth: 1;
+            readonly fontSize: 18;
+            readonly lineHeight: 24;
+            readonly labelFontSize: 16;
+            readonly helperFontSize: 14;
+        };
+    };
+    readonly select: {
+        readonly sm: {
+            readonly height: 32;
+            readonly paddingHorizontal: 12;
+            readonly borderWidth: 1;
+            readonly fontSize: 14;
+            readonly labelFontSize: 12;
+            readonly helperFontSize: 11;
+            readonly iconSize: 16;
+        };
+        readonly md: {
+            readonly height: 44;
+            readonly paddingHorizontal: 12;
+            readonly borderWidth: 1;
+            readonly fontSize: 16;
+            readonly labelFontSize: 14;
+            readonly helperFontSize: 12;
+            readonly iconSize: 20;
+        };
+        readonly lg: {
+            readonly height: 52;
+            readonly paddingHorizontal: 16;
+            readonly borderWidth: 1;
+            readonly fontSize: 18;
+            readonly labelFontSize: 16;
+            readonly helperFontSize: 14;
+            readonly iconSize: 24;
+        };
+    };
+    readonly slider: {
+        readonly sm: {
+            readonly trackHeight: 4;
+            readonly thumbSize: 16;
+            readonly labelFontSize: 14;
+            readonly valueFontSize: 14;
+        };
+        readonly md: {
+            readonly trackHeight: 6;
+            readonly thumbSize: 20;
+            readonly labelFontSize: 16;
+            readonly valueFontSize: 16;
+        };
+        readonly lg: {
+            readonly trackHeight: 8;
+            readonly thumbSize: 24;
+            readonly labelFontSize: 18;
+            readonly valueFontSize: 18;
+        };
+    };
+    readonly stepper: {
+        readonly sm: {
+            readonly height: 32;
+            readonly buttonWidth: 32;
+            readonly valueWidth: 40;
+            readonly fontSize: 14;
+            readonly iconSize: 16;
+            readonly labelFontSize: 14;
+        };
+        readonly md: {
+            readonly height: 44;
+            readonly buttonWidth: 40;
+            readonly valueWidth: 48;
+            readonly fontSize: 16;
+            readonly iconSize: 20;
+            readonly labelFontSize: 16;
+        };
+        readonly lg: {
+            readonly height: 52;
+            readonly buttonWidth: 48;
+            readonly valueWidth: 56;
+            readonly fontSize: 18;
+            readonly iconSize: 24;
+            readonly labelFontSize: 18;
+        };
+    };
+    readonly checkbox: {
+        readonly sm: {
+            readonly size: 18;
+            readonly borderWidth: 2;
+            readonly iconSize: 12;
+            readonly labelFontSize: 14;
+            readonly gap: 8;
+        };
+        readonly md: {
+            readonly size: 22;
+            readonly borderWidth: 2;
+            readonly iconSize: 14;
+            readonly labelFontSize: 16;
+            readonly gap: 10;
+        };
+        readonly lg: {
+            readonly size: 26;
+            readonly borderWidth: 2;
+            readonly iconSize: 18;
+            readonly labelFontSize: 18;
+            readonly gap: 12;
+        };
+    };
+    readonly switch: {
+        readonly sm: {
+            readonly trackWidth: 40;
+            readonly trackHeight: 24;
+            readonly thumbSize: 20;
+            readonly thumbOffset: 2;
+            readonly labelFontSize: 14;
+            readonly gap: 12;
+        };
+        readonly md: {
+            readonly trackWidth: 50;
+            readonly trackHeight: 30;
+            readonly thumbSize: 26;
+            readonly thumbOffset: 2;
+            readonly labelFontSize: 16;
+            readonly gap: 12;
+        };
+        readonly lg: {
+            readonly trackWidth: 60;
+            readonly trackHeight: 36;
+            readonly thumbSize: 32;
+            readonly thumbOffset: 2;
+            readonly labelFontSize: 18;
+            readonly gap: 16;
+        };
+    };
+    readonly radio: {
+        readonly sm: {
+            readonly outerSize: 16;
+            readonly innerSize: 8;
+            readonly borderWidth: 2;
+            readonly labelFontSize: 14;
+            readonly descriptionFontSize: 12;
+            readonly gap: 8;
+        };
+        readonly md: {
+            readonly outerSize: 20;
+            readonly innerSize: 10;
+            readonly borderWidth: 2;
+            readonly labelFontSize: 16;
+            readonly descriptionFontSize: 14;
+            readonly gap: 10;
+        };
+        readonly lg: {
+            readonly outerSize: 24;
+            readonly innerSize: 12;
+            readonly borderWidth: 2;
+            readonly labelFontSize: 18;
+            readonly descriptionFontSize: 16;
+            readonly gap: 12;
+        };
+    };
+    readonly tagInput: {
+        readonly sm: {
+            readonly minHeight: 32;
+            readonly padding: 8;
+            readonly tagHeight: 24;
+            readonly tagFontSize: 11;
+            readonly inputFontSize: 14;
+            readonly labelFontSize: 12;
+            readonly helperFontSize: 11;
+            readonly gap: 4;
+        };
+        readonly md: {
+            readonly minHeight: 44;
+            readonly padding: 12;
+            readonly tagHeight: 28;
+            readonly tagFontSize: 12;
+            readonly inputFontSize: 16;
+            readonly labelFontSize: 14;
+            readonly helperFontSize: 12;
+            readonly gap: 6;
+        };
+        readonly lg: {
+            readonly minHeight: 52;
+            readonly padding: 16;
+            readonly tagHeight: 32;
+            readonly tagFontSize: 14;
+            readonly inputFontSize: 18;
+            readonly labelFontSize: 16;
+            readonly helperFontSize: 14;
+            readonly gap: 8;
+        };
+    };
+    readonly badge: {
+        readonly sm: {
+            readonly paddingHorizontal: 6;
+            readonly paddingVertical: 2;
+            readonly fontSize: 11;
+            readonly fontWeight: "500";
+        };
+        readonly md: {
+            readonly paddingHorizontal: 10;
+            readonly paddingVertical: 2;
+            readonly fontSize: 12;
+            readonly fontWeight: "500";
+        };
+        readonly lg: {
+            readonly paddingHorizontal: 12;
+            readonly paddingVertical: 4;
+            readonly fontSize: 14;
+            readonly fontWeight: "500";
+        };
+    };
+    readonly avatar: {
+        readonly sm: {
+            readonly size: 32;
+            readonly fontSize: 11;
+            readonly fontWeight: "600";
+        };
+        readonly md: {
+            readonly size: 40;
+            readonly fontSize: 14;
+            readonly fontWeight: "600";
+        };
+        readonly lg: {
+            readonly size: 56;
+            readonly fontSize: 20;
+            readonly fontWeight: "600";
+        };
+    };
+    readonly chip: {
+        readonly sm: {
+            readonly paddingHorizontal: 10;
+            readonly paddingVertical: 4;
+            readonly fontSize: 12;
+            readonly iconSize: 16;
+        };
+        readonly md: {
+            readonly paddingHorizontal: 14;
+            readonly paddingVertical: 6;
+            readonly fontSize: 14;
+            readonly iconSize: 16;
+        };
+        readonly lg: {
+            readonly paddingHorizontal: 20;
+            readonly paddingVertical: 8;
+            readonly fontSize: 16;
+            readonly iconSize: 20;
+        };
+    };
+    readonly label: {
+        readonly sm: {
+            readonly fontSize: 12;
+            readonly lineHeight: 16;
+            readonly fontWeight: "500";
+        };
+        readonly md: {
+            readonly fontSize: 14;
+            readonly lineHeight: 20;
+            readonly fontWeight: "500";
+        };
+        readonly lg: {
+            readonly fontSize: 16;
+            readonly lineHeight: 24;
+            readonly fontWeight: "500";
+        };
+    };
+    readonly rating: {
+        readonly sm: {
+            readonly starSize: 18;
+            readonly gap: 2;
+        };
+        readonly md: {
+            readonly starSize: 26;
+            readonly gap: 4;
+        };
+        readonly lg: {
+            readonly starSize: 34;
+            readonly gap: 6;
+        };
+    };
+    readonly avatarStack: {
+        readonly sm: {
+            readonly size: 28;
+            readonly fontSize: 10;
+            readonly borderWidth: 2;
+        };
+        readonly md: {
+            readonly size: 36;
+            readonly fontSize: 12;
+            readonly borderWidth: 2;
+        };
+        readonly lg: {
+            readonly size: 44;
+            readonly fontSize: 14;
+            readonly borderWidth: 3;
+        };
+        readonly xl: {
+            readonly size: 56;
+            readonly fontSize: 18;
+            readonly borderWidth: 3;
+        };
+    };
+    readonly card: {
+        readonly borderWidth: 1;
+        readonly padding: 16;
+        readonly headerPadding: 16;
+        readonly contentPadding: 16;
+        readonly footerPadding: 16;
+        readonly gap: 8;
+        readonly titleFontSize: 18;
+        readonly titleFontWeight: "600";
+        readonly descriptionFontSize: 14;
+    };
+    readonly overlayTypography: {
+        readonly title: {
+            readonly fontSize: 18;
+            readonly fontWeight: "600";
+            readonly lineHeight: 24;
+        };
+        readonly description: {
+            readonly fontSize: 14;
+            readonly fontWeight: "400";
+            readonly lineHeight: 20;
+        };
+    };
+    readonly spinner: {
+        readonly sm: {
+            readonly containerSize: 16;
+            readonly indicatorSize: "small";
+        };
+        readonly md: {
+            readonly containerSize: 24;
+            readonly indicatorSize: "small";
+        };
+        readonly lg: {
+            readonly containerSize: 36;
+            readonly indicatorSize: "large";
+        };
+    };
+    readonly skeleton: {
+        readonly radius: {
+            readonly none: 0;
+            readonly sm: 4;
+            readonly md: 8;
+            readonly lg: 12;
+            readonly full: 9999;
+        };
+        readonly animation: {
+            readonly duration: 1500;
+            readonly minOpacity: 0.3;
+            readonly maxOpacity: 0.6;
+        };
+        readonly text: {
+            readonly defaultLines: 3;
+            readonly defaultGap: 8;
+            readonly defaultLineHeight: 16;
+            readonly lastLineWidth: "60%";
+        };
+    };
+    readonly progress: {
+        readonly sm: {
+            readonly height: 4;
+        };
+        readonly md: {
+            readonly height: 8;
+        };
+        readonly lg: {
+            readonly height: 12;
+        };
+        readonly animation: {
+            readonly determinateDuration: 300;
+            readonly indeterminateDuration: 1000;
+        };
+    };
+    readonly circularProgress: {
+        readonly sm: {
+            readonly size: 40;
+            readonly strokeWidth: 4;
+            readonly labelSize: 10;
+        };
+        readonly md: {
+            readonly size: 64;
+            readonly strokeWidth: 6;
+            readonly labelSize: 14;
+        };
+        readonly lg: {
+            readonly size: 96;
+            readonly strokeWidth: 8;
+            readonly labelSize: 20;
+        };
+        readonly animation: {
+            readonly rotationDuration: 1200;
+            readonly springDamping: 20;
+            readonly springStiffness: 100;
+        };
+    };
+    readonly list: {
+        readonly divider: {
+            readonly inset: 56;
+        };
+        readonly item: {
+            readonly minHeight: 52;
+            readonly paddingHorizontal: 16;
+            readonly paddingVertical: 12;
+            readonly iconSize: 24;
+            readonly iconMargin: 12;
+        };
+    };
+    readonly tabs: {
+        readonly trigger: {
+            readonly fontSize: 14;
+            readonly fontWeight: "500";
+            readonly activeFontWeight: "600";
+            readonly paddingVertical: 8;
+            readonly paddingHorizontal: 12;
+        };
+        readonly triggerUnderline: {
+            readonly paddingVertical: 12;
+            readonly paddingHorizontal: 16;
+        };
+        readonly content: {
+            readonly marginTop: 16;
+        };
+        readonly indicator: {
+            readonly pillTop: 4;
+            readonly pillBottom: 4;
+            readonly underlineHeight: 2;
+        };
+    };
+    readonly accordion: {
+        readonly trigger: {
+            readonly fontSize: 16;
+            readonly fontWeight: "500";
+            readonly paddingVertical: 16;
+            readonly paddingHorizontal: 16;
+            readonly iconMargin: 8;
+        };
+        readonly content: {
+            readonly paddingHorizontal: 16;
+            readonly paddingBottom: 16;
+        };
+        readonly item: {
+            readonly borderWidth: 1;
+        };
+    };
+    readonly collapsible: {
+        readonly trigger: {
+            readonly paddingVertical: 12;
+            readonly paddingHorizontal: 16;
+            readonly iconMargin: 8;
+        };
+    };
+    readonly carousel: {
+        readonly indicator: {
+            readonly dotSize: 8;
+            readonly dotActiveWidth: 24;
+            readonly dotActiveScale: 1;
+            readonly dotInactiveScale: 0.8;
+            readonly dotInactiveOpacity: 0.4;
+            readonly gap: 6;
+            readonly paddingVertical: 8;
+        };
+        readonly lineIndicator: {
+            readonly activeWidth: 24;
+            readonly inactiveWidth: 8;
+        };
+    };
+    readonly swipeableRow: {
+        readonly action: {
+            readonly width: 80;
+            readonly paddingHorizontal: 8;
+            readonly iconMargin: 4;
+            readonly labelFontSize: 11;
+            readonly labelFontWeight: "600";
+        };
+    };
+    readonly authBlock: {
+        readonly header: {
+            readonly titleFontSize: 24;
+            readonly titleFontWeight: "700";
+            readonly subtitleFontSize: 16;
+        };
+        readonly form: {
+            readonly forgotLinkFontSize: 14;
+            readonly forgotLinkFontWeight: "500";
+            readonly passwordHintFontSize: 11;
+        };
+        readonly divider: {
+            readonly fontSize: 14;
+        };
+        readonly footer: {
+            readonly textFontSize: 14;
+            readonly linkFontSize: 14;
+            readonly linkFontWeight: "600";
+        };
+        readonly social: {
+            readonly gap: 12;
+        };
+    };
+    readonly stateBlock: {
+        readonly default: {
+            readonly titleFontSize: 20;
+            readonly descriptionFontSize: 16;
+            readonly iconContainerSize: 80;
+            readonly iconContainerRadius: 40;
+        };
+        readonly compact: {
+            readonly titleFontSize: 18;
+            readonly descriptionFontSize: 14;
+            readonly iconContainerSize: 64;
+            readonly iconContainerRadius: 32;
+        };
+        readonly error: {
+            readonly iconContainerSize: 88;
+            readonly iconContainerRadius: 44;
+            readonly iconContainerSizeCompact: 72;
+            readonly iconContainerRadiusCompact: 36;
+            readonly codeFontSize: 11;
+        };
+        readonly typography: {
+            readonly titleFontWeight: "600";
+        };
+    };
+    readonly profileBlock: {
+        readonly name: {
+            readonly fontSize: number;
+            readonly fontWeight: "700";
+        };
+        readonly subtitle: {
+            readonly fontSize: 16;
+        };
+        readonly bio: {
+            readonly fontSize: 16;
+            readonly lineHeight: 22;
+        };
+        readonly stat: {
+            readonly valueFontSize: 20;
+            readonly valueFontWeight: "700";
+            readonly labelFontSize: 12;
+        };
+    };
+    readonly settingsBlock: {
+        readonly group: {
+            readonly titleFontSize: 11;
+            readonly titleFontWeight: "600";
+            readonly titleLetterSpacing: 0.5;
+            readonly descriptionFontSize: 12;
+        };
+        readonly item: {
+            readonly labelFontSize: 16;
+            readonly descriptionFontSize: 12;
+            readonly displayValueFontSize: 16;
+            readonly chevronFontSize: 16;
+            readonly chevronFontWeight: "600";
+            readonly paddingVertical: 14;
+            readonly paddingHorizontal: 16;
+        };
+    };
+    readonly cardBlock: {
+        readonly shadow: "sm";
+        readonly borderWidth: 1;
+        readonly image: {
+            readonly productAspectRatio: 1;
+            readonly articleAspectRatio: 1.78;
+            readonly eventAspectRatio: 2.4;
+            readonly reviewAspectRatio: 1;
+        };
+        readonly header: {
+            readonly paddingVertical: 12;
+            readonly paddingHorizontal: 16;
+            readonly gap: 8;
+        };
+        readonly content: {
+            readonly paddingVertical: 12;
+            readonly paddingHorizontal: 16;
+            readonly gap: 6;
+        };
+        readonly footer: {
+            readonly paddingVertical: 12;
+            readonly paddingHorizontal: 16;
+            readonly gap: 8;
+        };
+        readonly typography: {
+            readonly titleFontSize: 16;
+            readonly titleFontWeight: "600";
+            readonly subtitleFontSize: 14;
+            readonly priceFontSize: 18;
+            readonly priceFontWeight: "700";
+            readonly metaFontSize: 12;
+        };
+    };
+    readonly socialBlock: {
+        readonly action: {
+            readonly iconSize: 20;
+            readonly gap: 4;
+            readonly touchTarget: 44;
+        };
+        readonly avatar: {
+            readonly postSize: "md";
+            readonly commentSize: "sm";
+            readonly chatSize: "sm";
+            readonly listSize: "md";
+        };
+        readonly bubble: {
+            readonly maxWidth: "75%";
+            readonly paddingVertical: 8;
+            readonly paddingHorizontal: 12;
+            readonly ownBackground: "primary";
+            readonly otherBackground: "secondary";
+        };
+        readonly comment: {
+            readonly indentPerLevel: 24;
+            readonly maxNestingLevels: 3;
+        };
+        readonly typography: {
+            readonly authorFontSize: 14;
+            readonly authorFontWeight: "600";
+            readonly contentFontSize: 16;
+            readonly contentLineHeight: 22;
+            readonly timeFontSize: 12;
+            readonly actionFontSize: 12;
+        };
+    };
+    readonly productBlock: {
+        readonly product: {
+            readonly badgePosition: {
+                readonly top: 8;
+                readonly left: 8;
+            };
+            readonly wishlistPosition: {
+                readonly top: 8;
+                readonly right: 8;
+            };
+            readonly ratingSize: "sm";
+        };
+        readonly cart: {
+            readonly imageSize: 80;
+            readonly stepperSize: "sm";
+            readonly swipeActionWidth: 80;
+        };
+        readonly pricing: {
+            readonly originalPriceOpacity: 0.6;
+            readonly originalPriceDecoration: "line-through";
+            readonly discountColor: "destructive";
+        };
+    };
+    readonly ecommerceBlock: {
+        readonly banner: {
+            readonly sm: {
+                readonly padding: 12;
+                readonly titleFontSize: 14;
+                readonly subtitleFontSize: 11;
+                readonly iconSize: 20;
+                readonly minHeight: 56;
+            };
+            readonly md: {
+                readonly padding: 16;
+                readonly titleFontSize: 16;
+                readonly subtitleFontSize: 14;
+                readonly iconSize: 24;
+                readonly minHeight: 72;
+            };
+            readonly lg: {
+                readonly padding: 20;
+                readonly titleFontSize: 20;
+                readonly subtitleFontSize: 16;
+                readonly iconSize: 32;
+                readonly minHeight: 100;
+            };
+            readonly titleFontWeight: "700";
+            readonly subtitleLineHeight: 20;
+        };
+        readonly hero: {
+            readonly titleFontSize: 30;
+            readonly titleFontWeight: 800;
+            readonly titleLineHeight: 38;
+            readonly subtitleFontSize: 16;
+            readonly subtitleLineHeight: 24;
+            readonly defaultHeight: 400;
+        };
+        readonly pricing: {
+            readonly planNameFontSize: 20;
+            readonly planNameFontWeight: "700";
+            readonly descriptionFontSize: 14;
+            readonly priceFontSize: 40;
+            readonly priceFontWeight: 800;
+            readonly priceLineHeight: 48;
+            readonly intervalFontSize: 16;
+            readonly intervalFontWeight: "500";
+            readonly originalPriceFontSize: 16;
+            readonly savingsFontSize: 12;
+            readonly savingsFontWeight: "600";
+            readonly featureTextFontSize: 14;
+            readonly featureIconSize: 20;
+            readonly featureIconInnerSize: 12;
+            readonly badgeTopOffset: -12;
+        };
+        readonly stats: {
+            readonly labelFontSize: 14;
+            readonly labelFontWeight: "500";
+            readonly valueFontSize: 30;
+            readonly valueFontWeight: "700";
+            readonly trendFontSize: 14;
+            readonly trendFontWeight: "600";
+            readonly trendLabelFontSize: 12;
+        };
+    };
+    readonly infoBlock: {
+        readonly feature: {
+            readonly titleFontSize: 16;
+            readonly titleFontWeight: "600";
+            readonly descriptionFontSize: 14;
+            readonly descriptionLineHeight: 20;
+            readonly iconContainerSize: 56;
+            readonly iconContainerSizeHorizontal: 48;
+        };
+        readonly content: {
+            readonly titleFontSize: 18;
+            readonly titleFontWeight: "700";
+            readonly titleLineHeight: 24;
+            readonly subtitleFontSize: 14;
+            readonly subtitleLineHeight: 20;
+            readonly defaultAspectRatio: number;
+        };
+        readonly onboarding: {
+            readonly titleFontSize: 24;
+            readonly titleFontWeight: "700";
+            readonly titleLineHeight: 34;
+            readonly descriptionFontSize: 16;
+            readonly descriptionLineHeight: 24;
+            readonly dotSize: 8;
+            readonly dotActiveWidth: 24;
+            readonly paginationMarginTop: 32;
+            readonly illustrationPaddingHorizontal: 40;
+        };
+        readonly socialProof: {
+            readonly textFontSize: 14;
+            readonly textLineHeight: 18;
+            readonly avatarOverlapRatio: 0.3;
+        };
+        readonly notification: {
+            readonly textFontSize: 15;
+            readonly textLineHeight: 20;
+            readonly titleFontWeight: "600";
+            readonly timeFontSize: 12;
+            readonly unreadDotSize: 8;
+            readonly avatarSize: 44;
+        };
+        readonly media: {
+            readonly defaultSize: 100;
+            readonly playButtonSize: 44;
+            readonly playIconSize: 24;
+            readonly checkboxSize: 24;
+            readonly checkIconSize: 14;
+            readonly durationBadgeMargin: 4;
+            readonly checkboxOffset: 8;
+        };
+        readonly order: {
+            readonly orderIdFontSize: 15;
+            readonly orderIdFontWeight: "600";
+            readonly dateFontSize: 12;
+            readonly itemCountFontSize: 14;
+            readonly totalFontSize: 16;
+            readonly totalFontWeight: "700";
+            readonly productImageSize: 48;
+            readonly moreTextFontSize: 14;
+            readonly moreTextFontWeight: "600";
+        };
+        readonly task: {
+            readonly titleFontSize: 15;
+            readonly titleFontWeight: "500";
+            readonly titleLineHeight: 20;
+            readonly descriptionFontSize: 12;
+            readonly dueDateFontSize: 11;
+            readonly moreTagsFontSize: 11;
+            readonly flagIconSize: 12;
+            readonly calendarIconSize: 12;
+        };
+        readonly searchHeader: {
+            readonly filterBadgeOffset: -4;
+        };
+    };
+    readonly calendar: {
+        readonly sm: {
+            readonly daySize: 32;
+            readonly fontSize: 12;
+            readonly headerFontSize: 14;
+            readonly gap: 2;
+            readonly containerPadding: 8;
+            readonly weekNumberWidth: 24;
+            readonly navButtonPadding: 8;
+        };
+        readonly md: {
+            readonly daySize: 40;
+            readonly fontSize: 14;
+            readonly headerFontSize: 16;
+            readonly gap: 4;
+            readonly containerPadding: 8;
+            readonly weekNumberWidth: 24;
+            readonly navButtonPadding: 8;
+        };
+    };
+    readonly dateTimePicker: {
+        readonly input: {
+            readonly height: 44;
+            readonly paddingHorizontal: 16;
+            readonly paddingVertical: 12;
+            readonly iconMarginLeft: 8;
+        };
+        readonly sheet: {
+            readonly borderRadius: 20;
+            readonly handlePaddingVertical: 12;
+            readonly handleWidth: 36;
+            readonly handleHeight: 4;
+            readonly headerPaddingHorizontal: 16;
+            readonly headerPaddingBottom: 12;
+            readonly pickerPaddingVertical: 16;
+            readonly pickerHeight: 200;
+        };
+        readonly fallback: {
+            readonly padding: 24;
+            readonly gap: 12;
+        };
+        readonly icon: {
+            readonly width: 20;
+            readonly height: 20;
+            readonly topWidth: 14;
+            readonly topHeight: 3;
+            readonly bodyWidth: 16;
+            readonly bodyHeight: 14;
+            readonly dotSize: 3;
+            readonly dotGap: 3;
+        };
+    };
+    readonly form: {
+        readonly item: {
+            readonly marginBottom: 16;
+        };
+        readonly label: {
+            readonly fontSize: 14;
+            readonly fontWeight: "500";
+            readonly marginBottom: 6;
+        };
+        readonly description: {
+            readonly fontSize: 12;
+            readonly marginTop: 4;
+        };
+        readonly message: {
+            readonly fontSize: 12;
+            readonly fontWeight: "500";
+            readonly marginTop: 4;
+        };
+    };
+    readonly imageGallery: {
+        readonly grid: {
+            readonly defaultColumns: 3;
+            readonly defaultSpacing: 2;
+            readonly defaultAspectRatio: 1;
+        };
+        readonly fullscreen: {
+            readonly backdropOpacity: 0.95;
+            readonly closeButtonTop: 50;
+            readonly closeButtonTopAndroid: 20;
+            readonly closeButtonSize: 36;
+            readonly closeLineWidth: 18;
+            readonly closeLineHeight: 2;
+            readonly pageIndicatorBottom: 50;
+            readonly dotSize: 6;
+            readonly dotGap: 6;
+        };
+    };
+    readonly pagination: {
+        readonly sm: {
+            readonly dotSize: 6;
+            readonly dotGap: 6;
+            readonly buttonSize: 28;
+            readonly fontSize: 12;
+            readonly numberSize: 28;
+        };
+        readonly md: {
+            readonly dotSize: 8;
+            readonly dotGap: 8;
+            readonly buttonSize: 36;
+            readonly fontSize: 14;
+            readonly numberSize: 36;
+        };
+        readonly lg: {
+            readonly dotSize: 10;
+            readonly dotGap: 10;
+            readonly buttonSize: 44;
+            readonly fontSize: 16;
+            readonly numberSize: 44;
+        };
+        readonly simple: {
+            readonly gap: 4;
+        };
+    };
+    readonly stories: {
+        readonly sm: {
+            readonly outer: 56;
+            readonly inner: 50;
+            readonly avatar: 46;
+            readonly borderWidth: 3;
+            readonly fontSize: 11;
+            readonly plusSize: 14;
+            readonly nameMarginTop: 4;
+        };
+        readonly md: {
+            readonly outer: 72;
+            readonly inner: 64;
+            readonly avatar: 60;
+            readonly borderWidth: 3;
+            readonly fontSize: 11;
+            readonly plusSize: 18;
+            readonly nameMarginTop: 4;
+        };
+        readonly lg: {
+            readonly outer: 88;
+            readonly inner: 80;
+            readonly avatar: 74;
+            readonly borderWidth: 4;
+            readonly fontSize: 12;
+            readonly plusSize: 22;
+            readonly nameMarginTop: 4;
+        };
+        readonly row: {
+            readonly paddingHorizontal: 16;
+            readonly gap: 12;
+        };
+    };
+    readonly searchInput: {
+        readonly height: 44;
+        readonly paddingHorizontal: 12;
+        readonly iconSize: 20;
+        readonly iconMarginRight: 8;
+        readonly clearSize: 18;
+        readonly rightContainerWidth: 24;
+        readonly rightContainerMarginLeft: 8;
+        readonly fontSize: 16;
+    };
+    readonly height: {
+        /** Small: 32px */
+        readonly sm: 32;
+        /** Medium: 44px (iOS recommended minimum) */
+        readonly md: 44;
+        /** Large: 52px */
+        readonly lg: 52;
+    };
+    readonly icon: {
+        /** Extra small: 12px */
+        readonly xs: 12;
+        /** Small: 16px */
+        readonly sm: 16;
+        /** Medium: 20px */
+        readonly md: 20;
+        /** Large: 24px */
+        readonly lg: 24;
+        /** Extra large: 32px */
+        readonly xl: 32;
+    };
+};
+/** Standard component size variants */
+type ComponentSize = 'sm' | 'md' | 'lg';
+
+/**
+ * Theme Presets
+ *
+ * Pre-designed color schemes for instant brand alignment.
+ * Each preset defines primary colors and derives a full semantic palette.
+ *
+ * Usage:
+ * ```tsx
+ * <ThemeProvider theme="rose">
+ * <ThemeProvider theme="violet">
+ * ```
+ */
+
+/**
+ * Available theme color presets.
+ *
+ * Each preset defines a complete color scheme for light and dark modes.
+ */
+type ThemePreset = 'zinc' | 'slate' | 'stone' | 'blue' | 'green' | 'rose' | 'orange' | 'violet';
+/**
+ * Theme preset color structure.
+ *
+ * Contains complete color schemes for both light and dark modes.
+ */
+interface PresetColors {
+    light: ThemeColors;
+    dark: ThemeColors;
+}
+/**
+ * All available theme presets.
+ *
+ * Pre-designed color schemes for instant brand alignment.
+ *
+ * @example
+ * ```tsx
+ * <ThemeProvider theme="violet">
+ *   <App />
+ * </ThemeProvider>
+ * ```
+ */
+declare const themePresets: Record<ThemePreset, PresetColors>;
+/**
+ * Default theme preset.
+ *
+ * Used when no `theme` is specified on ThemeProvider.
+ */
+declare const defaultThemePreset: ThemePreset;
+/**
+ * Gets colors for a theme preset.
+ *
+ * @param preset - Theme preset name
+ * @returns Complete color scheme (light and dark)
+ */
+declare function getPresetColors(preset: ThemePreset): PresetColors;
+/**
+ * Gets light or dark colors for a theme preset.
+ *
+ * @param preset - Theme preset name
+ * @param isDark - Whether dark mode is active
+ * @returns Semantic color palette for the specified mode
+ */
+declare function getPresetColorsForMode(preset: ThemePreset, isDark: boolean): ThemeColors;
+
+/** Resolved color scheme (either 'light' or 'dark') */
+type ColorScheme = 'light' | 'dark';
+/** User's color scheme preference (can be 'system' for auto-detection) */
+type ColorSchemePreference = 'light' | 'dark' | 'system';
+interface Theme {
+    /** Current color scheme */
+    colorScheme: ColorScheme;
+    /** User's preference: 'light', 'dark', or 'system' */
+    colorSchemePreference: ColorSchemePreference;
+    /** Whether dark mode is active */
+    isDark: boolean;
+    /** Set color scheme preference */
+    setColorScheme: (preference: ColorSchemePreference) => void;
+    /** Current theme preset (if using a preset) */
+    themePreset?: ThemePreset;
+    /** Current radius preset */
+    radiusPreset: RadiusPreset;
+    /** Current animation preset */
+    animationPreset: AnimationPreset;
+    /** Semantic color tokens */
+    colors: ThemeColors;
+    /** Spacing scale (0-32) */
+    spacing: typeof spacing;
+    /** Border radius tokens */
+    radius: RadiusTokens;
+    /** Component-specific radius presets */
+    componentRadius: ComponentRadiusTokens;
+    /** Semantic font tokens (sans, heading, mono) */
+    fonts: Fonts;
+    /** Font size scale */
+    fontSize: typeof fontSize;
+    /** Font weight scale */
+    fontWeight: typeof fontWeight;
+    /** Line height scale */
+    lineHeight: typeof lineHeight;
+    /** Letter spacing scale */
+    letterSpacing: typeof letterSpacing;
+    /** Font family tokens (sans, mono, system) @deprecated use fonts instead */
+    fontFamily: typeof fontFamily;
+    /** Geist font family with weight variants */
+    geistFontFamily: typeof geistFontFamily;
+    /** Pre-composed typography styles (uses fonts tokens) */
+    typography: Typography;
+    /** Get shadow style for a size */
+    shadow: (size: ShadowSize) => ShadowStyle;
+    /** Get platform-optimized shadow style (iOS: shadow*, Android: elevation) */
+    platformShadow: (size: ShadowSize) => ViewStyle;
+    /** Spring animation presets */
+    springs: SpringTokens;
+    /** Timing animation presets */
+    timing: TimingTokens;
+    /** Press scale presets */
+    pressScale: PressScaleTokens;
+    /** Duration presets */
+    durations: DurationTokens;
+    /** Component-specific size/style tokens */
+    components: typeof components;
+}
+interface ThemeProviderProps {
+    /** Initial color scheme preference */
+    defaultColorScheme?: ColorSchemePreference;
+    /**
+     * Theme preset for colors.
+     * Pre-designed color schemes: 'zinc', 'slate', 'stone', 'blue', 'green', 'rose', 'orange', 'violet'
+     *
+     * @example
+     * ```tsx
+     * <ThemeProvider theme="rose">
+     * ```
+     */
+    theme?: ThemePreset;
+    /**
+     * Base radius preset.
+     * Controls roundness of all components: 'none', 'sm', 'md', 'lg', 'full'
+     *
+     * @example
+     * ```tsx
+     * <ThemeProvider radius="lg">  // Soft, rounded UI
+     * <ThemeProvider radius="none">  // Sharp, brutalist UI
+     * ```
+     */
+    radius?: RadiusPreset;
+    /**
+     * Custom font configuration.
+     * Partial overrides are merged with defaults.
+     *
+     * @example
+     * ```tsx
+     * <ThemeProvider fonts={{
+     *   sans: 'Inter_400Regular',
+     *   heading: 'PlayfairDisplay_700Bold',
+     * }}>
+     * ```
+     */
+    fonts?: Partial<Fonts>;
+    /**
+     * Color overrides (applied to both light and dark modes).
+     * Merged on top of theme preset colors.
+     *
+     * @example
+     * ```tsx
+     * <ThemeProvider
+     *   theme="blue"
+     *   colors={{ primary: '#6366F1' }}  // Override blue's primary with indigo
+     * >
+     * ```
+     */
+    colors?: Partial<ThemeColors>;
+    /**
+     * Light mode specific color overrides.
+     * Applied only in light mode, after theme and colors.
+     */
+    lightColors?: Partial<ThemeColors>;
+    /**
+     * Dark mode specific color overrides.
+     * Applied only in dark mode, after theme and colors.
+     */
+    darkColors?: Partial<ThemeColors>;
+    /**
+     * Enable or disable haptic feedback globally.
+     * When false, all `haptic()` calls become no-ops.
+     * @default true
+     *
+     * @example
+     * ```tsx
+     * // Disable haptics for accessibility or user preference
+     * <ThemeProvider haptics={false}>
+     * ```
+     */
+    haptics?: boolean;
+    /**
+     * Animation preset.
+     * Controls the overall feel of animations throughout the app.
+     * - `subtle`: Professional, smooth animations with minimal overshoot
+     * - `playful`: Bouncy, energetic animations with more personality
+     * @default 'subtle'
+     *
+     * @example
+     * ```tsx
+     * // Professional, smooth animations
+     * <ThemeProvider animationPreset="subtle">
+     *
+     * // Bouncy, fun animations
+     * <ThemeProvider animationPreset="playful">
+     * ```
+     */
+    animationPreset?: AnimationPreset;
+    /**
+     * Enable or disable animations globally.
+     * - `true`: Force enable animations
+     * - `false`: Force disable animations (components will use static styles)
+     * - `'auto'`: Automatically detect - disable in Expo Go, enable in dev/prod builds
+     * @default 'auto'
+     *
+     * @example
+     * ```tsx
+     * // Auto-detect (disabled in Expo Go)
+     * <ThemeProvider animations="auto">
+     *
+     * // Force disable for testing or accessibility
+     * <ThemeProvider animations={false}>
+     * ```
+     */
+    animations?: boolean | 'auto';
+    /** Children components */
+    children: ReactNode;
+}
+declare function ThemeProvider({ defaultColorScheme, theme: themePreset, radius: radiusPreset, fonts: fontOverrides, colors: colorOverrides, lightColors: lightColorOverrides, darkColors: darkColorOverrides, haptics, animationPreset, animations, children, }: ThemeProviderProps): react_jsx_runtime.JSX.Element;
+/**
+ * Hook to access theme values
+ *
+ * @example
+ * ```tsx
+ * const { colors, spacing, radius, components } = useTheme();
+ *
+ * // Use design tokens
+ * <View style={{
+ *   backgroundColor: colors.card,
+ *   padding: spacing[4],
+ *   borderRadius: radius.lg,
+ *   ...platformShadow('md')
+ * }}>
+ *   <Text style={typography.body}>Hello</Text>
+ * </View>
+ *
+ * // Use component tokens
+ * const buttonSize = components.button.md;
+ * <View style={{
+ *   height: buttonSize.height,
+ *   paddingHorizontal: buttonSize.paddingHorizontal,
+ *   borderRadius: buttonSize.borderRadius,
+ * }} />
+ * ```
+ */
+declare function useTheme(): Theme;
+/**
+ * Hook to get current color scheme.
+ *
+ * Returns the resolved color scheme ('light' or 'dark'), even when preference is 'system'.
+ *
+ * @returns Current color scheme
+ *
+ * @example
+ * ```tsx
+ * const colorScheme = useColorSchemeValue();
+ * // colorScheme is 'light' or 'dark' (never 'system')
+ * ```
+ */
+declare function useColorSchemeValue(): ColorScheme;
+/**
+ * Hook to check if dark mode is active.
+ *
+ * Convenience hook equivalent to `useTheme().isDark`.
+ *
+ * @returns True if dark mode is active, false otherwise
+ *
+ * @example
+ * ```tsx
+ * const isDark = useIsDark();
+ * <View style={{ backgroundColor: isDark ? '#000' : '#fff' }} />
+ * ```
+ */
+declare function useIsDark(): boolean;
+
+/**
+ * NativeUI Configuration Types
+ *
+ * Define your app's design system in a single config file.
+ * Similar to tailwind.config.js but for React Native.
+ *
+ * @example
+ * ```ts
+ * // mcellui.config.ts
+ * import { defineConfig } from '@metacells/mcellui-core';
+ *
+ * export default defineConfig({
+ *   theme: 'blue',
+ *   radius: 'lg',
+ *   colors: {
+ *     primary: '#6366F1',
+ *   },
+ * });
+ * ```
+ */
+
+/**
+ * NativeUI configuration object.
+ * Place in `mcellui.config.ts` at your project root.
+ */
+interface NativeUIConfig {
+    /**
+     * Color theme preset.
+     * @default 'zinc'
+     */
+    theme?: ThemePreset;
+    /**
+     * Border radius preset.
+     * Controls roundness of all components.
+     * @default 'md'
+     */
+    radius?: RadiusPreset;
+    /**
+     * Default color scheme preference.
+     * @default 'system'
+     */
+    colorScheme?: 'light' | 'dark' | 'system';
+    /**
+     * Color overrides (applied to both light and dark modes).
+     */
+    colors?: Partial<ThemeColors>;
+    /**
+     * Light mode specific color overrides.
+     */
+    lightColors?: Partial<ThemeColors>;
+    /**
+     * Dark mode specific color overrides.
+     */
+    darkColors?: Partial<ThemeColors>;
+    /**
+     * Font configuration.
+     */
+    fonts?: Partial<Fonts>;
+    /**
+     * Enable or disable haptic feedback globally.
+     * @default true
+     */
+    haptics?: boolean;
+    /**
+     * Animation preset.
+     * Controls the overall feel of animations throughout the app.
+     * - `subtle`: Professional, smooth animations with minimal overshoot
+     * - `playful`: Bouncy, energetic animations with more personality
+     * @default 'subtle'
+     */
+    animationPreset?: AnimationPreset;
+    /**
+     * Component-specific overrides.
+     * Override default sizes, padding, etc.
+     */
+    components?: {
+        button?: {
+            defaultVariant?: 'default' | 'secondary' | 'outline' | 'ghost' | 'destructive';
+            defaultSize?: 'sm' | 'md' | 'lg';
+        };
+        input?: {
+            defaultSize?: 'sm' | 'md' | 'lg';
+        };
+        card?: {
+            defaultVariant?: 'default' | 'elevated' | 'outlined';
+        };
+        badge?: {
+            defaultVariant?: 'default' | 'secondary' | 'destructive' | 'outline';
+            defaultSize?: 'sm' | 'md' | 'lg';
+        };
+        avatar?: {
+            defaultSize?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+        };
+    };
+    /**
+     * Path where components will be installed.
+     * @default './components/ui'
+     */
+    componentsPath?: string;
+    /**
+     * Path where utilities (cn, etc.) will be installed.
+     * @default './lib/utils'
+     */
+    utilsPath?: string;
+    /**
+     * Style preset for components.
+     * @default 'default'
+     */
+    style?: 'default' | 'ios' | 'material';
+    /**
+     * Path aliases for imports.
+     */
+    aliases?: {
+        /** Alias for components directory */
+        components?: string;
+        /** Alias for utils directory */
+        utils?: string;
+    };
+}
+/**
+ * Resolved configuration with all defaults applied.
+ */
+interface ResolvedNativeUIConfig extends Required<Omit<NativeUIConfig, 'colors' | 'lightColors' | 'darkColors' | 'fonts' | 'components' | 'aliases' | 'haptics' | 'animationPreset'>> {
+    colors: Partial<ThemeColors>;
+    lightColors: Partial<ThemeColors>;
+    darkColors: Partial<ThemeColors>;
+    fonts: Partial<Fonts>;
+    haptics: boolean;
+    animationPreset: AnimationPreset;
+    components: NonNullable<NativeUIConfig['components']>;
+    aliases: NonNullable<NativeUIConfig['aliases']>;
+}
+/**
+ * Default configuration values.
+ */
+declare const defaultConfig: ResolvedNativeUIConfig;
+
+/**
+ * defineConfig
+ *
+ * Helper function to define NativeUI configuration with type safety.
+ * Use this in your `mcellui.config.ts` file.
+ *
+ * @example
+ * ```ts
+ * // mcellui.config.ts
+ * import { defineConfig } from '@metacells/mcellui-core';
+ *
+ * export default defineConfig({
+ *   theme: 'blue',
+ *   radius: 'lg',
+ *   colors: {
+ *     primary: '#6366F1',
+ *     secondary: '#F3F4F6',
+ *   },
+ *   fonts: {
+ *     heading: 'PlayfairDisplay_700Bold',
+ *   },
+ *   components: {
+ *     button: {
+ *       defaultVariant: 'default',
+ *       defaultSize: 'md',
+ *     },
+ *   },
+ * });
+ * ```
+ */
+
+/**
+ * Define your NativeUI configuration with full type safety and autocomplete.
+ *
+ * @param config - Your configuration options
+ * @returns The same config object (for type inference)
+ */
+declare function defineConfig(config: NativeUIConfig): NativeUIConfig;
+/**
+ * Resolve a partial config into a full config with defaults.
+ *
+ * @param config - Partial configuration
+ * @returns Fully resolved configuration with defaults applied
+ */
+declare function resolveConfig(config?: NativeUIConfig): ResolvedNativeUIConfig;
+
+interface ConfigProviderProps {
+    /**
+     * NativeUI configuration object.
+     * Import from your mcellui.config.ts file.
+     */
+    config?: NativeUIConfig;
+    /**
+     * Override the color scheme preference.
+     * Takes precedence over config.colorScheme.
+     */
+    colorScheme?: 'light' | 'dark' | 'system';
+    /**
+     * Override the theme preset.
+     * Takes precedence over config.theme.
+     */
+    theme?: ThemeProviderProps['theme'];
+    /**
+     * Override the radius preset.
+     * Takes precedence over config.radius.
+     */
+    radius?: ThemeProviderProps['radius'];
+    /**
+     * Children components.
+     */
+    children: ReactNode;
+}
+/**
+ * ConfigProvider combines your mcellui.config.ts with ThemeProvider.
+ * Use this as the root of your app for the easiest setup.
+ *
+ * If no config is provided and @metacells/mcellui-metro-plugin is set up,
+ * it will automatically load your mcellui.config.ts file.
+ */
+declare function ConfigProvider({ config, colorScheme, theme, radius, children, }: ConfigProviderProps): react_jsx_runtime.JSX.Element;
+/**
+ * Hook to access the raw NativeUI configuration.
+ * Useful for accessing component defaults and other config values.
+ *
+ * @example
+ * ```tsx
+ * const config = useConfig();
+ * const defaultButtonSize = config.components.button?.defaultSize ?? 'md';
+ * ```
+ */
+declare function useConfig(): ResolvedNativeUIConfig;
+
+interface PressableProps extends Omit<PressableProps$1, 'style'> {
+    /**
+     * Style or style function receiving pressed state
+     */
+    style?: ViewStyle | ((state: {
+        pressed: boolean;
+    }) => ViewStyle);
+    /**
+     * Haptic feedback style on press
+     * @default 'light'
+     */
+    hapticStyle?: 'none' | 'light' | 'medium' | 'heavy' | 'selection';
+    /**
+     * Opacity when pressed
+     * @default 0.7
+     */
+    pressedOpacity?: number;
+    /**
+     * Scale when pressed (respects reduce motion)
+     * @default 1
+     */
+    pressedScale?: number;
+}
+declare const Pressable: React.ForwardRefExoticComponent<PressableProps & React.RefAttributes<react_native.View>>;
+
+interface PortalProviderProps {
+    children: React.ReactNode;
+}
+interface PortalHostProps {
+    /**
+     * Name of the host (for multiple hosts)
+     * @default 'root'
+     */
+    name?: string;
+}
+interface PortalProps {
+    children: React.ReactNode;
+    /**
+     * Name of the host to render into
+     * @default 'root'
+     */
+    hostName?: string;
+}
+/**
+ * Provides the portal context to the app.
+ * Wrap your root component with this provider.
+ */
+declare function PortalProvider({ children }: PortalProviderProps): react_jsx_runtime.JSX.Element;
+declare namespace PortalProvider {
+    var displayName: string;
+}
+/**
+ * The target where portals render their content.
+ * Automatically included in PortalProvider, but can be placed manually
+ * for custom layouts.
+ */
+declare function PortalHost({ name }: PortalHostProps): react_jsx_runtime.JSX.Element;
+declare namespace PortalHost {
+    var displayName: string;
+}
+/**
+ * Renders children into the nearest PortalHost.
+ */
+declare function Portal({ children, hostName }: PortalProps): null;
+declare namespace Portal {
+    var displayName: string;
+}
+
+interface SlotProps {
+    children: React.ReactNode;
+    /**
+     * Additional props to merge with the child
+     */
+    [key: string]: unknown;
+}
+interface SlottableProps {
+    /**
+     * When true, renders as Slot (forwarding props to child)
+     * When false/undefined, renders as the component's default element
+     */
+    asChild?: boolean;
+    children?: React.ReactNode;
+}
+/**
+ * Slot component that forwards props to its single child.
+ * The child receives merged props (styles combined, handlers chained).
+ */
+declare const Slot: React.ForwardRefExoticComponent<Omit<SlotProps, "ref"> & React.RefAttributes<unknown>>;
+/**
+ * Helper component for conditional slot rendering.
+ * Use with asChild prop pattern.
+ */
+declare function Slottable({ children }: {
+    children: React.ReactNode;
+}): react_jsx_runtime.JSX.Element;
+declare namespace Slottable {
+    var displayName: string;
+}
+type PossibleRef<T> = React.Ref<T> | undefined;
+/**
+ * Hook to compose refs
+ */
+declare function useComposedRefs<T>(...refs: PossibleRef<T>[]): React.RefCallback<T>;
+
+/**
+ * ErrorBoundary
+ *
+ * A React error boundary component for catching and handling
+ * runtime errors in mcellui components.
+ *
+ * @example
+ * ```tsx
+ * // Wrap individual components
+ * <ErrorBoundary fallback={<Text>Something went wrong</Text>}>
+ *   <MyComponent />
+ * </ErrorBoundary>
+ *
+ * // With custom error handler
+ * <ErrorBoundary
+ *   onError={(error, errorInfo) => {
+ *     logErrorToService(error, errorInfo);
+ *   }}
+ *   fallback={({ error, reset }) => (
+ *     <View>
+ *       <Text>Error: {error.message}</Text>
+ *       <Button onPress={reset}>Try Again</Button>
+ *     </View>
+ *   )}
+ * >
+ *   <MyComponent />
+ * </ErrorBoundary>
+ * ```
+ */
+
+interface ErrorBoundaryFallbackProps {
+    /** The error that was caught */
+    error: Error;
+    /** Function to reset the error boundary and retry */
+    reset: () => void;
+}
+interface ErrorBoundaryProps {
+    /** Children to render when no error */
+    children: ReactNode;
+    /**
+     * Fallback UI to show when an error occurs.
+     * Can be a ReactNode or a render function receiving error details.
+     */
+    fallback?: ReactNode | ((props: ErrorBoundaryFallbackProps) => ReactNode);
+    /**
+     * Callback when an error is caught.
+     * Use for logging errors to external services.
+     */
+    onError?: (error: Error, errorInfo: ErrorInfo) => void;
+    /**
+     * Callback when the error boundary resets.
+     */
+    onReset?: () => void;
+}
+interface ErrorBoundaryState {
+    hasError: boolean;
+    error: Error | null;
+}
+declare class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+    constructor(props: ErrorBoundaryProps);
+    static getDerivedStateFromError(error: Error): ErrorBoundaryState;
+    componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
+    reset: () => void;
+    render(): ReactNode;
+}
+/**
+ * Higher-order component to wrap a component with an error boundary
+ *
+ * @example
+ * ```tsx
+ * const SafeMyComponent = withErrorBoundary(MyComponent, {
+ *   fallback: <Text>Error loading component</Text>,
+ * });
+ * ```
+ */
+declare function withErrorBoundary<P extends object>(WrappedComponent: React.ComponentType<P>, errorBoundaryProps?: Omit<ErrorBoundaryProps, 'children'>): React.FC<P>;
+
+/**
+ * NativeUI Constants
+ *
+ * Zentralisierte Magic Numbers und Konfigurationswerte.
+ * Diese Werte werden von Components verwendet und können
+ * über Props überschrieben werden.
+ *
+ * @example
+ * ```tsx
+ * import { SHEET_CONSTANTS } from '@metacells/mcellui-core';
+ *
+ * // In SheetContent:
+ * if (translationY > height * SHEET_CONSTANTS.closeThreshold) {
+ *   close();
+ * }
+ * ```
+ */
+declare const SHEET_CONSTANTS: {
+    /** Threshold (0-1) für automatisches Schließen beim Ziehen */
+    readonly closeThreshold: 0.3;
+    /** Geschwindigkeit (px/s) für Swipe-to-Close */
+    readonly velocityThreshold: 500;
+    /** Backdrop Fade-In Dauer (ms) */
+    readonly backdropFadeInDuration: 200;
+    /** Backdrop Fade-Out Dauer (ms) */
+    readonly backdropFadeOutDuration: 150;
+    /** Maximale Backdrop Opacity */
+    readonly backdropMaxOpacity: 0.5;
+    /** Handle Breite (px) */
+    readonly handleWidth: 36;
+    /** Handle Höhe (px) */
+    readonly handleHeight: 4;
+    /** Handle Container Padding Top (px) */
+    readonly handlePaddingTop: 12;
+    /** Handle Container Padding Bottom (px) */
+    readonly handlePaddingBottom: 8;
+    /** Content Horizontal Padding (px) */
+    readonly contentPaddingHorizontal: 16;
+};
+declare const DIALOG_CONSTANTS: {
+    /** Screen Margin für Dialog Breite (px) */
+    readonly screenMargin: 48;
+    /** Close Animation Dauer (ms) */
+    readonly closeAnimationDuration: 150;
+    /** Start Scale für Enter Animation */
+    readonly enterStartScale: 0.95;
+    /** Dialog Content Padding (px) */
+    readonly contentPadding: 24;
+    /** Backdrop Max Opacity */
+    readonly backdropMaxOpacity: 0.5;
+};
+declare const TOAST_CONSTANTS: {
+    /** Standard Anzeigedauer (ms) */
+    readonly defaultDuration: 4000;
+    /** Maximale gleichzeitig sichtbare Toasts */
+    readonly maxToasts: 3;
+    /** Fade-Out Dauer (ms) */
+    readonly fadeOutDuration: 150;
+    /** Container Top Offset vom SafeArea (px) */
+    readonly containerTopOffset: 8;
+    /** Toast Width Margin (px) - wird von Screen Width abgezogen */
+    readonly widthMargin: 32;
+    /** Fallback Farben wenn Theme sie nicht hat */
+    readonly fallbackColors: {
+        readonly success: "#22c55e";
+        readonly successForeground: "#ffffff";
+        readonly warning: "#f59e0b";
+        readonly warningForeground: "#000000";
+    };
+};
+declare const BUTTON_CONSTANTS: {
+    /** Scale beim Drücken (0-1) */
+    readonly pressScale: 0.97;
+    /** Opacity bei disabled */
+    readonly disabledOpacity: 0.5;
+};
+declare const SWIPEABLE_CONSTANTS: {
+    /** Standard Action Button Breite (px) */
+    readonly actionWidth: 80;
+    /** Geschwindigkeit für Snap (px/s) */
+    readonly velocityThreshold: 500;
+    /** Full Swipe Threshold (0-1 von Screen Width) */
+    readonly fullSwipeThreshold: 0.5;
+    /** Full Swipe Animation Dauer (ms) */
+    readonly fullSwipeAnimationDuration: 200;
+    /** Resistance Factor am Edge (0-1) */
+    readonly resistanceFactor: 0.2;
+    /** Active Offset für Gesture Start (px) */
+    readonly activeOffset: 10;
+    /** Action Icon Margin Bottom (px) */
+    readonly actionIconMarginBottom: 4;
+    /** Action Button Horizontal Padding (px) */
+    readonly actionButtonPaddingHorizontal: 8;
+    /** Action Label Font Size */
+    readonly actionLabelFontSize: 12;
+};
+declare const ANIMATION_CONSTANTS: {
+    /** Standard Spring Damping */
+    readonly springDamping: 20;
+    /** Standard Spring Stiffness */
+    readonly springStiffness: 200;
+};
+declare const SLIDER_CONSTANTS: {
+    /** Track Höhe (px) */
+    readonly trackHeight: 6;
+    /** Thumb Größe (px) */
+    readonly thumbSize: 24;
+    /** Hit Slop für Touch (px) */
+    readonly hitSlop: 10;
+};
+declare const STEPPER_CONSTANTS: {
+    /** Button Größe (px) */
+    readonly buttonSize: 36;
+    /** Long Press Delay (ms) */
+    readonly longPressDelay: 500;
+    /** Repeat Interval (ms) */
+    readonly repeatInterval: 100;
+    /** Min Input Width (px) */
+    readonly minInputWidth: 48;
+};
+declare const TYPOGRAPHY_CONSTANTS: {
+    /** Title Font Size für Overlays (Sheet, Dialog) */
+    readonly overlayTitleSize: 18;
+    /** Description Font Size für Overlays */
+    readonly overlayDescriptionSize: 14;
+    /** Description Line Height für Dialogs */
+    readonly overlayDescriptionLineHeight: 20;
+};
+declare const ALERT_CONSTANTS: {
+    /** Padding für Small Variant (px) */
+    readonly paddingSm: 12;
+    /** Padding für Medium Variant (px) */
+    readonly paddingMd: 16;
+    /** Padding für Large Variant (px) */
+    readonly paddingLg: 20;
+    /** Icon Size für Small Variant (px) */
+    readonly iconSizeSm: 16;
+    /** Icon Size für Medium Variant (px) */
+    readonly iconSizeMd: 20;
+    /** Icon Size für Large Variant (px) */
+    readonly iconSizeLg: 24;
+    /** Gap zwischen Icon und Text für Small (px) */
+    readonly gapSm: 8;
+    /** Gap zwischen Icon und Text für Medium (px) */
+    readonly gapMd: 12;
+    /** Gap zwischen Icon und Text für Large (px) */
+    readonly gapLg: 16;
+    /** Title Font Size für Small (px) */
+    readonly titleFontSizeSm: 13;
+    /** Title Font Size für Medium (px) */
+    readonly titleFontSizeMd: 15;
+    /** Title Font Size für Large (px) */
+    readonly titleFontSizeLg: 17;
+    /** Text Font Size für Small (px) */
+    readonly textFontSizeSm: 12;
+    /** Text Font Size für Medium (px) */
+    readonly textFontSizeMd: 14;
+    /** Text Font Size für Large (px) */
+    readonly textFontSizeLg: 16;
+};
+declare const POPOVER_CONSTANTS: {
+    /** Default Offset vom Trigger (px) */
+    readonly defaultOffset: 8;
+    /** Default Max Width (px) */
+    readonly defaultMaxWidth: 280;
+    /** Minimum Width (px) */
+    readonly minWidth: 120;
+    /** Animation Fade-In Dauer (ms) */
+    readonly animationInDuration: 150;
+    /** Animation Fade-Out Dauer (ms) */
+    readonly animationOutDuration: 100;
+    /** Spring Damping */
+    readonly springDamping: 20;
+    /** Spring Stiffness */
+    readonly springStiffness: 400;
+};
+declare const TOOLTIP_CONSTANTS: {
+    /** Content Padding (px) */
+    readonly padding: 12;
+    /** Margin vom Trigger (px) */
+    readonly margin: 8;
+    /** Arrow Size (px) */
+    readonly arrowSize: 8;
+    /** Default Max Width (px) */
+    readonly defaultMaxWidth: 250;
+    /** Default Delay before showing (ms) */
+    readonly defaultDelay: 500;
+    /** Animation Fade-In Dauer (ms) */
+    readonly animationInDuration: 150;
+    /** Animation Fade-Out Dauer (ms) */
+    readonly animationOutDuration: 100;
+};
+declare const PROGRESS_CONSTANTS: {
+    /** Indeterminate bar width as percentage */
+    readonly indeterminateWidth: 30;
+    /** Fallback colors for success/warning variants */
+    readonly fallbackColors: {
+        readonly success: "#22c55e";
+        readonly warning: "#f59e0b";
+    };
+};
+type SheetConstants = typeof SHEET_CONSTANTS;
+type DialogConstants = typeof DIALOG_CONSTANTS;
+type ToastConstants = typeof TOAST_CONSTANTS;
+type ButtonConstants = typeof BUTTON_CONSTANTS;
+type SwipeableConstants = typeof SWIPEABLE_CONSTANTS;
+type AnimationConstants = typeof ANIMATION_CONSTANTS;
+type SliderConstants = typeof SLIDER_CONSTANTS;
+type StepperConstants = typeof STEPPER_CONSTANTS;
+type TypographyConstants = typeof TYPOGRAPHY_CONSTANTS;
+type AlertConstants = typeof ALERT_CONSTANTS;
+type PopoverConstants = typeof POPOVER_CONSTANTS;
+type TooltipConstants = typeof TOOLTIP_CONSTANTS;
+type ProgressConstants = typeof PROGRESS_CONSTANTS;
+
+export { ACCORDION_CONSTANTS, ALERT_CONSTANTS, ANIMATION_CONSTANTS, type AlertConstants, type AnimationConstants, type AnimationPreset, type AnimationTokens, BUTTON_CONSTANTS, type ButtonConstants, CAROUSEL_CONSTANTS, COLLAPSIBLE_CONSTANTS, type ColorKey, type ColorScheme, type ColorSchemePreference, type ComponentRadiusKey, type ComponentRadiusTokens, type ComponentSize, ConfigProvider, DIALOG_CONSTANTS, type DialogConstants, type DurationTokens, ErrorBoundary, type ErrorBoundaryFallbackProps, type ErrorBoundaryProps, Fonts, LIST_CONSTANTS, type NativeUIConfig, POPOVER_CONSTANTS, PROGRESS_CONSTANTS, type PopoverConstants, Portal, PortalHost, type PortalHostProps, type PortalProps, PortalProvider, type PortalProviderProps, type PresetColors, type PressScalePreset, type PressScaleTokens, Pressable, type PressableProps, type ProgressConstants, type RadiusPreset, type RadiusTokens, type RadiusValue, type ResolvedNativeUIConfig, SHEET_CONSTANTS, SLIDER_CONSTANTS, STEPPER_CONSTANTS, SWIPEABLE_CONSTANTS, SWIPEABLE_ROW_CONSTANTS, type ShadowSize, type ShadowStyle, type SheetConstants, type SliderConstants, Slot, type SlotProps, Slottable, type SlottableProps, type SpacingValue, type SpringConfig, type SpringPreset, type SpringTokens, type StepperConstants, type SwipeableConstants, TABS_CONSTANTS, TOAST_CONSTANTS, TOOLTIP_CONSTANTS, TYPOGRAPHY_CONSTANTS, type Theme, type ThemeColors, type ThemePreset, ThemeProvider, type ThemeProviderProps, type RadiusKey as ThemeRadiusKey, type SpacingKey as ThemeSpacingKey, type TimingConfig, type TimingPreset, type TimingTokens, type ToastConstants, type TooltipConstants, Typography, type TypographyConstants, accordionTokens, authBlockTokens, avatarTokens, badgeTokens, buttonTokens, calendarTokens, cardBlockTokens, cardTokens, carouselTokens, checkboxTokens, circularProgressTokens, collapsibleTokens, componentHeight, componentRadius, components, createComponentRadius, createRadius, darkColors, dateTimePickerTokens, defaultAnimationPreset, defaultConfig, defaultRadiusPreset, defaultThemePreset, defineConfig, durations, ecommerceBlockTokens, fontFamily, formTokens, geistFontFamily, getAnimationPreset, getPlatformShadow, getPresetColors, getPresetColorsForMode, getShadow, iconSize, imageGalleryTokens, infoBlockTokens, inputTokens, lightColors, listTokens, overlayTypography, paginationTokens, palette, playfulAnimations, pressScale, productBlockTokens, profileBlockTokens, progressTokens, radiusPresetBase, resolveConfig, searchInputTokens, settingsBlockTokens, shadows, skeletonTokens, socialBlockTokens, spinnerTokens, springs, stateBlockTokens, storiesTokens, subtleAnimations, swipeableRowTokens, switchTokens, tabsTokens, fontSize as themeFontSize, fontWeight as themeFontWeight, letterSpacing as themeLetterSpacing, lineHeight as themeLineHeight, themePresets, radius as themeRadius, spacing as themeSpacing, timing, useColorSchemeValue, useComposedRefs, useConfig, useIsDark, useTheme, withErrorBoundary };