@devalok/shilp-sutra 0.20.1 → 0.22.0

package/dist/composed/activity-feed.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"activity-feed.d.ts","sourceRoot":"","sources":["../../src/composed/activity-feed.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAW9B,MAAM,WAAW,YAAY;IAC3B,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;IACxC,MAAM,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAA;IAChC,SAAS,EAAE,IAAI,GAAG,MAAM,CAAA;IACxB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,KAAK,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAA;IAC5D,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACzB;AAED,MAAM,WAAW,WAAW;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,MAAM,WAAW,iBAAkB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC7E,KAAK,EAAE,YAAY,EAAE,CAAA;IACrB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAA;IACvB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACzB,WAAW,CAAC,EAAE,WAAW,CAAA;CAC1B;AAiBD;;;GAGG;AACH,wBAAgB,gBAAgB,CAC9B,KAAK,EAAE,YAAY,EAAE,EACrB,MAAM,CAAC,EAAE,WAAW,GACnB;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,YAAY,EAAE,CAAA;CAAE,EAAE,CA6C5C;AA8ID,QAAA,MAAM,YAAY,0FAiGjB,CAAA;AAGD,OAAO,EAAE,YAAY,EAAE,CAAA"}
+{"version":3,"file":"activity-feed.d.ts","sourceRoot":"","sources":["../../src/composed/activity-feed.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAW9B,MAAM,WAAW,YAAY;IAC3B,EAAE,EAAE,MAAM,CAAA;IACV,KAAK,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;IACxC,MAAM,EAAE,MAAM,GAAG,KAAK,CAAC,SAAS,CAAA;IAChC,SAAS,EAAE,IAAI,GAAG,MAAM,CAAA;IACxB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,KAAK,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,MAAM,CAAA;IAC5D,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACzB;AAED,MAAM,WAAW,WAAW;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,MAAM,WAAW,iBAAkB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC7E,KAAK,EAAE,YAAY,EAAE,CAAA;IACrB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAA;IACvB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC5B,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACzB,WAAW,CAAC,EAAE,WAAW,CAAA;CAC1B;AAiBD;;;GAGG;AACH,wBAAgB,gBAAgB,CAC9B,KAAK,EAAE,YAAY,EAAE,EACrB,MAAM,CAAC,EAAE,WAAW,GACnB;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,YAAY,EAAE,CAAA;CAAE,EAAE,CA6C5C;AA8ID,QAAA,MAAM,YAAY,0FAqGjB,CAAA;AAGD,OAAO,EAAE,YAAY,EAAE,CAAA"}

package/dist/composed/activity-feed.js

@@ -1,87 +1,87 @@
 "use client";
-import { jsx as t, jsxs as a } from "react/jsx-runtime";
-import * as N from "react";
-import { cn as r } from "../ui/lib/utils.js";
-import { IconChevronRight as S } from "@tabler/icons-react";
-import { Avatar as O, AvatarImage as C, AvatarFallback as F } from "../ui/avatar.js";
-import { Button as D } from "../ui/button.js";
+import { jsx as t, jsxs as s } from "react/jsx-runtime";
+import * as k from "react";
+import { cn as i } from "../ui/lib/utils.js";
+import { IconChevronRight as F } from "@tabler/icons-react";
+import { Avatar as W, AvatarImage as j, AvatarFallback as E } from "../ui/avatar.js";
+import { Button as S } from "../ui/button.js";
 import { Skeleton as v } from "../ui/skeleton.js";
-import { getInitials as W } from "./lib/string-utils.js";
-import { formatRelativeTime as j } from "../ui/lib/date-utils.js";
-import { tweens as E } from "../ui/lib/motion.js";
-import { m as R } from "../_chunks/framer.js";
-const L = {
+import { getInitials as R } from "./lib/string-utils.js";
+import { formatRelativeTime as L } from "../ui/lib/date-utils.js";
+import { tweens as D } from "../ui/lib/motion.js";
+import { m as T } from "../_chunks/framer.js";
+const z = {
   default: "bg-surface-fg-subtle",
   success: "bg-success-9",
   warning: "bg-warning-9",
   error: "bg-error-9",
   info: "bg-info-9"
-}, z = {
+}, B = {
   today: "Today",
   yesterday: "Yesterday",
   thisWeek: "This Week",
   older: "Older"
 };
-function B(e, s) {
-  const o = { ...z, ...s }, d = /* @__PURE__ */ new Date(), c = new Date(d.getFullYear(), d.getMonth(), d.getDate()), n = new Date(c.getTime() - 24 * 60 * 60 * 1e3), l = d.getDay(), b = l === 0 ? 6 : l - 1, y = new Date(
-    c.getTime() - b * 24 * 60 * 60 * 1e3
-  ), f = [], m = [], u = [], p = [];
-  for (const i of e) {
-    const x = (typeof i.timestamp == "string" ? new Date(i.timestamp) : i.timestamp).getTime();
-    x >= c.getTime() ? f.push(i) : x >= n.getTime() ? m.push(i) : x >= y.getTime() ? u.push(i) : p.push(i);
+function G(e, a) {
+  const d = { ...B, ...a }, o = /* @__PURE__ */ new Date(), c = new Date(o.getFullYear(), o.getMonth(), o.getDate()), n = new Date(c.getTime() - 24 * 60 * 60 * 1e3), r = o.getDay(), y = r === 0 ? 6 : r - 1, b = new Date(
+    c.getTime() - y * 24 * 60 * 60 * 1e3
+  ), f = [], m = [], u = [], g = [];
+  for (const l of e) {
+    const x = (typeof l.timestamp == "string" ? new Date(l.timestamp) : l.timestamp).getTime();
+    x >= c.getTime() ? f.push(l) : x >= n.getTime() ? m.push(l) : x >= b.getTime() ? u.push(l) : g.push(l);
   }
   const h = [];
-  return f.length > 0 && h.push({ label: o.today, items: f }), m.length > 0 && h.push({ label: o.yesterday, items: m }), u.length > 0 && h.push({ label: o.thisWeek, items: u }), p.length > 0 && h.push({ label: o.older, items: p }), h;
+  return f.length > 0 && h.push({ label: d.today, items: f }), m.length > 0 && h.push({ label: d.yesterday, items: m }), u.length > 0 && h.push({ label: d.thisWeek, items: u }), g.length > 0 && h.push({ label: d.older, items: g }), h;
 }
-function G({ compact: e }) {
-  return /* @__PURE__ */ t("div", { className: r("flex flex-col", e ? "gap-1" : "gap-3"), children: [0, 1, 2].map((s) => /* @__PURE__ */ a("div", { className: "flex items-center gap-ds-03", children: [
+function I({ compact: e }) {
+  return /* @__PURE__ */ t("div", { className: i("flex flex-col", e ? "gap-1" : "gap-3"), children: [0, 1, 2].map((a) => /* @__PURE__ */ s("div", { className: "flex items-center gap-ds-03", children: [
     /* @__PURE__ */ t(v, { className: "h-2 w-2 shrink-0 rounded-ds-full" }),
     !e && /* @__PURE__ */ t(v, { className: "h-4 w-4 shrink-0 rounded-ds-full" }),
-    /* @__PURE__ */ t(v, { className: r("flex-1", e ? "h-3" : "h-4") }),
+    /* @__PURE__ */ t(v, { className: i("flex-1", e ? "h-3" : "h-4") }),
     /* @__PURE__ */ t(v, { className: "h-3 w-12" })
-  ] }, s)) });
+  ] }, a)) });
 }
-function T({
+function O({
   item: e,
-  compact: s
+  compact: a
 }) {
-  const [o, d] = N.useState(!1), c = e.color ?? "default", n = () => {
-    e.detail && d((l) => !l);
+  const [d, o] = k.useState(!1), c = e.color ?? "default", n = () => {
+    e.detail && o((r) => !r);
   };
-  return /* @__PURE__ */ a("div", { className: r("relative flex items-start", s ? "gap-ds-02" : "gap-ds-03"), children: [
+  return /* @__PURE__ */ s("div", { className: i("relative flex items-start", a ? "gap-ds-02" : "gap-ds-03"), children: [
     /* @__PURE__ */ t(
       "div",
       {
-        className: r(
+        className: i(
           "relative z-10 mt-1.5 h-2 w-2 shrink-0 rounded-ds-full ring-2 ring-surface-1",
-          L[c]
+          z[c]
         )
       }
     ),
-    !s && e.actor && /* @__PURE__ */ a(O, { className: "h-5 w-5 shrink-0 text-[9px]", children: [
-      e.actor.image && /* @__PURE__ */ t(C, { src: e.actor.image, alt: e.actor.name }),
-      /* @__PURE__ */ t(F, { className: "text-[9px]", children: W(e.actor.name) })
+    !a && e.actor && /* @__PURE__ */ s(W, { className: "h-5 w-5 shrink-0 text-[9px]", children: [
+      e.actor.image && /* @__PURE__ */ t(j, { src: e.actor.image, alt: e.actor.name }),
+      /* @__PURE__ */ t(E, { className: "text-[9px]", children: R(e.actor.name) })
     ] }),
-    /* @__PURE__ */ a("div", { className: "flex min-w-0 flex-1 flex-col", children: [
-      /* @__PURE__ */ a("div", { className: "flex items-center justify-between gap-ds-02", children: [
-        /* @__PURE__ */ a("div", { className: r("min-w-0 flex-1 flex items-center gap-ds-01 flex-wrap", s ? "text-ds-xs" : "text-ds-sm"), children: [
-          e.actor && /* @__PURE__ */ a("span", { className: "font-medium text-surface-fg", children: [
+    /* @__PURE__ */ s("div", { className: "flex min-w-0 flex-1 flex-col", children: [
+      /* @__PURE__ */ s("div", { className: "flex items-center justify-between gap-ds-02", children: [
+        /* @__PURE__ */ s("div", { className: i("min-w-0 flex-1 flex items-center gap-ds-01 flex-wrap", a ? "text-ds-xs" : "text-ds-sm"), children: [
+          e.actor && /* @__PURE__ */ s("span", { className: "font-medium text-surface-fg", children: [
             e.actor.name,
             " "
           ] }),
-          e.detail && /* @__PURE__ */ t(S, { className: r("h-3 w-3 shrink-0 text-surface-fg-subtle transition-transform", o && "rotate-90") }),
+          e.detail && /* @__PURE__ */ t(F, { className: i("h-3 w-3 shrink-0 text-surface-fg-subtle transition-transform duration-fast-02 ease-productive-standard", d && "rotate-90") }),
           /* @__PURE__ */ t(
             "span",
             {
-              className: r(
+              className: i(
                 "text-surface-fg-muted",
-                e.detail && "cursor-pointer hover:underline"
+                e.detail && "cursor-pointer hover:underline hover:bg-surface-2 rounded-ds-md"
               ),
               onClick: n,
               role: e.detail ? "button" : void 0,
               tabIndex: e.detail ? 0 : void 0,
-              onKeyDown: e.detail ? (l) => {
-                (l.key === "Enter" || l.key === " ") && (l.preventDefault(), n());
+              onKeyDown: e.detail ? (r) => {
+                (r.key === "Enter" || r.key === " ") && (r.preventDefault(), n());
               } : void 0,
               children: e.action
             }
@@ -90,32 +90,32 @@ function T({
         /* @__PURE__ */ t(
           "time",
           {
-            className: r(
+            className: i(
               "shrink-0 whitespace-nowrap text-surface-fg-subtle",
-              s ? "text-ds-xs" : "text-ds-sm"
+              a ? "text-ds-xs" : "text-ds-sm"
             ),
             dateTime: (typeof e.timestamp == "string" ? new Date(e.timestamp) : e.timestamp).toISOString(),
-            children: j(e.timestamp)
+            children: L(e.timestamp)
           }
         )
       ] }),
-      o && e.detail && /* @__PURE__ */ t("div", { className: "mt-ds-02 animate-in fade-in slide-in-from-top-1 text-ds-sm text-surface-fg-muted", children: e.detail })
+      d && e.detail && /* @__PURE__ */ t("div", { className: "mt-ds-02 animate-in fade-in slide-in-from-top-1 text-ds-sm text-surface-fg-muted", children: e.detail })
     ] })
   ] });
 }
-function I({
+function Y({
   label: e,
-  isFirst: s
+  isFirst: a
 }) {
-  return /* @__PURE__ */ a(
-    R.div,
+  return /* @__PURE__ */ s(
+    T.div,
     {
       initial: { opacity: 0 },
       animate: { opacity: 1 },
-      transition: E.fade,
-      className: r(
+      transition: D.fade,
+      className: i(
         "flex items-center gap-ds-03",
-        s ? "" : "mt-ds-06",
+        a ? "" : "mt-ds-06",
         "mb-ds-03"
       ),
       children: [
@@ -126,39 +126,39 @@ function I({
     }
   );
 }
-const Y = N.forwardRef(
+const M = k.forwardRef(
   ({
     items: e,
-    onLoadMore: s,
-    loading: o = !1,
-    hasMore: d = !1,
+    onLoadMore: a,
+    loading: d = !1,
+    hasMore: o = !1,
     emptyState: c,
     compact: n = !1,
-    maxInitialItems: l,
-    groupBy: b = "none",
-    groupLabels: y,
+    maxInitialItems: r,
+    groupBy: y = "none",
+    groupLabels: b,
     className: f,
     ...m
   }, u) => {
-    const [p, h] = N.useState(!1);
-    if (o)
-      return /* @__PURE__ */ t("div", { ref: u, className: r("relative", f), ...m, children: /* @__PURE__ */ t(G, { compact: n }) });
+    const [g, h] = k.useState(!1);
+    if (d)
+      return /* @__PURE__ */ t("div", { ref: u, className: i("relative", f), ...m, children: /* @__PURE__ */ t(I, { compact: n }) });
     if (e.length === 0)
       return c ? /* @__PURE__ */ t("div", { ref: u, className: f, ...m, children: c }) : null;
-    const i = l != null && !p && e.length > l, w = i ? e.slice(0, l) : e, x = b === "time";
-    return /* @__PURE__ */ a("div", { ref: u, className: r("relative", f), ...m, children: [
-      x ? /* @__PURE__ */ t("div", { children: B(w, y).map((g, A) => /* @__PURE__ */ a("div", { children: [
-        /* @__PURE__ */ t(I, { label: g.label, isFirst: A === 0 }),
-        /* @__PURE__ */ a("div", { className: r("relative flex flex-col", n ? "gap-1" : "gap-3"), children: [
+    const l = r != null && !g && e.length > r, w = l ? e.slice(0, r) : e, x = y === "time";
+    return /* @__PURE__ */ s("div", { ref: u, className: i("relative", f), ...m, children: [
+      x ? /* @__PURE__ */ t("div", { children: G(w, b).map((p, N) => /* @__PURE__ */ s("div", { children: [
+        /* @__PURE__ */ t(Y, { label: p.label, isFirst: N === 0 }),
+        /* @__PURE__ */ s("div", { className: i("relative flex flex-col", n ? "gap-1" : "gap-3"), children: [
           /* @__PURE__ */ t("div", { className: "absolute bottom-0 left-[3px] top-0 w-px bg-surface-border" }),
-          g.items.map((k) => /* @__PURE__ */ t(T, { item: k, compact: n }, k.id))
+          p.items.map((A, C) => /* @__PURE__ */ t(T.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, transition: { ...D.fade, delay: C * 0.03 }, children: /* @__PURE__ */ t(O, { item: A, compact: n }) }, A.id))
         ] })
-      ] }, g.label)) }) : /* @__PURE__ */ a("div", { className: r("relative flex flex-col", n ? "gap-1" : "gap-3"), children: [
+      ] }, p.label)) }) : /* @__PURE__ */ s("div", { className: i("relative flex flex-col", n ? "gap-1" : "gap-3"), children: [
         /* @__PURE__ */ t("div", { className: "absolute bottom-0 left-[3px] top-0 w-px bg-surface-border" }),
-        w.map((g) => /* @__PURE__ */ t(T, { item: g, compact: n }, g.id))
+        w.map((p, N) => /* @__PURE__ */ t(T.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, transition: { ...D.fade, delay: N * 0.03 }, children: /* @__PURE__ */ t(O, { item: p, compact: n }) }, p.id))
       ] }),
-      i && /* @__PURE__ */ t("div", { className: "relative mt-ds-03 flex justify-center", children: /* @__PURE__ */ a(
-        D,
+      l && /* @__PURE__ */ t("div", { className: "relative mt-ds-03 flex justify-center", children: /* @__PURE__ */ s(
+        S,
         {
           variant: "ghost",
           size: "sm",
@@ -170,12 +170,12 @@ const Y = N.forwardRef(
           ]
         }
       ) }),
-      d && s && !i && /* @__PURE__ */ t("div", { className: "relative mt-ds-03 flex justify-center", children: /* @__PURE__ */ t(D, { variant: "ghost", size: "sm", onClick: s, children: "Load more" }) })
+      o && a && !l && /* @__PURE__ */ t("div", { className: "relative mt-ds-03 flex justify-center", children: /* @__PURE__ */ t(S, { variant: "ghost", size: "sm", onClick: a, children: "Load more" }) })
     ] });
   }
 );
-Y.displayName = "ActivityFeed";
+M.displayName = "ActivityFeed";
 export {
-  Y as ActivityFeed,
-  B as groupItemsByTime
+  M as ActivityFeed,
+  G as groupItemsByTime
 };

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 avatars expand on hover. @default 'right' */
+    expandDirection?: 'left' | 'right';
+    /** How much avatars spread apart on hover. @default 'default' */
+    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;AAS9C,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,0DAA0D;IAC1D,eAAe,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IAClC,iEAAiE;IACjE,YAAY,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,MAAM,CAAA;CAC9C;AAED,QAAA,MAAM,WAAW,yFAkLhB,CAAA;AAGD,OAAO,EAAE,WAAW,EAAE,CAAA"}

package/dist/composed/avatar-group.js

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