dhre-ui-kit 0.0.122 → 0.0.123

package/lib/index.d.ts

@@ -670,6 +670,10 @@ interface IProps$1 {
     testId?: string;
     otpContainerStyle?: ViewStyle;
     resendOTP?: () => void;
+    otpHeaderTextStyle?: TextStyle;
+    textInputStyle?: TextStyle;
+    resendTextStyle?: TextStyle;
+    resendOtpColor?: string;
 }
 type OTPInputHandle = {
     reset: () => void;
@@ -688,7 +692,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

@@ -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"
@@ -3713,7 +3713,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 +3732,7 @@ const OTPInput = React__default["default"].forwardRef(
       setIsResendOtpEnable(false);
       enableResendOtp();
       resendOTP?.();
+      setOTP("");
     };
     const enableResendOtp = () => {
       setTimeout(() => {
@@ -3765,14 +3770,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 +3788,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 +3818,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 +4024,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 +4051,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 +4072,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 +4171,5 @@ exports.horizontalScale = horizontalScale;
 exports.moderateScale = moderateScale;
 exports.toastService = toastService;
 exports.verticalScale = verticalScale;
-exports.width = width$1;
+exports.width = width;
 //# sourceMappingURL=index.js.map