@highstacklabs2026/ui 1.1.1 → 1.2.0

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.
package/styles.css CHANGED
@@ -7,72 +7,188 @@
7
7
  'Noto Color Emoji';
8
8
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New',
9
9
  monospace;
10
+ --color-amber-50: oklch(98.7% 0.022 95.277);
11
+ --color-amber-200: oklch(92.4% 0.12 95.746);
12
+ --color-amber-400: oklch(82.8% 0.189 84.429);
13
+ --color-amber-500: oklch(76.9% 0.188 70.08);
14
+ --color-amber-600: oklch(66.6% 0.179 58.318);
15
+ --color-emerald-50: oklch(97.9% 0.021 166.113);
16
+ --color-emerald-200: oklch(90.5% 0.093 164.15);
10
17
  --color-emerald-400: oklch(76.5% 0.177 163.223);
18
+ --color-emerald-500: oklch(69.6% 0.17 162.48);
19
+ --color-emerald-600: oklch(59.6% 0.145 163.225);
11
20
  --color-zinc-100: oklch(96.7% 0.001 286.375);
12
21
  --color-zinc-200: oklch(92% 0.004 286.32);
13
22
  --color-zinc-400: oklch(70.5% 0.015 286.067);
14
- --color-zinc-600: oklch(44.2% 0.017 285.786);
15
- --color-zinc-700: oklch(37% 0.013 285.805);
23
+ --color-zinc-500: oklch(55.2% 0.016 285.938);
16
24
  --color-zinc-800: oklch(27.4% 0.006 286.033);
17
25
  --color-zinc-900: oklch(21% 0.006 285.885);
18
26
  --color-zinc-950: oklch(14.1% 0.005 285.823);
19
27
  --color-black: #000;
20
28
  --color-white: #fff;
21
29
  --spacing: 0.25rem;
30
+ --container-xs: 20rem;
31
+ --container-sm: 24rem;
32
+ --container-md: 28rem;
33
+ --container-lg: 32rem;
34
+ --container-2xl: 42rem;
22
35
  --container-3xl: 48rem;
36
+ --container-5xl: 64rem;
23
37
  --text-xs: 0.75rem;
24
38
  --text-xs--line-height: calc(1 / 0.75);
25
39
  --text-sm: 0.875rem;
26
40
  --text-sm--line-height: calc(1.25 / 0.875);
41
+ --text-base: 1rem;
42
+ --text-base--line-height: calc(1.5 / 1);
27
43
  --text-lg: 1.125rem;
28
44
  --text-lg--line-height: calc(1.75 / 1.125);
29
45
  --text-2xl: 1.5rem;
30
46
  --text-2xl--line-height: calc(2 / 1.5);
47
+ --text-3xl: 1.875rem;
48
+ --text-3xl--line-height: calc(2.25 / 1.875);
31
49
  --font-weight-normal: 400;
32
50
  --font-weight-medium: 500;
33
51
  --font-weight-semibold: 600;
52
+ --font-weight-bold: 700;
34
53
  --tracking-tight: -0.025em;
54
+ --tracking-wide: 0.025em;
35
55
  --tracking-widest: 0.1em;
56
+ --leading-tight: 1.25;
36
57
  --leading-relaxed: 1.625;
58
+ --radius-sm: 0.25rem;
37
59
  --radius-md: 0.375rem;
60
+ --radius-lg: 0.5rem;
38
61
  --radius-2xl: 1rem;
62
+ --ease-out: cubic-bezier(0, 0, 0.2, 1);
39
63
  --animate-spin: spin 1s linear infinite;
64
+ --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
65
+ --blur-md: 12px;
40
66
  --blur-2xl: 40px;
41
67
  --default-transition-duration: 150ms;
42
68
  --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
43
69
  }
44
70
  }
45
71
  @layer utilities {
72
+ .pointer-events-none {
73
+ pointer-events: none;
74
+ }
75
+ .visible {
76
+ visibility: visible;
77
+ }
46
78
  .absolute {
47
79
  position: absolute;
48
80
  }
81
+ .fixed {
82
+ position: fixed;
83
+ }
49
84
  .relative {
50
85
  position: relative;
51
86
  }
87
+ .sticky {
88
+ position: sticky;
89
+ }
52
90
  .inset-0 {
53
91
  inset: calc(var(--spacing) * 0);
54
92
  }
55
93
  .start {
56
94
  inset-inline-start: var(--spacing);
57
95
  }
96
+ .end {
97
+ inset-inline-end: var(--spacing);
98
+ }
99
+ .top-0 {
100
+ top: calc(var(--spacing) * 0);
101
+ }
58
102
  .top-3 {
59
103
  top: calc(var(--spacing) * 3);
60
104
  }
105
+ .top-full {
106
+ top: 100%;
107
+ }
108
+ .right-0 {
109
+ right: calc(var(--spacing) * 0);
110
+ }
61
111
  .right-3 {
62
112
  right: calc(var(--spacing) * 3);
63
113
  }
114
+ .bottom-0 {
115
+ bottom: calc(var(--spacing) * 0);
116
+ }
117
+ .bottom-full {
118
+ bottom: 100%;
119
+ }
120
+ .left-0 {
121
+ left: calc(var(--spacing) * 0);
122
+ }
123
+ .left-1\/2 {
124
+ left: calc(1 / 2 * 100%);
125
+ }
126
+ .z-20 {
127
+ z-index: 20;
128
+ }
129
+ .z-50 {
130
+ z-index: 50;
131
+ }
132
+ .z-\[100\] {
133
+ z-index: 100;
134
+ }
135
+ .m-0 {
136
+ margin: calc(var(--spacing) * 0);
137
+ }
138
+ .-mx-1 {
139
+ margin-inline: calc(var(--spacing) * -1);
140
+ }
141
+ .mx-1\.5 {
142
+ margin-inline: calc(var(--spacing) * 1.5);
143
+ }
64
144
  .mx-auto {
65
145
  margin-inline: auto;
66
146
  }
147
+ .my-1 {
148
+ margin-block: calc(var(--spacing) * 1);
149
+ }
150
+ .my-6 {
151
+ margin-block: calc(var(--spacing) * 6);
152
+ }
153
+ .-mt-0\.5 {
154
+ margin-top: calc(var(--spacing) * -0.5);
155
+ }
156
+ .-mt-px {
157
+ margin-top: -1px;
158
+ }
159
+ .mt-0\.5 {
160
+ margin-top: calc(var(--spacing) * 0.5);
161
+ }
162
+ .mt-1 {
163
+ margin-top: calc(var(--spacing) * 1);
164
+ }
67
165
  .mt-1\.5 {
68
166
  margin-top: calc(var(--spacing) * 1.5);
69
167
  }
168
+ .mt-2 {
169
+ margin-top: calc(var(--spacing) * 2);
170
+ }
70
171
  .mt-3 {
71
172
  margin-top: calc(var(--spacing) * 3);
72
173
  }
73
174
  .mt-4 {
74
175
  margin-top: calc(var(--spacing) * 4);
75
176
  }
177
+ .-mr-0\.5 {
178
+ margin-right: calc(var(--spacing) * -0.5);
179
+ }
180
+ .-mr-1 {
181
+ margin-right: calc(var(--spacing) * -1);
182
+ }
183
+ .-mb-px {
184
+ margin-bottom: -1px;
185
+ }
186
+ .mb-1\.5 {
187
+ margin-bottom: calc(var(--spacing) * 1.5);
188
+ }
189
+ .mb-2 {
190
+ margin-bottom: calc(var(--spacing) * 2);
191
+ }
76
192
  .mb-3 {
77
193
  margin-bottom: calc(var(--spacing) * 3);
78
194
  }
@@ -88,12 +204,62 @@
88
204
  .mb-16 {
89
205
  margin-bottom: calc(var(--spacing) * 16);
90
206
  }
207
+ .-ml-2 {
208
+ margin-left: calc(var(--spacing) * -2);
209
+ }
210
+ .ml-6 {
211
+ margin-left: calc(var(--spacing) * 6);
212
+ }
213
+ .block {
214
+ display: block;
215
+ }
91
216
  .flex {
92
217
  display: flex;
93
218
  }
219
+ .grid {
220
+ display: grid;
221
+ }
222
+ .hidden {
223
+ display: none;
224
+ }
225
+ .inline-block {
226
+ display: inline-block;
227
+ }
94
228
  .inline-flex {
95
229
  display: inline-flex;
96
230
  }
231
+ .size-1\.5 {
232
+ width: calc(var(--spacing) * 1.5);
233
+ height: calc(var(--spacing) * 1.5);
234
+ }
235
+ .size-2 {
236
+ width: calc(var(--spacing) * 2);
237
+ height: calc(var(--spacing) * 2);
238
+ }
239
+ .size-2\.5 {
240
+ width: calc(var(--spacing) * 2.5);
241
+ height: calc(var(--spacing) * 2.5);
242
+ }
243
+ .size-3 {
244
+ width: calc(var(--spacing) * 3);
245
+ height: calc(var(--spacing) * 3);
246
+ }
247
+ .size-3\.5 {
248
+ width: calc(var(--spacing) * 3.5);
249
+ height: calc(var(--spacing) * 3.5);
250
+ }
251
+ .size-3\/5 {
252
+ width: calc(3 / 5 * 100%);
253
+ height: calc(3 / 5 * 100%);
254
+ }
255
+ .size-4 {
256
+ width: calc(var(--spacing) * 4);
257
+ height: calc(var(--spacing) * 4);
258
+ }
259
+ .size-5 {
260
+ width: calc(var(--spacing) * 5);
261
+ height: calc(var(--spacing) * 5);
262
+ }
97
263
  .size-6 {
98
264
  width: calc(var(--spacing) * 6);
99
265
  height: calc(var(--spacing) * 6);
@@ -102,13 +268,55 @@
102
268
  width: calc(var(--spacing) * 7);
103
269
  height: calc(var(--spacing) * 7);
104
270
  }
271
+ .size-8 {
272
+ width: calc(var(--spacing) * 8);
273
+ height: calc(var(--spacing) * 8);
274
+ }
105
275
  .size-9 {
106
276
  width: calc(var(--spacing) * 9);
107
277
  height: calc(var(--spacing) * 9);
108
278
  }
279
+ .size-10 {
280
+ width: calc(var(--spacing) * 10);
281
+ height: calc(var(--spacing) * 10);
282
+ }
283
+ .size-12 {
284
+ width: calc(var(--spacing) * 12);
285
+ height: calc(var(--spacing) * 12);
286
+ }
287
+ .size-14 {
288
+ width: calc(var(--spacing) * 14);
289
+ height: calc(var(--spacing) * 14);
290
+ }
291
+ .size-16 {
292
+ width: calc(var(--spacing) * 16);
293
+ height: calc(var(--spacing) * 16);
294
+ }
295
+ .size-full {
296
+ width: 100%;
297
+ height: 100%;
298
+ }
299
+ .h-1 {
300
+ height: calc(var(--spacing) * 1);
301
+ }
302
+ .h-2 {
303
+ height: calc(var(--spacing) * 2);
304
+ }
305
+ .h-3 {
306
+ height: calc(var(--spacing) * 3);
307
+ }
109
308
  .h-4 {
110
309
  height: calc(var(--spacing) * 4);
111
310
  }
311
+ .h-5 {
312
+ height: calc(var(--spacing) * 5);
313
+ }
314
+ .h-6 {
315
+ height: calc(var(--spacing) * 6);
316
+ }
317
+ .h-7 {
318
+ height: calc(var(--spacing) * 7);
319
+ }
112
320
  .h-8 {
113
321
  height: calc(var(--spacing) * 8);
114
322
  }
@@ -118,54 +326,194 @@
118
326
  .h-10 {
119
327
  height: calc(var(--spacing) * 10);
120
328
  }
329
+ .h-full {
330
+ height: 100%;
331
+ }
121
332
  .h-px {
122
333
  height: 1px;
123
334
  }
124
335
  .h-screen {
125
336
  height: 100vh;
126
337
  }
338
+ .max-h-60 {
339
+ max-height: calc(var(--spacing) * 60);
340
+ }
127
341
  .max-h-80 {
128
342
  max-height: calc(var(--spacing) * 80);
129
343
  }
130
- .max-h-96 {
131
- max-height: calc(var(--spacing) * 96);
344
+ .min-h-0 {
345
+ min-height: calc(var(--spacing) * 0);
346
+ }
347
+ .min-h-6 {
348
+ min-height: calc(var(--spacing) * 6);
349
+ }
350
+ .min-h-32 {
351
+ min-height: calc(var(--spacing) * 32);
132
352
  }
133
353
  .min-h-screen {
134
354
  min-height: 100vh;
135
355
  }
356
+ .w-2\/5 {
357
+ width: calc(2 / 5 * 100%);
358
+ }
136
359
  .w-4 {
137
360
  width: calc(var(--spacing) * 4);
138
361
  }
362
+ .w-7 {
363
+ width: calc(var(--spacing) * 7);
364
+ }
365
+ .w-9 {
366
+ width: calc(var(--spacing) * 9);
367
+ }
368
+ .w-10 {
369
+ width: calc(var(--spacing) * 10);
370
+ }
371
+ .w-20 {
372
+ width: calc(var(--spacing) * 20);
373
+ }
139
374
  .w-52 {
140
375
  width: calc(var(--spacing) * 52);
141
376
  }
377
+ .w-60 {
378
+ width: calc(var(--spacing) * 60);
379
+ }
380
+ .w-80 {
381
+ width: calc(var(--spacing) * 80);
382
+ }
383
+ .w-fit {
384
+ width: fit-content;
385
+ }
142
386
  .w-full {
143
387
  width: 100%;
144
388
  }
389
+ .max-w-2xl {
390
+ max-width: var(--container-2xl);
391
+ }
145
392
  .max-w-3xl {
146
393
  max-width: var(--container-3xl);
147
394
  }
395
+ .max-w-5xl {
396
+ max-width: var(--container-5xl);
397
+ }
398
+ .max-w-\[calc\(100vw-2rem\)\] {
399
+ max-width: calc(100vw - 2rem);
400
+ }
401
+ .max-w-lg {
402
+ max-width: var(--container-lg);
403
+ }
404
+ .max-w-md {
405
+ max-width: var(--container-md);
406
+ }
407
+ .max-w-sm {
408
+ max-width: var(--container-sm);
409
+ }
410
+ .max-w-xs {
411
+ max-width: var(--container-xs);
412
+ }
413
+ .min-w-0 {
414
+ min-width: calc(var(--spacing) * 0);
415
+ }
416
+ .min-w-48 {
417
+ min-width: calc(var(--spacing) * 48);
418
+ }
148
419
  .flex-1 {
149
420
  flex: 1;
150
421
  }
151
422
  .shrink-0 {
152
423
  flex-shrink: 0;
153
424
  }
425
+ .grow {
426
+ flex-grow: 1;
427
+ }
428
+ .-translate-x-1\/2 {
429
+ --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
430
+ translate: var(--tw-translate-x) var(--tw-translate-y);
431
+ }
432
+ .translate-x-0\.5 {
433
+ --tw-translate-x: calc(var(--spacing) * 0.5);
434
+ translate: var(--tw-translate-x) var(--tw-translate-y);
435
+ }
436
+ .translate-x-3\.5 {
437
+ --tw-translate-x: calc(var(--spacing) * 3.5);
438
+ translate: var(--tw-translate-x) var(--tw-translate-y);
439
+ }
440
+ .translate-x-4 {
441
+ --tw-translate-x: calc(var(--spacing) * 4);
442
+ translate: var(--tw-translate-x) var(--tw-translate-y);
443
+ }
444
+ .translate-y-2 {
445
+ --tw-translate-y: calc(var(--spacing) * 2);
446
+ translate: var(--tw-translate-x) var(--tw-translate-y);
447
+ }
448
+ .scale-150 {
449
+ --tw-scale-x: 150%;
450
+ --tw-scale-y: 150%;
451
+ --tw-scale-z: 150%;
452
+ scale: var(--tw-scale-x) var(--tw-scale-y);
453
+ }
454
+ .rotate-45 {
455
+ rotate: 45deg;
456
+ }
457
+ .rotate-180 {
458
+ rotate: 180deg;
459
+ }
460
+ .transform {
461
+ transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
462
+ }
463
+ .animate-pulse {
464
+ animation: var(--animate-pulse);
465
+ }
154
466
  .animate-spin {
155
467
  animation: var(--animate-spin);
156
468
  }
469
+ .cursor-not-allowed {
470
+ cursor: not-allowed;
471
+ }
157
472
  .cursor-pointer {
158
473
  cursor: pointer;
159
474
  }
475
+ .resize-none {
476
+ resize: none;
477
+ }
478
+ .resize-y {
479
+ resize: vertical;
480
+ }
481
+ .scroll-mt-28 {
482
+ scroll-margin-top: calc(var(--spacing) * 28);
483
+ }
484
+ .grid-cols-2 {
485
+ grid-template-columns: repeat(2, minmax(0, 1fr));
486
+ }
487
+ .grid-cols-3 {
488
+ grid-template-columns: repeat(3, minmax(0, 1fr));
489
+ }
490
+ .grid-rows-\[0fr\] {
491
+ grid-template-rows: 0fr;
492
+ }
493
+ .grid-rows-\[1fr\] {
494
+ grid-template-rows: 1fr;
495
+ }
160
496
  .flex-col {
161
497
  flex-direction: column;
162
498
  }
499
+ .flex-col-reverse {
500
+ flex-direction: column-reverse;
501
+ }
502
+ .flex-row {
503
+ flex-direction: row;
504
+ }
163
505
  .flex-wrap {
164
506
  flex-wrap: wrap;
165
507
  }
166
508
  .items-center {
167
509
  align-items: center;
168
510
  }
511
+ .items-end {
512
+ align-items: flex-end;
513
+ }
514
+ .items-start {
515
+ align-items: flex-start;
516
+ }
169
517
  .justify-between {
170
518
  justify-content: space-between;
171
519
  }
@@ -175,6 +523,9 @@
175
523
  .gap-0\.5 {
176
524
  gap: calc(var(--spacing) * 0.5);
177
525
  }
526
+ .gap-1 {
527
+ gap: calc(var(--spacing) * 1);
528
+ }
178
529
  .gap-1\.5 {
179
530
  gap: calc(var(--spacing) * 1.5);
180
531
  }
@@ -187,6 +538,26 @@
187
538
  .gap-3 {
188
539
  gap: calc(var(--spacing) * 3);
189
540
  }
541
+ .gap-4 {
542
+ gap: calc(var(--spacing) * 4);
543
+ }
544
+ .gap-6 {
545
+ gap: calc(var(--spacing) * 6);
546
+ }
547
+ .space-y-1 {
548
+ :where(& > :not(:last-child)) {
549
+ --tw-space-y-reverse: 0;
550
+ margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));
551
+ margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
552
+ }
553
+ }
554
+ .space-y-2 {
555
+ :where(& > :not(:last-child)) {
556
+ --tw-space-y-reverse: 0;
557
+ margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
558
+ margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
559
+ }
560
+ }
190
561
  .space-y-3 {
191
562
  :where(& > :not(:last-child)) {
192
563
  --tw-space-y-reverse: 0;
@@ -201,6 +572,20 @@
201
572
  margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
202
573
  }
203
574
  }
575
+ .space-y-5 {
576
+ :where(& > :not(:last-child)) {
577
+ --tw-space-y-reverse: 0;
578
+ margin-block-start: calc(calc(var(--spacing) * 5) * var(--tw-space-y-reverse));
579
+ margin-block-end: calc(calc(var(--spacing) * 5) * calc(1 - var(--tw-space-y-reverse)));
580
+ }
581
+ }
582
+ .space-y-6 {
583
+ :where(& > :not(:last-child)) {
584
+ --tw-space-y-reverse: 0;
585
+ margin-block-start: calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));
586
+ margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
587
+ }
588
+ }
204
589
  .space-y-8 {
205
590
  :where(& > :not(:last-child)) {
206
591
  --tw-space-y-reverse: 0;
@@ -222,6 +607,35 @@
222
607
  margin-block-end: calc(calc(var(--spacing) * 14) * calc(1 - var(--tw-space-y-reverse)));
223
608
  }
224
609
  }
610
+ .space-y-24 {
611
+ :where(& > :not(:last-child)) {
612
+ --tw-space-y-reverse: 0;
613
+ margin-block-start: calc(calc(var(--spacing) * 24) * var(--tw-space-y-reverse));
614
+ margin-block-end: calc(calc(var(--spacing) * 24) * calc(1 - var(--tw-space-y-reverse)));
615
+ }
616
+ }
617
+ .gap-y-4 {
618
+ row-gap: calc(var(--spacing) * 4);
619
+ }
620
+ .divide-y {
621
+ :where(& > :not(:last-child)) {
622
+ --tw-divide-y-reverse: 0;
623
+ border-bottom-style: var(--tw-border-style);
624
+ border-top-style: var(--tw-border-style);
625
+ border-top-width: calc(1px * var(--tw-divide-y-reverse));
626
+ border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
627
+ }
628
+ }
629
+ .divide-\[var\(--color-border\)\] {
630
+ :where(& > :not(:last-child)) {
631
+ border-color: var(--color-border);
632
+ }
633
+ }
634
+ .truncate {
635
+ overflow: hidden;
636
+ text-overflow: ellipsis;
637
+ white-space: nowrap;
638
+ }
225
639
  .overflow-hidden {
226
640
  overflow: hidden;
227
641
  }
@@ -234,19 +648,45 @@
234
648
  .rounded-2xl {
235
649
  border-radius: var(--radius-2xl);
236
650
  }
651
+ .rounded-\[5px\] {
652
+ border-radius: 5px;
653
+ }
654
+ .rounded-\[6px\] {
655
+ border-radius: 6px;
656
+ }
657
+ .rounded-\[10px\] {
658
+ border-radius: 10px;
659
+ }
660
+ .rounded-\[calc\(var\(--radius\)-0\.25rem\)\] {
661
+ border-radius: calc(var(--radius) - 0.25rem);
662
+ }
237
663
  .rounded-\[var\(--radius\)\] {
238
664
  border-radius: var(--radius);
239
665
  }
240
666
  .rounded-full {
241
667
  border-radius: calc(infinity * 1px);
242
668
  }
669
+ .rounded-lg {
670
+ border-radius: var(--radius-lg);
671
+ }
243
672
  .rounded-md {
244
673
  border-radius: var(--radius-md);
245
674
  }
675
+ .rounded-sm {
676
+ border-radius: var(--radius-sm);
677
+ }
246
678
  .border {
247
679
  border-style: var(--tw-border-style);
248
680
  border-width: 1px;
249
681
  }
682
+ .border-0 {
683
+ border-style: var(--tw-border-style);
684
+ border-width: 0px;
685
+ }
686
+ .border-y {
687
+ border-block-style: var(--tw-border-style);
688
+ border-block-width: 1px;
689
+ }
250
690
  .border-t {
251
691
  border-top-style: var(--tw-border-style);
252
692
  border-top-width: 1px;
@@ -255,57 +695,294 @@
255
695
  border-right-style: var(--tw-border-style);
256
696
  border-right-width: 1px;
257
697
  }
698
+ .border-b {
699
+ border-bottom-style: var(--tw-border-style);
700
+ border-bottom-width: 1px;
701
+ }
702
+ .border-b-2 {
703
+ border-bottom-style: var(--tw-border-style);
704
+ border-bottom-width: 2px;
705
+ }
706
+ .border-l {
707
+ border-left-style: var(--tw-border-style);
708
+ border-left-width: 1px;
709
+ }
258
710
  .border-\[var\(--color-border\)\] {
259
711
  border-color: var(--color-border);
260
712
  }
713
+ .border-\[var\(--color-destructive\)\] {
714
+ border-color: var(--color-destructive);
715
+ }
716
+ .border-\[var\(--color-destructive\)\]\/25 {
717
+ border-color: var(--color-destructive);
718
+ @supports (color: color-mix(in lab, red, red)) {
719
+ border-color: color-mix(in oklab, var(--color-destructive) 25%, transparent);
720
+ }
721
+ }
722
+ .border-\[var\(--color-destructive\)\]\/40 {
723
+ border-color: var(--color-destructive);
724
+ @supports (color: color-mix(in lab, red, red)) {
725
+ border-color: color-mix(in oklab, var(--color-destructive) 40%, transparent);
726
+ }
727
+ }
728
+ .border-\[var\(--color-foreground\)\] {
729
+ border-color: var(--color-foreground);
730
+ }
261
731
  .border-\[var\(--color-input\)\] {
262
732
  border-color: var(--color-input);
263
733
  }
734
+ .border-\[var\(--color-primary\)\] {
735
+ border-color: var(--color-primary);
736
+ }
737
+ .border-\[var\(--color-primary\)\]\/20 {
738
+ border-color: var(--color-primary);
739
+ @supports (color: color-mix(in lab, red, red)) {
740
+ border-color: color-mix(in oklab, var(--color-primary) 20%, transparent);
741
+ }
742
+ }
743
+ .border-\[var\(--color-primary\)\]\/30 {
744
+ border-color: var(--color-primary);
745
+ @supports (color: color-mix(in lab, red, red)) {
746
+ border-color: color-mix(in oklab, var(--color-primary) 30%, transparent);
747
+ }
748
+ }
749
+ .border-\[var\(--color-primary\)\]\/40 {
750
+ border-color: var(--color-primary);
751
+ @supports (color: color-mix(in lab, red, red)) {
752
+ border-color: color-mix(in oklab, var(--color-primary) 40%, transparent);
753
+ }
754
+ }
755
+ .border-amber-200\/40 {
756
+ border-color: color-mix(in srgb, oklch(92.4% 0.12 95.746) 40%, transparent);
757
+ @supports (color: color-mix(in lab, red, red)) {
758
+ border-color: color-mix(in oklab, var(--color-amber-200) 40%, transparent);
759
+ }
760
+ }
761
+ .border-amber-500\/30 {
762
+ border-color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 30%, transparent);
763
+ @supports (color: color-mix(in lab, red, red)) {
764
+ border-color: color-mix(in oklab, var(--color-amber-500) 30%, transparent);
765
+ }
766
+ }
767
+ .border-amber-500\/40 {
768
+ border-color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 40%, transparent);
769
+ @supports (color: color-mix(in lab, red, red)) {
770
+ border-color: color-mix(in oklab, var(--color-amber-500) 40%, transparent);
771
+ }
772
+ }
773
+ .border-emerald-200\/40 {
774
+ border-color: color-mix(in srgb, oklch(90.5% 0.093 164.15) 40%, transparent);
775
+ @supports (color: color-mix(in lab, red, red)) {
776
+ border-color: color-mix(in oklab, var(--color-emerald-200) 40%, transparent);
777
+ }
778
+ }
779
+ .border-emerald-500\/25 {
780
+ border-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 25%, transparent);
781
+ @supports (color: color-mix(in lab, red, red)) {
782
+ border-color: color-mix(in oklab, var(--color-emerald-500) 25%, transparent);
783
+ }
784
+ }
785
+ .border-emerald-500\/40 {
786
+ border-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 40%, transparent);
787
+ @supports (color: color-mix(in lab, red, red)) {
788
+ border-color: color-mix(in oklab, var(--color-emerald-500) 40%, transparent);
789
+ }
790
+ }
791
+ .border-transparent {
792
+ border-color: transparent;
793
+ }
264
794
  .border-white\/15 {
265
795
  border-color: color-mix(in srgb, #fff 15%, transparent);
266
796
  @supports (color: color-mix(in lab, red, red)) {
267
797
  border-color: color-mix(in oklab, var(--color-white) 15%, transparent);
268
798
  }
269
799
  }
800
+ .border-white\/25 {
801
+ border-color: color-mix(in srgb, #fff 25%, transparent);
802
+ @supports (color: color-mix(in lab, red, red)) {
803
+ border-color: color-mix(in oklab, var(--color-white) 25%, transparent);
804
+ }
805
+ }
806
+ .border-white\/30 {
807
+ border-color: color-mix(in srgb, #fff 30%, transparent);
808
+ @supports (color: color-mix(in lab, red, red)) {
809
+ border-color: color-mix(in oklab, var(--color-white) 30%, transparent);
810
+ }
811
+ }
270
812
  .border-zinc-800 {
271
813
  border-color: var(--color-zinc-800);
272
814
  }
273
815
  .border-zinc-900 {
274
816
  border-color: var(--color-zinc-900);
275
817
  }
818
+ .bg-\[\#28c840\] {
819
+ background-color: #28c840;
820
+ }
821
+ .bg-\[\#febc2e\] {
822
+ background-color: #febc2e;
823
+ }
824
+ .bg-\[\#ff5f57\] {
825
+ background-color: #ff5f57;
826
+ }
276
827
  .bg-\[var\(--color-accent\)\] {
277
828
  background-color: var(--color-accent);
278
829
  }
279
830
  .bg-\[var\(--color-background\)\] {
280
831
  background-color: var(--color-background);
281
832
  }
833
+ .bg-\[var\(--color-background\)\]\/85 {
834
+ background-color: var(--color-background);
835
+ @supports (color: color-mix(in lab, red, red)) {
836
+ background-color: color-mix(in oklab, var(--color-background) 85%, transparent);
837
+ }
838
+ }
282
839
  .bg-\[var\(--color-border\)\] {
283
840
  background-color: var(--color-border);
284
841
  }
285
842
  .bg-\[var\(--color-destructive\)\] {
286
843
  background-color: var(--color-destructive);
287
844
  }
845
+ .bg-\[var\(--color-destructive\)\]\/10 {
846
+ background-color: var(--color-destructive);
847
+ @supports (color: color-mix(in lab, red, red)) {
848
+ background-color: color-mix(in oklab, var(--color-destructive) 10%, transparent);
849
+ }
850
+ }
851
+ .bg-\[var\(--color-destructive\)\]\/12 {
852
+ background-color: var(--color-destructive);
853
+ @supports (color: color-mix(in lab, red, red)) {
854
+ background-color: color-mix(in oklab, var(--color-destructive) 12%, transparent);
855
+ }
856
+ }
857
+ .bg-\[var\(--color-destructive\)\]\/25 {
858
+ background-color: var(--color-destructive);
859
+ @supports (color: color-mix(in lab, red, red)) {
860
+ background-color: color-mix(in oklab, var(--color-destructive) 25%, transparent);
861
+ }
862
+ }
863
+ .bg-\[var\(--color-foreground\)\] {
864
+ background-color: var(--color-foreground);
865
+ }
866
+ .bg-\[var\(--color-input\)\] {
867
+ background-color: var(--color-input);
868
+ }
288
869
  .bg-\[var\(--color-muted\)\] {
289
870
  background-color: var(--color-muted);
290
871
  }
872
+ .bg-\[var\(--color-muted\)\]\/40 {
873
+ background-color: var(--color-muted);
874
+ @supports (color: color-mix(in lab, red, red)) {
875
+ background-color: color-mix(in oklab, var(--color-muted) 40%, transparent);
876
+ }
877
+ }
291
878
  .bg-\[var\(--color-primary\)\] {
292
879
  background-color: var(--color-primary);
293
880
  }
881
+ .bg-\[var\(--color-primary\)\]\/5 {
882
+ background-color: var(--color-primary);
883
+ @supports (color: color-mix(in lab, red, red)) {
884
+ background-color: color-mix(in oklab, var(--color-primary) 5%, transparent);
885
+ }
886
+ }
887
+ .bg-\[var\(--color-primary\)\]\/8 {
888
+ background-color: var(--color-primary);
889
+ @supports (color: color-mix(in lab, red, red)) {
890
+ background-color: color-mix(in oklab, var(--color-primary) 8%, transparent);
891
+ }
892
+ }
893
+ .bg-\[var\(--color-primary\)\]\/12 {
894
+ background-color: var(--color-primary);
895
+ @supports (color: color-mix(in lab, red, red)) {
896
+ background-color: color-mix(in oklab, var(--color-primary) 12%, transparent);
897
+ }
898
+ }
899
+ .bg-\[var\(--color-primary\)\]\/20 {
900
+ background-color: var(--color-primary);
901
+ @supports (color: color-mix(in lab, red, red)) {
902
+ background-color: color-mix(in oklab, var(--color-primary) 20%, transparent);
903
+ }
904
+ }
294
905
  .bg-\[var\(--color-secondary\)\] {
295
906
  background-color: var(--color-secondary);
296
907
  }
908
+ .bg-amber-400\/25 {
909
+ background-color: color-mix(in srgb, oklch(82.8% 0.189 84.429) 25%, transparent);
910
+ @supports (color: color-mix(in lab, red, red)) {
911
+ background-color: color-mix(in oklab, var(--color-amber-400) 25%, transparent);
912
+ }
913
+ }
914
+ .bg-amber-500 {
915
+ background-color: var(--color-amber-500);
916
+ }
917
+ .bg-amber-500\/10 {
918
+ background-color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 10%, transparent);
919
+ @supports (color: color-mix(in lab, red, red)) {
920
+ background-color: color-mix(in oklab, var(--color-amber-500) 10%, transparent);
921
+ }
922
+ }
923
+ .bg-amber-500\/15 {
924
+ background-color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 15%, transparent);
925
+ @supports (color: color-mix(in lab, red, red)) {
926
+ background-color: color-mix(in oklab, var(--color-amber-500) 15%, transparent);
927
+ }
928
+ }
297
929
  .bg-black\/30 {
298
930
  background-color: color-mix(in srgb, #000 30%, transparent);
299
931
  @supports (color: color-mix(in lab, red, red)) {
300
932
  background-color: color-mix(in oklab, var(--color-black) 30%, transparent);
301
933
  }
302
934
  }
935
+ .bg-current {
936
+ background-color: currentcolor;
937
+ }
938
+ .bg-emerald-400\/25 {
939
+ background-color: color-mix(in srgb, oklch(76.5% 0.177 163.223) 25%, transparent);
940
+ @supports (color: color-mix(in lab, red, red)) {
941
+ background-color: color-mix(in oklab, var(--color-emerald-400) 25%, transparent);
942
+ }
943
+ }
944
+ .bg-emerald-500 {
945
+ background-color: var(--color-emerald-500);
946
+ }
947
+ .bg-emerald-500\/10 {
948
+ background-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 10%, transparent);
949
+ @supports (color: color-mix(in lab, red, red)) {
950
+ background-color: color-mix(in oklab, var(--color-emerald-500) 10%, transparent);
951
+ }
952
+ }
953
+ .bg-emerald-500\/12 {
954
+ background-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 12%, transparent);
955
+ @supports (color: color-mix(in lab, red, red)) {
956
+ background-color: color-mix(in oklab, var(--color-emerald-500) 12%, transparent);
957
+ }
958
+ }
959
+ .bg-transparent {
960
+ background-color: transparent;
961
+ }
962
+ .bg-white {
963
+ background-color: var(--color-white);
964
+ }
303
965
  .bg-white\/10 {
304
966
  background-color: color-mix(in srgb, #fff 10%, transparent);
305
967
  @supports (color: color-mix(in lab, red, red)) {
306
968
  background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
307
969
  }
308
970
  }
971
+ .bg-white\/15 {
972
+ background-color: color-mix(in srgb, #fff 15%, transparent);
973
+ @supports (color: color-mix(in lab, red, red)) {
974
+ background-color: color-mix(in oklab, var(--color-white) 15%, transparent);
975
+ }
976
+ }
977
+ .bg-zinc-400 {
978
+ background-color: var(--color-zinc-400);
979
+ }
980
+ .bg-zinc-800\/40 {
981
+ background-color: color-mix(in srgb, oklch(27.4% 0.006 286.033) 40%, transparent);
982
+ @supports (color: color-mix(in lab, red, red)) {
983
+ background-color: color-mix(in oklab, var(--color-zinc-800) 40%, transparent);
984
+ }
985
+ }
309
986
  .bg-zinc-900 {
310
987
  background-color: var(--color-zinc-900);
311
988
  }
@@ -316,9 +993,14 @@
316
993
  --tw-gradient-position: to bottom right in oklab;
317
994
  background-image: linear-gradient(var(--tw-gradient-stops));
318
995
  }
319
- .bg-gradient-to-r {
320
- --tw-gradient-position: to right in oklab;
321
- background-image: linear-gradient(var(--tw-gradient-stops));
996
+ .bg-\[linear-gradient\(135deg\,var\(--color-primary\)\,var\(--color-primary-gradient\)\)\] {
997
+ background-image: linear-gradient(135deg,var(--color-primary),var(--color-primary-gradient));
998
+ }
999
+ .bg-\[linear-gradient\(135deg\,var\(--color-primary\)_0\%\,var\(--color-primary-gradient\)_50\%\,var\(--color-primary\)_100\%\)\] {
1000
+ background-image: linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-gradient) 50%,var(--color-primary) 100%);
1001
+ }
1002
+ .bg-\[url\(\'https\:\/\/images\.unsplash\.com\/photo-1557683316-973673baf926\?w\=1200\&q\=80\'\)\] {
1003
+ background-image: url('https://images.unsplash.com/photo-1557683316-973673baf926?w=1200&q=80');
322
1004
  }
323
1005
  .bg-\[url\(\'https\:\/\/images\.unsplash\.com\/photo-1506744038136-46273834b3fb\?w\=800\&q\=80\'\)\] {
324
1006
  background-image: url('https://images.unsplash.com/photo-1506744038136-46273834b3fb?w=800&q=80');
@@ -327,10 +1009,6 @@
327
1009
  --tw-gradient-from: var(--color-zinc-800);
328
1010
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
329
1011
  }
330
- .from-zinc-900 {
331
- --tw-gradient-from: var(--color-zinc-900);
332
- --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
333
- }
334
1012
  .via-zinc-900 {
335
1013
  --tw-gradient-via: var(--color-zinc-900);
336
1014
  --tw-gradient-via-stops: var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-via) var(--tw-gradient-via-position), var(--tw-gradient-to) var(--tw-gradient-to-position);
@@ -340,9 +1018,8 @@
340
1018
  --tw-gradient-to: var(--color-black);
341
1019
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
342
1020
  }
343
- .to-zinc-700 {
344
- --tw-gradient-to: var(--color-zinc-700);
345
- --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
1021
+ .bg-\[length\:200\%_100\%\] {
1022
+ background-size: 200% 100%;
346
1023
  }
347
1024
  .bg-cover {
348
1025
  background-size: cover;
@@ -350,9 +1027,27 @@
350
1027
  .bg-center {
351
1028
  background-position: center;
352
1029
  }
1030
+ .bg-left {
1031
+ background-position: left;
1032
+ }
1033
+ .object-cover {
1034
+ object-fit: cover;
1035
+ }
1036
+ .p-0 {
1037
+ padding: calc(var(--spacing) * 0);
1038
+ }
1039
+ .p-0\.5 {
1040
+ padding: calc(var(--spacing) * 0.5);
1041
+ }
1042
+ .p-1 {
1043
+ padding: calc(var(--spacing) * 1);
1044
+ }
353
1045
  .p-4 {
354
1046
  padding: calc(var(--spacing) * 4);
355
1047
  }
1048
+ .p-5 {
1049
+ padding: calc(var(--spacing) * 5);
1050
+ }
356
1051
  .p-6 {
357
1052
  padding: calc(var(--spacing) * 6);
358
1053
  }
@@ -362,33 +1057,81 @@
362
1057
  .px-2 {
363
1058
  padding-inline: calc(var(--spacing) * 2);
364
1059
  }
1060
+ .px-2\.5 {
1061
+ padding-inline: calc(var(--spacing) * 2.5);
1062
+ }
365
1063
  .px-3 {
366
1064
  padding-inline: calc(var(--spacing) * 3);
367
1065
  }
1066
+ .px-3\.5 {
1067
+ padding-inline: calc(var(--spacing) * 3.5);
1068
+ }
368
1069
  .px-4 {
369
1070
  padding-inline: calc(var(--spacing) * 4);
370
1071
  }
1072
+ .px-5 {
1073
+ padding-inline: calc(var(--spacing) * 5);
1074
+ }
371
1075
  .px-6 {
372
1076
  padding-inline: calc(var(--spacing) * 6);
373
1077
  }
1078
+ .px-8 {
1079
+ padding-inline: calc(var(--spacing) * 8);
1080
+ }
1081
+ .py-1 {
1082
+ padding-block: calc(var(--spacing) * 1);
1083
+ }
1084
+ .py-1\.5 {
1085
+ padding-block: calc(var(--spacing) * 1.5);
1086
+ }
374
1087
  .py-2 {
375
1088
  padding-block: calc(var(--spacing) * 2);
376
1089
  }
377
1090
  .py-2\.5 {
378
1091
  padding-block: calc(var(--spacing) * 2.5);
379
1092
  }
1093
+ .py-3 {
1094
+ padding-block: calc(var(--spacing) * 3);
1095
+ }
1096
+ .py-4 {
1097
+ padding-block: calc(var(--spacing) * 4);
1098
+ }
1099
+ .py-5 {
1100
+ padding-block: calc(var(--spacing) * 5);
1101
+ }
380
1102
  .py-6 {
381
1103
  padding-block: calc(var(--spacing) * 6);
382
1104
  }
1105
+ .py-10 {
1106
+ padding-block: calc(var(--spacing) * 10);
1107
+ }
1108
+ .py-12 {
1109
+ padding-block: calc(var(--spacing) * 12);
1110
+ }
1111
+ .pt-6 {
1112
+ padding-top: calc(var(--spacing) * 6);
1113
+ }
383
1114
  .pr-8 {
384
1115
  padding-right: calc(var(--spacing) * 8);
385
1116
  }
1117
+ .pb-4 {
1118
+ padding-bottom: calc(var(--spacing) * 4);
1119
+ }
386
1120
  .pl-8 {
387
1121
  padding-left: calc(var(--spacing) * 8);
388
1122
  }
1123
+ .text-center {
1124
+ text-align: center;
1125
+ }
389
1126
  .text-left {
390
1127
  text-align: left;
391
1128
  }
1129
+ .text-right {
1130
+ text-align: right;
1131
+ }
1132
+ .align-middle {
1133
+ vertical-align: middle;
1134
+ }
392
1135
  .font-mono {
393
1136
  font-family: var(--font-mono);
394
1137
  }
@@ -399,6 +1142,14 @@
399
1142
  font-size: var(--text-2xl);
400
1143
  line-height: var(--tw-leading, var(--text-2xl--line-height));
401
1144
  }
1145
+ .text-3xl {
1146
+ font-size: var(--text-3xl);
1147
+ line-height: var(--tw-leading, var(--text-3xl--line-height));
1148
+ }
1149
+ .text-base {
1150
+ font-size: var(--text-base);
1151
+ line-height: var(--tw-leading, var(--text-base--line-height));
1152
+ }
402
1153
  .text-lg {
403
1154
  font-size: var(--text-lg);
404
1155
  line-height: var(--tw-leading, var(--text-lg--line-height));
@@ -411,10 +1162,24 @@
411
1162
  font-size: var(--text-xs);
412
1163
  line-height: var(--tw-leading, var(--text-xs--line-height));
413
1164
  }
1165
+ .text-\[10px\] {
1166
+ font-size: 10px;
1167
+ }
1168
+ .text-\[11px\] {
1169
+ font-size: 11px;
1170
+ }
414
1171
  .leading-relaxed {
415
1172
  --tw-leading: var(--leading-relaxed);
416
1173
  line-height: var(--leading-relaxed);
417
1174
  }
1175
+ .leading-tight {
1176
+ --tw-leading: var(--leading-tight);
1177
+ line-height: var(--leading-tight);
1178
+ }
1179
+ .font-bold {
1180
+ --tw-font-weight: var(--font-weight-bold);
1181
+ font-weight: var(--font-weight-bold);
1182
+ }
418
1183
  .font-medium {
419
1184
  --tw-font-weight: var(--font-weight-medium);
420
1185
  font-weight: var(--font-weight-medium);
@@ -431,16 +1196,29 @@
431
1196
  --tw-tracking: var(--tracking-tight);
432
1197
  letter-spacing: var(--tracking-tight);
433
1198
  }
1199
+ .tracking-wide {
1200
+ --tw-tracking: var(--tracking-wide);
1201
+ letter-spacing: var(--tracking-wide);
1202
+ }
434
1203
  .tracking-widest {
435
1204
  --tw-tracking: var(--tracking-widest);
436
1205
  letter-spacing: var(--tracking-widest);
437
1206
  }
1207
+ .whitespace-normal {
1208
+ white-space: normal;
1209
+ }
438
1210
  .whitespace-nowrap {
439
1211
  white-space: nowrap;
440
1212
  }
441
1213
  .text-\[var\(--color-accent-foreground\)\] {
442
1214
  color: var(--color-accent-foreground);
443
1215
  }
1216
+ .text-\[var\(--color-background\)\] {
1217
+ color: var(--color-background);
1218
+ }
1219
+ .text-\[var\(--color-destructive\)\] {
1220
+ color: var(--color-destructive);
1221
+ }
444
1222
  .text-\[var\(--color-destructive-foreground\)\] {
445
1223
  color: var(--color-destructive-foreground);
446
1224
  }
@@ -450,6 +1228,12 @@
450
1228
  .text-\[var\(--color-muted-foreground\)\] {
451
1229
  color: var(--color-muted-foreground);
452
1230
  }
1231
+ .text-\[var\(--color-muted-foreground\)\]\/60 {
1232
+ color: var(--color-muted-foreground);
1233
+ @supports (color: color-mix(in lab, red, red)) {
1234
+ color: color-mix(in oklab, var(--color-muted-foreground) 60%, transparent);
1235
+ }
1236
+ }
453
1237
  .text-\[var\(--color-primary\)\] {
454
1238
  color: var(--color-primary);
455
1239
  }
@@ -459,9 +1243,24 @@
459
1243
  .text-\[var\(--color-secondary-foreground\)\] {
460
1244
  color: var(--color-secondary-foreground);
461
1245
  }
1246
+ .text-amber-50 {
1247
+ color: var(--color-amber-50);
1248
+ }
1249
+ .text-amber-600 {
1250
+ color: var(--color-amber-600);
1251
+ }
1252
+ .text-emerald-50 {
1253
+ color: var(--color-emerald-50);
1254
+ }
462
1255
  .text-emerald-400 {
463
1256
  color: var(--color-emerald-400);
464
1257
  }
1258
+ .text-emerald-500 {
1259
+ color: var(--color-emerald-500);
1260
+ }
1261
+ .text-emerald-600 {
1262
+ color: var(--color-emerald-600);
1263
+ }
465
1264
  .text-white {
466
1265
  color: var(--color-white);
467
1266
  }
@@ -477,9 +1276,18 @@
477
1276
  .text-zinc-400 {
478
1277
  color: var(--color-zinc-400);
479
1278
  }
1279
+ .text-zinc-500 {
1280
+ color: var(--color-zinc-500);
1281
+ }
480
1282
  .uppercase {
481
1283
  text-transform: uppercase;
482
1284
  }
1285
+ .underline {
1286
+ text-decoration-line: underline;
1287
+ }
1288
+ .underline-offset-2 {
1289
+ text-underline-offset: 2px;
1290
+ }
483
1291
  .underline-offset-4 {
484
1292
  text-underline-offset: 4px;
485
1293
  }
@@ -487,14 +1295,40 @@
487
1295
  -webkit-font-smoothing: antialiased;
488
1296
  -moz-osx-font-smoothing: grayscale;
489
1297
  }
1298
+ .opacity-0 {
1299
+ opacity: 0%;
1300
+ }
490
1301
  .opacity-25 {
491
1302
  opacity: 25%;
492
1303
  }
1304
+ .opacity-30 {
1305
+ opacity: 30%;
1306
+ }
1307
+ .opacity-50 {
1308
+ opacity: 50%;
1309
+ }
1310
+ .opacity-70 {
1311
+ opacity: 70%;
1312
+ }
493
1313
  .opacity-75 {
494
1314
  opacity: 75%;
495
1315
  }
496
- .shadow-\[0_1px_2px_rgba\(0\,0\,0\,0\.1\)\] {
497
- --tw-shadow: 0 1px 2px var(--tw-shadow-color, rgba(0,0,0,0.1));
1316
+ .opacity-90 {
1317
+ opacity: 90%;
1318
+ }
1319
+ .opacity-100 {
1320
+ opacity: 100%;
1321
+ }
1322
+ .shadow-\[0_1px_2px_0_rgb\(0_0_0\/0\.10\)\,inset_0_1px_0_0_rgb\(255_255_255\/0\.22\)\] {
1323
+ --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0/0.10)), inset 0 1px 0 0 var(--tw-shadow-color, rgb(255 255 255/0.22));
1324
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1325
+ }
1326
+ .shadow-lg {
1327
+ --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
1328
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1329
+ }
1330
+ .shadow-md {
1331
+ --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
498
1332
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
499
1333
  }
500
1334
  .shadow-sm {
@@ -505,20 +1339,99 @@
505
1339
  --tw-shadow: 0 1px 2px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.05));
506
1340
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
507
1341
  }
1342
+ .ring {
1343
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
1344
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1345
+ }
1346
+ .ring-1 {
1347
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
1348
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1349
+ }
1350
+ .ring-2 {
1351
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
1352
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1353
+ }
1354
+ .ring-\[var\(--color-background\)\] {
1355
+ --tw-ring-color: var(--color-background);
1356
+ }
1357
+ .ring-\[var\(--color-foreground\)\] {
1358
+ --tw-ring-color: var(--color-foreground);
1359
+ }
1360
+ .ring-\[var\(--color-primary\)\] {
1361
+ --tw-ring-color: var(--color-primary);
1362
+ }
1363
+ .ring-offset-2 {
1364
+ --tw-ring-offset-width: 2px;
1365
+ --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1366
+ }
1367
+ .ring-offset-\[var\(--color-background\)\] {
1368
+ --tw-ring-offset-color: var(--color-background);
1369
+ }
508
1370
  .outline {
509
1371
  outline-style: var(--tw-outline-style);
510
1372
  outline-width: 1px;
511
1373
  }
1374
+ .drop-shadow {
1375
+ --tw-drop-shadow-size: drop-shadow(0 1px 2px var(--tw-drop-shadow-color, rgb(0 0 0 / 0.1))) drop-shadow(0 1px 1px var(--tw-drop-shadow-color, rgb(0 0 0 / 0.06)));
1376
+ --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow( 0 1px 1px rgb(0 0 0 / 0.06));
1377
+ filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
1378
+ }
512
1379
  .backdrop-blur-2xl {
513
1380
  --tw-backdrop-blur: blur(var(--blur-2xl));
514
1381
  -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
515
1382
  backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
516
1383
  }
1384
+ .backdrop-blur-md {
1385
+ --tw-backdrop-blur: blur(var(--blur-md));
1386
+ -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
1387
+ backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
1388
+ }
1389
+ .transition-\[background-position\,transform\,box-shadow\] {
1390
+ transition-property: background-position,transform,box-shadow;
1391
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
1392
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
1393
+ }
1394
+ .transition-\[width\] {
1395
+ transition-property: width;
1396
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
1397
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
1398
+ }
517
1399
  .transition-all {
518
1400
  transition-property: all;
519
1401
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
520
1402
  transition-duration: var(--tw-duration, var(--default-transition-duration));
521
1403
  }
1404
+ .transition-colors {
1405
+ transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
1406
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
1407
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
1408
+ }
1409
+ .transition-opacity {
1410
+ transition-property: opacity;
1411
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
1412
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
1413
+ }
1414
+ .transition-transform {
1415
+ transition-property: transform, translate, scale, rotate;
1416
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
1417
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
1418
+ }
1419
+ .duration-150 {
1420
+ --tw-duration: 150ms;
1421
+ transition-duration: 150ms;
1422
+ }
1423
+ .duration-200 {
1424
+ --tw-duration: 200ms;
1425
+ transition-duration: 200ms;
1426
+ }
1427
+ .duration-300 {
1428
+ --tw-duration: 300ms;
1429
+ transition-duration: 300ms;
1430
+ }
1431
+ .ease-out {
1432
+ --tw-ease: var(--ease-out);
1433
+ transition-timing-function: var(--ease-out);
1434
+ }
522
1435
  .outline-none {
523
1436
  --tw-outline-style: none;
524
1437
  outline-style: none;
@@ -527,6 +1440,101 @@
527
1440
  -webkit-user-select: all;
528
1441
  user-select: all;
529
1442
  }
1443
+ .select-none {
1444
+ -webkit-user-select: none;
1445
+ user-select: none;
1446
+ }
1447
+ .select-text {
1448
+ -webkit-user-select: text;
1449
+ user-select: text;
1450
+ }
1451
+ .group-hover\:bg-\[var\(--color-muted-foreground\)\] {
1452
+ &:is(:where(.group):hover *) {
1453
+ @media (hover: hover) {
1454
+ background-color: var(--color-muted-foreground);
1455
+ }
1456
+ }
1457
+ }
1458
+ .group-hover\:text-\[var\(--color-foreground\)\] {
1459
+ &:is(:where(.group):hover *) {
1460
+ @media (hover: hover) {
1461
+ color: var(--color-foreground);
1462
+ }
1463
+ }
1464
+ }
1465
+ .peer-focus-visible\:ring-\[3px\] {
1466
+ &:is(:where(.peer):focus-visible ~ *) {
1467
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
1468
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1469
+ }
1470
+ }
1471
+ .peer-focus-visible\:ring-\[var\(--color-ring\)\]\/40 {
1472
+ &:is(:where(.peer):focus-visible ~ *) {
1473
+ --tw-ring-color: var(--color-ring);
1474
+ @supports (color: color-mix(in lab, red, red)) {
1475
+ --tw-ring-color: color-mix(in oklab, var(--color-ring) 40%, transparent);
1476
+ }
1477
+ }
1478
+ }
1479
+ .placeholder\:text-\[var\(--color-muted-foreground\)\] {
1480
+ &::placeholder {
1481
+ color: var(--color-muted-foreground);
1482
+ }
1483
+ }
1484
+ .focus-within\:border-\[var\(--color-ring\)\] {
1485
+ &:focus-within {
1486
+ border-color: var(--color-ring);
1487
+ }
1488
+ }
1489
+ .focus-within\:ring-\[3px\] {
1490
+ &:focus-within {
1491
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
1492
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1493
+ }
1494
+ }
1495
+ .focus-within\:ring-\[var\(--color-destructive\)\]\/25 {
1496
+ &:focus-within {
1497
+ --tw-ring-color: var(--color-destructive);
1498
+ @supports (color: color-mix(in lab, red, red)) {
1499
+ --tw-ring-color: color-mix(in oklab, var(--color-destructive) 25%, transparent);
1500
+ }
1501
+ }
1502
+ }
1503
+ .focus-within\:ring-\[var\(--color-ring\)\]\/40 {
1504
+ &:focus-within {
1505
+ --tw-ring-color: var(--color-ring);
1506
+ @supports (color: color-mix(in lab, red, red)) {
1507
+ --tw-ring-color: color-mix(in oklab, var(--color-ring) 40%, transparent);
1508
+ }
1509
+ }
1510
+ }
1511
+ .hover\:border-\[var\(--color-muted-foreground\)\] {
1512
+ &:hover {
1513
+ @media (hover: hover) {
1514
+ border-color: var(--color-muted-foreground);
1515
+ }
1516
+ }
1517
+ }
1518
+ .hover\:border-\[var\(--color-muted-foreground\)\]\/40 {
1519
+ &:hover {
1520
+ @media (hover: hover) {
1521
+ border-color: var(--color-muted-foreground);
1522
+ @supports (color: color-mix(in lab, red, red)) {
1523
+ border-color: color-mix(in oklab, var(--color-muted-foreground) 40%, transparent);
1524
+ }
1525
+ }
1526
+ }
1527
+ }
1528
+ .hover\:border-\[var\(--color-ring\)\]\/40 {
1529
+ &:hover {
1530
+ @media (hover: hover) {
1531
+ border-color: var(--color-ring);
1532
+ @supports (color: color-mix(in lab, red, red)) {
1533
+ border-color: color-mix(in oklab, var(--color-ring) 40%, transparent);
1534
+ }
1535
+ }
1536
+ }
1537
+ }
530
1538
  .hover\:bg-\[var\(--color-accent\)\] {
531
1539
  &:hover {
532
1540
  @media (hover: hover) {
@@ -534,22 +1542,62 @@
534
1542
  }
535
1543
  }
536
1544
  }
1545
+ .hover\:bg-\[var\(--color-destructive\)\]\/10 {
1546
+ &:hover {
1547
+ @media (hover: hover) {
1548
+ background-color: var(--color-destructive);
1549
+ @supports (color: color-mix(in lab, red, red)) {
1550
+ background-color: color-mix(in oklab, var(--color-destructive) 10%, transparent);
1551
+ }
1552
+ }
1553
+ }
1554
+ }
537
1555
  .hover\:bg-\[var\(--color-destructive\)\]\/90 {
538
1556
  &:hover {
539
1557
  @media (hover: hover) {
540
- background-color: var(--color-destructive);
1558
+ background-color: var(--color-destructive);
1559
+ @supports (color: color-mix(in lab, red, red)) {
1560
+ background-color: color-mix(in oklab, var(--color-destructive) 90%, transparent);
1561
+ }
1562
+ }
1563
+ }
1564
+ }
1565
+ .hover\:bg-\[var\(--color-destructive\)\]\/95 {
1566
+ &:hover {
1567
+ @media (hover: hover) {
1568
+ background-color: var(--color-destructive);
1569
+ @supports (color: color-mix(in lab, red, red)) {
1570
+ background-color: color-mix(in oklab, var(--color-destructive) 95%, transparent);
1571
+ }
1572
+ }
1573
+ }
1574
+ }
1575
+ .hover\:bg-\[var\(--color-muted\)\]\/40 {
1576
+ &:hover {
1577
+ @media (hover: hover) {
1578
+ background-color: var(--color-muted);
1579
+ @supports (color: color-mix(in lab, red, red)) {
1580
+ background-color: color-mix(in oklab, var(--color-muted) 40%, transparent);
1581
+ }
1582
+ }
1583
+ }
1584
+ }
1585
+ .hover\:bg-\[var\(--color-primary\)\]\/90 {
1586
+ &:hover {
1587
+ @media (hover: hover) {
1588
+ background-color: var(--color-primary);
541
1589
  @supports (color: color-mix(in lab, red, red)) {
542
- background-color: color-mix(in oklab, var(--color-destructive) 90%, transparent);
1590
+ background-color: color-mix(in oklab, var(--color-primary) 90%, transparent);
543
1591
  }
544
1592
  }
545
1593
  }
546
1594
  }
547
- .hover\:bg-\[var\(--color-primary\)\]\/90 {
1595
+ .hover\:bg-\[var\(--color-primary\)\]\/95 {
548
1596
  &:hover {
549
1597
  @media (hover: hover) {
550
1598
  background-color: var(--color-primary);
551
1599
  @supports (color: color-mix(in lab, red, red)) {
552
- background-color: color-mix(in oklab, var(--color-primary) 90%, transparent);
1600
+ background-color: color-mix(in oklab, var(--color-primary) 95%, transparent);
553
1601
  }
554
1602
  }
555
1603
  }
@@ -564,6 +1612,30 @@
564
1612
  }
565
1613
  }
566
1614
  }
1615
+ .hover\:bg-\[var\(--color-secondary\)\]\/90 {
1616
+ &:hover {
1617
+ @media (hover: hover) {
1618
+ background-color: var(--color-secondary);
1619
+ @supports (color: color-mix(in lab, red, red)) {
1620
+ background-color: color-mix(in oklab, var(--color-secondary) 90%, transparent);
1621
+ }
1622
+ }
1623
+ }
1624
+ }
1625
+ .hover\:bg-amber-600 {
1626
+ &:hover {
1627
+ @media (hover: hover) {
1628
+ background-color: var(--color-amber-600);
1629
+ }
1630
+ }
1631
+ }
1632
+ .hover\:bg-emerald-600 {
1633
+ &:hover {
1634
+ @media (hover: hover) {
1635
+ background-color: var(--color-emerald-600);
1636
+ }
1637
+ }
1638
+ }
567
1639
  .hover\:bg-white\/\[0\.18\] {
568
1640
  &:hover {
569
1641
  @media (hover: hover) {
@@ -581,26 +1653,41 @@
581
1653
  }
582
1654
  }
583
1655
  }
584
- .hover\:from-zinc-800 {
1656
+ .hover\:bg-right {
585
1657
  &:hover {
586
1658
  @media (hover: hover) {
587
- --tw-gradient-from: var(--color-zinc-800);
588
- --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
1659
+ background-position: right;
589
1660
  }
590
1661
  }
591
1662
  }
592
- .hover\:to-zinc-600 {
1663
+ .hover\:text-\[var\(--color-accent-foreground\)\] {
593
1664
  &:hover {
594
1665
  @media (hover: hover) {
595
- --tw-gradient-to: var(--color-zinc-600);
596
- --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
1666
+ color: var(--color-accent-foreground);
597
1667
  }
598
1668
  }
599
1669
  }
600
- .hover\:text-\[var\(--color-accent-foreground\)\] {
1670
+ .hover\:text-\[var\(--color-foreground\)\] {
601
1671
  &:hover {
602
1672
  @media (hover: hover) {
603
- color: var(--color-accent-foreground);
1673
+ color: var(--color-foreground);
1674
+ }
1675
+ }
1676
+ }
1677
+ .hover\:text-\[var\(--color-foreground\)\]\/80 {
1678
+ &:hover {
1679
+ @media (hover: hover) {
1680
+ color: var(--color-foreground);
1681
+ @supports (color: color-mix(in lab, red, red)) {
1682
+ color: color-mix(in oklab, var(--color-foreground) 80%, transparent);
1683
+ }
1684
+ }
1685
+ }
1686
+ }
1687
+ .hover\:text-zinc-100 {
1688
+ &:hover {
1689
+ @media (hover: hover) {
1690
+ color: var(--color-zinc-100);
604
1691
  }
605
1692
  }
606
1693
  }
@@ -618,6 +1705,80 @@
618
1705
  }
619
1706
  }
620
1707
  }
1708
+ .hover\:opacity-100 {
1709
+ &:hover {
1710
+ @media (hover: hover) {
1711
+ opacity: 100%;
1712
+ }
1713
+ }
1714
+ }
1715
+ .hover\:shadow-md {
1716
+ &:hover {
1717
+ @media (hover: hover) {
1718
+ --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
1719
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1720
+ }
1721
+ }
1722
+ }
1723
+ .hover\:shadow-sm {
1724
+ &:hover {
1725
+ @media (hover: hover) {
1726
+ --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
1727
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1728
+ }
1729
+ }
1730
+ }
1731
+ .focus\:border-\[var\(--color-ring\)\] {
1732
+ &:focus {
1733
+ border-color: var(--color-ring);
1734
+ }
1735
+ }
1736
+ .focus\:bg-\[var\(--color-accent\)\] {
1737
+ &:focus {
1738
+ background-color: var(--color-accent);
1739
+ }
1740
+ }
1741
+ .focus\:bg-\[var\(--color-destructive\)\]\/10 {
1742
+ &:focus {
1743
+ background-color: var(--color-destructive);
1744
+ @supports (color: color-mix(in lab, red, red)) {
1745
+ background-color: color-mix(in oklab, var(--color-destructive) 10%, transparent);
1746
+ }
1747
+ }
1748
+ }
1749
+ .focus\:ring-\[3px\] {
1750
+ &:focus {
1751
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
1752
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1753
+ }
1754
+ }
1755
+ .focus\:ring-\[var\(--color-destructive\)\]\/25 {
1756
+ &:focus {
1757
+ --tw-ring-color: var(--color-destructive);
1758
+ @supports (color: color-mix(in lab, red, red)) {
1759
+ --tw-ring-color: color-mix(in oklab, var(--color-destructive) 25%, transparent);
1760
+ }
1761
+ }
1762
+ }
1763
+ .focus\:ring-\[var\(--color-ring\)\]\/40 {
1764
+ &:focus {
1765
+ --tw-ring-color: var(--color-ring);
1766
+ @supports (color: color-mix(in lab, red, red)) {
1767
+ --tw-ring-color: color-mix(in oklab, var(--color-ring) 40%, transparent);
1768
+ }
1769
+ }
1770
+ }
1771
+ .focus-visible\:border-\[var\(--color-ring\)\] {
1772
+ &:focus-visible {
1773
+ border-color: var(--color-ring);
1774
+ }
1775
+ }
1776
+ .focus-visible\:ring-2 {
1777
+ &:focus-visible {
1778
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
1779
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1780
+ }
1781
+ }
621
1782
  .focus-visible\:ring-\[3px\] {
622
1783
  &:focus-visible {
623
1784
  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
@@ -632,6 +1793,27 @@
632
1793
  }
633
1794
  }
634
1795
  }
1796
+ .focus-visible\:ring-\[var\(--color-destructive\)\]\/25 {
1797
+ &:focus-visible {
1798
+ --tw-ring-color: var(--color-destructive);
1799
+ @supports (color: color-mix(in lab, red, red)) {
1800
+ --tw-ring-color: color-mix(in oklab, var(--color-destructive) 25%, transparent);
1801
+ }
1802
+ }
1803
+ }
1804
+ .focus-visible\:ring-\[var\(--color-ring\)\] {
1805
+ &:focus-visible {
1806
+ --tw-ring-color: var(--color-ring);
1807
+ }
1808
+ }
1809
+ .focus-visible\:ring-\[var\(--color-ring\)\]\/40 {
1810
+ &:focus-visible {
1811
+ --tw-ring-color: var(--color-ring);
1812
+ @supports (color: color-mix(in lab, red, red)) {
1813
+ --tw-ring-color: color-mix(in oklab, var(--color-ring) 40%, transparent);
1814
+ }
1815
+ }
1816
+ }
635
1817
  .focus-visible\:ring-\[var\(--color-ring\)\]\/50 {
636
1818
  &:focus-visible {
637
1819
  --tw-ring-color: var(--color-ring);
@@ -640,29 +1822,133 @@
640
1822
  }
641
1823
  }
642
1824
  }
643
- .active\:bg-white\/\[0\.12\] {
644
- &:active {
645
- background-color: color-mix(in srgb, #fff 12%, transparent);
1825
+ .focus-visible\:ring-amber-500\/20 {
1826
+ &:focus-visible {
1827
+ --tw-ring-color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 20%, transparent);
1828
+ @supports (color: color-mix(in lab, red, red)) {
1829
+ --tw-ring-color: color-mix(in oklab, var(--color-amber-500) 20%, transparent);
1830
+ }
1831
+ }
1832
+ }
1833
+ .focus-visible\:ring-emerald-500\/20 {
1834
+ &:focus-visible {
1835
+ --tw-ring-color: color-mix(in srgb, oklch(69.6% 0.17 162.48) 20%, transparent);
646
1836
  @supports (color: color-mix(in lab, red, red)) {
647
- background-color: color-mix(in oklab, var(--color-white) 12%, transparent);
1837
+ --tw-ring-color: color-mix(in oklab, var(--color-emerald-500) 20%, transparent);
648
1838
  }
649
1839
  }
650
1840
  }
1841
+ .focus-visible\:ring-offset-1 {
1842
+ &:focus-visible {
1843
+ --tw-ring-offset-width: 1px;
1844
+ --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1845
+ }
1846
+ }
1847
+ .focus-visible\:ring-offset-\[var\(--color-background\)\] {
1848
+ &:focus-visible {
1849
+ --tw-ring-offset-color: var(--color-background);
1850
+ }
1851
+ }
1852
+ .active\:translate-y-\[1px\] {
1853
+ &:active {
1854
+ --tw-translate-y: 1px;
1855
+ translate: var(--tw-translate-x) var(--tw-translate-y);
1856
+ }
1857
+ }
1858
+ .active\:scale-\[0\.98\] {
1859
+ &:active {
1860
+ scale: 0.98;
1861
+ }
1862
+ }
1863
+ .active\:scale-\[0\.995\] {
1864
+ &:active {
1865
+ scale: 0.995;
1866
+ }
1867
+ }
1868
+ .active\:shadow-sm {
1869
+ &:active {
1870
+ --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
1871
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1872
+ }
1873
+ }
651
1874
  .disabled\:pointer-events-none {
652
1875
  &:disabled {
653
1876
  pointer-events: none;
654
1877
  }
655
1878
  }
1879
+ .disabled\:transform-none {
1880
+ &:disabled {
1881
+ transform: none;
1882
+ }
1883
+ }
1884
+ .disabled\:cursor-not-allowed {
1885
+ &:disabled {
1886
+ cursor: not-allowed;
1887
+ }
1888
+ }
1889
+ .disabled\:opacity-40 {
1890
+ &:disabled {
1891
+ opacity: 40%;
1892
+ }
1893
+ }
656
1894
  .disabled\:opacity-50 {
657
1895
  &:disabled {
658
1896
  opacity: 50%;
659
1897
  }
660
1898
  }
1899
+ .disabled\:shadow-none {
1900
+ &:disabled {
1901
+ --tw-shadow: 0 0 #0000;
1902
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1903
+ }
1904
+ }
1905
+ .sm\:grid-cols-2 {
1906
+ @media (width >= 40rem) {
1907
+ grid-template-columns: repeat(2, minmax(0, 1fr));
1908
+ }
1909
+ }
1910
+ .sm\:grid-cols-3 {
1911
+ @media (width >= 40rem) {
1912
+ grid-template-columns: repeat(3, minmax(0, 1fr));
1913
+ }
1914
+ }
1915
+ .lg\:grid-cols-5 {
1916
+ @media (width >= 64rem) {
1917
+ grid-template-columns: repeat(5, minmax(0, 1fr));
1918
+ }
1919
+ }
1920
+ .\[\&\:empty\]\:hidden {
1921
+ &:empty {
1922
+ display: none;
1923
+ }
1924
+ }
1925
+ .\[\&\>\*\]\:pointer-events-auto {
1926
+ &>* {
1927
+ pointer-events: auto;
1928
+ }
1929
+ }
1930
+ .\[\&\>ui-avatar\]\:ring-2 {
1931
+ &>ui-avatar {
1932
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
1933
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1934
+ }
1935
+ }
1936
+ .\[\&\>ui-avatar\]\:ring-\[var\(--color-background\)\] {
1937
+ &>ui-avatar {
1938
+ --tw-ring-color: var(--color-background);
1939
+ }
1940
+ }
1941
+ .\[\&\>ui-avatar\:not\(\:first-child\)\]\:-ml-2 {
1942
+ &>ui-avatar:not(:first-child) {
1943
+ margin-left: calc(var(--spacing) * -2);
1944
+ }
1945
+ }
661
1946
  }
662
1947
  :root {
663
1948
  --color-background: oklch(1 0 0);
664
1949
  --color-foreground: oklch(0.145 0.005 285.82);
665
1950
  --color-primary: oklch(0.205 0.006 285.82);
1951
+ --color-primary-gradient: oklch(0.35 0.01 285.82);
666
1952
  --color-primary-foreground: oklch(0.985 0 0);
667
1953
  --color-destructive: oklch(0.577 0.245 27.33);
668
1954
  --color-destructive-foreground: oklch(0.985 0 0);
@@ -675,13 +1961,121 @@
675
1961
  --color-border: oklch(0.922 0.005 285.82);
676
1962
  --color-input: oklch(0.922 0.005 285.82);
677
1963
  --color-ring: oklch(0.705 0.015 285.82);
678
- --radius: 0.625rem;
1964
+ --radius: 0.75rem;
1965
+ }
1966
+ .dark {
1967
+ --color-background: oklch(0.145 0.005 285.82);
1968
+ --color-foreground: oklch(0.985 0 0);
1969
+ --color-primary: oklch(0.92 0.004 286);
1970
+ --color-primary-gradient: oklch(0.80 0.01 286);
1971
+ --color-primary-foreground: oklch(0.21 0.006 285.82);
1972
+ --color-destructive: oklch(0.62 0.21 25);
1973
+ --color-destructive-foreground: oklch(0.985 0 0);
1974
+ --color-secondary: oklch(0.27 0.006 286);
1975
+ --color-secondary-foreground: oklch(0.985 0 0);
1976
+ --color-accent: oklch(0.27 0.006 286);
1977
+ --color-accent-foreground: oklch(0.985 0 0);
1978
+ --color-muted: oklch(0.27 0.006 286);
1979
+ --color-muted-foreground: oklch(0.71 0.015 286);
1980
+ --color-border: oklch(0.30 0.006 286);
1981
+ --color-input: oklch(0.33 0.006 286);
1982
+ --color-ring: oklch(0.55 0.013 286);
1983
+ }
1984
+ .theme-indigo {
1985
+ --color-primary: oklch(0.50 0.17 277);
1986
+ --color-primary-gradient: oklch(0.60 0.16 305);
1987
+ --color-primary-foreground: var(--color-white);
1988
+ --color-ring: oklch(0.66 0.12 277);
1989
+ }
1990
+ .theme-teal {
1991
+ --color-primary: oklch(0.58 0.085 185);
1992
+ --color-primary-gradient: oklch(0.70 0.12 162);
1993
+ --color-primary-foreground: var(--color-white);
1994
+ --color-ring: oklch(0.70 0.10 183);
1995
+ }
1996
+ .theme-violet {
1997
+ --color-primary: oklch(0.53 0.18 293);
1998
+ --color-primary-gradient: oklch(0.62 0.17 333);
1999
+ --color-primary-foreground: var(--color-white);
2000
+ --color-ring: oklch(0.69 0.13 293);
2001
+ }
2002
+ .theme-rose {
2003
+ --color-primary: oklch(0.57 0.17 18);
2004
+ --color-primary-gradient: oklch(0.69 0.15 45);
2005
+ --color-primary-foreground: var(--color-white);
2006
+ --color-ring: oklch(0.70 0.13 14);
2007
+ }
2008
+ @keyframes progress-indeterminate {
2009
+ 0% {
2010
+ transform: translateX(-100%);
2011
+ }
2012
+ 100% {
2013
+ transform: translateX(350%);
2014
+ }
2015
+ }
2016
+ .animate-progress-indeterminate {
2017
+ animation: progress-indeterminate 1.2s ease-in-out infinite;
2018
+ }
2019
+ @property --tw-translate-x {
2020
+ syntax: "*";
2021
+ inherits: false;
2022
+ initial-value: 0;
2023
+ }
2024
+ @property --tw-translate-y {
2025
+ syntax: "*";
2026
+ inherits: false;
2027
+ initial-value: 0;
2028
+ }
2029
+ @property --tw-translate-z {
2030
+ syntax: "*";
2031
+ inherits: false;
2032
+ initial-value: 0;
2033
+ }
2034
+ @property --tw-scale-x {
2035
+ syntax: "*";
2036
+ inherits: false;
2037
+ initial-value: 1;
2038
+ }
2039
+ @property --tw-scale-y {
2040
+ syntax: "*";
2041
+ inherits: false;
2042
+ initial-value: 1;
2043
+ }
2044
+ @property --tw-scale-z {
2045
+ syntax: "*";
2046
+ inherits: false;
2047
+ initial-value: 1;
2048
+ }
2049
+ @property --tw-rotate-x {
2050
+ syntax: "*";
2051
+ inherits: false;
2052
+ }
2053
+ @property --tw-rotate-y {
2054
+ syntax: "*";
2055
+ inherits: false;
2056
+ }
2057
+ @property --tw-rotate-z {
2058
+ syntax: "*";
2059
+ inherits: false;
2060
+ }
2061
+ @property --tw-skew-x {
2062
+ syntax: "*";
2063
+ inherits: false;
2064
+ }
2065
+ @property --tw-skew-y {
2066
+ syntax: "*";
2067
+ inherits: false;
679
2068
  }
680
2069
  @property --tw-space-y-reverse {
681
2070
  syntax: "*";
682
2071
  inherits: false;
683
2072
  initial-value: 0;
684
2073
  }
2074
+ @property --tw-divide-y-reverse {
2075
+ syntax: "*";
2076
+ inherits: false;
2077
+ initial-value: 0;
2078
+ }
685
2079
  @property --tw-border-style {
686
2080
  syntax: "*";
687
2081
  inherits: false;
@@ -811,6 +2205,59 @@
811
2205
  inherits: false;
812
2206
  initial-value: solid;
813
2207
  }
2208
+ @property --tw-blur {
2209
+ syntax: "*";
2210
+ inherits: false;
2211
+ }
2212
+ @property --tw-brightness {
2213
+ syntax: "*";
2214
+ inherits: false;
2215
+ }
2216
+ @property --tw-contrast {
2217
+ syntax: "*";
2218
+ inherits: false;
2219
+ }
2220
+ @property --tw-grayscale {
2221
+ syntax: "*";
2222
+ inherits: false;
2223
+ }
2224
+ @property --tw-hue-rotate {
2225
+ syntax: "*";
2226
+ inherits: false;
2227
+ }
2228
+ @property --tw-invert {
2229
+ syntax: "*";
2230
+ inherits: false;
2231
+ }
2232
+ @property --tw-opacity {
2233
+ syntax: "*";
2234
+ inherits: false;
2235
+ }
2236
+ @property --tw-saturate {
2237
+ syntax: "*";
2238
+ inherits: false;
2239
+ }
2240
+ @property --tw-sepia {
2241
+ syntax: "*";
2242
+ inherits: false;
2243
+ }
2244
+ @property --tw-drop-shadow {
2245
+ syntax: "*";
2246
+ inherits: false;
2247
+ }
2248
+ @property --tw-drop-shadow-color {
2249
+ syntax: "*";
2250
+ inherits: false;
2251
+ }
2252
+ @property --tw-drop-shadow-alpha {
2253
+ syntax: "<percentage>";
2254
+ inherits: false;
2255
+ initial-value: 100%;
2256
+ }
2257
+ @property --tw-drop-shadow-size {
2258
+ syntax: "*";
2259
+ inherits: false;
2260
+ }
814
2261
  @property --tw-backdrop-blur {
815
2262
  syntax: "*";
816
2263
  inherits: false;
@@ -847,15 +2294,40 @@
847
2294
  syntax: "*";
848
2295
  inherits: false;
849
2296
  }
2297
+ @property --tw-duration {
2298
+ syntax: "*";
2299
+ inherits: false;
2300
+ }
2301
+ @property --tw-ease {
2302
+ syntax: "*";
2303
+ inherits: false;
2304
+ }
850
2305
  @keyframes spin {
851
2306
  to {
852
2307
  transform: rotate(360deg);
853
2308
  }
854
2309
  }
2310
+ @keyframes pulse {
2311
+ 50% {
2312
+ opacity: 0.5;
2313
+ }
2314
+ }
855
2315
  @layer properties {
856
2316
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
857
2317
  *, ::before, ::after, ::backdrop {
2318
+ --tw-translate-x: 0;
2319
+ --tw-translate-y: 0;
2320
+ --tw-translate-z: 0;
2321
+ --tw-scale-x: 1;
2322
+ --tw-scale-y: 1;
2323
+ --tw-scale-z: 1;
2324
+ --tw-rotate-x: initial;
2325
+ --tw-rotate-y: initial;
2326
+ --tw-rotate-z: initial;
2327
+ --tw-skew-x: initial;
2328
+ --tw-skew-y: initial;
858
2329
  --tw-space-y-reverse: 0;
2330
+ --tw-divide-y-reverse: 0;
859
2331
  --tw-border-style: solid;
860
2332
  --tw-gradient-position: initial;
861
2333
  --tw-gradient-from: #0000;
@@ -884,6 +2356,19 @@
884
2356
  --tw-ring-offset-color: #fff;
885
2357
  --tw-ring-offset-shadow: 0 0 #0000;
886
2358
  --tw-outline-style: solid;
2359
+ --tw-blur: initial;
2360
+ --tw-brightness: initial;
2361
+ --tw-contrast: initial;
2362
+ --tw-grayscale: initial;
2363
+ --tw-hue-rotate: initial;
2364
+ --tw-invert: initial;
2365
+ --tw-opacity: initial;
2366
+ --tw-saturate: initial;
2367
+ --tw-sepia: initial;
2368
+ --tw-drop-shadow: initial;
2369
+ --tw-drop-shadow-color: initial;
2370
+ --tw-drop-shadow-alpha: 100%;
2371
+ --tw-drop-shadow-size: initial;
887
2372
  --tw-backdrop-blur: initial;
888
2373
  --tw-backdrop-brightness: initial;
889
2374
  --tw-backdrop-contrast: initial;
@@ -893,6 +2378,8 @@
893
2378
  --tw-backdrop-opacity: initial;
894
2379
  --tw-backdrop-saturate: initial;
895
2380
  --tw-backdrop-sepia: initial;
2381
+ --tw-duration: initial;
2382
+ --tw-ease: initial;
896
2383
  }
897
2384
  }
898
2385
  }