@jobber/components 7.10.0 → 7.11.0

package/dist/NumberFieldInput-cjs.js

@@ -0,0 +1,1828 @@
+'use strict';
+
+var React = require('react');
+var useValueChanged = require('./useValueChanged-cjs.js');
+var useRenderElement = require('./useRenderElement-cjs.js');
+var floatingUi_utils_dom = require('./floating-ui.utils.dom-cjs.js');
+var useBaseUiId = require('./useBaseUiId-cjs.js');
+var jsxRuntime = require('react/jsx-runtime');
+var ReactDOM = require('react-dom');
+
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+var ReactDOM__namespace = /*#__PURE__*/_interopNamespaceDefault(ReactDOM);
+
+/**
+ * Returns a function that forces a rerender.
+ */
+function useForcedRerendering() {
+  const [, setState] = React__namespace.useState({});
+  return React__namespace.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__namespace.createContext({
+  invalid: undefined,
+  name: undefined,
+  validityData: {
+    state: DEFAULT_VALIDITY_STATE,
+    errors: [],
+    error: '',
+    value: '',
+    initialValue: null
+  },
+  setValidityData: useRenderElement.NOOP,
+  disabled: undefined,
+  touched: DEFAULT_FIELD_STATE_ATTRIBUTES.touched,
+  setTouched: useRenderElement.NOOP,
+  dirty: DEFAULT_FIELD_STATE_ATTRIBUTES.dirty,
+  setDirty: useRenderElement.NOOP,
+  filled: DEFAULT_FIELD_STATE_ATTRIBUTES.filled,
+  setFilled: useRenderElement.NOOP,
+  focused: DEFAULT_FIELD_STATE_ATTRIBUTES.focused,
+  setFocused: useRenderElement.NOOP,
+  validate: () => null,
+  validationMode: 'onSubmit',
+  validationDebounceTime: 0,
+  shouldValidateOnChange: () => false,
+  state: DEFAULT_FIELD_ROOT_STATE,
+  markedDirtyRef: {
+    current: false
+  },
+  validation: {
+    getValidationProps: (props = useRenderElement.EMPTY_OBJECT) => props,
+    getInputValidationProps: (props = useRenderElement.EMPTY_OBJECT) => props,
+    inputRef: {
+      current: null
+    },
+    commit: async () => {}
+  }
+});
+if (process.env.NODE_ENV !== "production") FieldRootContext.displayName = "FieldRootContext";
+function useFieldRootContext(optional = true) {
+  const context = React__namespace.useContext(FieldRootContext);
+  if (context.setValidityData === useRenderElement.NOOP && !optional) {
+    throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: FieldRootContext is missing. Field parts must be placed within <Field.Root>.' : useRenderElement.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__namespace.createContext({
+  formRef: {
+    current: {
+      fields: new Map()
+    }
+  },
+  errors: {},
+  clearErrors: useRenderElement.NOOP,
+  validationMode: 'onSubmit',
+  submitAttemptedRef: {
+    current: false
+  }
+});
+if (process.env.NODE_ENV !== "production") FormContext.displayName = "FormContext";
+function useFormContext() {
+  return React__namespace.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 = useValueChanged.useStableCallback(params.getValue);
+  useValueChanged.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]);
+  useValueChanged.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__namespace.flushSync(() => commit(nextValue));
+        }
+      }
+    });
+  }, [commit, controlRef, enabled, formRef, getValue, id, invalid, markedDirtyRef, name, validityData, value]);
+  useValueChanged.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__namespace.createContext({
+  controlId: undefined,
+  registerControlId: useRenderElement.NOOP,
+  labelId: undefined,
+  setLabelId: useRenderElement.NOOP,
+  messageIds: [],
+  setMessageIds: useRenderElement.NOOP,
+  getDescriptionProps: externalProps => externalProps
+});
+if (process.env.NODE_ENV !== "production") LabelableContext.displayName = "LabelableContext";
+function useLabelableContext() {
+  return React__namespace.useContext(LabelableContext);
+}
+
+function useLabelableId(params = {}) {
+  const {
+    id,
+    implicit = false,
+    controlRef
+  } = params;
+  const {
+    controlId,
+    registerControlId
+  } = useLabelableContext();
+  const defaultId = useBaseUiId.useBaseUiId(id);
+  const controlIdForEffect = implicit ? controlId : undefined;
+  const controlSourceRef = useRenderElement.useRefWithInit(() => Symbol('labelable-control'));
+  const hasRegisteredRef = React__namespace.useRef(false);
+  const hadExplicitIdRef = React__namespace.useRef(id != null);
+  const unregisterControlId = useValueChanged.useStableCallback(() => {
+    if (!hasRegisteredRef.current || registerControlId === useRenderElement.NOOP) {
+      return;
+    }
+    hasRegisteredRef.current = false;
+    registerControlId(controlSourceRef.current, undefined);
+  });
+  useValueChanged.useIsoLayoutEffect(() => {
+    if (registerControlId === useRenderElement.NOOP) {
+      return undefined;
+    }
+    let nextId;
+    if (implicit) {
+      const elem = controlRef?.current;
+      if (floatingUi_utils_dom.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__namespace.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 useValueChanged.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;
+  useValueChanged.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 ? useValueChanged.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] = useValueChanged.useControlled({
+    controlled: valueProp,
+    default: defaultValue,
+    name: 'NumberField',
+    state: 'value'
+  });
+  const value = valueUnwrapped ?? null;
+  const valueRef = useValueChanged.useValueAsRef(value);
+  useValueChanged.useIsoLayoutEffect(() => {
+    setFilled(value !== null);
+  }, [setFilled, value]);
+  const forceRender = useForcedRerendering();
+  const formatOptionsRef = useValueChanged.useValueAsRef(format);
+  const hasPendingCommitRef = React__namespace.useRef(false);
+  const onValueCommitted = useValueChanged.useStableCallback((nextValue, eventDetails) => {
+    hasPendingCommitRef.current = false;
+    onValueCommittedProp?.(nextValue, eventDetails);
+  });
+  const startTickTimeout = useValueChanged.useTimeout();
+  const tickInterval = useInterval();
+  const intentionalTouchCheckTimeout = useValueChanged.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 = useValueChanged.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 = useValueChanged.useStableCallback(event => {
+    if (event?.altKey) {
+      return smallStep;
+    }
+    if (event?.shiftKey) {
+      return largeStep;
+    }
+    return step;
+  });
+  const setValue = useValueChanged.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 === useValueChanged.inputChange || reason === useValueChanged.inputBlur || reason === useValueChanged.inputPaste || reason === useValueChanged.inputClear || reason === useValueChanged.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 === useValueChanged.inputChange || details.reason === useValueChanged.inputClear || details.reason === useValueChanged.inputBlur || details.reason === useValueChanged.inputPaste || details.reason === useValueChanged.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 = useValueChanged.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, useValueChanged.createChangeEventDetails(reason, nativeEvent, undefined, {
+      direction
+    }));
+  });
+  const stopAutoChange = useValueChanged.useStableCallback(() => {
+    intentionalTouchCheckTimeout.clear();
+    startTickTimeout.clear();
+    tickInterval.clear();
+    unsubscribeFromGlobalContextMenuRef.current();
+    movesAfterTouchRef.current = 0;
+  });
+  const startAutoChange = useValueChanged.useStableCallback((isIncrement, triggerEvent) => {
+    stopAutoChange();
+    if (!inputRef.current) {
+      return;
+    }
+    const win = floatingUi_utils_dom.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 ? useValueChanged.incrementPress : useValueChanged.decrementPress;
+      onValueCommitted(committed, useValueChanged.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
+  useValueChanged.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);
+    }
+  });
+  useValueChanged.useIsoLayoutEffect(function setDynamicInputModeForIOS() {
+    if (!useValueChanged.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 || useValueChanged.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 = useValueChanged.createChangeEventDetails(useValueChanged.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 ? useValueChanged.visuallyHiddenInput : useValueChanged.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, useValueChanged.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, useValueChanged.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
+  } = useBaseUiId.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
+  } = useBaseUiId.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
+  });
+  useValueChanged.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, useValueChanged.createChangeEventDetails(useValueChanged.inputClear, event.nativeEvent));
+        if (validationMode === 'onBlur') {
+          validation.commit(null);
+        }
+        onValueCommitted(null, useValueChanged.createGenericEventDetails(useValueChanged.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 = useValueChanged.createGenericEventDetails(useValueChanged.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, useValueChanged.createChangeEventDetails(useValueChanged.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, useValueChanged.createChangeEventDetails(useValueChanged.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, useValueChanged.createChangeEventDetails(useValueChanged.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.
+      useValueChanged.stopEvent(event);
+      const commitDetails = useValueChanged.createGenericEventDetails(useValueChanged.keyboard, nativeEvent);
+      if (event.key === 'ArrowUp') {
+        incrementValue(amount, {
+          direction: 1,
+          currentValue: parsedValue,
+          event: nativeEvent,
+          reason: useValueChanged.keyboard
+        });
+        onValueCommitted(lastChangedValueRef.current ?? valueRef.current, commitDetails);
+      } else if (event.key === 'ArrowDown') {
+        incrementValue(amount, {
+          direction: -1,
+          currentValue: parsedValue,
+          event: nativeEvent,
+          reason: useValueChanged.keyboard
+        });
+        onValueCommitted(lastChangedValueRef.current ?? valueRef.current, commitDetails);
+      } else if (event.key === 'Home' && min != null) {
+        setValue(min, useValueChanged.createChangeEventDetails(useValueChanged.keyboard, nativeEvent));
+        onValueCommitted(lastChangedValueRef.current ?? valueRef.current, commitDetails);
+      } else if (event.key === 'End' && max != null) {
+        setValue(max, useValueChanged.createChangeEventDetails(useValueChanged.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, useValueChanged.createChangeEventDetails(useValueChanged.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";
+
+exports.DEFAULT_FIELD_STATE_ATTRIBUTES = DEFAULT_FIELD_STATE_ATTRIBUTES;
+exports.DEFAULT_STEP = DEFAULT_STEP;
+exports.DEFAULT_VALIDITY_STATE = DEFAULT_VALIDITY_STATE;
+exports.FieldRootContext = FieldRootContext;
+exports.LabelableContext = LabelableContext;
+exports.NumberFieldDecrement = NumberFieldDecrement;
+exports.NumberFieldGroup = NumberFieldGroup;
+exports.NumberFieldIncrement = NumberFieldIncrement;
+exports.NumberFieldInput = NumberFieldInput;
+exports.NumberFieldRoot = NumberFieldRoot;
+exports.fieldValidityMapping = fieldValidityMapping;
+exports.getCombinedFieldValidityData = getCombinedFieldValidityData;
+exports.stateAttributesMapping = stateAttributesMapping$1;
+exports.useField = useField;
+exports.useFieldRootContext = useFieldRootContext;
+exports.useFormContext = useFormContext;
+exports.useLabelableContext = useLabelableContext;
+exports.useLabelableId = useLabelableId;
+exports.useNumberFieldRootContext = useNumberFieldRootContext;