@kaushverse/pickify 1.1.8 → 1.1.9

package/dist/index.d.mts

@@ -151,6 +151,9 @@ type Props = {
     styles?: FloatingButtonStyles;
     style?: ViewStyle;
     mainIconName?: string;
+    spacing?: number;
+    offsetX?: number;
+    offsetY?: number;
 };
 declare class FloatingButton extends React$1.Component<Props> {
     animation: Animated.Value;

package/dist/index.d.ts

@@ -151,6 +151,9 @@ type Props = {
     styles?: FloatingButtonStyles;
     style?: ViewStyle;
     mainIconName?: string;
+    spacing?: number;
+    offsetX?: number;
+    offsetY?: number;
 };
 declare class FloatingButton extends React$1.Component<Props> {
     animation: Animated.Value;

package/dist/index.js

@@ -293,27 +293,39 @@ function MultiPickerGroup({
 }) {
   const [open, setOpen] = (0, import_react2.useState)(false);
   const [contentHeight, setContentHeight] = (0, import_react2.useState)(0);
-  const [isMeasured, setIsMeasured] = (0, import_react2.useState)(false);
+  const [isMounted, setIsMounted] = (0, import_react2.useState)(false);
   const animatedHeight = (0, import_react2.useRef)(new import_react_native2.Animated.Value(0)).current;
+  const animationRef = (0, import_react2.useRef)(null);
   (0, import_react2.useEffect)(() => {
-    if (defaultOpen && contentHeight > 0 && !isMeasured) {
-      setIsMeasured(true);
+    setIsMounted(true);
+    return () => {
+      if (animationRef.current) {
+        animationRef.current.stop();
+      }
+    };
+  }, []);
+  (0, import_react2.useEffect)(() => {
+    if (defaultOpen && contentHeight > 0 && !open) {
       animatedHeight.setValue(contentHeight);
       setOpen(true);
     }
-  }, [contentHeight, defaultOpen, isMeasured]);
+  }, [defaultOpen, contentHeight]);
   const toggle = () => {
     if (contentHeight === 0) return;
-    const newOpenState = !open;
-    const toValue = newOpenState ? contentHeight : 0;
-    import_react_native2.Animated.timing(animatedHeight, {
+    if (animationRef.current) {
+      animationRef.current.stop();
+    }
+    const toValue = open ? 0 : contentHeight;
+    animationRef.current = import_react_native2.Animated.timing(animatedHeight, {
       toValue,
-      duration: 250,
+      duration: 200,
       useNativeDriver: false
-    }).start(() => {
-      setOpen(newOpenState);
     });
-    setOpen(newOpenState);
+    animationRef.current.start(() => {
+      setOpen(!open);
+      animationRef.current = null;
+    });
+    setOpen(!open);
   };
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native2.View, { style: styles.group, children: [
     /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
@@ -338,9 +350,11 @@ function MultiPickerGroup({
         style: styles.hidden,
         pointerEvents: "none",
         onLayout: (e) => {
-          const height = e.nativeEvent.layout.height;
-          if (height > 0 && height !== contentHeight) {
-            setContentHeight(height);
+          if (isMounted) {
+            const height = e.nativeEvent.layout.height;
+            if (height > 0 && height !== contentHeight) {
+              setContentHeight(height);
+            }
           }
         },
         children
@@ -371,8 +385,8 @@ var styles = import_react_native2.StyleSheet.create({
     flexDirection: "row",
     justifyContent: "space-between",
     alignItems: "center",
-    paddingVertical: 12,
-    paddingHorizontal: 8,
+    paddingVertical: 14,
+    paddingHorizontal: 12,
     backgroundColor: "#F9FAFB",
     borderRadius: 8
   },
@@ -385,8 +399,8 @@ var styles = import_react_native2.StyleSheet.create({
     overflow: "hidden"
   },
   content: {
-    marginTop: 6,
-    paddingHorizontal: 8,
+    paddingTop: 8,
+    paddingHorizontal: 12,
     paddingBottom: 4
   },
   hidden: {
@@ -469,6 +483,7 @@ var defaultStyles2 = import_react_native3.StyleSheet.create({
 
 // src/core/MultiPickerModal.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
+var { height: SCREEN_HEIGHT } = import_react_native4.Dimensions.get("window");
 function MultiPickerModal({
   visible,
   setVisible,
@@ -486,36 +501,67 @@ function MultiPickerModal({
 }) {
   const [internalVisible, setInternalVisible] = (0, import_react3.useState)(false);
   const [modalKey, setModalKey] = (0, import_react3.useState)(0);
-  const slideAnim = (0, import_react3.useRef)(new import_react_native4.Animated.Value(0)).current;
+  const slideAnim = (0, import_react3.useRef)(new import_react_native4.Animated.Value(SCREEN_HEIGHT)).current;
+  const backdropAnim = (0, import_react3.useRef)(new import_react_native4.Animated.Value(0)).current;
+  const isAnimating = (0, import_react3.useRef)(false);
   const isControlled = visible !== void 0 && setVisible !== void 0;
   const isVisible = isControlled ? visible : internalVisible;
   (0, import_react3.useEffect)(() => {
     if (isVisible) {
       setModalKey((prev) => prev + 1);
-      import_react_native4.Animated.spring(slideAnim, {
-        toValue: 1,
-        useNativeDriver: true,
-        damping: 15,
-        mass: 0.8,
-        stiffness: 150
-      }).start();
+      openModal();
     } else {
+      closeModal();
+    }
+  }, [isVisible]);
+  const openModal = () => {
+    if (isAnimating.current) return;
+    isAnimating.current = true;
+    import_react_native4.Animated.parallel([
       import_react_native4.Animated.spring(slideAnim, {
         toValue: 0,
         useNativeDriver: true,
-        damping: 15,
+        damping: 20,
         mass: 0.8,
-        stiffness: 150
-      }).start();
-    }
-  }, [isVisible]);
+        stiffness: 200
+      }),
+      import_react_native4.Animated.timing(backdropAnim, {
+        toValue: 1,
+        duration: 200,
+        useNativeDriver: true
+      })
+    ]).start(() => {
+      isAnimating.current = false;
+    });
+  };
+  const closeModal = () => {
+    if (isAnimating.current) return;
+    isAnimating.current = true;
+    import_react_native4.Animated.parallel([
+      import_react_native4.Animated.timing(slideAnim, {
+        toValue: SCREEN_HEIGHT,
+        duration: 250,
+        useNativeDriver: true
+      }),
+      import_react_native4.Animated.timing(backdropAnim, {
+        toValue: 0,
+        duration: 200,
+        useNativeDriver: true
+      })
+    ]).start(() => {
+      isAnimating.current = false;
+      if (!isControlled) {
+        setInternalVisible(false);
+      }
+    });
+  };
   const open = () => {
     if (isControlled) setVisible(true);
     else setInternalVisible(true);
   };
   const close = () => {
     if (isControlled) setVisible(false);
-    else setInternalVisible(false);
+    else closeModal();
   };
   const handleSelect = (val) => {
     const updated = toggleValue(selectedValues, val);
@@ -526,11 +572,14 @@ function MultiPickerModal({
     const all = groups.length ? groups.flatMap((g) => g.data) : options;
     const selectedItems = all.filter((o) => selectedValues.includes(o.value)).map((o) => o.label);
     if (selectedItems.length === 0) return placeholder;
+    if (selectedItems.length > 2) {
+      return `${selectedItems.slice(0, 2).join(", ")} +${selectedItems.length - 2}`;
+    }
     return selectedItems.join(", ");
   };
   const renderList = () => {
     if (groups.length > 0) {
-      return groups.map((group, index) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      return groups.map((group) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
         MultiPickerGroup,
         {
           label: group.label,
@@ -563,15 +612,14 @@ function MultiPickerModal({
       item.value
     ));
   };
-  const modalAnimatedStyle = {
-    transform: [
-      {
-        translateY: slideAnim.interpolate({
-          inputRange: [0, 1],
-          outputRange: [600, 0]
-        })
-      }
-    ]
+  const backdropStyle = {
+    backgroundColor: backdropAnim.interpolate({
+      inputRange: [0, 1],
+      outputRange: ["rgba(0,0,0,0)", "rgba(0,0,0,0.5)"]
+    })
+  };
+  const modalStyle = {
+    transform: [{ translateY: slideAnim }]
   };
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
     label && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.Text, { style: [defaultStyles3.label, styles2?.label], children: label }),
@@ -596,7 +644,7 @@ function MultiPickerModal({
           ),
           renderInputIcon?.({
             name: "chevron-down",
-            size: 18,
+            size: 20,
             color: "#6B7280"
           })
         ]
@@ -610,35 +658,45 @@ function MultiPickerModal({
         transparent: true,
         animationType: "none",
         onRequestClose: close,
-        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.View, { style: [defaultStyles3.overlay, styles2?.overlay], children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
-          import_react_native4.Animated.View,
-          {
-            style: [
-              defaultStyles3.container,
-              styles2?.container,
-              modalAnimatedStyle
-            ],
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-                import_react_native4.TouchableOpacity,
-                {
-                  onPress: close,
-                  style: [defaultStyles3.done, styles2?.doneBtn],
-                  activeOpacity: 0.7,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.Text, { style: [defaultStyles3.doneText, styles2?.doneText], children: "Done" })
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-                import_react_native4.ScrollView,
-                {
-                  showsVerticalScrollIndicator: false,
-                  contentContainerStyle: defaultStyles3.scrollContent,
-                  children: renderList()
-                }
-              )
-            ]
-          }
-        ) })
+        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native4.Animated.View, { style: [defaultStyles3.overlay, backdropStyle], children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            import_react_native4.TouchableOpacity,
+            {
+              style: defaultStyles3.backdropTouchable,
+              activeOpacity: 1,
+              onPress: close
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+            import_react_native4.Animated.View,
+            {
+              style: [defaultStyles3.container, styles2?.container, modalStyle],
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native4.View, { style: defaultStyles3.header, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.View, { style: defaultStyles3.handle }),
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.Text, { style: defaultStyles3.headerTitle, children: "Select Options" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                    import_react_native4.TouchableOpacity,
+                    {
+                      onPress: close,
+                      style: defaultStyles3.doneBtn,
+                      activeOpacity: 0.7,
+                      children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.Text, { style: defaultStyles3.doneText, children: "Done" })
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+                  import_react_native4.ScrollView,
+                  {
+                    showsVerticalScrollIndicator: false,
+                    contentContainerStyle: defaultStyles3.scrollContent,
+                    children: renderList()
+                  }
+                )
+              ]
+            }
+          )
+        ] })
       }
     )
   ] });
@@ -675,34 +733,71 @@ var defaultStyles3 = import_react_native4.StyleSheet.create({
   },
   overlay: {
     flex: 1,
-    justifyContent: "flex-end",
-    backgroundColor: "rgba(0,0,0,0.4)"
+    justifyContent: "flex-end"
+  },
+  backdropTouchable: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0
   },
   container: {
-    backgroundColor: "#fff",
-    padding: 20,
+    backgroundColor: "#FFFFFF",
     borderTopLeftRadius: 20,
     borderTopRightRadius: 20,
     maxHeight: "70%",
-    minHeight: "40%"
+    minHeight: "40%",
+    shadowColor: "#000",
+    shadowOffset: {
+      width: 0,
+      height: -2
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
+    elevation: 5
   },
-  scrollContent: {
-    paddingBottom: 20
+  header: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    paddingHorizontal: 20,
+    paddingTop: 12,
+    paddingBottom: 16,
+    borderBottomWidth: 1,
+    borderBottomColor: "#F0F0F0"
   },
-  done: {
+  handle: {
+    width: 40,
+    height: 4,
+    backgroundColor: "#E5E7EB",
+    borderRadius: 2,
+    position: "absolute",
+    top: 8,
+    alignSelf: "center"
+  },
+  headerTitle: {
+    fontSize: 16,
+    fontWeight: "600",
+    color: "#1F2937",
+    flex: 1,
+    textAlign: "center"
+  },
+  doneBtn: {
+    paddingVertical: 6,
+    paddingHorizontal: 12,
     backgroundColor: "#6366f1",
-    paddingVertical: 10,
-    paddingHorizontal: 14,
-    borderRadius: 10,
-    alignSelf: "flex-end",
-    marginBottom: 16,
-    minWidth: 80,
-    alignItems: "center"
+    borderRadius: 8
   },
   doneText: {
-    color: "#fff",
+    color: "#FFFFFF",
     fontWeight: "600",
     fontSize: 14
+  },
+  scrollContent: {
+    paddingHorizontal: 20,
+    paddingTop: 12,
+    paddingBottom: 24
   }
 });
 
@@ -710,6 +805,7 @@ var defaultStyles3 = import_react_native4.StyleSheet.create({
 var import_react4 = __toESM(require("react"));
 var import_react_native5 = require("react-native");
 var import_jsx_runtime5 = require("react/jsx-runtime");
+var { width: SCREEN_WIDTH, height: SCREEN_HEIGHT2 } = import_react_native5.Dimensions.get("window");
 var FloatingButton = class extends import_react4.default.Component {
   animation = new import_react_native5.Animated.Value(0);
   open = false;
@@ -717,8 +813,8 @@ var FloatingButton = class extends import_react4.default.Component {
     import_react_native5.Animated.spring(this.animation, {
       toValue: this.open ? 0 : 1,
       useNativeDriver: true,
-      damping: 12,
-      mass: 0.6,
+      damping: 15,
+      mass: 0.8,
       stiffness: 180
     }).start();
     this.open = !this.open;
@@ -729,26 +825,28 @@ var FloatingButton = class extends import_react4.default.Component {
       radius = 100,
       actions,
       renderItemIcon,
-      styles: styles2
+      styles: styles2,
+      spacing = 75
+      // Default spacing between buttons
     } = this.props;
     let translateX = 0;
     let translateY = 0;
     if (mode === "vertical") {
-      translateY = -70 * (index + 1);
+      translateY = -spacing * (index + 1);
       translateX = 0;
     }
     if (mode === "horizontal") {
-      translateX = -70 * (index + 1);
+      translateX = -spacing * (index + 1);
       translateY = 0;
     }
     if (mode === "circle") {
       const totalActions = actions.length;
-      const startAngle = -Math.PI / 3;
-      const endAngle = -Math.PI * 0.8;
-      const angle = startAngle + index / (totalActions - 1 || 1) * (endAngle - startAngle);
-      const adjustedRadius = radius * 0.65;
-      translateX = adjustedRadius * Math.cos(angle);
-      translateY = adjustedRadius * Math.sin(angle);
+      const startAngle = Math.PI * 0.85;
+      const endAngle = Math.PI * 0.15;
+      const angle = startAngle - index / (totalActions - 1 || 1) * (startAngle - endAngle);
+      const adjustedRadius = radius;
+      translateX = -adjustedRadius * Math.cos(angle);
+      translateY = -adjustedRadius * Math.sin(angle);
     }
     const animStyle = {
       transform: [
@@ -802,7 +900,15 @@ var FloatingButton = class extends import_react4.default.Component {
     );
   };
   render() {
-    const { actions, renderMainIcon, styles: styles2, style, mainIconName } = this.props;
+    const {
+      renderMainIcon,
+      styles: styles2,
+      style,
+      mainIconName,
+      mode = "vertical",
+      offsetX = 24,
+      offsetY = 100
+    } = this.props;
     const rotation = {
       transform: [
         {
@@ -824,32 +930,26 @@ var FloatingButton = class extends import_react4.default.Component {
       ]
     };
     const mainIcon = mainIconName || "add";
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react_native5.View, { style: [defaultStyles4.container, styles2?.container, style], children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    const containerStyle = [
+      defaultStyles4.container,
+      styles2?.container,
+      style,
+      {
+        bottom: offsetY,
+        right: offsetX
+      }
+    ];
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react_native5.View, { style: containerStyle, children: [
+      this.props.actions.map(this.renderAction),
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native5.TouchableWithoutFeedback, { onPress: this.toggleMenu, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
         import_react_native5.Animated.View,
         {
           style: [
-            defaultStyles4.circleContainer,
-            styles2?.circleContainer,
-            {
-              transform: [
-                {
-                  scale: this.animation.interpolate({
-                    inputRange: [0, 1],
-                    outputRange: [0, 1]
-                  })
-                }
-              ],
-              opacity: this.animation
-            }
+            defaultStyles4.mainButtonWrapper,
+            styles2?.mainButton,
+            rotation,
+            scale
           ],
-          children: actions.map(this.renderAction)
-        }
-      ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native5.TouchableWithoutFeedback, { onPress: this.toggleMenu, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        import_react_native5.Animated.View,
-        {
-          style: [defaultStyles4.mainButtonWrapper, rotation, scale],
           children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native5.View, { style: [defaultStyles4.button, styles2?.mainButton], children: renderMainIcon?.({
             name: mainIcon,
             size: 26,
@@ -863,44 +963,34 @@ var FloatingButton = class extends import_react4.default.Component {
 var defaultStyles4 = import_react_native5.StyleSheet.create({
   container: {
     position: "absolute",
-    bottom: 100,
-    right: 20,
     alignItems: "center",
-    justifyContent: "center"
+    justifyContent: "center",
+    zIndex: 1e3
   },
   mainButtonWrapper: {
-    width: 60,
-    height: 60,
-    borderRadius: 30,
+    width: 56,
+    height: 56,
+    borderRadius: 28,
     backgroundColor: "#F02A4B",
     alignItems: "center",
     justifyContent: "center",
     shadowColor: "#000",
     shadowOffset: {
       width: 0,
-      height: 2
+      height: 4
     },
-    shadowOpacity: 0.25,
-    shadowRadius: 3.84,
-    elevation: 5
+    shadowOpacity: 0.3,
+    shadowRadius: 4.65,
+    elevation: 8
   },
   button: {
-    width: 60,
-    height: 60,
-    borderRadius: 30,
+    width: 56,
+    height: 56,
+    borderRadius: 28,
     backgroundColor: "#F02A4B",
     alignItems: "center",
     justifyContent: "center"
   },
-  circleContainer: {
-    position: "absolute",
-    width: 200,
-    height: 200,
-    right: -70,
-    bottom: -70,
-    alignItems: "center",
-    justifyContent: "center"
-  },
   secondary: {
     position: "absolute",
     width: 48,

package/dist/index.mjs

@@ -246,7 +246,8 @@ import {
   TouchableOpacity as TouchableOpacity4,
   StyleSheet as StyleSheet4,
   ScrollView as ScrollView2,
-  Animated as Animated2
+  Animated as Animated2,
+  Dimensions
 } from "react-native";
 
 // src/utils/toggleValue.ts
@@ -272,27 +273,39 @@ function MultiPickerGroup({
 }) {
   const [open, setOpen] = useState2(false);
   const [contentHeight, setContentHeight] = useState2(0);
-  const [isMeasured, setIsMeasured] = useState2(false);
+  const [isMounted, setIsMounted] = useState2(false);
   const animatedHeight = useRef(new Animated.Value(0)).current;
+  const animationRef = useRef(null);
   useEffect2(() => {
-    if (defaultOpen && contentHeight > 0 && !isMeasured) {
-      setIsMeasured(true);
+    setIsMounted(true);
+    return () => {
+      if (animationRef.current) {
+        animationRef.current.stop();
+      }
+    };
+  }, []);
+  useEffect2(() => {
+    if (defaultOpen && contentHeight > 0 && !open) {
       animatedHeight.setValue(contentHeight);
       setOpen(true);
     }
-  }, [contentHeight, defaultOpen, isMeasured]);
+  }, [defaultOpen, contentHeight]);
   const toggle = () => {
     if (contentHeight === 0) return;
-    const newOpenState = !open;
-    const toValue = newOpenState ? contentHeight : 0;
-    Animated.timing(animatedHeight, {
+    if (animationRef.current) {
+      animationRef.current.stop();
+    }
+    const toValue = open ? 0 : contentHeight;
+    animationRef.current = Animated.timing(animatedHeight, {
       toValue,
-      duration: 250,
+      duration: 200,
       useNativeDriver: false
-    }).start(() => {
-      setOpen(newOpenState);
     });
-    setOpen(newOpenState);
+    animationRef.current.start(() => {
+      setOpen(!open);
+      animationRef.current = null;
+    });
+    setOpen(!open);
   };
   return /* @__PURE__ */ jsxs2(View2, { style: styles.group, children: [
     /* @__PURE__ */ jsxs2(
@@ -317,9 +330,11 @@ function MultiPickerGroup({
         style: styles.hidden,
         pointerEvents: "none",
         onLayout: (e) => {
-          const height = e.nativeEvent.layout.height;
-          if (height > 0 && height !== contentHeight) {
-            setContentHeight(height);
+          if (isMounted) {
+            const height = e.nativeEvent.layout.height;
+            if (height > 0 && height !== contentHeight) {
+              setContentHeight(height);
+            }
           }
         },
         children
@@ -350,8 +365,8 @@ var styles = StyleSheet2.create({
     flexDirection: "row",
     justifyContent: "space-between",
     alignItems: "center",
-    paddingVertical: 12,
-    paddingHorizontal: 8,
+    paddingVertical: 14,
+    paddingHorizontal: 12,
     backgroundColor: "#F9FAFB",
     borderRadius: 8
   },
@@ -364,8 +379,8 @@ var styles = StyleSheet2.create({
     overflow: "hidden"
   },
   content: {
-    marginTop: 6,
-    paddingHorizontal: 8,
+    paddingTop: 8,
+    paddingHorizontal: 12,
     paddingBottom: 4
   },
   hidden: {
@@ -448,6 +463,7 @@ var defaultStyles2 = StyleSheet3.create({
 
 // src/core/MultiPickerModal.tsx
 import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var { height: SCREEN_HEIGHT } = Dimensions.get("window");
 function MultiPickerModal({
   visible,
   setVisible,
@@ -465,36 +481,67 @@ function MultiPickerModal({
 }) {
   const [internalVisible, setInternalVisible] = useState3(false);
   const [modalKey, setModalKey] = useState3(0);
-  const slideAnim = useRef2(new Animated2.Value(0)).current;
+  const slideAnim = useRef2(new Animated2.Value(SCREEN_HEIGHT)).current;
+  const backdropAnim = useRef2(new Animated2.Value(0)).current;
+  const isAnimating = useRef2(false);
   const isControlled = visible !== void 0 && setVisible !== void 0;
   const isVisible = isControlled ? visible : internalVisible;
   useEffect3(() => {
     if (isVisible) {
       setModalKey((prev) => prev + 1);
-      Animated2.spring(slideAnim, {
-        toValue: 1,
-        useNativeDriver: true,
-        damping: 15,
-        mass: 0.8,
-        stiffness: 150
-      }).start();
+      openModal();
     } else {
+      closeModal();
+    }
+  }, [isVisible]);
+  const openModal = () => {
+    if (isAnimating.current) return;
+    isAnimating.current = true;
+    Animated2.parallel([
       Animated2.spring(slideAnim, {
         toValue: 0,
         useNativeDriver: true,
-        damping: 15,
+        damping: 20,
         mass: 0.8,
-        stiffness: 150
-      }).start();
-    }
-  }, [isVisible]);
+        stiffness: 200
+      }),
+      Animated2.timing(backdropAnim, {
+        toValue: 1,
+        duration: 200,
+        useNativeDriver: true
+      })
+    ]).start(() => {
+      isAnimating.current = false;
+    });
+  };
+  const closeModal = () => {
+    if (isAnimating.current) return;
+    isAnimating.current = true;
+    Animated2.parallel([
+      Animated2.timing(slideAnim, {
+        toValue: SCREEN_HEIGHT,
+        duration: 250,
+        useNativeDriver: true
+      }),
+      Animated2.timing(backdropAnim, {
+        toValue: 0,
+        duration: 200,
+        useNativeDriver: true
+      })
+    ]).start(() => {
+      isAnimating.current = false;
+      if (!isControlled) {
+        setInternalVisible(false);
+      }
+    });
+  };
   const open = () => {
     if (isControlled) setVisible(true);
     else setInternalVisible(true);
   };
   const close = () => {
     if (isControlled) setVisible(false);
-    else setInternalVisible(false);
+    else closeModal();
   };
   const handleSelect = (val) => {
     const updated = toggleValue(selectedValues, val);
@@ -505,11 +552,14 @@ function MultiPickerModal({
     const all = groups.length ? groups.flatMap((g) => g.data) : options;
     const selectedItems = all.filter((o) => selectedValues.includes(o.value)).map((o) => o.label);
     if (selectedItems.length === 0) return placeholder;
+    if (selectedItems.length > 2) {
+      return `${selectedItems.slice(0, 2).join(", ")} +${selectedItems.length - 2}`;
+    }
     return selectedItems.join(", ");
   };
   const renderList = () => {
     if (groups.length > 0) {
-      return groups.map((group, index) => /* @__PURE__ */ jsx4(
+      return groups.map((group) => /* @__PURE__ */ jsx4(
         MultiPickerGroup,
         {
           label: group.label,
@@ -542,15 +592,14 @@ function MultiPickerModal({
       item.value
     ));
   };
-  const modalAnimatedStyle = {
-    transform: [
-      {
-        translateY: slideAnim.interpolate({
-          inputRange: [0, 1],
-          outputRange: [600, 0]
-        })
-      }
-    ]
+  const backdropStyle = {
+    backgroundColor: backdropAnim.interpolate({
+      inputRange: [0, 1],
+      outputRange: ["rgba(0,0,0,0)", "rgba(0,0,0,0.5)"]
+    })
+  };
+  const modalStyle = {
+    transform: [{ translateY: slideAnim }]
   };
   return /* @__PURE__ */ jsxs4(Fragment2, { children: [
     label && /* @__PURE__ */ jsx4(Text4, { style: [defaultStyles3.label, styles2?.label], children: label }),
@@ -575,7 +624,7 @@ function MultiPickerModal({
           ),
           renderInputIcon?.({
             name: "chevron-down",
-            size: 18,
+            size: 20,
             color: "#6B7280"
           })
         ]
@@ -589,35 +638,45 @@ function MultiPickerModal({
         transparent: true,
         animationType: "none",
         onRequestClose: close,
-        children: /* @__PURE__ */ jsx4(View4, { style: [defaultStyles3.overlay, styles2?.overlay], children: /* @__PURE__ */ jsxs4(
-          Animated2.View,
-          {
-            style: [
-              defaultStyles3.container,
-              styles2?.container,
-              modalAnimatedStyle
-            ],
-            children: [
-              /* @__PURE__ */ jsx4(
-                TouchableOpacity4,
-                {
-                  onPress: close,
-                  style: [defaultStyles3.done, styles2?.doneBtn],
-                  activeOpacity: 0.7,
-                  children: /* @__PURE__ */ jsx4(Text4, { style: [defaultStyles3.doneText, styles2?.doneText], children: "Done" })
-                }
-              ),
-              /* @__PURE__ */ jsx4(
-                ScrollView2,
-                {
-                  showsVerticalScrollIndicator: false,
-                  contentContainerStyle: defaultStyles3.scrollContent,
-                  children: renderList()
-                }
-              )
-            ]
-          }
-        ) })
+        children: /* @__PURE__ */ jsxs4(Animated2.View, { style: [defaultStyles3.overlay, backdropStyle], children: [
+          /* @__PURE__ */ jsx4(
+            TouchableOpacity4,
+            {
+              style: defaultStyles3.backdropTouchable,
+              activeOpacity: 1,
+              onPress: close
+            }
+          ),
+          /* @__PURE__ */ jsxs4(
+            Animated2.View,
+            {
+              style: [defaultStyles3.container, styles2?.container, modalStyle],
+              children: [
+                /* @__PURE__ */ jsxs4(View4, { style: defaultStyles3.header, children: [
+                  /* @__PURE__ */ jsx4(View4, { style: defaultStyles3.handle }),
+                  /* @__PURE__ */ jsx4(Text4, { style: defaultStyles3.headerTitle, children: "Select Options" }),
+                  /* @__PURE__ */ jsx4(
+                    TouchableOpacity4,
+                    {
+                      onPress: close,
+                      style: defaultStyles3.doneBtn,
+                      activeOpacity: 0.7,
+                      children: /* @__PURE__ */ jsx4(Text4, { style: defaultStyles3.doneText, children: "Done" })
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx4(
+                  ScrollView2,
+                  {
+                    showsVerticalScrollIndicator: false,
+                    contentContainerStyle: defaultStyles3.scrollContent,
+                    children: renderList()
+                  }
+                )
+              ]
+            }
+          )
+        ] })
       }
     )
   ] });
@@ -654,34 +713,71 @@ var defaultStyles3 = StyleSheet4.create({
   },
   overlay: {
     flex: 1,
-    justifyContent: "flex-end",
-    backgroundColor: "rgba(0,0,0,0.4)"
+    justifyContent: "flex-end"
+  },
+  backdropTouchable: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0
   },
   container: {
-    backgroundColor: "#fff",
-    padding: 20,
+    backgroundColor: "#FFFFFF",
     borderTopLeftRadius: 20,
     borderTopRightRadius: 20,
     maxHeight: "70%",
-    minHeight: "40%"
+    minHeight: "40%",
+    shadowColor: "#000",
+    shadowOffset: {
+      width: 0,
+      height: -2
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
+    elevation: 5
   },
-  scrollContent: {
-    paddingBottom: 20
+  header: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    paddingHorizontal: 20,
+    paddingTop: 12,
+    paddingBottom: 16,
+    borderBottomWidth: 1,
+    borderBottomColor: "#F0F0F0"
   },
-  done: {
+  handle: {
+    width: 40,
+    height: 4,
+    backgroundColor: "#E5E7EB",
+    borderRadius: 2,
+    position: "absolute",
+    top: 8,
+    alignSelf: "center"
+  },
+  headerTitle: {
+    fontSize: 16,
+    fontWeight: "600",
+    color: "#1F2937",
+    flex: 1,
+    textAlign: "center"
+  },
+  doneBtn: {
+    paddingVertical: 6,
+    paddingHorizontal: 12,
     backgroundColor: "#6366f1",
-    paddingVertical: 10,
-    paddingHorizontal: 14,
-    borderRadius: 10,
-    alignSelf: "flex-end",
-    marginBottom: 16,
-    minWidth: 80,
-    alignItems: "center"
+    borderRadius: 8
   },
   doneText: {
-    color: "#fff",
+    color: "#FFFFFF",
     fontWeight: "600",
     fontSize: 14
+  },
+  scrollContent: {
+    paddingHorizontal: 20,
+    paddingTop: 12,
+    paddingBottom: 24
   }
 });
 
@@ -691,9 +787,11 @@ import {
   Animated as Animated3,
   StyleSheet as StyleSheet5,
   TouchableWithoutFeedback,
-  View as View5
+  View as View5,
+  Dimensions as Dimensions2
 } from "react-native";
 import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+var { width: SCREEN_WIDTH, height: SCREEN_HEIGHT2 } = Dimensions2.get("window");
 var FloatingButton = class extends React4.Component {
   animation = new Animated3.Value(0);
   open = false;
@@ -701,8 +799,8 @@ var FloatingButton = class extends React4.Component {
     Animated3.spring(this.animation, {
       toValue: this.open ? 0 : 1,
       useNativeDriver: true,
-      damping: 12,
-      mass: 0.6,
+      damping: 15,
+      mass: 0.8,
       stiffness: 180
     }).start();
     this.open = !this.open;
@@ -713,26 +811,28 @@ var FloatingButton = class extends React4.Component {
       radius = 100,
       actions,
       renderItemIcon,
-      styles: styles2
+      styles: styles2,
+      spacing = 75
+      // Default spacing between buttons
     } = this.props;
     let translateX = 0;
     let translateY = 0;
     if (mode === "vertical") {
-      translateY = -70 * (index + 1);
+      translateY = -spacing * (index + 1);
       translateX = 0;
     }
     if (mode === "horizontal") {
-      translateX = -70 * (index + 1);
+      translateX = -spacing * (index + 1);
       translateY = 0;
     }
     if (mode === "circle") {
       const totalActions = actions.length;
-      const startAngle = -Math.PI / 3;
-      const endAngle = -Math.PI * 0.8;
-      const angle = startAngle + index / (totalActions - 1 || 1) * (endAngle - startAngle);
-      const adjustedRadius = radius * 0.65;
-      translateX = adjustedRadius * Math.cos(angle);
-      translateY = adjustedRadius * Math.sin(angle);
+      const startAngle = Math.PI * 0.85;
+      const endAngle = Math.PI * 0.15;
+      const angle = startAngle - index / (totalActions - 1 || 1) * (startAngle - endAngle);
+      const adjustedRadius = radius;
+      translateX = -adjustedRadius * Math.cos(angle);
+      translateY = -adjustedRadius * Math.sin(angle);
     }
     const animStyle = {
       transform: [
@@ -786,7 +886,15 @@ var FloatingButton = class extends React4.Component {
     );
   };
   render() {
-    const { actions, renderMainIcon, styles: styles2, style, mainIconName } = this.props;
+    const {
+      renderMainIcon,
+      styles: styles2,
+      style,
+      mainIconName,
+      mode = "vertical",
+      offsetX = 24,
+      offsetY = 100
+    } = this.props;
     const rotation = {
       transform: [
         {
@@ -808,32 +916,26 @@ var FloatingButton = class extends React4.Component {
       ]
     };
     const mainIcon = mainIconName || "add";
-    return /* @__PURE__ */ jsxs5(View5, { style: [defaultStyles4.container, styles2?.container, style], children: [
-      /* @__PURE__ */ jsx5(
+    const containerStyle = [
+      defaultStyles4.container,
+      styles2?.container,
+      style,
+      {
+        bottom: offsetY,
+        right: offsetX
+      }
+    ];
+    return /* @__PURE__ */ jsxs5(View5, { style: containerStyle, children: [
+      this.props.actions.map(this.renderAction),
+      /* @__PURE__ */ jsx5(TouchableWithoutFeedback, { onPress: this.toggleMenu, children: /* @__PURE__ */ jsx5(
         Animated3.View,
         {
           style: [
-            defaultStyles4.circleContainer,
-            styles2?.circleContainer,
-            {
-              transform: [
-                {
-                  scale: this.animation.interpolate({
-                    inputRange: [0, 1],
-                    outputRange: [0, 1]
-                  })
-                }
-              ],
-              opacity: this.animation
-            }
+            defaultStyles4.mainButtonWrapper,
+            styles2?.mainButton,
+            rotation,
+            scale
           ],
-          children: actions.map(this.renderAction)
-        }
-      ),
-      /* @__PURE__ */ jsx5(TouchableWithoutFeedback, { onPress: this.toggleMenu, children: /* @__PURE__ */ jsx5(
-        Animated3.View,
-        {
-          style: [defaultStyles4.mainButtonWrapper, rotation, scale],
           children: /* @__PURE__ */ jsx5(View5, { style: [defaultStyles4.button, styles2?.mainButton], children: renderMainIcon?.({
             name: mainIcon,
             size: 26,
@@ -847,44 +949,34 @@ var FloatingButton = class extends React4.Component {
 var defaultStyles4 = StyleSheet5.create({
   container: {
     position: "absolute",
-    bottom: 100,
-    right: 20,
     alignItems: "center",
-    justifyContent: "center"
+    justifyContent: "center",
+    zIndex: 1e3
   },
   mainButtonWrapper: {
-    width: 60,
-    height: 60,
-    borderRadius: 30,
+    width: 56,
+    height: 56,
+    borderRadius: 28,
     backgroundColor: "#F02A4B",
     alignItems: "center",
     justifyContent: "center",
     shadowColor: "#000",
     shadowOffset: {
       width: 0,
-      height: 2
+      height: 4
     },
-    shadowOpacity: 0.25,
-    shadowRadius: 3.84,
-    elevation: 5
+    shadowOpacity: 0.3,
+    shadowRadius: 4.65,
+    elevation: 8
   },
   button: {
-    width: 60,
-    height: 60,
-    borderRadius: 30,
+    width: 56,
+    height: 56,
+    borderRadius: 28,
     backgroundColor: "#F02A4B",
     alignItems: "center",
     justifyContent: "center"
   },
-  circleContainer: {
-    position: "absolute",
-    width: 200,
-    height: 200,
-    right: -70,
-    bottom: -70,
-    alignItems: "center",
-    justifyContent: "center"
-  },
   secondary: {
     position: "absolute",
     width: 48,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaushverse/pickify",
-  "version": "1.1.8",
+  "version": "1.1.9",
   "description": "A fully customizable React Native picker with search, multi-select, grouping, and async support.",
   "main": "dist/index.js",
   "module": "dist/index.mjs",