dhre-ui-kit 0.0.191 → 0.0.192

package/lib/index.mjs

@@ -3885,6 +3885,11 @@ const OTPInput = React.forwardRef(
     React.useImperativeHandle(ref, () => ({
       reset() {
         setOTP("");
+        refs.current[0]?.focus();
+      },
+      set(newOtp) {
+        setOTP(newOtp);
+        refs.current[newOtp?.length - 1]?.focus();
       }
     }));
     const handleChange = (index, value) => {
@@ -3897,6 +3902,9 @@ const OTPInput = React.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);
@@ -3943,6 +3951,9 @@ const OTPInput = React.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.createElement(
@@ -4185,11 +4196,17 @@ const CustomSlideButton = ({
   textStyle,
   containerStyle,
   sliderStyle,
-  size = BUTTON_WIDTH
+  size = BUTTON_WIDTH,
+  slideButtonTail,
+  slideButtonTailColor = "#fff"
 }) => {
   const value = useRef(0);
   const cardRef = useRef(null);
   const pan = useRef(new Animated.Value(0)).current;
+  const slideTailCardRef = useRef(null);
+  slideTailCardRef?.current?.setNativeProps({
+    style: { width: 0 }
+  });
   const handleLayout = (event) => {
     const { width } = event.nativeEvent.layout;
     if (cardRef.current) {
@@ -4210,6 +4227,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) => {
@@ -4219,11 +4239,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 {
           Animated.spring(pan, {
             toValue: 0,
             useNativeDriver: false
           }).start();
+          slideTailCardRef?.current?.setNativeProps({
+            style: { width: 0 }
+          });
         }
       }
     })
@@ -4233,7 +4260,13 @@ const CustomSlideButton = ({
     ...styles$2.sliderContainer,
     backgroundColor: theme.SURFACE_INVERTED,
     ...containerStyle
-  }, onLayout: handleLayout, ref: cardRef }, /* @__PURE__ */ React.createElement(View, { style: styles$2.buttonTextContainer }, /* @__PURE__ */ React.createElement(
+  }, onLayout: handleLayout, ref: cardRef }, slideButtonTail && /* @__PURE__ */ React.createElement(
+    Animated.View,
+    {
+      ref: slideTailCardRef,
+      style: [{ height: "100%", backgroundColor: slideButtonTailColor }]
+    }
+  ), /* @__PURE__ */ React.createElement(View, { style: styles$2.buttonTextContainer }, /* @__PURE__ */ React.createElement(
     CustomTypography,
     {
       text: label,