@tac-ui/tokens 0.1.0

package/dist/index.d.mts

@@ -0,0 +1,1094 @@
+/**
+ * Primitive color tokens — Tac UI palette.
+ * Luxurious Pantone Black & White Series.
+ */
+declare const primitiveColors: {
+    readonly white: "#FFFFFF";
+    readonly black: "#000000";
+    readonly gray: {
+        readonly 50: "#F5F5F6";
+        readonly 100: "#E6E7E8";
+        readonly 200: "#D1D3D4";
+        readonly 300: "#BCBEC0";
+        readonly 400: "#A7A9AC";
+        readonly 500: "#808285";
+        readonly 600: "#6D6E71";
+        readonly 700: "#58595B";
+        readonly 800: "#414042";
+        readonly 900: "#2D2A26";
+        readonly 950: "#101820";
+    };
+    readonly warmGray: {
+        readonly 50: "#F6F5F3";
+        readonly 100: "#E5E1E0";
+        readonly 200: "#D7D2CB";
+        readonly 300: "#BFB8AF";
+        readonly 400: "#ACA39A";
+        readonly 500: "#968C83";
+        readonly 600: "#83786F";
+        readonly 700: "#6E6259";
+        readonly 800: "#5C5146";
+        readonly 900: "#4A4138";
+    };
+    readonly status: {
+        readonly success: "#1A4331";
+        readonly successLight: "#EAF1EC";
+        readonly warning: "#8A6D3B";
+        readonly warningLight: "#F7F3EA";
+        readonly error: "#7C2128";
+        readonly errorLight: "#F4EAEB";
+    };
+    readonly dark: {
+        readonly bg: "#101820";
+        readonly bgSubtle: "#1A1C20";
+        readonly surface: "#1A1C20";
+        readonly surfaceHover: "#22252A";
+        readonly border: "#2D2A26";
+        readonly muted: "#1A1C20";
+        readonly mutedFg: "#808285";
+    };
+    readonly glass: {
+        readonly bg: "rgba(16, 24, 32, 0.8)";
+        readonly bgHover: "rgba(16, 24, 32, 0.9)";
+        readonly border: "rgba(255, 255, 255, 0.05)";
+        readonly borderHover: "rgba(255, 255, 255, 0.1)";
+        readonly lightBg: "rgba(255, 255, 255, 0.8)";
+        readonly lightBgHover: "rgba(255, 255, 255, 0.9)";
+        readonly lightBorder: "rgba(16, 24, 32, 0.04)";
+        readonly lightBorderHover: "rgba(16, 24, 32, 0.08)";
+    };
+};
+
+declare const semanticTokens: {
+    readonly light: {
+        readonly background: "#FAFAFA";
+        readonly backgroundSubtle: "#F4F4F5";
+        readonly surface: "#FCFCFC";
+        readonly surfaceHover: "#F4F4F5";
+        readonly surfaceBase: "#FAFAFA";
+        readonly surfaceElevatedLow: "#FCFCFC";
+        readonly surfaceElevatedMid: "#FCFCFC";
+        readonly surfaceElevatedHigh: "#FCFCFC";
+        readonly card: "#FCFCFC";
+        readonly cardForeground: "#121212";
+        readonly foreground: "#121212";
+        readonly muted: "#F4F4F5";
+        readonly mutedForeground: "#71717A";
+        readonly primary: "#1E232D";
+        readonly primaryHover: "#2A303D";
+        readonly primaryForeground: "#FAFAFA";
+        readonly secondary: "#E4E4E7";
+        readonly secondaryForeground: "#1E232D";
+        readonly ring: "#1E232D";
+        readonly point: "#323944";
+        readonly pointHover: "#4A5361";
+        readonly pointForeground: "#FAFAFA";
+        readonly pointSubtle: "rgba(30, 35, 45, 0.08)";
+        readonly border: "#E4E4E7";
+        readonly input: "#E4E4E7";
+        readonly gray50: "#FAFAFA";
+        readonly gray100: "#F4F4F5";
+        readonly gray200: "#E4E4E7";
+        readonly gray300: "#D4D4D8";
+        readonly gray400: "#A1A1AA";
+        readonly gray500: "#71717A";
+        readonly gray600: "#52525B";
+        readonly gray700: "#3F3F46";
+        readonly gray800: "#27272A";
+        readonly gray900: "#18181B";
+        readonly glassBg: "rgba(252, 252, 252, 0.85)";
+        readonly glassBorder: "rgba(18, 18, 18, 0.04)";
+        readonly glassInset: "inset 0 1px 0 rgba(250, 250, 250, 0.6)";
+        readonly glassPanelShadow: "0 12px 40px rgba(18, 18, 18, 0.04), 0 1px 3px rgba(18, 18, 18, 0.02)";
+        readonly accentGlow: "0 0 0 transparent";
+        readonly gradientBrand: "none";
+        readonly gradientBrandHover: "none";
+        readonly gradientSubtle: "none";
+        readonly gradientAccent: "none";
+        readonly gradientAccentVivid: "none";
+        readonly gradientGlow: "none";
+        readonly gradientMesh: "none";
+        readonly gradientSurface: "none";
+        readonly gradientGlowShadow: "none";
+        readonly shadowColor: "rgba(18, 18, 18, 0.05)";
+        readonly success: "#1A4331";
+        readonly successBg: "#EAF1EC";
+        readonly successForeground: "#1A4331";
+        readonly warning: "#8A6D3B";
+        readonly warningBg: "#F7F3EA";
+        readonly warningForeground: "#8A6D3B";
+        readonly error: "#7C2128";
+        readonly errorBg: "#F4EAEB";
+        readonly errorForeground: "#7C2128";
+        readonly info: "#121212";
+        readonly infoBg: "#FAFAFA";
+        readonly infoForeground: "#121212";
+        readonly interactiveHover: "rgba(18, 18, 18, 0.04)";
+        readonly interactivePressed: "rgba(18, 18, 18, 0.08)";
+        readonly interactiveFocus: "#121212";
+        readonly interactiveSurfaceTint: "rgba(18, 18, 18, 0.02)";
+        readonly interactiveHoverTint: "rgba(18, 18, 18, 0.04)";
+        readonly focusGlow: "0 0 0 2px #E4E4E7";
+        readonly pointGlow: "0 0 0 2px rgba(18, 18, 18, 0.15)";
+        readonly btnPrimarySurface: "#1E232D";
+        readonly btnPrimaryHover: "#2A303D";
+        readonly btnPrimaryEnergy: "0 4px 12px rgba(30, 35, 45, 0.16)";
+        readonly btnPrimaryInset: "none";
+        readonly btnSecondarySurface: "#E4E4E7";
+        readonly btnSecondaryHover: "#D4D4D8";
+        readonly btnOutlineBorder: "#E4E4E7";
+        readonly btnOutlineBorderHover: "#D4D4D8";
+        readonly btnOutlineHoverBg: "#F4F4F5";
+        readonly btnGhostHover: "#F4F4F5";
+        readonly btnPointSurface: "#323944";
+        readonly btnPointBorder: "transparent";
+        readonly btnPointHoverSurface: "#4A5361";
+        readonly btnPointHoverBorder: "transparent";
+        readonly btnPointEnergy: "0 4px 12px rgba(50, 57, 68, 0.2)";
+        readonly btnDestructiveSurface: "#7C2128";
+        readonly btnDestructiveHover: "#5B171D";
+        readonly inputBg: "#FCFCFC";
+        readonly inputBorderRest: "#E4E4E7";
+        readonly inputBorderHover: "#A1A1AA";
+        readonly inputHoverGlow: "0 0 0 2px #F4F4F5";
+        readonly inputFocusGlow: "0 0 0 2px #E4E4E7";
+        readonly inputErrorGlow: "0 0 0 2px #F4EAEB";
+        readonly dropdownBg: "#FCFCFC";
+        readonly dropdownShadow: "0 20px 25px -5px rgba(18, 18, 18, 0.08), 0 0 0 1px rgba(18, 18, 18, 0.03)";
+        readonly dropdownItemHover: "#F4F4F5";
+        readonly cardAccentBorder: "#E4E4E7";
+        readonly cardAccentGlow: "none";
+        readonly cardAccentHoverBorder: "#D4D4D8";
+        readonly cardAccentHoverGlow: "0 8px 24px rgba(18, 18, 18, 0.06)";
+    };
+    readonly dark: {
+        readonly background: "#121214";
+        readonly backgroundSubtle: "#18181A";
+        readonly surface: "#27272A";
+        readonly surfaceHover: "#3F3F46";
+        readonly surfaceBase: "#121214";
+        readonly surfaceElevatedLow: "#18181A";
+        readonly surfaceElevatedMid: "#27272A";
+        readonly surfaceElevatedHigh: "#3F3F46";
+        readonly card: "#18181A";
+        readonly cardForeground: "#F4F4F5";
+        readonly foreground: "#F4F4F5";
+        readonly muted: "#27272A";
+        readonly mutedForeground: "#A1A1AA";
+        readonly primary: "#B8C4D9";
+        readonly primaryHover: "#D1DBE8";
+        readonly primaryForeground: "#1E232D";
+        readonly secondary: "#27272A";
+        readonly secondaryForeground: "#B8C4D9";
+        readonly ring: "#B8C4D9";
+        readonly point: "#D1DBE8";
+        readonly pointHover: "#E6ECEF";
+        readonly pointForeground: "#1E232D";
+        readonly pointSubtle: "rgba(209, 219, 232, 0.12)";
+        readonly border: "#3F3F46";
+        readonly input: "#3F3F46";
+        readonly gray50: "#121214";
+        readonly gray100: "#18181A";
+        readonly gray200: "#27272A";
+        readonly gray300: "#3F3F46";
+        readonly gray400: "#52525B";
+        readonly gray500: "#71717A";
+        readonly gray600: "#A1A1AA";
+        readonly gray700: "#D4D4D8";
+        readonly gray800: "#E4E4E7";
+        readonly gray900: "#FAFAFA";
+        readonly glassBg: "rgba(18, 18, 20, 0.85)";
+        readonly glassBorder: "rgba(250, 250, 250, 0.1)";
+        readonly glassInset: "inset 0 1px 0 rgba(250, 250, 250, 0.05)";
+        readonly glassPanelShadow: "0 20px 40px rgba(0, 0, 0, 0.8)";
+        readonly accentGlow: "none";
+        readonly gradientBrand: "none";
+        readonly gradientBrandHover: "none";
+        readonly gradientSubtle: "none";
+        readonly gradientAccent: "none";
+        readonly gradientAccentVivid: "none";
+        readonly gradientGlow: "none";
+        readonly gradientMesh: "none";
+        readonly gradientSurface: "none";
+        readonly gradientGlowShadow: "none";
+        readonly shadowColor: "rgba(0, 0, 0, 0.9)";
+        readonly success: "#34D399";
+        readonly successBg: "rgba(52, 211, 153, 0.15)";
+        readonly successForeground: "#34D399";
+        readonly warning: "#FBBF24";
+        readonly warningBg: "rgba(251, 191, 36, 0.15)";
+        readonly warningForeground: "#FBBF24";
+        readonly error: "#F87171";
+        readonly errorBg: "rgba(248, 113, 113, 0.15)";
+        readonly errorForeground: "#F87171";
+        readonly info: "#FAFAFA";
+        readonly infoBg: "rgba(250, 250, 250, 0.15)";
+        readonly infoForeground: "#FAFAFA";
+        readonly interactiveHover: "rgba(250, 250, 250, 0.08)";
+        readonly interactivePressed: "rgba(250, 250, 250, 0.12)";
+        readonly interactiveFocus: "#FAFAFA";
+        readonly interactiveSurfaceTint: "rgba(250, 250, 250, 0.04)";
+        readonly interactiveHoverTint: "rgba(250, 250, 250, 0.08)";
+        readonly focusGlow: "0 0 0 2px #3F3F46";
+        readonly pointGlow: "0 0 0 2px rgba(250, 250, 250, 0.3)";
+        readonly btnPrimarySurface: "#B8C4D9";
+        readonly btnPrimaryHover: "#D1DBE8";
+        readonly btnPrimaryEnergy: "0 4px 16px rgba(184, 196, 217, 0.25)";
+        readonly btnPrimaryInset: "none";
+        readonly btnSecondarySurface: "#27272A";
+        readonly btnSecondaryHover: "#3F3F46";
+        readonly btnOutlineBorder: "#3F3F46";
+        readonly btnOutlineBorderHover: "#52525B";
+        readonly btnOutlineHoverBg: "#27272A";
+        readonly btnGhostHover: "#27272A";
+        readonly btnPointSurface: "#D1DBE8";
+        readonly btnPointBorder: "transparent";
+        readonly btnPointHoverSurface: "#E6ECEF";
+        readonly btnPointHoverBorder: "transparent";
+        readonly btnPointEnergy: "0 4px 16px rgba(209, 219, 232, 0.25)";
+        readonly btnDestructiveSurface: "#7C2128";
+        readonly btnDestructiveHover: "#9A2A32";
+        readonly inputBg: "#18181A";
+        readonly inputBorderRest: "#3F3F46";
+        readonly inputBorderHover: "#52525B";
+        readonly inputHoverGlow: "0 0 0 2px #27272A";
+        readonly inputFocusGlow: "0 0 0 2px #3F3F46";
+        readonly inputErrorGlow: "0 0 0 2px #3E1014";
+        readonly dropdownBg: "#18181A";
+        readonly dropdownShadow: "0 20px 25px -5px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(250,250,250,0.1)";
+        readonly dropdownItemHover: "#27272A";
+        readonly cardAccentBorder: "#3F3F46";
+        readonly cardAccentGlow: "none";
+        readonly cardAccentHoverBorder: "#52525B";
+        readonly cardAccentHoverGlow: "0 8px 24px rgba(0, 0, 0, 0.8)";
+    };
+};
+
+/**
+ * Component-specific tokens — Tac UI brand.
+ * Increased padding for airy feel, softer radii.
+ */
+declare const component: {
+    readonly button: {
+        readonly sm: {
+            readonly height: 34;
+            readonly paddingX: 18;
+            readonly paddingY: 8;
+            readonly fontSize: 12;
+            readonly borderRadius: 8;
+            readonly iconSize: 16;
+        };
+        readonly md: {
+            readonly height: 42;
+            readonly paddingX: 28;
+            readonly paddingY: 12;
+            readonly fontSize: 13;
+            readonly borderRadius: 10;
+            readonly iconSize: 18;
+        };
+        readonly lg: {
+            readonly height: 50;
+            readonly paddingX: 36;
+            readonly paddingY: 16;
+            readonly fontSize: 15;
+            readonly borderRadius: 14;
+            readonly iconSize: 20;
+        };
+    };
+    readonly input: {
+        readonly height: 42;
+        readonly paddingX: 18;
+        readonly paddingY: 12;
+        readonly fontSize: 14;
+        readonly borderRadius: 10;
+        readonly iconSize: 18;
+        readonly iconPadding: 42;
+    };
+    readonly card: {
+        readonly padding: 28;
+        readonly gap: 20;
+        readonly borderRadius: 16;
+        readonly titleSize: 17;
+        readonly bodySize: 14;
+    };
+    readonly badge: {
+        readonly paddingX: 12;
+        readonly paddingY: 6;
+        readonly fontSize: 12;
+        readonly fontWeight: 500;
+        readonly borderRadius: 9999;
+    };
+    readonly checkbox: {
+        readonly wrapperPaddingX: 16;
+        readonly wrapperPaddingY: 10;
+        readonly wrapperRadius: 10;
+        readonly gap: 12;
+        readonly size: 20;
+        readonly borderRadius: 6;
+        readonly borderWidth: 2;
+        readonly iconSize: 14;
+        readonly labelSize: 14;
+    };
+    readonly radio: {
+        readonly wrapperPaddingX: 16;
+        readonly wrapperPaddingY: 10;
+        readonly wrapperRadius: 10;
+        readonly gap: 12;
+        readonly size: 20;
+        readonly borderWidth: 2;
+        readonly checkedBorderWidth: 6;
+        readonly labelSize: 14;
+    };
+    readonly switch: {
+        readonly width: 52;
+        readonly height: 32;
+        readonly thumbSize: 24;
+        readonly thumbOffset: 4;
+        readonly thumbTranslateOn: 24;
+        readonly thumbTranslateOff: 4;
+    };
+    readonly chip: {
+        readonly paddingX: 16;
+        readonly paddingY: 8;
+        readonly fontSize: 13;
+        readonly borderRadius: 9999;
+        readonly iconSize: 14;
+        readonly iconPaddingX: 12;
+    };
+    readonly tabs: {
+        readonly primary: {
+            readonly paddingX: 20;
+            readonly paddingY: 12;
+            readonly fontSize: 14;
+            readonly indicatorHeight: 2;
+        };
+        readonly secondary: {
+            readonly paddingX: 20;
+            readonly paddingY: 8;
+            readonly fontSize: 13;
+            readonly containerPadding: 4;
+            readonly containerRadius: 14;
+            readonly itemRadius: 10;
+        };
+    };
+    readonly slider: {
+        readonly trackHeight: 6;
+        readonly thumbSize: 20;
+        readonly thumbBorderWidth: 2;
+    };
+    readonly tooltip: {
+        readonly simple: {
+            readonly paddingX: 14;
+            readonly paddingY: 8;
+            readonly fontSize: 13;
+            readonly borderRadius: 10;
+        };
+        readonly rich: {
+            readonly paddingX: 16;
+            readonly paddingY: 10;
+            readonly maxWidth: 240;
+            readonly borderRadius: 10;
+        };
+        readonly delay: 150;
+    };
+    readonly avatar: {
+        readonly sm: {
+            readonly size: 28;
+            readonly fontSize: 11;
+        };
+        readonly md: {
+            readonly size: 36;
+            readonly fontSize: 14;
+        };
+        readonly lg: {
+            readonly size: 48;
+            readonly fontSize: 18;
+        };
+        readonly xl: {
+            readonly size: 64;
+            readonly fontSize: 24;
+        };
+        readonly statusDot: 10;
+        readonly statusBorder: 2;
+    };
+    readonly divider: {
+        readonly thickness: 1;
+        readonly thickThickness: 8;
+        readonly insetMargin: 64;
+        readonly labelSize: 12;
+    };
+    readonly progress: {
+        readonly linear: {
+            readonly height: 8;
+            readonly borderRadius: 9999;
+        };
+        readonly circular: {
+            readonly strokeWidth: 4;
+            readonly textSize: 14;
+        };
+    };
+    readonly snackbar: {
+        readonly paddingTop: 16;
+        readonly paddingRight: 18;
+        readonly paddingBottom: 16;
+        readonly paddingLeft: 22;
+        readonly borderRadius: 14;
+        readonly gap: 12;
+        readonly iconSize: 18;
+        readonly messageSize: 14;
+        readonly actionPaddingX: 14;
+        readonly actionPaddingY: 6;
+        readonly actionRadius: 8;
+        readonly actionSize: 13;
+    };
+    readonly dialog: {
+        readonly width: 380;
+        readonly borderRadius: 20;
+        readonly headerPaddingX: 28;
+        readonly headerPaddingY: 24;
+        readonly footerPaddingX: 28;
+        readonly footerPaddingY: 20;
+        readonly titleSize: 17;
+        readonly descSize: 14;
+        readonly footerGap: 14;
+    };
+    readonly animatedToggle: {
+        readonly size: 40;
+        readonly borderRadius: 10;
+        readonly iconSize: 20;
+    };
+};
+
+declare const typography: {
+    readonly fontFamily: {
+        readonly primary: "Pretendard";
+        readonly secondary: "Pretendard";
+        readonly display: "Pretendard";
+    };
+    readonly display: {
+        readonly lg: {
+            readonly size: 56;
+            readonly weight: 700;
+            readonly lineHeight: 1.12;
+            readonly letterSpacing: -0.03;
+        };
+        readonly md: {
+            readonly size: 48;
+            readonly weight: 700;
+            readonly lineHeight: 1.12;
+            readonly letterSpacing: -0.025;
+        };
+        readonly sm: {
+            readonly size: 40;
+            readonly weight: 600;
+            readonly lineHeight: 1.15;
+            readonly letterSpacing: -0.02;
+        };
+    };
+    readonly heading: {
+        readonly h1: {
+            readonly size: 32;
+            readonly weight: 700;
+            readonly lineHeight: 1.2;
+            readonly letterSpacing: -0.025;
+        };
+        readonly h2: {
+            readonly size: 28;
+            readonly weight: 600;
+            readonly lineHeight: 1.22;
+            readonly letterSpacing: -0.02;
+        };
+        readonly h3: {
+            readonly size: 24;
+            readonly weight: 600;
+            readonly lineHeight: 1.25;
+            readonly letterSpacing: -0.015;
+        };
+        readonly h4: {
+            readonly size: 20;
+            readonly weight: 500;
+            readonly lineHeight: 1.3;
+            readonly letterSpacing: -0.01;
+        };
+        readonly h5: {
+            readonly size: 16;
+            readonly weight: 500;
+            readonly lineHeight: 1.35;
+            readonly letterSpacing: -0.005;
+        };
+        readonly h6: {
+            readonly size: 14;
+            readonly weight: 500;
+            readonly lineHeight: 1.4;
+            readonly letterSpacing: 0;
+        };
+    };
+    readonly body: {
+        readonly lg: {
+            readonly size: 17;
+            readonly weight: 400;
+            readonly lineHeight: 1.65;
+            readonly letterSpacing: -0.01;
+        };
+        readonly md: {
+            readonly size: 15;
+            readonly weight: 400;
+            readonly lineHeight: 1.6;
+            readonly letterSpacing: -0.005;
+        };
+        readonly sm: {
+            readonly size: 13;
+            readonly weight: 400;
+            readonly lineHeight: 1.55;
+            readonly letterSpacing: 0;
+        };
+    };
+    readonly caption: {
+        readonly size: 11;
+        readonly weight: 400;
+        readonly lineHeight: 1.5;
+        readonly letterSpacing: 0.01;
+    };
+    readonly fontWeight: {
+        readonly light: "300";
+        readonly regular: "400";
+        readonly medium: "500";
+        readonly semibold: "600";
+        readonly bold: "700";
+    };
+};
+
+declare const spacing: {
+    readonly '2xs': 2;
+    readonly xs: 4;
+    readonly sm: 8;
+    readonly m: 16;
+    readonly lg: 24;
+    readonly xl: 40;
+    readonly '2xl': 56;
+    readonly '3xl': 80;
+};
+declare const radius: {
+    readonly none: 0;
+    readonly xs: 4;
+    readonly sm: 6;
+    readonly m: 10;
+    readonly lg: 14;
+    readonly xl: 20;
+    readonly '2xl': 24;
+    readonly pill: 9999;
+};
+declare const breakpoints: {
+    readonly sm: 640;
+    readonly md: 768;
+    readonly lg: 1024;
+    readonly xl: 1280;
+    readonly '2xl': 1536;
+};
+declare const grid: {
+    readonly columns: 12;
+    readonly gutter: 20;
+    readonly margin: {
+        readonly mobile: 20;
+        readonly tablet: 32;
+        readonly desktop: 40;
+    };
+};
+declare const containers: {
+    readonly sm: 640;
+    readonly md: 768;
+    readonly lg: 1024;
+    readonly xl: 1280;
+};
+
+declare const elevation: {
+    readonly light: {
+        readonly sm: "0 1px 2px rgba(94,94,94,0.04), 0 1px 3px rgba(94,94,94,0.02)";
+        readonly m: "0 2px 4px rgba(94,94,94,0.04), 0 8px 16px rgba(94,94,94,0.04)";
+        readonly lg: "0 4px 8px rgba(94,94,94,0.05), 0 16px 32px rgba(94,94,94,0.06)";
+        readonly xl: "0 8px 16px rgba(94,94,94,0.06), 0 24px 48px rgba(94,94,94,0.08)";
+        readonly glass: "0 4px 24px rgba(94,94,94,0.05), 0 1px 2px rgba(94,94,94,0.02)";
+        readonly glassLg: "0 8px 32px rgba(94,94,94,0.08), 0 2px 4px rgba(94,94,94,0.03)";
+    };
+    readonly dark: {
+        readonly sm: "0 1px 2px rgba(0,0,0,0.20), 0 1px 3px rgba(0,0,0,0.14)";
+        readonly m: "0 1px 4px rgba(0,0,0,0.20), 0 4px 12px rgba(0,0,0,0.16)";
+        readonly lg: "0 2px 8px rgba(0,0,0,0.20), 0 8px 24px rgba(0,0,0,0.18)";
+        readonly xl: "0 4px 12px rgba(0,0,0,0.22), 0 12px 32px rgba(0,0,0,0.20)";
+        readonly glass: "0 2px 12px rgba(0,0,0,0.18), 0 1px 2px rgba(0,0,0,0.12), 0 0 0 0.5px rgba(255,255,255,0.06)";
+        readonly glassLg: "0 4px 20px rgba(0,0,0,0.20), 0 2px 4px rgba(0,0,0,0.12), 0 0 16px rgba(138,163,184,0.03)";
+    };
+};
+/** @deprecated Use elevation.light instead */
+declare const elevationLight: {
+    readonly sm: "0 1px 2px rgba(94,94,94,0.04), 0 1px 3px rgba(94,94,94,0.02)";
+    readonly m: "0 2px 4px rgba(94,94,94,0.04), 0 8px 16px rgba(94,94,94,0.04)";
+    readonly lg: "0 4px 8px rgba(94,94,94,0.05), 0 16px 32px rgba(94,94,94,0.06)";
+    readonly xl: "0 8px 16px rgba(94,94,94,0.06), 0 24px 48px rgba(94,94,94,0.08)";
+    readonly glass: "0 4px 24px rgba(94,94,94,0.05), 0 1px 2px rgba(94,94,94,0.02)";
+    readonly glassLg: "0 8px 32px rgba(94,94,94,0.08), 0 2px 4px rgba(94,94,94,0.03)";
+};
+declare const zIndex: {
+    readonly hide: -1;
+    readonly base: 0;
+    readonly dropdown: 1000;
+    readonly sticky: 1100;
+    readonly overlay: 1200;
+    readonly modal: 1300;
+    readonly popover: 1400;
+    readonly tooltip: 1500;
+    readonly toast: 1600;
+};
+
+declare const motion: {
+    readonly duration: {
+        readonly instant: 80;
+        readonly fast: 150;
+        readonly normal: 220;
+        readonly slow: 320;
+        readonly complex: 450;
+    };
+    readonly easing: {
+        /** Dia's signature curve — slight overshoot with smooth natural deceleration. */
+        readonly standard: "cubic-bezier(0.22, 1, 0.36, 1)";
+        /** Exit easing — fast acceleration, abrupt departure. */
+        readonly easeIn: "cubic-bezier(0.55, 0, 1, 0.45)";
+        /** Entrance easing — gentle deceleration without overshoot. */
+        readonly easeOut: "cubic-bezier(0, 0.55, 0.45, 1)";
+        /** Symmetric ease — smooth in both directions. */
+        readonly easeInOut: "cubic-bezier(0.65, 0, 0.35, 1)";
+        /** Playful overshoot — for toggles, switches, confirmatory feedback. */
+        readonly bounce: "cubic-bezier(0.34, 1.56, 0.64, 1)";
+        /** Stronger spring feel — deliberate physical presence. */
+        readonly spring: "cubic-bezier(0.22, 1.2, 0.36, 1)";
+        /** Subtle rubber-band — elastic resistance with quick snap back. */
+        readonly elastic: "cubic-bezier(0.68, -0.2, 0.265, 1.2)";
+    };
+    /** Framer Motion spring presets calibrated for Dia-style organic feel. */
+    readonly spring: {
+        /** Quick interactive feedback — subtle and responsive. */
+        readonly snappy: {
+            readonly type: "spring";
+            readonly stiffness: 260;
+            readonly damping: 28;
+        };
+        /** Smooth state changes — gentle spring resolution. */
+        readonly gentle: {
+            readonly type: "spring";
+            readonly stiffness: 180;
+            readonly damping: 26;
+        };
+        /** Toggle/switch feel — restrained with minimal bounce. */
+        readonly bouncy: {
+            readonly type: "spring";
+            readonly stiffness: 260;
+            readonly damping: 24;
+        };
+        /** Large layout shifts — deliberate mass with controlled deceleration. */
+        readonly slow: {
+            readonly type: "spring";
+            readonly stiffness: 140;
+            readonly damping: 24;
+        };
+        /** Press/release with life — elastic resistance, mass gives it weight. */
+        readonly elastic: {
+            readonly type: "spring";
+            readonly stiffness: 220;
+            readonly damping: 22;
+            readonly mass: 0.8;
+        };
+        /** Elements appearing — spring resolves cleanly with organic arrival. */
+        readonly entrance: {
+            readonly type: "spring";
+            readonly stiffness: 180;
+            readonly damping: 24;
+            readonly mass: 0.9;
+        };
+    };
+    /** Mass-differentiated spring configs for Dia Browser-like physics interactions. */
+    readonly diaSpring: {
+        readonly default: {
+            readonly type: "spring";
+            readonly stiffness: 260;
+            readonly damping: 34;
+            readonly mass: 1;
+        };
+        readonly light: {
+            readonly type: "spring";
+            readonly stiffness: 260;
+            readonly damping: 34;
+            readonly mass: 0.5;
+        };
+        readonly heavy: {
+            readonly type: "spring";
+            readonly stiffness: 220;
+            readonly damping: 32;
+            readonly mass: 1.5;
+        };
+        readonly magnetic: {
+            readonly type: "spring";
+            readonly stiffness: 340;
+            readonly damping: 38;
+            readonly mass: 0.8;
+        };
+        readonly entrance: {
+            readonly type: "spring";
+            readonly stiffness: 180;
+            readonly damping: 28;
+            readonly mass: 1.2;
+        };
+    };
+    /** Standard animation keyframe presets for reuse across components. */
+    readonly keyframes: {
+        readonly fadeIn: {
+            readonly from: {
+                readonly opacity: "0";
+            };
+            readonly to: {
+                readonly opacity: "1";
+            };
+        };
+        readonly fadeOut: {
+            readonly from: {
+                readonly opacity: "1";
+            };
+            readonly to: {
+                readonly opacity: "0";
+            };
+        };
+        /** Blur entrance — element fades in from blurry with subtle upward spring motion. */
+        readonly blurFadeIn: {
+            readonly from: {
+                readonly opacity: "0";
+                readonly filter: "blur(4px)";
+                readonly transform: "translateY(4px)";
+            };
+            readonly to: {
+                readonly opacity: "1";
+                readonly filter: "blur(0px)";
+                readonly transform: "translateY(0)";
+            };
+        };
+        /** Blur scale entrance — deblurs while gently scaling up from slight compression. */
+        readonly blurScaleIn: {
+            readonly from: {
+                readonly opacity: "0";
+                readonly filter: "blur(3px)";
+                readonly transform: "scale(0.98)";
+            };
+            readonly to: {
+                readonly opacity: "1";
+                readonly filter: "blur(0px)";
+                readonly transform: "scale(1)";
+            };
+        };
+        /** Slide entrance from below — element springs up from offset position. */
+        readonly slideInUp: {
+            readonly from: {
+                readonly opacity: "0";
+                readonly transform: "translateY(5px)";
+            };
+            readonly to: {
+                readonly opacity: "1";
+                readonly transform: "translateY(0)";
+            };
+        };
+        /** Slide entrance from above — element springs down from offset position. */
+        readonly slideInDown: {
+            readonly from: {
+                readonly opacity: "0";
+                readonly transform: "translateY(-5px)";
+            };
+            readonly to: {
+                readonly opacity: "1";
+                readonly transform: "translateY(0)";
+            };
+        };
+        /** Slide entrance from left — element springs in from offset. */
+        readonly slideInLeft: {
+            readonly from: {
+                readonly opacity: "0";
+                readonly transform: "translateX(-5px)";
+            };
+            readonly to: {
+                readonly opacity: "1";
+                readonly transform: "translateX(0)";
+            };
+        };
+        /** Slide entrance from right — element springs in from offset. */
+        readonly slideInRight: {
+            readonly from: {
+                readonly opacity: "0";
+                readonly transform: "translateX(5px)";
+            };
+            readonly to: {
+                readonly opacity: "1";
+                readonly transform: "translateX(0)";
+            };
+        };
+        /** Scale entrance — element inflates from slight compression. */
+        readonly scaleIn: {
+            readonly from: {
+                readonly opacity: "0";
+                readonly transform: "scale(0.98)";
+            };
+            readonly to: {
+                readonly opacity: "1";
+                readonly transform: "scale(1)";
+            };
+        };
+        readonly scaleOut: {
+            readonly from: {
+                readonly opacity: "1";
+                readonly transform: "scale(1)";
+            };
+            readonly to: {
+                readonly opacity: "0";
+                readonly transform: "scale(0.98)";
+            };
+        };
+        /** Zoom entrance — element arrives from meaningful distance, not just nearby. */
+        readonly zoomIn: {
+            readonly from: {
+                readonly opacity: "0";
+                readonly transform: "scale(0.92)";
+            };
+            readonly to: {
+                readonly opacity: "1";
+                readonly transform: "scale(1)";
+            };
+        };
+        /** Press feedback — subtle scale to confirm tap/click with physical weight. */
+        readonly pressDown: {
+            readonly from: {
+                readonly transform: "scale(1)";
+            };
+            readonly to: {
+                readonly transform: "scale(0.98)";
+            };
+        };
+        /** Press keyframes — clean squish held at destination. */
+        readonly elasticPress: {
+            readonly '0%': {
+                readonly transform: "scale(1)";
+            };
+            readonly '50%': {
+                readonly transform: "scale(0.98)";
+            };
+            readonly '100%': {
+                readonly transform: "scale(0.98)";
+            };
+        };
+        /** Release keyframes — spring overshoots slightly then resolves to rest. */
+        readonly elasticRelease: {
+            readonly '0%': {
+                readonly transform: "scale(0.98)";
+            };
+            readonly '50%': {
+                readonly transform: "scale(1.005)";
+            };
+            readonly '100%': {
+                readonly transform: "scale(1)";
+            };
+        };
+        /** Lift — subtle elevation shift on hover, element has mass. */
+        readonly liftUp: {
+            readonly from: {
+                readonly transform: "translateY(0)";
+            };
+            readonly to: {
+                readonly transform: "translateY(-1px)";
+            };
+        };
+        /** Glow pulse — ambient glow to indicate active state. */
+        readonly glowPulse: {
+            readonly '0%, 100%': {
+                readonly boxShadow: "0 0 0 0 color-mix(in srgb, var(--point) 0%, transparent)";
+            };
+            readonly '50%': {
+                readonly boxShadow: "0 0 12px 2px color-mix(in srgb, var(--point) 20%, transparent)";
+            };
+        };
+        readonly shimmer: {
+            readonly '0%': {
+                readonly backgroundPosition: "-200% 0";
+            };
+            readonly '100%': {
+                readonly backgroundPosition: "200% 0";
+            };
+        };
+        readonly gradientShimmer: {
+            readonly '0%': {
+                readonly backgroundPosition: "0% 50%";
+            };
+            readonly '50%': {
+                readonly backgroundPosition: "100% 50%";
+            };
+            readonly '100%': {
+                readonly backgroundPosition: "0% 50%";
+            };
+        };
+        /** Gradient glow — soft glow for decorative emphasis. */
+        readonly gradientGlow: {
+            readonly '0%, 100%': {
+                readonly boxShadow: "0 0 0 0 color-mix(in srgb, var(--point) 0%, transparent)";
+            };
+            readonly '50%': {
+                readonly boxShadow: "0 0 16px 3px color-mix(in srgb, var(--point) 15%, transparent)";
+            };
+        };
+        /** Spotlight pulse — radial glow that breathes gently. */
+        readonly spotlightPulse: {
+            readonly '0%, 100%': {
+                readonly opacity: "0";
+            };
+            readonly '50%': {
+                readonly opacity: "1";
+            };
+        };
+        readonly spin: {
+            readonly from: {
+                readonly transform: "rotate(0deg)";
+            };
+            readonly to: {
+                readonly transform: "rotate(360deg)";
+            };
+        };
+        readonly pulse: {
+            readonly '0%, 100%': {
+                readonly opacity: "1";
+            };
+            readonly '50%': {
+                readonly opacity: "0.5";
+            };
+        };
+        readonly bounce: {
+            readonly '0%, 100%': {
+                readonly transform: "translateY(0)";
+            };
+            readonly '50%': {
+                readonly transform: "translateY(-2px)";
+            };
+        };
+        /** Float — gentle hovering motion with spring-like rhythm. */
+        readonly float: {
+            readonly '0%, 100%': {
+                readonly transform: "translateY(0)";
+            };
+            readonly '50%': {
+                readonly transform: "translateY(-2px)";
+            };
+        };
+    };
+    /** Glow animation configuration for border glow effects. */
+    readonly glow: {
+        /** Rotation speed in seconds for the border glow sweep. */
+        readonly rotationSpeed: {
+            readonly idle: 3;
+            readonly focused: 1.5;
+        };
+        /** Blur radius in px applied to the glow trail. */
+        readonly blur: {
+            readonly idle: 8;
+            readonly focused: 16;
+        };
+        /** Opacity of the glow sweep. */
+        readonly opacity: {
+            readonly idle: 0.3;
+            readonly focused: 0.6;
+        };
+        /** Conic gradient color stop percentages. */
+        readonly spread: {
+            readonly transparent: 25;
+            readonly start: 40;
+            readonly peak: 50;
+            readonly end: 60;
+            readonly fadeOut: 75;
+        };
+    };
+    /** Layout morphing spring config — for FLIP transitions between components. */
+    readonly morph: {
+        /** Spring config for morph transitions — references diaSpring.default. */
+        readonly spring: {
+            readonly type: "spring";
+            readonly stiffness: 260;
+            readonly damping: 34;
+            readonly mass: 1;
+        };
+        /** Faster variant for small elements. */
+        readonly springFast: {
+            readonly type: "spring";
+            readonly stiffness: 400;
+            readonly damping: 35;
+            readonly mass: 0.8;
+        };
+    };
+};
+/** Standalone export of Dia spring presets for direct consumption in packages/web. */
+declare const diaSpring: {
+    readonly default: {
+        readonly type: "spring";
+        readonly stiffness: 260;
+        readonly damping: 34;
+        readonly mass: 1;
+    };
+    readonly light: {
+        readonly type: "spring";
+        readonly stiffness: 260;
+        readonly damping: 34;
+        readonly mass: 0.5;
+    };
+    readonly heavy: {
+        readonly type: "spring";
+        readonly stiffness: 220;
+        readonly damping: 32;
+        readonly mass: 1.5;
+    };
+    readonly magnetic: {
+        readonly type: "spring";
+        readonly stiffness: 340;
+        readonly damping: 38;
+        readonly mass: 0.8;
+    };
+    readonly entrance: {
+        readonly type: "spring";
+        readonly stiffness: 180;
+        readonly damping: 28;
+        readonly mass: 1.2;
+    };
+};
+
+declare const chart: {
+    readonly light: {
+        readonly colors: ["#1E232D", "#323944", "#4A5361", "#71717A", "#A1A1AA", "#D4D4D8", "#0F172A", "#E4E4E7"];
+        readonly grid: "rgba(30, 35, 45, 0.04)";
+        readonly axis: "rgba(30, 35, 45, 0.08)";
+        readonly label: "#71717A";
+        readonly tooltipBg: "#FFFFFF";
+    };
+    readonly dark: {
+        readonly colors: ["#B8C4D9", "#D1DBE8", "#E6ECEF", "#A1A1AA", "#71717A", "#808B9D", "#FFFFFF", "#52525B"];
+        readonly grid: "rgba(255, 255, 255, 0.04)";
+        readonly axis: "rgba(255, 255, 255, 0.06)";
+        readonly label: "#A1A1AA";
+        readonly tooltipBg: "#18181A";
+    };
+    readonly lineWidth: 1.5;
+    readonly dotSize: 2.5;
+    readonly barRadius: 4;
+    readonly areaOpacity: 0.08;
+};
+
+/**
+ * CSS unit conversion utilities for token → CSS variable generation.
+ */
+/** Converts a pixel number to a rem string (base 16px). */
+declare function rem(v: number): string;
+/** Converts a number to a px string. */
+declare function px(v: number): string;
+/** Converts a number to a milliseconds string. */
+declare function ms(v: number): string;
+/** Returns the number as a unitless CSS string. */
+declare function unitless(v: number): string;
+
+export { breakpoints, chart, component, containers, diaSpring, elevation, elevationLight, grid, motion, ms, primitiveColors, px, radius, rem, semanticTokens, spacing, typography, unitless, zIndex };