@base-ui/react 1.2.0 → 1.4.0

package/esm/number-field/root/useNumberFieldButton.js

@@ -1,9 +1,11 @@
 'use client';
 
-import * as React from 'react';
-import { DEFAULT_STEP, MAX_POINTER_MOVES_AFTER_TOUCH, SCROLLING_POINTER_MOVE_DISTANCE, TOUCH_TIMEOUT } from "../utils/constants.js";
+import { usePressAndHold } from "../../utils/usePressAndHold.js";
+import { DEFAULT_STEP, CHANGE_VALUE_TICK_DELAY, START_AUTO_CHANGE_DELAY, SCROLLING_POINTER_MOVE_DISTANCE } from "../utils/constants.js";
 import { parseNumber } from "../utils/parse.js";
 import { createChangeEventDetails, createGenericEventDetails } from "../../utils/createBaseUIEventDetails.js";
+import { REASONS } from "../../utils/reasons.js";
+
 // 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.
@@ -20,27 +22,15 @@ export function useNumberFieldButton(params) {
     incrementValue,
     inputRef,
     inputValue,
-    intentionalTouchCheckTimeout,
     isIncrement,
-    isPressedRef,
     locale,
-    movesAfterTouchRef,
     readOnly,
     setValue,
-    startAutoChange,
-    stopAutoChange,
     valueRef,
     lastChangedValueRef,
     onValueCommitted
   } = params;
-  const incrementDownCoordsRef = React.useRef({
-    x: 0,
-    y: 0
-  });
-  const isTouchingButtonRef = React.useRef(false);
-  const ignoreClickRef = React.useRef(false);
-  const pointerTypeRef = React.useRef('');
-  const pressReason = isIncrement ? 'increment-press' : 'decrement-press';
+  const pressReason = isIncrement ? REASONS.incrementPress : REASONS.decrementPress;
   function commitValue(nativeEvent) {
     allowInputSyncRef.current = true;
 
@@ -55,6 +45,28 @@ export function useNumberFieldButton(params) {
       }));
     }
   }
+  const {
+    pointerHandlers,
+    shouldSkipClick
+  } = usePressAndHold({
+    disabled: disabled || readOnly,
+    elementRef: inputRef,
+    tickDelay: CHANGE_VALUE_TICK_DELAY,
+    startDelay: START_AUTO_CHANGE_DELAY,
+    scrollDistance: SCROLLING_POINTER_MOVE_DISTANCE,
+    tick(triggerEvent) {
+      const amount = getStepAmount(triggerEvent) ?? DEFAULT_STEP;
+      return incrementValue(amount, {
+        direction: isIncrement ? 1 : -1,
+        event: triggerEvent,
+        reason: pressReason
+      });
+    },
+    onStop(nativeEvent) {
+      const committed = lastChangedValueRef.current ?? valueRef.current;
+      onValueCommitted(committed, createGenericEventDetails(pressReason, nativeEvent));
+    }
+  });
   const props = {
     disabled,
     'aria-readonly': readOnly || undefined,
@@ -68,17 +80,10 @@ export function useNumberFieldButton(params) {
       WebkitUserSelect: 'none',
       userSelect: 'none'
     },
-    onTouchStart() {
-      isTouchingButtonRef.current = true;
-    },
-    onTouchEnd() {
-      isTouchingButtonRef.current = false;
-    },
+    ...pointerHandlers,
     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)) {
+      if (event.defaultPrevented || isDisabled || shouldSkipClick(event)) {
         return;
       }
       commitValue(event.nativeEvent);
@@ -99,86 +104,14 @@ export function useNumberFieldButton(params) {
       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
-      };
+
+      // Sync dirty input value before starting the hold sequence.
       commitValue(event.nativeEvent);
-      const isTouchPointer = isTouchLikePointerType(event.pointerType);
-      if (!isTouchPointer) {
-        event.preventDefault();
+      if (!isTouchLikePointerType(event.pointerType)) {
+        // Focus the input so the user can continue with keyboard interactions.
         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();
+      pointerHandlers.onPointerDown(event);
     }
   };
   return props;

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { BaseUIComponentProps } from "../../utils/types.js";
-import type { NumberFieldRoot } from "../root/NumberFieldRoot.js";
+import type { NumberFieldRootState } from "../root/NumberFieldRoot.js";
 /**
  * An interactive area where the user can click and drag to change the field value.
  * Renders a `<span>` element.
@@ -8,13 +8,13 @@ import type { NumberFieldRoot } from "../root/NumberFieldRoot.js";
  * Documentation: [Base UI Number Field](https://base-ui.com/react/components/number-field)
  */
 export declare const NumberFieldScrubArea: React.ForwardRefExoticComponent<Omit<NumberFieldScrubAreaProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
-export interface NumberFieldScrubAreaState extends NumberFieldRoot.State {}
-export interface NumberFieldScrubAreaProps extends BaseUIComponentProps<'span', NumberFieldScrubArea.State> {
+export interface NumberFieldScrubAreaState extends NumberFieldRootState {}
+export interface NumberFieldScrubAreaProps extends BaseUIComponentProps<'span', NumberFieldScrubAreaState> {
   /**
    * Cursor movement direction in the scrub area.
    * @default 'horizontal'
    */
-  direction?: ('horizontal' | 'vertical') | undefined;
+  direction?: 'horizontal' | 'vertical' | undefined;
   /**
    * Determines how many pixels the cursor must move before the value changes.
    * A higher value will make scrubbing less sensitive.

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

@@ -2,6 +2,8 @@
 
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
+import { addEventListener } from '@base-ui/utils/addEventListener';
+import { mergeCleanups } from '@base-ui/utils/mergeCleanups';
 import { ownerWindow, ownerDocument } from '@base-ui/utils/owner';
 import { isFirefox, isWebKit } from '@base-ui/utils/detectBrowser';
 import { useStableCallback } from '@base-ui/utils/useStableCallback';
@@ -15,6 +17,7 @@ import { subscribeToVisualViewportResize } from "../utils/subscribeToVisualViewp
 import { DEFAULT_STEP } from "../utils/constants.js";
 import { createGenericEventDetails } from "../../utils/createBaseUIEventDetails.js";
 import { REASONS } from "../../utils/reasons.js";
+import { getTarget } from "../../floating-ui-react/utils.js";
 
 /**
  * An interactive area where the user can click and drag to change the field value.
@@ -30,6 +33,7 @@ export const NumberFieldScrubArea = /*#__PURE__*/React.forwardRef(function Numbe
     direction = 'horizontal',
     pixelSensitivity = 2,
     teleportDistance,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -184,12 +188,10 @@ export const NumberFieldScrubArea = /*#__PURE__*/React.forwardRef(function Numbe
       }
     }
     const win = ownerWindow(inputRef.current);
-    win.addEventListener('pointerup', handleScrubPointerUp, true);
-    win.addEventListener('pointermove', handleScrubPointerMove, true);
+    const unsubscribe = mergeCleanups(addEventListener(win, 'pointerup', handleScrubPointerUp, true), addEventListener(win, 'pointermove', handleScrubPointerMove, true));
     return () => {
       exitPointerLockTimeout.clear();
-      win.removeEventListener('pointerup', handleScrubPointerUp, true);
-      win.removeEventListener('pointermove', handleScrubPointerMove, true);
+      unsubscribe();
     };
   }, [disabled, readOnly, incrementValue, isScrubbing, getStepAmount, inputRef, onScrubbingChange, onScrub, direction, pixelSensitivity, lastChangedValueRef, onValueCommitted, valueRef, exitPointerLockTimeout]);
 
@@ -204,10 +206,7 @@ export const NumberFieldScrubArea = /*#__PURE__*/React.forwardRef(function Numbe
         event.preventDefault();
       }
     }
-    element.addEventListener('touchstart', handleTouchStart);
-    return () => {
-      element.removeEventListener('touchstart', handleTouchStart);
-    };
+    return addEventListener(element, 'touchstart', handleTouchStart);
   }, [disabled, readOnly]);
   const defaultProps = {
     role: 'presentation',
@@ -229,7 +228,7 @@ export const NumberFieldScrubArea = /*#__PURE__*/React.forwardRef(function Numbe
       }
       isScrubbingRef.current = true;
       didMoveRef.current = false;
-      pointerDownTargetRef.current = event.target;
+      pointerDownTargetRef.current = getTarget(event.nativeEvent);
       onScrubbingChange(true, event.nativeEvent);
 
       // WebKit causes significant layout shift with the native message, so we can't use it.

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { BaseUIComponentProps } from "../../utils/types.js";
-import type { NumberFieldRoot } from "../root/NumberFieldRoot.js";
+import type { NumberFieldRootState } from "../root/NumberFieldRoot.js";
 /**
  * A custom element to display instead of the native cursor while using the scrub area.
  * Renders a `<span>` element.
@@ -11,8 +11,8 @@ import type { NumberFieldRoot } from "../root/NumberFieldRoot.js";
  * Documentation: [Base UI Number Field](https://base-ui.com/react/components/number-field)
  */
 export declare const NumberFieldScrubAreaCursor: React.ForwardRefExoticComponent<Omit<NumberFieldScrubAreaCursorProps, "ref"> & React.RefAttributes<HTMLSpanElement>>;
-export interface NumberFieldScrubAreaCursorState extends NumberFieldRoot.State {}
-export interface NumberFieldScrubAreaCursorProps extends BaseUIComponentProps<'span', NumberFieldScrubAreaCursor.State> {}
+export interface NumberFieldScrubAreaCursorState extends NumberFieldRootState {}
+export interface NumberFieldScrubAreaCursorProps extends BaseUIComponentProps<'span', NumberFieldScrubAreaCursorState> {}
 export declare namespace NumberFieldScrubAreaCursor {
   type State = NumberFieldScrubAreaCursorState;
   type Props = NumberFieldScrubAreaCursorProps;

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

@@ -22,6 +22,7 @@ export const NumberFieldScrubAreaCursor = /*#__PURE__*/React.forwardRef(function
   const {
     render,
     className,
+    style,
     ...elementProps
   } = componentProps;
   const {

package/esm/number-field/utils/constants.d.ts

@@ -1,6 +1,4 @@
 export declare const CHANGE_VALUE_TICK_DELAY = 60;
 export declare const START_AUTO_CHANGE_DELAY = 400;
-export declare const TOUCH_TIMEOUT = 50;
-export declare const MAX_POINTER_MOVES_AFTER_TOUCH = 3;
 export declare const SCROLLING_POINTER_MOVE_DISTANCE = 8;
 export declare const DEFAULT_STEP = 1;

package/esm/number-field/utils/constants.js

@@ -1,6 +1,4 @@
 export const CHANGE_VALUE_TICK_DELAY = 60;
 export const START_AUTO_CHANGE_DELAY = 400;
-export const TOUCH_TIMEOUT = 50;
-export const MAX_POINTER_MOVES_AFTER_TOUCH = 3;
 export const SCROLLING_POINTER_MOVE_DISTANCE = 8;
 export const DEFAULT_STEP = 1;

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

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

package/esm/number-field/utils/subscribeToVisualViewportResize.js

@@ -1,3 +1,4 @@
+import { addEventListener } from '@base-ui/utils/addEventListener';
 import { ownerWindow } from '@base-ui/utils/owner';
 
 // This lets us invert the scale of the cursor to match the OS scale, in which the cursor doesn't
@@ -13,8 +14,5 @@ export function subscribeToVisualViewportResize(element, visualScaleRef) {
     }
   }
   handleVisualResize();
-  vV.addEventListener('resize', handleVisualResize);
-  return () => {
-    vV.removeEventListener('resize', handleVisualResize);
-  };
+  return addEventListener(vV, 'resize', handleVisualResize);
 }

package/esm/number-field/utils/types.d.ts

@@ -5,9 +5,9 @@ export interface ChangeEventCustomProperties {
 }
 export interface IncrementValueParameters {
   direction: Direction;
-  event?: (Event | React.SyntheticEvent) | undefined;
+  event?: Event | React.SyntheticEvent | undefined;
   reason: DirectionalChangeReason;
-  currentValue?: (number | null) | undefined;
+  currentValue?: number | null | undefined;
 }
 export interface EventWithOptionalKeyState {
   altKey?: boolean | undefined;

package/esm/otp-field/index.d.ts

@@ -0,0 +1,3 @@
+export * as OTPFieldPreview from "./index.parts.js";
+export type * from "./root/OTPFieldRoot.js";
+export type * from "./input/OTPFieldInput.js";

package/esm/otp-field/index.js

@@ -0,0 +1 @@
+export * as OTPFieldPreview from "./index.parts.js";

package/esm/otp-field/index.parts.d.ts

@@ -0,0 +1,3 @@
+export { OTPFieldRoot as Root } from "./root/OTPFieldRoot.js";
+export { OTPFieldInput as Input } from "./input/OTPFieldInput.js";
+export { Separator } from "../separator/Separator.js";

package/esm/otp-field/index.parts.js

@@ -0,0 +1,3 @@
+export { OTPFieldRoot as Root } from "./root/OTPFieldRoot.js";
+export { OTPFieldInput as Input } from "./input/OTPFieldInput.js";
+export { Separator } from "../separator/Separator.js";

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

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import type { BaseUIComponentProps } from "../../utils/types.js";
+import type { OTPFieldRootState } from "../root/OTPFieldRoot.js";
+/**
+ * An individual OTP character input.
+ * Renders an `<input>` element.
+ *
+ * Documentation: [Base UI OTP Field](https://base-ui.com/react/components/otp-field)
+ */
+export declare const OTPFieldInput: React.ForwardRefExoticComponent<Omit<OTPFieldInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+export interface OTPFieldInputState extends Omit<OTPFieldRootState, 'filled' | 'value'> {
+  /**
+   * Whether this input contains a character.
+   */
+  filled: boolean;
+  /**
+   * The input index.
+   */
+  index: number;
+  /**
+   * The character rendered in this slot.
+   */
+  value: string;
+}
+export interface OTPFieldInputProps extends BaseUIComponentProps<'input', OTPFieldInputState> {}
+export declare namespace OTPFieldInput {
+  type State = OTPFieldInputState;
+  type Props = OTPFieldInputProps;
+}

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

@@ -0,0 +1,237 @@
+'use client';
+
+import * as React from 'react';
+import { SafeReact } from '@base-ui/utils/safeReact';
+import { warn } from '@base-ui/utils/warn';
+import { stopEvent } from "../../floating-ui-react/utils.js";
+import { IndexGuessBehavior, useCompositeListItem } from "../../composite/list/useCompositeListItem.js";
+import { useRenderElement } from "../../utils/useRenderElement.js";
+import { createChangeEventDetails, createGenericEventDetails } from "../../utils/createBaseUIEventDetails.js";
+import { REASONS } from "../../utils/reasons.js";
+import { useOTPFieldRootContext, getOTPFieldInputState } from "../root/OTPFieldRootContext.js";
+import { inputStateAttributesMapping } from "../utils/stateAttributesMapping.js";
+import { normalizeOTPValue, removeOTPCharacter, replaceOTPValue, stripOTPWhitespace } from "../utils/otp.js";
+
+/**
+ * An individual OTP character input.
+ * Renders an `<input>` element.
+ *
+ * Documentation: [Base UI OTP Field](https://base-ui.com/react/components/otp-field)
+ */
+export const OTPFieldInput = /*#__PURE__*/React.forwardRef(function OTPFieldInput(componentProps, forwardedRef) {
+  const {
+    'aria-label': externalAriaLabel,
+    'aria-labelledby': externalAriaLabelledBy,
+    render,
+    className,
+    style,
+    ...elementProps
+  } = componentProps;
+  const {
+    activeIndex,
+    autoComplete,
+    disabled,
+    form,
+    focusInput,
+    queueFocusInput,
+    getInputId,
+    handleInputBlur,
+    handleInputFocus,
+    inputMode,
+    inputAriaLabelledBy,
+    invalid,
+    length,
+    mask,
+    pattern,
+    reportValueInvalid,
+    readOnly,
+    required,
+    sanitizeValue,
+    setValue,
+    state,
+    validationType,
+    value
+  } = useOTPFieldRootContext();
+  const {
+    ref: listItemRef,
+    index
+  } = useCompositeListItem({
+    indexGuessBehavior: IndexGuessBehavior.GuessFromOrder
+  });
+  const inputRef = React.useRef(null);
+  const slotValue = value[index] ?? '';
+  const inputState = getOTPFieldInputState(state, slotValue, index);
+  const slotAriaLabel = externalAriaLabel;
+  const inheritedLabel = externalAriaLabelledBy ?? inputAriaLabelledBy;
+  const ariaLabel = index === 0 ? undefined : slotAriaLabel;
+  if (process.env.NODE_ENV !== 'production') {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    React.useEffect(() => {
+      if (index !== 0 || slotAriaLabel == null || inputRef.current?.labels?.length) {
+        return;
+      }
+      const ownerStackMessage = SafeReact.captureOwnerStack?.() || '';
+      warn('<OTPField.Input> ignores `aria-label` on the first input. Use a `<label>` or `<Field.Label>` to label the OTP field.', ownerStackMessage);
+    }, [index, slotAriaLabel]);
+  }
+  const inputProps = {
+    id: getInputId(index),
+    value: slotValue,
+    type: mask ? 'password' : 'text',
+    inputMode,
+    autoComplete: index === 0 ? autoComplete : 'off',
+    autoCorrect: 'off',
+    spellCheck: 'false',
+    enterKeyHint: index === length - 1 ? 'done' : 'next',
+    // Allow the first slot to accept a full code so browser paste/autofill can target it directly.
+    maxLength: index === 0 ? length : 1,
+    tabIndex: activeIndex === index ? 0 : -1,
+    disabled,
+    form,
+    pattern,
+    readOnly,
+    required,
+    'aria-labelledby': ariaLabel == null ? inheritedLabel : undefined,
+    'aria-invalid': invalid || undefined,
+    'aria-label': ariaLabel,
+    onMouseDown(event) {
+      if (event.defaultPrevented || disabled) {
+        return;
+      }
+      event.preventDefault();
+      focusInput(index);
+    },
+    onFocus(event) {
+      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) {
+      if (event.defaultPrevented) {
+        return;
+      }
+      handleInputBlur(event);
+    },
+    onChange(event) {
+      if (event.defaultPrevented || disabled || readOnly) {
+        return;
+      }
+      const rawValue = event.currentTarget.value;
+      const nextDigits = normalizeOTPValue(event.currentTarget.value, length, validationType, sanitizeValue);
+      const didSanitize = stripOTPWhitespace(rawValue).length > nextDigits.length;
+      if (didSanitize) {
+        reportValueInvalid(rawValue, createGenericEventDetails(REASONS.inputChange, event.nativeEvent));
+      }
+      if (nextDigits === '') {
+        if (rawValue === '') {
+          setValue(removeOTPCharacter(value, index), createChangeEventDetails(REASONS.inputClear, event.nativeEvent));
+        } else if (slotValue !== '') {
+          event.currentTarget.value = slotValue;
+          event.currentTarget.select();
+        }
+        return;
+      }
+      const nextValue = replaceOTPValue(value, index, nextDigits, length, validationType, sanitizeValue);
+      const committedValue = setValue(nextValue, createChangeEventDetails(REASONS.inputChange, event.nativeEvent));
+      if (committedValue != null) {
+        const nextInput = Math.min(index + nextDigits.length, length - 1);
+        queueFocusInput(nextInput, committedValue);
+      }
+    },
+    onKeyDown(event) {
+      if (event.defaultPrevented || disabled) {
+        return;
+      }
+      if (event.key === 'ArrowLeft') {
+        stopEvent(event);
+        focusInput(Math.max(0, index - 1));
+        return;
+      }
+      if (event.key === 'ArrowRight') {
+        stopEvent(event);
+        focusInput(Math.min(length - 1, index + 1));
+        return;
+      }
+      if (event.key === 'Home') {
+        stopEvent(event);
+        focusInput(0);
+        return;
+      }
+      if (event.key === 'End') {
+        stopEvent(event);
+        focusInput(Math.max(value.length - 1, 0));
+        return;
+      }
+      if (readOnly) {
+        return;
+      }
+      if (event.key === 'Delete') {
+        stopEvent(event);
+        const committedValue = setValue(removeOTPCharacter(value, index), createChangeEventDetails(REASONS.keyboard, event.nativeEvent));
+        if (committedValue != null) {
+          queueFocusInput(index, committedValue);
+        }
+        return;
+      }
+      const inputValue = event.currentTarget.value;
+      const fullSelection = event.currentTarget.selectionStart === 0 && event.currentTarget.selectionEnd === inputValue.length;
+      if (event.key.length === 1 && fullSelection && slotValue === event.key) {
+        stopEvent(event);
+        focusInput(Math.min(length - 1, index + 1));
+        return;
+      }
+      if (event.key === 'Backspace') {
+        stopEvent(event);
+        const deleteIndex = slotValue === '' ? Math.max(0, index - 1) : index;
+        const targetIndex = Math.max(0, index - 1);
+        const committedValue = setValue(removeOTPCharacter(value, deleteIndex), createChangeEventDetails(REASONS.keyboard, event.nativeEvent));
+        if (committedValue != null) {
+          queueFocusInput(targetIndex, committedValue);
+        }
+      }
+    },
+    onPaste(event) {
+      if (event.defaultPrevented || disabled || readOnly) {
+        return;
+      }
+      let rawValue = '';
+      try {
+        rawValue = event.clipboardData?.getData('text/plain') ?? '';
+      } catch {
+        if (process.env.NODE_ENV !== 'production') {
+          const ownerStackMessage = SafeReact.captureOwnerStack?.() || '';
+          warn('<OTPField.Input> could not read clipboard text during paste handling.', ownerStackMessage);
+        }
+        return;
+      }
+      event.preventDefault();
+      const nextDigits = normalizeOTPValue(rawValue, length, validationType, sanitizeValue);
+      const didSanitize = stripOTPWhitespace(rawValue).length > nextDigits.length;
+      if (didSanitize) {
+        reportValueInvalid(rawValue, createGenericEventDetails(REASONS.inputPaste, event.nativeEvent));
+      }
+      if (nextDigits === '') {
+        return;
+      }
+      const committedValue = setValue(replaceOTPValue(value, index, nextDigits, length, validationType, sanitizeValue), createChangeEventDetails(REASONS.inputPaste, event.nativeEvent));
+      if (committedValue != null) {
+        const nextInput = Math.min(index + nextDigits.length, length - 1);
+        queueFocusInput(nextInput, committedValue);
+      }
+    }
+  };
+  const element = useRenderElement('input', componentProps, {
+    ref: [forwardedRef, listItemRef, inputRef],
+    state: inputState,
+    props: [inputProps, elementProps],
+    stateAttributesMapping: inputStateAttributesMapping
+  });
+  return element;
+});
+if (process.env.NODE_ENV !== "production") OTPFieldInput.displayName = "OTPFieldInput";

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

@@ -0,0 +1,42 @@
+export declare enum OTPFieldInputDataAttributes {
+  /**
+   * Present when all slots are filled.
+   */
+  complete = "data-complete",
+  /**
+   * Present when the input contains a character.
+   */
+  filled = "data-filled",
+  /**
+   * Present when the OTP field is disabled.
+   */
+  disabled = "data-disabled",
+  /**
+   * Present when the OTP field is readonly.
+   */
+  readonly = "data-readonly",
+  /**
+   * Present when the OTP field is required.
+   */
+  required = "data-required",
+  /**
+   * Present when the OTP field is in valid state (when wrapped in Field.Root).
+   */
+  valid = "data-valid",
+  /**
+   * Present when the OTP field is in invalid state (when wrapped in Field.Root).
+   */
+  invalid = "data-invalid",
+  /**
+   * Present when the OTP field has been touched (when wrapped in Field.Root).
+   */
+  touched = "data-touched",
+  /**
+   * Present when the OTP field's value has changed (when wrapped in Field.Root).
+   */
+  dirty = "data-dirty",
+  /**
+   * Present when any OTP field input is focused.
+   */
+  focused = "data-focused",
+}