@devalok/shilp-sutra 0.20.1 → 0.22.0

package/dist/composed/loading-skeleton.js

@@ -3,15 +3,15 @@ import * as t 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: d, ...l }, o) {
+  function({ className: l, ...d }, o) {
     return /* @__PURE__ */ r(
       "div",
       {
         ref: o,
-        ...l,
+        ...d,
         className: c(
           "rounded-ds-lg border border-surface-border-strong bg-surface-2 p-ds-05b",
-          d
+          l
         ),
         children: [
           /* @__PURE__ */ r("div", { className: "flex items-center justify-between pb-ds-05", children: [
@@ -35,22 +35,22 @@ const b = t.forwardRef(
 b.displayName = "CardSkeleton";
 const g = t.forwardRef(
   function({
-    rows: d = 5,
-    columns: l = 4,
+    rows: l = 5,
+    columns: d = 4,
     className: o,
-    ...f
-  }, n) {
+    ...m
+  }, f) {
     return /* @__PURE__ */ r(
       "div",
       {
-        ref: n,
-        ...f,
+        ref: f,
+        ...m,
         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: l }).map((p, a) => /* @__PURE__ */ e(
+          /* @__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(
             s,
             {
               className: c(
@@ -60,22 +60,23 @@ const g = t.forwardRef(
             },
             `head-${a}`
           )) }),
-          Array.from({ length: d }).map((p, a) => /* @__PURE__ */ e(
+          Array.from({ length: l }).map((p, a) => /* @__PURE__ */ e(
             "div",
             {
               className: c(
                 "flex items-center gap-ds-05 px-ds-05 py-ds-04",
-                a < d - 1 && "border-b border-surface-border-strong"
+                a < l - 1 && "border-b border-surface-border-strong"
               ),
-              children: Array.from({ length: l }).map((u, m) => /* @__PURE__ */ e(
+              style: { animationDelay: `${a * 50}ms` },
+              children: Array.from({ length: d }).map((u, n) => /* @__PURE__ */ e(
                 s,
                 {
                   className: c(
                     "h-[12px] bg-surface-3",
-                    m === 0 ? "w-[160px]" : "flex-1"
+                    n === 0 ? "w-[160px]" : "flex-1"
                   )
                 },
-                `cell-${a}-${m}`
+                `cell-${a}-${n}`
               ))
             },
             `row-${a}`
@@ -88,12 +89,12 @@ const g = t.forwardRef(
 g.displayName = "TableSkeleton";
 const h = t.forwardRef(
   function({
-    columns: d = 4,
-    cardsPerColumn: l = 3,
+    columns: l = 4,
+    cardsPerColumn: d = 3,
     className: o,
-    ...f
-  }, n) {
-    return /* @__PURE__ */ e("div", { ref: n, ...f, className: c("flex gap-ds-05 overflow-x-auto", o), children: Array.from({ length: d }).map((p, a) => /* @__PURE__ */ r(
+    ...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(
       "div",
       {
         className: "flex w-[272px] shrink-0 flex-col gap-ds-03",
@@ -106,10 +107,11 @@ const h = t.forwardRef(
             ] }),
             /* @__PURE__ */ e(s, { className: "h-ico-sm w-ico-sm rounded bg-surface-3" })
           ] }),
-          Array.from({ length: l }).map((u, m) => /* @__PURE__ */ r(
+          Array.from({ length: d }).map((u, n) => /* @__PURE__ */ r(
             "div",
             {
               className: "rounded-ds-lg border border-surface-border-strong bg-surface-2 p-ds-04",
+              style: { animationDelay: `${(a * d + n) * 50}ms` },
               children: [
                 /* @__PURE__ */ r("div", { className: "space-y-ds-03", children: [
                   /* @__PURE__ */ e(s, { className: "h-[12px] w-4/5 bg-surface-3" }),
@@ -124,7 +126,7 @@ const h = t.forwardRef(
                 ] })
               ]
             },
-            `card-${a}-${m}`
+            `card-${a}-${n}`
           ))
         ]
       },
@@ -135,20 +137,21 @@ const h = t.forwardRef(
 h.displayName = "BoardSkeleton";
 const x = t.forwardRef(
   function({
-    rows: d = 6,
-    showAvatar: l = !0,
+    rows: l = 6,
+    showAvatar: d = !0,
     className: o,
-    ...f
-  }, n) {
-    return /* @__PURE__ */ e("div", { ref: n, ...f, className: c("flex flex-col", o), children: Array.from({ length: d }).map((p, a) => /* @__PURE__ */ r(
+    ...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(
       "div",
       {
         className: c(
           "flex items-center gap-ds-04 py-ds-04",
-          a < d - 1 && "border-b border-surface-border-strong"
+          a < l - 1 && "border-b border-surface-border-strong"
         ),
+        style: { animationDelay: `${a * 50}ms` },
         children: [
-          l && /* @__PURE__ */ e(s, { className: "h-ds-sm w-ds-sm shrink-0 rounded-ds-full bg-surface-3" }),
+          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" })

package/dist/composed/member-picker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"member-picker.d.ts","sourceRoot":"","sources":["../../src/composed/member-picker.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAmB9B,MAAM,WAAW,kBAAkB;IACjC,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB;AAED,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IAChG,OAAO,EAAE,kBAAkB,EAAE,CAAA;IAC7B,WAAW,EAAE,MAAM,EAAE,CAAA;IACrB,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAA;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAMD,QAAA,MAAM,YAAY,0FAsFjB,CAAA;AAID,OAAO,EAAE,YAAY,EAAE,CAAA"}
+{"version":3,"file":"member-picker.d.ts","sourceRoot":"","sources":["../../src/composed/member-picker.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAqB9B,MAAM,WAAW,kBAAkB;IACjC,EAAE,EAAE,MAAM,CAAA;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB;AAED,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IAChG,OAAO,EAAE,kBAAkB,EAAE,CAAA;IAC7B,WAAW,EAAE,MAAM,EAAE,CAAA;IACrB,QAAQ,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAA;IACpC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAMD,QAAA,MAAM,YAAY,0FA6FjB,CAAA;AAID,OAAO,EAAE,YAAY,EAAE,CAAA"}

package/dist/composed/member-picker.js

@@ -1,23 +1,25 @@
 "use client";
 import { jsxs as s, jsx as t } from "react/jsx-runtime";
 import * as a from "react";
-import { cn as l } from "../ui/lib/utils.js";
+import { cn as i } from "../ui/lib/utils.js";
 import { Popover as N, PopoverTrigger as y, PopoverContent as w } from "../ui/popover.js";
 import { Avatar as k, AvatarImage as C, AvatarFallback as S } from "../ui/avatar.js";
 import { IconSearch as P, IconCheck as I } from "@tabler/icons-react";
-import { getInitials as A } from "./lib/string-utils.js";
-const O = a.forwardRef(
+import { springs as A } from "../ui/lib/motion.js";
+import { getInitials as O } from "./lib/string-utils.js";
+import { m as j } from "../_chunks/framer.js";
+const L = a.forwardRef(
   ({
-    members: i,
+    members: l,
     selectedIds: d,
     onSelect: f,
     children: m,
     multiple: p = !1,
     placeholder: u = "Search members...",
-    className: h,
-    ...x
+    className: x,
+    ...h
   }, g) => {
-    const [b, r] = a.useState(!1), [o, v] = a.useState(""), c = i.filter(
+    const [b, r] = a.useState(!1), [o, v] = a.useState(""), c = l.filter(
       (e) => e.name.toLowerCase().includes(o.toLowerCase())
     );
     return /* @__PURE__ */ s(N, { open: b, onOpenChange: r, children: [
@@ -26,8 +28,8 @@ const O = a.forwardRef(
         w,
         {
           ref: g,
-          ...x,
-          className: l("w-[220px] border-surface-border-strong bg-surface-1 p-0", h),
+          ...h,
+          className: i("w-[220px] border-surface-border-strong bg-surface-1 p-0", x),
           align: "start",
           sideOffset: 4,
           children: [
@@ -41,7 +43,7 @@ const O = a.forwardRef(
                   value: o,
                   onChange: (e) => v(e.target.value),
                   "aria-label": "Search members",
-                  className: "w-full bg-transparent text-ds-md font-body text-surface-fg placeholder:text-surface-fg-subtle outline-none"
+                  className: "w-full bg-transparent text-ds-md font-body text-surface-fg placeholder:text-surface-fg-subtle outline-none focus-visible:ring-1 focus-visible:ring-accent-7"
                 }
               )
             ] }),
@@ -55,18 +57,27 @@ const O = a.forwardRef(
                     onClick: () => {
                       f(e.id), p || r(!1);
                     },
-                    className: l(
-                      "flex w-full items-center gap-ds-03 px-ds-04 py-ds-02b text-left transition-colors",
+                    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",
-                      n && "bg-surface-3"
+                      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-accent-fg", children: A(e.name) })
+                        /* @__PURE__ */ t(S, { className: "bg-surface-3 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(I, { className: "h-ico-sm w-ico-sm shrink-0 text-accent-11" })
+                      n && /* @__PURE__ */ t(
+                        j.span,
+                        {
+                          initial: { scale: 0 },
+                          animate: { scale: 1 },
+                          transition: A.bouncy,
+                          className: "inline-flex shrink-0",
+                          children: /* @__PURE__ */ t(I, { className: "h-ico-sm w-ico-sm text-accent-11" })
+                        }
+                      )
                     ]
                   },
                   e.id
@@ -80,7 +91,7 @@ const O = a.forwardRef(
     ] });
   }
 );
-O.displayName = "MemberPicker";
+L.displayName = "MemberPicker";
 export {
-  O as MemberPicker
+  L as MemberPicker
 };

package/dist/composed/page-header.js

@@ -1,55 +1,55 @@
-import { jsxs as l, jsx as s } from "react/jsx-runtime";
-import * as n from "react";
+import { jsxs as t, jsx as s } from "react/jsx-runtime";
+import * as c from "react";
 import { cn as o } from "../ui/lib/utils.js";
 import { IconChevronRight as p } from "@tabler/icons-react";
-const N = n.forwardRef(
-  ({ title: d, subtitle: a, actions: r, breadcrumbs: e, titleClassName: h, className: g, ...x }, m) => {
-    var i;
-    const f = d ?? ((i = e == null ? void 0 : e[e.length - 1]) == null ? void 0 : i.label) ?? "";
-    return /* @__PURE__ */ l(
+const v = c.forwardRef(
+  ({ title: d, subtitle: a, actions: r, breadcrumbs: e, titleClassName: g, className: h, ...m }, x) => {
+    var n;
+    const f = d ?? ((n = e == null ? void 0 : e[e.length - 1]) == null ? void 0 : n.label) ?? "";
+    return /* @__PURE__ */ t(
       "div",
       {
-        ref: m,
+        ref: x,
         className: o(
           "flex flex-col gap-ds-05 border-b border-surface-border-strong pb-ds-06",
-          g
+          h
         ),
-        ...x,
+        ...m,
         children: [
-          e && e.length > 0 && /* @__PURE__ */ s("nav", { "aria-label": "Breadcrumb", className: "flex items-center gap-ds-02b", children: e.map((t, c) => /* @__PURE__ */ l(n.Fragment, { children: [
-            c > 0 && /* @__PURE__ */ s(
+          e && e.length > 0 && /* @__PURE__ */ s("nav", { "aria-label": "Breadcrumb", className: "flex items-center gap-ds-02b", children: e.map((l, i) => /* @__PURE__ */ t(c.Fragment, { children: [
+            i > 0 && /* @__PURE__ */ s(
               p,
               {
                 className: "h-ico-sm w-ico-sm text-surface-fg-subtle",
                 stroke: 1.5
               }
             ),
-            t.href ? /* @__PURE__ */ s(
+            l.href ? /* @__PURE__ */ s(
               "a",
               {
-                href: t.href,
-                className: "text-ds-sm text-surface-fg-subtle transition-colors hover:text-surface-fg-muted",
-                children: t.label
+                href: l.href,
+                className: "text-ds-sm text-surface-fg-subtle transition-colors hover:text-surface-fg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-9 rounded-ds-sm",
+                children: l.label
               }
             ) : /* @__PURE__ */ s(
               "span",
               {
                 className: o(
                   "text-ds-sm",
-                  c === e.length - 1 ? "text-surface-fg" : "text-surface-fg-subtle"
+                  i === e.length - 1 ? "text-surface-fg" : "text-surface-fg-subtle"
                 ),
-                children: t.label
+                children: l.label
               }
             )
-          ] }, c)) }),
-          (f || a || r) && /* @__PURE__ */ l("div", { className: "flex items-start justify-between gap-ds-05", children: [
-            /* @__PURE__ */ l("div", { className: "flex flex-col gap-ds-02b", children: [
+          ] }, i)) }),
+          (f || a || r) && /* @__PURE__ */ t("div", { className: "flex items-start justify-between gap-ds-05", children: [
+            /* @__PURE__ */ t("div", { className: "flex flex-col gap-ds-02b", children: [
               f && /* @__PURE__ */ s(
                 "h1",
                 {
                   className: o(
-                    "text-ds-2xl text-surface-fg",
-                    h
+                    "text-ds-2xl font-semibold text-surface-fg",
+                    g
                   ),
                   children: f
                 }
@@ -63,7 +63,7 @@ const N = n.forwardRef(
     );
   }
 );
-N.displayName = "PageHeader";
+v.displayName = "PageHeader";
 export {
-  N as PageHeader
+  v as PageHeader
 };

package/dist/composed/priority-indicator.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"priority-indicator.d.ts","sourceRoot":"","sources":["../../src/composed/priority-indicator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAUjE,MAAM,MAAM,QAAQ,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,QAAQ,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,QAAQ,CAAA;AAgClG,QAAA,MAAM,gBAAgB;;8EAarB,CAAA;AAED,MAAM,WAAW,sBACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,EAC5D,YAAY,CAAC,OAAO,gBAAgB,CAAC;IACvC,QAAQ,EAAE,QAAQ,CAAA;CACnB;AAED,QAAA,MAAM,iBAAiB,+FA2CtB,CAAA;AAGD,OAAO,EAAE,iBAAiB,EAAE,CAAA"}
+{"version":3,"file":"priority-indicator.d.ts","sourceRoot":"","sources":["../../src/composed/priority-indicator.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAWjE,MAAM,MAAM,QAAQ,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,QAAQ,GAAG,KAAK,GAAG,QAAQ,GAAG,MAAM,GAAG,QAAQ,CAAA;AAgClG,QAAA,MAAM,gBAAgB;;8EAarB,CAAA;AAED,MAAM,WAAW,sBACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC,EAC5D,YAAY,CAAC,OAAO,gBAAgB,CAAC;IACvC,QAAQ,EAAE,QAAQ,CAAA;CACnB;AAED,QAAA,MAAM,iBAAiB,+FAwEtB,CAAA;AAGD,OAAO,EAAE,iBAAiB,EAAE,CAAA"}

package/dist/composed/priority-indicator.js

@@ -1,34 +1,35 @@
-import { jsx as r, jsxs as m } from "react/jsx-runtime";
-import * as d from "react";
-import { ag as g } from "../_chunks/vendor-utils.js";
-import { cn as e } from "../ui/lib/utils.js";
-import { IconAlertTriangle as f, IconArrowUp as b, IconMinus as p, IconArrowDown as u } from "@tabler/icons-react";
-const x = {
+import { jsx as o, jsxs as g } from "react/jsx-runtime";
+import * as p from "react";
+import { ag as u } from "../_chunks/vendor-utils.js";
+import { cn as r } from "../ui/lib/utils.js";
+import { IconAlertTriangle as b, IconArrowUp as y, IconMinus as x, IconArrowDown as I } from "@tabler/icons-react";
+import { m as d } from "../_chunks/framer.js";
+const N = {
   LOW: {
-    icon: u,
+    icon: I,
     color: "text-category-slate-11",
     bgColor: "bg-category-slate-3",
     label: "Low"
   },
   MEDIUM: {
-    icon: p,
+    icon: x,
     color: "text-warning-11",
     bgColor: "bg-warning-3",
     label: "Medium"
   },
   HIGH: {
-    icon: b,
+    icon: y,
     color: "text-error-11",
     bgColor: "bg-error-3",
     label: "High"
   },
   URGENT: {
-    icon: f,
+    icon: b,
     color: "text-error-11",
     bgColor: "bg-error-3",
     label: "Urgent"
   }
-}, y = g(
+}, h = u(
   "inline-flex items-center gap-ds-02b font-body",
   {
     variants: {
@@ -41,40 +42,63 @@ const x = {
       display: "full"
     }
   }
-), w = d.forwardRef(
-  ({ priority: s, display: t, className: i, ...n }, c) => {
-    const a = s.toUpperCase(), o = x[a], l = o.icon;
-    return t === "compact" ? /* @__PURE__ */ r(
-      "div",
-      {
-        ref: c,
-        className: e(
-          "inline-flex items-center justify-center rounded-ds-md p-ds-02",
-          o.bgColor,
-          i
-        ),
-        title: o.label,
-        ...n,
-        children: /* @__PURE__ */ r(l, { className: e("h-ico-sm w-ico-sm", o.color), stroke: 2 })
-      }
-    ) : /* @__PURE__ */ m(
+), w = p.forwardRef(
+  ({ priority: f, display: t, className: n, ...s }, a) => {
+    const c = f.toUpperCase(), e = N[c], i = e.icon, l = c === "URGENT";
+    if (t === "compact") {
+      const m = /* @__PURE__ */ o(
+        "div",
+        {
+          ref: a,
+          className: r(
+            "inline-flex items-center justify-center rounded-ds-md p-ds-02",
+            e.bgColor,
+            n
+          ),
+          title: e.label,
+          ...s,
+          children: /* @__PURE__ */ o(i, { className: r("h-ico-sm w-ico-sm", e.color), stroke: 2 })
+        }
+      );
+      return l ? /* @__PURE__ */ o(
+        d.div,
+        {
+          animate: { scale: [1, 1.1, 1] },
+          transition: { repeat: 1 / 0, duration: 2, ease: "easeInOut" },
+          className: "inline-flex",
+          children: m
+        }
+      ) : m;
+    }
+    return /* @__PURE__ */ g(
       "div",
       {
-        ref: c,
-        className: e(y({ display: t }), i),
-        ...n,
+        ref: a,
+        className: r(h({ display: t }), n),
+        ...s,
         children: [
-          /* @__PURE__ */ r(
+          l ? /* @__PURE__ */ o(
+            d.div,
+            {
+              animate: { scale: [1, 1.1, 1] },
+              transition: { repeat: 1 / 0, duration: 2, ease: "easeInOut" },
+              className: r(
+                "inline-flex items-center justify-center rounded-ds-md p-ds-01",
+                e.bgColor
+              ),
+              children: /* @__PURE__ */ o(i, { className: r("h-ico-sm w-ico-sm", e.color), stroke: 2 })
+            }
+          ) : /* @__PURE__ */ o(
             "div",
             {
-              className: e(
+              className: r(
                 "inline-flex items-center justify-center rounded-ds-md p-ds-01",
-                o.bgColor
+                e.bgColor
               ),
-              children: /* @__PURE__ */ r(l, { className: e("h-ico-sm w-ico-sm", o.color), stroke: 2 })
+              children: /* @__PURE__ */ o(i, { className: r("h-ico-sm w-ico-sm", e.color), stroke: 2 })
             }
           ),
-          /* @__PURE__ */ r("span", { className: "text-ds-sm text-surface-fg-muted", children: o.label })
+          /* @__PURE__ */ o("span", { className: "text-ds-sm text-surface-fg-muted", children: e.label })
         ]
       }
     );