@devalok/shilp-sutra 0.17.2 → 0.18.0

package/dist/ui/autocomplete.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../src/ui/avatar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,eAAe,MAAM,0BAA0B,CAAA;AAC3D,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAIjE,eAAO,MAAM,cAAc;;;8EAmB1B,CAAA;AAED,MAAM,MAAM,YAAY,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAA;AA4BjE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,EAAE,UAAU,CAAC,EACnF,YAAY,CAAC,OAAO,cAAc,CAAC;IACrC,8EAA8E;IAC9E,MAAM,CAAC,EAAE,YAAY,CAAA;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B;AAED,QAAA,MAAM,MAAM,qFAwBV,CAAA;AAGF,QAAA,MAAM,WAAW,gKASf,CAAA;AAGF,QAAA,MAAM,cAAc,iKAYlB,CAAA;AAGF,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,cAAc,EAAE,CAAA"}
+{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../src/ui/avatar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,eAAe,MAAM,0BAA0B,CAAA;AAC3D,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAMjE,eAAO,MAAM,cAAc;;;8EAmB1B,CAAA;AAED,MAAM,MAAM,YAAY,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAA;AA4BjE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,EAAE,UAAU,CAAC,EACnF,YAAY,CAAC,OAAO,cAAc,CAAC;IACrC,8EAA8E;IAC9E,MAAM,CAAC,EAAE,YAAY,CAAA;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B;AAED,QAAA,MAAM,MAAM,qFAwBV,CAAA;AAGF,QAAA,MAAM,WAAW,gKAgBf,CAAA;AAGF,QAAA,MAAM,cAAc,iKAYlB,CAAA;AAGF,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,cAAc,EAAE,CAAA"}

package/dist/ui/avatar.js

@@ -1,10 +1,12 @@
 "use client";
 import { jsxs as p, jsx as l } from "react/jsx-runtime";
-import * as i from "react";
-import { R as n, I as o, F as t } from "../_chunks/primitives.js";
-import { e as u } from "../_chunks/vendor-utils.js";
+import * as o from "react";
+import { R as i, I as n, F as t } from "../_chunks/primitives.js";
+import { ag as u } from "../_chunks/vendor-utils.js";
+import { t as w } from "../_chunks/motion2.js";
 import { c as r } from "../_chunks/utils.js";
-const w = u(
+import { m as h } from "../_chunks/motion.js";
+const x = u(
   "relative flex shrink-0 overflow-hidden",
   {
     variants: {
@@ -23,28 +25,28 @@ const w = u(
     },
     defaultVariants: { size: "md", shape: "circle" }
   }
-), h = {
-  online: "bg-success",
-  offline: "bg-layer-03",
-  busy: "bg-error",
-  away: "bg-warning"
-}, x = {
+), g = {
+  online: "bg-success-9",
+  offline: "bg-surface-3",
+  busy: "bg-error-9",
+  away: "bg-warning-9"
+}, b = {
   online: "Online",
   offline: "Offline",
   busy: "Busy",
   away: "Away"
-}, b = {
+}, y = {
   xs: "h-ds-02b w-ds-02b",
   sm: "h-[8px] w-[8px]",
   md: "h-ds-03 w-ds-03",
   lg: "h-[12px] w-[12px]",
   xl: "h-ds-04 w-ds-04"
-}, g = i.forwardRef(({ className: a, size: s, shape: e, status: d, children: m, ...c }, f) => /* @__PURE__ */ p("span", { className: "relative inline-flex shrink-0", children: [
+}, N = o.forwardRef(({ className: s, size: a, shape: e, status: d, children: m, ...c }, f) => /* @__PURE__ */ p("span", { className: "relative inline-flex shrink-0", children: [
   /* @__PURE__ */ l(
-    n,
+    i,
     {
       ref: f,
-      className: r(w({ size: s, shape: e }), a),
+      className: r(x({ size: a, shape: e }), s),
       ...c,
       children: m
     }
@@ -53,40 +55,49 @@ const w = u(
     "span",
     {
       className: r(
-        "absolute bottom-0 right-0 rounded-ds-full ring-2 ring-layer-01",
-        h[d],
-        b[s ?? "md"]
+        "absolute bottom-0 right-0 rounded-ds-full ring-2 ring-surface-1",
+        g[d],
+        y[a ?? "md"]
       ),
       role: "img",
-      "aria-label": x[d]
+      "aria-label": b[d]
     }
   )
 ] }));
-g.displayName = n.displayName;
-const y = i.forwardRef(({ className: a, ...s }, e) => /* @__PURE__ */ l(
-  o,
+N.displayName = i.displayName;
+const v = o.forwardRef(({ className: s, ...a }, e) => /* @__PURE__ */ l(
+  h.span,
   {
-    ref: e,
-    className: r("aspect-square h-full w-full", a),
-    ...s
+    initial: { opacity: 0 },
+    animate: { opacity: 1 },
+    transition: w.fade,
+    className: "h-full w-full",
+    children: /* @__PURE__ */ l(
+      n,
+      {
+        ref: e,
+        className: r("aspect-square h-full w-full", s),
+        ...a
+      }
+    )
   }
 ));
-y.displayName = o.displayName;
-const v = i.forwardRef(({ className: a, ...s }, e) => /* @__PURE__ */ l(
+v.displayName = n.displayName;
+const R = o.forwardRef(({ className: s, ...a }, e) => /* @__PURE__ */ l(
   t,
   {
     ref: e,
     className: r(
-      "flex h-full w-full items-center justify-center rounded-ds-full bg-interactive-subtle text-interactive",
-      a
+      "flex h-full w-full items-center justify-center rounded-ds-full bg-accent-2 text-accent-11",
+      s
     ),
-    ...s
+    ...a
   }
 ));
-v.displayName = t.displayName;
+R.displayName = t.displayName;
 export {
-  g as Avatar,
-  v as AvatarFallback,
-  y as AvatarImage,
-  w as avatarVariants
+  N as Avatar,
+  R as AvatarFallback,
+  v as AvatarImage,
+  x as avatarVariants
 };

package/dist/ui/badge.d.ts

@@ -2,7 +2,7 @@
 import { VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 declare const badgeVariants: (props?: ({
-    variant?: "solid" | "subtle" | "outline" | "secondary" | "destructive" | null | undefined;
+    variant?: "outline" | "solid" | "subtle" | "secondary" | "destructive" | null | undefined;
     color?: "accent" | "default" | "error" | "cyan" | "indigo" | "orange" | "teal" | "info" | "success" | "warning" | "brand" | "amber" | "slate" | "emerald" | null | undefined;
     size?: "xs" | "sm" | "md" | "lg" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;

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,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAGjE,QAAA,MAAM,aAAa;;;;8EA4FlB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,MAAM,WAAW,UACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,OAAO,CAAC,EAC1D,YAAY,CAAC,OAAO,aAAa,CAAC;IACpC,GAAG,CAAC,EAAE,OAAO,CAAA;IACb,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;CACvB;AAED,QAAA,MAAM,KAAK,oFAwBV,CAAA;AAGD,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,CAAA"}
+{"version":3,"file":"badge.d.ts","sourceRoot":"","sources":["../../src/ui/badge.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAIjE,QAAA,MAAM,aAAa;;;;8EA4FlB,CAAA;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,MAAM,WAAW,UACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC,EAAE,OAAO,CAAC,EAC1D,YAAY,CAAC,OAAO,aAAa,CAAC;IACpC,GAAG,CAAC,EAAE,OAAO,CAAA;IACb,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;CACvB;AAED,QAAA,MAAM,KAAK,oFA4BV,CAAA;AAGD,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,CAAA"}

package/dist/ui/badge.js

@@ -1,10 +1,11 @@
 "use client";
-import { jsxs as d, jsx as r } from "react/jsx-runtime";
-import { IconX as b } from "@tabler/icons-react";
-import * as g from "react";
-import { e as x } from "../_chunks/vendor-utils.js";
-import { c as m } from "../_chunks/utils.js";
-const u = x(
+import { jsxs as r, jsx as a } from "react/jsx-runtime";
+import { IconX as g } from "@tabler/icons-react";
+import * as b from "react";
+import { ag as m } from "../_chunks/vendor-utils.js";
+import { c as u } from "../_chunks/utils.js";
+import { m as f } from "../_chunks/motion.js";
+const x = m(
   "inline-flex items-center gap-ds-02b font-sans font-medium rounded-ds-full border",
   {
     variants: {
@@ -42,55 +43,55 @@ const u = x(
     },
     compoundVariants: [
       // subtle (surface bg)
-      { variant: "subtle", color: "default", className: "bg-field text-text-secondary border-border" },
+      { variant: "subtle", color: "default", className: "bg-surface-3 text-surface-fg-muted border-surface-border-strong" },
       // "secondary" alias → same as subtle + default
-      { variant: "secondary", color: "default", className: "bg-field text-text-secondary border-border" },
+      { variant: "secondary", color: "default", className: "bg-surface-3 text-surface-fg-muted border-surface-border-strong" },
       // "destructive" alias → solid + error
-      { variant: "destructive", color: "default", className: "bg-error text-text-on-color border-transparent" },
-      { variant: "destructive", color: "error", className: "bg-error text-text-on-color border-transparent" },
-      { variant: "subtle", color: "info", className: "bg-info-surface text-info-text border-info-border" },
-      { variant: "subtle", color: "success", className: "bg-success-surface text-success-text border-success-border" },
-      { variant: "subtle", color: "error", className: "bg-error-surface text-error-text border-error-border" },
-      { variant: "subtle", color: "warning", className: "bg-warning-surface text-warning-text border-warning-border" },
-      { variant: "subtle", color: "brand", className: "bg-interactive-subtle text-text-brand border-interactive" },
-      { variant: "subtle", color: "accent", className: "bg-accent-subtle text-accent border-accent" },
-      { variant: "subtle", color: "teal", className: "bg-category-teal-surface text-category-teal-text border-category-teal-border" },
-      { variant: "subtle", color: "amber", className: "bg-category-amber-surface text-category-amber-text border-category-amber-border" },
-      { variant: "subtle", color: "slate", className: "bg-category-slate-surface text-category-slate-text border-category-slate-border" },
-      { variant: "subtle", color: "indigo", className: "bg-category-indigo-surface text-category-indigo-text border-category-indigo-border" },
-      { variant: "subtle", color: "cyan", className: "bg-category-cyan-surface text-category-cyan-text border-category-cyan-border" },
-      { variant: "subtle", color: "orange", className: "bg-category-orange-surface text-category-orange-text border-category-orange-border" },
-      { variant: "subtle", color: "emerald", className: "bg-category-emerald-surface text-category-emerald-text border-category-emerald-border" },
+      { variant: "destructive", color: "default", className: "bg-error-9 text-accent-fg border-transparent" },
+      { variant: "destructive", color: "error", className: "bg-error-9 text-accent-fg border-transparent" },
+      { variant: "subtle", color: "info", className: "bg-info-3 text-info-11 border-info-7" },
+      { variant: "subtle", color: "success", className: "bg-success-3 text-success-11 border-success-7" },
+      { variant: "subtle", color: "error", className: "bg-error-3 text-error-11 border-error-7" },
+      { variant: "subtle", color: "warning", className: "bg-warning-3 text-warning-11 border-warning-7" },
+      { variant: "subtle", color: "brand", className: "bg-accent-2 text-accent-11 border-accent-7" },
+      { variant: "subtle", color: "accent", className: "bg-accent-2 text-accent-11 border-accent-7" },
+      { variant: "subtle", color: "teal", className: "bg-category-teal-3 text-category-teal-11 border-category-teal-7" },
+      { variant: "subtle", color: "amber", className: "bg-category-amber-3 text-category-amber-11 border-category-amber-7" },
+      { variant: "subtle", color: "slate", className: "bg-category-slate-3 text-category-slate-11 border-category-slate-7" },
+      { variant: "subtle", color: "indigo", className: "bg-category-indigo-3 text-category-indigo-11 border-category-indigo-7" },
+      { variant: "subtle", color: "cyan", className: "bg-category-cyan-3 text-category-cyan-11 border-category-cyan-7" },
+      { variant: "subtle", color: "orange", className: "bg-category-orange-3 text-category-orange-11 border-category-orange-7" },
+      { variant: "subtle", color: "emerald", className: "bg-category-emerald-3 text-category-emerald-11 border-category-emerald-7" },
       // solid (filled bg)
-      { variant: "solid", color: "default", className: "bg-interactive text-text-on-color border-transparent" },
-      { variant: "solid", color: "info", className: "bg-info text-text-on-color border-transparent" },
-      { variant: "solid", color: "success", className: "bg-success text-text-on-color border-transparent" },
-      { variant: "solid", color: "error", className: "bg-error text-text-on-color border-transparent" },
-      { variant: "solid", color: "warning", className: "bg-warning text-text-on-color border-transparent" },
-      { variant: "solid", color: "brand", className: "bg-interactive text-text-on-color border-transparent" },
-      { variant: "solid", color: "accent", className: "bg-accent text-text-on-color border-transparent" },
-      { variant: "solid", color: "teal", className: "bg-category-teal text-text-on-color border-transparent" },
-      { variant: "solid", color: "amber", className: "bg-category-amber text-text-on-color border-transparent" },
-      { variant: "solid", color: "slate", className: "bg-category-slate text-text-on-color border-transparent" },
-      { variant: "solid", color: "indigo", className: "bg-category-indigo text-text-on-color border-transparent" },
-      { variant: "solid", color: "cyan", className: "bg-category-cyan text-text-on-color border-transparent" },
-      { variant: "solid", color: "orange", className: "bg-category-orange text-text-on-color border-transparent" },
-      { variant: "solid", color: "emerald", className: "bg-category-emerald text-text-on-color border-transparent" },
+      { variant: "solid", color: "default", className: "bg-accent-9 text-accent-fg border-transparent" },
+      { variant: "solid", color: "info", className: "bg-info-9 text-accent-fg border-transparent" },
+      { variant: "solid", color: "success", className: "bg-success-9 text-accent-fg border-transparent" },
+      { variant: "solid", color: "error", className: "bg-error-9 text-accent-fg border-transparent" },
+      { variant: "solid", color: "warning", className: "bg-warning-9 text-accent-fg border-transparent" },
+      { variant: "solid", color: "brand", className: "bg-accent-9 text-accent-fg border-transparent" },
+      { variant: "solid", color: "accent", className: "bg-accent-9 text-accent-fg border-transparent" },
+      { variant: "solid", color: "teal", className: "bg-category-teal-9 text-accent-fg border-transparent" },
+      { variant: "solid", color: "amber", className: "bg-category-amber-9 text-accent-fg border-transparent" },
+      { variant: "solid", color: "slate", className: "bg-category-slate-9 text-accent-fg border-transparent" },
+      { variant: "solid", color: "indigo", className: "bg-category-indigo-9 text-accent-fg border-transparent" },
+      { variant: "solid", color: "cyan", className: "bg-category-cyan-9 text-accent-fg border-transparent" },
+      { variant: "solid", color: "orange", className: "bg-category-orange-9 text-accent-fg border-transparent" },
+      { variant: "solid", color: "emerald", className: "bg-category-emerald-9 text-accent-fg border-transparent" },
       // outline (border only)
-      { variant: "outline", color: "default", className: "bg-transparent text-text-secondary border-border" },
-      { variant: "outline", color: "info", className: "bg-transparent text-info-text border-info-border" },
-      { variant: "outline", color: "success", className: "bg-transparent text-success-text border-success-border" },
-      { variant: "outline", color: "error", className: "bg-transparent text-error-text border-error-border" },
-      { variant: "outline", color: "warning", className: "bg-transparent text-warning-text border-warning-border" },
-      { variant: "outline", color: "brand", className: "bg-transparent text-text-brand border-interactive" },
-      { variant: "outline", color: "accent", className: "bg-transparent text-accent border-accent" },
-      { variant: "outline", color: "teal", className: "bg-transparent text-category-teal-text border-category-teal-border" },
-      { variant: "outline", color: "amber", className: "bg-transparent text-category-amber-text border-category-amber-border" },
-      { variant: "outline", color: "slate", className: "bg-transparent text-category-slate-text border-category-slate-border" },
-      { variant: "outline", color: "indigo", className: "bg-transparent text-category-indigo-text border-category-indigo-border" },
-      { variant: "outline", color: "cyan", className: "bg-transparent text-category-cyan-text border-category-cyan-border" },
-      { variant: "outline", color: "orange", className: "bg-transparent text-category-orange-text border-category-orange-border" },
-      { variant: "outline", color: "emerald", className: "bg-transparent text-category-emerald-text border-category-emerald-border" }
+      { variant: "outline", color: "default", className: "bg-transparent text-surface-fg-muted border-surface-border-strong" },
+      { variant: "outline", color: "info", className: "bg-transparent text-info-11 border-info-7" },
+      { variant: "outline", color: "success", className: "bg-transparent text-success-11 border-success-7" },
+      { variant: "outline", color: "error", className: "bg-transparent text-error-11 border-error-7" },
+      { variant: "outline", color: "warning", className: "bg-transparent text-warning-11 border-warning-7" },
+      { variant: "outline", color: "brand", className: "bg-transparent text-accent-11 border-accent-7" },
+      { variant: "outline", color: "accent", className: "bg-transparent text-accent-11 border-accent-7" },
+      { variant: "outline", color: "teal", className: "bg-transparent text-category-teal-11 border-category-teal-7" },
+      { variant: "outline", color: "amber", className: "bg-transparent text-category-amber-11 border-category-amber-7" },
+      { variant: "outline", color: "slate", className: "bg-transparent text-category-slate-11 border-category-slate-7" },
+      { variant: "outline", color: "indigo", className: "bg-transparent text-category-indigo-11 border-category-indigo-7" },
+      { variant: "outline", color: "cyan", className: "bg-transparent text-category-cyan-11 border-category-cyan-7" },
+      { variant: "outline", color: "orange", className: "bg-transparent text-category-orange-11 border-category-orange-7" },
+      { variant: "outline", color: "emerald", className: "bg-transparent text-category-emerald-11 border-category-emerald-7" }
     ],
     defaultVariants: {
       variant: "subtle",
@@ -98,24 +99,28 @@ const u = x(
       size: "md"
     }
   }
-), v = g.forwardRef(
-  ({ className: t, variant: a, color: o, size: s, dot: n, onDismiss: e, children: c, ...l }, i) => /* @__PURE__ */ d("span", { ref: i, className: m(u({ variant: a, color: o, size: s }), t), ...l, children: [
-    n && /* @__PURE__ */ r(
-      "span",
-      {
-        className: "h-ds-02b w-ds-02b rounded-ds-full bg-current opacity-[0.7] shrink-0 animate-pulse-ring",
-        "aria-hidden": "true"
-      }
-    ),
-    c,
-    e && /* @__PURE__ */ r(
+), v = b.forwardRef(
+  ({ className: t, variant: o, color: s, size: n, dot: c, onDismiss: e, children: l, ...i }, d) => /* @__PURE__ */ r("span", { ref: d, className: u(x({ variant: o, color: s, size: n }), t), ...i, children: [
+    c && /* @__PURE__ */ r("span", { className: "relative inline-flex h-ds-02b w-ds-02b shrink-0", "aria-hidden": "true", children: [
+      /* @__PURE__ */ a(
+        f.span,
+        {
+          className: "absolute inset-0 rounded-ds-full bg-current",
+          animate: { scale: [1, 2.5], opacity: [0.4, 0] },
+          transition: { repeat: 1 / 0, duration: 1.5, ease: "easeOut" }
+        }
+      ),
+      /* @__PURE__ */ a("span", { className: "relative h-ds-02b w-ds-02b rounded-ds-full bg-current" })
+    ] }),
+    l,
+    e && /* @__PURE__ */ a(
       "button",
       {
         type: "button",
         onClick: e,
-        className: "ml-ds-01 min-h-ds-xs min-w-ds-xs flex items-center justify-center rounded-ds-full text-icon-secondary hover:rotate-90 transition-[color,transform] duration-fast-02 hover:text-icon-primary hover:bg-field focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus",
+        className: "ml-ds-01 min-h-ds-xs min-w-ds-xs flex items-center justify-center rounded-ds-full text-surface-fg-subtle hover:rotate-90 transition-[color,transform] duration-fast-02 hover:text-surface-fg-muted hover:bg-surface-3 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-9",
         "aria-label": "Remove",
-        children: /* @__PURE__ */ r(b, { className: "h-ico-sm w-ico-sm" })
+        children: /* @__PURE__ */ a(g, { className: "h-ico-sm w-ico-sm" })
       }
     )
   ] })
@@ -123,5 +128,5 @@ const u = x(
 v.displayName = "Badge";
 export {
   v as Badge,
-  u as badgeVariants
+  x as badgeVariants
 };

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;AAGjE,QAAA,MAAM,cAAc;;8EAmBnB,CAAA;AAUD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,EACzD,YAAY,CAAC,OAAO,cAAc,CAAC;IACrC,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;CACvB;AAED,QAAA,MAAM,MAAM,oFA4BX,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;AAKjE,QAAA,MAAM,cAAc;;8EAmBnB,CAAA;AAUD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC,EACzD,YAAY,CAAC,OAAO,cAAc,CAAC;IACrC,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;CACvB;AAED,QAAA,MAAM,MAAM,oFAuCX,CAAA;AAGD,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAA"}