beez-ui 2.3.1 → 2.5.0

package/CHANGELOG.md

@@ -4,6 +4,23 @@ Todos los cambios relevantes de beez-ui se documentan en este archivo con el for
 
 ## [Unreleased]
 
+## [2.5.0] - 2026-10-15
+
+### Added
+
+- `Input` y `Textarea` aceptan `label`, `description` y `error`, de Arc: si se pasa cualquiera de ellos (aunque valga `undefined`, así el control no se vuelve a montar cuando aparece la validación) renderizan el campo completo, con el label asociado al control, la ayuda y el error enlazados por `aria-describedby`, y filas que se abren con un resorte y cambian solo las palabras que cambiaron; los números de la ayuda (por ejemplo un contador de caracteres) giran solo los dígitos que cambian. El error marca `aria-invalid` y se anuncia con `role="alert"`. Con movimiento reducido los cambios son instantáneos. Sin esas props siguen renderizando solo el control.
+
+### Changed
+
+- `Input` y `Textarea` toman el diseño de Arc: alto mínimo de 44 px (`Textarea`, 110 px con redimensión vertical y sin crecer con el contenido), radio de control, fondo `surface`, borde fuerte que pasa a `foreground` con hover de puntero fino y con foco de teclado, sin anillos de foco, y borde `danger` cuando son inválidos. `InputGroup` usa el mismo marco.
+
+## [2.4.0] - 2026-10-14
+
+### Added
+
+- `ActionButton` (y `beez-ui/action-button`), de Arc: corre una acción asíncrona y muestra el resultado en el propio botón, con el label que cambia letra por letra de la flecha al spinner (`pendingLabel`, "Guardando" por defecto) y al check (`successLabel`, "Guardado"), y vuelve solo a idle después de `resetAfterMs` (2400 ms). Mientras corre sigue enfocable e ignora nuevas pulsaciones; si falla, vuelve a idle y entrega el error a `onActionError`. Acepta las variantes y tamaños de `Button`.
+- `SplitButton` (y `beez-ui/split-button`), de Arc: una acción principal unida a un menú de acciones relacionadas (`actions`, con `destructive`, `disabled` e `icon`), en variante `primary` o `secondary` (compacta). El ícono y el label de la acción principal cambian en el lugar y los lectores de pantalla anuncian el label nuevo; la mitad del menú se nombra "Más acciones de {label}" o con `menuLabel`.
+
 ## [2.3.1] - 2026-10-14
 
 ### Changed

package/README.md

@@ -195,6 +195,7 @@ Provienen de las carpetas de producto de LaTribu y agenda-mensual y quedaron des
 
 - Movimiento: `PresenceSwap`, `AnimatedCount`, `AnimatedCollapse` y `AnimatedListItem`. Los tokens que usa la biblioteca se exportan desde la raíz y desde `beez-ui/motion-tokens`, así las apps animan sus superficies con las mismas curvas y springs en lugar de copiarlos.
 - Indicadores: `ProgressRing` y `ReactionButton`. El color del ícono activo de la reacción se configura con `activeColor`.
+- Acciones (de Arc, sobre `Button`): `ActionButton` corre una acción asíncrona (`onAction`) y muestra el resultado en el propio botón: pasa de la flecha al spinner con `pendingLabel` ("Guardando") y al check con `successLabel` ("Guardado"), y vuelve solo a idle después de `resetAfterMs`. Mientras corre sigue enfocable e ignora nuevas pulsaciones, y si falla vuelve a idle y entrega el error a `onActionError`. `SplitButton` une una acción principal con un menú de acciones relacionadas (`actions`): su ícono y su label cambian en el lugar, y la mitad del menú se nombra "Más acciones de {label}" o con `menuLabel`. Para un envío común sin estado de éxito, usá `Button` con `loading`.
 - Cuenta: `AccountMenu`, con inicio de sesión mediante `signInHref` o `onSignIn`.
 - Contenido: `RichTextContent`, `RichMarkdownContent`, `RichLinkEditor` y `useRichLinkEditor`. Solo interpretan links en markdown, URLs sueltas, listas y negrita; el HTML del contenido nunca se renderiza como markup.
 - Filtros guardados: `FilterPresetsBar` y `FilterPresetSaveButton` guardan, aplican, editan y borran consultas con nombre de `FilterQueryBar`. La app decide dónde persistirlas; `parseFilterPresets` valida lo que vuelve del almacenamiento.
@@ -307,7 +308,7 @@ Los releases salen sólo desde `main`, limpio y al día con origin (sólo `CHANG
 ### Flujo validado de un release nuevo
 
 1. Actualiza `main` con fast-forward si está atrás.
-2. Verifica que `CHANGELOG.md` tenga un bloque `## [Unreleased]` con entradas escritas a mano y solo secciones de Keep a Changelog; si falta o está vacío, bloquea el release. No genera notas.
+2. Verifica que `CHANGELOG.md` tenga un bloque `## [Unreleased]` con entradas y solo secciones de Keep a Changelog. Si faltan, las redacta con Claude Code o, si falla, con Codex (`changelogDraft: true` en `beez-rp.config.js`) y las muestra en la terminal; si ningún agente puede, bloquea el release.
 3. Pide la versión (sugiere `patch`, `minor` o `major` según los commits) y crea el commit `X.Y.Z` con la versión del manifiesto, el CHANGELOG con `[Unreleased]` renombrado a `## [X.Y.Z] - AAAA-MM-DD` y un `## [Unreleased]` vacío arriba, y el tag anotado `vX.Y.Z`, antes de las validaciones largas.
 4. `prepare` (`scripts/release-hooks.js`): reusa el tarball ya preparado para esa versión si es posterior al último cambio de código (el commit de versión no cuenta); si no, ejecuta `pnpm release:prepare` sobre el commit de versión: instalación congelada, tests sin React Compiler, build optimizado, lint, typechecks, tests unitarios y pruebas de navegador, y genera el tarball verificado con `npm pack --ignore-scripts` (npm y no pnpm, para que sea reproducible) en `releases/<version>-<sha256>/beez-ui-<version>.tgz`.
 5. Sube `main` y el tag `vX.Y.Z` a origin con un único `git push --atomic`.
@@ -319,7 +320,7 @@ La publicación usa el cliente oficial de npm contra `https://registry.npmjs.org
 
 ### CHANGELOG
 
-`CHANGELOG.md` sigue [Keep a Changelog](https://keepachangelog.com/es-ES/1.1.0/). Cada cambio agrega sus entradas en el bloque `## [Unreleased]`, agrupadas en `### Added`, `### Changed`, `### Deprecated`, `### Removed`, `### Fixed` y `### Security` (solo las que apliquen). Las entradas se escriben a mano: `pnpm create-version` no genera notas y bloquea el release si `[Unreleased]` no existe o no tiene entradas. Con beez-rp 0.9.0, el commit de versión renombra `[Unreleased]` a `## [X.Y.Z] - AAAA-MM-DD` (fecha en la hora de Argentina por `releaseTimeZone: "America/Argentina/Buenos_Aires"`, aunque el workflow **Release** corra en un runner en UTC) y deja un `[Unreleased]` vacío arriba; si el CHANGELOG no está en UTF-8, el release se detiene antes del bump. Ni las personas ni los hooks cierran la sección: hacerlo (por ejemplo con `releaseUnreleased`) la cerraría dos veces o dejaría `[Unreleased]` vacío y bloquearía el release. `release:prepare` exige el bloque fechado que coincide con la versión del manifiesto. La regla completa está en `AGENTS.md`.
+`CHANGELOG.md` sigue [Keep a Changelog](https://keepachangelog.com/es-ES/1.1.0/). Cada cambio agrega sus entradas en el bloque `## [Unreleased]`, agrupadas en `### Added`, `### Changed`, `### Deprecated`, `### Removed`, `### Fixed` y `### Security` (solo las que apliquen). Si faltan entradas, `pnpm create-version` las redacta con Claude Code o Codex y las escribe sin confirmar (revisalas en la salida del comando); si ningún agente puede, bloquea el release mientras `[Unreleased]` no exista o no tenga entradas. Con beez-rp 0.10.0, el commit de versión renombra `[Unreleased]` a `## [X.Y.Z] - AAAA-MM-DD` (fecha en la hora de Argentina por `releaseTimeZone: "America/Argentina/Buenos_Aires"`, aunque el workflow **Release** corra en un runner en UTC) y deja un `[Unreleased]` vacío arriba; si el CHANGELOG no está en UTF-8, el release se detiene antes del bump. Ni las personas ni los hooks cierran la sección: hacerlo (por ejemplo con `releaseUnreleased`) la cerraría dos veces o dejaría `[Unreleased]` vacío y bloquearía el release. `release:prepare` exige el bloque fechado que coincide con la versión del manifiesto. La regla completa está en `AGENTS.md`.
 
 Para validar y empaquetar la versión actual sin publicarla:
 
@@ -329,7 +330,7 @@ pnpm release:prepare
 
 El paquete excluye fuentes privadas, tests, scripts, `.env` y `.npmrc`; incluye JavaScript, declaraciones, CSS, fuentes tipográficas y licencias. Conserva releases anteriores.
 
-`prepack` ejecuta el build para los empaquetados manuales. `dist` y `releases` son generados e ignorados por Git. La CI verifica los checks y los tres providers en ambos motores de navegador en Linux y Windows. La publicación se ejecuta desde el workflow **Release** con cada push a `main` o mediante su ejecución manual.
+`prepack` ejecuta el build para los empaquetados manuales. `dist` y `releases` son generados e ignorados por Git. La CI verifica los checks, los tres providers y el catálogo de Storybook (`pnpm test:storybook`) en ambos motores de navegador en Linux y Windows. La publicación se ejecuta desde el workflow **Release**, que recibe la versión, el tag y el commit creados por `pnpm create-version`.
 
 Tras publicar, los consumidores pueden instalar `pnpm add beez-ui`. También pueden instalar directamente el `.tgz` validado antes de una publicación. Las aplicaciones que todavía usan `@guidomodarelli/beez-ui` desde GitHub Packages deben migrar a `beez-ui` (ver «Uso del paquete»); su lockfile fija la resolución e integridad.
 

package/THIRD_PARTY_NOTICES.md

@@ -4,7 +4,7 @@ beez-ui includes code adapted from the following projects.
 
 ## Arc
 
-The theme tokens (`theme.css`, from Arc's `foundation.css`) and the `Button` API, styles and motion (`src/components/button.tsx`, `src/components/button-label.tsx`, `src/components/control-button.tsx`, `src/motion/arc-press.ts`, `src/motion/arc-tokens.ts`) are adapted from the free Arc library: https://uiarc.dev, https://github.com/kuratlielia/arc-library
+The theme tokens (`theme.css`, from Arc's `foundation.css`) and the `Button` API, styles and motion (`src/components/button.tsx`, `src/components/button-label.tsx`, `src/components/control-button.tsx`, `src/motion/arc-press.ts`, `src/motion/arc-tokens.ts`, `src/motion/use-morph-width.ts`), and the `ActionButton` and `SplitButton` components and their label morph (`src/components/action-button.tsx`, `src/components/split-button.tsx`, `src/components/morph-text.tsx`), and the `Input` and `Textarea` fields with their animated helper and error rows (`src/components/input.tsx`, `src/components/textarea.tsx`, `src/components/field.tsx`) are adapted from the free Arc library: https://uiarc.dev, https://github.com/kuratlielia/arc-library
 
 ```
 MIT License

package/dist/components/action-button.d.ts

@@ -0,0 +1,25 @@
+import type { ButtonProps } from "./button.js";
+export type ActionButtonProps = Omit<ButtonProps, "children" | "loading" | "onClick"> & {
+    /** Idle label and the button's accessible name. */
+    label: string;
+    /** Runs on press; the pending state lasts until its promise settles. */
+    onAction: () => void | Promise<void>;
+    /** Label while `onAction` runs. */
+    pendingLabel?: string;
+    /** Label after `onAction` resolves. */
+    successLabel?: string;
+    /** Delay before returning to idle after success; `0` keeps the success state. */
+    resetAfterMs?: number;
+    /** Called when `onAction` rejects; the button returns to idle. Without it, the error is logged to the console. */
+    onActionError?: (error: unknown) => void;
+};
+/**
+ * A single async commit, such as Save, Publish or Submit, whose result shows on the button itself. While the
+ * action runs the button stays focusable (`aria-disabled` and `aria-busy` instead of `disabled`) and ignores new
+ * presses; a polite status region announces the pending and success labels. For a plain form submit without a
+ * success state, use `Button` with `loading`.
+ * @param props - Labels, the action, its error handler, the reset delay and `Button` props except `onClick`.
+ * @returns The button followed by its visually hidden status region.
+ */
+declare function ActionButton({ label, onAction, pendingLabel, successLabel, resetAfterMs, onActionError, ...props }: ActionButtonProps): import("react").JSX.Element;
+export { ActionButton };

package/dist/components/action-button.js

@@ -0,0 +1,264 @@
+"use client";
+import { c as _c } from "react/compiler-runtime";
+/**
+* Arc's ActionButton (https://uiarc.dev, MIT License, see THIRD_PARTY_NOTICES.md) on top of beez-ui's `Button`: a
+* call to action with a trailing arrow that runs an async action and morphs, letter by letter, through a pending
+* and a success label before returning to idle on its own.
+*/
+import { useEffect, useRef, useState } from "react";
+import { AnimatePresence, motion } from "motion/react";
+import { ArrowRight } from "lucide-react";
+import { ACTION_BUTTON_ARROW_OFFSET_PX, ACTION_BUTTON_CHECK_DRAW_DELAY_S, ACTION_BUTTON_DEFAULT_RESET_AFTER_MS, ACTION_BUTTON_ICON_SIZE_PX, ACTION_BUTTON_STATE } from "../constants/action-button.js";
+import { usePrefersReducedMotion } from "../hooks/use-prefers-reduced-motion.js";
+import { ARC_BLUR, ARC_DURATION, ARC_EASE } from "../motion/arc-tokens.js";
+import { ARC_ICON_ENTER as iconEnter, ARC_ICON_EXIT as iconExit, ARC_ICON_TRANSITION as iconTransition, ARC_REDUCED_ENTER as reducedEnter, ARC_REDUCED_EXIT as reducedExit, ARC_REDUCED_TRANSITION as reducedTransition, ARC_SWAP_EXIT_TRANSITION as exitTransition, ARC_SWAP_REST as restState } from "../motion/arc-swap.js";
+import { useMorphWidth } from "../motion/use-morph-width.js";
+import { Button } from "./button.js";
+import { MorphText } from "./morph-text.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/** The arrow leaves in the direction of the action and returns from behind once the button resets. */
+const arrowEnter = {
+	opacity: 0,
+	x: ACTION_BUTTON_ARROW_OFFSET_PX.enter,
+	filter: `blur(${ARC_BLUR.subtle}px)`
+};
+const arrowExit = {
+	opacity: 0,
+	x: ACTION_BUTTON_ARROW_OFFSET_PX.exit,
+	filter: `blur(${ARC_BLUR.subtle}px)`,
+	transition: exitTransition
+};
+const iconSlotStyle = {
+	width: ACTION_BUTTON_ICON_SIZE_PX,
+	height: ACTION_BUTTON_ICON_SIZE_PX
+};
+/**
+* The success tick draws itself from its short stroke, the way a hand would write it.
+* @param props - Whether the user prefers reduced motion, which shows the tick at once.
+* @returns The check icon.
+*/
+function DrawnCheck(t0) {
+	const $ = _c(6);
+	const { reduceMotion } = t0;
+	let t1;
+	if ($[0] !== reduceMotion) {
+		t1 = reduceMotion ? false : {
+			pathLength: 0,
+			opacity: 0
+		};
+		$[0] = reduceMotion;
+		$[1] = t1;
+	} else {
+		t1 = $[1];
+	}
+	let t2;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = {
+			pathLength: 1,
+			opacity: 1
+		};
+		$[2] = t2;
+	} else {
+		t2 = $[2];
+	}
+	let t3;
+	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+		t3 = {
+			pathLength: {
+				duration: ARC_DURATION.standard,
+				ease: [...ARC_EASE.enter],
+				delay: ACTION_BUTTON_CHECK_DRAW_DELAY_S
+			},
+			opacity: {
+				duration: ACTION_BUTTON_CHECK_DRAW_DELAY_S,
+				delay: ACTION_BUTTON_CHECK_DRAW_DELAY_S
+			}
+		};
+		$[3] = t3;
+	} else {
+		t3 = $[3];
+	}
+	let t4;
+	if ($[4] !== t1) {
+		t4 = /* @__PURE__ */ _jsx("svg", {
+			width: ACTION_BUTTON_ICON_SIZE_PX,
+			height: ACTION_BUTTON_ICON_SIZE_PX,
+			viewBox: "0 0 24 24",
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: 2,
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			children: /* @__PURE__ */ _jsx(motion.path, {
+				d: "M4 12l5 5L20 6",
+				initial: t1,
+				animate: t2,
+				transition: t3
+			})
+		});
+		$[4] = t1;
+		$[5] = t4;
+	} else {
+		t4 = $[5];
+	}
+	return t4;
+}
+/**
+* Visible content of the button: the morphing label, whose width follows on a spring, and a slot that swaps the
+* arrow, the spinner and the check.
+* @param props - Current state, the text it shows and whether the user prefers reduced motion.
+* @returns Content hidden from assistive tech; the button's name and status region carry its meaning.
+*/
+function ActionButtonContent(t0) {
+	const $ = _c(20);
+	const { state, text, reduceMotion } = t0;
+	const rowRef = useRef(null);
+	const width = useMorphWidth(rowRef, text, reduceMotion);
+	const isIdle = state === ACTION_BUTTON_STATE.idle;
+	let t1;
+	if ($[0] !== width) {
+		t1 = { width };
+		$[0] = width;
+		$[1] = t1;
+	} else {
+		t1 = $[1];
+	}
+	let t2;
+	if ($[2] !== reduceMotion || $[3] !== text) {
+		t2 = /* @__PURE__ */ _jsx(MorphText, {
+			ref: rowRef,
+			text,
+			reduceMotion
+		});
+		$[2] = reduceMotion;
+		$[3] = text;
+		$[4] = t2;
+	} else {
+		t2 = $[4];
+	}
+	let t3;
+	if ($[5] !== t1 || $[6] !== t2) {
+		t3 = /* @__PURE__ */ _jsx(motion.span, {
+			"data-slot": "action-button-label",
+			className: "inline-flex min-w-0 data-morphing:[clip-path:inset(-0.6em_0_-0.6em_-0.3em)]",
+			style: t1,
+			children: t2
+		});
+		$[5] = t1;
+		$[6] = t2;
+		$[7] = t3;
+	} else {
+		t3 = $[7];
+	}
+	const t4 = reduceMotion ? reducedEnter : isIdle ? arrowEnter : iconEnter;
+	const t5 = reduceMotion ? reducedExit : isIdle ? arrowExit : iconExit;
+	const t6 = reduceMotion ? reducedTransition : iconTransition;
+	let t7;
+	if ($[8] !== reduceMotion || $[9] !== state) {
+		t7 = state === ACTION_BUTTON_STATE.pending ? /* @__PURE__ */ _jsx("span", { className: "size-4 animate-spin rounded-full border-[1.5px] border-current border-r-transparent motion-reduce:animate-none" }) : state === ACTION_BUTTON_STATE.success ? /* @__PURE__ */ _jsx(DrawnCheck, { reduceMotion }) : /* @__PURE__ */ _jsx(ArrowRight, {
+			width: ACTION_BUTTON_ICON_SIZE_PX,
+			height: ACTION_BUTTON_ICON_SIZE_PX
+		});
+		$[8] = reduceMotion;
+		$[9] = state;
+		$[10] = t7;
+	} else {
+		t7 = $[10];
+	}
+	let t8;
+	if ($[11] !== state || $[12] !== t4 || $[13] !== t5 || $[14] !== t6 || $[15] !== t7) {
+		t8 = /* @__PURE__ */ _jsx("span", {
+			className: "grid flex-none place-items-center",
+			style: iconSlotStyle,
+			children: /* @__PURE__ */ _jsx(AnimatePresence, {
+				initial: false,
+				children: /* @__PURE__ */ _jsx(motion.span, {
+					className: "col-start-1 row-start-1 grid place-items-center",
+					style: iconSlotStyle,
+					initial: t4,
+					animate: restState,
+					exit: t5,
+					transition: t6,
+					children: t7
+				}, state)
+			})
+		});
+		$[11] = state;
+		$[12] = t4;
+		$[13] = t5;
+		$[14] = t6;
+		$[15] = t7;
+		$[16] = t8;
+	} else {
+		t8 = $[16];
+	}
+	let t9;
+	if ($[17] !== t3 || $[18] !== t8) {
+		t9 = /* @__PURE__ */ _jsxs("span", {
+			className: "inline-flex items-center justify-center gap-[inherit] whitespace-nowrap",
+			"aria-hidden": "true",
+			children: [t3, t8]
+		});
+		$[17] = t3;
+		$[18] = t8;
+		$[19] = t9;
+	} else {
+		t9 = $[19];
+	}
+	return t9;
+}
+/**
+* A single async commit, such as Save, Publish or Submit, whose result shows on the button itself. While the
+* action runs the button stays focusable (`aria-disabled` and `aria-busy` instead of `disabled`) and ignores new
+* presses; a polite status region announces the pending and success labels. For a plain form submit without a
+* success state, use `Button` with `loading`.
+* @param props - Labels, the action, its error handler, the reset delay and `Button` props except `onClick`.
+* @returns The button followed by its visually hidden status region.
+*/
+function ActionButton({ label, onAction, pendingLabel = "Guardando", successLabel = "Guardado", resetAfterMs = ACTION_BUTTON_DEFAULT_RESET_AFTER_MS, onActionError, ...props }) {
+	const [state, setState] = useState(ACTION_BUTTON_STATE.idle);
+	const resetTimer = useRef(null);
+	const isRunning = useRef(false);
+	const reduceMotion = usePrefersReducedMotion();
+	const isPending = state === ACTION_BUTTON_STATE.pending;
+	const text = isPending ? pendingLabel : state === ACTION_BUTTON_STATE.success ? successLabel : label;
+	useEffect(() => () => {
+		if (resetTimer.current) clearTimeout(resetTimer.current);
+	}, []);
+	async function runAction() {
+		if (isRunning.current) return;
+		isRunning.current = true;
+		if (resetTimer.current) clearTimeout(resetTimer.current);
+		setState(ACTION_BUTTON_STATE.pending);
+		try {
+			await onAction();
+			setState(ACTION_BUTTON_STATE.success);
+			if (resetAfterMs > 0) resetTimer.current = setTimeout(() => setState(ACTION_BUTTON_STATE.idle), resetAfterMs);
+		} catch (error) {
+			setState(ACTION_BUTTON_STATE.idle);
+			if (onActionError) onActionError(error);
+			else console.error(`ActionButton:onAction failed for "${label}"; pass onActionError to handle it.`, error);
+		} finally {
+			isRunning.current = false;
+		}
+	}
+	return /* @__PURE__ */ _jsxs(_Fragment, { children: [/* @__PURE__ */ _jsx(Button, {
+		...props,
+		"data-slot": "action-button",
+		"data-action-state": state,
+		"aria-label": label,
+		"aria-busy": isPending || undefined,
+		"aria-disabled": isPending || props["aria-disabled"] || undefined,
+		onClick: runAction,
+		children: /* @__PURE__ */ _jsx(ActionButtonContent, {
+			state,
+			text,
+			reduceMotion
+		})
+	}), /* @__PURE__ */ _jsx("span", {
+		className: "sr-only",
+		role: "status",
+		children: isPending ? pendingLabel : state === ACTION_BUTTON_STATE.success ? successLabel : ""
+	})] });
+}
+export { ActionButton };

package/dist/components/button-label.js

@@ -4,23 +4,13 @@ import { c as _c } from "react/compiler-runtime";
 * Label morph and loading spinner adapted from Arc (https://uiarc.dev), Copyright (c) 2026 Elia Kuratli,
 * MIT License. The full license text ships in THIRD_PARTY_NOTICES.md. Internal to Button.
 */
-import { isValidElement, useEffect, useLayoutEffect, useRef } from "react";
-import { AnimatePresence, animate, motion, useIsPresent, useMotionValue } from "motion/react";
-import { BUTTON_MORPH_WINDOW_MS } from "../constants/button.js";
+import { isValidElement, useRef } from "react";
+import { AnimatePresence, motion, useIsPresent } from "motion/react";
 import { cn } from "../lib/utils.js";
-import { ARC_BLUR, ARC_DURATION, ARC_EASE, ARC_SPRING_MORPH, ARC_SPRING_SNAPPY } from "../motion/arc-tokens.js";
+import { ARC_BLUR, ARC_DURATION, ARC_EASE } from "../motion/arc-tokens.js";
+import { ARC_ICON_ENTER as iconEnter, ARC_ICON_EXIT as iconExit, ARC_ICON_TRANSITION as iconTransition, ARC_REDUCED_ENTER as reducedEnter, ARC_REDUCED_EXIT as reducedExit, ARC_REDUCED_TRANSITION as reducedTransition, ARC_SWAP_EXIT_TRANSITION as exitTransition, ARC_SWAP_REST as restState } from "../motion/arc-swap.js";
+import { useMorphWidth } from "../motion/use-morph-width.js";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-const restState = {
-	opacity: 1,
-	y: 0,
-	scale: 1,
-	filter: "blur(0px)"
-};
-/** Outgoing labels and icons leave faster than they enter. */
-const exitTransition = {
-	duration: ARC_DURATION.fast,
-	ease: [...ARC_EASE.standard]
-};
 /** Text rises out of a soft blur; the outgoing label lifts away a little faster. */
 const textEnter = {
 	opacity: 0,
@@ -33,36 +23,6 @@ const textExit = {
 	filter: `blur(${ARC_BLUR.soft}px)`,
 	transition: exitTransition
 };
-const iconEnter = {
-	opacity: 0,
-	scale: .6,
-	filter: `blur(${ARC_BLUR.subtle}px)`
-};
-const iconExit = {
-	...iconEnter,
-	transition: exitTransition
-};
-const reducedTransition = { duration: ARC_DURATION.instant };
-const reducedEnter = {
-	...restState,
-	opacity: 0
-};
-const reducedExit = {
-	opacity: 0,
-	transition: reducedTransition
-};
-/** Scale rides the spring; opacity and blur tween so blur never overshoots below zero. */
-const iconTransition = {
-	...ARC_SPRING_SNAPPY,
-	opacity: {
-		duration: ARC_DURATION.fast,
-		ease: [...ARC_EASE.enter]
-	},
-	filter: {
-		duration: ARC_DURATION.fast,
-		ease: [...ARC_EASE.enter]
-	}
-};
 const textTransition = {
 	duration: ARC_DURATION.standard,
 	ease: [...ARC_EASE.enter]
@@ -81,85 +41,6 @@ function getLabelKey(node) {
 	const elementName = typeof elementType === "string" ? elementType : elementType?.displayName ?? elementType?.name ?? "";
 	return `<${elementName}>${getLabelKey(node.props.children)}`;
 }
-/**
-* Springs the label slot to the natural width of an incoming label, so a new label never snaps the
-* button's size. Other resizes jump straight to the new width.
-*/
-function useMorphWidth(contentRef, labelKey, reduceMotion) {
-	const $ = _c(8);
-	const width = useMotionValue("auto");
-	const lastLabelKey = useRef(labelKey);
-	const morphDeadline = useRef(0);
-	let t0;
-	let t1;
-	if ($[0] !== labelKey) {
-		t0 = () => {
-			if (lastLabelKey.current === labelKey) {
-				return;
-			}
-			lastLabelKey.current = labelKey;
-			morphDeadline.current = performance.now() + BUTTON_MORPH_WINDOW_MS;
-		};
-		t1 = [labelKey];
-		$[0] = labelKey;
-		$[1] = t0;
-		$[2] = t1;
-	} else {
-		t0 = $[1];
-		t1 = $[2];
-	}
-	useLayoutEffect(t0, t1);
-	let t2;
-	let t3;
-	if ($[3] !== contentRef || $[4] !== reduceMotion || $[5] !== width) {
-		t2 = () => {
-			const content = contentRef.current;
-			const slot = content?.parentElement;
-			if (!content || !slot || typeof ResizeObserver === "undefined") {
-				return;
-			}
-			let hasMeasured = false;
-			const observer = new ResizeObserver((t4) => {
-				const [entry] = t4;
-				if (!entry) {
-					return;
-				}
-				const nextWidth = entry.contentRect.width;
-				const shouldJump = !nextWidth || !hasMeasured || reduceMotion || performance.now() > morphDeadline.current;
-				if (shouldJump) {
-					hasMeasured = nextWidth > 0;
-					width.jump(nextWidth || "auto");
-					delete slot.dataset.morphing;
-					return;
-				}
-				slot.dataset.morphing = "";
-				animate(width, nextWidth, {
-					...ARC_SPRING_MORPH,
-					onComplete: () => {
-						delete slot.dataset.morphing;
-					}
-				});
-			});
-			observer.observe(content);
-			return () => observer.disconnect();
-		};
-		t3 = [
-			contentRef,
-			reduceMotion,
-			width
-		];
-		$[3] = contentRef;
-		$[4] = reduceMotion;
-		$[5] = width;
-		$[6] = t2;
-		$[7] = t3;
-	} else {
-		t2 = $[6];
-		t3 = $[7];
-	}
-	useEffect(t2, t3);
-	return width;
-}
 /** One generation of the label; the outgoing one is hidden from assistive tech while it leaves. */
 function LabelPhase(t0) {
 	const $ = _c(7);

package/dist/components/field.d.ts

@@ -0,0 +1,51 @@
+import type { AriaAttributes, ReactNode } from "react";
+/** Copy that turns a bare control into a labelled field. */
+export type FieldCopyProps = {
+    /** Visible label, tied to the control with `htmlFor`. */
+    label?: string;
+    /** Helper copy under the control, linked through `aria-describedby`; counts in it roll their digits. */
+    description?: string;
+    /** Error copy: sets `aria-invalid` and renders in a `role="alert"` row that rewords in place. */
+    error?: string;
+};
+type FieldAriaOptions = FieldCopyProps & {
+    id?: string;
+    "aria-describedby"?: string;
+    "aria-invalid"?: AriaAttributes["aria-invalid"];
+};
+/** Ids and ARIA wiring a labelled field passes to its control. */
+export type FieldAria = {
+    controlId: string;
+    descriptionId: string;
+    errorId: string;
+    "aria-describedby"?: string;
+    "aria-invalid"?: AriaAttributes["aria-invalid"];
+};
+/**
+ * Resolves the control id (the caller's or a generated one) and merges the helper and error ids into the caller's
+ * `aria-describedby`. An error always marks the control invalid.
+ * @param options - Field copy and the caller's id and ARIA attributes.
+ * @returns The ids and ARIA attributes for the control.
+ */
+export declare function useFieldAria({ id, description, error, ...aria }: FieldAriaOptions): FieldAria;
+/**
+ * Tells whether a control renders as a labelled field. It looks at which props were passed, not at their values, so a
+ * field whose error or description comes and goes keeps the same tree and its control never remounts (losing an
+ * uncontrolled value or the focus) when validation appears.
+ * @param props - Props passed to the control.
+ * @returns `true` when the caller passed `label`, `description` or `error`, even as `undefined`.
+ */
+export declare function usesFieldCopy(props: FieldCopyProps): boolean;
+type FieldProps = Omit<FieldCopyProps, "label"> & {
+    label?: string;
+    aria: FieldAria;
+    className?: string;
+    children: ReactNode;
+};
+/**
+ * Arc's field layout: label, control, then the helper and error rows. There is no row gap, because grid tracks clamp
+ * a negative margin at zero and a closed row would still pay it; each row carries its own space instead. The wrapper
+ * keeps the bare control's full-width contract, so a field fills a flex row like the control alone does.
+ */
+export declare function Field({ label, description, error, aria, className, children }: FieldProps): import("react").JSX.Element;
+export {};