@rivetjs/cdk 0.0.0-stage → 0.1.0-alpha.0

package/number-field/behaviour.jsx

@@ -0,0 +1,512 @@
+// Ported from react-aria `useNumberField` (packages/react-aria/src/numberfield/useNumberField.ts), Apache-2.0, © Adobe.
+// Rivet:
+// - `useNumberField(props, state, inputRef)` → `numberFieldProps(props, state)`: RA's bags (`labelProps`, `groupProps`,
+//   `inputProps`, `incrementButtonProps`, `decrementButtonProps`, `descriptionProps`, `errorMessageProps`) as
+//   attributes; values that change are accessors (resumable: this module is `.tsx`, so they are R2 functions).
+//   RA's handlers are free functions `numberField<Event>(event, props, state, aria)`; the component binds them from
+//   inline arrows. `aria` = `NumberFieldAria` (the returned object: ids + the spin button's JSON state).
+// - State = `createNumberFieldState` (`../number/number-field-state.tsx`, free functions); `state.validation` is the
+//   field's form validation (RA `privateValidationStateProp`).
+// - useFormattedTextField (C4b `../text-field/behaviour.tsx`): the `beforeinput` / composition filters are its
+//   `formattedTextField*` handlers; RA's text field `onChange` = native `input` (`numberFieldInput`).
+// - useScrollWheel: RA attaches a non-passive wheel listener to the input in an effect and ignores wheels unless
+//   focus is within the group. Here the listener is attached when focus enters the group (`numberFieldGroupFocusIn`)
+//   and removed when it leaves — same behaviour, no code before interaction.
+// - `inputMode` depends on the platform (iPhone / Android): server renders `numeric` (probes are `undefined` there);
+//   the focus handler sets the platform value before the software keyboard opens.
+// - `flushSync(commit)` + DOM value compare (`commitAndAnnounce`) → compare `inputValue(state)` before / after.
+// - useNativeValidation (layout effect, `commitBehavior: 'validate'`) runs from the handlers after each change
+//   (`numberFieldNativeValidation`), not on mount: a server-rendered out-of-range value shows invalid after the first
+//   interaction (aria behaviour).
+// - useFormReset → `onFormReset` (form/behaviour.ts) attached by the first input handler.
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+import { untrack } from "@rivetjs/reactivity";
+import { createId } from "../utils/id.js";
+import { announce } from "../announcer/live-announcer.js";
+import { formatMessage } from "../_adapters/intl.js";
+import { focusBlur, focusFocus, focusWithinBlur, focusWithinFocus } from "../interactions/focus.jsx";
+import { keyboardKeyDown, keyboardKeyUp } from "../interactions/keyboard.jsx";
+import { getActiveElement, getEventTarget, getOwnerDocument, isAndroid, isIOS, isIPhone, read } from "../interactions/utils.js";
+import { scrollWheel } from "../interactions/scroll-wheel.jsx";
+import { describedBy, fieldProps } from "../label/behaviour.js";
+import { onFormReset, syncValidity, validationInvalid } from "../form/behaviour.js";
+import { commitValidation, displayValidation, realtimeValidation, updateValidation } from "../state/form-validation.js";
+import { formattedTextFieldBeforeInput, formattedTextFieldCompositionEnd, formattedTextFieldCompositionStart, } from "../text-field/behaviour.jsx";
+import { NumberFormatter } from "../number/NumberFormatter.js";
+import { canDecrement, canIncrement, commit, decrement, decrementToMin, increment, incrementToMax, inputValue, maxValue, minValue, numberValue, setInputValue, setNumberValue, validate, } from "../number/number-field-state.jsx";
+import { createSpinButtonState, spinButtonBlur, spinButtonDecrementPressEnd, spinButtonDecrementPressStart, spinButtonDecrementPressUp, spinButtonDispose, spinButtonFocus, spinButtonIncrementPressEnd, spinButtonIncrementPressStart, spinButtonIncrementPressUp, spinButtonKeyDown, spinButtonKeyUp, } from "../spinbutton/behaviour.jsx";
+import { strings } from "./intl.js";
+/** RA `textValue`: the number formatted without `currencySign: 'accounting'` (announced with a minus sign). */
+export function numberFieldTextValue(props, state) {
+    const value = numberValue(state);
+    return isNaN(value) ? "" : new NumberFormatter(read(props.locale), { ...read(props.formatOptions), currencySign: undefined }).format(value);
+}
+/** RA `inputMode`: numeric / decimal / text by platform and whether negative / fractional numbers are allowed. */
+export function numberFieldInputMode(props, state) {
+    const intlOptions = new NumberFormatter(read(props.locale), read(props.formatOptions)).resolvedOptions();
+    // The inputMode attribute influences the software keyboard that is shown on touch devices.
+    // Browsers and operating systems are quite inconsistent about what keys are available, however.
+    // We choose between numeric and decimal based on whether we allow negative and fractional numbers,
+    // and based on testing on various devices to determine what keys are available in each inputMode.
+    const hasDecimals = (intlOptions.maximumFractionDigits ?? 0) > 0;
+    const min = minValue(state);
+    const hasNegative = min === undefined || isNaN(min) || min < 0;
+    let inputMode = "numeric";
+    if (isIPhone()) {
+        // iPhone doesn't have a minus sign in either numeric or decimal.
+        // Note this is only for iPhone, not iPad, which always has both
+        // minus and decimal in numeric.
+        if (hasNegative) {
+            inputMode = "text";
+        }
+        else if (hasDecimals) {
+            inputMode = "decimal";
+        }
+    }
+    else if (isAndroid()) {
+        // Android numeric has both a decimal point and minus key.
+        // decimal does not have a minus key.
+        if (hasNegative) {
+            inputMode = "numeric";
+        }
+        else if (hasDecimals) {
+            inputMode = "decimal";
+        }
+    }
+    return inputMode;
+}
+/** A live `isRequired` as a `required` / `aria-required` value (a returned arrow: resumable); `undefined` when the
+ *  validation behaviour does not use that attribute. */
+function requiredWhen(isRequired, applies) {
+    if (!applies)
+        return undefined;
+    return () => !!isRequired() || undefined;
+}
+/** The spin button props RA passes to useSpinButton (built at event time: browser-only closures). */
+export function numberFieldSpinProps(props, state) {
+    return {
+        isDisabled: props.isDisabled,
+        isReadOnly: props.isReadOnly,
+        isRequired: props.isRequired,
+        maxValue: () => maxValue(state),
+        minValue: () => minValue(state),
+        onIncrement: () => increment(state),
+        onIncrementToMax: () => incrementToMax(state),
+        onDecrement: () => decrement(state),
+        onDecrementToMin: () => decrementToMin(state),
+        value: () => numberValue(state),
+        textValue: () => numberFieldTextValue(props, state),
+        locale: props.locale,
+    };
+}
+/**
+ * Provides the behavior and accessibility implementation for a number field component. Number
+ * fields allow users to enter a number, and increment or decrement the value using stepper
+ * buttons (RA `useNumberField`).
+ */
+export function numberFieldProps(props, state) {
+    const { decrementAriaLabel, incrementAriaLabel, isRequired, autoFocus, placeholder } = props;
+    const isDisabled = () => !!read(props.isDisabled);
+    const isReadOnly = () => !!read(props.isReadOnly);
+    const inputId = props.id ?? createId();
+    const field = fieldProps({ ...props, id: inputId });
+    const behaviour = state.validation.behavior;
+    const isInvalid = () => displayValidation(state.validation).isInvalid;
+    const locale = () => read(props.locale);
+    // Determine the label for the increment and decrement buttons. There are 4 cases:
+    //
+    // 1. With a visible label that is a string: aria-label: `Increase ${props.label}`
+    // 2. With a visible label that is JSX: aria-label: 'Increase', aria-labelledby: '${incrementId} ${labelId}'
+    // 3. With an aria-label: aria-label: `Increase ${props['aria-label']}`
+    // 4. With an aria-labelledby: aria-label: 'Increase', aria-labelledby: `${incrementId} ${props['aria-labelledby']}`
+    //
+    // (1) and (2) could possibly be combined and both use aria-labelledby. However, placing the label in
+    // the aria-label string rather than using aria-labelledby gives more flexibility to translators to change
+    // the order or add additional words around the label if needed.
+    const fieldLabel = props["aria-label"] || (typeof props.label === "string" ? props.label : "");
+    let ariaLabelledby;
+    if (!fieldLabel) {
+        ariaLabelledby = props.label != null && props.label !== false ? field.labelProps.id : props["aria-labelledby"];
+    }
+    const incrementId = createId();
+    const decrementId = createId();
+    const ids = { ...field, inputId, incrementId, decrementId };
+    // Rivet: the closures capture plain values only (an arrow passed as an argument is not resumable).
+    const buttonProps = (id, ariaLabel, key) => ({
+        "aria-label": () => ariaLabel || formatMessage(strings, locale(), key, { fieldLabel }).trim(),
+        id: ariaLabelledby && !ariaLabel ? id : undefined,
+        "aria-labelledby": ariaLabelledby && !ariaLabel ? `${id} ${ariaLabelledby}` : undefined,
+        "aria-controls": inputId,
+        excludeFromTabOrder: true,
+        preventFocusOnPress: true,
+        allowFocusWhenDisabled: true,
+        isDisabled: () => !(key === "increase" ? canIncrement(state) : canDecrement(state)),
+    });
+    return {
+        groupProps: {
+            role: "group",
+            "aria-disabled": () => isDisabled() || undefined,
+            "aria-invalid": () => (isInvalid() ? "true" : undefined),
+        },
+        labelProps: { ...field.labelProps },
+        inputProps: {
+            id: inputId,
+            type: "text", // Can't use type="number" because then we can't have things like $ in the field.
+            inputMode: () => numberFieldInputMode(props, state),
+            value: () => inputValue(state),
+            autoComplete: "off",
+            autoCorrect: "off",
+            spellCheck: "false",
+            // ignore aria-roledescription on iOS so that required state will announce when it is present
+            "aria-roledescription": () => (!isIOS() ? formatMessage(strings, locale(), "numberField") : undefined),
+            placeholder,
+            autoFocus,
+            disabled: () => isDisabled() || undefined,
+            readOnly: () => isReadOnly() || undefined,
+            required: typeof isRequired === "function" ? requiredWhen(isRequired, behaviour === "native") : (isRequired && behaviour === "native") || undefined,
+            // useSpinButton's aria-disabled / aria-readonly / aria-required survive the merge (role and aria-value* are reset).
+            "aria-disabled": () => isDisabled() || undefined,
+            "aria-readonly": () => isReadOnly() || undefined,
+            "aria-required": typeof isRequired === "function" ? requiredWhen(isRequired, behaviour !== "native") : behaviour === "native" ? undefined : isRequired || undefined,
+            "aria-invalid": () => isInvalid() || undefined,
+            "aria-errormessage": props["aria-errormessage"],
+            "aria-label": field.fieldProps["aria-label"],
+            "aria-labelledby": field.fieldProps["aria-labelledby"],
+            "aria-describedby": () => describedBy(field, isInvalid()),
+            "aria-details": props["aria-details"],
+            // RA merges these user events into inputProps unchanged (the others run through the handlers below).
+            onCopy: props.onCopy,
+            onCut: props.onCut,
+            onSelect: props.onSelect,
+            onCompositionUpdate: props.onCompositionUpdate,
+        },
+        incrementButtonProps: buttonProps(incrementId, incrementAriaLabel, "increase"),
+        decrementButtonProps: buttonProps(decrementId, decrementAriaLabel, "decrease"),
+        descriptionProps: { id: field.descriptionId },
+        errorMessageProps: { id: field.errorMessageId },
+        isInvalid,
+        validationErrors: () => displayValidation(state.validation).validationErrors,
+        validationDetails: () => displayValidation(state.validation).validationDetails,
+        ids,
+        spin: createSpinButtonState(),
+        within: { isFocusWithin: false, globals: [] },
+        edit: { changed: false },
+    };
+}
+const formatted = (state) => ({
+    validate: (value) => validate(state, value),
+    setInputValue: (value) => setInputValue(state, value),
+});
+const inputOf = (aria, from) => getOwnerDocument(from).getElementById(aria.ids.inputId);
+// One native number input to compute min / max / step validity (RA module-level `numberInput`).
+const native = { input: null };
+/**
+ * RA `useNativeValidation` (commitBehavior 'validate'): validity of min / max / step from a native number input,
+ * merged with the text input's validity (browser messages, no own translations).
+ */
+export function numberFieldNativeValidation(props, state, input) {
+    if (props.commitBehavior !== "validate" || untrack(() => realtimeValidation(state.validation)).isInvalid || !input || input.disabled) {
+        return;
+    }
+    // Create a native number input and use it to implement validation of min/max/step.
+    // This lets us get the native validation message provided by the browser instead of needing our own translations.
+    if (!native.input) {
+        native.input = input.ownerDocument.createElement("input");
+        native.input.type = "number";
+    }
+    const numberInput = native.input;
+    if (!numberInput)
+        return;
+    const min = untrack(() => minValue(state));
+    const max = untrack(() => maxValue(state));
+    const step = read(props.step);
+    const value = untrack(() => numberValue(state));
+    numberInput.min = min != null && !isNaN(min) ? String(min) : "";
+    numberInput.max = max != null && !isNaN(max) ? String(max) : "";
+    numberInput.step = step != null && !isNaN(step) ? String(step) : "";
+    numberInput.value = value != null && !isNaN(value) ? String(value) : "";
+    // Merge validity with the visible text input (for other validations like required).
+    const valid = input.validity.valid && numberInput.validity.valid;
+    const validationMessage = input.validationMessage || numberInput.validationMessage;
+    updateValidation(state.validation, {
+        isInvalid: !valid,
+        validationErrors: validationMessage ? [validationMessage] : [],
+        validationDetails: {
+            badInput: input.validity.badInput,
+            customError: input.validity.customError,
+            patternMismatch: input.validity.patternMismatch,
+            rangeOverflow: numberInput.validity.rangeOverflow,
+            rangeUnderflow: numberInput.validity.rangeUnderflow,
+            stepMismatch: numberInput.validity.stepMismatch,
+            tooLong: input.validity.tooLong,
+            tooShort: input.validity.tooShort,
+            typeMismatch: input.validity.typeMismatch,
+            valueMissing: input.validity.valueMissing,
+            valid,
+        },
+    });
+    // Block form submission if validation behavior is native.
+    // This won't overwrite any user-defined validation message because we checked realtimeValidation above.
+    if (props.validationBehavior === "native" && !numberInput.validity.valid) {
+        input.setCustomValidity(numberInput.validationMessage);
+    }
+}
+/** After a state change: native custom validity (RA render-time useFormValidation layout effect) + useNativeValidation. */
+function afterChange(props, state, input) {
+    if (!input)
+        return;
+    // Bindings update the DOM synchronously; the constraint validity reads the new value.
+    syncValidity(state.validation, input);
+    numberFieldNativeValidation(props, state, input);
+}
+function attachReset(props, state, input) {
+    // RA useFormReset(inputRef, state.defaultNumberValue, state.setNumberValue)
+    onFormReset(state, input, () => setNumberValue(state, state.defaultNumberValue));
+    void props;
+}
+/** RA text field `onChange` (native `input`): accept the text if it is a valid partial number. */
+export function numberFieldInput(event, props, state, _aria) {
+    const input = getEventTarget(event);
+    attachReset(props, state, input);
+    const value = input.value;
+    if (validate(state, value)) {
+        setInputValue(state, value);
+    }
+    else {
+        // React re-renders the controlled input with the previous text.
+        const previous = untrack(() => inputValue(state));
+        if (input.value !== previous)
+            input.value = previous;
+    }
+    afterChange(props, state, input);
+    props.onInput?.(event);
+}
+/**
+ * Native `change` (RA useFormValidation change listener): commit the validation. RA defers that commit to after the
+ * next render, so it sees the validity of the blur's number commit (`change` fires before `blur`): the blur handler
+ * commits again when a change was committed during this edit.
+ */
+export function numberFieldChange(event, props, state, aria) {
+    commitNumberValidation(props, state, event.currentTarget);
+    if (aria)
+        aria.edit.changed = true;
+}
+/** `invalid` (form submit / checkValidity). */
+export function numberFieldInvalid(event, props, state) {
+    const shown = untrack(() => displayValidation(state.validation)).isInvalid;
+    validationInvalid(state.validation, event);
+    // The shared commit re-synced the text input's own validity only: merge min / max / step again (useNativeValidation).
+    if (!shown)
+        commitNumberValidation(props, state, event.target);
+}
+/**
+ * RA useFormValidation commit: the render after it runs useFormValidation's layout effect (custom validity + native
+ * validity) and then useNativeValidation's (min / max / step), then commits — `afterChange` + `commitValidation`.
+ */
+function commitNumberValidation(props, state, input) {
+    afterChange(props, state, input);
+    commitValidation(state.validation);
+}
+/** RA `commitAndAnnounce`: commit the input, announce the normalized text when it changed. */
+export function numberFieldCommitAndAnnounce(props, state, input) {
+    const oldValue = input?.value ?? "";
+    // Set input value to normalized valid value
+    commit(state);
+    const newValue = untrack(() => inputValue(state));
+    if (input && input.value !== newValue)
+        input.value = newValue;
+    if (newValue !== oldValue) {
+        announce(newValue, "assertive");
+    }
+    afterChange(props, state, input);
+}
+/** focus of the input: spin button focus, native custom validity, the platform input mode, user focus events. */
+export function numberFieldFocus(event, props, state, aria) {
+    const input = event.currentTarget;
+    spinButtonFocus(event, numberFieldSpinProps(props, state), aria.spin);
+    const inputMode = untrack(() => numberFieldInputMode(props, state));
+    if (input.inputMode !== inputMode)
+        input.inputMode = inputMode;
+    attachReset(props, state, input);
+    syncValidity(state.validation, input);
+    if (props.onFocus || props.onFocusChange)
+        focusFocus(props, event);
+}
+/** blur of the input (RA chain: spin button onBlur, useFocus onBlur → commitAndAnnounce, text field onBlur). */
+export function numberFieldBlur(event, props, state, aria) {
+    spinButtonBlur(event, numberFieldSpinProps(props, state), aria.spin);
+    if (getEventTarget(event) === event.currentTarget) {
+        const input = event.currentTarget;
+        numberFieldCommitAndAnnounce(props, state, input);
+        if (aria.edit.changed)
+            commitNumberValidation(props, state, input);
+    }
+    aria.edit.changed = false;
+    if (props.onBlur || props.onFocusChange)
+        focusBlur(props, event);
+}
+/** keydown of the input: spin button shortcuts, then Enter commits (RA `useKeyboard` + user `onKeyDown`). */
+export function numberFieldKeyDown(event, props, state, aria) {
+    const input = event.currentTarget;
+    spinButtonKeyDown(event, numberFieldSpinProps(props, state), aria.spin);
+    keyboardKeyDown({
+        isDisabled: read(props.isDisabled) || read(props.isReadOnly),
+        shortcuts: {
+            Enter: () => {
+                commit(state);
+                const value = untrack(() => inputValue(state));
+                if (input.value !== value)
+                    input.value = value;
+                // useFormValidationState commitValidation
+                commitNumberValidation(props, state, input);
+                return { shouldPreventDefault: false };
+            },
+        },
+        onKeyDown: props.onKeyDown,
+    }, event);
+}
+/** keyup of the input. */
+export function numberFieldKeyUp(event, props, state, aria) {
+    spinButtonKeyUp(event, numberFieldSpinProps(props, state), aria.spin);
+    keyboardKeyUp({ isDisabled: read(props.isDisabled) || read(props.isReadOnly), shortcuts: {}, onKeyUp: props.onKeyUp }, event);
+}
+/** RA `onPaste`: a paste replacing the whole text commits it at once (the user sees the formatted result). */
+export function numberFieldPaste(event, props, state) {
+    props.onPaste?.(event);
+    const inputElement = getEventTarget(event);
+    // we can only handle the case where the paste takes over the entire input, otherwise things get very complicated
+    // trying to calculate the new string based on what the paste is replacing and where in the source string it is
+    if (inputElement && (inputElement.selectionEnd ?? -1) - (inputElement.selectionStart ?? 0) === inputElement.value.length) {
+        event.preventDefault();
+        // commit so that the user gets to see what it formats to immediately
+        // paste happens before inputRef's value is updated, so have to prevent the default and do it ourselves
+        // spin button will then handle announcing the new value, this should work with controlled state as well
+        // because the announcement is done as a result of the new rendered input value if there is one
+        commit(state, event.clipboardData?.getData?.("text/plain")?.trim() ?? "");
+        const value = untrack(() => inputValue(state));
+        if (inputElement.value !== value)
+            inputElement.value = value;
+        afterChange(props, state, inputElement);
+    }
+}
+/** beforeinput (useFormattedTextField): cancel input that would make an invalid partial number. */
+export function numberFieldBeforeInput(event, props, state) {
+    formattedTextFieldBeforeInput(event, formatted(state));
+    props.onBeforeInput?.(event);
+}
+export function numberFieldCompositionStart(event, props, _state) {
+    formattedTextFieldCompositionStart(event);
+    props.onCompositionStart?.(event);
+}
+export function numberFieldCompositionEnd(event, props, state) {
+    formattedTextFieldCompositionEnd(event, formatted(state));
+    props.onCompositionEnd?.(event);
+}
+/** RA `onWheel`: vertical wheel increments / decrements (trackpad: mostly-horizontal motion is ignored). */
+export function numberFieldScroll(e, state) {
+    // if on a trackpad, users can scroll in both X and Y at once, check the magnitude of the change
+    // if it's mostly in the X direction, then just return, the user probably doesn't mean to inc/dec
+    // this isn't perfect, events come in fast with small deltas and a part of the scroll may give a false indication
+    // especially if the user is scrolling near 45deg
+    if (Math.abs(e.deltaY) <= Math.abs(e.deltaX)) {
+        return;
+    }
+    if (e.deltaY > 0) {
+        increment(state);
+    }
+    else if (e.deltaY < 0) {
+        decrement(state);
+    }
+}
+/** focusin of the group (RA useFocusWithin): focus within → the input's non-passive wheel listener (useScrollWheel). */
+export function numberFieldGroupFocusIn(event, props, state, aria) {
+    focusWithinFocus({
+        props: {
+            isDisabled: props.isDisabled,
+            onFocusWithinChange: (isFocusWithin) => {
+                if (!isFocusWithin)
+                    return;
+                const input = inputOf(aria, event.currentTarget);
+                if (!input)
+                    return;
+                const listener = (e) => {
+                    // If the input isn't supposed to receive input, disable scrolling.
+                    const disabled = read(props.isWheelDisabled) || read(props.isDisabled) || read(props.isReadOnly) || !aria.within.isFocusWithin;
+                    scrollWheel({ isDisabled: disabled, onScroll: (s) => numberFieldScroll(s, state) }, e);
+                };
+                input.addEventListener("wheel", listener, { passive: false });
+                aria.within.globals.push(() => input.removeEventListener("wheel", listener));
+            },
+        },
+        state: aria.within,
+    }, event);
+}
+/** focusout of the group. */
+export function numberFieldGroupFocusOut(event, props, _state, aria) {
+    focusWithinBlur({ props: { isDisabled: props.isDisabled }, state: aria.within }, event);
+}
+/**
+ * RA `onButtonPressStart` (both stepper buttons): keep focus on the input if it has it (software keyboard stays);
+ * a mouse moves focus to the input; touch / screen reader focus the button.
+ */
+export function numberFieldButtonPressStart(e, _props, _state, aria) {
+    const input = inputOf(aria, e.target);
+    // If focus is already on the input, keep it there so we don't hide the
+    // software keyboard when tapping the increment/decrement buttons.
+    if (getActiveElement(getOwnerDocument(e.target)) === input) {
+        return;
+    }
+    // Otherwise, when using a mouse, move focus to the input.
+    // On touch, or with a screen reader, focus the button so that the software
+    // keyboard does not appear and the screen reader cursor is not moved off the button.
+    if (e.pointerType === "mouse") {
+        input?.focus();
+    }
+    else {
+        e.target.focus();
+    }
+}
+// Stepper buttons (RA mergeProps(incButtonProps, { onPressStart: onButtonPressStart, onFocus, onBlur })).
+export function numberFieldIncrementPressStart(e, props, state, aria) {
+    spinButtonIncrementPressStart(e, numberFieldSpinProps(props, state), aria.spin);
+    numberFieldButtonPressStart(e, props, state, aria);
+}
+export function numberFieldIncrementPressUp(e, props, state, aria) {
+    spinButtonIncrementPressUp(e, numberFieldSpinProps(props, state), aria.spin);
+}
+export function numberFieldIncrementPressEnd(e, props, state, aria) {
+    spinButtonIncrementPressEnd(e, numberFieldSpinProps(props, state), aria.spin);
+}
+export function numberFieldDecrementPressStart(e, props, state, aria) {
+    spinButtonDecrementPressStart(e, numberFieldSpinProps(props, state), aria.spin);
+    numberFieldButtonPressStart(e, props, state, aria);
+}
+export function numberFieldDecrementPressUp(e, props, state, aria) {
+    spinButtonDecrementPressUp(e, numberFieldSpinProps(props, state), aria.spin);
+}
+export function numberFieldDecrementPressEnd(e, props, state, aria) {
+    spinButtonDecrementPressEnd(e, numberFieldSpinProps(props, state), aria.spin);
+}
+/** focus / blur of a stepper button (useSpinButton's onFocus / onBlur). */
+export function numberFieldButtonFocus(e, props, state, aria) {
+    spinButtonFocus(e, numberFieldSpinProps(props, state), aria.spin);
+}
+export function numberFieldButtonBlur(e, props, state, aria) {
+    spinButtonBlur(e, numberFieldSpinProps(props, state), aria.spin);
+}
+/** RA unmount cleanup (spin timers, global listeners, wheel listener). */
+export function numberFieldDispose(aria) {
+    spinButtonDispose(aria.spin);
+    for (const remove of aria.within.globals.splice(0))
+        remove();
+}

package/number-field/index.d.ts

@@ -0,0 +1,52 @@
+import { type DOMRenderProps } from "../utils/render.js";
+import { type GlobalDOMAttributes } from "../utils/dom-props.js";
+import { type ContextValue, type RACValidation, type RefValue, type RenderProps, type SlotProps } from "../slots/index.jsx";
+import { type NumberFieldState } from "../number/number-field-state.jsx";
+import { type AriaNumberFieldProps } from "./behaviour.jsx";
+export * from "./behaviour.jsx";
+export type { NumberFieldState } from "../number/number-field-state.jsx";
+export interface NumberFieldRenderProps {
+    /**
+     * Whether the number field is disabled.
+     *
+     * @selector [data-disabled]
+     */
+    isDisabled: () => boolean;
+    /**
+     * Whether the number field is invalid.
+     *
+     * @selector [data-invalid]
+     */
+    isInvalid: () => boolean;
+    /**
+     * Whether the number field is read only.
+     *
+     * @selector [data-readonly]
+     */
+    isReadOnly: () => boolean;
+    /**
+     * Whether the number field is required.
+     *
+     * @selector [data-required]
+     */
+    isRequired: () => boolean;
+    /** State of the number field. */
+    state: NumberFieldState;
+}
+export interface NumberFieldProps extends Omit<AriaNumberFieldProps, "label" | "placeholder" | "description" | "errorMessage" | "validationState" | "validationBehavior" | "locale">, RACValidation, RenderProps<NumberFieldRenderProps>, SlotProps, DOMRenderProps<"div", NumberFieldRenderProps>, Omit<GlobalDOMAttributes<HTMLDivElement>, "style" | "onFocus" | "onBlur" | "onKeyDown" | "onKeyUp" | "onCopy" | "onCut" | "onPaste" | "onCompositionStart" | "onCompositionEnd" | "onCompositionUpdate" | "onSelect" | "onBeforeInput" | "onInput"> {
+    /**
+     * The CSS class for the element. A function may be provided to compute the class based on component state.
+     *
+     * @default 'rv-NumberField'
+     */
+    class?: RenderProps<NumberFieldRenderProps>["class"];
+    ref?: RefValue<HTMLDivElement>;
+}
+/** RAC `NumberFieldContext`. */
+export declare const NumberFieldContext: import("@rivetjs/reactivity").Context<ContextValue<Partial<NumberFieldProps>, HTMLDivElement>>;
+/** RAC `NumberFieldStateContext`. */
+export declare const NumberFieldStateContext: import("@rivetjs/reactivity").Context<NumberFieldState | null>;
+/**
+ * A number field allows a user to enter a number, and increment or decrement the value using stepper buttons.
+ */
+export declare function NumberField(props: NumberFieldProps): import("@rivetjs/runtime/jsx-runtime").CompiledElement | null;