@octanejs/base-ui 0.1.30 → 0.1.32

package/dist/cjs/number-field.cjs

@@ -0,0 +1,812 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var number_field_exports = {};
+__export(number_field_exports, {
+  NumberField: () => NumberField
+});
+module.exports = __toCommonJS(number_field_exports);
+var import_octane = require("octane");
+var import_internal = require("./internal.cjs");
+var import_useRenderElement = require("./utils/useRenderElement.cjs");
+var import_composeRefs = require("./utils/composeRefs.cjs");
+var import_useControlled = require("./utils/useControlled.cjs");
+var import_useStableCallback = require("./utils/useStableCallback.cjs");
+var import_useValueAsRef = require("./utils/useValueAsRef.cjs");
+var import_useValueChanged = require("./utils/useValueChanged.cjs");
+var import_useForcedRerendering = require("./utils/useForcedRerendering.cjs");
+var import_addEventListener = require("./utils/addEventListener.cjs");
+var import_platform = require("./utils/platform.cjs");
+var import_owner = require("./utils/owner.cjs");
+var import_visuallyHidden = require("./utils/visuallyHidden.cjs");
+var import_list_utils = require("./utils/composite/list-utils.cjs");
+var import_useButton = require("./utils/useButton.cjs");
+var import_useLabelableId = require("./utils/field/useLabelableId.cjs");
+var import_formatNumber = require("./utils/formatNumber.cjs");
+var import_constants = require("./utils/field/constants.cjs");
+var import_FieldRootContext = require("./utils/field/FieldRootContext.cjs");
+var import_FormContext = require("./utils/field/FormContext.cjs");
+var import_LabelableContext = require("./utils/field/LabelableContext.cjs");
+var import_useRegisterFieldControl = require("./utils/field/useRegisterFieldControl.cjs");
+var import_createChangeEventDetails = require("./utils/createChangeEventDetails.cjs");
+var import_parse = require("./utils/number/parse.cjs");
+var import_validate = require("./utils/number/validate.cjs");
+var import_usePressAndHold = require("./utils/usePressAndHold.cjs");
+var import_constants2 = require("./utils/number/constants.cjs");
+const NAVIGATE_KEYS = /* @__PURE__ */ new Set([
+  "Backspace",
+  "Delete",
+  "ArrowLeft",
+  "ArrowRight",
+  "Tab",
+  "Enter",
+  "Escape"
+]);
+function activeElement(doc) {
+  return doc.activeElement;
+}
+const stateAttributesMapping = {
+  inputValue: () => null,
+  value: () => null,
+  ...import_constants.fieldValidityMapping
+};
+const NumberFieldRootContext = (0, import_octane.createContext)(void 0);
+function useNumberFieldRootContext() {
+  const context = (0, import_octane.useContext)(NumberFieldRootContext);
+  if (context === void 0) {
+    throw new Error(
+      "Base UI: NumberFieldRootContext is missing. NumberField parts must be placed within <NumberField.Root>."
+    );
+  }
+  return context;
+}
+function NumberFieldRoot(props) {
+  const slot = (0, import_internal.S)("NumberFieldRoot");
+  const {
+    id: idProp,
+    min,
+    max,
+    smallStep = 0.1,
+    step: stepProp = 1,
+    largeStep = 10,
+    required = false,
+    disabled: disabledProp = false,
+    readOnly = false,
+    form,
+    name: nameProp,
+    defaultValue,
+    value: valueProp,
+    onValueChange: onValueChangeProp,
+    onValueCommitted: onValueCommittedProp,
+    allowWheelScrub = false,
+    snapOnStep = false,
+    allowOutOfRange = false,
+    format,
+    locale,
+    render,
+    className,
+    inputRef: inputRefProp,
+    style,
+    ref,
+    ...elementProps
+  } = props;
+  const {
+    setDirty,
+    validityData,
+    disabled: fieldDisabled,
+    setFilled,
+    invalid,
+    name: fieldName,
+    state: fieldState,
+    validation
+  } = (0, import_FieldRootContext.useFieldRootContext)();
+  const { clearErrors } = (0, import_FormContext.useFormContext)();
+  const disabled = fieldDisabled || disabledProp;
+  const name = fieldName ?? nameProp;
+  const step = stepProp === "any" ? 1 : stepProp;
+  const [isScrubbing, setIsScrubbing] = (0, import_octane.useState)(false, (0, import_internal.subSlot)(slot, "scrubbing"));
+  const minWithDefault = min ?? Number.MIN_SAFE_INTEGER;
+  const maxWithDefault = max ?? Number.MAX_SAFE_INTEGER;
+  const minWithZeroDefault = min ?? 0;
+  const formatStyle = format?.style;
+  const inputRef = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "inputRef"));
+  const hiddenInputRef = (0, import_composeRefs.useComposedRefs)(
+    inputRefProp,
+    validation.inputRef,
+    (0, import_internal.subSlot)(slot, "hiddenRef")
+  );
+  const id = (0, import_useLabelableId.useLabelableId)({ id: idProp }, (0, import_internal.subSlot)(slot, "id"));
+  const [valueUnwrapped, setValueUnwrapped] = (0, import_useControlled.useControlled)(
+    { controlled: valueProp, default: defaultValue, name: "NumberField", state: "value" },
+    (0, import_internal.subSlot)(slot, "value")
+  );
+  const value = valueUnwrapped ?? null;
+  const valueRef = (0, import_useValueAsRef.useValueAsRef)(value, (0, import_internal.subSlot)(slot, "valueRef"));
+  (0, import_octane.useLayoutEffect)(() => setFilled(value !== null), [setFilled, value], (0, import_internal.subSlot)(slot, "e:filled"));
+  const forceRender = (0, import_useForcedRerendering.useForcedRerendering)((0, import_internal.subSlot)(slot, "force"));
+  const formatOptionsRef = (0, import_useValueAsRef.useValueAsRef)(
+    format,
+    (0, import_internal.subSlot)(slot, "fmtRef")
+  );
+  const hasPendingCommitRef = (0, import_octane.useRef)(false, (0, import_internal.subSlot)(slot, "pending"));
+  const onValueCommitted = (0, import_useStableCallback.useStableCallback)(
+    (nextValue, eventDetails) => {
+      hasPendingCommitRef.current = false;
+      onValueCommittedProp?.(nextValue, eventDetails);
+    },
+    (0, import_internal.subSlot)(slot, "commit")
+  );
+  const allowInputSyncRef = (0, import_octane.useRef)(true, (0, import_internal.subSlot)(slot, "allowSync"));
+  const lastChangedValueRef = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "lastChanged"));
+  const [inputValue, setInputValue] = (0, import_octane.useState)(
+    () => (0, import_formatNumber.formatNumber)(value, locale, format),
+    (0, import_internal.subSlot)(slot, "inputValue")
+  );
+  const [inputMode, setInputMode] = (0, import_octane.useState)("numeric", (0, import_internal.subSlot)(slot, "inputMode"));
+  const getAllowedNonNumericKeys = (0, import_useStableCallback.useStableCallback)(
+    () => {
+      const { decimal, group, currency, literal } = (0, import_parse.getNumberLocaleDetails)(locale, format);
+      const keys = /* @__PURE__ */ new Set();
+      import_parse.BASE_NON_NUMERIC_SYMBOLS.forEach((symbol) => keys.add(symbol));
+      if (decimal) keys.add(decimal);
+      if (group) {
+        keys.add(group);
+        if (import_parse.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) import_parse.PERCENTAGES.forEach((key) => keys.add(key));
+      if (allowPermilleSymbols) import_parse.PERMILLE.forEach((key) => keys.add(key));
+      if (formatStyle === "currency" && currency) keys.add(currency);
+      if (literal) {
+        Array.from(literal).forEach((char) => keys.add(char));
+        if (import_parse.SPACE_SEPARATOR_RE.test(literal)) keys.add(" ");
+      }
+      import_parse.PLUS_SIGNS_WITH_ASCII.forEach((key) => keys.add(key));
+      if (minWithDefault < 0 || allowOutOfRange) {
+        import_parse.MINUS_SIGNS_WITH_ASCII.forEach((key) => keys.add(key));
+      }
+      return keys;
+    },
+    (0, import_internal.subSlot)(slot, "allowedKeys")
+  );
+  const getStepAmount = (0, import_useStableCallback.useStableCallback)(
+    (event) => {
+      if (event?.altKey) return smallStep;
+      if (event?.shiftKey) return largeStep;
+      return step;
+    },
+    (0, import_internal.subSlot)(slot, "stepAmount")
+  );
+  const setValue = (0, import_useStableCallback.useStableCallback)(
+    (unvalidatedValue, details) => {
+      const eventWithOptionalKeyState = details.event;
+      const dir = details.direction;
+      const isInputReason = details.reason === import_createChangeEventDetails.REASONS.inputChange || details.reason === "input-clear" || details.reason === "input-blur" || details.reason === "input-paste" || details.reason === import_createChangeEventDetails.REASONS.none;
+      const shouldClampValue = !allowOutOfRange || !isInputReason;
+      const validatedValue = (0, import_validate.toValidatedNumber)(unvalidatedValue, {
+        step: dir ? getStepAmount(eventWithOptionalKeyState) * dir : void 0,
+        format: formatOptionsRef.current,
+        minWithDefault,
+        maxWithDefault,
+        minWithZeroDefault,
+        snapOnStep,
+        small: eventWithOptionalKeyState?.altKey ?? false,
+        clamp: shouldClampValue
+      });
+      const shouldFireChange = validatedValue !== value || isInputReason && (unvalidatedValue !== value || allowInputSyncRef.current === false);
+      if (shouldFireChange) {
+        onValueChangeProp?.(validatedValue, details);
+        if (details.isCanceled) return false;
+        setValueUnwrapped(validatedValue);
+        setDirty(validatedValue !== validityData.initialValue);
+        hasPendingCommitRef.current = true;
+      }
+      lastChangedValueRef.current = validatedValue;
+      if (allowInputSyncRef.current) {
+        setInputValue((0, import_formatNumber.formatNumber)(validatedValue, locale, format));
+      }
+      forceRender();
+      return shouldFireChange;
+    },
+    (0, import_internal.subSlot)(slot, "setValue")
+  );
+  const incrementValue = (0, import_useStableCallback.useStableCallback)(
+    (amount, params) => {
+      const { direction, currentValue, event, reason } = params;
+      const prevValue = currentValue == null ? valueRef.current : currentValue;
+      if (typeof prevValue !== "number") {
+        return setValue(0, (0, import_createChangeEventDetails.createChangeEventDetails)(reason, event));
+      }
+      return setValue(
+        prevValue + amount * direction,
+        (0, import_createChangeEventDetails.createChangeEventDetails)(reason, event, void 0, { direction })
+      );
+    },
+    (0, import_internal.subSlot)(slot, "increment")
+  );
+  (0, import_octane.useLayoutEffect)(
+    () => {
+      if (!allowInputSyncRef.current) return;
+      const nextInputValue = (0, import_formatNumber.formatNumber)(value, locale, format);
+      if (nextInputValue !== inputValue) setInputValue(nextInputValue);
+    },
+    void 0,
+    (0, import_internal.subSlot)(slot, "e:syncInput")
+  );
+  (0, import_octane.useLayoutEffect)(
+    () => {
+      if (!import_platform.platform.os.ios) return;
+      let computedInputMode = "text";
+      if (minWithDefault >= 0) computedInputMode = "decimal";
+      setInputMode(computedInputMode);
+    },
+    [minWithDefault],
+    (0, import_internal.subSlot)(slot, "e:inputMode")
+  );
+  (0, import_octane.useEffect)(
+    () => {
+      const element2 = inputRef.current;
+      if (disabled || readOnly || !allowWheelScrub || !element2) return void 0;
+      function handleWheel(event) {
+        if (event.ctrlKey || activeElement((0, import_owner.ownerDocument)(inputRef.current)) !== inputRef.current) {
+          return;
+        }
+        event.preventDefault();
+        allowInputSyncRef.current = true;
+        const amount = getStepAmount(event);
+        const changed = incrementValue(amount, {
+          direction: event.deltaY > 0 ? -1 : 1,
+          event,
+          reason: "wheel"
+        });
+        if (changed) {
+          onValueCommitted(
+            lastChangedValueRef.current ?? valueRef.current,
+            (0, import_createChangeEventDetails.createChangeEventDetails)("wheel", event)
+          );
+        }
+      }
+      return (0, import_addEventListener.addEventListener)(element2, "wheel", handleWheel);
+    },
+    [allowWheelScrub, incrementValue, disabled, readOnly, getStepAmount, onValueCommitted],
+    (0, import_internal.subSlot)(slot, "e:wheel")
+  );
+  const state = (0, import_octane.useMemo)(
+    () => ({
+      ...fieldState,
+      disabled,
+      readOnly,
+      required,
+      value,
+      inputValue,
+      scrubbing: isScrubbing
+    }),
+    [fieldState, disabled, readOnly, required, value, inputValue, isScrubbing],
+    (0, import_internal.subSlot)(slot, "state")
+  );
+  const contextValue = (0, import_octane.useMemo)(
+    () => ({
+      inputRef,
+      inputValue,
+      value,
+      minWithDefault,
+      maxWithDefault,
+      disabled,
+      readOnly,
+      id,
+      setValue,
+      incrementValue,
+      getStepAmount,
+      allowInputSyncRef,
+      formatOptionsRef,
+      valueRef,
+      lastChangedValueRef,
+      hasPendingCommitRef,
+      name,
+      nameProp,
+      required,
+      invalid,
+      inputMode,
+      getAllowedNonNumericKeys,
+      min,
+      max,
+      setInputValue,
+      locale,
+      isScrubbing,
+      setIsScrubbing,
+      state,
+      onValueCommitted
+    }),
+    [
+      inputValue,
+      value,
+      minWithDefault,
+      maxWithDefault,
+      disabled,
+      readOnly,
+      id,
+      setValue,
+      incrementValue,
+      getStepAmount,
+      name,
+      nameProp,
+      required,
+      invalid,
+      inputMode,
+      getAllowedNonNumericKeys,
+      min,
+      max,
+      locale,
+      isScrubbing,
+      state,
+      onValueCommitted
+    ],
+    (0, import_internal.subSlot)(slot, "ctx")
+  );
+  const element = (0, import_useRenderElement.useRenderElement)(
+    "div",
+    { render, className, style },
+    { ref, state, props: elementProps, stateAttributesMapping },
+    (0, import_internal.subSlot)(slot, "re")
+  );
+  const hiddenInputProps = validation.getValidationProps(disabled, {
+    onFocus() {
+      inputRef.current?.focus();
+    },
+    onChange(event) {
+      if (event.defaultPrevented || disabled || readOnly) return;
+      const nextValue = event.currentTarget.valueAsNumber;
+      const parsedValue = Number.isNaN(nextValue) ? null : nextValue;
+      const details = (0, import_createChangeEventDetails.createChangeEventDetails)(import_createChangeEventDetails.REASONS.none, event);
+      setValue(parsedValue, details);
+      clearErrors(name);
+      validation.change(lastChangedValueRef.current ?? parsedValue);
+    }
+  });
+  const hiddenInput = (0, import_octane.createElement)("input", {
+    ...hiddenInputProps,
+    // This form-facing control intentionally observes the native commit event;
+    // the visible text input above owns per-edit handling.
+    suppressNativeChangeWarning: true,
+    ref: hiddenInputRef,
+    type: "number",
+    form,
+    name,
+    value: value ?? "",
+    min,
+    max,
+    step: stepProp,
+    disabled,
+    readOnly,
+    required,
+    "aria-hidden": true,
+    tabIndex: -1,
+    style: name ? import_visuallyHidden.visuallyHiddenInput : import_visuallyHidden.visuallyHidden
+  });
+  return (0, import_octane.createElement)(NumberFieldRootContext.Provider, {
+    value: contextValue,
+    // Octane reconciles an ARRAY child as a keyed list, so each slot carries a stable key;
+    // values that cannot be keyed in place go through a keyed Fragment.
+    children: [
+      (0, import_octane.createElement)(import_octane.Fragment, { key: "element", children: element }),
+      (0, import_octane.createElement)(import_octane.Fragment, { key: "hidden-input", children: hiddenInput })
+    ]
+  });
+}
+function NumberFieldGroup(props) {
+  const slot = (0, import_internal.S)("NumberFieldGroup");
+  const { render, className, style, ref, ...elementProps } = props;
+  const { state } = useNumberFieldRootContext();
+  return (0, import_useRenderElement.useRenderElement)(
+    "div",
+    { render, className, style },
+    { ref, state, props: [{ role: "group" }, elementProps], stateAttributesMapping },
+    (0, import_internal.subSlot)(slot, "re")
+  );
+}
+function NumberFieldInput(props) {
+  const slot = (0, import_internal.S)("NumberFieldInput");
+  const { render, className, style, ref, ...elementProps } = props;
+  const {
+    allowInputSyncRef,
+    disabled,
+    formatOptionsRef,
+    getAllowedNonNumericKeys,
+    getStepAmount,
+    id,
+    incrementValue,
+    inputMode,
+    inputValue,
+    max,
+    min,
+    name,
+    nameProp,
+    readOnly,
+    required,
+    setValue,
+    state,
+    setInputValue,
+    locale,
+    inputRef,
+    value,
+    onValueCommitted,
+    lastChangedValueRef,
+    hasPendingCommitRef,
+    valueRef
+  } = useNumberFieldRootContext();
+  const { clearErrors } = (0, import_FormContext.useFormContext)();
+  const { validationMode, setTouched, setFocused, invalid, shouldValidateOnChange, validation } = (0, import_FieldRootContext.useFieldRootContext)();
+  const { labelId } = (0, import_LabelableContext.useLabelableContext)();
+  const hasTouchedInputRef = (0, import_octane.useRef)(false, (0, import_internal.subSlot)(slot, "touched"));
+  const blockRevalidationRef = (0, import_octane.useRef)(false, (0, import_internal.subSlot)(slot, "blockReval"));
+  const pendingCaretRef = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "caret"));
+  (0, import_useRegisterFieldControl.useRegisterFieldControl)(
+    inputRef,
+    id,
+    value,
+    void 0,
+    !disabled,
+    nameProp,
+    (0, import_internal.subSlot)(slot, "register")
+  );
+  (0, import_octane.useLayoutEffect)(
+    () => {
+      if (pendingCaretRef.current != null) {
+        const caret = pendingCaretRef.current;
+        pendingCaretRef.current = null;
+        inputRef.current?.setSelectionRange(caret, caret);
+      }
+    },
+    void 0,
+    (0, import_internal.subSlot)(slot, "e:caret")
+  );
+  (0, import_useValueChanged.useValueChanged)(
+    value,
+    () => {
+      clearErrors(name);
+      if (blockRevalidationRef.current && !shouldValidateOnChange()) {
+        blockRevalidationRef.current = false;
+        return;
+      }
+      validation.change(value);
+    },
+    (0, import_internal.subSlot)(slot, "valueChanged")
+  );
+  const inputProps = {
+    id,
+    required,
+    disabled,
+    readOnly,
+    inputMode,
+    value: inputValue,
+    type: "text",
+    autoComplete: "off",
+    autoCorrect: "off",
+    spellCheck: "false",
+    "aria-roledescription": "Number field",
+    "aria-invalid": !disabled && invalid ? true : void 0,
+    "aria-labelledby": labelId,
+    onFocus(event) {
+      if (event.defaultPrevented || disabled) return;
+      setFocused(true);
+      if (hasTouchedInputRef.current) return;
+      hasTouchedInputRef.current = true;
+      const target = event.currentTarget;
+      const length = target.value.length;
+      target.setSelectionRange(length, length);
+    },
+    onBlur(event) {
+      if (event.defaultPrevented || disabled) return;
+      setTouched(true);
+      setFocused(false);
+      if (readOnly) return;
+      const hadManualInput = !allowInputSyncRef.current;
+      const hadPendingProgrammaticChange = hasPendingCommitRef.current;
+      allowInputSyncRef.current = true;
+      if (inputValue.trim() === "") {
+        const clearDetails = (0, import_createChangeEventDetails.createChangeEventDetails)("input-clear", event);
+        setValue(null, clearDetails);
+        if (clearDetails.isCanceled) return;
+        if (validationMode === "onBlur") validation.commit(null);
+        if (hadManualInput || hadPendingProgrammaticChange || value !== null) {
+          onValueCommitted(null, (0, import_createChangeEventDetails.createChangeEventDetails)("input-clear", event));
+        }
+        return;
+      }
+      const formatOptions = formatOptionsRef.current;
+      const parsedValue = (0, import_parse.parseNumber)(inputValue, locale, formatOptions);
+      if (parsedValue === null) return;
+      const hasRoundingOptions = (0, import_validate.hasNumberFormatRoundingOptions)(formatOptions);
+      let committed;
+      if (!hadManualInput && !hasRoundingOptions) {
+        committed = value;
+      } else if (hasRoundingOptions) {
+        committed = (0, import_validate.removeFloatingPointErrors)(parsedValue, formatOptions);
+      } else {
+        committed = parsedValue;
+      }
+      const shouldUpdateValue = value !== committed;
+      const shouldCommit = hadManualInput || shouldUpdateValue || hadPendingProgrammaticChange;
+      let committedValue = committed;
+      if (shouldUpdateValue) {
+        const changeDetails = (0, import_createChangeEventDetails.createChangeEventDetails)("input-blur", event);
+        blockRevalidationRef.current = true;
+        setValue(committed, changeDetails);
+        if (changeDetails.isCanceled) {
+          blockRevalidationRef.current = false;
+          return;
+        }
+        committedValue = lastChangedValueRef.current ?? committed;
+        if (committedValue === value) blockRevalidationRef.current = false;
+      }
+      if (validationMode === "onBlur") validation.commit(committedValue);
+      if (shouldCommit)
+        onValueCommitted(committedValue, (0, import_createChangeEventDetails.createChangeEventDetails)("input-blur", event));
+      const canonicalText = (0, import_formatNumber.formatNumber)(committedValue, locale, formatOptions);
+      if (inputValue !== canonicalText) setInputValue(canonicalText);
+    },
+    onInput(event) {
+      if (event.defaultPrevented) return;
+      allowInputSyncRef.current = false;
+      const targetValue = event.currentTarget.value;
+      if (targetValue.trim() === "") {
+        setInputValue(targetValue);
+        setValue(null, (0, import_createChangeEventDetails.createChangeEventDetails)("input-clear", event));
+        return;
+      }
+      const allowedNonNumericKeys = getAllowedNonNumericKeys();
+      const isValidCharacterString = Array.from(targetValue).every(
+        (ch) => (0, import_parse.isNumeralChar)(ch) || import_parse.ANY_MINUS_DETECT_RE.test(ch) || allowedNonNumericKeys.has(ch)
+      );
+      if (!isValidCharacterString) return;
+      const parsedValue = (0, import_parse.parseNumber)(targetValue, locale, formatOptionsRef.current);
+      setInputValue(targetValue);
+      if (parsedValue !== null) {
+        setValue(parsedValue, (0, import_createChangeEventDetails.createChangeEventDetails)(import_createChangeEventDetails.REASONS.inputChange, event));
+      }
+    },
+    onKeyDown(event) {
+      if (event.defaultPrevented || readOnly || disabled) return;
+      const nativeEvent = event;
+      const hadManualInput = !allowInputSyncRef.current;
+      const allowedNonNumericKeys = getAllowedNonNumericKeys();
+      let isAllowedNonNumericKey = allowedNonNumericKeys.has(event.key);
+      const { decimal, currency, percentSign } = (0, import_parse.getNumberLocaleDetails)(
+        locale,
+        formatOptionsRef.current
+      );
+      const selectionStart = event.currentTarget.selectionStart;
+      const selectionEnd = event.currentTarget.selectionEnd;
+      const isAllSelected = selectionStart === 0 && selectionEnd === inputValue.length;
+      const selectionContainsIndex = (index) => selectionStart != null && selectionEnd != null && index >= selectionStart && index < selectionEnd;
+      const signGroups = [
+        [import_parse.ANY_MINUS_DETECT_RE, import_parse.ANY_MINUS_RE],
+        [import_parse.ANY_PLUS_DETECT_RE, import_parse.ANY_PLUS_RE]
+      ];
+      signGroups.forEach(([detectRe, globalRe]) => {
+        if (detectRe.test(event.key) && Array.from(allowedNonNumericKeys).some((k) => detectRe.test(k))) {
+          const existingIndex = inputValue.search(globalRe);
+          const isReplacingExisting = existingIndex !== -1 && selectionContainsIndex(existingIndex);
+          isAllowedNonNumericKey = !(import_parse.ANY_MINUS_DETECT_RE.test(inputValue) || import_parse.ANY_PLUS_DETECT_RE.test(inputValue)) || isAllSelected || isReplacingExisting;
+        }
+      });
+      [decimal, currency, percentSign].forEach((symbol) => {
+        if (symbol && event.key === symbol) {
+          const symbolIndex = inputValue.indexOf(symbol);
+          const isSymbolHighlighted = selectionContainsIndex(symbolIndex);
+          isAllowedNonNumericKey = !inputValue.includes(symbol) || isAllSelected || isSymbolHighlighted;
+        }
+      });
+      const isNavigateKey = NAVIGATE_KEYS.has(event.key);
+      const isStepKey = event.key === "ArrowUp" || event.key === "ArrowDown";
+      if (event.which === 229 || event.altKey && !isStepKey || event.ctrlKey || event.metaKey || isAllowedNonNumericKey || (0, import_parse.isNumeralChar)(event.key) || isNavigateKey) {
+        return;
+      }
+      const willSetHome = event.key === "Home" && min != null;
+      const willSetEnd = event.key === "End" && max != null;
+      if (event.key.length > 1 && !isStepKey && !willSetHome && !willSetEnd) return;
+      const currentValue = hadManualInput ? (0, import_parse.parseNumber)(inputValue, locale, formatOptionsRef.current) : null;
+      const amount = getStepAmount(event);
+      (0, import_list_utils.stopEvent)(event);
+      const commitDetails = (0, import_createChangeEventDetails.createChangeEventDetails)("keyboard", nativeEvent);
+      let changed = false;
+      if (event.key === "ArrowUp" || event.key === "ArrowDown") {
+        allowInputSyncRef.current = true;
+        if (!hadManualInput) lastChangedValueRef.current = valueRef.current;
+        changed = incrementValue(amount, {
+          direction: event.key === "ArrowUp" ? 1 : -1,
+          currentValue,
+          event: nativeEvent,
+          reason: "keyboard"
+        });
+      } else if (willSetHome) {
+        allowInputSyncRef.current = true;
+        changed = setValue(min, (0, import_createChangeEventDetails.createChangeEventDetails)("keyboard", nativeEvent));
+      } else if (willSetEnd) {
+        allowInputSyncRef.current = true;
+        changed = setValue(max, (0, import_createChangeEventDetails.createChangeEventDetails)("keyboard", nativeEvent));
+      }
+      if (changed) onValueCommitted(lastChangedValueRef.current ?? valueRef.current, commitDetails);
+    },
+    onPaste(event) {
+      if (event.defaultPrevented || readOnly || disabled) return;
+      let pastedData = "";
+      try {
+        pastedData = event.clipboardData?.getData("text/plain") ?? "";
+      } catch {
+        return;
+      }
+      event.preventDefault();
+      const input = event.currentTarget;
+      const selectionStart = input.selectionStart ?? inputValue.length;
+      const selectionEnd = input.selectionEnd ?? inputValue.length;
+      const nextText = inputValue.slice(0, selectionStart) + pastedData + inputValue.slice(selectionEnd);
+      const parsedValue = (0, import_parse.parseNumber)(nextText, locale, formatOptionsRef.current);
+      if (parsedValue !== null) {
+        allowInputSyncRef.current = false;
+        pendingCaretRef.current = selectionStart + pastedData.length;
+        setValue(parsedValue, (0, import_createChangeEventDetails.createChangeEventDetails)("input-paste", event));
+        setInputValue(nextText);
+      }
+    }
+  };
+  return (0, import_useRenderElement.useRenderElement)(
+    "input",
+    { render, className, style },
+    {
+      ref: [ref, inputRef],
+      state,
+      props: [inputProps, elementProps, (p) => validation.getValidationProps(disabled, p)],
+      stateAttributesMapping
+    },
+    (0, import_internal.subSlot)(slot, "re")
+  );
+}
+function useNumberFieldButton(params) {
+  const {
+    allowInputSyncRef,
+    disabled,
+    formatOptionsRef,
+    getStepAmount,
+    id,
+    incrementValue,
+    inputRef,
+    inputValue,
+    isIncrement,
+    locale,
+    readOnly,
+    setValue,
+    valueRef,
+    lastChangedValueRef,
+    onValueCommitted,
+    slot
+  } = params;
+  const pressReason = isIncrement ? import_createChangeEventDetails.REASONS.incrementPress : import_createChangeEventDetails.REASONS.decrementPress;
+  function commitValue(nativeEvent) {
+    const shouldCommitInputValue = !allowInputSyncRef.current;
+    allowInputSyncRef.current = true;
+    if (!shouldCommitInputValue) {
+      lastChangedValueRef.current = valueRef.current;
+      return;
+    }
+    const parsedValue = (0, import_parse.parseNumber)(inputValue, locale, formatOptionsRef.current);
+    if (parsedValue !== null) {
+      const details = (0, import_createChangeEventDetails.createChangeEventDetails)(pressReason, nativeEvent);
+      setValue(parsedValue, details);
+      if (!details.isCanceled) valueRef.current = parsedValue;
+    }
+  }
+  const { pointerHandlers, shouldSkipClick } = (0, import_usePressAndHold.usePressAndHold)({
+    disabled: disabled || readOnly,
+    elementRef: inputRef,
+    tickDelay: import_constants2.CHANGE_VALUE_TICK_DELAY,
+    startDelay: import_constants2.START_AUTO_CHANGE_DELAY,
+    scrollDistance: import_constants2.SCROLLING_POINTER_MOVE_DISTANCE,
+    tick(triggerEvent) {
+      const amount = getStepAmount(triggerEvent);
+      return incrementValue(amount, {
+        direction: isIncrement ? 1 : -1,
+        event: triggerEvent,
+        reason: pressReason
+      });
+    },
+    onStop(nativeEvent) {
+      const committed = lastChangedValueRef.current ?? valueRef.current;
+      onValueCommitted(committed, (0, import_createChangeEventDetails.createChangeEventDetails)(pressReason, nativeEvent));
+    }
+  });
+  return {
+    disabled,
+    "aria-label": isIncrement ? "Increase" : "Decrease",
+    "aria-controls": id,
+    tabIndex: -1,
+    style: { WebkitUserSelect: "none", userSelect: "none" },
+    ...pointerHandlers,
+    onClick(event) {
+      const isDisabled = disabled || readOnly;
+      if (event.defaultPrevented || isDisabled || shouldSkipClick(event)) return;
+      commitValue(event);
+      const amount = getStepAmount(event);
+      const prev = valueRef.current;
+      incrementValue(amount, { direction: isIncrement ? 1 : -1, event, reason: pressReason });
+      const committed = lastChangedValueRef.current ?? valueRef.current;
+      if (committed !== prev) {
+        onValueCommitted(committed, (0, import_createChangeEventDetails.createChangeEventDetails)(pressReason, event));
+      }
+    },
+    onPointerDown(event) {
+      const isMainButton = !event.button || event.button === 0;
+      if (event.defaultPrevented || readOnly || !isMainButton || disabled) return;
+      commitValue(event);
+      lastChangedValueRef.current = null;
+      if (!(0, import_usePressAndHold.isTouchLikePointerType)(event.pointerType)) inputRef.current?.focus();
+      pointerHandlers.onPointerDown(event);
+    },
+    _slot: slot
+  };
+}
+function useNumberFieldStepperButton(componentProps, isIncrement, slot) {
+  const {
+    render,
+    className,
+    disabled: disabledProp = false,
+    nativeButton = true,
+    style,
+    ref,
+    ...elementProps
+  } = componentProps;
+  const ctx = useNumberFieldRootContext();
+  const { disabled: contextDisabled, maxWithDefault, minWithDefault, readOnly, state, value } = ctx;
+  const isAtBoundary = value != null && (isIncrement ? value >= maxWithDefault : value <= minWithDefault);
+  const disabled = disabledProp || contextDisabled || isAtBoundary;
+  const buttonProps = useNumberFieldButton({ ...ctx, isIncrement, disabled, slot });
+  const { getButtonProps, buttonRef } = (0, import_useButton.useButton)(
+    { disabled: disabled || readOnly, native: nativeButton, focusableWhenDisabled: true },
+    (0, import_internal.subSlot)(slot, "button")
+  );
+  const buttonState = { ...state, disabled };
+  return (0, import_useRenderElement.useRenderElement)(
+    "button",
+    { render, className, style },
+    {
+      ref: [ref, buttonRef],
+      state: buttonState,
+      props: [buttonProps, elementProps, getButtonProps],
+      stateAttributesMapping
+    },
+    (0, import_internal.subSlot)(slot, "re")
+  );
+}
+function NumberFieldIncrement(props) {
+  return useNumberFieldStepperButton(props, true, (0, import_internal.S)("NumberFieldIncrement"));
+}
+function NumberFieldDecrement(props) {
+  return useNumberFieldStepperButton(props, false, (0, import_internal.S)("NumberFieldDecrement"));
+}
+const NumberField = {
+  Root: NumberFieldRoot,
+  Group: NumberFieldGroup,
+  Input: NumberFieldInput,
+  Increment: NumberFieldIncrement,
+  Decrement: NumberFieldDecrement
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  NumberField
+});