dhre-ui-kit 0.0.244 → 0.0.246

package/lib/index.mjs

@@ -3403,8 +3403,7 @@ const CommonTextInput = (props) => {
     multiline = false,
     // Default multiline to false
     rightIcon,
-    onRightIconPress,
-    onlyErrorBorderLabel
+    onRightIconPress
   } = props;
   return /* @__PURE__ */ React.createElement(Pressable, { onPress: handlePress, style: styles$9.container }, /* @__PURE__ */ React.createElement(
     TextInput$1,
@@ -3416,7 +3415,7 @@ const CommonTextInput = (props) => {
       autoCorrect: false,
       outlineStyle: {
         ...styles$9.outlineStyle,
-        borderColor: errorMessage?.length || onlyErrorBorderLabel ? DHRE_DEFAULT.DH_SEMENTIC_ERROR : value?.length ? activeBorderColor : inactiveBorderColor
+        borderColor: errorMessage?.length ? DHRE_DEFAULT.DH_SEMENTIC_ERROR : value?.length ? activeBorderColor : inactiveBorderColor
       },
       label,
       value,
@@ -3426,12 +3425,12 @@ const CommonTextInput = (props) => {
       theme: {
         colors: {
           onSurfaceVariant: value?.length ? activeBorderColor : inactiveBorderColor,
-          error: errorMessage?.length || onlyErrorBorderLabel ? DHRE_DEFAULT.DH_SEMENTIC_ERROR : DHRE_COLORS_TEXT.DH_BLACK,
+          error: errorMessage?.length ? DHRE_DEFAULT.DH_SEMENTIC_ERROR : DHRE_COLORS_TEXT.DH_BLACK,
           primary: labelColor ? errorMessage?.length ? DHRE_DEFAULT.DH_SEMENTIC_ERROR : labelColor : DHRE_COLORS_TEXT.DH_BLACK
         }
       },
       style: [
-        errorMessage || onlyErrorBorderLabel ? styles$9.errorInput : styles$9.input,
+        errorMessage ? styles$9.errorInput : styles$9.input,
         inputStyle,
         multiline && styles$9.multilineInput
         // Apply multiline style if true
@@ -3441,7 +3440,7 @@ const CommonTextInput = (props) => {
       placeholder: placeholderText,
       editable,
       pointerEvents,
-      error: errorMessage?.length || onlyErrorBorderLabel ? true : false,
+      error: errorMessage?.length ? true : false,
       multiline,
       numberOfLines: multiline ? 4 : 1,
       right: rightIcon ? /* @__PURE__ */ React.createElement(
@@ -3977,7 +3976,13 @@ const styles$5 = StyleSheet.create({
   resendOTPStyle: {
     alignSelf: "flex-end",
     marginTop: verticalScale(8)
-  }
+  },
+  timerContainer: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    marginTop: verticalScale(8)
+  },
+  timerIconContainer: { flexDirection: "row", gap: horizontalScale(8) }
 });
 
 const OTPInput = React.forwardRef(
@@ -3997,7 +4002,8 @@ const OTPInput = React.forwardRef(
     mode,
     disabled,
     maxResendCount = 2,
-    timerToResend = 6e4
+    timerToResend = 6e4,
+    timerIcon
   }, ref) => {
     const [otp, setOTP] = useState("");
     const [isResendOtpEnable, setIsResendOtpEnable] = useState(false);
@@ -4012,6 +4018,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(() => {
@@ -4019,7 +4037,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);
@@ -4039,6 +4059,7 @@ const OTPInput = React.forwardRef(
     const enableResendOtp = () => {
       setTimeout(() => {
         setIsResendOtpEnable(true);
+        setTimeLeft(timerToResend / 1e3);
       }, timerToResend);
     };
     useEffect(() => {
@@ -4137,7 +4158,14 @@ 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 }, timeLeft !== 0 && /* @__PURE__ */ React.createElement(View, { style: styles$5.timerIconContainer }, timerIcon, /* @__PURE__ */ React.createElement(
+      CustomTypography,
+      {
+        text: `${timeLeft} sec`,
+        variant: FontStyle.L2_REGULAR,
+        style: { color: theme$1.CONTENT_PRIMARY }
+      }
+    )), /* @__PURE__ */ React.createElement(
       Pressable,
       {
         onPress: onClickResendOTP,
@@ -4156,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,