@devalok/shilp-sutra 0.20.1 → 0.21.0

package/dist/_chunks/primitives.js

@@ -6457,8 +6457,8 @@ export {
   Lg as aJ,
   Ug as aK,
   Hg as aL,
-  Bg as aM,
-  Vg as aN,
+  Vg as aM,
+  Bg as aN,
   Kg as aO,
   Sm as aP,
   Fg as aQ,

package/dist/composed/avatar-group.d.ts

@@ -1,17 +1,29 @@
 "use client";
 import { VariantProps } from 'class-variance-authority';
+import { AvatarRing } from '../ui/avatar';
 import * as React from 'react';
 declare const avatarSizeVariants: (props?: ({
-    size?: "sm" | "md" | "lg" | null | undefined;
+    size?: "xs" | "sm" | "md" | "lg" | "xl" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export interface AvatarUser {
     name: string;
     image?: string | null;
+    ring?: AvatarRing;
 }
 export interface AvatarGroupProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof avatarSizeVariants> {
     users: AvatarUser[];
     max?: number;
     showTooltip?: boolean;
+    /** Border color for the group avatars. @default 'surface-2' */
+    borderColor?: 'surface-1' | 'surface-2';
+    /** Callback when the "+N" overflow badge is clicked */
+    onOverflowClick?: () => void;
+    /** Custom render function for each avatar */
+    renderAvatar?: (user: AvatarUser, index: number) => React.ReactNode;
+    /** Direction the group expands on hover. 'right' (default) for left-aligned groups, 'left' for right-aligned groups. */
+    expandDirection?: 'left' | 'right';
+    /** How much the group spreads on hover. 'compact' = subtle peek, 'default' = full spread, 'wide' = extra room. */
+    expandAmount?: 'compact' | 'default' | 'wide';
 }
 declare const AvatarGroup: React.ForwardRefExoticComponent<AvatarGroupProps & React.RefAttributes<HTMLDivElement>>;
 export { AvatarGroup };

package/dist/composed/avatar-group.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"avatar-group.d.ts","sourceRoot":"","sources":["../../src/composed/avatar-group.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAejE,QAAA,MAAM,kBAAkB;;8EAcvB,CAAA;AAED,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;CACtB;AAED,MAAM,WAAW,gBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAC1C,YAAY,CAAC,OAAO,kBAAkB,CAAC;IACzC,KAAK,EAAE,UAAU,EAAE,CAAA;IACnB,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,WAAW,CAAC,EAAE,OAAO,CAAA;CACtB;AAED,QAAA,MAAM,WAAW,yFAuFhB,CAAA;AAGD,OAAO,EAAE,WAAW,EAAE,CAAA"}
+{"version":3,"file":"avatar-group.d.ts","sourceRoot":"","sources":["../../src/composed/avatar-group.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAOjE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAgB9C,QAAA,MAAM,kBAAkB;;8EAgBvB,CAAA;AAED,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACrB,IAAI,CAAC,EAAE,UAAU,CAAA;CAClB;AAED,MAAM,WAAW,gBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAC1C,YAAY,CAAC,OAAO,kBAAkB,CAAC;IACzC,KAAK,EAAE,UAAU,EAAE,CAAA;IACnB,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,+DAA+D;IAC/D,WAAW,CAAC,EAAE,WAAW,GAAG,WAAW,CAAA;IACvC,uDAAuD;IACvD,eAAe,CAAC,EAAE,MAAM,IAAI,CAAA;IAC5B,6CAA6C;IAC7C,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAA;IACnE,wHAAwH;IACxH,eAAe,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IAClC,kHAAkH;IAClH,YAAY,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,MAAM,CAAA;CAC9C;AAED,QAAA,MAAM,WAAW,yFAsNhB,CAAA;AAGD,OAAO,EAAE,WAAW,EAAE,CAAA"}

package/dist/composed/avatar-group.js

@@ -1,95 +1,202 @@
 "use client";
-import { jsx as e, jsxs as s } from "react/jsx-runtime";
-import * as y from "react";
-import { ag as w } from "../_chunks/vendor-utils.js";
+import { jsx as t, jsxs as s } from "react/jsx-runtime";
+import * as T from "react";
+import { ag as H } from "../_chunks/vendor-utils.js";
 import { cn as o } from "../ui/lib/utils.js";
-import { Avatar as A, AvatarImage as T, AvatarFallback as C } from "../ui/avatar.js";
-import { TooltipProvider as I, Tooltip as f, TooltipTrigger as p, TooltipContent as h } from "../ui/tooltip.js";
-import { getInitials as j } from "./lib/string-utils.js";
-const g = w(
-  "shrink-0 overflow-hidden rounded-ds-full border-2 border-surface-1",
+import { Avatar as O, AvatarImage as B, AvatarFallback as L } from "../ui/avatar.js";
+import { TooltipProvider as q, Tooltip as p, TooltipTrigger as u, TooltipContent as x } from "../ui/tooltip.js";
+import { getInitials as D } from "./lib/string-utils.js";
+const M = {
+  lead: "ring-2 ring-accent-7 ring-offset-1 ring-offset-surface-2",
+  admin: "ring-2 ring-warning-7 ring-offset-1 ring-offset-surface-2",
+  client: "ring-2 ring-info-7 ring-offset-1 ring-offset-surface-2"
+}, g = H(
+  "shrink-0 rounded-ds-full border-2",
   {
     variants: {
       size: {
+        xs: "h-ds-xs w-ds-xs text-[10px]",
         sm: "h-ds-xs w-ds-xs text-ds-xs",
         md: "h-ds-sm w-ds-sm text-ds-sm",
-        lg: "h-ds-md w-ds-md text-ds-md"
+        lg: "h-ds-md w-ds-md text-ds-md",
+        xl: "h-ds-lg w-ds-lg text-ds-md"
       }
     },
     defaultVariants: {
       size: "md"
     }
   }
-), z = y.forwardRef(
-  ({ users: t, max: d = 4, size: l, showTooltip: v = !0, className: x, ...b }, u) => {
-    const i = t.slice(0, d), n = t.length - d, c = {
+), J = T.forwardRef(
+  ({
+    users: l,
+    max: h = 4,
+    size: n,
+    showTooltip: b = !0,
+    borderColor: z = "surface-2",
+    onOverflowClick: v,
+    renderAvatar: y,
+    expandDirection: j = "right",
+    expandAmount: A = "default",
+    className: S,
+    ...k
+  }, P) => {
+    const [R, i] = T.useState(!1), a = l.slice(0, h), c = l.length - h, V = {
+      xs: "-ml-ds-02",
       sm: "-ml-ds-02b",
       md: "-ml-ds-03",
-      lg: "-ml-ds-04"
-    }[l ?? "md"];
-    return /* @__PURE__ */ e(I, { children: /* @__PURE__ */ s(
+      lg: "-ml-ds-04",
+      xl: "-ml-ds-05"
+    }, X = {
+      xs: 8,
+      sm: 10,
+      md: 12,
+      lg: 16,
+      xl: 20
+    }, N = n ?? "md", d = V[N], $ = X[N], f = z === "surface-1" ? "border-surface-1" : "border-surface-2", E = { compact: 0.5, default: 1, wide: 1.5 }[A], F = a.length + (c > 0 ? 1 : 0);
+    function m(e) {
+      if (!R) return "translateX(0)";
+      const r = $ * E;
+      return j === "left" ? `translateX(-${(F - 1 - e) * r}px)` : `translateX(${e * r}px)`;
+    }
+    const I = "transition-[transform,opacity] duration-300 ease-out hover:z-50 hover:scale-105 group-hover:[&:not(:hover)]:opacity-85";
+    return /* @__PURE__ */ t(q, { children: /* @__PURE__ */ s(
       "div",
       {
-        ref: u,
-        className: o("flex items-center", x),
-        ...b,
+        ref: P,
+        role: "group",
+        "aria-label": `${l.length} team members`,
+        tabIndex: 0,
+        className: o("group flex items-center", S),
+        onMouseEnter: () => i(!0),
+        onMouseLeave: () => i(!1),
+        onFocus: () => i(!0),
+        onBlur: (e) => {
+          e.currentTarget.contains(e.relatedTarget) || i(!1);
+        },
+        ...k,
         children: [
-          i.map((a, r) => {
-            const N = j(a.name), m = /* @__PURE__ */ s(
-              A,
+          a.map((e, r) => {
+            const G = D(e.name);
+            if (y) {
+              const C = /* @__PURE__ */ t(
+                "div",
+                {
+                  className: o(
+                    g({ size: n }),
+                    f,
+                    r > 0 && d,
+                    I,
+                    e.ring && e.ring !== "none" && M[e.ring]
+                  ),
+                  style: {
+                    zIndex: a.length - r,
+                    transform: m(r)
+                  },
+                  children: y(e, r)
+                },
+                e.name
+              );
+              return b ? /* @__PURE__ */ s(p, { children: [
+                /* @__PURE__ */ t(u, { asChild: !0, children: C }),
+                /* @__PURE__ */ t(
+                  x,
+                  {
+                    className: "border-surface-border-strong bg-surface-1 text-surface-fg",
+                    sideOffset: 6,
+                    children: /* @__PURE__ */ t("p", { className: "text-ds-sm", children: e.name })
+                  }
+                )
+              ] }, e.name) : C;
+            }
+            const w = /* @__PURE__ */ s(
+              O,
               {
                 className: o(
-                  g({ size: l }),
-                  r > 0 && c
+                  g({ size: n }),
+                  f,
+                  r > 0 && d,
+                  I,
+                  e.ring && e.ring !== "none" && M[e.ring]
                 ),
-                style: { zIndex: i.length - r },
+                style: {
+                  zIndex: a.length - r,
+                  transform: m(r)
+                },
                 children: [
-                  a.image && /* @__PURE__ */ e(T, { src: a.image, alt: a.name }),
-                  /* @__PURE__ */ e(
-                    C,
+                  e.image && /* @__PURE__ */ t(B, { src: e.image, alt: e.name }),
+                  /* @__PURE__ */ t(
+                    L,
                     {
                       className: "font-body font-semibold",
-                      children: N
+                      colorSeed: e.name,
+                      children: G
                     }
                   )
                 ]
               },
-              a.name
+              e.name
             );
-            return v ? /* @__PURE__ */ s(f, { children: [
-              /* @__PURE__ */ e(p, { asChild: !0, children: m }),
-              /* @__PURE__ */ e(
-                h,
+            return b ? /* @__PURE__ */ s(p, { children: [
+              /* @__PURE__ */ t(u, { asChild: !0, children: w }),
+              /* @__PURE__ */ t(
+                x,
                 {
                   className: "border-surface-border-strong bg-surface-1 text-surface-fg",
                   sideOffset: 6,
-                  children: /* @__PURE__ */ e("p", { className: "text-ds-sm", children: a.name })
+                  children: /* @__PURE__ */ t("p", { className: "text-ds-sm", children: e.name })
                 }
               )
-            ] }, a.name) : m;
+            ] }, e.name) : w;
           }),
-          n > 0 && /* @__PURE__ */ s(f, { children: [
-            /* @__PURE__ */ e(p, { asChild: !0, children: /* @__PURE__ */ s(
+          c > 0 && /* @__PURE__ */ s(p, { children: [
+            /* @__PURE__ */ t(u, { asChild: !0, children: v ? /* @__PURE__ */ s(
+              "button",
+              {
+                type: "button",
+                onClick: v,
+                className: o(
+                  g({ size: n }),
+                  f,
+                  d,
+                  "flex cursor-pointer items-center justify-center bg-accent-2 font-body font-semibold text-accent-11",
+                  "transition-[transform,background-color] duration-300 ease-out",
+                  "hover:scale-105 hover:bg-accent-3"
+                ),
+                style: {
+                  zIndex: 0,
+                  transform: m(a.length)
+                },
+                children: [
+                  "+",
+                  c
+                ]
+              }
+            ) : /* @__PURE__ */ s(
               "div",
               {
                 className: o(
-                  g({ size: l }),
-                  c,
-                  "flex cursor-default items-center justify-center bg-accent-2 font-body font-semibold text-accent-11"
+                  g({ size: n }),
+                  f,
+                  d,
+                  "flex cursor-default items-center justify-center bg-accent-2 font-body font-semibold text-accent-11",
+                  "transition-[transform] duration-300 ease-out"
                 ),
-                style: { zIndex: 0 },
+                style: {
+                  zIndex: 0,
+                  transform: m(a.length)
+                },
                 children: [
                   "+",
-                  n
+                  c
                 ]
               }
             ) }),
-            /* @__PURE__ */ e(
-              h,
+            /* @__PURE__ */ t(
+              x,
               {
                 className: "border-surface-border-strong bg-surface-1 text-surface-fg",
                 sideOffset: 6,
-                children: /* @__PURE__ */ e("div", { className: "flex flex-col gap-ds-01", children: t.slice(d).map((a, r) => /* @__PURE__ */ e("p", { className: "text-ds-sm", children: a.name }, r)) })
+                children: /* @__PURE__ */ t("div", { className: "flex flex-col gap-ds-01", children: l.slice(h).map((e, r) => /* @__PURE__ */ t("p", { className: "text-ds-sm", children: e.name }, r)) })
               }
             )
           ] })
@@ -98,7 +205,7 @@ const g = w(
     ) });
   }
 );
-z.displayName = "AvatarGroup";
+J.displayName = "AvatarGroup";
 export {
-  z as AvatarGroup
+  J as AvatarGroup
 };

package/dist/composed/schedule-view.js

@@ -72,7 +72,7 @@ function j({
       {
         className: x(
           "text-center text-ds-sm font-semibold py-ds-02 border-b border-surface-border-strong",
-          l ? "text-accent-11 bg-accent-2" : "text-surface-fg bg-surface-1"
+          l ? "text-accent-11 bg-accent-2" : "text-surface-fg bg-surface-2"
         ),
         children: u(r, "EEE d")
       }

package/dist/ui/avatar.d.ts

@@ -7,6 +7,7 @@ export declare const avatarVariants: (props?: ({
     shape?: "circle" | "square" | "rounded" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export type AvatarStatus = 'online' | 'offline' | 'busy' | 'away';
+export type AvatarRing = 'none' | 'lead' | 'admin' | 'client';
 /**
  * Props for Avatar — a user/entity image container with size, shape, and presence-status variants.
  *
@@ -17,6 +18,14 @@ export type AvatarStatus = 'online' | 'offline' | 'busy' | 'away';
  * **Status dot:** `status="online"` (green) | `"offline"` (muted) | `"busy"` (red) | `"away"` (amber).
  * The dot renders with `role="img"` and an accessible `aria-label` — it is not purely decorative.
  *
+ * **Role ring:** `ring="lead"` (accent) | `"admin"` (warning) | `"client"` (info) — a colored ring
+ * around the avatar indicating the user's role.
+ *
+ * **Badge:** `badge={5}` (number) | `badge="dot"` (notification dot) | `badge={<Icon />}` (custom).
+ * Numbers > 99 display as "99+". Badge is hidden when `0` or `undefined`.
+ *
+ * **Loading:** `loading={true}` shows a pulse skeleton placeholder.
+ *
  * **Children:** Use `<AvatarImage>` for the photo and `<AvatarFallback>` for initials when the image fails.
  *
  * @example
@@ -43,10 +52,23 @@ export type AvatarStatus = 'online' | 'offline' | 'busy' | 'away';
 export interface AvatarProps extends Omit<React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>, 'children'>, VariantProps<typeof avatarVariants> {
     /** Optional status indicator displayed as a dot at the bottom-right corner */
     status?: AvatarStatus;
+    /** Role ring color indicator */
+    ring?: AvatarRing;
+    /** Badge overlay: number, 'dot', or custom ReactNode */
+    badge?: number | 'dot' | React.ReactNode;
+    /** Show loading skeleton instead of content */
+    loading?: boolean;
     children?: React.ReactNode;
 }
 declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLSpanElement>>;
 declare const AvatarImage: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarImageProps & React.RefAttributes<HTMLImageElement>, "ref"> & React.RefAttributes<HTMLImageElement>>;
-declare const AvatarFallback: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarFallbackProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+export interface AvatarFallbackProps extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback> {
+    /**
+     * Seed string for deterministic color selection.
+     * Falls back to the text content of `children` if not provided.
+     */
+    colorSeed?: string;
+}
+declare const AvatarFallback: React.ForwardRefExoticComponent<AvatarFallbackProps & React.RefAttributes<HTMLSpanElement>>;
 export { Avatar, AvatarImage, AvatarFallback };
 //# sourceMappingURL=avatar.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../src/ui/avatar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,eAAe,MAAM,0BAA0B,CAAA;AAC3D,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAMjE,eAAO,MAAM,cAAc;;;8EAmB1B,CAAA;AAED,MAAM,MAAM,YAAY,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAA;AA4BjE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AACH,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,EAAE,UAAU,CAAC,EACnF,YAAY,CAAC,OAAO,cAAc,CAAC;IACrC,8EAA8E;IAC9E,MAAM,CAAC,EAAE,YAAY,CAAA;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B;AAED,QAAA,MAAM,MAAM,qFAwBV,CAAA;AAGF,QAAA,MAAM,WAAW,gKAgBf,CAAA;AAGF,QAAA,MAAM,cAAc,iKAYlB,CAAA;AAGF,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,cAAc,EAAE,CAAA"}
+{"version":3,"file":"avatar.d.ts","sourceRoot":"","sources":["../../src/ui/avatar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,KAAK,eAAe,MAAM,0BAA0B,CAAA;AAC3D,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAMjE,eAAO,MAAM,cAAc;;;8EAmB1B,CAAA;AAED,MAAM,MAAM,YAAY,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,GAAG,MAAM,CAAA;AAEjE,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAA;AAoE7D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,KAAK,CAAC,wBAAwB,CAAC,OAAO,eAAe,CAAC,IAAI,CAAC,EAAE,UAAU,CAAC,EACnF,YAAY,CAAC,OAAO,cAAc,CAAC;IACrC,8EAA8E;IAC9E,MAAM,CAAC,EAAE,YAAY,CAAA;IACrB,gCAAgC;IAChC,IAAI,CAAC,EAAE,UAAU,CAAA;IACjB,wDAAwD;IACxD,KAAK,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,KAAK,CAAC,SAAS,CAAA;IACxC,+CAA+C;IAC/C,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B;AAED,QAAA,MAAM,MAAM,qFAuFV,CAAA;AAGF,QAAA,MAAM,WAAW,gKAgBf,CAAA;AAGF,MAAM,WAAW,mBACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,eAAe,CAAC,QAAQ,CAAC;IACvE;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,QAAA,MAAM,cAAc,6FA4BlB,CAAA;AAGF,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,cAAc,EAAE,CAAA"}

package/dist/ui/avatar.js

@@ -1,12 +1,12 @@
 "use client";
-import { jsxs as p, jsx as l } from "react/jsx-runtime";
-import * as o from "react";
-import { F as i, J as n, K as t } from "../_chunks/primitives.js";
-import { ag as u } from "../_chunks/vendor-utils.js";
-import { tweens as w } from "./lib/motion.js";
-import { cn as r } from "./lib/utils.js";
-import { m as h } from "../_chunks/framer.js";
-const x = u(
+import { jsx as r, jsxs as M } from "react/jsx-runtime";
+import * as g from "react";
+import { F as y, J as v, K as N } from "../_chunks/primitives.js";
+import { ag as R } from "../_chunks/vendor-utils.js";
+import { springs as k } from "./lib/motion.js";
+import { cn as n } from "./lib/utils.js";
+import { m as c } from "../_chunks/framer.js";
+const p = R(
   "relative flex shrink-0 overflow-hidden",
   {
     variants: {
@@ -25,7 +25,7 @@ const x = u(
     },
     defaultVariants: { size: "md", shape: "circle" }
   }
-), g = {
+), x = {
   online: "bg-success-9",
   offline: "bg-surface-3",
   busy: "bg-error-9",
@@ -35,69 +35,147 @@ const x = u(
   offline: "Offline",
   busy: "Busy",
   away: "Away"
-}, y = {
+}, h = {
   xs: "h-ds-02b w-ds-02b",
   sm: "h-[8px] w-[8px]",
   md: "h-ds-03 w-ds-03",
   lg: "h-[12px] w-[12px]",
   xl: "h-ds-04 w-ds-04"
-}, N = o.forwardRef(({ className: s, size: a, shape: e, status: d, children: m, ...c }, f) => /* @__PURE__ */ p("span", { className: "relative inline-flex shrink-0", children: [
-  /* @__PURE__ */ l(
-    i,
-    {
-      ref: f,
-      className: r(x({ size: a, shape: e }), s),
-      ...c,
-      children: m
-    }
-  ),
-  d && /* @__PURE__ */ l(
-    "span",
-    {
-      className: r(
-        "absolute bottom-0 right-0 rounded-ds-full ring-2 ring-surface-1",
-        g[d],
-        y[a ?? "md"]
-      ),
-      role: "img",
-      "aria-label": b[d]
-    }
-  )
-] }));
-N.displayName = i.displayName;
-const v = o.forwardRef(({ className: s, ...a }, e) => /* @__PURE__ */ l(
-  h.span,
+}, F = {
+  lead: "ring-accent-7",
+  admin: "ring-warning-7",
+  client: "ring-info-7"
+}, O = {
+  circle: "rounded-ds-full",
+  square: "rounded-ds-none",
+  rounded: "rounded-ds-md"
+}, w = [
+  { bg: "bg-accent-3", text: "text-accent-11" },
+  { bg: "bg-secondary-3", text: "text-secondary-11" },
+  { bg: "bg-success-3", text: "text-success-11" },
+  { bg: "bg-warning-3", text: "text-warning-11" },
+  { bg: "bg-error-3", text: "text-error-11" },
+  { bg: "bg-info-3", text: "text-info-11" },
+  { bg: "bg-category-teal-3", text: "text-category-teal-11" },
+  { bg: "bg-category-indigo-3", text: "text-category-indigo-11" }
+];
+function j(o) {
+  let a = 5381;
+  for (let e = 0; e < o.length; e++)
+    a = (a << 5) + a + o.charCodeAt(e) | 0;
+  const s = Math.abs(a) % w.length;
+  return w[s];
+}
+const I = g.forwardRef(({ className: o, size: a, shape: s, status: e, ring: l, badge: t, loading: m, children: i, ...d }, f) => {
+  const A = s ?? "circle", u = l && l !== "none" ? n("ring-2 ring-offset-2 ring-offset-surface-2", F[l], O[A]) : void 0;
+  if (m)
+    return /* @__PURE__ */ r("span", { ref: f, className: n("relative inline-flex shrink-0", u), children: /* @__PURE__ */ r(
+      "span",
+      {
+        className: n(p({ size: a, shape: s }), "animate-pulse bg-surface-3"),
+        "data-slot": "avatar-skeleton"
+      }
+    ) });
+  const C = t !== void 0 && t !== 0;
+  return /* @__PURE__ */ M("span", { className: n("relative inline-flex shrink-0", u), children: [
+    /* @__PURE__ */ r(
+      y,
+      {
+        ref: f,
+        className: n(p({ size: a, shape: s }), o),
+        ...d,
+        children: i
+      }
+    ),
+    e && (e === "online" ? /* @__PURE__ */ r(
+      c.span,
+      {
+        className: n(
+          "absolute bottom-0 right-0 rounded-ds-full ring-2 ring-surface-2",
+          x[e],
+          h[a ?? "md"]
+        ),
+        animate: { opacity: [1, 0.75, 1] },
+        transition: { duration: 2.5, repeat: 1 / 0, ease: "easeInOut" },
+        role: "img",
+        "aria-label": b[e]
+      }
+    ) : /* @__PURE__ */ r(
+      "span",
+      {
+        className: n(
+          "absolute bottom-0 right-0 rounded-ds-full ring-2 ring-surface-2",
+          x[e],
+          h[a ?? "md"]
+        ),
+        role: "img",
+        "aria-label": b[e]
+      }
+    )),
+    C && (t === "dot" ? /* @__PURE__ */ r(
+      "span",
+      {
+        className: "absolute -right-0.5 -top-0.5 h-[8px] w-[8px] rounded-ds-full bg-error-9 ring-2 ring-surface-2",
+        "data-slot": "avatar-badge-dot",
+        "aria-hidden": "true"
+      }
+    ) : typeof t == "number" ? /* @__PURE__ */ r(
+      c.span,
+      {
+        initial: { scale: 0 },
+        animate: { scale: 1 },
+        transition: k.bouncy,
+        className: "absolute -right-1 -top-1 flex min-w-[16px] items-center justify-center rounded-ds-full bg-error-9 px-1 text-[10px] font-bold leading-[16px] text-error-fg ring-2 ring-surface-2",
+        "data-slot": "avatar-badge",
+        role: "status",
+        "aria-label": `${t > 99 ? "99+" : t} notifications`,
+        children: t > 99 ? "99+" : t
+      }
+    ) : /* @__PURE__ */ r("span", { className: "absolute -right-1 -top-1", "data-slot": "avatar-badge-custom", children: t }))
+  ] });
+});
+I.displayName = y.displayName;
+const L = g.forwardRef(({ className: o, ...a }, s) => /* @__PURE__ */ r(
+  c.span,
   {
-    initial: { opacity: 0 },
-    animate: { opacity: 1 },
-    transition: w.fade,
-    className: "h-full w-full",
-    children: /* @__PURE__ */ l(
-      n,
+    initial: { opacity: 0, scale: 0.96 },
+    animate: { opacity: 1, scale: 1 },
+    transition: k.smooth,
+    className: "absolute inset-0 h-full w-full",
+    children: /* @__PURE__ */ r(
+      v,
       {
-        ref: e,
-        className: r("aspect-square h-full w-full", s),
+        ref: s,
+        className: n("aspect-square h-full w-full", o),
         ...a
       }
     )
   }
 ));
-v.displayName = n.displayName;
-const R = o.forwardRef(({ className: s, ...a }, e) => /* @__PURE__ */ l(
-  t,
-  {
-    ref: e,
-    className: r(
-      "flex h-full w-full items-center justify-center rounded-ds-full bg-accent-2 text-accent-11",
-      s
-    ),
-    ...a
-  }
-));
-R.displayName = t.displayName;
+L.displayName = v.displayName;
+const S = g.forwardRef(({ className: o, colorSeed: a, children: s, ...e }, l) => {
+  const t = typeof s == "string" ? s : "", i = j(a ?? t), d = t.length === 1 ? "tracking-wide" : "tracking-normal";
+  return /* @__PURE__ */ r(
+    N,
+    {
+      ref: l,
+      "data-slot": "avatar-fallback",
+      className: n(
+        "flex h-full w-full items-center justify-center font-semibold",
+        i.bg,
+        i.text,
+        d,
+        o
+      ),
+      ...e,
+      children: s
+    }
+  );
+});
+S.displayName = N.displayName;
 export {
-  N as Avatar,
-  R as AvatarFallback,
-  v as AvatarImage,
-  x as avatarVariants
+  I as Avatar,
+  S as AvatarFallback,
+  L as AvatarImage,
+  p as avatarVariants
 };

package/dist/ui/index.d.ts

@@ -53,7 +53,7 @@ export { Banner, bannerVariants, type BannerProps } from './banner';
 export { Spinner, type SpinnerProps } from './spinner';
 export { Card, cardVariants, CardHeader, CardFooter, CardTitle, CardDescription, CardContent, type CardProps } from './card';
 export { Badge, badgeVariants, type BadgeProps } from './badge';
-export { Avatar, AvatarImage, AvatarFallback, avatarVariants, type AvatarProps, type AvatarStatus } from './avatar';
+export { Avatar, AvatarImage, AvatarFallback, avatarVariants, type AvatarProps, type AvatarFallbackProps, type AvatarStatus, type AvatarRing } from './avatar';
 export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption, type TableProps, type TableRowProps, type TableCellProps } from './table';
 export { Progress, progressTrackVariants, progressIndicatorVariants, type ProgressProps } from './progress';
 export { Skeleton, skeletonVariants, type SkeletonProps, SkeletonAvatar, type SkeletonAvatarProps, SkeletonText, type SkeletonTextProps, SkeletonButton, type SkeletonButtonProps, SkeletonInput, type SkeletonInputProps, SkeletonChart, type SkeletonChartProps, SkeletonImage, type SkeletonImageProps, SkeletonGroup, type SkeletonGroupProps, } from './skeleton';

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ui/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ui/index.ts"],"names":[],"mappings":"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"}

package/dist/ui/tooltip.d.ts

@@ -1,7 +1,11 @@
 "use client";
 import * as React from 'react';
 import * as TooltipPrimitive from '../primitives/react-tooltip';
-declare const TooltipProvider: React.FC<TooltipPrimitive.TooltipProviderProps>;
+/**
+ * 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>>;
 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;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"}

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 x } 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 { 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 = ({
+  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 }) });
+}
+const m = o.createContext({ open: !1 }), R = ({
+  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 [c, l] = o.useState(s ?? !1), a = e !== void 0, i = a ? e : c, u = o.useCallback(
+    (p) => {
+      a || l(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]
+  ), 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 }) }) });
 };
-w.displayName = "Tooltip";
-const z = T, M = {
+R.displayName = "Tooltip";
+const K = h, I = {
   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,
+}, 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(
+    f,
     {
-      ref: n,
+      ref: l,
       forceMount: !0,
       asChild: !0,
-      sideOffset: a,
-      side: t,
-      ...r,
-      children: /* @__PURE__ */ e(
-        b.div,
+      sideOffset: s,
+      side: r,
+      ...c,
+      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(
+          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",
-            i
-          )
+            e
+          ),
+          children: n
         }
       )
     }
   ) }) });
 });
-P.displayName = p.displayName;
+O.displayName = f.displayName;
 export {
-  w as Tooltip,
-  P as TooltipContent,
-  k as TooltipProvider,
-  z as TooltipTrigger
+  R as Tooltip,
+  O as TooltipContent,
+  M 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,42 @@
     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.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/llms-full.txt

@@ -5,7 +5,7 @@
 > All variant values and props verified from source CVA definitions.
 >
 > Package: @devalok/shilp-sutra
-> Version: 0.20.1
+> Version: 0.21.0
 
 ---
 
@@ -327,28 +327,43 @@ Note: getFormFieldA11y() was removed in favor of useFormField() hook.
     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.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
 # Badge
@@ -2965,20 +2980,35 @@ export default function RootLayout({ children }) {
 - 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)}
 />
 ```
 
@@ -2986,8 +3016,18 @@ export default function RootLayout({ children }) {
 - 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
 # CommandPalette

package/llms.txt

@@ -180,7 +180,7 @@ NOTIFICATION SELECTION GUIDE:
 ### Data Display
 - Badge: variant(subtle|solid|outline) color(default|info|success|error|warning|brand|accent + 7 category colors) size(xs|sm|md|lg) + onDismiss
 - Chip: variant(subtle|outline) color(default|primary|success|error|warning|info + 7 category) size(sm|md|lg) label(string, REQUIRED) + onDismiss, onClick
-- Avatar: size(xs|sm|md|lg|xl) shape(circle|square|rounded) status(AvatarStatus) > AvatarImage + AvatarFallback. Type: AvatarStatus = 'online' | 'offline' | 'busy' | 'away'
+- Avatar: size(xs|sm|md|lg|xl) shape(circle|square|rounded) status?(AvatarStatus) ring?('lead'|'admin'|'client') badge?(number|'dot'|ReactNode) loading?(boolean) > AvatarImage + AvatarFallback(colorSeed?). Types: AvatarStatus = 'online'|'offline'|'busy'|'away', AvatarRing = 'none'|'lead'|'admin'|'client'. Fallback colors are deterministic from name hash (8 categorical). Online dot pulses. Badge pops in with MotionPop.
 - Card: variant(default|elevated|outline|flat) interactive(boolean) > CardHeader > CardTitle, CardDescription; CardContent; CardFooter
 - Table > TableHeader > TableRow > TableHead; TableBody > TableRow > TableCell; TableFooter; TableCaption
 - Text: variant(TextVariant) as(element). Type: TextVariant = 'heading-2xl' | 'heading-xl' | 'heading-lg' | 'heading-md' | 'heading-sm' | 'heading-xs' | 'body-lg' | 'body-md' | 'body-sm' | 'body-xs' | 'label-lg' | 'label-md' | 'label-sm' | 'label-xs' | 'caption' | 'overline'
@@ -222,7 +222,7 @@ NOTIFICATION SELECTION GUIDE:
 ### Composed Components
 - ConfirmDialog: open, onOpenChange, title, description, onConfirm + confirmText, cancelText, color(default|error), loading
 - PageHeader: title, subtitle, breadcrumbs[], actions(ReactNode)
-- AvatarGroup: users[], max(number), size(sm|md|lg), showTooltip
+- AvatarGroup: users(AvatarUser[]), max?(number), size?(xs|sm|md|lg|xl), showTooltip?, borderColor?('surface-1'|'surface-2'), onOverflowClick?(), renderAvatar?((user,index)=>ReactNode), expandDirection?('left'|'right'), expandAmount?('compact'|'default'|'wide'). Type: AvatarUser = { name, image?, ring? }. GPU-composited hover expand via translateX. Use expandDirection="left" for right-aligned groups.
 - StatusBadge: DISCRIMINATED UNION — pass status OR color, not both. status(active|pending|approved|rejected|completed|blocked|cancelled|draft) color(success|warning|error|info|neutral) size(sm|md)
 - ContentCard: variant(default|outline|ghost) padding(default|compact|spacious|none)
 - EmptyState: icon(ReactNode or ComponentType), title(required), description, action(ReactNode), compact

package/package.json

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