@hilum/ui 3.1.2 → 3.2.1

package/src/components/sidebar.tsx

@@ -198,8 +198,8 @@ function SidebarTrigger({ className, onClick, ...props }: React.ComponentProps<t
     <Button
       data-sidebar="trigger"
       variant="ghost"
-      size="sm"
-      className={cn("h-7 w-7", className)}
+      size="icon"
+      className={className}
       onClick={(e) => {
         onClick?.(e);
         toggleSidebar();
@@ -227,7 +227,7 @@ function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
       onClick={toggleSidebar}
       title="Toggle sidebar"
       className={cn(
-        "absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 cursor-col-resize transition-all ease-linear",
+        "absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 cursor-col-resize transition-[left,right,width] ease-linear",
         "after:absolute after:inset-y-0 after:left-1/2 after:w-[2px]",
         "hover:after:bg-brand-primary/30",
         "group-data-[side=left]:-right-4 group-data-[side=right]:left-0",
@@ -353,7 +353,7 @@ function SidebarGroupAction({
     <Comp
       data-sidebar="group-action"
       className={cn(
-        "absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center",
+        "absolute right-2 top-2 flex size-8 items-center justify-center",
         "rounded-md text-muted-foreground hover:bg-muted hover:text-foreground",
         "outline-none focus-visible:ring-2 focus-visible:ring-brand-primary/30",
         className,
@@ -412,7 +412,7 @@ function SidebarMenuButton({
       data-size={size}
       className={cn(
         // Base
-        "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 body-sm text-left",
+        "peer/menu-button flex min-h-10 w-full items-center gap-2 overflow-hidden rounded-md p-2 body-sm text-left",
         "outline-none ring-ring",
         "transition-[width,height,padding] duration-150",
         "hover:bg-muted hover:text-foreground",
@@ -430,7 +430,7 @@ function SidebarMenuButton({
         ],
         // Collapsed state
         "group-data-[state=collapsed]/sidebar-wrapper:justify-center",
-        "group-data-[state=collapsed]/sidebar-wrapper:size-9",
+        "group-data-[state=collapsed]/sidebar-wrapper:size-10",
         "group-data-[state=collapsed]/sidebar-wrapper:p-0",
         className,
       )}
@@ -481,7 +481,7 @@ function SidebarMenuAction({
     <Comp
       data-sidebar="menu-action"
       className={cn(
-        "absolute right-1 top-1/2 -translate-y-1/2 flex aspect-square w-5 items-center justify-center",
+        "absolute right-1 top-1/2 flex size-8 -translate-y-1/2 items-center justify-center",
         "rounded-md text-muted-foreground hover:bg-muted hover:text-foreground",
         "outline-none focus-visible:ring-2 focus-visible:ring-brand-primary/30",
         showOnHover && [
@@ -590,7 +590,7 @@ function SidebarMenuSubButton({
       data-sidebar="menu-sub-button"
       data-active={isActive}
       className={cn(
-        "flex h-7 min-w-0 items-center gap-2 overflow-hidden rounded-md px-2",
+        "flex min-h-8 min-w-0 items-center gap-2 overflow-hidden rounded-md px-2",
         "body text-muted-foreground outline-none",
         "transition-colors duration-150",
         "hover:text-foreground hover:bg-muted",

package/src/components/slider.tsx

@@ -16,7 +16,7 @@ const SliderRoot = React.forwardRef<
     <Slider.Track className="relative h-1.5 w-full grow overflow-hidden rounded-full bg-muted">
       <Slider.Range className="absolute h-full bg-brand-primary" />
     </Slider.Track>
-    <Slider.Thumb className="block size-4 rounded-full border-2 border-brand-primary bg-card shadow-natural transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-primary/30 disabled:pointer-events-none disabled:opacity-50" />
+    <Slider.Thumb className="relative block size-4 rounded-full border-2 border-brand-primary bg-card shadow-natural transition-colors after:absolute after:left-1/2 after:top-1/2 after:size-10 after:-translate-x-1/2 after:-translate-y-1/2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-primary/30 disabled:pointer-events-none disabled:opacity-50" />
   </Slider.Root>
 ));
 SliderRoot.displayName = "Slider";

package/src/components/stat-card.tsx

@@ -36,14 +36,14 @@ function StatCard({ label, value, trend, icon, className }: StatCardProps) {
           </div>
         )}
       </div>
-      <p className="heading-xl mt-2 text-foreground">{value}</p>
+      <p className="heading-xl mt-2 tabular-nums text-foreground">{value}</p>
       {trend &&
         (() => {
           const Icon = TrendIcon[trend.direction];
           return (
             <div className={cn("mt-2 flex items-center gap-1", trendColor[trend.direction])}>
               <Icon size={12} />
-              <span className="caption font-medium">{trend.value}</span>
+              <span className="caption tabular-nums font-medium">{trend.value}</span>
             </div>
           );
         })()}

package/src/components/steps.tsx

@@ -29,7 +29,7 @@ function CirclesSteps({ steps, className }: { steps: Step[]; className?: string
             <li key={step.id ?? i} className={cn("relative", !isLast && "flex-1")}>
               {/* Connector line */}
               {!isLast && (
-                <div className="absolute top-4 left-8 -right-px h-0.5" aria-hidden="true">
+                <div className="absolute left-10 right-0 top-5 h-0.5" aria-hidden="true">
                   <div
                     className={cn(
                       "h-full",
@@ -47,7 +47,7 @@ function CirclesSteps({ steps, className }: { steps: Step[]; className?: string
                 {/* Circle */}
                 <span
                   className={cn(
-                    "relative z-10 flex size-8 items-center justify-center rounded-full transition-colors",
+                    "relative z-10 flex size-10 items-center justify-center rounded-full transition-colors",
                     step.status === "complete" &&
                       "bg-brand-primary group-hover:bg-brand-primary/80",
                     step.status === "current" && "border-2 border-brand-primary bg-card",
@@ -58,9 +58,9 @@ function CirclesSteps({ steps, className }: { steps: Step[]; className?: string
                   {step.status === "complete" ? (
                     <Check size={14} className="text-background" strokeWidth={2.5} />
                   ) : step.status === "current" ? (
-                    <span className="size-2.5 rounded-full bg-brand-primary" />
+                    <span className="size-3 rounded-full bg-brand-primary" />
                   ) : (
-                    <span className="size-2.5 rounded-full bg-transparent group-hover:bg-muted" />
+                    <span className="size-3 rounded-full bg-transparent group-hover:bg-muted" />
                   )}
                 </span>
 
@@ -75,7 +75,9 @@ function CirclesSteps({ steps, className }: { steps: Step[]; className?: string
                     {step.name}
                   </span>
                   {step.description && (
-                    <span className="caption text-muted-foreground">{step.description}</span>
+                    <span className="caption text-pretty text-muted-foreground">
+                      {step.description}
+                    </span>
                   )}
                 </span>
               </a>
@@ -93,7 +95,7 @@ function BulletsSteps({ steps, className }: { steps: Step[]; className?: string
 
   return (
     <nav className={cn("flex items-center gap-4", className)} aria-label="Progress">
-      <p className="body font-medium text-muted-foreground">
+      <p className="body font-medium tabular-nums text-muted-foreground">
         Step {currentIdx + 1} of {steps.length}
       </p>
       <ol role="list" className="flex items-center gap-2">
@@ -102,11 +104,11 @@ function BulletsSteps({ steps, className }: { steps: Step[]; className?: string
             <a
               href={step.href ?? "#"}
               onClick={!step.href ? (e) => e.preventDefault() : undefined}
-              className="block"
+              className="relative flex size-10 items-center justify-center"
             >
               {step.status === "complete" ? (
                 <span
-                  className="block size-2.5 rounded-full bg-brand-primary hover:bg-brand-primary/80 transition-colors"
+                  className="block size-2.5 rounded-full bg-brand-primary transition-colors hover:bg-brand-primary/80"
                   aria-label={`${step.name}: completed`}
                 />
               ) : step.status === "current" ? (
@@ -120,7 +122,7 @@ function BulletsSteps({ steps, className }: { steps: Step[]; className?: string
                 </span>
               ) : (
                 <span
-                  className="block size-2.5 rounded-full bg-muted hover:bg-muted transition-colors"
+                  className="block size-2.5 rounded-full bg-muted transition-colors hover:bg-muted"
                   aria-label={`${step.name}: upcoming`}
                 />
               )}
@@ -143,7 +145,7 @@ function ProgressSteps({ steps, className }: { steps: Step[]; className?: string
       {/* Bar */}
       <div className="h-1.5 w-full overflow-hidden rounded-full bg-muted">
         <div
-          className="h-full rounded-full bg-brand-primary transition-all duration-500"
+          className="h-full rounded-full bg-brand-primary transition-[width] duration-500"
           style={{ width: `${progress}%` }}
         />
       </div>
@@ -155,7 +157,7 @@ function ProgressSteps({ steps, className }: { steps: Step[]; className?: string
             <div
               key={step.id ?? i}
               className={cn(
-                "caption font-medium",
+                "caption font-medium text-pretty",
                 i === 0 ? "text-left" : isLast ? "text-right" : "text-center",
                 step.status === "upcoming" ? "text-muted-foreground" : "text-foreground",
               )}

package/src/components/switch.tsx

@@ -11,8 +11,8 @@ const SwitchRoot = React.forwardRef<
   <Switch.Root
     ref={ref}
     className={cn(
-      "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full",
-      "border-2 border-transparent transition-colors",
+      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full",
+      "border-2 border-transparent transition-[background-color,border-color,box-shadow] duration-150",
       "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-primary/30",
       "disabled:cursor-not-allowed disabled:opacity-50",
       "data-[state=unchecked]:bg-muted data-[state=checked]:bg-brand-primary",
@@ -22,8 +22,8 @@ const SwitchRoot = React.forwardRef<
   >
     <Switch.Thumb
       className={cn(
-        "pointer-events-none block size-4 rounded-full bg-card shadow-natural",
-        "transition-transform data-[state=unchecked]:translate-x-0 data-[state=checked]:translate-x-4",
+        "pointer-events-none block size-5 rounded-full bg-card shadow-natural",
+        "transition-transform data-[state=unchecked]:translate-x-0 data-[state=checked]:translate-x-5",
       )}
     />
   </Switch.Root>

package/src/components/toggle.tsx

@@ -9,7 +9,7 @@ const toggleVariants = cva(
   [
     "inline-flex shrink-0 items-center justify-center gap-2",
     "body font-medium whitespace-nowrap rounded-md",
-    "transition-all duration-150 outline-none",
+    "transition-[background-color,border-color,box-shadow,color,opacity,scale] duration-150 outline-none active:scale-[0.96]",
     "focus-visible:ring-2 focus-visible:ring-brand-primary/30 focus-visible:ring-offset-1",
     "disabled:pointer-events-none disabled:opacity-50",
     "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
@@ -35,11 +35,11 @@ const toggleVariants = cva(
       },
       size: {
         sm: "h-8 gap-1.5 px-3",
-        default: "h-9 px-3",
-        lg: "h-10 px-4",
-        icon: "size-9",
+        default: "h-10 px-3",
+        lg: "h-11 px-4",
+        icon: "size-10",
         "icon-sm": "size-8",
-        "icon-lg": "size-10",
+        "icon-lg": "size-11",
       },
     },
     defaultVariants: {

package/src/icons.ts

@@ -26,8 +26,10 @@ export {
   ArrowDownRight,
   MoreHorizontal,
   MoreVertical,
+  GripVertical,
   // Status
   Check,
+  BadgeCheck,
   AlertCircle,
   AlertTriangle,
   Info,
@@ -83,6 +85,7 @@ export {
   Clock,
   File,
   FileText,
+  Database,
   Folder,
   FolderOpen,
   Image,
@@ -118,6 +121,7 @@ export {
   ShieldCheck,
   // Money / commerce
   CreditCard,
+  Package,
   ShoppingCart,
   ShoppingBag,
   Wallet,

package/src/tokens/tokens.ts

@@ -162,21 +162,76 @@ export const tokens = {
 
   fontFamily: {
     sans: 'Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
-    display: 'Gabarito, Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+    display:
+      'Gabarito, Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
     mono: 'ui-monospace, "SFMono-Regular", "Menlo", "Consolas", monospace',
   },
 
   /** Type scale utilities — emitted as Tailwind v4 `@utility` blocks. */
   typeScale: {
-    "display-xl": { family: "display", size: "3rem", weight: 400, lineHeight: "1.15" },
-    display: { family: "display", size: "2.25rem", weight: 400, lineHeight: "1.15" },
-    "heading-xl": { family: "display", size: "1.875rem", weight: 400, lineHeight: "1.2" },
-    heading: { family: "display", size: "1.5rem", weight: 400, lineHeight: "1.2" },
-    subheading: { family: "display", size: "1.25rem", weight: 400, lineHeight: "1.4" },
-    "body-lg": { family: "sans", size: "1rem", weight: 400, lineHeight: "1.625" },
-    body: { family: "sans", size: "0.875rem", weight: 400, lineHeight: "1.625" },
-    "body-sm": { family: "sans", size: "0.75rem", weight: 500, lineHeight: "1.625" },
-    caption: { family: "sans", size: "0.75rem", weight: 400, lineHeight: "1.625" },
+    "display-xl": {
+      family: "display",
+      size: "3rem",
+      weight: 400,
+      lineHeight: "1.15",
+      textWrap: "balance",
+    },
+    display: {
+      family: "display",
+      size: "2.25rem",
+      weight: 400,
+      lineHeight: "1.15",
+      textWrap: "balance",
+    },
+    "heading-xl": {
+      family: "display",
+      size: "1.875rem",
+      weight: 400,
+      lineHeight: "1.2",
+      textWrap: "balance",
+    },
+    heading: {
+      family: "display",
+      size: "1.5rem",
+      weight: 400,
+      lineHeight: "1.2",
+      textWrap: "balance",
+    },
+    subheading: {
+      family: "display",
+      size: "1.25rem",
+      weight: 400,
+      lineHeight: "1.4",
+      textWrap: "balance",
+    },
+    "body-lg": {
+      family: "sans",
+      size: "1rem",
+      weight: 400,
+      lineHeight: "1.625",
+      textWrap: "pretty",
+    },
+    body: {
+      family: "sans",
+      size: "0.875rem",
+      weight: 400,
+      lineHeight: "1.625",
+      textWrap: "pretty",
+    },
+    "body-sm": {
+      family: "sans",
+      size: "0.75rem",
+      weight: 500,
+      lineHeight: "1.625",
+      textWrap: "pretty",
+    },
+    caption: {
+      family: "sans",
+      size: "0.75rem",
+      weight: 400,
+      lineHeight: "1.625",
+      textWrap: "pretty",
+    },
     "caption-xs": { family: "sans", size: "0.625rem", weight: 400, lineHeight: "1.625" },
 
     /* --- "Eyebrow" family — uppercase tracked label used above headlines, --- *

package/dist/chunk-5JX2YKJM.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/tokens/tokens.ts"],"names":[],"mappings":"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","file":"chunk-5JX2YKJM.js","sourcesContent":["// @hilum/ui/tokens — JS-first design tokens (D6).\n//\n// This module is the single source of truth for the Hilum visual identity.\n// A build step (scripts/build-tokens.mjs) reads the compiled output of this\n// file and emits dist/tokens.css for consumers to `@import`.\n//\n// Brand model: D8 — base palette is fixed here. Per-product overrides are\n//               applied at runtime via createTheme() in @hilum/ui/create-theme.\n// Color modes:  D7 — light + dark, both auto (`prefers-color-scheme`) and\n//                    explicit via `[data-theme]`.\n//\n// Core brand colors:\n//   brand.primary   #C100F1 — vivid purple — purple-500 on the scale below\n//   brand.secondary #FFF5BF — pale lemon   — butter-200 on the scale below\n//\n// ground — neutral spine for text, borders, and structure (values: Tailwind neutral)\n\nexport const tokens = {\n  /* ============================================================== *\n   *  PALETTE — concrete colors                                      *\n   * ============================================================== */\n\n  ground: {\n    50: \"#fafafa\",\n    100: \"#f5f5f5\",\n    200: \"#e5e5e5\",\n    300: \"#d4d4d4\",\n    400: \"#a3a3a3\",\n    500: \"#737373\",\n    600: \"#525252\",\n    700: \"#404040\",\n    800: \"#262626\",\n    900: \"#171717\",\n    950: \"#0a0a0a\",\n  },\n\n  // Pale lemon — anchor: butter-200 = #FFF5BF\n  butter: {\n    50: \"#ffffe8\",\n    100: \"#fffad0\",\n    200: \"#fff5bf\",\n    300: \"#fde870\",\n    400: \"#f6d42a\",\n    500: \"#dab010\",\n    600: \"#a88008\",\n    700: \"#7c5c04\",\n    800: \"#543e02\",\n    900: \"#382801\",\n    950: \"#221600\",\n  },\n\n  // Vivid purple — anchor: purple-500 = #C100F1 (brand.primary)\n  purple: {\n    50: \"#fdf0ff\",\n    100: \"#f5d6ff\",\n    200: \"#e8a8ff\",\n    300: \"#d870f9\",\n    400: \"#c840f6\",\n    500: \"#c100f1\",\n    600: \"#9c00c0\",\n    700: \"#740092\",\n    800: \"#4e0062\",\n    900: \"#330040\",\n    950: \"#200028\",\n  },\n\n  // Legacy functional colors — used by components not yet migrated to the new palette.\n  brand: {\n    primary: \"#C100F1\", // purple-500\n    secondary: \"#FFF5BF\", // butter-200\n  },\n\n  destructive: \"#dc2626\", // red-600\n\n  /* ============================================================== *\n   *  SEMANTIC — what components reference                           *\n   * ============================================================== */\n\n  semantic: {\n    light: {\n      background: \"#ffffff\",\n      foreground: \"#171717\", // ground-900\n      card: \"#ffffff\",\n      cardForeground: \"#171717\",\n      surface: \"#fafafa\", // ground-50\n      surfaceForeground: \"#262626\", // ground-800\n      border: \"#f5f5f5\", // ground-100\n      input: \"#f5f5f5\",\n      muted: \"#fafafa\",\n      mutedForeground: \"#737373\", // ground-500\n      accent: \"#fdf0ff\", // purple-50\n      accentForeground: \"#740092\", // purple-700\n      primary: \"#c100f1\", // purple-500 = brand.primary\n      primaryForeground: \"#ffffff\",\n      secondary: \"#fafafa\", // ground-50\n      secondaryForeground: \"#404040\", // ground-700\n      destructive: \"#dc2626\",\n      destructiveForeground: \"#ffffff\",\n      success: \"#CDEA19\", // lime — functional semantic only\n      successForeground: \"#171717\",\n      warning: \"#fff5bf\", // butter-200 = brand.secondary\n      warningForeground: \"#171717\", // ground-900\n      ring: \"#c100f1\", // purple-500 = brand.primary\n    },\n    // Mid — a neutral medium-gray theme (from the Pappery designer \"mid\" palette,\n    // mapped onto the ground scale). Sits between light and dark.\n    mid: {\n      background: \"#737373\", // ground-500 — main surface (designer panel)\n      foreground: \"#fafafa\", // ground-50\n      card: \"#525252\", // ground-600 — elevated items (designer item-bg)\n      cardForeground: \"#fafafa\",\n      surface: \"#525252\", // ground-600 (designer canvas/pane)\n      surfaceForeground: \"#fafafa\",\n      border: \"#a3a3a3\", // ground-400 (designer border — lighter so it reads on the gray)\n      input: \"#404040\", // ground-700 (designer input-bg)\n      muted: \"#525252\", // ground-600\n      mutedForeground: \"#e5e5e5\", // ground-200 (designer text-secondary)\n      accent: \"#404040\", // ground-700 (designer item-hover-bg)\n      accentForeground: \"#fafafa\",\n      primary: \"#c100f1\", // brand stays consistent across themes\n      primaryForeground: \"#ffffff\",\n      secondary: \"#525252\", // ground-600\n      secondaryForeground: \"#fafafa\",\n      destructive: \"#ef4444\", // red-500\n      destructiveForeground: \"#ffffff\",\n      success: \"#CDEA19\", // lime — functional semantic only\n      successForeground: \"#171717\",\n      warning: \"#fff5bf\", // butter-200\n      warningForeground: \"#171717\",\n      ring: \"#c100f1\",\n    },\n    dark: {\n      background: \"#171717\", // ground-900 — designer canvas (deepest)\n      foreground: \"#fafafa\", // ground-50\n      card: \"#262626\", // ground-800 — designer panel-bg (elevated over bg)\n      cardForeground: \"#fafafa\",\n      surface: \"#1a1a1a\", // designer item-hover depth\n      surfaceForeground: \"#f5f5f5\",\n      border: \"#404040\", // ground-700 — designer border (reads on the dark)\n      input: \"#262626\", // ground-800\n      muted: \"#262626\", // ground-800\n      mutedForeground: \"#a3a3a3\", // ground-400\n      accent: \"#404040\", // ground-700 — neutral elevated/hover (designer item-hover)\n      accentForeground: \"#fafafa\",\n      primary: \"#c100f1\", // purple-500 — brand stays consistent (D8)\n      primaryForeground: \"#ffffff\",\n      secondary: \"#262626\", // ground-800\n      secondaryForeground: \"#f5f5f5\",\n      destructive: \"#ef4444\", // red-500 (slightly lighter for dark)\n      destructiveForeground: \"#ffffff\",\n      success: \"#CDEA19\", // lime — functional semantic only\n      successForeground: \"#0a0a0a\",\n      warning: \"#221600\", // butter-950 surface\n      warningForeground: \"#fffad0\", // butter-100\n      ring: \"#c100f1\", // purple-500 = brand.primary\n    },\n  },\n\n  /* ============================================================== *\n   *  TYPOGRAPHY                                                      *\n   * ============================================================== */\n\n  fontFamily: {\n    sans: 'Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif',\n    display: 'Gabarito, Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif',\n    mono: 'ui-monospace, \"SFMono-Regular\", \"Menlo\", \"Consolas\", monospace',\n  },\n\n  /** Type scale utilities — emitted as Tailwind v4 `@utility` blocks. */\n  typeScale: {\n    \"display-xl\": { family: \"display\", size: \"3rem\", weight: 400, lineHeight: \"1.15\" },\n    display: { family: \"display\", size: \"2.25rem\", weight: 400, lineHeight: \"1.15\" },\n    \"heading-xl\": { family: \"display\", size: \"1.875rem\", weight: 400, lineHeight: \"1.2\" },\n    heading: { family: \"display\", size: \"1.5rem\", weight: 400, lineHeight: \"1.2\" },\n    subheading: { family: \"display\", size: \"1.25rem\", weight: 400, lineHeight: \"1.4\" },\n    \"body-lg\": { family: \"sans\", size: \"1rem\", weight: 400, lineHeight: \"1.625\" },\n    body: { family: \"sans\", size: \"0.875rem\", weight: 400, lineHeight: \"1.625\" },\n    \"body-sm\": { family: \"sans\", size: \"0.75rem\", weight: 500, lineHeight: \"1.625\" },\n    caption: { family: \"sans\", size: \"0.75rem\", weight: 400, lineHeight: \"1.625\" },\n    \"caption-xs\": { family: \"sans\", size: \"0.625rem\", weight: 400, lineHeight: \"1.625\" },\n\n    /* --- \"Eyebrow\" family — uppercase tracked label used above headlines, --- *\n     *   on badges, and on section markers. `eyebrow` is the canonical name;   *\n     *   `overline` (Material parlance), `kicker` (editorial parlance) and     *\n     *   `label` (legacy) are aliases of the same scale so consumers can pick  *\n     *   whichever vocabulary reads best in their context. `eyebrow-sm` is    *\n     *   the compact variant for badge-sized chips and tiny status pills.      */\n    eyebrow: {\n      family: \"sans\",\n      size: \"0.75rem\",\n      weight: 600,\n      lineHeight: \"1\",\n      letterSpacing: \"0.1em\",\n      textTransform: \"uppercase\" as const,\n    },\n    \"eyebrow-sm\": {\n      family: \"sans\",\n      size: \"0.625rem\",\n      weight: 600,\n      lineHeight: \"1\",\n      letterSpacing: \"0.1em\",\n      textTransform: \"uppercase\" as const,\n    },\n    overline: {\n      family: \"sans\",\n      size: \"0.75rem\",\n      weight: 600,\n      lineHeight: \"1\",\n      letterSpacing: \"0.1em\",\n      textTransform: \"uppercase\" as const,\n    },\n    kicker: {\n      family: \"sans\",\n      size: \"0.75rem\",\n      weight: 600,\n      lineHeight: \"1\",\n      letterSpacing: \"0.1em\",\n      textTransform: \"uppercase\" as const,\n    },\n    label: {\n      family: \"sans\",\n      size: \"0.75rem\",\n      weight: 600,\n      lineHeight: \"1\",\n      letterSpacing: \"0.1em\",\n      textTransform: \"uppercase\" as const,\n    },\n  },\n\n  /* ============================================================== *\n   *  GEOMETRY                                                        *\n   * ============================================================== */\n\n  radius: {\n    base: \"0.5rem\",\n    sm: \"calc(0.5rem - 4px)\",\n    md: \"calc(0.5rem - 2px)\",\n    lg: \"calc(0.5rem + 2px)\",\n    xl: \"calc(0.5rem + 4px)\",\n    full: \"9999px\",\n  },\n\n  /* ============================================================== *\n   *  Z-INDEX — semantic layering scale                              *\n   * ============================================================== */\n\n  zIndex: {\n    dropdown: 40,\n    sticky: 50,\n    fixed: 60,\n    modal: 100,\n    popover: 110,\n    tooltip: 120,\n  },\n\n  shadow: {\n    natural:\n      \"0 0px 0px 1px rgba(0, 0, 0, 0.06), 0 1px 1px -0.5px rgba(0, 0, 0, 0.06), 0 3px 3px -1.5px rgba(0, 0, 0, 0.06)\",\n    elevated:\n      \"0 0px 0px 1px rgba(0, 0, 0, 0.06), 0 1px 1px -0.5px rgba(0, 0, 0, 0.06), 0 3px 3px -1.5px rgba(0, 0, 0, 0.06), 0 6px 6px -3px rgba(0, 0, 0, 0.06), 0 12px 12px -6px rgba(0, 0, 0, 0.04), 0 24px 24px -12px rgba(0, 0, 0, 0.04), 0 24px 24px 2px rgba(0, 0, 0, 0.1)\",\n  },\n\n  /* ============================================================== *\n   *  ANIMATION                                                       *\n   * ============================================================== */\n\n  animation: {\n    \"accordion-down\": \"accordion-down 0.2s ease-out\",\n    \"accordion-up\": \"accordion-up 0.2s ease-out\",\n    \"caret-blink\": \"caret-blink 1.25s ease-out infinite\",\n  },\n} as const;\n\nexport type Tokens = typeof tokens;\nexport type SemanticTokens = typeof tokens.semantic.light;\n"]}