dhre-ui-kit 0.0.244 → 0.0.246

package/lib/index.d.ts

@@ -612,7 +612,6 @@ interface CommonTextInputProps extends TextInputProps$1 {
     handlePress?: () => void;
     rightIcon?: () => React$1.ReactElement;
     onRightIconPress?: () => void;
-    onlyErrorBorderLabel?: boolean;
 }
 declare const CommonTextInput: (props: CommonTextInputProps) => React$1.JSX.Element;
 
@@ -716,6 +715,7 @@ interface IProps$1 {
     disabled?: boolean;
     maxResendCount?: number;
     timerToResend?: number;
+    timerIcon?: React.ReactElement;
 }
 type OTPInputHandle = {
     reset?: () => void;

package/lib/index.js

@@ -3439,8 +3439,7 @@ const CommonTextInput = (props) => {
     multiline = false,
     // Default multiline to false
     rightIcon,
-    onRightIconPress,
-    onlyErrorBorderLabel
+    onRightIconPress
   } = props;
   return /* @__PURE__ */ React__default["default"].createElement(reactNative.Pressable, { onPress: handlePress, style: styles$9.container }, /* @__PURE__ */ React__default["default"].createElement(
     reactNativePaper.TextInput,
@@ -3452,7 +3451,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,
@@ -3462,12 +3461,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
@@ -3477,7 +3476,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__default["default"].createElement(
@@ -4013,7 +4012,13 @@ const styles$5 = reactNative.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__default["default"].forwardRef(
@@ -4033,7 +4038,8 @@ const OTPInput = React__default["default"].forwardRef(
     mode,
     disabled,
     maxResendCount = 2,
-    timerToResend = 6e4
+    timerToResend = 6e4,
+    timerIcon
   }, ref) => {
     const [otp, setOTP] = React.useState("");
     const [isResendOtpEnable, setIsResendOtpEnable] = React.useState(false);
@@ -4048,6 +4054,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(() => {
@@ -4055,7 +4073,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);
@@ -4075,6 +4095,7 @@ const OTPInput = React__default["default"].forwardRef(
     const enableResendOtp = () => {
       setTimeout(() => {
         setIsResendOtpEnable(true);
+        setTimeLeft(timerToResend / 1e3);
       }, timerToResend);
     };
     React.useEffect(() => {
@@ -4173,7 +4194,14 @@ 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 }, timeLeft !== 0 && /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$5.timerIconContainer }, timerIcon, /* @__PURE__ */ React__default["default"].createElement(
+      CustomTypography,
+      {
+        text: `${timeLeft} sec`,
+        variant: FontStyle.L2_REGULAR,
+        style: { color: theme$1.CONTENT_PRIMARY }
+      }
+    )), /* @__PURE__ */ React__default["default"].createElement(
       reactNative.Pressable,
       {
         onPress: onClickResendOTP,
@@ -4192,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,