@psnext/design-system 1.5.1 → 2.1.0

package/dist/styles/tokens/mode-light.css

@@ -4,98 +4,75 @@
  */
 
 :root {
-  --bg-background: #ffffff; /** Use for general backgrounds. */
-  --bg-primary: #111827;
-  --bg-secondary: #f3f4f6;
-  --bg-accent: #f3f4f6; /** Level 1, official */
-  --bg-muted: #f3f4f6;
-  --bg-destructive: #d2012b;
-  --bg-destructive-alpha: rgb(220 38 38 / 0.2);
-  --bg-destructive-subtle: #fef2f5;
-  --bg-input: #ffffff;
-  --bg-page-bg-brand: #fbccd6;
-  --bg-page-bg-neutral: #e2e8f0;
-  --bg-info: #bae6fd;
-  --bg-info-subtle: #e0f2fe;
-  --bg-success: #d9f99d;
-  --bg-success-subtle: #ecfccb;
-  --bg-warning: #fed7aa;
-  --bg-warning-subtle: #ffedd5;
-  --bg-error: #fbccd6;
-  --bg-error-subtle: #fde6ea;
-  --bg-backdrop: rgb(31 40 50 / 0.4);
-  --content-foreground: #030712;
-  --content-primary-foreground: #f9fafb;
-  --content-secondary-foreground: #111827;
-  --content-accent-foreground: #111827;
-  --content-muted-foreground: #6b7280;
-  --content-destructive-foreground: #ffffff;
-  --content-info: #0284c7;
-  --content-info-bold: #075985;
-  --content-success: #65a30d;
-  --content-success-bold: #3f6212;
-  --content-warning: #ea580c;
-  --content-warning-bold: #9a3412;
-  --content-error: #d2012b;
-  --content-error-bold: #8d011d;
-  --content-destructive: #d2012b;
-  --content-destructive-subtle: #f699ac;
-  --card-card-100: #ffffff;
-  --card-card-90: rgb(255 255 255 / 0.9);
-  --card-card-80: rgb(255 255 255 / 0.8);
-  --card-card-60: rgb(255 255 255 / 0.6);
-  --card-card-40: rgb(255 255 255 / 0.4);
-  --card-card-20: rgb(255 255 255 / 0.2);
-  --card-card-10: rgb(255 255 255 / 0.1);
-  --card-card-foreground: #030712;
-  --brand-colors-brand-50: #fef2f5;
-  --brand-colors-brand-100: #fde6ea;
-  --brand-colors-brand-200: #fbccd6;
-  --brand-colors-brand-300: #f699ac;
-  --brand-colors-brand-400: #f26783;
-  --brand-colors-brand-500: #e90130;
-  --brand-colors-brand-600: #d2012b;
-  --brand-colors-brand-700: #bc0126;
-  --brand-colors-brand-800: #8d011d;
-  --brand-colors-brand-900: #6c0016;
-  --brand-colors-brand-950: #3d000d;
-  --popover-popover: #1f2832;
-  --popover-popover-foreground: #ffffff;
-  --unofficial-foreground-alt: #374151; /** Please use this for body text. */
-  --unofficial-body-background: #ffffff;
-  --unofficial-mid-alt: #4b5563;
-  --unofficial-ghost-foreground: #374151;
-  --unofficial-ghost: rgb(255 255 255 / 0.0001);
-  --unofficial-ghost-hover: rgb(31 40 50 / 0.05);
-  --unofficial-primary-hover: #374151;
-  --unofficial-secondary-hover: #f9fafb;
-  --unofficial-outline: rgb(255 255 255 / 0.1);
-  --unofficial-outline-hover: rgb(31 40 50 / 0.0333);
-  --unofficial-outline-active: rgb(31 40 50 / 0.05);
-  --unofficial-accent-0: #f9fafb;
-  --unofficial-accent-2: #e5e7eb;
-  --unofficial-accent-3: #d1d5db;
-  --border-border-0: #f9fafb;
-  --border-border-1: #f3f4f6;
-  --border-border-2: #e5e7eb; /** level 2, official. See docs. */
-  --border-border-3: #d1d5db;
-  --border-border-4: #9ca3af;
-  --border-border-5: #6b7280;
-  --border-destructive-border: #d2012b;
-  --border-success-border: #65a30d;
-  --border-warning-border: #ea580c;
-  --focus-ring: #d1d5db; /** Focus ring */
-  --focus-ring-error: #f699ac; /** Focus ring error */
-  --sidebar-sidebar: #f9fafb;
-  --sidebar-sidebar-foreground: #374151;
-  --sidebar-sidebar-accent: #f3f4f6;
-  --sidebar-sidebar-accent-foreground: #111827;
-  --sidebar-sidebar-primary: #111827;
-  --sidebar-sidebar-primary-foreground: #f9fafb;
-  --sidebar-sidebar-border: #e5e7eb;
-  --sidebar-sidebar-ring: #d1d5db;
-  --sidebar-unofficial-sidebar-muted: #6b7280;
-  --obra-shadcn-docs-obra-shadcn-ui-docs-1: #bfdbfe;
-  --obra-shadcn-docs-obra-shadcn-ui-docs-2: #fef9c3;
-  --focus-ring-success: var(--content-success); /** Focus ring error */
+  --primary-bg: #ffffff; /** Use for general backgrounds. */
+  --primary-invert-bg: #111827;
+  --secondary-bg: #e5e7eb;
+  --muted-bg: #f3f4f6;
+  --info-bg: #e0f2fe;
+  --success-bg: #ecfccb;
+  --warning-bg: #ffedd5;
+  --danger-bg: #fde6ea;
+  --primary-invert-hover-bg: #374151;
+  --secondary-hover-bg: #f9fafb;
+  --outline-bg: rgb(255 255 255 / 0.1);
+  --outline-hover-bg: rgb(31 40 50 / 0.0333);
+  --ghost-bg: rgb(255 255 255 / 0.0001);
+  --ghost-hover-bg: rgb(31 40 50 / 0.05);
+  --toggle-active-bg: rgb(31 40 50 / 0.05);
+  --input-bg: #ffffff;
+  --switch-active-bg: #84cc16;
+  --navbar-active-bg: #e90130;
+  --brand-gradient-from: var(--theme-brand-200);
+  --brand-gradient-to: #e2e8f0;
+  --overlay-bg: rgb(31 40 50 / 0.4);
+  --primary-txt: #111827;
+  --primary-invert-txt: #f3f4f6;
+  --secondary-txt: #374151;
+  --muted-txt: #6b7280;
+  --info-txt: #0369a1;
+  --success-txt: #4d7c0f;
+  --warning-txt: #c2410c;
+  --danger-txt: #bc0126;
+  --primary-border: #e5e7eb; /** level 2, official. See docs. */
+  --primary-invert-border: #9ca3af;
+  --secondary-border: #d1d5db;
+  --muted-border: #f3f4f6;
+  --selected-border: #1f2937;
+  --info-border: #0369a1;
+  --success-border: #4d7c0f;
+  --warning-border: #c2410c;
+  --danger-border: #bc0126;
+  --brand-50: var(--theme-brand-50);
+  --brand-200: var(--theme-brand-200);
+  --brand-800: var(--theme-brand-800);
+  --brand-950: var(--theme-brand-950);
+  --brand-500-primary: var(--theme-brand-500-primary);
+  --focus: #d1d5db; /** Focus ring */
+  --focus-error: #f699ac; /** Focus ring error */
+  --glass-20-bg: rgb(255 255 255 / 0.2);
+  --glass-40-bg: rgb(255 255 255 / 0.4);
+  --glass-60-bg: rgb(255 255 255 / 0.6);
+  --glass-none-bg: var(--primary-bg);
+  --chart-blue: #60a5fa;
+  --chart-blue-subtle: #bfdbfe;
+  --chart-emerald: #34d399;
+  --chart-emerald-subtle: #a7f3d0;
+  --chart-amber: #fbbf24;
+  --chart-amber-subtle: #fde68a;
+  --chart-red: #f26783;
+  --chart-red-subtle: #fbccd6;
+  --chart-purple: #c084fc;
+  --chart-purple-subtle: #e9d5ff;
+  --chart-lime: #a3e635;
+  --chart-lime-subtle: #d9f99d;
+  --chart-indigo: #818cf8;
+  --chart-indigo-subtle: #c7d2fe;
+  --chart-orange: #fb923c;
+  --chart-orange-subtle: #fed7aa;
+  --chart-1: #f54a00;
+  --chart-2: #009689;
+  --chart-3: #104e64;
+  --chart-4: #ffb900;
+  --chart-5: #fe9a00;
+  --brand-700: var(--theme-brand-700);
 }

package/dist/styles/tokens/shadows.css

@@ -4,11 +4,8 @@
  */
 
 :root {
-  --shadow-2xs: 0 1px 0 0 rgb(31 40 50 / 0);
-  --shadow-xs: 0 1px 2px 0 rgb(31 40 50 / 0);
-  --shadow-sm: 0 1px 3px 0 rgb(31 40 50 / 0.1), 0 1px 2px -1px rgb(31 40 50 / 0.1);
-  --shadow-md: 0 4px 6px -1px rgb(31 40 50 / 0.1), 0 2px 4px -2px rgb(31 40 50 / 0.1);
-  --shadow-lg: 0 10px 15px -3px rgb(31 40 50 / 0.1), 0 4px 6px -4px rgb(31 40 50 / 0.1);
-  --shadow-xl: 0 20px 25px -5px rgb(31 40 50 / 0.1), 0 8px 10px -6px rgb(31 40 50 / 0.1);
-  --shadow-2xl: 0 25px 50px -12px rgb(31 40 50 / 0.1);
+  --shadow-sm: 0 1px 3px 0 rgb(31 40 50 / 0.1);
+  --shadow-md: 0 4px 6px -1px rgb(31 40 50 / 0.1);
+  --shadow-lg: 0 10px 15px -3px rgb(31 40 50 / 0.1);
+  --shadow-xl: 0 20px 25px -5px rgb(31 40 50 / 0.1);
 }

package/dist/styles/tokens/spacing.css

@@ -4,41 +4,21 @@
  */
 
 :root {
-  --spacing-0: 0;
-  --spacing-1: 4px;
-  --spacing-2: 8px;
-  --spacing-3: 12px;
-  --spacing-4: 16px;
-  --spacing-5: 20px;
-  --spacing-6: 24px;
-  --spacing-7: 28px;
-  --spacing-8: 32px;
-  --spacing-9: 36px;
-  --spacing-10: 40px;
-  --spacing-11: 44px;
-  --spacing-12: 48px;
-  --spacing-14: 56px;
-  --spacing-16: 64px;
-  --spacing-20: 80px;
-  --spacing-24: 96px;
-  --spacing-28: 112px;
-  --spacing-32: 128px;
-  --spacing-36: 144px;
-  --spacing-40: 160px;
-  --spacing-44: 176px;
-  --spacing-48: 192px;
-  --spacing-52: 208px;
-  --spacing-56: 224px;
-  --spacing-60: 240px;
-  --spacing-64: 256px;
-  --spacing-72: 288px;
-  --spacing-80: 320px;
-  --spacing-96: 384px;
-  --spacing-0-5: 2px;
-  --spacing-0-75: 3px;
-  --spacing-1-25: 5px;
-  --spacing-1-5: 6px;
-  --spacing-2-5: 10px;
-  --spacing-3-5: 14px;
-  --spacing-infinite: 9999px;
+  --space-0: 0;
+  --space-2: 2px;
+  --space-4: 4px;
+  --space-8: 8px;
+  --space-12: 12px;
+  --space-16: 16px;
+  --space-20: 20px;
+  --space-24: 24px;
+  --space-32: 32px;
+  --space-40: 40px;
+  --space-48: 48px;
+  --space-56: 56px;
+  --space-64: 64px;
+  --space-80: 80px;
+  --space-96: 96px;
+  --space-128: 128px;
+  --space-256: 256px;
 }

package/dist/styles/tokens/theme-bodhi.css

@@ -4,32 +4,10 @@
  */
 
 .theme-bodhi {
-  --brand-neutrals-50: #f9fafb;
-  --brand-neutrals-100: #f3f4f6;
-  --brand-neutrals-200: #e5e7eb;
-  --brand-neutrals-300: #d1d5db;
-  --brand-neutrals-400: #9ca3af;
-  --brand-neutrals-500: #6b7280;
-  --brand-neutrals-600: #4b5563;
-  --brand-neutrals-700: #374151;
-  --brand-neutrals-800: #1f2937;
-  --brand-neutrals-900: #111827;
-  --brand-neutrals-950: #030712;
-  --brand-shades-50: #eff6ff;
-  --brand-shades-100: #dbeafe;
-  --brand-shades-200: #bfdbfe;
-  --brand-shades-300: #93c5fd;
-  --brand-shades-400: #60a5fa;
-  --brand-shades-500: #3b82f6;
-  --brand-shades-600: #2563eb;
-  --brand-shades-700: #1d4ed8;
-  --brand-shades-800: #1e40af;
-  --brand-shades-900: #1e3a8a;
-  --brand-shades-950: #172554;
-  --brand-combinations-1-brand-foreground: #ffffff;
-  --brand-combinations-1-brand: var(--brand-shades-500);
-  --brand-combinations-2-brand: var(--brand-shades-200);
-  --brand-combinations-2-brand-foreground: var(--brand-shades-800);
-  --brand-combinations-3-brand: var(--brand-shades-950);
-  --brand-combinations-3-brand-foreground: var(--brand-shades-300);
+  --theme-brand-50: #eff6ff;
+  --theme-brand-200: #bfdbfe;
+  --theme-brand-800: #1e40af;
+  --theme-brand-950: #172554;
+  --theme-brand-500-primary: #3b82f6;
+  --theme-brand-700: #1d4ed8; /* code-only stop, not in Figma yet */
 }

package/dist/styles/tokens/theme-slingshot.css

@@ -3,33 +3,12 @@
  * Re-run `pnpm tokens:css` after re-exporting tokens from Figma.
  */
 
+:root,
 .theme-slingshot {
-  --brand-neutrals-50: #f9fafb;
-  --brand-neutrals-100: #f3f4f6;
-  --brand-neutrals-200: #e5e7eb;
-  --brand-neutrals-300: #d1d5db;
-  --brand-neutrals-400: #9ca3af;
-  --brand-neutrals-500: #6b7280;
-  --brand-neutrals-600: #4b5563;
-  --brand-neutrals-700: #374151;
-  --brand-neutrals-800: #1f2937;
-  --brand-neutrals-900: #111827;
-  --brand-neutrals-950: #030712;
-  --brand-shades-50: #fef2f5;
-  --brand-shades-100: #fde6ea;
-  --brand-shades-200: #fbccd6;
-  --brand-shades-300: #f699ac;
-  --brand-shades-400: #f26783;
-  --brand-shades-500: #e90130;
-  --brand-shades-600: #d2012b;
-  --brand-shades-700: #bc0126;
-  --brand-shades-800: #8d011d;
-  --brand-shades-900: #6c0016;
-  --brand-shades-950: #3d000d;
-  --brand-combinations-1-brand-foreground: #ffffff;
-  --brand-combinations-1-brand: var(--brand-shades-500);
-  --brand-combinations-2-brand: var(--brand-shades-200);
-  --brand-combinations-2-brand-foreground: var(--brand-shades-800);
-  --brand-combinations-3-brand: var(--brand-shades-950);
-  --brand-combinations-3-brand-foreground: var(--brand-shades-300);
+  --theme-brand-50: #fef2f5;
+  --theme-brand-200: #fbccd6;
+  --theme-brand-800: #8d011d;
+  --theme-brand-950: #3d000d;
+  --theme-brand-500-primary: #e90130;
+  --theme-brand-700: #bc0126; /* code-only stop, not in Figma yet */
 }

package/dist/styles/tokens/theme-sustain.css

@@ -4,32 +4,10 @@
  */
 
 .theme-sustain {
-  --brand-neutrals-50: #f9fafb;
-  --brand-neutrals-100: #f3f4f6;
-  --brand-neutrals-200: #e5e7eb;
-  --brand-neutrals-300: #d1d5db;
-  --brand-neutrals-400: #9ca3af;
-  --brand-neutrals-500: #6b7280;
-  --brand-neutrals-600: #4b5563;
-  --brand-neutrals-700: #374151;
-  --brand-neutrals-800: #1f2937;
-  --brand-neutrals-900: #111827;
-  --brand-neutrals-950: #030712;
-  --brand-shades-50: #eef2ff;
-  --brand-shades-100: #e0e7ff;
-  --brand-shades-200: #c7d2fe;
-  --brand-shades-300: #a5b4fc;
-  --brand-shades-400: #818cf8;
-  --brand-shades-500: #6366f1;
-  --brand-shades-600: #4f46e5;
-  --brand-shades-700: #4338ca;
-  --brand-shades-800: #3730a3;
-  --brand-shades-900: #312e81;
-  --brand-shades-950: #1e1b4b;
-  --brand-combinations-1-brand-foreground: #ffffff;
-  --brand-combinations-1-brand: var(--brand-shades-500);
-  --brand-combinations-2-brand: var(--brand-shades-200);
-  --brand-combinations-2-brand-foreground: var(--brand-shades-800);
-  --brand-combinations-3-brand: var(--brand-shades-950);
-  --brand-combinations-3-brand-foreground: var(--brand-shades-300);
+  --theme-brand-50: #eef2ff;
+  --theme-brand-200: #c7d2fe;
+  --theme-brand-800: #3730a3;
+  --theme-brand-950: #1e1b4b;
+  --theme-brand-500-primary: #6366f1;
+  --theme-brand-700: #4338ca; /* code-only stop, not in Figma yet */
 }

package/dist/styles/typography.css

@@ -85,14 +85,14 @@
     }
     /* Inline code chip (a bare <code> not inside a <pre>). */
     :not(pre) > code:not([class]):not([data-slot]) {
-      border-radius: var(--rounded-sm);
-      background-color: var(--muted);
+      border-radius: var(--rounded-4);
+      background-color: var(--muted-bg);
       padding: 0.125rem 0.375rem;
     }
     pre:not([class]):not([data-slot]) {
       overflow-x: auto;
-      border-radius: var(--rounded-lg);
-      background-color: var(--muted);
+      border-radius: var(--rounded-8);
+      background-color: var(--muted-bg);
       padding: 1rem;
       font-size: var(--paragraph-small-font-size);
       line-height: var(--paragraph-small-line-height);
@@ -105,22 +105,22 @@
 
     /* ── Blockquote ───────────────────────────────────────────── */
     blockquote:not([class]):not([data-slot]) {
-      border-inline-start: 3px solid var(--border);
+      border-inline-start: 3px solid var(--primary-border);
       padding-inline-start: 1rem;
-      color: var(--muted-foreground);
+      color: var(--muted-txt);
       font-style: italic;
     }
 
     /* ── Rule / media ─────────────────────────────────────────── */
     hr:not([class]):not([data-slot]) {
       border: 0;
-      border-top: 1px solid var(--border);
+      border-top: 1px solid var(--primary-border);
     }
     img:not([class]):not([data-slot]),
     video:not([class]):not([data-slot]) {
       max-width: 100%;
       height: auto;
-      border-radius: var(--rounded-lg);
+      border-radius: var(--rounded-8);
     }
 
     /* ── Tables ───────────────────────────────────────────────── */
@@ -130,7 +130,7 @@
       font-size: var(--paragraph-small-font-size);
     }
     :where(th, td):not([class]):not([data-slot]) {
-      border-bottom: 1px solid var(--border);
+      border-bottom: 1px solid var(--primary-border);
       padding: 0.5rem 0.75rem;
       text-align: start;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@psnext/design-system",
-  "version": "1.5.1",
+  "version": "2.1.0",
   "description": "Sapient AI Products design system — primitives, patterns, and layouts.",
   "license": "UNLICENSED",
   "private": false,
@@ -55,9 +55,15 @@
   "sideEffects": [
     "**/*.css"
   ],
+  "bin": {
+    "psnext-design-system": "./bin/install-agent-skill.mjs"
+  },
   "files": [
     "dist",
-    "README.md"
+    "bin",
+    "README.md",
+    "DESIGN.md",
+    "SKILL.md"
   ],
   "publishConfig": {
     "access": "public",

package/dist/index44.d.cts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index44.d.cts","names":[],"sources":["../src/primitives/Pagination/Pagination.tsx"],"mappings":";;;;;;iBAOS,UAAA;;;GAAoC,KAAA,CAAM,wBAAqB,oBAAA,CAAA,GAAA,CAAA;;AAJN,iBAiBzD,iBAAA,CAbU;EAAA,SAAA;EAAA,GAAA;AAAA,CAAA,EAaiC,KAAA,CAAM,cAbvC,CAAA,IAAA,CAAA,CAAA,EAa2D,oBAAA,CAAA,GAAA,CAAA,OAb3D;;iBAwBV,cAAA,CAxBa;EAAA,GAAA;AAAA,CAAA,EAwBgB,KAAA,CAAM,cAxBtB,CAAA,IAAA,CAAA,CAAA,EAwB0C,oBAAA,CAAA,GAAA,CAAA,OAxB1C;KA4BjB,mBAAA,GA5B8C;;EAAqB,QAAA,CAAA,EAAA,OAAA;AAAA,CAAA,GA+BpE,IAlBK,CAkBA,KAAA,CAAM,cAlBW,CAAA,OAkBW,MAlBX,CAAA,EAAA,MAAA,CAAA,GAmBxB,KAAA,CAAM,cAnBkB,CAAA,GAAA,CAAA;;iBAsBjB,cAAA,CAtBoB;EAAA,SAAA;EAAA,QAAA;EAAA,IAAA;EAAA,GAAA;AAAA,CAAA,EAsB6C,mBAtB7C,CAAA,EAsBgE,oBAAA,CAAA,GAAA,CAAA,OAtBhE;;iBAyCpB,kBAAA,CAzCqE;EAAA,SAAA;EAAA,GAAA;AAAA,CAAA,EAyCzB,KAAA,CAAM,cAzCmB,CAAA,OAyCG,cAzCH,CAAA,CAAA,EAyCkB,oBAAA,CAAA,GAAA,CAAA,OAzClB;AAAA;AAAA,iBAwDrE,cAAA,CA7Cc;EAAA,SAAA;EAAA,GAAA;AAAA,CAAA,EA6C0B,KAAA,CAAM,cA7ChC,CAAA,OA6CsD,cA7CtD,CAAA,CAAA,EA6CqE,oBAAA,CAAA,GAAA,CAAA,OA7CrE;;iBA4Dd,kBAAA,CA5DmC;EAAA,SAAA;EAAA,GAAA;AAAA,CAAA,EA4DS,KAAA,CAAM,cA5Df,CAAA,MAAA,CAAA,CAAA,EA4DqC,oBAAA,CAAA,GAAA,CAAA,OA5DrC"}

package/dist/index44.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index44.d.ts","names":[],"sources":["../src/primitives/Pagination/Pagination.tsx"],"mappings":";;;;;;iBAOS,UAAA;;;GAAoC,KAAA,CAAM,wBAAqB,oBAAA,CAAA,GAAA,CAAA;;AAJN,iBAiBzD,iBAAA,CAbU;EAAA,SAAA;EAAA,GAAA;AAAA,CAAA,EAaiC,KAAA,CAAM,cAbvC,CAAA,IAAA,CAAA,CAAA,EAa2D,oBAAA,CAAA,GAAA,CAAA,OAb3D;;iBAwBV,cAAA,CAxBa;EAAA,GAAA;AAAA,CAAA,EAwBgB,KAAA,CAAM,cAxBtB,CAAA,IAAA,CAAA,CAAA,EAwB0C,oBAAA,CAAA,GAAA,CAAA,OAxB1C;KA4BjB,mBAAA,GA5B8C;;EAAqB,QAAA,CAAA,EAAA,OAAA;AAAA,CAAA,GA+BpE,IAlBK,CAkBA,KAAA,CAAM,cAlBW,CAAA,OAkBW,MAlBX,CAAA,EAAA,MAAA,CAAA,GAmBxB,KAAA,CAAM,cAnBkB,CAAA,GAAA,CAAA;;iBAsBjB,cAAA,CAtBoB;EAAA,SAAA;EAAA,QAAA;EAAA,IAAA;EAAA,GAAA;AAAA,CAAA,EAsB6C,mBAtB7C,CAAA,EAsBgE,oBAAA,CAAA,GAAA,CAAA,OAtBhE;;iBAyCpB,kBAAA,CAzCqE;EAAA,SAAA;EAAA,GAAA;AAAA,CAAA,EAyCzB,KAAA,CAAM,cAzCmB,CAAA,OAyCG,cAzCH,CAAA,CAAA,EAyCkB,oBAAA,CAAA,GAAA,CAAA,OAzClB;AAAA;AAAA,iBAwDrE,cAAA,CA7Cc;EAAA,SAAA;EAAA,GAAA;AAAA,CAAA,EA6C0B,KAAA,CAAM,cA7ChC,CAAA,OA6CsD,cA7CtD,CAAA,CAAA,EA6CqE,oBAAA,CAAA,GAAA,CAAA,OA7CrE;;iBA4Dd,kBAAA,CA5DmC;EAAA,SAAA;EAAA,GAAA;AAAA,CAAA,EA4DS,KAAA,CAAM,cA5Df,CAAA,MAAA,CAAA,CAAA,EA4DqC,oBAAA,CAAA,GAAA,CAAA,OA5DrC"}

package/dist/primitives/NavRail/index.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.cjs","names":["React","cn","Slot","Tooltip","TooltipTrigger","TooltipContent","Popover","PopoverTrigger","ChevronRightIcon","PopoverContent"],"sources":["../../../src/primitives/NavRail/NavRail.tsx"],"sourcesContent":["import { ChevronRightIcon } from \"lucide-react\";\nimport { Slot } from \"radix-ui\";\nimport * as React from \"react\";\n\nimport { Popover, PopoverContent, PopoverTrigger } from \"@/primitives/Popover\";\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"@/primitives/Tooltip\";\nimport { cn } from \"@/utils\";\n\n// NavRail — a vertical navigation rail (the app's side nav). Four display modes:\n// icon-only (tooltips), text-only, expanded (icon + text), and expand-on-hover\n// (icon-only that widens to reveal labels on hover). Items can open a flyout\n// submenu (NavRailMenu) and the rail can show a user footer (NavRailUser).\n//\n// All items share a constant height (h-10) with the icon pinned to the left, so\n// expanding the rail just REVEALS the labels to the right — the icon never moves\n// and the row height never changes.\n//\n// LAYOUT NOTE: `expand-on-hover` changes the rail's width. To make the content\n// give up space as the rail expands (rather than overlap it), put the rail in a\n// flex row as a `shrink-0` child (it keeps its own w-14/w-56 width) next to a\n// `flex-1 min-w-0` content column — the column shrinks as the rail widens.\n\ntype NavRailMode = \"icon\" | \"text\" | \"expanded\" | \"expand-on-hover\";\n\nconst NavRailContext = React.createContext<NavRailMode>(\"icon\");\n\nconst RAIL_BY_MODE: Record<NavRailMode, string> = {\n  icon: \"w-14 items-center\",\n  text: \"w-56 items-stretch\",\n  expanded: \"w-56 items-stretch\",\n  \"expand-on-hover\": \"w-14 items-stretch transition-[width] duration-200 ease-out hover:w-56\",\n};\n\nconst ITEM_BASE =\n  \"relative flex h-10 cursor-pointer items-center text-foreground outline-none transition-colors hover:bg-foreground/10 focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 data-[active=true]:bg-[var(--white)] data-[active=true]:font-medium data-[active=true]:text-[var(--brand-colors-brand-500)] data-[active=true]:hover:bg-[var(--white)] [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-5\";\n\nconst ITEM_BY_MODE: Record<NavRailMode, string> = {\n  icon: \"w-10 justify-center rounded-full\",\n  text: \"w-full justify-start gap-3 rounded-lg px-2.5\",\n  expanded: \"w-full justify-start gap-3 rounded-lg px-2.5\",\n  \"expand-on-hover\": \"w-full justify-start gap-3 rounded-lg px-2.5\",\n};\n\nconst ICON_BY_MODE: Record<NavRailMode, string> = {\n  icon: \"flex shrink-0 items-center justify-center\",\n  text: \"hidden\", // text-only mode hides the icon\n  expanded: \"flex shrink-0 items-center justify-center\",\n  \"expand-on-hover\": \"flex shrink-0 items-center justify-center\",\n};\n\nconst LABEL_ROW = \"min-w-0 flex-1 truncate text-left text-sm font-medium\";\nconst LABEL_BY_MODE: Record<NavRailMode, string> = {\n  icon: \"sr-only\",\n  text: LABEL_ROW,\n  expanded: LABEL_ROW,\n  // Always laid out (so the icon never reflows); revealed via opacity on hover.\n  \"expand-on-hover\": cn(\n    LABEL_ROW,\n    \"opacity-0 transition-opacity duration-200 group-hover/nav-rail:opacity-100\",\n  ),\n};\n\nconst CHEVRON_BY_MODE: Record<NavRailMode, string> = {\n  // Vertically centered, overhanging the right edge (clear of the centered icon).\n  icon: \"absolute top-1/2 right-[-4px] size-3 -translate-y-1/2 text-muted-foreground\",\n  text: \"ml-auto size-4 shrink-0 text-muted-foreground\",\n  expanded: \"ml-auto size-4 shrink-0 text-muted-foreground\",\n  \"expand-on-hover\":\n    \"ml-auto size-4 shrink-0 text-muted-foreground opacity-0 transition-opacity duration-200 group-hover/nav-rail:opacity-100\",\n};\n\n/** The vertical navigation rail container; sets the display `mode` for all items via context. */\nfunction NavRail({\n  mode = \"icon\",\n  className,\n  ...props\n}: React.ComponentProps<\"nav\"> & {\n  /** Display mode for the rail and its items: icon-only (tooltips), text-only, expanded (icon + text), or expand-on-hover. */\n  mode?: NavRailMode;\n}) {\n  return (\n    <NavRailContext.Provider value={mode}>\n      <nav\n        data-slot=\"nav-rail\"\n        data-mode={mode}\n        className={cn(\n          \"group/nav-rail flex flex-col gap-1 overflow-hidden rounded-2xl bg-[var(--glass-strong)] p-2 backdrop-blur-glass\",\n          RAIL_BY_MODE[mode],\n          className,\n        )}\n        {...props}\n      />\n    </NavRailContext.Provider>\n  );\n}\n\n/** A thin divider between groups of rail items. */\nfunction NavRailSeparator({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"nav-rail-separator\"\n      role=\"separator\"\n      className={cn(\"my-1 h-px w-6 shrink-0 self-center bg-border\", className)}\n      {...props}\n    />\n  );\n}\n\ntype NavRailItemProps = Omit<React.ComponentProps<\"button\">, \"aria-label\"> & {\n  /** Tooltip text (icon mode) + accessible name + inline label (text/expanded). */\n  label: string;\n  /** Marks the item as the current page (active styling + `aria-current=\"page\"`). */\n  active?: boolean;\n  /** Render the child element instead of a <button> (e.g. a router link). */\n  asChild?: boolean;\n  /** Which side the tooltip opens on in icon mode. */\n  tooltipSide?: \"top\" | \"right\" | \"bottom\" | \"left\";\n};\n\n/** A single navigation entry; an icon (as children) plus a `label`, with a tooltip in icon mode. */\nfunction NavRailItem({\n  label,\n  active,\n  asChild = false,\n  tooltipSide = \"right\",\n  className,\n  children,\n  ...props\n}: NavRailItemProps) {\n  const mode = React.useContext(NavRailContext);\n  const shared = {\n    \"data-slot\": \"nav-rail-item\",\n    \"data-active\": active || undefined,\n    \"aria-label\": label,\n    \"aria-current\": active ? (\"page\" as const) : undefined,\n    className: cn(ITEM_BASE, ITEM_BY_MODE[mode], className),\n    ...props,\n  };\n  const labelEl = (\n    <span data-slot=\"nav-rail-item-label\" className={LABEL_BY_MODE[mode]}>\n      {label}\n    </span>\n  );\n\n  const el = asChild ? (\n    <Slot.Root {...shared}>\n      <Slot.Slottable>{children}</Slot.Slottable>\n      {labelEl}\n    </Slot.Root>\n  ) : (\n    <button type=\"button\" {...shared}>\n      <span data-slot=\"nav-rail-item-icon\" className={ICON_BY_MODE[mode]}>\n        {children}\n      </span>\n      {labelEl}\n    </button>\n  );\n\n  if (mode !== \"icon\") return el;\n  return (\n    <Tooltip>\n      <TooltipTrigger asChild>{el}</TooltipTrigger>\n      <TooltipContent side={tooltipSide}>{label}</TooltipContent>\n    </Tooltip>\n  );\n}\n\n// ── User footer ─────────────────────────────────────────────────────────────\n\ntype NavRailUserProps = React.ComponentProps<\"div\"> & {\n  /** The avatar element (e.g. an <Avatar />). */\n  avatar: React.ReactNode;\n  /** The user's display name (hidden in icon mode). */\n  name: React.ReactNode;\n  /** The user's secondary line, e.g. email (hidden in icon mode). */\n  email: React.ReactNode;\n};\n\n/** The footer slot of the rail showing the signed-in user (avatar + name + email). */\nfunction NavRailUser({ avatar, name, email, className, ...props }: NavRailUserProps) {\n  const mode = React.useContext(NavRailContext);\n  const detailsHidden = mode === \"icon\";\n  return (\n    <div\n      data-slot=\"nav-rail-user\"\n      className={cn(\"mt-auto flex h-12 w-full items-center rounded-lg\", className)}\n      {...props}\n    >\n      {/* Fixed w-10 slot centers any avatar on the same axis as the icon column,\n          so it never shifts between modes regardless of avatar size. */}\n      <span\n        data-slot=\"nav-rail-user-avatar\"\n        className=\"flex w-10 shrink-0 items-center justify-center\"\n      >\n        {avatar}\n      </span>\n      <div\n        data-slot=\"nav-rail-user-details\"\n        className={cn(\n          \"flex min-w-0 flex-1 flex-col justify-center text-left leading-tight\",\n          detailsHidden && \"sr-only\",\n          mode === \"expand-on-hover\" &&\n            \"opacity-0 transition-opacity duration-200 group-hover/nav-rail:opacity-100\",\n        )}\n      >\n        <span className=\"truncate text-sm font-medium\">{name}</span>\n        <span className=\"truncate text-xs text-muted-foreground\">{email}</span>\n      </div>\n    </div>\n  );\n}\n\n// ── Flyout submenu ──────────────────────────────────────────────────────────\n\n/** Root for a rail item that opens a flyout submenu (wraps Popover). */\nfunction NavRailMenu(props: React.ComponentProps<typeof Popover>) {\n  return <Popover {...props} />;\n}\n\ntype NavRailMenuTriggerProps = Omit<React.ComponentProps<\"button\">, \"aria-label\"> & {\n  /** Tooltip/accessible name + inline label for the trigger item. */\n  label: string;\n  /** Marks the trigger as active (current section) styling. */\n  active?: boolean;\n};\n\n/** The rail item that opens its flyout submenu; renders a chevron affordance. */\nfunction NavRailMenuTrigger({\n  label,\n  active,\n  className,\n  children,\n  ...props\n}: NavRailMenuTriggerProps) {\n  const mode = React.useContext(NavRailContext);\n  return (\n    <PopoverTrigger asChild>\n      <button\n        type=\"button\"\n        data-slot=\"nav-rail-menu-trigger\"\n        data-active={active || undefined}\n        aria-label={label}\n        className={cn(ITEM_BASE, ITEM_BY_MODE[mode], className)}\n        {...props}\n      >\n        <span data-slot=\"nav-rail-item-icon\" className={ICON_BY_MODE[mode]}>\n          {children}\n        </span>\n        <span data-slot=\"nav-rail-item-label\" className={LABEL_BY_MODE[mode]}>\n          {label}\n        </span>\n        <ChevronRightIcon aria-hidden className={CHEVRON_BY_MODE[mode]} />\n      </button>\n    </PopoverTrigger>\n  );\n}\n\n/** The glass flyout panel that holds the submenu items (portalled Popover content). */\nfunction NavRailMenuContent({\n  className,\n  side = \"right\",\n  align = \"start\",\n  sideOffset = 8,\n  ...props\n}: React.ComponentProps<typeof PopoverContent>) {\n  return (\n    <PopoverContent\n      data-slot=\"nav-rail-menu-content\"\n      side={side}\n      align={align}\n      sideOffset={sideOffset}\n      // Glass flyout (matches the prototype sub-nav): translucent + blurred,\n      // 16px radius, hairline border, soft shadow. Tokens, not prototype code.\n      className={cn(\n        \"flex w-[180px] flex-col gap-0.5 rounded-2xl border border-border bg-[var(--glass-subtle)] p-1.5 text-foreground shadow-sm backdrop-blur-glass\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\ntype NavRailMenuItemProps = React.ComponentProps<\"button\"> & {\n  /** Marks the entry as the current page (active styling + `aria-current=\"page\"`). */\n  active?: boolean;\n  /** Render the child element instead of a <button> (e.g. a router link). */\n  asChild?: boolean;\n};\n\n/** A single entry inside a NavRail flyout submenu. */\nfunction NavRailMenuItem({ className, active, asChild = false, ...props }: NavRailMenuItemProps) {\n  const Comp = asChild ? Slot.Root : \"button\";\n  return (\n    <Comp\n      data-slot=\"nav-rail-menu-item\"\n      data-active={active || undefined}\n      aria-current={active ? \"page\" : undefined}\n      className={cn(\n        \"flex w-full cursor-pointer items-center gap-2.5 rounded-lg px-3 py-2 text-left text-sm text-foreground outline-none transition-colors\",\n        \"hover:bg-foreground/10 focus-visible:bg-foreground/10\",\n        \"data-[active=true]:bg-[var(--white)] data-[active=true]:font-medium data-[active=true]:text-[var(--brand-colors-brand-500)] data-[active=true]:hover:bg-[var(--white)]\",\n        \"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      {...(asChild ? {} : { type: \"button\" as const })}\n      {...props}\n    />\n  );\n}\n\nexport {\n  NavRail,\n  NavRailItem,\n  NavRailUser,\n  NavRailSeparator,\n  NavRailMenu,\n  NavRailMenuTrigger,\n  NavRailMenuContent,\n  NavRailMenuItem,\n  type NavRailMode,\n  type NavRailItemProps,\n  type NavRailUserProps,\n  type NavRailMenuTriggerProps,\n  type NavRailMenuItemProps,\n};\n"],"mappings":"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"}

package/dist/primitives/NavRail/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","names":["Tooltip","Popover"],"sources":["../../../src/primitives/NavRail/NavRail.tsx"],"sourcesContent":["import { ChevronRightIcon } from \"lucide-react\";\nimport { Slot } from \"radix-ui\";\nimport * as React from \"react\";\n\nimport { Popover, PopoverContent, PopoverTrigger } from \"@/primitives/Popover\";\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"@/primitives/Tooltip\";\nimport { cn } from \"@/utils\";\n\n// NavRail — a vertical navigation rail (the app's side nav). Four display modes:\n// icon-only (tooltips), text-only, expanded (icon + text), and expand-on-hover\n// (icon-only that widens to reveal labels on hover). Items can open a flyout\n// submenu (NavRailMenu) and the rail can show a user footer (NavRailUser).\n//\n// All items share a constant height (h-10) with the icon pinned to the left, so\n// expanding the rail just REVEALS the labels to the right — the icon never moves\n// and the row height never changes.\n//\n// LAYOUT NOTE: `expand-on-hover` changes the rail's width. To make the content\n// give up space as the rail expands (rather than overlap it), put the rail in a\n// flex row as a `shrink-0` child (it keeps its own w-14/w-56 width) next to a\n// `flex-1 min-w-0` content column — the column shrinks as the rail widens.\n\ntype NavRailMode = \"icon\" | \"text\" | \"expanded\" | \"expand-on-hover\";\n\nconst NavRailContext = React.createContext<NavRailMode>(\"icon\");\n\nconst RAIL_BY_MODE: Record<NavRailMode, string> = {\n  icon: \"w-14 items-center\",\n  text: \"w-56 items-stretch\",\n  expanded: \"w-56 items-stretch\",\n  \"expand-on-hover\": \"w-14 items-stretch transition-[width] duration-200 ease-out hover:w-56\",\n};\n\nconst ITEM_BASE =\n  \"relative flex h-10 cursor-pointer items-center text-foreground outline-none transition-colors hover:bg-foreground/10 focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 data-[active=true]:bg-[var(--white)] data-[active=true]:font-medium data-[active=true]:text-[var(--brand-colors-brand-500)] data-[active=true]:hover:bg-[var(--white)] [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-5\";\n\nconst ITEM_BY_MODE: Record<NavRailMode, string> = {\n  icon: \"w-10 justify-center rounded-full\",\n  text: \"w-full justify-start gap-3 rounded-lg px-2.5\",\n  expanded: \"w-full justify-start gap-3 rounded-lg px-2.5\",\n  \"expand-on-hover\": \"w-full justify-start gap-3 rounded-lg px-2.5\",\n};\n\nconst ICON_BY_MODE: Record<NavRailMode, string> = {\n  icon: \"flex shrink-0 items-center justify-center\",\n  text: \"hidden\", // text-only mode hides the icon\n  expanded: \"flex shrink-0 items-center justify-center\",\n  \"expand-on-hover\": \"flex shrink-0 items-center justify-center\",\n};\n\nconst LABEL_ROW = \"min-w-0 flex-1 truncate text-left text-sm font-medium\";\nconst LABEL_BY_MODE: Record<NavRailMode, string> = {\n  icon: \"sr-only\",\n  text: LABEL_ROW,\n  expanded: LABEL_ROW,\n  // Always laid out (so the icon never reflows); revealed via opacity on hover.\n  \"expand-on-hover\": cn(\n    LABEL_ROW,\n    \"opacity-0 transition-opacity duration-200 group-hover/nav-rail:opacity-100\",\n  ),\n};\n\nconst CHEVRON_BY_MODE: Record<NavRailMode, string> = {\n  // Vertically centered, overhanging the right edge (clear of the centered icon).\n  icon: \"absolute top-1/2 right-[-4px] size-3 -translate-y-1/2 text-muted-foreground\",\n  text: \"ml-auto size-4 shrink-0 text-muted-foreground\",\n  expanded: \"ml-auto size-4 shrink-0 text-muted-foreground\",\n  \"expand-on-hover\":\n    \"ml-auto size-4 shrink-0 text-muted-foreground opacity-0 transition-opacity duration-200 group-hover/nav-rail:opacity-100\",\n};\n\n/** The vertical navigation rail container; sets the display `mode` for all items via context. */\nfunction NavRail({\n  mode = \"icon\",\n  className,\n  ...props\n}: React.ComponentProps<\"nav\"> & {\n  /** Display mode for the rail and its items: icon-only (tooltips), text-only, expanded (icon + text), or expand-on-hover. */\n  mode?: NavRailMode;\n}) {\n  return (\n    <NavRailContext.Provider value={mode}>\n      <nav\n        data-slot=\"nav-rail\"\n        data-mode={mode}\n        className={cn(\n          \"group/nav-rail flex flex-col gap-1 overflow-hidden rounded-2xl bg-[var(--glass-strong)] p-2 backdrop-blur-glass\",\n          RAIL_BY_MODE[mode],\n          className,\n        )}\n        {...props}\n      />\n    </NavRailContext.Provider>\n  );\n}\n\n/** A thin divider between groups of rail items. */\nfunction NavRailSeparator({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"nav-rail-separator\"\n      role=\"separator\"\n      className={cn(\"my-1 h-px w-6 shrink-0 self-center bg-border\", className)}\n      {...props}\n    />\n  );\n}\n\ntype NavRailItemProps = Omit<React.ComponentProps<\"button\">, \"aria-label\"> & {\n  /** Tooltip text (icon mode) + accessible name + inline label (text/expanded). */\n  label: string;\n  /** Marks the item as the current page (active styling + `aria-current=\"page\"`). */\n  active?: boolean;\n  /** Render the child element instead of a <button> (e.g. a router link). */\n  asChild?: boolean;\n  /** Which side the tooltip opens on in icon mode. */\n  tooltipSide?: \"top\" | \"right\" | \"bottom\" | \"left\";\n};\n\n/** A single navigation entry; an icon (as children) plus a `label`, with a tooltip in icon mode. */\nfunction NavRailItem({\n  label,\n  active,\n  asChild = false,\n  tooltipSide = \"right\",\n  className,\n  children,\n  ...props\n}: NavRailItemProps) {\n  const mode = React.useContext(NavRailContext);\n  const shared = {\n    \"data-slot\": \"nav-rail-item\",\n    \"data-active\": active || undefined,\n    \"aria-label\": label,\n    \"aria-current\": active ? (\"page\" as const) : undefined,\n    className: cn(ITEM_BASE, ITEM_BY_MODE[mode], className),\n    ...props,\n  };\n  const labelEl = (\n    <span data-slot=\"nav-rail-item-label\" className={LABEL_BY_MODE[mode]}>\n      {label}\n    </span>\n  );\n\n  const el = asChild ? (\n    <Slot.Root {...shared}>\n      <Slot.Slottable>{children}</Slot.Slottable>\n      {labelEl}\n    </Slot.Root>\n  ) : (\n    <button type=\"button\" {...shared}>\n      <span data-slot=\"nav-rail-item-icon\" className={ICON_BY_MODE[mode]}>\n        {children}\n      </span>\n      {labelEl}\n    </button>\n  );\n\n  if (mode !== \"icon\") return el;\n  return (\n    <Tooltip>\n      <TooltipTrigger asChild>{el}</TooltipTrigger>\n      <TooltipContent side={tooltipSide}>{label}</TooltipContent>\n    </Tooltip>\n  );\n}\n\n// ── User footer ─────────────────────────────────────────────────────────────\n\ntype NavRailUserProps = React.ComponentProps<\"div\"> & {\n  /** The avatar element (e.g. an <Avatar />). */\n  avatar: React.ReactNode;\n  /** The user's display name (hidden in icon mode). */\n  name: React.ReactNode;\n  /** The user's secondary line, e.g. email (hidden in icon mode). */\n  email: React.ReactNode;\n};\n\n/** The footer slot of the rail showing the signed-in user (avatar + name + email). */\nfunction NavRailUser({ avatar, name, email, className, ...props }: NavRailUserProps) {\n  const mode = React.useContext(NavRailContext);\n  const detailsHidden = mode === \"icon\";\n  return (\n    <div\n      data-slot=\"nav-rail-user\"\n      className={cn(\"mt-auto flex h-12 w-full items-center rounded-lg\", className)}\n      {...props}\n    >\n      {/* Fixed w-10 slot centers any avatar on the same axis as the icon column,\n          so it never shifts between modes regardless of avatar size. */}\n      <span\n        data-slot=\"nav-rail-user-avatar\"\n        className=\"flex w-10 shrink-0 items-center justify-center\"\n      >\n        {avatar}\n      </span>\n      <div\n        data-slot=\"nav-rail-user-details\"\n        className={cn(\n          \"flex min-w-0 flex-1 flex-col justify-center text-left leading-tight\",\n          detailsHidden && \"sr-only\",\n          mode === \"expand-on-hover\" &&\n            \"opacity-0 transition-opacity duration-200 group-hover/nav-rail:opacity-100\",\n        )}\n      >\n        <span className=\"truncate text-sm font-medium\">{name}</span>\n        <span className=\"truncate text-xs text-muted-foreground\">{email}</span>\n      </div>\n    </div>\n  );\n}\n\n// ── Flyout submenu ──────────────────────────────────────────────────────────\n\n/** Root for a rail item that opens a flyout submenu (wraps Popover). */\nfunction NavRailMenu(props: React.ComponentProps<typeof Popover>) {\n  return <Popover {...props} />;\n}\n\ntype NavRailMenuTriggerProps = Omit<React.ComponentProps<\"button\">, \"aria-label\"> & {\n  /** Tooltip/accessible name + inline label for the trigger item. */\n  label: string;\n  /** Marks the trigger as active (current section) styling. */\n  active?: boolean;\n};\n\n/** The rail item that opens its flyout submenu; renders a chevron affordance. */\nfunction NavRailMenuTrigger({\n  label,\n  active,\n  className,\n  children,\n  ...props\n}: NavRailMenuTriggerProps) {\n  const mode = React.useContext(NavRailContext);\n  return (\n    <PopoverTrigger asChild>\n      <button\n        type=\"button\"\n        data-slot=\"nav-rail-menu-trigger\"\n        data-active={active || undefined}\n        aria-label={label}\n        className={cn(ITEM_BASE, ITEM_BY_MODE[mode], className)}\n        {...props}\n      >\n        <span data-slot=\"nav-rail-item-icon\" className={ICON_BY_MODE[mode]}>\n          {children}\n        </span>\n        <span data-slot=\"nav-rail-item-label\" className={LABEL_BY_MODE[mode]}>\n          {label}\n        </span>\n        <ChevronRightIcon aria-hidden className={CHEVRON_BY_MODE[mode]} />\n      </button>\n    </PopoverTrigger>\n  );\n}\n\n/** The glass flyout panel that holds the submenu items (portalled Popover content). */\nfunction NavRailMenuContent({\n  className,\n  side = \"right\",\n  align = \"start\",\n  sideOffset = 8,\n  ...props\n}: React.ComponentProps<typeof PopoverContent>) {\n  return (\n    <PopoverContent\n      data-slot=\"nav-rail-menu-content\"\n      side={side}\n      align={align}\n      sideOffset={sideOffset}\n      // Glass flyout (matches the prototype sub-nav): translucent + blurred,\n      // 16px radius, hairline border, soft shadow. Tokens, not prototype code.\n      className={cn(\n        \"flex w-[180px] flex-col gap-0.5 rounded-2xl border border-border bg-[var(--glass-subtle)] p-1.5 text-foreground shadow-sm backdrop-blur-glass\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\ntype NavRailMenuItemProps = React.ComponentProps<\"button\"> & {\n  /** Marks the entry as the current page (active styling + `aria-current=\"page\"`). */\n  active?: boolean;\n  /** Render the child element instead of a <button> (e.g. a router link). */\n  asChild?: boolean;\n};\n\n/** A single entry inside a NavRail flyout submenu. */\nfunction NavRailMenuItem({ className, active, asChild = false, ...props }: NavRailMenuItemProps) {\n  const Comp = asChild ? Slot.Root : \"button\";\n  return (\n    <Comp\n      data-slot=\"nav-rail-menu-item\"\n      data-active={active || undefined}\n      aria-current={active ? \"page\" : undefined}\n      className={cn(\n        \"flex w-full cursor-pointer items-center gap-2.5 rounded-lg px-3 py-2 text-left text-sm text-foreground outline-none transition-colors\",\n        \"hover:bg-foreground/10 focus-visible:bg-foreground/10\",\n        \"data-[active=true]:bg-[var(--white)] data-[active=true]:font-medium data-[active=true]:text-[var(--brand-colors-brand-500)] data-[active=true]:hover:bg-[var(--white)]\",\n        \"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      {...(asChild ? {} : { type: \"button\" as const })}\n      {...props}\n    />\n  );\n}\n\nexport {\n  NavRail,\n  NavRailItem,\n  NavRailUser,\n  NavRailSeparator,\n  NavRailMenu,\n  NavRailMenuTrigger,\n  NavRailMenuContent,\n  NavRailMenuItem,\n  type NavRailMode,\n  type NavRailItemProps,\n  type NavRailUserProps,\n  type NavRailMenuTriggerProps,\n  type NavRailMenuItemProps,\n};\n"],"mappings":";;;;;;;;AAwBA,MAAM,iBAAiB,MAAM,cAA2B,MAAM;AAE9D,MAAM,eAA4C;CAChD,MAAM;CACN,MAAM;CACN,UAAU;CACV,mBAAmB;AACrB;AAEA,MAAM,YACJ;AAEF,MAAM,eAA4C;CAChD,MAAM;CACN,MAAM;CACN,UAAU;CACV,mBAAmB;AACrB;AAEA,MAAM,eAA4C;CAChD,MAAM;CACN,MAAM;CACN,UAAU;CACV,mBAAmB;AACrB;AAEA,MAAM,YAAY;AAClB,MAAM,gBAA6C;CACjD,MAAM;CACN,MAAM;CACN,UAAU;CAEV,mBAAmB,GACjB,WACA,4EACF;AACF;AAEA,MAAM,kBAA+C;CAEnD,MAAM;CACN,MAAM;CACN,UAAU;CACV,mBACE;AACJ;;AAGA,SAAS,QAAQ,EACf,OAAO,QACP,WACA,GAAG,SAIF;CACD,OACE,oBAAC,eAAe,UAAhB;EAAyB,OAAO;YAC9B,oBAAC,OAAD;GACE,aAAU;GACV,aAAW;GACX,WAAW,GACT,mHACA,aAAa,OACb,SACF;GACA,GAAI;EACL,CAAA;CACsB,CAAA;AAE7B;;AAGA,SAAS,iBAAiB,EAAE,WAAW,GAAG,SAAsC;CAC9E,OACE,oBAAC,OAAD;EACE,aAAU;EACV,MAAK;EACL,WAAW,GAAG,gDAAgD,SAAS;EACvE,GAAI;CACL,CAAA;AAEL;;AAcA,SAAS,YAAY,EACnB,OACA,QACA,UAAU,OACV,cAAc,SACd,WACA,UACA,GAAG,SACgB;CACnB,MAAM,OAAO,MAAM,WAAW,cAAc;CAC5C,MAAM,SAAS;EACb,aAAa;EACb,eAAe,UAAU,KAAA;EACzB,cAAc;EACd,gBAAgB,SAAU,SAAmB,KAAA;EAC7C,WAAW,GAAG,WAAW,aAAa,OAAO,SAAS;EACtD,GAAG;CACL;CACA,MAAM,UACJ,oBAAC,QAAD;EAAM,aAAU;EAAsB,WAAW,cAAc;YAC5D;CACG,CAAA;CAGR,MAAM,KAAK,UACT,qBAAC,KAAK,MAAN;EAAW,GAAI;YAAf,CACE,oBAAC,KAAK,WAAN,EAAiB,SAAyB,CAAA,GACzC,OACQ;MAEX,qBAAC,UAAD;EAAQ,MAAK;EAAS,GAAI;YAA1B,CACE,oBAAC,QAAD;GAAM,aAAU;GAAqB,WAAW,aAAa;GAC1D;EACG,CAAA,GACL,OACK;;CAGV,IAAI,SAAS,QAAQ,OAAO;CAC5B,OACE,qBAACA,WAAD,EAAA,UAAA,CACE,oBAAC,gBAAD;EAAgB,SAAA;YAAS;CAAmB,CAAA,GAC5C,oBAAC,gBAAD;EAAgB,MAAM;YAAc;CAAsB,CAAA,CACnD,EAAA,CAAA;AAEb;;AAcA,SAAS,YAAY,EAAE,QAAQ,MAAM,OAAO,WAAW,GAAG,SAA2B;CACnF,MAAM,OAAO,MAAM,WAAW,cAAc;CAC5C,MAAM,gBAAgB,SAAS;CAC/B,OACE,qBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,oDAAoD,SAAS;EAC3E,GAAI;YAHN,CAOE,oBAAC,QAAD;GACE,aAAU;GACV,WAAU;aAET;EACG,CAAA,GACN,qBAAC,OAAD;GACE,aAAU;GACV,WAAW,GACT,uEACA,iBAAiB,WACjB,SAAS,qBACP,4EACJ;aAPF,CASE,oBAAC,QAAD;IAAM,WAAU;cAAgC;GAAW,CAAA,GAC3D,oBAAC,QAAD;IAAM,WAAU;cAA0C;GAAY,CAAA,CACnE;IACF;;AAET;;AAKA,SAAS,YAAY,OAA6C;CAChE,OAAO,oBAACC,WAAD,EAAS,GAAI,MAAQ,CAAA;AAC9B;;AAUA,SAAS,mBAAmB,EAC1B,OACA,QACA,WACA,UACA,GAAG,SACuB;CAC1B,MAAM,OAAO,MAAM,WAAW,cAAc;CAC5C,OACE,oBAAC,gBAAD;EAAgB,SAAA;YACd,qBAAC,UAAD;GACE,MAAK;GACL,aAAU;GACV,eAAa,UAAU,KAAA;GACvB,cAAY;GACZ,WAAW,GAAG,WAAW,aAAa,OAAO,SAAS;GACtD,GAAI;aANN;IAQE,oBAAC,QAAD;KAAM,aAAU;KAAqB,WAAW,aAAa;KAC1D;IACG,CAAA;IACN,oBAAC,QAAD;KAAM,aAAU;KAAsB,WAAW,cAAc;eAC5D;IACG,CAAA;IACN,oBAAC,kBAAD;KAAkB,eAAA;KAAY,WAAW,gBAAgB;IAAQ,CAAA;GAC3D;;CACM,CAAA;AAEpB;;AAGA,SAAS,mBAAmB,EAC1B,WACA,OAAO,SACP,QAAQ,SACR,aAAa,GACb,GAAG,SAC2C;CAC9C,OACE,oBAAC,gBAAD;EACE,aAAU;EACJ;EACC;EACK;EAGZ,WAAW,GACT,iJACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAUA,SAAS,gBAAgB,EAAE,WAAW,QAAQ,UAAU,OAAO,GAAG,SAA+B;CAE/F,OACE,oBAFW,UAAU,KAAK,OAAO,UAEjC;EACE,aAAU;EACV,eAAa,UAAU,KAAA;EACvB,gBAAc,SAAS,SAAS,KAAA;EAChC,WAAW,GACT,yIACA,yDACA,0KACA,qFACA,SACF;EACA,GAAK,UAAU,CAAC,IAAI,EAAE,MAAM,SAAkB;EAC9C,GAAI;CACL,CAAA;AAEL"}