@abhir9/pd-design-system 0.1.0

package/dist/index.d.cts

@@ -0,0 +1,1477 @@
+import React from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as LucideIcons from 'lucide-react';
+
+declare const THEME_MODES: readonly ["light", "dark"];
+declare const THEME_NAMES: readonly ["base", "brand"];
+declare const ADAPTER_TYPES: readonly ["shadcn", "material"];
+type ThemeMode = typeof THEME_MODES[number];
+type ThemeName = typeof THEME_NAMES[number];
+type AdapterType = typeof ADAPTER_TYPES[number];
+interface DesignSystemConfig {
+    adapter: AdapterType;
+    theme: ThemeName;
+    mode: ThemeMode;
+}
+interface Theme {
+    mode: ThemeMode;
+    name: ThemeName;
+    cssVariables: Record<string, string>;
+}
+
+/**
+ * Semantic Tokens
+ * These tokens should be used in components for consistent theming.
+ * They map to color primitives and change based on theme (light/dark).
+ */
+
+/**
+ * Border Tokens
+ */
+declare const borderTokens: {
+    readonly dark: {
+        readonly primary: "#4E4E5A";
+        readonly secondary: "#2F2F37";
+        readonly subtle: "#2F2F37";
+        readonly invert: "#FFFFFF";
+        readonly onColor: "#09090B";
+        readonly blue: "#709AFF";
+        readonly blueSubtle: "#002680";
+        readonly blueOnHover: "#3772FF";
+        readonly red: "#E15C5C";
+        readonly redSubtle: "#4C0B17";
+        readonly redOnHover: "#E12D4E";
+        readonly orange: "#EC9C64";
+        readonly orangeSubtle: "#5C2500";
+        readonly orangeOnHover: "#FF6800";
+        readonly yellow: "#FFCA70";
+        readonly yellowSubtle: "#5C3A00";
+        readonly yellowOnHover: "#FFAD22";
+        readonly green: "#00E052";
+        readonly greenSubtle: "#006625";
+        readonly greenOnHover: "#00B241";
+    };
+    readonly light: {
+        readonly primary: "#BEBEC1";
+        readonly secondary: "#DFDFE2";
+        readonly subtle: "#DFDFE2";
+        readonly invert: "#09090B";
+        readonly onColor: "#FFFFFF";
+        readonly blue: "#3772FF";
+        readonly blueSubtle: "#99B7FF";
+        readonly blueOnHover: "#003FD6";
+        readonly red: "#C41C3B";
+        readonly redSubtle: "#F6C1CA";
+        readonly redOnHover: "#A11730";
+        readonly orange: "#D65700";
+        readonly orangeSubtle: "#FFC9A3";
+        readonly orangeOnHover: "#AD4700";
+        readonly yellow: "#F09700";
+        readonly yellowSubtle: "#FFD999";
+        readonly yellowOnHover: "#D68700";
+        readonly green: "#00E052";
+        readonly greenSubtle: "#8AFFB5";
+        readonly greenOnHover: "#00B241";
+    };
+};
+/**
+ * Content Tokens (Text/Foreground)
+ */
+declare const contentTokens: {
+    readonly dark: {
+        readonly primary: "#DFDFE2";
+        readonly secondary: "#7E7E8B";
+        readonly subtle: "#4E4E5A";
+        readonly onColor: "#09090B";
+        readonly alwaysWhite: "#FFFFFF";
+        readonly alwaysBlack: "#09090B";
+        readonly onColorInverse: "#EDEDED";
+        readonly blue: "#709AFF";
+        readonly blueDisabled: "#002680";
+        readonly blueOnHover: "#3772FF";
+        readonly green: "#00E052";
+        readonly greenDisabled: "#008A32";
+        readonly greenOnHover: "#09FF63";
+        readonly red: "#E15C5C";
+        readonly redDisabled: "#7D1225";
+        readonly redOnHover: "#F6C1CA";
+        readonly orange: "#EC9C64";
+        readonly orangeDisabled: "#7A3200";
+        readonly orangeOnHover: "#FFC9A3";
+        readonly yellow: "#FFCA70";
+        readonly yellowDisabled: "#7A4D00";
+        readonly yellowOnHover: "#FFD999";
+    };
+    readonly light: {
+        readonly primary: "#17171C";
+        readonly secondary: "#60606C";
+        readonly subtle: "#BEBEC1";
+        readonly onColor: "#FFFFFF";
+        readonly alwaysWhite: "#FFFFFF";
+        readonly alwaysBlack: "#09090B";
+        readonly onColorInverse: "#09090B";
+        readonly blue: "#3772FF";
+        readonly blueDisabled: "#709AFF";
+        readonly blueOnHover: "#004BFF";
+        readonly green: "#00B241";
+        readonly greenDisabled: "#5CFF98";
+        readonly greenOnHover: "#00E052";
+        readonly red: "#C41C3B";
+        readonly redDisabled: "#E15C5C";
+        readonly redOnHover: "#A11730";
+        readonly orange: "#D65700";
+        readonly orangeDisabled: "#EC9C64";
+        readonly orangeOnHover: "#AD4700";
+        readonly yellow: "#F09700";
+        readonly yellowDisabled: "#FFCA70";
+        readonly yellowOnHover: "#D68700";
+    };
+};
+/**
+ * Background Tokens
+ */
+declare const backgroundTokens: {
+    readonly dark: {
+        readonly base: "#09090B";
+        readonly primary: "#00123D";
+        readonly primaryOnHover: "#001E66";
+        readonly secondary: "#17171C";
+        readonly tertiary: "#2F2F37";
+        readonly invert: "#FFFFFF";
+        readonly invertLight: "#DFDFE2";
+        readonly green: "#00471A";
+        readonly greenOnHover: "#006625";
+        readonly red: "#2D060D";
+        readonly redOnHover: "#4C0B17";
+        readonly orange: "#331500";
+        readonly orangeOnHover: "#5C2500";
+        readonly yellow: "#3D2600";
+        readonly yellowOnHover: "#5C3A00";
+        readonly low: "#17171C";
+        readonly lowOnHover: "#2F2F37";
+        readonly info: "#00123D";
+        readonly infoOnHover: "#001E66";
+    };
+    readonly light: {
+        readonly base: "#FFFFFF";
+        readonly primary: "#EBF1FF";
+        readonly primaryOnHover: "#99B7FF";
+        readonly secondary: "#EDEDED";
+        readonly tertiary: "#DFDFE2";
+        readonly invert: "#09090B";
+        readonly invertLight: "#17171C";
+        readonly green: "#E0FFEC";
+        readonly greenOnHover: "#BDFFD5";
+        readonly red: "#FDF2F4";
+        readonly redOnHover: "#FADBE1";
+        readonly orange: "#FFF3EB";
+        readonly orangeOnHover: "#FFE1CC";
+        readonly yellow: "#FFF3EB";
+        readonly yellowOnHover: "#FFE1CC";
+        readonly low: "#EDEDED";
+        readonly lowOnHover: "#DFDFE2";
+        readonly info: "#EBF1FF";
+        readonly infoOnHover: "#99B7FF";
+    };
+};
+declare const semanticTokens: {
+    readonly border: {
+        readonly dark: {
+            readonly primary: "#4E4E5A";
+            readonly secondary: "#2F2F37";
+            readonly subtle: "#2F2F37";
+            readonly invert: "#FFFFFF";
+            readonly onColor: "#09090B";
+            readonly blue: "#709AFF";
+            readonly blueSubtle: "#002680";
+            readonly blueOnHover: "#3772FF";
+            readonly red: "#E15C5C";
+            readonly redSubtle: "#4C0B17";
+            readonly redOnHover: "#E12D4E";
+            readonly orange: "#EC9C64";
+            readonly orangeSubtle: "#5C2500";
+            readonly orangeOnHover: "#FF6800";
+            readonly yellow: "#FFCA70";
+            readonly yellowSubtle: "#5C3A00";
+            readonly yellowOnHover: "#FFAD22";
+            readonly green: "#00E052";
+            readonly greenSubtle: "#006625";
+            readonly greenOnHover: "#00B241";
+        };
+        readonly light: {
+            readonly primary: "#BEBEC1";
+            readonly secondary: "#DFDFE2";
+            readonly subtle: "#DFDFE2";
+            readonly invert: "#09090B";
+            readonly onColor: "#FFFFFF";
+            readonly blue: "#3772FF";
+            readonly blueSubtle: "#99B7FF";
+            readonly blueOnHover: "#003FD6";
+            readonly red: "#C41C3B";
+            readonly redSubtle: "#F6C1CA";
+            readonly redOnHover: "#A11730";
+            readonly orange: "#D65700";
+            readonly orangeSubtle: "#FFC9A3";
+            readonly orangeOnHover: "#AD4700";
+            readonly yellow: "#F09700";
+            readonly yellowSubtle: "#FFD999";
+            readonly yellowOnHover: "#D68700";
+            readonly green: "#00E052";
+            readonly greenSubtle: "#8AFFB5";
+            readonly greenOnHover: "#00B241";
+        };
+    };
+    readonly content: {
+        readonly dark: {
+            readonly primary: "#DFDFE2";
+            readonly secondary: "#7E7E8B";
+            readonly subtle: "#4E4E5A";
+            readonly onColor: "#09090B";
+            readonly alwaysWhite: "#FFFFFF";
+            readonly alwaysBlack: "#09090B";
+            readonly onColorInverse: "#EDEDED";
+            readonly blue: "#709AFF";
+            readonly blueDisabled: "#002680";
+            readonly blueOnHover: "#3772FF";
+            readonly green: "#00E052";
+            readonly greenDisabled: "#008A32";
+            readonly greenOnHover: "#09FF63";
+            readonly red: "#E15C5C";
+            readonly redDisabled: "#7D1225";
+            readonly redOnHover: "#F6C1CA";
+            readonly orange: "#EC9C64";
+            readonly orangeDisabled: "#7A3200";
+            readonly orangeOnHover: "#FFC9A3";
+            readonly yellow: "#FFCA70";
+            readonly yellowDisabled: "#7A4D00";
+            readonly yellowOnHover: "#FFD999";
+        };
+        readonly light: {
+            readonly primary: "#17171C";
+            readonly secondary: "#60606C";
+            readonly subtle: "#BEBEC1";
+            readonly onColor: "#FFFFFF";
+            readonly alwaysWhite: "#FFFFFF";
+            readonly alwaysBlack: "#09090B";
+            readonly onColorInverse: "#09090B";
+            readonly blue: "#3772FF";
+            readonly blueDisabled: "#709AFF";
+            readonly blueOnHover: "#004BFF";
+            readonly green: "#00B241";
+            readonly greenDisabled: "#5CFF98";
+            readonly greenOnHover: "#00E052";
+            readonly red: "#C41C3B";
+            readonly redDisabled: "#E15C5C";
+            readonly redOnHover: "#A11730";
+            readonly orange: "#D65700";
+            readonly orangeDisabled: "#EC9C64";
+            readonly orangeOnHover: "#AD4700";
+            readonly yellow: "#F09700";
+            readonly yellowDisabled: "#FFCA70";
+            readonly yellowOnHover: "#D68700";
+        };
+    };
+    readonly background: {
+        readonly dark: {
+            readonly base: "#09090B";
+            readonly primary: "#00123D";
+            readonly primaryOnHover: "#001E66";
+            readonly secondary: "#17171C";
+            readonly tertiary: "#2F2F37";
+            readonly invert: "#FFFFFF";
+            readonly invertLight: "#DFDFE2";
+            readonly green: "#00471A";
+            readonly greenOnHover: "#006625";
+            readonly red: "#2D060D";
+            readonly redOnHover: "#4C0B17";
+            readonly orange: "#331500";
+            readonly orangeOnHover: "#5C2500";
+            readonly yellow: "#3D2600";
+            readonly yellowOnHover: "#5C3A00";
+            readonly low: "#17171C";
+            readonly lowOnHover: "#2F2F37";
+            readonly info: "#00123D";
+            readonly infoOnHover: "#001E66";
+        };
+        readonly light: {
+            readonly base: "#FFFFFF";
+            readonly primary: "#EBF1FF";
+            readonly primaryOnHover: "#99B7FF";
+            readonly secondary: "#EDEDED";
+            readonly tertiary: "#DFDFE2";
+            readonly invert: "#09090B";
+            readonly invertLight: "#17171C";
+            readonly green: "#E0FFEC";
+            readonly greenOnHover: "#BDFFD5";
+            readonly red: "#FDF2F4";
+            readonly redOnHover: "#FADBE1";
+            readonly orange: "#FFF3EB";
+            readonly orangeOnHover: "#FFE1CC";
+            readonly yellow: "#FFF3EB";
+            readonly yellowOnHover: "#FFE1CC";
+            readonly low: "#EDEDED";
+            readonly lowOnHover: "#DFDFE2";
+            readonly info: "#EBF1FF";
+            readonly infoOnHover: "#99B7FF";
+        };
+    };
+};
+declare const VARIANTS: readonly ["primary", "secondary", "ghost", "outline"];
+declare const INTENTS: readonly ["primary", "success", "warning", "danger", "neutral"];
+declare const SIZES: readonly ["sm", "md", "lg"];
+declare const BUTTON_TYPES: readonly ["button", "submit", "reset"];
+declare const INPUT_TYPES: readonly ["text", "email", "password", "number", "tel", "url", "search"];
+declare const ORIENTATIONS: readonly ["horizontal", "vertical"];
+declare const SURFACE_LEVELS: readonly ["base", "elevated", "overlay"];
+type Variant = typeof VARIANTS[number];
+type Intent = typeof INTENTS[number];
+type Size = typeof SIZES[number];
+type ButtonType = typeof BUTTON_TYPES[number];
+type InputType = typeof INPUT_TYPES[number];
+type Orientation = typeof ORIENTATIONS[number];
+type SurfaceLevel = typeof SURFACE_LEVELS[number];
+type BorderToken = keyof typeof borderTokens.light;
+type ContentToken = keyof typeof contentTokens.light;
+type BackgroundToken = keyof typeof backgroundTokens.light;
+type SemanticToken = BorderToken | ContentToken | BackgroundToken;
+interface SemanticTokens {
+    intent: {
+        [K in Intent]: {
+            color: string;
+            colorHover: string;
+            colorActive: string;
+            background: string;
+            backgroundHover: string;
+            backgroundActive: string;
+            border: string;
+            text: string;
+            textMuted: string;
+        };
+    };
+    surface: {
+        [K in SurfaceLevel]: {
+            background: string;
+            border: string;
+        };
+    };
+    text: {
+        heading: string;
+        body: string;
+        muted: string;
+        disabled: string;
+    };
+}
+/**
+ * Legacy function for backward compatibility
+ * Maps new semantic tokens to old structure
+ */
+declare function createSemanticTokens(mode: ThemeMode): SemanticTokens;
+
+interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'type' | 'className'> {
+    variant?: Variant;
+    intent?: Intent;
+    size?: Size;
+    loading?: boolean;
+    fullWidth?: boolean;
+    startIcon?: string;
+    endIcon?: string;
+    loadingText?: string;
+    href?: string;
+    target?: '_blank' | '_self' | '_parent' | '_top';
+    type?: ButtonType;
+}
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+
+interface ButtonGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'className'> {
+    orientation?: Orientation;
+    fullWidth?: boolean;
+    gap?: Size;
+    children: React.ReactNode;
+}
+declare const ButtonGroup: React.ForwardRefExoticComponent<ButtonGroupProps & React.RefAttributes<HTMLDivElement>>;
+
+declare function createTheme(name: ThemeName, mode: ThemeMode): Theme;
+
+declare function setDesignSystemConfig(config: Partial<DesignSystemConfig>): void;
+declare function getDesignSystemConfig(): DesignSystemConfig;
+declare function getAdapter(): AdapterType;
+declare function getThemeName(): ThemeName;
+declare function getThemeMode(): ThemeMode;
+
+interface ThemeContextValue {
+    config: DesignSystemConfig;
+    setConfig: (config: Partial<DesignSystemConfig>) => void;
+}
+interface ThemeProviderProps {
+    children: React.ReactNode;
+    adapter?: DesignSystemConfig['adapter'];
+    theme?: ThemeName;
+    mode?: ThemeMode;
+}
+declare function ThemeProvider({ children, adapter, theme: themeName, mode, }: ThemeProviderProps): react_jsx_runtime.JSX.Element;
+declare function useTheme(): ThemeContextValue;
+
+/**
+ * Base Design Tokens
+ * Framework-agnostic design tokens
+ *
+ * Color Primitives: These are the base color values that should not be used directly in components.
+ * Use semantic tokens instead for better theme support.
+ */
+declare const neutral: {
+    readonly 100: "#FFFFFF";
+    readonly 200: "#EDEDED";
+    readonly 300: "#DFDFE2";
+    readonly 400: "#BEBEC1";
+    readonly 500: "#7E7E8B";
+    readonly 600: "#60606C";
+    readonly 700: "#4E4E5A";
+    readonly 800: "#2F2F37";
+    readonly 900: "#17171C";
+    readonly 950: "#09090B";
+    readonly 1000: "#FAFAFA";
+};
+declare const blue: {
+    readonly 100: "#EBF1FF";
+    readonly 200: "#C2D4FF";
+    readonly 300: "#99B7FF";
+    readonly 400: "#709AFF";
+    readonly 500: "#3772FF";
+    readonly 600: "#004BFF";
+    readonly 700: "#003FD6";
+    readonly 800: "#002680";
+    readonly 900: "#001E66";
+    readonly 950: "#00123D";
+};
+declare const orange: {
+    readonly 100: "#FFF3EB";
+    readonly 200: "#FFE1CC";
+    readonly 300: "#FFC9A3";
+    readonly 400: "#EC9C64";
+    readonly 500: "#FF6800";
+    readonly 600: "#D65700";
+    readonly 700: "#AD4700";
+    readonly 800: "#7A3200";
+    readonly 900: "#5C2500";
+    readonly 950: "#331500";
+};
+declare const red: {
+    readonly 100: "#FDF2F4";
+    readonly 200: "#FADBE1";
+    readonly 300: "#F6C1CA";
+    readonly 400: "#E15C5C";
+    readonly 500: "#E12D4E";
+    readonly 600: "#C41C3B";
+    readonly 700: "#A11730";
+    readonly 800: "#7D1225";
+    readonly 900: "#4C0B17";
+    readonly 950: "#2D060D";
+};
+declare const green: {
+    readonly 100: "#E0FFEC";
+    readonly 200: "#BDFFD5";
+    readonly 300: "#8AFFB5";
+    readonly 400: "#5CFF98";
+    readonly 500: "#09FF63";
+    readonly 600: "#00E052";
+    readonly 700: "#00B241";
+    readonly 800: "#008A32";
+    readonly 900: "#006625";
+    readonly 950: "#00471A";
+};
+declare const yellow: {
+    readonly 100: "#FFF4E0";
+    readonly 200: "#FFE8C2";
+    readonly 300: "#FFD999";
+    readonly 400: "#FFCA70";
+    readonly 500: "#FFAD22";
+    readonly 600: "#F09700";
+    readonly 700: "#D68700";
+    readonly 800: "#7A4D00";
+    readonly 900: "#5C3A00";
+    readonly 950: "#3D2600";
+};
+declare const colorPrimitives: {
+    readonly neutral: {
+        readonly 100: "#FFFFFF";
+        readonly 200: "#EDEDED";
+        readonly 300: "#DFDFE2";
+        readonly 400: "#BEBEC1";
+        readonly 500: "#7E7E8B";
+        readonly 600: "#60606C";
+        readonly 700: "#4E4E5A";
+        readonly 800: "#2F2F37";
+        readonly 900: "#17171C";
+        readonly 950: "#09090B";
+        readonly 1000: "#FAFAFA";
+    };
+    readonly blue: {
+        readonly 100: "#EBF1FF";
+        readonly 200: "#C2D4FF";
+        readonly 300: "#99B7FF";
+        readonly 400: "#709AFF";
+        readonly 500: "#3772FF";
+        readonly 600: "#004BFF";
+        readonly 700: "#003FD6";
+        readonly 800: "#002680";
+        readonly 900: "#001E66";
+        readonly 950: "#00123D";
+    };
+    readonly orange: {
+        readonly 100: "#FFF3EB";
+        readonly 200: "#FFE1CC";
+        readonly 300: "#FFC9A3";
+        readonly 400: "#EC9C64";
+        readonly 500: "#FF6800";
+        readonly 600: "#D65700";
+        readonly 700: "#AD4700";
+        readonly 800: "#7A3200";
+        readonly 900: "#5C2500";
+        readonly 950: "#331500";
+    };
+    readonly red: {
+        readonly 100: "#FDF2F4";
+        readonly 200: "#FADBE1";
+        readonly 300: "#F6C1CA";
+        readonly 400: "#E15C5C";
+        readonly 500: "#E12D4E";
+        readonly 600: "#C41C3B";
+        readonly 700: "#A11730";
+        readonly 800: "#7D1225";
+        readonly 900: "#4C0B17";
+        readonly 950: "#2D060D";
+    };
+    readonly green: {
+        readonly 100: "#E0FFEC";
+        readonly 200: "#BDFFD5";
+        readonly 300: "#8AFFB5";
+        readonly 400: "#5CFF98";
+        readonly 500: "#09FF63";
+        readonly 600: "#00E052";
+        readonly 700: "#00B241";
+        readonly 800: "#008A32";
+        readonly 900: "#006625";
+        readonly 950: "#00471A";
+    };
+    readonly yellow: {
+        readonly 100: "#FFF4E0";
+        readonly 200: "#FFE8C2";
+        readonly 300: "#FFD999";
+        readonly 400: "#FFCA70";
+        readonly 500: "#FFAD22";
+        readonly 600: "#F09700";
+        readonly 700: "#D68700";
+        readonly 800: "#7A4D00";
+        readonly 900: "#5C3A00";
+        readonly 950: "#3D2600";
+    };
+};
+declare const colors: {
+    readonly white: "#FFFFFF";
+    readonly black: "#09090B";
+    readonly gray50: "#EDEDED";
+    readonly gray100: "#DFDFE2";
+    readonly gray200: "#BEBEC1";
+    readonly gray300: "#7E7E8B";
+    readonly gray400: "#7E7E8B";
+    readonly gray500: "#7E7E8B";
+    readonly gray600: "#60606C";
+    readonly gray700: "#4E4E5A";
+    readonly gray800: "#2F2F37";
+    readonly gray900: "#17171C";
+    readonly blue50: "#EBF1FF";
+    readonly blue100: "#EBF1FF";
+    readonly blue200: "#C2D4FF";
+    readonly blue300: "#99B7FF";
+    readonly blue400: "#709AFF";
+    readonly blue500: "#3772FF";
+    readonly blue600: "#004BFF";
+    readonly blue700: "#003FD6";
+    readonly blue800: "#002680";
+    readonly blue900: "#001E66";
+    readonly green50: "#E0FFEC";
+    readonly green100: "#E0FFEC";
+    readonly green200: "#BDFFD5";
+    readonly green300: "#8AFFB5";
+    readonly green400: "#5CFF98";
+    readonly green500: "#09FF63";
+    readonly green600: "#00E052";
+    readonly green700: "#00B241";
+    readonly green800: "#008A32";
+    readonly green900: "#006625";
+    readonly yellow50: "#FFF4E0";
+    readonly yellow100: "#FFF4E0";
+    readonly yellow200: "#FFE8C2";
+    readonly yellow300: "#FFD999";
+    readonly yellow400: "#FFCA70";
+    readonly yellow500: "#FFAD22";
+    readonly yellow600: "#F09700";
+    readonly yellow700: "#D68700";
+    readonly yellow800: "#7A4D00";
+    readonly yellow900: "#5C3A00";
+    readonly red50: "#FDF2F4";
+    readonly red100: "#FDF2F4";
+    readonly red200: "#FADBE1";
+    readonly red300: "#F6C1CA";
+    readonly red400: "#E15C5C";
+    readonly red500: "#E12D4E";
+    readonly red600: "#C41C3B";
+    readonly red700: "#A11730";
+    readonly red800: "#7D1225";
+    readonly red900: "#4C0B17";
+};
+declare const typography: {
+    readonly fontFamily: {
+        readonly sans: readonly ["Gist", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "sans-serif"];
+        readonly mono: readonly ["Gist Mono", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", "monospace"];
+    };
+    readonly fontSize: {
+        readonly xs: "0.75rem";
+        readonly sm: "0.875rem";
+        readonly base: "1rem";
+        readonly lg: "1.125rem";
+        readonly xl: "1.25rem";
+        readonly '2xl': "1.5rem";
+        readonly '3xl': "1.875rem";
+        readonly '4xl': "2.25rem";
+        readonly '5xl': "3rem";
+    };
+    readonly fontWeight: {
+        readonly normal: "400";
+        readonly medium: "500";
+        readonly semibold: "600";
+        readonly bold: "700";
+    };
+    readonly lineHeight: {
+        readonly tight: "1.25";
+        readonly normal: "1.5";
+        readonly relaxed: "1.75";
+    };
+};
+declare const spacing: {
+    readonly 0: "0";
+    readonly 1: "0.25rem";
+    readonly 2: "0.5rem";
+    readonly 3: "0.75rem";
+    readonly 4: "1rem";
+    readonly 5: "1.25rem";
+    readonly 6: "1.5rem";
+    readonly 8: "2rem";
+    readonly 10: "2.5rem";
+    readonly 12: "3rem";
+    readonly 16: "4rem";
+    readonly 20: "5rem";
+    readonly 24: "6rem";
+};
+declare const radius: {
+    readonly none: "0";
+    readonly sm: "0.125rem";
+    readonly base: "0.25rem";
+    readonly md: "0.375rem";
+    readonly lg: "0.5rem";
+    readonly xl: "0.75rem";
+    readonly '2xl': "1rem";
+    readonly '3xl': "1.5rem";
+    readonly full: "9999px";
+};
+declare const shadows: {
+    readonly sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)";
+    readonly base: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)";
+    readonly md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)";
+    readonly lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)";
+    readonly xl: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)";
+    readonly '2xl': "0 25px 50px -12px rgb(0 0 0 / 0.25)";
+    readonly inner: "inset 0 2px 4px 0 rgb(0 0 0 / 0.05)";
+    readonly none: "none";
+};
+declare const zIndex: {
+    readonly base: 0;
+    readonly dropdown: 1000;
+    readonly sticky: 1020;
+    readonly fixed: 1030;
+    readonly modalBackdrop: 1040;
+    readonly modal: 1050;
+    readonly popover: 1060;
+    readonly tooltip: 1070;
+};
+type ColorPrimitives = typeof colorPrimitives;
+type Colors = typeof colors;
+type Typography = typeof typography;
+type Spacing = typeof spacing;
+type Radius = typeof radius;
+type Shadows = typeof shadows;
+type ZIndex = typeof zIndex;
+declare const COLOR_SCALES: readonly [100, 200, 300, 400, 500, 600, 700, 800, 900, 950, 1000];
+type ColorName = keyof typeof colorPrimitives;
+type ColorScale = typeof COLOR_SCALES[number];
+
+/**
+ * Grouped design tokens for convenient access
+ *
+ * Provides a structured object containing all design tokens organized by category.
+ * This allows for easy access like `tokens.colors.blue[500]` or `tokens.spacing[4]`.
+ *
+ * @example
+ * ```ts
+ * import { tokens } from '@pd-design/system';
+ *
+ * // Access color primitives
+ * const primaryColor = tokens.colors.blue[500];
+ * const grayColor = tokens.colors.neutral[600];
+ *
+ * // Access semantic tokens
+ * const borderColor = tokens.semantic.border.light.primary;
+ *
+ * // Access spacing
+ * const padding = tokens.spacing[4];
+ *
+ * // Access typography
+ * const fontSize = tokens.typography.fontSize.base;
+ * ```
+ */
+declare const tokens: {
+    readonly colors: {
+        readonly neutral: {
+            readonly 100: "#FFFFFF";
+            readonly 200: "#EDEDED";
+            readonly 300: "#DFDFE2";
+            readonly 400: "#BEBEC1";
+            readonly 500: "#7E7E8B";
+            readonly 600: "#60606C";
+            readonly 700: "#4E4E5A";
+            readonly 800: "#2F2F37";
+            readonly 900: "#17171C";
+            readonly 950: "#09090B";
+            readonly 1000: "#FAFAFA";
+        };
+        readonly blue: {
+            readonly 100: "#EBF1FF";
+            readonly 200: "#C2D4FF";
+            readonly 300: "#99B7FF";
+            readonly 400: "#709AFF";
+            readonly 500: "#3772FF";
+            readonly 600: "#004BFF";
+            readonly 700: "#003FD6";
+            readonly 800: "#002680";
+            readonly 900: "#001E66";
+            readonly 950: "#00123D";
+        };
+        readonly orange: {
+            readonly 100: "#FFF3EB";
+            readonly 200: "#FFE1CC";
+            readonly 300: "#FFC9A3";
+            readonly 400: "#EC9C64";
+            readonly 500: "#FF6800";
+            readonly 600: "#D65700";
+            readonly 700: "#AD4700";
+            readonly 800: "#7A3200";
+            readonly 900: "#5C2500";
+            readonly 950: "#331500";
+        };
+        readonly red: {
+            readonly 100: "#FDF2F4";
+            readonly 200: "#FADBE1";
+            readonly 300: "#F6C1CA";
+            readonly 400: "#E15C5C";
+            readonly 500: "#E12D4E";
+            readonly 600: "#C41C3B";
+            readonly 700: "#A11730";
+            readonly 800: "#7D1225";
+            readonly 900: "#4C0B17";
+            readonly 950: "#2D060D";
+        };
+        readonly green: {
+            readonly 100: "#E0FFEC";
+            readonly 200: "#BDFFD5";
+            readonly 300: "#8AFFB5";
+            readonly 400: "#5CFF98";
+            readonly 500: "#09FF63";
+            readonly 600: "#00E052";
+            readonly 700: "#00B241";
+            readonly 800: "#008A32";
+            readonly 900: "#006625";
+            readonly 950: "#00471A";
+        };
+        readonly yellow: {
+            readonly 100: "#FFF4E0";
+            readonly 200: "#FFE8C2";
+            readonly 300: "#FFD999";
+            readonly 400: "#FFCA70";
+            readonly 500: "#FFAD22";
+            readonly 600: "#F09700";
+            readonly 700: "#D68700";
+            readonly 800: "#7A4D00";
+            readonly 900: "#5C3A00";
+            readonly 950: "#3D2600";
+        };
+        readonly all: {
+            readonly neutral: {
+                readonly 100: "#FFFFFF";
+                readonly 200: "#EDEDED";
+                readonly 300: "#DFDFE2";
+                readonly 400: "#BEBEC1";
+                readonly 500: "#7E7E8B";
+                readonly 600: "#60606C";
+                readonly 700: "#4E4E5A";
+                readonly 800: "#2F2F37";
+                readonly 900: "#17171C";
+                readonly 950: "#09090B";
+                readonly 1000: "#FAFAFA";
+            };
+            readonly blue: {
+                readonly 100: "#EBF1FF";
+                readonly 200: "#C2D4FF";
+                readonly 300: "#99B7FF";
+                readonly 400: "#709AFF";
+                readonly 500: "#3772FF";
+                readonly 600: "#004BFF";
+                readonly 700: "#003FD6";
+                readonly 800: "#002680";
+                readonly 900: "#001E66";
+                readonly 950: "#00123D";
+            };
+            readonly orange: {
+                readonly 100: "#FFF3EB";
+                readonly 200: "#FFE1CC";
+                readonly 300: "#FFC9A3";
+                readonly 400: "#EC9C64";
+                readonly 500: "#FF6800";
+                readonly 600: "#D65700";
+                readonly 700: "#AD4700";
+                readonly 800: "#7A3200";
+                readonly 900: "#5C2500";
+                readonly 950: "#331500";
+            };
+            readonly red: {
+                readonly 100: "#FDF2F4";
+                readonly 200: "#FADBE1";
+                readonly 300: "#F6C1CA";
+                readonly 400: "#E15C5C";
+                readonly 500: "#E12D4E";
+                readonly 600: "#C41C3B";
+                readonly 700: "#A11730";
+                readonly 800: "#7D1225";
+                readonly 900: "#4C0B17";
+                readonly 950: "#2D060D";
+            };
+            readonly green: {
+                readonly 100: "#E0FFEC";
+                readonly 200: "#BDFFD5";
+                readonly 300: "#8AFFB5";
+                readonly 400: "#5CFF98";
+                readonly 500: "#09FF63";
+                readonly 600: "#00E052";
+                readonly 700: "#00B241";
+                readonly 800: "#008A32";
+                readonly 900: "#006625";
+                readonly 950: "#00471A";
+            };
+            readonly yellow: {
+                readonly 100: "#FFF4E0";
+                readonly 200: "#FFE8C2";
+                readonly 300: "#FFD999";
+                readonly 400: "#FFCA70";
+                readonly 500: "#FFAD22";
+                readonly 600: "#F09700";
+                readonly 700: "#D68700";
+                readonly 800: "#7A4D00";
+                readonly 900: "#5C3A00";
+                readonly 950: "#3D2600";
+            };
+        };
+        readonly legacy: {
+            readonly white: "#FFFFFF";
+            readonly black: "#09090B";
+            readonly gray50: "#EDEDED";
+            readonly gray100: "#DFDFE2";
+            readonly gray200: "#BEBEC1";
+            readonly gray300: "#7E7E8B";
+            readonly gray400: "#7E7E8B";
+            readonly gray500: "#7E7E8B";
+            readonly gray600: "#60606C";
+            readonly gray700: "#4E4E5A";
+            readonly gray800: "#2F2F37";
+            readonly gray900: "#17171C";
+            readonly blue50: "#EBF1FF";
+            readonly blue100: "#EBF1FF";
+            readonly blue200: "#C2D4FF";
+            readonly blue300: "#99B7FF";
+            readonly blue400: "#709AFF";
+            readonly blue500: "#3772FF";
+            readonly blue600: "#004BFF";
+            readonly blue700: "#003FD6";
+            readonly blue800: "#002680";
+            readonly blue900: "#001E66";
+            readonly green50: "#E0FFEC";
+            readonly green100: "#E0FFEC";
+            readonly green200: "#BDFFD5";
+            readonly green300: "#8AFFB5";
+            readonly green400: "#5CFF98";
+            readonly green500: "#09FF63";
+            readonly green600: "#00E052";
+            readonly green700: "#00B241";
+            readonly green800: "#008A32";
+            readonly green900: "#006625";
+            readonly yellow50: "#FFF4E0";
+            readonly yellow100: "#FFF4E0";
+            readonly yellow200: "#FFE8C2";
+            readonly yellow300: "#FFD999";
+            readonly yellow400: "#FFCA70";
+            readonly yellow500: "#FFAD22";
+            readonly yellow600: "#F09700";
+            readonly yellow700: "#D68700";
+            readonly yellow800: "#7A4D00";
+            readonly yellow900: "#5C3A00";
+            readonly red50: "#FDF2F4";
+            readonly red100: "#FDF2F4";
+            readonly red200: "#FADBE1";
+            readonly red300: "#F6C1CA";
+            readonly red400: "#E15C5C";
+            readonly red500: "#E12D4E";
+            readonly red600: "#C41C3B";
+            readonly red700: "#A11730";
+            readonly red800: "#7D1225";
+            readonly red900: "#4C0B17";
+        };
+    };
+    readonly semantic: {
+        readonly border: {
+            readonly dark: {
+                readonly primary: "#4E4E5A";
+                readonly secondary: "#2F2F37";
+                readonly subtle: "#2F2F37";
+                readonly invert: "#FFFFFF";
+                readonly onColor: "#09090B";
+                readonly blue: "#709AFF";
+                readonly blueSubtle: "#002680";
+                readonly blueOnHover: "#3772FF";
+                readonly red: "#E15C5C";
+                readonly redSubtle: "#4C0B17";
+                readonly redOnHover: "#E12D4E";
+                readonly orange: "#EC9C64";
+                readonly orangeSubtle: "#5C2500";
+                readonly orangeOnHover: "#FF6800";
+                readonly yellow: "#FFCA70";
+                readonly yellowSubtle: "#5C3A00";
+                readonly yellowOnHover: "#FFAD22";
+                readonly green: "#00E052";
+                readonly greenSubtle: "#006625";
+                readonly greenOnHover: "#00B241";
+            };
+            readonly light: {
+                readonly primary: "#BEBEC1";
+                readonly secondary: "#DFDFE2";
+                readonly subtle: "#DFDFE2";
+                readonly invert: "#09090B";
+                readonly onColor: "#FFFFFF";
+                readonly blue: "#3772FF";
+                readonly blueSubtle: "#99B7FF";
+                readonly blueOnHover: "#003FD6";
+                readonly red: "#C41C3B";
+                readonly redSubtle: "#F6C1CA";
+                readonly redOnHover: "#A11730";
+                readonly orange: "#D65700";
+                readonly orangeSubtle: "#FFC9A3";
+                readonly orangeOnHover: "#AD4700";
+                readonly yellow: "#F09700";
+                readonly yellowSubtle: "#FFD999";
+                readonly yellowOnHover: "#D68700";
+                readonly green: "#00E052";
+                readonly greenSubtle: "#8AFFB5";
+                readonly greenOnHover: "#00B241";
+            };
+        };
+        readonly content: {
+            readonly dark: {
+                readonly primary: "#DFDFE2";
+                readonly secondary: "#7E7E8B";
+                readonly subtle: "#4E4E5A";
+                readonly onColor: "#09090B";
+                readonly alwaysWhite: "#FFFFFF";
+                readonly alwaysBlack: "#09090B";
+                readonly onColorInverse: "#EDEDED";
+                readonly blue: "#709AFF";
+                readonly blueDisabled: "#002680";
+                readonly blueOnHover: "#3772FF";
+                readonly green: "#00E052";
+                readonly greenDisabled: "#008A32";
+                readonly greenOnHover: "#09FF63";
+                readonly red: "#E15C5C";
+                readonly redDisabled: "#7D1225";
+                readonly redOnHover: "#F6C1CA";
+                readonly orange: "#EC9C64";
+                readonly orangeDisabled: "#7A3200";
+                readonly orangeOnHover: "#FFC9A3";
+                readonly yellow: "#FFCA70";
+                readonly yellowDisabled: "#7A4D00";
+                readonly yellowOnHover: "#FFD999";
+            };
+            readonly light: {
+                readonly primary: "#17171C";
+                readonly secondary: "#60606C";
+                readonly subtle: "#BEBEC1";
+                readonly onColor: "#FFFFFF";
+                readonly alwaysWhite: "#FFFFFF";
+                readonly alwaysBlack: "#09090B";
+                readonly onColorInverse: "#09090B";
+                readonly blue: "#3772FF";
+                readonly blueDisabled: "#709AFF";
+                readonly blueOnHover: "#004BFF";
+                readonly green: "#00B241";
+                readonly greenDisabled: "#5CFF98";
+                readonly greenOnHover: "#00E052";
+                readonly red: "#C41C3B";
+                readonly redDisabled: "#E15C5C";
+                readonly redOnHover: "#A11730";
+                readonly orange: "#D65700";
+                readonly orangeDisabled: "#EC9C64";
+                readonly orangeOnHover: "#AD4700";
+                readonly yellow: "#F09700";
+                readonly yellowDisabled: "#FFCA70";
+                readonly yellowOnHover: "#D68700";
+            };
+        };
+        readonly background: {
+            readonly dark: {
+                readonly base: "#09090B";
+                readonly primary: "#00123D";
+                readonly primaryOnHover: "#001E66";
+                readonly secondary: "#17171C";
+                readonly tertiary: "#2F2F37";
+                readonly invert: "#FFFFFF";
+                readonly invertLight: "#DFDFE2";
+                readonly green: "#00471A";
+                readonly greenOnHover: "#006625";
+                readonly red: "#2D060D";
+                readonly redOnHover: "#4C0B17";
+                readonly orange: "#331500";
+                readonly orangeOnHover: "#5C2500";
+                readonly yellow: "#3D2600";
+                readonly yellowOnHover: "#5C3A00";
+                readonly low: "#17171C";
+                readonly lowOnHover: "#2F2F37";
+                readonly info: "#00123D";
+                readonly infoOnHover: "#001E66";
+            };
+            readonly light: {
+                readonly base: "#FFFFFF";
+                readonly primary: "#EBF1FF";
+                readonly primaryOnHover: "#99B7FF";
+                readonly secondary: "#EDEDED";
+                readonly tertiary: "#DFDFE2";
+                readonly invert: "#09090B";
+                readonly invertLight: "#17171C";
+                readonly green: "#E0FFEC";
+                readonly greenOnHover: "#BDFFD5";
+                readonly red: "#FDF2F4";
+                readonly redOnHover: "#FADBE1";
+                readonly orange: "#FFF3EB";
+                readonly orangeOnHover: "#FFE1CC";
+                readonly yellow: "#FFF3EB";
+                readonly yellowOnHover: "#FFE1CC";
+                readonly low: "#EDEDED";
+                readonly lowOnHover: "#DFDFE2";
+                readonly info: "#EBF1FF";
+                readonly infoOnHover: "#99B7FF";
+            };
+        };
+        readonly all: {
+            readonly border: {
+                readonly dark: {
+                    readonly primary: "#4E4E5A";
+                    readonly secondary: "#2F2F37";
+                    readonly subtle: "#2F2F37";
+                    readonly invert: "#FFFFFF";
+                    readonly onColor: "#09090B";
+                    readonly blue: "#709AFF";
+                    readonly blueSubtle: "#002680";
+                    readonly blueOnHover: "#3772FF";
+                    readonly red: "#E15C5C";
+                    readonly redSubtle: "#4C0B17";
+                    readonly redOnHover: "#E12D4E";
+                    readonly orange: "#EC9C64";
+                    readonly orangeSubtle: "#5C2500";
+                    readonly orangeOnHover: "#FF6800";
+                    readonly yellow: "#FFCA70";
+                    readonly yellowSubtle: "#5C3A00";
+                    readonly yellowOnHover: "#FFAD22";
+                    readonly green: "#00E052";
+                    readonly greenSubtle: "#006625";
+                    readonly greenOnHover: "#00B241";
+                };
+                readonly light: {
+                    readonly primary: "#BEBEC1";
+                    readonly secondary: "#DFDFE2";
+                    readonly subtle: "#DFDFE2";
+                    readonly invert: "#09090B";
+                    readonly onColor: "#FFFFFF";
+                    readonly blue: "#3772FF";
+                    readonly blueSubtle: "#99B7FF";
+                    readonly blueOnHover: "#003FD6";
+                    readonly red: "#C41C3B";
+                    readonly redSubtle: "#F6C1CA";
+                    readonly redOnHover: "#A11730";
+                    readonly orange: "#D65700";
+                    readonly orangeSubtle: "#FFC9A3";
+                    readonly orangeOnHover: "#AD4700";
+                    readonly yellow: "#F09700";
+                    readonly yellowSubtle: "#FFD999";
+                    readonly yellowOnHover: "#D68700";
+                    readonly green: "#00E052";
+                    readonly greenSubtle: "#8AFFB5";
+                    readonly greenOnHover: "#00B241";
+                };
+            };
+            readonly content: {
+                readonly dark: {
+                    readonly primary: "#DFDFE2";
+                    readonly secondary: "#7E7E8B";
+                    readonly subtle: "#4E4E5A";
+                    readonly onColor: "#09090B";
+                    readonly alwaysWhite: "#FFFFFF";
+                    readonly alwaysBlack: "#09090B";
+                    readonly onColorInverse: "#EDEDED";
+                    readonly blue: "#709AFF";
+                    readonly blueDisabled: "#002680";
+                    readonly blueOnHover: "#3772FF";
+                    readonly green: "#00E052";
+                    readonly greenDisabled: "#008A32";
+                    readonly greenOnHover: "#09FF63";
+                    readonly red: "#E15C5C";
+                    readonly redDisabled: "#7D1225";
+                    readonly redOnHover: "#F6C1CA";
+                    readonly orange: "#EC9C64";
+                    readonly orangeDisabled: "#7A3200";
+                    readonly orangeOnHover: "#FFC9A3";
+                    readonly yellow: "#FFCA70";
+                    readonly yellowDisabled: "#7A4D00";
+                    readonly yellowOnHover: "#FFD999";
+                };
+                readonly light: {
+                    readonly primary: "#17171C";
+                    readonly secondary: "#60606C";
+                    readonly subtle: "#BEBEC1";
+                    readonly onColor: "#FFFFFF";
+                    readonly alwaysWhite: "#FFFFFF";
+                    readonly alwaysBlack: "#09090B";
+                    readonly onColorInverse: "#09090B";
+                    readonly blue: "#3772FF";
+                    readonly blueDisabled: "#709AFF";
+                    readonly blueOnHover: "#004BFF";
+                    readonly green: "#00B241";
+                    readonly greenDisabled: "#5CFF98";
+                    readonly greenOnHover: "#00E052";
+                    readonly red: "#C41C3B";
+                    readonly redDisabled: "#E15C5C";
+                    readonly redOnHover: "#A11730";
+                    readonly orange: "#D65700";
+                    readonly orangeDisabled: "#EC9C64";
+                    readonly orangeOnHover: "#AD4700";
+                    readonly yellow: "#F09700";
+                    readonly yellowDisabled: "#FFCA70";
+                    readonly yellowOnHover: "#D68700";
+                };
+            };
+            readonly background: {
+                readonly dark: {
+                    readonly base: "#09090B";
+                    readonly primary: "#00123D";
+                    readonly primaryOnHover: "#001E66";
+                    readonly secondary: "#17171C";
+                    readonly tertiary: "#2F2F37";
+                    readonly invert: "#FFFFFF";
+                    readonly invertLight: "#DFDFE2";
+                    readonly green: "#00471A";
+                    readonly greenOnHover: "#006625";
+                    readonly red: "#2D060D";
+                    readonly redOnHover: "#4C0B17";
+                    readonly orange: "#331500";
+                    readonly orangeOnHover: "#5C2500";
+                    readonly yellow: "#3D2600";
+                    readonly yellowOnHover: "#5C3A00";
+                    readonly low: "#17171C";
+                    readonly lowOnHover: "#2F2F37";
+                    readonly info: "#00123D";
+                    readonly infoOnHover: "#001E66";
+                };
+                readonly light: {
+                    readonly base: "#FFFFFF";
+                    readonly primary: "#EBF1FF";
+                    readonly primaryOnHover: "#99B7FF";
+                    readonly secondary: "#EDEDED";
+                    readonly tertiary: "#DFDFE2";
+                    readonly invert: "#09090B";
+                    readonly invertLight: "#17171C";
+                    readonly green: "#E0FFEC";
+                    readonly greenOnHover: "#BDFFD5";
+                    readonly red: "#FDF2F4";
+                    readonly redOnHover: "#FADBE1";
+                    readonly orange: "#FFF3EB";
+                    readonly orangeOnHover: "#FFE1CC";
+                    readonly yellow: "#FFF3EB";
+                    readonly yellowOnHover: "#FFE1CC";
+                    readonly low: "#EDEDED";
+                    readonly lowOnHover: "#DFDFE2";
+                    readonly info: "#EBF1FF";
+                    readonly infoOnHover: "#99B7FF";
+                };
+            };
+        };
+    };
+    readonly spacing: {
+        readonly 0: "0";
+        readonly 1: "0.25rem";
+        readonly 2: "0.5rem";
+        readonly 3: "0.75rem";
+        readonly 4: "1rem";
+        readonly 5: "1.25rem";
+        readonly 6: "1.5rem";
+        readonly 8: "2rem";
+        readonly 10: "2.5rem";
+        readonly 12: "3rem";
+        readonly 16: "4rem";
+        readonly 20: "5rem";
+        readonly 24: "6rem";
+    };
+    readonly typography: {
+        readonly fontFamily: {
+            readonly sans: readonly ["Gist", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "sans-serif"];
+            readonly mono: readonly ["Gist Mono", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", "monospace"];
+        };
+        readonly fontSize: {
+            readonly xs: "0.75rem";
+            readonly sm: "0.875rem";
+            readonly base: "1rem";
+            readonly lg: "1.125rem";
+            readonly xl: "1.25rem";
+            readonly '2xl': "1.5rem";
+            readonly '3xl': "1.875rem";
+            readonly '4xl': "2.25rem";
+            readonly '5xl': "3rem";
+        };
+        readonly fontWeight: {
+            readonly normal: "400";
+            readonly medium: "500";
+            readonly semibold: "600";
+            readonly bold: "700";
+        };
+        readonly lineHeight: {
+            readonly tight: "1.25";
+            readonly normal: "1.5";
+            readonly relaxed: "1.75";
+        };
+    };
+    readonly radius: {
+        readonly none: "0";
+        readonly sm: "0.125rem";
+        readonly base: "0.25rem";
+        readonly md: "0.375rem";
+        readonly lg: "0.5rem";
+        readonly xl: "0.75rem";
+        readonly '2xl': "1rem";
+        readonly '3xl': "1.5rem";
+        readonly full: "9999px";
+    };
+    readonly shadows: {
+        readonly sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)";
+        readonly base: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)";
+        readonly md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)";
+        readonly lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)";
+        readonly xl: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)";
+        readonly '2xl': "0 25px 50px -12px rgb(0 0 0 / 0.25)";
+        readonly inner: "inset 0 2px 4px 0 rgb(0 0 0 / 0.05)";
+        readonly none: "none";
+    };
+    readonly zIndex: {
+        readonly base: 0;
+        readonly dropdown: 1000;
+        readonly sticky: 1020;
+        readonly fixed: 1030;
+        readonly modalBackdrop: 1040;
+        readonly modal: 1050;
+        readonly popover: 1060;
+        readonly tooltip: 1070;
+    };
+};
+type Tokens = typeof tokens;
+
+/**
+ * Icon Utility
+ *
+ * Dynamically loads icons from lucide-react by name.
+ * Handles invalid icon names gracefully.
+ */
+
+type LucideIconName = keyof typeof LucideIcons;
+/**
+ * Get an icon component from lucide-react by name
+ *
+ * @param iconName - Name of the icon (e.g., 'Download', 'Trash2', 'Plus')
+ * @returns Icon component or null if icon doesn't exist
+ *
+ * @example
+ * ```tsx
+ * const Icon = getIcon('Download');
+ * if (Icon) {
+ *   return <Icon className="h-4 w-4" />;
+ * }
+ * ```
+ */
+declare function getIcon(iconName: string | undefined | null): React.ComponentType<any> | null;
+/**
+ * Render an icon component with proper sizing
+ *
+ * @param iconName - Name of the icon
+ * @param size - Size class for the icon
+ * @param className - Additional classes
+ * @returns Rendered icon or null
+ */
+declare function renderIcon(iconName: string | undefined | null, size?: string, className?: string): React.ReactElement | null;
+/**
+ * Check if an icon name exists in lucide-react
+ *
+ * @param iconName - Name of the icon to check
+ * @returns true if icon exists, false otherwise
+ */
+declare function iconExists(iconName: string | undefined | null): boolean;
+/**
+ * Get list of available icon names (for autocomplete/validation)
+ * Note: This returns all exported names from lucide-react
+ */
+declare function getAvailableIconNames(): string[];
+
+/**
+ * Accessibility Utilities
+ *
+ * Provides utilities and types for ensuring excellent accessibility scores
+ * across all components. Supports both user-provided and default accessibility props.
+ */
+
+/**
+ * Accessibility props that can be passed by users or use defaults
+ */
+interface AccessibilityProps {
+    /**
+     * Accessible label for the element.
+     * If not provided, will attempt to generate from children or other props.
+     */
+    'aria-label'?: string;
+    /**
+     * Reference to element(s) that describe this element.
+     */
+    'aria-describedby'?: string;
+    /**
+     * Reference to element(s) that label this element.
+     */
+    'aria-labelledby'?: string;
+    /**
+     * Indicates the current state of the element.
+     */
+    'aria-current'?: 'page' | 'step' | 'location' | 'date' | 'time' | boolean;
+    /**
+     * Indicates whether the element is expanded or collapsed.
+     */
+    'aria-expanded'?: boolean;
+    /**
+     * Indicates whether the element is selected.
+     */
+    'aria-selected'?: boolean;
+    /**
+     * Indicates whether the element is checked.
+     */
+    'aria-checked'?: boolean | 'mixed';
+    /**
+     * Indicates whether the element is disabled.
+     */
+    'aria-disabled'?: boolean;
+    /**
+     * Indicates whether the element is required.
+     */
+    'aria-required'?: boolean;
+    /**
+     * Indicates whether the element has invalid input.
+     */
+    'aria-invalid'?: boolean | 'grammar' | 'spelling';
+    /**
+     * Describes the error message for invalid input.
+     */
+    'aria-errormessage'?: string;
+    /**
+     * Indicates the element's role.
+     */
+    role?: string;
+    /**
+     * Tab index for keyboard navigation.
+     * -1: Not focusable, 0: Focusable in tab order, >0: Custom tab order (not recommended)
+     */
+    tabIndex?: number;
+    /**
+     * Indicates whether the element should be hidden from assistive technologies.
+     */
+    'aria-hidden'?: boolean;
+    /**
+     * Indicates whether the element is live and should be announced.
+     */
+    'aria-live'?: 'off' | 'polite' | 'assertive';
+    /**
+     * Indicates whether the element is atomic for live regions.
+     */
+    'aria-atomic'?: boolean;
+    /**
+     * Indicates the level of heading (for headings).
+     */
+    'aria-level'?: number;
+    /**
+     * Indicates the position in a set (for list items, etc.).
+     */
+    'aria-posinset'?: number;
+    /**
+     * Indicates the size of a set (for list items, etc.).
+     */
+    'aria-setsize'?: number;
+    /**
+     * Indicates whether the element has a popup.
+     */
+    'aria-haspopup'?: boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';
+    /**
+     * Indicates the orientation of the element.
+     */
+    'aria-orientation'?: 'horizontal' | 'vertical';
+    /**
+     * Indicates the value of the element.
+     */
+    'aria-valuenow'?: number;
+    /**
+     * Indicates the minimum value.
+     */
+    'aria-valuemin'?: number;
+    /**
+     * Indicates the maximum value.
+     */
+    'aria-valuemax'?: number;
+    /**
+     * Human-readable text alternative of aria-valuenow.
+     */
+    'aria-valuetext'?: string;
+    /**
+     * Indicates whether the element is busy.
+     */
+    'aria-busy'?: boolean;
+    /**
+     * Indicates the element's controls.
+     */
+    'aria-controls'?: string;
+    /**
+     * Indicates the element's owns.
+     */
+    'aria-owns'?: string;
+}
+/**
+ * Validates accessibility props and returns warnings in development
+ */
+declare function validateAccessibilityProps(props: AccessibilityProps, componentType: string, options?: {
+    children?: React.ReactNode;
+    iconOnly?: boolean;
+}): void;
+
+export { ADAPTER_TYPES, type AccessibilityProps, type AdapterType, BUTTON_TYPES, type BackgroundToken, type BorderToken, Button, ButtonGroup, type ButtonGroupProps, type ButtonProps, type ButtonType, COLOR_SCALES, type ColorName, type ColorPrimitives, type ColorScale, type Colors, type ContentToken, type DesignSystemConfig, INPUT_TYPES, INTENTS, type InputType, type Intent, type LucideIconName, ORIENTATIONS, type Orientation, type Radius, SIZES, SURFACE_LEVELS, type SemanticToken, type SemanticTokens, type Shadows, type Size, type Spacing, type SurfaceLevel, THEME_MODES, THEME_NAMES, type Theme, type ThemeMode, type ThemeName, ThemeProvider, type ThemeProviderProps, type Tokens, type Typography, VARIANTS, type Variant, type ZIndex, backgroundTokens, blue, borderTokens, colorPrimitives, colors, contentTokens, createSemanticTokens, createTheme, getAdapter, getAvailableIconNames, getDesignSystemConfig, getIcon, getThemeMode, getThemeName, green, iconExists, neutral, orange, radius, red, renderIcon, semanticTokens, setDesignSystemConfig, shadows, spacing, tokens, typography, useTheme, validateAccessibilityProps, yellow, zIndex };