@nocoo/basalt 2.0.0 → 2.0.2

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 (37) hide show
  1. package/dist/components/alert-dialog.js +1 -0
  2. package/dist/components/alert-dialog.js.map +1 -1
  3. package/dist/components/button.js +2 -2
  4. package/dist/components/button.js.map +1 -1
  5. package/dist/components/description-list.d.ts +21 -0
  6. package/dist/components/description-list.js +35 -0
  7. package/dist/components/description-list.js.map +1 -0
  8. package/dist/components/dialog.js +2 -1
  9. package/dist/components/dialog.js.map +1 -1
  10. package/dist/components/layer-card.d.ts +23 -4
  11. package/dist/components/layer-card.js +83 -50
  12. package/dist/components/layer-card.js.map +1 -1
  13. package/dist/components/page-header.d.ts +4 -4
  14. package/dist/components/page-header.js +20 -23
  15. package/dist/components/page-header.js.map +1 -1
  16. package/dist/components/section-rule.d.ts +10 -0
  17. package/dist/components/section-rule.js +44 -0
  18. package/dist/components/section-rule.js.map +1 -0
  19. package/dist/components/sheet.d.ts +4 -4
  20. package/dist/components/sheet.js +5 -4
  21. package/dist/components/sheet.js.map +1 -1
  22. package/dist/components/sidebar.js +1 -0
  23. package/dist/components/sidebar.js.map +1 -1
  24. package/dist/components/table.js +6 -5
  25. package/dist/components/table.js.map +1 -1
  26. package/dist/index.d.ts +1 -0
  27. package/dist/index.js +26 -25
  28. package/dist/providers/accent.d.ts +3 -2
  29. package/dist/providers/accent.js +166 -44
  30. package/dist/providers/accent.js.map +1 -1
  31. package/dist/styles/standalone.css +269 -92
  32. package/dist/styles/tailwind.css +1 -0
  33. package/dist/styles/tokens.css +69 -0
  34. package/dist/utils/control-surface.d.ts +1 -1
  35. package/dist/utils/control-surface.js +1 -1
  36. package/dist/utils/control-surface.js.map +1 -1
  37. package/package.json +1 -1
@@ -26,10 +26,13 @@
26
26
  --font-weight-semibold: 600;
27
27
  --tracking-tight: -0.025em;
28
28
  --tracking-wide: 0.025em;
29
+ --tracking-wider: 0.05em;
30
+ --tracking-widest: 0.1em;
29
31
  --radius-sm: 0.25rem;
30
32
  --radius-md: 0.375rem;
31
33
  --radius-lg: 0.5rem;
32
34
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
35
+ --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
33
36
  --blur-xs: 4px;
34
37
  --blur-md: 12px;
35
38
  --default-transition-duration: 150ms;
@@ -63,6 +66,8 @@
63
66
  --basalt-border: 220 13% 88%;
64
67
  --basalt-input: 220 13% 88%;
65
68
  --basalt-ring: 217 91% 60%;
69
+ --basalt-control-fill: hsl(var(--basalt-secondary));
70
+ --basalt-zebra-fill: hsl(var(--basalt-bright));
66
71
  --basalt-radius: 0.75rem;
67
72
  --basalt-radius-island: 20px;
68
73
  --basalt-radius-card: 14px;
@@ -139,6 +144,8 @@
139
144
  --basalt-border: 0 0% 16%;
140
145
  --basalt-input: 0 0% 18%;
141
146
  --basalt-ring: 217 91% 60%;
147
+ --basalt-control-fill: hsl(var(--basalt-secondary));
148
+ --basalt-zebra-fill: hsl(var(--basalt-bright));
142
149
  --basalt-chart-1: 217 91% 65%;
143
150
  --basalt-chart-2: 200 90% 60%;
144
151
  --basalt-chart-3: 186 80% 50%;
@@ -182,6 +189,58 @@
182
189
  --basalt-heatmap-orange-3: 30 60% 45%;
183
190
  --basalt-heatmap-orange-4: 30 65% 55%;
184
191
  }
192
+ [data-basalt-surface-root] {
193
+ background: hsl(var(--basalt-card));
194
+ --basalt-control-fill: hsl(var(--basalt-card));
195
+ --basalt-zebra-fill: hsl(var(--basalt-secondary));
196
+ }
197
+ [data-basalt-surface-root] [data-basalt-surface] {
198
+ background: hsl(var(--basalt-secondary));
199
+ --basalt-control-fill: hsl(var(--basalt-secondary));
200
+ --basalt-zebra-fill: hsl(var(--basalt-bright));
201
+ }
202
+ [data-basalt-surface-root] [data-basalt-surface] [data-basalt-surface] {
203
+ background: hsl(var(--basalt-bright));
204
+ --basalt-control-fill: hsl(var(--basalt-bright));
205
+ --basalt-zebra-fill: transparent;
206
+ }
207
+ [data-basalt-surface-root] [data-basalt-surface] [data-basalt-surface] [data-basalt-surface] {
208
+ background: transparent;
209
+ --basalt-control-fill: hsl(var(--basalt-bright));
210
+ --basalt-zebra-fill: transparent;
211
+ }
212
+ [data-basalt-surface]:not([data-basalt-surface-root] *):not([data-basalt-surface] *) {
213
+ background: hsl(var(--basalt-card));
214
+ --basalt-control-fill: hsl(var(--basalt-card));
215
+ --basalt-zebra-fill: hsl(var(--basalt-secondary));
216
+ }
217
+ [data-basalt-surface]:not([data-basalt-surface-root] *) [data-basalt-surface] {
218
+ background: hsl(var(--basalt-secondary));
219
+ --basalt-control-fill: hsl(var(--basalt-secondary));
220
+ --basalt-zebra-fill: hsl(var(--basalt-bright));
221
+ }
222
+ [data-basalt-surface]:not([data-basalt-surface-root] *) [data-basalt-surface] [data-basalt-surface] {
223
+ background: hsl(var(--basalt-bright));
224
+ --basalt-control-fill: hsl(var(--basalt-bright));
225
+ --basalt-zebra-fill: transparent;
226
+ }
227
+ [data-basalt-surface]:not([data-basalt-surface-root] *) [data-basalt-surface] [data-basalt-surface] [data-basalt-surface] {
228
+ background: transparent;
229
+ --basalt-control-fill: hsl(var(--basalt-bright));
230
+ --basalt-zebra-fill: transparent;
231
+ }
232
+ [data-basalt-table] tbody tr[aria-selected="true"] td {
233
+ background: hsl(var(--basalt-accent));
234
+ }
235
+ [data-basalt-table] tbody tr:hover:not([aria-selected="true"]) td {
236
+ background: hsl(var(--basalt-primary));
237
+ @supports (color: color-mix(in lab, red, red)) {
238
+ background: color-mix(in oklab, hsl(var(--basalt-primary)) 3%, var(--basalt-control-fill));
239
+ }
240
+ }
241
+ [data-basalt-table] tbody tr:nth-child(even):not([aria-selected="true"]):not(:hover) td {
242
+ background: var(--basalt-zebra-fill);
243
+ }
185
244
  @keyframes basalt-accordion-down {
186
245
  from {
187
246
  height: 0;
@@ -326,6 +385,9 @@
326
385
  .relative {
327
386
  position: relative;
328
387
  }
388
+ .sticky {
389
+ position: sticky;
390
+ }
329
391
  .inset-0 {
330
392
  inset: 0px;
331
393
  }
@@ -344,6 +406,9 @@
344
406
  .top-2 {
345
407
  top: calc(var(--spacing) * 2);
346
408
  }
409
+ .top-full {
410
+ top: 100%;
411
+ }
347
412
  .right-0 {
348
413
  right: 0px;
349
414
  }
@@ -362,18 +427,30 @@
362
427
  .left-1\/2 {
363
428
  left: calc(1 / 2 * 100%);
364
429
  }
430
+ .z-20 {
431
+ z-index: 20;
432
+ }
365
433
  .z-50 {
366
434
  z-index: 50;
367
435
  }
436
+ .-order-1 {
437
+ order: calc(1 * -1);
438
+ }
439
+ .order-1 {
440
+ order: 1;
441
+ }
442
+ .order-last {
443
+ order: 9999;
444
+ }
368
445
  .m-0 {
369
446
  margin: 0px;
370
447
  }
448
+ .-mx-1 {
449
+ margin-inline: calc(var(--spacing) * -1);
450
+ }
371
451
  .mx-1\.5 {
372
452
  margin-inline: calc(var(--spacing) * 1.5);
373
453
  }
374
- .-my-2 {
375
- margin-block: calc(var(--spacing) * -2);
376
- }
377
454
  .my-2 {
378
455
  margin-block: calc(var(--spacing) * 2);
379
456
  }
@@ -392,6 +469,9 @@
392
469
  .mr-1 {
393
470
  margin-right: var(--spacing);
394
471
  }
472
+ .mr-2 {
473
+ margin-right: calc(var(--spacing) * 2);
474
+ }
395
475
  .mb-1 {
396
476
  margin-bottom: var(--spacing);
397
477
  }
@@ -404,6 +484,9 @@
404
484
  .-ml-0\.5 {
405
485
  margin-left: calc(var(--spacing) * -0.5);
406
486
  }
487
+ .ml-auto {
488
+ margin-left: auto;
489
+ }
407
490
  .box-border {
408
491
  box-sizing: border-box;
409
492
  }
@@ -447,6 +530,10 @@
447
530
  width: calc(var(--spacing) * 4);
448
531
  height: calc(var(--spacing) * 4);
449
532
  }
533
+ .size-8 {
534
+ width: calc(var(--spacing) * 8);
535
+ height: calc(var(--spacing) * 8);
536
+ }
450
537
  .size-full {
451
538
  width: 100%;
452
539
  height: 100%;
@@ -490,6 +577,9 @@
490
577
  .h-10 {
491
578
  height: calc(var(--spacing) * 10);
492
579
  }
580
+ .h-11 {
581
+ height: calc(var(--spacing) * 11);
582
+ }
493
583
  .h-14 {
494
584
  height: calc(var(--spacing) * 14);
495
585
  }
@@ -511,6 +601,9 @@
511
601
  .h-screen {
512
602
  height: 100vh;
513
603
  }
604
+ .max-h-\[300px\] {
605
+ max-height: 300px;
606
+ }
514
607
  .max-h-\[calc\(100vh-2rem\)\] {
515
608
  max-height: calc(100vh - 2rem);
516
609
  }
@@ -589,12 +682,18 @@
589
682
  .w-80 {
590
683
  width: calc(var(--spacing) * 80);
591
684
  }
685
+ .w-\[68px\] {
686
+ width: 68px;
687
+ }
592
688
  .w-\[calc\(100\%-0\.75rem\)\] {
593
689
  width: calc(100% - 0.75rem);
594
690
  }
595
691
  .w-\[var\(--radix-select-trigger-width\)\] {
596
692
  width: var(--radix-select-trigger-width);
597
693
  }
694
+ .w-auto\! {
695
+ width: auto !important;
696
+ }
598
697
  .w-fit {
599
698
  width: fit-content;
600
699
  }
@@ -616,6 +715,9 @@
616
715
  .min-w-0 {
617
716
  min-width: 0px;
618
717
  }
718
+ .min-w-4 {
719
+ min-width: calc(var(--spacing) * 4);
720
+ }
619
721
  .min-w-9 {
620
722
  min-width: calc(var(--spacing) * 9);
621
723
  }
@@ -657,6 +759,9 @@
657
759
  --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
658
760
  translate: var(--tw-translate-x) var(--tw-translate-y);
659
761
  }
762
+ .rotate-180 {
763
+ rotate: 180deg;
764
+ }
660
765
  .animate-basalt-loader {
661
766
  animation: basalt-loader-spin 1.4s linear infinite;
662
767
  }
@@ -672,6 +777,9 @@
672
777
  .cursor-default {
673
778
  cursor: default;
674
779
  }
780
+ .cursor-not-allowed {
781
+ cursor: not-allowed;
782
+ }
675
783
  .cursor-pointer {
676
784
  cursor: pointer;
677
785
  }
@@ -720,6 +828,9 @@
720
828
  .justify-end {
721
829
  justify-content: flex-end;
722
830
  }
831
+ .justify-start {
832
+ justify-content: flex-start;
833
+ }
723
834
  .gap-0\.5 {
724
835
  gap: calc(var(--spacing) * 0.5);
725
836
  }
@@ -761,11 +872,22 @@
761
872
  margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));
762
873
  margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));
763
874
  }
875
+ :where(.space-y-3 > :not(:last-child)) {
876
+ --tw-space-y-reverse: 0;
877
+ margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));
878
+ margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));
879
+ }
764
880
  :where(.space-y-4 > :not(:last-child)) {
765
881
  --tw-space-y-reverse: 0;
766
882
  margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));
767
883
  margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));
768
884
  }
885
+ .gap-x-8 {
886
+ column-gap: calc(var(--spacing) * 8);
887
+ }
888
+ .gap-y-3 {
889
+ row-gap: calc(var(--spacing) * 3);
890
+ }
769
891
  .self-stretch {
770
892
  align-self: stretch;
771
893
  }
@@ -783,18 +905,27 @@
783
905
  .overflow-x-auto {
784
906
  overflow-x: auto;
785
907
  }
908
+ .overflow-x-hidden {
909
+ overflow-x: hidden;
910
+ }
786
911
  .overflow-x-hidden\! {
787
912
  overflow-x: hidden !important;
788
913
  }
789
914
  .overflow-y-auto {
790
915
  overflow-y: auto;
791
916
  }
917
+ .overflow-y-hidden {
918
+ overflow-y: hidden;
919
+ }
792
920
  .overflow-y-hidden\! {
793
921
  overflow-y: hidden !important;
794
922
  }
795
923
  .rounded-\[4px\] {
796
924
  border-radius: 4px;
797
925
  }
926
+ .rounded-\[16px\] {
927
+ border-radius: 16px;
928
+ }
798
929
  .rounded-\[inherit\] {
799
930
  border-radius: inherit;
800
931
  }
@@ -810,6 +941,9 @@
810
941
  .rounded-full {
811
942
  border-radius: calc(infinity * 1px);
812
943
  }
944
+ .rounded-lg {
945
+ border-radius: var(--radius-lg);
946
+ }
813
947
  .rounded-md {
814
948
  border-radius: var(--radius-md);
815
949
  }
@@ -859,6 +993,10 @@
859
993
  border-left-style: var(--tw-border-style);
860
994
  border-left-width: 2px;
861
995
  }
996
+ .border-dashed {
997
+ --tw-border-style: dashed;
998
+ border-style: dashed;
999
+ }
862
1000
  .border-none {
863
1001
  --tw-border-style: none;
864
1002
  border-style: none;
@@ -878,15 +1016,15 @@
878
1016
  .border-l-transparent {
879
1017
  border-left-color: transparent;
880
1018
  }
1019
+ .bg-basalt-accent {
1020
+ background-color: hsl(var(--basalt-accent));
1021
+ }
881
1022
  .bg-basalt-background {
882
1023
  background-color: hsl(var(--basalt-background));
883
1024
  }
884
1025
  .bg-basalt-border {
885
1026
  background-color: hsl(var(--basalt-border));
886
1027
  }
887
- .bg-basalt-bright {
888
- background-color: hsl(var(--basalt-bright));
889
- }
890
1028
  .bg-basalt-card {
891
1029
  background-color: hsl(var(--basalt-card));
892
1030
  }
@@ -896,6 +1034,9 @@
896
1034
  .bg-basalt-chart-14 {
897
1035
  background-color: hsl(var(--basalt-chart-14));
898
1036
  }
1037
+ .bg-basalt-control {
1038
+ background-color: var(--basalt-control-fill);
1039
+ }
899
1040
  .bg-basalt-danger {
900
1041
  background-color: hsl(var(--basalt-danger));
901
1042
  }
@@ -991,6 +1132,9 @@
991
1132
  .p-0\.5 {
992
1133
  padding: calc(var(--spacing) * 0.5);
993
1134
  }
1135
+ .p-1 {
1136
+ padding: var(--spacing);
1137
+ }
994
1138
  .p-2 {
995
1139
  padding: calc(var(--spacing) * 2);
996
1140
  }
@@ -1000,9 +1144,6 @@
1000
1144
  .p-4 {
1001
1145
  padding: calc(var(--spacing) * 4);
1002
1146
  }
1003
- .p-5 {
1004
- padding: calc(var(--spacing) * 5);
1005
- }
1006
1147
  .p-6 {
1007
1148
  padding: calc(var(--spacing) * 6);
1008
1149
  }
@@ -1015,6 +1156,9 @@
1015
1156
  .px-1 {
1016
1157
  padding-inline: var(--spacing);
1017
1158
  }
1159
+ .px-1\.5 {
1160
+ padding-inline: calc(var(--spacing) * 1.5);
1161
+ }
1018
1162
  .px-2 {
1019
1163
  padding-inline: calc(var(--spacing) * 2);
1020
1164
  }
@@ -1030,6 +1174,9 @@
1030
1174
  .px-6 {
1031
1175
  padding-inline: calc(var(--spacing) * 6);
1032
1176
  }
1177
+ .py-0 {
1178
+ padding-block: 0px;
1179
+ }
1033
1180
  .py-0\.5 {
1034
1181
  padding-block: calc(var(--spacing) * 0.5);
1035
1182
  }
@@ -1042,12 +1189,21 @@
1042
1189
  .py-2 {
1043
1190
  padding-block: calc(var(--spacing) * 2);
1044
1191
  }
1192
+ .py-2\.5 {
1193
+ padding-block: calc(var(--spacing) * 2.5);
1194
+ }
1045
1195
  .py-3 {
1046
1196
  padding-block: calc(var(--spacing) * 3);
1047
1197
  }
1198
+ .py-6 {
1199
+ padding-block: calc(var(--spacing) * 6);
1200
+ }
1048
1201
  .py-8 {
1049
1202
  padding-block: calc(var(--spacing) * 8);
1050
1203
  }
1204
+ .pt-3 {
1205
+ padding-top: calc(var(--spacing) * 3);
1206
+ }
1051
1207
  .pr-1 {
1052
1208
  padding-right: var(--spacing);
1053
1209
  }
@@ -1066,6 +1222,9 @@
1066
1222
  .pb-1 {
1067
1223
  padding-bottom: var(--spacing);
1068
1224
  }
1225
+ .pl-3 {
1226
+ padding-left: calc(var(--spacing) * 3);
1227
+ }
1069
1228
  .pl-4 {
1070
1229
  padding-left: calc(var(--spacing) * 4);
1071
1230
  }
@@ -1108,6 +1267,9 @@
1108
1267
  font-size: var(--text-xs);
1109
1268
  line-height: var(--tw-leading, var(--text-xs--line-height));
1110
1269
  }
1270
+ .text-\[10px\] {
1271
+ font-size: 10px;
1272
+ }
1111
1273
  .text-\[11px\] {
1112
1274
  font-size: 11px;
1113
1275
  }
@@ -1131,6 +1293,10 @@
1131
1293
  --tw-font-weight: var(--font-weight-semibold);
1132
1294
  font-weight: var(--font-weight-semibold);
1133
1295
  }
1296
+ .tracking-\[0\.14em\] {
1297
+ --tw-tracking: 0.14em;
1298
+ letter-spacing: 0.14em;
1299
+ }
1134
1300
  .tracking-tight {
1135
1301
  --tw-tracking: var(--tracking-tight);
1136
1302
  letter-spacing: var(--tracking-tight);
@@ -1139,6 +1305,20 @@
1139
1305
  --tw-tracking: var(--tracking-wide);
1140
1306
  letter-spacing: var(--tracking-wide);
1141
1307
  }
1308
+ .tracking-wider {
1309
+ --tw-tracking: var(--tracking-wider);
1310
+ letter-spacing: var(--tracking-wider);
1311
+ }
1312
+ .tracking-widest {
1313
+ --tw-tracking: var(--tracking-widest);
1314
+ letter-spacing: var(--tracking-widest);
1315
+ }
1316
+ .wrap-break-word {
1317
+ overflow-wrap: break-word;
1318
+ }
1319
+ .text-basalt-card-foreground {
1320
+ color: hsl(var(--basalt-card-foreground));
1321
+ }
1142
1322
  .text-basalt-danger {
1143
1323
  color: hsl(var(--basalt-danger));
1144
1324
  }
@@ -1238,6 +1418,12 @@
1238
1418
  .ring-basalt-border {
1239
1419
  --tw-ring-color: hsl(var(--basalt-border));
1240
1420
  }
1421
+ .ring-basalt-border\/40 {
1422
+ --tw-ring-color: hsl(var(--basalt-border));
1423
+ @supports (color: color-mix(in lab, red, red)) {
1424
+ --tw-ring-color: color-mix(in oklab, hsl(var(--basalt-border)) 40%, transparent);
1425
+ }
1426
+ }
1241
1427
  .ring-basalt-border\/70 {
1242
1428
  --tw-ring-color: hsl(var(--basalt-border));
1243
1429
  @supports (color: color-mix(in lab, red, red)) {
@@ -1256,9 +1442,6 @@
1256
1442
  outline-style: var(--tw-outline-style);
1257
1443
  outline-width: 1px;
1258
1444
  }
1259
- .filter {
1260
- 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,);
1261
- }
1262
1445
  .backdrop-blur-md {
1263
1446
  --tw-backdrop-blur: blur(var(--blur-md));
1264
1447
  -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,);
@@ -1279,6 +1462,11 @@
1279
1462
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
1280
1463
  transition-duration: var(--tw-duration, var(--default-transition-duration));
1281
1464
  }
1465
+ .transition-all {
1466
+ transition-property: all;
1467
+ transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
1468
+ transition-duration: var(--tw-duration, var(--default-transition-duration));
1469
+ }
1282
1470
  .transition-colors {
1283
1471
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;
1284
1472
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -1293,6 +1481,14 @@
1293
1481
  --tw-duration: 200ms;
1294
1482
  transition-duration: 200ms;
1295
1483
  }
1484
+ .duration-300 {
1485
+ --tw-duration: 300ms;
1486
+ transition-duration: 300ms;
1487
+ }
1488
+ .ease-in-out {
1489
+ --tw-ease: var(--ease-in-out);
1490
+ transition-timing-function: var(--ease-in-out);
1491
+ }
1296
1492
  .ease-out {
1297
1493
  --tw-ease: var(--ease-out);
1298
1494
  transition-timing-function: var(--ease-out);
@@ -1305,6 +1501,9 @@
1305
1501
  -webkit-user-select: none;
1306
1502
  user-select: none;
1307
1503
  }
1504
+ :is(.\*\:pointer-events-auto > *) {
1505
+ pointer-events: auto;
1506
+ }
1308
1507
  .group-data-\[state\=checked\]\:block:is(:where(.group)[data-state="checked"] *) {
1309
1508
  display: block;
1310
1509
  }
@@ -1339,19 +1538,16 @@
1339
1538
  border-top-left-radius: calc(var(--basalt-radius) - 2px);
1340
1539
  border-bottom-left-radius: calc(var(--basalt-radius) - 2px);
1341
1540
  }
1342
- .first\:rounded-tl-basalt-md:first-child {
1343
- border-top-left-radius: calc(var(--basalt-radius) - 2px);
1344
- }
1345
1541
  .last\:rounded-r-basalt-md:last-child {
1346
1542
  border-top-right-radius: calc(var(--basalt-radius) - 2px);
1347
1543
  border-bottom-right-radius: calc(var(--basalt-radius) - 2px);
1348
1544
  }
1349
- .last\:rounded-tr-basalt-md:last-child {
1350
- border-top-right-radius: calc(var(--basalt-radius) - 2px);
1351
- }
1352
1545
  .focus-within\:z-2:focus-within {
1353
1546
  z-index: 2;
1354
1547
  }
1548
+ .focus-within\:border-basalt-ring:focus-within {
1549
+ border-color: hsl(var(--basalt-ring));
1550
+ }
1355
1551
  @media (hover: hover) {
1356
1552
  .hover\:bg-basalt-accent:hover {
1357
1553
  background-color: hsl(var(--basalt-accent));
@@ -1446,9 +1642,16 @@
1446
1642
  .focus-visible\:border-basalt-ring:focus-visible {
1447
1643
  border-color: hsl(var(--basalt-ring));
1448
1644
  }
1645
+ .focus-visible\:border-transparent:focus-visible {
1646
+ border-color: transparent;
1647
+ }
1449
1648
  .focus-visible\:bg-basalt-accent:focus-visible {
1450
1649
  background-color: hsl(var(--basalt-accent));
1451
1650
  }
1651
+ .focus-visible\:ring-0:focus-visible {
1652
+ --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
1653
+ box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
1654
+ }
1452
1655
  .focus-visible\:ring-1:focus-visible {
1453
1656
  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
1454
1657
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -1520,6 +1723,18 @@
1520
1723
  background-color: transparent;
1521
1724
  }
1522
1725
  }
1726
+ .data-\[disabled\=true\]\:pointer-events-none[data-disabled="true"] {
1727
+ pointer-events: none;
1728
+ }
1729
+ .data-\[disabled\=true\]\:opacity-50[data-disabled="true"] {
1730
+ opacity: 50%;
1731
+ }
1732
+ .data-\[selected\=true\]\:bg-basalt-accent[data-selected="true"] {
1733
+ background-color: hsl(var(--basalt-accent));
1734
+ }
1735
+ .data-\[selected\=true\]\:text-basalt-accent-foreground[data-selected="true"] {
1736
+ color: hsl(var(--basalt-accent-foreground));
1737
+ }
1523
1738
  .data-\[state\=active\]\:animate-basalt-tab-in[data-state="active"] {
1524
1739
  animation: basalt-tab-in 180ms ease-out;
1525
1740
  }
@@ -1596,6 +1811,9 @@
1596
1811
  }
1597
1812
  }
1598
1813
  @media (width >= 40rem) {
1814
+ .sm\:inline-block {
1815
+ display: inline-block;
1816
+ }
1599
1817
  .sm\:w-72 {
1600
1818
  width: calc(var(--spacing) * 72);
1601
1819
  }
@@ -1608,9 +1826,15 @@
1608
1826
  .sm\:w-\[48rem\] {
1609
1827
  width: 48rem;
1610
1828
  }
1829
+ .sm\:grid-cols-1 {
1830
+ grid-template-columns: repeat(1, minmax(0, 1fr));
1831
+ }
1611
1832
  .sm\:grid-cols-2 {
1612
1833
  grid-template-columns: repeat(2, minmax(0, 1fr));
1613
1834
  }
1835
+ .sm\:grid-cols-3 {
1836
+ grid-template-columns: repeat(3, minmax(0, 1fr));
1837
+ }
1614
1838
  .sm\:flex-row {
1615
1839
  flex-direction: row;
1616
1840
  }
@@ -1637,8 +1861,11 @@
1637
1861
  .md\:gap-4 {
1638
1862
  gap: calc(var(--spacing) * 4);
1639
1863
  }
1640
- .md\:p-6 {
1641
- padding: calc(var(--spacing) * 6);
1864
+ .md\:rounded-basalt-island {
1865
+ border-radius: var(--basalt-radius-island);
1866
+ }
1867
+ .md\:p-5 {
1868
+ padding: calc(var(--spacing) * 5);
1642
1869
  }
1643
1870
  .md\:px-6 {
1644
1871
  padding-inline: calc(var(--spacing) * 6);
@@ -1683,6 +1910,13 @@
1683
1910
  .\[\&_\[cmdk-group-heading\]\]\:px-2 [cmdk-group-heading] {
1684
1911
  padding-inline: calc(var(--spacing) * 2);
1685
1912
  }
1913
+ .\[\&_\[cmdk-group-heading\]\]\:py-1\.5 [cmdk-group-heading] {
1914
+ padding-block: calc(var(--spacing) * 1.5);
1915
+ }
1916
+ .\[\&_\[cmdk-group-heading\]\]\:text-xs [cmdk-group-heading] {
1917
+ font-size: var(--text-xs);
1918
+ line-height: var(--tw-leading, var(--text-xs--line-height));
1919
+ }
1686
1920
  .\[\&_\[cmdk-group-heading\]\]\:font-medium [cmdk-group-heading] {
1687
1921
  --tw-font-weight: var(--font-weight-medium);
1688
1922
  font-weight: var(--font-weight-medium);
@@ -1741,6 +1975,21 @@
1741
1975
  .\[\&_\[data-title\]\]\:text-basalt-warning [data-title] {
1742
1976
  color: hsl(var(--basalt-warning));
1743
1977
  }
1978
+ .has-\[\[data-slot\=input-group-addon-end\]\]\:\[\&_input\]\:pr-2:has(:is([data-slot=input-group-addon-end])) input {
1979
+ padding-right: calc(var(--spacing) * 2);
1980
+ }
1981
+ .has-\[\[data-slot\=input-group-addon-start\]\]\:\[\&_input\]\:pl-2:has(:is([data-slot=input-group-addon-start])) input {
1982
+ padding-left: calc(var(--spacing) * 2);
1983
+ }
1984
+ .has-\[\[data-slot\=input-group-suffix\]\]\:\[\&_input\]\:\[field-sizing\:content\]:has(:is([data-slot=input-group-suffix])) input {
1985
+ field-sizing: content;
1986
+ }
1987
+ .has-\[\[data-slot\=input-group-suffix\]\]\:\[\&_input\]\:flex-none:has(:is([data-slot=input-group-suffix])) input {
1988
+ flex: none;
1989
+ }
1990
+ .has-\[\[data-slot\=input-group-suffix\]\]\:\[\&_input\]\:pr-0:has(:is([data-slot=input-group-suffix])) input {
1991
+ padding-right: 0px;
1992
+ }
1744
1993
  .\[\&_svg\]\:pointer-events-none svg {
1745
1994
  pointer-events: none;
1746
1995
  }
@@ -1782,12 +2031,6 @@
1782
2031
  .data-\[state\=open\]\:\[\&_svg\]\:rotate-180[data-state="open"] svg {
1783
2032
  rotate: 180deg;
1784
2033
  }
1785
- .\[\&_td\]\:bg-basalt-accent td {
1786
- background-color: hsl(var(--basalt-accent));
1787
- }
1788
- .even\:\[\&_td\]\:bg-basalt-secondary:nth-child(even) td {
1789
- background-color: hsl(var(--basalt-secondary));
1790
- }
1791
2034
  .\[\&\>\*\:not\(\:first-child\)\]\:border-l > :not(:first-child) {
1792
2035
  border-left-style: var(--tw-border-style);
1793
2036
  border-left-width: 1px;
@@ -2051,59 +2294,6 @@
2051
2294
  inherits: false;
2052
2295
  initial-value: solid;
2053
2296
  }
2054
- @property --tw-blur {
2055
- syntax: "*";
2056
- inherits: false;
2057
- }
2058
- @property --tw-brightness {
2059
- syntax: "*";
2060
- inherits: false;
2061
- }
2062
- @property --tw-contrast {
2063
- syntax: "*";
2064
- inherits: false;
2065
- }
2066
- @property --tw-grayscale {
2067
- syntax: "*";
2068
- inherits: false;
2069
- }
2070
- @property --tw-hue-rotate {
2071
- syntax: "*";
2072
- inherits: false;
2073
- }
2074
- @property --tw-invert {
2075
- syntax: "*";
2076
- inherits: false;
2077
- }
2078
- @property --tw-opacity {
2079
- syntax: "*";
2080
- inherits: false;
2081
- }
2082
- @property --tw-saturate {
2083
- syntax: "*";
2084
- inherits: false;
2085
- }
2086
- @property --tw-sepia {
2087
- syntax: "*";
2088
- inherits: false;
2089
- }
2090
- @property --tw-drop-shadow {
2091
- syntax: "*";
2092
- inherits: false;
2093
- }
2094
- @property --tw-drop-shadow-color {
2095
- syntax: "*";
2096
- inherits: false;
2097
- }
2098
- @property --tw-drop-shadow-alpha {
2099
- syntax: "<percentage>";
2100
- inherits: false;
2101
- initial-value: 100%;
2102
- }
2103
- @property --tw-drop-shadow-size {
2104
- syntax: "*";
2105
- inherits: false;
2106
- }
2107
2297
  @property --tw-backdrop-blur {
2108
2298
  syntax: "*";
2109
2299
  inherits: false;
@@ -2190,19 +2380,6 @@
2190
2380
  --tw-ring-offset-color: #fff;
2191
2381
  --tw-ring-offset-shadow: 0 0 #0000;
2192
2382
  --tw-outline-style: solid;
2193
- --tw-blur: initial;
2194
- --tw-brightness: initial;
2195
- --tw-contrast: initial;
2196
- --tw-grayscale: initial;
2197
- --tw-hue-rotate: initial;
2198
- --tw-invert: initial;
2199
- --tw-opacity: initial;
2200
- --tw-saturate: initial;
2201
- --tw-sepia: initial;
2202
- --tw-drop-shadow: initial;
2203
- --tw-drop-shadow-color: initial;
2204
- --tw-drop-shadow-alpha: 100%;
2205
- --tw-drop-shadow-size: initial;
2206
2383
  --tw-backdrop-blur: initial;
2207
2384
  --tw-backdrop-brightness: initial;
2208
2385
  --tw-backdrop-contrast: initial;