@devalok/shilp-sutra 0.22.2 → 0.23.0

package/dist/composed/loading-skeleton.js

@@ -1,172 +1,172 @@
-import { jsxs as r, jsx as e } from "react/jsx-runtime";
-import * as t from "react";
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import * as n from "react";
 import { cn as c } from "../ui/lib/utils.js";
 import { Skeleton as s } from "../ui/skeleton.js";
-const b = t.forwardRef(
-  function({ className: l, ...d }, o) {
-    return /* @__PURE__ */ r(
+const u = n.forwardRef(
+  function({ className: d, ...l }, o) {
+    return /* @__PURE__ */ a(
       "div",
       {
         ref: o,
-        ...d,
+        ...l,
         className: c(
-          "rounded-ds-lg border border-surface-border-strong bg-surface-2 p-ds-05b",
-          l
+          "rounded-ds-lg border border-surface-border-strong bg-surface-raised p-ds-05b",
+          d
         ),
         children: [
-          /* @__PURE__ */ r("div", { className: "flex items-center justify-between pb-ds-05", children: [
-            /* @__PURE__ */ e(s, { className: "h-[16px] w-[128px] bg-surface-3" }),
-            /* @__PURE__ */ e(s, { className: "h-ico-sm w-ico-sm rounded bg-surface-3" })
+          /* @__PURE__ */ a("div", { className: "flex items-center justify-between pb-ds-05", children: [
+            /* @__PURE__ */ e(s, { className: "h-[16px] w-[128px] bg-surface-raised-hover" }),
+            /* @__PURE__ */ e(s, { className: "h-ico-sm w-ico-sm rounded bg-surface-raised-hover" })
           ] }),
-          /* @__PURE__ */ r("div", { className: "space-y-ds-04", children: [
-            /* @__PURE__ */ e(s, { className: "h-[12px] w-full bg-surface-3" }),
-            /* @__PURE__ */ e(s, { className: "h-[12px] w-4/5 bg-surface-3" }),
-            /* @__PURE__ */ e(s, { className: "h-[12px] w-3/5 bg-surface-3" })
+          /* @__PURE__ */ a("div", { className: "space-y-ds-04", children: [
+            /* @__PURE__ */ e(s, { className: "h-[12px] w-full bg-surface-raised-hover" }),
+            /* @__PURE__ */ e(s, { className: "h-[12px] w-4/5 bg-surface-raised-hover" }),
+            /* @__PURE__ */ e(s, { className: "h-[12px] w-3/5 bg-surface-raised-hover" })
           ] }),
-          /* @__PURE__ */ r("div", { className: "flex items-center gap-ds-03 pt-ds-05", children: [
-            /* @__PURE__ */ e(s, { className: "h-ds-xs w-ds-xs rounded-ds-full bg-surface-3" }),
-            /* @__PURE__ */ e(s, { className: "h-[12px] w-[80px] bg-surface-3" })
+          /* @__PURE__ */ a("div", { className: "flex items-center gap-ds-03 pt-ds-05", children: [
+            /* @__PURE__ */ e(s, { className: "h-ds-xs w-ds-xs rounded-ds-full bg-surface-raised-hover" }),
+            /* @__PURE__ */ e(s, { className: "h-[12px] w-[80px] bg-surface-raised-hover" })
           ] })
         ]
       }
     );
   }
 );
-b.displayName = "CardSkeleton";
-const g = t.forwardRef(
+u.displayName = "CardSkeleton";
+const b = n.forwardRef(
   function({
-    rows: l = 5,
-    columns: d = 4,
+    rows: d = 5,
+    columns: l = 4,
     className: o,
-    ...m
-  }, f) {
-    return /* @__PURE__ */ r(
+    ...i
+  }, m) {
+    return /* @__PURE__ */ a(
       "div",
       {
-        ref: f,
-        ...m,
+        ref: m,
+        ...i,
         className: c(
           "overflow-hidden rounded-ds-lg border border-surface-border-strong",
           o
         ),
         children: [
-          /* @__PURE__ */ e("div", { className: "flex items-center gap-ds-05 border-b border-surface-border-strong bg-surface-2 px-ds-05 py-ds-04", children: Array.from({ length: d }).map((p, a) => /* @__PURE__ */ e(
+          /* @__PURE__ */ e("div", { className: "flex items-center gap-ds-05 border-b border-surface-border-strong bg-surface-raised px-ds-05 py-ds-04", children: Array.from({ length: l }).map((h, r) => /* @__PURE__ */ e(
             s,
             {
               className: c(
-                "h-[12px] bg-surface-3",
-                a === 0 ? "w-[160px]" : "flex-1"
+                "h-[12px] bg-surface-raised-hover",
+                r === 0 ? "w-[160px]" : "flex-1"
               )
             },
-            `head-${a}`
+            `head-${r}`
           )) }),
-          Array.from({ length: l }).map((p, a) => /* @__PURE__ */ e(
+          Array.from({ length: d }).map((h, r) => /* @__PURE__ */ e(
             "div",
             {
               className: c(
                 "flex items-center gap-ds-05 px-ds-05 py-ds-04",
-                a < l - 1 && "border-b border-surface-border-strong"
+                r < d - 1 && "border-b border-surface-border-strong"
               ),
-              style: { animationDelay: `${a * 50}ms` },
-              children: Array.from({ length: d }).map((u, n) => /* @__PURE__ */ e(
+              style: { animationDelay: `${r * 50}ms` },
+              children: Array.from({ length: l }).map((p, f) => /* @__PURE__ */ e(
                 s,
                 {
                   className: c(
-                    "h-[12px] bg-surface-3",
-                    n === 0 ? "w-[160px]" : "flex-1"
+                    "h-[12px] bg-surface-raised-hover",
+                    f === 0 ? "w-[160px]" : "flex-1"
                   )
                 },
-                `cell-${a}-${n}`
+                `cell-${r}-${f}`
               ))
             },
-            `row-${a}`
+            `row-${r}`
           ))
         ]
       }
     );
   }
 );
-g.displayName = "TableSkeleton";
-const h = t.forwardRef(
+b.displayName = "TableSkeleton";
+const g = n.forwardRef(
   function({
-    columns: l = 4,
-    cardsPerColumn: d = 3,
+    columns: d = 4,
+    cardsPerColumn: l = 3,
     className: o,
-    ...m
-  }, f) {
-    return /* @__PURE__ */ e("div", { ref: f, ...m, className: c("flex gap-ds-05 overflow-x-auto", o), children: Array.from({ length: l }).map((p, a) => /* @__PURE__ */ r(
+    ...i
+  }, m) {
+    return /* @__PURE__ */ e("div", { ref: m, ...i, className: c("flex gap-ds-05 overflow-x-auto", o), children: Array.from({ length: d }).map((h, r) => /* @__PURE__ */ a(
       "div",
       {
         className: "flex w-[272px] shrink-0 flex-col gap-ds-03",
         children: [
-          /* @__PURE__ */ r("div", { className: "flex items-center justify-between px-ds-02 py-ds-03", children: [
-            /* @__PURE__ */ r("div", { className: "flex items-center gap-ds-03", children: [
-              /* @__PURE__ */ e(s, { className: "h-[12px] w-[12px] rounded bg-surface-3" }),
-              /* @__PURE__ */ e(s, { className: "h-[12px] w-[80px] bg-surface-3" }),
-              /* @__PURE__ */ e(s, { className: "h-[16px] w-[20px] rounded-ds-full bg-surface-3" })
+          /* @__PURE__ */ a("div", { className: "flex items-center justify-between px-ds-02 py-ds-03", children: [
+            /* @__PURE__ */ a("div", { className: "flex items-center gap-ds-03", children: [
+              /* @__PURE__ */ e(s, { className: "h-[12px] w-[12px] rounded bg-surface-raised-hover" }),
+              /* @__PURE__ */ e(s, { className: "h-[12px] w-[80px] bg-surface-raised-hover" }),
+              /* @__PURE__ */ e(s, { className: "h-[16px] w-[20px] rounded-ds-full bg-surface-raised-hover" })
             ] }),
-            /* @__PURE__ */ e(s, { className: "h-ico-sm w-ico-sm rounded bg-surface-3" })
+            /* @__PURE__ */ e(s, { className: "h-ico-sm w-ico-sm rounded bg-surface-raised-hover" })
           ] }),
-          Array.from({ length: d }).map((u, n) => /* @__PURE__ */ r(
+          Array.from({ length: l }).map((p, f) => /* @__PURE__ */ a(
             "div",
             {
-              className: "rounded-ds-lg border border-surface-border-strong bg-surface-2 p-ds-04",
-              style: { animationDelay: `${(a * d + n) * 50}ms` },
+              className: "rounded-ds-lg border border-surface-border-strong bg-surface-raised p-ds-04",
+              style: { animationDelay: `${(r * l + f) * 50}ms` },
               children: [
-                /* @__PURE__ */ r("div", { className: "space-y-ds-03", children: [
-                  /* @__PURE__ */ e(s, { className: "h-[12px] w-4/5 bg-surface-3" }),
-                  /* @__PURE__ */ e(s, { className: "h-[12px] w-3/5 bg-surface-3" })
+                /* @__PURE__ */ a("div", { className: "space-y-ds-03", children: [
+                  /* @__PURE__ */ e(s, { className: "h-[12px] w-4/5 bg-surface-raised-hover" }),
+                  /* @__PURE__ */ e(s, { className: "h-[12px] w-3/5 bg-surface-raised-hover" })
                 ] }),
-                /* @__PURE__ */ r("div", { className: "flex items-center justify-between pt-ds-04", children: [
-                  /* @__PURE__ */ r("div", { className: "flex items-center gap-ds-02b", children: [
-                    /* @__PURE__ */ e(s, { className: "h-ico-md w-ico-md rounded-ds-full bg-surface-3" }),
-                    /* @__PURE__ */ e(s, { className: "h-ds-03 w-[64px] bg-surface-3" })
+                /* @__PURE__ */ a("div", { className: "flex items-center justify-between pt-ds-04", children: [
+                  /* @__PURE__ */ a("div", { className: "flex items-center gap-ds-02b", children: [
+                    /* @__PURE__ */ e(s, { className: "h-ico-md w-ico-md rounded-ds-full bg-surface-raised-hover" }),
+                    /* @__PURE__ */ e(s, { className: "h-ds-03 w-[64px] bg-surface-raised-hover" })
                   ] }),
-                  /* @__PURE__ */ e(s, { className: "h-[16px] w-ds-lg rounded-ds-full bg-surface-3" })
+                  /* @__PURE__ */ e(s, { className: "h-[16px] w-ds-lg rounded-ds-full bg-surface-raised-hover" })
                 ] })
               ]
             },
-            `card-${a}-${n}`
+            `card-${r}-${f}`
           ))
         ]
       },
-      `col-${a}`
+      `col-${r}`
     )) });
   }
 );
-h.displayName = "BoardSkeleton";
-const x = t.forwardRef(
+g.displayName = "BoardSkeleton";
+const x = n.forwardRef(
   function({
-    rows: l = 6,
-    showAvatar: d = !0,
+    rows: d = 6,
+    showAvatar: l = !0,
     className: o,
-    ...m
-  }, f) {
-    return /* @__PURE__ */ e("div", { ref: f, ...m, className: c("flex flex-col", o), children: Array.from({ length: l }).map((p, a) => /* @__PURE__ */ r(
+    ...i
+  }, m) {
+    return /* @__PURE__ */ e("div", { ref: m, ...i, className: c("flex flex-col", o), children: Array.from({ length: d }).map((h, r) => /* @__PURE__ */ a(
       "div",
       {
         className: c(
           "flex items-center gap-ds-04 py-ds-04",
-          a < l - 1 && "border-b border-surface-border-strong"
+          r < d - 1 && "border-b border-surface-border-strong"
         ),
-        style: { animationDelay: `${a * 50}ms` },
+        style: { animationDelay: `${r * 50}ms` },
         children: [
-          d && /* @__PURE__ */ e(s, { className: "h-ds-sm w-ds-sm shrink-0 rounded-ds-full bg-surface-3" }),
-          /* @__PURE__ */ r("div", { className: "flex flex-1 flex-col gap-ds-02b", children: [
-            /* @__PURE__ */ e(s, { className: "h-[12px] w-2/5 bg-surface-3" }),
-            /* @__PURE__ */ e(s, { className: "h-ds-03 w-3/5 bg-surface-3" })
+          l && /* @__PURE__ */ e(s, { className: "h-ds-sm w-ds-sm shrink-0 rounded-ds-full bg-surface-raised-hover" }),
+          /* @__PURE__ */ a("div", { className: "flex flex-1 flex-col gap-ds-02b", children: [
+            /* @__PURE__ */ e(s, { className: "h-[12px] w-2/5 bg-surface-raised-hover" }),
+            /* @__PURE__ */ e(s, { className: "h-ds-03 w-3/5 bg-surface-raised-hover" })
           ] }),
-          /* @__PURE__ */ e(s, { className: "h-[20px] w-[56px] rounded-ds-full bg-surface-3" })
+          /* @__PURE__ */ e(s, { className: "h-[20px] w-[56px] rounded-ds-full bg-surface-raised-hover" })
         ]
       },
-      `list-${a}`
+      `list-${r}`
     )) });
   }
 );
 x.displayName = "ListSkeleton";
 export {
-  h as BoardSkeleton,
-  b as CardSkeleton,
+  g as BoardSkeleton,
+  u as CardSkeleton,
   x as ListSkeleton,
-  g as TableSkeleton
+  b as TableSkeleton
 };

package/dist/composed/member-picker.js

@@ -16,8 +16,8 @@ const L = a.forwardRef(
     children: m,
     multiple: p = !1,
     placeholder: u = "Search members...",
-    className: x,
-    ...h
+    className: h,
+    ...x
   }, g) => {
     const [b, r] = a.useState(!1), [o, v] = a.useState(""), c = l.filter(
       (e) => e.name.toLowerCase().includes(o.toLowerCase())
@@ -28,8 +28,8 @@ const L = a.forwardRef(
         w,
         {
           ref: g,
-          ...h,
-          className: i("w-[220px] border-surface-border-strong bg-surface-1 p-0", x),
+          ...x,
+          className: i("w-[220px] border-surface-border-strong bg-surface-overlay p-0", h),
           align: "start",
           sideOffset: 4,
           children: [
@@ -59,13 +59,13 @@ const L = a.forwardRef(
                     },
                     className: i(
                       "flex w-full items-center gap-ds-03 px-ds-04 py-ds-02b text-left transition-colors duration-fast-01 ease-productive-standard",
-                      "hover:bg-surface-3",
+                      "hover:bg-surface-raised-hover",
                       n && "bg-accent-2 text-accent-11"
                     ),
                     children: [
                       /* @__PURE__ */ s(k, { className: "h-ico-md w-ico-md", children: [
                         e.avatar && /* @__PURE__ */ t(C, { src: e.avatar, alt: e.name }),
-                        /* @__PURE__ */ t(S, { className: "bg-surface-3 text-ds-xs font-semibold text-surface-fg", children: O(e.name) })
+                        /* @__PURE__ */ t(S, { className: "bg-surface-raised-hover text-ds-xs font-semibold text-surface-fg", children: O(e.name) })
                       ] }),
                       /* @__PURE__ */ t("span", { className: "flex-1 truncate text-ds-md font-body text-surface-fg", children: e.name }),
                       n && /* @__PURE__ */ t(

package/dist/composed/page-skeletons.js

@@ -2,13 +2,13 @@ import { jsxs as a, jsx as s } from "react/jsx-runtime";
 import * as n from "react";
 import { Skeleton as d } from "../ui/skeleton.js";
 import { cn as e } from "../ui/lib/utils.js";
-const l = "bg-surface-3", t = n.forwardRef(
+const l = "bg-surface-raised-hover", t = n.forwardRef(
   function({ className: m, ...o }, i) {
     return /* @__PURE__ */ a("div", { ref: i, ...o, className: e("flex flex-col gap-ds-06", m), children: [
       /* @__PURE__ */ s("div", { className: "grid grid-cols-1 gap-ds-05 sm:grid-cols-2 lg:grid-cols-4", children: Array.from({ length: 4 }).map((c, r) => /* @__PURE__ */ a(
         "div",
         {
-          className: "flex flex-col gap-ds-04 rounded-ds-xl border border-surface-border-strong bg-surface-2 p-ds-05b",
+          className: "flex flex-col gap-ds-04 rounded-ds-xl border border-surface-border-strong bg-surface-raised p-ds-05b",
           children: [
             /* @__PURE__ */ a("div", { className: "flex items-center justify-between", children: [
               /* @__PURE__ */ s(d, { className: e("h-[12px] w-[80px]", l) }),
@@ -20,7 +20,7 @@ const l = "bg-surface-3", t = n.forwardRef(
         },
         `stat-${r}`
       )) }),
-      /* @__PURE__ */ a("div", { className: "rounded-ds-xl border border-surface-border-strong bg-surface-2 p-ds-06", children: [
+      /* @__PURE__ */ a("div", { className: "rounded-ds-xl border border-surface-border-strong bg-surface-raised p-ds-06", children: [
         /* @__PURE__ */ a("div", { className: "mb-ds-06 flex items-center justify-between", children: [
           /* @__PURE__ */ s(d, { className: e("h-[20px] w-[128px]", l) }),
           /* @__PURE__ */ a("div", { className: "flex items-center gap-ds-03", children: [
@@ -59,7 +59,7 @@ const f = n.forwardRef(
       /* @__PURE__ */ s("div", { className: "grid grid-cols-1 gap-ds-05 sm:grid-cols-2 lg:grid-cols-3", children: Array.from({ length: 6 }).map((c, r) => /* @__PURE__ */ a(
         "div",
         {
-          className: "flex flex-col gap-ds-05 rounded-ds-xl border border-surface-border-strong bg-surface-2 p-ds-05b",
+          className: "flex flex-col gap-ds-05 rounded-ds-xl border border-surface-border-strong bg-surface-raised p-ds-05b",
           children: [
             /* @__PURE__ */ a("div", { className: "flex items-center justify-between", children: [
               /* @__PURE__ */ s(d, { className: e("h-[20px] w-[64px] rounded-ds-full", l) }),
@@ -90,7 +90,7 @@ const f = n.forwardRef(
 f.displayName = "ProjectListSkeleton";
 const h = n.forwardRef(
   function({ className: m, ...o }, i) {
-    return /* @__PURE__ */ a("div", { ref: i, ...o, className: e("flex h-full flex-col gap-0 rounded-ds-xl border border-surface-border-strong bg-surface-2", m), children: [
+    return /* @__PURE__ */ a("div", { ref: i, ...o, className: e("flex h-full flex-col gap-0 rounded-ds-xl border border-surface-border-strong bg-surface-raised", m), children: [
       /* @__PURE__ */ a("div", { className: "flex items-center justify-between border-b border-surface-border-strong px-ds-05b py-ds-05", children: [
         /* @__PURE__ */ s(d, { className: e("h-[20px] w-[192px]", l) }),
         /* @__PURE__ */ a("div", { className: "flex items-center gap-ds-03", children: [