@jobber/components 7.4.0 → 7.5.0

package/dist/unstyledPrimitives/index.cjs

@@ -624,6 +624,16 @@ function useClick(context, props = {}) {
   } : useRenderElement.EMPTY_OBJECT, [enabled, reference]);
 }
 
+/**
+ * Returns a function that forces a rerender.
+ */
+function useForcedRerendering() {
+  const [, setState] = React__namespace.useState({});
+  return React__namespace.useCallback(() => {
+    setState({});
+  }, []);
+}
+
 function useFloatingRootContext(options) {
   const {
     open = false,
@@ -1715,7 +1725,7 @@ let DialogViewportDataAttributes = function (DialogViewportDataAttributes) {
   return DialogViewportDataAttributes;
 }({});
 
-const stateAttributesMapping$6 = {
+const stateAttributesMapping$8 = {
   ...DrawerRoot.popupStateMapping,
   ...DrawerRoot.transitionStatusMapping,
   nested(value) {
@@ -1764,7 +1774,7 @@ const DialogViewport = /*#__PURE__*/React__namespace.forwardRef(function DialogV
     enabled: shouldRender,
     state,
     ref: [forwardedRef, store.useStateSetter('viewportElement')],
-    stateAttributesMapping: stateAttributesMapping$6,
+    stateAttributesMapping: stateAttributesMapping$8,
     props: [{
       role: 'presentation',
       hidden: !mounted,
@@ -4258,7 +4268,7 @@ const ComboboxIcon = /*#__PURE__*/React__namespace.forwardRef(function ComboboxI
 });
 if (process.env.NODE_ENV !== "production") ComboboxIcon.displayName = "ComboboxIcon";
 
-const stateAttributesMapping$5 = {
+const stateAttributesMapping$7 = {
   ...DrawerRoot.transitionStatusMapping,
   ...DrawerRoot.triggerOpenStateMapping
 };
@@ -4354,7 +4364,7 @@ const ComboboxClear = /*#__PURE__*/React__namespace.forwardRef(function Combobox
         store.state.inputRef.current?.focus();
       }
     }, elementProps, getButtonProps],
-    stateAttributesMapping: stateAttributesMapping$5
+    stateAttributesMapping: stateAttributesMapping$7
   });
   const shouldRender = keepMounted || mounted;
   if (!shouldRender) {
@@ -4550,7 +4560,7 @@ const ComboboxPortal = /*#__PURE__*/React__namespace.forwardRef(function Combobo
 });
 if (process.env.NODE_ENV !== "production") ComboboxPortal.displayName = "ComboboxPortal";
 
-const stateAttributesMapping$4 = {
+const stateAttributesMapping$6 = {
   ...DrawerRoot.popupStateMapping,
   ...DrawerRoot.transitionStatusMapping
 };
@@ -4576,7 +4586,7 @@ const ComboboxBackdrop = /*#__PURE__*/React__namespace.forwardRef(function Combo
   return useRenderElement.useRenderElement('div', componentProps, {
     state,
     ref: forwardedRef,
-    stateAttributesMapping: stateAttributesMapping$4,
+    stateAttributesMapping: stateAttributesMapping$6,
     props: [{
       role: 'presentation',
       hidden: !mounted,
@@ -5201,7 +5211,7 @@ const ComboboxPositioner = /*#__PURE__*/React__namespace.forwardRef(function Com
 });
 if (process.env.NODE_ENV !== "production") ComboboxPositioner.displayName = "ComboboxPositioner";
 
-const stateAttributesMapping$3 = {
+const stateAttributesMapping$5 = {
   ...DrawerRoot.popupStateMapping,
   ...DrawerRoot.transitionStatusMapping
 };
@@ -5262,7 +5272,7 @@ const ComboboxPopup = /*#__PURE__*/React__namespace.forwardRef(function Combobox
         }
       }
     }, getDisabledMountTransitionStyles(transitionStatus), elementProps],
-    stateAttributesMapping: stateAttributesMapping$3
+    stateAttributesMapping: stateAttributesMapping$5
   });
 
   // Default initial focus logic:
@@ -6110,7 +6120,7 @@ const ComboboxChipRemove = /*#__PURE__*/React__namespace.forwardRef(function Com
 });
 if (process.env.NODE_ENV !== "production") ComboboxChipRemove.displayName = "ComboboxChipRemove";
 
-var index_parts$1 = /*#__PURE__*/Object.freeze({
+var index_parts$2 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   Arrow: ComboboxArrow,
   Backdrop: ComboboxBackdrop,
@@ -6158,7 +6168,7 @@ const DrawerClose = DialogClose;
  */
 const DrawerDescription = DialogDescription;
 
-const stateAttributesMapping$2 = {
+const stateAttributesMapping$4 = {
   active(value) {
     if (value) {
       return {
@@ -6228,12 +6238,12 @@ const DrawerIndent = /*#__PURE__*/React__namespace.forwardRef(function DrawerInd
         [DrawerRoot.DrawerBackdropCssVars.swipeProgress]: '0'
       }
     }, elementProps],
-    stateAttributesMapping: stateAttributesMapping$2
+    stateAttributesMapping: stateAttributesMapping$4
   });
 });
 if (process.env.NODE_ENV !== "production") DrawerIndent.displayName = "DrawerIndent";
 
-const stateAttributesMapping$1 = {
+const stateAttributesMapping$3 = {
   active(value) {
     if (value) {
       return {
@@ -6267,7 +6277,7 @@ const DrawerIndentBackground = /*#__PURE__*/React__namespace.forwardRef(function
     ref: forwardedRef,
     state,
     props: elementProps,
-    stateAttributesMapping: stateAttributesMapping$1
+    stateAttributesMapping: stateAttributesMapping$3
   });
 });
 if (process.env.NODE_ENV !== "production") DrawerIndentBackground.displayName = "DrawerIndentBackground";
@@ -7367,7 +7377,7 @@ const SWIPE_AREA_SWIPING_HOOK = {
 const SWIPE_AREA_DISABLED_HOOK = {
   [DrawerSwipeAreaDataAttributes.disabled]: ''
 };
-const stateAttributesMapping = {
+const stateAttributesMapping$2 = {
   open(value) {
     return value ? SWIPE_AREA_OPEN_HOOK : SWIPE_AREA_CLOSED_HOOK;
   },
@@ -7672,7 +7682,7 @@ const DrawerSwipeArea = /*#__PURE__*/React__namespace.forwardRef(function Drawer
   return useRenderElement.useRenderElement('div', componentProps, {
     state,
     ref: [forwardedRef, swipeAreaRef, registerTrigger],
-    stateAttributesMapping,
+    stateAttributesMapping: stateAttributesMapping$2,
     props: [{
       role: 'presentation',
       'aria-hidden': true,
@@ -8692,7 +8702,7 @@ function shouldDismissFromStartEdge(direction, axis) {
   return null;
 }
 
-var index_parts = /*#__PURE__*/Object.freeze({
+var index_parts$1 = /*#__PURE__*/Object.freeze({
   __proto__: null,
   Backdrop: DrawerRoot.DrawerBackdrop,
   Close: DrawerClose,
@@ -8712,6 +8722,1849 @@ var index_parts = /*#__PURE__*/Object.freeze({
   createHandle: createDialogHandle
 });
 
+const cache = new Map();
+function getFormatter(locale, options) {
+  const optionsString = JSON.stringify({
+    locale,
+    options
+  });
+  const cachedFormatter = cache.get(optionsString);
+  if (cachedFormatter) {
+    return cachedFormatter;
+  }
+  const formatter = new Intl.NumberFormat(locale, options);
+  cache.set(optionsString, formatter);
+  return formatter;
+}
+function formatNumber(value, locale, options) {
+  if (value == null) {
+    return '';
+  }
+  return getFormatter(locale, options).format(value);
+}
+function formatNumberMaxPrecision(value, locale, options) {
+  return formatNumber(value, locale, {
+    ...options,
+    maximumFractionDigits: 20
+  });
+}
+
+const EMPTY = 0;
+class Interval extends DrawerRoot.Timeout {
+  static create() {
+    return new Interval();
+  }
+
+  /**
+   * Executes `fn` at `delay` interval, clearing any previously scheduled call.
+   */
+  start(delay, fn) {
+    this.clear();
+    this.currentId = setInterval(() => {
+      fn();
+    }, delay);
+  }
+  clear = () => {
+    if (this.currentId !== EMPTY) {
+      clearInterval(this.currentId);
+      this.currentId = EMPTY;
+    }
+  };
+}
+
+/**
+ * A `setInterval` with automatic cleanup and guard.
+ */
+function useInterval() {
+  const timeout = useRenderElement.useRefWithInit(Interval.create).current;
+  DrawerRoot.useOnMount(timeout.disposeEffect);
+  return timeout;
+}
+
+const NumberFieldRootContext = /*#__PURE__*/React__namespace.createContext(undefined);
+if (process.env.NODE_ENV !== "production") NumberFieldRootContext.displayName = "NumberFieldRootContext";
+function useNumberFieldRootContext() {
+  const context = React__namespace.useContext(NumberFieldRootContext);
+  if (context === undefined) {
+    throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: NumberFieldRootContext is missing. NumberField parts must be placed within <NumberField.Root>.' : useRenderElement.formatErrorMessage(43));
+  }
+  return context;
+}
+
+const stateAttributesMapping$1 = {
+  inputValue: () => null,
+  value: () => null,
+  ...fieldValidityMapping
+};
+
+const HAN_NUMERALS = ['零', '〇', '一', '二', '三', '四', '五', '六', '七', '八', '九'];
+// Map Han numeral characters to ASCII digits. Includes both forms of zero.
+const HAN_NUMERAL_TO_DIGIT = {
+  零: '0',
+  〇: '0',
+  一: '1',
+  二: '2',
+  三: '3',
+  四: '4',
+  五: '5',
+  六: '6',
+  七: '7',
+  八: '8',
+  九: '9'
+};
+const ARABIC_NUMERALS = ['٠', '١', '٢', '٣', '٤', '٥', '٦', '٧', '٨', '٩'];
+const PERSIAN_NUMERALS = ['۰', '۱', '۲', '۳', '۴', '۵', '۶', '۷', '۸', '۹'];
+const FULLWIDTH_NUMERALS = ['０', '１', '２', '３', '４', '５', '６', '７', '８', '９'];
+const PERCENTAGES = ['%', '٪', '％', '﹪'];
+const PERMILLE = ['‰', '؉'];
+const UNICODE_MINUS_SIGNS = ['−', '－', '‒', '–', '—', '﹣'];
+const UNICODE_PLUS_SIGNS = ['＋', '﹢'];
+
+// Fullwidth punctuation common in CJK inputs
+const FULLWIDTH_DECIMAL = '．'; // U+FF0E
+const FULLWIDTH_GROUP = '，'; // U+FF0C
+
+const ARABIC_RE = new RegExp(`[${ARABIC_NUMERALS.join('')}]`, 'g');
+const PERSIAN_RE = new RegExp(`[${PERSIAN_NUMERALS.join('')}]`, 'g');
+const FULLWIDTH_RE = new RegExp(`[${FULLWIDTH_NUMERALS.join('')}]`, 'g');
+const HAN_RE = new RegExp(`[${HAN_NUMERALS.join('')}]`, 'g');
+const PERCENT_RE = new RegExp(`[${PERCENTAGES.join('')}]`);
+const PERMILLE_RE = new RegExp(`[${PERMILLE.join('')}]`);
+
+// Detection regexes (non-global to avoid lastIndex side effects)
+const ARABIC_DETECT_RE = /[٠١٢٣٤٥٦٧٨٩]/;
+const PERSIAN_DETECT_RE = /[۰۱۲۳۴۵۶۷۸۹]/;
+const HAN_DETECT_RE = /[零〇一二三四五六七八九]/;
+const FULLWIDTH_DETECT_RE = new RegExp(`[${FULLWIDTH_NUMERALS.join('')}]`);
+const BASE_NON_NUMERIC_SYMBOLS = ['.', ',', FULLWIDTH_DECIMAL, FULLWIDTH_GROUP, '٫', '٬'];
+const SPACE_SEPARATOR_RE = /\p{Zs}/u;
+const PLUS_SIGNS_WITH_ASCII = ['+', ...UNICODE_PLUS_SIGNS];
+const MINUS_SIGNS_WITH_ASCII = ['-', ...UNICODE_MINUS_SIGNS];
+const escapeRegExp = s => s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+const escapeClassChar = s => s.replace(/[-\\\]^]/g, m => `\\${m}`); // escape for use inside [...]
+
+const charClassFrom = chars => `[${chars.map(escapeClassChar).join('')}]`;
+const ANY_MINUS_CLASS = charClassFrom(['-'].concat(UNICODE_MINUS_SIGNS));
+const ANY_PLUS_CLASS = charClassFrom(['+'].concat(UNICODE_PLUS_SIGNS));
+const ANY_MINUS_RE = new RegExp(ANY_MINUS_CLASS, 'gu');
+const ANY_PLUS_RE = new RegExp(ANY_PLUS_CLASS, 'gu');
+const ANY_MINUS_DETECT_RE = new RegExp(ANY_MINUS_CLASS);
+const ANY_PLUS_DETECT_RE = new RegExp(ANY_PLUS_CLASS);
+function getNumberLocaleDetails(locale, options) {
+  const parts = getFormatter(locale, options).formatToParts(11111.1);
+  const result = {};
+  parts.forEach(part => {
+    result[part.type] = part.value;
+  });
+
+  // The formatting options may result in not returning a decimal.
+  getFormatter(locale).formatToParts(0.1).forEach(part => {
+    if (part.type === 'decimal') {
+      result[part.type] = part.value;
+    }
+  });
+  return result;
+}
+function parseNumber(formattedNumber, locale, options) {
+  if (formattedNumber == null) {
+    return null;
+  }
+
+  // Normalize control characters and whitespace; remove bidi/format controls
+  let input = String(formattedNumber).replace(/\p{Cf}/gu, '').trim();
+
+  // Normalize unicode minus/plus to ASCII, handle leading/trailing signs
+  input = input.replace(ANY_MINUS_RE, '-').replace(ANY_PLUS_RE, '+');
+  let isNegative = false;
+
+  // Trailing sign, e.g. "1234-" / "1234+"
+  const trailing = input.match(/([+-])\s*$/);
+  if (trailing) {
+    if (trailing[1] === '-') {
+      isNegative = true;
+    }
+    input = input.replace(/([+-])\s*$/, '');
+  }
+  // Leading sign
+  const leading = input.match(/^\s*([+-])/);
+  if (leading) {
+    if (leading[1] === '-') {
+      isNegative = true;
+    }
+    input = input.replace(/^\s*[+-]/, '');
+  }
+
+  // Heuristic locale detection
+  let computedLocale = locale;
+  if (computedLocale === undefined) {
+    if (ARABIC_DETECT_RE.test(input) || PERSIAN_DETECT_RE.test(input)) {
+      computedLocale = 'ar';
+    } else if (HAN_DETECT_RE.test(input)) {
+      computedLocale = 'zh';
+    }
+  }
+  const {
+    group,
+    decimal,
+    currency
+  } = getNumberLocaleDetails(computedLocale, options);
+
+  // Build robust unit regex from all unit parts (such as "km/h")
+  const unitParts = getFormatter(computedLocale, options).formatToParts(1).filter(p => p.type === 'unit').map(p => escapeRegExp(p.value));
+  const unitRegex = unitParts.length ? new RegExp(unitParts.join('|'), 'g') : null;
+  let groupRegex = null;
+  if (group) {
+    const isSpaceGroup = /\p{Zs}/u.test(group);
+    const isApostropheGroup = group === "'" || group === '’';
+
+    // Check if the group separator is a space-like character.
+    // If so, we'll replace all such characters with an empty string.
+    if (isSpaceGroup) {
+      groupRegex = /\p{Zs}/gu;
+    } else if (isApostropheGroup) {
+      // Some environments format numbers with ASCII apostrophe and others with a curly apostrophe.
+      groupRegex = /['’]/g;
+    } else {
+      groupRegex = new RegExp(escapeRegExp(group), 'g');
+    }
+  }
+  const replacements = [{
+    regex: group ? groupRegex : null,
+    replacement: ''
+  }, {
+    regex: decimal ? new RegExp(escapeRegExp(decimal), 'g') : null,
+    replacement: '.'
+  },
+  // Fullwidth punctuation
+  {
+    regex: /．/g,
+    replacement: '.'
+  },
+  // FULLWIDTH_DECIMAL
+  {
+    regex: /，/g,
+    replacement: ''
+  },
+  // FULLWIDTH_GROUP
+  // Arabic punctuation
+  {
+    regex: /٫/g,
+    replacement: '.'
+  },
+  // ARABIC DECIMAL SEPARATOR (U+066B)
+  {
+    regex: /٬/g,
+    replacement: ''
+  },
+  // ARABIC THOUSANDS SEPARATOR (U+066C)
+  // Currency & unit labels
+  {
+    regex: currency ? new RegExp(escapeRegExp(currency), 'g') : null,
+    replacement: ''
+  }, {
+    regex: unitRegex,
+    replacement: ''
+  },
+  // Numeral systems to ASCII digits
+  {
+    regex: ARABIC_RE,
+    replacement: ch => String(ARABIC_NUMERALS.indexOf(ch))
+  }, {
+    regex: PERSIAN_RE,
+    replacement: ch => String(PERSIAN_NUMERALS.indexOf(ch))
+  }, {
+    regex: FULLWIDTH_RE,
+    replacement: ch => String(FULLWIDTH_NUMERALS.indexOf(ch))
+  }, {
+    regex: HAN_RE,
+    replacement: ch => HAN_NUMERAL_TO_DIGIT[ch]
+  }];
+  let unformatted = replacements.reduce((acc, {
+    regex,
+    replacement
+  }) => {
+    return regex ? acc.replace(regex, replacement) : acc;
+  }, input);
+
+  // Mixed-locale safety: keep only the last '.' as decimal
+  const lastDot = unformatted.lastIndexOf('.');
+  if (lastDot !== -1) {
+    unformatted = `${unformatted.slice(0, lastDot).replace(/\./g, '')}.${unformatted.slice(lastDot + 1).replace(/\./g, '')}`;
+  }
+
+  // Guard against Infinity inputs (ASCII and symbol)
+  if (/^[-+]?Infinity$/i.test(input) || /[∞]/.test(input)) {
+    return null;
+  }
+  const parseTarget = (isNegative ? '-' : '') + unformatted;
+  let num = parseFloat(parseTarget);
+  const style = options?.style;
+  const isUnitPercent = style === 'unit' && options?.unit === 'percent';
+  const hasPercentSymbol = PERCENT_RE.test(formattedNumber) || style === 'percent';
+  const hasPermilleSymbol = PERMILLE_RE.test(formattedNumber);
+  if (hasPermilleSymbol) {
+    num /= 1000;
+  } else if (!isUnitPercent && hasPercentSymbol) {
+    num /= 100;
+  }
+  if (Number.isNaN(num)) {
+    return null;
+  }
+  return num;
+}
+
+const CHANGE_VALUE_TICK_DELAY = 60;
+const START_AUTO_CHANGE_DELAY = 400;
+const TOUCH_TIMEOUT = 50;
+const MAX_POINTER_MOVES_AFTER_TOUCH = 3;
+const SCROLLING_POINTER_MOVE_DISTANCE = 8;
+const DEFAULT_STEP = 1;
+
+const STEP_EPSILON_FACTOR = 1e-10;
+function getFractionDigits(format) {
+  const defaultOptions = getFormatter('en-US').resolvedOptions();
+  const minimumFractionDigits = format?.minimumFractionDigits ?? defaultOptions.minimumFractionDigits ?? 0;
+  const maximumFractionDigits = Math.max(format?.maximumFractionDigits ?? defaultOptions.maximumFractionDigits ?? 20, minimumFractionDigits);
+  return {
+    maximumFractionDigits,
+    minimumFractionDigits
+  };
+}
+function roundToFractionDigits(value, maximumFractionDigits) {
+  if (!Number.isFinite(value)) {
+    return value;
+  }
+  const digits = Math.min(Math.max(maximumFractionDigits, 0), 20);
+  return Number(value.toFixed(digits));
+}
+function removeFloatingPointErrors(value, format) {
+  const {
+    maximumFractionDigits
+  } = getFractionDigits(format);
+  return roundToFractionDigits(value, maximumFractionDigits);
+}
+function snapToStep(clampedValue, base, step, mode = 'directional') {
+  if (step === 0) {
+    return clampedValue;
+  }
+  const stepSize = Math.abs(step);
+  const direction = Math.sign(step);
+  const tolerance = stepSize * STEP_EPSILON_FACTOR * direction;
+  const divisor = mode === 'nearest' ? step : stepSize;
+  const rawSteps = (clampedValue - base + tolerance) / divisor;
+  let snappedSteps;
+  if (mode === 'nearest') {
+    snappedSteps = Math.round(rawSteps);
+  } else if (direction > 0) {
+    snappedSteps = Math.floor(rawSteps);
+  } else {
+    snappedSteps = Math.ceil(rawSteps);
+  }
+  const stepForResult = mode === 'nearest' ? step : stepSize;
+  return base + snappedSteps * stepForResult;
+}
+function toValidatedNumber(value, {
+  step,
+  minWithDefault,
+  maxWithDefault,
+  minWithZeroDefault,
+  format,
+  snapOnStep,
+  small,
+  clamp: shouldClamp
+}) {
+  if (value === null) {
+    return value;
+  }
+  const clampedValue = shouldClamp ? DrawerRoot.clamp(value, minWithDefault, maxWithDefault) : value;
+  if (step != null && snapOnStep) {
+    if (step === 0) {
+      return removeFloatingPointErrors(clampedValue, format);
+    }
+
+    // If a real minimum is provided, use it
+    let base = minWithZeroDefault;
+    if (!small && minWithDefault !== Number.MIN_SAFE_INTEGER) {
+      base = minWithDefault;
+    }
+    const snappedValue = snapToStep(clampedValue, base, step, small ? 'nearest' : 'directional');
+    return removeFloatingPointErrors(snappedValue, format);
+  }
+  return removeFloatingPointErrors(clampedValue, format);
+}
+
+const NumberFieldRoot = /*#__PURE__*/React__namespace.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,
+    name: nameProp,
+    defaultValue,
+    value: valueProp,
+    onValueChange: onValueChangeProp,
+    onValueCommitted: onValueCommittedProp,
+    allowWheelScrub = false,
+    snapOnStep = false,
+    allowOutOfRange = false,
+    format,
+    locale,
+    render,
+    className,
+    inputRef: inputRefProp,
+    ...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__namespace.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__namespace.useRef(null);
+  const hiddenInputRef = useRenderElement.useMergedRefs(inputRefProp, validation.inputRef);
+  const id = useLabelableId({
+    id: idProp
+  });
+  const [valueUnwrapped, setValueUnwrapped] = DrawerRoot.useControlled({
+    controlled: valueProp,
+    default: defaultValue,
+    name: 'NumberField',
+    state: 'value'
+  });
+  const value = valueUnwrapped ?? null;
+  const valueRef = DrawerRoot.useValueAsRef(value);
+  DrawerRoot.useIsoLayoutEffect(() => {
+    setFilled(value !== null);
+  }, [setFilled, value]);
+  const forceRender = useForcedRerendering();
+  const formatOptionsRef = DrawerRoot.useValueAsRef(format);
+  const hasPendingCommitRef = React__namespace.useRef(false);
+  const onValueCommitted = DrawerRoot.useStableCallback((nextValue, eventDetails) => {
+    hasPendingCommitRef.current = false;
+    onValueCommittedProp?.(nextValue, eventDetails);
+  });
+  const startTickTimeout = DrawerRoot.useTimeout();
+  const tickInterval = useInterval();
+  const intentionalTouchCheckTimeout = DrawerRoot.useTimeout();
+  const isPressedRef = React__namespace.useRef(false);
+  const movesAfterTouchRef = React__namespace.useRef(0);
+  const allowInputSyncRef = React__namespace.useRef(true);
+  const lastChangedValueRef = React__namespace.useRef(null);
+  const unsubscribeFromGlobalContextMenuRef = React__namespace.useRef(() => {});
+
+  // 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__namespace.useState(() => {
+    if (valueProp !== undefined) {
+      return getControlledInputValue(value, locale, format);
+    }
+    return formatNumber(value, locale, format);
+  });
+  const [inputMode, setInputMode] = React__namespace.useState('numeric');
+  const getAllowedNonNumericKeys = DrawerRoot.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 = DrawerRoot.useStableCallback(event => {
+    if (event?.altKey) {
+      return smallStep;
+    }
+    if (event?.shiftKey) {
+      return largeStep;
+    }
+    return step;
+  });
+  const setValue = DrawerRoot.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 === DrawerRoot.inputChange || reason === DrawerRoot.inputBlur || reason === DrawerRoot.inputPaste || reason === DrawerRoot.inputClear || reason === DrawerRoot.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 === DrawerRoot.inputChange || details.reason === DrawerRoot.inputClear || details.reason === DrawerRoot.inputBlur || details.reason === DrawerRoot.inputPaste || details.reason === DrawerRoot.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 = DrawerRoot.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, DrawerRoot.createChangeEventDetails(reason, nativeEvent, undefined, {
+      direction
+    }));
+  });
+  const stopAutoChange = DrawerRoot.useStableCallback(() => {
+    intentionalTouchCheckTimeout.clear();
+    startTickTimeout.clear();
+    tickInterval.clear();
+    unsubscribeFromGlobalContextMenuRef.current();
+    movesAfterTouchRef.current = 0;
+  });
+  const startAutoChange = DrawerRoot.useStableCallback((isIncrement, triggerEvent) => {
+    stopAutoChange();
+    if (!inputRef.current) {
+      return;
+    }
+    const win = index_esm.getWindow(inputRef.current);
+    function handleContextMenu(event) {
+      event.preventDefault();
+    }
+
+    // A global context menu is necessary to prevent the context menu from appearing when the touch
+    // is slightly outside of the element's hit area.
+    win.addEventListener('contextmenu', handleContextMenu);
+    unsubscribeFromGlobalContextMenuRef.current = () => {
+      win.removeEventListener('contextmenu', handleContextMenu);
+    };
+    win.addEventListener('pointerup', event => {
+      isPressedRef.current = false;
+      stopAutoChange();
+      const committed = lastChangedValueRef.current ?? valueRef.current;
+      const commitReason = isIncrement ? DrawerRoot.incrementPress : DrawerRoot.decrementPress;
+      onValueCommitted(committed, DrawerRoot.createGenericEventDetails(commitReason, event));
+    }, {
+      once: true
+    });
+    function tick() {
+      const amount = getStepAmount(triggerEvent) ?? DEFAULT_STEP;
+      return incrementValue(amount, {
+        direction: isIncrement ? 1 : -1,
+        event: triggerEvent,
+        reason: isIncrement ? 'increment-press' : 'decrement-press'
+      });
+    }
+    if (!tick()) {
+      stopAutoChange();
+      return;
+    }
+    startTickTimeout.start(START_AUTO_CHANGE_DELAY, () => {
+      tickInterval.start(CHANGE_VALUE_TICK_DELAY, () => {
+        if (!tick()) {
+          stopAutoChange();
+        }
+      });
+    });
+  });
+
+  // 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
+  DrawerRoot.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);
+    }
+  });
+  DrawerRoot.useIsoLayoutEffect(function setDynamicInputModeForIOS() {
+    if (!DrawerRoot.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]);
+  React__namespace.useEffect(() => {
+    return () => stopAutoChange();
+  }, [stopAutoChange]);
+
+  // The `onWheel` prop can't be prevented, so we need to use a global event listener.
+  React__namespace.useEffect(function registerElementWheelListener() {
+    const element = inputRef.current;
+    if (disabled || readOnly || !allowWheelScrub || !element) {
+      return undefined;
+    }
+    function handleWheel(event) {
+      if (
+      // Allow pinch-zooming.
+      event.ctrlKey || DrawerRoot.ownerDocument(inputRef.current).activeElement !== inputRef.current) {
+        return;
+      }
+
+      // Prevent the default behavior to avoid scrolling the page.
+      event.preventDefault();
+      const amount = getStepAmount(event) ?? DEFAULT_STEP;
+      incrementValue(amount, {
+        direction: event.deltaY > 0 ? -1 : 1,
+        event,
+        reason: 'wheel'
+      });
+    }
+    element.addEventListener('wheel', handleWheel);
+    return () => {
+      element.removeEventListener('wheel', handleWheel);
+    };
+  }, [allowWheelScrub, incrementValue, disabled, readOnly, largeStep, step, getStepAmount]);
+  const state = React__namespace.useMemo(() => ({
+    ...fieldState,
+    disabled,
+    readOnly,
+    required,
+    value,
+    inputValue,
+    scrubbing: isScrubbing
+  }), [fieldState, disabled, readOnly, required, value, inputValue, isScrubbing]);
+  const contextValue = React__namespace.useMemo(() => ({
+    inputRef,
+    inputValue,
+    value,
+    startAutoChange,
+    stopAutoChange,
+    minWithDefault,
+    maxWithDefault,
+    disabled,
+    readOnly,
+    id,
+    setValue,
+    incrementValue,
+    getStepAmount,
+    allowInputSyncRef,
+    formatOptionsRef,
+    valueRef,
+    lastChangedValueRef,
+    hasPendingCommitRef,
+    isPressedRef,
+    intentionalTouchCheckTimeout,
+    movesAfterTouchRef,
+    name,
+    required,
+    invalid,
+    inputMode,
+    getAllowedNonNumericKeys,
+    min,
+    max,
+    setInputValue,
+    locale,
+    isScrubbing,
+    setIsScrubbing,
+    state,
+    onValueCommitted
+  }), [inputRef, inputValue, value, startAutoChange, stopAutoChange, minWithDefault, maxWithDefault, disabled, readOnly, id, setValue, incrementValue, getStepAmount, formatOptionsRef, valueRef, intentionalTouchCheckTimeout, name, required, invalid, inputMode, getAllowedNonNumericKeys, min, max, setInputValue, locale, isScrubbing, state, onValueCommitted]);
+  const element = useRenderElement.useRenderElement('div', componentProps, {
+    ref: forwardedRef,
+    state,
+    props: elementProps,
+    stateAttributesMapping: stateAttributesMapping$1
+  });
+  return /*#__PURE__*/jsxRuntime.jsxs(NumberFieldRootContext.Provider, {
+    value: contextValue,
+    children: [element, /*#__PURE__*/jsxRuntime.jsx("input", {
+      ...validation.getInputValidationProps({
+        onFocus() {
+          inputRef.current?.focus();
+        },
+        onChange(event) {
+          // Workaround for https://github.com/facebook/react/issues/9023
+          if (event.nativeEvent.defaultPrevented) {
+            return;
+          }
+
+          // Handle browser autofill.
+          const nextValue = event.currentTarget.valueAsNumber;
+          const parsedValue = Number.isNaN(nextValue) ? null : nextValue;
+          const details = DrawerRoot.createChangeEventDetails(DrawerRoot.none, event.nativeEvent);
+          setDirty(parsedValue !== validityData.initialValue);
+          setValue(parsedValue, details);
+          if (shouldValidateOnChange()) {
+            validation.commit(parsedValue);
+          }
+        }
+      }),
+      ref: hiddenInputRef,
+      type: "number",
+      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 ? DrawerRoot.visuallyHiddenInput : DrawerRoot.visuallyHidden
+    })]
+  });
+});
+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);
+}
+
+/**
+ * Groups the input with the increment and decrement buttons.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI Number Field](https://base-ui.com/react/components/number-field)
+ */
+const NumberFieldGroup = /*#__PURE__*/React__namespace.forwardRef(function NumberFieldGroup(componentProps, forwardedRef) {
+  const {
+    render,
+    className,
+    ...elementProps
+  } = componentProps;
+  const {
+    state
+  } = useNumberFieldRootContext();
+  const element = useRenderElement.useRenderElement('div', componentProps, {
+    ref: forwardedRef,
+    state,
+    props: [{
+      role: 'group'
+    }, elementProps],
+    stateAttributesMapping: stateAttributesMapping$1
+  });
+  return element;
+});
+if (process.env.NODE_ENV !== "production") NumberFieldGroup.displayName = "NumberFieldGroup";
+
+// 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,
+    disabled,
+    formatOptionsRef,
+    getStepAmount,
+    id,
+    incrementValue,
+    inputRef,
+    inputValue,
+    intentionalTouchCheckTimeout,
+    isIncrement,
+    isPressedRef,
+    locale,
+    movesAfterTouchRef,
+    readOnly,
+    setValue,
+    startAutoChange,
+    stopAutoChange,
+    valueRef,
+    lastChangedValueRef,
+    onValueCommitted
+  } = params;
+  const incrementDownCoordsRef = React__namespace.useRef({
+    x: 0,
+    y: 0
+  });
+  const isTouchingButtonRef = React__namespace.useRef(false);
+  const ignoreClickRef = React__namespace.useRef(false);
+  const pointerTypeRef = React__namespace.useRef('');
+  const pressReason = isIncrement ? 'increment-press' : 'decrement-press';
+  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, DrawerRoot.createChangeEventDetails(pressReason, nativeEvent, undefined, {
+        direction: isIncrement ? 1 : -1
+      }));
+    }
+  }
+  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'
+    },
+    onTouchStart() {
+      isTouchingButtonRef.current = true;
+    },
+    onTouchEnd() {
+      isTouchingButtonRef.current = false;
+    },
+    onClick(event) {
+      const isDisabled = disabled || readOnly;
+      if (event.defaultPrevented || isDisabled || (
+      // If it's not a keyboard/virtual click, ignore.
+      isTouchLikePointerType(pointerTypeRef.current) ? ignoreClickRef.current : event.detail !== 0)) {
+        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, DrawerRoot.createGenericEventDetails(pressReason, event.nativeEvent));
+      }
+    },
+    onPointerDown(event) {
+      const isMainButton = !event.button || event.button === 0;
+      if (event.defaultPrevented || readOnly || !isMainButton || disabled) {
+        return;
+      }
+      pointerTypeRef.current = event.pointerType;
+      ignoreClickRef.current = false;
+      isPressedRef.current = true;
+      incrementDownCoordsRef.current = {
+        x: event.clientX,
+        y: event.clientY
+      };
+      commitValue(event.nativeEvent);
+      const isTouchPointer = isTouchLikePointerType(event.pointerType);
+      if (!isTouchPointer) {
+        event.preventDefault();
+        inputRef.current?.focus();
+        startAutoChange(isIncrement, event);
+      } else {
+        // We need to check if the pointerdown was intentional, and not the result of a scroll
+        // or pinch-zoom. In that case, we don't want to change the value.
+        intentionalTouchCheckTimeout.start(TOUCH_TIMEOUT, () => {
+          const moves = movesAfterTouchRef.current;
+          movesAfterTouchRef.current = 0;
+          // Only start auto-change if the touch is still pressed (prevents races
+          // with pointerup occurring before the timeout fires on quick taps).
+          const stillPressed = isPressedRef.current;
+          if (stillPressed && moves != null && moves < MAX_POINTER_MOVES_AFTER_TOUCH) {
+            startAutoChange(isIncrement, event);
+            ignoreClickRef.current = true; // synthesized click should be ignored
+          } else {
+            // No auto-change (simple tap or scroll gesture), allow the click handler
+            // to perform a single increment and commit.
+            ignoreClickRef.current = false;
+            stopAutoChange();
+          }
+        });
+      }
+    },
+    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 (isTouchLikePointerType(event.pointerType)) {
+        isPressedRef.current = false;
+      }
+    },
+    onPointerMove(event) {
+      const isDisabled = disabled || readOnly;
+      if (isDisabled || !isTouchLikePointerType(event.pointerType) || !isPressedRef.current) {
+        return;
+      }
+      if (movesAfterTouchRef.current != null) {
+        movesAfterTouchRef.current += 1;
+      }
+      const {
+        x,
+        y
+      } = incrementDownCoordsRef.current;
+      const dx = x - event.clientX;
+      const dy = y - event.clientY;
+
+      // An alternative to this technique is to detect when the NumberField's parent container
+      // has been scrolled
+      if (dx ** 2 + dy ** 2 > SCROLLING_POINTER_MOVE_DISTANCE ** 2) {
+        stopAutoChange();
+      }
+    },
+    onMouseEnter(event) {
+      const isDisabled = disabled || readOnly;
+      if (event.defaultPrevented || isDisabled || !isPressedRef.current || isTouchingButtonRef.current || isTouchLikePointerType(pointerTypeRef.current)) {
+        return;
+      }
+      startAutoChange(isIncrement, event);
+    },
+    onMouseLeave() {
+      if (isTouchingButtonRef.current) {
+        return;
+      }
+      stopAutoChange();
+    },
+    onMouseUp() {
+      if (isTouchingButtonRef.current) {
+        return;
+      }
+      stopAutoChange();
+    }
+  };
+  return props;
+}
+
+/**
+ * A stepper button that increases the field value when clicked.
+ * Renders an `<button>` element.
+ *
+ * Documentation: [Base UI Number Field](https://base-ui.com/react/components/number-field)
+ */
+const NumberFieldIncrement = /*#__PURE__*/React__namespace.forwardRef(function NumberFieldIncrement(componentProps, forwardedRef) {
+  const {
+    render,
+    className,
+    disabled: disabledProp = false,
+    nativeButton = true,
+    ...elementProps
+  } = componentProps;
+  const {
+    allowInputSyncRef,
+    disabled: contextDisabled,
+    formatOptionsRef,
+    getStepAmount,
+    id,
+    incrementValue,
+    inputRef,
+    inputValue,
+    intentionalTouchCheckTimeout,
+    isPressedRef,
+    locale,
+    maxWithDefault,
+    movesAfterTouchRef,
+    readOnly,
+    setValue,
+    startAutoChange,
+    state,
+    stopAutoChange,
+    value,
+    valueRef,
+    lastChangedValueRef,
+    onValueCommitted
+  } = useNumberFieldRootContext();
+  const isMax = value != null && value >= maxWithDefault;
+  const disabled = disabledProp || contextDisabled || isMax;
+  const props = useNumberFieldButton({
+    isIncrement: true,
+    inputRef,
+    startAutoChange,
+    stopAutoChange,
+    inputValue,
+    disabled,
+    readOnly,
+    id,
+    setValue,
+    getStepAmount,
+    incrementValue,
+    allowInputSyncRef,
+    formatOptionsRef,
+    valueRef,
+    isPressedRef,
+    intentionalTouchCheckTimeout,
+    movesAfterTouchRef,
+    locale,
+    lastChangedValueRef,
+    onValueCommitted
+  });
+  const {
+    getButtonProps,
+    buttonRef
+  } = useButton({
+    disabled,
+    native: nativeButton,
+    focusableWhenDisabled: true
+  });
+  const buttonState = React__namespace.useMemo(() => ({
+    ...state,
+    disabled
+  }), [state, disabled]);
+  const element = useRenderElement.useRenderElement('button', componentProps, {
+    ref: [forwardedRef, buttonRef],
+    state: buttonState,
+    props: [props, elementProps, getButtonProps],
+    stateAttributesMapping: stateAttributesMapping$1
+  });
+  return element;
+});
+if (process.env.NODE_ENV !== "production") NumberFieldIncrement.displayName = "NumberFieldIncrement";
+
+/**
+ * A stepper button that decreases the field value when clicked.
+ * Renders an `<button>` element.
+ *
+ * Documentation: [Base UI Number Field](https://base-ui.com/react/components/number-field)
+ */
+const NumberFieldDecrement = /*#__PURE__*/React__namespace.forwardRef(function NumberFieldDecrement(componentProps, forwardedRef) {
+  const {
+    render,
+    className,
+    disabled: disabledProp = false,
+    nativeButton = true,
+    ...elementProps
+  } = componentProps;
+  const {
+    allowInputSyncRef,
+    disabled: contextDisabled,
+    formatOptionsRef,
+    getStepAmount,
+    id,
+    incrementValue,
+    inputRef,
+    inputValue,
+    intentionalTouchCheckTimeout,
+    isPressedRef,
+    minWithDefault,
+    movesAfterTouchRef,
+    readOnly,
+    setValue,
+    startAutoChange,
+    state,
+    stopAutoChange,
+    value,
+    valueRef,
+    locale,
+    lastChangedValueRef,
+    onValueCommitted
+  } = useNumberFieldRootContext();
+  const isMin = value != null && value <= minWithDefault;
+  const disabled = disabledProp || contextDisabled || isMin;
+  const props = useNumberFieldButton({
+    isIncrement: false,
+    inputRef,
+    startAutoChange,
+    stopAutoChange,
+    inputValue,
+    disabled,
+    readOnly,
+    id,
+    setValue,
+    getStepAmount,
+    incrementValue,
+    allowInputSyncRef,
+    formatOptionsRef,
+    valueRef,
+    isPressedRef,
+    intentionalTouchCheckTimeout,
+    movesAfterTouchRef,
+    locale,
+    lastChangedValueRef,
+    onValueCommitted
+  });
+  const {
+    getButtonProps,
+    buttonRef
+  } = useButton({
+    disabled,
+    native: nativeButton,
+    focusableWhenDisabled: true
+  });
+  const buttonState = React__namespace.useMemo(() => ({
+    ...state,
+    disabled
+  }), [state, disabled]);
+  const element = useRenderElement.useRenderElement('button', componentProps, {
+    ref: [forwardedRef, buttonRef],
+    state: buttonState,
+    props: [props, elementProps, getButtonProps],
+    stateAttributesMapping: stateAttributesMapping$1
+  });
+  return element;
+});
+if (process.env.NODE_ENV !== "production") NumberFieldDecrement.displayName = "NumberFieldDecrement";
+
+const stateAttributesMapping = {
+  ...fieldValidityMapping,
+  ...stateAttributesMapping$1
+};
+const NAVIGATE_KEYS = new Set(['Backspace', 'Delete', 'ArrowLeft', 'ArrowRight', 'Tab', 'Enter', 'Escape']);
+
+/**
+ * The native input control in the number field.
+ * Renders an `<input>` element.
+ *
+ * Documentation: [Base UI Number Field](https://base-ui.com/react/components/number-field)
+ */
+const NumberFieldInput = /*#__PURE__*/React__namespace.forwardRef(function NumberFieldInput(componentProps, forwardedRef) {
+  const {
+    render,
+    className,
+    ...elementProps
+  } = componentProps;
+  const {
+    allowInputSyncRef,
+    disabled,
+    formatOptionsRef,
+    getAllowedNonNumericKeys,
+    getStepAmount,
+    id,
+    incrementValue,
+    inputMode,
+    inputValue,
+    max,
+    min,
+    name,
+    readOnly,
+    required,
+    setValue,
+    state,
+    setInputValue,
+    locale,
+    inputRef,
+    value,
+    onValueCommitted,
+    lastChangedValueRef,
+    hasPendingCommitRef,
+    valueRef
+  } = useNumberFieldRootContext();
+  const {
+    clearErrors
+  } = useFormContext();
+  const {
+    validationMode,
+    setTouched,
+    setFocused,
+    invalid,
+    shouldValidateOnChange,
+    validation
+  } = useFieldRootContext();
+  const {
+    labelId
+  } = useLabelableContext();
+  const hasTouchedInputRef = React__namespace.useRef(false);
+  const blockRevalidationRef = React__namespace.useRef(false);
+  useField({
+    id,
+    commit: validation.commit,
+    value,
+    controlRef: inputRef,
+    name,
+    getValue: () => value ?? null
+  });
+  DrawerRoot.useValueChanged(value, previousValue => {
+    const validateOnChange = shouldValidateOnChange();
+    clearErrors(name);
+    if (validateOnChange) {
+      validation.commit(value);
+    }
+    if (previousValue === value || validateOnChange) {
+      return;
+    }
+    if (blockRevalidationRef.current) {
+      blockRevalidationRef.current = false;
+      return;
+    }
+    validation.commit(value, true);
+  });
+  const inputProps = {
+    id,
+    required,
+    disabled,
+    readOnly,
+    inputMode,
+    value: inputValue,
+    type: 'text',
+    autoComplete: 'off',
+    autoCorrect: 'off',
+    spellCheck: 'false',
+    'aria-roledescription': 'Number field',
+    'aria-invalid': invalid || undefined,
+    'aria-labelledby': labelId,
+    // If the server's locale does not match the client's locale, the formatting may not match,
+    // causing a hydration mismatch.
+    suppressHydrationWarning: true,
+    onFocus(event) {
+      if (event.defaultPrevented || readOnly || disabled) {
+        return;
+      }
+      setFocused(true);
+      if (hasTouchedInputRef.current) {
+        return;
+      }
+      hasTouchedInputRef.current = true;
+
+      // Browsers set selection at the start of the input field by default. We want to set it at
+      // the end for the first focus.
+      const target = event.currentTarget;
+      const length = target.value.length;
+      target.setSelectionRange(length, length);
+    },
+    onBlur(event) {
+      if (event.defaultPrevented || readOnly || disabled) {
+        return;
+      }
+      setTouched(true);
+      setFocused(false);
+      const hadManualInput = !allowInputSyncRef.current;
+      const hadPendingProgrammaticChange = hasPendingCommitRef.current;
+      allowInputSyncRef.current = true;
+      if (inputValue.trim() === '') {
+        setValue(null, DrawerRoot.createChangeEventDetails(DrawerRoot.inputClear, event.nativeEvent));
+        if (validationMode === 'onBlur') {
+          validation.commit(null);
+        }
+        onValueCommitted(null, DrawerRoot.createGenericEventDetails(DrawerRoot.inputClear, event.nativeEvent));
+        return;
+      }
+      const formatOptions = formatOptionsRef.current;
+      const parsedValue = parseNumber(inputValue, locale, formatOptions);
+      if (parsedValue === null) {
+        return;
+      }
+
+      // If an explicit precision is requested, round the committed numeric value.
+      const hasExplicitPrecision = formatOptions?.maximumFractionDigits != null || formatOptions?.minimumFractionDigits != null;
+      const maxFrac = formatOptions?.maximumFractionDigits;
+      const committed = hasExplicitPrecision && typeof maxFrac === 'number' ? Number(parsedValue.toFixed(maxFrac)) : parsedValue;
+      const nextEventDetails = DrawerRoot.createGenericEventDetails(DrawerRoot.inputBlur, event.nativeEvent);
+      const shouldUpdateValue = value !== committed;
+      const shouldCommit = hadManualInput || shouldUpdateValue || hadPendingProgrammaticChange;
+      if (validationMode === 'onBlur') {
+        validation.commit(committed);
+      }
+      if (shouldUpdateValue) {
+        blockRevalidationRef.current = true;
+        setValue(committed, DrawerRoot.createChangeEventDetails(DrawerRoot.inputBlur, event.nativeEvent));
+      }
+      if (shouldCommit) {
+        onValueCommitted(committed, nextEventDetails);
+      }
+
+      // Normalize only the displayed text
+      const canonicalText = formatNumber(committed, locale, formatOptions);
+      const maxPrecisionText = formatNumberMaxPrecision(parsedValue, locale, formatOptions);
+      const shouldPreserveFullPrecision = !hasExplicitPrecision && parsedValue === value && inputValue === maxPrecisionText;
+      if (!shouldPreserveFullPrecision && inputValue !== canonicalText) {
+        setInputValue(canonicalText);
+      }
+    },
+    onChange(event) {
+      // Workaround for https://github.com/facebook/react/issues/9023
+      if (event.nativeEvent.defaultPrevented) {
+        return;
+      }
+      allowInputSyncRef.current = false;
+      const targetValue = event.target.value;
+      if (targetValue.trim() === '') {
+        setInputValue(targetValue);
+        setValue(null, DrawerRoot.createChangeEventDetails(DrawerRoot.inputClear, event.nativeEvent));
+        return;
+      }
+
+      // 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 => {
+        const isAsciiDigit = ch >= '0' && ch <= '9';
+        const isArabicNumeral = ARABIC_DETECT_RE.test(ch);
+        const isHanNumeral = HAN_DETECT_RE.test(ch);
+        const isPersianNumeral = PERSIAN_DETECT_RE.test(ch);
+        const isFullwidthNumeral = FULLWIDTH_DETECT_RE.test(ch);
+        const isMinus = ANY_MINUS_DETECT_RE.test(ch);
+        return isAsciiDigit || isArabicNumeral || isHanNumeral || isPersianNumeral || isFullwidthNumeral || isMinus || allowedNonNumericKeys.has(ch);
+      });
+      if (!isValidCharacterString) {
+        return;
+      }
+      const parsedValue = parseNumber(targetValue, locale, formatOptionsRef.current);
+      setInputValue(targetValue);
+      if (parsedValue !== null) {
+        setValue(parsedValue, DrawerRoot.createChangeEventDetails(DrawerRoot.inputChange, event.nativeEvent));
+      }
+    },
+    onKeyDown(event) {
+      if (event.defaultPrevented || readOnly || disabled) {
+        return;
+      }
+      const nativeEvent = event.nativeEvent;
+      allowInputSyncRef.current = true;
+      const allowedNonNumericKeys = getAllowedNonNumericKeys();
+      let isAllowedNonNumericKey = allowedNonNumericKeys.has(event.key);
+      const {
+        decimal,
+        currency,
+        percentSign
+      } = getNumberLocaleDetails(locale, formatOptionsRef.current);
+      const selectionStart = event.currentTarget.selectionStart;
+      const selectionEnd = event.currentTarget.selectionEnd;
+      const isAllSelected = selectionStart === 0 && selectionEnd === inputValue.length;
+
+      // Normalize handling of plus/minus signs via precomputed regexes
+      const selectionContainsIndex = index => selectionStart != null && selectionEnd != null && index >= selectionStart && index < selectionEnd;
+      if (ANY_MINUS_DETECT_RE.test(event.key) && Array.from(allowedNonNumericKeys).some(k => ANY_MINUS_DETECT_RE.test(k || ''))) {
+        // Only allow one sign unless replacing the existing one or all text is selected
+        const existingIndex = inputValue.search(ANY_MINUS_RE);
+        const isReplacingExisting = existingIndex != null && existingIndex !== -1 && selectionContainsIndex(existingIndex);
+        isAllowedNonNumericKey = !(ANY_MINUS_DETECT_RE.test(inputValue) || ANY_PLUS_DETECT_RE.test(inputValue)) || isAllSelected || isReplacingExisting;
+      }
+      if (ANY_PLUS_DETECT_RE.test(event.key) && Array.from(allowedNonNumericKeys).some(k => ANY_PLUS_DETECT_RE.test(k || ''))) {
+        const existingIndex = inputValue.search(ANY_PLUS_RE);
+        const isReplacingExisting = existingIndex != null && existingIndex !== -1 && selectionContainsIndex(existingIndex);
+        isAllowedNonNumericKey = !(ANY_MINUS_DETECT_RE.test(inputValue) || ANY_PLUS_DETECT_RE.test(inputValue)) || isAllSelected || isReplacingExisting;
+      }
+
+      // Only allow one of each symbol.
+      [decimal, currency, percentSign].forEach(symbol => {
+        if (event.key === symbol) {
+          const symbolIndex = inputValue.indexOf(symbol);
+          const isSymbolHighlighted = selectionContainsIndex(symbolIndex);
+          isAllowedNonNumericKey = !inputValue.includes(symbol) || isAllSelected || isSymbolHighlighted;
+        }
+      });
+      const isAsciiDigit = event.key >= '0' && event.key <= '9';
+      const isArabicNumeral = ARABIC_DETECT_RE.test(event.key);
+      const isHanNumeral = HAN_DETECT_RE.test(event.key);
+      const isFullwidthNumeral = FULLWIDTH_DETECT_RE.test(event.key);
+      const isNavigateKey = NAVIGATE_KEYS.has(event.key);
+      if (
+      // Allow composition events (e.g., pinyin)
+      // event.nativeEvent.isComposing does not work in Safari:
+      // https://bugs.webkit.org/show_bug.cgi?id=165004
+      event.which === 229 || event.altKey || event.ctrlKey || event.metaKey || isAllowedNonNumericKey || isAsciiDigit || isArabicNumeral || isFullwidthNumeral || isHanNumeral || isNavigateKey) {
+        return;
+      }
+
+      // We need to commit the number at this point if the input hasn't been blurred.
+      const parsedValue = parseNumber(inputValue, locale, formatOptionsRef.current);
+      const amount = getStepAmount(event) ?? DEFAULT_STEP;
+
+      // Prevent insertion of text or caret from moving.
+      DrawerRoot.stopEvent(event);
+      const commitDetails = DrawerRoot.createGenericEventDetails(DrawerRoot.keyboard, nativeEvent);
+      if (event.key === 'ArrowUp') {
+        incrementValue(amount, {
+          direction: 1,
+          currentValue: parsedValue,
+          event: nativeEvent,
+          reason: DrawerRoot.keyboard
+        });
+        onValueCommitted(lastChangedValueRef.current ?? valueRef.current, commitDetails);
+      } else if (event.key === 'ArrowDown') {
+        incrementValue(amount, {
+          direction: -1,
+          currentValue: parsedValue,
+          event: nativeEvent,
+          reason: DrawerRoot.keyboard
+        });
+        onValueCommitted(lastChangedValueRef.current ?? valueRef.current, commitDetails);
+      } else if (event.key === 'Home' && min != null) {
+        setValue(min, DrawerRoot.createChangeEventDetails(DrawerRoot.keyboard, nativeEvent));
+        onValueCommitted(lastChangedValueRef.current ?? valueRef.current, commitDetails);
+      } else if (event.key === 'End' && max != null) {
+        setValue(max, DrawerRoot.createChangeEventDetails(DrawerRoot.keyboard, nativeEvent));
+        onValueCommitted(lastChangedValueRef.current ?? valueRef.current, commitDetails);
+      }
+    },
+    onPaste(event) {
+      if (event.defaultPrevented || readOnly || disabled) {
+        return;
+      }
+
+      // Prevent `onChange` from being called.
+      event.preventDefault();
+      const clipboardData = event.clipboardData || window.Clipboard;
+      const pastedData = clipboardData.getData('text/plain');
+      const parsedValue = parseNumber(pastedData, locale, formatOptionsRef.current);
+      if (parsedValue !== null) {
+        allowInputSyncRef.current = false;
+        setValue(parsedValue, DrawerRoot.createChangeEventDetails(DrawerRoot.inputPaste, event.nativeEvent));
+        setInputValue(pastedData);
+      }
+    }
+  };
+  const element = useRenderElement.useRenderElement('input', componentProps, {
+    ref: [forwardedRef, inputRef],
+    state,
+    props: [inputProps, validation.getValidationProps(), elementProps],
+    stateAttributesMapping
+  });
+  return element;
+});
+if (process.env.NODE_ENV !== "production") NumberFieldInput.displayName = "NumberFieldInput";
+
+const NumberFieldScrubAreaContext = /*#__PURE__*/React__namespace.createContext(undefined);
+if (process.env.NODE_ENV !== "production") NumberFieldScrubAreaContext.displayName = "NumberFieldScrubAreaContext";
+function useNumberFieldScrubAreaContext() {
+  const context = React__namespace.useContext(NumberFieldScrubAreaContext);
+  if (context === undefined) {
+    throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: NumberFieldScrubAreaContext is missing. NumberFieldScrubArea parts must be placed within <NumberField.ScrubArea>.' : useRenderElement.formatErrorMessage(44));
+  }
+  return context;
+}
+
+// Calculates the viewport rect for the virtual cursor.
+function getViewportRect(teleportDistance, scrubAreaEl) {
+  const win = index_esm.getWindow(scrubAreaEl);
+  const rect = scrubAreaEl.getBoundingClientRect();
+  if (rect && teleportDistance != null) {
+    return {
+      x: rect.left - teleportDistance / 2,
+      y: rect.top - teleportDistance / 2,
+      width: rect.right + teleportDistance / 2,
+      height: rect.bottom + teleportDistance / 2
+    };
+  }
+  const vV = win.visualViewport;
+  if (vV) {
+    return {
+      x: vV.offsetLeft,
+      y: vV.offsetTop,
+      width: vV.offsetLeft + vV.width,
+      height: vV.offsetTop + vV.height
+    };
+  }
+  return {
+    x: 0,
+    y: 0,
+    width: win.document.documentElement.clientWidth,
+    height: win.document.documentElement.clientHeight
+  };
+}
+
+// This lets us invert the scale of the cursor to match the OS scale, in which the cursor doesn't
+// scale with the content on pinch-zoom.
+function subscribeToVisualViewportResize(element, visualScaleRef) {
+  const vV = index_esm.getWindow(element).visualViewport;
+  if (!vV) {
+    return () => {};
+  }
+  function handleVisualResize() {
+    if (vV) {
+      visualScaleRef.current = vV.scale;
+    }
+  }
+  handleVisualResize();
+  vV.addEventListener('resize', handleVisualResize);
+  return () => {
+    vV.removeEventListener('resize', handleVisualResize);
+  };
+}
+
+const NumberFieldScrubArea = /*#__PURE__*/React__namespace.forwardRef(function NumberFieldScrubArea(componentProps, forwardedRef) {
+  const {
+    render,
+    className,
+    direction = 'horizontal',
+    pixelSensitivity = 2,
+    teleportDistance,
+    ...elementProps
+  } = componentProps;
+  const {
+    state,
+    setIsScrubbing: setRootScrubbing,
+    disabled,
+    readOnly,
+    inputRef,
+    incrementValue,
+    getStepAmount,
+    onValueCommitted,
+    lastChangedValueRef,
+    valueRef
+  } = useNumberFieldRootContext();
+  const scrubAreaRef = React__namespace.useRef(null);
+  const isScrubbingRef = React__namespace.useRef(false);
+  const didMoveRef = React__namespace.useRef(false);
+  const pointerDownTargetRef = React__namespace.useRef(null);
+  const scrubAreaCursorRef = React__namespace.useRef(null);
+  const virtualCursorCoords = React__namespace.useRef({
+    x: 0,
+    y: 0
+  });
+  const visualScaleRef = React__namespace.useRef(1);
+  const exitPointerLockTimeout = DrawerRoot.useTimeout();
+  const [isTouchInput, setIsTouchInput] = React__namespace.useState(false);
+  const [isPointerLockDenied, setIsPointerLockDenied] = React__namespace.useState(false);
+  const [isScrubbing, setIsScrubbing] = React__namespace.useState(false);
+  React__namespace.useEffect(() => {
+    if (!isScrubbing || !scrubAreaCursorRef.current) {
+      return undefined;
+    }
+    return subscribeToVisualViewportResize(scrubAreaCursorRef.current, visualScaleRef);
+  }, [isScrubbing]);
+  function updateCursorTransform(x, y) {
+    if (scrubAreaCursorRef.current) {
+      scrubAreaCursorRef.current.style.transform = `translate3d(${x}px,${y}px,0) scale(${1 / visualScaleRef.current})`;
+    }
+  }
+  const onScrub = DrawerRoot.useStableCallback(({
+    movementX,
+    movementY
+  }) => {
+    const virtualCursor = scrubAreaCursorRef.current;
+    const scrubAreaEl = scrubAreaRef.current;
+    if (!virtualCursor || !scrubAreaEl) {
+      return;
+    }
+    const rect = getViewportRect(teleportDistance, scrubAreaEl);
+    const coords = virtualCursorCoords.current;
+    const newCoords = {
+      x: Math.round(coords.x + movementX),
+      y: Math.round(coords.y + movementY)
+    };
+    const cursorWidth = virtualCursor.offsetWidth;
+    const cursorHeight = virtualCursor.offsetHeight;
+    if (newCoords.x + cursorWidth / 2 < rect.x) {
+      newCoords.x = rect.width - cursorWidth / 2;
+    } else if (newCoords.x + cursorWidth / 2 > rect.width) {
+      newCoords.x = rect.x - cursorWidth / 2;
+    }
+    if (newCoords.y + cursorHeight / 2 < rect.y) {
+      newCoords.y = rect.height - cursorHeight / 2;
+    } else if (newCoords.y + cursorHeight / 2 > rect.height) {
+      newCoords.y = rect.y - cursorHeight / 2;
+    }
+    virtualCursorCoords.current = newCoords;
+    updateCursorTransform(newCoords.x, newCoords.y);
+  });
+  const onScrubbingChange = DrawerRoot.useStableCallback((scrubbingValue, {
+    clientX,
+    clientY
+  }) => {
+    ReactDOM__namespace.flushSync(() => {
+      setIsScrubbing(scrubbingValue);
+      setRootScrubbing(scrubbingValue);
+    });
+    const virtualCursor = scrubAreaCursorRef.current;
+    if (!virtualCursor || !scrubbingValue) {
+      return;
+    }
+    const initialCoords = {
+      x: clientX - virtualCursor.offsetWidth / 2,
+      y: clientY - virtualCursor.offsetHeight / 2
+    };
+    virtualCursorCoords.current = initialCoords;
+    updateCursorTransform(initialCoords.x, initialCoords.y);
+  });
+  React__namespace.useEffect(function registerGlobalScrubbingEventListeners() {
+    // Only listen while actively scrubbing; avoids unrelated pointerup events committing.
+    if (!inputRef.current || disabled || readOnly || !isScrubbing) {
+      return undefined;
+    }
+    let cumulativeDelta = 0;
+    function handleScrubPointerUp(event) {
+      function handler() {
+        try {
+          DrawerRoot.ownerDocument(scrubAreaRef.current).exitPointerLock();
+        } catch {
+          // Ignore errors.
+        } finally {
+          isScrubbingRef.current = false;
+          onScrubbingChange(false, event);
+          onValueCommitted(lastChangedValueRef.current ?? valueRef.current, DrawerRoot.createGenericEventDetails(DrawerRoot.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 (DrawerRoot.isFirefox) {
+        // Firefox needs a small delay here when soft-clicking as the pointer
+        // lock will not release otherwise.
+        exitPointerLockTimeout.start(20, handler);
+      } else {
+        handler();
+      }
+    }
+    function handleScrubPointerMove(event) {
+      if (!isScrubbingRef.current) {
+        return;
+      }
+
+      // Prevent text selection.
+      event.preventDefault();
+      onScrub(event);
+      const {
+        movementX,
+        movementY
+      } = event;
+      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;
+        if (rawAmount !== 0) {
+          incrementValue(Math.abs(rawAmount), {
+            direction: rawAmount >= 0 ? 1 : -1,
+            event,
+            reason: DrawerRoot.scrub
+          });
+        }
+      }
+    }
+    const win = index_esm.getWindow(inputRef.current);
+    win.addEventListener('pointerup', handleScrubPointerUp, true);
+    win.addEventListener('pointermove', handleScrubPointerMove, true);
+    return () => {
+      exitPointerLockTimeout.clear();
+      win.removeEventListener('pointerup', handleScrubPointerUp, true);
+      win.removeEventListener('pointermove', handleScrubPointerMove, true);
+    };
+  }, [disabled, readOnly, incrementValue, isScrubbing, getStepAmount, inputRef, onScrubbingChange, onScrub, direction, pixelSensitivity, lastChangedValueRef, onValueCommitted, valueRef, exitPointerLockTimeout]);
+
+  // Prevent scrolling using touch input when scrubbing.
+  React__namespace.useEffect(function registerScrubberTouchPreventListener() {
+    const element = scrubAreaRef.current;
+    if (!element || disabled || readOnly) {
+      return undefined;
+    }
+    function handleTouchStart(event) {
+      if (event.touches.length === 1) {
+        event.preventDefault();
+      }
+    }
+    element.addEventListener('touchstart', handleTouchStart);
+    return () => {
+      element.removeEventListener('touchstart', handleTouchStart);
+    };
+  }, [disabled, readOnly]);
+  const defaultProps = {
+    role: 'presentation',
+    style: {
+      touchAction: 'none',
+      WebkitUserSelect: 'none',
+      userSelect: 'none'
+    },
+    async onPointerDown(event) {
+      const isMainButton = !event.button || event.button === 0;
+      if (event.defaultPrevented || readOnly || !isMainButton || disabled) {
+        return;
+      }
+      const isTouch = event.pointerType === 'touch';
+      setIsTouchInput(isTouch);
+      if (event.pointerType === 'mouse') {
+        event.preventDefault();
+        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.
+      if (!isTouch && !DrawerRoot.isWebKit) {
+        try {
+          // Avoid non-deterministic errors in testing environments. This error sometimes
+          // appears:
+          // "The root document of this element is not valid for pointer lock."
+          await DrawerRoot.ownerDocument(scrubAreaRef.current).body.requestPointerLock();
+          setIsPointerLockDenied(false);
+        } catch (error) {
+          setIsPointerLockDenied(true);
+        } finally {
+          if (isScrubbingRef.current) {
+            ReactDOM__namespace.flushSync(() => {
+              onScrubbingChange(true, event.nativeEvent);
+            });
+          }
+        }
+      }
+    }
+  };
+  const element = useRenderElement.useRenderElement('span', componentProps, {
+    ref: [forwardedRef, scrubAreaRef],
+    state,
+    props: [defaultProps, elementProps],
+    stateAttributesMapping: stateAttributesMapping$1
+  });
+  const contextValue = React__namespace.useMemo(() => ({
+    isScrubbing,
+    isTouchInput,
+    isPointerLockDenied,
+    scrubAreaCursorRef,
+    scrubAreaRef,
+    direction,
+    pixelSensitivity,
+    teleportDistance
+  }), [isScrubbing, isTouchInput, isPointerLockDenied, direction, pixelSensitivity, teleportDistance]);
+  return /*#__PURE__*/jsxRuntime.jsx(NumberFieldScrubAreaContext.Provider, {
+    value: contextValue,
+    children: element
+  });
+});
+if (process.env.NODE_ENV !== "production") NumberFieldScrubArea.displayName = "NumberFieldScrubArea";
+
+/**
+ * A custom element to display instead of the native cursor while using the scrub area.
+ * Renders a `<span>` element.
+ *
+ * This component uses the [Pointer Lock API](https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API), which may prompt the browser to display a related notification. It is disabled
+ * in Safari to avoid a layout shift that this notification causes there.
+ *
+ * Documentation: [Base UI Number Field](https://base-ui.com/react/components/number-field)
+ */
+const NumberFieldScrubAreaCursor = /*#__PURE__*/React__namespace.forwardRef(function NumberFieldScrubAreaCursor(componentProps, forwardedRef) {
+  const {
+    render,
+    className,
+    ...elementProps
+  } = componentProps;
+  const {
+    state
+  } = useNumberFieldRootContext();
+  const {
+    isScrubbing,
+    isTouchInput,
+    isPointerLockDenied,
+    scrubAreaCursorRef
+  } = useNumberFieldScrubAreaContext();
+  const [domElement, setDomElement] = React__namespace.useState(null);
+  const shouldRender = isScrubbing && !DrawerRoot.isWebKit && !isTouchInput && !isPointerLockDenied;
+  const element = useRenderElement.useRenderElement('span', componentProps, {
+    enabled: shouldRender,
+    ref: [forwardedRef, scrubAreaCursorRef, setDomElement],
+    state,
+    props: [{
+      role: 'presentation',
+      style: {
+        position: 'fixed',
+        top: 0,
+        left: 0,
+        pointerEvents: 'none'
+      }
+    }, elementProps],
+    stateAttributesMapping: stateAttributesMapping$1
+  });
+  return element && /*#__PURE__*/ReactDOM__namespace.createPortal(element, DrawerRoot.ownerDocument(domElement).body);
+});
+if (process.env.NODE_ENV !== "production") NumberFieldScrubAreaCursor.displayName = "NumberFieldScrubAreaCursor";
+
+var index_parts = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  Decrement: NumberFieldDecrement,
+  Group: NumberFieldGroup,
+  Increment: NumberFieldIncrement,
+  Input: NumberFieldInput,
+  Root: NumberFieldRoot,
+  ScrubArea: NumberFieldScrubArea,
+  ScrubAreaCursor: NumberFieldScrubAreaCursor
+});
+
 exports.Separator = Separator.Separator;
-exports.Combobox = index_parts$1;
-exports.Drawer = index_parts;
+exports.Combobox = index_parts$2;
+exports.Drawer = index_parts$1;
+exports.NumberField = index_parts;