@kaushverse/pickify 1.0.1 → 1.0.3

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 +7 -3
  2. package/dist/index.d.ts +7 -3
  3. package/dist/index.js +26 -10
  4. package/dist/index.mjs +26 -10
  5. package/package.json +1 -1
package/dist/index.d.mts CHANGED
@@ -1,6 +1,6 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
2
  import React from 'react';
3
- import { ViewStyle, TextStyle } from 'react-native';
3
+ import { TextStyle, ViewStyle } from 'react-native';
4
4
 
5
5
  type Option = {
6
6
  label: string;
@@ -32,7 +32,11 @@ type PickerStyles = {
32
32
  error?: TextStyle;
33
33
  };
34
34
  type Props = {
35
- visible: boolean;
35
+ labelStyle?: TextStyle;
36
+ selectBoxStyle?: ViewStyle;
37
+ selectTextStyle?: TextStyle;
38
+ errorStyle?: TextStyle;
39
+ visible?: boolean;
36
40
  selectedValue: string;
37
41
  options: Option[];
38
42
  groups?: Group[];
@@ -50,7 +54,7 @@ type Props = {
50
54
  onClose: () => void;
51
55
  };
52
56
 
53
- declare function PickerModal({ visible, selectedValue, options, groups, styles, theme, renderTab, renderItem, renderContainer, onSelect, onClose, renderIcon, label, placeholder, error, }: Props & {
57
+ declare function PickerModal({ visible, selectedValue, options, groups, styles, theme, renderTab, renderItem, renderContainer, onSelect, onClose, renderIcon, label, placeholder, error, labelStyle, selectBoxStyle, selectTextStyle, errorStyle, }: Props & {
54
58
  label?: string;
55
59
  placeholder?: string;
56
60
  error?: string;
package/dist/index.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
2
  import React from 'react';
3
- import { ViewStyle, TextStyle } from 'react-native';
3
+ import { TextStyle, ViewStyle } from 'react-native';
4
4
 
5
5
  type Option = {
6
6
  label: string;
@@ -32,7 +32,11 @@ type PickerStyles = {
32
32
  error?: TextStyle;
33
33
  };
34
34
  type Props = {
35
- visible: boolean;
35
+ labelStyle?: TextStyle;
36
+ selectBoxStyle?: ViewStyle;
37
+ selectTextStyle?: TextStyle;
38
+ errorStyle?: TextStyle;
39
+ visible?: boolean;
36
40
  selectedValue: string;
37
41
  options: Option[];
38
42
  groups?: Group[];
@@ -50,7 +54,7 @@ type Props = {
50
54
  onClose: () => void;
51
55
  };
52
56
 
53
- declare function PickerModal({ visible, selectedValue, options, groups, styles, theme, renderTab, renderItem, renderContainer, onSelect, onClose, renderIcon, label, placeholder, error, }: Props & {
57
+ declare function PickerModal({ visible, selectedValue, options, groups, styles, theme, renderTab, renderItem, renderContainer, onSelect, onClose, renderIcon, label, placeholder, error, labelStyle, selectBoxStyle, selectTextStyle, errorStyle, }: Props & {
54
58
  label?: string;
55
59
  placeholder?: string;
56
60
  error?: string;
package/dist/index.js CHANGED
@@ -45,11 +45,16 @@ function PickerModal({
45
45
  renderIcon,
46
46
  label,
47
47
  placeholder = "Select",
48
- error
48
+ error,
49
+ labelStyle,
50
+ selectBoxStyle,
51
+ selectTextStyle,
52
+ errorStyle
49
53
  }) {
50
54
  const [activeTab, setActiveTab] = (0, import_react.useState)(0);
51
55
  const [open, setOpen] = (0, import_react.useState)(false);
52
- const isVisible = visible ?? open;
56
+ const isControlled = visible !== void 0;
57
+ const isVisible = isControlled ? visible : open;
53
58
  const hasGroups = groups.length > 0;
54
59
  const currentOptions = hasGroups ? groups[activeTab]?.data || [] : options;
55
60
  (0, import_react.useEffect)(() => {
@@ -97,11 +102,7 @@ function PickerModal({
97
102
  hasGroups && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, children: groups.map((tab, index) => {
98
103
  const isActive = activeTab === index;
99
104
  if (renderTab) {
100
- return renderTab(
101
- tab,
102
- isActive,
103
- () => setActiveTab(index)
104
- );
105
+ return renderTab(tab, isActive, () => setActiveTab(index));
105
106
  }
106
107
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
107
108
  import_react_native.TouchableOpacity,
@@ -150,18 +151,29 @@ function PickerModal({
150
151
  );
151
152
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
152
153
  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react_native.View, { style: styles?.inputContainer, children: [
153
- label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Text, { style: styles?.label, children: label }),
154
+ label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Text, { style: [defaultStyles.label, styles?.label, labelStyle], children: label }),
154
155
  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
155
156
  import_react_native.TouchableOpacity,
156
157
  {
157
158
  style: [
158
159
  defaultStyles.selectBox,
159
160
  styles?.selectBox,
161
+ selectBoxStyle,
160
162
  error && { borderColor: "red" }
161
163
  ],
162
164
  onPress: handleOpen,
163
165
  children: [
164
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Text, { style: [defaultStyles.selectText, styles?.selectText], children: getLabel() || placeholder }),
166
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
167
+ import_react_native.Text,
168
+ {
169
+ style: [
170
+ defaultStyles.selectText,
171
+ styles?.selectText,
172
+ selectTextStyle
173
+ ],
174
+ children: getLabel() || placeholder
175
+ }
176
+ ),
165
177
  renderIcon?.({
166
178
  name: "chevron-down",
167
179
  size: 18,
@@ -170,7 +182,7 @@ function PickerModal({
170
182
  ]
171
183
  }
172
184
  ),
173
- error && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Text, { style: [defaultStyles.error, styles?.error], children: error })
185
+ error && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Text, { style: [defaultStyles.error, styles?.error, errorStyle], children: error })
174
186
  ] }),
175
187
  /* @__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 }) })
176
188
  ] });
@@ -186,6 +198,10 @@ var defaultStyles = import_react_native.StyleSheet.create({
186
198
  borderTopRightRadius: 20,
187
199
  padding: 20
188
200
  },
201
+ label: {
202
+ fontSize: 16,
203
+ marginBottom: 6
204
+ },
189
205
  /* ---------- INPUT ---------- */
190
206
  selectBox: {
191
207
  height: 48,
package/dist/index.mjs CHANGED
@@ -25,11 +25,16 @@ function PickerModal({
25
25
  renderIcon,
26
26
  label,
27
27
  placeholder = "Select",
28
- error
28
+ error,
29
+ labelStyle,
30
+ selectBoxStyle,
31
+ selectTextStyle,
32
+ errorStyle
29
33
  }) {
30
34
  const [activeTab, setActiveTab] = useState(0);
31
35
  const [open, setOpen] = useState(false);
32
- const isVisible = visible ?? open;
36
+ const isControlled = visible !== void 0;
37
+ const isVisible = isControlled ? visible : open;
33
38
  const hasGroups = groups.length > 0;
34
39
  const currentOptions = hasGroups ? groups[activeTab]?.data || [] : options;
35
40
  useEffect(() => {
@@ -77,11 +82,7 @@ function PickerModal({
77
82
  hasGroups && /* @__PURE__ */ jsx(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, children: groups.map((tab, index) => {
78
83
  const isActive = activeTab === index;
79
84
  if (renderTab) {
80
- return renderTab(
81
- tab,
82
- isActive,
83
- () => setActiveTab(index)
84
- );
85
+ return renderTab(tab, isActive, () => setActiveTab(index));
85
86
  }
86
87
  return /* @__PURE__ */ jsx(
87
88
  TouchableOpacity,
@@ -130,18 +131,29 @@ function PickerModal({
130
131
  );
131
132
  return /* @__PURE__ */ jsxs(Fragment, { children: [
132
133
  /* @__PURE__ */ jsxs(View, { style: styles?.inputContainer, children: [
133
- label && /* @__PURE__ */ jsx(Text, { style: styles?.label, children: label }),
134
+ label && /* @__PURE__ */ jsx(Text, { style: [defaultStyles.label, styles?.label, labelStyle], children: label }),
134
135
  /* @__PURE__ */ jsxs(
135
136
  TouchableOpacity,
136
137
  {
137
138
  style: [
138
139
  defaultStyles.selectBox,
139
140
  styles?.selectBox,
141
+ selectBoxStyle,
140
142
  error && { borderColor: "red" }
141
143
  ],
142
144
  onPress: handleOpen,
143
145
  children: [
144
- /* @__PURE__ */ jsx(Text, { style: [defaultStyles.selectText, styles?.selectText], children: getLabel() || placeholder }),
146
+ /* @__PURE__ */ jsx(
147
+ Text,
148
+ {
149
+ style: [
150
+ defaultStyles.selectText,
151
+ styles?.selectText,
152
+ selectTextStyle
153
+ ],
154
+ children: getLabel() || placeholder
155
+ }
156
+ ),
145
157
  renderIcon?.({
146
158
  name: "chevron-down",
147
159
  size: 18,
@@ -150,7 +162,7 @@ function PickerModal({
150
162
  ]
151
163
  }
152
164
  ),
153
- error && /* @__PURE__ */ jsx(Text, { style: [defaultStyles.error, styles?.error], children: error })
165
+ error && /* @__PURE__ */ jsx(Text, { style: [defaultStyles.error, styles?.error, errorStyle], children: error })
154
166
  ] }),
155
167
  /* @__PURE__ */ jsx(Modal, { visible: isVisible, transparent: true, animationType: "slide", children: /* @__PURE__ */ jsx(View, { style: defaultStyles.modalOverlay, children: renderContainer ? renderContainer(content) : content }) })
156
168
  ] });
@@ -166,6 +178,10 @@ var defaultStyles = StyleSheet.create({
166
178
  borderTopRightRadius: 20,
167
179
  padding: 20
168
180
  },
181
+ label: {
182
+ fontSize: 16,
183
+ marginBottom: 6
184
+ },
169
185
  /* ---------- INPUT ---------- */
170
186
  selectBox: {
171
187
  height: 48,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kaushverse/pickify",
3
- "version": "1.0.1",
3
+ "version": "1.0.3",
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",