@siamf/otp-timer 4.0.1 → 5.0.2

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";
 
@@ -42,7 +45,15 @@ const MyComponent = () => {
 
   return (
     <div>
-      <Otptimer minutes={0} seconds={5} onResend={handleResend} />
+      <Otptimer
+          minutes={0}
+          seconds={30}
+          onResend={handleResend}
+          renderText={(props) => <p>You can resend code in {props.minutes} minutes and {props.seconds} seconds</p>}
+          renderButton={(props) => <button {...props}>
+              Send Code Again
+          </button>}
+      />
     </div>
   );
 };
@@ -50,77 +61,145 @@ 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|
 |:---:| :-------------:|:-----------:|
 |seconds|number of seconds for which timer must be set|30|
 |minutes|number of minutes for which the timer must be set|0|
 |onResend|function that would get triggered on clicking the resend button|n/a|
-|text|content that you want to put down|Resend otp in|
-|ButtonText|button text|Resend|
-|showSpinner|If you want to show any button loading|false|
-|fetching|If you want to show any button loading icon with fetching state|false|
-|spinnerComponent|Your custom spinner component for render|null|
+|renderText|Customizable text content(See Example Code)|Required|
+|renderButton|Customizable button content(See Example Code)|Required|
 
-
-## Styling
+## `OtpInput` component
 
 <table>
   <tr>
-    <th> Name </th>
-    <th> Type </th>
-    <th> Description </th>
+    <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> containerClass </td>
-    <td> string </td>
-    <td> timer Container class name </td>
+    <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> textClass </td>
-    <td> string </td>
-    <td> text class name </td>
+    <td>onChange</td>
+    <td>function</td>
+    <td>true</td>
+    <td>console.log</td>
+    <td>Returns OTP code typed in inputs.</td>
   </tr>
   <tr>
-    <td> timerClass </td>
-    <td> string </td>
-    <td> timer class name </td>
+    <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> buttonContainerClass </td>
-    <td> string </td>
-    <td> button container class </td>
+    <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> buttonClass </td>
-    <td> string </td>
-    <td> button class </td>
+    <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> buttonStyle </td>
-    <td> CSSProperties </td>
-    <td> styles for resend button </td>
+    <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> buttonContainerStyle </td>
-    <td> CSSProperties </td>
-    <td> styles for resend button container </td>
+    <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> textStyle </td>
-    <td> CSSProperties </td>
-    <td> styles for text </td>
+    <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> timerStyle </td>
-    <td> CSSProperties </td>
-    <td> styles for timer </td>
+    <td>shouldAutoFocus</td>
+    <td>boolean</td>
+    <td>false</td>
+    <td>false</td>
+    <td>Auto focuses input on initial page load.</td>
   </tr>
   <tr>
-    <td> textContainerStyle </td>
-    <td> CSSProperties </td>
-    <td> styles for timer text container </td>
+    <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>
 

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/components/OtpTimers.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+interface OtpTimerProps {
+    minutes?: number;
+    seconds?: number;
+    onResend: () => void;
+    renderText: (props: {
+        minutes: number;
+        seconds: number;
+    }) => React.ReactNode;
+    renderButton: (props: {
+        onClick: () => void;
+    }) => React.ReactElement<HTMLButtonElement>;
+}
+declare const OtpTimer: ({ minutes: initialMinutes, seconds: initialSeconds, onResend, renderText, renderButton, }: OtpTimerProps) => import("react/jsx-runtime").JSX.Element;
+export default OtpTimer;

package/dist/cjs/components/OtpTimers.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const OtpTimer = ({ minutes: initialMinutes = 0, seconds: initialSeconds = 30, onResend, renderText, renderButton, }) => {
+    //Error Throwing
+    if (initialSeconds > 59)
+        throw new Error("Seconds cannot be greater than 59");
+    if (initialMinutes > 59)
+        throw new Error("Minutes cannot be greater than 59");
+    //State
+    const [minutes, setMinutes] = (0, react_1.useState)(initialMinutes);
+    const [seconds, setSeconds] = (0, react_1.useState)(initialSeconds);
+    (0, react_1.useEffect)(() => {
+        if (minutes === 0 && seconds === 0)
+            return;
+        const interval = setInterval(() => {
+            if (seconds > 0) {
+                setSeconds((prev) => prev - 1);
+            }
+            else if (minutes > 0) {
+                setMinutes((prev) => prev - 1);
+                setSeconds(59);
+            }
+        }, 1000);
+        return () => clearInterval(interval);
+    }, [minutes, seconds]);
+    const handleResend = () => {
+        setMinutes(initialMinutes);
+        setSeconds(initialSeconds);
+        onResend();
+    };
+    return ((0, jsx_runtime_1.jsx)(react_1.Fragment, { children: minutes === 0 && seconds === 0
+            ? renderButton({ onClick: handleResend })
+            : renderText({ minutes, seconds }) }));
+};
+exports.default = OtpTimer;
+//# sourceMappingURL=OtpTimers.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OtpTimers.js","sourceRoot":"","sources":["../../../src/components/OtpTimers.tsx"],"names":[],"mappings":";;;AAAA,iCAA6D;AAU7D,MAAM,QAAQ,GAAG,CAAC,EAAE,OAAO,EAAE,cAAc,GAAG,CAAC,EAAE,OAAO,EAAE,cAAc,GAAG,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,YAAY,GAAkB,EAAE,EAAE;IACnI,gBAAgB;IAChB,IAAI,cAAc,GAAG,EAAE;QAAE,MAAM,IAAI,KAAK,CAAC,mCAAmC,CAAC,CAAC;IAC9E,IAAI,cAAc,GAAG,EAAE;QAAE,MAAM,IAAI,KAAK,CAAC,mCAAmC,CAAC,CAAC;IAE9E,OAAO;IACP,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,IAAA,gBAAQ,EAAC,cAAc,CAAC,CAAC;IACvD,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,IAAA,gBAAQ,EAAC,cAAc,CAAC,CAAC;IAEvD,IAAA,iBAAS,EAAC,GAAG,EAAE;QACX,IAAI,OAAO,KAAK,CAAC,IAAI,OAAO,KAAK,CAAC;YAAE,OAAO;QAE3C,MAAM,QAAQ,GAAG,WAAW,CAAC,GAAG,EAAE;YAC9B,IAAI,OAAO,GAAG,CAAC,EAAE,CAAC;gBACd,UAAU,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC;YACnC,CAAC;iBAAM,IAAI,OAAO,GAAG,CAAC,EAAE,CAAC;gBACrB,UAAU,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC;gBAC/B,UAAU,CAAC,EAAE,CAAC,CAAC;YACnB,CAAC;QACL,CAAC,EAAE,IAAI,CAAC,CAAC;QAET,OAAO,GAAG,EAAE,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;IACzC,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC;IAEvB,MAAM,YAAY,GAAG,GAAG,EAAE;QACtB,UAAU,CAAC,cAAc,CAAC,CAAC;QAC3B,UAAU,CAAC,cAAc,CAAC,CAAC;QAC3B,QAAQ,EAAE,CAAC;IACf,CAAC,CAAC;IAEF,OAAO,CACH,uBAAC,gBAAQ,cACJ,OAAO,KAAK,CAAC,IAAI,OAAO,KAAK,CAAC;YAC3B,CAAC,CAAC,YAAY,CAAC,EAAE,OAAO,EAAE,YAAY,EAAE,CAAC;YACzC,CAAC,CAAC,UAAU,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC,GAC/B,CACd,CAAC;AACN,CAAC,CAAC;AAEF,kBAAe,QAAQ,CAAC"}

package/dist/cjs/index.d.ts

@@ -1 +1,2 @@
-export { default as Otptimer } from "./components/Otptimer";
+export { default as OtpTimer } from "./components/OtpTimers";
+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;
-var Otptimer_1 = require("./components/Otptimer");
-Object.defineProperty(exports, "Otptimer", { enumerable: true, get: function () { return __importDefault(Otptimer_1).default; } });
+exports.OtpInput = exports.OtpTimer = void 0;
+var OtpTimers_1 = require("./components/OtpTimers");
+Object.defineProperty(exports, "OtpTimer", { enumerable: true, get: function () { return __importDefault(OtpTimers_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,oDAA6D;AAApD,sHAAA,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/components/OtpTimers.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+interface OtpTimerProps {
+    minutes?: number;
+    seconds?: number;
+    onResend: () => void;
+    renderText: (props: {
+        minutes: number;
+        seconds: number;
+    }) => React.ReactNode;
+    renderButton: (props: {
+        onClick: () => void;
+    }) => React.ReactElement<HTMLButtonElement>;
+}
+declare const OtpTimer: ({ minutes: initialMinutes, seconds: initialSeconds, onResend, renderText, renderButton, }: OtpTimerProps) => import("react/jsx-runtime").JSX.Element;
+export default OtpTimer;

package/dist/esm/components/OtpTimers.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState, Fragment } from "react";
+const OtpTimer = ({ minutes: initialMinutes = 0, seconds: initialSeconds = 30, onResend, renderText, renderButton, }) => {
+    //Error Throwing
+    if (initialSeconds > 59)
+        throw new Error("Seconds cannot be greater than 59");
+    if (initialMinutes > 59)
+        throw new Error("Minutes cannot be greater than 59");
+    //State
+    const [minutes, setMinutes] = useState(initialMinutes);
+    const [seconds, setSeconds] = useState(initialSeconds);
+    useEffect(() => {
+        if (minutes === 0 && seconds === 0)
+            return;
+        const interval = setInterval(() => {
+            if (seconds > 0) {
+                setSeconds((prev) => prev - 1);
+            }
+            else if (minutes > 0) {
+                setMinutes((prev) => prev - 1);
+                setSeconds(59);
+            }
+        }, 1000);
+        return () => clearInterval(interval);
+    }, [minutes, seconds]);
+    const handleResend = () => {
+        setMinutes(initialMinutes);
+        setSeconds(initialSeconds);
+        onResend();
+    };
+    return (_jsx(Fragment, { children: minutes === 0 && seconds === 0
+            ? renderButton({ onClick: handleResend })
+            : renderText({ minutes, seconds }) }));
+};
+export default OtpTimer;
+//# sourceMappingURL=OtpTimers.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OtpTimers.js","sourceRoot":"","sources":["../../../src/components/OtpTimers.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAU7D,MAAM,QAAQ,GAAG,CAAC,EAAE,OAAO,EAAE,cAAc,GAAG,CAAC,EAAE,OAAO,EAAE,cAAc,GAAG,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,YAAY,GAAkB,EAAE,EAAE;IACnI,gBAAgB;IAChB,IAAI,cAAc,GAAG,EAAE;QAAE,MAAM,IAAI,KAAK,CAAC,mCAAmC,CAAC,CAAC;IAC9E,IAAI,cAAc,GAAG,EAAE;QAAE,MAAM,IAAI,KAAK,CAAC,mCAAmC,CAAC,CAAC;IAE9E,OAAO;IACP,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,cAAc,CAAC,CAAC;IACvD,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,cAAc,CAAC,CAAC;IAEvD,SAAS,CAAC,GAAG,EAAE;QACX,IAAI,OAAO,KAAK,CAAC,IAAI,OAAO,KAAK,CAAC;YAAE,OAAO;QAE3C,MAAM,QAAQ,GAAG,WAAW,CAAC,GAAG,EAAE;YAC9B,IAAI,OAAO,GAAG,CAAC,EAAE,CAAC;gBACd,UAAU,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC;YACnC,CAAC;iBAAM,IAAI,OAAO,GAAG,CAAC,EAAE,CAAC;gBACrB,UAAU,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC;gBAC/B,UAAU,CAAC,EAAE,CAAC,CAAC;YACnB,CAAC;QACL,CAAC,EAAE,IAAI,CAAC,CAAC;QAET,OAAO,GAAG,EAAE,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;IACzC,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC;IAEvB,MAAM,YAAY,GAAG,GAAG,EAAE;QACtB,UAAU,CAAC,cAAc,CAAC,CAAC;QAC3B,UAAU,CAAC,cAAc,CAAC,CAAC;QAC3B,QAAQ,EAAE,CAAC;IACf,CAAC,CAAC;IAEF,OAAO,CACH,KAAC,QAAQ,cACJ,OAAO,KAAK,CAAC,IAAI,OAAO,KAAK,CAAC;YAC3B,CAAC,CAAC,YAAY,CAAC,EAAE,OAAO,EAAE,YAAY,EAAE,CAAC;YACzC,CAAC,CAAC,UAAU,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC,GAC/B,CACd,CAAC;AACN,CAAC,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/esm/index.d.ts

@@ -1 +1,2 @@
-export { default as Otptimer } from "./components/Otptimer";
+export { default as OtpTimer } from "./components/OtpTimers";
+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 OtpTimer } from "./components/OtpTimers";
+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,wBAAwB,CAAC;AAC7D,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": "5.0.2",
   "description": "A simple react otp timer component with resend functionality🤷",
   "homepage": "https://github.com/siamahnaf/otp-timer",
   "main": "dist/cjs/index.js",

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

@@ -1,23 +0,0 @@
-import React from 'react';
-interface Props {
-    seconds?: number;
-    minutes?: number;
-    text?: string;
-    buttonText?: string;
-    containerClass?: string;
-    buttonContainerClass?: string;
-    textClass?: string;
-    timerClass?: string;
-    buttonStyle?: React.CSSProperties;
-    buttonClass?: string;
-    textStyle?: React.CSSProperties;
-    timerStyle?: React.CSSProperties;
-    buttonContainerStyle?: React.CSSProperties;
-    textContainerStyle?: React.CSSProperties;
-    onResend: () => void;
-    fetching?: boolean;
-    showSpinner?: boolean;
-    spinnerComponent?: React.ReactNode;
-}
-declare const Otptimer: (props: Props) => import("react/jsx-runtime").JSX.Element;
-export default Otptimer;

package/dist/cjs/components/Otptimer.js

@@ -1,51 +0,0 @@
-"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 Otptimer = (props) => {
-    //From props
-    const { text = "Resend otp in", containerClass = "otp-timer-container", buttonText = "Resend", textClass = "otp-text", buttonContainerClass = "button-container", timerClass = "otp-timer", buttonStyle, buttonContainerStyle, timerStyle, textStyle, textContainerStyle, onResend, fetching = false, buttonClass, showSpinner = false, spinnerComponent } = props;
-    //State
-    const [minutes, setMinutes] = react_1.default.useState(props.minutes ? props.minutes : 0);
-    const [seconds, setSeconds] = react_1.default.useState(props.seconds ? props.seconds : 30);
-    //Handler
-    let myInterval;
-    const onTimeHandler = () => {
-        myInterval = setInterval(() => {
-            if (seconds > 0) {
-                setSeconds(seconds - 1);
-            }
-            if (seconds === 0) {
-                if (minutes === 0) {
-                    clearInterval(myInterval);
-                }
-                else {
-                    setMinutes(minutes - 1);
-                    setSeconds(59);
-                }
-            }
-        }, 1000);
-    };
-    //Effect
-    react_1.default.useEffect(() => {
-        onTimeHandler();
-        return () => clearInterval(myInterval);
-    });
-    //Handler
-    const resendHandler = () => {
-        setSeconds(props.seconds ? props.seconds : 30);
-        setMinutes(props.minutes ? props.minutes : 0);
-        onTimeHandler();
-        onResend();
-    };
-    //Styling
-    const ButtonStyles = Object.assign({ border: "none", background: "none", cursor: "pointer", padding: 0, margin: 0 }, buttonStyle);
-    const textContainerStyles = Object.assign({ fontSize: "15px" }, textContainerStyle);
-    return ((0, jsx_runtime_1.jsx)("div", { children: minutes === 0 && seconds === 0 ? ((0, jsx_runtime_1.jsx)("div", { className: buttonContainerClass, style: buttonContainerStyle, children: (0, jsx_runtime_1.jsxs)("button", { onClick: resendHandler, className: buttonClass, style: ButtonStyles, children: [(0, jsx_runtime_1.jsx)("span", { children: buttonText }), showSpinner && fetching &&
-                        spinnerComponent] }) })) : ((0, jsx_runtime_1.jsxs)("div", { className: containerClass, style: textContainerStyles, children: [(0, jsx_runtime_1.jsx)("span", { className: textClass, style: textStyle, children: text }), " ", (0, jsx_runtime_1.jsxs)("span", { className: timerClass, style: timerStyle, children: [(0, jsx_runtime_1.jsx)("span", { children: minutes < 10 ? `0${minutes}` : minutes }), ":", (0, jsx_runtime_1.jsx)("span", { children: seconds < 10 ? `0${seconds}` : seconds })] })] })) }));
-};
-exports.default = Otptimer;
-//# sourceMappingURL=Otptimer.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Otptimer.js","sourceRoot":"","sources":["../../../src/components/Otptimer.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAwB1B,MAAM,QAAQ,GAAG,CAAC,KAAY,EAAE,EAAE;IAC9B,YAAY;IACZ,MAAM,EAAE,IAAI,GAAG,eAAe,EAAE,cAAc,GAAG,qBAAqB,EAAE,UAAU,GAAG,QAAQ,EAAE,SAAS,GAAG,UAAU,EAAE,oBAAoB,GAAG,kBAAkB,EAAE,UAAU,GAAG,WAAW,EAAE,WAAW,EAAE,oBAAoB,EAAE,UAAU,EAAE,SAAS,EAAE,kBAAkB,EAAE,QAAQ,EAAE,QAAQ,GAAG,KAAK,EAAE,WAAW,EAAE,WAAW,GAAG,KAAK,EAAE,gBAAgB,EAAE,GAAG,KAAK,CAAC;IACnW,OAAO;IACP,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,eAAK,CAAC,QAAQ,CAAS,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;IACvF,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,eAAK,CAAC,QAAQ,CAAS,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAA;IACxF,SAAS;IACT,IAAI,UAA0C,CAAA;IAC9C,MAAM,aAAa,GAAG,GAAG,EAAE;QACvB,UAAU,GAAG,WAAW,CAAC,GAAG,EAAE;YAC1B,IAAI,OAAO,GAAG,CAAC,EAAE,CAAC;gBACd,UAAU,CAAC,OAAO,GAAG,CAAC,CAAC,CAAA;YAC3B,CAAC;YACD,IAAI,OAAO,KAAK,CAAC,EAAE,CAAC;gBAChB,IAAI,OAAO,KAAK,CAAC,EAAE,CAAC;oBAChB,aAAa,CAAC,UAAU,CAAC,CAAA;gBAC7B,CAAC;qBAAM,CAAC;oBACJ,UAAU,CAAC,OAAO,GAAG,CAAC,CAAC,CAAA;oBACvB,UAAU,CAAC,EAAE,CAAC,CAAA;gBAClB,CAAC;YACL,CAAC;QACL,CAAC,EAAE,IAAI,CAAC,CAAA;IACZ,CAAC,CAAA;IACD,QAAQ;IACR,eAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACjB,aAAa,EAAE,CAAA;QACf,OAAO,GAAG,EAAE,CAAC,aAAa,CAAC,UAAU,CAAC,CAAA;IAC1C,CAAC,CAAC,CAAA;IACF,SAAS;IACT,MAAM,aAAa,GAAG,GAAG,EAAE;QACvB,UAAU,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAA;QAC9C,UAAU,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;QAC7C,aAAa,EAAE,CAAA;QACf,QAAQ,EAAE,CAAA;IACd,CAAC,CAAA;IACD,SAAS;IACT,MAAM,YAAY,mBACd,MAAM,EAAE,MAAM,EACd,UAAU,EAAE,MAAM,EAClB,MAAM,EAAE,SAAS,EACjB,OAAO,EAAE,CAAC,EACV,MAAM,EAAE,CAAC,IACN,WAAW,CACjB,CAAA;IACD,MAAM,mBAAmB,mBACrB,QAAQ,EAAE,MAAM,IACb,kBAAkB,CACxB,CAAA;IACD,OAAO,CACH,0CACK,OAAO,KAAK,CAAC,IAAI,OAAO,KAAK,CAAC,CAAC,CAAC,CAAC,CAC9B,gCAAK,SAAS,EAAE,oBAAoB,EAAE,KAAK,EAAE,oBAAoB,YAC7D,oCAAQ,OAAO,EAAE,aAAa,EAAE,SAAS,EAAE,WAAW,EAAE,KAAK,EAAE,YAAY,aACvE,2CAAO,UAAU,GAAQ,EACxB,WAAW,IAAI,QAAQ;wBACpB,gBAAgB,IAEf,GACP,CACT,CAAC,CAAC,CAAC,CACA,iCAAK,SAAS,EAAE,cAAc,EAAE,KAAK,EAAE,mBAAmB,aACtD,iCAAM,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,YAAG,IAAI,GAAQ,EAAC,GAAG,EAC/D,kCAAM,SAAS,EAAE,UAAU,EAAE,KAAK,EAAE,UAAU,aAC1C,2CAAO,OAAO,GAAG,EAAE,CAAC,CAAC,CAAC,IAAI,OAAO,EAAE,CAAC,CAAC,CAAC,OAAO,GAAQ,OACrD,2CAAO,OAAO,GAAG,EAAE,CAAC,CAAC,CAAC,IAAI,OAAO,EAAE,CAAC,CAAC,CAAC,OAAO,GAAQ,IAClD,IACL,CACT,GACC,CACT,CAAC;AACN,CAAC,CAAC;AACF,kBAAe,QAAQ,CAAC"}

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

@@ -1,23 +0,0 @@
-import React from 'react';
-interface Props {
-    seconds?: number;
-    minutes?: number;
-    text?: string;
-    buttonText?: string;
-    containerClass?: string;
-    buttonContainerClass?: string;
-    textClass?: string;
-    timerClass?: string;
-    buttonStyle?: React.CSSProperties;
-    buttonClass?: string;
-    textStyle?: React.CSSProperties;
-    timerStyle?: React.CSSProperties;
-    buttonContainerStyle?: React.CSSProperties;
-    textContainerStyle?: React.CSSProperties;
-    onResend: () => void;
-    fetching?: boolean;
-    showSpinner?: boolean;
-    spinnerComponent?: React.ReactNode;
-}
-declare const Otptimer: (props: Props) => import("react/jsx-runtime").JSX.Element;
-export default Otptimer;

package/dist/esm/components/Otptimer.js

@@ -1,46 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from 'react';
-const Otptimer = (props) => {
-    //From props
-    const { text = "Resend otp in", containerClass = "otp-timer-container", buttonText = "Resend", textClass = "otp-text", buttonContainerClass = "button-container", timerClass = "otp-timer", buttonStyle, buttonContainerStyle, timerStyle, textStyle, textContainerStyle, onResend, fetching = false, buttonClass, showSpinner = false, spinnerComponent } = props;
-    //State
-    const [minutes, setMinutes] = React.useState(props.minutes ? props.minutes : 0);
-    const [seconds, setSeconds] = React.useState(props.seconds ? props.seconds : 30);
-    //Handler
-    let myInterval;
-    const onTimeHandler = () => {
-        myInterval = setInterval(() => {
-            if (seconds > 0) {
-                setSeconds(seconds - 1);
-            }
-            if (seconds === 0) {
-                if (minutes === 0) {
-                    clearInterval(myInterval);
-                }
-                else {
-                    setMinutes(minutes - 1);
-                    setSeconds(59);
-                }
-            }
-        }, 1000);
-    };
-    //Effect
-    React.useEffect(() => {
-        onTimeHandler();
-        return () => clearInterval(myInterval);
-    });
-    //Handler
-    const resendHandler = () => {
-        setSeconds(props.seconds ? props.seconds : 30);
-        setMinutes(props.minutes ? props.minutes : 0);
-        onTimeHandler();
-        onResend();
-    };
-    //Styling
-    const ButtonStyles = Object.assign({ border: "none", background: "none", cursor: "pointer", padding: 0, margin: 0 }, buttonStyle);
-    const textContainerStyles = Object.assign({ fontSize: "15px" }, textContainerStyle);
-    return (_jsx("div", { children: minutes === 0 && seconds === 0 ? (_jsx("div", { className: buttonContainerClass, style: buttonContainerStyle, children: _jsxs("button", { onClick: resendHandler, className: buttonClass, style: ButtonStyles, children: [_jsx("span", { children: buttonText }), showSpinner && fetching &&
-                        spinnerComponent] }) })) : (_jsxs("div", { className: containerClass, style: textContainerStyles, children: [_jsx("span", { className: textClass, style: textStyle, children: text }), " ", _jsxs("span", { className: timerClass, style: timerStyle, children: [_jsx("span", { children: minutes < 10 ? `0${minutes}` : minutes }), ":", _jsx("span", { children: seconds < 10 ? `0${seconds}` : seconds })] })] })) }));
-};
-export default Otptimer;
-//# sourceMappingURL=Otptimer.js.map

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

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