@siamf/otp-timer 4.0.1 → 4.5.0

package/README.md

@@ -9,7 +9,7 @@
 
 # @siamf/otp-timer
 
-A simple and customizable react otp timer component with typescript support. very simple and more customizable design and smallest bundle size about 13kb. You can use this component into any react and nextjs projects.
+A simple and customizable react otp timer & input component with typescript support. very simple and more customizable design and smallest bundle size. You can use this component into any react and nextjs projects.
 
 <a href="https://www.buymeacoffee.com/siamahnaf" target="_blank"><img src="https://cdn.buymeacoffee.com/buttons/v2/default-yellow.png" alt="Buy Me A Coffee" style="height: 60px !important;width: 217px !important;" ></a>
 
@@ -17,6 +17,7 @@ A simple and customizable react otp timer component with typescript support. ver
 - Customizable
 - TypeScript Support
 - Smallest Bundle Size(About 13kb)
+- Otp Timer & Otp Input Component
 
 
 ## Installation
@@ -31,6 +32,8 @@ $ npm i @siamf/otp-timer
 
 ## Usage?
 
+### `OtpTimer` Component
+
 ```javascript
 import { Otptimer } from "@siamf/otp-timer";
 
@@ -50,7 +53,32 @@ const MyComponent = () => {
 export default MyComponent;
 ```
 
-## Options
+### `OtpInput` Component
+
+```javascript
+import { useState } from "react";
+import { OtpInput } from "@siamf/otp-timer";
+
+export default function App() {
+  const [otp, setOtp] = useState<string>(");
+
+  return (
+    <OtpInput
+      value={otp}
+      onChange={setOtp}
+      numInputs={4}
+      renderSeparator={<span>-</span>}
+      renderInput={(props) => <input {...props} />}
+    />
+  );
+}
+```
+
+# Customization
+
+## `OtpTimer` component
+
+### Options
 
 |name|Description|Default Value|
 |:---:| :-------------:|:-----------:|
@@ -64,7 +92,7 @@ export default MyComponent;
 |spinnerComponent|Your custom spinner component for render|null|
 
 
-## Styling
+### Styling
 
 <table>
   <tr>
@@ -124,6 +152,113 @@ export default MyComponent;
   </tr>
 </table>
 
+## `OtpInput` component
+
+<table>
+  <tr>
+    <th>Name<br/></th>
+    <th>Type</th>
+    <th>Required</th>
+    <th>Default</th>
+    <th>Description</th>
+  </tr>
+  <tr>
+    <td>numInputs</td>
+    <td>number</td>
+    <td>true</td>
+    <td>4</td>
+    <td>Number of OTP inputs to be rendered.</td>
+  </tr>
+  <tr>
+    <td>renderInput</td>
+    <td>function</td>
+    <td>true</td>
+    <td>none</td>
+    <td>A function that returns the input that is supposed to be rendered for each of the input fields. 
+      The function will get two arguments: <code>inputProps</code> and <code>index</code>. <code>inputProps</code> is an object that contains all the props <b>that should be passed to the input being rendered</b> (Overriding these props is not recommended because it might lead to some unexpected behaviour). <code>index</code> is the index of the input being rendered.
+    </td>
+  </tr>
+  <tr>
+    <td>onChange</td>
+    <td>function</td>
+    <td>true</td>
+    <td>console.log</td>
+    <td>Returns OTP code typed in inputs.</td>
+  </tr>
+  <tr>
+    <td>onPaste</td>
+    <td>function</td>
+    <td>false</td>
+    <td>none</td>
+    <td>Provide a custom onPaste event handler scoped to the OTP inputs container. Executes when content is pasted into any OTP field.
+    </br></br>
+    Example:
+    <pre>
+const handlePaste: React.ClipboardEventHandler<HTMLDivElement> = (event) => {
+  const data = event.clipboardData.getData('text');
+  console.log(data)
+};</pre>
+
+  </td>
+  </tr>
+  <tr>
+    <td>value</td>
+    <td>string / number</td>
+    <td>true</td>
+    <td>''</td>
+    <td>The value of the OTP passed into the component.</td>
+  </tr>
+    <tr>
+     <td>placeholder</td>
+     <td>string</td>
+     <td>false</td>
+     <td>none</td>
+     <td>Specify an expected value of each input. The length of this string should be equal to <code>numInputs</code>.</td>
+   </tr>
+  <tr>
+    <td>renderSeparator</td>
+    <td>component / function<br/></td>
+    <td>false</td>
+    <td>none</td>
+    <td>Provide a custom separator between inputs by passing a component. For instance, <code>&lt;span&gt;-&lt;/span&gt;</code> would add <code>-</code> between each input.</td> You can also pass a function that returns a component, where the function will get the index of the separator being rendered as an argument.
+  </tr>
+  <tr>
+    <td>containerStyle</td>
+    <td>style (object) / className (string)</td>
+    <td>false</td>
+    <td>none</td>
+    <td>Style applied or class passed to container of inputs.</td>
+  </tr>
+  <tr>
+    <td>inputStyle</td>
+    <td>style (object) / className (string)</td>
+    <td>false</td>
+    <td>none</td>
+    <td>Style applied or class passed to each input.</td>
+  </tr>
+  <tr>
+    <td>inputType</td>
+    <td><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input#input_types">&lt;input&gt; type<a></td>
+    <td>false</td>
+    <td>text</td>
+    <td>The type of the input that will be passed to the input element being rendered. In v2 <code>isInputNum</code> used to set the input type as <code>tel</code> and prevented non numerical entries, so as to avoid the spin buttons added to the inputs with input type <code>number</code>. That behaviour is still supported if you pass <code>tel</code> to the inputType prop.</td>
+  </tr>
+  <tr>
+    <td>shouldAutoFocus</td>
+    <td>boolean</td>
+    <td>false</td>
+    <td>false</td>
+    <td>Auto focuses input on initial page load.</td>
+  </tr>
+  <tr>
+    <td>skipDefaultStyles</td>
+    <td>boolean</td>
+    <td>false</td>
+    <td>false</td>
+    <td>The component comes with default styles for legacy reasons. Pass <code>true</code> to skip those styles. This prop will be removed in the next major release.</td>
+  </tr>
+</table>
+
 ## Issues
 
 You are welcome to create an issue.

package/dist/cjs/components/OtpInput.d.ts

@@ -0,0 +1,25 @@
+import React from "react";
+type AllowedInputTypes = "password" | "text" | "number" | "tel";
+type InputProps = Required<Pick<React.InputHTMLAttributes<HTMLInputElement>, "value" | "onChange" | "onFocus" | "onBlur" | "onKeyDown" | "onPaste" | "aria-label" | "autoComplete" | "style" | "inputMode" | "onInput"> & {
+    ref: React.RefCallback<HTMLInputElement>;
+    placeholder: string | undefined;
+    className: string | undefined;
+    type: AllowedInputTypes;
+}>;
+interface OTPInputProps {
+    value?: string;
+    numInputs?: number;
+    onChange: (otp: string) => void;
+    onPaste?: (event: React.ClipboardEvent<HTMLDivElement>) => void;
+    renderInput: (inputProps: InputProps, index: number) => React.ReactNode;
+    shouldAutoFocus?: boolean;
+    placeholder?: string;
+    renderSeparator?: ((index: number) => React.ReactNode) | React.ReactNode;
+    containerStyle?: React.CSSProperties | string;
+    inputStyle?: React.CSSProperties | string;
+    inputType?: AllowedInputTypes;
+    skipDefaultStyles?: boolean;
+}
+declare const OtpInput: ({ value, numInputs, onChange, onPaste, renderInput, shouldAutoFocus, inputType, renderSeparator, placeholder, containerStyle, inputStyle, skipDefaultStyles, }: OTPInputProps) => import("react/jsx-runtime").JSX.Element;
+export type { OTPInputProps, InputProps, AllowedInputTypes };
+export default OtpInput;

package/dist/cjs/components/OtpInput.js

@@ -0,0 +1,167 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const isStyleObject = (obj) => typeof obj === "object" && obj !== null;
+const OtpInput = ({ value = "", numInputs = 4, onChange, onPaste, renderInput, shouldAutoFocus = false, inputType = "text", renderSeparator, placeholder, containerStyle, inputStyle, skipDefaultStyles = false, }) => {
+    const [activeInput, setActiveInput] = react_1.default.useState(0);
+    const inputRefs = react_1.default.useRef([]);
+    const getOTPValue = () => (value ? value.toString().split("") : []);
+    const isInputNum = inputType === "number" || inputType === "tel";
+    react_1.default.useEffect(() => {
+        inputRefs.current = inputRefs.current.slice(0, numInputs);
+    }, [numInputs]);
+    react_1.default.useEffect(() => {
+        var _a;
+        if (shouldAutoFocus) {
+            (_a = inputRefs.current[0]) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    }, [shouldAutoFocus]);
+    const getPlaceholderValue = () => {
+        if (typeof placeholder === "string") {
+            if (placeholder.length === numInputs) {
+                return placeholder;
+            }
+            if (placeholder.length > 0) {
+                console.error("Length of the placeholder should be equal to the number of inputs.");
+            }
+        }
+        return undefined;
+    };
+    const isInputValueValid = (value) => {
+        const isTypeValid = isInputNum ? !isNaN(Number(value)) : typeof value === "string";
+        return isTypeValid && value.trim().length === 1;
+    };
+    const handleChange = (event) => {
+        const { value } = event.target;
+        if (isInputValueValid(value)) {
+            changeCodeAtFocus(value);
+            focusInput(activeInput + 1);
+        }
+    };
+    const handleInputChange = (event) => {
+        const { nativeEvent } = event;
+        const value = event.target.value;
+        if (!isInputValueValid(value)) {
+            if (value.length === numInputs) {
+                const hasInvalidInput = value.split("").some((cellInput) => !isInputValueValid(cellInput));
+                if (!hasInvalidInput) {
+                    handleOTPChange(value.split(""));
+                    focusInput(numInputs - 1);
+                }
+            }
+            // @ts-expect-error - This was added previously to handle and edge case
+            // for dealing with keyCode "229 Unidentified" on Android. Check if this is
+            // still needed.
+            if (nativeEvent.data === null && nativeEvent.inputType === "deleteContentBackward") {
+                event.preventDefault();
+                changeCodeAtFocus("");
+                focusInput(activeInput - 1);
+            }
+            event.target.value = "";
+        }
+    };
+    const handleFocus = (event) => (index) => {
+        setActiveInput(index);
+        event.target.select();
+    };
+    const handleBlur = () => {
+        setActiveInput(activeInput - 1);
+    };
+    const handleKeyDown = (event) => {
+        const otp = getOTPValue();
+        if ([event.code, event.key].includes("Backspace")) {
+            event.preventDefault();
+            changeCodeAtFocus("");
+            focusInput(activeInput - 1);
+        }
+        else if (event.code === "Delete") {
+            event.preventDefault();
+            changeCodeAtFocus("");
+        }
+        else if (event.code === "ArrowLeft") {
+            event.preventDefault();
+            focusInput(activeInput - 1);
+        }
+        else if (event.code === "ArrowRight") {
+            event.preventDefault();
+            focusInput(activeInput + 1);
+        }
+        else if (event.key === otp[activeInput]) {
+            event.preventDefault();
+            focusInput(activeInput + 1);
+        }
+        else if (event.code === "Spacebar" ||
+            event.code === "Space" ||
+            event.code === "ArrowUp" ||
+            event.code === "ArrowDown") {
+            event.preventDefault();
+        }
+    };
+    const focusInput = (index) => {
+        var _a, _b;
+        const activeInput = Math.max(Math.min(numInputs - 1, index), 0);
+        if (inputRefs.current[activeInput]) {
+            (_a = inputRefs.current[activeInput]) === null || _a === void 0 ? void 0 : _a.focus();
+            (_b = inputRefs.current[activeInput]) === null || _b === void 0 ? void 0 : _b.select();
+            setActiveInput(activeInput);
+        }
+    };
+    const changeCodeAtFocus = (value) => {
+        const otp = getOTPValue();
+        otp[activeInput] = value[0];
+        handleOTPChange(otp);
+    };
+    const handleOTPChange = (otp) => {
+        const otpValue = otp.join("");
+        onChange(otpValue);
+    };
+    const handlePaste = (event) => {
+        var _a;
+        event.preventDefault();
+        const otp = getOTPValue();
+        let nextActiveInput = activeInput;
+        const pastedData = event.clipboardData
+            .getData("text/plain")
+            .slice(0, numInputs - activeInput)
+            .split("");
+        if (isInputNum && pastedData.some((value) => isNaN(Number(value)))) {
+            return;
+        }
+        for (let pos = 0; pos < numInputs; ++pos) {
+            if (pos >= activeInput && pastedData.length > 0) {
+                otp[pos] = (_a = pastedData.shift()) !== null && _a !== void 0 ? _a : "";
+                nextActiveInput++;
+            }
+        }
+        focusInput(nextActiveInput);
+        handleOTPChange(otp);
+    };
+    return ((0, jsx_runtime_1.jsx)("div", { style: Object.assign({ display: "flex", alignItems: "center" }, isStyleObject(containerStyle) && containerStyle), className: typeof containerStyle === "string" ? containerStyle : undefined, onPaste: onPaste, children: Array.from({ length: numInputs }, (_, index) => index).map((index) => {
+            var _a, _b, _c;
+            return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [renderInput({
+                        value: (_a = getOTPValue()[index]) !== null && _a !== void 0 ? _a : "",
+                        placeholder: (_c = (_b = getPlaceholderValue()) === null || _b === void 0 ? void 0 : _b[index]) !== null && _c !== void 0 ? _c : undefined,
+                        ref: (element) => {
+                            inputRefs.current[index] = element;
+                        },
+                        onChange: handleChange,
+                        onFocus: (event) => handleFocus(event)(index),
+                        onBlur: handleBlur,
+                        onKeyDown: handleKeyDown,
+                        onPaste: handlePaste,
+                        autoComplete: "off",
+                        "aria-label": `Please enter OTP character ${index + 1}`,
+                        style: Object.assign(!skipDefaultStyles ? { width: "1em", textAlign: "center" } : {}, isStyleObject(inputStyle) ? inputStyle : {}),
+                        className: typeof inputStyle === "string" ? inputStyle : undefined,
+                        type: inputType,
+                        inputMode: isInputNum ? "numeric" : "text",
+                        onInput: handleInputChange,
+                    }, index), index < numInputs - 1 && (typeof renderSeparator === "function" ? renderSeparator(index) : renderSeparator)] }, index));
+        }) }));
+};
+exports.default = OtpInput;
+//# sourceMappingURL=OtpInput.js.map

package/dist/cjs/components/OtpInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OtpInput.js","sourceRoot":"","sources":["../../../src/components/OtpInput.tsx"],"names":[],"mappings":"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"}

package/dist/cjs/index.d.ts

@@ -1 +1,2 @@
 export { default as Otptimer } from "./components/Otptimer";
+export { default as OtpInput } from "./components/OtpInput";

package/dist/cjs/index.js

@@ -3,7 +3,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Otptimer = void 0;
+exports.OtpInput = exports.Otptimer = void 0;
 var Otptimer_1 = require("./components/Otptimer");
 Object.defineProperty(exports, "Otptimer", { enumerable: true, get: function () { return __importDefault(Otptimer_1).default; } });
+var OtpInput_1 = require("./components/OtpInput");
+Object.defineProperty(exports, "OtpInput", { enumerable: true, get: function () { return __importDefault(OtpInput_1).default; } });
 //# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";;;;;;AAAA,kDAA4D;AAAnD,qHAAA,OAAO,OAAY"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":";;;;;;AAAA,kDAA4D;AAAnD,qHAAA,OAAO,OAAY;AAC5B,kDAA4D;AAAnD,qHAAA,OAAO,OAAY"}

package/dist/esm/components/OtpInput.d.ts

@@ -0,0 +1,25 @@
+import React from "react";
+type AllowedInputTypes = "password" | "text" | "number" | "tel";
+type InputProps = Required<Pick<React.InputHTMLAttributes<HTMLInputElement>, "value" | "onChange" | "onFocus" | "onBlur" | "onKeyDown" | "onPaste" | "aria-label" | "autoComplete" | "style" | "inputMode" | "onInput"> & {
+    ref: React.RefCallback<HTMLInputElement>;
+    placeholder: string | undefined;
+    className: string | undefined;
+    type: AllowedInputTypes;
+}>;
+interface OTPInputProps {
+    value?: string;
+    numInputs?: number;
+    onChange: (otp: string) => void;
+    onPaste?: (event: React.ClipboardEvent<HTMLDivElement>) => void;
+    renderInput: (inputProps: InputProps, index: number) => React.ReactNode;
+    shouldAutoFocus?: boolean;
+    placeholder?: string;
+    renderSeparator?: ((index: number) => React.ReactNode) | React.ReactNode;
+    containerStyle?: React.CSSProperties | string;
+    inputStyle?: React.CSSProperties | string;
+    inputType?: AllowedInputTypes;
+    skipDefaultStyles?: boolean;
+}
+declare const OtpInput: ({ value, numInputs, onChange, onPaste, renderInput, shouldAutoFocus, inputType, renderSeparator, placeholder, containerStyle, inputStyle, skipDefaultStyles, }: OTPInputProps) => import("react/jsx-runtime").JSX.Element;
+export type { OTPInputProps, InputProps, AllowedInputTypes };
+export default OtpInput;

package/dist/esm/components/OtpInput.js

@@ -0,0 +1,162 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+const isStyleObject = (obj) => typeof obj === "object" && obj !== null;
+const OtpInput = ({ value = "", numInputs = 4, onChange, onPaste, renderInput, shouldAutoFocus = false, inputType = "text", renderSeparator, placeholder, containerStyle, inputStyle, skipDefaultStyles = false, }) => {
+    const [activeInput, setActiveInput] = React.useState(0);
+    const inputRefs = React.useRef([]);
+    const getOTPValue = () => (value ? value.toString().split("") : []);
+    const isInputNum = inputType === "number" || inputType === "tel";
+    React.useEffect(() => {
+        inputRefs.current = inputRefs.current.slice(0, numInputs);
+    }, [numInputs]);
+    React.useEffect(() => {
+        var _a;
+        if (shouldAutoFocus) {
+            (_a = inputRefs.current[0]) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    }, [shouldAutoFocus]);
+    const getPlaceholderValue = () => {
+        if (typeof placeholder === "string") {
+            if (placeholder.length === numInputs) {
+                return placeholder;
+            }
+            if (placeholder.length > 0) {
+                console.error("Length of the placeholder should be equal to the number of inputs.");
+            }
+        }
+        return undefined;
+    };
+    const isInputValueValid = (value) => {
+        const isTypeValid = isInputNum ? !isNaN(Number(value)) : typeof value === "string";
+        return isTypeValid && value.trim().length === 1;
+    };
+    const handleChange = (event) => {
+        const { value } = event.target;
+        if (isInputValueValid(value)) {
+            changeCodeAtFocus(value);
+            focusInput(activeInput + 1);
+        }
+    };
+    const handleInputChange = (event) => {
+        const { nativeEvent } = event;
+        const value = event.target.value;
+        if (!isInputValueValid(value)) {
+            if (value.length === numInputs) {
+                const hasInvalidInput = value.split("").some((cellInput) => !isInputValueValid(cellInput));
+                if (!hasInvalidInput) {
+                    handleOTPChange(value.split(""));
+                    focusInput(numInputs - 1);
+                }
+            }
+            // @ts-expect-error - This was added previously to handle and edge case
+            // for dealing with keyCode "229 Unidentified" on Android. Check if this is
+            // still needed.
+            if (nativeEvent.data === null && nativeEvent.inputType === "deleteContentBackward") {
+                event.preventDefault();
+                changeCodeAtFocus("");
+                focusInput(activeInput - 1);
+            }
+            event.target.value = "";
+        }
+    };
+    const handleFocus = (event) => (index) => {
+        setActiveInput(index);
+        event.target.select();
+    };
+    const handleBlur = () => {
+        setActiveInput(activeInput - 1);
+    };
+    const handleKeyDown = (event) => {
+        const otp = getOTPValue();
+        if ([event.code, event.key].includes("Backspace")) {
+            event.preventDefault();
+            changeCodeAtFocus("");
+            focusInput(activeInput - 1);
+        }
+        else if (event.code === "Delete") {
+            event.preventDefault();
+            changeCodeAtFocus("");
+        }
+        else if (event.code === "ArrowLeft") {
+            event.preventDefault();
+            focusInput(activeInput - 1);
+        }
+        else if (event.code === "ArrowRight") {
+            event.preventDefault();
+            focusInput(activeInput + 1);
+        }
+        else if (event.key === otp[activeInput]) {
+            event.preventDefault();
+            focusInput(activeInput + 1);
+        }
+        else if (event.code === "Spacebar" ||
+            event.code === "Space" ||
+            event.code === "ArrowUp" ||
+            event.code === "ArrowDown") {
+            event.preventDefault();
+        }
+    };
+    const focusInput = (index) => {
+        var _a, _b;
+        const activeInput = Math.max(Math.min(numInputs - 1, index), 0);
+        if (inputRefs.current[activeInput]) {
+            (_a = inputRefs.current[activeInput]) === null || _a === void 0 ? void 0 : _a.focus();
+            (_b = inputRefs.current[activeInput]) === null || _b === void 0 ? void 0 : _b.select();
+            setActiveInput(activeInput);
+        }
+    };
+    const changeCodeAtFocus = (value) => {
+        const otp = getOTPValue();
+        otp[activeInput] = value[0];
+        handleOTPChange(otp);
+    };
+    const handleOTPChange = (otp) => {
+        const otpValue = otp.join("");
+        onChange(otpValue);
+    };
+    const handlePaste = (event) => {
+        var _a;
+        event.preventDefault();
+        const otp = getOTPValue();
+        let nextActiveInput = activeInput;
+        const pastedData = event.clipboardData
+            .getData("text/plain")
+            .slice(0, numInputs - activeInput)
+            .split("");
+        if (isInputNum && pastedData.some((value) => isNaN(Number(value)))) {
+            return;
+        }
+        for (let pos = 0; pos < numInputs; ++pos) {
+            if (pos >= activeInput && pastedData.length > 0) {
+                otp[pos] = (_a = pastedData.shift()) !== null && _a !== void 0 ? _a : "";
+                nextActiveInput++;
+            }
+        }
+        focusInput(nextActiveInput);
+        handleOTPChange(otp);
+    };
+    return (_jsx("div", { style: Object.assign({ display: "flex", alignItems: "center" }, isStyleObject(containerStyle) && containerStyle), className: typeof containerStyle === "string" ? containerStyle : undefined, onPaste: onPaste, children: Array.from({ length: numInputs }, (_, index) => index).map((index) => {
+            var _a, _b, _c;
+            return (_jsxs(React.Fragment, { children: [renderInput({
+                        value: (_a = getOTPValue()[index]) !== null && _a !== void 0 ? _a : "",
+                        placeholder: (_c = (_b = getPlaceholderValue()) === null || _b === void 0 ? void 0 : _b[index]) !== null && _c !== void 0 ? _c : undefined,
+                        ref: (element) => {
+                            inputRefs.current[index] = element;
+                        },
+                        onChange: handleChange,
+                        onFocus: (event) => handleFocus(event)(index),
+                        onBlur: handleBlur,
+                        onKeyDown: handleKeyDown,
+                        onPaste: handlePaste,
+                        autoComplete: "off",
+                        "aria-label": `Please enter OTP character ${index + 1}`,
+                        style: Object.assign(!skipDefaultStyles ? { width: "1em", textAlign: "center" } : {}, isStyleObject(inputStyle) ? inputStyle : {}),
+                        className: typeof inputStyle === "string" ? inputStyle : undefined,
+                        type: inputType,
+                        inputMode: isInputNum ? "numeric" : "text",
+                        onInput: handleInputChange,
+                    }, index), index < numInputs - 1 && (typeof renderSeparator === "function" ? renderSeparator(index) : renderSeparator)] }, index));
+        }) }));
+};
+export default OtpInput;
+//# sourceMappingURL=OtpInput.js.map

package/dist/esm/components/OtpInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OtpInput.js","sourceRoot":"","sources":["../../../src/components/OtpInput.tsx"],"names":[],"mappings":"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"}

package/dist/esm/index.d.ts

@@ -1 +1,2 @@
 export { default as Otptimer } from "./components/Otptimer";
+export { default as OtpInput } from "./components/OtpInput";

package/dist/esm/index.js

@@ -1,2 +1,3 @@
 export { default as Otptimer } from "./components/Otptimer";
+export { default as OtpInput } from "./components/OtpInput";
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,uBAAuB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@siamf/otp-timer",
-  "version": "4.0.1",
+  "version": "4.5.0",
   "description": "A simple react otp timer component with resend functionality🤷",
   "homepage": "https://github.com/siamahnaf/otp-timer",
   "main": "dist/cjs/index.js",