@base-ui/react 1.0.0 → 1.2.0

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

@@ -10,96 +10,104 @@ import { REASONS } from "../../utils/reasons.js";
  *
  * Documentation: [Base UI Number Field](https://base-ui.com/react/components/number-field)
  */
-export declare const NumberFieldRoot: React.ForwardRefExoticComponent<NumberFieldRootProps & React.RefAttributes<HTMLDivElement>>;
+export declare const NumberFieldRoot: React.ForwardRefExoticComponent<Omit<NumberFieldRootProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface NumberFieldRootProps extends Omit<BaseUIComponentProps<'div', NumberFieldRootState>, 'onChange'> {
   /**
    * 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.
+   * 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;
+  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:
@@ -110,16 +118,16 @@ 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 {
   /**

package/esm/number-field/root/NumberFieldRoot.js

@@ -9,7 +9,7 @@ import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { useValueAsRef } from '@base-ui/utils/useValueAsRef';
 import { useForcedRerendering } from '@base-ui/utils/useForcedRerendering';
 import { useMergedRefs } from '@base-ui/utils/useMergedRefs';
-import { visuallyHidden } from '@base-ui/utils/visuallyHidden';
+import { visuallyHidden, visuallyHiddenInput } from '@base-ui/utils/visuallyHidden';
 import { ownerDocument, ownerWindow } from '@base-ui/utils/owner';
 import { isIOS } from '@base-ui/utils/detectBrowser';
 import { NumberFieldRootContext } from "./NumberFieldRootContext.js";
@@ -37,7 +37,7 @@ export const NumberFieldRoot = /*#__PURE__*/React.forwardRef(function NumberFiel
     min,
     max,
     smallStep = 0.1,
-    step = 1,
+    step: stepProp = 1,
     largeStep = 10,
     required = false,
     disabled: disabledProp = false,
@@ -49,6 +49,7 @@ export const NumberFieldRoot = /*#__PURE__*/React.forwardRef(function NumberFiel
     onValueCommitted: onValueCommittedProp,
     allowWheelScrub = false,
     snapOnStep = false,
+    allowOutOfRange = false,
     format,
     locale,
     render,
@@ -69,6 +70,7 @@ export const NumberFieldRoot = /*#__PURE__*/React.forwardRef(function NumberFiel
   } = useFieldRootContext();
   const disabled = fieldDisabled || disabledProp;
   const name = fieldName ?? nameProp;
+  const step = stepProp === 'any' ? 1 : stepProp;
   const [isScrubbing, setIsScrubbing] = React.useState(false);
   const minWithDefault = min ?? Number.MIN_SAFE_INTEGER;
   const maxWithDefault = max ?? Number.MAX_SAFE_INTEGER;
@@ -174,6 +176,10 @@ export const NumberFieldRoot = /*#__PURE__*/React.forwardRef(function NumberFiel
   const setValue = 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.inputChange || reason === REASONS.inputBlur || reason === REASONS.inputPaste || reason === REASONS.inputClear || reason === REASONS.none);
     const validatedValue = toValidatedNumber(unvalidatedValue, {
       step: dir ? getStepAmount(eventWithOptionalKeyState) * dir : undefined,
       format: formatOptionsRef.current,
@@ -181,18 +187,20 @@ export const NumberFieldRoot = /*#__PURE__*/React.forwardRef(function NumberFiel
       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.inputChange || details.reason === REASONS.inputClear || details.reason === REASONS.inputBlur || details.reason === REASONS.inputPaste || details.reason === 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);
@@ -209,6 +217,7 @@ export const NumberFieldRoot = /*#__PURE__*/React.forwardRef(function NumberFiel
 
     // Formatting can change even if the numeric value hasn't, so ensure a re-render when needed.
     forceRender();
+    return shouldFireChange;
   });
   const incrementValue = useStableCallback((amount, {
     direction,
@@ -219,7 +228,7 @@ export const NumberFieldRoot = /*#__PURE__*/React.forwardRef(function NumberFiel
     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, createChangeEventDetails(reason, nativeEvent, undefined, {
+    return setValue(nextValue, createChangeEventDetails(reason, nativeEvent, undefined, {
       direction
     }));
   });
@@ -257,15 +266,22 @@ export const NumberFieldRoot = /*#__PURE__*/React.forwardRef(function NumberFiel
     });
     function tick() {
       const amount = getStepAmount(triggerEvent) ?? 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(START_AUTO_CHANGE_DELAY, () => {
-      tickInterval.start(CHANGE_VALUE_TICK_DELAY, tick);
+      tickInterval.start(CHANGE_VALUE_TICK_DELAY, () => {
+        if (!tick()) {
+          stopAutoChange();
+        }
+      });
     });
   });
 
@@ -391,6 +407,9 @@ export const NumberFieldRoot = /*#__PURE__*/React.forwardRef(function NumberFiel
     value: contextValue,
     children: [element, /*#__PURE__*/_jsx("input", {
       ...validation.getInputValidationProps({
+        onFocus() {
+          inputRef.current?.focus();
+        },
         onChange(event) {
           // Workaround for https://github.com/facebook/react/issues/9023
           if (event.nativeEvent.defaultPrevented) {
@@ -413,13 +432,16 @@ export const NumberFieldRoot = /*#__PURE__*/React.forwardRef(function NumberFiel
       name: name,
       value: value ?? '',
       min: min,
-      max: max,
-      step: step,
+      max: max
+      // stepMismatch validation is broken unless an explicit `min` is added.
+      // See https://github.com/facebook/react/issues/12334.
+      ,
+      step: stepProp,
       disabled: disabled,
       required: required,
       "aria-hidden": true,
       tabIndex: -1,
-      style: visuallyHidden
+      style: name ? visuallyHiddenInput : visuallyHidden
     })]
   });
 });

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

@@ -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>;

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

@@ -10,21 +10,18 @@ export interface UseNumberFieldButtonParameters {
   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;
-  maxWithDefault: number;
-  minWithDefault: number;
+  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;
-  value: number | null;
   valueRef: React.RefObject<number | null>;
   lastChangedValueRef: React.RefObject<number | null>;
   onValueCommitted: (value: number | null, eventDetails: NumberFieldRoot.CommitEventDetails) => void;

package/esm/number-field/root/useNumberFieldButton.js

@@ -4,6 +4,12 @@ import * as React from 'react';
 import { DEFAULT_STEP, MAX_POINTER_MOVES_AFTER_TOUCH, SCROLLING_POINTER_MOVE_DISTANCE, TOUCH_TIMEOUT } from "../utils/constants.js";
 import { parseNumber } from "../utils/parse.js";
 import { createChangeEventDetails, createGenericEventDetails } from "../../utils/createBaseUIEventDetails.js";
+// 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';
+}
 export function useNumberFieldButton(params) {
   const {
     allowInputSyncRef,
@@ -18,14 +24,11 @@ export function useNumberFieldButton(params) {
     isIncrement,
     isPressedRef,
     locale,
-    maxWithDefault,
-    minWithDefault,
     movesAfterTouchRef,
     readOnly,
     setValue,
     startAutoChange,
     stopAutoChange,
-    value,
     valueRef,
     lastChangedValueRef,
     onValueCommitted
@@ -37,8 +40,6 @@ export function useNumberFieldButton(params) {
   const isTouchingButtonRef = React.useRef(false);
   const ignoreClickRef = React.useRef(false);
   const pointerTypeRef = React.useRef('');
-  const isMin = value != null && value <= minWithDefault;
-  const isMax = value != null && value >= maxWithDefault;
   const pressReason = isIncrement ? 'increment-press' : 'decrement-press';
   function commitValue(nativeEvent) {
     allowInputSyncRef.current = true;
@@ -55,7 +56,7 @@ export function useNumberFieldButton(params) {
     }
   }
   const props = {
-    disabled: disabled || (isIncrement ? isMax : isMin),
+    disabled,
     'aria-readonly': readOnly || undefined,
     'aria-label': isIncrement ? 'Increase' : 'Decrease',
     'aria-controls': id,
@@ -74,10 +75,10 @@ export function useNumberFieldButton(params) {
       isTouchingButtonRef.current = false;
     },
     onClick(event) {
-      const isDisabled = disabled || readOnly || (isIncrement ? isMax : isMin);
+      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);
@@ -95,8 +96,7 @@ export function useNumberFieldButton(params) {
     },
     onPointerDown(event) {
       const isMainButton = !event.button || event.button === 0;
-      const isDisabled = disabled || (isIncrement ? isMax : isMin);
-      if (event.defaultPrevented || readOnly || !isMainButton || isDisabled) {
+      if (event.defaultPrevented || readOnly || !isMainButton || disabled) {
         return;
       }
       pointerTypeRef.current = event.pointerType;
@@ -107,9 +107,8 @@ export 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 +136,13 @@ export 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 || (isIncrement ? isMax : isMin);
-      if (isDisabled || event.pointerType !== 'touch' || !isPressedRef.current) {
+      const isDisabled = disabled || readOnly;
+      if (isDisabled || !isTouchLikePointerType(event.pointerType) || !isPressedRef.current) {
         return;
       }
       if (movesAfterTouchRef.current != null) {
@@ -163,8 +162,8 @@ export function useNumberFieldButton(params) {
       }
     },
     onMouseEnter(event) {
-      const isDisabled = disabled || readOnly || (isIncrement ? isMax : isMin);
-      if (event.defaultPrevented || isDisabled || !isPressedRef.current || isTouchingButtonRef.current || pointerTypeRef.current === 'touch') {
+      const isDisabled = disabled || readOnly;
+      if (event.defaultPrevented || isDisabled || !isPressedRef.current || isTouchingButtonRef.current || isTouchLikePointerType(pointerTypeRef.current)) {
         return;
       }
       startAutoChange(isIncrement, event);

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

@@ -7,20 +7,20 @@ 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<NumberFieldScrubAreaProps & React.RefAttributes<HTMLSpanElement>>;
+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> {
   /**
    * 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/esm/number-field/scrub-area/NumberFieldScrubArea.js

@@ -46,6 +46,8 @@ export const NumberFieldScrubArea = /*#__PURE__*/React.forwardRef(function Numbe
   } = 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,
@@ -132,6 +134,17 @@ export const NumberFieldScrubArea = /*#__PURE__*/React.forwardRef(function Numbe
           isScrubbingRef.current = false;
           onScrubbingChange(false, event);
           onValueCommitted(lastChangedValueRef.current ?? valueRef.current, createGenericEventDetails(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 (isFirefox) {
@@ -157,6 +170,7 @@ export const NumberFieldScrubArea = /*#__PURE__*/React.forwardRef(function Numbe
       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) ?? DEFAULT_STEP;
         const rawAmount = dValue * stepAmount;
@@ -214,6 +228,8 @@ export const NumberFieldScrubArea = /*#__PURE__*/React.forwardRef(function Numbe
         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/esm/number-field/scrub-area/NumberFieldScrubAreaContext.js

@@ -1,3 +1,5 @@
+'use client';
+
 import _formatErrorMessage from "@base-ui/utils/formatErrorMessage";
 import * as React from 'react';
 export const NumberFieldScrubAreaContext = /*#__PURE__*/React.createContext(undefined);

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

@@ -10,7 +10,7 @@ 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<NumberFieldScrubAreaCursorProps & React.RefAttributes<HTMLSpanElement>>;
+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 declare namespace NumberFieldScrubAreaCursor {

package/esm/number-field/utils/stateAttributesMapping.js

@@ -1,4 +1,6 @@
+import { fieldValidityMapping } from "../../field/utils/constants.js";
 export const stateAttributesMapping = {
   inputValue: () => null,
-  value: () => null
+  value: () => null,
+  ...fieldValidityMapping
 };

package/esm/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/esm/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/esm/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/esm/number-field/utils/validate.js

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

package/esm/popover/arrow/PopoverArrow.d.ts

@@ -7,7 +7,7 @@ import type { BaseUIComponentProps } from "../../utils/types.js";
  *
  * Documentation: [Base UI Popover](https://base-ui.com/react/components/popover)
  */
-export declare const PopoverArrow: React.ForwardRefExoticComponent<PopoverArrowProps & React.RefAttributes<HTMLDivElement>>;
+export declare const PopoverArrow: React.ForwardRefExoticComponent<Omit<PopoverArrowProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface PopoverArrowState {
   /**
    * Whether the popover is currently open.

package/esm/popover/arrow/PopoverArrow.js

@@ -29,12 +29,12 @@ export const PopoverArrow = /*#__PURE__*/React.forwardRef(function PopoverArrow(
     arrowUncentered,
     arrowStyles
   } = usePopoverPositionerContext();
-  const state = React.useMemo(() => ({
+  const state = {
     open,
     side,
     align,
     uncentered: arrowUncentered
-  }), [open, side, align, arrowUncentered]);
+  };
   const element = useRenderElement('div', componentProps, {
     state,
     ref: [forwardedRef, arrowRef],

package/esm/popover/arrow/PopoverArrowDataAttributes.js

@@ -12,12 +12,12 @@ export let PopoverArrowDataAttributes = function (PopoverArrowDataAttributes) {
    * Indicates which side the popup is positioned relative to the trigger.
    * @type {'top' | 'bottom' | 'left' | 'right' | 'inline-end' | 'inline-start'}
    */
-  PopoverArrowDataAttributes["side"] = "data-side";
+  PopoverArrowDataAttributes[PopoverArrowDataAttributes["side"] = CommonPopupDataAttributes.side] = "side";
   /**
    * Indicates how the popup is aligned relative to specified side.
    * @type {'start' | 'center' | 'end'}
    */
-  PopoverArrowDataAttributes["align"] = "data-align";
+  PopoverArrowDataAttributes[PopoverArrowDataAttributes["align"] = CommonPopupDataAttributes.align] = "align";
   /**
    * Present when the popover arrow is uncentered.
    */

package/esm/popover/backdrop/PopoverBackdrop.d.ts

@@ -7,7 +7,7 @@ import type { TransitionStatus } from "../../utils/useTransitionStatus.js";
  *
  * Documentation: [Base UI Popover](https://base-ui.com/react/components/popover)
  */
-export declare const PopoverBackdrop: React.ForwardRefExoticComponent<PopoverBackdropProps & React.RefAttributes<HTMLDivElement>>;
+export declare const PopoverBackdrop: React.ForwardRefExoticComponent<Omit<PopoverBackdropProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export interface PopoverBackdropState {
   /**
    * Whether the popover is currently open.

package/esm/popover/backdrop/PopoverBackdrop.js

@@ -30,10 +30,10 @@ export const PopoverBackdrop = /*#__PURE__*/React.forwardRef(function PopoverBac
   const mounted = store.useState('mounted');
   const transitionStatus = store.useState('transitionStatus');
   const openReason = store.useState('openChangeReason');
-  const state = React.useMemo(() => ({
+  const state = {
     open,
     transitionStatus
-  }), [open, transitionStatus]);
+  };
   const element = useRenderElement('div', props, {
     state,
     ref: [store.context.backdropRef, forwardedRef],