@funstack/ui 0.1.0-alpha.2 → 0.1.0-alpha.4

package/dist/number-field/number-field-root.mjs

@@ -0,0 +1,523 @@
+"use client";
+import { createActionDetails } from "../internal/action-details.mjs";
+import { dataAttr } from "../internal/data-attr.mjs";
+import { transitionTypes } from "../internal/transition-types.mjs";
+import { useLatest } from "../internal/use-latest.mjs";
+import { useControllableAction } from "../internal/use-controllable-action.mjs";
+import { mergeTokenLists } from "../internal/merge-props.mjs";
+import { useRender } from "../internal/use-render.mjs";
+import { useDevWarning } from "../internal/use-dev-warning.mjs";
+import { useActionTrigger } from "../internal/use-action-trigger.mjs";
+import { FieldContext } from "../internal/field-context.mjs";
+import { useFieldValueChange } from "../internal/use-field-control.mjs";
+import { useNativeGroupReconciliation } from "../internal/use-native-group-reconciliation.mjs";
+import { boundValue, stepBy, stepValue } from "./number-field-arithmetic.mjs";
+import { NumberFieldContext } from "./number-field-context.mjs";
+import { announce } from "../internal/announce.mjs";
+import { createNumberFormatter, formatKey } from "./number-field-format.mjs";
+import { addTransitionType, use, useCallback, useEffect, useId, useInsertionEffect, useMemo, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/number-field/number-field-root.tsx
+const isDev = process.env.NODE_ENV !== "production";
+const STEP_TYPES = transitionTypes("number-field", "change");
+const COMMIT_TYPES = transitionTypes("number-field", "commit");
+/** A finite number, or `null` (`NaN` / `Infinity` are treated as empty). */
+function sanitize(value) {
+	if (value === void 0 || value === null) return value;
+	return Number.isFinite(value) ? value : null;
+}
+/** The hidden input's value for `value`. */
+function hiddenText(value) {
+	return value === null ? "" : String(value);
+}
+function languageOf(tag) {
+	return tag.split("-")[0]?.toLowerCase() ?? "";
+}
+/**
+* Owns the number field's state (design/components/number-field.md 2): the committed value
+* through `useControllableAction` with `valueCommitAction` (once per gesture), each step through
+* its own transition (`valueChangeAction`), the urgent draft text, the urgent value of the open
+* gesture (`live`), the press-and-hold, the formatter and parser, the announcements, mount
+* reconciliation and form reset (through the hidden input the Input renders).
+*
+* Owned keys (conventions 1.2): `role="group"`, `aria-labelledby` (token-merged: the consumer's,
+* then `NumberField.Label`'s id while one is mounted, then a Field's label id), `data-pending`,
+* `data-disabled`, `data-invalid` (inside a Field).
+*/
+function NumberFieldRoot(props) {
+	const { value: valueProp, defaultValue: defaultValueProp, valueChangeAction, valueCommitAction, min, max, step: stepProp, largeStep: largeStepProp, format, locale, stepOnWheel = false, name: nameProp, form, disabled: disabledProp = false, readOnly = false, required: requiredProp = false, announce: announce$1, className, style, children, render, ...rest } = props;
+	const value = sanitize(valueProp);
+	const defaultValue = sanitize(defaultValueProp);
+	const key = formatKey(format);
+	const localeKey = locale === void 0 ? "" : JSON.stringify(locale);
+	const formatter = useMemo(() => createNumberFormatter(locale, format), [localeKey, key]);
+	const defaultStep = formatter.percent ? .01 : 1;
+	const stepValid = stepProp === void 0 || Number.isFinite(stepProp) && stepProp > 0;
+	const stepSize = stepProp !== void 0 && stepValid ? stepProp : defaultStep;
+	const largeStepValid = largeStepProp === void 0 || Number.isFinite(largeStepProp) && largeStepProp > 0;
+	const largeStep = largeStepProp !== void 0 && largeStepValid ? largeStepProp : 10 * stepSize;
+	const bounds = useMemo(() => ({
+		min: Number.isFinite(min) ? min : void 0,
+		max: Number.isFinite(max) ? max : void 0,
+		step: stepSize
+	}), [
+		min,
+		max,
+		stepSize
+	]);
+	const fieldContext = use(FieldContext);
+	const disabled = disabledProp || (fieldContext?.disabled ?? false);
+	const required = requiredProp || (fieldContext?.required ?? false);
+	const name = nameProp ?? fieldContext?.name;
+	const fieldInvalid = fieldContext === null ? void 0 : fieldContext.state.invalid;
+	const id = useId();
+	const inputId = fieldContext?.ids.control ?? `${id}-input`;
+	const labelId = `${id}-label`;
+	const [draft, setDraft] = useState(null);
+	const draftRef = useRef(null);
+	/** The value the open gesture has reached (`null` inside: an empty value). */
+	const [live, setLive] = useState(null);
+	const [hold, setHold] = useState(null);
+	const [stepHeld, setStepHeld] = useState(false);
+	const [pendingSource, setPendingSource] = useState(null);
+	const liveRef = useRef(null);
+	/** The shown value when the open gesture began; `null` when no gesture is open. */
+	const gestureStart = useRef(null);
+	/** The value the next tick of a hold steps from. */
+	const holdBase = useRef(null);
+	const holdRef = useRef(null);
+	const commitSeq = useRef(0);
+	const lastReason = useRef(null);
+	const shownRef = useRef(null);
+	const visibleRef = useRef(null);
+	const hiddenRef = useRef(null);
+	const clearDraft = useCallback(() => {
+		if (draftRef.current === null) return;
+		draftRef.current = null;
+		setDraft(null);
+	}, []);
+	/** The visible input is invalid exactly when the hidden one is (6.2). */
+	const mirror = useCallback(() => {
+		const hidden = hiddenRef.current;
+		const visible = visibleRef.current;
+		if (hidden === null || visible === null) return;
+		const message = hidden.validationMessage;
+		if (visible.validationMessage !== message) visible.setCustomValidity(message);
+	}, []);
+	const writeHidden = useCallback((next) => {
+		const hidden = hiddenRef.current;
+		if (hidden !== null) {
+			const text = hiddenText(next);
+			if (hidden.value !== text) hidden.value = text;
+		}
+		mirror();
+	}, [mirror]);
+	const { pending: stepPending, run: runStep } = useActionTrigger();
+	const runCommit = async (next, details) => {
+		const seq = ++commitSeq.current;
+		try {
+			await valueCommitAction?.(next, details);
+		} catch (error) {
+			if (valueProp === void 0 && seq === commitSeq.current) {
+				await void 0;
+				step(committedRef.current, null, "dismiss", void 0);
+			}
+			throw error;
+		}
+	};
+	const commitState = useControllableAction({
+		controlled: value,
+		defaultValue,
+		initialValue: null,
+		action: runCommit,
+		transitionTypes: () => COMMIT_TYPES,
+		warn: {
+			component: "NumberField.Root",
+			prop: "value"
+		}
+	});
+	const { optimistic, committed, dispatch } = commitState;
+	const committedRef = useLatest(committed);
+	const shown = (hold !== null || stepHeld || stepPending || commitState.pending) && live !== null ? live.value : optimistic;
+	const pending = stepPending || commitState.pending;
+	const text = draft ?? formatter.format(shown);
+	const parsedDraft = draft === null ? void 0 : formatter.parse(draft);
+	const stepBase = parsedDraft === void 0 ? shown : parsedDraft;
+	useInsertionEffect(() => {
+		shownRef.current = shown;
+	});
+	const state = useMemo(() => ({
+		value: shown,
+		text,
+		pending,
+		disabled,
+		readOnly,
+		required
+	}), [
+		shown,
+		text,
+		pending,
+		disabled,
+		readOnly,
+		required
+	]);
+	useFieldValueChange(optimistic, () => {
+		const edit = lastReason.current === "activate";
+		lastReason.current = null;
+		return edit;
+	});
+	const latest = useLatest({
+		valueChangeAction,
+		runStep,
+		formatter,
+		bounds,
+		largeStep,
+		disabled,
+		readOnly,
+		announce: announce$1,
+		state
+	});
+	const step = useCallback((next, source, reason, event) => {
+		const { formatter: f } = latest.current;
+		if (next !== null) next = f.round(next);
+		if (Object.is(next, shownRef.current)) return false;
+		liveRef.current = next;
+		shownRef.current = next;
+		lastReason.current = reason;
+		setLive({ value: next });
+		clearDraft();
+		setPendingSource(source);
+		writeHidden(next);
+		if (reason !== "dismiss") setStepHeld(true);
+		const { valueChangeAction: action, runStep: run } = latest.current;
+		if (action === void 0) return true;
+		run(() => {
+			for (const type of STEP_TYPES) addTransitionType(type);
+			return action(next, createActionDetails(event, {
+				reason,
+				source
+			}));
+		});
+		return true;
+	}, [
+		clearDraft,
+		latest,
+		writeHidden
+	]);
+	const announceValue = useCallback((next) => {
+		const visible = visibleRef.current;
+		if (visible === null) return;
+		const { announce: compose, formatter: f, state: s } = latest.current;
+		const nextState = {
+			...s,
+			value: next,
+			text: f.format(next)
+		};
+		const message = compose === void 0 ? nextState.text : compose(next, nextState);
+		if (message !== null) announce(visible, message);
+	}, [latest]);
+	const commit = useCallback((source, reason, event) => {
+		const start = gestureStart.current;
+		gestureStart.current = null;
+		setStepHeld(false);
+		const next = liveRef.current;
+		if (start === null || Object.is(next, start.value)) return false;
+		lastReason.current = reason;
+		setPendingSource(source);
+		dispatch(next, createActionDetails(event, {
+			reason,
+			source
+		}));
+		if (reason === "activate" && source !== "input" && source !== null) announceValue(next);
+		return true;
+	}, [announceValue, dispatch]);
+	/** Opens a gesture at the shown value. */
+	const openGesture = useCallback(() => {
+		gestureStart.current = { value: shownRef.current };
+		liveRef.current = shownRef.current;
+	}, []);
+	/** The value a key or a button steps from: the parsed draft if one is open, else the shown value. */
+	const resolveBase = useCallback(() => {
+		const open = draftRef.current;
+		if (open !== null) {
+			const parsed = latest.current.formatter.parse(open);
+			clearDraft();
+			if (parsed !== void 0) return parsed;
+		}
+		return shownRef.current;
+	}, [clearDraft, latest]);
+	/** A one-step gesture: a key press, a wheel event, a click activation. */
+	const oneStep = useCallback((compute, source, event) => {
+		const base = resolveBase();
+		openGesture();
+		step(compute(base), source, "activate", event);
+		commit(source, "activate", event);
+	}, [
+		commit,
+		openGesture,
+		resolveBase,
+		step
+	]);
+	const typed = useCallback((next) => {
+		draftRef.current = next;
+		setDraft(next);
+	}, []);
+	const commitDraft = useCallback((event) => {
+		const open = draftRef.current;
+		if (open === null) return;
+		const { formatter: f, disabled: off, readOnly: ro } = latest.current;
+		if (off || ro) {
+			clearDraft();
+			return;
+		}
+		const parsed = f.parse(open);
+		if (parsed === void 0 || Object.is(parsed, shownRef.current)) {
+			clearDraft();
+			return;
+		}
+		openGesture();
+		step(parsed, "input", "activate", event);
+		commit("input", "activate", event);
+	}, [
+		clearDraft,
+		commit,
+		latest,
+		openGesture,
+		step
+	]);
+	const keyDown = useCallback((event) => {
+		const { disabled: off, readOnly: ro, bounds: b, largeStep: large } = latest.current;
+		if (off || ro || event.isComposing || event.keyCode === 229) return;
+		if (event.key === "Enter") {
+			commitDraft(event);
+			return;
+		}
+		if (event.altKey || event.ctrlKey || event.metaKey) return;
+		let compute = null;
+		switch (event.key) {
+			case "ArrowUp":
+				compute = event.shiftKey ? (v) => stepBy(v, large, b) : (v) => stepValue(v, 1, b);
+				break;
+			case "ArrowDown":
+				compute = event.shiftKey ? (v) => stepBy(v, -large, b) : (v) => stepValue(v, -1, b);
+				break;
+			case "PageUp":
+				compute = (v) => stepBy(v, large, b);
+				break;
+			case "PageDown":
+				compute = (v) => stepBy(v, -large, b);
+				break;
+			case "Home": {
+				if (event.shiftKey) break;
+				const target = boundValue("min", b);
+				if (target !== void 0) compute = () => target;
+				break;
+			}
+			case "End": {
+				if (event.shiftKey) break;
+				const target = boundValue("max", b);
+				if (target !== void 0) compute = () => target;
+				break;
+			}
+		}
+		if (compute === null) return;
+		event.preventDefault();
+		oneStep(compute, "keyboard", event);
+	}, [
+		commitDraft,
+		latest,
+		oneStep
+	]);
+	const wheel = useCallback((event) => {
+		const { disabled: off, readOnly: ro, bounds: b } = latest.current;
+		const visible = visibleRef.current;
+		if (off || ro || visible === null || event.deltaY === 0) return;
+		if (visible.ownerDocument.activeElement !== visible) return;
+		event.preventDefault();
+		const n = event.deltaY < 0 ? 1 : -1;
+		oneStep((v) => stepValue(v, n, b), "wheel", event);
+	}, [latest, oneStep]);
+	const endHold = useCallback((direction, event) => {
+		if (holdRef.current !== direction) return;
+		holdRef.current = null;
+		setHold(null);
+		commit(direction, "activate", event);
+	}, [commit]);
+	const tickHold = useCallback((direction, event) => {
+		if (holdRef.current !== direction) return false;
+		const { bounds: b } = latest.current;
+		const n = direction === "increment" ? 1 : -1;
+		const next = stepValue(holdBase.current, n, b);
+		holdBase.current = next;
+		step(next, direction, "activate", event);
+		if (stepValue(next, n, b) === next) {
+			endHold(direction, event);
+			return false;
+		}
+		return true;
+	}, [
+		endHold,
+		latest,
+		step
+	]);
+	const beginHold = useCallback((direction, event) => {
+		const { disabled: off, readOnly: ro } = latest.current;
+		if (off || ro || holdRef.current !== null) return false;
+		const base = resolveBase();
+		openGesture();
+		setLive({ value: shownRef.current });
+		holdBase.current = base;
+		holdRef.current = direction;
+		setHold(direction);
+		return tickHold(direction, event);
+	}, [
+		latest,
+		openGesture,
+		resolveBase,
+		tickHold
+	]);
+	const activate = useCallback((direction, event) => {
+		const { disabled: off, readOnly: ro, bounds: b } = latest.current;
+		if (off || ro || holdRef.current !== null) return;
+		const n = direction === "increment" ? 1 : -1;
+		oneStep((v) => stepValue(v, n, b), direction, event);
+	}, [latest, oneStep]);
+	const [labelCount, setLabelCount] = useState(0);
+	const registerLabel = useCallback(() => {
+		setLabelCount((count) => count + 1);
+		return () => setLabelCount((count) => count - 1);
+	}, []);
+	const [mountValue] = useState(value);
+	const resetTarget = () => valueProp !== void 0 ? mountValue ?? null : defaultValue ?? null;
+	const resetTargetText = hiddenText(resetTarget());
+	const { onItemMounted } = useNativeGroupReconciliation({
+		element: hiddenRef,
+		readCurrent: () => {
+			const visible = visibleRef.current;
+			const current = shownRef.current;
+			if (visible === null) return current;
+			const domText = visible.value;
+			if (domText === formatter.format(current)) return current;
+			if (visible.ownerDocument.activeElement === visible) {
+				draftRef.current = domText;
+				setDraft(domText);
+				return current;
+			}
+			const parsed = formatter.parse(domText);
+			if (parsed === void 0 || Object.is(parsed, current)) {
+				visible.value = formatter.format(current);
+				return current;
+			}
+			return parsed;
+		},
+		readDefault: () => {
+			clearDraft();
+			return resetTarget();
+		},
+		base: () => shownRef.current,
+		onPlatformChange: (next, event) => {
+			openGesture();
+			step(next, null, "platform", event);
+			commit(null, "platform", event);
+		},
+		onResetEvent: () => {
+			const visible = visibleRef.current;
+			if (visible !== null) visible.defaultValue = formatter.format(resetTarget());
+		}
+	});
+	useDevWarning(valueProp !== void 0 && valueProp !== null && !Number.isFinite(valueProp) || defaultValueProp !== void 0 && defaultValueProp !== null && !Number.isFinite(defaultValueProp), `NumberField.Root: \`value\` / \`defaultValue\` must be a finite number or \`null\`; got ${String(valueProp ?? defaultValueProp)}, treated as empty.`);
+	useDevWarning(bounds.min !== void 0 && bounds.max !== void 0 && bounds.min > bounds.max, `NumberField.Root: \`min\` (${String(min)}) is greater than \`max\` (${String(max)}).`);
+	useDevWarning(!stepValid || !largeStepValid, "NumberField.Root: `step` and `largeStep` must be positive numbers; using the defaults.");
+	useDevWarning(formatter.warning !== null, `NumberField.Root: ${formatter.warning ?? ""}`);
+	const warnedLang = useRef(false);
+	useEffect(() => {
+		if (!isDev || warnedLang.current || locale !== void 0) return;
+		const lang = document.documentElement.lang;
+		if (lang === "" || languageOf(lang) === languageOf(formatter.locale)) return;
+		warnedLang.current = true;
+		console.error(`NumberField.Root: the page is \`lang="${lang}"\` but NumberField formats as \`${formatter.locale}\` (the runtime's locale); pass \`locale\`.`);
+	}, [locale, formatter]);
+	useEffect(() => () => {
+		holdRef.current = null;
+	}, []);
+	const context = useMemo(() => ({
+		state,
+		bounds,
+		stepBase,
+		pendingSource: pending ? pendingSource : null,
+		inputId,
+		labelId,
+		name,
+		form,
+		allowsFractions: formatter.allowsFractions || !Number.isInteger(stepSize),
+		stepOnWheel,
+		resetTargetText,
+		fieldInvalid,
+		visibleRef,
+		hiddenRef,
+		typed,
+		commitDraft,
+		keyDown,
+		wheel,
+		beginHold,
+		tickHold,
+		endHold,
+		activate,
+		mirror,
+		registerLabel,
+		onInputMounted: onItemMounted
+	}), [
+		state,
+		bounds,
+		stepBase,
+		pending,
+		pendingSource,
+		inputId,
+		labelId,
+		name,
+		form,
+		formatter,
+		stepSize,
+		stepOnWheel,
+		resetTargetText,
+		fieldInvalid,
+		typed,
+		commitDraft,
+		keyDown,
+		wheel,
+		beginHold,
+		tickHold,
+		endHold,
+		activate,
+		mirror,
+		registerLabel,
+		onItemMounted
+	]);
+	const labelledBy = mergeTokenLists(labelCount > 0 ? labelId : void 0, fieldContext?.ids.label);
+	const libraryProps = {
+		role: "group",
+		...labelledBy !== "" ? { "aria-labelledby": labelledBy } : {},
+		...fieldContext !== null ? { "data-invalid": dataAttr(fieldInvalid === true) } : {},
+		"data-pending": dataAttr(pending),
+		"data-disabled": dataAttr(disabled)
+	};
+	const element = useRender({
+		defaultElement: "div",
+		render,
+		state,
+		className,
+		style,
+		children,
+		props: rest,
+		libraryProps
+	});
+	return /* @__PURE__ */ jsx(NumberFieldContext, {
+		value: context,
+		children: element
+	});
+}
+NumberFieldRoot.displayName = "NumberFieldRoot";
+//#endregion
+export { NumberFieldRoot, hiddenText };
+
+//# sourceMappingURL=number-field-root.mjs.map

package/dist/number-field/number-field-root.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"number-field-root.mjs","names":[],"sources":["../../src/number-field/number-field-root.tsx"],"sourcesContent":["\"use client\";\nimport {\n  addTransitionType,\n  use,\n  useCallback,\n  useEffect,\n  useId,\n  useInsertionEffect,\n  useMemo,\n  useRef,\n  useState,\n} from \"react\";\nimport type { ComponentPropsWithRef, CSSProperties, ReactNode, RefObject } from \"react\";\nimport { createActionDetails } from \"../internal/action-details.js\";\nimport { announce as speak } from \"../internal/announce.js\";\nimport { dataAttr } from \"../internal/data-attr.js\";\nimport { FieldContext } from \"../internal/field-context.js\";\nimport { mergeTokenLists } from \"../internal/merge-props.js\";\nimport { transitionTypes } from \"../internal/transition-types.js\";\nimport type {\n  ActionDetails,\n  ChangeAction,\n  ChangeReason,\n  RenderProp,\n  StateValue,\n} from \"../internal/types.js\";\nimport { useActionTrigger } from \"../internal/use-action-trigger.js\";\nimport { useControllableAction } from \"../internal/use-controllable-action.js\";\nimport { useDevWarning } from \"../internal/use-dev-warning.js\";\nimport { useFieldValueChange } from \"../internal/use-field-control.js\";\nimport type { FormAssociatedElement } from \"../internal/use-form-reset.js\";\nimport { useLatest } from \"../internal/use-latest.js\";\nimport { useNativeGroupReconciliation } from \"../internal/use-native-group-reconciliation.js\";\nimport { useRender } from \"../internal/use-render.js\";\nimport type { DataAttributes } from \"../internal/use-render.js\";\nimport { boundValue, stepBy, stepValue } from \"./number-field-arithmetic.js\";\nimport type { StepBounds } from \"./number-field-arithmetic.js\";\nimport { NumberFieldContext } from \"./number-field-context.js\";\nimport type {\n  NumberFieldContextValue,\n  NumberFieldSource,\n  StepDirection,\n} from \"./number-field-context.js\";\nimport { createNumberFormatter, formatKey } from \"./number-field-format.js\";\n\n/** Details passed as the second argument of both NumberField actions. */\nexport interface NumberFieldValueChangeDetails extends ActionDetails {\n  /**\n   * `\"activate\"`: the user typed, pressed a key, a button or turned the wheel (`details.event` is\n   * the `focusout` / Enter `keydown` of a typed value, the `keydown` of a key, the `pointerdown` /\n   * `pointerup` of a button (`undefined` for the repeats of a held button and for a hold that\n   * ended at its bound), the `wheel` event). `\"platform\"`: a form reset (the `reset`\n   * event) or text typed before hydration (`undefined`). `\"dismiss\"`: the commit action rejected\n   * and the field reverted to the committed value (uncontrolled; `valueChangeAction` only).\n   */\n  readonly reason: ChangeReason;\n  /** What produced the value: typed text, a button, a key, the wheel; `null` for \"platform\" and \"dismiss\". */\n  readonly source: \"input\" | \"increment\" | \"decrement\" | \"keyboard\" | \"wheel\" | null;\n}\n\n/** The state every NumberField part's function props receive (one object, Field's precedent). */\nexport interface NumberFieldState {\n  /** The shown value: the gesture's value while one is open or in flight, else the optimistic value; `null` when empty. */\n  readonly value: number | null;\n  /** The shown text: the draft while the user is editing, else `value` formatted. */\n  readonly text: string;\n  /** A step or commit dispatched through this NumberField is in flight. */\n  readonly pending: boolean;\n  readonly disabled: boolean;\n  readonly readOnly: boolean;\n  readonly required: boolean;\n}\n\nexport interface NumberFieldRootProps extends Omit<\n  ComponentPropsWithRef<\"div\">,\n  \"defaultValue\" | \"role\" | \"className\" | \"style\" | \"children\"\n> {\n  /** Controlled value; `null` is empty, `undefined` uncontrolled. */\n  value?: number | null;\n  /** Initial value in uncontrolled mode, and its form-reset target (latest). Default `null` (empty). */\n  defaultValue?: number | null;\n  /**\n   * Runs inside the Root's step transition on every step: the parse of typed text at commit,\n   * each key press, each tick of a hold, each wheel event, each platform change, and the revert\n   * after a rejected commit (`reason: \"dismiss\"`, uncontrolled). Keep it cheap: adopt the value\n   * (`setValue(next)` in the sync prefix is a transition update), start a deferred render.\n   */\n  valueChangeAction?: ChangeAction<number | null, NumberFieldValueChangeDetails>;\n  /**\n   * Runs inside the Root's commit transition once per gesture: a typed text's blur or Enter, a\n   * hold's release, each key press, each wheel event, a form reset, text typed before hydration.\n   * Where the save goes; uncontrolled state is committed when it resolves and reverts when it\n   * rejects. May be a Server Function.\n   */\n  valueCommitAction?: ChangeAction<number | null, NumberFieldValueChangeDetails>;\n  /** Native `min` on the hidden input (a constraint) and the lower bound of stepping. */\n  min?: number;\n  /** Native `max` on the hidden input (a constraint) and the upper bound of stepping. */\n  max?: number;\n  /** Native `step` and the stepping grid from `min` (else `0`). Default `1`, or `0.01` when `format.style` is `\"percent\"`. */\n  step?: number;\n  /** PageUp / PageDown and Shift+Arrow. Default `10 × step`. */\n  largeStep?: number;\n  /**\n   * `Intl.NumberFormatOptions` for the text: `style` `\"decimal\"` (default), `\"percent\"`,\n   * `\"currency\"` (with `currency`), `\"unit\"` (with `unit`); fraction digits, grouping, sign\n   * display. `notation: \"compact\"` is a dev warning (unparsable).\n   */\n  format?: Intl.NumberFormatOptions;\n  /**\n   * BCP 47 tag(s). Default: the runtime's locale (`Intl.NumberFormat().resolvedOptions().locale`).\n   * Pass the page's `lang`; a dev warning fires when `document.documentElement.lang` disagrees\n   * and this prop is absent.\n   */\n  locale?: string | readonly string[];\n  /** Step with the mouse wheel while the input is focused. Default `false`. */\n  stepOnWheel?: boolean;\n  /** Native `name` on the hidden input; defaults to the Field's `name` inside a `Field.Root`. */\n  name?: string;\n  /** Native `form` on the hidden input. */\n  form?: string;\n  /** Disables both inputs and the buttons; inherited by every part. */\n  disabled?: boolean;\n  /** Native `readonly` on both inputs; no stepping (buttons disabled, keys and wheel inert). */\n  readOnly?: boolean;\n  /** Native `required` on the hidden input (empty is `valueMissing`); or the Field's. */\n  required?: boolean;\n  /**\n   * What is announced (`ariaNotify()`, else a live region) after a key press, a wheel event, a\n   * click activation and a hold's release. Default: `(_, state) => state.text`. Return `null` to\n   * announce nothing.\n   */\n  announce?: (value: number | null, state: NumberFieldState) => string | null;\n  className?: StateValue<string | undefined, NumberFieldState>;\n  style?: StateValue<CSSProperties | undefined, NumberFieldState>;\n  children?: StateValue<ReactNode, NumberFieldState>;\n  render?: RenderProp<ComponentPropsWithRef<\"div\">, NumberFieldState>;\n}\n\nconst isDev = process.env.NODE_ENV !== \"production\";\n\nconst STEP_TYPES = transitionTypes(\"number-field\", \"change\");\nconst COMMIT_TYPES = transitionTypes(\"number-field\", \"commit\");\n\n/** A finite number, or `null` (`NaN` / `Infinity` are treated as empty). */\nfunction sanitize(value: number | null | undefined): number | null | undefined {\n  if (value === undefined || value === null) return value;\n  return Number.isFinite(value) ? value : null;\n}\n\n/** The hidden input's value for `value`. */\nexport function hiddenText(value: number | null): string {\n  return value === null ? \"\" : String(value);\n}\n\nfunction languageOf(tag: string): string {\n  return tag.split(\"-\")[0]?.toLowerCase() ?? \"\";\n}\n\n/**\n * Owns the number field's state (design/components/number-field.md 2): the committed value\n * through `useControllableAction` with `valueCommitAction` (once per gesture), each step through\n * its own transition (`valueChangeAction`), the urgent draft text, the urgent value of the open\n * gesture (`live`), the press-and-hold, the formatter and parser, the announcements, mount\n * reconciliation and form reset (through the hidden input the Input renders).\n *\n * Owned keys (conventions 1.2): `role=\"group\"`, `aria-labelledby` (token-merged: the consumer's,\n * then `NumberField.Label`'s id while one is mounted, then a Field's label id), `data-pending`,\n * `data-disabled`, `data-invalid` (inside a Field).\n */\nexport function NumberFieldRoot(props: NumberFieldRootProps) {\n  const {\n    value: valueProp,\n    defaultValue: defaultValueProp,\n    valueChangeAction,\n    valueCommitAction,\n    min,\n    max,\n    step: stepProp,\n    largeStep: largeStepProp,\n    format,\n    locale,\n    stepOnWheel = false,\n    name: nameProp,\n    form,\n    disabled: disabledProp = false,\n    readOnly = false,\n    required: requiredProp = false,\n    announce,\n    className,\n    style,\n    children,\n    render,\n    ...rest\n  } = props;\n\n  const value = sanitize(valueProp);\n  const defaultValue = sanitize(defaultValueProp);\n\n  // --- Format, bounds -----------------------------------------------------------------------\n\n  const key = formatKey(format);\n  const localeKey = locale === undefined ? \"\" : JSON.stringify(locale);\n  // Memoised on the content of `format` and `locale`, not their identity (an inline object).\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  const formatter = useMemo(() => createNumberFormatter(locale, format), [localeKey, key]);\n  const defaultStep = formatter.percent ? 0.01 : 1;\n  const stepValid = stepProp === undefined || (Number.isFinite(stepProp) && stepProp > 0);\n  const stepSize = stepProp !== undefined && stepValid ? stepProp : defaultStep;\n  const largeStepValid =\n    largeStepProp === undefined || (Number.isFinite(largeStepProp) && largeStepProp > 0);\n  const largeStep = largeStepProp !== undefined && largeStepValid ? largeStepProp : 10 * stepSize;\n  const bounds = useMemo<StepBounds>(\n    () => ({\n      min: Number.isFinite(min) ? min : undefined,\n      max: Number.isFinite(max) ? max : undefined,\n      step: stepSize,\n    }),\n    [min, max, stepSize],\n  );\n\n  // --- Field ----------------------------------------------------------------------------------\n\n  const fieldContext = use(FieldContext);\n  const disabled = disabledProp || (fieldContext?.disabled ?? false);\n  const required = requiredProp || (fieldContext?.required ?? false);\n  const name = nameProp ?? fieldContext?.name;\n  const fieldInvalid = fieldContext === null ? undefined : fieldContext.state.invalid;\n\n  const id = useId();\n  const inputId = fieldContext?.ids.control ?? `${id}-input`;\n  const labelId = `${id}-label`;\n\n  // --- State (design 2) -----------------------------------------------------------------------\n\n  const [draft, setDraft] = useState<string | null>(null);\n  const draftRef = useRef<string | null>(null);\n  /** The value the open gesture has reached (`null` inside: an empty value). */\n  const [live, setLive] = useState<{ readonly value: number | null } | null>(null);\n  const [hold, setHold] = useState<StepDirection | null>(null);\n  const [stepHeld, setStepHeld] = useState(false);\n  const [pendingSource, setPendingSource] = useState<NumberFieldSource>(null);\n\n  const liveRef = useRef<number | null>(null);\n  /** The shown value when the open gesture began; `null` when no gesture is open. */\n  const gestureStart = useRef<{ readonly value: number | null } | null>(null);\n  /** The value the next tick of a hold steps from. */\n  const holdBase = useRef<number | null>(null);\n  const holdRef = useRef<StepDirection | null>(null);\n  const commitSeq = useRef(0);\n  const lastReason = useRef<ChangeReason | null>(null);\n  const shownRef = useRef<number | null>(null);\n  const visibleRef = useRef<HTMLInputElement | null>(null);\n  const hiddenRef = useRef<HTMLInputElement | null>(null);\n\n  const clearDraft = useCallback(() => {\n    if (draftRef.current === null) return;\n    draftRef.current = null;\n    setDraft(null);\n  }, []);\n\n  /** The visible input is invalid exactly when the hidden one is (6.2). */\n  const mirror = useCallback(() => {\n    const hidden = hiddenRef.current;\n    const visible = visibleRef.current;\n    if (hidden === null || visible === null) return;\n    const message = hidden.validationMessage;\n    if (visible.validationMessage !== message) visible.setCustomValidity(message);\n  }, []);\n\n  const writeHidden = useCallback(\n    (next: number | null) => {\n      const hidden = hiddenRef.current;\n      if (hidden !== null) {\n        const text = hiddenText(next);\n        if (hidden.value !== text) hidden.value = text;\n      }\n      mirror();\n    },\n    [mirror],\n  );\n\n  const { pending: stepPending, run: runStep } = useActionTrigger();\n\n  const runCommit = async (\n    next: number | null,\n    details: NumberFieldValueChangeDetails,\n  ): Promise<void> => {\n    const seq = ++commitSeq.current;\n    try {\n      await valueCommitAction?.(next, details);\n    } catch (error) {\n      // Design 2.4: in uncontrolled mode, tell the preview channel about the rollback, for the\n      // latest commit only. Yield once to leave the commit's transition (conventions 2.6).\n      if (valueProp === undefined && seq === commitSeq.current) {\n        await undefined;\n        // `step` and `committedRef` are declared below; this runs long after the render.\n        step(committedRef.current, null, \"dismiss\", undefined);\n      }\n      throw error;\n    }\n  };\n\n  const commitState = useControllableAction<number | null, NumberFieldValueChangeDetails>({\n    controlled: value,\n    defaultValue,\n    initialValue: null,\n    action: runCommit,\n    transitionTypes: () => COMMIT_TYPES,\n    warn: { component: \"NumberField.Root\", prop: \"value\" },\n  });\n  const { optimistic, committed, dispatch } = commitState;\n  const committedRef = useLatest(committed);\n\n  const held = hold !== null || stepHeld || stepPending || commitState.pending;\n  const shown = held && live !== null ? live.value : optimistic;\n  const pending = stepPending || commitState.pending;\n  const text = draft ?? formatter.format(shown);\n  // The value a button press steps from (4.3 step 3): the parsed draft while one is open.\n  const parsedDraft = draft === null ? undefined : formatter.parse(draft);\n  const stepBase = parsedDraft === undefined ? shown : parsedDraft;\n  useInsertionEffect(() => {\n    shownRef.current = shown;\n  });\n\n  const state = useMemo<NumberFieldState>(\n    () => ({ value: shown, text, pending, disabled, readOnly, required }),\n    [shown, text, pending, disabled, readOnly, required],\n  );\n\n  // A step, a key and a typed commit fire no `input` / `change` on the element the Field hears\n  // for the value (the hidden input is written by script): tell it at the commit (design 7.2).\n  useFieldValueChange(optimistic, () => {\n    const edit = lastReason.current === \"activate\";\n    lastReason.current = null;\n    return edit;\n  });\n\n  const latest = useLatest({\n    valueChangeAction,\n    runStep,\n    formatter,\n    bounds,\n    largeStep,\n    disabled,\n    readOnly,\n    announce,\n    state,\n  });\n\n  // --- Step and commit (design 2.4) -----------------------------------------------------------\n\n  const step = useCallback(\n    (\n      next: number | null,\n      source: NumberFieldSource,\n      reason: ChangeReason,\n      event: Event | undefined,\n    ): boolean => {\n      // What the text can show is what the form posts (5.4): a step finer than the format's\n      // digits is rounded like a typed value.\n      const { formatter: f } = latest.current;\n      if (next !== null) next = f.round(next);\n      // No-op against what the user sees (conventions 2.3 item 8).\n      if (Object.is(next, shownRef.current)) return false;\n      liveRef.current = next;\n      shownRef.current = next;\n      lastReason.current = reason;\n      setLive({ value: next });\n      clearDraft();\n      setPendingSource(source);\n      writeHidden(next);\n      // A revert has no commit after it: the optimistic value already shows the committed one.\n      if (reason !== \"dismiss\") setStepHeld(true);\n      const { valueChangeAction: action, runStep: run } = latest.current;\n      // Without a step action nothing runs and no transition starts (Slider M2).\n      if (action === undefined) return true;\n      run(() => {\n        for (const type of STEP_TYPES) addTransitionType(type);\n        return action(next, createActionDetails(event, { reason, source }));\n      });\n      return true;\n    },\n    [clearDraft, latest, writeHidden],\n  );\n\n  const announceValue = useCallback(\n    (next: number | null) => {\n      const visible = visibleRef.current;\n      if (visible === null) return;\n      const { announce: compose, formatter: f, state: s } = latest.current;\n      const nextState: NumberFieldState = { ...s, value: next, text: f.format(next) };\n      const message = compose === undefined ? nextState.text : compose(next, nextState);\n      if (message !== null) speak(visible, message);\n    },\n    [latest],\n  );\n\n  const commit = useCallback(\n    (source: NumberFieldSource, reason: ChangeReason, event: Event | undefined): boolean => {\n      const start = gestureStart.current;\n      gestureStart.current = null;\n      // The commit's own pending state holds `live` from here (set in this same batch).\n      setStepHeld(false);\n      const next = liveRef.current;\n      // Nothing changed since the gesture began (a hold that returned to its start).\n      if (start === null || Object.is(next, start.value)) return false;\n      lastReason.current = reason;\n      setPendingSource(source);\n      dispatch(next, createActionDetails(event, { reason, source }));\n      if (reason === \"activate\" && source !== \"input\" && source !== null) announceValue(next);\n      return true;\n    },\n    [announceValue, dispatch],\n  );\n\n  /** Opens a gesture at the shown value. */\n  const openGesture = useCallback(() => {\n    gestureStart.current = { value: shownRef.current };\n    liveRef.current = shownRef.current;\n  }, []);\n\n  /** The value a key or a button steps from: the parsed draft if one is open, else the shown value. */\n  const resolveBase = useCallback((): number | null => {\n    const open = draftRef.current;\n    if (open !== null) {\n      const parsed = latest.current.formatter.parse(open);\n      clearDraft();\n      if (parsed !== undefined) return parsed;\n    }\n    return shownRef.current;\n  }, [clearDraft, latest]);\n\n  /** A one-step gesture: a key press, a wheel event, a click activation. */\n  const oneStep = useCallback(\n    (compute: (base: number | null) => number | null, source: NumberFieldSource, event: Event) => {\n      const base = resolveBase();\n      openGesture();\n      step(compute(base), source, \"activate\", event);\n      commit(source, \"activate\", event);\n    },\n    [commit, openGesture, resolveBase, step],\n  );\n\n  // --- Typing (design 4.1) ----------------------------------------------------------------------\n\n  const typed = useCallback((next: string) => {\n    draftRef.current = next;\n    setDraft(next);\n  }, []);\n\n  const commitDraft = useCallback(\n    (event: Event) => {\n      const open = draftRef.current;\n      if (open === null) return;\n      const { formatter: f, disabled: off, readOnly: ro } = latest.current;\n      if (off || ro) {\n        clearDraft();\n        return;\n      }\n      const parsed = f.parse(open);\n      // Unparsable: revert to the committed value's text, no dispatch, no error.\n      if (parsed === undefined || Object.is(parsed, shownRef.current)) {\n        clearDraft();\n        return;\n      }\n      openGesture();\n      step(parsed, \"input\", \"activate\", event);\n      commit(\"input\", \"activate\", event);\n    },\n    [clearDraft, commit, latest, openGesture, step],\n  );\n\n  // --- Keyboard and wheel (design 4.2, 4.4) ----------------------------------------------------\n\n  const keyDown = useCallback(\n    (event: KeyboardEvent) => {\n      const { disabled: off, readOnly: ro, bounds: b, largeStep: large } = latest.current;\n      // WebKit fires `compositionend` before the confirming keydown, which then has\n      // `isComposing === false` and `keyCode === 229` (Combobox's guard).\n      if (off || ro || event.isComposing || event.keyCode === 229) return;\n      if (event.key === \"Enter\") {\n        commitDraft(event);\n        return;\n      }\n      if (event.altKey || event.ctrlKey || event.metaKey) return;\n      let compute: ((base: number | null) => number | null) | null = null;\n      switch (event.key) {\n        case \"ArrowUp\":\n          compute = event.shiftKey ? (v) => stepBy(v, large, b) : (v) => stepValue(v, 1, b);\n          break;\n        case \"ArrowDown\":\n          compute = event.shiftKey ? (v) => stepBy(v, -large, b) : (v) => stepValue(v, -1, b);\n          break;\n        case \"PageUp\":\n          compute = (v) => stepBy(v, large, b);\n          break;\n        case \"PageDown\":\n          compute = (v) => stepBy(v, -large, b);\n          break;\n        case \"Home\": {\n          // Shift+Home / Shift+End are text selection.\n          if (event.shiftKey) break;\n          const target = boundValue(\"min\", b);\n          if (target !== undefined) compute = () => target;\n          break;\n        }\n        case \"End\": {\n          if (event.shiftKey) break;\n          const target = boundValue(\"max\", b);\n          if (target !== undefined) compute = () => target;\n          break;\n        }\n        default:\n          break;\n      }\n      if (compute === null) return;\n      event.preventDefault();\n      oneStep(compute, \"keyboard\", event);\n    },\n    [commitDraft, latest, oneStep],\n  );\n\n  const wheel = useCallback(\n    (event: WheelEvent) => {\n      const { disabled: off, readOnly: ro, bounds: b } = latest.current;\n      const visible = visibleRef.current;\n      if (off || ro || visible === null || event.deltaY === 0) return;\n      // Only while the input is focused; unfocused, the page scrolls.\n      if (visible.ownerDocument.activeElement !== visible) return;\n      event.preventDefault();\n      const n = event.deltaY < 0 ? 1 : -1;\n      oneStep((v) => stepValue(v, n, b), \"wheel\", event);\n    },\n    [latest, oneStep],\n  );\n\n  // --- Buttons (design 4.3) ---------------------------------------------------------------------\n\n  const endHold = useCallback(\n    (direction: StepDirection, event: Event | undefined) => {\n      if (holdRef.current !== direction) return;\n      holdRef.current = null;\n      setHold(null);\n      commit(direction, \"activate\", event);\n    },\n    [commit],\n  );\n\n  const tickHold = useCallback(\n    (direction: StepDirection, event: Event | undefined): boolean => {\n      if (holdRef.current !== direction) return false;\n      const { bounds: b } = latest.current;\n      const n = direction === \"increment\" ? 1 : -1;\n      const next = stepValue(holdBase.current, n, b);\n      holdBase.current = next;\n      step(next, direction, \"activate\", event);\n      // At the bound: end the hold now, before the button re-renders disabled (a disabled\n      // element may not deliver the release).\n      if (stepValue(next, n, b) === next) {\n        endHold(direction, event);\n        return false;\n      }\n      return true;\n    },\n    [endHold, latest, step],\n  );\n\n  const beginHold = useCallback(\n    (direction: StepDirection, event: Event): boolean => {\n      const { disabled: off, readOnly: ro } = latest.current;\n      if (off || ro || holdRef.current !== null) return false;\n      const base = resolveBase();\n      openGesture();\n      // A capture alone holds `live` on screen: start it from what is shown.\n      setLive({ value: shownRef.current });\n      holdBase.current = base;\n      holdRef.current = direction;\n      setHold(direction);\n      return tickHold(direction, event);\n    },\n    [latest, openGesture, resolveBase, tickHold],\n  );\n\n  const activate = useCallback(\n    (direction: StepDirection, event: Event) => {\n      const { disabled: off, readOnly: ro, bounds: b } = latest.current;\n      if (off || ro || holdRef.current !== null) return;\n      const n = direction === \"increment\" ? 1 : -1;\n      oneStep((v) => stepValue(v, n, b), direction, event);\n    },\n    [latest, oneStep],\n  );\n\n  // --- Labels ---------------------------------------------------------------------------------\n\n  const [labelCount, setLabelCount] = useState(0);\n  const registerLabel = useCallback(() => {\n    setLabelCount((count) => count + 1);\n    return () => setLabelCount((count) => count - 1);\n  }, []);\n\n  // --- Residual browser paths: mount reconciliation and form reset (design 4.5, 6.4) ----------\n\n  const [mountValue] = useState(value);\n  const resetTarget = (): number | null =>\n    valueProp !== undefined ? (mountValue ?? null) : (defaultValue ?? null);\n  const resetTargetText = hiddenText(resetTarget());\n\n  const { onItemMounted } = useNativeGroupReconciliation<number | null>({\n    element: hiddenRef as RefObject<FormAssociatedElement | null>,\n    readCurrent: () => {\n      const visible = visibleRef.current;\n      const current = shownRef.current;\n      if (visible === null) return current;\n      const domText = visible.value;\n      if (domText === formatter.format(current)) return current;\n      if (visible.ownerDocument.activeElement === visible) {\n        // Still typing (even a partial `12,` or `-`): adopted as the draft, never overwritten\n        // under the caret. The blur commits it, or reverts it by the ordinary rule.\n        draftRef.current = domText;\n        setDraft(domText);\n        return current;\n      }\n      const parsed = formatter.parse(domText);\n      if (parsed === undefined || Object.is(parsed, current)) {\n        // Another locale's formatting of the same value, or text that is no number: show the\n        // client's text (react-dom kept the hydrated DOM value).\n        visible.value = formatter.format(current);\n        return current;\n      }\n      return parsed;\n    },\n    readDefault: () => {\n      // A reset clears an open draft whatever the target.\n      clearDraft();\n      return resetTarget();\n    },\n    base: () => shownRef.current,\n    onPlatformChange: (next, event) => {\n      openGesture();\n      step(next, null, \"platform\", event);\n      commit(null, \"platform\", event);\n    },\n    onResetEvent: () => {\n      // react-dom rewrites a controlled text input's `defaultValue` after every update; the\n      // visible text's reset target is written right before the reset algorithm reads it.\n      const visible = visibleRef.current;\n      if (visible !== null) visible.defaultValue = formatter.format(resetTarget());\n    },\n  });\n\n  // --- Development warnings -------------------------------------------------------------------\n\n  useDevWarning(\n    (valueProp !== undefined && valueProp !== null && !Number.isFinite(valueProp)) ||\n      (defaultValueProp !== undefined &&\n        defaultValueProp !== null &&\n        !Number.isFinite(defaultValueProp)),\n    \"NumberField.Root: `value` / `defaultValue` must be a finite number or `null`; \" +\n      `got ${String(valueProp ?? defaultValueProp)}, treated as empty.`,\n  );\n  useDevWarning(\n    bounds.min !== undefined && bounds.max !== undefined && bounds.min > bounds.max,\n    `NumberField.Root: \\`min\\` (${String(min)}) is greater than \\`max\\` (${String(max)}).`,\n  );\n  useDevWarning(\n    !stepValid || !largeStepValid,\n    \"NumberField.Root: `step` and `largeStep` must be positive numbers; using the defaults.\",\n  );\n  useDevWarning(formatter.warning !== null, `NumberField.Root: ${formatter.warning ?? \"\"}`);\n  const warnedLang = useRef(false);\n  useEffect(() => {\n    if (!isDev || warnedLang.current || locale !== undefined) return;\n    const lang = document.documentElement.lang;\n    if (lang === \"\" || languageOf(lang) === languageOf(formatter.locale)) return;\n    warnedLang.current = true;\n    console.error(\n      `NumberField.Root: the page is \\`lang=\"${lang}\"\\` but NumberField formats as ` +\n        `\\`${formatter.locale}\\` (the runtime's locale); pass \\`locale\\`.`,\n    );\n  }, [locale, formatter]);\n\n  // An unmount mid-hold leaves nothing behind (the buttons detach their own listeners).\n  useEffect(\n    () => () => {\n      holdRef.current = null;\n    },\n    [],\n  );\n\n  // --- Render ---------------------------------------------------------------------------------\n\n  const context = useMemo<NumberFieldContextValue>(\n    () => ({\n      state,\n      bounds,\n      stepBase,\n      pendingSource: pending ? pendingSource : null,\n      inputId,\n      labelId,\n      name,\n      form,\n      allowsFractions: formatter.allowsFractions || !Number.isInteger(stepSize),\n      stepOnWheel,\n      resetTargetText,\n      fieldInvalid,\n      visibleRef,\n      hiddenRef,\n      typed,\n      commitDraft,\n      keyDown,\n      wheel,\n      beginHold,\n      tickHold,\n      endHold,\n      activate,\n      mirror,\n      registerLabel,\n      onInputMounted: onItemMounted,\n    }),\n    [\n      state,\n      bounds,\n      stepBase,\n      pending,\n      pendingSource,\n      inputId,\n      labelId,\n      name,\n      form,\n      formatter,\n      stepSize,\n      stepOnWheel,\n      resetTargetText,\n      fieldInvalid,\n      typed,\n      commitDraft,\n      keyDown,\n      wheel,\n      beginHold,\n      tickHold,\n      endHold,\n      activate,\n      mirror,\n      registerLabel,\n      onItemMounted,\n    ],\n  );\n\n  const labelledBy = mergeTokenLists(labelCount > 0 ? labelId : undefined, fieldContext?.ids.label);\n  const libraryProps: Partial<ComponentPropsWithRef<\"div\">> & DataAttributes = {\n    role: \"group\",\n    ...(labelledBy !== \"\" ? { \"aria-labelledby\": labelledBy } : {}),\n    ...(fieldContext !== null ? { \"data-invalid\": dataAttr(fieldInvalid === true) } : {}),\n    \"data-pending\": dataAttr(pending),\n    \"data-disabled\": dataAttr(disabled),\n  };\n\n  const element = useRender<ComponentPropsWithRef<\"div\">, NumberFieldState>({\n    defaultElement: \"div\",\n    render,\n    state,\n    className,\n    style,\n    children,\n    props: rest,\n    libraryProps,\n  });\n\n  return <NumberFieldContext value={context}>{element}</NumberFieldContext>;\n}\n\nNumberFieldRoot.displayName = \"NumberFieldRoot\";\n"],"mappings":"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"}