@devalok/shilp-sutra 0.11.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/semantic.css

@@ -173,6 +173,7 @@
   --spacing-05: 16px;
   --spacing-05b: 20px;
   --spacing-06: 24px;
+  --spacing-06b: 28px;
   --spacing-07: 32px;
   --spacing-08: 40px;
   --spacing-09: 48px;

package/dist/ui/checkbox.js

@@ -1,18 +1,18 @@
 "use client";
 import { jsx as e } from "react/jsx-runtime";
-import { C as r, b as n } from "../_chunks/primitives.js";
+import { C as r, b as d } from "../_chunks/primitives.js";
 import { IconMinus as m, IconCheck as l } from "@tabler/icons-react";
 import * as b from "react";
 import { c as f } from "../_chunks/utils.js";
-const h = b.forwardRef(({ className: o, error: i, indeterminate: a, checked: s, ...c }, d) => {
+const h = b.forwardRef(({ className: i, error: o, indeterminate: a, checked: s, ...c }, n) => {
   const t = a ? "indeterminate" : s;
   return /* @__PURE__ */ e(
     r,
     {
-      ref: d,
+      ref: n,
       checked: t,
       className: f(
-        "peer h-ico-md w-ico-md shrink-0 rounded-ds-sm",
+        "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",
@@ -20,11 +20,11 @@ const h = b.forwardRef(({ className: o, error: i, indeterminate: a, checked: s,
         "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
+        o && "border-border-error",
+        i
       ),
       ...c,
-      children: /* @__PURE__ */ e(n, { className: "flex items-center justify-center text-current", children: t === "indeterminate" ? /* @__PURE__ */ e(m, { className: "h-ico-sm w-ico-sm" }) : /* @__PURE__ */ e(l, { className: "h-ico-sm w-ico-sm" }) })
+      children: /* @__PURE__ */ e(d, { className: "flex items-center justify-center text-current", children: t === "indeterminate" ? /* @__PURE__ */ e(m, { className: "h-ico-sm w-ico-sm" }) : /* @__PURE__ */ e(l, { className: "h-3 w-3" }) })
     }
   );
 });

package/dist/ui/input.js

@@ -1,18 +1,18 @@
 "use client";
 import { jsx as o, jsxs as f } from "react/jsx-runtime";
-import * as v from "react";
-import { e as p } from "../_chunks/vendor-utils.js";
+import * as p from "react";
+import { e as v } from "../_chunks/vendor-utils.js";
 import { c as x } from "../_chunks/utils.js";
 import { u as g } from "../_chunks/form.js";
-const h = p(
+const h = v(
   [
     "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"
   ],
@@ -26,7 +26,7 @@ const h = p(
     },
     defaultVariants: { size: "md" }
   }
-), y = v.forwardRef(
+), y = p.forwardRef(
   ({ className: d, type: l, state: n, size: c, startIcon: e, endIcon: r, ...t }, u) => {
     const s = g(), i = n ?? (s.state === "helper" ? void 0 : s.state), b = t["aria-describedby"] ?? s.helperTextId, m = t["aria-required"] ?? s.required, a = /* @__PURE__ */ o(
       "input",
@@ -34,8 +34,8 @@ const h = p(
         type: l,
         className: x(
           h({ size: c }),
-          e && "pl-ds-08",
-          r && "pr-ds-08",
+          e && "pl-ds-07",
+          r && "pr-ds-07",
           i === "error" && "border-border-error focus-visible:ring-error",
           i === "warning" && "border-border-warning focus-visible:ring-warning",
           i === "success" && "border-border-success focus-visible:ring-success",

package/dist/ui/lib/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/ui/lib/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,UAAU,EAAE,MAAM,MAAM,CAAA;AAW5C,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,UAEzC"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/ui/lib/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,UAAU,EAAE,MAAM,MAAM,CAAA;AAc5C,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,UAEzC"}

package/dist/ui/lib/utils.js

@@ -1,14 +1,17 @@
-import { h as s, g as t } from "../../_chunks/vendor-utils.js";
-const n = s({
+import { h as d, g as e } from "../../_chunks/vendor-utils.js";
+const t = d({
   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(t(e));
+function r(...s) {
+  return t(e(s));
 }
 export {
-  o as cn
+  r as cn
 };

package/llms-full.txt

@@ -5,7 +5,7 @@
 > All variant values and props verified from source CVA definitions.
 >
 > Package: @devalok/shilp-sutra
-> Version: 0.10.0
+> Version: 0.12.0
 
 ---
 
@@ -594,6 +594,7 @@ Note: getFormFieldA11y() was removed in favor of useFormField() hook.
     - HTML native "size" attribute is excluded — use CSS width instead
     - state="error" sets aria-invalid automatically
     - Inside FormField: auto-inherits state, aria-describedby, aria-required from context (explicit props override)
+    - Resting border is border-subtle (soft); focus ring is ring-1 at 50% opacity (v0.12.0)
 
 ## InputOTP
 - Import: @devalok/shilp-sutra/ui/input-otp

package/llms.txt

@@ -4,6 +4,11 @@
 > Built on the same primitives as shadcn/ui but with key API differences.
 > Read this file BEFORE writing any UI code. Do NOT guess from shadcn/ui knowledge.
 
+## CHANGES (v0.12.0)
+- Input: Softer resting border (border-subtle instead of border), subtler focus ring (ring-1 ring-focus/50 instead of ring-2 ring-focus)
+- Tailwind preset: 9 animation keyframes + utilities (fade-in, fade-out, slide-up, slide-right, scale-in, scale-out, glow-pulse, scale-bounce, lift)
+- Tailwind preset: Stagger plugins — .delay-stagger (30ms × --stagger-index), .delay-stagger-50 (50ms × --stagger-index)
+
 ## BREAKING CHANGES (v0.11.0 — dark mode)
 - Dark mode interactive colors shifted: --color-interactive pink-400→pink-500, --color-interactive-hover pink-300→pink-600, --color-interactive-active pink-200→pink-700, --color-interactive-subtle pink-950→pink-1000
 - Dark mode text status colors shifted: --color-text-error red-200→red-300, --color-text-success green-200→green-300, --color-text-warning yellow-200→yellow-300, --color-text-link blue-200→blue-300, --color-text-brand pink-300→pink-400

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devalok/shilp-sutra",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "description": "Devalok Design System — tokens, components, and patterns for Next.js",
   "license": "MIT",
   "type": "module",