@seekalfred/primitives 0.6.0 → 0.7.3

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":"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"}

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/badge/badge.d.ts

@@ -36,7 +36,7 @@ import { ComponentPropsWithoutRef, ReactNode } from "react";
  *   across every shadcn control.
  */
 export declare const badgeVariants: (props?: ({
-  tone?: "primary" | "neutral" | "success" | "warning" | "danger" | "info" | null | undefined;
+  tone?: "primary" | "success" | "warning" | "danger" | "neutral" | "info" | null | undefined;
   appearance?: "outline" | "solid" | "soft" | null | undefined;
   size?: "sm" | "md" | "lg" | null | undefined;
   shape?: "rounded" | "pill" | null | undefined;

package/dist/bar-chart/bar-chart.d.ts

@@ -0,0 +1,51 @@
+//#region src/bar-chart/bar-chart.d.ts
+/**
+ * BarChart: one measure across a run of days, weeks or months, when people
+ * compare each period against the rest and against the average.
+ *
+ * The bars grow from the baseline the first time the chart is seen, each a beat
+ * after its neighbour, and the dashed average rises with them. A new range zooms
+ * the time axis around the latest bar (bars that stay glide to their new slot,
+ * new ones grow outward from them, leaving ones sink into the baseline) while
+ * the scale and the average slide to fit. Hover, drag or the arrow keys scrub:
+ * the scrubbed bar takes the full colour while the rest step back, a cursor
+ * glides to it, and the headline swaps from the average to that bar.
+ *
+ * Plain SVG and CSS; one small spring tween drives the bars, the zoom, the
+ * scale, the average and the cursor. A visually hidden table carries every
+ * value, and the plot is a slider.
+ */
+export interface BarChartDatum {
+  /** Stable identity, such as an ISO date. A bar whose key survives a data change keeps its place. */
+  key: string;
+  /** Full label for the headline and screen readers, such as "Tue, Sep 15". */
+  label: string;
+  /** Short label under the bar, such as "T" or "Sep 14". Leave it out to keep the axis quiet. */
+  axisLabel?: string;
+  value: number;
+}
+export interface BarChartProps {
+  data: BarChartDatum[];
+  /** What is measured, such as "Active minutes". Names the chart for assistive technology. */
+  label: string;
+  /** The range on show, such as "Sep 15–21, 2026". It rests under the headline. */
+  period: string;
+  /** Unit after each value, such as "min". */
+  unit?: string;
+  /** Headline label at rest, above the average. @default "Daily average" */
+  averageLabel?: string;
+  /** Headline label while a bar is scrubbed. @default "Total" */
+  valueLabel?: string;
+  /** Header of the first column in the data table read by screen readers. @default "Day" */
+  categoryLabel?: string;
+  /** Draws the average as a dashed reference line. @default true */
+  showAverage?: boolean;
+  /** Plot height in pixels. @default 176 */
+  height?: number;
+  formatValue?: (value: number) => string;
+  /** Extra classes for the root. Merged last. */
+  className?: string;
+}
+export declare const BarChart: import("react").ForwardRefExoticComponent<BarChartProps & import("react").RefAttributes<HTMLElement>>;
+//#endregion
+//# sourceMappingURL=bar-chart.d.ts.map