@kaushverse/pickify 1.1.14 → 1.1.16

package/dist/index.d.mts

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

package/dist/index.d.ts

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

package/dist/index.js

@@ -728,36 +728,34 @@ var FloatingButton = class extends import_react4.default.Component {
     import_react_native5.Animated.spring(this.animation, {
       toValue: this.open ? 0 : 1,
       useNativeDriver: true,
-      // ✅ ONLY physics-based config (FIXED)
-      stiffness: 250,
-      damping: 20,
-      mass: 1
+      damping: 12,
+      mass: 0.6,
+      stiffness: 180
     }).start();
     this.open = !this.open;
   };
   renderAction = (action, index) => {
     const {
       mode = "vertical",
-      radius = 90,
+      radius = 65,
+      // ✅ FIXED (was 100)
       actions,
       renderItemIcon,
-      styles: styles2,
-      spacing = 65,
-      secondaryButtonSize = 48
+      styles: styles2
     } = this.props;
     let translateX = 0;
     let translateY = 0;
     if (mode === "vertical") {
-      translateY = -spacing * (index + 1);
+      translateY = -60 * (index + 1);
     }
     if (mode === "horizontal") {
-      translateX = -spacing * (index + 1);
+      translateX = -60 * (index + 1);
     }
     if (mode === "circle") {
-      const totalActions = actions.length;
-      const startAngle = -Math.PI / 2.5;
-      const endAngle = -Math.PI * 0.7;
-      const angle = startAngle + index / (totalActions - 1 || 1) * (endAngle - startAngle);
+      const total = actions.length;
+      const spread = Math.PI / 2.5;
+      const start = -spread;
+      const angle = start + index / (total - 1 || 1) * spread;
       translateX = radius * Math.cos(angle);
       translateY = radius * Math.sin(angle);
     }
@@ -777,40 +775,20 @@ var FloatingButton = class extends import_react4.default.Component {
         },
         {
           scale: this.animation.interpolate({
-            inputRange: [0, 0.3, 0.7, 1],
-            outputRange: [0, 1.1, 0.95, 1]
+            inputRange: [0, 0.5, 1],
+            outputRange: [0, 1.1, 1]
           })
         }
       ],
-      opacity: this.animation.interpolate({
-        inputRange: [0, 0.2, 1],
-        outputRange: [0, 0.8, 1]
-      })
-    };
-    const delay = index * 30;
-    const delayedStyle = {
-      opacity: this.animation.interpolate({
-        inputRange: [0, 0.2 + delay / 100, 1],
-        outputRange: [0, 0, 1]
-      }),
-      transform: [
-        {
-          scale: this.animation.interpolate({
-            inputRange: [0, 0.3 + delay / 100, 1],
-            outputRange: [0, 0.8, 1]
-          })
-        }
-      ]
+      opacity: this.animation
     };
     return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       import_react_native5.TouchableWithoutFeedback,
       {
         onPress: () => {
           this.toggleMenu();
-          setTimeout(() => {
-            action.onPress?.();
-            action.navigateTo?.();
-          }, 100);
+          action.onPress?.();
+          action.navigateTo?.();
         },
         children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           import_react_native5.Animated.View,
@@ -818,18 +796,12 @@ var FloatingButton = class extends import_react4.default.Component {
             style: [
               defaultStyles4.secondary,
               styles2?.secondaryButton,
-              {
-                backgroundColor: action.color || "#F02A4B",
-                width: secondaryButtonSize,
-                height: secondaryButtonSize,
-                borderRadius: secondaryButtonSize / 2
-              },
-              animStyle,
-              mode !== "circle" && delayedStyle
+              { backgroundColor: action.color || "#F02A4B" },
+              animStyle
             ],
             children: renderItemIcon?.({
               name: action.icon,
-              size: secondaryButtonSize * 0.42,
+              size: 20,
               color: action.iconColor || "#FFF"
             })
           }
@@ -839,15 +811,7 @@ var FloatingButton = class extends import_react4.default.Component {
     );
   };
   render() {
-    const {
-      actions,
-      renderMainIcon,
-      styles: styles2,
-      style,
-      mainIconName,
-      mode = "vertical",
-      buttonSize = 56
-    } = this.props;
+    const { actions, renderMainIcon, styles: styles2, style, mainIconName } = this.props;
     const rotation = {
       transform: [
         {
@@ -858,83 +822,76 @@ var FloatingButton = class extends import_react4.default.Component {
         }
       ]
     };
-    const mainScale = {
-      transform: [
-        {
-          scale: this.animation.interpolate({
-            inputRange: [0, 0.5, 1],
-            outputRange: [1, 1.15, 1]
-          })
-        }
-      ]
-    };
     const mainIcon = mainIconName || "add";
-    const containerStyle = [
-      defaultStyles4.container,
-      styles2?.container,
-      style,
-      { right: 20, bottom: 100 }
-    ];
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react_native5.View, { style: containerStyle, 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)(
+    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,
-            mainScale,
-            {
-              width: buttonSize,
-              height: buttonSize,
-              borderRadius: buttonSize / 2
-            }
-          ],
-          children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-            import_react_native5.View,
+            defaultStyles4.circleContainer,
+            styles2?.circleContainer,
             {
-              style: [
-                defaultStyles4.button,
+              transform: [
                 {
-                  width: buttonSize,
-                  height: buttonSize,
-                  borderRadius: buttonSize / 2
+                  scale: this.animation.interpolate({
+                    inputRange: [0, 1],
+                    outputRange: [0, 1]
+                  })
                 }
               ],
-              children: renderMainIcon?.({
-                name: mainIcon,
-                size: buttonSize * 0.46,
-                color: "#FFF"
-              })
+              opacity: this.animation
             }
-          )
+          ],
+          children: actions.map((a, i) => this.renderAction(a, i))
         }
-      ) })
+      ),
+      /* @__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], children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native5.View, { style: [defaultStyles4.button, styles2?.mainButton], children: renderMainIcon?.({
+        name: mainIcon,
+        size: 26,
+        color: "#FFF"
+      }) }) }) })
     ] });
   }
 };
 var defaultStyles4 = import_react_native5.StyleSheet.create({
   container: {
     position: "absolute",
+    bottom: 100,
+    right: 20,
     alignItems: "center",
-    justifyContent: "center",
-    zIndex: 1e3
+    justifyContent: "center"
   },
   mainButtonWrapper: {
+    width: 60,
+    height: 60,
+    borderRadius: 30,
     backgroundColor: "#F02A4B",
     alignItems: "center",
     justifyContent: "center",
-    elevation: 8
+    elevation: 5
   },
   button: {
+    width: 60,
+    height: 60,
+    borderRadius: 30,
     backgroundColor: "#F02A4B",
     alignItems: "center",
     justifyContent: "center"
   },
+  circleContainer: {
+    position: "absolute",
+    width: 140,
+    height: 140,
+    right: -40,
+    bottom: -40,
+    alignItems: "center",
+    justifyContent: "center"
+  },
   secondary: {
     position: "absolute",
-    backgroundColor: "#F02A4B",
+    width: 48,
+    height: 48,
+    borderRadius: 24,
     alignItems: "center",
     justifyContent: "center",
     elevation: 5

package/dist/index.mjs

@@ -712,36 +712,34 @@ var FloatingButton = class extends React4.Component {
     Animated3.spring(this.animation, {
       toValue: this.open ? 0 : 1,
       useNativeDriver: true,
-      // ✅ ONLY physics-based config (FIXED)
-      stiffness: 250,
-      damping: 20,
-      mass: 1
+      damping: 12,
+      mass: 0.6,
+      stiffness: 180
     }).start();
     this.open = !this.open;
   };
   renderAction = (action, index) => {
     const {
       mode = "vertical",
-      radius = 90,
+      radius = 65,
+      // ✅ FIXED (was 100)
       actions,
       renderItemIcon,
-      styles: styles2,
-      spacing = 65,
-      secondaryButtonSize = 48
+      styles: styles2
     } = this.props;
     let translateX = 0;
     let translateY = 0;
     if (mode === "vertical") {
-      translateY = -spacing * (index + 1);
+      translateY = -60 * (index + 1);
     }
     if (mode === "horizontal") {
-      translateX = -spacing * (index + 1);
+      translateX = -60 * (index + 1);
     }
     if (mode === "circle") {
-      const totalActions = actions.length;
-      const startAngle = -Math.PI / 2.5;
-      const endAngle = -Math.PI * 0.7;
-      const angle = startAngle + index / (totalActions - 1 || 1) * (endAngle - startAngle);
+      const total = actions.length;
+      const spread = Math.PI / 2.5;
+      const start = -spread;
+      const angle = start + index / (total - 1 || 1) * spread;
       translateX = radius * Math.cos(angle);
       translateY = radius * Math.sin(angle);
     }
@@ -761,40 +759,20 @@ var FloatingButton = class extends React4.Component {
         },
         {
           scale: this.animation.interpolate({
-            inputRange: [0, 0.3, 0.7, 1],
-            outputRange: [0, 1.1, 0.95, 1]
+            inputRange: [0, 0.5, 1],
+            outputRange: [0, 1.1, 1]
           })
         }
       ],
-      opacity: this.animation.interpolate({
-        inputRange: [0, 0.2, 1],
-        outputRange: [0, 0.8, 1]
-      })
-    };
-    const delay = index * 30;
-    const delayedStyle = {
-      opacity: this.animation.interpolate({
-        inputRange: [0, 0.2 + delay / 100, 1],
-        outputRange: [0, 0, 1]
-      }),
-      transform: [
-        {
-          scale: this.animation.interpolate({
-            inputRange: [0, 0.3 + delay / 100, 1],
-            outputRange: [0, 0.8, 1]
-          })
-        }
-      ]
+      opacity: this.animation
     };
     return /* @__PURE__ */ jsx5(
       TouchableWithoutFeedback,
       {
         onPress: () => {
           this.toggleMenu();
-          setTimeout(() => {
-            action.onPress?.();
-            action.navigateTo?.();
-          }, 100);
+          action.onPress?.();
+          action.navigateTo?.();
         },
         children: /* @__PURE__ */ jsx5(
           Animated3.View,
@@ -802,18 +780,12 @@ var FloatingButton = class extends React4.Component {
             style: [
               defaultStyles4.secondary,
               styles2?.secondaryButton,
-              {
-                backgroundColor: action.color || "#F02A4B",
-                width: secondaryButtonSize,
-                height: secondaryButtonSize,
-                borderRadius: secondaryButtonSize / 2
-              },
-              animStyle,
-              mode !== "circle" && delayedStyle
+              { backgroundColor: action.color || "#F02A4B" },
+              animStyle
             ],
             children: renderItemIcon?.({
               name: action.icon,
-              size: secondaryButtonSize * 0.42,
+              size: 20,
               color: action.iconColor || "#FFF"
             })
           }
@@ -823,15 +795,7 @@ var FloatingButton = class extends React4.Component {
     );
   };
   render() {
-    const {
-      actions,
-      renderMainIcon,
-      styles: styles2,
-      style,
-      mainIconName,
-      mode = "vertical",
-      buttonSize = 56
-    } = this.props;
+    const { actions, renderMainIcon, styles: styles2, style, mainIconName } = this.props;
     const rotation = {
       transform: [
         {
@@ -842,83 +806,76 @@ var FloatingButton = class extends React4.Component {
         }
       ]
     };
-    const mainScale = {
-      transform: [
-        {
-          scale: this.animation.interpolate({
-            inputRange: [0, 0.5, 1],
-            outputRange: [1, 1.15, 1]
-          })
-        }
-      ]
-    };
     const mainIcon = mainIconName || "add";
-    const containerStyle = [
-      defaultStyles4.container,
-      styles2?.container,
-      style,
-      { right: 20, bottom: 100 }
-    ];
-    return /* @__PURE__ */ jsxs5(View5, { style: containerStyle, children: [
-      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,
-            mainScale,
-            {
-              width: buttonSize,
-              height: buttonSize,
-              borderRadius: buttonSize / 2
-            }
-          ],
-          children: /* @__PURE__ */ jsx5(
-            View5,
+            defaultStyles4.circleContainer,
+            styles2?.circleContainer,
             {
-              style: [
-                defaultStyles4.button,
+              transform: [
                 {
-                  width: buttonSize,
-                  height: buttonSize,
-                  borderRadius: buttonSize / 2
+                  scale: this.animation.interpolate({
+                    inputRange: [0, 1],
+                    outputRange: [0, 1]
+                  })
                 }
               ],
-              children: renderMainIcon?.({
-                name: mainIcon,
-                size: buttonSize * 0.46,
-                color: "#FFF"
-              })
+              opacity: this.animation
             }
-          )
+          ],
+          children: actions.map((a, i) => this.renderAction(a, i))
         }
-      ) })
+      ),
+      /* @__PURE__ */ jsx5(TouchableWithoutFeedback, { onPress: this.toggleMenu, children: /* @__PURE__ */ jsx5(Animated3.View, { style: [defaultStyles4.mainButtonWrapper, rotation], children: /* @__PURE__ */ jsx5(View5, { style: [defaultStyles4.button, styles2?.mainButton], children: renderMainIcon?.({
+        name: mainIcon,
+        size: 26,
+        color: "#FFF"
+      }) }) }) })
     ] });
   }
 };
 var defaultStyles4 = StyleSheet5.create({
   container: {
     position: "absolute",
+    bottom: 100,
+    right: 20,
     alignItems: "center",
-    justifyContent: "center",
-    zIndex: 1e3
+    justifyContent: "center"
   },
   mainButtonWrapper: {
+    width: 60,
+    height: 60,
+    borderRadius: 30,
     backgroundColor: "#F02A4B",
     alignItems: "center",
     justifyContent: "center",
-    elevation: 8
+    elevation: 5
   },
   button: {
+    width: 60,
+    height: 60,
+    borderRadius: 30,
     backgroundColor: "#F02A4B",
     alignItems: "center",
     justifyContent: "center"
   },
+  circleContainer: {
+    position: "absolute",
+    width: 140,
+    height: 140,
+    right: -40,
+    bottom: -40,
+    alignItems: "center",
+    justifyContent: "center"
+  },
   secondary: {
     position: "absolute",
-    backgroundColor: "#F02A4B",
+    width: 48,
+    height: 48,
+    borderRadius: 24,
     alignItems: "center",
     justifyContent: "center",
     elevation: 5

package/package.json

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