@jameskabz/nextcraft-ui 0.3.0 → 0.4.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-sm: 24rem;
15
18
  --container-md: 28rem;
19
+ --container-lg: 32rem;
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,6 +41,7 @@
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;
@@ -197,33 +205,119 @@
197
205
  }
198
206
  }
199
207
  @layer utilities {
208
+ .pointer-events-none {
209
+ pointer-events: none;
210
+ }
211
+ .sr-only {
212
+ position: absolute;
213
+ width: 1px;
214
+ height: 1px;
215
+ padding: 0;
216
+ margin: -1px;
217
+ overflow: hidden;
218
+ clip-path: inset(50%);
219
+ white-space: nowrap;
220
+ border-width: 0;
221
+ }
200
222
  .absolute {
201
223
  position: absolute;
202
224
  }
225
+ .fixed {
226
+ position: fixed;
227
+ }
203
228
  .relative {
204
229
  position: relative;
205
230
  }
231
+ .inset-0 {
232
+ inset: calc(var(--spacing) * 0);
233
+ }
234
+ .top-0 {
235
+ top: calc(var(--spacing) * 0);
236
+ }
237
+ .top-0\.5 {
238
+ top: calc(var(--spacing) * 0.5);
239
+ }
206
240
  .top-1\/2 {
207
241
  top: calc(1/2 * 100%);
208
242
  }
243
+ .top-6 {
244
+ top: calc(var(--spacing) * 6);
245
+ }
246
+ .top-full {
247
+ top: 100%;
248
+ }
249
+ .right-0 {
250
+ right: calc(var(--spacing) * 0);
251
+ }
252
+ .right-4 {
253
+ right: calc(var(--spacing) * 4);
254
+ }
255
+ .right-6 {
256
+ right: calc(var(--spacing) * 6);
257
+ }
258
+ .right-full {
259
+ right: 100%;
260
+ }
261
+ .bottom-full {
262
+ bottom: 100%;
263
+ }
264
+ .left-0 {
265
+ left: calc(var(--spacing) * 0);
266
+ }
267
+ .left-0\.5 {
268
+ left: calc(var(--spacing) * 0.5);
269
+ }
270
+ .left-1\/2 {
271
+ left: calc(1/2 * 100%);
272
+ }
209
273
  .left-4 {
210
274
  left: calc(var(--spacing) * 4);
211
275
  }
276
+ .left-full {
277
+ left: 100%;
278
+ }
212
279
  .z-10 {
213
280
  z-index: 10;
214
281
  }
282
+ .z-20 {
283
+ z-index: 20;
284
+ }
285
+ .z-50 {
286
+ z-index: 50;
287
+ }
288
+ .mx-2 {
289
+ margin-inline: calc(var(--spacing) * 2);
290
+ }
215
291
  .mx-auto {
216
292
  margin-inline: auto;
217
293
  }
294
+ .mt-0\.5 {
295
+ margin-top: calc(var(--spacing) * 0.5);
296
+ }
218
297
  .mt-2 {
219
298
  margin-top: calc(var(--spacing) * 2);
220
299
  }
300
+ .mt-3 {
301
+ margin-top: calc(var(--spacing) * 3);
302
+ }
303
+ .mt-4 {
304
+ margin-top: calc(var(--spacing) * 4);
305
+ }
306
+ .mt-5 {
307
+ margin-top: calc(var(--spacing) * 5);
308
+ }
221
309
  .mt-6 {
222
310
  margin-top: calc(var(--spacing) * 6);
223
311
  }
312
+ .mt-auto {
313
+ margin-top: auto;
314
+ }
224
315
  .mb-2 {
225
316
  margin-bottom: calc(var(--spacing) * 2);
226
317
  }
318
+ .mb-4 {
319
+ margin-bottom: calc(var(--spacing) * 4);
320
+ }
227
321
  .mb-6 {
228
322
  margin-bottom: calc(var(--spacing) * 6);
229
323
  }
@@ -239,9 +333,18 @@
239
333
  .grid {
240
334
  display: grid;
241
335
  }
336
+ .hidden {
337
+ display: none;
338
+ }
242
339
  .inline-flex {
243
340
  display: inline-flex;
244
341
  }
342
+ .h-3 {
343
+ height: calc(var(--spacing) * 3);
344
+ }
345
+ .h-4 {
346
+ height: calc(var(--spacing) * 4);
347
+ }
245
348
  .h-5 {
246
349
  height: calc(var(--spacing) * 5);
247
350
  }
@@ -266,46 +369,137 @@
266
369
  .h-14 {
267
370
  height: calc(var(--spacing) * 14);
268
371
  }
372
+ .h-\[calc\(100\%-5\.5rem\)\] {
373
+ height: calc(100% - 5.5rem);
374
+ }
375
+ .h-full {
376
+ height: 100%;
377
+ }
269
378
  .min-h-screen {
270
379
  min-height: 100vh;
271
380
  }
381
+ .w-3 {
382
+ width: calc(var(--spacing) * 3);
383
+ }
384
+ .w-4 {
385
+ width: calc(var(--spacing) * 4);
386
+ }
272
387
  .w-5 {
273
388
  width: calc(var(--spacing) * 5);
274
389
  }
390
+ .w-5\/6 {
391
+ width: calc(5/6 * 100%);
392
+ }
275
393
  .w-6 {
276
394
  width: calc(var(--spacing) * 6);
277
395
  }
396
+ .w-11 {
397
+ width: calc(var(--spacing) * 11);
398
+ }
278
399
  .w-12 {
279
400
  width: calc(var(--spacing) * 12);
280
401
  }
402
+ .w-40 {
403
+ width: calc(var(--spacing) * 40);
404
+ }
281
405
  .w-full {
282
406
  width: 100%;
283
407
  }
408
+ .max-w-3xl {
409
+ max-width: var(--container-3xl);
410
+ }
411
+ .max-w-5xl {
412
+ max-width: var(--container-5xl);
413
+ }
284
414
  .max-w-6xl {
285
415
  max-width: var(--container-6xl);
286
416
  }
417
+ .max-w-7xl {
418
+ max-width: var(--container-7xl);
419
+ }
420
+ .max-w-lg {
421
+ max-width: var(--container-lg);
422
+ }
287
423
  .max-w-md {
288
424
  max-width: var(--container-md);
289
425
  }
426
+ .max-w-sm {
427
+ max-width: var(--container-sm);
428
+ }
429
+ .flex-1 {
430
+ flex: 1;
431
+ }
432
+ .-translate-x-1\/2 {
433
+ --tw-translate-x: calc(calc(1/2 * 100%) * -1);
434
+ translate: var(--tw-translate-x) var(--tw-translate-y);
435
+ }
436
+ .-translate-x-2 {
437
+ --tw-translate-x: calc(var(--spacing) * -2);
438
+ translate: var(--tw-translate-x) var(--tw-translate-y);
439
+ }
440
+ .translate-x-2 {
441
+ --tw-translate-x: calc(var(--spacing) * 2);
442
+ translate: var(--tw-translate-x) var(--tw-translate-y);
443
+ }
290
444
  .-translate-y-1\/2 {
291
445
  --tw-translate-y: calc(calc(1/2 * 100%) * -1);
292
446
  translate: var(--tw-translate-x) var(--tw-translate-y);
293
447
  }
448
+ .-translate-y-2 {
449
+ --tw-translate-y: calc(var(--spacing) * -2);
450
+ translate: var(--tw-translate-x) var(--tw-translate-y);
451
+ }
452
+ .translate-y-0 {
453
+ --tw-translate-y: calc(var(--spacing) * 0);
454
+ translate: var(--tw-translate-x) var(--tw-translate-y);
455
+ }
456
+ .translate-y-1 {
457
+ --tw-translate-y: calc(var(--spacing) * 1);
458
+ translate: var(--tw-translate-x) var(--tw-translate-y);
459
+ }
460
+ .translate-y-2 {
461
+ --tw-translate-y: calc(var(--spacing) * 2);
462
+ translate: var(--tw-translate-x) var(--tw-translate-y);
463
+ }
294
464
  .transform {
295
465
  transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
296
466
  }
467
+ .cursor-pointer {
468
+ cursor: pointer;
469
+ }
470
+ .appearance-none {
471
+ appearance: none;
472
+ }
473
+ .grid-cols-1 {
474
+ grid-template-columns: repeat(1, minmax(0, 1fr));
475
+ }
297
476
  .grid-cols-3 {
298
477
  grid-template-columns: repeat(3, minmax(0, 1fr));
299
478
  }
479
+ .grid-cols-7 {
480
+ grid-template-columns: repeat(7, minmax(0, 1fr));
481
+ }
482
+ .flex-col {
483
+ flex-direction: column;
484
+ }
300
485
  .flex-wrap {
301
486
  flex-wrap: wrap;
302
487
  }
303
488
  .items-center {
304
489
  align-items: center;
305
490
  }
491
+ .items-start {
492
+ align-items: flex-start;
493
+ }
494
+ .justify-between {
495
+ justify-content: space-between;
496
+ }
306
497
  .justify-center {
307
498
  justify-content: center;
308
499
  }
500
+ .justify-end {
501
+ justify-content: flex-end;
502
+ }
309
503
  .gap-2 {
310
504
  gap: calc(var(--spacing) * 2);
311
505
  }
@@ -318,6 +512,19 @@
318
512
  .gap-6 {
319
513
  gap: calc(var(--spacing) * 6);
320
514
  }
515
+ .gap-8 {
516
+ gap: calc(var(--spacing) * 8);
517
+ }
518
+ .gap-10 {
519
+ gap: calc(var(--spacing) * 10);
520
+ }
521
+ .space-y-1 {
522
+ :where(& > :not(:last-child)) {
523
+ --tw-space-y-reverse: 0;
524
+ margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));
525
+ margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));
526
+ }
527
+ }
321
528
  .space-y-2 {
322
529
  :where(& > :not(:last-child)) {
323
530
  --tw-space-y-reverse: 0;
@@ -346,6 +553,13 @@
346
553
  margin-block-end: calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)));
347
554
  }
348
555
  }
556
+ .space-y-10 {
557
+ :where(& > :not(:last-child)) {
558
+ --tw-space-y-reverse: 0;
559
+ margin-block-start: calc(calc(var(--spacing) * 10) * var(--tw-space-y-reverse));
560
+ margin-block-end: calc(calc(var(--spacing) * 10) * calc(1 - var(--tw-space-y-reverse)));
561
+ }
562
+ }
349
563
  .space-y-12 {
350
564
  :where(& > :not(:last-child)) {
351
565
  --tw-space-y-reverse: 0;
@@ -356,15 +570,24 @@
356
570
  .overflow-hidden {
357
571
  overflow: hidden;
358
572
  }
573
+ .overflow-y-auto {
574
+ overflow-y: auto;
575
+ }
359
576
  .rounded-2xl {
360
577
  border-radius: var(--radius-2xl);
361
578
  }
362
579
  .rounded-3xl {
363
580
  border-radius: var(--radius-3xl);
364
581
  }
582
+ .rounded-full {
583
+ border-radius: calc(infinity * 1px);
584
+ }
365
585
  .rounded-lg {
366
586
  border-radius: var(--radius-lg);
367
587
  }
588
+ .rounded-md {
589
+ border-radius: var(--radius-md);
590
+ }
368
591
  .rounded-xl {
369
592
  border-radius: var(--radius-xl);
370
593
  }
@@ -380,24 +603,117 @@
380
603
  border-style: var(--tw-border-style);
381
604
  border-width: 2px;
382
605
  }
606
+ .border-t {
607
+ border-top-style: var(--tw-border-style);
608
+ border-top-width: 1px;
609
+ }
610
+ .border-b {
611
+ border-bottom-style: var(--tw-border-style);
612
+ border-bottom-width: 1px;
613
+ }
614
+ .border-l {
615
+ border-left-style: var(--tw-border-style);
616
+ border-left-width: 1px;
617
+ }
618
+ .border-\[color\:rgb\(var\(--nc-accent-1\)\/0\.4\)\] {
619
+ border-color: rgb(var(--nc-accent-1)/0.4);
620
+ }
383
621
  .border-\[color\:rgb\(var\(--nc-accent-1\)\/0\.5\)\] {
384
622
  border-color: rgb(var(--nc-accent-1)/0.5);
385
623
  }
624
+ .border-\[color\:rgb\(var\(--nc-accent-1\)\/0\.6\)\] {
625
+ border-color: rgb(var(--nc-accent-1)/0.6);
626
+ }
386
627
  .border-\[rgb\(var\(--nc-accent-1\)\/0\.3\)\] {
387
628
  border-color: rgb(var(--nc-accent-1)/0.3);
388
629
  }
630
+ .border-\[rgb\(var\(--nc-border\)\/0\.3\)\] {
631
+ border-color: rgb(var(--nc-border)/0.3);
632
+ }
633
+ .border-\[rgb\(var\(--nc-border\)\/0\.35\)\] {
634
+ border-color: rgb(var(--nc-border)/0.35);
635
+ }
636
+ .border-\[rgb\(var\(--nc-border\)\/0\.45\)\] {
637
+ border-color: rgb(var(--nc-border)/0.45);
638
+ }
639
+ .border-amber-400\/40 {
640
+ border-color: color-mix(in srgb, oklch(82.8% 0.189 84.429) 40%, transparent);
641
+ @supports (color: color-mix(in lab, red, red)) {
642
+ border-color: color-mix(in oklab, var(--color-amber-400) 40%, transparent);
643
+ }
644
+ }
645
+ .border-emerald-400\/40 {
646
+ border-color: color-mix(in srgb, oklch(76.5% 0.177 163.223) 40%, transparent);
647
+ @supports (color: color-mix(in lab, red, red)) {
648
+ border-color: color-mix(in oklab, var(--color-emerald-400) 40%, transparent);
649
+ }
650
+ }
651
+ .border-rose-400\/40 {
652
+ border-color: color-mix(in srgb, oklch(71.2% 0.194 13.428) 40%, transparent);
653
+ @supports (color: color-mix(in lab, red, red)) {
654
+ border-color: color-mix(in oklab, var(--color-rose-400) 40%, transparent);
655
+ }
656
+ }
657
+ .border-slate-300 {
658
+ border-color: var(--color-slate-300);
659
+ }
389
660
  .border-white\/10 {
390
661
  border-color: color-mix(in srgb, #fff 10%, transparent);
391
662
  @supports (color: color-mix(in lab, red, red)) {
392
663
  border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
393
664
  }
394
665
  }
666
+ .bg-\[color\:rgb\(var\(--nc-accent-1\)\)\] {
667
+ background-color: rgb(var(--nc-accent-1));
668
+ }
669
+ .bg-\[color\:rgb\(var\(--nc-accent-1\)\/0\.2\)\] {
670
+ background-color: rgb(var(--nc-accent-1)/0.2);
671
+ }
672
+ .bg-\[color\:rgb\(var\(--nc-surface\)\/0\.12\)\] {
673
+ background-color: rgb(var(--nc-surface)/0.12);
674
+ }
675
+ .bg-\[rgb\(var\(--nc-accent-1\)\)\] {
676
+ background-color: rgb(var(--nc-accent-1));
677
+ }
395
678
  .bg-\[rgb\(var\(--nc-accent-1\)\/0\.2\)\] {
396
679
  background-color: rgb(var(--nc-accent-1)/0.2);
397
680
  }
681
+ .bg-\[rgb\(var\(--nc-accent-1\)\/0\.3\)\] {
682
+ background-color: rgb(var(--nc-accent-1)/0.3);
683
+ }
684
+ .bg-\[rgb\(var\(--nc-accent-1\)\/0\.25\)\] {
685
+ background-color: rgb(var(--nc-accent-1)/0.25);
686
+ }
687
+ .bg-\[rgb\(var\(--nc-accent-1\)\/0\.65\)\] {
688
+ background-color: rgb(var(--nc-accent-1)/0.65);
689
+ }
690
+ .bg-\[rgb\(var\(--nc-surface\)\/0\.08\)\] {
691
+ background-color: rgb(var(--nc-surface)/0.08);
692
+ }
693
+ .bg-\[rgb\(var\(--nc-surface\)\/0\.12\)\] {
694
+ background-color: rgb(var(--nc-surface)/0.12);
695
+ }
696
+ .bg-\[rgb\(var\(--nc-surface\)\/1\.52\)\] {
697
+ background-color: rgb(var(--nc-surface)/1.52);
698
+ }
699
+ .bg-\[rgb\(var\(--nc-surface-muted\)\/0\.9\)\] {
700
+ background-color: rgb(var(--nc-surface-muted)/0.9);
701
+ }
702
+ .bg-background {
703
+ background-color: var(--background);
704
+ }
705
+ .bg-black\/80 {
706
+ background-color: color-mix(in srgb, #000 80%, transparent);
707
+ @supports (color: color-mix(in lab, red, red)) {
708
+ background-color: color-mix(in oklab, var(--color-black) 80%, transparent);
709
+ }
710
+ }
398
711
  .bg-transparent {
399
712
  background-color: transparent;
400
713
  }
714
+ .bg-white {
715
+ background-color: var(--color-white);
716
+ }
401
717
  .bg-white\/5 {
402
718
  background-color: color-mix(in srgb, #fff 5%, transparent);
403
719
  @supports (color: color-mix(in lab, red, red)) {
@@ -440,10 +756,6 @@
440
756
  --tw-gradient-from: rgb(var(--nc-accent-1)/0.15);
441
757
  --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
758
  }
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
759
  .via-\[rgb\(var\(--nc-accent-2\)\)\] {
448
760
  --tw-gradient-via: rgb(var(--nc-accent-2));
449
761
  --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 +766,6 @@
454
766
  --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
767
  --tw-gradient-stops: var(--tw-gradient-via-stops);
456
768
  }
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
769
  .to-\[rgb\(var\(--nc-accent-3\)\)\] {
463
770
  --tw-gradient-to: rgb(var(--nc-accent-3));
464
771
  --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 +774,24 @@
467
774
  --tw-gradient-to: rgb(var(--nc-accent-3)/0.15);
468
775
  --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
776
  }
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
777
  .bg-clip-text {
475
778
  background-clip: text;
476
779
  }
780
+ .p-2 {
781
+ padding: calc(var(--spacing) * 2);
782
+ }
783
+ .p-4 {
784
+ padding: calc(var(--spacing) * 4);
785
+ }
477
786
  .p-6 {
478
787
  padding: calc(var(--spacing) * 6);
479
788
  }
480
789
  .p-8 {
481
790
  padding: calc(var(--spacing) * 8);
482
791
  }
792
+ .p-12 {
793
+ padding: calc(var(--spacing) * 12);
794
+ }
483
795
  .px-3 {
484
796
  padding-inline: calc(var(--spacing) * 3);
485
797
  }
@@ -498,18 +810,42 @@
498
810
  .py-1 {
499
811
  padding-block: calc(var(--spacing) * 1);
500
812
  }
813
+ .py-2 {
814
+ padding-block: calc(var(--spacing) * 2);
815
+ }
501
816
  .py-3 {
502
817
  padding-block: calc(var(--spacing) * 3);
503
818
  }
819
+ .py-4 {
820
+ padding-block: calc(var(--spacing) * 4);
821
+ }
822
+ .py-8 {
823
+ padding-block: calc(var(--spacing) * 8);
824
+ }
825
+ .py-16 {
826
+ padding-block: calc(var(--spacing) * 16);
827
+ }
828
+ .pt-2 {
829
+ padding-top: calc(var(--spacing) * 2);
830
+ }
504
831
  .pt-4 {
505
832
  padding-top: calc(var(--spacing) * 4);
506
833
  }
834
+ .pr-10 {
835
+ padding-right: calc(var(--spacing) * 10);
836
+ }
837
+ .pl-9 {
838
+ padding-left: calc(var(--spacing) * 9);
839
+ }
507
840
  .pl-12 {
508
841
  padding-left: calc(var(--spacing) * 12);
509
842
  }
510
843
  .text-center {
511
844
  text-align: center;
512
845
  }
846
+ .text-left {
847
+ text-align: left;
848
+ }
513
849
  .text-2xl {
514
850
  font-size: var(--text-2xl);
515
851
  line-height: var(--tw-leading, var(--text-2xl--line-height));
@@ -558,6 +894,9 @@
558
894
  --tw-tracking: var(--tracking-wide);
559
895
  letter-spacing: var(--tracking-wide);
560
896
  }
897
+ .whitespace-nowrap {
898
+ white-space: nowrap;
899
+ }
561
900
  .text-\[color\:rgb\(var\(--nc-accent-1\)\)\] {
562
901
  color: rgb(var(--nc-accent-1));
563
902
  }
@@ -570,6 +909,15 @@
570
909
  .text-\[rgb\(var\(--nc-accent-soft\)\/0\.7\)\] {
571
910
  color: rgb(var(--nc-accent-soft)/0.7);
572
911
  }
912
+ .text-\[rgb\(var\(--nc-fg\)\)\] {
913
+ color: rgb(var(--nc-fg));
914
+ }
915
+ .text-\[rgb\(var\(--nc-fg-muted\)\)\] {
916
+ color: rgb(var(--nc-fg-muted));
917
+ }
918
+ .text-\[rgb\(var\(--nc-fg-soft\)\)\] {
919
+ color: rgb(var(--nc-fg-soft));
920
+ }
573
921
  .text-amber-200 {
574
922
  color: var(--color-amber-200);
575
923
  }
@@ -579,9 +927,6 @@
579
927
  .text-slate-300 {
580
928
  color: var(--color-slate-300);
581
929
  }
582
- .text-slate-400 {
583
- color: var(--color-slate-400);
584
- }
585
930
  .text-slate-900 {
586
931
  color: var(--color-slate-900);
587
932
  }
@@ -594,32 +939,43 @@
594
939
  .text-white {
595
940
  color: var(--color-white);
596
941
  }
597
- .text-white\/50 {
598
- color: color-mix(in srgb, #fff 50%, transparent);
599
- @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);
607
- }
608
- }
609
942
  .text-white\/80 {
610
943
  color: color-mix(in srgb, #fff 80%, transparent);
611
944
  @supports (color: color-mix(in lab, red, red)) {
612
945
  color: color-mix(in oklab, var(--color-white) 80%, transparent);
613
946
  }
614
947
  }
948
+ .uppercase {
949
+ text-transform: uppercase;
950
+ }
615
951
  .antialiased {
616
952
  -webkit-font-smoothing: antialiased;
617
953
  -moz-osx-font-smoothing: grayscale;
618
954
  }
955
+ .opacity-0 {
956
+ opacity: 0%;
957
+ }
958
+ .opacity-40 {
959
+ opacity: 40%;
960
+ }
961
+ .opacity-60 {
962
+ opacity: 60%;
963
+ }
964
+ .opacity-100 {
965
+ opacity: 100%;
966
+ }
967
+ .shadow-\[0_7px_5px_rgb\(var\(--nc-accent-1\)\/0\.35\)\] {
968
+ --tw-shadow: 0 7px 5px var(--tw-shadow-color, rgb(var(--nc-accent-1)/0.35));
969
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
970
+ }
619
971
  .shadow-\[0_8px_32px_rgba\(0\,0\,0\,0\.3\)\] {
620
972
  --tw-shadow: 0 8px 32px var(--tw-shadow-color, rgba(0,0,0,0.3));
621
973
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
622
974
  }
975
+ .shadow-\[0_10px_20px_rgb\(var\(--nc-accent-1\)\/0\.35\)\] {
976
+ --tw-shadow: 0 10px 20px var(--tw-shadow-color, rgb(var(--nc-accent-1)/0.35));
977
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
978
+ }
623
979
  .shadow-\[0_12px_30px_rgb\(var\(--nc-accent-1\)\/0\.45\)\] {
624
980
  --tw-shadow: 0 12px 30px var(--tw-shadow-color, rgb(var(--nc-accent-1)/0.45));
625
981
  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 +984,26 @@
628
984
  --tw-shadow: 0 12px 30px var(--tw-shadow-color, rgb(var(--nc-accent-2)/0.45));
629
985
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
630
986
  }
987
+ .shadow-\[0_15px_35px_rgba\(0\,0\,0\,0\.35\)\] {
988
+ --tw-shadow: 0 15px 35px var(--tw-shadow-color, rgba(0,0,0,0.35));
989
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
990
+ }
991
+ .shadow-\[0_18px_40px_rgba\(0\,0\,0\,0\.25\)\] {
992
+ --tw-shadow: 0 18px 40px var(--tw-shadow-color, rgba(0,0,0,0.25));
993
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
994
+ }
995
+ .shadow-\[0_18px_40px_rgba\(0\,0\,0\,0\.35\)\] {
996
+ --tw-shadow: 0 18px 40px var(--tw-shadow-color, rgba(0,0,0,0.35));
997
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
998
+ }
999
+ .shadow-\[0_20px_60px_rgba\(0\,0\,0\,0\.45\)\] {
1000
+ --tw-shadow: 0 20px 60px var(--tw-shadow-color, rgba(0,0,0,0.45));
1001
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1002
+ }
1003
+ .shadow-\[0_20px_60px_rgba\(0\,0\,0\,0\.55\)\] {
1004
+ --tw-shadow: 0 20px 60px var(--tw-shadow-color, rgba(0,0,0,0.55));
1005
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1006
+ }
631
1007
  .shadow-\[inset_0_1px_0_rgba\(255\,255\,255\,0\.06\)\] {
632
1008
  --tw-shadow: inset 0 1px 0 var(--tw-shadow-color, rgba(255,255,255,0.06));
633
1009
  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 +1012,14 @@
636
1012
  --tw-shadow: inset 0 2px 8px var(--tw-shadow-color, rgba(0,0,0,0.3));
637
1013
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
638
1014
  }
1015
+ .shadow-lg {
1016
+ --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));
1017
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1018
+ }
1019
+ .shadow-sm {
1020
+ --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));
1021
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1022
+ }
639
1023
  .outline {
640
1024
  outline-style: var(--tw-outline-style);
641
1025
  outline-width: 1px;
@@ -664,11 +1048,21 @@
664
1048
  -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
1049
  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
1050
  }
1051
+ .transition {
1052
+ 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;
1053
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
1054
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
1055
+ }
667
1056
  .transition-all {
668
1057
  transition-property: all;
669
1058
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
670
1059
  transition-duration: var(--tw-duration, var(--default-transition-duration));
671
1060
  }
1061
+ .transition-opacity {
1062
+ transition-property: opacity;
1063
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
1064
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
1065
+ }
672
1066
  .duration-200 {
673
1067
  --tw-duration: 200ms;
674
1068
  transition-duration: 200ms;
@@ -681,9 +1075,51 @@
681
1075
  --tw-outline-style: none;
682
1076
  outline-style: none;
683
1077
  }
684
- .placeholder\:text-\[rgb\(var\(--nc-accent-soft\)\/0\.4\)\] {
1078
+ .peer-checked\:translate-x-5 {
1079
+ &:is(:where(.peer):checked ~ *) {
1080
+ --tw-translate-x: calc(var(--spacing) * 5);
1081
+ translate: var(--tw-translate-x) var(--tw-translate-y);
1082
+ }
1083
+ }
1084
+ .peer-checked\:border-\[rgb\(var\(--nc-accent-1\)\)\] {
1085
+ &:is(:where(.peer):checked ~ *) {
1086
+ border-color: rgb(var(--nc-accent-1));
1087
+ }
1088
+ }
1089
+ .peer-checked\:border-\[rgb\(var\(--nc-accent-1\)\/0\.6\)\] {
1090
+ &:is(:where(.peer):checked ~ *) {
1091
+ border-color: rgb(var(--nc-accent-1)/0.6);
1092
+ }
1093
+ }
1094
+ .peer-checked\:bg-\[rgb\(var\(--nc-accent-1\)\/0\.25\)\] {
1095
+ &:is(:where(.peer):checked ~ *) {
1096
+ background-color: rgb(var(--nc-accent-1)/0.25);
1097
+ }
1098
+ }
1099
+ .peer-checked\:bg-\[rgb\(var\(--nc-surface-muted\)\)\] {
1100
+ &:is(:where(.peer):checked ~ *) {
1101
+ background-color: rgb(var(--nc-surface-muted));
1102
+ }
1103
+ }
1104
+ .peer-checked\:opacity-100 {
1105
+ &:is(:where(.peer):checked ~ *) {
1106
+ opacity: 100%;
1107
+ }
1108
+ }
1109
+ .peer-focus-visible\:ring-2 {
1110
+ &:is(:where(.peer):focus-visible ~ *) {
1111
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
1112
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1113
+ }
1114
+ }
1115
+ .peer-focus-visible\:ring-\[rgb\(var\(--nc-accent-1\)\/0\.5\)\] {
1116
+ &:is(:where(.peer):focus-visible ~ *) {
1117
+ --tw-ring-color: rgb(var(--nc-accent-1)/0.5);
1118
+ }
1119
+ }
1120
+ .placeholder\:text-\[rgb\(var\(--nc-fg-soft\)\)\] {
685
1121
  &::placeholder {
686
- color: rgb(var(--nc-accent-soft)/0.4);
1122
+ color: rgb(var(--nc-fg-soft));
687
1123
  }
688
1124
  }
689
1125
  .before\:absolute {
@@ -803,6 +1239,66 @@
803
1239
  transition-duration: 300ms;
804
1240
  }
805
1241
  }
1242
+ .after\:absolute {
1243
+ &::after {
1244
+ content: var(--tw-content);
1245
+ position: absolute;
1246
+ }
1247
+ }
1248
+ .after\:inset-0 {
1249
+ &::after {
1250
+ content: var(--tw-content);
1251
+ inset: calc(var(--spacing) * 0);
1252
+ }
1253
+ }
1254
+ .after\:-translate-x-full {
1255
+ &::after {
1256
+ content: var(--tw-content);
1257
+ --tw-translate-x: -100%;
1258
+ translate: var(--tw-translate-x) var(--tw-translate-y);
1259
+ }
1260
+ }
1261
+ .after\:animate-\[shimmer_1\.6s_infinite\] {
1262
+ &::after {
1263
+ content: var(--tw-content);
1264
+ animation: shimmer 1.6s infinite;
1265
+ }
1266
+ }
1267
+ .after\:bg-linear-to-r {
1268
+ &::after {
1269
+ content: var(--tw-content);
1270
+ --tw-gradient-position: to right;
1271
+ @supports (background-image: linear-gradient(in lab, red, red)) {
1272
+ --tw-gradient-position: to right in oklab;
1273
+ }
1274
+ background-image: linear-gradient(var(--tw-gradient-stops));
1275
+ }
1276
+ }
1277
+ .after\:from-transparent {
1278
+ &::after {
1279
+ content: var(--tw-content);
1280
+ --tw-gradient-from: transparent;
1281
+ --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));
1282
+ }
1283
+ }
1284
+ .after\:via-white\/20 {
1285
+ &::after {
1286
+ content: var(--tw-content);
1287
+ --tw-gradient-via: color-mix(in srgb, #fff 20%, transparent);
1288
+ @supports (color: color-mix(in lab, red, red)) {
1289
+ --tw-gradient-via: color-mix(in oklab, var(--color-white) 20%, transparent);
1290
+ }
1291
+ --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);
1292
+ --tw-gradient-stops: var(--tw-gradient-via-stops);
1293
+ }
1294
+ }
1295
+ .after\:to-transparent {
1296
+ &::after {
1297
+ content: var(--tw-content);
1298
+ --tw-gradient-to: transparent;
1299
+ --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));
1300
+ }
1301
+ }
806
1302
  .hover\:scale-\[1\.01\] {
807
1303
  &:hover {
808
1304
  @media (hover: hover) {
@@ -824,13 +1320,10 @@
824
1320
  }
825
1321
  }
826
1322
  }
827
- .hover\:border-white\/20 {
1323
+ .hover\:border-\[color\:rgb\(var\(--nc-border\)\/0\.5\)\] {
828
1324
  &:hover {
829
1325
  @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
- }
1326
+ border-color: rgb(var(--nc-border)/0.5);
834
1327
  }
835
1328
  }
836
1329
  }
@@ -841,6 +1334,27 @@
841
1334
  }
842
1335
  }
843
1336
  }
1337
+ .hover\:bg-\[color\:rgb\(var\(--nc-surface\)\/0\.18\)\] {
1338
+ &:hover {
1339
+ @media (hover: hover) {
1340
+ background-color: rgb(var(--nc-surface)/0.18);
1341
+ }
1342
+ }
1343
+ }
1344
+ .hover\:bg-\[rgb\(var\(--nc-surface\)\/0\.12\)\] {
1345
+ &:hover {
1346
+ @media (hover: hover) {
1347
+ background-color: rgb(var(--nc-surface)/0.12);
1348
+ }
1349
+ }
1350
+ }
1351
+ .hover\:bg-transparent {
1352
+ &:hover {
1353
+ @media (hover: hover) {
1354
+ background-color: transparent;
1355
+ }
1356
+ }
1357
+ }
844
1358
  .hover\:bg-white\/10 {
845
1359
  &:hover {
846
1360
  @media (hover: hover) {
@@ -851,6 +1365,13 @@
851
1365
  }
852
1366
  }
853
1367
  }
1368
+ .hover\:text-\[rgb\(var\(--nc-fg\)\)\] {
1369
+ &:hover {
1370
+ @media (hover: hover) {
1371
+ color: rgb(var(--nc-fg));
1372
+ }
1373
+ }
1374
+ }
854
1375
  .hover\:shadow-\[0_8px_40px_rgba\(0\,0\,0\,0\.4\)\] {
855
1376
  &:hover {
856
1377
  @media (hover: hover) {
@@ -979,20 +1500,97 @@
979
1500
  }
980
1501
  }
981
1502
  }
1503
+ .sm\:px-6 {
1504
+ @media (width >= 40rem) {
1505
+ padding-inline: calc(var(--spacing) * 6);
1506
+ }
1507
+ }
1508
+ .sm\:px-12 {
1509
+ @media (width >= 40rem) {
1510
+ padding-inline: calc(var(--spacing) * 12);
1511
+ }
1512
+ }
982
1513
  .md\:grid-cols-2 {
983
1514
  @media (width >= 48rem) {
984
1515
  grid-template-columns: repeat(2, minmax(0, 1fr));
985
1516
  }
986
1517
  }
1518
+ .md\:grid-cols-3 {
1519
+ @media (width >= 48rem) {
1520
+ grid-template-columns: repeat(3, minmax(0, 1fr));
1521
+ }
1522
+ }
1523
+ .lg\:flex {
1524
+ @media (width >= 64rem) {
1525
+ display: flex;
1526
+ }
1527
+ }
987
1528
  .lg\:grid-cols-3 {
988
1529
  @media (width >= 64rem) {
989
1530
  grid-template-columns: repeat(3, minmax(0, 1fr));
990
1531
  }
991
1532
  }
1533
+ .lg\:grid-cols-4 {
1534
+ @media (width >= 64rem) {
1535
+ grid-template-columns: repeat(4, minmax(0, 1fr));
1536
+ }
1537
+ }
1538
+ .lg\:grid-cols-5 {
1539
+ @media (width >= 64rem) {
1540
+ grid-template-columns: repeat(5, minmax(0, 1fr));
1541
+ }
1542
+ }
1543
+ .lg\:grid-cols-6 {
1544
+ @media (width >= 64rem) {
1545
+ grid-template-columns: repeat(6, minmax(0, 1fr));
1546
+ }
1547
+ }
1548
+ .lg\:grid-cols-\[1\.1fr_0\.9fr\] {
1549
+ @media (width >= 64rem) {
1550
+ grid-template-columns: 1.1fr 0.9fr;
1551
+ }
1552
+ }
1553
+ .lg\:grid-cols-\[220px_1fr\] {
1554
+ @media (width >= 64rem) {
1555
+ grid-template-columns: 220px 1fr;
1556
+ }
1557
+ }
1558
+ .lg\:grid-cols-\[260px_1fr\] {
1559
+ @media (width >= 64rem) {
1560
+ grid-template-columns: 260px 1fr;
1561
+ }
1562
+ }
1563
+ .lg\:px-8 {
1564
+ @media (width >= 64rem) {
1565
+ padding-inline: calc(var(--spacing) * 8);
1566
+ }
1567
+ }
1568
+ .dark\:border-white\/10 {
1569
+ @media (prefers-color-scheme: dark) {
1570
+ border-color: color-mix(in srgb, #fff 10%, transparent);
1571
+ @supports (color: color-mix(in lab, red, red)) {
1572
+ border-color: color-mix(in oklab, var(--color-white) 10%, transparent);
1573
+ }
1574
+ }
1575
+ }
1576
+ .dark\:bg-white\/10 {
1577
+ @media (prefers-color-scheme: dark) {
1578
+ background-color: color-mix(in srgb, #fff 10%, transparent);
1579
+ @supports (color: color-mix(in lab, red, red)) {
1580
+ background-color: color-mix(in oklab, var(--color-white) 10%, transparent);
1581
+ }
1582
+ }
1583
+ }
992
1584
  }
993
1585
  :root {
994
1586
  --background: #ffffff;
995
1587
  --foreground: #171717;
1588
+ --nc-fg: 17 24 39;
1589
+ --nc-fg-muted: 71 85 105;
1590
+ --nc-fg-soft: 100 116 139;
1591
+ --nc-surface: 255 255 255;
1592
+ --nc-surface-muted: 248 250 252;
1593
+ --nc-border: 148 163 184;
996
1594
  --nc-accent-1: 56 189 248;
997
1595
  --nc-accent-2: 59 130 246;
998
1596
  --nc-accent-3: 99 102 241;
@@ -1011,6 +1609,12 @@
1011
1609
  [data-nc-mode="dark"] {
1012
1610
  --background: #0a0a0a;
1013
1611
  --foreground: #ededed;
1612
+ --nc-fg: 255 255 255;
1613
+ --nc-fg-muted: 226 232 240;
1614
+ --nc-fg-soft: 148 163 184;
1615
+ --nc-surface: 15 23 42;
1616
+ --nc-surface-muted: 30 41 59;
1617
+ --nc-border: 148 163 184;
1014
1618
  }
1015
1619
  :root, [data-nc-theme="ocean"] {
1016
1620
  --nc-accent-1: 56 189 248;
@@ -1047,6 +1651,14 @@ body {
1047
1651
  color: var(--foreground);
1048
1652
  font-family: Arial, Helvetica, sans-serif;
1049
1653
  }
1654
+ @keyframes shimmer {
1655
+ 0% {
1656
+ transform: translateX(-100%);
1657
+ }
1658
+ 100% {
1659
+ transform: translateX(100%);
1660
+ }
1661
+ }
1050
1662
  @property --tw-translate-x {
1051
1663
  syntax: "*";
1052
1664
  inherits: false;