@devalok/shilp-sutra 0.21.0 → 0.22.0

package/dist/ui/switch.js

@@ -1,35 +1,36 @@
 "use client";
-import { jsx as o } from "react/jsx-runtime";
-import * as t from "react";
-import { am as i, an as u } from "../_chunks/primitives.js";
+import { jsx as s } from "react/jsx-runtime";
+import * as a from "react";
+import { am as i, an as p } from "../_chunks/primitives.js";
 import { springs as g } from "./lib/motion.js";
 import { cn as h } from "./lib/utils.js";
 import { m as w } from "../_chunks/framer.js";
-const v = t.forwardRef(({ className: n, error: d, checked: r, defaultChecked: e, onCheckedChange: s, ...c }, l) => {
-  const [m, f] = t.useState(e ?? !1), b = r !== void 0 ? r : m, p = t.useCallback(
-    (a) => {
-      r === void 0 && f(a), s == null || s(a);
+const v = a.forwardRef(({ className: n, error: d, checked: r, defaultChecked: t, onCheckedChange: e, ...c }, l) => {
+  const [m, f] = a.useState(t ?? !1), b = r !== void 0 ? r : m, u = a.useCallback(
+    (o) => {
+      r === void 0 && f(o), e == null || e(o);
     },
-    [r, s]
+    [r, e]
   );
-  return /* @__PURE__ */ o(
+  return /* @__PURE__ */ s(
     i,
     {
       className: h(
-        "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-ds-full border-2 border-surface-border-strong shadow-01 transition-colors duration-fast-01 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-action-disabled data-[state=checked]:border-transparent data-[state=checked]:bg-accent-9 data-[state=unchecked]:bg-surface-border-strong",
+        "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-ds-full border-2 border-surface-border-strong shadow-01 transition-colors duration-fast-01 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-action-disabled data-[state=checked]:border-transparent data-[state=checked]:bg-accent-9 data-[state=unchecked]:bg-surface-border-strong data-[state=unchecked]:hover:bg-surface-4",
         d && "border-error-7 data-[state=checked]:bg-error-9",
         n
       ),
       checked: r,
-      defaultChecked: e,
-      onCheckedChange: p,
+      defaultChecked: t,
+      onCheckedChange: u,
       ...c,
       ref: l,
-      children: /* @__PURE__ */ o(u, { asChild: !0, children: /* @__PURE__ */ o(
+      children: /* @__PURE__ */ s(p, { asChild: !0, children: /* @__PURE__ */ s(
         w.span,
         {
           className: "pointer-events-none block h-ico-md w-ico-md rounded-ds-full bg-accent-fg shadow-02 ring-0",
           animate: { x: b ? 20 : 0 },
+          whileTap: { scale: 0.85 },
           transition: g.snappy
         }
       ) })

package/dist/ui/tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../src/ui/tabs.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,aAAa,MAAM,wBAAwB,CAAA;AACvD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAQjE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,QAAA,MAAM,IAAI,mJAgCR,CAAA;AAGF,0EAA0E;AAC1E,MAAM,MAAM,SAAS,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,aAAa,CAAC,IAAI,CAAC,CAAA;AAQjF,QAAA,MAAM,gBAAgB;;8EASpB,CAAA;AAEF,QAAA,MAAM,mBAAmB;;8EAmBxB,CAAA;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,WAAW,aACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,aAAa,CAAC,IAAI,CAAC,EAC/D,YAAY,CAAC,OAAO,gBAAgB,CAAC;CAAG;AAE5C,QAAA,MAAM,QAAQ,sFAqBZ,CAAA;AAGF,MAAM,WAAW,gBACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,aAAa,CAAC,OAAO,CAAC,EAClE,YAAY,CAAC,OAAO,mBAAmB,CAAC;CAAG;AAE/C,QAAA,MAAM,WAAW,4FAmCf,CAAA;AAGF,QAAA,MAAM,WAAW,0JAYf,CAAA;AAGF,kFAAkF;AAClF,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,aAAa,CAAC,OAAO,CAAC,CAAA;AAE3F,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,WAAW,EAAE,WAAW,EAAE,CAAA"}
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../src/ui/tabs.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,aAAa,MAAM,wBAAwB,CAAA;AACvD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAQjE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,QAAA,MAAM,IAAI,mJAgCR,CAAA;AAGF,0EAA0E;AAC1E,MAAM,MAAM,SAAS,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,aAAa,CAAC,IAAI,CAAC,CAAA;AAQjF,QAAA,MAAM,gBAAgB;;8EASpB,CAAA;AAEF,QAAA,MAAM,mBAAmB;;8EAmBxB,CAAA;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,WAAW,aACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,aAAa,CAAC,IAAI,CAAC,EAC/D,YAAY,CAAC,OAAO,gBAAgB,CAAC;CAAG;AAE5C,QAAA,MAAM,QAAQ,sFAqBZ,CAAA;AAGF,MAAM,WAAW,gBACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,aAAa,CAAC,OAAO,CAAC,EAClE,YAAY,CAAC,OAAO,mBAAmB,CAAC;CAAG;AAE/C,QAAA,MAAM,WAAW,4FAmCf,CAAA;AAGF,QAAA,MAAM,WAAW,0JAoBf,CAAA;AAGF,kFAAkF;AAClF,MAAM,MAAM,gBAAgB,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,aAAa,CAAC,OAAO,CAAC,CAAA;AAE3F,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,WAAW,EAAE,WAAW,EAAE,CAAA"}

package/dist/ui/tabs.js

@@ -1,30 +1,30 @@
 "use client";
 import { jsx as s, jsxs as N } from "react/jsx-runtime";
-import { aS as T, aT as v, aU as b, aV as g } from "../_chunks/primitives.js";
+import { aS as h, aT as v, aU as b, aV as p } from "../_chunks/primitives.js";
 import * as t from "react";
-import { ag as p } from "../_chunks/vendor-utils.js";
-import { cn as f } from "./lib/utils.js";
-import { springs as u } from "./lib/motion.js";
-import { L as h, m } from "../_chunks/framer.js";
-const x = t.createContext(void 0), I = t.forwardRef(({ value: e, defaultValue: i, onValueChange: a, ...r }, o) => {
-  const [n, c] = t.useState(e ?? i ?? "");
+import { ag as g } from "../_chunks/vendor-utils.js";
+import { cn as u } from "./lib/utils.js";
+import { springs as m, tweens as T } from "./lib/motion.js";
+import { L as w, m as f } from "../_chunks/framer.js";
+const x = t.createContext(void 0), I = t.forwardRef(({ value: a, defaultValue: i, onValueChange: e, ...n }, r) => {
+  const [o, c] = t.useState(a ?? i ?? "");
   t.useEffect(() => {
-    e !== void 0 && c(e);
-  }, [e]);
+    a !== void 0 && c(a);
+  }, [a]);
   const d = t.useCallback(
     (l) => {
-      c(l), a == null || a(l);
+      c(l), e == null || e(l);
     },
-    [a]
+    [e]
   );
-  return /* @__PURE__ */ s(x.Provider, { value: n, children: /* @__PURE__ */ s(
-    T,
+  return /* @__PURE__ */ s(x.Provider, { value: o, children: /* @__PURE__ */ s(
+    h,
     {
-      ref: o,
-      value: e,
-      defaultValue: e === void 0 ? i : void 0,
+      ref: r,
+      value: a,
+      defaultValue: a === void 0 ? i : void 0,
       onValueChange: d,
-      ...r
+      ...n
     }
   ) });
 });
@@ -32,7 +32,7 @@ I.displayName = "Tabs";
 const y = t.createContext({
   variant: "line",
   layoutId: "tab-indicator"
-}), w = p("inline-flex items-center", {
+}), C = g("inline-flex items-center", {
   variants: {
     variant: {
       line: "border-b border-surface-border-strong w-full gap-0",
@@ -40,7 +40,7 @@ const y = t.createContext({
     }
   },
   defaultVariants: { variant: "line" }
-}), C = p(
+}), L = g(
   "relative inline-flex items-center justify-center gap-ds-02 whitespace-nowrap font-sans text-ds-md font-medium transition-colors duration-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-1 disabled:pointer-events-none disabled:opacity-action-disabled",
   {
     variants: {
@@ -59,67 +59,76 @@ const y = t.createContext({
     },
     defaultVariants: { variant: "line" }
   }
-), L = t.forwardRef(({ className: e, variant: i, ...a }, r) => {
-  const o = i ?? "line", n = t.useId(), c = t.useMemo(
-    () => ({ variant: o, layoutId: `tab-indicator-${n}` }),
-    [o, n]
+), R = t.forwardRef(({ className: a, variant: i, ...e }, n) => {
+  const r = i ?? "line", o = t.useId(), c = t.useMemo(
+    () => ({ variant: r, layoutId: `tab-indicator-${o}` }),
+    [r, o]
   );
-  return /* @__PURE__ */ s(y.Provider, { value: c, children: /* @__PURE__ */ s(h, { children: /* @__PURE__ */ s(
+  return /* @__PURE__ */ s(y.Provider, { value: c, children: /* @__PURE__ */ s(w, { children: /* @__PURE__ */ s(
     v,
     {
-      ref: r,
-      className: f(w({ variant: o }), e),
-      ...a
+      ref: n,
+      className: u(C({ variant: r }), a),
+      ...e
     }
   ) }) });
 });
-L.displayName = v.displayName;
-const R = t.forwardRef(({ className: e, variant: i, children: a, ...r }, o) => {
-  const n = t.useContext(y), c = t.useContext(x), d = i ?? n.variant, l = r.value === c;
+R.displayName = v.displayName;
+const V = t.forwardRef(({ className: a, variant: i, children: e, ...n }, r) => {
+  const o = t.useContext(y), c = t.useContext(x), d = i ?? o.variant, l = n.value === c;
   return /* @__PURE__ */ N(
     b,
     {
-      ref: o,
-      className: f(C({ variant: d }), e),
-      ...r,
+      ref: r,
+      className: u(L({ variant: d }), a),
+      ...n,
       children: [
         d === "contained" && l && /* @__PURE__ */ s(
-          m.span,
+          f.span,
           {
-            layoutId: `${n.layoutId}-contained`,
+            layoutId: `${o.layoutId}-contained`,
             className: "absolute inset-0 rounded-ds-md bg-surface-1 shadow-01",
-            transition: u.smooth
+            transition: m.smooth
           }
         ),
-        /* @__PURE__ */ s("span", { className: "relative z-[1] inline-flex items-center gap-ds-02", children: a }),
+        /* @__PURE__ */ s("span", { className: "relative z-[1] inline-flex items-center gap-ds-02", children: e }),
         d === "line" && l && /* @__PURE__ */ s(
-          m.span,
+          f.span,
           {
-            layoutId: `${n.layoutId}-line`,
+            layoutId: `${o.layoutId}-line`,
             className: "absolute bottom-0 left-0 right-0 h-0.5 bg-accent-9",
-            transition: u.smooth
+            transition: m.smooth
           }
         )
       ]
     }
   );
 });
-R.displayName = b.displayName;
-const V = t.forwardRef(({ className: e, ...i }, a) => /* @__PURE__ */ s(
-  g,
+V.displayName = b.displayName;
+const j = t.forwardRef(({ className: a, children: i, ...e }, n) => /* @__PURE__ */ s(
+  p,
   {
-    ref: a,
-    className: f(
+    ref: n,
+    className: u(
       "mt-ds-05 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2",
-      e
+      a
     ),
-    ...i
+    ...e,
+    children: /* @__PURE__ */ s(
+      f.div,
+      {
+        initial: { opacity: 0 },
+        animate: { opacity: 1 },
+        transition: T.fade,
+        children: i
+      }
+    )
   }
 ));
-V.displayName = g.displayName;
+j.displayName = p.displayName;
 export {
   I as Tabs,
-  V as TabsContent,
-  L as TabsList,
-  R as TabsTrigger
+  j as TabsContent,
+  R as TabsList,
+  V as TabsTrigger
 };

package/dist/ui/textarea.js

@@ -1,19 +1,19 @@
 "use client";
 import { jsx as c } from "react/jsx-runtime";
-import * as l from "react";
-import { ag as f } from "../_chunks/vendor-utils.js";
-import { cn as u } from "./lib/utils.js";
+import * as u from "react";
+import { ag as l } from "../_chunks/vendor-utils.js";
+import { cn as f } from "./lib/utils.js";
 import { motionProps as m } from "./lib/motion.js";
 import { useFormField as b } from "./form.js";
-import { m as x } from "../_chunks/framer.js";
-const p = f(
+import { m as p } from "../_chunks/framer.js";
+const x = l(
   [
-    "flex w-full font-sans resize-y",
+    "flex w-full font-sans resize-y cursor-ns-resize",
     "bg-surface-3 text-surface-fg",
     "border border-surface-border-strong rounded-ds-md",
     "placeholder:text-surface-fg-subtle",
     "hover:bg-surface-4",
-    "transition-colors duration-fast-01",
+    "transition-colors duration-fast-01 ease-productive-standard",
     "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:border-accent-7",
     "disabled:cursor-not-allowed disabled:opacity-action-disabled",
     "read-only:bg-surface-2 read-only:cursor-default"
@@ -28,21 +28,21 @@ const p = f(
     },
     defaultVariants: { size: "md" }
   }
-), g = l.forwardRef(
-  ({ className: i, state: a, size: o, ...s }, t) => {
-    const r = b(), e = a ?? (r.state === "helper" ? void 0 : r.state), d = s["aria-describedby"] ?? r.helperTextId, n = s["aria-required"] ?? r.required;
+), g = u.forwardRef(
+  ({ className: a, state: i, size: o, ...s }, t) => {
+    const r = b(), e = i ?? (r.state === "helper" ? void 0 : r.state), d = s["aria-describedby"] ?? r.helperTextId, n = s["aria-required"] ?? r.required;
     return /* @__PURE__ */ c(
-      x.textarea,
+      p.textarea,
       {
         "aria-invalid": e === "error" || void 0,
         "aria-describedby": d,
         "aria-required": n || void 0,
-        className: u(
-          p({ size: o }),
+        className: f(
+          x({ size: o }),
           e === "error" && "border-error-7 focus-visible:ring-error-7",
           e === "warning" && "border-warning-7 focus-visible:ring-warning-7",
           e === "success" && "border-success-7 focus-visible:ring-success-7",
-          i
+          a
         ),
         ref: t,
         ...m(s)
@@ -53,5 +53,5 @@ const p = f(
 g.displayName = "Textarea";
 export {
   g as Textarea,
-  p as textareaVariants
+  x as textareaVariants
 };

package/dist/ui/toast.js

@@ -149,7 +149,7 @@ function I({
                 {
                   type: "button",
                   onClick: r.onClick,
-                  className: "text-ds-sm font-medium text-accent-11 underline-offset-2 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:rounded-ds-sm",
+                  className: "text-ds-sm font-medium text-accent-11 underline-offset-2 hover:underline hover:bg-surface-3 rounded-ds-sm px-ds-02 py-ds-01 transition-[color,background-color] duration-fast-01 ease-productive-standard focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:rounded-ds-sm",
                   children: r.label
                 }
               ),

package/dist/ui/toggle.js

@@ -7,12 +7,12 @@ import { springs as m, motionProps as c } from "./lib/motion.js";
 import { cn as f } from "./lib/utils.js";
 import { m as l } from "../_chunks/framer.js";
 const p = l.create(t), g = d(
-  "inline-flex items-center justify-center gap-ds-03 rounded-ds-md font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-action-disabled data-[state=on]:bg-accent-2 data-[state=on]:text-accent-11",
+  "inline-flex items-center justify-center gap-ds-03 rounded-ds-md font-medium transition-colors duration-fast-01 ease-productive-standard focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent-9 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-action-disabled data-[state=on]:bg-accent-2 data-[state=on]:text-accent-11",
   {
     variants: {
       variant: {
         default: "bg-transparent hover:bg-surface-3 text-surface-fg-muted",
-        outline: "border border-surface-border-strong bg-transparent hover:bg-surface-3"
+        outline: "border border-surface-border-strong bg-transparent hover:bg-surface-3 hover:border-surface-border-strong"
       },
       size: {
         sm: "h-ds-sm px-ds-03 text-ds-sm",
@@ -25,14 +25,14 @@ const p = l.create(t), g = d(
       size: "md"
     }
   }
-), u = n.forwardRef(({ className: e, variant: s, size: a, ...o }, r) => /* @__PURE__ */ i(
+), u = n.forwardRef(({ className: e, variant: s, size: o, ...a }, r) => /* @__PURE__ */ i(
   p,
   {
     ref: r,
     whileTap: { scale: 0.95 },
     transition: m.snappy,
-    className: f(g({ variant: s, size: a }), e),
-    ...c(o)
+    className: f(g({ variant: s, size: o }), e),
+    ...c(a)
   }
 ));
 u.displayName = t.displayName;

package/dist/ui/tooltip.d.ts

@@ -1,10 +1,6 @@
 "use client";
 import * as React from 'react';
 import * as TooltipPrimitive from '../primitives/react-tooltip';
-/**
- * Explicit TooltipProvider — wrap your app root for shared delay/skip behavior.
- * If you don't add one, each Tooltip auto-creates its own provider.
- */
 declare const TooltipProvider: React.FC<React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Provider>>;
 declare const Tooltip: React.FC<React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Root>>;
 declare const TooltipTrigger: React.ForwardRefExoticComponent<TooltipPrimitive.TooltipTriggerProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/ui/tooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../src/ui/tooltip.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,gBAAgB,MAAM,2BAA2B,CAAA;AAM7D;;;GAGG;AACH,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,wBAAwB,CAAC,OAAO,gBAAgB,CAAC,QAAQ,CAAC,CAS/F,CAAA;AA4BD,QAAA,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,wBAAwB,CAAC,OAAO,gBAAgB,CAAC,IAAI,CAAC,CA2BnF,CAAA;AAGD,QAAA,MAAM,cAAc,gHAA2B,CAAA;AAW/C,QAAA,MAAM,cAAc,gKAoClB,CAAA;AAGF,MAAM,MAAM,mBAAmB,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,gBAAgB,CAAC,OAAO,CAAC,CAAA;AAEjG,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,eAAe,EAAE,CAAA"}
+{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../src/ui/tooltip.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,gBAAgB,MAAM,2BAA2B,CAAA;AAU7D,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,wBAAwB,CAAC,OAAO,gBAAgB,CAAC,QAAQ,CAAC,CAS/F,CAAA;AAmBD,QAAA,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,wBAAwB,CAAC,OAAO,gBAAgB,CAAC,IAAI,CAAC,CA2BnF,CAAA;AAGD,QAAA,MAAM,cAAc,gHAA2B,CAAA;AAW/C,QAAA,MAAM,cAAc,gKAoClB,CAAA;AAGF,MAAM,MAAM,mBAAmB,GAAG,KAAK,CAAC,wBAAwB,CAAC,OAAO,gBAAgB,CAAC,OAAO,CAAC,CAAA;AAEjG,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,eAAe,EAAE,CAAA"}

package/dist/ui/tooltip.js

@@ -1,48 +1,48 @@
 "use client";
-import { jsx as t, Fragment as x } from "react/jsx-runtime";
+import { jsx as t, Fragment as y } from "react/jsx-runtime";
 import * as o from "react";
-import { aK as y, aL as f, aM as h, aN as P, aO as T } from "../_chunks/primitives.js";
+import { aK as h, aL as f, aM as P, aN as u, aO as T } from "../_chunks/primitives.js";
 import { cn as C } from "./lib/utils.js";
 import { tweens as g, springs as N } from "./lib/motion.js";
 import { A as b, m as w } from "../_chunks/framer.js";
-const M = ({
+const d = o.createContext(!1), F = ({
   children: e,
   ...s
-}) => /* @__PURE__ */ t(d.Provider, { value: !0, children: /* @__PURE__ */ t(P, { ...s, children: e }) }), d = o.createContext(!1);
-function A({ children: e }) {
-  return o.useContext(d) ? /* @__PURE__ */ t(x, { children: e }) : /* @__PURE__ */ t(d.Provider, { value: !0, children: /* @__PURE__ */ t(M, { delayDuration: 300, children: e }) });
+}) => /* @__PURE__ */ t(d.Provider, { value: !0, children: /* @__PURE__ */ t(u, { ...s, children: e }) });
+function M({ children: e }) {
+  return o.useContext(d) ? /* @__PURE__ */ t(y, { children: e }) : /* @__PURE__ */ t(d.Provider, { value: !0, children: /* @__PURE__ */ t(u, { delayDuration: 300, children: e }) });
 }
-const m = o.createContext({ open: !1 }), R = ({
+const m = o.createContext({ open: !1 }), A = ({
   open: e,
   defaultOpen: s,
   onOpenChange: r,
   ...n
 }) => {
-  const [c, l] = o.useState(s ?? !1), a = e !== void 0, i = a ? e : c, u = o.useCallback(
+  const [l, c] = o.useState(s ?? !1), a = e !== void 0, i = a ? e : l, v = o.useCallback(
     (p) => {
-      a || l(p), r == null || r(p);
+      a || c(p), r == null || r(p);
     },
     [a, r]
-  ), v = o.useMemo(() => ({ open: i }), [i]);
-  return /* @__PURE__ */ t(A, { children: /* @__PURE__ */ t(m.Provider, { value: v, children: /* @__PURE__ */ t(T, { open: i, onOpenChange: u, ...n }) }) });
+  ), x = o.useMemo(() => ({ open: i }), [i]);
+  return /* @__PURE__ */ t(M, { children: /* @__PURE__ */ t(m.Provider, { value: x, children: /* @__PURE__ */ t(T, { open: i, onOpenChange: v, ...n }) }) });
 };
-R.displayName = "Tooltip";
-const K = h, I = {
+A.displayName = "Tooltip";
+const K = P, R = {
   top: { y: 4 },
   bottom: { y: -4 },
   left: { x: 4 },
   right: { x: -4 }
-}, O = o.forwardRef(({ className: e, sideOffset: s = 4, side: r = "top", children: n, ...c }, l) => {
-  const { open: a } = o.useContext(m), i = I[r] ?? {};
-  return /* @__PURE__ */ t(b, { children: a && /* @__PURE__ */ t(y, { forceMount: !0, children: /* @__PURE__ */ t(
+}, I = o.forwardRef(({ className: e, sideOffset: s = 4, side: r = "top", children: n, ...l }, c) => {
+  const { open: a } = o.useContext(m), i = R[r] ?? {};
+  return /* @__PURE__ */ t(b, { children: a && /* @__PURE__ */ t(h, { forceMount: !0, children: /* @__PURE__ */ t(
     f,
     {
-      ref: l,
+      ref: c,
       forceMount: !0,
-      asChild: !0,
       sideOffset: s,
       side: r,
-      ...c,
+      ...l,
+      asChild: !0,
       children: /* @__PURE__ */ t(
         w.div,
         {
@@ -51,7 +51,7 @@ const K = h, I = {
           exit: { opacity: 0, scale: 0.95, ...i },
           transition: { ...N.snappy, opacity: g.fade },
           className: C(
-            "z-tooltip overflow-hidden rounded-ds-md bg-surface-fg px-ds-04 py-ds-02b text-ds-sm text-accent-fg shadow-02",
+            "z-tooltip overflow-hidden rounded-ds-md bg-surface-fg px-ds-04 py-ds-02b text-ds-sm text-surface-1 shadow-02",
             e
           ),
           children: n
@@ -60,10 +60,10 @@ const K = h, I = {
     }
   ) }) });
 });
-O.displayName = f.displayName;
+I.displayName = f.displayName;
 export {
-  R as Tooltip,
-  O as TooltipContent,
-  M as TooltipProvider,
+  A as Tooltip,
+  I as TooltipContent,
+  F as TooltipProvider,
   K as TooltipTrigger
 };

package/docs/components/ui/avatar.md

@@ -39,6 +39,9 @@
 - Online status dot pulses with a CSS animation
 
 ## Changes
+### v0.22.0
+- **Fixed** Fallback always rendered `rounded-ds-full` regardless of `shape` prop. Now uses `AvatarShapeContext` to inherit the correct border-radius from `shape="square"` or `shape="rounded"`.
+
 ### v0.21.0
 - **Added** `ring` prop with semantic role colors (`lead`, `admin`, `client`)
 - **Added** `badge` prop for numeric, dot, or custom ReactNode overlay at top-right

package/docs/components/ui/button.md

@@ -36,6 +36,11 @@
 - onClickAsync overrides onClick and loading when active
 
 ## Changes
+### v0.22.0
+- **Changed** Active/pressed scale from `0.97` to `0.95` for snappier press feedback.
+- **Fixed** Ghost/outline hover not fading — `transition-transform` in base overrode `transition-colors` from variant. Combined into single `transition-[color,background-color,border-color,box-shadow,transform]`.
+- **Added** `disabled:cursor-not-allowed` to button base (was missing).
+
 ### v0.18.0
 - **Added** `onClickAsync` prop — promise-driven loading -> success/error state machine
 - **Added** `asyncFeedbackDuration` prop (default 1500ms)

package/docs/components/ui/checkbox.md

@@ -23,6 +23,11 @@
 - indeterminate overrides checked visually
 
 ## Changes
+### v0.22.0
+- **Changed** Check indicator animation from scale-bounce to path-draw (stroke draws progressively). Indeterminate dash also draws in.
+- **Fixed** Uncontrolled checkbox never showed checkmark — `checked` from props was `undefined`, so `isActive` was always `false`. Now tracks internal state.
+- **Added** Hover state on unchecked checkbox (subtle background highlight).
+
 ### v0.18.0
 - **Changed** Bouncy check indicator animation migrated to Framer Motion
 - **Fixed** Icon sizing uses design tokens consistently

package/docs/components/ui/dropdown-menu.md

@@ -35,6 +35,9 @@
 - Use `asChild` on DropdownMenuTrigger to render your own button element
 
 ## Changes
+### v0.22.0
+- **Added** Hover state on `DropdownMenuItem` — was completely missing. Items now show `bg-surface-3` on hover with `ease-productive-standard` transition.
+
 ### v0.18.0
 - **Added** `DropdownMenuContentProps`, `DropdownMenuItemProps` type exports
 

package/docs/components/ui/separator.md

@@ -22,6 +22,9 @@
 - When decorative is true, the separator is hidden from screen readers
 
 ## Changes
+### v0.22.0
+- **Added** `variant` prop: `"gradient"` (fades both edges), `"gradient-left"` (fades left), `"gradient-right"` (fades right). Default behavior unchanged.
+
 ### v0.4.2
 - **Added** `SeparatorProps` type export
 

package/docs/components/ui/tooltip.md

@@ -24,6 +24,11 @@
 - TooltipProvider is REQUIRED — without it, tooltips won't show
 
 ## Changes
+### v0.22.0
+- **Added** Auto-provider: `<Tooltip>` now auto-wraps with `<TooltipProvider>` when no ancestor provider exists. No more "tooltip doesn't appear" issues.
+- **Fixed** Content children not rendering — `motion.div` was self-closing (`/>`), so children were never passed through.
+- **Fixed** Text invisible in dark mode — `text-accent-fg` resolves to same value as `bg-surface-fg` in dark mode. Changed to `text-surface-1`.
+
 ### v0.18.0
 - **Changed** Migrated to Framer Motion for enter/exit animations
 - **Added** `TooltipContentProps` type export

package/llms-full.txt

@@ -5,7 +5,7 @@
 > All variant values and props verified from source CVA definitions.
 >
 > Package: @devalok/shilp-sutra
-> Version: 0.21.0
+> Version: 0.22.0
 
 ---
 
@@ -358,6 +358,9 @@ Note: getFormFieldA11y() was removed in favor of useFormField() hook.
 - Online status dot pulses with a CSS animation
 
 ## Changes
+### v0.22.0
+- **Fixed** Fallback always rendered `rounded-ds-full` regardless of `shape` prop. Now uses `AvatarShapeContext` to inherit the correct border-radius from `shape="square"` or `shape="rounded"`.
+
 ### v0.21.0
 - **Added** `ring` prop with semantic role colors (`lead`, `admin`, `client`)
 - **Added** `badge` prop for numeric, dot, or custom ReactNode overlay at top-right
@@ -531,6 +534,11 @@ Note: getFormFieldA11y() was removed in favor of useFormField() hook.
 - onClickAsync overrides onClick and loading when active
 
 ## Changes
+### v0.22.0
+- **Changed** Active/pressed scale from `0.97` to `0.95` for snappier press feedback.
+- **Fixed** Ghost/outline hover not fading — `transition-transform` in base overrode `transition-colors` from variant. Combined into single `transition-[color,background-color,border-color,box-shadow,transform]`.
+- **Added** `disabled:cursor-not-allowed` to button base (was missing).
+
 ### v0.18.0
 - **Added** `onClickAsync` prop — promise-driven loading -> success/error state machine
 - **Added** `asyncFeedbackDuration` prop (default 1500ms)
@@ -696,6 +704,11 @@ import { BarChart } from '@devalok/shilp-sutra/ui/charts'
 - indeterminate overrides checked visually
 
 ## Changes
+### v0.22.0
+- **Changed** Check indicator animation from scale-bounce to path-draw (stroke draws progressively). Indeterminate dash also draws in.
+- **Fixed** Uncontrolled checkbox never showed checkmark — `checked` from props was `undefined`, so `isActive` was always `false`. Now tracks internal state.
+- **Added** Hover state on unchecked checkbox (subtle background highlight).
+
 ### v0.18.0
 - **Changed** Bouncy check indicator animation migrated to Framer Motion
 - **Fixed** Icon sizing uses design tokens consistently
@@ -1203,6 +1216,9 @@ import { DataTableToolbar } from '@devalok/shilp-sutra/ui/data-table-toolbar'
 - Use `asChild` on DropdownMenuTrigger to render your own button element
 
 ## Changes
+### v0.22.0
+- **Added** Hover state on `DropdownMenuItem` — was completely missing. Items now show `bg-surface-3` on hover with `ease-productive-standard` transition.
+
 ### v0.18.0
 - **Added** `DropdownMenuContentProps`, `DropdownMenuItemProps` type exports
 
@@ -1955,6 +1971,9 @@ import { DataTableToolbar } from '@devalok/shilp-sutra/ui/data-table-toolbar'
 - When decorative is true, the separator is hidden from screen readers
 
 ## Changes
+### v0.22.0
+- **Added** `variant` prop: `"gradient"` (fades both edges), `"gradient-left"` (fades left), `"gradient-right"` (fades right). Default behavior unchanged.
+
 ### v0.4.2
 - **Added** `SeparatorProps` type export
 
@@ -2816,6 +2835,11 @@ export default function RootLayout({ children }) {
 - TooltipProvider is REQUIRED — without it, tooltips won't show
 
 ## Changes
+### v0.22.0
+- **Added** Auto-provider: `<Tooltip>` now auto-wraps with `<TooltipProvider>` when no ancestor provider exists. No more "tooltip doesn't appear" issues.
+- **Fixed** Content children not rendering — `motion.div` was self-closing (`/>`), so children were never passed through.
+- **Fixed** Text invisible in dark mode — `text-accent-fg` resolves to same value as `bg-surface-fg` in dark mode. Changed to `text-surface-1`.
+
 ### v0.18.0
 - **Changed** Migrated to Framer Motion for enter/exit animations
 - **Added** `TooltipContentProps` type export

package/llms.txt

@@ -85,6 +85,26 @@
 - Dark mode: algorithmically derived (OKLCH curves), NOT hex overrides. Surfaces lighten with elevation.
 - If you reference --pink-500 etc directly, migrate: 50→1, 100→2, 200→3, 300→4, 400→5, 500→7, 600→8, 700→9, 800→10, 900→11, 950→12
 
+## v0.22.0 — UI Polish & Micro-Refinement
+
+**Shadows**: All shadow tokens now use 3-layer stacks. Visual change only — same token names.
+
+**Transitions**: All CSS transitions use `ease-productive-standard` easing. Tween presets aligned: `tweens.fade` = 0.11s, `tweens.colorShift` = 0.07s.
+
+**New Tailwind utilities**:
+- `.focus-ring` / `.focus-ring-inset` / `.focus-ring-sm` — consistent keyboard focus styling
+- `.tabular-nums` — aligned numbers via `font-variant-numeric: tabular-nums`
+
+**Separator**: New `variant` prop — `"gradient" | "gradient-left" | "gradient-right"`. Default unchanged.
+
+**Checkbox**: Path-draw animation (stroke draws progressively). Uncontrolled usage now works.
+
+**Tooltip**: Auto-wraps with `<TooltipProvider>` — no manual provider needed. Text color fixed for dark mode.
+
+**Avatar fallback**: Now respects `shape` prop (was always circle).
+
+**New hover states**: Checkbox, Radio, Switch track, Select items, DropdownMenu items, Combobox trigger.
+
 ## Install & Setup
 
 pnpm add @devalok/shilp-sutra

package/package.json

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