@seekalfred/primitives 0.5.1 → 0.7.1

package/dist/announcement-bar/announcement-bar.js

@@ -0,0 +1,364 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { mergeRefs } from "../lib/merge-refs.js";
+import { prefersReducedMotion, useExitBackstop, useIsomorphicLayoutEffect, useReducedMotion } from "../lib/motion.js";
+import { SwapText } from "../lib/swap-text.js";
+import { useHeightFollow } from "../lib/height-follow.js";
+import { usePausableTimeout } from "../lib/pausable-timeout.js";
+import { forwardRef, useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/announcement-bar/announcement-bar.tsx
+const storageKey = (id) => `alfred-announcement:${id}`;
+/** Forgets a remembered dismissal so the bar with this id shows again. */
+function clearAnnouncementDismissal(id) {
+	try {
+		window.localStorage.removeItem(storageKey(id));
+	} catch {}
+}
+function parts(ms) {
+	const total = Math.max(0, Math.floor(ms / 1e3));
+	return {
+		d: Math.floor(total / 86400),
+		h: Math.floor(total % 86400 / 3600),
+		m: Math.floor(total % 3600 / 60),
+		s: total % 60
+	};
+}
+const pad = (value) => String(value).padStart(2, "0");
+/** One character cell: a changed digit rises in while the old one lifts away, like a counter winding down. */
+const Digits = ({ value, pending }) => value.split("").map((char, index) => /* @__PURE__ */ jsx("span", {
+	className: "announcement-digit",
+	children: /* @__PURE__ */ jsx(SwapText, {
+		swapKey: pending ? "0" : char,
+		children: pending ? "0" : char
+	})
+}, value.length - index));
+function Countdown({ to, label, onEnd }) {
+	const target = new Date(to).getTime();
+	const [now, setNow] = useState(null);
+	const ended = useRef(false);
+	const endRef = useRef(onEnd);
+	useEffect(() => {
+		endRef.current = onEnd;
+	});
+	useEffect(() => {
+		let timer;
+		const tick = () => {
+			const current = Date.now();
+			setNow(current);
+			if (current >= target) {
+				if (!ended.current) {
+					ended.current = true;
+					endRef.current?.();
+				}
+				return;
+			}
+			timer = setTimeout(tick, 1e3 - current % 1e3 + 8);
+		};
+		timer = setTimeout(tick, 0);
+		return () => clearTimeout(timer);
+	}, [target]);
+	const pending = now === null;
+	const { d, h, m, s } = parts(pending ? 0 : target - now);
+	const spoken = pending ? "" : `${d ? `${d} days ` : ""}${h} hours ${m} minutes`;
+	return /* @__PURE__ */ jsxs("span", {
+		className: "announcement-countdown",
+		children: [label ? /* @__PURE__ */ jsx("span", { children: label }) : null, /* @__PURE__ */ jsxs("span", {
+			role: "timer",
+			"aria-live": "off",
+			"aria-label": spoken,
+			"data-pending": pending || void 0,
+			className: "announcement-time",
+			children: [
+				d ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+					/* @__PURE__ */ jsx(Digits, {
+						value: String(d),
+						pending
+					}),
+					/* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						className: "announcement-unit",
+						children: "d"
+					}),
+					/* @__PURE__ */ jsx("span", {
+						"aria-hidden": "true",
+						className: "announcement-gap"
+					})
+				] }) : null,
+				/* @__PURE__ */ jsx(Digits, {
+					value: pad(h),
+					pending
+				}),
+				/* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					className: "announcement-sep",
+					children: ":"
+				}),
+				/* @__PURE__ */ jsx(Digits, {
+					value: pad(m),
+					pending
+				}),
+				/* @__PURE__ */ jsx("span", {
+					"aria-hidden": "true",
+					className: "announcement-sep",
+					children: ":"
+				}),
+				/* @__PURE__ */ jsx(Digits, {
+					value: pad(s),
+					pending
+				})
+			]
+		})]
+	});
+}
+const Glyph = ({ path, size = 16 }) => /* @__PURE__ */ jsx("svg", {
+	width: size,
+	height: size,
+	viewBox: "0 0 16 16",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: 1.75,
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	"aria-hidden": "true",
+	children: /* @__PURE__ */ jsx("path", { d: path })
+});
+const AnnouncementBar = forwardRef(function AnnouncementBar({ messages, id, open: openProp, defaultOpen = true, onOpenChange, index: indexProp, defaultIndex = 0, onIndexChange, interval = 6e3, autoPlay = true, controls = false, dismissible = true, tone = "neutral", onAction, onCountdownEnd, label = "Announcements", className }, ref) {
+	const uid = useId();
+	const reduced = useReducedMotion();
+	const total = messages.length;
+	const [openInternal, setOpenInternal] = useState(defaultOpen);
+	const [remembered, setRemembered] = useState(false);
+	const wanted = openProp ?? (openInternal && !remembered);
+	const [rendered, setRendered] = useState(wanted);
+	const [shown, setShown] = useState(wanted);
+	if (wanted && !rendered) setRendered(true);
+	if (!wanted && shown) setShown(false);
+	useEffect(() => {
+		if (wanted && rendered && !shown) {
+			const frame = requestAnimationFrame(() => setShown(true));
+			return () => cancelAnimationFrame(frame);
+		}
+	}, [
+		wanted,
+		rendered,
+		shown
+	]);
+	const leaving = rendered && !wanted;
+	const finish = useCallback(() => setRendered(false), []);
+	useExitBackstop(leaving, finish, 900);
+	useIsomorphicLayoutEffect(() => {
+		if (leaving && prefersReducedMotion()) finish();
+	}, [leaving, finish]);
+	useIsomorphicLayoutEffect(() => {
+		if (!id || openProp !== void 0) return;
+		let stored = false;
+		try {
+			stored = window.localStorage.getItem(storageKey(id)) === "dismissed";
+		} catch {}
+		if (stored) {
+			setRemembered(true);
+			setRendered(false);
+			setShown(false);
+		}
+	}, [id, openProp]);
+	function dismiss() {
+		if (id) try {
+			window.localStorage.setItem(storageKey(id), "dismissed");
+		} catch {}
+		if (openProp === void 0) setOpenInternal(false);
+		onOpenChange?.(false);
+	}
+	const [indexInternal, setIndexInternal] = useState(defaultIndex);
+	const current = total ? ((indexProp ?? indexInternal) % total + total) % total : 0;
+	const [direction, setDirection] = useState(1);
+	function go(step) {
+		if (total < 2) return;
+		const next = ((current + step) % total + total) % total;
+		setDirection(step > 0 ? 1 : -1);
+		if (indexProp === void 0) setIndexInternal(next);
+		onIndexChange?.(next);
+	}
+	const [userPaused, setUserPaused] = useState(false);
+	const [hovered, setHovered] = useState(false);
+	const [focused, setFocused] = useState(false);
+	const [hidden, setHidden] = useState(false);
+	useEffect(() => {
+		const read = () => setHidden(document.visibilityState === "hidden");
+		document.addEventListener("visibilitychange", read);
+		return () => document.removeEventListener("visibilitychange", read);
+	}, []);
+	const rotating = autoPlay && !reduced && total > 1;
+	const held = hovered || focused || userPaused;
+	const setHeld = usePausableTimeout(rotating && wanted ? interval : 0, current, () => go(1));
+	useEffect(() => {
+		setHeld(held);
+	}, [held, setHeld]);
+	const frame = useRef(null);
+	const content = useRef(null);
+	useHeightFollow(frame, content, String(current));
+	const bar = useRef(null);
+	const barRef = useMemo(() => mergeRefs(ref, bar), [ref]);
+	useIsomorphicLayoutEffect(() => {
+		bar.current?.toggleAttribute("inert", leaving);
+	}, [leaving]);
+	const announcement = messages[current];
+	if (!rendered || !announcement) return null;
+	const navigable = controls && total > 1;
+	const controlCount = (navigable ? 2 + (rotating ? 1 : 0) : 0) + (dismissible ? 1 : 0);
+	const { action, countdown } = announcement;
+	const cta = action ? action.href ? /* @__PURE__ */ jsxs("a", {
+		href: action.href,
+		className: "announcement-cta",
+		onClick: () => {
+			action.onClick?.();
+			onAction?.(announcement);
+		},
+		children: [action.label, /* @__PURE__ */ jsx(Glyph, {
+			path: "M3 8h10M9 4l4 4-4 4",
+			size: 14
+		})]
+	}) : /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		className: "announcement-cta",
+		onClick: () => {
+			action.onClick?.();
+			onAction?.(announcement);
+		},
+		children: [action.label, /* @__PURE__ */ jsx(Glyph, {
+			path: "M3 8h10M9 4l4 4-4 4",
+			size: 14
+		})]
+	}) : null;
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "announcement-presence",
+		"data-shown": shown || void 0,
+		onTransitionEnd: (event) => {
+			if (leaving && event.target === event.currentTarget && event.propertyName === "grid-template-rows") finish();
+		},
+		className: "alert-presence announcement-frame",
+		children: /* @__PURE__ */ jsxs("section", {
+			ref: barRef,
+			"data-slot": "announcement-bar",
+			"data-tone": tone,
+			"aria-label": label,
+			"aria-roledescription": total > 1 ? "carousel" : void 0,
+			"aria-hidden": leaving || void 0,
+			className: cn("announcement-bar", className),
+			style: { "--controls": controlCount },
+			onPointerEnter: (event) => event.pointerType === "mouse" && setHovered(true),
+			onPointerLeave: () => setHovered(false),
+			onFocus: (event) => setFocused(event.target.matches(":focus-visible") && !event.target.closest("[data-pause]")),
+			onBlur: (event) => {
+				if (!event.currentTarget.contains(event.relatedTarget)) setFocused(false);
+			},
+			children: [
+				/* @__PURE__ */ jsx("div", { "aria-hidden": "true" }),
+				/* @__PURE__ */ jsx("div", {
+					ref: frame,
+					id: `${uid}-slides`,
+					"aria-live": rotating && !held ? "off" : "polite",
+					"aria-atomic": "false",
+					className: "announcement-viewport height-follow",
+					children: /* @__PURE__ */ jsx("div", {
+						ref: content,
+						children: /* @__PURE__ */ jsx(SwapText, {
+							swapKey: announcement.id,
+							dir: direction,
+							className: "block",
+							children: /* @__PURE__ */ jsx("div", {
+								role: total > 1 ? "group" : void 0,
+								"aria-roledescription": total > 1 ? "slide" : void 0,
+								"aria-label": total > 1 ? `${current + 1} of ${total}` : void 0,
+								className: "announcement-face",
+								children: /* @__PURE__ */ jsxs("p", {
+									className: "announcement-message",
+									children: [
+										/* @__PURE__ */ jsx("span", { children: announcement.message }),
+										countdown ? /* @__PURE__ */ jsx(Countdown, {
+											to: countdown.to,
+											label: countdown.label,
+											onEnd: () => onCountdownEnd?.(announcement)
+										}) : null,
+										cta
+									]
+								})
+							})
+						})
+					})
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "announcement-controls",
+					children: [navigable ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+						/* @__PURE__ */ jsx("button", {
+							type: "button",
+							"aria-label": "Previous announcement",
+							"aria-controls": `${uid}-slides`,
+							className: "announcement-icon",
+							onClick: () => go(-1),
+							children: /* @__PURE__ */ jsx(Glyph, { path: "M4 10l4-4 4 4" })
+						}),
+						rotating ? /* @__PURE__ */ jsxs("button", {
+							type: "button",
+							"aria-label": userPaused ? "Resume announcements" : "Pause announcements",
+							"aria-pressed": userPaused,
+							"data-pause": "",
+							className: "announcement-icon",
+							onClick: () => setUserPaused(!userPaused),
+							children: [/* @__PURE__ */ jsxs("svg", {
+								viewBox: "0 0 20 20",
+								fill: "none",
+								stroke: "currentColor",
+								strokeWidth: 1.75,
+								"aria-hidden": "true",
+								className: "announcement-ring",
+								children: [/* @__PURE__ */ jsx("circle", {
+									cx: "10",
+									cy: "10",
+									r: "8",
+									pathLength: 1,
+									className: "announcement-ring-track"
+								}), /* @__PURE__ */ jsx("circle", {
+									cx: "10",
+									cy: "10",
+									r: "8",
+									pathLength: 1,
+									strokeLinecap: "round",
+									className: "announcement-ring-fill",
+									style: {
+										animationDuration: `${interval}ms`,
+										animationPlayState: held || hidden ? "paused" : "running"
+									}
+								}, current)]
+							}), /* @__PURE__ */ jsx("svg", {
+								viewBox: "0 0 16 16",
+								fill: "currentColor",
+								"aria-hidden": "true",
+								className: "announcement-ring-icon",
+								children: userPaused ? /* @__PURE__ */ jsx("path", { d: "M6 4.5v7l5.5-3.5Z" }) : /* @__PURE__ */ jsx("path", { d: "M5.5 4.5h1.8v7H5.5ZM8.7 4.5h1.8v7H8.7Z" })
+							})]
+						}) : null,
+						/* @__PURE__ */ jsx("button", {
+							type: "button",
+							"aria-label": "Next announcement",
+							"aria-controls": `${uid}-slides`,
+							className: "announcement-icon",
+							onClick: () => go(1),
+							children: /* @__PURE__ */ jsx(Glyph, { path: "M4 6l4 4 4-4" })
+						})
+					] }) : null, dismissible ? /* @__PURE__ */ jsx("button", {
+						type: "button",
+						"aria-label": "Dismiss",
+						className: "announcement-icon",
+						onClick: dismiss,
+						children: /* @__PURE__ */ jsx(Glyph, { path: "M4 4l8 8M12 4l-8 8" })
+					}) : null]
+				})
+			]
+		})
+	});
+});
+//#endregion
+export { AnnouncementBar, clearAnnouncementDismissal };
+
+//# sourceMappingURL=announcement-bar.js.map

package/dist/announcement-bar/announcement-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"announcement-bar.js","names":[],"sources":["../../src/announcement-bar/announcement-bar.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  forwardRef,\n  useCallback,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n  type CSSProperties,\n  type ReactNode,\n} from \"react\";\n\nimport { cn } from \"../lib/cn.js\";\nimport { useHeightFollow } from \"../lib/height-follow.js\";\nimport { mergeRefs } from \"../lib/merge-refs.js\";\nimport { prefersReducedMotion, useExitBackstop, useIsomorphicLayoutEffect, useReducedMotion } from \"../lib/motion.js\";\nimport { usePausableTimeout } from \"../lib/pausable-timeout.js\";\nimport { SwapText } from \"../lib/swap-text.js\";\n\nexport interface AnnouncementAction {\n  label: string;\n  /** Renders a link. Without it the action is a button. */\n  href?: string;\n  onClick?: () => void;\n}\n\nexport interface Announcement {\n  /** Stable id, reported to callbacks. */\n  id: string;\n  message: ReactNode;\n  action?: AnnouncementAction;\n  /** Counts down to a moment, for example the end of a sale. */\n  countdown?: { to: Date | string | number; label?: string };\n}\n\n/**\n * AnnouncementBar: a slim bar for the top of a page.\n *\n * It can rotate several messages: the next one rises in from below (the\n * previous one from above) while the bar follows the new height. Rotation pauses\n * on hover, keyboard focus, a hidden tab and, with the `controls`, a Pause\n * button whose ring is the clock; it is off under reduced motion. Messages can\n * carry a call to action and a live countdown whose digits roll. Dismissing\n * collapses the bar's height so the page below eases up, and with an `id` the\n * dismissal is remembered in `localStorage`. While rotation runs the message is\n * not announced on each change; when it holds, changes are announced politely.\n */\nexport interface AnnouncementBarProps {\n  messages: Announcement[];\n  /** Remembers dismissal under this id. Change the id to show a new campaign to everyone again. */\n  id?: string;\n  /** Whether the bar is shown. Leave it out to let the component manage it. */\n  open?: boolean;\n  /** @default true */\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  /** Index of the visible message. */\n  index?: number;\n  /** @default 0 */\n  defaultIndex?: number;\n  onIndexChange?: (index: number) => void;\n  /** Milliseconds each message stays before the next one. @default 6000 */\n  interval?: number;\n  /** Rotate automatically. Off under reduced motion. @default true */\n  autoPlay?: boolean;\n  /** Show previous, next and pause controls when there are several messages. By default only the close button shows. @default false */\n  controls?: boolean;\n  /** @default true */\n  dismissible?: boolean;\n  /** `inverted` is the foreground colour as the fill. @default \"neutral\" */\n  tone?: \"neutral\" | \"inverted\";\n  onAction?: (announcement: Announcement) => void;\n  onCountdownEnd?: (announcement: Announcement) => void;\n  /** Accessible name of the region. @default \"Announcements\" */\n  label?: string;\n  /** Extra classes for the bar. Merged last. */\n  className?: string;\n}\n\nconst storageKey = (id: string) => `alfred-announcement:${id}`;\n\n/** Forgets a remembered dismissal so the bar with this id shows again. */\nexport function clearAnnouncementDismissal(id: string) {\n  try {\n    window.localStorage.removeItem(storageKey(id));\n  } catch {\n    // Storage can be blocked.\n  }\n}\n\nfunction parts(ms: number) {\n  const total = Math.max(0, Math.floor(ms / 1000));\n  return { d: Math.floor(total / 86400), h: Math.floor((total % 86400) / 3600), m: Math.floor((total % 3600) / 60), s: total % 60 };\n}\nconst pad = (value: number) => String(value).padStart(2, \"0\");\n\n/** One character cell: a changed digit rises in while the old one lifts away, like a counter winding down. */\nconst Digits = ({ value, pending }: { value: string; pending: boolean }) =>\n  value.split(\"\").map((char, index) => (\n    <span key={value.length - index} className=\"announcement-digit\">\n      <SwapText swapKey={pending ? \"0\" : char}>{pending ? \"0\" : char}</SwapText>\n    </span>\n  ));\n\nfunction Countdown({ to, label, onEnd }: { to: Date | string | number; label?: string; onEnd?: () => void }) {\n  const target = new Date(to).getTime();\n  const [now, setNow] = useState<number | null>(null);\n  const ended = useRef(false);\n  const endRef = useRef(onEnd);\n  useEffect(() => {\n    endRef.current = onEnd;\n  });\n  useEffect(() => {\n    let timer: ReturnType<typeof setTimeout>;\n    const tick = () => {\n      const current = Date.now();\n      setNow(current);\n      if (current >= target) {\n        if (!ended.current) {\n          ended.current = true;\n          endRef.current?.();\n        }\n        return;\n      }\n      // Wake just after each whole second, so the digits change on the beat.\n      timer = setTimeout(tick, 1000 - (current % 1000) + 8);\n    };\n    timer = setTimeout(tick, 0);\n    return () => clearTimeout(timer);\n  }, [target]);\n  const pending = now === null;\n  const { d, h, m, s } = parts(pending ? 0 : target - now);\n  const spoken = pending ? \"\" : `${d ? `${d} days ` : \"\"}${h} hours ${m} minutes`;\n  return (\n    <span className=\"announcement-countdown\">\n      {label ? <span>{label}</span> : null}\n      <span role=\"timer\" aria-live=\"off\" aria-label={spoken} data-pending={pending || undefined} className=\"announcement-time\">\n        {d ? (\n          <>\n            <Digits value={String(d)} pending={pending} />\n            <span aria-hidden=\"true\" className=\"announcement-unit\">\n              d\n            </span>\n            <span aria-hidden=\"true\" className=\"announcement-gap\" />\n          </>\n        ) : null}\n        <Digits value={pad(h)} pending={pending} />\n        <span aria-hidden=\"true\" className=\"announcement-sep\">:</span>\n        <Digits value={pad(m)} pending={pending} />\n        <span aria-hidden=\"true\" className=\"announcement-sep\">:</span>\n        <Digits value={pad(s)} pending={pending} />\n      </span>\n    </span>\n  );\n}\n\nconst Glyph = ({ path, size = 16 }: { path: string; size?: number }) => (\n  <svg width={size} height={size} viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" strokeWidth={1.75} strokeLinecap=\"round\" strokeLinejoin=\"round\" aria-hidden=\"true\">\n    <path d={path} />\n  </svg>\n);\n\nexport const AnnouncementBar = forwardRef<HTMLElement, AnnouncementBarProps>(function AnnouncementBar(\n  {\n    messages,\n    id,\n    open: openProp,\n    defaultOpen = true,\n    onOpenChange,\n    index: indexProp,\n    defaultIndex = 0,\n    onIndexChange,\n    interval = 6000,\n    autoPlay = true,\n    controls = false,\n    dismissible = true,\n    tone = \"neutral\",\n    onAction,\n    onCountdownEnd,\n    label = \"Announcements\",\n    className,\n  },\n  ref,\n) {\n  const uid = useId();\n  const reduced = useReducedMotion();\n  const total = messages.length;\n\n  // Open: controlled, or internal and closed at once when this id was dismissed before.\n  const [openInternal, setOpenInternal] = useState(defaultOpen);\n  const [remembered, setRemembered] = useState(false);\n  const wanted = openProp ?? (openInternal && !remembered);\n\n  // Presence: a bar that comes and goes collapses its height rather than vanishing (the alert-presence utility).\n  const [rendered, setRendered] = useState(wanted);\n  const [shown, setShown] = useState(wanted);\n  if (wanted && !rendered) setRendered(true);\n  if (!wanted && shown) setShown(false);\n  useEffect(() => {\n    // A newly shown bar mounts collapsed and opens a frame later, so it grows rather than appears.\n    if (wanted && rendered && !shown) {\n      const frame = requestAnimationFrame(() => setShown(true));\n      return () => cancelAnimationFrame(frame);\n    }\n  }, [wanted, rendered, shown]);\n  const leaving = rendered && !wanted;\n  const finish = useCallback(() => setRendered(false), []);\n  useExitBackstop(leaving, finish, 900);\n  useIsomorphicLayoutEffect(() => {\n    if (leaving && prefersReducedMotion()) finish();\n  }, [leaving, finish]);\n\n  // Storage is only readable on the client; a dismissed bar is hidden before paint so it never flashes.\n  useIsomorphicLayoutEffect(() => {\n    if (!id || openProp !== undefined) return;\n    let stored = false;\n    try {\n      stored = window.localStorage.getItem(storageKey(id)) === \"dismissed\";\n    } catch {\n      // Storage can be blocked.\n    }\n    if (stored) {\n      setRemembered(true);\n      setRendered(false);\n      setShown(false);\n    }\n  }, [id, openProp]);\n\n  function dismiss() {\n    if (id) {\n      try {\n        window.localStorage.setItem(storageKey(id), \"dismissed\");\n      } catch {\n        // Storage can be blocked.\n      }\n    }\n    if (openProp === undefined) setOpenInternal(false);\n    onOpenChange?.(false);\n  }\n\n  // Rotation.\n  const [indexInternal, setIndexInternal] = useState(defaultIndex);\n  const current = total ? (((indexProp ?? indexInternal) % total) + total) % total : 0;\n  const [direction, setDirection] = useState(1);\n  function go(step: number) {\n    if (total < 2) return;\n    const next = (((current + step) % total) + total) % total;\n    setDirection(step > 0 ? 1 : -1);\n    if (indexProp === undefined) setIndexInternal(next);\n    onIndexChange?.(next);\n  }\n\n  const [userPaused, setUserPaused] = useState(false);\n  const [hovered, setHovered] = useState(false);\n  const [focused, setFocused] = useState(false);\n  const [hidden, setHidden] = useState(false);\n  useEffect(() => {\n    const read = () => setHidden(document.visibilityState === \"hidden\");\n    document.addEventListener(\"visibilitychange\", read);\n    return () => document.removeEventListener(\"visibilitychange\", read);\n  }, []);\n  const rotating = autoPlay && !reduced && total > 1;\n  const held = hovered || focused || userPaused;\n  // The clock holds while the viewer is looking, and finishes the rest of the time when released. It also holds in a hidden tab.\n  const setHeld = usePausableTimeout(rotating && wanted ? interval : 0, current, () => go(1));\n  useEffect(() => {\n    setHeld(held);\n  }, [held, setHeld]);\n\n  // The bar follows the height of the current message, which can wrap on narrow screens.\n  const frame = useRef<HTMLDivElement>(null);\n  const content = useRef<HTMLDivElement>(null);\n  useHeightFollow(frame, content, String(current));\n\n  // A bar on its way out is out of the tab order and the accessibility tree at once.\n  const bar = useRef<HTMLElement | null>(null);\n  const barRef = useMemo(() => mergeRefs(ref, bar), [ref]);\n  useIsomorphicLayoutEffect(() => {\n    bar.current?.toggleAttribute(\"inert\", leaving);\n  }, [leaving]);\n\n  const announcement = messages[current];\n  if (!rendered || !announcement) return null;\n  const navigable = controls && total > 1;\n  const controlCount = (navigable ? 2 + (rotating ? 1 : 0) : 0) + (dismissible ? 1 : 0);\n  const { action, countdown } = announcement;\n  const cta = action ? (\n    action.href ? (\n      <a\n        href={action.href}\n        className=\"announcement-cta\"\n        onClick={() => {\n          action.onClick?.();\n          onAction?.(announcement);\n        }}\n      >\n        {action.label}\n        <Glyph path=\"M3 8h10M9 4l4 4-4 4\" size={14} />\n      </a>\n    ) : (\n      <button\n        type=\"button\"\n        className=\"announcement-cta\"\n        onClick={() => {\n          action.onClick?.();\n          onAction?.(announcement);\n        }}\n      >\n        {action.label}\n        <Glyph path=\"M3 8h10M9 4l4 4-4 4\" size={14} />\n      </button>\n    )\n  ) : null;\n\n  return (\n    <div\n      data-slot=\"announcement-presence\"\n      data-shown={shown || undefined}\n      onTransitionEnd={(event) => {\n        if (leaving && event.target === event.currentTarget && event.propertyName === \"grid-template-rows\") finish();\n      }}\n      className=\"alert-presence announcement-frame\"\n    >\n      <section\n        ref={barRef}\n        data-slot=\"announcement-bar\"\n        data-tone={tone}\n        aria-label={label}\n        aria-roledescription={total > 1 ? \"carousel\" : undefined}\n        aria-hidden={leaving || undefined}\n        className={cn(\"announcement-bar\", className)}\n        style={{ \"--controls\": controlCount } as CSSProperties}\n        onPointerEnter={(event) => event.pointerType === \"mouse\" && setHovered(true)}\n        onPointerLeave={() => setHovered(false)}\n        // Keyboard focus holds the clock; a mouse click that leaves focus on a button does not, and neither does the pause button itself.\n        onFocus={(event) => setFocused(event.target.matches(\":focus-visible\") && !event.target.closest(\"[data-pause]\"))}\n        onBlur={(event) => {\n          if (!event.currentTarget.contains(event.relatedTarget)) setFocused(false);\n        }}\n      >\n        <div aria-hidden=\"true\" />\n        <div\n          ref={frame}\n          id={`${uid}-slides`}\n          aria-live={rotating && !held ? \"off\" : \"polite\"}\n          aria-atomic=\"false\"\n          className=\"announcement-viewport height-follow\"\n        >\n          <div ref={content}>\n            <SwapText swapKey={announcement.id} dir={direction} className=\"block\">\n              <div\n                role={total > 1 ? \"group\" : undefined}\n                aria-roledescription={total > 1 ? \"slide\" : undefined}\n                aria-label={total > 1 ? `${current + 1} of ${total}` : undefined}\n                className=\"announcement-face\"\n              >\n                <p className=\"announcement-message\">\n                  <span>{announcement.message}</span>\n                  {countdown ? <Countdown to={countdown.to} label={countdown.label} onEnd={() => onCountdownEnd?.(announcement)} /> : null}\n                  {cta}\n                </p>\n              </div>\n            </SwapText>\n          </div>\n        </div>\n        <div className=\"announcement-controls\">\n          {navigable ? (\n            <>\n              <button type=\"button\" aria-label=\"Previous announcement\" aria-controls={`${uid}-slides`} className=\"announcement-icon\" onClick={() => go(-1)}>\n                <Glyph path=\"M4 10l4-4 4 4\" />\n              </button>\n              {rotating ? (\n                <button\n                  type=\"button\"\n                  aria-label={userPaused ? \"Resume announcements\" : \"Pause announcements\"}\n                  aria-pressed={userPaused}\n                  data-pause=\"\"\n                  className=\"announcement-icon\"\n                  onClick={() => setUserPaused(!userPaused)}\n                >\n                  <svg viewBox=\"0 0 20 20\" fill=\"none\" stroke=\"currentColor\" strokeWidth={1.75} aria-hidden=\"true\" className=\"announcement-ring\">\n                    <circle cx=\"10\" cy=\"10\" r=\"8\" pathLength={1} className=\"announcement-ring-track\" />\n                    <circle\n                      key={current}\n                      cx=\"10\"\n                      cy=\"10\"\n                      r=\"8\"\n                      pathLength={1}\n                      strokeLinecap=\"round\"\n                      className=\"announcement-ring-fill\"\n                      style={{ animationDuration: `${interval}ms`, animationPlayState: held || hidden ? \"paused\" : \"running\" }}\n                    />\n                  </svg>\n                  <svg viewBox=\"0 0 16 16\" fill=\"currentColor\" aria-hidden=\"true\" className=\"announcement-ring-icon\">\n                    {userPaused ? <path d=\"M6 4.5v7l5.5-3.5Z\" /> : <path d=\"M5.5 4.5h1.8v7H5.5ZM8.7 4.5h1.8v7H8.7Z\" />}\n                  </svg>\n                </button>\n              ) : null}\n              <button type=\"button\" aria-label=\"Next announcement\" aria-controls={`${uid}-slides`} className=\"announcement-icon\" onClick={() => go(1)}>\n                <Glyph path=\"M4 6l4 4 4-4\" />\n              </button>\n            </>\n          ) : null}\n          {dismissible ? (\n            <button type=\"button\" aria-label=\"Dismiss\" className=\"announcement-icon\" onClick={dismiss}>\n              <Glyph path=\"M4 4l8 8M12 4l-8 8\" />\n            </button>\n          ) : null}\n        </div>\n      </section>\n    </div>\n  );\n});\n"],"mappings":";;;;;;;;;;AAiFA,MAAM,cAAc,OAAe,uBAAuB;;AAG1D,SAAgB,2BAA2B,IAAY;CACrD,IAAI;EACF,OAAO,aAAa,WAAW,WAAW,EAAE,CAAC;CAC/C,QAAQ,CAER;AACF;AAEA,SAAS,MAAM,IAAY;CACzB,MAAM,QAAQ,KAAK,IAAI,GAAG,KAAK,MAAM,KAAK,GAAI,CAAC;CAC/C,OAAO;EAAE,GAAG,KAAK,MAAM,QAAQ,KAAK;EAAG,GAAG,KAAK,MAAO,QAAQ,QAAS,IAAI;EAAG,GAAG,KAAK,MAAO,QAAQ,OAAQ,EAAE;EAAG,GAAG,QAAQ;CAAG;AAClI;AACA,MAAM,OAAO,UAAkB,OAAO,KAAK,CAAC,CAAC,SAAS,GAAG,GAAG;;AAG5D,MAAM,UAAU,EAAE,OAAO,cACvB,MAAM,MAAM,EAAE,CAAC,CAAC,KAAK,MAAM,UACzB,oBAAC,QAAD;CAAiC,WAAU;CACzC,UAAA,oBAAC,UAAD;EAAU,SAAS,UAAU,MAAM;EAAO,UAAA,UAAU,MAAM;CAAe,CAAA;AACrE,GAFK,MAAM,SAAS,KAEpB,CACP;AAEH,SAAS,UAAU,EAAE,IAAI,OAAO,SAA6E;CAC3G,MAAM,SAAS,IAAI,KAAK,EAAE,CAAC,CAAC,QAAQ;CACpC,MAAM,CAAC,KAAK,UAAU,SAAwB,IAAI;CAClD,MAAM,QAAQ,OAAO,KAAK;CAC1B,MAAM,SAAS,OAAO,KAAK;CAC3B,gBAAgB;EACd,OAAO,UAAU;CACnB,CAAC;CACD,gBAAgB;EACd,IAAI;EACJ,MAAM,aAAa;GACjB,MAAM,UAAU,KAAK,IAAI;GACzB,OAAO,OAAO;GACd,IAAI,WAAW,QAAQ;IACrB,IAAI,CAAC,MAAM,SAAS;KAClB,MAAM,UAAU;KAChB,OAAO,UAAU;IACnB;IACA;GACF;GAEA,QAAQ,WAAW,MAAM,MAAQ,UAAU,MAAQ,CAAC;EACtD;EACA,QAAQ,WAAW,MAAM,CAAC;EAC1B,aAAa,aAAa,KAAK;CACjC,GAAG,CAAC,MAAM,CAAC;CACX,MAAM,UAAU,QAAQ;CACxB,MAAM,EAAE,GAAG,GAAG,GAAG,MAAM,MAAM,UAAU,IAAI,SAAS,GAAG;CACvD,MAAM,SAAS,UAAU,KAAK,GAAG,IAAI,GAAG,EAAE,UAAU,KAAK,EAAE,SAAS,EAAE;CACtE,OACE,qBAAC,QAAD;EAAM,WAAU;EAAhB,UAAA,CACG,QAAQ,oBAAC,QAAD,EAAA,UAAO,MAAY,CAAA,IAAI,MAChC,qBAAC,QAAD;GAAM,MAAK;GAAQ,aAAU;GAAM,cAAY;GAAQ,gBAAc,WAAW,KAAA;GAAW,WAAU;GAArG,UAAA;IACG,IACC,qBAAA,YAAA,EAAA,UAAA;KACE,oBAAC,QAAD;MAAQ,OAAO,OAAO,CAAC;MAAY;KAAU,CAAA;KAC7C,oBAAC,QAAD;MAAM,eAAY;MAAO,WAAU;MAAoB,UAAA;KAEjD,CAAA;KACN,oBAAC,QAAD;MAAM,eAAY;MAAO,WAAU;KAAoB,CAAA;IACvD,EAAA,CAAA,IACA;IACJ,oBAAC,QAAD;KAAQ,OAAO,IAAI,CAAC;KAAY;IAAU,CAAA;IAC1C,oBAAC,QAAD;KAAM,eAAY;KAAO,WAAU;KAAmB,UAAA;IAAO,CAAA;IAC7D,oBAAC,QAAD;KAAQ,OAAO,IAAI,CAAC;KAAY;IAAU,CAAA;IAC1C,oBAAC,QAAD;KAAM,eAAY;KAAO,WAAU;KAAmB,UAAA;IAAO,CAAA;IAC7D,oBAAC,QAAD;KAAQ,OAAO,IAAI,CAAC;KAAY;IAAU,CAAA;GACtC;EACF,CAAA,CAAA;;AAEV;AAEA,MAAM,SAAS,EAAE,MAAM,OAAO,SAC5B,oBAAC,OAAD;CAAK,OAAO;CAAM,QAAQ;CAAM,SAAQ;CAAY,MAAK;CAAO,QAAO;CAAe,aAAa;CAAM,eAAc;CAAQ,gBAAe;CAAQ,eAAY;CAChK,UAAA,oBAAC,QAAD,EAAM,GAAG,KAAO,CAAA;AACb,CAAA;AAGP,MAAa,kBAAkB,WAA8C,SAAS,gBACpF,EACE,UACA,IACA,MAAM,UACN,cAAc,MACd,cACA,OAAO,WACP,eAAe,GACf,eACA,WAAW,KACX,WAAW,MACX,WAAW,OACX,cAAc,MACd,OAAO,WACP,UACA,gBACA,QAAQ,iBACR,aAEF,KACA;CACA,MAAM,MAAM,MAAM;CAClB,MAAM,UAAU,iBAAiB;CACjC,MAAM,QAAQ,SAAS;CAGvB,MAAM,CAAC,cAAc,mBAAmB,SAAS,WAAW;CAC5D,MAAM,CAAC,YAAY,iBAAiB,SAAS,KAAK;CAClD,MAAM,SAAS,aAAa,gBAAgB,CAAC;CAG7C,MAAM,CAAC,UAAU,eAAe,SAAS,MAAM;CAC/C,MAAM,CAAC,OAAO,YAAY,SAAS,MAAM;CACzC,IAAI,UAAU,CAAC,UAAU,YAAY,IAAI;CACzC,IAAI,CAAC,UAAU,OAAO,SAAS,KAAK;CACpC,gBAAgB;EAEd,IAAI,UAAU,YAAY,CAAC,OAAO;GAChC,MAAM,QAAQ,4BAA4B,SAAS,IAAI,CAAC;GACxD,aAAa,qBAAqB,KAAK;EACzC;CACF,GAAG;EAAC;EAAQ;EAAU;CAAK,CAAC;CAC5B,MAAM,UAAU,YAAY,CAAC;CAC7B,MAAM,SAAS,kBAAkB,YAAY,KAAK,GAAG,CAAC,CAAC;CACvD,gBAAgB,SAAS,QAAQ,GAAG;CACpC,gCAAgC;EAC9B,IAAI,WAAW,qBAAqB,GAAG,OAAO;CAChD,GAAG,CAAC,SAAS,MAAM,CAAC;CAGpB,gCAAgC;EAC9B,IAAI,CAAC,MAAM,aAAa,KAAA,GAAW;EACnC,IAAI,SAAS;EACb,IAAI;GACF,SAAS,OAAO,aAAa,QAAQ,WAAW,EAAE,CAAC,MAAM;EAC3D,QAAQ,CAER;EACA,IAAI,QAAQ;GACV,cAAc,IAAI;GAClB,YAAY,KAAK;GACjB,SAAS,KAAK;EAChB;CACF,GAAG,CAAC,IAAI,QAAQ,CAAC;CAEjB,SAAS,UAAU;EACjB,IAAI,IACF,IAAI;GACF,OAAO,aAAa,QAAQ,WAAW,EAAE,GAAG,WAAW;EACzD,QAAQ,CAER;EAEF,IAAI,aAAa,KAAA,GAAW,gBAAgB,KAAK;EACjD,eAAe,KAAK;CACtB;CAGA,MAAM,CAAC,eAAe,oBAAoB,SAAS,YAAY;CAC/D,MAAM,UAAU,UAAW,aAAa,iBAAiB,QAAS,SAAS,QAAQ;CACnF,MAAM,CAAC,WAAW,gBAAgB,SAAS,CAAC;CAC5C,SAAS,GAAG,MAAc;EACxB,IAAI,QAAQ,GAAG;EACf,MAAM,SAAU,UAAU,QAAQ,QAAS,SAAS;EACpD,aAAa,OAAO,IAAI,IAAI,EAAE;EAC9B,IAAI,cAAc,KAAA,GAAW,iBAAiB,IAAI;EAClD,gBAAgB,IAAI;CACtB;CAEA,MAAM,CAAC,YAAY,iBAAiB,SAAS,KAAK;CAClD,MAAM,CAAC,SAAS,cAAc,SAAS,KAAK;CAC5C,MAAM,CAAC,SAAS,cAAc,SAAS,KAAK;CAC5C,MAAM,CAAC,QAAQ,aAAa,SAAS,KAAK;CAC1C,gBAAgB;EACd,MAAM,aAAa,UAAU,SAAS,oBAAoB,QAAQ;EAClE,SAAS,iBAAiB,oBAAoB,IAAI;EAClD,aAAa,SAAS,oBAAoB,oBAAoB,IAAI;CACpE,GAAG,CAAC,CAAC;CACL,MAAM,WAAW,YAAY,CAAC,WAAW,QAAQ;CACjD,MAAM,OAAO,WAAW,WAAW;CAEnC,MAAM,UAAU,mBAAmB,YAAY,SAAS,WAAW,GAAG,eAAe,GAAG,CAAC,CAAC;CAC1F,gBAAgB;EACd,QAAQ,IAAI;CACd,GAAG,CAAC,MAAM,OAAO,CAAC;CAGlB,MAAM,QAAQ,OAAuB,IAAI;CACzC,MAAM,UAAU,OAAuB,IAAI;CAC3C,gBAAgB,OAAO,SAAS,OAAO,OAAO,CAAC;CAG/C,MAAM,MAAM,OAA2B,IAAI;CAC3C,MAAM,SAAS,cAAc,UAAU,KAAK,GAAG,GAAG,CAAC,GAAG,CAAC;CACvD,gCAAgC;EAC9B,IAAI,SAAS,gBAAgB,SAAS,OAAO;CAC/C,GAAG,CAAC,OAAO,CAAC;CAEZ,MAAM,eAAe,SAAS;CAC9B,IAAI,CAAC,YAAY,CAAC,cAAc,OAAO;CACvC,MAAM,YAAY,YAAY,QAAQ;CACtC,MAAM,gBAAgB,YAAY,KAAK,WAAW,IAAI,KAAK,MAAM,cAAc,IAAI;CACnF,MAAM,EAAE,QAAQ,cAAc;CAC9B,MAAM,MAAM,SACV,OAAO,OACL,qBAAC,KAAD;EACE,MAAM,OAAO;EACb,WAAU;EACV,eAAe;GACb,OAAO,UAAU;GACjB,WAAW,YAAY;EACzB;EANF,UAAA,CAQG,OAAO,OACR,oBAAC,OAAD;GAAO,MAAK;GAAsB,MAAM;EAAK,CAAA,CAC5C;CAEH,CAAA,IAAA,qBAAC,UAAD;EACE,MAAK;EACL,WAAU;EACV,eAAe;GACb,OAAO,UAAU;GACjB,WAAW,YAAY;EACzB;EANF,UAAA,CAQG,OAAO,OACR,oBAAC,OAAD;GAAO,MAAK;GAAsB,MAAM;EAAK,CAAA,CACvC;CAER,CAAA,IAAA;CAEJ,OACE,oBAAC,OAAD;EACE,aAAU;EACV,cAAY,SAAS,KAAA;EACrB,kBAAkB,UAAU;GAC1B,IAAI,WAAW,MAAM,WAAW,MAAM,iBAAiB,MAAM,iBAAiB,sBAAsB,OAAO;EAC7G;EACA,WAAU;EAEV,UAAA,qBAAC,WAAD;GACE,KAAK;GACL,aAAU;GACV,aAAW;GACX,cAAY;GACZ,wBAAsB,QAAQ,IAAI,aAAa,KAAA;GAC/C,eAAa,WAAW,KAAA;GACxB,WAAW,GAAG,oBAAoB,SAAS;GAC3C,OAAO,EAAE,cAAc,aAAa;GACpC,iBAAiB,UAAU,MAAM,gBAAgB,WAAW,WAAW,IAAI;GAC3E,sBAAsB,WAAW,KAAK;GAEtC,UAAU,UAAU,WAAW,MAAM,OAAO,QAAQ,gBAAgB,KAAK,CAAC,MAAM,OAAO,QAAQ,cAAc,CAAC;GAC9G,SAAS,UAAU;IACjB,IAAI,CAAC,MAAM,cAAc,SAAS,MAAM,aAAa,GAAG,WAAW,KAAK;GAC1E;GAfF,UAAA;IAiBE,oBAAC,OAAD,EAAK,eAAY,OAAQ,CAAA;IACzB,oBAAC,OAAD;KACE,KAAK;KACL,IAAI,GAAG,IAAI;KACX,aAAW,YAAY,CAAC,OAAO,QAAQ;KACvC,eAAY;KACZ,WAAU;KAEV,UAAA,oBAAC,OAAD;MAAK,KAAK;MACR,UAAA,oBAAC,UAAD;OAAU,SAAS,aAAa;OAAI,KAAK;OAAW,WAAU;OAC5D,UAAA,oBAAC,OAAD;QACE,MAAM,QAAQ,IAAI,UAAU,KAAA;QAC5B,wBAAsB,QAAQ,IAAI,UAAU,KAAA;QAC5C,cAAY,QAAQ,IAAI,GAAG,UAAU,EAAE,MAAM,UAAU,KAAA;QACvD,WAAU;QAEV,UAAA,qBAAC,KAAD;SAAG,WAAU;SAAb,UAAA;UACE,oBAAC,QAAD,EAAA,UAAO,aAAa,QAAc,CAAA;UACjC,YAAY,oBAAC,WAAD;WAAW,IAAI,UAAU;WAAI,OAAO,UAAU;WAAO,aAAa,iBAAiB,YAAY;UAAI,CAAA,IAAI;UACnH;SACA;;OACA,CAAA;MACG,CAAA;KACP,CAAA;IACF,CAAA;IACL,qBAAC,OAAD;KAAK,WAAU;KAAf,UAAA,CACG,YACC,qBAAA,YAAA,EAAA,UAAA;MACE,oBAAC,UAAD;OAAQ,MAAK;OAAS,cAAW;OAAwB,iBAAe,GAAG,IAAI;OAAU,WAAU;OAAoB,eAAe,GAAG,EAAE;OACzI,UAAA,oBAAC,OAAD,EAAO,MAAK,gBAAiB,CAAA;MACvB,CAAA;MACP,WACC,qBAAC,UAAD;OACE,MAAK;OACL,cAAY,aAAa,yBAAyB;OAClD,gBAAc;OACd,cAAW;OACX,WAAU;OACV,eAAe,cAAc,CAAC,UAAU;OAN1C,UAAA,CAQE,qBAAC,OAAD;QAAK,SAAQ;QAAY,MAAK;QAAO,QAAO;QAAe,aAAa;QAAM,eAAY;QAAO,WAAU;QAA3G,UAAA,CACE,oBAAC,UAAD;SAAQ,IAAG;SAAK,IAAG;SAAK,GAAE;SAAI,YAAY;SAAG,WAAU;QAA2B,CAAA,GAClF,oBAAC,UAAD;SAEE,IAAG;SACH,IAAG;SACH,GAAE;SACF,YAAY;SACZ,eAAc;SACd,WAAU;SACV,OAAO;UAAE,mBAAmB,GAAG,SAAS;UAAK,oBAAoB,QAAQ,SAAS,WAAW;SAAU;QACxG,GARM,OAQN,CACE;OACL,CAAA,GAAA,oBAAC,OAAD;QAAK,SAAQ;QAAY,MAAK;QAAe,eAAY;QAAO,WAAU;QACvE,UAAA,aAAa,oBAAC,QAAD,EAAM,GAAE,oBAAqB,CAAA,IAAI,oBAAC,QAAD,EAAM,GAAE,yCAA0C,CAAA;OAC9F,CAAA,CACC;MACN,CAAA,IAAA;MACJ,oBAAC,UAAD;OAAQ,MAAK;OAAS,cAAW;OAAoB,iBAAe,GAAG,IAAI;OAAU,WAAU;OAAoB,eAAe,GAAG,CAAC;OACpI,UAAA,oBAAC,OAAD,EAAO,MAAK,eAAgB,CAAA;MACtB,CAAA;KACR,EAAA,CAAA,IACA,MACH,cACC,oBAAC,UAAD;MAAQ,MAAK;MAAS,cAAW;MAAU,WAAU;MAAoB,SAAS;MAChF,UAAA,oBAAC,OAAD,EAAO,MAAK,qBAAsB,CAAA;KAC5B,CAAA,IACN,IACD;;GACE;;CACN,CAAA;AAET,CAAC"}

package/dist/announcement-bar/index.d.ts

@@ -0,0 +1,2 @@
+import { Announcement, AnnouncementAction, AnnouncementBar, AnnouncementBarProps, clearAnnouncementDismissal } from "./announcement-bar.js";
+export { type Announcement, type AnnouncementAction, AnnouncementBar, type AnnouncementBarProps, clearAnnouncementDismissal };

package/dist/announcement-bar/index.js

@@ -0,0 +1,2 @@
+import { AnnouncementBar, clearAnnouncementDismissal } from "./announcement-bar.js";
+export { AnnouncementBar, clearAnnouncementDismissal };

package/dist/avatar/avatar.d.ts

@@ -29,6 +29,12 @@ export declare const avatarVariants: (props?: ({
 export interface AvatarProps extends Omit<ComponentPropsWithoutRef<"span">, "children">, VariantProps<typeof avatarVariants> {
   /** Image URL. Omit it to render the fallback alone. */
   src?: string;
+  /**
+   * A small dot at the corner: `online` or `offline`. It grows in when it appears,
+   * shrinks away when it goes, and swaps when it changes. Its word is read to
+   * assistive technology beside the name.
+   */
+  presence?: "online" | "offline";
   /**
    * Alternative text. **Required**, and `""` is the right value when the
    * person's name already appears next to the avatar.

package/dist/avatar/avatar.js

@@ -1,6 +1,7 @@
 "use client";
 import { cn } from "../lib/cn.js";
 import { mergeRefs } from "../lib/merge-refs.js";
+import { SwapText } from "../lib/swap-text.js";
 import { cva } from "class-variance-authority";
 import { forwardRef, useCallback, useMemo, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -21,7 +22,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 * class assembled at runtime is invisible to it and would never be emitted.
 */
 const avatarVariants = cva([
-	"relative inline-flex shrink-0 items-center justify-center overflow-hidden",
+	"relative inline-flex shrink-0 items-center justify-center",
 	"rounded-full",
 	"box-border",
 	"font-sans font-medium",
@@ -36,7 +37,15 @@ const avatarVariants = cva([
 	} },
 	defaultVariants: { size: "md" }
 });
-const Avatar = forwardRef(function Avatar({ className, size, src, alt, fallback, ...props }, ref) {
+/** Where the presence dot sits and how big it is, per size. Static strings: Tailwind scans source text. */
+const dotPlace = {
+	xs: "bottom-0 end-0 size-1.5",
+	sm: "bottom-0 end-0 size-2",
+	md: "bottom-0 end-0 size-2.5",
+	lg: "bottom-0 end-0 size-3",
+	xl: "bottom-1 end-1 size-3.5"
+};
+const Avatar = forwardRef(function Avatar({ className, size, src, alt, fallback, presence, ...props }, ref) {
 	const [status, setStatus] = useState(src === void 0 ? "idle" : "loading");
 	/**
 	* Reset when src changes, during RENDER rather than in an effect.
@@ -63,6 +72,7 @@ const Avatar = forwardRef(function Avatar({ className, size, src, alt, fallback,
 	*/
 	const measure = useCallback((node) => {
 		if (node?.complete) setStatus(node.naturalWidth > 0 ? "loaded" : "error");
+		else if (node) node.dataset.loading = "";
 	}, []);
 	const imageRef = useMemo(() => mergeRefs(ref, measure), [ref, measure]);
 	const showImage = src !== void 0 && status !== "error";
@@ -71,20 +81,41 @@ const Avatar = forwardRef(function Avatar({ className, size, src, alt, fallback,
 		"data-slot": "avatar",
 		"data-status": status,
 		className: cn(avatarVariants({ size }), className),
-		children: [showImage ? /* @__PURE__ */ jsx("img", {
-			ref: imageRef,
-			"data-slot": "avatar-image",
-			className: "size-full object-cover",
-			src,
-			alt,
-			onLoad: () => setStatus("loaded"),
-			onError: () => setStatus("error")
-		}) : null, status === "loaded" ? null : /* @__PURE__ */ jsx("span", {
-			"data-slot": "avatar-fallback",
-			"aria-hidden": "true",
-			className: "select-none",
-			children: fallback
-		})]
+		children: [
+			showImage ? /* @__PURE__ */ jsx("img", {
+				ref: imageRef,
+				"data-slot": "avatar-image",
+				className: "avatar-photo size-full rounded-[inherit] object-cover",
+				src,
+				alt,
+				onLoad: (event) => {
+					delete event.currentTarget.dataset.loading;
+					setStatus("loaded");
+				},
+				onError: () => setStatus("error")
+			}, src) : null,
+			status === "loaded" ? null : /* @__PURE__ */ jsx("span", {
+				"data-slot": "avatar-fallback",
+				"aria-hidden": "true",
+				className: cn("select-none", src !== void 0 && "motion-safe:animate-avatar-fallback-in"),
+				children: fallback
+			}),
+			presence === void 0 ? null : /* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				children: presence
+			}),
+			/* @__PURE__ */ jsx(SwapText, {
+				swapKey: presence ?? "",
+				motion: "dot",
+				className: cn("absolute z-10", dotPlace[size ?? "md"]),
+				children: /* @__PURE__ */ jsx("span", {
+					"data-slot": "avatar-presence",
+					"data-presence": presence,
+					"aria-hidden": "true",
+					className: cn("block size-full rounded-full border-(length:--border-width) border-background box-border", presence === "online" ? "bg-success-strong" : "bg-muted-foreground")
+				})
+			})
+		]
 	});
 });
 //#endregion

package/dist/avatar/avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.js","names":[],"sources":["../../src/avatar/avatar.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport {\n  forwardRef,\n  useCallback,\n  useMemo,\n  useState,\n  type ComponentPropsWithoutRef,\n  type ReactNode,\n} from \"react\";\n\nimport { cn } from \"../lib/cn.js\";\nimport { mergeRefs } from \"../lib/merge-refs.js\";\n\n/**\n * Avatar, ported from the legacy shadcn/Radix component.\n *\n * React Aria ships no avatar, so the image load/error state machine is\n * re-implemented here -- see the status handling below, which is the part\n * Radix was actually providing.\n *\n * The three legacy parts (Avatar / AvatarImage / AvatarFallback) collapse\n * into one props-driven component. The census is unambiguous: 36 / 35 / 35\n * uses, always as the same triple, so the compound API bought nothing but\n * three imports and the chance to forget one.\n *\n * Every string below is a STATIC literal. Tailwind scans source text, so a\n * class assembled at runtime is invisible to it and would never be emitted.\n */\nexport const avatarVariants = cva(\n  [\n    \"relative inline-flex shrink-0 items-center justify-center overflow-hidden\",\n    \"rounded-full\",\n    // box-border: this library's reset is OPT-IN, so a consumer may load\n    // none and the browser default content-box applies. The Alert shipped\n    // overflowing its container by 46px for exactly this reason.\n    \"box-border\",\n    // font-sans: initials are text, and an unstyled document renders text in\n    // a serif. The accordion panel shipped that way.\n    \"font-sans font-medium\",\n    \"bg-muted text-foreground\",\n  ],\n  {\n    variants: {\n      // Sizes come from the census, not from taste: call sites reach for\n      // h-5 / h-6 / h-8 / h-10 / h-16 through className because the legacy\n      // component has no size prop. size-7 (2 uses) has no variant; those\n      // sites pick sm or md.\n      //\n      // Deliberately NOT on the density scale. An avatar is content, not a\n      // control -- it does not shrink when a table is compacted, and putting\n      // it on --density-control-* would couple a portrait to a button's\n      // rhythm. If that turns out wrong it becomes an --avatar-* scale.\n      size: {\n        xs: \"size-5 text-2xs leading-(--leading-none)\",\n        sm: \"size-6 text-2xs leading-(--leading-none)\",\n        md: \"size-8 text-sm leading-(--leading-none)\",\n        lg: \"size-10 text-sm leading-(--leading-none)\",\n        xl: \"size-16 text-base leading-(--leading-none)\",\n      },\n    },\n    defaultVariants: { size: \"md\" },\n  },\n);\n\ntype Status = \"idle\" | \"loading\" | \"loaded\" | \"error\";\n\n/**\n * A user avatar.\n *\n * @example\n * <Avatar src={user.photoUrl} alt={user.name} fallback={initials(user.name)} />\n * <Avatar alt=\"\" fallback=\"JD\" />\n */\nexport interface AvatarProps\n  extends Omit<ComponentPropsWithoutRef<\"span\">, \"children\">, VariantProps<typeof avatarVariants> {\n  /** Image URL. Omit it to render the fallback alone. */\n  src?: string;\n  /**\n   * Alternative text. **Required**, and `\"\"` is the right value when the\n   * person's name already appears next to the avatar.\n   *\n   * Required on purpose: the census found 15 of 38 legacy `AvatarImage` uses\n   * with no `alt` at all, which renders an `<img>` that fails axe's\n   * `image-alt` rule. Making it required turns that into a decision the\n   * caller makes rather than a default they fall into.\n   */\n  alt: string;\n  /**\n   * Shown until the image loads, and permanently if it fails. Usually\n   * initials.\n   */\n  fallback?: ReactNode;\n}\n\nexport const Avatar = forwardRef<HTMLImageElement, AvatarProps>(function Avatar(\n  { className, size, src, alt, fallback, ...props },\n  ref,\n) {\n  const [status, setStatus] = useState<Status>(src === undefined ? \"idle\" : \"loading\");\n\n  /**\n   * Reset when src changes, during RENDER rather than in an effect.\n   *\n   * React's documented \"adjusting state when a prop changes\" pattern. An\n   * effect that called setState here would be flagged by\n   * react-hooks/set-state-in-effect, and rightly: it renders once with the\n   * stale status before correcting itself.\n   */\n  const [renderedSrc, setRenderedSrc] = useState(src);\n  if (src !== renderedSrc) {\n    setRenderedSrc(src);\n    setStatus(src === undefined ? \"idle\" : \"loading\");\n  }\n\n  /**\n   * Resolve the status from the DOM, not only from events.\n   *\n   * A cached or data-URL image is already decoded by the time React attaches\n   * its handlers, so `onLoad` fires BEFORE any effect could run -- and an\n   * effect that set \"loading\" would then clobber it and leave the avatar on\n   * its fallback forever. A ref callback runs when the node attaches, which\n   * is early enough to read `complete` and late enough to have a node. The\n   * handlers below still cover the asynchronous case.\n   */\n  const measure = useCallback((node: HTMLImageElement | null) => {\n    if (node?.complete) {\n      setStatus(node.naturalWidth > 0 ? \"loaded\" : \"error\");\n    }\n  }, []);\n\n  // Memoized, not called inline on the img below: mergeRefs returns a new\n  // callback every call, and an inline call is a new callback every render --\n  // React would detach and reattach both refs on every re-render instead of\n  // only on mount, re-running measure's decode check each time.\n  const imageRef = useMemo(() => mergeRefs(ref, measure), [ref, measure]);\n\n  const showImage = src !== undefined && status !== \"error\";\n\n  return (\n    <span\n      {...props}\n      data-slot=\"avatar\"\n      data-status={status}\n      className={cn(avatarVariants({ size }), className)}\n    >\n      {showImage ? (\n        <img\n          // The forwarded ref is null while the fallback shows -- the img is\n          // not rendered then -- matching measure's own scope, not a new\n          // limitation.\n          ref={imageRef}\n          data-slot=\"avatar-image\"\n          className=\"size-full object-cover\"\n          src={src}\n          alt={alt}\n          onLoad={() => setStatus(\"loaded\")}\n          onError={() => setStatus(\"error\")}\n        />\n      ) : null}\n      {status === \"loaded\" ? null : (\n        // aria-hidden: when the image is present the img carries the\n        // accessible name, and when it is not the initials are decorative\n        // shorthand for a name the surrounding UI already states.\n        <span data-slot=\"avatar-fallback\" aria-hidden=\"true\" className=\"select-none\">\n          {fallback}\n        </span>\n      )}\n    </span>\n  );\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AA8BA,MAAa,iBAAiB,IAC5B;CACE;CACA;CAIA;CAGA;CACA;AACF,GACA;CACE,UAAU,EAUR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;CACN,EACF;CACA,iBAAiB,EAAE,MAAM,KAAK;AAChC,CACF;AAgCA,MAAa,SAAS,WAA0C,SAAS,OACvE,EAAE,WAAW,MAAM,KAAK,KAAK,UAAU,GAAG,SAC1C,KACA;CACA,MAAM,CAAC,QAAQ,aAAa,SAAiB,QAAQ,KAAA,IAAY,SAAS,SAAS;;;;;;;;;CAUnF,MAAM,CAAC,aAAa,kBAAkB,SAAS,GAAG;CAClD,IAAI,QAAQ,aAAa;EACvB,eAAe,GAAG;EAClB,UAAU,QAAQ,KAAA,IAAY,SAAS,SAAS;CAClD;;;;;;;;;;;CAYA,MAAM,UAAU,aAAa,SAAkC;EAC7D,IAAI,MAAM,UACR,UAAU,KAAK,eAAe,IAAI,WAAW,OAAO;CAExD,GAAG,CAAC,CAAC;CAML,MAAM,WAAW,cAAc,UAAU,KAAK,OAAO,GAAG,CAAC,KAAK,OAAO,CAAC;CAEtE,MAAM,YAAY,QAAQ,KAAA,KAAa,WAAW;CAElD,OACE,qBAAC,QAAD;EACE,GAAI;EACJ,aAAU;EACV,eAAa;EACb,WAAW,GAAG,eAAe,EAAE,KAAK,CAAC,GAAG,SAAS;EAJnD,UAAA,CAMG,YACC,oBAAC,OAAD;GAIE,KAAK;GACL,aAAU;GACV,WAAU;GACL;GACA;GACL,cAAc,UAAU,QAAQ;GAChC,eAAe,UAAU,OAAO;EACjC,CAAA,IACC,MACH,WAAW,WAAW,OAIrB,oBAAC,QAAD;GAAM,aAAU;GAAkB,eAAY;GAAO,WAAU;GAC5D,UAAA;EACG,CAAA,CAEJ;;AAEV,CAAC"}
+{"version":3,"file":"avatar.js","names":[],"sources":["../../src/avatar/avatar.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport {\n  forwardRef,\n  useCallback,\n  useMemo,\n  useState,\n  type ComponentPropsWithoutRef,\n  type ReactNode,\n} from \"react\";\n\nimport { cn } from \"../lib/cn.js\";\nimport { SwapText } from \"../lib/swap-text.js\";\nimport { mergeRefs } from \"../lib/merge-refs.js\";\n\n/**\n * Avatar, ported from the legacy shadcn/Radix component.\n *\n * React Aria ships no avatar, so the image load/error state machine is\n * re-implemented here -- see the status handling below, which is the part\n * Radix was actually providing.\n *\n * The three legacy parts (Avatar / AvatarImage / AvatarFallback) collapse\n * into one props-driven component. The census is unambiguous: 36 / 35 / 35\n * uses, always as the same triple, so the compound API bought nothing but\n * three imports and the chance to forget one.\n *\n * Every string below is a STATIC literal. Tailwind scans source text, so a\n * class assembled at runtime is invisible to it and would never be emitted.\n */\nexport const avatarVariants = cva(\n  [\n    \"relative inline-flex shrink-0 items-center justify-center\",\n    \"rounded-full\",\n    // box-border: this library's reset is OPT-IN, so a consumer may load\n    // none and the browser default content-box applies. The Alert shipped\n    // overflowing its container by 46px for exactly this reason.\n    \"box-border\",\n    // font-sans: initials are text, and an unstyled document renders text in\n    // a serif. The accordion panel shipped that way.\n    \"font-sans font-medium\",\n    \"bg-muted text-foreground\",\n  ],\n  {\n    variants: {\n      // Sizes come from the census, not from taste: call sites reach for\n      // h-5 / h-6 / h-8 / h-10 / h-16 through className because the legacy\n      // component has no size prop. size-7 (2 uses) has no variant; those\n      // sites pick sm or md.\n      //\n      // Deliberately NOT on the density scale. An avatar is content, not a\n      // control -- it does not shrink when a table is compacted, and putting\n      // it on --density-control-* would couple a portrait to a button's\n      // rhythm. If that turns out wrong it becomes an --avatar-* scale.\n      size: {\n        xs: \"size-5 text-2xs leading-(--leading-none)\",\n        sm: \"size-6 text-2xs leading-(--leading-none)\",\n        md: \"size-8 text-sm leading-(--leading-none)\",\n        lg: \"size-10 text-sm leading-(--leading-none)\",\n        xl: \"size-16 text-base leading-(--leading-none)\",\n      },\n    },\n    defaultVariants: { size: \"md\" },\n  },\n);\n\n/** Where the presence dot sits and how big it is, per size. Static strings: Tailwind scans source text. */\nconst dotPlace = {\n  xs: \"bottom-0 end-0 size-1.5\",\n  sm: \"bottom-0 end-0 size-2\",\n  md: \"bottom-0 end-0 size-2.5\",\n  lg: \"bottom-0 end-0 size-3\",\n  xl: \"bottom-1 end-1 size-3.5\",\n} as const;\n\ntype Status = \"idle\" | \"loading\" | \"loaded\" | \"error\";\n\n/**\n * A user avatar.\n *\n * @example\n * <Avatar src={user.photoUrl} alt={user.name} fallback={initials(user.name)} />\n * <Avatar alt=\"\" fallback=\"JD\" />\n */\nexport interface AvatarProps\n  extends Omit<ComponentPropsWithoutRef<\"span\">, \"children\">, VariantProps<typeof avatarVariants> {\n  /** Image URL. Omit it to render the fallback alone. */\n  src?: string;\n  /**\n   * A small dot at the corner: `online` or `offline`. It grows in when it appears,\n   * shrinks away when it goes, and swaps when it changes. Its word is read to\n   * assistive technology beside the name.\n   */\n  presence?: \"online\" | \"offline\";\n  /**\n   * Alternative text. **Required**, and `\"\"` is the right value when the\n   * person's name already appears next to the avatar.\n   *\n   * Required on purpose: the census found 15 of 38 legacy `AvatarImage` uses\n   * with no `alt` at all, which renders an `<img>` that fails axe's\n   * `image-alt` rule. Making it required turns that into a decision the\n   * caller makes rather than a default they fall into.\n   */\n  alt: string;\n  /**\n   * Shown until the image loads, and permanently if it fails. Usually\n   * initials.\n   */\n  fallback?: ReactNode;\n}\n\nexport const Avatar = forwardRef<HTMLImageElement, AvatarProps>(function Avatar(\n  { className, size, src, alt, fallback, presence, ...props },\n  ref,\n) {\n  const [status, setStatus] = useState<Status>(src === undefined ? \"idle\" : \"loading\");\n\n  /**\n   * Reset when src changes, during RENDER rather than in an effect.\n   *\n   * React's documented \"adjusting state when a prop changes\" pattern. An\n   * effect that called setState here would be flagged by\n   * react-hooks/set-state-in-effect, and rightly: it renders once with the\n   * stale status before correcting itself.\n   */\n  const [renderedSrc, setRenderedSrc] = useState(src);\n  if (src !== renderedSrc) {\n    setRenderedSrc(src);\n    setStatus(src === undefined ? \"idle\" : \"loading\");\n  }\n\n  /**\n   * Resolve the status from the DOM, not only from events.\n   *\n   * A cached or data-URL image is already decoded by the time React attaches\n   * its handlers, so `onLoad` fires BEFORE any effect could run -- and an\n   * effect that set \"loading\" would then clobber it and leave the avatar on\n   * its fallback forever. A ref callback runs when the node attaches, which\n   * is early enough to read `complete` and late enough to have a node. The\n   * handlers below still cover the asynchronous case.\n   */\n  const measure = useCallback((node: HTMLImageElement | null) => {\n    if (node?.complete) {\n      setStatus(node.naturalWidth > 0 ? \"loaded\" : \"error\");\n    } else if (node) {\n      // Still downloading after mount: it fades in from a soft blur when it arrives. A photo that\n      // is already decoded shows at once, so cached photos never fade.\n      node.dataset.loading = \"\";\n    }\n  }, []);\n\n  // Memoized, not called inline on the img below: mergeRefs returns a new\n  // callback every call, and an inline call is a new callback every render --\n  // React would detach and reattach both refs on every re-render instead of\n  // only on mount, re-running measure's decode check each time.\n  const imageRef = useMemo(() => mergeRefs(ref, measure), [ref, measure]);\n\n  const showImage = src !== undefined && status !== \"error\";\n\n  return (\n    <span\n      {...props}\n      data-slot=\"avatar\"\n      data-status={status}\n      className={cn(avatarVariants({ size }), className)}\n    >\n      {showImage ? (\n        <img\n          // The forwarded ref is null while the fallback shows -- the img is\n          // not rendered then -- matching measure's own scope, not a new\n          // limitation.\n          key={src}\n          ref={imageRef}\n          data-slot=\"avatar-image\"\n          className=\"avatar-photo size-full rounded-[inherit] object-cover\"\n          src={src}\n          alt={alt}\n          onLoad={(event) => {\n            delete event.currentTarget.dataset.loading;\n            setStatus(\"loaded\");\n          }}\n          onError={() => setStatus(\"error\")}\n        />\n      ) : null}\n      {status === \"loaded\" ? null : (\n        // aria-hidden: when the image is present the img carries the\n        // accessible name, and when it is not the initials are decorative\n        // shorthand for a name the surrounding UI already states.\n        <span\n          data-slot=\"avatar-fallback\"\n          aria-hidden=\"true\"\n          className={cn(\"select-none\", src !== undefined && \"motion-safe:animate-avatar-fallback-in\")}\n        >\n          {fallback}\n        </span>\n      )}\n      {presence === undefined ? null : <span className=\"sr-only\">{presence}</span>}\n      <SwapText\n        swapKey={presence ?? \"\"}\n        motion=\"dot\"\n        className={cn(\"absolute z-10\", dotPlace[size ?? \"md\"])}\n      >\n        <span\n          data-slot=\"avatar-presence\"\n          data-presence={presence}\n          aria-hidden=\"true\"\n          className={cn(\n            \"block size-full rounded-full border-(length:--border-width) border-background box-border\",\n            presence === \"online\" ? \"bg-success-strong\" : \"bg-muted-foreground\",\n          )}\n        />\n      </SwapText>\n    </span>\n  );\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AA+BA,MAAa,iBAAiB,IAC5B;CACE;CACA;CAIA;CAGA;CACA;AACF,GACA;CACE,UAAU,EAUR,MAAM;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;CACN,EACF;CACA,iBAAiB,EAAE,MAAM,KAAK;AAChC,CACF;;AAGA,MAAM,WAAW;CACf,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAsCA,MAAa,SAAS,WAA0C,SAAS,OACvE,EAAE,WAAW,MAAM,KAAK,KAAK,UAAU,UAAU,GAAG,SACpD,KACA;CACA,MAAM,CAAC,QAAQ,aAAa,SAAiB,QAAQ,KAAA,IAAY,SAAS,SAAS;;;;;;;;;CAUnF,MAAM,CAAC,aAAa,kBAAkB,SAAS,GAAG;CAClD,IAAI,QAAQ,aAAa;EACvB,eAAe,GAAG;EAClB,UAAU,QAAQ,KAAA,IAAY,SAAS,SAAS;CAClD;;;;;;;;;;;CAYA,MAAM,UAAU,aAAa,SAAkC;EAC7D,IAAI,MAAM,UACR,UAAU,KAAK,eAAe,IAAI,WAAW,OAAO;OAC/C,IAAI,MAGT,KAAK,QAAQ,UAAU;CAE3B,GAAG,CAAC,CAAC;CAML,MAAM,WAAW,cAAc,UAAU,KAAK,OAAO,GAAG,CAAC,KAAK,OAAO,CAAC;CAEtE,MAAM,YAAY,QAAQ,KAAA,KAAa,WAAW;CAElD,OACE,qBAAC,QAAD;EACE,GAAI;EACJ,aAAU;EACV,eAAa;EACb,WAAW,GAAG,eAAe,EAAE,KAAK,CAAC,GAAG,SAAS;EAJnD,UAAA;GAMG,YACC,oBAAC,OAAD;IAKE,KAAK;IACL,aAAU;IACV,WAAU;IACL;IACA;IACL,SAAS,UAAU;KACjB,OAAO,MAAM,cAAc,QAAQ;KACnC,UAAU,QAAQ;IACpB;IACA,eAAe,UAAU,OAAO;GACjC,GAXM,GAWN,IACC;GACH,WAAW,WAAW,OAIrB,oBAAC,QAAD;IACE,aAAU;IACV,eAAY;IACZ,WAAW,GAAG,eAAe,QAAQ,KAAA,KAAa,wCAAwC;IAEzF,UAAA;GACG,CAAA;GAEP,aAAa,KAAA,IAAY,OAAO,oBAAC,QAAD;IAAM,WAAU;IAAW,UAAA;GAAe,CAAA;GAC3E,oBAAC,UAAD;IACE,SAAS,YAAY;IACrB,QAAO;IACP,WAAW,GAAG,iBAAiB,SAAS,QAAQ,KAAK;IAErD,UAAA,oBAAC,QAAD;KACE,aAAU;KACV,iBAAe;KACf,eAAY;KACZ,WAAW,GACT,4FACA,aAAa,WAAW,sBAAsB,qBAChD;IACD,CAAA;GACO,CAAA;EACN;;AAEV,CAAC"}

package/dist/badge/badge.d.ts

@@ -1,5 +1,5 @@
 import { VariantProps } from "class-variance-authority";
-import { ComponentPropsWithoutRef } from "react";
+import { ComponentPropsWithoutRef, ReactNode } from "react";
 //#region src/badge/badge.d.ts
 /**
  * Badge -- the status pill, in every shape the product asks for.
@@ -37,11 +37,18 @@ import { ComponentPropsWithoutRef } from "react";
  */
 export declare const badgeVariants: (props?: ({
   tone?: "neutral" | "success" | "warning" | "danger" | "info" | "primary" | null | undefined;
-  appearance?: "solid" | "soft" | "outline" | null | undefined;
+  appearance?: "outline" | "solid" | "soft" | null | undefined;
   size?: "sm" | "md" | "lg" | null | undefined;
   shape?: "rounded" | "pill" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-export interface BadgeProps extends ComponentPropsWithoutRef<"span">, VariantProps<typeof badgeVariants> {}
+export interface BadgeProps extends ComponentPropsWithoutRef<"span">, VariantProps<typeof badgeVariants> {
+  /**
+   * A leading icon. A different icon component swaps in place (the new one grows in
+   * from small and blurred); the same one re-rendering stays still. Mark it
+   * `aria-hidden` when the label already says what it means.
+   */
+  icon?: ReactNode;
+}
 export declare const Badge: import("react").ForwardRefExoticComponent<BadgeProps & import("react").RefAttributes<HTMLSpanElement>>;
 //#endregion
 //# sourceMappingURL=badge.d.ts.map