@devalok/shilp-sutra 0.53.0 → 0.55.0

package/dist/composed/avatar-group.js

@@ -1,159 +1,127 @@
 "use client";
 import { springs as e } from "../ui/lib/motion.js";
-import { cva as 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";
+import { cn as t } from "../ui/lib/utils.js";
+import { Avatar as n, AvatarFallback as r, AvatarImage as i } from "../ui/avatar.js";
+import { Tooltip as a, TooltipContent as o, TooltipProvider as s, TooltipTrigger as c } from "../ui/tooltip.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 { motion as p, useReducedMotion as m } 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"
-}, _ = t("shrink-0 overflow-hidden rounded-pill 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 = 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",
-		lg: "-ml-ds-04",
-		xl: "-ml-ds-05"
-	}[y ?? "md"], M = {
-		xs: "text-[9px]",
-		sm: "text-body-xs",
-		md: "text-body-sm",
-		lg: "text-body-md",
-		xl: "text-heading-xs"
-	}[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] = d.useState(!1), L = {
-		xs: 8,
-		sm: 10,
-		md: 12,
-		lg: 16,
-		xl: 20
-	}[y ?? "md"], R = {
+var h = {
+	lead: "ring-2 ring-accent-7",
+	admin: "ring-2 ring-warning-7",
+	client: "ring-2 ring-info-7"
+}, g = {
+	xs: "-ml-ds-02",
+	sm: "-ml-ds-02b",
+	md: "-ml-ds-03",
+	lg: "-ml-ds-04",
+	xl: "-ml-ds-05"
+}, _ = {
+	xs: 8,
+	sm: 10,
+	md: 12,
+	lg: 16,
+	xl: 20
+}, v = {
+	xs: "size-1",
+	sm: "size-1.5",
+	md: "size-2",
+	lg: "size-2.5",
+	xl: "size-3"
+}, y = u.forwardRef(({ users: y, max: b = 4, size: x = "md", showTooltip: S = !0, borderColor: C = "surface-raised", onOverflowClick: w, renderAvatar: T, expandDirection: E = "right", expandAmount: D = "default", label: O, className: k, onMouseEnter: A, onMouseLeave: j, onFocus: M, onBlur: N, ...P }, F) => {
+	let I = m(), [L, R] = u.useState(!1);
+	if (y.length === 0) return null;
+	let z = Math.max(1, b), B = y.slice(0, z), V = y.length - z, H = g[x], U = C === "surface-base" ? "border-surface-base" : "border-surface-raised", W = C === "surface-base" ? "ring-offset-1 ring-offset-surface-base" : "ring-offset-1 ring-offset-surface-raised", G = _[x], K = {
 		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-opacity duration-300 ease-out hover:z-50 group-hover:[&:not(:hover)]:opacity-85";
-	return /* @__PURE__ */ f(c, { children: /* @__PURE__ */ p("div", {
-		ref: O,
+	}[D], q = B.length + +(V > 0), J = (e) => {
+		if (!L || I) return 0;
+		let t = G * K;
+		return E === "left" ? -(q - 1 - e) * t : e * t;
+	}, Y = I ? { duration: 0 } : e.snappy, X = "transition-opacity duration-fast-02 ease-productive-standard motion-reduce:transition-none hover:z-30 focus-visible:z-30 group-hover:[&:not(:hover)]:opacity-80";
+	return /* @__PURE__ */ d(s, { children: /* @__PURE__ */ f("div", {
+		ref: F,
 		role: "group",
-		"aria-label": `${t.length} team members`,
-		tabIndex: 0,
-		className: n("group flex items-center", E),
-		onMouseEnter: () => I(!0),
-		onMouseLeave: () => I(!1),
-		onFocus: () => I(!0),
+		"aria-label": O ?? `${y.length} team members`,
+		className: t("group flex items-center", k),
+		onMouseEnter: (e) => {
+			R(!0), A?.(e);
+		},
+		onMouseLeave: (e) => {
+			R(!1), j?.(e);
+		},
+		onFocus: (e) => {
+			R(!0), M?.(e);
+		},
 		onBlur: (e) => {
-			e.currentTarget.contains(e.relatedTarget) || I(!1);
+			e.currentTarget.contains(e.relatedTarget) || R(!1), N?.(e);
 		},
-		...D,
-		children: [k.map((t, c) => {
-			let d = u(t.name), _ = `${t.name}-${c}`;
-			if (C) return /* @__PURE__ */ f("div", {
-				className: n("shrink-0 rounded-pill", c > 0 && j, V, t.ring && t.ring !== "none" && g[t.ring]),
-				style: {
-					zIndex: k.length - c,
-					transform: B(c)
-				},
-				children: C(t, c)
-			}, _);
-			let v = /* @__PURE__ */ p("div", {
-				className: n("relative shrink-0 rounded-pill", c > 0 && j, V, t.ring && t.ring !== "none" && g[t.ring]),
-				style: {
-					zIndex: k.length - c,
-					transform: B(c)
-				},
-				children: [/* @__PURE__ */ p(r, {
-					size: y,
-					className: P,
-					children: [t.image && /* @__PURE__ */ f(a, {
-						src: t.image,
-						alt: t.name
-					}), /* @__PURE__ */ f(i, {
-						colorSeed: t.name,
-						children: d
-					})]
-				}), /* @__PURE__ */ f(m, { children: t.indicator && /* @__PURE__ */ f(h.span, {
-					initial: {
-						scale: 0,
-						opacity: 0
-					},
-					animate: {
-						scale: 1,
-						opacity: 1
-					},
-					exit: {
-						scale: 0,
-						opacity: 0
-					},
-					transition: e.snappy,
-					className: n("absolute top-0 right-0 rounded-pill 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__ */ p(o, { children: [/* @__PURE__ */ f(l, {
+		...P,
+		children: [B.map((e, s) => {
+			let m = `${e.name}-${s}`, g = e.ring && e.ring !== "none" ? t(h[e.ring], W) : void 0, _ = T ? T(e, s) : /* @__PURE__ */ f(n, {
+				size: x,
+				className: U,
+				children: [
+					e.image && /* @__PURE__ */ d(i, {
+						src: e.image,
+						alt: ""
+					}),
+					/* @__PURE__ */ d(r, {
+						colorSeed: e.name,
+						children: l(e.name)
+					}),
+					e.indicator && /* @__PURE__ */ d("span", {
+						"aria-hidden": "true",
+						className: t("absolute top-0 right-0 rounded-pill ring-1 ring-surface-raised", v[x], e.indicator === "lead" ? "bg-accent-9" : e.indicator === "admin" ? "bg-warning-9" : ""),
+						children: typeof e.indicator != "string" && e.indicator
+					})
+				]
+			}), y = /* @__PURE__ */ d(p.button, {
+				type: "button",
+				"aria-label": e.name,
+				animate: { x: J(s) },
+				transition: Y,
+				style: { zIndex: B.length - s },
+				className: t("relative shrink-0 rounded-pill focus-ring", s > 0 && H, X, g),
+				children: _
+			});
+			return S ? /* @__PURE__ */ f(a, { children: [/* @__PURE__ */ d(c, {
 				asChild: !0,
-				children: v
-			}), /* @__PURE__ */ f(s, {
-				className: "border-surface-border-strong bg-surface-base text-surface-fg",
+				children: y
+			}), /* @__PURE__ */ d(o, {
 				sideOffset: 6,
-				children: /* @__PURE__ */ f("p", {
+				children: /* @__PURE__ */ d("p", {
 					className: "text-body-sm",
-					children: t.name
+					children: e.name
 				})
-			})] }, _) : v;
-		}), A > 0 && /* @__PURE__ */ p(o, { children: [/* @__PURE__ */ f(l, {
+			})] }, m) : /* @__PURE__ */ d(u.Fragment, { children: y }, m);
+		}), V > 0 && /* @__PURE__ */ f(a, { children: [/* @__PURE__ */ d(c, {
 			asChild: !0,
-			children: S ? /* @__PURE__ */ p("button", {
+			children: /* @__PURE__ */ d(p.button, {
 				type: "button",
-				onClick: S,
-				"aria-label": `${A} more members`,
-				className: n(_({ size: y }), P, j, `flex cursor-pointer items-center justify-center bg-accent-2 font-semibold text-accent-11 ${M}`, "hover:bg-accent-3 transition-colors duration-300 ease-out"),
-				style: {
-					zIndex: 0,
-					transform: B(k.length)
-				},
-				children: ["+", A]
-			}) : /* @__PURE__ */ p("div", {
-				role: "img",
-				"aria-label": `${A} more members`,
-				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]
+				onClick: w,
+				"aria-label": `${V} more ${V === 1 ? "member" : "members"}`,
+				animate: { x: J(B.length) },
+				transition: Y,
+				style: { zIndex: 0 },
+				className: t("relative shrink-0 rounded-pill focus-ring", H, X, !w && "cursor-default"),
+				children: /* @__PURE__ */ d(n, {
+					size: x,
+					className: U,
+					children: /* @__PURE__ */ f(r, {
+						className: "bg-accent-2 font-semibold text-accent-11",
+						children: ["+", V]
+					})
+				})
 			})
-		}), /* @__PURE__ */ f(s, {
-			className: "border-surface-border-strong bg-surface-base text-surface-fg",
+		}), /* @__PURE__ */ d(o, {
 			sideOffset: 6,
-			children: /* @__PURE__ */ f("div", {
+			children: /* @__PURE__ */ d("div", {
 				className: "flex flex-col gap-ds-01",
-				children: t.slice(v).map((e, t) => /* @__PURE__ */ f("p", {
+				children: y.slice(z).map((e, t) => /* @__PURE__ */ d("p", {
 					className: "text-body-sm",
 					children: e.name
 				}, t))
@@ -161,6 +129,6 @@ var g = {
 		})] })]
 	}) });
 });
-v.displayName = "AvatarGroup";
+y.displayName = "AvatarGroup";
 //#endregion
-export { v as AvatarGroup };
+export { y as AvatarGroup };

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

@@ -1 +1 @@
-{"version":3,"file":"avatar-group.js","names":[],"sources":["../../src/composed/avatar-group.tsx"],"sourcesContent":["'use client'\n\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { AnimatePresence,motion } from 'framer-motion'\nimport * as React from 'react'\n\nimport type { AvatarRing } from '../ui/avatar'\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from '../ui/avatar'\nimport { springs } from '../ui/lib/motion'\nimport { cn } from '../ui/lib/utils'\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-pill 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-body-xs',\n      md: 'text-body-sm',\n      lg: 'text-body-md',\n      xl: 'text-heading-xs',\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-opacity duration-300 ease-out hover:z-50 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-pill',\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-pill',\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-pill 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-body-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:bg-accent-3 transition-colors 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-body-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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"}
+{"version":3,"file":"avatar-group.js","names":[],"sources":["../../src/composed/avatar-group.tsx"],"sourcesContent":["'use client'\n\nimport { type VariantProps } from 'class-variance-authority'\nimport { motion, useReducedMotion } from 'framer-motion'\nimport * as React from 'react'\n\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n  avatarVariants,\n  type AvatarRing,\n} from '../ui/avatar'\nimport { springs } from '../ui/lib/motion'\nimport { cn } from '../ui/lib/utils'\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipProvider,\n  TooltipTrigger,\n} from '../ui/tooltip'\nimport { getInitials } from './lib/string-utils'\n\ntype Size = NonNullable<VariantProps<typeof avatarVariants>['size']>\n\n// Group-level ring. Applied here (not via Avatar's `ring` prop) because that adds\n// a ring-offset that gets clipped by the group's overflow; the offset surface is\n// derived from `borderColor` so it never seams against a surface-base blend.\nconst groupRingMap: Record<Exclude<AvatarRing, 'none'>, string> = {\n  lead: 'ring-2 ring-accent-7',\n  admin: 'ring-2 ring-warning-7',\n  client: 'ring-2 ring-info-7',\n}\n\nexport interface AvatarUser {\n  name: string\n  image?: string | null\n  ring?: AvatarRing\n  /** Small top-right marker. `lead` = accent dot, `admin` = warning dot, or any node. */\n  indicator?: 'lead' | 'admin' | React.ReactNode\n}\n\nexport interface AvatarGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n  users: AvatarUser[]\n  max?: number\n  size?: Size\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 (renders it as a button). */\n  onOverflowClick?: () => void\n  /** Custom render function for each avatar (consumer owns the Avatar). */\n  renderAvatar?: (user: AvatarUser, index: number) => React.ReactNode\n  /** Direction avatars expand on hover/focus. @default 'right' */\n  expandDirection?: 'left' | 'right'\n  /** How far avatars spread on hover/focus. @default 'default' */\n  expandAmount?: 'compact' | 'default' | 'wide'\n  /** Accessible label for the group. @default `${count} team members` */\n  label?: string\n}\n\n// Overlap (negative margin) + spread distance, keyed off the same per-size scale.\nconst overlapMap: Record<Size, string> = {\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}\nconst spreadPxMap: Record<Size, number> = {\n  xs: 8, sm: 10, md: 12, lg: 16, xl: 20,\n}\nconst indicatorDotMap: Record<Size, string> = {\n  xs: 'size-1', sm: 'size-1.5', md: 'size-2', lg: 'size-2.5', xl: 'size-3',\n}\n\nconst AvatarGroup = React.forwardRef<HTMLDivElement, AvatarGroupProps>(\n  (\n    {\n      users,\n      max = 4,\n      size = 'md',\n      showTooltip = true,\n      borderColor = 'surface-raised',\n      onOverflowClick,\n      renderAvatar,\n      expandDirection = 'right',\n      expandAmount = 'default',\n      label,\n      className,\n      onMouseEnter,\n      onMouseLeave,\n      onFocus,\n      onBlur,\n      ...props\n    },\n    ref,\n  ) => {\n    const reduced = useReducedMotion()\n    const [active, setActive] = React.useState(false)\n\n    // Empty group is not a focusable \"0 members\" target — render nothing.\n    if (users.length === 0) return null\n\n    const cap = Math.max(1, max)\n    const displayed = users.slice(0, cap)\n    const overflow = users.length - cap\n    const overlapClass = overlapMap[size]\n    const borderClass = borderColor === 'surface-base' ? 'border-surface-base' : 'border-surface-raised'\n    const ringOffsetClass = borderColor === 'surface-base'\n      ? 'ring-offset-1 ring-offset-surface-base'\n      : 'ring-offset-1 ring-offset-surface-raised'\n\n    const spreadPx = spreadPxMap[size]\n    const spreadMult = { compact: 0.5, default: 1, wide: 1.5 }[expandAmount]\n    const totalVisible = displayed.length + (overflow > 0 ? 1 : 0)\n\n    // Spread offset per index. Zero under reduced-motion (no positional animation).\n    const xFor = (index: number): number => {\n      if (!active || reduced) return 0\n      const shift = spreadPx * spreadMult\n      return expandDirection === 'left' ? -(totalVisible - 1 - index) * shift : index * shift\n    }\n\n    // framer governs the transition; reduced-motion collapses it to instant.\n    const spreadTransition = reduced ? { duration: 0 } : springs.snappy\n    // Gentle dim of non-focused peers; instant under reduced-motion.\n    const spotlight =\n      'transition-opacity duration-fast-02 ease-productive-standard motion-reduce:transition-none hover:z-30 focus-visible:z-30 group-hover:[&:not(:hover)]:opacity-80'\n\n    const onEnter = (e: React.MouseEvent<HTMLDivElement>) => { setActive(true); onMouseEnter?.(e) }\n    const onLeave = (e: React.MouseEvent<HTMLDivElement>) => { setActive(false); onMouseLeave?.(e) }\n    const onGroupFocus = (e: React.FocusEvent<HTMLDivElement>) => { setActive(true); onFocus?.(e) }\n    const onGroupBlur = (e: React.FocusEvent<HTMLDivElement>) => {\n      if (!e.currentTarget.contains(e.relatedTarget)) setActive(false)\n      onBlur?.(e)\n    }\n\n    return (\n      <TooltipProvider>\n        <div\n          ref={ref}\n          role=\"group\"\n          aria-label={label ?? `${users.length} team members`}\n          className={cn('group flex items-center', className)}\n          onMouseEnter={onEnter}\n          onMouseLeave={onLeave}\n          onFocus={onGroupFocus}\n          onBlur={onGroupBlur}\n          {...props}\n        >\n          {displayed.map((user, index) => {\n            const key = `${user.name}-${index}`\n            const extraRing = user.ring && user.ring !== 'none'\n              ? cn(groupRingMap[user.ring], ringOffsetClass)\n              : undefined\n\n            const inner = renderAvatar ? (\n              renderAvatar(user, index)\n            ) : (\n              <Avatar size={size} className={borderClass}>\n                {user.image && <AvatarImage src={user.image} alt=\"\" />}\n                <AvatarFallback colorSeed={user.name}>{getInitials(user.name)}</AvatarFallback>\n                {user.indicator && (\n                  <span\n                    aria-hidden=\"true\"\n                    className={cn(\n                      'absolute top-0 right-0 rounded-pill ring-1 ring-surface-raised',\n                      indicatorDotMap[size],\n                      user.indicator === 'lead' ? 'bg-accent-9'\n                        : user.indicator === 'admin' ? 'bg-warning-9' : '',\n                    )}\n                  >\n                    {typeof user.indicator !== 'string' && user.indicator}\n                  </span>\n                )}\n              </Avatar>\n            )\n\n            // Each avatar is a focusable, labelled trigger so keyboard/AT users reach\n            // the member name (via the tooltip) and get a visible focus ring.\n            const node = (\n              <motion.button\n                type=\"button\"\n                aria-label={user.name}\n                animate={{ x: xFor(index) }}\n                transition={spreadTransition}\n                style={{ zIndex: displayed.length - index }}\n                className={cn(\n                  'relative shrink-0 rounded-pill focus-ring',\n                  index > 0 && overlapClass,\n                  spotlight,\n                  extraRing,\n                )}\n              >\n                {inner}\n              </motion.button>\n            )\n\n            if (!showTooltip) return <React.Fragment key={key}>{node}</React.Fragment>\n\n            return (\n              <Tooltip key={key}>\n                <TooltipTrigger asChild>{node}</TooltipTrigger>\n                <TooltipContent sideOffset={6}>\n                  <p className=\"text-body-sm\">{user.name}</p>\n                </TooltipContent>\n              </Tooltip>\n            )\n          })}\n\n          {overflow > 0 && (\n            <Tooltip>\n              <TooltipTrigger asChild>\n                <motion.button\n                  type=\"button\"\n                  onClick={onOverflowClick}\n                  aria-label={`${overflow} more ${overflow === 1 ? 'member' : 'members'}`}\n                  animate={{ x: xFor(displayed.length) }}\n                  transition={spreadTransition}\n                  style={{ zIndex: 0 }}\n                  className={cn(\n                    'relative shrink-0 rounded-pill focus-ring',\n                    overlapClass,\n                    spotlight,\n                    !onOverflowClick && 'cursor-default',\n                  )}\n                >\n                  <Avatar size={size} className={borderClass}>\n                    <AvatarFallback className=\"bg-accent-2 font-semibold text-accent-11\">\n                      +{overflow}\n                    </AvatarFallback>\n                  </Avatar>\n                </motion.button>\n              </TooltipTrigger>\n              <TooltipContent sideOffset={6}>\n                <div className=\"flex flex-col gap-ds-01\">\n                  {users.slice(cap).map((user, i) => (\n                    <p key={i} className=\"text-body-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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"}

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

@@ -1,31 +1,38 @@
-"use client";
-import { IconInput } from '../ui/lib/icon-input';
+import { Button } from '../ui/button.js';
+import { IconInput } from '../ui/lib/icon-input.js';
 import * as React from 'react';
+type ButtonColor = React.ComponentProps<typeof Button>['color'];
 export interface BulkActionBarAction {
     label: string;
     icon?: IconInput;
     onClick: () => void;
-    color?: 'accent' | 'error';
+    /** Any Button color. @default 'accent' (or 'error' for destructive). */
+    color?: ButtonColor;
     disabled?: boolean;
-    /** Show inline confirmation before executing the action */
+    /** Show a pending spinner on the action (e.g. slow bulk op in flight). */
+    loading?: boolean;
+    /** Show inline confirmation before executing the action. */
     requiresConfirmation?: boolean;
-    /** Custom confirmation message @default 'Are you sure?' */
+    /** Custom confirmation message. @default 'Are you sure?' */
     confirmMessage?: string;
 }
-export interface BulkActionBarProps {
+export interface BulkActionBarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'color' | 'onDrag' | 'onDragStart' | 'onDragEnd' | 'onAnimationStart' | 'onAnimationEnd' | 'onAnimationIteration' | 'style'> {
     show: boolean;
     count: number;
     onClearSelection: () => void;
     actions: BulkActionBarAction[];
-    /** Total number of items available for selection */
+    /** Total items available for selection (enables "Select all"). */
     totalCount?: number;
-    /** Called when user clicks "Select all" */
+    /** Called when the user clicks "Select all". */
     onSelectAll?: () => void;
-    className?: string;
-}
-declare function BulkActionBar({ show, count, onClearSelection, actions, totalCount, onSelectAll, className, }: BulkActionBarProps): React.ReactPortal | null;
-declare namespace BulkActionBar {
-    var displayName: string;
 }
+/**
+ * BulkActionBar — floating selection toolbar. Follows the ARIA toolbar model:
+ * a single tab stop with roving focus (Arrow keys / Home / End) across ALL
+ * controls (Select-all, actions, Clear), focus landing on the real buttons so
+ * Enter/Space activate them. Arrow direction mirrors under `dir="rtl"`. Escape
+ * clears the selection (or cancels a pending confirmation).
+ */
+declare const BulkActionBar: React.ForwardRefExoticComponent<BulkActionBarProps & React.RefAttributes<HTMLDivElement>>;
 export { BulkActionBar };
 //# sourceMappingURL=bulk-action-bar.d.ts.map

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":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAM9B,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAA;AAQrD,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,KAAK,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAA;IAC1B,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;AAyED,iBAAS,aAAa,CAAC,EACrB,IAAI,EACJ,KAAK,EACL,gBAAgB,EAChB,OAAO,EACP,UAAU,EACV,WAAW,EACX,SAAS,GACV,EAAE,kBAAkB,4BAqGpB;kBA7GQ,aAAa;;;AAiHtB,OAAO,EAAE,aAAa,EAAE,CAAA"}
+{"version":3,"file":"bulk-action-bar.d.ts","sourceRoot":"","sources":["../../src/composed/bulk-action-bar.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,OAAO,EAAE,MAAM,EAAE,MAAM,cAAc,CAAA;AAErC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,sBAAsB,CAAA;AAIrD,KAAK,WAAW,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC,OAAO,CAAC,CAAA;AAE/D,MAAM,WAAW,mBAAmB;IAClC,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,wEAAwE;IACxE,KAAK,CAAC,EAAE,WAAW,CAAA;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,0EAA0E;IAC1E,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,4DAA4D;IAC5D,oBAAoB,CAAC,EAAE,OAAO,CAAA;IAC9B,4DAA4D;IAC5D,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB;AAED,MAAM,WAAW,kBACf,SAAQ,IAAI,CACV,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAEpC,UAAU,GAAG,OAAO,GAAG,QAAQ,GAAG,aAAa,GAAG,WAAW,GAAG,kBAAkB,GAAG,gBAAgB,GAAG,sBAAsB,GAAG,OAAO,CACzI;IACD,IAAI,EAAE,OAAO,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,gBAAgB,EAAE,MAAM,IAAI,CAAA;IAC5B,OAAO,EAAE,mBAAmB,EAAE,CAAA;IAC9B,kEAAkE;IAClE,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,gDAAgD;IAChD,WAAW,CAAC,EAAE,MAAM,IAAI,CAAA;CACzB;AAED;;;;;;GAMG;AACH,QAAA,MAAM,aAAa,2FAwJlB,CAAA;AAGD,OAAO,EAAE,aAAa,EAAE,CAAA"}