@devalok/shilp-sutra 0.22.3 → 0.23.0

package/dist/ui/avatar.js

@@ -4,7 +4,7 @@ import * as l from "react";
 import { F as v, J as N, K as C } from "../_chunks/primitives.js";
 import { ag as F } from "../_chunks/vendor-utils.js";
 import { springs as k } from "./lib/motion.js";
-import { cn as r } from "./lib/utils.js";
+import { cn as n } from "./lib/utils.js";
 import { m as f } from "../_chunks/framer.js";
 const A = l.createContext("circle"), M = l.createContext("md"), p = F(
   "relative flex shrink-0 overflow-hidden",
@@ -25,12 +25,12 @@ const A = l.createContext("circle"), M = l.createContext("md"), p = F(
     },
     defaultVariants: { size: "md", shape: "circle" }
   }
-), b = {
+), h = {
   online: "bg-success-9",
-  offline: "bg-surface-3",
+  offline: "bg-surface-raised-hover",
   busy: "bg-error-9",
   away: "bg-warning-9"
-}, h = {
+}, b = {
   online: "Online",
   offline: "Offline",
   busy: "Busy",
@@ -69,26 +69,26 @@ function I(o) {
   let e = 5381;
   for (let t = 0; t < o.length; t++)
     e = (e << 5) + e + o.charCodeAt(t) | 0;
-  const n = Math.abs(e) % w.length;
-  return w[n];
+  const r = Math.abs(e) % w.length;
+  return w[r];
 }
-const L = l.forwardRef(({ className: o, size: e, shape: n, status: t, ring: i, badge: s, loading: x, children: d, ...c }, g) => {
-  const m = n ?? "circle", u = i && i !== "none" ? r("ring-2 ring-offset-2 ring-offset-surface-2", O[i], j[m]) : void 0;
+const L = l.forwardRef(({ className: o, size: e, shape: r, status: t, ring: i, badge: s, loading: x, children: d, ...c }, g) => {
+  const m = r ?? "circle", u = i && i !== "none" ? n("ring-2 ring-offset-2 ring-offset-surface-raised", O[i], j[m]) : void 0;
   if (x)
-    return /* @__PURE__ */ a("span", { ref: g, className: r("relative inline-flex shrink-0", u), children: /* @__PURE__ */ a(
+    return /* @__PURE__ */ a("span", { ref: g, className: n("relative inline-flex shrink-0", u), children: /* @__PURE__ */ a(
       "span",
       {
-        className: r(p({ size: e, shape: n }), "animate-pulse bg-surface-3"),
+        className: n(p({ size: e, shape: r }), "animate-pulse bg-surface-raised-hover"),
         "data-slot": "avatar-skeleton"
       }
     ) });
   const S = s !== void 0 && s !== 0;
-  return /* @__PURE__ */ a(A.Provider, { value: m, children: /* @__PURE__ */ a(M.Provider, { value: e ?? "md", children: /* @__PURE__ */ R("span", { className: r("relative inline-flex shrink-0", u), children: [
+  return /* @__PURE__ */ a(A.Provider, { value: m, children: /* @__PURE__ */ a(M.Provider, { value: e ?? "md", children: /* @__PURE__ */ R("span", { className: n("relative inline-flex shrink-0", u), children: [
     /* @__PURE__ */ a(
       v,
       {
         ref: g,
-        className: r(p({ size: e, shape: n }), o),
+        className: n(p({ size: e, shape: r }), o),
         ...c,
         children: d
       }
@@ -96,17 +96,17 @@ const L = l.forwardRef(({ className: o, size: e, shape: n, status: t, ring: i, b
     t && (t === "online" ? /* @__PURE__ */ a(
       f.span,
       {
-        className: r("absolute bottom-0 right-0 rounded-ds-full ring-2 ring-surface-2", b[t], y[e ?? "md"]),
+        className: n("absolute bottom-0 right-0 rounded-ds-full ring-2 ring-surface-raised", h[t], y[e ?? "md"]),
         animate: { opacity: [1, 0.75, 1] },
         transition: { duration: 2.5, repeat: 1 / 0, ease: "easeInOut" },
         role: "img",
-        "aria-label": h[t]
+        "aria-label": b[t]
       }
-    ) : /* @__PURE__ */ a("span", { className: r("absolute bottom-0 right-0 rounded-ds-full ring-2 ring-surface-2", b[t], y[e ?? "md"]), role: "img", "aria-label": h[t] })),
+    ) : /* @__PURE__ */ a("span", { className: n("absolute bottom-0 right-0 rounded-ds-full ring-2 ring-surface-raised", h[t], y[e ?? "md"]), role: "img", "aria-label": b[t] })),
     S && (s === "dot" ? /* @__PURE__ */ a(
       "span",
       {
-        className: "absolute -right-0.5 -top-0.5 h-[8px] w-[8px] rounded-ds-full bg-error-9 ring-2 ring-surface-2",
+        className: "absolute -right-0.5 -top-0.5 h-[8px] w-[8px] rounded-ds-full bg-error-9 ring-2 ring-surface-raised",
         "data-slot": "avatar-badge-dot",
         "aria-hidden": "true"
       }
@@ -116,7 +116,7 @@ const L = l.forwardRef(({ className: o, size: e, shape: n, status: t, ring: i, b
         initial: { scale: 0 },
         animate: { scale: 1 },
         transition: k.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-2",
+        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",
         "data-slot": "avatar-badge",
         role: "status",
         "aria-label": `${s > 99 ? "99+" : s} notifications`,
@@ -126,7 +126,7 @@ const L = l.forwardRef(({ className: o, size: e, shape: n, status: t, ring: i, b
   ] }) }) });
 });
 L.displayName = v.displayName;
-const B = l.forwardRef(({ className: o, ...e }, n) => /* @__PURE__ */ a(
+const B = l.forwardRef(({ className: o, ...e }, r) => /* @__PURE__ */ a(
   f.span,
   {
     initial: { opacity: 0, scale: 0.96 },
@@ -136,22 +136,22 @@ const B = l.forwardRef(({ className: o, ...e }, n) => /* @__PURE__ */ a(
     children: /* @__PURE__ */ a(
       N,
       {
-        ref: n,
-        className: r("aspect-square h-full w-full", o),
+        ref: r,
+        className: n("aspect-square h-full w-full", o),
         ...e
       }
     )
   }
 ));
 B.displayName = N.displayName;
-const z = l.forwardRef(({ className: o, colorSeed: e, children: n, ...t }, i) => {
-  const s = typeof n == "string" ? n : "", d = I(e ?? s), c = l.useContext(A), g = l.useContext(M), m = c === "square" ? "rounded-ds-none" : c === "rounded" ? "rounded-ds-md" : "rounded-ds-full", u = s.length === 1 ? "tracking-wide" : "tracking-normal";
+const z = l.forwardRef(({ className: o, colorSeed: e, children: r, ...t }, i) => {
+  const s = typeof r == "string" ? r : "", d = I(e ?? s), c = l.useContext(A), g = l.useContext(M), m = c === "square" ? "rounded-ds-none" : c === "rounded" ? "rounded-ds-md" : "rounded-ds-full", u = s.length === 1 ? "tracking-wide" : "tracking-normal";
   return /* @__PURE__ */ a(
     C,
     {
       ref: i,
       "data-slot": "avatar-fallback",
-      className: r(
+      className: n(
         "flex h-full w-full items-center justify-center font-semibold",
         m,
         q[g],
@@ -161,7 +161,7 @@ const z = l.forwardRef(({ className: o, colorSeed: e, children: n, ...t }, i) =>
         o
       ),
       ...t,
-      children: n
+      children: r
     }
   );
 });

package/dist/ui/badge.js

@@ -43,9 +43,9 @@ const x = m(
     },
     compoundVariants: [
       // subtle (surface bg)
-      { variant: "subtle", color: "default", className: "bg-surface-3 text-surface-fg-muted border-surface-border-strong" },
+      { variant: "subtle", color: "default", className: "bg-surface-raised-hover text-surface-fg-muted border-surface-border-strong" },
       // "secondary" alias → same as subtle + default
-      { variant: "secondary", color: "default", className: "bg-surface-3 text-surface-fg-muted border-surface-border-strong" },
+      { variant: "secondary", color: "default", className: "bg-surface-raised-hover text-surface-fg-muted border-surface-border-strong" },
       // "destructive" alias → solid + error
       { 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" },

package/dist/ui/banner.js

@@ -15,7 +15,7 @@ const _ = N(
         success: "bg-success-3 border-success-7 text-success-11",
         warning: "bg-warning-3 border-warning-7 text-warning-11",
         error: "bg-error-3 border-error-7 text-error-11",
-        neutral: "bg-surface-2 border-surface-border-strong text-surface-fg [&>svg]:text-surface-fg-muted"
+        neutral: "bg-surface-raised border-surface-border-strong text-surface-fg [&>svg]:text-surface-fg-muted"
       }
     },
     defaultVariants: { color: "info" }

package/dist/ui/button.js

@@ -40,21 +40,21 @@ const R = K(
     },
     compoundVariants: [
       // solid + default (primary)
-      { variant: "solid", color: "default", className: "bg-accent-9 text-accent-fg hover:bg-accent-10 active:bg-accent-10 shadow-01 hover:shadow-brand" },
+      { variant: "solid", color: "default", className: "bg-accent-9 text-accent-fg hover:bg-accent-10 active:bg-accent-10 shadow-raised hover:shadow-brand" },
       // "default" alias → same as solid + default
-      { variant: "default", color: "default", className: "bg-accent-9 text-accent-fg hover:bg-accent-10 active:bg-accent-10 shadow-01 hover:shadow-brand" },
-      { variant: "default", color: "error", className: "bg-error-9 text-accent-fg hover:bg-error-9 active:bg-error-9 shadow-01" },
+      { variant: "default", color: "default", className: "bg-accent-9 text-accent-fg hover:bg-accent-10 active:bg-accent-10 shadow-raised hover:shadow-brand" },
+      { variant: "default", color: "error", className: "bg-error-9 text-accent-fg hover:bg-error-9 active:bg-error-9 shadow-raised" },
       // "destructive" alias → solid + error
-      { variant: "destructive", color: "default", className: "bg-error-9 text-accent-fg hover:bg-error-9 active:bg-error-9 shadow-01" },
-      { variant: "destructive", color: "error", className: "bg-error-9 text-accent-fg hover:bg-error-9 active:bg-error-9 shadow-01" },
+      { variant: "destructive", color: "default", className: "bg-error-9 text-accent-fg hover:bg-error-9 active:bg-error-9 shadow-raised" },
+      { variant: "destructive", color: "error", className: "bg-error-9 text-accent-fg hover:bg-error-9 active:bg-error-9 shadow-raised" },
       // solid + error
-      { variant: "solid", color: "error", className: "bg-error-9 text-accent-fg hover:bg-error-9 active:bg-error-9 shadow-01" },
+      { variant: "solid", color: "error", className: "bg-error-9 text-accent-fg hover:bg-error-9 active:bg-error-9 shadow-raised" },
       // outline + default (secondary)
-      { variant: "outline", color: "default", className: "bg-transparent text-accent-11 border-accent-7 hover:bg-accent-2 active:bg-surface-4" },
+      { variant: "outline", color: "default", className: "bg-transparent text-accent-11 border-accent-7 hover:bg-accent-2 active:bg-surface-raised-active" },
       // outline + error (error-ghost)
       { variant: "outline", color: "error", className: "bg-transparent text-error-11 border border-error-7 hover:bg-error-3 active:bg-error-3" },
       // ghost + default
-      { variant: "ghost", color: "default", className: "bg-transparent text-surface-fg-muted hover:bg-surface-2 hover:text-surface-fg active:bg-surface-4" },
+      { variant: "ghost", color: "default", className: "bg-transparent text-surface-fg-muted hover:bg-surface-raised hover:text-surface-fg active:bg-surface-raised-active" },
       // ghost + error
       { variant: "ghost", color: "error", className: "bg-transparent text-error-11 hover:bg-error-3 hover:text-error-11 active:bg-error-3" }
     ],

package/dist/ui/card.d.ts

@@ -8,7 +8,7 @@ declare const cardVariants: (props?: ({
  * Props for Card — a general-purpose content container with 4 elevation/style variants and
  * an optional interactive hover state.
  *
- * **Variants:** `default` (subtle border + shadow-01) | `elevated` (stronger shadow-02) |
+ * **Variants:** `default` (subtle border + shadow-raised) | `elevated` (stronger shadow-raised-hover) |
  * `outline` (2px solid border, no shadow) | `flat` (filled background, no shadow)
  *
  * **Composition:** Use sub-components `<CardHeader>`, `<CardTitle>`, `<CardDescription>`,

package/dist/ui/card.js

@@ -10,10 +10,10 @@ const p = f(
   {
     variants: {
       variant: {
-        default: "bg-surface-2 border border-surface-border shadow-01",
-        elevated: "bg-surface-2 border border-surface-border shadow-02",
+        default: "bg-surface-raised border border-surface-border shadow-raised",
+        elevated: "bg-surface-raised border border-surface-border shadow-raised-hover",
         outline: "bg-transparent border border-surface-border-strong shadow-none",
-        flat: "bg-surface-2 border-none shadow-none"
+        flat: "bg-surface-raised border-none shadow-none"
       }
     },
     defaultVariants: { variant: "default" }
@@ -22,7 +22,7 @@ const p = f(
   ({ className: a, variant: e, interactive: r, ...t }, n) => {
     const i = d(
       p({ variant: e }),
-      r && "hover:shadow-02 hover:border-surface-border-strong cursor-pointer",
+      r && "hover:shadow-raised-hover hover:border-surface-border-strong cursor-pointer transition-shadow duration-fast-02 ease-productive-standard",
       a
     );
     return r ? /* @__PURE__ */ s(
@@ -57,7 +57,7 @@ const v = o.forwardRef(({ className: a, ...e }, r) => /* @__PURE__ */ s(
   }
 ));
 v.displayName = "CardTitle";
-const g = o.forwardRef(({ className: a, ...e }, r) => /* @__PURE__ */ s(
+const w = o.forwardRef(({ className: a, ...e }, r) => /* @__PURE__ */ s(
   "div",
   {
     ref: r,
@@ -65,9 +65,9 @@ const g = o.forwardRef(({ className: a, ...e }, r) => /* @__PURE__ */ s(
     ...e
   }
 ));
-g.displayName = "CardDescription";
-const w = o.forwardRef(({ className: a, ...e }, r) => /* @__PURE__ */ s("div", { ref: r, className: d("p-ds-06 pt-0", a), ...e }));
-w.displayName = "CardContent";
+w.displayName = "CardDescription";
+const g = o.forwardRef(({ className: a, ...e }, r) => /* @__PURE__ */ s("div", { ref: r, className: d("p-ds-06 pt-0", a), ...e }));
+g.displayName = "CardContent";
 const C = o.forwardRef(({ className: a, ...e }, r) => /* @__PURE__ */ s(
   "div",
   {
@@ -79,8 +79,8 @@ const C = o.forwardRef(({ className: a, ...e }, r) => /* @__PURE__ */ s(
 C.displayName = "CardFooter";
 export {
   u as Card,
-  w as CardContent,
-  g as CardDescription,
+  g as CardContent,
+  w as CardDescription,
   C as CardFooter,
   b as CardHeader,
   v as CardTitle,