@octanejs/radix 0.1.32 → 0.1.33

package/dist/cjs/OneTimePasswordField.cjs

@@ -0,0 +1,729 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var OneTimePasswordField_exports = {};
+__export(OneTimePasswordField_exports, {
+  HiddenInput: () => OneTimePasswordFieldHiddenInput,
+  Input: () => OneTimePasswordFieldInput,
+  OneTimePasswordField: () => OneTimePasswordField,
+  OneTimePasswordFieldHiddenInput: () => OneTimePasswordFieldHiddenInput,
+  OneTimePasswordFieldInput: () => OneTimePasswordFieldInput,
+  Root: () => OneTimePasswordField,
+  createOneTimePasswordFieldScope: () => createOneTimePasswordFieldScope
+});
+module.exports = __toCommonJS(OneTimePasswordField_exports);
+var import_octane = require("octane");
+var import_compose_event_handlers = require("./compose-event-handlers.cjs");
+var import_compose_refs = require("./compose-refs.cjs");
+var import_context = require("./context.cjs");
+var import_direction = require("./direction.cjs");
+var import_internal = require("./internal.cjs");
+var import_Primitive = require("./Primitive.cjs");
+var RovingFocusGroup = __toESM(require("./RovingFocusGroup.cjs"), 1);
+var import_RovingFocusGroup = require("./RovingFocusGroup.cjs");
+var import_useControllableState = require("./useControllableState.cjs");
+var import_use_is_hydrated = require("./use-is-hydrated.cjs");
+const INPUT_VALIDATION_MAP = {
+  numeric: {
+    type: "numeric",
+    regexp: /[^\d]/g,
+    pattern: "\\d{1}",
+    inputMode: "numeric"
+  },
+  alpha: {
+    type: "alpha",
+    regexp: /[^a-zA-Z]/g,
+    pattern: "[a-zA-Z]{1}",
+    inputMode: "text"
+  },
+  alphanumeric: {
+    type: "alphanumeric",
+    regexp: /[^a-zA-Z0-9]/g,
+    pattern: "[a-zA-Z0-9]{1}",
+    inputMode: "text"
+  },
+  none: null
+};
+const ONE_TIME_PASSWORD_FIELD_NAME = "OneTimePasswordField";
+const [createOneTimePasswordFieldContext, createOneTimePasswordFieldScope] = (0, import_context.createContextScope)(
+  ONE_TIME_PASSWORD_FIELD_NAME,
+  [import_RovingFocusGroup.createRovingFocusGroupScope]
+);
+const useRovingFocusGroupScope = (0, import_RovingFocusGroup.createRovingFocusGroupScope)();
+const [OneTimePasswordFieldContext, useOneTimePasswordFieldContext] = createOneTimePasswordFieldContext(ONE_TIME_PASSWORD_FIELD_NAME);
+const OTP_INPUT_ATTR = "data-radix-otp-input";
+function createCollectionApi(getRoot) {
+  const elements = () => {
+    const root = getRoot();
+    if (!root) return [];
+    return Array.from(root.querySelectorAll(`input[${OTP_INPUT_ATTR}]`));
+  };
+  return {
+    get size() {
+      return elements().length;
+    },
+    at(index) {
+      const element = elements().at(index);
+      return element ? { element } : void 0;
+    },
+    from(element, offset) {
+      const els = elements();
+      const index = els.indexOf(element);
+      if (index === -1) return void 0;
+      let dest = index + offset;
+      if (dest < 0) dest = 0;
+      if (dest >= els.length) dest = els.length - 1;
+      const target = els[dest];
+      return target ? { element: target } : void 0;
+    },
+    indexOf(element) {
+      return elements().indexOf(element);
+    }
+  };
+}
+function OneTimePasswordField(props) {
+  const slot = (0, import_internal.S)("OneTimePasswordField.Root");
+  const {
+    __scopeOneTimePasswordField,
+    defaultValue,
+    value: valueProp,
+    onValueChange,
+    autoSubmit = false,
+    children,
+    onPaste,
+    onAutoSubmit,
+    disabled = false,
+    readOnly = false,
+    autoComplete = "one-time-code",
+    autoFocus = false,
+    form,
+    name,
+    placeholder,
+    type = "text",
+    // TODO (source): Change default to vertical when inputs use vertical writing mode
+    orientation = "horizontal",
+    dir,
+    validationType = "numeric",
+    sanitizeValue: sanitizeValueProp,
+    ref: forwardedRef,
+    ...domProps
+  } = props ?? {};
+  const rovingFocusGroupScope = useRovingFocusGroupScope(
+    __scopeOneTimePasswordField,
+    (0, import_internal.subSlot)(slot, "rfs")
+  );
+  const direction = (0, import_direction.useDirection)(dir);
+  const rootRef = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "root"));
+  const collection = (0, import_octane.useMemo)(
+    () => createCollectionApi(() => rootRef.current),
+    [],
+    (0, import_internal.subSlot)(slot, "coll")
+  );
+  const [collectionVersion, setCollectionVersion] = (0, import_octane.useState)(0, (0, import_internal.subSlot)(slot, "collVer"));
+  const registerInput = (0, import_octane.useCallback)(
+    () => {
+      setCollectionVersion((v) => v + 1);
+      return () => setCollectionVersion((v) => v + 1);
+    },
+    [],
+    (0, import_internal.subSlot)(slot, "register")
+  );
+  const validation = INPUT_VALIDATION_MAP[validationType] ?? null;
+  const sanitizeValue = (0, import_octane.useCallback)(
+    (value2) => {
+      let str;
+      if (Array.isArray(value2)) {
+        str = value2.map(removeWhitespace).join("");
+      } else {
+        str = removeWhitespace(value2);
+      }
+      if (validation) {
+        const regexp = new RegExp(validation.regexp);
+        str = str.replace(regexp, "");
+      } else if (sanitizeValueProp) {
+        str = sanitizeValueProp(str);
+      }
+      return str.split("");
+    },
+    [validation, sanitizeValueProp],
+    (0, import_internal.subSlot)(slot, "sanitize")
+  );
+  const controlledValue = (0, import_octane.useMemo)(
+    () => {
+      return valueProp != null ? sanitizeValue(valueProp) : void 0;
+    },
+    [valueProp, sanitizeValue],
+    (0, import_internal.subSlot)(slot, "controlled")
+  );
+  const handleValueChange = (0, import_octane.useCallback)(
+    (value2) => onValueChange?.(value2.join("")),
+    [onValueChange],
+    (0, import_internal.subSlot)(slot, "onChange")
+  );
+  const [value, setValue] = (0, import_useControllableState.useControllableState)(
+    {
+      prop: controlledValue,
+      defaultProp: defaultValue != null ? sanitizeValue(defaultValue) : [],
+      onChange: handleValueChange
+    },
+    (0, import_internal.subSlot)(slot, "value")
+  );
+  const latestValueRef = (0, import_octane.useRef)(value, (0, import_internal.subSlot)(slot, "latest"));
+  latestValueRef.current = value;
+  const dispatch = (0, import_octane.useCallback)(
+    (action) => {
+      const value2 = latestValueRef.current;
+      switch (action.type) {
+        case "SET_CHAR": {
+          const { index, char } = action;
+          const currentTarget = collection.at(index)?.element;
+          if (value2[index] === char) {
+            const next = currentTarget && collection.from(currentTarget, 1)?.element;
+            focusInput(next);
+            return;
+          }
+          if (char === "") {
+            return;
+          }
+          if (validation) {
+            const regexp = new RegExp(validation.regexp);
+            const clean = char.replace(regexp, "");
+            if (clean !== char) {
+              return;
+            }
+          }
+          if (value2.length >= collection.size) {
+            const newValue2 = [...value2];
+            newValue2[index] = char;
+            (0, import_octane.flushSync)(() => setValue(newValue2));
+            const next = currentTarget && collection.from(currentTarget, 1)?.element;
+            focusInput(next);
+            return;
+          }
+          const newValue = [...value2];
+          newValue[index] = char;
+          const lastElement = collection.at(-1)?.element;
+          (0, import_octane.flushSync)(() => setValue(newValue));
+          if (currentTarget !== lastElement) {
+            const next = currentTarget && collection.from(currentTarget, 1)?.element;
+            focusInput(next);
+          } else {
+            currentTarget?.select();
+          }
+          return;
+        }
+        case "CLEAR_CHAR": {
+          const { index, reason } = action;
+          if (!value2[index]) {
+            return;
+          }
+          const newValue = value2.filter((_, i) => i !== index);
+          const currentTarget = collection.at(index)?.element;
+          const previous = currentTarget && collection.from(currentTarget, -1)?.element;
+          (0, import_octane.flushSync)(() => setValue(newValue));
+          if (reason === "Backspace") {
+            focusInput(previous);
+          } else if (reason === "Delete" || reason === "Cut") {
+            focusInput(currentTarget);
+          }
+          return;
+        }
+        case "CLEAR": {
+          if (value2.length === 0) {
+            return;
+          }
+          if (action.reason === "Backspace" || action.reason === "Delete") {
+            (0, import_octane.flushSync)(() => setValue([]));
+            focusInput(collection.at(0)?.element);
+          } else {
+            setValue([]);
+          }
+          return;
+        }
+        case "PASTE": {
+          const { value: pastedValue } = action;
+          const sanitizedValue = sanitizeValue(pastedValue);
+          if (!sanitizedValue) {
+            return;
+          }
+          const value3 = sanitizedValue.slice(0, collection.size);
+          (0, import_octane.flushSync)(() => setValue(value3));
+          focusInput(collection.at(value3.length - 1)?.element);
+          return;
+        }
+      }
+    },
+    [collection, sanitizeValue, setValue, validation],
+    (0, import_internal.subSlot)(slot, "dispatch")
+  );
+  const validationTypeRef = (0, import_octane.useRef)(validation, (0, import_internal.subSlot)(slot, "vtype"));
+  (0, import_octane.useEffect)(
+    () => {
+      if (!validation) {
+        return;
+      }
+      if (validationTypeRef.current?.type !== validation.type) {
+        validationTypeRef.current = validation;
+        setValue(sanitizeValue(value.join("")));
+      }
+    },
+    [sanitizeValue, setValue, validation, value],
+    (0, import_internal.subSlot)(slot, "e:revalidate")
+  );
+  const hiddenInputRef = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "hidden"));
+  const userActionRef = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "action"));
+  const composedRefs = (0, import_compose_refs.useComposedRefs)(forwardedRef, rootRef, (0, import_internal.subSlot)(slot, "refs"));
+  const locateForm = (0, import_octane.useCallback)(
+    () => {
+      let formElement;
+      if (form) {
+        const associatedElement = (rootRef.current?.ownerDocument ?? document).getElementById(form);
+        if (isFormElement(associatedElement)) {
+          formElement = associatedElement;
+        }
+      } else if (hiddenInputRef.current) {
+        formElement = hiddenInputRef.current.form;
+      } else {
+        const firstInput = collection.at(0)?.element;
+        if (firstInput) {
+          formElement = firstInput.form;
+        }
+      }
+      return formElement ?? null;
+    },
+    [form, collection],
+    (0, import_internal.subSlot)(slot, "locate")
+  );
+  const attemptSubmit = (0, import_octane.useCallback)(
+    () => {
+      const formElement = locateForm();
+      formElement?.requestSubmit();
+    },
+    [locateForm],
+    (0, import_internal.subSlot)(slot, "submit")
+  );
+  (0, import_octane.useEffect)(
+    () => {
+      const form2 = locateForm();
+      if (form2) {
+        const reset = () => dispatch({ type: "CLEAR", reason: "Reset" });
+        form2.addEventListener("reset", reset);
+        return () => form2.removeEventListener("reset", reset);
+      }
+    },
+    [dispatch, locateForm],
+    (0, import_internal.subSlot)(slot, "e:reset")
+  );
+  const currentValue = value.join("");
+  const valueRef = (0, import_octane.useRef)(currentValue, (0, import_internal.subSlot)(slot, "valueRef"));
+  const length = collection.size;
+  (0, import_octane.useEffect)(
+    () => {
+      const previousValue = valueRef.current;
+      valueRef.current = currentValue;
+      if (previousValue === currentValue) {
+        return;
+      }
+      if (autoSubmit && value.every((char) => char !== "") && value.length === length) {
+        onAutoSubmit?.(value.join(""));
+        attemptSubmit();
+      }
+    },
+    [attemptSubmit, autoSubmit, currentValue, length, onAutoSubmit, value],
+    (0, import_internal.subSlot)(slot, "e:autosubmit")
+  );
+  const isHydrated = (0, import_use_is_hydrated.useIsHydrated)((0, import_internal.subSlot)(slot, "hydrated"));
+  return (0, import_octane.createElement)(OneTimePasswordFieldContext, {
+    scope: __scopeOneTimePasswordField,
+    value,
+    attemptSubmit,
+    collection,
+    collectionVersion,
+    registerInput,
+    disabled,
+    readOnly,
+    autoComplete,
+    autoFocus,
+    form,
+    name,
+    placeholder,
+    type,
+    hiddenInputRef,
+    userActionRef,
+    dispatch,
+    validationType,
+    orientation,
+    isHydrated,
+    sanitizeValue,
+    children: (0, import_octane.createElement)(RovingFocusGroup.Root, {
+      asChild: true,
+      ...rovingFocusGroupScope,
+      orientation,
+      dir: direction,
+      children: (0, import_octane.createElement)(import_Primitive.Primitive.div, {
+        ...domProps,
+        role: "group",
+        ref: composedRefs,
+        onPaste: (0, import_compose_event_handlers.composeEventHandlers)(onPaste, (event) => {
+          event.preventDefault();
+          const pastedValue = event.clipboardData?.getData("text/plain") ?? "";
+          dispatch({ type: "PASTE", value: pastedValue });
+        }),
+        children
+      })
+    })
+  });
+}
+function OneTimePasswordFieldHiddenInput(props) {
+  const slot = (0, import_internal.S)("OneTimePasswordField.HiddenInput");
+  const { __scopeOneTimePasswordField, ref: forwardedRef, ...hiddenProps } = props ?? {};
+  const { value, hiddenInputRef, name } = useOneTimePasswordFieldContext(
+    "OneTimePasswordFieldHiddenInput",
+    __scopeOneTimePasswordField
+  );
+  const ref = (0, import_compose_refs.useComposedRefs)(hiddenInputRef, forwardedRef, (0, import_internal.subSlot)(slot, "refs"));
+  return (0, import_octane.createElement)("input", {
+    ref,
+    name,
+    value: value.join("").trim(),
+    autoComplete: "off",
+    autoCapitalize: "off",
+    autoCorrect: "off",
+    autoSave: "off",
+    // octane: pass the string 'false' — a false-valued attribute would be removed,
+    // but React renders spellcheck="false".
+    spellCheck: "false",
+    ...hiddenProps,
+    type: "hidden",
+    readOnly: true
+  });
+}
+function OneTimePasswordFieldInput(props) {
+  const slot = (0, import_internal.S)("OneTimePasswordField.Input");
+  const {
+    __scopeOneTimePasswordField,
+    onInvalidChange,
+    index: indexProp,
+    // props users should pass on the Root instead (the source strips + TODO-warns)
+    value: _value,
+    defaultValue: _defaultValue,
+    disabled: _disabled,
+    readOnly: _readOnly,
+    autoComplete: _autoComplete,
+    autoFocus: _autoFocus,
+    form: _form,
+    name: _name,
+    placeholder: _placeholder,
+    type: _type,
+    // octane adaptation: React's onChange on a text input is the native `input` event —
+    // both user handlers fold into the single composed onInput binding below, so they
+    // must not stay in domProps (a native `change` binding would mean something else).
+    onInput: onInputProp,
+    onChange: onChangeProp,
+    ref: forwardedRef,
+    ...domProps
+  } = props ?? {};
+  const context = useOneTimePasswordFieldContext(
+    "OneTimePasswordFieldInput",
+    __scopeOneTimePasswordField
+  );
+  const { dispatch, userActionRef, validationType, isHydrated, disabled, collection } = context;
+  const registerInput = context.registerInput;
+  (0, import_octane.useLayoutEffect)(() => registerInput(), [registerInput], (0, import_internal.subSlot)(slot, "e:register"));
+  const rovingFocusGroupScope = useRovingFocusGroupScope(
+    __scopeOneTimePasswordField,
+    (0, import_internal.subSlot)(slot, "rfs")
+  );
+  const inputRef = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "input"));
+  const [element, setElement] = (0, import_octane.useState)(null, (0, import_internal.subSlot)(slot, "element"));
+  const index = indexProp ?? (element ? collection.indexOf(element) : -1);
+  const canSetPlaceholder = indexProp != null || isHydrated;
+  let placeholder;
+  if (canSetPlaceholder && context.placeholder && context.value.length === 0) {
+    placeholder = context.placeholder[index];
+  }
+  const composedInputRef = (0, import_compose_refs.useComposedRefs)(
+    forwardedRef,
+    inputRef,
+    setElement,
+    (0, import_internal.subSlot)(slot, "refs")
+  );
+  const char = context.value[index] ?? "";
+  const keyboardActionTimeoutRef = (0, import_octane.useRef)(null, (0, import_internal.subSlot)(slot, "timeout"));
+  (0, import_octane.useEffect)(
+    () => {
+      return () => {
+        if (keyboardActionTimeoutRef.current) {
+          window.clearTimeout(keyboardActionTimeoutRef.current);
+        }
+      };
+    },
+    [],
+    (0, import_internal.subSlot)(slot, "e:timeout")
+  );
+  const totalValue = context.value.join("").trim();
+  const lastSelectableIndex = clamp(totalValue.length, [0, collection.size - 1]);
+  const isFocusable = index <= lastSelectableIndex;
+  const validation = INPUT_VALIDATION_MAP[validationType] ?? void 0;
+  const handleInput = (event) => {
+    const value = event.currentTarget.value;
+    if (value.length > 1) {
+      event.preventDefault();
+      userActionRef.current = { type: "autocomplete-paste" };
+      dispatch({ type: "PASTE", value });
+      keyboardActionTimeoutRef.current = window.setTimeout(() => {
+        userActionRef.current = null;
+      }, 10);
+    }
+  };
+  const handleChange = (event) => {
+    const target = event.target;
+    const value = target.value;
+    event.preventDefault();
+    const action = userActionRef.current;
+    userActionRef.current = null;
+    if (action) {
+      switch (action.type) {
+        case "cut":
+          dispatch({ type: "CLEAR_CHAR", index, reason: "Cut" });
+          return;
+        case "autocomplete-paste":
+          return;
+        case "keydown": {
+          if (action.key === "Char") {
+            return;
+          }
+          const isClearing = action.key === "Backspace" && (action.metaKey || action.ctrlKey);
+          if (action.key === "Clear" || isClearing) {
+            dispatch({ type: "CLEAR", reason: "Backspace" });
+          } else {
+            dispatch({ type: "CLEAR_CHAR", index, reason: action.key });
+          }
+          return;
+        }
+        default:
+          return;
+      }
+    }
+    if (target.validity.valid) {
+      if (value === "") {
+        let reason = "Backspace";
+        const inputType = event.inputType;
+        if (inputType === "deleteContentBackward") {
+          reason = "Backspace";
+        } else if (inputType === "deleteByCut") {
+          reason = "Cut";
+        }
+        dispatch({ type: "CLEAR_CHAR", index, reason });
+      } else {
+        dispatch({ type: "SET_CHAR", char: value, index, event });
+      }
+    } else {
+      onInvalidChange?.(target.value);
+      requestAnimationFrame(() => {
+        if (target.ownerDocument.activeElement === target) {
+          target.select();
+        }
+      });
+    }
+  };
+  return (0, import_octane.createElement)(RovingFocusGroup.Item, {
+    ...rovingFocusGroupScope,
+    asChild: true,
+    focusable: !context.disabled && isFocusable,
+    active: index === lastSelectableIndex,
+    children: ({
+      hasTabStop,
+      isCurrentTabStop
+    }) => {
+      const supportsAutoComplete = hasTabStop ? isCurrentTabStop : index === 0;
+      return (0, import_octane.createElement)(import_Primitive.Primitive.input, {
+        ref: composedInputRef,
+        type: context.type,
+        disabled,
+        "aria-label": `Character ${index + 1} of ${collection.size}`,
+        autoComplete: supportsAutoComplete ? context.autoComplete : "off",
+        "data-1p-ignore": supportsAutoComplete ? void 0 : "true",
+        "data-lpignore": supportsAutoComplete ? void 0 : "true",
+        "data-protonpass-ignore": supportsAutoComplete ? void 0 : "true",
+        "data-bwignore": supportsAutoComplete ? void 0 : "true",
+        inputMode: validation?.inputMode,
+        maxLength: supportsAutoComplete ? collection.size : 1,
+        pattern: validation?.pattern,
+        readOnly: context.readOnly,
+        value: char,
+        placeholder,
+        [OTP_INPUT_ATTR]: "",
+        "data-radix-index": index,
+        ...domProps,
+        onFocus: (0, import_compose_event_handlers.composeEventHandlers)(props?.onFocus, (event) => {
+          event.currentTarget.select();
+        }),
+        onCut: (0, import_compose_event_handlers.composeEventHandlers)(props?.onCut, (event) => {
+          const currentValue = event.currentTarget.value;
+          if (currentValue !== "") {
+            userActionRef.current = { type: "cut" };
+            keyboardActionTimeoutRef.current = window.setTimeout(() => {
+              userActionRef.current = null;
+            }, 10);
+          }
+        }),
+        // octane adaptation: ONE native `input` binding runs the source's onInput
+        // logic then its onChange logic (React's order for a native input event).
+        // React's controlled-input restoration is the runtime's: after the event
+        // flush, the controlled `value` snaps the DOM back to the rendered char.
+        onInput: (event) => {
+          (0, import_compose_event_handlers.composeEventHandlers)(onInputProp, handleInput)(event);
+          (0, import_compose_event_handlers.composeEventHandlers)(onChangeProp, handleChange)(event);
+        },
+        onKeyDown: (0, import_compose_event_handlers.composeEventHandlers)(props?.onKeyDown, (event) => {
+          switch (event.key) {
+            case "Clear":
+            case "Delete":
+            case "Backspace": {
+              const currentTarget = event.currentTarget;
+              const currentValue = currentTarget.value;
+              if (currentValue === "") {
+                if (event.key === "Delete") return;
+                const isClearing = event.key === "Clear" || event.metaKey || event.ctrlKey;
+                if (isClearing) {
+                  dispatch({ type: "CLEAR", reason: "Backspace" });
+                } else {
+                  const element2 = currentTarget;
+                  requestAnimationFrame(() => {
+                    focusInput(collection.from(element2, -1)?.element);
+                  });
+                }
+              } else {
+                userActionRef.current = {
+                  type: "keydown",
+                  key: event.key,
+                  metaKey: event.metaKey,
+                  ctrlKey: event.ctrlKey
+                };
+                keyboardActionTimeoutRef.current = window.setTimeout(() => {
+                  userActionRef.current = null;
+                }, 10);
+              }
+              return;
+            }
+            case "Enter": {
+              event.preventDefault();
+              context.attemptSubmit();
+              return;
+            }
+            case "ArrowDown":
+            case "ArrowUp": {
+              if (context.orientation === "horizontal") {
+                event.preventDefault();
+              }
+              return;
+            }
+            // TODO (source): Handle left/right arrow keys in vertical writing mode
+            default: {
+              const currentTarget = event.currentTarget;
+              if (currentTarget.value === event.key) {
+                event.preventDefault();
+                focusInput(collection.from(currentTarget, 1)?.element);
+                return;
+              } else if (
+                // input already has a value, but...
+                currentTarget.value && // the value is not selected
+                !(currentTarget.selectionStart === 0 && currentTarget.selectionEnd != null && currentTarget.selectionEnd > 0)
+              ) {
+                const attemptedValue = event.key;
+                if (event.key.length > 1 || event.key === " ") {
+                  return;
+                } else {
+                  const nextInput = collection.from(currentTarget, 1)?.element;
+                  const lastInput = collection.at(-1)?.element;
+                  if (nextInput !== lastInput && currentTarget !== lastInput) {
+                    if (currentTarget.selectionStart === 0) {
+                      dispatch({ type: "SET_CHAR", char: attemptedValue, index, event });
+                    } else {
+                      dispatch({
+                        type: "SET_CHAR",
+                        char: attemptedValue,
+                        index: index + 1,
+                        event
+                      });
+                    }
+                    userActionRef.current = {
+                      type: "keydown",
+                      key: "Char",
+                      metaKey: event.metaKey,
+                      ctrlKey: event.ctrlKey
+                    };
+                    keyboardActionTimeoutRef.current = window.setTimeout(() => {
+                      userActionRef.current = null;
+                    }, 10);
+                  }
+                }
+              }
+            }
+          }
+        }),
+        onPointerDown: (0, import_compose_event_handlers.composeEventHandlers)(props?.onPointerDown, (event) => {
+          event.preventDefault();
+          const indexToFocus = Math.min(index, lastSelectableIndex);
+          const element2 = collection.at(indexToFocus)?.element;
+          focusInput(element2);
+        })
+      });
+    }
+  });
+}
+function isFormElement(element) {
+  return element?.tagName === "FORM";
+}
+function removeWhitespace(value) {
+  return value.replace(/\s/g, "");
+}
+function focusInput(element) {
+  if (!element) return;
+  if (element.ownerDocument.activeElement === element) {
+    window.requestAnimationFrame(() => {
+      element.select?.();
+    });
+  } else {
+    element.focus();
+  }
+}
+function clamp(value, [min, max]) {
+  return Math.min(max, Math.max(min, value));
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  HiddenInput,
+  Input,
+  OneTimePasswordField,
+  OneTimePasswordFieldHiddenInput,
+  OneTimePasswordFieldInput,
+  Root,
+  createOneTimePasswordFieldScope
+});