dhre-ui-kit 0.0.122 → 0.0.124

package/lib/index.mjs

@@ -217,8 +217,8 @@ const theme = {
     dark: "#404040"
   },
   [Theme.BORDER_SEPRATOR]: {
-    light: "#282828",
-    dark: "#FFFFFF"
+    light: "#F5F5F5",
+    dark: "#282828"
   },
   [Theme.BORDER_SEPERATOR_HEADER]: {
     light: "#E1E1E1",
@@ -263,10 +263,10 @@ const withThemeProvider = (Component) => {
   return (props) => /* @__PURE__ */ React.createElement(ThemeProvider, null, /* @__PURE__ */ React.createElement(Component, { ...props }));
 };
 
-const { width: width$1, height } = Dimensions.get("window");
+const { width, height } = Dimensions.get("window");
 const guidelineBaseWidth = 375;
 const guidelineBaseHeight = 812;
-const horizontalScale = (size) => width$1 / guidelineBaseWidth * size;
+const horizontalScale = (size) => width / guidelineBaseWidth * size;
 const verticalScale = (size) => height / guidelineBaseHeight * size;
 const moderateScale = (size, factor = 0.5) => size + (horizontalScale(size) - size) * factor;
 
@@ -1946,7 +1946,7 @@ const styles$m = StyleSheet.create({
     position: "absolute",
     alignSelf: "center",
     height: verticalScale(72),
-    width: width$1 - horizontalScale(32),
+    width: width - horizontalScale(32),
     top: 56,
     borderRadius: moderateScale(8),
     overflow: "hidden"
@@ -2056,7 +2056,7 @@ const Toast = React.forwardRef(({ sucessIcon, errorIcon }, ref) => {
       Progress.Bar,
       {
         progress,
-        width: width$1 - horizontalScale(48),
+        width: width - horizontalScale(48),
         height: 3,
         color: isSuccess ? "#024324" : "#851D41",
         borderColor: "transparent"
@@ -3242,15 +3242,19 @@ const CustomDropdown = ({
   placeholder,
   containerStyle,
   dropdownStyle,
+  dropdownFocusStyle,
   placeholderStyle,
   selectedTextStyle,
   iconStyle,
   labelStyle,
+  labelFocusStyle,
   defaultValue,
   iconColor,
   itemTextStyle,
   onValueChange,
-  itemContainerStyle
+  itemContainerStyle,
+  menuContainerStyle,
+  activeColor
 }) => {
   const [value, setValue] = useState(defaultValue);
   const [isFocus, setIsFocus] = useState(false);
@@ -3262,7 +3266,7 @@ const CustomDropdown = ({
           style: [
             styles$6.label,
             labelStyle,
-            isFocus && { color: theme.BORDER_INVERTED["light"] }
+            isFocus && (labelFocusStyle ?? { color: theme.BORDER_INVERTED["light"] })
           ]
         },
         label
@@ -3284,7 +3288,7 @@ const CustomDropdown = ({
       style: [
         styles$6.dropdown,
         dropdownStyle,
-        isFocus && { borderColor: theme.BORDER_INVERTED["light"] }
+        isFocus && (dropdownFocusStyle ?? { borderColor: theme.BORDER_INVERTED["light"] })
       ],
       placeholderStyle: [styles$6.placeholderStyle, placeholderStyle],
       selectedTextStyle: [styles$6.selectedTextStyle, selectedTextStyle],
@@ -3300,6 +3304,8 @@ const CustomDropdown = ({
       iconColor,
       dropdownPosition: "bottom",
       itemTextStyle,
+      containerStyle: menuContainerStyle,
+      activeColor,
       itemContainerStyle: [styles$6.itemListStyle, itemContainerStyle]
     }
   ));
@@ -3680,7 +3686,11 @@ const OTPInput = React.forwardRef(
     resendOTP,
     errorMessage,
     testId = "",
-    otpContainerStyle
+    otpContainerStyle,
+    otpHeaderTextStyle,
+    textInputStyle,
+    resendTextStyle,
+    resendOtpColor
   }, ref) => {
     const [otp, setOTP] = useState("");
     const [isResendOtpEnable, setIsResendOtpEnable] = useState(false);
@@ -3695,6 +3705,7 @@ const OTPInput = React.forwardRef(
       setIsResendOtpEnable(false);
       enableResendOtp();
       resendOTP?.();
+      setOTP("");
     };
     const enableResendOtp = () => {
       setTimeout(() => {
@@ -3732,14 +3743,15 @@ const OTPInput = React.forwardRef(
         onComplete?.(otp);
       }
     }, [otp]);
-    return /* @__PURE__ */ React.createElement(View, { style: { ...otpContainerStyle }, testID: testId }, /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ React.createElement(View, { style: { ...otpContainerStyle }, "data-testid": testId }, /* @__PURE__ */ React.createElement(
       CustomTypography,
       {
         text: "OTP",
         variant: FontStyle.B4_REGULAR,
         style: {
           color: otp?.length ? theme.CONTENT_PRIMARY : theme.CONTENT_SECONDRY,
-          textAlign: "left"
+          textAlign: "left",
+          ...otpHeaderTextStyle
         }
       }
     ), /* @__PURE__ */ React.createElement(View, { style: { ...styles$2.textInputContainer } }, Array.from({ length }).map((_, index) => /* @__PURE__ */ React.createElement(
@@ -3749,7 +3761,8 @@ const OTPInput = React.forwardRef(
         style: {
           ...styles$2.textInputStyle,
           color: theme.CONTENT_PRIMARY,
-          borderColor: errorMessage ? theme.ERROR : otp.length === length ? theme.SUCCESS : activeInput === index ? theme.BORDER_INVERTED : theme.BORDER_PRIMARY
+          borderColor: errorMessage ? theme.ERROR : otp.length === length ? theme.SUCCESS : activeInput === index ? theme.BORDER_INVERTED : theme.BORDER_PRIMARY,
+          ...textInputStyle
         },
         onFocus: () => setActiveInput(index),
         onBlur: () => setActiveInput(null),
@@ -3778,7 +3791,8 @@ const OTPInput = React.forwardRef(
         variant: FontStyle.L2_REGULAR,
         style: {
           textDecorationLine: "underline",
-          color: isResendOtpEnable ? theme.CONTENT_PRIMARY : theme.CONTENT_DISABLE
+          color: isResendOtpEnable ? resendOtpColor ?? theme.CONTENT_PRIMARY : theme.CONTENT_DISABLE,
+          ...resendTextStyle
         }
       }
     ))));
@@ -3983,14 +3997,25 @@ const styles = StyleSheet.create({
   }
 });
 
-const { width } = Dimensions.get("window");
 const BUTTON_WIDTH = 40;
 const CustomSlideButton = ({
   label,
   onComplete,
   icon
 }) => {
+  const value = useRef(0);
+  const cardRef = useRef(null);
   const pan = useRef(new Animated.Value(0)).current;
+  const handleLayout = (event) => {
+    const { width } = event.nativeEvent.layout;
+    if (cardRef.current) {
+      cardRef.current.setNativeProps({
+        style: { width }
+        // Change the width here
+      });
+      value.current = width;
+    }
+  };
   const panResponder = useRef(
     PanResponder.create({
       onMoveShouldSetPanResponder: (evt, gestureState) => {
@@ -3999,15 +4024,15 @@ const CustomSlideButton = ({
       onPanResponderGrant: () => {
       },
       onPanResponderMove: (evt, gestureState) => {
-        if (gestureState.dx < width - BUTTON_WIDTH) {
+        if (gestureState.dx < value.current - BUTTON_WIDTH) {
           pan.setValue(gestureState.dx);
         }
       },
       onPanResponderRelease: (evt, gestureState) => {
-        if (gestureState.dx > width - BUTTON_WIDTH - 100) {
+        if (gestureState.dx > value.current - BUTTON_WIDTH - 100) {
           onComplete && onComplete();
           Animated.spring(pan, {
-            toValue: width - BUTTON_WIDTH - 10,
+            toValue: value.current - BUTTON_WIDTH - 10,
             useNativeDriver: false
           }).start();
         } else {
@@ -4020,43 +4045,36 @@ const CustomSlideButton = ({
     })
   ).current;
   const { theme } = useTheme();
-  return /* @__PURE__ */ React.createElement(
-    View,
+  return /* @__PURE__ */ React.createElement(View, { style: {
+    ...styles.sliderContainer,
+    backgroundColor: theme.SURFACE_INVERTED
+  }, onLayout: handleLayout, ref: cardRef }, /* @__PURE__ */ React.createElement(View, { style: styles.buttonTextCOntainer }, /* @__PURE__ */ React.createElement(
+    CustomTypography,
     {
+      text: label,
+      variant: FontStyle.L1_REGULAR,
       style: {
-        ...styles.sliderContainer,
-        backgroundColor: theme.SURFACE_INVERTED
+        color: theme.CONTENT_INVERTED
       }
+    }
+  )), /* @__PURE__ */ React.createElement(
+    Animated.View,
+    {
+      style: [styles.slider, { transform: [{ translateX: pan }] }],
+      ...panResponder.panHandlers
     },
-    /* @__PURE__ */ React.createElement(View, { style: styles.buttonTextCOntainer }, /* @__PURE__ */ React.createElement(
-      CustomTypography,
+    /* @__PURE__ */ React.createElement(
+      View,
       {
-        text: label,
-        variant: FontStyle.L1_REGULAR,
         style: {
-          color: theme.CONTENT_INVERTED
+          ...styles.button,
+          backgroundColor: theme.SURFACE_PRIMARY,
+          width: BUTTON_WIDTH
         }
-      }
-    )),
-    /* @__PURE__ */ React.createElement(
-      Animated.View,
-      {
-        style: [styles.slider, { transform: [{ translateX: pan }] }],
-        ...panResponder.panHandlers
       },
-      /* @__PURE__ */ React.createElement(
-        View,
-        {
-          style: {
-            ...styles.button,
-            backgroundColor: theme.SURFACE_PRIMARY,
-            width: BUTTON_WIDTH
-          }
-        },
-        icon
-      )
+      icon
     )
-  );
+  ));
 };
 var index = withThemeProvider(CustomSlideButton);
 
@@ -4064,5 +4082,5 @@ const copyToClipboard = (textToCopy) => {
   Clipboard.setString(textToCopy);
 };
 
-export { Accordion, 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, CustomIcon, CustomLoader, CustomProgressBar, CustomSearchBar, index 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, CustomDropdown as DropDown, FONT_STYLES, FeedbackForm, FileUpload, FontStyle, Line, NotificationBandge, index$2 as OTPInput, OurOffices as OurOfficesButton, PdfView, PopUp, ShapeType, TagsComponent as SingleSelectionTags, Star as StarRating, index$1 as Stepper, 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$1 as width };
+export { Accordion, 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, CustomIcon, CustomLoader, CustomProgressBar, CustomSearchBar, index 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, CustomDropdown as DropDown, FONT_STYLES, FeedbackForm, FileUpload, FontStyle, Line, NotificationBandge, index$2 as OTPInput, OurOffices as OurOfficesButton, PdfView, PopUp, ShapeType, TagsComponent as SingleSelectionTags, Star as StarRating, index$1 as Stepper, 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