@seekalfred/primitives 0.5.0 → 0.6.0

package/dist/lib/field-message.js

@@ -0,0 +1,336 @@
+import { cn } from "./cn.js";
+import { prefersReducedMotion, useExitBackstop, useIsomorphicLayoutEffect, useLeavingItems } from "./motion.js";
+import { SwapText } from "./swap-text.js";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/lib/field-message.tsx
+const isNumber = (word) => /^\d[\d.,/:]*%?$/.test(word);
+const WORD_OUT = {
+	settle: "absolute inline-block whitespace-pre motion-safe:animate-field-word-out",
+	quick: "absolute inline-block whitespace-pre motion-safe:animate-field-word-out-quick",
+	sharp: "absolute inline-block whitespace-pre motion-safe:animate-field-word-out-sharp"
+};
+/** The longest a spring exit takes (736ms) plus a margin, for the backstop that removes a node whose animation never ends. */
+const SPRING_BACKSTOP = 900;
+const rectOf = (node) => ({
+	left: node.offsetLeft,
+	top: node.offsetTop,
+	width: node.offsetWidth,
+	height: node.offsetHeight
+});
+function LeavingWordNode({ item, onDone, exit }) {
+	const { id } = item;
+	const remove = useCallback(() => onDone(id), [onDone, id]);
+	useExitBackstop(true, remove);
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		onAnimationEnd: (event) => {
+			if (event.target === event.currentTarget) remove();
+		},
+		style: item.rect,
+		className: WORD_OUT[exit],
+		children: item.word
+	});
+}
+function LeavingDigit({ id, rect, onDone, children }) {
+	const remove = useCallback(() => onDone(id), [onDone, id]);
+	useExitBackstop(true, remove, SPRING_BACKSTOP);
+	useIsomorphicLayoutEffect(() => {
+		if (prefersReducedMotion()) remove();
+	}, [remove]);
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		onAnimationEnd: (event) => {
+			if (event.target === event.currentTarget && event.animationName === "field-digit-move-out") remove();
+		},
+		style: rect,
+		className: "absolute motion-safe:animate-field-digit-out",
+		children
+	});
+}
+function DigitColumn({ column, direction, leaving, onDone }) {
+	const digitRef = useRef(null);
+	const digits = useLeavingItems(column.char, column.char, () => digitRef.current);
+	const done = useCallback(() => onDone(column.key), [onDone, column.key]);
+	useExitBackstop(leaving, done, SPRING_BACKSTOP);
+	useIsomorphicLayoutEffect(() => {
+		if (leaving && prefersReducedMotion()) done();
+	}, [leaving, done]);
+	return /* @__PURE__ */ jsxs("span", {
+		style: { "--roll": direction },
+		onAnimationEnd: (event) => {
+			if (leaving && event.target === event.currentTarget && event.animationName === "field-column-shrink") done();
+		},
+		className: cn("field-number-column", leaving ? "motion-safe:animate-field-column-out" : column.seq > 0 && "motion-safe:animate-field-column-in"),
+		children: [digits.leaving.map((item) => /* @__PURE__ */ jsx(LeavingDigit, {
+			id: item.id,
+			rect: item.rect,
+			onDone: digits.remove,
+			children: item.value
+		}, item.id)), /* @__PURE__ */ jsx("span", {
+			ref: digitRef,
+			className: digits.changed ? "motion-safe:animate-field-digit-in" : void 0,
+			children: column.char
+		}, column.char)]
+	});
+}
+/**
+* A count in the copy, such as "12 characters": only the digits that changed
+* roll, and a gained or lost digit opens or closes its width. Digits arrive
+* from below when the number grew and from above when it shrank.
+*/
+function RollingNumber({ word }) {
+	const [state, setState] = useState(() => ({
+		word,
+		direction: 1,
+		seq: 0,
+		columns: toColumns(word, 0, /* @__PURE__ */ new Map()),
+		gone: []
+	}));
+	let { columns, gone, direction } = state;
+	if (state.word !== word) {
+		const seq = state.seq + 1;
+		direction = parseFloat(word.replace(/,/g, "")) < parseFloat(state.word.replace(/,/g, "")) ? -1 : 1;
+		columns = toColumns(word, seq, new Map(state.columns.map((column) => [column.key, column])));
+		const kept = new Set(columns.map((column) => column.key));
+		gone = [...state.gone.filter((column) => !kept.has(column.key)), ...state.columns.filter((column) => !kept.has(column.key))];
+		setState({
+			word,
+			direction,
+			seq,
+			columns,
+			gone
+		});
+	}
+	const finish = useCallback((key) => setState((current) => ({
+		...current,
+		gone: current.gone.filter((column) => column.key !== key)
+	})), []);
+	const all = [...columns.map((column) => ({
+		column,
+		leaving: false
+	})), ...gone.map((column) => ({
+		column,
+		leaving: true
+	}))].sort((a, b) => b.column.key - a.column.key);
+	return /* @__PURE__ */ jsx(Fragment$1, { children: all.map(({ column, leaving }) => /* @__PURE__ */ jsx(DigitColumn, {
+		column,
+		direction,
+		leaving,
+		onDone: finish
+	}, column.key)) });
+}
+function toColumns(word, seq, previous) {
+	const chars = word.split("");
+	return chars.map((char, index) => {
+		const key = chars.length - index;
+		const old = previous.get(key);
+		return {
+			key,
+			char,
+			seq: old ? old.seq : seq
+		};
+	});
+}
+/**
+* Copy that changes word by word. Words are keyed by position (numbers keep
+* their identity, so only their digits move), so inserting a word near the
+* front replaces every word after it. A changed word rises in from a soft blur
+* and the old one lifts away from where it stood. Assistive technology reads
+* the plain copy; the animated copy is hidden from it.
+*/
+function MotionText({ text, exit, numbers }) {
+	const [state, setState] = useState(() => ({
+		text,
+		seq: 0,
+		words: toWords(text, 0, /* @__PURE__ */ new Map(), numbers)
+	}));
+	let { words } = state;
+	if (state.text !== text) {
+		const seq = state.seq + 1;
+		words = toWords(text, seq, new Map(state.words.map((word) => [word.key, word])), numbers);
+		setState({
+			text,
+			seq,
+			words
+		});
+	}
+	const rowRef = useRef(null);
+	const before = useRef(/* @__PURE__ */ new Map());
+	const nextId = useRef(0);
+	const [leaving, setLeaving] = useState([]);
+	useIsomorphicLayoutEffect(() => {
+		const row = rowRef.current;
+		if (!row) return;
+		const now = /* @__PURE__ */ new Map();
+		for (const node of row.querySelectorAll("[data-word]")) now.set(node.dataset.word, {
+			rect: rectOf(node),
+			word: node.textContent ?? ""
+		});
+		const gone = [];
+		if (!prefersReducedMotion()) {
+			for (const [key, was] of before.current) if (!now.has(key) && was.rect.width && was.rect.height) gone.push({
+				id: nextId.current++,
+				word: was.word,
+				rect: was.rect
+			});
+		}
+		before.current = now;
+		if (gone.length) setLeaving((list) => [...list, ...gone]);
+	});
+	const finish = useCallback((id) => setLeaving((list) => list.filter((item) => item.id !== id)), []);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+		className: "sr-only",
+		children: text
+	}), /* @__PURE__ */ jsxs("span", {
+		ref: rowRef,
+		"aria-hidden": "true",
+		className: "relative block",
+		children: [leaving.map((item) => /* @__PURE__ */ jsx(LeavingWordNode, {
+			item,
+			onDone: finish,
+			exit
+		}, item.id)), words.map((entry, index) => /* @__PURE__ */ jsxs("span", {
+			"data-word": entry.key,
+			className: cn("inline-block whitespace-pre", entry.seq > 0 && "motion-safe:animate-field-word-in motion-reduce:animate-fade-in"),
+			children: [numbers && isNumber(entry.word) ? /* @__PURE__ */ jsx(RollingNumber, { word: entry.word }) : entry.word, index < words.length - 1 ? " " : null]
+		}, entry.key))]
+	})] });
+}
+function toWords(text, seq, previous, numbers) {
+	return text.split(" ").map((word, index) => {
+		const key = `${index}:${numbers && isNumber(word) ? "#" : word}`;
+		const old = previous.get(key);
+		return {
+			key,
+			word,
+			seq: old ? old.seq : seq
+		};
+	});
+}
+/** Writes the copy's height where the slot's height transition reads it. */
+function syncHeight(slot, copy) {
+	const height = copy.getBoundingClientRect().height;
+	if (height) slot.style.setProperty("--field-message-h", height + "px");
+}
+/**
+* A field's helper or error row. `text` empty means no row. A row that appears
+* after mount opens its height on a spring and its copy settles in; one that
+* goes away closes the same way, still showing its last text while it does, and
+* text that comes back mid-close reopens the same row. A row present at first
+* render never animates. Error copy is an alert.
+*
+* The slot's height is written from script (a transition cannot start from or
+* end at auto): measured in a layout effect before the row opens, and again
+* whenever the copy resizes, so a message that wraps opens its next line.
+*/
+function FieldMessage({ id, text, tone, wordExit = "settle", numbers = true, copy = "words" }) {
+	const [row, setRow] = useState(() => text ? {
+		text,
+		phase: "open",
+		animate: false
+	} : null);
+	if (text && (!row || row.text !== text || row.phase === "closing")) setRow(row ? {
+		text,
+		phase: row.phase === "closing" ? "open" : row.phase,
+		animate: row.animate
+	} : {
+		text,
+		phase: "entering",
+		animate: true
+	});
+	else if (!text && row && row.phase !== "closing") setRow({
+		...row,
+		phase: "closing"
+	});
+	const slotRef = useRef(null);
+	const copyRef = useRef(null);
+	const phase = row?.phase;
+	useIsomorphicLayoutEffect(() => {
+		const slot = slotRef.current;
+		const copy = copyRef.current;
+		if (!slot || !copy || phase === "closing") return;
+		syncHeight(slot, copy);
+		if (phase === "entering") {
+			slot.offsetHeight;
+			setRow((current) => current?.phase === "entering" ? {
+				...current,
+				phase: "open"
+			} : current);
+		}
+	});
+	useIsomorphicLayoutEffect(() => {
+		if (phase !== "closing") return;
+		const slot = slotRef.current;
+		const gone = () => setRow((current) => current?.phase === "closing" ? null : current);
+		if (!slot || prefersReducedMotion()) {
+			gone();
+			return;
+		}
+		const style = getComputedStyle(slot);
+		if (parseFloat(style.height) === 0 || style.opacity === "0") {
+			gone();
+			return;
+		}
+		const onEnd = (event) => {
+			if (event.target === slot && event.propertyName === "height") gone();
+		};
+		slot.addEventListener("transitionend", onEnd);
+		const backstop = setTimeout(gone, SPRING_BACKSTOP);
+		return () => {
+			slot.removeEventListener("transitionend", onEnd);
+			clearTimeout(backstop);
+		};
+	}, [phase]);
+	useEffect(() => {
+		const slot = slotRef.current;
+		const copy = copyRef.current;
+		if (!slot || !copy || typeof ResizeObserver === "undefined") return;
+		let frame = 0;
+		const observer = new ResizeObserver(([entry]) => {
+			const height = entry?.borderBoxSize[0]?.blockSize ?? copy.offsetHeight;
+			if (!height) return;
+			cancelAnimationFrame(frame);
+			frame = requestAnimationFrame(() => slot.style.setProperty("--field-message-h", height + "px"));
+		});
+		observer.observe(copy);
+		return () => {
+			cancelAnimationFrame(frame);
+			observer.disconnect();
+		};
+	}, [row !== null]);
+	if (!row) return null;
+	const closing = row.phase === "closing";
+	return /* @__PURE__ */ jsx("span", {
+		ref: slotRef,
+		"data-slot": "field-message-slot",
+		"data-state": closing || row.phase === "entering" ? "closed" : "open",
+		className: "field-message-slot",
+		children: /* @__PURE__ */ jsx("span", {
+			ref: copyRef,
+			id: closing ? void 0 : id,
+			role: tone === "error" && !closing ? "alert" : void 0,
+			className: cn("block pt-2 text-sm leading-(--leading-normal) " + (tone === "error" ? "text-destructive-strong" : "text-muted-foreground") + (row.animate ? " motion-safe:animate-field-copy-in" : "")),
+			children: copy === "swap" ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				children: row.text
+			}), /* @__PURE__ */ jsx("span", {
+				"aria-hidden": "true",
+				className: "block",
+				children: /* @__PURE__ */ jsx(SwapText, {
+					swapKey: row.text,
+					className: "block",
+					children: row.text
+				})
+			})] }) : /* @__PURE__ */ jsx(MotionText, {
+				text: row.text,
+				exit: wordExit,
+				numbers
+			})
+		})
+	});
+}
+//#endregion
+export { FieldMessage };
+
+//# sourceMappingURL=field-message.js.map

package/dist/lib/field-message.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-message.js","names":[],"sources":["../../src/lib/field-message.tsx"],"sourcesContent":["import { useCallback, useEffect, useRef, useState, type CSSProperties } from \"react\";\n\nimport { cn } from \"./cn.js\";\nimport {\n  prefersReducedMotion,\n  useExitBackstop,\n  useIsomorphicLayoutEffect,\n  useLeavingItems,\n  type Rect,\n} from \"./motion.js\";\nimport { SwapText } from \"./swap-text.js\";\n\n/*\n * The helper and error copy under a text field. Three layers of presence, each\n * a small piece of React because CSS cannot keep a node that React has already\n * unmounted: the row (opens and closes its height), the words (a changed word\n * rises in while the old one lifts away) and the numbers (one column per digit,\n * a gained or lost digit opens or closes its width, a changed digit rolls).\n *\n * Nothing animates on first mount at any layer: a row present at first render,\n * words in a row that has just opened, and digits in a column that has just\n * opened all appear as they are.\n */\n\nconst isNumber = (word: string) => /^\\d[\\d.,/:]*%?$/.test(word);\n\n/** How a replaced word leaves: Input's 180ms settle, Textarea's 160ms, or the sharper ease-exit curve Password field uses. */\nexport type WordExit = \"settle\" | \"quick\" | \"sharp\";\n\nconst WORD_OUT: Record<WordExit, string> = {\n  settle: \"absolute inline-block whitespace-pre motion-safe:animate-field-word-out\",\n  quick: \"absolute inline-block whitespace-pre motion-safe:animate-field-word-out-quick\",\n  sharp: \"absolute inline-block whitespace-pre motion-safe:animate-field-word-out-sharp\",\n};\n\n/** The longest a spring exit takes (736ms) plus a margin, for the backstop that removes a node whose animation never ends. */\nconst SPRING_BACKSTOP = 900;\n\nconst rectOf = (node: HTMLElement): Rect => ({\n  left: node.offsetLeft,\n  top: node.offsetTop,\n  width: node.offsetWidth,\n  height: node.offsetHeight,\n});\n\ninterface Word {\n  key: string;\n  word: string;\n  /** 0 for the words the text mounted with, which do not animate in. */\n  seq: number;\n}\n\ninterface LeavingWord {\n  id: number;\n  word: string;\n  rect: Rect;\n}\n\nfunction LeavingWordNode({\n  item,\n  onDone,\n  exit,\n}: {\n  item: LeavingWord;\n  onDone: (id: number) => void;\n  exit: WordExit;\n}) {\n  const { id } = item;\n  const remove = useCallback(() => onDone(id), [onDone, id]);\n  useExitBackstop(true, remove);\n  return (\n    <span\n      aria-hidden=\"true\"\n      onAnimationEnd={(event) => {\n        if (event.target === event.currentTarget) remove();\n      }}\n      style={item.rect}\n      className={WORD_OUT[exit]}\n    >\n      {item.word}\n    </span>\n  );\n}\n\ninterface Column {\n  /** Distance from the end of the number, so a new leading digit adds a column on the left. */\n  key: number;\n  char: string;\n  seq: number;\n}\n\nfunction LeavingDigit({\n  id,\n  rect,\n  onDone,\n  children,\n}: {\n  id: number;\n  rect: Rect;\n  onDone: (id: number) => void;\n  children: string;\n}) {\n  const remove = useCallback(() => onDone(id), [onDone, id]);\n  useExitBackstop(true, remove, SPRING_BACKSTOP);\n  // Reduced motion swaps instantly, and an animation that is switched off never ends.\n  useIsomorphicLayoutEffect(() => {\n    if (prefersReducedMotion()) remove();\n  }, [remove]);\n  return (\n    <span\n      aria-hidden=\"true\"\n      onAnimationEnd={(event) => {\n        if (event.target === event.currentTarget && event.animationName === \"field-digit-move-out\")\n          remove();\n      }}\n      style={rect}\n      className=\"absolute motion-safe:animate-field-digit-out\"\n    >\n      {children}\n    </span>\n  );\n}\n\nfunction DigitColumn({\n  column,\n  direction,\n  leaving,\n  onDone,\n}: {\n  column: Column;\n  direction: number;\n  leaving: boolean;\n  onDone: (key: number) => void;\n}) {\n  const digitRef = useRef<HTMLSpanElement>(null);\n  const digits = useLeavingItems(column.char, column.char, () => digitRef.current);\n  const done = useCallback(() => onDone(column.key), [onDone, column.key]);\n  useExitBackstop(leaving, done, SPRING_BACKSTOP);\n  useIsomorphicLayoutEffect(() => {\n    if (leaving && prefersReducedMotion()) done();\n  }, [leaving, done]);\n  return (\n    <span\n      style={{ \"--roll\": direction } as CSSProperties}\n      onAnimationEnd={(event) => {\n        if (\n          leaving &&\n          event.target === event.currentTarget &&\n          event.animationName === \"field-column-shrink\"\n        )\n          done();\n      }}\n      className={cn(\n        \"field-number-column\",\n        leaving\n          ? \"motion-safe:animate-field-column-out\"\n          : column.seq > 0 && \"motion-safe:animate-field-column-in\",\n      )}\n    >\n      {digits.leaving.map((item) => (\n        <LeavingDigit key={item.id} id={item.id} rect={item.rect} onDone={digits.remove}>\n          {item.value}\n        </LeavingDigit>\n      ))}\n      <span\n        key={column.char}\n        ref={digitRef}\n        className={digits.changed ? \"motion-safe:animate-field-digit-in\" : undefined}\n      >\n        {column.char}\n      </span>\n    </span>\n  );\n}\n\n/**\n * A count in the copy, such as \"12 characters\": only the digits that changed\n * roll, and a gained or lost digit opens or closes its width. Digits arrive\n * from below when the number grew and from above when it shrank.\n */\nfunction RollingNumber({ word }: { word: string }) {\n  const [state, setState] = useState(() => ({\n    word,\n    direction: 1,\n    seq: 0,\n    columns: toColumns(word, 0, new Map<number, Column>()),\n    gone: [] as Column[],\n  }));\n  let { columns, gone, direction } = state;\n  if (state.word !== word) {\n    const seq = state.seq + 1;\n    direction =\n      parseFloat(word.replace(/,/g, \"\")) < parseFloat(state.word.replace(/,/g, \"\")) ? -1 : 1;\n    columns = toColumns(word, seq, new Map(state.columns.map((column) => [column.key, column])));\n    const kept = new Set(columns.map((column) => column.key));\n    // A column that comes back while it is closing is shown again, not kept twice.\n    gone = [\n      ...state.gone.filter((column) => !kept.has(column.key)),\n      ...state.columns.filter((column) => !kept.has(column.key)),\n    ];\n    setState({ word, direction, seq, columns, gone });\n  }\n  const finish = useCallback(\n    (key: number) =>\n      setState((current) => ({\n        ...current,\n        gone: current.gone.filter((column) => column.key !== key),\n      })),\n    [],\n  );\n  // Left to right is key descending, so a closing column keeps its place while it shrinks.\n  const all = [\n    ...columns.map((column) => ({ column, leaving: false })),\n    ...gone.map((column) => ({ column, leaving: true })),\n  ].sort((a, b) => b.column.key - a.column.key);\n  return (\n    <>\n      {all.map(({ column, leaving }) => (\n        <DigitColumn\n          key={column.key}\n          column={column}\n          direction={direction}\n          leaving={leaving}\n          onDone={finish}\n        />\n      ))}\n    </>\n  );\n}\n\nfunction toColumns(word: string, seq: number, previous: Map<number, Column>): Column[] {\n  const chars = word.split(\"\");\n  return chars.map((char, index) => {\n    const key = chars.length - index;\n    const old = previous.get(key);\n    return { key, char, seq: old ? old.seq : seq };\n  });\n}\n\n/**\n * Copy that changes word by word. Words are keyed by position (numbers keep\n * their identity, so only their digits move), so inserting a word near the\n * front replaces every word after it. A changed word rises in from a soft blur\n * and the old one lifts away from where it stood. Assistive technology reads\n * the plain copy; the animated copy is hidden from it.\n */\nfunction MotionText({ text, exit, numbers }: { text: string; exit: WordExit; numbers: boolean }) {\n  const [state, setState] = useState(() => ({\n    text,\n    seq: 0,\n    words: toWords(text, 0, new Map<string, Word>(), numbers),\n  }));\n  let { words } = state;\n  if (state.text !== text) {\n    const seq = state.seq + 1;\n    words = toWords(text, seq, new Map(state.words.map((word) => [word.key, word])), numbers);\n    setState({ text, seq, words });\n  }\n\n  const rowRef = useRef<HTMLSpanElement>(null);\n  const before = useRef(new Map<string, { rect: Rect; word: string }>());\n  const nextId = useRef(0);\n  const [leaving, setLeaving] = useState<LeavingWord[]>([]);\n\n  // After every commit: remember where each word stands, and keep the ones that are gone, where they stood.\n  useIsomorphicLayoutEffect(() => {\n    const row = rowRef.current;\n    if (!row) return;\n    const now = new Map<string, { rect: Rect; word: string }>();\n    for (const node of row.querySelectorAll<HTMLElement>(\"[data-word]\")) {\n      now.set(node.dataset.word!, { rect: rectOf(node), word: node.textContent ?? \"\" });\n    }\n    const gone: LeavingWord[] = [];\n    // Reduced motion removes a replaced word at once, and a box with no size has nothing to lift away.\n    if (!prefersReducedMotion()) {\n      for (const [key, was] of before.current) {\n        if (!now.has(key) && was.rect.width && was.rect.height)\n          gone.push({ id: nextId.current++, word: was.word, rect: was.rect });\n      }\n    }\n    before.current = now;\n    if (gone.length) setLeaving((list) => [...list, ...gone]);\n  });\n\n  const finish = useCallback(\n    (id: number) => setLeaving((list) => list.filter((item) => item.id !== id)),\n    [],\n  );\n\n  return (\n    <>\n      <span className=\"sr-only\">{text}</span>\n      <span ref={rowRef} aria-hidden=\"true\" className=\"relative block\">\n        {leaving.map((item) => (\n          <LeavingWordNode key={item.id} item={item} onDone={finish} exit={exit} />\n        ))}\n        {words.map((entry, index) => (\n          <span\n            key={entry.key}\n            data-word={entry.key}\n            className={cn(\n              \"inline-block whitespace-pre\",\n              entry.seq > 0 && \"motion-safe:animate-field-word-in motion-reduce:animate-fade-in\",\n            )}\n          >\n            {numbers && isNumber(entry.word) ? <RollingNumber word={entry.word} /> : entry.word}\n            {index < words.length - 1 ? \" \" : null}\n          </span>\n        ))}\n      </span>\n    </>\n  );\n}\n\nfunction toWords(text: string, seq: number, previous: Map<string, Word>, numbers: boolean): Word[] {\n  return text.split(\" \").map((word, index) => {\n    const key = `${index}:${numbers && isNumber(word) ? \"#\" : word}`;\n    const old = previous.get(key);\n    return { key, word, seq: old ? old.seq : seq };\n  });\n}\n\ninterface Row {\n  text: string;\n  /** entering: mounted closed, about to open. closing: kept on screen while it shuts. */\n  phase: \"entering\" | \"open\" | \"closing\";\n  /** False for a row the field mounted with, whose copy does not settle in. */\n  animate: boolean;\n}\n\n/** Writes the copy's height where the slot's height transition reads it. */\nfunction syncHeight(slot: HTMLElement, copy: HTMLElement) {\n  const height = copy.getBoundingClientRect().height;\n  if (height) slot.style.setProperty(\"--field-message-h\", height + \"px\");\n}\n\n/**\n * A field's helper or error row. `text` empty means no row. A row that appears\n * after mount opens its height on a spring and its copy settles in; one that\n * goes away closes the same way, still showing its last text while it does, and\n * text that comes back mid-close reopens the same row. A row present at first\n * render never animates. Error copy is an alert.\n *\n * The slot's height is written from script (a transition cannot start from or\n * end at auto): measured in a layout effect before the row opens, and again\n * whenever the copy resizes, so a message that wraps opens its next line.\n */\nexport function FieldMessage({\n  id,\n  text,\n  tone,\n  wordExit = \"settle\",\n  numbers = true,\n  copy = \"words\",\n}: {\n  id?: string | undefined;\n  text?: string | undefined;\n  tone: \"description\" | \"error\";\n  /** How a replaced word leaves (Input settles in 180ms, Textarea in 160ms, Password field uses the sharper exit curve). */\n  wordExit?: WordExit;\n  /** Roll digits in counts such as \"12 characters\". Off for copy that is words only. */\n  numbers?: boolean;\n  /** `\"words\"` animates a changed message word by word; `\"swap\"` replaces it as a whole, rising in as the old one lifts away. */\n  copy?: \"words\" | \"swap\";\n}) {\n  // Decided during render, so the id exists in the same commit as the aria-describedby that names it.\n  const [row, setRow] = useState<Row | null>(() =>\n    text ? { text, phase: \"open\", animate: false } : null,\n  );\n  if (text && (!row || row.text !== text || row.phase === \"closing\")) {\n    setRow(\n      row\n        ? { text, phase: row.phase === \"closing\" ? \"open\" : row.phase, animate: row.animate }\n        : { text, phase: \"entering\", animate: true },\n    );\n  } else if (!text && row && row.phase !== \"closing\") {\n    setRow({ ...row, phase: \"closing\" });\n  }\n\n  const slotRef = useRef<HTMLSpanElement>(null);\n  const copyRef = useRef<HTMLSpanElement>(null);\n  const phase = row?.phase;\n\n  // Measure before the row opens, and force the closed style to be computed first so there is something to transition from.\n  useIsomorphicLayoutEffect(() => {\n    const slot = slotRef.current;\n    const copy = copyRef.current;\n    if (!slot || !copy || phase === \"closing\") return;\n    syncHeight(slot, copy);\n    if (phase === \"entering\") {\n      void slot.offsetHeight;\n      setRow((current) =>\n        current?.phase === \"entering\" ? { ...current, phase: \"open\" } : current,\n      );\n    }\n  });\n\n  // Remove the row once its height has closed. A row that never opened, or reduced motion, has nothing to wait for.\n  useIsomorphicLayoutEffect(() => {\n    if (phase !== \"closing\") return;\n    const slot = slotRef.current;\n    const gone = () => setRow((current) => (current?.phase === \"closing\" ? null : current));\n    if (!slot || prefersReducedMotion()) {\n      gone();\n      return;\n    }\n    const style = getComputedStyle(slot);\n    if (parseFloat(style.height) === 0 || style.opacity === \"0\") {\n      gone();\n      return;\n    }\n    const onEnd = (event: TransitionEvent) => {\n      if (event.target === slot && event.propertyName === \"height\") gone();\n    };\n    slot.addEventListener(\"transitionend\", onEnd);\n    const backstop = setTimeout(gone, SPRING_BACKSTOP);\n    return () => {\n      slot.removeEventListener(\"transitionend\", onEnd);\n      clearTimeout(backstop);\n    };\n  }, [phase]);\n\n  // Later size changes only (the first measurement is the layout effect above). A frame later, so the write cannot report a ResizeObserver loop.\n  const mounted = row !== null;\n  useEffect(() => {\n    const slot = slotRef.current;\n    const copy = copyRef.current;\n    if (!slot || !copy || typeof ResizeObserver === \"undefined\") return;\n    let frame = 0;\n    const observer = new ResizeObserver(([entry]) => {\n      const height = entry?.borderBoxSize[0]?.blockSize ?? copy.offsetHeight;\n      if (!height) return;\n      cancelAnimationFrame(frame);\n      frame = requestAnimationFrame(() =>\n        slot.style.setProperty(\"--field-message-h\", height + \"px\"),\n      );\n    });\n    observer.observe(copy);\n    return () => {\n      cancelAnimationFrame(frame);\n      observer.disconnect();\n    };\n  }, [mounted]);\n\n  if (!row) return null;\n  const closing = row.phase === \"closing\";\n  return (\n    <span\n      ref={slotRef}\n      data-slot=\"field-message-slot\"\n      data-state={closing || row.phase === \"entering\" ? \"closed\" : \"open\"}\n      className=\"field-message-slot\"\n    >\n      <span\n        ref={copyRef}\n        // A closing row no longer describes the field: it gives up its id and its alert role.\n        id={closing ? undefined : id}\n        role={tone === \"error\" && !closing ? \"alert\" : undefined}\n        className={cn(\n          \"block pt-2 text-sm leading-(--leading-normal) \" +\n            (tone === \"error\" ? \"text-destructive-strong\" : \"text-muted-foreground\") +\n            (row.animate ? \" motion-safe:animate-field-copy-in\" : \"\"),\n        )}\n      >\n        {copy === \"swap\" ? (\n          <>\n            <span className=\"sr-only\">{row.text}</span>\n            <span aria-hidden=\"true\" className=\"block\">\n              <SwapText swapKey={row.text} className=\"block\">\n                {row.text}\n              </SwapText>\n            </span>\n          </>\n        ) : (\n          <MotionText text={row.text} exit={wordExit} numbers={numbers} />\n        )}\n      </span>\n    </span>\n  );\n}\n"],"mappings":"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"}

package/dist/lib/field-shell.js

@@ -0,0 +1,81 @@
+import { Label as Label$1 } from "../label/label.js";
+import { FieldMessage } from "./field-message.js";
+import { useId } from "react";
+import { InputContext, LabelContext, useSlottedContext } from "react-aria-components";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/lib/field-shell.tsx
+/**
+* True when any field prop was passed at all, even as `undefined`. Deciding by
+* presence, not value, is what keeps `error={maybeMessage}` from moving the
+* control between a wrapper and no wrapper when the message appears: that would
+* remount the control and drop focus and an uncontrolled value.
+*/
+const hasFieldProps = (props) => "label" in props || "description" in props || "error" in props;
+/** A control inside a React Aria `TextField` already has its label and messages supplied by the field. */
+function useInsideReactAriaField() {
+	const label = useSlottedContext(LabelContext);
+	const input = useSlottedContext(InputContext);
+	return Object.keys(label ?? {}).length > 0 || Object.keys(input ?? {}).length > 0;
+}
+/**
+* The ids and aria wiring for a control with field props. `active` is false
+* when no field prop was passed, or inside a React Aria field, and then
+* `controlProps` is empty: the control's own props are untouched, and a bare
+* control has no generated `id`.
+*/
+function useFieldWiring({ enabled, id, describedBy, invalid, description, error }) {
+	const generated = useId();
+	const inside = useInsideReactAriaField();
+	const active = enabled && !inside;
+	const controlId = id ?? generated;
+	const hintId = active && description ? `${controlId}-description` : void 0;
+	const errorId = active && error ? `${controlId}-error` : void 0;
+	return {
+		active,
+		controlId,
+		hintId,
+		errorId,
+		controlProps: active ? {
+			id: controlId,
+			"aria-invalid": error ? true : invalid,
+			"aria-describedby": [
+				describedBy,
+				hintId,
+				errorId
+			].filter(Boolean).join(" ") || void 0
+		} : {}
+	};
+}
+/** The wrapper: label above the control, then the helper row and the error row. Each row owns its top space, so a closed row costs nothing. */
+function FieldShell({ label, controlId, description, hintId, error, errorId, wordExit, numbers, children }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "field",
+		className: "grid min-w-0 font-sans",
+		children: [
+			label == null ? null : /* @__PURE__ */ jsx(Label$1, {
+				htmlFor: controlId,
+				className: "mb-1.5",
+				children: label
+			}),
+			children,
+			/* @__PURE__ */ jsx(FieldMessage, {
+				id: hintId,
+				text: description,
+				tone: "description",
+				wordExit,
+				numbers
+			}),
+			/* @__PURE__ */ jsx(FieldMessage, {
+				id: errorId,
+				text: error,
+				tone: "error",
+				wordExit,
+				numbers
+			})
+		]
+	});
+}
+//#endregion
+export { FieldShell, hasFieldProps, useFieldWiring };
+
+//# sourceMappingURL=field-shell.js.map

package/dist/lib/field-shell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"field-shell.js","names":["Label"],"sources":["../../src/lib/field-shell.tsx"],"sourcesContent":["import { useId, type ReactNode } from \"react\";\nimport { InputContext, LabelContext, useSlottedContext } from \"react-aria-components\";\n\nimport { Label } from \"../label/label.js\";\nimport { FieldMessage, type WordExit } from \"./field-message.js\";\n\n/*\n * The label, helper text and error text around a text control, for Input and\n * Textarea. The first lib file that imports a sibling component (Label): the\n * layer rule allows primitives to use primitives, and a field's label is the\n * same Label everywhere else.\n */\n\n/**\n * True when any field prop was passed at all, even as `undefined`. Deciding by\n * presence, not value, is what keeps `error={maybeMessage}` from moving the\n * control between a wrapper and no wrapper when the message appears: that would\n * remount the control and drop focus and an uncontrolled value.\n */\nexport const hasFieldProps = (props: object) =>\n  \"label\" in props || \"description\" in props || \"error\" in props;\n\n/** A control inside a React Aria `TextField` already has its label and messages supplied by the field. */\nfunction useInsideReactAriaField() {\n  const label = useSlottedContext(LabelContext);\n  const input = useSlottedContext(InputContext);\n  return Object.keys(label ?? {}).length > 0 || Object.keys(input ?? {}).length > 0;\n}\n\n/**\n * The ids and aria wiring for a control with field props. `active` is false\n * when no field prop was passed, or inside a React Aria field, and then\n * `controlProps` is empty: the control's own props are untouched, and a bare\n * control has no generated `id`.\n */\nexport function useFieldWiring({\n  enabled,\n  id,\n  describedBy,\n  invalid,\n  description,\n  error,\n}: {\n  enabled: boolean;\n  id: string | undefined;\n  describedBy: string | undefined;\n  invalid: boolean | \"true\" | \"false\" | \"grammar\" | \"spelling\" | undefined;\n  description: string | undefined;\n  error: string | undefined;\n}) {\n  const generated = useId();\n  const inside = useInsideReactAriaField();\n  const active = enabled && !inside;\n  const controlId = id ?? generated;\n  const hintId = active && description ? `${controlId}-description` : undefined;\n  const errorId = active && error ? `${controlId}-error` : undefined;\n  return {\n    active,\n    controlId,\n    hintId,\n    errorId,\n    controlProps: active\n      ? {\n          id: controlId,\n          \"aria-invalid\": error ? true : invalid,\n          \"aria-describedby\": [describedBy, hintId, errorId].filter(Boolean).join(\" \") || undefined,\n        }\n      : {},\n  };\n}\n\n/** The wrapper: label above the control, then the helper row and the error row. Each row owns its top space, so a closed row costs nothing. */\nexport function FieldShell({\n  label,\n  controlId,\n  description,\n  hintId,\n  error,\n  errorId,\n  wordExit,\n  numbers,\n  children,\n}: {\n  label: ReactNode;\n  controlId: string;\n  description: string | undefined;\n  hintId: string | undefined;\n  error: string | undefined;\n  errorId: string | undefined;\n  wordExit?: WordExit;\n  numbers?: boolean;\n  children: ReactNode;\n}) {\n  return (\n    <div data-slot=\"field\" className=\"grid min-w-0 font-sans\">\n      {label == null ? null : (\n        // 6px, the gap Select and DatePicker keep between their label and control, so a labelled Input sits level with them.\n        <Label htmlFor={controlId} className=\"mb-1.5\">\n          {label}\n        </Label>\n      )}\n      {children}\n      <FieldMessage\n        id={hintId}\n        text={description}\n        tone=\"description\"\n        wordExit={wordExit}\n        numbers={numbers}\n      />\n      <FieldMessage id={errorId} text={error} tone=\"error\" wordExit={wordExit} numbers={numbers} />\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;AAmBA,MAAa,iBAAiB,UAC5B,WAAW,SAAS,iBAAiB,SAAS,WAAW;;AAG3D,SAAS,0BAA0B;CACjC,MAAM,QAAQ,kBAAkB,YAAY;CAC5C,MAAM,QAAQ,kBAAkB,YAAY;CAC5C,OAAO,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,CAAC,SAAS,KAAK,OAAO,KAAK,SAAS,CAAC,CAAC,CAAC,CAAC,SAAS;AAClF;;;;;;;AAQA,SAAgB,eAAe,EAC7B,SACA,IACA,aACA,SACA,aACA,SAQC;CACD,MAAM,YAAY,MAAM;CACxB,MAAM,SAAS,wBAAwB;CACvC,MAAM,SAAS,WAAW,CAAC;CAC3B,MAAM,YAAY,MAAM;CACxB,MAAM,SAAS,UAAU,cAAc,GAAG,UAAU,gBAAgB,KAAA;CACpE,MAAM,UAAU,UAAU,QAAQ,GAAG,UAAU,UAAU,KAAA;CACzD,OAAO;EACL;EACA;EACA;EACA;EACA,cAAc,SACV;GACE,IAAI;GACJ,gBAAgB,QAAQ,OAAO;GAC/B,oBAAoB;IAAC;IAAa;IAAQ;GAAO,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG,KAAK,KAAA;EAClF,IACA,CAAC;CACP;AACF;;AAGA,SAAgB,WAAW,EACzB,OACA,WACA,aACA,QACA,OACA,SACA,UACA,SACA,YAWC;CACD,OACE,qBAAC,OAAD;EAAK,aAAU;EAAQ,WAAU;EAAjC,UAAA;GACG,SAAS,OAAO,OAEf,oBAACA,SAAD;IAAO,SAAS;IAAW,WAAU;IAClC,UAAA;GACI,CAAA;GAER;GACD,oBAAC,cAAD;IACE,IAAI;IACJ,MAAM;IACN,MAAK;IACK;IACD;GACV,CAAA;GACD,oBAAC,cAAD;IAAc,IAAI;IAAS,MAAM;IAAO,MAAK;IAAkB;IAAmB;GAAU,CAAA;EACzF;;AAET"}

package/dist/lib/field-surface.js

@@ -25,14 +25,16 @@ const fieldSurfaceVariants = cva([
 	"shadow-surface",
 	"placeholder:text-muted-foreground",
 	"selection:bg-primary selection:text-primary-foreground",
-	"motion-safe:transition-colors motion-safe:duration-(--duration-fast) motion-safe:ease-standard",
+	"motion-safe:transition-[border-color,background-color] motion-safe:duration-(--duration-quick) motion-safe:ease-settle",
 	"outline-none",
 	"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-[invalid]:border-destructive-strong",
-	"data-[disabled]:cursor-not-allowed data-[disabled]:opacity-(--opacity-disabled)"
+	"[&:where([data-hovered]:not([data-disabled]))]:border-foreground",
+	"[&:where([data-focus-visible])]:border-foreground",
+	"data-[disabled]:cursor-not-allowed data-[disabled]:bg-muted data-[disabled]:opacity-(--opacity-disabled)"
 ]);
 //#endregion
 export { fieldSurfaceVariants };

package/dist/lib/field-surface.js.map

@@ -1 +1 @@
-{"version":3,"file":"field-surface.js","names":[],"sources":["../../src/lib/field-surface.ts"],"sourcesContent":["import { cva } from \"class-variance-authority\";\n\n/**\n * The shared surface of a text entry control.\n *\n * Extracted at the Rule of Two, and for a reason the legacy demonstrates:\n * its `input.tsx` and `textarea.tsx` styled the same surface twice and had\n * already drifted. The input is `bg-transparent`, the textarea is\n * `bg-background`. The input focuses with `focus-visible:border-ring` plus a\n * 3px ring; the textarea uses a 2px ring with an offset. The input has\n * `aria-invalid` treatment, the textarea has none. None of those differences\n * is a decision anyone made -- they are two files edited at different times.\n *\n * Everything that must look identical between an Input and a Textarea lives\n * here. Only the box geometry differs, and that is the caller's variant.\n *\n * Every string is a STATIC literal. Tailwind scans source text, so a class\n * assembled at runtime is invisible to it and would never be emitted.\n */\nexport const fieldSurfaceVariants = cva([\n  \"w-full min-w-0\",\n\n  // The reset in @seekalfred/styles is OPT-IN, so a consumer may load none.\n  // A bare <input> keeps the user-agent border, background and Arial face,\n  // and content-box would add the padding on top of the width.\n  \"box-border font-sans\",\n\n  \"rounded-md border-(length:--border-width) border-border\",\n  \"bg-background text-foreground\",\n  \"shadow-surface\",\n\n  // --color-muted-foreground is 5.25:1 on the page, so the placeholder is\n  // legible rather than the usual near-invisible grey. It is still text and\n  // the contrast contract holds it to the 4.5 floor.\n  \"placeholder:text-muted-foreground\",\n  \"selection:bg-primary selection:text-primary-foreground\",\n\n  \"motion-safe:transition-colors motion-safe:duration-(--duration-fast) motion-safe:ease-standard\",\n\n  // outline-solid is load-bearing. `outline-none` sets BOTH\n  // outline-style:none and --tw-outline-style:none, and the width utility\n  // resolves its style from that same variable -- so a focus rule can apply\n  // a width and a colour while faithfully re-applying none, and paint\n  // nothing. Button shipped exactly that.\n  //\n  // An outline, not the legacy `ring-[3px]` box-shadow: box-shadows are\n  // discarded under forced-colors, taking the only focus indication with\n  // them, and axe has no focus-indicator rule to notice.\n  \"outline-none\",\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  // React Aria sets data-invalid from the native `aria-invalid` attribute,\n  // so this costs no API surface and works both bare and inside a\n  // TextField. destructive-strong rather than destructive: the fill token\n  // is 2.44:1-class and cannot describe a boundary (WCAG 1.4.11).\n  //\n  // The border CHANGES COLOUR only. Colour alone is not a state cue\n  // (WCAG 1.4.1), which is why an invalid field must also carry a message --\n  // that is the consumer's job, and the migration table says so.\n  \"data-[invalid]:border-destructive-strong\",\n\n  \"data-[disabled]:cursor-not-allowed data-[disabled]:opacity-(--opacity-disabled)\",\n]);\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAmBA,MAAa,uBAAuB,IAAI;CACtC;CAKA;CAEA;CACA;CACA;CAKA;CACA;CAEA;CAWA;CACA;CACA;CACA;CACA;CAUA;CAEA;AACF,CAAC"}
+{"version":3,"file":"field-surface.js","names":[],"sources":["../../src/lib/field-surface.ts"],"sourcesContent":["import { cva } from \"class-variance-authority\";\n\n/**\n * The shared surface of a text entry control.\n *\n * Extracted at the Rule of Two, and for a reason the legacy demonstrates:\n * its `input.tsx` and `textarea.tsx` styled the same surface twice and had\n * already drifted. The input is `bg-transparent`, the textarea is\n * `bg-background`. The input focuses with `focus-visible:border-ring` plus a\n * 3px ring; the textarea uses a 2px ring with an offset. The input has\n * `aria-invalid` treatment, the textarea has none. None of those differences\n * is a decision anyone made -- they are two files edited at different times.\n *\n * Everything that must look identical between an Input and a Textarea lives\n * here. Only the box geometry differs, and that is the caller's variant.\n *\n * Every string is a STATIC literal. Tailwind scans source text, so a class\n * assembled at runtime is invisible to it and would never be emitted.\n */\nexport const fieldSurfaceVariants = cva([\n  \"w-full min-w-0\",\n\n  // The reset in @seekalfred/styles is OPT-IN, so a consumer may load none.\n  // A bare <input> keeps the user-agent border, background and Arial face,\n  // and content-box would add the padding on top of the width.\n  \"box-border font-sans\",\n\n  \"rounded-md border-(length:--border-width) border-border\",\n  \"bg-background text-foreground\",\n  \"shadow-surface\",\n\n  // --color-muted-foreground is 5.25:1 on the page, so the placeholder is\n  // legible rather than the usual near-invisible grey. It is still text and\n  // the contrast contract holds it to the 4.5 floor.\n  \"placeholder:text-muted-foreground\",\n  \"selection:bg-primary selection:text-primary-foreground\",\n\n  // Only the two properties that change, on the settle curve: the border darkens\n  // on hover and focus, and the background turns muted when disabled. The focus\n  // outline is not animated (it switches between none and solid).\n  \"motion-safe:transition-[border-color,background-color] motion-safe:duration-(--duration-quick) motion-safe:ease-settle\",\n\n  // outline-solid is load-bearing. `outline-none` sets BOTH\n  // outline-style:none and --tw-outline-style:none, and the width utility\n  // resolves its style from that same variable -- so a focus rule can apply\n  // a width and a colour while faithfully re-applying none, and paint\n  // nothing. Button shipped exactly that.\n  //\n  // An outline, not the legacy `ring-[3px]` box-shadow: box-shadows are\n  // discarded under forced-colors, taking the only focus indication with\n  // them, and axe has no focus-indicator rule to notice.\n  \"outline-none\",\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  // React Aria sets data-invalid from the native `aria-invalid` attribute,\n  // so this costs no API surface and works both bare and inside a\n  // TextField. destructive-strong rather than destructive: the fill token\n  // is 2.44:1-class and cannot describe a boundary (WCAG 1.4.11).\n  //\n  // The border CHANGES COLOUR only. Colour alone is not a state cue\n  // (WCAG 1.4.1), which is why an invalid field must also carry a message --\n  // that is the consumer's job, and the migration table says so.\n  \"data-[invalid]:border-destructive-strong\",\n\n  // Hover and focus darken the border to the text colour, in addition to the\n  // outline ring above (which stays: forced-colours drops a border colour, and\n  // WCAG 2.4.7 wants a visible indicator). The conditions sit inside :where(),\n  // which adds no specificity, so the invalid border always wins by specificity\n  // rather than by the order Tailwind happens to emit utilities in -- on an\n  // Input through data-[invalid], on a Select or DatePicker trigger through\n  // group-data-[invalid], because their ROOT carries the state. A disabled field\n  // does not darken: React Aria's TextArea still reports hover while disabled.\n  \"[&:where([data-hovered]:not([data-disabled]))]:border-foreground\",\n  \"[&:where([data-focus-visible])]:border-foreground\",\n\n  \"data-[disabled]:cursor-not-allowed data-[disabled]:bg-muted data-[disabled]:opacity-(--opacity-disabled)\",\n]);\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAmBA,MAAa,uBAAuB,IAAI;CACtC;CAKA;CAEA;CACA;CACA;CAKA;CACA;CAKA;CAWA;CACA;CACA;CACA;CACA;CAUA;CAUA;CACA;CAEA;AACF,CAAC"}

package/dist/lib/flip.js

@@ -0,0 +1,80 @@
+import { prefersReducedMotion, useIsomorphicLayoutEffect } from "./motion.js";
+import { useRef } from "react";
+//#region src/lib/flip.ts
+/**
+* Siblings that shift because something next to them changed size (a wider month
+* name pushes the day and year along) slide to their new place instead of
+* jumping: measure where each `[data-flip]` element was, let the new layout
+* commit, put each one back where it was with a translate, then release it on a
+* transition. CSS cannot do this alone, because the layout move is not a style
+* change.
+*
+* `key` says when to look. Positions are remembered after every look and
+* refreshed when the container resizes, so a move that is not a change of `key`
+* (a window resize) does not become the next flip. Reduced motion does not flip.
+* Elements inside a leaving copy (`[data-leaving]`) are ignored.
+*
+* @param duration CSS time of the slide, e.g. `var(--duration-standard)`.
+* @param easing CSS easing of the slide, e.g. `var(--ease-enter)`.
+*/
+function useFlip(container, key, duration = "var(--duration-standard)", easing = "var(--ease-enter)") {
+	const remembered = useRef(/* @__PURE__ */ new Map());
+	const measure = () => {
+		const root = container.current;
+		const next = /* @__PURE__ */ new Map();
+		if (!root) return next;
+		for (const el of root.querySelectorAll("[data-flip]")) {
+			if (el.closest("[data-leaving]")) continue;
+			const box = el.getBoundingClientRect();
+			next.set(el, {
+				left: box.left,
+				top: box.top
+			});
+		}
+		return next;
+	};
+	useIsomorphicLayoutEffect(() => {
+		const root = container.current;
+		if (!root) return;
+		const before = remembered.current;
+		const after = measure();
+		if (before.size > 0 && !prefersReducedMotion()) {
+			const moved = [];
+			for (const [el, now] of after) {
+				const was = before.get(el);
+				if (!was) continue;
+				const dx = was.left - now.left;
+				const dy = was.top - now.top;
+				if (Math.abs(dx) < .5 && Math.abs(dy) < .5) continue;
+				const node = el;
+				node.style.transition = "none";
+				node.style.translate = `${dx}px ${dy}px`;
+				moved.push(node);
+			}
+			if (moved.length > 0) {
+				root.offsetWidth;
+				for (const node of moved) {
+					node.style.transition = `translate ${duration} ${easing}`;
+					node.style.translate = "";
+					node.addEventListener("transitionend", () => {
+						node.style.transition = "";
+					}, { once: true });
+				}
+			}
+		}
+		remembered.current = after;
+	}, [key]);
+	useIsomorphicLayoutEffect(() => {
+		const root = container.current;
+		if (!root || typeof ResizeObserver === "undefined") return;
+		const observer = new ResizeObserver(() => {
+			remembered.current = measure();
+		});
+		observer.observe(root);
+		return () => observer.disconnect();
+	}, []);
+}
+//#endregion
+export { useFlip };
+
+//# sourceMappingURL=flip.js.map

package/dist/lib/flip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"flip.js","names":[],"sources":["../../src/lib/flip.ts"],"sourcesContent":["import { useRef, type RefObject } from \"react\";\n\nimport { prefersReducedMotion, useIsomorphicLayoutEffect } from \"./motion.js\";\n\n/**\n * Siblings that shift because something next to them changed size (a wider month\n * name pushes the day and year along) slide to their new place instead of\n * jumping: measure where each `[data-flip]` element was, let the new layout\n * commit, put each one back where it was with a translate, then release it on a\n * transition. CSS cannot do this alone, because the layout move is not a style\n * change.\n *\n * `key` says when to look. Positions are remembered after every look and\n * refreshed when the container resizes, so a move that is not a change of `key`\n * (a window resize) does not become the next flip. Reduced motion does not flip.\n * Elements inside a leaving copy (`[data-leaving]`) are ignored.\n *\n * @param duration CSS time of the slide, e.g. `var(--duration-standard)`.\n * @param easing CSS easing of the slide, e.g. `var(--ease-enter)`.\n */\nexport function useFlip(\n  container: RefObject<HTMLElement | null>,\n  key: unknown,\n  duration = \"var(--duration-standard)\",\n  easing = \"var(--ease-enter)\",\n) {\n  const remembered = useRef(new Map<Element, { left: number; top: number }>());\n\n  const measure = () => {\n    const root = container.current;\n    const next = new Map<Element, { left: number; top: number }>();\n    if (!root) return next;\n    for (const el of root.querySelectorAll<HTMLElement>(\"[data-flip]\")) {\n      if (el.closest(\"[data-leaving]\")) continue;\n      const box = el.getBoundingClientRect();\n      next.set(el, { left: box.left, top: box.top });\n    }\n    return next;\n  };\n\n  useIsomorphicLayoutEffect(() => {\n    const root = container.current;\n    if (!root) return;\n    const before = remembered.current;\n    const after = measure();\n    if (before.size > 0 && !prefersReducedMotion()) {\n      const moved: HTMLElement[] = [];\n      for (const [el, now] of after) {\n        const was = before.get(el);\n        if (!was) continue;\n        const dx = was.left - now.left;\n        const dy = was.top - now.top;\n        if (Math.abs(dx) < 0.5 && Math.abs(dy) < 0.5) continue;\n        const node = el as HTMLElement;\n        node.style.transition = \"none\";\n        node.style.translate = `${dx}px ${dy}px`;\n        moved.push(node);\n      }\n      if (moved.length > 0) {\n        void root.offsetWidth;\n        for (const node of moved) {\n          node.style.transition = `translate ${duration} ${easing}`;\n          node.style.translate = \"\";\n          node.addEventListener(\n            \"transitionend\",\n            () => {\n              node.style.transition = \"\";\n            },\n            { once: true },\n          );\n        }\n      }\n    }\n    remembered.current = after;\n    // Positions are read once per change of `key`; a resize refreshes them below.\n  }, [key]);\n\n  useIsomorphicLayoutEffect(() => {\n    const root = container.current;\n    if (!root || typeof ResizeObserver === \"undefined\") return;\n    const observer = new ResizeObserver(() => {\n      remembered.current = measure();\n    });\n    observer.observe(root);\n    return () => observer.disconnect();\n  }, []);\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAoBA,SAAgB,QACd,WACA,KACA,WAAW,4BACX,SAAS,qBACT;CACA,MAAM,aAAa,uBAAO,IAAI,IAA4C,CAAC;CAE3E,MAAM,gBAAgB;EACpB,MAAM,OAAO,UAAU;EACvB,MAAM,uBAAO,IAAI,IAA4C;EAC7D,IAAI,CAAC,MAAM,OAAO;EAClB,KAAK,MAAM,MAAM,KAAK,iBAA8B,aAAa,GAAG;GAClE,IAAI,GAAG,QAAQ,gBAAgB,GAAG;GAClC,MAAM,MAAM,GAAG,sBAAsB;GACrC,KAAK,IAAI,IAAI;IAAE,MAAM,IAAI;IAAM,KAAK,IAAI;GAAI,CAAC;EAC/C;EACA,OAAO;CACT;CAEA,gCAAgC;EAC9B,MAAM,OAAO,UAAU;EACvB,IAAI,CAAC,MAAM;EACX,MAAM,SAAS,WAAW;EAC1B,MAAM,QAAQ,QAAQ;EACtB,IAAI,OAAO,OAAO,KAAK,CAAC,qBAAqB,GAAG;GAC9C,MAAM,QAAuB,CAAC;GAC9B,KAAK,MAAM,CAAC,IAAI,QAAQ,OAAO;IAC7B,MAAM,MAAM,OAAO,IAAI,EAAE;IACzB,IAAI,CAAC,KAAK;IACV,MAAM,KAAK,IAAI,OAAO,IAAI;IAC1B,MAAM,KAAK,IAAI,MAAM,IAAI;IACzB,IAAI,KAAK,IAAI,EAAE,IAAI,MAAO,KAAK,IAAI,EAAE,IAAI,IAAK;IAC9C,MAAM,OAAO;IACb,KAAK,MAAM,aAAa;IACxB,KAAK,MAAM,YAAY,GAAG,GAAG,KAAK,GAAG;IACrC,MAAM,KAAK,IAAI;GACjB;GACA,IAAI,MAAM,SAAS,GAAG;IACpB,KAAU;IACV,KAAK,MAAM,QAAQ,OAAO;KACxB,KAAK,MAAM,aAAa,aAAa,SAAS,GAAG;KACjD,KAAK,MAAM,YAAY;KACvB,KAAK,iBACH,uBACM;MACJ,KAAK,MAAM,aAAa;KAC1B,GACA,EAAE,MAAM,KAAK,CACf;IACF;GACF;EACF;EACA,WAAW,UAAU;CAEvB,GAAG,CAAC,GAAG,CAAC;CAER,gCAAgC;EAC9B,MAAM,OAAO,UAAU;EACvB,IAAI,CAAC,QAAQ,OAAO,mBAAmB,aAAa;EACpD,MAAM,WAAW,IAAI,qBAAqB;GACxC,WAAW,UAAU,QAAQ;EAC/B,CAAC;EACD,SAAS,QAAQ,IAAI;EACrB,aAAa,SAAS,WAAW;CACnC,GAAG,CAAC,CAAC;AACP"}