@kaushverse/pickify 1.0.9 → 1.0.11

package/dist/index.d.mts

@@ -3,9 +3,9 @@ import React$1 from 'react';
 import { TextStyle, ViewStyle } from 'react-native';
 
 type IconRenderer = (props: {
-    name: string;
-    size: number;
-    color: string;
+    name?: string;
+    size?: number;
+    color?: string;
 }) => React.ReactNode;
 
 type Option = {
@@ -107,8 +107,9 @@ type MultiPickerProps = {
     onChange: (val: string[]) => void;
     label?: string;
     placeholder?: string;
-    error?: TextStyle;
+    error?: string;
     renderInputIcon?: IconRenderer;
+    renderGroupIcon?: IconRenderer;
     styles?: {
         container?: ViewStyle;
         selectBox?: ViewStyle;
@@ -117,9 +118,7 @@ type MultiPickerProps = {
     errorStyle?: TextStyle;
 };
 
-declare function MultiPickerModal({ visible, setVisible, selectedValues, options, groups, onChange, label, placeholder, error, renderInputIcon, errorStyle, }: MultiPickerProps & {
-    error: string;
-}): react_jsx_runtime.JSX.Element;
+declare function MultiPickerModal({ visible, setVisible, selectedValues, options, groups, onChange, label, placeholder, error, renderInputIcon, renderGroupIcon, errorStyle, }: MultiPickerProps): react_jsx_runtime.JSX.Element;
 
 declare function MultiPickerItem({ label, selected, onPress, renderIcon, styles: customStyles, }: MultiPickerItemProps): react_jsx_runtime.JSX.Element;
 

package/dist/index.d.ts

@@ -3,9 +3,9 @@ import React$1 from 'react';
 import { TextStyle, ViewStyle } from 'react-native';
 
 type IconRenderer = (props: {
-    name: string;
-    size: number;
-    color: string;
+    name?: string;
+    size?: number;
+    color?: string;
 }) => React.ReactNode;
 
 type Option = {
@@ -107,8 +107,9 @@ type MultiPickerProps = {
     onChange: (val: string[]) => void;
     label?: string;
     placeholder?: string;
-    error?: TextStyle;
+    error?: string;
     renderInputIcon?: IconRenderer;
+    renderGroupIcon?: IconRenderer;
     styles?: {
         container?: ViewStyle;
         selectBox?: ViewStyle;
@@ -117,9 +118,7 @@ type MultiPickerProps = {
     errorStyle?: TextStyle;
 };
 
-declare function MultiPickerModal({ visible, setVisible, selectedValues, options, groups, onChange, label, placeholder, error, renderInputIcon, errorStyle, }: MultiPickerProps & {
-    error: string;
-}): react_jsx_runtime.JSX.Element;
+declare function MultiPickerModal({ visible, setVisible, selectedValues, options, groups, onChange, label, placeholder, error, renderInputIcon, renderGroupIcon, errorStyle, }: MultiPickerProps): react_jsx_runtime.JSX.Element;
 
 declare function MultiPickerItem({ label, selected, onPress, renderIcon, styles: customStyles, }: MultiPickerItemProps): react_jsx_runtime.JSX.Element;
 

package/dist/index.js

@@ -274,22 +274,35 @@ var toggleValue = (arr, value) => {
 var import_react2 = require("react");
 var import_react_native2 = require("react-native");
 var import_jsx_runtime2 = require("react/jsx-runtime");
+if (import_react_native2.Platform.OS === "android") {
+  import_react_native2.UIManager.setLayoutAnimationEnabledExperimental?.(true);
+}
 function MultiPickerGroup({
   label,
   children,
   renderGroupIcon
 }) {
   const [open, setOpen] = (0, import_react2.useState)(true);
+  const toggle = () => {
+    import_react_native2.LayoutAnimation.configureNext(
+      import_react_native2.LayoutAnimation.create(
+        250,
+        import_react_native2.LayoutAnimation.Types.easeInEaseOut,
+        import_react_native2.LayoutAnimation.Properties.opacity
+      )
+    );
+    setOpen((prev) => !prev);
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native2.View, { style: styles.group, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native2.TouchableOpacity, { style: styles.header, onPress: () => setOpen(!open), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native2.TouchableOpacity, { style: styles.header, onPress: toggle, children: [
       /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.Text, { style: styles.title, children: label }),
-      renderGroupIcon ? renderGroupIcon({
+      renderGroupIcon?.({
         name: open ? "chevron-up" : "chevron-down",
         size: 18,
         color: "#6B7280"
-      }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.Text, { style: styles.fallback, children: open ? "\u2303" : "\u2304" })
+      })
     ] }),
-    open && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.View, { style: { marginTop: 6 }, children })
+    open && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.View, { style: styles.content, children })
   ] });
 }
 var styles = import_react_native2.StyleSheet.create({
@@ -305,9 +318,8 @@ var styles = import_react_native2.StyleSheet.create({
     fontWeight: "600",
     fontSize: 14
   },
-  fallback: {
-    fontSize: 16,
-    color: "#6B7280"
+  content: {
+    marginTop: 6
   }
 });
 
@@ -392,6 +404,7 @@ function MultiPickerModal({
   placeholder = "Select",
   error,
   renderInputIcon,
+  renderGroupIcon,
   errorStyle
 }) {
   const [internalVisible, setInternalVisible] = (0, import_react3.useState)(false);
@@ -416,15 +429,23 @@ function MultiPickerModal({
   };
   const renderList = () => {
     if (groups.length > 0) {
-      return groups.map((group) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(MultiPickerGroup, { label: group.label, children: group.data.map((item) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-        MultiPickerItem,
+      return groups.map((group) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        MultiPickerGroup,
         {
-          label: item.label,
-          selected: selectedValues.includes(item.value),
-          onPress: () => handleSelect(item.value)
+          label: group.label,
+          renderGroupIcon,
+          children: group.data.map((item) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            MultiPickerItem,
+            {
+              label: item.label,
+              selected: selectedValues.includes(item.value),
+              onPress: () => handleSelect(item.value)
+            },
+            item.value
+          ))
         },
-        item.value
-      )) }, group.label));
+        group.label
+      ));
     }
     return options.map((item) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       MultiPickerItem,
@@ -440,15 +461,15 @@ function MultiPickerModal({
     label && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.Text, { style: styles2.label, children: label }),
     /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native4.TouchableOpacity, { style: styles2.box, onPress: open, children: [
       /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.Text, { style: styles2.text, children: getLabel() }),
-      renderInputIcon ? renderInputIcon({
+      renderInputIcon?.({
         name: "chevron-down",
         size: 18,
         color: "#6B7280"
-      }) : null
+      })
     ] }),
-    error && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.Text, { style: [styles2.error, styles2?.error, errorStyle], children: error }),
+    error && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.Text, { style: [styles2.error, errorStyle], children: error }),
     /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.Modal, { visible: isVisible, transparent: true, animationType: "slide", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.View, { style: styles2.overlay, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native4.View, { style: styles2.container, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.TouchableOpacity, { onPress: close, style: styles2.done, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.Text, { style: { color: "#fff" }, children: "Done" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.TouchableOpacity, { onPress: close, style: styles2.done, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.Text, { style: styles2.doneText, children: "Done" }) }),
       /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.ScrollView, { children: renderList() })
     ] }) }) })
   ] });
@@ -464,7 +485,8 @@ var styles2 = import_react_native4.StyleSheet.create({
     borderRadius: 12,
     padding: 12,
     flexDirection: "row",
-    justifyContent: "space-between"
+    justifyContent: "space-between",
+    alignItems: "center"
   },
   text: {
     fontSize: 15
@@ -488,10 +510,15 @@ var styles2 = import_react_native4.StyleSheet.create({
   },
   done: {
     backgroundColor: "#6366f1",
-    padding: 10,
+    paddingVertical: 10,
+    paddingHorizontal: 14,
     borderRadius: 10,
     alignSelf: "flex-end",
     marginBottom: 10
+  },
+  doneText: {
+    color: "#fff",
+    fontWeight: "600"
   }
 });
 

package/dist/index.mjs

@@ -255,24 +255,45 @@ var toggleValue = (arr, value) => {
 
 // src/components/MultiPickerGroup.tsx
 import { useState as useState2 } from "react";
-import { View as View2, Text as Text2, TouchableOpacity as TouchableOpacity2, StyleSheet as StyleSheet2 } from "react-native";
+import {
+  View as View2,
+  Text as Text2,
+  TouchableOpacity as TouchableOpacity2,
+  StyleSheet as StyleSheet2,
+  LayoutAnimation,
+  Platform,
+  UIManager
+} from "react-native";
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+if (Platform.OS === "android") {
+  UIManager.setLayoutAnimationEnabledExperimental?.(true);
+}
 function MultiPickerGroup({
   label,
   children,
   renderGroupIcon
 }) {
   const [open, setOpen] = useState2(true);
+  const toggle = () => {
+    LayoutAnimation.configureNext(
+      LayoutAnimation.create(
+        250,
+        LayoutAnimation.Types.easeInEaseOut,
+        LayoutAnimation.Properties.opacity
+      )
+    );
+    setOpen((prev) => !prev);
+  };
   return /* @__PURE__ */ jsxs2(View2, { style: styles.group, children: [
-    /* @__PURE__ */ jsxs2(TouchableOpacity2, { style: styles.header, onPress: () => setOpen(!open), children: [
+    /* @__PURE__ */ jsxs2(TouchableOpacity2, { style: styles.header, onPress: toggle, children: [
       /* @__PURE__ */ jsx2(Text2, { style: styles.title, children: label }),
-      renderGroupIcon ? renderGroupIcon({
+      renderGroupIcon?.({
         name: open ? "chevron-up" : "chevron-down",
         size: 18,
         color: "#6B7280"
-      }) : /* @__PURE__ */ jsx2(Text2, { style: styles.fallback, children: open ? "\u2303" : "\u2304" })
+      })
     ] }),
-    open && /* @__PURE__ */ jsx2(View2, { style: { marginTop: 6 }, children })
+    open && /* @__PURE__ */ jsx2(View2, { style: styles.content, children })
   ] });
 }
 var styles = StyleSheet2.create({
@@ -288,9 +309,8 @@ var styles = StyleSheet2.create({
     fontWeight: "600",
     fontSize: 14
   },
-  fallback: {
-    fontSize: 16,
-    color: "#6B7280"
+  content: {
+    marginTop: 6
   }
 });
 
@@ -375,6 +395,7 @@ function MultiPickerModal({
   placeholder = "Select",
   error,
   renderInputIcon,
+  renderGroupIcon,
   errorStyle
 }) {
   const [internalVisible, setInternalVisible] = useState3(false);
@@ -399,15 +420,23 @@ function MultiPickerModal({
   };
   const renderList = () => {
     if (groups.length > 0) {
-      return groups.map((group) => /* @__PURE__ */ jsx4(MultiPickerGroup, { label: group.label, children: group.data.map((item) => /* @__PURE__ */ jsx4(
-        MultiPickerItem,
+      return groups.map((group) => /* @__PURE__ */ jsx4(
+        MultiPickerGroup,
         {
-          label: item.label,
-          selected: selectedValues.includes(item.value),
-          onPress: () => handleSelect(item.value)
+          label: group.label,
+          renderGroupIcon,
+          children: group.data.map((item) => /* @__PURE__ */ jsx4(
+            MultiPickerItem,
+            {
+              label: item.label,
+              selected: selectedValues.includes(item.value),
+              onPress: () => handleSelect(item.value)
+            },
+            item.value
+          ))
         },
-        item.value
-      )) }, group.label));
+        group.label
+      ));
     }
     return options.map((item) => /* @__PURE__ */ jsx4(
       MultiPickerItem,
@@ -423,15 +452,15 @@ function MultiPickerModal({
     label && /* @__PURE__ */ jsx4(Text4, { style: styles2.label, children: label }),
     /* @__PURE__ */ jsxs4(TouchableOpacity4, { style: styles2.box, onPress: open, children: [
       /* @__PURE__ */ jsx4(Text4, { style: styles2.text, children: getLabel() }),
-      renderInputIcon ? renderInputIcon({
+      renderInputIcon?.({
         name: "chevron-down",
         size: 18,
         color: "#6B7280"
-      }) : null
+      })
     ] }),
-    error && /* @__PURE__ */ jsx4(Text4, { style: [styles2.error, styles2?.error, errorStyle], children: error }),
+    error && /* @__PURE__ */ jsx4(Text4, { style: [styles2.error, errorStyle], children: error }),
     /* @__PURE__ */ jsx4(Modal2, { visible: isVisible, transparent: true, animationType: "slide", children: /* @__PURE__ */ jsx4(View4, { style: styles2.overlay, children: /* @__PURE__ */ jsxs4(View4, { style: styles2.container, children: [
-      /* @__PURE__ */ jsx4(TouchableOpacity4, { onPress: close, style: styles2.done, children: /* @__PURE__ */ jsx4(Text4, { style: { color: "#fff" }, children: "Done" }) }),
+      /* @__PURE__ */ jsx4(TouchableOpacity4, { onPress: close, style: styles2.done, children: /* @__PURE__ */ jsx4(Text4, { style: styles2.doneText, children: "Done" }) }),
       /* @__PURE__ */ jsx4(ScrollView2, { children: renderList() })
     ] }) }) })
   ] });
@@ -447,7 +476,8 @@ var styles2 = StyleSheet4.create({
     borderRadius: 12,
     padding: 12,
     flexDirection: "row",
-    justifyContent: "space-between"
+    justifyContent: "space-between",
+    alignItems: "center"
   },
   text: {
     fontSize: 15
@@ -471,10 +501,15 @@ var styles2 = StyleSheet4.create({
   },
   done: {
     backgroundColor: "#6366f1",
-    padding: 10,
+    paddingVertical: 10,
+    paddingHorizontal: 14,
     borderRadius: 10,
     alignSelf: "flex-end",
     marginBottom: 10
+  },
+  doneText: {
+    color: "#fff",
+    fontWeight: "600"
   }
 });
 

package/package.json

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