@base-ui/react 1.2.0 → 1.4.0

package/esm/otp-field/input/OTPFieldInputDataAttributes.js

@@ -0,0 +1,43 @@
+export let OTPFieldInputDataAttributes = /*#__PURE__*/function (OTPFieldInputDataAttributes) {
+  /**
+   * Present when all slots are filled.
+   */
+  OTPFieldInputDataAttributes["complete"] = "data-complete";
+  /**
+   * Present when the input contains a character.
+   */
+  OTPFieldInputDataAttributes["filled"] = "data-filled";
+  /**
+   * Present when the OTP field is disabled.
+   */
+  OTPFieldInputDataAttributes["disabled"] = "data-disabled";
+  /**
+   * Present when the OTP field is readonly.
+   */
+  OTPFieldInputDataAttributes["readonly"] = "data-readonly";
+  /**
+   * Present when the OTP field is required.
+   */
+  OTPFieldInputDataAttributes["required"] = "data-required";
+  /**
+   * Present when the OTP field is in 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).
+   */
+  OTPFieldInputDataAttributes["invalid"] = "data-invalid";
+  /**
+   * Present when the OTP field has been touched (when wrapped in Field.Root).
+   */
+  OTPFieldInputDataAttributes["touched"] = "data-touched";
+  /**
+   * Present when the OTP field's value has changed (when wrapped in Field.Root).
+   */
+  OTPFieldInputDataAttributes["dirty"] = "data-dirty";
+  /**
+   * Present when any OTP field input is focused.
+   */
+  OTPFieldInputDataAttributes["focused"] = "data-focused";
+  return OTPFieldInputDataAttributes;
+}({});

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

@@ -0,0 +1,159 @@
+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 OTPValidationType } from "../utils/otp.js";
+/**
+ * Groups all OTP field parts and manages their state.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI OTP Field](https://base-ui.com/react/components/otp-field)
+ */
+export declare const OTPFieldRoot: React.ForwardRefExoticComponent<Omit<OTPFieldRootProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export interface OTPFieldRootProps extends Omit<BaseUIComponentProps<'div', OTPFieldRootState>, 'onChange'> {
+  /**
+   * The id of the first input element.
+   * Subsequent inputs derive their ids from it (`{id}-2`, `{id}-3`, and so on).
+   */
+  id?: string | undefined;
+  /**
+   * The input autocomplete attribute. Applied to the first slot and hidden validation input.
+   * @default 'one-time-code'
+   */
+  autoComplete?: string | undefined;
+  /**
+   * A string specifying the `form` element with which the hidden input is associated.
+   * This string's value must match the id of a `form` element in the same document.
+   */
+  form?: string | undefined;
+  /**
+   * The number of OTP input slots.
+   * Required so the root can clamp values, detect completion, and generate
+   * consistent validation markup before all slots hydrate.
+   */
+  length: number;
+  /**
+   * Whether to submit the owning form when the OTP becomes complete.
+   * @default false
+   */
+  autoSubmit?: boolean | undefined;
+  /**
+   * Whether the slot inputs should mask entered characters.
+   * Pass `type` directly to individual `<OTPField.Input>` parts to use a custom
+   * input type.
+   * @default false
+   */
+  mask?: boolean | undefined;
+  /**
+   * The virtual keyboard hint applied to the slot inputs and hidden validation input.
+   *
+   * Built-in validation modes provide sensible defaults, but you can override them when needed.
+   */
+  inputMode?: React.HTMLAttributes<HTMLInputElement>['inputMode'] | undefined;
+  /**
+   * The type of input validation to apply to the OTP value.
+   * @default 'numeric'
+   */
+  validationType?: OTPFieldRoot.ValidationType | undefined;
+  /**
+   * Function for custom sanitization when `validationType` is set to `'none'`.
+   * This function runs before updating the OTP value from user interactions.
+   */
+  sanitizeValue?: ((value: string) => string) | undefined;
+  /**
+   * Whether the user must enter a value before submitting a form.
+   * @default false
+   */
+  required?: boolean | undefined;
+  /**
+   * Whether the component should ignore user interaction.
+   * @default false
+   */
+  disabled?: boolean | undefined;
+  /**
+   * Whether the user should be unable to change the field value.
+   * @default false
+   */
+  readOnly?: boolean | undefined;
+  /**
+   * Identifies the field when a form is submitted.
+   */
+  name?: string | undefined;
+  /**
+   * The OTP value.
+   */
+  value?: string | undefined;
+  /**
+   * The uncontrolled OTP value when the component is initially rendered.
+   */
+  defaultValue?: string | undefined;
+  /**
+   * Callback fired when the OTP value changes.
+   *
+   * The `eventDetails.reason` indicates what triggered the change:
+   * - `'input-change'` for typing or autofill
+   * - `'input-clear'` when a character is removed by text input
+   * - `'input-paste'` for paste interactions
+   * - `'keyboard'` for keyboard interactions that change the value
+   */
+  onValueChange?: ((value: string, eventDetails: OTPFieldRoot.ChangeEventDetails) => void) | undefined;
+  /**
+   * Callback fired when entered text contains characters that are rejected by sanitization,
+   * before the OTP value updates.
+   *
+   * The `value` argument is the attempted user-entered string before sanitization.
+   */
+  onValueInvalid?: ((value: string, eventDetails: OTPFieldRoot.InvalidEventDetails) => void) | undefined;
+  /**
+   * Callback function that is fired when the OTP value becomes complete.
+   *
+   * It runs later than `onValueChange`, after the internal value update is applied.
+   *
+   * If `autoSubmit` is enabled, it runs immediately before the owning form is submitted.
+   */
+  onValueComplete?: ((value: string, eventDetails: OTPFieldRoot.CompleteEventDetails) => void) | undefined;
+}
+export interface OTPFieldRootState extends FieldRootState {
+  /**
+   * Whether all slots are filled.
+   */
+  complete: boolean;
+  /**
+   * Whether the component should ignore user interaction.
+   */
+  disabled: boolean;
+  /**
+   * The number of OTP input slots.
+   */
+  length: number;
+  /**
+   * Whether the user should be unable to change the field value.
+   */
+  readOnly: boolean;
+  /**
+   * Whether the user must enter a value before submitting a form.
+   */
+  required: boolean;
+  /**
+   * The OTP value.
+   */
+  value: string;
+}
+export type OTPFieldRootChangeEventReason = typeof REASONS.inputChange | typeof REASONS.inputClear | typeof REASONS.inputPaste | typeof REASONS.keyboard;
+export type OTPFieldRootChangeEventDetails = BaseUIChangeEventDetails<OTPFieldRoot.ChangeEventReason>;
+export type OTPFieldRootInvalidEventReason = typeof REASONS.inputChange | typeof REASONS.inputPaste;
+export type OTPFieldRootInvalidEventDetails = BaseUIGenericEventDetails<OTPFieldRoot.InvalidEventReason>;
+export type OTPFieldRootCompleteEventReason = typeof REASONS.inputChange | typeof REASONS.inputPaste;
+export type OTPFieldRootCompleteEventDetails = BaseUIGenericEventDetails<OTPFieldRoot.CompleteEventReason>;
+export declare namespace OTPFieldRoot {
+  type State = OTPFieldRootState;
+  type Props = OTPFieldRootProps;
+  type ValidationType = OTPValidationType;
+  type ChangeEventReason = OTPFieldRootChangeEventReason;
+  type ChangeEventDetails = OTPFieldRootChangeEventDetails;
+  type InvalidEventReason = OTPFieldRootInvalidEventReason;
+  type InvalidEventDetails = OTPFieldRootInvalidEventDetails;
+  type CompleteEventReason = OTPFieldRootCompleteEventReason;
+  type CompleteEventDetails = OTPFieldRootCompleteEventDetails;
+}

package/esm/otp-field/root/OTPFieldRoot.js

@@ -0,0 +1,408 @@
+'use client';
+
+import * as React from 'react';
+import { SafeReact } from '@base-ui/utils/safeReact';
+import { useControlled } from '@base-ui/utils/useControlled';
+import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
+import { useStableCallback } from '@base-ui/utils/useStableCallback';
+import { useValueAsRef } from '@base-ui/utils/useValueAsRef';
+import { visuallyHidden, visuallyHiddenInput } from '@base-ui/utils/visuallyHidden';
+import { warn } from '@base-ui/utils/warn';
+import { ownerDocument } from '@base-ui/utils/owner';
+import { contains } from "../../floating-ui-react/utils/shadowDom.js";
+import { CompositeList } from "../../composite/list/CompositeList.js";
+import { useFieldRootContext } from "../../field/root/FieldRootContext.js";
+import { useRegisterFieldControl } from "../../field/root/useRegisterFieldControl.js";
+import { useFormContext } from "../../form/FormContext.js";
+import { useLabelableContext } from "../../labelable-provider/LabelableContext.js";
+import { useAriaLabelledBy } from "../../labelable-provider/useAriaLabelledBy.js";
+import { useLabelableId } from "../../labelable-provider/useLabelableId.js";
+import { useRenderElement } from "../../utils/useRenderElement.js";
+import { useValueChanged } from "../../utils/useValueChanged.js";
+import { createChangeEventDetails, createGenericEventDetails } from "../../utils/createBaseUIEventDetails.js";
+import { REASONS } from "../../utils/reasons.js";
+import { OTPFieldRootContext } from "./OTPFieldRootContext.js";
+import { rootStateAttributesMapping } from "../utils/stateAttributesMapping.js";
+import { getOTPValidationConfig, normalizeOTPValue, stripOTPWhitespace } from "../utils/otp.js";
+
+/**
+ * Groups all OTP field parts and manages their state.
+ * Renders a `<div>` element.
+ *
+ * Documentation: [Base UI OTP Field](https://base-ui.com/react/components/otp-field)
+ */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const OTPFieldRoot = /*#__PURE__*/React.forwardRef(function OTPFieldRoot(componentProps, forwardedRef) {
+  const {
+    'aria-describedby': ariaDescribedByProp,
+    'aria-labelledby': ariaLabelledByProp,
+    id: idProp,
+    autoComplete = 'one-time-code',
+    defaultValue,
+    value: valueProp,
+    onValueChange,
+    onValueComplete: onValueCompleteProp,
+    form,
+    length,
+    autoSubmit = false,
+    mask = false,
+    inputMode: inputModeProp,
+    validationType = 'numeric',
+    sanitizeValue,
+    disabled: disabledProp = false,
+    readOnly = false,
+    required = false,
+    name: nameProp,
+    onValueInvalid,
+    render,
+    className,
+    style,
+    ...elementProps
+  } = componentProps;
+  const {
+    setDirty,
+    validityData,
+    disabled: fieldDisabled,
+    setFilled,
+    invalid,
+    name: fieldName,
+    state: fieldState,
+    validation,
+    validationMode,
+    shouldValidateOnChange,
+    setFocused,
+    setTouched
+  } = useFieldRootContext();
+  const {
+    clearErrors
+  } = useFormContext();
+  const {
+    getDescriptionProps,
+    labelId
+  } = useLabelableContext();
+  const disabled = fieldDisabled || disabledProp;
+  const name = fieldName ?? nameProp;
+  const [valueUnwrapped, setValueUnwrapped] = useControlled({
+    controlled: valueProp,
+    default: defaultValue,
+    name: 'OTPField',
+    state: 'value'
+  });
+  const rootRef = React.useRef(null);
+  const inputRefs = React.useRef([]);
+  const pendingFocusRef = React.useRef(null);
+  const pendingCompleteValueRef = React.useRef(null);
+  const firstInputRef = React.useMemo(() => ({
+    get current() {
+      return inputRefs.current[0] ?? null;
+    }
+  }), []);
+  const id = useLabelableId({
+    id: idProp
+  });
+  const ariaLabelledBy = useAriaLabelledBy(ariaLabelledByProp, labelId, firstInputRef, true, id);
+  const inputAriaLabelledBy = ariaLabelledByProp == null ? ariaLabelledBy : undefined;
+  const fieldDescriptionProps = getDescriptionProps({});
+  const ariaDescribedBy = mergeAriaIds(fieldDescriptionProps['aria-describedby'], ariaDescribedByProp);
+  const validationConfig = getOTPValidationConfig(validationType);
+  const pattern = validationConfig?.slotPattern;
+  const hiddenInputPattern = validationConfig?.getRootPattern(length);
+  const inputMode = inputModeProp ?? validationConfig?.inputMode;
+  const value = normalizeOTPValue(valueUnwrapped, length, validationType, sanitizeValue);
+  const valueRef = useValueAsRef(value);
+  const filled = value !== '';
+  const [inputCount, setInputCount] = React.useState(0);
+  const [focusedIndex, setFocusedIndex] = React.useState(() => Math.min(value.length, length - 1));
+  const [focused, setFocusedState] = React.useState(false);
+  const activeIndex = focused ? Math.min(focusedIndex, Math.max(length - 1, 0)) : Math.min(value.length, length - 1);
+  useIsoLayoutEffect(() => {
+    setFilled(filled);
+  }, [filled, setFilled]);
+  if (process.env.NODE_ENV !== 'production') {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    useOTPFieldRootDevWarnings({
+      inputCount,
+      length,
+      sanitizeValue,
+      validationType
+    });
+  }
+  useRegisterFieldControl(firstInputRef, {
+    id,
+    getValue: () => valueRef.current,
+    value
+  });
+  const focusInput = useStableCallback(index => {
+    const targetIndex = Math.min(Math.max(index, 0), Math.max(inputRefs.current.length - 1, 0));
+    const target = inputRefs.current[targetIndex];
+    target?.focus();
+    target?.select();
+  });
+  const queueFocusInput = useStableCallback((index, nextValue) => {
+    pendingFocusRef.current = {
+      index,
+      value: nextValue
+    };
+  });
+  function requestSubmit() {
+    let formElement = validation.inputRef.current?.form ?? inputRefs.current[0]?.form ?? null;
+    if (form) {
+      const associatedElement = ownerDocument(rootRef.current).getElementById(form);
+      if (associatedElement?.tagName === 'FORM') {
+        formElement = associatedElement;
+      }
+    }
+    if (formElement && typeof formElement.requestSubmit === 'function') {
+      formElement.requestSubmit();
+    }
+  }
+  useValueChanged(value, () => {
+    clearErrors(name);
+    setDirty(value !== validityData.initialValue);
+    if (shouldValidateOnChange()) {
+      validation.commit(value);
+    } else {
+      validation.commit(value, true);
+    }
+    const pendingCompleteValue = pendingCompleteValueRef.current;
+    if (pendingCompleteValue != null) {
+      pendingCompleteValueRef.current = null;
+      if (pendingCompleteValue.value === value) {
+        onValueCompleteProp?.(value, pendingCompleteValue.eventDetails);
+        if (autoSubmit) {
+          requestSubmit();
+        }
+      }
+    }
+    const pendingFocus = pendingFocusRef.current;
+    if (pendingFocus != null) {
+      pendingFocusRef.current = null;
+      if (pendingFocus.value === value) {
+        focusInput(pendingFocus.index);
+      }
+    }
+  });
+  const setValue = useStableCallback((nextValue, details) => {
+    const normalizedValue = normalizeOTPValue(nextValue, length, validationType, sanitizeValue);
+    if (normalizedValue === valueRef.current) {
+      return null;
+    }
+    onValueChange?.(normalizedValue, details);
+    if (details.isCanceled) {
+      return null;
+    }
+    setValueUnwrapped(normalizedValue);
+    if (normalizedValue.length === length && valueRef.current.length !== length) {
+      pendingCompleteValueRef.current = {
+        value: normalizedValue,
+        eventDetails: createGenericEventDetails(details.reason, details.event)
+      };
+    } else if (normalizedValue.length !== length) {
+      pendingCompleteValueRef.current = null;
+    }
+    return normalizedValue;
+  });
+  const reportValueInvalid = useStableCallback((invalidValue, details) => {
+    onValueInvalid?.(invalidValue, details);
+  });
+  const handleInputFocus = useStableCallback((index, event) => {
+    if (index > valueRef.current.length) {
+      focusInput(Math.min(valueRef.current.length, length - 1));
+      return;
+    }
+    setFocusedIndex(index);
+    setFocusedState(true);
+    setFocused(true);
+    event.currentTarget.select();
+  });
+  const handleInputBlur = useStableCallback(event => {
+    if (contains(rootRef.current, event.relatedTarget)) {
+      return;
+    }
+    setTouched(true);
+    setFocusedState(false);
+    setFocused(false);
+    if (validationMode === 'onBlur') {
+      validation.commit(valueRef.current);
+    }
+  });
+  const getInputId = React.useCallback(index => {
+    if (id == null) {
+      return undefined;
+    }
+    return index === 0 ? id : `${id}-${index + 1}`;
+  }, [id]);
+  const state = React.useMemo(() => ({
+    ...fieldState,
+    complete: value.length === length,
+    disabled,
+    filled,
+    focused,
+    length,
+    readOnly,
+    required,
+    value
+  }), [disabled, fieldState, filled, focused, length, readOnly, required, value]);
+  const contextValue = React.useMemo(() => ({
+    autoComplete,
+    activeIndex,
+    disabled,
+    form,
+    focusInput,
+    queueFocusInput,
+    getInputId,
+    handleInputBlur,
+    handleInputFocus,
+    inputMode,
+    inputAriaLabelledBy,
+    invalid,
+    length,
+    mask,
+    pattern,
+    reportValueInvalid,
+    readOnly,
+    required,
+    sanitizeValue,
+    setValue,
+    state,
+    validationType,
+    value
+  }), [activeIndex, autoComplete, disabled, focusInput, form, getInputId, handleInputBlur, handleInputFocus, inputMode, inputAriaLabelledBy, invalid, length, mask, pattern, queueFocusInput, readOnly, reportValueInvalid, required, sanitizeValue, setValue, state, validationType, value]);
+  const element = useRenderElement('div', componentProps, {
+    ref: [forwardedRef, rootRef],
+    state,
+    props: [{
+      role: 'group',
+      'aria-describedby': ariaDescribedBy,
+      'aria-labelledby': ariaLabelledBy
+    }, elementProps],
+    stateAttributesMapping: rootStateAttributesMapping
+  });
+  return /*#__PURE__*/_jsx(CompositeList, {
+    elementsRef: inputRefs,
+    onMapChange: newMap => {
+      setInputCount(newMap.size);
+    },
+    children: /*#__PURE__*/_jsxs(OTPFieldRootContext.Provider, {
+      value: contextValue,
+      children: [element, /*#__PURE__*/_jsx(OTPFieldHiddenInput, {
+        autoComplete: autoComplete,
+        disabled: disabled,
+        focusInput: focusInput,
+        form: form,
+        id: id,
+        inputMode: inputMode,
+        length: length,
+        name: name,
+        onValueInvalid: reportValueInvalid,
+        pattern: hiddenInputPattern,
+        queueFocusInput: queueFocusInput,
+        readOnly: readOnly,
+        sanitizeValue: sanitizeValue,
+        required: required,
+        setValue: setValue,
+        validationType: validationType,
+        validation: validation,
+        value: value
+      })]
+    })
+  });
+});
+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__*/_jsx("input", {
+    ...validation.getInputValidationProps({
+      onFocus() {
+        focusInput(0);
+      },
+      onChange(event) {
+        if (event.nativeEvent.defaultPrevented) {
+          return;
+        }
+        const rawValue = event.currentTarget.value;
+        const normalizedValue = normalizeOTPValue(rawValue, length, validationType, sanitizeValue);
+        if (stripOTPWhitespace(rawValue).length > normalizedValue.length) {
+          onValueInvalid(rawValue, createGenericEventDetails(REASONS.inputChange, event.nativeEvent));
+        }
+        const committedValue = setValue(normalizedValue, createChangeEventDetails(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 ? visuallyHiddenInput : 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;
+}
+function useOTPFieldRootDevWarnings(parameters) {
+  const {
+    inputCount,
+    length,
+    sanitizeValue,
+    validationType
+  } = parameters;
+  React.useEffect(() => {
+    if (!Number.isInteger(length) || length <= 0 || inputCount === 0 || inputCount === length) {
+      return;
+    }
+    const ownerStackMessage = SafeReact.captureOwnerStack?.() || '';
+    const message = '<OTPField.Root> `length` must match the number of rendered ' + `<OTPField.Input /> parts. Received \`length={${length}}\` but rendered ` + `${inputCount} input${inputCount === 1 ? '' : 's'}.`;
+    warn(message, ownerStackMessage);
+  }, [inputCount, length]);
+  React.useEffect(() => {
+    if (Number.isInteger(length) && length > 0) {
+      return;
+    }
+    const ownerStackMessage = SafeReact.captureOwnerStack?.() || '';
+    warn(`<OTPField.Root> \`length\` must be a positive integer. Received \`length={${String(length)}}\`.`, ownerStackMessage);
+  }, [length]);
+  React.useEffect(() => {
+    if (sanitizeValue == null || validationType === 'none') {
+      return;
+    }
+    const ownerStackMessage = SafeReact.captureOwnerStack?.() || '';
+    warn('<OTPField.Root> `sanitizeValue` is only used when `validationType="none"`.', ownerStackMessage);
+  }, [sanitizeValue, validationType]);
+}

package/esm/otp-field/root/OTPFieldRootContext.d.ts

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import type { OTPFieldRoot, OTPFieldRootState } from "./OTPFieldRoot.js";
+import type { OTPFieldInputState } from "../input/OTPFieldInput.js";
+export interface OTPFieldRootContext {
+  activeIndex: number;
+  autoComplete: string | undefined;
+  disabled: boolean;
+  form: string | undefined;
+  focusInput: (index: number) => void;
+  queueFocusInput: (index: number, value: string) => void;
+  getInputId: (index: number) => string | undefined;
+  handleInputBlur: (event: React.FocusEvent<HTMLInputElement>) => void;
+  handleInputFocus: (index: number, event: React.FocusEvent<HTMLInputElement>) => void;
+  inputMode: React.HTMLAttributes<HTMLInputElement>['inputMode'];
+  inputAriaLabelledBy: string | undefined;
+  invalid: boolean | undefined;
+  length: number;
+  mask: boolean;
+  pattern: string | undefined;
+  reportValueInvalid: (value: string, details: OTPFieldRoot.InvalidEventDetails) => void;
+  readOnly: boolean;
+  required: boolean;
+  sanitizeValue: ((value: string) => string) | undefined;
+  setValue: (value: string, details: OTPFieldRoot.ChangeEventDetails) => string | null;
+  state: OTPFieldRootState;
+  validationType: OTPFieldRoot.ValidationType;
+  value: string;
+}
+export declare const OTPFieldRootContext: React.Context<OTPFieldRootContext | undefined>;
+export declare function useOTPFieldRootContext(): OTPFieldRootContext;
+export declare function getOTPFieldInputState(state: OTPFieldRootState, value: string, index: number): OTPFieldInputState;

package/esm/otp-field/root/OTPFieldRootContext.js

@@ -0,0 +1,21 @@
+'use client';
+
+import _formatErrorMessage from "@base-ui/utils/formatErrorMessage";
+import * as React from 'react';
+export const OTPFieldRootContext = /*#__PURE__*/React.createContext(undefined);
+if (process.env.NODE_ENV !== "production") OTPFieldRootContext.displayName = "OTPFieldRootContext";
+export function useOTPFieldRootContext() {
+  const context = React.useContext(OTPFieldRootContext);
+  if (context === undefined) {
+    throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: OTPFieldRootContext is missing. OTPField parts must be placed within <OTPField.Root>.' : _formatErrorMessage(98));
+  }
+  return context;
+}
+export function getOTPFieldInputState(state, value, index) {
+  return {
+    ...state,
+    value,
+    index,
+    filled: value !== ''
+  };
+}