dhre-ui-kit 0.0.231 → 0.0.233

package/lib/index.mjs

@@ -3988,11 +3988,14 @@ const OTPInput = React.forwardRef(
     resendOtpColor,
     label = "OTP",
     resendText = "Resend OTP",
-    mode
+    mode,
+    disabled
   }, ref) => {
     const [otp, setOTP] = useState("");
     const [isResendOtpEnable, setIsResendOtpEnable] = useState(false);
     const [activeInput, setActiveInput] = useState(null);
+    const [resendOTPCount, setResendOTPCount] = useState(0);
+    const [errorMessageMaxReachCount, setErrorMessageMaxReachCount] = useState("");
     const filteredTheme = Object?.keys(theme)?.reduce(
       (acc, key) => {
         acc[key] = theme[key][mode];
@@ -4007,15 +4010,23 @@ const OTPInput = React.forwardRef(
       enableResendOtp();
     }, []);
     const onClickResendOTP = () => {
-      setIsResendOtpEnable(false);
-      enableResendOtp();
-      resendOTP?.();
-      setOTP("");
+      if (resendOTPCount >= 3) {
+        setErrorMessageMaxReachCount("You have exceeded the maximum number of attempts.");
+        return;
+      }
+      if (resendOTPCount < 3) {
+        setResendOTPCount(resendOTPCount + 1);
+        enableResendOtp();
+        resendOTP?.();
+        setOTP("");
+      }
     };
     const enableResendOtp = () => {
-      setTimeout(() => {
-        setIsResendOtpEnable(true);
-      }, 5e3);
+      if (!disabled && resendOTPCount <= 3) {
+        setTimeout(() => {
+          setIsResendOtpEnable(true);
+        }, 6e4);
+      }
     };
     useEffect(() => {
       if (Platform.OS === "android") {
@@ -4096,7 +4107,7 @@ const OTPInput = React.forwardRef(
         style: {
           ...styles$5.textInputStyle,
           color: theme$1.CONTENT_PRIMARY,
-          borderColor: errorMessage ? theme$1.ERROR : otp.length === length ? theme$1.SUCCESS : activeInput === index ? theme$1.BORDER_INVERTED : theme$1.BORDER_PRIMARY,
+          borderColor: errorMessage || errorMessageMaxReachCount ? theme$1.ERROR : otp.length === length ? theme$1.SUCCESS : activeInput === index ? theme$1.BORDER_INVERTED : theme$1.BORDER_PRIMARY,
           ...textInputStyle
         },
         onFocus: () => setActiveInput(index),
@@ -4118,7 +4129,7 @@ const OTPInput = React.forwardRef(
       {
         onPress: onClickResendOTP,
         style: styles$5.resendOTPStyle,
-        disabled: !isResendOtpEnable
+        disabled: !isResendOtpEnable || resendOTPCount >= 3
       },
       /* @__PURE__ */ React.createElement(
         CustomTypography,
@@ -4132,7 +4143,7 @@ const OTPInput = React.forwardRef(
           }
         }
       )
-    ), /* @__PURE__ */ React.createElement(View, { style: styles$5.resendOtpContainer }, errorMessage ? /* @__PURE__ */ React.createElement(
+    ), errorMessage ? /* @__PURE__ */ React.createElement(View, { style: styles$5.resendOtpContainer }, /* @__PURE__ */ React.createElement(
       CustomTypography,
       {
         text: errorMessage,
@@ -4142,7 +4153,17 @@ const OTPInput = React.forwardRef(
           color: theme$1.ERROR
         }
       }
-    ) : /* @__PURE__ */ React.createElement(View, null)));
+    )) : null, errorMessageMaxReachCount ? /* @__PURE__ */ React.createElement(View, { style: styles$5.resendOtpContainer }, /* @__PURE__ */ React.createElement(
+      CustomTypography,
+      {
+        text: errorMessageMaxReachCount,
+        variant: FontStyle.L2_REGULAR,
+        style: {
+          alignSelf: "flex-start",
+          color: theme$1.ERROR
+        }
+      }
+    )) : null);
   }
 );
 var index$4 = withThemeProvider(OTPInput);
@@ -4397,7 +4418,7 @@ const CustomSlideButton = React.forwardRef(
         });
       },
       onPanResponderRelease: (e, gestureState) => {
-        if (gestureState.dx >= value.current * 0.7) {
+        if (gestureState.dx >= value.current * 0.8) {
           onComplete?.();
           Animated.timing(translateX, {
             toValue: value.current - BUTTON_WIDTH,