@anker-in/headless-ui 0.0.9 → 0.0.11

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 (169) hide show
  1. package/dist/cjs/components/badge.d.ts +9 -0
  2. package/dist/cjs/components/badge.js +2 -0
  3. package/dist/cjs/components/badge.js.map +7 -0
  4. package/dist/cjs/components/button.d.ts +20 -0
  5. package/dist/cjs/components/button.js +2 -0
  6. package/dist/cjs/components/button.js.map +7 -0
  7. package/dist/cjs/components/checkbox.d.ts +4 -0
  8. package/dist/cjs/components/checkbox.js +2 -0
  9. package/dist/cjs/components/checkbox.js.map +7 -0
  10. package/dist/cjs/components/dialog.d.ts +19 -0
  11. package/dist/cjs/components/dialog.js +2 -0
  12. package/dist/cjs/components/dialog.js.map +7 -0
  13. package/dist/cjs/components/heading.d.ts +7 -0
  14. package/dist/cjs/components/heading.js +2 -0
  15. package/dist/cjs/components/heading.js.map +7 -0
  16. package/dist/cjs/components/index.d.ts +11 -0
  17. package/dist/cjs/components/index.js +2 -0
  18. package/dist/cjs/components/index.js.map +7 -0
  19. package/dist/cjs/components/input.d.ts +21 -0
  20. package/dist/cjs/components/input.js +2 -0
  21. package/dist/cjs/components/input.js.map +7 -0
  22. package/dist/cjs/components/popover.d.ts +6 -0
  23. package/dist/cjs/components/popover.js +2 -0
  24. package/dist/cjs/components/popover.js.map +7 -0
  25. package/dist/cjs/components/radio.d.ts +5 -0
  26. package/dist/cjs/components/radio.js +2 -0
  27. package/dist/cjs/components/radio.js.map +7 -0
  28. package/dist/cjs/components/skeleton.d.ts +6 -0
  29. package/dist/cjs/components/skeleton.js +2 -0
  30. package/dist/cjs/components/skeleton.js.map +7 -0
  31. package/dist/cjs/components/text.d.ts +16 -0
  32. package/dist/cjs/components/text.js +2 -0
  33. package/dist/cjs/components/text.js.map +7 -0
  34. package/dist/cjs/components/theme.d.ts +13 -0
  35. package/dist/cjs/components/theme.js +2 -0
  36. package/dist/cjs/components/theme.js.map +7 -0
  37. package/dist/cjs/helpers/component-props.d.ts +7 -0
  38. package/dist/cjs/helpers/component-props.js +2 -0
  39. package/dist/cjs/helpers/component-props.js.map +7 -0
  40. package/dist/cjs/helpers/constants.d.ts +2 -0
  41. package/dist/cjs/helpers/constants.js +2 -0
  42. package/dist/cjs/helpers/constants.js.map +7 -0
  43. package/dist/cjs/helpers/index.d.ts +1 -0
  44. package/dist/cjs/helpers/index.js +2 -0
  45. package/dist/cjs/helpers/index.js.map +7 -0
  46. package/dist/cjs/helpers/utils.d.ts +2 -0
  47. package/dist/cjs/helpers/utils.js +2 -0
  48. package/dist/cjs/helpers/utils.js.map +7 -0
  49. package/dist/cjs/icons/spinner.d.ts +7 -0
  50. package/dist/cjs/icons/spinner.js +2 -0
  51. package/dist/cjs/icons/spinner.js.map +7 -0
  52. package/dist/cjs/index.d.ts +1 -0
  53. package/dist/cjs/index.js +2 -0
  54. package/dist/cjs/index.js.map +7 -0
  55. package/dist/cjs/stories/badge.stories.d.ts +26 -0
  56. package/dist/cjs/stories/badge.stories.js +2 -0
  57. package/dist/cjs/stories/badge.stories.js.map +7 -0
  58. package/dist/cjs/stories/button.stories.d.ts +47 -0
  59. package/dist/cjs/stories/button.stories.js +2 -0
  60. package/dist/cjs/stories/button.stories.js.map +7 -0
  61. package/dist/cjs/stories/checkbox.stories.d.ts +5 -0
  62. package/dist/cjs/stories/checkbox.stories.js +2 -0
  63. package/dist/cjs/stories/checkbox.stories.js.map +7 -0
  64. package/dist/cjs/stories/dialog.stories.d.ts +5 -0
  65. package/dist/cjs/stories/dialog.stories.js +2 -0
  66. package/dist/cjs/stories/dialog.stories.js.map +7 -0
  67. package/dist/cjs/stories/input.stories.d.ts +30 -0
  68. package/dist/cjs/stories/input.stories.js +2 -0
  69. package/dist/cjs/stories/input.stories.js.map +7 -0
  70. package/dist/cjs/stories/popover.stories.d.ts +5 -0
  71. package/dist/cjs/stories/popover.stories.js +2 -0
  72. package/dist/cjs/stories/popover.stories.js.map +7 -0
  73. package/dist/cjs/stories/radio.stories.d.ts +5 -0
  74. package/dist/cjs/stories/radio.stories.js +2 -0
  75. package/dist/cjs/stories/radio.stories.js.map +7 -0
  76. package/dist/cjs/stories/skeleton.stories.d.ts +14 -0
  77. package/dist/cjs/stories/skeleton.stories.js +2 -0
  78. package/dist/cjs/stories/skeleton.stories.js.map +7 -0
  79. package/dist/cjs/stories/text.stories.d.ts +37 -0
  80. package/dist/cjs/stories/text.stories.js +2 -0
  81. package/dist/cjs/stories/text.stories.js.map +7 -0
  82. package/dist/cjs/tsconfig.tsbuildinfo +1 -0
  83. package/dist/esm/components/badge.d.ts +2 -2
  84. package/dist/esm/components/badge.js +1 -1
  85. package/dist/esm/components/badge.js.map +2 -2
  86. package/dist/esm/components/button.d.ts +1 -1
  87. package/dist/esm/components/button.js +1 -1
  88. package/dist/esm/components/button.js.map +2 -2
  89. package/dist/esm/components/checkbox.js +1 -1
  90. package/dist/esm/components/checkbox.js.map +2 -2
  91. package/dist/esm/components/dialog.d.ts +2 -2
  92. package/dist/esm/components/dialog.js +1 -1
  93. package/dist/esm/components/dialog.js.map +2 -2
  94. package/dist/esm/components/heading.js +1 -1
  95. package/dist/esm/components/heading.js.map +2 -2
  96. package/dist/esm/components/index.d.ts +11 -11
  97. package/dist/esm/components/index.js +1 -1
  98. package/dist/esm/components/index.js.map +2 -2
  99. package/dist/esm/components/input.d.ts +2 -2
  100. package/dist/esm/components/input.js +1 -1
  101. package/dist/esm/components/input.js.map +2 -2
  102. package/dist/esm/components/popover.js +1 -1
  103. package/dist/esm/components/popover.js.map +2 -2
  104. package/dist/esm/components/radio.js +1 -1
  105. package/dist/esm/components/radio.js.map +2 -2
  106. package/dist/esm/components/skeleton.d.ts +1 -1
  107. package/dist/esm/components/skeleton.js +1 -1
  108. package/dist/esm/components/skeleton.js.map +2 -2
  109. package/dist/esm/components/text.d.ts +9 -5
  110. package/dist/esm/components/text.js +1 -1
  111. package/dist/esm/components/text.js.map +3 -3
  112. package/dist/esm/components/theme.d.ts +2 -2
  113. package/dist/esm/components/theme.js.map +1 -1
  114. package/dist/esm/helpers/index.d.ts +1 -1
  115. package/dist/esm/helpers/index.js +1 -1
  116. package/dist/esm/helpers/index.js.map +1 -1
  117. package/dist/esm/icons/spinner.js +1 -1
  118. package/dist/esm/icons/spinner.js.map +2 -2
  119. package/dist/esm/index.d.ts +1 -1
  120. package/dist/esm/index.js +1 -1
  121. package/dist/esm/index.js.map +1 -1
  122. package/dist/esm/stories/badge.stories.js +1 -1
  123. package/dist/esm/stories/badge.stories.js.map +2 -2
  124. package/dist/esm/stories/button.stories.js +1 -1
  125. package/dist/esm/stories/button.stories.js.map +2 -2
  126. package/dist/esm/stories/checkbox.stories.js +1 -1
  127. package/dist/esm/stories/checkbox.stories.js.map +2 -2
  128. package/dist/esm/stories/dialog.stories.js +1 -1
  129. package/dist/esm/stories/dialog.stories.js.map +2 -2
  130. package/dist/esm/stories/input.stories.js +1 -1
  131. package/dist/esm/stories/input.stories.js.map +2 -2
  132. package/dist/esm/stories/popover.stories.js +1 -1
  133. package/dist/esm/stories/popover.stories.js.map +2 -2
  134. package/dist/esm/stories/radio.stories.js +1 -1
  135. package/dist/esm/stories/radio.stories.js.map +2 -2
  136. package/dist/esm/stories/skeleton.stories.js +1 -1
  137. package/dist/esm/stories/skeleton.stories.js.map +2 -2
  138. package/dist/esm/stories/text.stories.d.ts +24 -3
  139. package/dist/esm/stories/text.stories.js +1 -1
  140. package/dist/esm/stories/text.stories.js.map +2 -2
  141. package/dist/esm/tsconfig.tsbuildinfo +1 -1
  142. package/package.json +20 -12
  143. package/src/.DS_Store +0 -0
  144. package/src/components/badge.tsx +6 -6
  145. package/src/components/button.tsx +16 -16
  146. package/src/components/checkbox.tsx +4 -4
  147. package/src/components/dialog.tsx +13 -10
  148. package/src/components/heading.tsx +1 -1
  149. package/src/components/index.ts +11 -11
  150. package/src/components/input.tsx +10 -10
  151. package/src/components/popover.tsx +2 -2
  152. package/src/components/radio.tsx +4 -4
  153. package/src/components/skeleton.tsx +2 -2
  154. package/src/components/text.tsx +36 -16
  155. package/src/components/theme.tsx +1 -1
  156. package/src/helpers/index.ts +1 -1
  157. package/src/icons/spinner.tsx +1 -3
  158. package/src/index.ts +1 -1
  159. package/src/stories/badge.stories.tsx +1 -1
  160. package/src/stories/button.stories.tsx +1 -1
  161. package/src/stories/checkbox.stories.tsx +2 -2
  162. package/src/stories/dialog.stories.tsx +8 -8
  163. package/src/stories/input.stories.tsx +2 -2
  164. package/src/stories/popover.stories.tsx +2 -2
  165. package/src/stories/radio.stories.tsx +4 -4
  166. package/src/stories/skeleton.stories.tsx +5 -5
  167. package/src/stories/text.stories.tsx +26 -1
  168. package/style.css +180 -171
  169. package/css-explain.png +0 -0
package/style.css CHANGED
@@ -501,7 +501,7 @@ video {
501
501
  --tw-contain-paint: ;
502
502
  --tw-contain-style: ;
503
503
  }
504
- .sr-only {
504
+ .ai-sr-only {
505
505
  position: absolute;
506
506
  width: 1px;
507
507
  height: 1px;
@@ -512,374 +512,374 @@ video {
512
512
  white-space: nowrap;
513
513
  border-width: 0;
514
514
  }
515
- .fixed {
515
+ .ai-fixed {
516
516
  position: fixed;
517
517
  }
518
- .absolute {
518
+ .ai-absolute {
519
519
  position: absolute;
520
520
  }
521
- .relative {
521
+ .ai-relative {
522
522
  position: relative;
523
523
  }
524
- .inset-0 {
524
+ .ai-inset-0 {
525
525
  inset: 0px;
526
526
  }
527
- .left-1\/2 {
527
+ .ai-left-1\/2 {
528
528
  left: 50%;
529
529
  }
530
- .right-4 {
530
+ .ai-right-4 {
531
531
  right: 1rem;
532
532
  }
533
- .top-1\/2 {
533
+ .ai-top-1\/2 {
534
534
  top: 50%;
535
535
  }
536
- .top-4 {
536
+ .ai-top-4 {
537
537
  top: 1rem;
538
538
  }
539
- .z-50 {
539
+ .ai-z-50 {
540
540
  z-index: 50;
541
541
  }
542
- .z-\[1\] {
542
+ .ai-z-\[1\] {
543
543
  z-index: 1;
544
544
  }
545
- .-order-1 {
545
+ .-ai-order-1 {
546
546
  order: -1;
547
547
  }
548
- .order-2 {
548
+ .ai-order-2 {
549
549
  order: 2;
550
550
  }
551
- .flex {
551
+ .ai-flex {
552
552
  display: flex;
553
553
  }
554
- .inline-flex {
554
+ .ai-inline-flex {
555
555
  display: inline-flex;
556
556
  }
557
- .grid {
557
+ .ai-grid {
558
558
  display: grid;
559
559
  }
560
- .contents {
561
- display: contents;
562
- }
563
- .hidden {
564
- display: none;
565
- }
566
- .aspect-square {
560
+ .ai-aspect-square {
567
561
  aspect-ratio: 1 / 1;
568
562
  }
569
- .size-10 {
563
+ .ai-size-10 {
570
564
  width: 2.5rem;
571
565
  height: 2.5rem;
572
566
  }
573
- .size-12 {
567
+ .ai-size-12 {
574
568
  width: 3rem;
575
569
  height: 3rem;
576
570
  }
577
- .size-2 {
571
+ .ai-size-2 {
578
572
  width: 0.5rem;
579
573
  height: 0.5rem;
580
574
  }
581
- .size-2\.5 {
575
+ .ai-size-2\.5 {
582
576
  width: 0.625rem;
583
577
  height: 0.625rem;
584
578
  }
585
- .size-4 {
579
+ .ai-size-4 {
586
580
  width: 1rem;
587
581
  height: 1rem;
588
582
  }
589
- .size-full {
583
+ .ai-size-full {
590
584
  width: 100%;
591
585
  height: 100%;
592
586
  }
593
- .h-10 {
587
+ .ai-h-10 {
594
588
  height: 2.5rem;
595
589
  }
596
- .h-11 {
590
+ .ai-h-11 {
597
591
  height: 2.75rem;
598
592
  }
599
- .h-12 {
593
+ .ai-h-12 {
600
594
  height: 3rem;
601
595
  }
602
- .h-2 {
603
- height: 0.5rem;
604
- }
605
- .h-8 {
596
+ .ai-h-8 {
606
597
  height: 2rem;
607
598
  }
608
- .h-full {
599
+ .ai-h-full {
609
600
  height: 100%;
610
601
  }
611
- .w-72 {
602
+ .ai-w-72 {
612
603
  width: 18rem;
613
604
  }
614
- .w-full {
605
+ .ai-w-full {
615
606
  width: 100%;
616
607
  }
617
- .max-w-lg {
608
+ .ai-max-w-lg {
618
609
  max-width: 32rem;
619
610
  }
620
- .shrink-0 {
611
+ .ai-shrink-0 {
621
612
  flex-shrink: 0;
622
613
  }
623
- .-translate-x-1\/2 {
614
+ .-ai-translate-x-1\/2 {
624
615
  --tw-translate-x: -50%;
625
616
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
626
617
  }
627
- .-translate-y-1\/2 {
618
+ .-ai-translate-y-1\/2 {
628
619
  --tw-translate-y: -50%;
629
620
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
630
621
  }
631
- @keyframes pulse {
622
+ @keyframes ai-pulse {
632
623
 
633
624
  50% {
634
625
  opacity: .5;
635
626
  }
636
627
  }
637
- .animate-pulse {
638
- animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
628
+ .ai-animate-pulse {
629
+ animation: ai-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
639
630
  }
640
- @keyframes spin {
631
+ @keyframes ai-spin {
641
632
 
642
633
  to {
643
634
  transform: rotate(360deg);
644
635
  }
645
636
  }
646
- .animate-spin {
647
- animation: spin 1s linear infinite;
637
+ .ai-animate-spin {
638
+ animation: ai-spin 1s linear infinite;
648
639
  }
649
- .cursor-not-allowed {
640
+ .ai-cursor-not-allowed {
650
641
  cursor: not-allowed;
651
642
  }
652
- .flex-row {
643
+ .ai-flex-row {
653
644
  flex-direction: row;
654
645
  }
655
- .flex-col {
646
+ .ai-flex-col {
656
647
  flex-direction: column;
657
648
  }
658
- .flex-col-reverse {
649
+ .ai-flex-col-reverse {
659
650
  flex-direction: column-reverse;
660
651
  }
661
- .items-center {
652
+ .ai-items-center {
662
653
  align-items: center;
663
654
  }
664
- .justify-center {
655
+ .ai-justify-center {
665
656
  justify-content: center;
666
657
  }
667
- .gap-2 {
668
- gap: 0.5rem;
669
- }
670
- .gap-4 {
658
+ .ai-gap-4 {
671
659
  gap: 1rem;
672
660
  }
673
- .space-y-1 > :not([hidden]) ~ :not([hidden]) {
661
+ .ai-space-y-1 > :not([hidden]) ~ :not([hidden]) {
674
662
  --tw-space-y-reverse: 0;
675
663
  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
676
664
  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
677
665
  }
678
- .space-y-1\.5 > :not([hidden]) ~ :not([hidden]) {
666
+ .ai-space-y-1\.5 > :not([hidden]) ~ :not([hidden]) {
679
667
  --tw-space-y-reverse: 0;
680
668
  margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse)));
681
669
  margin-bottom: calc(0.375rem * var(--tw-space-y-reverse));
682
670
  }
683
- .overflow-hidden {
671
+ .ai-overflow-hidden {
684
672
  overflow: hidden;
685
673
  }
686
- .whitespace-nowrap {
674
+ .ai-whitespace-nowrap {
687
675
  white-space: nowrap;
688
676
  }
689
- .rounded-\[20px\] {
677
+ .ai-rounded-\[20px\] {
690
678
  border-radius: 20px;
691
679
  }
692
- .rounded-btn {
680
+ .ai-rounded-btn {
693
681
  border-radius: var(--btn-radius);
694
682
  }
695
- .rounded-full {
683
+ .ai-rounded-full {
696
684
  border-radius: 9999px;
697
685
  }
698
- .rounded-md {
686
+ .ai-rounded-md {
699
687
  border-radius: 0.375rem;
700
688
  }
701
- .rounded-sm {
689
+ .ai-rounded-sm {
702
690
  border-radius: 0.125rem;
703
691
  }
704
- .border {
692
+ .ai-border {
705
693
  border-width: 1px;
706
694
  }
707
- .border-solid {
695
+ .ai-border-solid {
708
696
  border-style: solid;
709
697
  }
710
- .border-primary {
698
+ .ai-border-primary {
711
699
  border-color: var(--brand-color-1);
712
700
  }
713
- .border-transparent {
701
+ .ai-border-transparent {
714
702
  border-color: transparent;
715
703
  }
716
- .bg-background {
704
+ .ai-bg-background {
717
705
  background-color: var(--container-primary-color);
718
706
  }
719
- .bg-badge {
707
+ .ai-bg-badge {
720
708
  background-color: var(--secondary-brand-color-2);
721
709
  }
722
- .bg-black\/80 {
710
+ .ai-bg-black\/80 {
723
711
  background-color: rgb(0 0 0 / 0.8);
724
712
  }
725
- .bg-btn-primary {
713
+ .ai-bg-btn-primary {
726
714
  background-color: var(--btn-bg-color);
727
715
  }
728
- .bg-btn-secondary {
716
+ .ai-bg-btn-secondary {
729
717
  background-color: var(--btn-bg-secondary-color);
730
718
  }
731
- .bg-skeleton {
719
+ .ai-bg-skeleton {
732
720
  background-color: var(--tertiary-color);
733
721
  }
734
- .fill-current {
722
+ .ai-fill-current {
735
723
  fill: currentColor;
736
724
  }
737
- .p-4 {
725
+ .ai-p-4 {
738
726
  padding: 1rem;
739
727
  }
740
- .p-6 {
728
+ .ai-p-6 {
741
729
  padding: 1.5rem;
742
730
  }
743
- .px-2 {
731
+ .ai-px-2 {
744
732
  padding-left: 0.5rem;
745
733
  padding-right: 0.5rem;
746
734
  }
747
- .px-3 {
735
+ .ai-px-3 {
748
736
  padding-left: 0.75rem;
749
737
  padding-right: 0.75rem;
750
738
  }
751
- .px-4 {
739
+ .ai-px-4 {
752
740
  padding-left: 1rem;
753
741
  padding-right: 1rem;
754
742
  }
755
- .px-8 {
743
+ .ai-px-8 {
756
744
  padding-left: 2rem;
757
745
  padding-right: 2rem;
758
746
  }
759
- .px-\[10px\] {
747
+ .ai-px-\[10px\] {
760
748
  padding-left: 10px;
761
749
  padding-right: 10px;
762
750
  }
763
- .py-1 {
751
+ .ai-py-1 {
764
752
  padding-top: 0.25rem;
765
753
  padding-bottom: 0.25rem;
766
754
  }
767
- .py-2 {
755
+ .ai-py-2 {
768
756
  padding-top: 0.5rem;
769
757
  padding-bottom: 0.5rem;
770
758
  }
771
- .pl-0 {
759
+ .ai-pl-0 {
772
760
  padding-left: 0px;
773
761
  }
774
- .pr-0 {
762
+ .ai-pr-0 {
775
763
  padding-right: 0px;
776
764
  }
777
- .text-center {
765
+ .ai-text-center {
778
766
  text-align: center;
779
767
  }
780
- .text-2xl {
768
+ .ai-text-2xl {
781
769
  font-size: 1.5rem;
782
770
  line-height: 2rem;
783
771
  }
784
- .text-3xl {
772
+ .ai-text-3xl {
785
773
  font-size: 1.875rem;
786
774
  line-height: 2.25rem;
787
775
  }
788
- .text-4xl {
776
+ .ai-text-4xl {
789
777
  font-size: 2.25rem;
790
778
  line-height: 2.5rem;
791
779
  }
792
- .text-5xl {
780
+ .ai-text-5xl {
793
781
  font-size: 3rem;
794
782
  line-height: 1;
795
783
  }
796
- .text-base {
784
+ .ai-text-\[12px\] {
785
+ font-size: 12px;
786
+ }
787
+ .ai-text-\[14px\] {
788
+ font-size: 14px;
789
+ }
790
+ .ai-text-\[16px\] {
791
+ font-size: 16px;
792
+ }
793
+ .ai-text-base {
797
794
  font-size: 1rem;
798
795
  line-height: 1.5rem;
799
796
  }
800
- .text-lg {
797
+ .ai-text-lg {
801
798
  font-size: 1.125rem;
802
799
  line-height: 1.75rem;
803
800
  }
804
- .text-sm {
801
+ .ai-text-sm {
805
802
  font-size: 0.875rem;
806
803
  line-height: 1.25rem;
807
804
  }
808
- .text-xl {
805
+ .ai-text-xl {
809
806
  font-size: 1.25rem;
810
807
  line-height: 1.75rem;
811
808
  }
812
- .text-xs {
809
+ .ai-text-xs {
813
810
  font-size: 0.75rem;
814
811
  line-height: 1rem;
815
812
  }
816
- .font-medium {
813
+ .ai-font-bold {
814
+ font-weight: 700;
815
+ }
816
+ .ai-font-light {
817
+ font-weight: 300;
818
+ }
819
+ .ai-font-medium {
817
820
  font-weight: 500;
818
821
  }
819
- .font-semibold {
822
+ .ai-font-normal {
823
+ font-weight: 400;
824
+ }
825
+ .ai-font-semibold {
820
826
  font-weight: 600;
821
827
  }
822
- .leading-none {
828
+ .ai-leading-none {
823
829
  line-height: 1;
824
830
  }
825
- .tracking-tight {
831
+ .ai-tracking-tight {
826
832
  letter-spacing: -0.025em;
827
833
  }
828
- .text-badge-foreground {
834
+ .ai-text-badge-foreground {
829
835
  color: var(--brand-color-1);
830
836
  }
831
- .text-btn-primary-foreground {
837
+ .ai-text-btn-primary-foreground {
832
838
  color: var(--btn-text-color);
833
839
  }
834
- .text-btn-secondary-foreground {
840
+ .ai-text-btn-secondary-foreground {
835
841
  color: var(--btn-text-secondary-color);
836
842
  }
837
- .text-current {
843
+ .ai-text-current {
838
844
  color: currentColor;
839
845
  }
840
- .text-primary {
846
+ .ai-text-primary {
841
847
  color: var(--brand-color-1);
842
848
  }
843
- .underline-offset-4 {
849
+ .ai-underline-offset-4 {
844
850
  text-underline-offset: 4px;
845
851
  }
846
- .opacity-70 {
852
+ .ai-opacity-70 {
847
853
  opacity: 0.7;
848
854
  }
849
- .shadow-lg {
855
+ .ai-shadow-lg {
850
856
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
851
857
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
852
858
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
853
859
  }
854
- .shadow-md {
860
+ .ai-shadow-md {
855
861
  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
856
862
  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
857
863
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
858
864
  }
859
- .outline-none {
865
+ .ai-outline-none {
860
866
  outline: 2px solid transparent;
861
867
  outline-offset: 2px;
862
868
  }
863
- .outline {
864
- outline-style: solid;
865
- }
866
- .ring-offset-background {
869
+ .ai-ring-offset-background {
867
870
  --tw-ring-offset-color: var(--container-primary-color);
868
871
  }
869
- .filter {
870
- 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);
871
- }
872
- .transition-colors {
872
+ .ai-transition-colors {
873
873
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
874
874
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
875
875
  transition-duration: 150ms;
876
876
  }
877
- .transition-opacity {
877
+ .ai-transition-opacity {
878
878
  transition-property: opacity;
879
879
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
880
880
  transition-duration: 150ms;
881
881
  }
882
- .duration-200 {
882
+ .ai-duration-200 {
883
883
  transition-duration: 200ms;
884
884
  }
885
885
 
@@ -1076,207 +1076,216 @@ video {
1076
1076
  --brand-color-1: #88f387;
1077
1077
  }
1078
1078
 
1079
- .file\:border-0::file-selector-button {
1079
+ .file\:ai-border-0::file-selector-button {
1080
1080
  border-width: 0px;
1081
1081
  }
1082
1082
 
1083
- .file\:bg-transparent::file-selector-button {
1083
+ .file\:ai-bg-transparent::file-selector-button {
1084
1084
  background-color: transparent;
1085
1085
  }
1086
1086
 
1087
- .file\:text-sm::file-selector-button {
1087
+ .file\:ai-text-sm::file-selector-button {
1088
1088
  font-size: 0.875rem;
1089
1089
  line-height: 1.25rem;
1090
1090
  }
1091
1091
 
1092
- .file\:font-medium::file-selector-button {
1092
+ .file\:ai-font-medium::file-selector-button {
1093
1093
  font-weight: 500;
1094
1094
  }
1095
1095
 
1096
- .before\:absolute::before {
1096
+ .before\:ai-absolute::before {
1097
1097
  content: var(--tw-content);
1098
1098
  position: absolute;
1099
1099
  }
1100
1100
 
1101
- .before\:inset-y-0::before {
1101
+ .before\:ai-inset-y-0::before {
1102
1102
  content: var(--tw-content);
1103
1103
  top: 0px;
1104
1104
  bottom: 0px;
1105
1105
  }
1106
1106
 
1107
- .before\:w-full::before {
1107
+ .before\:-ai-z-\[1\]::before {
1108
+ content: var(--tw-content);
1109
+ z-index: -1;
1110
+ }
1111
+
1112
+ .before\:ai-w-full::before {
1108
1113
  content: var(--tw-content);
1109
1114
  width: 100%;
1110
1115
  }
1111
1116
 
1112
- .before\:-translate-x-full::before {
1117
+ .before\:-ai-translate-x-full::before {
1113
1118
  content: var(--tw-content);
1114
1119
  --tw-translate-x: -100%;
1115
1120
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
1116
1121
  }
1117
1122
 
1118
- .before\:rounded-btn::before {
1123
+ .before\:ai-rounded-btn::before {
1119
1124
  content: var(--tw-content);
1120
1125
  border-radius: var(--btn-radius);
1121
1126
  }
1122
1127
 
1123
- .before\:bg-btn-primary-active::before {
1128
+ .before\:ai-bg-btn-primary-active::before {
1124
1129
  content: var(--tw-content);
1125
1130
  background-color: var(--btn-bg-active-color);
1126
1131
  }
1127
1132
 
1128
- .before\:bg-btn-secondary-active::before {
1133
+ .before\:ai-bg-btn-secondary-active::before {
1129
1134
  content: var(--tw-content);
1130
1135
  background-color: var(--btn-bg-secondary-active-color);
1131
1136
  }
1132
1137
 
1133
- .before\:transition-transform::before {
1138
+ .before\:ai-transition-transform::before {
1134
1139
  content: var(--tw-content);
1135
1140
  transition-property: transform;
1136
1141
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1137
1142
  transition-duration: 150ms;
1138
1143
  }
1139
1144
 
1140
- .before\:duration-300::before {
1145
+ .before\:ai-duration-300::before {
1141
1146
  content: var(--tw-content);
1142
1147
  transition-duration: 300ms;
1143
1148
  }
1144
1149
 
1145
- .before\:ease-in-out::before {
1150
+ .before\:ai-ease-in-out::before {
1146
1151
  content: var(--tw-content);
1147
1152
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
1148
1153
  }
1149
1154
 
1150
- .before\:content-\[\"\"\]::before {
1155
+ .before\:ai-content-\[\"\"\]::before {
1151
1156
  --tw-content: "";
1152
1157
  content: var(--tw-content);
1153
1158
  }
1154
1159
 
1155
- .hover\:bg-btn-primary:hover {
1156
- background-color: var(--btn-bg-color);
1160
+ .hover\:\!ai-bg-btn-primary:hover {
1161
+ background-color: var(--btn-bg-color) !important;
1157
1162
  }
1158
1163
 
1159
- .hover\:bg-btn-primary-active:hover {
1160
- background-color: var(--btn-bg-active-color);
1164
+ .hover\:\!ai-bg-btn-secondary:hover {
1165
+ background-color: var(--btn-bg-secondary-color) !important;
1161
1166
  }
1162
1167
 
1163
- .hover\:bg-btn-secondary:hover {
1164
- background-color: var(--btn-bg-secondary-color);
1168
+ .hover\:ai-bg-btn-primary:hover {
1169
+ background-color: var(--btn-bg-color);
1170
+ }
1171
+
1172
+ .hover\:ai-bg-btn-primary-active:hover {
1173
+ background-color: var(--btn-bg-active-color);
1165
1174
  }
1166
1175
 
1167
- .hover\:bg-btn-secondary-active:hover {
1176
+ .hover\:ai-bg-btn-secondary-active:hover {
1168
1177
  background-color: var(--btn-bg-secondary-active-color);
1169
1178
  }
1170
1179
 
1171
- .hover\:text-btn-primary-foreground:hover {
1180
+ .hover\:ai-text-btn-primary-foreground:hover {
1172
1181
  color: var(--btn-text-color);
1173
1182
  }
1174
1183
 
1175
- .hover\:text-btn-secondary:hover {
1184
+ .hover\:ai-text-btn-secondary:hover {
1176
1185
  color: var(--btn-bg-secondary-color);
1177
1186
  }
1178
1187
 
1179
- .hover\:underline:hover {
1188
+ .hover\:ai-underline:hover {
1180
1189
  text-decoration-line: underline;
1181
1190
  }
1182
1191
 
1183
- .hover\:opacity-100:hover {
1192
+ .hover\:ai-opacity-100:hover {
1184
1193
  opacity: 1;
1185
1194
  }
1186
1195
 
1187
- .hover\:before\:translate-x-0:hover::before {
1196
+ .hover\:before\:ai-translate-x-0:hover::before {
1188
1197
  content: var(--tw-content);
1189
1198
  --tw-translate-x: 0px;
1190
1199
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
1191
1200
  }
1192
1201
 
1193
- .focus\:outline-none:focus {
1202
+ .focus\:ai-outline-none:focus {
1194
1203
  outline: 2px solid transparent;
1195
1204
  outline-offset: 2px;
1196
1205
  }
1197
1206
 
1198
- .focus\:ring-2:focus {
1207
+ .focus\:ai-ring-2:focus {
1199
1208
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1200
1209
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1201
1210
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
1202
1211
  }
1203
1212
 
1204
- .focus\:ring-offset-2:focus {
1213
+ .focus\:ai-ring-offset-2:focus {
1205
1214
  --tw-ring-offset-width: 2px;
1206
1215
  }
1207
1216
 
1208
- .focus-visible\:outline-none:focus-visible {
1217
+ .focus-visible\:ai-outline-none:focus-visible {
1209
1218
  outline: 2px solid transparent;
1210
1219
  outline-offset: 2px;
1211
1220
  }
1212
1221
 
1213
- .focus-visible\:ring-2:focus-visible {
1222
+ .focus-visible\:ai-ring-2:focus-visible {
1214
1223
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
1215
1224
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
1216
1225
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
1217
1226
  }
1218
1227
 
1219
- .focus-visible\:ring-offset-2:focus-visible {
1228
+ .focus-visible\:ai-ring-offset-2:focus-visible {
1220
1229
  --tw-ring-offset-width: 2px;
1221
1230
  }
1222
1231
 
1223
- .disabled\:pointer-events-none:disabled {
1232
+ .disabled\:ai-pointer-events-none:disabled {
1224
1233
  pointer-events: none;
1225
1234
  }
1226
1235
 
1227
- .disabled\:cursor-not-allowed:disabled {
1236
+ .disabled\:ai-cursor-not-allowed:disabled {
1228
1237
  cursor: not-allowed;
1229
1238
  }
1230
1239
 
1231
- .disabled\:bg-btn-primary-disabled:disabled {
1240
+ .disabled\:ai-bg-btn-primary-disabled:disabled {
1232
1241
  background-color: var(--btn-bg-disabled-color);
1233
1242
  }
1234
1243
 
1235
- .disabled\:bg-btn-secondary-disabled:disabled {
1244
+ .disabled\:ai-bg-btn-secondary-disabled:disabled {
1236
1245
  background-color: var(--btn-bg-secondary-disabled-color);
1237
1246
  }
1238
1247
 
1239
- .disabled\:text-btn-primary-disabled-foreground:disabled {
1248
+ .disabled\:ai-text-btn-primary-disabled-foreground:disabled {
1240
1249
  color: var(--quaternary-color);
1241
1250
  }
1242
1251
 
1243
- .disabled\:text-btn-secondary-disabled-foreground:disabled {
1252
+ .disabled\:ai-text-btn-secondary-disabled-foreground:disabled {
1244
1253
  color: var(--quaternary-color);
1245
1254
  }
1246
1255
 
1247
- .disabled\:opacity-50:disabled {
1256
+ .disabled\:ai-opacity-50:disabled {
1248
1257
  opacity: 0.5;
1249
1258
  }
1250
1259
 
1251
- .data-\[state\=checked\]\:bg-primary[data-state=checked] {
1260
+ .data-\[state\=checked\]\:ai-bg-primary[data-state=checked] {
1252
1261
  background-color: var(--brand-color-1);
1253
1262
  }
1254
1263
 
1255
- .data-\[state\=checked\]\:text-primary-foreground[data-state=checked] {
1264
+ .data-\[state\=checked\]\:ai-text-primary-foreground[data-state=checked] {
1256
1265
  color: var(--btn-text-color);
1257
1266
  }
1258
1267
 
1259
1268
  @media (min-width: 640px) {
1260
1269
 
1261
- .sm\:flex-row {
1270
+ .sm\:ai-flex-row {
1262
1271
  flex-direction: row;
1263
1272
  }
1264
1273
 
1265
- .sm\:justify-end {
1274
+ .sm\:ai-justify-end {
1266
1275
  justify-content: flex-end;
1267
1276
  }
1268
1277
 
1269
- .sm\:space-x-2 > :not([hidden]) ~ :not([hidden]) {
1278
+ .sm\:ai-space-x-2 > :not([hidden]) ~ :not([hidden]) {
1270
1279
  --tw-space-x-reverse: 0;
1271
1280
  margin-right: calc(0.5rem * var(--tw-space-x-reverse));
1272
1281
  margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
1273
1282
  }
1274
1283
 
1275
- .sm\:rounded-lg {
1284
+ .sm\:ai-rounded-lg {
1276
1285
  border-radius: 0.5rem;
1277
1286
  }
1278
1287
 
1279
- .sm\:text-left {
1288
+ .sm\:ai-text-left {
1280
1289
  text-align: left;
1281
1290
  }
1282
1291
  }