@kaushverse/pickify 1.2.7 → 1.2.8

package/dist/index.d.mts

@@ -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;
@@ -178,6 +178,18 @@ type FloatingButtonRef = {
 };
 declare const FloatingButton: React$1.ForwardRefExoticComponent<FloatingButtonProps & React$1.RefAttributes<FloatingButtonRef>>;
 
+type SearchItem = {
+    text: string;
+    color?: string;
+};
+type Props = {
+    data: SearchItem[];
+    onSearch?: (text: string) => void;
+    renderLeftIcon: () => React$1.ReactNode;
+    renderRightIcons?: () => React$1.ReactNode;
+};
+declare function AnimatedSearchBar({ data, onSearch, renderLeftIcon, renderRightIcons, }: Props): 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, defaultOpen, }: MultiPickerGroupProps): react_jsx_runtime.JSX.Element;
@@ -186,4 +198,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, type Theme, groupOptions, toggleValue };
+export { AnimatedSearchBar, 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

@@ -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;
@@ -178,6 +178,18 @@ type FloatingButtonRef = {
 };
 declare const FloatingButton: React$1.ForwardRefExoticComponent<FloatingButtonProps & React$1.RefAttributes<FloatingButtonRef>>;
 
+type SearchItem = {
+    text: string;
+    color?: string;
+};
+type Props = {
+    data: SearchItem[];
+    onSearch?: (text: string) => void;
+    renderLeftIcon: () => React$1.ReactNode;
+    renderRightIcons?: () => React$1.ReactNode;
+};
+declare function AnimatedSearchBar({ data, onSearch, renderLeftIcon, renderRightIcons, }: Props): 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, defaultOpen, }: MultiPickerGroupProps): react_jsx_runtime.JSX.Element;
@@ -186,4 +198,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, type Theme, groupOptions, toggleValue };
+export { AnimatedSearchBar, 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

@@ -20,6 +20,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  AnimatedSearchBar: () => AnimatedSearchBar,
   FloatingButton: () => FloatingButton_default,
   MultiPickerGroup: () => MultiPickerGroup,
   MultiPickerItem: () => MultiPickerItem,
@@ -40,7 +41,7 @@ function PickerModal({
   selectedValue,
   options,
   groups = [],
-  styles: styles2,
+  styles: styles3,
   theme,
   renderTab,
   renderItem,
@@ -98,7 +99,7 @@ function PickerModal({
       style: [
         defaultStyles.container,
         { backgroundColor: bg },
-        styles2?.container
+        styles3?.container
       ],
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -107,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) => {
@@ -123,7 +124,7 @@ function PickerModal({
             {
               style: [
                 defaultStyles.tab,
-                styles2?.tab,
+                styles3?.tab,
                 isActive && { backgroundColor: primary }
               ],
               onPress: () => setActiveTab(index),
@@ -133,7 +134,7 @@ function PickerModal({
                   style: [
                     defaultStyles.tabText,
                     { color: isActive ? "#fff" : text },
-                    styles2?.tabText
+                    styles3?.tabText
                   ],
                   children: tab.label
                 }
@@ -164,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" }
           ],
@@ -182,7 +183,7 @@ function PickerModal({
               {
                 style: [
                   defaultStyles.selectText,
-                  styles2?.selectText,
+                  styles3?.selectText,
                   selectTextStyle
                 ],
                 children: getLabel() || placeholder
@@ -196,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 }) })
   ] });
@@ -483,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);
@@ -544,7 +545,7 @@ function MultiPickerModal({
               selected: selectedValues.includes(item.value),
               onPress: () => handleSelect(item.value),
               renderItemIcon,
-              styles: styles2?.item
+              styles: styles3?.item
             },
             item.value
           ))
@@ -559,7 +560,7 @@ function MultiPickerModal({
         selected: selectedValues.includes(item.value),
         onPress: () => handleSelect(item.value),
         renderItemIcon,
-        styles: styles2?.item
+        styles: styles3?.item
       },
       item.value
     ));
@@ -575,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: [
@@ -588,7 +589,7 @@ function MultiPickerModal({
             {
               style: [
                 defaultStyles3.text,
-                styles2?.selectText,
+                styles3?.selectText,
                 !selectedValues?.length && defaultStyles3.placeholder
               ],
               numberOfLines: 1,
@@ -603,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,
       {
@@ -611,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: [
@@ -624,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)(
@@ -940,6 +941,122 @@ var defaultStyles4 = import_react_native5.StyleSheet.create({
 });
 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) => {
   return Object.entries(config).map(([label, values]) => ({
@@ -949,6 +1066,7 @@ var groupOptions = (options, config) => {
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  AnimatedSearchBar,
   FloatingButton,
   MultiPickerGroup,
   MultiPickerItem,

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(
@@ -940,6 +940,127 @@ var defaultStyles4 = StyleSheet5.create({
 });
 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) => {
   return Object.entries(config).map(([label, values]) => ({
@@ -948,6 +1069,7 @@ var groupOptions = (options, config) => {
   })).filter((g) => g.data.length > 0);
 };
 export {
+  AnimatedSearchBar,
   FloatingButton_default as FloatingButton,
   MultiPickerGroup,
   MultiPickerItem,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaushverse/pickify",
-  "version": "1.2.7",
+  "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",