@devalok/shilp-sutra 0.20.1 → 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,7 +1,7 @@
 "use client";
 import * as React from 'react';
 import * as TooltipPrimitive from '../primitives/react-tooltip';
-declare const TooltipProvider: React.FC<TooltipPrimitive.TooltipProviderProps>;
+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>>;
 declare const TooltipContent: React.ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;

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,QAAA,MAAM,eAAe,iDAA4B,CAAA;AAOjD,QAAA,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,wBAAwB,CAAC,OAAO,gBAAgB,CAAC,IAAI,CAAC,CAyBnF,CAAA;AAGD,QAAA,MAAM,cAAc,gHAA2B,CAAA;AAW/C,QAAA,MAAM,cAAc,gKAkClB,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,61 +1,69 @@
 "use client";
-import { jsx as e } from "react/jsx-runtime";
-import * as s from "react";
-import { aK as x, aL as p, aM as y, aN as T, aO as v } from "../_chunks/primitives.js";
-import { cn as g } from "./lib/utils.js";
-import { tweens as h, springs as C } from "./lib/motion.js";
-import { A as N, m as b } from "../_chunks/framer.js";
-const k = y, f = s.createContext({ open: !1 }), w = ({
-  open: i,
-  defaultOpen: a,
-  onOpenChange: t,
-  ...r
+import { jsx as t, Fragment as y } from "react/jsx-runtime";
+import * as o from "react";
+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 d = o.createContext(!1), F = ({
+  children: e,
+  ...s
+}) => /* @__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 }), A = ({
+  open: e,
+  defaultOpen: s,
+  onOpenChange: r,
+  ...n
 }) => {
-  const [n, c] = s.useState(a ?? !1), o = i !== void 0, l = o ? i : n, m = s.useCallback(
-    (d) => {
-      o || c(d), t == null || t(d);
+  const [l, c] = o.useState(s ?? !1), a = e !== void 0, i = a ? e : l, v = o.useCallback(
+    (p) => {
+      a || c(p), r == null || r(p);
     },
-    [o, t]
-  ), u = s.useMemo(() => ({ open: l }), [l]);
-  return /* @__PURE__ */ e(f.Provider, { value: u, children: /* @__PURE__ */ e(v, { open: l, onOpenChange: m, ...r }) });
+    [a, r]
+  ), 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 }) }) });
 };
-w.displayName = "Tooltip";
-const z = T, M = {
+A.displayName = "Tooltip";
+const K = P, R = {
   top: { y: 4 },
   bottom: { y: -4 },
   left: { x: 4 },
   right: { x: -4 }
-}, P = s.forwardRef(({ className: i, sideOffset: a = 4, side: t = "top", ...r }, n) => {
-  const { open: c } = s.useContext(f), o = M[t] ?? {};
-  return /* @__PURE__ */ e(N, { children: c && /* @__PURE__ */ e(x, { forceMount: !0, children: /* @__PURE__ */ e(
-    p,
+}, 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: n,
+      ref: c,
       forceMount: !0,
+      sideOffset: s,
+      side: r,
+      ...l,
       asChild: !0,
-      sideOffset: a,
-      side: t,
-      ...r,
-      children: /* @__PURE__ */ e(
-        b.div,
+      children: /* @__PURE__ */ t(
+        w.div,
         {
-          initial: { opacity: 0, scale: 0.95, ...o },
+          initial: { opacity: 0, scale: 0.95, ...i },
           animate: { opacity: 1, scale: 1, x: 0, y: 0 },
-          exit: { opacity: 0, scale: 0.95, ...o },
-          transition: { ...C.snappy, opacity: h.fade },
-          className: g(
-            "z-tooltip overflow-hidden rounded-ds-md bg-surface-fg px-ds-04 py-ds-02b text-ds-sm text-accent-fg shadow-02",
-            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-surface-1 shadow-02",
+            e
+          ),
+          children: n
         }
       )
     }
   ) }) });
 });
-P.displayName = p.displayName;
+I.displayName = f.displayName;
 export {
-  w as Tooltip,
-  P as TooltipContent,
-  k as TooltipProvider,
-  z as TooltipTrigger
+  A as Tooltip,
+  I as TooltipContent,
+  F as TooltipProvider,
+  K as TooltipTrigger
 };

package/docs/components/composed/avatar-group.md

@@ -5,20 +5,35 @@
 - Category: composed
 
 ## Props
-    users: AvatarUser[] (REQUIRED) — { name: string, image?: string | null }
+    users: AvatarUser[] (REQUIRED) — { name: string, image?: string | null, ring?: AvatarRing }
     max: number (default: 4, overflow shows "+N" badge)
-    size: "sm" | "md" | "lg"
+    size: "xs" | "sm" | "md" | "lg" | "xl"
     showTooltip: boolean (default: true)
+    borderColor: "surface-1" | "surface-2" (default: "surface-2") — overlap border color
+    onOverflowClick: () => void — makes the "+N" badge interactive (button)
+    renderAvatar: (user: AvatarUser, index: number) => ReactNode — custom avatar render
+    expandDirection: "left" | "right" (default: "right") — direction group expands on hover
+    expandAmount: "compact" | "default" | "wide" (default: "default") — how far group spreads
+
+## AvatarUser Type
+    name: string (REQUIRED)
+    image?: string | null
+    ring?: "none" | "lead" | "admin" | "client" — role ring per user in group
 
 ## Defaults
-    size="md", max=4, showTooltip=true
+    size="md", max=4, showTooltip=true, borderColor="surface-2", expandDirection="right", expandAmount="default"
 
 ## Example
 ```jsx
 <AvatarGroup
-  users={[{ name: 'Alice', image: '/alice.jpg' }, { name: 'Bob' }]}
+  users={[
+    { name: 'Alice', image: '/alice.jpg', ring: 'lead' },
+    { name: 'Bob', ring: 'admin' },
+  ]}
   max={3}
   size="md"
+  borderColor="surface-1"
+  onOverflowClick={() => setShowAll(true)}
 />
 ```
 
@@ -26,7 +41,17 @@
 - Wraps TooltipProvider internally — no need to add one yourself
 - Users beyond `max` are collapsed into a "+N" overflow badge
 - Missing `image` falls back to initials derived from `name`
+- Hover expand animation uses CSS `group-hover` — parent must not clip overflow
+- `borderColor` should match the surface context the group sits on (e.g., `surface-1` on cards)
 
 ## Changes
+### v0.21.0
+- **Added** `xs` and `xl` size variants
+- **Added** `borderColor` prop for overlap border matching surface context
+- **Added** `onOverflowClick` prop making the overflow badge an interactive button
+- **Added** `overflowContent` prop for popover content on overflow click
+- **Added** `renderAvatar` prop for custom per-avatar rendering
+- **Added** `AvatarUser.ring` field for per-user role rings in groups
+
 ### v0.1.0
 - **Added** Initial release

package/docs/components/ui/avatar.md

@@ -8,27 +8,45 @@
     size: "xs" | "sm" | "md" | "lg" | "xl"
     shape: "circle" | "square" | "rounded"
     status: "online" | "offline" | "busy" | "away"
+    ring: "none" | "lead" | "admin" | "client" (default: "none") — Role ring with semantic colors
+    badge: number | "dot" | ReactNode — Badge overlay at top-right
+    loading: boolean (default: false) — Skeleton shimmer state
 
 ## Compound Components
-    Avatar (root with size/shape/status)
+    Avatar (root with size/shape/status/ring/badge/loading)
       AvatarImage (src, alt)
-      AvatarFallback (children = initials text)
+      AvatarFallback (children = initials text, colorSeed?: string)
+
+## AvatarFallback Props
+    colorSeed: string — Deterministic color seed for consistent background color across renders
 
 ## Defaults
-    size="md", shape="circle"
+    size="md", shape="circle", ring="none", loading=false
 
 ## Example
 ```jsx
-<Avatar size="lg" status="online">
+<Avatar size="lg" status="online" ring="lead" badge={3}>
   <AvatarImage src={user.photoUrl} alt={user.name} />
-  <AvatarFallback>JD</AvatarFallback>
+  <AvatarFallback colorSeed={user.id}>JD</AvatarFallback>
 </Avatar>
 ```
 
 ## Gotchas
 - Status dot renders with role="img" and aria-label (accessible, not decorative)
 - Dot size scales automatically with avatar size
+- Ring offset color matches the surface context — ensure it sits on the expected background
+- Badge is hidden when value is `0` (falsy); use `"dot"` for presence without a count
+- 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
+- **Added** `loading` prop for skeleton shimmer placeholder state
+- **Added** `AvatarFallback.colorSeed` for deterministic fallback background colors
+
 ### v0.1.0
 - **Added** Initial release with CVA size variants (xs-xl) and status indicator badge

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