@jobber/components 7.10.0 → 7.11.0

package/dist/NumberFieldInput-es.js

@@ -0,0 +1,1788 @@
+import * as React from 'react';
+import { a as useStableCallback, u as useIsoLayoutEffect, f as useOnMount, T as Timeout, g as clamp, h as useControlled, i as useValueAsRef, c as useTimeout, j as isIOS, k as createChangeEventDetails, n as none, v as visuallyHiddenInput, l as visuallyHidden, m as inputChange, o as inputClear, p as inputBlur, q as inputPaste, r as createGenericEventDetails, s as ownerDocument, w as incrementPress, x as decrementPress, y as useValueChanged, z as stopEvent, A as keyboard } from './useValueChanged-es.js';
+import { N as NOOP, f as formatErrorMessage, E as EMPTY_OBJECT, b as useRefWithInit, c as useMergedRefs, u as useRenderElement } from './useRenderElement-es.js';
+import { b as isElement, k as getWindow } from './floating-ui.utils.dom-es.js';
+import { u as useBaseUiId, a as useButton } from './useBaseUiId-es.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import * as ReactDOM from 'react-dom';
+
+/**
+ * Returns a function that forces a rerender.
+ */
+function useForcedRerendering() {
+  const [, setState] = React.useState({});
+  return React.useCallback(() => {
+    setState({});
+  }, []);
+}
+
+let FieldControlDataAttributes = /*#__PURE__*/function (FieldControlDataAttributes) {
+  /**
+   * Present when the field is disabled.
+   */
+  FieldControlDataAttributes["disabled"] = "data-disabled";
+  /**
+   * Present when the field is in valid state.
+   */
+  FieldControlDataAttributes["valid"] = "data-valid";
+  /**
+   * Present when the field is in invalid state.
+   */
+  FieldControlDataAttributes["invalid"] = "data-invalid";
+  /**
+   * Present when the field has been touched.
+   */
+  FieldControlDataAttributes["touched"] = "data-touched";
+  /**
+   * Present when the field's value has changed.
+   */
+  FieldControlDataAttributes["dirty"] = "data-dirty";
+  /**
+   * Present when the field is filled.
+   */
+  FieldControlDataAttributes["filled"] = "data-filled";
+  /**
+   * Present when the field control is focused.
+   */
+  FieldControlDataAttributes["focused"] = "data-focused";
+  return FieldControlDataAttributes;
+}({});
+
+const DEFAULT_VALIDITY_STATE = {
+  badInput: false,
+  customError: false,
+  patternMismatch: false,
+  rangeOverflow: false,
+  rangeUnderflow: false,
+  stepMismatch: false,
+  tooLong: false,
+  tooShort: false,
+  typeMismatch: false,
+  valid: null,
+  valueMissing: false
+};
+const DEFAULT_FIELD_STATE_ATTRIBUTES = {
+  valid: null,
+  touched: false,
+  dirty: false,
+  filled: false,
+  focused: false
+};
+const DEFAULT_FIELD_ROOT_STATE = {
+  disabled: false,
+  ...DEFAULT_FIELD_STATE_ATTRIBUTES
+};
+const fieldValidityMapping = {
+  valid(value) {
+    if (value === null) {
+      return null;
+    }
+    if (value) {
+      return {
+        [FieldControlDataAttributes.valid]: ''
+      };
+    }
+    return {
+      [FieldControlDataAttributes.invalid]: ''
+    };
+  }
+};
+
+const FieldRootContext = /*#__PURE__*/React.createContext({
+  invalid: undefined,
+  name: undefined,
+  validityData: {
+    state: DEFAULT_VALIDITY_STATE,
+    errors: [],
+    error: '',
+    value: '',
+    initialValue: null
+  },
+  setValidityData: NOOP,
+  disabled: undefined,
+  touched: DEFAULT_FIELD_STATE_ATTRIBUTES.touched,
+  setTouched: NOOP,
+  dirty: DEFAULT_FIELD_STATE_ATTRIBUTES.dirty,
+  setDirty: NOOP,
+  filled: DEFAULT_FIELD_STATE_ATTRIBUTES.filled,
+  setFilled: NOOP,
+  focused: DEFAULT_FIELD_STATE_ATTRIBUTES.focused,
+  setFocused: NOOP,
+  validate: () => null,
+  validationMode: 'onSubmit',
+  validationDebounceTime: 0,
+  shouldValidateOnChange: () => false,
+  state: DEFAULT_FIELD_ROOT_STATE,
+  markedDirtyRef: {
+    current: false
+  },
+  validation: {
+    getValidationProps: (props = EMPTY_OBJECT) => props,
+    getInputValidationProps: (props = EMPTY_OBJECT) => props,
+    inputRef: {
+      current: null
+    },
+    commit: async () => {}
+  }
+});
+if (process.env.NODE_ENV !== "production") FieldRootContext.displayName = "FieldRootContext";
+function useFieldRootContext(optional = true) {
+  const context = React.useContext(FieldRootContext);
+  if (context.setValidityData === NOOP && !optional) {
+    throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: FieldRootContext is missing. Field parts must be placed within <Field.Root>.' : formatErrorMessage(28));
+  }
+  return context;
+}
+
+/**
+ * Combines the field's client-side, stateful validity data with the external invalid state to
+ * determine the field's true validity.
+ */
+function getCombinedFieldValidityData(validityData, invalid) {
+  return {
+    ...validityData,
+    state: {
+      ...validityData.state,
+      valid: !invalid && validityData.state.valid
+    }
+  };
+}
+
+const FormContext = /*#__PURE__*/React.createContext({
+  formRef: {
+    current: {
+      fields: new Map()
+    }
+  },
+  errors: {},
+  clearErrors: NOOP,
+  validationMode: 'onSubmit',
+  submitAttemptedRef: {
+    current: false
+  }
+});
+if (process.env.NODE_ENV !== "production") FormContext.displayName = "FormContext";
+function useFormContext() {
+  return React.useContext(FormContext);
+}
+
+function useField(params) {
+  const {
+    enabled = true,
+    value,
+    id,
+    name,
+    controlRef,
+    commit
+  } = params;
+  const {
+    formRef
+  } = useFormContext();
+  const {
+    invalid,
+    markedDirtyRef,
+    validityData,
+    setValidityData
+  } = useFieldRootContext();
+  const getValue = useStableCallback(params.getValue);
+  useIsoLayoutEffect(() => {
+    if (!enabled) {
+      return;
+    }
+    let initialValue = value;
+    if (initialValue === undefined) {
+      initialValue = getValue();
+    }
+    if (validityData.initialValue === null && initialValue !== null) {
+      setValidityData(prev => ({
+        ...prev,
+        initialValue
+      }));
+    }
+  }, [enabled, setValidityData, value, validityData.initialValue, getValue]);
+  useIsoLayoutEffect(() => {
+    if (!enabled || !id) {
+      return;
+    }
+    formRef.current.fields.set(id, {
+      getValue,
+      name,
+      controlRef,
+      validityData: getCombinedFieldValidityData(validityData, invalid),
+      validate(flushSync = true) {
+        let nextValue = value;
+        if (nextValue === undefined) {
+          nextValue = getValue();
+        }
+        markedDirtyRef.current = true;
+        if (!flushSync) {
+          commit(nextValue);
+        } else {
+          // Synchronously update the validity state so the submit event can be prevented.
+          ReactDOM.flushSync(() => commit(nextValue));
+        }
+      }
+    });
+  }, [commit, controlRef, enabled, formRef, getValue, id, invalid, markedDirtyRef, name, validityData, value]);
+  useIsoLayoutEffect(() => {
+    const fields = formRef.current.fields;
+    return () => {
+      if (id) {
+        fields.delete(id);
+      }
+    };
+  }, [formRef, id]);
+}
+
+/**
+ * A context for providing [labelable elements](https://html.spec.whatwg.org/multipage/forms.html#category-label)\
+ * with an accessible name (label) and description.
+ */
+const LabelableContext = /*#__PURE__*/React.createContext({
+  controlId: undefined,
+  registerControlId: NOOP,
+  labelId: undefined,
+  setLabelId: NOOP,
+  messageIds: [],
+  setMessageIds: NOOP,
+  getDescriptionProps: externalProps => externalProps
+});
+if (process.env.NODE_ENV !== "production") LabelableContext.displayName = "LabelableContext";
+function useLabelableContext() {
+  return React.useContext(LabelableContext);
+}
+
+function useLabelableId(params = {}) {
+  const {
+    id,
+    implicit = false,
+    controlRef
+  } = params;
+  const {
+    controlId,
+    registerControlId
+  } = useLabelableContext();
+  const defaultId = useBaseUiId(id);
+  const controlIdForEffect = implicit ? controlId : undefined;
+  const controlSourceRef = useRefWithInit(() => Symbol('labelable-control'));
+  const hasRegisteredRef = React.useRef(false);
+  const hadExplicitIdRef = React.useRef(id != null);
+  const unregisterControlId = useStableCallback(() => {
+    if (!hasRegisteredRef.current || registerControlId === NOOP) {
+      return;
+    }
+    hasRegisteredRef.current = false;
+    registerControlId(controlSourceRef.current, undefined);
+  });
+  useIsoLayoutEffect(() => {
+    if (registerControlId === NOOP) {
+      return undefined;
+    }
+    let nextId;
+    if (implicit) {
+      const elem = controlRef?.current;
+      if (isElement(elem) && elem.closest('label') != null) {
+        nextId = id ?? null;
+      } else {
+        nextId = controlIdForEffect ?? defaultId;
+      }
+    } else if (id != null) {
+      hadExplicitIdRef.current = true;
+      nextId = id;
+    } else if (hadExplicitIdRef.current) {
+      nextId = defaultId;
+    } else {
+      unregisterControlId();
+      return undefined;
+    }
+    if (nextId === undefined) {
+      unregisterControlId();
+      return undefined;
+    }
+    hasRegisteredRef.current = true;
+    registerControlId(controlSourceRef.current, nextId);
+    return undefined;
+  }, [id, controlRef, controlIdForEffect, registerControlId, implicit, defaultId, controlSourceRef, unregisterControlId]);
+  React.useEffect(() => {
+    return unregisterControlId;
+  }, [unregisterControlId]);
+  return controlId ?? defaultId;
+}
+
+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 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 = useRefWithInit(Interval.create).current;
+  useOnMount(timeout.disposeEffect);
+  return timeout;
+}
+
+const NumberFieldRootContext = /*#__PURE__*/React.createContext(undefined);
+if (process.env.NODE_ENV !== "production") NumberFieldRootContext.displayName = "NumberFieldRootContext";
+function useNumberFieldRootContext() {
+  const context = React.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>.' : 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 ? 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.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.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 startTickTimeout = useTimeout();
+  const tickInterval = useInterval();
+  const intentionalTouchCheckTimeout = useTimeout();
+  const isPressedRef = React.useRef(false);
+  const movesAfterTouchRef = React.useRef(0);
+  const allowInputSyncRef = React.useRef(true);
+  const lastChangedValueRef = React.useRef(null);
+  const unsubscribeFromGlobalContextMenuRef = React.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.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 === inputChange || reason === inputBlur || reason === inputPaste || reason === inputClear || reason === 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 === inputChange || details.reason === inputClear || details.reason === inputBlur || details.reason === inputPaste || details.reason === 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
+    }));
+  });
+  const stopAutoChange = useStableCallback(() => {
+    intentionalTouchCheckTimeout.clear();
+    startTickTimeout.clear();
+    tickInterval.clear();
+    unsubscribeFromGlobalContextMenuRef.current();
+    movesAfterTouchRef.current = 0;
+  });
+  const startAutoChange = useStableCallback((isIncrement, triggerEvent) => {
+    stopAutoChange();
+    if (!inputRef.current) {
+      return;
+    }
+    const win = 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 ? incrementPress : decrementPress;
+      onValueCommitted(committed, 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
+  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]);
+  React.useEffect(() => {
+    return () => stopAutoChange();
+  }, [stopAutoChange]);
+
+  // 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 || 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.useMemo(() => ({
+    ...fieldState,
+    disabled,
+    readOnly,
+    required,
+    value,
+    inputValue,
+    scrubbing: isScrubbing
+  }), [fieldState, disabled, readOnly, required, value, inputValue, isScrubbing]);
+  const contextValue = React.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('div', componentProps, {
+    ref: forwardedRef,
+    state,
+    props: elementProps,
+    stateAttributesMapping: stateAttributesMapping$1
+  });
+  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) {
+            return;
+          }
+
+          // Handle browser autofill.
+          const nextValue = event.currentTarget.valueAsNumber;
+          const parsedValue = Number.isNaN(nextValue) ? null : nextValue;
+          const details = createChangeEventDetails(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 ? visuallyHiddenInput : 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.forwardRef(function NumberFieldGroup(componentProps, forwardedRef) {
+  const {
+    render,
+    className,
+    ...elementProps
+  } = componentProps;
+  const {
+    state
+  } = useNumberFieldRootContext();
+  const element = 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.useRef({
+    x: 0,
+    y: 0
+  });
+  const isTouchingButtonRef = React.useRef(false);
+  const ignoreClickRef = React.useRef(false);
+  const pointerTypeRef = React.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, 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, 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.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.useMemo(() => ({
+    ...state,
+    disabled
+  }), [state, disabled]);
+  const element = 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.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.useMemo(() => ({
+    ...state,
+    disabled
+  }), [state, disabled]);
+  const element = 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.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.useRef(false);
+  const blockRevalidationRef = React.useRef(false);
+  useField({
+    id,
+    commit: validation.commit,
+    value,
+    controlRef: inputRef,
+    name,
+    getValue: () => value ?? null
+  });
+  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, createChangeEventDetails(inputClear, event.nativeEvent));
+        if (validationMode === 'onBlur') {
+          validation.commit(null);
+        }
+        onValueCommitted(null, createGenericEventDetails(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 = createGenericEventDetails(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, createChangeEventDetails(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, createChangeEventDetails(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, createChangeEventDetails(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.
+      stopEvent(event);
+      const commitDetails = createGenericEventDetails(keyboard, nativeEvent);
+      if (event.key === 'ArrowUp') {
+        incrementValue(amount, {
+          direction: 1,
+          currentValue: parsedValue,
+          event: nativeEvent,
+          reason: keyboard
+        });
+        onValueCommitted(lastChangedValueRef.current ?? valueRef.current, commitDetails);
+      } else if (event.key === 'ArrowDown') {
+        incrementValue(amount, {
+          direction: -1,
+          currentValue: parsedValue,
+          event: nativeEvent,
+          reason: keyboard
+        });
+        onValueCommitted(lastChangedValueRef.current ?? valueRef.current, commitDetails);
+      } else if (event.key === 'Home' && min != null) {
+        setValue(min, createChangeEventDetails(keyboard, nativeEvent));
+        onValueCommitted(lastChangedValueRef.current ?? valueRef.current, commitDetails);
+      } else if (event.key === 'End' && max != null) {
+        setValue(max, createChangeEventDetails(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, createChangeEventDetails(inputPaste, event.nativeEvent));
+        setInputValue(pastedData);
+      }
+    }
+  };
+  const element = useRenderElement('input', componentProps, {
+    ref: [forwardedRef, inputRef],
+    state,
+    props: [inputProps, validation.getValidationProps(), elementProps],
+    stateAttributesMapping
+  });
+  return element;
+});
+if (process.env.NODE_ENV !== "production") NumberFieldInput.displayName = "NumberFieldInput";
+
+export { DEFAULT_VALIDITY_STATE as D, FieldRootContext as F, LabelableContext as L, NumberFieldRoot as N, useFormContext as a, useFieldRootContext as b, NumberFieldGroup as c, NumberFieldInput as d, NumberFieldIncrement as e, fieldValidityMapping as f, getCombinedFieldValidityData as g, NumberFieldDecrement as h, useLabelableId as i, useField as j, DEFAULT_FIELD_STATE_ATTRIBUTES as k, useNumberFieldRootContext as l, DEFAULT_STEP as m, stateAttributesMapping$1 as s, useLabelableContext as u };