@kaushverse/pickify 1.0.9 → 1.0.10

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 +3 -4
  2. package/dist/index.d.ts +3 -4
  3. package/dist/index.js +30 -15
  4. package/dist/index.mjs +30 -15
  5. package/package.json +1 -1
package/dist/index.d.mts CHANGED
@@ -107,8 +107,9 @@ type MultiPickerProps = {
107
107
  onChange: (val: string[]) => void;
108
108
  label?: string;
109
109
  placeholder?: string;
110
- error?: TextStyle;
110
+ error?: string;
111
111
  renderInputIcon?: IconRenderer;
112
+ renderGroupIcon?: IconRenderer;
112
113
  styles?: {
113
114
  container?: ViewStyle;
114
115
  selectBox?: ViewStyle;
@@ -117,9 +118,7 @@ type MultiPickerProps = {
117
118
  errorStyle?: TextStyle;
118
119
  };
119
120
 
120
- declare function MultiPickerModal({ visible, setVisible, selectedValues, options, groups, onChange, label, placeholder, error, renderInputIcon, errorStyle, }: MultiPickerProps & {
121
- error: string;
122
- }): react_jsx_runtime.JSX.Element;
121
+ declare function MultiPickerModal({ visible, setVisible, selectedValues, options, groups, onChange, label, placeholder, error, renderInputIcon, renderGroupIcon, errorStyle, }: MultiPickerProps): react_jsx_runtime.JSX.Element;
123
122
 
124
123
  declare function MultiPickerItem({ label, selected, onPress, renderIcon, styles: customStyles, }: MultiPickerItemProps): react_jsx_runtime.JSX.Element;
125
124
 
package/dist/index.d.ts CHANGED
@@ -107,8 +107,9 @@ type MultiPickerProps = {
107
107
  onChange: (val: string[]) => void;
108
108
  label?: string;
109
109
  placeholder?: string;
110
- error?: TextStyle;
110
+ error?: string;
111
111
  renderInputIcon?: IconRenderer;
112
+ renderGroupIcon?: IconRenderer;
112
113
  styles?: {
113
114
  container?: ViewStyle;
114
115
  selectBox?: ViewStyle;
@@ -117,9 +118,7 @@ type MultiPickerProps = {
117
118
  errorStyle?: TextStyle;
118
119
  };
119
120
 
120
- declare function MultiPickerModal({ visible, setVisible, selectedValues, options, groups, onChange, label, placeholder, error, renderInputIcon, errorStyle, }: MultiPickerProps & {
121
- error: string;
122
- }): react_jsx_runtime.JSX.Element;
121
+ declare function MultiPickerModal({ visible, setVisible, selectedValues, options, groups, onChange, label, placeholder, error, renderInputIcon, renderGroupIcon, errorStyle, }: MultiPickerProps): react_jsx_runtime.JSX.Element;
123
122
 
124
123
  declare function MultiPickerItem({ label, selected, onPress, renderIcon, styles: customStyles, }: MultiPickerItemProps): react_jsx_runtime.JSX.Element;
125
124
 
package/dist/index.js CHANGED
@@ -283,11 +283,11 @@ function MultiPickerGroup({
283
283
  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native2.View, { style: styles.group, children: [
284
284
  /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_react_native2.TouchableOpacity, { style: styles.header, onPress: () => setOpen(!open), children: [
285
285
  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.Text, { style: styles.title, children: label }),
286
- renderGroupIcon ? renderGroupIcon({
286
+ renderGroupIcon?.({
287
287
  name: open ? "chevron-up" : "chevron-down",
288
288
  size: 18,
289
289
  color: "#6B7280"
290
- }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.Text, { style: styles.fallback, children: open ? "\u2303" : "\u2304" })
290
+ })
291
291
  ] }),
292
292
  open && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react_native2.View, { style: { marginTop: 6 }, children })
293
293
  ] });
@@ -392,6 +392,7 @@ function MultiPickerModal({
392
392
  placeholder = "Select",
393
393
  error,
394
394
  renderInputIcon,
395
+ renderGroupIcon,
395
396
  errorStyle
396
397
  }) {
397
398
  const [internalVisible, setInternalVisible] = (0, import_react3.useState)(false);
@@ -416,15 +417,23 @@ function MultiPickerModal({
416
417
  };
417
418
  const renderList = () => {
418
419
  if (groups.length > 0) {
419
- 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)(
420
- MultiPickerItem,
420
+ return groups.map((group) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
421
+ MultiPickerGroup,
421
422
  {
422
- label: item.label,
423
- selected: selectedValues.includes(item.value),
424
- onPress: () => handleSelect(item.value)
423
+ label: group.label,
424
+ renderGroupIcon,
425
+ children: group.data.map((item) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
426
+ MultiPickerItem,
427
+ {
428
+ label: item.label,
429
+ selected: selectedValues.includes(item.value),
430
+ onPress: () => handleSelect(item.value)
431
+ },
432
+ item.value
433
+ ))
425
434
  },
426
- item.value
427
- )) }, group.label));
435
+ group.label
436
+ ));
428
437
  }
429
438
  return options.map((item) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
430
439
  MultiPickerItem,
@@ -440,15 +449,15 @@ function MultiPickerModal({
440
449
  label && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.Text, { style: styles2.label, children: label }),
441
450
  /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react_native4.TouchableOpacity, { style: styles2.box, onPress: open, children: [
442
451
  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.Text, { style: styles2.text, children: getLabel() }),
443
- renderInputIcon ? renderInputIcon({
452
+ renderInputIcon?.({
444
453
  name: "chevron-down",
445
454
  size: 18,
446
455
  color: "#6B7280"
447
- }) : null
456
+ })
448
457
  ] }),
449
- error && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.Text, { style: [styles2.error, styles2?.error, errorStyle], children: error }),
458
+ error && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.Text, { style: [styles2.error, errorStyle], children: error }),
450
459
  /* @__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: [
451
- /* @__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" }) }),
460
+ /* @__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" }) }),
452
461
  /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_native4.ScrollView, { children: renderList() })
453
462
  ] }) }) })
454
463
  ] });
@@ -464,7 +473,8 @@ var styles2 = import_react_native4.StyleSheet.create({
464
473
  borderRadius: 12,
465
474
  padding: 12,
466
475
  flexDirection: "row",
467
- justifyContent: "space-between"
476
+ justifyContent: "space-between",
477
+ alignItems: "center"
468
478
  },
469
479
  text: {
470
480
  fontSize: 15
@@ -488,10 +498,15 @@ var styles2 = import_react_native4.StyleSheet.create({
488
498
  },
489
499
  done: {
490
500
  backgroundColor: "#6366f1",
491
- padding: 10,
501
+ paddingVertical: 10,
502
+ paddingHorizontal: 14,
492
503
  borderRadius: 10,
493
504
  alignSelf: "flex-end",
494
505
  marginBottom: 10
506
+ },
507
+ doneText: {
508
+ color: "#fff",
509
+ fontWeight: "600"
495
510
  }
496
511
  });
497
512
 
package/dist/index.mjs CHANGED
@@ -266,11 +266,11 @@ function MultiPickerGroup({
266
266
  return /* @__PURE__ */ jsxs2(View2, { style: styles.group, children: [
267
267
  /* @__PURE__ */ jsxs2(TouchableOpacity2, { style: styles.header, onPress: () => setOpen(!open), children: [
268
268
  /* @__PURE__ */ jsx2(Text2, { style: styles.title, children: label }),
269
- renderGroupIcon ? renderGroupIcon({
269
+ renderGroupIcon?.({
270
270
  name: open ? "chevron-up" : "chevron-down",
271
271
  size: 18,
272
272
  color: "#6B7280"
273
- }) : /* @__PURE__ */ jsx2(Text2, { style: styles.fallback, children: open ? "\u2303" : "\u2304" })
273
+ })
274
274
  ] }),
275
275
  open && /* @__PURE__ */ jsx2(View2, { style: { marginTop: 6 }, children })
276
276
  ] });
@@ -375,6 +375,7 @@ function MultiPickerModal({
375
375
  placeholder = "Select",
376
376
  error,
377
377
  renderInputIcon,
378
+ renderGroupIcon,
378
379
  errorStyle
379
380
  }) {
380
381
  const [internalVisible, setInternalVisible] = useState3(false);
@@ -399,15 +400,23 @@ function MultiPickerModal({
399
400
  };
400
401
  const renderList = () => {
401
402
  if (groups.length > 0) {
402
- return groups.map((group) => /* @__PURE__ */ jsx4(MultiPickerGroup, { label: group.label, children: group.data.map((item) => /* @__PURE__ */ jsx4(
403
- MultiPickerItem,
403
+ return groups.map((group) => /* @__PURE__ */ jsx4(
404
+ MultiPickerGroup,
404
405
  {
405
- label: item.label,
406
- selected: selectedValues.includes(item.value),
407
- onPress: () => handleSelect(item.value)
406
+ label: group.label,
407
+ renderGroupIcon,
408
+ children: group.data.map((item) => /* @__PURE__ */ jsx4(
409
+ MultiPickerItem,
410
+ {
411
+ label: item.label,
412
+ selected: selectedValues.includes(item.value),
413
+ onPress: () => handleSelect(item.value)
414
+ },
415
+ item.value
416
+ ))
408
417
  },
409
- item.value
410
- )) }, group.label));
418
+ group.label
419
+ ));
411
420
  }
412
421
  return options.map((item) => /* @__PURE__ */ jsx4(
413
422
  MultiPickerItem,
@@ -423,15 +432,15 @@ function MultiPickerModal({
423
432
  label && /* @__PURE__ */ jsx4(Text4, { style: styles2.label, children: label }),
424
433
  /* @__PURE__ */ jsxs4(TouchableOpacity4, { style: styles2.box, onPress: open, children: [
425
434
  /* @__PURE__ */ jsx4(Text4, { style: styles2.text, children: getLabel() }),
426
- renderInputIcon ? renderInputIcon({
435
+ renderInputIcon?.({
427
436
  name: "chevron-down",
428
437
  size: 18,
429
438
  color: "#6B7280"
430
- }) : null
439
+ })
431
440
  ] }),
432
- error && /* @__PURE__ */ jsx4(Text4, { style: [styles2.error, styles2?.error, errorStyle], children: error }),
441
+ error && /* @__PURE__ */ jsx4(Text4, { style: [styles2.error, errorStyle], children: error }),
433
442
  /* @__PURE__ */ jsx4(Modal2, { visible: isVisible, transparent: true, animationType: "slide", children: /* @__PURE__ */ jsx4(View4, { style: styles2.overlay, children: /* @__PURE__ */ jsxs4(View4, { style: styles2.container, children: [
434
- /* @__PURE__ */ jsx4(TouchableOpacity4, { onPress: close, style: styles2.done, children: /* @__PURE__ */ jsx4(Text4, { style: { color: "#fff" }, children: "Done" }) }),
443
+ /* @__PURE__ */ jsx4(TouchableOpacity4, { onPress: close, style: styles2.done, children: /* @__PURE__ */ jsx4(Text4, { style: styles2.doneText, children: "Done" }) }),
435
444
  /* @__PURE__ */ jsx4(ScrollView2, { children: renderList() })
436
445
  ] }) }) })
437
446
  ] });
@@ -447,7 +456,8 @@ var styles2 = StyleSheet4.create({
447
456
  borderRadius: 12,
448
457
  padding: 12,
449
458
  flexDirection: "row",
450
- justifyContent: "space-between"
459
+ justifyContent: "space-between",
460
+ alignItems: "center"
451
461
  },
452
462
  text: {
453
463
  fontSize: 15
@@ -471,10 +481,15 @@ var styles2 = StyleSheet4.create({
471
481
  },
472
482
  done: {
473
483
  backgroundColor: "#6366f1",
474
- padding: 10,
484
+ paddingVertical: 10,
485
+ paddingHorizontal: 14,
475
486
  borderRadius: 10,
476
487
  alignSelf: "flex-end",
477
488
  marginBottom: 10
489
+ },
490
+ doneText: {
491
+ color: "#fff",
492
+ fontWeight: "600"
478
493
  }
479
494
  });
480
495
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kaushverse/pickify",
3
- "version": "1.0.9",
3
+ "version": "1.0.10",
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",