@idealyst/components 1.0.82 → 1.0.83

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 (13) hide show
  1. package/package.json +7 -7
  2. package/src/Select/README.md +166 -0
  3. package/src/Select/Select.native.tsx +270 -0
  4. package/src/Select/Select.styles.tsx +325 -0
  5. package/src/Select/Select.web.tsx +436 -0
  6. package/src/Select/index.native.ts +2 -0
  7. package/src/Select/index.ts +2 -0
  8. package/src/Select/index.web.ts +2 -0
  9. package/src/Select/types.ts +118 -0
  10. package/src/examples/AllExamples.tsx +4 -0
  11. package/src/examples/SelectExamples.tsx +423 -0
  12. package/src/examples/index.ts +1 -0
  13. package/src/index.ts +4 -0
package/src/Select/Select.styles.tsx ADDED
@@ -0,0 +1,325 @@
1
+ import { StyleSheet } from 'react-native-unistyles';
2
+
3
+ export const selectStyles = StyleSheet.create((theme) => ({
4
+ container: {
5
+ position: 'relative',
6
+ },
7
+
8
+ label: {
9
+ fontSize: theme.typography?.sm?.fontSize || 14,
10
+ fontWeight: theme.typography?.sm?.fontWeight || '500',
11
+ color: theme.colors?.text?.primary || theme.palettes?.gray?.[700] || '#374151',
12
+ marginBottom: theme.spacing?.xs || 4,
13
+ },
14
+
15
+ trigger: {
16
+ position: 'relative',
17
+ flexDirection: 'row',
18
+ alignItems: 'center',
19
+ justifyContent: 'space-between',
20
+ paddingHorizontal: theme.spacing?.sm || 12,
21
+ borderRadius: theme.borderRadius?.md || 8,
22
+ borderWidth: 1,
23
+ minHeight: 44,
24
+ cursor: 'pointer',
25
+
26
+ variants: {
27
+ variant: {
28
+ outlined: {
29
+ backgroundColor: 'transparent',
30
+ borderColor: theme.colors?.border?.primary || theme.palettes?.gray?.[300] || '#d1d5db',
31
+ _web: {
32
+ border: `1px solid ${theme.colors?.border?.primary || theme.palettes?.gray?.[300] || '#d1d5db'}`,
33
+ },
34
+ },
35
+ filled: {
36
+ backgroundColor: theme.colors?.surface?.secondary || theme.palettes?.gray?.[50] || '#f9fafb',
37
+ borderColor: 'transparent',
38
+ _web: {
39
+ border: '1px solid transparent',
40
+ },
41
+ },
42
+ },
43
+ size: {
44
+ small: {
45
+ paddingHorizontal: theme.spacing?.xs || 8,
46
+ minHeight: 36,
47
+ },
48
+ medium: {
49
+ paddingHorizontal: theme.spacing?.sm || 12,
50
+ minHeight: 44,
51
+ },
52
+ large: {
53
+ paddingHorizontal: theme.spacing?.md || 16,
54
+ minHeight: 52,
55
+ },
56
+ },
57
+ intent: {
58
+ neutral: {},
59
+ primary: {},
60
+ success: {},
61
+ error: {},
62
+ warning: {},
63
+ info: {},
64
+ },
65
+ disabled: {
66
+ true: {
67
+ opacity: 0.6,
68
+ cursor: 'not-allowed',
69
+ },
70
+ false: {},
71
+ },
72
+ error: {
73
+ true: {
74
+ borderColor: theme.intents?.error?.main || '#ef4444',
75
+ _web: {
76
+ border: `1px solid ${theme.intents?.error?.main || '#ef4444'}`,
77
+ },
78
+ },
79
+ false: {},
80
+ },
81
+ focused: {
82
+ true: {
83
+ borderColor: theme.intents?.primary?.main || '#3b82f6',
84
+ _web: {
85
+ border: `2px solid ${theme.intents?.primary?.main || '#3b82f6'}`,
86
+ outline: 'none',
87
+ },
88
+ },
89
+ false: {},
90
+ },
91
+ },
92
+
93
+ compoundVariants: [
94
+ {
95
+ variant: 'outlined',
96
+ intent: 'primary',
97
+ styles: {
98
+ borderColor: theme.intents?.primary?.main || '#3b82f6',
99
+ _web: {
100
+ border: `1px solid ${theme.intents?.primary?.main || '#3b82f6'}`,
101
+ },
102
+ },
103
+ },
104
+ {
105
+ variant: 'outlined',
106
+ intent: 'success',
107
+ styles: {
108
+ borderColor: theme.intents?.success?.main || '#22c55e',
109
+ _web: {
110
+ border: `1px solid ${theme.intents?.success?.main || '#22c55e'}`,
111
+ },
112
+ },
113
+ },
114
+ {
115
+ variant: 'outlined',
116
+ intent: 'error',
117
+ styles: {
118
+ borderColor: theme.intents?.error?.main || '#ef4444',
119
+ _web: {
120
+ border: `1px solid ${theme.intents?.error?.main || '#ef4444'}`,
121
+ },
122
+ },
123
+ },
124
+ {
125
+ variant: 'outlined',
126
+ intent: 'warning',
127
+ styles: {
128
+ borderColor: theme.intents?.warning?.main || '#f59e0b',
129
+ _web: {
130
+ border: `1px solid ${theme.intents?.warning?.main || '#f59e0b'}`,
131
+ },
132
+ },
133
+ },
134
+ {
135
+ variant: 'outlined',
136
+ intent: 'info',
137
+ styles: {
138
+ borderColor: theme.intents?.info?.main || '#06b6d4',
139
+ _web: {
140
+ border: `1px solid ${theme.intents?.info?.main || '#06b6d4'}`,
141
+ },
142
+ },
143
+ },
144
+ ],
145
+
146
+ _web: {
147
+ display: 'flex',
148
+ boxSizing: 'border-box',
149
+ _focus: {
150
+ outline: 'none',
151
+ },
152
+ _hover: {
153
+ borderColor: theme.intents?.primary?.main || '#3b82f6',
154
+ },
155
+ },
156
+ },
157
+
158
+ triggerContent: {
159
+ flex: 1,
160
+ flexDirection: 'row',
161
+ alignItems: 'center',
162
+ },
163
+
164
+ triggerText: {
165
+ fontSize: theme.typography?.base?.fontSize || 16,
166
+ color: theme.colors?.text?.primary || theme.palettes?.gray?.[900] || '#111827',
167
+ flex: 1,
168
+ },
169
+
170
+ placeholder: {
171
+ fontSize: theme.typography?.base?.fontSize || 16,
172
+ color: theme.colors?.text?.disabled || theme.palettes?.gray?.[500] || '#6b7280',
173
+ },
174
+
175
+ icon: {
176
+ marginLeft: theme.spacing?.xs || 4,
177
+ color: theme.colors?.text?.secondary || theme.palettes?.gray?.[600] || '#4b5563',
178
+ },
179
+
180
+ chevron: {
181
+ marginLeft: theme.spacing?.xs || 4,
182
+ color: theme.colors?.text?.secondary || theme.palettes?.gray?.[600] || '#4b5563',
183
+ transition: 'transform 0.2s ease',
184
+ },
185
+
186
+ chevronOpen: {
187
+ transform: 'rotate(180deg)',
188
+ },
189
+
190
+ dropdown: {
191
+ position: 'absolute',
192
+ top: '100%',
193
+ left: 0,
194
+ right: 0,
195
+ backgroundColor: theme.colors?.surface?.primary || '#ffffff',
196
+ borderRadius: theme.borderRadius?.md || 8,
197
+ borderWidth: 1,
198
+ borderColor: theme.colors?.border?.primary || theme.palettes?.gray?.[200] || '#e5e7eb',
199
+ shadowColor: theme.shadows?.lg?.shadowColor || '#000',
200
+ shadowOffset: theme.shadows?.lg?.shadowOffset || { width: 0, height: 8 },
201
+ shadowOpacity: theme.shadows?.lg?.shadowOpacity || 0.15,
202
+ shadowRadius: theme.shadows?.lg?.shadowRadius || 12,
203
+ elevation: theme.shadows?.lg?.elevation || 8,
204
+ zIndex: 9999, // Higher z-index to float above other content
205
+ maxHeight: 240,
206
+ overflow: 'hidden',
207
+
208
+ _web: {
209
+ border: `1px solid ${theme.colors?.border?.primary || theme.palettes?.gray?.[200] || '#e5e7eb'}`,
210
+ boxShadow: '0 8px 24px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.06)',
211
+ overflowY: 'auto',
212
+ },
213
+ },
214
+
215
+ searchContainer: {
216
+ padding: theme.spacing?.sm || 12,
217
+ borderBottomWidth: 1,
218
+ borderBottomColor: theme.colors?.border?.primary || theme.palettes?.gray?.[200] || '#e5e7eb',
219
+
220
+ _web: {
221
+ borderBottom: `1px solid ${theme.colors?.border?.primary || theme.palettes?.gray?.[200] || '#e5e7eb'}`,
222
+ },
223
+ },
224
+
225
+ searchInput: {
226
+ padding: theme.spacing?.xs || 8,
227
+ borderRadius: theme.borderRadius?.sm || 4,
228
+ borderWidth: 1,
229
+ borderColor: theme.colors?.border?.primary || theme.palettes?.gray?.[300] || '#d1d5db',
230
+ fontSize: theme.typography?.sm?.fontSize || 14,
231
+ backgroundColor: theme.colors?.surface?.primary || '#ffffff',
232
+
233
+ _web: {
234
+ border: `1px solid ${theme.colors?.border?.primary || theme.palettes?.gray?.[300] || '#d1d5db'}`,
235
+ outline: 'none',
236
+ _focus: {
237
+ borderColor: theme.intents?.primary?.main || '#3b82f6',
238
+ },
239
+ },
240
+ },
241
+
242
+ optionsList: {
243
+ paddingVertical: theme.spacing?.xs || 4,
244
+ },
245
+
246
+ option: {
247
+ paddingHorizontal: theme.spacing?.sm || 12,
248
+ paddingVertical: theme.spacing?.sm || 12,
249
+ flexDirection: 'row',
250
+ alignItems: 'center',
251
+ cursor: 'pointer',
252
+ minHeight: 44,
253
+
254
+ variants: {
255
+ selected: {
256
+ true: {
257
+ backgroundColor: theme.intents?.primary?.container || theme.palettes?.blue?.[50] || '#eff6ff',
258
+ },
259
+ false: {},
260
+ },
261
+ disabled: {
262
+ true: {
263
+ opacity: 0.5,
264
+ cursor: 'not-allowed',
265
+ },
266
+ false: {},
267
+ },
268
+ },
269
+
270
+ _web: {
271
+ display: 'flex',
272
+ _hover: {
273
+ backgroundColor: theme.colors?.surface?.secondary || theme.palettes?.gray?.[50] || '#f9fafb',
274
+ },
275
+ },
276
+ },
277
+
278
+ optionContent: {
279
+ flexDirection: 'row',
280
+ alignItems: 'center',
281
+ flex: 1,
282
+ },
283
+
284
+ optionIcon: {
285
+ marginRight: theme.spacing?.xs || 8,
286
+ },
287
+
288
+ optionText: {
289
+ fontSize: theme.typography?.base?.fontSize || 16,
290
+ color: theme.colors?.text?.primary || theme.palettes?.gray?.[900] || '#111827',
291
+ flex: 1,
292
+ },
293
+
294
+ optionTextDisabled: {
295
+ color: theme.colors?.text?.disabled || theme.palettes?.gray?.[500] || '#6b7280',
296
+ },
297
+
298
+ helperText: {
299
+ fontSize: theme.typography?.xs?.fontSize || 12,
300
+ marginTop: theme.spacing?.xs || 4,
301
+ color: theme.colors?.text?.secondary || theme.palettes?.gray?.[600] || '#4b5563',
302
+
303
+ variants: {
304
+ error: {
305
+ true: {
306
+ color: theme.intents?.error?.main || '#ef4444',
307
+ },
308
+ false: {},
309
+ },
310
+ },
311
+ },
312
+
313
+ overlay: {
314
+ position: 'absolute',
315
+ top: 0,
316
+ left: 0,
317
+ right: 0,
318
+ bottom: 0,
319
+ zIndex: 999,
320
+
321
+ _web: {
322
+ position: 'fixed',
323
+ },
324
+ },
325
+ }));