otp-auto-fetch-input 0.1.0

package/README.md

@@ -0,0 +1,104 @@
+# otp-auto-fetch-input
+
+Animated OTP input component for React with WebOTP SMS auto-fetch support.
+
+## Install
+
+```bash
+npm install otp-auto-fetch-input
+```
+
+## Usage
+
+```tsx
+import { useState } from "react";
+import { OtpInput } from "otp-auto-fetch-input";
+import "otp-auto-fetch-input/styles.css";
+
+export default function VerifyOtp() {
+  const [otp, setOtp] = useState("");
+
+  return (
+    <OtpInput
+      length={6}
+      value={otp}
+      onChange={(next) => setOtp(next)}
+      onComplete={(code) => {
+        console.log("OTP complete:", code);
+      }}
+      autoFetch
+    />
+  );
+}
+```
+
+## Props
+
+- `length` (default `6`): number of OTP digits.
+- `value`: controlled OTP value.
+- `onChange(nextValue, source)`: triggered on manual/paste/WebOTP fill.
+- `onComplete(otp, source)`: called when all digits are present.
+- `autoFetch` (default `true`): enables WebOTP auto-fetch on supported browsers.
+- `fetchTimeoutMs` (default `60000`): abort timeout for WebOTP listener.
+- `autoFocus` (default `true`): focus first empty digit on mount/update.
+- `allowPaste` (default `true`): allows full OTP paste.
+- `disabled`: disable input.
+- `className`: wrapper class override.
+- `inputClassName`: slot class override.
+- `onError(error)`: receives non-abort WebOTP errors.
+
+## WebOTP Notes
+
+- Works only in secure contexts (`https`) and compatible mobile browsers.
+- SMS should include your domain and OTP, for example:
+
+```text
+Your verification code is 123456.
+
+@example.com #123456
+```
+
+## Semantic Versioning
+
+This package follows SemVer (`MAJOR.MINOR.PATCH`).
+
+- `PATCH`: bug fixes (`0.1.0 -> 0.1.1`)
+- `MINOR`: backward-compatible features (`0.1.0 -> 0.2.0`)
+- `MAJOR`: breaking API changes (`0.1.0 -> 1.0.0`)
+
+Release commands:
+
+```bash
+npm run release:patch
+npm run release:minor
+npm run release:major
+```
+
+Or let `standard-version` infer bump type from commits:
+
+```bash
+npm run release
+```
+
+## Publish Pipeline (GitHub Actions)
+
+Automation files:
+
+- `.github/workflows/ci.yml`: validates build on pull requests and `main` pushes.
+- `.github/workflows/publish.yml`: publishes to npm on `v*.*.*` tag pushes.
+
+Required GitHub secret:
+
+- `NPM_TOKEN`: npm automation token with publish access.
+
+Typical release flow:
+
+```bash
+# 1) Create version + changelog + tag (example patch)
+npm run release:patch
+
+# 2) Push commits and tags
+git push --follow-tags
+```
+
+When the `vX.Y.Z` tag reaches GitHub, publish workflow runs and pushes the package to npm.

package/dist/index.cjs

@@ -0,0 +1,225 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  OtpInput: () => OtpInput,
+  useWebOtp: () => useWebOtp
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/OtpInput.tsx
+var import_react2 = require("react");
+
+// src/useWebOtp.ts
+var import_react = require("react");
+var hasWebOtp = () => {
+  if (typeof window === "undefined") return false;
+  if (!window.isSecureContext) return false;
+  return typeof navigator.credentials?.get === "function";
+};
+var useWebOtp = (enabled, timeoutMs, onCode, onError) => {
+  const abortRef = (0, import_react.useRef)(null);
+  const stop = (0, import_react.useCallback)(() => {
+    abortRef.current?.abort();
+    abortRef.current = null;
+  }, []);
+  const start = (0, import_react.useCallback)(async () => {
+    if (!enabled || !hasWebOtp()) return;
+    stop();
+    const controller = new AbortController();
+    abortRef.current = controller;
+    const timer = setTimeout(() => {
+      controller.abort();
+    }, timeoutMs);
+    try {
+      const credentials = navigator.credentials;
+      const credential = await credentials.get?.({
+        otp: { transport: ["sms"] },
+        signal: controller.signal
+      });
+      if (credential?.code) {
+        onCode({ code: credential.code, source: "webotp" });
+      }
+    } catch (err) {
+      const error = err;
+      if (error.name !== "AbortError") {
+        onError?.(error);
+      }
+    } finally {
+      clearTimeout(timer);
+      abortRef.current = null;
+    }
+  }, [enabled, onCode, onError, stop, timeoutMs]);
+  (0, import_react.useEffect)(() => {
+    if (!enabled) return;
+    void start();
+    return () => {
+      stop();
+    };
+  }, [enabled, start, stop]);
+  return {
+    isSupported: hasWebOtp(),
+    start,
+    stop
+  };
+};
+
+// src/OtpInput.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var isDigit = (value) => /^\d$/.test(value);
+var toSlots = (value, length) => {
+  const normalized = value.replace(/\D/g, "").slice(0, length);
+  return Array.from({ length }, (_, idx) => normalized[idx] ?? "");
+};
+var OtpInput = ({
+  length = 6,
+  value,
+  onChange,
+  onComplete,
+  autoFocus = true,
+  disabled = false,
+  autoFetch = true,
+  fetchTimeoutMs = 6e4,
+  className,
+  inputClassName,
+  allowPaste = true,
+  onError
+}) => {
+  const [enteredIndex, setEnteredIndex] = (0, import_react2.useState)(null);
+  const refs = (0, import_react2.useRef)([]);
+  const slots = (0, import_react2.useMemo)(() => toSlots(value, length), [value, length]);
+  const emitValue = (0, import_react2.useCallback)(
+    (next, source) => {
+      const trimmed = next.replace(/\D/g, "").slice(0, length);
+      onChange(trimmed, source);
+      if (trimmed.length === length) {
+        onComplete?.(trimmed, source);
+      }
+    },
+    [length, onChange, onComplete]
+  );
+  useWebOtp(
+    autoFetch,
+    fetchTimeoutMs,
+    ({ code, source }) => {
+      emitValue(code, source);
+      refs.current[Math.min(code.length, length) - 1]?.blur();
+    },
+    onError
+  );
+  (0, import_react2.useEffect)(() => {
+    if (!autoFocus || disabled) return;
+    const firstEmpty = slots.findIndex((slot) => slot === "");
+    const targetIndex = firstEmpty === -1 ? length - 1 : firstEmpty;
+    refs.current[targetIndex]?.focus();
+  }, [autoFocus, disabled, length, slots]);
+  (0, import_react2.useEffect)(() => {
+    if (enteredIndex === null) return;
+    const timer = setTimeout(() => setEnteredIndex(null), 220);
+    return () => clearTimeout(timer);
+  }, [enteredIndex]);
+  const handleChangeAt = (index, raw) => {
+    if (disabled) return;
+    const nextChar = raw.slice(-1);
+    if (!isDigit(nextChar)) return;
+    const nextSlots = [...slots];
+    nextSlots[index] = nextChar;
+    const nextValue = nextSlots.join("");
+    setEnteredIndex(index);
+    emitValue(nextValue, "manual");
+    const nextIndex = Math.min(index + 1, length - 1);
+    refs.current[nextIndex]?.focus();
+    refs.current[nextIndex]?.select();
+  };
+  const clearAt = (index) => {
+    const nextSlots = [...slots];
+    nextSlots[index] = "";
+    emitValue(nextSlots.join(""), "manual");
+  };
+  const handleKeyDown = (index, event) => {
+    if (disabled) return;
+    if (event.key === "Backspace") {
+      event.preventDefault();
+      if (slots[index]) {
+        clearAt(index);
+        return;
+      }
+      const prev = Math.max(index - 1, 0);
+      clearAt(prev);
+      refs.current[prev]?.focus();
+      return;
+    }
+    if (event.key === "ArrowLeft") {
+      event.preventDefault();
+      refs.current[Math.max(index - 1, 0)]?.focus();
+      return;
+    }
+    if (event.key === "ArrowRight") {
+      event.preventDefault();
+      refs.current[Math.min(index + 1, length - 1)]?.focus();
+      return;
+    }
+    if (event.key.length === 1 && !/\d/.test(event.key)) {
+      event.preventDefault();
+    }
+  };
+  const handlePaste = (event) => {
+    if (!allowPaste || disabled) return;
+    event.preventDefault();
+    const text = event.clipboardData.getData("text").replace(/\D/g, "").slice(0, length);
+    if (!text) return;
+    emitValue(text, "paste");
+    setEnteredIndex(Math.min(text.length - 1, length - 1));
+    const focusIndex = Math.min(text.length, length - 1);
+    refs.current[focusIndex]?.focus();
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: ["otp-root", className].filter(Boolean).join(" "), children: slots.map((digit, index) => {
+    const enteredClass = enteredIndex === index ? "entered" : "";
+    const filledClass = digit ? "filled" : "";
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "input",
+      {
+        ref: (el) => {
+          refs.current[index] = el;
+        },
+        value: digit,
+        disabled,
+        type: "text",
+        maxLength: 1,
+        inputMode: "numeric",
+        pattern: "[0-9]*",
+        autoComplete: index === 0 ? "one-time-code" : "off",
+        className: ["otp-slot", filledClass, enteredClass, inputClassName].filter(Boolean).join(" "),
+        onChange: (e) => handleChangeAt(index, e.target.value),
+        onKeyDown: (e) => handleKeyDown(index, e),
+        onPaste: handlePaste,
+        "aria-label": `OTP digit ${index + 1}`
+      },
+      index
+    );
+  }) });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  OtpInput,
+  useWebOtp
+});
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/OtpInput.tsx","../src/useWebOtp.ts"],"sourcesContent":["export { OtpInput } from \"./OtpInput\";\nexport { useWebOtp } from \"./useWebOtp\";\nexport type { OtpInputProps, OtpAutoFillSource, WebOtpResult } from \"./types\";\n","import React, { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { useWebOtp } from \"./useWebOtp\";\nimport type { OtpAutoFillSource, OtpInputProps } from \"./types\";\n\nconst isDigit = (value: string) => /^\\d$/.test(value);\n\nconst toSlots = (value: string, length: number) => {\n  const normalized = value.replace(/\\D/g, \"\").slice(0, length);\n  return Array.from({ length }, (_, idx) => normalized[idx] ?? \"\");\n};\n\nexport const OtpInput = ({\n  length = 6,\n  value,\n  onChange,\n  onComplete,\n  autoFocus = true,\n  disabled = false,\n  autoFetch = true,\n  fetchTimeoutMs = 60_000,\n  className,\n  inputClassName,\n  allowPaste = true,\n  onError,\n}: OtpInputProps) => {\n  const [enteredIndex, setEnteredIndex] = useState<number | null>(null);\n  const refs = useRef<Array<HTMLInputElement | null>>([]);\n\n  const slots = useMemo(() => toSlots(value, length), [value, length]);\n\n  const emitValue = useCallback(\n    (next: string, source: OtpAutoFillSource) => {\n      const trimmed = next.replace(/\\D/g, \"\").slice(0, length);\n      onChange(trimmed, source);\n      if (trimmed.length === length) {\n        onComplete?.(trimmed, source);\n      }\n    },\n    [length, onChange, onComplete],\n  );\n\n  useWebOtp(\n    autoFetch,\n    fetchTimeoutMs,\n    ({ code, source }) => {\n      emitValue(code, source);\n      refs.current[Math.min(code.length, length) - 1]?.blur();\n    },\n    onError,\n  );\n\n  useEffect(() => {\n    if (!autoFocus || disabled) return;\n    const firstEmpty = slots.findIndex((slot) => slot === \"\");\n    const targetIndex = firstEmpty === -1 ? length - 1 : firstEmpty;\n    refs.current[targetIndex]?.focus();\n  }, [autoFocus, disabled, length, slots]);\n\n  useEffect(() => {\n    if (enteredIndex === null) return;\n    const timer = setTimeout(() => setEnteredIndex(null), 220);\n    return () => clearTimeout(timer);\n  }, [enteredIndex]);\n\n  const handleChangeAt = (index: number, raw: string) => {\n    if (disabled) return;\n    const nextChar = raw.slice(-1);\n    if (!isDigit(nextChar)) return;\n\n    const nextSlots = [...slots];\n    nextSlots[index] = nextChar;\n    const nextValue = nextSlots.join(\"\");\n\n    setEnteredIndex(index);\n    emitValue(nextValue, \"manual\");\n\n    const nextIndex = Math.min(index + 1, length - 1);\n    refs.current[nextIndex]?.focus();\n    refs.current[nextIndex]?.select();\n  };\n\n  const clearAt = (index: number) => {\n    const nextSlots = [...slots];\n    nextSlots[index] = \"\";\n    emitValue(nextSlots.join(\"\"), \"manual\");\n  };\n\n  const handleKeyDown = (index: number, event: React.KeyboardEvent<HTMLInputElement>) => {\n    if (disabled) return;\n\n    if (event.key === \"Backspace\") {\n      event.preventDefault();\n      if (slots[index]) {\n        clearAt(index);\n        return;\n      }\n      const prev = Math.max(index - 1, 0);\n      clearAt(prev);\n      refs.current[prev]?.focus();\n      return;\n    }\n\n    if (event.key === \"ArrowLeft\") {\n      event.preventDefault();\n      refs.current[Math.max(index - 1, 0)]?.focus();\n      return;\n    }\n\n    if (event.key === \"ArrowRight\") {\n      event.preventDefault();\n      refs.current[Math.min(index + 1, length - 1)]?.focus();\n      return;\n    }\n\n    if (event.key.length === 1 && !/\\d/.test(event.key)) {\n      event.preventDefault();\n    }\n  };\n\n  const handlePaste = (event: React.ClipboardEvent<HTMLInputElement>) => {\n    if (!allowPaste || disabled) return;\n    event.preventDefault();\n\n    const text = event.clipboardData.getData(\"text\").replace(/\\D/g, \"\").slice(0, length);\n    if (!text) return;\n\n    emitValue(text, \"paste\");\n    setEnteredIndex(Math.min(text.length - 1, length - 1));\n\n    const focusIndex = Math.min(text.length, length - 1);\n    refs.current[focusIndex]?.focus();\n  };\n\n  return (\n    <div className={[\"otp-root\", className].filter(Boolean).join(\" \")}>\n      {slots.map((digit, index) => {\n        const enteredClass = enteredIndex === index ? \"entered\" : \"\";\n        const filledClass = digit ? \"filled\" : \"\";\n        return (\n          <input\n            key={index}\n            ref={(el) => {\n              refs.current[index] = el;\n            }}\n            value={digit}\n            disabled={disabled}\n            type=\"text\"\n            maxLength={1}\n            inputMode=\"numeric\"\n            pattern=\"[0-9]*\"\n            autoComplete={index === 0 ? \"one-time-code\" : \"off\"}\n            className={[\"otp-slot\", filledClass, enteredClass, inputClassName].filter(Boolean).join(\" \")}\n            onChange={(e) => handleChangeAt(index, e.target.value)}\n            onKeyDown={(e) => handleKeyDown(index, e)}\n            onPaste={handlePaste}\n            aria-label={`OTP digit ${index + 1}`}\n          />\n        );\n      })}\n    </div>\n  );\n};\n","import { useCallback, useEffect, useRef } from \"react\";\nimport type { WebOtpResult } from \"./types\";\n\ninterface OtpCredential extends Credential {\n  code: string;\n}\n\ntype OtpGetOptions = CredentialRequestOptions & {\n  otp?: { transport: string[] };\n};\n\ntype OtpAwareCredentialsContainer = CredentialsContainer & {\n  get: (options?: OtpGetOptions) => Promise<Credential | null>;\n};\n\nconst hasWebOtp = () => {\n  if (typeof window === \"undefined\") return false;\n  if (!window.isSecureContext) return false;\n  return typeof (navigator.credentials as Partial<OtpAwareCredentialsContainer> | undefined)?.get === \"function\";\n};\n\nexport const useWebOtp = (\n  enabled: boolean,\n  timeoutMs: number,\n  onCode: (result: WebOtpResult) => void,\n  onError?: (error: Error) => void,\n) => {\n  const abortRef = useRef<AbortController | null>(null);\n\n  const stop = useCallback(() => {\n    abortRef.current?.abort();\n    abortRef.current = null;\n  }, []);\n\n  const start = useCallback(async () => {\n    if (!enabled || !hasWebOtp()) return;\n\n    stop();\n    const controller = new AbortController();\n    abortRef.current = controller;\n\n    const timer = setTimeout(() => {\n      controller.abort();\n    }, timeoutMs);\n\n    try {\n      const credentials = navigator.credentials as OtpAwareCredentialsContainer;\n      const credential = (await credentials.get?.({\n        otp: { transport: [\"sms\"] },\n        signal: controller.signal,\n      })) as OtpCredential | null;\n\n      if (credential?.code) {\n        onCode({ code: credential.code, source: \"webotp\" });\n      }\n    } catch (err) {\n      const error = err as Error;\n      if (error.name !== \"AbortError\") {\n        onError?.(error);\n      }\n    } finally {\n      clearTimeout(timer);\n      abortRef.current = null;\n    }\n  }, [enabled, onCode, onError, stop, timeoutMs]);\n\n  useEffect(() => {\n    if (!enabled) return;\n    void start();\n    return () => {\n      stop();\n    };\n  }, [enabled, start, stop]);\n\n  return {\n    isSupported: hasWebOtp(),\n    start,\n    stop,\n  };\n};\n"],"mappings":"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","names":["import_react"]}

package/dist/index.d.cts

@@ -0,0 +1,31 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type OtpAutoFillSource = "manual" | "paste" | "webotp";
+interface OtpInputProps {
+    length?: number;
+    value: string;
+    onChange: (nextValue: string, source?: OtpAutoFillSource) => void;
+    onComplete?: (otp: string, source?: OtpAutoFillSource) => void;
+    autoFocus?: boolean;
+    disabled?: boolean;
+    autoFetch?: boolean;
+    fetchTimeoutMs?: number;
+    className?: string;
+    inputClassName?: string;
+    allowPaste?: boolean;
+    onError?: (error: Error) => void;
+}
+interface WebOtpResult {
+    code: string;
+    source: OtpAutoFillSource;
+}
+
+declare const OtpInput: ({ length, value, onChange, onComplete, autoFocus, disabled, autoFetch, fetchTimeoutMs, className, inputClassName, allowPaste, onError, }: OtpInputProps) => react_jsx_runtime.JSX.Element;
+
+declare const useWebOtp: (enabled: boolean, timeoutMs: number, onCode: (result: WebOtpResult) => void, onError?: (error: Error) => void) => {
+    isSupported: boolean;
+    start: () => Promise<void>;
+    stop: () => void;
+};
+
+export { type OtpAutoFillSource, OtpInput, type OtpInputProps, type WebOtpResult, useWebOtp };

package/dist/index.d.ts

@@ -0,0 +1,31 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type OtpAutoFillSource = "manual" | "paste" | "webotp";
+interface OtpInputProps {
+    length?: number;
+    value: string;
+    onChange: (nextValue: string, source?: OtpAutoFillSource) => void;
+    onComplete?: (otp: string, source?: OtpAutoFillSource) => void;
+    autoFocus?: boolean;
+    disabled?: boolean;
+    autoFetch?: boolean;
+    fetchTimeoutMs?: number;
+    className?: string;
+    inputClassName?: string;
+    allowPaste?: boolean;
+    onError?: (error: Error) => void;
+}
+interface WebOtpResult {
+    code: string;
+    source: OtpAutoFillSource;
+}
+
+declare const OtpInput: ({ length, value, onChange, onComplete, autoFocus, disabled, autoFetch, fetchTimeoutMs, className, inputClassName, allowPaste, onError, }: OtpInputProps) => react_jsx_runtime.JSX.Element;
+
+declare const useWebOtp: (enabled: boolean, timeoutMs: number, onCode: (result: WebOtpResult) => void, onError?: (error: Error) => void) => {
+    isSupported: boolean;
+    start: () => Promise<void>;
+    stop: () => void;
+};
+
+export { type OtpAutoFillSource, OtpInput, type OtpInputProps, type WebOtpResult, useWebOtp };

package/dist/index.js

@@ -0,0 +1,197 @@
+// src/OtpInput.tsx
+import { useCallback as useCallback2, useEffect as useEffect2, useMemo, useRef as useRef2, useState } from "react";
+
+// src/useWebOtp.ts
+import { useCallback, useEffect, useRef } from "react";
+var hasWebOtp = () => {
+  if (typeof window === "undefined") return false;
+  if (!window.isSecureContext) return false;
+  return typeof navigator.credentials?.get === "function";
+};
+var useWebOtp = (enabled, timeoutMs, onCode, onError) => {
+  const abortRef = useRef(null);
+  const stop = useCallback(() => {
+    abortRef.current?.abort();
+    abortRef.current = null;
+  }, []);
+  const start = useCallback(async () => {
+    if (!enabled || !hasWebOtp()) return;
+    stop();
+    const controller = new AbortController();
+    abortRef.current = controller;
+    const timer = setTimeout(() => {
+      controller.abort();
+    }, timeoutMs);
+    try {
+      const credentials = navigator.credentials;
+      const credential = await credentials.get?.({
+        otp: { transport: ["sms"] },
+        signal: controller.signal
+      });
+      if (credential?.code) {
+        onCode({ code: credential.code, source: "webotp" });
+      }
+    } catch (err) {
+      const error = err;
+      if (error.name !== "AbortError") {
+        onError?.(error);
+      }
+    } finally {
+      clearTimeout(timer);
+      abortRef.current = null;
+    }
+  }, [enabled, onCode, onError, stop, timeoutMs]);
+  useEffect(() => {
+    if (!enabled) return;
+    void start();
+    return () => {
+      stop();
+    };
+  }, [enabled, start, stop]);
+  return {
+    isSupported: hasWebOtp(),
+    start,
+    stop
+  };
+};
+
+// src/OtpInput.tsx
+import { jsx } from "react/jsx-runtime";
+var isDigit = (value) => /^\d$/.test(value);
+var toSlots = (value, length) => {
+  const normalized = value.replace(/\D/g, "").slice(0, length);
+  return Array.from({ length }, (_, idx) => normalized[idx] ?? "");
+};
+var OtpInput = ({
+  length = 6,
+  value,
+  onChange,
+  onComplete,
+  autoFocus = true,
+  disabled = false,
+  autoFetch = true,
+  fetchTimeoutMs = 6e4,
+  className,
+  inputClassName,
+  allowPaste = true,
+  onError
+}) => {
+  const [enteredIndex, setEnteredIndex] = useState(null);
+  const refs = useRef2([]);
+  const slots = useMemo(() => toSlots(value, length), [value, length]);
+  const emitValue = useCallback2(
+    (next, source) => {
+      const trimmed = next.replace(/\D/g, "").slice(0, length);
+      onChange(trimmed, source);
+      if (trimmed.length === length) {
+        onComplete?.(trimmed, source);
+      }
+    },
+    [length, onChange, onComplete]
+  );
+  useWebOtp(
+    autoFetch,
+    fetchTimeoutMs,
+    ({ code, source }) => {
+      emitValue(code, source);
+      refs.current[Math.min(code.length, length) - 1]?.blur();
+    },
+    onError
+  );
+  useEffect2(() => {
+    if (!autoFocus || disabled) return;
+    const firstEmpty = slots.findIndex((slot) => slot === "");
+    const targetIndex = firstEmpty === -1 ? length - 1 : firstEmpty;
+    refs.current[targetIndex]?.focus();
+  }, [autoFocus, disabled, length, slots]);
+  useEffect2(() => {
+    if (enteredIndex === null) return;
+    const timer = setTimeout(() => setEnteredIndex(null), 220);
+    return () => clearTimeout(timer);
+  }, [enteredIndex]);
+  const handleChangeAt = (index, raw) => {
+    if (disabled) return;
+    const nextChar = raw.slice(-1);
+    if (!isDigit(nextChar)) return;
+    const nextSlots = [...slots];
+    nextSlots[index] = nextChar;
+    const nextValue = nextSlots.join("");
+    setEnteredIndex(index);
+    emitValue(nextValue, "manual");
+    const nextIndex = Math.min(index + 1, length - 1);
+    refs.current[nextIndex]?.focus();
+    refs.current[nextIndex]?.select();
+  };
+  const clearAt = (index) => {
+    const nextSlots = [...slots];
+    nextSlots[index] = "";
+    emitValue(nextSlots.join(""), "manual");
+  };
+  const handleKeyDown = (index, event) => {
+    if (disabled) return;
+    if (event.key === "Backspace") {
+      event.preventDefault();
+      if (slots[index]) {
+        clearAt(index);
+        return;
+      }
+      const prev = Math.max(index - 1, 0);
+      clearAt(prev);
+      refs.current[prev]?.focus();
+      return;
+    }
+    if (event.key === "ArrowLeft") {
+      event.preventDefault();
+      refs.current[Math.max(index - 1, 0)]?.focus();
+      return;
+    }
+    if (event.key === "ArrowRight") {
+      event.preventDefault();
+      refs.current[Math.min(index + 1, length - 1)]?.focus();
+      return;
+    }
+    if (event.key.length === 1 && !/\d/.test(event.key)) {
+      event.preventDefault();
+    }
+  };
+  const handlePaste = (event) => {
+    if (!allowPaste || disabled) return;
+    event.preventDefault();
+    const text = event.clipboardData.getData("text").replace(/\D/g, "").slice(0, length);
+    if (!text) return;
+    emitValue(text, "paste");
+    setEnteredIndex(Math.min(text.length - 1, length - 1));
+    const focusIndex = Math.min(text.length, length - 1);
+    refs.current[focusIndex]?.focus();
+  };
+  return /* @__PURE__ */ jsx("div", { className: ["otp-root", className].filter(Boolean).join(" "), children: slots.map((digit, index) => {
+    const enteredClass = enteredIndex === index ? "entered" : "";
+    const filledClass = digit ? "filled" : "";
+    return /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: (el) => {
+          refs.current[index] = el;
+        },
+        value: digit,
+        disabled,
+        type: "text",
+        maxLength: 1,
+        inputMode: "numeric",
+        pattern: "[0-9]*",
+        autoComplete: index === 0 ? "one-time-code" : "off",
+        className: ["otp-slot", filledClass, enteredClass, inputClassName].filter(Boolean).join(" "),
+        onChange: (e) => handleChangeAt(index, e.target.value),
+        onKeyDown: (e) => handleKeyDown(index, e),
+        onPaste: handlePaste,
+        "aria-label": `OTP digit ${index + 1}`
+      },
+      index
+    );
+  }) });
+};
+export {
+  OtpInput,
+  useWebOtp
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/OtpInput.tsx","../src/useWebOtp.ts"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useRef, useState } from \"react\";\nimport { useWebOtp } from \"./useWebOtp\";\nimport type { OtpAutoFillSource, OtpInputProps } from \"./types\";\n\nconst isDigit = (value: string) => /^\\d$/.test(value);\n\nconst toSlots = (value: string, length: number) => {\n  const normalized = value.replace(/\\D/g, \"\").slice(0, length);\n  return Array.from({ length }, (_, idx) => normalized[idx] ?? \"\");\n};\n\nexport const OtpInput = ({\n  length = 6,\n  value,\n  onChange,\n  onComplete,\n  autoFocus = true,\n  disabled = false,\n  autoFetch = true,\n  fetchTimeoutMs = 60_000,\n  className,\n  inputClassName,\n  allowPaste = true,\n  onError,\n}: OtpInputProps) => {\n  const [enteredIndex, setEnteredIndex] = useState<number | null>(null);\n  const refs = useRef<Array<HTMLInputElement | null>>([]);\n\n  const slots = useMemo(() => toSlots(value, length), [value, length]);\n\n  const emitValue = useCallback(\n    (next: string, source: OtpAutoFillSource) => {\n      const trimmed = next.replace(/\\D/g, \"\").slice(0, length);\n      onChange(trimmed, source);\n      if (trimmed.length === length) {\n        onComplete?.(trimmed, source);\n      }\n    },\n    [length, onChange, onComplete],\n  );\n\n  useWebOtp(\n    autoFetch,\n    fetchTimeoutMs,\n    ({ code, source }) => {\n      emitValue(code, source);\n      refs.current[Math.min(code.length, length) - 1]?.blur();\n    },\n    onError,\n  );\n\n  useEffect(() => {\n    if (!autoFocus || disabled) return;\n    const firstEmpty = slots.findIndex((slot) => slot === \"\");\n    const targetIndex = firstEmpty === -1 ? length - 1 : firstEmpty;\n    refs.current[targetIndex]?.focus();\n  }, [autoFocus, disabled, length, slots]);\n\n  useEffect(() => {\n    if (enteredIndex === null) return;\n    const timer = setTimeout(() => setEnteredIndex(null), 220);\n    return () => clearTimeout(timer);\n  }, [enteredIndex]);\n\n  const handleChangeAt = (index: number, raw: string) => {\n    if (disabled) return;\n    const nextChar = raw.slice(-1);\n    if (!isDigit(nextChar)) return;\n\n    const nextSlots = [...slots];\n    nextSlots[index] = nextChar;\n    const nextValue = nextSlots.join(\"\");\n\n    setEnteredIndex(index);\n    emitValue(nextValue, \"manual\");\n\n    const nextIndex = Math.min(index + 1, length - 1);\n    refs.current[nextIndex]?.focus();\n    refs.current[nextIndex]?.select();\n  };\n\n  const clearAt = (index: number) => {\n    const nextSlots = [...slots];\n    nextSlots[index] = \"\";\n    emitValue(nextSlots.join(\"\"), \"manual\");\n  };\n\n  const handleKeyDown = (index: number, event: React.KeyboardEvent<HTMLInputElement>) => {\n    if (disabled) return;\n\n    if (event.key === \"Backspace\") {\n      event.preventDefault();\n      if (slots[index]) {\n        clearAt(index);\n        return;\n      }\n      const prev = Math.max(index - 1, 0);\n      clearAt(prev);\n      refs.current[prev]?.focus();\n      return;\n    }\n\n    if (event.key === \"ArrowLeft\") {\n      event.preventDefault();\n      refs.current[Math.max(index - 1, 0)]?.focus();\n      return;\n    }\n\n    if (event.key === \"ArrowRight\") {\n      event.preventDefault();\n      refs.current[Math.min(index + 1, length - 1)]?.focus();\n      return;\n    }\n\n    if (event.key.length === 1 && !/\\d/.test(event.key)) {\n      event.preventDefault();\n    }\n  };\n\n  const handlePaste = (event: React.ClipboardEvent<HTMLInputElement>) => {\n    if (!allowPaste || disabled) return;\n    event.preventDefault();\n\n    const text = event.clipboardData.getData(\"text\").replace(/\\D/g, \"\").slice(0, length);\n    if (!text) return;\n\n    emitValue(text, \"paste\");\n    setEnteredIndex(Math.min(text.length - 1, length - 1));\n\n    const focusIndex = Math.min(text.length, length - 1);\n    refs.current[focusIndex]?.focus();\n  };\n\n  return (\n    <div className={[\"otp-root\", className].filter(Boolean).join(\" \")}>\n      {slots.map((digit, index) => {\n        const enteredClass = enteredIndex === index ? \"entered\" : \"\";\n        const filledClass = digit ? \"filled\" : \"\";\n        return (\n          <input\n            key={index}\n            ref={(el) => {\n              refs.current[index] = el;\n            }}\n            value={digit}\n            disabled={disabled}\n            type=\"text\"\n            maxLength={1}\n            inputMode=\"numeric\"\n            pattern=\"[0-9]*\"\n            autoComplete={index === 0 ? \"one-time-code\" : \"off\"}\n            className={[\"otp-slot\", filledClass, enteredClass, inputClassName].filter(Boolean).join(\" \")}\n            onChange={(e) => handleChangeAt(index, e.target.value)}\n            onKeyDown={(e) => handleKeyDown(index, e)}\n            onPaste={handlePaste}\n            aria-label={`OTP digit ${index + 1}`}\n          />\n        );\n      })}\n    </div>\n  );\n};\n","import { useCallback, useEffect, useRef } from \"react\";\nimport type { WebOtpResult } from \"./types\";\n\ninterface OtpCredential extends Credential {\n  code: string;\n}\n\ntype OtpGetOptions = CredentialRequestOptions & {\n  otp?: { transport: string[] };\n};\n\ntype OtpAwareCredentialsContainer = CredentialsContainer & {\n  get: (options?: OtpGetOptions) => Promise<Credential | null>;\n};\n\nconst hasWebOtp = () => {\n  if (typeof window === \"undefined\") return false;\n  if (!window.isSecureContext) return false;\n  return typeof (navigator.credentials as Partial<OtpAwareCredentialsContainer> | undefined)?.get === \"function\";\n};\n\nexport const useWebOtp = (\n  enabled: boolean,\n  timeoutMs: number,\n  onCode: (result: WebOtpResult) => void,\n  onError?: (error: Error) => void,\n) => {\n  const abortRef = useRef<AbortController | null>(null);\n\n  const stop = useCallback(() => {\n    abortRef.current?.abort();\n    abortRef.current = null;\n  }, []);\n\n  const start = useCallback(async () => {\n    if (!enabled || !hasWebOtp()) return;\n\n    stop();\n    const controller = new AbortController();\n    abortRef.current = controller;\n\n    const timer = setTimeout(() => {\n      controller.abort();\n    }, timeoutMs);\n\n    try {\n      const credentials = navigator.credentials as OtpAwareCredentialsContainer;\n      const credential = (await credentials.get?.({\n        otp: { transport: [\"sms\"] },\n        signal: controller.signal,\n      })) as OtpCredential | null;\n\n      if (credential?.code) {\n        onCode({ code: credential.code, source: \"webotp\" });\n      }\n    } catch (err) {\n      const error = err as Error;\n      if (error.name !== \"AbortError\") {\n        onError?.(error);\n      }\n    } finally {\n      clearTimeout(timer);\n      abortRef.current = null;\n    }\n  }, [enabled, onCode, onError, stop, timeoutMs]);\n\n  useEffect(() => {\n    if (!enabled) return;\n    void start();\n    return () => {\n      stop();\n    };\n  }, [enabled, start, stop]);\n\n  return {\n    isSupported: hasWebOtp(),\n    start,\n    stop,\n  };\n};\n"],"mappings":"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","names":["useCallback","useEffect","useRef","useRef","useCallback","useEffect"]}

package/dist/styles.css

@@ -0,0 +1,42 @@
+.otp-root {
+  display: flex;
+  gap: 0.6rem;
+  align-items: center;
+}
+
+.otp-slot {
+  width: 2.75rem;
+  height: 3.2rem;
+  border: 1px solid #c9ced6;
+  border-radius: 0.65rem;
+  text-align: center;
+  font-size: 1.35rem;
+  font-weight: 600;
+  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
+}
+
+.otp-slot:focus {
+  border-color: #0e7490;
+  box-shadow: 0 0 0 3px rgba(14, 116, 144, 0.2);
+  outline: none;
+}
+
+.otp-slot.filled {
+  border-color: #1d4ed8;
+}
+
+.otp-slot.entered {
+  animation: otp-pop 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
+}
+
+@keyframes otp-pop {
+  0% {
+    transform: scale(0.92);
+  }
+  55% {
+    transform: scale(1.08);
+  }
+  100% {
+    transform: scale(1);
+  }
+}

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "otp-auto-fetch-input",
+  "version": "0.1.0",
+  "description": "Animated OTP input for React with WebOTP auto-fetch support",
+  "license": "MIT",
+  "type": "module",
+  "main": "dist/index.cjs",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./styles.css": "./dist/styles.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup && cp src/styles.css dist/styles.css",
+    "dev": "tsup --watch",
+    "clean": "rm -rf dist",
+    "verify": "npm run clean && npm run build",
+    "release": "standard-version",
+    "release:patch": "standard-version --release-as patch",
+    "release:minor": "standard-version --release-as minor",
+    "release:major": "standard-version --release-as major",
+    "prepublishOnly": "npm run build",
+    "publish:public": "npm publish --access public"
+  },
+  "keywords": [
+    "otp",
+    "react",
+    "webotp",
+    "one-time-password",
+    "2fa",
+    "input"
+  ],
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
+    "standard-version": "^9.5.0",
+    "tsup": "^8.4.0",
+    "typescript": "^5.7.3"
+  }
+}