@base-ui/react 1.5.0 → 1.6.0

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

@@ -1,390 +0,0 @@
-'use client';
-
-import * as React from 'react';
-import { addEventListener } from '@base-ui/utils/addEventListener';
-import { useControlled } from '@base-ui/utils/useControlled';
-import { useStableCallback } from '@base-ui/utils/useStableCallback';
-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, visuallyHiddenInput } from '@base-ui/utils/visuallyHidden';
-import { ownerDocument } from '@base-ui/utils/owner';
-import { isIOS } from '@base-ui/utils/detectBrowser';
-import { activeElement } from "../../floating-ui-react/utils.js";
-import { NumberFieldRootContext } from "./NumberFieldRootContext.js";
-import { useFieldRootContext } from "../../internals/field-root-context/FieldRootContext.js";
-import { useLabelableId } from "../../internals/labelable-provider/useLabelableId.js";
-import { stateAttributesMapping } from "../utils/stateAttributesMapping.js";
-import { useRenderElement } from "../../internals/useRenderElement.js";
-import { getNumberLocaleDetails, PERMILLE, PERCENTAGES, SPACE_SEPARATOR_RE, BASE_NON_NUMERIC_SYMBOLS, MINUS_SIGNS_WITH_ASCII, PLUS_SIGNS_WITH_ASCII } from "../utils/parse.js";
-import { formatNumber, formatNumberMaxPrecision } from "../../utils/formatNumber.js";
-import { DEFAULT_STEP } from "../utils/constants.js";
-import { toValidatedNumber } from "../utils/validate.js";
-import { createChangeEventDetails } from "../../internals/createBaseUIEventDetails.js";
-import { REASONS } from "../../internals/reasons.js";
-
-/**
- * Groups all parts of the number field and manages its state.
- * Renders a `<div>` element.
- *
- * Documentation: [Base UI Number Field](https://base-ui.com/react/components/number-field)
- */
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const NumberFieldRoot = /*#__PURE__*/React.forwardRef(function NumberFieldRoot(componentProps, forwardedRef) {
-  const {
-    id: idProp,
-    min,
-    max,
-    smallStep = 0.1,
-    step: stepProp = 1,
-    largeStep = 10,
-    required = false,
-    disabled: disabledProp = false,
-    readOnly = false,
-    form,
-    name: nameProp,
-    defaultValue,
-    value: valueProp,
-    onValueChange: onValueChangeProp,
-    onValueCommitted: onValueCommittedProp,
-    allowWheelScrub = false,
-    snapOnStep = false,
-    allowOutOfRange = false,
-    format,
-    locale,
-    render,
-    className,
-    inputRef: inputRefProp,
-    style,
-    ...elementProps
-  } = componentProps;
-  const {
-    setDirty,
-    validityData,
-    disabled: fieldDisabled,
-    setFilled,
-    invalid,
-    name: fieldName,
-    state: fieldState,
-    validation,
-    shouldValidateOnChange
-  } = 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;
-  const minWithZeroDefault = min ?? 0;
-  const formatStyle = format?.style;
-  const inputRef = React.useRef(null);
-  const hiddenInputRef = useMergedRefs(inputRefProp, validation.inputRef);
-  const id = useLabelableId({
-    id: idProp
-  });
-  const [valueUnwrapped, setValueUnwrapped] = useControlled({
-    controlled: valueProp,
-    default: defaultValue,
-    name: 'NumberField',
-    state: 'value'
-  });
-  const value = valueUnwrapped ?? null;
-  const valueRef = useValueAsRef(value);
-  useIsoLayoutEffect(() => {
-    setFilled(value !== null);
-  }, [setFilled, value]);
-  const forceRender = useForcedRerendering();
-  const formatOptionsRef = useValueAsRef(format);
-  const hasPendingCommitRef = React.useRef(false);
-  const onValueCommitted = useStableCallback((nextValue, eventDetails) => {
-    hasPendingCommitRef.current = false;
-    onValueCommittedProp?.(nextValue, eventDetails);
-  });
-  const allowInputSyncRef = React.useRef(true);
-  const lastChangedValueRef = React.useRef(null);
-
-  // During SSR, the value is formatted on the server, whose locale may differ from the client's
-  // locale. This causes a hydration mismatch, which we manually suppress. This is preferable to
-  // rendering an empty input field and then updating it with the formatted value, as the user
-  // can still see the value prior to hydration, even if it's not formatted correctly.
-  const [inputValue, setInputValue] = React.useState(() => {
-    if (valueProp !== undefined) {
-      return getControlledInputValue(value, locale, format);
-    }
-    return formatNumber(value, locale, format);
-  });
-  const [inputMode, setInputMode] = React.useState('numeric');
-  const getAllowedNonNumericKeys = useStableCallback(() => {
-    const {
-      decimal,
-      group,
-      currency,
-      literal
-    } = getNumberLocaleDetails(locale, format);
-    const keys = new Set();
-    BASE_NON_NUMERIC_SYMBOLS.forEach(symbol => keys.add(symbol));
-    if (decimal) {
-      keys.add(decimal);
-    }
-    if (group) {
-      keys.add(group);
-      if (SPACE_SEPARATOR_RE.test(group)) {
-        keys.add(' ');
-      }
-    }
-    const allowPercentSymbols = formatStyle === 'percent' || formatStyle === 'unit' && format?.unit === 'percent';
-    const allowPermilleSymbols = formatStyle === 'percent' || formatStyle === 'unit' && format?.unit === 'permille';
-    if (allowPercentSymbols) {
-      PERCENTAGES.forEach(key => keys.add(key));
-    }
-    if (allowPermilleSymbols) {
-      PERMILLE.forEach(key => keys.add(key));
-    }
-    if (formatStyle === 'currency' && currency) {
-      keys.add(currency);
-    }
-    if (literal) {
-      // Some locales (e.g. de-DE) insert a literal space character between the number
-      // and the symbol, so allow those characters to be typed/removed.
-      Array.from(literal).forEach(char => keys.add(char));
-      if (SPACE_SEPARATOR_RE.test(literal)) {
-        keys.add(' ');
-      }
-    }
-
-    // Allow plus sign in all cases; minus sign only when negatives are valid
-    PLUS_SIGNS_WITH_ASCII.forEach(key => keys.add(key));
-    if (minWithDefault < 0) {
-      MINUS_SIGNS_WITH_ASCII.forEach(key => keys.add(key));
-    }
-    return keys;
-  });
-  const getStepAmount = useStableCallback(event => {
-    if (event?.altKey) {
-      return smallStep;
-    }
-    if (event?.shiftKey) {
-      return largeStep;
-    }
-    return step;
-  });
-  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,
-      minWithDefault,
-      maxWithDefault,
-      minWithZeroDefault,
-      snapOnStep,
-      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 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 shouldFireChange;
-      }
-      setValueUnwrapped(validatedValue);
-      setDirty(validatedValue !== validityData.initialValue);
-      hasPendingCommitRef.current = true;
-    }
-
-    // Keep the visible input in sync immediately when programmatic changes occur
-    // (increment/decrement, wheel, etc). During direct typing we don't want
-    // to overwrite the user-provided text until blur, so we gate on
-    // `allowInputSyncRef`.
-    if (allowInputSyncRef.current) {
-      setInputValue(formatNumber(validatedValue, locale, format));
-    }
-
-    // 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,
-    currentValue,
-    event,
-    reason
-  }) => {
-    const prevValue = currentValue == null ? valueRef.current : currentValue;
-    const nextValue = typeof prevValue === 'number' ? prevValue + amount * direction : Math.max(0, min ?? 0);
-    const nativeEvent = event;
-    return setValue(nextValue, createChangeEventDetails(reason, nativeEvent, undefined, {
-      direction
-    }));
-  });
-
-  // We need to update the input value when the external `value` prop changes. This ends up acting
-  // as a single source of truth to update the input value, bypassing the need to manually set it in
-  // each event handler internally in this hook.
-  // This is done inside a layout effect as an alternative to the technique to set state during
-  // render as we're accessing a ref, which must be inside an effect.
-  // https://react.dev/learn/you-might-not-need-an-effect#adjusting-some-state-when-a-prop-changes
-  //
-  // ESLint is disabled because it needs to run even if the parsed value hasn't changed, since the
-  // value still can be formatted differently.
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  useIsoLayoutEffect(function syncFormattedInputValueOnValueChange() {
-    // This ensures the value is only updated on blur rather than every keystroke, but still
-    // allows the input value to be updated when the value is changed externally.
-    if (!allowInputSyncRef.current) {
-      return;
-    }
-    const nextInputValue = valueProp !== undefined ? getControlledInputValue(value, locale, format) : formatNumber(value, locale, format);
-    if (nextInputValue !== inputValue) {
-      setInputValue(nextInputValue);
-    }
-  });
-  useIsoLayoutEffect(function setDynamicInputModeForIOS() {
-    if (!isIOS) {
-      return;
-    }
-
-    // iOS numeric software keyboard doesn't have a minus key, so we need to use the default
-    // keyboard to let the user input a negative number.
-    let computedInputMode = 'text';
-    if (minWithDefault >= 0) {
-      // iOS numeric software keyboard doesn't have a decimal key for "numeric" input mode, but
-      // this is better than the "text" input if possible to use.
-      computedInputMode = 'decimal';
-    }
-    setInputMode(computedInputMode);
-  }, [minWithDefault, formatStyle]);
-
-  // The `onWheel` prop can't be prevented, so we need to use a global event listener.
-  React.useEffect(function registerElementWheelListener() {
-    const element = inputRef.current;
-    if (disabled || readOnly || !allowWheelScrub || !element) {
-      return undefined;
-    }
-    function handleWheel(event) {
-      if (
-      // Allow pinch-zooming.
-      event.ctrlKey || activeElement(ownerDocument(inputRef.current)) !== inputRef.current) {
-        return;
-      }
-
-      // Prevent the default behavior to avoid scrolling the page.
-      event.preventDefault();
-      allowInputSyncRef.current = true;
-      const amount = getStepAmount(event) ?? DEFAULT_STEP;
-      incrementValue(amount, {
-        direction: event.deltaY > 0 ? -1 : 1,
-        event,
-        reason: 'wheel'
-      });
-    }
-    return addEventListener(element, 'wheel', handleWheel);
-  }, [allowWheelScrub, incrementValue, disabled, readOnly, getStepAmount]);
-  const state = React.useMemo(() => ({
-    ...fieldState,
-    disabled,
-    readOnly,
-    required,
-    value,
-    inputValue,
-    scrubbing: isScrubbing
-  }), [fieldState, disabled, readOnly, required, value, inputValue, isScrubbing]);
-  const contextValue = React.useMemo(() => ({
-    inputRef,
-    inputValue,
-    value,
-    minWithDefault,
-    maxWithDefault,
-    disabled,
-    readOnly,
-    id,
-    setValue,
-    incrementValue,
-    getStepAmount,
-    allowInputSyncRef,
-    formatOptionsRef,
-    valueRef,
-    lastChangedValueRef,
-    hasPendingCommitRef,
-    name,
-    required,
-    invalid,
-    inputMode,
-    getAllowedNonNumericKeys,
-    min,
-    max,
-    setInputValue,
-    locale,
-    isScrubbing,
-    setIsScrubbing,
-    state,
-    onValueCommitted
-  }), [inputRef, inputValue, value, minWithDefault, maxWithDefault, disabled, readOnly, id, setValue, incrementValue, getStepAmount, formatOptionsRef, valueRef, name, required, invalid, inputMode, getAllowedNonNumericKeys, min, max, setInputValue, locale, isScrubbing, state, onValueCommitted]);
-  const element = useRenderElement('div', componentProps, {
-    ref: forwardedRef,
-    state,
-    props: elementProps,
-    stateAttributesMapping
-  });
-  return /*#__PURE__*/_jsxs(NumberFieldRootContext.Provider, {
-    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 || disabled || readOnly) {
-            // Outside Field.Root, the event is not wrapped by mergeProps.
-            event.preventBaseUIHandler?.();
-            return;
-          }
-
-          // Handle browser autofill.
-          const nextValue = event.currentTarget.valueAsNumber;
-          const parsedValue = Number.isNaN(nextValue) ? null : nextValue;
-          const details = createChangeEventDetails(REASONS.none, event.nativeEvent);
-          setDirty(parsedValue !== validityData.initialValue);
-          setValue(parsedValue, details);
-          if (shouldValidateOnChange()) {
-            validation.commit(parsedValue);
-          }
-        }
-      }),
-      ref: hiddenInputRef,
-      type: "number",
-      form: form,
-      name: name,
-      value: value ?? '',
-      min: min,
-      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: name ? visuallyHiddenInput : visuallyHidden,
-      suppressHydrationWarning: true
-    })]
-  });
-});
-if (process.env.NODE_ENV !== "production") NumberFieldRoot.displayName = "NumberFieldRoot";
-function getControlledInputValue(value, locale, format) {
-  const explicitPrecision = format?.maximumFractionDigits != null || format?.minimumFractionDigits != null;
-  return explicitPrecision ? formatNumber(value, locale, format) : formatNumberMaxPrecision(value, locale, format);
-}

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

@@ -1,38 +0,0 @@
-import * as React from 'react';
-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';
-export interface NumberFieldRootContext {
-  inputValue: string;
-  value: number | null;
-  minWithDefault: number;
-  maxWithDefault: number;
-  disabled: boolean;
-  readOnly: boolean;
-  id: string | undefined;
-  setValue: (value: number | null, details: NumberFieldRoot.ChangeEventDetails) => boolean;
-  getStepAmount: (event?: EventWithOptionalKeyState) => number | undefined;
-  incrementValue: (amount: number, params: IncrementValueParameters) => boolean;
-  inputRef: React.RefObject<HTMLInputElement | null>;
-  allowInputSyncRef: React.RefObject<boolean | null>;
-  formatOptionsRef: React.RefObject<Intl.NumberFormatOptions | undefined>;
-  valueRef: React.RefObject<number | null>;
-  lastChangedValueRef: React.RefObject<number | null>;
-  hasPendingCommitRef: React.RefObject<boolean>;
-  name: string | undefined;
-  required: boolean;
-  invalid: boolean | undefined;
-  inputMode: InputMode;
-  getAllowedNonNumericKeys: () => Set<string | undefined>;
-  min: number | undefined;
-  max: number | undefined;
-  setInputValue: React.Dispatch<React.SetStateAction<string>>;
-  locale: Intl.LocalesArgument;
-  isScrubbing: boolean;
-  setIsScrubbing: React.Dispatch<React.SetStateAction<boolean>>;
-  state: NumberFieldRootState;
-  onValueCommitted: (value: number | null, eventDetails: NumberFieldRoot.CommitEventDetails) => void;
-}
-export declare const NumberFieldRootContext: React.Context<NumberFieldRootContext | undefined>;
-export declare function useNumberFieldRootContext(): NumberFieldRootContext;

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

@@ -1,26 +0,0 @@
-import * as React from 'react';
-import type { EventWithOptionalKeyState, IncrementValueParameters } from "../utils/types.js";
-import type { NumberFieldRoot } from "./NumberFieldRoot.js";
-import type { HTMLProps } from "../../internals/types.js";
-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) => boolean;
-  inputRef: React.RefObject<HTMLInputElement | null>;
-  inputValue: string;
-  isIncrement: boolean;
-  locale?: Intl.LocalesArgument | undefined;
-  readOnly: boolean;
-  setValue: (value: number | null, details: NumberFieldRoot.ChangeEventDetails) => boolean;
-  valueRef: React.RefObject<number | null>;
-  lastChangedValueRef: React.RefObject<number | null>;
-  onValueCommitted: (value: number | null, eventDetails: NumberFieldRoot.CommitEventDetails) => void;
-}
-export interface UseNumberFieldButtonReturnValue {
-  props: HTMLProps;
-}
-export interface UseNumberFieldButtonState {}

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

@@ -1,118 +0,0 @@
-'use client';
-
-import { usePressAndHold } from "../../internals/usePressAndHold.js";
-import { DEFAULT_STEP, CHANGE_VALUE_TICK_DELAY, START_AUTO_CHANGE_DELAY, SCROLLING_POINTER_MOVE_DISTANCE } from "../utils/constants.js";
-import { parseNumber } from "../utils/parse.js";
-import { createChangeEventDetails, createGenericEventDetails } from "../../internals/createBaseUIEventDetails.js";
-import { REASONS } from "../../internals/reasons.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,
-    disabled,
-    formatOptionsRef,
-    getStepAmount,
-    id,
-    incrementValue,
-    inputRef,
-    inputValue,
-    isIncrement,
-    locale,
-    readOnly,
-    setValue,
-    valueRef,
-    lastChangedValueRef,
-    onValueCommitted
-  } = params;
-  const pressReason = isIncrement ? REASONS.incrementPress : REASONS.decrementPress;
-  function commitValue(nativeEvent) {
-    allowInputSyncRef.current = true;
-
-    // The input may be dirty but not yet blurred, so the value won't have been committed.
-    const parsedValue = parseNumber(inputValue, locale, formatOptionsRef.current);
-    if (parsedValue !== null) {
-      // The increment value function needs to know the current input value to increment it
-      // correctly.
-      valueRef.current = parsedValue;
-      setValue(parsedValue, createChangeEventDetails(pressReason, nativeEvent, undefined, {
-        direction: isIncrement ? 1 : -1
-      }));
-    }
-  }
-  const {
-    pointerHandlers,
-    shouldSkipClick
-  } = usePressAndHold({
-    disabled: disabled || readOnly,
-    elementRef: inputRef,
-    tickDelay: CHANGE_VALUE_TICK_DELAY,
-    startDelay: START_AUTO_CHANGE_DELAY,
-    scrollDistance: SCROLLING_POINTER_MOVE_DISTANCE,
-    tick(triggerEvent) {
-      const amount = getStepAmount(triggerEvent) ?? DEFAULT_STEP;
-      return incrementValue(amount, {
-        direction: isIncrement ? 1 : -1,
-        event: triggerEvent,
-        reason: pressReason
-      });
-    },
-    onStop(nativeEvent) {
-      const committed = lastChangedValueRef.current ?? valueRef.current;
-      onValueCommitted(committed, createGenericEventDetails(pressReason, nativeEvent));
-    }
-  });
-  const props = {
-    disabled,
-    'aria-readonly': readOnly || undefined,
-    'aria-label': isIncrement ? 'Increase' : 'Decrease',
-    'aria-controls': id,
-    // Keyboard users shouldn't have access to the buttons, since they can use the input element
-    // to change the value. On the other hand, `aria-hidden` is not applied because touch screen
-    // readers should be able to use the buttons.
-    tabIndex: -1,
-    style: {
-      WebkitUserSelect: 'none',
-      userSelect: 'none'
-    },
-    ...pointerHandlers,
-    onClick(event) {
-      const isDisabled = disabled || readOnly;
-      if (event.defaultPrevented || isDisabled || shouldSkipClick(event)) {
-        return;
-      }
-      commitValue(event.nativeEvent);
-      const amount = getStepAmount(event) ?? DEFAULT_STEP;
-      const prev = valueRef.current;
-      incrementValue(amount, {
-        direction: isIncrement ? 1 : -1,
-        event: event.nativeEvent,
-        reason: pressReason
-      });
-      const committed = lastChangedValueRef.current ?? valueRef.current;
-      if (committed !== prev) {
-        onValueCommitted(committed, createGenericEventDetails(pressReason, event.nativeEvent));
-      }
-    },
-    onPointerDown(event) {
-      const isMainButton = !event.button || event.button === 0;
-      if (event.defaultPrevented || readOnly || !isMainButton || disabled) {
-        return;
-      }
-
-      // Sync dirty input value before starting the hold sequence.
-      commitValue(event.nativeEvent);
-      if (!isTouchLikePointerType(event.pointerType)) {
-        // Focus the input so the user can continue with keyboard interactions.
-        inputRef.current?.focus();
-      }
-      pointerHandlers.onPointerDown(event);
-    }
-  };
-  return props;
-}

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

@@ -1,33 +0,0 @@
-import * as React from 'react';
-import type { BaseUIComponentProps } from "../../internals/types.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.
- *
- * 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 NumberFieldRootState {}
-export interface NumberFieldScrubAreaProps extends BaseUIComponentProps<'span', NumberFieldScrubAreaState> {
-  /**
-   * Cursor movement direction in the scrub area.
-   * @default 'horizontal'
-   */
-  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 | undefined;
-  /**
-   * If specified, determines the distance that the cursor may move from the center
-   * of the scrub area before it will loop back around.
-   */
-  teleportDistance?: number | undefined;
-}
-export declare namespace NumberFieldScrubArea {
-  type State = NumberFieldScrubAreaState;
-  type Props = NumberFieldScrubAreaProps;
-}