@tac-ui/tokens 0.1.0 → 1.0.0

package/dist/index.js

@@ -3,129 +3,95 @@
 // src/primitive.ts
 var primitiveColors = {
   white: "#FFFFFF",
-  // Pantone 11-0601 TCX
   black: "#000000",
-  // Pure Black
   gray: {
-    50: "#F5F5F6",
-    // Cool Gray 1 U
-    100: "#E6E7E8",
-    // Cool Gray 2 C
-    200: "#D1D3D4",
-    // Cool Gray 3 C
-    300: "#BCBEC0",
-    // Cool Gray 4 C
-    400: "#A7A9AC",
-    // Cool Gray 5 C
-    500: "#808285",
-    // Cool Gray 7 C
-    600: "#6D6E71",
-    // Cool Gray 8 C
-    700: "#58595B",
-    // Cool Gray 9 C
-    800: "#414042",
-    // Cool Gray 11 C
-    900: "#2D2A26",
-    // Pantone Black C
-    950: "#101820"
-    // Pantone Black 6 C
+    50: "#FAFAFA",
+    100: "#F4F4F5",
+    200: "#E4E4E7",
+    300: "#D4D4D8",
+    400: "#A1A1AA",
+    500: "#71717A",
+    600: "#52525B",
+    700: "#3F3F46",
+    800: "#27272A",
+    900: "#18181B",
+    950: "#09090B"
   },
   warmGray: {
     50: "#F6F5F3",
     100: "#E5E1E0",
-    // Warm Gray 1 C
     200: "#D7D2CB",
-    // Warm Gray 2 C
     300: "#BFB8AF",
-    // Warm Gray 3 C
     400: "#ACA39A",
-    // Warm Gray 5 C
     500: "#968C83",
-    // Warm Gray 7 C
     600: "#83786F",
-    // Warm Gray 8 C
     700: "#6E6259",
-    // Warm Gray 10 C
     800: "#5C5146",
-    // Warm Gray 11 C
     900: "#4A4138"
   },
   status: {
-    success: "#1A4331",
-    // Pantone 343 C
-    successLight: "#EAF1EC",
-    warning: "#8A6D3B",
-    // Pantone 117 C
-    warningLight: "#F7F3EA",
-    error: "#7C2128",
-    // Pantone 188 C
-    errorLight: "#F4EAEB"
+    success: "#166534",
+    successLight: "#DCFCE7",
+    warning: "#854D0E",
+    warningLight: "#FEF9C3",
+    error: "#991B1B",
+    errorLight: "#FEE2E2"
   },
   dark: {
-    bg: "#101820",
-    // Black 6 C
-    bgSubtle: "#1A1C20",
-    surface: "#1A1C20",
-    surfaceHover: "#22252A",
-    border: "#2D2A26",
-    // Black C
-    muted: "#1A1C20",
-    mutedFg: "#808285"
-    // Cool Gray 7 C
+    bg: "#09090B",
+    bgSubtle: "#18181B",
+    surface: "#18181B",
+    surfaceHover: "#27272A",
+    border: "#27272A",
+    muted: "#18181B",
+    mutedFg: "#71717A"
   },
   glass: {
-    bg: "rgba(16, 24, 32, 0.8)",
-    bgHover: "rgba(16, 24, 32, 0.9)",
+    bg: "rgba(9, 9, 11, 0.8)",
+    bgHover: "rgba(9, 9, 11, 0.9)",
     border: "rgba(255, 255, 255, 0.05)",
     borderHover: "rgba(255, 255, 255, 0.1)",
     lightBg: "rgba(255, 255, 255, 0.8)",
     lightBgHover: "rgba(255, 255, 255, 0.9)",
-    lightBorder: "rgba(16, 24, 32, 0.04)",
-    lightBorderHover: "rgba(16, 24, 32, 0.08)"
+    lightBorder: "rgba(24, 24, 27, 0.04)",
+    lightBorderHover: "rgba(24, 24, 27, 0.08)"
   }
 };
 
 // src/semantic.ts
 var semanticTokens = {
   light: {
-    // ── Canvas & Surface (Off-white paper base) ──
+    // ── Canvas & Surface ──
     background: "#FAFAFA",
-    // Off-white base
     backgroundSubtle: "#F4F4F5",
-    // Slightly darker gray
-    surface: "#FCFCFC",
-    // Just faintly off-white surface
+    surface: "#FFFFFF",
     surfaceHover: "#F4F4F5",
     surfaceBase: "#FAFAFA",
-    surfaceElevatedLow: "#FCFCFC",
-    surfaceElevatedMid: "#FCFCFC",
-    surfaceElevatedHigh: "#FCFCFC",
-    card: "#FCFCFC",
-    cardForeground: "#121212",
-    // Barely off-black
+    surfaceElevatedLow: "#FFFFFF",
+    surfaceElevatedMid: "#FFFFFF",
+    surfaceElevatedHigh: "#FFFFFF",
+    card: "#FFFFFF",
+    cardForeground: "#18181B",
     // ── Text ──
-    foreground: "#121212",
+    foreground: "#18181B",
     muted: "#F4F4F5",
     mutedForeground: "#71717A",
-    // ── Brand ──
-    primary: "#1E232D",
-    // Iron Navy
-    primaryHover: "#2A303D",
-    // Slightly lighter for hover
-    primaryForeground: "#FAFAFA",
-    secondary: "#E4E4E7",
-    // Darkened from F4F4F5 for better visibility
-    secondaryForeground: "#1E232D",
-    ring: "#1E232D",
-    // ── Point / Accent (Steel Navy) ──
-    point: "#323944",
-    pointHover: "#4A5361",
-    pointForeground: "#FAFAFA",
-    pointSubtle: "rgba(30, 35, 45, 0.08)",
+    // ── Brand (Ink Black) ──
+    primary: "#18181B",
+    primaryHover: "#27272A",
+    primaryForeground: "#FFFFFF",
+    secondary: "#F4F4F5",
+    secondaryForeground: "#18181B",
+    ring: "#18181B",
+    // ── Point / Accent (Royal Indigo) ──
+    point: "#5856D6",
+    pointHover: "#4B49B8",
+    pointForeground: "#FFFFFF",
+    pointSubtle: "rgba(88, 86, 214, 0.1)",
     // ── Border ──
     border: "#E4E4E7",
     input: "#E4E4E7",
-    // ── Gray Scale ──
+    // ── Gray Scale (Zinc) ──
     gray50: "#FAFAFA",
     gray100: "#F4F4F5",
     gray200: "#E4E4E7",
@@ -137,11 +103,11 @@ var semanticTokens = {
     gray800: "#27272A",
     gray900: "#18181B",
     // ── Glass & Effects ──
-    glassBg: "rgba(252, 252, 252, 0.85)",
-    glassBorder: "rgba(18, 18, 18, 0.04)",
-    glassInset: "inset 0 1px 0 rgba(250, 250, 250, 0.6)",
-    glassPanelShadow: "0 12px 40px rgba(18, 18, 18, 0.04), 0 1px 3px rgba(18, 18, 18, 0.02)",
-    accentGlow: "0 0 0 transparent",
+    glassBg: "rgba(255, 255, 255, 0.85)",
+    glassBorder: "rgba(24, 24, 27, 0.04)",
+    glassInset: "inset 0 1px 0 rgba(255, 255, 255, 0.6)",
+    glassPanelShadow: "0 12px 40px rgba(24, 24, 27, 0.04), 0 1px 3px rgba(24, 24, 27, 0.02)",
+    accentGlow: "none",
     // ── Gradients ──
     gradientBrand: "none",
     gradientBrandHover: "none",
@@ -153,105 +119,94 @@ var semanticTokens = {
     gradientSurface: "none",
     gradientGlowShadow: "none",
     // ── Shadow ──
-    shadowColor: "rgba(18, 18, 18, 0.05)",
+    shadowColor: "rgba(24, 24, 27, 0.05)",
     // ── Status ──
-    success: "#1A4331",
-    successBg: "#EAF1EC",
-    successForeground: "#1A4331",
-    warning: "#8A6D3B",
-    warningBg: "#F7F3EA",
-    warningForeground: "#8A6D3B",
-    error: "#7C2128",
-    errorBg: "#F4EAEB",
-    errorForeground: "#7C2128",
-    info: "#121212",
-    infoBg: "#FAFAFA",
-    infoForeground: "#121212",
+    success: "#166534",
+    successBg: "#DCFCE7",
+    successForeground: "#166534",
+    warning: "#854D0E",
+    warningBg: "#FEF9C3",
+    warningForeground: "#854D0E",
+    error: "#991B1B",
+    errorBg: "#FEE2E2",
+    errorForeground: "#991B1B",
+    info: "#18181B",
+    infoBg: "#F4F4F5",
+    infoForeground: "#18181B",
     // ── Interaction States ──
-    interactiveHover: "rgba(18, 18, 18, 0.04)",
-    interactivePressed: "rgba(18, 18, 18, 0.08)",
-    interactiveFocus: "#121212",
-    interactiveSurfaceTint: "rgba(18, 18, 18, 0.02)",
-    interactiveHoverTint: "rgba(18, 18, 18, 0.04)",
-    focusGlow: "0 0 0 2px #E4E4E7",
-    pointGlow: "0 0 0 2px rgba(18, 18, 18, 0.15)",
+    interactiveHover: "rgba(24, 24, 27, 0.04)",
+    interactivePressed: "rgba(24, 24, 27, 0.08)",
+    interactiveFocus: "#18181B",
+    interactiveSurfaceTint: "rgba(0, 0, 0, 0.02)",
+    interactiveHoverTint: "rgba(0, 0, 0, 0.04)",
+    focusGlow: "0 0 0 3px rgba(24, 24, 27, 0.1)",
+    pointGlow: "0 0 0 2px rgba(88, 86, 214, 0.2)",
     // ── Components ──
-    btnPrimarySurface: "#1E232D",
-    btnPrimaryHover: "#2A303D",
-    btnPrimaryEnergy: "0 4px 12px rgba(30, 35, 45, 0.16)",
+    btnPrimarySurface: "#18181B",
+    btnPrimaryHover: "#27272A",
+    btnPrimaryEnergy: "0 4px 12px rgba(24, 24, 27, 0.15)",
     btnPrimaryInset: "none",
-    btnSecondarySurface: "#E4E4E7",
-    btnSecondaryHover: "#D4D4D8",
-    btnOutlineBorder: "#E4E4E7",
-    btnOutlineBorderHover: "#D4D4D8",
-    btnOutlineHoverBg: "#F4F4F5",
+    btnSecondarySurface: "#F4F4F5",
+    btnSecondaryHover: "#E4E4E7",
+    btnOutlineBorder: "#D4D4D8",
+    btnOutlineBorderHover: "#A1A1AA",
+    btnOutlineHoverBg: "#F9FAFB",
     btnGhostHover: "#F4F4F5",
-    btnPointSurface: "#323944",
+    btnPointSurface: "#5856D6",
     btnPointBorder: "transparent",
-    btnPointHoverSurface: "#4A5361",
+    btnPointHoverSurface: "#4B49B8",
     btnPointHoverBorder: "transparent",
-    btnPointEnergy: "0 4px 12px rgba(50, 57, 68, 0.2)",
-    btnDestructiveSurface: "#7C2128",
-    btnDestructiveHover: "#5B171D",
-    inputBg: "#FCFCFC",
-    inputBorderRest: "#E4E4E7",
+    btnPointEnergy: "0 4px 12px rgba(88, 86, 214, 0.2)",
+    btnDestructiveSurface: "#DC2626",
+    btnDestructiveHover: "#B91C1C",
+    inputBg: "#F4F4F5",
+    inputBorderRest: "#D4D4D8",
     inputBorderHover: "#A1A1AA",
-    inputHoverGlow: "0 0 0 2px #F4F4F5",
-    inputFocusGlow: "0 0 0 2px #E4E4E7",
-    inputErrorGlow: "0 0 0 2px #F4EAEB",
-    dropdownBg: "#FCFCFC",
-    dropdownShadow: "0 20px 25px -5px rgba(18, 18, 18, 0.08), 0 0 0 1px rgba(18, 18, 18, 0.03)",
+    inputHoverGlow: "0 0 0 2px rgba(0, 0, 0, 0.04)",
+    inputFocusGlow: "0 0 0 2px rgba(24, 24, 27, 0.15)",
+    inputErrorGlow: "0 0 0 2px #FEE2E2",
+    dropdownBg: "#FFFFFF",
+    dropdownShadow: "0 20px 25px -5px rgba(24, 24, 27, 0.08), 0 0 0 1px rgba(24, 24, 27, 0.03)",
     dropdownItemHover: "#F4F4F5",
     cardAccentBorder: "#E4E4E7",
     cardAccentGlow: "none",
     cardAccentHoverBorder: "#D4D4D8",
-    cardAccentHoverGlow: "0 8px 24px rgba(18, 18, 18, 0.06)"
+    cardAccentHoverGlow: "0 8px 24px rgba(24, 24, 27, 0.06)"
   },
   dark: {
-    // ── Canvas & Surface (High-Contrast Charcoal Base) ──
-    background: "#121214",
-    // Off-black charcoal
-    backgroundSubtle: "#18181A",
-    // Zinc 900
+    // ── Canvas & Surface ──
+    background: "#09090B",
+    backgroundSubtle: "#18181B",
     surface: "#27272A",
-    // Zinc 800 - distinct from subtle background
     surfaceHover: "#3F3F46",
-    // Zinc 700
-    surfaceBase: "#121214",
-    surfaceElevatedLow: "#18181A",
+    surfaceBase: "#09090B",
+    surfaceElevatedLow: "#18181B",
     surfaceElevatedMid: "#27272A",
     surfaceElevatedHigh: "#3F3F46",
-    card: "#18181A",
-    // Zinc 900
-    cardForeground: "#F4F4F5",
-    // Off-white
+    card: "#18181B",
+    cardForeground: "#FAFAFA",
     // ── Text ──
-    foreground: "#F4F4F5",
-    // Off-white
+    foreground: "#FAFAFA",
     muted: "#27272A",
-    // Zinc 800
     mutedForeground: "#A1A1AA",
-    // Zinc 400
-    // ── Brand (Iron Navy Light / Cold Steel Blue-Gray) ──
-    primary: "#B8C4D9",
-    primaryHover: "#D1DBE8",
-    primaryForeground: "#1E232D",
-    // Deep Iron Navy text
+    // ── Brand (Inverted — Near-White) ──
+    primary: "#FAFAFA",
+    primaryHover: "#E4E4E7",
+    primaryForeground: "#18181B",
     secondary: "#27272A",
-    secondaryForeground: "#B8C4D9",
-    ring: "#B8C4D9",
-    // ── Point / Accent (Lighter Steel Blue-Gray) ──
-    point: "#D1DBE8",
-    pointHover: "#E6ECEF",
-    pointForeground: "#1E232D",
-    pointSubtle: "rgba(209, 219, 232, 0.12)",
-    // ── Border (Highly Visible) ──
+    secondaryForeground: "#FAFAFA",
+    ring: "#FAFAFA",
+    // ── Point / Accent (Royal Indigo) ──
+    point: "#5E5CE6",
+    pointHover: "#7A78F0",
+    pointForeground: "#FFFFFF",
+    pointSubtle: "rgba(94, 92, 230, 0.15)",
+    // ── Border ──
     border: "#3F3F46",
-    // Zinc 700
     input: "#3F3F46",
-    // ── Gray Scale (Zinc) ──
-    gray50: "#121214",
-    gray100: "#18181A",
+    // ── Gray Scale (Zinc Inverted) ──
+    gray50: "#09090B",
+    gray100: "#18181B",
     gray200: "#27272A",
     gray300: "#3F3F46",
     gray400: "#52525B",
@@ -261,7 +216,7 @@ var semanticTokens = {
     gray800: "#E4E4E7",
     gray900: "#FAFAFA",
     // ── Glass & Effects ──
-    glassBg: "rgba(18, 18, 20, 0.85)",
+    glassBg: "rgba(9, 9, 11, 0.85)",
     glassBorder: "rgba(250, 250, 250, 0.1)",
     glassInset: "inset 0 1px 0 rgba(250, 250, 250, 0.05)",
     glassPanelShadow: "0 20px 40px rgba(0, 0, 0, 0.8)",
@@ -278,13 +233,13 @@ var semanticTokens = {
     gradientGlowShadow: "none",
     // ── Shadow ──
     shadowColor: "rgba(0, 0, 0, 0.9)",
-    // ── Status (Deep & Clear) ──
-    success: "#34D399",
-    successBg: "rgba(52, 211, 153, 0.15)",
-    successForeground: "#34D399",
-    warning: "#FBBF24",
-    warningBg: "rgba(251, 191, 36, 0.15)",
-    warningForeground: "#FBBF24",
+    // ── Status ──
+    success: "#4ADE80",
+    successBg: "rgba(74, 222, 128, 0.15)",
+    successForeground: "#4ADE80",
+    warning: "#FACC15",
+    warningBg: "rgba(250, 204, 21, 0.15)",
+    warningForeground: "#FACC15",
     error: "#F87171",
     errorBg: "rgba(248, 113, 113, 0.15)",
     errorForeground: "#F87171",
@@ -295,36 +250,36 @@ var semanticTokens = {
     interactiveHover: "rgba(250, 250, 250, 0.08)",
     interactivePressed: "rgba(250, 250, 250, 0.12)",
     interactiveFocus: "#FAFAFA",
-    interactiveSurfaceTint: "rgba(250, 250, 250, 0.04)",
-    interactiveHoverTint: "rgba(250, 250, 250, 0.08)",
-    focusGlow: "0 0 0 2px #3F3F46",
-    pointGlow: "0 0 0 2px rgba(250, 250, 250, 0.3)",
+    interactiveSurfaceTint: "rgba(255, 255, 255, 0.04)",
+    interactiveHoverTint: "rgba(255, 255, 255, 0.08)",
+    focusGlow: "0 0 0 3px rgba(250, 250, 250, 0.15)",
+    pointGlow: "0 0 0 2px rgba(94, 92, 230, 0.3)",
     // ── Components ──
-    btnPrimarySurface: "#B8C4D9",
-    btnPrimaryHover: "#D1DBE8",
-    btnPrimaryEnergy: "0 4px 16px rgba(184, 196, 217, 0.25)",
+    btnPrimarySurface: "#FAFAFA",
+    btnPrimaryHover: "#E4E4E7",
+    btnPrimaryEnergy: "0 4px 16px rgba(250, 250, 250, 0.1)",
     btnPrimaryInset: "none",
     btnSecondarySurface: "#27272A",
     btnSecondaryHover: "#3F3F46",
     btnOutlineBorder: "#3F3F46",
     btnOutlineBorderHover: "#52525B",
-    btnOutlineHoverBg: "#27272A",
+    btnOutlineHoverBg: "#18181B",
     btnGhostHover: "#27272A",
-    btnPointSurface: "#D1DBE8",
+    btnPointSurface: "#5E5CE6",
     btnPointBorder: "transparent",
-    btnPointHoverSurface: "#E6ECEF",
+    btnPointHoverSurface: "#7A78F0",
     btnPointHoverBorder: "transparent",
-    btnPointEnergy: "0 4px 16px rgba(209, 219, 232, 0.25)",
-    btnDestructiveSurface: "#7C2128",
-    btnDestructiveHover: "#9A2A32",
-    inputBg: "#18181A",
+    btnPointEnergy: "0 4px 16px rgba(94, 92, 230, 0.3)",
+    btnDestructiveSurface: "#EF4444",
+    btnDestructiveHover: "#F87171",
+    inputBg: "#27272A",
     inputBorderRest: "#3F3F46",
     inputBorderHover: "#52525B",
-    inputHoverGlow: "0 0 0 2px #27272A",
-    inputFocusGlow: "0 0 0 2px #3F3F46",
-    inputErrorGlow: "0 0 0 2px #3E1014",
-    dropdownBg: "#18181A",
-    dropdownShadow: "0 20px 25px -5px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(250,250,250,0.1)",
+    inputHoverGlow: "0 0 0 2px rgba(255, 255, 255, 0.04)",
+    inputFocusGlow: "0 0 0 2px rgba(250, 250, 250, 0.15)",
+    inputErrorGlow: "0 0 0 2px rgba(248, 113, 113, 0.3)",
+    dropdownBg: "#18181B",
+    dropdownShadow: "0 20px 25px -5px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(250, 250, 250, 0.1)",
     dropdownItemHover: "#27272A",
     cardAccentBorder: "#3F3F46",
     cardAccentGlow: "none",
@@ -336,25 +291,25 @@ var semanticTokens = {
 // src/component.ts
 var component = {
   button: {
-    sm: { height: 34, paddingX: 18, paddingY: 8, fontSize: 12, borderRadius: 8, iconSize: 16 },
-    md: { height: 42, paddingX: 28, paddingY: 12, fontSize: 13, borderRadius: 10, iconSize: 18 },
-    lg: { height: 50, paddingX: 36, paddingY: 16, fontSize: 15, borderRadius: 14, iconSize: 20 }
+    sm: { height: 32, paddingX: 16, paddingY: 6, fontSize: 13, borderRadius: 8, iconSize: 16 },
+    md: { height: 44, paddingX: 20, paddingY: 10, fontSize: 15, borderRadius: 12, iconSize: 18 },
+    lg: { height: 50, paddingX: 28, paddingY: 14, fontSize: 17, borderRadius: 14, iconSize: 20 }
   },
   input: {
-    height: 42,
-    paddingX: 18,
+    height: 44,
+    paddingX: 16,
     paddingY: 12,
-    fontSize: 14,
-    borderRadius: 10,
+    fontSize: 15,
+    borderRadius: 12,
     iconSize: 18,
     iconPadding: 42
   },
   card: {
-    padding: 28,
-    gap: 20,
+    padding: 24,
+    gap: 16,
     borderRadius: 16,
     titleSize: 17,
-    bodySize: 14
+    bodySize: 15
   },
   badge: {
     paddingX: 12,
@@ -368,29 +323,29 @@ var component = {
     wrapperPaddingY: 10,
     wrapperRadius: 10,
     gap: 12,
-    size: 20,
+    size: 22,
     borderRadius: 6,
-    borderWidth: 2,
+    borderWidth: 1.5,
     iconSize: 14,
-    labelSize: 14
+    labelSize: 15
   },
   radio: {
     wrapperPaddingX: 16,
     wrapperPaddingY: 10,
     wrapperRadius: 10,
     gap: 12,
-    size: 20,
-    borderWidth: 2,
+    size: 22,
+    borderWidth: 1.5,
     checkedBorderWidth: 6,
-    labelSize: 14
+    labelSize: 15
   },
   switch: {
-    width: 52,
-    height: 32,
-    thumbSize: 24,
-    thumbOffset: 4,
-    thumbTranslateOn: 24,
-    thumbTranslateOff: 4
+    width: 51,
+    height: 31,
+    thumbSize: 27,
+    thumbOffset: 2,
+    thumbTranslateOn: 22,
+    thumbTranslateOff: 2
   },
   chip: {
     paddingX: 16,
@@ -412,14 +367,14 @@ var component = {
       paddingY: 8,
       fontSize: 13,
       containerPadding: 4,
-      containerRadius: 14,
-      itemRadius: 10
+      containerRadius: 10,
+      itemRadius: 8
     }
   },
   slider: {
-    trackHeight: 6,
-    thumbSize: 20,
-    thumbBorderWidth: 2
+    trackHeight: 4,
+    thumbSize: 28,
+    thumbBorderWidth: 0
   },
   tooltip: {
     simple: { paddingX: 14, paddingY: 8, fontSize: 13, borderRadius: 10 },
@@ -436,12 +391,12 @@ var component = {
   },
   divider: {
     thickness: 1,
-    thickThickness: 8,
+    thickThickness: 1,
     insetMargin: 64,
     labelSize: 12
   },
   progress: {
-    linear: { height: 8, borderRadius: 9999 },
+    linear: { height: 6, borderRadius: 9999 },
     circular: { strokeWidth: 4, textSize: 14 }
   },
   snackbar: {
@@ -449,7 +404,7 @@ var component = {
     paddingRight: 18,
     paddingBottom: 16,
     paddingLeft: 22,
-    borderRadius: 14,
+    borderRadius: 12,
     gap: 12,
     iconSize: 18,
     messageSize: 14,
@@ -459,15 +414,15 @@ var component = {
     actionSize: 13
   },
   dialog: {
-    width: 380,
-    borderRadius: 20,
-    headerPaddingX: 28,
-    headerPaddingY: 24,
-    footerPaddingX: 28,
+    width: 320,
+    borderRadius: 14,
+    headerPaddingX: 24,
+    headerPaddingY: 20,
+    footerPaddingX: 24,
     footerPaddingY: 20,
     titleSize: 17,
-    descSize: 14,
-    footerGap: 14
+    descSize: 13,
+    footerGap: 8
   },
   animatedToggle: {
     size: 40,
@@ -489,19 +444,19 @@ var typography = {
     sm: { size: 40, weight: 600, lineHeight: 1.15, letterSpacing: -0.02 }
   },
   heading: {
-    h1: { size: 32, weight: 700, lineHeight: 1.2, letterSpacing: -0.025 },
+    h1: { size: 34, weight: 700, lineHeight: 1.2, letterSpacing: -0.025 },
     h2: { size: 28, weight: 600, lineHeight: 1.22, letterSpacing: -0.02 },
-    h3: { size: 24, weight: 600, lineHeight: 1.25, letterSpacing: -0.015 },
-    h4: { size: 20, weight: 500, lineHeight: 1.3, letterSpacing: -0.01 },
-    h5: { size: 16, weight: 500, lineHeight: 1.35, letterSpacing: -5e-3 },
-    h6: { size: 14, weight: 500, lineHeight: 1.4, letterSpacing: 0 }
+    h3: { size: 22, weight: 600, lineHeight: 1.25, letterSpacing: -0.015 },
+    h4: { size: 20, weight: 600, lineHeight: 1.3, letterSpacing: -0.01 },
+    h5: { size: 17, weight: 600, lineHeight: 1.35, letterSpacing: -5e-3 },
+    h6: { size: 15, weight: 600, lineHeight: 1.4, letterSpacing: 0 }
   },
   body: {
-    lg: { size: 17, weight: 400, lineHeight: 1.65, letterSpacing: -0.01 },
-    md: { size: 15, weight: 400, lineHeight: 1.6, letterSpacing: -5e-3 },
-    sm: { size: 13, weight: 400, lineHeight: 1.55, letterSpacing: 0 }
+    lg: { size: 17, weight: 400, lineHeight: 1.4, letterSpacing: -0.02 },
+    md: { size: 15, weight: 400, lineHeight: 1.4, letterSpacing: -0.01 },
+    sm: { size: 13, weight: 400, lineHeight: 1.4, letterSpacing: 0 }
   },
-  caption: { size: 11, weight: 400, lineHeight: 1.5, letterSpacing: 0.01 },
+  caption: { size: 12, weight: 400, lineHeight: 1.4, letterSpacing: 0.01 },
   fontWeight: {
     light: "300",
     regular: "400",
@@ -525,9 +480,9 @@ var spacing = {
 var radius = {
   none: 0,
   xs: 4,
-  sm: 6,
-  m: 10,
-  lg: 14,
+  sm: 8,
+  m: 12,
+  lg: 16,
   xl: 20,
   "2xl": 24,
   pill: 9999
@@ -558,12 +513,12 @@ var containers = {
 // src/elevation.ts
 var elevation = {
   light: {
-    sm: "0 1px 2px rgba(94,94,94,0.04), 0 1px 3px rgba(94,94,94,0.02)",
-    m: "0 2px 4px rgba(94,94,94,0.04), 0 8px 16px rgba(94,94,94,0.04)",
-    lg: "0 4px 8px rgba(94,94,94,0.05), 0 16px 32px rgba(94,94,94,0.06)",
-    xl: "0 8px 16px rgba(94,94,94,0.06), 0 24px 48px rgba(94,94,94,0.08)",
-    glass: "0 4px 24px rgba(94,94,94,0.05), 0 1px 2px rgba(94,94,94,0.02)",
-    glassLg: "0 8px 32px rgba(94,94,94,0.08), 0 2px 4px rgba(94,94,94,0.03)"
+    sm: "0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.02)",
+    m: "0 4px 12px rgba(0,0,0,0.05), 0 2px 4px rgba(0,0,0,0.03)",
+    lg: "0 8px 24px rgba(0,0,0,0.06), 0 4px 8px rgba(0,0,0,0.04)",
+    xl: "0 16px 40px rgba(0,0,0,0.08), 0 8px 16px rgba(0,0,0,0.04)",
+    glass: "0 8px 32px rgba(0,0,0,0.05), 0 2px 4px rgba(0,0,0,0.02)",
+    glassLg: "0 12px 48px rgba(0,0,0,0.08), 0 4px 8px rgba(0,0,0,0.04)"
   },
   dark: {
     sm: "0 1px 2px rgba(0,0,0,0.20), 0 1px 3px rgba(0,0,0,0.14)",
@@ -588,8 +543,8 @@ var zIndex = {
 };
 
 // src/motion.ts
-var DIA_SPRING_DEFAULT = { type: "spring", stiffness: 260, damping: 34, mass: 1 };
-var DIA_SPRING_LIGHT = { type: "spring", stiffness: 260, damping: 34, mass: 0.5 };
+var TAC_SPRING_DEFAULT = { type: "spring", stiffness: 300, damping: 35, mass: 1 };
+var TAC_SPRING_LIGHT = { type: "spring", stiffness: 350, damping: 35, mass: 0.5 };
 var motion = {
   duration: {
     instant: 80,
@@ -599,43 +554,43 @@ var motion = {
     complex: 450
   },
   easing: {
-    /** Dia's signature curve — slight overshoot with smooth natural deceleration. */
-    standard: "cubic-bezier(0.22, 1, 0.36, 1)",
+    /** Slight overshoot with smooth natural deceleration. */
+    standard: "cubic-bezier(0.25, 0.1, 0.25, 1)",
     /** Exit easing — fast acceleration, abrupt departure. */
-    easeIn: "cubic-bezier(0.55, 0, 1, 0.45)",
+    easeIn: "cubic-bezier(0.42, 0, 1, 1)",
     /** Entrance easing — gentle deceleration without overshoot. */
-    easeOut: "cubic-bezier(0, 0.55, 0.45, 1)",
+    easeOut: "cubic-bezier(0, 0, 0.58, 1)",
     /** Symmetric ease — smooth in both directions. */
     easeInOut: "cubic-bezier(0.65, 0, 0.35, 1)",
-    /** Playful overshoot — for toggles, switches, confirmatory feedback. */
-    bounce: "cubic-bezier(0.34, 1.56, 0.64, 1)",
-    /** Stronger spring feel — deliberate physical presence. */
-    spring: "cubic-bezier(0.22, 1.2, 0.36, 1)",
+    /** Restrained overshoot — for toggles, switches, confirmatory feedback. */
+    bounce: "cubic-bezier(0.34, 1.3, 0.64, 1)",
+    /** Subtle spring feel — deliberate physical presence. */
+    spring: "cubic-bezier(0.22, 1.1, 0.36, 1)",
     /** Subtle rubber-band — elastic resistance with quick snap back. */
-    elastic: "cubic-bezier(0.68, -0.2, 0.265, 1.2)"
+    elastic: "cubic-bezier(0.68, -0.1, 0.265, 1.1)"
   },
-  /** Framer Motion spring presets calibrated for Dia-style organic feel. */
+  /** Framer Motion spring presets — tuned with higher damping for natural deceleration. */
   spring: {
     /** Quick interactive feedback — subtle and responsive. */
-    snappy: { type: "spring", stiffness: 260, damping: 28 },
+    snappy: { type: "spring", stiffness: 260, damping: 32 },
     /** Smooth state changes — gentle spring resolution. */
-    gentle: { type: "spring", stiffness: 180, damping: 26 },
+    gentle: { type: "spring", stiffness: 180, damping: 30 },
     /** Toggle/switch feel — restrained with minimal bounce. */
-    bouncy: { type: "spring", stiffness: 260, damping: 24 },
+    bouncy: { type: "spring", stiffness: 260, damping: 30 },
     /** Large layout shifts — deliberate mass with controlled deceleration. */
-    slow: { type: "spring", stiffness: 140, damping: 24 },
+    slow: { type: "spring", stiffness: 140, damping: 28 },
     /** Press/release with life — elastic resistance, mass gives it weight. */
-    elastic: { type: "spring", stiffness: 220, damping: 22, mass: 0.8 },
+    elastic: { type: "spring", stiffness: 220, damping: 28, mass: 0.8 },
     /** Elements appearing — spring resolves cleanly with organic arrival. */
-    entrance: { type: "spring", stiffness: 180, damping: 24, mass: 0.9 }
+    entrance: { type: "spring", stiffness: 180, damping: 28, mass: 0.9 }
   },
-  /** Mass-differentiated spring configs for Dia Browser-like physics interactions. */
-  diaSpring: {
-    default: DIA_SPRING_DEFAULT,
-    light: DIA_SPRING_LIGHT,
-    heavy: { type: "spring", stiffness: 220, damping: 32, mass: 1.5 },
-    magnetic: { type: "spring", stiffness: 340, damping: 38, mass: 0.8 },
-    entrance: { type: "spring", stiffness: 180, damping: 28, mass: 1.2 }
+  /** Mass-differentiated spring configs — tuned higher damping for smooth deceleration. */
+  tacSpring: {
+    default: TAC_SPRING_DEFAULT,
+    light: TAC_SPRING_LIGHT,
+    heavy: { type: "spring", stiffness: 250, damping: 38, mass: 1.5 },
+    magnetic: { type: "spring", stiffness: 400, damping: 40, mass: 0.8 },
+    entrance: { type: "spring", stiffness: 220, damping: 32, mass: 1.2 }
   },
   /** Standard animation keyframe presets for reuse across components. */
   keyframes: {
@@ -652,13 +607,25 @@ var motion = {
       to: { opacity: "1", filter: "blur(0px)", transform: "scale(1)" }
     },
     /** Slide entrance from below — element springs up from offset position. */
-    slideInUp: { from: { opacity: "0", transform: "translateY(5px)" }, to: { opacity: "1", transform: "translateY(0)" } },
+    slideInUp: {
+      from: { opacity: "0", transform: "translateY(5px)" },
+      to: { opacity: "1", transform: "translateY(0)" }
+    },
     /** Slide entrance from above — element springs down from offset position. */
-    slideInDown: { from: { opacity: "0", transform: "translateY(-5px)" }, to: { opacity: "1", transform: "translateY(0)" } },
+    slideInDown: {
+      from: { opacity: "0", transform: "translateY(-5px)" },
+      to: { opacity: "1", transform: "translateY(0)" }
+    },
     /** Slide entrance from left — element springs in from offset. */
-    slideInLeft: { from: { opacity: "0", transform: "translateX(-5px)" }, to: { opacity: "1", transform: "translateX(0)" } },
+    slideInLeft: {
+      from: { opacity: "0", transform: "translateX(-5px)" },
+      to: { opacity: "1", transform: "translateX(0)" }
+    },
     /** Slide entrance from right — element springs in from offset. */
-    slideInRight: { from: { opacity: "0", transform: "translateX(5px)" }, to: { opacity: "1", transform: "translateX(0)" } },
+    slideInRight: {
+      from: { opacity: "0", transform: "translateX(5px)" },
+      to: { opacity: "1", transform: "translateX(0)" }
+    },
     /** Scale entrance — element inflates from slight compression. */
     scaleIn: { from: { opacity: "0", transform: "scale(0.98)" }, to: { opacity: "1", transform: "scale(1)" } },
     scaleOut: { from: { opacity: "1", transform: "scale(1)" }, to: { opacity: "0", transform: "scale(0.98)" } },
@@ -726,66 +693,75 @@ var motion = {
   },
   /** Layout morphing spring config — for FLIP transitions between components. */
   morph: {
-    /** Spring config for morph transitions — references diaSpring.default. */
-    spring: DIA_SPRING_DEFAULT,
+    /** Spring config for morph transitions — references tacSpring.default. */
+    spring: TAC_SPRING_DEFAULT,
     /** Faster variant for small elements. */
-    springFast: { type: "spring", stiffness: 400, damping: 35, mass: 0.8 }
+    springFast: { type: "spring", stiffness: 450, damping: 35, mass: 0.8 }
   }
 };
-var diaSpring = motion.diaSpring;
+var tacSpring = motion.tacSpring;
+var springConfigs = {
+  default: { stiffness: 300, damping: 35, mass: 1 },
+  snappy: { stiffness: 260, damping: 32, mass: 1 },
+  gentle: { stiffness: 180, damping: 30, mass: 1 },
+  bouncy: { stiffness: 260, damping: 30, mass: 1 },
+  magnetic: { stiffness: 400, damping: 40, mass: 0.8 },
+  entrance: { stiffness: 180, damping: 28, mass: 0.9 },
+  light: { stiffness: 350, damping: 35, mass: 0.5 },
+  heavy: { stiffness: 250, damping: 38, mass: 1.5 },
+  elastic: { stiffness: 220, damping: 28, mass: 0.8 },
+  slow: { stiffness: 140, damping: 28, mass: 1 }
+};
 
 // src/chart.ts
 var chart = {
   light: {
     colors: [
-      "#1E232D",
-      // chart-1: Iron Navy (Primary)
-      "#323944",
-      // chart-2: Steel Navy (Secondary)
-      "#4A5361",
-      // chart-3: Slate Navy (Tertiary)
+      "#18181B",
+      // chart-1: Ink (Primary)
+      "#5856D6",
+      // chart-2: Royal Indigo (Point)
+      "#854D0E",
+      // chart-3: Dark Gold
+      "#0F766E",
+      // chart-4: Deep Teal (cool contrast)
       "#71717A",
-      // chart-4: Zinc 500 (Accent 1)
-      "#A1A1AA",
-      // chart-5: Zinc 400 (Accent 2)
-      "#D4D4D8",
-      // chart-6: Zinc 300 (Fill)
-      "#0F172A",
-      // chart-7: Deep Slate 900 (Deep Fill)
-      "#E4E4E7"
-      // chart-8: Zinc 200 (Light Fill)
+      // chart-5: Zinc 500 (Neutral)
+      "#4B49B8",
+      // chart-6: Deep Indigo
+      "#44403C",
+      // chart-7: Stone 700 (Warm gray)
+      "#D4D4D8"
+      // chart-8: Zinc 300 (Light fill)
     ],
-    grid: "rgba(30, 35, 45, 0.04)",
-    axis: "rgba(30, 35, 45, 0.08)",
+    grid: "rgba(24, 24, 27, 0.04)",
+    axis: "rgba(24, 24, 27, 0.08)",
     label: "#71717A",
-    // Zinc 500
     tooltipBg: "#FFFFFF"
   },
   dark: {
     colors: [
-      "#B8C4D9",
-      // chart-1: Bright Ice Navy (Primary)
-      "#D1DBE8",
-      // chart-2: Ice Steel (Secondary)
-      "#E6ECEF",
-      // chart-3: Pale Silver (Tertiary)
+      "#FAFAFA",
+      // chart-1: Near-white (Primary)
+      "#5E5CE6",
+      // chart-2: Royal Indigo (Point)
+      "#FCD34D",
+      // chart-3: Amber 300 (Gold)
+      "#2DD4BF",
+      // chart-4: Teal 400 (cool contrast)
       "#A1A1AA",
-      // chart-4: Zinc 400 (Accent 1)
-      "#71717A",
-      // chart-5: Zinc 500 (Accent 2)
-      "#808B9D",
-      // chart-6: Cold Steel (Fill)
-      "#FFFFFF",
-      // chart-7: Pure White (Highlight)
+      // chart-5: Zinc 400 (Neutral)
+      "#7A78F0",
+      // chart-6: Light Indigo
+      "#78716C",
+      // chart-7: Stone 500 (Warm gray)
       "#52525B"
-      // chart-8: Zinc 600 (Deep Fill)
+      // chart-8: Zinc 600 (Deep fill)
     ],
     grid: "rgba(255, 255, 255, 0.04)",
     axis: "rgba(255, 255, 255, 0.06)",
     label: "#A1A1AA",
-    // Zinc 400
-    tooltipBg: "#18181A"
-    // Off-black chart tooltip matches dropdowns
+    tooltipBg: "#18181B"
   },
   lineWidth: 1.5,
   dotSize: 2.5,
@@ -811,7 +787,6 @@ exports.breakpoints = breakpoints;
 exports.chart = chart;
 exports.component = component;
 exports.containers = containers;
-exports.diaSpring = diaSpring;
 exports.elevation = elevation;
 exports.elevationLight = elevationLight;
 exports.grid = grid;
@@ -823,6 +798,8 @@ exports.radius = radius;
 exports.rem = rem;
 exports.semanticTokens = semanticTokens;
 exports.spacing = spacing;
+exports.springConfigs = springConfigs;
+exports.tacSpring = tacSpring;
 exports.typography = typography;
 exports.unitless = unitless;
 exports.zIndex = zIndex;