@kaushverse/pickify 1.1.9 → 1.1.10

package/dist/index.d.mts

@@ -151,9 +151,6 @@ 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,9 +151,6 @@ 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,39 +293,27 @@ function MultiPickerGroup({
 }) {
   const [open, setOpen] = (0, import_react2.useState)(false);
   const [contentHeight, setContentHeight] = (0, import_react2.useState)(0);
-  const [isMounted, setIsMounted] = (0, import_react2.useState)(false);
+  const [isMeasured, setIsMeasured] = (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)(() => {
-    setIsMounted(true);
-    return () => {
-      if (animationRef.current) {
-        animationRef.current.stop();
-      }
-    };
-  }, []);
-  (0, import_react2.useEffect)(() => {
-    if (defaultOpen && contentHeight > 0 && !open) {
+    if (defaultOpen && contentHeight > 0 && !isMeasured) {
+      setIsMeasured(true);
       animatedHeight.setValue(contentHeight);
       setOpen(true);
     }
-  }, [defaultOpen, contentHeight]);
+  }, [contentHeight, defaultOpen, isMeasured]);
   const toggle = () => {
     if (contentHeight === 0) return;
-    if (animationRef.current) {
-      animationRef.current.stop();
-    }
-    const toValue = open ? 0 : contentHeight;
-    animationRef.current = import_react_native2.Animated.timing(animatedHeight, {
+    const newOpenState = !open;
+    const toValue = newOpenState ? contentHeight : 0;
+    import_react_native2.Animated.timing(animatedHeight, {
       toValue,
-      duration: 200,
+      duration: 250,
       useNativeDriver: false
+    }).start(() => {
+      setOpen(newOpenState);
     });
-    animationRef.current.start(() => {
-      setOpen(!open);
-      animationRef.current = null;
-    });
-    setOpen(!open);
+    setOpen(newOpenState);
   };
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native2.View, { style: styles.group, children: [
     /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
@@ -350,11 +338,9 @@ function MultiPickerGroup({
         style: styles.hidden,
         pointerEvents: "none",
         onLayout: (e) => {
-          if (isMounted) {
-            const height = e.nativeEvent.layout.height;
-            if (height > 0 && height !== contentHeight) {
-              setContentHeight(height);
-            }
+          const height = e.nativeEvent.layout.height;
+          if (height > 0 && height !== contentHeight) {
+            setContentHeight(height);
           }
         },
         children
@@ -385,8 +371,8 @@ var styles = import_react_native2.StyleSheet.create({
     flexDirection: "row",
     justifyContent: "space-between",
     alignItems: "center",
-    paddingVertical: 14,
-    paddingHorizontal: 12,
+    paddingVertical: 12,
+    paddingHorizontal: 8,
     backgroundColor: "#F9FAFB",
     borderRadius: 8
   },
@@ -399,8 +385,8 @@ var styles = import_react_native2.StyleSheet.create({
     overflow: "hidden"
   },
   content: {
-    paddingTop: 8,
-    paddingHorizontal: 12,
+    marginTop: 6,
+    paddingHorizontal: 8,
     paddingBottom: 4
   },
   hidden: {
@@ -483,7 +469,6 @@ 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,
@@ -501,67 +486,36 @@ 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(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 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);
-      openModal();
+      import_react_native4.Animated.spring(slideAnim, {
+        toValue: 1,
+        useNativeDriver: true,
+        damping: 15,
+        mass: 0.8,
+        stiffness: 150
+      }).start();
     } 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: 20,
+        damping: 15,
         mass: 0.8,
-        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);
-      }
-    });
-  };
+        stiffness: 150
+      }).start();
+    }
+  }, [isVisible]);
   const open = () => {
     if (isControlled) setVisible(true);
     else setInternalVisible(true);
   };
   const close = () => {
     if (isControlled) setVisible(false);
-    else closeModal();
+    else setInternalVisible(false);
   };
   const handleSelect = (val) => {
     const updated = toggleValue(selectedValues, val);
@@ -572,14 +526,11 @@ 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) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      return groups.map((group, index) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
         MultiPickerGroup,
         {
           label: group.label,
@@ -612,14 +563,15 @@ function MultiPickerModal({
       item.value
     ));
   };
-  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 }]
+  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 }),
@@ -644,7 +596,7 @@ function MultiPickerModal({
           ),
           renderInputIcon?.({
             name: "chevron-down",
-            size: 20,
+            size: 18,
             color: "#6B7280"
           })
         ]
@@ -658,45 +610,35 @@ function MultiPickerModal({
         transparent: true,
         animationType: "none",
         onRequestClose: close,
-        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()
-                  }
-                )
-              ]
-            }
-          )
-        ] })
+        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()
+                }
+              )
+            ]
+          }
+        ) })
       }
     )
   ] });
@@ -733,71 +675,34 @@ var defaultStyles3 = import_react_native4.StyleSheet.create({
   },
   overlay: {
     flex: 1,
-    justifyContent: "flex-end"
-  },
-  backdropTouchable: {
-    position: "absolute",
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0
+    justifyContent: "flex-end",
+    backgroundColor: "rgba(0,0,0,0.4)"
   },
   container: {
-    backgroundColor: "#FFFFFF",
+    backgroundColor: "#fff",
+    padding: 20,
     borderTopLeftRadius: 20,
     borderTopRightRadius: 20,
     maxHeight: "70%",
-    minHeight: "40%",
-    shadowColor: "#000",
-    shadowOffset: {
-      width: 0,
-      height: -2
-    },
-    shadowOpacity: 0.1,
-    shadowRadius: 4,
-    elevation: 5
-  },
-  header: {
-    flexDirection: "row",
-    justifyContent: "space-between",
-    alignItems: "center",
-    paddingHorizontal: 20,
-    paddingTop: 12,
-    paddingBottom: 16,
-    borderBottomWidth: 1,
-    borderBottomColor: "#F0F0F0"
+    minHeight: "40%"
   },
-  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"
+  scrollContent: {
+    paddingBottom: 20
   },
-  doneBtn: {
-    paddingVertical: 6,
-    paddingHorizontal: 12,
+  done: {
     backgroundColor: "#6366f1",
-    borderRadius: 8
+    paddingVertical: 10,
+    paddingHorizontal: 14,
+    borderRadius: 10,
+    alignSelf: "flex-end",
+    marginBottom: 16,
+    minWidth: 80,
+    alignItems: "center"
   },
   doneText: {
-    color: "#FFFFFF",
+    color: "#fff",
     fontWeight: "600",
     fontSize: 14
-  },
-  scrollContent: {
-    paddingHorizontal: 20,
-    paddingTop: 12,
-    paddingBottom: 24
   }
 });
 
@@ -805,7 +710,6 @@ 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;
@@ -813,8 +717,8 @@ var FloatingButton = class extends import_react4.default.Component {
     import_react_native5.Animated.spring(this.animation, {
       toValue: this.open ? 0 : 1,
       useNativeDriver: true,
-      damping: 15,
-      mass: 0.8,
+      damping: 12,
+      mass: 0.6,
       stiffness: 180
     }).start();
     this.open = !this.open;
@@ -825,28 +729,26 @@ var FloatingButton = class extends import_react4.default.Component {
       radius = 100,
       actions,
       renderItemIcon,
-      styles: styles2,
-      spacing = 75
-      // Default spacing between buttons
+      styles: styles2
     } = this.props;
     let translateX = 0;
     let translateY = 0;
     if (mode === "vertical") {
-      translateY = -spacing * (index + 1);
+      translateY = -70 * (index + 1);
       translateX = 0;
     }
     if (mode === "horizontal") {
-      translateX = -spacing * (index + 1);
+      translateX = -70 * (index + 1);
       translateY = 0;
     }
     if (mode === "circle") {
       const totalActions = actions.length;
-      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 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: [
@@ -900,15 +802,7 @@ var FloatingButton = class extends import_react4.default.Component {
     );
   };
   render() {
-    const {
-      renderMainIcon,
-      styles: styles2,
-      style,
-      mainIconName,
-      mode = "vertical",
-      offsetX = 24,
-      offsetY = 100
-    } = this.props;
+    const { actions, renderMainIcon, styles: styles2, style, mainIconName } = this.props;
     const rotation = {
       transform: [
         {
@@ -930,26 +824,32 @@ var FloatingButton = class extends import_react4.default.Component {
       ]
     };
     const mainIcon = mainIconName || "add";
-    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)(
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react_native5.View, { style: [defaultStyles4.container, styles2?.container, style], children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
         import_react_native5.Animated.View,
         {
           style: [
-            defaultStyles4.mainButtonWrapper,
-            styles2?.mainButton,
-            rotation,
-            scale
+            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.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,
@@ -963,34 +863,44 @@ 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",
-    zIndex: 1e3
+    justifyContent: "center"
   },
   mainButtonWrapper: {
-    width: 56,
-    height: 56,
-    borderRadius: 28,
+    width: 60,
+    height: 60,
+    borderRadius: 30,
     backgroundColor: "#F02A4B",
     alignItems: "center",
     justifyContent: "center",
     shadowColor: "#000",
     shadowOffset: {
       width: 0,
-      height: 4
+      height: 2
     },
-    shadowOpacity: 0.3,
-    shadowRadius: 4.65,
-    elevation: 8
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84,
+    elevation: 5
   },
   button: {
-    width: 56,
-    height: 56,
-    borderRadius: 28,
+    width: 60,
+    height: 60,
+    borderRadius: 30,
     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,8 +246,7 @@ import {
   TouchableOpacity as TouchableOpacity4,
   StyleSheet as StyleSheet4,
   ScrollView as ScrollView2,
-  Animated as Animated2,
-  Dimensions
+  Animated as Animated2
 } from "react-native";
 
 // src/utils/toggleValue.ts
@@ -273,39 +272,27 @@ function MultiPickerGroup({
 }) {
   const [open, setOpen] = useState2(false);
   const [contentHeight, setContentHeight] = useState2(0);
-  const [isMounted, setIsMounted] = useState2(false);
+  const [isMeasured, setIsMeasured] = useState2(false);
   const animatedHeight = useRef(new Animated.Value(0)).current;
-  const animationRef = useRef(null);
   useEffect2(() => {
-    setIsMounted(true);
-    return () => {
-      if (animationRef.current) {
-        animationRef.current.stop();
-      }
-    };
-  }, []);
-  useEffect2(() => {
-    if (defaultOpen && contentHeight > 0 && !open) {
+    if (defaultOpen && contentHeight > 0 && !isMeasured) {
+      setIsMeasured(true);
       animatedHeight.setValue(contentHeight);
       setOpen(true);
     }
-  }, [defaultOpen, contentHeight]);
+  }, [contentHeight, defaultOpen, isMeasured]);
   const toggle = () => {
     if (contentHeight === 0) return;
-    if (animationRef.current) {
-      animationRef.current.stop();
-    }
-    const toValue = open ? 0 : contentHeight;
-    animationRef.current = Animated.timing(animatedHeight, {
+    const newOpenState = !open;
+    const toValue = newOpenState ? contentHeight : 0;
+    Animated.timing(animatedHeight, {
       toValue,
-      duration: 200,
+      duration: 250,
       useNativeDriver: false
+    }).start(() => {
+      setOpen(newOpenState);
     });
-    animationRef.current.start(() => {
-      setOpen(!open);
-      animationRef.current = null;
-    });
-    setOpen(!open);
+    setOpen(newOpenState);
   };
   return /* @__PURE__ */ jsxs2(View2, { style: styles.group, children: [
     /* @__PURE__ */ jsxs2(
@@ -330,11 +317,9 @@ function MultiPickerGroup({
         style: styles.hidden,
         pointerEvents: "none",
         onLayout: (e) => {
-          if (isMounted) {
-            const height = e.nativeEvent.layout.height;
-            if (height > 0 && height !== contentHeight) {
-              setContentHeight(height);
-            }
+          const height = e.nativeEvent.layout.height;
+          if (height > 0 && height !== contentHeight) {
+            setContentHeight(height);
           }
         },
         children
@@ -365,8 +350,8 @@ var styles = StyleSheet2.create({
     flexDirection: "row",
     justifyContent: "space-between",
     alignItems: "center",
-    paddingVertical: 14,
-    paddingHorizontal: 12,
+    paddingVertical: 12,
+    paddingHorizontal: 8,
     backgroundColor: "#F9FAFB",
     borderRadius: 8
   },
@@ -379,8 +364,8 @@ var styles = StyleSheet2.create({
     overflow: "hidden"
   },
   content: {
-    paddingTop: 8,
-    paddingHorizontal: 12,
+    marginTop: 6,
+    paddingHorizontal: 8,
     paddingBottom: 4
   },
   hidden: {
@@ -463,7 +448,6 @@ 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,
@@ -481,67 +465,36 @@ function MultiPickerModal({
 }) {
   const [internalVisible, setInternalVisible] = useState3(false);
   const [modalKey, setModalKey] = useState3(0);
-  const slideAnim = useRef2(new Animated2.Value(SCREEN_HEIGHT)).current;
-  const backdropAnim = useRef2(new Animated2.Value(0)).current;
-  const isAnimating = useRef2(false);
+  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);
-      openModal();
+      Animated2.spring(slideAnim, {
+        toValue: 1,
+        useNativeDriver: true,
+        damping: 15,
+        mass: 0.8,
+        stiffness: 150
+      }).start();
     } else {
-      closeModal();
-    }
-  }, [isVisible]);
-  const openModal = () => {
-    if (isAnimating.current) return;
-    isAnimating.current = true;
-    Animated2.parallel([
       Animated2.spring(slideAnim, {
         toValue: 0,
         useNativeDriver: true,
-        damping: 20,
+        damping: 15,
         mass: 0.8,
-        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);
-      }
-    });
-  };
+        stiffness: 150
+      }).start();
+    }
+  }, [isVisible]);
   const open = () => {
     if (isControlled) setVisible(true);
     else setInternalVisible(true);
   };
   const close = () => {
     if (isControlled) setVisible(false);
-    else closeModal();
+    else setInternalVisible(false);
   };
   const handleSelect = (val) => {
     const updated = toggleValue(selectedValues, val);
@@ -552,14 +505,11 @@ 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) => /* @__PURE__ */ jsx4(
+      return groups.map((group, index) => /* @__PURE__ */ jsx4(
         MultiPickerGroup,
         {
           label: group.label,
@@ -592,14 +542,15 @@ function MultiPickerModal({
       item.value
     ));
   };
-  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 }]
+  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 }),
@@ -624,7 +575,7 @@ function MultiPickerModal({
           ),
           renderInputIcon?.({
             name: "chevron-down",
-            size: 20,
+            size: 18,
             color: "#6B7280"
           })
         ]
@@ -638,45 +589,35 @@ function MultiPickerModal({
         transparent: true,
         animationType: "none",
         onRequestClose: close,
-        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()
-                  }
-                )
-              ]
-            }
-          )
-        ] })
+        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()
+                }
+              )
+            ]
+          }
+        ) })
       }
     )
   ] });
@@ -713,71 +654,34 @@ var defaultStyles3 = StyleSheet4.create({
   },
   overlay: {
     flex: 1,
-    justifyContent: "flex-end"
-  },
-  backdropTouchable: {
-    position: "absolute",
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0
+    justifyContent: "flex-end",
+    backgroundColor: "rgba(0,0,0,0.4)"
   },
   container: {
-    backgroundColor: "#FFFFFF",
+    backgroundColor: "#fff",
+    padding: 20,
     borderTopLeftRadius: 20,
     borderTopRightRadius: 20,
     maxHeight: "70%",
-    minHeight: "40%",
-    shadowColor: "#000",
-    shadowOffset: {
-      width: 0,
-      height: -2
-    },
-    shadowOpacity: 0.1,
-    shadowRadius: 4,
-    elevation: 5
-  },
-  header: {
-    flexDirection: "row",
-    justifyContent: "space-between",
-    alignItems: "center",
-    paddingHorizontal: 20,
-    paddingTop: 12,
-    paddingBottom: 16,
-    borderBottomWidth: 1,
-    borderBottomColor: "#F0F0F0"
+    minHeight: "40%"
   },
-  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"
+  scrollContent: {
+    paddingBottom: 20
   },
-  doneBtn: {
-    paddingVertical: 6,
-    paddingHorizontal: 12,
+  done: {
     backgroundColor: "#6366f1",
-    borderRadius: 8
+    paddingVertical: 10,
+    paddingHorizontal: 14,
+    borderRadius: 10,
+    alignSelf: "flex-end",
+    marginBottom: 16,
+    minWidth: 80,
+    alignItems: "center"
   },
   doneText: {
-    color: "#FFFFFF",
+    color: "#fff",
     fontWeight: "600",
     fontSize: 14
-  },
-  scrollContent: {
-    paddingHorizontal: 20,
-    paddingTop: 12,
-    paddingBottom: 24
   }
 });
 
@@ -787,11 +691,9 @@ import {
   Animated as Animated3,
   StyleSheet as StyleSheet5,
   TouchableWithoutFeedback,
-  View as View5,
-  Dimensions as Dimensions2
+  View as View5
 } 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;
@@ -799,8 +701,8 @@ var FloatingButton = class extends React4.Component {
     Animated3.spring(this.animation, {
       toValue: this.open ? 0 : 1,
       useNativeDriver: true,
-      damping: 15,
-      mass: 0.8,
+      damping: 12,
+      mass: 0.6,
       stiffness: 180
     }).start();
     this.open = !this.open;
@@ -811,28 +713,26 @@ var FloatingButton = class extends React4.Component {
       radius = 100,
       actions,
       renderItemIcon,
-      styles: styles2,
-      spacing = 75
-      // Default spacing between buttons
+      styles: styles2
     } = this.props;
     let translateX = 0;
     let translateY = 0;
     if (mode === "vertical") {
-      translateY = -spacing * (index + 1);
+      translateY = -70 * (index + 1);
       translateX = 0;
     }
     if (mode === "horizontal") {
-      translateX = -spacing * (index + 1);
+      translateX = -70 * (index + 1);
       translateY = 0;
     }
     if (mode === "circle") {
       const totalActions = actions.length;
-      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 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: [
@@ -886,15 +786,7 @@ var FloatingButton = class extends React4.Component {
     );
   };
   render() {
-    const {
-      renderMainIcon,
-      styles: styles2,
-      style,
-      mainIconName,
-      mode = "vertical",
-      offsetX = 24,
-      offsetY = 100
-    } = this.props;
+    const { actions, renderMainIcon, styles: styles2, style, mainIconName } = this.props;
     const rotation = {
       transform: [
         {
@@ -916,26 +808,32 @@ var FloatingButton = class extends React4.Component {
       ]
     };
     const mainIcon = mainIconName || "add";
-    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(
+    return /* @__PURE__ */ jsxs5(View5, { style: [defaultStyles4.container, styles2?.container, style], children: [
+      /* @__PURE__ */ jsx5(
         Animated3.View,
         {
           style: [
-            defaultStyles4.mainButtonWrapper,
-            styles2?.mainButton,
-            rotation,
-            scale
+            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(
+        Animated3.View,
+        {
+          style: [defaultStyles4.mainButtonWrapper, rotation, scale],
           children: /* @__PURE__ */ jsx5(View5, { style: [defaultStyles4.button, styles2?.mainButton], children: renderMainIcon?.({
             name: mainIcon,
             size: 26,
@@ -949,34 +847,44 @@ var FloatingButton = class extends React4.Component {
 var defaultStyles4 = StyleSheet5.create({
   container: {
     position: "absolute",
+    bottom: 100,
+    right: 20,
     alignItems: "center",
-    justifyContent: "center",
-    zIndex: 1e3
+    justifyContent: "center"
   },
   mainButtonWrapper: {
-    width: 56,
-    height: 56,
-    borderRadius: 28,
+    width: 60,
+    height: 60,
+    borderRadius: 30,
     backgroundColor: "#F02A4B",
     alignItems: "center",
     justifyContent: "center",
     shadowColor: "#000",
     shadowOffset: {
       width: 0,
-      height: 4
+      height: 2
     },
-    shadowOpacity: 0.3,
-    shadowRadius: 4.65,
-    elevation: 8
+    shadowOpacity: 0.25,
+    shadowRadius: 3.84,
+    elevation: 5
   },
   button: {
-    width: 56,
-    height: 56,
-    borderRadius: 28,
+    width: 60,
+    height: 60,
+    borderRadius: 30,
     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.9",
+  "version": "1.1.10",
   "description": "A fully customizable React Native picker with search, multi-select, grouping, and async support.",
   "main": "dist/index.js",
   "module": "dist/index.mjs",