@kaushverse/pickify 1.2.6 → 1.2.8

package/dist/index.mjs

@@ -15,7 +15,7 @@ function PickerModal({
   selectedValue,
   options,
   groups = [],
-  styles: styles2,
+  styles: styles3,
   theme,
   renderTab,
   renderItem,
@@ -73,7 +73,7 @@ function PickerModal({
       style: [
         defaultStyles.container,
         { backgroundColor: bg },
-        styles2?.container
+        styles3?.container
       ],
       children: [
         /* @__PURE__ */ jsx(
@@ -82,10 +82,10 @@ function PickerModal({
             style: [
               defaultStyles.doneBtn,
               { backgroundColor: primary },
-              styles2?.doneBtn
+              styles3?.doneBtn
             ],
             onPress: handleClose,
-            children: /* @__PURE__ */ jsx(Text, { style: [defaultStyles.doneText, styles2?.doneText], children: "Done" })
+            children: /* @__PURE__ */ jsx(Text, { style: [defaultStyles.doneText, styles3?.doneText], children: "Done" })
           }
         ),
         hasGroups && /* @__PURE__ */ jsx(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, children: groups.map((tab, index) => {
@@ -98,7 +98,7 @@ function PickerModal({
             {
               style: [
                 defaultStyles.tab,
-                styles2?.tab,
+                styles3?.tab,
                 isActive && { backgroundColor: primary }
               ],
               onPress: () => setActiveTab(index),
@@ -108,7 +108,7 @@ function PickerModal({
                   style: [
                     defaultStyles.tabText,
                     { color: isActive ? "#fff" : text },
-                    styles2?.tabText
+                    styles3?.tabText
                   ],
                   children: tab.label
                 }
@@ -139,14 +139,14 @@ function PickerModal({
     }
   );
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsxs(View, { style: styles2?.inputContainer, children: [
-      label && /* @__PURE__ */ jsx(Text, { style: [defaultStyles.label, styles2?.label, labelStyle], children: label }),
+    /* @__PURE__ */ jsxs(View, { style: styles3?.inputContainer, children: [
+      label && /* @__PURE__ */ jsx(Text, { style: [defaultStyles.label, styles3?.label, labelStyle], children: label }),
       /* @__PURE__ */ jsxs(
         TouchableOpacity,
         {
           style: [
             defaultStyles.selectBox,
-            styles2?.selectBox,
+            styles3?.selectBox,
             selectBoxStyle,
             error && { borderColor: "red" }
           ],
@@ -157,7 +157,7 @@ function PickerModal({
               {
                 style: [
                   defaultStyles.selectText,
-                  styles2?.selectText,
+                  styles3?.selectText,
                   selectTextStyle
                 ],
                 children: getLabel() || placeholder
@@ -171,7 +171,7 @@ function PickerModal({
           ]
         }
       ),
-      error && /* @__PURE__ */ jsx(Text, { style: [defaultStyles.error, styles2?.error, errorStyle], children: error })
+      error && /* @__PURE__ */ jsx(Text, { style: [defaultStyles.error, styles3?.error, errorStyle], children: error })
     ] }),
     /* @__PURE__ */ jsx(Modal, { visible: isVisible, transparent: true, animationType: "slide", children: /* @__PURE__ */ jsx(View, { style: defaultStyles.modalOverlay, children: renderContainer ? renderContainer(content) : content }) })
   ] });
@@ -472,7 +472,7 @@ function MultiPickerModal({
   renderInputIcon,
   renderGroupIcon,
   renderItemIcon,
-  styles: styles2
+  styles: styles3
 }) {
   const [internalVisible, setInternalVisible] = useState3(false);
   const [modalKey, setModalKey] = useState3(0);
@@ -533,7 +533,7 @@ function MultiPickerModal({
               selected: selectedValues.includes(item.value),
               onPress: () => handleSelect(item.value),
               renderItemIcon,
-              styles: styles2?.item
+              styles: styles3?.item
             },
             item.value
           ))
@@ -548,7 +548,7 @@ function MultiPickerModal({
         selected: selectedValues.includes(item.value),
         onPress: () => handleSelect(item.value),
         renderItemIcon,
-        styles: styles2?.item
+        styles: styles3?.item
       },
       item.value
     ));
@@ -564,11 +564,11 @@ function MultiPickerModal({
     ]
   };
   return /* @__PURE__ */ jsxs4(Fragment2, { children: [
-    label && /* @__PURE__ */ jsx4(Text4, { style: [defaultStyles3.label, styles2?.label], children: label }),
+    label && /* @__PURE__ */ jsx4(Text4, { style: [defaultStyles3.label, styles3?.label], children: label }),
     /* @__PURE__ */ jsxs4(
       TouchableOpacity4,
       {
-        style: [defaultStyles3.box, styles2?.selectBox],
+        style: [defaultStyles3.box, styles3?.selectBox],
         onPress: open,
         activeOpacity: 0.7,
         children: [
@@ -577,7 +577,7 @@ function MultiPickerModal({
             {
               style: [
                 defaultStyles3.text,
-                styles2?.selectText,
+                styles3?.selectText,
                 !selectedValues?.length && defaultStyles3.placeholder
               ],
               numberOfLines: 1,
@@ -592,7 +592,7 @@ function MultiPickerModal({
         ]
       }
     ),
-    error && /* @__PURE__ */ jsx4(Text4, { style: [defaultStyles3.error, styles2?.error], children: error }),
+    error && /* @__PURE__ */ jsx4(Text4, { style: [defaultStyles3.error, styles3?.error], children: error }),
     /* @__PURE__ */ jsx4(
       Modal2,
       {
@@ -600,12 +600,12 @@ function MultiPickerModal({
         transparent: true,
         animationType: "none",
         onRequestClose: close,
-        children: /* @__PURE__ */ jsx4(View4, { style: [defaultStyles3.overlay, styles2?.overlay], children: /* @__PURE__ */ jsxs4(
+        children: /* @__PURE__ */ jsx4(View4, { style: [defaultStyles3.overlay, styles3?.overlay], children: /* @__PURE__ */ jsxs4(
           Animated2.View,
           {
             style: [
               defaultStyles3.container,
-              styles2?.container,
+              styles3?.container,
               modalAnimatedStyle
             ],
             children: [
@@ -613,9 +613,9 @@ function MultiPickerModal({
                 TouchableOpacity4,
                 {
                   onPress: close,
-                  style: [defaultStyles3.done, styles2?.doneBtn],
+                  style: [defaultStyles3.done, styles3?.doneBtn],
                   activeOpacity: 0.7,
-                  children: /* @__PURE__ */ jsx4(Text4, { style: [defaultStyles3.doneText, styles2?.doneText], children: "Done" })
+                  children: /* @__PURE__ */ jsx4(Text4, { style: [defaultStyles3.doneText, styles3?.doneText], children: "Done" })
                 }
               ),
               /* @__PURE__ */ jsx4(
@@ -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,104 +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 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 = 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"]
           })
@@ -812,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"
           }) })
@@ -855,7 +884,7 @@ var FloatingButton = class extends React4.Component {
       ) })
     ] });
   }
-};
+);
 var defaultStyles4 = StyleSheet5.create({
   container: {
     position: "absolute",
@@ -872,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
@@ -906,15 +932,134 @@ 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/core/AnimatedSearchBar.tsx
+import { useEffect as useEffect5, useRef as useRef4, useState as useState5 } from "react";
+import {
+  View as View6,
+  TextInput,
+  Animated as Animated4,
+  StyleSheet as StyleSheet6
+} from "react-native";
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+function AnimatedSearchBar({
+  data,
+  onSearch,
+  renderLeftIcon,
+  renderRightIcons
+}) {
+  const [index, setIndex] = useState5(0);
+  const translateY = useRef4(new Animated4.Value(20)).current;
+  const opacity = useRef4(new Animated4.Value(0)).current;
+  const animate = () => {
+    translateY.setValue(20);
+    opacity.setValue(0);
+    Animated4.sequence([
+      Animated4.parallel([
+        Animated4.timing(translateY, {
+          toValue: 0,
+          duration: 400,
+          useNativeDriver: true
+        }),
+        Animated4.timing(opacity, {
+          toValue: 1,
+          duration: 400,
+          useNativeDriver: true
+        })
+      ]),
+      Animated4.delay(1200),
+      Animated4.parallel([
+        Animated4.timing(translateY, {
+          toValue: -20,
+          duration: 400,
+          useNativeDriver: true
+        }),
+        Animated4.timing(opacity, {
+          toValue: 0,
+          duration: 400,
+          useNativeDriver: true
+        })
+      ])
+    ]).start(() => {
+      setIndex((prev) => (prev + 1) % data.length);
+    });
+  };
+  useEffect5(() => {
+    if (data.length) animate();
+  }, [index]);
+  const current = data[index];
+  return /* @__PURE__ */ jsxs6(View6, { style: styles2.container, children: [
+    /* @__PURE__ */ jsx6(View6, { style: styles2.left, children: renderLeftIcon() }),
+    /* @__PURE__ */ jsxs6(View6, { style: styles2.inputContainer, children: [
+      /* @__PURE__ */ jsx6(
+        TextInput,
+        {
+          style: styles2.input,
+          placeholder: "",
+          onChangeText: onSearch
+        }
+      ),
+      /* @__PURE__ */ jsxs6(
+        Animated4.Text,
+        {
+          style: [
+            styles2.placeholder,
+            {
+              transform: [{ translateY }],
+              opacity
+            }
+          ],
+          children: [
+            "Search for",
+            " ",
+            /* @__PURE__ */ jsx6(Animated4.Text, { style: { color: current?.color || "#999" }, children: current?.text })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx6(View6, { style: styles2.right, children: renderRightIcons?.() })
+  ] });
+}
+var styles2 = StyleSheet6.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) => {
@@ -924,7 +1069,8 @@ var groupOptions = (options, config) => {
   })).filter((g) => g.data.length > 0);
 };
 export {
-  FloatingButton,
+  AnimatedSearchBar,
+  FloatingButton_default as FloatingButton,
   MultiPickerGroup,
   MultiPickerItem,
   MultiPickerModal,

package/package.json

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