@devalok/shilp-sutra 0.10.0 → 0.12.0

package/dist/_chunks/checkbox.js

@@ -1,12 +1,12 @@
 "use client";
 import { jsx as e } from "react/jsx-runtime";
-import { C as r, b as n } from "./primitives.js";
+import { C as r, b as d } from "./primitives.js";
 import { IconMinus as m, IconCheck as l } from "@tabler/icons-react";
-import * as b from "react";
-import { c as f } from "./utils.js";
-const h = b.forwardRef(({ className: o, error: i, indeterminate: a, checked: s, ...c }, d) => {
+import * as f from "react";
+import { c as b } from "./utils.js";
+const h = f.forwardRef(({ className: i, error: o, indeterminate: a, checked: s, ...c }, n) => {
   const t = a ? "indeterminate" : s;
-  return e(r, { ref: d, checked: t, className: f("peer h-ico-md w-ico-md shrink-0 rounded-ds-sm", "border border-border-strong", "bg-field", "transition-colors duration-fast-01", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus focus-visible:ring-offset-2", "disabled:cursor-not-allowed disabled:opacity-[0.38]", "data-[state=checked]:bg-interactive data-[state=checked]:border-interactive data-[state=checked]:text-text-on-color", "data-[state=indeterminate]:bg-interactive data-[state=indeterminate]:border-interactive data-[state=indeterminate]:text-text-on-color", i && "border-border-error", o), ...c, children: e(n, { className: "flex items-center justify-center text-current", children: t === "indeterminate" ? e(m, { className: "h-ico-sm w-ico-sm" }) : e(l, { className: "h-ico-sm w-ico-sm" }) }) });
+  return e(r, { ref: n, checked: t, className: b("peer flex items-center justify-center h-ico-md w-ico-md shrink-0 rounded-ds-sm", "border border-border-strong", "bg-field", "transition-colors duration-fast-01", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus focus-visible:ring-offset-2", "disabled:cursor-not-allowed disabled:opacity-[0.38]", "data-[state=checked]:bg-interactive data-[state=checked]:border-interactive data-[state=checked]:text-text-on-color", "data-[state=indeterminate]:bg-interactive data-[state=indeterminate]:border-interactive data-[state=indeterminate]:text-text-on-color", o && "border-border-error", i), ...c, children: e(d, { className: "flex items-center justify-center text-current", children: t === "indeterminate" ? e(m, { className: "h-ico-sm w-ico-sm" }) : e(l, { className: "h-3 w-3" }) }) });
 });
 h.displayName = r.displayName;
 export {

package/dist/_chunks/sidebar.js

@@ -15,11 +15,11 @@ import { T as $, a as P, b as W, c as U } from "./tooltip.js";
 const X = z([
   "flex w-full font-sans",
   "bg-field text-text-primary",
-  "border border-border rounded-ds-md",
+  "border border-border-subtle rounded-ds-md",
   "placeholder:text-text-placeholder",
   "hover:bg-field-hover",
   "transition-colors duration-fast-01",
-  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus focus-visible:border-border-interactive",
+  "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-focus/50 focus-visible:border-border-subtle",
   "disabled:cursor-not-allowed disabled:opacity-[0.38]",
   "read-only:bg-layer-02 read-only:cursor-default"
 ], {
@@ -32,7 +32,7 @@ const X = z([
   },
   defaultVariants: { size: "md" }
 }), T = B.forwardRef(({ className: a, type: e, state: t, size: d, startIcon: s, endIcon: n, ...c }, f) => {
-  const l = K(), u = t ?? (l.state === "helper" ? void 0 : l.state), p = c["aria-describedby"] ?? l.helperTextId, g = c["aria-required"] ?? l.required, y = r("input", { type: e, className: i(X({ size: d }), s && "pl-ds-08", n && "pr-ds-08", u === "error" && "border-border-error focus-visible:ring-error", u === "warning" && "border-border-warning focus-visible:ring-warning", u === "success" && "border-border-success focus-visible:ring-success", a), "aria-invalid": u === "error" || void 0, "aria-describedby": p, "aria-required": g || void 0, ref: f, ...c });
+  const l = K(), u = t ?? (l.state === "helper" ? void 0 : l.state), b = c["aria-describedby"] ?? l.helperTextId, g = c["aria-required"] ?? l.required, y = r("input", { type: e, className: i(X({ size: d }), s && "pl-ds-07", n && "pr-ds-07", u === "error" && "border-border-error focus-visible:ring-error", u === "warning" && "border-border-warning focus-visible:ring-warning", u === "success" && "border-border-success focus-visible:ring-success", a), "aria-invalid": u === "error" || void 0, "aria-describedby": b, "aria-required": g || void 0, ref: f, ...c });
   return !s && !n ? y : x("div", { className: "relative flex items-center w-full", children: [s && r("span", { className: "absolute left-ds-03 flex items-center text-text-secondary pointer-events-none [&>svg]:h-ico-sm [&>svg]:w-ico-sm", children: s }), y, n && r("span", { className: "absolute right-ds-03 flex items-center text-text-secondary pointer-events-none [&>svg]:h-ico-sm [&>svg]:w-ico-sm", children: n })] });
 });
 T.displayName = "Input";
@@ -55,18 +55,18 @@ const te = o(
     children: n,
     ...c
   }, f) => {
-    const l = G(), [u, p] = _(!1), [g, y] = _(a), h = e ?? g, w = C(
-      (b) => {
-        const m = typeof b == "function" ? b(h) : b;
+    const l = G(), [u, b] = _(!1), [g, y] = _(a), h = e ?? g, w = C(
+      (p) => {
+        const m = typeof p == "function" ? p(h) : p;
         t ? t(m) : y(m), document.cookie = `${Y}=${m}; path=/; max-age=${J}`;
       },
       [t, h]
-    ), S = C(() => l ? p((b) => !b) : w((b) => !b), [l, w, p]);
+    ), S = C(() => l ? b((p) => !p) : w((p) => !p), [l, w, b]);
     j(() => {
-      const b = (m) => {
+      const p = (m) => {
         m.key === ae && (m.metaKey || m.ctrlKey) && (m.preventDefault(), S());
       };
-      return window.addEventListener("keydown", b), () => window.removeEventListener("keydown", b);
+      return window.addEventListener("keydown", p), () => window.removeEventListener("keydown", p);
     }, [S]);
     const M = h ? "expanded" : "collapsed", D = E(
       () => ({
@@ -75,7 +75,7 @@ const te = o(
         setOpen: w,
         isMobile: l,
         openMobile: u,
-        setOpenMobile: p,
+        setOpenMobile: b,
         toggleSidebar: S
       }),
       [
@@ -84,7 +84,7 @@ const te = o(
         w,
         l,
         u,
-        p,
+        b,
         S
       ]
     );
@@ -117,7 +117,7 @@ const re = o(
     children: s,
     ...n
   }, c) => {
-    const { isMobile: f, state: l, openMobile: u, setOpenMobile: p } = N();
+    const { isMobile: f, state: l, openMobile: u, setOpenMobile: b } = N();
     return t === "none" ? /* @__PURE__ */ r(
       "div",
       {
@@ -129,7 +129,7 @@ const re = o(
         ...n,
         children: s
       }
-    ) : f ? /* @__PURE__ */ r(V, { open: u, onOpenChange: p, ...n, children: /* @__PURE__ */ r(
+    ) : f ? /* @__PURE__ */ r(V, { open: u, onOpenChange: b, ...n, children: /* @__PURE__ */ r(
       F,
       {
         "data-sidebar": "sidebar",
@@ -317,7 +317,7 @@ const ue = o(
   )
 );
 ue.displayName = "SidebarContent";
-const pe = o(
+const be = o(
   ({ className: a, ...e }, t) => /* @__PURE__ */ r(
     "div",
     {
@@ -328,8 +328,8 @@ const pe = o(
     }
   )
 );
-pe.displayName = "SidebarGroup";
-const be = o(({ className: a, asChild: e = !1, ...t }, d) => /* @__PURE__ */ r(
+be.displayName = "SidebarGroup";
+const pe = o(({ className: a, asChild: e = !1, ...t }, d) => /* @__PURE__ */ r(
   e ? v : "div",
   {
     ref: d,
@@ -342,7 +342,7 @@ const be = o(({ className: a, asChild: e = !1, ...t }, d) => /* @__PURE__ */ r(
     ...t
   }
 ));
-be.displayName = "SidebarGroupLabel";
+pe.displayName = "SidebarGroupLabel";
 const me = o(({ className: a, asChild: e = !1, ...t }, d) => /* @__PURE__ */ r(
   e ? v : "button",
   {
@@ -423,7 +423,7 @@ const xe = z(
     className: n,
     ...c
   }, f) => {
-    const l = a ? v : "button", { isMobile: u, state: p } = N(), g = /* @__PURE__ */ r(
+    const l = a ? v : "button", { isMobile: u, state: b } = N(), g = /* @__PURE__ */ r(
       l,
       {
         ref: f,
@@ -443,7 +443,7 @@ const xe = z(
         {
           side: "right",
           align: "center",
-          hidden: p !== "collapsed" || u,
+          hidden: b !== "collapsed" || u,
           ...s
         }
       )
@@ -567,8 +567,8 @@ export {
   ne as a,
   ce as b,
   ue as c,
-  pe as d,
-  be as e,
+  be as d,
+  pe as e,
   me as f,
   fe as g,
   ge as h,

package/dist/_chunks/utils.js

@@ -1,14 +1,17 @@
-import { g as s, h as t } from "./vendor-utils.js";
-const n = t({
+import { g as d, h as e } from "./vendor-utils.js";
+const t = e({
   extend: {
+    theme: {
+      spacing: ["ds-01", "ds-02", "ds-02b", "ds-03", "ds-04", "ds-05", "ds-05b", "ds-06", "ds-06b", "ds-07", "ds-08", "ds-09", "ds-10", "ds-11", "ds-12", "ds-13"]
+    },
     classGroups: {
       "font-size": [{ "text-ds": ["xs", "sm", "md"] }]
     }
   }
 });
-function o(...e) {
-  return n(s(e));
+function r(...s) {
+  return t(d(s));
 }
 export {
-  o as c
+  r as c
 };

package/dist/composed/avatar-group.js

@@ -1,12 +1,12 @@
 "use client";
-import { jsx as e, jsxs as r } from "react/jsx-runtime";
+import { jsx as e, jsxs as s } from "react/jsx-runtime";
 import * as u from "react";
 import { e as w } from "../_chunks/vendor-utils.js";
-import { c as d } from "../_chunks/utils.js";
+import { c as i } from "../_chunks/utils.js";
 import { A, a as T, b as C } from "../_chunks/avatar.js";
 import { T as I, a as f, b as p, c as h } from "../_chunks/tooltip.js";
 import { getInitials as j } from "./lib/string-utils.js";
-const x = w(
+const v = w(
   "shrink-0 overflow-hidden rounded-ds-full border-2 border-layer-01",
   {
     variants: {
@@ -21,34 +21,34 @@ const x = w(
     }
   }
 ), z = u.forwardRef(
-  ({ users: s, max: l = 4, size: o, showTooltip: b = !0, className: v, ...g }, y) => {
-    const i = s.slice(0, l), m = s.length - l, n = {
+  ({ users: r, max: l = 4, size: d, showTooltip: b = !0, className: x, ...g }, y) => {
+    const o = r.slice(0, l), m = r.length - l, n = {
       sm: "-ml-ds-02b",
       md: "-ml-ds-03",
       lg: "-ml-ds-04"
-    }[o ?? "md"];
-    return /* @__PURE__ */ e(I, { children: /* @__PURE__ */ r(
+    }[d ?? "md"];
+    return /* @__PURE__ */ e(I, { children: /* @__PURE__ */ s(
       "div",
       {
         ref: y,
-        className: d("flex items-center", v),
+        className: i("flex items-center", x),
         ...g,
         children: [
-          i.map((a, t) => {
-            const N = j(a.name), c = /* @__PURE__ */ r(
+          o.map((a, t) => {
+            const N = j(a.name), c = /* @__PURE__ */ s(
               A,
               {
-                className: d(
-                  x({ size: o }),
+                className: i(
+                  v({ size: d }),
                   t > 0 && n
                 ),
-                style: { zIndex: i.length - t },
+                style: { zIndex: o.length - t },
                 children: [
                   a.image && /* @__PURE__ */ e(T, { src: a.image, alt: a.name }),
                   /* @__PURE__ */ e(
                     C,
                     {
-                      className: "bg-field font-body font-semibold text-text-on-color",
+                      className: "font-body font-semibold",
                       children: N
                     }
                   )
@@ -56,7 +56,7 @@ const x = w(
               },
               t
             );
-            return b ? /* @__PURE__ */ r(f, { children: [
+            return b ? /* @__PURE__ */ s(f, { children: [
               /* @__PURE__ */ e(p, { asChild: !0, children: c }),
               /* @__PURE__ */ e(
                 h,
@@ -68,14 +68,14 @@ const x = w(
               )
             ] }, t) : c;
           }),
-          m > 0 && /* @__PURE__ */ r(f, { children: [
-            /* @__PURE__ */ e(p, { asChild: !0, children: /* @__PURE__ */ r(
+          m > 0 && /* @__PURE__ */ s(f, { children: [
+            /* @__PURE__ */ e(p, { asChild: !0, children: /* @__PURE__ */ s(
               "div",
               {
-                className: d(
-                  x({ size: o }),
+                className: i(
+                  v({ size: d }),
                   n,
-                  "flex cursor-default items-center justify-center bg-layer-03 font-body font-semibold text-text-on-color"
+                  "flex cursor-default items-center justify-center bg-interactive-subtle font-body font-semibold text-interactive"
                 ),
                 style: { zIndex: 0 },
                 children: [
@@ -89,7 +89,7 @@ const x = w(
               {
                 className: "border-border bg-layer-01 text-text-primary",
                 sideOffset: 6,
-                children: /* @__PURE__ */ e("div", { className: "flex flex-col gap-ds-01", children: s.slice(l).map((a, t) => /* @__PURE__ */ e("p", { className: "text-ds-sm", children: a.name }, t)) })
+                children: /* @__PURE__ */ e("div", { className: "flex flex-col gap-ds-01", children: r.slice(l).map((a, t) => /* @__PURE__ */ e("p", { className: "text-ds-sm", children: a.name }, t)) })
               }
             )
           ] })

package/dist/tailwind/index.cjs

@@ -1,4 +1,4 @@
-const r = {
+const a = {
   /**
    * Dark mode uses the `.dark` class strategy. If your app uses `darkMode: 'media'`,
    * set it explicitly in your own tailwind.config — your config takes precedence.
@@ -85,6 +85,7 @@ const r = {
         "ds-05": "var(--spacing-05)",
         "ds-05b": "var(--spacing-05b)",
         "ds-06": "var(--spacing-06)",
+        "ds-06b": "var(--spacing-06b)",
         "ds-07": "var(--spacing-07)",
         "ds-08": "var(--spacing-08)",
         "ds-09": "var(--spacing-09)",
@@ -288,6 +289,43 @@ const r = {
         "caret-blink": {
           "0%,70%,100%": { opacity: "1" },
           "20%,50%": { opacity: "0" }
+        },
+        "fade-in": {
+          "0%": { opacity: "0" },
+          "100%": { opacity: "1" }
+        },
+        "fade-out": {
+          "0%": { opacity: "1" },
+          "100%": { opacity: "0" }
+        },
+        "slide-up": {
+          "0%": { opacity: "0", transform: "translateY(8px)" },
+          "100%": { opacity: "1", transform: "translateY(0)" }
+        },
+        "slide-right": {
+          "0%": { opacity: "0", transform: "translateX(20px)" },
+          "100%": { opacity: "1", transform: "translateX(0)" }
+        },
+        "scale-in": {
+          "0%": { opacity: "0", transform: "scale(0.96)" },
+          "100%": { opacity: "1", transform: "scale(1)" }
+        },
+        "scale-out": {
+          "0%": { opacity: "1", transform: "scale(1)" },
+          "100%": { opacity: "0", transform: "scale(0.96)" }
+        },
+        "glow-pulse": {
+          "0%, 100%": { boxShadow: "0 0 0 0 rgba(99, 102, 241, 0)" },
+          "50%": { boxShadow: "0 0 8px 2px rgba(99, 102, 241, 0.15)" }
+        },
+        "scale-bounce": {
+          "0%": { transform: "scale(0.85)" },
+          "60%": { transform: "scale(1.04)" },
+          "100%": { transform: "scale(1)" }
+        },
+        lift: {
+          "0%": { transform: "scale(1) translateY(0)" },
+          "100%": { transform: "scale(1.03) translateY(-2px)" }
         }
       },
       animation: {
@@ -296,7 +334,16 @@ const r = {
         shake: "shake 1s var(--ease-productive-standard) infinite",
         "progress-indeterminate": "progress-indeterminate var(--duration-slow-02) var(--ease-productive-standard) infinite",
         "skeleton-shimmer": "skeleton-shimmer var(--duration-slow-02) var(--ease-linear) infinite",
-        "caret-blink": "caret-blink 1.25s ease-out infinite"
+        "caret-blink": "caret-blink 1.25s ease-out infinite",
+        "fade-in": "fade-in var(--duration-moderate-02) var(--ease-expressive-entrance) both",
+        "fade-out": "fade-out var(--duration-moderate-01) var(--ease-expressive-exit) both",
+        "slide-up": "slide-up var(--duration-moderate-02) var(--ease-expressive-entrance) both",
+        "slide-right": "slide-right var(--duration-moderate-02) var(--ease-expressive-entrance) both",
+        "scale-in": "scale-in var(--duration-moderate-02) var(--ease-expressive-entrance) both",
+        "scale-out": "scale-out var(--duration-moderate-01) var(--ease-expressive-exit) both",
+        "glow-pulse": "glow-pulse var(--duration-slow-01) var(--ease-expressive-standard) 1",
+        "scale-bounce": "scale-bounce var(--duration-moderate-02) var(--ease-bounce) both",
+        lift: "lift var(--duration-moderate-02) var(--ease-expressive-entrance) both"
       },
       backgroundImage: {
         "gradient-brand": "var(--gradient-brand-light)",
@@ -341,7 +388,19 @@ const r = {
         tooltip: "var(--z-tooltip)"
       }
     }
-  }
+  },
+  plugins: [
+    function({ addUtilities: r }) {
+      r({
+        ".delay-stagger": {
+          animationDelay: "calc(var(--stagger-index, 0) * 30ms)"
+        },
+        ".delay-stagger-50": {
+          animationDelay: "calc(var(--stagger-index, 0) * 50ms)"
+        }
+      });
+    }
+  ]
 };
-module.exports = r;
+module.exports = a;
 module.exports.default = module.exports;

package/dist/tailwind/preset.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"preset.d.ts","sourceRoot":"","sources":["../../src/tailwind/preset.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAA;AAEzC,QAAA,MAAM,MAAM,EAAE,OAAO,CAAC,MAAM,CA0V3B,CAAA;AAED,eAAe,MAAM,CAAA"}
+{"version":3,"file":"preset.d.ts","sourceRoot":"","sources":["../../src/tailwind/preset.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAA;AAEzC,QAAA,MAAM,MAAM,EAAE,OAAO,CAAC,MAAM,CAqZ3B,CAAA;AAED,eAAe,MAAM,CAAA"}

package/dist/tailwind/preset.js

@@ -1,4 +1,4 @@
-const r = {
+const a = {
   /**
    * Dark mode uses the `.dark` class strategy. If your app uses `darkMode: 'media'`,
    * set it explicitly in your own tailwind.config — your config takes precedence.
@@ -85,6 +85,7 @@ const r = {
         "ds-05": "var(--spacing-05)",
         "ds-05b": "var(--spacing-05b)",
         "ds-06": "var(--spacing-06)",
+        "ds-06b": "var(--spacing-06b)",
         "ds-07": "var(--spacing-07)",
         "ds-08": "var(--spacing-08)",
         "ds-09": "var(--spacing-09)",
@@ -288,6 +289,43 @@ const r = {
         "caret-blink": {
           "0%,70%,100%": { opacity: "1" },
           "20%,50%": { opacity: "0" }
+        },
+        "fade-in": {
+          "0%": { opacity: "0" },
+          "100%": { opacity: "1" }
+        },
+        "fade-out": {
+          "0%": { opacity: "1" },
+          "100%": { opacity: "0" }
+        },
+        "slide-up": {
+          "0%": { opacity: "0", transform: "translateY(8px)" },
+          "100%": { opacity: "1", transform: "translateY(0)" }
+        },
+        "slide-right": {
+          "0%": { opacity: "0", transform: "translateX(20px)" },
+          "100%": { opacity: "1", transform: "translateX(0)" }
+        },
+        "scale-in": {
+          "0%": { opacity: "0", transform: "scale(0.96)" },
+          "100%": { opacity: "1", transform: "scale(1)" }
+        },
+        "scale-out": {
+          "0%": { opacity: "1", transform: "scale(1)" },
+          "100%": { opacity: "0", transform: "scale(0.96)" }
+        },
+        "glow-pulse": {
+          "0%, 100%": { boxShadow: "0 0 0 0 rgba(99, 102, 241, 0)" },
+          "50%": { boxShadow: "0 0 8px 2px rgba(99, 102, 241, 0.15)" }
+        },
+        "scale-bounce": {
+          "0%": { transform: "scale(0.85)" },
+          "60%": { transform: "scale(1.04)" },
+          "100%": { transform: "scale(1)" }
+        },
+        lift: {
+          "0%": { transform: "scale(1) translateY(0)" },
+          "100%": { transform: "scale(1.03) translateY(-2px)" }
         }
       },
       animation: {
@@ -296,7 +334,16 @@ const r = {
         shake: "shake 1s var(--ease-productive-standard) infinite",
         "progress-indeterminate": "progress-indeterminate var(--duration-slow-02) var(--ease-productive-standard) infinite",
         "skeleton-shimmer": "skeleton-shimmer var(--duration-slow-02) var(--ease-linear) infinite",
-        "caret-blink": "caret-blink 1.25s ease-out infinite"
+        "caret-blink": "caret-blink 1.25s ease-out infinite",
+        "fade-in": "fade-in var(--duration-moderate-02) var(--ease-expressive-entrance) both",
+        "fade-out": "fade-out var(--duration-moderate-01) var(--ease-expressive-exit) both",
+        "slide-up": "slide-up var(--duration-moderate-02) var(--ease-expressive-entrance) both",
+        "slide-right": "slide-right var(--duration-moderate-02) var(--ease-expressive-entrance) both",
+        "scale-in": "scale-in var(--duration-moderate-02) var(--ease-expressive-entrance) both",
+        "scale-out": "scale-out var(--duration-moderate-01) var(--ease-expressive-exit) both",
+        "glow-pulse": "glow-pulse var(--duration-slow-01) var(--ease-expressive-standard) 1",
+        "scale-bounce": "scale-bounce var(--duration-moderate-02) var(--ease-bounce) both",
+        lift: "lift var(--duration-moderate-02) var(--ease-expressive-entrance) both"
       },
       backgroundImage: {
         "gradient-brand": "var(--gradient-brand-light)",
@@ -341,8 +388,20 @@ const r = {
         tooltip: "var(--z-tooltip)"
       }
     }
-  }
+  },
+  plugins: [
+    function({ addUtilities: r }) {
+      r({
+        ".delay-stagger": {
+          animationDelay: "calc(var(--stagger-index, 0) * 30ms)"
+        },
+        ".delay-stagger-50": {
+          animationDelay: "calc(var(--stagger-index, 0) * 50ms)"
+        }
+      });
+    }
+  ]
 };
 export {
-  r as default
+  a as default
 };

package/dist/tokens/primitives.css

@@ -16,6 +16,7 @@
   --pink-800: #6e1433;
   --pink-900: #4d0a1c;
   --pink-950: #2a0510;
+  --pink-1000: #150208;
 
   /* ── Purple scale — secondary accent ────────────────────────── */
   --purple-50:  #f8f6fc;