@devalok/shilp-sutra 0.56.0 → 0.57.0

package/dist/tokens/semantic.css

@@ -163,17 +163,26 @@
   --color-surface-3: var(--neutral-3);
   --color-surface-4: var(--neutral-4);
 
-  --color-surface-base:          var(--neutral-2);
-  --color-surface-sunken:        var(--color-surface-0);
-  --color-surface-raised:        var(--neutral-1);
-  --color-surface-overlay:       var(--neutral-1);
-  --color-surface-raised-hover:  var(--neutral-3);
-  --color-surface-raised-active: var(--neutral-4);
-  /* App chrome (TopBar, Sidebar, BottomNavbar). Its own tier so chrome's
-     surface is an explicit, independently-tunable decision (per the Carbon/
-     Atlassian/Ant model), not coupled to the card surface. Starts equal to
-     `raised` — zero visual change — but can now diverge without touching cards. */
-  --color-surface-chrome:        var(--neutral-1);
+  /* GROUNDS take the brand tint; OBJECTS hold neutral. In light the page, the
+     panel and an overlay are all pure white — an edge is what makes a card a
+     card. See docs/plans/2026-08-26-surface-model-rebuild.md */
+  --color-surface-base:          var(--neutral-0);
+  --color-surface-panel:         var(--neutral-0);
+  --color-surface-overlay:       var(--neutral-0);
+  --color-surface-panel-hover:   var(--neutral-2);
+  --color-surface-panel-active:  var(--neutral-3);
+  --color-surface-sunken:        var(--neutral-sunken);
+  --color-surface-sunken-hover:  var(--neutral-3);
+
+  /* DEPRECATED, removed next major. `surface-raised` is renamed `surface-panel`
+     because in light it is not raised — it is the same white as the page.
+     Aliased so nothing breaks mid-migration; `pnpm lint --fix` rewrites them.
+     NOTE hover/focus utilities must retarget to `-panel-hover`, NOT rename: a
+     hover painted with a container value is invisible. That is what made every
+     menu item's hover a no-op in light before this rebuild. */
+  --color-surface-raised:        var(--color-surface-panel);
+  --color-surface-raised-hover:  var(--color-surface-panel-hover);
+  --color-surface-raised-active: var(--color-surface-panel-active);
   --color-surface-inverted:      var(--neutral-12);
   --color-surface-inverted-fg:   var(--neutral-1);
   --color-surface-disabled:      var(--neutral-2);
@@ -181,11 +190,17 @@
   --color-surface-fg:            var(--neutral-12);
   --color-surface-fg-muted:      var(--neutral-11);
   --color-surface-fg-subtle:     var(--neutral-9);  /* 4.664:1 on surface-base — WCAG AA (verify, don't assume: see neutral-9) */
-  --color-surface-border:        var(--neutral-6);  /* bumped for WCAG 1.4.11 (interactive/control edge) */
-  --color-surface-border-strong: var(--neutral-7);
-  --color-surface-border-subtle: var(--neutral-5);
-  /* Card/panel edge — a faint hairline (NOT for interactive controls, which need the contrast-bumped token above). */
-  --color-surface-border-card:   color-mix(in oklch, var(--neutral-5) 30%, transparent);
+  /* OBJECT edges — translucent, so an edge darkens whatever it lands on and can
+     never coincide with it. `surface-border` on white computes to #e8e8e8. */
+  --color-surface-border-subtle: oklch(0 0 0 / 0.05);
+  --color-surface-border:        oklch(0 0 0 / 0.09);
+  --color-surface-border-strong: oklch(0 0 0 / 0.14);
+  --color-surface-border-card:   var(--color-surface-border);
+
+  /* CONTROL edges — solid, so their contrast is measurable. WCAG 1.4.11 applies
+     to these and NOT to the decorative tiers above. */
+  --color-surface-border-interactive:        var(--neutral-6);
+  --color-surface-border-interactive-strong: var(--neutral-7);
   --color-backdrop:              oklch(0 0 0 / 0.4);
 
   /* Segmented control — translucent recess + raised thumb. Alpha, NOT a fixed
@@ -264,37 +279,58 @@
   /* ───────────────────────────────────────────────────────────
      CATEGORY COLORS (Sapta Varna — step subsets)
      ─────────────────────────────────────────────────────────── */
+  /* Foreground for solid category fills. Category step 9 LIGHTENS in dark mode,
+     the opposite of the intent ramps, so a fixed white fails AA there. neutral-1
+     inverts with the theme: near-white in light, near-black in dark.
+     Measured: light 4.59-4.97 on all seven, dark 5.55-6.24. Badge labels are 10px,
+     so AA body (4.5) is the bar, not large text. */
+  --color-category-fg:         var(--neutral-0);
+
+  --color-category-teal-2:     var(--teal-2);
   --color-category-teal-3:     var(--teal-3);
+  --color-category-teal-4:     var(--teal-4);
   --color-category-teal-7:     var(--teal-7);
   --color-category-teal-9:     var(--teal-9);
   --color-category-teal-11:    var(--teal-11);
 
+  --color-category-amber-2:    var(--amber-2);
   --color-category-amber-3:    var(--amber-3);
+  --color-category-amber-4:    var(--amber-4);
   --color-category-amber-7:    var(--amber-7);
   --color-category-amber-9:    var(--amber-9);
   --color-category-amber-11:   var(--amber-11);
 
+  --color-category-slate-2:    var(--slate-2);
   --color-category-slate-3:    var(--slate-3);
+  --color-category-slate-4:    var(--slate-4);
   --color-category-slate-7:    var(--slate-7);
   --color-category-slate-9:    var(--slate-9);
   --color-category-slate-11:   var(--slate-11);
 
+  --color-category-indigo-2:   var(--indigo-2);
   --color-category-indigo-3:   var(--indigo-3);
+  --color-category-indigo-4:   var(--indigo-4);
   --color-category-indigo-7:   var(--indigo-7);
   --color-category-indigo-9:   var(--indigo-9);
   --color-category-indigo-11:  var(--indigo-11);
 
+  --color-category-cyan-2:     var(--cyan-2);
   --color-category-cyan-3:     var(--cyan-3);
+  --color-category-cyan-4:     var(--cyan-4);
   --color-category-cyan-7:     var(--cyan-7);
   --color-category-cyan-9:     var(--cyan-9);
   --color-category-cyan-11:    var(--cyan-11);
 
+  --color-category-orange-2:   var(--orange-2);
   --color-category-orange-3:   var(--orange-3);
+  --color-category-orange-4:   var(--orange-4);
   --color-category-orange-7:   var(--orange-7);
   --color-category-orange-9:   var(--orange-9);
   --color-category-orange-11:  var(--orange-11);
 
+  --color-category-emerald-2:  var(--emerald-2);
   --color-category-emerald-3:  var(--emerald-3);
+  --color-category-emerald-4:  var(--emerald-4);
   --color-category-emerald-7:  var(--emerald-7);
   --color-category-emerald-9:  var(--emerald-9);
   --color-category-emerald-11: var(--emerald-11);
@@ -592,6 +628,9 @@
   --color-success-fg:   var(--neutral-0);
   --color-info-fg:      var(--neutral-0);
 
+  /* Category fills lighten in dark, so their label goes near-black, not white */
+  --color-category-fg:  var(--neutral-1);
+
   /* Warning: amber-bright dark ramp */
   --color-warning-2:  var(--amber-bright-2);
   --color-warning-3:  var(--amber-bright-3);
@@ -603,16 +642,29 @@
   --color-warning-11: var(--amber-bright-11);
   --color-warning-fg: var(--neutral-0);
 
-  /* Surface — dark page, lighter cards */
-  --color-surface-base:          var(--neutral-1);  /* 0.11L */
-  --color-surface-raised:        var(--neutral-2);  /* 0.17L */
-  --color-surface-chrome:        var(--neutral-2);  /* chrome tier — matches raised for now */
-  --color-surface-border:        var(--neutral-4);
-  --color-surface-border-strong: var(--neutral-5);
-  --color-surface-overlay:       oklch(0.13 0.0002 350);
-  --color-surface-border-subtle: var(--neutral-3);
-  /* Card edge in dark: a hair stronger so it still reads on the near-black base. */
-  --color-surface-border-card:   color-mix(in oklch, var(--neutral-6) 45%, transparent);
+  /* Surface — dark page, lighter cards. Unlike light, dark HAS room above the
+     page, so panel and overlay genuinely lift. */
+  --color-surface-base:          var(--neutral-1);        /* 0.147L */
+  --color-surface-panel:         var(--neutral-2);        /* 0.207L */
+  --color-surface-overlay:       var(--neutral-2);        /* same as panel + shadow */
+  --color-surface-panel-hover:   var(--neutral-3);
+  --color-surface-panel-active:  var(--neutral-4);
+  --color-surface-sunken:        var(--neutral-sunken);   /* coincides with the page */
+  --color-surface-sunken-hover:  var(--neutral-2);
+
+  /* DEPRECATED — see the light block. */
+  --color-surface-raised:        var(--color-surface-panel);
+  --color-surface-raised-hover:  var(--color-surface-panel-hover);
+  --color-surface-raised-active: var(--color-surface-panel-active);
+
+  /* Object edges invert to translucent white. */
+  --color-surface-border-subtle: oklch(1 0 0 / 0.06);
+  --color-surface-border:        oklch(1 0 0 / 0.10);
+  --color-surface-border-strong: oklch(1 0 0 / 0.16);
+  --color-surface-border-card:   var(--color-surface-border);
+
+  --color-surface-border-interactive:        var(--neutral-6);
+  --color-surface-border-interactive-strong: var(--neutral-7);
   --color-backdrop:              oklch(0 0 0 / 0.6);
 
   /* Segmented control — inverted elevation in dark: track is a faint LIGHTER
@@ -730,20 +782,27 @@
     --color-surface-fg-muted:     CanvasText;
     --color-surface-fg-subtle:    GrayText;
     --color-surface-fg-disabled:  GrayText;
-    --color-surface-base:         Canvas;
-    --color-surface-sunken:       Canvas;
-    --color-surface-raised:       Canvas;
-    --color-surface-raised-hover: Canvas;
+    --color-surface-base:          Canvas;
+    --color-surface-panel:         Canvas;
+    --color-surface-overlay:       Canvas;
+    --color-surface-panel-hover:   Canvas;
+    --color-surface-panel-active:  Canvas;
+    --color-surface-sunken:        Canvas;
+    --color-surface-sunken-hover:  Canvas;
+    --color-surface-raised:        Canvas;
+    --color-surface-raised-hover:  Canvas;
     --color-surface-raised-active: Canvas;
-    --color-surface-chrome:       Canvas;
-    --color-surface-overlay:      Canvas;
-    --color-surface-disabled:     Canvas;
-    --color-surface-inverted:     CanvasText;
-    --color-surface-inverted-fg:  Canvas;
-    --color-surface-border:         CanvasText;
-    --color-surface-border-strong:  CanvasText;
-    --color-surface-border-subtle:  GrayText;
-    --color-surface-border-card:    GrayText;
+    --color-surface-disabled:      Canvas;
+    --color-surface-inverted:      CanvasText;
+    --color-surface-inverted-fg:   Canvas;
+    /* Forced colours flatten the object/control split — every edge must be a
+       system colour or it disappears entirely. */
+    --color-surface-border:                    CanvasText;
+    --color-surface-border-strong:             CanvasText;
+    --color-surface-border-subtle:             GrayText;
+    --color-surface-border-card:               GrayText;
+    --color-surface-border-interactive:        CanvasText;
+    --color-surface-border-interactive-strong: CanvasText;
     --color-backdrop: Canvas;
     --color-overlay:  Canvas;
     --color-disabled: GrayText;

package/dist/tokens/variants.css

@@ -2,7 +2,7 @@
    CUSTOM VARIANTS (TW4 native)
 
    `@custom-variant <name> <selector>` registers a Tailwind 4 variant
-   that consumers can use as a prefix, e.g. `dark:bg-surface-raised`.
+   that consumers can use as a prefix, e.g. `dark:bg-surface-panel`.
 
    Our dark variant matches TW3's classic `darkMode: 'class'` behavior
    plus one extra: the `.dark` element itself also receives `dark:*`

package/dist/ui/accordion.js

@@ -24,7 +24,7 @@ var h = c.forwardRef(({ className: e, children: n, chevronPosition: r = "right",
 		className: "flex",
 		children: /* @__PURE__ */ u(i, {
 			ref: c,
-			className: o("group flex flex-1 items-center justify-between py-ds-05 text-left text-body-md font-medium hover:bg-surface-raised rounded-control data-[state=open]:bg-surface-raised focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9", e),
+			className: o("group flex flex-1 items-center justify-between py-ds-05 text-left text-body-md font-medium hover:bg-surface-panel-hover rounded-control data-[state=open]:bg-surface-panel-hover focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9", e),
 			...a,
 			children: [
 				r === "left" && f,

package/dist/ui/accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"accordion.js","names":[],"sources":["../../src/ui/accordion.tsx"],"sourcesContent":["'use client'\n\nimport * as AccordionPrimitive from '@primitives/react-accordion'\nimport { IconChevronDown } from '@tabler/icons-react'\nimport { motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { Icon } from './icon'\nimport { tweens } from './lib/motion'\nimport { cn } from './lib/utils'\n\n/**\n * Accordion compound component — vertically stacked, collapsible content sections.\n *\n * **Parts (in composition order):**\n * - `Accordion` — root; controls single vs. multiple open panels (this root)\n * - `AccordionItem` — individual collapsible section (requires `value` prop)\n * - `AccordionTrigger` — the clickable header row (chevron icon auto-renders and rotates)\n * - `AccordionContent` — the collapsible body revealed when the item is open\n *\n * **`type` prop (required on root):**\n * - `\"single\"` — only one panel open at a time; supports `collapsible` prop to re-close the active item\n * - `\"multiple\"` — multiple panels open simultaneously (value is `string[]`); `collapsible` is NOT valid here\n *\n * @compound\n * @example\n * // Single-open FAQ accordion:\n * <Accordion type=\"single\" defaultValue=\"item-1\" collapsible>\n *   <AccordionItem value=\"item-1\">\n *     <AccordionTrigger>What is Shilp Sutra?</AccordionTrigger>\n *     <AccordionContent>\n *       A React design system built for Next.js App Router, with full accessibility baked in.\n *     </AccordionContent>\n *   </AccordionItem>\n *   <AccordionItem value=\"item-2\">\n *     <AccordionTrigger>Is dark mode supported?</AccordionTrigger>\n *     <AccordionContent>\n *       Yes — add the <code>.dark</code> class to the root element to activate it.\n *     </AccordionContent>\n *   </AccordionItem>\n * </Accordion>\n *\n * @example\n * // Multiple-open controlled accordion:\n * const [open, setOpen] = useState<string[]>(['billing'])\n * <Accordion type=\"multiple\" value={open} onValueChange={setOpen}>\n *   <AccordionItem value=\"billing\">\n *     <AccordionTrigger>Billing</AccordionTrigger>\n *     <AccordionContent>Your billing details here.</AccordionContent>\n *   </AccordionItem>\n *   <AccordionItem value=\"security\">\n *     <AccordionTrigger>Security</AccordionTrigger>\n *     <AccordionContent>Security settings here.</AccordionContent>\n *   </AccordionItem>\n * </Accordion>\n */\nconst Accordion = AccordionPrimitive.Root\n\nconst AccordionItem = React.forwardRef<\n  React.ElementRef<typeof AccordionPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>\n>(({ className, ...props }, ref) => (\n  <AccordionPrimitive.Item\n    ref={ref}\n    className={cn('border-b border-surface-border', className)}\n    {...props}\n  />\n))\nAccordionItem.displayName = 'AccordionItem'\n\ninterface AccordionTriggerExtendedProps extends React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger> {\n  chevronPosition?: 'left' | 'right'\n}\n\nconst AccordionTrigger = React.forwardRef<\n  React.ElementRef<typeof AccordionPrimitive.Trigger>,\n  AccordionTriggerExtendedProps\n>(({ className, children, chevronPosition = 'right', ...props }, ref) => {\n  const chevron = (\n    <Icon icon={IconChevronDown} size=\"sm\" className=\"shrink-0 text-surface-fg-muted transition-transform duration-moderate-02 ease-productive-standard group-data-[state=open]:rotate-180\" />\n  )\n\n  return (\n    <AccordionPrimitive.Header className=\"flex\">\n      <AccordionPrimitive.Trigger\n        ref={ref}\n        className={cn(\n          'group flex flex-1 items-center justify-between py-ds-05 text-left text-body-md font-medium hover:bg-surface-raised rounded-control data-[state=open]:bg-surface-raised focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9',\n          className,\n        )}\n        {...props}\n      >\n        {chevronPosition === 'left' && chevron}\n        {children}\n        {chevronPosition === 'right' && chevron}\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  )\n})\nAccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName\n\nconst AccordionContent = React.forwardRef<\n  React.ElementRef<typeof AccordionPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>\n>(({ className, children, ...props }, ref) => (\n  <AccordionPrimitive.Content\n    ref={ref}\n    className=\"w-full overflow-hidden text-body-md data-[state=open]:animate-accordion-down data-[state=closed]:animate-accordion-up\"\n    {...props}\n  >\n    <motion.div\n      initial={false}\n      animate={{ opacity: 1 }}\n      transition={tweens.fade}\n    >\n      <div className={cn('pb-ds-05 pt-ds-02', className)}>{children}</div>\n    </motion.div>\n  </AccordionPrimitive.Content>\n))\nAccordionContent.displayName = AccordionPrimitive.Content.displayName\n\nexport type AccordionItemProps = React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>\nexport type AccordionTriggerProps = AccordionTriggerExtendedProps\nexport type AccordionContentProps = React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>\n\nexport { Accordion, AccordionContent,AccordionItem, AccordionTrigger }\n"],"mappings":";;;;;;;;;;AAwDA,IAAM,IAAY,GAEZ,IAAgB,EAAM,YAGzB,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,GAAD;CACO;CACL,WAAW,EAAG,kCAAkC,CAAS;CACzD,GAAI;AACL,CAAA,CACF;AACD,EAAc,cAAc;AAM5B,IAAM,IAAmB,EAAM,YAG5B,EAAE,cAAW,aAAU,qBAAkB,SAAS,GAAG,KAAS,MAAQ;CACvE,IAAM,IACJ,kBAAC,GAAD;EAAM,MAAM;EAAiB,MAAK;EAAK,WAAU;CAAwI,CAAA;CAG3L,OACE,kBAAC,GAAD;EAA2B,WAAU;YACnC,kBAAC,GAAD;GACO;GACL,WAAW,EACT,wPACA,CACF;GACA,GAAI;aANN;IAQG,MAAoB,UAAU;IAC9B;IACA,MAAoB,WAAW;GACN;;CACH,CAAA;AAE/B,CAAC;AACD,EAAiB,cAAA,EAAyC;AAE1D,IAAM,IAAmB,EAAM,YAG5B,EAAE,cAAW,aAAU,GAAG,KAAS,MACpC,kBAAC,GAAD;CACO;CACL,WAAU;CACV,GAAI;WAEJ,kBAAC,EAAO,KAAR;EACE,SAAS;EACT,SAAS,EAAE,SAAS,EAAE;EACtB,YAAY,EAAO;YAEnB,kBAAC,OAAD;GAAK,WAAW,EAAG,qBAAqB,CAAS;GAAI;EAAc,CAAA;CACzD,CAAA;AACc,CAAA,CAC7B;AACD,EAAiB,cAAA,EAAyC"}
+{"version":3,"file":"accordion.js","names":[],"sources":["../../src/ui/accordion.tsx"],"sourcesContent":["'use client'\n\nimport * as AccordionPrimitive from '@primitives/react-accordion'\nimport { IconChevronDown } from '@tabler/icons-react'\nimport { motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { Icon } from './icon'\nimport { tweens } from './lib/motion'\nimport { cn } from './lib/utils'\n\n/**\n * Accordion compound component — vertically stacked, collapsible content sections.\n *\n * **Parts (in composition order):**\n * - `Accordion` — root; controls single vs. multiple open panels (this root)\n * - `AccordionItem` — individual collapsible section (requires `value` prop)\n * - `AccordionTrigger` — the clickable header row (chevron icon auto-renders and rotates)\n * - `AccordionContent` — the collapsible body revealed when the item is open\n *\n * **`type` prop (required on root):**\n * - `\"single\"` — only one panel open at a time; supports `collapsible` prop to re-close the active item\n * - `\"multiple\"` — multiple panels open simultaneously (value is `string[]`); `collapsible` is NOT valid here\n *\n * @compound\n * @example\n * // Single-open FAQ accordion:\n * <Accordion type=\"single\" defaultValue=\"item-1\" collapsible>\n *   <AccordionItem value=\"item-1\">\n *     <AccordionTrigger>What is Shilp Sutra?</AccordionTrigger>\n *     <AccordionContent>\n *       A React design system built for Next.js App Router, with full accessibility baked in.\n *     </AccordionContent>\n *   </AccordionItem>\n *   <AccordionItem value=\"item-2\">\n *     <AccordionTrigger>Is dark mode supported?</AccordionTrigger>\n *     <AccordionContent>\n *       Yes — add the <code>.dark</code> class to the root element to activate it.\n *     </AccordionContent>\n *   </AccordionItem>\n * </Accordion>\n *\n * @example\n * // Multiple-open controlled accordion:\n * const [open, setOpen] = useState<string[]>(['billing'])\n * <Accordion type=\"multiple\" value={open} onValueChange={setOpen}>\n *   <AccordionItem value=\"billing\">\n *     <AccordionTrigger>Billing</AccordionTrigger>\n *     <AccordionContent>Your billing details here.</AccordionContent>\n *   </AccordionItem>\n *   <AccordionItem value=\"security\">\n *     <AccordionTrigger>Security</AccordionTrigger>\n *     <AccordionContent>Security settings here.</AccordionContent>\n *   </AccordionItem>\n * </Accordion>\n */\nconst Accordion = AccordionPrimitive.Root\n\nconst AccordionItem = React.forwardRef<\n  React.ElementRef<typeof AccordionPrimitive.Item>,\n  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>\n>(({ className, ...props }, ref) => (\n  <AccordionPrimitive.Item\n    ref={ref}\n    className={cn('border-b border-surface-border', className)}\n    {...props}\n  />\n))\nAccordionItem.displayName = 'AccordionItem'\n\ninterface AccordionTriggerExtendedProps extends React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger> {\n  chevronPosition?: 'left' | 'right'\n}\n\nconst AccordionTrigger = React.forwardRef<\n  React.ElementRef<typeof AccordionPrimitive.Trigger>,\n  AccordionTriggerExtendedProps\n>(({ className, children, chevronPosition = 'right', ...props }, ref) => {\n  const chevron = (\n    <Icon icon={IconChevronDown} size=\"sm\" className=\"shrink-0 text-surface-fg-muted transition-transform duration-moderate-02 ease-productive-standard group-data-[state=open]:rotate-180\" />\n  )\n\n  return (\n    <AccordionPrimitive.Header className=\"flex\">\n      <AccordionPrimitive.Trigger\n        ref={ref}\n        className={cn(\n          'group flex flex-1 items-center justify-between py-ds-05 text-left text-body-md font-medium hover:bg-surface-panel-hover rounded-control data-[state=open]:bg-surface-panel-hover focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9',\n          className,\n        )}\n        {...props}\n      >\n        {chevronPosition === 'left' && chevron}\n        {children}\n        {chevronPosition === 'right' && chevron}\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  )\n})\nAccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName\n\nconst AccordionContent = React.forwardRef<\n  React.ElementRef<typeof AccordionPrimitive.Content>,\n  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>\n>(({ className, children, ...props }, ref) => (\n  <AccordionPrimitive.Content\n    ref={ref}\n    className=\"w-full overflow-hidden text-body-md data-[state=open]:animate-accordion-down data-[state=closed]:animate-accordion-up\"\n    {...props}\n  >\n    <motion.div\n      initial={false}\n      animate={{ opacity: 1 }}\n      transition={tweens.fade}\n    >\n      <div className={cn('pb-ds-05 pt-ds-02', className)}>{children}</div>\n    </motion.div>\n  </AccordionPrimitive.Content>\n))\nAccordionContent.displayName = AccordionPrimitive.Content.displayName\n\nexport type AccordionItemProps = React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>\nexport type AccordionTriggerProps = AccordionTriggerExtendedProps\nexport type AccordionContentProps = React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>\n\nexport { Accordion, AccordionContent,AccordionItem, AccordionTrigger }\n"],"mappings":";;;;;;;;;;AAwDA,IAAM,IAAY,GAEZ,IAAgB,EAAM,YAGzB,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,GAAD;CACO;CACL,WAAW,EAAG,kCAAkC,CAAS;CACzD,GAAI;AACL,CAAA,CACF;AACD,EAAc,cAAc;AAM5B,IAAM,IAAmB,EAAM,YAG5B,EAAE,cAAW,aAAU,qBAAkB,SAAS,GAAG,KAAS,MAAQ;CACvE,IAAM,IACJ,kBAAC,GAAD;EAAM,MAAM;EAAiB,MAAK;EAAK,WAAU;CAAwI,CAAA;CAG3L,OACE,kBAAC,GAAD;EAA2B,WAAU;YACnC,kBAAC,GAAD;GACO;GACL,WAAW,EACT,kQACA,CACF;GACA,GAAI;aANN;IAQG,MAAoB,UAAU;IAC9B;IACA,MAAoB,WAAW;GACN;;CACH,CAAA;AAE/B,CAAC;AACD,EAAiB,cAAA,EAAyC;AAE1D,IAAM,IAAmB,EAAM,YAG5B,EAAE,cAAW,aAAU,GAAG,KAAS,MACpC,kBAAC,GAAD;CACO;CACL,WAAU;CACV,GAAI;WAEJ,kBAAC,EAAO,KAAR;EACE,SAAS;EACT,SAAS,EAAE,SAAS,EAAE;EACtB,YAAY,EAAO;YAEnB,kBAAC,OAAD;GAAK,WAAW,EAAG,qBAAqB,CAAS;GAAI;EAAc,CAAA;CACzD,CAAA;AACc,CAAA,CAC7B;AACD,EAAiB,cAAA,EAAyC"}

package/dist/ui/alert-dialog.js

@@ -107,7 +107,7 @@ var k = p.forwardRef(({ className: e, ...t }, i) => /* @__PURE__ */ m(r, {
 k.displayName = r.displayName;
 var A = p.forwardRef(({ className: e, ...t }, r) => /* @__PURE__ */ m(i, {
 	ref: r,
-	className: n("inline-flex h-ds-md items-center justify-center rounded-control px-ds-05 text-body-md font-semibold transition-colors bg-transparent text-surface-fg-muted border border-surface-border-strong hover:bg-surface-raised hover:text-surface-fg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-action-disabled", e),
+	className: n("inline-flex h-ds-md items-center justify-center rounded-control px-ds-05 text-body-md font-semibold transition-colors bg-transparent text-surface-fg-muted border border-surface-border-strong hover:bg-surface-panel-hover hover:text-surface-fg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-action-disabled", e),
 	...t
 }));
 A.displayName = i.displayName;

package/dist/ui/alert-dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"alert-dialog.js","names":[],"sources":["../../src/ui/alert-dialog.tsx"],"sourcesContent":["'use client'\n\nimport * as AlertDialogPrimitive from '@primitives/react-alert-dialog'\nimport { AnimatePresence,motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { useIsMobile } from '../hooks/use-mobile'\nimport { springs, tweens } from './lib/motion'\nimport { cn } from './lib/utils'\n\n// ── Internal context to thread `open` state to animated children ──\n\ntype AlertDialogContextValue = { open: boolean }\nconst AlertDialogContext = React.createContext<AlertDialogContextValue>({ open: false })\nconst useAlertDialogOpen = () => React.useContext(AlertDialogContext)\n\nconst AlertDialog: React.FC<React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Root>> = ({\n  open: openProp,\n  defaultOpen,\n  onOpenChange,\n  ...props\n}) => {\n  const [internalOpen, setInternalOpen] = React.useState(defaultOpen ?? false)\n  const isControlled = openProp !== undefined\n  const open = isControlled ? openProp : internalOpen\n\n  const handleOpenChange = React.useCallback(\n    (nextOpen: boolean) => {\n      if (!isControlled) setInternalOpen(nextOpen)\n      onOpenChange?.(nextOpen)\n    },\n    [isControlled, onOpenChange],\n  )\n\n  const contextValue = React.useMemo(() => ({ open }), [open])\n\n  return (\n    <AlertDialogContext.Provider value={contextValue}>\n      <AlertDialogPrimitive.Root open={open} onOpenChange={handleOpenChange} {...props} />\n    </AlertDialogContext.Provider>\n  )\n}\nAlertDialog.displayName = 'AlertDialog'\n\nconst AlertDialogTrigger = AlertDialogPrimitive.Trigger\n\nconst AlertDialogPortal = AlertDialogPrimitive.Portal\n\nconst AlertDialogOverlay = React.forwardRef<\n  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,\n  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n  <AlertDialogPrimitive.Overlay\n    ref={ref}\n    forceMount\n    className={cn(\n      'fixed inset-0 z-modal bg-overlay',\n      className,\n    )}\n    {...props}\n  />\n))\nAlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName\n\ninterface AlertDialogContentProps extends React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content> {\n  /** When true (default), AlertDialog fills the screen on mobile (<768px). Set false to always use centered modal. */\n  responsive?: boolean\n}\n\nconst AlertDialogContent = React.forwardRef<\n  React.ElementRef<typeof AlertDialogPrimitive.Content>,\n  AlertDialogContentProps\n>(({ className, children, responsive, ...props }, ref) => {\n  const { open } = useAlertDialogOpen()\n  const isMobileRaw = useIsMobile()\n  const isMobile = responsive !== false && isMobileRaw\n\n  return (\n    <AnimatePresence>\n      {open && (\n        <AlertDialogPortal forceMount>\n          <AlertDialogOverlay asChild>\n            <motion.div\n              initial={{ opacity: 0 }}\n              animate={{ opacity: 1 }}\n              exit={{ opacity: 0 }}\n              transition={tweens.fade}\n            />\n          </AlertDialogOverlay>\n          <AlertDialogPrimitive.Content\n            ref={ref}\n            forceMount\n            asChild\n            {...props}\n          >\n            <motion.div\n              initial={isMobile ? { y: '100%' } : { opacity: 0, scale: 0.95, x: '-50%', y: '-50%' }}\n              animate={isMobile ? { y: 0 } : { opacity: 1, scale: 1, x: '-50%', y: '-50%' }}\n              exit={isMobile ? { y: '100%' } : { opacity: 0, scale: 0.95, x: '-50%', y: '-50%' }}\n              transition={isMobile\n                ? springs.smooth\n                : { ...springs.smooth, opacity: tweens.fade }\n              }\n              className={cn(\n                'fixed z-modal grid w-full gap-ds-05 bg-surface-overlay p-ds-06',\n                responsive !== false\n                  ? 'inset-0 md:inset-auto md:left-[50%] md:top-[50%] md:max-w-lg md:rounded-overlay-lg md:shadow-overlay'\n                  : 'left-[50%] top-[50%] max-w-lg rounded-overlay-lg shadow-overlay',\n                className,\n              )}\n            >\n              {children}\n            </motion.div>\n          </AlertDialogPrimitive.Content>\n        </AlertDialogPortal>\n      )}\n    </AnimatePresence>\n  )\n})\nAlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName\n\nconst AlertDialogHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\n        'flex flex-col space-y-ds-02b text-center sm:text-left',\n        className,\n      )}\n      {...props}\n    />\n  ),\n)\nAlertDialogHeader.displayName = 'AlertDialogHeader'\n\nconst AlertDialogFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\n        'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-ds-03',\n        className,\n      )}\n      {...props}\n    />\n  ),\n)\nAlertDialogFooter.displayName = 'AlertDialogFooter'\n\nconst AlertDialogTitle = React.forwardRef<\n  React.ElementRef<typeof AlertDialogPrimitive.Title>,\n  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n  <AlertDialogPrimitive.Title\n    ref={ref}\n    className={cn(\n      'text-heading-xs font-semibold',\n      className,\n    )}\n    {...props}\n  />\n))\nAlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName\n\nconst AlertDialogDescription = React.forwardRef<\n  React.ElementRef<typeof AlertDialogPrimitive.Description>,\n  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n  <AlertDialogPrimitive.Description\n    ref={ref}\n    className={cn('text-body-md text-surface-fg-muted', className)}\n    {...props}\n  />\n))\nAlertDialogDescription.displayName =\n  AlertDialogPrimitive.Description.displayName\n\nconst AlertDialogAction = React.forwardRef<\n  React.ElementRef<typeof AlertDialogPrimitive.Action>,\n  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>\n>(({ className, ...props }, ref) => (\n  <AlertDialogPrimitive.Action\n    ref={ref}\n    className={cn(\n      'inline-flex h-ds-md items-center justify-center rounded-control px-ds-05 text-body-md font-semibold transition-colors bg-accent-9 text-accent-fg hover:bg-accent-10 active:bg-accent-10 shadow-raised focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-action-disabled',\n      className,\n    )}\n    {...props}\n  />\n))\nAlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName\n\nconst AlertDialogCancel = React.forwardRef<\n  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,\n  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>\n>(({ className, ...props }, ref) => (\n  <AlertDialogPrimitive.Cancel\n    ref={ref}\n    className={cn(\n      'inline-flex h-ds-md items-center justify-center rounded-control px-ds-05 text-body-md font-semibold transition-colors bg-transparent text-surface-fg-muted border border-surface-border-strong hover:bg-surface-raised hover:text-surface-fg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-action-disabled',\n      className,\n    )}\n    {...props}\n  />\n))\nAlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName\n\nexport type { AlertDialogContentProps }\nexport type AlertDialogActionProps = React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>\nexport type AlertDialogCancelProps = React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>\n\nexport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogOverlay,\n  AlertDialogPortal,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n}\n"],"mappings":"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"}
+{"version":3,"file":"alert-dialog.js","names":[],"sources":["../../src/ui/alert-dialog.tsx"],"sourcesContent":["'use client'\n\nimport * as AlertDialogPrimitive from '@primitives/react-alert-dialog'\nimport { AnimatePresence,motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { useIsMobile } from '../hooks/use-mobile'\nimport { springs, tweens } from './lib/motion'\nimport { cn } from './lib/utils'\n\n// ── Internal context to thread `open` state to animated children ──\n\ntype AlertDialogContextValue = { open: boolean }\nconst AlertDialogContext = React.createContext<AlertDialogContextValue>({ open: false })\nconst useAlertDialogOpen = () => React.useContext(AlertDialogContext)\n\nconst AlertDialog: React.FC<React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Root>> = ({\n  open: openProp,\n  defaultOpen,\n  onOpenChange,\n  ...props\n}) => {\n  const [internalOpen, setInternalOpen] = React.useState(defaultOpen ?? false)\n  const isControlled = openProp !== undefined\n  const open = isControlled ? openProp : internalOpen\n\n  const handleOpenChange = React.useCallback(\n    (nextOpen: boolean) => {\n      if (!isControlled) setInternalOpen(nextOpen)\n      onOpenChange?.(nextOpen)\n    },\n    [isControlled, onOpenChange],\n  )\n\n  const contextValue = React.useMemo(() => ({ open }), [open])\n\n  return (\n    <AlertDialogContext.Provider value={contextValue}>\n      <AlertDialogPrimitive.Root open={open} onOpenChange={handleOpenChange} {...props} />\n    </AlertDialogContext.Provider>\n  )\n}\nAlertDialog.displayName = 'AlertDialog'\n\nconst AlertDialogTrigger = AlertDialogPrimitive.Trigger\n\nconst AlertDialogPortal = AlertDialogPrimitive.Portal\n\nconst AlertDialogOverlay = React.forwardRef<\n  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,\n  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n  <AlertDialogPrimitive.Overlay\n    ref={ref}\n    forceMount\n    className={cn(\n      'fixed inset-0 z-modal bg-overlay',\n      className,\n    )}\n    {...props}\n  />\n))\nAlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName\n\ninterface AlertDialogContentProps extends React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content> {\n  /** When true (default), AlertDialog fills the screen on mobile (<768px). Set false to always use centered modal. */\n  responsive?: boolean\n}\n\nconst AlertDialogContent = React.forwardRef<\n  React.ElementRef<typeof AlertDialogPrimitive.Content>,\n  AlertDialogContentProps\n>(({ className, children, responsive, ...props }, ref) => {\n  const { open } = useAlertDialogOpen()\n  const isMobileRaw = useIsMobile()\n  const isMobile = responsive !== false && isMobileRaw\n\n  return (\n    <AnimatePresence>\n      {open && (\n        <AlertDialogPortal forceMount>\n          <AlertDialogOverlay asChild>\n            <motion.div\n              initial={{ opacity: 0 }}\n              animate={{ opacity: 1 }}\n              exit={{ opacity: 0 }}\n              transition={tweens.fade}\n            />\n          </AlertDialogOverlay>\n          <AlertDialogPrimitive.Content\n            ref={ref}\n            forceMount\n            asChild\n            {...props}\n          >\n            <motion.div\n              initial={isMobile ? { y: '100%' } : { opacity: 0, scale: 0.95, x: '-50%', y: '-50%' }}\n              animate={isMobile ? { y: 0 } : { opacity: 1, scale: 1, x: '-50%', y: '-50%' }}\n              exit={isMobile ? { y: '100%' } : { opacity: 0, scale: 0.95, x: '-50%', y: '-50%' }}\n              transition={isMobile\n                ? springs.smooth\n                : { ...springs.smooth, opacity: tweens.fade }\n              }\n              className={cn(\n                'fixed z-modal grid w-full gap-ds-05 bg-surface-overlay p-ds-06',\n                responsive !== false\n                  ? 'inset-0 md:inset-auto md:left-[50%] md:top-[50%] md:max-w-lg md:rounded-overlay-lg md:shadow-overlay'\n                  : 'left-[50%] top-[50%] max-w-lg rounded-overlay-lg shadow-overlay',\n                className,\n              )}\n            >\n              {children}\n            </motion.div>\n          </AlertDialogPrimitive.Content>\n        </AlertDialogPortal>\n      )}\n    </AnimatePresence>\n  )\n})\nAlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName\n\nconst AlertDialogHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\n        'flex flex-col space-y-ds-02b text-center sm:text-left',\n        className,\n      )}\n      {...props}\n    />\n  ),\n)\nAlertDialogHeader.displayName = 'AlertDialogHeader'\n\nconst AlertDialogFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\n        'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-ds-03',\n        className,\n      )}\n      {...props}\n    />\n  ),\n)\nAlertDialogFooter.displayName = 'AlertDialogFooter'\n\nconst AlertDialogTitle = React.forwardRef<\n  React.ElementRef<typeof AlertDialogPrimitive.Title>,\n  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>\n>(({ className, ...props }, ref) => (\n  <AlertDialogPrimitive.Title\n    ref={ref}\n    className={cn(\n      'text-heading-xs font-semibold',\n      className,\n    )}\n    {...props}\n  />\n))\nAlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName\n\nconst AlertDialogDescription = React.forwardRef<\n  React.ElementRef<typeof AlertDialogPrimitive.Description>,\n  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>\n>(({ className, ...props }, ref) => (\n  <AlertDialogPrimitive.Description\n    ref={ref}\n    className={cn('text-body-md text-surface-fg-muted', className)}\n    {...props}\n  />\n))\nAlertDialogDescription.displayName =\n  AlertDialogPrimitive.Description.displayName\n\nconst AlertDialogAction = React.forwardRef<\n  React.ElementRef<typeof AlertDialogPrimitive.Action>,\n  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>\n>(({ className, ...props }, ref) => (\n  <AlertDialogPrimitive.Action\n    ref={ref}\n    className={cn(\n      'inline-flex h-ds-md items-center justify-center rounded-control px-ds-05 text-body-md font-semibold transition-colors bg-accent-9 text-accent-fg hover:bg-accent-10 active:bg-accent-10 shadow-raised focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-action-disabled',\n      className,\n    )}\n    {...props}\n  />\n))\nAlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName\n\nconst AlertDialogCancel = React.forwardRef<\n  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,\n  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>\n>(({ className, ...props }, ref) => (\n  <AlertDialogPrimitive.Cancel\n    ref={ref}\n    className={cn(\n      'inline-flex h-ds-md items-center justify-center rounded-control px-ds-05 text-body-md font-semibold transition-colors bg-transparent text-surface-fg-muted border border-surface-border-strong hover:bg-surface-panel-hover hover:text-surface-fg focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-action-disabled',\n      className,\n    )}\n    {...props}\n  />\n))\nAlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName\n\nexport type { AlertDialogContentProps }\nexport type AlertDialogActionProps = React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>\nexport type AlertDialogCancelProps = React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>\n\nexport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogOverlay,\n  AlertDialogPortal,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n}\n"],"mappings":"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"}

package/dist/ui/alert.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["../../src/ui/alert.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEjE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,QAAA,MAAM,aAAa;;;;8EA4ClB,CAAA;AAUD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,MAAM,WAAW,UACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,EACzD,YAAY,CAAC,OAAO,aAAa,CAAC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;CACvB;AAED,QAAA,MAAM,KAAK,mFA0DV,CAAA;AAGD,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,CAAA"}
+{"version":3,"file":"alert.d.ts","sourceRoot":"","sources":["../../src/ui/alert.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEjE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,QAAA,MAAM,aAAa;;;;8EA4ClB,CAAA;AAUD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,MAAM,WAAW,UACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,EACzD,YAAY,CAAC,OAAO,aAAa,CAAC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;CACvB;AAED,QAAA,MAAM,KAAK,mFAkEV,CAAA;AAGD,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,CAAA"}

package/dist/ui/alert.js

@@ -32,27 +32,27 @@ var h = m("relative flex rounded-surface border", {
 		{
 			variant: "subtle",
 			color: "info",
-			className: "bg-info-3 border-info-7 text-info-11"
+			className: "bg-info-2 border-info-4 text-info-11"
 		},
 		{
 			variant: "subtle",
 			color: "success",
-			className: "bg-success-3 border-success-7 text-success-11"
+			className: "bg-success-2 border-success-4 text-success-11"
 		},
 		{
 			variant: "subtle",
 			color: "warning",
-			className: "bg-warning-3 border-warning-7 text-warning-11"
+			className: "bg-warning-2 border-warning-4 text-warning-11"
 		},
 		{
 			variant: "subtle",
 			color: "error",
-			className: "bg-error-3 border-error-7 text-error-11"
+			className: "bg-error-2 border-error-4 text-error-11"
 		},
 		{
 			variant: "subtle",
 			color: "neutral",
-			className: "bg-surface-raised border-surface-border-strong text-surface-fg [&>svg]:text-surface-fg-muted"
+			className: "bg-surface-panel border-surface-border-strong text-surface-fg [&>svg]:text-surface-fg-muted"
 		},
 		{
 			variant: "solid",
@@ -77,7 +77,7 @@ var h = m("relative flex rounded-surface border", {
 		{
 			variant: "solid",
 			color: "neutral",
-			className: "bg-surface-raised-hover text-surface-fg border-transparent [&>svg]:text-surface-fg-muted"
+			className: "bg-surface-panel-hover text-surface-fg border-transparent [&>svg]:text-surface-fg-muted"
 		},
 		{
 			variant: "outline",
@@ -163,7 +163,7 @@ var h = m("relative flex rounded-surface border", {
 				_ && /* @__PURE__ */ a("button", {
 					type: "button",
 					onClick: w,
-					className: "shrink-0 min-h-ds-xs min-w-ds-xs flex items-center justify-center rounded-control-inner text-surface-fg-subtle transition-colors duration-fast-01 ease-productive-standard hover:text-surface-fg-muted hover:bg-surface-raised-hover active:scale-95 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9",
+					className: n("shrink-0 min-h-ds-xs min-w-ds-xs flex items-center justify-center rounded-control-inner transition-colors duration-fast-01 ease-productive-standard active:scale-95 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9", c === "solid" ? "text-current opacity-80 hover:opacity-100" : "text-surface-fg-subtle hover:text-surface-fg-muted hover:bg-surface-panel-hover"),
 					"aria-label": "Dismiss",
 					children: /* @__PURE__ */ a(r, {
 						icon: d,

package/dist/ui/alert.js.map

@@ -1 +1 @@
-{"version":3,"file":"alert.js","names":[],"sources":["../../src/ui/alert.tsx"],"sourcesContent":["'use client'\n\nimport { IconAlertCircle, IconAlertTriangle,IconCircleCheck, IconInfoCircle, IconX } from '@tabler/icons-react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { AnimatePresence,motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { Icon } from './icon'\nimport { motionProps,springs } from './lib/motion'\nimport { cn } from './lib/utils'\n\nconst alertVariants = cva(\n  'relative flex rounded-surface border',\n  {\n    variants: {\n      variant: {\n        subtle: '',\n        solid: '',\n        outline: '',\n      },\n      color: {\n        info: '',\n        success: '',\n        warning: '',\n        error: '',\n        neutral: '',\n      },\n      size: {\n        sm: 'gap-ds-03 p-ds-03',\n        md: 'gap-ds-04 p-ds-05',\n        lg: 'gap-ds-05 p-ds-07',\n      },\n    },\n    compoundVariants: [\n      // subtle (surface bg) — default, matches previous behavior\n      { variant: 'subtle', color: 'info', className: 'bg-info-3 border-info-7 text-info-11' },\n      { variant: 'subtle', color: 'success', className: 'bg-success-3 border-success-7 text-success-11' },\n      { variant: 'subtle', color: 'warning', className: 'bg-warning-3 border-warning-7 text-warning-11' },\n      { variant: 'subtle', color: 'error', className: 'bg-error-3 border-error-7 text-error-11' },\n      { variant: 'subtle', color: 'neutral', className: 'bg-surface-raised border-surface-border-strong text-surface-fg [&>svg]:text-surface-fg-muted' },\n      // solid (solid bg, contrasting text) — canonical name\n      { variant: 'solid', color: 'info', className: 'bg-info-9 text-info-fg border-transparent [&>svg]:text-info-fg' },\n      { variant: 'solid', color: 'success', className: 'bg-success-9 text-success-fg border-transparent [&>svg]:text-success-fg' },\n      { variant: 'solid', color: 'warning', className: 'bg-warning-9 text-warning-fg border-transparent [&>svg]:text-warning-fg' },\n      { variant: 'solid', color: 'error', className: 'bg-error-9 text-error-fg border-transparent [&>svg]:text-error-fg' },\n      { variant: 'solid', color: 'neutral', className: 'bg-surface-raised-hover text-surface-fg border-transparent [&>svg]:text-surface-fg-muted' },\n      // outline (transparent bg, colored border)\n      { variant: 'outline', color: 'info', className: 'bg-transparent border-info-7 text-info-11' },\n      { variant: 'outline', color: 'success', className: 'bg-transparent border-success-7 text-success-11' },\n      { variant: 'outline', color: 'warning', className: 'bg-transparent border-warning-7 text-warning-11' },\n      { variant: 'outline', color: 'error', className: 'bg-transparent border-error-7 text-error-11' },\n      { variant: 'outline', color: 'neutral', className: 'bg-transparent border-surface-border-strong text-surface-fg [&>svg]:text-surface-fg-muted' },\n    ],\n    defaultVariants: { variant: 'subtle', color: 'info', size: 'md' },\n  },\n)\n\nconst ALERT_ICONS: Record<string, React.ForwardRefExoticComponent<any>> = {\n  info:    IconInfoCircle,\n  success: IconCircleCheck,\n  warning: IconAlertTriangle,\n  error:   IconAlertCircle,\n  neutral: IconInfoCircle,\n}\n\n/**\n * Props for Alert — an inline message block with a colored icon, optional title, optional body,\n * and an optional dismiss button. Renders with `role=\"alert\"` for screen reader announcements.\n *\n * **Variants:** `subtle` (default, tinted surface) | `solid` (solid colored bg) | `outline` (transparent bg, colored border)\n *\n * **Colors:** `info` (default, blue tones) | `success` | `warning` | `error` | `neutral`\n * The matching icon (info circle, checkmark, triangle, alert circle) is auto-selected by color.\n *\n * **Alert vs Banner:** Alert is inline (inside page content). Banner is a full-width notification\n * strip rendered at the top of a page/section (see `<Banner>`).\n *\n * **Dismissible:** Provide `onDismiss` to show an × button. Absence of the prop = non-dismissible.\n *\n * @example\n * // Informational tip inside a settings form:\n * <Alert title=\"Tip\" color=\"info\">\n *   Changes take effect after you save and reload the page.\n * </Alert>\n *\n * @example\n * // Error feedback after a failed API call (dismissible):\n * <Alert color=\"error\" title=\"Save failed\" onDismiss={() => setError(null)}>\n *   Your changes could not be saved. Please try again.\n * </Alert>\n *\n * @example\n * // Success confirmation after publishing:\n * <Alert color=\"success\" title=\"Published!\">\n *   Your post is now live and visible to all subscribers.\n * </Alert>\n *\n * @example\n * // Neutral inline note (no colored intent):\n * <Alert color=\"neutral\">This field is auto-populated from your profile.</Alert>\n * // These are just a few ways — feel free to combine props creatively!\n */\nexport interface AlertProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'>,\n    VariantProps<typeof alertVariants> {\n  title?: string\n  /**\n   * Called after the exit animation completes, not immediately on click.\n   * The dismiss button sets internal visibility to false, triggering the exit\n   * animation; `onDismiss` fires via `AnimatePresence.onExitComplete`.\n   */\n  onDismiss?: () => void\n}\n\nconst Alert = React.forwardRef<HTMLDivElement, AlertProps>(\n  ({ className, variant = 'subtle', color = 'info', size = 'md', title, onDismiss, children, ...props }, ref) => {\n    const AlertIcon = ALERT_ICONS[color ?? 'info']\n    const [isVisible, setIsVisible] = React.useState(true)\n\n    const handleDismiss = React.useCallback(() => {\n      setIsVisible(false)\n    }, [])\n\n    const iconSize = size === 'sm' ? 'sm' : size === 'lg' ? 'lg' : 'md'\n    const dismissIconSize = size === 'sm' ? 'xs' : 'sm'\n    const textClass = size === 'sm' ? 'text-body-xs' : size === 'lg' ? 'text-body-md' : 'text-body-md'\n    const titleClass = size === 'sm' ? 'text-body-sm' : size === 'lg' ? 'text-heading-xs' : 'text-body-md'\n\n    return (\n      <AnimatePresence onExitComplete={onDismiss}>\n        {isVisible && (\n          <motion.div\n            ref={ref}\n            initial={{ opacity: 1, y: 0 }}\n            animate={{ opacity: 1, y: 0 }}\n            exit={{ opacity: 0, y: -8 }}\n            transition={springs.snappy}\n            className={cn(alertVariants({ variant, color, size }), className)}\n            role=\"alert\"\n            {...motionProps(props)}\n          >\n            <Icon icon={AlertIcon} size={iconSize} className=\"mt-ds-01 shrink-0\" />\n            <div className=\"flex-1 min-w-0\">\n              {title && <p className={cn(titleClass, 'font-semibold mb-ds-01')}>{title}</p>}\n              {/* Body: on solid variants the CVA sets text-accent-fg (white) on\n                  saturated step-9 backgrounds. Muting the body to surface-fg (grey)\n                  there drops contrast below WCAG AA. Only mute on subtle/outline\n                  variants where the root color is a readable step-11. */}\n              <div\n                className={cn(\n                  textClass,\n                  variant !== 'solid' && 'text-surface-fg-muted',\n                )}\n              >\n                {children}\n              </div>\n            </div>\n            {onDismiss && (\n              <button\n                type=\"button\"\n                onClick={handleDismiss}\n                className=\"shrink-0 min-h-ds-xs min-w-ds-xs flex items-center justify-center rounded-control-inner text-surface-fg-subtle transition-colors duration-fast-01 ease-productive-standard hover:text-surface-fg-muted hover:bg-surface-raised-hover active:scale-95 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9\"\n                aria-label=\"Dismiss\"\n              >\n                <Icon icon={IconX} size={dismissIconSize} />\n              </button>\n            )}\n          </motion.div>\n        )}\n      </AnimatePresence>\n    )\n  },\n)\nAlert.displayName = 'Alert'\n\nexport { Alert, alertVariants }\n"],"mappings":"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"}
+{"version":3,"file":"alert.js","names":[],"sources":["../../src/ui/alert.tsx"],"sourcesContent":["'use client'\n\nimport { IconAlertCircle, IconAlertTriangle,IconCircleCheck, IconInfoCircle, IconX } from '@tabler/icons-react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { AnimatePresence,motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { Icon } from './icon'\nimport { motionProps,springs } from './lib/motion'\nimport { cn } from './lib/utils'\n\nconst alertVariants = cva(\n  'relative flex rounded-surface border',\n  {\n    variants: {\n      variant: {\n        subtle: '',\n        solid: '',\n        outline: '',\n      },\n      color: {\n        info: '',\n        success: '',\n        warning: '',\n        error: '',\n        neutral: '',\n      },\n      size: {\n        sm: 'gap-ds-03 p-ds-03',\n        md: 'gap-ds-04 p-ds-05',\n        lg: 'gap-ds-05 p-ds-07',\n      },\n    },\n    compoundVariants: [\n      // subtle (surface bg) — default, matches previous behavior\n      { variant: 'subtle', color: 'info', className: 'bg-info-2 border-info-4 text-info-11' },\n      { variant: 'subtle', color: 'success', className: 'bg-success-2 border-success-4 text-success-11' },\n      { variant: 'subtle', color: 'warning', className: 'bg-warning-2 border-warning-4 text-warning-11' },\n      { variant: 'subtle', color: 'error', className: 'bg-error-2 border-error-4 text-error-11' },\n      { variant: 'subtle', color: 'neutral', className: 'bg-surface-panel border-surface-border-strong text-surface-fg [&>svg]:text-surface-fg-muted' },\n      // solid (solid bg, contrasting text) — canonical name\n      { variant: 'solid', color: 'info', className: 'bg-info-9 text-info-fg border-transparent [&>svg]:text-info-fg' },\n      { variant: 'solid', color: 'success', className: 'bg-success-9 text-success-fg border-transparent [&>svg]:text-success-fg' },\n      { variant: 'solid', color: 'warning', className: 'bg-warning-9 text-warning-fg border-transparent [&>svg]:text-warning-fg' },\n      { variant: 'solid', color: 'error', className: 'bg-error-9 text-error-fg border-transparent [&>svg]:text-error-fg' },\n      { variant: 'solid', color: 'neutral', className: 'bg-surface-panel-hover text-surface-fg border-transparent [&>svg]:text-surface-fg-muted' },\n      // outline (transparent bg, colored border)\n      { variant: 'outline', color: 'info', className: 'bg-transparent border-info-7 text-info-11' },\n      { variant: 'outline', color: 'success', className: 'bg-transparent border-success-7 text-success-11' },\n      { variant: 'outline', color: 'warning', className: 'bg-transparent border-warning-7 text-warning-11' },\n      { variant: 'outline', color: 'error', className: 'bg-transparent border-error-7 text-error-11' },\n      { variant: 'outline', color: 'neutral', className: 'bg-transparent border-surface-border-strong text-surface-fg [&>svg]:text-surface-fg-muted' },\n    ],\n    defaultVariants: { variant: 'subtle', color: 'info', size: 'md' },\n  },\n)\n\nconst ALERT_ICONS: Record<string, React.ForwardRefExoticComponent<any>> = {\n  info:    IconInfoCircle,\n  success: IconCircleCheck,\n  warning: IconAlertTriangle,\n  error:   IconAlertCircle,\n  neutral: IconInfoCircle,\n}\n\n/**\n * Props for Alert — an inline message block with a colored icon, optional title, optional body,\n * and an optional dismiss button. Renders with `role=\"alert\"` for screen reader announcements.\n *\n * **Variants:** `subtle` (default, tinted surface) | `solid` (solid colored bg) | `outline` (transparent bg, colored border)\n *\n * **Colors:** `info` (default, blue tones) | `success` | `warning` | `error` | `neutral`\n * The matching icon (info circle, checkmark, triangle, alert circle) is auto-selected by color.\n *\n * **Alert vs Banner:** Alert is inline (inside page content). Banner is a full-width notification\n * strip rendered at the top of a page/section (see `<Banner>`).\n *\n * **Dismissible:** Provide `onDismiss` to show an × button. Absence of the prop = non-dismissible.\n *\n * @example\n * // Informational tip inside a settings form:\n * <Alert title=\"Tip\" color=\"info\">\n *   Changes take effect after you save and reload the page.\n * </Alert>\n *\n * @example\n * // Error feedback after a failed API call (dismissible):\n * <Alert color=\"error\" title=\"Save failed\" onDismiss={() => setError(null)}>\n *   Your changes could not be saved. Please try again.\n * </Alert>\n *\n * @example\n * // Success confirmation after publishing:\n * <Alert color=\"success\" title=\"Published!\">\n *   Your post is now live and visible to all subscribers.\n * </Alert>\n *\n * @example\n * // Neutral inline note (no colored intent):\n * <Alert color=\"neutral\">This field is auto-populated from your profile.</Alert>\n * // These are just a few ways — feel free to combine props creatively!\n */\nexport interface AlertProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color'>,\n    VariantProps<typeof alertVariants> {\n  title?: string\n  /**\n   * Called after the exit animation completes, not immediately on click.\n   * The dismiss button sets internal visibility to false, triggering the exit\n   * animation; `onDismiss` fires via `AnimatePresence.onExitComplete`.\n   */\n  onDismiss?: () => void\n}\n\nconst Alert = React.forwardRef<HTMLDivElement, AlertProps>(\n  ({ className, variant = 'subtle', color = 'info', size = 'md', title, onDismiss, children, ...props }, ref) => {\n    const AlertIcon = ALERT_ICONS[color ?? 'info']\n    const [isVisible, setIsVisible] = React.useState(true)\n\n    const handleDismiss = React.useCallback(() => {\n      setIsVisible(false)\n    }, [])\n\n    const iconSize = size === 'sm' ? 'sm' : size === 'lg' ? 'lg' : 'md'\n    const dismissIconSize = size === 'sm' ? 'xs' : 'sm'\n    const textClass = size === 'sm' ? 'text-body-xs' : size === 'lg' ? 'text-body-md' : 'text-body-md'\n    const titleClass = size === 'sm' ? 'text-body-sm' : size === 'lg' ? 'text-heading-xs' : 'text-body-md'\n\n    return (\n      <AnimatePresence onExitComplete={onDismiss}>\n        {isVisible && (\n          <motion.div\n            ref={ref}\n            initial={{ opacity: 1, y: 0 }}\n            animate={{ opacity: 1, y: 0 }}\n            exit={{ opacity: 0, y: -8 }}\n            transition={springs.snappy}\n            className={cn(alertVariants({ variant, color, size }), className)}\n            role=\"alert\"\n            {...motionProps(props)}\n          >\n            <Icon icon={AlertIcon} size={iconSize} className=\"mt-ds-01 shrink-0\" />\n            <div className=\"flex-1 min-w-0\">\n              {title && <p className={cn(titleClass, 'font-semibold mb-ds-01')}>{title}</p>}\n              {/* Body: on solid variants the CVA sets text-accent-fg (white) on\n                  saturated step-9 backgrounds. Muting the body to surface-fg (grey)\n                  there drops contrast below WCAG AA. Only mute on subtle/outline\n                  variants where the root color is a readable step-11. */}\n              <div\n                className={cn(\n                  textClass,\n                  variant !== 'solid' && 'text-surface-fg-muted',\n                )}\n              >\n                {children}\n              </div>\n            </div>\n            {onDismiss && (\n              <button\n                type=\"button\"\n                onClick={handleDismiss}\n                className={cn(\n                  'shrink-0 min-h-ds-xs min-w-ds-xs flex items-center justify-center rounded-control-inner transition-colors duration-fast-01 ease-productive-standard active:scale-95 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9',\n                  // On solid the fill is a saturated step 9, where a mid grey\n                  // measures as low as 1.01:1. Inherit the alert's own foreground,\n                  // exactly as the title and body already do.\n                  variant === 'solid'\n                    ? 'text-current opacity-80 hover:opacity-100'\n                    : 'text-surface-fg-subtle hover:text-surface-fg-muted hover:bg-surface-panel-hover',\n                )}\n                aria-label=\"Dismiss\"\n              >\n                <Icon icon={IconX} size={dismissIconSize} />\n              </button>\n            )}\n          </motion.div>\n        )}\n      </AnimatePresence>\n    )\n  },\n)\nAlert.displayName = 'Alert'\n\nexport { Alert, alertVariants }\n"],"mappings":"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"}

package/dist/ui/avatar.js

@@ -98,7 +98,7 @@ function S(e) {
 	return x[Math.abs(t) % x.length];
 }
 var C = s.forwardRef(({ className: n, size: r, shape: s, status: d, ring: b, badge: x, loading: S, children: C, ...w }, T) => {
-	let E = s ?? "circle", D = b && b !== "none" ? t("ring-2 ring-offset-2 ring-offset-surface-raised", v[b], y[E]) : void 0;
+	let E = s ?? "circle", D = b && b !== "none" ? t("ring-2 ring-offset-2 ring-offset-surface-panel", v[b], y[E]) : void 0;
 	if (S) return /* @__PURE__ */ c("span", {
 		ref: T,
 		className: t("relative inline-flex shrink-0", D),
@@ -139,14 +139,14 @@ var C = s.forwardRef(({ className: n, size: r, shape: s, status: d, ring: b, bad
 						})
 					}),
 					O && (x === "dot" ? /* @__PURE__ */ c("span", {
-						className: "absolute -right-0.5 -top-0.5 h-ds-03 w-ds-03 rounded-pill bg-error-9 ring-2 ring-surface-raised",
+						className: "absolute -right-0.5 -top-0.5 h-ds-03 w-ds-03 rounded-pill bg-error-9 ring-2 ring-surface-panel",
 						"data-slot": "avatar-badge-dot",
 						"aria-hidden": "true"
 					}) : typeof x == "number" ? /* @__PURE__ */ c(u.span, {
 						initial: { scale: 0 },
 						animate: { scale: 1 },
 						transition: e.smooth,
-						className: "absolute -right-1 -top-1 flex min-w-ds-05 items-center justify-center rounded-pill bg-error-9 px-1 text-[10px] font-bold leading-[16px] text-error-fg ring-2 ring-surface-raised",
+						className: "absolute -right-1 -top-1 flex min-w-ds-05 items-center justify-center rounded-pill bg-error-9 px-1 text-[10px] font-bold leading-[16px] text-error-fg ring-2 ring-surface-panel",
 						"data-slot": "avatar-badge",
 						role: "status",
 						"aria-label": `${x > 99 ? "99+" : x} notifications`,

package/dist/ui/avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.js","names":[],"sources":["../../src/ui/avatar.tsx"],"sourcesContent":["'use client'\n\nimport * as AvatarPrimitive from \"@primitives/react-avatar\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { motion } from \"framer-motion\"\nimport * as React from \"react\"\n\nimport { Dot, type DotColor, type DotSize } from \"./dot\"\nimport { springs } from \"./lib/motion\"\nimport { cn } from \"./lib/utils\"\nimport { Skeleton } from \"./skeleton\"\n\n// ── Contexts so AvatarFallback can inherit shape & size from Avatar ──\ntype AvatarShape = 'circle' | 'square' | 'rounded'\ntype AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'\nconst AvatarShapeContext = React.createContext<AvatarShape>('circle')\nconst AvatarSizeContext = React.createContext<AvatarSize>('md')\n\nexport const avatarVariants = cva(\n  'relative flex shrink-0 overflow-hidden',\n  {\n    variants: {\n      size: {\n        xs: 'h-ds-xs w-ds-xs',\n        sm: 'h-ds-sm w-ds-sm',\n        md: 'h-ds-md w-ds-md',\n        lg: 'h-ds-lg w-ds-lg',\n        xl: 'h-ds-xl w-ds-xl',\n      },\n      shape: {\n        circle: 'rounded-pill',\n        square: 'rounded-none',\n        rounded: 'rounded-control',\n      },\n    },\n    defaultVariants: { size: 'md', shape: 'circle' },\n  }\n)\n\nexport type AvatarStatus = 'online' | 'offline' | 'busy' | 'away'\n\nexport type AvatarRing = 'none' | 'lead' | 'admin' | 'client'\n\n// Presence status → shared Dot intent colour.\nconst statusDotColor: Record<AvatarStatus, DotColor> = {\n  online: 'success',\n  offline: 'neutral',\n  busy: 'error',\n  away: 'warning',\n}\n\nconst statusLabelMap: Record<AvatarStatus, string> = {\n  online: 'Online',\n  offline: 'Offline',\n  busy: 'Busy',\n  away: 'Away',\n}\n\n/** Avatar size → Dot size (the status dot scales with the avatar). */\nconst statusDotSize: Record<AvatarSize, DotSize> = {\n  xs: 'xs',\n  sm: 'sm',\n  md: 'md',\n  lg: 'lg',\n  xl: 'lg',\n}\n\n// ── Role ring ───────────────────────────────────────────────────────────────\n\nconst ringColorMap: Record<Exclude<AvatarRing, 'none'>, string> = {\n  lead: 'ring-accent-7',\n  admin: 'ring-warning-7',\n  client: 'ring-info-7',\n}\n\nconst ringShapeMap: Record<string, string> = {\n  circle: 'rounded-pill',\n  square: 'rounded-none',\n  rounded: 'rounded-control',\n}\n\n// ── Fallback font sizes that scale with avatar size ─────────────────────────\nconst fallbackTextSizeMap: Record<AvatarSize, string> = {\n  xs: 'text-body-xs',\n  sm: 'text-body-xs',\n  md: 'text-body-sm',\n  lg: 'text-body-md',\n  xl: 'text-heading-xs',\n}\n\n// ── Deterministic fallback colors ───────────────────────────────────────────\n\nconst FALLBACK_COLORS = [\n  { bg: 'bg-accent-3', text: 'text-accent-11' },\n  { bg: 'bg-success-3', text: 'text-success-11' },\n  { bg: 'bg-warning-3', text: 'text-warning-11' },\n  { bg: 'bg-error-3', text: 'text-error-11' },\n  { bg: 'bg-info-3', text: 'text-info-11' },\n  { bg: 'bg-category-teal-3', text: 'text-category-teal-11' },\n  { bg: 'bg-category-indigo-3', text: 'text-category-indigo-11' },\n  { bg: 'bg-category-cyan-3', text: 'text-category-cyan-11' },\n] as const\n\n/**\n * Simple string hash that produces a deterministic index into FALLBACK_COLORS.\n * Uses djb2 for a reasonable distribution with short strings.\n */\nfunction getFallbackColor(seed: string): (typeof FALLBACK_COLORS)[number] {\n  let hash = 5381\n  for (let i = 0; i < seed.length; i++) {\n    hash = ((hash << 5) + hash + seed.charCodeAt(i)) | 0\n  }\n  const index = Math.abs(hash) % FALLBACK_COLORS.length\n  return FALLBACK_COLORS[index]\n}\n\n/**\n * Props for Avatar — a user/entity image container with size, shape, and presence-status variants.\n *\n * **Sizes:** `xs` | `sm` | `md` (default) | `lg` | `xl` — the status dot scales with the avatar size.\n *\n * **Shapes:** `circle` (default, round) | `square` (sharp corners) | `rounded` (rounded corners, for bots/apps)\n *\n * **Status dot:** `status=\"online\"` (green) | `\"offline\"` (muted) | `\"busy\"` (red) | `\"away\"` (amber).\n * The dot renders with `role=\"img\"` and an accessible `aria-label` — it is not purely decorative.\n *\n * **Role ring:** `ring=\"lead\"` (accent) | `\"admin\"` (warning) | `\"client\"` (info) — a colored ring\n * around the avatar indicating the user's role.\n *\n * **Badge:** `badge={5}` (number) | `badge=\"dot\"` (notification dot) | `badge={<Icon />}` (custom).\n * Numbers > 99 display as \"99+\". Badge is hidden when `0` or `undefined`.\n *\n * **Loading:** `loading={true}` shows a pulse skeleton placeholder.\n *\n * **Children:** Use `<AvatarImage>` for the photo and `<AvatarFallback>` for initials when the image fails.\n *\n * @example\n * // User avatar with photo and fallback initials:\n * <Avatar size=\"md\">\n *   <AvatarImage src={user.avatarUrl} alt={user.name} />\n *   <AvatarFallback>JD</AvatarFallback>\n * </Avatar>\n *\n * @example\n * // Online presence indicator in a team roster:\n * <Avatar size=\"lg\" status=\"online\">\n *   <AvatarImage src={user.photoUrl} alt={user.name} />\n *   <AvatarFallback>{user.initials}</AvatarFallback>\n * </Avatar>\n *\n * @example\n * // Square shape for a bot/integration logo:\n * <Avatar shape=\"square\" size=\"xl\">\n *   <AvatarImage src=\"/logos/github.png\" alt=\"GitHub\" />\n * </Avatar>\n * // These are just a few ways — feel free to combine props creatively!\n */\nexport interface AvatarProps\n  extends Omit<React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>, 'children'>,\n    VariantProps<typeof avatarVariants> {\n  /** Optional status indicator displayed as a dot at the bottom-right corner */\n  status?: AvatarStatus\n  /** Role ring color indicator */\n  ring?: AvatarRing\n  /** Badge overlay: number, 'dot', or custom ReactNode */\n  badge?: number | 'dot' | React.ReactNode\n  /** Show loading skeleton instead of content */\n  loading?: boolean\n  children?: React.ReactNode\n}\n\nconst Avatar = React.forwardRef<\n  React.ElementRef<typeof AvatarPrimitive.Root>,\n  AvatarProps\n>(({ className, size, shape, status, ring, badge, loading, children, ...props }, ref) => {\n  const resolvedShape = shape ?? 'circle'\n\n  // Build ring classes for the outer wrapper\n  const ringClasses = ring && ring !== 'none'\n    ? cn('ring-2 ring-offset-2 ring-offset-surface-raised', ringColorMap[ring], ringShapeMap[resolvedShape])\n    : undefined\n\n  // Loading skeleton — early return\n  if (loading) {\n    return (\n      <span ref={ref} className={cn('relative inline-flex shrink-0', ringClasses)}>\n        <Skeleton\n          className={cn(avatarVariants({ size, shape }))}\n          data-slot=\"avatar-skeleton\"\n        />\n      </span>\n    )\n  }\n\n  // Determine whether to render badge\n  const showBadge = badge !== undefined && badge !== 0\n\n  return (\n    <AvatarShapeContext.Provider value={resolvedShape}>\n    <AvatarSizeContext.Provider value={size ?? 'md'}>\n    <span className={cn('relative inline-flex shrink-0', ringClasses)}>\n      <AvatarPrimitive.Root\n        ref={ref}\n        className={cn(avatarVariants({ size, shape }), className)}\n        {...props}\n      >\n        {children}\n      </AvatarPrimitive.Root>\n      {status && (\n        <span\n          className=\"absolute bottom-0 right-0\"\n          role=\"img\"\n          aria-label={statusLabelMap[status]}\n        >\n          {/* Shared Dot primitive: colour + contrast ring; wrapper owns position + a11y. */}\n          <Dot color={statusDotColor[status]} size={statusDotSize[size ?? 'md']} withBorder aria-hidden />\n        </span>\n      )}\n      {showBadge && (\n        badge === 'dot' ? (\n          <span\n            className=\"absolute -right-0.5 -top-0.5 h-ds-03 w-ds-03 rounded-pill bg-error-9 ring-2 ring-surface-raised\"\n            data-slot=\"avatar-badge-dot\"\n            aria-hidden=\"true\"\n          />\n        ) : typeof badge === 'number' ? (\n          <motion.span\n            initial={{ scale: 0 }}\n            animate={{ scale: 1 }}\n            transition={springs.smooth}\n            className=\"absolute -right-1 -top-1 flex min-w-ds-05 items-center justify-center rounded-pill bg-error-9 px-1 text-[10px] font-bold leading-[16px] text-error-fg ring-2 ring-surface-raised\"\n            data-slot=\"avatar-badge\"\n            role=\"status\"\n            aria-label={`${badge > 99 ? '99+' : badge} notifications`}\n          >\n            {badge > 99 ? '99+' : badge}\n          </motion.span>\n        ) : (\n          <span className=\"absolute -right-1 -top-1\" data-slot=\"avatar-badge-custom\">\n            {badge}\n          </span>\n        )\n      )}\n    </span>\n    </AvatarSizeContext.Provider>\n    </AvatarShapeContext.Provider>\n  )\n})\nAvatar.displayName = AvatarPrimitive.Root.displayName\n\nconst AvatarImage = React.forwardRef<\n  React.ElementRef<typeof AvatarPrimitive.Image>,\n  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>\n>(({ className, ...props }, ref) => (\n  <motion.span\n    initial={{ scale: 0.96 }}\n    animate={{ opacity: 1, scale: 1 }}\n    transition={springs.smooth}\n    className=\"absolute inset-0 h-full w-full\"\n  >\n    <AvatarPrimitive.Image\n      ref={ref}\n      className={cn(\"aspect-square h-full w-full\", className)}\n      {...props}\n    />\n  </motion.span>\n))\nAvatarImage.displayName = AvatarPrimitive.Image.displayName\n\nexport interface AvatarFallbackProps\n  extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback> {\n  /**\n   * Seed string for deterministic color selection.\n   * Falls back to the text content of `children` if not provided.\n   */\n  colorSeed?: string\n}\n\nconst AvatarFallback = React.forwardRef<\n  React.ElementRef<typeof AvatarPrimitive.Fallback>,\n  AvatarFallbackProps\n>(({ className, colorSeed, children, ...props }, ref) => {\n  // Derive seed: explicit colorSeed > children text content > empty string\n  const childrenText = typeof children === 'string' ? children : ''\n  const seed = colorSeed ?? childrenText\n  const color = getFallbackColor(seed)\n\n  // Inherit shape and size from parent Avatar via context\n  const shape = React.useContext(AvatarShapeContext)\n  const size = React.useContext(AvatarSizeContext)\n  const shapeClass = shape === 'square' ? 'rounded-none' : shape === 'rounded' ? 'rounded-control' : 'rounded-pill'\n\n  // Letter-spacing based on character count\n  const tracking = childrenText.length === 1 ? 'tracking-wide' : 'tracking-normal'\n\n  return (\n    <AvatarPrimitive.Fallback\n      ref={ref}\n      data-slot=\"avatar-fallback\"\n      className={cn(\n        'flex h-full w-full items-center justify-center font-semibold',\n        shapeClass,\n        fallbackTextSizeMap[size],\n        color.bg,\n        color.text,\n        tracking,\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </AvatarPrimitive.Fallback>\n  )\n})\nAvatarFallback.displayName = AvatarPrimitive.Fallback.displayName\n\nexport { Avatar, AvatarFallback,AvatarImage }\n"],"mappings":"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"}
+{"version":3,"file":"avatar.js","names":[],"sources":["../../src/ui/avatar.tsx"],"sourcesContent":["'use client'\n\nimport * as AvatarPrimitive from \"@primitives/react-avatar\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { motion } from \"framer-motion\"\nimport * as React from \"react\"\n\nimport { Dot, type DotColor, type DotSize } from \"./dot\"\nimport { springs } from \"./lib/motion\"\nimport { cn } from \"./lib/utils\"\nimport { Skeleton } from \"./skeleton\"\n\n// ── Contexts so AvatarFallback can inherit shape & size from Avatar ──\ntype AvatarShape = 'circle' | 'square' | 'rounded'\ntype AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'\nconst AvatarShapeContext = React.createContext<AvatarShape>('circle')\nconst AvatarSizeContext = React.createContext<AvatarSize>('md')\n\nexport const avatarVariants = cva(\n  'relative flex shrink-0 overflow-hidden',\n  {\n    variants: {\n      size: {\n        xs: 'h-ds-xs w-ds-xs',\n        sm: 'h-ds-sm w-ds-sm',\n        md: 'h-ds-md w-ds-md',\n        lg: 'h-ds-lg w-ds-lg',\n        xl: 'h-ds-xl w-ds-xl',\n      },\n      shape: {\n        circle: 'rounded-pill',\n        square: 'rounded-none',\n        rounded: 'rounded-control',\n      },\n    },\n    defaultVariants: { size: 'md', shape: 'circle' },\n  }\n)\n\nexport type AvatarStatus = 'online' | 'offline' | 'busy' | 'away'\n\nexport type AvatarRing = 'none' | 'lead' | 'admin' | 'client'\n\n// Presence status → shared Dot intent colour.\nconst statusDotColor: Record<AvatarStatus, DotColor> = {\n  online: 'success',\n  offline: 'neutral',\n  busy: 'error',\n  away: 'warning',\n}\n\nconst statusLabelMap: Record<AvatarStatus, string> = {\n  online: 'Online',\n  offline: 'Offline',\n  busy: 'Busy',\n  away: 'Away',\n}\n\n/** Avatar size → Dot size (the status dot scales with the avatar). */\nconst statusDotSize: Record<AvatarSize, DotSize> = {\n  xs: 'xs',\n  sm: 'sm',\n  md: 'md',\n  lg: 'lg',\n  xl: 'lg',\n}\n\n// ── Role ring ───────────────────────────────────────────────────────────────\n\nconst ringColorMap: Record<Exclude<AvatarRing, 'none'>, string> = {\n  lead: 'ring-accent-7',\n  admin: 'ring-warning-7',\n  client: 'ring-info-7',\n}\n\nconst ringShapeMap: Record<string, string> = {\n  circle: 'rounded-pill',\n  square: 'rounded-none',\n  rounded: 'rounded-control',\n}\n\n// ── Fallback font sizes that scale with avatar size ─────────────────────────\nconst fallbackTextSizeMap: Record<AvatarSize, string> = {\n  xs: 'text-body-xs',\n  sm: 'text-body-xs',\n  md: 'text-body-sm',\n  lg: 'text-body-md',\n  xl: 'text-heading-xs',\n}\n\n// ── Deterministic fallback colors ───────────────────────────────────────────\n\nconst FALLBACK_COLORS = [\n  { bg: 'bg-accent-3', text: 'text-accent-11' },\n  { bg: 'bg-success-3', text: 'text-success-11' },\n  { bg: 'bg-warning-3', text: 'text-warning-11' },\n  { bg: 'bg-error-3', text: 'text-error-11' },\n  { bg: 'bg-info-3', text: 'text-info-11' },\n  { bg: 'bg-category-teal-3', text: 'text-category-teal-11' },\n  { bg: 'bg-category-indigo-3', text: 'text-category-indigo-11' },\n  { bg: 'bg-category-cyan-3', text: 'text-category-cyan-11' },\n] as const\n\n/**\n * Simple string hash that produces a deterministic index into FALLBACK_COLORS.\n * Uses djb2 for a reasonable distribution with short strings.\n */\nfunction getFallbackColor(seed: string): (typeof FALLBACK_COLORS)[number] {\n  let hash = 5381\n  for (let i = 0; i < seed.length; i++) {\n    hash = ((hash << 5) + hash + seed.charCodeAt(i)) | 0\n  }\n  const index = Math.abs(hash) % FALLBACK_COLORS.length\n  return FALLBACK_COLORS[index]\n}\n\n/**\n * Props for Avatar — a user/entity image container with size, shape, and presence-status variants.\n *\n * **Sizes:** `xs` | `sm` | `md` (default) | `lg` | `xl` — the status dot scales with the avatar size.\n *\n * **Shapes:** `circle` (default, round) | `square` (sharp corners) | `rounded` (rounded corners, for bots/apps)\n *\n * **Status dot:** `status=\"online\"` (green) | `\"offline\"` (muted) | `\"busy\"` (red) | `\"away\"` (amber).\n * The dot renders with `role=\"img\"` and an accessible `aria-label` — it is not purely decorative.\n *\n * **Role ring:** `ring=\"lead\"` (accent) | `\"admin\"` (warning) | `\"client\"` (info) — a colored ring\n * around the avatar indicating the user's role.\n *\n * **Badge:** `badge={5}` (number) | `badge=\"dot\"` (notification dot) | `badge={<Icon />}` (custom).\n * Numbers > 99 display as \"99+\". Badge is hidden when `0` or `undefined`.\n *\n * **Loading:** `loading={true}` shows a pulse skeleton placeholder.\n *\n * **Children:** Use `<AvatarImage>` for the photo and `<AvatarFallback>` for initials when the image fails.\n *\n * @example\n * // User avatar with photo and fallback initials:\n * <Avatar size=\"md\">\n *   <AvatarImage src={user.avatarUrl} alt={user.name} />\n *   <AvatarFallback>JD</AvatarFallback>\n * </Avatar>\n *\n * @example\n * // Online presence indicator in a team roster:\n * <Avatar size=\"lg\" status=\"online\">\n *   <AvatarImage src={user.photoUrl} alt={user.name} />\n *   <AvatarFallback>{user.initials}</AvatarFallback>\n * </Avatar>\n *\n * @example\n * // Square shape for a bot/integration logo:\n * <Avatar shape=\"square\" size=\"xl\">\n *   <AvatarImage src=\"/logos/github.png\" alt=\"GitHub\" />\n * </Avatar>\n * // These are just a few ways — feel free to combine props creatively!\n */\nexport interface AvatarProps\n  extends Omit<React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>, 'children'>,\n    VariantProps<typeof avatarVariants> {\n  /** Optional status indicator displayed as a dot at the bottom-right corner */\n  status?: AvatarStatus\n  /** Role ring color indicator */\n  ring?: AvatarRing\n  /** Badge overlay: number, 'dot', or custom ReactNode */\n  badge?: number | 'dot' | React.ReactNode\n  /** Show loading skeleton instead of content */\n  loading?: boolean\n  children?: React.ReactNode\n}\n\nconst Avatar = React.forwardRef<\n  React.ElementRef<typeof AvatarPrimitive.Root>,\n  AvatarProps\n>(({ className, size, shape, status, ring, badge, loading, children, ...props }, ref) => {\n  const resolvedShape = shape ?? 'circle'\n\n  // Build ring classes for the outer wrapper\n  const ringClasses = ring && ring !== 'none'\n    ? cn('ring-2 ring-offset-2 ring-offset-surface-panel', ringColorMap[ring], ringShapeMap[resolvedShape])\n    : undefined\n\n  // Loading skeleton — early return\n  if (loading) {\n    return (\n      <span ref={ref} className={cn('relative inline-flex shrink-0', ringClasses)}>\n        <Skeleton\n          className={cn(avatarVariants({ size, shape }))}\n          data-slot=\"avatar-skeleton\"\n        />\n      </span>\n    )\n  }\n\n  // Determine whether to render badge\n  const showBadge = badge !== undefined && badge !== 0\n\n  return (\n    <AvatarShapeContext.Provider value={resolvedShape}>\n    <AvatarSizeContext.Provider value={size ?? 'md'}>\n    <span className={cn('relative inline-flex shrink-0', ringClasses)}>\n      <AvatarPrimitive.Root\n        ref={ref}\n        className={cn(avatarVariants({ size, shape }), className)}\n        {...props}\n      >\n        {children}\n      </AvatarPrimitive.Root>\n      {status && (\n        <span\n          className=\"absolute bottom-0 right-0\"\n          role=\"img\"\n          aria-label={statusLabelMap[status]}\n        >\n          {/* Shared Dot primitive: colour + contrast ring; wrapper owns position + a11y. */}\n          <Dot color={statusDotColor[status]} size={statusDotSize[size ?? 'md']} withBorder aria-hidden />\n        </span>\n      )}\n      {showBadge && (\n        badge === 'dot' ? (\n          <span\n            className=\"absolute -right-0.5 -top-0.5 h-ds-03 w-ds-03 rounded-pill bg-error-9 ring-2 ring-surface-panel\"\n            data-slot=\"avatar-badge-dot\"\n            aria-hidden=\"true\"\n          />\n        ) : typeof badge === 'number' ? (\n          <motion.span\n            initial={{ scale: 0 }}\n            animate={{ scale: 1 }}\n            transition={springs.smooth}\n            className=\"absolute -right-1 -top-1 flex min-w-ds-05 items-center justify-center rounded-pill bg-error-9 px-1 text-[10px] font-bold leading-[16px] text-error-fg ring-2 ring-surface-panel\"\n            data-slot=\"avatar-badge\"\n            role=\"status\"\n            aria-label={`${badge > 99 ? '99+' : badge} notifications`}\n          >\n            {badge > 99 ? '99+' : badge}\n          </motion.span>\n        ) : (\n          <span className=\"absolute -right-1 -top-1\" data-slot=\"avatar-badge-custom\">\n            {badge}\n          </span>\n        )\n      )}\n    </span>\n    </AvatarSizeContext.Provider>\n    </AvatarShapeContext.Provider>\n  )\n})\nAvatar.displayName = AvatarPrimitive.Root.displayName\n\nconst AvatarImage = React.forwardRef<\n  React.ElementRef<typeof AvatarPrimitive.Image>,\n  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>\n>(({ className, ...props }, ref) => (\n  <motion.span\n    initial={{ scale: 0.96 }}\n    animate={{ opacity: 1, scale: 1 }}\n    transition={springs.smooth}\n    className=\"absolute inset-0 h-full w-full\"\n  >\n    <AvatarPrimitive.Image\n      ref={ref}\n      className={cn(\"aspect-square h-full w-full\", className)}\n      {...props}\n    />\n  </motion.span>\n))\nAvatarImage.displayName = AvatarPrimitive.Image.displayName\n\nexport interface AvatarFallbackProps\n  extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback> {\n  /**\n   * Seed string for deterministic color selection.\n   * Falls back to the text content of `children` if not provided.\n   */\n  colorSeed?: string\n}\n\nconst AvatarFallback = React.forwardRef<\n  React.ElementRef<typeof AvatarPrimitive.Fallback>,\n  AvatarFallbackProps\n>(({ className, colorSeed, children, ...props }, ref) => {\n  // Derive seed: explicit colorSeed > children text content > empty string\n  const childrenText = typeof children === 'string' ? children : ''\n  const seed = colorSeed ?? childrenText\n  const color = getFallbackColor(seed)\n\n  // Inherit shape and size from parent Avatar via context\n  const shape = React.useContext(AvatarShapeContext)\n  const size = React.useContext(AvatarSizeContext)\n  const shapeClass = shape === 'square' ? 'rounded-none' : shape === 'rounded' ? 'rounded-control' : 'rounded-pill'\n\n  // Letter-spacing based on character count\n  const tracking = childrenText.length === 1 ? 'tracking-wide' : 'tracking-normal'\n\n  return (\n    <AvatarPrimitive.Fallback\n      ref={ref}\n      data-slot=\"avatar-fallback\"\n      className={cn(\n        'flex h-full w-full items-center justify-center font-semibold',\n        shapeClass,\n        fallbackTextSizeMap[size],\n        color.bg,\n        color.text,\n        tracking,\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </AvatarPrimitive.Fallback>\n  )\n})\nAvatarFallback.displayName = AvatarPrimitive.Fallback.displayName\n\nexport { Avatar, AvatarFallback,AvatarImage }\n"],"mappings":"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"}

package/dist/ui/badge-indicator.js

@@ -36,7 +36,7 @@ var c = {
 				opacity: 0
 			},
 			transition: e.smooth,
-			className: t("absolute flex items-center justify-center rounded-pill font-sans font-semibold ring-2 ring-surface-raised", l[f], c[h], d ? "h-2.5 w-2.5" : "min-w-[18px] h-[18px] px-1 text-[11px] leading-none"),
+			className: t("absolute flex items-center justify-center rounded-pill font-sans font-semibold ring-2 ring-surface-panel", l[f], c[h], d ? "h-2.5 w-2.5" : "min-w-[18px] h-[18px] px-1 text-[11px] leading-none"),
 			children: !d && S
 		}, "indicator") })]
 	});

package/dist/ui/badge-indicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge-indicator.js","names":[],"sources":["../../src/ui/badge-indicator.tsx"],"sourcesContent":["'use client'\n\nimport { AnimatePresence, motion, useReducedMotion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { springs } from './lib/motion'\nimport { cn } from './lib/utils'\n\nconst PLACEMENT_CLASSES = {\n  'top-right': '-top-1 -right-1',\n  'top-left': '-top-1 -left-1',\n  'bottom-right': '-bottom-1 -right-1',\n  'bottom-left': '-bottom-1 -left-1',\n} as const\n\nconst COLOR_CLASSES = {\n  error: 'bg-error-9 text-error-fg',\n  success: 'bg-success-9 text-success-fg',\n  warning: 'bg-warning-9 text-warning-fg',\n  accent: 'bg-accent-9 text-accent-fg',\n  info: 'bg-info-9 text-info-fg',\n} as const\n\nexport interface BadgeIndicatorProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'color'> {\n  count?: number\n  max?: number\n  dot?: boolean\n  color?: keyof typeof COLOR_CLASSES\n  invisible?: boolean\n  showZero?: boolean\n  placement?: keyof typeof PLACEMENT_CLASSES\n  children: React.ReactNode\n}\n\nexport const BadgeIndicator = React.forwardRef<HTMLSpanElement, BadgeIndicatorProps>(\n  function BadgeIndicator(\n    {\n      count,\n      max = 99,\n      dot = false,\n      color = 'error',\n      invisible = false,\n      showZero = false,\n      placement = 'top-right',\n      className,\n      children,\n      ...rest\n    },\n    ref,\n  ) {\n    const prefersReduced = useReducedMotion()\n    const show = !invisible && (dot || (count !== undefined && (count > 0 || showZero)))\n    const displayCount = count !== undefined && count > max ? `${max}+` : count\n\n    return (\n      <span ref={ref} className={cn('relative inline-flex', className)} {...rest}>\n        {children}\n      <AnimatePresence>\n        {show && (\n          <motion.span\n            key=\"indicator\"\n            initial={prefersReduced ? { opacity: 0 } : { scale: 0, opacity: 0 }}\n            animate={prefersReduced ? { opacity: 1 } : { scale: 1, opacity: 1 }}\n            exit={prefersReduced ? { opacity: 0 } : { scale: 0, opacity: 0 }}\n            transition={springs.smooth}\n            className={cn(\n              'absolute flex items-center justify-center rounded-pill font-sans font-semibold ring-2 ring-surface-raised',\n              COLOR_CLASSES[color],\n              PLACEMENT_CLASSES[placement],\n              dot\n                ? 'h-2.5 w-2.5'\n                : 'min-w-[18px] h-[18px] px-1 text-[11px] leading-none',\n            )}\n          >\n            {!dot && displayCount}\n          </motion.span>\n        )}\n      </AnimatePresence>\n    </span>\n  )\n})\n\nBadgeIndicator.displayName = 'BadgeIndicator'\n"],"mappings":";;;;;;;AAQA,IAAM,IAAoB;CACxB,aAAa;CACb,YAAY;CACZ,gBAAgB;CAChB,eAAe;AACjB,GAEM,IAAgB;CACpB,OAAO;CACP,SAAS;CACT,SAAS;CACT,QAAQ;CACR,MAAM;AACR,GAaa,IAAiB,EAAM,WAClC,SACE,EACE,UACA,SAAM,IACN,SAAM,IACN,WAAQ,SACR,eAAY,IACZ,cAAW,IACX,eAAY,aACZ,cACA,aACA,GAAG,KAEL,GACA;CACA,IAAM,IAAiB,EAAiB,GAClC,IAAO,CAAC,MAAc,KAAQ,MAAU,KAAA,MAAc,IAAQ,KAAK,KACnE,IAAe,MAAU,KAAA,KAAa,IAAQ,IAAM,GAAG,EAAI,KAAK;CAEtE,OACE,kBAAC,QAAD;EAAW;EAAK,WAAW,EAAG,wBAAwB,CAAS;EAAG,GAAI;YAAtE,CACG,GACH,kBAAC,GAAD,EAAA,UACG,KACC,kBAAC,EAAO,MAAR;GAEE,SAAS,IAAiB,EAAE,SAAS,EAAE,IAAI;IAAE,OAAO;IAAG,SAAS;GAAE;GAClE,SAAS,IAAiB,EAAE,SAAS,EAAE,IAAI;IAAE,OAAO;IAAG,SAAS;GAAE;GAClE,MAAM,IAAiB,EAAE,SAAS,EAAE,IAAI;IAAE,OAAO;IAAG,SAAS;GAAE;GAC/D,YAAY,EAAQ;GACpB,WAAW,EACT,6GACA,EAAc,IACd,EAAkB,IAClB,IACI,gBACA,qDACN;aAEC,CAAC,KAAO;EACE,GAfP,WAeO,EAEA,CAAA,CACb;;AAEV,CAAC;AAED,EAAe,cAAc"}
+{"version":3,"file":"badge-indicator.js","names":[],"sources":["../../src/ui/badge-indicator.tsx"],"sourcesContent":["'use client'\n\nimport { AnimatePresence, motion, useReducedMotion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { springs } from './lib/motion'\nimport { cn } from './lib/utils'\n\nconst PLACEMENT_CLASSES = {\n  'top-right': '-top-1 -right-1',\n  'top-left': '-top-1 -left-1',\n  'bottom-right': '-bottom-1 -right-1',\n  'bottom-left': '-bottom-1 -left-1',\n} as const\n\nconst COLOR_CLASSES = {\n  error: 'bg-error-9 text-error-fg',\n  success: 'bg-success-9 text-success-fg',\n  warning: 'bg-warning-9 text-warning-fg',\n  accent: 'bg-accent-9 text-accent-fg',\n  info: 'bg-info-9 text-info-fg',\n} as const\n\nexport interface BadgeIndicatorProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'color'> {\n  count?: number\n  max?: number\n  dot?: boolean\n  color?: keyof typeof COLOR_CLASSES\n  invisible?: boolean\n  showZero?: boolean\n  placement?: keyof typeof PLACEMENT_CLASSES\n  children: React.ReactNode\n}\n\nexport const BadgeIndicator = React.forwardRef<HTMLSpanElement, BadgeIndicatorProps>(\n  function BadgeIndicator(\n    {\n      count,\n      max = 99,\n      dot = false,\n      color = 'error',\n      invisible = false,\n      showZero = false,\n      placement = 'top-right',\n      className,\n      children,\n      ...rest\n    },\n    ref,\n  ) {\n    const prefersReduced = useReducedMotion()\n    const show = !invisible && (dot || (count !== undefined && (count > 0 || showZero)))\n    const displayCount = count !== undefined && count > max ? `${max}+` : count\n\n    return (\n      <span ref={ref} className={cn('relative inline-flex', className)} {...rest}>\n        {children}\n      <AnimatePresence>\n        {show && (\n          <motion.span\n            key=\"indicator\"\n            initial={prefersReduced ? { opacity: 0 } : { scale: 0, opacity: 0 }}\n            animate={prefersReduced ? { opacity: 1 } : { scale: 1, opacity: 1 }}\n            exit={prefersReduced ? { opacity: 0 } : { scale: 0, opacity: 0 }}\n            transition={springs.smooth}\n            className={cn(\n              'absolute flex items-center justify-center rounded-pill font-sans font-semibold ring-2 ring-surface-panel',\n              COLOR_CLASSES[color],\n              PLACEMENT_CLASSES[placement],\n              dot\n                ? 'h-2.5 w-2.5'\n                : 'min-w-[18px] h-[18px] px-1 text-[11px] leading-none',\n            )}\n          >\n            {!dot && displayCount}\n          </motion.span>\n        )}\n      </AnimatePresence>\n    </span>\n  )\n})\n\nBadgeIndicator.displayName = 'BadgeIndicator'\n"],"mappings":";;;;;;;AAQA,IAAM,IAAoB;CACxB,aAAa;CACb,YAAY;CACZ,gBAAgB;CAChB,eAAe;AACjB,GAEM,IAAgB;CACpB,OAAO;CACP,SAAS;CACT,SAAS;CACT,QAAQ;CACR,MAAM;AACR,GAaa,IAAiB,EAAM,WAClC,SACE,EACE,UACA,SAAM,IACN,SAAM,IACN,WAAQ,SACR,eAAY,IACZ,cAAW,IACX,eAAY,aACZ,cACA,aACA,GAAG,KAEL,GACA;CACA,IAAM,IAAiB,EAAiB,GAClC,IAAO,CAAC,MAAc,KAAQ,MAAU,KAAA,MAAc,IAAQ,KAAK,KACnE,IAAe,MAAU,KAAA,KAAa,IAAQ,IAAM,GAAG,EAAI,KAAK;CAEtE,OACE,kBAAC,QAAD;EAAW;EAAK,WAAW,EAAG,wBAAwB,CAAS;EAAG,GAAI;YAAtE,CACG,GACH,kBAAC,GAAD,EAAA,UACG,KACC,kBAAC,EAAO,MAAR;GAEE,SAAS,IAAiB,EAAE,SAAS,EAAE,IAAI;IAAE,OAAO;IAAG,SAAS;GAAE;GAClE,SAAS,IAAiB,EAAE,SAAS,EAAE,IAAI;IAAE,OAAO;IAAG,SAAS;GAAE;GAClE,MAAM,IAAiB,EAAE,SAAS,EAAE,IAAI;IAAE,OAAO;IAAG,SAAS;GAAE;GAC/D,YAAY,EAAQ;GACpB,WAAW,EACT,4GACA,EAAc,IACd,EAAkB,IAClB,IACI,gBACA,qDACN;aAEC,CAAC,KAAO;EACE,GAfP,WAeO,EAEA,CAAA,CACb;;AAEV,CAAC;AAED,EAAe,cAAc"}