@astra-kit/ui 0.0.0-stage → 0.0.0

package/dist/components/field.js

@@ -0,0 +1,710 @@
+"use client";
+import { c as _c } from "react/compiler-runtime";
+/**
+* Labelled field with animated helper and error rows, adapted from Arc's Input and Textarea (https://uiarc.dev),
+* Copyright (c) 2026 Elia Kuratli, MIT License. The full license text ships in THIRD_PARTY_NOTICES.md.
+* Internal: shared by `Input` and `Textarea`, which render it only when they receive a label, description or error.
+*/
+import { useEffect, useId, useRef, useState } from "react";
+import { AnimatePresence, motion } from "motion/react";
+import { FIELD_MESSAGE_DIGIT_OFFSET_EM, FIELD_MESSAGE_ID_SUFFIX, FIELD_MESSAGE_COMPONENT_SEPARATOR_PATTERN, FIELD_MESSAGE_DECIMAL_COMMA, FIELD_MESSAGE_GROUP_SEPARATOR_PATTERN, FIELD_MESSAGE_NUMBER_PATTERN, FIELD_MESSAGE_WORD_OFFSET_EM } from "../constants/field.js";
+import { usePrefersReducedMotion } from "../hooks/use-prefers-reduced-motion.js";
+import { cn } from "../lib/utils.js";
+import { ARC_BLUR, ARC_DURATION, ARC_EASE, ARC_SPRING_MORPH, ARC_SPRING_SMOOTH, ARC_SPRING_SNAPPY } from "../motion/arc-tokens.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const digitVariants = {
+	enter: (direction) => ({
+		opacity: 0,
+		y: `${direction * FIELD_MESSAGE_DIGIT_OFFSET_EM}em`,
+		filter: `blur(${ARC_BLUR.subtle}px)`
+	}),
+	center: {
+		opacity: 1,
+		y: 0,
+		filter: "blur(0px)"
+	},
+	exit: (direction) => ({
+		opacity: 0,
+		y: `${-direction * FIELD_MESSAGE_DIGIT_OFFSET_EM}em`,
+		filter: `blur(${ARC_BLUR.subtle}px)`
+	})
+};
+const instantTransition = { duration: 0 };
+/**
+* Arc `spring.snappy` without its bounce: a rolled digit must land on its line, since even the small overshoot of the
+* bouncy preset pushes it past rest toward the side it came from.
+*/
+const digitRollSpring = {
+	...ARC_SPRING_SNAPPY,
+	bounce: 0
+};
+/**
+* Reads one component of a count as a number, in English or Spanish formatting: grouping separators are dropped and
+* a decimal comma becomes a point.
+* @param component - A count, or one side of a time or ratio.
+* @returns Its numeric value.
+*/
+function parseCountComponent(component) {
+	return parseFloat(component.replace(FIELD_MESSAGE_GROUP_SEPARATOR_PATTERN, "").replace(FIELD_MESSAGE_DECIMAL_COMMA, "."));
+}
+/**
+* Tells whether a count went down. Times and ratios compare component by component from the left, so `0:10` to
+* `0:09` counts as a decrease.
+* @param next - The new count.
+* @param previous - The count shown before.
+* @returns `true` when `next` is smaller than `previous`.
+*/
+function isCountDecrease(next, previous) {
+	const nextComponents = next.split(FIELD_MESSAGE_COMPONENT_SEPARATOR_PATTERN).map(parseCountComponent);
+	const previousComponents = previous.split(FIELD_MESSAGE_COMPONENT_SEPARATOR_PATTERN).map(parseCountComponent);
+	for (let index = 0; index < Math.min(nextComponents.length, previousComponents.length); index++) {
+		if (nextComponents[index] !== previousComponents[index]) return nextComponents[index] < previousComponents[index];
+	}
+	return false;
+}
+/**
+* Keys each word by its text and how many times that text appeared before it, so a word keeps its key when copy is
+* inserted or removed before it and only the words that really changed animate. Counts are keyed by their order
+* among counts instead of their value, so a changing count rolls its digits instead of being replaced.
+* @param words - Words of the message in reading order.
+* @returns The words with their keys.
+*/
+function keyWords(words) {
+	const occurrences = new Map();
+	return words.map((word) => {
+		const isCount = FIELD_MESSAGE_NUMBER_PATTERN.test(word);
+		const identity = isCount ? "#" : `w:${word}`;
+		const occurrence = occurrences.get(identity) ?? 0;
+		occurrences.set(identity, occurrence + 1);
+		return {
+			word,
+			isCount,
+			key: `${identity}:${occurrence}`
+		};
+	});
+}
+/**
+* A count in the copy, such as "12 caracteres", rolls only the digits that changed, up when it grows and down when
+* it shrinks; a gained or lost digit opens or closes its width.
+*/
+function RollingNumber(t0) {
+	const $ = _c(14);
+	const { word } = t0;
+	const reduceMotion = usePrefersReducedMotion();
+	let t1;
+	if ($[0] !== word) {
+		t1 = {
+			word,
+			direction: 1
+		};
+		$[0] = word;
+		$[1] = t1;
+	} else {
+		t1 = $[1];
+	}
+	const [shown, setShown] = useState(t1);
+	if (shown.word !== word) {
+		setShown({
+			word,
+			direction: isCountDecrease(word, shown.word) ? -1 : 1
+		});
+	}
+	let T0;
+	let t2;
+	let t3;
+	if ($[2] !== reduceMotion || $[3] !== shown.direction || $[4] !== word) {
+		const characters = word.split("");
+		let t4;
+		if ($[8] !== reduceMotion) {
+			t4 = reduceMotion ? instantTransition : {
+				y: digitRollSpring,
+				width: ARC_SPRING_MORPH,
+				opacity: { duration: ARC_DURATION.fast },
+				filter: { duration: ARC_DURATION.fast }
+			};
+			$[8] = reduceMotion;
+			$[9] = t4;
+		} else {
+			t4 = $[9];
+		}
+		const transition = t4;
+		T0 = AnimatePresence;
+		t2 = false;
+		t3 = characters.map((character, index) => /* @__PURE__ */ _jsx(motion.span, {
+			className: "relative inline-flex justify-center tabular-nums",
+			initial: reduceMotion ? false : {
+				width: 0,
+				opacity: 0
+			},
+			animate: {
+				width: "auto",
+				opacity: 1
+			},
+			exit: {
+				width: 0,
+				opacity: 0
+			},
+			transition,
+			children: /* @__PURE__ */ _jsx(AnimatePresence, {
+				initial: false,
+				mode: "popLayout",
+				custom: shown.direction,
+				children: /* @__PURE__ */ _jsx(motion.span, {
+					className: "inline-block",
+					custom: shown.direction,
+					variants: digitVariants,
+					initial: reduceMotion ? false : "enter",
+					animate: "center",
+					exit: "exit",
+					transition,
+					children: character
+				}, character)
+			})
+		}, characters.length - index));
+		$[2] = reduceMotion;
+		$[3] = shown.direction;
+		$[4] = word;
+		$[5] = T0;
+		$[6] = t2;
+		$[7] = t3;
+	} else {
+		T0 = $[5];
+		t2 = $[6];
+		t3 = $[7];
+	}
+	let t4;
+	if ($[10] !== T0 || $[11] !== t2 || $[12] !== t3) {
+		t4 = /* @__PURE__ */ _jsx(T0, {
+			initial: t2,
+			children: t3
+		});
+		$[10] = T0;
+		$[11] = t2;
+		$[12] = t3;
+		$[13] = t4;
+	} else {
+		t4 = $[13];
+	}
+	return t4;
+}
+/** Changed words rise in and unblur while unchanged words hold still, and counts roll. Assistive tech reads the plain copy. */
+function MotionText(t0) {
+	const $ = _c(23);
+	const { text } = t0;
+	const reduceMotion = usePrefersReducedMotion();
+	let T0;
+	let t1;
+	let t2;
+	let t3;
+	let t4;
+	let t5;
+	let t6;
+	if ($[0] !== reduceMotion || $[1] !== text) {
+		const words = text.split(" ");
+		if ($[9] !== text) {
+			t6 = /* @__PURE__ */ _jsx("span", {
+				className: "sr-only",
+				children: text
+			});
+			$[9] = text;
+			$[10] = t6;
+		} else {
+			t6 = $[10];
+		}
+		t4 = "relative block";
+		t5 = "true";
+		T0 = AnimatePresence;
+		t1 = false;
+		t2 = "popLayout";
+		t3 = keyWords(words).map((t7, index) => {
+			const { word, isCount, key } = t7;
+			return /* @__PURE__ */ _jsxs(motion.span, {
+				className: "inline-block whitespace-pre",
+				initial: reduceMotion ? false : {
+					opacity: 0,
+					y: `${FIELD_MESSAGE_WORD_OFFSET_EM.enter}em`,
+					filter: `blur(${ARC_BLUR.soft}px)`
+				},
+				animate: {
+					opacity: 1,
+					y: 0,
+					filter: "blur(0px)"
+				},
+				exit: reduceMotion ? {
+					opacity: 0,
+					transition: instantTransition
+				} : {
+					opacity: 0,
+					y: `${FIELD_MESSAGE_WORD_OFFSET_EM.exit}em`,
+					filter: `blur(${ARC_BLUR.subtle}px)`,
+					transition: {
+						duration: ARC_DURATION.exit,
+						ease: [...ARC_EASE.standard]
+					}
+				},
+				transition: reduceMotion ? instantTransition : {
+					duration: ARC_DURATION.standard,
+					ease: [...ARC_EASE.enter]
+				},
+				children: [isCount ? /* @__PURE__ */ _jsx(RollingNumber, { word }) : word, index < words.length - 1 ? " " : null]
+			}, key);
+		});
+		$[0] = reduceMotion;
+		$[1] = text;
+		$[2] = T0;
+		$[3] = t1;
+		$[4] = t2;
+		$[5] = t3;
+		$[6] = t4;
+		$[7] = t5;
+		$[8] = t6;
+	} else {
+		T0 = $[2];
+		t1 = $[3];
+		t2 = $[4];
+		t3 = $[5];
+		t4 = $[6];
+		t5 = $[7];
+		t6 = $[8];
+	}
+	let t7;
+	if ($[11] !== T0 || $[12] !== t1 || $[13] !== t2 || $[14] !== t3) {
+		t7 = /* @__PURE__ */ _jsx(T0, {
+			initial: t1,
+			mode: t2,
+			children: t3
+		});
+		$[11] = T0;
+		$[12] = t1;
+		$[13] = t2;
+		$[14] = t3;
+		$[15] = t7;
+	} else {
+		t7 = $[15];
+	}
+	let t8;
+	if ($[16] !== t4 || $[17] !== t5 || $[18] !== t7) {
+		t8 = /* @__PURE__ */ _jsx("span", {
+			className: t4,
+			"aria-hidden": t5,
+			children: t7
+		});
+		$[16] = t4;
+		$[17] = t5;
+		$[18] = t7;
+		$[19] = t8;
+	} else {
+		t8 = $[19];
+	}
+	let t9;
+	if ($[20] !== t6 || $[21] !== t8) {
+		t9 = /* @__PURE__ */ _jsxs(_Fragment, { children: [t6, t8] });
+		$[20] = t6;
+		$[21] = t8;
+		$[22] = t9;
+	} else {
+		t9 = $[22];
+	}
+	return t9;
+}
+/**
+* A helper or error row: it opens its height on a smooth spring, then the words settle in. The row tracks the
+* measured copy, so a longer message that wraps opens its next line instead of snapping.
+*/
+function MessageRow(t0) {
+	const $ = _c(36);
+	const { id, text, className, alert: t1 } = t0;
+	const alert = t1 === undefined ? false : t1;
+	const reduceMotion = usePrefersReducedMotion();
+	const copyRef = useRef(null);
+	const [height, setHeight] = useState("auto");
+	let t2;
+	let t3;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = () => {
+			const copyElement = copyRef.current;
+			if (!copyElement || typeof ResizeObserver === "undefined") {
+				return;
+			}
+			const observer = new ResizeObserver((t4) => {
+				const [entry] = t4;
+				if (entry) {
+					setHeight(entry.borderBoxSize?.[0]?.blockSize ?? copyElement.offsetHeight);
+				}
+			});
+			observer.observe(copyElement);
+			return () => observer.disconnect();
+		};
+		t3 = [];
+		$[0] = t2;
+		$[1] = t3;
+	} else {
+		t2 = $[0];
+		t3 = $[1];
+	}
+	useEffect(t2, t3);
+	let t4;
+	if ($[2] !== reduceMotion) {
+		t4 = reduceMotion ? false : {
+			height: 0,
+			opacity: 0
+		};
+		$[2] = reduceMotion;
+		$[3] = t4;
+	} else {
+		t4 = $[3];
+	}
+	let t5;
+	if ($[4] !== height) {
+		t5 = {
+			height,
+			opacity: 1
+		};
+		$[4] = height;
+		$[5] = t5;
+	} else {
+		t5 = $[5];
+	}
+	let t6;
+	if ($[6] !== reduceMotion) {
+		t6 = reduceMotion ? instantTransition : {
+			height: ARC_SPRING_SMOOTH,
+			opacity: { duration: ARC_DURATION.instant }
+		};
+		$[6] = reduceMotion;
+		$[7] = t6;
+	} else {
+		t6 = $[7];
+	}
+	let t7;
+	if ($[8] !== t6) {
+		t7 = {
+			height: 0,
+			opacity: 0,
+			transition: t6
+		};
+		$[8] = t6;
+		$[9] = t7;
+	} else {
+		t7 = $[9];
+	}
+	let t8;
+	if ($[10] !== reduceMotion) {
+		t8 = reduceMotion ? instantTransition : {
+			height: ARC_SPRING_SMOOTH,
+			opacity: { duration: ARC_DURATION.fast }
+		};
+		$[10] = reduceMotion;
+		$[11] = t8;
+	} else {
+		t8 = $[11];
+	}
+	const t9 = alert ? "field-error" : "field-description";
+	let t10;
+	if ($[12] !== className) {
+		t10 = cn("block pt-(--space-2) text-xs leading-(--leading-body)", className);
+		$[12] = className;
+		$[13] = t10;
+	} else {
+		t10 = $[13];
+	}
+	const t11 = alert ? "alert" : undefined;
+	let t12;
+	if ($[14] !== reduceMotion) {
+		t12 = reduceMotion ? false : {
+			y: `${FIELD_MESSAGE_WORD_OFFSET_EM.enter}em`,
+			filter: `blur(${ARC_BLUR.soft}px)`
+		};
+		$[14] = reduceMotion;
+		$[15] = t12;
+	} else {
+		t12 = $[15];
+	}
+	let t13;
+	if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
+		t13 = {
+			y: 0,
+			filter: "blur(0px)"
+		};
+		$[16] = t13;
+	} else {
+		t13 = $[16];
+	}
+	const t14 = reduceMotion ? 0 : ARC_DURATION.standard;
+	let t15;
+	if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
+		t15 = [...ARC_EASE.enter];
+		$[17] = t15;
+	} else {
+		t15 = $[17];
+	}
+	let t16;
+	if ($[18] !== t14) {
+		t16 = {
+			duration: t14,
+			ease: t15
+		};
+		$[18] = t14;
+		$[19] = t16;
+	} else {
+		t16 = $[19];
+	}
+	let t17;
+	if ($[20] !== text) {
+		t17 = /* @__PURE__ */ _jsx(MotionText, { text });
+		$[20] = text;
+		$[21] = t17;
+	} else {
+		t17 = $[21];
+	}
+	let t18;
+	if ($[22] !== id || $[23] !== t10 || $[24] !== t11 || $[25] !== t12 || $[26] !== t16 || $[27] !== t17 || $[28] !== t9) {
+		t18 = /* @__PURE__ */ _jsx(motion.span, {
+			ref: copyRef,
+			id,
+			"data-slot": t9,
+			className: t10,
+			role: t11,
+			initial: t12,
+			animate: t13,
+			transition: t16,
+			children: t17
+		});
+		$[22] = id;
+		$[23] = t10;
+		$[24] = t11;
+		$[25] = t12;
+		$[26] = t16;
+		$[27] = t17;
+		$[28] = t9;
+		$[29] = t18;
+	} else {
+		t18 = $[29];
+	}
+	let t19;
+	if ($[30] !== t18 || $[31] !== t4 || $[32] !== t5 || $[33] !== t7 || $[34] !== t8) {
+		t19 = /* @__PURE__ */ _jsx(motion.span, {
+			className: "block overflow-hidden",
+			initial: t4,
+			animate: t5,
+			exit: t7,
+			transition: t8,
+			children: t18
+		});
+		$[30] = t18;
+		$[31] = t4;
+		$[32] = t5;
+		$[33] = t7;
+		$[34] = t8;
+		$[35] = t19;
+	} else {
+		t19 = $[35];
+	}
+	return t19;
+}
+/** Mounts a message row while there is copy, and closes it when the copy goes away. */
+function FieldMessage(t0) {
+	const $ = _c(8);
+	let props;
+	let text;
+	if ($[0] !== t0) {
+		({text, ...props} = t0);
+		$[0] = t0;
+		$[1] = props;
+		$[2] = text;
+	} else {
+		props = $[1];
+		text = $[2];
+	}
+	let t1;
+	if ($[3] !== props || $[4] !== text) {
+		t1 = text ? /* @__PURE__ */ _jsx(MessageRow, {
+			text,
+			...props
+		}, "message") : null;
+		$[3] = props;
+		$[4] = text;
+		$[5] = t1;
+	} else {
+		t1 = $[5];
+	}
+	let t2;
+	if ($[6] !== t1) {
+		t2 = /* @__PURE__ */ _jsx(AnimatePresence, {
+			initial: false,
+			children: t1
+		});
+		$[6] = t1;
+		$[7] = t2;
+	} else {
+		t2 = $[7];
+	}
+	return t2;
+}
+/**
+* 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 function useFieldAria(t0) {
+	const $ = _c(15);
+	let aria;
+	let description;
+	let error;
+	let id;
+	if ($[0] !== t0) {
+		({id, description, error, ...aria} = t0);
+		$[0] = t0;
+		$[1] = aria;
+		$[2] = description;
+		$[3] = error;
+		$[4] = id;
+	} else {
+		aria = $[1];
+		description = $[2];
+		error = $[3];
+		id = $[4];
+	}
+	const generatedId = useId();
+	const controlId = id ?? generatedId;
+	const descriptionId = `${controlId}-${FIELD_MESSAGE_ID_SUFFIX.description}`;
+	const errorId = `${controlId}-${FIELD_MESSAGE_ID_SUFFIX.error}`;
+	const t1 = aria["aria-describedby"];
+	const t2 = description ? descriptionId : undefined;
+	const t3 = error ? errorId : undefined;
+	let t4;
+	if ($[5] !== t1 || $[6] !== t2 || $[7] !== t3) {
+		t4 = [
+			t1,
+			t2,
+			t3
+		].filter(Boolean);
+		$[5] = t1;
+		$[6] = t2;
+		$[7] = t3;
+		$[8] = t4;
+	} else {
+		t4 = $[8];
+	}
+	const describedBy = t4.join(" ");
+	const t5 = describedBy || undefined;
+	const t6 = error ? true : aria["aria-invalid"];
+	let t7;
+	if ($[9] !== controlId || $[10] !== descriptionId || $[11] !== errorId || $[12] !== t5 || $[13] !== t6) {
+		t7 = {
+			controlId,
+			descriptionId,
+			errorId,
+			"aria-describedby": t5,
+			"aria-invalid": t6
+		};
+		$[9] = controlId;
+		$[10] = descriptionId;
+		$[11] = errorId;
+		$[12] = t5;
+		$[13] = t6;
+		$[14] = t7;
+	} else {
+		t7 = $[14];
+	}
+	return t7;
+}
+/** Props that turn a bare control into a labelled field. */
+const FIELD_COPY_PROPS = [
+	"label",
+	"description",
+	"error"
+];
+/**
+* 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 function usesFieldCopy(props) {
+	return FIELD_COPY_PROPS.some((propName) => propName in props);
+}
+/**
+* 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 function Field(t0) {
+	const $ = _c(18);
+	const { label, hideLabel: t1, description, error, aria, className, children } = t0;
+	const hideLabel = t1 === undefined ? false : t1;
+	let t2;
+	if ($[0] !== className) {
+		t2 = cn("grid w-full min-w-0", className);
+		$[0] = className;
+		$[1] = t2;
+	} else {
+		t2 = $[1];
+	}
+	let t3;
+	if ($[2] !== aria.controlId || $[3] !== hideLabel || $[4] !== label) {
+		t3 = label ? /* @__PURE__ */ _jsx("label", {
+			"data-slot": "field-label",
+			htmlFor: aria.controlId,
+			className: hideLabel ? "sr-only" : "mb-(--space-2) text-sm leading-(--leading-body) font-medium text-foreground",
+			children: label
+		}) : null;
+		$[2] = aria.controlId;
+		$[3] = hideLabel;
+		$[4] = label;
+		$[5] = t3;
+	} else {
+		t3 = $[5];
+	}
+	let t4;
+	if ($[6] !== aria.descriptionId || $[7] !== description) {
+		t4 = /* @__PURE__ */ _jsx(FieldMessage, {
+			id: aria.descriptionId,
+			text: description,
+			className: "text-text-muted"
+		});
+		$[6] = aria.descriptionId;
+		$[7] = description;
+		$[8] = t4;
+	} else {
+		t4 = $[8];
+	}
+	let t5;
+	if ($[9] !== aria.errorId || $[10] !== error) {
+		t5 = /* @__PURE__ */ _jsx(FieldMessage, {
+			id: aria.errorId,
+			text: error,
+			className: "text-danger",
+			alert: true
+		});
+		$[9] = aria.errorId;
+		$[10] = error;
+		$[11] = t5;
+	} else {
+		t5 = $[11];
+	}
+	let t6;
+	if ($[12] !== children || $[13] !== t2 || $[14] !== t3 || $[15] !== t4 || $[16] !== t5) {
+		t6 = /* @__PURE__ */ _jsxs("div", {
+			"data-slot": "field",
+			className: t2,
+			children: [
+				t3,
+				children,
+				t4,
+				t5
+			]
+		});
+		$[12] = children;
+		$[13] = t2;
+		$[14] = t3;
+		$[15] = t4;
+		$[16] = t5;
+		$[17] = t6;
+	} else {
+		t6 = $[17];
+	}
+	return t6;
+}