dhre-ui-kit 0.0.247 → 0.0.249

package/lib/index.d.ts

@@ -743,13 +743,15 @@ declare const _default$3: (props: IProps) => React$1.JSX.Element;
 interface CustomSlideButtonProps {
     label?: string;
     onComplete?: () => void;
+    onReset?: () => void;
     icon: React$1.ReactElement;
     size?: number;
     textStyle?: TextStyle;
     containerStyle?: ViewStyle;
     sliderStyle?: ViewStyle;
-    slideButtonTail?: boolean;
-    slideButtonTailColor?: string;
+    sliderBackgroundColor?: string;
+    sliderTextColor?: string;
+    resetTimer?: number;
 }
 type SlideButtonHandle = {
     reset?: () => void;

package/lib/index.js

@@ -7,7 +7,7 @@ var reactRedux = require('react-redux');
 var reactNative = require('react-native');
 var reactNativeGestureHandler = require('react-native-gesture-handler');
 var blur = require('@react-native-community/blur');
-var Svg = require('react-native-svg');
+var LottieView = require('lottie-react-native');
 var Tooltip = require('react-native-walkthrough-tooltip');
 var Pdf = require('react-native-pdf');
 var Progress = require('react-native-progress');
@@ -19,6 +19,7 @@ var reactNativeElementDropdown = require('react-native-element-dropdown');
 var DocumentPicker = require('react-native-document-picker');
 var RNFS = require('react-native-fs');
 var OTPVerify = require('react-native-otp-verify');
+var stylehelper = require('src/utils/stylehelper');
 var Clipboard = require('@react-native-clipboard/clipboard');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -42,7 +43,7 @@ function _interopNamespace(e) {
 }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var Svg__default = /*#__PURE__*/_interopDefaultLegacy(Svg);
+var LottieView__default = /*#__PURE__*/_interopDefaultLegacy(LottieView);
 var Tooltip__default = /*#__PURE__*/_interopDefaultLegacy(Tooltip);
 var Pdf__default = /*#__PURE__*/_interopDefaultLegacy(Pdf);
 var Progress__namespace = /*#__PURE__*/_interopNamespace(Progress);
@@ -746,6 +747,13 @@ const BottomDrawer = ({
 
 const createStyles$3 = (theme) => {
   return reactNative.StyleSheet.create({
+    container: {
+      position: "absolute",
+      left: 0,
+      right: 0,
+      bottom: 0,
+      top: 0
+    },
     backdrop: {
       flex: 1,
       justifyContent: "center",
@@ -781,68 +789,22 @@ const createStyles$3 = (theme) => {
   });
 };
 
+const loaderJson = { "nm": "Main Scene", "ddd": 0, "h": 100, "w": 100, "meta": { "g": "@lottiefiles/creator 1.44.0" }, "layers": [{ "ty": 4, "nm": "6", "sr": 1, "st": 0, "op": 120, "ip": 0, "hd": false, "ddd": 0, "bm": 0, "hasMask": false, "ao": 0, "ks": { "a": { "a": 0, "k": [-2.905, -24.228, 0], "ix": 1 }, "s": { "a": 0, "k": [100, 100, 100], "ix": 6 }, "sk": { "a": 0, "k": 0 }, "p": { "a": 0, "k": [50, 50, 0], "ix": 2 }, "r": { "a": 1, "k": [{ "o": { "x": 0.333, "y": 0 }, "i": { "x": 0.223, "y": 1 }, "s": [0], "t": 10 }, { "s": [360], "t": 100 }], "ix": 10 }, "sa": { "a": 0, "k": 0 }, "o": { "a": 0, "k": 100, "ix": 11 } }, "shapes": [{ "ty": "gr", "bm": 0, "hd": false, "mn": "ADBE Vector Group", "nm": "Ellipse 1", "ix": 1, "cix": 2, "np": 3, "it": [{ "ty": "el", "bm": 0, "hd": false, "mn": "ADBE Vector Shape - Ellipse", "nm": "Ellipse Path 1", "d": 1, "p": { "a": 0, "k": [0, 0], "ix": 3 }, "s": { "a": 0, "k": [14.822, 14.822], "ix": 2 } }, { "ty": "fl", "bm": 0, "hd": false, "mn": "ADBE Vector Graphic - Fill", "nm": "Fill 1", "c": { "a": 0, "k": [0.8, 0.8, 0.8], "ix": 4 }, "r": 1, "o": { "a": 0, "k": 100, "ix": 5 } }, { "ty": "tr", "a": { "a": 0, "k": [0, 0], "ix": 1 }, "s": { "a": 1, "k": [{ "o": { "x": 0.333, "y": 0 }, "i": { "x": 0.236, "y": 1 }, "s": [100, 100], "t": 10 }, { "s": [0, 0], "t": 100 }], "ix": 3 }, "sk": { "a": 0, "k": 0, "ix": 4 }, "p": { "a": 0, "k": [-2.905, -64.316], "ix": 2 }, "r": { "a": 0, "k": 357, "ix": 6 }, "sa": { "a": 0, "k": 0, "ix": 5 }, "o": { "a": 0, "k": 100, "ix": 7 } }] }], "ind": 1 }, { "ty": 4, "nm": "5", "sr": 1, "st": 0, "op": 120, "ip": 0, "hd": false, "ddd": 0, "bm": 0, "hasMask": false, "ao": 0, "ks": { "a": { "a": 0, "k": [-2.905, -24.228, 0], "ix": 1 }, "s": { "a": 0, "k": [100, 100, 100], "ix": 6 }, "sk": { "a": 0, "k": 0 }, "p": { "a": 0, "k": [50, 50, 0], "ix": 2 }, "r": { "a": 1, "k": [{ "o": { "x": 0.333, "y": 0 }, "i": { "x": 0.223, "y": 1 }, "s": [0], "t": 8 }, { "s": [360], "t": 98 }], "ix": 10 }, "sa": { "a": 0, "k": 0 }, "o": { "a": 0, "k": 100, "ix": 11 } }, "shapes": [{ "ty": "gr", "bm": 0, "hd": false, "mn": "ADBE Vector Group", "nm": "Ellipse 1", "ix": 1, "cix": 2, "np": 3, "it": [{ "ty": "el", "bm": 0, "hd": false, "mn": "ADBE Vector Shape - Ellipse", "nm": "Ellipse Path 1", "d": 1, "p": { "a": 0, "k": [0, 0], "ix": 3 }, "s": { "a": 0, "k": [14.822, 14.822], "ix": 2 } }, { "ty": "fl", "bm": 0, "hd": false, "mn": "ADBE Vector Graphic - Fill", "nm": "Fill 1", "c": { "a": 0, "k": [0.8, 0.8, 0.8], "ix": 4 }, "r": 1, "o": { "a": 0, "k": 100, "ix": 5 } }, { "ty": "tr", "a": { "a": 0, "k": [0, 0], "ix": 1 }, "s": { "a": 1, "k": [{ "o": { "x": 0.333, "y": 0 }, "i": { "x": 0.236, "y": 1 }, "s": [80, 80], "t": 8 }, { "s": [20, 20], "t": 98 }], "ix": 3 }, "sk": { "a": 0, "k": 0, "ix": 4 }, "p": { "a": 0, "k": [-2.905, -64.316], "ix": 2 }, "r": { "a": 0, "k": 357, "ix": 6 }, "sa": { "a": 0, "k": 0, "ix": 5 }, "o": { "a": 0, "k": 100, "ix": 7 } }] }], "ind": 2 }, { "ty": 4, "nm": "4", "sr": 1, "st": 0, "op": 120, "ip": 0, "hd": false, "ddd": 0, "bm": 0, "hasMask": false, "ao": 0, "ks": { "a": { "a": 0, "k": [-2.905, -24.228, 0], "ix": 1 }, "s": { "a": 0, "k": [100, 100, 100], "ix": 6 }, "sk": { "a": 0, "k": 0 }, "p": { "a": 0, "k": [50, 50, 0], "ix": 2 }, "r": { "a": 1, "k": [{ "o": { "x": 0.333, "y": 0 }, "i": { "x": 0.223, "y": 1 }, "s": [0], "t": 6 }, { "s": [360], "t": 96 }], "ix": 10 }, "sa": { "a": 0, "k": 0 }, "o": { "a": 0, "k": 100, "ix": 11 } }, "shapes": [{ "ty": "gr", "bm": 0, "hd": false, "mn": "ADBE Vector Group", "nm": "Ellipse 1", "ix": 1, "cix": 2, "np": 3, "it": [{ "ty": "el", "bm": 0, "hd": false, "mn": "ADBE Vector Shape - Ellipse", "nm": "Ellipse Path 1", "d": 1, "p": { "a": 0, "k": [0, 0], "ix": 3 }, "s": { "a": 0, "k": [14.822, 14.822], "ix": 2 } }, { "ty": "fl", "bm": 0, "hd": false, "mn": "ADBE Vector Graphic - Fill", "nm": "Fill 1", "c": { "a": 0, "k": [0.8, 0.8, 0.8], "ix": 4 }, "r": 1, "o": { "a": 0, "k": 100, "ix": 5 } }, { "ty": "tr", "a": { "a": 0, "k": [0, 0], "ix": 1 }, "s": { "a": 1, "k": [{ "o": { "x": 0.333, "y": 0 }, "i": { "x": 0.236, "y": 1 }, "s": [60, 60], "t": 6 }, { "s": [40, 40], "t": 96 }], "ix": 3 }, "sk": { "a": 0, "k": 0, "ix": 4 }, "p": { "a": 0, "k": [-2.905, -64.316], "ix": 2 }, "r": { "a": 0, "k": 357, "ix": 6 }, "sa": { "a": 0, "k": 0, "ix": 5 }, "o": { "a": 0, "k": 100, "ix": 7 } }] }], "ind": 3 }, { "ty": 4, "nm": "3", "sr": 1, "st": 0, "op": 120, "ip": 0, "hd": false, "ddd": 0, "bm": 0, "hasMask": false, "ao": 0, "ks": { "a": { "a": 0, "k": [-2.905, -24.228, 0], "ix": 1 }, "s": { "a": 0, "k": [100, 100, 100], "ix": 6 }, "sk": { "a": 0, "k": 0 }, "p": { "a": 0, "k": [50, 50, 0], "ix": 2 }, "r": { "a": 1, "k": [{ "o": { "x": 0.333, "y": 0 }, "i": { "x": 0.223, "y": 1 }, "s": [0], "t": 4 }, { "s": [360], "t": 94 }], "ix": 10 }, "sa": { "a": 0, "k": 0 }, "o": { "a": 0, "k": 100, "ix": 11 } }, "shapes": [{ "ty": "gr", "bm": 0, "hd": false, "mn": "ADBE Vector Group", "nm": "Ellipse 1", "ix": 1, "cix": 2, "np": 3, "it": [{ "ty": "el", "bm": 0, "hd": false, "mn": "ADBE Vector Shape - Ellipse", "nm": "Ellipse Path 1", "d": 1, "p": { "a": 0, "k": [0, 0], "ix": 3 }, "s": { "a": 0, "k": [14.822, 14.822], "ix": 2 } }, { "ty": "fl", "bm": 0, "hd": false, "mn": "ADBE Vector Graphic - Fill", "nm": "Fill 1", "c": { "a": 0, "k": [0.8, 0.8, 0.8], "ix": 4 }, "r": 1, "o": { "a": 0, "k": 100, "ix": 5 } }, { "ty": "tr", "a": { "a": 0, "k": [0, 0], "ix": 1 }, "s": { "a": 1, "k": [{ "o": { "x": 0.333, "y": 0 }, "i": { "x": 0.236, "y": 1 }, "s": [40, 40], "t": 4 }, { "s": [60, 60], "t": 94 }], "ix": 3 }, "sk": { "a": 0, "k": 0, "ix": 4 }, "p": { "a": 0, "k": [-2.905, -64.316], "ix": 2 }, "r": { "a": 0, "k": 357, "ix": 6 }, "sa": { "a": 0, "k": 0, "ix": 5 }, "o": { "a": 0, "k": 100, "ix": 7 } }] }], "ind": 4 }, { "ty": 4, "nm": "2", "sr": 1, "st": 0, "op": 120, "ip": 0, "hd": false, "ddd": 0, "bm": 0, "hasMask": false, "ao": 0, "ks": { "a": { "a": 0, "k": [-2.905, -24.228, 0], "ix": 1 }, "s": { "a": 0, "k": [100, 100, 100], "ix": 6 }, "sk": { "a": 0, "k": 0 }, "p": { "a": 0, "k": [50, 50, 0], "ix": 2 }, "r": { "a": 1, "k": [{ "o": { "x": 0.333, "y": 0 }, "i": { "x": 0.223, "y": 1 }, "s": [0], "t": 2 }, { "s": [360], "t": 92 }], "ix": 10 }, "sa": { "a": 0, "k": 0 }, "o": { "a": 0, "k": 100, "ix": 11 } }, "shapes": [{ "ty": "gr", "bm": 0, "hd": false, "mn": "ADBE Vector Group", "nm": "Ellipse 1", "ix": 1, "cix": 2, "np": 3, "it": [{ "ty": "el", "bm": 0, "hd": false, "mn": "ADBE Vector Shape - Ellipse", "nm": "Ellipse Path 1", "d": 1, "p": { "a": 0, "k": [0, 0], "ix": 3 }, "s": { "a": 0, "k": [14.822, 14.822], "ix": 2 } }, { "ty": "fl", "bm": 0, "hd": false, "mn": "ADBE Vector Graphic - Fill", "nm": "Fill 1", "c": { "a": 0, "k": [0.8, 0.8, 0.8], "ix": 4 }, "r": 1, "o": { "a": 0, "k": 100, "ix": 5 } }, { "ty": "tr", "a": { "a": 0, "k": [0, 0], "ix": 1 }, "s": { "a": 1, "k": [{ "o": { "x": 0.333, "y": 0 }, "i": { "x": 0.236, "y": 1 }, "s": [20, 20], "t": 2 }, { "s": [80, 80], "t": 92 }], "ix": 3 }, "sk": { "a": 0, "k": 0, "ix": 4 }, "p": { "a": 0, "k": [-2.905, -64.316], "ix": 2 }, "r": { "a": 0, "k": 357, "ix": 6 }, "sa": { "a": 0, "k": 0, "ix": 5 }, "o": { "a": 0, "k": 100, "ix": 7 } }] }], "ind": 5 }, { "ty": 4, "nm": "1", "sr": 1, "st": 0, "op": 120, "ip": 0, "hd": false, "ddd": 0, "bm": 0, "hasMask": false, "ao": 0, "ks": { "a": { "a": 0, "k": [-2.905, -24.228, 0], "ix": 1 }, "s": { "a": 0, "k": [100, 100, 100], "ix": 6 }, "sk": { "a": 0, "k": 0 }, "p": { "a": 0, "k": [50, 50, 0], "ix": 2 }, "r": { "a": 1, "k": [{ "o": { "x": 0.333, "y": 0 }, "i": { "x": 0.223, "y": 1 }, "s": [0], "t": 0 }, { "s": [360], "t": 90 }], "ix": 10 }, "sa": { "a": 0, "k": 0 }, "o": { "a": 0, "k": 100, "ix": 11 } }, "shapes": [{ "ty": "gr", "bm": 0, "hd": false, "mn": "ADBE Vector Group", "nm": "Ellipse 1", "ix": 1, "cix": 2, "np": 3, "it": [{ "ty": "el", "bm": 0, "hd": false, "mn": "ADBE Vector Shape - Ellipse", "nm": "Ellipse Path 1", "d": 1, "p": { "a": 0, "k": [0, 0], "ix": 3 }, "s": { "a": 0, "k": [14.822, 14.822], "ix": 2 } }, { "ty": "fl", "bm": 0, "hd": false, "mn": "ADBE Vector Graphic - Fill", "nm": "Fill 1", "c": { "a": 0, "k": [0.8, 0.8, 0.8], "ix": 4 }, "r": 1, "o": { "a": 0, "k": 100, "ix": 5 } }, { "ty": "tr", "a": { "a": 0, "k": [0, 0], "ix": 1 }, "s": { "a": 1, "k": [{ "o": { "x": 0.333, "y": 0 }, "i": { "x": 0.236, "y": 1 }, "s": [0, 0], "t": 0 }, { "s": [100, 100], "t": 90 }], "ix": 3 }, "sk": { "a": 0, "k": 0, "ix": 4 }, "p": { "a": 0, "k": [-2.905, -64.316], "ix": 2 }, "r": { "a": 0, "k": 357, "ix": 6 }, "sa": { "a": 0, "k": 0, "ix": 5 }, "o": { "a": 0, "k": 100, "ix": 7 } }] }], "ind": 6 }], "v": "5.7.0", "fr": 60, "op": 90, "ip": 0, "assets": [] };
 const CustomLoader = ({ loading, loadingText = "Loading..." }) => {
-  const rotateAnim = React.useRef(new reactNative.Animated.Value(0)).current;
   const { theme, mode } = useTheme();
   const styles = createStyles$3(theme);
-  React.useEffect(() => {
-    if (loading) {
-      reactNative.Animated.loop(
-        reactNative.Animated.timing(rotateAnim, {
-          toValue: 1,
-          duration: 1500,
-          easing: reactNative.Easing.linear,
-          useNativeDriver: true
-        })
-      ).start();
-    } else {
-      rotateAnim.stopAnimation();
-      rotateAnim.setValue(0);
-    }
-    return () => {
-      rotateAnim.stopAnimation();
-    };
-  }, [loading, rotateAnim]);
   if (!loading) return null;
-  const spin = rotateAnim.interpolate({
-    inputRange: [0, 1],
-    outputRange: ["0deg", "360deg"]
-  });
-  return /* @__PURE__ */ React__default["default"].createElement(reactNative.Modal, { transparent: true, visible: loading, animationType: "fade" }, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles.backdrop }, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles.box }, /* @__PURE__ */ React__default["default"].createElement(reactNative.Animated.View, { style: [styles.loader, { transform: [{ rotate: spin }] }] }, /* @__PURE__ */ React__default["default"].createElement(Svg__default["default"], { width: "100", height: "100", viewBox: "0 0 100 100" }, /* @__PURE__ */ React__default["default"].createElement(Svg.Defs, null, /* @__PURE__ */ React__default["default"].createElement(Svg.LinearGradient, { id: "grad", x1: "0%", y1: "0%", x2: "100%", y2: "100%" }, /* @__PURE__ */ React__default["default"].createElement(Svg.Stop, { offset: "0%", stopColor: "#000000", stopOpacity: "2" }), /* @__PURE__ */ React__default["default"].createElement(
-    Svg.Stop,
-    {
-      offset: "40%",
-      stopColor: mode === "dark" ? "#5A5A5A00" : "#686868",
-      stopOpacity: "5"
-    }
-  ), /* @__PURE__ */ React__default["default"].createElement(
-    Svg.Stop,
-    {
-      offset: "100%",
-      stopColor: mode === "dark" ? "#FFFFFF" : "#AAAAAA",
-      stopOpacity: ".9"
-    }
-  ))), /* @__PURE__ */ React__default["default"].createElement(
-    Svg.Circle,
-    {
-      cx: "50",
-      cy: "50",
-      r: "40",
-      stroke: "url(#grad)",
-      strokeWidth: "8",
-      fill: "none",
-      strokeDasharray: "250",
-      strokeLinecap: "round"
-    }
-  ))), /* @__PURE__ */ React__default["default"].createElement(
-    CustomText$1,
-    {
-      text: loadingText,
-      style: styles.text,
-      variant: FontStyle.B4_REGULAR,
-      textColor: "#000000"
-    }
-  ))));
+  else {
+    return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles.container }, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles.backdrop }, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles.box }, /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles.loader }, /* @__PURE__ */ React__default["default"].createElement(LottieView__default["default"], { style: styles.loader, source: loaderJson, autoPlay: true, loop: true })), /* @__PURE__ */ React__default["default"].createElement(
+      CustomText$1,
+      {
+        text: loadingText,
+        style: styles.text,
+        variant: FontStyle.B4_REGULAR,
+        textColor: "#000000"
+      }
+    ))));
+  }
 };
 var CustomLoader$1 = withThemeProvider(CustomLoader);
 
@@ -4417,8 +4379,8 @@ const styles$3 = reactNative.StyleSheet.create({
     alignItems: "center"
   },
   sliderContainer: {
-    height: verticalScale(48),
-    borderRadius: moderateScale(25),
+    height: stylehelper.verticalScale(48),
+    borderRadius: stylehelper.moderateScale(25),
     overflow: "hidden",
     justifyContent: "center"
   },
@@ -4429,11 +4391,11 @@ const styles$3 = reactNative.StyleSheet.create({
     justifyContent: "center"
   },
   button: {
-    height: verticalScale(40),
+    height: stylehelper.verticalScale(40),
     justifyContent: "center",
     alignItems: "center",
-    borderRadius: moderateScale(20),
-    margin: moderateScale(4)
+    borderRadius: stylehelper.moderateScale(20),
+    margin: 4
   },
   buttonTextContainer: {
     position: "absolute",
@@ -4442,7 +4404,8 @@ const styles$3 = reactNative.StyleSheet.create({
     bottom: 0,
     top: 0,
     alignItems: "center",
-    justifyContent: "center"
+    justifyContent: "center",
+    borderRadius: 25
   }
 });
 
@@ -4451,30 +4414,25 @@ const CustomSlideButton = React__default["default"].forwardRef(
   ({
     label,
     onComplete,
+    onReset,
     icon,
     textStyle,
     containerStyle,
     sliderStyle,
     size = BUTTON_WIDTH,
-    slideButtonTail,
-    slideButtonTailColor = "#fff"
+    sliderBackgroundColor = "#fff",
+    sliderTextColor = "#000",
+    resetTimer = 2e3
   }, ref) => {
     const value = React.useRef(0);
     const cardRef = React.useRef(null);
     const [translateX] = React.useState(new reactNative.Animated.Value(0));
-    const slideTailCardRef = React.useRef(null);
-    slideTailCardRef?.current?.setNativeProps({
-      style: { width: 0 }
-    });
+    const sliderConteinerRef = React.useRef(null);
+    const [color, setColor] = React.useState(new reactNative.Animated.Value(0));
+    const [sliderBackgroundColorRef, setSliderBackgroundColorRef] = React.useState(new reactNative.Animated.Value(0));
     React__default["default"].useImperativeHandle(ref, () => ({
       reset() {
-        reactNative.Animated.spring(translateX, {
-          toValue: 0,
-          useNativeDriver: false
-        }).start();
-        slideTailCardRef?.current?.setNativeProps({
-          style: { width: 0 }
-        });
+        resetAll();
       }
     }));
     const handleLayout = (event) => {
@@ -4485,68 +4443,102 @@ const CustomSlideButton = React__default["default"].forwardRef(
           // Change the width here
         });
         value.current = width;
+        sliderConteinerRef?.current?.setNativeProps({
+          style: { width }
+        });
       }
     };
+    const resetAll = () => {
+      reactNative.Animated.timing(translateX, {
+        toValue: 0,
+        useNativeDriver: false
+      }).start();
+      reactNative.Animated.timing(sliderBackgroundColorRef, {
+        toValue: 0,
+        duration: 0,
+        // no transition time, immediate change
+        useNativeDriver: false
+        // because we're animating the color, not layout
+      }).start();
+      reactNative.Animated.timing(color, {
+        toValue: 0,
+        delay: 300,
+        // no transition time, immediate change
+        useNativeDriver: false
+        // because we're animating the color, not layout
+      }).start();
+      onReset?.();
+    };
     const panResponder = reactNative.PanResponder.create({
       onMoveShouldSetPanResponder: (e, gestureState) => {
         return gestureState.dx !== 0;
       },
       onPanResponderMove: (evt, gestureState) => {
-        if (gestureState.dx > 0) {
+        if (gestureState.dx > 0 && gestureState.dx <= value?.current - BUTTON_WIDTH - 8) {
           translateX.setValue(gestureState.dx);
-          slideTailCardRef?.current?.setNativeProps({
-            style: { width: gestureState.dx + BUTTON_WIDTH / 2 }
-          });
+          let colorValue = gestureState.dx > value.current / 3 ? 1 : 0;
+          reactNative.Animated.timing(color, {
+            toValue: colorValue,
+            duration: 0,
+            // no transition time, immediate change
+            useNativeDriver: false
+            // because we're animating the color, not layout
+          }).start();
         }
       },
       onPanResponderRelease: (e, gestureState) => {
-        if (gestureState.dx >= value.current * 0.7) {
+        if (gestureState.dx >= value.current * 0.8) {
           reactNative.Animated.timing(translateX, {
-            toValue: value.current - BUTTON_WIDTH - 12,
+            toValue: value?.current - (BUTTON_WIDTH + 8),
             // Slide to the end
             duration: 300,
             useNativeDriver: false
-          }).start(() => {
-            onComplete?.();
-          });
-          slideTailCardRef?.current?.setNativeProps({
-            style: { width: value.current + BUTTON_WIDTH }
-            // Change the width here
-          });
-        } else {
-          reactNative.Animated.spring(translateX, {
-            toValue: 0,
+          }).start();
+          reactNative.Animated.timing(sliderBackgroundColorRef, {
+            toValue: 1,
+            duration: 0,
+            // no transition time, immediate change
             useNativeDriver: false
+            // because we're animating the color, not layout
           }).start();
-          slideTailCardRef?.current?.setNativeProps({
-            style: { width: 0 }
-          });
+          onComplete?.();
+          setTimeout(() => {
+            resetAll();
+          }, resetTimer);
+        } else {
+          resetAll();
         }
       }
     });
+    const textColor = color.interpolate({
+      inputRange: [0, 1],
+      outputRange: [sliderTextColor, "transparent"]
+    });
+    const backgroundColor = sliderBackgroundColorRef.interpolate({
+      inputRange: [0, 1],
+      outputRange: [sliderBackgroundColor, "transparent"]
+    });
     const { theme } = useTheme();
     return /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: {
       ...styles$3.sliderContainer,
       backgroundColor: theme.SURFACE_INVERTED,
       ...containerStyle
-    }, onLayout: handleLayout, ref: cardRef }, slideButtonTail && /* @__PURE__ */ React__default["default"].createElement(
+    }, onLayout: handleLayout, ref: cardRef }, /* @__PURE__ */ React__default["default"].createElement(
       reactNative.Animated.View,
       {
-        ref: slideTailCardRef,
-        style: [{ height: "100%", width: 0, backgroundColor: slideButtonTailColor }]
+        style: [styles$3.buttonTextContainer, { backgroundColor, transform: [{ translateX }] }],
+        ref: sliderConteinerRef
       }
-    ), /* @__PURE__ */ React__default["default"].createElement(reactNative.View, { style: styles$3.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,
-          alignSelf: "center",
-          ...textStyle
-        }
-      }
-    )), /* @__PURE__ */ React__default["default"].createElement(
+        style: styles$3.buttonTextContainer
+      },
+      /* @__PURE__ */ React__default["default"].createElement(reactNative.Animated.Text, { style: [{
+        alignSelf: "center",
+        ...textStyle
+      }, { color: textColor }] }, label)
+    ), /* @__PURE__ */ React__default["default"].createElement(
       reactNative.Animated.View,
       {
         style: [styles$3.slider, { transform: [{ translateX }] }],