@kaushverse/pickify 1.0.8 → 1.0.10

package/dist/index.d.mts

@@ -95,7 +95,7 @@ type MultiPickerGroupStyles = {
 type MultiPickerGroupProps = {
     label: string;
     children: React.ReactNode;
-    renderIcon?: IconRenderer;
+    renderGroupIcon?: IconRenderer;
     styles?: MultiPickerGroupStyles;
 };
 type MultiPickerProps = {
@@ -108,27 +108,21 @@ type MultiPickerProps = {
     label?: string;
     placeholder?: string;
     error?: string;
-    renderIcon?: IconRenderer;
+    renderInputIcon?: IconRenderer;
+    renderGroupIcon?: IconRenderer;
     styles?: {
         container?: ViewStyle;
         selectBox?: ViewStyle;
         selectText?: TextStyle;
     };
+    errorStyle?: TextStyle;
 };
 
-declare function MultiPickerModal({ visible, setVisible, selectedValues, options, groups, onChange, label, placeholder, error, renderIcon, }: MultiPickerProps): 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;
 
-declare function MultiPickerGroup({ label, children, renderIcon, }: {
-    label: string;
-    children: React$1.ReactNode;
-    renderIcon?: (props: {
-        name: string;
-        size: number;
-        color: string;
-    }) => React$1.ReactNode;
-}): react_jsx_runtime.JSX.Element;
+declare function MultiPickerGroup({ label, children, renderGroupIcon, }: MultiPickerGroupProps): react_jsx_runtime.JSX.Element;
 
 declare const toggleValue: (arr: string[], value: string) => string[];
 

package/dist/index.d.ts

@@ -95,7 +95,7 @@ type MultiPickerGroupStyles = {
 type MultiPickerGroupProps = {
     label: string;
     children: React.ReactNode;
-    renderIcon?: IconRenderer;
+    renderGroupIcon?: IconRenderer;
     styles?: MultiPickerGroupStyles;
 };
 type MultiPickerProps = {
@@ -108,27 +108,21 @@ type MultiPickerProps = {
     label?: string;
     placeholder?: string;
     error?: string;
-    renderIcon?: IconRenderer;
+    renderInputIcon?: IconRenderer;
+    renderGroupIcon?: IconRenderer;
     styles?: {
         container?: ViewStyle;
         selectBox?: ViewStyle;
         selectText?: TextStyle;
     };
+    errorStyle?: TextStyle;
 };
 
-declare function MultiPickerModal({ visible, setVisible, selectedValues, options, groups, onChange, label, placeholder, error, renderIcon, }: MultiPickerProps): 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;
 
-declare function MultiPickerGroup({ label, children, renderIcon, }: {
-    label: string;
-    children: React$1.ReactNode;
-    renderIcon?: (props: {
-        name: string;
-        size: number;
-        color: string;
-    }) => React$1.ReactNode;
-}): react_jsx_runtime.JSX.Element;
+declare function MultiPickerGroup({ label, children, renderGroupIcon, }: MultiPickerGroupProps): react_jsx_runtime.JSX.Element;
 
 declare const toggleValue: (arr: string[], value: string) => string[];
 

package/dist/index.js

@@ -277,17 +277,17 @@ var import_jsx_runtime2 = require("react/jsx-runtime");
 function MultiPickerGroup({
   label,
   children,
-  renderIcon
+  renderGroupIcon
 }) {
   const [open, setOpen] = (0, import_react2.useState)(true);
   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.jsx)(import_react_native2.Text, { style: styles.title, children: label }),
-      renderIcon ? renderIcon({
+      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 })
   ] });
@@ -391,7 +391,9 @@ function MultiPickerModal({
   label,
   placeholder = "Select",
   error,
-  renderIcon
+  renderInputIcon,
+  renderGroupIcon,
+  errorStyle
 }) {
   const [internalVisible, setInternalVisible] = (0, import_react3.useState)(false);
   const isControlled = visible !== void 0 && setVisible !== void 0;
@@ -415,15 +417,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,
@@ -439,15 +449,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() }),
-      renderIcon ? renderIcon({
+      renderInputIcon?.({
         name: "chevron-down",
         size: 18,
         color: "#6B7280"
-      }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.Text, { children: "\u2304" })
+      })
     ] }),
-    error && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.Text, { style: styles2.error, 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() })
     ] }) }) })
   ] });
@@ -463,13 +473,15 @@ var styles2 = import_react_native4.StyleSheet.create({
     borderRadius: 12,
     padding: 12,
     flexDirection: "row",
-    justifyContent: "space-between"
+    justifyContent: "space-between",
+    alignItems: "center"
   },
   text: {
     fontSize: 15
   },
   error: {
     color: "red",
+    fontSize: 12,
     marginTop: 4
   },
   overlay: {
@@ -486,10 +498,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

@@ -260,17 +260,17 @@ import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 function MultiPickerGroup({
   label,
   children,
-  renderIcon
+  renderGroupIcon
 }) {
   const [open, setOpen] = useState2(true);
   return /* @__PURE__ */ jsxs2(View2, { style: styles.group, children: [
     /* @__PURE__ */ jsxs2(TouchableOpacity2, { style: styles.header, onPress: () => setOpen(!open), children: [
       /* @__PURE__ */ jsx2(Text2, { style: styles.title, children: label }),
-      renderIcon ? renderIcon({
+      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 })
   ] });
@@ -374,7 +374,9 @@ function MultiPickerModal({
   label,
   placeholder = "Select",
   error,
-  renderIcon
+  renderInputIcon,
+  renderGroupIcon,
+  errorStyle
 }) {
   const [internalVisible, setInternalVisible] = useState3(false);
   const isControlled = visible !== void 0 && setVisible !== void 0;
@@ -398,15 +400,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,
@@ -422,15 +432,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() }),
-      renderIcon ? renderIcon({
+      renderInputIcon?.({
         name: "chevron-down",
         size: 18,
         color: "#6B7280"
-      }) : /* @__PURE__ */ jsx4(Text4, { children: "\u2304" })
+      })
     ] }),
-    error && /* @__PURE__ */ jsx4(Text4, { style: styles2.error, 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() })
     ] }) }) })
   ] });
@@ -446,13 +456,15 @@ var styles2 = StyleSheet4.create({
     borderRadius: 12,
     padding: 12,
     flexDirection: "row",
-    justifyContent: "space-between"
+    justifyContent: "space-between",
+    alignItems: "center"
   },
   text: {
     fontSize: 15
   },
   error: {
     color: "red",
+    fontSize: 12,
     marginTop: 4
   },
   overlay: {
@@ -469,10 +481,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.8",
+  "version": "1.0.10",
   "description": "A fully customizable React Native picker with search, multi-select, grouping, and async support.",
   "main": "dist/index.js",
   "module": "dist/index.mjs",