@base-ui/react 1.1.0 → 1.3.0

package/number-field/group/NumberFieldGroup.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { NumberFieldRoot } from "../root/NumberFieldRoot.js";
+import type { NumberFieldRootState } from "../root/NumberFieldRoot.js";
 import type { BaseUIComponentProps } from "../../utils/types.js";
 /**
  * Groups the input with the increment and decrement buttons.
@@ -8,8 +8,8 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  * Documentation: [Base UI Number Field](https://base-ui.com/react/components/number-field)
  */
 export declare const NumberFieldGroup: React.ForwardRefExoticComponent<Omit<NumberFieldGroupProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export interface NumberFieldGroupState extends NumberFieldRoot.State {}
-export interface NumberFieldGroupProps extends BaseUIComponentProps<'div', NumberFieldGroup.State> {}
+export interface NumberFieldGroupState extends NumberFieldRootState {}
+export interface NumberFieldGroupProps extends BaseUIComponentProps<'div', NumberFieldGroupState> {}
 export declare namespace NumberFieldGroup {
   type State = NumberFieldGroupState;
   type Props = NumberFieldGroupProps;

package/number-field/increment/NumberFieldIncrement.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { BaseUIComponentProps, NativeButtonProps } from "../../utils/types.js";
-import type { NumberFieldRoot } from "../root/NumberFieldRoot.js";
+import type { NumberFieldRootState } from "../root/NumberFieldRoot.js";
 /**
  * A stepper button that increases the field value when clicked.
  * Renders an `<button>` element.
@@ -8,8 +8,8 @@ import type { NumberFieldRoot } from "../root/NumberFieldRoot.js";
  * Documentation: [Base UI Number Field](https://base-ui.com/react/components/number-field)
  */
 export declare const NumberFieldIncrement: React.ForwardRefExoticComponent<Omit<NumberFieldIncrementProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
-export interface NumberFieldIncrementState extends NumberFieldRoot.State {}
-export interface NumberFieldIncrementProps extends NativeButtonProps, BaseUIComponentProps<'button', NumberFieldIncrement.State> {}
+export interface NumberFieldIncrementState extends NumberFieldRootState {}
+export interface NumberFieldIncrementProps extends NativeButtonProps, BaseUIComponentProps<'button', NumberFieldIncrementState> {}
 export declare namespace NumberFieldIncrement {
   type State = NumberFieldIncrementState;
   type Props = NumberFieldIncrementProps;

package/number-field/input/NumberFieldInput.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { BaseUIComponentProps } from "../../utils/types.js";
-import type { NumberFieldRoot } from "../root/NumberFieldRoot.js";
+import type { NumberFieldRootState } from "../root/NumberFieldRoot.js";
 /**
  * The native input control in the number field.
  * Renders an `<input>` element.
@@ -8,8 +8,8 @@ import type { NumberFieldRoot } from "../root/NumberFieldRoot.js";
  * Documentation: [Base UI Number Field](https://base-ui.com/react/components/number-field)
  */
 export declare const NumberFieldInput: React.ForwardRefExoticComponent<Omit<NumberFieldInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
-export interface NumberFieldInputState extends NumberFieldRoot.State {}
-export interface NumberFieldInputProps extends BaseUIComponentProps<'input', NumberFieldInput.State> {
+export interface NumberFieldInputState extends NumberFieldRootState {}
+export interface NumberFieldInputProps extends BaseUIComponentProps<'input', NumberFieldInputState> {
   /**
    * A string value that provides a user-friendly name for the role of the input.
    * @default 'Number field'

package/number-field/input/NumberFieldInput.js

@@ -200,8 +200,8 @@ const NumberFieldInput = exports.NumberFieldInput = /*#__PURE__*/React.forwardRe
         return;
       }
 
-      // For trusted user typing, update the input text immediately and only fire onValueChange
-      // if the typed value is currently parseable into a number. This preserves good UX for IME
+      // Update the input text immediately and only fire onValueChange if the typed value is
+      // currently parseable into a number. This preserves good UX for IME
       // composition/partial input while still providing live numeric updates when possible.
       const allowedNonNumericKeys = getAllowedNonNumericKeys();
       const isValidCharacterString = Array.from(targetValue).every(ch => {
@@ -216,17 +216,9 @@ const NumberFieldInput = exports.NumberFieldInput = /*#__PURE__*/React.forwardRe
       if (!isValidCharacterString) {
         return;
       }
-      if (event.isTrusted) {
-        setInputValue(targetValue);
-        const parsedValue = (0, _parse.parseNumber)(targetValue, locale, formatOptionsRef.current);
-        if (parsedValue !== null) {
-          setValue(parsedValue, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.inputChange, event.nativeEvent));
-        }
-        return;
-      }
       const parsedValue = (0, _parse.parseNumber)(targetValue, locale, formatOptionsRef.current);
+      setInputValue(targetValue);
       if (parsedValue !== null) {
-        setInputValue(targetValue);
         setValue(parsedValue, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.inputChange, event.nativeEvent));
       }
     },

package/number-field/root/NumberFieldRoot.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { FieldRoot } from "../../field/root/FieldRoot.js";
+import type { FieldRootState } from "../../field/root/FieldRoot.js";
 import type { BaseUIComponentProps } from "../../utils/types.js";
 import type { ChangeEventCustomProperties } from "../utils/types.js";
 import { type BaseUIChangeEventDetails, type BaseUIGenericEventDetails } from "../../utils/createBaseUIEventDetails.js";
@@ -15,92 +15,99 @@ export interface NumberFieldRootProps extends Omit<BaseUIComponentProps<'div', N
   /**
    * The id of the input element.
    */
-  id?: string;
+  id?: string | undefined;
   /**
    * The minimum value of the input element.
    */
-  min?: number;
+  min?: number | undefined;
   /**
    * The maximum value of the input element.
    */
-  max?: number;
+  max?: number | undefined;
+  /**
+   * When true, direct text entry may be outside the `min`/`max` range without clamping,
+   * so native range underflow/overflow validation can occur.
+   * Step-based interactions (keyboard arrows, buttons, wheel, scrub) still clamp.
+   * @default false
+   */
+  allowOutOfRange?: boolean | undefined;
   /**
    * The small step value of the input element when incrementing while the meta key is held. Snaps
    * to multiples of this value.
    * @default 0.1
    */
-  smallStep?: number;
+  smallStep?: number | undefined;
   /**
    * Amount to increment and decrement with the buttons and arrow keys, or to scrub with pointer movement in the scrub area.
    * To always enable step validation on form submission, specify the `min` prop explicitly in conjunction with this prop.
    * Specify `step="any"` to always disable step validation.
    * @default 1
    */
-  step?: number | 'any';
+  step?: number | 'any' | undefined;
   /**
    * The large step value of the input element when incrementing while the shift key is held. Snaps
    * to multiples of this value.
    * @default 10
    */
-  largeStep?: number;
+  largeStep?: number | undefined;
   /**
    * Whether the user must enter a value before submitting a form.
    * @default false
    */
-  required?: boolean;
+  required?: boolean | undefined;
   /**
    * Whether the component should ignore user interaction.
    * @default false
    */
-  disabled?: boolean;
+  disabled?: boolean | undefined;
   /**
    * Whether the user should be unable to change the field value.
    * @default false
    */
-  readOnly?: boolean;
+  readOnly?: boolean | undefined;
   /**
    * Identifies the field when a form is submitted.
    */
-  name?: string;
+  name?: string | undefined;
   /**
    * The raw numeric value of the field.
    */
-  value?: number | null;
+  value?: number | null | undefined;
   /**
    * The uncontrolled value of the field when it’s initially rendered.
    *
    * To render a controlled number field, use the `value` prop instead.
    */
-  defaultValue?: number;
+  defaultValue?: number | undefined;
   /**
    * Whether to allow the user to scrub the input value with the mouse wheel while focused and
    * hovering over the input.
    * @default false
    */
-  allowWheelScrub?: boolean;
+  allowWheelScrub?: boolean | undefined;
   /**
    * Whether the value should snap to the nearest step when incrementing or decrementing.
    * @default false
    */
-  snapOnStep?: boolean;
+  snapOnStep?: boolean | undefined;
   /**
    * Options to format the input value.
    */
-  format?: Intl.NumberFormatOptions;
+  format?: Intl.NumberFormatOptions | undefined;
   /**
    * Callback fired when the number value changes.
    *
    * The `eventDetails.reason` indicates what triggered the change:
    * - `'input-change'` for parseable typing or programmatic text updates
    * - `'input-clear'` when the field becomes empty
-   * - `'input-blur'` when formatting or clamping occurs on blur
+   * - `'input-blur'` when formatting (and clamping, if enabled) occurs on blur
    * - `'input-paste'` for paste interactions
    * - `'keyboard'` for keyboard input
    * - `'increment-press'` / `'decrement-press'` for button presses on the increment and decrement controls
    * - `'wheel'` for wheel-based scrubbing
    * - `'scrub'` for scrub area drags
    */
-  onValueChange?: (value: number | null, eventDetails: NumberFieldRoot.ChangeEventDetails) => void;
+  onValueChange?: ((value: number | null, eventDetails: NumberFieldRoot.ChangeEventDetails) => void) | undefined;
   /**
    * Callback function that is fired when the value is committed.
    * It runs later than `onValueChange`, when:
@@ -111,18 +118,18 @@ export interface NumberFieldRootProps extends Omit<BaseUIComponentProps<'div', N
    *
    * **Warning**: This is a generic event not a change event.
    */
-  onValueCommitted?: (value: number | null, eventDetails: NumberFieldRoot.CommitEventDetails) => void;
+  onValueCommitted?: ((value: number | null, eventDetails: NumberFieldRoot.CommitEventDetails) => void) | undefined;
   /**
    * The locale of the input element.
    * Defaults to the user's runtime locale.
    */
-  locale?: Intl.LocalesArgument;
+  locale?: Intl.LocalesArgument | undefined;
   /**
    * A ref to access the hidden input element.
    */
-  inputRef?: React.Ref<HTMLInputElement>;
+  inputRef?: React.Ref<HTMLInputElement> | undefined;
 }
-export interface NumberFieldRootState extends FieldRoot.State {
+export interface NumberFieldRootState extends FieldRootState {
   /**
    * The raw numeric value of the field.
    */

package/number-field/root/NumberFieldRoot.js

@@ -54,6 +54,7 @@ const NumberFieldRoot = exports.NumberFieldRoot = /*#__PURE__*/React.forwardRef(
     onValueCommitted: onValueCommittedProp,
     allowWheelScrub = false,
     snapOnStep = false,
+    allowOutOfRange = false,
     format,
     locale,
     render,
@@ -180,6 +181,10 @@ const NumberFieldRoot = exports.NumberFieldRoot = /*#__PURE__*/React.forwardRef(
   const setValue = (0, _useStableCallback.useStableCallback)((unvalidatedValue, details) => {
     const eventWithOptionalKeyState = details.event;
     const dir = details.direction;
+    const reason = details.reason;
+    // Only allow out-of-range values for direct text entry (native-like behavior).
+    // Step-based interactions (keyboard arrows, buttons, wheel, scrub) still clamp to min/max.
+    const shouldClampValue = !allowOutOfRange || !(reason === _reasons.REASONS.inputChange || reason === _reasons.REASONS.inputBlur || reason === _reasons.REASONS.inputPaste || reason === _reasons.REASONS.inputClear || reason === _reasons.REASONS.none);
     const validatedValue = (0, _validate.toValidatedNumber)(unvalidatedValue, {
       step: dir ? getStepAmount(eventWithOptionalKeyState) * dir : undefined,
       format: formatOptionsRef.current,
@@ -187,18 +192,20 @@ const NumberFieldRoot = exports.NumberFieldRoot = /*#__PURE__*/React.forwardRef(
       maxWithDefault,
       minWithZeroDefault,
       snapOnStep,
-      small: eventWithOptionalKeyState?.altKey ?? false
+      small: eventWithOptionalKeyState?.altKey ?? false,
+      clamp: shouldClampValue
     });
 
     // Determine whether we should notify about a change even if the numeric value is unchanged.
     // This is needed when the user input is clamped/snapped to the same current value, or when
     // the source value differs but validation normalizes to the existing value.
-    const shouldFireChange = validatedValue !== value || unvalidatedValue !== value || allowInputSyncRef.current === false;
+    const isInputReason = details.reason === _reasons.REASONS.inputChange || details.reason === _reasons.REASONS.inputClear || details.reason === _reasons.REASONS.inputBlur || details.reason === _reasons.REASONS.inputPaste || details.reason === _reasons.REASONS.none;
+    const shouldFireChange = validatedValue !== value || isInputReason && (unvalidatedValue !== value || allowInputSyncRef.current === false);
     if (shouldFireChange) {
       lastChangedValueRef.current = validatedValue;
       onValueChangeProp?.(validatedValue, details);
       if (details.isCanceled) {
-        return;
+        return shouldFireChange;
       }
       setValueUnwrapped(validatedValue);
       setDirty(validatedValue !== validityData.initialValue);
@@ -215,6 +222,7 @@ const NumberFieldRoot = exports.NumberFieldRoot = /*#__PURE__*/React.forwardRef(
 
     // Formatting can change even if the numeric value hasn't, so ensure a re-render when needed.
     forceRender();
+    return shouldFireChange;
   });
   const incrementValue = (0, _useStableCallback.useStableCallback)((amount, {
     direction,
@@ -225,7 +233,7 @@ const NumberFieldRoot = exports.NumberFieldRoot = /*#__PURE__*/React.forwardRef(
     const prevValue = currentValue == null ? valueRef.current : currentValue;
     const nextValue = typeof prevValue === 'number' ? prevValue + amount * direction : Math.max(0, min ?? 0);
     const nativeEvent = event;
-    setValue(nextValue, (0, _createBaseUIEventDetails.createChangeEventDetails)(reason, nativeEvent, undefined, {
+    return setValue(nextValue, (0, _createBaseUIEventDetails.createChangeEventDetails)(reason, nativeEvent, undefined, {
       direction
     }));
   });
@@ -256,22 +264,29 @@ const NumberFieldRoot = exports.NumberFieldRoot = /*#__PURE__*/React.forwardRef(
       isPressedRef.current = false;
       stopAutoChange();
       const committed = lastChangedValueRef.current ?? valueRef.current;
-      const commitReason = isIncrement ? 'increment' : 'decrement';
+      const commitReason = isIncrement ? _reasons.REASONS.incrementPress : _reasons.REASONS.decrementPress;
       onValueCommitted(committed, (0, _createBaseUIEventDetails.createGenericEventDetails)(commitReason, event));
     }, {
       once: true
     });
     function tick() {
       const amount = getStepAmount(triggerEvent) ?? _constants.DEFAULT_STEP;
-      incrementValue(amount, {
+      return incrementValue(amount, {
         direction: isIncrement ? 1 : -1,
         event: triggerEvent,
         reason: isIncrement ? 'increment-press' : 'decrement-press'
       });
     }
-    tick();
+    if (!tick()) {
+      stopAutoChange();
+      return;
+    }
     startTickTimeout.start(_constants.START_AUTO_CHANGE_DELAY, () => {
-      tickInterval.start(_constants.CHANGE_VALUE_TICK_DELAY, tick);
+      tickInterval.start(_constants.CHANGE_VALUE_TICK_DELAY, () => {
+        if (!tick()) {
+          stopAutoChange();
+        }
+      });
     });
   });
 

package/number-field/root/NumberFieldRootContext.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Timeout } from '@base-ui/utils/useTimeout';
-import type { NumberFieldRoot } from "./NumberFieldRoot.js";
+import type { NumberFieldRoot, NumberFieldRootState } from "./NumberFieldRoot.js";
 import { EventWithOptionalKeyState } from "../utils/types.js";
 import type { IncrementValueParameters } from "../utils/types.js";
 export type InputMode = 'numeric' | 'decimal' | 'text';
@@ -14,9 +14,9 @@ export interface NumberFieldRootContext {
   disabled: boolean;
   readOnly: boolean;
   id: string | undefined;
-  setValue: (value: number | null, details: NumberFieldRoot.ChangeEventDetails) => void;
+  setValue: (value: number | null, details: NumberFieldRoot.ChangeEventDetails) => boolean;
   getStepAmount: (event?: EventWithOptionalKeyState) => number | undefined;
-  incrementValue: (amount: number, params: IncrementValueParameters) => void;
+  incrementValue: (amount: number, params: IncrementValueParameters) => boolean;
   inputRef: React.RefObject<HTMLInputElement | null>;
   allowInputSyncRef: React.RefObject<boolean | null>;
   formatOptionsRef: React.RefObject<Intl.NumberFormatOptions | undefined>;
@@ -37,7 +37,7 @@ export interface NumberFieldRootContext {
   locale: Intl.LocalesArgument;
   isScrubbing: boolean;
   setIsScrubbing: React.Dispatch<React.SetStateAction<boolean>>;
-  state: NumberFieldRoot.State;
+  state: NumberFieldRootState;
   onValueCommitted: (value: number | null, eventDetails: NumberFieldRoot.CommitEventDetails) => void;
 }
 export declare const NumberFieldRootContext: React.Context<NumberFieldRootContext | undefined>;

package/number-field/root/useNumberFieldButton.d.ts

@@ -3,23 +3,23 @@ import type { Timeout } from '@base-ui/utils/useTimeout';
 import type { EventWithOptionalKeyState, IncrementValueParameters } from "../utils/types.js";
 import type { NumberFieldRoot } from "./NumberFieldRoot.js";
 import type { HTMLProps } from "../../utils/types.js";
-export declare function useNumberFieldButton(params: useNumberFieldButton.Parameters): React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
+export declare function useNumberFieldButton(params: UseNumberFieldButtonParameters): React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
 export interface UseNumberFieldButtonParameters {
   allowInputSyncRef: React.RefObject<boolean | null>;
   disabled: boolean;
   formatOptionsRef: React.RefObject<Intl.NumberFormatOptions | undefined>;
   getStepAmount: (event?: EventWithOptionalKeyState) => number | undefined;
   id: string | undefined;
-  incrementValue: (amount: number, params: IncrementValueParameters) => void;
+  incrementValue: (amount: number, params: IncrementValueParameters) => boolean;
   inputRef: React.RefObject<HTMLInputElement | null>;
   inputValue: string;
   intentionalTouchCheckTimeout: Timeout;
   isIncrement: boolean;
   isPressedRef: React.RefObject<boolean | null>;
-  locale?: Intl.LocalesArgument;
+  locale?: Intl.LocalesArgument | undefined;
   movesAfterTouchRef: React.RefObject<number | null>;
   readOnly: boolean;
-  setValue: (value: number | null, details: NumberFieldRoot.ChangeEventDetails) => void;
+  setValue: (value: number | null, details: NumberFieldRoot.ChangeEventDetails) => boolean;
   startAutoChange: (isIncrement: boolean, event?: React.MouseEvent | Event) => void;
   stopAutoChange: () => void;
   valueRef: React.RefObject<number | null>;
@@ -29,7 +29,4 @@ export interface UseNumberFieldButtonParameters {
 export interface UseNumberFieldButtonReturnValue {
   props: HTMLProps;
 }
-export declare namespace useNumberFieldButton {
-  type Parameters = UseNumberFieldButtonParameters;
-  type ReturnValue = UseNumberFieldButtonReturnValue;
-}
+export interface UseNumberFieldButtonState {}

package/number-field/root/useNumberFieldButton.js

@@ -10,6 +10,12 @@ var React = _interopRequireWildcard(require("react"));
 var _constants = require("../utils/constants");
 var _parse = require("../utils/parse");
 var _createBaseUIEventDetails = require("../../utils/createBaseUIEventDetails");
+// Treat pen as touch-like to avoid forcing the software keyboard on stylus taps.
+// Linux Chrome may emit "pen" historically for mouse usage due to a bug, but the touch path
+// still works with minor behavioral differences.
+function isTouchLikePointerType(pointerType) {
+  return pointerType === 'touch' || pointerType === 'pen';
+}
 function useNumberFieldButton(params) {
   const {
     allowInputSyncRef,
@@ -78,7 +84,7 @@ function useNumberFieldButton(params) {
       const isDisabled = disabled || readOnly;
       if (event.defaultPrevented || isDisabled || (
       // If it's not a keyboard/virtual click, ignore.
-      pointerTypeRef.current === 'touch' ? ignoreClickRef.current : event.detail !== 0)) {
+      isTouchLikePointerType(pointerTypeRef.current) ? ignoreClickRef.current : event.detail !== 0)) {
         return;
       }
       commitValue(event.nativeEvent);
@@ -107,9 +113,8 @@ function useNumberFieldButton(params) {
         y: event.clientY
       };
       commitValue(event.nativeEvent);
-
-      // Note: "pen" is sometimes returned for mouse usage on Linux Chrome.
-      if (event.pointerType !== 'touch') {
+      const isTouchPointer = isTouchLikePointerType(event.pointerType);
+      if (!isTouchPointer) {
         event.preventDefault();
         inputRef.current?.focus();
         startAutoChange(isIncrement, event);
@@ -137,13 +142,13 @@ function useNumberFieldButton(params) {
     onPointerUp(event) {
       // Ensure we mark the press as released for touch flows even if auto-change never started,
       // so the delayed auto-change check won’t start after a quick tap.
-      if (event.pointerType === 'touch') {
+      if (isTouchLikePointerType(event.pointerType)) {
         isPressedRef.current = false;
       }
     },
     onPointerMove(event) {
       const isDisabled = disabled || readOnly;
-      if (isDisabled || event.pointerType !== 'touch' || !isPressedRef.current) {
+      if (isDisabled || !isTouchLikePointerType(event.pointerType) || !isPressedRef.current) {
         return;
       }
       if (movesAfterTouchRef.current != null) {
@@ -164,7 +169,7 @@ function useNumberFieldButton(params) {
     },
     onMouseEnter(event) {
       const isDisabled = disabled || readOnly;
-      if (event.defaultPrevented || isDisabled || !isPressedRef.current || isTouchingButtonRef.current || pointerTypeRef.current === 'touch') {
+      if (event.defaultPrevented || isDisabled || !isPressedRef.current || isTouchingButtonRef.current || isTouchLikePointerType(pointerTypeRef.current)) {
         return;
       }
       startAutoChange(isIncrement, event);

package/number-field/scrub-area/NumberFieldScrubArea.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { BaseUIComponentProps } from "../../utils/types.js";
-import type { NumberFieldRoot } from "../root/NumberFieldRoot.js";
+import type { NumberFieldRootState } from "../root/NumberFieldRoot.js";
 /**
  * An interactive area where the user can click and drag to change the field value.
  * Renders a `<span>` element.
@@ -8,19 +8,19 @@ import type { NumberFieldRoot } from "../root/NumberFieldRoot.js";
  * Documentation: [Base UI Number Field](https://base-ui.com/react/components/number-field)
  */
 export declare const NumberFieldScrubArea: React.ForwardRefExoticComponent<Omit<NumberFieldScrubAreaProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
-export interface NumberFieldScrubAreaState extends NumberFieldRoot.State {}
-export interface NumberFieldScrubAreaProps extends BaseUIComponentProps<'span', NumberFieldScrubArea.State> {
+export interface NumberFieldScrubAreaState extends NumberFieldRootState {}
+export interface NumberFieldScrubAreaProps extends BaseUIComponentProps<'span', NumberFieldScrubAreaState> {
   /**
    * Cursor movement direction in the scrub area.
    * @default 'horizontal'
    */
-  direction?: 'horizontal' | 'vertical';
+  direction?: 'horizontal' | 'vertical' | undefined;
   /**
    * Determines how many pixels the cursor must move before the value changes.
    * A higher value will make scrubbing less sensitive.
    * @default 2
    */
-  pixelSensitivity?: number;
+  pixelSensitivity?: number | undefined;
   /**
    * If specified, determines the distance that the cursor may move from the center
    * of the scrub area before it will loop back around.

package/number-field/scrub-area/NumberFieldScrubArea.js

@@ -51,6 +51,8 @@ const NumberFieldScrubArea = exports.NumberFieldScrubArea = /*#__PURE__*/React.f
   } = (0, _NumberFieldRootContext.useNumberFieldRootContext)();
   const scrubAreaRef = React.useRef(null);
   const isScrubbingRef = React.useRef(false);
+  const didMoveRef = React.useRef(false);
+  const pointerDownTargetRef = React.useRef(null);
   const scrubAreaCursorRef = React.useRef(null);
   const virtualCursorCoords = React.useRef({
     x: 0,
@@ -137,6 +139,17 @@ const NumberFieldScrubArea = exports.NumberFieldScrubArea = /*#__PURE__*/React.f
           isScrubbingRef.current = false;
           onScrubbingChange(false, event);
           onValueCommitted(lastChangedValueRef.current ?? valueRef.current, (0, _createBaseUIEventDetails.createGenericEventDetails)(_reasons.REASONS.scrub, event));
+
+          // Manually dispatch a click event if no movement happened, since
+          // preventDefault on pointerdown prevents the browser click event.
+          if (!didMoveRef.current && pointerDownTargetRef.current != null) {
+            pointerDownTargetRef.current.dispatchEvent(new MouseEvent('click', {
+              bubbles: true,
+              cancelable: true
+            }));
+          }
+          didMoveRef.current = false;
+          pointerDownTargetRef.current = null;
         }
       }
       if (_detectBrowser.isFirefox) {
@@ -162,6 +175,7 @@ const NumberFieldScrubArea = exports.NumberFieldScrubArea = /*#__PURE__*/React.f
       cumulativeDelta += direction === 'vertical' ? movementY : movementX;
       if (Math.abs(cumulativeDelta) >= pixelSensitivity) {
         cumulativeDelta = 0;
+        didMoveRef.current = true;
         const dValue = direction === 'vertical' ? -movementY : movementX;
         const stepAmount = getStepAmount(event) ?? _constants.DEFAULT_STEP;
         const rawAmount = dValue * stepAmount;
@@ -219,6 +233,8 @@ const NumberFieldScrubArea = exports.NumberFieldScrubArea = /*#__PURE__*/React.f
         inputRef.current?.focus();
       }
       isScrubbingRef.current = true;
+      didMoveRef.current = false;
+      pointerDownTargetRef.current = event.target;
       onScrubbingChange(true, event.nativeEvent);
 
       // WebKit causes significant layout shift with the native message, so we can't use it.

package/number-field/scrub-area/NumberFieldScrubAreaContext.js

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;

package/number-field/scrub-area-cursor/NumberFieldScrubAreaCursor.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { BaseUIComponentProps } from "../../utils/types.js";
-import type { NumberFieldRoot } from "../root/NumberFieldRoot.js";
+import type { NumberFieldRootState } from "../root/NumberFieldRoot.js";
 /**
  * A custom element to display instead of the native cursor while using the scrub area.
  * Renders a `<span>` element.
@@ -11,8 +11,8 @@ import type { NumberFieldRoot } from "../root/NumberFieldRoot.js";
  * Documentation: [Base UI Number Field](https://base-ui.com/react/components/number-field)
  */
 export declare const NumberFieldScrubAreaCursor: React.ForwardRefExoticComponent<Omit<NumberFieldScrubAreaCursorProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
-export interface NumberFieldScrubAreaCursorState extends NumberFieldRoot.State {}
-export interface NumberFieldScrubAreaCursorProps extends BaseUIComponentProps<'span', NumberFieldScrubAreaCursor.State> {}
+export interface NumberFieldScrubAreaCursorState extends NumberFieldRootState {}
+export interface NumberFieldScrubAreaCursorProps extends BaseUIComponentProps<'span', NumberFieldScrubAreaCursorState> {}
 export declare namespace NumberFieldScrubAreaCursor {
   type State = NumberFieldScrubAreaCursorState;
   type Props = NumberFieldScrubAreaCursorProps;

package/number-field/utils/stateAttributesMapping.d.ts

@@ -1,3 +1,3 @@
 import { StateAttributesMapping } from "../../utils/getStateAttributesProps.js";
-import type { NumberFieldRoot } from "../root/NumberFieldRoot.js";
-export declare const stateAttributesMapping: StateAttributesMapping<NumberFieldRoot.State>;
+import type { NumberFieldRootState } from "../root/NumberFieldRoot.js";
+export declare const stateAttributesMapping: StateAttributesMapping<NumberFieldRootState>;

package/number-field/utils/stateAttributesMapping.js

@@ -4,7 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.stateAttributesMapping = void 0;
+var _constants = require("../../field/utils/constants");
 const stateAttributesMapping = exports.stateAttributesMapping = {
   inputValue: () => null,
-  value: () => null
+  value: () => null,
+  ..._constants.fieldValidityMapping
 };

package/number-field/utils/subscribeToVisualViewportResize.d.ts

@@ -1 +1 @@
-export declare function subscribeToVisualViewportResize(element: Element, visualScaleRef: React.MutableRefObject<number>): () => void;
+export declare function subscribeToVisualViewportResize(element: Element, visualScaleRef: React.RefObject<number>): () => void;

package/number-field/utils/types.d.ts

@@ -1,15 +1,15 @@
 export type Direction = -1 | 1;
 export type DirectionalChangeReason = 'increment-press' | 'decrement-press' | 'wheel' | 'scrub' | 'keyboard';
 export interface ChangeEventCustomProperties {
-  direction?: Direction;
+  direction?: Direction | undefined;
 }
 export interface IncrementValueParameters {
   direction: Direction;
-  event?: Event | React.SyntheticEvent;
+  event?: Event | React.SyntheticEvent | undefined;
   reason: DirectionalChangeReason;
-  currentValue?: number | null;
+  currentValue?: number | null | undefined;
 }
 export interface EventWithOptionalKeyState {
-  altKey?: boolean;
-  shiftKey?: boolean;
+  altKey?: boolean | undefined;
+  shiftKey?: boolean | undefined;
 }

package/number-field/utils/validate.d.ts

@@ -6,7 +6,8 @@ export declare function toValidatedNumber(value: number | null, {
   minWithZeroDefault,
   format,
   snapOnStep,
-  small
+  small,
+  clamp: shouldClamp
 }: {
   step: number | undefined;
   minWithDefault: number;
@@ -15,4 +16,5 @@ export declare function toValidatedNumber(value: number | null, {
   format: Intl.NumberFormatOptions | undefined;
   snapOnStep: boolean;
   small: boolean;
+  clamp: boolean;
 }): number | null;

package/number-field/utils/validate.js

@@ -57,12 +57,13 @@ function toValidatedNumber(value, {
   minWithZeroDefault,
   format,
   snapOnStep,
-  small
+  small,
+  clamp: shouldClamp
 }) {
   if (value === null) {
     return value;
   }
-  const clampedValue = (0, _clamp.clamp)(value, minWithDefault, maxWithDefault);
+  const clampedValue = shouldClamp ? (0, _clamp.clamp)(value, minWithDefault, maxWithDefault) : value;
   if (step != null && snapOnStep) {
     if (step === 0) {
       return removeFloatingPointErrors(clampedValue, format);