dhre-ui-kit 0.0.190 → 0.0.192

package/lib/index.mjs

@@ -3385,7 +3385,9 @@ const CustomDropdown = (props) => {
     onValueChange,
     itemContainerStyle,
     menuContainerStyle,
-    activeColor
+    activeColor,
+    keepPlaceholderOnFocus = false,
+    selectedItemTextStyle
   } = props;
   const [value, setValue] = useState(defaultValue);
   const [isFocus, setIsFocus] = useState(false);
@@ -3413,6 +3415,22 @@ const CustomDropdown = (props) => {
       onValueChange(newValue);
     }
   };
+  const renderItem = (item) => {
+    const isSelected = item[valueField] === value;
+    return /* @__PURE__ */ React.createElement(View, { style: [styles$7.itemContainer, itemContainerStyle] }, /* @__PURE__ */ React.createElement(
+      Text,
+      {
+        style: [
+          styles$7.itemText,
+          itemTextStyle,
+          // Apply itemTextStyle to all items
+          isSelected && selectedItemTextStyle
+          // Apply selectedItemTextStyle to the selected item
+        ]
+      },
+      item[labelField]
+    ));
+  };
   return /* @__PURE__ */ React.createElement(View, { style: [styles$7.container, containerStyle] }, label && renderLabel(), /* @__PURE__ */ React.createElement(
     Dropdown,
     {
@@ -3428,13 +3446,14 @@ const CustomDropdown = (props) => {
       data: data ?? [],
       labelField,
       valueField,
-      placeholder: !isFocus ? placeholder : "",
+      placeholder: keepPlaceholderOnFocus || !isFocus ? placeholder : "",
       value,
       onFocus: () => setIsFocus(true),
       onBlur: () => setIsFocus(false),
       onChange: handleValueChange,
       iconColor,
       dropdownPosition: "bottom",
+      renderItem,
       itemTextStyle,
       containerStyle: menuContainerStyle,
       activeColor,
@@ -3477,6 +3496,13 @@ const styles$7 = StyleSheet.create({
   },
   itemListStyle: {
     maxHeight: verticalScale(150)
+  },
+  itemContainer: {
+    paddingVertical: verticalScale(8),
+    paddingHorizontal: horizontalScale(12)
+  },
+  itemText: {
+    fontSize: verticalScale(14)
   }
 });
 
@@ -3859,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) => {
@@ -3871,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);
@@ -3917,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(
@@ -4159,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) {
@@ -4184,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) => {
@@ -4193,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 }
+          });
         }
       }
     })
@@ -4207,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,