@devalok/shilp-sutra 0.31.0 → 0.32.0

package/dist/tailwind/index.cjs

@@ -38,6 +38,12 @@ const s = {
    * set it explicitly in your own tailwind.config — your config takes precedence.
    */
   darkMode: "class",
+  safelist: [
+    "py-ds-02",
+    "py-ds-03",
+    "py-ds-05",
+    "py-ds-07"
+  ],
   theme: {
     extend: {
       // Breakpoints must be static values — CSS custom properties cannot be used
@@ -349,6 +355,14 @@ const s = {
           "0%": { transform: "scaleX(1)" },
           "100%": { transform: "scaleX(0)" }
         },
+        "popover-in": {
+          from: { opacity: "0", transform: "scale(0.95)" },
+          to: { opacity: "1", transform: "scale(1)" }
+        },
+        "popover-out": {
+          from: { opacity: "1", transform: "scale(1)" },
+          to: { opacity: "0", transform: "scale(0.95)" }
+        },
         "processing-ants": {
           to: { "--border-angle": "360deg" }
         }
@@ -364,6 +378,8 @@ const s = {
         "skeleton-shimmer": "skeleton-shimmer var(--duration-slow-02) var(--ease-linear) infinite",
         "caret-blink": "caret-blink 1.25s ease-out infinite",
         "timer-bar": "timer-bar linear forwards",
+        "popover-in": "popover-in 150ms var(--ease-productive-entrance)",
+        "popover-out": "popover-out 100ms var(--ease-productive-exit)",
         "processing-ants-ambient": "processing-ants 3s linear infinite",
         "processing-ants-working": "processing-ants 2s linear infinite",
         "processing-ants-urgent": "processing-ants 1s linear infinite"
@@ -386,7 +402,8 @@ const s = {
         error: "var(--shadow-error)",
         warning: "var(--shadow-warning)",
         "ring-sm": "var(--shadow-ring-sm)",
-        ring: "var(--shadow-ring)"
+        ring: "var(--shadow-ring)",
+        kbd: "var(--shadow-kbd)"
       },
       transitionDuration: {
         instant: "var(--duration-instant)",
@@ -417,9 +434,6 @@ const s = {
         popover: "var(--z-popover)",
         toast: "var(--z-toast)",
         tooltip: "var(--z-tooltip)"
-      },
-      fontVariantNumeric: {
-        tabular: "tabular-nums"
       }
     }
   },
@@ -430,25 +444,55 @@ const s = {
           syntax: '"<angle>"',
           "initial-value": "0deg",
           inherits: "false"
+        },
+        // Prevent iOS Safari auto-zoom on inputs with font-size < 16px
+        "@media screen and (max-width: 767px)": {
+          'input:not([type="checkbox"]):not([type="radio"]), textarea, select': {
+            "font-size": "max(16px, 1em) !important"
+          }
         }
       }), a({
+        ".tabular-nums": { "font-variant-numeric": "tabular-nums" },
+        ".touch-target": {
+          position: "relative"
+        },
+        ".touch-target::before": {
+          content: '""',
+          position: "absolute",
+          top: "50%",
+          left: "50%",
+          transform: "translate(-50%, -50%)",
+          "min-width": "44px",
+          "min-height": "44px"
+        },
         ".focus-ring": {
           "&:focus-visible": {
             outline: "none",
-            "box-shadow": "0 0 0 2px var(--color-surface-base), 0 0 0 4px var(--color-accent-9)"
+            "box-shadow": "0 0 0 var(--border-focus-width) var(--color-surface-base), 0 0 0 calc(var(--border-focus-width) + var(--border-focus-offset)) var(--color-accent-9)"
           }
         },
         ".focus-ring-inset": {
           "&:focus-visible": {
             outline: "none",
-            "box-shadow": "inset 0 0 0 2px var(--color-accent-9)"
+            "box-shadow": "inset 0 0 0 var(--border-focus-width) var(--color-accent-9)"
           }
         },
         ".focus-ring-sm": {
           "&:focus-visible": {
             outline: "none",
-            "box-shadow": "0 0 0 1px var(--color-accent-7)"
+            "box-shadow": "0 0 0 var(--border-focus-width) var(--color-accent-7)"
           }
+        },
+        // Safe area inset utilities for notched/island devices
+        ".pt-safe": { "padding-top": "env(safe-area-inset-top, 0px)" },
+        ".pb-safe": { "padding-bottom": "env(safe-area-inset-bottom, 0px)" },
+        ".pl-safe": { "padding-left": "env(safe-area-inset-left, 0px)" },
+        ".pr-safe": { "padding-right": "env(safe-area-inset-right, 0px)" },
+        ".p-safe": {
+          "padding-top": "env(safe-area-inset-top, 0px)",
+          "padding-bottom": "env(safe-area-inset-bottom, 0px)",
+          "padding-left": "env(safe-area-inset-left, 0px)",
+          "padding-right": "env(safe-area-inset-right, 0px)"
         }
       });
     })

package/dist/tailwind/preset.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"preset.d.ts","sourceRoot":"","sources":["../../src/tailwind/preset.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAA;AAGzC,QAAA,MAAM,MAAM,EAAE,OAAO,CAAC,MAAM,CA8a3B,CAAA;AAED,eAAe,MAAM,CAAA"}
+{"version":3,"file":"preset.d.ts","sourceRoot":"","sources":["../../src/tailwind/preset.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAA;AAGzC,QAAA,MAAM,MAAM,EAAE,OAAO,CAAC,MAAM,CAud3B,CAAA;AAED,eAAe,MAAM,CAAA"}

package/dist/tailwind/preset.js

@@ -5,6 +5,12 @@ const s = {
    * set it explicitly in your own tailwind.config — your config takes precedence.
    */
   darkMode: "class",
+  safelist: [
+    "py-ds-02",
+    "py-ds-03",
+    "py-ds-05",
+    "py-ds-07"
+  ],
   theme: {
     extend: {
       // Breakpoints must be static values — CSS custom properties cannot be used
@@ -316,6 +322,14 @@ const s = {
           "0%": { transform: "scaleX(1)" },
           "100%": { transform: "scaleX(0)" }
         },
+        "popover-in": {
+          from: { opacity: "0", transform: "scale(0.95)" },
+          to: { opacity: "1", transform: "scale(1)" }
+        },
+        "popover-out": {
+          from: { opacity: "1", transform: "scale(1)" },
+          to: { opacity: "0", transform: "scale(0.95)" }
+        },
         "processing-ants": {
           to: { "--border-angle": "360deg" }
         }
@@ -331,6 +345,8 @@ const s = {
         "skeleton-shimmer": "skeleton-shimmer var(--duration-slow-02) var(--ease-linear) infinite",
         "caret-blink": "caret-blink 1.25s ease-out infinite",
         "timer-bar": "timer-bar linear forwards",
+        "popover-in": "popover-in 150ms var(--ease-productive-entrance)",
+        "popover-out": "popover-out 100ms var(--ease-productive-exit)",
         "processing-ants-ambient": "processing-ants 3s linear infinite",
         "processing-ants-working": "processing-ants 2s linear infinite",
         "processing-ants-urgent": "processing-ants 1s linear infinite"
@@ -353,7 +369,8 @@ const s = {
         error: "var(--shadow-error)",
         warning: "var(--shadow-warning)",
         "ring-sm": "var(--shadow-ring-sm)",
-        ring: "var(--shadow-ring)"
+        ring: "var(--shadow-ring)",
+        kbd: "var(--shadow-kbd)"
       },
       transitionDuration: {
         instant: "var(--duration-instant)",
@@ -384,9 +401,6 @@ const s = {
         popover: "var(--z-popover)",
         toast: "var(--z-toast)",
         tooltip: "var(--z-tooltip)"
-      },
-      fontVariantNumeric: {
-        tabular: "tabular-nums"
       }
     }
   },
@@ -397,25 +411,55 @@ const s = {
           syntax: '"<angle>"',
           "initial-value": "0deg",
           inherits: "false"
+        },
+        // Prevent iOS Safari auto-zoom on inputs with font-size < 16px
+        "@media screen and (max-width: 767px)": {
+          'input:not([type="checkbox"]):not([type="radio"]), textarea, select': {
+            "font-size": "max(16px, 1em) !important"
+          }
         }
       }), a({
+        ".tabular-nums": { "font-variant-numeric": "tabular-nums" },
+        ".touch-target": {
+          position: "relative"
+        },
+        ".touch-target::before": {
+          content: '""',
+          position: "absolute",
+          top: "50%",
+          left: "50%",
+          transform: "translate(-50%, -50%)",
+          "min-width": "44px",
+          "min-height": "44px"
+        },
         ".focus-ring": {
           "&:focus-visible": {
             outline: "none",
-            "box-shadow": "0 0 0 2px var(--color-surface-base), 0 0 0 4px var(--color-accent-9)"
+            "box-shadow": "0 0 0 var(--border-focus-width) var(--color-surface-base), 0 0 0 calc(var(--border-focus-width) + var(--border-focus-offset)) var(--color-accent-9)"
           }
         },
         ".focus-ring-inset": {
           "&:focus-visible": {
             outline: "none",
-            "box-shadow": "inset 0 0 0 2px var(--color-accent-9)"
+            "box-shadow": "inset 0 0 0 var(--border-focus-width) var(--color-accent-9)"
           }
         },
         ".focus-ring-sm": {
           "&:focus-visible": {
             outline: "none",
-            "box-shadow": "0 0 0 1px var(--color-accent-7)"
+            "box-shadow": "0 0 0 var(--border-focus-width) var(--color-accent-7)"
           }
+        },
+        // Safe area inset utilities for notched/island devices
+        ".pt-safe": { "padding-top": "env(safe-area-inset-top, 0px)" },
+        ".pb-safe": { "padding-bottom": "env(safe-area-inset-bottom, 0px)" },
+        ".pl-safe": { "padding-left": "env(safe-area-inset-left, 0px)" },
+        ".pr-safe": { "padding-right": "env(safe-area-inset-right, 0px)" },
+        ".p-safe": {
+          "padding-top": "env(safe-area-inset-top, 0px)",
+          "padding-bottom": "env(safe-area-inset-bottom, 0px)",
+          "padding-left": "env(safe-area-inset-left, 0px)",
+          "padding-right": "env(safe-area-inset-right, 0px)"
         }
       });
     })

package/dist/tokens/primitives.css

@@ -91,7 +91,9 @@
   --green-11: oklch(0.43 0.1032 145);
   --green-12: oklch(0.32 0.0589 145);
 
-  /* ── Yellow — H:85 ── */
+  /* ── Yellow — H:85 ── RESERVED — not referenced by semantic tokens.
+     Kept for consumer apps that may use primitives directly.
+     Warning status uses amber-bright scale instead. */
   --yellow-1:  oklch(0.99 0.0037 85);
   --yellow-2:  oklch(0.97 0.0111 85);
   --yellow-3:  oklch(0.93 0.0258 85);

package/dist/tokens/semantic.css

@@ -112,9 +112,9 @@
   --color-surface-fg: var(--neutral-12);
   --color-surface-fg-muted: var(--neutral-11);
   --color-surface-fg-subtle: var(--neutral-8);
-  --color-surface-border: var(--neutral-5);
-  --color-surface-border-strong: var(--neutral-6);
-  --color-surface-border-subtle: var(--neutral-4);
+  --color-surface-border: var(--neutral-6);         /* was neutral-5; bumped for WCAG 1.4.11 non-text contrast */
+  --color-surface-border-strong: var(--neutral-7);   /* was neutral-6 */
+  --color-surface-border-subtle: var(--neutral-5);   /* was neutral-4 */
   --color-backdrop: oklch(0 0 0 / 0.4);
 
   /* ═══════════════════════════════════════════════════════════
@@ -292,6 +292,9 @@
   /* Shadow transition */
   --shadow-transition: box-shadow var(--duration-fast-02) var(--ease-productive-standard);
 
+  /* Keyboard shortcut badge shadow */
+  --shadow-kbd: inset 0 -1px 0 oklch(0 0 0 / 0.1);
+
   /* Shadow primitives (internal) */
   --shadow-xs:
     0 0 0 1px oklch(var(--shadow-color) / calc(0.035 * var(--shadow-strength))),
@@ -417,12 +420,12 @@
 .dark {
   color-scheme: dark;
 
-  /* Foreground on accent flips in dark mode */
-  --color-accent-fg: var(--neutral-12);
-  --color-secondary-fg: var(--neutral-12);
-  --color-error-fg: var(--neutral-12);
-  --color-success-fg: var(--neutral-12);
-  --color-info-fg: var(--neutral-12);
+  /* Foreground on solid accent/status backgrounds — pure white on brand colors */
+  --color-accent-fg: var(--neutral-0);
+  --color-secondary-fg: var(--neutral-0);
+  --color-error-fg: var(--neutral-0);
+  --color-success-fg: var(--neutral-0);
+  --color-info-fg: var(--neutral-0);
 
   /* Warning: amber-bright dark ramp for dark mode */
   --color-warning-2:  var(--amber-bright-2);
@@ -433,7 +436,7 @@
   --color-warning-9:  var(--amber-bright-9);
   --color-warning-10: var(--amber-bright-10);
   --color-warning-11: var(--amber-bright-11);
-  --color-warning-fg: var(--neutral-12);
+  --color-warning-fg: var(--neutral-0);
 
   /* Dark mode borders need lower contrast — bright borders look harsh.
      Drop to step 3/4 for subtle resting borders that don't overpower surfaces */
@@ -441,10 +444,10 @@
   --color-surface-base: var(--neutral-1);     /* 0.11L — dark page */
   --color-surface-raised: var(--neutral-2);   /* 0.17L — lighter cards */
 
-  --color-surface-border: var(--neutral-3);
-  --color-surface-border-strong: var(--neutral-4);
+  --color-surface-border: var(--neutral-4);         /* was neutral-3; bumped for contrast */
+  --color-surface-border-strong: var(--neutral-5);   /* was neutral-4 */
   --color-surface-overlay: oklch(0.13 0.0002 350);
-  --color-surface-border-subtle: var(--neutral-2);
+  --color-surface-border-subtle: var(--neutral-3); /* was neutral-2 = same as raised = invisible (1:1) */
   --color-backdrop: oklch(0 0 0 / 0.6);
 
   /* Overlay */

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

@@ -1 +1 @@
-{"version":3,"file":"autocomplete.d.ts","sourceRoot":"","sources":["../../src/ui/autocomplete.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAe9B,KAAK,kBAAkB,GAAG;IACxB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,KAAK,iBAAiB,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,GAAG;IAC9D,OAAO,EAAE,kBAAkB,EAAE,CAAA;IAC7B,KAAK,CAAC,EAAE,kBAAkB,GAAG,IAAI,CAAA;IACjC,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,kBAAkB,KAAK,IAAI,CAAA;IACpD,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,EAAE,CAAC,EAAE,MAAM,CAAA;CACZ,CAAA;AAED,QAAA,MAAM,YAAY;aAVP,kBAAkB,EAAE;YACrB,kBAAkB,GAAG,IAAI;oBACjB,CAAC,MAAM,EAAE,kBAAkB,KAAK,IAAI;kBACtC,MAAM;gBACR,MAAM;eACP,OAAO;gBACN,MAAM;SACb,MAAM;0CA8LZ,CAAA;AAGD,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,KAAK,kBAAkB,EAAE,CAAA"}
+{"version":3,"file":"autocomplete.d.ts","sourceRoot":"","sources":["../../src/ui/autocomplete.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAe9B,KAAK,kBAAkB,GAAG;IACxB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;CACd,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,KAAK,iBAAiB,GAAG,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,GAAG;IAC9D,OAAO,EAAE,kBAAkB,EAAE,CAAA;IAC7B,KAAK,CAAC,EAAE,kBAAkB,GAAG,IAAI,CAAA;IACjC,aAAa,CAAC,EAAE,CAAC,MAAM,EAAE,kBAAkB,KAAK,IAAI,CAAA;IACpD,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,EAAE,CAAC,EAAE,MAAM,CAAA;CACZ,CAAA;AAED,QAAA,MAAM,YAAY;aAVP,kBAAkB,EAAE;YACrB,kBAAkB,GAAG,IAAI;oBACjB,CAAC,MAAM,EAAE,kBAAkB,KAAK,IAAI;kBACtC,MAAM;gBACR,MAAM;eACP,OAAO;gBACN,MAAM;SACb,MAAM;0CAiMZ,CAAA;AAGD,OAAO,EAAE,YAAY,EAAE,KAAK,iBAAiB,EAAE,KAAK,kBAAkB,EAAE,CAAA"}

package/dist/ui/autocomplete.js

@@ -1,28 +1,28 @@
 "use client";
-import { jsxs as T, jsx as d } from "react/jsx-runtime";
+import { jsxs as j, jsx as d } from "react/jsx-runtime";
 import * as t from "react";
 import { cn as p } from "./lib/utils.js";
-import { tweens as j, springs as L } from "./lib/motion.js";
-import { A as P, m as y } from "../_chunks/framer.js";
-const q = {
+import { tweens as L, springs as P } from "./lib/motion.js";
+import { A as q, m as v } from "../_chunks/framer.js";
+const z = {
   hidden: {},
   visible: { transition: { staggerChildren: 0.03 } }
-}, z = {
+}, B = {
   hidden: { opacity: 0, y: 4 },
-  visible: { opacity: 1, y: 0, transition: L.snappy }
-}, B = t.forwardRef(
+  visible: { opacity: 1, y: 0, transition: P.snappy }
+}, F = t.forwardRef(
   ({
     options: b,
     value: u,
     onValueChange: g,
     placeholder: I,
     emptyText: R = "No options",
-    disabled: x,
+    disabled: y,
     className: A,
     id: C,
     ...E
   }, i) => {
-    const N = t.useId(), w = C || N, k = `${w}-listbox`, D = `${w}-option`, [f, h] = t.useState(u?.label ?? ""), [l, a] = t.useState(!1), [s, o] = t.useState(-1), $ = t.useRef(null), M = t.useRef(null), v = t.useRef(void 0), S = t.useCallback(
+    const N = t.useId(), x = C || N, w = `${x}-listbox`, k = `${x}-option`, [f, h] = t.useState(u?.label ?? ""), [l, r] = t.useState(!1), [s, o] = t.useState(-1), $ = t.useRef(null), M = t.useRef(null), D = t.useRef(null), S = t.useCallback(
       (e) => {
         $.current = e, typeof i == "function" ? i(e) : i && (i.current = e);
       },
@@ -31,40 +31,39 @@ const q = {
     t.useEffect(() => {
       h(u?.label ?? "");
     }, [u]), t.useEffect(() => () => {
-      v.current && clearTimeout(v.current);
     }, []);
     const n = t.useMemo(
       () => f ? b.filter((e) => e.label.toLowerCase().includes(f.toLowerCase())) : b,
       [b, f]
     ), m = t.useCallback(
       (e) => {
-        h(e.label), a(!1), o(-1), g?.(e);
+        h(e.label), r(!1), o(-1), g?.(e);
       },
       [g]
     ), K = t.useCallback(
       (e) => {
         if (!l) {
-          (e.key === "ArrowDown" || e.key === "Enter") && a(!0);
+          (e.key === "ArrowDown" || e.key === "Enter") && r(!0);
           return;
         }
         switch (e.key) {
           case "ArrowDown":
-            e.preventDefault(), o((r) => Math.min(r + 1, n.length - 1));
+            e.preventDefault(), o((a) => Math.min(a + 1, n.length - 1));
             break;
           case "ArrowUp":
-            e.preventDefault(), o((r) => Math.max(r - 1, 0));
+            e.preventDefault(), o((a) => Math.max(a - 1, 0));
             break;
           case "Enter":
             e.preventDefault(), s >= 0 && n[s] && m(n[s]);
             break;
           case "Escape":
-            a(!1), o(-1);
+            r(!1), o(-1);
             break;
         }
       },
       [l, n, s, m]
-    ), O = s >= 0 ? `${D}-${s}` : void 0;
-    return /* @__PURE__ */ T("div", { className: p("relative", A), ...E, children: [
+    ), O = s >= 0 ? `${k}-${s}` : void 0;
+    return /* @__PURE__ */ j("div", { ref: D, className: p("relative", A), ...E, children: [
       /* @__PURE__ */ d(
         "input",
         {
@@ -73,60 +72,60 @@ const q = {
           role: "combobox",
           "aria-expanded": l,
           "aria-autocomplete": "list",
-          "aria-controls": l ? k : void 0,
+          "aria-controls": l ? w : void 0,
           "aria-activedescendant": O,
           value: f,
           placeholder: I,
-          disabled: x,
+          disabled: y,
           className: p(
             "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-none focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-[var(--border-focus-offset)]",
             "transition-colors duration-fast-01",
-            x && "opacity-action-disabled cursor-not-allowed"
+            y && "opacity-action-disabled cursor-not-allowed"
           ),
           onChange: (e) => {
-            h(e.target.value), a(!0), o(-1);
+            h(e.target.value), r(!0), o(-1);
           },
-          onFocus: () => a(!0),
-          onBlur: () => {
-            v.current = setTimeout(() => a(!1), 150);
+          onFocus: () => r(!0),
+          onBlur: (e) => {
+            D.current?.contains(e.relatedTarget) || r(!1);
           },
           onKeyDown: K
         }
       ),
-      /* @__PURE__ */ d(P, { children: l && /* @__PURE__ */ d(
-        y.ul,
+      /* @__PURE__ */ d(q, { children: l && /* @__PURE__ */ d(
+        v.ul,
         {
-          id: k,
+          id: w,
           ref: M,
           role: "listbox",
           initial: "hidden",
           animate: "visible",
           exit: "hidden",
-          variants: q,
+          variants: z,
           className: p(
             "absolute z-popover mt-ds-02 w-full overflow-auto rounded-ds-md border border-surface-border-strong bg-surface-overlay shadow-raised-hover",
             "max-h-60"
           ),
           children: n.length === 0 ? /* @__PURE__ */ d(
-            y.li,
+            v.li,
             {
               initial: { opacity: 0 },
               animate: { opacity: 1 },
-              transition: j.fade,
+              transition: L.fade,
               className: "px-ds-04 py-ds-03 text-ds-md text-surface-fg-muted",
               children: R
             }
-          ) : n.map((e, r) => /* @__PURE__ */ d(
-            y.li,
+          ) : n.map((e, a) => /* @__PURE__ */ d(
+            v.li,
             {
-              id: `${D}-${r}`,
+              id: `${k}-${a}`,
               role: "option",
-              "aria-selected": s === r,
-              variants: z,
+              "aria-selected": s === a,
+              variants: B,
               className: p(
                 "cursor-pointer px-ds-04 py-ds-03 text-ds-md text-surface-fg transition-colors duration-fast-01",
-                s === r && "bg-accent-3",
+                s === a && "bg-accent-3",
                 u?.value === e.value && "font-semibold"
               ),
               onMouseDown: (c) => c.preventDefault(),
@@ -134,7 +133,7 @@ const q = {
               onKeyDown: (c) => {
                 (c.key === "Enter" || c.key === " ") && (c.preventDefault(), m(e));
               },
-              onMouseEnter: () => o(r),
+              onMouseEnter: () => o(a),
               children: e.label
             },
             e.value
@@ -144,7 +143,7 @@ const q = {
     ] });
   }
 );
-B.displayName = "Autocomplete";
+F.displayName = "Autocomplete";
 export {
-  B as Autocomplete
+  F as Autocomplete
 };

package/dist/ui/badge.d.ts

@@ -3,9 +3,109 @@ import { VariantProps } from 'class-variance-authority';
 import { BadgeIndicator } from './badge-indicator';
 import { BadgeGroup } from './badge-group';
 import * as React from 'react';
+declare const colorMap: {
+    readonly default: {
+        readonly bg: "bg-surface-raised-hover";
+        readonly fg: "text-surface-fg-muted";
+        readonly border: "border-surface-border-strong";
+        readonly solid: "bg-neutral-5";
+        readonly solidFg: "text-surface-fg";
+    };
+    readonly accent: {
+        readonly bg: "bg-accent-3";
+        readonly fg: "text-accent-11";
+        readonly border: "border-accent-7";
+        readonly solid: "bg-accent-9";
+        readonly solidFg: "text-accent-fg";
+    };
+    readonly error: {
+        readonly bg: "bg-error-3";
+        readonly fg: "text-error-11";
+        readonly border: "border-error-7";
+        readonly solid: "bg-error-9";
+        readonly solidFg: "text-error-fg";
+    };
+    readonly success: {
+        readonly bg: "bg-success-3";
+        readonly fg: "text-success-11";
+        readonly border: "border-success-7";
+        readonly solid: "bg-success-9";
+        readonly solidFg: "text-success-fg";
+    };
+    readonly warning: {
+        readonly bg: "bg-warning-3";
+        readonly fg: "text-warning-11";
+        readonly border: "border-warning-7";
+        readonly solid: "bg-warning-9";
+        readonly solidFg: "text-warning-fg";
+    };
+    readonly info: {
+        readonly bg: "bg-info-3";
+        readonly fg: "text-info-11";
+        readonly border: "border-info-7";
+        readonly solid: "bg-info-9";
+        readonly solidFg: "text-info-fg";
+    };
+    readonly neutral: {
+        readonly bg: "bg-surface-raised-hover";
+        readonly fg: "text-surface-fg-muted";
+        readonly border: "border-surface-border-strong";
+        readonly solid: "bg-neutral-5";
+        readonly solidFg: "text-surface-fg";
+    };
+    readonly teal: {
+        readonly bg: "bg-category-teal-3";
+        readonly fg: "text-category-teal-11";
+        readonly border: "border-category-teal-7";
+        readonly solid: "bg-category-teal-9";
+        readonly solidFg: "text-white";
+    };
+    readonly amber: {
+        readonly bg: "bg-category-amber-3";
+        readonly fg: "text-category-amber-11";
+        readonly border: "border-category-amber-7";
+        readonly solid: "bg-category-amber-9";
+        readonly solidFg: "text-white";
+    };
+    readonly slate: {
+        readonly bg: "bg-category-slate-3";
+        readonly fg: "text-category-slate-11";
+        readonly border: "border-category-slate-7";
+        readonly solid: "bg-category-slate-9";
+        readonly solidFg: "text-white";
+    };
+    readonly indigo: {
+        readonly bg: "bg-category-indigo-3";
+        readonly fg: "text-category-indigo-11";
+        readonly border: "border-category-indigo-7";
+        readonly solid: "bg-category-indigo-9";
+        readonly solidFg: "text-white";
+    };
+    readonly cyan: {
+        readonly bg: "bg-category-cyan-3";
+        readonly fg: "text-category-cyan-11";
+        readonly border: "border-category-cyan-7";
+        readonly solid: "bg-category-cyan-9";
+        readonly solidFg: "text-white";
+    };
+    readonly orange: {
+        readonly bg: "bg-category-orange-3";
+        readonly fg: "text-category-orange-11";
+        readonly border: "border-category-orange-7";
+        readonly solid: "bg-category-orange-9";
+        readonly solidFg: "text-white";
+    };
+    readonly emerald: {
+        readonly bg: "bg-category-emerald-3";
+        readonly fg: "text-category-emerald-11";
+        readonly border: "border-category-emerald-7";
+        readonly solid: "bg-category-emerald-9";
+        readonly solidFg: "text-white";
+    };
+};
+type BadgeColor = keyof typeof colorMap | 'custom';
 declare const badgeVariants: (props?: ({
     variant?: "outline" | "solid" | "subtle" | "soft" | null | undefined;
-    color?: "default" | "accent" | "success" | "error" | "custom" | "cyan" | "indigo" | "orange" | "teal" | "info" | "warning" | "neutral" | "amber" | "slate" | "emerald" | null | undefined;
     size?: "xs" | "sm" | "md" | "lg" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 /**
@@ -32,6 +132,8 @@ declare const badgeVariants: (props?: ({
  * </Badge>
  */
 interface BadgeProps extends Omit<React.HTMLAttributes<HTMLElement>, 'color'>, VariantProps<typeof badgeVariants> {
+    /** Semantic intent or category color. Use `"custom"` with `--badge-color` CSS variable. */
+    color?: BadgeColor;
     asChild?: boolean;
     startIcon?: React.ReactElement | null;
     endIcon?: React.ReactElement | null;
@@ -52,5 +154,5 @@ declare const BadgeCompound: React.ForwardRefExoticComponent<BadgeProps & React.
     Indicator: typeof BadgeIndicator;
     Group: typeof BadgeGroup;
 };
-export { BadgeCompound as Badge, badgeVariants, type BadgeProps };
+export { BadgeCompound as Badge, badgeVariants, type BadgeProps, type BadgeColor };
 //# sourceMappingURL=badge.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../src/ui/badge.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAIjE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,QAAA,MAAM,aAAa;;;;8EAyGlB,CAAA;AA0BD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,UAAU,UACR,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC,EACtD,YAAY,CAAC,OAAO,aAAa,CAAC;IACpC,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,SAAS,CAAC,EAAE,KAAK,CAAC,YAAY,GAAG,IAAI,CAAA;IACrC,OAAO,CAAC,EAAE,KAAK,CAAC,YAAY,GAAG,IAAI,CAAA;IACnC,GAAG,CAAC,EAAE,OAAO,CAAA;IACb,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB;AA8LD,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAClD,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAE1C,QAAA,MAAM,aAAa;;;CAGjB,CAAA;AAEF,OAAO,EAAE,aAAa,IAAI,KAAK,EAAE,aAAa,EAAE,KAAK,UAAU,EAAE,CAAA"}
+{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../src/ui/badge.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAIjE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B,QAAA,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAeJ,CAAA;AAEV,KAAK,UAAU,GAAG,MAAM,OAAO,QAAQ,GAAG,QAAQ,CAAA;AAclD,QAAA,MAAM,aAAa;;;8EAsBlB,CAAA;AA0BD;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,UAAU,UACR,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,OAAO,CAAC,EACtD,YAAY,CAAC,OAAO,aAAa,CAAC;IACpC,2FAA2F;IAC3F,KAAK,CAAC,EAAE,UAAU,CAAA;IAClB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,SAAS,CAAC,EAAE,KAAK,CAAC,YAAY,GAAG,IAAI,CAAA;IACrC,OAAO,CAAC,EAAE,KAAK,CAAC,YAAY,GAAG,IAAI,CAAA;IACnC,GAAG,CAAC,EAAE,OAAO,CAAA;IACb,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB;AAgMD,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAClD,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAE1C,QAAA,MAAM,aAAa;;;CAGjB,CAAA;AAEF,OAAO,EAAE,aAAa,IAAI,KAAK,EAAE,aAAa,EAAE,KAAK,UAAU,EAAE,KAAK,UAAU,EAAE,CAAA"}

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

@@ -1 +1 @@
-{"version":3,"file":"banner.d.ts","sourceRoot":"","sources":["../../src/ui/banner.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAMjE,QAAA,MAAM,cAAc;;8EAmBnB,CAAA;AAUD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,EACzD,YAAY,CAAC,OAAO,cAAc,CAAC;IACrC,wCAAwC;IACxC,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,iGAAiG;IACjG,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;CACvB;AAED,QAAA,MAAM,MAAM,oFA0CX,CAAA;AAGD,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAA"}
+{"version":3,"file":"banner.d.ts","sourceRoot":"","sources":["../../src/ui/banner.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAMjE,QAAA,MAAM,cAAc;;8EAmBnB,CAAA;AAUD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,EACzD,YAAY,CAAC,OAAO,cAAc,CAAC;IACrC,wCAAwC;IACxC,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,iGAAiG;IACjG,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;CACvB;AAED,QAAA,MAAM,MAAM,oFA2CX,CAAA;AAGD,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAA"}