@devalok/shilp-sutra 0.28.0 → 0.30.0

package/dist/composed/activity-feed.js

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

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

@@ -9,6 +9,7 @@ export interface AvatarUser {
     name: string;
     image?: string | null;
     ring?: AvatarRing;
+    indicator?: 'lead' | 'admin' | React.ReactNode;
 }
 export interface AvatarGroupProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof avatarSizeVariants> {
     users: AvatarUser[];

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;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,oEAAoE;IACpE,WAAW,CAAC,EAAE,cAAc,GAAG,gBAAgB,CAAA;IAC/C,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,yFAqLhB,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;AASjE,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;IACjB,SAAS,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,KAAK,CAAC,SAAS,CAAA;CAC/C;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,oEAAoE;IACpE,WAAW,CAAC,EAAE,cAAc,GAAG,gBAAgB,CAAA;IAC/C,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,yFAmOhB,CAAA;AAGD,OAAO,EAAE,WAAW,EAAE,CAAA"}

package/dist/composed/avatar-group.js

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

package/dist/composed/bulk-action-bar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"bulk-action-bar.d.ts","sourceRoot":"","sources":["../../src/composed/bulk-action-bar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAa9B,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAA;IAClD,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,KAAK,CAAC,EAAE,SAAS,GAAG,OAAO,CAAA;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,2DAA2D;IAC3D,oBAAoB,CAAC,EAAE,OAAO,CAAA;IAC9B,2DAA2D;IAC3D,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB;AAED,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,OAAO,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,gBAAgB,EAAE,MAAM,IAAI,CAAA;IAC5B,OAAO,EAAE,mBAAmB,EAAE,CAAA;IAC9B,oDAAoD;IACpD,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,2CAA2C;IAC3C,WAAW,CAAC,EAAE,MAAM,IAAI,CAAA;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAoED,iBAAS,aAAa,CAAC,EACrB,IAAI,EACJ,KAAK,EACL,gBAAgB,EAChB,OAAO,EACP,UAAU,EACV,WAAW,EACX,SAAS,GACV,EAAE,kBAAkB,4BAwDpB;AAED,OAAO,EAAE,aAAa,EAAE,CAAA"}
+{"version":3,"file":"bulk-action-bar.d.ts","sourceRoot":"","sources":["../../src/composed/bulk-action-bar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAc9B,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAA;IAClD,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,KAAK,CAAC,EAAE,SAAS,GAAG,OAAO,CAAA;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,2DAA2D;IAC3D,oBAAoB,CAAC,EAAE,OAAO,CAAA;IAC9B,2DAA2D;IAC3D,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB;AAED,MAAM,WAAW,kBAAkB;IACjC,IAAI,EAAE,OAAO,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,gBAAgB,EAAE,MAAM,IAAI,CAAA;IAC5B,OAAO,EAAE,mBAAmB,EAAE,CAAA;IAC9B,oDAAoD;IACpD,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,2CAA2C;IAC3C,WAAW,CAAC,EAAE,MAAM,IAAI,CAAA;IACxB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAoED,iBAAS,aAAa,CAAC,EACrB,IAAI,EACJ,KAAK,EACL,gBAAgB,EAChB,OAAO,EACP,UAAU,EACV,WAAW,EACX,SAAS,GACV,EAAE,kBAAkB,4BAwDpB;AAED,OAAO,EAAE,aAAa,EAAE,CAAA"}