dhre-ui-kit 0.0.191 → 0.0.193

package/lib/index.d.ts

@@ -706,7 +706,8 @@ interface IProps$1 {
     mode?: 'light' | 'dark';
 }
 type OTPInputHandle = {
-    reset: () => void;
+    reset?: () => void;
+    set?: (newOtp: string) => void;
 };
 
 declare const _default$4: (props: IProps$1 & React$1.RefAttributes<OTPInputHandle>) => React$1.JSX.Element;
@@ -735,6 +736,8 @@ interface CustomSlideButtonProps {
     textStyle?: TextStyle;
     containerStyle?: ViewStyle;
     sliderStyle?: ViewStyle;
+    slideButtonTail?: boolean;
+    slideButtonTailColor?: string;
 }
 
 declare const _default$2: (props: CustomSlideButtonProps) => React$1.JSX.Element;
@@ -1083,9 +1086,9 @@ interface PropertyDetailsProps {
     brandIcon: React.ReactElement;
     title: string;
     subTitle: string;
-    propertyNumber: string;
-    hintIcon: React.ReactElement;
-    btnIcon: React.ReactElement;
+    propertyNumber?: string;
+    hintIcon?: React.ReactElement;
+    btnIcon?: React.ReactElement;
     containerStyle?: ViewStyle;
     onRightIconPress: () => void;
 }

package/lib/index.js

@@ -3918,6 +3918,11 @@ const OTPInput = React__default["default"].forwardRef(
     React__default["default"].useImperativeHandle(ref, () => ({
       reset() {
         setOTP("");
+        refs.current[0]?.focus();
+      },
+      set(newOtp) {
+        setOTP(newOtp);
+        refs.current[newOtp?.length - 1]?.focus();
       }
     }));
     const handleChange = (index, value) => {
@@ -3930,6 +3935,9 @@ const OTPInput = React__default["default"].forwardRef(
         const newOTP = otp.slice(0, -1);
         setOTP(newOTP);
         refs.current[index - 1]?.focus();
+      } else if (value?.length === length) {
+        setOTP(value);
+        refs.current[length - 1]?.focus();
       } else {
         const newOTP = otp.slice(0, -1);
         setOTP(newOTP);
@@ -3976,6 +3984,9 @@ const OTPInput = React__default["default"].forwardRef(
         keyboardType: "numeric",
         ref: (el) => refs.current[index] = el,
         returnKeyType: otp.length === length ? "done" : "next",
+        importantForAutofill: "yes",
+        textContentType: "oneTimeCode",
+        autoComplete: "sms-otp",
         selectionColor: theme$1.CONTENT_PRIMARY
       }
     ))), /* @__PURE__ */ React__default["default"].createElement(
@@ -4218,11 +4229,17 @@ const CustomSlideButton = ({
   textStyle,
   containerStyle,
   sliderStyle,
-  size = BUTTON_WIDTH
+  size = BUTTON_WIDTH,
+  slideButtonTail,
+  slideButtonTailColor = "#fff"
 }) => {
   const value = React.useRef(0);
   const cardRef = React.useRef(null);
   const pan = React.useRef(new reactNative.Animated.Value(0)).current;
+  const slideTailCardRef = React.useRef(null);
+  slideTailCardRef?.current?.setNativeProps({
+    style: { width: 0 }
+  });
   const handleLayout = (event) => {
     const { width } = event.nativeEvent.layout;
     if (cardRef.current) {
@@ -4243,6 +4260,9 @@ const CustomSlideButton = ({
       onPanResponderMove: (evt, gestureState) => {
         if (gestureState.dx < value.current - BUTTON_WIDTH) {
           pan.setValue(gestureState.dx);
+          slideTailCardRef?.current?.setNativeProps({
+            style: { width: gestureState.dx + BUTTON_WIDTH / 2 }
+          });
         }
       },
       onPanResponderRelease: (evt, gestureState) => {
@@ -4252,11 +4272,18 @@ const CustomSlideButton = ({
             toValue: value.current - BUTTON_WIDTH - 10,
             useNativeDriver: false
           }).start();
+          slideTailCardRef?.current?.setNativeProps({
+            style: { width: value.current + BUTTON_WIDTH }
+            // Change the width here
+          });
         } else {
           reactNative.Animated.spring(pan, {
             toValue: 0,
             useNativeDriver: false
           }).start();
+          slideTailCardRef?.current?.setNativeProps({
+            style: { width: 0 }
+          });
         }
       }
     })
@@ -4266,7 +4293,13 @@ const CustomSlideButton = ({
     ...styles$2.sliderContainer,
     backgroundColor: theme.SURFACE_INVERTED,
     ...containerStyle
-  }, onLayout: handleLayout, ref: cardRef }, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$2.buttonTextContainer }, /* @__PURE__ */ React__default["default"].createElement(
+  }, onLayout: handleLayout, ref: cardRef }, slideButtonTail && /* @__PURE__ */ React__default["default"].createElement(
+    reactNative.Animated.View,
+    {
+      ref: slideTailCardRef,
+      style: [{ height: "100%", backgroundColor: slideButtonTailColor }]
+    }
+  ), /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$2.buttonTextContainer }, /* @__PURE__ */ React__default["default"].createElement(
     CustomTypography,
     {
       text: label,
@@ -4605,7 +4638,7 @@ const PropertyDetails = ({
         variant: FontStyle.L1_REGULAR,
         style: { color: theme.CONTENT_PRIMARY }
       }
-    ), /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles.propertyNumber }, /* @__PURE__ */ React__default["default"].createElement(
+    ), propertyNumber && /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles.propertyNumber }, /* @__PURE__ */ React__default["default"].createElement(
       CustomTypography,
       {
         text: propertyNumber,
@@ -4615,7 +4648,7 @@ const PropertyDetails = ({
         }
       }
     ), hintIcon)),
-    /* @__PURE__ */ React__default["default"].createElement(
+    btnIcon && /* @__PURE__ */ React__default["default"].createElement(
       CustomIcon,
       {
         icon: btnIcon,