untitledui 0.1.44 → 0.1.45
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/theme.css +110 -112
- package/dist/index.mjs +30 -29
- package/package.json +1 -1
package/config/styles/theme.css
CHANGED
|
@@ -672,99 +672,99 @@
|
|
|
672
672
|
--color-utility-yellow-700: var(--color-yellow-700);
|
|
673
673
|
|
|
674
674
|
/* TEXT COLORS */
|
|
675
|
+
--color-text-white: var(--color-white);
|
|
675
676
|
--color-text-primary: var(--color-gray-900);
|
|
677
|
+
--color-text-secondary: var(--color-gray-700);
|
|
678
|
+
--color-text-secondary_hover: var(--color-gray-800);
|
|
676
679
|
--color-text-tertiary: var(--color-gray-600);
|
|
680
|
+
--color-text-tertiary_hover: var(--color-gray-700);
|
|
681
|
+
--color-text-quaternary: var(--color-gray-500);
|
|
677
682
|
--color-text-error-primary: var(--color-error-600);
|
|
683
|
+
--color-text-error-primary_hover: var(--color-error-700);
|
|
678
684
|
--color-text-warning-primary: var(--color-warning-600);
|
|
679
685
|
--color-text-success-primary: var(--color-success-600);
|
|
680
|
-
--color-text-white: var(--color-white);
|
|
681
|
-
--color-text-secondary: var(--color-gray-700);
|
|
682
686
|
--color-text-disabled: var(--color-gray-500);
|
|
683
|
-
--color-text-secondary_hover: var(--color-gray-800);
|
|
684
|
-
--color-text-tertiary_hover: var(--color-gray-700);
|
|
685
|
-
--color-text-brand-secondary: var(--color-brand-700);
|
|
686
687
|
--color-text-placeholder: var(--color-gray-500);
|
|
687
688
|
--color-text-placeholder_subtle: var(--color-gray-300);
|
|
688
|
-
--color-text-brand-tertiary: var(--color-brand-600);
|
|
689
689
|
--color-text-editor-icon-fg: var(--color-gray-400);
|
|
690
690
|
--color-text-editor-icon-fg_active: var(--color-gray-500);
|
|
691
|
-
--color-text-quaternary: var(--color-gray-500);
|
|
692
|
-
--color-text-brand-primary: var(--color-brand-900);
|
|
693
691
|
--color-text-primary_on-brand: var(--color-white);
|
|
694
692
|
--color-text-secondary_on-brand: var(--color-brand-200);
|
|
695
693
|
--color-text-tertiary_on-brand: var(--color-brand-200);
|
|
696
694
|
--color-text-quaternary_on-brand: var(--color-brand-300);
|
|
697
|
-
--color-text-brand-
|
|
695
|
+
--color-text-brand-primary: var(--color-brand-900);
|
|
696
|
+
--color-text-brand-secondary: var(--color-brand-700);
|
|
698
697
|
--color-text-brand-secondary_hover: var(--color-brand-800);
|
|
699
|
-
--color-text-
|
|
698
|
+
--color-text-brand-tertiary: var(--color-brand-600);
|
|
699
|
+
--color-text-brand-tertiary_alt: var(--color-brand-600);
|
|
700
700
|
|
|
701
701
|
/* BORDER COLORS */
|
|
702
|
+
--color-border-primary: var(--color-gray-300);
|
|
702
703
|
--color-border-secondary: var(--color-gray-200);
|
|
704
|
+
--color-border-secondary_alt: rgb(0 0 0 / 0.08);
|
|
705
|
+
--color-border-tertiary: var(--color-gray-100);
|
|
706
|
+
--color-border-error: var(--color-error-500);
|
|
703
707
|
--color-border-error_subtle: var(--color-error-300);
|
|
704
|
-
--color-border-primary: var(--color-gray-300);
|
|
705
|
-
--color-border-brand: var(--color-brand-500);
|
|
706
708
|
--color-border-disabled: var(--color-gray-300);
|
|
707
|
-
--color-border-error: var(--color-error-500);
|
|
708
709
|
--color-border-disabled_subtle: var(--color-gray-200);
|
|
709
|
-
--color-border-
|
|
710
|
+
--color-border-brand: var(--color-brand-500);
|
|
710
711
|
--color-border-brand_alt: var(--color-brand-600);
|
|
711
|
-
--color-border-secondary_alt: rgb(0 0 0 / 0.08);
|
|
712
712
|
|
|
713
713
|
/* FOREGROUND COLORS */
|
|
714
|
-
--color-fg-secondary: var(--color-gray-700);
|
|
715
|
-
--color-fg-warning-primary: var(--color-warning-600);
|
|
716
|
-
--color-fg-success-primary: var(--color-success-600);
|
|
717
714
|
--color-fg-white: var(--color-white);
|
|
718
|
-
--color-fg-success-secondary: var(--color-success-500);
|
|
719
|
-
--color-fg-secondary_hover: var(--color-gray-800);
|
|
720
715
|
--color-fg-primary: var(--color-gray-900);
|
|
721
|
-
--color-fg-
|
|
722
|
-
--color-fg-
|
|
723
|
-
--color-fg-
|
|
716
|
+
--color-fg-secondary: var(--color-gray-700);
|
|
717
|
+
--color-fg-secondary_hover: var(--color-gray-800);
|
|
718
|
+
--color-fg-tertiary: var(--color-gray-600);
|
|
719
|
+
--color-fg-tertiary_hover: var(--color-gray-700);
|
|
724
720
|
--color-fg-quaternary: var(--color-gray-400);
|
|
725
721
|
--color-fg-quaternary_hover: var(--color-gray-500);
|
|
726
|
-
--color-fg-
|
|
727
|
-
--color-fg-disabled_subtle: var(--color-gray-300);
|
|
722
|
+
--color-fg-warning-primary: var(--color-warning-600);
|
|
728
723
|
--color-fg-warning-secondary: var(--color-warning-500);
|
|
724
|
+
--color-fg-success-primary: var(--color-success-600);
|
|
725
|
+
--color-fg-success-secondary: var(--color-success-500);
|
|
726
|
+
--color-fg-error-primary: var(--color-error-600);
|
|
729
727
|
--color-fg-error-secondary: var(--color-error-500);
|
|
730
|
-
--color-fg-
|
|
731
|
-
--color-fg-
|
|
728
|
+
--color-fg-disabled: var(--color-gray-400);
|
|
729
|
+
--color-fg-disabled_subtle: var(--color-gray-300);
|
|
730
|
+
--color-fg-brand-primary: var(--color-brand-600);
|
|
732
731
|
--color-fg-brand-primary_alt: var(--color-fg-brand-primary);
|
|
732
|
+
--color-fg-brand-secondary: var(--color-brand-500);
|
|
733
733
|
--color-fg-brand-secondary_alt: var(--color-fg-brand-secondary);
|
|
734
734
|
--color-fg-brand-secondary_hover: var(--color-brand-600);
|
|
735
735
|
|
|
736
736
|
/* BACKGROUND COLORS */
|
|
737
737
|
--color-bg-primary: var(--color-white);
|
|
738
|
+
--color-bg-primary-solid: var(--color-gray-950);
|
|
739
|
+
--color-bg-primary_alt: var(--color-white);
|
|
740
|
+
--color-bg-primary_hover: var(--color-gray-50);
|
|
741
|
+
--color-bg-secondary: var(--color-gray-50);
|
|
742
|
+
--color-bg-secondary-solid: var(--color-gray-600);
|
|
743
|
+
--color-bg-secondary_subtle: var(--color-gray-25);
|
|
744
|
+
--color-bg-secondary_hover: var(--color-gray-100);
|
|
745
|
+
--color-bg-secondary_alt: var(--color-gray-50);
|
|
738
746
|
--color-bg-tertiary: var(--color-gray-100);
|
|
739
|
-
--color-bg-
|
|
747
|
+
--color-bg-quaternary: var(--color-gray-200);
|
|
748
|
+
--color-bg-error-primary: var(--color-error-50);
|
|
740
749
|
--color-bg-error-secondary: var(--color-error-100);
|
|
750
|
+
--color-bg-error-solid: var(--color-error-600);
|
|
741
751
|
--color-bg-warning-primary: var(--color-warning-50);
|
|
742
752
|
--color-bg-warning-secondary: var(--color-warning-100);
|
|
753
|
+
--color-bg-warning-solid: var(--color-warning-600);
|
|
743
754
|
--color-bg-success-primary: var(--color-success-50);
|
|
744
755
|
--color-bg-success-secondary: var(--color-success-100);
|
|
745
|
-
--color-bg-brand-solid: var(--color-brand-600);
|
|
746
|
-
--color-bg-secondary-solid: var(--color-gray-600);
|
|
747
|
-
--color-bg-error-solid: var(--color-error-600);
|
|
748
|
-
--color-bg-warning-solid: var(--color-warning-600);
|
|
749
756
|
--color-bg-success-solid: var(--color-success-600);
|
|
750
|
-
--color-bg-secondary_hover: var(--color-gray-100);
|
|
751
|
-
--color-bg-primary_hover: var(--color-gray-50);
|
|
752
757
|
--color-bg-disabled: var(--color-gray-100);
|
|
753
|
-
--color-bg-active: var(--color-gray-50);
|
|
754
|
-
--color-bg-brand-solid_hover: var(--color-brand-700);
|
|
755
|
-
--color-bg-error-primary: var(--color-error-50);
|
|
756
|
-
--color-bg-brand-secondary: var(--color-brand-100);
|
|
757
|
-
--color-bg-secondary: var(--color-gray-50);
|
|
758
758
|
--color-bg-disabled_subtle: var(--color-gray-50);
|
|
759
|
-
--color-bg-
|
|
760
|
-
--color-bg-primary_alt: var(--color-white);
|
|
761
|
-
--color-bg-brand-primary_alt: var(--color-brand-50);
|
|
762
|
-
--color-bg-secondary_alt: var(--color-gray-50);
|
|
759
|
+
--color-bg-active: var(--color-gray-50);
|
|
763
760
|
--color-bg-overlay: var(--color-gray-950);
|
|
764
|
-
--color-bg-
|
|
761
|
+
--color-bg-brand-primary: var(--color-brand-50);
|
|
762
|
+
--color-bg-brand-primary_alt: var(--color-brand-50);
|
|
763
|
+
--color-bg-brand-secondary: var(--color-brand-100);
|
|
764
|
+
--color-bg-brand-solid: var(--color-brand-600);
|
|
765
|
+
--color-bg-brand-solid_hover: var(--color-brand-700);
|
|
765
766
|
--color-bg-brand-section: var(--color-brand-800);
|
|
766
767
|
--color-bg-brand-section_subtle: var(--color-brand-700);
|
|
767
|
-
--color-bg-primary-solid: var(--color-gray-950);
|
|
768
768
|
|
|
769
769
|
/* COMPONENT COLORS */
|
|
770
770
|
--color-app-store-badge-border: rgb(166 166 166);
|
|
@@ -799,9 +799,6 @@
|
|
|
799
799
|
--color-text-editor-icon-fg_active: var(--color-gray-500);
|
|
800
800
|
|
|
801
801
|
/* BACKGROUND PROPERTY COLORS */
|
|
802
|
-
--background-color-quaternary: var(--color-bg-quaternary);
|
|
803
|
-
--background-color-brand-solid: var(--color-bg-brand-solid);
|
|
804
|
-
--background-color-disabled: var(--color-bg-disabled);
|
|
805
802
|
--background-color-primary: var(--color-bg-primary);
|
|
806
803
|
--background-color-primary-solid: var(--color-bg-primary-solid);
|
|
807
804
|
--background-color-primary_alt: var(--color-bg-primary_alt);
|
|
@@ -812,7 +809,10 @@
|
|
|
812
809
|
--background-color-secondary_hover: var(--color-bg-secondary_hover);
|
|
813
810
|
--background-color-secondary_subtle: var(--color-bg-secondary_subtle);
|
|
814
811
|
--background-color-tertiary: var(--color-bg-tertiary);
|
|
812
|
+
--background-color-quaternary: var(--color-bg-quaternary);
|
|
813
|
+
--background-color-brand-solid: var(--color-bg-brand-solid);
|
|
815
814
|
--background-color-active: var(--color-bg-active);
|
|
815
|
+
--background-color-disabled: var(--color-bg-disabled);
|
|
816
816
|
--background-color-disabled_subtle: var(--color-bg-disabled_subtle);
|
|
817
817
|
--background-color-overlay: var(--color-bg-overlay);
|
|
818
818
|
--background-color-brand-primary: var(--color-bg-brand-primary);
|
|
@@ -830,9 +830,9 @@
|
|
|
830
830
|
--background-color-warning-solid: var(--color-bg-warning-solid);
|
|
831
831
|
--background-color-success-primary: var(--color-bg-success-primary);
|
|
832
832
|
--background-color-success-secondary: var(--color-bg-success-secondary);
|
|
833
|
+
--background-color-border-tertiary: var(--color-border-tertiary);
|
|
833
834
|
--background-color-success-solid: var(--color-bg-success-solid);
|
|
834
835
|
--background-color-border-brand: var(--color-border-brand);
|
|
835
|
-
--background-color-border-tertiary: var(--color-border-tertiary);
|
|
836
836
|
--background-color-border-brand_alt: var(--color-border-brand_alt);
|
|
837
837
|
|
|
838
838
|
/* TEXT PROPERTY COLORS */
|
|
@@ -866,43 +866,43 @@
|
|
|
866
866
|
--border-color-secondary_alt: var(--color-border-secondary_alt);
|
|
867
867
|
--border-color-tertiary: var(--color-border-tertiary);
|
|
868
868
|
--border-color-disabled: var(--color-border-disabled);
|
|
869
|
+
--border-color-disabled_subtle: var(--color-border-disabled_subtle);
|
|
870
|
+
--border-color-error: var(--color-border-error);
|
|
871
|
+
--border-color-error_subtle: var(--color-border-error_subtle);
|
|
869
872
|
--border-color-brand: var(--color-border-brand);
|
|
873
|
+
--border-color-brand_alt: var(--color-border-brand_alt);
|
|
870
874
|
--border-color-brand-solid: var(--color-bg-brand-solid);
|
|
871
875
|
--border-color-brand-solid_hover: var(--color-bg-brand-solid_hover);
|
|
872
|
-
--border-color-error: var(--color-border-error);
|
|
873
|
-
--border-color-disabled_subtle: var(--color-border-disabled_subtle);
|
|
874
|
-
--border-color-brand_alt: var(--color-border-brand_alt);
|
|
875
|
-
--border-color-error_subtle: var(--color-border-error_subtle);
|
|
876
876
|
|
|
877
877
|
/* RING PROPERTY COLORS */
|
|
878
|
-
--ring-color-bg-brand-solid: var(--color-bg-brand-solid);
|
|
879
878
|
--ring-color-primary: var(--color-border-primary);
|
|
880
879
|
--ring-color-secondary: var(--color-border-secondary);
|
|
881
880
|
--ring-color-secondary_alt: var(--color-border-secondary_alt);
|
|
882
881
|
--ring-color-tertiary: var(--color-border-tertiary);
|
|
882
|
+
--ring-color-error: var(--color-border-error);
|
|
883
|
+
--ring-color-error_subtle: var(--color-border-error_subtle);
|
|
883
884
|
--ring-color-disabled: var(--color-border-disabled);
|
|
885
|
+
--ring-color-disabled_subtle: var(--color-border-disabled_subtle);
|
|
884
886
|
--ring-color-brand: var(--color-border-brand);
|
|
885
887
|
--ring-color-brand-solid: var(--color-bg-brand-solid);
|
|
886
888
|
--ring-color-brand-solid_hover: var(--color-bg-brand-solid_hover);
|
|
887
|
-
--ring-color-error: var(--color-border-error);
|
|
888
|
-
--ring-color-disabled_subtle: var(--color-border-disabled_subtle);
|
|
889
889
|
--ring-color-brand_alt: var(--color-border-brand_alt);
|
|
890
|
-
--ring-color-
|
|
890
|
+
--ring-color-bg-brand-solid: var(--color-bg-brand-solid);
|
|
891
891
|
|
|
892
892
|
/* OUTLINE PROPERTY COLORS */
|
|
893
|
-
--outline-color-brand: var(--color-border-brand);
|
|
894
893
|
--outline-color-primary: var(--color-border-primary);
|
|
895
894
|
--outline-color-secondary: var(--color-border-secondary);
|
|
896
895
|
--outline-color-secondary_alt: var(--color-border-secondary_alt);
|
|
897
896
|
--outline-color-tertiary: var(--color-border-tertiary);
|
|
897
|
+
--outline-color-error: var(--color-border-error);
|
|
898
|
+
--outline-color-error_subtle: var(--color-border-error_subtle);
|
|
898
899
|
--outline-color-disabled: var(--color-border-disabled);
|
|
900
|
+
--outline-color-disabled_subtle: var(--color-border-disabled_subtle);
|
|
901
|
+
--outline-color-brand: var(--color-border-brand);
|
|
899
902
|
--outline-color-brand: var(--color-border-brand);
|
|
900
903
|
--outline-color-brand-solid: var(--color-bg-brand-solid);
|
|
901
904
|
--outline-color-brand-solid_hover: var(--color-bg-brand-solid_hover);
|
|
902
|
-
--outline-color-error: var(--color-border-error);
|
|
903
|
-
--outline-color-disabled_subtle: var(--color-border-disabled_subtle);
|
|
904
905
|
--outline-color-brand_alt: var(--color-border-brand_alt);
|
|
905
|
-
--outline-color-error_subtle: var(--color-border-error_subtle);
|
|
906
906
|
}
|
|
907
907
|
|
|
908
908
|
@layer base {
|
|
@@ -1095,100 +1095,99 @@
|
|
|
1095
1095
|
--color-utility-yellow-700: var(--color-yellow-300);
|
|
1096
1096
|
|
|
1097
1097
|
/* TEXT COLORS */
|
|
1098
|
-
|
|
1098
|
+
--color-text-white: var(--color-white);
|
|
1099
1099
|
--color-text-primary: var(--color-gray-50);
|
|
1100
|
+
--color-text-secondary: var(--color-gray-300);
|
|
1101
|
+
--color-text-secondary_hover: var(--color-gray-200);
|
|
1100
1102
|
--color-text-tertiary: var(--color-gray-400);
|
|
1103
|
+
--color-text-tertiary_hover: var(--color-gray-300);
|
|
1104
|
+
--color-text-quaternary: var(--color-gray-400);
|
|
1101
1105
|
--color-text-error-primary: var(--color-error-400);
|
|
1102
1106
|
--color-text-warning-primary: var(--color-warning-400);
|
|
1103
1107
|
--color-text-success-primary: var(--color-success-400);
|
|
1104
|
-
--color-text-white: var(--color-white);
|
|
1105
|
-
--color-text-secondary: var(--color-gray-300);
|
|
1106
1108
|
--color-text-disabled: var(--color-gray-500);
|
|
1107
|
-
--color-text-
|
|
1108
|
-
--color-text-tertiary_hover: var(--color-gray-300);
|
|
1109
|
+
--color-text-brand-primary: var(--color-gray-50);
|
|
1109
1110
|
--color-text-brand-secondary: var(--color-gray-300);
|
|
1111
|
+
--color-text-brand-tertiary: var(--color-gray-400);
|
|
1110
1112
|
--color-text-placeholder: var(--color-gray-500);
|
|
1111
1113
|
--color-text-placeholder_subtle: var(--color-gray-700);
|
|
1112
|
-
--color-text-brand-tertiary: var(--color-gray-400);
|
|
1113
1114
|
--color-text-editor-icon-fg: var(--color-gray-400);
|
|
1114
1115
|
--color-text-editor-icon-fg_active: var(--color-white);
|
|
1115
|
-
--color-text-quaternary: var(--color-gray-400);
|
|
1116
|
-
--color-text-brand-primary: var(--color-gray-50);
|
|
1117
1116
|
--color-text-primary_on-brand: var(--color-gray-50);
|
|
1118
1117
|
--color-text-secondary_on-brand: var(--color-gray-300);
|
|
1119
1118
|
--color-text-tertiary_on-brand: var(--color-gray-400);
|
|
1120
1119
|
--color-text-quaternary_on-brand: var(--color-gray-400);
|
|
1121
|
-
--color-text-brand-tertiary_alt: var(--color-gray-50);
|
|
1122
1120
|
--color-text-brand-secondary_hover: var(--color-gray-200);
|
|
1121
|
+
--color-text-brand-tertiary_alt: var(--color-gray-50);
|
|
1123
1122
|
--color-text-error-primary_hover: var(--color-error-300);
|
|
1124
1123
|
|
|
1125
1124
|
/* BORDER COLORS */
|
|
1126
|
-
--color-border-secondary: var(--color-gray-800);
|
|
1127
|
-
--color-border-error_subtle: var(--color-error-500);
|
|
1128
1125
|
--color-border-primary: var(--color-gray-700);
|
|
1126
|
+
--color-border-secondary: var(--color-gray-800);
|
|
1127
|
+
--color-border-secondary_alt: var(--color-gray-800);
|
|
1128
|
+
--color-border-tertiary: var(--color-gray-800);
|
|
1129
1129
|
--color-border-brand: var(--color-brand-400);
|
|
1130
|
-
--color-border-
|
|
1130
|
+
--color-border-brand_alt: var(--color-gray-700);
|
|
1131
1131
|
--color-border-error: var(--color-error-400);
|
|
1132
|
+
--color-border-error_subtle: var(--color-error-500);
|
|
1133
|
+
--color-border-disabled: var(--color-gray-700);
|
|
1132
1134
|
--color-border-disabled_subtle: var(--color-gray-800);
|
|
1133
|
-
--color-border-tertiary: var(--color-gray-800);
|
|
1134
|
-
--color-border-brand_alt: var(--color-gray-700);
|
|
1135
|
-
--color-border-secondary_alt: var(--color-gray-800);
|
|
1136
1135
|
|
|
1137
1136
|
/* FOREGROUND COLORS */
|
|
1137
|
+
--color-fg-white: var(--color-white);
|
|
1138
|
+
--color-fg-primary: var(--color-white);
|
|
1138
1139
|
--color-fg-secondary: var(--color-gray-300);
|
|
1140
|
+
--color-fg-tertiary: var(--color-gray-400);
|
|
1141
|
+
--color-fg-tertiary_hover: var(--color-gray-300);
|
|
1142
|
+
--color-fg-quaternary: var(--color-gray-600);
|
|
1143
|
+
--color-fg-quaternary_hover: var(--color-gray-500);
|
|
1144
|
+
--color-fg-error-primary: var(--color-error-500);
|
|
1145
|
+
--color-fg-error-secondary: var(--color-error-400);
|
|
1139
1146
|
--color-fg-warning-primary: var(--color-warning-500);
|
|
1147
|
+
--color-fg-warning-secondary: var(--color-warning-400);
|
|
1140
1148
|
--color-fg-success-primary: var(--color-success-500);
|
|
1141
|
-
--color-fg-white: var(--color-white);
|
|
1142
1149
|
--color-fg-success-secondary: var(--color-success-400);
|
|
1143
1150
|
--color-fg-secondary_hover: var(--color-gray-200);
|
|
1144
|
-
--color-fg-primary: var(--color-white);
|
|
1145
1151
|
--color-fg-disabled: var(--color-gray-500);
|
|
1146
|
-
--color-fg-brand-secondary: var(--color-brand-500);
|
|
1147
|
-
--color-fg-brand-primary: var(--color-brand-500);
|
|
1148
|
-
--color-fg-quaternary: var(--color-gray-600);
|
|
1149
|
-
--color-fg-quaternary_hover: var(--color-gray-500);
|
|
1150
|
-
--color-fg-error-primary: var(--color-error-500);
|
|
1151
1152
|
--color-fg-disabled_subtle: var(--color-gray-600);
|
|
1152
|
-
--color-fg-
|
|
1153
|
-
--color-fg-
|
|
1154
|
-
--color-fg-tertiary: var(--color-gray-400);
|
|
1155
|
-
--color-fg-tertiary_hover: var(--color-gray-300);
|
|
1153
|
+
--color-fg-brand-primary: var(--color-brand-500);
|
|
1154
|
+
--color-fg-brand-secondary: var(--color-brand-500);
|
|
1156
1155
|
--color-fg-brand-primary_alt: var(--color-gray-300);
|
|
1157
1156
|
--color-fg-brand-secondary_alt: var(--color-gray-600);
|
|
1158
1157
|
--color-fg-brand-secondary_hover: var(--color-gray-500);
|
|
1159
1158
|
|
|
1160
1159
|
/* BACKGROUND COLORS */
|
|
1161
1160
|
--color-bg-primary: var(--color-gray-950);
|
|
1161
|
+
--color-bg-primary-solid: var(--color-bg-secondary);
|
|
1162
|
+
--color-bg-primary_alt: var(--color-bg-secondary);
|
|
1163
|
+
--color-bg-primary_hover: var(--color-gray-800);
|
|
1164
|
+
--color-bg-secondary: var(--color-gray-900);
|
|
1165
|
+
--color-bg-secondary-solid: var(--color-gray-600);
|
|
1166
|
+
--color-bg-secondary_subtle: var(--color-gray-900);
|
|
1167
|
+
--color-bg-secondary_hover: var(--color-gray-800);
|
|
1162
1168
|
--color-bg-tertiary: var(--color-gray-800);
|
|
1163
|
-
--color-bg-
|
|
1169
|
+
--color-bg-quaternary: var(--color-gray-700);
|
|
1170
|
+
--color-bg-error-primary: var(--color-error-950);
|
|
1164
1171
|
--color-bg-error-secondary: var(--color-error-600);
|
|
1172
|
+
--color-bg-error-solid: var(--color-error-600);
|
|
1165
1173
|
--color-bg-warning-primary: var(--color-warning-950);
|
|
1166
1174
|
--color-bg-warning-secondary: var(--color-warning-600);
|
|
1175
|
+
--color-bg-warning-solid: var(--color-warning-600);
|
|
1167
1176
|
--color-bg-success-primary: var(--color-success-950);
|
|
1168
1177
|
--color-bg-success-secondary: var(--color-success-600);
|
|
1169
|
-
--color-bg-brand-solid: var(--color-brand-600);
|
|
1170
|
-
--color-bg-secondary-solid: var(--color-gray-600);
|
|
1171
|
-
--color-bg-error-solid: var(--color-error-600);
|
|
1172
|
-
--color-bg-warning-solid: var(--color-warning-600);
|
|
1173
1178
|
--color-bg-success-solid: var(--color-success-600);
|
|
1174
|
-
--color-bg-secondary_hover: var(--color-gray-800);
|
|
1175
|
-
--color-bg-primary_hover: var(--color-gray-800);
|
|
1176
|
-
--color-bg-disabled: var(--color-gray-800);
|
|
1177
1179
|
--color-bg-active: var(--color-gray-800);
|
|
1178
|
-
--color-bg-
|
|
1179
|
-
--color-bg-error-primary: var(--color-error-950);
|
|
1180
|
-
--color-bg-brand-secondary: var(--color-brand-600);
|
|
1181
|
-
--color-bg-secondary: var(--color-gray-900);
|
|
1180
|
+
--color-bg-disabled: var(--color-gray-800);
|
|
1182
1181
|
--color-bg-disabled_subtle: var(--color-gray-900);
|
|
1183
|
-
--color-bg-
|
|
1184
|
-
--color-bg-primary_alt: var(--color-bg-secondary);
|
|
1182
|
+
--color-bg-brand-primary: var(--color-brand-500);
|
|
1185
1183
|
--color-bg-brand-primary_alt: var(--color-bg-secondary);
|
|
1184
|
+
--color-bg-brand-secondary: var(--color-brand-600);
|
|
1186
1185
|
--color-bg-secondary_alt: var(--color-bg-primary);
|
|
1186
|
+
--color-bg-brand-solid: var(--color-brand-600);
|
|
1187
|
+
--color-bg-brand-solid_hover: var(--color-brand-500);
|
|
1187
1188
|
--color-bg-overlay: var(--color-gray-800);
|
|
1188
|
-
--color-bg-secondary_subtle: var(--color-gray-900);
|
|
1189
1189
|
--color-bg-brand-section: var(--color-bg-secondary);
|
|
1190
1190
|
--color-bg-brand-section_subtle: var(--color-bg-primary);
|
|
1191
|
-
--color-bg-primary-solid: var(--color-bg-secondary);
|
|
1192
1191
|
|
|
1193
1192
|
/* COMPONENT COLORS */
|
|
1194
1193
|
--color-app-store-badge-border: var(--color-white);
|
|
@@ -1227,9 +1226,6 @@
|
|
|
1227
1226
|
--color-text-editor-icon-fg_active: var(--color-white);
|
|
1228
1227
|
|
|
1229
1228
|
/* BACKGROUND PROPERTY COLORS */
|
|
1230
|
-
--background-color-quaternary: var(--color-bg-quaternary);
|
|
1231
|
-
--background-color-brand-solid: var(--color-bg-brand-solid);
|
|
1232
|
-
--background-color-disabled: var(--color-bg-disabled);
|
|
1233
1229
|
--background-color-primary: var(--color-bg-primary);
|
|
1234
1230
|
--background-color-primary-solid: var(--color-bg-primary-solid);
|
|
1235
1231
|
--background-color-primary_alt: var(--color-bg-primary_alt);
|
|
@@ -1240,7 +1236,9 @@
|
|
|
1240
1236
|
--background-color-secondary_hover: var(--color-bg-secondary_hover);
|
|
1241
1237
|
--background-color-secondary_subtle: var(--color-bg-secondary_subtle);
|
|
1242
1238
|
--background-color-tertiary: var(--color-bg-tertiary);
|
|
1239
|
+
--background-color-quaternary: var(--color-bg-quaternary);
|
|
1243
1240
|
--background-color-active: var(--color-bg-active);
|
|
1241
|
+
--background-color-disabled: var(--color-bg-disabled);
|
|
1244
1242
|
--background-color-disabled_subtle: var(--color-bg-disabled_subtle);
|
|
1245
1243
|
--background-color-overlay: var(--color-bg-overlay);
|
|
1246
1244
|
--background-color-brand-primary: var(--color-bg-brand-primary);
|
|
@@ -1303,33 +1301,33 @@
|
|
|
1303
1301
|
--border-color-error_subtle: var(--color-border-error_subtle);
|
|
1304
1302
|
|
|
1305
1303
|
/* RING PROPERTY COLORS */
|
|
1306
|
-
--ring-color-bg-brand-solid: var(--color-bg-brand-solid);
|
|
1307
1304
|
--ring-color-primary: var(--color-border-primary);
|
|
1308
1305
|
--ring-color-secondary: var(--color-border-secondary);
|
|
1309
1306
|
--ring-color-secondary_alt: var(--color-border-secondary_alt);
|
|
1310
1307
|
--ring-color-tertiary: var(--color-border-tertiary);
|
|
1311
|
-
--ring-color-disabled: var(--color-border-disabled);
|
|
1312
1308
|
--ring-color-brand: var(--color-border-brand);
|
|
1313
1309
|
--ring-color-brand-solid: var(--color-bg-brand-solid);
|
|
1314
1310
|
--ring-color-brand-solid_hover: var(--color-bg-brand-solid_hover);
|
|
1315
1311
|
--ring-color-error: var(--color-border-error);
|
|
1312
|
+
--ring-color-error_subtle: var(--color-border-error_subtle);
|
|
1313
|
+
--ring-color-disabled: var(--color-border-disabled);
|
|
1316
1314
|
--ring-color-disabled_subtle: var(--color-border-disabled_subtle);
|
|
1317
1315
|
--ring-color-brand_alt: var(--color-border-brand_alt);
|
|
1318
|
-
--ring-color-
|
|
1316
|
+
--ring-color-bg-brand-solid: var(--color-bg-brand-solid);
|
|
1319
1317
|
|
|
1320
1318
|
/* OUTLINE PROPERTY COLORS */
|
|
1321
|
-
--outline-color-brand: var(--color-border-brand);
|
|
1322
1319
|
--outline-color-primary: var(--color-border-primary);
|
|
1323
1320
|
--outline-color-secondary: var(--color-border-secondary);
|
|
1324
1321
|
--outline-color-secondary_alt: var(--color-border-secondary_alt);
|
|
1325
1322
|
--outline-color-tertiary: var(--color-border-tertiary);
|
|
1326
1323
|
--outline-color-disabled: var(--color-border-disabled);
|
|
1324
|
+
--outline-color-disabled_subtle: var(--color-border-disabled_subtle);
|
|
1327
1325
|
--outline-color-brand: var(--color-border-brand);
|
|
1328
1326
|
--outline-color-brand-solid: var(--color-bg-brand-solid);
|
|
1329
1327
|
--outline-color-brand-solid_hover: var(--color-bg-brand-solid_hover);
|
|
1330
1328
|
--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
1329
|
--outline-color-error_subtle: var(--color-border-error_subtle);
|
|
1330
|
+
--outline-color-brand: var(--color-border-brand);
|
|
1331
|
+
--outline-color-brand_alt: var(--color-border-brand_alt);
|
|
1334
1332
|
}
|
|
1335
1333
|
}
|
package/dist/index.mjs
CHANGED
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
#!/usr/bin/env node
|
|
2
|
-
import{Command as
|
|
3
|
-
|
|
2
|
+
import{Command as W1}from"commander";import W3 from"async-retry";import N from"chalk";import{Command as E3}from"commander";import{execa as M0}from"execa";import*as x from"fs";import X0 from"ora";import T3 from"os";import*as F from"path";import r from"prompts";import{Project as w3}from"ts-morph";import m0 from"node-fetch";import{Readable as b3,pipeline as M3}from"stream";import{x as H3}from"tar";import{promisify as v3}from"util";var G3=v3(M3);async function l0(z,Q){try{let Y=await j3(Q);await G3(Y,H3({cwd:z,strip:1}))}catch(Y){throw new Error(`Failed to download or extract repository from API: ${Y instanceof Error?Y.message:Y}`)}}async function j3(z){let Q=`https://www.untitledui.com/react/api/download-repo?template=${z.template}`;try{let Y=await m0(Q,{method:"GET",headers:{"Content-Type":"application/json",Accept:"application/octet-stream"}});if(Y.status===403||Y.status===404)throw new Error("Repository not found");if(!Y.ok)throw new Error(`Failed to download from API. Status: ${Y.status} ${Y.statusText}`);if(!Y.body)throw new Error("Response body is empty");return b3.from(Y.body)}catch(Y){throw new Error(`Error downloading tarball: ${Y instanceof Error?Y.message:Y}`)}}async function J0(z){let Q=`https://www.untitledui.com/react/api/validate-key?key=${z}`;try{return(await m0(Q)).status===200}catch{return!1}}import u3 from"node-fetch";var c0={invalid_key:"Invalid key provided",no_components_found:"No components found",no_components_provided:"No components provided"};async function V0(z,Q,Y){let q=Q.map((B)=>{if(B.includes("modals/"))if(B.includes("-modal"))return B;else return B+"-modal";return B});try{let B=await u3("https://www.untitledui.com/react/api/components",{method:"POST",headers:{"Content-Type":"application/json",Accept:"application/json"},body:JSON.stringify({type:z,components:q,key:Y})});if(!B.ok)console.log(c0?.[B.statusText]||c0.no_components_found),process.exit(1);return await B.json()}catch(B){return null}}import R0 from"node-fetch";var z0={invalid_key:"Invalid key provided",no_components_found:"No components found",no_components_provided:"No components provided"};async function a0(z,Q=""){let Y=`https://www.untitledui.com/react/api/components/list?key=${Q}&type=${z}`;try{let Z=await R0(Y),q=await Z.json();if(!Z.ok)console.log(z0?.[Z.statusText]||z0.no_components_found),process.exit(1);if(!q?.components?.length)return null;return q}catch(Z){return console.error(Z),null}}async function s0(z,Q="",Y){let Z=`https://www.untitledui.com/react/api/components/list?key=${Q}&type=${z}&subfolders=${Y.join(",")}`;try{let q=await R0(Z);if(!q.ok)console.log(z0?.[q.statusText]||z0.no_components_found),process.exit(1);let B=await q.json();if(!B?.components?.length)return null;return B}catch(q){return console.error(q),null}}async function r0(z=""){let Q=`https://www.untitledui.com/react/api/components/list?key=${z}`;try{let Y=await R0(Q);if(!Y.ok)console.log(z0?.[Y.statusText]||z0.no_components_found),process.exit(1);let Z=await Y.json();if(!Z?.types?.length)return null;return Z}catch(Y){return console.error(Y),null}}import N0 from"fast-glob";import*as L0 from"fs";import*as l from"path";import{Project as D3}from"ts-morph";import{loadConfig as o0}from"tsconfig-paths";import I3 from"prettier";async function i0(z,Q="typescript"){try{return await I3.format(z,{parser:Q,printWidth:160,tabWidth:4})}catch(Y){return console.error("Error formatting with Prettier:",Y),z}}import m from"fast-glob";import*as h from"fs";import*as a from"path";import{loadConfig as A0}from"tsconfig-paths";import n0 from"fs";import y3 from"path";function p0(z=""){let Q=y3.join(z,"package.json");if(!n0.existsSync(Q))return null;else return JSON.parse(n0.readFileSync(Q,"utf-8"))}var P=["**/node_modules/**",".next","public","dist","build"],t0={"next-app":"Next.js (App)","next-pages":"Next.js (Pages)",vite:"Vite",other:"Other"};async function s(z){let Q=h.existsSync(a.resolve(z,"src")),Y=h.existsSync(a.resolve(z,`${Q?"src/":""}app`)),[Z,q,B,J,G]=await Promise.all([m.glob("**/{next,vite,astro}.config.*|gatsby-config.*",{cwd:z,deep:2,ignore:P}),R3(z),A3(z),N3(z),p0(z)]),K=h.existsSync(a.resolve(z,"components.json")),M=null;if(K)M=JSON.parse(h.readFileSync(a.resolve(z,"components.json"),"utf-8"));let b=m.sync(["**/**/theme.css"],{cwd:z,absolute:!0,onlyFiles:!0,ignore:P}),H=b?.[0]&&h.readFileSync(b[0],"utf-8").match(/(--color-brand+-\d{1,3}):\s*(rgb\([^)]+\))/g)?.[1]||void 0,V={tailwind:{config:B||void 0,brandColor:H?.replace(/--color-([^-]+(?:-[^-]+)?)-\d+:.*/,"$1")||void 0},examples:M?.examples||void 0,aliases:M?.aliases||J||{},isTsx:q,isSrcDir:Q,isAppDir:Y,framework:"other"};if(Z.find((W)=>W.startsWith("next.config."))?.length)return V.framework=Y?"next-app":"next-pages",V;else if(Z.find((W)=>W.startsWith("vite.config."))?.length)return V.framework="vite",V;else if(Object.keys(G?.dependencies||{}).includes("react"))return V.framework="next-pages",V;else if(Z?.length||h.existsSync(a.resolve(z,"package.json")))return V.framework="other",V;return null}async function R3(z){return(await m.glob("tsconfig.*",{cwd:z,deep:2,ignore:P})).length>0}async function A3(z){let Q=await m.glob("tailwind.config.*",{cwd:z,deep:2,ignore:P});if(!Q.length)return null;return Q[0]}async function N3(z){let[Q,Y]=await Promise.all([m.glob("next.config.*",{cwd:z,deep:1,ignore:P}),m.glob("vite.config.*",{cwd:z,deep:1,ignore:P})]),Z=Q.length>0,q=Y.length>0,B;if(Z)B=A0(z);else if(q){if(B=A0(z),B?.resultType==="failed"||!Object.keys(B.paths||{}).length){let K=await m.glob(["tsconfig.app.*","*/tsconfig.app.*"],{cwd:z,deep:1,onlyFiles:!0,absolute:!0,ignore:P}),[M]=K;if(M)try{let H=function($){return $.replace(/\/\*[\s\S]*?\*\//g,"").replace(/\/\/.*$/gm,"").replace(/,(\s*[}\]])/g,"$1")},b=h.readFileSync(M,"utf-8"),V=H(b),W=JSON.parse(V);if(W.compilerOptions?.paths)B={resultType:"success",paths:W?.compilerOptions?.paths,baseUrl:W.compilerOptions.baseUrl||".",absoluteBaseUrl:a.resolve(z,W.compilerOptions.baseUrl||".")}}catch{}}}else B=A0(z);if(B?.resultType==="failed"||!Object.keys(B.paths).length)return null;let J={},G={app:/\/?app\/\*$/,components:/\/?components\/\*$/,utils:/\/?utils\/\*$/,styles:/\/?styles\/\*$/,hooks:/\/?hooks\/\*$/,src:/^(\.\/src\/\*|\.\/\*|\/src\/\*|src\/\*|\/\*|\*)$/};for(let[K,M]of Object.entries(B.paths)){let b=K.replace(/\/\*$/,"/");for(let[H,V]of Object.entries(G))if(M.some((W)=>V.test(W))){J[H]=b;break}}return J||null}function Q0(z,Q){let Y=o0(z),Z=N0.sync(["tailwind.config.*","**/globals.css","package.json"],{cwd:z,deep:4,absolute:!0,onlyFiles:!0,ignore:P}),q=N0.sync("**/{layout,_app,main}.tsx",{cwd:Q?l.posix.join(z,Q):z,deep:4,absolute:!0,onlyFiles:!0,ignore:P}),B={tailwindFile:Z.find((J)=>J.includes("tailwind.config.")),cssFile:Z.find((J)=>J.includes("globals.css")),packageJson:Z.find((J)=>J.includes("package.json")),tsConfig:Y?.resultType==="success"?Y?.configFileAbsolutePath:void 0,layoutFile:q.find((J)=>J.includes("layout")),appFile:q.find((J)=>J.includes("_app")),mainFile:q.find((J)=>J.includes("main"))};if(Y.resultType==="failed")throw new Error(`Failed to load tsconfig.json. ${Y.message??""}`.trim());return B}function W0(z,Q,Y={}){if(z.includes("components")&&Y?.components)return z.replace(/@\/components\//,l.posix.join(Y?.components||"",Q?Q.replace(/components\/?/,""):"","/"));if(z.includes("app")&&Y?.app)return z.replace(/^@\/app\//,l.posix.join(Y?.app,"/"));if(z.includes("utils")&&Y?.utils)return z.replace(/^@\/utils\//,l.posix.join(Y?.utils,"/"));if(z.includes("hooks")&&Y?.hooks)return z.replace(/^@\/hooks\//,l.posix.join(Y?.hooks,"/"));if(z.includes("styles")&&Y?.styles)return z.replace(/^@\/styles\//,l.posix.join(Y?.styles,"/"));if(Y?.src)return z.replace(/^@\//,l.posix.join(Y?.src,"/"));return z}async function e0(z,Q,Y="@/*"){let Z=await o0(z);if(Z?.resultType==="failed")return null;let q={};if(!Object.keys(Z.paths).length){Z.paths={[Y]:[`./${Q?"src/":""}*`]},q.src=Y.replace(/\/\*$/,"");let B=await L0.promises.readFile(Z.configFileAbsolutePath,"utf-8"),J,G=/(?:\/\/\s*)?"paths":\s*\{(?:[^{}]|\{[^}]*\})*\}/;if(!G.test(B))J=B.replace(/"compilerOptions":\s*{/,`"compilerOptions": {
|
|
3
|
+
"paths": ${JSON.stringify(Z.paths)},`);else J=B.replace(G,`"paths": ${JSON.stringify(Z.paths)}`);let M=new D3,b=await i0(J,"json");return M.createSourceFile(Z.configFileAbsolutePath,b,{overwrite:!0}),await M.save(),q}return q||null}function z3(z){let Q=N0.sync(["vite.config.*"],{cwd:z,absolute:!0,onlyFiles:!0,ignore:P})?.[0];if(!Q)return!1;try{let Y=L0.readFileSync(Q,"utf-8");return _3(Y)}catch{return!1}}function _3(z){let Q=z.replace(/\/\/.*$/gm,"").replace(/\/\*[\s\S]*?\*\//g,"");if(!["tailwindcss","@tailwindcss/vite","tailwind("].some((B)=>Q.includes(B)))return!1;return["plugins:","postcss:","css:"].some((B)=>Q.includes(B))}function S(){if("bun/1.2.20 npm/? node/v24.3.0 darwin arm64".startsWith("yarn"))return"yarn";if("bun/1.2.20 npm/? node/v24.3.0 darwin arm64".startsWith("pnpm"))return"pnpm";if("bun/1.2.20 npm/? node/v24.3.0 darwin arm64".startsWith("bun"))return"bun";return"npm"}function Y0(){switch(S()){case"yarn":return"yarn";case"pnpm":return"pnpx";case"bun":return"bunx";default:return"npx"}}function Q3(){switch(S()){case"yarn":return"yarn dev";case"pnpm":return"pnpm dev";case"bun":return"bun dev";default:return"npm run dev"}}function b0(z){return z.replace(/^[ \t]*\/\/\s*(TODO:|collapse-(start|end)).*\r?\n?|[ \t]*{\s*\/\*\s*(TODO:|collapse-(start|end)).*?\*\/\s*}\r?\n?/gm,"")}var S3=F.join(T3.homedir(),".untitledui"),i=F.join(S3,"config.json"),X={components:[],path:"",type:void 0,license:""};if(x.existsSync(i)){let z=JSON.parse(x.readFileSync(i,"utf-8"));X.license=z.license}var Z0=(z)=>{if(z.aborted)process.stdout.write("\x1B[?25h"),process.stdout.write(`
|
|
4
|
+
`),process.exit(1)},Y3=new E3().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.").option("-t, --type <base|marketing|shared-assets|application|foundations>","the type of the component to add.").action(async(z,Q)=>{if(z)X.components=z;if(Q)X.all=Q.all,X.dir=Q.dir,X.path=Q.path,X.overwrite=Q.overwrite,X.license=Q.license||X.license;try{await D0(X)}catch(Y){console.error(N.red(Y))}});async function D0(z){if(z)X={...X,...z};let Q=X0().start(),Y=F.posix.join(process.cwd(),X.dir||"");if(!x.existsSync(F.resolve(Y,"package.json")))Q.warn("This command should be run in a project directory."),process.exit(1);let q=await s(Y);if(X.license){if(!await J0(X.license))Q.fail("Invalid license key"),process.exit(1);if(!x.existsSync(i)){let L=F.dirname(i);x.mkdirSync(L,{recursive:!0}),x.writeFileSync(i,JSON.stringify({license:X.license},null,2))}if(JSON.parse(x.readFileSync(i,"utf-8")).license!==X.license)x.writeFileSync(i,JSON.stringify({license:X.license},null,2),"utf-8")}if(Q.stop(),!q?.tailwind.brandColor)console.log(N.red("The project does not seem to be configured with Untitled UI Tailwind. Please follow the setup instructions in the documentation: https://www.untitledui.com/react/docs or run init command.")),process.exit(1);let B=[];if(X.components.length){let W=await V0(X.type,X.components,X.license);if(W&&W.pro&&W.pro.length>0){if(console.log(),W.pro.length===1){let $=W.pro[0]?.split("/")[1]||W.pro[0];console.log(N.yellow(`\uD83D\uDD12 The ${N.cyan($)} component requires PRO access.`))}else console.log(N.yellow("\uD83D\uDD12 The following components require PRO access:")),W.pro.forEach(($)=>{let L=$?.split("/")[1]||$;console.log(` • ${N.cyan(L)}`)});console.log(),console.log("To access PRO components:"),console.log(` ${N.green("→")} If you've already purchased: ${N.cyan(`${Y0()} untitledui@latest login`)}`),console.log(` ${N.green("→")} To purchase PRO components: ${N.cyan("https://www.untitledui.com/buy/react")}`),console.log(),process.exit(1)}if(!W?.components.length)console.log("No components found"),process.exit(1);B.push(...W.components)}if(!X?.type&&!X?.components.length){let W=await r0(X.license);if(!W)console.log("No component types found"),process.exit(1);let $=await r({type:"select",name:"type",onState:Z0,message:`What type of ${N.cyan("component")} are you adding?`,choices:W?.types.map((L)=>({title:L,value:L}))});X.type=$.type}if(!X?.path){let W=await r({type:"text",name:"path",onState:Z0,message:`Where would you like to add the ${N.cyan("components")}?`,initial:"components"});X.path=W.path}if(q&&!Object.keys(q?.aliases).length){let W=/^[^*"]+\/\*\s*$/,$=await r({type:"text",name:"aliasPrefix",onState:Z0,initial:"@/*",message:`What is the ${N.cyan("import alias")} for your project?`,validate:(L)=>W.test(L)?!0:"Import alias must follow the pattern <prefix>/*"});q.aliases=await e0(Y,q?.isSrcDir,$?.aliasPrefix)}if(!X?.components.length){let W=await a0(X?.type,X.license);if(!W)console.log("No components found"),process.exit(1);let $=await r({type:"multiselect",name:"components",onState:Z0,message:`Which ${N.cyan("components")} would you like to add?`,choices:W?.components?.map((j)=>({title:j?.name+(j?.count?` (${j?.count} variants)`:"")||"example",value:j||"example",selected:X.components.includes(j.name)})),instructions:!1,hint:"- Space to select. Return to submit"});if(!$.components||!$.components.length)console.log("No option selected. Exiting..."),process.exit(1);let L=$.components.filter((j)=>j?.type==="file").map((j)=>j.name),R=$.components.filter((j)=>j?.type==="dir").map((j)=>j.name),E=[];if(R.length){let j=await s0(X?.type,X.license,R);if(j&&j.components.length)for(let O of j.components){let[A,T]=Object.entries(O)[0]||[],k=await r({type:"select",name:"component",onState:Z0,message:`Which ${N.cyan("variant")} from ${N.cyan(A)} would you like to add?`,choices:T?.map((C)=>({title:C?.name.replace(/-modal/g,"")||"example",value:C?.name||"example",selected:X.components.includes(C.name)})),instructions:!1,hint:"- Space to select. Return to submit"});if(!k.component)console.log("No variant selected for "+N.cyan(A));E.push(A+"/"+k.component)}else console.log("No variants found")}X.components=[...E,...L]}if(!X.components?.length)Q.warn("No components selected. Exiting."),process.exit(1);let J=Q0(Y),G=new Set,K=new Set,M=new Set,b=new w3({tsConfigFilePath:J?.tsConfig});if(Q.start(),X.type&&X.components.length){let W=await V0(X.type,X.components,X.license);if(!W?.components.length)console.log("No components found"),process.exit(1);B.push(...W.components)}let H=new Set;if(B.forEach((W)=>{W?.components?.forEach(($)=>{H.add({name:$.name,path:$.path})})}),Q.stop(),H.size){let W=Array.from(H).filter(($)=>!x.existsSync(F.posix.join(Y,`${q?.isSrcDir?"src":""}`,$?.path?.replace(/components\//,X.path+"/"))));if(W?.length){let $=await r({type:"multiselect",name:"baseComponents",onState:Z0,message:"Select which base components you want to add",choices:W.map((L)=>({title:L?.name,value:L?.name,selected:!0})),instructions:!1,hint:"- Space to select. Return to submit"});if(X.baseComponents=$.baseComponents,!W.length&&!$.baseComponents?.length)Q.warn("No components selected")}}if(Q.start(),X?.baseComponents?.length){let W=await V0("",X.baseComponents,X.license);if(!W||!W?.components.length)console.log("No base components found");else B.push(...W.components)}if(Q.stop(),B.forEach((W)=>{let $=X0(`Adding ${W.name}...`).start(),L=W.files;W?.dependencies?.forEach((R)=>K.add(R)),W?.devDependencies?.forEach((R)=>M.add(R));try{if(L?.forEach(async({path:R,code:E})=>{let j=F.posix.join(Y,`${q?.isSrcDir?"src":""}`,R.replace(/components\//,X.path+"/")),O=q?.framework==="vite"?E.replace(`"use client";
|
|
4
5
|
|
|
5
|
-
`,""):
|
|
6
|
-
Failed to add the component ${N.red(
|
|
7
|
-
Following files already exist in the directory.`),
|
|
6
|
+
`,""):E,A=b0(O),T=F.dirname(j);if(x.existsSync(j)&&!X.overwrite){if(x.readFileSync(j,"utf-8")!==A)G.add({code:A,path:j})}else{x.mkdirSync(T,{recursive:!0}),x.writeFileSync(j,A);let k=b.addSourceFileAtPath(F.resolve(j));k.getImportDeclarations().forEach((C)=>{let f=C.getModuleSpecifierValue();C.setModuleSpecifier(W0(f,X.path,q?.aliases))}),await k.save()}}),G.size)$.warn(`Some files of ${N.yellow(W.name)} already exist`);else $.succeed(`${N.green(W.name)} is added successfully`)}catch(R){$.fail(`
|
|
7
|
+
Failed to add the component ${N.red(W.name)}`),console.error(N.red(R)),process.exit(1)}}),G.size&&!X?.overwrite)if(console.log(`
|
|
8
|
+
Following files already exist in the directory.`),G.forEach(($)=>{console.log(N.green(`- ${F.relative(Y,$.path)}`))}),(await r({type:"confirm",name:"overwrite",message:"Do you want to overwrite the existing files?",initial:!0})).overwrite){let $=X0("Overwriting files").start();G.forEach((L)=>{let R=b.addSourceFileAtPath(F.resolve(L.path));R.replaceWithText(L.code),R.getImportDeclarations().forEach((E)=>{let j=E.getModuleSpecifierValue();E.setModuleSpecifier(W0(j,X.path,q?.aliases))}),R.saveSync()}),$.succeed("Files are overwritten")}else console.log(`Use ${N.cyan("--overwrite")} or ${N.cyan("-o")} to overwrite existing files, or refer to the documentation ${N.cyan("https://www.untitled.com/docs")} for manual installation. The rest of the files are added.`);let V=S();if(K?.size){let W=X0("Installing component dependencies").start();await W3(()=>M0(V,[V==="npm"?"install":"add",...K],{cwd:Y}).catch(async($)=>{if($.message.includes("peer"))W.warn("Component dependencies conflict detected. Retrying with --legacy-peer-deps..."),W.start("Installing component dependencies with --legacy-peer-deps flag"),await M0(V,[V==="npm"?"install":"add",...K,"--legacy-peer-deps"],{cwd:Y})}),{retries:1}),W.succeed("Component dependencies are installed")}if(M?.size){let W=X0("Installing component devDependencies").start();await W3(()=>M0(V,[V==="npm"?"install":"add","-D",...M],{cwd:Y}).catch(async($)=>{if($.message.includes("peer"))W.warn("Component devDependencies conflict detected. Retrying with --legacy-peer-deps..."),W.start("Installing component devDependencies with --legacy-peer-deps flag"),await M0(V,[V==="npm"?"install":"add","-D",...M,"--legacy-peer-deps"],{cwd:Y})}),{retries:1}),W.succeed("Component devDependencies are installed")}if(X.message)console.log(X.message);process.exit(0)}import T0 from"chalk";import{Command as C3}from"commander";import*as d from"fs";import P3 from"http";import O3 from"open";import g3 from"ora";import h3 from"os";import*as S0 from"path";import{URL as d3}from"url";import*as H0 from"fs";import*as n from"path";import{fileURLToPath as x3}from"url";var F3=x3(import.meta.url),_0=n.dirname(F3);function k3(){let z=[n.join(_0,"..","templates","auth-template.html"),n.join(_0,"templates","auth-template.html"),n.join(process.cwd(),"node_modules","untitledui","templates","auth-template.html"),n.join(_0,"..","..","templates","auth-template.html")];for(let Q of z)if(H0.existsSync(Q))return Q;throw new Error("Auth template file not found. Please ensure the CLI package is properly installed.")}function Z3(){try{let z=k3();return H0.readFileSync(z,"utf-8")}catch(z){return console.warn("Warning: Using fallback auth template. Some styling may be missing."),`<!doctype html>
|
|
8
9
|
<html lang="en">
|
|
9
10
|
<head>
|
|
10
11
|
<meta charset="UTF-8" />
|
|
@@ -50,31 +51,31 @@ Following files already exist in the directory.`),H.forEach((Z)=>{console.log(N.
|
|
|
50
51
|
{{AUTO_CLOSE_SCRIPT}}
|
|
51
52
|
</div>
|
|
52
53
|
</body>
|
|
53
|
-
</html>`}}function
|
|
54
|
-
✨ You can now access PRO components with the CLI!`)),process.exit(0)}catch(Q){
|
|
55
|
-
Failed to open browser automatically: ${
|
|
56
|
-
`))}),
|
|
57
|
-
`),process.exit(1)},
|
|
58
|
-
Creating a new project in ${
|
|
54
|
+
</html>`}}function $3(){return Z3().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 v0(z){return Z3().replace("{{TITLE}}","Authentication failed").replace("{{HEADING}}","Authentication failed").replace("{{DESCRIPTION}}",z).replace("{{AUTO_CLOSE_SCRIPT}}","")}var w0=S0.join(h3.homedir(),".untitledui"),E0=S0.join(w0,"config.json"),q3=new C3().name("login").description("authenticate with Untitled UI to access PRO components").action(async()=>{let z=g3("Starting authentication...").start();try{await f3(z),z.succeed("Authentication completed successfully!"),console.log(T0.green(`
|
|
55
|
+
✨ You can now access PRO components with the CLI!`)),process.exit(0)}catch(Q){z.fail(`Authentication failed: ${Q instanceof Error?Q.message:Q}`),process.exit(1)}});async function f3(z){return new Promise((Q,Y)=>{let Z=P3.createServer((q,B)=>{let J=new d3(q.url,"http://localhost");if(J.pathname==="/callback"){let G=J.searchParams.get("apiKey"),K=J.searchParams.get("error");if(K){B.writeHead(400,{"Content-Type":"text/html"}),B.end(v0(decodeURIComponent(K))),Z.close(),Y(new Error(decodeURIComponent(K)));return}if(!G){B.writeHead(400,{"Content-Type":"text/html"}),B.end(v0("No Access Token received")),Z.close(),Y(new Error("No Access Token received"));return}try{m3(G),B.writeHead(200,{"Content-Type":"text/html"}),B.end($3()),Z.close(),Q()}catch(M){B.writeHead(500,{"Content-Type":"text/html"}),B.end(v0("Failed to save authentication data")),Z.close(),Y(M)}}else B.writeHead(404),B.end("Not found")});Z.listen(0,"localhost",()=>{let J=`https://www.untitledui.com/react/api/cli-auth?port=${Z.address().port}`;z.text="Opening browser for authentication...",O3(J).catch((G)=>{console.log(T0.yellow(`
|
|
56
|
+
Failed to open browser automatically: ${G.message}`)),console.log(T0.cyan(`Please manually open: ${J}
|
|
57
|
+
`))}),z.text="Waiting for authentication in browser..."}),setTimeout(()=>{Z.close(),Y(new Error("Authentication timeout. Please try again."))},300000)})}function m3(z){if(!d.existsSync(w0))d.mkdirSync(w0,{recursive:!0});let Q={};if(d.existsSync(E0))try{Q=JSON.parse(d.readFileSync(E0,"utf-8"))}catch{Q={}}Q.license=z,d.writeFileSync(E0,JSON.stringify(Q,null,2),"utf-8")}import h0 from"async-retry";import v from"chalk";import{Command as p3}from"commander";import{execa as y0}from"execa";import*as w from"fs";import K0 from"ora";import t3 from"os";import*as y from"path";import o from"prompts";import{Project as o3}from"ts-morph";import l3 from"node-fetch";async function G0(z,Q){try{let Z=await l3("https://www.untitledui.com/react/api/components/example",{method:"POST",headers:{"Content-Type":"application/json",Accept:"application/json"},body:JSON.stringify({example:z,key:Q})});if(!Z.ok){if(Z.status===401||Z.status===403)return{type:"error",status:Z.status,message:"PRO access required"};return console.error(`API error: ${Z.status} - ${Z.statusText}`),null}return await Z.json()}catch(Z){return console.error(Z?.message||"Error fetching example data."),null}}import U0 from"async-retry";import D from"chalk";import{Command as c3}from"commander";import{execa as p}from"execa";import P0 from"fast-glob";import _ from"fs";import $0 from"ora";import a3 from"os";import*as I from"path";import I0 from"prompts";import{Project as s3}from"ts-morph";import{fileURLToPath as r3}from"url";import*as j0 from"fs";import*as B3 from"path";function x0(z,Q){let Y=B3.join(z,"package.json");if(!j0.existsSync(Y))return Q;let Z=JSON.parse(j0.readFileSync(Y,"utf-8")),q={...Z.dependencies,...Z.devDependencies},B=[];for(let J of Q){let G=q[J];if(!G){B.push(J);continue}if(J==="tailwindcss"){let K=G.match(/\d+/);if((K?parseInt(K[0],10):0)<4)B.push(J)}}return B}import F0 from"chalk";import*as c from"fs";import*as u0 from"path";function k0(z){if(!c.existsSync(u0.resolve(z)))console.log(F0.red(`Error: CSS file not found at ${z}`)),process.exit(1);let Q=c.readFileSync(u0.resolve(z),"utf-8"),Y=/(--color-[a-zA-Z-]+-\d{1,3}):\s*(rgb\([^)]+\))/g,Z={},q;while((q=Y.exec(Q))!==null)if(q[1]&&q[2])Z[q[1]]=q[2];return Z}function C0(z,Q,Y){let Z=u0.resolve(Y);if(!c.existsSync(Z)){console.log(F0.red(`Error: CSS file not found at ${Z}`));return}let q=c.readFileSync(Z,"utf-8"),B=k0(Y),J={},G={};for(let[M,b]of Object.entries(B))if(M.startsWith(`--color-${z}-`)){let H=M.replace(`--color-${z}-`,"");J[H]=M}else if(M.startsWith(`--color-${Q}-`)){let H=M.replace(`--color-${Q}-`,"");G[H]=b}let K=!1;for(let[M,b]of Object.entries(J))if(G[M]){let H=G[M],V=new RegExp(`(${b}):\\s*rgb\\([^)]*\\);?`,"g");if(V.test(q))q=q.replace(V,`$1: ${H};`),K=!0;else console.log(F0.yellow(`No match found for ${b}`))}if(K)c.writeFileSync(Z,q,"utf-8")}var i3=r3(import.meta.url),X3=I.dirname(i3),n3=I.join(a3.homedir(),".untitledui"),t=I.join(n3,"config.json"),K3="vite",J3="nextjs",U3={[J3]:"Next.js",[K3]:"Vite"},g="",u={color:"",template:"",framework:void 0};if(_.existsSync(t)){let z=JSON.parse(_.readFileSync(t,"utf-8"));u.license=z.license}var O0=(z)=>{if(z.aborted)process.stdout.write("\x1B[?25h"),process.stdout.write(`
|
|
58
|
+
`),process.exit(1)},V3=new c3().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("--nextjs","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.").action(async(z,Q)=>{if(z)g=z;if(Q){if(u.color=Q.color,u.template=Q.template,u.overwrite=Q.overwrite,u.colorsList=Q.colorsList,u.license=Q.license||u.license,u.vite=Q.vite,u.nextjs=Q.nextjs,Q.vite)u.framework=K3;if(Q.nextjs)u.framework=J3}try{await g0(Q),process.exit(0)}catch(Y){console.error(D.red(Y)),process.exit(1)}});async function g0(z,Q=null){let Y=process.cwd(),Z=_.existsSync(I.resolve(Y,"package.json")),q=I.resolve(I.join(X3,"../config/styles","theme.css")),B=k0(q??""),J=Array.from(new Set(Object.keys(B).map((b)=>b?.split("--color-")?.[1]?.replace(/-\d{1,3}/,"")))),G=$0().start(),K=await s(Y);if(u.license){if(!_.existsSync(t)){let H=I.dirname(t);_.mkdirSync(H,{recursive:!0}),_.writeFileSync(t,JSON.stringify({license:u.license},null,2))}if(JSON.parse(_.readFileSync(t,"utf-8")).license!==u.license)_.writeFileSync(t,JSON.stringify({license:u.license},null,2))}if(!Z){if(G.stop(),!g){let H=await I0({onState:O0,type:"text",name:"path",message:"What is your project named?",initial:"untitled-ui"});if(typeof H.path==="string")g=H.path.trim()}if(Q)Q.projectPath=g;let b=_.existsSync(I.resolve(I.posix.join(Y,g,"package.json")));if(_.existsSync(I.resolve(I.posix.join(Y,g)))&&b)G.fail(D.red("Directory already exists!")),process.exit(1);if(u.vite&&u.nextjs||!u.framework){let H=await I0({type:"select",name:"framework",onState:O0,message:`Which ${D.cyan("framework")} would you like to use?`,choices:Object.entries(U3).map(([V,W])=>({title:W,value:V}))});u.framework=H.framework}G.succeed("Framework is selected: "+D.green(U3[u.framework]))}else if(K?.framework==="other")G.fail("Unsupported project framework"),console.log(`Please refer to the documentation ${D.cyan("https://www.untitled.com/docs")} for supported frameworks or proceed with manual installation.`),process.exit(1);else if(K?.framework.startsWith("next")||K?.framework.startsWith("vite"))if(!Q&&!K.tailwind.brandColor)G.succeed(D.yellow(`Detected ${t0[K.framework]} project, proceeding with the setup...`));else G.stop();if(u.colorsList||!u.color&&!K?.tailwind.brandColor){let b=await I0({type:"select",name:"color",onState:O0,initial:z.color??"",message:`Which ${D.cyan("color")} would you like to use as the ${D.cyanBright("brand")} color?`,choices:J.map((H)=>({title:H,value:H}))});if(u.color=b.color,u.colorsList&&K)K.tailwind.brandColor=b.color}let M=I.posix.join(Y,g||"");if(g&&!Z){let b=I.resolve(g);console.log(`
|
|
59
|
+
Creating a new project in ${D.blue(g)}`);let H=$0("Downloading and extracting the repository...").start();try{_.mkdirSync(b,{recursive:!0}),await U0(()=>l0(b,{template:u.framework}),{retries:2}),H.succeed("Files are downloaded and extracted successfully!");let V=$0({text:"Installing dependencies..."}).start(),W=P0.sync(["**/styles/theme.css"],{cwd:b,absolute:!0,onlyFiles:!0})[0];if(C0("brand",u.color||"",W??""),await U0(()=>p(S(),["install"],{cwd:M}).catch(async($)=>{if($.message.includes("peer"))V.warn("Dependency conflict detected. Retrying with --legacy-peer-deps..."),V.start("Installing dependencies with --legacy-peer-deps flag"),await p(S(),["install","--legacy-peer-deps"],{cwd:M})}),{retries:1}),await U0(()=>p("git",["init"],{cwd:M}),{retries:1}),V.succeed("Dependencies are installed"),!Q)console.log(`
|
|
59
60
|
Your project is ready, to get started run the following commands:
|
|
60
61
|
|
|
61
|
-
cd ${
|
|
62
|
-
${
|
|
63
|
-
Failed to download and extract the repository`)),
|
|
64
|
-
`);_.rmdirSync(
|
|
65
|
-
`),
|
|
62
|
+
cd ${D.cyan(g)}
|
|
63
|
+
${D.cyan(Q3())}`)}catch(V){if(H.fail(D.red(`
|
|
64
|
+
Failed to download and extract the repository`)),V instanceof Error)console.error(V.message);else console.error(`
|
|
65
|
+
`);_.rmdirSync(b,{recursive:!0}),process.exit(1)}}else{let b=$0(),H=new Set,V=K?.examples||"",W=Q0(Y,V),$=I.resolve(I.join(X3,"../config")),L=P0.sync(["**"],{cwd:$,onlyFiles:!0,ignore:P}),R=x0(Y,["tailwindcss","tailwindcss-animate","@tailwindcss/typography","tailwindcss-react-aria-components"]),E=x0(Y,["@tailwindcss/postcss","postcss"]);if(!Q&&!K?.tailwind.brandColor)b.start("Copying files to the project directory");if(L.forEach((A)=>{let T=A.includes("postcss.config"),k=I.posix.join(I.posix.join($),A),C=I.posix.join(Y,T?A:`${K?.isSrcDir?"src":""}/${A}`);if(_.existsSync(C)){if(u?.overwrite)_.copyFileSync(k,C);else{let f=_.readFileSync(C,"utf-8"),B0=_.readFileSync(k,"utf-8");if(f!==B0){if(A.endsWith("theme.css")&&K?.tailwind.brandColor)return;H.add({targetFile:C,sourceFile:k})}}return}_.mkdirSync(I.dirname(C),{recursive:!0}),_.writeFileSync(C,""),_.copyFileSync(k,C)}),b.stop(),H.size&&!u?.overwrite)if(console.log(`
|
|
66
|
+
`),b.fail("Following files already exist in the directory."),H.forEach((T)=>{console.log(`- ${D.green(T.targetFile)}`)}),(await I0({type:"confirm",name:"overwrite",message:"Do you want to overwrite the existing files?",initial:!0})).overwrite){let T=$0("Overwriting files").start();H.forEach((k)=>{_.copyFileSync(k.sourceFile,k.targetFile)}),T.succeed("Files are overwritten")}else console.log(`Use ${D.cyan("--overwrite")} or ${D.cyan("-o")} to overwrite existing files, or refer to the documentation ${D.cyan("https://www.untitled.com/docs")} for manual installation. The rest of the files are added.`);if(W?.tailwindFile)console.log(`
|
|
66
67
|
Tailwind config file exists in the project directory. You can add it to your globals.css as follows:`),console.log(`
|
|
67
|
-
${
|
|
68
|
-
`);if(
|
|
69
|
-
Tailwind CSS is not configured in your Vite project. Please refer to the documentation ${
|
|
70
|
-
`)}let
|
|
71
|
-
`),
|
|
72
|
-
Ensure that the ${
|
|
73
|
-
Your project is ready, you can now start adding components.`)}}var
|
|
74
|
-
`),process.exit(1)},
|
|
68
|
+
${D.cyan(`@config "../${K?.isSrcDir?"../":""}${I.relative(Y,W.tailwindFile)}";`)}
|
|
69
|
+
`);if(K?.framework==="vite"){if(!z3(Y))console.log(`
|
|
70
|
+
Tailwind CSS is not configured in your Vite project. Please refer to the documentation ${D.cyan("https://www.untitled.com/react/integrations/vite")} for manual installation.
|
|
71
|
+
`)}let j=W?.layoutFile||W?.appFile||K?.framework==="vite"&&W?.mainFile||"";if(!j)console.log(`Import following file to your main file:
|
|
72
|
+
`),console.log(D.cyan("styles/globals.css"));else{let T=new s3({tsConfigFilePath:I.resolve(W?.tsConfig||"")}).addSourceFileAtPath(I.resolve(j)),k="styles/globals.css";if(!T.getImportDeclarations().some((f)=>{let B0=f.getModuleSpecifierValue();return/(?:styles\/)?globals\.css$/.test(B0)})){let f=K?.aliases?.styles||K?.aliases?.src||"",B0=K?.aliases?.styles?`${f}globals.css`:`${f}styles/globals.css`;T.addImportDeclaration({moduleSpecifier:B0})}T.saveSync()}let O=P0.sync(["**/styles/theme.css"],{cwd:Y,absolute:!0,onlyFiles:!0,ignore:P});if(!O?.length)return b.fail(`Failed to copy ${D.cyan("theme.css")} file.
|
|
73
|
+
Ensure that the ${D.cyan("theme.css")} file exists in the project directory under ${D.yellow("styles/")} folder.`);if((u.color||!K?.tailwind.brandColor)&&C0("brand",u.color||"brand",O[0]??""),R.length||E.length){let A=$0().start("Installing dependencies");R.length&&await U0(()=>p(S(),[S()==="npm"?"install":"add",...R],{cwd:M}).catch(async(T)=>{if(T.message.includes("peer"))A.warn("Dependency conflict detected. Retrying with --legacy-peer-deps..."),A.start("Installing dependencies with --legacy-peer-deps flag"),await p(S(),[S()==="npm"?"install":"add",...R,"--legacy-peer-deps"],{cwd:M})}),{retries:1}),E.length&&await U0(()=>p(S(),[S()==="npm"?"install":"add","-D",...E],{cwd:M}).catch(async(T)=>{if(T.message.includes("peer"))A.warn("DevDependency conflict detected. Retrying with --legacy-peer-deps..."),A.start("Installing dependencies with --legacy-peer-deps flag"),await p(S(),[S()==="npm"?"install":"add","-D",...E,"--legacy-peer-deps"],{cwd:M})}),{retries:1}),A.succeed("Dependencies are installed")}if(!Q&&!K?.tailwind.brandColor)b.succeed(D.green("Project setup is completed!"));if(Q&&Z){G.stop(),b.stop();return}else console.log(`
|
|
74
|
+
Your project is ready, you can now start adding components.`)}}var e3=y.join(t3.homedir(),".untitledui"),e=y.join(e3,"config.json"),U={path:"",example:"",license:"",components:[]},d0={};if(w.existsSync(e)){let z=JSON.parse(w.readFileSync(e,"utf-8"));U.license=z.license}var q0=(z)=>{if(z.aborted)process.stdout.write("\x1B[?25h"),process.stdout.write(`
|
|
75
|
+
`),process.exit(1)},L3=new p3().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.").action(async(z,Q)=>{if(z)U.example=z;if(Q)U.path=Q.path,U.overwrite=Q.overwrite,U.examplePath=Q.examplePath,U.license=Q.license||U.license;try{await g0(Q,d0),await z1()}catch(Y){console.error(v.red(Y))}});async function z1(){let z=K0().start(),Q=y.posix.join(process.cwd(),d0?.projectPath||"");if(!w.existsSync(y.posix.join(y.resolve(Q,"package.json"))))z.warn("This command should be run in a project directory."),process.exit(1);let Z=await s(Q);if(U.license){if(!await J0(U.license))z.fail("Invalid license key"),process.exit(1);if(!w.existsSync(e)){let L=y.dirname(e);w.mkdirSync(L,{recursive:!0}),w.writeFileSync(e,JSON.stringify({license:U.license},null,2))}if(JSON.parse(w.readFileSync(e,"utf-8")).license!==U.license)w.writeFileSync(e,JSON.stringify({license:U.license},null,2),"utf-8")}if(z.stop(),!U.example){let W=await o({type:"select",name:"example",onState:q0,message:"Select which type of example you want to add",choices:[{title:"Application",value:"application"},{title:"Marketing",value:"marketing"}]});U.example=W.example}let q=null;if(U.example){let W=await G0(U.example,U.license);if(W?.type==="error"&&(W.status===401||W.status===403))console.log(),console.log(v.yellow(`\uD83D\uDD12 The ${v.cyan(U.example)} example requires PRO access.`)),console.log(),console.log("To access PRO examples:"),console.log(` ${v.green("→")} If you've already purchased: ${v.cyan(`${Y0()} untitledui@latest login`)}`),console.log(` ${v.green("→")} To purchase PRO examples: ${v.cyan("https://www.untitledui.com/buy/react")}`),console.log(),process.exit(1);if(W?.type==="directory"){let $=await o({type:"select",name:"example",onState:q0,message:`Select a folder or file in "${U.example}"`,choices:W.results.map((L)=>({title:L,value:L}))});if(!$.example)return;if(U.example=$.example,W=await G0($.example,U.license),W?.type==="error"&&(W.status===401||W.status===403))console.log(),console.log(v.yellow(`\uD83D\uDD12 The ${v.cyan($.example)} example requires PRO access.`)),console.log(),console.log("To access PRO examples:"),console.log(` ${v.green("→")} If you've already purchased: ${v.cyan(`${Y0()} untitledui@latest login`)}`),console.log(` ${v.green("→")} To purchase PRO examples: ${v.cyan("https://www.untitledui.com/buy/react")}`),console.log(),process.exit(1)}if(W?.type==="json-files"){let $=await o({type:"select",name:"example",onState:q0,message:`Select which example you want to add from "${U.example}"`,choices:W.results.map((L)=>({title:L,value:`${U.example}/${L}`}))});if(!$.example)return;if(U.example=$.example,W=await G0($.example,U.license),W?.type==="error"&&(W.status===401||W.status===403))console.log(),console.log(v.yellow(`\uD83D\uDD12 The ${v.cyan($.example)} example requires PRO access.`)),console.log(),console.log("To access PRO examples:"),console.log(` ${v.green("→")} If you've already purchased: ${v.cyan(`${Y0()} untitledui@latest login`)}`),console.log(` ${v.green("→")} To purchase PRO examples: ${v.cyan("https://www.untitledui.com/buy/react")}`),console.log(),process.exit(1)}if(W?.type==="json-file")q=W.content}if(!q)z.fail("No example found"),process.exit(1);let B=Z?.examples||"";if(B){let W=await s(y.posix.join(Q,B));if(W)Z={...W,aliases:Z?.aliases||{}}}if(!U?.examplePath){let W=Z?.isAppDir?"app":"pages",$=Z?.isSrcDir?y.posix.join("src",W):W,L=await o({type:"text",name:"examplePath",onState:q0,message:`Where would you like to add the ${v.cyan(U?.example)} example?`,initial:$});U.examplePath=`${B}/${L.examplePath}`}else if(!w.existsSync(y.posix.join(Q,U.examplePath)))w.mkdirSync(y.posix.join(Q,U.examplePath),{recursive:!0}),console.log(v.green(`Created directory ${U.examplePath}`));if(!U?.path){let W=await o({type:"text",name:"path",onState:q0,message:`Where would you like to add the ${v.cyan("components")}?`,initial:"components"});U.path=W.path}let J=q.components.filter((W)=>!w.existsSync(y.posix.join(Q,`${Z?.isSrcDir?"src":""}`,W?.path?.replace(/components\//,U.path+"/"))));if(J?.length){let W=await o({type:"multiselect",name:"components",onState:q0,message:`Select which components you want to add from ${v.cyan(q.name)} example`,choices:J.map(($)=>({title:$?.name,value:$?.name,selected:!0})),instructions:!1,hint:"- Space to select. Return to submit"});if(U.components=W.components,!J.length&&!W.components?.length)z.warn("No components selected")}let G=Q0(Q),K=new Set,M=new o3({tsConfigFilePath:G?.tsConfig}),b=K0(`Adding ${U?.example}...`).start(),H="";try{if(q.files?.forEach(async({path:W,code:$})=>{let L=y.posix.join(Q,`${Z?.isSrcDir?"src":""}`,W.replace(/components\//,U.path+"/")),R=Z?.framework==="vite"?$.replace(`"use client";
|
|
75
76
|
|
|
76
|
-
`,"")
|
|
77
|
-
Failed to add the component ${
|
|
78
|
-
Following files already exist in the directory.`),
|
|
79
|
-
\uD83C\uDF89 Example ${
|
|
80
|
-
\uD83C\uDF89 Example ${
|
|
77
|
+
`,""):$,E=b0(R);if(W.includes("examples")){let O=y.basename(W);L=y.posix.join(Q,U?.examplePath??"",O),H=y.posix.join(U?.examplePath??"",O)}let j=y.dirname(L);if(w.existsSync(L)&&!U.overwrite){if(w.readFileSync(L,"utf-8")!==E)K.add({code:E,path:L})}else{w.mkdirSync(j,{recursive:!0}),w.writeFileSync(L,E);let O=M.addSourceFileAtPath(y.resolve(L));O.getImportDeclarations().forEach((A)=>{let T=A.getModuleSpecifierValue();A.setModuleSpecifier(W0(T,U.path,Z?.aliases))}),await O.save()}}),K.size)b.warn(`Some files of ${v.yellow(U?.example)} already exist`);else b.succeed(`${v.green(U?.example)} is added successfully`)}catch(W){b.fail(`
|
|
78
|
+
Failed to add the component ${v.red(U?.example)}`),console.error(v.red(W)),process.exit(1)}if(K.size&&!U?.overwrite)if(console.log(`
|
|
79
|
+
Following files already exist in the directory.`),K.forEach(($)=>{console.log(v.green(`- ${y.relative(Q,$.path)}`))}),(await o({type:"confirm",name:"overwrite",message:"Do you want to overwrite the existing files?",initial:!0})).overwrite){let $=K0("Overwriting files").start();K.forEach((L)=>{let R=M.addSourceFileAtPath(y.resolve(L.path));R.replaceWithText(L.code),R.getImportDeclarations().forEach((E)=>{let j=E.getModuleSpecifierValue();E.setModuleSpecifier(W0(j,U.path,Z?.aliases))}),R.saveSync()}),$.succeed("Files are overwritten")}else console.log(`Use ${v.cyan("--overwrite")} or ${v.cyan("-o")} to overwrite existing files, or refer to the documentation ${v.cyan("https://www.untitled.com/docs")} for manual installation. The rest of the files are added.`);let V=S();if(q?.dependencies?.length){let W=K0("Installing example dependencies").start();await h0(()=>y0(V,[V==="npm"?"install":"add",...q.dependencies],{cwd:Q}).catch(async($)=>{if($.message.includes("peer"))W.warn("Dependency conflict detected. Retrying with --legacy-peer-deps..."),W.start("Installing dependencies with --legacy-peer-deps flag"),await y0(V,[V==="npm"?"install":"add",...q.dependencies,"--legacy-peer-deps"],{cwd:Q})}),{retries:1}),W.succeed("Example dependencies are installed")}if(q?.devDependencies?.length){let W=K0("Installing example devDependencies").start();await h0(()=>y0(V,[V==="npm"?"install":"add","-D",...q.devDependencies],{cwd:Q}).catch(async($)=>{if($.message.includes("peer"))W.warn("DevDependency conflict detected. Retrying with --legacy-peer-deps..."),W.start("Installing devDependencies with --legacy-peer-deps flag"),await y0(V,[V==="npm"?"install":"add","-D",...q.devDependencies,"--legacy-peer-deps"],{cwd:Q})}),{retries:1}),W.succeed("Example devDependencies are installed")}if(U?.components?.length)await h0(()=>D0({components:U.components,dir:d0?.projectPath||"",path:U.path,message:`
|
|
80
|
+
\uD83C\uDF89 Example ${v.green(U.example)} has been added to ${v.green(H)}`}),{retries:1});console.log(`
|
|
81
|
+
\uD83C\uDF89 Example ${v.green(U.example)} has been added to ${v.green(H)}`),process.exit(0)}var f0={name:"untitledui",version:"0.1.45-beta.0",main:"dist/index.mjs",description:"The Untitled UI CLI tool helps you quickly scaffold projects with Untitled UI React and add components and page examples to your existing projects with an interactive interface in seconds.",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://www.untitledui.com/react/api","publish:npm":"bun run build && npm publish --access public",start:"node dist/index.mjs"},bugs:{url:"https://github.com/untitleduico/react/issues"},homepage:"https://github.com/untitleduico/react#readme",keywords:["untitledui","untitled-ui","untitledui","untitledui-cli","untitledui-react","untitledui-components","untitledui-examples","untitledui-vite","untitledui-nextjs","cli","tailwindcss","nextjs","react","components","examples","vite"],files:["dist","config","templates","README.md"],author:{name:"Untitled UI",url:"https://www.untitledui.com/react"},contributors:[{name:"Dilshod Turobov",url:"https://x.com/deebovv"},{name:"Jordan Hughes",url:"https://x.com/jordanphughes"}],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 Y1(){let z=new W1().name(f0.name).version(f0.version);z.addCommand(V3).addCommand(Y3).addCommand(L3).addCommand(q3),z.parse()}Y1();
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "untitledui",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.45",
|
|
4
4
|
"main": "dist/index.mjs",
|
|
5
5
|
"description": "The Untitled UI CLI tool helps you quickly scaffold projects with Untitled UI React and add components and page examples to your existing projects with an interactive interface in seconds.",
|
|
6
6
|
"type": "module",
|