dhre-ui-kit 0.0.122 → 0.0.124

package/lib/index.d.ts

@@ -600,15 +600,19 @@ interface CustomDropdownProps {
     placeholder?: string;
     containerStyle?: ViewStyle;
     dropdownStyle?: ViewStyle;
+    dropdownFocusStyle?: ViewStyle;
     placeholderStyle?: TextStyle;
     selectedTextStyle?: TextStyle;
     iconStyle?: ImageStyle;
     labelStyle?: TextStyle;
+    labelFocusStyle?: TextStyle;
     defaultValue?: string;
     iconColor?: string;
     itemTextStyle?: TextStyle;
     onValueChange?: (value: string) => void;
     itemContainerStyle?: ViewStyle;
+    menuContainerStyle?: ViewStyle;
+    activeColor?: string;
 }
 declare const CustomDropdown: React$1.FC<CustomDropdownProps>;
 
@@ -670,6 +674,10 @@ interface IProps$1 {
     testId?: string;
     otpContainerStyle?: ViewStyle;
     resendOTP?: () => void;
+    otpHeaderTextStyle?: TextStyle;
+    textInputStyle?: TextStyle;
+    resendTextStyle?: TextStyle;
+    resendOtpColor?: string;
 }
 type OTPInputHandle = {
     reset: () => void;
@@ -688,7 +696,7 @@ interface IProps {
     showStepCount?: boolean;
     showStatus?: boolean;
     data: IData[];
-    completedStatusIcon: React$1.ReactElement;
+    completedStatusIcon?: React$1.ReactElement;
 }
 
 declare const _default$1: (props: IProps) => React$1.JSX.Element;

package/lib/index.js

@@ -250,8 +250,8 @@ const theme = {
     dark: "#404040"
   },
   [Theme.BORDER_SEPRATOR]: {
-    light: "#282828",
-    dark: "#FFFFFF"
+    light: "#F5F5F5",
+    dark: "#282828"
   },
   [Theme.BORDER_SEPERATOR_HEADER]: {
     light: "#E1E1E1",
@@ -296,10 +296,10 @@ const withThemeProvider = (Component) => {
   return (props) => /* @__PURE__ */ React__default["default"].createElement(ThemeProvider, null, /* @__PURE__ */ React__default["default"].createElement(Component, { ...props }));
 };
 
-const { width: width$1, height } = reactNative.Dimensions.get("window");
+const { width, height } = reactNative.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;
 
@@ -1979,7 +1979,7 @@ const styles$m = reactNative.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"
@@ -2089,7 +2089,7 @@ const Toast = React__default["default"].forwardRef(({ sucessIcon, errorIcon }, r
       Progress__namespace.Bar,
       {
         progress,
-        width: width$1 - horizontalScale(48),
+        width: width - horizontalScale(48),
         height: 3,
         color: isSuccess ? "#024324" : "#851D41",
         borderColor: "transparent"
@@ -3275,15 +3275,19 @@ const CustomDropdown = ({
   placeholder,
   containerStyle,
   dropdownStyle,
+  dropdownFocusStyle,
   placeholderStyle,
   selectedTextStyle,
   iconStyle,
   labelStyle,
+  labelFocusStyle,
   defaultValue,
   iconColor,
   itemTextStyle,
   onValueChange,
-  itemContainerStyle
+  itemContainerStyle,
+  menuContainerStyle,
+  activeColor
 }) => {
   const [value, setValue] = React.useState(defaultValue);
   const [isFocus, setIsFocus] = React.useState(false);
@@ -3295,7 +3299,7 @@ const CustomDropdown = ({
           style: [
             styles$6.label,
             labelStyle,
-            isFocus && { color: theme.BORDER_INVERTED["light"] }
+            isFocus && (labelFocusStyle ?? { color: theme.BORDER_INVERTED["light"] })
           ]
         },
         label
@@ -3317,7 +3321,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],
@@ -3333,6 +3337,8 @@ const CustomDropdown = ({
       iconColor,
       dropdownPosition: "bottom",
       itemTextStyle,
+      containerStyle: menuContainerStyle,
+      activeColor,
       itemContainerStyle: [styles$6.itemListStyle, itemContainerStyle]
     }
   ));
@@ -3713,7 +3719,11 @@ const OTPInput = React__default["default"].forwardRef(
     resendOTP,
     errorMessage,
     testId = "",
-    otpContainerStyle
+    otpContainerStyle,
+    otpHeaderTextStyle,
+    textInputStyle,
+    resendTextStyle,
+    resendOtpColor
   }, ref) => {
     const [otp, setOTP] = React.useState("");
     const [isResendOtpEnable, setIsResendOtpEnable] = React.useState(false);
@@ -3728,6 +3738,7 @@ const OTPInput = React__default["default"].forwardRef(
       setIsResendOtpEnable(false);
       enableResendOtp();
       resendOTP?.();
+      setOTP("");
     };
     const enableResendOtp = () => {
       setTimeout(() => {
@@ -3765,14 +3776,15 @@ const OTPInput = React__default["default"].forwardRef(
         onComplete?.(otp);
       }
     }, [otp]);
-    return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: { ...otpContainerStyle }, testID: testId }, /* @__PURE__ */ React__default["default"].createElement(
+    return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: { ...otpContainerStyle }, "data-testid": testId }, /* @__PURE__ */ React__default["default"].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__default["default"].createElement(reactNative.View, { style: { ...styles$2.textInputContainer } }, Array.from({ length }).map((_, index) => /* @__PURE__ */ React__default["default"].createElement(
@@ -3782,7 +3794,8 @@ const OTPInput = React__default["default"].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),
@@ -3811,7 +3824,8 @@ const OTPInput = React__default["default"].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
         }
       }
     ))));
@@ -4016,14 +4030,25 @@ const styles = reactNative.StyleSheet.create({
   }
 });
 
-const { width } = reactNative.Dimensions.get("window");
 const BUTTON_WIDTH = 40;
 const CustomSlideButton = ({
   label,
   onComplete,
   icon
 }) => {
+  const value = React.useRef(0);
+  const cardRef = React.useRef(null);
   const pan = React.useRef(new reactNative.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 = React.useRef(
     reactNative.PanResponder.create({
       onMoveShouldSetPanResponder: (evt, gestureState) => {
@@ -4032,15 +4057,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();
           reactNative.Animated.spring(pan, {
-            toValue: width - BUTTON_WIDTH - 10,
+            toValue: value.current - BUTTON_WIDTH - 10,
             useNativeDriver: false
           }).start();
         } else {
@@ -4053,43 +4078,36 @@ const CustomSlideButton = ({
     })
   ).current;
   const { theme } = useTheme();
-  return /* @__PURE__ */ React__default["default"].createElement(
-    reactNative.View,
+  return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: {
+    ...styles.sliderContainer,
+    backgroundColor: theme.SURFACE_INVERTED
+  }, onLayout: handleLayout, ref: cardRef }, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles.buttonTextCOntainer }, /* @__PURE__ */ React__default["default"].createElement(
+    CustomTypography,
     {
+      text: label,
+      variant: FontStyle.L1_REGULAR,
       style: {
-        ...styles.sliderContainer,
-        backgroundColor: theme.SURFACE_INVERTED
+        color: theme.CONTENT_INVERTED
       }
+    }
+  )), /* @__PURE__ */ React__default["default"].createElement(
+    reactNative.Animated.View,
+    {
+      style: [styles.slider, { transform: [{ translateX: pan }] }],
+      ...panResponder.panHandlers
     },
-    /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles.buttonTextCOntainer }, /* @__PURE__ */ React__default["default"].createElement(
-      CustomTypography,
+    /* @__PURE__ */ React__default["default"].createElement(
+      reactNative.View,
       {
-        text: label,
-        variant: FontStyle.L1_REGULAR,
         style: {
-          color: theme.CONTENT_INVERTED
+          ...styles.button,
+          backgroundColor: theme.SURFACE_PRIMARY,
+          width: BUTTON_WIDTH
         }
-      }
-    )),
-    /* @__PURE__ */ React__default["default"].createElement(
-      reactNative.Animated.View,
-      {
-        style: [styles.slider, { transform: [{ translateX: pan }] }],
-        ...panResponder.panHandlers
       },
-      /* @__PURE__ */ React__default["default"].createElement(
-        reactNative.View,
-        {
-          style: {
-            ...styles.button,
-            backgroundColor: theme.SURFACE_PRIMARY,
-            width: BUTTON_WIDTH
-          }
-        },
-        icon
-      )
+      icon
     )
-  );
+  ));
 };
 var index = withThemeProvider(CustomSlideButton);
 
@@ -4159,5 +4177,5 @@ exports.horizontalScale = horizontalScale;
 exports.moderateScale = moderateScale;
 exports.toastService = toastService;
 exports.verticalScale = verticalScale;
-exports.width = width$1;
+exports.width = width;
 //# sourceMappingURL=index.js.map