dhre-ui-kit 0.0.206 → 0.0.207

package/lib/index.mjs

@@ -3917,6 +3917,9 @@ const OTPInput = React.forwardRef(
         const otpRegex = new RegExp(`(\\d{${length}})`, "g");
         const otp2 = otpRegex.exec(message)?.[1];
         setOTP(otp2 ?? "");
+        if (otp2) {
+          refs.current[otp2?.length - 1]?.focus();
+        }
       });
     };
     React.useImperativeHandle(ref, () => ({
@@ -4226,116 +4229,126 @@ const styles$3 = StyleSheet.create({
 });
 
 const BUTTON_WIDTH = 40;
-const CustomSlideButton = ({
-  label,
-  onComplete,
-  icon,
-  textStyle,
-  containerStyle,
-  sliderStyle,
-  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) {
-      cardRef.current.setNativeProps({
-        style: { width }
-        // Change the width here
-      });
-      value.current = width;
-    }
-  };
-  const panResponder = useRef(
-    PanResponder.create({
-      onMoveShouldSetPanResponder: (evt, gestureState) => {
-        return gestureState.dx > 0;
-      },
-      onPanResponderGrant: () => {
-      },
-      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) => {
-        if (gestureState.dx > value.current - BUTTON_WIDTH - 100) {
-          onComplete && onComplete();
-          Animated.spring(pan, {
-            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 }
-          });
-        }
+const CustomSlideButton = React.forwardRef(
+  ({
+    label,
+    onComplete,
+    icon,
+    textStyle,
+    containerStyle,
+    sliderStyle,
+    size = BUTTON_WIDTH,
+    slideButtonTail,
+    slideButtonTailColor = "#fff"
+  }, ref) => {
+    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 }
+    });
+    React.useImperativeHandle(ref, () => ({
+      reset() {
+        Animated.spring(pan, {
+          toValue: 0,
+          useNativeDriver: false
+        }).start();
       }
-    })
-  ).current;
-  const { theme } = useTheme();
-  return /* @__PURE__ */ React.createElement(View, { style: {
-    ...styles$3.sliderContainer,
-    backgroundColor: theme.SURFACE_INVERTED,
-    ...containerStyle
-  }, onLayout: handleLayout, ref: cardRef }, slideButtonTail && /* @__PURE__ */ React.createElement(
-    Animated.View,
-    {
-      ref: slideTailCardRef,
-      style: [{ height: "100%", backgroundColor: slideButtonTailColor }]
-    }
-  ), /* @__PURE__ */ React.createElement(View, { style: styles$3.buttonTextContainer }, /* @__PURE__ */ React.createElement(
-    CustomTypography,
-    {
-      text: label,
-      variant: FontStyle.L1_REGULAR,
-      style: {
-        color: theme.CONTENT_INVERTED,
-        alignSelf: "center",
-        ...textStyle
+    }));
+    const handleLayout = (event) => {
+      const { width } = event.nativeEvent.layout;
+      if (cardRef.current) {
+        cardRef.current.setNativeProps({
+          style: { width }
+          // Change the width here
+        });
+        value.current = width;
       }
-    }
-  )), /* @__PURE__ */ React.createElement(
-    Animated.View,
-    {
-      style: [styles$3.slider, { transform: [{ translateX: pan }] }],
-      ...panResponder.panHandlers
-    },
-    /* @__PURE__ */ React.createElement(
-      View,
+    };
+    const panResponder = useRef(
+      PanResponder.create({
+        onMoveShouldSetPanResponder: (evt, gestureState) => {
+          return gestureState.dx > 0;
+        },
+        onPanResponderGrant: () => {
+        },
+        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) => {
+          if (gestureState.dx > value.current - BUTTON_WIDTH - 100) {
+            onComplete && onComplete();
+            Animated.spring(pan, {
+              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 }
+            });
+          }
+        }
+      })
+    ).current;
+    const { theme } = useTheme();
+    return /* @__PURE__ */ React.createElement(View, { style: {
+      ...styles$3.sliderContainer,
+      backgroundColor: theme.SURFACE_INVERTED,
+      ...containerStyle
+    }, onLayout: handleLayout, ref: cardRef }, slideButtonTail && /* @__PURE__ */ React.createElement(
+      Animated.View,
       {
+        ref: slideTailCardRef,
+        style: [{ height: "100%", backgroundColor: slideButtonTailColor }]
+      }
+    ), /* @__PURE__ */ React.createElement(View, { style: styles$3.buttonTextContainer }, /* @__PURE__ */ React.createElement(
+      CustomTypography,
+      {
+        text: label,
+        variant: FontStyle.L1_REGULAR,
         style: {
-          ...styles$3.button,
-          backgroundColor: theme.SURFACE_PRIMARY,
-          width: verticalScale(size),
-          height: verticalScale(size),
-          borderRadius: verticalScale(size / 2),
-          ...sliderStyle
+          color: theme.CONTENT_INVERTED,
+          alignSelf: "center",
+          ...textStyle
         }
+      }
+    )), /* @__PURE__ */ React.createElement(
+      Animated.View,
+      {
+        style: [styles$3.slider, { transform: [{ translateX: pan }] }],
+        ...panResponder.panHandlers
       },
-      icon
-    )
-  ));
-};
+      /* @__PURE__ */ React.createElement(
+        View,
+        {
+          style: {
+            ...styles$3.button,
+            backgroundColor: theme.SURFACE_PRIMARY,
+            width: verticalScale(size),
+            height: verticalScale(size),
+            borderRadius: verticalScale(size / 2),
+            ...sliderStyle
+          }
+        },
+        icon
+      )
+    ));
+  }
+);
 var index$2 = withThemeProvider(CustomSlideButton);
 
 const copyToClipboard = (textToCopy) => {