@projectdiscoveryio/design-system 1.0.0

package/dist/index.d.cts

@@ -0,0 +1,1497 @@
+import React, { Component, ReactNode } from 'react';
+import * as LucideIcons from 'lucide-react';
+export { LucideIcons as Icons };
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+/**
+ * Design Tokens - Single Source of Truth
+ *
+ * This file contains all design tokens in one place:
+ * - Base color primitives
+ * - Typography, spacing, radius, shadows, z-index
+ * - Semantic token mappings (derived from base tokens)
+ *
+ * Everything else (CSS variables, theme objects) is generated from this file.
+ */
+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 typography: {
+    readonly fontFamily: {
+        readonly sans: readonly ["Geist", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "sans-serif"];
+        readonly mono: readonly ["Geist Mono", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", "monospace"];
+    };
+    readonly fontSize: {
+        readonly xs: "0.75em";
+        readonly sm: "0.875em";
+        readonly base: "1em";
+        readonly lg: "1.125em";
+        readonly xl: "1.25em";
+        readonly '2xl': "1.5em";
+        readonly '3xl': "1.875em";
+        readonly '4xl': "2.25em";
+        readonly '5xl': "3em";
+        readonly '6xl': "3.75em";
+        readonly '7xl': "4.5em";
+        readonly '8xl': "6em";
+        readonly '9xl': "8em";
+    };
+    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 fontSizeLineHeight: {
+        readonly xs: "1em";
+        readonly sm: "1.25em";
+        readonly base: "1.5em";
+        readonly lg: "1.75em";
+        readonly xl: "1.75em";
+        readonly '2xl': "2em";
+        readonly '3xl': "2.25em";
+        readonly '4xl': "2.5em";
+        readonly '5xl': "1";
+        readonly '6xl': "1";
+        readonly '7xl': "1";
+        readonly '8xl': "1";
+        readonly '9xl': "1";
+    };
+    readonly letterSpacing: {
+        readonly tight: "-0.025em";
+        readonly normal: "0";
+        readonly wide: "0.025em";
+        readonly wider: "0.05em";
+        readonly widest: "0.1em";
+        readonly button: "0.00833em";
+    };
+};
+declare const spacing: {
+    readonly 0: "0em";
+    readonly 1: "0.25em";
+    readonly 2: "0.5em";
+    readonly 3: "0.75em";
+    readonly 4: "1em";
+    readonly 5: "1.25em";
+    readonly 6: "1.5em";
+    readonly 7: "1.75em";
+    readonly 8: "2em";
+    readonly 9: "2.25em";
+    readonly 10: "2.5em";
+};
+declare const radius: {
+    readonly none: "0";
+    readonly sm: "0.125em";
+    readonly base: "0.25em";
+    readonly md: "0.375em";
+    readonly lg: "0.5em";
+    readonly xl: "0.75em";
+    readonly '2xl': "1em";
+    readonly '3xl': "1.5em";
+    readonly full: "9999px";
+    readonly button: "0.5em";
+};
+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;
+};
+declare const button: {
+    readonly padding: {
+        readonly sm: {
+            readonly vertical: "0.5em";
+            readonly horizontal: "0.75em";
+        };
+        readonly md: {
+            readonly vertical: "0.625em";
+            readonly horizontal: "1em";
+        };
+        readonly lg: {
+            readonly vertical: "0.75em";
+            readonly horizontal: "1.25em";
+        };
+    };
+    readonly gap: "0.5em";
+    readonly lineHeight: {
+        readonly sm: "1.333em";
+        readonly md: "1.333em";
+        readonly lg: "1.333em";
+    };
+    readonly letterSpacing: "0.00833em";
+};
+/**
+ * Semantic tokens map base color primitives to meaningful names
+ * that change based on theme mode (light/dark)
+ */
+declare const semanticTokens: {
+    readonly light: {
+        readonly border: {
+            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 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 primary: "#FFFFFF";
+            readonly system: "#FAFAFA";
+            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 base: "#FFFFFF";
+        };
+    };
+    readonly dark: {
+        readonly border: {
+            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 content: {
+            readonly primary: "#DFDFE2";
+            readonly secondary: "#7E7E8B";
+            readonly subtle: "#4E4E5A";
+            readonly onColor: "#09090B";
+            readonly alwaysWhite: "#FFFFFF";
+            readonly alwaysBlack: "#09090B";
+            readonly onColorInverse: "#FFFFFF";
+            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 background: {
+            readonly primary: "#09090B";
+            readonly system: "#09090B";
+            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 base: "#09090B";
+        };
+    };
+};
+declare const COLOR_SCALES: readonly [100, 200, 300, 400, 500, 600, 700, 800, 900, 950, 1000];
+declare const VARIANTS: readonly ["primary", "secondary", "ghost", "destructive"];
+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 ColorName = keyof typeof colorPrimitives;
+type ColorScale = typeof COLOR_SCALES[number];
+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 ColorPrimitives = typeof colorPrimitives;
+type Typography = typeof typography;
+type Spacing = typeof spacing;
+type Radius = typeof radius;
+type Shadows = typeof shadows;
+type ZIndex = typeof zIndex;
+/**
+ * Legacy colors object for backward compatibility
+ * Maps old color names to new scale-based colors
+ */
+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";
+};
+type Colors = typeof colors;
+
+declare const THEME_MODES: readonly ["light", "dark", "system"];
+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];
+declare const DEFAULT_ADAPTER: AdapterType;
+declare const DEFAULT_THEME: ThemeName;
+declare const DEFAULT_MODE: ThemeMode;
+interface DesignSystemConfig {
+    adapter: AdapterType;
+    theme: ThemeName;
+    mode: ThemeMode;
+}
+interface Theme {
+    mode: ThemeMode;
+    name: ThemeName;
+    cssVariables: Record<string, string>;
+}
+
+/**
+ * @deprecated This file is kept for backward compatibility.
+ * Import from '../tokens/tokens' or '../tokens' instead.
+ *
+ * This file re-exports from the unified tokens.ts file and provides
+ * legacy compatibility functions.
+ */
+
+declare const borderTokens: {
+    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 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";
+    };
+};
+declare const contentTokens: {
+    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 dark: {
+        readonly primary: "#DFDFE2";
+        readonly secondary: "#7E7E8B";
+        readonly subtle: "#4E4E5A";
+        readonly onColor: "#09090B";
+        readonly alwaysWhite: "#FFFFFF";
+        readonly alwaysBlack: "#09090B";
+        readonly onColorInverse: "#FFFFFF";
+        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";
+    };
+};
+declare const backgroundTokens: {
+    readonly light: {
+        readonly primary: "#FFFFFF";
+        readonly system: "#FAFAFA";
+        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 base: "#FFFFFF";
+    };
+    readonly dark: {
+        readonly primary: "#09090B";
+        readonly system: "#09090B";
+        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 base: "#09090B";
+    };
+};
+
+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 typeof INTENTS[number]]: {
+            color: string;
+            colorHover: string;
+            colorActive: string;
+            background: string;
+            backgroundHover: string;
+            backgroundActive: string;
+            border: string;
+            text: string;
+            textMuted: string;
+        };
+    };
+    surface: {
+        [K in typeof SURFACE_LEVELS[number]]: {
+            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;
+
+/**
+ * Icon Utility
+ *
+ * Dynamically loads icons from lucide-react by name.
+ * Handles invalid icon names gracefully.
+ */
+
+type LucideExports = typeof LucideIcons;
+type LucideIconKeys = {
+    [K in keyof LucideExports]: LucideExports[K] extends React.ComponentType<React.SVGProps<SVGSVGElement>> ? K : never;
+}[keyof LucideExports];
+type LucideIconName = LucideIconKeys;
+/**
+ * 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<React.SVGProps<SVGSVGElement>> | 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[];
+
+interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'type' | 'className'> {
+    variant?: Variant;
+    size?: Size;
+    loading?: boolean;
+    fullWidth?: boolean;
+    startIcon?: LucideIconName;
+    endIcon?: LucideIconName;
+    loadingText?: string;
+    href?: string;
+    target?: '_blank' | '_self' | '_parent' | '_top';
+    type?: ButtonType;
+    asChild?: boolean;
+}
+declare const Button: React.MemoExoticComponent<React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>>;
+
+type PdThemeProviderProps = {
+    children: React.ReactNode;
+    theme?: ThemeName;
+    mode?: ThemeMode;
+    className?: string;
+};
+/**
+ * PdThemeProvider - Root provider for PD Design System
+ *
+ * This component creates a scoped boundary for all design system styles.
+ * All tokens are scoped under .pd-root to prevent style leakage.
+ *
+ * @param theme - Theme name ('base' | 'brand'). Defaults to 'base'.
+ * @param mode - Color mode ('light' | 'dark' | 'system'). Defaults to 'system'.
+ *
+ * @example
+ * ```tsx
+ * <PdThemeProvider theme="base" mode="dark">
+ *   <Button>Click me</Button>
+ * </PdThemeProvider>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <PdThemeProvider theme="brand" mode="light">
+ *   <Button>Click me</Button>
+ * </PdThemeProvider>
+ * ```
+ */
+declare function PdThemeProvider({ children, theme: themeName, mode, className }: PdThemeProviderProps): react_jsx_runtime.JSX.Element;
+declare namespace PdThemeProvider {
+    var displayName: string;
+}
+
+interface ErrorBoundaryProps {
+    children: ReactNode;
+    fallback?: ReactNode | ((error: Error, errorInfo: React.ErrorInfo) => ReactNode);
+    onError?: (error: Error, errorInfo: React.ErrorInfo) => void;
+}
+interface ErrorBoundaryState {
+    hasError: boolean;
+    error: Error | null;
+    errorInfo: React.ErrorInfo | null;
+}
+/**
+ * ErrorBoundary component to catch adapter failures and other React errors
+ *
+ * @example
+ * ```tsx
+ * <ErrorBoundary fallback={<div>Something went wrong</div>}>
+ *   <Button>Click me</Button>
+ * </ErrorBoundary>
+ * ```
+ */
+declare class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+    constructor(props: ErrorBoundaryProps);
+    static getDerivedStateFromError(error: Error): Partial<ErrorBoundaryState>;
+    componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void;
+    render(): ReactNode;
+}
+
+/**
+ * Theme Creation
+ *
+ * Creates theme objects from unified tokens.
+ * This is a thin layer that converts tokens to CSS variables for runtime theming.
+ */
+
+/**
+ * Resolves 'system' mode to either 'light' or 'dark' based on OS preference
+ * Falls back to 'light' if matchMedia is not available (SSR)
+ */
+declare function resolveThemeMode(mode: ThemeMode): 'light' | 'dark';
+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;
+    /**
+     * Optional localStorage key for persisting theme preference.
+     * If provided, ThemeProvider will automatically sync mode with localStorage.
+     * If not provided, no localStorage sync will occur.
+     */
+    storageKey?: string;
+}
+declare function ThemeProvider({ children, adapter, theme: themeName, mode: initialMode, storageKey, }: ThemeProviderProps): react_jsx_runtime.JSX.Element;
+declare function useTheme(): ThemeContextValue;
+
+/**
+ * Design Tokens - Main Export
+ *
+ * This is the main entry point for all design tokens.
+ * All tokens come from the unified tokens.ts file (single source of truth).
+ */
+
+/**
+ * Grouped design tokens for convenient access
+ *
+ * Provides a structured object containing all design tokens organized by category.
+ *
+ * @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.light.border.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 light: {
+            readonly border: {
+                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 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 primary: "#FFFFFF";
+                readonly system: "#FAFAFA";
+                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 base: "#FFFFFF";
+            };
+        };
+        readonly dark: {
+            readonly border: {
+                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 content: {
+                readonly primary: "#DFDFE2";
+                readonly secondary: "#7E7E8B";
+                readonly subtle: "#4E4E5A";
+                readonly onColor: "#09090B";
+                readonly alwaysWhite: "#FFFFFF";
+                readonly alwaysBlack: "#09090B";
+                readonly onColorInverse: "#FFFFFF";
+                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 background: {
+                readonly primary: "#09090B";
+                readonly system: "#09090B";
+                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 base: "#09090B";
+            };
+        };
+    };
+    readonly spacing: {
+        readonly 0: "0em";
+        readonly 1: "0.25em";
+        readonly 2: "0.5em";
+        readonly 3: "0.75em";
+        readonly 4: "1em";
+        readonly 5: "1.25em";
+        readonly 6: "1.5em";
+        readonly 7: "1.75em";
+        readonly 8: "2em";
+        readonly 9: "2.25em";
+        readonly 10: "2.5em";
+    };
+    readonly typography: {
+        readonly fontFamily: {
+            readonly sans: readonly ["Geist", "-apple-system", "BlinkMacSystemFont", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "sans-serif"];
+            readonly mono: readonly ["Geist Mono", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", "monospace"];
+        };
+        readonly fontSize: {
+            readonly xs: "0.75em";
+            readonly sm: "0.875em";
+            readonly base: "1em";
+            readonly lg: "1.125em";
+            readonly xl: "1.25em";
+            readonly '2xl': "1.5em";
+            readonly '3xl': "1.875em";
+            readonly '4xl': "2.25em";
+            readonly '5xl': "3em";
+            readonly '6xl': "3.75em";
+            readonly '7xl': "4.5em";
+            readonly '8xl': "6em";
+            readonly '9xl': "8em";
+        };
+        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 fontSizeLineHeight: {
+            readonly xs: "1em";
+            readonly sm: "1.25em";
+            readonly base: "1.5em";
+            readonly lg: "1.75em";
+            readonly xl: "1.75em";
+            readonly '2xl': "2em";
+            readonly '3xl': "2.25em";
+            readonly '4xl': "2.5em";
+            readonly '5xl': "1";
+            readonly '6xl': "1";
+            readonly '7xl': "1";
+            readonly '8xl': "1";
+            readonly '9xl': "1";
+        };
+        readonly letterSpacing: {
+            readonly tight: "-0.025em";
+            readonly normal: "0";
+            readonly wide: "0.025em";
+            readonly wider: "0.05em";
+            readonly widest: "0.1em";
+            readonly button: "0.00833em";
+        };
+    };
+    readonly radius: {
+        readonly none: "0";
+        readonly sm: "0.125em";
+        readonly base: "0.25em";
+        readonly md: "0.375em";
+        readonly lg: "0.5em";
+        readonly xl: "0.75em";
+        readonly '2xl': "1em";
+        readonly '3xl': "1.5em";
+        readonly full: "9999px";
+        readonly button: "0.5em";
+    };
+    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;
+
+/**
+ * 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, type ButtonProps, type ButtonType, COLOR_SCALES, type ColorName, type ColorPrimitives, type ColorScale, type Colors, type ContentToken, DEFAULT_ADAPTER, DEFAULT_MODE, DEFAULT_THEME, type DesignSystemConfig, ErrorBoundary, INPUT_TYPES, INTENTS, type InputType, type Intent, type LucideIconName, ORIENTATIONS, type Orientation, PdThemeProvider, type PdThemeProviderProps, 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, button, colorPrimitives, colors, contentTokens, createSemanticTokens, createTheme, getAdapter, getAvailableIconNames, getDesignSystemConfig, getIcon, getThemeMode, getThemeName, green, iconExists, neutral, orange, radius, red, renderIcon, resolveThemeMode, semanticTokens, setDesignSystemConfig, shadows, spacing, tokens, typography, useTheme, validateAccessibilityProps, yellow, zIndex };