@kaushverse/pickify 1.1.12 → 1.1.15

package/dist/index.d.mts

@@ -151,10 +151,16 @@ 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;
-    open: boolean;
+    state: {
+        open: boolean;
+    };
     toggleMenu: () => void;
     renderAction: (action: Action, index: number) => react_jsx_runtime.JSX.Element;
     render(): react_jsx_runtime.JSX.Element;

package/dist/index.d.ts

@@ -151,10 +151,16 @@ 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;
-    open: boolean;
+    state: {
+        open: boolean;
+    };
     toggleMenu: () => void;
     renderAction: (action: Action, index: number) => react_jsx_runtime.JSX.Element;
     render(): react_jsx_runtime.JSX.Element;

package/dist/index.js

@@ -720,46 +720,49 @@ var defaultStyles3 = import_react_native4.StyleSheet.create({
 // src/core/FloatingButton.tsx
 var import_react4 = __toESM(require("react"));
 var import_react_native5 = require("react-native");
+var import_vector_icons = require("@expo/vector-icons");
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var FloatingButton = class extends import_react4.default.Component {
   animation = new import_react_native5.Animated.Value(0);
-  open = false;
+  state = {
+    open: false
+  };
   toggleMenu = () => {
+    const toValue = this.state.open ? 0 : 1;
     import_react_native5.Animated.spring(this.animation, {
-      toValue: this.open ? 0 : 1,
+      toValue,
       useNativeDriver: true,
-      damping: 12,
-      mass: 0.6,
-      stiffness: 180
+      stiffness: 250,
+      damping: 20,
+      mass: 1
     }).start();
-    this.open = !this.open;
+    this.setState({ open: !this.state.open });
   };
   renderAction = (action, index) => {
     const {
       mode = "vertical",
-      radius = 100,
+      radius = 90,
       actions,
       renderItemIcon,
-      styles: styles2
+      styles: styles2,
+      spacing = 65,
+      secondaryButtonSize = 48
     } = this.props;
     let translateX = 0;
     let translateY = 0;
     if (mode === "vertical") {
-      translateY = -70 * (index + 1);
-      translateX = 0;
+      translateY = -spacing * (index + 1);
     }
     if (mode === "horizontal") {
-      translateX = -70 * (index + 1);
-      translateY = 0;
+      translateX = -spacing * (index + 1);
     }
     if (mode === "circle") {
       const totalActions = actions.length;
-      const startAngle = -Math.PI / 3;
-      const endAngle = -Math.PI * 0.8;
+      const startAngle = -Math.PI / 2.5;
+      const endAngle = -Math.PI * 0.7;
       const angle = startAngle + index / (totalActions - 1 || 1) * (endAngle - startAngle);
-      const adjustedRadius = radius * 0.65;
-      translateX = adjustedRadius * Math.cos(angle);
-      translateY = adjustedRadius * Math.sin(angle);
+      translateX = radius * Math.cos(angle);
+      translateY = radius * Math.sin(angle);
     }
     const animStyle = {
       transform: [
@@ -777,20 +780,25 @@ var FloatingButton = class extends import_react4.default.Component {
         },
         {
           scale: this.animation.interpolate({
-            inputRange: [0, 0.5, 1],
-            outputRange: [0, 1.2, 1]
+            inputRange: [0, 0.3, 0.7, 1],
+            outputRange: [0, 1.1, 0.95, 1]
           })
         }
       ],
-      opacity: this.animation
+      opacity: this.animation.interpolate({
+        inputRange: [0, 0.2, 1],
+        outputRange: [0, 0.8, 1]
+      })
     };
     return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       import_react_native5.TouchableWithoutFeedback,
       {
         onPress: () => {
           this.toggleMenu();
-          action.onPress?.();
-          action.navigateTo?.();
+          setTimeout(() => {
+            action.onPress?.();
+            action.navigateTo?.();
+          }, 100);
         },
         children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
           import_react_native5.Animated.View,
@@ -798,14 +806,26 @@ var FloatingButton = class extends import_react4.default.Component {
             style: [
               defaultStyles4.secondary,
               styles2?.secondaryButton,
-              { backgroundColor: action.color || "#F02A4B" },
+              {
+                backgroundColor: action.color || "#F02A4B",
+                width: secondaryButtonSize,
+                height: secondaryButtonSize,
+                borderRadius: secondaryButtonSize / 2
+              },
               animStyle
             ],
-            children: renderItemIcon?.({
+            children: renderItemIcon ? renderItemIcon({
               name: action.icon,
-              size: 20,
+              size: secondaryButtonSize * 0.42,
               color: action.iconColor || "#FFF"
-            })
+            }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              import_vector_icons.Ionicons,
+              {
+                name: action.icon,
+                size: secondaryButtonSize * 0.42,
+                color: action.iconColor || "#FFF"
+              }
+            )
           }
         )
       },
@@ -813,7 +833,14 @@ var FloatingButton = class extends import_react4.default.Component {
     );
   };
   render() {
-    const { actions, renderMainIcon, styles: styles2, style, mainIconName } = this.props;
+    const {
+      actions,
+      renderMainIcon,
+      styles: styles2,
+      style,
+      mainIconName,
+      buttonSize = 56
+    } = this.props;
     const rotation = {
       transform: [
         {
@@ -824,48 +851,57 @@ var FloatingButton = class extends import_react4.default.Component {
         }
       ]
     };
-    const scale = {
+    const mainScale = {
       transform: [
         {
           scale: this.animation.interpolate({
             inputRange: [0, 0.5, 1],
-            outputRange: [1, 1.1, 1]
+            outputRange: [1, 1.15, 1]
           })
         }
       ]
     };
     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,
+      { 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)(
         import_react_native5.Animated.View,
         {
           style: [
-            defaultStyles4.circleContainer,
-            styles2?.circleContainer,
+            defaultStyles4.mainButtonWrapper,
+            styles2?.mainButton,
+            rotation,
+            mainScale,
+            {
+              width: buttonSize,
+              height: buttonSize,
+              borderRadius: buttonSize / 2
+            }
+          ],
+          children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            import_react_native5.View,
             {
-              transform: [
+              style: [
+                defaultStyles4.button,
                 {
-                  scale: this.animation.interpolate({
-                    inputRange: [0, 1],
-                    outputRange: [0, 1]
-                  })
+                  width: buttonSize,
+                  height: buttonSize,
+                  borderRadius: buttonSize / 2
                 }
               ],
-              opacity: this.animation
+              children: renderMainIcon ? renderMainIcon({
+                name: mainIcon,
+                size: buttonSize * 0.46,
+                color: "#FFF"
+              }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_vector_icons.Ionicons, { name: "add", size: buttonSize * 0.46, color: "#FFF" })
             }
-          ],
-          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,
-            color: "#FFF"
-          }) })
+          )
         }
       ) })
     ] });
@@ -874,60 +910,29 @@ 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,
     backgroundColor: "#F02A4B",
     alignItems: "center",
     justifyContent: "center",
-    shadowColor: "#000",
-    shadowOffset: {
-      width: 0,
-      height: 2
-    },
-    shadowOpacity: 0.25,
-    shadowRadius: 3.84,
-    elevation: 5
+    elevation: 8,
+    zIndex: 1e3
   },
   button: {
-    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,
-    height: 48,
-    borderRadius: 24,
     backgroundColor: "#F02A4B",
     alignItems: "center",
     justifyContent: "center",
-    shadowColor: "#000",
-    shadowOffset: {
-      width: 0,
-      height: 2
-    },
-    shadowOpacity: 0.25,
-    shadowRadius: 3.84,
-    elevation: 5
+    elevation: 5,
+    zIndex: 999
   }
 });
 

package/dist/index.mjs

@@ -704,46 +704,49 @@ import {
   TouchableWithoutFeedback,
   View as View5
 } from "react-native";
+import { Ionicons } from "@expo/vector-icons";
 import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 var FloatingButton = class extends React4.Component {
   animation = new Animated3.Value(0);
-  open = false;
+  state = {
+    open: false
+  };
   toggleMenu = () => {
+    const toValue = this.state.open ? 0 : 1;
     Animated3.spring(this.animation, {
-      toValue: this.open ? 0 : 1,
+      toValue,
       useNativeDriver: true,
-      damping: 12,
-      mass: 0.6,
-      stiffness: 180
+      stiffness: 250,
+      damping: 20,
+      mass: 1
     }).start();
-    this.open = !this.open;
+    this.setState({ open: !this.state.open });
   };
   renderAction = (action, index) => {
     const {
       mode = "vertical",
-      radius = 100,
+      radius = 90,
       actions,
       renderItemIcon,
-      styles: styles2
+      styles: styles2,
+      spacing = 65,
+      secondaryButtonSize = 48
     } = this.props;
     let translateX = 0;
     let translateY = 0;
     if (mode === "vertical") {
-      translateY = -70 * (index + 1);
-      translateX = 0;
+      translateY = -spacing * (index + 1);
     }
     if (mode === "horizontal") {
-      translateX = -70 * (index + 1);
-      translateY = 0;
+      translateX = -spacing * (index + 1);
     }
     if (mode === "circle") {
       const totalActions = actions.length;
-      const startAngle = -Math.PI / 3;
-      const endAngle = -Math.PI * 0.8;
+      const startAngle = -Math.PI / 2.5;
+      const endAngle = -Math.PI * 0.7;
       const angle = startAngle + index / (totalActions - 1 || 1) * (endAngle - startAngle);
-      const adjustedRadius = radius * 0.65;
-      translateX = adjustedRadius * Math.cos(angle);
-      translateY = adjustedRadius * Math.sin(angle);
+      translateX = radius * Math.cos(angle);
+      translateY = radius * Math.sin(angle);
     }
     const animStyle = {
       transform: [
@@ -761,20 +764,25 @@ var FloatingButton = class extends React4.Component {
         },
         {
           scale: this.animation.interpolate({
-            inputRange: [0, 0.5, 1],
-            outputRange: [0, 1.2, 1]
+            inputRange: [0, 0.3, 0.7, 1],
+            outputRange: [0, 1.1, 0.95, 1]
           })
         }
       ],
-      opacity: this.animation
+      opacity: this.animation.interpolate({
+        inputRange: [0, 0.2, 1],
+        outputRange: [0, 0.8, 1]
+      })
     };
     return /* @__PURE__ */ jsx5(
       TouchableWithoutFeedback,
       {
         onPress: () => {
           this.toggleMenu();
-          action.onPress?.();
-          action.navigateTo?.();
+          setTimeout(() => {
+            action.onPress?.();
+            action.navigateTo?.();
+          }, 100);
         },
         children: /* @__PURE__ */ jsx5(
           Animated3.View,
@@ -782,14 +790,26 @@ var FloatingButton = class extends React4.Component {
             style: [
               defaultStyles4.secondary,
               styles2?.secondaryButton,
-              { backgroundColor: action.color || "#F02A4B" },
+              {
+                backgroundColor: action.color || "#F02A4B",
+                width: secondaryButtonSize,
+                height: secondaryButtonSize,
+                borderRadius: secondaryButtonSize / 2
+              },
               animStyle
             ],
-            children: renderItemIcon?.({
+            children: renderItemIcon ? renderItemIcon({
               name: action.icon,
-              size: 20,
+              size: secondaryButtonSize * 0.42,
               color: action.iconColor || "#FFF"
-            })
+            }) : /* @__PURE__ */ jsx5(
+              Ionicons,
+              {
+                name: action.icon,
+                size: secondaryButtonSize * 0.42,
+                color: action.iconColor || "#FFF"
+              }
+            )
           }
         )
       },
@@ -797,7 +817,14 @@ var FloatingButton = class extends React4.Component {
     );
   };
   render() {
-    const { actions, renderMainIcon, styles: styles2, style, mainIconName } = this.props;
+    const {
+      actions,
+      renderMainIcon,
+      styles: styles2,
+      style,
+      mainIconName,
+      buttonSize = 56
+    } = this.props;
     const rotation = {
       transform: [
         {
@@ -808,48 +835,57 @@ var FloatingButton = class extends React4.Component {
         }
       ]
     };
-    const scale = {
+    const mainScale = {
       transform: [
         {
           scale: this.animation.interpolate({
             inputRange: [0, 0.5, 1],
-            outputRange: [1, 1.1, 1]
+            outputRange: [1, 1.15, 1]
           })
         }
       ]
     };
     const mainIcon = mainIconName || "add";
-    return /* @__PURE__ */ jsxs5(View5, { style: [defaultStyles4.container, styles2?.container, style], children: [
-      /* @__PURE__ */ jsx5(
+    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(
         Animated3.View,
         {
           style: [
-            defaultStyles4.circleContainer,
-            styles2?.circleContainer,
+            defaultStyles4.mainButtonWrapper,
+            styles2?.mainButton,
+            rotation,
+            mainScale,
+            {
+              width: buttonSize,
+              height: buttonSize,
+              borderRadius: buttonSize / 2
+            }
+          ],
+          children: /* @__PURE__ */ jsx5(
+            View5,
             {
-              transform: [
+              style: [
+                defaultStyles4.button,
                 {
-                  scale: this.animation.interpolate({
-                    inputRange: [0, 1],
-                    outputRange: [0, 1]
-                  })
+                  width: buttonSize,
+                  height: buttonSize,
+                  borderRadius: buttonSize / 2
                 }
               ],
-              opacity: this.animation
+              children: renderMainIcon ? renderMainIcon({
+                name: mainIcon,
+                size: buttonSize * 0.46,
+                color: "#FFF"
+              }) : /* @__PURE__ */ jsx5(Ionicons, { name: "add", size: buttonSize * 0.46, color: "#FFF" })
             }
-          ],
-          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,
-            color: "#FFF"
-          }) })
+          )
         }
       ) })
     ] });
@@ -858,60 +894,29 @@ 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,
     backgroundColor: "#F02A4B",
     alignItems: "center",
     justifyContent: "center",
-    shadowColor: "#000",
-    shadowOffset: {
-      width: 0,
-      height: 2
-    },
-    shadowOpacity: 0.25,
-    shadowRadius: 3.84,
-    elevation: 5
+    elevation: 8,
+    zIndex: 1e3
   },
   button: {
-    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,
-    height: 48,
-    borderRadius: 24,
     backgroundColor: "#F02A4B",
     alignItems: "center",
     justifyContent: "center",
-    shadowColor: "#000",
-    shadowOffset: {
-      width: 0,
-      height: 2
-    },
-    shadowOpacity: 0.25,
-    shadowRadius: 3.84,
-    elevation: 5
+    elevation: 5,
+    zIndex: 999
   }
 });
 

package/package.json

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