@kaushverse/pickify 1.0.12 → 1.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/index.d.mts +15 -8
  2. package/dist/index.d.ts +15 -8
  3. package/dist/index.js +32 -25
  4. package/dist/index.mjs +32 -25
  5. package/package.json +1 -1
package/dist/index.d.mts CHANGED
@@ -98,6 +98,18 @@ type MultiPickerGroupProps = {
98
98
  renderGroupIcon?: IconRenderer;
99
99
  styles?: MultiPickerGroupStyles;
100
100
  };
101
+ type MultiPickerStyles = {
102
+ overlay?: ViewStyle;
103
+ container?: ViewStyle;
104
+ doneBtn?: ViewStyle;
105
+ doneText?: TextStyle;
106
+ label?: TextStyle;
107
+ selectBox?: ViewStyle;
108
+ selectText?: TextStyle;
109
+ error?: TextStyle;
110
+ item?: MultiPickerItemStyles;
111
+ group?: MultiPickerGroupStyles;
112
+ };
101
113
  type MultiPickerProps = {
102
114
  visible?: boolean;
103
115
  setVisible?: (val: boolean) => void;
@@ -110,15 +122,10 @@ type MultiPickerProps = {
110
122
  error?: string;
111
123
  renderInputIcon?: IconRenderer;
112
124
  renderGroupIcon?: IconRenderer;
113
- styles?: {
114
- container?: ViewStyle;
115
- selectBox?: ViewStyle;
116
- selectText?: TextStyle;
117
- };
118
- errorStyle?: TextStyle;
125
+ styles?: MultiPickerStyles;
119
126
  };
120
127
 
121
- declare function MultiPickerModal({ visible, setVisible, selectedValues, options, groups, onChange, label, placeholder, error, renderInputIcon, renderGroupIcon, errorStyle, }: MultiPickerProps): react_jsx_runtime.JSX.Element;
128
+ declare function MultiPickerModal({ visible, setVisible, selectedValues, options, groups, onChange, label, placeholder, error, renderInputIcon, renderGroupIcon, styles, }: MultiPickerProps): react_jsx_runtime.JSX.Element;
122
129
 
123
130
  declare function MultiPickerItem({ label, selected, onPress, renderIcon, styles: customStyles, }: MultiPickerItemProps): react_jsx_runtime.JSX.Element;
124
131
 
@@ -128,4 +135,4 @@ declare const toggleValue: (arr: string[], value: string) => string[];
128
135
 
129
136
  declare const groupOptions: (options: Option[], config: Record<string, string[]>) => Group[];
130
137
 
131
- export { type Group, type MultiGroup, type MultiOption, MultiPickerGroup, type MultiPickerGroupProps, type MultiPickerGroupStyles, MultiPickerItem, type MultiPickerItemProps, type MultiPickerItemStyles, MultiPickerModal, type MultiPickerProps, type Option, PickerModal, type PickerStyles, type Props, type Theme, groupOptions, toggleValue };
138
+ export { 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 };
package/dist/index.d.ts CHANGED
@@ -98,6 +98,18 @@ type MultiPickerGroupProps = {
98
98
  renderGroupIcon?: IconRenderer;
99
99
  styles?: MultiPickerGroupStyles;
100
100
  };
101
+ type MultiPickerStyles = {
102
+ overlay?: ViewStyle;
103
+ container?: ViewStyle;
104
+ doneBtn?: ViewStyle;
105
+ doneText?: TextStyle;
106
+ label?: TextStyle;
107
+ selectBox?: ViewStyle;
108
+ selectText?: TextStyle;
109
+ error?: TextStyle;
110
+ item?: MultiPickerItemStyles;
111
+ group?: MultiPickerGroupStyles;
112
+ };
101
113
  type MultiPickerProps = {
102
114
  visible?: boolean;
103
115
  setVisible?: (val: boolean) => void;
@@ -110,15 +122,10 @@ type MultiPickerProps = {
110
122
  error?: string;
111
123
  renderInputIcon?: IconRenderer;
112
124
  renderGroupIcon?: IconRenderer;
113
- styles?: {
114
- container?: ViewStyle;
115
- selectBox?: ViewStyle;
116
- selectText?: TextStyle;
117
- };
118
- errorStyle?: TextStyle;
125
+ styles?: MultiPickerStyles;
119
126
  };
120
127
 
121
- declare function MultiPickerModal({ visible, setVisible, selectedValues, options, groups, onChange, label, placeholder, error, renderInputIcon, renderGroupIcon, errorStyle, }: MultiPickerProps): react_jsx_runtime.JSX.Element;
128
+ declare function MultiPickerModal({ visible, setVisible, selectedValues, options, groups, onChange, label, placeholder, error, renderInputIcon, renderGroupIcon, styles, }: MultiPickerProps): react_jsx_runtime.JSX.Element;
122
129
 
123
130
  declare function MultiPickerItem({ label, selected, onPress, renderIcon, styles: customStyles, }: MultiPickerItemProps): react_jsx_runtime.JSX.Element;
124
131
 
@@ -128,4 +135,4 @@ declare const toggleValue: (arr: string[], value: string) => string[];
128
135
 
129
136
  declare const groupOptions: (options: Option[], config: Record<string, string[]>) => Group[];
130
137
 
131
- export { type Group, type MultiGroup, type MultiOption, MultiPickerGroup, type MultiPickerGroupProps, type MultiPickerGroupStyles, MultiPickerItem, type MultiPickerItemProps, type MultiPickerItemStyles, MultiPickerModal, type MultiPickerProps, type Option, PickerModal, type PickerStyles, type Props, type Theme, groupOptions, toggleValue };
138
+ export { 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 };
package/dist/index.js CHANGED
@@ -39,7 +39,7 @@ function PickerModal({
39
39
  selectedValue,
40
40
  options,
41
41
  groups = [],
42
- styles: styles3,
42
+ styles: styles2,
43
43
  theme,
44
44
  renderTab,
45
45
  renderItem,
@@ -97,7 +97,7 @@ function PickerModal({
97
97
  style: [
98
98
  defaultStyles.container,
99
99
  { backgroundColor: bg },
100
- styles3?.container
100
+ styles2?.container
101
101
  ],
102
102
  children: [
103
103
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -106,10 +106,10 @@ function PickerModal({
106
106
  style: [
107
107
  defaultStyles.doneBtn,
108
108
  { backgroundColor: primary },
109
- styles3?.doneBtn
109
+ styles2?.doneBtn
110
110
  ],
111
111
  onPress: handleClose,
112
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Text, { style: [defaultStyles.doneText, styles3?.doneText], children: "Done" })
112
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Text, { style: [defaultStyles.doneText, styles2?.doneText], children: "Done" })
113
113
  }
114
114
  ),
115
115
  hasGroups && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, children: groups.map((tab, index) => {
@@ -122,7 +122,7 @@ function PickerModal({
122
122
  {
123
123
  style: [
124
124
  defaultStyles.tab,
125
- styles3?.tab,
125
+ styles2?.tab,
126
126
  isActive && { backgroundColor: primary }
127
127
  ],
128
128
  onPress: () => setActiveTab(index),
@@ -132,7 +132,7 @@ function PickerModal({
132
132
  style: [
133
133
  defaultStyles.tabText,
134
134
  { color: isActive ? "#fff" : text },
135
- styles3?.tabText
135
+ styles2?.tabText
136
136
  ],
137
137
  children: tab.label
138
138
  }
@@ -163,14 +163,14 @@ function PickerModal({
163
163
  }
164
164
  );
165
165
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
166
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_native.View, { style: styles3?.inputContainer, children: [
167
- label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Text, { style: [defaultStyles.label, styles3?.label, labelStyle], children: label }),
166
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_native.View, { style: styles2?.inputContainer, children: [
167
+ label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Text, { style: [defaultStyles.label, styles2?.label, labelStyle], children: label }),
168
168
  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
169
169
  import_react_native.TouchableOpacity,
170
170
  {
171
171
  style: [
172
172
  defaultStyles.selectBox,
173
- styles3?.selectBox,
173
+ styles2?.selectBox,
174
174
  selectBoxStyle,
175
175
  error && { borderColor: "red" }
176
176
  ],
@@ -181,7 +181,7 @@ function PickerModal({
181
181
  {
182
182
  style: [
183
183
  defaultStyles.selectText,
184
- styles3?.selectText,
184
+ styles2?.selectText,
185
185
  selectTextStyle
186
186
  ],
187
187
  children: getLabel() || placeholder
@@ -195,7 +195,7 @@ function PickerModal({
195
195
  ]
196
196
  }
197
197
  ),
198
- error && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Text, { style: [defaultStyles.error, styles3?.error, errorStyle], children: error })
198
+ error && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Text, { style: [defaultStyles.error, styles2?.error, errorStyle], children: error })
199
199
  ] }),
200
200
  /* @__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 }) })
201
201
  ] });
@@ -428,7 +428,7 @@ function MultiPickerModal({
428
428
  error,
429
429
  renderInputIcon,
430
430
  renderGroupIcon,
431
- errorStyle
431
+ styles: styles2
432
432
  }) {
433
433
  const [internalVisible, setInternalVisible] = (0, import_react3.useState)(false);
434
434
  const isControlled = visible !== void 0 && setVisible !== void 0;
@@ -481,23 +481,30 @@ function MultiPickerModal({
481
481
  ));
482
482
  };
483
483
  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
484
- label && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.Text, { style: styles2.label, children: label }),
485
- /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native4.TouchableOpacity, { style: styles2.box, onPress: open, children: [
486
- /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.Text, { style: styles2.text, children: getLabel() }),
487
- renderInputIcon?.({
488
- name: "chevron-down",
489
- size: 18,
490
- color: "#6B7280"
491
- })
492
- ] }),
493
- error && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.Text, { style: [styles2.error, errorStyle], children: error }),
494
- /* @__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: [
495
- /* @__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" }) }),
484
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.Text, { style: [defaultStyles3.label, styles2?.label], children: label }),
485
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
486
+ import_react_native4.TouchableOpacity,
487
+ {
488
+ style: [defaultStyles3.box, styles2?.selectBox],
489
+ onPress: open,
490
+ children: [
491
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.Text, { style: [defaultStyles3.text, styles2?.selectText], children: getLabel() }),
492
+ renderInputIcon?.({
493
+ name: "chevron-down",
494
+ size: 18,
495
+ color: "#6B7280"
496
+ })
497
+ ]
498
+ }
499
+ ),
500
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.Text, { style: [defaultStyles3.error, styles2?.error], children: error }),
501
+ /* @__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: [defaultStyles3.overlay, styles2?.overlay], children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native4.View, { style: [defaultStyles3.container, styles2?.container], children: [
502
+ /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.TouchableOpacity, { style: [defaultStyles3.done, styles2?.doneBtn], children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.Text, { style: [defaultStyles3.doneText, styles2?.doneText], children: "Done" }) }),
496
503
  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.ScrollView, { children: renderList() })
497
504
  ] }) }) })
498
505
  ] });
499
506
  }
500
- var styles2 = import_react_native4.StyleSheet.create({
507
+ var defaultStyles3 = import_react_native4.StyleSheet.create({
501
508
  label: {
502
509
  marginBottom: 6,
503
510
  fontSize: 14
package/dist/index.mjs CHANGED
@@ -15,7 +15,7 @@ function PickerModal({
15
15
  selectedValue,
16
16
  options,
17
17
  groups = [],
18
- styles: styles3,
18
+ styles: styles2,
19
19
  theme,
20
20
  renderTab,
21
21
  renderItem,
@@ -73,7 +73,7 @@ function PickerModal({
73
73
  style: [
74
74
  defaultStyles.container,
75
75
  { backgroundColor: bg },
76
- styles3?.container
76
+ styles2?.container
77
77
  ],
78
78
  children: [
79
79
  /* @__PURE__ */ jsx(
@@ -82,10 +82,10 @@ function PickerModal({
82
82
  style: [
83
83
  defaultStyles.doneBtn,
84
84
  { backgroundColor: primary },
85
- styles3?.doneBtn
85
+ styles2?.doneBtn
86
86
  ],
87
87
  onPress: handleClose,
88
- children: /* @__PURE__ */ jsx(Text, { style: [defaultStyles.doneText, styles3?.doneText], children: "Done" })
88
+ children: /* @__PURE__ */ jsx(Text, { style: [defaultStyles.doneText, styles2?.doneText], children: "Done" })
89
89
  }
90
90
  ),
91
91
  hasGroups && /* @__PURE__ */ jsx(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, children: groups.map((tab, index) => {
@@ -98,7 +98,7 @@ function PickerModal({
98
98
  {
99
99
  style: [
100
100
  defaultStyles.tab,
101
- styles3?.tab,
101
+ styles2?.tab,
102
102
  isActive && { backgroundColor: primary }
103
103
  ],
104
104
  onPress: () => setActiveTab(index),
@@ -108,7 +108,7 @@ function PickerModal({
108
108
  style: [
109
109
  defaultStyles.tabText,
110
110
  { color: isActive ? "#fff" : text },
111
- styles3?.tabText
111
+ styles2?.tabText
112
112
  ],
113
113
  children: tab.label
114
114
  }
@@ -139,14 +139,14 @@ function PickerModal({
139
139
  }
140
140
  );
141
141
  return /* @__PURE__ */ jsxs(Fragment, { children: [
142
- /* @__PURE__ */ jsxs(View, { style: styles3?.inputContainer, children: [
143
- label && /* @__PURE__ */ jsx(Text, { style: [defaultStyles.label, styles3?.label, labelStyle], children: label }),
142
+ /* @__PURE__ */ jsxs(View, { style: styles2?.inputContainer, children: [
143
+ label && /* @__PURE__ */ jsx(Text, { style: [defaultStyles.label, styles2?.label, labelStyle], children: label }),
144
144
  /* @__PURE__ */ jsxs(
145
145
  TouchableOpacity,
146
146
  {
147
147
  style: [
148
148
  defaultStyles.selectBox,
149
- styles3?.selectBox,
149
+ styles2?.selectBox,
150
150
  selectBoxStyle,
151
151
  error && { borderColor: "red" }
152
152
  ],
@@ -157,7 +157,7 @@ function PickerModal({
157
157
  {
158
158
  style: [
159
159
  defaultStyles.selectText,
160
- styles3?.selectText,
160
+ styles2?.selectText,
161
161
  selectTextStyle
162
162
  ],
163
163
  children: getLabel() || placeholder
@@ -171,7 +171,7 @@ function PickerModal({
171
171
  ]
172
172
  }
173
173
  ),
174
- error && /* @__PURE__ */ jsx(Text, { style: [defaultStyles.error, styles3?.error, errorStyle], children: error })
174
+ error && /* @__PURE__ */ jsx(Text, { style: [defaultStyles.error, styles2?.error, errorStyle], children: error })
175
175
  ] }),
176
176
  /* @__PURE__ */ jsx(Modal, { visible: isVisible, transparent: true, animationType: "slide", children: /* @__PURE__ */ jsx(View, { style: defaultStyles.modalOverlay, children: renderContainer ? renderContainer(content) : content }) })
177
177
  ] });
@@ -417,7 +417,7 @@ function MultiPickerModal({
417
417
  error,
418
418
  renderInputIcon,
419
419
  renderGroupIcon,
420
- errorStyle
420
+ styles: styles2
421
421
  }) {
422
422
  const [internalVisible, setInternalVisible] = useState3(false);
423
423
  const isControlled = visible !== void 0 && setVisible !== void 0;
@@ -470,23 +470,30 @@ function MultiPickerModal({
470
470
  ));
471
471
  };
472
472
  return /* @__PURE__ */ jsxs4(Fragment2, { children: [
473
- label && /* @__PURE__ */ jsx4(Text4, { style: styles2.label, children: label }),
474
- /* @__PURE__ */ jsxs4(TouchableOpacity4, { style: styles2.box, onPress: open, children: [
475
- /* @__PURE__ */ jsx4(Text4, { style: styles2.text, children: getLabel() }),
476
- renderInputIcon?.({
477
- name: "chevron-down",
478
- size: 18,
479
- color: "#6B7280"
480
- })
481
- ] }),
482
- error && /* @__PURE__ */ jsx4(Text4, { style: [styles2.error, errorStyle], children: error }),
483
- /* @__PURE__ */ jsx4(Modal2, { visible: isVisible, transparent: true, animationType: "slide", children: /* @__PURE__ */ jsx4(View4, { style: styles2.overlay, children: /* @__PURE__ */ jsxs4(View4, { style: styles2.container, children: [
484
- /* @__PURE__ */ jsx4(TouchableOpacity4, { onPress: close, style: styles2.done, children: /* @__PURE__ */ jsx4(Text4, { style: styles2.doneText, children: "Done" }) }),
473
+ /* @__PURE__ */ jsx4(Text4, { style: [defaultStyles3.label, styles2?.label], children: label }),
474
+ /* @__PURE__ */ jsxs4(
475
+ TouchableOpacity4,
476
+ {
477
+ style: [defaultStyles3.box, styles2?.selectBox],
478
+ onPress: open,
479
+ children: [
480
+ /* @__PURE__ */ jsx4(Text4, { style: [defaultStyles3.text, styles2?.selectText], children: getLabel() }),
481
+ renderInputIcon?.({
482
+ name: "chevron-down",
483
+ size: 18,
484
+ color: "#6B7280"
485
+ })
486
+ ]
487
+ }
488
+ ),
489
+ /* @__PURE__ */ jsx4(Text4, { style: [defaultStyles3.error, styles2?.error], children: error }),
490
+ /* @__PURE__ */ jsx4(Modal2, { visible: isVisible, transparent: true, animationType: "slide", children: /* @__PURE__ */ jsx4(View4, { style: [defaultStyles3.overlay, styles2?.overlay], children: /* @__PURE__ */ jsxs4(View4, { style: [defaultStyles3.container, styles2?.container], children: [
491
+ /* @__PURE__ */ jsx4(TouchableOpacity4, { style: [defaultStyles3.done, styles2?.doneBtn], children: /* @__PURE__ */ jsx4(Text4, { style: [defaultStyles3.doneText, styles2?.doneText], children: "Done" }) }),
485
492
  /* @__PURE__ */ jsx4(ScrollView2, { children: renderList() })
486
493
  ] }) }) })
487
494
  ] });
488
495
  }
489
- var styles2 = StyleSheet4.create({
496
+ var defaultStyles3 = StyleSheet4.create({
490
497
  label: {
491
498
  marginBottom: 6,
492
499
  fontSize: 14
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kaushverse/pickify",
3
- "version": "1.0.12",
3
+ "version": "1.1.0",
4
4
  "description": "A fully customizable React Native picker with search, multi-select, grouping, and async support.",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",