@devalok/shilp-sutra 0.33.2 → 0.34.1

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" ? "bg-warning-9" : 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 };