@devalok/shilp-sutra 0.34.0 → 0.36.0

package/dist/composed/avatar-group.js

@@ -1,224 +1,166 @@
 "use client";
-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 { 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 { 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"
-}, z = F(
-  "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",
-        md: "h-ds-md w-ds-md",
-        lg: "h-ds-lg w-ds-lg",
-        xl: "h-ds-xl w-ds-xl"
-      }
-    },
-    defaultVariants: {
-      size: "md"
-    }
-  }
-), Q = y.forwardRef(
-  ({
-    users: l,
-    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"
-    }[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
-    }[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 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: P,
-        role: "group",
-        "aria-label": `${l.length} team members`,
-        tabIndex: 0,
-        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);
-        },
-        ...A,
-        children: [
-          n.map((e, t) => {
-            const E = q(e.name), p = `${e.name}-${t}`;
-            if (u)
-              return /* @__PURE__ */ r(
-                "div",
-                {
-                  className: i(
-                    "shrink-0 rounded-ds-full",
-                    t > 0 && c,
-                    b,
-                    e.ring && e.ring !== "none" && S[e.ring]
-                  ),
-                  style: { zIndex: n.length - t, transform: m(t) },
-                  children: u(e, t)
-                },
-                p
-              );
-            const v = /* @__PURE__ */ s(
-              "div",
-              {
-                className: i(
-                  "relative shrink-0 rounded-ds-full",
-                  t > 0 && c,
-                  b,
-                  e.ring && e.ring !== "none" && S[e.ring]
-                ),
-                style: { zIndex: n.length - t, transform: m(t) },
-                children: [
-                  /* @__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,
-                    {
-                      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
-                    }
-                  ) })
-                ]
-              },
-              p
-            );
-            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__ */ r("p", { className: "text-ds-sm", children: e.name })
-                }
-              )
-            ] }, p) : v;
-          }),
-          o > 0 && /* @__PURE__ */ s(w, { children: [
-            /* @__PURE__ */ r(N, { asChild: !0, children: h ? /* @__PURE__ */ s(
-              "button",
-              {
-                type: "button",
-                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-semibold text-accent-11 ${x}`,
-                  "hover:scale-105 hover:bg-accent-3 transition-[transform,background-color] duration-300 ease-out"
-                ),
-                style: { zIndex: 0, transform: m(n.length) },
-                children: [
-                  "+",
-                  o
-                ]
-              }
-            ) : /* @__PURE__ */ s(
-              "div",
-              {
-                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-semibold text-accent-11 ${x}`,
-                  "transition-[transform,opacity] duration-300 ease-out"
-                ),
-                style: { zIndex: 0, transform: m(n.length) },
-                children: [
-                  "+",
-                  o
-                ]
-              }
-            ) }),
-            /* @__PURE__ */ r(
-              M,
-              {
-                className: "border-surface-border-strong bg-surface-base text-surface-fg",
-                sideOffset: 6,
-                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)) })
-              }
-            )
-          ] })
-        ]
-      }
-    ) });
-  }
-);
-Q.displayName = "AvatarGroup";
-export {
-  Q as AvatarGroup
-};
+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";
+//#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", {
+	variants: { size: {
+		xs: "h-ds-xs w-ds-xs",
+		sm: "h-ds-sm w-ds-sm",
+		md: "h-ds-md w-ds-md",
+		lg: "h-ds-lg w-ds-lg",
+		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 = {
+		xs: "-ml-ds-02",
+		sm: "-ml-ds-02b",
+		md: "-ml-ds-03",
+		lg: "-ml-ds-04",
+		xl: "-ml-ds-05"
+	}[y ?? "md"], M = {
+		xs: "text-[9px]",
+		sm: "text-ds-xs",
+		md: "text-ds-sm",
+		lg: "text-ds-md",
+		xl: "text-ds-lg"
+	}[y ?? "md"], N = {
+		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"
+	}[y ?? "md"], P = x === "surface-base" ? "border-surface-base" : "border-surface-raised", [F, I] = p.useState(!1), L = {
+		xs: 8,
+		sm: 10,
+		md: 12,
+		lg: 16,
+		xl: 20
+	}[y ?? "md"], R = {
+		compact: .5,
+		default: 1,
+		wide: 1.5
+	}[T], z = k.length + +(A > 0);
+	function B(e) {
+		if (!F) return "translateX(0)";
+		let t = L * R;
+		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", {
+		ref: O,
+		role: "group",
+		"aria-label": `${r.length} team members`,
+		tabIndex: 0,
+		className: i("group flex items-center", E),
+		onMouseEnter: () => I(!0),
+		onMouseLeave: () => I(!1),
+		onFocus: () => I(!0),
+		onBlur: (e) => {
+			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]),
+				style: {
+					zIndex: k.length - u,
+					transform: B(u)
+				},
+				children: C(r, u)
+			}, _);
+			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]),
+				style: {
+					zIndex: k.length - u,
+					transform: B(u)
+				},
+				children: [/* @__PURE__ */ h(a, {
+					size: y,
+					className: P,
+					children: [r.image && /* @__PURE__ */ m(s, {
+						src: r.image,
+						alt: r.name
+					}), /* @__PURE__ */ m(o, {
+						colorSeed: r.name,
+						children: p
+					})]
+				}), /* @__PURE__ */ m(t, { children: r.indicator && /* @__PURE__ */ m(e.span, {
+					initial: {
+						scale: 0,
+						opacity: 0
+					},
+					animate: {
+						scale: 1,
+						opacity: 1
+					},
+					exit: {
+						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
+				}) })]
+			}, _);
+			return b ? /* @__PURE__ */ h(c, { children: [/* @__PURE__ */ m(d, {
+				asChild: !0,
+				children: v
+			}), /* @__PURE__ */ m(l, {
+				className: "border-surface-border-strong bg-surface-base text-surface-fg",
+				sideOffset: 6,
+				children: /* @__PURE__ */ m("p", {
+					className: "text-ds-sm",
+					children: r.name
+				})
+			})] }, _) : v;
+		}), A > 0 && /* @__PURE__ */ h(c, { children: [/* @__PURE__ */ m(d, {
+			asChild: !0,
+			children: S ? /* @__PURE__ */ h("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"),
+				style: {
+					zIndex: 0,
+					transform: B(k.length)
+				},
+				children: ["+", A]
+			}) : /* @__PURE__ */ h("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"),
+				style: {
+					zIndex: 0,
+					transform: B(k.length)
+				},
+				children: ["+", A]
+			})
+		}), /* @__PURE__ */ m(l, {
+			className: "border-surface-border-strong bg-surface-base text-surface-fg",
+			sideOffset: 6,
+			children: /* @__PURE__ */ m("div", {
+				className: "flex flex-col gap-ds-01",
+				children: r.slice(v).map((e, t) => /* @__PURE__ */ m("p", {
+					className: "text-ds-sm",
+					children: e.name
+				}, t))
+			})
+		})] })]
+	}) });
+});
+v.displayName = "AvatarGroup";
+//#endregion
+export { v as AvatarGroup };

package/dist/composed/avatar-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar-group.js","names":[],"sources":["../../src/composed/avatar-group.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { motion, AnimatePresence } from 'framer-motion'\nimport { cn } from '../ui/lib/utils'\nimport { springs } from '../ui/lib/motion'\nimport {\n  Avatar,\n  AvatarImage,\n  AvatarFallback,\n} from '../ui/avatar'\nimport type { AvatarRing } from '../ui/avatar'\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from '../ui/tooltip'\nimport { getInitials } from './lib/string-utils'\n\n// Ring classes applied at group level (not via Avatar's ring prop, which adds ring-offset-2 that gets clipped by overflow-hidden)\nconst groupRingMap: Record<string, string> = {\n  lead: 'ring-2 ring-accent-7 ring-offset-1 ring-offset-surface-raised',\n  admin: 'ring-2 ring-warning-7 ring-offset-1 ring-offset-surface-raised',\n  client: 'ring-2 ring-info-7 ring-offset-1 ring-offset-surface-raised',\n}\n\nconst avatarSizeVariants = cva(\n  'shrink-0 overflow-hidden rounded-ds-full border-2',\n  {\n    variants: {\n      size: {\n        xs: 'h-ds-xs w-ds-xs',\n        sm: 'h-ds-sm w-ds-sm',\n        md: 'h-ds-md w-ds-md',\n        lg: 'h-ds-lg w-ds-lg',\n        xl: 'h-ds-xl w-ds-xl',\n      },\n    },\n    defaultVariants: {\n      size: 'md',\n    },\n  },\n)\n\nexport interface AvatarUser {\n  name: string\n  image?: string | null\n  ring?: AvatarRing\n  indicator?: 'lead' | 'admin' | React.ReactNode\n}\n\nexport interface AvatarGroupProps\n  extends React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof avatarSizeVariants> {\n  users: AvatarUser[]\n  max?: number\n  showTooltip?: boolean\n  /** Border color for the group avatars. @default 'surface-raised' */\n  borderColor?: 'surface-base' | 'surface-raised'\n  /** Callback when the \"+N\" overflow badge is clicked */\n  onOverflowClick?: () => void\n  /** Custom render function for each avatar */\n  renderAvatar?: (user: AvatarUser, index: number) => React.ReactNode\n  /** Direction avatars expand on hover. @default 'right' */\n  expandDirection?: 'left' | 'right'\n  /** How much avatars spread apart on hover. @default 'default' */\n  expandAmount?: 'compact' | 'default' | 'wide'\n}\n\nconst AvatarGroup = React.forwardRef<HTMLDivElement, AvatarGroupProps>(\n  (\n    {\n      users,\n      max = 4,\n      size,\n      showTooltip = true,\n      borderColor = 'surface-raised',\n      onOverflowClick,\n      renderAvatar,\n      expandDirection = 'right',\n      expandAmount = 'default',\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const displayed = users.slice(0, max)\n    const overflow = users.length - max\n\n    const overlapMap = {\n      xs: '-ml-ds-02',\n      sm: '-ml-ds-02b',\n      md: '-ml-ds-03',\n      lg: '-ml-ds-04',\n      xl: '-ml-ds-05',\n    }\n    const overlapClass = overlapMap[size ?? 'md']\n\n    // Match Avatar fallback font sizes so the \"+N\" badge text is consistent\n    const textSizeMap: Record<string, string> = {\n      xs: 'text-[9px]',\n      sm: 'text-ds-xs',\n      md: 'text-ds-sm',\n      lg: 'text-ds-md',\n      xl: 'text-ds-lg',\n    }\n    const textSizeClass = textSizeMap[size ?? 'md']\n\n    // Indicator dot scales with avatar size (matches Avatar's statusDotSizeMap)\n    const indicatorDotSizeMap: Record<string, string> = {\n      xs: 'h-1 w-1',\n      sm: 'h-1.5 w-1.5',\n      md: 'h-2 w-2',\n      lg: 'h-2.5 w-2.5',\n      xl: 'h-3 w-3',\n    }\n    const indicatorDotClass = indicatorDotSizeMap[size ?? 'md']\n\n    const borderClass =\n      borderColor === 'surface-base'\n        ? 'border-surface-base'\n        : 'border-surface-raised'\n\n    const [isHovered, setIsHovered] = React.useState(false)\n\n    const overlapPxMap: Record<string, number> = {\n      xs: 8, sm: 10, md: 12, lg: 16, xl: 20,\n    }\n    const resolvedSize = size ?? 'md'\n    const overlapPx = overlapPxMap[resolvedSize]\n    const expandMultiplier = { compact: 0.5, default: 1, wide: 1.5 }[expandAmount]\n    const totalVisible = displayed.length + (overflow > 0 ? 1 : 0)\n\n    function getExpandTransform(index: number): string {\n      if (!isHovered) return 'translateX(0)'\n      const shift = overlapPx * expandMultiplier\n      if (expandDirection === 'left') {\n        return `translateX(-${(totalVisible - 1 - index) * shift}px)`\n      }\n      return `translateX(${index * shift}px)`\n    }\n\n    const spotlightClasses =\n      'transition-[transform,opacity] duration-300 ease-out hover:z-50 hover:scale-105 group-hover:[&:not(:hover)]:opacity-85'\n\n    return (\n      <TooltipProvider>\n        <div\n          ref={ref}\n          role=\"group\"\n          aria-label={`${users.length} team members`}\n          tabIndex={0}\n          className={cn('group flex items-center', className)}\n          onMouseEnter={() => setIsHovered(true)}\n          onMouseLeave={() => setIsHovered(false)}\n          onFocus={() => setIsHovered(true)}\n          onBlur={(e) => { if (!e.currentTarget.contains(e.relatedTarget)) setIsHovered(false) }}\n          {...props}\n        >\n          {displayed.map((user, index) => {\n            const initials = getInitials(user.name)\n\n            const key = `${user.name}-${index}`\n\n            if (renderAvatar) {\n              // When renderAvatar is provided, the consumer owns the Avatar entirely.\n              // Wrapper is positioning-only (overlap, z-index, spotlight) — no size/border/clip\n              // so the consumer's Avatar renders at its natural size without being clipped.\n              return (\n                <div\n                  key={key}\n                  className={cn(\n                    'shrink-0 rounded-ds-full',\n                    index > 0 && overlapClass,\n                    spotlightClasses,\n                    user.ring && user.ring !== 'none' && groupRingMap[user.ring],\n                  )}\n                  style={{ zIndex: displayed.length - index, transform: getExpandTransform(index) }}\n                >\n                  {renderAvatar(user, index)}\n                </div>\n              )\n            }\n\n            const avatarNode = (\n              <div\n                key={key}\n                className={cn(\n                  'relative shrink-0 rounded-ds-full',\n                  index > 0 && overlapClass,\n                  spotlightClasses,\n                  user.ring && user.ring !== 'none' && groupRingMap[user.ring],\n                )}\n                style={{ zIndex: displayed.length - index, transform: getExpandTransform(index) }}\n              >\n                <Avatar\n                  size={size}\n                  className={borderClass}\n                >\n                  {user.image && (\n                    <AvatarImage src={user.image} alt={user.name} />\n                  )}\n                  <AvatarFallback\n                    colorSeed={user.name}\n                  >\n                    {initials}\n                  </AvatarFallback>\n                </Avatar>\n                <AnimatePresence>\n                  {user.indicator && (\n                    <motion.span\n                      initial={{ scale: 0, opacity: 0 }}\n                      animate={{ scale: 1, opacity: 1 }}\n                      exit={{ scale: 0, opacity: 0 }}\n                      transition={springs.snappy}\n                      className={cn(\n                        'absolute top-0 right-0 rounded-ds-full ring-1 ring-surface-raised',\n                        indicatorDotClass,\n                        user.indicator === 'lead' ? 'bg-accent-9' :\n                        user.indicator === 'admin' ? 'bg-accent-9' : '',\n                      )}\n                    >\n                      {typeof user.indicator !== 'string' && user.indicator}\n                    </motion.span>\n                  )}\n                </AnimatePresence>\n              </div>\n            )\n\n            if (!showTooltip) return avatarNode\n\n            return (\n              <Tooltip key={key}>\n                <TooltipTrigger asChild>{avatarNode}</TooltipTrigger>\n                <TooltipContent\n                  className=\"border-surface-border-strong bg-surface-base text-surface-fg\"\n                  sideOffset={6}\n                >\n                  <p className=\"text-ds-sm\">{user.name}</p>\n                </TooltipContent>\n              </Tooltip>\n            )\n          })}\n\n          {overflow > 0 && (\n            <Tooltip>\n              <TooltipTrigger asChild>\n                {onOverflowClick ? (\n                  <button\n                    type=\"button\"\n                    onClick={onOverflowClick}\n                    aria-label={`${overflow} more members`}\n                    className={cn(\n                      avatarSizeVariants({ size }),\n                      borderClass,\n                      overlapClass,\n                      `flex cursor-pointer items-center justify-center bg-accent-2 font-semibold text-accent-11 ${textSizeClass}`,\n                      'hover:scale-105 hover:bg-accent-3 transition-[transform,background-color] duration-300 ease-out',\n                    )}\n                    style={{ zIndex: 0, transform: getExpandTransform(displayed.length) }}\n                  >\n                    +{overflow}\n                  </button>\n                ) : (\n                  <div\n                    role=\"img\"\n                    aria-label={`${overflow} more members`}\n                    className={cn(\n                      avatarSizeVariants({ size }),\n                      borderClass,\n                      overlapClass,\n                      `flex cursor-default items-center justify-center bg-accent-2 font-semibold text-accent-11 ${textSizeClass}`,\n                      'transition-[transform,opacity] duration-300 ease-out',\n                    )}\n                    style={{ zIndex: 0, transform: getExpandTransform(displayed.length) }}\n                  >\n                    +{overflow}\n                  </div>\n                )}\n              </TooltipTrigger>\n              <TooltipContent\n                className=\"border-surface-border-strong bg-surface-base text-surface-fg\"\n                sideOffset={6}\n              >\n                <div className=\"flex flex-col gap-ds-01\">\n                  {users.slice(max).map((user, i) => (\n                    <p key={i} className=\"text-ds-sm\">{user.name}</p>\n                  ))}\n                </div>\n              </TooltipContent>\n            </Tooltip>\n          )}\n        </div>\n      </TooltipProvider>\n    )\n  },\n)\nAvatarGroup.displayName = 'AvatarGroup'\n\nexport { AvatarGroup }\n"],"mappings":"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"}