@seekalfred/primitives 0.5.0 → 0.6.0

package/dist/lib/rolling-value.js

@@ -0,0 +1,31 @@
+import { SwapText } from "./swap-text.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/lib/rolling-value.tsx
+/**
+* The value shown in a picker's trigger. The caller's own text stays, visually
+* hidden, as what a screen reader reads (`srValue`); the copy the eye sees rolls
+* when it changes: a later value rises in from below, an earlier one drops in from
+* above, and the old one lifts away. Nothing animates on first mount. Long text is
+* cut with an ellipsis. `instanceKey` remounts the swap, which is how a caller whose
+* first value arrives a render late makes that arrival the first mount.
+*/
+function RollingValue({ srValue, swapKey, dir, instanceKey, children }) {
+	return /* @__PURE__ */ jsxs("span", {
+		className: "grid min-w-0 flex-1",
+		children: [srValue, /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			className: "min-w-0 overflow-hidden whitespace-nowrap",
+			children: /* @__PURE__ */ jsx(SwapText, {
+				swapKey,
+				dir,
+				motion: "roll",
+				className: "block [&>span:not([aria-hidden])]:max-w-full [&>span:not([aria-hidden])]:truncate",
+				children
+			}, instanceKey)
+		})]
+	});
+}
+//#endregion
+export { RollingValue };
+
+//# sourceMappingURL=rolling-value.js.map

package/dist/lib/rolling-value.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rolling-value.js","names":[],"sources":["../../src/lib/rolling-value.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\n\nimport { SwapText } from \"./swap-text.js\";\n\n/**\n * The value shown in a picker's trigger. The caller's own text stays, visually\n * hidden, as what a screen reader reads (`srValue`); the copy the eye sees rolls\n * when it changes: a later value rises in from below, an earlier one drops in from\n * above, and the old one lifts away. Nothing animates on first mount. Long text is\n * cut with an ellipsis. `instanceKey` remounts the swap, which is how a caller whose\n * first value arrives a render late makes that arrival the first mount.\n */\nexport function RollingValue({\n  srValue,\n  swapKey,\n  dir,\n  instanceKey,\n  children,\n}: {\n  srValue: ReactNode;\n  swapKey: string;\n  dir: number;\n  instanceKey?: string;\n  children: ReactNode;\n}) {\n  return (\n    <span className=\"grid min-w-0 flex-1\">\n      {srValue}\n      <span aria-hidden=\"true\" className=\"min-w-0 overflow-hidden whitespace-nowrap\">\n        <SwapText\n          key={instanceKey}\n          swapKey={swapKey}\n          dir={dir}\n          motion=\"roll\"\n          className=\"block [&>span:not([aria-hidden])]:max-w-full [&>span:not([aria-hidden])]:truncate\"\n        >\n          {children}\n        </SwapText>\n      </span>\n    </span>\n  );\n}\n"],"mappings":";;;;;;;;;;;AAYA,SAAgB,aAAa,EAC3B,SACA,SACA,KACA,aACA,YAOC;CACD,OACE,qBAAC,QAAD;EAAM,WAAU;EAAhB,UAAA,CACG,SACD,oBAAC,QAAD;GAAM,eAAY;GAAO,WAAU;GACjC,UAAA,oBAAC,UAAD;IAEW;IACJ;IACL,QAAO;IACP,WAAU;IAET;GACO,GAPH,WAOG;EACN,CAAA,CACF;;AAEV"}

package/dist/lib/spring-progress.js

@@ -0,0 +1,114 @@
+import { prefersReducedMotion } from "./motion.js";
+import { useEffect, useRef } from "react";
+//#region src/lib/spring-progress.ts
+/**
+* The morph spring (--ease-morph, --duration-morph: visualDuration 0.42s, bounce
+* 0.16), sampled every 16ms from Motion's solver. It is here as numbers because a
+* script has to evaluate it: CSS cannot interpolate the `d` of a path in every
+* browser, so an icon that morphs its outline drives the path from this.
+*/
+const MORPH_CURVE = [
+	0,
+	.0178,
+	.0636,
+	.1279,
+	.2033,
+	.2841,
+	.366,
+	.4459,
+	.5218,
+	.5921,
+	.6562,
+	.7136,
+	.7643,
+	.8086,
+	.8466,
+	.879,
+	.9063,
+	.9289,
+	.9475,
+	.9626,
+	.9746,
+	.9841,
+	.9914,
+	.9969,
+	1.001,
+	1.0038,
+	1.0058,
+	1.0069,
+	1.0075,
+	1.0077,
+	1.0076,
+	1.0072,
+	1.0067,
+	1.0062,
+	1.0055,
+	1.0049,
+	1.0043,
+	1.0037,
+	1.0032,
+	1.0027,
+	1.0022,
+	1.0018,
+	1.0015,
+	1.0012,
+	1.0009,
+	1.0007,
+	1
+];
+const MORPH_MS = 736;
+const ease = (t) => {
+	const at = t * MORPH_MS / 16;
+	const i = Math.min(Math.floor(at), MORPH_CURVE.length - 2);
+	const a = MORPH_CURVE[i];
+	return a + (MORPH_CURVE[i + 1] - a) * (at - i);
+};
+/**
+* Follows `target` (0 or 1) on the morph spring and reports progress to
+* `apply` every frame, mutating the DOM directly rather than re-rendering.
+* It is interruptible: a new target mid-flight starts from where the value is.
+* The first render, and reduced motion, jump straight to the target.
+*/
+function useSpringProgress(target, apply) {
+	const current = useRef(target);
+	const frame = useRef(0);
+	const applyRef = useRef(apply);
+	const first = useRef(true);
+	useEffect(() => {
+		applyRef.current = apply;
+	});
+	useEffect(() => {
+		cancelAnimationFrame(frame.current);
+		if (first.current || prefersReducedMotion()) {
+			first.current = false;
+			current.current = target;
+			applyRef.current(target);
+			return;
+		}
+		const from = current.current;
+		const start = performance.now();
+		const tick = (now) => {
+			const t = Math.min(Math.max((now - start) / MORPH_MS, 0), 1);
+			current.current = from + (target - from) * ease(t);
+			applyRef.current(current.current);
+			if (t < 1) frame.current = requestAnimationFrame(tick);
+		};
+		frame.current = requestAnimationFrame(tick);
+		return () => cancelAnimationFrame(frame.current);
+	}, [target]);
+}
+/** Interpolates the numbers of a path whose two states have the same commands. */
+function lerpPath(from, to, progress) {
+	const a = from.match(/-?\d*\.?\d+/g).map(Number);
+	const b = to.match(/-?\d*\.?\d+/g).map(Number);
+	let i = 0;
+	return from.replace(/-?\d*\.?\d+/g, () => {
+		const n = a[i] + (b[i] - a[i]) * progress;
+		i += 1;
+		return String(Math.round(n * 1e3) / 1e3);
+	});
+}
+//#endregion
+export { lerpPath, useSpringProgress };
+
+//# sourceMappingURL=spring-progress.js.map

package/dist/lib/spring-progress.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"spring-progress.js","names":[],"sources":["../../src/lib/spring-progress.ts"],"sourcesContent":["import { useEffect, useRef } from \"react\";\n\nimport { prefersReducedMotion } from \"./motion.js\";\n\n/**\n * The morph spring (--ease-morph, --duration-morph: visualDuration 0.42s, bounce\n * 0.16), sampled every 16ms from Motion's solver. It is here as numbers because a\n * script has to evaluate it: CSS cannot interpolate the `d` of a path in every\n * browser, so an icon that morphs its outline drives the path from this.\n */\nconst MORPH_CURVE: readonly number[] = [\n  0, 0.0178, 0.0636, 0.1279, 0.2033, 0.2841, 0.366, 0.4459, 0.5218, 0.5921, 0.6562, 0.7136, 0.7643,\n  0.8086, 0.8466, 0.879, 0.9063, 0.9289, 0.9475, 0.9626, 0.9746, 0.9841, 0.9914, 0.9969, 1.001,\n  1.0038, 1.0058, 1.0069, 1.0075, 1.0077, 1.0076, 1.0072, 1.0067, 1.0062, 1.0055, 1.0049, 1.0043,\n  1.0037, 1.0032, 1.0027, 1.0022, 1.0018, 1.0015, 1.0012, 1.0009, 1.0007, 1,\n];\nconst MORPH_MS = 736;\n\nconst ease = (t: number) => {\n  const at = (t * MORPH_MS) / 16;\n  const i = Math.min(Math.floor(at), MORPH_CURVE.length - 2);\n  const a = MORPH_CURVE[i]!;\n  const b = MORPH_CURVE[i + 1]!;\n  return a + (b - a) * (at - i);\n};\n\n/**\n * Follows `target` (0 or 1) on the morph spring and reports progress to\n * `apply` every frame, mutating the DOM directly rather than re-rendering.\n * It is interruptible: a new target mid-flight starts from where the value is.\n * The first render, and reduced motion, jump straight to the target.\n */\nexport function useSpringProgress(target: number, apply: (progress: number) => void) {\n  const current = useRef(target);\n  const frame = useRef(0);\n  const applyRef = useRef(apply);\n  const first = useRef(true);\n\n  useEffect(() => {\n    applyRef.current = apply;\n  });\n\n  useEffect(() => {\n    cancelAnimationFrame(frame.current);\n    if (first.current || prefersReducedMotion()) {\n      first.current = false;\n      current.current = target;\n      applyRef.current(target);\n      return;\n    }\n    const from = current.current;\n    const start = performance.now();\n    const tick = (now: number) => {\n      // A frame's timestamp can precede `start`; a negative t would index the curve at -1.\n      const t = Math.min(Math.max((now - start) / MORPH_MS, 0), 1);\n      current.current = from + (target - from) * ease(t);\n      applyRef.current(current.current);\n      if (t < 1) frame.current = requestAnimationFrame(tick);\n    };\n    frame.current = requestAnimationFrame(tick);\n    return () => cancelAnimationFrame(frame.current);\n  }, [target]);\n}\n\n/** Interpolates the numbers of a path whose two states have the same commands. */\nexport function lerpPath(from: string, to: string, progress: number) {\n  const a = from.match(/-?\\d*\\.?\\d+/g)!.map(Number);\n  const b = to.match(/-?\\d*\\.?\\d+/g)!.map(Number);\n  let i = 0;\n  return from.replace(/-?\\d*\\.?\\d+/g, () => {\n    const n = a[i]! + (b[i]! - a[i]!) * progress;\n    i += 1;\n    return String(Math.round(n * 1000) / 1000);\n  });\n}\n"],"mappings":";;;;;;;;;AAUA,MAAM,cAAiC;CACrC;CAAG;CAAQ;CAAQ;CAAQ;CAAQ;CAAQ;CAAO;CAAQ;CAAQ;CAAQ;CAAQ;CAAQ;CAC1F;CAAQ;CAAQ;CAAO;CAAQ;CAAQ;CAAQ;CAAQ;CAAQ;CAAQ;CAAQ;CAAQ;CACvF;CAAQ;CAAQ;CAAQ;CAAQ;CAAQ;CAAQ;CAAQ;CAAQ;CAAQ;CAAQ;CAAQ;CACxF;CAAQ;CAAQ;CAAQ;CAAQ;CAAQ;CAAQ;CAAQ;CAAQ;CAAQ;AAC1E;AACA,MAAM,WAAW;AAEjB,MAAM,QAAQ,MAAc;CAC1B,MAAM,KAAM,IAAI,WAAY;CAC5B,MAAM,IAAI,KAAK,IAAI,KAAK,MAAM,EAAE,GAAG,YAAY,SAAS,CAAC;CACzD,MAAM,IAAI,YAAY;CAEtB,OAAO,KADG,YAAY,IAAI,KACV,MAAM,KAAK;AAC7B;;;;;;;AAQA,SAAgB,kBAAkB,QAAgB,OAAmC;CACnF,MAAM,UAAU,OAAO,MAAM;CAC7B,MAAM,QAAQ,OAAO,CAAC;CACtB,MAAM,WAAW,OAAO,KAAK;CAC7B,MAAM,QAAQ,OAAO,IAAI;CAEzB,gBAAgB;EACd,SAAS,UAAU;CACrB,CAAC;CAED,gBAAgB;EACd,qBAAqB,MAAM,OAAO;EAClC,IAAI,MAAM,WAAW,qBAAqB,GAAG;GAC3C,MAAM,UAAU;GAChB,QAAQ,UAAU;GAClB,SAAS,QAAQ,MAAM;GACvB;EACF;EACA,MAAM,OAAO,QAAQ;EACrB,MAAM,QAAQ,YAAY,IAAI;EAC9B,MAAM,QAAQ,QAAgB;GAE5B,MAAM,IAAI,KAAK,IAAI,KAAK,KAAK,MAAM,SAAS,UAAU,CAAC,GAAG,CAAC;GAC3D,QAAQ,UAAU,QAAQ,SAAS,QAAQ,KAAK,CAAC;GACjD,SAAS,QAAQ,QAAQ,OAAO;GAChC,IAAI,IAAI,GAAG,MAAM,UAAU,sBAAsB,IAAI;EACvD;EACA,MAAM,UAAU,sBAAsB,IAAI;EAC1C,aAAa,qBAAqB,MAAM,OAAO;CACjD,GAAG,CAAC,MAAM,CAAC;AACb;;AAGA,SAAgB,SAAS,MAAc,IAAY,UAAkB;CACnE,MAAM,IAAI,KAAK,MAAM,cAAc,CAAC,CAAE,IAAI,MAAM;CAChD,MAAM,IAAI,GAAG,MAAM,cAAc,CAAC,CAAE,IAAI,MAAM;CAC9C,IAAI,IAAI;CACR,OAAO,KAAK,QAAQ,sBAAsB;EACxC,MAAM,IAAI,EAAE,MAAO,EAAE,KAAM,EAAE,MAAO;EACpC,KAAK;EACL,OAAO,OAAO,KAAK,MAAM,IAAI,GAAI,IAAI,GAAI;CAC3C,CAAC;AACH"}

package/dist/lib/svg-id.js

@@ -0,0 +1,10 @@
+import { useId } from "react";
+//#region src/lib/svg-id.ts
+/** An id safe inside url(#...), for masks and clip paths: React's own ids hold characters (colons, underscores) that break the reference. */
+function useSvgId() {
+	return useId().replace(/[^a-zA-Z0-9-]/g, "");
+}
+//#endregion
+export { useSvgId };
+
+//# sourceMappingURL=svg-id.js.map

package/dist/lib/svg-id.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"svg-id.js","names":[],"sources":["../../src/lib/svg-id.ts"],"sourcesContent":["import { useId } from \"react\";\n\n/** An id safe inside url(#...), for masks and clip paths: React's own ids hold characters (colons, underscores) that break the reference. */\nexport function useSvgId() {\n  return useId().replace(/[^a-zA-Z0-9-]/g, \"\");\n}\n"],"mappings":";;;AAGA,SAAgB,WAAW;CACzB,OAAO,MAAM,CAAC,CAAC,QAAQ,kBAAkB,EAAE;AAC7C"}

package/dist/lib/swap-text.js

@@ -0,0 +1,77 @@
+import { cn } from "./cn.js";
+import { useExitBackstop, useIsomorphicLayoutEffect, useLeavingItems } from "./motion.js";
+import { useCallback, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/lib/swap-text.tsx
+const LEAVING = {
+	rise: "absolute motion-safe:animate-field-swap-out motion-reduce:animate-fade-out",
+	roll: "absolute motion-safe:animate-field-swap-out motion-reduce:animate-fade-out",
+	slide: "absolute motion-safe:animate-calendar-title-out motion-reduce:animate-fade-out",
+	word: "absolute motion-safe:animate-range-word-out motion-reduce:animate-range-word-fade-out",
+	glyph: "absolute motion-safe:animate-glyph-swap-out motion-reduce:animate-fade-out",
+	dot: "absolute motion-safe:animate-avatar-dot-out motion-reduce:animate-fade-out"
+};
+const ARRIVING = {
+	rise: "inline-block motion-safe:animate-field-swap-in motion-reduce:animate-field-swap-fade-in",
+	roll: "inline-block motion-safe:animate-select-value-in motion-reduce:animate-fade-in",
+	slide: "inline-block motion-safe:animate-calendar-title-in motion-reduce:animate-fade-in",
+	word: "inline-block motion-safe:animate-range-word-in motion-reduce:animate-fade-in",
+	glyph: "inline-block motion-safe:animate-glyph-swap-in motion-reduce:animate-fade-in",
+	dot: "inline-block motion-safe:animate-avatar-dot-in motion-reduce:animate-fade-in"
+};
+/** A replaced piece of content on its way out, popped out of flow where it stood and lifting away. */
+function Leaving({ id, empty, rect, motion, onDone, children }) {
+	const remove = useCallback(() => onDone(id), [onDone, id]);
+	useExitBackstop(true, remove);
+	useIsomorphicLayoutEffect(() => {
+		if (empty) remove();
+	}, [empty, remove]);
+	if (empty) return null;
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		"data-leaving": "",
+		onAnimationEnd: (event) => {
+			if (event.target === event.currentTarget) remove();
+		},
+		style: rect,
+		className: LEAVING[motion],
+		children
+	});
+}
+/**
+* Content that is replaced as a whole when `swapKey` changes: the new content
+* rises in from `dir` (1 from below, -1 from above; one variable shared with the
+* leaving content so both follow the newest direction) while the old content,
+* kept where it stood, lifts away the other way. An empty `swapKey` shows nothing
+* (and the content before it leaves). Nothing animates on first mount, and
+* reduced motion fades instead of moving. This is for the eye only: a screen
+* reader reads the caller's own copy. The wrapper is `position: relative`, which
+* the popped-out content is placed against.
+*/
+function SwapText({ swapKey, dir = 1, motion = "rise", className, children }) {
+	const ref = useRef(null);
+	const { leaving, changed, remove } = useLeavingItems(swapKey, {
+		key: swapKey,
+		node: children
+	}, () => ref.current);
+	return /* @__PURE__ */ jsxs("span", {
+		style: { "--dir": dir },
+		className: cn("relative", className),
+		children: [leaving.map((item) => /* @__PURE__ */ jsx(Leaving, {
+			id: item.id,
+			empty: item.value.key === "",
+			rect: item.rect,
+			motion,
+			onDone: remove,
+			children: item.value.node
+		}, item.id)), swapKey ? /* @__PURE__ */ jsx("span", {
+			ref,
+			className: changed ? ARRIVING[motion] : "inline-block",
+			children
+		}, swapKey) : null]
+	});
+}
+//#endregion
+export { SwapText };
+
+//# sourceMappingURL=swap-text.js.map

package/dist/lib/swap-text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"swap-text.js","names":[],"sources":["../../src/lib/swap-text.tsx"],"sourcesContent":["import { useCallback, useRef, type CSSProperties, type ReactNode } from \"react\";\n\nimport { cn } from \"./cn.js\";\nimport { useExitBackstop, useIsomorphicLayoutEffect, useLeavingItems } from \"./motion.js\";\nimport type { Rect } from \"./motion.js\";\n\n/**\n * How replaced content moves. `rise`: up or down a little (a field message). `roll`:\n * a little further, and a 120ms fade under reduced motion (the value a picker shows).\n * `slide`: sideways (a calendar's month title). `word`: a word of a rolling label.\n * `glyph`: an icon, which grows in from small and blurred. `dot`: a presence dot.\n */\nexport type SwapMotion = \"rise\" | \"roll\" | \"slide\" | \"word\" | \"glyph\" | \"dot\";\n\n// Static strings: Tailwind scans source text, so a class built at runtime would never be emitted.\nconst LEAVING: Record<SwapMotion, string> = {\n  rise: \"absolute motion-safe:animate-field-swap-out motion-reduce:animate-fade-out\",\n  roll: \"absolute motion-safe:animate-field-swap-out motion-reduce:animate-fade-out\",\n  slide: \"absolute motion-safe:animate-calendar-title-out motion-reduce:animate-fade-out\",\n  word: \"absolute motion-safe:animate-range-word-out motion-reduce:animate-range-word-fade-out\",\n  glyph: \"absolute motion-safe:animate-glyph-swap-out motion-reduce:animate-fade-out\",\n  dot: \"absolute motion-safe:animate-avatar-dot-out motion-reduce:animate-fade-out\",\n};\n\nconst ARRIVING: Record<SwapMotion, string> = {\n  rise: \"inline-block motion-safe:animate-field-swap-in motion-reduce:animate-field-swap-fade-in\",\n  roll: \"inline-block motion-safe:animate-select-value-in motion-reduce:animate-fade-in\",\n  slide: \"inline-block motion-safe:animate-calendar-title-in motion-reduce:animate-fade-in\",\n  word: \"inline-block motion-safe:animate-range-word-in motion-reduce:animate-fade-in\",\n  glyph: \"inline-block motion-safe:animate-glyph-swap-in motion-reduce:animate-fade-in\",\n  dot: \"inline-block motion-safe:animate-avatar-dot-in motion-reduce:animate-fade-in\",\n};\n\n/** A replaced piece of content on its way out, popped out of flow where it stood and lifting away. */\nfunction Leaving({\n  id,\n  empty,\n  rect,\n  motion,\n  onDone,\n  children,\n}: {\n  id: number;\n  empty: boolean;\n  rect: Rect;\n  motion: SwapMotion;\n  onDone: (id: number) => void;\n  children: ReactNode;\n}) {\n  const remove = useCallback(() => onDone(id), [onDone, id]);\n  useExitBackstop(true, remove);\n  // The empty value of \"nothing shown\" has nothing to lift away.\n  useIsomorphicLayoutEffect(() => {\n    if (empty) remove();\n  }, [empty, remove]);\n  if (empty) return null;\n  return (\n    <span\n      aria-hidden=\"true\"\n      data-leaving=\"\"\n      onAnimationEnd={(event) => {\n        if (event.target === event.currentTarget) remove();\n      }}\n      style={rect}\n      className={LEAVING[motion]}\n    >\n      {children}\n    </span>\n  );\n}\n\n/**\n * Content that is replaced as a whole when `swapKey` changes: the new content\n * rises in from `dir` (1 from below, -1 from above; one variable shared with the\n * leaving content so both follow the newest direction) while the old content,\n * kept where it stood, lifts away the other way. An empty `swapKey` shows nothing\n * (and the content before it leaves). Nothing animates on first mount, and\n * reduced motion fades instead of moving. This is for the eye only: a screen\n * reader reads the caller's own copy. The wrapper is `position: relative`, which\n * the popped-out content is placed against.\n */\nexport function SwapText({\n  swapKey,\n  dir = 1,\n  motion = \"rise\",\n  className,\n  children,\n}: {\n  swapKey: string;\n  dir?: number;\n  /** How it moves. `dir` is 1 from below or forward, -1 from above or back. @default \"rise\" */\n  motion?: SwapMotion;\n  className?: string;\n  children: ReactNode;\n}) {\n  const ref = useRef<HTMLSpanElement>(null);\n  const { leaving, changed, remove } = useLeavingItems(\n    swapKey,\n    { key: swapKey, node: children },\n    () => ref.current,\n  );\n  return (\n    <span style={{ \"--dir\": dir } as CSSProperties} className={cn(\"relative\", className)}>\n      {leaving.map((item) => (\n        <Leaving\n          key={item.id}\n          id={item.id}\n          empty={item.value.key === \"\"}\n          rect={item.rect}\n          motion={motion}\n          onDone={remove}\n        >\n          {item.value.node}\n        </Leaving>\n      ))}\n      {swapKey ? (\n        <span\n          key={swapKey}\n          ref={ref}\n          className={changed ? ARRIVING[motion] : \"inline-block\"}\n        >\n          {children}\n        </span>\n      ) : null}\n    </span>\n  );\n}\n"],"mappings":";;;;;AAeA,MAAM,UAAsC;CAC1C,MAAM;CACN,MAAM;CACN,OAAO;CACP,MAAM;CACN,OAAO;CACP,KAAK;AACP;AAEA,MAAM,WAAuC;CAC3C,MAAM;CACN,MAAM;CACN,OAAO;CACP,MAAM;CACN,OAAO;CACP,KAAK;AACP;;AAGA,SAAS,QAAQ,EACf,IACA,OACA,MACA,QACA,QACA,YAQC;CACD,MAAM,SAAS,kBAAkB,OAAO,EAAE,GAAG,CAAC,QAAQ,EAAE,CAAC;CACzD,gBAAgB,MAAM,MAAM;CAE5B,gCAAgC;EAC9B,IAAI,OAAO,OAAO;CACpB,GAAG,CAAC,OAAO,MAAM,CAAC;CAClB,IAAI,OAAO,OAAO;CAClB,OACE,oBAAC,QAAD;EACE,eAAY;EACZ,gBAAa;EACb,iBAAiB,UAAU;GACzB,IAAI,MAAM,WAAW,MAAM,eAAe,OAAO;EACnD;EACA,OAAO;EACP,WAAW,QAAQ;EAElB;CACG,CAAA;AAEV;;;;;;;;;;;AAYA,SAAgB,SAAS,EACvB,SACA,MAAM,GACN,SAAS,QACT,WACA,YAQC;CACD,MAAM,MAAM,OAAwB,IAAI;CACxC,MAAM,EAAE,SAAS,SAAS,WAAW,gBACnC,SACA;EAAE,KAAK;EAAS,MAAM;CAAS,SACzB,IAAI,OACZ;CACA,OACE,qBAAC,QAAD;EAAM,OAAO,EAAE,SAAS,IAAI;EAAoB,WAAW,GAAG,YAAY,SAAS;EAAnF,UAAA,CACG,QAAQ,KAAK,SACZ,oBAAC,SAAD;GAEE,IAAI,KAAK;GACT,OAAO,KAAK,MAAM,QAAQ;GAC1B,MAAM,KAAK;GACH;GACR,QAAQ;GAEP,UAAA,KAAK,MAAM;EACL,GARF,KAAK,EAQH,CACV,GACA,UACC,oBAAC,QAAD;GAEO;GACL,WAAW,UAAU,SAAS,UAAU;GAEvC;EACG,GALC,OAKD,IACJ,IACA;;AAEV"}

package/dist/lib/use-copy-feedback.js

@@ -0,0 +1,36 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+//#region src/lib/use-copy-feedback.ts
+/** Clipboard state for actions that render their own button: copy, show copied or failed for a while, then go back to idle. */
+function useCopyFeedback(duration = 1900) {
+	const [state, setState] = useState("idle");
+	const timeout = useRef(null);
+	const reset = useCallback(() => {
+		if (timeout.current) clearTimeout(timeout.current);
+		timeout.current = null;
+		setState("idle");
+	}, []);
+	useEffect(() => () => {
+		if (timeout.current) clearTimeout(timeout.current);
+	}, []);
+	return {
+		state,
+		copy: useCallback(async (value) => {
+			if (timeout.current) clearTimeout(timeout.current);
+			try {
+				await navigator.clipboard.writeText(value);
+				setState("copied");
+				timeout.current = setTimeout(reset, duration);
+				return true;
+			} catch {
+				setState("error");
+				timeout.current = setTimeout(reset, duration);
+				return false;
+			}
+		}, [duration, reset]),
+		reset
+	};
+}
+//#endregion
+export { useCopyFeedback };
+
+//# sourceMappingURL=use-copy-feedback.js.map

package/dist/lib/use-copy-feedback.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-copy-feedback.js","names":[],"sources":["../../src/lib/use-copy-feedback.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from \"react\";\n\nexport type CopyFeedbackState = \"idle\" | \"copied\" | \"error\";\n\n/** Clipboard state for actions that render their own button: copy, show copied or failed for a while, then go back to idle. */\nexport function useCopyFeedback(duration = 1900) {\n  const [state, setState] = useState<CopyFeedbackState>(\"idle\");\n  const timeout = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  const reset = useCallback(() => {\n    if (timeout.current) clearTimeout(timeout.current);\n    timeout.current = null;\n    setState(\"idle\");\n  }, []);\n\n  useEffect(\n    () => () => {\n      if (timeout.current) clearTimeout(timeout.current);\n    },\n    [],\n  );\n\n  /** Resolves true if the text reached the clipboard. */\n  const copy = useCallback(\n    async (value: string) => {\n      if (timeout.current) clearTimeout(timeout.current);\n      try {\n        await navigator.clipboard.writeText(value);\n        setState(\"copied\");\n        timeout.current = setTimeout(reset, duration);\n        return true;\n      } catch {\n        setState(\"error\");\n        timeout.current = setTimeout(reset, duration);\n        return false;\n      }\n    },\n    [duration, reset],\n  );\n\n  return { state, copy, reset };\n}\n"],"mappings":";;;AAKA,SAAgB,gBAAgB,WAAW,MAAM;CAC/C,MAAM,CAAC,OAAO,YAAY,SAA4B,MAAM;CAC5D,MAAM,UAAU,OAA6C,IAAI;CAEjE,MAAM,QAAQ,kBAAkB;EAC9B,IAAI,QAAQ,SAAS,aAAa,QAAQ,OAAO;EACjD,QAAQ,UAAU;EAClB,SAAS,MAAM;CACjB,GAAG,CAAC,CAAC;CAEL,sBACc;EACV,IAAI,QAAQ,SAAS,aAAa,QAAQ,OAAO;CACnD,GACA,CAAC,CACH;CAoBA,OAAO;EAAE;EAAO,MAjBH,YACX,OAAO,UAAkB;GACvB,IAAI,QAAQ,SAAS,aAAa,QAAQ,OAAO;GACjD,IAAI;IACF,MAAM,UAAU,UAAU,UAAU,KAAK;IACzC,SAAS,QAAQ;IACjB,QAAQ,UAAU,WAAW,OAAO,QAAQ;IAC5C,OAAO;GACT,QAAQ;IACN,SAAS,OAAO;IAChB,QAAQ,UAAU,WAAW,OAAO,QAAQ;IAC5C,OAAO;GACT;EACF,GACA,CAAC,UAAU,KAAK,CAGC;EAAG;CAAM;AAC9B"}

package/dist/menu/menu.d.ts

@@ -1,5 +1,5 @@
-import { MenuItemProps, MenuProps, MenuTrigger, PopoverProps } from "react-aria-components";
 import { ReactNode } from "react";
+import { MenuItemProps, MenuProps, MenuTrigger, PopoverProps } from "react-aria-components";
 //#region src/menu/menu.d.ts
 /**
  * Menu, ported from the legacy shadcn/Radix `dropdown-menu` onto React
@@ -68,7 +68,7 @@ interface MenuProps$1 extends Omit<MenuProps<object>, "className" | "style" | "c
   /** Gap between the trigger and the menu. @default 4 */
   offset?: number;
 }
-declare function Menu$1({ children, className, placement, offset, ...props }: MenuProps$1): import("react").JSX.Element;
+declare const Menu$1: import("react").ForwardRefExoticComponent<MenuProps$1 & import("react").RefAttributes<HTMLDivElement>>;
 /**
  * One menu row.
  *
@@ -80,7 +80,7 @@ interface MenuItemProps$1 extends Omit<MenuItemProps, "className" | "style"> {
   /** Extra classes. Merged last, so they win conflicts with ours. */
   className?: string;
 }
-declare function MenuItem$1({ className, ...props }: MenuItemProps$1): import("react").JSX.Element;
+declare const MenuItem$1: import("react").ForwardRefExoticComponent<MenuItemProps$1 & import("react").RefAttributes<HTMLDivElement>>;
 /**
  * A divider between groups of items.
  *
@@ -90,9 +90,9 @@ declare function MenuItem$1({ className, ...props }: MenuItemProps$1): import("r
  * standalone, because `MenuInner` supplies `elementType: 'div'` -- an
  * `<hr>` is not valid inside a `role="menu"` container.
  */
-export declare function MenuSeparator({ className }: {
+export declare const MenuSeparator: import("react").ForwardRefExoticComponent<{
   className?: string;
-}): import("react").JSX.Element;
+} & import("react").RefAttributes<HTMLElement>>;
 //#endregion
 export { Menu$1 as Menu, MenuItem$1 as MenuItem, MenuItemProps$1 as MenuItemProps, MenuProps$1 as MenuProps, MenuTrigger };
 //# sourceMappingURL=menu.d.ts.map

package/dist/menu/menu.js

@@ -1,6 +1,7 @@
 "use client";
 import { cn } from "../lib/cn.js";
 import { cva } from "class-variance-authority";
+import { forwardRef } from "react";
 import { Menu, MenuItem, MenuTrigger, Popover, Separator } from "react-aria-components";
 import { jsx } from "react/jsx-runtime";
 //#region src/menu/menu.tsx
@@ -57,27 +58,29 @@ const menuItemVariants = cva([
 	"[&_svg:not([class*='size-'])]:size-(--icon-sm)"
 ]);
 const menuSeparatorVariants = cva(["-mx-1 my-1 h-px bg-border border-none"]);
-function Menu$1({ children, className, placement = "bottom start", offset = 4, ...props }) {
+const Menu$1 = forwardRef(function Menu$2({ children, className, placement = "bottom start", offset = 4, ...props }, ref) {
 	return /* @__PURE__ */ jsx(Popover, {
 		placement,
 		offset,
 		"data-slot": "menu-popover",
 		className: cn(menuPopoverVariants(), className),
 		children: /* @__PURE__ */ jsx(Menu, {
+			ref,
 			...props,
 			"data-slot": "menu",
 			className: menuVariants(),
 			children
 		})
 	});
-}
-function MenuItem$1({ className, ...props }) {
+});
+const MenuItem$1 = forwardRef(function MenuItem$2({ className, ...props }, ref) {
 	return /* @__PURE__ */ jsx(MenuItem, {
+		ref,
 		...props,
 		"data-slot": "menu-item",
 		className: cn(menuItemVariants(), className)
 	});
-}
+});
 /**
 * A divider between groups of items.
 *
@@ -87,12 +90,13 @@ function MenuItem$1({ className, ...props }) {
 * standalone, because `MenuInner` supplies `elementType: 'div'` -- an
 * `<hr>` is not valid inside a `role="menu"` container.
 */
-function MenuSeparator({ className }) {
+const MenuSeparator = forwardRef(function MenuSeparator({ className }, ref) {
 	return /* @__PURE__ */ jsx(Separator, {
+		ref,
 		"data-slot": "menu-separator",
 		className: cn(menuSeparatorVariants(), className)
 	});
-}
+});
 //#endregion
 export { Menu$1 as Menu, MenuItem$1 as MenuItem, MenuSeparator, MenuTrigger, menuItemVariants, menuPopoverVariants, menuSeparatorVariants, menuVariants };
 

package/dist/menu/menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu.js","names":["Menu","AriaPopover","AriaMenu","MenuItem","AriaMenuItem","AriaSeparator"],"sources":["../../src/menu/menu.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport type { ReactNode } from \"react\";\nimport {\n  Menu as AriaMenu,\n  MenuItem as AriaMenuItem,\n  Popover as AriaPopover,\n  Separator as AriaSeparator,\n  type MenuItemProps as AriaMenuItemProps,\n  type MenuProps as AriaMenuProps,\n  type PopoverProps as AriaPopoverProps,\n} from \"react-aria-components\";\n\nimport { cn } from \"../lib/cn.js\";\n\n/**\n * Menu, ported from the legacy shadcn/Radix `dropdown-menu` onto React\n * Aria's Menu collection.\n *\n * FIFTEEN EXPORTS BECOME FOUR, and the census is unambiguous about it. Ten\n * files import the legacy component but only EIGHT render anything --\n * `header.tsx` and `PollQuizCreator.tsx` import parts and use none. Across\n * those eight: `DropdownMenuItem` 42, `DropdownMenu` 13,\n * `DropdownMenuTrigger` 13, `DropdownMenuContent` 13,\n * `DropdownMenuSeparator` 2.\n *\n * Everything else is ZERO: `Group`, `CheckboxItem`, `RadioGroup`,\n * `RadioItem`, `Label`, `Shortcut`, `Sub`, `SubTrigger`, `SubContent`,\n * `Portal`. Nine exports, no call sites. React Aria has `MenuSection`,\n * `Header` and selection modes ready if any of them turns out to be\n * wanted -- they are one component each, added the day something needs one.\n *\n * `variant=\"destructive\"` is also never passed, which resolves a real\n * problem rather than dodging one: `destructive-strong` on a `muted` hover\n * fill measures 4.29:1 against a 4.5 floor. The legacy has the same defect\n * unmeasured and worse (its `destructive/10` composite gives 4.01:1). With\n * no call site there is nothing to ship and nothing to weaken the contract\n * for.\n *\n * The surface is `card`, not a `popover` role: in the legacy theme\n * `--popover` is byte-identical to `--card` in both themes. Item hover is\n * `muted`, not `accent`: `--accent` is byte-identical to `--muted`. Two\n * more of the migration plan's proposed roles that already exist.\n *\n * Every string in the cva blocks below is a STATIC literal.\n */\nexport const menuPopoverVariants = cva([\n  // min-w-32 is 8rem, the legacy min-w-[8rem] -- but as a spacing-scale\n  // step rather than a bracket value that check:hardcoding rejects.\n  \"min-w-32 overflow-y-auto\",\n  \"rounded-md border-(length:--border-width) border-border p-1\",\n  \"bg-card text-card-foreground shadow-floating\",\n  \"box-border font-sans text-sm leading-(--leading-normal)\",\n]);\n\nexport const menuVariants = cva([\n  \"flex flex-col outline-none\",\n]);\n\nexport const menuItemVariants = cva([\n  \"relative flex cursor-pointer select-none items-center gap-2\",\n  \"rounded-2xs px-2 py-1.5\",\n  \"box-border text-sm leading-(--leading-normal) text-card-foreground\",\n  \"outline-none\",\n\n  // data-focused, NOT :hover. React Aria drives one highlight from both\n  // pointer and keyboard, so the row under the mouse and the row the arrow\n  // keys reached are the same row -- the legacy used `focus:` for the\n  // keyboard and nothing for hover, so a mouse user saw no highlight at all\n  // until the item took focus.\n  \"data-[focused]:bg-muted\",\n\n  // The focus ring goes on the ITEM, and it is an outline rather than a\n  // background alone: a highlight made only of colour disappears under\n  // forced-colors, and axe has no rule that would notice.\n  \"data-[focus-visible]:outline-solid\",\n  \"data-[focus-visible]:outline-(length:--focus-ring-width)\",\n  \"data-[focus-visible]:outline-offset-(--focus-ring-offset)\",\n  \"data-[focus-visible]:outline-(--color-ring)\",\n\n  \"data-[disabled]:cursor-not-allowed data-[disabled]:opacity-(--opacity-disabled)\",\n  \"[&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  \"[&_svg:not([class*='size-'])]:size-(--icon-sm)\",\n]);\n\nexport const menuSeparatorVariants = cva([\"-mx-1 my-1 h-px bg-border border-none\"]);\n\n/**\n * A dropdown menu.\n *\n * @example\n * <MenuTrigger>\n *   <Button>Actions</Button>\n *   <Menu onAction={(key) => run(key)}>\n *     <MenuItem id=\"edit\">Edit</MenuItem>\n *     <MenuSeparator />\n *     <MenuItem id=\"delete\">Delete</MenuItem>\n *   </Menu>\n * </MenuTrigger>\n */\nexport interface MenuProps\n  extends Omit<AriaMenuProps<object>, \"className\" | \"style\" | \"children\" | \"items\"> {\n  /** `MenuItem` and `MenuSeparator` children. */\n  children?: ReactNode;\n  /** Extra classes for the popover. Merged last, so they win conflicts. */\n  className?: string;\n  /**\n   * Where the menu opens, as React Aria's single `placement` string.\n   *\n   * The legacy split this across `side`, `align`, `sideOffset` and\n   * `alignOffset`. Its census reads `align=\"end\"` 10 and `align=\"center\"`\n   * 2, always with the default bottom side -- so `\"bottom end\"` covers ten\n   * of the twelve.\n   *\n   * @default \"bottom start\"\n   */\n  placement?: AriaPopoverProps[\"placement\"];\n  /** Gap between the trigger and the menu. @default 4 */\n  offset?: number;\n}\n\nexport function Menu({\n  children,\n  className,\n  placement = \"bottom start\",\n  offset = 4,\n  ...props\n}: MenuProps) {\n  return (\n    <AriaPopover\n      placement={placement}\n      offset={offset}\n      data-slot=\"menu-popover\"\n      className={cn(menuPopoverVariants(), className)}\n    >\n      <AriaMenu {...props} data-slot=\"menu\" className={menuVariants()}>\n        {children}\n      </AriaMenu>\n    </AriaPopover>\n  );\n}\n\n/**\n * One menu row.\n *\n * @example\n * <MenuItem id=\"edit\">Edit</MenuItem>\n * <MenuItem href=\"/settings\">Settings</MenuItem>\n */\nexport interface MenuItemProps extends Omit<AriaMenuItemProps, \"className\" | \"style\"> {\n  /** Extra classes. Merged last, so they win conflicts with ours. */\n  className?: string;\n}\n\nexport function MenuItem({ className, ...props }: MenuItemProps) {\n  return (\n    <AriaMenuItem {...props} data-slot=\"menu-item\" className={cn(menuItemVariants(), className)} />\n  );\n}\n\n/**\n * A divider between groups of items.\n *\n * A real collection child: React Aria's `Separator` is a `SeparatorNode`,\n * so unlike an arbitrary element it is legal inside a Menu. Inside one it\n * renders `<div role=\"separator\">` rather than the `<hr>` it uses\n * standalone, because `MenuInner` supplies `elementType: 'div'` -- an\n * `<hr>` is not valid inside a `role=\"menu\"` container.\n */\nexport function MenuSeparator({ className }: { className?: string }) {\n  return (\n    <AriaSeparator\n      data-slot=\"menu-separator\"\n      className={cn(menuSeparatorVariants(), className)}\n    />\n  );\n}\n\n/**\n * Pairs a trigger with a menu and owns the open state.\n *\n * Re-exported from React Aria unchanged. It takes the trigger element\n * directly as its first child, which is what `asChild` was doing on all 13\n * legacy call sites.\n */\nexport { MenuTrigger } from \"react-aria-components\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+CA,MAAa,sBAAsB,IAAI;CAGrC;CACA;CACA;CACA;AACF,CAAC;AAED,MAAa,eAAe,IAAI,CAC9B,4BACF,CAAC;AAED,MAAa,mBAAmB,IAAI;CAClC;CACA;CACA;CACA;CAOA;CAKA;CACA;CACA;CACA;CAEA;CACA;CACA;AACF,CAAC;AAED,MAAa,wBAAwB,IAAI,CAAC,uCAAuC,CAAC;AAoClF,SAAgBA,OAAK,EACnB,UACA,WACA,YAAY,gBACZ,SAAS,GACT,GAAG,SACS;CACZ,OACE,oBAACC,SAAD;EACa;EACH;EACR,aAAU;EACV,WAAW,GAAG,oBAAoB,GAAG,SAAS;EAE9C,UAAA,oBAACC,MAAD;GAAU,GAAI;GAAO,aAAU;GAAO,WAAW,aAAa;GAC3D;EACO,CAAA;CACC,CAAA;AAEjB;AAcA,SAAgBC,WAAS,EAAE,WAAW,GAAG,SAAwB;CAC/D,OACE,oBAACC,UAAD;EAAc,GAAI;EAAO,aAAU;EAAY,WAAW,GAAG,iBAAiB,GAAG,SAAS;CAAI,CAAA;AAElG;;;;;;;;;;AAWA,SAAgB,cAAc,EAAE,aAAqC;CACnE,OACE,oBAACC,WAAD;EACE,aAAU;EACV,WAAW,GAAG,sBAAsB,GAAG,SAAS;CACjD,CAAA;AAEL"}
+{"version":3,"file":"menu.js","names":["Menu","AriaPopover","AriaMenu","MenuItem","AriaMenuItem","AriaSeparator"],"sources":["../../src/menu/menu.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport { forwardRef, type ReactNode } from \"react\";\nimport {\n  Menu as AriaMenu,\n  MenuItem as AriaMenuItem,\n  Popover as AriaPopover,\n  Separator as AriaSeparator,\n  type MenuItemProps as AriaMenuItemProps,\n  type MenuProps as AriaMenuProps,\n  type PopoverProps as AriaPopoverProps,\n} from \"react-aria-components\";\n\nimport { cn } from \"../lib/cn.js\";\n\n/**\n * Menu, ported from the legacy shadcn/Radix `dropdown-menu` onto React\n * Aria's Menu collection.\n *\n * FIFTEEN EXPORTS BECOME FOUR, and the census is unambiguous about it. Ten\n * files import the legacy component but only EIGHT render anything --\n * `header.tsx` and `PollQuizCreator.tsx` import parts and use none. Across\n * those eight: `DropdownMenuItem` 42, `DropdownMenu` 13,\n * `DropdownMenuTrigger` 13, `DropdownMenuContent` 13,\n * `DropdownMenuSeparator` 2.\n *\n * Everything else is ZERO: `Group`, `CheckboxItem`, `RadioGroup`,\n * `RadioItem`, `Label`, `Shortcut`, `Sub`, `SubTrigger`, `SubContent`,\n * `Portal`. Nine exports, no call sites. React Aria has `MenuSection`,\n * `Header` and selection modes ready if any of them turns out to be\n * wanted -- they are one component each, added the day something needs one.\n *\n * `variant=\"destructive\"` is also never passed, which resolves a real\n * problem rather than dodging one: `destructive-strong` on a `muted` hover\n * fill measures 4.29:1 against a 4.5 floor. The legacy has the same defect\n * unmeasured and worse (its `destructive/10` composite gives 4.01:1). With\n * no call site there is nothing to ship and nothing to weaken the contract\n * for.\n *\n * The surface is `card`, not a `popover` role: in the legacy theme\n * `--popover` is byte-identical to `--card` in both themes. Item hover is\n * `muted`, not `accent`: `--accent` is byte-identical to `--muted`. Two\n * more of the migration plan's proposed roles that already exist.\n *\n * Every string in the cva blocks below is a STATIC literal.\n */\nexport const menuPopoverVariants = cva([\n  // min-w-32 is 8rem, the legacy min-w-[8rem] -- but as a spacing-scale\n  // step rather than a bracket value that check:hardcoding rejects.\n  \"min-w-32 overflow-y-auto\",\n  \"rounded-md border-(length:--border-width) border-border p-1\",\n  \"bg-card text-card-foreground shadow-floating\",\n  \"box-border font-sans text-sm leading-(--leading-normal)\",\n]);\n\nexport const menuVariants = cva([\n  \"flex flex-col outline-none\",\n]);\n\nexport const menuItemVariants = cva([\n  \"relative flex cursor-pointer select-none items-center gap-2\",\n  \"rounded-2xs px-2 py-1.5\",\n  \"box-border text-sm leading-(--leading-normal) text-card-foreground\",\n  \"outline-none\",\n\n  // data-focused, NOT :hover. React Aria drives one highlight from both\n  // pointer and keyboard, so the row under the mouse and the row the arrow\n  // keys reached are the same row -- the legacy used `focus:` for the\n  // keyboard and nothing for hover, so a mouse user saw no highlight at all\n  // until the item took focus.\n  \"data-[focused]:bg-muted\",\n\n  // The focus ring goes on the ITEM, and it is an outline rather than a\n  // background alone: a highlight made only of colour disappears under\n  // forced-colors, and axe has no rule that would notice.\n  \"data-[focus-visible]:outline-solid\",\n  \"data-[focus-visible]:outline-(length:--focus-ring-width)\",\n  \"data-[focus-visible]:outline-offset-(--focus-ring-offset)\",\n  \"data-[focus-visible]:outline-(--color-ring)\",\n\n  \"data-[disabled]:cursor-not-allowed data-[disabled]:opacity-(--opacity-disabled)\",\n  \"[&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  \"[&_svg:not([class*='size-'])]:size-(--icon-sm)\",\n]);\n\nexport const menuSeparatorVariants = cva([\"-mx-1 my-1 h-px bg-border border-none\"]);\n\n/**\n * A dropdown menu.\n *\n * @example\n * <MenuTrigger>\n *   <Button>Actions</Button>\n *   <Menu onAction={(key) => run(key)}>\n *     <MenuItem id=\"edit\">Edit</MenuItem>\n *     <MenuSeparator />\n *     <MenuItem id=\"delete\">Delete</MenuItem>\n *   </Menu>\n * </MenuTrigger>\n */\nexport interface MenuProps\n  extends Omit<AriaMenuProps<object>, \"className\" | \"style\" | \"children\" | \"items\"> {\n  /** `MenuItem` and `MenuSeparator` children. */\n  children?: ReactNode;\n  /** Extra classes for the popover. Merged last, so they win conflicts. */\n  className?: string;\n  /**\n   * Where the menu opens, as React Aria's single `placement` string.\n   *\n   * The legacy split this across `side`, `align`, `sideOffset` and\n   * `alignOffset`. Its census reads `align=\"end\"` 10 and `align=\"center\"`\n   * 2, always with the default bottom side -- so `\"bottom end\"` covers ten\n   * of the twelve.\n   *\n   * @default \"bottom start\"\n   */\n  placement?: AriaPopoverProps[\"placement\"];\n  /** Gap between the trigger and the menu. @default 4 */\n  offset?: number;\n}\n\nexport const Menu = forwardRef<HTMLDivElement, MenuProps>(function Menu(\n  { children, className, placement = \"bottom start\", offset = 4, ...props },\n  ref,\n) {\n  return (\n    <AriaPopover\n      placement={placement}\n      offset={offset}\n      data-slot=\"menu-popover\"\n      className={cn(menuPopoverVariants(), className)}\n    >\n      <AriaMenu\n        // The ref goes on the MENU, not the POPOVER above. The popover here\n        // is purely a positioner -- same role as an overlay wrapper -- and\n        // the props spread and children already land on AriaMenu.\n        ref={ref}\n        {...props}\n        data-slot=\"menu\"\n        className={menuVariants()}\n      >\n        {children}\n      </AriaMenu>\n    </AriaPopover>\n  );\n});\n\n/**\n * One menu row.\n *\n * @example\n * <MenuItem id=\"edit\">Edit</MenuItem>\n * <MenuItem href=\"/settings\">Settings</MenuItem>\n */\nexport interface MenuItemProps extends Omit<AriaMenuItemProps, \"className\" | \"style\"> {\n  /** Extra classes. Merged last, so they win conflicts with ours. */\n  className?: string;\n}\n\nexport const MenuItem = forwardRef<HTMLDivElement, MenuItemProps>(function MenuItem(\n  { className, ...props },\n  ref,\n) {\n  return (\n    <AriaMenuItem\n      ref={ref}\n      {...props}\n      data-slot=\"menu-item\"\n      className={cn(menuItemVariants(), className)}\n    />\n  );\n});\n\n/**\n * A divider between groups of items.\n *\n * A real collection child: React Aria's `Separator` is a `SeparatorNode`,\n * so unlike an arbitrary element it is legal inside a Menu. Inside one it\n * renders `<div role=\"separator\">` rather than the `<hr>` it uses\n * standalone, because `MenuInner` supplies `elementType: 'div'` -- an\n * `<hr>` is not valid inside a `role=\"menu\"` container.\n */\nexport const MenuSeparator = forwardRef<HTMLElement, { className?: string }>(\n  function MenuSeparator({ className }, ref) {\n    return (\n      <AriaSeparator\n        ref={ref}\n        data-slot=\"menu-separator\"\n        className={cn(menuSeparatorVariants(), className)}\n      />\n    );\n  },\n);\n\n/**\n * Pairs a trigger with a menu and owns the open state.\n *\n * Re-exported from React Aria unchanged. It takes the trigger element\n * directly as its first child, which is what `asChild` was doing on all 13\n * legacy call sites.\n */\nexport { MenuTrigger } from \"react-aria-components\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+CA,MAAa,sBAAsB,IAAI;CAGrC;CACA;CACA;CACA;AACF,CAAC;AAED,MAAa,eAAe,IAAI,CAC9B,4BACF,CAAC;AAED,MAAa,mBAAmB,IAAI;CAClC;CACA;CACA;CACA;CAOA;CAKA;CACA;CACA;CACA;CAEA;CACA;CACA;AACF,CAAC;AAED,MAAa,wBAAwB,IAAI,CAAC,uCAAuC,CAAC;AAoClF,MAAaA,SAAO,WAAsC,SAASA,OACjE,EAAE,UAAU,WAAW,YAAY,gBAAgB,SAAS,GAAG,GAAG,SAClE,KACA;CACA,OACE,oBAACC,SAAD;EACa;EACH;EACR,aAAU;EACV,WAAW,GAAG,oBAAoB,GAAG,SAAS;EAE9C,UAAA,oBAACC,MAAD;GAIO;GACL,GAAI;GACJ,aAAU;GACV,WAAW,aAAa;GAEvB;EACO,CAAA;CACC,CAAA;AAEjB,CAAC;AAcD,MAAaC,aAAW,WAA0C,SAASA,WACzE,EAAE,WAAW,GAAG,SAChB,KACA;CACA,OACE,oBAACC,UAAD;EACO;EACL,GAAI;EACJ,aAAU;EACV,WAAW,GAAG,iBAAiB,GAAG,SAAS;CAC5C,CAAA;AAEL,CAAC;;;;;;;;;;AAWD,MAAa,gBAAgB,WAC3B,SAAS,cAAc,EAAE,aAAa,KAAK;CACzC,OACE,oBAACC,WAAD;EACO;EACL,aAAU;EACV,WAAW,GAAG,sBAAsB,GAAG,SAAS;CACjD,CAAA;AAEL,CACF"}

package/dist/page-header/index.d.ts

@@ -0,0 +1,2 @@
+import { PageHeader, PageHeaderProps, pageHeaderActionsVariants, pageHeaderBackVariants, pageHeaderDescriptionVariants, pageHeaderMetaVariants, pageHeaderRowVariants, pageHeaderTitleVariants, pageHeaderVariants } from "./page-header.js";
+export { PageHeader, type PageHeaderProps, pageHeaderActionsVariants, pageHeaderBackVariants, pageHeaderDescriptionVariants, pageHeaderMetaVariants, pageHeaderRowVariants, pageHeaderTitleVariants, pageHeaderVariants };

package/dist/page-header/index.js

@@ -0,0 +1,2 @@
+import { PageHeader, pageHeaderActionsVariants, pageHeaderBackVariants, pageHeaderDescriptionVariants, pageHeaderMetaVariants, pageHeaderRowVariants, pageHeaderTitleVariants, pageHeaderVariants } from "./page-header.js";
+export { PageHeader, pageHeaderActionsVariants, pageHeaderBackVariants, pageHeaderDescriptionVariants, pageHeaderMetaVariants, pageHeaderRowVariants, pageHeaderTitleVariants, pageHeaderVariants };

package/dist/page-header/page-header.d.ts

@@ -0,0 +1,75 @@
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+//#region src/page-header/page-header.d.ts
+/**
+ * PageHeader: the top of a page. One title, an optional line saying what the
+ * page is for, the page's own actions, a short piece of metadata and an
+ * optional way back.
+ *
+ * Presentational, so there is no React Aria base. It exists because a page
+ * title is the one element every screen has, and without a shared component
+ * each screen picks its own size, weight, spacing and action placement, so the
+ * title moves as a person moves between pages.
+ *
+ * The title renders the page's single `<h1>`. A page has one, and putting it
+ * here means a consumer cannot render two by accident.
+ *
+ * Every string in the cva blocks below is a STATIC literal. Tailwind scans
+ * source text, so a class assembled at runtime is invisible to it and would
+ * simply never be emitted.
+ */
+export declare const pageHeaderVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+/**
+ * Title block and actions share one row. `items-start` keeps the actions level
+ * with the title when a description wraps under it; `flex-wrap` moves the
+ * actions below the title on a narrow screen instead of squeezing it.
+ */
+export declare const pageHeaderRowVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const pageHeaderTitleVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const pageHeaderMetaVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+/**
+ * Capped at the md breakpoint (48rem), a readable measure for a sentence or
+ * two. The scale defines no container size between `max` and nothing, and a
+ * bracket length is rejected by check:hardcoding, so the token is referenced.
+ */
+export declare const pageHeaderDescriptionVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const pageHeaderActionsVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+export declare const pageHeaderBackVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+/**
+ * The header at the top of a page.
+ *
+ * @example
+ * <PageHeader
+ *   title="Projects"
+ *   description="Everything your team is working on."
+ *   meta="updated 14 Oct 2026"
+ *   actions={<Button>New project</Button>}
+ * />
+ */
+export interface PageHeaderProps extends Omit<ComponentPropsWithoutRef<"header">, "title"> {
+  /** The page's title. Rendered as the page's single `<h1>`. */
+  title: ReactNode;
+  /**
+   * One or two sentences under the title saying what the page is for.
+   * Muted, and capped at a readable measure.
+   */
+  description?: ReactNode;
+  /**
+   * The page's primary actions, right-aligned on the title row. They wrap
+   * below the title on a narrow screen. Pass buttons or links; the header
+   * spaces them and does not style them.
+   */
+  actions?: ReactNode;
+  /**
+   * A short piece of context inline after the title, on the same baseline:
+   * a date the figures are as of, a status chip, a count.
+   */
+  meta?: ReactNode;
+  /**
+   * A slot above the title for a way back, on a detail page. Supply the link
+   * yourself so it uses your router; the header sizes and colours the slot.
+   */
+  back?: ReactNode;
+}
+export declare const PageHeader: import("react").ForwardRefExoticComponent<PageHeaderProps & import("react").RefAttributes<HTMLElement>>;
+//#endregion
+//# sourceMappingURL=page-header.d.ts.map

package/dist/page-header/page-header.js

@@ -0,0 +1,83 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { cva } from "class-variance-authority";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/page-header/page-header.tsx
+/**
+* PageHeader: the top of a page. One title, an optional line saying what the
+* page is for, the page's own actions, a short piece of metadata and an
+* optional way back.
+*
+* Presentational, so there is no React Aria base. It exists because a page
+* title is the one element every screen has, and without a shared component
+* each screen picks its own size, weight, spacing and action placement, so the
+* title moves as a person moves between pages.
+*
+* The title renders the page's single `<h1>`. A page has one, and putting it
+* here means a consumer cannot render two by accident.
+*
+* Every string in the cva blocks below is a STATIC literal. Tailwind scans
+* source text, so a class assembled at runtime is invisible to it and would
+* simply never be emitted.
+*/
+const pageHeaderVariants = cva(["mb-6 block", "box-border font-sans text-foreground"]);
+/**
+* Title block and actions share one row. `items-start` keeps the actions level
+* with the title when a description wraps under it; `flex-wrap` moves the
+* actions below the title on a narrow screen instead of squeezing it.
+*/
+const pageHeaderRowVariants = cva("flex flex-wrap items-start justify-between gap-3");
+const pageHeaderTitleVariants = cva(["font-display text-h3 leading-(--leading-snug) font-semibold", "m-0"]);
+const pageHeaderMetaVariants = cva("text-xs leading-(--leading-normal) text-muted-foreground");
+/**
+* Capped at the md breakpoint (48rem), a readable measure for a sentence or
+* two. The scale defines no container size between `max` and nothing, and a
+* bracket length is rejected by check:hardcoding, so the token is referenced.
+*/
+const pageHeaderDescriptionVariants = cva(["mt-1 mb-0 max-w-(--breakpoint-md)", "text-sm leading-(--leading-normal) text-muted-foreground"]);
+const pageHeaderActionsVariants = cva("flex shrink-0 flex-wrap items-center gap-2");
+const pageHeaderBackVariants = cva("mb-2 text-xs leading-(--leading-normal) text-muted-foreground");
+const PageHeader = forwardRef(function PageHeader({ className, title, description, actions, meta, back, ...props }, ref) {
+	return /* @__PURE__ */ jsxs("header", {
+		ref,
+		...props,
+		"data-slot": "page-header",
+		className: cn(pageHeaderVariants(), className),
+		children: [back === void 0 ? null : /* @__PURE__ */ jsx("div", {
+			"data-slot": "page-header-back",
+			className: pageHeaderBackVariants(),
+			children: back
+		}), /* @__PURE__ */ jsxs("div", {
+			"data-slot": "page-header-row",
+			className: pageHeaderRowVariants(),
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "min-w-0 grow basis-64",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex flex-wrap items-baseline gap-x-3 gap-y-1",
+					children: [/* @__PURE__ */ jsx("h1", {
+						"data-slot": "page-header-title",
+						className: pageHeaderTitleVariants(),
+						children: title
+					}), meta === void 0 ? null : /* @__PURE__ */ jsx("div", {
+						"data-slot": "page-header-meta",
+						className: pageHeaderMetaVariants(),
+						children: meta
+					})]
+				}), description === void 0 ? null : /* @__PURE__ */ jsx("p", {
+					"data-slot": "page-header-description",
+					className: pageHeaderDescriptionVariants(),
+					children: description
+				})]
+			}), actions === void 0 ? null : /* @__PURE__ */ jsx("div", {
+				"data-slot": "page-header-actions",
+				className: pageHeaderActionsVariants(),
+				children: actions
+			})]
+		})]
+	});
+});
+//#endregion
+export { PageHeader, pageHeaderActionsVariants, pageHeaderBackVariants, pageHeaderDescriptionVariants, pageHeaderMetaVariants, pageHeaderRowVariants, pageHeaderTitleVariants, pageHeaderVariants };
+
+//# sourceMappingURL=page-header.js.map

package/dist/page-header/page-header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-header.js","names":[],"sources":["../../src/page-header/page-header.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva } from \"class-variance-authority\";\nimport { forwardRef, type ComponentPropsWithoutRef, type ReactNode } from \"react\";\n\nimport { cn } from \"../lib/cn.js\";\n\n/**\n * PageHeader: the top of a page. One title, an optional line saying what the\n * page is for, the page's own actions, a short piece of metadata and an\n * optional way back.\n *\n * Presentational, so there is no React Aria base. It exists because a page\n * title is the one element every screen has, and without a shared component\n * each screen picks its own size, weight, spacing and action placement, so the\n * title moves as a person moves between pages.\n *\n * The title renders the page's single `<h1>`. A page has one, and putting it\n * here means a consumer cannot render two by accident.\n *\n * Every string in the cva blocks below is a STATIC literal. Tailwind scans\n * source text, so a class assembled at runtime is invisible to it and would\n * simply never be emitted.\n */\nexport const pageHeaderVariants = cva([\n  \"mb-6 block\",\n  // box-border and font-sans are not boilerplate: the reset in\n  // @seekalfred/styles is opt-in, so a consumer may load none, and an\n  // unstyled document renders text in a serif.\n  \"box-border font-sans text-foreground\",\n]);\n\n/**\n * Title block and actions share one row. `items-start` keeps the actions level\n * with the title when a description wraps under it; `flex-wrap` moves the\n * actions below the title on a narrow screen instead of squeezing it.\n */\nexport const pageHeaderRowVariants = cva(\"flex flex-wrap items-start justify-between gap-3\");\n\nexport const pageHeaderTitleVariants = cva([\n  // leading-* AFTER text-*: tailwind-merge treats a later text-* as owning\n  // line-height and silently strips a leading-* that precedes it.\n  \"font-display text-h3 leading-(--leading-snug) font-semibold\",\n  // The user-agent <h1> ships a 0.67em block margin and font-size 2em.\n  \"m-0\",\n]);\n\nexport const pageHeaderMetaVariants = cva(\n  \"text-xs leading-(--leading-normal) text-muted-foreground\",\n);\n\n/**\n * Capped at the md breakpoint (48rem), a readable measure for a sentence or\n * two. The scale defines no container size between `max` and nothing, and a\n * bracket length is rejected by check:hardcoding, so the token is referenced.\n */\nexport const pageHeaderDescriptionVariants = cva([\n  \"mt-1 mb-0 max-w-(--breakpoint-md)\",\n  \"text-sm leading-(--leading-normal) text-muted-foreground\",\n]);\n\nexport const pageHeaderActionsVariants = cva(\"flex shrink-0 flex-wrap items-center gap-2\");\n\nexport const pageHeaderBackVariants = cva(\n  \"mb-2 text-xs leading-(--leading-normal) text-muted-foreground\",\n);\n\n/**\n * The header at the top of a page.\n *\n * @example\n * <PageHeader\n *   title=\"Projects\"\n *   description=\"Everything your team is working on.\"\n *   meta=\"updated 14 Oct 2026\"\n *   actions={<Button>New project</Button>}\n * />\n */\nexport interface PageHeaderProps\n  // The native `title` attribute is omitted so this component can use the\n  // name for its heading. A tooltip on a page header is not keyboard\n  // reachable, and silently shadowing it with a ReactNode would be a type\n  // error waiting for the first consumer who tried both.\n  extends Omit<ComponentPropsWithoutRef<\"header\">, \"title\"> {\n  /** The page's title. Rendered as the page's single `<h1>`. */\n  title: ReactNode;\n  /**\n   * One or two sentences under the title saying what the page is for.\n   * Muted, and capped at a readable measure.\n   */\n  description?: ReactNode;\n  /**\n   * The page's primary actions, right-aligned on the title row. They wrap\n   * below the title on a narrow screen. Pass buttons or links; the header\n   * spaces them and does not style them.\n   */\n  actions?: ReactNode;\n  /**\n   * A short piece of context inline after the title, on the same baseline:\n   * a date the figures are as of, a status chip, a count.\n   */\n  meta?: ReactNode;\n  /**\n   * A slot above the title for a way back, on a detail page. Supply the link\n   * yourself so it uses your router; the header sizes and colours the slot.\n   */\n  back?: ReactNode;\n}\n\nexport const PageHeader = forwardRef<HTMLElement, PageHeaderProps>(function PageHeader(\n  { className, title, description, actions, meta, back, ...props },\n  ref,\n) {\n  return (\n    <header\n      ref={ref}\n      {...props}\n      data-slot=\"page-header\"\n      className={cn(pageHeaderVariants(), className)}\n    >\n      {back === undefined ? null : (\n        <div data-slot=\"page-header-back\" className={pageHeaderBackVariants()}>\n          {back}\n        </div>\n      )}\n      <div data-slot=\"page-header-row\" className={pageHeaderRowVariants()}>\n        {/*\n         * grow from a 16rem basis, not flex-1. flex-1 is a 0% basis, so the\n         * row never wraps: the actions keep their width and the title is\n         * crushed into a one-word column beside them on a phone. A real basis\n         * is the width the title needs before the actions move below it.\n         */}\n        <div className=\"min-w-0 grow basis-64\">\n          <div className=\"flex flex-wrap items-baseline gap-x-3 gap-y-1\">\n            <h1 data-slot=\"page-header-title\" className={pageHeaderTitleVariants()}>\n              {title}\n            </h1>\n            {meta === undefined ? null : (\n              <div data-slot=\"page-header-meta\" className={pageHeaderMetaVariants()}>\n                {meta}\n              </div>\n            )}\n          </div>\n          {description === undefined ? null : (\n            <p data-slot=\"page-header-description\" className={pageHeaderDescriptionVariants()}>\n              {description}\n            </p>\n          )}\n        </div>\n        {actions === undefined ? null : (\n          <div data-slot=\"page-header-actions\" className={pageHeaderActionsVariants()}>\n            {actions}\n          </div>\n        )}\n      </div>\n    </header>\n  );\n});\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAwBA,MAAa,qBAAqB,IAAI,CACpC,cAIA,sCACF,CAAC;;;;;;AAOD,MAAa,wBAAwB,IAAI,kDAAkD;AAE3F,MAAa,0BAA0B,IAAI,CAGzC,+DAEA,KACF,CAAC;AAED,MAAa,yBAAyB,IACpC,0DACF;;;;;;AAOA,MAAa,gCAAgC,IAAI,CAC/C,qCACA,0DACF,CAAC;AAED,MAAa,4BAA4B,IAAI,4CAA4C;AAEzF,MAAa,yBAAyB,IACpC,+DACF;AA4CA,MAAa,aAAa,WAAyC,SAAS,WAC1E,EAAE,WAAW,OAAO,aAAa,SAAS,MAAM,MAAM,GAAG,SACzD,KACA;CACA,OACE,qBAAC,UAAD;EACO;EACL,GAAI;EACJ,aAAU;EACV,WAAW,GAAG,mBAAmB,GAAG,SAAS;EAJ/C,UAAA,CAMG,SAAS,KAAA,IAAY,OACpB,oBAAC,OAAD;GAAK,aAAU;GAAmB,WAAW,uBAAuB;GACjE,UAAA;EACE,CAAA,GAEP,qBAAC,OAAD;GAAK,aAAU;GAAkB,WAAW,sBAAsB;GAAlE,UAAA,CAOE,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,qBAAC,OAAD;KAAK,WAAU;KAAf,UAAA,CACE,oBAAC,MAAD;MAAI,aAAU;MAAoB,WAAW,wBAAwB;MAClE,UAAA;KACC,CAAA,GACH,SAAS,KAAA,IAAY,OACpB,oBAAC,OAAD;MAAK,aAAU;MAAmB,WAAW,uBAAuB;MACjE,UAAA;KACE,CAAA,CAEJ;IACJ,CAAA,GAAA,gBAAgB,KAAA,IAAY,OAC3B,oBAAC,KAAD;KAAG,aAAU;KAA0B,WAAW,8BAA8B;KAC7E,UAAA;IACA,CAAA,CAEF;GACJ,CAAA,GAAA,YAAY,KAAA,IAAY,OACvB,oBAAC,OAAD;IAAK,aAAU;IAAsB,WAAW,0BAA0B;IACvE,UAAA;GACE,CAAA,CAEJ;EACC,CAAA,CAAA;;AAEZ,CAAC"}