@kaushverse/pickify 1.2.5 → 1.2.7

package/dist/index.d.mts

@@ -2,7 +2,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import React$1 from 'react';
 import { TextStyle, ViewStyle, Animated } from 'react-native';
 
-type IconRenderer = (props: {
+type IconRenderer$1 = (props: {
     name?: string;
     size?: number;
     color?: string;
@@ -37,7 +37,7 @@ type PickerStyles = {
     selectText?: TextStyle;
     error?: TextStyle;
 };
-type Props$1 = {
+type Props = {
     labelStyle?: TextStyle;
     selectBoxStyle?: ViewStyle;
     selectTextStyle?: TextStyle;
@@ -52,12 +52,12 @@ type Props$1 = {
     renderTab?: (tab: Group, isActive: boolean, onPress: () => void) => React$1.ReactNode;
     renderItem?: (item: Option, isSelected: boolean) => React$1.ReactNode;
     renderContainer?: (children: React$1.ReactNode) => React$1.ReactNode;
-    renderIcon?: IconRenderer;
+    renderIcon?: IconRenderer$1;
     onSelect: (value: string) => void;
     onClose: () => void;
 };
 
-declare function PickerModal({ visible, selectedValue, options, groups, styles, theme, renderTab, renderItem, renderContainer, onSelect, onClose, renderIcon, label, placeholder, error, labelStyle, selectBoxStyle, selectTextStyle, errorStyle, setVisible }: Props$1 & {
+declare function PickerModal({ visible, selectedValue, options, groups, styles, theme, renderTab, renderItem, renderContainer, onSelect, onClose, renderIcon, label, placeholder, error, labelStyle, selectBoxStyle, selectTextStyle, errorStyle, setVisible }: Props & {
     label?: string;
     placeholder?: string;
     error?: string;
@@ -82,7 +82,7 @@ type MultiPickerItemProps = {
     label: string;
     selected: boolean;
     onPress: () => void;
-    renderItemIcon?: IconRenderer;
+    renderItemIcon?: IconRenderer$1;
     styles?: MultiPickerItemStyles;
 };
 type MultiPickerGroupStyles = {
@@ -95,7 +95,7 @@ type MultiPickerGroupStyles = {
 type MultiPickerGroupProps = {
     label: string;
     children: React.ReactNode;
-    renderGroupIcon?: IconRenderer;
+    renderGroupIcon?: IconRenderer$1;
     styles?: MultiPickerGroupStyles;
     defaultOpen: boolean;
 };
@@ -121,14 +121,19 @@ type MultiPickerProps = {
     label?: string;
     placeholder?: string;
     error?: string;
-    renderInputIcon?: IconRenderer;
-    renderGroupIcon?: IconRenderer;
-    renderItemIcon?: IconRenderer;
+    renderInputIcon?: IconRenderer$1;
+    renderGroupIcon?: IconRenderer$1;
+    renderItemIcon?: IconRenderer$1;
     styles?: MultiPickerStyles;
 };
 
 declare function MultiPickerModal({ visible, setVisible, selectedValues, options, groups, onChange, label, placeholder, error, renderInputIcon, renderGroupIcon, renderItemIcon, styles, }: MultiPickerProps): react_jsx_runtime.JSX.Element;
 
+type IconRenderer = (props: {
+    name: string;
+    size: number;
+    color: string;
+}) => React$1.ReactNode;
 type Action = {
     icon: string;
     onPress?: () => void;
@@ -142,23 +147,36 @@ type FloatingButtonStyles = {
     secondaryButton?: ViewStyle;
     circleContainer?: ViewStyle;
 };
-type Props = {
+type FloatingButtonProps = {
+    /** List of actions to display when menu is open */
     actions: Action[];
+    /** Layout direction: vertical, horizontal, or circle */
     mode?: "vertical" | "horizontal" | "circle";
+    /** Radius for circle mode (distance from main button) */
     radius?: number;
+    /** Custom renderer for the main icon */
     renderMainIcon?: IconRenderer;
+    /** Custom renderer for action icons */
     renderItemIcon?: IconRenderer;
+    /** Custom styles for different parts */
     styles?: FloatingButtonStyles;
+    /** Additional style for the container */
     style?: ViewStyle;
+    /** Name of the main icon (default: 'add') */
     mainIconName?: string;
-};
-declare class FloatingButton extends React$1.Component<Props> {
-    animation: Animated.Value;
-    open: boolean;
+    /** Controls menu open state (optional, for controlled mode) */
+    open?: boolean;
+    /** Callback when menu opens/closes */
+    onToggle?: (isOpen: boolean) => void;
+    /** Animation configuration (optional) */
+    animationConfig?: Partial<Animated.SpringAnimationConfig>;
+};
+type FloatingButtonRef = {
+    openMenu: () => void;
+    closeMenu: () => void;
     toggleMenu: () => void;
-    renderAction: (action: Action, index: number) => react_jsx_runtime.JSX.Element;
-    render(): react_jsx_runtime.JSX.Element;
-}
+};
+declare const FloatingButton: React$1.ForwardRefExoticComponent<FloatingButtonProps & React$1.RefAttributes<FloatingButtonRef>>;
 
 declare function MultiPickerItem({ label, selected, onPress, renderItemIcon, styles: customStyles, }: MultiPickerItemProps): react_jsx_runtime.JSX.Element;
 
@@ -168,4 +186,4 @@ declare const toggleValue: (arr: string[], value: string) => string[];
 
 declare const groupOptions: (options: Option[], config: Record<string, string[]>) => Group[];
 
-export { FloatingButton, type Group, type MultiGroup, type MultiOption, MultiPickerGroup, type MultiPickerGroupProps, type MultiPickerGroupStyles, MultiPickerItem, type MultiPickerItemProps, type MultiPickerItemStyles, MultiPickerModal, type MultiPickerProps, type MultiPickerStyles, type Option, PickerModal, type PickerStyles, type Props$1 as Props, type Theme, groupOptions, toggleValue };
+export { FloatingButton, type Group, type MultiGroup, type MultiOption, MultiPickerGroup, type MultiPickerGroupProps, type MultiPickerGroupStyles, MultiPickerItem, type MultiPickerItemProps, type MultiPickerItemStyles, MultiPickerModal, type MultiPickerProps, type MultiPickerStyles, type Option, PickerModal, type PickerStyles, type Props, type Theme, groupOptions, toggleValue };

package/dist/index.d.ts

@@ -2,7 +2,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import React$1 from 'react';
 import { TextStyle, ViewStyle, Animated } from 'react-native';
 
-type IconRenderer = (props: {
+type IconRenderer$1 = (props: {
     name?: string;
     size?: number;
     color?: string;
@@ -37,7 +37,7 @@ type PickerStyles = {
     selectText?: TextStyle;
     error?: TextStyle;
 };
-type Props$1 = {
+type Props = {
     labelStyle?: TextStyle;
     selectBoxStyle?: ViewStyle;
     selectTextStyle?: TextStyle;
@@ -52,12 +52,12 @@ type Props$1 = {
     renderTab?: (tab: Group, isActive: boolean, onPress: () => void) => React$1.ReactNode;
     renderItem?: (item: Option, isSelected: boolean) => React$1.ReactNode;
     renderContainer?: (children: React$1.ReactNode) => React$1.ReactNode;
-    renderIcon?: IconRenderer;
+    renderIcon?: IconRenderer$1;
     onSelect: (value: string) => void;
     onClose: () => void;
 };
 
-declare function PickerModal({ visible, selectedValue, options, groups, styles, theme, renderTab, renderItem, renderContainer, onSelect, onClose, renderIcon, label, placeholder, error, labelStyle, selectBoxStyle, selectTextStyle, errorStyle, setVisible }: Props$1 & {
+declare function PickerModal({ visible, selectedValue, options, groups, styles, theme, renderTab, renderItem, renderContainer, onSelect, onClose, renderIcon, label, placeholder, error, labelStyle, selectBoxStyle, selectTextStyle, errorStyle, setVisible }: Props & {
     label?: string;
     placeholder?: string;
     error?: string;
@@ -82,7 +82,7 @@ type MultiPickerItemProps = {
     label: string;
     selected: boolean;
     onPress: () => void;
-    renderItemIcon?: IconRenderer;
+    renderItemIcon?: IconRenderer$1;
     styles?: MultiPickerItemStyles;
 };
 type MultiPickerGroupStyles = {
@@ -95,7 +95,7 @@ type MultiPickerGroupStyles = {
 type MultiPickerGroupProps = {
     label: string;
     children: React.ReactNode;
-    renderGroupIcon?: IconRenderer;
+    renderGroupIcon?: IconRenderer$1;
     styles?: MultiPickerGroupStyles;
     defaultOpen: boolean;
 };
@@ -121,14 +121,19 @@ type MultiPickerProps = {
     label?: string;
     placeholder?: string;
     error?: string;
-    renderInputIcon?: IconRenderer;
-    renderGroupIcon?: IconRenderer;
-    renderItemIcon?: IconRenderer;
+    renderInputIcon?: IconRenderer$1;
+    renderGroupIcon?: IconRenderer$1;
+    renderItemIcon?: IconRenderer$1;
     styles?: MultiPickerStyles;
 };
 
 declare function MultiPickerModal({ visible, setVisible, selectedValues, options, groups, onChange, label, placeholder, error, renderInputIcon, renderGroupIcon, renderItemIcon, styles, }: MultiPickerProps): react_jsx_runtime.JSX.Element;
 
+type IconRenderer = (props: {
+    name: string;
+    size: number;
+    color: string;
+}) => React$1.ReactNode;
 type Action = {
     icon: string;
     onPress?: () => void;
@@ -142,23 +147,36 @@ type FloatingButtonStyles = {
     secondaryButton?: ViewStyle;
     circleContainer?: ViewStyle;
 };
-type Props = {
+type FloatingButtonProps = {
+    /** List of actions to display when menu is open */
     actions: Action[];
+    /** Layout direction: vertical, horizontal, or circle */
     mode?: "vertical" | "horizontal" | "circle";
+    /** Radius for circle mode (distance from main button) */
     radius?: number;
+    /** Custom renderer for the main icon */
     renderMainIcon?: IconRenderer;
+    /** Custom renderer for action icons */
     renderItemIcon?: IconRenderer;
+    /** Custom styles for different parts */
     styles?: FloatingButtonStyles;
+    /** Additional style for the container */
     style?: ViewStyle;
+    /** Name of the main icon (default: 'add') */
     mainIconName?: string;
-};
-declare class FloatingButton extends React$1.Component<Props> {
-    animation: Animated.Value;
-    open: boolean;
+    /** Controls menu open state (optional, for controlled mode) */
+    open?: boolean;
+    /** Callback when menu opens/closes */
+    onToggle?: (isOpen: boolean) => void;
+    /** Animation configuration (optional) */
+    animationConfig?: Partial<Animated.SpringAnimationConfig>;
+};
+type FloatingButtonRef = {
+    openMenu: () => void;
+    closeMenu: () => void;
     toggleMenu: () => void;
-    renderAction: (action: Action, index: number) => react_jsx_runtime.JSX.Element;
-    render(): react_jsx_runtime.JSX.Element;
-}
+};
+declare const FloatingButton: React$1.ForwardRefExoticComponent<FloatingButtonProps & React$1.RefAttributes<FloatingButtonRef>>;
 
 declare function MultiPickerItem({ label, selected, onPress, renderItemIcon, styles: customStyles, }: MultiPickerItemProps): react_jsx_runtime.JSX.Element;
 
@@ -168,4 +186,4 @@ declare const toggleValue: (arr: string[], value: string) => string[];
 
 declare const groupOptions: (options: Option[], config: Record<string, string[]>) => Group[];
 
-export { FloatingButton, type Group, type MultiGroup, type MultiOption, MultiPickerGroup, type MultiPickerGroupProps, type MultiPickerGroupStyles, MultiPickerItem, type MultiPickerItemProps, type MultiPickerItemStyles, MultiPickerModal, type MultiPickerProps, type MultiPickerStyles, type Option, PickerModal, type PickerStyles, type Props$1 as Props, type Theme, groupOptions, toggleValue };
+export { FloatingButton, type Group, type MultiGroup, type MultiOption, MultiPickerGroup, type MultiPickerGroupProps, type MultiPickerGroupStyles, MultiPickerItem, type MultiPickerItemProps, type MultiPickerItemStyles, MultiPickerModal, type MultiPickerProps, type MultiPickerStyles, type Option, PickerModal, type PickerStyles, type Props, type Theme, groupOptions, toggleValue };

package/dist/index.js

@@ -1,9 +1,7 @@
 "use strict";
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -17,20 +15,12 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
-  FloatingButton: () => FloatingButton,
+  FloatingButton: () => FloatingButton_default,
   MultiPickerGroup: () => MultiPickerGroup,
   MultiPickerItem: () => MultiPickerItem,
   MultiPickerModal: () => MultiPickerModal,
@@ -718,106 +708,131 @@ var defaultStyles3 = import_react_native4.StyleSheet.create({
 });
 
 // src/core/FloatingButton.tsx
-var import_react4 = __toESM(require("react"));
+var import_react4 = require("react");
 var import_react_native5 = require("react-native");
 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;
-  toggleMenu = () => {
-    import_react_native5.Animated.spring(this.animation, {
-      toValue: this.open ? 0 : 1,
-      useNativeDriver: true,
-      damping: 12,
-      mass: 0.6,
-      stiffness: 180
-    }).start();
-    this.open = !this.open;
-  };
-  renderAction = (action, index) => {
+var FloatingButton = (0, import_react4.forwardRef)(
+  (props, ref) => {
     const {
+      actions,
       mode = "vertical",
       radius = 100,
-      actions,
+      renderMainIcon,
       renderItemIcon,
-      styles: styles2
-    } = this.props;
-    let translateX = 0;
-    let translateY = 0;
-    if (mode === "vertical") {
-      translateY = -60 * (index + 1);
-      translateX = 0;
-    }
-    if (mode === "horizontal") {
-      translateX = -60 * (index + 1);
-      translateY = 0;
-    }
-    if (mode === "circle") {
-      const totalActions = actions.length;
-      const startAngle = -Math.PI / 3;
-      const endAngle = -Math.PI * 0.8;
-      const angle = startAngle + index / (totalActions - 1 || 1) * (endAngle - startAngle);
-      const adjustedRadius = radius * 0.65;
-      translateX = adjustedRadius * Math.cos(angle);
-      translateY = adjustedRadius * Math.sin(angle);
-    }
-    const animStyle = {
-      transform: [
-        {
-          translateX: this.animation.interpolate({
-            inputRange: [0, 1],
-            outputRange: [0, translateX]
-          })
-        },
-        {
-          translateY: this.animation.interpolate({
-            inputRange: [0, 1],
-            outputRange: [0, translateY]
-          })
-        },
-        {
-          scale: this.animation.interpolate({
-            inputRange: [0, 0.5, 1],
-            outputRange: [0, 1.2, 1]
-          })
-        }
-      ],
-      opacity: this.animation
+      styles: customStyles,
+      style,
+      mainIconName = "add",
+      open: controlledOpen,
+      onToggle,
+      animationConfig = {}
+    } = props;
+    const animation = (0, import_react4.useRef)(new import_react_native5.Animated.Value(0)).current;
+    const [internalOpen, setInternalOpen] = (0, import_react4.useState)(false);
+    const isOpen = controlledOpen !== void 0 ? controlledOpen : internalOpen;
+    (0, import_react4.useEffect)(() => {
+      import_react_native5.Animated.spring(animation, {
+        toValue: isOpen ? 1 : 0,
+        useNativeDriver: true,
+        damping: 12,
+        mass: 0.6,
+        stiffness: 180,
+        ...animationConfig
+      }).start();
+    }, [isOpen, animation, animationConfig]);
+    (0, import_react4.useImperativeHandle)(ref, () => ({
+      openMenu: () => {
+        if (controlledOpen === void 0) setInternalOpen(true);
+        onToggle?.(true);
+      },
+      closeMenu: () => {
+        if (controlledOpen === void 0) setInternalOpen(false);
+        onToggle?.(false);
+      },
+      toggleMenu: () => {
+        const newState = !isOpen;
+        if (controlledOpen === void 0) setInternalOpen(newState);
+        onToggle?.(newState);
+      }
+    }));
+    const toggleMenu = () => {
+      const newState = !isOpen;
+      if (controlledOpen === void 0) setInternalOpen(newState);
+      onToggle?.(newState);
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-      import_react_native5.TouchableWithoutFeedback,
-      {
-        onPress: () => {
-          this.toggleMenu();
-          action.onPress?.();
-          action.navigateTo?.();
-        },
-        children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-          import_react_native5.Animated.View,
+    const renderAction = (action, index) => {
+      let translateX = 0;
+      let translateY = 0;
+      if (mode === "vertical") {
+        translateY = -60 * (index + 1);
+        translateX = 0;
+      } else if (mode === "horizontal") {
+        translateX = -60 * (index + 1);
+        translateY = 0;
+      } else if (mode === "circle") {
+        const totalActions = actions.length;
+        const startAngle = -Math.PI / 3;
+        const endAngle = -Math.PI * 0.8;
+        const angle = startAngle + index / (totalActions - 1 || 1) * (endAngle - startAngle);
+        const baseRadius = radius * 0.65;
+        const adjustedRadius = index === actions.length - 1 ? baseRadius * 0.8 : baseRadius;
+        translateX = adjustedRadius * Math.cos(angle);
+        translateY = adjustedRadius * Math.sin(angle);
+      }
+      const animStyle = {
+        transform: [
           {
-            style: [
-              defaultStyles4.secondary,
-              styles2?.secondaryButton,
-              { backgroundColor: action.color || "#F02A4B" },
-              animStyle
-            ],
-            children: renderItemIcon?.({
-              name: action.icon,
-              size: 20,
-              color: action.iconColor || "#FFF"
+            translateX: animation.interpolate({
+              inputRange: [0, 1],
+              outputRange: [0, translateX]
+            })
+          },
+          {
+            translateY: animation.interpolate({
+              inputRange: [0, 1],
+              outputRange: [0, translateY]
+            })
+          },
+          {
+            scale: animation.interpolate({
+              inputRange: [0, 0.5, 1],
+              outputRange: [0, 1.2, 1]
             })
           }
-        )
-      },
-      index
-    );
-  };
-  render() {
-    const { actions, renderMainIcon, styles: styles2, style, mainIconName } = this.props;
+        ],
+        opacity: animation
+      };
+      return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        import_react_native5.TouchableWithoutFeedback,
+        {
+          onPress: () => {
+            toggleMenu();
+            action.onPress?.();
+            action.navigateTo?.();
+          },
+          children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            import_react_native5.Animated.View,
+            {
+              style: [
+                defaultStyles4.secondary,
+                customStyles?.secondaryButton,
+                { backgroundColor: action.color || "#F02A4B" },
+                animStyle
+              ],
+              children: renderItemIcon?.({
+                name: action.icon,
+                size: 20,
+                color: action.iconColor || "#FFF"
+              })
+            }
+          )
+        },
+        index
+      );
+    };
     const rotation = {
       transform: [
         {
-          rotate: this.animation.interpolate({
+          rotate: animation.interpolate({
             inputRange: [0, 1],
             outputRange: ["0deg", "45deg"]
           })
@@ -827,42 +842,41 @@ var FloatingButton = class extends import_react4.default.Component {
     const scale = {
       transform: [
         {
-          scale: this.animation.interpolate({
+          scale: 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: [
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react_native5.View, { style: [defaultStyles4.container, customStyles?.container, style], children: [
       /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
         import_react_native5.Animated.View,
         {
           style: [
             defaultStyles4.circleContainer,
-            styles2?.circleContainer,
+            customStyles?.circleContainer,
             {
               transform: [
                 {
-                  scale: this.animation.interpolate({
+                  scale: animation.interpolate({
                     inputRange: [0, 1],
                     outputRange: [0, 1]
                   })
                 }
               ],
-              opacity: this.animation
+              opacity: animation
             }
           ],
-          children: actions.map(this.renderAction)
+          children: actions.map(renderAction)
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native5.TouchableWithoutFeedback, { onPress: this.toggleMenu, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native5.TouchableWithoutFeedback, { onPress: 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,
+          children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native5.View, { style: [defaultStyles4.button, customStyles?.mainButton], children: renderMainIcon?.({
+            name: mainIconName,
             size: 26,
             color: "#FFF"
           }) })
@@ -870,7 +884,7 @@ var FloatingButton = class extends import_react4.default.Component {
       ) })
     ] });
   }
-};
+);
 var defaultStyles4 = import_react_native5.StyleSheet.create({
   container: {
     position: "absolute",
@@ -887,10 +901,7 @@ var defaultStyles4 = import_react_native5.StyleSheet.create({
     alignItems: "center",
     justifyContent: "center",
     shadowColor: "#000",
-    shadowOffset: {
-      width: 0,
-      height: 2
-    },
+    shadowOffset: { width: 0, height: 2 },
     shadowOpacity: 0.25,
     shadowRadius: 3.84,
     elevation: 5
@@ -921,15 +932,13 @@ var defaultStyles4 = import_react_native5.StyleSheet.create({
     alignItems: "center",
     justifyContent: "center",
     shadowColor: "#000",
-    shadowOffset: {
-      width: 0,
-      height: 2
-    },
+    shadowOffset: { width: 0, height: 2 },
     shadowOpacity: 0.25,
     shadowRadius: 3.84,
     elevation: 5
   }
 });
+var FloatingButton_default = FloatingButton;
 
 // src/utils/groupOptions.ts
 var groupOptions = (options, config) => {

package/dist/index.mjs

@@ -697,7 +697,13 @@ var defaultStyles3 = StyleSheet4.create({
 });
 
 // src/core/FloatingButton.tsx
-import React4 from "react";
+import {
+  forwardRef,
+  useImperativeHandle,
+  useRef as useRef3,
+  useState as useState4,
+  useEffect as useEffect4
+} from "react";
 import {
   Animated as Animated3,
   StyleSheet as StyleSheet5,
@@ -705,103 +711,128 @@ import {
   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 Animated3.Value(0);
-  open = false;
-  toggleMenu = () => {
-    Animated3.spring(this.animation, {
-      toValue: this.open ? 0 : 1,
-      useNativeDriver: true,
-      damping: 12,
-      mass: 0.6,
-      stiffness: 180
-    }).start();
-    this.open = !this.open;
-  };
-  renderAction = (action, index) => {
+var FloatingButton = forwardRef(
+  (props, ref) => {
     const {
+      actions,
       mode = "vertical",
       radius = 100,
-      actions,
+      renderMainIcon,
       renderItemIcon,
-      styles: styles2
-    } = this.props;
-    let translateX = 0;
-    let translateY = 0;
-    if (mode === "vertical") {
-      translateY = -60 * (index + 1);
-      translateX = 0;
-    }
-    if (mode === "horizontal") {
-      translateX = -60 * (index + 1);
-      translateY = 0;
-    }
-    if (mode === "circle") {
-      const totalActions = actions.length;
-      const startAngle = -Math.PI / 3;
-      const endAngle = -Math.PI * 0.8;
-      const angle = startAngle + index / (totalActions - 1 || 1) * (endAngle - startAngle);
-      const adjustedRadius = radius * 0.65;
-      translateX = adjustedRadius * Math.cos(angle);
-      translateY = adjustedRadius * Math.sin(angle);
-    }
-    const animStyle = {
-      transform: [
-        {
-          translateX: this.animation.interpolate({
-            inputRange: [0, 1],
-            outputRange: [0, translateX]
-          })
-        },
-        {
-          translateY: this.animation.interpolate({
-            inputRange: [0, 1],
-            outputRange: [0, translateY]
-          })
-        },
-        {
-          scale: this.animation.interpolate({
-            inputRange: [0, 0.5, 1],
-            outputRange: [0, 1.2, 1]
-          })
-        }
-      ],
-      opacity: this.animation
+      styles: customStyles,
+      style,
+      mainIconName = "add",
+      open: controlledOpen,
+      onToggle,
+      animationConfig = {}
+    } = props;
+    const animation = useRef3(new Animated3.Value(0)).current;
+    const [internalOpen, setInternalOpen] = useState4(false);
+    const isOpen = controlledOpen !== void 0 ? controlledOpen : internalOpen;
+    useEffect4(() => {
+      Animated3.spring(animation, {
+        toValue: isOpen ? 1 : 0,
+        useNativeDriver: true,
+        damping: 12,
+        mass: 0.6,
+        stiffness: 180,
+        ...animationConfig
+      }).start();
+    }, [isOpen, animation, animationConfig]);
+    useImperativeHandle(ref, () => ({
+      openMenu: () => {
+        if (controlledOpen === void 0) setInternalOpen(true);
+        onToggle?.(true);
+      },
+      closeMenu: () => {
+        if (controlledOpen === void 0) setInternalOpen(false);
+        onToggle?.(false);
+      },
+      toggleMenu: () => {
+        const newState = !isOpen;
+        if (controlledOpen === void 0) setInternalOpen(newState);
+        onToggle?.(newState);
+      }
+    }));
+    const toggleMenu = () => {
+      const newState = !isOpen;
+      if (controlledOpen === void 0) setInternalOpen(newState);
+      onToggle?.(newState);
     };
-    return /* @__PURE__ */ jsx5(
-      TouchableWithoutFeedback,
-      {
-        onPress: () => {
-          this.toggleMenu();
-          action.onPress?.();
-          action.navigateTo?.();
-        },
-        children: /* @__PURE__ */ jsx5(
-          Animated3.View,
+    const renderAction = (action, index) => {
+      let translateX = 0;
+      let translateY = 0;
+      if (mode === "vertical") {
+        translateY = -60 * (index + 1);
+        translateX = 0;
+      } else if (mode === "horizontal") {
+        translateX = -60 * (index + 1);
+        translateY = 0;
+      } else if (mode === "circle") {
+        const totalActions = actions.length;
+        const startAngle = -Math.PI / 3;
+        const endAngle = -Math.PI * 0.8;
+        const angle = startAngle + index / (totalActions - 1 || 1) * (endAngle - startAngle);
+        const baseRadius = radius * 0.65;
+        const adjustedRadius = index === actions.length - 1 ? baseRadius * 0.8 : baseRadius;
+        translateX = adjustedRadius * Math.cos(angle);
+        translateY = adjustedRadius * Math.sin(angle);
+      }
+      const animStyle = {
+        transform: [
           {
-            style: [
-              defaultStyles4.secondary,
-              styles2?.secondaryButton,
-              { backgroundColor: action.color || "#F02A4B" },
-              animStyle
-            ],
-            children: renderItemIcon?.({
-              name: action.icon,
-              size: 20,
-              color: action.iconColor || "#FFF"
+            translateX: animation.interpolate({
+              inputRange: [0, 1],
+              outputRange: [0, translateX]
+            })
+          },
+          {
+            translateY: animation.interpolate({
+              inputRange: [0, 1],
+              outputRange: [0, translateY]
+            })
+          },
+          {
+            scale: animation.interpolate({
+              inputRange: [0, 0.5, 1],
+              outputRange: [0, 1.2, 1]
             })
           }
-        )
-      },
-      index
-    );
-  };
-  render() {
-    const { actions, renderMainIcon, styles: styles2, style, mainIconName } = this.props;
+        ],
+        opacity: animation
+      };
+      return /* @__PURE__ */ jsx5(
+        TouchableWithoutFeedback,
+        {
+          onPress: () => {
+            toggleMenu();
+            action.onPress?.();
+            action.navigateTo?.();
+          },
+          children: /* @__PURE__ */ jsx5(
+            Animated3.View,
+            {
+              style: [
+                defaultStyles4.secondary,
+                customStyles?.secondaryButton,
+                { backgroundColor: action.color || "#F02A4B" },
+                animStyle
+              ],
+              children: renderItemIcon?.({
+                name: action.icon,
+                size: 20,
+                color: action.iconColor || "#FFF"
+              })
+            }
+          )
+        },
+        index
+      );
+    };
     const rotation = {
       transform: [
         {
-          rotate: this.animation.interpolate({
+          rotate: animation.interpolate({
             inputRange: [0, 1],
             outputRange: ["0deg", "45deg"]
           })
@@ -811,42 +842,41 @@ var FloatingButton = class extends React4.Component {
     const scale = {
       transform: [
         {
-          scale: this.animation.interpolate({
+          scale: 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: [
+    return /* @__PURE__ */ jsxs5(View5, { style: [defaultStyles4.container, customStyles?.container, style], children: [
       /* @__PURE__ */ jsx5(
         Animated3.View,
         {
           style: [
             defaultStyles4.circleContainer,
-            styles2?.circleContainer,
+            customStyles?.circleContainer,
             {
               transform: [
                 {
-                  scale: this.animation.interpolate({
+                  scale: animation.interpolate({
                     inputRange: [0, 1],
                     outputRange: [0, 1]
                   })
                 }
               ],
-              opacity: this.animation
+              opacity: animation
             }
           ],
-          children: actions.map(this.renderAction)
+          children: actions.map(renderAction)
         }
       ),
-      /* @__PURE__ */ jsx5(TouchableWithoutFeedback, { onPress: this.toggleMenu, children: /* @__PURE__ */ jsx5(
+      /* @__PURE__ */ jsx5(TouchableWithoutFeedback, { onPress: toggleMenu, children: /* @__PURE__ */ jsx5(
         Animated3.View,
         {
           style: [defaultStyles4.mainButtonWrapper, rotation, scale],
-          children: /* @__PURE__ */ jsx5(View5, { style: [defaultStyles4.button, styles2?.mainButton], children: renderMainIcon?.({
-            name: mainIcon,
+          children: /* @__PURE__ */ jsx5(View5, { style: [defaultStyles4.button, customStyles?.mainButton], children: renderMainIcon?.({
+            name: mainIconName,
             size: 26,
             color: "#FFF"
           }) })
@@ -854,7 +884,7 @@ var FloatingButton = class extends React4.Component {
       ) })
     ] });
   }
-};
+);
 var defaultStyles4 = StyleSheet5.create({
   container: {
     position: "absolute",
@@ -871,10 +901,7 @@ var defaultStyles4 = StyleSheet5.create({
     alignItems: "center",
     justifyContent: "center",
     shadowColor: "#000",
-    shadowOffset: {
-      width: 0,
-      height: 2
-    },
+    shadowOffset: { width: 0, height: 2 },
     shadowOpacity: 0.25,
     shadowRadius: 3.84,
     elevation: 5
@@ -905,15 +932,13 @@ var defaultStyles4 = StyleSheet5.create({
     alignItems: "center",
     justifyContent: "center",
     shadowColor: "#000",
-    shadowOffset: {
-      width: 0,
-      height: 2
-    },
+    shadowOffset: { width: 0, height: 2 },
     shadowOpacity: 0.25,
     shadowRadius: 3.84,
     elevation: 5
   }
 });
+var FloatingButton_default = FloatingButton;
 
 // src/utils/groupOptions.ts
 var groupOptions = (options, config) => {
@@ -923,7 +948,7 @@ var groupOptions = (options, config) => {
   })).filter((g) => g.data.length > 0);
 };
 export {
-  FloatingButton,
+  FloatingButton_default as FloatingButton,
   MultiPickerGroup,
   MultiPickerItem,
   MultiPickerModal,

package/package.json

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