dhre-ui-kit 0.0.243 → 0.0.245

package/lib/index.js

@@ -4012,6 +4012,11 @@ const styles$5 = reactNative.StyleSheet.create({
   resendOTPStyle: {
     alignSelf: "flex-end",
     marginTop: verticalScale(8)
+  },
+  timerContainer: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    marginTop: verticalScale(8)
   }
 });
 
@@ -4047,6 +4052,18 @@ const OTPInput = React__default["default"].forwardRef(
       {}
     );
     const { theme: theme$1 } = mode ? { theme: filteredTheme } : useTheme();
+    const [timeLeft, setTimeLeft] = React.useState(60);
+    React.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 = React.useRef([]);
     refs.current = Array(length).fill(0).map((_, index) => refs.current[index] || null);
     React.useEffect(() => {
@@ -4054,7 +4071,9 @@ const OTPInput = React__default["default"].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);
@@ -4074,6 +4093,7 @@ const OTPInput = React__default["default"].forwardRef(
     const enableResendOtp = () => {
       setTimeout(() => {
         setIsResendOtpEnable(true);
+        setTimeLeft(timerToResend / 1e3);
       }, timerToResend);
     };
     React.useEffect(() => {
@@ -4172,7 +4192,16 @@ const OTPInput = React__default["default"].forwardRef(
         autoComplete: "sms-otp",
         selectionColor: theme$1.CONTENT_PRIMARY
       }
-    ))), !errorMessageMaxReachCount && /* @__PURE__ */ React__default["default"].createElement(
+    ))), !errorMessageMaxReachCount && /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$5.timerContainer }, /* @__PURE__ */ React__default["default"].createElement(
+      CustomTypography,
+      {
+        text: `${timeLeft} sec`,
+        variant: FontStyle.L2_REGULAR,
+        style: {
+          ...resendTextStyle
+        }
+      }
+    ), /* @__PURE__ */ React__default["default"].createElement(
       reactNative.Pressable,
       {
         onPress: onClickResendOTP,
@@ -4191,7 +4220,7 @@ const OTPInput = React__default["default"].forwardRef(
           }
         }
       )
-    ), errorMessage ? /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$5.resendOtpContainer }, /* @__PURE__ */ React__default["default"].createElement(
+    )), errorMessage ? /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$5.resendOtpContainer }, /* @__PURE__ */ React__default["default"].createElement(
       CustomTypography,
       {
         text: errorMessage,