@idealyst/components 1.0.24 → 1.0.26

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 (110) hide show
  1. package/README.md +567 -567
  2. package/package.json +2 -2
  3. package/plugin/web.js +319 -185
  4. package/src/Avatar/Avatar.native.tsx +43 -43
  5. package/src/Avatar/Avatar.styles.tsx +66 -66
  6. package/src/Avatar/Avatar.web.tsx +50 -50
  7. package/src/Avatar/index.native.ts +1 -1
  8. package/src/Avatar/index.ts +1 -1
  9. package/src/Avatar/index.web.ts +1 -1
  10. package/src/Avatar/types.ts +42 -42
  11. package/src/Badge/Badge.native.tsx +42 -42
  12. package/src/Badge/Badge.styles.tsx +153 -153
  13. package/src/Badge/Badge.web.tsx +44 -44
  14. package/src/Badge/index.native.ts +1 -1
  15. package/src/Badge/index.ts +1 -1
  16. package/src/Badge/index.web.ts +1 -1
  17. package/src/Badge/types.ts +33 -33
  18. package/src/Button/Button.native.tsx +38 -38
  19. package/src/Button/Button.styles.tsx +214 -214
  20. package/src/Button/Button.types.ts +11 -11
  21. package/src/Button/Button.web.tsx +55 -55
  22. package/src/Button/index.native.ts +2 -2
  23. package/src/Button/index.ts +4 -4
  24. package/src/Button/index.web.ts +2 -2
  25. package/src/Button/types.ts +48 -48
  26. package/src/Card/Card.native.tsx +51 -51
  27. package/src/Card/Card.styles.tsx +239 -239
  28. package/src/Card/Card.web.tsx +61 -61
  29. package/src/Card/index.native.ts +2 -2
  30. package/src/Card/index.ts +4 -4
  31. package/src/Card/index.web.ts +2 -2
  32. package/src/Card/types.ts +58 -58
  33. package/src/Checkbox/Checkbox.native.tsx +98 -98
  34. package/src/Checkbox/Checkbox.styles.tsx +291 -291
  35. package/src/Checkbox/Checkbox.web.tsx +130 -130
  36. package/src/Checkbox/index.native.ts +2 -2
  37. package/src/Checkbox/index.ts +4 -4
  38. package/src/Checkbox/index.web.ts +2 -2
  39. package/src/Checkbox/types.ts +78 -78
  40. package/src/Divider/Divider.native.tsx +144 -144
  41. package/src/Divider/Divider.styles.tsx +601 -601
  42. package/src/Divider/Divider.web.tsx +72 -72
  43. package/src/Divider/index.native.ts +2 -2
  44. package/src/Divider/index.ts +4 -4
  45. package/src/Divider/index.web.ts +2 -2
  46. package/src/Divider/types.ts +53 -53
  47. package/src/Icon/Icon.native.tsx +38 -38
  48. package/src/Icon/Icon.styles.tsx +49 -49
  49. package/src/Icon/Icon.web.tsx +46 -46
  50. package/src/Icon/icon-types.ts +7452 -7452
  51. package/src/Icon/index.native.ts +2 -2
  52. package/src/Icon/index.ts +4 -4
  53. package/src/Icon/index.web.ts +2 -2
  54. package/src/Icon/types.ts +35 -35
  55. package/src/Input/Input.native.tsx +74 -74
  56. package/src/Input/Input.styles.tsx +176 -176
  57. package/src/Input/Input.web.tsx +70 -70
  58. package/src/Input/index.native.ts +2 -2
  59. package/src/Input/index.ts +4 -4
  60. package/src/Input/index.web.ts +2 -2
  61. package/src/Input/types.ts +68 -68
  62. package/src/Screen/Screen.native.tsx +40 -40
  63. package/src/Screen/Screen.styles.tsx +59 -59
  64. package/src/Screen/Screen.web.tsx +32 -32
  65. package/src/Screen/index.native.ts +1 -1
  66. package/src/Screen/index.ts +1 -1
  67. package/src/Screen/index.web.ts +1 -1
  68. package/src/Screen/types.ts +37 -37
  69. package/src/Text/Text.native.tsx +35 -35
  70. package/src/Text/Text.styles.tsx +66 -66
  71. package/src/Text/Text.web.tsx +40 -40
  72. package/src/Text/index.native.ts +2 -2
  73. package/src/Text/index.ts +4 -4
  74. package/src/Text/index.web.ts +2 -2
  75. package/src/Text/types.ts +38 -38
  76. package/src/View/View.native.tsx +55 -55
  77. package/src/View/View.styles.tsx +102 -102
  78. package/src/View/View.web.tsx +59 -59
  79. package/src/View/index.native.ts +2 -2
  80. package/src/View/index.ts +4 -4
  81. package/src/View/index.web.ts +2 -2
  82. package/src/View/types.ts +72 -72
  83. package/src/examples/AllExamples.tsx +71 -71
  84. package/src/examples/AvatarExamples.tsx +96 -96
  85. package/src/examples/BadgeExamples.tsx +199 -199
  86. package/src/examples/ButtonExamples.tsx +149 -149
  87. package/src/examples/CardExamples.tsx +175 -175
  88. package/src/examples/CheckboxExamples.tsx +216 -216
  89. package/src/examples/DividerExamples.tsx +217 -217
  90. package/src/examples/IconExamples.tsx +341 -341
  91. package/src/examples/InputExamples.tsx +133 -133
  92. package/src/examples/README.md +135 -135
  93. package/src/examples/ScreenExamples.tsx +153 -153
  94. package/src/examples/TextExamples.tsx +88 -88
  95. package/src/examples/ThemeExtensionExamples.tsx +90 -90
  96. package/src/examples/ValidationExamples.tsx +94 -94
  97. package/src/examples/ViewExamples.tsx +128 -128
  98. package/src/examples/extendedTheme.ts +328 -328
  99. package/src/examples/index.ts +14 -14
  100. package/src/index.native.ts +48 -48
  101. package/src/index.ts +47 -47
  102. package/src/theme/breakpoints.ts +8 -8
  103. package/src/theme/colorResolver.ts +217 -217
  104. package/src/theme/colors.ts +314 -314
  105. package/src/theme/defaultThemes.ts +325 -325
  106. package/src/theme/index.ts +187 -187
  107. package/src/theme/themeBuilder.ts +601 -601
  108. package/src/theme/unistyles.d.ts +5 -5
  109. package/src/theme/variantHelpers.ts +583 -583
  110. package/src/theme/variants.ts +55 -55
package/src/Divider/Divider.styles.tsx CHANGED
@@ -1,602 +1,602 @@
1
- import { StyleSheet } from 'react-native-unistyles';
2
-
3
- export const dividerStyles = StyleSheet.create((theme) => ({
4
- divider: {
5
- backgroundColor: theme.colors?.border?.secondary || theme.palettes?.gray?.[300] || '#d1d5db',
6
-
7
- variants: {
8
- orientation: {
9
- horizontal: {
10
- width: '100%',
11
- height: 1,
12
- flexDirection: 'row',
13
- },
14
- vertical: {
15
- width: 1,
16
- height: '100%',
17
- flexDirection: 'column',
18
- },
19
- },
20
- thickness: {
21
- thin: {
22
- // Handled by orientation compound variants
23
- },
24
- medium: {
25
- // Handled by orientation compound variants
26
- },
27
- thick: {
28
- // Handled by orientation compound variants
29
- },
30
- },
31
- variant: {
32
- solid: {
33
- // Default solid style
34
- },
35
- dashed: {
36
- // React Native: handled by component logic with segments
37
- backgroundColor: 'transparent',
38
-
39
- _web: {
40
- border: 'none',
41
- backgroundColor: 'transparent',
42
- },
43
- },
44
- dotted: {
45
- // React Native: handled by component logic with segments
46
- backgroundColor: 'transparent',
47
-
48
- _web: {
49
- border: 'none',
50
- backgroundColor: 'transparent',
51
- },
52
- },
53
- },
54
- intent: {
55
- primary: {
56
- backgroundColor: theme.intents?.primary?.main || '#3b82f6',
57
- },
58
- secondary: {
59
- backgroundColor: theme.colors?.border?.primary || theme.palettes?.gray?.[200] || '#e5e7eb',
60
- },
61
- neutral: {
62
- backgroundColor: theme.colors?.border?.secondary || theme.palettes?.gray?.[300] || '#d1d5db',
63
- },
64
- success: {
65
- backgroundColor: theme.intents?.success?.main || '#22c55e',
66
- },
67
- error: {
68
- backgroundColor: theme.intents?.error?.main || '#ef4444',
69
- },
70
- warning: {
71
- backgroundColor: theme.intents?.warning?.main || '#f59e0b',
72
- },
73
- info: {
74
- backgroundColor: theme.intents?.info?.main || '#06b6d4',
75
- },
76
- },
77
- length: {
78
- full: {
79
- // Default full length
80
- },
81
- auto: {
82
- // Auto length handled by parent container
83
- },
84
- },
85
- spacing: {
86
- none: {
87
- margin: 0,
88
- },
89
- small: {
90
- // Handled by orientation compound variants
91
- },
92
- medium: {
93
- // Handled by orientation compound variants
94
- },
95
- large: {
96
- // Handled by orientation compound variants
97
- },
98
- },
99
- },
100
-
101
- compoundVariants: [
102
- // Horizontal thickness variants
103
- {
104
- orientation: 'horizontal',
105
- thickness: 'thin',
106
- styles: {
107
- height: 1,
108
- },
109
- },
110
- {
111
- orientation: 'horizontal',
112
- thickness: 'medium',
113
- styles: {
114
- height: 2,
115
- },
116
- },
117
- {
118
- orientation: 'horizontal',
119
- thickness: 'thick',
120
- styles: {
121
- height: 4,
122
- },
123
- },
124
- // Vertical thickness variants
125
- {
126
- orientation: 'vertical',
127
- thickness: 'thin',
128
- styles: {
129
- width: 1,
130
- },
131
- },
132
- {
133
- orientation: 'vertical',
134
- thickness: 'medium',
135
- styles: {
136
- width: 2,
137
- },
138
- },
139
- {
140
- orientation: 'vertical',
141
- thickness: 'thick',
142
- styles: {
143
- width: 4,
144
- },
145
- },
146
- // Horizontal spacing variants
147
- {
148
- orientation: 'horizontal',
149
- spacing: 'small',
150
- styles: {
151
- marginVertical: theme.spacing?.sm || 8,
152
- },
153
- },
154
- {
155
- orientation: 'horizontal',
156
- spacing: 'medium',
157
- styles: {
158
- marginVertical: theme.spacing?.md || 12,
159
- },
160
- },
161
- {
162
- orientation: 'horizontal',
163
- spacing: 'large',
164
- styles: {
165
- marginVertical: theme.spacing?.lg || 16,
166
- },
167
- },
168
- // Vertical spacing variants
169
- {
170
- orientation: 'vertical',
171
- spacing: 'small',
172
- styles: {
173
- marginHorizontal: theme.spacing?.sm || 8,
174
- },
175
- },
176
- {
177
- orientation: 'vertical',
178
- spacing: 'medium',
179
- styles: {
180
- marginHorizontal: theme.spacing?.md || 12,
181
- },
182
- },
183
- {
184
- orientation: 'vertical',
185
- spacing: 'large',
186
- styles: {
187
- marginHorizontal: theme.spacing?.lg || 16,
188
- },
189
- },
190
- // Dashed variant compound styles (web-only, RN handled by component)
191
- {
192
- variant: 'dashed',
193
- orientation: 'horizontal',
194
- styles: {
195
- _web: {
196
- borderTop: `1px dashed ${theme.colors?.border?.secondary || theme.palettes?.gray?.[300] || '#d1d5db'}`,
197
- borderLeft: 'none',
198
- },
199
- },
200
- },
201
- {
202
- variant: 'dashed',
203
- orientation: 'vertical',
204
- styles: {
205
- _web: {
206
- borderLeft: `1px dashed ${theme.colors?.border?.secondary || theme.palettes?.gray?.[300] || '#d1d5db'}`,
207
- borderTop: 'none',
208
- },
209
- },
210
- },
211
- // Dotted variant compound styles (web-only, RN handled by component)
212
- {
213
- variant: 'dotted',
214
- orientation: 'horizontal',
215
- styles: {
216
- _web: {
217
- borderTop: `1px dotted ${theme.colors?.border?.secondary || theme.palettes?.gray?.[300] || '#d1d5db'}`,
218
- borderLeft: 'none',
219
- },
220
- },
221
- },
222
- {
223
- variant: 'dotted',
224
- orientation: 'vertical',
225
- styles: {
226
- _web: {
227
- borderLeft: `1px dotted ${theme.colors?.border?.secondary || theme.palettes?.gray?.[300] || '#d1d5db'}`,
228
- borderTop: 'none',
229
- },
230
- },
231
- },
232
- // Intent color compounds for dashed variant
233
- {
234
- variant: 'dashed',
235
- intent: 'primary',
236
- orientation: 'horizontal',
237
- styles: {
238
- borderTopColor: theme.intents?.primary?.main || '#3b82f6',
239
-
240
- _web: {
241
- borderTop: `1px dashed ${theme.intents?.primary?.main || '#3b82f6'}`,
242
- },
243
- },
244
- },
245
- {
246
- variant: 'dashed',
247
- intent: 'primary',
248
- orientation: 'vertical',
249
- styles: {
250
- borderLeftColor: theme.intents?.primary?.main || '#3b82f6',
251
-
252
- _web: {
253
- borderLeft: `1px dashed ${theme.intents?.primary?.main || '#3b82f6'}`,
254
- },
255
- },
256
- },
257
- {
258
- variant: 'dashed',
259
- intent: 'success',
260
- orientation: 'horizontal',
261
- styles: {
262
- borderTopColor: theme.intents?.success?.main || '#22c55e',
263
-
264
- _web: {
265
- borderTop: `1px dashed ${theme.intents?.success?.main || '#22c55e'}`,
266
- },
267
- },
268
- },
269
- {
270
- variant: 'dashed',
271
- intent: 'success',
272
- orientation: 'vertical',
273
- styles: {
274
- borderLeftColor: theme.intents?.success?.main || '#22c55e',
275
-
276
- _web: {
277
- borderLeft: `1px dashed ${theme.intents?.success?.main || '#22c55e'}`,
278
- },
279
- },
280
- },
281
- {
282
- variant: 'dashed',
283
- intent: 'error',
284
- orientation: 'horizontal',
285
- styles: {
286
- borderTopColor: theme.intents?.error?.main || '#ef4444',
287
-
288
- _web: {
289
- borderTop: `1px dashed ${theme.intents?.error?.main || '#ef4444'}`,
290
- },
291
- },
292
- },
293
- {
294
- variant: 'dashed',
295
- intent: 'error',
296
- orientation: 'vertical',
297
- styles: {
298
- borderLeftColor: theme.intents?.error?.main || '#ef4444',
299
-
300
- _web: {
301
- borderLeft: `1px dashed ${theme.intents?.error?.main || '#ef4444'}`,
302
- },
303
- },
304
- },
305
- {
306
- variant: 'dashed',
307
- intent: 'warning',
308
- orientation: 'horizontal',
309
- styles: {
310
- borderTopColor: theme.intents?.warning?.main || '#f59e0b',
311
-
312
- _web: {
313
- borderTop: `1px dashed ${theme.intents?.warning?.main || '#f59e0b'}`,
314
- },
315
- },
316
- },
317
- {
318
- variant: 'dashed',
319
- intent: 'warning',
320
- orientation: 'vertical',
321
- styles: {
322
- borderLeftColor: theme.intents?.warning?.main || '#f59e0b',
323
-
324
- _web: {
325
- borderLeft: `1px dashed ${theme.intents?.warning?.main || '#f59e0b'}`,
326
- },
327
- },
328
- },
329
- {
330
- variant: 'dashed',
331
- intent: 'info',
332
- orientation: 'horizontal',
333
- styles: {
334
- borderTopColor: theme.intents?.info?.main || '#06b6d4',
335
-
336
- _web: {
337
- borderTop: `1px dashed ${theme.intents?.info?.main || '#06b6d4'}`,
338
- },
339
- },
340
- },
341
- {
342
- variant: 'dashed',
343
- intent: 'info',
344
- orientation: 'vertical',
345
- styles: {
346
- borderLeftColor: theme.intents?.info?.main || '#06b6d4',
347
-
348
- _web: {
349
- borderLeft: `1px dashed ${theme.intents?.info?.main || '#06b6d4'}`,
350
- },
351
- },
352
- },
353
- // Intent color compounds for dotted variant
354
- {
355
- variant: 'dotted',
356
- intent: 'primary',
357
- orientation: 'horizontal',
358
- styles: {
359
- borderTopColor: theme.intents?.primary?.main || '#3b82f6',
360
-
361
- _web: {
362
- borderTop: `1px dotted ${theme.intents?.primary?.main || '#3b82f6'}`,
363
- },
364
- },
365
- },
366
- {
367
- variant: 'dotted',
368
- intent: 'primary',
369
- orientation: 'vertical',
370
- styles: {
371
- borderLeftColor: theme.intents?.primary?.main || '#3b82f6',
372
-
373
- _web: {
374
- borderLeft: `1px dotted ${theme.intents?.primary?.main || '#3b82f6'}`,
375
- },
376
- },
377
- },
378
- {
379
- variant: 'dotted',
380
- intent: 'success',
381
- orientation: 'horizontal',
382
- styles: {
383
- borderTopColor: theme.intents?.success?.main || '#22c55e',
384
-
385
- _web: {
386
- borderTop: `1px dotted ${theme.intents?.success?.main || '#22c55e'}`,
387
- },
388
- },
389
- },
390
- {
391
- variant: 'dotted',
392
- intent: 'success',
393
- orientation: 'vertical',
394
- styles: {
395
- borderLeftColor: theme.intents?.success?.main || '#22c55e',
396
-
397
- _web: {
398
- borderLeft: `1px dotted ${theme.intents?.success?.main || '#22c55e'}`,
399
- },
400
- },
401
- },
402
- {
403
- variant: 'dotted',
404
- intent: 'error',
405
- orientation: 'horizontal',
406
- styles: {
407
- borderTopColor: theme.intents?.error?.main || '#ef4444',
408
-
409
- _web: {
410
- borderTop: `1px dotted ${theme.intents?.error?.main || '#ef4444'}`,
411
- },
412
- },
413
- },
414
- {
415
- variant: 'dotted',
416
- intent: 'error',
417
- orientation: 'vertical',
418
- styles: {
419
- borderLeftColor: theme.intents?.error?.main || '#ef4444',
420
-
421
- _web: {
422
- borderLeft: `1px dotted ${theme.intents?.error?.main || '#ef4444'}`,
423
- },
424
- },
425
- },
426
- {
427
- variant: 'dotted',
428
- intent: 'warning',
429
- orientation: 'horizontal',
430
- styles: {
431
- borderTopColor: theme.intents?.warning?.main || '#f59e0b',
432
-
433
- _web: {
434
- borderTop: `1px dotted ${theme.intents?.warning?.main || '#f59e0b'}`,
435
- },
436
- },
437
- },
438
- {
439
- variant: 'dotted',
440
- intent: 'warning',
441
- orientation: 'vertical',
442
- styles: {
443
- borderLeftColor: theme.intents?.warning?.main || '#f59e0b',
444
-
445
- _web: {
446
- borderLeft: `1px dotted ${theme.intents?.warning?.main || '#f59e0b'}`,
447
- },
448
- },
449
- },
450
- {
451
- variant: 'dotted',
452
- intent: 'info',
453
- orientation: 'horizontal',
454
- styles: {
455
- borderTopColor: theme.intents?.info?.main || '#06b6d4',
456
-
457
- _web: {
458
- borderTop: `1px dotted ${theme.intents?.info?.main || '#06b6d4'}`,
459
- },
460
- },
461
- },
462
- {
463
- variant: 'dotted',
464
- intent: 'info',
465
- orientation: 'vertical',
466
- styles: {
467
- borderLeftColor: theme.intents?.info?.main || '#06b6d4',
468
-
469
- _web: {
470
- borderLeft: `1px dotted ${theme.intents?.info?.main || '#06b6d4'}`,
471
- },
472
- },
473
- },
474
- ],
475
- },
476
-
477
- // Container for dividers with content
478
- container: {
479
- alignItems: 'center',
480
- justifyContent: 'center',
481
-
482
- variants: {
483
- orientation: {
484
- horizontal: {
485
- flexDirection: 'row',
486
- width: '100%',
487
- },
488
- vertical: {
489
- flexDirection: 'column',
490
- height: '100%',
491
- },
492
- },
493
- spacing: {
494
- none: {
495
- gap: 0,
496
- },
497
- small: {
498
- gap: theme.spacing?.sm || 8,
499
- },
500
- medium: {
501
- gap: theme.spacing?.md || 12,
502
- },
503
- large: {
504
- gap: theme.spacing?.lg || 16,
505
- },
506
- },
507
- },
508
- },
509
-
510
- // Content styling for dividers with children
511
- content: {
512
- backgroundColor: theme.colors?.surface?.primary || '#ffffff',
513
- color: theme.colors?.text?.secondary || theme.palettes?.gray?.[600] || '#4b5563',
514
- fontSize: theme.typography?.fontSize?.sm || 14,
515
-
516
- variants: {
517
- orientation: {
518
- horizontal: {
519
- paddingHorizontal: theme.spacing?.sm || 8,
520
- },
521
- vertical: {
522
- paddingVertical: theme.spacing?.sm || 8,
523
- },
524
- },
525
- },
526
- },
527
-
528
- // Line segments for dividers with content
529
- line: {
530
- backgroundColor: theme.colors?.border?.secondary || theme.palettes?.gray?.[300] || '#d1d5db',
531
- flex: 1,
532
-
533
- variants: {
534
- orientation: {
535
- horizontal: {
536
- height: 1,
537
- },
538
- vertical: {
539
- width: 1,
540
- },
541
- },
542
- thickness: {
543
- thin: {
544
- // Handled by orientation compound variants
545
- },
546
- medium: {
547
- // Handled by orientation compound variants
548
- },
549
- thick: {
550
- // Handled by orientation compound variants
551
- },
552
- },
553
- },
554
-
555
- compoundVariants: [
556
- // Horizontal thickness for line segments
557
- {
558
- orientation: 'horizontal',
559
- thickness: 'thin',
560
- styles: {
561
- height: 1,
562
- },
563
- },
564
- {
565
- orientation: 'horizontal',
566
- thickness: 'medium',
567
- styles: {
568
- height: 2,
569
- },
570
- },
571
- {
572
- orientation: 'horizontal',
573
- thickness: 'thick',
574
- styles: {
575
- height: 4,
576
- },
577
- },
578
- // Vertical thickness for line segments
579
- {
580
- orientation: 'vertical',
581
- thickness: 'thin',
582
- styles: {
583
- width: 1,
584
- },
585
- },
586
- {
587
- orientation: 'vertical',
588
- thickness: 'medium',
589
- styles: {
590
- width: 2,
591
- },
592
- },
593
- {
594
- orientation: 'vertical',
595
- thickness: 'thick',
596
- styles: {
597
- width: 4,
598
- },
599
- },
600
- ],
601
- },
1
+ import { StyleSheet } from 'react-native-unistyles';
2
+
3
+ export const dividerStyles = StyleSheet.create((theme) => ({
4
+ divider: {
5
+ backgroundColor: theme.colors?.border?.secondary || theme.palettes?.gray?.[300] || '#d1d5db',
6
+
7
+ variants: {
8
+ orientation: {
9
+ horizontal: {
10
+ width: '100%',
11
+ height: 1,
12
+ flexDirection: 'row',
13
+ },
14
+ vertical: {
15
+ width: 1,
16
+ height: '100%',
17
+ flexDirection: 'column',
18
+ },
19
+ },
20
+ thickness: {
21
+ thin: {
22
+ // Handled by orientation compound variants
23
+ },
24
+ medium: {
25
+ // Handled by orientation compound variants
26
+ },
27
+ thick: {
28
+ // Handled by orientation compound variants
29
+ },
30
+ },
31
+ variant: {
32
+ solid: {
33
+ // Default solid style
34
+ },
35
+ dashed: {
36
+ // React Native: handled by component logic with segments
37
+ backgroundColor: 'transparent',
38
+
39
+ _web: {
40
+ border: 'none',
41
+ backgroundColor: 'transparent',
42
+ },
43
+ },
44
+ dotted: {
45
+ // React Native: handled by component logic with segments
46
+ backgroundColor: 'transparent',
47
+
48
+ _web: {
49
+ border: 'none',
50
+ backgroundColor: 'transparent',
51
+ },
52
+ },
53
+ },
54
+ intent: {
55
+ primary: {
56
+ backgroundColor: theme.intents?.primary?.main || '#3b82f6',
57
+ },
58
+ secondary: {
59
+ backgroundColor: theme.colors?.border?.primary || theme.palettes?.gray?.[200] || '#e5e7eb',
60
+ },
61
+ neutral: {
62
+ backgroundColor: theme.colors?.border?.secondary || theme.palettes?.gray?.[300] || '#d1d5db',
63
+ },
64
+ success: {
65
+ backgroundColor: theme.intents?.success?.main || '#22c55e',
66
+ },
67
+ error: {
68
+ backgroundColor: theme.intents?.error?.main || '#ef4444',
69
+ },
70
+ warning: {
71
+ backgroundColor: theme.intents?.warning?.main || '#f59e0b',
72
+ },
73
+ info: {
74
+ backgroundColor: theme.intents?.info?.main || '#06b6d4',
75
+ },
76
+ },
77
+ length: {
78
+ full: {
79
+ // Default full length
80
+ },
81
+ auto: {
82
+ // Auto length handled by parent container
83
+ },
84
+ },
85
+ spacing: {
86
+ none: {
87
+ margin: 0,
88
+ },
89
+ small: {
90
+ // Handled by orientation compound variants
91
+ },
92
+ medium: {
93
+ // Handled by orientation compound variants
94
+ },
95
+ large: {
96
+ // Handled by orientation compound variants
97
+ },
98
+ },
99
+ },
100
+
101
+ compoundVariants: [
102
+ // Horizontal thickness variants
103
+ {
104
+ orientation: 'horizontal',
105
+ thickness: 'thin',
106
+ styles: {
107
+ height: 1,
108
+ },
109
+ },
110
+ {
111
+ orientation: 'horizontal',
112
+ thickness: 'medium',
113
+ styles: {
114
+ height: 2,
115
+ },
116
+ },
117
+ {
118
+ orientation: 'horizontal',
119
+ thickness: 'thick',
120
+ styles: {
121
+ height: 4,
122
+ },
123
+ },
124
+ // Vertical thickness variants
125
+ {
126
+ orientation: 'vertical',
127
+ thickness: 'thin',
128
+ styles: {
129
+ width: 1,
130
+ },
131
+ },
132
+ {
133
+ orientation: 'vertical',
134
+ thickness: 'medium',
135
+ styles: {
136
+ width: 2,
137
+ },
138
+ },
139
+ {
140
+ orientation: 'vertical',
141
+ thickness: 'thick',
142
+ styles: {
143
+ width: 4,
144
+ },
145
+ },
146
+ // Horizontal spacing variants
147
+ {
148
+ orientation: 'horizontal',
149
+ spacing: 'small',
150
+ styles: {
151
+ marginVertical: theme.spacing?.sm || 8,
152
+ },
153
+ },
154
+ {
155
+ orientation: 'horizontal',
156
+ spacing: 'medium',
157
+ styles: {
158
+ marginVertical: theme.spacing?.md || 12,
159
+ },
160
+ },
161
+ {
162
+ orientation: 'horizontal',
163
+ spacing: 'large',
164
+ styles: {
165
+ marginVertical: theme.spacing?.lg || 16,
166
+ },
167
+ },
168
+ // Vertical spacing variants
169
+ {
170
+ orientation: 'vertical',
171
+ spacing: 'small',
172
+ styles: {
173
+ marginHorizontal: theme.spacing?.sm || 8,
174
+ },
175
+ },
176
+ {
177
+ orientation: 'vertical',
178
+ spacing: 'medium',
179
+ styles: {
180
+ marginHorizontal: theme.spacing?.md || 12,
181
+ },
182
+ },
183
+ {
184
+ orientation: 'vertical',
185
+ spacing: 'large',
186
+ styles: {
187
+ marginHorizontal: theme.spacing?.lg || 16,
188
+ },
189
+ },
190
+ // Dashed variant compound styles (web-only, RN handled by component)
191
+ {
192
+ variant: 'dashed',
193
+ orientation: 'horizontal',
194
+ styles: {
195
+ _web: {
196
+ borderTop: `1px dashed ${theme.colors?.border?.secondary || theme.palettes?.gray?.[300] || '#d1d5db'}`,
197
+ borderLeft: 'none',
198
+ },
199
+ },
200
+ },
201
+ {
202
+ variant: 'dashed',
203
+ orientation: 'vertical',
204
+ styles: {
205
+ _web: {
206
+ borderLeft: `1px dashed ${theme.colors?.border?.secondary || theme.palettes?.gray?.[300] || '#d1d5db'}`,
207
+ borderTop: 'none',
208
+ },
209
+ },
210
+ },
211
+ // Dotted variant compound styles (web-only, RN handled by component)
212
+ {
213
+ variant: 'dotted',
214
+ orientation: 'horizontal',
215
+ styles: {
216
+ _web: {
217
+ borderTop: `1px dotted ${theme.colors?.border?.secondary || theme.palettes?.gray?.[300] || '#d1d5db'}`,
218
+ borderLeft: 'none',
219
+ },
220
+ },
221
+ },
222
+ {
223
+ variant: 'dotted',
224
+ orientation: 'vertical',
225
+ styles: {
226
+ _web: {
227
+ borderLeft: `1px dotted ${theme.colors?.border?.secondary || theme.palettes?.gray?.[300] || '#d1d5db'}`,
228
+ borderTop: 'none',
229
+ },
230
+ },
231
+ },
232
+ // Intent color compounds for dashed variant
233
+ {
234
+ variant: 'dashed',
235
+ intent: 'primary',
236
+ orientation: 'horizontal',
237
+ styles: {
238
+ borderTopColor: theme.intents?.primary?.main || '#3b82f6',
239
+
240
+ _web: {
241
+ borderTop: `1px dashed ${theme.intents?.primary?.main || '#3b82f6'}`,
242
+ },
243
+ },
244
+ },
245
+ {
246
+ variant: 'dashed',
247
+ intent: 'primary',
248
+ orientation: 'vertical',
249
+ styles: {
250
+ borderLeftColor: theme.intents?.primary?.main || '#3b82f6',
251
+
252
+ _web: {
253
+ borderLeft: `1px dashed ${theme.intents?.primary?.main || '#3b82f6'}`,
254
+ },
255
+ },
256
+ },
257
+ {
258
+ variant: 'dashed',
259
+ intent: 'success',
260
+ orientation: 'horizontal',
261
+ styles: {
262
+ borderTopColor: theme.intents?.success?.main || '#22c55e',
263
+
264
+ _web: {
265
+ borderTop: `1px dashed ${theme.intents?.success?.main || '#22c55e'}`,
266
+ },
267
+ },
268
+ },
269
+ {
270
+ variant: 'dashed',
271
+ intent: 'success',
272
+ orientation: 'vertical',
273
+ styles: {
274
+ borderLeftColor: theme.intents?.success?.main || '#22c55e',
275
+
276
+ _web: {
277
+ borderLeft: `1px dashed ${theme.intents?.success?.main || '#22c55e'}`,
278
+ },
279
+ },
280
+ },
281
+ {
282
+ variant: 'dashed',
283
+ intent: 'error',
284
+ orientation: 'horizontal',
285
+ styles: {
286
+ borderTopColor: theme.intents?.error?.main || '#ef4444',
287
+
288
+ _web: {
289
+ borderTop: `1px dashed ${theme.intents?.error?.main || '#ef4444'}`,
290
+ },
291
+ },
292
+ },
293
+ {
294
+ variant: 'dashed',
295
+ intent: 'error',
296
+ orientation: 'vertical',
297
+ styles: {
298
+ borderLeftColor: theme.intents?.error?.main || '#ef4444',
299
+
300
+ _web: {
301
+ borderLeft: `1px dashed ${theme.intents?.error?.main || '#ef4444'}`,
302
+ },
303
+ },
304
+ },
305
+ {
306
+ variant: 'dashed',
307
+ intent: 'warning',
308
+ orientation: 'horizontal',
309
+ styles: {
310
+ borderTopColor: theme.intents?.warning?.main || '#f59e0b',
311
+
312
+ _web: {
313
+ borderTop: `1px dashed ${theme.intents?.warning?.main || '#f59e0b'}`,
314
+ },
315
+ },
316
+ },
317
+ {
318
+ variant: 'dashed',
319
+ intent: 'warning',
320
+ orientation: 'vertical',
321
+ styles: {
322
+ borderLeftColor: theme.intents?.warning?.main || '#f59e0b',
323
+
324
+ _web: {
325
+ borderLeft: `1px dashed ${theme.intents?.warning?.main || '#f59e0b'}`,
326
+ },
327
+ },
328
+ },
329
+ {
330
+ variant: 'dashed',
331
+ intent: 'info',
332
+ orientation: 'horizontal',
333
+ styles: {
334
+ borderTopColor: theme.intents?.info?.main || '#06b6d4',
335
+
336
+ _web: {
337
+ borderTop: `1px dashed ${theme.intents?.info?.main || '#06b6d4'}`,
338
+ },
339
+ },
340
+ },
341
+ {
342
+ variant: 'dashed',
343
+ intent: 'info',
344
+ orientation: 'vertical',
345
+ styles: {
346
+ borderLeftColor: theme.intents?.info?.main || '#06b6d4',
347
+
348
+ _web: {
349
+ borderLeft: `1px dashed ${theme.intents?.info?.main || '#06b6d4'}`,
350
+ },
351
+ },
352
+ },
353
+ // Intent color compounds for dotted variant
354
+ {
355
+ variant: 'dotted',
356
+ intent: 'primary',
357
+ orientation: 'horizontal',
358
+ styles: {
359
+ borderTopColor: theme.intents?.primary?.main || '#3b82f6',
360
+
361
+ _web: {
362
+ borderTop: `1px dotted ${theme.intents?.primary?.main || '#3b82f6'}`,
363
+ },
364
+ },
365
+ },
366
+ {
367
+ variant: 'dotted',
368
+ intent: 'primary',
369
+ orientation: 'vertical',
370
+ styles: {
371
+ borderLeftColor: theme.intents?.primary?.main || '#3b82f6',
372
+
373
+ _web: {
374
+ borderLeft: `1px dotted ${theme.intents?.primary?.main || '#3b82f6'}`,
375
+ },
376
+ },
377
+ },
378
+ {
379
+ variant: 'dotted',
380
+ intent: 'success',
381
+ orientation: 'horizontal',
382
+ styles: {
383
+ borderTopColor: theme.intents?.success?.main || '#22c55e',
384
+
385
+ _web: {
386
+ borderTop: `1px dotted ${theme.intents?.success?.main || '#22c55e'}`,
387
+ },
388
+ },
389
+ },
390
+ {
391
+ variant: 'dotted',
392
+ intent: 'success',
393
+ orientation: 'vertical',
394
+ styles: {
395
+ borderLeftColor: theme.intents?.success?.main || '#22c55e',
396
+
397
+ _web: {
398
+ borderLeft: `1px dotted ${theme.intents?.success?.main || '#22c55e'}`,
399
+ },
400
+ },
401
+ },
402
+ {
403
+ variant: 'dotted',
404
+ intent: 'error',
405
+ orientation: 'horizontal',
406
+ styles: {
407
+ borderTopColor: theme.intents?.error?.main || '#ef4444',
408
+
409
+ _web: {
410
+ borderTop: `1px dotted ${theme.intents?.error?.main || '#ef4444'}`,
411
+ },
412
+ },
413
+ },
414
+ {
415
+ variant: 'dotted',
416
+ intent: 'error',
417
+ orientation: 'vertical',
418
+ styles: {
419
+ borderLeftColor: theme.intents?.error?.main || '#ef4444',
420
+
421
+ _web: {
422
+ borderLeft: `1px dotted ${theme.intents?.error?.main || '#ef4444'}`,
423
+ },
424
+ },
425
+ },
426
+ {
427
+ variant: 'dotted',
428
+ intent: 'warning',
429
+ orientation: 'horizontal',
430
+ styles: {
431
+ borderTopColor: theme.intents?.warning?.main || '#f59e0b',
432
+
433
+ _web: {
434
+ borderTop: `1px dotted ${theme.intents?.warning?.main || '#f59e0b'}`,
435
+ },
436
+ },
437
+ },
438
+ {
439
+ variant: 'dotted',
440
+ intent: 'warning',
441
+ orientation: 'vertical',
442
+ styles: {
443
+ borderLeftColor: theme.intents?.warning?.main || '#f59e0b',
444
+
445
+ _web: {
446
+ borderLeft: `1px dotted ${theme.intents?.warning?.main || '#f59e0b'}`,
447
+ },
448
+ },
449
+ },
450
+ {
451
+ variant: 'dotted',
452
+ intent: 'info',
453
+ orientation: 'horizontal',
454
+ styles: {
455
+ borderTopColor: theme.intents?.info?.main || '#06b6d4',
456
+
457
+ _web: {
458
+ borderTop: `1px dotted ${theme.intents?.info?.main || '#06b6d4'}`,
459
+ },
460
+ },
461
+ },
462
+ {
463
+ variant: 'dotted',
464
+ intent: 'info',
465
+ orientation: 'vertical',
466
+ styles: {
467
+ borderLeftColor: theme.intents?.info?.main || '#06b6d4',
468
+
469
+ _web: {
470
+ borderLeft: `1px dotted ${theme.intents?.info?.main || '#06b6d4'}`,
471
+ },
472
+ },
473
+ },
474
+ ],
475
+ },
476
+
477
+ // Container for dividers with content
478
+ container: {
479
+ alignItems: 'center',
480
+ justifyContent: 'center',
481
+
482
+ variants: {
483
+ orientation: {
484
+ horizontal: {
485
+ flexDirection: 'row',
486
+ width: '100%',
487
+ },
488
+ vertical: {
489
+ flexDirection: 'column',
490
+ height: '100%',
491
+ },
492
+ },
493
+ spacing: {
494
+ none: {
495
+ gap: 0,
496
+ },
497
+ small: {
498
+ gap: theme.spacing?.sm || 8,
499
+ },
500
+ medium: {
501
+ gap: theme.spacing?.md || 12,
502
+ },
503
+ large: {
504
+ gap: theme.spacing?.lg || 16,
505
+ },
506
+ },
507
+ },
508
+ },
509
+
510
+ // Content styling for dividers with children
511
+ content: {
512
+ backgroundColor: theme.colors?.surface?.primary || '#ffffff',
513
+ color: theme.colors?.text?.secondary || theme.palettes?.gray?.[600] || '#4b5563',
514
+ fontSize: theme.typography?.fontSize?.sm || 14,
515
+
516
+ variants: {
517
+ orientation: {
518
+ horizontal: {
519
+ paddingHorizontal: theme.spacing?.sm || 8,
520
+ },
521
+ vertical: {
522
+ paddingVertical: theme.spacing?.sm || 8,
523
+ },
524
+ },
525
+ },
526
+ },
527
+
528
+ // Line segments for dividers with content
529
+ line: {
530
+ backgroundColor: theme.colors?.border?.secondary || theme.palettes?.gray?.[300] || '#d1d5db',
531
+ flex: 1,
532
+
533
+ variants: {
534
+ orientation: {
535
+ horizontal: {
536
+ height: 1,
537
+ },
538
+ vertical: {
539
+ width: 1,
540
+ },
541
+ },
542
+ thickness: {
543
+ thin: {
544
+ // Handled by orientation compound variants
545
+ },
546
+ medium: {
547
+ // Handled by orientation compound variants
548
+ },
549
+ thick: {
550
+ // Handled by orientation compound variants
551
+ },
552
+ },
553
+ },
554
+
555
+ compoundVariants: [
556
+ // Horizontal thickness for line segments
557
+ {
558
+ orientation: 'horizontal',
559
+ thickness: 'thin',
560
+ styles: {
561
+ height: 1,
562
+ },
563
+ },
564
+ {
565
+ orientation: 'horizontal',
566
+ thickness: 'medium',
567
+ styles: {
568
+ height: 2,
569
+ },
570
+ },
571
+ {
572
+ orientation: 'horizontal',
573
+ thickness: 'thick',
574
+ styles: {
575
+ height: 4,
576
+ },
577
+ },
578
+ // Vertical thickness for line segments
579
+ {
580
+ orientation: 'vertical',
581
+ thickness: 'thin',
582
+ styles: {
583
+ width: 1,
584
+ },
585
+ },
586
+ {
587
+ orientation: 'vertical',
588
+ thickness: 'medium',
589
+ styles: {
590
+ width: 2,
591
+ },
592
+ },
593
+ {
594
+ orientation: 'vertical',
595
+ thickness: 'thick',
596
+ styles: {
597
+ width: 4,
598
+ },
599
+ },
600
+ ],
601
+ },
602
602
  }));