@mikenotthepope/substrateui 0.1.2 → 0.1.3

package/dist/styles.css

@@ -0,0 +1,583 @@
+/*
+ * SUBSTRATEUI — Design Token Stylesheet
+ * ======================================
+ *
+ * Import this file into your Tailwind CSS v4 pipeline:
+ *   @import "tailwindcss";
+ *   @import "tw-animate-css";
+ *   @import "substrateui/styles.css";
+ *   @source "../node_modules/substrateui";
+ *
+ * Architecture:
+ *   1. CSS variables in :root / .dark (the token values)
+ *   2. @theme inline (maps variables to Tailwind utilities)
+ *   3. Components reference utility classes — automatic dark mode
+ */
+
+@custom-variant dark (&:is(.dark *));
+
+
+/* ================================================================
+   LAYER 1: RAW PALETTE (OKLCH)
+   Never reference these in components directly.
+================================================================ */
+
+:root {
+  /* ── Plum ── */
+  --raw-plum-50:  oklch(0.975 0.009 314);
+  --raw-plum-100: oklch(0.937 0.024 313);
+  --raw-plum-200: oklch(0.871 0.049 313);
+  --raw-plum-300: oklch(0.772 0.086 314);
+  --raw-plum-400: oklch(0.657 0.129 314);
+  --raw-plum-500: oklch(0.556 0.150 314);
+  --raw-plum-600: oklch(0.480 0.145 314);
+  --raw-plum-700: oklch(0.417 0.127 315);
+  --raw-plum-800: oklch(0.350 0.105 314);
+  --raw-plum-900: oklch(0.290 0.084 314);
+  --raw-plum-950: oklch(0.226 0.066 312);
+
+  /* ── Amber (CVD-safe secondary) ── */
+  --raw-amber-50:  oklch(0.987 0.021 95);
+  --raw-amber-100: oklch(0.962 0.058 96);
+  --raw-amber-200: oklch(0.924 0.115 96);
+  --raw-amber-300: oklch(0.879 0.153 92);
+  --raw-amber-400: oklch(0.837 0.164 84);
+  --raw-amber-500: oklch(0.711 0.147 78);
+  --raw-amber-600: oklch(0.631 0.130 77);
+  --raw-amber-700: oklch(0.518 0.106 77);
+  --raw-amber-800: oklch(0.435 0.088 78);
+
+  /* ── Warm Neutrals ── */
+  --raw-warm-white: oklch(0.994 0.003 85);
+  --raw-warm-50:  oklch(0.980 0.003 67);
+  --raw-warm-100: oklch(0.954 0.007 68);
+  --raw-warm-200: oklch(0.909 0.011 77);
+  --raw-warm-300: oklch(0.840 0.016 74);
+  --raw-warm-400: oklch(0.710 0.015 68);
+  --raw-warm-500: oklch(0.570 0.015 71);
+  --raw-warm-600: oklch(0.457 0.012 68);
+  --raw-warm-700: oklch(0.359 0.010 74);
+  --raw-warm-800: oklch(0.275 0.009 75);
+  --raw-warm-850: oklch(0.236 0.006 78);
+  --raw-warm-900: oklch(0.211 0.005 68);
+  --raw-warm-950: oklch(0.170 0.004 48);
+
+  /* ── Status ── */
+  --raw-success: oklch(0.614 0.130 152);
+  --raw-warning: oklch(0.711 0.147 78);
+  --raw-error:   oklch(0.570 0.180 25);
+
+  /* ── Forest (green base — demonstration alt theme) ── */
+  --raw-forest-50:  oklch(0.975 0.018 155);
+  --raw-forest-100: oklch(0.935 0.038 155);
+  --raw-forest-200: oklch(0.865 0.068 155);
+  --raw-forest-300: oklch(0.765 0.105 155);
+  --raw-forest-400: oklch(0.655 0.135 155);
+  --raw-forest-500: oklch(0.555 0.150 155);
+  --raw-forest-600: oklch(0.465 0.145 155);
+  --raw-forest-700: oklch(0.385 0.120 155);
+  --raw-forest-800: oklch(0.305 0.090 155);
+  --raw-forest-900: oklch(0.225 0.060 155);
+  --raw-forest-950: oklch(0.150 0.040 155);
+
+  /* ── Terracotta (warm accent for forest theme) ── */
+  --raw-terracotta-50:  oklch(0.975 0.018 40);
+  --raw-terracotta-100: oklch(0.935 0.040 40);
+  --raw-terracotta-200: oklch(0.865 0.075 40);
+  --raw-terracotta-300: oklch(0.765 0.115 40);
+  --raw-terracotta-400: oklch(0.680 0.145 40);
+  --raw-terracotta-500: oklch(0.600 0.165 40);
+  --raw-terracotta-600: oklch(0.520 0.155 40);
+  --raw-terracotta-700: oklch(0.440 0.125 40);
+  --raw-terracotta-800: oklch(0.360 0.098 40);
+  --raw-terracotta-900: oklch(0.280 0.070 40);
+  --raw-terracotta-950: oklch(0.200 0.050 40);
+}
+
+
+/* ================================================================
+   LAYER 2: SEMANTIC TOKENS — LIGHT MODE
+
+   Shadcn-expected names: --background, --foreground, --primary, etc.
+   SubstrateUI extended names: --surface-*, --border-*, --status-*, etc.
+
+   Dark mode (.dark) redefines ONLY this layer.
+================================================================ */
+
+:root {
+  --radius: 0.625rem;
+
+  /* ── Shadcn core tokens ── */
+  --background: var(--raw-warm-50);
+  --foreground: var(--raw-warm-900);
+  --card: var(--raw-warm-white);
+  --card-foreground: var(--raw-warm-900);
+  --popover: var(--raw-warm-white);
+  --popover-foreground: var(--raw-warm-900);
+  --primary: var(--raw-plum-600);
+  --primary-foreground: oklch(1 0 0);
+  --secondary: var(--raw-warm-100);
+  --secondary-foreground: var(--raw-warm-900);
+  --muted: var(--raw-warm-100);
+  --muted-foreground: var(--raw-warm-600);
+  --accent: var(--raw-plum-100);
+  --accent-foreground: var(--raw-plum-700);
+  --destructive: var(--raw-error);
+  --border: var(--raw-warm-500);
+  --input: var(--raw-warm-500);
+  --ring: var(--raw-plum-500);
+
+  /* ── Chart colors ── */
+  --chart-1: var(--raw-plum-600);
+  --chart-2: var(--raw-amber-500);
+  --chart-3: var(--raw-plum-400);
+  --chart-4: var(--raw-amber-300);
+  --chart-5: var(--raw-plum-200);
+
+  /* ── Sidebar ── */
+  --sidebar: var(--raw-warm-white);
+  --sidebar-foreground: var(--raw-warm-900);
+  --sidebar-primary: var(--raw-plum-600);
+  --sidebar-primary-foreground: oklch(1 0 0);
+  --sidebar-accent: var(--raw-plum-100);
+  --sidebar-accent-foreground: var(--raw-plum-700);
+  --sidebar-border: var(--raw-warm-200);
+  --sidebar-ring: var(--raw-plum-500);
+
+  /* ── SubstrateUI extended: Surfaces ── */
+  --surface-ground: var(--raw-warm-50);
+  --surface-page: var(--raw-warm-white);
+  --surface-raised: var(--raw-warm-white);
+  --surface-sunken: var(--raw-warm-100);
+  --surface-interactive: var(--raw-warm-100);
+  --surface-interactive-hover: var(--raw-warm-200);
+
+  /* ── SubstrateUI extended: Borders ── */
+  --border-default: var(--raw-warm-500);
+  --border-strong: var(--raw-warm-700);
+  --border-subtle: var(--raw-warm-200);
+  --border-accent: var(--raw-plum-500);
+
+  /* ── SubstrateUI extended: Accent fills ── */
+  --accent-fill: var(--raw-plum-600);
+  --accent-fill-hover: var(--raw-plum-700);
+  --accent-surface: var(--raw-plum-100);
+
+  /* ── SubstrateUI extended: Secondary (amber) ── */
+  --secondary-fill: var(--raw-amber-500);
+  --secondary-fill-hover: var(--raw-amber-600);
+  --secondary-surface: var(--raw-amber-100);
+  --secondary-text: var(--raw-amber-700);
+
+  /* ── SubstrateUI extended: Status (always pair with icons!) ── */
+  --status-success: var(--raw-success);
+  --status-success-surface: oklch(0.92 0.05 152);
+  --status-success-text: oklch(0.45 0.10 152);
+  --status-warning: var(--raw-warning);
+  --status-warning-surface: var(--raw-amber-100);
+  --status-warning-text: oklch(0.45 0.09 78);
+  --status-error: var(--raw-error);
+  --status-error-surface: oklch(0.93 0.04 25);
+  --status-error-text: oklch(0.45 0.14 25);
+
+  /* ── SubstrateUI structural (shared across modes) ── */
+  --border-width: 2px;
+  --press-depth: 1.5px;
+}
+
+
+/* ── DARK MODE ── */
+
+.dark {
+  /* ── Shadcn core ── */
+  --background: var(--raw-warm-950);
+  --foreground: var(--raw-warm-100);
+  --card: var(--raw-warm-850);
+  --card-foreground: var(--raw-warm-100);
+  --popover: var(--raw-warm-800);
+  --popover-foreground: var(--raw-warm-100);
+  --primary: var(--raw-plum-500);
+  --primary-foreground: oklch(1 0 0);
+  --secondary: var(--raw-warm-800);
+  --secondary-foreground: var(--raw-warm-100);
+  --muted: var(--raw-warm-800);
+  --muted-foreground: var(--raw-warm-400);
+  --accent: oklch(0.556 0.150 314 / 0.15);
+  --accent-foreground: var(--raw-plum-300);
+  --destructive: oklch(0.58 0.18 25);
+  --border: var(--raw-warm-400);
+  --input: var(--raw-warm-400);
+  --ring: var(--raw-plum-400);
+
+  /* ── Chart ── */
+  --chart-1: var(--raw-plum-400);
+  --chart-2: var(--raw-amber-400);
+  --chart-3: var(--raw-plum-300);
+  --chart-4: var(--raw-amber-300);
+  --chart-5: var(--raw-plum-600);
+
+  /* ── Sidebar ── */
+  --sidebar: var(--raw-warm-900);
+  --sidebar-foreground: var(--raw-warm-100);
+  --sidebar-primary: var(--raw-plum-500);
+  --sidebar-primary-foreground: oklch(1 0 0);
+  --sidebar-accent: oklch(0.556 0.150 314 / 0.15);
+  --sidebar-accent-foreground: var(--raw-plum-300);
+  --sidebar-border: var(--raw-warm-700);
+  --sidebar-ring: var(--raw-plum-400);
+
+  /* ── SubstrateUI extended: Surfaces ── */
+  --surface-ground: var(--raw-warm-950);
+  --surface-page: var(--raw-warm-900);
+  --surface-raised: var(--raw-warm-850);
+  --surface-sunken: var(--raw-warm-950);
+  --surface-interactive: var(--raw-warm-800);
+  --surface-interactive-hover: var(--raw-warm-700);
+
+  /* ── SubstrateUI extended: Borders ── */
+  --border-default: var(--raw-warm-400);
+  --border-strong: var(--raw-warm-400);
+  --border-subtle: var(--raw-warm-800);
+  --border-accent: var(--raw-plum-400);
+
+  /* ── SubstrateUI extended: Accent fills ── */
+  --accent-fill: var(--raw-plum-500);
+  --accent-fill-hover: var(--raw-plum-400);
+  --accent-surface: oklch(0.556 0.150 314 / 0.15);
+
+  /* ── SubstrateUI extended: Secondary (amber) ── */
+  --secondary-fill: var(--raw-amber-400);
+  --secondary-fill-hover: var(--raw-amber-300);
+  --secondary-surface: oklch(0.837 0.164 84 / 0.12);
+  --secondary-text: var(--raw-amber-300);
+
+  /* ── SubstrateUI extended: Status ── */
+  --status-success: oklch(0.70 0.13 152);
+  --status-success-surface: oklch(0.614 0.130 152 / 0.15);
+  --status-success-text: oklch(0.75 0.10 152);
+  --status-warning: var(--raw-amber-400);
+  --status-warning-surface: oklch(0.711 0.147 78 / 0.15);
+  --status-warning-text: var(--raw-amber-300);
+  --status-error: oklch(0.65 0.18 25);
+  --status-error-surface: oklch(0.570 0.180 25 / 0.15);
+  --status-error-text: oklch(0.75 0.12 25);
+}
+
+
+/* ================================================================
+   LAYER 2b: ALT THEME — FOREST
+
+   Attached via [data-theme="forest"] on <html>. Mirrors every
+   semantic token from :root / .dark, remapped to the forest +
+   terracotta palettes. Orthogonal to light/dark — the .dark class
+   still toggles modes within the forest theme.
+================================================================ */
+
+[data-theme="forest"] {
+  /* ── Shadcn core tokens ── */
+  --background: var(--raw-forest-50);
+  --foreground: var(--raw-forest-900);
+  --card: oklch(0.992 0.006 155);
+  --card-foreground: var(--raw-forest-900);
+  --popover: oklch(0.992 0.006 155);
+  --popover-foreground: var(--raw-forest-900);
+  --primary: var(--raw-forest-600);
+  --primary-foreground: oklch(1 0 0);
+  --secondary: var(--raw-forest-100);
+  --secondary-foreground: var(--raw-forest-900);
+  --muted: var(--raw-forest-100);
+  --muted-foreground: var(--raw-forest-700);
+  --accent: var(--raw-terracotta-100);
+  --accent-foreground: var(--raw-terracotta-800);
+  --destructive: var(--raw-error);
+  --border: var(--raw-forest-500);
+  --input: var(--raw-forest-500);
+  --ring: var(--raw-forest-500);
+
+  /* ── Chart colors ── */
+  --chart-1: var(--raw-forest-600);
+  --chart-2: var(--raw-terracotta-500);
+  --chart-3: var(--raw-forest-400);
+  --chart-4: var(--raw-terracotta-300);
+  --chart-5: var(--raw-forest-200);
+
+  /* ── Sidebar ── */
+  --sidebar: oklch(0.992 0.006 155);
+  --sidebar-foreground: var(--raw-forest-900);
+  --sidebar-primary: var(--raw-forest-600);
+  --sidebar-primary-foreground: oklch(1 0 0);
+  --sidebar-accent: var(--raw-terracotta-100);
+  --sidebar-accent-foreground: var(--raw-terracotta-800);
+  --sidebar-border: var(--raw-forest-200);
+  --sidebar-ring: var(--raw-forest-500);
+
+  /* ── Surfaces ── */
+  --surface-ground: var(--raw-forest-50);
+  --surface-page: oklch(0.992 0.006 155);
+  --surface-raised: oklch(0.992 0.006 155);
+  --surface-sunken: var(--raw-forest-100);
+  --surface-interactive: var(--raw-forest-100);
+  --surface-interactive-hover: var(--raw-forest-200);
+
+  /* ── Borders ── */
+  --border-default: var(--raw-forest-500);
+  --border-strong: var(--raw-forest-700);
+  --border-subtle: var(--raw-forest-200);
+  --border-accent: var(--raw-forest-500);
+
+  /* ── Accent fills ── */
+  --accent-fill: var(--raw-forest-600);
+  --accent-fill-hover: var(--raw-forest-700);
+  --accent-surface: var(--raw-forest-100);
+
+  /* ── Secondary (terracotta) ── */
+  --secondary-fill: var(--raw-terracotta-500);
+  --secondary-fill-hover: var(--raw-terracotta-600);
+  --secondary-surface: var(--raw-terracotta-100);
+  --secondary-text: var(--raw-terracotta-700);
+
+  /* ── Status (shared across themes) ── */
+  --status-success: var(--raw-success);
+  --status-success-surface: oklch(0.92 0.05 152);
+  --status-success-text: oklch(0.45 0.10 152);
+  --status-warning: var(--raw-warning);
+  --status-warning-surface: var(--raw-terracotta-100);
+  --status-warning-text: oklch(0.45 0.09 78);
+  --status-error: var(--raw-error);
+  --status-error-surface: oklch(0.93 0.04 25);
+  --status-error-text: oklch(0.45 0.14 25);
+}
+
+
+[data-theme="forest"].dark {
+  /* ── Shadcn core ── */
+  --background: var(--raw-forest-950);
+  --foreground: var(--raw-forest-100);
+  --card: var(--raw-forest-900);
+  --card-foreground: var(--raw-forest-100);
+  --popover: var(--raw-forest-800);
+  --popover-foreground: var(--raw-forest-100);
+  --primary: var(--raw-forest-600);
+  --primary-foreground: oklch(1 0 0);
+  --secondary: var(--raw-forest-800);
+  --secondary-foreground: var(--raw-forest-100);
+  --muted: var(--raw-forest-800);
+  --muted-foreground: var(--raw-forest-300);
+  --accent: oklch(0.600 0.165 40 / 0.18);
+  --accent-foreground: var(--raw-terracotta-300);
+  --destructive: oklch(0.58 0.18 25);
+  --border: var(--raw-forest-400);
+  --input: var(--raw-forest-400);
+  --ring: var(--raw-forest-400);
+
+  /* ── Chart ── */
+  --chart-1: var(--raw-forest-400);
+  --chart-2: var(--raw-terracotta-400);
+  --chart-3: var(--raw-forest-300);
+  --chart-4: var(--raw-terracotta-300);
+  --chart-5: var(--raw-forest-600);
+
+  /* ── Sidebar ── */
+  --sidebar: var(--raw-forest-900);
+  --sidebar-foreground: var(--raw-forest-100);
+  --sidebar-primary: var(--raw-forest-600);
+  --sidebar-primary-foreground: oklch(1 0 0);
+  --sidebar-accent: oklch(0.600 0.165 40 / 0.18);
+  --sidebar-accent-foreground: var(--raw-terracotta-300);
+  --sidebar-border: var(--raw-forest-700);
+  --sidebar-ring: var(--raw-forest-400);
+
+  /* ── Surfaces ── */
+  --surface-ground: var(--raw-forest-950);
+  --surface-page: var(--raw-forest-900);
+  --surface-raised: var(--raw-forest-800);
+  --surface-sunken: var(--raw-forest-950);
+  --surface-interactive: var(--raw-forest-800);
+  --surface-interactive-hover: var(--raw-forest-700);
+
+  /* ── Borders ── */
+  --border-default: var(--raw-forest-400);
+  --border-strong: var(--raw-forest-300);
+  --border-subtle: var(--raw-forest-800);
+  --border-accent: var(--raw-forest-400);
+
+  /* ── Accent fills ── */
+  --accent-fill: var(--raw-forest-500);
+  --accent-fill-hover: var(--raw-forest-400);
+  --accent-surface: oklch(0.600 0.165 40 / 0.18);
+
+  /* ── Secondary (terracotta) ── */
+  --secondary-fill: var(--raw-terracotta-400);
+  --secondary-fill-hover: var(--raw-terracotta-300);
+  --secondary-surface: oklch(0.680 0.145 40 / 0.15);
+  --secondary-text: var(--raw-terracotta-300);
+
+  /* ── Status ── */
+  --status-success: oklch(0.70 0.13 152);
+  --status-success-surface: oklch(0.614 0.130 152 / 0.15);
+  --status-success-text: oklch(0.75 0.10 152);
+  --status-warning: var(--raw-terracotta-400);
+  --status-warning-surface: oklch(0.600 0.165 40 / 0.18);
+  --status-warning-text: var(--raw-terracotta-300);
+  --status-error: oklch(0.65 0.18 25);
+  --status-error-surface: oklch(0.570 0.180 25 / 0.15);
+  --status-error-text: oklch(0.75 0.12 25);
+}
+
+
+/* ================================================================
+   @theme inline — MAPS VARIABLES TO TAILWIND UTILITIES
+
+   This replaces tailwind.config.ts entirely.
+   After this block, bg-primary, text-foreground, etc. all work.
+================================================================ */
+
+@theme inline {
+  /* ── Shadcn core (required for components to work) ── */
+  --radius: 0.625rem;
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+
+  /* ── Sidebar ── */
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+
+  /* ── SubstrateUI: Raw palette (for one-off use: bg-plum-600) ── */
+  --color-plum-50:  var(--raw-plum-50);
+  --color-plum-100: var(--raw-plum-100);
+  --color-plum-200: var(--raw-plum-200);
+  --color-plum-300: var(--raw-plum-300);
+  --color-plum-400: var(--raw-plum-400);
+  --color-plum-500: var(--raw-plum-500);
+  --color-plum-600: var(--raw-plum-600);
+  --color-plum-700: var(--raw-plum-700);
+  --color-plum-800: var(--raw-plum-800);
+  --color-plum-900: var(--raw-plum-900);
+  --color-plum-950: var(--raw-plum-950);
+
+  --color-amber-50:  var(--raw-amber-50);
+  --color-amber-100: var(--raw-amber-100);
+  --color-amber-200: var(--raw-amber-200);
+  --color-amber-300: var(--raw-amber-300);
+  --color-amber-400: var(--raw-amber-400);
+  --color-amber-500: var(--raw-amber-500);
+  --color-amber-600: var(--raw-amber-600);
+  --color-amber-700: var(--raw-amber-700);
+  --color-amber-800: var(--raw-amber-800);
+
+  --color-warm-50:  var(--raw-warm-50);
+  --color-warm-100: var(--raw-warm-100);
+  --color-warm-200: var(--raw-warm-200);
+  --color-warm-300: var(--raw-warm-300);
+  --color-warm-400: var(--raw-warm-400);
+  --color-warm-500: var(--raw-warm-500);
+  --color-warm-600: var(--raw-warm-600);
+  --color-warm-700: var(--raw-warm-700);
+  --color-warm-800: var(--raw-warm-800);
+  --color-warm-900: var(--raw-warm-900);
+  --color-warm-950: var(--raw-warm-950);
+
+  /* ── SubstrateUI: Semantic surfaces ── */
+  --color-surface-ground: var(--surface-ground);
+  --color-surface-page: var(--surface-page);
+  --color-surface-raised: var(--surface-raised);
+  --color-surface-sunken: var(--surface-sunken);
+  --color-surface-interactive: var(--surface-interactive);
+  --color-surface-interactive-hover: var(--surface-interactive-hover);
+
+  /* ── SubstrateUI: Status ── */
+  --color-status-success: var(--status-success);
+  --color-status-success-surface: var(--status-success-surface);
+  --color-status-success-text: var(--status-success-text);
+  --color-status-warning: var(--status-warning);
+  --color-status-warning-surface: var(--status-warning-surface);
+  --color-status-warning-text: var(--status-warning-text);
+  --color-status-error: var(--status-error);
+  --color-status-error-surface: var(--status-error-surface);
+  --color-status-error-text: var(--status-error-text);
+
+  /* ── Typography ── */
+  --font-sans: "DM Sans", system-ui, sans-serif;
+  --font-mono: "DM Mono", "SF Mono", monospace;
+}
+
+
+/* ================================================================
+   BASE STYLES
+================================================================ */
+
+* {
+  border-color: var(--border);
+}
+
+@keyframes sui-spin {
+  to { transform: rotate(360deg); }
+}
+[data-slot="spinner"] {
+  animation: sui-spin 1s linear infinite;
+  border-color: var(--border);
+  border-top-color: var(--primary);
+}
+
+body {
+  background-color: var(--background);
+  color: var(--foreground);
+  font-family: var(--font-sans);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+
+/* ── Layout utilities ── */
+.grid-auto-fill {
+  grid-template-columns: repeat(auto-fill, minmax(var(--grid-min, 280px), 1fr));
+}
+.grid-auto-fit {
+  grid-template-columns: repeat(auto-fit, minmax(var(--grid-min, 280px), 1fr));
+}
+
+
+/* ================================================================
+   REDUCED MOTION
+
+   Respects prefers-reduced-motion: reduce for users with
+   vestibular disorders or motion sensitivity.
+================================================================ */
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+    scroll-behavior: auto !important;
+  }
+}

package/dist/tabs-d_9ZRlWe.d.ts

@@ -0,0 +1,18 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+
+/** Root container for a tabbed interface built on Radix Tabs.
+ *
+ * @example
+ * <Tabs defaultValue="tab1"><TabsList><TabsTrigger value="tab1">Tab</TabsTrigger></TabsList><TabsContent value="tab1">Content</TabsContent></Tabs>
+ */
+declare const Tabs: React.ForwardRefExoticComponent<TabsPrimitive.TabsProps & React.RefAttributes<HTMLDivElement>>;
+/** Horizontal container for tab triggers with a sunken background. */
+declare function TabsList({ className, ref, ...props }: React.ComponentPropsWithRef<typeof TabsPrimitive.List>): react_jsx_runtime.JSX.Element;
+/** Individual tab button that activates its associated content panel. */
+declare function TabsTrigger({ className, ref, ...props }: React.ComponentPropsWithRef<typeof TabsPrimitive.Trigger>): react_jsx_runtime.JSX.Element;
+/** Content panel displayed when its matching tab trigger is active. */
+declare function TabsContent({ className, ref, ...props }: React.ComponentPropsWithRef<typeof TabsPrimitive.Content>): react_jsx_runtime.JSX.Element;
+
+export { Tabs as T, TabsContent as a, TabsList as b, TabsTrigger as c };

package/dist/utils.d.ts

@@ -0,0 +1,5 @@
+import { ClassValue } from 'clsx';
+
+declare function cn(...inputs: ClassValue[]): string;
+
+export { cn };

package/dist/utils.js

@@ -0,0 +1,4 @@
+"use client";
+export { cn } from './chunk-IQWAGBDM.js';
+//# sourceMappingURL=utils.js.map
+//# sourceMappingURL=utils.js.map

package/dist/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"utils.js"}