awesome-auth-input 0.1.0 → 0.2.0

package/README.md

@@ -2,6 +2,8 @@
 
 A headless, accessible, and fully-typed React component for OTP/auth code inputs with support for numeric, alphabetic, and custom validation patterns.
 
+Storybook: https://awesome-auth-input.vercel.app/
+
 ## Features
 
 - **Headless** - Bring your own styles, no CSS included
@@ -11,8 +13,10 @@ A headless, accessible, and fully-typed React component for OTP/auth code inputs
 - **Auto-submit** - Optional auto-submit when all fields are filled
 - **Form integration** - Hidden input for native form submission
 - **Password mode** - Mask input characters
-- **Paste support** - Paste codes directly
+- **Paste & copy support** - Paste codes directly and copy complete values
+- **Smart input behavior** - Intelligent focus management and character insertion
 - **TypeScript** - Fully typed with exported types
+- **Tree-shakeable** - Individual component exports for optimized bundles
 - **Zero dependencies** - Only React as a peer dependency
 
 ## Installation
@@ -79,6 +83,18 @@ Individual input field for a single character. Must be used within `<AuthCode.Gr
 
 Plus most standard `input` props (className, style, onKeyDown, etc.)
 
+### `<AuthCode.HiddenInput>`
+
+Hidden input that contains the complete auth code value for form submission. This component is automatically rendered by `<AuthCode.Group>`, but you can render it manually for advanced use cases.
+
+```tsx
+<AuthCode.Group>
+  <AuthCode.HiddenInput />
+  <AuthCode.Input index={0} />
+  <AuthCode.Input index={1} />
+</AuthCode.Group>
+```
+
 ### Validation Patterns
 
 ```tsx
@@ -182,6 +198,17 @@ function OTPForm() {
 </AuthCode.Group>
 ```
 
+### Disabled State
+
+```tsx
+<AuthCode.Group disabled={isVerifying}>
+  <AuthCode.Input index={0} />
+  <AuthCode.Input index={1} />
+  <AuthCode.Input index={2} />
+  <AuthCode.Input index={3} />
+</AuthCode.Group>
+```
+
 ### Custom Styling
 
 The component is completely unstyled. Add your own CSS:
@@ -206,6 +233,12 @@ The component is completely unstyled. Add your own CSS:
   border-color: #0070f3;
   box-shadow: 0 0 0 3px rgba(0, 112, 243, 0.15);
 }
+
+.otp-input:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  background-color: #f5f5f5;
+}
 ```
 
 ```tsx
@@ -216,6 +249,51 @@ The component is completely unstyled. Add your own CSS:
 </AuthCode.Group>
 ```
 
+## Advanced Features
+
+### Smart Focus Management
+
+The component intelligently manages focus to provide a smooth user experience:
+
+- **Auto-advance**: Automatically moves to the next input when a character is entered
+- **Smart clicking**: Clicking any input focuses the first empty field (or current field if all are filled)
+- **Roving tabindex**: Only the current input is in the tab order for better keyboard navigation
+
+### Password Manager Protection
+
+The component includes data attributes to prevent password managers from interfering:
+
+```tsx
+// Automatically applied to all inputs
+data-1p-ignore         // 1Password
+data-lpignore="true"   // LastPass  
+data-bwignore="true"   // Bitwarden
+data-form-type="other" // Generic managers
+```
+
+### Intelligent Paste Handling
+
+Paste operations are smartly detected and handled:
+
+- Detects clipboard paste vs. manual typing
+- Validates pasted content against the validation pattern
+- Auto-fills all fields from the paste position
+- Handles both short and long pasted values
+
+### Copy Support
+
+Copy the entire auth code with Ctrl/Cmd+C:
+
+```tsx
+<AuthCode.Group onComplete={(code) => console.log('Code:', code)}>
+  {/* Ctrl/Cmd+C copies the complete code */}
+  <AuthCode.Input index={0} />
+  <AuthCode.Input index={1} />
+  <AuthCode.Input index={2} />
+  <AuthCode.Input index={3} />
+</AuthCode.Group>
+```
+
 ## TypeScript
 
 Types are exported for your convenience:
@@ -229,21 +307,45 @@ import type {
 } from 'awesome-auth-input';
 ```
 
+## Tree-Shaking
+
+For optimized bundle sizes, you can import individual components:
+
+```tsx
+// Compound component (recommended)
+import { AuthCode } from 'awesome-auth-input';
+
+// Individual components for tree-shaking
+import { 
+  AuthCodeGroup, 
+  AuthCodeInput, 
+  AuthCodeHiddenInput 
+} from 'awesome-auth-input';
+
+// Use them directly
+<AuthCodeGroup onComplete={(code) => console.log(code)}>
+  <AuthCodeInput index={0} />
+  <AuthCodeInput index={1} />
+</AuthCodeGroup>
+```
+
 ## Keyboard Navigation
 
 - **Arrow Left/Right** - Navigate between inputs
-- **Backspace** - Delete current character and move to previous
+- **Backspace/Delete** - Delete current character and move to previous
 - **Ctrl/Cmd + Backspace** - Clear all inputs
 - **Enter** - Submit the form
-- **Paste** - Paste code from clipboard (auto-fills all fields)
+- **Ctrl/Cmd + C** - Copy complete code to clipboard
+- **Ctrl/Cmd + V** - Paste code from clipboard (auto-fills all fields)
 
 ## Accessibility
 
-- Proper ARIA labels for each input
+- Proper ARIA labels for each input (e.g., "One Time Password Character 1 out of 6")
 - Focus management with roving tabindex
-- Screen reader announcements
-- Respects `prefers-reduced-motion`
-- Works with password managers (disabled with data attributes)
+- Screen reader announcements for better UX
+- Full keyboard navigation support
+- Works with password managers (disabled with data attributes to prevent conflicts)
+- Auto-complete hints for mobile devices (`autocomplete="one-time-code"` on hidden input)
 
 ## Browser Support
 

package/dist/AuthCode/OneTimePassword.d.ts

@@ -136,6 +136,9 @@ declare const AuthCodeHiddenInput: import("react").ForwardRefExoticComponent<Omi
  * </AuthCode.Group>
  *  */
 export declare function AuthCodeInput({ index, ...props }: AuthCodeInputProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace AuthCodeInput {
+    var displayName: string;
+}
 type InputMode = "text" | "numeric" | "none";
 type ValidationPattern = ({
     type: "custom";

package/dist/AuthCode/OneTimePassword.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OneTimePassword.d.ts","sourceRoot":"","sources":["../../src/AuthCode/OneTimePassword.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,SAAS,EAKf,MAAM,OAAO,CAAC;AAGf,UAAU,mBAAmB;IAC3B;;;;OAIG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;;;;;;;;;;;;;;;;;;;;;;OAyBG;IACH,UAAU,CAAC,EAAE,iBAAiB,CAAC;IAC/B;;;;;;;;OAQG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;;;;;;;;;;;OAgBG;IACH,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC;;;;;;;;;;OAUG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;OAKG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC;;;;;;;;OAQG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;;;;;;OAQG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IAC3B;;;;;;;;;OASG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,UAAU,kBACR,SAAQ,mBAAmB,EACzB,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,MAAM,mBAAmB,CAAC;CAAG;AAEnE,QAAA,MAAM,aAAa,4HAyPlB,CAAC;AAEF,QAAA,MAAM,mBAAmB,sNAyBvB,CAAC;AAEH;;;;;;;;;;;MAWM;AACN,wBAAgB,aAAa,CAAC,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,2CAkKpE;AAgHD,KAAK,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM,CAAC;AAE7C,KAAK,iBAAiB,GAClB,CAAC;IAAE,IAAI,EAAE,QAAQ,CAAA;CAAE,GAAG,gBAAgB,CAAC,GACvC;IAAE,IAAI,EAAE,OAAO,CAAA;CAAE,GACjB;IAAE,IAAI,EAAE,cAAc,CAAA;CAAE,GACxB;IAAE,IAAI,EAAE,SAAS,CAAA;CAAE,CAAC;AAExB,KAAK,gBAAgB,GAAG;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF,UAAU,kBACR,SAAQ,IAAI,CACV,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,EAC3B,OAAO,GACP,aAAa,GACb,UAAU,GACV,cAAc,GACd,cAAc,GACd,MAAM,CACT;IACD,KAAK,EAAE,MAAM,CAAC;CACf;AAgED,OAAO,EACL,aAAa,IAAI,KAAK,EACtB,aAAa,IAAI,KAAK,EACtB,mBAAmB,IAAI,WAAW,GACnC,CAAC;AAEF,YAAY,EACV,kBAAkB,IAAI,kBAAkB,EACxC,kBAAkB,EAClB,iBAAiB,EACjB,gBAAgB,GACjB,CAAC"}
+{"version":3,"file":"OneTimePassword.d.ts","sourceRoot":"","sources":["../../src/AuthCode/OneTimePassword.tsx"],"names":[],"mappings":"AAAA,OAAO,EAML,KAAK,SAAS,EAKf,MAAM,OAAO,CAAC;AAGf,UAAU,mBAAmB;IAC3B;;;;OAIG;IACH,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;;;;;;;;;;;;;;;;;;;;;;OAyBG;IACH,UAAU,CAAC,EAAE,iBAAiB,CAAC;IAC/B;;;;;;;;OAQG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;;;;;;;;;;;OAgBG;IACH,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC;;;;;;;;;;OAUG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;OAKG;IACH,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC;;;;;;;;OAQG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;;;;;;OAQG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,UAAU,CAAC;IAC3B;;;;;;;;;OASG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,UAAU,kBACR,SAAQ,mBAAmB,EACzB,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,MAAM,mBAAmB,CAAC;CAAG;AAEnE,QAAA,MAAM,aAAa,4HAoQlB,CAAC;AAIF,QAAA,MAAM,mBAAmB,sNAyBvB,CAAC;AAIH;;;;;;;;;;;MAWM;AACN,wBAAgB,aAAa,CAAC,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,2CAuKpE;yBAvKe,aAAa;;;AA0R7B,KAAK,SAAS,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM,CAAC;AAE7C,KAAK,iBAAiB,GAClB,CAAC;IAAE,IAAI,EAAE,QAAQ,CAAA;CAAE,GAAG,gBAAgB,CAAC,GACvC;IAAE,IAAI,EAAE,OAAO,CAAA;CAAE,GACjB;IAAE,IAAI,EAAE,cAAc,CAAA;CAAE,GACxB;IAAE,IAAI,EAAE,SAAS,CAAA;CAAE,CAAC;AAExB,KAAK,gBAAgB,GAAG;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF,UAAU,kBACR,SAAQ,IAAI,CACV,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,EAC3B,OAAO,GACP,aAAa,GACb,UAAU,GACV,cAAc,GACd,cAAc,GACd,MAAM,CACT;IACD,KAAK,EAAE,MAAM,CAAC;CACf;AAgED,OAAO,EACL,aAAa,IAAI,KAAK,EACtB,aAAa,IAAI,KAAK,EACtB,mBAAmB,IAAI,WAAW,GACnC,CAAC;AAEF,YAAY,EACV,kBAAkB,IAAI,kBAAkB,EACxC,kBAAkB,EAClB,iBAAiB,EACjB,gBAAgB,GACjB,CAAC"}

package/dist/index.cjs

@@ -29,7 +29,8 @@ const AuthCodeField = react.forwardRef(
     const registerInputRef = react.useCallback((ref) => {
       if (ref) {
         if (!inputElements.current.has(ref)) {
-          inputElements.current.set(ref, true);
+          const position = inputElements.current.size;
+          inputElements.current.set(ref, position);
           setInputCount(inputElements.current.size);
         }
       }
@@ -65,13 +66,17 @@ const AuthCodeField = react.forwardRef(
             if (i === insertionIndex) return char;
             return value[i] ?? "";
           });
-          reactDom.flushSync(() => setValue(newValue));
+          reactDom.flushSync(() => {
+            setValue(newValue);
+          });
           if (insertionIndex < inputs.length - 1) {
             requestAnimationFrame(
               () => focusInput(inputs.at(insertionIndex + 1))
             );
           } else {
-            requestAnimationFrame(() => focusInput(inputs.at(insertionIndex)));
+            requestAnimationFrame(() => {
+              focusInput(inputs.at(insertionIndex));
+            });
           }
           return;
         }
@@ -148,16 +153,21 @@ const AuthCodeField = react.forwardRef(
         }
       }
     };
+    const concatenatedValue = react.useMemo(() => value.join(""), [value]);
+    react.useEffect(() => {
+      if (value.length === 0) {
+        setFocusedIndex(0);
+      }
+    }, [value]);
     react.useEffect(() => {
       var _a, _b;
-      const concatenatedValue = value.join("");
       const isCodeFullyEntered = concatenatedValue.length === inputCount && value.every((v) => v !== "") && inputCount > 0;
       if (!isCodeFullyEntered) return;
       onComplete == null ? void 0 : onComplete(concatenatedValue);
       if (autoSubmit) {
         (_b = (_a = hiddenInputRef.current) == null ? void 0 : _a.form) == null ? void 0 : _b.requestSubmit();
       }
-    }, [value, inputCount, onComplete, autoSubmit]);
+    }, [concatenatedValue, onComplete, inputCount, autoSubmit]);
     const contextValue = react.useMemo(
       () => ({
         dispatch,
@@ -186,6 +196,10 @@ const AuthCodeField = react.forwardRef(
           dispatch({ type: "PASTE", value: pastedText });
         },
         ...divProps,
+        onCopy: mergeEventHandlers(divProps.onCopy, (event) => {
+          event.preventDefault();
+          event.clipboardData.setData("text/plain", value.join(""));
+        }),
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(AuthCodeHiddenInput, {}),
           children
@@ -194,6 +208,7 @@ const AuthCodeField = react.forwardRef(
     ) });
   }
 );
+AuthCodeField.displayName = "AuthCode.Group";
 const AuthCodeHiddenInput = react.forwardRef(function AuthCodeHiddenInput2(props, ref) {
   const context = useAuthCodeContext();
   const { name, value, hiddenInputRef } = context;
@@ -218,6 +233,7 @@ const AuthCodeHiddenInput = react.forwardRef(function AuthCodeHiddenInput2(props
     }
   );
 });
+AuthCodeHiddenInput.displayName = "AuthCode.HiddenInput";
 function AuthCodeInput({ index, ...props }) {
   const context = useAuthCodeContext();
   const {
@@ -227,16 +243,19 @@ function AuthCodeInput({ index, ...props }) {
     focusedIndex,
     setFocusedIndex,
     disabled,
-    inputCount
+    inputCount,
+    inputElements
   } = context;
   const currentCharacter = context.value[index] || "";
   const firstEmptyIndex = Array.from({ length: inputCount }).findIndex(
     (_, i) => !context.value[i]
   );
   const nextEmptyOrLastIndex = firstEmptyIndex === -1 ? inputCount - 1 : firstEmptyIndex;
-  const mergedInputRef = react.useCallback(mergeRefs(registerInputRef), [
+  const inputRef = react.useRef(null);
+  const mergedInputRef = react.useCallback(mergeRefs(registerInputRef, inputRef), [
     registerInputRef
   ]);
+  const inputPosition = inputRef.current ? (inputElements.get(inputRef.current) ?? 0) + 1 : index + 1;
   return /* @__PURE__ */ jsxRuntime.jsx(
     "input",
     {
@@ -245,15 +264,15 @@ function AuthCodeInput({ index, ...props }) {
       ref: mergedInputRef,
       inputMode: validation.inputMode,
       pattern: validation.pattern,
-      "aria-label": `One Time Password Character ${index + 1} out of ${inputCount}`,
+      "aria-label": `One Time Password Character ${inputPosition} out of ${inputCount}`,
       disabled,
       autoComplete: "off",
       autoCorrect: "off",
       autoCapitalize: "off",
       "data-1p-ignore": true,
       "data-lpignore": "true",
-      "data-form-type": "other",
       "data-bwignore": "true",
+      "data-form-type": "other",
       ...props,
       onPointerDown: (event) => {
         event.preventDefault();
@@ -342,6 +361,7 @@ function AuthCodeInput({ index, ...props }) {
     }
   );
 }
+AuthCodeInput.displayName = "AuthCode.Input";
 const AuthCodeContext = react.createContext(null);
 function useAuthCodeContext() {
   const value = react.useContext(AuthCodeContext);

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../src/AuthCode/OneTimePassword.tsx","../src/index.ts"],"sourcesContent":["import {\n  createContext,\n  useCallback,\n  useContext,\n  useRef,\n  useState,\n  type ReactNode,\n  type Ref,\n  useMemo,\n  useEffect,\n  forwardRef,\n} from \"react\";\nimport { flushSync } from \"react-dom\";\n\ninterface AuthCodeCustomField {\n  /**\n   * The child components, typically `<AuthCode.Input>` components.\n   *\n   * All `<AuthCode.Input>` components must be direct or nested children of `<AuthCode.Group>`.\n   */\n  children: ReactNode;\n  /**\n   * A string specifying a name for the input control. This name is submitted\n   * along with the control's value when the form data is submitted.\n   *\n   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name\n   */\n  name?: string;\n  /**\n   * Specifies what type of validation the user agent has to provide for each\n   * character input. Allows \"numeric\", \"alpha\", \"alphanumeric\", or a custom\n   * validation pattern with regex.\n   *\n   * @defaultValue `{ type: \"numeric\" }`\n   *\n   * @example\n   * ```tsx\n   * // Numeric only (default)\n   * <AuthCode.Group validation={{ type: \"numeric\" }} />\n   *\n   * // Alphabetic only\n   * <AuthCode.Group validation={{ type: \"alpha\" }} />\n   *\n   * // Custom validation\n   * <AuthCode.Group\n   *   validation={{\n   *     type: \"custom\",\n   *     regex: /^[A-Z]$/,\n   *     pattern: \"[A-Z]{1}\",\n   *     inputMode: \"text\"\n   *   }}\n   * />\n   * ```\n   */\n  validation?: ValidationPattern;\n  /**\n   * Whether or not the component should attempt to automatically submit when\n   * all fields are filled. If the field is associated with an HTML `form`\n   * element, the form's `requestSubmit` method will be called.\n   *\n   * @defaultValue `true`\n   *\n   * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/requestSubmit\n   */\n  autoSubmit?: boolean;\n  /**\n   * When the `autoSubmit` prop is set to `true`, this callback will be fired\n   * before attempting to submit the associated form. It will be called whether\n   * or not a form is located, or if submission is not allowed.\n   *\n   * The callback receives the complete auth code value as a string.\n   *\n   * @example\n   * ```tsx\n   * <AuthCode.Group\n   *   onComplete={(value) => {\n   *     console.log('Code entered:', value);\n   *     verifyCode(value);\n   *   }}\n   * />\n   * ```\n   */\n  onComplete?: (value: string) => void;\n  /**\n   * The controlled value of the field. When provided, the component operates\n   * in controlled mode. This string's value, if present, must match the total\n   * number of `<AuthCode.Input>` components.\n   *\n   * @example\n   * ```tsx\n   * const [code, setCode] = useState('');\n   * <AuthCode.Group value={code} onValueChange={setCode} />\n   * ```\n   */\n  value?: string;\n  /**\n   * A callback fired whenever the field value changes. This callback is called\n   * with the complete auth code value as a string.\n   *\n   * Use this prop together with `value` to create a controlled component.\n   */\n  onValueChange?: (value: string) => void;\n  /**\n   * The initial value of the uncontrolled field. When provided without `value`,\n   * the component operates in uncontrolled mode.\n   *\n   * @example\n   * ```tsx\n   * <AuthCode.Group defaultValue=\"123\" />\n   * ```\n   */\n  defaultValue?: string;\n  /**\n   * The type of control to render. Allows \"text\" or \"password\".\n   *\n   * When set to \"password\", the input characters will be masked.\n   *\n   * @defaultValue `\"text\"`\n   *\n   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#type\n   */\n  type?: \"text\" | \"password\";\n  /**\n   * Whether or not the input elements are disabled.\n   *\n   * When set to `true`, all `<AuthCode.Input>` components will be disabled\n   * and users will not be able to interact with them.\n   *\n   * @defaultValue `false`\n   *\n   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled\n   */\n  disabled?: boolean;\n}\n\ninterface AuthCodeFieldProps\n  extends AuthCodeCustomField,\n    Omit<React.ComponentProps<\"div\">, keyof AuthCodeCustomField> {}\n\nconst AuthCodeField = forwardRef<HTMLDivElement, AuthCodeFieldProps>(\n  function AuthCodeField(\n    {\n      children,\n      name,\n      validation = { type: \"numeric\" },\n      autoSubmit = true,\n      onComplete,\n      value: userValue,\n      onValueChange: userOnValueChange,\n      defaultValue,\n      type = \"text\",\n      disabled = false,\n      ...divProps\n    }: AuthCodeFieldProps,\n    forwardedRef\n  ) {\n    const inputElements = useRef<Map<HTMLInputElement, true>>(new Map());\n    const [value, setValue] = useControllableState<string[]>({\n      value: userValue !== undefined ? Array.from(userValue) : undefined,\n      defaultValue: defaultValue ? Array.from(defaultValue) : [],\n      onValueChange: userOnValueChange\n        ? (chars) => userOnValueChange(chars.join(\"\"))\n        : undefined,\n    });\n\n    const validationConfig =\n      validation.type == \"custom\"\n        ? validation\n        : defaultPatternInputMap[validation.type];\n\n    const [focusedIndex, setFocusedIndex] = useState(0);\n    const [inputCount, setInputCount] = useState(0);\n\n    const registerInputRef = useCallback((ref: HTMLInputElement | null) => {\n      if (ref) {\n        if (!inputElements.current.has(ref)) {\n          inputElements.current.set(ref, true);\n          setInputCount(inputElements.current.size);\n        }\n      }\n    }, []);\n\n    const validateChar = useCallback(\n      (char: string): boolean => {\n        if (!char) return true;\n\n        const regex = validationConfig.regex;\n        return regex.test(char);\n      },\n      [validationConfig]\n    );\n\n    const validateString = useCallback(\n      (str: string): string => {\n        return Array.from(str)\n          .filter((char) => validateChar(char))\n          .join(\"\");\n      },\n      [validateChar]\n    );\n\n    const hiddenInputRef = useRef<HTMLInputElement | null>(null);\n\n    // consider removing useEffectEvent\n    const dispatch = (action: FieldUpdateAction) => {\n      // use an ordered dictionary instead?\n      const inputs = Array.from(inputElements.current.keys());\n      switch (action.type) {\n        case \"TYPE_CHAR\": {\n          const { char, index: targetIndex } = action;\n\n          if (!validateChar(char)) return;\n\n          const hasExistingValue = !!value[targetIndex];\n          const firstEmptyIndex = Array.from({\n            length: inputs.length,\n          }).findIndex((_, i) => !value[i]);\n\n          const insertionIndex =\n            hasExistingValue || firstEmptyIndex === -1\n              ? targetIndex\n              : firstEmptyIndex;\n\n          const newValue = Array.from({ length: inputs.length }, (_, i) => {\n            if (i === insertionIndex) return char;\n            return value[i] ?? \"\";\n          });\n\n          flushSync(() => setValue(newValue));\n\n          if (insertionIndex < inputs.length - 1) {\n            requestAnimationFrame(() =>\n              focusInput(inputs.at(insertionIndex + 1))\n            );\n          } else {\n            requestAnimationFrame(() => focusInput(inputs.at(insertionIndex)));\n          }\n          return;\n        }\n\n        case \"REMOVE_CHAR\": {\n          const { index } = action;\n          const totalInputLength = inputs.length;\n\n          // Remove character and shift remaining values left\n          const leftPortion = value.slice(0, index);\n          const rightPortion = value.slice(index + 1);\n          const compacted = leftPortion.concat(rightPortion);\n          const emptySlots = Array(\n            Math.max(0, totalInputLength - compacted.length)\n          ).fill(\"\");\n\n          flushSync(() => setValue(compacted.concat(emptySlots)));\n\n          if (index != 0) {\n            focusInput(inputs.at(index - 1));\n          } else {\n            // index is 0\n            focusInput(inputs.at(0));\n          }\n          return;\n        }\n\n        case \"CLEAR_CHAR\": {\n          const { index } = action;\n          const newValue = value.slice();\n          newValue[index] = \"\";\n          flushSync(() => setValue(newValue));\n          return;\n        }\n\n        case \"SUBMIT_CODE\": {\n          const currentValue = value.join(\"\");\n          onComplete?.(currentValue);\n          hiddenInputRef.current?.form?.requestSubmit();\n          break;\n        }\n\n        case \"PASTE\": {\n          const { value } = action;\n          const totalInputLength = inputs.length;\n\n          const validatedValue = validateString(value);\n          if (validatedValue.length === 0) return;\n\n          const pastedCharacters = Array.from(value).slice(0, inputs.length);\n          const emptySlots = Array(\n            Math.max(0, totalInputLength - value.length)\n          ).fill(\"\");\n\n          flushSync(() => setValue([...pastedCharacters, ...emptySlots]));\n\n          if (pastedCharacters.length === totalInputLength) {\n            focusInput(inputs.at(-1));\n          } else {\n            focusInput(inputs.at(value.length));\n          }\n          return;\n        }\n        case \"NAVIGATE_PREVIOUS\": {\n          const { index } = action;\n          if (index > 0) {\n            focusInput(inputs.at(index - 1));\n          }\n          return;\n        }\n\n        case \"NAVIGATE_NEXT\": {\n          const { index } = action;\n          if (value[index] && index < inputs.length - 1) {\n            focusInput(inputs.at(index + 1));\n            return;\n          }\n\n          const firstEmpty = Array.from({ length: inputs.length }).findIndex(\n            (_, i) => !value[i]\n          );\n\n          // BUG: if a value was deleted in the middle of a sequence, then we would\n          // not be able to navigate to the right side of the sequence\n\n          focusInput(inputs.at(firstEmpty));\n          return;\n        }\n\n        case \"CLEAR_ALL\": {\n          flushSync(() => setValue([]));\n          focusInput(inputs.at(0));\n          return;\n        }\n      }\n    };\n\n    useEffect(() => {\n      const concatenatedValue = value.join(\"\");\n      const isCodeFullyEntered =\n        concatenatedValue.length === inputCount &&\n        value.every((v) => v !== \"\") &&\n        inputCount > 0;\n\n      if (!isCodeFullyEntered) return;\n\n      onComplete?.(concatenatedValue);\n\n      if (autoSubmit) {\n        hiddenInputRef.current?.form?.requestSubmit();\n      }\n    }, [value, inputCount, onComplete, autoSubmit]);\n\n    const contextValue = useMemo(\n      () => ({\n        dispatch,\n        value,\n        registerInputRef,\n        name,\n        hiddenInputRef,\n        validation: validationConfig,\n        type,\n        focusedIndex,\n        setFocusedIndex,\n        disabled,\n        inputCount,\n        inputElements: inputElements.current,\n      }),\n      [value, focusedIndex, disabled, name, type, inputCount]\n    );\n\n    return (\n      <AuthCodeContext.Provider value={contextValue}>\n        <div\n          // Delegating all input's paste event this parent handler\n          // because we want to control the paste for all inputs.\n          ref={forwardedRef}\n          onPaste={(event) => {\n            event.preventDefault();\n            const clipboardData = event.clipboardData;\n            const pastedText = clipboardData.getData(\"text/plain\");\n\n            dispatch({ type: \"PASTE\", value: pastedText });\n          }}\n          {...divProps}\n        >\n          <AuthCodeHiddenInput />\n          {children}\n        </div>\n      </AuthCodeContext.Provider>\n    );\n  }\n);\n\nconst AuthCodeHiddenInput = forwardRef<\n  HTMLInputElement,\n  Omit<React.ComponentProps<\"input\">, \"ref\">\n>(function AuthCodeHiddenInput(props, ref) {\n  const context = useAuthCodeContext();\n  const { name, value, hiddenInputRef } = context;\n  const memoizedRefs = useCallback(mergeRefs(ref, hiddenInputRef), [\n    ref,\n    hiddenInputRef,\n  ]);\n  return (\n    <input\n      ref={memoizedRefs}\n      name={name}\n      value={value.join(\"\")}\n      autoCapitalize=\"off\"\n      autoCorrect=\"off\"\n      autoSave=\"off\"\n      inputMode=\"numeric\"\n      autoComplete=\"one-time-code\"\n      required\n      {...props}\n      type=\"hidden\"\n    />\n  );\n});\n\n/**\n * Input component for entering a single character of the auth code.\n *\n * **Must be used within `<AuthCode.Group>`**\n *\n * @example\n *\n * <AuthCode.Group>\n *   <AuthCode.Input index={0} />\n *   <AuthCode.Input index={1} />\n * </AuthCode.Group>\n *  */\nexport function AuthCodeInput({ index, ...props }: AuthCodeInputProps) {\n  const context = useAuthCodeContext();\n  const {\n    dispatch,\n    registerInputRef,\n    validation,\n    focusedIndex,\n    setFocusedIndex,\n    disabled,\n    inputCount,\n  } = context;\n\n  const currentCharacter = context.value[index] || \"\";\n  const firstEmptyIndex = Array.from({ length: inputCount }).findIndex(\n    (_, i) => !context.value[i]\n  );\n  const nextEmptyOrLastIndex =\n    firstEmptyIndex === -1 ? inputCount - 1 : firstEmptyIndex;\n  const mergedInputRef = useCallback(mergeRefs(registerInputRef), [\n    registerInputRef,\n  ]);\n  return (\n    <input\n      type={context.type}\n      tabIndex={index === focusedIndex ? 0 : -1}\n      ref={mergedInputRef}\n      inputMode={validation.inputMode}\n      pattern={validation.pattern}\n      aria-label={`One Time Password Character ${\n        index + 1\n      } out of ${inputCount}`}\n      disabled={disabled}\n      autoComplete=\"off\"\n      autoCorrect=\"off\"\n      autoCapitalize=\"off\"\n      // Disable password managers\n      data-1p-ignore // 1Password\n      data-lpignore=\"true\" // LastPass\n      data-form-type=\"other\" // Generic password managers\n      data-bwignore=\"true\" // Bitwarden\n      {...props}\n      onPointerDown={(event) => {\n        // A click/touch on an input can cause the input to be out of selection so\n        // we must prevent that default action and keep the input selected\n        // in order to have a singular value\n        event.preventDefault();\n        const focusTargetIndex = Math.min(index, nextEmptyOrLastIndex);\n        const focusTargetElement = Array.from(context.inputElements.keys())[\n          focusTargetIndex\n        ];\n        focusInput(focusTargetElement);\n      }}\n      onFocus={(event) => {\n        // select entire input instead of just focus\n        event.target.select();\n        setFocusedIndex(index);\n      }}\n      onInput={(event) => {\n        const newInputValue = event.currentTarget.value;\n\n        // Only treat as paste if it's an actual paste operation or truly long input\n        // Single character duplicates (like \"11\" from typing \"1\" on \"1\") should go through onChange\n        const browserInputType = (event.nativeEvent as InputEvent).inputType;\n        const isPasteOperation =\n          browserInputType === \"insertFromPaste\" ||\n          browserInputType === \"insertFromDrop\";\n        const isLongInput = newInputValue.length > 2;\n\n        if (isPasteOperation || isLongInput) {\n          event.preventDefault();\n          dispatch({ type: \"PASTE\", value: newInputValue });\n        }\n      }}\n      onChange={(event) => {\n        const newInputValue = event.target.value;\n        // check if value is valid against pattern\n        if (event.target.validity.patternMismatch) return;\n        dispatch({ type: \"TYPE_CHAR\", char: newInputValue, index });\n      }}\n      onKeyDown={mergeEventHandlers(props.onKeyDown, (event) => {\n        // onKeyDown describes the intent of the user's key(s) presses\n        if (event.metaKey && event.key == \"c\") return;\n\n        if (\n          isUndoShortcut(event) ||\n          isCopyShortcut(event) ||\n          isRedoShortcut(event)\n        ) {\n          event.preventDefault();\n          return;\n        }\n\n        if ((event.metaKey || event.ctrlKey) && event.key === \"Backspace\") {\n          dispatch({ type: \"CLEAR_ALL\" });\n          return;\n        }\n\n        switch (event.key) {\n          case \"Delete\":\n          case \"Backspace\": {\n            event.preventDefault();\n            dispatch({ type: \"REMOVE_CHAR\", index });\n            return;\n          }\n\n          case \"Enter\": {\n            dispatch({ type: \"SUBMIT_CODE\" });\n            return;\n          }\n\n          case \"ArrowLeft\": {\n            event.preventDefault();\n            dispatch({ type: \"NAVIGATE_PREVIOUS\", index });\n            return;\n          }\n          case \"ArrowRight\": {\n            event.preventDefault();\n            dispatch({ type: \"NAVIGATE_NEXT\", index });\n            return;\n          }\n\n          // Prevents up and down movements from unselecting\n          case \"ArrowUp\":\n          case \"ArrowDown\": {\n            event.preventDefault();\n            return;\n          }\n\n          default:\n            if (event.key === currentCharacter) {\n              // this is essentially focusing the next input\n              dispatch({ type: \"TYPE_CHAR\", char: currentCharacter, index });\n              return;\n            }\n\n            if (event.metaKey || event.ctrlKey) {\n              return;\n            }\n\n            const hasValue = !!event.currentTarget.value;\n            const isFullySelected =\n              event.currentTarget.selectionStart === 0 &&\n              event.currentTarget.selectionEnd != null &&\n              event.currentTarget.selectionEnd > 0;\n\n            // When input has value and is fully selected, validate the incoming key\n            // to prevent selection loss from invalid keystrokes\n            if (hasValue && isFullySelected) {\n              // Only validate printable single characters (ignore modifiers, arrows, etc.)\n              if (event.key.length === 1) {\n                const isValid = validation.regex.test(event.key);\n                if (!isValid) {\n                  event.preventDefault();\n                  return;\n                }\n              }\n            }\n        }\n      })}\n      value={currentCharacter}\n    />\n  );\n}\n\n// =================================================\n// CONTEXT\n// =================================================\n\nconst AuthCodeContext = createContext<AuthCodeContextValue | null>(null);\n\nfunction useAuthCodeContext() {\n  const value = useContext(AuthCodeContext);\n  if (!value) {\n    throw new Error(\n      \"\\n[awesome-auth-input] <AuthCode.Input> must be used within <AuthCode.Group>.\\n\\n\" +\n        \"Make sure all <AuthCode.Input> components are children of <AuthCode.Group>:\\n\\n\" +\n        \"Example:\\n\" +\n        \"  <AuthCode.Group>\\n\" +\n        \"    <AuthCode.Input index={0} />\\n\" +\n        \"    <AuthCode.Input index={1} />\\n\" +\n        \"  </AuthCode.Group>\\n\"\n    );\n  }\n  return value;\n}\n\n// =================================================\n// HELPERS & HOOKS\n// =================================================\n\nfunction mergeEventHandlers<E extends { defaultPrevented: boolean }>(\n  currentHandler?: (event: E) => void,\n  nextHandler?: (event: E) => void\n) {\n  return (event: E) => {\n    currentHandler?.(event);\n\n    if (!event.defaultPrevented) {\n      nextHandler?.(event);\n    }\n  };\n}\n\nfunction isUndoShortcut(event: React.KeyboardEvent<HTMLInputElement>): boolean {\n  return (event.metaKey || event.ctrlKey) && event.key === \"z\";\n}\n\nfunction isRedoShortcut(event: React.KeyboardEvent<HTMLInputElement>): boolean {\n  return (\n    (event.metaKey || event.ctrlKey) &&\n    (event.key === \"y\" || (event.shiftKey && event.key === \"z\"))\n  );\n}\n\nfunction isCopyShortcut(event: React.KeyboardEvent<HTMLInputElement>): boolean {\n  return (event.metaKey || event.ctrlKey) && event.key === \"c\";\n}\n\ntype MergedRef<T> = Ref<T> | undefined | null;\nfunction mergeRefs<T = any>(...refs: MergedRef<T>[]): React.RefCallback<T> {\n  return function (node) {\n    refs.forEach((ref) => {\n      if (typeof ref === \"function\") {\n        ref(node);\n      } else if (ref != null) {\n        ref.current = node;\n      }\n    });\n  };\n}\n\nconst focusInput = (element: HTMLInputElement | undefined) => {\n  if (!element) return;\n  if (element.disabled) return;\n  // ownerDocument is the opened 'window' that owns the element\n  // e.g. popups or a browser-in-browser\n  if (element.ownerDocument.activeElement === element) {\n    element.select();\n  } else {\n    element.focus();\n  }\n};\n\nfunction useControllableState<T>({\n  defaultValue,\n  onValueChange,\n  value,\n}: {\n  defaultValue: T;\n  onValueChange?: (value: T) => void;\n  value?: T;\n}): [T, (newValue: T) => void] {\n  const [internalState, setInternalState] = useState<T>(defaultValue);\n\n  const isControlled = value !== undefined;\n  const currentValue = isControlled ? value : internalState;\n\n  const setState = useCallback(\n    (newValue: T) => {\n      if (!isControlled) {\n        setInternalState(newValue);\n      }\n      onValueChange?.(newValue);\n    },\n    [isControlled, onValueChange]\n  );\n\n  return [currentValue, setState];\n}\n\n// =================================================\n// INTERNAL TYPES & CONFIG\n// =================================================\n\ntype InputMode = \"text\" | \"numeric\" | \"none\";\n\ntype ValidationPattern =\n  | ({ type: \"custom\" } & CustomValidation)\n  | { type: \"alpha\" }\n  | { type: \"alphanumeric\" }\n  | { type: \"numeric\" };\n\ntype CustomValidation = {\n  regex: RegExp;\n  pattern: string;\n  inputMode: InputMode;\n};\n\ninterface AuthCodeInputProps\n  extends Omit<\n    React.ComponentProps<\"input\">,\n    | \"value\"\n    | \"placeholder\"\n    | \"disabled\"\n    | \"autoComplete\"\n    | \"defaultValue\"\n    | \"type\"\n  > {\n  index: number;\n}\n\ninterface AuthCodeContextValue {\n  dispatch: React.Dispatch<FieldUpdateAction>;\n  value: string[];\n  registerInputRef: (ref: HTMLInputElement | null) => void;\n  name?: string;\n  hiddenInputRef: Ref<HTMLInputElement | null>;\n  validation:\n    | (typeof defaultPatternInputMap)[DefaultInputTypes]\n    | ({ type: \"custom\" } & CustomValidation);\n  type: \"text\" | \"password\";\n  focusedIndex: number;\n  setFocusedIndex: (index: number) => void;\n  disabled: boolean;\n  inputCount: number;\n  inputElements: Map<HTMLInputElement, true>;\n}\n\ntype DefaultInputTypes = \"alpha\" | \"alphanumeric\" | \"numeric\";\n\nconst numericRegex = /^\\d$/;\nconst alphaNumericRegex = /^[a-zA-Z\\d]$/;\nconst alphaRegex = /^[a-zA-Z]$/;\n\nconst defaultPatternInputMap = {\n  alpha: {\n    type: \"alpha\",\n    regex: alphaRegex,\n    pattern: \"[a-zA-Z]{1}\",\n    inputMode: \"text\",\n  },\n  alphanumeric: {\n    type: \"alphanumeric\",\n    regex: alphaNumericRegex,\n    pattern: \"[a-zA-Z0-9]{1}\",\n    inputMode: \"text\",\n  },\n  numeric: {\n    type: \"numeric\",\n    regex: numericRegex,\n    pattern: \"[0-9]{1}\",\n    inputMode: \"numeric\",\n  },\n} as const;\n\ntype FieldUpdateAction =\n  | {\n      type: \"TYPE_CHAR\";\n      char: string;\n      index: number;\n    }\n  | { type: \"PASTE\"; value: string }\n  | { type: \"REMOVE_CHAR\"; index: number }\n  | { type: \"SUBMIT_CODE\" }\n  | { type: \"CLEAR_CHAR\"; index: number }\n  | { type: \"NAVIGATE_PREVIOUS\"; index: number }\n  | { type: \"NAVIGATE_NEXT\"; index: number }\n  | { type: \"CLEAR_ALL\" };\n\n// =================================================\n// EXPORTS\n// =================================================\n\nexport {\n  AuthCodeField as Group,\n  AuthCodeInput as Input,\n  AuthCodeHiddenInput as HiddenInput,\n};\n\nexport type {\n  AuthCodeFieldProps as AuthCodeGroupProps,\n  AuthCodeInputProps,\n  ValidationPattern,\n  CustomValidation,\n};\n","/**\n * awesome-auth-input\n * A headless, accessible React component for OTP/auth code inputs\n */\n\nimport {\n  Group,\n  Input,\n  HiddenInput,\n} from \"./AuthCode/OneTimePassword\";\n\nexport type {\n  AuthCodeGroupProps,\n  AuthCodeInputProps,\n  ValidationPattern,\n  CustomValidation,\n} from \"./AuthCode/OneTimePassword\";\n\n/**\n * AuthCode - A compound component for OTP/auth code inputs\n *\n * @example\n * ```tsx\n * <AuthCode.Group onComplete={(code) => console.log(code)}>\n *   <AuthCode.Input index={0} />\n *   <AuthCode.Input index={1} />\n *   <AuthCode.Input index={2} />\n *   <AuthCode.Input index={3} />\n * </AuthCode.Group>\n * ```\n */\nconst AuthCode = {\n  /**\n   * The root component that manages state and validation for auth code inputs.\n   * All `<AuthCode.Input>` components must be children of this component.\n   */\n  Group,\n  /**\n   * Individual input field for a single character of the auth code.\n   * Must be used within `<AuthCode.Group>`.\n   */\n  Input,\n  /**\n   * Hidden input that contains the full auth code value for form submission.\n   * Automatically rendered by Group, but can be customized if needed.\n   */\n  HiddenInput,\n};\n\nexport { AuthCode };\n\n// Also export individual components for tree-shaking\nexport { Group as AuthCodeGroup, Input as AuthCodeInput, HiddenInput as AuthCodeHiddenInput };\n\n"],"names":["forwardRef","AuthCodeField","useRef","useState","useCallback","flushSync","value","useEffect","useMemo","jsx","jsxs","AuthCodeHiddenInput","createContext","useContext","Group","Input","HiddenInput"],"mappings":"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"}
+{"version":3,"file":"index.cjs","sources":["../src/AuthCode/OneTimePassword.tsx","../src/index.ts"],"sourcesContent":["import {\n  createContext,\n  useCallback,\n  useContext,\n  useRef,\n  useState,\n  type ReactNode,\n  type Ref,\n  useMemo,\n  useEffect,\n  forwardRef,\n} from \"react\";\nimport { flushSync } from \"react-dom\";\n\ninterface AuthCodeCustomField {\n  /**\n   * The child components, typically `<AuthCode.Input>` components.\n   *\n   * All `<AuthCode.Input>` components must be direct or nested children of `<AuthCode.Group>`.\n   */\n  children: ReactNode;\n  /**\n   * A string specifying a name for the input control. This name is submitted\n   * along with the control's value when the form data is submitted.\n   *\n   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name\n   */\n  name?: string;\n  /**\n   * Specifies what type of validation the user agent has to provide for each\n   * character input. Allows \"numeric\", \"alpha\", \"alphanumeric\", or a custom\n   * validation pattern with regex.\n   *\n   * @defaultValue `{ type: \"numeric\" }`\n   *\n   * @example\n   * ```tsx\n   * // Numeric only (default)\n   * <AuthCode.Group validation={{ type: \"numeric\" }} />\n   *\n   * // Alphabetic only\n   * <AuthCode.Group validation={{ type: \"alpha\" }} />\n   *\n   * // Custom validation\n   * <AuthCode.Group\n   *   validation={{\n   *     type: \"custom\",\n   *     regex: /^[A-Z]$/,\n   *     pattern: \"[A-Z]{1}\",\n   *     inputMode: \"text\"\n   *   }}\n   * />\n   * ```\n   */\n  validation?: ValidationPattern;\n  /**\n   * Whether or not the component should attempt to automatically submit when\n   * all fields are filled. If the field is associated with an HTML `form`\n   * element, the form's `requestSubmit` method will be called.\n   *\n   * @defaultValue `true`\n   *\n   * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/requestSubmit\n   */\n  autoSubmit?: boolean;\n  /**\n   * When the `autoSubmit` prop is set to `true`, this callback will be fired\n   * before attempting to submit the associated form. It will be called whether\n   * or not a form is located, or if submission is not allowed.\n   *\n   * The callback receives the complete auth code value as a string.\n   *\n   * @example\n   * ```tsx\n   * <AuthCode.Group\n   *   onComplete={(value) => {\n   *     console.log('Code entered:', value);\n   *     verifyCode(value);\n   *   }}\n   * />\n   * ```\n   */\n  onComplete?: (value: string) => void;\n  /**\n   * The controlled value of the field. When provided, the component operates\n   * in controlled mode. This string's value, if present, must match the total\n   * number of `<AuthCode.Input>` components.\n   *\n   * @example\n   * ```tsx\n   * const [code, setCode] = useState('');\n   * <AuthCode.Group value={code} onValueChange={setCode} />\n   * ```\n   */\n  value?: string;\n  /**\n   * A callback fired whenever the field value changes. This callback is called\n   * with the complete auth code value as a string.\n   *\n   * Use this prop together with `value` to create a controlled component.\n   */\n  onValueChange?: (value: string) => void;\n  /**\n   * The initial value of the uncontrolled field. When provided without `value`,\n   * the component operates in uncontrolled mode.\n   *\n   * @example\n   * ```tsx\n   * <AuthCode.Group defaultValue=\"123\" />\n   * ```\n   */\n  defaultValue?: string;\n  /**\n   * The type of control to render. Allows \"text\" or \"password\".\n   *\n   * When set to \"password\", the input characters will be masked.\n   *\n   * @defaultValue `\"text\"`\n   *\n   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#type\n   */\n  type?: \"text\" | \"password\";\n  /**\n   * Whether or not the input elements are disabled.\n   *\n   * When set to `true`, all `<AuthCode.Input>` components will be disabled\n   * and users will not be able to interact with them.\n   *\n   * @defaultValue `false`\n   *\n   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled\n   */\n  disabled?: boolean;\n}\n\ninterface AuthCodeFieldProps\n  extends AuthCodeCustomField,\n    Omit<React.ComponentProps<\"div\">, keyof AuthCodeCustomField> {}\n\nconst AuthCodeField = forwardRef<HTMLDivElement, AuthCodeFieldProps>(\n  function AuthCodeField(\n    {\n      children,\n      name,\n      validation = { type: \"numeric\" },\n      autoSubmit = true,\n      onComplete,\n      value: userValue,\n      onValueChange: userOnValueChange,\n      defaultValue,\n      type = \"text\",\n      disabled = false,\n      ...divProps\n    }: AuthCodeFieldProps,\n    forwardedRef\n  ) {\n    const inputElements = useRef<Map<HTMLInputElement, number>>(new Map());\n    const [value, setValue] = useControllableState<string[]>({\n      value: userValue !== undefined ? Array.from(userValue) : undefined,\n      defaultValue: defaultValue ? Array.from(defaultValue) : [],\n      onValueChange: userOnValueChange\n        ? (chars) => userOnValueChange(chars.join(\"\"))\n        : undefined,\n    });\n\n    const validationConfig =\n      validation.type == \"custom\"\n        ? validation\n        : defaultPatternInputMap[validation.type];\n\n    const [focusedIndex, setFocusedIndex] = useState(0);\n    const [inputCount, setInputCount] = useState(0);\n\n    const registerInputRef = useCallback((ref: HTMLInputElement | null) => {\n      if (ref) {\n        if (!inputElements.current.has(ref)) {\n          const position = inputElements.current.size;\n          inputElements.current.set(ref, position);\n          setInputCount(inputElements.current.size);\n        }\n      }\n    }, []);\n\n    const validateChar = useCallback(\n      (char: string): boolean => {\n        if (!char) return true;\n\n        const regex = validationConfig.regex;\n        return regex.test(char);\n      },\n      [validationConfig]\n    );\n\n    const validateString = useCallback(\n      (str: string): string => {\n        return Array.from(str)\n          .filter((char) => validateChar(char))\n          .join(\"\");\n      },\n      [validateChar]\n    );\n\n    const hiddenInputRef = useRef<HTMLInputElement | null>(null);\n\n    const dispatch = (action: FieldUpdateAction) => {\n      // use an ordered dictionary instead?\n      const inputs = Array.from(inputElements.current.keys());\n      switch (action.type) {\n        case \"TYPE_CHAR\": {\n          const { char, index: targetIndex } = action;\n\n          if (!validateChar(char)) return;\n\n          const hasExistingValue = !!value[targetIndex];\n          const firstEmptyIndex = Array.from({\n            length: inputs.length,\n          }).findIndex((_, i) => !value[i]);\n\n          const insertionIndex =\n            hasExistingValue || firstEmptyIndex === -1\n              ? targetIndex\n              : firstEmptyIndex;\n\n          const newValue = Array.from({ length: inputs.length }, (_, i) => {\n            if (i === insertionIndex) return char;\n            return value[i] ?? \"\";\n          });\n\n          flushSync(() => {\n            setValue(newValue);\n          });\n\n          if (insertionIndex < inputs.length - 1) {\n            requestAnimationFrame(() =>\n              focusInput(inputs.at(insertionIndex + 1))\n            );\n          } else {\n            requestAnimationFrame(() => {\n              focusInput(inputs.at(insertionIndex));\n            });\n          }\n          return;\n        }\n\n        case \"REMOVE_CHAR\": {\n          const { index } = action;\n          const totalInputLength = inputs.length;\n\n          // Remove character and shift remaining values left\n          const leftPortion = value.slice(0, index);\n          const rightPortion = value.slice(index + 1);\n          const compacted = leftPortion.concat(rightPortion);\n          const emptySlots = Array(\n            Math.max(0, totalInputLength - compacted.length)\n          ).fill(\"\");\n\n          flushSync(() => setValue(compacted.concat(emptySlots)));\n\n          if (index != 0) {\n            focusInput(inputs.at(index - 1));\n          } else {\n            focusInput(inputs.at(0));\n          }\n          return;\n        }\n\n        case \"CLEAR_CHAR\": {\n          const { index } = action;\n          const newValue = value.slice();\n          newValue[index] = \"\";\n          flushSync(() => setValue(newValue));\n          return;\n        }\n\n        case \"SUBMIT_CODE\": {\n          const currentValue = value.join(\"\");\n          onComplete?.(currentValue);\n          hiddenInputRef.current?.form?.requestSubmit();\n          break;\n        }\n\n        case \"PASTE\": {\n          const { value } = action;\n          const totalInputLength = inputs.length;\n\n          const validatedValue = validateString(value);\n          if (validatedValue.length === 0) return;\n\n          const pastedCharacters = Array.from(value).slice(0, inputs.length);\n          const emptySlots = Array(\n            Math.max(0, totalInputLength - value.length)\n          ).fill(\"\");\n\n          flushSync(() => setValue([...pastedCharacters, ...emptySlots]));\n\n          if (pastedCharacters.length === totalInputLength) {\n            focusInput(inputs.at(-1));\n          } else {\n            focusInput(inputs.at(value.length));\n          }\n          return;\n        }\n        case \"NAVIGATE_PREVIOUS\": {\n          const { index } = action;\n          if (index > 0) {\n            focusInput(inputs.at(index - 1));\n          }\n          return;\n        }\n\n        case \"NAVIGATE_NEXT\": {\n          const { index } = action;\n          if (value[index] && index < inputs.length - 1) {\n            focusInput(inputs.at(index + 1));\n            return;\n          }\n\n          const firstEmpty = Array.from({ length: inputs.length }).findIndex(\n            (_, i) => !value[i]\n          );\n\n          focusInput(inputs.at(firstEmpty));\n          return;\n        }\n\n        case \"CLEAR_ALL\": {\n          flushSync(() => setValue([]));\n          focusInput(inputs.at(0));\n          return;\n        }\n      }\n    };\n\n    const concatenatedValue = useMemo(() => value.join(\"\"), [value]);\n\n    useEffect(() => {\n      if (value.length === 0) {\n        setFocusedIndex(0);\n      }\n    }, [value]);\n\n    useEffect(() => {\n      const isCodeFullyEntered =\n        concatenatedValue.length === inputCount &&\n        value.every((v) => v !== \"\") &&\n        inputCount > 0;\n\n      if (!isCodeFullyEntered) return;\n\n      onComplete?.(concatenatedValue);\n\n      if (autoSubmit) {\n        hiddenInputRef.current?.form?.requestSubmit();\n      }\n    }, [concatenatedValue, onComplete, inputCount, autoSubmit]);\n\n    const contextValue = useMemo(\n      () => ({\n        dispatch,\n        value,\n        registerInputRef,\n        name,\n        hiddenInputRef,\n        validation: validationConfig,\n        type,\n        focusedIndex,\n        setFocusedIndex,\n        disabled,\n        inputCount,\n        inputElements: inputElements.current,\n      }),\n      [value, focusedIndex, disabled, name, type, inputCount]\n    );\n\n    return (\n      <AuthCodeContext.Provider value={contextValue}>\n        <div\n          // Delegating all input's paste event this parent handler\n          // because we want to control the paste for all inputs.\n          ref={forwardedRef}\n          onPaste={(event) => {\n            event.preventDefault();\n            const clipboardData = event.clipboardData;\n            const pastedText = clipboardData.getData(\"text/plain\");\n\n            dispatch({ type: \"PASTE\", value: pastedText });\n          }}\n          {...divProps}\n          onCopy={mergeEventHandlers(divProps.onCopy, (event) => {\n            event.preventDefault();\n            event.clipboardData.setData(\"text/plain\", value.join(\"\"));\n          })}\n        >\n          <AuthCodeHiddenInput />\n          {children}\n        </div>\n      </AuthCodeContext.Provider>\n    );\n  }\n);\n\nAuthCodeField.displayName = \"AuthCode.Group\";\n\nconst AuthCodeHiddenInput = forwardRef<\n  HTMLInputElement,\n  Omit<React.ComponentProps<\"input\">, \"ref\">\n>(function AuthCodeHiddenInput(props, ref) {\n  const context = useAuthCodeContext();\n  const { name, value, hiddenInputRef } = context;\n  const memoizedRefs = useCallback(mergeRefs(ref, hiddenInputRef), [\n    ref,\n    hiddenInputRef,\n  ]);\n  return (\n    <input\n      ref={memoizedRefs}\n      name={name}\n      value={value.join(\"\")}\n      autoCapitalize=\"off\"\n      autoCorrect=\"off\"\n      autoSave=\"off\"\n      inputMode=\"numeric\"\n      autoComplete=\"one-time-code\"\n      required\n      {...props}\n      type=\"hidden\"\n    />\n  );\n});\n\nAuthCodeHiddenInput.displayName = \"AuthCode.HiddenInput\";\n\n/**\n * Input component for entering a single character of the auth code.\n *\n * **Must be used within `<AuthCode.Group>`**\n *\n * @example\n *\n * <AuthCode.Group>\n *   <AuthCode.Input index={0} />\n *   <AuthCode.Input index={1} />\n * </AuthCode.Group>\n *  */\nexport function AuthCodeInput({ index, ...props }: AuthCodeInputProps) {\n  const context = useAuthCodeContext();\n  const {\n    dispatch,\n    registerInputRef,\n    validation,\n    focusedIndex,\n    setFocusedIndex,\n    disabled,\n    inputCount,\n    inputElements,\n  } = context;\n\n  const currentCharacter = context.value[index] || \"\";\n  const firstEmptyIndex = Array.from({ length: inputCount }).findIndex(\n    (_, i) => !context.value[i]\n  );\n  const nextEmptyOrLastIndex =\n    firstEmptyIndex === -1 ? inputCount - 1 : firstEmptyIndex;\n  const inputRef = useRef<HTMLInputElement | null>(null);\n  const mergedInputRef = useCallback(mergeRefs(registerInputRef, inputRef), [\n    registerInputRef,\n  ]);\n\n  const inputPosition = inputRef.current\n    ? (inputElements.get(inputRef.current) ?? 0) + 1\n    : index + 1;\n\n  return (\n    <input\n      type={context.type}\n      tabIndex={index === focusedIndex ? 0 : -1}\n      ref={mergedInputRef}\n      inputMode={validation.inputMode}\n      pattern={validation.pattern}\n      aria-label={`One Time Password Character ${inputPosition} out of ${inputCount}`}\n      disabled={disabled}\n      autoComplete=\"off\"\n      autoCorrect=\"off\"\n      autoCapitalize=\"off\"\n      // Disable password managers\n      data-1p-ignore // 1Password\n      data-lpignore=\"true\" // LastPass\n      data-bwignore=\"true\" // Bitwarden\n      data-form-type=\"other\" // Generic password managers\n      {...props}\n      onPointerDown={(event) => {\n        // A click/touch on an input can cause the input to be out of selection so\n        // we must prevent that default action and keep the input selected\n        // in order to have a singular value\n        event.preventDefault();\n        const focusTargetIndex = Math.min(index, nextEmptyOrLastIndex);\n        const focusTargetElement = Array.from(context.inputElements.keys())[\n          focusTargetIndex\n        ];\n        focusInput(focusTargetElement);\n      }}\n      onFocus={(event) => {\n        // select entire input instead of just focus\n        event.target.select();\n        setFocusedIndex(index);\n      }}\n      onInput={(event) => {\n        const newInputValue = event.currentTarget.value;\n\n        // Only treat as paste if it's an actual paste operation or truly long input\n        // Single character duplicates (like \"11\" from typing \"1\" on \"1\") should go through onChange\n        const browserInputType = (event.nativeEvent as InputEvent).inputType;\n        const isPasteOperation =\n          browserInputType === \"insertFromPaste\" ||\n          browserInputType === \"insertFromDrop\";\n        const isLongInput = newInputValue.length > 2;\n\n        if (isPasteOperation || isLongInput) {\n          event.preventDefault();\n          dispatch({ type: \"PASTE\", value: newInputValue });\n        }\n      }}\n      onChange={(event) => {\n        const newInputValue = event.target.value;\n        // check if value is valid against pattern\n        if (event.target.validity.patternMismatch) return;\n        dispatch({ type: \"TYPE_CHAR\", char: newInputValue, index });\n      }}\n      onKeyDown={mergeEventHandlers(props.onKeyDown, (event) => {\n        // onKeyDown describes the intent of the user's key(s) presses\n        if (event.metaKey && event.key == \"c\") return;\n\n        if (\n          isUndoShortcut(event) ||\n          isCopyShortcut(event) ||\n          isRedoShortcut(event)\n        ) {\n          event.preventDefault();\n          return;\n        }\n\n        if ((event.metaKey || event.ctrlKey) && event.key === \"Backspace\") {\n          dispatch({ type: \"CLEAR_ALL\" });\n          return;\n        }\n\n        switch (event.key) {\n          case \"Delete\":\n          case \"Backspace\": {\n            event.preventDefault();\n            dispatch({ type: \"REMOVE_CHAR\", index });\n            return;\n          }\n\n          case \"Enter\": {\n            dispatch({ type: \"SUBMIT_CODE\" });\n            return;\n          }\n\n          case \"ArrowLeft\": {\n            event.preventDefault();\n            dispatch({ type: \"NAVIGATE_PREVIOUS\", index });\n            return;\n          }\n          case \"ArrowRight\": {\n            event.preventDefault();\n            dispatch({ type: \"NAVIGATE_NEXT\", index });\n            return;\n          }\n\n          // Prevents up and down movements from unselecting\n          case \"ArrowUp\":\n          case \"ArrowDown\": {\n            event.preventDefault();\n            return;\n          }\n\n          default:\n            if (event.key === currentCharacter) {\n              // this is essentially focusing the next input\n              dispatch({ type: \"TYPE_CHAR\", char: currentCharacter, index });\n              return;\n            }\n\n            if (event.metaKey || event.ctrlKey) {\n              return;\n            }\n\n            const hasValue = !!event.currentTarget.value;\n            const isFullySelected =\n              event.currentTarget.selectionStart === 0 &&\n              event.currentTarget.selectionEnd != null &&\n              event.currentTarget.selectionEnd > 0;\n\n            // When input has value and is fully selected, validate the incoming key\n            // to prevent selection loss from invalid keystrokes\n            if (hasValue && isFullySelected) {\n              // Only validate printable single characters (ignore modifiers, arrows, etc.)\n              if (event.key.length === 1) {\n                const isValid = validation.regex.test(event.key);\n                if (!isValid) {\n                  event.preventDefault();\n                  return;\n                }\n              }\n            }\n        }\n      })}\n      value={currentCharacter}\n    />\n  );\n}\n\nAuthCodeInput.displayName = \"AuthCode.Input\";\n\n// =================================================\n// CONTEXT\n// =================================================\n\nconst AuthCodeContext = createContext<AuthCodeContextValue | null>(null);\n\nfunction useAuthCodeContext() {\n  const value = useContext(AuthCodeContext);\n  if (!value) {\n    throw new Error(\n      \"\\n[awesome-auth-input] <AuthCode.Input> must be used within <AuthCode.Group>.\\n\\n\" +\n        \"Make sure all <AuthCode.Input> components are children of <AuthCode.Group>:\\n\\n\" +\n        \"Example:\\n\" +\n        \"  <AuthCode.Group>\\n\" +\n        \"    <AuthCode.Input index={0} />\\n\" +\n        \"    <AuthCode.Input index={1} />\\n\" +\n        \"  </AuthCode.Group>\\n\"\n    );\n  }\n  return value;\n}\n\n// =================================================\n// HELPERS & HOOKS\n// =================================================\n\nfunction mergeEventHandlers<E extends { defaultPrevented: boolean }>(\n  currentHandler?: (event: E) => void,\n  nextHandler?: (event: E) => void\n) {\n  return (event: E) => {\n    currentHandler?.(event);\n\n    if (!event.defaultPrevented) {\n      nextHandler?.(event);\n    }\n  };\n}\n\nfunction isUndoShortcut(event: React.KeyboardEvent<HTMLInputElement>): boolean {\n  return (event.metaKey || event.ctrlKey) && event.key === \"z\";\n}\n\nfunction isRedoShortcut(event: React.KeyboardEvent<HTMLInputElement>): boolean {\n  return (\n    (event.metaKey || event.ctrlKey) &&\n    (event.key === \"y\" || (event.shiftKey && event.key === \"z\"))\n  );\n}\n\nfunction isCopyShortcut(event: React.KeyboardEvent<HTMLInputElement>): boolean {\n  return (event.metaKey || event.ctrlKey) && event.key === \"c\";\n}\n\ntype MergedRef<T> = Ref<T> | undefined | null;\nfunction mergeRefs<T = any>(...refs: MergedRef<T>[]): React.RefCallback<T> {\n  return function (node) {\n    refs.forEach((ref) => {\n      if (typeof ref === \"function\") {\n        ref(node);\n      } else if (ref != null) {\n        ref.current = node;\n      }\n    });\n  };\n}\n\nconst focusInput = (element: HTMLInputElement | undefined) => {\n  if (!element) return;\n  if (element.disabled) return;\n\n  // Using ownerDocument.activeElement to check focus correctly across\n  // different document contexts (iframes, popups, shadow DOM)\n  if (element.ownerDocument.activeElement === element) {\n    element.select();\n  } else {\n    element.focus();\n  }\n};\n\nfunction useControllableState<T>({\n  defaultValue,\n  onValueChange,\n  value,\n}: {\n  defaultValue: T;\n  onValueChange?: (value: T) => void;\n  value?: T;\n}): [T, (newValue: T) => void] {\n  const [internalState, setInternalState] = useState<T>(defaultValue);\n\n  const isControlled = value !== undefined;\n  const currentValue = isControlled ? value : internalState;\n\n  const setState = useCallback(\n    (newValue: T) => {\n      if (!isControlled) {\n        setInternalState(newValue);\n      }\n      onValueChange?.(newValue);\n    },\n    [isControlled, onValueChange]\n  );\n\n  return [currentValue, setState];\n}\n\n// =================================================\n// INTERNAL TYPES & CONFIG\n// =================================================\n\ntype InputMode = \"text\" | \"numeric\" | \"none\";\n\ntype ValidationPattern =\n  | ({ type: \"custom\" } & CustomValidation)\n  | { type: \"alpha\" }\n  | { type: \"alphanumeric\" }\n  | { type: \"numeric\" };\n\ntype CustomValidation = {\n  regex: RegExp;\n  pattern: string;\n  inputMode: InputMode;\n};\n\ninterface AuthCodeInputProps\n  extends Omit<\n    React.ComponentProps<\"input\">,\n    | \"value\"\n    | \"placeholder\"\n    | \"disabled\"\n    | \"autoComplete\"\n    | \"defaultValue\"\n    | \"type\"\n  > {\n  index: number;\n}\n\ninterface AuthCodeContextValue {\n  dispatch: React.Dispatch<FieldUpdateAction>;\n  value: string[];\n  registerInputRef: (ref: HTMLInputElement | null) => void;\n  name?: string;\n  hiddenInputRef: Ref<HTMLInputElement | null>;\n  validation:\n    | (typeof defaultPatternInputMap)[DefaultInputTypes]\n    | ({ type: \"custom\" } & CustomValidation);\n  type: \"text\" | \"password\";\n  focusedIndex: number;\n  setFocusedIndex: (index: number) => void;\n  disabled: boolean;\n  inputCount: number;\n  inputElements: Map<HTMLInputElement, number>;\n}\n\ntype DefaultInputTypes = \"alpha\" | \"alphanumeric\" | \"numeric\";\n\nconst numericRegex = /^\\d$/;\nconst alphaNumericRegex = /^[a-zA-Z\\d]$/;\nconst alphaRegex = /^[a-zA-Z]$/;\n\nconst defaultPatternInputMap = {\n  alpha: {\n    type: \"alpha\",\n    regex: alphaRegex,\n    pattern: \"[a-zA-Z]{1}\",\n    inputMode: \"text\",\n  },\n  alphanumeric: {\n    type: \"alphanumeric\",\n    regex: alphaNumericRegex,\n    pattern: \"[a-zA-Z0-9]{1}\",\n    inputMode: \"text\",\n  },\n  numeric: {\n    type: \"numeric\",\n    regex: numericRegex,\n    pattern: \"[0-9]{1}\",\n    inputMode: \"numeric\",\n  },\n} as const;\n\ntype FieldUpdateAction =\n  | {\n      type: \"TYPE_CHAR\";\n      char: string;\n      index: number;\n    }\n  | { type: \"PASTE\"; value: string }\n  | { type: \"REMOVE_CHAR\"; index: number }\n  | { type: \"SUBMIT_CODE\" }\n  | { type: \"CLEAR_CHAR\"; index: number }\n  | { type: \"NAVIGATE_PREVIOUS\"; index: number }\n  | { type: \"NAVIGATE_NEXT\"; index: number }\n  | { type: \"CLEAR_ALL\" };\n\n// =================================================\n// EXPORTS\n// =================================================\n\nexport {\n  AuthCodeField as Group,\n  AuthCodeInput as Input,\n  AuthCodeHiddenInput as HiddenInput,\n};\n\nexport type {\n  AuthCodeFieldProps as AuthCodeGroupProps,\n  AuthCodeInputProps,\n  ValidationPattern,\n  CustomValidation,\n};\n","/**\n * awesome-auth-input\n * A headless, accessible React component for OTP/auth code inputs\n */\n\nimport {\n  Group,\n  Input,\n  HiddenInput,\n} from \"./AuthCode/OneTimePassword\";\n\nexport type {\n  AuthCodeGroupProps,\n  AuthCodeInputProps,\n  ValidationPattern,\n  CustomValidation,\n} from \"./AuthCode/OneTimePassword\";\n\n/**\n * AuthCode - A compound component for OTP/auth code inputs\n *\n * @example\n * ```tsx\n * <AuthCode.Group onComplete={(code) => console.log(code)}>\n *   <AuthCode.Input index={0} />\n *   <AuthCode.Input index={1} />\n *   <AuthCode.Input index={2} />\n *   <AuthCode.Input index={3} />\n * </AuthCode.Group>\n * ```\n */\nconst AuthCode = {\n  /**\n   * The root component that manages state and validation for auth code inputs.\n   * All `<AuthCode.Input>` components must be children of this component.\n   */\n  Group,\n  /**\n   * Individual input field for a single character of the auth code.\n   * Must be used within `<AuthCode.Group>`.\n   */\n  Input,\n  /**\n   * Hidden input that contains the full auth code value for form submission.\n   * Automatically rendered by Group, but can be customized if needed.\n   */\n  HiddenInput,\n};\n\nexport { AuthCode };\n\n// Also export individual components for tree-shaking\nexport { Group as AuthCodeGroup, Input as AuthCodeInput, HiddenInput as AuthCodeHiddenInput };\n\n"],"names":["forwardRef","AuthCodeField","useRef","useState","useCallback","flushSync","value","useMemo","useEffect","jsx","jsxs","AuthCodeHiddenInput","createContext","useContext","Group","Input","HiddenInput"],"mappings":"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"}

package/dist/index.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef, useRef, useState, useCallback, useEffect, useMemo, createContext, useContext } from "react";
+import { forwardRef, useRef, useState, useCallback, useMemo, useEffect, createContext, useContext } from "react";
 import { flushSync } from "react-dom";
 const AuthCodeField = forwardRef(
   function AuthCodeField2({
@@ -27,7 +27,8 @@ const AuthCodeField = forwardRef(
     const registerInputRef = useCallback((ref) => {
       if (ref) {
         if (!inputElements.current.has(ref)) {
-          inputElements.current.set(ref, true);
+          const position = inputElements.current.size;
+          inputElements.current.set(ref, position);
           setInputCount(inputElements.current.size);
         }
       }
@@ -63,13 +64,17 @@ const AuthCodeField = forwardRef(
             if (i === insertionIndex) return char;
             return value[i] ?? "";
           });
-          flushSync(() => setValue(newValue));
+          flushSync(() => {
+            setValue(newValue);
+          });
           if (insertionIndex < inputs.length - 1) {
             requestAnimationFrame(
               () => focusInput(inputs.at(insertionIndex + 1))
             );
           } else {
-            requestAnimationFrame(() => focusInput(inputs.at(insertionIndex)));
+            requestAnimationFrame(() => {
+              focusInput(inputs.at(insertionIndex));
+            });
           }
           return;
         }
@@ -146,16 +151,21 @@ const AuthCodeField = forwardRef(
         }
       }
     };
+    const concatenatedValue = useMemo(() => value.join(""), [value]);
+    useEffect(() => {
+      if (value.length === 0) {
+        setFocusedIndex(0);
+      }
+    }, [value]);
     useEffect(() => {
       var _a, _b;
-      const concatenatedValue = value.join("");
       const isCodeFullyEntered = concatenatedValue.length === inputCount && value.every((v) => v !== "") && inputCount > 0;
       if (!isCodeFullyEntered) return;
       onComplete == null ? void 0 : onComplete(concatenatedValue);
       if (autoSubmit) {
         (_b = (_a = hiddenInputRef.current) == null ? void 0 : _a.form) == null ? void 0 : _b.requestSubmit();
       }
-    }, [value, inputCount, onComplete, autoSubmit]);
+    }, [concatenatedValue, onComplete, inputCount, autoSubmit]);
     const contextValue = useMemo(
       () => ({
         dispatch,
@@ -184,6 +194,10 @@ const AuthCodeField = forwardRef(
           dispatch({ type: "PASTE", value: pastedText });
         },
         ...divProps,
+        onCopy: mergeEventHandlers(divProps.onCopy, (event) => {
+          event.preventDefault();
+          event.clipboardData.setData("text/plain", value.join(""));
+        }),
         children: [
           /* @__PURE__ */ jsx(AuthCodeHiddenInput, {}),
           children
@@ -192,6 +206,7 @@ const AuthCodeField = forwardRef(
     ) });
   }
 );
+AuthCodeField.displayName = "AuthCode.Group";
 const AuthCodeHiddenInput = forwardRef(function AuthCodeHiddenInput2(props, ref) {
   const context = useAuthCodeContext();
   const { name, value, hiddenInputRef } = context;
@@ -216,6 +231,7 @@ const AuthCodeHiddenInput = forwardRef(function AuthCodeHiddenInput2(props, ref)
     }
   );
 });
+AuthCodeHiddenInput.displayName = "AuthCode.HiddenInput";
 function AuthCodeInput({ index, ...props }) {
   const context = useAuthCodeContext();
   const {
@@ -225,16 +241,19 @@ function AuthCodeInput({ index, ...props }) {
     focusedIndex,
     setFocusedIndex,
     disabled,
-    inputCount
+    inputCount,
+    inputElements
   } = context;
   const currentCharacter = context.value[index] || "";
   const firstEmptyIndex = Array.from({ length: inputCount }).findIndex(
     (_, i) => !context.value[i]
   );
   const nextEmptyOrLastIndex = firstEmptyIndex === -1 ? inputCount - 1 : firstEmptyIndex;
-  const mergedInputRef = useCallback(mergeRefs(registerInputRef), [
+  const inputRef = useRef(null);
+  const mergedInputRef = useCallback(mergeRefs(registerInputRef, inputRef), [
     registerInputRef
   ]);
+  const inputPosition = inputRef.current ? (inputElements.get(inputRef.current) ?? 0) + 1 : index + 1;
   return /* @__PURE__ */ jsx(
     "input",
     {
@@ -243,15 +262,15 @@ function AuthCodeInput({ index, ...props }) {
       ref: mergedInputRef,
       inputMode: validation.inputMode,
       pattern: validation.pattern,
-      "aria-label": `One Time Password Character ${index + 1} out of ${inputCount}`,
+      "aria-label": `One Time Password Character ${inputPosition} out of ${inputCount}`,
       disabled,
       autoComplete: "off",
       autoCorrect: "off",
       autoCapitalize: "off",
       "data-1p-ignore": true,
       "data-lpignore": "true",
-      "data-form-type": "other",
       "data-bwignore": "true",
+      "data-form-type": "other",
       ...props,
       onPointerDown: (event) => {
         event.preventDefault();
@@ -340,6 +359,7 @@ function AuthCodeInput({ index, ...props }) {
     }
   );
 }
+AuthCodeInput.displayName = "AuthCode.Input";
 const AuthCodeContext = createContext(null);
 function useAuthCodeContext() {
   const value = useContext(AuthCodeContext);

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../src/AuthCode/OneTimePassword.tsx","../src/index.ts"],"sourcesContent":["import {\n  createContext,\n  useCallback,\n  useContext,\n  useRef,\n  useState,\n  type ReactNode,\n  type Ref,\n  useMemo,\n  useEffect,\n  forwardRef,\n} from \"react\";\nimport { flushSync } from \"react-dom\";\n\ninterface AuthCodeCustomField {\n  /**\n   * The child components, typically `<AuthCode.Input>` components.\n   *\n   * All `<AuthCode.Input>` components must be direct or nested children of `<AuthCode.Group>`.\n   */\n  children: ReactNode;\n  /**\n   * A string specifying a name for the input control. This name is submitted\n   * along with the control's value when the form data is submitted.\n   *\n   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name\n   */\n  name?: string;\n  /**\n   * Specifies what type of validation the user agent has to provide for each\n   * character input. Allows \"numeric\", \"alpha\", \"alphanumeric\", or a custom\n   * validation pattern with regex.\n   *\n   * @defaultValue `{ type: \"numeric\" }`\n   *\n   * @example\n   * ```tsx\n   * // Numeric only (default)\n   * <AuthCode.Group validation={{ type: \"numeric\" }} />\n   *\n   * // Alphabetic only\n   * <AuthCode.Group validation={{ type: \"alpha\" }} />\n   *\n   * // Custom validation\n   * <AuthCode.Group\n   *   validation={{\n   *     type: \"custom\",\n   *     regex: /^[A-Z]$/,\n   *     pattern: \"[A-Z]{1}\",\n   *     inputMode: \"text\"\n   *   }}\n   * />\n   * ```\n   */\n  validation?: ValidationPattern;\n  /**\n   * Whether or not the component should attempt to automatically submit when\n   * all fields are filled. If the field is associated with an HTML `form`\n   * element, the form's `requestSubmit` method will be called.\n   *\n   * @defaultValue `true`\n   *\n   * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/requestSubmit\n   */\n  autoSubmit?: boolean;\n  /**\n   * When the `autoSubmit` prop is set to `true`, this callback will be fired\n   * before attempting to submit the associated form. It will be called whether\n   * or not a form is located, or if submission is not allowed.\n   *\n   * The callback receives the complete auth code value as a string.\n   *\n   * @example\n   * ```tsx\n   * <AuthCode.Group\n   *   onComplete={(value) => {\n   *     console.log('Code entered:', value);\n   *     verifyCode(value);\n   *   }}\n   * />\n   * ```\n   */\n  onComplete?: (value: string) => void;\n  /**\n   * The controlled value of the field. When provided, the component operates\n   * in controlled mode. This string's value, if present, must match the total\n   * number of `<AuthCode.Input>` components.\n   *\n   * @example\n   * ```tsx\n   * const [code, setCode] = useState('');\n   * <AuthCode.Group value={code} onValueChange={setCode} />\n   * ```\n   */\n  value?: string;\n  /**\n   * A callback fired whenever the field value changes. This callback is called\n   * with the complete auth code value as a string.\n   *\n   * Use this prop together with `value` to create a controlled component.\n   */\n  onValueChange?: (value: string) => void;\n  /**\n   * The initial value of the uncontrolled field. When provided without `value`,\n   * the component operates in uncontrolled mode.\n   *\n   * @example\n   * ```tsx\n   * <AuthCode.Group defaultValue=\"123\" />\n   * ```\n   */\n  defaultValue?: string;\n  /**\n   * The type of control to render. Allows \"text\" or \"password\".\n   *\n   * When set to \"password\", the input characters will be masked.\n   *\n   * @defaultValue `\"text\"`\n   *\n   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#type\n   */\n  type?: \"text\" | \"password\";\n  /**\n   * Whether or not the input elements are disabled.\n   *\n   * When set to `true`, all `<AuthCode.Input>` components will be disabled\n   * and users will not be able to interact with them.\n   *\n   * @defaultValue `false`\n   *\n   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled\n   */\n  disabled?: boolean;\n}\n\ninterface AuthCodeFieldProps\n  extends AuthCodeCustomField,\n    Omit<React.ComponentProps<\"div\">, keyof AuthCodeCustomField> {}\n\nconst AuthCodeField = forwardRef<HTMLDivElement, AuthCodeFieldProps>(\n  function AuthCodeField(\n    {\n      children,\n      name,\n      validation = { type: \"numeric\" },\n      autoSubmit = true,\n      onComplete,\n      value: userValue,\n      onValueChange: userOnValueChange,\n      defaultValue,\n      type = \"text\",\n      disabled = false,\n      ...divProps\n    }: AuthCodeFieldProps,\n    forwardedRef\n  ) {\n    const inputElements = useRef<Map<HTMLInputElement, true>>(new Map());\n    const [value, setValue] = useControllableState<string[]>({\n      value: userValue !== undefined ? Array.from(userValue) : undefined,\n      defaultValue: defaultValue ? Array.from(defaultValue) : [],\n      onValueChange: userOnValueChange\n        ? (chars) => userOnValueChange(chars.join(\"\"))\n        : undefined,\n    });\n\n    const validationConfig =\n      validation.type == \"custom\"\n        ? validation\n        : defaultPatternInputMap[validation.type];\n\n    const [focusedIndex, setFocusedIndex] = useState(0);\n    const [inputCount, setInputCount] = useState(0);\n\n    const registerInputRef = useCallback((ref: HTMLInputElement | null) => {\n      if (ref) {\n        if (!inputElements.current.has(ref)) {\n          inputElements.current.set(ref, true);\n          setInputCount(inputElements.current.size);\n        }\n      }\n    }, []);\n\n    const validateChar = useCallback(\n      (char: string): boolean => {\n        if (!char) return true;\n\n        const regex = validationConfig.regex;\n        return regex.test(char);\n      },\n      [validationConfig]\n    );\n\n    const validateString = useCallback(\n      (str: string): string => {\n        return Array.from(str)\n          .filter((char) => validateChar(char))\n          .join(\"\");\n      },\n      [validateChar]\n    );\n\n    const hiddenInputRef = useRef<HTMLInputElement | null>(null);\n\n    // consider removing useEffectEvent\n    const dispatch = (action: FieldUpdateAction) => {\n      // use an ordered dictionary instead?\n      const inputs = Array.from(inputElements.current.keys());\n      switch (action.type) {\n        case \"TYPE_CHAR\": {\n          const { char, index: targetIndex } = action;\n\n          if (!validateChar(char)) return;\n\n          const hasExistingValue = !!value[targetIndex];\n          const firstEmptyIndex = Array.from({\n            length: inputs.length,\n          }).findIndex((_, i) => !value[i]);\n\n          const insertionIndex =\n            hasExistingValue || firstEmptyIndex === -1\n              ? targetIndex\n              : firstEmptyIndex;\n\n          const newValue = Array.from({ length: inputs.length }, (_, i) => {\n            if (i === insertionIndex) return char;\n            return value[i] ?? \"\";\n          });\n\n          flushSync(() => setValue(newValue));\n\n          if (insertionIndex < inputs.length - 1) {\n            requestAnimationFrame(() =>\n              focusInput(inputs.at(insertionIndex + 1))\n            );\n          } else {\n            requestAnimationFrame(() => focusInput(inputs.at(insertionIndex)));\n          }\n          return;\n        }\n\n        case \"REMOVE_CHAR\": {\n          const { index } = action;\n          const totalInputLength = inputs.length;\n\n          // Remove character and shift remaining values left\n          const leftPortion = value.slice(0, index);\n          const rightPortion = value.slice(index + 1);\n          const compacted = leftPortion.concat(rightPortion);\n          const emptySlots = Array(\n            Math.max(0, totalInputLength - compacted.length)\n          ).fill(\"\");\n\n          flushSync(() => setValue(compacted.concat(emptySlots)));\n\n          if (index != 0) {\n            focusInput(inputs.at(index - 1));\n          } else {\n            // index is 0\n            focusInput(inputs.at(0));\n          }\n          return;\n        }\n\n        case \"CLEAR_CHAR\": {\n          const { index } = action;\n          const newValue = value.slice();\n          newValue[index] = \"\";\n          flushSync(() => setValue(newValue));\n          return;\n        }\n\n        case \"SUBMIT_CODE\": {\n          const currentValue = value.join(\"\");\n          onComplete?.(currentValue);\n          hiddenInputRef.current?.form?.requestSubmit();\n          break;\n        }\n\n        case \"PASTE\": {\n          const { value } = action;\n          const totalInputLength = inputs.length;\n\n          const validatedValue = validateString(value);\n          if (validatedValue.length === 0) return;\n\n          const pastedCharacters = Array.from(value).slice(0, inputs.length);\n          const emptySlots = Array(\n            Math.max(0, totalInputLength - value.length)\n          ).fill(\"\");\n\n          flushSync(() => setValue([...pastedCharacters, ...emptySlots]));\n\n          if (pastedCharacters.length === totalInputLength) {\n            focusInput(inputs.at(-1));\n          } else {\n            focusInput(inputs.at(value.length));\n          }\n          return;\n        }\n        case \"NAVIGATE_PREVIOUS\": {\n          const { index } = action;\n          if (index > 0) {\n            focusInput(inputs.at(index - 1));\n          }\n          return;\n        }\n\n        case \"NAVIGATE_NEXT\": {\n          const { index } = action;\n          if (value[index] && index < inputs.length - 1) {\n            focusInput(inputs.at(index + 1));\n            return;\n          }\n\n          const firstEmpty = Array.from({ length: inputs.length }).findIndex(\n            (_, i) => !value[i]\n          );\n\n          // BUG: if a value was deleted in the middle of a sequence, then we would\n          // not be able to navigate to the right side of the sequence\n\n          focusInput(inputs.at(firstEmpty));\n          return;\n        }\n\n        case \"CLEAR_ALL\": {\n          flushSync(() => setValue([]));\n          focusInput(inputs.at(0));\n          return;\n        }\n      }\n    };\n\n    useEffect(() => {\n      const concatenatedValue = value.join(\"\");\n      const isCodeFullyEntered =\n        concatenatedValue.length === inputCount &&\n        value.every((v) => v !== \"\") &&\n        inputCount > 0;\n\n      if (!isCodeFullyEntered) return;\n\n      onComplete?.(concatenatedValue);\n\n      if (autoSubmit) {\n        hiddenInputRef.current?.form?.requestSubmit();\n      }\n    }, [value, inputCount, onComplete, autoSubmit]);\n\n    const contextValue = useMemo(\n      () => ({\n        dispatch,\n        value,\n        registerInputRef,\n        name,\n        hiddenInputRef,\n        validation: validationConfig,\n        type,\n        focusedIndex,\n        setFocusedIndex,\n        disabled,\n        inputCount,\n        inputElements: inputElements.current,\n      }),\n      [value, focusedIndex, disabled, name, type, inputCount]\n    );\n\n    return (\n      <AuthCodeContext.Provider value={contextValue}>\n        <div\n          // Delegating all input's paste event this parent handler\n          // because we want to control the paste for all inputs.\n          ref={forwardedRef}\n          onPaste={(event) => {\n            event.preventDefault();\n            const clipboardData = event.clipboardData;\n            const pastedText = clipboardData.getData(\"text/plain\");\n\n            dispatch({ type: \"PASTE\", value: pastedText });\n          }}\n          {...divProps}\n        >\n          <AuthCodeHiddenInput />\n          {children}\n        </div>\n      </AuthCodeContext.Provider>\n    );\n  }\n);\n\nconst AuthCodeHiddenInput = forwardRef<\n  HTMLInputElement,\n  Omit<React.ComponentProps<\"input\">, \"ref\">\n>(function AuthCodeHiddenInput(props, ref) {\n  const context = useAuthCodeContext();\n  const { name, value, hiddenInputRef } = context;\n  const memoizedRefs = useCallback(mergeRefs(ref, hiddenInputRef), [\n    ref,\n    hiddenInputRef,\n  ]);\n  return (\n    <input\n      ref={memoizedRefs}\n      name={name}\n      value={value.join(\"\")}\n      autoCapitalize=\"off\"\n      autoCorrect=\"off\"\n      autoSave=\"off\"\n      inputMode=\"numeric\"\n      autoComplete=\"one-time-code\"\n      required\n      {...props}\n      type=\"hidden\"\n    />\n  );\n});\n\n/**\n * Input component for entering a single character of the auth code.\n *\n * **Must be used within `<AuthCode.Group>`**\n *\n * @example\n *\n * <AuthCode.Group>\n *   <AuthCode.Input index={0} />\n *   <AuthCode.Input index={1} />\n * </AuthCode.Group>\n *  */\nexport function AuthCodeInput({ index, ...props }: AuthCodeInputProps) {\n  const context = useAuthCodeContext();\n  const {\n    dispatch,\n    registerInputRef,\n    validation,\n    focusedIndex,\n    setFocusedIndex,\n    disabled,\n    inputCount,\n  } = context;\n\n  const currentCharacter = context.value[index] || \"\";\n  const firstEmptyIndex = Array.from({ length: inputCount }).findIndex(\n    (_, i) => !context.value[i]\n  );\n  const nextEmptyOrLastIndex =\n    firstEmptyIndex === -1 ? inputCount - 1 : firstEmptyIndex;\n  const mergedInputRef = useCallback(mergeRefs(registerInputRef), [\n    registerInputRef,\n  ]);\n  return (\n    <input\n      type={context.type}\n      tabIndex={index === focusedIndex ? 0 : -1}\n      ref={mergedInputRef}\n      inputMode={validation.inputMode}\n      pattern={validation.pattern}\n      aria-label={`One Time Password Character ${\n        index + 1\n      } out of ${inputCount}`}\n      disabled={disabled}\n      autoComplete=\"off\"\n      autoCorrect=\"off\"\n      autoCapitalize=\"off\"\n      // Disable password managers\n      data-1p-ignore // 1Password\n      data-lpignore=\"true\" // LastPass\n      data-form-type=\"other\" // Generic password managers\n      data-bwignore=\"true\" // Bitwarden\n      {...props}\n      onPointerDown={(event) => {\n        // A click/touch on an input can cause the input to be out of selection so\n        // we must prevent that default action and keep the input selected\n        // in order to have a singular value\n        event.preventDefault();\n        const focusTargetIndex = Math.min(index, nextEmptyOrLastIndex);\n        const focusTargetElement = Array.from(context.inputElements.keys())[\n          focusTargetIndex\n        ];\n        focusInput(focusTargetElement);\n      }}\n      onFocus={(event) => {\n        // select entire input instead of just focus\n        event.target.select();\n        setFocusedIndex(index);\n      }}\n      onInput={(event) => {\n        const newInputValue = event.currentTarget.value;\n\n        // Only treat as paste if it's an actual paste operation or truly long input\n        // Single character duplicates (like \"11\" from typing \"1\" on \"1\") should go through onChange\n        const browserInputType = (event.nativeEvent as InputEvent).inputType;\n        const isPasteOperation =\n          browserInputType === \"insertFromPaste\" ||\n          browserInputType === \"insertFromDrop\";\n        const isLongInput = newInputValue.length > 2;\n\n        if (isPasteOperation || isLongInput) {\n          event.preventDefault();\n          dispatch({ type: \"PASTE\", value: newInputValue });\n        }\n      }}\n      onChange={(event) => {\n        const newInputValue = event.target.value;\n        // check if value is valid against pattern\n        if (event.target.validity.patternMismatch) return;\n        dispatch({ type: \"TYPE_CHAR\", char: newInputValue, index });\n      }}\n      onKeyDown={mergeEventHandlers(props.onKeyDown, (event) => {\n        // onKeyDown describes the intent of the user's key(s) presses\n        if (event.metaKey && event.key == \"c\") return;\n\n        if (\n          isUndoShortcut(event) ||\n          isCopyShortcut(event) ||\n          isRedoShortcut(event)\n        ) {\n          event.preventDefault();\n          return;\n        }\n\n        if ((event.metaKey || event.ctrlKey) && event.key === \"Backspace\") {\n          dispatch({ type: \"CLEAR_ALL\" });\n          return;\n        }\n\n        switch (event.key) {\n          case \"Delete\":\n          case \"Backspace\": {\n            event.preventDefault();\n            dispatch({ type: \"REMOVE_CHAR\", index });\n            return;\n          }\n\n          case \"Enter\": {\n            dispatch({ type: \"SUBMIT_CODE\" });\n            return;\n          }\n\n          case \"ArrowLeft\": {\n            event.preventDefault();\n            dispatch({ type: \"NAVIGATE_PREVIOUS\", index });\n            return;\n          }\n          case \"ArrowRight\": {\n            event.preventDefault();\n            dispatch({ type: \"NAVIGATE_NEXT\", index });\n            return;\n          }\n\n          // Prevents up and down movements from unselecting\n          case \"ArrowUp\":\n          case \"ArrowDown\": {\n            event.preventDefault();\n            return;\n          }\n\n          default:\n            if (event.key === currentCharacter) {\n              // this is essentially focusing the next input\n              dispatch({ type: \"TYPE_CHAR\", char: currentCharacter, index });\n              return;\n            }\n\n            if (event.metaKey || event.ctrlKey) {\n              return;\n            }\n\n            const hasValue = !!event.currentTarget.value;\n            const isFullySelected =\n              event.currentTarget.selectionStart === 0 &&\n              event.currentTarget.selectionEnd != null &&\n              event.currentTarget.selectionEnd > 0;\n\n            // When input has value and is fully selected, validate the incoming key\n            // to prevent selection loss from invalid keystrokes\n            if (hasValue && isFullySelected) {\n              // Only validate printable single characters (ignore modifiers, arrows, etc.)\n              if (event.key.length === 1) {\n                const isValid = validation.regex.test(event.key);\n                if (!isValid) {\n                  event.preventDefault();\n                  return;\n                }\n              }\n            }\n        }\n      })}\n      value={currentCharacter}\n    />\n  );\n}\n\n// =================================================\n// CONTEXT\n// =================================================\n\nconst AuthCodeContext = createContext<AuthCodeContextValue | null>(null);\n\nfunction useAuthCodeContext() {\n  const value = useContext(AuthCodeContext);\n  if (!value) {\n    throw new Error(\n      \"\\n[awesome-auth-input] <AuthCode.Input> must be used within <AuthCode.Group>.\\n\\n\" +\n        \"Make sure all <AuthCode.Input> components are children of <AuthCode.Group>:\\n\\n\" +\n        \"Example:\\n\" +\n        \"  <AuthCode.Group>\\n\" +\n        \"    <AuthCode.Input index={0} />\\n\" +\n        \"    <AuthCode.Input index={1} />\\n\" +\n        \"  </AuthCode.Group>\\n\"\n    );\n  }\n  return value;\n}\n\n// =================================================\n// HELPERS & HOOKS\n// =================================================\n\nfunction mergeEventHandlers<E extends { defaultPrevented: boolean }>(\n  currentHandler?: (event: E) => void,\n  nextHandler?: (event: E) => void\n) {\n  return (event: E) => {\n    currentHandler?.(event);\n\n    if (!event.defaultPrevented) {\n      nextHandler?.(event);\n    }\n  };\n}\n\nfunction isUndoShortcut(event: React.KeyboardEvent<HTMLInputElement>): boolean {\n  return (event.metaKey || event.ctrlKey) && event.key === \"z\";\n}\n\nfunction isRedoShortcut(event: React.KeyboardEvent<HTMLInputElement>): boolean {\n  return (\n    (event.metaKey || event.ctrlKey) &&\n    (event.key === \"y\" || (event.shiftKey && event.key === \"z\"))\n  );\n}\n\nfunction isCopyShortcut(event: React.KeyboardEvent<HTMLInputElement>): boolean {\n  return (event.metaKey || event.ctrlKey) && event.key === \"c\";\n}\n\ntype MergedRef<T> = Ref<T> | undefined | null;\nfunction mergeRefs<T = any>(...refs: MergedRef<T>[]): React.RefCallback<T> {\n  return function (node) {\n    refs.forEach((ref) => {\n      if (typeof ref === \"function\") {\n        ref(node);\n      } else if (ref != null) {\n        ref.current = node;\n      }\n    });\n  };\n}\n\nconst focusInput = (element: HTMLInputElement | undefined) => {\n  if (!element) return;\n  if (element.disabled) return;\n  // ownerDocument is the opened 'window' that owns the element\n  // e.g. popups or a browser-in-browser\n  if (element.ownerDocument.activeElement === element) {\n    element.select();\n  } else {\n    element.focus();\n  }\n};\n\nfunction useControllableState<T>({\n  defaultValue,\n  onValueChange,\n  value,\n}: {\n  defaultValue: T;\n  onValueChange?: (value: T) => void;\n  value?: T;\n}): [T, (newValue: T) => void] {\n  const [internalState, setInternalState] = useState<T>(defaultValue);\n\n  const isControlled = value !== undefined;\n  const currentValue = isControlled ? value : internalState;\n\n  const setState = useCallback(\n    (newValue: T) => {\n      if (!isControlled) {\n        setInternalState(newValue);\n      }\n      onValueChange?.(newValue);\n    },\n    [isControlled, onValueChange]\n  );\n\n  return [currentValue, setState];\n}\n\n// =================================================\n// INTERNAL TYPES & CONFIG\n// =================================================\n\ntype InputMode = \"text\" | \"numeric\" | \"none\";\n\ntype ValidationPattern =\n  | ({ type: \"custom\" } & CustomValidation)\n  | { type: \"alpha\" }\n  | { type: \"alphanumeric\" }\n  | { type: \"numeric\" };\n\ntype CustomValidation = {\n  regex: RegExp;\n  pattern: string;\n  inputMode: InputMode;\n};\n\ninterface AuthCodeInputProps\n  extends Omit<\n    React.ComponentProps<\"input\">,\n    | \"value\"\n    | \"placeholder\"\n    | \"disabled\"\n    | \"autoComplete\"\n    | \"defaultValue\"\n    | \"type\"\n  > {\n  index: number;\n}\n\ninterface AuthCodeContextValue {\n  dispatch: React.Dispatch<FieldUpdateAction>;\n  value: string[];\n  registerInputRef: (ref: HTMLInputElement | null) => void;\n  name?: string;\n  hiddenInputRef: Ref<HTMLInputElement | null>;\n  validation:\n    | (typeof defaultPatternInputMap)[DefaultInputTypes]\n    | ({ type: \"custom\" } & CustomValidation);\n  type: \"text\" | \"password\";\n  focusedIndex: number;\n  setFocusedIndex: (index: number) => void;\n  disabled: boolean;\n  inputCount: number;\n  inputElements: Map<HTMLInputElement, true>;\n}\n\ntype DefaultInputTypes = \"alpha\" | \"alphanumeric\" | \"numeric\";\n\nconst numericRegex = /^\\d$/;\nconst alphaNumericRegex = /^[a-zA-Z\\d]$/;\nconst alphaRegex = /^[a-zA-Z]$/;\n\nconst defaultPatternInputMap = {\n  alpha: {\n    type: \"alpha\",\n    regex: alphaRegex,\n    pattern: \"[a-zA-Z]{1}\",\n    inputMode: \"text\",\n  },\n  alphanumeric: {\n    type: \"alphanumeric\",\n    regex: alphaNumericRegex,\n    pattern: \"[a-zA-Z0-9]{1}\",\n    inputMode: \"text\",\n  },\n  numeric: {\n    type: \"numeric\",\n    regex: numericRegex,\n    pattern: \"[0-9]{1}\",\n    inputMode: \"numeric\",\n  },\n} as const;\n\ntype FieldUpdateAction =\n  | {\n      type: \"TYPE_CHAR\";\n      char: string;\n      index: number;\n    }\n  | { type: \"PASTE\"; value: string }\n  | { type: \"REMOVE_CHAR\"; index: number }\n  | { type: \"SUBMIT_CODE\" }\n  | { type: \"CLEAR_CHAR\"; index: number }\n  | { type: \"NAVIGATE_PREVIOUS\"; index: number }\n  | { type: \"NAVIGATE_NEXT\"; index: number }\n  | { type: \"CLEAR_ALL\" };\n\n// =================================================\n// EXPORTS\n// =================================================\n\nexport {\n  AuthCodeField as Group,\n  AuthCodeInput as Input,\n  AuthCodeHiddenInput as HiddenInput,\n};\n\nexport type {\n  AuthCodeFieldProps as AuthCodeGroupProps,\n  AuthCodeInputProps,\n  ValidationPattern,\n  CustomValidation,\n};\n","/**\n * awesome-auth-input\n * A headless, accessible React component for OTP/auth code inputs\n */\n\nimport {\n  Group,\n  Input,\n  HiddenInput,\n} from \"./AuthCode/OneTimePassword\";\n\nexport type {\n  AuthCodeGroupProps,\n  AuthCodeInputProps,\n  ValidationPattern,\n  CustomValidation,\n} from \"./AuthCode/OneTimePassword\";\n\n/**\n * AuthCode - A compound component for OTP/auth code inputs\n *\n * @example\n * ```tsx\n * <AuthCode.Group onComplete={(code) => console.log(code)}>\n *   <AuthCode.Input index={0} />\n *   <AuthCode.Input index={1} />\n *   <AuthCode.Input index={2} />\n *   <AuthCode.Input index={3} />\n * </AuthCode.Group>\n * ```\n */\nconst AuthCode = {\n  /**\n   * The root component that manages state and validation for auth code inputs.\n   * All `<AuthCode.Input>` components must be children of this component.\n   */\n  Group,\n  /**\n   * Individual input field for a single character of the auth code.\n   * Must be used within `<AuthCode.Group>`.\n   */\n  Input,\n  /**\n   * Hidden input that contains the full auth code value for form submission.\n   * Automatically rendered by Group, but can be customized if needed.\n   */\n  HiddenInput,\n};\n\nexport { AuthCode };\n\n// Also export individual components for tree-shaking\nexport { Group as AuthCodeGroup, Input as AuthCodeInput, HiddenInput as AuthCodeHiddenInput };\n\n"],"names":["AuthCodeField","value","AuthCodeHiddenInput","Group","Input","HiddenInput"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../src/AuthCode/OneTimePassword.tsx","../src/index.ts"],"sourcesContent":["import {\n  createContext,\n  useCallback,\n  useContext,\n  useRef,\n  useState,\n  type ReactNode,\n  type Ref,\n  useMemo,\n  useEffect,\n  forwardRef,\n} from \"react\";\nimport { flushSync } from \"react-dom\";\n\ninterface AuthCodeCustomField {\n  /**\n   * The child components, typically `<AuthCode.Input>` components.\n   *\n   * All `<AuthCode.Input>` components must be direct or nested children of `<AuthCode.Group>`.\n   */\n  children: ReactNode;\n  /**\n   * A string specifying a name for the input control. This name is submitted\n   * along with the control's value when the form data is submitted.\n   *\n   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name\n   */\n  name?: string;\n  /**\n   * Specifies what type of validation the user agent has to provide for each\n   * character input. Allows \"numeric\", \"alpha\", \"alphanumeric\", or a custom\n   * validation pattern with regex.\n   *\n   * @defaultValue `{ type: \"numeric\" }`\n   *\n   * @example\n   * ```tsx\n   * // Numeric only (default)\n   * <AuthCode.Group validation={{ type: \"numeric\" }} />\n   *\n   * // Alphabetic only\n   * <AuthCode.Group validation={{ type: \"alpha\" }} />\n   *\n   * // Custom validation\n   * <AuthCode.Group\n   *   validation={{\n   *     type: \"custom\",\n   *     regex: /^[A-Z]$/,\n   *     pattern: \"[A-Z]{1}\",\n   *     inputMode: \"text\"\n   *   }}\n   * />\n   * ```\n   */\n  validation?: ValidationPattern;\n  /**\n   * Whether or not the component should attempt to automatically submit when\n   * all fields are filled. If the field is associated with an HTML `form`\n   * element, the form's `requestSubmit` method will be called.\n   *\n   * @defaultValue `true`\n   *\n   * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/requestSubmit\n   */\n  autoSubmit?: boolean;\n  /**\n   * When the `autoSubmit` prop is set to `true`, this callback will be fired\n   * before attempting to submit the associated form. It will be called whether\n   * or not a form is located, or if submission is not allowed.\n   *\n   * The callback receives the complete auth code value as a string.\n   *\n   * @example\n   * ```tsx\n   * <AuthCode.Group\n   *   onComplete={(value) => {\n   *     console.log('Code entered:', value);\n   *     verifyCode(value);\n   *   }}\n   * />\n   * ```\n   */\n  onComplete?: (value: string) => void;\n  /**\n   * The controlled value of the field. When provided, the component operates\n   * in controlled mode. This string's value, if present, must match the total\n   * number of `<AuthCode.Input>` components.\n   *\n   * @example\n   * ```tsx\n   * const [code, setCode] = useState('');\n   * <AuthCode.Group value={code} onValueChange={setCode} />\n   * ```\n   */\n  value?: string;\n  /**\n   * A callback fired whenever the field value changes. This callback is called\n   * with the complete auth code value as a string.\n   *\n   * Use this prop together with `value` to create a controlled component.\n   */\n  onValueChange?: (value: string) => void;\n  /**\n   * The initial value of the uncontrolled field. When provided without `value`,\n   * the component operates in uncontrolled mode.\n   *\n   * @example\n   * ```tsx\n   * <AuthCode.Group defaultValue=\"123\" />\n   * ```\n   */\n  defaultValue?: string;\n  /**\n   * The type of control to render. Allows \"text\" or \"password\".\n   *\n   * When set to \"password\", the input characters will be masked.\n   *\n   * @defaultValue `\"text\"`\n   *\n   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#type\n   */\n  type?: \"text\" | \"password\";\n  /**\n   * Whether or not the input elements are disabled.\n   *\n   * When set to `true`, all `<AuthCode.Input>` components will be disabled\n   * and users will not be able to interact with them.\n   *\n   * @defaultValue `false`\n   *\n   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled\n   */\n  disabled?: boolean;\n}\n\ninterface AuthCodeFieldProps\n  extends AuthCodeCustomField,\n    Omit<React.ComponentProps<\"div\">, keyof AuthCodeCustomField> {}\n\nconst AuthCodeField = forwardRef<HTMLDivElement, AuthCodeFieldProps>(\n  function AuthCodeField(\n    {\n      children,\n      name,\n      validation = { type: \"numeric\" },\n      autoSubmit = true,\n      onComplete,\n      value: userValue,\n      onValueChange: userOnValueChange,\n      defaultValue,\n      type = \"text\",\n      disabled = false,\n      ...divProps\n    }: AuthCodeFieldProps,\n    forwardedRef\n  ) {\n    const inputElements = useRef<Map<HTMLInputElement, number>>(new Map());\n    const [value, setValue] = useControllableState<string[]>({\n      value: userValue !== undefined ? Array.from(userValue) : undefined,\n      defaultValue: defaultValue ? Array.from(defaultValue) : [],\n      onValueChange: userOnValueChange\n        ? (chars) => userOnValueChange(chars.join(\"\"))\n        : undefined,\n    });\n\n    const validationConfig =\n      validation.type == \"custom\"\n        ? validation\n        : defaultPatternInputMap[validation.type];\n\n    const [focusedIndex, setFocusedIndex] = useState(0);\n    const [inputCount, setInputCount] = useState(0);\n\n    const registerInputRef = useCallback((ref: HTMLInputElement | null) => {\n      if (ref) {\n        if (!inputElements.current.has(ref)) {\n          const position = inputElements.current.size;\n          inputElements.current.set(ref, position);\n          setInputCount(inputElements.current.size);\n        }\n      }\n    }, []);\n\n    const validateChar = useCallback(\n      (char: string): boolean => {\n        if (!char) return true;\n\n        const regex = validationConfig.regex;\n        return regex.test(char);\n      },\n      [validationConfig]\n    );\n\n    const validateString = useCallback(\n      (str: string): string => {\n        return Array.from(str)\n          .filter((char) => validateChar(char))\n          .join(\"\");\n      },\n      [validateChar]\n    );\n\n    const hiddenInputRef = useRef<HTMLInputElement | null>(null);\n\n    const dispatch = (action: FieldUpdateAction) => {\n      // use an ordered dictionary instead?\n      const inputs = Array.from(inputElements.current.keys());\n      switch (action.type) {\n        case \"TYPE_CHAR\": {\n          const { char, index: targetIndex } = action;\n\n          if (!validateChar(char)) return;\n\n          const hasExistingValue = !!value[targetIndex];\n          const firstEmptyIndex = Array.from({\n            length: inputs.length,\n          }).findIndex((_, i) => !value[i]);\n\n          const insertionIndex =\n            hasExistingValue || firstEmptyIndex === -1\n              ? targetIndex\n              : firstEmptyIndex;\n\n          const newValue = Array.from({ length: inputs.length }, (_, i) => {\n            if (i === insertionIndex) return char;\n            return value[i] ?? \"\";\n          });\n\n          flushSync(() => {\n            setValue(newValue);\n          });\n\n          if (insertionIndex < inputs.length - 1) {\n            requestAnimationFrame(() =>\n              focusInput(inputs.at(insertionIndex + 1))\n            );\n          } else {\n            requestAnimationFrame(() => {\n              focusInput(inputs.at(insertionIndex));\n            });\n          }\n          return;\n        }\n\n        case \"REMOVE_CHAR\": {\n          const { index } = action;\n          const totalInputLength = inputs.length;\n\n          // Remove character and shift remaining values left\n          const leftPortion = value.slice(0, index);\n          const rightPortion = value.slice(index + 1);\n          const compacted = leftPortion.concat(rightPortion);\n          const emptySlots = Array(\n            Math.max(0, totalInputLength - compacted.length)\n          ).fill(\"\");\n\n          flushSync(() => setValue(compacted.concat(emptySlots)));\n\n          if (index != 0) {\n            focusInput(inputs.at(index - 1));\n          } else {\n            focusInput(inputs.at(0));\n          }\n          return;\n        }\n\n        case \"CLEAR_CHAR\": {\n          const { index } = action;\n          const newValue = value.slice();\n          newValue[index] = \"\";\n          flushSync(() => setValue(newValue));\n          return;\n        }\n\n        case \"SUBMIT_CODE\": {\n          const currentValue = value.join(\"\");\n          onComplete?.(currentValue);\n          hiddenInputRef.current?.form?.requestSubmit();\n          break;\n        }\n\n        case \"PASTE\": {\n          const { value } = action;\n          const totalInputLength = inputs.length;\n\n          const validatedValue = validateString(value);\n          if (validatedValue.length === 0) return;\n\n          const pastedCharacters = Array.from(value).slice(0, inputs.length);\n          const emptySlots = Array(\n            Math.max(0, totalInputLength - value.length)\n          ).fill(\"\");\n\n          flushSync(() => setValue([...pastedCharacters, ...emptySlots]));\n\n          if (pastedCharacters.length === totalInputLength) {\n            focusInput(inputs.at(-1));\n          } else {\n            focusInput(inputs.at(value.length));\n          }\n          return;\n        }\n        case \"NAVIGATE_PREVIOUS\": {\n          const { index } = action;\n          if (index > 0) {\n            focusInput(inputs.at(index - 1));\n          }\n          return;\n        }\n\n        case \"NAVIGATE_NEXT\": {\n          const { index } = action;\n          if (value[index] && index < inputs.length - 1) {\n            focusInput(inputs.at(index + 1));\n            return;\n          }\n\n          const firstEmpty = Array.from({ length: inputs.length }).findIndex(\n            (_, i) => !value[i]\n          );\n\n          focusInput(inputs.at(firstEmpty));\n          return;\n        }\n\n        case \"CLEAR_ALL\": {\n          flushSync(() => setValue([]));\n          focusInput(inputs.at(0));\n          return;\n        }\n      }\n    };\n\n    const concatenatedValue = useMemo(() => value.join(\"\"), [value]);\n\n    useEffect(() => {\n      if (value.length === 0) {\n        setFocusedIndex(0);\n      }\n    }, [value]);\n\n    useEffect(() => {\n      const isCodeFullyEntered =\n        concatenatedValue.length === inputCount &&\n        value.every((v) => v !== \"\") &&\n        inputCount > 0;\n\n      if (!isCodeFullyEntered) return;\n\n      onComplete?.(concatenatedValue);\n\n      if (autoSubmit) {\n        hiddenInputRef.current?.form?.requestSubmit();\n      }\n    }, [concatenatedValue, onComplete, inputCount, autoSubmit]);\n\n    const contextValue = useMemo(\n      () => ({\n        dispatch,\n        value,\n        registerInputRef,\n        name,\n        hiddenInputRef,\n        validation: validationConfig,\n        type,\n        focusedIndex,\n        setFocusedIndex,\n        disabled,\n        inputCount,\n        inputElements: inputElements.current,\n      }),\n      [value, focusedIndex, disabled, name, type, inputCount]\n    );\n\n    return (\n      <AuthCodeContext.Provider value={contextValue}>\n        <div\n          // Delegating all input's paste event this parent handler\n          // because we want to control the paste for all inputs.\n          ref={forwardedRef}\n          onPaste={(event) => {\n            event.preventDefault();\n            const clipboardData = event.clipboardData;\n            const pastedText = clipboardData.getData(\"text/plain\");\n\n            dispatch({ type: \"PASTE\", value: pastedText });\n          }}\n          {...divProps}\n          onCopy={mergeEventHandlers(divProps.onCopy, (event) => {\n            event.preventDefault();\n            event.clipboardData.setData(\"text/plain\", value.join(\"\"));\n          })}\n        >\n          <AuthCodeHiddenInput />\n          {children}\n        </div>\n      </AuthCodeContext.Provider>\n    );\n  }\n);\n\nAuthCodeField.displayName = \"AuthCode.Group\";\n\nconst AuthCodeHiddenInput = forwardRef<\n  HTMLInputElement,\n  Omit<React.ComponentProps<\"input\">, \"ref\">\n>(function AuthCodeHiddenInput(props, ref) {\n  const context = useAuthCodeContext();\n  const { name, value, hiddenInputRef } = context;\n  const memoizedRefs = useCallback(mergeRefs(ref, hiddenInputRef), [\n    ref,\n    hiddenInputRef,\n  ]);\n  return (\n    <input\n      ref={memoizedRefs}\n      name={name}\n      value={value.join(\"\")}\n      autoCapitalize=\"off\"\n      autoCorrect=\"off\"\n      autoSave=\"off\"\n      inputMode=\"numeric\"\n      autoComplete=\"one-time-code\"\n      required\n      {...props}\n      type=\"hidden\"\n    />\n  );\n});\n\nAuthCodeHiddenInput.displayName = \"AuthCode.HiddenInput\";\n\n/**\n * Input component for entering a single character of the auth code.\n *\n * **Must be used within `<AuthCode.Group>`**\n *\n * @example\n *\n * <AuthCode.Group>\n *   <AuthCode.Input index={0} />\n *   <AuthCode.Input index={1} />\n * </AuthCode.Group>\n *  */\nexport function AuthCodeInput({ index, ...props }: AuthCodeInputProps) {\n  const context = useAuthCodeContext();\n  const {\n    dispatch,\n    registerInputRef,\n    validation,\n    focusedIndex,\n    setFocusedIndex,\n    disabled,\n    inputCount,\n    inputElements,\n  } = context;\n\n  const currentCharacter = context.value[index] || \"\";\n  const firstEmptyIndex = Array.from({ length: inputCount }).findIndex(\n    (_, i) => !context.value[i]\n  );\n  const nextEmptyOrLastIndex =\n    firstEmptyIndex === -1 ? inputCount - 1 : firstEmptyIndex;\n  const inputRef = useRef<HTMLInputElement | null>(null);\n  const mergedInputRef = useCallback(mergeRefs(registerInputRef, inputRef), [\n    registerInputRef,\n  ]);\n\n  const inputPosition = inputRef.current\n    ? (inputElements.get(inputRef.current) ?? 0) + 1\n    : index + 1;\n\n  return (\n    <input\n      type={context.type}\n      tabIndex={index === focusedIndex ? 0 : -1}\n      ref={mergedInputRef}\n      inputMode={validation.inputMode}\n      pattern={validation.pattern}\n      aria-label={`One Time Password Character ${inputPosition} out of ${inputCount}`}\n      disabled={disabled}\n      autoComplete=\"off\"\n      autoCorrect=\"off\"\n      autoCapitalize=\"off\"\n      // Disable password managers\n      data-1p-ignore // 1Password\n      data-lpignore=\"true\" // LastPass\n      data-bwignore=\"true\" // Bitwarden\n      data-form-type=\"other\" // Generic password managers\n      {...props}\n      onPointerDown={(event) => {\n        // A click/touch on an input can cause the input to be out of selection so\n        // we must prevent that default action and keep the input selected\n        // in order to have a singular value\n        event.preventDefault();\n        const focusTargetIndex = Math.min(index, nextEmptyOrLastIndex);\n        const focusTargetElement = Array.from(context.inputElements.keys())[\n          focusTargetIndex\n        ];\n        focusInput(focusTargetElement);\n      }}\n      onFocus={(event) => {\n        // select entire input instead of just focus\n        event.target.select();\n        setFocusedIndex(index);\n      }}\n      onInput={(event) => {\n        const newInputValue = event.currentTarget.value;\n\n        // Only treat as paste if it's an actual paste operation or truly long input\n        // Single character duplicates (like \"11\" from typing \"1\" on \"1\") should go through onChange\n        const browserInputType = (event.nativeEvent as InputEvent).inputType;\n        const isPasteOperation =\n          browserInputType === \"insertFromPaste\" ||\n          browserInputType === \"insertFromDrop\";\n        const isLongInput = newInputValue.length > 2;\n\n        if (isPasteOperation || isLongInput) {\n          event.preventDefault();\n          dispatch({ type: \"PASTE\", value: newInputValue });\n        }\n      }}\n      onChange={(event) => {\n        const newInputValue = event.target.value;\n        // check if value is valid against pattern\n        if (event.target.validity.patternMismatch) return;\n        dispatch({ type: \"TYPE_CHAR\", char: newInputValue, index });\n      }}\n      onKeyDown={mergeEventHandlers(props.onKeyDown, (event) => {\n        // onKeyDown describes the intent of the user's key(s) presses\n        if (event.metaKey && event.key == \"c\") return;\n\n        if (\n          isUndoShortcut(event) ||\n          isCopyShortcut(event) ||\n          isRedoShortcut(event)\n        ) {\n          event.preventDefault();\n          return;\n        }\n\n        if ((event.metaKey || event.ctrlKey) && event.key === \"Backspace\") {\n          dispatch({ type: \"CLEAR_ALL\" });\n          return;\n        }\n\n        switch (event.key) {\n          case \"Delete\":\n          case \"Backspace\": {\n            event.preventDefault();\n            dispatch({ type: \"REMOVE_CHAR\", index });\n            return;\n          }\n\n          case \"Enter\": {\n            dispatch({ type: \"SUBMIT_CODE\" });\n            return;\n          }\n\n          case \"ArrowLeft\": {\n            event.preventDefault();\n            dispatch({ type: \"NAVIGATE_PREVIOUS\", index });\n            return;\n          }\n          case \"ArrowRight\": {\n            event.preventDefault();\n            dispatch({ type: \"NAVIGATE_NEXT\", index });\n            return;\n          }\n\n          // Prevents up and down movements from unselecting\n          case \"ArrowUp\":\n          case \"ArrowDown\": {\n            event.preventDefault();\n            return;\n          }\n\n          default:\n            if (event.key === currentCharacter) {\n              // this is essentially focusing the next input\n              dispatch({ type: \"TYPE_CHAR\", char: currentCharacter, index });\n              return;\n            }\n\n            if (event.metaKey || event.ctrlKey) {\n              return;\n            }\n\n            const hasValue = !!event.currentTarget.value;\n            const isFullySelected =\n              event.currentTarget.selectionStart === 0 &&\n              event.currentTarget.selectionEnd != null &&\n              event.currentTarget.selectionEnd > 0;\n\n            // When input has value and is fully selected, validate the incoming key\n            // to prevent selection loss from invalid keystrokes\n            if (hasValue && isFullySelected) {\n              // Only validate printable single characters (ignore modifiers, arrows, etc.)\n              if (event.key.length === 1) {\n                const isValid = validation.regex.test(event.key);\n                if (!isValid) {\n                  event.preventDefault();\n                  return;\n                }\n              }\n            }\n        }\n      })}\n      value={currentCharacter}\n    />\n  );\n}\n\nAuthCodeInput.displayName = \"AuthCode.Input\";\n\n// =================================================\n// CONTEXT\n// =================================================\n\nconst AuthCodeContext = createContext<AuthCodeContextValue | null>(null);\n\nfunction useAuthCodeContext() {\n  const value = useContext(AuthCodeContext);\n  if (!value) {\n    throw new Error(\n      \"\\n[awesome-auth-input] <AuthCode.Input> must be used within <AuthCode.Group>.\\n\\n\" +\n        \"Make sure all <AuthCode.Input> components are children of <AuthCode.Group>:\\n\\n\" +\n        \"Example:\\n\" +\n        \"  <AuthCode.Group>\\n\" +\n        \"    <AuthCode.Input index={0} />\\n\" +\n        \"    <AuthCode.Input index={1} />\\n\" +\n        \"  </AuthCode.Group>\\n\"\n    );\n  }\n  return value;\n}\n\n// =================================================\n// HELPERS & HOOKS\n// =================================================\n\nfunction mergeEventHandlers<E extends { defaultPrevented: boolean }>(\n  currentHandler?: (event: E) => void,\n  nextHandler?: (event: E) => void\n) {\n  return (event: E) => {\n    currentHandler?.(event);\n\n    if (!event.defaultPrevented) {\n      nextHandler?.(event);\n    }\n  };\n}\n\nfunction isUndoShortcut(event: React.KeyboardEvent<HTMLInputElement>): boolean {\n  return (event.metaKey || event.ctrlKey) && event.key === \"z\";\n}\n\nfunction isRedoShortcut(event: React.KeyboardEvent<HTMLInputElement>): boolean {\n  return (\n    (event.metaKey || event.ctrlKey) &&\n    (event.key === \"y\" || (event.shiftKey && event.key === \"z\"))\n  );\n}\n\nfunction isCopyShortcut(event: React.KeyboardEvent<HTMLInputElement>): boolean {\n  return (event.metaKey || event.ctrlKey) && event.key === \"c\";\n}\n\ntype MergedRef<T> = Ref<T> | undefined | null;\nfunction mergeRefs<T = any>(...refs: MergedRef<T>[]): React.RefCallback<T> {\n  return function (node) {\n    refs.forEach((ref) => {\n      if (typeof ref === \"function\") {\n        ref(node);\n      } else if (ref != null) {\n        ref.current = node;\n      }\n    });\n  };\n}\n\nconst focusInput = (element: HTMLInputElement | undefined) => {\n  if (!element) return;\n  if (element.disabled) return;\n\n  // Using ownerDocument.activeElement to check focus correctly across\n  // different document contexts (iframes, popups, shadow DOM)\n  if (element.ownerDocument.activeElement === element) {\n    element.select();\n  } else {\n    element.focus();\n  }\n};\n\nfunction useControllableState<T>({\n  defaultValue,\n  onValueChange,\n  value,\n}: {\n  defaultValue: T;\n  onValueChange?: (value: T) => void;\n  value?: T;\n}): [T, (newValue: T) => void] {\n  const [internalState, setInternalState] = useState<T>(defaultValue);\n\n  const isControlled = value !== undefined;\n  const currentValue = isControlled ? value : internalState;\n\n  const setState = useCallback(\n    (newValue: T) => {\n      if (!isControlled) {\n        setInternalState(newValue);\n      }\n      onValueChange?.(newValue);\n    },\n    [isControlled, onValueChange]\n  );\n\n  return [currentValue, setState];\n}\n\n// =================================================\n// INTERNAL TYPES & CONFIG\n// =================================================\n\ntype InputMode = \"text\" | \"numeric\" | \"none\";\n\ntype ValidationPattern =\n  | ({ type: \"custom\" } & CustomValidation)\n  | { type: \"alpha\" }\n  | { type: \"alphanumeric\" }\n  | { type: \"numeric\" };\n\ntype CustomValidation = {\n  regex: RegExp;\n  pattern: string;\n  inputMode: InputMode;\n};\n\ninterface AuthCodeInputProps\n  extends Omit<\n    React.ComponentProps<\"input\">,\n    | \"value\"\n    | \"placeholder\"\n    | \"disabled\"\n    | \"autoComplete\"\n    | \"defaultValue\"\n    | \"type\"\n  > {\n  index: number;\n}\n\ninterface AuthCodeContextValue {\n  dispatch: React.Dispatch<FieldUpdateAction>;\n  value: string[];\n  registerInputRef: (ref: HTMLInputElement | null) => void;\n  name?: string;\n  hiddenInputRef: Ref<HTMLInputElement | null>;\n  validation:\n    | (typeof defaultPatternInputMap)[DefaultInputTypes]\n    | ({ type: \"custom\" } & CustomValidation);\n  type: \"text\" | \"password\";\n  focusedIndex: number;\n  setFocusedIndex: (index: number) => void;\n  disabled: boolean;\n  inputCount: number;\n  inputElements: Map<HTMLInputElement, number>;\n}\n\ntype DefaultInputTypes = \"alpha\" | \"alphanumeric\" | \"numeric\";\n\nconst numericRegex = /^\\d$/;\nconst alphaNumericRegex = /^[a-zA-Z\\d]$/;\nconst alphaRegex = /^[a-zA-Z]$/;\n\nconst defaultPatternInputMap = {\n  alpha: {\n    type: \"alpha\",\n    regex: alphaRegex,\n    pattern: \"[a-zA-Z]{1}\",\n    inputMode: \"text\",\n  },\n  alphanumeric: {\n    type: \"alphanumeric\",\n    regex: alphaNumericRegex,\n    pattern: \"[a-zA-Z0-9]{1}\",\n    inputMode: \"text\",\n  },\n  numeric: {\n    type: \"numeric\",\n    regex: numericRegex,\n    pattern: \"[0-9]{1}\",\n    inputMode: \"numeric\",\n  },\n} as const;\n\ntype FieldUpdateAction =\n  | {\n      type: \"TYPE_CHAR\";\n      char: string;\n      index: number;\n    }\n  | { type: \"PASTE\"; value: string }\n  | { type: \"REMOVE_CHAR\"; index: number }\n  | { type: \"SUBMIT_CODE\" }\n  | { type: \"CLEAR_CHAR\"; index: number }\n  | { type: \"NAVIGATE_PREVIOUS\"; index: number }\n  | { type: \"NAVIGATE_NEXT\"; index: number }\n  | { type: \"CLEAR_ALL\" };\n\n// =================================================\n// EXPORTS\n// =================================================\n\nexport {\n  AuthCodeField as Group,\n  AuthCodeInput as Input,\n  AuthCodeHiddenInput as HiddenInput,\n};\n\nexport type {\n  AuthCodeFieldProps as AuthCodeGroupProps,\n  AuthCodeInputProps,\n  ValidationPattern,\n  CustomValidation,\n};\n","/**\n * awesome-auth-input\n * A headless, accessible React component for OTP/auth code inputs\n */\n\nimport {\n  Group,\n  Input,\n  HiddenInput,\n} from \"./AuthCode/OneTimePassword\";\n\nexport type {\n  AuthCodeGroupProps,\n  AuthCodeInputProps,\n  ValidationPattern,\n  CustomValidation,\n} from \"./AuthCode/OneTimePassword\";\n\n/**\n * AuthCode - A compound component for OTP/auth code inputs\n *\n * @example\n * ```tsx\n * <AuthCode.Group onComplete={(code) => console.log(code)}>\n *   <AuthCode.Input index={0} />\n *   <AuthCode.Input index={1} />\n *   <AuthCode.Input index={2} />\n *   <AuthCode.Input index={3} />\n * </AuthCode.Group>\n * ```\n */\nconst AuthCode = {\n  /**\n   * The root component that manages state and validation for auth code inputs.\n   * All `<AuthCode.Input>` components must be children of this component.\n   */\n  Group,\n  /**\n   * Individual input field for a single character of the auth code.\n   * Must be used within `<AuthCode.Group>`.\n   */\n  Input,\n  /**\n   * Hidden input that contains the full auth code value for form submission.\n   * Automatically rendered by Group, but can be customized if needed.\n   */\n  HiddenInput,\n};\n\nexport { AuthCode };\n\n// Also export individual components for tree-shaking\nexport { Group as AuthCodeGroup, Input as AuthCodeInput, HiddenInput as AuthCodeHiddenInput };\n\n"],"names":["AuthCodeField","value","AuthCodeHiddenInput","Group","Input","HiddenInput"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "awesome-auth-input",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "A headless, accessible, and fully-typed React component for OTP/auth code inputs with support for numeric, alphabetic, and custom validation patterns.",
   "type": "module",
   "main": "./dist/index.cjs",