@devalok/shilp-sutra 0.22.2 → 0.23.0

package/dist/ui/avatar.js

@@ -1,12 +1,12 @@
 "use client";
-import { jsx as s, jsxs as R } from "react/jsx-runtime";
-import * as i from "react";
-import { F as y, J as N, K as k } from "../_chunks/primitives.js";
+import { jsx as a, jsxs as R } from "react/jsx-runtime";
+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 C } from "./lib/motion.js";
-import { cn as r } from "./lib/utils.js";
+import { springs as k } from "./lib/motion.js";
+import { cn as n } from "./lib/utils.js";
 import { m as f } from "../_chunks/framer.js";
-const A = i.createContext("circle"), x = F(
+const A = l.createContext("circle"), M = l.createContext("md"), p = F(
   "relative flex shrink-0 overflow-hidden",
   {
     variants: {
@@ -25,17 +25,17 @@ const A = i.createContext("circle"), x = 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",
   away: "Away"
-}, w = {
+}, y = {
   xs: "h-ds-02b w-ds-02b",
   sm: "h-[8px] w-[8px]",
   md: "h-ds-03 w-ds-03",
@@ -45,123 +45,130 @@ const A = i.createContext("circle"), x = F(
   lead: "ring-accent-7",
   admin: "ring-warning-7",
   client: "ring-info-7"
-}, S = {
+}, j = {
   circle: "rounded-ds-full",
   square: "rounded-ds-none",
   rounded: "rounded-ds-md"
-}, v = [
-  { bg: "bg-accent-2", text: "text-accent-11" },
-  { bg: "bg-success-2", text: "text-success-11" },
-  { bg: "bg-warning-2", text: "text-warning-11" },
-  { bg: "bg-error-2", text: "text-error-11" },
-  { bg: "bg-info-2", text: "text-info-11" },
-  { bg: "bg-cat-purple-2", text: "text-cat-purple-11" },
-  { bg: "bg-cat-pink-2", text: "text-cat-pink-11" },
-  { bg: "bg-cat-teal-2", text: "text-cat-teal-11" }
+}, q = {
+  xs: "text-[9px]",
+  sm: "text-ds-xs",
+  md: "text-ds-sm",
+  lg: "text-ds-md",
+  xl: "text-ds-lg"
+}, w = [
+  { bg: "bg-accent-3", text: "text-accent-11" },
+  { bg: "bg-success-3", text: "text-success-11" },
+  { bg: "bg-warning-3", text: "text-warning-11" },
+  { bg: "bg-error-3", text: "text-error-11" },
+  { bg: "bg-info-3", text: "text-info-11" },
+  { bg: "bg-category-teal-3", text: "text-category-teal-11" },
+  { bg: "bg-category-indigo-3", text: "text-category-indigo-11" },
+  { bg: "bg-category-cyan-3", text: "text-category-cyan-11" }
 ];
-function j(o) {
-  let a = 5381;
-  for (let e = 0; e < o.length; e++)
-    a = (a << 5) + a + o.charCodeAt(e) | 0;
-  const n = Math.abs(a) % v.length;
-  return v[n];
+function I(o) {
+  let e = 5381;
+  for (let t = 0; t < o.length; t++)
+    e = (e << 5) + e + o.charCodeAt(t) | 0;
+  const r = Math.abs(e) % w.length;
+  return w[r];
 }
-const q = i.forwardRef(({ className: o, size: a, shape: n, status: e, ring: l, badge: t, loading: g, children: d, ...c }, u) => {
-  const m = n ?? "circle", p = l && l !== "none" ? r("ring-2 ring-offset-2 ring-offset-surface-2", O[l], S[m]) : void 0;
-  if (g)
-    return /* @__PURE__ */ s("span", { ref: u, className: r("relative inline-flex shrink-0", p), children: /* @__PURE__ */ s(
+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: n("relative inline-flex shrink-0", u), children: /* @__PURE__ */ a(
       "span",
       {
-        className: r(x({ size: a, 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 M = t !== void 0 && t !== 0;
-  return /* @__PURE__ */ s(A.Provider, { value: m, children: /* @__PURE__ */ R("span", { className: r("relative inline-flex shrink-0", p), children: [
-    /* @__PURE__ */ s(
-      y,
+  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: n("relative inline-flex shrink-0", u), children: [
+    /* @__PURE__ */ a(
+      v,
       {
-        ref: u,
-        className: r(x({ size: a, shape: n }), o),
+        ref: g,
+        className: n(p({ size: e, shape: r }), o),
         ...c,
         children: d
       }
     ),
-    e && (e === "online" ? /* @__PURE__ */ s(
+    t && (t === "online" ? /* @__PURE__ */ a(
       f.span,
       {
-        className: r("absolute bottom-0 right-0 rounded-ds-full ring-2 ring-surface-2", b[e], w[a ?? "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[e]
+        "aria-label": b[t]
       }
-    ) : /* @__PURE__ */ s("span", { className: r("absolute bottom-0 right-0 rounded-ds-full ring-2 ring-surface-2", b[e], w[a ?? "md"]), role: "img", "aria-label": h[e] })),
-    M && (t === "dot" ? /* @__PURE__ */ s(
+    ) : /* @__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"
       }
-    ) : typeof t == "number" ? /* @__PURE__ */ s(
+    ) : typeof s == "number" ? /* @__PURE__ */ a(
       f.span,
       {
         initial: { scale: 0 },
         animate: { scale: 1 },
-        transition: C.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",
+        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-raised",
         "data-slot": "avatar-badge",
         role: "status",
-        "aria-label": `${t > 99 ? "99+" : t} notifications`,
-        children: t > 99 ? "99+" : t
+        "aria-label": `${s > 99 ? "99+" : s} notifications`,
+        children: s > 99 ? "99+" : s
       }
-    ) : /* @__PURE__ */ s("span", { className: "absolute -right-1 -top-1", "data-slot": "avatar-badge-custom", children: t }))
-  ] }) });
+    ) : /* @__PURE__ */ a("span", { className: "absolute -right-1 -top-1", "data-slot": "avatar-badge-custom", children: s }))
+  ] }) }) });
 });
-q.displayName = y.displayName;
-const I = i.forwardRef(({ className: o, ...a }, n) => /* @__PURE__ */ s(
+L.displayName = v.displayName;
+const B = l.forwardRef(({ className: o, ...e }, r) => /* @__PURE__ */ a(
   f.span,
   {
     initial: { opacity: 0, scale: 0.96 },
     animate: { opacity: 1, scale: 1 },
-    transition: C.smooth,
+    transition: k.smooth,
     className: "absolute inset-0 h-full w-full",
-    children: /* @__PURE__ */ s(
+    children: /* @__PURE__ */ a(
       N,
       {
-        ref: n,
-        className: r("aspect-square h-full w-full", o),
-        ...a
+        ref: r,
+        className: n("aspect-square h-full w-full", o),
+        ...e
       }
     )
   }
 ));
-I.displayName = N.displayName;
-const L = i.forwardRef(({ className: o, colorSeed: a, children: n, ...e }, l) => {
-  const t = typeof n == "string" ? n : "", d = j(a ?? t), c = i.useContext(A), u = c === "square" ? "rounded-ds-none" : c === "rounded" ? "rounded-ds-md" : "rounded-ds-full", m = t.length === 1 ? "tracking-wide" : "tracking-normal";
-  return /* @__PURE__ */ s(
-    k,
+B.displayName = N.displayName;
+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: l,
+      ref: i,
       "data-slot": "avatar-fallback",
-      className: r(
-        "flex h-full w-full items-center justify-center",
-        u,
+      className: n(
+        "flex h-full w-full items-center justify-center font-semibold",
+        m,
+        q[g],
         d.bg,
         d.text,
-        m,
+        u,
         o
       ),
-      ...e,
-      children: n
+      ...t,
+      children: r
     }
   );
 });
-L.displayName = k.displayName;
+z.displayName = C.displayName;
 export {
-  q as Avatar,
-  L as AvatarFallback,
-  I as AvatarImage,
-  x as avatarVariants
+  L as Avatar,
+  z as AvatarFallback,
+  B as AvatarImage,
+  p as avatarVariants
 };

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,