import { SizeValue } from './theme/types'; /** * Design tokens for consistent styling across the UI library * These tokens ensure visual consistency and make global changes easier */ /** * Animation tokens */ export declare const MOTION_TOKENS: { readonly duration: { readonly instant: 0; readonly fast: 150; readonly normal: 200; readonly slow: 300; }; readonly easing: { readonly ease: "ease"; readonly easeIn: "ease-in"; readonly easeOut: "ease-out"; readonly easeInOut: "ease-in-out"; readonly spring: "cubic-bezier(0.34, 1.56, 0.64, 1)"; }; }; /** * Shadow tokens for depth and elevation */ export declare const SHADOW_TOKENS: { readonly xs: "0 1px 2px rgba(0, 0, 0, 0.05)"; readonly sm: "0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06)"; readonly md: "0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06)"; readonly lg: "0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05)"; readonly xl: "0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04)"; }; /** * Border radius tokens */ export declare const RADIUS_TOKENS: { readonly none: 0; readonly xs: 2; readonly sm: 4; readonly md: 6; readonly lg: 8; readonly xl: 12; readonly '2xl': 16; readonly '3xl': 24; readonly full: 9999; }; /** * Spacing tokens */ export declare const SPACING_TOKENS: { readonly xs: 4; readonly sm: 8; readonly md: 12; readonly lg: 16; readonly xl: 20; readonly '2xl': 24; readonly '3xl': 32; }; /** * Typography tokens */ export declare const TYPOGRAPHY_TOKENS: { readonly fontSize: { readonly xs: 12; readonly sm: 14; readonly md: 16; readonly lg: 18; readonly xl: 20; readonly '2xl': 24; readonly '3xl': 30; }; readonly lineHeight: { readonly xs: 16; readonly sm: 20; readonly md: 24; readonly lg: 28; readonly xl: 32; readonly '2xl': 36; readonly '3xl': 42; }; readonly fontWeight: { readonly normal: "400"; readonly medium: "500"; readonly semibold: "600"; readonly bold: "700"; }; }; /** * Interactive element tokens */ export declare const INTERACTIVE_TOKENS: { readonly height: { readonly xs: 28; readonly sm: 32; readonly md: 40; readonly lg: 44; readonly xl: 48; readonly '2xl': 52; readonly '3xl': 56; }; readonly padding: { readonly xs: 6; readonly sm: 8; readonly md: 12; readonly lg: 16; readonly xl: 20; readonly '2xl': 24; readonly '3xl': 28; }; readonly hitTarget: { readonly minimum: 44; readonly comfortable: 48; readonly large: 56; }; readonly focusRing: { readonly width: 2; readonly offset: 1; }; }; /** * Color opacity tokens */ export declare const OPACITY_TOKENS: { readonly disabled: 0.5; readonly hover: 0.9; readonly pressed: 0.8; readonly overlay: 0.6; readonly backdrop: 0.4; readonly subtle: 0.1; }; /** * Component-specific tokens */ export declare const COMPONENT_TOKENS: { readonly clearButton: { readonly size: 14; readonly padding: 4; readonly margin: -4; readonly borderRadius: 6; readonly hitSlop: 6; }; readonly divider: { readonly thickness: 1; readonly opacity: 0.1; }; readonly badge: { readonly minWidth: 20; readonly height: 20; readonly padding: 6; }; }; /** * Get design token value */ export declare function getToken(category: T, token: keyof typeof DESIGN_TOKENS[T]): any; /** * All design tokens grouped for easy access */ export declare const DESIGN_TOKENS: { readonly motion: { readonly duration: { readonly instant: 0; readonly fast: 150; readonly normal: 200; readonly slow: 300; }; readonly easing: { readonly ease: "ease"; readonly easeIn: "ease-in"; readonly easeOut: "ease-out"; readonly easeInOut: "ease-in-out"; readonly spring: "cubic-bezier(0.34, 1.56, 0.64, 1)"; }; }; readonly shadow: { readonly xs: "0 1px 2px rgba(0, 0, 0, 0.05)"; readonly sm: "0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06)"; readonly md: "0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06)"; readonly lg: "0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05)"; readonly xl: "0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04)"; }; readonly radius: { readonly none: 0; readonly xs: 2; readonly sm: 4; readonly md: 6; readonly lg: 8; readonly xl: 12; readonly '2xl': 16; readonly '3xl': 24; readonly full: 9999; }; readonly spacing: { readonly xs: 4; readonly sm: 8; readonly md: 12; readonly lg: 16; readonly xl: 20; readonly '2xl': 24; readonly '3xl': 32; }; readonly typography: { readonly fontSize: { readonly xs: 12; readonly sm: 14; readonly md: 16; readonly lg: 18; readonly xl: 20; readonly '2xl': 24; readonly '3xl': 30; }; readonly lineHeight: { readonly xs: 16; readonly sm: 20; readonly md: 24; readonly lg: 28; readonly xl: 32; readonly '2xl': 36; readonly '3xl': 42; }; readonly fontWeight: { readonly normal: "400"; readonly medium: "500"; readonly semibold: "600"; readonly bold: "700"; }; }; readonly interactive: { readonly height: { readonly xs: 28; readonly sm: 32; readonly md: 40; readonly lg: 44; readonly xl: 48; readonly '2xl': 52; readonly '3xl': 56; }; readonly padding: { readonly xs: 6; readonly sm: 8; readonly md: 12; readonly lg: 16; readonly xl: 20; readonly '2xl': 24; readonly '3xl': 28; }; readonly hitTarget: { readonly minimum: 44; readonly comfortable: 48; readonly large: 56; }; readonly focusRing: { readonly width: 2; readonly offset: 1; }; }; readonly opacity: { readonly disabled: 0.5; readonly hover: 0.9; readonly pressed: 0.8; readonly overlay: 0.6; readonly backdrop: 0.4; readonly subtle: 0.1; }; readonly component: { readonly clearButton: { readonly size: 14; readonly padding: 4; readonly margin: -4; readonly borderRadius: 6; readonly hitSlop: 6; }; readonly divider: { readonly thickness: 1; readonly opacity: 0.1; }; readonly badge: { readonly minWidth: 20; readonly height: 20; readonly padding: 6; }; }; }; /** * Create consistent transition styles */ export declare function createTransition(properties?: string[], duration?: keyof typeof MOTION_TOKENS.duration, easing?: keyof typeof MOTION_TOKENS.easing): string; /** * Get responsive value based on size */ export declare function getResponsiveValue(values: Partial>, size?: SizeValue): T | undefined;