lightning_ui_kit 0.1.1 → 0.1.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (87) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +4 -4
  3. data/app/assets/builds/{lightning_ui.css → lightning_ui_kit.css} +422 -100
  4. data/app/assets/builds/lightning_ui_kit.js +6 -0
  5. data/app/assets/builds/{lightning_ui.js.map → lightning_ui_kit.js.map} +4 -4
  6. data/app/components/{lightning_ui → lightning_ui_kit}/alert_component.rb +1 -1
  7. data/app/components/{lightning_ui → lightning_ui_kit}/avatar_component.rb +1 -1
  8. data/app/components/lightning_ui_kit/badge_component.rb +68 -0
  9. data/app/components/{lightning_ui → lightning_ui_kit}/banner_component.rb +2 -2
  10. data/app/components/{lightning_ui → lightning_ui_kit}/base_component.rb +2 -2
  11. data/app/components/{lightning_ui → lightning_ui_kit}/button_component.rb +1 -1
  12. data/app/components/{lightning_ui → lightning_ui_kit}/checkbox_component.html.erb +1 -1
  13. data/app/components/{lightning_ui → lightning_ui_kit}/checkbox_component.rb +1 -1
  14. data/app/components/{lightning_ui → lightning_ui_kit}/description_list/item_component.rb +1 -1
  15. data/app/components/lightning_ui_kit/description_list_component.rb +5 -0
  16. data/app/components/lightning_ui_kit/dropdown/item_component.rb +5 -0
  17. data/app/components/{lightning_ui → lightning_ui_kit}/dropdown_component.rb +1 -1
  18. data/app/components/lightning_ui_kit/dropzone_component.html.erb +82 -0
  19. data/app/components/lightning_ui_kit/dropzone_component.rb +61 -0
  20. data/app/components/lightning_ui_kit/errors.rb +34 -0
  21. data/app/components/lightning_ui_kit/file_input_component.html.erb +50 -0
  22. data/app/components/lightning_ui_kit/file_input_component.rb +62 -0
  23. data/app/components/{lightning_ui → lightning_ui_kit}/input_component.html.erb +21 -14
  24. data/app/components/{lightning_ui → lightning_ui_kit}/input_component.rb +18 -3
  25. data/app/components/{lightning_ui → lightning_ui_kit}/link_component.rb +1 -1
  26. data/app/components/{lightning_ui → lightning_ui_kit}/modal_component.rb +1 -1
  27. data/app/components/{lightning_ui → lightning_ui_kit}/pagination_component.rb +1 -1
  28. data/app/components/lightning_ui_kit/select_component.html.erb +40 -0
  29. data/app/components/lightning_ui_kit/select_component.rb +55 -0
  30. data/app/components/lightning_ui_kit/sidebar_component.rb +4 -0
  31. data/app/components/{lightning_ui → lightning_ui_kit}/skeleton_component.rb +1 -1
  32. data/app/components/lightning_ui_kit/spinner_component.rb +4 -0
  33. data/app/components/{lightning_ui → lightning_ui_kit}/switch_component.html.erb +8 -1
  34. data/app/components/{lightning_ui → lightning_ui_kit}/switch_component.rb +13 -2
  35. data/app/components/{lightning_ui → lightning_ui_kit}/table/action_component.rb +1 -1
  36. data/app/components/{lightning_ui → lightning_ui_kit}/table/column_component.rb +1 -1
  37. data/app/components/{lightning_ui → lightning_ui_kit}/table_component.rb +3 -3
  38. data/app/components/{lightning_ui → lightning_ui_kit}/text_component.rb +1 -1
  39. data/app/components/{lightning_ui → lightning_ui_kit}/textarea_component.html.erb +15 -8
  40. data/app/components/{lightning_ui → lightning_ui_kit}/textarea_component.rb +18 -3
  41. data/app/helpers/lightning_ui_kit/application_helper.rb +7 -0
  42. data/app/helpers/{lightning_ui → lightning_ui_kit}/heroicon_helper.rb +1 -1
  43. data/app/javascript/lightning_ui_kit/controllers/dropzone_controller.js +76 -0
  44. data/app/javascript/{lightning_ui → lightning_ui_kit}/index.js +5 -0
  45. data/config/locales/en.yml +3 -0
  46. data/lib/{lightning_ui → lightning_ui_kit}/engine.rb +5 -6
  47. data/lib/lightning_ui_kit/version.rb +3 -0
  48. data/lib/lightning_ui_kit.rb +6 -0
  49. metadata +78 -72
  50. data/app/assets/builds/lightning_ui.js +0 -6
  51. data/app/components/lightning_ui/badge_component.rb +0 -43
  52. data/app/components/lightning_ui/description_list_component.rb +0 -5
  53. data/app/components/lightning_ui/dropdown/item_component.rb +0 -5
  54. data/app/components/lightning_ui/select_component.html.erb +0 -20
  55. data/app/components/lightning_ui/select_component.rb +0 -25
  56. data/app/components/lightning_ui/sidebar_component.rb +0 -4
  57. data/app/components/lightning_ui/spinner_component.rb +0 -4
  58. data/app/helpers/lightning_ui/application_helper.rb +0 -7
  59. data/lib/lightning_ui/version.rb +0 -3
  60. data/lib/lightning_ui.rb +0 -6
  61. data/lib/tasks/lightning_ui_tasks.rake +0 -4
  62. /data/app/assets/stylesheets/{lightning_ui → lightning_ui_kit}/application.css +0 -0
  63. /data/app/components/{lightning_ui → lightning_ui_kit}/alert_component.html.erb +0 -0
  64. /data/app/components/{lightning_ui → lightning_ui_kit}/avatar_component.html.erb +0 -0
  65. /data/app/components/{lightning_ui → lightning_ui_kit}/badge_component.html.erb +0 -0
  66. /data/app/components/{lightning_ui → lightning_ui_kit}/banner_component.html.erb +0 -0
  67. /data/app/components/{lightning_ui → lightning_ui_kit}/button_component.html.erb +0 -0
  68. /data/app/components/{lightning_ui → lightning_ui_kit}/description_list/item_component.html.erb +0 -0
  69. /data/app/components/{lightning_ui → lightning_ui_kit}/description_list_component.html.erb +0 -0
  70. /data/app/components/{lightning_ui → lightning_ui_kit}/dropdown_component.html.erb +0 -0
  71. /data/app/components/{lightning_ui → lightning_ui_kit}/link_component.html.erb +0 -0
  72. /data/app/components/{lightning_ui → lightning_ui_kit}/modal_component.html.erb +0 -0
  73. /data/app/components/{lightning_ui → lightning_ui_kit}/pagination_component.html.erb +0 -0
  74. /data/app/components/{lightning_ui → lightning_ui_kit}/sidebar_component.html.erb +0 -0
  75. /data/app/components/{lightning_ui → lightning_ui_kit}/skeleton_component.html.erb +0 -0
  76. /data/app/components/{lightning_ui → lightning_ui_kit}/spinner_component.html.erb +0 -0
  77. /data/app/components/{lightning_ui → lightning_ui_kit}/table_component.html.erb +0 -0
  78. /data/app/components/{lightning_ui → lightning_ui_kit}/text_component.html.erb +0 -0
  79. /data/app/javascript/{lightning_ui → lightning_ui_kit}/controllers/accordion_controller.js +0 -0
  80. /data/app/javascript/{lightning_ui → lightning_ui_kit}/controllers/banner_controller.js +0 -0
  81. /data/app/javascript/{lightning_ui → lightning_ui_kit}/controllers/checkbox_controller.js +0 -0
  82. /data/app/javascript/{lightning_ui → lightning_ui_kit}/controllers/clipboard_controller.js +0 -0
  83. /data/app/javascript/{lightning_ui → lightning_ui_kit}/controllers/dropdown_controller.js +0 -0
  84. /data/app/javascript/{lightning_ui → lightning_ui_kit}/controllers/main_controller.js +0 -0
  85. /data/app/javascript/{lightning_ui → lightning_ui_kit}/controllers/modal_controller.js +0 -0
  86. /data/app/javascript/{lightning_ui → lightning_ui_kit}/controllers/reveal_controller.js +0 -0
  87. /data/app/javascript/{lightning_ui → lightning_ui_kit}/controllers/switch_controller.js +0 -0
@@ -515,6 +515,9 @@
515
515
  .pointer-events-none {
516
516
  pointer-events: none;
517
517
  }
518
+ .collapse {
519
+ visibility: collapse;
520
+ }
518
521
  .invisible {
519
522
  visibility: hidden;
520
523
  }
@@ -589,6 +592,18 @@
589
592
  max-width: 96rem;
590
593
  }
591
594
  }
595
+ .mx-4 {
596
+ margin-inline: calc(var(--spacing) * 4);
597
+ }
598
+ .mx-auto {
599
+ margin-inline: auto;
600
+ }
601
+ .my-4 {
602
+ margin-block: calc(var(--spacing) * 4);
603
+ }
604
+ .ms-2 {
605
+ margin-inline-start: calc(var(--spacing) * 2);
606
+ }
592
607
  .ms-2\.5 {
593
608
  margin-inline-start: calc(var(--spacing) * 2.5);
594
609
  }
@@ -601,15 +616,18 @@
601
616
  .mt-2 {
602
617
  margin-top: calc(var(--spacing) * 2);
603
618
  }
604
- .mt-6 {
605
- margin-top: calc(var(--spacing) * 6);
606
- }
607
619
  .mt-8 {
608
620
  margin-top: calc(var(--spacing) * 8);
609
621
  }
622
+ .mb-1 {
623
+ margin-bottom: calc(var(--spacing) * 1);
624
+ }
610
625
  .mb-2 {
611
626
  margin-bottom: calc(var(--spacing) * 2);
612
627
  }
628
+ .mb-3 {
629
+ margin-bottom: calc(var(--spacing) * 3);
630
+ }
613
631
  .mb-4 {
614
632
  margin-bottom: calc(var(--spacing) * 4);
615
633
  }
@@ -643,6 +661,9 @@
643
661
  .inline-grid {
644
662
  display: inline-grid;
645
663
  }
664
+ .list-item {
665
+ display: list-item;
666
+ }
646
667
  .table {
647
668
  display: table;
648
669
  }
@@ -692,6 +713,12 @@
692
713
  .h-6 {
693
714
  height: calc(var(--spacing) * 6);
694
715
  }
716
+ .h-10 {
717
+ height: calc(var(--spacing) * 10);
718
+ }
719
+ .h-full {
720
+ height: 100%;
721
+ }
695
722
  .min-h-full {
696
723
  min-height: 100%;
697
724
  }
@@ -707,6 +734,9 @@
707
734
  .w-5 {
708
735
  width: calc(var(--spacing) * 5);
709
736
  }
737
+ .w-6 {
738
+ width: calc(var(--spacing) * 6);
739
+ }
710
740
  .w-10 {
711
741
  width: calc(var(--spacing) * 10);
712
742
  }
@@ -719,6 +749,9 @@
719
749
  .w-\[2\.25rem\] {
720
750
  width: 2.25rem;
721
751
  }
752
+ .w-\[100\%\] {
753
+ width: 100%;
754
+ }
722
755
  .w-full {
723
756
  width: 100%;
724
757
  }
@@ -734,6 +767,12 @@
734
767
  .min-w-full {
735
768
  min-width: 100%;
736
769
  }
770
+ .flex-1 {
771
+ flex: 1;
772
+ }
773
+ .flex-shrink {
774
+ flex-shrink: 1;
775
+ }
737
776
  .shrink-0 {
738
777
  flex-shrink: 0;
739
778
  }
@@ -786,12 +825,6 @@
786
825
  .grid-cols-1 {
787
826
  grid-template-columns: repeat(1, minmax(0, 1fr));
788
827
  }
789
- .grid-cols-2 {
790
- grid-template-columns: repeat(2, minmax(0, 1fr));
791
- }
792
- .grid-cols-4 {
793
- grid-template-columns: repeat(4, minmax(0, 1fr));
794
- }
795
828
  .grid-cols-\[1\.125rem_1fr\] {
796
829
  grid-template-columns: 1.125rem 1fr;
797
830
  }
@@ -831,11 +864,17 @@
831
864
  .gap-1 {
832
865
  gap: calc(var(--spacing) * 1);
833
866
  }
867
+ .gap-2 {
868
+ gap: calc(var(--spacing) * 2);
869
+ }
870
+ .gap-2\.5 {
871
+ gap: calc(var(--spacing) * 2.5);
872
+ }
834
873
  .gap-3 {
835
874
  gap: calc(var(--spacing) * 3);
836
875
  }
837
- .gap-4 {
838
- gap: calc(var(--spacing) * 4);
876
+ .gap-x-1 {
877
+ column-gap: calc(var(--spacing) * 1);
839
878
  }
840
879
  .gap-x-1\.5 {
841
880
  column-gap: calc(var(--spacing) * 1.5);
@@ -849,6 +888,13 @@
849
888
  .gap-x-8 {
850
889
  column-gap: calc(var(--spacing) * 8);
851
890
  }
891
+ .space-y-2 {
892
+ :where(& > :not(:last-child)) {
893
+ --tw-space-y-reverse: 0;
894
+ margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
895
+ margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
896
+ }
897
+ }
852
898
  .space-y-2\.5 {
853
899
  :where(& > :not(:last-child)) {
854
900
  --tw-space-y-reverse: 0;
@@ -875,6 +921,12 @@
875
921
  .rounded-\(--avatar-radius\) {
876
922
  border-radius: var(--avatar-radius);
877
923
  }
924
+ .rounded-2xl {
925
+ border-radius: var(--radius-2xl);
926
+ }
927
+ .rounded-3xl {
928
+ border-radius: var(--radius-3xl);
929
+ }
878
930
  .rounded-\[0\.3125rem\] {
879
931
  border-radius: 0.3125rem;
880
932
  }
@@ -893,9 +945,6 @@
893
945
  .rounded-md {
894
946
  border-radius: var(--radius-md);
895
947
  }
896
- .rounded-xl {
897
- border-radius: var(--radius-xl);
898
- }
899
948
  .rounded-t-3xl {
900
949
  border-top-left-radius: var(--radius-3xl);
901
950
  border-top-right-radius: var(--radius-3xl);
@@ -916,8 +965,19 @@
916
965
  border-bottom-style: var(--tw-border-style);
917
966
  border-bottom-width: 1px;
918
967
  }
919
- .border-amber-400 {
920
- border-color: var(--color-amber-400);
968
+ .border-dashed {
969
+ --tw-border-style: dashed;
970
+ border-style: dashed;
971
+ }
972
+ .border-dotted {
973
+ --tw-border-style: dotted;
974
+ border-style: dotted;
975
+ }
976
+ .border-gray-300 {
977
+ border-color: var(--color-gray-300);
978
+ }
979
+ .border-green-600 {
980
+ border-color: var(--color-green-600);
921
981
  }
922
982
  .border-inherit {
923
983
  border-color: inherit;
@@ -925,11 +985,17 @@
925
985
  .border-red-500 {
926
986
  border-color: var(--color-red-500);
927
987
  }
988
+ .border-red-700 {
989
+ border-color: var(--color-red-700);
990
+ }
928
991
  .border-transparent {
929
992
  border-color: transparent;
930
993
  }
931
- .border-yellow-600 {
932
- border-color: var(--color-yellow-600);
994
+ .border-white {
995
+ border-color: var(--color-white);
996
+ }
997
+ .border-yellow-400 {
998
+ border-color: var(--color-yellow-400);
933
999
  }
934
1000
  .border-zinc-400 {
935
1001
  border-color: var(--color-zinc-400);
@@ -937,6 +1003,9 @@
937
1003
  .border-zinc-500 {
938
1004
  border-color: var(--color-zinc-500);
939
1005
  }
1006
+ .border-zinc-950 {
1007
+ border-color: var(--color-zinc-950);
1008
+ }
940
1009
  .border-zinc-950\/5 {
941
1010
  border-color: color-mix(in oklab, var(--color-zinc-950) 5%, transparent);
942
1011
  }
@@ -946,27 +1015,48 @@
946
1015
  .border-zinc-950\/15 {
947
1016
  border-color: color-mix(in oklab, var(--color-zinc-950) 15%, transparent);
948
1017
  }
1018
+ .border-b-zinc-950 {
1019
+ border-bottom-color: var(--color-zinc-950);
1020
+ }
949
1021
  .border-b-zinc-950\/10 {
950
1022
  border-bottom-color: color-mix(in oklab, var(--color-zinc-950) 10%, transparent);
951
1023
  }
952
1024
  .bg-\(--btn-border\) {
953
1025
  background-color: var(--btn-border);
954
1026
  }
955
- .bg-amber-50 {
956
- background-color: var(--color-amber-50);
957
- }
958
1027
  .bg-gray-50 {
959
1028
  background-color: var(--color-gray-50);
960
1029
  }
1030
+ .bg-gray-100 {
1031
+ background-color: var(--color-gray-100);
1032
+ }
961
1033
  .bg-gray-300 {
962
1034
  background-color: var(--color-gray-300);
963
1035
  }
964
1036
  .bg-green-200 {
965
1037
  background-color: var(--color-green-200);
966
1038
  }
1039
+ .bg-green-500 {
1040
+ background-color: var(--color-green-500);
1041
+ }
1042
+ .bg-green-600 {
1043
+ background-color: var(--color-green-600);
1044
+ }
1045
+ .bg-indigo-600 {
1046
+ background-color: var(--color-indigo-600);
1047
+ }
1048
+ .bg-red-500 {
1049
+ background-color: var(--color-red-500);
1050
+ }
967
1051
  .bg-red-600 {
968
1052
  background-color: var(--color-red-600);
969
1053
  }
1054
+ .bg-red-600\/80 {
1055
+ background-color: color-mix(in oklab, var(--color-red-600) 80%, transparent);
1056
+ }
1057
+ .bg-red-700 {
1058
+ background-color: var(--color-red-700);
1059
+ }
970
1060
  .bg-transparent {
971
1061
  background-color: transparent;
972
1062
  }
@@ -976,8 +1066,11 @@
976
1066
  .bg-yellow-200 {
977
1067
  background-color: var(--color-yellow-200);
978
1068
  }
979
- .bg-yellow-300 {
980
- background-color: var(--color-yellow-300);
1069
+ .bg-yellow-400 {
1070
+ background-color: var(--color-yellow-400);
1071
+ }
1072
+ .bg-zinc-50 {
1073
+ background-color: var(--color-zinc-50);
981
1074
  }
982
1075
  .bg-zinc-200 {
983
1076
  background-color: var(--color-zinc-200);
@@ -991,15 +1084,15 @@
991
1084
  .bg-zinc-900 {
992
1085
  background-color: var(--color-zinc-900);
993
1086
  }
1087
+ .bg-zinc-950 {
1088
+ background-color: var(--color-zinc-950);
1089
+ }
994
1090
  .bg-zinc-950\/25 {
995
1091
  background-color: color-mix(in oklab, var(--color-zinc-950) 25%, transparent);
996
1092
  }
997
1093
  .fill-current {
998
1094
  fill: currentColor;
999
1095
  }
1000
- .fill-yellow-500 {
1001
- fill: var(--color-yellow-500);
1002
- }
1003
1096
  .stroke-\(--checkbox-check\) {
1004
1097
  stroke: var(--checkbox-check);
1005
1098
  }
@@ -1012,18 +1105,24 @@
1012
1105
  .p-1 {
1013
1106
  padding: calc(var(--spacing) * 1);
1014
1107
  }
1108
+ .p-2 {
1109
+ padding: calc(var(--spacing) * 2);
1110
+ }
1111
+ .p-3 {
1112
+ padding: calc(var(--spacing) * 3);
1113
+ }
1015
1114
  .p-4 {
1016
1115
  padding: calc(var(--spacing) * 4);
1017
1116
  }
1117
+ .p-7 {
1118
+ padding: calc(var(--spacing) * 7);
1119
+ }
1018
1120
  .p-\[3px\] {
1019
1121
  padding: 3px;
1020
1122
  }
1021
1123
  .p-\[5\%\] {
1022
1124
  padding: 5%;
1023
1125
  }
1024
- .px-1\.5 {
1025
- padding-inline: calc(var(--spacing) * 1.5);
1026
- }
1027
1126
  .px-2 {
1028
1127
  padding-inline: calc(var(--spacing) * 2);
1029
1128
  }
@@ -1048,6 +1147,9 @@
1048
1147
  .py-3 {
1049
1148
  padding-block: calc(var(--spacing) * 3);
1050
1149
  }
1150
+ .py-9 {
1151
+ padding-block: calc(var(--spacing) * 9);
1152
+ }
1051
1153
  .py-\[calc\(--spacing\(2\.5\)-1px\)\] {
1052
1154
  padding-block: calc(calc(var(--spacing) * 2.5) - 1px);
1053
1155
  }
@@ -1084,6 +1186,17 @@
1084
1186
  .align-middle {
1085
1187
  vertical-align: middle;
1086
1188
  }
1189
+ .font-\[\'Inter\'\] {
1190
+ font-family: 'Inter';
1191
+ }
1192
+ .text-base {
1193
+ font-size: var(--text-base);
1194
+ line-height: var(--tw-leading, var(--text-base--line-height));
1195
+ }
1196
+ .text-lg {
1197
+ font-size: var(--text-lg);
1198
+ line-height: var(--tw-leading, var(--text-lg--line-height));
1199
+ }
1087
1200
  .text-sm {
1088
1201
  font-size: var(--text-sm);
1089
1202
  line-height: var(--tw-leading, var(--text-sm--line-height));
@@ -1111,10 +1224,26 @@
1111
1224
  .text-\[48px\] {
1112
1225
  font-size: 48px;
1113
1226
  }
1227
+ .leading-4 {
1228
+ --tw-leading: calc(var(--spacing) * 4);
1229
+ line-height: calc(var(--spacing) * 4);
1230
+ }
1231
+ .leading-\[18px\] {
1232
+ --tw-leading: 18px;
1233
+ line-height: 18px;
1234
+ }
1235
+ .leading-snug {
1236
+ --tw-leading: var(--leading-snug);
1237
+ line-height: var(--leading-snug);
1238
+ }
1114
1239
  .font-medium {
1115
1240
  --tw-font-weight: var(--font-weight-medium);
1116
1241
  font-weight: var(--font-weight-medium);
1117
1242
  }
1243
+ .font-normal {
1244
+ --tw-font-weight: var(--font-weight-normal);
1245
+ font-weight: var(--font-weight-normal);
1246
+ }
1118
1247
  .font-semibold {
1119
1248
  --tw-font-weight: var(--font-weight-semibold);
1120
1249
  font-weight: var(--font-weight-semibold);
@@ -1125,15 +1254,39 @@
1125
1254
  .text-pretty {
1126
1255
  text-wrap: pretty;
1127
1256
  }
1128
- .text-amber-600 {
1129
- color: var(--color-amber-600);
1257
+ .text-wrap {
1258
+ text-wrap: wrap;
1259
+ }
1260
+ .text-gray-400 {
1261
+ color: var(--color-gray-400);
1130
1262
  }
1131
1263
  .text-gray-800 {
1132
1264
  color: var(--color-gray-800);
1133
1265
  }
1266
+ .text-gray-900 {
1267
+ color: var(--color-gray-900);
1268
+ }
1269
+ .text-indigo-500 {
1270
+ color: var(--color-indigo-500);
1271
+ }
1272
+ .text-red-500 {
1273
+ color: var(--color-red-500);
1274
+ }
1275
+ .text-red-600 {
1276
+ color: var(--color-red-600);
1277
+ }
1134
1278
  .text-white {
1135
1279
  color: var(--color-white);
1136
1280
  }
1281
+ .text-zinc-100 {
1282
+ color: var(--color-zinc-100);
1283
+ }
1284
+ .text-zinc-200 {
1285
+ color: var(--color-zinc-200);
1286
+ }
1287
+ .text-zinc-300 {
1288
+ color: var(--color-zinc-300);
1289
+ }
1137
1290
  .text-zinc-500 {
1138
1291
  color: var(--color-zinc-500);
1139
1292
  }
@@ -1184,9 +1337,15 @@
1184
1337
  --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
1185
1338
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1186
1339
  }
1340
+ .ring-black {
1341
+ --tw-ring-color: var(--color-black);
1342
+ }
1187
1343
  .ring-black\/5 {
1188
1344
  --tw-ring-color: color-mix(in oklab, var(--color-black) 5%, transparent);
1189
1345
  }
1346
+ .ring-zinc-950 {
1347
+ --tw-ring-color: var(--color-zinc-950);
1348
+ }
1190
1349
  .ring-zinc-950\/10 {
1191
1350
  --tw-ring-color: color-mix(in oklab, var(--color-zinc-950) 10%, transparent);
1192
1351
  }
@@ -1197,12 +1356,23 @@
1197
1356
  .-outline-offset-1 {
1198
1357
  outline-offset: calc(1px * -1);
1199
1358
  }
1359
+ .outline-black {
1360
+ outline-color: var(--color-black);
1361
+ }
1200
1362
  .outline-black\/\(--ring-opacity\) {
1201
1363
  outline-color: color-mix(in oklab, var(--color-black) var(--ring-opacity), transparent);
1202
1364
  }
1365
+ .grayscale {
1366
+ --tw-grayscale: grayscale(100%);
1367
+ filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
1368
+ }
1203
1369
  .filter {
1204
1370
  filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
1205
1371
  }
1372
+ .backdrop-filter {
1373
+ -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
1374
+ backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
1375
+ }
1206
1376
  .transition {
1207
1377
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter;
1208
1378
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -1297,15 +1467,6 @@
1297
1467
  .\[--switch\:white\] {
1298
1468
  --switch: white;
1299
1469
  }
1300
- .\[callback\:\<function\>\] {
1301
- callback: <function>;
1302
- }
1303
- .\[keys\:\<String\>\] {
1304
- keys: <String>;
1305
- }
1306
- .\[option\:\[string\|object\|function\]\] {
1307
- option: [string|object|function];
1308
- }
1309
1470
  .ring-inset {
1310
1471
  --tw-ring-inset: inset;
1311
1472
  }
@@ -1344,6 +1505,13 @@
1344
1505
  border-bottom-width: 0px;
1345
1506
  }
1346
1507
  }
1508
+ .group-hover\:border-zinc-950\/30 {
1509
+ &:is(:where(.group):hover *) {
1510
+ @media (hover: hover) {
1511
+ border-color: color-mix(in oklab, var(--color-zinc-950) 30%, transparent);
1512
+ }
1513
+ }
1514
+ }
1347
1515
  .group-has-data-disabled\:stroke-zinc-600 {
1348
1516
  &:is(:where(.group):has(*[data-disabled]) *) {
1349
1517
  stroke: var(--color-zinc-600);
@@ -1386,6 +1554,15 @@
1386
1554
  --tw-ring-color: var(--switch-ring);
1387
1555
  }
1388
1556
  }
1557
+ .group-hover\:group-data-checked\:border-transparent {
1558
+ &:is(:where(.group):hover *) {
1559
+ @media (hover: hover) {
1560
+ &:is(:where(.group)[data-checked] *) {
1561
+ border-color: transparent;
1562
+ }
1563
+ }
1564
+ }
1565
+ }
1389
1566
  .group-data-disabled\:border-zinc-950\/25 {
1390
1567
  &:is(:where(.group)[data-disabled] *) {
1391
1568
  border-color: color-mix(in oklab, var(--color-zinc-950) 25%, transparent);
@@ -1450,18 +1627,6 @@
1450
1627
  outline-color: var(--color-blue-500);
1451
1628
  }
1452
1629
  }
1453
- .group-data-hover\:border-zinc-950\/30 {
1454
- &:is(:where(.group)[data-hover] *) {
1455
- border-color: color-mix(in oklab, var(--color-zinc-950) 30%, transparent);
1456
- }
1457
- }
1458
- .group-data-hover\:group-data-checked\:border-transparent {
1459
- &:is(:where(.group)[data-hover] *) {
1460
- &:is(:where(.group)[data-checked] *) {
1461
- border-color: transparent;
1462
- }
1463
- }
1464
- }
1465
1630
  .group-data-indeterminate\:opacity-0 {
1466
1631
  &:is(:where(.group)[data-indeterminate] *) {
1467
1632
  opacity: 0%;
@@ -1472,6 +1637,37 @@
1472
1637
  opacity: 100%;
1473
1638
  }
1474
1639
  }
1640
+ .file\:mr-4 {
1641
+ &::file-selector-button {
1642
+ margin-right: calc(var(--spacing) * 4);
1643
+ }
1644
+ }
1645
+ .file\:cursor-pointer {
1646
+ &::file-selector-button {
1647
+ cursor: pointer;
1648
+ }
1649
+ }
1650
+ .file\:border-0 {
1651
+ &::file-selector-button {
1652
+ border-style: var(--tw-border-style);
1653
+ border-width: 0px;
1654
+ }
1655
+ }
1656
+ .file\:bg-zinc-100 {
1657
+ &::file-selector-button {
1658
+ background-color: var(--color-zinc-100);
1659
+ }
1660
+ }
1661
+ .file\:px-\[calc\(--spacing\(3\.5\)-1px\)\] {
1662
+ &::file-selector-button {
1663
+ padding-inline: calc(calc(var(--spacing) * 3.5) - 1px);
1664
+ }
1665
+ }
1666
+ .file\:py-\[calc\(--spacing\(2\.5\)-1px\)\] {
1667
+ &::file-selector-button {
1668
+ padding-block: calc(calc(var(--spacing) * 2.5) - 1px);
1669
+ }
1670
+ }
1475
1671
  .placeholder\:text-zinc-500 {
1476
1672
  &::placeholder {
1477
1673
  color: var(--color-zinc-500);
@@ -1633,16 +1829,52 @@
1633
1829
  border-color: transparent;
1634
1830
  }
1635
1831
  }
1636
- .after\:border-r-yellow-600 {
1832
+ .after\:border-r-green-600 {
1833
+ &::after {
1834
+ content: var(--tw-content);
1835
+ border-right-color: var(--color-green-600);
1836
+ }
1837
+ }
1838
+ .after\:border-r-white {
1637
1839
  &::after {
1638
1840
  content: var(--tw-content);
1639
- border-right-color: var(--color-yellow-600);
1841
+ border-right-color: var(--color-white);
1640
1842
  }
1641
1843
  }
1642
- .after\:border-l-yellow-600 {
1844
+ .after\:border-r-yellow-400 {
1643
1845
  &::after {
1644
1846
  content: var(--tw-content);
1645
- border-left-color: var(--color-yellow-600);
1847
+ border-right-color: var(--color-yellow-400);
1848
+ }
1849
+ }
1850
+ .after\:border-r-zinc-400 {
1851
+ &::after {
1852
+ content: var(--tw-content);
1853
+ border-right-color: var(--color-zinc-400);
1854
+ }
1855
+ }
1856
+ .after\:border-l-green-600 {
1857
+ &::after {
1858
+ content: var(--tw-content);
1859
+ border-left-color: var(--color-green-600);
1860
+ }
1861
+ }
1862
+ .after\:border-l-white {
1863
+ &::after {
1864
+ content: var(--tw-content);
1865
+ border-left-color: var(--color-white);
1866
+ }
1867
+ }
1868
+ .after\:border-l-yellow-400 {
1869
+ &::after {
1870
+ content: var(--tw-content);
1871
+ border-left-color: var(--color-yellow-400);
1872
+ }
1873
+ }
1874
+ .after\:border-l-zinc-400 {
1875
+ &::after {
1876
+ content: var(--tw-content);
1877
+ border-left-color: var(--color-zinc-400);
1646
1878
  }
1647
1879
  }
1648
1880
  .after\:shadow-\[inset_0_1px_--theme\(--color-white\/15\%\)\] {
@@ -1677,6 +1909,20 @@
1677
1909
  border-style: none;
1678
1910
  }
1679
1911
  }
1912
+ .hover\:cursor-pointer {
1913
+ &:hover {
1914
+ @media (hover: hover) {
1915
+ cursor: pointer;
1916
+ }
1917
+ }
1918
+ }
1919
+ .hover\:border-zinc-950\/20 {
1920
+ &:hover {
1921
+ @media (hover: hover) {
1922
+ border-color: color-mix(in oklab, var(--color-zinc-950) 20%, transparent);
1923
+ }
1924
+ }
1925
+ }
1680
1926
  .hover\:bg-red-600 {
1681
1927
  &:hover {
1682
1928
  @media (hover: hover) {
@@ -1684,10 +1930,10 @@
1684
1930
  }
1685
1931
  }
1686
1932
  }
1687
- .hover\:bg-zinc-400\/30 {
1933
+ .hover\:bg-zinc-100 {
1688
1934
  &:hover {
1689
1935
  @media (hover: hover) {
1690
- background-color: color-mix(in oklab, var(--color-zinc-400) 30%, transparent);
1936
+ background-color: var(--color-zinc-100);
1691
1937
  }
1692
1938
  }
1693
1939
  }
@@ -1705,6 +1951,13 @@
1705
1951
  }
1706
1952
  }
1707
1953
  }
1954
+ .hover\:text-indigo-500 {
1955
+ &:hover {
1956
+ @media (hover: hover) {
1957
+ color: var(--color-indigo-500);
1958
+ }
1959
+ }
1960
+ }
1708
1961
  .hover\:text-zinc-950 {
1709
1962
  &:hover {
1710
1963
  @media (hover: hover) {
@@ -1719,6 +1972,13 @@
1719
1972
  }
1720
1973
  }
1721
1974
  }
1975
+ .hover\:ring-black\/15 {
1976
+ &:hover {
1977
+ @media (hover: hover) {
1978
+ --tw-ring-color: color-mix(in oklab, var(--color-black) 15%, transparent);
1979
+ }
1980
+ }
1981
+ }
1722
1982
  .hover\:\[--btn-icon\:var\(--color-zinc-300\)\] {
1723
1983
  &:hover {
1724
1984
  @media (hover: hover) {
@@ -1786,6 +2046,23 @@
1786
2046
  outline-style: none;
1787
2047
  }
1788
2048
  }
2049
+ .focus\:after\:ring-2 {
2050
+ &:focus {
2051
+ &::after {
2052
+ content: var(--tw-content);
2053
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentColor);
2054
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
2055
+ }
2056
+ }
2057
+ }
2058
+ .focus\:after\:ring-blue-500 {
2059
+ &:focus {
2060
+ &::after {
2061
+ content: var(--tw-content);
2062
+ --tw-ring-color: var(--color-blue-500);
2063
+ }
2064
+ }
2065
+ }
1789
2066
  .active\:bg-red-700 {
1790
2067
  &:active {
1791
2068
  background-color: var(--color-red-700);
@@ -1859,23 +2136,6 @@
1859
2136
  }
1860
2137
  }
1861
2138
  }
1862
- .has-data-focus\:after\:ring-2 {
1863
- &:has(*[data-focus]) {
1864
- &::after {
1865
- content: var(--tw-content);
1866
- --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentColor);
1867
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1868
- }
1869
- }
1870
- }
1871
- .has-data-focus\:after\:ring-blue-500 {
1872
- &:has(*[data-focus]) {
1873
- &::after {
1874
- content: var(--tw-content);
1875
- --tw-ring-color: var(--color-blue-500);
1876
- }
1877
- }
1878
- }
1879
2139
  .has-data-invalid\:before\:shadow-red-500\/10 {
1880
2140
  &:has(*[data-invalid]) {
1881
2141
  &::before {
@@ -1905,6 +2165,15 @@
1905
2165
  --tw-ring-color: var(--switch-bg-ring);
1906
2166
  }
1907
2167
  }
2168
+ .hover\:data-checked\:ring-\(--switch-bg-ring\) {
2169
+ &:hover {
2170
+ @media (hover: hover) {
2171
+ &[data-checked] {
2172
+ --tw-ring-color: var(--switch-bg-ring);
2173
+ }
2174
+ }
2175
+ }
2176
+ }
1908
2177
  .data-closed\:translate-y-12 {
1909
2178
  &[data-closed] {
1910
2179
  --tw-translate-y: calc(var(--spacing) * 12);
@@ -1921,6 +2190,11 @@
1921
2190
  pointer-events: none;
1922
2191
  }
1923
2192
  }
2193
+ .data-disabled\:cursor-not-allowed {
2194
+ &[data-disabled] {
2195
+ cursor: not-allowed;
2196
+ }
2197
+ }
1924
2198
  .data-disabled\:border-zinc-950\/20 {
1925
2199
  &[data-disabled] {
1926
2200
  border-color: color-mix(in oklab, var(--color-zinc-950) 20%, transparent);
@@ -1941,6 +2215,13 @@
1941
2215
  opacity: 100%;
1942
2216
  }
1943
2217
  }
2218
+ .data-disabled\:file\:cursor-not-allowed {
2219
+ &[data-disabled] {
2220
+ &::file-selector-button {
2221
+ cursor: not-allowed;
2222
+ }
2223
+ }
2224
+ }
1944
2225
  .data-disabled\:data-checked\:bg-zinc-200 {
1945
2226
  &[data-disabled] {
1946
2227
  &[data-checked] {
@@ -1977,32 +2258,17 @@
1977
2258
  outline-color: var(--color-blue-500);
1978
2259
  }
1979
2260
  }
1980
- .data-hover\:border-zinc-950\/20 {
1981
- &[data-hover] {
1982
- border-color: color-mix(in oklab, var(--color-zinc-950) 20%, transparent);
1983
- }
1984
- }
1985
- .data-hover\:ring-black\/15 {
1986
- &[data-hover] {
1987
- --tw-ring-color: color-mix(in oklab, var(--color-black) 15%, transparent);
1988
- }
1989
- }
1990
- .data-hover\:data-checked\:ring-\(--switch-bg-ring\) {
1991
- &[data-hover] {
1992
- &[data-checked] {
1993
- --tw-ring-color: var(--switch-bg-ring);
1994
- }
1995
- }
1996
- }
1997
2261
  .data-invalid\:border-red-500 {
1998
2262
  &[data-invalid] {
1999
2263
  border-color: var(--color-red-500);
2000
2264
  }
2001
2265
  }
2002
- .data-invalid\:data-hover\:border-red-500 {
2266
+ .data-invalid\:hover\:border-red-500 {
2003
2267
  &[data-invalid] {
2004
- &[data-hover] {
2005
- border-color: var(--color-red-500);
2268
+ &:hover {
2269
+ @media (hover: hover) {
2270
+ border-color: var(--color-red-500);
2271
+ }
2006
2272
  }
2007
2273
  }
2008
2274
  }
@@ -2075,10 +2341,10 @@
2075
2341
  }
2076
2342
  }
2077
2343
  }
2078
- .\*\:data-\[slot\=header\]\:bg-red-600\/90 {
2344
+ .\*\:data-\[slot\=header\]\:bg-red-600\/80 {
2079
2345
  :is(& > *) {
2080
2346
  &[data-slot="header"] {
2081
- background-color: color-mix(in oklab, var(--color-red-600) 90%, transparent);
2347
+ background-color: color-mix(in oklab, var(--color-red-600) 80%, transparent);
2082
2348
  }
2083
2349
  }
2084
2350
  }
@@ -2344,6 +2610,20 @@
2344
2610
  }
2345
2611
  }
2346
2612
  }
2613
+ .file\:sm\:px-\[calc\(--spacing\(3\)-1px\)\] {
2614
+ &::file-selector-button {
2615
+ @media (width >= 40rem) {
2616
+ padding-inline: calc(calc(var(--spacing) * 3) - 1px);
2617
+ }
2618
+ }
2619
+ }
2620
+ .file\:sm\:py-\[calc\(--spacing\(1\.5\)-1px\)\] {
2621
+ &::file-selector-button {
2622
+ @media (width >= 40rem) {
2623
+ padding-block: calc(calc(var(--spacing) * 1.5) - 1px);
2624
+ }
2625
+ }
2626
+ }
2347
2627
  .sm\:focus-within\:after\:ring-2 {
2348
2628
  @media (width >= 40rem) {
2349
2629
  &:focus-within {
@@ -2430,11 +2710,13 @@
2430
2710
  }
2431
2711
  }
2432
2712
  }
2433
- .dark\:data-invalid\:data-hover\:border-red-500 {
2713
+ .dark\:data-invalid\:hover\:border-red-500 {
2434
2714
  @media (prefers-color-scheme: dark) {
2435
2715
  &[data-invalid] {
2436
- &[data-hover] {
2437
- border-color: var(--color-red-500);
2716
+ &:hover {
2717
+ @media (hover: hover) {
2718
+ border-color: var(--color-red-500);
2719
+ }
2438
2720
  }
2439
2721
  }
2440
2722
  }
@@ -2595,6 +2877,10 @@
2595
2877
  inherits: false;
2596
2878
  initial-value: solid;
2597
2879
  }
2880
+ @property --tw-leading {
2881
+ syntax: "*";
2882
+ inherits: false;
2883
+ }
2598
2884
  @property --tw-font-weight {
2599
2885
  syntax: "*";
2600
2886
  inherits: false;
@@ -2695,6 +2981,42 @@
2695
2981
  syntax: "*";
2696
2982
  inherits: false;
2697
2983
  }
2984
+ @property --tw-backdrop-blur {
2985
+ syntax: "*";
2986
+ inherits: false;
2987
+ }
2988
+ @property --tw-backdrop-brightness {
2989
+ syntax: "*";
2990
+ inherits: false;
2991
+ }
2992
+ @property --tw-backdrop-contrast {
2993
+ syntax: "*";
2994
+ inherits: false;
2995
+ }
2996
+ @property --tw-backdrop-grayscale {
2997
+ syntax: "*";
2998
+ inherits: false;
2999
+ }
3000
+ @property --tw-backdrop-hue-rotate {
3001
+ syntax: "*";
3002
+ inherits: false;
3003
+ }
3004
+ @property --tw-backdrop-invert {
3005
+ syntax: "*";
3006
+ inherits: false;
3007
+ }
3008
+ @property --tw-backdrop-opacity {
3009
+ syntax: "*";
3010
+ inherits: false;
3011
+ }
3012
+ @property --tw-backdrop-saturate {
3013
+ syntax: "*";
3014
+ inherits: false;
3015
+ }
3016
+ @property --tw-backdrop-sepia {
3017
+ syntax: "*";
3018
+ inherits: false;
3019
+ }
2698
3020
  @property --tw-duration {
2699
3021
  syntax: "*";
2700
3022
  inherits: false;