solid-baseui 0.1.0-alpha.0

package/dist/lib/server/number-field/index.js

@@ -0,0 +1,1497 @@
+import { t as __exportAll } from "../rolldown-runtime-D7D4PA-g.js";
+import { getStateAttributesProps } from "../internals/getStateAttributesProps.js";
+import { D as scrub, P as wheel, _ as inputPaste, b as keyboard, f as incrementPress, g as inputClear, h as inputChange, m as inputBlur, o as decrementPress } from "../internals/reasons.js";
+import { n as resolveClass, t as resolveStyle } from "../resolveStyle-XCSFDHAL.js";
+import { createChangeEventDetails, createGenericEventDetails } from "../internals/createBaseUIEventDetails.js";
+import { composeEventHandlers } from "../internals/composeEventHandlers.js";
+import { fieldValidityMapping } from "../internals/field-constants.js";
+import { n as useFieldRootContext } from "../FieldRootContext-IC-LWzVp.js";
+import { n as useFormContext } from "../FormContext-pvESt85v.js";
+import { r as useLabelableContext } from "../LabelableContext-DZP3rgAY.js";
+import { mergeStyles } from "../internals/mergeStyles.js";
+import { Dynamic, Portal, escape, memo, mergeProps, ssr, ssrAttribute, ssrGroup, ssrHydrationKey, ssrStyle } from "@solidjs/web";
+import { Show, createContext, createEffect, createMemo, createSignal, createUniqueId, flush, omit, onCleanup, onSettled, untrack, useContext } from "solid-js";
+//#region src/number-field/utils/parse.ts
+var HAN_NUMERALS = "零〇一二三四五六七八九";
+var NON_ASCII_DIGIT_RE = /[٠-٩۰-۹０-９]/g;
+var HAN_RE = /[零〇一二三四五六七八九]/g;
+var PERCENTAGES = [
+	"%",
+	"٪",
+	"％",
+	"﹪"
+];
+var PERMILLE = ["‰", "؉"];
+var PERCENT_RE = /[%٪％﹪]/;
+var PERMILLE_RE = /[‰؉]/;
+var PERCENT_GLOBAL_RE = /[%٪％﹪]/g;
+var PERMILLE_GLOBAL_RE = /[‰؉]/g;
+var ARABIC_PERSIAN_DETECT_RE = /[٠-٩۰-۹]/;
+var HAN_DETECT_RE = /[零〇一二三四五六七八九]/;
+var ANY_NUMERAL_DETECT_RE = /[0-9٠-٩۰-۹０-９零〇一二三四五六七八九]/;
+function isNumeralChar(char) {
+	return ANY_NUMERAL_DETECT_RE.test(char);
+}
+var BASE_NON_NUMERIC_SYMBOLS = [
+	".",
+	",",
+	"．",
+	"，",
+	"٫",
+	"٬"
+];
+var SPACE_SEPARATOR_RE = /\p{Zs}/u;
+var FORMAT_CONTROL_DETECT_RE = /\p{Cf}/u;
+var FORMAT_CONTROL_GLOBAL_RE = /\p{Cf}/gu;
+var PLUS_SIGNS_WITH_ASCII = [
+	"+",
+	"＋",
+	"﹢"
+];
+var MINUS_SIGNS_WITH_ASCII = [
+	"-",
+	"−",
+	"－",
+	"‒",
+	"–",
+	"—",
+	"﹣"
+];
+var escapeRegExp = (value) => value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+function getFormatter$1(locale, options) {
+	return new Intl.NumberFormat(locale, options);
+}
+function shiftDecimal(value, exponentDelta) {
+	const [coefficient, exponent = "0"] = String(value).split("e");
+	return Number(`${coefficient}e${Number(exponent) + exponentDelta}`);
+}
+var ANY_MINUS_RE = /[-−－‒–—﹣]/gu;
+var ANY_PLUS_RE = /[+＋﹢]/gu;
+var ANY_MINUS_DETECT_RE = /[-−－‒–—﹣]/;
+var ANY_PLUS_DETECT_RE = /[+＋﹢]/;
+var SAMPLE_FORMAT_NUMBER = 11111.1;
+function getFormatParts(locale, options) {
+	return getFormatter$1(locale, options).formatToParts(SAMPLE_FORMAT_NUMBER);
+}
+function getNumberLocaleDetails(locale, options) {
+	const parts = getFormatParts(locale, options);
+	const result = {};
+	parts.forEach((part) => {
+		result[part.type] = part.value;
+	});
+	let decimal = ".";
+	getFormatter$1(locale).formatToParts(.1).forEach((part) => {
+		if (part.type === "decimal") decimal = part.value;
+	});
+	return {
+		...result,
+		decimal
+	};
+}
+function parseNumber(formattedNumber, locale, options) {
+	let input = formattedNumber.replace(FORMAT_CONTROL_GLOBAL_RE, "").trim();
+	input = input.replace(ANY_MINUS_RE, "-").replace(ANY_PLUS_RE, "+");
+	let isNegative = false;
+	const takeSign = (_match, sign) => {
+		if (sign === "-") isNegative = true;
+		return "";
+	};
+	input = input.replace(/([+-])\s*$/, takeSign).replace(/^\s*([+-])/, takeSign);
+	let computedLocale = locale;
+	if (computedLocale === void 0) {
+		if (ARABIC_PERSIAN_DETECT_RE.test(input)) computedLocale = "ar";
+		else if (HAN_DETECT_RE.test(input)) computedLocale = "zh";
+	}
+	const { group, decimal, currency, exponentSeparator } = getNumberLocaleDetails(computedLocale, options);
+	const unitParts = getFormatter$1(computedLocale, options).formatToParts(1).filter((part) => part.type === "unit").map((part) => escapeRegExp(part.value));
+	const unitRegex = unitParts.length ? new RegExp(unitParts.join("|"), "g") : null;
+	let groupRegex = null;
+	if (group) {
+		const isSpaceGroup = /\p{Zs}/u.test(group);
+		const isApostropheGroup = group === "'" || group === "’";
+		if (isSpaceGroup) groupRegex = /\p{Zs}/gu;
+		else if (isApostropheGroup) groupRegex = /['’]/g;
+		else groupRegex = new RegExp(escapeRegExp(group), "g");
+	}
+	let unformatted = [
+		[groupRegex, ""],
+		[new RegExp(escapeRegExp(decimal), "g"), "."],
+		[/[．٫]/g, "."],
+		[/[，٬]/g, ""],
+		[currency ? new RegExp(escapeRegExp(currency), "g") : null, ""],
+		[unitRegex, ""],
+		[PERCENT_GLOBAL_RE, ""],
+		[PERMILLE_GLOBAL_RE, ""],
+		[exponentSeparator ? new RegExp(escapeRegExp(exponentSeparator), "g") : null, "e"],
+		[NON_ASCII_DIGIT_RE, (char) => String(char.charCodeAt(0) % 16)],
+		[HAN_RE, (char) => String(Math.max(HAN_NUMERALS.indexOf(char) - 1, 0))]
+	].reduce((accumulator, [regex, replacement]) => {
+		if (!regex) return accumulator;
+		return typeof replacement === "string" ? accumulator.replace(regex, replacement) : accumulator.replace(regex, replacement);
+	}, input);
+	const lastDot = unformatted.lastIndexOf(".");
+	if (lastDot !== -1) unformatted = `${unformatted.slice(0, lastDot).replace(/\./g, "")}.${unformatted.slice(lastDot + 1).replace(/\./g, "")}`;
+	if (/^[-+]?Infinity$/i.test(input) || input.includes("∞")) return null;
+	const parseTarget = (isNegative ? "-" : "") + unformatted;
+	let number = parseFloat(parseTarget);
+	const style = options?.style;
+	const isUnitPercent = style === "unit" && options?.unit === "percent";
+	const hasPercentSymbol = PERCENT_RE.test(formattedNumber) || style === "percent";
+	if (PERMILLE_RE.test(formattedNumber)) number = shiftDecimal(number, -3);
+	else if (!isUnitPercent && hasPercentSymbol) number = shiftDecimal(number, -2);
+	return Number.isFinite(number) ? number : null;
+}
+//#endregion
+//#region src/number-field/utils/format.ts
+var formatterCache = /* @__PURE__ */ new Map();
+function stringifyLocale(locale) {
+	if (locale === void 0) return;
+	return Array.isArray(locale) ? locale.map((part) => part.toString()).join(",") : locale.toString();
+}
+function getFormatter(locale, options) {
+	const key = JSON.stringify({
+		locale: stringifyLocale(locale),
+		options
+	});
+	let formatter = formatterCache.get(key);
+	if (!formatter) {
+		formatter = new Intl.NumberFormat(locale, options);
+		formatterCache.set(key, formatter);
+	}
+	return formatter;
+}
+function formatNumber(value, locale, options) {
+	return value === null ? "" : getFormatter(locale, options).format(value);
+}
+//#endregion
+//#region src/number-field/utils/platform.ts
+function lowerPlatform() {
+	return typeof navigator === "undefined" ? "" : navigator.platform.toLowerCase();
+}
+function lowerUserAgent() {
+	return typeof navigator === "undefined" ? "" : navigator.userAgent.toLowerCase();
+}
+function isIOS() {
+	const platform = lowerPlatform();
+	const touchPoints = typeof navigator === "undefined" ? 0 : navigator.maxTouchPoints;
+	return /^i(os$|p)/.test(platform) || platform === "macintel" && touchPoints > 1;
+}
+function isWebKit() {
+	return typeof CSS !== "undefined" && Boolean(CSS.supports?.("-webkit-backdrop-filter:none"));
+}
+function isGecko() {
+	return !isWebKit() && lowerUserAgent().includes("firefox");
+}
+//#endregion
+//#region src/number-field/utils/stateAttributesMapping.ts
+var stateAttributesMapping = {
+	inputValue: () => null,
+	value: () => null,
+	...fieldValidityMapping
+};
+//#endregion
+//#region src/number-field/utils/validate.ts
+var STEP_EPSILON_FACTOR = 1e-10;
+var MAX_FLOATING_POINT_CLEANUP_DELTA = 1e-10;
+function hasNumberFormatRoundingOptions(format) {
+	return format?.maximumFractionDigits != null || format?.minimumFractionDigits != null || format?.maximumSignificantDigits != null || format?.minimumSignificantDigits != null || format?.roundingIncrement != null || format?.roundingMode != null || format?.roundingPriority != null;
+}
+function removeFloatingPointErrors(value, format) {
+	if (!Number.isFinite(value)) return value;
+	if (!hasNumberFormatRoundingOptions(format)) {
+		const roundedValue = parseFloat(value.toPrecision(15));
+		return Math.abs(roundedValue - value) <= Math.min(Number.EPSILON * Math.max(1, Math.abs(value)), MAX_FLOATING_POINT_CLEANUP_DELTA) ? roundedValue : value;
+	}
+	const formatter = new Intl.NumberFormat("en-US", {
+		...format,
+		signDisplay: "auto",
+		currencySign: "standard",
+		notation: format.notation === "compact" ? "standard" : format.notation,
+		useGrouping: false
+	});
+	const roundedText = formatter.format(value);
+	const roundedValue = parseNumber(roundedText, "en-US", format);
+	if (roundedValue === null) return value;
+	return formatter.format(roundedValue) === roundedText ? roundedValue : value;
+}
+function snapToStep(value, base, step, nearest) {
+	const stepSize = Math.abs(step);
+	const direction = Math.sign(step);
+	const tolerance = stepSize * STEP_EPSILON_FACTOR * direction;
+	const rawSteps = value - base + tolerance;
+	if (nearest) return base + Math.round(rawSteps / step) * step;
+	return base + (direction > 0 ? Math.floor(rawSteps / stepSize) : Math.ceil(rawSteps / stepSize)) * stepSize;
+}
+function clamp(value, min, max) {
+	return Math.max(min, Math.min(value, max));
+}
+function toValidatedNumber(value, step, minWithDefault, maxWithDefault, minWithZeroDefault, format, snapOnStep, small, shouldClamp) {
+	if (value === null) return value;
+	let nextValue = value;
+	if (step != null && snapOnStep && step !== 0) {
+		const base = small || minWithDefault === Number.MIN_SAFE_INTEGER ? minWithZeroDefault : minWithDefault;
+		nextValue = snapToStep(nextValue, base, step, small);
+	}
+	if (shouldClamp) nextValue = clamp(nextValue, minWithDefault, maxWithDefault);
+	if (step == null && !hasNumberFormatRoundingOptions(format)) return nextValue;
+	const roundedValue = removeFloatingPointErrors(nextValue, format);
+	return shouldClamp ? clamp(roundedValue, minWithDefault, maxWithDefault) : roundedValue;
+}
+//#endregion
+//#region src/number-field/root/NumberFieldRootContext.ts
+var MISSING_CONTEXT$1 = Symbol("NumberFieldRootContext");
+var NumberFieldRootContext = createContext(MISSING_CONTEXT$1);
+function useNumberFieldRootContext() {
+	const context = useContext(NumberFieldRootContext);
+	if (context === MISSING_CONTEXT$1) throw new Error("Base UI: NumberFieldRootContext is missing. NumberField parts must be placed within <NumberField.Root>.");
+	return context;
+}
+//#endregion
+//#region src/number-field/root/NumberFieldRoot.tsx
+var _tmpl$ = [
+	"<input",
+	" type=\"number\"",
+	"",
+	"",
+	"",
+	"",
+	"",
+	"",
+	"",
+	"",
+	" aria-hidden=\"true\" tabindex=\"-1\" style=\"",
+	"\">"
+];
+var HIDDEN_INPUT_STYLE = {
+	"clip-path": "inset(50%)",
+	overflow: "hidden",
+	"white-space": "nowrap",
+	border: "0",
+	padding: "0",
+	width: "1px",
+	height: "1px",
+	margin: "-1px",
+	position: "fixed",
+	top: "0",
+	left: "0"
+};
+var HIDDEN_NAMED_INPUT_STYLE = {
+	...HIDDEN_INPUT_STYLE,
+	position: "absolute"
+};
+/** Groups all parts of the number field and manages its numeric state. */
+function NumberFieldRoot(props) {
+	var _v$, _g$2, _g$, _v$4;
+	const field = useFieldRootContext(true);
+	useFormContext();
+	const labelable = useLabelableContext();
+	const internalProps = props;
+	const allProps = props;
+	const controlSource = Symbol("NumberField");
+	const inheritedId = untrack(labelable.controlId);
+	const fallbackId = typeof inheritedId === "string" ? inheritedId : `base-ui-${createUniqueId()}`;
+	const controlled = untrack(() => internalProps.value !== void 0);
+	const [uncontrolledValue, setUncontrolledValue] = createSignal(() => untrack(() => internalProps.defaultValue ?? null));
+	const [inputElement, setInputElementSignal] = createSignal();
+	const [hiddenInputElement, setHiddenInputElement] = createSignal();
+	const [isScrubbing, setIsScrubbingSignal] = createSignal(false);
+	const [inputMode, setInputMode] = createSignal("numeric");
+	let allowInputSync = true;
+	let lastChangedValue = null;
+	let hasPendingCommit = false;
+	const others = omit(allProps, "allowOutOfRange", "allowWheelScrub", "as", "class", "defaultValue", "disabled", "form", "format", "id", "inputRef", "largeStep", "locale", "max", "min", "name", "onChange", "onValueChange", "onValueCommitted", "readOnly", "ref", "required", "smallStep", "snapOnStep", "step", "style", "value");
+	const value = createMemo(() => controlled ? internalProps.value ?? null : uncontrolledValue());
+	const id = createMemo(() => internalProps.id ?? fallbackId);
+	const min = createMemo(() => internalProps.min);
+	const max = createMemo(() => internalProps.max);
+	const minWithDefault = createMemo(() => min() ?? Number.MIN_SAFE_INTEGER);
+	const maxWithDefault = createMemo(() => max() ?? Number.MAX_SAFE_INTEGER);
+	const disabled = createMemo(() => field.disabled() || (internalProps.disabled ?? false));
+	const readOnly = createMemo(() => internalProps.readOnly ?? false);
+	const required = createMemo(() => internalProps.required ?? false);
+	const nameProp = createMemo(() => internalProps.name);
+	const name = createMemo(() => field.name() ?? nameProp());
+	const locale = createMemo(() => internalProps.locale);
+	const formatOptions = createMemo(() => internalProps.format);
+	const [inputValue, setInputValueSignal] = createSignal(() => formatNumber(untrack(value), untrack(locale), untrack(formatOptions)));
+	const state = createMemo(() => ({
+		...field.state(),
+		disabled: disabled(),
+		readOnly: readOnly(),
+		required: required(),
+		value: value(),
+		inputValue: inputValue(),
+		scrubbing: isScrubbing()
+	}));
+	const classValue = createMemo(() => resolveClass(props.class, state()));
+	const styleValue = createMemo(() => resolveStyle(props.style, state()));
+	const stateAttributes = createMemo(() => getStateAttributesProps(state(), stateAttributesMapping));
+	function setInputValue(nextValue) {
+		setInputValueSignal(nextValue);
+	}
+	function getAllowedNonNumericKeys() {
+		const format = formatOptions();
+		const parts = getFormatParts(locale(), format);
+		const keys = new Set(BASE_NON_NUMERIC_SYMBOLS);
+		const addAll = (characters) => {
+			for (const character of characters) keys.add(character);
+		};
+		const decimal = parts.find((part) => part.type === "decimal")?.value ?? getNumberLocaleDetails(locale(), format).decimal;
+		keys.add(decimal);
+		for (const part of parts) {
+			if (part.type === "integer" || part.type === "fraction" || part.type === "exponentInteger" || part.type === "compact") continue;
+			addAll(Array.from(part.value));
+			if (SPACE_SEPARATOR_RE.test(part.value)) keys.add(" ");
+		}
+		const style = format?.style;
+		if (style === "percent" || style === "unit" && format?.unit === "percent") addAll(PERCENTAGES);
+		if (style === "percent" || style === "unit" && format?.unit === "permille") addAll(PERMILLE);
+		addAll(PLUS_SIGNS_WITH_ASCII);
+		if (minWithDefault() < 0 || (internalProps.allowOutOfRange ?? false)) addAll(MINUS_SIGNS_WITH_ASCII);
+		return keys;
+	}
+	function getStepAmount(event) {
+		if (event?.altKey) return internalProps.smallStep ?? .1;
+		if (event?.shiftKey) return internalProps.largeStep ?? 10;
+		const step = internalProps.step ?? 1;
+		return step === "any" ? 1 : step;
+	}
+	function setValue(unvalidatedValue, details) {
+		const direction = details.direction;
+		const eventState = details.event;
+		const directInput = details.reason.startsWith("input-") || details.reason === "none";
+		const validatedValue = toValidatedNumber(unvalidatedValue, direction ? getStepAmount(eventState) * direction : void 0, minWithDefault(), maxWithDefault(), min() ?? 0, formatOptions(), internalProps.snapOnStep ?? false, eventState.altKey ?? false, !(internalProps.allowOutOfRange && directInput));
+		const shouldFireChange = validatedValue !== value() || directInput && (unvalidatedValue !== value() || !allowInputSync);
+		if (shouldFireChange) {
+			internalProps.onValueChange?.(validatedValue, details);
+			if (details.isCanceled) return false;
+			if (!controlled) setUncontrolledValue(validatedValue);
+			field.setDirty(validatedValue !== field.validityData().initialValue);
+			hasPendingCommit = true;
+		}
+		lastChangedValue = validatedValue;
+		if (allowInputSync) setInputValue(formatNumber(validatedValue, locale(), formatOptions()));
+		return shouldFireChange;
+	}
+	function incrementValue(amount, { direction, currentValue, event, reason }) {
+		const previousValue = currentValue == null ? value() : currentValue;
+		const nativeEvent = event;
+		if (typeof previousValue !== "number") return setValue(0, createChangeEventDetails(reason, nativeEvent));
+		return setValue(previousValue + amount * direction, createChangeEventDetails(reason, nativeEvent, void 0, { direction }));
+	}
+	function onValueCommitted(nextValue, details) {
+		hasPendingCommit = false;
+		internalProps.onValueCommitted?.(nextValue, details);
+	}
+	function handleWheel(event) {
+		const input = inputElement();
+		if (event.ctrlKey || !input || input.ownerDocument.activeElement !== input) return;
+		event.preventDefault();
+		allowInputSync = true;
+		if (incrementValue(getStepAmount(event), {
+			direction: event.deltaY > 0 ? -1 : 1,
+			event,
+			reason: "wheel"
+		})) onValueCommitted(lastChangedValue, createGenericEventDetails(wheel, event));
+	}
+	createEffect(() => value(), (currentValue) => {
+		field.setFilled(currentValue !== null);
+	});
+	createEffect(() => ({
+		currentValue: inputValue(),
+		formattedValue: formatNumber(value(), locale(), formatOptions())
+	}), (current) => {
+		if (allowInputSync && current.formattedValue !== current.currentValue) setInputValue(current.formattedValue);
+	});
+	createEffect(() => minWithDefault(), (minimum) => {
+		if (isIOS()) setInputMode(minimum >= 0 ? "decimal" : "text");
+	});
+	createEffect(() => ({
+		allowWheelScrub: internalProps.allowWheelScrub ?? false,
+		disabled: disabled(),
+		input: inputElement(),
+		readOnly: readOnly()
+	}), (current) => {
+		if (!current.allowWheelScrub || current.disabled || current.readOnly || !current.input) return;
+		const input = current.input;
+		input.addEventListener("wheel", handleWheel, { passive: false });
+		return () => input.removeEventListener("wheel", handleWheel);
+	});
+	createEffect(() => ({
+		disabled: disabled(),
+		hidden: hiddenInputElement()
+	}), (current) => {
+		if (!current.hidden || current.disabled) return;
+		return field.validation.registerInput(controlSource, current.hidden, () => untrack(() => inputElement() ?? null));
+	});
+	return NumberFieldRootContext({
+		value: {
+			controlSource,
+			minWithDefault,
+			maxWithDefault,
+			id,
+			setValue,
+			getStepAmount,
+			incrementValue,
+			inputElement,
+			setInputElement: (element) => setInputElementSignal(element),
+			allowInputSync: () => allowInputSync,
+			setAllowInputSync: (nextValue) => {
+				allowInputSync = nextValue;
+			},
+			formatOptions,
+			value,
+			lastChangedValue: () => lastChangedValue,
+			setLastChangedValue: (nextValue) => {
+				lastChangedValue = nextValue;
+			},
+			hasPendingCommit: () => hasPendingCommit,
+			setHasPendingCommit: (nextValue) => {
+				hasPendingCommit = nextValue;
+			},
+			name,
+			nameProp,
+			inputMode,
+			getAllowedNonNumericKeys,
+			min,
+			max,
+			inputValue,
+			setInputValue,
+			locale,
+			setIsScrubbing: (nextValue) => setIsScrubbingSignal(nextValue),
+			state,
+			onValueCommitted
+		},
+		get children() {
+			return [Dynamic(mergeProps({
+				get component() {
+					return props.as ?? "div";
+				},
+				ref: [internalProps.ref],
+				get ["class"]() {
+					return classValue();
+				},
+				get style() {
+					return styleValue();
+				}
+			}, stateAttributes, others)), (_v$ = ssrHydrationKey(), internalProps.inputRef, _g$2 = ssrGroup(() => {
+				return [ssrAttribute("form", escape(internalProps.form, true)), ssrAttribute("name", escape(name(), true))];
+			}, 2), _g$ = ssrGroup(() => {
+				return [
+					ssrAttribute("min", escape(min(), true)),
+					ssrAttribute("max", escape(max(), true)),
+					ssrAttribute("step", escape(internalProps.step ?? 1, true)),
+					ssrAttribute("disabled", escape(disabled(), true)),
+					ssrAttribute("readonly", escape(readOnly(), true)),
+					ssrAttribute("required", escape(required(), true)),
+					ssrStyle(name() ? HIDDEN_NAMED_INPUT_STYLE : HIDDEN_INPUT_STYLE)
+				];
+			}, 7), _v$4 = () => {
+				return ssrAttribute("value", escape(value() ?? "", true));
+			}, ssr(_tmpl$, _v$, _g$2, _g$2, _v$4, _g$, _g$, _g$, _g$, _g$, _g$, _g$))];
+		}
+	});
+}
+//#endregion
+//#region src/number-field/group/NumberFieldGroup.tsx
+/** Groups the input with the increment and decrement buttons. */
+function NumberFieldGroup(props) {
+	const context = useNumberFieldRootContext();
+	const others = omit(props, "as", "class", "style");
+	const state = context.state;
+	const classValue = createMemo(() => resolveClass(props.class, state()));
+	const styleValue = createMemo(() => resolveStyle(props.style, state()));
+	const stateAttributes = createMemo(() => getStateAttributesProps(state(), stateAttributesMapping));
+	return Dynamic(mergeProps({
+		get component() {
+			return props.as ?? "div";
+		},
+		get ["class"]() {
+			return classValue();
+		},
+		get style() {
+			return styleValue();
+		},
+		role: "group"
+	}, stateAttributes, others));
+}
+//#endregion
+//#region src/number-field/root/createPressAndHold.ts
+var TICK_DELAY = 60;
+var START_DELAY = 400;
+var SCROLL_DISTANCE = 8;
+var TOUCH_TIMEOUT = 50;
+var MAX_POINTER_MOVES_AFTER_TOUCH = 3;
+function isTouchLikePointerType(pointerType) {
+	return pointerType === "touch" || pointerType === "pen";
+}
+/** Adds Base UI's number-stepper press-and-hold behavior to an element. */
+function createPressAndHold(params) {
+	let isPressed = false;
+	let movesAfterTouch = 0;
+	let downX = 0;
+	let downY = 0;
+	let isTouchingButton = false;
+	let ignoreClick = false;
+	let pointerType = "";
+	let startTimeout;
+	let startTimeoutWindow;
+	let tickInterval;
+	let tickIntervalWindow;
+	let intentionalTouchTimeout;
+	let intentionalTouchTimeoutWindow;
+	let unsubscribeFromGlobalContextMenu = () => void 0;
+	let unsubscribeFromGlobalPointerUp = () => void 0;
+	function stopAutoChange() {
+		if (intentionalTouchTimeout !== void 0) {
+			intentionalTouchTimeoutWindow?.clearTimeout(intentionalTouchTimeout);
+			intentionalTouchTimeout = void 0;
+			intentionalTouchTimeoutWindow = void 0;
+		}
+		if (startTimeout !== void 0) {
+			startTimeoutWindow?.clearTimeout(startTimeout);
+			startTimeout = void 0;
+			startTimeoutWindow = void 0;
+		}
+		if (tickInterval !== void 0) {
+			tickIntervalWindow?.clearInterval(tickInterval);
+			tickInterval = void 0;
+			tickIntervalWindow = void 0;
+		}
+		unsubscribeFromGlobalContextMenu();
+		unsubscribeFromGlobalContextMenu = () => void 0;
+		movesAfterTouch = 0;
+	}
+	function startAutoChange(triggerEvent) {
+		stopAutoChange();
+		const element = params.element();
+		const ownerWindow = element?.ownerDocument.defaultView;
+		if (!element || !ownerWindow) return;
+		function handleContextMenu(event) {
+			event.preventDefault();
+		}
+		ownerWindow.addEventListener("contextmenu", handleContextMenu);
+		unsubscribeFromGlobalContextMenu = () => {
+			ownerWindow.removeEventListener("contextmenu", handleContextMenu);
+		};
+		unsubscribeFromGlobalPointerUp();
+		const pointerUpOptions = { once: true };
+		function handlePointerUp(event) {
+			isPressed = false;
+			stopAutoChange();
+			params.onStop()?.(event);
+		}
+		ownerWindow.addEventListener("pointerup", handlePointerUp, pointerUpOptions);
+		unsubscribeFromGlobalPointerUp = () => {
+			ownerWindow.removeEventListener("pointerup", handlePointerUp, pointerUpOptions);
+		};
+		if (!params.tick()(triggerEvent)) {
+			stopAutoChange();
+			return;
+		}
+		startTimeoutWindow = ownerWindow;
+		startTimeout = ownerWindow.setTimeout(() => {
+			startTimeout = void 0;
+			startTimeoutWindow = void 0;
+			tickIntervalWindow = ownerWindow;
+			tickInterval = ownerWindow.setInterval(() => {
+				if (!params.tick()(triggerEvent)) stopAutoChange();
+			}, TICK_DELAY);
+		}, START_DELAY);
+	}
+	const pointerHandlers = {
+		onTouchStart() {
+			isTouchingButton = true;
+		},
+		onTouchEnd() {
+			isTouchingButton = false;
+		},
+		onPointerDown(event) {
+			if (event.defaultPrevented || event.button || params.disabled()) return;
+			pointerType = event.pointerType;
+			ignoreClick = false;
+			isPressed = true;
+			downX = event.clientX;
+			downY = event.clientY;
+			if (!isTouchLikePointerType(event.pointerType)) {
+				event.preventDefault();
+				startAutoChange(event);
+				return;
+			}
+			const ownerWindow = event.currentTarget?.ownerDocument.defaultView ?? params.element()?.ownerDocument.defaultView;
+			if (!ownerWindow) return;
+			if (intentionalTouchTimeout !== void 0) intentionalTouchTimeoutWindow?.clearTimeout(intentionalTouchTimeout);
+			intentionalTouchTimeoutWindow = ownerWindow;
+			intentionalTouchTimeout = ownerWindow.setTimeout(() => {
+				intentionalTouchTimeout = void 0;
+				intentionalTouchTimeoutWindow = void 0;
+				const moves = movesAfterTouch;
+				movesAfterTouch = 0;
+				if (isPressed && moves < MAX_POINTER_MOVES_AFTER_TOUCH) {
+					startAutoChange(event);
+					ignoreClick = true;
+				} else {
+					ignoreClick = false;
+					stopAutoChange();
+				}
+			}, TOUCH_TIMEOUT);
+		},
+		onPointerUp(event) {
+			if (isTouchLikePointerType(event.pointerType)) isPressed = false;
+		},
+		onPointerMove(event) {
+			if (params.disabled() || !isTouchLikePointerType(event.pointerType) || !isPressed) return;
+			movesAfterTouch += 1;
+			const dx = downX - event.clientX;
+			const dy = downY - event.clientY;
+			if (dx ** 2 + dy ** 2 > SCROLL_DISTANCE ** 2) stopAutoChange();
+		},
+		onMouseEnter(event) {
+			if (event.defaultPrevented || params.disabled() || !isPressed || isTouchingButton || isTouchLikePointerType(pointerType)) return;
+			startAutoChange(event);
+		},
+		onMouseLeave() {
+			if (!isTouchingButton) stopAutoChange();
+		},
+		onMouseUp() {
+			if (!isTouchingButton) stopAutoChange();
+		}
+	};
+	function shouldSkipClick(event) {
+		if (event.defaultPrevented) return true;
+		if (isTouchLikePointerType(pointerType)) return ignoreClick;
+		return event.detail !== 0;
+	}
+	onCleanup(() => {
+		stopAutoChange();
+		unsubscribeFromGlobalPointerUp();
+	});
+	return {
+		pointerHandlers,
+		shouldSkipClick
+	};
+}
+//#endregion
+//#region src/number-field/increment/NumberFieldStepperButton.tsx
+var SELECT_NONE_STYLE = {
+	"-webkit-user-select": "none",
+	"user-select": "none"
+};
+function NumberFieldStepperButton(props, isIncrement) {
+	const context = useNumberFieldRootContext();
+	const internalProps = props;
+	const allProps = props;
+	let firstTickCurrentValue = null;
+	let hasFirstTickCurrentValue = false;
+	const others = omit(allProps, "as", "class", "disabled", "nativeButton", "onClick", "onKeyDown", "onKeyUp", "onMouseDown", "onMouseEnter", "onMouseLeave", "onMouseUp", "onPointerDown", "onPointerMove", "onPointerUp", "onTouchEnd", "onTouchStart", "ref", "style");
+	const state = context.state;
+	const nativeButton = createMemo(() => internalProps.nativeButton ?? true);
+	const disabled = createMemo(() => {
+		const currentState = state();
+		const atBoundary = currentState.value !== null && (isIncrement ? currentState.value >= context.maxWithDefault() : currentState.value <= context.minWithDefault());
+		return (internalProps.disabled ?? false) || currentState.disabled || atBoundary;
+	});
+	const buttonDisabled = createMemo(() => disabled() || state().readOnly);
+	const buttonState = createMemo(() => ({
+		...state(),
+		disabled: disabled()
+	}));
+	const classValue = createMemo(() => resolveClass(props.class, buttonState()));
+	const styleValue = createMemo(() => {
+		const external = resolveStyle(props.style, buttonState());
+		if (typeof external === "string") return `-webkit-user-select:none;user-select:none;${external}`;
+		return mergeStyles(SELECT_NONE_STYLE, external === false ? void 0 : external) ?? SELECT_NONE_STYLE;
+	});
+	const stateAttributes = createMemo(() => getStateAttributesProps(buttonState(), stateAttributesMapping));
+	const pressReason = isIncrement ? incrementPress : decrementPress;
+	function commitInputValue(event) {
+		const shouldCommitInputValue = !context.allowInputSync();
+		context.setAllowInputSync(true);
+		if (!shouldCommitInputValue) {
+			const currentValue = context.value();
+			context.setLastChangedValue(currentValue);
+			return currentValue;
+		}
+		const parsedValue = parseNumber(context.inputValue(), context.locale(), context.formatOptions());
+		if (parsedValue !== null) {
+			const details = createChangeEventDetails(pressReason, event);
+			context.setValue(parsedValue, details);
+			if (!details.isCanceled) return parsedValue;
+		}
+		return context.value();
+	}
+	function tick(triggerEvent) {
+		const currentValue = hasFirstTickCurrentValue ? firstTickCurrentValue : void 0;
+		hasFirstTickCurrentValue = false;
+		return context.incrementValue(context.getStepAmount(triggerEvent), {
+			direction: isIncrement ? 1 : -1,
+			currentValue,
+			event: triggerEvent,
+			reason: pressReason
+		});
+	}
+	function handleStop(event) {
+		const committed = context.lastChangedValue() ?? context.value();
+		context.onValueCommitted(committed, createGenericEventDetails(pressReason, event));
+	}
+	const pressAndHold = createPressAndHold({
+		disabled: buttonDisabled,
+		element: context.inputElement,
+		tick: () => tick,
+		onStop: () => handleStop
+	});
+	function handleClick(event) {
+		if (event.defaultPrevented || buttonDisabled() || pressAndHold.shouldSkipClick(event)) return;
+		const previousValue = commitInputValue(event);
+		context.incrementValue(context.getStepAmount(event), {
+			direction: isIncrement ? 1 : -1,
+			currentValue: previousValue,
+			event,
+			reason: pressReason
+		});
+		const committed = context.lastChangedValue() ?? context.value();
+		if (committed !== previousValue) context.onValueCommitted(committed, createGenericEventDetails(pressReason, event));
+	}
+	function handlePointerDown(event) {
+		if (event.defaultPrevented || state().readOnly || event.button || disabled()) return;
+		firstTickCurrentValue = commitInputValue(event);
+		hasFirstTickCurrentValue = true;
+		context.setLastChangedValue(null);
+		if (!isTouchLikePointerType(event.pointerType)) context.inputElement()?.focus();
+		pressAndHold.pointerHandlers.onPointerDown(event);
+	}
+	const onClick = composeEventHandlers(() => untrack(buttonDisabled) ? preventInteraction : void 0, () => internalProps.onClick, () => handleClick);
+	const onPointerDown = composeEventHandlers(() => untrack(buttonDisabled) ? preventInteraction : void 0, () => internalProps.onPointerDown, () => handlePointerDown);
+	const onMouseDown = composeEventHandlers(() => untrack(buttonDisabled) ? stopInteraction : void 0, () => internalProps.onMouseDown);
+	const onKeyDown = composeEventHandlers(() => untrack(buttonDisabled) ? preventFocusableDisabledKeyDown : void 0, () => internalProps.onKeyDown, () => untrack(nativeButton) ? void 0 : handleNonNativeKeyDown);
+	const onKeyUp = composeEventHandlers(() => untrack(buttonDisabled) ? stopInteraction : void 0, () => internalProps.onKeyUp, () => untrack(nativeButton) ? void 0 : handleNonNativeKeyUp);
+	const onPointerUp = composeEventHandlers(() => internalProps.onPointerUp, () => pressAndHold.pointerHandlers.onPointerUp);
+	const onPointerMove = composeEventHandlers(() => internalProps.onPointerMove, () => pressAndHold.pointerHandlers.onPointerMove);
+	const onTouchStart = composeEventHandlers(() => internalProps.onTouchStart, () => pressAndHold.pointerHandlers.onTouchStart);
+	const onTouchEnd = composeEventHandlers(() => internalProps.onTouchEnd, () => pressAndHold.pointerHandlers.onTouchEnd);
+	const onMouseEnter = composeEventHandlers(() => internalProps.onMouseEnter, () => pressAndHold.pointerHandlers.onMouseEnter);
+	const onMouseLeave = composeEventHandlers(() => internalProps.onMouseLeave, () => pressAndHold.pointerHandlers.onMouseLeave);
+	const onMouseUp = composeEventHandlers(() => internalProps.onMouseUp, () => pressAndHold.pointerHandlers.onMouseUp);
+	onSettled(() => {});
+	return Dynamic(mergeProps({
+		get component() {
+			return props.as ?? "button";
+		},
+		ref: [((value) => value), internalProps.ref],
+		get ["class"]() {
+			return classValue();
+		},
+		get style() {
+			return styleValue();
+		},
+		get type() {
+			return nativeButton() ? "button" : void 0;
+		},
+		get role() {
+			return nativeButton() ? void 0 : "button";
+		},
+		tabIndex: -1,
+		get disabled() {
+			return nativeButton() && disabled() ? true : void 0;
+		},
+		get ["aria-disabled"]() {
+			return memo(() => {
+				return !!buttonDisabled();
+			})() ? "true" : nativeButton() ? "false" : void 0;
+		},
+		"aria-label": isIncrement ? "Increase" : "Decrease",
+		get ["aria-controls"]() {
+			return context.id();
+		},
+		onClick,
+		onMouseDown,
+		onKeyDown,
+		onKeyUp,
+		onPointerDown,
+		onPointerUp,
+		onPointerMove,
+		onTouchStart,
+		onTouchEnd,
+		onMouseEnter,
+		onMouseLeave,
+		onMouseUp
+	}, stateAttributes, others));
+}
+function preventInteraction(event) {
+	event.preventDefault();
+	event.preventBaseUIHandler();
+}
+function stopInteraction(event) {
+	event.preventBaseUIHandler();
+}
+function preventFocusableDisabledKeyDown(event) {
+	if (event.key !== "Tab") event.preventDefault();
+	event.preventBaseUIHandler();
+}
+function handleNonNativeKeyDown(event) {
+	if (event.target !== event.currentTarget) return;
+	const isLink = isValidLinkElement(event.currentTarget);
+	const isEnter = event.key === "Enter";
+	const isSpace = event.key === " ";
+	if (isLink || !isEnter && !isSpace) {
+		if (isLink && isSpace) event.preventDefault();
+		return;
+	}
+	if (event.defaultPrevented) return;
+	event.preventDefault();
+	if (isEnter) {
+		event.preventBaseUIHandler();
+		dispatchClickWithModifiers(event.currentTarget, event);
+	}
+}
+function handleNonNativeKeyUp(event) {
+	if (event.target === event.currentTarget && !event.defaultPrevented && event.key === " ") {
+		event.preventBaseUIHandler();
+		dispatchClickWithModifiers(event.currentTarget, event);
+	}
+}
+function isValidLinkElement(element) {
+	return element.tagName === "A" && Boolean(element.href);
+}
+function dispatchClickWithModifiers(target, sourceEvent) {
+	const ownerWindow = target.ownerDocument.defaultView;
+	if (!ownerWindow) return;
+	const ClickEvent = ownerWindow.PointerEvent ?? ownerWindow.MouseEvent;
+	target.dispatchEvent(new ClickEvent("click", {
+		bubbles: true,
+		cancelable: true,
+		composed: true,
+		detail: 0,
+		shiftKey: sourceEvent.shiftKey,
+		ctrlKey: sourceEvent.ctrlKey,
+		altKey: sourceEvent.altKey,
+		metaKey: sourceEvent.metaKey
+	}));
+}
+//#endregion
+//#region src/number-field/increment/NumberFieldIncrement.tsx
+/** A stepper button that increases the field value. */
+function NumberFieldIncrement(props) {
+	return NumberFieldStepperButton(props, true);
+}
+//#endregion
+//#region src/number-field/decrement/NumberFieldDecrement.tsx
+/** A stepper button that decreases the field value. */
+function NumberFieldDecrement(props) {
+	return NumberFieldStepperButton(props, false);
+}
+//#endregion
+//#region src/number-field/input/NumberFieldInput.tsx
+var NAVIGATE_KEYS = /* @__PURE__ */ new Set([
+	"Backspace",
+	"Delete",
+	"ArrowLeft",
+	"ArrowRight",
+	"Tab",
+	"Enter",
+	"Escape"
+]);
+/** The visible locale-aware text input in the number field. */
+function NumberFieldInput(props) {
+	const context = useNumberFieldRootContext();
+	const field = useFieldRootContext(true);
+	const form = useFormContext();
+	const labelable = useLabelableContext();
+	const internalProps = props;
+	const allProps = props;
+	const [element, setElement] = createSignal();
+	let hasTouchedInput = false;
+	let blockRevalidation = false;
+	let pendingCaret = null;
+	let previousValue = untrack(context.value);
+	const others = omit(allProps, "as", "aria-describedby", "aria-labelledby", "aria-roledescription", "class", "onBlur", "onFocus", "onInput", "onKeyDown", "onPaste", "ref", "style");
+	const state = context.state;
+	const classValue = createMemo(() => resolveClass(props.class, state()));
+	const styleValue = createMemo(() => resolveStyle(props.style, state()));
+	const stateAttributes = createMemo(() => getStateAttributesProps(state(), stateAttributesMapping));
+	const ariaLabelledBy = createMemo(() => internalProps["aria-labelledby"] ?? labelable.labelId());
+	const ariaDescribedBy = createMemo(() => labelable.getAriaDescribedBy(internalProps["aria-describedby"]));
+	const registration = {
+		id: void 0,
+		name: void 0,
+		value: context.value,
+		getControl: () => element() ?? null
+	};
+	function handleFocus(event) {
+		if (event.defaultPrevented || state().disabled) return;
+		field.setFocused(true);
+		if (hasTouchedInput) return;
+		hasTouchedInput = true;
+		const length = event.currentTarget.value.length;
+		event.currentTarget.setSelectionRange(length, length);
+	}
+	function handleBlur(event) {
+		const currentState = state();
+		if (event.defaultPrevented || currentState.disabled) return;
+		field.setTouched(true);
+		field.setFocused(false);
+		if (currentState.readOnly) return;
+		const hadManualInput = !context.allowInputSync();
+		const hadPendingProgrammaticChange = context.hasPendingCommit();
+		const previousNumericValue = context.value();
+		const currentInputValue = context.inputValue();
+		context.setAllowInputSync(true);
+		if (currentInputValue.trim() === "") {
+			const details = createChangeEventDetails(inputClear, event);
+			context.setValue(null, details);
+			if (details.isCanceled) return;
+			if (field.validationMode() === "onBlur") field.validation.commit(null);
+			if (hadManualInput || hadPendingProgrammaticChange || previousNumericValue !== null) context.onValueCommitted(null, createGenericEventDetails(inputClear, event));
+			return;
+		}
+		const formatOptions = context.formatOptions();
+		const parsedValue = parseNumber(currentInputValue, context.locale(), formatOptions);
+		if (parsedValue === null) return;
+		const hasRoundingOptions = hasNumberFormatRoundingOptions(formatOptions);
+		let committed;
+		if (!hadManualInput && !hasRoundingOptions) committed = previousNumericValue;
+		else if (hasRoundingOptions) committed = removeFloatingPointErrors(parsedValue, formatOptions);
+		else committed = parsedValue;
+		const shouldUpdateValue = previousNumericValue !== committed;
+		const shouldCommit = hadManualInput || shouldUpdateValue || hadPendingProgrammaticChange;
+		let committedValue = committed;
+		if (shouldUpdateValue) {
+			const details = createChangeEventDetails(inputBlur, event);
+			blockRevalidation = true;
+			context.setValue(committed, details);
+			if (details.isCanceled) {
+				blockRevalidation = false;
+				return;
+			}
+			committedValue = context.lastChangedValue();
+			if (committedValue === previousNumericValue) blockRevalidation = false;
+		}
+		if (field.validationMode() === "onBlur") field.validation.commit(committedValue);
+		if (shouldCommit) context.onValueCommitted(committedValue, createGenericEventDetails(inputBlur, event));
+		const canonicalText = formatNumber(committedValue, context.locale(), formatOptions);
+		if (currentInputValue !== canonicalText) context.setInputValue(canonicalText);
+	}
+	function handleInput(event) {
+		if (event.defaultPrevented) {
+			event.currentTarget.value = context.inputValue();
+			return;
+		}
+		context.setAllowInputSync(false);
+		const targetValue = event.currentTarget.value;
+		if (targetValue.trim() === "") {
+			context.setInputValue(targetValue);
+			context.setValue(null, createChangeEventDetails(inputClear, event));
+			return;
+		}
+		const allowedNonNumericKeys = context.getAllowedNonNumericKeys();
+		if (!Array.from(targetValue).every((character) => isNumeralChar(character) || ANY_MINUS_DETECT_RE.test(character) || allowedNonNumericKeys.has(character) || FORMAT_CONTROL_DETECT_RE.test(character))) {
+			event.currentTarget.value = context.inputValue();
+			return;
+		}
+		const parsedValue = parseNumber(targetValue, context.locale(), context.formatOptions());
+		context.setInputValue(targetValue);
+		if (parsedValue !== null) context.setValue(parsedValue, createChangeEventDetails(inputChange, event));
+	}
+	function handleKeyDown(event) {
+		const currentState = state();
+		if (event.defaultPrevented || currentState.readOnly || currentState.disabled) return;
+		const inputValue = context.inputValue();
+		const hadManualInput = !context.allowInputSync();
+		const allowedNonNumericKeys = context.getAllowedNonNumericKeys();
+		let isAllowedNonNumericKey = allowedNonNumericKeys.has(event.key);
+		const { decimal, currency, percentSign } = getNumberLocaleDetails(context.locale(), context.formatOptions());
+		const selectionStart = event.currentTarget.selectionStart;
+		const selectionEnd = event.currentTarget.selectionEnd;
+		const isAllSelected = selectionStart === 0 && selectionEnd === inputValue.length;
+		const selectionContainsIndex = (index) => selectionStart !== null && selectionEnd !== null && index >= selectionStart && index < selectionEnd;
+		const signGroups = [[ANY_MINUS_DETECT_RE, ANY_MINUS_RE], [ANY_PLUS_DETECT_RE, ANY_PLUS_RE]];
+		for (const [detect, global] of signGroups) if (detect.test(event.key) && Array.from(allowedNonNumericKeys).some((key) => detect.test(key))) {
+			const existingIndex = inputValue.search(global);
+			const replacingExisting = existingIndex !== -1 && selectionContainsIndex(existingIndex);
+			isAllowedNonNumericKey = !(ANY_MINUS_DETECT_RE.test(inputValue) || ANY_PLUS_DETECT_RE.test(inputValue)) || isAllSelected || replacingExisting;
+		}
+		for (const symbol of [
+			decimal,
+			currency,
+			percentSign
+		]) if (symbol && event.key === symbol) {
+			const symbolIndex = inputValue.indexOf(symbol);
+			isAllowedNonNumericKey = symbolIndex === -1 || isAllSelected || selectionContainsIndex(symbolIndex);
+		}
+		const stepKey = event.key === "ArrowUp" || event.key === "ArrowDown";
+		if (event.which === 229 || event.altKey && !stepKey || event.ctrlKey || event.metaKey || isAllowedNonNumericKey || isNumeralChar(event.key) || NAVIGATE_KEYS.has(event.key)) return;
+		let boundaryValue = null;
+		if (event.key === "Home" && context.min() !== void 0) boundaryValue = context.min() ?? null;
+		else if (event.key === "End" && context.max() !== void 0) boundaryValue = context.max() ?? null;
+		if (event.key.length > 1 && !stepKey && boundaryValue === null) return;
+		const currentValue = hadManualInput ? parseNumber(inputValue, context.locale(), context.formatOptions()) : null;
+		event.preventDefault();
+		event.stopPropagation();
+		let changed = false;
+		if (stepKey || boundaryValue !== null) context.setAllowInputSync(true);
+		if (stepKey) {
+			if (!hadManualInput) context.setLastChangedValue(context.value());
+			changed = context.incrementValue(context.getStepAmount(event), {
+				direction: event.key === "ArrowUp" ? 1 : -1,
+				currentValue,
+				event,
+				reason: keyboard
+			});
+		} else if (boundaryValue !== null) changed = context.setValue(boundaryValue, createChangeEventDetails(keyboard, event));
+		if (changed) context.onValueCommitted(context.lastChangedValue(), createGenericEventDetails(keyboard, event));
+	}
+	function handlePaste(event) {
+		const currentState = state();
+		if (event.defaultPrevented || currentState.readOnly || currentState.disabled) return;
+		let pastedData = "";
+		try {
+			pastedData = event.clipboardData?.getData("text/plain") ?? "";
+		} catch {
+			return;
+		}
+		event.preventDefault();
+		const selectionStart = event.currentTarget.selectionStart ?? 0;
+		const selectionEnd = event.currentTarget.selectionEnd ?? selectionStart;
+		const currentValue = context.inputValue();
+		const nextText = currentValue.slice(0, selectionStart) + pastedData + currentValue.slice(selectionEnd);
+		const parsedValue = parseNumber(nextText, context.locale(), context.formatOptions());
+		if (parsedValue !== null) {
+			context.setAllowInputSync(false);
+			pendingCaret = selectionStart + pastedData.length;
+			context.setValue(parsedValue, createChangeEventDetails(inputPaste, event));
+			context.setInputValue(nextText);
+		}
+	}
+	const onFocus = composeEventHandlers(() => internalProps.onFocus, () => handleFocus);
+	const onBlur = composeEventHandlers(() => internalProps.onBlur, () => handleBlur);
+	const onInput = composeEventHandlers(() => internalProps.onInput, () => handleInput);
+	const onKeyDown = composeEventHandlers(() => internalProps.onKeyDown, () => handleKeyDown);
+	const onPaste = composeEventHandlers(() => internalProps.onPaste, () => handlePaste);
+	createEffect(() => ({
+		element: element(),
+		inputValue: context.inputValue()
+	}), (current) => {
+		if (pendingCaret === null) return;
+		const caret = pendingCaret;
+		pendingCaret = null;
+		current.element?.setSelectionRange(caret, caret);
+	});
+	createEffect(() => ({
+		disabled: state().disabled,
+		element: element(),
+		id: context.id(),
+		name: context.nameProp()
+	}), (current) => {
+		registration.id = current.id;
+		registration.name = current.name;
+		field.registerFieldControl(context.controlSource, current.disabled || !current.element ? void 0 : registration);
+		labelable.registerControlId(context.controlSource, current.element ? current.id : void 0);
+	});
+	createEffect(() => ({
+		name: context.name(),
+		shouldValidateOnChange: field.shouldValidateOnChange(),
+		value: context.value()
+	}), (current) => {
+		if (current.value === previousValue) return;
+		previousValue = current.value;
+		form.clearError(current.name);
+		if (blockRevalidation && !current.shouldValidateOnChange) {
+			blockRevalidation = false;
+			return;
+		}
+		untrack(() => field.validation.change(current.value));
+	});
+	onCleanup(() => {
+		context.setInputElement(void 0);
+		field.registerFieldControl(context.controlSource, void 0);
+		labelable.registerControlId(context.controlSource, void 0);
+	});
+	return Dynamic(mergeProps({
+		get component() {
+			return props.as ?? "input";
+		},
+		ref: [((input) => {
+			setElement(input);
+			context.setInputElement(input);
+		}), internalProps.ref],
+		get id() {
+			return context.id();
+		},
+		get ["class"]() {
+			return classValue();
+		},
+		get style() {
+			return styleValue();
+		},
+		get required() {
+			return state().required;
+		},
+		get disabled() {
+			return state().disabled;
+		},
+		get readonly() {
+			return state().readOnly;
+		},
+		get inputMode() {
+			return context.inputMode();
+		},
+		get value() {
+			return context.inputValue();
+		},
+		type: "text",
+		autocomplete: "off",
+		autocorrect: "off",
+		spellcheck: "false",
+		get ["aria-roledescription"]() {
+			return internalProps["aria-roledescription"] ?? "Number field";
+		},
+		get ["aria-invalid"]() {
+			return !state().disabled && state().valid === false ? "true" : void 0;
+		},
+		get ["aria-labelledby"]() {
+			return ariaLabelledBy();
+		},
+		get ["aria-describedby"]() {
+			return ariaDescribedBy();
+		},
+		onFocus,
+		onBlur,
+		onInput,
+		onKeyDown,
+		onPaste
+	}, stateAttributes, others));
+}
+//#endregion
+//#region src/number-field/utils/getViewportRect.ts
+function getViewportRect(teleportDistance, scrubAreaEl) {
+	const win = scrubAreaEl.ownerDocument.defaultView ?? window;
+	if (teleportDistance != null) {
+		const rect = scrubAreaEl.getBoundingClientRect();
+		return {
+			left: rect.left - teleportDistance / 2,
+			top: rect.top - teleportDistance / 2,
+			right: rect.right + teleportDistance / 2,
+			bottom: rect.bottom + teleportDistance / 2
+		};
+	}
+	const visualViewport = win.visualViewport;
+	if (visualViewport) return {
+		left: visualViewport.offsetLeft,
+		top: visualViewport.offsetTop,
+		right: visualViewport.offsetLeft + visualViewport.width,
+		bottom: visualViewport.offsetTop + visualViewport.height
+	};
+	return {
+		left: 0,
+		top: 0,
+		right: win.document.documentElement.clientWidth,
+		bottom: win.document.documentElement.clientHeight
+	};
+}
+//#endregion
+//#region src/number-field/scrub-area/NumberFieldScrubAreaContext.ts
+var MISSING_CONTEXT = Symbol("NumberFieldScrubAreaContext");
+var NumberFieldScrubAreaContext = createContext(MISSING_CONTEXT);
+function useNumberFieldScrubAreaContext() {
+	const context = useContext(NumberFieldScrubAreaContext);
+	if (context === MISSING_CONTEXT) throw new Error("Base UI: NumberFieldScrubAreaContext is missing. NumberFieldScrubArea parts must be placed within <NumberField.ScrubArea>.");
+	return context;
+}
+//#endregion
+//#region src/number-field/scrub-area/NumberFieldScrubArea.tsx
+var SCRUB_AREA_STYLE = {
+	"touch-action": "none",
+	"-webkit-user-select": "none",
+	"user-select": "none"
+};
+/** An interactive area where dragging changes the number field value. */
+function NumberFieldScrubArea(props) {
+	const root = useNumberFieldRootContext();
+	const internalProps = props;
+	const allProps = props;
+	const [element, setElement] = createSignal();
+	const [cursorElement, setCursorElement] = createSignal();
+	const [isTouchInput, setIsTouchInput] = createSignal(false);
+	const [isPointerLockDenied, setIsPointerLockDenied] = createSignal(false);
+	const [isScrubbing, setIsScrubbing] = createSignal(false);
+	const disabled = createMemo(() => root.state().disabled);
+	const readOnly = createMemo(() => root.state().readOnly);
+	const state = root.state;
+	const others = omit(allProps, "as", "class", "direction", "onPointerDown", "pixelSensitivity", "ref", "style", "teleportDistance");
+	const classValue = createMemo(() => resolveClass(props.class, state()));
+	const styleValue = createMemo(() => {
+		const external = resolveStyle(props.style, state());
+		if (typeof external === "string") return `touch-action:none;-webkit-user-select:none;user-select:none;${external}`;
+		return mergeStyles(SCRUB_AREA_STYLE, external === false ? void 0 : external);
+	});
+	const stateAttributes = createMemo(() => getStateAttributesProps(state(), stateAttributesMapping));
+	const virtualCursorCoords = {
+		x: 0,
+		y: 0
+	};
+	let isPointerDown = false;
+	let didMove = false;
+	let pointerDownTarget = null;
+	let exitPointerLockTimer;
+	let exitPointerLockTimerWindow;
+	function clearExitPointerLockTimer() {
+		if (exitPointerLockTimer !== void 0) {
+			exitPointerLockTimerWindow?.clearTimeout(exitPointerLockTimer);
+			exitPointerLockTimer = void 0;
+			exitPointerLockTimerWindow = void 0;
+		}
+	}
+	function updateCursorTransform(cursor, x, y) {
+		const scale = cursor.ownerDocument.defaultView?.visualViewport?.scale ?? 1;
+		cursor.style.transform = `translate3d(${x}px,${y}px,0) scale(${1 / scale})`;
+	}
+	function updateVirtualCursor(event) {
+		const cursor = cursorElement();
+		const scrubArea = element();
+		if (!cursor || !scrubArea) return;
+		const rect = getViewportRect(internalProps.teleportDistance, scrubArea);
+		const wrap = (coordinate, halfSize, low, high) => {
+			if (coordinate + halfSize < low) return high - halfSize;
+			if (coordinate + halfSize > high) return low - halfSize;
+			return coordinate;
+		};
+		virtualCursorCoords.x = wrap(Math.round(virtualCursorCoords.x + event.movementX), cursor.offsetWidth / 2, rect.left, rect.right);
+		virtualCursorCoords.y = wrap(Math.round(virtualCursorCoords.y + event.movementY), cursor.offsetHeight / 2, rect.top, rect.bottom);
+		updateCursorTransform(cursor, virtualCursorCoords.x, virtualCursorCoords.y);
+	}
+	function setScrubbing(nextScrubbing, event) {
+		const updateState = () => {
+			setIsScrubbing(nextScrubbing);
+			root.setIsScrubbing(nextScrubbing);
+		};
+		if (!nextScrubbing) {
+			updateState();
+			return;
+		}
+		flush(updateState);
+		const cursor = cursorElement();
+		if (!cursor) return;
+		virtualCursorCoords.x = event.clientX - cursor.offsetWidth / 2;
+		virtualCursorCoords.y = event.clientY - cursor.offsetHeight / 2;
+		updateCursorTransform(cursor, virtualCursorCoords.x, virtualCursorCoords.y);
+	}
+	function finishScrubbing(event, input) {
+		try {
+			element()?.ownerDocument.exitPointerLock();
+		} catch {} finally {
+			isPointerDown = false;
+			setScrubbing(false, event);
+			root.onValueCommitted(root.lastChangedValue() ?? root.value(), createGenericEventDetails(scrub, event));
+			if (!didMove && pointerDownTarget != null) {
+				const ownerWindow = input.ownerDocument.defaultView;
+				if (ownerWindow) pointerDownTarget.dispatchEvent(new ownerWindow.MouseEvent("click", {
+					bubbles: true,
+					cancelable: true
+				}));
+			}
+			didMove = false;
+			pointerDownTarget = null;
+		}
+	}
+	createEffect(() => ({
+		direction: internalProps.direction ?? "horizontal",
+		disabled: disabled(),
+		input: root.inputElement(),
+		pixelSensitivity: internalProps.pixelSensitivity ?? 2,
+		readOnly: readOnly(),
+		scrubbing: isScrubbing()
+	}), (current) => {
+		if (!current.input || current.disabled || current.readOnly || !current.scrubbing) return;
+		const input = current.input;
+		const ownerWindow = input.ownerDocument.defaultView;
+		if (!ownerWindow) return;
+		const win = ownerWindow;
+		let cumulativeDelta = 0;
+		function handlePointerUp(event) {
+			if (!isPointerDown) return;
+			if (isGecko()) {
+				clearExitPointerLockTimer();
+				exitPointerLockTimerWindow = win;
+				exitPointerLockTimer = win.setTimeout(finishScrubbing, 20, event, input);
+			} else finishScrubbing(event, input);
+		}
+		function handlePointerMove(event) {
+			if (!isPointerDown) return;
+			event.preventDefault();
+			updateVirtualCursor(event);
+			const { movementX, movementY } = event;
+			cumulativeDelta += current.direction === "vertical" ? movementY : movementX;
+			if (Math.abs(cumulativeDelta) >= current.pixelSensitivity) {
+				cumulativeDelta = 0;
+				didMove = true;
+				const rawAmount = (current.direction === "vertical" ? -movementY : movementX) * root.getStepAmount(event);
+				if (rawAmount !== 0) {
+					root.setAllowInputSync(true);
+					root.incrementValue(Math.abs(rawAmount), {
+						direction: rawAmount >= 0 ? 1 : -1,
+						event,
+						reason: scrub
+					});
+				}
+			}
+		}
+		win.addEventListener("pointerup", handlePointerUp, true);
+		win.addEventListener("pointermove", handlePointerMove, true);
+		return () => {
+			if (exitPointerLockTimer !== void 0) {
+				exitPointerLockTimerWindow?.clearTimeout(exitPointerLockTimer);
+				exitPointerLockTimer = void 0;
+				exitPointerLockTimerWindow = void 0;
+			}
+			win.removeEventListener("pointerup", handlePointerUp, true);
+			win.removeEventListener("pointermove", handlePointerMove, true);
+		};
+	});
+	createEffect(() => ({
+		disabled: disabled(),
+		element: element(),
+		readOnly: readOnly()
+	}), (current) => {
+		if (!current.element || current.disabled || current.readOnly) return;
+		const handleTouchStart = (event) => {
+			if (event.touches.length === 1) event.preventDefault();
+		};
+		current.element.addEventListener("touchstart", handleTouchStart);
+		return () => current.element?.removeEventListener("touchstart", handleTouchStart);
+	});
+	async function handlePointerDown(event) {
+		if (event.defaultPrevented || readOnly() || event.button !== 0 || disabled()) return;
+		const touchInput = event.pointerType === "touch";
+		setIsTouchInput(touchInput);
+		if (event.pointerType === "mouse") {
+			event.preventDefault();
+			root.inputElement()?.focus();
+		}
+		isPointerDown = true;
+		didMove = false;
+		pointerDownTarget = getEventTarget(event);
+		setScrubbing(true, event);
+		if (!touchInput && !isWebKit()) {
+			const scrubArea = element() ?? event.currentTarget;
+			try {
+				await scrubArea.ownerDocument.body.requestPointerLock();
+				setIsPointerLockDenied(false);
+			} catch {
+				setIsPointerLockDenied(true);
+			} finally {
+				if (isPointerDown) setScrubbing(true, event);
+			}
+		}
+	}
+	const onPointerDown = composeEventHandlers(() => internalProps.onPointerDown, () => handlePointerDown);
+	onCleanup(() => {
+		clearExitPointerLockTimer();
+		setCursorElement(void 0);
+		if (isPointerDown) {
+			isPointerDown = false;
+			root.setIsScrubbing(false);
+			try {
+				element()?.ownerDocument.exitPointerLock();
+			} catch {}
+		}
+	});
+	return NumberFieldScrubAreaContext({
+		value: {
+			isScrubbing,
+			isTouchInput,
+			isPointerLockDenied,
+			scrubAreaElement: element,
+			scrubAreaCursorElement: cursorElement,
+			setScrubAreaCursorElement: setCursorElement
+		},
+		get children() {
+			return Dynamic(mergeProps({
+				get component() {
+					return props.as ?? "span";
+				},
+				ref: [((scrubArea) => setElement(scrubArea)), internalProps.ref],
+				role: "presentation",
+				get ["class"]() {
+					return classValue();
+				},
+				get style() {
+					return styleValue();
+				},
+				onPointerDown
+			}, stateAttributes, others));
+		}
+	});
+}
+function getEventTarget(event) {
+	return event.composedPath?.()[0] ?? event.target;
+}
+//#endregion
+//#region src/number-field/scrub-area-cursor/NumberFieldScrubAreaCursor.tsx
+var CURSOR_STYLE = {
+	position: "fixed",
+	top: "0",
+	left: "0",
+	"pointer-events": "none"
+};
+/** A portaled virtual cursor shown while the scrub area has pointer lock. */
+function NumberFieldScrubAreaCursor(props) {
+	const root = useNumberFieldRootContext();
+	const scrubArea = useNumberFieldScrubAreaContext();
+	const internalProps = props;
+	const others = omit(props, "as", "class", "ref", "style");
+	const state = root.state;
+	const shouldRender = createMemo(() => scrubArea.isScrubbing() && !isWebKit() && !scrubArea.isTouchInput() && !scrubArea.isPointerLockDenied());
+	const ownerBody = () => scrubArea.scrubAreaElement()?.ownerDocument.body;
+	const classValue = createMemo(() => resolveClass(props.class, state()));
+	const styleValue = createMemo(() => {
+		const external = resolveStyle(props.style, state());
+		if (typeof external === "string") return `position:fixed;top:0;left:0;pointer-events:none;${external}`;
+		return mergeStyles(CURSOR_STYLE, external === false ? void 0 : external);
+	});
+	const stateAttributes = createMemo(() => getStateAttributesProps(state(), stateAttributesMapping));
+	createEffect(shouldRender, (renderCursor) => {
+		if (!renderCursor) scrubArea.setScrubAreaCursorElement(void 0);
+	});
+	onCleanup(() => {
+		scrubArea.setScrubAreaCursorElement(void 0);
+	});
+	return Show({
+		get when() {
+			return memo(() => {
+				return !!shouldRender();
+			})() ? ownerBody() : void 0;
+		},
+		keyed: true,
+		children: (body) => Portal({
+			mount: body,
+			get children() {
+				return Dynamic(mergeProps({
+					get component() {
+						return props.as ?? "span";
+					},
+					ref: [((cursor) => scrubArea.setScrubAreaCursorElement(cursor)), internalProps.ref],
+					role: "presentation",
+					get ["class"]() {
+						return classValue();
+					},
+					get style() {
+						return styleValue();
+					}
+				}, stateAttributes, others));
+			}
+		})
+	});
+}
+//#endregion
+//#region src/number-field/index.parts.ts
+var index_parts_exports = /* @__PURE__ */ __exportAll({
+	Decrement: () => NumberFieldDecrement,
+	Group: () => NumberFieldGroup,
+	Increment: () => NumberFieldIncrement,
+	Input: () => NumberFieldInput,
+	Root: () => NumberFieldRoot,
+	ScrubArea: () => NumberFieldScrubArea,
+	ScrubAreaCursor: () => NumberFieldScrubAreaCursor
+});
+//#endregion
+export { index_parts_exports as NumberField };