@mesob/ui 0.5.5 → 0.5.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/dist/components.d.ts +12 -5
  2. package/dist/components.js +667 -556
  3. package/dist/components.js.map +1 -1
  4. package/package.json +7 -2
  5. package/src/styles/style-lyra.css +249 -6
  6. package/src/styles/style-maia.css +243 -5
  7. package/src/styles/style-mira.css +248 -5
  8. package/src/styles/style-nova.css +136 -5
  9. package/src/styles/style-vega.css +136 -5
  10. package/src/styles/themes.css +31 -0
  11. package/src/styles/lyra/button.css +0 -107
  12. package/src/styles/maia/button.css +0 -107
  13. package/src/styles/mira/button.css +0 -107
package/src/styles/style-mira.css CHANGED
@@ -1,4 +1,111 @@
1
- @import './mira/button.css';
1
+ .style-mira {
2
+ /* MARK: Button */
3
+ .cn-button {
4
+ @apply focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border border-transparent bg-clip-padding text-xs/relaxed font-medium focus-visible:ring-2 aria-invalid:ring-2 [&_svg:not([class*='size-'])]:size-4;
5
+ }
6
+
7
+ .cn-button-variant-default {
8
+ @apply bg-primary text-primary-foreground hover:bg-primary/80;
9
+ }
10
+
11
+ .cn-button-variant-outline {
12
+ @apply border-border dark:bg-input/30 hover:bg-input/50 hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground;
13
+ }
14
+
15
+ .cn-button-variant-secondary {
16
+ @apply bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground;
17
+ }
18
+
19
+ .cn-button-variant-ghost {
20
+ @apply hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground;
21
+ }
22
+
23
+ .cn-button-variant-destructive {
24
+ @apply bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30;
25
+ }
26
+
27
+ .cn-button-variant-link {
28
+ @apply text-primary underline-offset-4 hover:underline;
29
+ }
30
+
31
+ .cn-button-variant-light {
32
+ @apply bg-primary/12 text-primary hover:bg-primary/18 dark:bg-primary/20 dark:hover:bg-primary/28;
33
+ }
34
+
35
+ .cn-button-variant-destructive-filled {
36
+ @apply bg-destructive text-destructive-foreground hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40;
37
+ }
38
+
39
+ .cn-dropdown-button-shell {
40
+ @apply inline-flex w-fit items-stretch isolate overflow-hidden align-middle;
41
+ }
42
+
43
+ .cn-dropdown-button-main {
44
+ @apply rounded-r-none! border-r-0;
45
+ }
46
+
47
+ .cn-dropdown-button-trigger {
48
+ @apply relative -ml-px rounded-l-none! border-l-0;
49
+ }
50
+
51
+ .cn-dropdown-button-trigger::before {
52
+ @apply bg-border/80 absolute top-1 bottom-1 left-0 w-px content-[''];
53
+ }
54
+
55
+ .cn-dropdown-button-trigger[data-size='xs']::before {
56
+ @apply top-0.5 bottom-0.5;
57
+ }
58
+
59
+ .cn-dropdown-button-trigger[data-size='sm']::before {
60
+ @apply top-0.5 bottom-0.5;
61
+ }
62
+
63
+ .cn-dropdown-button-variant-danger {
64
+ @apply bg-destructive text-destructive-foreground hover:bg-destructive/90;
65
+ }
66
+
67
+ .cn-button-size-xl {
68
+ @apply h-12 gap-2 px-7 has-data-[icon=inline-end]:pr-5 has-data-[icon=inline-start]:pl-5 text-lg;
69
+ }
70
+
71
+ .cn-button-size-icon-xl {
72
+ @apply size-12;
73
+ }
74
+
75
+ .cn-button-size-xs {
76
+ @apply h-5 gap-1 rounded-sm px-2 text-[0.625rem] has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-2.5;
77
+ }
78
+
79
+ .cn-button-size-sm {
80
+ @apply h-6 gap-1 px-2 text-xs/relaxed has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3;
81
+ }
82
+
83
+ .cn-button-size-default {
84
+ @apply h-7 gap-1 px-2 text-xs/relaxed has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5;
85
+ }
86
+
87
+ .cn-button-size-lg {
88
+ @apply h-8 gap-1 px-2.5 text-xs/relaxed has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-4;
89
+ }
90
+
91
+ .cn-button-size-icon-xs {
92
+ @apply size-5 rounded-sm [&_svg:not([class*='size-'])]:size-2.5;
93
+ }
94
+
95
+ .cn-button-size-icon-sm {
96
+ @apply size-6 [&_svg:not([class*='size-'])]:size-3;
97
+ }
98
+
99
+ .cn-button-size-icon {
100
+ @apply size-7 [&_svg:not([class*='size-'])]:size-3.5;
101
+ }
102
+
103
+ .cn-button-size-icon-lg {
104
+ @apply size-8 [&_svg:not([class*='size-'])]:size-4;
105
+ }
106
+
107
+ }
108
+
2
109
 
3
110
  .style-mira {
4
111
  /* MARK: Accordion */
@@ -421,7 +528,15 @@
421
528
 
422
529
  /* MARK: Card */
423
530
  .cn-card {
424
- @apply ring-foreground/10 bg-card text-card-foreground gap-4 overflow-hidden rounded-lg py-2 text-xs/relaxed ring-1 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 *:[img:first-child]:rounded-t-lg *:[img:last-child]:rounded-b-lg;
531
+ @apply ring-foreground/10 bg-card text-card-foreground gap-4 overflow-hidden rounded-lg text-xs/relaxed ring-1 has-[>img:first-child]:pt-0 *:[img:first-child]:rounded-t-lg *:[img:last-child]:rounded-b-lg;
532
+ }
533
+
534
+ .cn-card:not([data-sectioned]) {
535
+ @apply py-2;
536
+ }
537
+
538
+ .cn-card[data-sectioned] {
539
+ @apply gap-0 py-0;
425
540
  }
426
541
 
427
542
  .cn-card-with-border {
@@ -437,23 +552,151 @@
437
552
  }
438
553
 
439
554
  .cn-card-header {
440
- @apply gap-1 rounded-t-lg px-4 group-data-[size=sm]/card:px-3 [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3;
555
+ @apply gap-1 items-start rounded-t-lg px-3 [.border-b]:pb-4 has-data-[slot=card-action]:gap-x-4 has-data-[slot=card-action]:gap-y-1;
556
+ }
557
+
558
+ .cn-card-header:has([data-slot='card-action']):not(:has([data-slot='card-description'])) {
559
+ @apply items-center py-1.5;
560
+ }
561
+
562
+ .cn-card-header:has([data-slot='card-action']):not(:has([data-slot='card-description']))
563
+ .cn-card-title {
564
+ @apply flex items-center;
565
+ }
566
+
567
+ .cn-card[data-size='xs']
568
+ .cn-card-header:has([data-slot='card-action']):not(:has([data-slot='card-description']))
569
+ .cn-card-title {
570
+ @apply min-h-6 leading-6;
571
+ }
572
+
573
+ .cn-card[data-size='sm']
574
+ .cn-card-header:has([data-slot='card-action']):not(:has([data-slot='card-description']))
575
+ .cn-card-title {
576
+ @apply min-h-7 leading-7;
577
+ }
578
+
579
+ .cn-card[data-size='md']
580
+ .cn-card-header:has([data-slot='card-action']):not(:has([data-slot='card-description']))
581
+ .cn-card-title {
582
+ @apply min-h-7 leading-7;
583
+ }
584
+
585
+ .cn-card[data-size='lg']
586
+ .cn-card-header:has([data-slot='card-action']):not(:has([data-slot='card-description']))
587
+ .cn-card-title {
588
+ @apply min-h-8 leading-8;
589
+ }
590
+
591
+ .cn-card[data-size='xl']
592
+ .cn-card-header:has([data-slot='card-action']):not(:has([data-slot='card-description']))
593
+ .cn-card-title {
594
+ @apply min-h-9 leading-9;
441
595
  }
442
596
 
443
597
  .cn-card-title {
444
598
  @apply text-sm font-medium;
445
599
  }
446
600
 
601
+ .cn-card[data-size='xs'] .cn-card-title {
602
+ @apply text-xs leading-tight;
603
+ }
604
+
605
+ .cn-card[data-size='sm'] .cn-card-title {
606
+ @apply text-xs font-medium;
607
+ }
608
+
609
+ .cn-card[data-size='md'] .cn-card-title {
610
+ @apply text-sm;
611
+ }
612
+
613
+ .cn-card[data-size='lg'] .cn-card-title {
614
+ @apply text-base;
615
+ }
616
+
617
+ .cn-card[data-size='xl'] .cn-card-title {
618
+ @apply text-lg;
619
+ }
620
+
447
621
  .cn-card-description {
448
622
  @apply text-muted-foreground text-xs/relaxed;
449
623
  }
450
624
 
625
+ .cn-card[data-size='lg'] .cn-card-description,
626
+ .cn-card[data-size='xl'] .cn-card-description {
627
+ @apply text-sm;
628
+ }
629
+
451
630
  .cn-card-content {
452
- @apply px-4 group-data-[size=sm]/card:px-3;
631
+ @apply px-4 py-4;
453
632
  }
454
633
 
455
634
  .cn-card-footer {
456
- @apply rounded-b-lg px-4 group-data-[size=sm]/card:px-3 [.border-t]:pt-4 group-data-[size=sm]/card:[.border-t]:pt-3;
635
+ @apply rounded-b-lg px-3;
636
+ }
637
+
638
+ .cn-card:not([data-sectioned]) .cn-card-footer {
639
+ @apply pt-3;
640
+ }
641
+
642
+ .cn-card[data-sectioned][data-size='xs'] [data-slot='card-header'] {
643
+ @apply px-2.5 py-2 has-data-[slot=card-action]:gap-x-3;
644
+ }
645
+
646
+ .cn-card[data-sectioned][data-size='xs'] [data-slot='card-content'] {
647
+ @apply px-2.5 py-3;
648
+ }
649
+
650
+ .cn-card[data-sectioned][data-size='xs'] [data-slot='card-footer'] {
651
+ @apply px-2.5 py-2;
652
+ }
653
+
654
+ .cn-card[data-sectioned][data-size='sm'] [data-slot='card-header'] {
655
+ @apply px-2.5 py-2 has-data-[slot=card-action]:gap-x-3;
656
+ }
657
+
658
+ .cn-card[data-sectioned][data-size='sm'] [data-slot='card-content'] {
659
+ @apply px-2.5 py-3;
660
+ }
661
+
662
+ .cn-card[data-sectioned][data-size='sm'] [data-slot='card-footer'] {
663
+ @apply px-2.5 py-2;
664
+ }
665
+
666
+ .cn-card[data-sectioned][data-size='md'] [data-slot='card-header'] {
667
+ @apply px-3 py-2 has-data-[slot=card-action]:gap-x-4;
668
+ }
669
+
670
+ .cn-card[data-sectioned][data-size='md'] [data-slot='card-content'] {
671
+ @apply px-3 py-4;
672
+ }
673
+
674
+ .cn-card[data-sectioned][data-size='md'] [data-slot='card-footer'] {
675
+ @apply px-3 py-2;
676
+ }
677
+
678
+ .cn-card[data-sectioned][data-size='lg'] [data-slot='card-header'] {
679
+ @apply px-4 py-4 has-data-[slot=card-action]:gap-x-4;
680
+ }
681
+
682
+ .cn-card[data-sectioned][data-size='lg'] [data-slot='card-content'] {
683
+ @apply px-4 py-5;
684
+ }
685
+
686
+ .cn-card[data-sectioned][data-size='lg'] [data-slot='card-footer'] {
687
+ @apply px-4 py-4;
688
+ }
689
+
690
+ .cn-card[data-sectioned][data-size='xl'] [data-slot='card-header'] {
691
+ @apply px-5 py-5 has-data-[slot=card-action]:gap-x-4;
692
+ }
693
+
694
+ .cn-card[data-sectioned][data-size='xl'] [data-slot='card-content'] {
695
+ @apply px-5 py-6;
696
+ }
697
+
698
+ .cn-card[data-sectioned][data-size='xl'] [data-slot='card-footer'] {
699
+ @apply px-5 py-5;
457
700
  }
458
701
 
459
702
  /* MARK: Carousel */
package/src/styles/style-nova.css CHANGED
@@ -524,7 +524,15 @@
524
524
 
525
525
  /* MARK: Card */
526
526
  .cn-card {
527
- @apply ring-foreground/10 bg-card text-card-foreground gap-4 overflow-hidden rounded-xl py-2 text-sm ring-1 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl;
527
+ @apply ring-foreground/10 bg-card text-card-foreground gap-4 overflow-hidden rounded-xl text-sm ring-1 has-[>img:first-child]:pt-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl;
528
+ }
529
+
530
+ .cn-card:not([data-sectioned]) {
531
+ @apply py-2 has-data-[slot=card-footer]:pb-0;
532
+ }
533
+
534
+ .cn-card[data-sectioned] {
535
+ @apply gap-0 py-0;
528
536
  }
529
537
 
530
538
  .cn-card-with-border {
@@ -540,23 +548,146 @@
540
548
  }
541
549
 
542
550
  .cn-card-header {
543
- @apply gap-1 rounded-t-xl px-4 group-data-[size=sm]/card:px-3 [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3;
551
+ @apply gap-1 items-start rounded-t-xl px-3 [.border-b]:pb-4 has-data-[slot=card-action]:gap-x-4 has-data-[slot=card-action]:gap-y-1;
552
+ }
553
+
554
+ .cn-card-header:has([data-slot='card-action']):not(:has([data-slot='card-description'])) {
555
+ @apply items-center py-1.5;
556
+ }
557
+
558
+ .cn-card-header:has([data-slot='card-action']):not(:has([data-slot='card-description']))
559
+ .cn-card-title {
560
+ @apply flex items-center;
561
+ }
562
+
563
+ .cn-card[data-size='xs']
564
+ .cn-card-header:has([data-slot='card-action']):not(:has([data-slot='card-description']))
565
+ .cn-card-title {
566
+ @apply min-h-6 leading-6;
567
+ }
568
+
569
+ .cn-card[data-size='sm']
570
+ .cn-card-header:has([data-slot='card-action']):not(:has([data-slot='card-description']))
571
+ .cn-card-title {
572
+ @apply min-h-7 leading-7;
573
+ }
574
+
575
+ .cn-card[data-size='md']
576
+ .cn-card-header:has([data-slot='card-action']):not(:has([data-slot='card-description']))
577
+ .cn-card-title {
578
+ @apply min-h-7 leading-7;
579
+ }
580
+
581
+ .cn-card[data-size='lg']
582
+ .cn-card-header:has([data-slot='card-action']):not(:has([data-slot='card-description']))
583
+ .cn-card-title {
584
+ @apply min-h-8 leading-8;
585
+ }
586
+
587
+ .cn-card[data-size='xl']
588
+ .cn-card-header:has([data-slot='card-action']):not(:has([data-slot='card-description']))
589
+ .cn-card-title {
590
+ @apply min-h-9 leading-9;
544
591
  }
545
592
 
546
593
  .cn-card-title {
547
- @apply text-base leading-snug font-medium group-data-[size=sm]/card:text-sm;
594
+ @apply text-base leading-snug font-medium;
595
+ }
596
+
597
+ .cn-card[data-size='xs'] .cn-card-title {
598
+ @apply text-xs leading-tight;
599
+ }
600
+
601
+ .cn-card[data-size='sm'] .cn-card-title {
602
+ @apply text-sm font-medium;
603
+ }
604
+
605
+ .cn-card[data-size='lg'] .cn-card-title {
606
+ @apply text-lg;
607
+ }
608
+
609
+ .cn-card[data-size='xl'] .cn-card-title {
610
+ @apply text-xl;
548
611
  }
549
612
 
550
613
  .cn-card-description {
551
614
  @apply text-muted-foreground text-sm;
552
615
  }
553
616
 
617
+ .cn-card[data-size='xs'] .cn-card-description {
618
+ @apply text-xs;
619
+ }
620
+
554
621
  .cn-card-content {
555
- @apply px-4 group-data-[size=sm]/card:px-3;
622
+ @apply px-4 py-4;
556
623
  }
557
624
 
558
625
  .cn-card-footer {
559
- @apply bg-muted/50 rounded-b-xl border-t p-4 group-data-[size=sm]/card:p-3;
626
+ @apply bg-muted/50 rounded-b-xl border-t;
627
+ }
628
+
629
+ .cn-card:not([data-sectioned]) .cn-card-footer {
630
+ @apply p-3;
631
+ }
632
+
633
+ .cn-card[data-sectioned][data-size='xs'] [data-slot='card-header'] {
634
+ @apply px-2.5 py-2 has-data-[slot=card-action]:gap-x-3;
635
+ }
636
+
637
+ .cn-card[data-sectioned][data-size='xs'] [data-slot='card-content'] {
638
+ @apply px-2.5 py-3;
639
+ }
640
+
641
+ .cn-card[data-sectioned][data-size='xs'] [data-slot='card-footer'] {
642
+ @apply px-2.5 py-2;
643
+ }
644
+
645
+ .cn-card[data-sectioned][data-size='sm'] [data-slot='card-header'] {
646
+ @apply px-2.5 py-2 has-data-[slot=card-action]:gap-x-3;
647
+ }
648
+
649
+ .cn-card[data-sectioned][data-size='sm'] [data-slot='card-content'] {
650
+ @apply px-2.5 py-3;
651
+ }
652
+
653
+ .cn-card[data-sectioned][data-size='sm'] [data-slot='card-footer'] {
654
+ @apply px-2.5 py-2;
655
+ }
656
+
657
+ .cn-card[data-sectioned][data-size='md'] [data-slot='card-header'] {
658
+ @apply px-3 py-2 has-data-[slot=card-action]:gap-x-4;
659
+ }
660
+
661
+ .cn-card[data-sectioned][data-size='md'] [data-slot='card-content'] {
662
+ @apply px-3 py-4;
663
+ }
664
+
665
+ .cn-card[data-sectioned][data-size='md'] [data-slot='card-footer'] {
666
+ @apply px-3 py-2;
667
+ }
668
+
669
+ .cn-card[data-sectioned][data-size='lg'] [data-slot='card-header'] {
670
+ @apply px-4 py-4 has-data-[slot=card-action]:gap-x-4;
671
+ }
672
+
673
+ .cn-card[data-sectioned][data-size='lg'] [data-slot='card-content'] {
674
+ @apply px-4 py-5;
675
+ }
676
+
677
+ .cn-card[data-sectioned][data-size='lg'] [data-slot='card-footer'] {
678
+ @apply px-4 py-4;
679
+ }
680
+
681
+ .cn-card[data-sectioned][data-size='xl'] [data-slot='card-header'] {
682
+ @apply px-5 py-5 has-data-[slot=card-action]:gap-x-4;
683
+ }
684
+
685
+ .cn-card[data-sectioned][data-size='xl'] [data-slot='card-content'] {
686
+ @apply px-5 py-6;
687
+ }
688
+
689
+ .cn-card[data-sectioned][data-size='xl'] [data-slot='card-footer'] {
690
+ @apply px-5 py-5;
560
691
  }
561
692
 
562
693
  /* MARK: Carousel */
package/src/styles/style-vega.css CHANGED
@@ -520,7 +520,15 @@
520
520
 
521
521
  /* MARK: Card */
522
522
  .cn-card {
523
- @apply ring-foreground/10 bg-card text-card-foreground gap-4 overflow-hidden rounded-xl py-4 text-sm shadow-xs ring-1 has-[>img:first-child]:pt-0 data-[size=sm]:gap-4 data-[size=sm]:py-4 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl;
523
+ @apply ring-foreground/10 bg-card text-card-foreground gap-4 overflow-hidden rounded-xl text-sm shadow-xs ring-1 has-[>img:first-child]:pt-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl;
524
+ }
525
+
526
+ .cn-card:not([data-sectioned]) {
527
+ @apply py-4;
528
+ }
529
+
530
+ .cn-card[data-sectioned] {
531
+ @apply gap-0 py-0;
524
532
  }
525
533
 
526
534
  .cn-card-with-border {
@@ -536,23 +544,146 @@
536
544
  }
537
545
 
538
546
  .cn-card-header {
539
- @apply gap-1 rounded-t-xl px-4 group-data-[size=sm]/card:px-4 [.border-b]:pb-6 group-data-[size=sm]/card:[.border-b]:pb-4;
547
+ @apply gap-1 items-start rounded-t-xl px-3 [.border-b]:pb-4 has-data-[slot=card-action]:gap-x-4 has-data-[slot=card-action]:gap-y-1;
548
+ }
549
+
550
+ .cn-card-header:has([data-slot='card-action']):not(:has([data-slot='card-description'])) {
551
+ @apply items-center py-1.5;
552
+ }
553
+
554
+ .cn-card-header:has([data-slot='card-action']):not(:has([data-slot='card-description']))
555
+ .cn-card-title {
556
+ @apply flex items-center;
557
+ }
558
+
559
+ .cn-card[data-size='xs']
560
+ .cn-card-header:has([data-slot='card-action']):not(:has([data-slot='card-description']))
561
+ .cn-card-title {
562
+ @apply min-h-6 leading-6;
563
+ }
564
+
565
+ .cn-card[data-size='sm']
566
+ .cn-card-header:has([data-slot='card-action']):not(:has([data-slot='card-description']))
567
+ .cn-card-title {
568
+ @apply min-h-7 leading-7;
569
+ }
570
+
571
+ .cn-card[data-size='md']
572
+ .cn-card-header:has([data-slot='card-action']):not(:has([data-slot='card-description']))
573
+ .cn-card-title {
574
+ @apply min-h-7 leading-7;
575
+ }
576
+
577
+ .cn-card[data-size='lg']
578
+ .cn-card-header:has([data-slot='card-action']):not(:has([data-slot='card-description']))
579
+ .cn-card-title {
580
+ @apply min-h-8 leading-8;
581
+ }
582
+
583
+ .cn-card[data-size='xl']
584
+ .cn-card-header:has([data-slot='card-action']):not(:has([data-slot='card-description']))
585
+ .cn-card-title {
586
+ @apply min-h-9 leading-9;
540
587
  }
541
588
 
542
589
  .cn-card-title {
543
- @apply text-base leading-normal font-medium group-data-[size=sm]/card:text-sm;
590
+ @apply text-base leading-normal font-medium;
591
+ }
592
+
593
+ .cn-card[data-size='xs'] .cn-card-title {
594
+ @apply text-xs leading-tight;
595
+ }
596
+
597
+ .cn-card[data-size='sm'] .cn-card-title {
598
+ @apply text-sm font-medium;
599
+ }
600
+
601
+ .cn-card[data-size='lg'] .cn-card-title {
602
+ @apply text-lg;
603
+ }
604
+
605
+ .cn-card[data-size='xl'] .cn-card-title {
606
+ @apply text-xl;
544
607
  }
545
608
 
546
609
  .cn-card-description {
547
610
  @apply text-muted-foreground text-sm;
548
611
  }
549
612
 
613
+ .cn-card[data-size='xs'] .cn-card-description {
614
+ @apply text-xs;
615
+ }
616
+
550
617
  .cn-card-content {
551
- @apply px-4 group-data-[size=sm]/card:px-4;
618
+ @apply px-4 py-4;
552
619
  }
553
620
 
554
621
  .cn-card-footer {
555
- @apply rounded-b-xl px-6 group-data-[size=sm]/card:px-4 [.border-t]:pt-6 group-data-[size=sm]/card:[.border-t]:pt-4;
622
+ @apply rounded-b-xl px-3;
623
+ }
624
+
625
+ .cn-card:not([data-sectioned]) .cn-card-footer {
626
+ @apply pt-3;
627
+ }
628
+
629
+ .cn-card[data-sectioned][data-size='xs'] [data-slot='card-header'] {
630
+ @apply px-2.5 py-2 has-data-[slot=card-action]:gap-x-3;
631
+ }
632
+
633
+ .cn-card[data-sectioned][data-size='xs'] [data-slot='card-content'] {
634
+ @apply px-2.5 py-3;
635
+ }
636
+
637
+ .cn-card[data-sectioned][data-size='xs'] [data-slot='card-footer'] {
638
+ @apply px-2.5 py-2;
639
+ }
640
+
641
+ .cn-card[data-sectioned][data-size='sm'] [data-slot='card-header'] {
642
+ @apply px-2.5 py-2 has-data-[slot=card-action]:gap-x-3;
643
+ }
644
+
645
+ .cn-card[data-sectioned][data-size='sm'] [data-slot='card-content'] {
646
+ @apply px-2.5 py-3;
647
+ }
648
+
649
+ .cn-card[data-sectioned][data-size='sm'] [data-slot='card-footer'] {
650
+ @apply px-2.5 py-2;
651
+ }
652
+
653
+ .cn-card[data-sectioned][data-size='md'] [data-slot='card-header'] {
654
+ @apply px-3 py-2 has-data-[slot=card-action]:gap-x-4;
655
+ }
656
+
657
+ .cn-card[data-sectioned][data-size='md'] [data-slot='card-content'] {
658
+ @apply px-3 py-4;
659
+ }
660
+
661
+ .cn-card[data-sectioned][data-size='md'] [data-slot='card-footer'] {
662
+ @apply px-3 py-2;
663
+ }
664
+
665
+ .cn-card[data-sectioned][data-size='lg'] [data-slot='card-header'] {
666
+ @apply px-4 py-4 has-data-[slot=card-action]:gap-x-4;
667
+ }
668
+
669
+ .cn-card[data-sectioned][data-size='lg'] [data-slot='card-content'] {
670
+ @apply px-4 py-5;
671
+ }
672
+
673
+ .cn-card[data-sectioned][data-size='lg'] [data-slot='card-footer'] {
674
+ @apply px-4 py-4;
675
+ }
676
+
677
+ .cn-card[data-sectioned][data-size='xl'] [data-slot='card-header'] {
678
+ @apply px-5 py-5 has-data-[slot=card-action]:gap-x-4;
679
+ }
680
+
681
+ .cn-card[data-sectioned][data-size='xl'] [data-slot='card-content'] {
682
+ @apply px-5 py-6;
683
+ }
684
+
685
+ .cn-card[data-sectioned][data-size='xl'] [data-slot='card-footer'] {
686
+ @apply px-5 py-5;
556
687
  }
557
688
 
558
689
  /* MARK: Carousel */
package/src/styles/themes.css CHANGED
@@ -13,6 +13,37 @@
13
13
  scroll-behavior: auto;
14
14
  transition-duration: 0.01ms;
15
15
  }
16
+
17
+ .cn-spinner {
18
+ animation-duration: 1s;
19
+ animation-iteration-count: infinite;
20
+ }
21
+
22
+ .cn-toast,
23
+ .cn-toast::before,
24
+ .cn-toast::after {
25
+ animation-duration: 0.2s;
26
+ transition-duration: 0.2s;
27
+ }
28
+
29
+ .toaster [data-sonner-toast] {
30
+ /* biome-ignore lint/complexity/noImportantStyles: override Sonner reduce-motion reset */
31
+ transition-property: transform, opacity, height, box-shadow !important;
32
+ /* biome-ignore lint/complexity/noImportantStyles: override Sonner reduce-motion reset */
33
+ transition-duration: 0.2s !important;
34
+ /* biome-ignore lint/complexity/noImportantStyles: override Sonner reduce-motion reset */
35
+ transition-timing-function: ease !important;
36
+ }
37
+
38
+ .toaster [data-sonner-toast] > * {
39
+ /* biome-ignore lint/complexity/noImportantStyles: override Sonner reduce-motion reset */
40
+ transition: opacity 0.2s ease !important;
41
+ }
42
+
43
+ .toaster .sonner-loading-bar {
44
+ /* biome-ignore lint/complexity/noImportantStyles: override Sonner reduce-motion reset */
45
+ transition: width 0.2s linear !important;
46
+ }
16
47
  }
17
48
 
18
49
  /* MARK: AI Trigger (global; outside theme layers for consistent priority) */