dhre-ui-kit 0.0.121 → 0.0.123

package/{dist → lib}/index.mjs

@@ -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;
 
@@ -721,7 +721,7 @@ const CustomButton = ({
     /* @__PURE__ */ React.createElement(
       CustomText$1,
       {
-        text: "shashank",
+        text: title,
         variant: titleVariant,
         style: [
           textStyle,
@@ -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"
@@ -3680,7 +3680,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 +3699,7 @@ const OTPInput = React.forwardRef(
       setIsResendOtpEnable(false);
       enableResendOtp();
       resendOTP?.();
+      setOTP("");
     };
     const enableResendOtp = () => {
       setTimeout(() => {
@@ -3732,14 +3737,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 +3755,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 +3785,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 +3991,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 +4018,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 +4039,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 +4076,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