@kaushverse/pickify 1.2.6 → 1.2.8

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,13 @@ 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,
+  AnimatedSearchBar: () => AnimatedSearchBar,
+  FloatingButton: () => FloatingButton_default,
   MultiPickerGroup: () => MultiPickerGroup,
   MultiPickerItem: () => MultiPickerItem,
   MultiPickerModal: () => MultiPickerModal,
@@ -50,7 +41,7 @@ function PickerModal({
   selectedValue,
   options,
   groups = [],
-  styles: styles2,
+  styles: styles3,
   theme,
   renderTab,
   renderItem,
@@ -108,7 +99,7 @@ function PickerModal({
       style: [
         defaultStyles.container,
         { backgroundColor: bg },
-        styles2?.container
+        styles3?.container
       ],
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -117,10 +108,10 @@ function PickerModal({
             style: [
               defaultStyles.doneBtn,
               { backgroundColor: primary },
-              styles2?.doneBtn
+              styles3?.doneBtn
             ],
             onPress: handleClose,
-            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Text, { style: [defaultStyles.doneText, styles2?.doneText], children: "Done" })
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Text, { style: [defaultStyles.doneText, styles3?.doneText], children: "Done" })
           }
         ),
         hasGroups && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, children: groups.map((tab, index) => {
@@ -133,7 +124,7 @@ function PickerModal({
             {
               style: [
                 defaultStyles.tab,
-                styles2?.tab,
+                styles3?.tab,
                 isActive && { backgroundColor: primary }
               ],
               onPress: () => setActiveTab(index),
@@ -143,7 +134,7 @@ function PickerModal({
                   style: [
                     defaultStyles.tabText,
                     { color: isActive ? "#fff" : text },
-                    styles2?.tabText
+                    styles3?.tabText
                   ],
                   children: tab.label
                 }
@@ -174,14 +165,14 @@ function PickerModal({
     }
   );
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_native.View, { style: styles2?.inputContainer, children: [
-      label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Text, { style: [defaultStyles.label, styles2?.label, labelStyle], children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_native.View, { style: styles3?.inputContainer, children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Text, { style: [defaultStyles.label, styles3?.label, labelStyle], children: label }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
         import_react_native.TouchableOpacity,
         {
           style: [
             defaultStyles.selectBox,
-            styles2?.selectBox,
+            styles3?.selectBox,
             selectBoxStyle,
             error && { borderColor: "red" }
           ],
@@ -192,7 +183,7 @@ function PickerModal({
               {
                 style: [
                   defaultStyles.selectText,
-                  styles2?.selectText,
+                  styles3?.selectText,
                   selectTextStyle
                 ],
                 children: getLabel() || placeholder
@@ -206,7 +197,7 @@ function PickerModal({
           ]
         }
       ),
-      error && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Text, { style: [defaultStyles.error, styles2?.error, errorStyle], children: error })
+      error && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Text, { style: [defaultStyles.error, styles3?.error, errorStyle], children: error })
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Modal, { visible: isVisible, transparent: true, animationType: "slide", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.View, { style: defaultStyles.modalOverlay, children: renderContainer ? renderContainer(content) : content }) })
   ] });
@@ -493,7 +484,7 @@ function MultiPickerModal({
   renderInputIcon,
   renderGroupIcon,
   renderItemIcon,
-  styles: styles2
+  styles: styles3
 }) {
   const [internalVisible, setInternalVisible] = (0, import_react3.useState)(false);
   const [modalKey, setModalKey] = (0, import_react3.useState)(0);
@@ -554,7 +545,7 @@ function MultiPickerModal({
               selected: selectedValues.includes(item.value),
               onPress: () => handleSelect(item.value),
               renderItemIcon,
-              styles: styles2?.item
+              styles: styles3?.item
             },
             item.value
           ))
@@ -569,7 +560,7 @@ function MultiPickerModal({
         selected: selectedValues.includes(item.value),
         onPress: () => handleSelect(item.value),
         renderItemIcon,
-        styles: styles2?.item
+        styles: styles3?.item
       },
       item.value
     ));
@@ -585,11 +576,11 @@ function MultiPickerModal({
     ]
   };
   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 }),
+    label && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.Text, { style: [defaultStyles3.label, styles3?.label], children: label }),
     /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
       import_react_native4.TouchableOpacity,
       {
-        style: [defaultStyles3.box, styles2?.selectBox],
+        style: [defaultStyles3.box, styles3?.selectBox],
         onPress: open,
         activeOpacity: 0.7,
         children: [
@@ -598,7 +589,7 @@ function MultiPickerModal({
             {
               style: [
                 defaultStyles3.text,
-                styles2?.selectText,
+                styles3?.selectText,
                 !selectedValues?.length && defaultStyles3.placeholder
               ],
               numberOfLines: 1,
@@ -613,7 +604,7 @@ function MultiPickerModal({
         ]
       }
     ),
-    error && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.Text, { style: [defaultStyles3.error, styles2?.error], children: error }),
+    error && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.Text, { style: [defaultStyles3.error, styles3?.error], children: error }),
     /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       import_react_native4.Modal,
       {
@@ -621,12 +612,12 @@ function MultiPickerModal({
         transparent: true,
         animationType: "none",
         onRequestClose: close,
-        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.View, { style: [defaultStyles3.overlay, styles2?.overlay], children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.View, { style: [defaultStyles3.overlay, styles3?.overlay], children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
           import_react_native4.Animated.View,
           {
             style: [
               defaultStyles3.container,
-              styles2?.container,
+              styles3?.container,
               modalAnimatedStyle
             ],
             children: [
@@ -634,9 +625,9 @@ function MultiPickerModal({
                 import_react_native4.TouchableOpacity,
                 {
                   onPress: close,
-                  style: [defaultStyles3.done, styles2?.doneBtn],
+                  style: [defaultStyles3.done, styles3?.doneBtn],
                   activeOpacity: 0.7,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.Text, { style: [defaultStyles3.doneText, styles2?.doneText], children: "Done" })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.Text, { style: [defaultStyles3.doneText, styles3?.doneText], children: "Done" })
                 }
               ),
               /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
@@ -718,107 +709,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 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: [
-        {
-          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"]
           })
@@ -828,42 +843,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"
           }) })
@@ -871,7 +885,7 @@ var FloatingButton = class extends import_react4.default.Component {
       ) })
     ] });
   }
-};
+);
 var defaultStyles4 = import_react_native5.StyleSheet.create({
   container: {
     position: "absolute",
@@ -888,10 +902,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
@@ -922,15 +933,129 @@ 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/core/AnimatedSearchBar.tsx
+var import_react5 = require("react");
+var import_react_native6 = require("react-native");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function AnimatedSearchBar({
+  data,
+  onSearch,
+  renderLeftIcon,
+  renderRightIcons
+}) {
+  const [index, setIndex] = (0, import_react5.useState)(0);
+  const translateY = (0, import_react5.useRef)(new import_react_native6.Animated.Value(20)).current;
+  const opacity = (0, import_react5.useRef)(new import_react_native6.Animated.Value(0)).current;
+  const animate = () => {
+    translateY.setValue(20);
+    opacity.setValue(0);
+    import_react_native6.Animated.sequence([
+      import_react_native6.Animated.parallel([
+        import_react_native6.Animated.timing(translateY, {
+          toValue: 0,
+          duration: 400,
+          useNativeDriver: true
+        }),
+        import_react_native6.Animated.timing(opacity, {
+          toValue: 1,
+          duration: 400,
+          useNativeDriver: true
+        })
+      ]),
+      import_react_native6.Animated.delay(1200),
+      import_react_native6.Animated.parallel([
+        import_react_native6.Animated.timing(translateY, {
+          toValue: -20,
+          duration: 400,
+          useNativeDriver: true
+        }),
+        import_react_native6.Animated.timing(opacity, {
+          toValue: 0,
+          duration: 400,
+          useNativeDriver: true
+        })
+      ])
+    ]).start(() => {
+      setIndex((prev) => (prev + 1) % data.length);
+    });
+  };
+  (0, import_react5.useEffect)(() => {
+    if (data.length) animate();
+  }, [index]);
+  const current = data[index];
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react_native6.View, { style: styles2.container, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native6.View, { style: styles2.left, children: renderLeftIcon() }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_react_native6.View, { style: styles2.inputContainer, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        import_react_native6.TextInput,
+        {
+          style: styles2.input,
+          placeholder: "",
+          onChangeText: onSearch
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+        import_react_native6.Animated.Text,
+        {
+          style: [
+            styles2.placeholder,
+            {
+              transform: [{ translateY }],
+              opacity
+            }
+          ],
+          children: [
+            "Search for",
+            " ",
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native6.Animated.Text, { style: { color: current?.color || "#999" }, children: current?.text })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_react_native6.View, { style: styles2.right, children: renderRightIcons?.() })
+  ] });
+}
+var styles2 = import_react_native6.StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    backgroundColor: "#111",
+    borderRadius: 12,
+    paddingHorizontal: 10,
+    height: 50
+  },
+  left: {
+    paddingRight: 8,
+    borderRightWidth: 1,
+    borderColor: "#333"
+  },
+  inputContainer: {
+    flex: 1,
+    justifyContent: "center",
+    paddingHorizontal: 10
+  },
+  input: {
+    color: "#fff",
+    height: "100%"
+  },
+  placeholder: {
+    position: "absolute",
+    color: "#888",
+    fontSize: 14
+  },
+  right: {
+    flexDirection: "row",
+    gap: 10
+  }
+});
 
 // src/utils/groupOptions.ts
 var groupOptions = (options, config) => {
@@ -941,6 +1066,7 @@ var groupOptions = (options, config) => {
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  AnimatedSearchBar,
   FloatingButton,
   MultiPickerGroup,
   MultiPickerItem,