dhre-ui-kit 0.0.243 → 0.0.245

package/lib/index.mjs

@@ -3976,6 +3976,11 @@ const styles$5 = StyleSheet.create({
   resendOTPStyle: {
     alignSelf: "flex-end",
     marginTop: verticalScale(8)
+  },
+  timerContainer: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    marginTop: verticalScale(8)
   }
 });
 
@@ -4011,6 +4016,18 @@ const OTPInput = React.forwardRef(
       {}
     );
     const { theme: theme$1 } = mode ? { theme: filteredTheme } : useTheme();
+    const [timeLeft, setTimeLeft] = useState(60);
+    useEffect(() => {
+      let timer;
+      if (!isResendOtpEnable && timeLeft > 0) {
+        timer = setInterval(() => {
+          setTimeLeft((prevTime) => prevTime - 1);
+        }, 1e3);
+      } else if (timeLeft === 0) {
+        clearInterval(timer);
+      }
+      return () => clearInterval(timer);
+    }, [timeLeft, isResendOtpEnable]);
     const refs = useRef([]);
     refs.current = Array(length).fill(0).map((_, index) => refs.current[index] || null);
     useEffect(() => {
@@ -4018,7 +4035,9 @@ const OTPInput = React.forwardRef(
     }, []);
     const onClickResendOTP = () => {
       if (resendOTPCount > maxResendCount - 1) {
-        setErrorMessageMaxReachCount("You have exceeded the maximum number of attempts.");
+        setErrorMessageMaxReachCount(
+          "You have exceeded the maximum number of attempts."
+        );
       }
       if (resendOTPCount < maxResendCount) {
         setIsResendOtpEnable(false);
@@ -4038,6 +4057,7 @@ const OTPInput = React.forwardRef(
     const enableResendOtp = () => {
       setTimeout(() => {
         setIsResendOtpEnable(true);
+        setTimeLeft(timerToResend / 1e3);
       }, timerToResend);
     };
     useEffect(() => {
@@ -4136,7 +4156,16 @@ const OTPInput = React.forwardRef(
         autoComplete: "sms-otp",
         selectionColor: theme$1.CONTENT_PRIMARY
       }
-    ))), !errorMessageMaxReachCount && /* @__PURE__ */ React.createElement(
+    ))), !errorMessageMaxReachCount && /* @__PURE__ */ React.createElement(View, { style: styles$5.timerContainer }, /* @__PURE__ */ React.createElement(
+      CustomTypography,
+      {
+        text: `${timeLeft} sec`,
+        variant: FontStyle.L2_REGULAR,
+        style: {
+          ...resendTextStyle
+        }
+      }
+    ), /* @__PURE__ */ React.createElement(
       Pressable,
       {
         onPress: onClickResendOTP,
@@ -4155,7 +4184,7 @@ const OTPInput = React.forwardRef(
           }
         }
       )
-    ), errorMessage ? /* @__PURE__ */ React.createElement(View, { style: styles$5.resendOtpContainer }, /* @__PURE__ */ React.createElement(
+    )), errorMessage ? /* @__PURE__ */ React.createElement(View, { style: styles$5.resendOtpContainer }, /* @__PURE__ */ React.createElement(
       CustomTypography,
       {
         text: errorMessage,