untitledui 0.1.13 → 0.1.15
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/config/styles/globals.css +5 -0
- package/config/styles/theme.css +202 -187
- package/config/styles/typography.css +0 -2
- package/dist/index.mjs +26 -26
- package/package.json +2 -2
package/config/styles/theme.css
CHANGED
|
@@ -88,17 +88,16 @@
|
|
|
88
88
|
--drop-shadow-iphone-mockup: 20px 12px 18px rgba(16, 24, 40, 0.2);
|
|
89
89
|
|
|
90
90
|
/* ANIMATIONS */
|
|
91
|
-
--animate-caret-blink: caret-blink
|
|
91
|
+
--animate-caret-blink: caret-blink 1s infinite;
|
|
92
92
|
|
|
93
93
|
@keyframes caret-blink {
|
|
94
94
|
0%,
|
|
95
|
-
|
|
96
|
-
100% {
|
|
95
|
+
50% {
|
|
97
96
|
opacity: 1;
|
|
98
97
|
}
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
opacity:
|
|
98
|
+
51%,
|
|
99
|
+
100% {
|
|
100
|
+
opacity: 0;
|
|
102
101
|
}
|
|
103
102
|
}
|
|
104
103
|
|
|
@@ -164,31 +163,18 @@
|
|
|
164
163
|
--color-success-900: rgb(7 77 49);
|
|
165
164
|
--color-success-950: rgb(5 51 33);
|
|
166
165
|
|
|
167
|
-
--color-gray-
|
|
168
|
-
--color-gray-
|
|
169
|
-
--color-gray-
|
|
170
|
-
--color-gray-
|
|
171
|
-
--color-gray-
|
|
172
|
-
--color-gray-
|
|
173
|
-
--color-gray-
|
|
174
|
-
--color-gray-
|
|
175
|
-
--color-gray-
|
|
176
|
-
--color-gray-
|
|
177
|
-
--color-gray-
|
|
178
|
-
--color-gray-
|
|
179
|
-
|
|
180
|
-
--color-gray-dark-mode-25: rgb(250 250 250);
|
|
181
|
-
--color-gray-dark-mode-50: rgb(247 247 247);
|
|
182
|
-
--color-gray-dark-mode-100: rgb(240 240 241);
|
|
183
|
-
--color-gray-dark-mode-200: rgb(236 236 237);
|
|
184
|
-
--color-gray-dark-mode-300: rgb(206 207 210);
|
|
185
|
-
--color-gray-dark-mode-400: rgb(148 151 156);
|
|
186
|
-
--color-gray-dark-mode-500: rgb(133 136 142);
|
|
187
|
-
--color-gray-dark-mode-600: rgb(97 101 108);
|
|
188
|
-
--color-gray-dark-mode-700: rgb(55 58 65);
|
|
189
|
-
--color-gray-dark-mode-800: rgb(34 38 47);
|
|
190
|
-
--color-gray-dark-mode-900: rgb(19 22 27);
|
|
191
|
-
--color-gray-dark-mode-950: rgb(12 14 18);
|
|
166
|
+
--color-gray-25: rgb(253 253 253);
|
|
167
|
+
--color-gray-50: rgb(250 250 250);
|
|
168
|
+
--color-gray-100: rgb(245 245 245);
|
|
169
|
+
--color-gray-200: rgb(233 234 235);
|
|
170
|
+
--color-gray-300: rgb(213 215 218);
|
|
171
|
+
--color-gray-400: rgb(164 167 174);
|
|
172
|
+
--color-gray-500: rgb(113 118 128);
|
|
173
|
+
--color-gray-600: rgb(83 88 98);
|
|
174
|
+
--color-gray-700: rgb(65 70 81);
|
|
175
|
+
--color-gray-800: rgb(37 43 55);
|
|
176
|
+
--color-gray-900: rgb(24 29 39);
|
|
177
|
+
--color-gray-950: rgb(10 13 18);
|
|
192
178
|
|
|
193
179
|
--color-gray-blue-25: rgb(252 252 253);
|
|
194
180
|
--color-gray-blue-50: rgb(248 249 252);
|
|
@@ -538,16 +524,16 @@
|
|
|
538
524
|
--color-utility-brand-900: var(--color-brand-900);
|
|
539
525
|
--color-utility-brand-900_alt: var(--color-brand-900);
|
|
540
526
|
|
|
541
|
-
--color-utility-gray-50: var(--color-gray-
|
|
542
|
-
--color-utility-gray-100: var(--color-gray-
|
|
543
|
-
--color-utility-gray-200: var(--color-gray-
|
|
544
|
-
--color-utility-gray-300: var(--color-gray-
|
|
545
|
-
--color-utility-gray-400: var(--color-gray-
|
|
546
|
-
--color-utility-gray-500: var(--color-gray-
|
|
547
|
-
--color-utility-gray-600: var(--color-gray-
|
|
548
|
-
--color-utility-gray-700: var(--color-gray-
|
|
549
|
-
--color-utility-gray-800: var(--color-gray-
|
|
550
|
-
--color-utility-gray-900: var(--color-gray-
|
|
527
|
+
--color-utility-gray-50: var(--color-gray-50);
|
|
528
|
+
--color-utility-gray-100: var(--color-gray-100);
|
|
529
|
+
--color-utility-gray-200: var(--color-gray-200);
|
|
530
|
+
--color-utility-gray-300: var(--color-gray-300);
|
|
531
|
+
--color-utility-gray-400: var(--color-gray-400);
|
|
532
|
+
--color-utility-gray-500: var(--color-gray-500);
|
|
533
|
+
--color-utility-gray-600: var(--color-gray-600);
|
|
534
|
+
--color-utility-gray-700: var(--color-gray-700);
|
|
535
|
+
--color-utility-gray-800: var(--color-gray-800);
|
|
536
|
+
--color-utility-gray-900: var(--color-gray-900);
|
|
551
537
|
|
|
552
538
|
--color-utility-error-50: var(--color-error-50);
|
|
553
539
|
--color-utility-error-100: var(--color-error-100);
|
|
@@ -676,23 +662,23 @@
|
|
|
676
662
|
--color-utility-yellow-700: var(--color-yellow-700);
|
|
677
663
|
|
|
678
664
|
/* TEXT COLORS */
|
|
679
|
-
--color-text-primary: var(--color-gray-
|
|
680
|
-
--color-text-tertiary: var(--color-gray-
|
|
665
|
+
--color-text-primary: var(--color-gray-900);
|
|
666
|
+
--color-text-tertiary: var(--color-gray-600);
|
|
681
667
|
--color-text-error-primary: var(--color-error-600);
|
|
682
668
|
--color-text-warning-primary: var(--color-warning-600);
|
|
683
669
|
--color-text-success-primary: var(--color-success-600);
|
|
684
670
|
--color-text-white: var(--color-white);
|
|
685
|
-
--color-text-secondary: var(--color-gray-
|
|
686
|
-
--color-text-disabled: var(--color-gray-
|
|
687
|
-
--color-text-secondary_hover: var(--color-gray-
|
|
688
|
-
--color-text-tertiary_hover: var(--color-gray-
|
|
671
|
+
--color-text-secondary: var(--color-gray-700);
|
|
672
|
+
--color-text-disabled: var(--color-gray-500);
|
|
673
|
+
--color-text-secondary_hover: var(--color-gray-800);
|
|
674
|
+
--color-text-tertiary_hover: var(--color-gray-700);
|
|
689
675
|
--color-text-brand-secondary: var(--color-brand-700);
|
|
690
|
-
--color-text-placeholder: var(--color-gray-
|
|
691
|
-
--color-text-placeholder_subtle: var(--color-gray-
|
|
676
|
+
--color-text-placeholder: var(--color-gray-500);
|
|
677
|
+
--color-text-placeholder_subtle: var(--color-gray-300);
|
|
692
678
|
--color-text-brand-tertiary: var(--color-brand-600);
|
|
693
|
-
--color-text-editor-icon-fg: var(--color-gray-
|
|
694
|
-
--color-text-editor-icon-fg_active: var(--color-gray-
|
|
695
|
-
--color-text-quaternary: var(--color-gray-
|
|
679
|
+
--color-text-editor-icon-fg: var(--color-gray-400);
|
|
680
|
+
--color-text-editor-icon-fg_active: var(--color-gray-500);
|
|
681
|
+
--color-text-quaternary: var(--color-gray-500);
|
|
696
682
|
--color-text-brand-primary: var(--color-brand-900);
|
|
697
683
|
--color-text-primary_on-brand: var(--color-white);
|
|
698
684
|
--color-text-secondary_on-brand: var(--color-brand-200);
|
|
@@ -703,43 +689,43 @@
|
|
|
703
689
|
--color-text-error-primary_hover: var(--color-error-700);
|
|
704
690
|
|
|
705
691
|
/* BORDER COLORS */
|
|
706
|
-
--color-border-secondary: var(--color-gray-
|
|
692
|
+
--color-border-secondary: var(--color-gray-200);
|
|
707
693
|
--color-border-error_subtle: var(--color-error-300);
|
|
708
|
-
--color-border-primary: var(--color-gray-
|
|
694
|
+
--color-border-primary: var(--color-gray-300);
|
|
709
695
|
--color-border-brand: var(--color-brand-500);
|
|
710
|
-
--color-border-disabled: var(--color-gray-
|
|
696
|
+
--color-border-disabled: var(--color-gray-300);
|
|
711
697
|
--color-border-error: var(--color-error-500);
|
|
712
|
-
--color-border-disabled_subtle: var(--color-gray-
|
|
713
|
-
--color-border-tertiary: var(--color-gray-
|
|
698
|
+
--color-border-disabled_subtle: var(--color-gray-200);
|
|
699
|
+
--color-border-tertiary: var(--color-gray-100);
|
|
714
700
|
--color-border-brand_alt: var(--color-brand-600);
|
|
715
701
|
--color-border-secondary_alt: rgb(0 0 0 / 0.08);
|
|
716
702
|
|
|
717
703
|
/* FOREGROUND COLORS */
|
|
718
|
-
--color-fg-secondary: var(--color-gray-
|
|
704
|
+
--color-fg-secondary: var(--color-gray-700);
|
|
719
705
|
--color-fg-warning-primary: var(--color-warning-600);
|
|
720
706
|
--color-fg-success-primary: var(--color-success-600);
|
|
721
707
|
--color-fg-white: var(--color-white);
|
|
722
708
|
--color-fg-success-secondary: var(--color-success-500);
|
|
723
|
-
--color-fg-secondary_hover: var(--color-gray-
|
|
724
|
-
--color-fg-primary: var(--color-gray-
|
|
725
|
-
--color-fg-disabled: var(--color-gray-
|
|
709
|
+
--color-fg-secondary_hover: var(--color-gray-800);
|
|
710
|
+
--color-fg-primary: var(--color-gray-900);
|
|
711
|
+
--color-fg-disabled: var(--color-gray-400);
|
|
726
712
|
--color-fg-brand-secondary: var(--color-brand-500);
|
|
727
713
|
--color-fg-brand-primary: var(--color-brand-600);
|
|
728
|
-
--color-fg-quaternary: var(--color-gray-
|
|
729
|
-
--color-fg-quaternary_hover: var(--color-gray-
|
|
714
|
+
--color-fg-quaternary: var(--color-gray-400);
|
|
715
|
+
--color-fg-quaternary_hover: var(--color-gray-500);
|
|
730
716
|
--color-fg-error-primary: var(--color-error-600);
|
|
731
|
-
--color-fg-disabled_subtle: var(--color-gray-
|
|
717
|
+
--color-fg-disabled_subtle: var(--color-gray-300);
|
|
732
718
|
--color-fg-warning-secondary: var(--color-warning-500);
|
|
733
719
|
--color-fg-error-secondary: var(--color-error-500);
|
|
734
|
-
--color-fg-tertiary: var(--color-gray-
|
|
735
|
-
--color-fg-tertiary_hover: var(--color-gray-
|
|
720
|
+
--color-fg-tertiary: var(--color-gray-600);
|
|
721
|
+
--color-fg-tertiary_hover: var(--color-gray-700);
|
|
736
722
|
--color-fg-brand-primary_alt: var(--color-fg-brand-primary);
|
|
737
723
|
--color-fg-brand-secondary_alt: var(--color-fg-brand-secondary);
|
|
738
724
|
--color-fg-brand-secondary_hover: var(--color-brand-600);
|
|
739
725
|
|
|
740
726
|
/* BACKGROUND COLORS */
|
|
741
727
|
--color-bg-primary: var(--color-white);
|
|
742
|
-
--color-bg-tertiary: var(--color-gray-
|
|
728
|
+
--color-bg-tertiary: var(--color-gray-100);
|
|
743
729
|
--color-bg-brand-primary: var(--color-brand-50);
|
|
744
730
|
--color-bg-error-secondary: var(--color-error-100);
|
|
745
731
|
--color-bg-warning-primary: var(--color-warning-50);
|
|
@@ -747,32 +733,32 @@
|
|
|
747
733
|
--color-bg-success-primary: var(--color-success-50);
|
|
748
734
|
--color-bg-success-secondary: var(--color-success-100);
|
|
749
735
|
--color-bg-brand-solid: var(--color-brand-600);
|
|
750
|
-
--color-bg-secondary-solid: var(--color-gray-
|
|
736
|
+
--color-bg-secondary-solid: var(--color-gray-600);
|
|
751
737
|
--color-bg-error-solid: var(--color-error-600);
|
|
752
738
|
--color-bg-warning-solid: var(--color-warning-600);
|
|
753
739
|
--color-bg-success-solid: var(--color-success-600);
|
|
754
|
-
--color-bg-secondary_hover: var(--color-gray-
|
|
755
|
-
--color-bg-primary_hover: var(--color-gray-
|
|
756
|
-
--color-bg-disabled: var(--color-gray-
|
|
757
|
-
--color-bg-active: var(--color-gray-
|
|
740
|
+
--color-bg-secondary_hover: var(--color-gray-100);
|
|
741
|
+
--color-bg-primary_hover: var(--color-gray-50);
|
|
742
|
+
--color-bg-disabled: var(--color-gray-100);
|
|
743
|
+
--color-bg-active: var(--color-gray-50);
|
|
758
744
|
--color-bg-brand-solid_hover: var(--color-brand-700);
|
|
759
745
|
--color-bg-error-primary: var(--color-error-50);
|
|
760
746
|
--color-bg-brand-secondary: var(--color-brand-100);
|
|
761
|
-
--color-bg-secondary: var(--color-gray-
|
|
762
|
-
--color-bg-disabled_subtle: var(--color-gray-
|
|
763
|
-
--color-bg-quaternary: var(--color-gray-
|
|
747
|
+
--color-bg-secondary: var(--color-gray-50);
|
|
748
|
+
--color-bg-disabled_subtle: var(--color-gray-50);
|
|
749
|
+
--color-bg-quaternary: var(--color-gray-200);
|
|
764
750
|
--color-bg-primary_alt: var(--color-white);
|
|
765
751
|
--color-bg-brand-primary_alt: var(--color-brand-50);
|
|
766
|
-
--color-bg-secondary_alt: var(--color-gray-
|
|
767
|
-
--color-bg-overlay: var(--color-gray-
|
|
768
|
-
--color-bg-secondary_subtle: var(--color-gray-
|
|
752
|
+
--color-bg-secondary_alt: var(--color-gray-50);
|
|
753
|
+
--color-bg-overlay: var(--color-gray-950);
|
|
754
|
+
--color-bg-secondary_subtle: var(--color-gray-25);
|
|
769
755
|
--color-bg-brand-section: var(--color-brand-800);
|
|
770
756
|
--color-bg-brand-section_subtle: var(--color-brand-700);
|
|
771
|
-
--color-bg-primary-solid: var(--color-gray-
|
|
757
|
+
--color-bg-primary-solid: var(--color-gray-950);
|
|
772
758
|
|
|
773
759
|
/* COMPONENT COLORS */
|
|
774
760
|
--color-app-store-badge-border: rgb(166 166 166);
|
|
775
|
-
--color-avatar-bg: var(--color-gray-
|
|
761
|
+
--color-avatar-bg: var(--color-gray-100);
|
|
776
762
|
--color-avatar-contrast-border: rgb(0 0 0 / 0.08);
|
|
777
763
|
--color-avatar-profile-photo-border: var(--color-white);
|
|
778
764
|
--color-avatar-styles-bg-neutral: rgb(224 224 224);
|
|
@@ -782,7 +768,7 @@
|
|
|
782
768
|
--color-button-primary-icon_hover: var(--color-brand-200);
|
|
783
769
|
--color-featured-icon-light-fg-brand: var(--color-brand-600);
|
|
784
770
|
--color-featured-icon-light-fg-error: var(--color-error-600);
|
|
785
|
-
--color-featured-icon-light-fg-gray: var(--color-gray-
|
|
771
|
+
--color-featured-icon-light-fg-gray: var(--color-gray-500);
|
|
786
772
|
--color-featured-icon-light-fg-success: var(--color-success-600);
|
|
787
773
|
--color-featured-icon-light-fg-warning: var(--color-warning-600);
|
|
788
774
|
--color-focus-ring-error: var(--color-error-500);
|
|
@@ -791,13 +777,7 @@
|
|
|
791
777
|
--color-footer-button-fg_hover: var(--color-white);
|
|
792
778
|
--color-icon-fg-brand: var(--color-brand-600);
|
|
793
779
|
--color-icon-fg-brand_on-brand: var(--color-brand-200);
|
|
794
|
-
|
|
795
|
-
--color-nav-item-button-icon-fg: var(--color-gray-light-mode-500);
|
|
796
|
-
--color-nav-item-button-icon-fg_active: var(--color-gray-light-mode-700);
|
|
797
|
-
--color-nav-item-icon-fg: var(--color-gray-light-mode-500);
|
|
798
|
-
--color-nav-item-icon-fg_active: var(--color-gray-light-mode-500);
|
|
799
|
-
/* END OF THESE NEED TO BE REMOED */
|
|
800
|
-
--color-screen-mockup-border: var(--color-gray-light-mode-900);
|
|
780
|
+
--color-screen-mockup-border: var(--color-gray-900);
|
|
801
781
|
--color-slider-handle-bg: var(--color-white);
|
|
802
782
|
--color-slider-handle-border: var(--color-brand-600);
|
|
803
783
|
--color-social-icon-fg-angellist: var(--color-black);
|
|
@@ -806,13 +786,13 @@
|
|
|
806
786
|
--color-social-icon-fg-instagram: rgb(0 1 0 1);
|
|
807
787
|
--color-social-icon-fg-tumblr: rgb(0 25 53 1);
|
|
808
788
|
--color-social-icon-fg-x: rgb(36 46 54 1);
|
|
809
|
-
--color-toggle-border: var(--color-gray-
|
|
810
|
-
--color-toggle-button-fg_disabled: var(--color-gray-
|
|
789
|
+
--color-toggle-border: var(--color-gray-300);
|
|
790
|
+
--color-toggle-button-fg_disabled: var(--color-gray-50);
|
|
811
791
|
--color-toggle-slim-border_pressed-hover: var(--color-bg-brand-solid_hover);
|
|
812
792
|
--color-toggle-slim-border_pressed: var(--color-bg-brand-solid);
|
|
813
|
-
--color-tooltip-supporting-text: var(--color-gray-
|
|
814
|
-
--color-text-editor-icon-fg: var(--color-gray-
|
|
815
|
-
--color-text-editor-icon-fg_active: var(--color-gray-
|
|
793
|
+
--color-tooltip-supporting-text: var(--color-gray-300);
|
|
794
|
+
--color-text-editor-icon-fg: var(--color-gray-400);
|
|
795
|
+
--color-text-editor-icon-fg_active: var(--color-gray-500);
|
|
816
796
|
|
|
817
797
|
/* BACKGROUND PROPERTY COLORS */
|
|
818
798
|
--background-color-quaternary: var(--color-bg-quaternary);
|
|
@@ -892,22 +872,33 @@
|
|
|
892
872
|
|
|
893
873
|
/* RING PROPERTY COLORS */
|
|
894
874
|
--ring-color-bg-brand-solid: var(--color-bg-brand-solid);
|
|
895
|
-
--ring-color-
|
|
896
|
-
--ring-color-
|
|
897
|
-
--ring-color-
|
|
898
|
-
--ring-color-
|
|
899
|
-
--ring-color-
|
|
900
|
-
--ring-color-
|
|
901
|
-
--ring-color-
|
|
902
|
-
--ring-color-
|
|
903
|
-
--ring-color-
|
|
875
|
+
--ring-color-primary: var(--color-border-primary);
|
|
876
|
+
--ring-color-secondary: var(--color-border-secondary);
|
|
877
|
+
--ring-color-secondary_alt: var(--color-border-secondary_alt);
|
|
878
|
+
--ring-color-tertiary: var(--color-border-tertiary);
|
|
879
|
+
--ring-color-disabled: var(--color-border-disabled);
|
|
880
|
+
--ring-color-brand: var(--color-border-brand);
|
|
881
|
+
--ring-color-brand-solid: var(--color-bg-brand-solid);
|
|
882
|
+
--ring-color-brand-solid_hover: var(--color-bg-brand-solid_hover);
|
|
883
|
+
--ring-color-error: var(--color-border-error);
|
|
884
|
+
--ring-color-disabled_subtle: var(--color-border-disabled_subtle);
|
|
885
|
+
--ring-color-brand_alt: var(--color-border-brand_alt);
|
|
886
|
+
--ring-color-error_subtle: var(--color-border-error_subtle);
|
|
904
887
|
|
|
905
888
|
/* OUTLINE PROPERTY COLORS */
|
|
906
889
|
--outline-color-brand: var(--color-border-brand);
|
|
907
890
|
--outline-color-primary: var(--color-border-primary);
|
|
908
891
|
--outline-color-secondary: var(--color-border-secondary);
|
|
909
892
|
--outline-color-secondary_alt: var(--color-border-secondary_alt);
|
|
893
|
+
--outline-color-tertiary: var(--color-border-tertiary);
|
|
894
|
+
--outline-color-disabled: var(--color-border-disabled);
|
|
895
|
+
--outline-color-brand: var(--color-border-brand);
|
|
896
|
+
--outline-color-brand-solid: var(--color-bg-brand-solid);
|
|
897
|
+
--outline-color-brand-solid_hover: var(--color-bg-brand-solid_hover);
|
|
910
898
|
--outline-color-error: var(--color-border-error);
|
|
899
|
+
--outline-color-disabled_subtle: var(--color-border-disabled_subtle);
|
|
900
|
+
--outline-color-brand_alt: var(--color-border-brand_alt);
|
|
901
|
+
--outline-color-error_subtle: var(--color-border-error_subtle);
|
|
911
902
|
}
|
|
912
903
|
|
|
913
904
|
@layer base {
|
|
@@ -919,6 +910,19 @@
|
|
|
919
910
|
|
|
920
911
|
/* UTILITY COLORS */
|
|
921
912
|
|
|
913
|
+
--color-gray-25: rgb(250 250 250);
|
|
914
|
+
--color-gray-50: rgb(247 247 247);
|
|
915
|
+
--color-gray-100: rgb(240 240 241);
|
|
916
|
+
--color-gray-200: rgb(236 236 237);
|
|
917
|
+
--color-gray-300: rgb(206 207 210);
|
|
918
|
+
--color-gray-400: rgb(148 151 156);
|
|
919
|
+
--color-gray-500: rgb(133 136 142);
|
|
920
|
+
--color-gray-600: rgb(97 101 108);
|
|
921
|
+
--color-gray-700: rgb(55 58 65);
|
|
922
|
+
--color-gray-800: rgb(34 38 47);
|
|
923
|
+
--color-gray-900: rgb(19 22 27);
|
|
924
|
+
--color-gray-950: rgb(12 14 18);
|
|
925
|
+
|
|
922
926
|
--color-utility-blue-50: var(--color-blue-950);
|
|
923
927
|
--color-utility-blue-100: var(--color-blue-900);
|
|
924
928
|
--color-utility-blue-200: var(--color-blue-800);
|
|
@@ -949,16 +953,16 @@
|
|
|
949
953
|
--color-utility-brand-900: var(--color-brand-100);
|
|
950
954
|
--color-utility-brand-900_alt: var(--color-utility-gray-900);
|
|
951
955
|
|
|
952
|
-
--color-utility-gray-50: var(--color-gray-
|
|
953
|
-
--color-utility-gray-100: var(--color-gray-
|
|
954
|
-
--color-utility-gray-200: var(--color-gray-
|
|
955
|
-
--color-utility-gray-300: var(--color-gray-
|
|
956
|
-
--color-utility-gray-400: var(--color-gray-
|
|
957
|
-
--color-utility-gray-500: var(--color-gray-
|
|
958
|
-
--color-utility-gray-600: var(--color-gray-
|
|
959
|
-
--color-utility-gray-700: var(--color-gray-
|
|
960
|
-
--color-utility-gray-800: var(--color-gray-
|
|
961
|
-
--color-utility-gray-900: var(--color-gray-
|
|
956
|
+
--color-utility-gray-50: var(--color-gray-900);
|
|
957
|
+
--color-utility-gray-100: var(--color-gray-800);
|
|
958
|
+
--color-utility-gray-200: var(--color-gray-700);
|
|
959
|
+
--color-utility-gray-300: var(--color-gray-700);
|
|
960
|
+
--color-utility-gray-400: var(--color-gray-600);
|
|
961
|
+
--color-utility-gray-500: var(--color-gray-500);
|
|
962
|
+
--color-utility-gray-600: var(--color-gray-400);
|
|
963
|
+
--color-utility-gray-700: var(--color-gray-300);
|
|
964
|
+
--color-utility-gray-800: var(--color-gray-200);
|
|
965
|
+
--color-utility-gray-900: var(--color-gray-100);
|
|
962
966
|
|
|
963
967
|
--color-utility-error-50: var(--color-error-950);
|
|
964
968
|
--color-utility-error-100: var(--color-error-900);
|
|
@@ -1088,70 +1092,70 @@
|
|
|
1088
1092
|
|
|
1089
1093
|
/* TEXT COLORS */
|
|
1090
1094
|
|
|
1091
|
-
--color-text-primary: var(--color-gray-
|
|
1092
|
-
--color-text-tertiary: var(--color-gray-
|
|
1095
|
+
--color-text-primary: var(--color-gray-50);
|
|
1096
|
+
--color-text-tertiary: var(--color-gray-400);
|
|
1093
1097
|
--color-text-error-primary: var(--color-error-400);
|
|
1094
1098
|
--color-text-warning-primary: var(--color-warning-400);
|
|
1095
1099
|
--color-text-success-primary: var(--color-success-400);
|
|
1096
1100
|
--color-text-white: var(--color-white);
|
|
1097
|
-
--color-text-secondary: var(--color-gray-
|
|
1098
|
-
--color-text-disabled: var(--color-gray-
|
|
1099
|
-
--color-text-secondary_hover: var(--color-gray-
|
|
1100
|
-
--color-text-tertiary_hover: var(--color-gray-
|
|
1101
|
-
--color-text-brand-secondary: var(--color-gray-
|
|
1102
|
-
--color-text-placeholder: var(--color-gray-
|
|
1103
|
-
--color-text-placeholder_subtle: var(--color-gray-
|
|
1104
|
-
--color-text-brand-tertiary: var(--color-gray-
|
|
1105
|
-
--color-text-editor-icon-fg: var(--color-gray-
|
|
1101
|
+
--color-text-secondary: var(--color-gray-300);
|
|
1102
|
+
--color-text-disabled: var(--color-gray-500);
|
|
1103
|
+
--color-text-secondary_hover: var(--color-gray-200);
|
|
1104
|
+
--color-text-tertiary_hover: var(--color-gray-300);
|
|
1105
|
+
--color-text-brand-secondary: var(--color-gray-300);
|
|
1106
|
+
--color-text-placeholder: var(--color-gray-500);
|
|
1107
|
+
--color-text-placeholder_subtle: var(--color-gray-700);
|
|
1108
|
+
--color-text-brand-tertiary: var(--color-gray-400);
|
|
1109
|
+
--color-text-editor-icon-fg: var(--color-gray-400);
|
|
1106
1110
|
--color-text-editor-icon-fg_active: var(--color-white);
|
|
1107
|
-
--color-text-quaternary: var(--color-gray-
|
|
1108
|
-
--color-text-brand-primary: var(--color-gray-
|
|
1109
|
-
--color-text-primary_on-brand: var(--color-gray-
|
|
1110
|
-
--color-text-secondary_on-brand: var(--color-gray-
|
|
1111
|
-
--color-text-tertiary_on-brand: var(--color-gray-
|
|
1112
|
-
--color-text-quaternary_on-brand: var(--color-gray-
|
|
1113
|
-
--color-text-brand-tertiary_alt: var(--color-gray-
|
|
1114
|
-
--color-text-brand-secondary_hover: var(--color-gray-
|
|
1111
|
+
--color-text-quaternary: var(--color-gray-400);
|
|
1112
|
+
--color-text-brand-primary: var(--color-gray-50);
|
|
1113
|
+
--color-text-primary_on-brand: var(--color-gray-50);
|
|
1114
|
+
--color-text-secondary_on-brand: var(--color-gray-300);
|
|
1115
|
+
--color-text-tertiary_on-brand: var(--color-gray-400);
|
|
1116
|
+
--color-text-quaternary_on-brand: var(--color-gray-400);
|
|
1117
|
+
--color-text-brand-tertiary_alt: var(--color-gray-50);
|
|
1118
|
+
--color-text-brand-secondary_hover: var(--color-gray-200);
|
|
1115
1119
|
--color-text-error-primary_hover: var(--color-error-300);
|
|
1116
1120
|
|
|
1117
1121
|
/* BORDER COLORS */
|
|
1118
|
-
--color-border-secondary: var(--color-gray-
|
|
1122
|
+
--color-border-secondary: var(--color-gray-800);
|
|
1119
1123
|
--color-border-error_subtle: var(--color-error-500);
|
|
1120
|
-
--color-border-primary: var(--color-gray-
|
|
1124
|
+
--color-border-primary: var(--color-gray-700);
|
|
1121
1125
|
--color-border-brand: var(--color-brand-400);
|
|
1122
|
-
--color-border-disabled: var(--color-gray-
|
|
1126
|
+
--color-border-disabled: var(--color-gray-700);
|
|
1123
1127
|
--color-border-error: var(--color-error-400);
|
|
1124
|
-
--color-border-disabled_subtle: var(--color-gray-
|
|
1125
|
-
--color-border-tertiary: var(--color-gray-
|
|
1126
|
-
--color-border-brand_alt: var(--color-gray-
|
|
1127
|
-
--color-border-secondary_alt: var(--color-gray-
|
|
1128
|
+
--color-border-disabled_subtle: var(--color-gray-800);
|
|
1129
|
+
--color-border-tertiary: var(--color-gray-800);
|
|
1130
|
+
--color-border-brand_alt: var(--color-gray-700);
|
|
1131
|
+
--color-border-secondary_alt: var(--color-gray-800);
|
|
1128
1132
|
|
|
1129
1133
|
/* FOREGROUND COLORS */
|
|
1130
|
-
--color-fg-secondary: var(--color-gray-
|
|
1134
|
+
--color-fg-secondary: var(--color-gray-300);
|
|
1131
1135
|
--color-fg-warning-primary: var(--color-warning-500);
|
|
1132
1136
|
--color-fg-success-primary: var(--color-success-500);
|
|
1133
1137
|
--color-fg-white: var(--color-white);
|
|
1134
1138
|
--color-fg-success-secondary: var(--color-success-400);
|
|
1135
|
-
--color-fg-secondary_hover: var(--color-gray-
|
|
1139
|
+
--color-fg-secondary_hover: var(--color-gray-200);
|
|
1136
1140
|
--color-fg-primary: var(--color-white);
|
|
1137
|
-
--color-fg-disabled: var(--color-gray-
|
|
1141
|
+
--color-fg-disabled: var(--color-gray-500);
|
|
1138
1142
|
--color-fg-brand-secondary: var(--color-brand-500);
|
|
1139
1143
|
--color-fg-brand-primary: var(--color-brand-500);
|
|
1140
|
-
--color-fg-quaternary: var(--color-gray-
|
|
1141
|
-
--color-fg-quaternary_hover: var(--color-gray-
|
|
1144
|
+
--color-fg-quaternary: var(--color-gray-600);
|
|
1145
|
+
--color-fg-quaternary_hover: var(--color-gray-500);
|
|
1142
1146
|
--color-fg-error-primary: var(--color-error-500);
|
|
1143
|
-
--color-fg-disabled_subtle: var(--color-gray-
|
|
1147
|
+
--color-fg-disabled_subtle: var(--color-gray-600);
|
|
1144
1148
|
--color-fg-warning-secondary: var(--color-warning-400);
|
|
1145
1149
|
--color-fg-error-secondary: var(--color-error-400);
|
|
1146
|
-
--color-fg-tertiary: var(--color-gray-
|
|
1147
|
-
--color-fg-tertiary_hover: var(--color-gray-
|
|
1148
|
-
--color-fg-brand-primary_alt: var(--color-gray-
|
|
1149
|
-
--color-fg-brand-secondary_alt: var(--color-gray-
|
|
1150
|
-
--color-fg-brand-secondary_hover: var(--color-gray-
|
|
1150
|
+
--color-fg-tertiary: var(--color-gray-400);
|
|
1151
|
+
--color-fg-tertiary_hover: var(--color-gray-300);
|
|
1152
|
+
--color-fg-brand-primary_alt: var(--color-gray-300);
|
|
1153
|
+
--color-fg-brand-secondary_alt: var(--color-gray-600);
|
|
1154
|
+
--color-fg-brand-secondary_hover: var(--color-gray-500);
|
|
1151
1155
|
|
|
1152
1156
|
/* BACKGROUND COLORS */
|
|
1153
|
-
--color-bg-primary: var(--color-gray-
|
|
1154
|
-
--color-bg-tertiary: var(--color-gray-
|
|
1157
|
+
--color-bg-primary: var(--color-gray-950);
|
|
1158
|
+
--color-bg-tertiary: var(--color-gray-800);
|
|
1155
1159
|
--color-bg-brand-primary: var(--color-brand-500);
|
|
1156
1160
|
--color-bg-error-secondary: var(--color-error-600);
|
|
1157
1161
|
--color-bg-warning-primary: var(--color-warning-950);
|
|
@@ -1159,34 +1163,34 @@
|
|
|
1159
1163
|
--color-bg-success-primary: var(--color-success-950);
|
|
1160
1164
|
--color-bg-success-secondary: var(--color-success-600);
|
|
1161
1165
|
--color-bg-brand-solid: var(--color-brand-600);
|
|
1162
|
-
--color-bg-secondary-solid: var(--color-gray-
|
|
1166
|
+
--color-bg-secondary-solid: var(--color-gray-600);
|
|
1163
1167
|
--color-bg-error-solid: var(--color-error-600);
|
|
1164
1168
|
--color-bg-warning-solid: var(--color-warning-600);
|
|
1165
1169
|
--color-bg-success-solid: var(--color-success-600);
|
|
1166
|
-
--color-bg-secondary_hover: var(--color-gray-
|
|
1167
|
-
--color-bg-primary_hover: var(--color-gray-
|
|
1168
|
-
--color-bg-disabled: var(--color-gray-
|
|
1169
|
-
--color-bg-active: var(--color-gray-
|
|
1170
|
+
--color-bg-secondary_hover: var(--color-gray-800);
|
|
1171
|
+
--color-bg-primary_hover: var(--color-gray-800);
|
|
1172
|
+
--color-bg-disabled: var(--color-gray-800);
|
|
1173
|
+
--color-bg-active: var(--color-gray-800);
|
|
1170
1174
|
--color-bg-brand-solid_hover: var(--color-brand-500);
|
|
1171
1175
|
--color-bg-error-primary: var(--color-error-950);
|
|
1172
1176
|
--color-bg-brand-secondary: var(--color-brand-600);
|
|
1173
|
-
--color-bg-secondary: var(--color-gray-
|
|
1174
|
-
--color-bg-disabled_subtle: var(--color-gray-
|
|
1175
|
-
--color-bg-quaternary: var(--color-gray-
|
|
1177
|
+
--color-bg-secondary: var(--color-gray-900);
|
|
1178
|
+
--color-bg-disabled_subtle: var(--color-gray-900);
|
|
1179
|
+
--color-bg-quaternary: var(--color-gray-700);
|
|
1176
1180
|
--color-bg-primary_alt: var(--color-bg-secondary);
|
|
1177
1181
|
--color-bg-brand-primary_alt: var(--color-bg-secondary);
|
|
1178
1182
|
--color-bg-secondary_alt: var(--color-bg-primary);
|
|
1179
|
-
--color-bg-overlay: var(--color-gray-
|
|
1180
|
-
--color-bg-secondary_subtle: var(--color-gray-
|
|
1183
|
+
--color-bg-overlay: var(--color-gray-800);
|
|
1184
|
+
--color-bg-secondary_subtle: var(--color-gray-900);
|
|
1181
1185
|
--color-bg-brand-section: var(--color-bg-secondary);
|
|
1182
1186
|
--color-bg-brand-section_subtle: var(--color-bg-primary);
|
|
1183
1187
|
--color-bg-primary-solid: var(--color-bg-secondary);
|
|
1184
1188
|
|
|
1185
1189
|
/* COMPONENT COLORS */
|
|
1186
1190
|
--color-app-store-badge-border: var(--color-white);
|
|
1187
|
-
--color-avatar-bg: var(--color-gray-
|
|
1191
|
+
--color-avatar-bg: var(--color-gray-800);
|
|
1188
1192
|
--color-avatar-contrast-border: rgb(255 255 255 / 0.12);
|
|
1189
|
-
--color-avatar-profile-photo-border: var(--color-gray-
|
|
1193
|
+
--color-avatar-profile-photo-border: var(--color-gray-950);
|
|
1190
1194
|
--color-avatar-styles-bg-neutral: rgb(224 224 224 / 1);
|
|
1191
1195
|
--color-button-destructive-primary-icon: var(--color-error-300);
|
|
1192
1196
|
--color-button-destructive-primary-icon_hover: var(--color-error-200);
|
|
@@ -1194,20 +1198,20 @@
|
|
|
1194
1198
|
--color-button-primary-icon_hover: var(--color-brand-200);
|
|
1195
1199
|
--color-featured-icon-light-fg-brand: var(--color-brand-200);
|
|
1196
1200
|
--color-featured-icon-light-fg-error: var(--color-error-200);
|
|
1197
|
-
--color-featured-icon-light-fg-gray: var(--color-gray-
|
|
1201
|
+
--color-featured-icon-light-fg-gray: var(--color-gray-200);
|
|
1198
1202
|
--color-featured-icon-light-fg-success: var(--color-success-200);
|
|
1199
1203
|
--color-featured-icon-light-fg-warning: var(--color-warning-200);
|
|
1200
1204
|
--color-focus-ring-error: var(--color-error-500);
|
|
1201
1205
|
--color-focus-ring: var(--color-brand-500);
|
|
1202
|
-
--color-footer-button-fg: var(--color-gray-
|
|
1203
|
-
--color-footer-button-fg_hover: var(--color-gray-
|
|
1204
|
-
--color-icon-fg-brand: var(--color-gray-
|
|
1205
|
-
--color-icon-fg-brand_on-brand: var(--color-gray-
|
|
1206
|
-
--color-nav-item-button-icon-fg: var(--color-gray-
|
|
1207
|
-
--color-nav-item-button-icon-fg_active: var(--color-gray-
|
|
1208
|
-
--color-nav-item-icon-fg: var(--color-gray-
|
|
1209
|
-
--color-nav-item-icon-fg_active: var(--color-gray-
|
|
1210
|
-
--color-screen-mockup-border: var(--color-gray-
|
|
1206
|
+
--color-footer-button-fg: var(--color-gray-300);
|
|
1207
|
+
--color-footer-button-fg_hover: var(--color-gray-100);
|
|
1208
|
+
--color-icon-fg-brand: var(--color-gray-400);
|
|
1209
|
+
--color-icon-fg-brand_on-brand: var(--color-gray-400);
|
|
1210
|
+
--color-nav-item-button-icon-fg: var(--color-gray-400);
|
|
1211
|
+
--color-nav-item-button-icon-fg_active: var(--color-gray-300);
|
|
1212
|
+
--color-nav-item-icon-fg: var(--color-gray-400);
|
|
1213
|
+
--color-nav-item-icon-fg_active: var(--color-gray-300);
|
|
1214
|
+
--color-screen-mockup-border: var(--color-gray-700);
|
|
1211
1215
|
--color-slider-handle-bg: var(--color-fg-brand-primary);
|
|
1212
1216
|
--color-slider-handle-border: var(--color-bg-primary);
|
|
1213
1217
|
--color-social-icon-fg-angellist: var(--color-white);
|
|
@@ -1217,15 +1221,13 @@
|
|
|
1217
1221
|
--color-social-icon-fg-tumblr: var(--color-white);
|
|
1218
1222
|
--color-social-icon-fg-x: var(--color-white);
|
|
1219
1223
|
--color-toggle-border: var(--color-transparent);
|
|
1220
|
-
--color-toggle-button-fg_disabled: var(--color-gray-
|
|
1224
|
+
--color-toggle-button-fg_disabled: var(--color-gray-600);
|
|
1221
1225
|
--color-toggle-slim-border_pressed-hover: var(--color-transparent);
|
|
1222
1226
|
--color-toggle-slim-border_pressed: var(--color-transparent);
|
|
1223
|
-
--color-tooltip-supporting-text: var(--color-gray-
|
|
1224
|
-
--color-text-editor-icon-fg: var(--color-gray-
|
|
1227
|
+
--color-tooltip-supporting-text: var(--color-gray-300);
|
|
1228
|
+
--color-text-editor-icon-fg: var(--color-gray-400);
|
|
1225
1229
|
--color-text-editor-icon-fg_active: var(--color-white);
|
|
1226
1230
|
|
|
1227
|
-
/* THESE SHOULD IDEALLY BE REMOVED */
|
|
1228
|
-
|
|
1229
1231
|
/* BACKGROUND PROPERTY COLORS */
|
|
1230
1232
|
--background-color-quaternary: var(--color-bg-quaternary);
|
|
1231
1233
|
--background-color-brand-solid: var(--color-bg-brand-solid);
|
|
@@ -1289,6 +1291,7 @@
|
|
|
1289
1291
|
/* BORDER PROPERTY COLORS */
|
|
1290
1292
|
--border-color-primary: var(--color-border-primary);
|
|
1291
1293
|
--border-color-secondary: var(--color-border-secondary);
|
|
1294
|
+
--border-color-secondary_alt: var(--color-border-secondary_alt);
|
|
1292
1295
|
--border-color-tertiary: var(--color-border-tertiary);
|
|
1293
1296
|
--border-color-disabled: var(--color-border-disabled);
|
|
1294
1297
|
--border-color-brand: var(--color-border-brand);
|
|
@@ -1301,20 +1304,32 @@
|
|
|
1301
1304
|
|
|
1302
1305
|
/* RING PROPERTY COLORS */
|
|
1303
1306
|
--ring-color-bg-brand-solid: var(--color-bg-brand-solid);
|
|
1304
|
-
--ring-color-
|
|
1305
|
-
--ring-color-
|
|
1306
|
-
--ring-color-
|
|
1307
|
-
--ring-color-
|
|
1308
|
-
--ring-color-
|
|
1309
|
-
--ring-color-
|
|
1310
|
-
--ring-color-
|
|
1311
|
-
--ring-color-
|
|
1312
|
-
--ring-color-
|
|
1307
|
+
--ring-color-primary: var(--color-border-primary);
|
|
1308
|
+
--ring-color-secondary: var(--color-border-secondary);
|
|
1309
|
+
--ring-color-secondary_alt: var(--color-border-secondary_alt);
|
|
1310
|
+
--ring-color-tertiary: var(--color-border-tertiary);
|
|
1311
|
+
--ring-color-disabled: var(--color-border-disabled);
|
|
1312
|
+
--ring-color-brand: var(--color-border-brand);
|
|
1313
|
+
--ring-color-brand-solid: var(--color-bg-brand-solid);
|
|
1314
|
+
--ring-color-brand-solid_hover: var(--color-bg-brand-solid_hover);
|
|
1315
|
+
--ring-color-error: var(--color-border-error);
|
|
1316
|
+
--ring-color-disabled_subtle: var(--color-border-disabled_subtle);
|
|
1317
|
+
--ring-color-brand_alt: var(--color-border-brand_alt);
|
|
1318
|
+
--ring-color-error_subtle: var(--color-border-error_subtle);
|
|
1313
1319
|
|
|
1314
1320
|
/* OUTLINE PROPERTY COLORS */
|
|
1315
1321
|
--outline-color-brand: var(--color-border-brand);
|
|
1316
1322
|
--outline-color-primary: var(--color-border-primary);
|
|
1317
1323
|
--outline-color-secondary: var(--color-border-secondary);
|
|
1324
|
+
--outline-color-secondary_alt: var(--color-border-secondary_alt);
|
|
1325
|
+
--outline-color-tertiary: var(--color-border-tertiary);
|
|
1326
|
+
--outline-color-disabled: var(--color-border-disabled);
|
|
1327
|
+
--outline-color-brand: var(--color-border-brand);
|
|
1328
|
+
--outline-color-brand-solid: var(--color-bg-brand-solid);
|
|
1329
|
+
--outline-color-brand-solid_hover: var(--color-bg-brand-solid_hover);
|
|
1318
1330
|
--outline-color-error: var(--color-border-error);
|
|
1331
|
+
--outline-color-disabled_subtle: var(--color-border-disabled_subtle);
|
|
1332
|
+
--outline-color-brand_alt: var(--color-border-brand_alt);
|
|
1333
|
+
--outline-color-error_subtle: var(--color-border-error_subtle);
|
|
1319
1334
|
}
|
|
1320
1335
|
}
|
|
@@ -10,8 +10,6 @@
|
|
|
10
10
|
--tw-prose-quotes: var(--color-text-primary);
|
|
11
11
|
--tw-prose-quote-borders: var(--color-fg-brand-primary_alt);
|
|
12
12
|
--tw-prose-captions: var(--color-text-tertiary);
|
|
13
|
-
/* --tw-prose-kbd: color.gray[900]; */
|
|
14
|
-
/* --tw-prose-kbd-shadows: hexToRgb(color.gray[900]); */
|
|
15
13
|
--tw-prose-code: var(--color-text-tertiary);
|
|
16
14
|
--tw-prose-pre-code: var(--color-text-tertiary);
|
|
17
15
|
--tw-prose-pre-bg: var(--color-bg-primary);
|
package/dist/index.mjs
CHANGED
|
@@ -1,32 +1,32 @@
|
|
|
1
1
|
#!/usr/bin/env node
|
|
2
|
-
import{Command as
|
|
3
|
-
`),process.exit(1)},
|
|
2
|
+
import{Command as p1}from"commander";import l0 from"async-retry";import _ from"chalk";import{Command as J1,Option as b1}from"commander";import{execa as L0}from"execa";import*as k from"fs";import W0 from"ora";import M1 from"os";import*as D from"path";import Z0 from"prompts";import{Project as H1}from"ts-morph";import W1 from"node-fetch";import{Readable as z3,pipeline as Z1}from"stream";import{x as Q3}from"tar";import{promisify as $1}from"util";var Z3=$1(Z1);async function r(Q){let Y=`https://untitledui.xyz/react/api/validate-key?key=${Q}`;try{return(await W1(Y)).status===200}catch{return!1}}import X1 from"node-fetch";var O0={invalid_key:"Invalid key provided",no_components_found:"No components found",no_components_provided:"No components provided"};async function A0(Q,Y,z){try{let Z=await X1("https://untitledui.xyz/react/api/components",{method:"POST",headers:{"Content-Type":"application/json",Accept:"application/json"},body:JSON.stringify({type:Q,components:Y,key:z})});if(!Z.ok)console.log(O0?.[Z.statusText]||O0.no_components_found),process.exit(1);return await Z.json()}catch(Z){return null}}import E0 from"node-fetch";var i={invalid_key:"Invalid key provided",no_components_found:"No components found",no_components_provided:"No components provided"};async function d0(Q,Y=""){let z=`https://untitledui.xyz/react/api/components/list?key=${Y}&type=${Q}`;try{let X=await E0(z),Z=await X.json();if(!X.ok)console.log(i?.[X.statusText]||i.no_components_found),process.exit(1);if(!Z?.components?.length)return null;return Z}catch(X){return console.error(X),null}}async function h0(Q,Y="",z){let X=`https://untitledui.xyz/react/api/components/list?key=${Y}&type=${Q}&subfolders=${z.join(",")}`;try{let Z=await E0(X);if(!Z.ok)console.log(i?.[Z.statusText]||i.no_components_found),process.exit(1);let U=await Z.json();if(!U?.components?.length)return null;return U}catch(Z){return console.error(Z),null}}async function f0(Q=""){let Y=`https://untitledui.xyz/react/api/components/list?key=${Q}`;try{let z=await E0(Y);if(!z.ok)console.log(i?.[z.statusText]||i.no_components_found),process.exit(1);let X=await z.json();if(!X?.types?.length)return null;return X}catch(z){return console.error(z),null}}import L1 from"fast-glob";import*as I0 from"path";import{Project as j3}from"ts-morph";import{loadConfig as V1}from"tsconfig-paths";import L3 from"prettier";import U0 from"fast-glob";import*as q0 from"fs";import*as B0 from"path";import{loadConfig as q1}from"tsconfig-paths";var h=["**/node_modules/**",".next","public","dist","build"],m0={"next-app":"Next.js (App)","next-pages":"Next.js (Pages)",vite:"Vite",other:"Other"};async function p(Q){let Y=q0.existsSync(B0.resolve(Q,"src")),z=q0.existsSync(B0.resolve(Q,`${Y?"src/":""}app`)),[X,Z,U,b]=await Promise.all([U0.glob("**/{next,vite,astro}.config.*|gatsby-config.*",{cwd:Q,deep:2,ignore:h}),B1(Q),U1(Q),K1(Q)]),M={framework:"other",isTsx:Z,tailwindFile:U||null,aliasPrefix:b,isSrcDir:Y,isUsingAppDir:z};if(X.find((J)=>J.startsWith("next.config."))?.length)return M.framework=z?"next-app":"next-pages",M;else if(X.find((J)=>J.startsWith("vite.config."))?.length)return M.framework="vite",M;else if(X?.length||q0.existsSync(B0.resolve(Q,"package.json")))return M.framework="other",M;return null}async function B1(Q){return(await U0.glob("tsconfig.*",{cwd:Q,deep:2,ignore:h})).length>0}async function U1(Q){let Y=await U0.glob("tailwind.config.*",{cwd:Q,deep:2,ignore:h});if(!Y.length)return null;return Y[0]}async function K1(Q){let Y=await q1(Q);if(Y?.resultType==="failed"||!Object.keys(Y.paths).length)return null;let z={};for(let[X,Z]of Object.entries(Y.paths)){let U=X.replace(/\/\*$/,"/");if(Z.some((b)=>b.includes("/app/*")))z.appPrefix=U;else if(Z.some((b)=>b.includes("/components/*")))z.componentsPrefix=U;else if(Z.some((b)=>b.includes("/utils/*")))z.utilsPrefix=U;else if(Z.some((b)=>b.includes("/styles/*")))z.stylesPrefix=U;else if(Z.some((b)=>b.includes("./*")||b.includes("/src/*")))z.srcPrefix=U}return z||null}function o(Q){let Y=V1(Q),z=L1.sync(["tailwind.config.*","**/globals.css","**/{layout,_app,main}.tsx","package.json"],{cwd:Q,deep:4,absolute:!0,onlyFiles:!0,ignore:h}),X={tailwindFile:z.find((Z)=>Z.includes("tailwind.config.")),cssFile:z.find((Z)=>Z.includes("globals.css")),layoutFile:z.find((Z)=>Z.includes("layout")),appFile:z.find((Z)=>Z.includes("_app")),mainFile:z.find((Z)=>Z.includes("main")),packageJson:z.find((Z)=>Z.includes("package.json")),tsConfig:Y?.resultType==="success"?Y?.configFileAbsolutePath:void 0};if(Y.resultType==="failed")throw new Error(`Failed to load tsconfig.json. ${Y.message??""}`.trim());return X}function t(Q,Y,z={},X=""){if(Q.includes("components")){if(z?.componentsPrefix)return Q.replace(/@\/components\//,I0.posix.join(z?.componentsPrefix,Y?Y.replace(/components\//,""):"","/"));if(Y){let Z=z?.srcPrefix?I0.posix.join(z?.srcPrefix,Y,"/"):X;return Q.replace(/@\/components\//,Z)}}if(Q.includes("app")&&z?.appPrefix)return Q.replace(/^@\/app\//,z?.appPrefix);if(Q.includes("utils")&&z?.utilsPrefix)return Q.replace(/^@\/utils\//,z?.utilsPrefix);if(Q.includes("styles")&&z?.stylesPrefix)return Q.replace(/^@\/styles\//,z?.stylesPrefix);if(z?.srcPrefix)return Q.replace(/^@\//,z?.srcPrefix);return Q}function x(){if("bun/1.2.15 npm/? node/v22.6.0 darwin arm64".startsWith("yarn"))return"yarn";if("bun/1.2.15 npm/? node/v22.6.0 darwin arm64".startsWith("pnpm"))return"pnpm";if("bun/1.2.15 npm/? node/v22.6.0 darwin arm64".startsWith("bun"))return"bun";return"npm"}function e(){switch(x()){case"yarn":return"yarn";case"pnpm":return"pnpx";case"bun":return"bunx";default:return"npx"}}function c0(){switch(x()){case"yarn":return"yarn dev";case"pnpm":return"pnpm dev";case"bun":return"bun dev";default:return"npm run dev"}}function K0(Q){return Q.replace(/^[ \t]*\/\/\s*(TODO:|collapse-(start|end)).*\r?\n?|[ \t]*{\s*\/\*\s*(TODO:|collapse-(start|end)).*?\*\/\s*}\r?\n?/gm,"")}var v1=D.join(M1.homedir(),".untitledui"),c=D.join(v1,"config.json"),K={components:[],path:"",type:void 0,license:""};if(k.existsSync(c)){let Q=JSON.parse(k.readFileSync(c,"utf-8"));K.license=Q.license}var V0=(Q)=>{if(Q.aborted)process.stdout.write("\x1B[?25h"),process.stdout.write(`
|
|
3
|
+
`),process.exit(1)},a0=new J1().name("add").description("add a component to your project").argument("[components...]","the components to add").option("-a, --all","add all available components",!1).option("-o, --overwrite","overwrite existing files.",!1).option("-p, --path <path>","the path to add the component to.").option("-d, --dir <directory>","the directory where the project is located.").addOption(new b1("-l, --license <license-key>","Add a license key for adding components.").hideHelp()).option("-t, --type <base|marketing|shared-assets|application|foundations>","the type of the component to add.").action(async(Q,Y)=>{if(Q)K.components=Q;if(Y)K.all=Y.all,K.dir=Y.dir,K.path=Y.path,K.overwrite=Y.overwrite,K.license=Y.license||K.license;try{await R0(K)}catch(z){console.error(_.red(z))}});async function R0(Q){if(Q)K={...K,...Q};let Y=W0().start(),z=D.posix.join(process.cwd(),K.dir||"");if(!k.existsSync(D.resolve(z,"package.json")))Y.warn("This command should be run in a project directory."),process.exit(1);let Z=await p(z);if(K.license){if(!await r(K.license))Y.fail("Invalid license key"),process.exit(1);if(!k.existsSync(c)){let q=D.dirname(c);k.mkdirSync(q,{recursive:!0}),k.writeFileSync(c,JSON.stringify({license:K.license},null,2))}if(JSON.parse(k.readFileSync(c,"utf-8")).license!==K.license)k.writeFileSync(c,JSON.stringify({license:K.license},null,2),"utf-8")}Y.stop();let U=[];if(K.components.length){let $=await A0(K.type,K.components,K.license);if($&&$.pro&&$.pro.length>0){if(console.log(),$.pro.length===1){let W=$.pro[0]?.split("/")[1]||$.pro[0];console.log(_.yellow(`\uD83D\uDD12 The ${_.cyan(W)} component requires PRO access.`))}else console.log(_.yellow("\uD83D\uDD12 The following components require PRO access:")),$.pro.forEach((W)=>{let q=W?.split("/")[1]||W;console.log(` • ${_.cyan(q)}`)});console.log(),console.log("To access PRO components:"),console.log(` ${_.green("→")} If you've already purchased: ${_.cyan(`${e()} untitledui@latest login`)}`),console.log(` ${_.green("→")} To purchase PRO components: ${_.cyan("https://www.untitledui.com/buy/react")}`),console.log()}if(!$?.components.length)console.log("No components found"),process.exit(1);U.push(...$.components)}if(!K?.type&&!K?.components.length){let $=await f0(K.license);if(!$)console.log("No component types found"),process.exit(1);let W=await Z0({type:"select",name:"type",onState:V0,message:`What type of ${_.cyan("component")} are you adding?`,choices:$?.types.map((q)=>({title:q,value:q}))});K.type=W.type}if(!K?.path){let $=await Z0({type:"text",name:"path",onState:V0,message:`Where would you like to add the ${_.cyan("components")}?`,initial:"components"});K.path=$.path}if(!K?.components.length){let $=await d0(K?.type,K.license);if(!$)console.log("No components found"),process.exit(1);let W=await Z0({type:"multiselect",name:"components",onState:V0,message:`Which ${_.cyan("components")} would you like to add?`,choices:$?.components?.map((V)=>({title:V?.name+(V?.count?` (${V?.count} variants)`:"")||"example",value:V||"example",selected:K.components.includes(V.name)})),instructions:!1,hint:"- Space to select. Return to submit"});if(!W.components||!W.components.length)console.log("No option selected. Exiting..."),process.exit(1);let q=W.components.filter((V)=>V?.type==="file").map((V)=>V.name),L=W.components.filter((V)=>V?.type==="dir").map((V)=>V.name),S=[];if(L.length){let V=await h0(K?.type,K.license,L);if(V&&V.components.length)for(let C of V.components){let[u,g]=Object.entries(C)[0]||[],E=await Z0({type:"select",name:"component",onState:V0,message:`Which ${_.cyan("variant")} from ${_.cyan(u)} would you like to add?`,choices:g?.map((N)=>({title:N?.name||"example",value:N?.name||"example",selected:K.components.includes(N.name)})),instructions:!1,hint:"- Space to select. Return to submit"});if(!E.component)console.log("No variant selected for "+_.cyan(u));S.push(u+"/"+E.component)}else console.log("No variants found")}K.components=[...S,...q]}if(!K.components?.length)Y.warn("No components selected. Exiting."),process.exit(1);let b=o(z),M=new Set,J=new Set,R=new Set,w=new H1({tsConfigFilePath:b?.tsConfig});if(K.type&&K.components.length){let $=await A0(K.type,K.components,K.license);if(!$?.components.length)console.log("No components found"),process.exit(1);U.push(...$.components)}if(U.forEach(($)=>{let W=W0(`Adding ${$.name}...`).start(),q=$.files;$.dependencies.forEach((L)=>J.add(L)),$.devDependencies.forEach((L)=>R.add(L));try{if(q?.forEach(async({path:L,code:S})=>{let V=D.posix.join(z,`${Z?.isSrcDir&&"src"}`,L.replace(/components\//,K.path+"/")),C=Z?.framework==="vite"?S.replace(`"use client";
|
|
4
4
|
|
|
5
|
-
`,""):
|
|
6
|
-
Failed to add the component ${_.red(
|
|
7
|
-
Following files already exist in the directory.`),
|
|
8
|
-
✨ You can now access PRO components with the CLI!`)),process.exit(0)}catch(Y){Q.fail(`Authentication failed: ${Y instanceof Error?Y.message:Y}`),process.exit(1)}});async function
|
|
9
|
-
Failed to open browser automatically: ${
|
|
10
|
-
`))}),Q.text="Waiting for authentication in browser..."}),setTimeout(()=>{
|
|
11
|
-
`),process.exit(1)},
|
|
12
|
-
Creating a new project in ${
|
|
5
|
+
`,""):S,u=K0(C),g=D.dirname(V);if(k.existsSync(V)&&!K.overwrite){if(k.readFileSync(V,"utf-8")!==u)M.add({code:u,path:V})}else{k.mkdirSync(g,{recursive:!0}),k.writeFileSync(V,u);let E=D.relative(D.resolve(z,`${Z?.isSrcDir&&"src"}`,K.path),V).split("/").length,N=E===1?"./":"../".repeat(E-1),F=w.addSourceFileAtPath(D.resolve(V));F.getImportDeclarations().forEach((P)=>{let Q0=P.getModuleSpecifierValue();P.setModuleSpecifier(t(Q0,K.path,Z?.aliasPrefix,N))}),await F.save()}}),M.size)W.warn(`Some files of ${_.yellow($.name)} already exist`);else W.succeed(`${_.green($.name)} is added successfully`)}catch(L){W.fail(`
|
|
6
|
+
Failed to add the component ${_.red($.name)}`),console.error(_.red(L)),process.exit(1)}}),M.size&&!K?.overwrite)if(console.log(`
|
|
7
|
+
Following files already exist in the directory.`),M.forEach((W)=>{console.log(_.green(`- ${D.relative(z,W.path)}`))}),(await Z0({type:"confirm",name:"overwrite",message:"Do you want to overwrite the existing files?",initial:!0})).overwrite){let W=W0("Overwriting files").start();M.forEach((q)=>{let L=D.relative(D.resolve(z,`${Z?.isSrcDir&&"src"}`,K.path),q.path).split("/").length,S=L===1?"./":"../".repeat(L-1),V=w.addSourceFileAtPath(D.resolve(q.path));V.replaceWithText(q.code),V.getImportDeclarations().forEach((C)=>{let u=C.getModuleSpecifierValue();C.setModuleSpecifier(t(u,K.path,Z?.aliasPrefix,S))}),V.saveSync()}),W.succeed("Files are overwritten")}else console.log(`Use ${_.cyan("--overwrite")} or ${_.cyan("-o")} to overwrite existing files, or refer to the documentation ${_.cyan("https://untitled.xyz/docs")} for manual installation. The rest of the files are added.`),process.exit(1);let A=x();if(J?.size){let $=W0("Installing component dependencies").start();await l0(()=>L0(A,[A==="npm"?"install":"add",...J],{cwd:z}).catch(async(W)=>{if(W.message.includes("peer"))$.warn("Component dependencies conflict detected. Retrying with --legacy-peer-deps..."),$.start("Installing component dependencies with --legacy-peer-deps flag"),await L0(A,[A==="npm"?"install":"add",...J,"--legacy-peer-deps"],{cwd:z})}),{retries:1}),$.succeed("Component dependencies are installed")}if(R?.size){let $=W0("Installing component devDependencies").start();await l0(()=>L0(A,[A==="npm"?"install":"add","-D",...R],{cwd:z}).catch(async(W)=>{if(W.message.includes("peer"))$.warn("Component devDependencies conflict detected. Retrying with --legacy-peer-deps..."),$.start("Installing component devDependencies with --legacy-peer-deps flag"),await L0(A,[A==="npm"?"install":"add","-D",...R,"--legacy-peer-deps"],{cwd:z})}),{retries:1}),$.succeed("Component devDependencies are installed")}if(K.message)console.log(K.message);process.exit(0)}import N0 from"chalk";import{Command as j1}from"commander";import*as f from"fs";import A1 from"http";import E1 from"open";import I1 from"ora";import R1 from"os";import*as D0 from"path";import{URL as u1}from"url";import*as s0 from"fs";import*as u0 from"path";var __dirname="/Users/deebov/Developer/untitledui/react/cli/utils",G1=u0.join(__dirname,"..","templates");function n0(){let Q=u0.join(G1,"auth-template.html");return s0.readFileSync(Q,"utf-8")}function r0(){return n0().replace("{{TITLE}}","Authentication successful").replace("{{HEADING}}","Authentication successful").replace("{{DESCRIPTION}}","You can now close this tab and return to your terminal.").replace("{{AUTO_CLOSE_SCRIPT}}","<script>setTimeout(() => window.close(), 10000);</script>")}function J0(Q){return n0().replace("{{TITLE}}","Authentication failed").replace("{{HEADING}}","Authentication failed").replace("{{DESCRIPTION}}",Q).replace("{{AUTO_CLOSE_SCRIPT}}","")}var T0=D0.join(R1.homedir(),".untitledui"),_0=D0.join(T0,"config.json"),i0=new j1().name("login").description("authenticate with Untitled UI to access PRO components").action(async()=>{let Q=I1("Starting authentication...").start();try{await _1(Q),Q.succeed("Authentication completed successfully!"),console.log(N0.green(`
|
|
8
|
+
✨ You can now access PRO components with the CLI!`)),process.exit(0)}catch(Y){Q.fail(`Authentication failed: ${Y instanceof Error?Y.message:Y}`),process.exit(1)}});async function _1(Q){return new Promise((Y,z)=>{let X=A1.createServer((Z,U)=>{let b=new u1(Z.url,"http://localhost");if(b.pathname==="/callback"){let M=b.searchParams.get("apiKey"),J=b.searchParams.get("error");if(J){U.writeHead(400,{"Content-Type":"text/html"}),U.end(J0(decodeURIComponent(J))),X.close(),z(new Error(decodeURIComponent(J)));return}if(!M){U.writeHead(400,{"Content-Type":"text/html"}),U.end(J0("No Access Token received")),X.close(),z(new Error("No Access Token received"));return}try{N1(M),U.writeHead(200,{"Content-Type":"text/html"}),U.end(r0()),X.close(),Y()}catch(R){U.writeHead(500,{"Content-Type":"text/html"}),U.end(J0("Failed to save authentication data")),X.close(),z(R)}}else U.writeHead(404),U.end("Not found")});X.listen(0,"localhost",()=>{let b=`https://untitledui.xyz/react/api/cli-auth?port=${X.address().port}`;Q.text="Opening browser for authentication...",E1(b).catch((M)=>{console.log(N0.yellow(`
|
|
9
|
+
Failed to open browser automatically: ${M.message}`)),console.log(N0.cyan(`Please manually open: ${b}
|
|
10
|
+
`))}),Q.text="Waiting for authentication in browser..."}),setTimeout(()=>{X.close(),z(new Error("Authentication timeout. Please try again."))},300000)})}function N1(Q){if(!f.existsSync(T0))f.mkdirSync(T0,{recursive:!0});let Y={};if(f.existsSync(_0))try{Y=JSON.parse(f.readFileSync(_0,"utf-8"))}catch{Y={}}Y.license=Q,f.writeFileSync(_0,JSON.stringify(Y,null,2),"utf-8")}import F0 from"async-retry";import H from"chalk";import{Command as c1,Option as l1}from"commander";import{execa as j0}from"execa";import*as y from"fs";import X0 from"ora";import a1 from"os";import*as G from"path";import s from"prompts";import{Project as s1}from"ts-morph";import T1 from"node-fetch";async function b0(Q,Y){try{let X=await T1("https://untitledui.xyz/react/api/components/example",{method:"POST",headers:{"Content-Type":"application/json",Accept:"application/json"},body:JSON.stringify({example:Q,key:Y})});if(!X.ok){if(X.status===401||X.status===403)return{type:"error",status:X.status,message:"PRO access required"};return console.error(`API error: ${X.status} - ${X.statusText}`),null}return await X.json()}catch(X){return console.error(X?.message||"Error fetching example data."),null}}import $0 from"async-retry";import I from"chalk";import{Command as k1}from"commander";import{execa as l}from"execa";import v0 from"fast-glob";import T from"fs";import z0 from"ora";import F1 from"os";import*as j from"path";import G0 from"prompts";import{Project as P1}from"ts-morph";import{fileURLToPath as g1}from"url";import*as M0 from"fs";import*as p0 from"path";function y0(Q,Y){let z=p0.join(Q,"package.json");if(!M0.existsSync(z))return Y;let X=JSON.parse(M0.readFileSync(z,"utf-8")),Z={...X.dependencies,...X.devDependencies},U=[];for(let b of Y){let M=Z[b];if(!M){U.push(b);continue}if(b==="tailwindcss"){let J=M.match(/\d+/);if((J?parseInt(J[0],10):0)<4)U.push(b)}}return U}import D1 from"node-fetch";import{posix as t0,sep as y1}from"node:path";import{Readable as w1}from"node:stream";import{pipeline as S1}from"node:stream/promises";import{x as C1}from"tar";var o0=[".DS_Store",".git","node_modules","bun.lockb","yarn.lock","package-lock.json"];async function e0(Q,{username:Y,repo:z,branch:X,template:Z}){try{let U=`https://codeload.github.com/${Y}/${z}/tar.gz/${X}`,b=await x1(U);await S1(b,C1({cwd:Q,strip:1,filter:(M)=>{let J=M.split(t0.sep)?.pop()||"";if(o0.includes(J))return!1;if(Z)return M.split(y1).join(t0.sep).includes(Z);return!0}}))}catch(U){if(U instanceof Error)throw new Error(`Failed to download or extract repository: ${U.message}`);throw U}}async function x1(Q){let Y=await D1(Q);if(!Y.ok)throw new Error(`Failed to download: ${Q} - Status: ${Y.status} ${Y.statusText}`);if(!Y.body)throw new Error(`Failed to download: ${Q} - No response body`);let z=Y.headers.get("content-type");if(z&&!z.includes("application/x-gzip")&&!z.includes("application/octet-stream"))console.warn(`Warning: Unexpected content type: ${z}. Expected application/x-gzip or application/octet-stream.`);return w1.from(Y.body)}import w0 from"chalk";import*as m from"fs";import*as H0 from"path";function S0(Q){if(!m.existsSync(H0.resolve(Q)))console.log(w0.red(`Error: CSS file not found at ${Q}`)),process.exit(1);let Y=m.readFileSync(H0.resolve(Q),"utf-8"),z=/(--color-[a-zA-Z-]+-\d{1,3}):\s*(rgb\([^)]+\))/g,X={},Z;while((Z=z.exec(Y))!==null)if(Z[1]&&Z[2])X[Z[1]]=Z[2];return X}function C0(Q,Y,z){let X=H0.resolve(z);if(!m.existsSync(X)){console.log(w0.red(`Error: CSS file not found at ${X}`));return}let Z=m.readFileSync(X,"utf-8"),U=S0(z),b={},M={};for(let[R,w]of Object.entries(U))if(R.startsWith(`--color-${Q}-`)){let A=R.replace(`--color-${Q}-`,"");b[A]=R}else if(R.startsWith(`--color-${Y}-`)){let A=R.replace(`--color-${Y}-`,"");M[A]=w}let J=!1;for(let[R,w]of Object.entries(b))if(M[R]){let A=M[R],$=new RegExp(`(${w}):\\s*rgb\\([^)]*\\);?`,"g");if($.test(Z))Z=Z.replace($,`$1: ${A};`),J=!0;else console.log(w0.yellow(`No match found for ${w}`))}if(J)m.writeFileSync(X,Z,"utf-8")}var O1=g1(import.meta.url),z1=j.dirname(O1),d1=j.join(F1.homedir(),".untitledui"),a=j.join(d1,"config.json"),h1={"nextjs-starter":"Next.js","vite-starter":"Vite"},f1="vite-starter",m1="nextjs-starter",d="",v={color:"",template:"",framework:void 0};if(T.existsSync(a)){let Q=JSON.parse(T.readFileSync(a,"utf-8"));v.license=Q.license}var x0=(Q)=>{if(Q.aborted)process.stdout.write("\x1B[?25h"),process.stdout.write(`
|
|
11
|
+
`),process.exit(1)},Y1=new k1().name("init").description("initialize a new project or adjust an existing one").argument("[directory]").usage("[directory] [options]").helpOption("-h, --help","Display this help message.").option("--vite","Initialize a Vite project.",!1).option("--next","Initialize a Next.js project.",!1).option("-o, --overwrite","Overwrite existing files.",!1).option("--colors-list","Show the colors list.",!1).option("-c, --color <color-name>","Specify a color for the project.").option("-l, --license <license-key>","Add a license key to download the repository.").action(async(Q,Y)=>{if(Q)d=Q;if(Y){if(v.color=Y.color,v.template=Y.template,v.overwrite=Y.overwrite,v.colorsList=Y.colorsList,v.license=Y.license||v.license,v.vite=Y.vite,v.next=Y.next,Y.vite)v.framework=f1;if(Y.next)v.framework=m1}try{await k0(Y),process.exit(0)}catch(z){console.error(I.red(z)),process.exit(1)}});async function k0(Q,Y=null){let z=process.cwd(),X=T.existsSync(j.resolve(z,"package.json")),Z=j.resolve(j.join(z1,"../config/styles","theme.css")),U=S0(Z??""),b=Array.from(new Set(Object.keys(U).map(($)=>$?.split("--color-")?.[1]?.replace(/-\d{1,3}/,"")))),M=z0().start(),J=await p(z),R=X?v0.sync(["**/**/theme.css"],{cwd:z,absolute:!0,onlyFiles:!0,ignore:h}):[],w=R?.[0]&&T.readFileSync(R[0],"utf-8").match(/(--color-brand+-\d{1,3}):\s*(rgb\([^)]+\))/g)?.[1]||void 0;if(v.license){if(!await r(v.license))M.fail("Invalid license key"),process.exit(1);if(!T.existsSync(a)){let q=j.dirname(a);T.mkdirSync(q,{recursive:!0}),T.writeFileSync(a,JSON.stringify({license:v.license},null,2))}if(JSON.parse(T.readFileSync(a,"utf-8")).license!==v.license)T.writeFileSync(a,JSON.stringify({license:v.license},null,2))}if(!X){if(M.stop(),!d){let $=await G0({onState:x0,type:"text",name:"path",message:"What is your project named?",initial:"untitled-ui"});if(typeof $.path==="string")d=$.path.trim()}if(Y)Y.projectPath=d;if(T.existsSync(j.resolve(j.posix.join(z,d))))M.fail(I.red("Directory already exists!")),process.exit(1);if(v.vite&&v.next||!v.framework){let $=await G0({type:"select",name:"framework",onState:x0,message:`Which ${I.cyan("framework")} would you like to use?`,choices:[{title:I.cyan("Next"),value:"nextjs-starter"},{title:I.yellow("Vite"),value:"vite-starter"}]});v.framework=$.framework}M.succeed("Framework is selected: "+I.green(h1[v.framework]))}else if(J?.framework==="other")M.fail("Unsupported project framework"),console.log(`Please refer to the documentation ${I.cyan("https://untitled.xyz/docs")} for supported frameworks or proceed with manual installation.`),process.exit(1);else if(J?.framework.startsWith("next")||J?.framework.startsWith("vite"))if(!Y&&!w)M.succeed(I.yellow(`Detected ${m0[J.framework]} project, proceeding with the setup...`));else M.stop();if(v.colorsList||!v.color&&!w){let $=await G0({type:"select",name:"color",onState:x0,initial:Q.color??"",message:`Which ${I.cyan("color")} would you like to use as the ${I.cyanBright("brand")} color?`,choices:b.map((W)=>({title:W,value:W}))});v.color=$.color}let A=j.posix.join(z,d||"");if(d&&!X){let $=j.resolve(d);console.log(`
|
|
12
|
+
Creating a new project in ${I.blue(d)}`);let W=z0("Downloading and extracting the repository...").start();try{T.mkdirSync($,{recursive:!0}),await $0(()=>e0($,{branch:"main",username:"a-peak-works",repo:v.framework}),{retries:2}),W.succeed("Files are downloaded and extracted successfully!");let q=z0({text:"Installing dependencies..."}).start(),L=v0.sync(["**/styles/theme.css"],{cwd:$,absolute:!0,onlyFiles:!0})[0];if(C0("brand",v.color||"",L??""),await $0(()=>l(x(),["install"],{cwd:A}).catch(async(S)=>{if(S.message.includes("peer"))q.warn("Dependency conflict detected. Retrying with --legacy-peer-deps..."),q.start("Installing dependencies with --legacy-peer-deps flag"),await l(x(),["install","--legacy-peer-deps"],{cwd:A})}),{retries:1}),await $0(()=>l("git",["init"],{cwd:A}),{retries:1}),q.succeed("Dependencies are installed"),!Y)console.log(`
|
|
13
13
|
Your project is ready, to get started run the following commands:
|
|
14
14
|
|
|
15
|
-
cd ${
|
|
16
|
-
${
|
|
17
|
-
Failed to download and extract the repository`)),
|
|
18
|
-
`);
|
|
19
|
-
`)
|
|
15
|
+
cd ${I.cyan(d)}
|
|
16
|
+
${I.cyan(c0())}`)}catch(q){if(W.fail(I.red(`
|
|
17
|
+
Failed to download and extract the repository`)),q instanceof Error)console.error(q.message);else console.error(`
|
|
18
|
+
`);T.rmdirSync($,{recursive:!0}),process.exit(1)}}else{let $=z0(),W=new Set,q=o(z),L=j.resolve(j.join(z1,"../config")),S=v0.sync(["**"],{cwd:L,onlyFiles:!0,ignore:h}),V=y0(z,["tailwindcss","tailwindcss-animate","@tailwindcss/typography","tailwindcss-react-aria-components"]),C=y0(z,["@tailwindcss/postcss","postcss"]);if(!Y&&!w)$.start("Copying files to the project directory");if(S.forEach((E)=>{let N=E.includes("postcss.config"),F=j.resolve(j.posix.join(L),E),P=j.resolve(z,N?E:`${J?.isSrcDir?"src":""}/${E}`);if(T.existsSync(P)){if(v?.overwrite)T.copyFileSync(F,P);else{let Q0=T.readFileSync(P,"utf-8"),O=T.readFileSync(F,"utf-8");if(Q0!==O){if(E.endsWith("theme.css")&&w)return;W.add({targetFile:P,sourceFile:F})}}return}T.mkdirSync(j.dirname(P),{recursive:!0}),T.writeFileSync(P,""),T.copyFileSync(F,P)}),$.stop(),W.size&&!v?.overwrite)if(console.log(`
|
|
19
|
+
`),$.fail("Following files already exist in the directory."),W.forEach((N)=>{console.log(`- ${I.green(N.targetFile)}`)}),(await G0({type:"confirm",name:"overwrite",message:"Do you want to overwrite the existing files?",initial:!0})).overwrite){let N=z0("Overwriting files").start();W.forEach((F)=>{T.copyFileSync(F.sourceFile,F.targetFile)}),N.succeed("Files are overwritten")}else console.log(`Use ${I.cyan("--overwrite")} or ${I.cyan("-o")} to overwrite existing files, or refer to the documentation ${I.cyan("https://untitled.xyz/docs")} for manual installation. The rest of the files are added.`);if(q?.tailwindFile)console.log(`
|
|
20
20
|
Tailwind config file exists in the project directory. You can add it to your globals.css as follows:`),console.log(`
|
|
21
|
-
${
|
|
22
|
-
`);let
|
|
23
|
-
`),
|
|
24
|
-
Ensure that the ${
|
|
25
|
-
Your project is ready, you can now start adding components.`)}}var
|
|
26
|
-
`),process.exit(1)},
|
|
21
|
+
${I.cyan(`@config "../${J?.isSrcDir&&"../"}${j.relative(z,q.tailwindFile)}";`)}
|
|
22
|
+
`);let u=q?.layoutFile||q?.appFile||J?.framework==="vite"&&q?.mainFile||"";if(!u)console.log(`Import following files to your main file:
|
|
23
|
+
`),S.forEach((E)=>{console.log(I.cyan(E))});else{let N=new P1({tsConfigFilePath:j.resolve(q?.tsConfig||"")}).addSourceFileAtPath(j.resolve(u)),F="globals.css";N.getImportDeclarations().filter((O)=>O.getModuleSpecifierValue().includes("globals.css")).forEach((O)=>O.remove());let P=j.relative(j.resolve(z,`${J?.isSrcDir&&"src"}`),u).split("/").length,Q0=J?.aliasPrefix?.stylesPrefix||J?.aliasPrefix?.srcPrefix||(P===1?"./":"../".repeat(P-1));N.addImportDeclarations(S.filter((O)=>O.includes("globals.css")).map((O)=>({moduleSpecifier:`${Q0}${J?.aliasPrefix?.stylesPrefix?O?.split("styles/")[1]:O}`}))),N.saveSync()}let g=v0.sync(["**/styles/theme.css"],{cwd:z,absolute:!0,onlyFiles:!0,ignore:h});if(!g?.length)return $.fail(`Failed to copy ${I.cyan("theme.css")} file.
|
|
24
|
+
Ensure that the ${I.cyan("theme.css")} file exists in the project directory under ${I.yellow("styles/")} folder.`);if((v.color||!w)&&C0("brand",v.color||"brand",g[0]??""),V.length||C.length){let E=z0().start("Installing dependencies");V.length&&await $0(()=>l(x(),[x()==="npm"?"install":"add",...V],{cwd:A}).catch(async(N)=>{if(N.message.includes("peer"))E.warn("Dependency conflict detected. Retrying with --legacy-peer-deps..."),E.start("Installing dependencies with --legacy-peer-deps flag"),await l(x(),[x()==="npm"?"install":"add",...V,"--legacy-peer-deps"],{cwd:A})}),{retries:1}),C.length&&await $0(()=>l(x(),[x()==="npm"?"install":"add","-D",...C],{cwd:A}).catch(async(N)=>{if(N.message.includes("peer"))E.warn("DevDependency conflict detected. Retrying with --legacy-peer-deps..."),E.start("Installing dependencies with --legacy-peer-deps flag"),await l(x(),[x()==="npm"?"install":"add","-D",...C,"--legacy-peer-deps"],{cwd:A})}),{retries:1}),E.succeed("Dependencies are installed")}if(!Y&&!w)$.succeed(I.green("Project setup is completed!"));if(Y&&X)return;else console.log(`
|
|
25
|
+
Your project is ready, you can now start adding components.`)}}var n1=G.join(a1.homedir(),".untitledui"),n=G.join(n1,"config.json"),B={path:"",example:"",license:"",components:[]},P0={};if(y.existsSync(n)){let Q=JSON.parse(y.readFileSync(n,"utf-8"));B.license=Q.license}var Y0=(Q)=>{if(Q.aborted)process.stdout.write("\x1B[?25h"),process.stdout.write(`
|
|
26
|
+
`),process.exit(1)},Q1=new c1().name("example").description("add an example to the project").argument("[example]","the example to add").option("-o, --overwrite","overwrite existing files.",!1).option("-p, --path <path>","the path to add the component to.").option("-e, --example-path <example-path>","the path to add the example file to.").addOption(new l1("-l, --license <license-key>","Add a license key for adding components.").hideHelp()).action(async(Q,Y)=>{if(Q)B.example=Q;if(Y)B.path=Y.path,B.overwrite=Y.overwrite,B.examplePath=Y.examplePath,B.license=Y.license||B.license;try{await k0(Y,P0),await r1(B)}catch(z){console.error(H.red(z))}});async function r1(Q){let Y=X0().start(),z=G.posix.join(process.cwd(),P0?.projectPath||"");if(!y.existsSync(G.posix.join(G.resolve(z,"package.json"))))Y.warn("This command should be run in a project directory."),process.exit(1);let Z=await p(z);if(B.license){if(!await r(B.license))Y.fail("Invalid license key"),process.exit(1);if(!y.existsSync(n)){let L=G.dirname(n);y.mkdirSync(L,{recursive:!0}),y.writeFileSync(n,JSON.stringify({license:B.license},null,2))}if(JSON.parse(y.readFileSync(n,"utf-8")).license!==B.license)y.writeFileSync(n,JSON.stringify({license:B.license},null,2),"utf-8")}if(Y.stop(),!B.example){let W=await s({type:"select",name:"example",onState:Y0,message:"Select which type of example you want to add",choices:[{title:"Application",value:"application"},{title:"Marketing",value:"marketing"}]});B.example=W.example}let U=null;if(B.example){let W=await b0(B.example,B.license);if(W?.type==="error"&&(W.status===401||W.status===403))console.log(),console.log(H.yellow(`\uD83D\uDD12 The ${H.cyan(B.example)} example requires PRO access.`)),console.log(),console.log("To access PRO examples:"),console.log(` ${H.green("→")} If you've already purchased: ${H.cyan(`${e()} untitledui@latest login`)}`),console.log(` ${H.green("→")} To purchase PRO examples: ${H.cyan("https://www.untitledui.com/buy/react")}`),console.log(),process.exit(1);if(W?.type==="directory"){let q=await s({type:"select",name:"example",onState:Y0,message:`Select a folder or file in "${B.example}"`,choices:W.results.map((L)=>({title:L,value:L}))});if(!q.example)return;if(B.example=q.example,W=await b0(q.example,B.license),W?.type==="error"&&(W.status===401||W.status===403))console.log(),console.log(H.yellow(`\uD83D\uDD12 The ${H.cyan(q.example)} example requires PRO access.`)),console.log(),console.log("To access PRO examples:"),console.log(` ${H.green("→")} If you've already purchased: ${H.cyan(`${e()} untitledui@latest login`)}`),console.log(` ${H.green("→")} To purchase PRO examples: ${H.cyan("https://www.untitledui.com/buy/react")}`),console.log(),process.exit(1)}if(W?.type==="json-files"){let q=await s({type:"select",name:"example",onState:Y0,message:`Select which example you want to add from "${B.example}"`,choices:W.results.map((L)=>({title:L,value:`${B.example}/${L}`}))});if(!q.example)return;if(B.example=q.example,W=await b0(q.example,B.license),W?.type==="error"&&(W.status===401||W.status===403))console.log(),console.log(H.yellow(`\uD83D\uDD12 The ${H.cyan(q.example)} example requires PRO access.`)),console.log(),console.log("To access PRO examples:"),console.log(` ${H.green("→")} If you've already purchased: ${H.cyan(`${e()} untitledui@latest login`)}`),console.log(` ${H.green("→")} To purchase PRO examples: ${H.cyan("https://www.untitledui.com/buy/react")}`),console.log(),process.exit(1)}if(W?.type==="json-file")U=W.content}if(!U)Y.fail("No example found"),process.exit(1);if(!B?.examplePath){let W=Z?.isUsingAppDir?"app":"pages",q=Z?.isSrcDir?G.posix.join("src",W):W,L=await s({type:"text",name:"examplePath",onState:Y0,message:`Where would you like to add the ${H.cyan(B?.example)} example?`,initial:q});B.examplePath=L.examplePath}else if(!y.existsSync(G.posix.join(z,B.examplePath)))y.mkdirSync(G.posix.join(z,B.examplePath),{recursive:!0}),console.log(H.green(`Created directory ${B.examplePath}`));if(!B?.path){let W=await s({type:"text",name:"path",onState:Y0,message:`Where would you like to add the ${H.cyan("components")}?`,initial:"components"});B.path=W.path}let b=U.components.filter((W)=>!y.existsSync(G.posix.join(z,`${Z?.isSrcDir&&"src"}`,W?.path?.replace(/components\//,B.path+"/"))));if(b?.length){let W=await s({type:"multiselect",name:"components",onState:Y0,message:`Select which components you want to add from ${H.cyan(U.name)} example`,choices:b.map((q)=>({title:q?.name,value:q?.name,selected:!0})),instructions:!1,hint:"- Space to select. Return to submit"});if(B.components=W.components,!b.length&&!W.components?.length)Y.warn("No components selected")}let M=o(z),J=new Set,R=new s1({tsConfigFilePath:M?.tsConfig}),w=X0(`Adding ${B?.example}...`).start(),A="";try{if(U.files?.forEach(async({path:W,code:q})=>{let L=G.posix.join(z,`${Z?.isSrcDir&&"src"}`,W.replace(/components\//,B.path+"/")),S=Z?.framework==="vite"?q.replace(`"use client";
|
|
27
27
|
|
|
28
|
-
`,""):
|
|
29
|
-
Failed to add the component ${
|
|
30
|
-
Following files already exist in the directory.`),
|
|
31
|
-
\uD83C\uDF89 Example ${
|
|
32
|
-
\uD83C\uDF89 Example ${
|
|
28
|
+
`,""):q,V=K0(S);if(W.includes("examples")){let u=G.basename(W);L=G.posix.join(z,B?.examplePath??"",u),A=G.posix.join(B?.examplePath??"",u)}let C=G.dirname(L);if(y.existsSync(L)&&!B.overwrite){if(y.readFileSync(L,"utf-8")!==V)J.add({code:V,path:L})}else{y.mkdirSync(C,{recursive:!0}),y.writeFileSync(L,V);let u=G.relative(G.resolve(z,`${Z?.isSrcDir&&"src"}`,B.path),L).split("/").length,g=u===1?"./":"../".repeat(u-1),E=R.addSourceFileAtPath(G.resolve(L));E.getImportDeclarations().forEach((N)=>{let F=N.getModuleSpecifierValue();N.setModuleSpecifier(t(F,B.path,Z?.aliasPrefix,g))}),await E.save()}}),J.size)w.warn(`Some files of ${H.yellow(B?.example)} already exist`);else w.succeed(`${H.green(B?.example)} is added successfully`)}catch(W){w.fail(`
|
|
29
|
+
Failed to add the component ${H.red(B?.example)}`),console.error(H.red(W)),process.exit(1)}if(J.size&&!B?.overwrite)if(console.log(`
|
|
30
|
+
Following files already exist in the directory.`),J.forEach((q)=>{console.log(H.green(`- ${G.relative(z,q.path)}`))}),(await s({type:"confirm",name:"overwrite",message:"Do you want to overwrite the existing files?",initial:!0})).overwrite){let q=X0("Overwriting files").start();J.forEach((L)=>{let S=G.relative(G.resolve(z,`${Z?.isSrcDir&&"src"}`,B.path),L.path).split("/").length,V=S===1?"./":"../".repeat(S-1),C=R.addSourceFileAtPath(G.resolve(L.path));C.replaceWithText(L.code),C.getImportDeclarations().forEach((u)=>{let g=u.getModuleSpecifierValue();u.setModuleSpecifier(t(g,B.path,Z?.aliasPrefix,V))}),C.saveSync()}),q.succeed("Files are overwritten")}else console.log(`Use ${H.cyan("--overwrite")} or ${H.cyan("-o")} to overwrite existing files, or refer to the documentation ${H.cyan("https://untitled.xyz/docs")} for manual installation. The rest of the files are added.`),process.exit(1);let $=x();if(U?.dependencies?.length){let W=X0("Installing example dependencies").start();await F0(()=>j0($,[$==="npm"?"install":"add",...U.dependencies],{cwd:z}).catch(async(q)=>{if(q.message.includes("peer"))W.warn("Dependency conflict detected. Retrying with --legacy-peer-deps..."),W.start("Installing dependencies with --legacy-peer-deps flag"),await j0($,[$==="npm"?"install":"add",...U.dependencies,"--legacy-peer-deps"],{cwd:z})}),{retries:1}),W.succeed("Example dependencies are installed")}if(U?.devDependencies?.length){let W=X0("Installing example devDependencies").start();await F0(()=>j0($,[$==="npm"?"install":"add","-D",...U.devDependencies],{cwd:z}).catch(async(q)=>{if(q.message.includes("peer"))W.warn("DevDependency conflict detected. Retrying with --legacy-peer-deps..."),W.start("Installing devDependencies with --legacy-peer-deps flag"),await j0($,[$==="npm"?"install":"add","-D",...U.devDependencies,"--legacy-peer-deps"],{cwd:z})}),{retries:1}),W.succeed("Example devDependencies are installed")}if(B?.components?.length)await F0(()=>R0({components:B.components,dir:P0?.projectPath||"",path:B.path,message:`
|
|
31
|
+
\uD83C\uDF89 Example ${H.green(B.example)} has been added to ${H.green(A)}`}),{retries:1});console.log(`
|
|
32
|
+
\uD83C\uDF89 Example ${H.green(B.example)} has been added to ${H.green(A)}`),process.exit(0)}var g0={name:"untitledui",version:"0.1.14",main:"dist/index.mjs",description:"Untitled UI CLI",type:"module",publishConfig:{access:"public"},scripts:{test:'echo "Error: no test specified" && exit 1',dev:"bun build --entrypoints ./index.ts --entry-naming=[name].mjs --outdir=dist --target=node --minify --packages=external --env=inline --define=process.env.API_URL=http://localhost:3000/react/api --watch",build:"bun build --entrypoints ./index.ts --entry-naming=[name].mjs --outdir=dist --target=node --minify --packages=external --env=inline --define=process.env.API_URL=https://untitledui.xyz/react/api","publish:npm":"bun run build && npm publish --access public",start:"node dist/index.mjs"},repository:{type:"git",url:"https://github.com/a-peak-works/untitledui-tailwind.git"},bugs:{url:"https://github.com/a-peak-works/untitledui-tailwind/issues"},homepage:"https://github.com/a-peak-works/untitledui-tailwind#readme",keywords:["untitled-ui","cli","tailwindcss","nextjs"],files:["dist","config"],author:"",license:"MIT",bin:{untitledui:"dist/index.mjs"},exports:"./dist/index.mjs",dependencies:{"async-retry":"^1.3.3",chalk:"^5.4.1",commander:"^13.1.0",execa:"^7.0.0","fast-glob":"^3.3.3","node-fetch":"^3.3.2",open:"^10.1.0",ora:"^8.2.0",prettier:"^3.5.3",prompts:"^2.4.2",tar:"^7.4.3","ts-morph":"^25.0.1","tsconfig-paths":"^4.2.0","update-check":"^1.5.4"},devDependencies:{"@types/async-retry":"^1.4.9","@types/prompts":"^2.4.9","@types/tar":"^6.1.13","type-fest":"^4.37.0",typescript:"^5.8.2"}};process.on("SIGINT",()=>process.exit(0));process.on("SIGTERM",()=>process.exit(0));async function o1(){let Q=new p1().name(g0.name).version(g0.version);Q.addCommand(Y1).addCommand(a0).addCommand(Q1).addCommand(i0),Q.parse()}o1();
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "untitledui",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.15",
|
|
4
4
|
"main": "dist/index.mjs",
|
|
5
5
|
"description": "Untitled UI CLI",
|
|
6
6
|
"type": "module",
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
},
|
|
10
10
|
"scripts": {
|
|
11
11
|
"test": "echo \"Error: no test specified\" && exit 1",
|
|
12
|
-
"dev": "bun build --entrypoints ./index.ts --entry-naming=[name].mjs --outdir=dist --target=node --minify --packages=external --env=inline --define=process.env.API_URL=http://localhost:3000/api --watch",
|
|
12
|
+
"dev": "bun build --entrypoints ./index.ts --entry-naming=[name].mjs --outdir=dist --target=node --minify --packages=external --env=inline --define=process.env.API_URL=http://localhost:3000/react/api --watch",
|
|
13
13
|
"build": "bun build --entrypoints ./index.ts --entry-naming=[name].mjs --outdir=dist --target=node --minify --packages=external --env=inline --define=process.env.API_URL=https://untitledui.xyz/react/api",
|
|
14
14
|
"publish:npm": "bun run build && npm publish --access public",
|
|
15
15
|
"start": "node dist/index.mjs"
|