strata-ui-react 0.1.10 → 0.1.12

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 (97) hide show
  1. package/dist/avatar-fallback.cjs +42 -0
  2. package/dist/avatar-fallback.js +42 -0
  3. package/dist/avatar-image.cjs +42 -0
  4. package/dist/avatar-image.js +42 -0
  5. package/dist/avatar.cjs +47 -0
  6. package/dist/avatar.js +47 -0
  7. package/dist/badge.cjs +63 -0
  8. package/dist/badge.js +63 -0
  9. package/dist/badge.types.cjs +100 -0
  10. package/dist/badge.types.js +100 -0
  11. package/dist/button.cjs +58 -0
  12. package/dist/button.js +58 -0
  13. package/dist/button.types.cjs +519 -0
  14. package/dist/button.types.js +519 -0
  15. package/dist/checkbox-indicator.cjs +36 -0
  16. package/dist/checkbox-indicator.js +36 -0
  17. package/dist/checkbox.cjs +84 -0
  18. package/dist/checkbox.js +84 -0
  19. package/dist/cn.cjs +6 -0
  20. package/dist/cn.js +6 -0
  21. package/dist/dialog-close.cjs +57 -0
  22. package/dist/dialog-close.js +57 -0
  23. package/dist/dialog-description.cjs +46 -0
  24. package/dist/dialog-description.js +46 -0
  25. package/dist/dialog-popup.cjs +72 -0
  26. package/dist/dialog-popup.js +72 -0
  27. package/dist/dialog-title.cjs +46 -0
  28. package/dist/dialog-title.js +46 -0
  29. package/dist/dialog-trigger.cjs +46 -0
  30. package/dist/dialog-trigger.js +46 -0
  31. package/dist/dialog.cjs +20 -0
  32. package/dist/dialog.js +20 -0
  33. package/dist/field-errors.cjs +63 -0
  34. package/dist/field-errors.js +63 -0
  35. package/dist/field-input.cjs +80 -0
  36. package/dist/field-input.js +80 -0
  37. package/dist/form-errors.cjs +73 -0
  38. package/dist/form-errors.js +73 -0
  39. package/dist/form-submit.cjs +65 -0
  40. package/dist/form-submit.js +65 -0
  41. package/dist/form.cjs +19 -0
  42. package/dist/form.js +19 -0
  43. package/dist/form.types.cjs +6 -0
  44. package/dist/form.types.js +3 -0
  45. package/dist/index.cjs +82 -0
  46. package/dist/index.d.cts +312 -0
  47. package/dist/index.d.ts +312 -1
  48. package/dist/index.js +42 -0
  49. package/dist/input.cjs +83 -0
  50. package/dist/input.js +83 -0
  51. package/dist/label.cjs +46 -0
  52. package/dist/label.js +46 -0
  53. package/dist/profile.cjs +127 -0
  54. package/dist/profile.js +127 -0
  55. package/dist/scroll-area.cjs +97 -0
  56. package/dist/scroll-area.js +97 -0
  57. package/dist/separator.cjs +45 -0
  58. package/dist/separator.js +45 -0
  59. package/dist/slider-handle.cjs +34 -0
  60. package/dist/slider-handle.js +34 -0
  61. package/dist/slider-segment.cjs +17 -0
  62. package/dist/slider-segment.js +17 -0
  63. package/dist/slider-tick-label.cjs +12 -0
  64. package/dist/slider-tick-label.js +12 -0
  65. package/dist/slider-tick.cjs +13 -0
  66. package/dist/slider-tick.js +13 -0
  67. package/dist/slider-track.cjs +12 -0
  68. package/dist/slider-track.js +12 -0
  69. package/dist/slider.cjs +69 -0
  70. package/dist/slider.js +69 -0
  71. package/dist/switch.cjs +71 -0
  72. package/dist/switch.js +71 -0
  73. package/dist/tabs-indicator.cjs +57 -0
  74. package/dist/tabs-indicator.js +57 -0
  75. package/dist/tabs-list.cjs +57 -0
  76. package/dist/tabs-list.js +57 -0
  77. package/dist/tabs-panel.cjs +40 -0
  78. package/dist/tabs-panel.js +40 -0
  79. package/dist/tabs-tab.cjs +36 -0
  80. package/dist/tabs-tab.js +36 -0
  81. package/dist/tabs.cjs +73 -0
  82. package/dist/tabs.js +73 -0
  83. package/dist/tabs.types.cjs +4 -0
  84. package/dist/tabs.types.js +4 -0
  85. package/dist/toast-provider.cjs +86 -0
  86. package/dist/toast-provider.js +86 -0
  87. package/dist/toast.cjs +40 -0
  88. package/dist/toast.js +40 -0
  89. package/dist/tooltip-context.cjs +56 -0
  90. package/dist/tooltip-context.js +56 -0
  91. package/dist/tooltip-trigger.cjs +29 -0
  92. package/dist/tooltip-trigger.js +29 -0
  93. package/dist/tooltip.cjs +29 -0
  94. package/dist/tooltip.js +29 -0
  95. package/package.json +18 -10
  96. package/dist/strata-ui-react.js +0 -13543
  97. package/dist/strata-ui-react.umd.cjs +0 -24
package/dist/button.types.cjs ADDED
@@ -0,0 +1,519 @@
1
+ let class_variance_authority = require("class-variance-authority");
2
+ const buttonVariants = (0, class_variance_authority.cva)("inline-flex items-center justify-center whitespace-nowrap rounded-full select-none transition-all disabled:pointer-events-none disabled:opacity-50 cursor-pointer", {
3
+ variants: {
4
+ tone: {
5
+ destructive: "",
6
+ glass: "",
7
+ neutral: "",
8
+ primary: "",
9
+ secondary: "",
10
+ success: "",
11
+ accent: "",
12
+ warning: ""
13
+ },
14
+ style: {
15
+ solid: "",
16
+ outline: "active:border-transparent",
17
+ ghost: ""
18
+ },
19
+ size: {
20
+ large: "h-2xl px-lg style-text-default-1 gap-xs [&>svg]:size-md",
21
+ medium: "h-xl px-md style-text-default-0 gap-2xs [&>svg]:size-sm",
22
+ small: "h-lg px-sm style-text-default--1 gap-3xs [&>svg]:size-xs",
23
+ iconLarge: "size-2xl p-0 [&>svg]:size-md",
24
+ iconMedium: "size-xl p-0 [&>svg]:size-sm",
25
+ iconSmall: "size-lg p-0 [&>svg]:size-xs"
26
+ }
27
+ },
28
+ defaultVariants: {
29
+ tone: "primary",
30
+ style: "solid",
31
+ size: "medium"
32
+ },
33
+ compoundVariants: [
34
+ {
35
+ tone: "primary",
36
+ style: "solid",
37
+ className: "bg-primary text-on-primary"
38
+ },
39
+ {
40
+ tone: "primary",
41
+ style: "solid",
42
+ size: ["small", "iconSmall"],
43
+ className: "raised-1 hover:raised-2 active:inset-shadow-1-shadow"
44
+ },
45
+ {
46
+ tone: "primary",
47
+ style: "solid",
48
+ size: ["medium", "iconMedium"],
49
+ className: "raised-2 hover:raised-4 active:inset-shadow-2-shadow"
50
+ },
51
+ {
52
+ tone: "primary",
53
+ style: "solid",
54
+ size: ["large", "iconLarge"],
55
+ className: "raised-4 hover:raised-8 active:inset-shadow-3-shadow"
56
+ },
57
+ {
58
+ tone: "primary",
59
+ style: "outline",
60
+ className: "border-primary text-primary hover:text-on-primary-container hover:bg-primary-container active:bg-transparent"
61
+ },
62
+ {
63
+ tone: "primary",
64
+ style: "outline",
65
+ size: ["small", "iconSmall"],
66
+ className: "border-1"
67
+ },
68
+ {
69
+ tone: "primary",
70
+ style: "outline",
71
+ size: ["medium", "iconMedium"],
72
+ className: "border-2"
73
+ },
74
+ {
75
+ tone: "primary",
76
+ style: "outline",
77
+ size: ["large", "iconLarge"],
78
+ className: "border-4"
79
+ },
80
+ {
81
+ tone: "primary",
82
+ style: "ghost",
83
+ className: "text-primary hover:surface-bright active:bg-surface-dim"
84
+ },
85
+ {
86
+ tone: "primary",
87
+ style: "ghost",
88
+ size: ["small", "iconSmall"],
89
+ className: "hover:raised-1 active:inset-shadow-1-shadow"
90
+ },
91
+ {
92
+ tone: "primary",
93
+ style: "ghost",
94
+ size: ["medium", "iconMedium"],
95
+ className: "hover:raised-2 active:inset-shadow-2-shadow"
96
+ },
97
+ {
98
+ tone: "primary",
99
+ style: "ghost",
100
+ size: ["large", "iconLarge"],
101
+ className: "hover:raised-4 active:inset-shadow-3-shadow"
102
+ },
103
+ {
104
+ tone: "secondary",
105
+ style: "solid",
106
+ className: "bg-secondary text-on-secondary"
107
+ },
108
+ {
109
+ tone: "secondary",
110
+ style: "solid",
111
+ size: ["small", "iconSmall"],
112
+ className: "raised-1 hover:raised-2 active:inset-shadow-1-shadow"
113
+ },
114
+ {
115
+ tone: "secondary",
116
+ style: "solid",
117
+ size: ["medium", "iconMedium"],
118
+ className: "raised-2 hover:raised-4 active:inset-shadow-2-shadow"
119
+ },
120
+ {
121
+ tone: "secondary",
122
+ style: "solid",
123
+ size: ["large", "iconLarge"],
124
+ className: "raised-4 hover:raised-8 active:inset-shadow-3-shadow"
125
+ },
126
+ {
127
+ tone: "secondary",
128
+ style: "outline",
129
+ className: "border-secondary text-secondary hover:text-on-secondary-container hover:bg-secondary-container active:bg-transparent"
130
+ },
131
+ {
132
+ tone: "secondary",
133
+ style: "outline",
134
+ size: ["small", "iconSmall"],
135
+ className: "border-1"
136
+ },
137
+ {
138
+ tone: "secondary",
139
+ style: "outline",
140
+ size: ["medium", "iconMedium"],
141
+ className: "border-2"
142
+ },
143
+ {
144
+ tone: "secondary",
145
+ style: "outline",
146
+ size: ["large", "iconLarge"],
147
+ className: "border-4"
148
+ },
149
+ {
150
+ tone: "secondary",
151
+ style: "ghost",
152
+ className: "text-secondary hover:surface-bright active:bg-surface-dim"
153
+ },
154
+ {
155
+ tone: "secondary",
156
+ style: "ghost",
157
+ size: ["small", "iconSmall"],
158
+ className: "hover:raised-1 active:inset-shadow-1-shadow"
159
+ },
160
+ {
161
+ tone: "secondary",
162
+ style: "ghost",
163
+ size: ["medium", "iconMedium"],
164
+ className: "hover:raised-2 active:inset-shadow-2-shadow"
165
+ },
166
+ {
167
+ tone: "secondary",
168
+ style: "ghost",
169
+ size: ["large", "iconLarge"],
170
+ className: "hover:raised-4 active:inset-shadow-3-shadow"
171
+ },
172
+ {
173
+ tone: "accent",
174
+ style: "solid",
175
+ className: "bg-accent text-on-accent"
176
+ },
177
+ {
178
+ tone: "accent",
179
+ style: "solid",
180
+ size: ["small", "iconSmall"],
181
+ className: "raised-1 hover:raised-2 active:inset-shadow-1-shadow"
182
+ },
183
+ {
184
+ tone: "accent",
185
+ style: "solid",
186
+ size: ["medium", "iconMedium"],
187
+ className: "raised-2 hover:raised-4 active:inset-shadow-2-shadow"
188
+ },
189
+ {
190
+ tone: "accent",
191
+ style: "solid",
192
+ size: ["large", "iconLarge"],
193
+ className: "raised-4 hover:raised-8 active:inset-shadow-3-shadow"
194
+ },
195
+ {
196
+ tone: "accent",
197
+ style: "outline",
198
+ className: "border-accent text-accent hover:text-on-accent-container hover:bg-accent-container active:bg-transparent"
199
+ },
200
+ {
201
+ tone: "accent",
202
+ style: "outline",
203
+ size: ["small", "iconSmall"],
204
+ className: "border-1"
205
+ },
206
+ {
207
+ tone: "accent",
208
+ style: "outline",
209
+ size: ["medium", "iconMedium"],
210
+ className: "border-2"
211
+ },
212
+ {
213
+ tone: "accent",
214
+ style: "outline",
215
+ size: ["large", "iconLarge"],
216
+ className: "border-4"
217
+ },
218
+ {
219
+ tone: "accent",
220
+ style: "ghost",
221
+ className: "text-accent hover:surface-bright active:bg-surface-dim"
222
+ },
223
+ {
224
+ tone: "accent",
225
+ style: "ghost",
226
+ size: ["small", "iconSmall"],
227
+ className: "hover:raised-1 active:inset-shadow-1-shadow"
228
+ },
229
+ {
230
+ tone: "accent",
231
+ style: "ghost",
232
+ size: ["medium", "iconMedium"],
233
+ className: "hover:raised-2 active:inset-shadow-2-shadow"
234
+ },
235
+ {
236
+ tone: "accent",
237
+ style: "ghost",
238
+ size: ["large", "iconLarge"],
239
+ className: "hover:raised-4 active:inset-shadow-3-shadow"
240
+ },
241
+ {
242
+ tone: "success",
243
+ style: "solid",
244
+ className: "bg-success text-on-success"
245
+ },
246
+ {
247
+ tone: "success",
248
+ style: "solid",
249
+ size: ["small", "iconSmall"],
250
+ className: "raised-1 hover:raised-2 active:inset-shadow-1-shadow"
251
+ },
252
+ {
253
+ tone: "success",
254
+ style: "solid",
255
+ size: ["medium", "iconMedium"],
256
+ className: "raised-2 hover:raised-4 active:inset-shadow-2-shadow"
257
+ },
258
+ {
259
+ tone: "success",
260
+ style: "solid",
261
+ size: ["large", "iconLarge"],
262
+ className: "raised-4 hover:raised-8 active:inset-shadow-3-shadow"
263
+ },
264
+ {
265
+ tone: "success",
266
+ style: "outline",
267
+ className: "border-success text-success hover:text-on-success-container hover:bg-success-container active:bg-transparent"
268
+ },
269
+ {
270
+ tone: "success",
271
+ style: "outline",
272
+ size: ["small", "iconSmall"],
273
+ className: "border-1"
274
+ },
275
+ {
276
+ tone: "success",
277
+ style: "outline",
278
+ size: ["medium", "iconMedium"],
279
+ className: "border-2"
280
+ },
281
+ {
282
+ tone: "success",
283
+ style: "outline",
284
+ size: ["large", "iconLarge"],
285
+ className: "border-4"
286
+ },
287
+ {
288
+ tone: "success",
289
+ style: "ghost",
290
+ className: "text-success hover:surface-bright active:bg-surface-dim"
291
+ },
292
+ {
293
+ tone: "success",
294
+ style: "ghost",
295
+ size: ["small", "iconSmall"],
296
+ className: "hover:raised-1 active:inset-shadow-1-shadow"
297
+ },
298
+ {
299
+ tone: "success",
300
+ style: "ghost",
301
+ size: ["medium", "iconMedium"],
302
+ className: "hover:raised-2 active:inset-shadow-2-shadow"
303
+ },
304
+ {
305
+ tone: "success",
306
+ style: "ghost",
307
+ size: ["large", "iconLarge"],
308
+ className: "hover:raised-4 active:inset-shadow-3-shadow"
309
+ },
310
+ {
311
+ tone: "warning",
312
+ style: "solid",
313
+ className: "bg-warning text-on-warning"
314
+ },
315
+ {
316
+ tone: "warning",
317
+ style: "solid",
318
+ size: ["small", "iconSmall"],
319
+ className: "raised-1 hover:raised-2 active:inset-shadow-1-shadow"
320
+ },
321
+ {
322
+ tone: "warning",
323
+ style: "solid",
324
+ size: ["medium", "iconMedium"],
325
+ className: "raised-2 hover:raised-4 active:inset-shadow-2-shadow"
326
+ },
327
+ {
328
+ tone: "warning",
329
+ style: "solid",
330
+ size: ["large", "iconLarge"],
331
+ className: "raised-4 hover:raised-8 active:inset-shadow-3-shadow"
332
+ },
333
+ {
334
+ tone: "warning",
335
+ style: "outline",
336
+ className: "border-warning text-warning hover:text-on-warning-container hover:bg-warning-container active:bg-transparent"
337
+ },
338
+ {
339
+ tone: "warning",
340
+ style: "outline",
341
+ size: ["small", "iconSmall"],
342
+ className: "border-1"
343
+ },
344
+ {
345
+ tone: "warning",
346
+ style: "outline",
347
+ size: ["medium", "iconMedium"],
348
+ className: "border-2"
349
+ },
350
+ {
351
+ tone: "warning",
352
+ style: "outline",
353
+ size: ["large", "iconLarge"],
354
+ className: "border-4"
355
+ },
356
+ {
357
+ tone: "warning",
358
+ style: "ghost",
359
+ className: "text-warning hover:surface-bright active:bg-surface-dim"
360
+ },
361
+ {
362
+ tone: "warning",
363
+ style: "ghost",
364
+ size: ["small", "iconSmall"],
365
+ className: "hover:raised-1 active:inset-shadow-1-shadow"
366
+ },
367
+ {
368
+ tone: "warning",
369
+ style: "ghost",
370
+ size: ["medium", "iconMedium"],
371
+ className: "hover:raised-2 active:inset-shadow-2-shadow"
372
+ },
373
+ {
374
+ tone: "warning",
375
+ style: "ghost",
376
+ size: ["large", "iconLarge"],
377
+ className: "hover:raised-4 active:inset-shadow-3-shadow"
378
+ },
379
+ {
380
+ tone: "destructive",
381
+ style: "solid",
382
+ className: "bg-error text-on-error"
383
+ },
384
+ {
385
+ tone: "destructive",
386
+ style: "solid",
387
+ size: ["small", "iconSmall"],
388
+ className: "raised-1 hover:raised-2 active:inset-shadow-1-shadow"
389
+ },
390
+ {
391
+ tone: "destructive",
392
+ style: "solid",
393
+ size: ["medium", "iconMedium"],
394
+ className: "raised-2 hover:raised-4 active:inset-shadow-2-shadow"
395
+ },
396
+ {
397
+ tone: "destructive",
398
+ style: "solid",
399
+ size: ["large", "iconLarge"],
400
+ className: "raised-4 hover:raised-8 active:inset-shadow-3-shadow"
401
+ },
402
+ {
403
+ tone: "destructive",
404
+ style: "outline",
405
+ className: "border-error text-error hover:text-on-error-container hover:bg-error-container active:bg-transparent"
406
+ },
407
+ {
408
+ tone: "destructive",
409
+ style: "outline",
410
+ size: ["small", "iconSmall"],
411
+ className: "border-1"
412
+ },
413
+ {
414
+ tone: "destructive",
415
+ style: "outline",
416
+ size: ["medium", "iconMedium"],
417
+ className: "border-2"
418
+ },
419
+ {
420
+ tone: "destructive",
421
+ style: "outline",
422
+ size: ["large", "iconLarge"],
423
+ className: "border-4"
424
+ },
425
+ {
426
+ tone: "destructive",
427
+ style: "ghost",
428
+ className: "text-error hover:surface-bright active:bg-surface-dim"
429
+ },
430
+ {
431
+ tone: "destructive",
432
+ style: "ghost",
433
+ size: ["small", "iconSmall"],
434
+ className: "hover:raised-1 active:inset-shadow-1-shadow"
435
+ },
436
+ {
437
+ tone: "destructive",
438
+ style: "ghost",
439
+ size: ["medium", "iconMedium"],
440
+ className: "hover:raised-2 active:inset-shadow-2-shadow"
441
+ },
442
+ {
443
+ tone: "destructive",
444
+ style: "ghost",
445
+ size: ["large", "iconLarge"],
446
+ className: "hover:raised-4 active:inset-shadow-3-shadow"
447
+ },
448
+ {
449
+ tone: "neutral",
450
+ style: "solid",
451
+ className: "bg-surface-container text-on-surface"
452
+ },
453
+ {
454
+ tone: "neutral",
455
+ style: "solid",
456
+ size: ["small", "iconSmall"],
457
+ className: "raised-1 hover:raised-2 active:inset-shadow-1-shadow"
458
+ },
459
+ {
460
+ tone: "neutral",
461
+ style: "solid",
462
+ size: ["medium", "iconMedium"],
463
+ className: "raised-2 hover:raised-4 active:inset-shadow-2-shadow"
464
+ },
465
+ {
466
+ tone: "neutral",
467
+ style: "solid",
468
+ size: ["large", "iconLarge"],
469
+ className: "raised-4 hover:raised-8 active:inset-shadow-3-shadow"
470
+ },
471
+ {
472
+ tone: "neutral",
473
+ style: "outline",
474
+ className: "border-outline text-on-surface hover:text-on-surface hover:bg-surface-container-high active:bg-transparent"
475
+ },
476
+ {
477
+ tone: "neutral",
478
+ style: "outline",
479
+ size: ["small", "iconSmall"],
480
+ className: "border-1"
481
+ },
482
+ {
483
+ tone: "neutral",
484
+ style: "outline",
485
+ size: ["medium", "iconMedium"],
486
+ className: "border-2"
487
+ },
488
+ {
489
+ tone: "neutral",
490
+ style: "outline",
491
+ size: ["large", "iconLarge"],
492
+ className: "border-4"
493
+ },
494
+ {
495
+ tone: "neutral",
496
+ style: "ghost",
497
+ className: "text-on-surface hover:surface-bright active:bg-surface-dim"
498
+ },
499
+ {
500
+ tone: "neutral",
501
+ style: "ghost",
502
+ size: ["small", "iconSmall"],
503
+ className: "hover:raised-1 active:inset-shadow-1-shadow"
504
+ },
505
+ {
506
+ tone: "neutral",
507
+ style: "ghost",
508
+ size: ["medium", "iconMedium"],
509
+ className: "hover:raised-2 active:inset-shadow-2-shadow"
510
+ },
511
+ {
512
+ tone: "neutral",
513
+ style: "ghost",
514
+ size: ["large", "iconLarge"],
515
+ className: "hover:raised-4 active:inset-shadow-3-shadow"
516
+ }
517
+ ]
518
+ });
519
+ exports.buttonVariants = buttonVariants;