@seekalfred/primitives 0.5.1 → 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/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"}

package/dist/password-field/index.d.ts

@@ -0,0 +1,2 @@
+import { PasswordField, PasswordFieldMessages, PasswordFieldProps, defaultPasswordFieldMessages } from "./password-field.js";
+export { PasswordField, type PasswordFieldMessages, type PasswordFieldProps, defaultPasswordFieldMessages };

package/dist/password-field/index.js

@@ -0,0 +1,2 @@
+import { PasswordField, defaultPasswordFieldMessages } from "./password-field.js";
+export { PasswordField, defaultPasswordFieldMessages };

package/dist/password-field/password-field.d.ts

@@ -0,0 +1,37 @@
+import { InputProps } from "react-aria-components";
+//#region src/password-field/password-field.d.ts
+/** The toggle's accessible names. Both have English defaults; pass the ones you translate. */
+export interface PasswordFieldMessages {
+  showPassword: string;
+  hidePassword: string;
+}
+export declare const defaultPasswordFieldMessages: PasswordFieldMessages;
+export interface PasswordFieldProps extends Omit<InputProps, "className" | "style" | "size" | "type"> {
+  /** Extra classes for the input. Merged last, so they win conflicts with ours. */
+  className?: string;
+  /** The visible label, tied to the input with `htmlFor`. */
+  label: string;
+  /**
+   * Helper text under the field, named by `aria-describedby`. A string, because
+   * the copy is animated word by word: it opens on a spring when it appears
+   * after mount and changed words rise in. Nothing animates on first render.
+   */
+  description?: string;
+  /** Translated or reworded toggle names. */
+  messages?: Partial<PasswordFieldMessages>;
+}
+/**
+ * A password input with a show and hide toggle. Switching resolves the text in
+ * place from a soft blur, and the eye is one outline that a slash draws across.
+ * Native input props apply to the input; `disabled` also disables the toggle,
+ * and `aria-invalid` gives the box its invalid border.
+ *
+ * The toggle's name changes with the state and it is also `aria-pressed`, so a
+ * screen reader may announce both ("Hide password, pressed").
+ *
+ * @example
+ * <PasswordField label="Password" description="At least eight characters." />
+ */
+export declare const PasswordField: import("react").ForwardRefExoticComponent<PasswordFieldProps & import("react").RefAttributes<HTMLInputElement>>;
+//#endregion
+//# sourceMappingURL=password-field.d.ts.map

package/dist/password-field/password-field.js

@@ -0,0 +1,101 @@
+"use client";
+import { cn } from "../lib/cn.js";
+import { fieldSurfaceVariants } from "../lib/field-surface.js";
+import { FieldShell, useFieldWiring } from "../lib/field-shell.js";
+import { EyeMorph } from "../lib/eye-morph.js";
+import { forwardRef, useState } from "react";
+import { Button, Group, Input } from "react-aria-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/password-field/password-field.tsx
+const defaultPasswordFieldMessages = {
+	showPassword: "Show password",
+	hidePassword: "Hide password"
+};
+/**
+* The field's box. A React Aria `Group` rather than the input, because the
+* toggle sits inside the same border: it carries the shared field surface (the
+* 160ms border transition, the darker border on hover and focus, the muted
+* disabled look, the invalid border) and the input inside is borderless.
+*
+* `data-focus-within` darkens the border too. A Group reports focus-visible
+* from the input modality, so a mouse click into the input, or onto the toggle,
+* would otherwise leave the border pale; a plain Input is different because
+* React Aria treats a text input as always keyboard-focused.
+*/
+const shellClass = cn(fieldSurfaceVariants(), "flex items-center h-(--density-control-h-md) ps-(--density-control-pad-md) field-toggle-shell [&:where([data-focus-within])]:border-foreground");
+/** The input inside the box: no border, no fill, no outline of its own. */
+const inputClass = "min-w-0 flex-1 border-0 bg-transparent p-0 font-sans text-base text-foreground outline-none placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground data-[disabled]:cursor-not-allowed motion-safe:data-[reveal=shown]:animate-field-reveal-shown motion-safe:data-[reveal=hidden]:animate-field-reveal-hidden";
+const toggleClass = "field-toggle-button grid size-7.5 flex-none cursor-pointer place-items-center rounded-md border-0 bg-transparent p-0 text-muted-foreground outline-none data-[hovered]:bg-muted data-[hovered]:text-foreground aria-pressed:text-foreground data-[focus-visible]:outline-solid data-[focus-visible]:outline-(length:--focus-ring-width) data-[focus-visible]:outline-offset-(--focus-ring-offset) data-[focus-visible]:outline-(--color-ring) data-[disabled]:cursor-not-allowed";
+/**
+* A password input with a show and hide toggle. Switching resolves the text in
+* place from a soft blur, and the eye is one outline that a slash draws across.
+* Native input props apply to the input; `disabled` also disables the toggle,
+* and `aria-invalid` gives the box its invalid border.
+*
+* The toggle's name changes with the state and it is also `aria-pressed`, so a
+* screen reader may announce both ("Hide password, pressed").
+*
+* @example
+* <PasswordField label="Password" description="At least eight characters." />
+*/
+const PasswordField = forwardRef(function PasswordField({ label, description, messages: messagesProp, className, ...props }, ref) {
+	const messages = {
+		...defaultPasswordFieldMessages,
+		...messagesProp
+	};
+	const [visible, setVisible] = useState(false);
+	const [toggled, setToggled] = useState(false);
+	const field = useFieldWiring({
+		enabled: true,
+		id: props.id,
+		describedBy: props["aria-describedby"],
+		invalid: props["aria-invalid"],
+		description,
+		error: void 0
+	});
+	const disabled = Boolean(props.disabled);
+	const ariaInvalid = props["aria-invalid"];
+	const control = /* @__PURE__ */ jsxs(Group, {
+		role: "presentation",
+		isDisabled: disabled,
+		isInvalid: ariaInvalid !== void 0 && ariaInvalid !== false && ariaInvalid !== "false",
+		"data-slot": "password-field-shell",
+		className: shellClass,
+		children: [/* @__PURE__ */ jsx(Input, {
+			ref,
+			...props,
+			...field.controlProps,
+			type: visible ? "text" : "password",
+			"data-slot": "password-field",
+			"data-reveal": toggled ? visible ? "shown" : "hidden" : void 0,
+			className: cn(inputClass, className)
+		}), /* @__PURE__ */ jsx(Button, {
+			type: "button",
+			isDisabled: disabled,
+			"aria-label": visible ? messages.hidePassword : messages.showPassword,
+			"aria-pressed": visible,
+			onPress: () => {
+				setVisible((current) => !current);
+				setToggled(true);
+			},
+			className: toggleClass,
+			children: /* @__PURE__ */ jsx(EyeMorph, { slashed: visible })
+		})]
+	});
+	if (!field.active) return control;
+	return /* @__PURE__ */ jsx(FieldShell, {
+		label,
+		controlId: field.controlId,
+		description,
+		hintId: field.hintId,
+		error: void 0,
+		errorId: void 0,
+		wordExit: "sharp",
+		numbers: false,
+		children: control
+	});
+});
+//#endregion
+export { PasswordField, defaultPasswordFieldMessages };
+
+//# sourceMappingURL=password-field.js.map