@kaushverse/pickify 1.1.5 → 1.1.7

package/dist/index.d.mts

@@ -140,6 +140,7 @@ type FloatingButtonStyles = {
     container?: ViewStyle;
     mainButton?: ViewStyle;
     secondaryButton?: ViewStyle;
+    circleContainer?: ViewStyle;
 };
 type Props = {
     actions: Action[];

package/dist/index.d.ts

@@ -140,6 +140,7 @@ type FloatingButtonStyles = {
     container?: ViewStyle;
     mainButton?: ViewStyle;
     secondaryButton?: ViewStyle;
+    circleContainer?: ViewStyle;
 };
 type Props = {
     actions: Action[];

package/dist/index.js

@@ -293,31 +293,57 @@ function MultiPickerGroup({
 }) {
   const [open, setOpen] = (0, import_react2.useState)(defaultOpen);
   const [contentHeight, setContentHeight] = (0, import_react2.useState)(0);
-  const animatedHeight = (0, import_react2.useRef)(new import_react_native2.Animated.Value(0)).current;
+  const [isMeasured, setIsMeasured] = (0, import_react2.useState)(false);
+  const animatedHeight = (0, import_react2.useRef)(
+    new import_react_native2.Animated.Value(defaultOpen ? 1 : 0)
+  ).current;
+  (0, import_react2.useEffect)(() => {
+    if (defaultOpen && contentHeight > 0 && !isMeasured) {
+      setIsMeasured(true);
+      animatedHeight.setValue(contentHeight);
+      setOpen(true);
+    }
+  }, [contentHeight, defaultOpen, isMeasured]);
   const toggle = () => {
-    const toValue = open ? 0 : contentHeight;
+    if (contentHeight === 0) return;
+    const newOpenState = !open;
+    const toValue = newOpenState ? contentHeight : 0;
     import_react_native2.Animated.timing(animatedHeight, {
       toValue,
       duration: 250,
       useNativeDriver: false
-    }).start();
-    setOpen(!open);
+    }).start(() => {
+      setOpen(newOpenState);
+    });
+    setOpen(newOpenState);
   };
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native2.View, { style: styles.group, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native2.TouchableOpacity, { style: styles.header, onPress: toggle, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.Text, { style: styles.title, children: label }),
-      renderGroupIcon?.({
-        name: open ? "chevron-up" : "chevron-down",
-        size: 18,
-        color: "#6B7280"
-      })
-    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+      import_react_native2.TouchableOpacity,
+      {
+        style: styles.header,
+        onPress: toggle,
+        activeOpacity: 0.7,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.Text, { style: styles.title, children: label }),
+          renderGroupIcon?.({
+            name: open ? "chevron-up" : "chevron-down",
+            size: 18,
+            color: "#6B7280"
+          })
+        ]
+      }
+    ),
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       import_react_native2.View,
       {
         style: styles.hidden,
+        pointerEvents: "none",
         onLayout: (e) => {
-          setContentHeight(e.nativeEvent.layout.height);
+          const height = e.nativeEvent.layout.height;
+          if (height > 0 && height !== contentHeight) {
+            setContentHeight(height);
+          }
         },
         children
       }
@@ -325,36 +351,53 @@ function MultiPickerGroup({
     /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       import_react_native2.Animated.View,
       {
-        style: {
-          height: animatedHeight,
-          overflow: "hidden"
-        },
-        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.View, { style: styles.content, children })
+        style: [
+          styles.animatedContainer,
+          {
+            height: animatedHeight
+          }
+        ],
+        children: contentHeight > 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.View, { style: styles.content, children })
       }
     )
   ] });
 }
 var styles = import_react_native2.StyleSheet.create({
   group: {
-    marginBottom: 12
+    marginBottom: 12,
+    backgroundColor: "#FFFFFF",
+    borderRadius: 8,
+    overflow: "hidden"
   },
   header: {
     flexDirection: "row",
     justifyContent: "space-between",
-    alignItems: "center"
+    alignItems: "center",
+    paddingVertical: 12,
+    paddingHorizontal: 8,
+    backgroundColor: "#F9FAFB",
+    borderRadius: 8
   },
   title: {
     fontWeight: "600",
-    fontSize: 14
+    fontSize: 14,
+    color: "#1F2937"
+  },
+  animatedContainer: {
+    overflow: "hidden"
   },
   content: {
-    marginTop: 6
+    marginTop: 6,
+    paddingHorizontal: 8,
+    paddingBottom: 4
   },
-  //  invisible layout measurement
   hidden: {
     position: "absolute",
     opacity: 0,
-    zIndex: -1
+    zIndex: -1,
+    top: 0,
+    left: 0,
+    right: 0
   }
 });
 
@@ -444,8 +487,30 @@ function MultiPickerModal({
   styles: styles2
 }) {
   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 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();
+    } else {
+      import_react_native4.Animated.spring(slideAnim, {
+        toValue: 0,
+        useNativeDriver: true,
+        damping: 15,
+        mass: 0.8,
+        stiffness: 150
+      }).start();
+    }
+  }, [isVisible]);
   const open = () => {
     if (isControlled) setVisible(true);
     else setInternalVisible(true);
@@ -461,7 +526,9 @@ function MultiPickerModal({
   const getLabel = () => {
     if (!selectedValues?.length) return placeholder;
     const all = groups.length ? groups.flatMap((g) => g.data) : options;
-    return all.filter((o) => selectedValues.includes(o.value)).map((o) => o.label).join(", ");
+    const selectedItems = all.filter((o) => selectedValues.includes(o.value)).map((o) => o.label);
+    if (selectedItems.length === 0) return placeholder;
+    return selectedItems.join(", ");
   };
   const renderList = () => {
     if (groups.length > 0) {
@@ -483,7 +550,7 @@ function MultiPickerModal({
             item.value
           ))
         },
-        group.label
+        `${modalKey}-${group.label}`
       ));
     }
     return options.map((item) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
@@ -498,6 +565,16 @@ function MultiPickerModal({
       item.value
     ));
   };
+  const modalAnimatedStyle = {
+    transform: [
+      {
+        translateY: slideAnim.interpolate({
+          inputRange: [0, 1],
+          outputRange: [600, 0]
+        })
+      }
+    ]
+  };
   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 }),
     /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
@@ -505,8 +582,20 @@ function MultiPickerModal({
       {
         style: [defaultStyles3.box, styles2?.selectBox],
         onPress: open,
+        activeOpacity: 0.7,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.Text, { style: [defaultStyles3.text, styles2?.selectText], children: getLabel() }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            import_react_native4.Text,
+            {
+              style: [
+                defaultStyles3.text,
+                styles2?.selectText,
+                !selectedValues?.length && defaultStyles3.placeholder
+              ],
+              numberOfLines: 1,
+              children: getLabel()
+            }
+          ),
           renderInputIcon?.({
             name: "chevron-down",
             size: 18,
@@ -516,23 +605,52 @@ function MultiPickerModal({
       }
     ),
     error && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.Text, { style: [defaultStyles3.error, styles2?.error], children: error }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.Modal, { visible: isVisible, transparent: true, animationType: "slide", 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.View, { style: [defaultStyles3.container, styles2?.container], children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-        import_react_native4.TouchableOpacity,
-        {
-          onPress: close,
-          style: [defaultStyles3.done, styles2?.doneBtn],
-          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, { children: renderList() })
-    ] }) }) })
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      import_react_native4.Modal,
+      {
+        visible: isVisible,
+        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()
+                }
+              )
+            ]
+          }
+        ) })
+      }
+    )
   ] });
 }
 var defaultStyles3 = import_react_native4.StyleSheet.create({
   label: {
     marginBottom: 6,
-    fontSize: 14
+    fontSize: 14,
+    fontWeight: "500",
+    color: "#374151"
   },
   box: {
     borderWidth: 1,
@@ -541,27 +659,37 @@ var defaultStyles3 = import_react_native4.StyleSheet.create({
     padding: 12,
     flexDirection: "row",
     justifyContent: "space-between",
-    alignItems: "center"
+    alignItems: "center",
+    backgroundColor: "#FFFFFF"
   },
   text: {
-    fontSize: 15
+    fontSize: 15,
+    color: "#1F2937",
+    flex: 1
+  },
+  placeholder: {
+    color: "#9CA3AF"
   },
   error: {
-    color: "red",
+    color: "#EF4444",
     fontSize: 12,
     marginTop: 4
   },
   overlay: {
     flex: 1,
     justifyContent: "flex-end",
-    backgroundColor: "rgba(0,0,0,0.3)"
+    backgroundColor: "rgba(0,0,0,0.4)"
   },
   container: {
     backgroundColor: "#fff",
     padding: 20,
     borderTopLeftRadius: 20,
     borderTopRightRadius: 20,
-    maxHeight: "70%"
+    maxHeight: "70%",
+    minHeight: "40%"
+  },
+  scrollContent: {
+    paddingBottom: 20
   },
   done: {
     backgroundColor: "#6366f1",
@@ -569,11 +697,14 @@ var defaultStyles3 = import_react_native4.StyleSheet.create({
     paddingHorizontal: 14,
     borderRadius: 10,
     alignSelf: "flex-end",
-    marginBottom: 10
+    marginBottom: 16,
+    minWidth: 80,
+    alignItems: "center"
   },
   doneText: {
     color: "#fff",
-    fontWeight: "600"
+    fontWeight: "600",
+    fontSize: 14
   }
 });
 
@@ -605,18 +736,21 @@ var FloatingButton = class extends import_react4.default.Component {
     let translateX = 0;
     let translateY = 0;
     if (mode === "vertical") {
-      translateY = -60 * (index + 1);
+      translateY = -70 * (index + 1);
+      translateX = 0;
     }
     if (mode === "horizontal") {
-      translateX = -60 * (index + 1);
+      translateX = -70 * (index + 1);
+      translateY = 0;
     }
     if (mode === "circle") {
-      const angleStep = Math.PI / 2;
-      const angle = index / (actions.length - 1 || 1) * angleStep;
-      const adjustedRadiusX = radius * 0.7;
-      const adjustedRadiusY = radius;
-      translateX = -adjustedRadiusX * Math.cos(angle);
-      translateY = -adjustedRadiusY * Math.sin(angle);
+      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 animStyle = {
       transform: [
@@ -635,7 +769,7 @@ var FloatingButton = class extends import_react4.default.Component {
         {
           scale: this.animation.interpolate({
             inputRange: [0, 0.5, 1],
-            outputRange: [0, 1.1, 1]
+            outputRange: [0, 1.2, 1]
           })
         }
       ],
@@ -681,18 +815,48 @@ var FloatingButton = class extends import_react4.default.Component {
         }
       ]
     };
+    const scale = {
+      transform: [
+        {
+          scale: this.animation.interpolate({
+            inputRange: [0, 0.5, 1],
+            outputRange: [1, 1.1, 1]
+          })
+        }
+      ]
+    };
     const mainIcon = mainIconName || "add";
     return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react_native5.View, { style: [defaultStyles4.container, styles2?.container, style], children: [
-      actions.map(this.renderAction),
+      /* @__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
+            }
+          ],
+          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.button, styles2?.mainButton, rotation],
-          children: renderMainIcon?.({
+          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,
             color: "#FFF"
-          })
+          }) })
         }
       ) })
     ] });
@@ -701,9 +865,26 @@ var FloatingButton = class extends import_react4.default.Component {
 var defaultStyles4 = import_react_native5.StyleSheet.create({
   container: {
     position: "absolute",
-    bottom: 110,
+    bottom: 100,
     right: 20,
-    alignItems: "center"
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  mainButtonWrapper: {
+    width: 60,
+    height: 60,
+    borderRadius: 30,
+    backgroundColor: "#F02A4B",
+    alignItems: "center",
+    justifyContent: "center",
+    shadowColor: "#000",
+    shadowOffset: {
+      width: 0,
+      height: 2
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84,
+    elevation: 5
   },
   button: {
     width: 60,
@@ -713,6 +894,15 @@ var defaultStyles4 = import_react_native5.StyleSheet.create({
     alignItems: "center",
     justifyContent: "center"
   },
+  circleContainer: {
+    position: "absolute",
+    width: 200,
+    height: 200,
+    right: -70,
+    bottom: -70,
+    alignItems: "center",
+    justifyContent: "center"
+  },
   secondary: {
     position: "absolute",
     width: 48,
@@ -720,7 +910,15 @@ var defaultStyles4 = import_react_native5.StyleSheet.create({
     borderRadius: 24,
     backgroundColor: "#F02A4B",
     alignItems: "center",
-    justifyContent: "center"
+    justifyContent: "center",
+    shadowColor: "#000",
+    shadowOffset: {
+      width: 0,
+      height: 2
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84,
+    elevation: 5
   }
 });
 

package/dist/index.mjs

@@ -238,14 +238,15 @@ var defaultStyles = StyleSheet.create({
 });
 
 // src/core/MultiPickerModal.tsx
-import { useState as useState3 } from "react";
+import { useState as useState3, useEffect as useEffect3, useRef as useRef2 } from "react";
 import {
   Modal as Modal2,
   View as View4,
   Text as Text4,
   TouchableOpacity as TouchableOpacity4,
   StyleSheet as StyleSheet4,
-  ScrollView as ScrollView2
+  ScrollView as ScrollView2,
+  Animated as Animated2
 } from "react-native";
 
 // src/utils/toggleValue.ts
@@ -254,7 +255,7 @@ var toggleValue = (arr, value) => {
 };
 
 // src/components/MultiPickerGroup.tsx
-import { useRef, useState as useState2 } from "react";
+import { useRef, useState as useState2, useEffect as useEffect2 } from "react";
 import {
   View as View2,
   Text as Text2,
@@ -271,31 +272,57 @@ function MultiPickerGroup({
 }) {
   const [open, setOpen] = useState2(defaultOpen);
   const [contentHeight, setContentHeight] = useState2(0);
-  const animatedHeight = useRef(new Animated.Value(0)).current;
+  const [isMeasured, setIsMeasured] = useState2(false);
+  const animatedHeight = useRef(
+    new Animated.Value(defaultOpen ? 1 : 0)
+  ).current;
+  useEffect2(() => {
+    if (defaultOpen && contentHeight > 0 && !isMeasured) {
+      setIsMeasured(true);
+      animatedHeight.setValue(contentHeight);
+      setOpen(true);
+    }
+  }, [contentHeight, defaultOpen, isMeasured]);
   const toggle = () => {
-    const toValue = open ? 0 : contentHeight;
+    if (contentHeight === 0) return;
+    const newOpenState = !open;
+    const toValue = newOpenState ? contentHeight : 0;
     Animated.timing(animatedHeight, {
       toValue,
       duration: 250,
       useNativeDriver: false
-    }).start();
-    setOpen(!open);
+    }).start(() => {
+      setOpen(newOpenState);
+    });
+    setOpen(newOpenState);
   };
   return /* @__PURE__ */ jsxs2(View2, { style: styles.group, children: [
-    /* @__PURE__ */ jsxs2(TouchableOpacity2, { style: styles.header, onPress: toggle, children: [
-      /* @__PURE__ */ jsx2(Text2, { style: styles.title, children: label }),
-      renderGroupIcon?.({
-        name: open ? "chevron-up" : "chevron-down",
-        size: 18,
-        color: "#6B7280"
-      })
-    ] }),
+    /* @__PURE__ */ jsxs2(
+      TouchableOpacity2,
+      {
+        style: styles.header,
+        onPress: toggle,
+        activeOpacity: 0.7,
+        children: [
+          /* @__PURE__ */ jsx2(Text2, { style: styles.title, children: label }),
+          renderGroupIcon?.({
+            name: open ? "chevron-up" : "chevron-down",
+            size: 18,
+            color: "#6B7280"
+          })
+        ]
+      }
+    ),
     /* @__PURE__ */ jsx2(
       View2,
       {
         style: styles.hidden,
+        pointerEvents: "none",
         onLayout: (e) => {
-          setContentHeight(e.nativeEvent.layout.height);
+          const height = e.nativeEvent.layout.height;
+          if (height > 0 && height !== contentHeight) {
+            setContentHeight(height);
+          }
         },
         children
       }
@@ -303,36 +330,53 @@ function MultiPickerGroup({
     /* @__PURE__ */ jsx2(
       Animated.View,
       {
-        style: {
-          height: animatedHeight,
-          overflow: "hidden"
-        },
-        children: /* @__PURE__ */ jsx2(View2, { style: styles.content, children })
+        style: [
+          styles.animatedContainer,
+          {
+            height: animatedHeight
+          }
+        ],
+        children: contentHeight > 0 && /* @__PURE__ */ jsx2(View2, { style: styles.content, children })
       }
     )
   ] });
 }
 var styles = StyleSheet2.create({
   group: {
-    marginBottom: 12
+    marginBottom: 12,
+    backgroundColor: "#FFFFFF",
+    borderRadius: 8,
+    overflow: "hidden"
   },
   header: {
     flexDirection: "row",
     justifyContent: "space-between",
-    alignItems: "center"
+    alignItems: "center",
+    paddingVertical: 12,
+    paddingHorizontal: 8,
+    backgroundColor: "#F9FAFB",
+    borderRadius: 8
   },
   title: {
     fontWeight: "600",
-    fontSize: 14
+    fontSize: 14,
+    color: "#1F2937"
+  },
+  animatedContainer: {
+    overflow: "hidden"
   },
   content: {
-    marginTop: 6
+    marginTop: 6,
+    paddingHorizontal: 8,
+    paddingBottom: 4
   },
-  //  invisible layout measurement
   hidden: {
     position: "absolute",
     opacity: 0,
-    zIndex: -1
+    zIndex: -1,
+    top: 0,
+    left: 0,
+    right: 0
   }
 });
 
@@ -422,8 +466,30 @@ function MultiPickerModal({
   styles: styles2
 }) {
   const [internalVisible, setInternalVisible] = useState3(false);
+  const [modalKey, setModalKey] = useState3(0);
+  const slideAnim = useRef2(new Animated2.Value(0)).current;
   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();
+    } else {
+      Animated2.spring(slideAnim, {
+        toValue: 0,
+        useNativeDriver: true,
+        damping: 15,
+        mass: 0.8,
+        stiffness: 150
+      }).start();
+    }
+  }, [isVisible]);
   const open = () => {
     if (isControlled) setVisible(true);
     else setInternalVisible(true);
@@ -439,7 +505,9 @@ function MultiPickerModal({
   const getLabel = () => {
     if (!selectedValues?.length) return placeholder;
     const all = groups.length ? groups.flatMap((g) => g.data) : options;
-    return all.filter((o) => selectedValues.includes(o.value)).map((o) => o.label).join(", ");
+    const selectedItems = all.filter((o) => selectedValues.includes(o.value)).map((o) => o.label);
+    if (selectedItems.length === 0) return placeholder;
+    return selectedItems.join(", ");
   };
   const renderList = () => {
     if (groups.length > 0) {
@@ -461,7 +529,7 @@ function MultiPickerModal({
             item.value
           ))
         },
-        group.label
+        `${modalKey}-${group.label}`
       ));
     }
     return options.map((item) => /* @__PURE__ */ jsx4(
@@ -476,6 +544,16 @@ function MultiPickerModal({
       item.value
     ));
   };
+  const modalAnimatedStyle = {
+    transform: [
+      {
+        translateY: slideAnim.interpolate({
+          inputRange: [0, 1],
+          outputRange: [600, 0]
+        })
+      }
+    ]
+  };
   return /* @__PURE__ */ jsxs4(Fragment2, { children: [
     label && /* @__PURE__ */ jsx4(Text4, { style: [defaultStyles3.label, styles2?.label], children: label }),
     /* @__PURE__ */ jsxs4(
@@ -483,8 +561,20 @@ function MultiPickerModal({
       {
         style: [defaultStyles3.box, styles2?.selectBox],
         onPress: open,
+        activeOpacity: 0.7,
         children: [
-          /* @__PURE__ */ jsx4(Text4, { style: [defaultStyles3.text, styles2?.selectText], children: getLabel() }),
+          /* @__PURE__ */ jsx4(
+            Text4,
+            {
+              style: [
+                defaultStyles3.text,
+                styles2?.selectText,
+                !selectedValues?.length && defaultStyles3.placeholder
+              ],
+              numberOfLines: 1,
+              children: getLabel()
+            }
+          ),
           renderInputIcon?.({
             name: "chevron-down",
             size: 18,
@@ -494,23 +584,52 @@ function MultiPickerModal({
       }
     ),
     error && /* @__PURE__ */ jsx4(Text4, { style: [defaultStyles3.error, styles2?.error], children: error }),
-    /* @__PURE__ */ jsx4(Modal2, { visible: isVisible, transparent: true, animationType: "slide", children: /* @__PURE__ */ jsx4(View4, { style: [defaultStyles3.overlay, styles2?.overlay], children: /* @__PURE__ */ jsxs4(View4, { style: [defaultStyles3.container, styles2?.container], children: [
-      /* @__PURE__ */ jsx4(
-        TouchableOpacity4,
-        {
-          onPress: close,
-          style: [defaultStyles3.done, styles2?.doneBtn],
-          children: /* @__PURE__ */ jsx4(Text4, { style: [defaultStyles3.doneText, styles2?.doneText], children: "Done" })
-        }
-      ),
-      /* @__PURE__ */ jsx4(ScrollView2, { children: renderList() })
-    ] }) }) })
+    /* @__PURE__ */ jsx4(
+      Modal2,
+      {
+        visible: isVisible,
+        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()
+                }
+              )
+            ]
+          }
+        ) })
+      }
+    )
   ] });
 }
 var defaultStyles3 = StyleSheet4.create({
   label: {
     marginBottom: 6,
-    fontSize: 14
+    fontSize: 14,
+    fontWeight: "500",
+    color: "#374151"
   },
   box: {
     borderWidth: 1,
@@ -519,27 +638,37 @@ var defaultStyles3 = StyleSheet4.create({
     padding: 12,
     flexDirection: "row",
     justifyContent: "space-between",
-    alignItems: "center"
+    alignItems: "center",
+    backgroundColor: "#FFFFFF"
   },
   text: {
-    fontSize: 15
+    fontSize: 15,
+    color: "#1F2937",
+    flex: 1
+  },
+  placeholder: {
+    color: "#9CA3AF"
   },
   error: {
-    color: "red",
+    color: "#EF4444",
     fontSize: 12,
     marginTop: 4
   },
   overlay: {
     flex: 1,
     justifyContent: "flex-end",
-    backgroundColor: "rgba(0,0,0,0.3)"
+    backgroundColor: "rgba(0,0,0,0.4)"
   },
   container: {
     backgroundColor: "#fff",
     padding: 20,
     borderTopLeftRadius: 20,
     borderTopRightRadius: 20,
-    maxHeight: "70%"
+    maxHeight: "70%",
+    minHeight: "40%"
+  },
+  scrollContent: {
+    paddingBottom: 20
   },
   done: {
     backgroundColor: "#6366f1",
@@ -547,28 +676,31 @@ var defaultStyles3 = StyleSheet4.create({
     paddingHorizontal: 14,
     borderRadius: 10,
     alignSelf: "flex-end",
-    marginBottom: 10
+    marginBottom: 16,
+    minWidth: 80,
+    alignItems: "center"
   },
   doneText: {
     color: "#fff",
-    fontWeight: "600"
+    fontWeight: "600",
+    fontSize: 14
   }
 });
 
 // src/core/FloatingButton.tsx
 import React4 from "react";
 import {
-  Animated as Animated2,
+  Animated as Animated3,
   StyleSheet as StyleSheet5,
   TouchableWithoutFeedback,
   View as View5
 } from "react-native";
 import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 var FloatingButton = class extends React4.Component {
-  animation = new Animated2.Value(0);
+  animation = new Animated3.Value(0);
   open = false;
   toggleMenu = () => {
-    Animated2.spring(this.animation, {
+    Animated3.spring(this.animation, {
       toValue: this.open ? 0 : 1,
       useNativeDriver: true,
       damping: 12,
@@ -588,18 +720,21 @@ var FloatingButton = class extends React4.Component {
     let translateX = 0;
     let translateY = 0;
     if (mode === "vertical") {
-      translateY = -60 * (index + 1);
+      translateY = -70 * (index + 1);
+      translateX = 0;
     }
     if (mode === "horizontal") {
-      translateX = -60 * (index + 1);
+      translateX = -70 * (index + 1);
+      translateY = 0;
     }
     if (mode === "circle") {
-      const angleStep = Math.PI / 2;
-      const angle = index / (actions.length - 1 || 1) * angleStep;
-      const adjustedRadiusX = radius * 0.7;
-      const adjustedRadiusY = radius;
-      translateX = -adjustedRadiusX * Math.cos(angle);
-      translateY = -adjustedRadiusY * Math.sin(angle);
+      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 animStyle = {
       transform: [
@@ -618,7 +753,7 @@ var FloatingButton = class extends React4.Component {
         {
           scale: this.animation.interpolate({
             inputRange: [0, 0.5, 1],
-            outputRange: [0, 1.1, 1]
+            outputRange: [0, 1.2, 1]
           })
         }
       ],
@@ -633,7 +768,7 @@ var FloatingButton = class extends React4.Component {
           action.navigateTo?.();
         },
         children: /* @__PURE__ */ jsx5(
-          Animated2.View,
+          Animated3.View,
           {
             style: [
               defaultStyles4.secondary,
@@ -664,18 +799,48 @@ var FloatingButton = class extends React4.Component {
         }
       ]
     };
+    const scale = {
+      transform: [
+        {
+          scale: this.animation.interpolate({
+            inputRange: [0, 0.5, 1],
+            outputRange: [1, 1.1, 1]
+          })
+        }
+      ]
+    };
     const mainIcon = mainIconName || "add";
     return /* @__PURE__ */ jsxs5(View5, { style: [defaultStyles4.container, styles2?.container, style], children: [
-      actions.map(this.renderAction),
+      /* @__PURE__ */ jsx5(
+        Animated3.View,
+        {
+          style: [
+            defaultStyles4.circleContainer,
+            styles2?.circleContainer,
+            {
+              transform: [
+                {
+                  scale: this.animation.interpolate({
+                    inputRange: [0, 1],
+                    outputRange: [0, 1]
+                  })
+                }
+              ],
+              opacity: this.animation
+            }
+          ],
+          children: actions.map(this.renderAction)
+        }
+      ),
       /* @__PURE__ */ jsx5(TouchableWithoutFeedback, { onPress: this.toggleMenu, children: /* @__PURE__ */ jsx5(
-        Animated2.View,
+        Animated3.View,
         {
-          style: [defaultStyles4.button, styles2?.mainButton, rotation],
-          children: renderMainIcon?.({
+          style: [defaultStyles4.mainButtonWrapper, rotation, scale],
+          children: /* @__PURE__ */ jsx5(View5, { style: [defaultStyles4.button, styles2?.mainButton], children: renderMainIcon?.({
             name: mainIcon,
             size: 26,
             color: "#FFF"
-          })
+          }) })
         }
       ) })
     ] });
@@ -684,9 +849,26 @@ var FloatingButton = class extends React4.Component {
 var defaultStyles4 = StyleSheet5.create({
   container: {
     position: "absolute",
-    bottom: 110,
+    bottom: 100,
     right: 20,
-    alignItems: "center"
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  mainButtonWrapper: {
+    width: 60,
+    height: 60,
+    borderRadius: 30,
+    backgroundColor: "#F02A4B",
+    alignItems: "center",
+    justifyContent: "center",
+    shadowColor: "#000",
+    shadowOffset: {
+      width: 0,
+      height: 2
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84,
+    elevation: 5
   },
   button: {
     width: 60,
@@ -696,6 +878,15 @@ var defaultStyles4 = StyleSheet5.create({
     alignItems: "center",
     justifyContent: "center"
   },
+  circleContainer: {
+    position: "absolute",
+    width: 200,
+    height: 200,
+    right: -70,
+    bottom: -70,
+    alignItems: "center",
+    justifyContent: "center"
+  },
   secondary: {
     position: "absolute",
     width: 48,
@@ -703,7 +894,15 @@ var defaultStyles4 = StyleSheet5.create({
     borderRadius: 24,
     backgroundColor: "#F02A4B",
     alignItems: "center",
-    justifyContent: "center"
+    justifyContent: "center",
+    shadowColor: "#000",
+    shadowOffset: {
+      width: 0,
+      height: 2
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84,
+    elevation: 5
   }
 });
 

package/package.json

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