beez-ui 2.7.1 → 3.0.0

package/dist/components/avatar.js

@@ -1,346 +1,463 @@
 "use client";
 import { c as _c } from "react/compiler-runtime";
-import { Avatar as AvatarPrimitive } from "@base-ui/react/avatar";
-import { AnimatePresence, motion } from "motion/react";
-import { AVATAR_STATUS_HIDDEN_SCALE, AVATAR_STATUS_LABEL } from "../constants/avatar.js";
+/**
+* Arc's Avatar and Avatar group (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md). The avatar is a round
+* portrait named once for assistive technology, with the first two initials standing in until the photo loads or when
+* it fails, and a presence dot that pops in and out. The group overlaps several avatars, collapses the rest into a +N
+* chip whose count rolls the way it moved, opens and closes the slot of members who join or leave, and on fine
+* pointers fans apart while the pointed-at person lifts and shows their name.
+*/
+import { useState } from "react";
+import { AnimatePresence, motion, useIsPresent } from "motion/react";
+import { AVATAR_GROUP_COUNT_OFFSET_EM, AVATAR_GROUP_DEFAULT_LABEL, AVATAR_GROUP_DEFAULT_MAX, AVATAR_GROUP_OVERFLOW_SUFFIX, AVATAR_GROUP_SLOT_HIDDEN_SCALE, AVATAR_LABEL_SEPARATOR, AVATAR_SIZE_PX, AVATAR_STATUS_LABEL } from "../constants/avatar.js";
 import { usePrefersReducedMotion } from "../hooks/use-prefers-reduced-motion.js";
+import { getNameInitials } from "../lib/name-initials.js";
 import { cn } from "../lib/utils.js";
-import { ARC_DURATION, ARC_SPRING_SNAPPY } from "../motion/arc-tokens.js";
-import { MotionSlot } from "../motion/motion-slot.js";
-import { useBeezUIComponents } from "../providers/beez-ui-provider.js";
+import { ARC_BLUR, ARC_DURATION, ARC_EASE, ARC_SPRING_MORPH } from "../motion/arc-tokens.js";
+import { AvatarBadge, AvatarFallback, AvatarImage, AvatarRoot } from "./primitives/avatar.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/** The presence ring: a surface-coloured gap plus a faint hairline, so the dot reads on photos and fills alike. */
-const presenceRingClassName = "shadow-[0_0_0_2px_var(--surface),0_0_0_3px_color-mix(in_oklab,var(--border)_70%,transparent)]";
 /**
-* A person or account, as a photo with initials as fallback.
-* @param props - Size, optional presence and the Base UI avatar root props.
-* @returns The avatar root.
+* Builds the avatar's accessible name: the person plus, when shown, their presence.
+* @param name - Text that names the person.
+* @param presence - Presence text, if any.
+* @returns The accessible name.
+*/
+function buildAvatarLabel(name, presence) {
+	return presence ? `${name}${AVATAR_LABEL_SEPARATOR}${presence}` : name;
+}
+/**
+* A round portrait for one person, with initials as fallback and an optional presence dot.
+* @param props - Name, photo, size, presence, optional fallback and badge, plus native span attributes for the root.
+* @returns The avatar, announced as one image.
 */
 function Avatar(t0) {
-	const $ = _c(24);
-	let children;
-	let className;
+	const $ = _c(31);
+	let alt;
+	let badge;
+	let fallback;
+	let name;
 	let props;
+	let src;
 	let status;
 	let statusLabel;
 	let t1;
 	if ($[0] !== t0) {
-		({className, size: t1, status, statusLabel, children, ...props} = t0);
+		({name, src, size: t1, status, statusLabel, fallback, badge, alt, ...props} = t0);
 		$[0] = t0;
-		$[1] = children;
-		$[2] = className;
-		$[3] = props;
-		$[4] = status;
-		$[5] = statusLabel;
-		$[6] = t1;
-	} else {
-		children = $[1];
-		className = $[2];
-		props = $[3];
-		status = $[4];
-		statusLabel = $[5];
-		t1 = $[6];
-	}
-	const size = t1 === undefined ? "default" : t1;
-	const reduceMotion = usePrefersReducedMotion();
-	let t2;
-	if ($[7] !== className) {
-		t2 = cn("group/avatar relative inline-grid size-8 shrink-0 place-items-center rounded-(--radius-pill) border border-border bg-surface-muted text-xs font-medium text-foreground select-none data-[size=lg]:size-10 data-[size=lg]:text-sm data-[size=sm]:size-6 data-[size=sm]:text-[10px] data-[size=xl]:size-22 data-[size=xl]:text-xl", className);
-		$[7] = className;
-		$[8] = t2;
+		$[1] = alt;
+		$[2] = badge;
+		$[3] = fallback;
+		$[4] = name;
+		$[5] = props;
+		$[6] = src;
+		$[7] = status;
+		$[8] = statusLabel;
+		$[9] = t1;
 	} else {
-		t2 = $[8];
+		alt = $[1];
+		badge = $[2];
+		fallback = $[3];
+		name = $[4];
+		props = $[5];
+		src = $[6];
+		status = $[7];
+		statusLabel = $[8];
+		t1 = $[9];
 	}
+	const size = t1 === undefined ? "md" : t1;
+	const presence = status ? statusLabel ?? AVATAR_STATUS_LABEL[status] : undefined;
+	const t2 = alt ?? name;
 	let t3;
-	if ($[9] !== status || $[10] !== statusLabel) {
-		t3 = status ? /* @__PURE__ */ _jsx("span", {
-			className: "sr-only",
-			children: statusLabel ?? AVATAR_STATUS_LABEL[status]
-		}) : null;
-		$[9] = status;
-		$[10] = statusLabel;
-		$[11] = t3;
+	if ($[10] !== presence || $[11] !== t2) {
+		t3 = buildAvatarLabel(t2, presence);
+		$[10] = presence;
+		$[11] = t2;
+		$[12] = t3;
 	} else {
-		t3 = $[11];
+		t3 = $[12];
 	}
 	let t4;
-	if ($[12] !== reduceMotion || $[13] !== status) {
-		t4 = status ? /* @__PURE__ */ _jsx(motion.span, {
-			"data-slot": "avatar-status",
-			"data-status": status,
-			"aria-hidden": "true",
-			className: cn("absolute right-0 bottom-0 z-10 size-2.5 rounded-(--radius-pill) data-[status=offline]:bg-text-muted data-[status=online]:bg-success group-data-[size=lg]/avatar:size-3 group-data-[size=sm]/avatar:size-2 group-data-[size=xl]/avatar:right-1 group-data-[size=xl]/avatar:bottom-1 group-data-[size=xl]/avatar:size-3.5 group-has-data-[slot=avatar-badge]/avatar:top-0 group-has-data-[slot=avatar-badge]/avatar:bottom-auto group-data-[size=xl]/avatar:group-has-data-[slot=avatar-badge]/avatar:top-1", presenceRingClassName),
-			initial: {
-				opacity: 0,
-				scale: AVATAR_STATUS_HIDDEN_SCALE
-			},
-			animate: {
-				opacity: 1,
-				scale: 1
-			},
-			exit: {
-				opacity: 0,
-				scale: AVATAR_STATUS_HIDDEN_SCALE,
-				transition: { duration: reduceMotion ? 0 : ARC_DURATION.fast }
-			},
-			transition: reduceMotion ? { duration: 0 } : ARC_SPRING_SNAPPY
-		}, status) : null;
-		$[12] = reduceMotion;
-		$[13] = status;
-		$[14] = t4;
+	if ($[13] !== size || $[14] !== src) {
+		t4 = src ? /* @__PURE__ */ _jsx(AvatarImage, {
+			src,
+			alt: "",
+			width: AVATAR_SIZE_PX[size],
+			height: AVATAR_SIZE_PX[size],
+			sizes: `${AVATAR_SIZE_PX[size]}px`
+		}) : null;
+		$[13] = size;
+		$[14] = src;
+		$[15] = t4;
 	} else {
-		t4 = $[14];
+		t4 = $[15];
 	}
 	let t5;
-	if ($[15] !== t4) {
-		t5 = /* @__PURE__ */ _jsx(AnimatePresence, {
-			initial: false,
-			children: t4
-		});
-		$[15] = t4;
-		$[16] = t5;
+	if ($[16] !== fallback || $[17] !== name) {
+		t5 = fallback ?? getNameInitials(name);
+		$[16] = fallback;
+		$[17] = name;
+		$[18] = t5;
 	} else {
-		t5 = $[16];
+		t5 = $[18];
 	}
 	let t6;
-	if ($[17] !== children || $[18] !== props || $[19] !== size || $[20] !== t2 || $[21] !== t3 || $[22] !== t5) {
-		t6 = /* @__PURE__ */ _jsx(MotionSlot, {
-			kind: "fade",
-			children: /* @__PURE__ */ _jsxs(AvatarPrimitive.Root, {
-				"data-slot": "avatar",
-				"data-size": size,
-				className: t2,
-				...props,
-				children: [
-					children,
-					t3,
-					t5
-				]
-			})
+	if ($[19] !== t5) {
+		t6 = /* @__PURE__ */ _jsx(AvatarFallback, {
+			"aria-hidden": "true",
+			children: t5
 		});
-		$[17] = children;
-		$[18] = props;
-		$[19] = size;
-		$[20] = t2;
-		$[21] = t3;
-		$[22] = t5;
-		$[23] = t6;
+		$[19] = t5;
+		$[20] = t6;
 	} else {
-		t6 = $[23];
+		t6 = $[20];
 	}
-	return t6;
-}
-/** Delegates loading, failure and fallback synchronization to the avatar primitive; loaded images develop in place. */
-function AvatarImage(t0) {
-	const $ = _c(15);
-	let className;
-	let props;
-	let src;
-	let t1;
-	if ($[0] !== t0) {
-		({alt: t1, className, src, ...props} = t0);
-		$[0] = t0;
-		$[1] = className;
-		$[2] = props;
-		$[3] = src;
-		$[4] = t1;
+	let t7;
+	if ($[21] !== badge) {
+		t7 = badge ? /* @__PURE__ */ _jsx(AvatarBadge, { children: badge }) : null;
+		$[21] = badge;
+		$[22] = t7;
 	} else {
-		className = $[1];
-		props = $[2];
-		src = $[3];
-		t1 = $[4];
+		t7 = $[22];
 	}
-	const alt = t1 === undefined ? "" : t1;
-	const { Image: t2 } = useBeezUIComponents();
-	const ImageComponent = t2 === undefined ? "img" : t2;
-	let t3;
-	if ($[5] !== ImageComponent) {
-		t3 = /* @__PURE__ */ _jsx(ImageComponent, {});
-		$[5] = ImageComponent;
-		$[6] = t3;
-	} else {
-		t3 = $[6];
-	}
-	let t4;
-	if ($[7] !== className) {
-		t4 = cn("pointer-events-none absolute inset-0 aspect-square size-full rounded-full object-cover data-[loading]:opacity-0 data-[error]:hidden", className);
-		$[7] = className;
-		$[8] = t4;
-	} else {
-		t4 = $[8];
-	}
-	const t5 = src ?? undefined;
-	let t6;
-	if ($[9] !== alt || $[10] !== props || $[11] !== t3 || $[12] !== t4 || $[13] !== t5) {
-		t6 = /* @__PURE__ */ _jsx(MotionSlot, {
-			kind: "reveal",
-			children: /* @__PURE__ */ _jsx(AvatarPrimitive.Image, {
-				render: t3,
-				keepMounted: true,
-				alt,
-				"data-slot": "avatar-image",
-				className: t4,
-				src: t5,
-				loading: "lazy",
-				decoding: "async",
-				...props
-			})
+	let t8;
+	if ($[23] !== props || $[24] !== size || $[25] !== status || $[26] !== t3 || $[27] !== t4 || $[28] !== t6 || $[29] !== t7) {
+		t8 = /* @__PURE__ */ _jsxs(AvatarRoot, {
+			role: "img",
+			"aria-label": t3,
+			size,
+			status,
+			...props,
+			children: [
+				t4,
+				t6,
+				t7
+			]
 		});
-		$[9] = alt;
-		$[10] = props;
-		$[11] = t3;
-		$[12] = t4;
-		$[13] = t5;
-		$[14] = t6;
+		$[23] = props;
+		$[24] = size;
+		$[25] = status;
+		$[26] = t3;
+		$[27] = t4;
+		$[28] = t6;
+		$[29] = t7;
+		$[30] = t8;
 	} else {
-		t6 = $[14];
+		t8 = $[30];
 	}
-	return t6;
+	return t8;
 }
-function AvatarFallback(t0) {
-	const $ = _c(8);
-	let className;
-	let props;
-	if ($[0] !== t0) {
-		({className, ...props} = t0);
-		$[0] = t0;
-		$[1] = className;
-		$[2] = props;
-	} else {
-		className = $[1];
-		props = $[2];
+/** The overflow count rolls the way it moved: more people rise in from below, fewer drop in from above. */
+const countRoll = {
+	hidden: (direction) => ({
+		opacity: 0,
+		y: `${AVATAR_GROUP_COUNT_OFFSET_EM * direction}em`,
+		filter: `blur(${ARC_BLUR.subtle}px)`
+	}),
+	shown: {
+		opacity: 1,
+		y: 0,
+		filter: "blur(0px)",
+		transition: {
+			duration: ARC_DURATION.standard,
+			ease: [...ARC_EASE.enter]
+		}
+	},
+	gone: (direction) => ({
+		opacity: 0,
+		y: `${-AVATAR_GROUP_COUNT_OFFSET_EM * direction}em`,
+		filter: `blur(${ARC_BLUR.subtle}px)`,
+		transition: {
+			duration: ARC_DURATION.fast,
+			ease: [...ARC_EASE.standard]
+		}
+	})
+};
+/** Same keys as `countRoll`, so the settled style is identical whichever branch renders on the server. */
+const countFade = {
+	hidden: {
+		opacity: 0,
+		y: 0,
+		filter: "blur(0px)"
+	},
+	shown: {
+		opacity: 1,
+		y: 0,
+		filter: "blur(0px)",
+		transition: { duration: ARC_DURATION.instant }
+	},
+	gone: {
+		opacity: 0,
+		y: 0,
+		filter: "blur(0px)",
+		transition: { duration: ARC_DURATION.instant }
 	}
-	let t1;
-	if ($[3] !== className) {
-		t1 = cn("flex size-full items-center justify-center rounded-full bg-surface-muted text-[length:inherit] font-medium text-foreground", className);
-		$[3] = className;
-		$[4] = t1;
-	} else {
-		t1 = $[4];
+};
+/** A person joining or leaving opens or closes their slot, so the rest of the stack slides instead of jumping. */
+const slotPresence = {
+	initial: {
+		width: 0,
+		opacity: 0,
+		scale: AVATAR_GROUP_SLOT_HIDDEN_SCALE
+	},
+	animate: {
+		width: "auto",
+		opacity: 1,
+		scale: 1
+	},
+	exit: {
+		width: 0,
+		opacity: 0,
+		scale: AVATAR_GROUP_SLOT_HIDDEN_SCALE
 	}
+};
+/**
+* Each slot is the avatar's visible width, so a slot that opens or closes moves the rest of the stack smoothly. On fine
+* pointers it carries the hover moves as custom properties: the whole stack fans out from its center, the pointed-at
+* slot rises above its neighbours and they ease aside.
+*/
+const slotClassName = "group/avatar-group-slot peer/avatar-group-slot relative inline-flex flex-none items-center [--aside:0px] [--fan:0px] [--rise:0px] pointer-fine:group-hover/avatar-group:[--fan:calc((var(--index)-(var(--count)-1)/2)*4px)] hover-fine:z-1 hover-fine:[--rise:-2px] pointer-fine:peer-hover/avatar-group-slot:[--aside:3px] pointer-fine:has-[~[data-slot=avatar-group-slot]:hover]:[--aside:-3px]";
+/** One wrapper per person carries every hover move as a single translate, so the stack never changes size. */
+const liftClassName = "relative -ml-1.5 inline-flex rounded-(--radius-pill) [transform:translate(calc(var(--fan)+var(--aside)),var(--rise))] transition-transform duration-(--duration-standard) ease-(--ease-standard) motion-reduce:transform-none! motion-reduce:transition-none";
+/** The surface ring that separates overlapping avatars, which sharpens on the pointed-at one. */
+const ringClassName = "border-2 border-surface shadow-[0_0_0_1px_var(--border)] transition-shadow duration-(--duration-fast) ease-(--ease-standard) pointer-fine:group-hover/avatar-group-slot:shadow-[0_0_0_1px_var(--border-strong)]";
+/**
+* One slot of the stack. A slot that is closing turns inert and hidden from assistive technology, so a person who left
+* is no longer announced while the exit spring plays.
+* @param props - Motion span props for the slot.
+* @returns The slot.
+*/
+function AvatarGroupSlot(props) {
+	const $ = _c(4);
+	const isPresent = useIsPresent();
+	const t0 = isPresent ? props["aria-hidden"] : true;
+	const t1 = !isPresent || undefined;
 	let t2;
-	if ($[5] !== props || $[6] !== t1) {
-		t2 = /* @__PURE__ */ _jsx(AvatarPrimitive.Fallback, {
-			"data-slot": "avatar-fallback",
-			className: t1,
-			...props
+	if ($[0] !== props || $[1] !== t0 || $[2] !== t1) {
+		t2 = /* @__PURE__ */ _jsx(motion.span, {
+			"data-slot": "avatar-group-slot",
+			...props,
+			"aria-hidden": t0,
+			inert: t1
 		});
-		$[5] = props;
-		$[6] = t1;
-		$[7] = t2;
+		$[0] = props;
+		$[1] = t0;
+		$[2] = t1;
+		$[3] = t2;
 	} else {
-		t2 = $[7];
+		t2 = $[3];
 	}
 	return t2;
 }
-/** A custom corner badge, drawn with the same ring as Arc's presence dot. Prefer `status` for presence. */
-function AvatarBadge(t0) {
-	const $ = _c(8);
+/**
+* Builds the overflow chip's accessible name, as in "2 integrantes más".
+* @param overflow - How many members are hidden.
+* @param label - Accessible name of the group.
+* @returns The chip's accessible name.
+*/
+function buildOverflowLabel(overflow, label) {
+	return `${overflow} ${label.toLowerCase()} ${AVATAR_GROUP_OVERFLOW_SUFFIX}`;
+}
+/**
+* An overlapping stack of avatars with a +N overflow chip.
+* @param props - Members, optional total, how many to show, size, accessible label, classes and native root attributes.
+* @returns The group.
+*/
+function AvatarGroup(t0) {
+	const $ = _c(40);
 	let className;
+	let members;
 	let props;
+	let style;
+	let t1;
+	let t2;
+	let t3;
+	let total;
 	if ($[0] !== t0) {
-		({className, ...props} = t0);
+		({members, total, max: t1, size: t2, label: t3, className, style, ...props} = t0);
 		$[0] = t0;
 		$[1] = className;
-		$[2] = props;
+		$[2] = members;
+		$[3] = props;
+		$[4] = style;
+		$[5] = t1;
+		$[6] = t2;
+		$[7] = t3;
+		$[8] = total;
 	} else {
 		className = $[1];
-		props = $[2];
+		members = $[2];
+		props = $[3];
+		style = $[4];
+		t1 = $[5];
+		t2 = $[6];
+		t3 = $[7];
+		total = $[8];
 	}
-	let t1;
-	if ($[3] !== className) {
-		t1 = cn("absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color select-none", presenceRingClassName, "group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden", "group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2", "group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2", "group-data-[size=xl]/avatar:right-1 group-data-[size=xl]/avatar:bottom-1 group-data-[size=xl]/avatar:size-3.5 group-data-[size=xl]/avatar:[&>svg]:size-2.5", className);
-		$[3] = className;
-		$[4] = t1;
+	const max = t1 === undefined ? AVATAR_GROUP_DEFAULT_MAX : t1;
+	const size = t2 === undefined ? "md" : t2;
+	const label = t3 === undefined ? AVATAR_GROUP_DEFAULT_LABEL : t3;
+	const reduceMotion = usePrefersReducedMotion();
+	const visibleMembers = members.slice(0, Math.max(0, max));
+	const memberCount = Math.max(members.length, total ?? 0);
+	const overflow = Math.max(0, memberCount - visibleMembers.length);
+	let t4;
+	if ($[9] !== reduceMotion) {
+		t4 = reduceMotion ? { duration: 0 } : ARC_SPRING_MORPH;
+		$[9] = reduceMotion;
+		$[10] = t4;
 	} else {
-		t1 = $[4];
+		t4 = $[10];
 	}
-	let t2;
-	if ($[5] !== props || $[6] !== t1) {
-		t2 = /* @__PURE__ */ _jsx("span", {
-			"data-slot": "avatar-badge",
-			className: t1,
-			...props
-		});
-		$[5] = props;
-		$[6] = t1;
-		$[7] = t2;
+	const slotTransition = t4;
+	let t5;
+	if ($[11] !== overflow) {
+		t5 = {
+			overflow,
+			direction: 1
+		};
+		$[11] = overflow;
+		$[12] = t5;
 	} else {
-		t2 = $[7];
+		t5 = $[12];
 	}
-	return t2;
-}
-/** Overlaps avatars; the hovered one lifts slightly above its neighbours. */
-function AvatarGroup(t0) {
-	const $ = _c(8);
-	let className;
-	let props;
-	if ($[0] !== t0) {
-		({className, ...props} = t0);
-		$[0] = t0;
-		$[1] = className;
-		$[2] = props;
+	const [shownCount, setShownCount] = useState(t5);
+	if (shownCount.overflow !== overflow) {
+		setShownCount({
+			overflow,
+			direction: overflow < shownCount.overflow ? -1 : 1
+		});
+	}
+	const t6 = visibleMembers.length + (overflow > 0 ? 1 : 0);
+	let t7;
+	if ($[13] !== style || $[14] !== t6) {
+		t7 = {
+			...style,
+			"--count": t6
+		};
+		$[13] = style;
+		$[14] = t6;
+		$[15] = t7;
 	} else {
-		className = $[1];
-		props = $[2];
+		t7 = $[15];
 	}
-	let t1;
-	if ($[3] !== className) {
-		t1 = cn("group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background *:data-[slot=avatar]:transition-[translate] *:data-[slot=avatar]:duration-200 *:data-[slot=avatar]:ease-out *:data-[slot=avatar]:hover:z-10 *:data-[slot=avatar]:hover:-translate-y-0.5", className);
-		$[3] = className;
-		$[4] = t1;
+	const groupStyle = t7;
+	const t8 = "group";
+	const t9 = "avatar-group";
+	let t10;
+	if ($[16] !== className) {
+		t10 = cn("group/avatar-group inline-flex items-center pl-1.5", className);
+		$[16] = className;
+		$[17] = t10;
 	} else {
-		t1 = $[4];
+		t10 = $[17];
 	}
-	let t2;
-	if ($[5] !== props || $[6] !== t1) {
-		t2 = /* @__PURE__ */ _jsx("div", {
-			"data-slot": "avatar-group",
-			className: t1,
-			...props
-		});
-		$[5] = props;
-		$[6] = t1;
-		$[7] = t2;
+	const T0 = AnimatePresence;
+	const t11 = false;
+	let t12;
+	if ($[18] !== size || $[19] !== slotTransition) {
+		t12 = (member, index) => /* @__PURE__ */ _jsx(AvatarGroupSlot, {
+			className: slotClassName,
+			style: { "--index": index },
+			...slotPresence,
+			transition: slotTransition,
+			children: /* @__PURE__ */ _jsxs("span", {
+				className: liftClassName,
+				children: [/* @__PURE__ */ _jsx(Avatar, {
+					className: ringClassName,
+					name: member.name,
+					src: member.src,
+					status: member.status,
+					size
+				}), /* @__PURE__ */ _jsx("span", {
+					"aria-hidden": "true",
+					className: "pointer-events-none absolute bottom-[calc(100%+8px)] left-1/2 z-2 -translate-x-1/2 translate-y-[3px] rounded-(--radius-pill) bg-foreground px-2 py-1 text-xs leading-(--leading-body) font-medium whitespace-nowrap text-background opacity-0 transition-[opacity,translate] duration-(--duration-fast) ease-(--ease-standard) pointer-fine:group-hover/avatar-group-slot:translate-y-0 pointer-fine:group-hover/avatar-group-slot:opacity-100 pointer-fine:group-hover/avatar-group-slot:delay-60 motion-reduce:translate-y-0 motion-reduce:transition-none",
+					children: member.name
+				})]
+			})
+		}, member.key ?? member.name);
+		$[18] = size;
+		$[19] = slotTransition;
+		$[20] = t12;
 	} else {
-		t2 = $[7];
+		t12 = $[20];
 	}
-	return t2;
-}
-function AvatarGroupCount(t0) {
-	const $ = _c(8);
-	let className;
-	let props;
-	if ($[0] !== t0) {
-		({className, ...props} = t0);
-		$[0] = t0;
-		$[1] = className;
-		$[2] = props;
+	const t13 = visibleMembers.map(t12);
+	let t14;
+	if ($[21] !== label || $[22] !== overflow || $[23] !== reduceMotion || $[24] !== shownCount.direction || $[25] !== size || $[26] !== slotTransition || $[27] !== visibleMembers) {
+		t14 = overflow > 0 ? /* @__PURE__ */ _jsx(AvatarGroupSlot, {
+			className: slotClassName,
+			style: { "--index": visibleMembers.length },
+			...slotPresence,
+			transition: slotTransition,
+			children: /* @__PURE__ */ _jsx("span", {
+				role: "img",
+				"aria-label": buildOverflowLabel(overflow, label),
+				"data-slot": "avatar-group-count",
+				"data-size": size,
+				className: cn(liftClassName, ringClassName, "relative grid size-8 place-items-center overflow-hidden bg-surface-muted text-xs font-medium text-text-secondary tabular-nums data-[size=lg]:size-10 data-[size=lg]:text-sm data-[size=sm]:size-6 data-[size=sm]:text-[10px]"),
+				children: /* @__PURE__ */ _jsx(AnimatePresence, {
+					mode: "popLayout",
+					initial: false,
+					custom: shownCount.direction,
+					children: /* @__PURE__ */ _jsxs(motion.span, {
+						"aria-hidden": "true",
+						className: "inline-block",
+						custom: shownCount.direction,
+						variants: reduceMotion ? countFade : countRoll,
+						initial: "hidden",
+						animate: "shown",
+						exit: "gone",
+						children: ["+", overflow]
+					}, overflow)
+				})
+			})
+		}, "overflow") : null;
+		$[21] = label;
+		$[22] = overflow;
+		$[23] = reduceMotion;
+		$[24] = shownCount.direction;
+		$[25] = size;
+		$[26] = slotTransition;
+		$[27] = visibleMembers;
+		$[28] = t14;
 	} else {
-		className = $[1];
-		props = $[2];
+		t14 = $[28];
 	}
-	let t1;
-	if ($[3] !== className) {
-		t1 = cn("relative flex size-8 shrink-0 items-center justify-center rounded-full border border-border bg-surface-muted text-xs font-medium text-text-secondary ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 group-has-data-[size=xl]/avatar-group:size-22 group-has-data-[size=xl]/avatar-group:text-xl [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3 group-has-data-[size=xl]/avatar-group:[&>svg]:size-8", className);
-		$[3] = className;
-		$[4] = t1;
+	let t15;
+	if ($[29] !== T0 || $[30] !== t13 || $[31] !== t14) {
+		t15 = /* @__PURE__ */ _jsxs(T0, {
+			initial: t11,
+			children: [t13, t14]
+		});
+		$[29] = T0;
+		$[30] = t13;
+		$[31] = t14;
+		$[32] = t15;
 	} else {
-		t1 = $[4];
+		t15 = $[32];
 	}
-	let t2;
-	if ($[5] !== props || $[6] !== t1) {
-		t2 = /* @__PURE__ */ _jsx("div", {
-			"data-slot": "avatar-group-count",
-			className: t1,
-			...props
+	let t16;
+	if ($[33] !== groupStyle || $[34] !== label || $[35] !== props || $[36] !== size || $[37] !== t10 || $[38] !== t15) {
+		t16 = /* @__PURE__ */ _jsx("div", {
+			...props,
+			role: t8,
+			"aria-label": label,
+			"data-slot": t9,
+			"data-size": size,
+			className: t10,
+			style: groupStyle,
+			children: t15
 		});
-		$[5] = props;
-		$[6] = t1;
-		$[7] = t2;
+		$[33] = groupStyle;
+		$[34] = label;
+		$[35] = props;
+		$[36] = size;
+		$[37] = t10;
+		$[38] = t15;
+		$[39] = t16;
 	} else {
-		t2 = $[7];
+		t16 = $[39];
 	}
-	return t2;
+	return t16;
 }
-export { Avatar, AvatarImage, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarBadge };
+export { Avatar, AvatarGroup };