@base-ui/react 1.4.0 → 1.4.1

package/number-field/input/NumberFieldInput.js

@@ -9,19 +9,19 @@ exports.NumberFieldInput = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _utils = require("../../floating-ui-react/utils");
 var _NumberFieldRootContext = require("../root/NumberFieldRootContext");
-var _FieldRootContext = require("../../field/root/FieldRootContext");
-var _useRegisterFieldControl = require("../../field/root/useRegisterFieldControl");
-var _constants = require("../../field/utils/constants");
-var _FormContext = require("../../form/FormContext");
-var _LabelableContext = require("../../labelable-provider/LabelableContext");
+var _FieldRootContext = require("../../internals/field-root-context/FieldRootContext");
+var _useRegisterFieldControl = require("../../internals/field-register-control/useRegisterFieldControl");
+var _constants = require("../../internals/field-constants/constants");
+var _FormContext = require("../../internals/form-context/FormContext");
+var _LabelableContext = require("../../internals/labelable-provider/LabelableContext");
 var _constants2 = require("../utils/constants");
 var _parse = require("../utils/parse");
 var _stateAttributesMapping = require("../utils/stateAttributesMapping");
-var _useRenderElement = require("../../utils/useRenderElement");
-var _createBaseUIEventDetails = require("../../utils/createBaseUIEventDetails");
+var _useRenderElement = require("../../internals/useRenderElement");
+var _createBaseUIEventDetails = require("../../internals/createBaseUIEventDetails");
 var _formatNumber = require("../../utils/formatNumber");
-var _useValueChanged = require("../../utils/useValueChanged");
-var _reasons = require("../../utils/reasons");
+var _useValueChanged = require("../../internals/useValueChanged");
+var _reasons = require("../../internals/reasons");
 const stateAttributesMapping = {
   ..._constants.fieldValidityMapping,
   ..._stateAttributesMapping.stateAttributesMapping

package/number-field/input/NumberFieldInputDataAttributes.d.ts

@@ -16,11 +16,11 @@ export declare enum NumberFieldInputDataAttributes {
    */
   required = "data-required",
   /**
-   * Present when the number field is in valid state (when wrapped in Field.Root).
+   * Present when the number field is in a valid state (when wrapped in Field.Root).
    */
   valid = "data-valid",
   /**
-   * Present when the number field is in invalid state (when wrapped in Field.Root).
+   * Present when the number field is in an invalid state (when wrapped in Field.Root).
    */
   invalid = "data-invalid",
   /**

package/number-field/input/NumberFieldInputDataAttributes.js

@@ -22,11 +22,11 @@ let NumberFieldInputDataAttributes = exports.NumberFieldInputDataAttributes = /*
    */
   NumberFieldInputDataAttributes["required"] = "data-required";
   /**
-   * Present when the number field is in valid state (when wrapped in Field.Root).
+   * Present when the number field is in a valid state (when wrapped in Field.Root).
    */
   NumberFieldInputDataAttributes["valid"] = "data-valid";
   /**
-   * Present when the number field is in invalid state (when wrapped in Field.Root).
+   * Present when the number field is in an invalid state (when wrapped in Field.Root).
    */
   NumberFieldInputDataAttributes["invalid"] = "data-invalid";
   /**

package/number-field/root/NumberFieldRoot.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import type { FieldRootState } from "../../field/root/FieldRoot.js";
-import type { BaseUIComponentProps } from "../../utils/types.js";
+import type { BaseUIComponentProps } from "../../internals/types.js";
 import type { ChangeEventCustomProperties } from "../utils/types.js";
-import { type BaseUIChangeEventDetails, type BaseUIGenericEventDetails } from "../../utils/createBaseUIEventDetails.js";
-import { REASONS } from "../../utils/reasons.js";
+import { type BaseUIChangeEventDetails, type BaseUIGenericEventDetails } from "../../internals/createBaseUIEventDetails.js";
+import { REASONS } from "../../internals/reasons.js";
 /**
  * Groups all parts of the number field and manages its state.
  * Renders a `<div>` element.

package/number-field/root/NumberFieldRoot.js

@@ -19,16 +19,16 @@ var _owner = require("@base-ui/utils/owner");
 var _detectBrowser = require("@base-ui/utils/detectBrowser");
 var _utils = require("../../floating-ui-react/utils");
 var _NumberFieldRootContext = require("./NumberFieldRootContext");
-var _FieldRootContext = require("../../field/root/FieldRootContext");
-var _useLabelableId = require("../../labelable-provider/useLabelableId");
+var _FieldRootContext = require("../../internals/field-root-context/FieldRootContext");
+var _useLabelableId = require("../../internals/labelable-provider/useLabelableId");
 var _stateAttributesMapping = require("../utils/stateAttributesMapping");
-var _useRenderElement = require("../../utils/useRenderElement");
+var _useRenderElement = require("../../internals/useRenderElement");
 var _parse = require("../utils/parse");
 var _formatNumber = require("../../utils/formatNumber");
 var _constants = require("../utils/constants");
 var _validate = require("../utils/validate");
-var _createBaseUIEventDetails = require("../../utils/createBaseUIEventDetails");
-var _reasons = require("../../utils/reasons");
+var _createBaseUIEventDetails = require("../../internals/createBaseUIEventDetails");
+var _reasons = require("../../internals/reasons");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Groups all parts of the number field and manages its state.

package/number-field/root/NumberFieldRootDataAttributes.d.ts

@@ -16,11 +16,11 @@ export declare enum NumberFieldRootDataAttributes {
    */
   required = "data-required",
   /**
-   * Present when the number field is in valid state (when wrapped in Field.Root).
+   * Present when the number field is in a valid state (when wrapped in Field.Root).
    */
   valid = "data-valid",
   /**
-   * Present when the number field is in invalid state (when wrapped in Field.Root).
+   * Present when the number field is in an invalid state (when wrapped in Field.Root).
    */
   invalid = "data-invalid",
   /**

package/number-field/root/NumberFieldRootDataAttributes.js

@@ -22,11 +22,11 @@ let NumberFieldRootDataAttributes = exports.NumberFieldRootDataAttributes = /*#_
    */
   NumberFieldRootDataAttributes["required"] = "data-required";
   /**
-   * Present when the number field is in valid state (when wrapped in Field.Root).
+   * Present when the number field is in a valid state (when wrapped in Field.Root).
    */
   NumberFieldRootDataAttributes["valid"] = "data-valid";
   /**
-   * Present when the number field is in invalid state (when wrapped in Field.Root).
+   * Present when the number field is in an invalid state (when wrapped in Field.Root).
    */
   NumberFieldRootDataAttributes["invalid"] = "data-invalid";
   /**

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import type { EventWithOptionalKeyState, IncrementValueParameters } from "../utils/types.js";
 import type { NumberFieldRoot } from "./NumberFieldRoot.js";
-import type { HTMLProps } from "../../utils/types.js";
+import type { HTMLProps } from "../../internals/types.js";
 export declare function useNumberFieldButton(params: UseNumberFieldButtonParameters): React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;
 export interface UseNumberFieldButtonParameters {
   allowInputSyncRef: React.RefObject<boolean | null>;

package/number-field/root/useNumberFieldButton.js

@@ -5,11 +5,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useNumberFieldButton = useNumberFieldButton;
-var _usePressAndHold = require("../../utils/usePressAndHold");
+var _usePressAndHold = require("../../internals/usePressAndHold");
 var _constants = require("../utils/constants");
 var _parse = require("../utils/parse");
-var _createBaseUIEventDetails = require("../../utils/createBaseUIEventDetails");
-var _reasons = require("../../utils/reasons");
+var _createBaseUIEventDetails = require("../../internals/createBaseUIEventDetails");
+var _reasons = require("../../internals/reasons");
 // 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.

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { BaseUIComponentProps } from "../../utils/types.js";
+import type { BaseUIComponentProps } from "../../internals/types.js";
 import type { NumberFieldRootState } from "../root/NumberFieldRoot.js";
 /**
  * An interactive area where the user can click and drag to change the field value.

package/number-field/scrub-area/NumberFieldScrubArea.js

@@ -17,12 +17,12 @@ var _useTimeout = require("@base-ui/utils/useTimeout");
 var _NumberFieldRootContext = require("../root/NumberFieldRootContext");
 var _stateAttributesMapping = require("../utils/stateAttributesMapping");
 var _NumberFieldScrubAreaContext = require("./NumberFieldScrubAreaContext");
-var _useRenderElement = require("../../utils/useRenderElement");
+var _useRenderElement = require("../../internals/useRenderElement");
 var _getViewportRect = require("../utils/getViewportRect");
 var _subscribeToVisualViewportResize = require("../utils/subscribeToVisualViewportResize");
 var _constants = require("../utils/constants");
-var _createBaseUIEventDetails = require("../../utils/createBaseUIEventDetails");
-var _reasons = require("../../utils/reasons");
+var _createBaseUIEventDetails = require("../../internals/createBaseUIEventDetails");
+var _reasons = require("../../internals/reasons");
 var _utils = require("../../floating-ui-react/utils");
 var _jsxRuntime = require("react/jsx-runtime");
 /**

package/number-field/scrub-area/NumberFieldScrubAreaDataAttributes.d.ts

@@ -16,11 +16,11 @@ export declare enum NumberFieldScrubAreaDataAttributes {
    */
   required = "data-required",
   /**
-   * Present when the number field is in valid state (when wrapped in Field.Root).
+   * Present when the number field is in a valid state (when wrapped in Field.Root).
    */
   valid = "data-valid",
   /**
-   * Present when the number field is in invalid state (when wrapped in Field.Root).
+   * Present when the number field is in an invalid state (when wrapped in Field.Root).
    */
   invalid = "data-invalid",
   /**

package/number-field/scrub-area/NumberFieldScrubAreaDataAttributes.js

@@ -22,11 +22,11 @@ let NumberFieldScrubAreaDataAttributes = exports.NumberFieldScrubAreaDataAttribu
    */
   NumberFieldScrubAreaDataAttributes["required"] = "data-required";
   /**
-   * Present when the number field is in valid state (when wrapped in Field.Root).
+   * Present when the number field is in a valid state (when wrapped in Field.Root).
    */
   NumberFieldScrubAreaDataAttributes["valid"] = "data-valid";
   /**
-   * Present when the number field is in invalid state (when wrapped in Field.Root).
+   * Present when the number field is in an invalid state (when wrapped in Field.Root).
    */
   NumberFieldScrubAreaDataAttributes["invalid"] = "data-invalid";
   /**

package/number-field/scrub-area-cursor/NumberFieldScrubAreaCursor.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { BaseUIComponentProps } from "../../utils/types.js";
+import type { BaseUIComponentProps } from "../../internals/types.js";
 import type { NumberFieldRootState } from "../root/NumberFieldRoot.js";
 /**
  * A custom element to display instead of the native cursor while using the scrub area.

package/number-field/scrub-area-cursor/NumberFieldScrubAreaCursor.js

@@ -13,7 +13,7 @@ var _owner = require("@base-ui/utils/owner");
 var _NumberFieldRootContext = require("../root/NumberFieldRootContext");
 var _stateAttributesMapping = require("../utils/stateAttributesMapping");
 var _NumberFieldScrubAreaContext = require("../scrub-area/NumberFieldScrubAreaContext");
-var _useRenderElement = require("../../utils/useRenderElement");
+var _useRenderElement = require("../../internals/useRenderElement");
 /**
  * A custom element to display instead of the native cursor while using the scrub area.
  * Renders a `<span>` element.

package/number-field/scrub-area-cursor/NumberFieldScrubAreaCursorDataAttributes.d.ts

@@ -16,11 +16,11 @@ export declare enum NumberFieldScrubAreaCursorDataAttributes {
    */
   required = "data-required",
   /**
-   * Present when the number field is in valid state (when wrapped in Field.Root).
+   * Present when the number field is in a valid state (when wrapped in Field.Root).
    */
   valid = "data-valid",
   /**
-   * Present when the number field is in invalid state (when wrapped in Field.Root).
+   * Present when the number field is in an invalid state (when wrapped in Field.Root).
    */
   invalid = "data-invalid",
   /**

package/number-field/scrub-area-cursor/NumberFieldScrubAreaCursorDataAttributes.js

@@ -22,11 +22,11 @@ let NumberFieldScrubAreaCursorDataAttributes = exports.NumberFieldScrubAreaCurso
    */
   NumberFieldScrubAreaCursorDataAttributes["required"] = "data-required";
   /**
-   * Present when the number field is in valid state (when wrapped in Field.Root).
+   * Present when the number field is in a valid state (when wrapped in Field.Root).
    */
   NumberFieldScrubAreaCursorDataAttributes["valid"] = "data-valid";
   /**
-   * Present when the number field is in invalid state (when wrapped in Field.Root).
+   * Present when the number field is in an invalid state (when wrapped in Field.Root).
    */
   NumberFieldScrubAreaCursorDataAttributes["invalid"] = "data-invalid";
   /**

package/number-field/utils/stateAttributesMapping.d.ts

@@ -1,3 +1,3 @@
-import { StateAttributesMapping } from "../../utils/getStateAttributesProps.js";
+import { StateAttributesMapping } from "../../internals/getStateAttributesProps.js";
 import type { NumberFieldRootState } from "../root/NumberFieldRoot.js";
 export declare const stateAttributesMapping: StateAttributesMapping<NumberFieldRootState>;

package/number-field/utils/stateAttributesMapping.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.stateAttributesMapping = void 0;
-var _constants = require("../../field/utils/constants");
+var _constants = require("../../internals/field-constants/constants");
 const stateAttributesMapping = exports.stateAttributesMapping = {
   inputValue: () => null,
   value: () => null,

package/number-field/utils/validate.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.removeFloatingPointErrors = removeFloatingPointErrors;
 exports.toValidatedNumber = toValidatedNumber;
-var _clamp = require("../../utils/clamp");
+var _clamp = require("../../internals/clamp");
 var _formatNumber = require("../../utils/formatNumber");
 const STEP_EPSILON_FACTOR = 1e-10;
 function getFractionDigits(format) {

package/otp-field/input/OTPFieldInput.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { BaseUIComponentProps } from "../../utils/types.js";
+import type { BaseUIComponentProps } from "../../internals/types.js";
 import type { OTPFieldRootState } from "../root/OTPFieldRoot.js";
 /**
  * An individual OTP character input.

package/otp-field/input/OTPFieldInput.js

@@ -10,10 +10,10 @@ var React = _interopRequireWildcard(require("react"));
 var _safeReact = require("@base-ui/utils/safeReact");
 var _warn = require("@base-ui/utils/warn");
 var _utils = require("../../floating-ui-react/utils");
-var _useCompositeListItem = require("../../composite/list/useCompositeListItem");
-var _useRenderElement = require("../../utils/useRenderElement");
-var _createBaseUIEventDetails = require("../../utils/createBaseUIEventDetails");
-var _reasons = require("../../utils/reasons");
+var _useCompositeListItem = require("../../internals/composite/list/useCompositeListItem");
+var _useRenderElement = require("../../internals/useRenderElement");
+var _createBaseUIEventDetails = require("../../internals/createBaseUIEventDetails");
+var _reasons = require("../../internals/reasons");
 var _OTPFieldRootContext = require("../root/OTPFieldRootContext");
 var _stateAttributesMapping = require("../utils/stateAttributesMapping");
 var _otp = require("../utils/otp");
@@ -110,11 +110,6 @@ const OTPFieldInput = exports.OTPFieldInput = /*#__PURE__*/React.forwardRef(func
       if (event.defaultPrevented || disabled) {
         return;
       }
-      if (index > value.length) {
-        const nextIndex = Math.min(value.length, length - 1);
-        focusInput(nextIndex);
-        return;
-      }
       handleInputFocus(index, event);
     },
     onBlur(event) {

package/otp-field/input/OTPFieldInputDataAttributes.d.ts

@@ -20,11 +20,11 @@ export declare enum OTPFieldInputDataAttributes {
    */
   required = "data-required",
   /**
-   * Present when the OTP field is in valid state (when wrapped in Field.Root).
+   * Present when the OTP field is in a valid state (when wrapped in Field.Root).
    */
   valid = "data-valid",
   /**
-   * Present when the OTP field is in invalid state (when wrapped in Field.Root).
+   * Present when the OTP field is in an invalid state (when wrapped in Field.Root).
    */
   invalid = "data-invalid",
   /**

package/otp-field/input/OTPFieldInputDataAttributes.js

@@ -26,11 +26,11 @@ let OTPFieldInputDataAttributes = exports.OTPFieldInputDataAttributes = /*#__PUR
    */
   OTPFieldInputDataAttributes["required"] = "data-required";
   /**
-   * Present when the OTP field is in valid state (when wrapped in Field.Root).
+   * Present when the OTP field is in a valid state (when wrapped in Field.Root).
    */
   OTPFieldInputDataAttributes["valid"] = "data-valid";
   /**
-   * Present when the OTP field is in invalid state (when wrapped in Field.Root).
+   * Present when the OTP field is in an invalid state (when wrapped in Field.Root).
    */
   OTPFieldInputDataAttributes["invalid"] = "data-invalid";
   /**

package/otp-field/root/OTPFieldRoot.d.ts

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import type { FieldRootState } from "../../field/root/FieldRoot.js";
-import type { BaseUIComponentProps } from "../../utils/types.js";
-import { type BaseUIChangeEventDetails, type BaseUIGenericEventDetails } from "../../utils/createBaseUIEventDetails.js";
-import { REASONS } from "../../utils/reasons.js";
+import type { BaseUIComponentProps } from "../../internals/types.js";
+import { type BaseUIChangeEventDetails, type BaseUIGenericEventDetails } from "../../internals/createBaseUIEventDetails.js";
+import { REASONS } from "../../internals/reasons.js";
 import { type OTPValidationType } from "../utils/otp.js";
 /**
  * Groups all OTP field parts and manages their state.

package/otp-field/root/OTPFieldRoot.js

@@ -15,18 +15,18 @@ var _useValueAsRef = require("@base-ui/utils/useValueAsRef");
 var _visuallyHidden = require("@base-ui/utils/visuallyHidden");
 var _warn = require("@base-ui/utils/warn");
 var _owner = require("@base-ui/utils/owner");
-var _shadowDom = require("../../floating-ui-react/utils/shadowDom");
-var _CompositeList = require("../../composite/list/CompositeList");
-var _FieldRootContext = require("../../field/root/FieldRootContext");
-var _useRegisterFieldControl = require("../../field/root/useRegisterFieldControl");
-var _FormContext = require("../../form/FormContext");
-var _LabelableContext = require("../../labelable-provider/LabelableContext");
-var _useAriaLabelledBy = require("../../labelable-provider/useAriaLabelledBy");
-var _useLabelableId = require("../../labelable-provider/useLabelableId");
-var _useRenderElement = require("../../utils/useRenderElement");
-var _useValueChanged = require("../../utils/useValueChanged");
-var _createBaseUIEventDetails = require("../../utils/createBaseUIEventDetails");
-var _reasons = require("../../utils/reasons");
+var _utils = require("../../floating-ui-react/utils");
+var _CompositeList = require("../../internals/composite/list/CompositeList");
+var _FieldRootContext = require("../../internals/field-root-context/FieldRootContext");
+var _useRegisterFieldControl = require("../../internals/field-register-control/useRegisterFieldControl");
+var _FormContext = require("../../internals/form-context/FormContext");
+var _LabelableContext = require("../../internals/labelable-provider/LabelableContext");
+var _useAriaLabelledBy = require("../../internals/labelable-provider/useAriaLabelledBy");
+var _useLabelableId = require("../../internals/labelable-provider/useLabelableId");
+var _useRenderElement = require("../../internals/useRenderElement");
+var _useValueChanged = require("../../internals/useValueChanged");
+var _createBaseUIEventDetails = require("../../internals/createBaseUIEventDetails");
+var _reasons = require("../../internals/reasons");
 var _OTPFieldRootContext = require("./OTPFieldRootContext");
 var _stateAttributesMapping = require("../utils/stateAttributesMapping");
 var _otp = require("../utils/otp");
@@ -113,6 +113,7 @@ const OTPFieldRoot = exports.OTPFieldRoot = /*#__PURE__*/React.forwardRef(functi
   const pattern = validationConfig?.slotPattern;
   const hiddenInputPattern = validationConfig?.getRootPattern(length);
   const inputMode = inputModeProp ?? validationConfig?.inputMode;
+  const hasValidLength = Number.isInteger(length) && length > 0;
   const value = (0, _otp.normalizeOTPValue)(valueUnwrapped, length, validationType, sanitizeValue);
   const valueRef = (0, _useValueAsRef.useValueAsRef)(value);
   const filled = value !== '';
@@ -221,7 +222,7 @@ const OTPFieldRoot = exports.OTPFieldRoot = /*#__PURE__*/React.forwardRef(functi
     event.currentTarget.select();
   });
   const handleInputBlur = (0, _useStableCallback.useStableCallback)(event => {
-    if ((0, _shadowDom.contains)(rootRef.current, event.relatedTarget)) {
+    if ((0, _utils.contains)(rootRef.current, event.relatedTarget)) {
       return;
     }
     setTouched(true);
@@ -290,93 +291,48 @@ const OTPFieldRoot = exports.OTPFieldRoot = /*#__PURE__*/React.forwardRef(functi
     },
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_OTPFieldRootContext.OTPFieldRootContext.Provider, {
       value: contextValue,
-      children: [element, /*#__PURE__*/(0, _jsxRuntime.jsx)(OTPFieldHiddenInput, {
-        autoComplete: autoComplete,
-        disabled: disabled,
-        focusInput: focusInput,
+      children: [element, hasValidLength && /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+        ...validation.getInputValidationProps({
+          onFocus() {
+            focusInput(0);
+          },
+          onChange(event) {
+            if (event.nativeEvent.defaultPrevented) {
+              return;
+            }
+            const rawValue = event.currentTarget.value;
+            const normalizedValue = (0, _otp.normalizeOTPValue)(rawValue, length, validationType, sanitizeValue);
+            if ((0, _otp.stripOTPWhitespace)(rawValue).length > normalizedValue.length) {
+              reportValueInvalid(rawValue, (0, _createBaseUIEventDetails.createGenericEventDetails)(_reasons.REASONS.inputChange, event.nativeEvent));
+            }
+            const committedValue = setValue(normalizedValue, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.inputChange, event.nativeEvent));
+            if (committedValue != null && committedValue !== '') {
+              queueFocusInput(committedValue.length - 1, committedValue);
+            }
+          }
+        }),
+        ref: validation.inputRef,
+        type: "text",
+        id: id && name == null ? `${id}-hidden-input` : undefined,
         form: form,
-        id: id,
-        inputMode: inputMode,
-        length: length,
         name: name,
-        onValueInvalid: reportValueInvalid,
+        value: value,
+        autoComplete: autoComplete,
+        inputMode: inputMode,
+        minLength: length,
+        maxLength: length,
         pattern: hiddenInputPattern,
-        queueFocusInput: queueFocusInput,
+        disabled: disabled,
         readOnly: readOnly,
-        sanitizeValue: sanitizeValue,
         required: required,
-        setValue: setValue,
-        validationType: validationType,
-        validation: validation,
-        value: value
+        "aria-hidden": true,
+        tabIndex: -1,
+        style: name ? _visuallyHidden.visuallyHiddenInput : _visuallyHidden.visuallyHidden
       })]
     })
   });
 });
 if (process.env.NODE_ENV !== "production") OTPFieldRoot.displayName = "OTPFieldRoot";
-function OTPFieldHiddenInput(props) {
-  const {
-    autoComplete,
-    disabled,
-    focusInput,
-    form,
-    id,
-    inputMode,
-    length,
-    name,
-    onValueInvalid,
-    pattern,
-    queueFocusInput,
-    readOnly,
-    sanitizeValue,
-    required,
-    setValue,
-    validationType,
-    validation,
-    value
-  } = props;
-  if (!Number.isInteger(length) || length <= 0) {
-    return null;
-  }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
-    ...validation.getInputValidationProps({
-      onFocus() {
-        focusInput(0);
-      },
-      onChange(event) {
-        if (event.nativeEvent.defaultPrevented) {
-          return;
-        }
-        const rawValue = event.currentTarget.value;
-        const normalizedValue = (0, _otp.normalizeOTPValue)(rawValue, length, validationType, sanitizeValue);
-        if ((0, _otp.stripOTPWhitespace)(rawValue).length > normalizedValue.length) {
-          onValueInvalid(rawValue, (0, _createBaseUIEventDetails.createGenericEventDetails)(_reasons.REASONS.inputChange, event.nativeEvent));
-        }
-        const committedValue = setValue(normalizedValue, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.inputChange, event.nativeEvent));
-        if (committedValue != null && committedValue !== '') {
-          queueFocusInput(committedValue.length - 1, committedValue);
-        }
-      }
-    }),
-    ref: validation.inputRef,
-    type: "text",
-    id: id && name == null ? `${id}-hidden-input` : undefined,
-    form: form,
-    name: name,
-    value: value,
-    autoComplete: autoComplete,
-    inputMode: inputMode,
-    minLength: length,
-    maxLength: length,
-    pattern: pattern,
-    disabled: disabled,
-    readOnly: readOnly,
-    required: required,
-    "aria-hidden": true,
-    tabIndex: -1,
-    style: name ? _visuallyHidden.visuallyHiddenInput : _visuallyHidden.visuallyHidden
-  });
-}
 function mergeAriaIds(...values) {
   const ids = values.flatMap(value => value?.split(/\s+/).filter(Boolean) ?? []);
   return ids.length > 0 ? Array.from(new Set(ids)).join(' ') : undefined;

package/otp-field/root/OTPFieldRootDataAttributes.d.ts

@@ -16,11 +16,11 @@ export declare enum OTPFieldRootDataAttributes {
    */
   required = "data-required",
   /**
-   * Present when the OTP field is in valid state (when wrapped in Field.Root).
+   * Present when the OTP field is in a valid state (when wrapped in Field.Root).
    */
   valid = "data-valid",
   /**
-   * Present when the OTP field is in invalid state (when wrapped in Field.Root).
+   * Present when the OTP field is in an invalid state (when wrapped in Field.Root).
    */
   invalid = "data-invalid",
   /**

package/otp-field/root/OTPFieldRootDataAttributes.js

@@ -22,11 +22,11 @@ let OTPFieldRootDataAttributes = exports.OTPFieldRootDataAttributes = /*#__PURE_
    */
   OTPFieldRootDataAttributes["required"] = "data-required";
   /**
-   * Present when the OTP field is in valid state (when wrapped in Field.Root).
+   * Present when the OTP field is in a valid state (when wrapped in Field.Root).
    */
   OTPFieldRootDataAttributes["valid"] = "data-valid";
   /**
-   * Present when the OTP field is in invalid state (when wrapped in Field.Root).
+   * Present when the OTP field is in an invalid state (when wrapped in Field.Root).
    */
   OTPFieldRootDataAttributes["invalid"] = "data-invalid";
   /**

package/otp-field/utils/otp.js

@@ -34,11 +34,8 @@ function getOTPValidationConfig(validationType) {
   }
   return OTP_VALIDATION_CONFIG[validationType];
 }
-function removeWhitespace(value) {
-  return value.replace(/\s/g, '');
-}
 function stripOTPWhitespace(value) {
-  return removeWhitespace(value ?? '');
+  return (value ?? '').replace(/\s/g, '');
 }
 
 /**

package/otp-field/utils/stateAttributesMapping.d.ts

@@ -1,4 +1,4 @@
-import type { StateAttributesMapping } from "../../utils/getStateAttributesProps.js";
+import type { StateAttributesMapping } from "../../internals/getStateAttributesProps.js";
 import type { OTPFieldRootState } from "../root/OTPFieldRoot.js";
 import type { OTPFieldInputState } from "../input/OTPFieldInput.js";
 export declare const rootStateAttributesMapping: StateAttributesMapping<OTPFieldRootState>;

package/otp-field/utils/stateAttributesMapping.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.rootStateAttributesMapping = exports.inputStateAttributesMapping = void 0;
-var _constants = require("../../field/utils/constants");
+var _constants = require("../../internals/field-constants/constants");
 const rootStateAttributesMapping = exports.rootStateAttributesMapping = {
   value: () => null,
   length: () => null,