@jameskabz/nextcraft-ui 0.3.0 → 0.5.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/dist/styles.css CHANGED
@@ -4,16 +4,23 @@
4
4
  @layer theme {
5
5
  :root, :host {
6
6
  --color-amber-200: oklch(92.4% 0.12 95.746);
7
+ --color-amber-400: oklch(82.8% 0.189 84.429);
7
8
  --color-emerald-200: oklch(90.5% 0.093 164.15);
9
+ --color-emerald-400: oklch(76.5% 0.177 163.223);
8
10
  --color-violet-200: oklch(89.4% 0.057 293.283);
11
+ --color-rose-400: oklch(71.2% 0.194 13.428);
9
12
  --color-slate-300: oklch(86.9% 0.022 252.894);
10
- --color-slate-400: oklch(70.4% 0.04 256.788);
11
13
  --color-slate-900: oklch(20.8% 0.042 265.755);
12
- --color-slate-950: oklch(12.9% 0.042 264.695);
14
+ --color-black: #000;
13
15
  --color-white: #fff;
14
16
  --spacing: 0.25rem;
17
+ --container-xs: 20rem;
18
+ --container-sm: 24rem;
15
19
  --container-md: 28rem;
20
+ --container-3xl: 48rem;
21
+ --container-5xl: 64rem;
16
22
  --container-6xl: 72rem;
23
+ --container-7xl: 80rem;
17
24
  --text-xs: 0.75rem;
18
25
  --text-xs--line-height: calc(1 / 0.75);
19
26
  --text-sm: 0.875rem;
@@ -34,10 +41,12 @@
34
41
  --font-weight-semibold: 600;
35
42
  --font-weight-bold: 700;
36
43
  --tracking-wide: 0.025em;
44
+ --radius-md: 0.375rem;
37
45
  --radius-lg: 0.5rem;
38
46
  --radius-xl: 0.75rem;
39
47
  --radius-2xl: 1rem;
40
48
  --radius-3xl: 1.5rem;
49
+ --animate-spin: spin 1s linear infinite;
41
50
  --blur-sm: 8px;
42
51
  --blur-md: 12px;
43
52
  --blur-xl: 24px;
@@ -197,33 +206,122 @@
197
206
  }
198
207
  }
199
208
  @layer utilities {
209
+ .pointer-events-none {
210
+ pointer-events: none;
211
+ }
212
+ .sr-only {
213
+ position: absolute;
214
+ width: 1px;
215
+ height: 1px;
216
+ padding: 0;
217
+ margin: -1px;
218
+ overflow: hidden;
219
+ clip-path: inset(50%);
220
+ white-space: nowrap;
221
+ border-width: 0;
222
+ }
200
223
  .absolute {
201
224
  position: absolute;
202
225
  }
226
+ .fixed {
227
+ position: fixed;
228
+ }
203
229
  .relative {
204
230
  position: relative;
205
231
  }
232
+ .inset-0 {
233
+ inset: calc(var(--spacing) * 0);
234
+ }
235
+ .top-0 {
236
+ top: calc(var(--spacing) * 0);
237
+ }
238
+ .top-0\.5 {
239
+ top: calc(var(--spacing) * 0.5);
240
+ }
206
241
  .top-1\/2 {
207
242
  top: calc(1/2 * 100%);
208
243
  }
244
+ .top-6 {
245
+ top: calc(var(--spacing) * 6);
246
+ }
247
+ .top-10 {
248
+ top: calc(var(--spacing) * 10);
249
+ }
250
+ .top-full {
251
+ top: 100%;
252
+ }
253
+ .right-0 {
254
+ right: calc(var(--spacing) * 0);
255
+ }
256
+ .right-4 {
257
+ right: calc(var(--spacing) * 4);
258
+ }
259
+ .right-6 {
260
+ right: calc(var(--spacing) * 6);
261
+ }
262
+ .right-full {
263
+ right: 100%;
264
+ }
265
+ .bottom-full {
266
+ bottom: 100%;
267
+ }
268
+ .left-0 {
269
+ left: calc(var(--spacing) * 0);
270
+ }
271
+ .left-0\.5 {
272
+ left: calc(var(--spacing) * 0.5);
273
+ }
274
+ .left-1\/2 {
275
+ left: calc(1/2 * 100%);
276
+ }
209
277
  .left-4 {
210
278
  left: calc(var(--spacing) * 4);
211
279
  }
280
+ .left-full {
281
+ left: 100%;
282
+ }
212
283
  .z-10 {
213
284
  z-index: 10;
214
285
  }
286
+ .z-20 {
287
+ z-index: 20;
288
+ }
289
+ .z-50 {
290
+ z-index: 50;
291
+ }
292
+ .mx-2 {
293
+ margin-inline: calc(var(--spacing) * 2);
294
+ }
215
295
  .mx-auto {
216
296
  margin-inline: auto;
217
297
  }
298
+ .mt-0\.5 {
299
+ margin-top: calc(var(--spacing) * 0.5);
300
+ }
218
301
  .mt-2 {
219
302
  margin-top: calc(var(--spacing) * 2);
220
303
  }
304
+ .mt-3 {
305
+ margin-top: calc(var(--spacing) * 3);
306
+ }
307
+ .mt-4 {
308
+ margin-top: calc(var(--spacing) * 4);
309
+ }
310
+ .mt-5 {
311
+ margin-top: calc(var(--spacing) * 5);
312
+ }
221
313
  .mt-6 {
222
314
  margin-top: calc(var(--spacing) * 6);
223
315
  }
316
+ .mt-auto {
317
+ margin-top: auto;
318
+ }
224
319
  .mb-2 {
225
320
  margin-bottom: calc(var(--spacing) * 2);
226
321
  }
322
+ .mb-4 {
323
+ margin-bottom: calc(var(--spacing) * 4);
324
+ }
227
325
  .mb-6 {
228
326
  margin-bottom: calc(var(--spacing) * 6);
229
327
  }
@@ -239,9 +337,21 @@
239
337
  .grid {
240
338
  display: grid;
241
339
  }
340
+ .hidden {
341
+ display: none;
342
+ }
242
343
  .inline-flex {
243
344
  display: inline-flex;
244
345
  }
346
+ .table {
347
+ display: table;
348
+ }
349
+ .h-3 {
350
+ height: calc(var(--spacing) * 3);
351
+ }
352
+ .h-4 {
353
+ height: calc(var(--spacing) * 4);
354
+ }
245
355
  .h-5 {
246
356
  height: calc(var(--spacing) * 5);
247
357
  }
@@ -266,46 +376,155 @@
266
376
  .h-14 {
267
377
  height: calc(var(--spacing) * 14);
268
378
  }
379
+ .h-\[calc\(100\%-5\.5rem\)\] {
380
+ height: calc(100% - 5.5rem);
381
+ }
382
+ .h-full {
383
+ height: 100%;
384
+ }
385
+ .max-h-\[calc\(100vh-1rem\)\] {
386
+ max-height: calc(100vh - 1rem);
387
+ }
269
388
  .min-h-screen {
270
389
  min-height: 100vh;
271
390
  }
391
+ .w-3 {
392
+ width: calc(var(--spacing) * 3);
393
+ }
394
+ .w-4 {
395
+ width: calc(var(--spacing) * 4);
396
+ }
272
397
  .w-5 {
273
398
  width: calc(var(--spacing) * 5);
274
399
  }
400
+ .w-5\/6 {
401
+ width: calc(5/6 * 100%);
402
+ }
275
403
  .w-6 {
276
404
  width: calc(var(--spacing) * 6);
277
405
  }
406
+ .w-11 {
407
+ width: calc(var(--spacing) * 11);
408
+ }
278
409
  .w-12 {
279
410
  width: calc(var(--spacing) * 12);
280
411
  }
412
+ .w-40 {
413
+ width: calc(var(--spacing) * 40);
414
+ }
415
+ .w-48 {
416
+ width: calc(var(--spacing) * 48);
417
+ }
281
418
  .w-full {
282
419
  width: 100%;
283
420
  }
421
+ .max-w-3xl {
422
+ max-width: var(--container-3xl);
423
+ }
424
+ .max-w-5xl {
425
+ max-width: var(--container-5xl);
426
+ }
284
427
  .max-w-6xl {
285
428
  max-width: var(--container-6xl);
286
429
  }
430
+ .max-w-7xl {
431
+ max-width: var(--container-7xl);
432
+ }
287
433
  .max-w-md {
288
434
  max-width: var(--container-md);
289
435
  }
436
+ .max-w-sm {
437
+ max-width: var(--container-sm);
438
+ }
439
+ .max-w-xs {
440
+ max-width: var(--container-xs);
441
+ }
442
+ .flex-1 {
443
+ flex: 1;
444
+ }
445
+ .border-collapse {
446
+ border-collapse: collapse;
447
+ }
448
+ .-translate-x-1\/2 {
449
+ --tw-translate-x: calc(calc(1/2 * 100%) * -1);
450
+ translate: var(--tw-translate-x) var(--tw-translate-y);
451
+ }
452
+ .-translate-x-2 {
453
+ --tw-translate-x: calc(var(--spacing) * -2);
454
+ translate: var(--tw-translate-x) var(--tw-translate-y);
455
+ }
456
+ .translate-x-2 {
457
+ --tw-translate-x: calc(var(--spacing) * 2);
458
+ translate: var(--tw-translate-x) var(--tw-translate-y);
459
+ }
290
460
  .-translate-y-1\/2 {
291
461
  --tw-translate-y: calc(calc(1/2 * 100%) * -1);
292
462
  translate: var(--tw-translate-x) var(--tw-translate-y);
293
463
  }
464
+ .-translate-y-2 {
465
+ --tw-translate-y: calc(var(--spacing) * -2);
466
+ translate: var(--tw-translate-x) var(--tw-translate-y);
467
+ }
468
+ .translate-y-0 {
469
+ --tw-translate-y: calc(var(--spacing) * 0);
470
+ translate: var(--tw-translate-x) var(--tw-translate-y);
471
+ }
472
+ .translate-y-1 {
473
+ --tw-translate-y: calc(var(--spacing) * 1);
474
+ translate: var(--tw-translate-x) var(--tw-translate-y);
475
+ }
476
+ .translate-y-2 {
477
+ --tw-translate-y: calc(var(--spacing) * 2);
478
+ translate: var(--tw-translate-x) var(--tw-translate-y);
479
+ }
294
480
  .transform {
295
481
  transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
296
482
  }
483
+ .animate-spin {
484
+ animation: var(--animate-spin);
485
+ }
486
+ .cursor-default {
487
+ cursor: default;
488
+ }
489
+ .cursor-not-allowed {
490
+ cursor: not-allowed;
491
+ }
492
+ .cursor-pointer {
493
+ cursor: pointer;
494
+ }
495
+ .appearance-none {
496
+ appearance: none;
497
+ }
498
+ .grid-cols-1 {
499
+ grid-template-columns: repeat(1, minmax(0, 1fr));
500
+ }
297
501
  .grid-cols-3 {
298
502
  grid-template-columns: repeat(3, minmax(0, 1fr));
299
503
  }
504
+ .grid-cols-7 {
505
+ grid-template-columns: repeat(7, minmax(0, 1fr));
506
+ }
507
+ .flex-col {
508
+ flex-direction: column;
509
+ }
300
510
  .flex-wrap {
301
511
  flex-wrap: wrap;
302
512
  }
303
513
  .items-center {
304
514
  align-items: center;
305
515
  }
516
+ .items-start {
517
+ align-items: flex-start;
518
+ }
519
+ .justify-between {
520
+ justify-content: space-between;
521
+ }
306
522
  .justify-center {
307
523
  justify-content: center;
308
524
  }
525
+ .justify-end {
526
+ justify-content: flex-end;
527
+ }
309
528
  .gap-2 {
310
529
  gap: calc(var(--spacing) * 2);
311
530
  }
@@ -318,6 +537,19 @@
318
537
  .gap-6 {
319
538
  gap: calc(var(--spacing) * 6);
320
539
  }
540
+ .gap-8 {
541
+ gap: calc(var(--spacing) * 8);
542
+ }
543
+ .gap-10 {
544
+ gap: calc(var(--spacing) * 10);
545
+ }
546
+ .space-y-1 {
547
+ :where(& > :not(:last-child)) {
548
+ --tw-space-y-reverse: 0;
549
+ margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));
550
+ margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
551
+ }
552
+ }
321
553
  .space-y-2 {
322
554
  :where(& > :not(:last-child)) {
323
555
  --tw-space-y-reverse: 0;
@@ -339,6 +571,13 @@
339
571
  margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
340
572
  }
341
573
  }
574
+ .space-y-5 {
575
+ :where(& > :not(:last-child)) {
576
+ --tw-space-y-reverse: 0;
577
+ margin-block-start: calc(calc(var(--spacing) * 5) * var(--tw-space-y-reverse));
578
+ margin-block-end: calc(calc(var(--spacing) * 5) * calc(1 - var(--tw-space-y-reverse)));
579
+ }
580
+ }
342
581
  .space-y-6 {
343
582
  :where(& > :not(:last-child)) {
344
583
  --tw-space-y-reverse: 0;
@@ -346,6 +585,13 @@
346
585
  margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
347
586
  }
348
587
  }
588
+ .space-y-10 {
589
+ :where(& > :not(:last-child)) {
590
+ --tw-space-y-reverse: 0;
591
+ margin-block-start: calc(calc(var(--spacing) * 10) * var(--tw-space-y-reverse));
592
+ margin-block-end: calc(calc(var(--spacing) * 10) * calc(1 - var(--tw-space-y-reverse)));
593
+ }
594
+ }
349
595
  .space-y-12 {
350
596
  :where(& > :not(:last-child)) {
351
597
  --tw-space-y-reverse: 0;
@@ -356,15 +602,24 @@
356
602
  .overflow-hidden {
357
603
  overflow: hidden;
358
604
  }
605
+ .overflow-y-auto {
606
+ overflow-y: auto;
607
+ }
359
608
  .rounded-2xl {
360
609
  border-radius: var(--radius-2xl);
361
610
  }
362
611
  .rounded-3xl {
363
612
  border-radius: var(--radius-3xl);
364
613
  }
614
+ .rounded-full {
615
+ border-radius: calc(infinity * 1px);
616
+ }
365
617
  .rounded-lg {
366
618
  border-radius: var(--radius-lg);
367
619
  }
620
+ .rounded-md {
621
+ border-radius: var(--radius-md);
622
+ }
368
623
  .rounded-xl {
369
624
  border-radius: var(--radius-xl);
370
625
  }
@@ -380,24 +635,147 @@
380
635
  border-style: var(--tw-border-style);
381
636
  border-width: 2px;
382
637
  }
638
+ .border-t {
639
+ border-top-style: var(--tw-border-style);
640
+ border-top-width: 1px;
641
+ }
642
+ .border-b {
643
+ border-bottom-style: var(--tw-border-style);
644
+ border-bottom-width: 1px;
645
+ }
646
+ .border-l {
647
+ border-left-style: var(--tw-border-style);
648
+ border-left-width: 1px;
649
+ }
650
+ .border-\[color\:rgb\(var\(--nc-accent-1\)\/0\.4\)\] {
651
+ border-color: rgb(var(--nc-accent-1)/0.4);
652
+ }
383
653
  .border-\[color\:rgb\(var\(--nc-accent-1\)\/0\.5\)\] {
384
654
  border-color: rgb(var(--nc-accent-1)/0.5);
385
655
  }
656
+ .border-\[color\:rgb\(var\(--nc-accent-1\)\/0\.6\)\] {
657
+ border-color: rgb(var(--nc-accent-1)/0.6);
658
+ }
386
659
  .border-\[rgb\(var\(--nc-accent-1\)\/0\.3\)\] {
387
660
  border-color: rgb(var(--nc-accent-1)/0.3);
388
661
  }
662
+ .border-\[rgb\(var\(--nc-accent-1\)\/0\.6\)\] {
663
+ border-color: rgb(var(--nc-accent-1)/0.6);
664
+ }
665
+ .border-\[rgb\(var\(--nc-border\)\/0\.3\)\] {
666
+ border-color: rgb(var(--nc-border)/0.3);
667
+ }
668
+ .border-\[rgb\(var\(--nc-border\)\/0\.15\)\] {
669
+ border-color: rgb(var(--nc-border)/0.15);
670
+ }
671
+ .border-\[rgb\(var\(--nc-border\)\/0\.35\)\] {
672
+ border-color: rgb(var(--nc-border)/0.35);
673
+ }
674
+ .border-\[rgb\(var\(--nc-border\)\/0\.45\)\] {
675
+ border-color: rgb(var(--nc-border)/0.45);
676
+ }
677
+ .border-\[rgb\(var\(--nc-fg-muted\)\)\] {
678
+ border-color: rgb(var(--nc-fg-muted));
679
+ }
680
+ .border-amber-400\/40 {
681
+ border-color: color-mix(in srgb, oklch(82.8% 0.189 84.429) 40%, transparent);
682
+ @supports (color: color-mix(in lab, red, red)) {
683
+ border-color: color-mix(in oklab, var(--color-amber-400) 40%, transparent);
684
+ }
685
+ }
686
+ .border-emerald-400\/40 {
687
+ border-color: color-mix(in srgb, oklch(76.5% 0.177 163.223) 40%, transparent);
688
+ @supports (color: color-mix(in lab, red, red)) {
689
+ border-color: color-mix(in oklab, var(--color-emerald-400) 40%, transparent);
690
+ }
691
+ }
692
+ .border-rose-400\/40 {
693
+ border-color: color-mix(in srgb, oklch(71.2% 0.194 13.428) 40%, transparent);
694
+ @supports (color: color-mix(in lab, red, red)) {
695
+ border-color: color-mix(in oklab, var(--color-rose-400) 40%, transparent);
696
+ }
697
+ }
698
+ .border-slate-300 {
699
+ border-color: var(--color-slate-300);
700
+ }
389
701
  .border-white\/10 {
390
702
  border-color: color-mix(in srgb, #fff 10%, transparent);
391
703
  @supports (color: color-mix(in lab, red, red)) {
392
704
  border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
393
705
  }
394
706
  }
707
+ .border-white\/60 {
708
+ border-color: color-mix(in srgb, #fff 60%, transparent);
709
+ @supports (color: color-mix(in lab, red, red)) {
710
+ border-color: color-mix(in oklab, var(--color-white) 60%, transparent);
711
+ }
712
+ }
713
+ .border-t-transparent {
714
+ border-top-color: transparent;
715
+ }
716
+ .border-t-white {
717
+ border-top-color: var(--color-white);
718
+ }
719
+ .bg-\[color\:rgb\(var\(--nc-accent-1\)\)\] {
720
+ background-color: rgb(var(--nc-accent-1));
721
+ }
722
+ .bg-\[color\:rgb\(var\(--nc-accent-1\)\/0\.2\)\] {
723
+ background-color: rgb(var(--nc-accent-1)/0.2);
724
+ }
725
+ .bg-\[color\:rgb\(var\(--nc-surface\)\/0\.12\)\] {
726
+ background-color: rgb(var(--nc-surface)/0.12);
727
+ }
728
+ .bg-\[rgb\(var\(--nc-accent-1\)\)\] {
729
+ background-color: rgb(var(--nc-accent-1));
730
+ }
395
731
  .bg-\[rgb\(var\(--nc-accent-1\)\/0\.2\)\] {
396
732
  background-color: rgb(var(--nc-accent-1)/0.2);
397
733
  }
734
+ .bg-\[rgb\(var\(--nc-accent-1\)\/0\.3\)\] {
735
+ background-color: rgb(var(--nc-accent-1)/0.3);
736
+ }
737
+ .bg-\[rgb\(var\(--nc-accent-1\)\/0\.08\)\] {
738
+ background-color: rgb(var(--nc-accent-1)/0.08);
739
+ }
740
+ .bg-\[rgb\(var\(--nc-accent-1\)\/0\.25\)\] {
741
+ background-color: rgb(var(--nc-accent-1)/0.25);
742
+ }
743
+ .bg-\[rgb\(var\(--nc-accent-1\)\/0\.65\)\] {
744
+ background-color: rgb(var(--nc-accent-1)/0.65);
745
+ }
746
+ .bg-\[rgb\(var\(--nc-surface\)\/0\.2\)\] {
747
+ background-color: rgb(var(--nc-surface)/0.2);
748
+ }
749
+ .bg-\[rgb\(var\(--nc-surface\)\/0\.08\)\] {
750
+ background-color: rgb(var(--nc-surface)/0.08);
751
+ }
752
+ .bg-\[rgb\(var\(--nc-surface\)\/0\.12\)\] {
753
+ background-color: rgb(var(--nc-surface)/0.12);
754
+ }
755
+ .bg-\[rgb\(var\(--nc-surface\)\/0\.18\)\] {
756
+ background-color: rgb(var(--nc-surface)/0.18);
757
+ }
758
+ .bg-\[rgb\(var\(--nc-surface\)\/1\.52\)\] {
759
+ background-color: rgb(var(--nc-surface)/1.52);
760
+ }
761
+ .bg-\[rgb\(var\(--nc-surface-muted\)\/0\.9\)\] {
762
+ background-color: rgb(var(--nc-surface-muted)/0.9);
763
+ }
764
+ .bg-background {
765
+ background-color: var(--background);
766
+ }
767
+ .bg-black\/80 {
768
+ background-color: color-mix(in srgb, #000 80%, transparent);
769
+ @supports (color: color-mix(in lab, red, red)) {
770
+ background-color: color-mix(in oklab, var(--color-black) 80%, transparent);
771
+ }
772
+ }
398
773
  .bg-transparent {
399
774
  background-color: transparent;
400
775
  }
776
+ .bg-white {
777
+ background-color: var(--color-white);
778
+ }
401
779
  .bg-white\/5 {
402
780
  background-color: color-mix(in srgb, #fff 5%, transparent);
403
781
  @supports (color: color-mix(in lab, red, red)) {
@@ -440,10 +818,6 @@
440
818
  --tw-gradient-from: rgb(var(--nc-accent-1)/0.15);
441
819
  --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));
442
820
  }
443
- .from-slate-950 {
444
- --tw-gradient-from: var(--color-slate-950);
445
- --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));
446
- }
447
821
  .via-\[rgb\(var\(--nc-accent-2\)\)\] {
448
822
  --tw-gradient-via: rgb(var(--nc-accent-2));
449
823
  --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);
@@ -454,11 +828,6 @@
454
828
  --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);
455
829
  --tw-gradient-stops: var(--tw-gradient-via-stops);
456
830
  }
457
- .via-slate-900 {
458
- --tw-gradient-via: var(--color-slate-900);
459
- --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);
460
- --tw-gradient-stops: var(--tw-gradient-via-stops);
461
- }
462
831
  .to-\[rgb\(var\(--nc-accent-3\)\)\] {
463
832
  --tw-gradient-to: rgb(var(--nc-accent-3));
464
833
  --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));
@@ -467,19 +836,30 @@
467
836
  --tw-gradient-to: rgb(var(--nc-accent-3)/0.15);
468
837
  --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));
469
838
  }
470
- .to-slate-950 {
471
- --tw-gradient-to: var(--color-slate-950);
472
- --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));
473
- }
474
839
  .bg-clip-text {
475
840
  background-clip: text;
476
841
  }
842
+ .p-2 {
843
+ padding: calc(var(--spacing) * 2);
844
+ }
845
+ .p-3 {
846
+ padding: calc(var(--spacing) * 3);
847
+ }
848
+ .p-4 {
849
+ padding: calc(var(--spacing) * 4);
850
+ }
477
851
  .p-6 {
478
852
  padding: calc(var(--spacing) * 6);
479
853
  }
480
854
  .p-8 {
481
855
  padding: calc(var(--spacing) * 8);
482
856
  }
857
+ .p-12 {
858
+ padding: calc(var(--spacing) * 12);
859
+ }
860
+ .px-2 {
861
+ padding-inline: calc(var(--spacing) * 2);
862
+ }
483
863
  .px-3 {
484
864
  padding-inline: calc(var(--spacing) * 3);
485
865
  }
@@ -498,18 +878,48 @@
498
878
  .py-1 {
499
879
  padding-block: calc(var(--spacing) * 1);
500
880
  }
881
+ .py-2 {
882
+ padding-block: calc(var(--spacing) * 2);
883
+ }
501
884
  .py-3 {
502
885
  padding-block: calc(var(--spacing) * 3);
503
886
  }
887
+ .py-4 {
888
+ padding-block: calc(var(--spacing) * 4);
889
+ }
890
+ .py-8 {
891
+ padding-block: calc(var(--spacing) * 8);
892
+ }
893
+ .py-10 {
894
+ padding-block: calc(var(--spacing) * 10);
895
+ }
896
+ .py-16 {
897
+ padding-block: calc(var(--spacing) * 16);
898
+ }
899
+ .pt-2 {
900
+ padding-top: calc(var(--spacing) * 2);
901
+ }
504
902
  .pt-4 {
505
903
  padding-top: calc(var(--spacing) * 4);
506
904
  }
905
+ .pr-10 {
906
+ padding-right: calc(var(--spacing) * 10);
907
+ }
908
+ .pl-9 {
909
+ padding-left: calc(var(--spacing) * 9);
910
+ }
507
911
  .pl-12 {
508
912
  padding-left: calc(var(--spacing) * 12);
509
913
  }
510
914
  .text-center {
511
915
  text-align: center;
512
916
  }
917
+ .text-left {
918
+ text-align: left;
919
+ }
920
+ .text-right {
921
+ text-align: right;
922
+ }
513
923
  .text-2xl {
514
924
  font-size: var(--text-2xl);
515
925
  line-height: var(--tw-leading, var(--text-2xl--line-height));
@@ -554,22 +964,41 @@
554
964
  --tw-font-weight: var(--font-weight-semibold);
555
965
  font-weight: var(--font-weight-semibold);
556
966
  }
967
+ .tracking-\[0\.2em\] {
968
+ --tw-tracking: 0.2em;
969
+ letter-spacing: 0.2em;
970
+ }
557
971
  .tracking-wide {
558
972
  --tw-tracking: var(--tracking-wide);
559
973
  letter-spacing: var(--tracking-wide);
560
974
  }
975
+ .whitespace-nowrap {
976
+ white-space: nowrap;
977
+ }
561
978
  .text-\[color\:rgb\(var\(--nc-accent-1\)\)\] {
562
979
  color: rgb(var(--nc-accent-1));
563
980
  }
564
981
  .text-\[rgb\(var\(--nc-accent-1\)\)\] {
565
982
  color: rgb(var(--nc-accent-1));
566
983
  }
984
+ .text-\[rgb\(var\(--nc-accent-3\)\)\] {
985
+ color: rgb(var(--nc-accent-3));
986
+ }
567
987
  .text-\[rgb\(var\(--nc-accent-soft\)\)\] {
568
988
  color: rgb(var(--nc-accent-soft));
569
989
  }
570
990
  .text-\[rgb\(var\(--nc-accent-soft\)\/0\.7\)\] {
571
991
  color: rgb(var(--nc-accent-soft)/0.7);
572
992
  }
993
+ .text-\[rgb\(var\(--nc-fg\)\)\] {
994
+ color: rgb(var(--nc-fg));
995
+ }
996
+ .text-\[rgb\(var\(--nc-fg-muted\)\)\] {
997
+ color: rgb(var(--nc-fg-muted));
998
+ }
999
+ .text-\[rgb\(var\(--nc-fg-soft\)\)\] {
1000
+ color: rgb(var(--nc-fg-soft));
1001
+ }
573
1002
  .text-amber-200 {
574
1003
  color: var(--color-amber-200);
575
1004
  }
@@ -579,9 +1008,6 @@
579
1008
  .text-slate-300 {
580
1009
  color: var(--color-slate-300);
581
1010
  }
582
- .text-slate-400 {
583
- color: var(--color-slate-400);
584
- }
585
1011
  .text-slate-900 {
586
1012
  color: var(--color-slate-900);
587
1013
  }
@@ -594,16 +1020,10 @@
594
1020
  .text-white {
595
1021
  color: var(--color-white);
596
1022
  }
597
- .text-white\/50 {
598
- color: color-mix(in srgb, #fff 50%, transparent);
1023
+ .text-white\/60 {
1024
+ color: color-mix(in srgb, #fff 60%, transparent);
599
1025
  @supports (color: color-mix(in lab, red, red)) {
600
- color: color-mix(in oklab, var(--color-white) 50%, transparent);
601
- }
602
- }
603
- .text-white\/70 {
604
- color: color-mix(in srgb, #fff 70%, transparent);
605
- @supports (color: color-mix(in lab, red, red)) {
606
- color: color-mix(in oklab, var(--color-white) 70%, transparent);
1026
+ color: color-mix(in oklab, var(--color-white) 60%, transparent);
607
1027
  }
608
1028
  }
609
1029
  .text-white\/80 {
@@ -612,14 +1032,47 @@
612
1032
  color: color-mix(in oklab, var(--color-white) 80%, transparent);
613
1033
  }
614
1034
  }
1035
+ .uppercase {
1036
+ text-transform: uppercase;
1037
+ }
615
1038
  .antialiased {
616
1039
  -webkit-font-smoothing: antialiased;
617
1040
  -moz-osx-font-smoothing: grayscale;
618
1041
  }
1042
+ .accent-\[rgb\(var\(--nc-accent-1\)\)\] {
1043
+ accent-color: rgb(var(--nc-accent-1));
1044
+ }
1045
+ .opacity-0 {
1046
+ opacity: 0%;
1047
+ }
1048
+ .opacity-40 {
1049
+ opacity: 40%;
1050
+ }
1051
+ .opacity-50 {
1052
+ opacity: 50%;
1053
+ }
1054
+ .opacity-60 {
1055
+ opacity: 60%;
1056
+ }
1057
+ .opacity-100 {
1058
+ opacity: 100%;
1059
+ }
1060
+ .shadow-\[0_7px_5px_rgb\(var\(--nc-accent-1\)\/0\.35\)\] {
1061
+ --tw-shadow: 0 7px 5px var(--tw-shadow-color, rgb(var(--nc-accent-1)/0.35));
1062
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1063
+ }
619
1064
  .shadow-\[0_8px_32px_rgba\(0\,0\,0\,0\.3\)\] {
620
1065
  --tw-shadow: 0 8px 32px var(--tw-shadow-color, rgba(0,0,0,0.3));
621
1066
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
622
1067
  }
1068
+ .shadow-\[0_10px_20px_rgb\(var\(--nc-accent-1\)\/0\.35\)\] {
1069
+ --tw-shadow: 0 10px 20px var(--tw-shadow-color, rgb(var(--nc-accent-1)/0.35));
1070
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1071
+ }
1072
+ .shadow-\[0_12px_30px_rgb\(var\(--nc-accent-1\)\/0\.35\)\] {
1073
+ --tw-shadow: 0 12px 30px var(--tw-shadow-color, rgb(var(--nc-accent-1)/0.35));
1074
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1075
+ }
623
1076
  .shadow-\[0_12px_30px_rgb\(var\(--nc-accent-1\)\/0\.45\)\] {
624
1077
  --tw-shadow: 0 12px 30px var(--tw-shadow-color, rgb(var(--nc-accent-1)/0.45));
625
1078
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -628,6 +1081,38 @@
628
1081
  --tw-shadow: 0 12px 30px var(--tw-shadow-color, rgb(var(--nc-accent-2)/0.45));
629
1082
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
630
1083
  }
1084
+ .shadow-\[0_12px_30px_rgba\(0\,0\,0\,0\.35\)\] {
1085
+ --tw-shadow: 0 12px 30px var(--tw-shadow-color, rgba(0,0,0,0.35));
1086
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1087
+ }
1088
+ .shadow-\[0_12px_36px_rgba\(0\,0\,0\,0\.2\)\] {
1089
+ --tw-shadow: 0 12px 36px var(--tw-shadow-color, rgba(0,0,0,0.2));
1090
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1091
+ }
1092
+ .shadow-\[0_15px_35px_rgba\(0\,0\,0\,0\.35\)\] {
1093
+ --tw-shadow: 0 15px 35px var(--tw-shadow-color, rgba(0,0,0,0.35));
1094
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1095
+ }
1096
+ .shadow-\[0_18px_40px_rgba\(0\,0\,0\,0\.25\)\] {
1097
+ --tw-shadow: 0 18px 40px var(--tw-shadow-color, rgba(0,0,0,0.25));
1098
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1099
+ }
1100
+ .shadow-\[0_18px_40px_rgba\(0\,0\,0\,0\.35\)\] {
1101
+ --tw-shadow: 0 18px 40px var(--tw-shadow-color, rgba(0,0,0,0.35));
1102
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1103
+ }
1104
+ .shadow-\[0_18px_50px_rgba\(0\,0\,0\,0\.35\)\] {
1105
+ --tw-shadow: 0 18px 50px var(--tw-shadow-color, rgba(0,0,0,0.35));
1106
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1107
+ }
1108
+ .shadow-\[0_20px_60px_rgba\(0\,0\,0\,0\.45\)\] {
1109
+ --tw-shadow: 0 20px 60px var(--tw-shadow-color, rgba(0,0,0,0.45));
1110
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1111
+ }
1112
+ .shadow-\[0_20px_60px_rgba\(0\,0\,0\,0\.55\)\] {
1113
+ --tw-shadow: 0 20px 60px var(--tw-shadow-color, rgba(0,0,0,0.55));
1114
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1115
+ }
631
1116
  .shadow-\[inset_0_1px_0_rgba\(255\,255\,255\,0\.06\)\] {
632
1117
  --tw-shadow: inset 0 1px 0 var(--tw-shadow-color, rgba(255,255,255,0.06));
633
1118
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -636,6 +1121,14 @@
636
1121
  --tw-shadow: inset 0 2px 8px var(--tw-shadow-color, rgba(0,0,0,0.3));
637
1122
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
638
1123
  }
1124
+ .shadow-lg {
1125
+ --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));
1126
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1127
+ }
1128
+ .shadow-sm {
1129
+ --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));
1130
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1131
+ }
639
1132
  .outline {
640
1133
  outline-style: var(--tw-outline-style);
641
1134
  outline-width: 1px;
@@ -644,6 +1137,9 @@
644
1137
  --tw-blur: blur(8px);
645
1138
  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,);
646
1139
  }
1140
+ .filter {
1141
+ 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,);
1142
+ }
647
1143
  .backdrop-blur-2xl {
648
1144
  --tw-backdrop-blur: blur(var(--blur-2xl));
649
1145
  -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,);
@@ -664,11 +1160,21 @@
664
1160
  -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,);
665
1161
  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,);
666
1162
  }
1163
+ .transition {
1164
+ transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
1165
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
1166
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
1167
+ }
667
1168
  .transition-all {
668
1169
  transition-property: all;
669
1170
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
670
1171
  transition-duration: var(--tw-duration, var(--default-transition-duration));
671
1172
  }
1173
+ .transition-opacity {
1174
+ transition-property: opacity;
1175
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
1176
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
1177
+ }
672
1178
  .duration-200 {
673
1179
  --tw-duration: 200ms;
674
1180
  transition-duration: 200ms;
@@ -681,9 +1187,99 @@
681
1187
  --tw-outline-style: none;
682
1188
  outline-style: none;
683
1189
  }
684
- .placeholder\:text-\[rgb\(var\(--nc-accent-soft\)\/0\.4\)\] {
1190
+ .peer-checked\:translate-x-5 {
1191
+ &:is(:where(.peer):checked ~ *) {
1192
+ --tw-translate-x: calc(var(--spacing) * 5);
1193
+ translate: var(--tw-translate-x) var(--tw-translate-y);
1194
+ }
1195
+ }
1196
+ .peer-checked\:border-\[rgb\(var\(--nc-accent-1\)\)\] {
1197
+ &:is(:where(.peer):checked ~ *) {
1198
+ border-color: rgb(var(--nc-accent-1));
1199
+ }
1200
+ }
1201
+ .peer-checked\:border-\[rgb\(var\(--nc-accent-1\)\/0\.6\)\] {
1202
+ &:is(:where(.peer):checked ~ *) {
1203
+ border-color: rgb(var(--nc-accent-1)/0.6);
1204
+ }
1205
+ }
1206
+ .peer-checked\:bg-\[rgb\(var\(--nc-accent-1\)\/0\.25\)\] {
1207
+ &:is(:where(.peer):checked ~ *) {
1208
+ background-color: rgb(var(--nc-accent-1)/0.25);
1209
+ }
1210
+ }
1211
+ .peer-checked\:bg-\[rgb\(var\(--nc-surface-muted\)\)\] {
1212
+ &:is(:where(.peer):checked ~ *) {
1213
+ background-color: rgb(var(--nc-surface-muted));
1214
+ }
1215
+ }
1216
+ .peer-checked\:opacity-100 {
1217
+ &:is(:where(.peer):checked ~ *) {
1218
+ opacity: 100%;
1219
+ }
1220
+ }
1221
+ .peer-focus-visible\:ring-2 {
1222
+ &:is(:where(.peer):focus-visible ~ *) {
1223
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
1224
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1225
+ }
1226
+ }
1227
+ .peer-focus-visible\:ring-\[rgb\(var\(--nc-accent-1\)\/0\.5\)\] {
1228
+ &:is(:where(.peer):focus-visible ~ *) {
1229
+ --tw-ring-color: rgb(var(--nc-accent-1)/0.5);
1230
+ }
1231
+ }
1232
+ .file\:mr-4 {
1233
+ &::file-selector-button {
1234
+ margin-right: calc(var(--spacing) * 4);
1235
+ }
1236
+ }
1237
+ .file\:rounded-xl {
1238
+ &::file-selector-button {
1239
+ border-radius: var(--radius-xl);
1240
+ }
1241
+ }
1242
+ .file\:border-0 {
1243
+ &::file-selector-button {
1244
+ border-style: var(--tw-border-style);
1245
+ border-width: 0px;
1246
+ }
1247
+ }
1248
+ .file\:bg-\[rgb\(var\(--nc-surface\)\/0\.35\)\] {
1249
+ &::file-selector-button {
1250
+ background-color: rgb(var(--nc-surface)/0.35);
1251
+ }
1252
+ }
1253
+ .file\:px-4 {
1254
+ &::file-selector-button {
1255
+ padding-inline: calc(var(--spacing) * 4);
1256
+ }
1257
+ }
1258
+ .file\:py-2 {
1259
+ &::file-selector-button {
1260
+ padding-block: calc(var(--spacing) * 2);
1261
+ }
1262
+ }
1263
+ .file\:text-sm {
1264
+ &::file-selector-button {
1265
+ font-size: var(--text-sm);
1266
+ line-height: var(--tw-leading, var(--text-sm--line-height));
1267
+ }
1268
+ }
1269
+ .file\:font-semibold {
1270
+ &::file-selector-button {
1271
+ --tw-font-weight: var(--font-weight-semibold);
1272
+ font-weight: var(--font-weight-semibold);
1273
+ }
1274
+ }
1275
+ .file\:text-\[rgb\(var\(--nc-fg\)\)\] {
1276
+ &::file-selector-button {
1277
+ color: rgb(var(--nc-fg));
1278
+ }
1279
+ }
1280
+ .placeholder\:text-\[rgb\(var\(--nc-fg-soft\)\)\] {
685
1281
  &::placeholder {
686
- color: rgb(var(--nc-accent-soft)/0.4);
1282
+ color: rgb(var(--nc-fg-soft));
687
1283
  }
688
1284
  }
689
1285
  .before\:absolute {
@@ -803,6 +1399,77 @@
803
1399
  transition-duration: 300ms;
804
1400
  }
805
1401
  }
1402
+ .after\:absolute {
1403
+ &::after {
1404
+ content: var(--tw-content);
1405
+ position: absolute;
1406
+ }
1407
+ }
1408
+ .after\:inset-0 {
1409
+ &::after {
1410
+ content: var(--tw-content);
1411
+ inset: calc(var(--spacing) * 0);
1412
+ }
1413
+ }
1414
+ .after\:-translate-x-full {
1415
+ &::after {
1416
+ content: var(--tw-content);
1417
+ --tw-translate-x: -100%;
1418
+ translate: var(--tw-translate-x) var(--tw-translate-y);
1419
+ }
1420
+ }
1421
+ .after\:animate-\[shimmer_1\.6s_infinite\] {
1422
+ &::after {
1423
+ content: var(--tw-content);
1424
+ animation: shimmer 1.6s infinite;
1425
+ }
1426
+ }
1427
+ .after\:bg-linear-to-r {
1428
+ &::after {
1429
+ content: var(--tw-content);
1430
+ --tw-gradient-position: to right;
1431
+ @supports (background-image: linear-gradient(in lab, red, red)) {
1432
+ --tw-gradient-position: to right in oklab;
1433
+ }
1434
+ background-image: linear-gradient(var(--tw-gradient-stops));
1435
+ }
1436
+ }
1437
+ .after\:from-transparent {
1438
+ &::after {
1439
+ content: var(--tw-content);
1440
+ --tw-gradient-from: transparent;
1441
+ --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));
1442
+ }
1443
+ }
1444
+ .after\:via-white\/20 {
1445
+ &::after {
1446
+ content: var(--tw-content);
1447
+ --tw-gradient-via: color-mix(in srgb, #fff 20%, transparent);
1448
+ @supports (color: color-mix(in lab, red, red)) {
1449
+ --tw-gradient-via: color-mix(in oklab, var(--color-white) 20%, transparent);
1450
+ }
1451
+ --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);
1452
+ --tw-gradient-stops: var(--tw-gradient-via-stops);
1453
+ }
1454
+ }
1455
+ .after\:to-transparent {
1456
+ &::after {
1457
+ content: var(--tw-content);
1458
+ --tw-gradient-to: transparent;
1459
+ --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));
1460
+ }
1461
+ }
1462
+ .focus-within\:ring-2 {
1463
+ &:focus-within {
1464
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
1465
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1466
+ }
1467
+ }
1468
+ .focus-within\:ring-\[rgb\(var\(--nc-accent-1\)\/0\.5\)\] {
1469
+ &:focus-within {
1470
+ --tw-ring-color: rgb(var(--nc-accent-1)/0.5);
1471
+ }
1472
+ }
806
1473
  .hover\:scale-\[1\.01\] {
807
1474
  &:hover {
808
1475
  @media (hover: hover) {
@@ -824,13 +1491,10 @@
824
1491
  }
825
1492
  }
826
1493
  }
827
- .hover\:border-white\/20 {
1494
+ .hover\:border-\[color\:rgb\(var\(--nc-border\)\/0\.5\)\] {
828
1495
  &:hover {
829
1496
  @media (hover: hover) {
830
- border-color: color-mix(in srgb, #fff 20%, transparent);
831
- @supports (color: color-mix(in lab, red, red)) {
832
- border-color: color-mix(in oklab, var(--color-white) 20%, transparent);
833
- }
1497
+ border-color: rgb(var(--nc-border)/0.5);
834
1498
  }
835
1499
  }
836
1500
  }
@@ -841,6 +1505,34 @@
841
1505
  }
842
1506
  }
843
1507
  }
1508
+ .hover\:bg-\[color\:rgb\(var\(--nc-surface\)\/0\.18\)\] {
1509
+ &:hover {
1510
+ @media (hover: hover) {
1511
+ background-color: rgb(var(--nc-surface)/0.18);
1512
+ }
1513
+ }
1514
+ }
1515
+ .hover\:bg-\[rgb\(var\(--nc-surface\)\/0\.2\)\] {
1516
+ &:hover {
1517
+ @media (hover: hover) {
1518
+ background-color: rgb(var(--nc-surface)/0.2);
1519
+ }
1520
+ }
1521
+ }
1522
+ .hover\:bg-\[rgb\(var\(--nc-surface\)\/0\.12\)\] {
1523
+ &:hover {
1524
+ @media (hover: hover) {
1525
+ background-color: rgb(var(--nc-surface)/0.12);
1526
+ }
1527
+ }
1528
+ }
1529
+ .hover\:bg-transparent {
1530
+ &:hover {
1531
+ @media (hover: hover) {
1532
+ background-color: transparent;
1533
+ }
1534
+ }
1535
+ }
844
1536
  .hover\:bg-white\/10 {
845
1537
  &:hover {
846
1538
  @media (hover: hover) {
@@ -851,6 +1543,13 @@
851
1543
  }
852
1544
  }
853
1545
  }
1546
+ .hover\:text-\[rgb\(var\(--nc-fg\)\)\] {
1547
+ &:hover {
1548
+ @media (hover: hover) {
1549
+ color: rgb(var(--nc-fg));
1550
+ }
1551
+ }
1552
+ }
854
1553
  .hover\:shadow-\[0_8px_40px_rgba\(0\,0\,0\,0\.4\)\] {
855
1554
  &:hover {
856
1555
  @media (hover: hover) {
@@ -859,6 +1558,14 @@
859
1558
  }
860
1559
  }
861
1560
  }
1561
+ .hover\:shadow-\[0_16px_36px_rgb\(var\(--nc-accent-1\)\/0\.5\)\] {
1562
+ &:hover {
1563
+ @media (hover: hover) {
1564
+ --tw-shadow: 0 16px 36px var(--tw-shadow-color, rgb(var(--nc-accent-1)/0.5));
1565
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1566
+ }
1567
+ }
1568
+ }
862
1569
  .hover\:shadow-\[0_16px_36px_rgb\(var\(--nc-accent-1\)\/0\.6\)\] {
863
1570
  &:hover {
864
1571
  @media (hover: hover) {
@@ -967,6 +1674,11 @@
967
1674
  opacity: 50%;
968
1675
  }
969
1676
  }
1677
+ .disabled\:opacity-60 {
1678
+ &:disabled {
1679
+ opacity: 60%;
1680
+ }
1681
+ }
970
1682
  .disabled\:hover\:scale-100 {
971
1683
  &:disabled {
972
1684
  &:hover {
@@ -979,20 +1691,132 @@
979
1691
  }
980
1692
  }
981
1693
  }
1694
+ .sm\:px-6 {
1695
+ @media (width >= 40rem) {
1696
+ padding-inline: calc(var(--spacing) * 6);
1697
+ }
1698
+ }
1699
+ .sm\:px-12 {
1700
+ @media (width >= 40rem) {
1701
+ padding-inline: calc(var(--spacing) * 12);
1702
+ }
1703
+ }
982
1704
  .md\:grid-cols-2 {
983
1705
  @media (width >= 48rem) {
984
1706
  grid-template-columns: repeat(2, minmax(0, 1fr));
985
1707
  }
986
1708
  }
1709
+ .md\:grid-cols-3 {
1710
+ @media (width >= 48rem) {
1711
+ grid-template-columns: repeat(3, minmax(0, 1fr));
1712
+ }
1713
+ }
1714
+ .md\:grid-cols-\[minmax\(0\,1fr\)_auto\] {
1715
+ @media (width >= 48rem) {
1716
+ grid-template-columns: minmax(0,1fr) auto;
1717
+ }
1718
+ }
1719
+ .lg\:sticky {
1720
+ @media (width >= 64rem) {
1721
+ position: sticky;
1722
+ }
1723
+ }
1724
+ .lg\:top-6 {
1725
+ @media (width >= 64rem) {
1726
+ top: calc(var(--spacing) * 6);
1727
+ }
1728
+ }
1729
+ .lg\:z-20 {
1730
+ @media (width >= 64rem) {
1731
+ z-index: 20;
1732
+ }
1733
+ }
1734
+ .lg\:flex {
1735
+ @media (width >= 64rem) {
1736
+ display: flex;
1737
+ }
1738
+ }
1739
+ .lg\:max-h-\[calc\(100vh-3rem\)\] {
1740
+ @media (width >= 64rem) {
1741
+ max-height: calc(100vh - 3rem);
1742
+ }
1743
+ }
987
1744
  .lg\:grid-cols-3 {
988
1745
  @media (width >= 64rem) {
989
1746
  grid-template-columns: repeat(3, minmax(0, 1fr));
990
1747
  }
991
1748
  }
1749
+ .lg\:grid-cols-4 {
1750
+ @media (width >= 64rem) {
1751
+ grid-template-columns: repeat(4, minmax(0, 1fr));
1752
+ }
1753
+ }
1754
+ .lg\:grid-cols-5 {
1755
+ @media (width >= 64rem) {
1756
+ grid-template-columns: repeat(5, minmax(0, 1fr));
1757
+ }
1758
+ }
1759
+ .lg\:grid-cols-6 {
1760
+ @media (width >= 64rem) {
1761
+ grid-template-columns: repeat(6, minmax(0, 1fr));
1762
+ }
1763
+ }
1764
+ .lg\:grid-cols-\[1\.1fr_0\.9fr\] {
1765
+ @media (width >= 64rem) {
1766
+ grid-template-columns: 1.1fr 0.9fr;
1767
+ }
1768
+ }
1769
+ .lg\:grid-cols-\[220px_1fr\] {
1770
+ @media (width >= 64rem) {
1771
+ grid-template-columns: 220px 1fr;
1772
+ }
1773
+ }
1774
+ .lg\:grid-cols-\[260px_1fr\] {
1775
+ @media (width >= 64rem) {
1776
+ grid-template-columns: 260px 1fr;
1777
+ }
1778
+ }
1779
+ .lg\:self-start {
1780
+ @media (width >= 64rem) {
1781
+ align-self: flex-start;
1782
+ }
1783
+ }
1784
+ .lg\:overflow-y-auto {
1785
+ @media (width >= 64rem) {
1786
+ overflow-y: auto;
1787
+ }
1788
+ }
1789
+ .lg\:px-8 {
1790
+ @media (width >= 64rem) {
1791
+ padding-inline: calc(var(--spacing) * 8);
1792
+ }
1793
+ }
1794
+ .dark\:border-white\/10 {
1795
+ @media (prefers-color-scheme: dark) {
1796
+ border-color: color-mix(in srgb, #fff 10%, transparent);
1797
+ @supports (color: color-mix(in lab, red, red)) {
1798
+ border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
1799
+ }
1800
+ }
1801
+ }
1802
+ .dark\:bg-white\/10 {
1803
+ @media (prefers-color-scheme: dark) {
1804
+ background-color: color-mix(in srgb, #fff 10%, transparent);
1805
+ @supports (color: color-mix(in lab, red, red)) {
1806
+ background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
1807
+ }
1808
+ }
1809
+ }
992
1810
  }
993
1811
  :root {
994
1812
  --background: #ffffff;
995
1813
  --foreground: #171717;
1814
+ --nc-fg: 17 24 39;
1815
+ --nc-fg-muted: 71 85 105;
1816
+ --nc-fg-soft: 100 116 139;
1817
+ --nc-surface: 255 255 255;
1818
+ --nc-surface-muted: 248 250 252;
1819
+ --nc-border: 148 163 184;
996
1820
  --nc-accent-1: 56 189 248;
997
1821
  --nc-accent-2: 59 130 246;
998
1822
  --nc-accent-3: 99 102 241;
@@ -1011,6 +1835,12 @@
1011
1835
  [data-nc-mode="dark"] {
1012
1836
  --background: #0a0a0a;
1013
1837
  --foreground: #ededed;
1838
+ --nc-fg: 255 255 255;
1839
+ --nc-fg-muted: 226 232 240;
1840
+ --nc-fg-soft: 148 163 184;
1841
+ --nc-surface: 15 23 42;
1842
+ --nc-surface-muted: 30 41 59;
1843
+ --nc-border: 148 163 184;
1014
1844
  }
1015
1845
  :root, [data-nc-theme="ocean"] {
1016
1846
  --nc-accent-1: 56 189 248;
@@ -1047,6 +1877,14 @@ body {
1047
1877
  color: var(--foreground);
1048
1878
  font-family: Arial, Helvetica, sans-serif;
1049
1879
  }
1880
+ @keyframes shimmer {
1881
+ 0% {
1882
+ transform: translateX(-100%);
1883
+ }
1884
+ 100% {
1885
+ transform: translateX(100%);
1886
+ }
1887
+ }
1050
1888
  @property --tw-translate-x {
1051
1889
  syntax: "*";
1052
1890
  inherits: false;
@@ -1325,6 +2163,11 @@ body {
1325
2163
  inherits: false;
1326
2164
  initial-value: 1;
1327
2165
  }
2166
+ @keyframes spin {
2167
+ to {
2168
+ transform: rotate(360deg);
2169
+ }
2170
+ }
1328
2171
  @layer properties {
1329
2172
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
1330
2173
  *, ::before, ::after, ::backdrop {