@devalok/shilp-sutra 0.37.1 → 0.39.0

package/dist/tokens/semantic.css

@@ -338,7 +338,10 @@
   --spacing-stack-gap:   var(--spacing-ds-06);
 
   /* ───────────────────────────────────────────────────────────
-     RADIUS
+     RADIUS — primitive scale
+     Internal building blocks. Components should NOT reference these
+     directly. Use the semantic role tokens below (--radius-control,
+     --radius-surface, etc.) so [data-shape] presets can remap them.
      ─────────────────────────────────────────────────────────── */
   --radius:        4px;     /* bare `rounded` class — TW4 default namespace */
   --radius-ds-none: 0;
@@ -349,6 +352,32 @@
   --radius-ds-2xl:  24px;
   --radius-ds-full: 9999px;
 
+  /* ───────────────────────────────────────────────────────────
+     RADIUS — semantic roles (PUBLIC API)
+     Components reference these tokens; consumers can override them
+     globally or scoped to remap shape language. The [data-shape]
+     preset blocks below redeclare these for sharp / slightly-rounded /
+     rounded variants. Defaults match the "slightly-rounded" preset.
+
+     Token         → utility            → use for
+     --radius-control       rounded-control       Button, Input, Select, Combobox, Tabs trigger, Toggle, Code block
+     --radius-control-inner rounded-control-inner Checkbox box, +/− buttons, close buttons, inline Code
+     --radius-surface       rounded-surface       Card, Alert, Accordion, StatCard
+     --radius-overlay-sm    rounded-overlay-sm    Tooltip, Toast
+     --radius-overlay       rounded-overlay       Popover, HoverCard, DropdownMenu / ContextMenu / Menubar content, listboxes, NavigationMenu viewport
+     --radius-overlay-lg    rounded-overlay-lg    Dialog, AlertDialog, Sheet, BottomSheet, ColorInput picker
+     --radius-pill          rounded-pill          Badge, StatusDot, Radio, Switch, Slider, Progress, Avatar circle, SegmentedControl item
+     --radius-bubble        rounded-bubble        ChatMessage bubble
+     ─────────────────────────────────────────────────────────── */
+  --radius-control:        6px;
+  --radius-control-inner:  2px;
+  --radius-surface:        10px;
+  --radius-overlay-sm:     6px;
+  --radius-overlay:        10px;
+  --radius-overlay-lg:     16px;
+  --radius-pill:           9999px;
+  --radius-bubble:         24px;
+
   /* ───────────────────────────────────────────────────────────
      DURATION (Carbon-inspired scale)
      ─────────────────────────────────────────────────────────── */
@@ -384,12 +413,13 @@
   --shadow-floating:     var(--shadow-md-internal);
   --shadow-overlay:      var(--shadow-lg-internal);
 
-  /* Effect shadows */
-  --shadow-brand:   0 2px 8px oklch(0.55 0.19 360 / 0.20), 0 6px 20px oklch(0.55 0.19 360 / 0.15);
-  --shadow-glow:    0 0 0 1.5px oklch(0.55 0.19 360 / 0.20), 0 0 7px oklch(0.55 0.19 360 / 0.12);
+  /* Effect shadows — brand-reactive via color-mix on --color-accent-9.
+     When the consumer swaps brand ramps, these shadows follow. */
+  --shadow-brand:   0 2px 8px color-mix(in oklch, var(--color-accent-9) 20%, transparent), 0 6px 20px color-mix(in oklch, var(--color-accent-9) 15%, transparent);
+  --shadow-glow:    0 0 0 1.5px color-mix(in oklch, var(--color-accent-9) 20%, transparent), 0 0 7px color-mix(in oklch, var(--color-accent-9) 12%, transparent);
   --shadow-inset:   inset 0 1px 2px oklch(var(--shadow-color) / calc(0.08 * var(--shadow-strength))), inset 0 2px 5px oklch(var(--shadow-color) / calc(0.06 * var(--shadow-strength)));
   --shadow-ring-sm: 0 0 0 1px var(--color-surface-border);
-  --shadow-ring:    0 0 0 2px oklch(0.55 0.19 360 / 0.30);
+  --shadow-ring:    0 0 0 2px color-mix(in oklch, var(--color-accent-9) 30%, transparent);
 
   --shadow-raised-inner: inset 0 1px 0 oklch(1 0 0 / 0.10), inset 0 -1px 0 oklch(0 0 0 / 0.06);
   --shadow-pressed: 0 0 0 1px oklch(var(--shadow-color) / calc(0.04 * var(--shadow-strength)));
@@ -570,11 +600,12 @@
   --color-skeleton-base:    var(--neutral-4);
   --color-skeleton-shimmer: var(--neutral-3);
 
-  /* Shadows (heavier in dark mode) */
+  /* Shadows (heavier in dark mode) — brand-reactive via color-mix on
+     --color-accent-9 so they follow consumer brand swaps. */
   --shadow-strength: 2.5;
-  --shadow-brand:    0 2px 8px oklch(0.55 0.19 360 / 0.30), 0 6px 20px oklch(0.55 0.19 360 / 0.20);
-  --shadow-glow:     0 0 0 1.5px oklch(0.55 0.19 360 / 0.35), 0 0 10px oklch(0.55 0.19 360 / 0.20);
-  --shadow-ring:     0 0 0 2px oklch(0.55 0.19 360 / 0.45);
+  --shadow-brand:    0 2px 8px color-mix(in oklch, var(--color-accent-9) 30%, transparent), 0 6px 20px color-mix(in oklch, var(--color-accent-9) 20%, transparent);
+  --shadow-glow:     0 0 0 1.5px color-mix(in oklch, var(--color-accent-9) 35%, transparent), 0 0 10px color-mix(in oklch, var(--color-accent-9) 20%, transparent);
+  --shadow-ring:     0 0 0 2px color-mix(in oklch, var(--color-accent-9) 45%, transparent);
   --shadow-raised-inner: inset 0 1px 0 oklch(1 0 0 / 0.06), inset 0 -1px 0 oklch(0 0 0 / 0.12);
   --shadow-success:  0 2px 8px oklch(0.6 0.14 145 / 0.30), 0 6px 20px oklch(0.6 0.14 145 / 0.20);
   --shadow-error:    0 2px 8px oklch(0.6 0.18 25 / 0.30),  0 6px 20px oklch(0.6 0.18 25 / 0.20);
@@ -775,3 +806,45 @@
   /* Skeleton shimmer can feel alarming in HC; keep static */
   [data-skeleton] { animation: none !important; }
 }
+
+/* ═══════════════════════════════════════════════════════════════════
+   SHAPE PRESETS — [data-shape="sharp" | "slightly-rounded" | "rounded"]
+
+   Apply to <html>, app root, or any subtree. Overrides the semantic
+   radius role tokens for that subtree. Default (no attribute) =
+   slightly-rounded. Consumers can further override individual tokens
+   in their own CSS for fine-grained customization. Pill always stays
+   pill (--radius-pill is intentionally non-customizable per preset).
+   ═══════════════════════════════════════════════════════════════════ */
+[data-shape="sharp"] {
+  --radius-control:        2px;
+  --radius-control-inner:  0px;
+  --radius-surface:        4px;
+  --radius-overlay-sm:     2px;
+  --radius-overlay:        4px;
+  --radius-overlay-lg:     6px;
+  --radius-pill:           9999px;
+  --radius-bubble:         8px;
+}
+
+[data-shape="slightly-rounded"] {
+  --radius-control:        6px;
+  --radius-control-inner:  2px;
+  --radius-surface:        10px;
+  --radius-overlay-sm:     6px;
+  --radius-overlay:        10px;
+  --radius-overlay-lg:     16px;
+  --radius-pill:           9999px;
+  --radius-bubble:         24px;
+}
+
+[data-shape="rounded"] {
+  --radius-control:        10px;
+  --radius-control-inner:  4px;
+  --radius-surface:        16px;
+  --radius-overlay-sm:     10px;
+  --radius-overlay:        16px;
+  --radius-overlay-lg:     24px;
+  --radius-pill:           9999px;
+  --radius-bubble:         32px;
+}

package/dist/ui/accordion.js

@@ -24,7 +24,7 @@ var h = c.forwardRef(({ className: t, 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-ds-md font-medium hover:bg-surface-raised rounded-ds-md data-[state=open]:bg-surface-raised focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9", t),
+			className: o("group flex flex-1 items-center justify-between py-ds-05 text-left text-ds-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", t),
 			...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-ds-md font-medium hover:bg-surface-raised rounded-ds-md 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-ds-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,EAAU;CAC1D,GAAI;CACJ,CAAA,CACF;AACF,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;EAAyI,CAAA;AAG5L,QACE,kBAAC,GAAD;EAA2B,WAAU;YACnC,kBAAC,GAAD;GACO;GACL,WAAW,EACT,oPACA,EACD;GACD,GAAI;aANN;IAQG,MAAoB,UAAU;IAC9B;IACA,MAAoB,WAAW;IACL;;EACH,CAAA;EAE9B;AACF,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,GAAG;EACvB,YAAY,EAAO;YAEnB,kBAAC,OAAD;GAAK,WAAW,EAAG,qBAAqB,EAAU;GAAG;GAAe,CAAA;EACzD,CAAA;CACc,CAAA,CAC7B;AACF,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-ds-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-ds-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,EAAU;CAC1D,GAAI;CACJ,CAAA,CACF;AACF,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;EAAyI,CAAA;AAG5L,QACE,kBAAC,GAAD;EAA2B,WAAU;YACnC,kBAAC,GAAD;GACO;GACL,WAAW,EACT,sPACA,EACD;GACD,GAAI;aANN;IAQG,MAAoB,UAAU;IAC9B;IACA,MAAoB,WAAW;IACL;;EACH,CAAA;EAE9B;AACF,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,GAAG;EACvB,YAAY,EAAO;YAEnB,kBAAC,OAAD;GAAK,WAAW,EAAG,qBAAqB,EAAU;GAAG;GAAe,CAAA;EACzD,CAAA;CACc,CAAA,CAC7B;AACF,EAAiB,cAAA,EAAyC"}

package/dist/ui/alert-dialog.js

@@ -68,7 +68,7 @@ var w = p.forwardRef(({ className: e, children: t, responsive: n, ...r }, i) =>
 					...l.smooth,
 					opacity: u.fade
 				},
-				className: d("fixed z-modal grid w-full gap-ds-05 bg-surface-overlay p-ds-06", n === !1 ? "left-[50%] top-[50%] max-w-lg rounded-ds-xl border border-surface-border-strong shadow-overlay" : "inset-0 md:inset-auto md:left-[50%] md:top-[50%] md:max-w-lg md:rounded-ds-xl md:border md:border-surface-border-strong md:shadow-overlay", e),
+				className: d("fixed z-modal grid w-full gap-ds-05 bg-surface-overlay p-ds-06", n === !1 ? "left-[50%] top-[50%] max-w-lg rounded-overlay-lg border border-surface-border-strong shadow-overlay" : "inset-0 md:inset-auto md:left-[50%] md:top-[50%] md:max-w-lg md:rounded-overlay-lg md:border md:border-surface-border-strong md:shadow-overlay", e),
 				children: t
 			})
 		})]
@@ -101,13 +101,13 @@ var O = p.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ m(i, {
 O.displayName = i.displayName;
 var k = p.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ m(r, {
 	ref: n,
-	className: d("inline-flex h-ds-md items-center justify-center rounded-ds-md px-ds-05 text-ds-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", e),
+	className: d("inline-flex h-ds-md items-center justify-center rounded-control px-ds-05 text-ds-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", e),
 	...t
 }));
 k.displayName = r.displayName;
 var A = p.forwardRef(({ className: e, ...t }, n) => /* @__PURE__ */ m(a, {
 	ref: n,
-	className: d("inline-flex h-ds-md items-center justify-center rounded-ds-md px-ds-05 text-ds-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: d("inline-flex h-ds-md items-center justify-center rounded-control px-ds-05 text-ds-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),
 	...t
 }));
 A.displayName = a.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-ds-xl md:border md:border-surface-border-strong md:shadow-overlay'\n                  : 'left-[50%] top-[50%] max-w-lg rounded-ds-xl border border-surface-border-strong 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-ds-lg 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-ds-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-ds-md px-ds-05 text-ds-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-ds-md px-ds-05 text-ds-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:border md:border-surface-border-strong md:shadow-overlay'\n                  : 'left-[50%] top-[50%] max-w-lg rounded-overlay-lg border border-surface-border-strong 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-ds-lg 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-ds-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-ds-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-ds-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":";;;;;;;;;AAaA,IAAM,IAAqB,EAAM,cAAuC,EAAE,MAAM,IAAO,CAAC,EAClF,UAA2B,EAAM,WAAW,EAAmB,EAE/D,KAA2F,EAC/F,MAAM,GACN,gBACA,iBACA,GAAG,QACC;CACJ,IAAM,CAAC,GAAc,KAAmB,EAAM,SAAS,KAAe,GAAM,EACtE,IAAe,MAAa,KAAA,GAC5B,IAAO,IAAe,IAAW,GAEjC,IAAmB,EAAM,aAC5B,MAAsB;AAErB,EADK,KAAc,EAAgB,EAAS,EAC5C,IAAe,EAAS;IAE1B,CAAC,GAAc,EAAa,CAC7B,EAEK,IAAe,EAAM,eAAe,EAAE,SAAM,GAAG,CAAC,EAAK,CAAC;AAE5D,QACE,kBAAC,EAAmB,UAApB;EAA6B,OAAO;YAClC,kBAAC,GAAD;GAAiC;GAAM,cAAc;GAAkB,GAAI;GAAS,CAAA;EACxD,CAAA;;AAGlC,EAAY,cAAc;AAE1B,IAAM,IAAqB,GAErB,IAAoB,GAEpB,IAAqB,EAAM,YAG9B,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,GAAD;CACO;CACL,YAAA;CACA,WAAW,EACT,oCACA,EACD;CACD,GAAI;CACJ,CAAA,CACF;AACF,EAAmB,cAAA,EAA2C;AAO9D,IAAM,IAAqB,EAAM,YAG9B,EAAE,cAAW,aAAU,eAAY,GAAG,KAAS,MAAQ;CACxD,IAAM,EAAE,YAAS,GAAoB,EAC/B,IAAc,GAAa,EAC3B,IAAW,MAAe,MAAS;AAEzC,QACE,kBAAC,GAAD,EAAA,UACG,KACC,kBAAC,GAAD;EAAmB,YAAA;YAAnB,CACE,kBAAC,GAAD;GAAoB,SAAA;aAClB,kBAAC,EAAO,KAAR;IACE,SAAS,EAAE,SAAS,GAAG;IACvB,SAAS,EAAE,SAAS,GAAG;IACvB,MAAM,EAAE,SAAS,GAAG;IACpB,YAAY,EAAO;IACnB,CAAA;GACiB,CAAA,EACrB,kBAAC,GAAD;GACO;GACL,YAAA;GACA,SAAA;GACA,GAAI;aAEJ,kBAAC,EAAO,KAAR;IACE,SAAS,IAAW,EAAE,GAAG,QAAQ,GAAG;KAAE,SAAS;KAAG,OAAO;KAAM,GAAG;KAAQ,GAAG;KAAQ;IACrF,SAAS,IAAW,EAAE,GAAG,GAAG,GAAG;KAAE,SAAS;KAAG,OAAO;KAAG,GAAG;KAAQ,GAAG;KAAQ;IAC7E,MAAM,IAAW,EAAE,GAAG,QAAQ,GAAG;KAAE,SAAS;KAAG,OAAO;KAAM,GAAG;KAAQ,GAAG;KAAQ;IAClF,YAAY,IACR,EAAQ,SACR;KAAE,GAAG,EAAQ;KAAQ,SAAS,EAAO;KAAM;IAE/C,WAAW,EACT,kEACA,MAAe,KAEX,wGADA,kJAEJ,EACD;IAEA;IACU,CAAA;GACgB,CAAA,CACb;KAEN,CAAA;EAEpB;AACF,EAAmB,cAAA,EAA2C;AAE9D,IAAM,IAAoB,EAAM,YAC7B,EAAE,cAAW,GAAG,KAAS,MACxB,kBAAC,OAAD;CACO;CACL,WAAW,EACT,yDACA,EACD;CACD,GAAI;CACJ,CAAA,CAEL;AACD,EAAkB,cAAc;AAEhC,IAAM,IAAoB,EAAM,YAC7B,EAAE,cAAW,GAAG,KAAS,MACxB,kBAAC,OAAD;CACO;CACL,WAAW,EACT,qEACA,EACD;CACD,GAAI;CACJ,CAAA,CAEL;AACD,EAAkB,cAAc;AAEhC,IAAM,IAAmB,EAAM,YAG5B,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,GAAD;CACO;CACL,WAAW,EACT,4BACA,EACD;CACD,GAAI;CACJ,CAAA,CACF;AACF,EAAiB,cAAA,EAAyC;AAE1D,IAAM,IAAyB,EAAM,YAGlC,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,GAAD;CACO;CACL,WAAW,EAAG,oCAAoC,EAAU;CAC5D,GAAI;CACJ,CAAA,CACF;AACF,EAAuB,cAAA,EACY;AAEnC,IAAM,IAAoB,EAAM,YAG7B,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,GAAD;CACO;CACL,WAAW,EACT,+WACA,EACD;CACD,GAAI;CACJ,CAAA,CACF;AACF,EAAkB,cAAA,EAA0C;AAE5D,IAAM,IAAoB,EAAM,YAG7B,EAAE,cAAW,GAAG,KAAS,MAC1B,kBAAC,GAAD;CACO;CACL,WAAW,EACT,sZACA,EACD;CACD,GAAI;CACJ,CAAA,CACF;AACF,EAAkB,cAAA,EAA0C"}

package/dist/ui/alert.d.ts

@@ -2,7 +2,7 @@
 import { VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 declare const alertVariants: (props?: ({
-    variant?: "outline" | "filled" | "solid" | "subtle" | null | undefined;
+    variant?: "outline" | "solid" | "subtle" | null | undefined;
     color?: "success" | "error" | "info" | "warning" | "neutral" | null | undefined;
     size?: "sm" | "md" | "lg" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
@@ -11,7 +11,6 @@ declare const alertVariants: (props?: ({
  * and an optional dismiss button. Renders with `role="alert"` for screen reader announcements.
  *
  * **Variants:** `subtle` (default, tinted surface) | `solid` (solid colored bg) | `outline` (transparent bg, colored border)
- * (`filled` is accepted as a deprecated alias for `solid` — will be removed in a future version)
  *
  * **Colors:** `info` (default, blue tones) | `success` | `warning` | `error` | `neutral`
  * The matching icon (info circle, checkmark, triangle, alert circle) is auto-selected by color.

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;;;;8EAoDlB,CAAA;AAUD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;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,mFA0DV,CAAA;AAGD,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,CAAA"}

package/dist/ui/alert.js

@@ -8,12 +8,11 @@ import { jsx as o, jsxs as s } from "react/jsx-runtime";
 import { IconAlertCircle as c, IconAlertTriangle as l, IconCircleCheck as u, IconInfoCircle as d, IconX as f } from "@tabler/icons-react";
 import { AnimatePresence as p, motion as m } from "framer-motion";
 //#region src/ui/alert.tsx
-var h = n("relative flex rounded-ds-lg border", {
+var h = n("relative flex rounded-surface border", {
 	variants: {
 		variant: {
 			subtle: "",
 			solid: "",
-			filled: "",
 			outline: ""
 		},
 		color: {
@@ -80,31 +79,6 @@ var h = n("relative flex rounded-ds-lg border", {
 			color: "neutral",
 			className: "bg-surface-raised-hover text-surface-fg border-transparent [&>svg]:text-surface-fg-muted"
 		},
-		{
-			variant: "filled",
-			color: "info",
-			className: "bg-info-9 text-info-fg border-transparent [&>svg]:text-info-fg"
-		},
-		{
-			variant: "filled",
-			color: "success",
-			className: "bg-success-9 text-success-fg border-transparent [&>svg]:text-success-fg"
-		},
-		{
-			variant: "filled",
-			color: "warning",
-			className: "bg-warning-9 text-warning-fg border-transparent [&>svg]:text-warning-fg"
-		},
-		{
-			variant: "filled",
-			color: "error",
-			className: "bg-error-9 text-error-fg border-transparent [&>svg]:text-error-fg"
-		},
-		{
-			variant: "filled",
-			color: "neutral",
-			className: "bg-surface-raised-hover text-surface-fg border-transparent [&>svg]:text-surface-fg-muted"
-		},
 		{
 			variant: "outline",
 			color: "info",
@@ -182,14 +156,14 @@ var h = n("relative flex rounded-ds-lg border", {
 						className: r(O, "font-semibold mb-ds-01"),
 						children: d
 					}), /* @__PURE__ */ o("div", {
-						className: r(D, c !== "solid" && c !== "filled" && "text-surface-fg-muted"),
+						className: r(D, c !== "solid" && "text-surface-fg-muted"),
 						children: v
 					})]
 				}),
 				_ && /* @__PURE__ */ o("button", {
 					type: "button",
 					onClick: w,
-					className: "shrink-0 min-h-ds-xs min-w-ds-xs flex items-center justify-center rounded-ds-sm 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: "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",
 					"aria-label": "Dismiss",
 					children: /* @__PURE__ */ o(i, {
 						icon: f,

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-ds-lg border',\n  {\n    variants: {\n      variant: {\n        subtle: '',\n        solid: '',\n        /** @deprecated Use `solid` instead. Alias kept for one version of backwards compatibility. */\n        filled: '',\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      // filled — deprecated alias for solid (remove in next minor)\n      { variant: 'filled', color: 'info', className: 'bg-info-9 text-info-fg border-transparent [&>svg]:text-info-fg' },\n      { variant: 'filled', color: 'success', className: 'bg-success-9 text-success-fg border-transparent [&>svg]:text-success-fg' },\n      { variant: 'filled', color: 'warning', className: 'bg-warning-9 text-warning-fg border-transparent [&>svg]:text-warning-fg' },\n      { variant: 'filled', color: 'error', className: 'bg-error-9 text-error-fg border-transparent [&>svg]:text-error-fg' },\n      { variant: 'filled', 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 * (`filled` is accepted as a deprecated alias for `solid` — will be removed in a future version)\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-ds-xs' : size === 'lg' ? 'text-ds-md' : 'text-ds-md'\n    const titleClass = size === 'sm' ? 'text-ds-sm' : size === 'lg' ? 'text-ds-lg' : 'text-ds-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/filled 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' && variant !== 'filled' && '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-ds-sm 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-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-ds-xs' : size === 'lg' ? 'text-ds-md' : 'text-ds-md'\n    const titleClass = size === 'sm' ? 'text-ds-sm' : size === 'lg' ? 'text-ds-lg' : 'text-ds-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":";;;;;;;;;;AAWA,IAAM,IAAgB,EACpB,wCACA;CACE,UAAU;EACR,SAAS;GACP,QAAQ;GACR,OAAO;GACP,SAAS;GACV;EACD,OAAO;GACL,MAAM;GACN,SAAS;GACT,SAAS;GACT,OAAO;GACP,SAAS;GACV;EACD,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACL;EACF;CACD,kBAAkB;EAEhB;GAAE,SAAS;GAAU,OAAO;GAAQ,WAAW;GAAwC;EACvF;GAAE,SAAS;GAAU,OAAO;GAAW,WAAW;GAAiD;EACnG;GAAE,SAAS;GAAU,OAAO;GAAW,WAAW;GAAiD;EACnG;GAAE,SAAS;GAAU,OAAO;GAAS,WAAW;GAA2C;EAC3F;GAAE,SAAS;GAAU,OAAO;GAAW,WAAW;GAAgG;EAElJ;GAAE,SAAS;GAAS,OAAO;GAAQ,WAAW;GAAkE;EAChH;GAAE,SAAS;GAAS,OAAO;GAAW,WAAW;GAA2E;EAC5H;GAAE,SAAS;GAAS,OAAO;GAAW,WAAW;GAA2E;EAC5H;GAAE,SAAS;GAAS,OAAO;GAAS,WAAW;GAAqE;EACpH;GAAE,SAAS;GAAS,OAAO;GAAW,WAAW;GAA4F;EAE7I;GAAE,SAAS;GAAW,OAAO;GAAQ,WAAW;GAA6C;EAC7F;GAAE,SAAS;GAAW,OAAO;GAAW,WAAW;GAAmD;EACtG;GAAE,SAAS;GAAW,OAAO;GAAW,WAAW;GAAmD;EACtG;GAAE,SAAS;GAAW,OAAO;GAAS,WAAW;GAA+C;EAChG;GAAE,SAAS;GAAW,OAAO;GAAW,WAAW;GAA6F;EACjJ;CACD,iBAAiB;EAAE,SAAS;EAAU,OAAO;EAAQ,MAAM;EAAM;CAClE,CACF,EAEK,IAAoE;CACxE,MAAS;CACT,SAAS;CACT,SAAS;CACT,OAAS;CACT,SAAS;CACV,EAmDK,IAAQ,EAAM,YACjB,EAAE,cAAW,aAAU,UAAU,WAAQ,QAAQ,UAAO,MAAM,UAAO,cAAW,aAAU,GAAG,KAAS,MAAQ;CAC7G,IAAM,IAAY,EAAY,KAAS,SACjC,CAAC,GAAW,KAAgB,EAAM,SAAS,GAAK,EAEhD,IAAgB,EAAM,kBAAkB;AAC5C,IAAa,GAAM;IAClB,EAAE,CAAC,EAEA,IAAW,MAAS,OAAO,OAAO,MAAS,OAAO,OAAO,MACzD,IAAkB,MAAS,OAAO,OAAO,MACzC,IAAY,MAAS,OAAO,eAA+B,cAC3D,IAAa,MAAS,OAAO,eAAe,MAAS,OAAO,eAAe;AAEjF,QACE,kBAAC,GAAD;EAAiB,gBAAgB;YAC9B,KACC,kBAAC,EAAO,KAAR;GACO;GACL,SAAS;IAAE,SAAS;IAAG,GAAG;IAAG;GAC7B,SAAS;IAAE,SAAS;IAAG,GAAG;IAAG;GAC7B,MAAM;IAAE,SAAS;IAAG,GAAG;IAAI;GAC3B,YAAY,EAAQ;GACpB,WAAW,EAAG,EAAc;IAAE;IAAS;IAAO;IAAM,CAAC,EAAE,EAAU;GACjE,MAAK;GACL,GAAI,EAAY,EAAM;aARxB;IAUE,kBAAC,GAAD;KAAM,MAAM;KAAW,MAAM;KAAU,WAAU;KAAsB,CAAA;IACvE,kBAAC,OAAD;KAAK,WAAU;eAAf,CACG,KAAS,kBAAC,KAAD;MAAG,WAAW,EAAG,GAAY,yBAAyB;gBAAG;MAAU,CAAA,EAK7E,kBAAC,OAAD;MACE,WAAW,EACT,GACA,MAAY,WAAW,wBACxB;MAEA;MACG,CAAA,CACF;;IACL,KACC,kBAAC,UAAD;KACE,MAAK;KACL,SAAS;KACT,WAAU;KACV,cAAW;eAEX,kBAAC,GAAD;MAAM,MAAM;MAAO,MAAM;MAAmB,CAAA;KACrC,CAAA;IAEA;;EAEC,CAAA;EAGvB;AACD,EAAM,cAAc"}

package/dist/ui/autocomplete.js

@@ -90,7 +90,7 @@ var g = {
 			value: j,
 			placeholder: b,
 			disabled: S,
-			className: c("flex h-ds-md w-full rounded-ds-md border border-surface-border-strong bg-surface-raised-hover px-ds-04 py-ds-03 font-sans text-ds-md text-surface-fg placeholder:text-surface-fg-subtle", "outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-[var(--border-focus-offset)]", "transition-colors duration-fast-01", S && "opacity-action-disabled cursor-not-allowed"),
+			className: c("flex h-ds-md w-full rounded-control border border-surface-border-strong bg-surface-raised-hover px-ds-04 py-ds-03 font-sans text-ds-md text-surface-fg placeholder:text-surface-fg-subtle", "outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-[var(--border-focus-offset)]", "transition-colors duration-fast-01", S && "opacity-action-disabled cursor-not-allowed"),
 			onChange: (e) => {
 				M(e.target.value), P(!0), I(-1);
 			},
@@ -109,7 +109,7 @@ var g = {
 			exit: "hidden",
 			variants: g,
 			style: H,
-			className: c("z-popover overflow-auto rounded-ds-md border border-surface-border-strong bg-surface-overlay shadow-raised-hover"),
+			className: c("z-popover overflow-auto rounded-overlay border border-surface-border-strong bg-surface-overlay shadow-raised-hover"),
 			children: G.length === 0 ? /* @__PURE__ */ d(h.li, {
 				initial: { opacity: 0 },
 				animate: { opacity: 1 },

package/dist/ui/autocomplete.js.map

@@ -1 +1 @@
-{"version":3,"file":"autocomplete.js","names":[],"sources":["../../src/ui/autocomplete.tsx"],"sourcesContent":["'use client'\n\nimport { autoUpdate,flip, offset, shift, size, useFloating } from '@floating-ui/react-dom'\nimport { AnimatePresence,motion } from 'framer-motion'\nimport * as React from 'react'\nimport { createPortal } from 'react-dom'\n\nimport { useFormField } from './form'\nimport { springs, tweens } from './lib/motion'\nimport { cn } from './lib/utils'\n\nconst listVariants = {\n  hidden: {},\n  visible: { transition: { staggerChildren: 0.03 } },\n}\n\nconst itemVariants = {\n  hidden: { opacity: 0, y: 4 },\n  visible: { opacity: 1, y: 0, transition: springs.snappy },\n}\n\ntype AutocompleteOption = {\n  label: string\n  value: string\n}\n\n/**\n * Props for Autocomplete — a free-text input with a live-filtered dropdown list, keyboard\n * navigation, and ARIA combobox semantics. Suitable for \"type to search\" fields where the\n * full list is known ahead of time (client-side filtering only).\n *\n * **Key distinction from Combobox:** Autocomplete allows free-text input (no forced selection),\n * while `<Combobox>` enforces selection from the list. Use Autocomplete for search-as-you-type\n * with suggestions; use Combobox for structured single or multi-select dropdowns.\n *\n * **`value`:** A full `AutocompleteOption` object (or null), not just the string value.\n * The input's text is synced to `value.label` on mount.\n *\n * @example\n * // City search autocomplete:\n * <Autocomplete\n *   options={[{ value: 'mumbai', label: 'Mumbai' }, { value: 'delhi', label: 'Delhi' }]}\n *   value={selectedCity}\n *   onValueChange={(opt) => setSelectedCity(opt)}\n *   placeholder=\"Search cities...\"\n * />\n *\n * @example\n * // Employee name lookup with custom empty text:\n * <Autocomplete\n *   options={employees.map(e => ({ value: e.id, label: e.fullName }))}\n *   onValueChange={(opt) => setAssignee(opt.value)}\n *   emptyText=\"No employees found\"\n *   placeholder=\"Search employees...\"\n * />\n * // These are just a few ways — feel free to combine props creatively!\n */\ntype AutocompleteProps = React.HTMLAttributes<HTMLDivElement> & {\n  options: AutocompleteOption[]\n  value?: AutocompleteOption | null\n  onValueChange?: (option: AutocompleteOption) => void\n  placeholder?: string\n  emptyText?: string\n  disabled?: boolean\n  className?: string\n  id?: string\n}\n\nconst Autocomplete = React.forwardRef<HTMLInputElement, AutocompleteProps>(\n  (\n    {\n      options,\n      value,\n      onValueChange,\n      placeholder,\n      emptyText = 'No options',\n      disabled,\n      className,\n      id: externalId,\n      ...props\n    },\n    ref,\n  ) => {\n    const internalId = React.useId()\n    const baseId = externalId || internalId\n    const listboxId = `${baseId}-listbox`\n    const optionIdPrefix = `${baseId}-option`\n\n    const [query, setQuery] = React.useState(value?.label ?? '')\n    const [isOpen, setIsOpen] = React.useState(false)\n    const [highlightedIndex, setHighlightedIndex] = React.useState(-1)\n    const internalRef = React.useRef<HTMLInputElement>(null)\n    const listRef = React.useRef<HTMLUListElement>(null)\n    const containerRef = React.useRef<HTMLDivElement>(null)\n    const floatingRef = React.useRef<HTMLUListElement>(null)\n\n    // Floating UI positioning\n    const { refs, floatingStyles } = useFloating({\n      open: isOpen,\n      placement: 'bottom-start',\n      whileElementsMounted: autoUpdate,\n      middleware: [\n        offset(4),\n        flip(),\n        shift(),\n        size({\n          apply({ availableHeight, rects, elements }) {\n            Object.assign(elements.floating.style, {\n              maxHeight: `${Math.min(availableHeight, 240)}px`,\n              width: `${rects.reference.width}px`,\n            })\n          },\n        }),\n      ],\n    })\n\n    // Compose external + internal ref + floating reference ref for input\n    const composedRef = React.useCallback(\n      (node: HTMLInputElement | null) => {\n        (internalRef as React.MutableRefObject<HTMLInputElement | null>).current = node\n        refs.setReference(node)\n        if (typeof ref === 'function') ref(node)\n        else if (ref) (ref as React.MutableRefObject<HTMLInputElement | null>).current = node\n      },\n      [ref, refs],\n    )\n\n    // Compose floating ref + listRef\n    const composedFloatingRef = React.useCallback(\n      (node: HTMLUListElement | null) => {\n        (listRef as React.MutableRefObject<HTMLUListElement | null>).current = node\n        ;(floatingRef as React.MutableRefObject<HTMLUListElement | null>).current = node\n        refs.setFloating(node)\n      },\n      [refs],\n    )\n\n    // Sync query when value changes externally\n    React.useEffect(() => {\n      setQuery(value?.label ?? '')\n    }, [value])\n\n    // Cleanup blur timeout on unmount\n    React.useEffect(() => {\n      return () => {\n        // Option selected — close and blur handled by relatedTarget check\n      }\n    }, [])\n\n    const filtered = React.useMemo(\n      () =>\n        query\n          ? options.filter((o) => o.label.toLowerCase().includes(query.toLowerCase()))\n          : options,\n      [options, query],\n    )\n\n    const handleSelect = React.useCallback(\n      (option: AutocompleteOption) => {\n        setQuery(option.label)\n        setIsOpen(false)\n        setHighlightedIndex(-1)\n        onValueChange?.(option)\n      },\n      [onValueChange],\n    )\n\n    const handleKeyDown = React.useCallback(\n      (e: React.KeyboardEvent) => {\n        if (!isOpen) {\n          if (e.key === 'ArrowDown' || e.key === 'Enter') setIsOpen(true)\n          return\n        }\n        switch (e.key) {\n          case 'ArrowDown':\n            e.preventDefault()\n            setHighlightedIndex((i) => Math.min(i + 1, filtered.length - 1))\n            break\n          case 'ArrowUp':\n            e.preventDefault()\n            setHighlightedIndex((i) => Math.max(i - 1, 0))\n            break\n          case 'Enter':\n            e.preventDefault()\n            if (highlightedIndex >= 0 && filtered[highlightedIndex]) {\n              handleSelect(filtered[highlightedIndex])\n            }\n            break\n          case 'Escape':\n            setIsOpen(false)\n            setHighlightedIndex(-1)\n            break\n        }\n      },\n      [isOpen, filtered, highlightedIndex, handleSelect],\n    )\n\n    const fieldCtx = useFormField()\n    const isError = fieldCtx.state === 'error'\n    const ariaDescribedBy = fieldCtx.helperTextId\n    const ariaRequired = fieldCtx.required\n\n    const highlightedOptionId =\n      highlightedIndex >= 0 ? `${optionIdPrefix}-${highlightedIndex}` : undefined\n\n    return (\n      <div ref={containerRef} className={cn('relative', className)} {...props}>\n        <input\n          ref={composedRef}\n          type=\"text\"\n          role=\"combobox\"\n          aria-expanded={isOpen}\n          aria-autocomplete=\"list\"\n          aria-controls={isOpen ? listboxId : undefined}\n          aria-activedescendant={highlightedOptionId}\n          aria-invalid={isError || undefined}\n          aria-describedby={ariaDescribedBy}\n          aria-required={ariaRequired || undefined}\n          value={query}\n          placeholder={placeholder}\n          disabled={disabled}\n          className={cn(\n            'flex h-ds-md w-full rounded-ds-md border border-surface-border-strong bg-surface-raised-hover px-ds-04 py-ds-03 font-sans text-ds-md text-surface-fg placeholder:text-surface-fg-subtle',\n            'outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-[var(--border-focus-offset)]',\n            'transition-colors duration-fast-01',\n            disabled && 'opacity-action-disabled cursor-not-allowed',\n          )}\n          onChange={(e) => {\n            setQuery(e.target.value)\n            setIsOpen(true)\n            setHighlightedIndex(-1)\n          }}\n          onFocus={() => setIsOpen(true)}\n          onBlur={(e) => {\n            // Close only if focus moved outside both the container and the portal dropdown\n            const target = e.relatedTarget as Node | null\n            if (\n              !containerRef.current?.contains(target) &&\n              !floatingRef.current?.contains(target)\n            ) {\n              setIsOpen(false)\n            }\n          }}\n          onKeyDown={handleKeyDown}\n        />\n        {typeof document !== 'undefined' &&\n          createPortal(\n            <AnimatePresence>\n              {isOpen && (\n                <motion.ul\n                  id={listboxId}\n                  ref={composedFloatingRef}\n                  role=\"listbox\"\n                  initial=\"hidden\"\n                  animate=\"visible\"\n                  exit=\"hidden\"\n                  variants={listVariants}\n                  style={floatingStyles}\n                  className={cn(\n                    'z-popover overflow-auto rounded-ds-md border border-surface-border-strong bg-surface-overlay shadow-raised-hover',\n                  )}\n                >\n                  {filtered.length === 0 ? (\n                    <motion.li\n                      initial={{ opacity: 0 }}\n                      animate={{ opacity: 1 }}\n                      transition={tweens.fade}\n                      className=\"px-ds-04 py-ds-03 text-ds-md text-surface-fg-muted\"\n                    >\n                      {emptyText}\n                    </motion.li>\n                  ) : (\n                    filtered.map((option, index) => (\n                      <motion.li\n                        key={option.value}\n                        id={`${optionIdPrefix}-${index}`}\n                        role=\"option\"\n                        aria-selected={highlightedIndex === index}\n                        variants={itemVariants}\n                        className={cn(\n                          'cursor-pointer px-ds-04 py-ds-03 text-ds-md text-surface-fg transition-colors duration-fast-01',\n                          highlightedIndex === index && 'bg-accent-3',\n                          value?.value === option.value && 'font-semibold',\n                        )}\n                        onMouseDown={(e) => e.preventDefault()}\n                        onClick={() => handleSelect(option)}\n                        onKeyDown={(e) => {\n                          if (e.key === 'Enter' || e.key === ' ') {\n                            e.preventDefault()\n                            handleSelect(option)\n                          }\n                        }}\n                        onMouseEnter={() => setHighlightedIndex(index)}\n                      >\n                        {option.label}\n                      </motion.li>\n                    ))\n                  )}\n                </motion.ul>\n              )}\n            </AnimatePresence>,\n            document.body,\n          )}\n      </div>\n    )\n  },\n)\nAutocomplete.displayName = 'Autocomplete'\n\nexport { Autocomplete, type AutocompleteOption,type AutocompleteProps }\n"],"mappings":"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"}
+{"version":3,"file":"autocomplete.js","names":[],"sources":["../../src/ui/autocomplete.tsx"],"sourcesContent":["'use client'\n\nimport { autoUpdate,flip, offset, shift, size, useFloating } from '@floating-ui/react-dom'\nimport { AnimatePresence,motion } from 'framer-motion'\nimport * as React from 'react'\nimport { createPortal } from 'react-dom'\n\nimport { useFormField } from './form'\nimport { springs, tweens } from './lib/motion'\nimport { cn } from './lib/utils'\n\nconst listVariants = {\n  hidden: {},\n  visible: { transition: { staggerChildren: 0.03 } },\n}\n\nconst itemVariants = {\n  hidden: { opacity: 0, y: 4 },\n  visible: { opacity: 1, y: 0, transition: springs.snappy },\n}\n\ntype AutocompleteOption = {\n  label: string\n  value: string\n}\n\n/**\n * Props for Autocomplete — a free-text input with a live-filtered dropdown list, keyboard\n * navigation, and ARIA combobox semantics. Suitable for \"type to search\" fields where the\n * full list is known ahead of time (client-side filtering only).\n *\n * **Key distinction from Combobox:** Autocomplete allows free-text input (no forced selection),\n * while `<Combobox>` enforces selection from the list. Use Autocomplete for search-as-you-type\n * with suggestions; use Combobox for structured single or multi-select dropdowns.\n *\n * **`value`:** A full `AutocompleteOption` object (or null), not just the string value.\n * The input's text is synced to `value.label` on mount.\n *\n * @example\n * // City search autocomplete:\n * <Autocomplete\n *   options={[{ value: 'mumbai', label: 'Mumbai' }, { value: 'delhi', label: 'Delhi' }]}\n *   value={selectedCity}\n *   onValueChange={(opt) => setSelectedCity(opt)}\n *   placeholder=\"Search cities...\"\n * />\n *\n * @example\n * // Employee name lookup with custom empty text:\n * <Autocomplete\n *   options={employees.map(e => ({ value: e.id, label: e.fullName }))}\n *   onValueChange={(opt) => setAssignee(opt.value)}\n *   emptyText=\"No employees found\"\n *   placeholder=\"Search employees...\"\n * />\n * // These are just a few ways — feel free to combine props creatively!\n */\ntype AutocompleteProps = React.HTMLAttributes<HTMLDivElement> & {\n  options: AutocompleteOption[]\n  value?: AutocompleteOption | null\n  onValueChange?: (option: AutocompleteOption) => void\n  placeholder?: string\n  emptyText?: string\n  disabled?: boolean\n  className?: string\n  id?: string\n}\n\nconst Autocomplete = React.forwardRef<HTMLInputElement, AutocompleteProps>(\n  (\n    {\n      options,\n      value,\n      onValueChange,\n      placeholder,\n      emptyText = 'No options',\n      disabled,\n      className,\n      id: externalId,\n      ...props\n    },\n    ref,\n  ) => {\n    const internalId = React.useId()\n    const baseId = externalId || internalId\n    const listboxId = `${baseId}-listbox`\n    const optionIdPrefix = `${baseId}-option`\n\n    const [query, setQuery] = React.useState(value?.label ?? '')\n    const [isOpen, setIsOpen] = React.useState(false)\n    const [highlightedIndex, setHighlightedIndex] = React.useState(-1)\n    const internalRef = React.useRef<HTMLInputElement>(null)\n    const listRef = React.useRef<HTMLUListElement>(null)\n    const containerRef = React.useRef<HTMLDivElement>(null)\n    const floatingRef = React.useRef<HTMLUListElement>(null)\n\n    // Floating UI positioning\n    const { refs, floatingStyles } = useFloating({\n      open: isOpen,\n      placement: 'bottom-start',\n      whileElementsMounted: autoUpdate,\n      middleware: [\n        offset(4),\n        flip(),\n        shift(),\n        size({\n          apply({ availableHeight, rects, elements }) {\n            Object.assign(elements.floating.style, {\n              maxHeight: `${Math.min(availableHeight, 240)}px`,\n              width: `${rects.reference.width}px`,\n            })\n          },\n        }),\n      ],\n    })\n\n    // Compose external + internal ref + floating reference ref for input\n    const composedRef = React.useCallback(\n      (node: HTMLInputElement | null) => {\n        (internalRef as React.MutableRefObject<HTMLInputElement | null>).current = node\n        refs.setReference(node)\n        if (typeof ref === 'function') ref(node)\n        else if (ref) (ref as React.MutableRefObject<HTMLInputElement | null>).current = node\n      },\n      [ref, refs],\n    )\n\n    // Compose floating ref + listRef\n    const composedFloatingRef = React.useCallback(\n      (node: HTMLUListElement | null) => {\n        (listRef as React.MutableRefObject<HTMLUListElement | null>).current = node\n        ;(floatingRef as React.MutableRefObject<HTMLUListElement | null>).current = node\n        refs.setFloating(node)\n      },\n      [refs],\n    )\n\n    // Sync query when value changes externally\n    React.useEffect(() => {\n      setQuery(value?.label ?? '')\n    }, [value])\n\n    // Cleanup blur timeout on unmount\n    React.useEffect(() => {\n      return () => {\n        // Option selected — close and blur handled by relatedTarget check\n      }\n    }, [])\n\n    const filtered = React.useMemo(\n      () =>\n        query\n          ? options.filter((o) => o.label.toLowerCase().includes(query.toLowerCase()))\n          : options,\n      [options, query],\n    )\n\n    const handleSelect = React.useCallback(\n      (option: AutocompleteOption) => {\n        setQuery(option.label)\n        setIsOpen(false)\n        setHighlightedIndex(-1)\n        onValueChange?.(option)\n      },\n      [onValueChange],\n    )\n\n    const handleKeyDown = React.useCallback(\n      (e: React.KeyboardEvent) => {\n        if (!isOpen) {\n          if (e.key === 'ArrowDown' || e.key === 'Enter') setIsOpen(true)\n          return\n        }\n        switch (e.key) {\n          case 'ArrowDown':\n            e.preventDefault()\n            setHighlightedIndex((i) => Math.min(i + 1, filtered.length - 1))\n            break\n          case 'ArrowUp':\n            e.preventDefault()\n            setHighlightedIndex((i) => Math.max(i - 1, 0))\n            break\n          case 'Enter':\n            e.preventDefault()\n            if (highlightedIndex >= 0 && filtered[highlightedIndex]) {\n              handleSelect(filtered[highlightedIndex])\n            }\n            break\n          case 'Escape':\n            setIsOpen(false)\n            setHighlightedIndex(-1)\n            break\n        }\n      },\n      [isOpen, filtered, highlightedIndex, handleSelect],\n    )\n\n    const fieldCtx = useFormField()\n    const isError = fieldCtx.state === 'error'\n    const ariaDescribedBy = fieldCtx.helperTextId\n    const ariaRequired = fieldCtx.required\n\n    const highlightedOptionId =\n      highlightedIndex >= 0 ? `${optionIdPrefix}-${highlightedIndex}` : undefined\n\n    return (\n      <div ref={containerRef} className={cn('relative', className)} {...props}>\n        <input\n          ref={composedRef}\n          type=\"text\"\n          role=\"combobox\"\n          aria-expanded={isOpen}\n          aria-autocomplete=\"list\"\n          aria-controls={isOpen ? listboxId : undefined}\n          aria-activedescendant={highlightedOptionId}\n          aria-invalid={isError || undefined}\n          aria-describedby={ariaDescribedBy}\n          aria-required={ariaRequired || undefined}\n          value={query}\n          placeholder={placeholder}\n          disabled={disabled}\n          className={cn(\n            'flex h-ds-md w-full rounded-control border border-surface-border-strong bg-surface-raised-hover px-ds-04 py-ds-03 font-sans text-ds-md text-surface-fg placeholder:text-surface-fg-subtle',\n            'outline-hidden focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-[var(--border-focus-offset)]',\n            'transition-colors duration-fast-01',\n            disabled && 'opacity-action-disabled cursor-not-allowed',\n          )}\n          onChange={(e) => {\n            setQuery(e.target.value)\n            setIsOpen(true)\n            setHighlightedIndex(-1)\n          }}\n          onFocus={() => setIsOpen(true)}\n          onBlur={(e) => {\n            // Close only if focus moved outside both the container and the portal dropdown\n            const target = e.relatedTarget as Node | null\n            if (\n              !containerRef.current?.contains(target) &&\n              !floatingRef.current?.contains(target)\n            ) {\n              setIsOpen(false)\n            }\n          }}\n          onKeyDown={handleKeyDown}\n        />\n        {typeof document !== 'undefined' &&\n          createPortal(\n            <AnimatePresence>\n              {isOpen && (\n                <motion.ul\n                  id={listboxId}\n                  ref={composedFloatingRef}\n                  role=\"listbox\"\n                  initial=\"hidden\"\n                  animate=\"visible\"\n                  exit=\"hidden\"\n                  variants={listVariants}\n                  style={floatingStyles}\n                  className={cn(\n                    'z-popover overflow-auto rounded-overlay border border-surface-border-strong bg-surface-overlay shadow-raised-hover',\n                  )}\n                >\n                  {filtered.length === 0 ? (\n                    <motion.li\n                      initial={{ opacity: 0 }}\n                      animate={{ opacity: 1 }}\n                      transition={tweens.fade}\n                      className=\"px-ds-04 py-ds-03 text-ds-md text-surface-fg-muted\"\n                    >\n                      {emptyText}\n                    </motion.li>\n                  ) : (\n                    filtered.map((option, index) => (\n                      <motion.li\n                        key={option.value}\n                        id={`${optionIdPrefix}-${index}`}\n                        role=\"option\"\n                        aria-selected={highlightedIndex === index}\n                        variants={itemVariants}\n                        className={cn(\n                          'cursor-pointer px-ds-04 py-ds-03 text-ds-md text-surface-fg transition-colors duration-fast-01',\n                          highlightedIndex === index && 'bg-accent-3',\n                          value?.value === option.value && 'font-semibold',\n                        )}\n                        onMouseDown={(e) => e.preventDefault()}\n                        onClick={() => handleSelect(option)}\n                        onKeyDown={(e) => {\n                          if (e.key === 'Enter' || e.key === ' ') {\n                            e.preventDefault()\n                            handleSelect(option)\n                          }\n                        }}\n                        onMouseEnter={() => setHighlightedIndex(index)}\n                      >\n                        {option.label}\n                      </motion.li>\n                    ))\n                  )}\n                </motion.ul>\n              )}\n            </AnimatePresence>,\n            document.body,\n          )}\n      </div>\n    )\n  },\n)\nAutocomplete.displayName = 'Autocomplete'\n\nexport { Autocomplete, type AutocompleteOption,type AutocompleteProps }\n"],"mappings":"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"}

package/dist/ui/avatar.js

@@ -17,9 +17,9 @@ var u = o.createContext("circle"), d = o.createContext("md"), f = i("relative fl
 			xl: "h-ds-xl w-ds-xl"
 		},
 		shape: {
-			circle: "rounded-ds-full",
-			square: "rounded-ds-none",
-			rounded: "rounded-ds-md"
+			circle: "rounded-pill",
+			square: "rounded-none",
+			rounded: "rounded-control"
 		}
 	},
 	defaultVariants: {
@@ -47,9 +47,9 @@ var u = o.createContext("circle"), d = o.createContext("md"), f = i("relative fl
 	admin: "ring-warning-7",
 	client: "ring-info-7"
 }, _ = {
-	circle: "rounded-ds-full",
-	square: "rounded-ds-none",
-	rounded: "rounded-ds-md"
+	circle: "rounded-pill",
+	square: "rounded-none",
+	rounded: "rounded-control"
 }, v = {
 	xs: "text-[9px]",
 	sm: "text-ds-xs",
@@ -126,7 +126,7 @@ var x = o.forwardRef(({ className: e, size: t, shape: i, status: o, ring: v, bad
 						children: x
 					}),
 					o && (o === "online" ? /* @__PURE__ */ s(l.span, {
-						className: a("absolute bottom-0 right-0 rounded-ds-full ring-2 ring-surface-raised", p[o], h[t ?? "md"]),
+						className: a("absolute bottom-0 right-0 rounded-pill ring-2 ring-surface-raised", p[o], h[t ?? "md"]),
 						animate: { opacity: [
 							1,
 							.75,
@@ -140,19 +140,19 @@ var x = o.forwardRef(({ className: e, size: t, shape: i, status: o, ring: v, bad
 						role: "img",
 						"aria-label": m[o]
 					}) : /* @__PURE__ */ s("span", {
-						className: a("absolute bottom-0 right-0 rounded-ds-full ring-2 ring-surface-raised", p[o], h[t ?? "md"]),
+						className: a("absolute bottom-0 right-0 rounded-pill ring-2 ring-surface-raised", p[o], h[t ?? "md"]),
 						role: "img",
 						"aria-label": m[o]
 					})),
 					E && (y === "dot" ? /* @__PURE__ */ s("span", {
-						className: "absolute -right-0.5 -top-0.5 h-[8px] w-[8px] rounded-ds-full bg-error-9 ring-2 ring-surface-raised",
+						className: "absolute -right-0.5 -top-0.5 h-[8px] w-[8px] rounded-pill bg-error-9 ring-2 ring-surface-raised",
 						"data-slot": "avatar-badge-dot",
 						"aria-hidden": "true"
 					}) : typeof y == "number" ? /* @__PURE__ */ s(l.span, {
 						initial: { scale: 0 },
 						animate: { scale: 1 },
 						transition: r.bouncy,
-						className: "absolute -right-1 -top-1 flex min-w-[16px] items-center justify-center rounded-ds-full 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-[16px] 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",
 						"data-slot": "avatar-badge",
 						role: "status",
 						"aria-label": `${y > 99 ? "99+" : y} notifications`,
@@ -187,7 +187,7 @@ var S = o.forwardRef(({ className: t, ...n }, i) => /* @__PURE__ */ s(l.span, {
 }));
 S.displayName = e.displayName;
 var C = o.forwardRef(({ className: e, colorSeed: n, children: r, ...i }, c) => {
-	let l = typeof r == "string" ? r : "", f = b(n ?? l), p = o.useContext(u), m = o.useContext(d), h = p === "square" ? "rounded-ds-none" : p === "rounded" ? "rounded-ds-md" : "rounded-ds-full", g = l.length === 1 ? "tracking-wide" : "tracking-normal";
+	let l = typeof r == "string" ? r : "", f = b(n ?? l), p = o.useContext(u), m = o.useContext(d), h = p === "square" ? "rounded-none" : p === "rounded" ? "rounded-control" : "rounded-pill", g = l.length === 1 ? "tracking-wide" : "tracking-normal";
 	return /* @__PURE__ */ s(t, {
 		ref: c,
 		"data-slot": "avatar-fallback",