@kaushverse/pickify 1.0.1 → 1.0.2

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 +24 -9
  4. package/dist/index.mjs +24 -9
  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,7 +45,11 @@ 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);
@@ -97,11 +101,7 @@ function PickerModal({
97
101
  hasGroups && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, children: groups.map((tab, index) => {
98
102
  const isActive = activeTab === index;
99
103
  if (renderTab) {
100
- return renderTab(
101
- tab,
102
- isActive,
103
- () => setActiveTab(index)
104
- );
104
+ return renderTab(tab, isActive, () => setActiveTab(index));
105
105
  }
106
106
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
107
107
  import_react_native.TouchableOpacity,
@@ -150,18 +150,29 @@ function PickerModal({
150
150
  );
151
151
  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
152
152
  /* @__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 }),
153
+ label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Text, { style: [defaultStyles.label, styles?.label, labelStyle], children: label }),
154
154
  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
155
155
  import_react_native.TouchableOpacity,
156
156
  {
157
157
  style: [
158
158
  defaultStyles.selectBox,
159
159
  styles?.selectBox,
160
+ selectBoxStyle,
160
161
  error && { borderColor: "red" }
161
162
  ],
162
163
  onPress: handleOpen,
163
164
  children: [
164
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Text, { style: [defaultStyles.selectText, styles?.selectText], children: getLabel() || placeholder }),
165
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
166
+ import_react_native.Text,
167
+ {
168
+ style: [
169
+ defaultStyles.selectText,
170
+ styles?.selectText,
171
+ selectTextStyle
172
+ ],
173
+ children: getLabel() || placeholder
174
+ }
175
+ ),
165
176
  renderIcon?.({
166
177
  name: "chevron-down",
167
178
  size: 18,
@@ -170,7 +181,7 @@ function PickerModal({
170
181
  ]
171
182
  }
172
183
  ),
173
- error && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Text, { style: [defaultStyles.error, styles?.error], children: error })
184
+ error && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_native.Text, { style: [defaultStyles.error, styles?.error, errorStyle], children: error })
174
185
  ] }),
175
186
  /* @__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
187
  ] });
@@ -186,6 +197,10 @@ var defaultStyles = import_react_native.StyleSheet.create({
186
197
  borderTopRightRadius: 20,
187
198
  padding: 20
188
199
  },
200
+ label: {
201
+ fontSize: 16,
202
+ marginBottom: 6
203
+ },
189
204
  /* ---------- INPUT ---------- */
190
205
  selectBox: {
191
206
  height: 48,
package/dist/index.mjs CHANGED
@@ -25,7 +25,11 @@ 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);
@@ -77,11 +81,7 @@ function PickerModal({
77
81
  hasGroups && /* @__PURE__ */ jsx(ScrollView, { horizontal: true, showsHorizontalScrollIndicator: false, children: groups.map((tab, index) => {
78
82
  const isActive = activeTab === index;
79
83
  if (renderTab) {
80
- return renderTab(
81
- tab,
82
- isActive,
83
- () => setActiveTab(index)
84
- );
84
+ return renderTab(tab, isActive, () => setActiveTab(index));
85
85
  }
86
86
  return /* @__PURE__ */ jsx(
87
87
  TouchableOpacity,
@@ -130,18 +130,29 @@ function PickerModal({
130
130
  );
131
131
  return /* @__PURE__ */ jsxs(Fragment, { children: [
132
132
  /* @__PURE__ */ jsxs(View, { style: styles?.inputContainer, children: [
133
- label && /* @__PURE__ */ jsx(Text, { style: styles?.label, children: label }),
133
+ label && /* @__PURE__ */ jsx(Text, { style: [defaultStyles.label, styles?.label, labelStyle], children: label }),
134
134
  /* @__PURE__ */ jsxs(
135
135
  TouchableOpacity,
136
136
  {
137
137
  style: [
138
138
  defaultStyles.selectBox,
139
139
  styles?.selectBox,
140
+ selectBoxStyle,
140
141
  error && { borderColor: "red" }
141
142
  ],
142
143
  onPress: handleOpen,
143
144
  children: [
144
- /* @__PURE__ */ jsx(Text, { style: [defaultStyles.selectText, styles?.selectText], children: getLabel() || placeholder }),
145
+ /* @__PURE__ */ jsx(
146
+ Text,
147
+ {
148
+ style: [
149
+ defaultStyles.selectText,
150
+ styles?.selectText,
151
+ selectTextStyle
152
+ ],
153
+ children: getLabel() || placeholder
154
+ }
155
+ ),
145
156
  renderIcon?.({
146
157
  name: "chevron-down",
147
158
  size: 18,
@@ -150,7 +161,7 @@ function PickerModal({
150
161
  ]
151
162
  }
152
163
  ),
153
- error && /* @__PURE__ */ jsx(Text, { style: [defaultStyles.error, styles?.error], children: error })
164
+ error && /* @__PURE__ */ jsx(Text, { style: [defaultStyles.error, styles?.error, errorStyle], children: error })
154
165
  ] }),
155
166
  /* @__PURE__ */ jsx(Modal, { visible: isVisible, transparent: true, animationType: "slide", children: /* @__PURE__ */ jsx(View, { style: defaultStyles.modalOverlay, children: renderContainer ? renderContainer(content) : content }) })
156
167
  ] });
@@ -166,6 +177,10 @@ var defaultStyles = StyleSheet.create({
166
177
  borderTopRightRadius: 20,
167
178
  padding: 20
168
179
  },
180
+ label: {
181
+ fontSize: 16,
182
+ marginBottom: 6
183
+ },
169
184
  /* ---------- INPUT ---------- */
170
185
  selectBox: {
171
186
  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.2",
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",