@kanso-labs/react-native-kanso-ui 0.0.0-stage → 0.1.0

package/dist/components/number-field/index.js

@@ -0,0 +1,832 @@
+import { IconStyleContext } from "../../glyphs/icon-style.js";
+import { MinusGlyph, PlusGlyph } from "../../glyphs/index.js";
+import { useTheme } from "../../theme/scope.js";
+import { composeStyles, themedStyles } from "../../theme/styles.js";
+import { useFieldValidation } from "../../form/index.js";
+import { withOpacity } from "../../theme/color.js";
+import { hitSlop, usePressFeedback } from "../../press/index.js";
+import { IconButton } from "../icon-button/index.js";
+import { FieldBox, FieldInput, FieldMessage, describedBy, useFieldFocus } from "../../field/index.js";
+import { useNumberFieldState } from "../../number/state.js";
+import { c } from "react/compiler-runtime";
+import { AccessibilityInfo, Platform, Pressable, StyleSheet, View, useWindowDimensions } from "react-native";
+import { useEffect, useId, useImperativeHandle, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { NumberFormatter } from "@internationalized/number";
+//#region src/components/number-field/index.tsx
+const STEPPER_WIDTH = 32;
+const GLYPH_SIZE = 20;
+const SPIN_DELAY = 600;
+const SPIN_INTERVAL = 60;
+let deviceLocale;
+const stylesOf = themedStyles(({ radii, spacing }) => StyleSheet.create({
+	stepper: {
+		alignItems: "center",
+		flexBasis: 0,
+		flexGrow: 1,
+		justifyContent: "center",
+		width: STEPPER_WIDTH
+	},
+	stepperBottomOutlined: { borderBottomEndRadius: radii.xs },
+	stepperRing: { outlineOffset: -2 },
+	steppers: {
+		alignSelf: "stretch",
+		flexDirection: "column",
+		marginEnd: -spacing.lg,
+		marginStart: spacing.sm - spacing.lg,
+		marginVertical: -spacing.sm
+	},
+	steppersInline: {
+		alignSelf: "center",
+		flexDirection: "row",
+		gap: spacing.sm,
+		marginEnd: spacing.md - spacing.lg,
+		marginStart: spacing.sm - spacing.lg
+	},
+	steppersOutlined: { marginVertical: -spacing.lg },
+	stepperTop: { borderTopEndRadius: radii.xs }
+}));
+function blurThen(onBlur, then) {
+	return (event) => {
+		onBlur();
+		then?.(event);
+	};
+}
+function commitBefore(state, handler) {
+	return (event) => {
+		state.commit();
+		handler?.(event);
+	};
+}
+function editInto(state, onEdit) {
+	return (text) => {
+		if (state.validate(text)) {
+			state.setInputValue(text);
+			onEdit();
+		}
+	};
+}
+function glyphOf(color) {
+	return {
+		color,
+		size: GLYPH_SIZE
+	};
+}
+function halfOf({ spacing, typography }, outlined, fontScale) {
+	return outlined ? spacing.lg + typography.bodyLargeLineHeight * fontScale / 2 : spacing.sm + (typography.bodySmallLineHeight + typography.bodyLargeLineHeight) * fontScale / 2;
+}
+function keyboardOf(minValue, hasDecimals) {
+	if (minValue === void 0 || Number.isNaN(minValue) || minValue < 0) return Platform.OS === "ios" ? "numbers-and-punctuation" : "numeric";
+	return hasDecimals ? "decimal-pad" : "number-pad";
+}
+function localeOf(locale) {
+	if (locale !== void 0) try {
+		Intl.NumberFormat.supportedLocalesOf(locale);
+		return locale;
+	} catch {}
+	deviceLocale ??= new Intl.NumberFormat().resolvedOptions().locale;
+	return deviceLocale;
+}
+function marginVerticalOf(margin) {
+	return { marginVertical: margin };
+}
+/**
+* A labelled number input with steppers, the text fields page's filled or
+* outlined field. Pass `value` with `onChange` to control it, or
+* `defaultValue` to let it keep its own; `onChange` is handed the committed
+* number, `NaN` for an empty field. `minValue`, `maxValue` and `step` shape
+* it, and `formatOptions` says how it reads, in `locale`: a currency, a
+* percentage, a unit.
+*
+* React Native's own `TextInput` props, the return key among them, reach the
+* control; `style` and `ref` are the field as a whole, and `inputRef` the
+* control.
+*
+* ```tsx
+* <NumberField defaultValue={1234.5} label="Label" />
+* ```
+*/
+function NumberField(t0) {
+	const $ = c(110);
+	let decrementLabel;
+	let defaultValue;
+	let description;
+	let error;
+	let formatOptions;
+	let incrementLabel;
+	let inputRef;
+	let label;
+	let locale;
+	let maxValue;
+	let minValue;
+	let name;
+	let onBlur;
+	let onChange;
+	let onFocus;
+	let onSubmitEditing;
+	let props;
+	let ref;
+	let step;
+	let style;
+	let t1;
+	let t2;
+	let t3;
+	let t4;
+	let t5;
+	let t6;
+	let t7;
+	let t8;
+	let validate;
+	let value;
+	if ($[0] !== t0) {
+		({decrementLabel, defaultValue, description, error, floatingLabel: t1, formatOptions, incrementLabel, inputRef, isDisabled: t2, isReadOnly: t3, isRequired: t4, label, locale, maxValue, minValue, name, numeric: t5, onBlur, onChange, onFocus, onSubmitEditing, ref, returnKeyType: t6, step, steppers: t7, style, validate, value, variant: t8, ...props} = t0);
+		$[0] = t0;
+		$[1] = decrementLabel;
+		$[2] = defaultValue;
+		$[3] = description;
+		$[4] = error;
+		$[5] = formatOptions;
+		$[6] = incrementLabel;
+		$[7] = inputRef;
+		$[8] = label;
+		$[9] = locale;
+		$[10] = maxValue;
+		$[11] = minValue;
+		$[12] = name;
+		$[13] = onBlur;
+		$[14] = onChange;
+		$[15] = onFocus;
+		$[16] = onSubmitEditing;
+		$[17] = props;
+		$[18] = ref;
+		$[19] = step;
+		$[20] = style;
+		$[21] = t1;
+		$[22] = t2;
+		$[23] = t3;
+		$[24] = t4;
+		$[25] = t5;
+		$[26] = t6;
+		$[27] = t7;
+		$[28] = t8;
+		$[29] = validate;
+		$[30] = value;
+	} else {
+		decrementLabel = $[1];
+		defaultValue = $[2];
+		description = $[3];
+		error = $[4];
+		formatOptions = $[5];
+		incrementLabel = $[6];
+		inputRef = $[7];
+		label = $[8];
+		locale = $[9];
+		maxValue = $[10];
+		minValue = $[11];
+		name = $[12];
+		onBlur = $[13];
+		onChange = $[14];
+		onFocus = $[15];
+		onSubmitEditing = $[16];
+		props = $[17];
+		ref = $[18];
+		step = $[19];
+		style = $[20];
+		t1 = $[21];
+		t2 = $[22];
+		t3 = $[23];
+		t4 = $[24];
+		t5 = $[25];
+		t6 = $[26];
+		t7 = $[27];
+		t8 = $[28];
+		validate = $[29];
+		value = $[30];
+	}
+	const floatingLabel = t1 === void 0 ? true : t1;
+	const isDisabled = t2 === void 0 ? false : t2;
+	const isReadOnly = t3 === void 0 ? false : t3;
+	const isRequired = t4 === void 0 ? false : t4;
+	const numeric = t5 === void 0 ? true : t5;
+	const returnKeyType = t6 === void 0 ? "done" : t6;
+	const steppers = t7 === void 0 ? "vertical" : t7;
+	const variant = t8 === void 0 ? "filled" : t8;
+	const id = useId();
+	const control = useRef(null);
+	const writtenIn = localeOf(locale);
+	const state = useNumberFieldState({
+		defaultValue,
+		formatOptions,
+		isDisabled,
+		isReadOnly,
+		locale: writtenIn,
+		maxValue,
+		minValue,
+		onChange,
+		step,
+		value
+	});
+	let t9;
+	if ($[31] !== state.numberValue) {
+		t9 = Number.isNaN(state.numberValue);
+		$[31] = state.numberValue;
+		$[32] = t9;
+	} else t9 = $[32];
+	const empty = t9;
+	const t10 = empty ? "" : String(state.numberValue);
+	let t11;
+	if ($[33] !== empty || $[34] !== error || $[35] !== isDisabled || $[36] !== isReadOnly || $[37] !== isRequired || $[38] !== name || $[39] !== state.numberValue || $[40] !== t10 || $[41] !== validate) {
+		t11 = {
+			control,
+			error,
+			isDisabled,
+			isEmpty: empty,
+			isReadOnly,
+			isRequired,
+			name,
+			submitted: t10,
+			validate,
+			value: state.numberValue
+		};
+		$[33] = empty;
+		$[34] = error;
+		$[35] = isDisabled;
+		$[36] = isReadOnly;
+		$[37] = isRequired;
+		$[38] = name;
+		$[39] = state.numberValue;
+		$[40] = t10;
+		$[41] = validate;
+		$[42] = t11;
+	} else t11 = $[42];
+	const validation = useFieldValidation(t11);
+	const shownError = validation.error;
+	let t12;
+	if ($[43] !== onBlur || $[44] !== state || $[45] !== validation.onBlur) {
+		t12 = commitBefore(state, blurThen(validation.onBlur, onBlur));
+		$[43] = onBlur;
+		$[44] = state;
+		$[45] = validation.onBlur;
+		$[46] = t12;
+	} else t12 = $[46];
+	let t13;
+	if ($[47] !== onFocus || $[48] !== t12) {
+		t13 = {
+			onBlur: t12,
+			onFocus
+		};
+		$[47] = onFocus;
+		$[48] = t12;
+		$[49] = t13;
+	} else t13 = $[49];
+	const focus = useFieldFocus(t13);
+	const hasDecimals = (new NumberFormatter(writtenIn, formatOptions).resolvedOptions().maximumFractionDigits ?? 0) > 0;
+	const announced = useStepAnnouncement(state.inputValue);
+	const [stepperFocused, setStepperFocused] = useState(false);
+	let t14;
+	let t15;
+	if ($[50] === Symbol.for("react.memo_cache_sentinel")) {
+		t14 = () => control.current;
+		t15 = [];
+		$[50] = t14;
+		$[51] = t15;
+	} else {
+		t14 = $[50];
+		t15 = $[51];
+	}
+	useImperativeHandle(inputRef, t14, t15);
+	const t16 = decrementLabel ?? `Decrease ${label}`;
+	const t17 = incrementLabel ?? `Increase ${label}`;
+	const t18 = steppers === "horizontal";
+	let t19;
+	if ($[52] === Symbol.for("react.memo_cache_sentinel")) {
+		t19 = () => {
+			setStepperFocused(false);
+		};
+		$[52] = t19;
+	} else t19 = $[52];
+	let t20;
+	if ($[53] !== announced || $[54] !== state.canDecrement || $[55] !== state.canIncrement || $[56] !== state.decrement || $[57] !== state.increment || $[58] !== t16 || $[59] !== t17 || $[60] !== t18 || $[61] !== validation.onEdit || $[62] !== variant) {
+		let t21;
+		if ($[64] === Symbol.for("react.memo_cache_sentinel")) {
+			t21 = () => {
+				setStepperFocused(true);
+			};
+			$[64] = t21;
+		} else t21 = $[64];
+		t20 = steppersOf({
+			canDecrement: state.canDecrement,
+			canIncrement: state.canIncrement,
+			decrementLabel: t16,
+			incrementLabel: t17,
+			inline: t18,
+			onBlur: t19,
+			onDecrement: announced(stepThen(state.decrement, validation.onEdit)),
+			onFocus: t21,
+			onIncrement: announced(stepThen(state.increment, validation.onEdit)),
+			outlined: variant === "outlined"
+		});
+		$[53] = announced;
+		$[54] = state.canDecrement;
+		$[55] = state.canIncrement;
+		$[56] = state.decrement;
+		$[57] = state.increment;
+		$[58] = t16;
+		$[59] = t17;
+		$[60] = t18;
+		$[61] = validation.onEdit;
+		$[62] = variant;
+		$[63] = t20;
+	} else t20 = $[63];
+	const t21 = focus.focused || stepperFocused;
+	const t22 = shownError !== void 0;
+	const t23 = state.inputValue !== "";
+	const t24 = focus.handlers;
+	let t25;
+	if ($[65] !== description || $[66] !== id || $[67] !== shownError) {
+		t25 = describedBy(id, {
+			description,
+			error: shownError
+		});
+		$[65] = description;
+		$[66] = id;
+		$[67] = shownError;
+		$[68] = t25;
+	} else t25 = $[68];
+	const t26 = !isDisabled && !isReadOnly;
+	let t27;
+	if ($[69] !== hasDecimals || $[70] !== minValue) {
+		t27 = keyboardOf(minValue, hasDecimals);
+		$[69] = hasDecimals;
+		$[70] = minValue;
+		$[71] = t27;
+	} else t27 = $[71];
+	let t28;
+	if ($[72] !== state || $[73] !== validation.onEdit) {
+		t28 = editInto(state, validation.onEdit);
+		$[72] = state;
+		$[73] = validation.onEdit;
+		$[74] = t28;
+	} else t28 = $[74];
+	let t29;
+	if ($[75] !== onSubmitEditing || $[76] !== state) {
+		t29 = commitBefore(state, onSubmitEditing);
+		$[75] = onSubmitEditing;
+		$[76] = state;
+		$[77] = t29;
+	} else t29 = $[77];
+	let t30;
+	if ($[78] !== focus.handlers || $[79] !== label || $[80] !== numeric || $[81] !== props || $[82] !== returnKeyType || $[83] !== state.inputValue || $[84] !== t25 || $[85] !== t26 || $[86] !== t27 || $[87] !== t28 || $[88] !== t29) {
+		t30 = /* @__PURE__ */ jsx(FieldInput, {
+			...props,
+			...t24,
+			"aria-label": label,
+			autoComplete: "off",
+			autoCorrect: false,
+			described: t25,
+			editable: t26,
+			keyboardType: t27,
+			numeric,
+			onChangeText: t28,
+			onSubmitEditing: t29,
+			ref: control,
+			returnKeyType,
+			spellCheck: false,
+			value: state.inputValue
+		});
+		$[78] = focus.handlers;
+		$[79] = label;
+		$[80] = numeric;
+		$[81] = props;
+		$[82] = returnKeyType;
+		$[83] = state.inputValue;
+		$[84] = t25;
+		$[85] = t26;
+		$[86] = t27;
+		$[87] = t28;
+		$[88] = t29;
+		$[89] = t30;
+	} else t30 = $[89];
+	let t31;
+	if ($[90] !== floatingLabel || $[91] !== isDisabled || $[92] !== isRequired || $[93] !== label || $[94] !== t20 || $[95] !== t21 || $[96] !== t22 || $[97] !== t23 || $[98] !== t30 || $[99] !== variant) {
+		t31 = /* @__PURE__ */ jsx(FieldBox, {
+			control,
+			end: t20,
+			floatingLabel,
+			isDisabled,
+			isFocused: t21,
+			isInvalid: t22,
+			isPopulated: t23,
+			isRequired,
+			label,
+			variant,
+			children: t30
+		});
+		$[90] = floatingLabel;
+		$[91] = isDisabled;
+		$[92] = isRequired;
+		$[93] = label;
+		$[94] = t20;
+		$[95] = t21;
+		$[96] = t22;
+		$[97] = t23;
+		$[98] = t30;
+		$[99] = variant;
+		$[100] = t31;
+	} else t31 = $[100];
+	let t32;
+	if ($[101] !== description || $[102] !== id || $[103] !== shownError) {
+		t32 = /* @__PURE__ */ jsx(FieldMessage, {
+			description,
+			error: shownError,
+			id
+		});
+		$[101] = description;
+		$[102] = id;
+		$[103] = shownError;
+		$[104] = t32;
+	} else t32 = $[104];
+	let t33;
+	if ($[105] !== ref || $[106] !== style || $[107] !== t31 || $[108] !== t32) {
+		t33 = /* @__PURE__ */ jsxs(View, {
+			ref,
+			style,
+			children: [t31, t32]
+		});
+		$[105] = ref;
+		$[106] = style;
+		$[107] = t31;
+		$[108] = t32;
+		$[109] = t33;
+	} else t33 = $[109];
+	return t33;
+}
+function outwardSlop(half, place) {
+	const slop = hitSlop(half, STEPPER_WIDTH);
+	if (slop === void 0) return;
+	const reach = (slop.top ?? 0) + (slop.bottom ?? 0);
+	return place === "top" ? {
+		...slop,
+		bottom: 0,
+		top: reach
+	} : {
+		...slop,
+		bottom: reach,
+		top: 0
+	};
+}
+/**
+* One of the stacked pair: half the column, the glyph in on surface
+* variant, and the state layer, the ripple and the ring every control
+* draws, the ring inside it. Disabled at the end of the range, where the
+* glyph takes on surface at the disabled opacity.
+*/
+function Stepper(t0) {
+	const $ = c(23);
+	const { "aria-label": ariaLabel, children, half, isDisabled, onBlur, onFocus, onPress, onPressIn, onPressOut, outlined, place } = t0;
+	const theme = useTheme();
+	const styles = stylesOf(theme);
+	const { colors, stateLayerOpacity } = theme;
+	const corner = place === "top" ? styles.stepperTop : outlined ? styles.stepperBottomOutlined : void 0;
+	const feedback = usePressFeedback({
+		color: colors.onSurfaceVariant,
+		corners: corner,
+		disabled: isDisabled,
+		onBlur,
+		onFocus,
+		onPressIn,
+		onPressOut
+	});
+	const T0 = Pressable;
+	const t1 = feedback.handlers;
+	let t2;
+	if ($[0] !== half || $[1] !== place) {
+		t2 = outwardSlop(half, place);
+		$[0] = half;
+		$[1] = place;
+		$[2] = t2;
+	} else t2 = $[2];
+	const t3 = "button";
+	const t4 = composeStyles(styles.stepper, corner, feedback.ring, feedback.ring === void 0 ? void 0 : styles.stepperRing);
+	const t5 = feedback.layer;
+	let t6;
+	if ($[3] !== colors.onSurface || $[4] !== colors.onSurfaceVariant || $[5] !== isDisabled || $[6] !== stateLayerOpacity) {
+		t6 = isDisabled ? withOpacity(colors.onSurface, stateLayerOpacity.disabledContent) : colors.onSurfaceVariant;
+		$[3] = colors.onSurface;
+		$[4] = colors.onSurfaceVariant;
+		$[5] = isDisabled;
+		$[6] = stateLayerOpacity;
+		$[7] = t6;
+	} else t6 = $[7];
+	let t7;
+	if ($[8] !== t6) {
+		t7 = glyphOf(t6);
+		$[8] = t6;
+		$[9] = t7;
+	} else t7 = $[9];
+	let t8;
+	if ($[10] !== children || $[11] !== t7) {
+		t8 = /* @__PURE__ */ jsx(IconStyleContext, {
+			value: t7,
+			children
+		});
+		$[10] = children;
+		$[11] = t7;
+		$[12] = t8;
+	} else t8 = $[12];
+	let t9;
+	if ($[13] !== T0 || $[14] !== ariaLabel || $[15] !== feedback.handlers || $[16] !== feedback.layer || $[17] !== isDisabled || $[18] !== onPress || $[19] !== t2 || $[20] !== t4 || $[21] !== t8) {
+		t9 = /* @__PURE__ */ jsxs(T0, {
+			...t1,
+			"aria-label": ariaLabel,
+			disabled: isDisabled,
+			hitSlop: t2,
+			onPress,
+			role: t3,
+			style: t4,
+			children: [t5, t8]
+		});
+		$[13] = T0;
+		$[14] = ariaLabel;
+		$[15] = feedback.handlers;
+		$[16] = feedback.layer;
+		$[17] = isDisabled;
+		$[18] = onPress;
+		$[19] = t2;
+		$[20] = t4;
+		$[21] = t8;
+		$[22] = t9;
+	} else t9 = $[22];
+	return t9;
+}
+/**
+* The two steppers at the box's end, stacked or side by side, each
+* disabled where it would not move the value.
+*/
+function Steppers(t0) {
+	const $ = c(41);
+	const { canDecrement, canIncrement, decrementLabel, incrementLabel, inline, onBlur, onDecrement, onFocus, onIncrement, outlined } = t0;
+	const theme = useTheme();
+	const styles = stylesOf(theme);
+	const { fontScale } = useWindowDimensions();
+	const { sizing, typography } = theme;
+	const up = useSpin(onIncrement, canIncrement);
+	const down = useSpin(onDecrement, canDecrement);
+	if (inline) {
+		const t1 = !canDecrement;
+		let t2;
+		if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+			t2 = /* @__PURE__ */ jsx(MinusGlyph, {});
+			$[0] = t2;
+		} else t2 = $[0];
+		let t3;
+		if ($[1] !== decrementLabel || $[2] !== down || $[3] !== onBlur || $[4] !== onFocus || $[5] !== t1) {
+			t3 = /* @__PURE__ */ jsx(IconButton, {
+				...down,
+				"aria-label": decrementLabel,
+				isDisabled: t1,
+				onBlur,
+				onFocus,
+				size: "xs",
+				children: t2
+			});
+			$[1] = decrementLabel;
+			$[2] = down;
+			$[3] = onBlur;
+			$[4] = onFocus;
+			$[5] = t1;
+			$[6] = t3;
+		} else t3 = $[6];
+		const t4 = !canIncrement;
+		let t5;
+		if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
+			t5 = /* @__PURE__ */ jsx(PlusGlyph, {});
+			$[7] = t5;
+		} else t5 = $[7];
+		let t6;
+		if ($[8] !== incrementLabel || $[9] !== onBlur || $[10] !== onFocus || $[11] !== t4 || $[12] !== up) {
+			t6 = /* @__PURE__ */ jsx(IconButton, {
+				...up,
+				"aria-label": incrementLabel,
+				isDisabled: t4,
+				onBlur,
+				onFocus,
+				size: "xs",
+				children: t5
+			});
+			$[8] = incrementLabel;
+			$[9] = onBlur;
+			$[10] = onFocus;
+			$[11] = t4;
+			$[12] = up;
+			$[13] = t6;
+		} else t6 = $[13];
+		return /* @__PURE__ */ jsxs(View, {
+			style: composeStyles(styles.steppersInline, marginVerticalOf((typography.bodyLargeLineHeight * fontScale - sizing.controlXs) / 2)),
+			children: [t3, t6]
+		});
+	}
+	let t1;
+	if ($[14] !== fontScale || $[15] !== outlined || $[16] !== theme) {
+		t1 = halfOf(theme, outlined, fontScale);
+		$[14] = fontScale;
+		$[15] = outlined;
+		$[16] = theme;
+		$[17] = t1;
+	} else t1 = $[17];
+	const half = t1;
+	const T0 = View;
+	const t2 = composeStyles(styles.steppers, outlined ? styles.steppersOutlined : void 0);
+	const t3 = !canIncrement;
+	let t4;
+	if ($[18] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = /* @__PURE__ */ jsx(PlusGlyph, {});
+		$[18] = t4;
+	} else t4 = $[18];
+	let t5;
+	if ($[19] !== half || $[20] !== incrementLabel || $[21] !== onBlur || $[22] !== onFocus || $[23] !== outlined || $[24] !== t3 || $[25] !== up) {
+		t5 = /* @__PURE__ */ jsx(Stepper, {
+			...up,
+			"aria-label": incrementLabel,
+			half,
+			isDisabled: t3,
+			onBlur,
+			onFocus,
+			outlined,
+			place: "top",
+			children: t4
+		});
+		$[19] = half;
+		$[20] = incrementLabel;
+		$[21] = onBlur;
+		$[22] = onFocus;
+		$[23] = outlined;
+		$[24] = t3;
+		$[25] = up;
+		$[26] = t5;
+	} else t5 = $[26];
+	const t6 = !canDecrement;
+	let t7;
+	if ($[27] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = /* @__PURE__ */ jsx(MinusGlyph, {});
+		$[27] = t7;
+	} else t7 = $[27];
+	let t8;
+	if ($[28] !== decrementLabel || $[29] !== down || $[30] !== half || $[31] !== onBlur || $[32] !== onFocus || $[33] !== outlined || $[34] !== t6) {
+		t8 = /* @__PURE__ */ jsx(Stepper, {
+			...down,
+			"aria-label": decrementLabel,
+			half,
+			isDisabled: t6,
+			onBlur,
+			onFocus,
+			outlined,
+			place: "bottom",
+			children: t7
+		});
+		$[28] = decrementLabel;
+		$[29] = down;
+		$[30] = half;
+		$[31] = onBlur;
+		$[32] = onFocus;
+		$[33] = outlined;
+		$[34] = t6;
+		$[35] = t8;
+	} else t8 = $[35];
+	let t9;
+	if ($[36] !== T0 || $[37] !== t2 || $[38] !== t5 || $[39] !== t8) {
+		t9 = /* @__PURE__ */ jsxs(T0, {
+			style: t2,
+			children: [t5, t8]
+		});
+		$[36] = T0;
+		$[37] = t2;
+		$[38] = t5;
+		$[39] = t8;
+		$[40] = t9;
+	} else t9 = $[40];
+	return t9;
+}
+function steppersOf(props) {
+	return /* @__PURE__ */ jsx(Steppers, { ...props });
+}
+/**
+* A stepper's press handlers: a tap steps once, when it is released, and a
+* hold keeps stepping, from `SPIN_DELAY` on and every `SPIN_INTERVAL` after,
+* until the press ends or the value reaches its bound. A hold steps nothing
+* more on release, and a press the finger slides off steps nothing at all,
+* as React Aria's stepper does for a touch.
+*/
+function stepThen(step, onEdit) {
+	return () => {
+		step();
+		onEdit();
+	};
+}
+function useSpin(step, canStep) {
+	const $ = c(9);
+	let t0;
+	if ($[0] !== canStep || $[1] !== step) {
+		t0 = {
+			canStep,
+			step
+		};
+		$[0] = canStep;
+		$[1] = step;
+		$[2] = t0;
+	} else t0 = $[2];
+	const latest = useRef(t0);
+	const timer = useRef(void 0);
+	const spun = useRef(false);
+	let t1;
+	if ($[3] !== canStep || $[4] !== step) {
+		t1 = () => {
+			latest.current = {
+				canStep,
+				step
+			};
+		};
+		$[3] = canStep;
+		$[4] = step;
+		$[5] = t1;
+	} else t1 = $[5];
+	useEffect(t1);
+	let t2;
+	let t3;
+	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = () => () => {
+			clearTimeout(timer.current);
+		};
+		t3 = [];
+		$[6] = t2;
+		$[7] = t3;
+	} else {
+		t2 = $[6];
+		t3 = $[7];
+	}
+	useEffect(t2, t3);
+	let t4;
+	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+		const tick = () => {
+			if (!latest.current.canStep) return;
+			spun.current = true;
+			latest.current.step();
+			timer.current = setTimeout(tick, SPIN_INTERVAL);
+		};
+		t4 = {
+			onPress: () => {
+				if (!spun.current) latest.current.step();
+			},
+			onPressIn: () => {
+				clearTimeout(timer.current);
+				spun.current = false;
+				timer.current = setTimeout(tick, SPIN_DELAY);
+			},
+			onPressOut: () => {
+				clearTimeout(timer.current);
+			}
+		};
+		$[8] = t4;
+	} else t4 = $[8];
+	return t4;
+}
+/**
+* Says the field's text after a stepper press, once the field has written
+* it, on iOS and Android, where the screen reader stays on the stepper.
+* Wrap each step in what it returns.
+*/
+function useStepAnnouncement(text) {
+	const $ = c(4);
+	const pending = useRef(false);
+	let t0;
+	let t1;
+	if ($[0] !== text) {
+		t0 = () => {
+			if (pending.current) {
+				pending.current = false;
+				AccessibilityInfo.announceForAccessibility(text);
+			}
+		};
+		t1 = [text];
+		$[0] = text;
+		$[1] = t0;
+		$[2] = t1;
+	} else {
+		t0 = $[1];
+		t1 = $[2];
+	}
+	useEffect(t0, t1);
+	let t2;
+	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = (step) => () => {
+			pending.current = Platform.OS === "ios" || Platform.OS === "android";
+			step();
+		};
+		$[3] = t2;
+	} else t2 = $[3];
+	return t2;
+}
+//#endregion
+export { NumberField };
+
+//# sourceMappingURL=index.js.map