dhre-ui-kit 0.0.256 → 0.0.258

package/lib/index.mjs

@@ -3950,205 +3950,214 @@ const styles$5 = StyleSheet.create({
   }
 });
 
-const OTPInput = React.forwardRef(
-  ({
-    length = 4,
-    onComplete,
-    resendOTP,
-    errorMessage,
-    testId = "",
-    otpContainerStyle,
-    otpHeaderTextStyle,
-    textInputStyle,
-    resendTextStyle,
-    resendOtpColor,
-    label = "OTP",
-    resendText = "Resend OTP",
-    mode,
-    disabled,
-    maxResendCount = 2,
-    timerToResend = 6e4,
-    timerIcon
-  }, 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 [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 otpRefs = useRef(Array(length).fill(null));
-    useEffect(() => {
+const OTPInputComponent = ({
+  length = 4,
+  onComplete,
+  resendOTP,
+  errorMessage,
+  testId = "",
+  otpContainerStyle,
+  otpHeaderTextStyle,
+  textInputStyle,
+  resendTextStyle,
+  resendOtpColor,
+  label = "OTP",
+  resendText = "Resend OTP",
+  mode,
+  disabled,
+  maxResendCount = 2,
+  timerToResend = 6e4,
+  timerIcon
+}, 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 = mode ? theme[mode] : theme;
+  const { theme: theme$1 } = useTheme() || { theme: filteredTheme };
+  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 otpRefs = useRef(Array(length).fill(null));
+  useEffect(() => {
+    enableResendOtp();
+  }, []);
+  const onClickResendOTP = () => {
+    if (resendOTPCount > maxResendCount - 1) {
+      setErrorMessageMaxReachCount(
+        "You have exceeded the maximum number of attempts."
+      );
+    }
+    if (resendOTPCount < maxResendCount) {
+      setIsResendOtpEnable(false);
+      setResendOTPCount(resendOTPCount + 1);
       enableResendOtp();
-    }, []);
-    const onClickResendOTP = () => {
-      if (resendOTPCount > maxResendCount - 1) {
-        setErrorMessageMaxReachCount(
-          "You have exceeded the maximum number of attempts."
-        );
-      }
-      if (resendOTPCount < maxResendCount) {
-        setIsResendOtpEnable(false);
-        setResendOTPCount(resendOTPCount + 1);
-        enableResendOtp();
-        resendOTP?.();
-        setOTP("");
-      }
-    };
-    const disableResendButton = () => {
-      return disabled || resendOTPCount >= maxResendCount;
-    };
-    const enableResendOtp = () => {
-      setTimeout(() => {
-        setIsResendOtpEnable(true);
-        setTimeLeft(timerToResend / 1e3);
-      }, timerToResend);
-    };
-    useEffect(() => {
-      if (Platform.OS === "android") {
-        onStartListeningOtp();
-      }
-      return () => {
-        if (Platform.OS === "android") {
-          OTPVerify.removeListener();
-          removeListener();
-        }
-      };
-    }, []);
-    const onStartListeningOtp = async () => {
-      await OTPVerify.getOtp();
-      startOtpListener((message) => {
-        const otpRegex = new RegExp(`(\\d{${length}})`, "g");
-        const otp2 = otpRegex.exec(message)?.[1];
-        setOTP(otp2 ?? "");
-        if (otp2) {
-          otpRefs.current[otp2?.length - 1]?.focus();
-        }
-      });
-    };
-    const reset = () => {
+      resendOTP?.();
       setOTP("");
-      otpRefs.current[0]?.focus();
-    };
-    React.useImperativeHandle(ref, () => ({
-      reset
-    }));
-    const handleChange = (index, value) => {
-      const regex = /^\d+$/;
-      if (value.length === 1 && regex.test(value) && index >= 0 && index < length) {
-        const newOTP = `${otp}${value}`;
-        setOTP(newOTP);
-        otpRefs.current[index + 1]?.focus();
-      } else if (value.length === 0 && index > 0) {
-        const newOTP = otp.slice(0, -1);
-        setOTP(newOTP);
-        otpRefs.current[index - 1]?.focus();
-      } else if (value?.length === length) {
-        setOTP(value);
-        otpRefs.current[length - 1]?.focus();
-      } else {
-        const newOTP = otp.slice(0, -1);
-        setOTP(newOTP);
-        otpRefs.current[index]?.focus();
-      }
-    };
-    const handleKeyPress = (e, index) => {
-      if (e.nativeEvent.key === "Backspace" && index > 0) {
-        otpRefs.current[index - 1]?.focus();
+    }
+  };
+  const disableResendButton = () => {
+    return disabled || resendOTPCount >= maxResendCount;
+  };
+  const enableResendOtp = () => {
+    setTimeout(() => {
+      setIsResendOtpEnable(true);
+      setTimeLeft(timerToResend / 1e3);
+    }, timerToResend);
+  };
+  useEffect(() => {
+    if (Platform.OS === "android") {
+      onStartListeningOtp();
+    }
+    return () => {
+      if (Platform.OS === "android") {
+        OTPVerify.removeListener();
+        removeListener();
       }
     };
-    useEffect(() => {
-      if (otp.length === length) {
-        onComplete?.(otp);
-      }
-    }, [otp]);
-    return /* @__PURE__ */ React.createElement(View, { style: { ...otpContainerStyle }, "data-testid": testId }, /* @__PURE__ */ React.createElement(
-      CustomTypography,
-      {
-        text: label,
-        variant: FontStyle.B4_REGULAR,
-        style: {
-          textAlign: "left",
-          ...otpHeaderTextStyle
-        }
-      }
-    ), /* @__PURE__ */ React.createElement(View, { style: { ...styles$5.textInputContainer } }, Array.from({ length }).map((_, index) => /* @__PURE__ */ React.createElement(
-      TextInput,
-      {
-        key: index?.toString(),
-        style: {
-          ...styles$5.textInputStyle,
-          ...textInputStyle
-        },
-        onFocus: () => setActiveInput(index),
-        onBlur: () => setActiveInput(null),
-        onKeyPress: (e) => handleKeyPress(e, index),
-        onChangeText: (text) => handleChange(index, text),
-        value: otp[index] ? "\u25CF" : "",
-        placeholder: "",
-        keyboardType: "numeric",
-        ref: (el) => otpRefs.current[index] = el,
-        returnKeyType: otp.length === length ? "done" : "next",
-        importantForAutofill: "yes",
-        textContentType: "oneTimeCode",
-        autoComplete: "sms-otp"
+  }, []);
+  const onStartListeningOtp = async () => {
+    await OTPVerify.getOtp();
+    startOtpListener((message) => {
+      const otpRegex = new RegExp(`(\\d{${length}})`, "g");
+      const otp2 = otpRegex.exec(message)?.[1];
+      setOTP(otp2 ?? "");
+      if (otp2) {
+        otpRefs.current[otp2?.length - 1]?.focus();
       }
-    ))), !errorMessageMaxReachCount && /* @__PURE__ */ React.createElement(View, { style: styles$5.timerContainer }, (disableResendButton() || !isResendOtpEnable) && /* @__PURE__ */ React.createElement(View, { style: styles$5.timerIconContainer }, timerIcon, /* @__PURE__ */ React.createElement(
-      CustomTypography,
-      {
-        text: `00:${timeLeft} secs`,
-        variant: FontStyle.L1_REGULAR
+    });
+  };
+  const reset = () => {
+    setOTP("");
+    otpRefs.current[0]?.focus();
+  };
+  React.useImperativeHandle(ref, () => ({
+    reset
+  }));
+  const handleChange = (index, value) => {
+    const regex = /^\d+$/;
+    if (value.length === 1 && regex.test(value) && index >= 0 && index < length) {
+      const newOTP = `${otp}${value}`;
+      setOTP(newOTP);
+      otpRefs.current[index + 1]?.focus();
+    } else if (value.length === 0 && index > 0) {
+      const newOTP = otp.slice(0, -1);
+      setOTP(newOTP);
+      otpRefs.current[index - 1]?.focus();
+    } else if (value?.length === length) {
+      setOTP(value);
+      otpRefs.current[length - 1]?.focus();
+    } else {
+      const newOTP = otp.slice(0, -1);
+      setOTP(newOTP);
+      otpRefs.current[index]?.focus();
+    }
+  };
+  const handleKeyPress = (e, index) => {
+    if (e.nativeEvent.key === "Backspace" && index > 0) {
+      otpRefs.current[index - 1]?.focus();
+    }
+  };
+  useEffect(() => {
+    if (otp.length === length) {
+      onComplete?.(otp);
+    }
+  }, [otp]);
+  return /* @__PURE__ */ React.createElement(View, { style: { ...otpContainerStyle }, "data-testid": testId }, /* @__PURE__ */ React.createElement(
+    CustomTypography,
+    {
+      text: label,
+      variant: FontStyle.B4_REGULAR,
+      style: {
+        color: otp?.length ? theme$1.CONTENT_PRIMARY : theme$1.CONTENT_SECONDRY,
+        textAlign: "left",
+        ...otpHeaderTextStyle
       }
-    )), /* @__PURE__ */ React.createElement(
-      Pressable,
-      {
-        onPress: onClickResendOTP,
-        style: styles$5.resendOTPStyle,
-        disabled: disableResendButton() || !isResendOtpEnable
+    }
+  ), /* @__PURE__ */ React.createElement(View, { style: { ...styles$5.textInputContainer } }, Array.from({ length }).map((_, index) => /* @__PURE__ */ React.createElement(
+    TextInput,
+    {
+      key: index?.toString(),
+      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,
+        ...textInputStyle
       },
-      /* @__PURE__ */ React.createElement(
-        CustomTypography,
-        {
-          text: resendText,
-          variant: FontStyle.L2_REGULAR,
-          style: {
-            textDecorationLine: "underline",
-            ...resendTextStyle
-          }
-        }
-      )
-    )), errorMessage ? /* @__PURE__ */ React.createElement(View, { style: styles$5.resendOtpContainer }, /* @__PURE__ */ React.createElement(
+      onFocus: () => setActiveInput(index),
+      onBlur: () => setActiveInput(null),
+      onKeyPress: (e) => handleKeyPress(e, index),
+      onChangeText: (text) => handleChange(index, text),
+      value: otp[index] ? "\u25CF" : "",
+      placeholder: "",
+      keyboardType: "numeric",
+      ref: (el) => otpRefs.current[index] = el,
+      returnKeyType: otp.length === length ? "done" : "next",
+      importantForAutofill: "yes",
+      textContentType: "oneTimeCode",
+      autoComplete: "sms-otp",
+      selectionColor: theme$1.CONTENT_PRIMARY
+    }
+  ))), !errorMessageMaxReachCount && /* @__PURE__ */ React.createElement(View, { style: styles$5.timerContainer }, (disableResendButton() || !isResendOtpEnable) && /* @__PURE__ */ React.createElement(View, { style: styles$5.timerIconContainer }, timerIcon, /* @__PURE__ */ React.createElement(
+    CustomTypography,
+    {
+      text: `00:${timeLeft} secs`,
+      variant: FontStyle.L1_REGULAR,
+      style: { color: theme$1.INFO }
+    }
+  )), /* @__PURE__ */ React.createElement(
+    Pressable,
+    {
+      onPress: onClickResendOTP,
+      style: styles$5.resendOTPStyle,
+      disabled: disableResendButton() || !isResendOtpEnable
+    },
+    /* @__PURE__ */ React.createElement(
       CustomTypography,
       {
-        text: errorMessage,
+        text: resendText,
         variant: FontStyle.L2_REGULAR,
         style: {
-          alignSelf: "flex-start"
+          textDecorationLine: "underline",
+          color: isResendOtpEnable ? resendOtpColor ?? theme$1.CONTENT_PRIMARY : theme$1.CONTENT_DISABLE,
+          ...resendTextStyle
         }
       }
-    )) : null, errorMessageMaxReachCount ? /* @__PURE__ */ React.createElement(View, { style: styles$5.resendOtpContainer }, /* @__PURE__ */ React.createElement(
-      CustomTypography,
-      {
-        text: errorMessageMaxReachCount,
-        variant: FontStyle.L2_REGULAR,
-        style: {
-          alignSelf: "flex-start"
-        }
+    )
+  )), errorMessage ? /* @__PURE__ */ React.createElement(View, { style: styles$5.resendOtpContainer }, /* @__PURE__ */ React.createElement(
+    CustomTypography,
+    {
+      text: errorMessage,
+      variant: FontStyle.L2_REGULAR,
+      style: {
+        alignSelf: "flex-start",
+        color: theme$1.ERROR
       }
-    )) : null);
-  }
-);
-OTPInput.displayName = "OTPInput";
+    }
+  )) : 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);
+};
+const OTPInput = withThemeProvider(OTPInputComponent);
+var index$4 = React.forwardRef(OTPInput);
 
 const styles$4 = StyleSheet.create({
   stepperContainer: {
@@ -4888,5 +4897,5 @@ const RadioButtonGroup = ({ data, onSelect, containerStyle, labelStyle, optionCo
   )));
 };
 
-export { Accordion$1 as Accordion, index$1 as AppointmentCard, Badge$1 as Badge, BottomDrawer, CustomButton$1 as Button, Cards, category as Category, Checkbox as CheckBox, ContactModel, CountryDropDown as CountryPicker, CustomDocumentPicker$1 as CustomDocumentPicker, CustomDropdown$1 as CustomDropdown, CustomHeader$1 as CustomHeader, CustomIcon, CustomLoader$1 as CustomLoader, CustomProgressBar, CustomSearchBar, index$2 as CustomSlideButton, CustomSwitchBtn, CustomText$1 as CustomText, CustomTextInput, CustomTooltip, CustomTypography, DHRE_COLORS_ALERT, DHRE_COLORS_BG, DHRE_COLORS_PRIMARY, DHRE_COLORS_SECONDARY, DHRE_COLORS_TEXT, DHRE_DEFAULT, DateRangePicker$1 as DateRangePicker, CustomDropdown as DropDown, FONT_STYLES, feedback as FeedbackForm, FileUpload, FontStyle, Line, NotificationBandge, OTPInput, OurOffices as OurOfficesButton, PdfView, PopUp, index as PropertyDetails, RadioButtonGroup, ShapeType, TagSingleSelection as SingleSelectionTags, Star as StarRating, index$3 as Stepper, SwipableList$1 as SwipableList, Tabs$1 as Tabs, Tags, TextDirectType, CommonTextInput as TextInput, Theme, Toast, CustomSwitch as ToggleButton, ToggleButtonType, ToggleTextType, Topic$1 as Topic, copyToClipboard, theme as default, height, horizontalScale, moderateScale, toastService, verticalScale, width };
+export { Accordion$1 as Accordion, index$1 as AppointmentCard, Badge$1 as Badge, BottomDrawer, CustomButton$1 as Button, Cards, category as Category, Checkbox as CheckBox, ContactModel, CountryDropDown as CountryPicker, CustomDocumentPicker$1 as CustomDocumentPicker, CustomDropdown$1 as CustomDropdown, CustomHeader$1 as CustomHeader, CustomIcon, CustomLoader$1 as CustomLoader, CustomProgressBar, CustomSearchBar, index$2 as CustomSlideButton, CustomSwitchBtn, CustomText$1 as CustomText, CustomTextInput, CustomTooltip, CustomTypography, DHRE_COLORS_ALERT, DHRE_COLORS_BG, DHRE_COLORS_PRIMARY, DHRE_COLORS_SECONDARY, DHRE_COLORS_TEXT, DHRE_DEFAULT, DateRangePicker$1 as DateRangePicker, CustomDropdown as DropDown, FONT_STYLES, feedback as FeedbackForm, FileUpload, FontStyle, Line, NotificationBandge, index$4 as OTPInput, OurOffices as OurOfficesButton, PdfView, PopUp, index as PropertyDetails, RadioButtonGroup, ShapeType, TagSingleSelection as SingleSelectionTags, Star as StarRating, index$3 as Stepper, SwipableList$1 as SwipableList, Tabs$1 as Tabs, Tags, TextDirectType, CommonTextInput as TextInput, Theme, Toast, CustomSwitch as ToggleButton, ToggleButtonType, ToggleTextType, Topic$1 as Topic, copyToClipboard, theme as default, height, horizontalScale, moderateScale, toastService, verticalScale, width };
 //# sourceMappingURL=index.mjs.map