@devalok/shilp-sutra 0.36.0 → 0.37.0-next.0

package/dist/composed/activity-feed.js

@@ -1,16 +1,16 @@
 "use client";
-import { a as e } from "../_chunks/framer.js";
-import { tweens as t } from "../ui/lib/motion.js";
-import { cn as n } from "../ui/lib/utils.js";
-import { Icon as r } from "../ui/icon.js";
-import { Avatar as i, AvatarFallback as a, AvatarImage as o } from "../ui/avatar.js";
-import { Button as s } from "../ui/button.js";
-import { Skeleton as c } from "../ui/skeleton.js";
-import { formatRelativeTime as l } from "../ui/lib/date-utils.js";
-import { getInitials as u } from "./lib/string-utils.js";
-import * as d from "react";
-import { jsx as f, jsxs as p } from "react/jsx-runtime";
-import { IconChevronRight as m } from "@tabler/icons-react";
+import { tweens as e } from "../ui/lib/motion.js";
+import { cn as t } from "../ui/lib/utils.js";
+import { Icon as n } from "../ui/icon.js";
+import { Avatar as r, AvatarFallback as i, AvatarImage as a } from "../ui/avatar.js";
+import { Button as o } from "../ui/button.js";
+import { Skeleton as s } from "../ui/skeleton.js";
+import { formatRelativeTime as c } from "../ui/lib/date-utils.js";
+import { getInitials as l } from "./lib/string-utils.js";
+import * as u from "react";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+import { IconChevronRight as p } from "@tabler/icons-react";
+import { motion as m } from "framer-motion";
 //#region src/composed/activity-feed.tsx
 var h = {
 	default: "bg-surface-fg-subtle",
@@ -49,59 +49,59 @@ function _(e, t) {
 	}), p;
 }
 function v({ compact: e }) {
-	return /* @__PURE__ */ f("div", {
-		className: n("flex flex-col", e ? "gap-1" : "gap-3"),
+	return /* @__PURE__ */ d("div", {
+		className: t("flex flex-col", e ? "gap-1" : "gap-3"),
 		children: [
 			0,
 			1,
 			2
-		].map((t) => /* @__PURE__ */ p("div", {
+		].map((n) => /* @__PURE__ */ f("div", {
 			className: "flex items-center gap-ds-03",
 			children: [
-				/* @__PURE__ */ f(c, { className: "h-2 w-2 shrink-0 rounded-ds-full" }),
-				!e && /* @__PURE__ */ f(c, { className: "h-4 w-4 shrink-0 rounded-ds-full" }),
-				/* @__PURE__ */ f(c, { className: n("flex-1", e ? "h-3" : "h-4") }),
-				/* @__PURE__ */ f(c, { className: "h-3 w-12" })
+				/* @__PURE__ */ d(s, { className: "h-2 w-2 shrink-0 rounded-ds-full" }),
+				!e && /* @__PURE__ */ d(s, { className: "h-4 w-4 shrink-0 rounded-ds-full" }),
+				/* @__PURE__ */ d(s, { className: t("flex-1", e ? "h-3" : "h-4") }),
+				/* @__PURE__ */ d(s, { className: "h-3 w-12" })
 			]
-		}, t))
+		}, n))
 	});
 }
-function y({ item: e, compact: t }) {
-	let [s, c] = d.useState(!1), g = e.color ?? "default", _ = () => {
-		e.detail && c((e) => !e);
+function y({ item: e, compact: o }) {
+	let [s, m] = u.useState(!1), g = e.color ?? "default", _ = () => {
+		e.detail && m((e) => !e);
 	};
-	return /* @__PURE__ */ p("div", {
-		className: n("relative flex items-start", t ? "gap-ds-02" : "gap-ds-03"),
+	return /* @__PURE__ */ f("div", {
+		className: t("relative flex items-start", o ? "gap-ds-02" : "gap-ds-03"),
 		children: [
-			/* @__PURE__ */ f("div", { className: n("relative z-10 mt-1.5 h-2 w-2 shrink-0 rounded-ds-full ring-2 ring-surface-base", h[g]) }),
-			!t && e.actor && /* @__PURE__ */ p(i, {
+			/* @__PURE__ */ d("div", { className: t("relative z-10 mt-1.5 h-2 w-2 shrink-0 rounded-ds-full ring-2 ring-surface-base", h[g]) }),
+			!o && e.actor && /* @__PURE__ */ f(r, {
 				className: "h-5 w-5 shrink-0 text-[9px]",
-				children: [e.actor.image && /* @__PURE__ */ f(o, {
+				children: [e.actor.image && /* @__PURE__ */ d(a, {
 					src: e.actor.image,
 					alt: e.actor.name
-				}), /* @__PURE__ */ f(a, {
+				}), /* @__PURE__ */ d(i, {
 					className: "text-[9px]",
-					children: u(e.actor.name)
+					children: l(e.actor.name)
 				})]
 			}),
-			/* @__PURE__ */ p("div", {
+			/* @__PURE__ */ f("div", {
 				className: "flex min-w-0 flex-1 flex-col",
-				children: [/* @__PURE__ */ p("div", {
+				children: [/* @__PURE__ */ f("div", {
 					className: "flex items-center justify-between gap-ds-02",
-					children: [/* @__PURE__ */ p("div", {
-						className: n("min-w-0 flex-1 flex items-center gap-ds-01 flex-wrap", t ? "text-ds-xs" : "text-ds-sm"),
+					children: [/* @__PURE__ */ f("div", {
+						className: t("min-w-0 flex-1 flex items-center gap-ds-01 flex-wrap", o ? "text-ds-xs" : "text-ds-sm"),
 						children: [
-							e.actor && /* @__PURE__ */ p("span", {
+							e.actor && /* @__PURE__ */ f("span", {
 								className: "font-medium text-surface-fg",
 								children: [e.actor.name, " "]
 							}),
-							e.detail && /* @__PURE__ */ f(r, {
-								icon: m,
+							e.detail && /* @__PURE__ */ d(n, {
+								icon: p,
 								size: "xs",
-								className: n("shrink-0 text-surface-fg-subtle transition-transform duration-fast-02 ease-productive-standard", s && "rotate-90")
+								className: t("shrink-0 text-surface-fg-subtle transition-transform duration-fast-02 ease-productive-standard", s && "rotate-90")
 							}),
-							/* @__PURE__ */ f("span", {
-								className: n("text-surface-fg-muted", e.detail && "cursor-pointer hover:underline hover:bg-surface-raised rounded-ds-md"),
+							/* @__PURE__ */ d("span", {
+								className: t("text-surface-fg-muted", e.detail && "cursor-pointer hover:underline hover:bg-surface-raised rounded-ds-md"),
 								onClick: _,
 								role: e.detail ? "button" : void 0,
 								tabIndex: e.detail ? 0 : void 0,
@@ -111,12 +111,12 @@ function y({ item: e, compact: t }) {
 								children: e.action
 							})
 						]
-					}), /* @__PURE__ */ f("time", {
-						className: n("shrink-0 whitespace-nowrap text-surface-fg-subtle", t ? "text-ds-xs" : "text-ds-sm"),
+					}), /* @__PURE__ */ d("time", {
+						className: t("shrink-0 whitespace-nowrap text-surface-fg-subtle", o ? "text-ds-xs" : "text-ds-sm"),
 						dateTime: (typeof e.timestamp == "string" ? new Date(e.timestamp) : e.timestamp).toISOString(),
-						children: l(e.timestamp)
+						children: c(e.timestamp)
 					})]
-				}), s && e.detail && /* @__PURE__ */ f("div", {
+				}), s && e.detail && /* @__PURE__ */ d("div", {
 					className: "mt-ds-02 animate-in fade-in slide-in-from-top-1 text-ds-sm text-surface-fg-muted",
 					children: e.detail
 				})]
@@ -124,110 +124,110 @@ function y({ item: e, compact: t }) {
 		]
 	});
 }
-function b({ item: e, compact: t, children: r }) {
+function b({ item: e, compact: n, children: r }) {
 	let i = e.color ?? "default";
-	return /* @__PURE__ */ p("div", {
-		className: n("relative flex items-start", t ? "gap-ds-02" : "gap-ds-03"),
-		children: [/* @__PURE__ */ f("div", { className: n("relative z-10 mt-1.5 h-2 w-2 shrink-0 rounded-ds-full ring-2 ring-surface-base", h[i]) }), /* @__PURE__ */ f("div", {
+	return /* @__PURE__ */ f("div", {
+		className: t("relative flex items-start", n ? "gap-ds-02" : "gap-ds-03"),
+		children: [/* @__PURE__ */ d("div", { className: t("relative z-10 mt-1.5 h-2 w-2 shrink-0 rounded-ds-full ring-2 ring-surface-base", h[i]) }), /* @__PURE__ */ d("div", {
 			className: "min-w-0 flex-1",
 			children: r
 		})]
 	});
 }
-function x({ label: r, isFirst: i }) {
-	return /* @__PURE__ */ p(e.div, {
+function x({ label: n, isFirst: r }) {
+	return /* @__PURE__ */ f(m.div, {
 		initial: { opacity: 0 },
 		animate: { opacity: 1 },
-		transition: t.fade,
-		className: n("flex items-center gap-ds-03", i ? "" : "mt-ds-06", "mb-ds-03"),
+		transition: e.fade,
+		className: t("flex items-center gap-ds-03", r ? "" : "mt-ds-06", "mb-ds-03"),
 		children: [
-			/* @__PURE__ */ f("hr", { className: "flex-1 border-surface-border" }),
-			/* @__PURE__ */ f("span", {
+			/* @__PURE__ */ d("hr", { className: "flex-1 border-surface-border" }),
+			/* @__PURE__ */ d("span", {
 				className: "bg-surface-base px-ds-03 text-ds-xs font-medium uppercase tracking-wider text-surface-fg-subtle",
-				children: r
+				children: n
 			}),
-			/* @__PURE__ */ f("hr", { className: "flex-1 border-surface-border" })
+			/* @__PURE__ */ d("hr", { className: "flex-1 border-surface-border" })
 		]
 	});
 }
-var S = d.forwardRef(({ items: r, onLoadMore: i, loading: a = !1, hasMore: o = !1, emptyState: c, compact: l = !1, maxInitialItems: u, groupBy: m = "none", groupLabels: h, renderItem: g, className: S, ...C }, w) => {
-	let [T, E] = d.useState(!1);
-	if (a) return /* @__PURE__ */ f("div", {
+var S = u.forwardRef(({ items: n, onLoadMore: r, loading: i = !1, hasMore: a = !1, emptyState: s, compact: c = !1, maxInitialItems: l, groupBy: p = "none", groupLabels: h, renderItem: g, className: S, ...C }, w) => {
+	let [T, E] = u.useState(!1);
+	if (i) return /* @__PURE__ */ d("div", {
 		ref: w,
-		className: n("relative", S),
+		className: t("relative", S),
 		...C,
-		children: /* @__PURE__ */ f(v, { compact: l })
+		children: /* @__PURE__ */ d(v, { compact: c })
 	});
-	if (r.length === 0) return c ? /* @__PURE__ */ f("div", {
+	if (n.length === 0) return s ? /* @__PURE__ */ d("div", {
 		ref: w,
 		className: S,
 		...C,
-		children: c
+		children: s
 	}) : null;
-	let D = u != null && !T && r.length > u, O = D ? r.slice(0, u) : r, k = m === "time", A = (e, t) => {
+	let D = l != null && !T && n.length > l, O = D ? n.slice(0, l) : n, k = p === "time", A = (e, t) => {
 		if (g) {
 			let n = g(e, t);
-			if (n !== void 0) return /* @__PURE__ */ f(b, {
+			if (n !== void 0) return /* @__PURE__ */ d(b, {
 				item: e,
-				compact: l,
+				compact: c,
 				children: n
 			});
 		}
-		return /* @__PURE__ */ f(y, {
+		return /* @__PURE__ */ d(y, {
 			item: e,
-			compact: l
+			compact: c
 		});
 	};
-	return /* @__PURE__ */ p("div", {
+	return /* @__PURE__ */ f("div", {
 		ref: w,
-		className: n("relative", S),
+		className: t("relative", S),
 		...C,
 		children: [
-			k ? /* @__PURE__ */ f("div", { children: _(O, h).map((r, i) => /* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f(x, {
-				label: r.label,
-				isFirst: i === 0
-			}), /* @__PURE__ */ p("div", {
-				className: n("relative flex flex-col", l ? "gap-1" : "gap-3"),
-				children: [/* @__PURE__ */ f("div", { className: "absolute bottom-0 left-[3px] top-0 w-px bg-surface-border" }), r.items.map((n, r) => /* @__PURE__ */ f(e.div, {
+			k ? /* @__PURE__ */ d("div", { children: _(O, h).map((n, r) => /* @__PURE__ */ f("div", { children: [/* @__PURE__ */ d(x, {
+				label: n.label,
+				isFirst: r === 0
+			}), /* @__PURE__ */ f("div", {
+				className: t("relative flex flex-col", c ? "gap-1" : "gap-3"),
+				children: [/* @__PURE__ */ d("div", { className: "absolute bottom-0 left-[3px] top-0 w-px bg-surface-border" }), n.items.map((t, n) => /* @__PURE__ */ d(m.div, {
 					initial: { opacity: 0 },
 					animate: { opacity: 1 },
 					transition: {
-						...t.fade,
-						delay: r * .03
+						...e.fade,
+						delay: n * .03
 					},
-					children: A(n, r)
-				}, n.id))]
-			})] }, r.label)) }) : /* @__PURE__ */ p("div", {
-				className: n("relative flex flex-col", l ? "gap-1" : "gap-3"),
-				children: [/* @__PURE__ */ f("div", { className: "absolute bottom-0 left-[3px] top-0 w-px bg-surface-border" }), O.map((n, r) => /* @__PURE__ */ f(e.div, {
+					children: A(t, n)
+				}, t.id))]
+			})] }, n.label)) }) : /* @__PURE__ */ f("div", {
+				className: t("relative flex flex-col", c ? "gap-1" : "gap-3"),
+				children: [/* @__PURE__ */ d("div", { className: "absolute bottom-0 left-[3px] top-0 w-px bg-surface-border" }), O.map((t, n) => /* @__PURE__ */ d(m.div, {
 					initial: { opacity: 0 },
 					animate: { opacity: 1 },
 					transition: {
-						...t.fade,
-						delay: r * .03
+						...e.fade,
+						delay: n * .03
 					},
-					children: A(n, r)
-				}, n.id))]
+					children: A(t, n)
+				}, t.id))]
 			}),
-			D && /* @__PURE__ */ f("div", {
+			D && /* @__PURE__ */ d("div", {
 				className: "relative mt-ds-03 flex justify-center",
-				children: /* @__PURE__ */ p(s, {
+				children: /* @__PURE__ */ f(o, {
 					variant: "ghost",
 					size: "sm",
 					onClick: () => E(!0),
 					children: [
 						"Show all (",
-						r.length,
+						n.length,
 						")"
 					]
 				})
 			}),
-			o && i && !D && /* @__PURE__ */ f("div", {
+			a && r && !D && /* @__PURE__ */ d("div", {
 				className: "relative mt-ds-03 flex justify-center",
-				children: /* @__PURE__ */ f(s, {
+				children: /* @__PURE__ */ d(o, {
 					variant: "ghost",
 					size: "sm",
-					onClick: i,
+					onClick: r,
 					children: "Load more"
 				})
 			})

package/dist/composed/activity-feed.js.map

@@ -1 +1 @@
-{"version":3,"file":"activity-feed.js","names":[],"sources":["../../src/composed/activity-feed.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../ui/lib/utils'\nimport { IconChevronRight } from '@tabler/icons-react'\nimport { Icon } from '../ui/icon'\nimport { Avatar, AvatarFallback, AvatarImage } from '../ui/avatar'\nimport { Button } from '../ui/button'\nimport { Skeleton } from '../ui/skeleton'\nimport { getInitials } from './lib/string-utils'\nimport { formatRelativeTime } from '../ui/lib/date-utils'\nimport { motion } from 'framer-motion'\nimport { tweens } from '../ui/lib/motion'\n\nexport interface ActivityItem {\n  id: string\n  actor?: { name: string; image?: string }\n  action: string | React.ReactNode\n  timestamp: Date | string\n  icon?: React.ReactNode\n  color?: 'default' | 'success' | 'warning' | 'error' | 'info'\n  detail?: React.ReactNode\n}\n\nexport interface GroupLabels {\n  today?: string\n  yesterday?: string\n  thisWeek?: string\n  older?: string\n}\n\nexport interface ActivityFeedProps extends React.HTMLAttributes<HTMLDivElement> {\n  items: ActivityItem[]\n  onLoadMore?: () => void\n  loading?: boolean\n  hasMore?: boolean\n  emptyState?: React.ReactNode\n  compact?: boolean\n  maxInitialItems?: number\n  groupBy?: 'time' | 'none'\n  groupLabels?: GroupLabels\n  /** Custom renderer per item. Return ReactNode for custom rendering, undefined to use default ActivityEntry. */\n  renderItem?: (item: ActivityItem, index: number) => React.ReactNode | undefined\n}\n\nconst dotColorMap = {\n  default: 'bg-surface-fg-subtle',\n  success: 'bg-success-9',\n  warning: 'bg-warning-9',\n  error: 'bg-error-9',\n  info: 'bg-info-9',\n} as const\n\nconst DEFAULT_GROUP_LABELS: Required<GroupLabels> = {\n  today: 'Today',\n  yesterday: 'Yesterday',\n  thisWeek: 'This Week',\n  older: 'Older',\n}\n\n/**\n * Buckets items into time-based groups: today, yesterday, earlier this week (since Monday), older.\n * Skips empty groups.\n */\nexport function groupItemsByTime(\n  items: ActivityItem[],\n  labels?: GroupLabels,\n): { label: string; items: ActivityItem[] }[] {\n  const l = { ...DEFAULT_GROUP_LABELS, ...labels }\n  const now = new Date()\n\n  // Start of today (midnight local)\n  const startOfToday = new Date(now.getFullYear(), now.getMonth(), now.getDate())\n  // Start of yesterday\n  const startOfYesterday = new Date(startOfToday.getTime() - 24 * 60 * 60 * 1000)\n  // Start of this week (Monday)\n  const dayOfWeek = now.getDay() // 0=Sun, 1=Mon, ...\n  const daysSinceMonday = dayOfWeek === 0 ? 6 : dayOfWeek - 1\n  const startOfWeek = new Date(\n    startOfToday.getTime() - daysSinceMonday * 24 * 60 * 60 * 1000,\n  )\n\n  const today: ActivityItem[] = []\n  const yesterday: ActivityItem[] = []\n  const thisWeek: ActivityItem[] = []\n  const older: ActivityItem[] = []\n\n  for (const item of items) {\n    const ts =\n      typeof item.timestamp === 'string'\n        ? new Date(item.timestamp)\n        : item.timestamp\n    const t = ts.getTime()\n\n    if (t >= startOfToday.getTime()) {\n      today.push(item)\n    } else if (t >= startOfYesterday.getTime()) {\n      yesterday.push(item)\n    } else if (t >= startOfWeek.getTime()) {\n      thisWeek.push(item)\n    } else {\n      older.push(item)\n    }\n  }\n\n  const groups: { label: string; items: ActivityItem[] }[] = []\n  if (today.length > 0) groups.push({ label: l.today, items: today })\n  if (yesterday.length > 0) groups.push({ label: l.yesterday, items: yesterday })\n  if (thisWeek.length > 0) groups.push({ label: l.thisWeek, items: thisWeek })\n  if (older.length > 0) groups.push({ label: l.older, items: older })\n\n  return groups\n}\n\nfunction LoadingSkeleton({ compact }: { compact: boolean }) {\n  return (\n    <div className={cn('flex flex-col', compact ? 'gap-1' : 'gap-3')}>\n      {[0, 1, 2].map((i) => (\n        <div key={i} className=\"flex items-center gap-ds-03\">\n          <Skeleton className=\"h-2 w-2 shrink-0 rounded-ds-full\" />\n          {!compact && <Skeleton className=\"h-4 w-4 shrink-0 rounded-ds-full\" />}\n          <Skeleton className={cn('flex-1', compact ? 'h-3' : 'h-4')} />\n          <Skeleton className=\"h-3 w-12\" />\n        </div>\n      ))}\n    </div>\n  )\n}\n\nfunction ActivityEntry({\n  item,\n  compact,\n}: {\n  item: ActivityItem\n  compact: boolean\n}) {\n  const [expandedDetail, setExpandedDetail] = React.useState(false)\n  const color = item.color ?? 'default'\n\n  const handleActionClick = () => {\n    if (item.detail) {\n      setExpandedDetail((prev) => !prev)\n    }\n  }\n\n  return (\n    <div className={cn('relative flex items-start', compact ? 'gap-ds-02' : 'gap-ds-03')}>\n      {/* Dot */}\n      <div\n        className={cn(\n          'relative z-10 mt-1.5 h-2 w-2 shrink-0 rounded-ds-full ring-2 ring-surface-base',\n          dotColorMap[color],\n        )}\n      />\n\n      {/* Avatar (non-compact only) */}\n      {!compact && item.actor && (\n        <Avatar className=\"h-5 w-5 shrink-0 text-[9px]\">\n          {item.actor.image && (\n            <AvatarImage src={item.actor.image} alt={item.actor.name} />\n          )}\n          <AvatarFallback className=\"text-[9px]\">\n            {getInitials(item.actor.name)}\n          </AvatarFallback>\n        </Avatar>\n      )}\n\n      {/* Content */}\n      <div className=\"flex min-w-0 flex-1 flex-col\">\n        <div className=\"flex items-center justify-between gap-ds-02\">\n          <div className={cn('min-w-0 flex-1 flex items-center gap-ds-01 flex-wrap', compact ? 'text-ds-xs' : 'text-ds-sm')}>\n            {item.actor && (\n              <span className=\"font-medium text-surface-fg\">{item.actor.name} </span>\n            )}\n            {item.detail && (\n              <Icon icon={IconChevronRight} size=\"xs\" className={cn('shrink-0 text-surface-fg-subtle transition-transform duration-fast-02 ease-productive-standard', expandedDetail && 'rotate-90')} />\n            )}\n            <span\n              className={cn(\n                'text-surface-fg-muted',\n                item.detail && 'cursor-pointer hover:underline hover:bg-surface-raised rounded-ds-md',\n              )}\n              onClick={handleActionClick}\n              role={item.detail ? 'button' : undefined}\n              tabIndex={item.detail ? 0 : undefined}\n              onKeyDown={\n                item.detail\n                  ? (e) => {\n                      if (e.key === 'Enter' || e.key === ' ') {\n                        e.preventDefault()\n                        handleActionClick()\n                      }\n                    }\n                  : undefined\n              }\n            >\n              {item.action}\n            </span>\n          </div>\n\n          <time\n            className={cn(\n              'shrink-0 whitespace-nowrap text-surface-fg-subtle',\n              compact ? 'text-ds-xs' : 'text-ds-sm',\n            )}\n            dateTime={\n              (typeof item.timestamp === 'string'\n                ? new Date(item.timestamp)\n                : item.timestamp\n              ).toISOString()\n            }\n          >\n            {formatRelativeTime(item.timestamp)}\n          </time>\n        </div>\n\n        {/* Expandable detail */}\n        {expandedDetail && item.detail && (\n          <div className=\"mt-ds-02 animate-in fade-in slide-in-from-top-1 text-ds-sm text-surface-fg-muted\">\n            {item.detail}\n          </div>\n        )}\n      </div>\n    </div>\n  )\n}\n\n/**\n * Wraps custom renderItem content with the same dot + layout container\n * that ActivityEntry uses, keeping vertical rhythm consistent.\n */\nfunction CustomEntry({\n  item,\n  compact,\n  children,\n}: {\n  item: ActivityItem\n  compact: boolean\n  children: React.ReactNode\n}) {\n  const color = item.color ?? 'default'\n  return (\n    <div className={cn('relative flex items-start', compact ? 'gap-ds-02' : 'gap-ds-03')}>\n      {/* Dot — same as ActivityEntry */}\n      <div\n        className={cn(\n          'relative z-10 mt-1.5 h-2 w-2 shrink-0 rounded-ds-full ring-2 ring-surface-base',\n          dotColorMap[color],\n        )}\n      />\n      {/* Custom content in the same flex slot as ActivityEntry's content area */}\n      <div className=\"min-w-0 flex-1\">{children}</div>\n    </div>\n  )\n}\n\nfunction GroupHeader({\n  label,\n  isFirst,\n}: {\n  label: string\n  isFirst: boolean\n}) {\n  return (\n    <motion.div\n      initial={{ opacity: 0 }}\n      animate={{ opacity: 1 }}\n      transition={tweens.fade}\n      className={cn(\n        'flex items-center gap-ds-03',\n        !isFirst ? 'mt-ds-06' : '',\n        'mb-ds-03',\n      )}\n    >\n      <hr className=\"flex-1 border-surface-border\" />\n      <span className=\"bg-surface-base px-ds-03 text-ds-xs font-medium uppercase tracking-wider text-surface-fg-subtle\">\n        {label}\n      </span>\n      <hr className=\"flex-1 border-surface-border\" />\n    </motion.div>\n  )\n}\n\nconst ActivityFeed = React.forwardRef<HTMLDivElement, ActivityFeedProps>(\n  (\n    {\n      items,\n      onLoadMore,\n      loading = false,\n      hasMore = false,\n      emptyState,\n      compact = false,\n      maxInitialItems,\n      groupBy = 'none',\n      groupLabels,\n      renderItem,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const [showAll, setShowAll] = React.useState(false)\n\n    if (loading) {\n      return (\n        <div ref={ref} className={cn('relative', className)} {...props}>\n          <LoadingSkeleton compact={compact} />\n        </div>\n      )\n    }\n\n    if (items.length === 0) {\n      if (emptyState) {\n        return (\n          <div ref={ref} className={className} {...props}>\n            {emptyState}\n          </div>\n        )\n      }\n      return null\n    }\n\n    // maxInitialItems applies to the flat list BEFORE grouping\n    const truncated =\n      maxInitialItems != null && !showAll && items.length > maxInitialItems\n    const visibleItems = truncated ? items.slice(0, maxInitialItems) : items\n\n    const useGrouping = groupBy === 'time'\n\n    /** Resolve what to render for a single item, respecting renderItem. */\n    const resolveEntry = (item: ActivityItem, index: number) => {\n      if (renderItem) {\n        const custom = renderItem(item, index)\n        if (custom !== undefined) {\n          return <CustomEntry item={item} compact={compact}>{custom}</CustomEntry>\n        }\n      }\n      return <ActivityEntry item={item} compact={compact} />\n    }\n\n    return (\n      <div ref={ref} className={cn('relative', className)} {...props}>\n        {/* Items */}\n        {useGrouping ? (\n          <div>\n            {groupItemsByTime(visibleItems, groupLabels).map((group, gi) => (\n              <div key={group.label}>\n                <GroupHeader label={group.label} isFirst={gi === 0} />\n                {/* Timeline line scoped to this group */}\n                <div className={cn('relative flex flex-col', compact ? 'gap-1' : 'gap-3')}>\n                  <div className=\"absolute bottom-0 left-[3px] top-0 w-px bg-surface-border\" />\n                  {group.items.map((item, index) => (\n                    <motion.div key={item.id} initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ ...tweens.fade, delay: index * 0.03 }}>\n                      {resolveEntry(item, index)}\n                    </motion.div>\n                  ))}\n                </div>\n              </div>\n            ))}\n          </div>\n        ) : (\n          <div className={cn('relative flex flex-col', compact ? 'gap-1' : 'gap-3')}>\n            {/* Timeline line */}\n            <div className=\"absolute bottom-0 left-[3px] top-0 w-px bg-surface-border\" />\n            {visibleItems.map((item, index) => (\n              <motion.div key={item.id} initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ ...tweens.fade, delay: index * 0.03 }}>\n                {resolveEntry(item, index)}\n              </motion.div>\n            ))}\n          </div>\n        )}\n\n        {/* Show all button */}\n        {truncated && (\n          <div className=\"relative mt-ds-03 flex justify-center\">\n            <Button\n              variant=\"ghost\"\n              size=\"sm\"\n              onClick={() => setShowAll(true)}\n            >\n              Show all ({items.length})\n            </Button>\n          </div>\n        )}\n\n        {/* Load more button */}\n        {hasMore && onLoadMore && !truncated && (\n          <div className=\"relative mt-ds-03 flex justify-center\">\n            <Button variant=\"ghost\" size=\"sm\" onClick={onLoadMore}>\n              Load more\n            </Button>\n          </div>\n        )}\n      </div>\n    )\n  },\n)\nActivityFeed.displayName = 'ActivityFeed'\n\nexport { ActivityFeed }\n"],"mappings":"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"}
+{"version":3,"file":"activity-feed.js","names":[],"sources":["../../src/composed/activity-feed.tsx"],"sourcesContent":["'use client'\n\nimport { IconChevronRight } from '@tabler/icons-react'\nimport { motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport { Avatar, AvatarFallback, AvatarImage } from '../ui/avatar'\nimport { Button } from '../ui/button'\nimport { Icon } from '../ui/icon'\nimport { formatRelativeTime } from '../ui/lib/date-utils'\nimport { tweens } from '../ui/lib/motion'\nimport { cn } from '../ui/lib/utils'\nimport { Skeleton } from '../ui/skeleton'\nimport { getInitials } from './lib/string-utils'\n\nexport interface ActivityItem {\n  id: string\n  actor?: { name: string; image?: string }\n  action: string | React.ReactNode\n  timestamp: Date | string\n  icon?: React.ReactNode\n  color?: 'default' | 'success' | 'warning' | 'error' | 'info'\n  detail?: React.ReactNode\n}\n\nexport interface GroupLabels {\n  today?: string\n  yesterday?: string\n  thisWeek?: string\n  older?: string\n}\n\nexport interface ActivityFeedProps extends React.HTMLAttributes<HTMLDivElement> {\n  items: ActivityItem[]\n  onLoadMore?: () => void\n  loading?: boolean\n  hasMore?: boolean\n  emptyState?: React.ReactNode\n  compact?: boolean\n  maxInitialItems?: number\n  groupBy?: 'time' | 'none'\n  groupLabels?: GroupLabels\n  /** Custom renderer per item. Return ReactNode for custom rendering, undefined to use default ActivityEntry. */\n  renderItem?: (item: ActivityItem, index: number) => React.ReactNode | undefined\n}\n\nconst dotColorMap = {\n  default: 'bg-surface-fg-subtle',\n  success: 'bg-success-9',\n  warning: 'bg-warning-9',\n  error: 'bg-error-9',\n  info: 'bg-info-9',\n} as const\n\nconst DEFAULT_GROUP_LABELS: Required<GroupLabels> = {\n  today: 'Today',\n  yesterday: 'Yesterday',\n  thisWeek: 'This Week',\n  older: 'Older',\n}\n\n/**\n * Buckets items into time-based groups: today, yesterday, earlier this week (since Monday), older.\n * Skips empty groups.\n */\nexport function groupItemsByTime(\n  items: ActivityItem[],\n  labels?: GroupLabels,\n): { label: string; items: ActivityItem[] }[] {\n  const l = { ...DEFAULT_GROUP_LABELS, ...labels }\n  const now = new Date()\n\n  // Start of today (midnight local)\n  const startOfToday = new Date(now.getFullYear(), now.getMonth(), now.getDate())\n  // Start of yesterday\n  const startOfYesterday = new Date(startOfToday.getTime() - 24 * 60 * 60 * 1000)\n  // Start of this week (Monday)\n  const dayOfWeek = now.getDay() // 0=Sun, 1=Mon, ...\n  const daysSinceMonday = dayOfWeek === 0 ? 6 : dayOfWeek - 1\n  const startOfWeek = new Date(\n    startOfToday.getTime() - daysSinceMonday * 24 * 60 * 60 * 1000,\n  )\n\n  const today: ActivityItem[] = []\n  const yesterday: ActivityItem[] = []\n  const thisWeek: ActivityItem[] = []\n  const older: ActivityItem[] = []\n\n  for (const item of items) {\n    const ts =\n      typeof item.timestamp === 'string'\n        ? new Date(item.timestamp)\n        : item.timestamp\n    const t = ts.getTime()\n\n    if (t >= startOfToday.getTime()) {\n      today.push(item)\n    } else if (t >= startOfYesterday.getTime()) {\n      yesterday.push(item)\n    } else if (t >= startOfWeek.getTime()) {\n      thisWeek.push(item)\n    } else {\n      older.push(item)\n    }\n  }\n\n  const groups: { label: string; items: ActivityItem[] }[] = []\n  if (today.length > 0) groups.push({ label: l.today, items: today })\n  if (yesterday.length > 0) groups.push({ label: l.yesterday, items: yesterday })\n  if (thisWeek.length > 0) groups.push({ label: l.thisWeek, items: thisWeek })\n  if (older.length > 0) groups.push({ label: l.older, items: older })\n\n  return groups\n}\n\nfunction LoadingSkeleton({ compact }: { compact: boolean }) {\n  return (\n    <div className={cn('flex flex-col', compact ? 'gap-1' : 'gap-3')}>\n      {[0, 1, 2].map((i) => (\n        <div key={i} className=\"flex items-center gap-ds-03\">\n          <Skeleton className=\"h-2 w-2 shrink-0 rounded-ds-full\" />\n          {!compact && <Skeleton className=\"h-4 w-4 shrink-0 rounded-ds-full\" />}\n          <Skeleton className={cn('flex-1', compact ? 'h-3' : 'h-4')} />\n          <Skeleton className=\"h-3 w-12\" />\n        </div>\n      ))}\n    </div>\n  )\n}\n\nfunction ActivityEntry({\n  item,\n  compact,\n}: {\n  item: ActivityItem\n  compact: boolean\n}) {\n  const [expandedDetail, setExpandedDetail] = React.useState(false)\n  const color = item.color ?? 'default'\n\n  const handleActionClick = () => {\n    if (item.detail) {\n      setExpandedDetail((prev) => !prev)\n    }\n  }\n\n  return (\n    <div className={cn('relative flex items-start', compact ? 'gap-ds-02' : 'gap-ds-03')}>\n      {/* Dot */}\n      <div\n        className={cn(\n          'relative z-10 mt-1.5 h-2 w-2 shrink-0 rounded-ds-full ring-2 ring-surface-base',\n          dotColorMap[color],\n        )}\n      />\n\n      {/* Avatar (non-compact only) */}\n      {!compact && item.actor && (\n        <Avatar className=\"h-5 w-5 shrink-0 text-[9px]\">\n          {item.actor.image && (\n            <AvatarImage src={item.actor.image} alt={item.actor.name} />\n          )}\n          <AvatarFallback className=\"text-[9px]\">\n            {getInitials(item.actor.name)}\n          </AvatarFallback>\n        </Avatar>\n      )}\n\n      {/* Content */}\n      <div className=\"flex min-w-0 flex-1 flex-col\">\n        <div className=\"flex items-center justify-between gap-ds-02\">\n          <div className={cn('min-w-0 flex-1 flex items-center gap-ds-01 flex-wrap', compact ? 'text-ds-xs' : 'text-ds-sm')}>\n            {item.actor && (\n              <span className=\"font-medium text-surface-fg\">{item.actor.name} </span>\n            )}\n            {item.detail && (\n              <Icon icon={IconChevronRight} size=\"xs\" className={cn('shrink-0 text-surface-fg-subtle transition-transform duration-fast-02 ease-productive-standard', expandedDetail && 'rotate-90')} />\n            )}\n            <span\n              className={cn(\n                'text-surface-fg-muted',\n                item.detail && 'cursor-pointer hover:underline hover:bg-surface-raised rounded-ds-md',\n              )}\n              onClick={handleActionClick}\n              role={item.detail ? 'button' : undefined}\n              tabIndex={item.detail ? 0 : undefined}\n              onKeyDown={\n                item.detail\n                  ? (e) => {\n                      if (e.key === 'Enter' || e.key === ' ') {\n                        e.preventDefault()\n                        handleActionClick()\n                      }\n                    }\n                  : undefined\n              }\n            >\n              {item.action}\n            </span>\n          </div>\n\n          <time\n            className={cn(\n              'shrink-0 whitespace-nowrap text-surface-fg-subtle',\n              compact ? 'text-ds-xs' : 'text-ds-sm',\n            )}\n            dateTime={\n              (typeof item.timestamp === 'string'\n                ? new Date(item.timestamp)\n                : item.timestamp\n              ).toISOString()\n            }\n          >\n            {formatRelativeTime(item.timestamp)}\n          </time>\n        </div>\n\n        {/* Expandable detail */}\n        {expandedDetail && item.detail && (\n          <div className=\"mt-ds-02 animate-in fade-in slide-in-from-top-1 text-ds-sm text-surface-fg-muted\">\n            {item.detail}\n          </div>\n        )}\n      </div>\n    </div>\n  )\n}\n\n/**\n * Wraps custom renderItem content with the same dot + layout container\n * that ActivityEntry uses, keeping vertical rhythm consistent.\n */\nfunction CustomEntry({\n  item,\n  compact,\n  children,\n}: {\n  item: ActivityItem\n  compact: boolean\n  children: React.ReactNode\n}) {\n  const color = item.color ?? 'default'\n  return (\n    <div className={cn('relative flex items-start', compact ? 'gap-ds-02' : 'gap-ds-03')}>\n      {/* Dot — same as ActivityEntry */}\n      <div\n        className={cn(\n          'relative z-10 mt-1.5 h-2 w-2 shrink-0 rounded-ds-full ring-2 ring-surface-base',\n          dotColorMap[color],\n        )}\n      />\n      {/* Custom content in the same flex slot as ActivityEntry's content area */}\n      <div className=\"min-w-0 flex-1\">{children}</div>\n    </div>\n  )\n}\n\nfunction GroupHeader({\n  label,\n  isFirst,\n}: {\n  label: string\n  isFirst: boolean\n}) {\n  return (\n    <motion.div\n      initial={{ opacity: 0 }}\n      animate={{ opacity: 1 }}\n      transition={tweens.fade}\n      className={cn(\n        'flex items-center gap-ds-03',\n        !isFirst ? 'mt-ds-06' : '',\n        'mb-ds-03',\n      )}\n    >\n      <hr className=\"flex-1 border-surface-border\" />\n      <span className=\"bg-surface-base px-ds-03 text-ds-xs font-medium uppercase tracking-wider text-surface-fg-subtle\">\n        {label}\n      </span>\n      <hr className=\"flex-1 border-surface-border\" />\n    </motion.div>\n  )\n}\n\nconst ActivityFeed = React.forwardRef<HTMLDivElement, ActivityFeedProps>(\n  (\n    {\n      items,\n      onLoadMore,\n      loading = false,\n      hasMore = false,\n      emptyState,\n      compact = false,\n      maxInitialItems,\n      groupBy = 'none',\n      groupLabels,\n      renderItem,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const [showAll, setShowAll] = React.useState(false)\n\n    if (loading) {\n      return (\n        <div ref={ref} className={cn('relative', className)} {...props}>\n          <LoadingSkeleton compact={compact} />\n        </div>\n      )\n    }\n\n    if (items.length === 0) {\n      if (emptyState) {\n        return (\n          <div ref={ref} className={className} {...props}>\n            {emptyState}\n          </div>\n        )\n      }\n      return null\n    }\n\n    // maxInitialItems applies to the flat list BEFORE grouping\n    const truncated =\n      maxInitialItems != null && !showAll && items.length > maxInitialItems\n    const visibleItems = truncated ? items.slice(0, maxInitialItems) : items\n\n    const useGrouping = groupBy === 'time'\n\n    /** Resolve what to render for a single item, respecting renderItem. */\n    const resolveEntry = (item: ActivityItem, index: number) => {\n      if (renderItem) {\n        const custom = renderItem(item, index)\n        if (custom !== undefined) {\n          return <CustomEntry item={item} compact={compact}>{custom}</CustomEntry>\n        }\n      }\n      return <ActivityEntry item={item} compact={compact} />\n    }\n\n    return (\n      <div ref={ref} className={cn('relative', className)} {...props}>\n        {/* Items */}\n        {useGrouping ? (\n          <div>\n            {groupItemsByTime(visibleItems, groupLabels).map((group, gi) => (\n              <div key={group.label}>\n                <GroupHeader label={group.label} isFirst={gi === 0} />\n                {/* Timeline line scoped to this group */}\n                <div className={cn('relative flex flex-col', compact ? 'gap-1' : 'gap-3')}>\n                  <div className=\"absolute bottom-0 left-[3px] top-0 w-px bg-surface-border\" />\n                  {group.items.map((item, index) => (\n                    <motion.div key={item.id} initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ ...tweens.fade, delay: index * 0.03 }}>\n                      {resolveEntry(item, index)}\n                    </motion.div>\n                  ))}\n                </div>\n              </div>\n            ))}\n          </div>\n        ) : (\n          <div className={cn('relative flex flex-col', compact ? 'gap-1' : 'gap-3')}>\n            {/* Timeline line */}\n            <div className=\"absolute bottom-0 left-[3px] top-0 w-px bg-surface-border\" />\n            {visibleItems.map((item, index) => (\n              <motion.div key={item.id} initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ ...tweens.fade, delay: index * 0.03 }}>\n                {resolveEntry(item, index)}\n              </motion.div>\n            ))}\n          </div>\n        )}\n\n        {/* Show all button */}\n        {truncated && (\n          <div className=\"relative mt-ds-03 flex justify-center\">\n            <Button\n              variant=\"ghost\"\n              size=\"sm\"\n              onClick={() => setShowAll(true)}\n            >\n              Show all ({items.length})\n            </Button>\n          </div>\n        )}\n\n        {/* Load more button */}\n        {hasMore && onLoadMore && !truncated && (\n          <div className=\"relative mt-ds-03 flex justify-center\">\n            <Button variant=\"ghost\" size=\"sm\" onClick={onLoadMore}>\n              Load more\n            </Button>\n          </div>\n        )}\n      </div>\n    )\n  },\n)\nActivityFeed.displayName = 'ActivityFeed'\n\nexport { ActivityFeed }\n"],"mappings":"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"}

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;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"}
+{"version":3,"file":"avatar-group.d.ts","sourceRoot":"","sources":["../../src/composed/avatar-group.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEjE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAA;AAuB9C,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,19 +1,19 @@
 "use client";
-import { a as e, c as t } from "../_chunks/framer.js";
-import { springs as n } from "../ui/lib/motion.js";
-import { t as r } from "../_chunks/vendor-utils.js";
-import { cn as i } from "../ui/lib/utils.js";
-import { Avatar as a, AvatarFallback as o, AvatarImage as s } from "../ui/avatar.js";
-import { Tooltip as c, TooltipContent as l, TooltipProvider as u, TooltipTrigger as d } from "../ui/tooltip.js";
-import { getInitials as f } from "./lib/string-utils.js";
-import * as p from "react";
-import { jsx as m, jsxs as h } from "react/jsx-runtime";
+import { springs as e } from "../ui/lib/motion.js";
+import { t } from "../_chunks/vendor-utils.js";
+import { cn as n } from "../ui/lib/utils.js";
+import { Avatar as r, AvatarFallback as i, AvatarImage as a } from "../ui/avatar.js";
+import { Tooltip as o, TooltipContent as s, TooltipProvider as c, TooltipTrigger as l } from "../ui/tooltip.js";
+import { getInitials as u } from "./lib/string-utils.js";
+import * as d from "react";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+import { AnimatePresence as m, motion as h } from "framer-motion";
 //#region src/composed/avatar-group.tsx
 var g = {
 	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"
-}, _ = r("shrink-0 overflow-hidden rounded-ds-full border-2", {
+}, _ = t("shrink-0 overflow-hidden rounded-ds-full border-2", {
 	variants: { size: {
 		xs: "h-ds-xs w-ds-xs",
 		sm: "h-ds-sm w-ds-sm",
@@ -22,8 +22,8 @@ var g = {
 		xl: "h-ds-xl w-ds-xl"
 	} },
 	defaultVariants: { size: "md" }
-}), v = p.forwardRef(({ users: r, max: v = 4, size: y, showTooltip: b = !0, borderColor: x = "surface-raised", onOverflowClick: S, renderAvatar: C, expandDirection: w = "right", expandAmount: T = "default", className: E, ...D }, O) => {
-	let k = r.slice(0, v), A = r.length - v, j = {
+}), v = d.forwardRef(({ users: t, max: v = 4, size: y, showTooltip: b = !0, borderColor: x = "surface-raised", onOverflowClick: S, renderAvatar: C, expandDirection: w = "right", expandAmount: T = "default", className: E, ...D }, O) => {
+	let k = t.slice(0, v), A = t.length - v, j = {
 		xs: "-ml-ds-02",
 		sm: "-ml-ds-02b",
 		md: "-ml-ds-03",
@@ -41,7 +41,7 @@ var g = {
 		md: "h-2 w-2",
 		lg: "h-2.5 w-2.5",
 		xl: "h-3 w-3"
-	}[y ?? "md"], P = x === "surface-base" ? "border-surface-base" : "border-surface-raised", [F, I] = p.useState(!1), L = {
+	}[y ?? "md"], P = x === "surface-base" ? "border-surface-base" : "border-surface-raised", [F, I] = d.useState(!1), L = {
 		xs: 8,
 		sm: 10,
 		md: 12,
@@ -58,12 +58,12 @@ var g = {
 		return w === "left" ? `translateX(-${(z - 1 - e) * t}px)` : `translateX(${e * t}px)`;
 	}
 	let V = "transition-[transform,opacity] duration-300 ease-out hover:z-50 hover:scale-105 group-hover:[&:not(:hover)]:opacity-85";
-	return /* @__PURE__ */ m(u, { children: /* @__PURE__ */ h("div", {
+	return /* @__PURE__ */ f(c, { children: /* @__PURE__ */ p("div", {
 		ref: O,
 		role: "group",
-		"aria-label": `${r.length} team members`,
+		"aria-label": `${t.length} team members`,
 		tabIndex: 0,
-		className: i("group flex items-center", E),
+		className: n("group flex items-center", E),
 		onMouseEnter: () => I(!0),
 		onMouseLeave: () => I(!1),
 		onFocus: () => I(!0),
@@ -71,33 +71,33 @@ var g = {
 			e.currentTarget.contains(e.relatedTarget) || I(!1);
 		},
 		...D,
-		children: [k.map((r, u) => {
-			let p = f(r.name), _ = `${r.name}-${u}`;
-			if (C) return /* @__PURE__ */ m("div", {
-				className: i("shrink-0 rounded-ds-full", u > 0 && j, V, r.ring && r.ring !== "none" && g[r.ring]),
+		children: [k.map((t, c) => {
+			let d = u(t.name), _ = `${t.name}-${c}`;
+			if (C) return /* @__PURE__ */ f("div", {
+				className: n("shrink-0 rounded-ds-full", c > 0 && j, V, t.ring && t.ring !== "none" && g[t.ring]),
 				style: {
-					zIndex: k.length - u,
-					transform: B(u)
+					zIndex: k.length - c,
+					transform: B(c)
 				},
-				children: C(r, u)
+				children: C(t, c)
 			}, _);
-			let v = /* @__PURE__ */ h("div", {
-				className: i("relative shrink-0 rounded-ds-full", u > 0 && j, V, r.ring && r.ring !== "none" && g[r.ring]),
+			let v = /* @__PURE__ */ p("div", {
+				className: n("relative shrink-0 rounded-ds-full", c > 0 && j, V, t.ring && t.ring !== "none" && g[t.ring]),
 				style: {
-					zIndex: k.length - u,
-					transform: B(u)
+					zIndex: k.length - c,
+					transform: B(c)
 				},
-				children: [/* @__PURE__ */ h(a, {
+				children: [/* @__PURE__ */ p(r, {
 					size: y,
 					className: P,
-					children: [r.image && /* @__PURE__ */ m(s, {
-						src: r.image,
-						alt: r.name
-					}), /* @__PURE__ */ m(o, {
-						colorSeed: r.name,
-						children: p
+					children: [t.image && /* @__PURE__ */ f(a, {
+						src: t.image,
+						alt: t.name
+					}), /* @__PURE__ */ f(i, {
+						colorSeed: t.name,
+						children: d
 					})]
-				}), /* @__PURE__ */ m(t, { children: r.indicator && /* @__PURE__ */ m(e.span, {
+				}), /* @__PURE__ */ f(m, { children: t.indicator && /* @__PURE__ */ f(h.span, {
 					initial: {
 						scale: 0,
 						opacity: 0
@@ -110,50 +110,50 @@ var g = {
 						scale: 0,
 						opacity: 0
 					},
-					transition: n.snappy,
-					className: i("absolute top-0 right-0 rounded-ds-full ring-1 ring-surface-raised", N, r.indicator === "lead" || r.indicator === "admin" ? "bg-accent-9" : ""),
-					children: typeof r.indicator != "string" && r.indicator
+					transition: e.snappy,
+					className: n("absolute top-0 right-0 rounded-ds-full ring-1 ring-surface-raised", N, t.indicator === "lead" || t.indicator === "admin" ? "bg-accent-9" : ""),
+					children: typeof t.indicator != "string" && t.indicator
 				}) })]
 			}, _);
-			return b ? /* @__PURE__ */ h(c, { children: [/* @__PURE__ */ m(d, {
+			return b ? /* @__PURE__ */ p(o, { children: [/* @__PURE__ */ f(l, {
 				asChild: !0,
 				children: v
-			}), /* @__PURE__ */ m(l, {
+			}), /* @__PURE__ */ f(s, {
 				className: "border-surface-border-strong bg-surface-base text-surface-fg",
 				sideOffset: 6,
-				children: /* @__PURE__ */ m("p", {
+				children: /* @__PURE__ */ f("p", {
 					className: "text-ds-sm",
-					children: r.name
+					children: t.name
 				})
 			})] }, _) : v;
-		}), A > 0 && /* @__PURE__ */ h(c, { children: [/* @__PURE__ */ m(d, {
+		}), A > 0 && /* @__PURE__ */ p(o, { children: [/* @__PURE__ */ f(l, {
 			asChild: !0,
-			children: S ? /* @__PURE__ */ h("button", {
+			children: S ? /* @__PURE__ */ p("button", {
 				type: "button",
 				onClick: S,
 				"aria-label": `${A} more members`,
-				className: i(_({ size: y }), P, j, `flex cursor-pointer items-center justify-center bg-accent-2 font-semibold text-accent-11 ${M}`, "hover:scale-105 hover:bg-accent-3 transition-[transform,background-color] duration-300 ease-out"),
+				className: n(_({ size: y }), P, j, `flex cursor-pointer items-center justify-center bg-accent-2 font-semibold text-accent-11 ${M}`, "hover:scale-105 hover:bg-accent-3 transition-[transform,background-color] duration-300 ease-out"),
 				style: {
 					zIndex: 0,
 					transform: B(k.length)
 				},
 				children: ["+", A]
-			}) : /* @__PURE__ */ h("div", {
+			}) : /* @__PURE__ */ p("div", {
 				role: "img",
 				"aria-label": `${A} more members`,
-				className: i(_({ size: y }), P, j, `flex cursor-default items-center justify-center bg-accent-2 font-semibold text-accent-11 ${M}`, "transition-[transform,opacity] duration-300 ease-out"),
+				className: n(_({ size: y }), P, j, `flex cursor-default items-center justify-center bg-accent-2 font-semibold text-accent-11 ${M}`, "transition-[transform,opacity] duration-300 ease-out"),
 				style: {
 					zIndex: 0,
 					transform: B(k.length)
 				},
 				children: ["+", A]
 			})
-		}), /* @__PURE__ */ m(l, {
+		}), /* @__PURE__ */ f(s, {
 			className: "border-surface-border-strong bg-surface-base text-surface-fg",
 			sideOffset: 6,
-			children: /* @__PURE__ */ m("div", {
+			children: /* @__PURE__ */ f("div", {
 				className: "flex flex-col gap-ds-01",
-				children: r.slice(v).map((e, t) => /* @__PURE__ */ m("p", {
+				children: t.slice(v).map((e, t) => /* @__PURE__ */ f("p", {
 					className: "text-ds-sm",
 					children: e.name
 				}, t))