lightning_ui_kit 0.1.2 → 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 (26) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/builds/lightning_ui_kit.css +444 -64
  3. data/app/assets/builds/lightning_ui_kit.js +2 -2
  4. data/app/assets/builds/lightning_ui_kit.js.map +4 -4
  5. data/app/components/lightning_ui_kit/badge_component.rb +30 -5
  6. data/app/components/lightning_ui_kit/banner_component.rb +1 -1
  7. data/app/components/lightning_ui_kit/checkbox_component.html.erb +1 -1
  8. data/app/components/lightning_ui_kit/dropzone_component.html.erb +82 -0
  9. data/app/components/lightning_ui_kit/dropzone_component.rb +61 -0
  10. data/app/components/lightning_ui_kit/errors.rb +34 -0
  11. data/app/components/lightning_ui_kit/file_input_component.html.erb +50 -0
  12. data/app/components/lightning_ui_kit/file_input_component.rb +62 -0
  13. data/app/components/lightning_ui_kit/input_component.html.erb +21 -14
  14. data/app/components/lightning_ui_kit/input_component.rb +17 -2
  15. data/app/components/lightning_ui_kit/select_component.html.erb +23 -3
  16. data/app/components/lightning_ui_kit/select_component.rb +31 -1
  17. data/app/components/lightning_ui_kit/switch_component.html.erb +8 -1
  18. data/app/components/lightning_ui_kit/switch_component.rb +12 -1
  19. data/app/components/lightning_ui_kit/textarea_component.html.erb +15 -8
  20. data/app/components/lightning_ui_kit/textarea_component.rb +17 -2
  21. data/app/javascript/lightning_ui_kit/controllers/dropzone_controller.js +76 -0
  22. data/app/javascript/lightning_ui_kit/index.js +5 -0
  23. data/config/locales/en.yml +3 -0
  24. data/lib/lightning_ui_kit/engine.rb +0 -1
  25. data/lib/lightning_ui_kit/version.rb +1 -1
  26. metadata +9 -2
@@ -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
  }
@@ -604,15 +619,27 @@
604
619
  .mt-8 {
605
620
  margin-top: calc(var(--spacing) * 8);
606
621
  }
622
+ .mb-1 {
623
+ margin-bottom: calc(var(--spacing) * 1);
624
+ }
607
625
  .mb-2 {
608
626
  margin-bottom: calc(var(--spacing) * 2);
609
627
  }
628
+ .mb-3 {
629
+ margin-bottom: calc(var(--spacing) * 3);
630
+ }
610
631
  .mb-4 {
611
632
  margin-bottom: calc(var(--spacing) * 4);
612
633
  }
634
+ .ml-2 {
635
+ margin-left: calc(var(--spacing) * 2);
636
+ }
613
637
  .block {
614
638
  display: block;
615
639
  }
640
+ .contents {
641
+ display: contents;
642
+ }
616
643
  .flex {
617
644
  display: flex;
618
645
  }
@@ -634,6 +661,9 @@
634
661
  .inline-grid {
635
662
  display: inline-grid;
636
663
  }
664
+ .list-item {
665
+ display: list-item;
666
+ }
637
667
  .table {
638
668
  display: table;
639
669
  }
@@ -683,6 +713,12 @@
683
713
  .h-6 {
684
714
  height: calc(var(--spacing) * 6);
685
715
  }
716
+ .h-10 {
717
+ height: calc(var(--spacing) * 10);
718
+ }
719
+ .h-full {
720
+ height: 100%;
721
+ }
686
722
  .min-h-full {
687
723
  min-height: 100%;
688
724
  }
@@ -698,6 +734,9 @@
698
734
  .w-5 {
699
735
  width: calc(var(--spacing) * 5);
700
736
  }
737
+ .w-6 {
738
+ width: calc(var(--spacing) * 6);
739
+ }
701
740
  .w-10 {
702
741
  width: calc(var(--spacing) * 10);
703
742
  }
@@ -710,6 +749,9 @@
710
749
  .w-\[2\.25rem\] {
711
750
  width: 2.25rem;
712
751
  }
752
+ .w-\[100\%\] {
753
+ width: 100%;
754
+ }
713
755
  .w-full {
714
756
  width: 100%;
715
757
  }
@@ -725,6 +767,12 @@
725
767
  .min-w-full {
726
768
  min-width: 100%;
727
769
  }
770
+ .flex-1 {
771
+ flex: 1;
772
+ }
773
+ .flex-shrink {
774
+ flex-shrink: 1;
775
+ }
728
776
  .shrink-0 {
729
777
  flex-shrink: 0;
730
778
  }
@@ -813,9 +861,21 @@
813
861
  .justify-items-center {
814
862
  justify-items: center;
815
863
  }
864
+ .gap-1 {
865
+ gap: calc(var(--spacing) * 1);
866
+ }
867
+ .gap-2 {
868
+ gap: calc(var(--spacing) * 2);
869
+ }
870
+ .gap-2\.5 {
871
+ gap: calc(var(--spacing) * 2.5);
872
+ }
816
873
  .gap-3 {
817
874
  gap: calc(var(--spacing) * 3);
818
875
  }
876
+ .gap-x-1 {
877
+ column-gap: calc(var(--spacing) * 1);
878
+ }
819
879
  .gap-x-1\.5 {
820
880
  column-gap: calc(var(--spacing) * 1.5);
821
881
  }
@@ -828,6 +888,13 @@
828
888
  .gap-x-8 {
829
889
  column-gap: calc(var(--spacing) * 8);
830
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
+ }
831
898
  .space-y-2\.5 {
832
899
  :where(& > :not(:last-child)) {
833
900
  --tw-space-y-reverse: 0;
@@ -835,6 +902,13 @@
835
902
  margin-block-end: calc(calc(var(--spacing) * 2.5) * calc(1 - var(--tw-space-y-reverse)));
836
903
  }
837
904
  }
905
+ .space-y-4 {
906
+ :where(& > :not(:last-child)) {
907
+ --tw-space-y-reverse: 0;
908
+ margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
909
+ margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
910
+ }
911
+ }
838
912
  .gap-y-1 {
839
913
  row-gap: calc(var(--spacing) * 1);
840
914
  }
@@ -847,6 +921,12 @@
847
921
  .rounded-\(--avatar-radius\) {
848
922
  border-radius: var(--avatar-radius);
849
923
  }
924
+ .rounded-2xl {
925
+ border-radius: var(--radius-2xl);
926
+ }
927
+ .rounded-3xl {
928
+ border-radius: var(--radius-3xl);
929
+ }
850
930
  .rounded-\[0\.3125rem\] {
851
931
  border-radius: 0.3125rem;
852
932
  }
@@ -885,17 +965,37 @@
885
965
  border-bottom-style: var(--tw-border-style);
886
966
  border-bottom-width: 1px;
887
967
  }
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);
981
+ }
888
982
  .border-inherit {
889
983
  border-color: inherit;
890
984
  }
891
985
  .border-red-500 {
892
986
  border-color: var(--color-red-500);
893
987
  }
988
+ .border-red-700 {
989
+ border-color: var(--color-red-700);
990
+ }
894
991
  .border-transparent {
895
992
  border-color: transparent;
896
993
  }
897
- .border-yellow-600 {
898
- 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);
899
999
  }
900
1000
  .border-zinc-400 {
901
1001
  border-color: var(--color-zinc-400);
@@ -903,6 +1003,9 @@
903
1003
  .border-zinc-500 {
904
1004
  border-color: var(--color-zinc-500);
905
1005
  }
1006
+ .border-zinc-950 {
1007
+ border-color: var(--color-zinc-950);
1008
+ }
906
1009
  .border-zinc-950\/5 {
907
1010
  border-color: color-mix(in oklab, var(--color-zinc-950) 5%, transparent);
908
1011
  }
@@ -912,6 +1015,9 @@
912
1015
  .border-zinc-950\/15 {
913
1016
  border-color: color-mix(in oklab, var(--color-zinc-950) 15%, transparent);
914
1017
  }
1018
+ .border-b-zinc-950 {
1019
+ border-bottom-color: var(--color-zinc-950);
1020
+ }
915
1021
  .border-b-zinc-950\/10 {
916
1022
  border-bottom-color: color-mix(in oklab, var(--color-zinc-950) 10%, transparent);
917
1023
  }
@@ -921,15 +1027,36 @@
921
1027
  .bg-gray-50 {
922
1028
  background-color: var(--color-gray-50);
923
1029
  }
1030
+ .bg-gray-100 {
1031
+ background-color: var(--color-gray-100);
1032
+ }
924
1033
  .bg-gray-300 {
925
1034
  background-color: var(--color-gray-300);
926
1035
  }
927
1036
  .bg-green-200 {
928
1037
  background-color: var(--color-green-200);
929
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
+ }
930
1051
  .bg-red-600 {
931
1052
  background-color: var(--color-red-600);
932
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
+ }
933
1060
  .bg-transparent {
934
1061
  background-color: transparent;
935
1062
  }
@@ -939,8 +1066,11 @@
939
1066
  .bg-yellow-200 {
940
1067
  background-color: var(--color-yellow-200);
941
1068
  }
942
- .bg-yellow-300 {
943
- 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);
944
1074
  }
945
1075
  .bg-zinc-200 {
946
1076
  background-color: var(--color-zinc-200);
@@ -954,6 +1084,9 @@
954
1084
  .bg-zinc-900 {
955
1085
  background-color: var(--color-zinc-900);
956
1086
  }
1087
+ .bg-zinc-950 {
1088
+ background-color: var(--color-zinc-950);
1089
+ }
957
1090
  .bg-zinc-950\/25 {
958
1091
  background-color: color-mix(in oklab, var(--color-zinc-950) 25%, transparent);
959
1092
  }
@@ -972,9 +1105,18 @@
972
1105
  .p-1 {
973
1106
  padding: calc(var(--spacing) * 1);
974
1107
  }
1108
+ .p-2 {
1109
+ padding: calc(var(--spacing) * 2);
1110
+ }
1111
+ .p-3 {
1112
+ padding: calc(var(--spacing) * 3);
1113
+ }
975
1114
  .p-4 {
976
1115
  padding: calc(var(--spacing) * 4);
977
1116
  }
1117
+ .p-7 {
1118
+ padding: calc(var(--spacing) * 7);
1119
+ }
978
1120
  .p-\[3px\] {
979
1121
  padding: 3px;
980
1122
  }
@@ -996,12 +1138,18 @@
996
1138
  .py-1 {
997
1139
  padding-block: calc(var(--spacing) * 1);
998
1140
  }
1141
+ .py-1\.5 {
1142
+ padding-block: calc(var(--spacing) * 1.5);
1143
+ }
999
1144
  .py-2 {
1000
1145
  padding-block: calc(var(--spacing) * 2);
1001
1146
  }
1002
1147
  .py-3 {
1003
1148
  padding-block: calc(var(--spacing) * 3);
1004
1149
  }
1150
+ .py-9 {
1151
+ padding-block: calc(var(--spacing) * 9);
1152
+ }
1005
1153
  .py-\[calc\(--spacing\(2\.5\)-1px\)\] {
1006
1154
  padding-block: calc(calc(var(--spacing) * 2.5) - 1px);
1007
1155
  }
@@ -1038,6 +1186,17 @@
1038
1186
  .align-middle {
1039
1187
  vertical-align: middle;
1040
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
+ }
1041
1200
  .text-sm {
1042
1201
  font-size: var(--text-sm);
1043
1202
  line-height: var(--tw-leading, var(--text-sm--line-height));
@@ -1065,10 +1224,26 @@
1065
1224
  .text-\[48px\] {
1066
1225
  font-size: 48px;
1067
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
+ }
1068
1239
  .font-medium {
1069
1240
  --tw-font-weight: var(--font-weight-medium);
1070
1241
  font-weight: var(--font-weight-medium);
1071
1242
  }
1243
+ .font-normal {
1244
+ --tw-font-weight: var(--font-weight-normal);
1245
+ font-weight: var(--font-weight-normal);
1246
+ }
1072
1247
  .font-semibold {
1073
1248
  --tw-font-weight: var(--font-weight-semibold);
1074
1249
  font-weight: var(--font-weight-semibold);
@@ -1079,12 +1254,39 @@
1079
1254
  .text-pretty {
1080
1255
  text-wrap: pretty;
1081
1256
  }
1257
+ .text-wrap {
1258
+ text-wrap: wrap;
1259
+ }
1260
+ .text-gray-400 {
1261
+ color: var(--color-gray-400);
1262
+ }
1082
1263
  .text-gray-800 {
1083
1264
  color: var(--color-gray-800);
1084
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
+ }
1085
1278
  .text-white {
1086
1279
  color: var(--color-white);
1087
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
+ }
1088
1290
  .text-zinc-500 {
1089
1291
  color: var(--color-zinc-500);
1090
1292
  }
@@ -1135,9 +1337,15 @@
1135
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));
1136
1338
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1137
1339
  }
1340
+ .ring-black {
1341
+ --tw-ring-color: var(--color-black);
1342
+ }
1138
1343
  .ring-black\/5 {
1139
1344
  --tw-ring-color: color-mix(in oklab, var(--color-black) 5%, transparent);
1140
1345
  }
1346
+ .ring-zinc-950 {
1347
+ --tw-ring-color: var(--color-zinc-950);
1348
+ }
1141
1349
  .ring-zinc-950\/10 {
1142
1350
  --tw-ring-color: color-mix(in oklab, var(--color-zinc-950) 10%, transparent);
1143
1351
  }
@@ -1148,12 +1356,23 @@
1148
1356
  .-outline-offset-1 {
1149
1357
  outline-offset: calc(1px * -1);
1150
1358
  }
1359
+ .outline-black {
1360
+ outline-color: var(--color-black);
1361
+ }
1151
1362
  .outline-black\/\(--ring-opacity\) {
1152
1363
  outline-color: color-mix(in oklab, var(--color-black) var(--ring-opacity), transparent);
1153
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
+ }
1154
1369
  .filter {
1155
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,);
1156
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
+ }
1157
1376
  .transition {
1158
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;
1159
1378
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -1286,6 +1505,13 @@
1286
1505
  border-bottom-width: 0px;
1287
1506
  }
1288
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
+ }
1289
1515
  .group-has-data-disabled\:stroke-zinc-600 {
1290
1516
  &:is(:where(.group):has(*[data-disabled]) *) {
1291
1517
  stroke: var(--color-zinc-600);
@@ -1328,6 +1554,15 @@
1328
1554
  --tw-ring-color: var(--switch-ring);
1329
1555
  }
1330
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
+ }
1331
1566
  .group-data-disabled\:border-zinc-950\/25 {
1332
1567
  &:is(:where(.group)[data-disabled] *) {
1333
1568
  border-color: color-mix(in oklab, var(--color-zinc-950) 25%, transparent);
@@ -1392,18 +1627,6 @@
1392
1627
  outline-color: var(--color-blue-500);
1393
1628
  }
1394
1629
  }
1395
- .group-data-hover\:border-zinc-950\/30 {
1396
- &:is(:where(.group)[data-hover] *) {
1397
- border-color: color-mix(in oklab, var(--color-zinc-950) 30%, transparent);
1398
- }
1399
- }
1400
- .group-data-hover\:group-data-checked\:border-transparent {
1401
- &:is(:where(.group)[data-hover] *) {
1402
- &:is(:where(.group)[data-checked] *) {
1403
- border-color: transparent;
1404
- }
1405
- }
1406
- }
1407
1630
  .group-data-indeterminate\:opacity-0 {
1408
1631
  &:is(:where(.group)[data-indeterminate] *) {
1409
1632
  opacity: 0%;
@@ -1414,6 +1637,37 @@
1414
1637
  opacity: 100%;
1415
1638
  }
1416
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
+ }
1417
1671
  .placeholder\:text-zinc-500 {
1418
1672
  &::placeholder {
1419
1673
  color: var(--color-zinc-500);
@@ -1575,16 +1829,52 @@
1575
1829
  border-color: transparent;
1576
1830
  }
1577
1831
  }
1578
- .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 {
1839
+ &::after {
1840
+ content: var(--tw-content);
1841
+ border-right-color: var(--color-white);
1842
+ }
1843
+ }
1844
+ .after\:border-r-yellow-400 {
1845
+ &::after {
1846
+ content: var(--tw-content);
1847
+ border-right-color: var(--color-yellow-400);
1848
+ }
1849
+ }
1850
+ .after\:border-r-zinc-400 {
1579
1851
  &::after {
1580
1852
  content: var(--tw-content);
1581
- border-right-color: var(--color-yellow-600);
1853
+ border-right-color: var(--color-zinc-400);
1582
1854
  }
1583
1855
  }
1584
- .after\:border-l-yellow-600 {
1856
+ .after\:border-l-green-600 {
1585
1857
  &::after {
1586
1858
  content: var(--tw-content);
1587
- border-left-color: var(--color-yellow-600);
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);
1588
1878
  }
1589
1879
  }
1590
1880
  .after\:shadow-\[inset_0_1px_--theme\(--color-white\/15\%\)\] {
@@ -1619,6 +1909,20 @@
1619
1909
  border-style: none;
1620
1910
  }
1621
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
+ }
1622
1926
  .hover\:bg-red-600 {
1623
1927
  &:hover {
1624
1928
  @media (hover: hover) {
@@ -1626,10 +1930,10 @@
1626
1930
  }
1627
1931
  }
1628
1932
  }
1629
- .hover\:bg-zinc-400\/30 {
1933
+ .hover\:bg-zinc-100 {
1630
1934
  &:hover {
1631
1935
  @media (hover: hover) {
1632
- background-color: color-mix(in oklab, var(--color-zinc-400) 30%, transparent);
1936
+ background-color: var(--color-zinc-100);
1633
1937
  }
1634
1938
  }
1635
1939
  }
@@ -1647,6 +1951,13 @@
1647
1951
  }
1648
1952
  }
1649
1953
  }
1954
+ .hover\:text-indigo-500 {
1955
+ &:hover {
1956
+ @media (hover: hover) {
1957
+ color: var(--color-indigo-500);
1958
+ }
1959
+ }
1960
+ }
1650
1961
  .hover\:text-zinc-950 {
1651
1962
  &:hover {
1652
1963
  @media (hover: hover) {
@@ -1661,6 +1972,13 @@
1661
1972
  }
1662
1973
  }
1663
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
+ }
1664
1982
  .hover\:\[--btn-icon\:var\(--color-zinc-300\)\] {
1665
1983
  &:hover {
1666
1984
  @media (hover: hover) {
@@ -1728,6 +2046,23 @@
1728
2046
  outline-style: none;
1729
2047
  }
1730
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
+ }
1731
2066
  .active\:bg-red-700 {
1732
2067
  &:active {
1733
2068
  background-color: var(--color-red-700);
@@ -1801,23 +2136,6 @@
1801
2136
  }
1802
2137
  }
1803
2138
  }
1804
- .has-data-focus\:after\:ring-2 {
1805
- &:has(*[data-focus]) {
1806
- &::after {
1807
- content: var(--tw-content);
1808
- --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentColor);
1809
- box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1810
- }
1811
- }
1812
- }
1813
- .has-data-focus\:after\:ring-blue-500 {
1814
- &:has(*[data-focus]) {
1815
- &::after {
1816
- content: var(--tw-content);
1817
- --tw-ring-color: var(--color-blue-500);
1818
- }
1819
- }
1820
- }
1821
2139
  .has-data-invalid\:before\:shadow-red-500\/10 {
1822
2140
  &:has(*[data-invalid]) {
1823
2141
  &::before {
@@ -1847,6 +2165,15 @@
1847
2165
  --tw-ring-color: var(--switch-bg-ring);
1848
2166
  }
1849
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
+ }
1850
2177
  .data-closed\:translate-y-12 {
1851
2178
  &[data-closed] {
1852
2179
  --tw-translate-y: calc(var(--spacing) * 12);
@@ -1863,6 +2190,11 @@
1863
2190
  pointer-events: none;
1864
2191
  }
1865
2192
  }
2193
+ .data-disabled\:cursor-not-allowed {
2194
+ &[data-disabled] {
2195
+ cursor: not-allowed;
2196
+ }
2197
+ }
1866
2198
  .data-disabled\:border-zinc-950\/20 {
1867
2199
  &[data-disabled] {
1868
2200
  border-color: color-mix(in oklab, var(--color-zinc-950) 20%, transparent);
@@ -1883,6 +2215,13 @@
1883
2215
  opacity: 100%;
1884
2216
  }
1885
2217
  }
2218
+ .data-disabled\:file\:cursor-not-allowed {
2219
+ &[data-disabled] {
2220
+ &::file-selector-button {
2221
+ cursor: not-allowed;
2222
+ }
2223
+ }
2224
+ }
1886
2225
  .data-disabled\:data-checked\:bg-zinc-200 {
1887
2226
  &[data-disabled] {
1888
2227
  &[data-checked] {
@@ -1919,32 +2258,17 @@
1919
2258
  outline-color: var(--color-blue-500);
1920
2259
  }
1921
2260
  }
1922
- .data-hover\:border-zinc-950\/20 {
1923
- &[data-hover] {
1924
- border-color: color-mix(in oklab, var(--color-zinc-950) 20%, transparent);
1925
- }
1926
- }
1927
- .data-hover\:ring-black\/15 {
1928
- &[data-hover] {
1929
- --tw-ring-color: color-mix(in oklab, var(--color-black) 15%, transparent);
1930
- }
1931
- }
1932
- .data-hover\:data-checked\:ring-\(--switch-bg-ring\) {
1933
- &[data-hover] {
1934
- &[data-checked] {
1935
- --tw-ring-color: var(--switch-bg-ring);
1936
- }
1937
- }
1938
- }
1939
2261
  .data-invalid\:border-red-500 {
1940
2262
  &[data-invalid] {
1941
2263
  border-color: var(--color-red-500);
1942
2264
  }
1943
2265
  }
1944
- .data-invalid\:data-hover\:border-red-500 {
2266
+ .data-invalid\:hover\:border-red-500 {
1945
2267
  &[data-invalid] {
1946
- &[data-hover] {
1947
- border-color: var(--color-red-500);
2268
+ &:hover {
2269
+ @media (hover: hover) {
2270
+ border-color: var(--color-red-500);
2271
+ }
1948
2272
  }
1949
2273
  }
1950
2274
  }
@@ -2017,10 +2341,10 @@
2017
2341
  }
2018
2342
  }
2019
2343
  }
2020
- .\*\:data-\[slot\=header\]\:bg-red-600\/90 {
2344
+ .\*\:data-\[slot\=header\]\:bg-red-600\/80 {
2021
2345
  :is(& > *) {
2022
2346
  &[data-slot="header"] {
2023
- 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);
2024
2348
  }
2025
2349
  }
2026
2350
  }
@@ -2286,6 +2610,20 @@
2286
2610
  }
2287
2611
  }
2288
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
+ }
2289
2627
  .sm\:focus-within\:after\:ring-2 {
2290
2628
  @media (width >= 40rem) {
2291
2629
  &:focus-within {
@@ -2372,11 +2710,13 @@
2372
2710
  }
2373
2711
  }
2374
2712
  }
2375
- .dark\:data-invalid\:data-hover\:border-red-500 {
2713
+ .dark\:data-invalid\:hover\:border-red-500 {
2376
2714
  @media (prefers-color-scheme: dark) {
2377
2715
  &[data-invalid] {
2378
- &[data-hover] {
2379
- border-color: var(--color-red-500);
2716
+ &:hover {
2717
+ @media (hover: hover) {
2718
+ border-color: var(--color-red-500);
2719
+ }
2380
2720
  }
2381
2721
  }
2382
2722
  }
@@ -2537,6 +2877,10 @@
2537
2877
  inherits: false;
2538
2878
  initial-value: solid;
2539
2879
  }
2880
+ @property --tw-leading {
2881
+ syntax: "*";
2882
+ inherits: false;
2883
+ }
2540
2884
  @property --tw-font-weight {
2541
2885
  syntax: "*";
2542
2886
  inherits: false;
@@ -2637,6 +2981,42 @@
2637
2981
  syntax: "*";
2638
2982
  inherits: false;
2639
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
+ }
2640
3020
  @property --tw-duration {
2641
3021
  syntax: "*";
2642
3022
  inherits: false;