@mortenbrudvik/waveui 0.10.0 → 0.12.0

package/dist/components/data-display/Avatar.mjs

@@ -4,30 +4,35 @@ import { renderSlot as t, slotRendersContent as n } from "../../lib/slot.mjs";
 import { composeEventHandlers as r } from "../../lib/composeEventHandlers.mjs";
 import { avatarClassNames as i } from "../../lib/classNames.mjs";
 import { useMergedRefs as a } from "../../hooks/useMergedRefs.mjs";
-import { joinIds as o } from "../../lib/aria.mjs";
-import { PersonIcon as ee } from "../../lib/icons.mjs";
-import * as s from "react";
-import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { joinIds as ee } from "../../lib/aria.mjs";
+import { PersonIcon as te } from "../../lib/icons.mjs";
+import { AvatarSizeContext as ne } from "./Avatar.context.mjs";
+import * as o from "react";
+import { jsx as s, jsxs as re } from "react/jsx-runtime";
 //#region src/components/data-display/Avatar.tsx
-var u = {
+var c = {
 	"extra-small": "w-6 h-6 text-[10px]",
 	small: "w-8 h-8 text-xs",
 	medium: "w-10 h-10 text-sm",
 	large: "w-12 h-12 text-base",
 	"extra-large": "w-14 h-14 text-lg"
-}, d = "w-full h-full object-cover";
-function te(e) {
+}, ie = {
+	24: c["extra-small"],
+	20: "w-5 h-5 text-[10px]",
+	16: "w-4 h-4 text-[10px]"
+}, l = "w-full h-full object-cover";
+function ae(e) {
 	let t = e.trim().split(/\s+/).filter(Boolean);
 	return t.length === 0 ? "" : ((Array.from(t[0])[0] ?? "") + (t.length > 1 ? Array.from(t[t.length - 1])[0] ?? "" : "")).toUpperCase();
 }
-function f(e) {
+function u(e) {
 	return e?.trim().replace(/\s+/g, " ") || void 0;
 }
-function ne(e) {
-	if (s.isValidElement(e)) return e.props;
+function oe(e) {
+	if (o.isValidElement(e)) return e.props;
 	if (typeof e == "object" && e && !(Symbol.iterator in e)) return e;
 }
-function re(e, t, n) {
+function se(e, t, n) {
 	if (e === void 0) return [
 		void 0,
 		void 0,
@@ -40,7 +45,7 @@ function re(e, t, n) {
 		e,
 		void 0
 	];
-	let r = s.isValidElement(e) ? e : void 0;
+	let r = o.isValidElement(e) ? e : void 0;
 	return [
 		r?.type,
 		r?.key,
@@ -48,115 +53,115 @@ function re(e, t, n) {
 		t?.srcSet
 	];
 }
-function p(e) {
+function d(e) {
 	if (typeof e != "object" || !e) return !1;
 	let t = Object.getPrototypeOf(e);
 	return t === Object.prototype || t === null;
 }
-function m(e, t) {
+function f(e, t) {
 	if (Object.is(e, t)) return !0;
-	if (!p(e) || !p(t)) return !1;
+	if (!d(e) || !d(t)) return !1;
 	let n = Object.keys(e);
 	return n.length === Object.keys(t).length && n.every((n) => Object.prototype.hasOwnProperty.call(t, n) && Object.is(e[n], t[n]));
 }
-function ie(e, t) {
-	return e.every((e, n) => m(e, t[n]));
+function p(e, t) {
+	return e.every((e, n) => f(e, t[n]));
 }
-var h = ({ src: p, name: m, size: h = "medium", icon: g, image: _, badge: v, decorative: y = !1, className: b, ref: x, role: S, "aria-label": C, "aria-labelledby": w, "aria-describedby": T, "aria-description": ae, "aria-details": oe, ...E }) => {
-	let D = _ == null || typeof _ == "boolean" || _ === "" ? void 0 : _, O = ne(D), k = re(D, O, p), [se, A] = s.useState(!1), [ce, le] = s.useState(k);
-	ie(ce, k) || (le(k), A(!1));
-	let j = s.useRef(null);
-	s.useLayoutEffect(() => {
-		let e = j.current?.querySelector("img");
+var m = ({ src: d, name: f, size: m, icon: h, image: g, badge: _, decorative: v = !1, className: y, ref: b, role: x, "aria-label": S, "aria-labelledby": C, "aria-describedby": w, "aria-description": ce, "aria-details": le, ...T }) => {
+	let E = o.useContext(ne), D = g == null || typeof g == "boolean" || g === "" ? void 0 : g, O = oe(D), k = se(D, O, d), [A, j] = o.useState(!1), [ue, de] = o.useState(k);
+	p(ue, k) || (de(k), j(!1));
+	let M = o.useRef(null);
+	o.useLayoutEffect(() => {
+		let e = M.current?.querySelector("img");
 		if (!e || !e.complete || e.naturalWidth !== 0) return;
 		let t = !0, n = e.getAttribute("src"), r = e.getAttribute("srcset"), i = () => {
-			t && e.isConnected && e.getAttribute("src") === n && e.getAttribute("srcset") === r && A(!0);
+			t && e.isConnected && e.getAttribute("src") === n && e.getAttribute("srcset") === r && j(!0);
 		};
 		return typeof e.decode == "function" ? e.decode().then(void 0, i) : queueMicrotask(i), () => {
 			t = !1;
 		};
 	}, []);
-	let M = a(x, j), N = C !== void 0 || w !== void 0, P = S !== void 0 && S !== "presentation" && S !== "none", F = f(m), I = y || N || P ? "" : F ?? "", L = () => A(!0), R = O?.alt, z = R != null, B = z ? R : I, V = {
-		"aria-describedby": T,
-		"aria-description": ae,
-		"aria-details": oe
-	}, H = !y && !N && !P && typeof B == "string" && B.trim() !== "", U = H ? V : {}, W = null;
-	if (!se) {
-		if (typeof D == "string") W = /* @__PURE__ */ c("img", {
+	let fe = a(b, M), N = S !== void 0 || C !== void 0, P = x !== void 0 && x !== "presentation" && x !== "none", F = u(f), I = v || N || P ? "" : F ?? "", L = () => j(!0), R = O?.alt, z = R != null, B = z ? R : I, V = {
+		"aria-describedby": w,
+		"aria-description": ce,
+		"aria-details": le
+	}, H = !v && !N && !P && typeof B == "string" && B.trim() !== "", U = H ? V : {}, W = null;
+	if (!A) {
+		if (typeof D == "string") W = /* @__PURE__ */ s("img", {
 			src: D,
 			alt: I,
 			...U,
-			className: e(i.image, d),
+			className: e(i.image, l),
 			onError: L
 		});
 		else if (D !== void 0) {
 			let n = { onError: r(O?.onError, L) };
 			if (z || (n.alt = I), H) {
 				let e = O?.["aria-describedby"];
-				n["aria-describedby"] = o(T, typeof e == "string" ? e : void 0);
+				n["aria-describedby"] = ee(w, typeof e == "string" ? e : void 0);
 			}
-			let a = s.isValidElement(D) ? s.cloneElement(D, n) : O ? {
+			let a = o.isValidElement(D) ? o.cloneElement(D, n) : O ? {
 				...D,
 				...n
 			} : D;
-			W = t(a, "img", e(i.image, d), {
+			W = t(a, "img", e(i.image, l), {
 				alt: I,
 				...U
 			});
-		} else p && (W = /* @__PURE__ */ c("img", {
-			src: p,
+		} else d && (W = /* @__PURE__ */ s("img", {
+			src: d,
 			alt: I,
 			...U,
-			className: e(i.image, d),
+			className: e(i.image, l),
 			onError: L
 		}));
 	}
-	let G = W !== null && H ? {} : V, K = W === null && g && n(g) ? t(g, "span", e(i.icon, "inline-flex"), { "aria-hidden": !0 }) : null, q = W === null && K === null && m ? te(m) : "", J, Y;
-	W === null ? K === null ? q ? (J = /* @__PURE__ */ c("span", {
+	let G = W !== null && H ? {} : V, K = W === null && h && n(h) ? t(h, "span", e(i.icon, "inline-flex"), { "aria-hidden": !0 }) : null, q = W === null && K === null && f ? ae(f) : "", J, Y;
+	W === null ? K === null ? q ? (J = /* @__PURE__ */ s("span", {
 		"aria-hidden": "true",
 		className: i.initials,
 		children: q
-	}), Y = "bg-primary text-primary-foreground") : (J = /* @__PURE__ */ c(ee, {
+	}), Y = "bg-primary text-primary-foreground") : (J = /* @__PURE__ */ s(te, {
 		size: "60%",
 		className: i.icon
 	}), Y = "bg-muted text-muted-foreground") : (J = K, Y = "bg-muted text-muted-foreground") : J = W;
-	let ue = W !== null && P && typeof B == "string" ? f(B) : void 0, de = typeof R == "string" ? f(R) : void 0, X = C ?? (W === null ? F ?? de : P ? ue ?? F : void 0), Z;
-	Z = y ? {
+	let pe = W !== null && P && typeof B == "string" ? u(B) : void 0, me = typeof R == "string" ? u(R) : void 0, X = S ?? (W === null ? F ?? me : P ? pe ?? F : void 0), Z;
+	Z = v ? {
 		"aria-hidden": !0,
 		...G
-	} : X !== void 0 || w !== void 0 ? {
-		role: S ?? "img",
+	} : X !== void 0 || C !== void 0 ? {
+		role: x ?? "img",
 		"aria-label": X,
-		"aria-labelledby": w,
+		"aria-labelledby": C,
 		...G
-	} : W !== null || S !== void 0 ? {
-		role: S,
+	} : W !== null || x !== void 0 ? {
+		role: x,
 		...G
 	} : {
 		"aria-hidden": !0,
 		...G
 	};
-	let Q = v && n(v) ? t(v, "span", e(i.badge, "absolute bottom-0 end-0 inline-flex")) : null, fe = Q !== null, $ = e(i.visual, "inline-flex items-center justify-center rounded-full overflow-hidden shrink-0 font-bold", u[h], Y);
-	return fe ? /* @__PURE__ */ l("span", {
-		ref: x,
-		...E,
-		className: e(i.root, "relative inline-flex shrink-0", b),
-		children: [/* @__PURE__ */ c("span", {
-			ref: j,
+	let Q = _ && n(_) ? t(_, "span", e(i.badge, "absolute bottom-0 end-0 inline-flex")) : null, he = Q !== null, ge = m === void 0 ? E ? ie[E.size] : c.medium : c[m], $ = e(i.visual, "inline-flex items-center justify-center rounded-full overflow-hidden shrink-0 font-bold", ge, Y);
+	return he ? /* @__PURE__ */ re("span", {
+		ref: b,
+		...T,
+		className: e(i.root, "relative inline-flex shrink-0", y),
+		children: [/* @__PURE__ */ s("span", {
+			ref: M,
 			...Z,
 			className: $,
 			children: J
 		}), Q]
-	}) : /* @__PURE__ */ c("span", {
-		ref: M,
+	}) : /* @__PURE__ */ s("span", {
+		ref: fe,
 		...Z,
-		...E,
-		className: e(i.root, $, b),
+		...T,
+		className: e(i.root, $, y),
 		children: J
 	});
 };
-h.displayName = "Avatar";
+m.displayName = "Avatar";
 //#endregion
-export { h as Avatar, u as avatarSizeClasses };
+export { m as Avatar, c as avatarSizeClasses };
 
 //# sourceMappingURL=Avatar.mjs.map

package/dist/components/data-display/Avatar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.mjs","names":["React","avatarSizeClasses","IMAGE_CLASS","getInitials","parts","name","normaliseName","readSlotProps","slot","getImageKey","imageSlot","src","element","slotProps","isPlainObject","value","proto","sameKeyPart","a","b","keys","k","sameImageKey","part","i","Avatar","ariaLabel","ariaLabelledBy","ariaDescribedBy","ariaDescription","ariaDetails","rest","image","imageKey","failed","setFailed","prevImageKey","setPrevImageKey","visualRef","img","active","checkedSrc","checkedSrcSet","markFailed","rootVisualRef","useMergedRefs","ref","hasConsumerName","roleCarriesName","role","normalisedName","imageAlt","decorative","handleError","ownAlt","hasOwnAlt","renderedAlt","description","imageIsNamed","imageDescription","imageNode","cn","avatarClassNames","overrides","composeEventHandlers","ownIds","joinIds","renderSlot","visualDescription","iconNode","icon","slotRendersContent","initials","content","colorClass","PersonIcon","imageName","slotAltName","label","a11yProps","badgeNode","badge","hasBadge","visualClassName","size","className"],"sources":["../../../src/components/data-display/Avatar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { joinIds } from '../../lib/aria';\nimport { cn } from '../../lib/cn';\nimport { avatarClassNames } from '../../lib/classNames';\nimport { composeEventHandlers } from '../../lib/composeEventHandlers';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\nimport { PersonIcon } from '../../lib/icons';\nimport type { Size, Slot } from '../../lib/types';\nimport { renderSlot, slotRendersContent } from '../../lib/slot';\n\n/** Properties for the Avatar component. */\nexport interface AvatarProps extends React.HTMLAttributes<HTMLSpanElement> {\n  /**\n   * URL of the avatar image. When it fails to load (also before hydration, for server-rendered\n   * markup), the avatar falls back to its icon or initials; a new `src` is tried again.\n   */\n  src?: string;\n  /**\n   * Full name of the person. It names the avatar for assistive technology (the image `alt`; in\n   * initials and icon mode, or with a consumer `role`, the avatar's `aria-label`, with\n   * `role=\"img\"` unless `role` is given) and generates the initials shown when there is no image.\n   */\n  name?: string;\n  /** Size of the avatar.\n   * @default 'medium'\n   */\n  size?: Size;\n  /**\n   * Icon shown instead of the initials when there is no image. Rendered in an `aria-hidden`\n   * `<span>` (a slot object can override its attributes). A falsy value (`null`, `false`, `''`,\n   * `0`, `NaN`, e.g. `icon={count && <Icon />}`) counts as no icon, as in 0.4, and so does an\n   * array, `Set` or generator whose items render nothing. Without `icon` and without a usable\n   * `name`, a generic person glyph is shown.\n   */\n  icon?: Slot<'span'>;\n  /**\n   * Custom image. Accepts a URL string (treated like `src`), an element (rendered as the image\n   * itself, e.g. `<img>` or a framework image component) or an object of `<img>` attributes\n   * (`{ src, alt, … }`). Takes precedence over `src`; its `alt` defaults to `name` (an `alt` that\n   * is `undefined` counts as not given). When its alt names the avatar, the avatar's\n   * `aria-describedby` ids are joined with the slot's own, while the slot's own `aria-description`\n   * and `aria-details` win over the avatar's. When the image fails to load, an avatar without a\n   * `name` keeps the name of the slot's own `alt`. After a load failure, a new image is tried\n   * again: another `src` or `srcSet` of any type (an equal inline object is the same image), or\n   * for an element slot another component type or `key`.\n   */\n  image?: Slot<'img'>;\n  /**\n   * Badge shown at the bottom end corner, e.g. `<PresenceBadge status=\"busy\" />`. With a badge\n   * the avatar is wrapped in an outer `<span>` that receives `ref`, `className` and the other\n   * props; `role`, `aria-label`, `aria-labelledby`, `aria-describedby`, `aria-description` and\n   * `aria-details` stay on the avatar visual, so the badge keeps its own accessible name. A falsy\n   * value (`null`, `false`, `''`, `0`, `NaN`, e.g. `badge={count && <CounterBadge count={count} />}`)\n   * counts as no badge, as in 0.4, and so does an array, `Set` or generator whose items render\n   * nothing: the avatar then renders without the wrapper.\n   */\n  badge?: Slot<'span'>;\n  /**\n   * Hides the avatar visual from assistive technology (`aria-hidden`, empty image `alt`, no\n   * `role=\"img\"`). Use it when the name is already shown next to the avatar (Persona). A badge\n   * stays exposed.\n   * @default false\n   */\n  decorative?: boolean;\n  /** Ref to the root `<span>`: the avatar itself, or the badge wrapper when `badge` is set. */\n  ref?: React.Ref<HTMLSpanElement>;\n}\n\n/**\n * Width, height and text size classes of the avatar per `size`. Module-only (not in the barrel):\n * AvatarGroup sizes its overflow button with the same classes, so the two always match.\n */\nexport const avatarSizeClasses: Readonly<Record<Size, string>> = {\n  'extra-small': 'w-6 h-6 text-[10px]', // 24px\n  small: 'w-8 h-8 text-xs', // 32px\n  medium: 'w-10 h-10 text-sm', // 40px\n  large: 'w-12 h-12 text-base', // 48px\n  'extra-large': 'w-14 h-14 text-lg', // 56px\n};\n\nconst IMAGE_CLASS = 'w-full h-full object-cover';\n\n/** First letter of the first and last word, upper-cased; `''` for a blank name. */\nfunction getInitials(name: string): string {\n  const parts = name.trim().split(/\\s+/).filter(Boolean);\n  if (parts.length === 0) return '';\n  const first = Array.from(parts[0]!)[0] ?? '';\n  const last = parts.length > 1 ? (Array.from(parts[parts.length - 1]!)[0] ?? '') : '';\n  return (first + last).toUpperCase();\n}\n\n/** A name with its whitespace collapsed, or `undefined` when it is blank. */\nfunction normaliseName(name: string | undefined): string | undefined {\n  return name?.trim().replace(/\\s+/g, ' ') || undefined;\n}\n\ntype ImageErrorHandler = React.ReactEventHandler<HTMLImageElement>;\n\n/** Description props that go to the element carrying the avatar's name (data-display#19). */\ntype DescriptionProps = Pick<\n  React.HTMLAttributes<HTMLElement>,\n  'aria-describedby' | 'aria-description' | 'aria-details'\n>;\n\n/** Props the avatar sets on an element or object image slot, over the slot's own. */\ninterface SlotOverrides {\n  onError: ImageErrorHandler;\n  alt?: string;\n  'aria-describedby'?: string;\n}\n\n/** The props of an element or object image slot that the avatar reads. */\ninterface ImageSlotProps {\n  src?: unknown;\n  srcSet?: unknown;\n  alt?: unknown;\n  onError?: unknown;\n  'aria-describedby'?: unknown;\n}\n\n/** The props of an element or object image slot (to read its `src`, `alt` and handlers). */\nfunction readSlotProps(slot: unknown): ImageSlotProps | undefined {\n  if (React.isValidElement(slot)) return slot.props as ImageSlotProps;\n  if (typeof slot === 'object' && slot !== null && !(Symbol.iterator in slot)) {\n    return slot as ImageSlotProps;\n  }\n  return undefined;\n}\n\n/**\n * What identifies the image, so a load failure is kept for it and a new image is tried again\n * (data-display#4): the `src` and `srcSet`, of any type (a framework image component may take a\n * static-import object), and for an element slot also its type and `key`.\n */\ntype ImageKey = readonly [type: unknown, key: unknown, src: unknown, srcSet: unknown];\n\nfunction getImageKey(\n  imageSlot: unknown,\n  slotProps: ImageSlotProps | undefined,\n  src: string | undefined,\n): ImageKey {\n  if (imageSlot === undefined) return [undefined, undefined, src || undefined, undefined];\n  if (typeof imageSlot === 'string') return [undefined, undefined, imageSlot, undefined];\n  const element = React.isValidElement(imageSlot) ? imageSlot : undefined;\n  return [element?.type, element?.key, slotProps?.src, slotProps?.srcSet];\n}\n\nfunction isPlainObject(value: unknown): value is Record<string, unknown> {\n  if (typeof value !== 'object' || value === null) return false;\n  const proto: unknown = Object.getPrototypeOf(value);\n  return proto === Object.prototype || proto === null;\n}\n\n/** Same value, or plain objects with the same entries (an inline `src={{ … }}` on each render). */\nfunction sameKeyPart(a: unknown, b: unknown): boolean {\n  if (Object.is(a, b)) return true;\n  if (!isPlainObject(a) || !isPlainObject(b)) return false;\n  const keys = Object.keys(a);\n  return (\n    keys.length === Object.keys(b).length &&\n    keys.every((k) => Object.prototype.hasOwnProperty.call(b, k) && Object.is(a[k], b[k]))\n  );\n}\n\nfunction sameImageKey(a: ImageKey, b: ImageKey): boolean {\n  return a.every((part, i) => sameKeyPart(part, b[i]));\n}\n\n/**\n * A circular picture of a person: their image, an icon, or the initials of their `name`.\n *\n * - **Image**: `image` (URL string, element or `{ src, alt }` object) or `src`. If the image fails\n *   to load, the avatar falls back to `icon`, the initials or a person glyph, with their\n *   background; a new image is tried again. A server-rendered image that failed before hydration\n *   is detected after mount (settled without a natural size, confirmed by `decode()`).\n * - **Accessible name**: an image uses `name` (whitespace collapsed) as its `alt`, or `''` when the\n *   name is blank. Without an image (none given, or it failed to load) the avatar is `role=\"img\"`\n *   with `aria-label={name}` (without a name: the image slot's own `alt`) and the initials/icon\n *   are hidden; without either (and without `aria-label`/`aria-labelledby`) it is decorative\n *   (`aria-hidden`). A consumer `aria-label`, `aria-labelledby` or `role` (other than\n *   `presentation`/`none`) puts the name on the avatar visual, and an image inside it gets\n *   `alt=\"\"`. `decorative` hides it in every mode. `aria-describedby`, `aria-description` and\n *   `aria-details` go to the element that carries the name: the `<img>` when a non-blank `alt`\n *   names it, otherwise the avatar visual (never an `alt=\"\"` image).\n * - **Badge**: `badge` renders at the bottom end corner (logical, RTL-safe) as a sibling of the\n *   avatar visual, so a `PresenceBadge` keeps its own name. With a badge, `ref`, `className` and\n *   the rest props go to the outer wrapper.\n *\n * @example\n * <Avatar name=\"Jane Doe\" src=\"/jane.jpg\" badge={<PresenceBadge status=\"available\" />} />\n */\nexport const Avatar = ({\n  src,\n  name,\n  size = 'medium',\n  icon,\n  image,\n  badge,\n  decorative = false,\n  className,\n  ref,\n  role,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n  'aria-describedby': ariaDescribedBy,\n  'aria-description': ariaDescription,\n  'aria-details': ariaDetails,\n  ...rest\n}: AvatarProps) => {\n  const imageSlot =\n    image === null || image === undefined || typeof image === 'boolean' || image === ''\n      ? undefined\n      : image;\n  const slotProps = readSlotProps(imageSlot);\n  const imageKey = getImageKey(imageSlot, slotProps, src);\n\n  // Load failure of the current image; a new image is tried again (C-HOOKS: adjust state during\n  // render on prop change).\n  const [failed, setFailed] = React.useState(false);\n  const [prevImageKey, setPrevImageKey] = React.useState(imageKey);\n  if (!sameImageKey(prevImageKey, imageKey)) {\n    setPrevImageKey(imageKey);\n    setFailed(false);\n  }\n\n  // An image that failed before hydration (a fast 404 of server-rendered markup) never reaches\n  // `onError`: React attaches the listener while hydrating and does not replay the event. After\n  // mount, a settled image without a natural size is broken, unless it is an SVG without one, so\n  // `decode()` (which rejects for a broken image) confirms it where the browser supports it. Later\n  // images, rendered by the client, report their errors through `onError`.\n  const visualRef = React.useRef<HTMLSpanElement>(null);\n  React.useLayoutEffect(() => {\n    const img = visualRef.current?.querySelector('img');\n    if (!img || !img.complete || img.naturalWidth !== 0) return;\n    let active = true;\n    const checkedSrc = img.getAttribute('src');\n    const checkedSrcSet = img.getAttribute('srcset');\n    const markFailed = () => {\n      // Deferred (C-HOOKS); skipped if the image was replaced or got another source meanwhile.\n      if (\n        active &&\n        img.isConnected &&\n        img.getAttribute('src') === checkedSrc &&\n        img.getAttribute('srcset') === checkedSrcSet\n      ) {\n        setFailed(true);\n      }\n    };\n    if (typeof img.decode === 'function') img.decode().then(undefined, markFailed);\n    else queueMicrotask(markFailed);\n    return () => {\n      active = false;\n    };\n  }, []);\n  const rootVisualRef = useMergedRefs(ref, visualRef);\n\n  const hasConsumerName = ariaLabel !== undefined || ariaLabelledBy !== undefined;\n  // A consumer role goes to the visual span together with the name (data-display#19), so the\n  // image inside it is presentational (`alt=\"\"`), as with a consumer `aria-label`: the children\n  // of `role=\"img\"` are not exposed. A presentational role (`presentation`, `none`) cannot carry\n  // a name, so the image keeps it.\n  const roleCarriesName = role !== undefined && role !== 'presentation' && role !== 'none';\n  const normalisedName = normaliseName(name);\n  const imageAlt = decorative || hasConsumerName || roleCarriesName ? '' : (normalisedName ?? '');\n  const handleError: ImageErrorHandler = () => setFailed(true);\n\n  // The alt text the image renders with: an element or object slot's own `alt` wins over ours. An\n  // `alt` that is `undefined` (an optional `alt: user.photoAlt`, a wrapper forwarding `alt={alt}`)\n  // or `null` is not given, so ours applies (the slot's own value would otherwise override it).\n  const ownAlt = slotProps?.alt;\n  const hasOwnAlt = ownAlt !== undefined && ownAlt !== null;\n  const renderedAlt: unknown = hasOwnAlt ? ownAlt : imageAlt;\n\n  // The description goes to the element that carries the name: the image itself when a non-blank\n  // `alt` names it (the visual span then has no role, or a presentational one), otherwise the\n  // visual span. An image with an empty `alt` is presentational, and a description on it would\n  // conflict with that role.\n  const description: DescriptionProps = {\n    'aria-describedby': ariaDescribedBy,\n    'aria-description': ariaDescription,\n    'aria-details': ariaDetails,\n  };\n  const imageIsNamed =\n    !decorative &&\n    !hasConsumerName &&\n    !roleCarriesName &&\n    typeof renderedAlt === 'string' &&\n    renderedAlt.trim() !== '';\n  const imageDescription: DescriptionProps = imageIsNamed ? description : {};\n\n  let imageNode: React.ReactNode = null;\n  if (!failed) {\n    if (typeof imageSlot === 'string') {\n      imageNode = (\n        <img\n          src={imageSlot}\n          alt={imageAlt}\n          {...imageDescription}\n          className={cn(avatarClassNames.image, IMAGE_CLASS)}\n          onError={handleError}\n        />\n      );\n    } else if (imageSlot !== undefined) {\n      // The slot's own props win over renderSlot's defaults, so the composed `onError`, the\n      // default `alt` (when the slot gives none) and the joined `aria-describedby` (the avatar's\n      // ids, then the slot's) are set on the slot itself. A slot's own `aria-description` and\n      // `aria-details` win over the avatar's.\n      const overrides: SlotOverrides = {\n        onError: composeEventHandlers(\n          slotProps?.onError as ImageErrorHandler | undefined,\n          handleError,\n        ),\n      };\n      if (!hasOwnAlt) overrides.alt = imageAlt;\n      if (imageIsNamed) {\n        const ownIds = slotProps?.['aria-describedby'];\n        overrides['aria-describedby'] = joinIds(\n          ariaDescribedBy,\n          typeof ownIds === 'string' ? ownIds : undefined,\n        );\n      }\n      const slot = React.isValidElement(imageSlot)\n        ? React.cloneElement(imageSlot as React.ReactElement<SlotOverrides>, overrides)\n        : slotProps\n          ? { ...(imageSlot as object), ...overrides }\n          : imageSlot;\n      imageNode = renderSlot(slot as Slot<'img'>, 'img', cn(avatarClassNames.image, IMAGE_CLASS), {\n        alt: imageAlt,\n        ...imageDescription,\n      });\n    } else if (src) {\n      imageNode = (\n        <img\n          src={src}\n          alt={imageAlt}\n          {...imageDescription}\n          className={cn(avatarClassNames.image, IMAGE_CLASS)}\n          onError={handleError}\n        />\n      );\n    }\n  }\n  const visualDescription = imageNode !== null && imageIsNamed ? {} : description;\n\n  // A falsy icon (`icon={count && <Icon />}` with count 0) is no icon, as in 0.4, and so is a\n  // collection whose items render nothing (`icon={items.map(…)}` mapping to nothing). The check\n  // does not consume a generator: renderSlot still renders its items.\n  const iconNode =\n    imageNode === null && icon && slotRendersContent(icon)\n      ? renderSlot(icon, 'span', cn(avatarClassNames.icon, 'inline-flex'), { 'aria-hidden': true })\n      : null;\n  const initials = imageNode === null && iconNode === null && name ? getInitials(name) : '';\n\n  let content: React.ReactNode;\n  let colorClass: string | undefined;\n  if (imageNode !== null) {\n    content = imageNode;\n  } else if (iconNode !== null) {\n    content = iconNode;\n    colorClass = 'bg-muted text-muted-foreground';\n  } else if (initials) {\n    content = (\n      <span aria-hidden=\"true\" className={avatarClassNames.initials}>\n        {initials}\n      </span>\n    );\n    colorClass = 'bg-primary text-primary-foreground';\n  } else {\n    content = <PersonIcon size=\"60%\" className={avatarClassNames.icon} />;\n    colorClass = 'bg-muted text-muted-foreground';\n  }\n\n  // Accessible name of the avatar visual (data-display#19, #27). With a consumer role and an\n  // image it is the name the image would carry: an element or object slot's own alt, else `name`.\n  // Without an image (none given, or it failed to load) it is `name`, else the slot's own alt: an\n  // avatar named only by its image alt keeps that name when the image fails.\n  const imageName =\n    imageNode !== null && roleCarriesName && typeof renderedAlt === 'string'\n      ? normaliseName(renderedAlt)\n      : undefined;\n  const slotAltName = typeof ownAlt === 'string' ? normaliseName(ownAlt) : undefined;\n  const label =\n    ariaLabel ??\n    (imageNode === null\n      ? (normalisedName ?? slotAltName)\n      : roleCarriesName\n        ? (imageName ?? normalisedName)\n        : undefined);\n  let a11yProps: React.HTMLAttributes<HTMLSpanElement>;\n  if (decorative) {\n    a11yProps = { 'aria-hidden': true, ...visualDescription };\n  } else if (label !== undefined || ariaLabelledBy !== undefined) {\n    a11yProps = {\n      role: role ?? 'img',\n      'aria-label': label,\n      'aria-labelledby': ariaLabelledBy,\n      ...visualDescription,\n    };\n  } else if (imageNode !== null || role !== undefined) {\n    a11yProps = { role, ...visualDescription };\n  } else {\n    a11yProps = { 'aria-hidden': true, ...visualDescription };\n  }\n\n  // A falsy or empty badge (`badge={count && <CounterBadge … />}` with count 0) is no badge, as in\n  // 0.4 and like `icon`: no stray \"0\" in the corner, and no wrapper taking the root props.\n  const badgeNode =\n    badge && slotRendersContent(badge)\n      ? renderSlot(badge, 'span', cn(avatarClassNames.badge, 'absolute bottom-0 end-0 inline-flex'))\n      : null;\n  const hasBadge = badgeNode !== null;\n\n  const visualClassName = cn(\n    avatarClassNames.visual,\n    'inline-flex items-center justify-center rounded-full overflow-hidden shrink-0 font-bold',\n    avatarSizeClasses[size],\n    colorClass,\n  );\n\n  if (!hasBadge) {\n    return (\n      <span\n        ref={rootVisualRef}\n        {...a11yProps}\n        {...rest}\n        className={cn(avatarClassNames.root, visualClassName, className)}\n      >\n        {content}\n      </span>\n    );\n  }\n\n  return (\n    <span\n      ref={ref}\n      {...rest}\n      className={cn(avatarClassNames.root, 'relative inline-flex shrink-0', className)}\n    >\n      <span ref={visualRef} {...a11yProps} className={visualClassName}>\n        {content}\n      </span>\n      {badgeNode}\n    </span>\n  );\n};\n\nAvatar.displayName = 'Avatar';\n"],"mappings":"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"}
+{"version":3,"file":"Avatar.mjs","names":["React","avatarSizeClasses","AVATAR_BOX_CLASSES","IMAGE_CLASS","getInitials","parts","name","normaliseName","readSlotProps","slot","getImageKey","imageSlot","src","element","slotProps","isPlainObject","value","proto","sameKeyPart","a","b","keys","k","sameImageKey","part","i","Avatar","sizeProp","ariaLabel","ariaLabelledBy","ariaDescribedBy","ariaDescription","ariaDetails","rest","box","AvatarSizeContext","image","imageKey","failed","setFailed","prevImageKey","setPrevImageKey","visualRef","img","active","checkedSrc","checkedSrcSet","markFailed","rootVisualRef","useMergedRefs","ref","hasConsumerName","roleCarriesName","role","normalisedName","imageAlt","decorative","handleError","ownAlt","hasOwnAlt","renderedAlt","description","imageIsNamed","imageDescription","imageNode","cn","avatarClassNames","overrides","composeEventHandlers","ownIds","joinIds","renderSlot","visualDescription","iconNode","icon","slotRendersContent","initials","content","colorClass","PersonIcon","imageName","slotAltName","label","a11yProps","badgeNode","badge","hasBadge","sizeClasses","visualClassName","className"],"sources":["../../../src/components/data-display/Avatar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { joinIds } from '../../lib/aria';\nimport { cn } from '../../lib/cn';\nimport { avatarClassNames } from '../../lib/classNames';\nimport { composeEventHandlers } from '../../lib/composeEventHandlers';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\nimport { PersonIcon } from '../../lib/icons';\nimport type { Size, Slot } from '../../lib/types';\nimport { renderSlot, slotRendersContent } from '../../lib/slot';\nimport { AvatarSizeContext, type AvatarSizeContextValue } from './Avatar.context';\n\n/** Properties for the Avatar component. */\nexport interface AvatarProps extends React.HTMLAttributes<HTMLSpanElement> {\n  /**\n   * URL of the avatar image. When it fails to load (also before hydration, for server-rendered\n   * markup), the avatar falls back to its icon or initials; a new `src` is tried again.\n   */\n  src?: string;\n  /**\n   * Full name of the person. It names the avatar for assistive technology (the image `alt`; in\n   * initials and icon mode, or with a consumer `role`, the avatar's `aria-label`, with\n   * `role=\"img\"` unless `role` is given) and generates the initials shown when there is no image.\n   */\n  name?: string;\n  /**\n   * Size of the avatar. Without it, an Avatar in the `media` of a tag (Tag, InteractionTag) takes\n   * the tag's media box instead: 24, 20 or 16px by the tag's size.\n   * @default 'medium'\n   */\n  size?: Size;\n  /**\n   * Icon shown instead of the initials when there is no image. Rendered in an `aria-hidden`\n   * `<span>` (a slot object can override its attributes). A falsy value (`null`, `false`, `''`,\n   * `0`, `NaN`, e.g. `icon={count && <Icon />}`) counts as no icon, as in 0.4, and so does an\n   * array, `Set` or generator whose items render nothing. Without `icon` and without a usable\n   * `name`, a generic person glyph is shown.\n   */\n  icon?: Slot<'span'>;\n  /**\n   * Custom image. Accepts a URL string (treated like `src`), an element (rendered as the image\n   * itself, e.g. `<img>` or a framework image component) or an object of `<img>` attributes\n   * (`{ src, alt, … }`). Takes precedence over `src`; its `alt` defaults to `name` (an `alt` that\n   * is `undefined` counts as not given). When its alt names the avatar, the avatar's\n   * `aria-describedby` ids are joined with the slot's own, while the slot's own `aria-description`\n   * and `aria-details` win over the avatar's. When the image fails to load, an avatar without a\n   * `name` keeps the name of the slot's own `alt`. After a load failure, a new image is tried\n   * again: another `src` or `srcSet` of any type (an equal inline object is the same image), or\n   * for an element slot another component type or `key`.\n   */\n  image?: Slot<'img'>;\n  /**\n   * Badge shown at the bottom end corner, e.g. `<PresenceBadge status=\"busy\" />`. With a badge\n   * the avatar is wrapped in an outer `<span>` that receives `ref`, `className` and the other\n   * props; `role`, `aria-label`, `aria-labelledby`, `aria-describedby`, `aria-description` and\n   * `aria-details` stay on the avatar visual, so the badge keeps its own accessible name. A falsy\n   * value (`null`, `false`, `''`, `0`, `NaN`, e.g. `badge={count && <CounterBadge count={count} />}`)\n   * counts as no badge, as in 0.4, and so does an array, `Set` or generator whose items render\n   * nothing: the avatar then renders without the wrapper.\n   */\n  badge?: Slot<'span'>;\n  /**\n   * Hides the avatar visual from assistive technology (`aria-hidden`, empty image `alt`, no\n   * `role=\"img\"`). Use it when the name is already shown next to the avatar (Persona). A badge\n   * stays exposed.\n   * @default false\n   */\n  decorative?: boolean;\n  /** Ref to the root `<span>`: the avatar itself, or the badge wrapper when `badge` is set. */\n  ref?: React.Ref<HTMLSpanElement>;\n}\n\n/**\n * Width, height and text size classes of the avatar per `size`. Module-only (not in the barrel):\n * AvatarGroup sizes its overflow button with the same classes, so the two always match.\n */\nexport const avatarSizeClasses: Readonly<Record<Size, string>> = {\n  'extra-small': 'w-6 h-6 text-[10px]', // 24px\n  small: 'w-8 h-8 text-xs', // 32px\n  medium: 'w-10 h-10 text-sm', // 40px\n  large: 'w-12 h-12 text-base', // 48px\n  'extra-large': 'w-14 h-14 text-lg', // 56px\n};\n\n/**\n * Width, height and text size classes of each box of {@link AvatarSizeContext}, for an Avatar\n * that sets no `size`: 24px is the `extra-small` size, 20px and 16px are internal boxes.\n */\nconst AVATAR_BOX_CLASSES: Readonly<Record<AvatarSizeContextValue['size'], string>> = {\n  24: avatarSizeClasses['extra-small'],\n  20: 'w-5 h-5 text-[10px]',\n  16: 'w-4 h-4 text-[10px]',\n};\n\nconst IMAGE_CLASS = 'w-full h-full object-cover';\n\n/** First letter of the first and last word, upper-cased; `''` for a blank name. */\nfunction getInitials(name: string): string {\n  const parts = name.trim().split(/\\s+/).filter(Boolean);\n  if (parts.length === 0) return '';\n  const first = Array.from(parts[0]!)[0] ?? '';\n  const last = parts.length > 1 ? (Array.from(parts[parts.length - 1]!)[0] ?? '') : '';\n  return (first + last).toUpperCase();\n}\n\n/** A name with its whitespace collapsed, or `undefined` when it is blank. */\nfunction normaliseName(name: string | undefined): string | undefined {\n  return name?.trim().replace(/\\s+/g, ' ') || undefined;\n}\n\ntype ImageErrorHandler = React.ReactEventHandler<HTMLImageElement>;\n\n/** Description props that go to the element carrying the avatar's name (data-display#19). */\ntype DescriptionProps = Pick<\n  React.HTMLAttributes<HTMLElement>,\n  'aria-describedby' | 'aria-description' | 'aria-details'\n>;\n\n/** Props the avatar sets on an element or object image slot, over the slot's own. */\ninterface SlotOverrides {\n  onError: ImageErrorHandler;\n  alt?: string;\n  'aria-describedby'?: string;\n}\n\n/** The props of an element or object image slot that the avatar reads. */\ninterface ImageSlotProps {\n  src?: unknown;\n  srcSet?: unknown;\n  alt?: unknown;\n  onError?: unknown;\n  'aria-describedby'?: unknown;\n}\n\n/** The props of an element or object image slot (to read its `src`, `alt` and handlers). */\nfunction readSlotProps(slot: unknown): ImageSlotProps | undefined {\n  if (React.isValidElement(slot)) return slot.props as ImageSlotProps;\n  if (typeof slot === 'object' && slot !== null && !(Symbol.iterator in slot)) {\n    return slot as ImageSlotProps;\n  }\n  return undefined;\n}\n\n/**\n * What identifies the image, so a load failure is kept for it and a new image is tried again\n * (data-display#4): the `src` and `srcSet`, of any type (a framework image component may take a\n * static-import object), and for an element slot also its type and `key`.\n */\ntype ImageKey = readonly [type: unknown, key: unknown, src: unknown, srcSet: unknown];\n\nfunction getImageKey(\n  imageSlot: unknown,\n  slotProps: ImageSlotProps | undefined,\n  src: string | undefined,\n): ImageKey {\n  if (imageSlot === undefined) return [undefined, undefined, src || undefined, undefined];\n  if (typeof imageSlot === 'string') return [undefined, undefined, imageSlot, undefined];\n  const element = React.isValidElement(imageSlot) ? imageSlot : undefined;\n  return [element?.type, element?.key, slotProps?.src, slotProps?.srcSet];\n}\n\nfunction isPlainObject(value: unknown): value is Record<string, unknown> {\n  if (typeof value !== 'object' || value === null) return false;\n  const proto: unknown = Object.getPrototypeOf(value);\n  return proto === Object.prototype || proto === null;\n}\n\n/** Same value, or plain objects with the same entries (an inline `src={{ … }}` on each render). */\nfunction sameKeyPart(a: unknown, b: unknown): boolean {\n  if (Object.is(a, b)) return true;\n  if (!isPlainObject(a) || !isPlainObject(b)) return false;\n  const keys = Object.keys(a);\n  return (\n    keys.length === Object.keys(b).length &&\n    keys.every((k) => Object.prototype.hasOwnProperty.call(b, k) && Object.is(a[k], b[k]))\n  );\n}\n\nfunction sameImageKey(a: ImageKey, b: ImageKey): boolean {\n  return a.every((part, i) => sameKeyPart(part, b[i]));\n}\n\n/**\n * A circular picture of a person: their image, an icon, or the initials of their `name`.\n *\n * - **Image**: `image` (URL string, element or `{ src, alt }` object) or `src`. If the image fails\n *   to load, the avatar falls back to `icon`, the initials or a person glyph, with their\n *   background; a new image is tried again. A server-rendered image that failed before hydration\n *   is detected after mount (settled without a natural size, confirmed by `decode()`).\n * - **Accessible name**: an image uses `name` (whitespace collapsed) as its `alt`, or `''` when the\n *   name is blank. Without an image (none given, or it failed to load) the avatar is `role=\"img\"`\n *   with `aria-label={name}` (without a name: the image slot's own `alt`) and the initials/icon\n *   are hidden; without either (and without `aria-label`/`aria-labelledby`) it is decorative\n *   (`aria-hidden`). A consumer `aria-label`, `aria-labelledby` or `role` (other than\n *   `presentation`/`none`) puts the name on the avatar visual, and an image inside it gets\n *   `alt=\"\"`. `decorative` hides it in every mode. `aria-describedby`, `aria-description` and\n *   `aria-details` go to the element that carries the name: the `<img>` when a non-blank `alt`\n *   names it, otherwise the avatar visual (never an `alt=\"\"` image).\n * - **Badge**: `badge` renders at the bottom end corner (logical, RTL-safe) as a sibling of the\n *   avatar visual, so a `PresenceBadge` keeps its own name. With a badge, `ref`, `className` and\n *   the rest props go to the outer wrapper.\n *\n * @example\n * <Avatar name=\"Jane Doe\" src=\"/jane.jpg\" badge={<PresenceBadge status=\"available\" />} />\n */\nexport const Avatar = ({\n  src,\n  name,\n  size: sizeProp,\n  icon,\n  image,\n  badge,\n  decorative = false,\n  className,\n  ref,\n  role,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n  'aria-describedby': ariaDescribedBy,\n  'aria-description': ariaDescription,\n  'aria-details': ariaDetails,\n  ...rest\n}: AvatarProps) => {\n  // The media box of a surrounding Tag or InteractionTag, for an Avatar without its own `size`.\n  const box = React.useContext(AvatarSizeContext);\n  const imageSlot =\n    image === null || image === undefined || typeof image === 'boolean' || image === ''\n      ? undefined\n      : image;\n  const slotProps = readSlotProps(imageSlot);\n  const imageKey = getImageKey(imageSlot, slotProps, src);\n\n  // Load failure of the current image; a new image is tried again (C-HOOKS: adjust state during\n  // render on prop change).\n  const [failed, setFailed] = React.useState(false);\n  const [prevImageKey, setPrevImageKey] = React.useState(imageKey);\n  if (!sameImageKey(prevImageKey, imageKey)) {\n    setPrevImageKey(imageKey);\n    setFailed(false);\n  }\n\n  // An image that failed before hydration (a fast 404 of server-rendered markup) never reaches\n  // `onError`: React attaches the listener while hydrating and does not replay the event. After\n  // mount, a settled image without a natural size is broken, unless it is an SVG without one, so\n  // `decode()` (which rejects for a broken image) confirms it where the browser supports it. Later\n  // images, rendered by the client, report their errors through `onError`.\n  const visualRef = React.useRef<HTMLSpanElement>(null);\n  React.useLayoutEffect(() => {\n    const img = visualRef.current?.querySelector('img');\n    if (!img || !img.complete || img.naturalWidth !== 0) return;\n    let active = true;\n    const checkedSrc = img.getAttribute('src');\n    const checkedSrcSet = img.getAttribute('srcset');\n    const markFailed = () => {\n      // Deferred (C-HOOKS); skipped if the image was replaced or got another source meanwhile.\n      if (\n        active &&\n        img.isConnected &&\n        img.getAttribute('src') === checkedSrc &&\n        img.getAttribute('srcset') === checkedSrcSet\n      ) {\n        setFailed(true);\n      }\n    };\n    if (typeof img.decode === 'function') img.decode().then(undefined, markFailed);\n    else queueMicrotask(markFailed);\n    return () => {\n      active = false;\n    };\n  }, []);\n  const rootVisualRef = useMergedRefs(ref, visualRef);\n\n  const hasConsumerName = ariaLabel !== undefined || ariaLabelledBy !== undefined;\n  // A consumer role goes to the visual span together with the name (data-display#19), so the\n  // image inside it is presentational (`alt=\"\"`), as with a consumer `aria-label`: the children\n  // of `role=\"img\"` are not exposed. A presentational role (`presentation`, `none`) cannot carry\n  // a name, so the image keeps it.\n  const roleCarriesName = role !== undefined && role !== 'presentation' && role !== 'none';\n  const normalisedName = normaliseName(name);\n  const imageAlt = decorative || hasConsumerName || roleCarriesName ? '' : (normalisedName ?? '');\n  const handleError: ImageErrorHandler = () => setFailed(true);\n\n  // The alt text the image renders with: an element or object slot's own `alt` wins over ours. An\n  // `alt` that is `undefined` (an optional `alt: user.photoAlt`, a wrapper forwarding `alt={alt}`)\n  // or `null` is not given, so ours applies (the slot's own value would otherwise override it).\n  const ownAlt = slotProps?.alt;\n  const hasOwnAlt = ownAlt !== undefined && ownAlt !== null;\n  const renderedAlt: unknown = hasOwnAlt ? ownAlt : imageAlt;\n\n  // The description goes to the element that carries the name: the image itself when a non-blank\n  // `alt` names it (the visual span then has no role, or a presentational one), otherwise the\n  // visual span. An image with an empty `alt` is presentational, and a description on it would\n  // conflict with that role.\n  const description: DescriptionProps = {\n    'aria-describedby': ariaDescribedBy,\n    'aria-description': ariaDescription,\n    'aria-details': ariaDetails,\n  };\n  const imageIsNamed =\n    !decorative &&\n    !hasConsumerName &&\n    !roleCarriesName &&\n    typeof renderedAlt === 'string' &&\n    renderedAlt.trim() !== '';\n  const imageDescription: DescriptionProps = imageIsNamed ? description : {};\n\n  let imageNode: React.ReactNode = null;\n  if (!failed) {\n    if (typeof imageSlot === 'string') {\n      imageNode = (\n        <img\n          src={imageSlot}\n          alt={imageAlt}\n          {...imageDescription}\n          className={cn(avatarClassNames.image, IMAGE_CLASS)}\n          onError={handleError}\n        />\n      );\n    } else if (imageSlot !== undefined) {\n      // The slot's own props win over renderSlot's defaults, so the composed `onError`, the\n      // default `alt` (when the slot gives none) and the joined `aria-describedby` (the avatar's\n      // ids, then the slot's) are set on the slot itself. A slot's own `aria-description` and\n      // `aria-details` win over the avatar's.\n      const overrides: SlotOverrides = {\n        onError: composeEventHandlers(\n          slotProps?.onError as ImageErrorHandler | undefined,\n          handleError,\n        ),\n      };\n      if (!hasOwnAlt) overrides.alt = imageAlt;\n      if (imageIsNamed) {\n        const ownIds = slotProps?.['aria-describedby'];\n        overrides['aria-describedby'] = joinIds(\n          ariaDescribedBy,\n          typeof ownIds === 'string' ? ownIds : undefined,\n        );\n      }\n      const slot = React.isValidElement(imageSlot)\n        ? React.cloneElement(imageSlot as React.ReactElement<SlotOverrides>, overrides)\n        : slotProps\n          ? { ...(imageSlot as object), ...overrides }\n          : imageSlot;\n      imageNode = renderSlot(slot as Slot<'img'>, 'img', cn(avatarClassNames.image, IMAGE_CLASS), {\n        alt: imageAlt,\n        ...imageDescription,\n      });\n    } else if (src) {\n      imageNode = (\n        <img\n          src={src}\n          alt={imageAlt}\n          {...imageDescription}\n          className={cn(avatarClassNames.image, IMAGE_CLASS)}\n          onError={handleError}\n        />\n      );\n    }\n  }\n  const visualDescription = imageNode !== null && imageIsNamed ? {} : description;\n\n  // A falsy icon (`icon={count && <Icon />}` with count 0) is no icon, as in 0.4, and so is a\n  // collection whose items render nothing (`icon={items.map(…)}` mapping to nothing). The check\n  // does not consume a generator: renderSlot still renders its items.\n  const iconNode =\n    imageNode === null && icon && slotRendersContent(icon)\n      ? renderSlot(icon, 'span', cn(avatarClassNames.icon, 'inline-flex'), { 'aria-hidden': true })\n      : null;\n  const initials = imageNode === null && iconNode === null && name ? getInitials(name) : '';\n\n  let content: React.ReactNode;\n  let colorClass: string | undefined;\n  if (imageNode !== null) {\n    content = imageNode;\n  } else if (iconNode !== null) {\n    content = iconNode;\n    colorClass = 'bg-muted text-muted-foreground';\n  } else if (initials) {\n    content = (\n      <span aria-hidden=\"true\" className={avatarClassNames.initials}>\n        {initials}\n      </span>\n    );\n    colorClass = 'bg-primary text-primary-foreground';\n  } else {\n    content = <PersonIcon size=\"60%\" className={avatarClassNames.icon} />;\n    colorClass = 'bg-muted text-muted-foreground';\n  }\n\n  // Accessible name of the avatar visual (data-display#19, #27). With a consumer role and an\n  // image it is the name the image would carry: an element or object slot's own alt, else `name`.\n  // Without an image (none given, or it failed to load) it is `name`, else the slot's own alt: an\n  // avatar named only by its image alt keeps that name when the image fails.\n  const imageName =\n    imageNode !== null && roleCarriesName && typeof renderedAlt === 'string'\n      ? normaliseName(renderedAlt)\n      : undefined;\n  const slotAltName = typeof ownAlt === 'string' ? normaliseName(ownAlt) : undefined;\n  const label =\n    ariaLabel ??\n    (imageNode === null\n      ? (normalisedName ?? slotAltName)\n      : roleCarriesName\n        ? (imageName ?? normalisedName)\n        : undefined);\n  let a11yProps: React.HTMLAttributes<HTMLSpanElement>;\n  if (decorative) {\n    a11yProps = { 'aria-hidden': true, ...visualDescription };\n  } else if (label !== undefined || ariaLabelledBy !== undefined) {\n    a11yProps = {\n      role: role ?? 'img',\n      'aria-label': label,\n      'aria-labelledby': ariaLabelledBy,\n      ...visualDescription,\n    };\n  } else if (imageNode !== null || role !== undefined) {\n    a11yProps = { role, ...visualDescription };\n  } else {\n    a11yProps = { 'aria-hidden': true, ...visualDescription };\n  }\n\n  // A falsy or empty badge (`badge={count && <CounterBadge … />}` with count 0) is no badge, as in\n  // 0.4 and like `icon`: no stray \"0\" in the corner, and no wrapper taking the root props.\n  const badgeNode =\n    badge && slotRendersContent(badge)\n      ? renderSlot(badge, 'span', cn(avatarClassNames.badge, 'absolute bottom-0 end-0 inline-flex'))\n      : null;\n  const hasBadge = badgeNode !== null;\n\n  // An own `size` wins; without one, the box of a surrounding tag's media, else medium. With a\n  // badge the visual is sized, not the wrapper.\n  const sizeClasses =\n    sizeProp !== undefined\n      ? avatarSizeClasses[sizeProp]\n      : box\n        ? AVATAR_BOX_CLASSES[box.size]\n        : avatarSizeClasses.medium;\n  const visualClassName = cn(\n    avatarClassNames.visual,\n    'inline-flex items-center justify-center rounded-full overflow-hidden shrink-0 font-bold',\n    sizeClasses,\n    colorClass,\n  );\n\n  if (!hasBadge) {\n    return (\n      <span\n        ref={rootVisualRef}\n        {...a11yProps}\n        {...rest}\n        className={cn(avatarClassNames.root, visualClassName, className)}\n      >\n        {content}\n      </span>\n    );\n  }\n\n  return (\n    <span\n      ref={ref}\n      {...rest}\n      className={cn(avatarClassNames.root, 'relative inline-flex shrink-0', className)}\n    >\n      <span ref={visualRef} {...a11yProps} className={visualClassName}>\n        {content}\n      </span>\n      {badgeNode}\n    </span>\n  );\n};\n\nAvatar.displayName = 'Avatar';\n"],"mappings":"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"}

package/dist/components/data-display/AvatarGroup.cjs

@@ -1,2 +1,2 @@
-"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/cn.cjs"),n=require("../../lib/children.cjs"),r=require("../../lib/dev.cjs"),i=require("../../lib/classNames.cjs"),a=require("../../hooks/useId.cjs"),o=require("../../lib/focus.cjs"),s=require("../../hooks/useMergedRefs.cjs"),c=require("../../lib/layers.cjs"),l=require("../../hooks/useDismiss.cjs"),u=require("../portal/Portal.cjs");require("../../lib/styles.cjs");const d=require("../../hooks/usePopupPosition.cjs"),f=require("../../hooks/useRestoreFocus.cjs"),p=require("./Avatar.cjs");let m=require("react");m=e.__toESM(m,1);let h=require("react/jsx-runtime");var g=`Unnamed member`,_=e=>typeof e==`string`&&e.trim()!==``;function v(e){if(typeof e==`string`||typeof e==`number`)return String(e).trim()||void 0;if(!n.isElementOfType(e,p.Avatar))return;let{decorative:t,name:r,"aria-label":i,"aria-labelledby":a}=e.props;if(t||!_(a)){for(let e of[i,r])if(_(e))return e.trim()}}function y(e){if(typeof e==`string`||typeof e==`number`)return!0;if(!n.isElementOfType(e,p.Avatar))return!1;let{decorative:t,image:r,"aria-labelledby":i}=e.props;if(t)return!0;if(_(i))return!1;let a=m.isValidElement(r)?r.props:r;return!_(typeof a==`object`&&a&&`alt`in a?a.alt:void 0)}var b=({max:e,size:_=`medium`,overflowLabel:b,unnamedMemberLabel:x=g,className:S,children:C,ref:w,"aria-label":T,"aria-labelledby":E,...D})=>{let O=n.flattenChildren(C),k=e===void 0||Number.isNaN(e)?1/0:Math.max(0,Math.floor(e)),A=O.slice(0,k),j=O.slice(A.length),M=j.length,N=T===void 0&&E===void 0;m.useEffect(()=>{N&&r.warnOnce(`AvatarGroup:unnamed`,"AvatarGroup: the group has no accessible name. Pass `aria-label` (or `aria-labelledby`) describing the people it shows.")},[N]);let P=a.useId(`avatar-group-overflow`),[F,I]=m.useState(!1);F&&M===0&&I(!1);let L=F&&M>0,R=typeof b==`function`?b(M):b??`${M} more`,z=m.useContext(l.DismissLayerContext),B=m.useRef(null),V=m.useRef(null),[H,U]=m.useState(null),{setReference:W,setFloating:G,floatingProps:K}=d.usePopupPosition({open:L,side:`bottom`,align:`start`}),{layerId:q}=l.useDismiss({open:L,onDismiss:()=>I(!1),refs:[B,V],anchorRef:B,focusOutside:!0});f.useRestoreFocus({enabled:L,container:H,triggerRef:B,onlyIfFocusInside:!0});let J=s.useMergedRefs(B,W),Y=s.useMergedRefs(V,G,U);m.useEffect(()=>{L&&H&&H.focus({preventScroll:!0})},[L,H]);let X=e=>{let t=B.current;if(e.key!==`Tab`||e.defaultPrevented||!t)return;let n=e.currentTarget,r=e.target;if(!r||typeof r.nodeType!=`number`||!n.contains(r))return;let i=o.getTabbableElements(n),a=i.findIndex(e=>e.contains(r))+(e.shiftKey?-1:1);if(a>=0&&a<i.length){e.preventDefault(),i[a].focus();return}let s=t;if(!e.shiftKey){let e=o.getTabbableElements(t.ownerDocument.body).filter(e=>!n.contains(e)),r=e.indexOf(t);s=r===-1?t:e[r+1],s&&z!==null&&!c.isInsideLayerTree(z,s)&&(s=void 0)}I(!1),s&&(e.preventDefault(),s.focus())},Z=L&&j.some(({node:e})=>v(e)===void 0&&y(e));return m.useEffect(()=>{Z&&r.warnOnce(`AvatarGroup:unnamed-member`,`AvatarGroup: a hidden member has no accessible name and is listed as "${x}". Give each member a \`name\` or \`aria-label\`.`)},[Z,x]),(0,h.jsxs)(`div`,{ref:w,role:`group`,"aria-label":T,"aria-labelledby":E,...D,className:t.cn(i.avatarGroupClassNames.root,`inline-flex items-center`,S),children:[A.map(({key:e,node:n},r)=>(0,h.jsx)(`span`,{className:t.cn(i.avatarGroupClassNames.item,`inline-flex rounded-full ring-2 ring-background`,r>0&&`-ms-2`),children:n},e)),M>0&&(0,h.jsxs)(`button`,{ref:J,type:`button`,"aria-label":R,"aria-haspopup":`dialog`,"aria-expanded":L,"aria-controls":L?P:void 0,className:t.cn(i.avatarGroupClassNames.overflowButton,`inline-flex shrink-0 cursor-pointer items-center justify-center rounded-full border-0 p-0 font-semibold`,`bg-muted text-muted-foreground ring-2 ring-background`,`not-disabled:not-aria-disabled:hover:bg-subtle-pressed`,`focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring`,A.length>0&&`-ms-2`,p.avatarSizeClasses[_]),onClick:()=>I(e=>!e),children:[`+`,M]}),L&&(0,h.jsx)(u.Portal,{layerId:q,children:(0,h.jsx)(`div`,{ref:Y,id:P,role:`dialog`,"aria-label":R,tabIndex:-1,"data-state":`open`,...K,className:t.cn(i.avatarGroupClassNames.surface,`min-w-32 max-w-xs rounded-md border border-border bg-background p-2 text-body-1 text-foreground shadow-16`,`focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring`),onKeyDown:X,children:(0,h.jsx)(`ul`,{className:t.cn(i.avatarGroupClassNames.list,`m-0 flex list-none flex-col gap-1 p-0`),children:j.map(({key:e,node:n})=>(0,h.jsx)(`li`,{className:t.cn(i.avatarGroupClassNames.listItem,`px-1 py-0.5`),children:v(n)??(y(n)?x:n)},e))})})})]})};b.displayName=`AvatarGroup`,exports.AvatarGroup=b;
+"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/cn.cjs"),n=require("../../lib/children.cjs"),r=require("../../lib/dev.cjs"),i=require("../../lib/classNames.cjs"),a=require("../../hooks/useId.cjs"),o=require("../../lib/focus.cjs"),s=require("../../hooks/useMergedRefs.cjs"),c=require("../../hooks/usePopupPosition.cjs"),l=require("../../lib/layers.cjs"),u=require("../../hooks/useDismiss.cjs"),d=require("../../hooks/useRestoreFocus.cjs");require("../../lib/styles.cjs");const f=require("../portal/Portal.cjs"),p=require("./Avatar.cjs");let m=require("react");m=e.__toESM(m,1);let h=require("react/jsx-runtime");var g=`Unnamed member`,_=e=>typeof e==`string`&&e.trim()!==``;function v(e){if(typeof e==`string`||typeof e==`number`)return String(e).trim()||void 0;if(!n.isElementOfType(e,p.Avatar))return;let{decorative:t,name:r,"aria-label":i,"aria-labelledby":a}=e.props;if(t||!_(a)){for(let e of[i,r])if(_(e))return e.trim()}}function y(e){if(typeof e==`string`||typeof e==`number`)return!0;if(!n.isElementOfType(e,p.Avatar))return!1;let{decorative:t,image:r,"aria-labelledby":i}=e.props;if(t)return!0;if(_(i))return!1;let a=m.isValidElement(r)?r.props:r;return!_(typeof a==`object`&&a&&`alt`in a?a.alt:void 0)}var b=({max:e,size:_=`medium`,overflowLabel:b,unnamedMemberLabel:x=g,className:S,children:C,ref:w,"aria-label":T,"aria-labelledby":E,...D})=>{let O=n.flattenChildren(C),k=e===void 0||Number.isNaN(e)?1/0:Math.max(0,Math.floor(e)),A=O.slice(0,k),j=O.slice(A.length),M=j.length,N=T===void 0&&E===void 0;m.useEffect(()=>{N&&r.warnOnce(`AvatarGroup:unnamed`,"AvatarGroup: the group has no accessible name. Pass `aria-label` (or `aria-labelledby`) describing the people it shows.")},[N]);let P=a.useId(`avatar-group-overflow`),[F,I]=m.useState(!1);F&&M===0&&I(!1);let L=F&&M>0,R=typeof b==`function`?b(M):b??`${M} more`,z=m.useContext(u.DismissLayerContext),B=m.useRef(null),V=m.useRef(null),[H,U]=m.useState(null),{setReference:W,setFloating:G,floatingProps:K}=c.usePopupPosition({open:L,side:`bottom`,align:`start`}),{layerId:q}=u.useDismiss({open:L,onDismiss:()=>I(!1),refs:[B,V],anchorRef:B,focusOutside:!0});d.useRestoreFocus({enabled:L,container:H,triggerRef:B,onlyIfFocusInside:!0});let J=s.useMergedRefs(B,W),Y=s.useMergedRefs(V,G,U);m.useEffect(()=>{L&&H&&H.focus({preventScroll:!0})},[L,H]);let X=e=>{let t=B.current;if(e.key!==`Tab`||e.defaultPrevented||!t)return;let n=e.currentTarget,r=e.target;if(!r||typeof r.nodeType!=`number`||!n.contains(r))return;let i=o.getTabbableElements(n),a=i.findIndex(e=>e.contains(r))+(e.shiftKey?-1:1);if(a>=0&&a<i.length){e.preventDefault(),i[a].focus();return}let s=t;if(!e.shiftKey){let e=o.getTabbableElements(t.ownerDocument.body).filter(e=>!n.contains(e)),r=e.indexOf(t);s=r===-1?t:e[r+1],s&&z!==null&&!l.isInsideLayerTree(z,s)&&(s=void 0)}I(!1),s&&(e.preventDefault(),s.focus())},Z=L&&j.some(({node:e})=>v(e)===void 0&&y(e));return m.useEffect(()=>{Z&&r.warnOnce(`AvatarGroup:unnamed-member`,`AvatarGroup: a hidden member has no accessible name and is listed as "${x}". Give each member a \`name\` or \`aria-label\`.`)},[Z,x]),(0,h.jsxs)(`div`,{ref:w,role:`group`,"aria-label":T,"aria-labelledby":E,...D,className:t.cn(i.avatarGroupClassNames.root,`inline-flex items-center`,S),children:[A.map(({key:e,node:n},r)=>(0,h.jsx)(`span`,{className:t.cn(i.avatarGroupClassNames.item,`inline-flex rounded-full ring-2 ring-background`,r>0&&`-ms-2`),children:n},e)),M>0&&(0,h.jsxs)(`button`,{ref:J,type:`button`,"aria-label":R,"aria-haspopup":`dialog`,"aria-expanded":L,"aria-controls":L?P:void 0,className:t.cn(i.avatarGroupClassNames.overflowButton,`inline-flex shrink-0 cursor-pointer items-center justify-center rounded-full border-0 p-0 font-semibold`,`bg-muted text-muted-foreground ring-2 ring-background`,`not-disabled:not-aria-disabled:hover:bg-subtle-pressed`,`focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring`,A.length>0&&`-ms-2`,p.avatarSizeClasses[_]),onClick:()=>I(e=>!e),children:[`+`,M]}),L&&(0,h.jsx)(f.Portal,{layerId:q,children:(0,h.jsx)(`div`,{ref:Y,id:P,role:`dialog`,"aria-label":R,tabIndex:-1,"data-state":`open`,...K,className:t.cn(i.avatarGroupClassNames.surface,`min-w-32 max-w-xs rounded-md border border-border bg-background p-2 text-body-1 text-foreground shadow-16`,`focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring`),onKeyDown:X,children:(0,h.jsx)(`ul`,{className:t.cn(i.avatarGroupClassNames.list,`m-0 flex list-none flex-col gap-1 p-0`),children:j.map(({key:e,node:n})=>(0,h.jsx)(`li`,{className:t.cn(i.avatarGroupClassNames.listItem,`px-1 py-0.5`),children:v(n)??(y(n)?x:n)},e))})})})]})};b.displayName=`AvatarGroup`,exports.AvatarGroup=b;
 //# sourceMappingURL=AvatarGroup.cjs.map

package/dist/components/data-display/AvatarGroup.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarGroup.cjs","names":["isElementOfType","Avatar","React","flattenChildren","useId","DismissLayerContext","usePopupPosition","useDismiss","useMergedRefs","getTabbableElements","isInsideLayerTree","cn","avatarGroupClassNames","avatarSizeClasses","Portal","require_runtime","require_cn","require_children","require_dev","require_classNames","require_useId","require_focus","require_useMergedRefs","require_layers","require_useDismiss","require_Portal","require_usePopupPosition","require_useRestoreFocus","require_Avatar","react","react_jsx_runtime","DEFAULT_UNNAMED_MEMBER_LABEL","nonBlank","value","getMemberName","member","label","labelledBy","decorative","name","rendersUnnamed","imageProps","image","AvatarGroup","ariaLabel","ariaLabelledBy","props","items","children","limit","max","visible","hidden","overflow","unnamed","popupId","open","setOpen","isOpen","overflowLabel","parentLayerId","triggerRef","surfaceRef","surface","setSurface","triggerRefs","setReference","surfaceRefs","setFloating","handleSurfaceKeyDown","trigger","event","popup","origin","inner","next","el","target","order","index","hasUnnamedMember","node","unnamedMemberLabel","className","i","key","size","floatingProps"],"sources":["../../../src/components/data-display/AvatarGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport { flattenChildren, isElementOfType } from '../../lib/children';\nimport { cn } from '../../lib/cn';\nimport { avatarGroupClassNames } from '../../lib/classNames';\nimport { warnOnce } from '../../lib/dev';\nimport { getTabbableElements } from '../../lib/focus';\nimport { isInsideLayerTree } from '../../lib/layers';\nimport { focusRing } from '../../lib/styles';\nimport type { Size } from '../../lib/types';\nimport { useId } from '../../hooks/useId';\nimport { DismissLayerContext, useDismiss } from '../../hooks/useDismiss';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\nimport { usePopupPosition } from '../../hooks/usePopupPosition';\nimport { useRestoreFocus } from '../../hooks/useRestoreFocus';\nimport { Portal } from '../portal/Portal';\nimport { Avatar, avatarSizeClasses } from './Avatar';\nimport type { AvatarProps } from './Avatar';\n\n/** Properties for the AvatarGroup component. */\nexport interface AvatarGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Maximum number of avatars to display. The others are replaced by an overflow button that\n   * lists their names. `0` or a negative value shows only the overflow button, a fraction is\n   * rounded down, and `NaN` shows every member (as without `max`). The members of a Fragment\n   * count one by one.\n   */\n  max?: number;\n  /** Size of the overflow button (match it to the avatars).\n   * @default 'medium'\n   */\n  size?: Size;\n  /**\n   * Accessible name of the overflow button (and its popup). A function receives the number of\n   * hidden members. Localise it here.\n   * @default (count) => `${count} more`\n   */\n  overflowLabel?: string | ((count: number) => string);\n  /**\n   * Text listed in the overflow popup for a hidden member that has no accessible name (an\n   * `Avatar` without `name`, `aria-label`, `aria-labelledby` or image `alt`, or blank text).\n   * Localise it here; better still, give every member a name (a development warning asks for it).\n   * @default 'Unnamed member'\n   */\n  unnamedMemberLabel?: string;\n  /** Ref to the root `<div>`. */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n/** Default text listed for a hidden member that would render with no accessible name. */\nconst DEFAULT_UNNAMED_MEMBER_LABEL = 'Unnamed member';\n\nconst nonBlank = (value: unknown): value is string =>\n  typeof value === 'string' && value.trim() !== '';\n\n/**\n * The text name of a member for the overflow list: the text of a text member, or the accessible\n * name of an `Avatar` given by its props (`aria-label` before `name`). An `Avatar` labelled by\n * `aria-labelledby` (unless `decorative`) and every other element have none: they are rendered as\n * they are, so a link keeps working and keeps its own label.\n */\nfunction getMemberName(member: React.ReactNode): string | undefined {\n  if (typeof member === 'string' || typeof member === 'number') {\n    return String(member).trim() || undefined;\n  }\n  if (!isElementOfType<AvatarProps>(member, Avatar)) return undefined;\n  const { decorative, name, 'aria-label': label, 'aria-labelledby': labelledBy } = member.props;\n  if (!decorative && nonBlank(labelledBy)) return undefined;\n  for (const value of [label, name]) {\n    if (nonBlank(value)) return value.trim();\n  }\n  return undefined;\n}\n\n/**\n * Whether a member without a {@link getMemberName} name would render with no accessible name,\n * so its list item would be empty for assistive technology: blank text, or an `Avatar` that is\n * neither labelled by `aria-labelledby` nor named by its image's `alt` (or is `decorative`).\n * Other elements are rendered as they are, since their content is unknown here.\n */\nfunction rendersUnnamed(member: React.ReactNode): boolean {\n  if (typeof member === 'string' || typeof member === 'number') return true;\n  if (!isElementOfType<AvatarProps>(member, Avatar)) return false;\n  const { decorative, image, 'aria-labelledby': labelledBy } = member.props;\n  if (decorative) return true;\n  if (nonBlank(labelledBy)) return false;\n  const imageProps: unknown = React.isValidElement(image) ? image.props : image;\n  const alt =\n    typeof imageProps === 'object' && imageProps !== null && 'alt' in imageProps\n      ? imageProps.alt\n      : undefined;\n  return !nonBlank(alt);\n}\n\n/**\n * A row of overlapping avatars (`role=\"group\"`; name it with `aria-label`).\n *\n * With `max`, the avatars beyond the limit are replaced by an overflow `<button>` (\"+3\", named\n * \"3 more\", see `overflowLabel`). It toggles a popup that lists the hidden members' names: an\n * `Avatar` by its `aria-label` or `name` prop, text as it is. Other members, such as an `Avatar`\n * inside a link or one labelled by `aria-labelledby`, are rendered as they are, and an `Avatar` or\n * text with no accessible name is listed as `unnamedMemberLabel` with a development warning.\n * Focus moves into the popup; Escape, a press outside or the button close it and focus returns to\n * the button. Tab and Shift+Tab move through the popup's own tab stops (links in rendered\n * members); Tab from the last one closes the popup and moves on to the element after the button,\n * Shift+Tab from the first one closes it and returns to the button. When the button is the last\n * tab stop (of the page, or of the Wave layer the group is in, such as a dialog), Tab is left to\n * the browser or the enclosing focus trap.\n *\n * @example\n * <AvatarGroup aria-label=\"Project team\" max={3}>\n *   <Avatar name=\"Ada Lovelace\" />\n *   <Avatar name=\"Alan Turing\" />\n * </AvatarGroup>\n */\nexport const AvatarGroup = ({\n  max,\n  size = 'medium',\n  overflowLabel,\n  unnamedMemberLabel = DEFAULT_UNNAMED_MEMBER_LABEL,\n  className,\n  children,\n  ref,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n  ...props\n}: AvatarGroupProps) => {\n  // Fragments are flattened, so each member counts, overlaps and is listed on its own (C-COMPOUND).\n  const items = flattenChildren(children);\n  const limit = max === undefined || Number.isNaN(max) ? Infinity : Math.max(0, Math.floor(max));\n  const visible = items.slice(0, limit);\n  const hidden = items.slice(visible.length);\n  const overflow = hidden.length;\n\n  const unnamed = ariaLabel === undefined && ariaLabelledBy === undefined;\n  React.useEffect(() => {\n    if (unnamed) {\n      warnOnce(\n        'AvatarGroup:unnamed',\n        'AvatarGroup: the group has no accessible name. Pass `aria-label` (or `aria-labelledby`) describing the people it shows.',\n      );\n    }\n  }, [unnamed]);\n\n  const popupId = useId('avatar-group-overflow');\n  const [open, setOpen] = React.useState(false);\n  // Nothing is hidden any more: close, so the popup does not reappear when members overflow again.\n  if (open && overflow === 0) setOpen(false);\n  const isOpen = open && overflow > 0;\n  const label =\n    typeof overflowLabel === 'function'\n      ? overflowLabel(overflow)\n      : (overflowLabel ?? `${overflow} more`);\n\n  // The layer the group is rendered in (a dialog or popover), if any: the popup's parent layer.\n  const parentLayerId = React.useContext(DismissLayerContext);\n  const triggerRef = React.useRef<HTMLButtonElement | null>(null);\n  const surfaceRef = React.useRef<HTMLDivElement | null>(null);\n  const [surface, setSurface] = React.useState<HTMLDivElement | null>(null);\n\n  const { setReference, setFloating, floatingProps } = usePopupPosition({\n    open: isOpen,\n    side: 'bottom',\n    align: 'start',\n  });\n  const { layerId } = useDismiss({\n    open: isOpen,\n    onDismiss: () => setOpen(false),\n    refs: [triggerRef, surfaceRef],\n    anchorRef: triggerRef,\n    focusOutside: true,\n  });\n  useRestoreFocus({ enabled: isOpen, container: surface, triggerRef, onlyIfFocusInside: true });\n  const triggerRefs = useMergedRefs<HTMLButtonElement>(triggerRef, setReference);\n  const surfaceRefs = useMergedRefs<HTMLDivElement>(surfaceRef, setFloating, setSurface);\n\n  // Move focus into the popup once it is mounted, so its list is read next.\n  React.useEffect(() => {\n    if (isOpen && surface) surface.focus({ preventScroll: true });\n  }, [isOpen, surface]);\n\n  // The popup is portaled, so native tabbing would leave it for the end of the page. Tab moves\n  // through the popup's own tab stops (a rendered member can be a link); leaving the last one\n  // closes the popup and moves on from the button instead (Shift+Tab before the first one: back to\n  // the button), like a focus trap does for a popup anchored in a dialog. When nothing tabbable\n  // follows the button, Tab is not prevented: focus returns to the button as the popup closes and\n  // the browser (leaving the page) or an enclosing focus trap (wrapping) takes it from there.\n  // Inside a parent layer (a dialog, a popover), a tab stop after the button that lies outside that\n  // layer is treated the same way: a focus trap that leaves the page outside it interactive would\n  // pull focus back from there, while its descendant-layer rule (§2.4) wraps from the button.\n  // Tab stops are computed at keydown time, never cached (§2.2 focus utilities). A key that\n  // bubbles through React from a portal a member opened is not the popup's: it is ignored.\n  const handleSurfaceKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    const trigger = triggerRef.current;\n    if (event.key !== 'Tab' || event.defaultPrevented || !trigger) return;\n    const popup = event.currentTarget;\n    // Duck typed (`nodeType`), not `instanceof Node`: a popup portaled into another document (an\n    // iframe, a popout window) holds nodes of that realm.\n    const origin = event.target as Partial<Node> | null;\n    if (!origin || typeof origin.nodeType !== 'number' || !popup.contains(origin as Node)) return;\n    const inner = getTabbableElements(popup);\n    // -1 while focus is on the popup itself (or on something that is not a tab stop).\n    const current = inner.findIndex((el) => el.contains(origin as Node));\n    const next = current + (event.shiftKey ? -1 : 1);\n    if (next >= 0 && next < inner.length) {\n      event.preventDefault();\n      inner[next]!.focus();\n      return;\n    }\n    let target: HTMLElement | undefined = trigger;\n    if (!event.shiftKey) {\n      const order = getTabbableElements(trigger.ownerDocument.body).filter(\n        (el) => !popup.contains(el),\n      );\n      const index = order.indexOf(trigger);\n      target = index === -1 ? trigger : order[index + 1];\n      if (target && parentLayerId !== null && !isInsideLayerTree(parentLayerId, target)) {\n        target = undefined;\n      }\n    }\n    setOpen(false);\n    if (!target) return;\n    event.preventDefault();\n    target.focus();\n  };\n\n  const hasUnnamedMember =\n    isOpen && hidden.some(({ node }) => getMemberName(node) === undefined && rendersUnnamed(node));\n  React.useEffect(() => {\n    if (hasUnnamedMember) {\n      warnOnce(\n        'AvatarGroup:unnamed-member',\n        `AvatarGroup: a hidden member has no accessible name and is listed as \"${unnamedMemberLabel}\". Give each member a \\`name\\` or \\`aria-label\\`.`,\n      );\n    }\n  }, [hasUnnamedMember, unnamedMemberLabel]);\n\n  return (\n    <div\n      ref={ref}\n      role=\"group\"\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledBy}\n      {...props}\n      className={cn(avatarGroupClassNames.root, 'inline-flex items-center', className)}\n    >\n      {visible.map(({ key, node }, i) => (\n        <span\n          key={key}\n          className={cn(\n            avatarGroupClassNames.item,\n            'inline-flex rounded-full ring-2 ring-background',\n            i > 0 && '-ms-2',\n          )}\n        >\n          {node}\n        </span>\n      ))}\n      {overflow > 0 && (\n        <button\n          ref={triggerRefs}\n          type=\"button\"\n          aria-label={label}\n          aria-haspopup=\"dialog\"\n          aria-expanded={isOpen}\n          aria-controls={isOpen ? popupId : undefined}\n          className={cn(\n            avatarGroupClassNames.overflowButton,\n            'inline-flex shrink-0 cursor-pointer items-center justify-center rounded-full border-0 p-0 font-semibold',\n            'bg-muted text-muted-foreground ring-2 ring-background',\n            'not-disabled:not-aria-disabled:hover:bg-subtle-pressed',\n            focusRing,\n            visible.length > 0 && '-ms-2',\n            avatarSizeClasses[size],\n          )}\n          onClick={() => setOpen((value) => !value)}\n        >\n          +{overflow}\n        </button>\n      )}\n      {isOpen && (\n        <Portal layerId={layerId}>\n          <div\n            ref={surfaceRefs}\n            id={popupId}\n            role=\"dialog\"\n            aria-label={label}\n            tabIndex={-1}\n            data-state=\"open\"\n            {...floatingProps}\n            className={cn(\n              avatarGroupClassNames.surface,\n              'min-w-32 max-w-xs rounded-md border border-border bg-background p-2 text-body-1 text-foreground shadow-16',\n              focusRing,\n            )}\n            onKeyDown={handleSurfaceKeyDown}\n          >\n            <ul className={cn(avatarGroupClassNames.list, 'm-0 flex list-none flex-col gap-1 p-0')}>\n              {hidden.map(({ key, node }) => (\n                <li key={key} className={cn(avatarGroupClassNames.listItem, 'px-1 py-0.5')}>\n                  {getMemberName(node) ?? (rendersUnnamed(node) ? unnamedMemberLabel : node)}\n                </li>\n              ))}\n            </ul>\n          </div>\n        </Portal>\n      )}\n    </div>\n  );\n};\n\nAvatarGroup.displayName = 'AvatarGroup';\n"],"mappings":"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"}
+{"version":3,"file":"AvatarGroup.cjs","names":["isElementOfType","Avatar","React","flattenChildren","useId","DismissLayerContext","usePopupPosition","useDismiss","useMergedRefs","getTabbableElements","isInsideLayerTree","cn","avatarGroupClassNames","avatarSizeClasses","Portal","require_runtime","require_cn","require_children","require_dev","require_classNames","require_useId","require_focus","require_useMergedRefs","require_usePopupPosition","require_layers","require_useDismiss","require_useRestoreFocus","require_Portal","require_Avatar","react","react_jsx_runtime","DEFAULT_UNNAMED_MEMBER_LABEL","nonBlank","value","getMemberName","member","label","labelledBy","decorative","name","rendersUnnamed","imageProps","image","AvatarGroup","ariaLabel","ariaLabelledBy","props","items","children","limit","max","visible","hidden","overflow","unnamed","popupId","open","setOpen","isOpen","overflowLabel","parentLayerId","triggerRef","surfaceRef","surface","setSurface","triggerRefs","setReference","surfaceRefs","setFloating","handleSurfaceKeyDown","trigger","event","popup","origin","inner","next","el","target","order","index","hasUnnamedMember","node","unnamedMemberLabel","className","i","key","size","floatingProps"],"sources":["../../../src/components/data-display/AvatarGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport { flattenChildren, isElementOfType } from '../../lib/children';\nimport { cn } from '../../lib/cn';\nimport { avatarGroupClassNames } from '../../lib/classNames';\nimport { warnOnce } from '../../lib/dev';\nimport { getTabbableElements } from '../../lib/focus';\nimport { isInsideLayerTree } from '../../lib/layers';\nimport { focusRing } from '../../lib/styles';\nimport type { Size } from '../../lib/types';\nimport { useId } from '../../hooks/useId';\nimport { DismissLayerContext, useDismiss } from '../../hooks/useDismiss';\nimport { useMergedRefs } from '../../hooks/useMergedRefs';\nimport { usePopupPosition } from '../../hooks/usePopupPosition';\nimport { useRestoreFocus } from '../../hooks/useRestoreFocus';\nimport { Portal } from '../portal/Portal';\nimport { Avatar, avatarSizeClasses } from './Avatar';\nimport type { AvatarProps } from './Avatar';\n\n/** Properties for the AvatarGroup component. */\nexport interface AvatarGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Maximum number of avatars to display. The others are replaced by an overflow button that\n   * lists their names. `0` or a negative value shows only the overflow button, a fraction is\n   * rounded down, and `NaN` shows every member (as without `max`). The members of a Fragment\n   * count one by one.\n   */\n  max?: number;\n  /** Size of the overflow button (match it to the avatars).\n   * @default 'medium'\n   */\n  size?: Size;\n  /**\n   * Accessible name of the overflow button (and its popup). A function receives the number of\n   * hidden members. Localise it here.\n   * @default (count) => `${count} more`\n   */\n  overflowLabel?: string | ((count: number) => string);\n  /**\n   * Text listed in the overflow popup for a hidden member that has no accessible name (an\n   * `Avatar` without `name`, `aria-label`, `aria-labelledby` or image `alt`, or blank text).\n   * Localise it here; better still, give every member a name (a development warning asks for it).\n   * @default 'Unnamed member'\n   */\n  unnamedMemberLabel?: string;\n  /** Ref to the root `<div>`. */\n  ref?: React.Ref<HTMLDivElement>;\n}\n\n/** Default text listed for a hidden member that would render with no accessible name. */\nconst DEFAULT_UNNAMED_MEMBER_LABEL = 'Unnamed member';\n\nconst nonBlank = (value: unknown): value is string =>\n  typeof value === 'string' && value.trim() !== '';\n\n/**\n * The text name of a member for the overflow list: the text of a text member, or the accessible\n * name of an `Avatar` given by its props (`aria-label` before `name`). An `Avatar` labelled by\n * `aria-labelledby` (unless `decorative`) and every other element have none: they are rendered as\n * they are, so a link keeps working and keeps its own label.\n */\nfunction getMemberName(member: React.ReactNode): string | undefined {\n  if (typeof member === 'string' || typeof member === 'number') {\n    return String(member).trim() || undefined;\n  }\n  if (!isElementOfType<AvatarProps>(member, Avatar)) return undefined;\n  const { decorative, name, 'aria-label': label, 'aria-labelledby': labelledBy } = member.props;\n  if (!decorative && nonBlank(labelledBy)) return undefined;\n  for (const value of [label, name]) {\n    if (nonBlank(value)) return value.trim();\n  }\n  return undefined;\n}\n\n/**\n * Whether a member without a {@link getMemberName} name would render with no accessible name,\n * so its list item would be empty for assistive technology: blank text, or an `Avatar` that is\n * neither labelled by `aria-labelledby` nor named by its image's `alt` (or is `decorative`).\n * Other elements are rendered as they are, since their content is unknown here.\n */\nfunction rendersUnnamed(member: React.ReactNode): boolean {\n  if (typeof member === 'string' || typeof member === 'number') return true;\n  if (!isElementOfType<AvatarProps>(member, Avatar)) return false;\n  const { decorative, image, 'aria-labelledby': labelledBy } = member.props;\n  if (decorative) return true;\n  if (nonBlank(labelledBy)) return false;\n  const imageProps: unknown = React.isValidElement(image) ? image.props : image;\n  const alt =\n    typeof imageProps === 'object' && imageProps !== null && 'alt' in imageProps\n      ? imageProps.alt\n      : undefined;\n  return !nonBlank(alt);\n}\n\n/**\n * A row of overlapping avatars (`role=\"group\"`; name it with `aria-label`).\n *\n * With `max`, the avatars beyond the limit are replaced by an overflow `<button>` (\"+3\", named\n * \"3 more\", see `overflowLabel`). It toggles a popup that lists the hidden members' names: an\n * `Avatar` by its `aria-label` or `name` prop, text as it is. Other members, such as an `Avatar`\n * inside a link or one labelled by `aria-labelledby`, are rendered as they are, and an `Avatar` or\n * text with no accessible name is listed as `unnamedMemberLabel` with a development warning.\n * Focus moves into the popup; Escape, a press outside or the button close it and focus returns to\n * the button. Tab and Shift+Tab move through the popup's own tab stops (links in rendered\n * members); Tab from the last one closes the popup and moves on to the element after the button,\n * Shift+Tab from the first one closes it and returns to the button. When the button is the last\n * tab stop (of the page, or of the Wave layer the group is in, such as a dialog), Tab is left to\n * the browser or the enclosing focus trap.\n *\n * @example\n * <AvatarGroup aria-label=\"Project team\" max={3}>\n *   <Avatar name=\"Ada Lovelace\" />\n *   <Avatar name=\"Alan Turing\" />\n * </AvatarGroup>\n */\nexport const AvatarGroup = ({\n  max,\n  size = 'medium',\n  overflowLabel,\n  unnamedMemberLabel = DEFAULT_UNNAMED_MEMBER_LABEL,\n  className,\n  children,\n  ref,\n  'aria-label': ariaLabel,\n  'aria-labelledby': ariaLabelledBy,\n  ...props\n}: AvatarGroupProps) => {\n  // Fragments are flattened, so each member counts, overlaps and is listed on its own (C-COMPOUND).\n  const items = flattenChildren(children);\n  const limit = max === undefined || Number.isNaN(max) ? Infinity : Math.max(0, Math.floor(max));\n  const visible = items.slice(0, limit);\n  const hidden = items.slice(visible.length);\n  const overflow = hidden.length;\n\n  const unnamed = ariaLabel === undefined && ariaLabelledBy === undefined;\n  React.useEffect(() => {\n    if (unnamed) {\n      warnOnce(\n        'AvatarGroup:unnamed',\n        'AvatarGroup: the group has no accessible name. Pass `aria-label` (or `aria-labelledby`) describing the people it shows.',\n      );\n    }\n  }, [unnamed]);\n\n  const popupId = useId('avatar-group-overflow');\n  const [open, setOpen] = React.useState(false);\n  // Nothing is hidden any more: close, so the popup does not reappear when members overflow again.\n  if (open && overflow === 0) setOpen(false);\n  const isOpen = open && overflow > 0;\n  const label =\n    typeof overflowLabel === 'function'\n      ? overflowLabel(overflow)\n      : (overflowLabel ?? `${overflow} more`);\n\n  // The layer the group is rendered in (a dialog or popover), if any: the popup's parent layer.\n  const parentLayerId = React.useContext(DismissLayerContext);\n  const triggerRef = React.useRef<HTMLButtonElement | null>(null);\n  const surfaceRef = React.useRef<HTMLDivElement | null>(null);\n  const [surface, setSurface] = React.useState<HTMLDivElement | null>(null);\n\n  const { setReference, setFloating, floatingProps } = usePopupPosition({\n    open: isOpen,\n    side: 'bottom',\n    align: 'start',\n  });\n  const { layerId } = useDismiss({\n    open: isOpen,\n    onDismiss: () => setOpen(false),\n    refs: [triggerRef, surfaceRef],\n    anchorRef: triggerRef,\n    focusOutside: true,\n  });\n  useRestoreFocus({ enabled: isOpen, container: surface, triggerRef, onlyIfFocusInside: true });\n  const triggerRefs = useMergedRefs<HTMLButtonElement>(triggerRef, setReference);\n  const surfaceRefs = useMergedRefs<HTMLDivElement>(surfaceRef, setFloating, setSurface);\n\n  // Move focus into the popup once it is mounted, so its list is read next.\n  React.useEffect(() => {\n    if (isOpen && surface) surface.focus({ preventScroll: true });\n  }, [isOpen, surface]);\n\n  // The popup is portaled, so native tabbing would leave it for the end of the page. Tab moves\n  // through the popup's own tab stops (a rendered member can be a link); leaving the last one\n  // closes the popup and moves on from the button instead (Shift+Tab before the first one: back to\n  // the button), like a focus trap does for a popup anchored in a dialog. When nothing tabbable\n  // follows the button, Tab is not prevented: focus returns to the button as the popup closes and\n  // the browser (leaving the page) or an enclosing focus trap (wrapping) takes it from there.\n  // Inside a parent layer (a dialog, a popover), a tab stop after the button that lies outside that\n  // layer is treated the same way: a focus trap that leaves the page outside it interactive would\n  // pull focus back from there, while its descendant-layer rule (§2.4) wraps from the button.\n  // Tab stops are computed at keydown time, never cached (§2.2 focus utilities). A key that\n  // bubbles through React from a portal a member opened is not the popup's: it is ignored.\n  const handleSurfaceKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {\n    const trigger = triggerRef.current;\n    if (event.key !== 'Tab' || event.defaultPrevented || !trigger) return;\n    const popup = event.currentTarget;\n    // Duck typed (`nodeType`), not `instanceof Node`: a popup portaled into another document (an\n    // iframe, a popout window) holds nodes of that realm.\n    const origin = event.target as Partial<Node> | null;\n    if (!origin || typeof origin.nodeType !== 'number' || !popup.contains(origin as Node)) return;\n    const inner = getTabbableElements(popup);\n    // -1 while focus is on the popup itself (or on something that is not a tab stop).\n    const current = inner.findIndex((el) => el.contains(origin as Node));\n    const next = current + (event.shiftKey ? -1 : 1);\n    if (next >= 0 && next < inner.length) {\n      event.preventDefault();\n      inner[next]!.focus();\n      return;\n    }\n    let target: HTMLElement | undefined = trigger;\n    if (!event.shiftKey) {\n      const order = getTabbableElements(trigger.ownerDocument.body).filter(\n        (el) => !popup.contains(el),\n      );\n      const index = order.indexOf(trigger);\n      target = index === -1 ? trigger : order[index + 1];\n      if (target && parentLayerId !== null && !isInsideLayerTree(parentLayerId, target)) {\n        target = undefined;\n      }\n    }\n    setOpen(false);\n    if (!target) return;\n    event.preventDefault();\n    target.focus();\n  };\n\n  const hasUnnamedMember =\n    isOpen && hidden.some(({ node }) => getMemberName(node) === undefined && rendersUnnamed(node));\n  React.useEffect(() => {\n    if (hasUnnamedMember) {\n      warnOnce(\n        'AvatarGroup:unnamed-member',\n        `AvatarGroup: a hidden member has no accessible name and is listed as \"${unnamedMemberLabel}\". Give each member a \\`name\\` or \\`aria-label\\`.`,\n      );\n    }\n  }, [hasUnnamedMember, unnamedMemberLabel]);\n\n  return (\n    <div\n      ref={ref}\n      role=\"group\"\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledBy}\n      {...props}\n      className={cn(avatarGroupClassNames.root, 'inline-flex items-center', className)}\n    >\n      {visible.map(({ key, node }, i) => (\n        <span\n          key={key}\n          className={cn(\n            avatarGroupClassNames.item,\n            'inline-flex rounded-full ring-2 ring-background',\n            i > 0 && '-ms-2',\n          )}\n        >\n          {node}\n        </span>\n      ))}\n      {overflow > 0 && (\n        <button\n          ref={triggerRefs}\n          type=\"button\"\n          aria-label={label}\n          aria-haspopup=\"dialog\"\n          aria-expanded={isOpen}\n          aria-controls={isOpen ? popupId : undefined}\n          className={cn(\n            avatarGroupClassNames.overflowButton,\n            'inline-flex shrink-0 cursor-pointer items-center justify-center rounded-full border-0 p-0 font-semibold',\n            'bg-muted text-muted-foreground ring-2 ring-background',\n            'not-disabled:not-aria-disabled:hover:bg-subtle-pressed',\n            focusRing,\n            visible.length > 0 && '-ms-2',\n            avatarSizeClasses[size],\n          )}\n          onClick={() => setOpen((value) => !value)}\n        >\n          +{overflow}\n        </button>\n      )}\n      {isOpen && (\n        <Portal layerId={layerId}>\n          <div\n            ref={surfaceRefs}\n            id={popupId}\n            role=\"dialog\"\n            aria-label={label}\n            tabIndex={-1}\n            data-state=\"open\"\n            {...floatingProps}\n            className={cn(\n              avatarGroupClassNames.surface,\n              'min-w-32 max-w-xs rounded-md border border-border bg-background p-2 text-body-1 text-foreground shadow-16',\n              focusRing,\n            )}\n            onKeyDown={handleSurfaceKeyDown}\n          >\n            <ul className={cn(avatarGroupClassNames.list, 'm-0 flex list-none flex-col gap-1 p-0')}>\n              {hidden.map(({ key, node }) => (\n                <li key={key} className={cn(avatarGroupClassNames.listItem, 'px-1 py-0.5')}>\n                  {getMemberName(node) ?? (rendersUnnamed(node) ? unnamedMemberLabel : node)}\n                </li>\n              ))}\n            </ul>\n          </div>\n        </Portal>\n      )}\n    </div>\n  );\n};\n\nAvatarGroup.displayName = 'AvatarGroup';\n"],"mappings":"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"}

package/dist/components/data-display/AvatarGroup.mjs

@@ -6,12 +6,12 @@ import { avatarGroupClassNames as i } from "../../lib/classNames.mjs";
 import { useId as a } from "../../hooks/useId.mjs";
 import { getTabbableElements as o } from "../../lib/focus.mjs";
 import { useMergedRefs as s } from "../../hooks/useMergedRefs.mjs";
-import { isInsideLayerTree as c } from "../../lib/layers.mjs";
-import { DismissLayerContext as l, useDismiss as u } from "../../hooks/useDismiss.mjs";
-import { Portal as d } from "../portal/Portal.mjs";
+import { usePopupPosition as c } from "../../hooks/usePopupPosition.mjs";
+import { isInsideLayerTree as l } from "../../lib/layers.mjs";
+import { DismissLayerContext as u, useDismiss as d } from "../../hooks/useDismiss.mjs";
+import { useRestoreFocus as f } from "../../hooks/useRestoreFocus.mjs";
 import "../../lib/styles.mjs";
-import { usePopupPosition as f } from "../../hooks/usePopupPosition.mjs";
-import { useRestoreFocus as p } from "../../hooks/useRestoreFocus.mjs";
+import { Portal as p } from "../portal/Portal.mjs";
 import { Avatar as m, avatarSizeClasses as h } from "./Avatar.mjs";
 import * as g from "react";
 import { jsx as _, jsxs as v } from "react/jsx-runtime";
@@ -41,18 +41,18 @@ var C = ({ max: n, size: m = "medium", overflowLabel: b, unnamedMemberLabel: C =
 	}, [F]);
 	let I = a("avatar-group-overflow"), [L, R] = g.useState(!1);
 	L && P === 0 && R(!1);
-	let z = L && P > 0, B = typeof b == "function" ? b(P) : b ?? `${P} more`, V = g.useContext(l), H = g.useRef(null), U = g.useRef(null), [W, G] = g.useState(null), { setReference: K, setFloating: q, floatingProps: J } = f({
+	let z = L && P > 0, B = typeof b == "function" ? b(P) : b ?? `${P} more`, V = g.useContext(u), H = g.useRef(null), U = g.useRef(null), [W, G] = g.useState(null), { setReference: K, setFloating: q, floatingProps: J } = c({
 		open: z,
 		side: "bottom",
 		align: "start"
-	}), { layerId: Y } = u({
+	}), { layerId: Y } = d({
 		open: z,
 		onDismiss: () => R(!1),
 		refs: [H, U],
 		anchorRef: H,
 		focusOutside: !0
 	});
-	p({
+	f({
 		enabled: z,
 		container: W,
 		triggerRef: H,
@@ -75,7 +75,7 @@ var C = ({ max: n, size: m = "medium", overflowLabel: b, unnamedMemberLabel: C =
 		let s = t;
 		if (!e.shiftKey) {
 			let e = o(t.ownerDocument.body).filter((e) => !n.contains(e)), r = e.indexOf(t);
-			s = r === -1 ? t : e[r + 1], s && V !== null && !c(V, s) && (s = void 0);
+			s = r === -1 ? t : e[r + 1], s && V !== null && !l(V, s) && (s = void 0);
 		}
 		R(!1), s && (e.preventDefault(), s.focus());
 	}, $ = z && N.some(({ node: e }) => x(e) === void 0 && S(e));
@@ -104,7 +104,7 @@ var C = ({ max: n, size: m = "medium", overflowLabel: b, unnamedMemberLabel: C =
 				onClick: () => R((e) => !e),
 				children: ["+", P]
 			}),
-			z && /* @__PURE__ */ _(d, {
+			z && /* @__PURE__ */ _(p, {
 				layerId: Y,
 				children: /* @__PURE__ */ _("div", {
 					ref: Z,

package/dist/components/data-display/InfoButton.cjs

@@ -1,2 +1,2 @@
-"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/cn.cjs"),n=require("../../lib/composeEventHandlers.cjs"),r=require("../../lib/classNames.cjs"),i=require("../../hooks/useEventCallback.cjs"),a=require("../../hooks/useId.cjs"),o=require("../../lib/focus.cjs"),s=require("../../hooks/useMergedRefs.cjs"),ee=require("../../lib/aria.cjs"),te=require("../../hooks/usePresence.cjs"),ne=require("../../hooks/useDismiss.cjs"),c=require("../portal/Portal.cjs"),l=require("../../lib/styles.cjs"),u=require("../../lib/icons.cjs"),d=require("../../hooks/usePopupPosition.cjs"),f=require("../../hooks/useRestoreFocus.cjs"),p=require("../../hooks/useHoverIntent.cjs"),m=require("../overlays/Popover.shared.cjs");let h=require("react");h=e.__toESM(h,1);let g=require("react/jsx-runtime");var _={small:{size:12,margin:`-my-1`},medium:{size:16,margin:`-my-0.5`},large:{size:20,margin:`-my-px`}},v=250,y=h.createContext(null);y.displayName=`InfoNoteClassContext`;var b=({info:e,size:b,openOnHover:x=!0,id:re,type:ie=`button`,"aria-label":ae,"aria-labelledby":S,"aria-describedby":C,className:w,disabled:T,onClick:oe,onFocus:se,onBlur:ce,onKeyDown:le,onPointerDown:ue,onMouseDown:de,onPointerEnter:fe,onPointerMove:pe,onPointerLeave:me,ref:he,...E})=>{let D=b===`small`||b===`large`?b:`medium`,O=a.useId(`info-button`),k=re||O,A=h.useContext(y),j=A?.buttonId===k?A.className:void 0,M=ae||`Information`,N=a.useId(`info-note`),P=a.useId(`info`),[F,I]=h.useState(null),L=F!==null,R=h.useRef(null),z=h.useRef(null),B=h.useRef(null),[ge,_e]=h.useState(null),[V,H]=h.useState(null),U=h.useRef(F);h.useLayoutEffect(()=>{U.current=F});let W=h.useRef(!1),G=h.useRef(!1),K=h.useRef(void 0),q=h.useRef(!1),{isMounted:J,ref:ve,presenceProps:ye}=te.usePresence(L),{setReference:be,setFloating:xe,floatingProps:Se,arrowStyles:Ce,side:we}=d.usePopupPosition({open:L,side:`top`,align:`center`,offset:8,arrowRef:B}),{layerId:Y}=ne.useDismiss({open:L,onDismiss:e=>{e!==`focus-outside`&&(W.current=!0),q.current=!1,Q(),I(null)},refs:[R,z],anchorRef:R,focusOutside:!0});f.useRestoreFocus({enabled:L,container:V,triggerRef:R,onlyIfFocusInside:!0,isHoverClose:()=>q.current});let{triggerHandlers:X,surfaceHandlers:Z,cancel:Q}=p.useHoverIntent({enabled:x&&!T,open:L,openDelay:v,closeDelay:v,trigger:ge,surface:V,onOpen:()=>{q.current=!1,I(e=>e??`hover`)},onClose:()=>{q.current=!0,I(e=>e===`hover`?null:e)},canClose:()=>U.current===`hover`&&!m.isFocusInSurfaceTree(V,Y)});h.useEffect(()=>()=>clearTimeout(K.current),[]),h.useEffect(()=>{if(!V)return;let e=e=>{let t=e.relatedTarget;!t||V.contains(t)||R.current?.contains(t)||(W.current=!1)};return V.addEventListener(`focusout`,e),()=>V.removeEventListener(`focusout`,e)},[V]);let Te=i.useEventCallback(()=>{Q(),q.current=!1;let e=F===`click`;e&&(W.current=!0),I(e?null:`click`)}),Ee=i.useEventCallback(()=>{!x||G.current||W.current&&!L||(q.current=!1,Q(),I(e=>e===`click`?e:`focus`))}),De=i.useEventCallback(e=>{let t=e.currentTarget,n=e.relatedTarget;n&&V?.contains(n)||(n||t.ownerDocument.activeElement!==t)&&(W.current=!1)}),$=i.useEventCallback(()=>{G.current=!0,clearTimeout(K.current),K.current=setTimeout(()=>{K.current=void 0,G.current=!1},0)}),Oe=e=>{if(e.key!==`Tab`||e.shiftKey||!L||!V)return;let t=o.getFirstTabbable(V);t&&(e.preventDefault(),t.focus())},ke=m.usePopoverTabOrder({enabled:L,surface:V,anchorRef:R,getPreviousStop:()=>R.current}),Ae=s.useMergedRefs(he,R,_e,be),je=s.useMergedRefs(z,H,xe,ve);return(0,g.jsxs)(g.Fragment,{children:[(0,g.jsx)(`button`,{type:ie,id:k,"data-size":D,...E,ref:Ae,disabled:T,"aria-label":M,"aria-labelledby":S,"aria-describedby":ee.joinIds(C,P),"aria-expanded":L,"aria-controls":L?N:void 0,className:t.cn(r.infoButtonClassNames.root,`inline-flex size-6 shrink-0 items-center justify-center rounded-full border-0 bg-transparent p-0 text-muted-foreground`,_[D].margin,`not-disabled:not-aria-disabled:hover:text-foreground`,l.focusRing,w),onClick:n.composeEventHandlers(oe,Te),onFocus:n.composeEventHandlers(se,Ee),onKeyDown:n.composeEventHandlers(le,Oe),onPointerEnter:n.composeEventHandlers(fe,X.onPointerEnter),onPointerMove:n.composeEventHandlers(pe,X.onPointerMove),onPointerLeave:n.composeEventHandlers(me,X.onPointerLeave),onBlur:n.composeEventHandlers(ce,De,{checkDefaultPrevented:!1}),onPointerDown:n.composeEventHandlers(ue,$,{checkDefaultPrevented:!1}),onMouseDown:n.composeEventHandlers(de,$,{checkDefaultPrevented:!1}),children:(0,g.jsx)(u.InfoIcon,{size:_[D].size})}),(0,g.jsx)(`span`,{id:J?void 0:P,hidden:!0,children:J?null:e}),J&&(0,g.jsx)(c.Portal,{layerId:Y,children:(0,g.jsxs)(`div`,{ref:je,id:N,role:`note`,"aria-labelledby":S||k,"data-wave-infolabel-surface":``,"data-state":L?`open`:`closed`,...ye,...Se,onKeyDown:ke,onPointerEnter:Z.onPointerEnter,onPointerLeave:Z.onPointerLeave,className:t.cn(r.infoButtonClassNames.info,j,`w-max max-w-[min(20rem,calc(100vw-1rem))] rounded-md border border-border bg-background px-3 py-2 text-caption-1 text-foreground shadow-16`),children:[(0,g.jsx)(m.PopoverBeak,{ref:B,side:we,style:Ce,"data-wave-popover-arrow":``,className:r.infoButtonClassNames.beak}),(0,g.jsx)(`div`,{id:P,children:e})]})})]})};b.displayName=`InfoButton`,exports.InfoButton=b,exports.InfoNoteClassContext=y;
+"use client";const e=require("../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/cn.cjs"),n=require("../../lib/composeEventHandlers.cjs"),r=require("../../lib/classNames.cjs"),i=require("../../hooks/useEventCallback.cjs"),a=require("../../hooks/useId.cjs"),o=require("../../lib/focus.cjs"),s=require("../../hooks/useMergedRefs.cjs"),ee=require("../../lib/aria.cjs"),te=require("../../hooks/usePresence.cjs"),ne=require("../../hooks/usePopupPosition.cjs"),c=require("../../hooks/useDismiss.cjs"),l=require("../../hooks/useRestoreFocus.cjs"),u=require("../../lib/styles.cjs"),d=require("../portal/Portal.cjs"),f=require("../../lib/icons.cjs"),p=require("../../hooks/useHoverIntent.cjs"),m=require("../overlays/Popover.shared.cjs");let h=require("react");h=e.__toESM(h,1);let g=require("react/jsx-runtime");var _={small:{size:12,margin:`-my-1`},medium:{size:16,margin:`-my-0.5`},large:{size:20,margin:`-my-px`}},v=250,y=h.createContext(null);y.displayName=`InfoNoteClassContext`;var b=({info:e,size:b,openOnHover:x=!0,id:re,type:ie=`button`,"aria-label":ae,"aria-labelledby":S,"aria-describedby":C,className:w,disabled:T,onClick:oe,onFocus:se,onBlur:ce,onKeyDown:le,onPointerDown:ue,onMouseDown:de,onPointerEnter:fe,onPointerMove:pe,onPointerLeave:me,ref:he,...E})=>{let D=b===`small`||b===`large`?b:`medium`,O=a.useId(`info-button`),k=re||O,A=h.useContext(y),j=A?.buttonId===k?A.className:void 0,M=ae||`Information`,N=a.useId(`info-note`),P=a.useId(`info`),[F,I]=h.useState(null),L=F!==null,R=h.useRef(null),z=h.useRef(null),B=h.useRef(null),[ge,_e]=h.useState(null),[V,H]=h.useState(null),U=h.useRef(F);h.useLayoutEffect(()=>{U.current=F});let W=h.useRef(!1),G=h.useRef(!1),K=h.useRef(void 0),q=h.useRef(!1),{isMounted:J,ref:ve,presenceProps:ye}=te.usePresence(L),{setReference:be,setFloating:xe,floatingProps:Se,arrowStyles:Ce,side:we}=ne.usePopupPosition({open:L,side:`top`,align:`center`,offset:8,arrowRef:B}),{layerId:Y}=c.useDismiss({open:L,onDismiss:e=>{e!==`focus-outside`&&(W.current=!0),q.current=!1,Q(),I(null)},refs:[R,z],anchorRef:R,focusOutside:!0});l.useRestoreFocus({enabled:L,container:V,triggerRef:R,onlyIfFocusInside:!0,isHoverClose:()=>q.current});let{triggerHandlers:X,surfaceHandlers:Z,cancel:Q}=p.useHoverIntent({enabled:x&&!T,open:L,openDelay:v,closeDelay:v,trigger:ge,surface:V,onOpen:()=>{q.current=!1,I(e=>e??`hover`)},onClose:()=>{q.current=!0,I(e=>e===`hover`?null:e)},canClose:()=>U.current===`hover`&&!m.isFocusInSurfaceTree(V,Y)});h.useEffect(()=>()=>clearTimeout(K.current),[]),h.useEffect(()=>{if(!V)return;let e=e=>{let t=e.relatedTarget;!t||V.contains(t)||R.current?.contains(t)||(W.current=!1)};return V.addEventListener(`focusout`,e),()=>V.removeEventListener(`focusout`,e)},[V]);let Te=i.useEventCallback(()=>{Q(),q.current=!1;let e=F===`click`;e&&(W.current=!0),I(e?null:`click`)}),Ee=i.useEventCallback(()=>{!x||G.current||W.current&&!L||(q.current=!1,Q(),I(e=>e===`click`?e:`focus`))}),De=i.useEventCallback(e=>{let t=e.currentTarget,n=e.relatedTarget;n&&V?.contains(n)||(n||t.ownerDocument.activeElement!==t)&&(W.current=!1)}),$=i.useEventCallback(()=>{G.current=!0,clearTimeout(K.current),K.current=setTimeout(()=>{K.current=void 0,G.current=!1},0)}),Oe=e=>{if(e.key!==`Tab`||e.shiftKey||!L||!V)return;let t=o.getFirstTabbable(V);t&&(e.preventDefault(),t.focus())},ke=m.usePopoverTabOrder({enabled:L,surface:V,anchorRef:R,getPreviousStop:()=>R.current}),Ae=s.useMergedRefs(he,R,_e,be),je=s.useMergedRefs(z,H,xe,ve);return(0,g.jsxs)(g.Fragment,{children:[(0,g.jsx)(`button`,{type:ie,id:k,"data-size":D,...E,ref:Ae,disabled:T,"aria-label":M,"aria-labelledby":S,"aria-describedby":ee.joinIds(C,P),"aria-expanded":L,"aria-controls":L?N:void 0,className:t.cn(r.infoButtonClassNames.root,`inline-flex size-6 shrink-0 items-center justify-center rounded-full border-0 bg-transparent p-0 text-muted-foreground`,_[D].margin,`not-disabled:not-aria-disabled:hover:text-foreground`,u.focusRing,w),onClick:n.composeEventHandlers(oe,Te),onFocus:n.composeEventHandlers(se,Ee),onKeyDown:n.composeEventHandlers(le,Oe),onPointerEnter:n.composeEventHandlers(fe,X.onPointerEnter),onPointerMove:n.composeEventHandlers(pe,X.onPointerMove),onPointerLeave:n.composeEventHandlers(me,X.onPointerLeave),onBlur:n.composeEventHandlers(ce,De,{checkDefaultPrevented:!1}),onPointerDown:n.composeEventHandlers(ue,$,{checkDefaultPrevented:!1}),onMouseDown:n.composeEventHandlers(de,$,{checkDefaultPrevented:!1}),children:(0,g.jsx)(f.InfoIcon,{size:_[D].size})}),(0,g.jsx)(`span`,{id:J?void 0:P,hidden:!0,children:J?null:e}),J&&(0,g.jsx)(d.Portal,{layerId:Y,children:(0,g.jsxs)(`div`,{ref:je,id:N,role:`note`,"aria-labelledby":S||k,"data-wave-infolabel-surface":``,"data-state":L?`open`:`closed`,...ye,...Se,onKeyDown:ke,onPointerEnter:Z.onPointerEnter,onPointerLeave:Z.onPointerLeave,className:t.cn(r.infoButtonClassNames.info,j,`w-max max-w-[min(20rem,calc(100vw-1rem))] rounded-md border border-border bg-background px-3 py-2 text-caption-1 text-foreground shadow-16`),children:[(0,g.jsx)(m.PopoverBeak,{ref:B,side:we,style:Ce,"data-wave-popover-arrow":``,className:r.infoButtonClassNames.beak}),(0,g.jsx)(`div`,{id:P,children:e})]})})]})};b.displayName=`InfoButton`,exports.InfoButton=b,exports.InfoNoteClassContext=y;
 //# sourceMappingURL=InfoButton.cjs.map