@kaushverse/pickify 1.1.1 → 1.1.3

package/dist/index.d.mts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React$1 from 'react';
-import { TextStyle, ViewStyle } from 'react-native';
+import { TextStyle, ViewStyle, Animated } from 'react-native';
 
 type IconRenderer = (props: {
     name?: string;
@@ -37,7 +37,7 @@ type PickerStyles = {
     selectText?: TextStyle;
     error?: TextStyle;
 };
-type Props = {
+type Props$1 = {
     labelStyle?: TextStyle;
     selectBoxStyle?: ViewStyle;
     selectTextStyle?: TextStyle;
@@ -57,7 +57,7 @@ type Props = {
     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 & {
+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 & {
     label?: string;
     placeholder?: string;
     error?: string;
@@ -128,6 +128,33 @@ type MultiPickerProps = {
 
 declare function MultiPickerModal({ visible, setVisible, selectedValues, options, groups, onChange, label, placeholder, error, renderInputIcon, renderGroupIcon, renderItemIcon, styles, }: MultiPickerProps): react_jsx_runtime.JSX.Element;
 
+type Action = {
+    icon: string;
+    onPress: () => void;
+};
+type FloatingButtonStyles = {
+    container?: ViewStyle;
+    mainButton?: ViewStyle;
+    secondaryButton?: ViewStyle;
+    mainIcon?: TextStyle;
+    secondaryIcon?: TextStyle;
+};
+type Props = {
+    actions: Action[];
+    mode?: "vertical" | "horizontal" | "circle";
+    radius?: number;
+    renderIcon?: IconRenderer;
+    styles?: FloatingButtonStyles;
+    style?: ViewStyle;
+};
+declare class FloatingButton extends React$1.Component<Props> {
+    animation: Animated.Value;
+    open: boolean;
+    toggleMenu: () => void;
+    renderAction: (action: Action, index: number) => react_jsx_runtime.JSX.Element;
+    render(): react_jsx_runtime.JSX.Element;
+}
+
 declare function MultiPickerItem({ label, selected, onPress, renderItemIcon, styles: customStyles, }: MultiPickerItemProps): react_jsx_runtime.JSX.Element;
 
 declare function MultiPickerGroup({ label, children, renderGroupIcon, }: MultiPickerGroupProps): react_jsx_runtime.JSX.Element;
@@ -136,4 +163,4 @@ declare const toggleValue: (arr: string[], value: string) => string[];
 
 declare const groupOptions: (options: Option[], config: Record<string, string[]>) => Group[];
 
-export { 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 };
+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 };

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React$1 from 'react';
-import { TextStyle, ViewStyle } from 'react-native';
+import { TextStyle, ViewStyle, Animated } from 'react-native';
 
 type IconRenderer = (props: {
     name?: string;
@@ -37,7 +37,7 @@ type PickerStyles = {
     selectText?: TextStyle;
     error?: TextStyle;
 };
-type Props = {
+type Props$1 = {
     labelStyle?: TextStyle;
     selectBoxStyle?: ViewStyle;
     selectTextStyle?: TextStyle;
@@ -57,7 +57,7 @@ type Props = {
     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 & {
+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 & {
     label?: string;
     placeholder?: string;
     error?: string;
@@ -128,6 +128,33 @@ type MultiPickerProps = {
 
 declare function MultiPickerModal({ visible, setVisible, selectedValues, options, groups, onChange, label, placeholder, error, renderInputIcon, renderGroupIcon, renderItemIcon, styles, }: MultiPickerProps): react_jsx_runtime.JSX.Element;
 
+type Action = {
+    icon: string;
+    onPress: () => void;
+};
+type FloatingButtonStyles = {
+    container?: ViewStyle;
+    mainButton?: ViewStyle;
+    secondaryButton?: ViewStyle;
+    mainIcon?: TextStyle;
+    secondaryIcon?: TextStyle;
+};
+type Props = {
+    actions: Action[];
+    mode?: "vertical" | "horizontal" | "circle";
+    radius?: number;
+    renderIcon?: IconRenderer;
+    styles?: FloatingButtonStyles;
+    style?: ViewStyle;
+};
+declare class FloatingButton extends React$1.Component<Props> {
+    animation: Animated.Value;
+    open: boolean;
+    toggleMenu: () => void;
+    renderAction: (action: Action, index: number) => react_jsx_runtime.JSX.Element;
+    render(): react_jsx_runtime.JSX.Element;
+}
+
 declare function MultiPickerItem({ label, selected, onPress, renderItemIcon, styles: customStyles, }: MultiPickerItemProps): react_jsx_runtime.JSX.Element;
 
 declare function MultiPickerGroup({ label, children, renderGroupIcon, }: MultiPickerGroupProps): react_jsx_runtime.JSX.Element;
@@ -136,4 +163,4 @@ declare const toggleValue: (arr: string[], value: string) => string[];
 
 declare const groupOptions: (options: Option[], config: Record<string, string[]>) => Group[];
 
-export { 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 };
+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 };

package/dist/index.js

@@ -1,7 +1,9 @@
 "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)
@@ -15,11 +17,20 @@ 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,
   MultiPickerGroup: () => MultiPickerGroup,
   MultiPickerItem: () => MultiPickerItem,
   MultiPickerModal: () => MultiPickerModal,
@@ -564,6 +575,149 @@ 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_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) => {
+    const {
+      mode = "vertical",
+      radius = 100,
+      actions,
+      renderIcon,
+      styles: styles2
+    } = this.props;
+    let translateX = 0;
+    let translateY = 0;
+    if (mode === "vertical") {
+      translateY = -60 * (index + 1);
+    }
+    if (mode === "horizontal") {
+      translateX = -60 * (index + 1);
+    }
+    if (mode === "circle") {
+      const angle = index / actions.length * Math.PI;
+      translateX = radius * Math.cos(angle);
+      translateY = -radius * 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.1, 1]
+          })
+        }
+      ],
+      opacity: this.animation
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      import_react_native5.TouchableWithoutFeedback,
+      {
+        onPress: () => {
+          this.toggleMenu();
+          action.onPress();
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          import_react_native5.Animated.View,
+          {
+            style: [defaultStyles4.secondary, styles2?.secondaryButton, animStyle],
+            children: renderIcon?.({
+              name: action.icon,
+              size: 20,
+              color: "#FFF"
+            })
+          }
+        )
+      },
+      index
+    );
+  };
+  render() {
+    const { actions, renderIcon, styles: styles2, style } = this.props;
+    const rotation = {
+      transform: [
+        {
+          rotate: this.animation.interpolate({
+            inputRange: [0, 1],
+            outputRange: ["0deg", "45deg"]
+          })
+        }
+      ]
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+      import_react_native5.View,
+      {
+        style: [defaultStyles4.container, styles2?.container, this.props.style],
+        children: [
+          actions.map(this.renderAction),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_react_native5.TouchableWithoutFeedback, { onPress: this.toggleMenu, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            import_react_native5.Animated.View,
+            {
+              style: [defaultStyles4.button, styles2?.mainButton, rotation],
+              children: renderIcon?.({
+                name: "plus",
+                size: 26,
+                color: "#FFF"
+              })
+            }
+          ) })
+        ]
+      }
+    );
+  }
+};
+var defaultStyles4 = import_react_native5.StyleSheet.create({
+  container: {
+    position: "absolute",
+    bottom: 110,
+    right: 20,
+    alignItems: "center"
+  },
+  button: {
+    width: 60,
+    height: 60,
+    borderRadius: 30,
+    backgroundColor: "#F02A4B",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  secondary: {
+    position: "absolute",
+    width: 48,
+    height: 48,
+    borderRadius: 24,
+    backgroundColor: "#F02A4B",
+    alignItems: "center",
+    justifyContent: "center"
+  }
+});
+
 // src/utils/groupOptions.ts
 var groupOptions = (options, config) => {
   return Object.entries(config).map(([label, values]) => ({
@@ -573,6 +727,7 @@ var groupOptions = (options, config) => {
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  FloatingButton,
   MultiPickerGroup,
   MultiPickerItem,
   MultiPickerModal,

package/dist/index.mjs

@@ -553,6 +553,154 @@ var defaultStyles3 = StyleSheet4.create({
   }
 });
 
+// src/core/FloatingButton.tsx
+import React4 from "react";
+import {
+  Animated as Animated2,
+  StyleSheet as StyleSheet5,
+  TouchableWithoutFeedback,
+  View as View5
+} from "react-native";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+var FloatingButton = class extends React4.Component {
+  animation = new Animated2.Value(0);
+  open = false;
+  toggleMenu = () => {
+    Animated2.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) => {
+    const {
+      mode = "vertical",
+      radius = 100,
+      actions,
+      renderIcon,
+      styles: styles2
+    } = this.props;
+    let translateX = 0;
+    let translateY = 0;
+    if (mode === "vertical") {
+      translateY = -60 * (index + 1);
+    }
+    if (mode === "horizontal") {
+      translateX = -60 * (index + 1);
+    }
+    if (mode === "circle") {
+      const angle = index / actions.length * Math.PI;
+      translateX = radius * Math.cos(angle);
+      translateY = -radius * 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.1, 1]
+          })
+        }
+      ],
+      opacity: this.animation
+    };
+    return /* @__PURE__ */ jsx5(
+      TouchableWithoutFeedback,
+      {
+        onPress: () => {
+          this.toggleMenu();
+          action.onPress();
+        },
+        children: /* @__PURE__ */ jsx5(
+          Animated2.View,
+          {
+            style: [defaultStyles4.secondary, styles2?.secondaryButton, animStyle],
+            children: renderIcon?.({
+              name: action.icon,
+              size: 20,
+              color: "#FFF"
+            })
+          }
+        )
+      },
+      index
+    );
+  };
+  render() {
+    const { actions, renderIcon, styles: styles2, style } = this.props;
+    const rotation = {
+      transform: [
+        {
+          rotate: this.animation.interpolate({
+            inputRange: [0, 1],
+            outputRange: ["0deg", "45deg"]
+          })
+        }
+      ]
+    };
+    return /* @__PURE__ */ jsxs5(
+      View5,
+      {
+        style: [defaultStyles4.container, styles2?.container, this.props.style],
+        children: [
+          actions.map(this.renderAction),
+          /* @__PURE__ */ jsx5(TouchableWithoutFeedback, { onPress: this.toggleMenu, children: /* @__PURE__ */ jsx5(
+            Animated2.View,
+            {
+              style: [defaultStyles4.button, styles2?.mainButton, rotation],
+              children: renderIcon?.({
+                name: "plus",
+                size: 26,
+                color: "#FFF"
+              })
+            }
+          ) })
+        ]
+      }
+    );
+  }
+};
+var defaultStyles4 = StyleSheet5.create({
+  container: {
+    position: "absolute",
+    bottom: 110,
+    right: 20,
+    alignItems: "center"
+  },
+  button: {
+    width: 60,
+    height: 60,
+    borderRadius: 30,
+    backgroundColor: "#F02A4B",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  secondary: {
+    position: "absolute",
+    width: 48,
+    height: 48,
+    borderRadius: 24,
+    backgroundColor: "#F02A4B",
+    alignItems: "center",
+    justifyContent: "center"
+  }
+});
+
 // src/utils/groupOptions.ts
 var groupOptions = (options, config) => {
   return Object.entries(config).map(([label, values]) => ({
@@ -561,6 +709,7 @@ var groupOptions = (options, config) => {
   })).filter((g) => g.data.length > 0);
 };
 export {
+  FloatingButton,
   MultiPickerGroup,
   MultiPickerItem,
   MultiPickerModal,

package/package.json

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