@stainless-api/ui-primitives 0.1.0-beta.22 → 0.1.0-beta.24

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 (48) hide show
  1. package/dist/{Accordion-DLQE3Td6.js → Accordion-CL3Oarbz.js} +3 -3
  2. package/dist/{Accordion-CJL9SWwS.d.ts → Accordion-Cj5GURin.d.ts} +4 -4
  3. package/dist/{Button-DwndlytB.d.ts → Button-CxQtPObH.d.ts} +4 -4
  4. package/dist/{Button-DBhd6kU7.js → Button-DFAg4M-E.js} +3 -3
  5. package/dist/{Callout-UZQRuCQ5.js → Callout-BGkXD7D2.js} +1 -1
  6. package/dist/{Callout-CMz3Yl_5.d.ts → Callout-DlwbfFHm.d.ts} +2 -2
  7. package/dist/components/Accordion.d.ts +1 -1
  8. package/dist/components/Accordion.js +1 -1
  9. package/dist/components/Button.d.ts +1 -1
  10. package/dist/components/Button.js +1 -1
  11. package/dist/components/Callout.d.ts +1 -1
  12. package/dist/components/Callout.js +1 -1
  13. package/dist/index.d.ts +170 -5
  14. package/dist/index.js +175 -5
  15. package/dist/scripts/index.d.ts +12 -1
  16. package/dist/scripts/index.js +150 -22
  17. package/dist/styles.css +221 -99
  18. package/dist/styles.js +0 -1
  19. package/package.json +21 -12
  20. package/.turbo/turbo-build.log +0 -35
  21. package/CHANGELOG.md +0 -139
  22. package/dist/DropdownButton-DoYDi8tB.js +0 -82
  23. package/dist/DropdownButton-zcvep_xH.d.ts +0 -50
  24. package/dist/components/DropdownButton.d.ts +0 -2
  25. package/dist/components/DropdownButton.js +0 -3
  26. package/eslint.config.js +0 -2
  27. package/src/components/Accordion.tsx +0 -41
  28. package/src/components/Button.tsx +0 -95
  29. package/src/components/Callout.tsx +0 -31
  30. package/src/components/accordion.css +0 -145
  31. package/src/components/button.css +0 -187
  32. package/src/components/callout.css +0 -93
  33. package/src/components/dropdown/Dropdown.tsx +0 -51
  34. package/src/components/dropdown/DropdownButton.tsx +0 -54
  35. package/src/components/dropdown/DropdownMenu.tsx +0 -113
  36. package/src/components/dropdown/dropdown.css +0 -232
  37. package/src/index.ts +0 -5
  38. package/src/scripts/dropdown-button.ts +0 -39
  39. package/src/scripts/dropdown.ts +0 -193
  40. package/src/scripts/index.ts +0 -2
  41. package/src/styles/layout.css +0 -13
  42. package/src/styles/scales.css +0 -129
  43. package/src/styles/starlight-compat.css +0 -162
  44. package/src/styles/swatches.css +0 -87
  45. package/src/styles/theme.css +0 -49
  46. package/src/styles/typography.css +0 -169
  47. package/src/styles.css +0 -11
  48. package/tsconfig.json +0 -11
package/dist/styles.css CHANGED
@@ -276,72 +276,72 @@ body {
276
276
  color: initial;
277
277
  }
278
278
 
279
- :where(p):not(.stl-ui-not-prose *) {
279
+ :where(p:not(.stl-ui-not-prose *), .stl-ui-not-prose .stl-ui-prose p) {
280
280
  margin-top: 16px;
281
281
  }
282
282
 
283
- :where(p, li) {
284
- &:not(.stl-ui-not-prose *) {
285
- color: var(--stl-ui-foreground-secondary);
286
- }
287
- }
288
-
289
- :where(strong):not(.stl-ui-not-prose *) {
283
+ :where(strong:not(.stl-ui-not-prose *), .stl-ui-not-prose .stl-ui-prose strong) {
290
284
  color: var(--stl-ui-foreground);
291
285
  }
292
286
 
293
- :where(aside):not(.stl-ui-not-prose *) {
287
+ :where(aside:not(.stl-ui-not-prose *), .stl-ui-not-prose .stl-ui-prose aside) {
294
288
  color: var(--stl-ui-foreground);
295
289
  }
296
290
 
297
- :is(h1, h2, h3, h4, h5, h6):not(.stl-ui-not-prose *) {
291
+ :where(h1, h2, h3, h4, h5, h6):where(:not(.stl-ui-not-prose *), .stl-ui-not-prose .stl-ui-prose *) {
298
292
  color: var(--stl-ui-foreground);
299
293
  font-weight: 500;
300
294
  line-height: var(--stl-ui-typography-line-height-headings);
301
295
  }
302
296
 
303
- h1:not(.stl-ui-not-prose *) {
297
+ :where(h1:not(.stl-ui-not-prose *), .stl-ui-not-prose .stl-ui-prose h1) {
304
298
  /* Heading 1/Medium */
305
299
  font-size: var(--stl-ui-typography-text-h1);
306
300
  letter-spacing: -0.03em;
307
-
308
301
  margin-top: 64px;
309
302
  }
310
303
 
311
- h2:not(.stl-ui-not-prose *) {
304
+ :where(h2:not(.stl-ui-not-prose *), .stl-ui-not-prose .stl-ui-prose h2) {
312
305
  /* Heading 2/Medium */
313
306
  font-size: var(--stl-ui-typography-text-h2);
314
307
  letter-spacing: -0.03em;
315
-
316
308
  margin-top: 48px;
317
309
  }
318
310
 
319
- h3:not(.stl-ui-not-prose *) {
311
+ :where(h3:not(.stl-ui-not-prose *), .stl-ui-not-prose .stl-ui-prose h3) {
320
312
  /* Heading 3/Medium */
321
313
  font-size: var(--stl-ui-typography-text-h3);
322
314
  letter-spacing: -0.02em;
323
315
  margin-top: 40px;
324
316
  }
325
317
 
326
- h4:not(.stl-ui-not-prose *) {
318
+ :where(h4:not(.stl-ui-not-prose *), .stl-ui-not-prose .stl-ui-prose h4) {
327
319
  /* Heading 4/Medium */
328
320
  font-size: var(--stl-ui-typography-text-h4);
329
321
  letter-spacing: -0.02em;
330
322
  margin-top: 32px;
331
323
  }
332
324
 
333
- h5:not(.stl-ui-not-prose *) {
325
+ :where(h5:not(.stl-ui-not-prose *), .stl-ui-not-prose .stl-ui-prose h5) {
334
326
  /* Heading 5/Medium */
335
327
  font-size: var(--stl-ui-typography-text-h5);
336
328
  letter-spacing: -0.02em;
337
329
  margin-top: 24px;
338
330
  }
339
331
 
340
- li:not(.stl-ui-not-prose *) {
341
- &:not(:last-child) {
332
+ /* For the first element below stl-ui-prose, do not apply a margin-top */
333
+ :where(*):where(:not(.stl-ui-not-prose *), .stl-ui-not-prose .stl-ui-prose *) {
334
+ &:first-child {
335
+ margin-top: 0;
336
+ }
337
+ }
338
+
339
+ :where(li:not(.stl-ui-not-prose *), .stl-ui-not-prose .stl-ui-prose li) {
340
+ &:where(:not(:last-child)) {
342
341
  margin-bottom: 8px;
343
342
  }
344
343
 
344
+ /* TODO: do we want this */
345
345
  h1,
346
346
  h2,
347
347
  h3,
@@ -356,18 +356,19 @@ body {
356
356
  }
357
357
 
358
358
  :where(ol, ul) {
359
- &:not(.stl-ui-not-prose *) {
359
+ &:where(:not(.stl-ui-not-prose *), .stl-ui-not-prose .stl-ui-prose *) {
360
360
  padding-left: 26px;
361
361
  }
362
362
  }
363
363
 
364
- :where(ol, ul, aside, img, figure, details) {
365
- &:not(.stl-ui-not-prose *) {
366
- margin-top: 16px;
367
- }
364
+ :where(ol, ul, aside, img, figure, details):where(
365
+ :not(.stl-ui-not-prose *),
366
+ .stl-ui-not-prose .stl-ui-prose *
367
+ ) {
368
+ margin-top: 16px;
368
369
  }
369
370
 
370
- :where(:not(pre) > code):not(.stl-ui-not-prose *) {
371
+ :where(:not(pre) > code):where(:not(.stl-ui-not-prose *), .stl-ui-not-prose .stl-ui-prose *) {
371
372
  color: var(--stl-ui-foreground);
372
373
  font-feature-settings:
373
374
  'ss01' on,
@@ -480,6 +481,24 @@ body {
480
481
  --sl-color-hairline-shade: var(--stl-ui-border-emphasis);
481
482
  --sl-color-text-invert: var(--stl-ui-inverse-foreground);
482
483
 
484
+ /* Grayscale */
485
+
486
+ --sl-color-gray-1: var(--stl-ui-gray-800);
487
+ --sl-color-gray-2: var(--stl-ui-gray-700);
488
+ --sl-color-gray-3: var(--stl-ui-gray-600);
489
+ --sl-color-gray-4: var(--stl-ui-gray-500);
490
+ --sl-color-gray-5: var(--stl-ui-gray-400);
491
+ --sl-color-gray-6: var(--stl-ui-gray-300);
492
+ --sl-color-gray-7: var(--stl-ui-gray-200);
493
+ --sl-color-gray-8: var(--stl-ui-gray-100);
494
+ --sl-color-gray-9: var(--stl-ui-gray-50);
495
+
496
+ /* Accent colors */
497
+
498
+ --sl-color-accent-low: var(--stl-ui-swatch-accent-faint);
499
+ --sl-color-accent: var(--stl-ui-swatch-accent-base);
500
+ --sl-color-accent-high: var(--stl-ui-swatch-accent-base);
501
+
483
502
  /* Primary colors */
484
503
  --sl-color-red-low: var(--stl-ui-swatch-red-faint);
485
504
  --sl-color-red: var(--stl-ui-swatch-red-base);
@@ -514,6 +533,18 @@ body {
514
533
  --sl-color-yellow-high: var(--stl-ui-swatch-yellow-base);
515
534
  }
516
535
 
536
+ :root[data-theme='dark'] {
537
+ --sl-color-gray-1: var(--stl-ui-gray-100);
538
+ --sl-color-gray-2: var(--stl-ui-gray-200);
539
+ --sl-color-gray-3: var(--stl-ui-gray-300);
540
+ --sl-color-gray-4: var(--stl-ui-gray-400);
541
+ --sl-color-gray-5: var(--stl-ui-gray-500);
542
+ --sl-color-gray-6: var(--stl-ui-gray-600);
543
+ --sl-color-gray-7: var(--stl-ui-gray-700);
544
+ --sl-color-gray-8: var(--stl-ui-gray-800);
545
+ --sl-color-gray-9: var(--stl-ui-gray-900);
546
+ }
547
+
517
548
  /* Starlight Compatibility */
518
549
  .stl-ui-prose {
519
550
  /* TODO: Disable starlight headingLinks and replace with our own */
@@ -795,7 +826,7 @@ a.stl-ui-button {
795
826
  text-align: center;
796
827
  }
797
828
 
798
- .stl-ui-dropdown-button {
829
+ .stl-ui-dropdown {
799
830
  --stl-ui-dropdown-button-color: var(--stl-ui-foreground);
800
831
  --stl-ui-dropdown-button-background-color: var(--stl-ui-card-background);
801
832
  --stl-ui-dropdown-button-border-color: var(--stl-ui-border);
@@ -803,7 +834,7 @@ a.stl-ui-button {
803
834
  --stl-ui-dropdown-button-font-size: var(--stl-ui-type-scale-text-sm);
804
835
 
805
836
  --stl-ui-dropdown-button-height: 32px;
806
- --stl-ui-dropdown-button-padding: 8px 10px;
837
+ --stl-ui-dropdown-button-padding: 0 10px;
807
838
  --stl-ui-dropdown-button-line-height: 100%;
808
839
  --stl-ui-dropdown-button-font-weight: 500;
809
840
 
@@ -811,16 +842,28 @@ a.stl-ui-button {
811
842
  display: inline-flex;
812
843
  align-items: center;
813
844
 
814
- background-color: var(--stl-ui-dropdown-button-background-color);
815
- border: 1px solid var(--stl-ui-dropdown-button-border-color);
816
- border-radius: var(--stl-ui-dropdown-button-border-radius);
817
845
  color: var(--stl-ui-dropdown-button-color);
818
846
  gap: 0;
819
847
  font-size: var(--stl-ui-dropdown-button-font-size);
820
848
 
821
- .stl-ui-dropdown-button__button {
849
+ hr {
850
+ --stl-ui-dropdown-button__divider-height: 1px;
851
+ --stl-ui-dropdown-button__divider-color: var(--stl-ui-border);
852
+
853
+ height: var(--stl-ui-dropdown-button__divider-height);
854
+ background-color: var(--stl-ui-dropdown-button__divider-color);
822
855
  border: none;
823
- background: none;
856
+
857
+ margin: 4px 0;
858
+ width: calc(100% + 8px);
859
+ transform: translateX(-4px);
860
+ }
861
+
862
+ .stl-ui-dropdown__button {
863
+ background-color: var(--stl-ui-dropdown-button-background-color);
864
+
865
+ border: 1px solid var(--stl-ui-dropdown-button-border-color);
866
+ border-radius: var(--stl-ui-dropdown-button-border-radius);
824
867
  height: var(--stl-ui-dropdown-button-height);
825
868
  padding: var(--stl-ui-dropdown-button-padding);
826
869
  line-height: var(--stl-ui-dropdown-button-line-height);
@@ -829,21 +872,52 @@ a.stl-ui-button {
829
872
  display: flex;
830
873
  align-items: center;
831
874
  justify-content: center;
875
+ color: inherit;
876
+
877
+ &:focus {
878
+ outline: 1px auto Highlight;
879
+ }
832
880
 
833
881
  &:hover {
834
882
  background-color: oklch(from var(--stl-ui-foreground) l c h / 0.05);
835
883
  border-color: var(--stl-ui-border-emphasis);
836
884
  }
885
+
886
+ .stl-ui-dropdown__trigger-icon {
887
+ margin-right: -4px;
888
+ margin-left: 4px;
889
+ display: flex;
890
+ align-items: center;
891
+ justify-content: center;
892
+ }
893
+ }
894
+
895
+ .stl-ui-dropdown__icon {
896
+ display: flex;
897
+ align-items: center;
898
+ justify-content: center;
899
+
900
+ svg {
901
+ width: 16px;
902
+ height: 16px;
903
+ }
837
904
  }
838
905
 
906
+ /**
907
+ * Dropdown Button
908
+ */
839
909
  .stl-ui-dropdown-button--action {
840
910
  display: flex;
841
911
  align-items: center;
842
912
  gap: 8px;
913
+ border-top-right-radius: 0;
914
+ border-bottom-right-radius: 0;
915
+ margin-right: -1px;
843
916
 
844
917
  &:hover {
845
918
  background-color: oklch(from var(--stl-ui-foreground) l c h / 0.05);
846
919
  border-color: var(--stl-ui-border-emphasis);
920
+ z-index: 1;
847
921
  }
848
922
 
849
923
  &.disabled {
@@ -855,6 +929,8 @@ a.stl-ui-button {
855
929
  .stl-ui-dropdown-button__trigger {
856
930
  border-left: 1px solid var(--stl-ui-border);
857
931
  border-radius: 0;
932
+ border-top-right-radius: var(--stl-ui-dropdown-button-border-radius);
933
+ border-bottom-right-radius: var(--stl-ui-dropdown-button-border-radius);
858
934
 
859
935
  &:hover {
860
936
  background-color: oklch(from var(--stl-ui-foreground) l c h / 0.05);
@@ -862,101 +938,124 @@ a.stl-ui-button {
862
938
  }
863
939
  }
864
940
 
865
- .stl-ui-dropdown-button__menu {
866
- --stl-ui-dropdown-button__menu-background-color: var(--stl-ui-card-background);
867
- --stl-ui-dropdown-button__menu-border-color: var(--stl-ui-border);
868
- --stl-ui-dropdown-button__menu-box-shadow: var(--stl-ui-shadow-md);
869
- --stl-ui-dropdown-button__menu-border-radius: var(--stl-ui-layout-border-radius-sml);
941
+ .stl-ui-dropdown__trigger-selected {
942
+ display: flex;
943
+ align-items: center;
944
+ gap: 8px;
945
+ }
946
+
947
+ /**
948
+ * Dropdown Menu
949
+ */
950
+ .stl-ui-dropdown-menu {
951
+ --stl-ui-dropdown-menu-background-color: var(--stl-ui-card-background);
952
+ --stl-ui-dropdown-menu-border-color: var(--stl-ui-border);
953
+ --stl-ui-dropdown-menu-box-shadow: var(--stl-ui-shadow-md);
954
+ --stl-ui-dropdown-menu-border-radius: var(--stl-ui-layout-border-radius-sml);
870
955
 
871
- background-color: var(--stl-ui-dropdown-button__menu-background-color);
872
- border: 1px solid var(--stl-ui-dropdown-button__menu-border-color);
873
- box-shadow: var(--stl-ui-dropdown-button__menu-box-shadow);
874
- border-radius: var(--stl-ui-dropdown-button__menu-border-radius);
956
+ background-color: var(--stl-ui-dropdown-menu-background-color);
957
+ border: 1px solid var(--stl-ui-dropdown-menu-border-color);
958
+ box-shadow: var(--stl-ui-dropdown-menu-box-shadow);
959
+ border-radius: var(--stl-ui-dropdown-menu-border-radius);
875
960
 
876
961
  position: absolute;
877
- top: 100%;
878
962
  right: 0;
879
- margin-top: 4px;
880
963
  z-index: 1000;
881
964
  min-width: 100%;
882
965
  padding: 4px;
883
966
  display: none;
884
967
 
968
+ &.stl-ui-dropdown-menu--above {
969
+ top: auto;
970
+ bottom: 100%;
971
+ margin-bottom: 4px;
972
+ }
973
+
974
+ &.stl-ui-dropdown-menu--below {
975
+ top: 100%;
976
+ bottom: auto;
977
+ margin-top: 4px;
978
+ }
979
+
885
980
  &[data-state='open'] {
886
981
  display: block;
887
982
  }
888
- }
889
-
890
- .stl-ui-dropdown-button__menu-item {
891
- --stl-ui-dropdown-button__menu-item-border-radius: var(--stl-ui-dropdown-button-border-radius);
892
- --stl-ui-dropdown-button__menu-item-height: var(--stl-ui-dropdown-button-height);
893
- --stl-ui-dropdown-button__menu-item-line-height: var(--stl-ui-dropdown-button-line-height);
894
- --stl-ui-dropdown-button__menu-item-hover-background-color: oklch(
895
- from var(--stl-ui-foreground) l c h / 0.05
896
- );
897
983
 
898
- border-radius: var(--stl-ui-dropdown-button__menu-item-border-radius);
899
- height: var(--stl-ui-dropdown-button__menu-item-height);
900
- line-height: var(--stl-ui-dropdown-button__menu-item-line-height);
984
+ .stl-ui-dropdown-menu__item {
985
+ --stl-ui-dropdown-menu__item-border-radius: var(--stl-ui-dropdown-button-border-radius);
986
+ --stl-ui-dropdown-menu__item-height: var(--stl-ui-dropdown-button-height);
987
+ --stl-ui-dropdown-menu__item-line-height: var(--stl-ui-dropdown-button-line-height);
988
+ --stl-ui-dropdown-menu__item-hover-background-color: oklch(from var(--stl-ui-foreground) l c h / 0.05);
901
989
 
902
- padding: 8px;
903
- cursor: pointer;
904
- display: flex;
905
- align-items: center;
906
- justify-content: space-between;
907
- gap: 16px;
990
+ border-radius: var(--stl-ui-dropdown-menu__item-border-radius);
991
+ height: var(--stl-ui-dropdown-menu__item-height);
992
+ line-height: var(--stl-ui-dropdown-menu__item-line-height);
908
993
 
909
- &:hover {
910
- background-color: var(--stl-ui-dropdown-button__menu-item-hover-background-color);
911
- }
994
+ background: transparent;
995
+ border: none;
912
996
 
913
- .stl-ui-dropdown-button__menu-item-content {
997
+ padding: 8px;
998
+ cursor: pointer;
914
999
  display: flex;
915
1000
  align-items: center;
916
- gap: 8px;
917
- }
1001
+ justify-content: space-between;
1002
+ gap: 16px;
1003
+ width: 100%;
918
1004
 
919
- .stl-ui-dropdown-button__menu-item-text {
920
- white-space: nowrap;
921
- }
1005
+ &:hover,
1006
+ &:focus-visible {
1007
+ background-color: var(--stl-ui-dropdown-menu__item-hover-background-color);
1008
+ }
922
1009
 
923
- .stl-ui-dropdown-button__menu-item-text--subtle {
924
- color: var(--stl-ui-foreground-muted);
925
- }
1010
+ &:hover,
1011
+ &:focus-visible,
1012
+ &:focus {
1013
+ color: var(--stl-ui-foreground);
1014
+ }
926
1015
 
927
- strong {
928
- color: var(--stl-ui-foreground);
929
- font-weight: 500;
930
- }
1016
+ &.stl-ui-dropdown-menu__item-link {
1017
+ display: flex;
1018
+ align-items: center;
1019
+ justify-content: space-between;
1020
+ gap: 16px;
1021
+ width: 100%;
1022
+
1023
+ &:hover {
1024
+ color: var(--stl-ui-foreground);
1025
+ }
1026
+ }
931
1027
 
932
- .stl-ui-dropdown-button__menu-item-icon {
933
- display: flex;
934
- align-items: center;
935
- justify-content: center;
936
- }
1028
+ .stl-ui-dropdown-menu__item-icon {
1029
+ display: flex;
1030
+ }
937
1031
 
938
- .stl-ui-dropdown-button__menu-item-external-link-icon {
939
- --stl-ui-dropdown-button__menu-item-external-link-icon-color: oklch(
940
- from var(--stl-ui-foreground) l c h / 0.25
941
- );
1032
+ .stl-ui-dropdown-menu__item-content {
1033
+ display: flex;
1034
+ align-items: center;
1035
+ gap: 8px;
1036
+ }
942
1037
 
943
- svg {
944
- color: var(--stl-ui-dropdown-button__menu-item-external-link-icon-color);
1038
+ .stl-ui-dropdown-menu__item-text {
1039
+ white-space: nowrap;
945
1040
  }
946
- }
947
- }
948
1041
 
949
- hr {
950
- --stl-ui-dropdown-button__divider-height: 1px;
951
- --stl-ui-dropdown-button__divider-color: var(--stl-ui-border);
1042
+ .stl-ui-dropdown-menu__item-text--subtle {
1043
+ color: var(--stl-ui-foreground-muted);
1044
+ }
952
1045
 
953
- height: var(--stl-ui-dropdown-button__divider-height);
954
- background-color: var(--stl-ui-dropdown-button__divider-color);
955
- border: none;
1046
+ strong {
1047
+ color: var(--stl-ui-foreground);
1048
+ font-weight: 500;
1049
+ }
956
1050
 
957
- margin: 4px 0;
958
- width: calc(100% + 8px);
959
- transform: translateX(-4px);
1051
+ .stl-ui-dropdown-menu__item-subtle-icon {
1052
+ --stl-ui-dropdown-menu__item-subtle-icon-color: oklch(from var(--stl-ui-foreground) l c h / 0.25);
1053
+
1054
+ svg {
1055
+ color: var(--stl-ui-dropdown-menu__item-subtle-icon-color);
1056
+ }
1057
+ }
1058
+ }
960
1059
  }
961
1060
  }
962
1061
 
@@ -964,6 +1063,8 @@ a.stl-ui-button {
964
1063
  --stl-ui-callout-background-color: var(--stl-ui-muted-background);
965
1064
  --stl-ui-callout-border-color: var(--stl-ui-border);
966
1065
  --stl-ui-callout-accent-color: var(--stl-ui-foreground-muted);
1066
+ --stl-ui-callout-strong-color: var(--stl-ui-callout-accent-color);
1067
+ --stl-ui-callout-selection-background: var(--stl-ui-swatch-gray-gray-6);
967
1068
 
968
1069
  border: 1px solid var(--stl-ui-callout-border-color);
969
1070
  background-color: var(--stl-ui-callout-background-color);
@@ -976,42 +1077,63 @@ a.stl-ui-button {
976
1077
  display: flex;
977
1078
  align-items: flex-start;
978
1079
  gap: 8px;
1080
+
1081
+ :where(a) {
1082
+ color: var(--stl-ui-callout-strong-color);
1083
+ text-decoration-color: rgba(from currentColor r g b / 0.4);
1084
+ transition: text-decoration-color 0.1s ease;
1085
+ &:hover {
1086
+ text-decoration-color: rgba(from currentColor r g b / 0.8);
1087
+ }
1088
+ }
1089
+
1090
+ ::selection {
1091
+ background-color: var(--stl-ui-callout-selection-background);
1092
+ color: var(--stl-ui-foreground);
1093
+ }
979
1094
  }
980
1095
 
981
1096
  .stl-ui-callout--info {
982
1097
  --stl-ui-callout-background-color: var(--stl-ui-muted-background);
983
1098
  --stl-ui-callout-border-color: var(--stl-ui-border);
984
1099
  --stl-ui-callout-accent-color: var(--stl-ui-foreground-muted);
1100
+ --stl-ui-callout-strong-color: var(--stl-ui-foreground);
1101
+ --stl-ui-callout-selection-background: var(--stl-ui-swatch-gray-gray-6);
985
1102
  }
986
1103
 
987
1104
  .stl-ui-callout--note {
988
1105
  --stl-ui-callout-background-color: var(--stl-ui-swatch-blue-faint);
989
1106
  --stl-ui-callout-border-color: var(--stl-ui-swatch-blue-muted);
990
1107
  --stl-ui-callout-accent-color: var(--stl-ui-swatch-blue-base);
1108
+ --stl-ui-callout-selection-background: var(--stl-ui-swatch-blue-muted);
991
1109
  }
992
1110
 
993
1111
  .stl-ui-callout--tip {
994
1112
  --stl-ui-callout-background-color: var(--stl-ui-swatch-purple-faint);
995
1113
  --stl-ui-callout-border-color: var(--stl-ui-swatch-purple-muted);
996
1114
  --stl-ui-callout-accent-color: var(--stl-ui-swatch-purple-base);
1115
+ --stl-ui-callout-selection-background: var(--stl-ui-swatch-purple-muted);
997
1116
  }
998
1117
 
999
1118
  .stl-ui-callout--success {
1000
1119
  --stl-ui-callout-background-color: var(--stl-ui-swatch-green-faint);
1001
1120
  --stl-ui-callout-border-color: var(--stl-ui-swatch-green-muted);
1002
1121
  --stl-ui-callout-accent-color: var(--stl-ui-swatch-green-base);
1122
+ --stl-ui-callout-selection-background: var(--stl-ui-swatch-green-muted);
1003
1123
  }
1004
1124
 
1005
1125
  .stl-ui-callout--warning {
1006
1126
  --stl-ui-callout-background-color: var(--stl-ui-swatch-yellow-faint);
1007
1127
  --stl-ui-callout-border-color: var(--stl-ui-swatch-yellow-muted);
1008
1128
  --stl-ui-callout-accent-color: var(--stl-ui-swatch-yellow-base);
1129
+ --stl-ui-callout-selection-background: var(--stl-ui-swatch-yellow-muted);
1009
1130
  }
1010
1131
 
1011
1132
  .stl-ui-callout--danger {
1012
1133
  --stl-ui-callout-background-color: var(--stl-ui-swatch-red-faint);
1013
1134
  --stl-ui-callout-border-color: var(--stl-ui-swatch-red-muted);
1014
1135
  --stl-ui-callout-accent-color: var(--stl-ui-swatch-red-base);
1136
+ --stl-ui-callout-selection-background: var(--stl-ui-swatch-red-muted);
1015
1137
  }
1016
1138
 
1017
1139
  .stl-ui-callout__icon {
package/dist/styles.js CHANGED
@@ -1 +0,0 @@
1
- export { };
package/package.json CHANGED
@@ -1,37 +1,46 @@
1
1
  {
2
2
  "name": "@stainless-api/ui-primitives",
3
- "version": "0.1.0-beta.22",
3
+ "version": "0.1.0-beta.24",
4
4
  "publishConfig": {
5
5
  "access": "public"
6
6
  },
7
+ "type": "module",
8
+ "files": [
9
+ "dist"
10
+ ],
7
11
  "exports": {
8
12
  ".": {
9
- "types": "./src/index.ts",
10
- "import": "./src/index.ts",
11
- "require": "./src/index.ts"
13
+ "default": "./dist/index.js"
12
14
  },
13
15
  "./scripts": {
14
- "types": "./src/scripts/index.ts",
15
- "import": "./src/scripts/index.ts",
16
- "require": "./src/scripts/index.ts"
16
+ "default": "./dist/scripts/index.js"
17
17
  },
18
- "./styles.css": "./src/styles.css"
18
+ "./styles.css": {
19
+ "default": "./dist/styles.css"
20
+ },
21
+ "./*": {
22
+ "default": "./dist/*"
23
+ }
19
24
  },
20
- "types": "./src/index.ts",
21
25
  "peerDependencies": {
22
26
  "react": ">=19.0.0",
23
27
  "react-dom": ">=19.0.0"
24
28
  },
25
29
  "dependencies": {
26
30
  "clsx": "^2.1.1",
27
- "lucide-react": "^0.544.0"
31
+ "lucide-react": "^0.553.0"
28
32
  },
29
33
  "devDependencies": {
30
- "@types/react": "^19.2.2",
31
- "@types/react-dom": "^19.2.2",
34
+ "@types/react": "^19.2.4",
35
+ "@types/react-dom": "^19.2.3",
32
36
  "react": "^19.2.0",
33
37
  "react-dom": "^19.2.0",
38
+ "tsdown": "^0.16.4",
34
39
  "typescript": "5.9.3",
35
40
  "@stainless/eslint-config": "0.1.0-beta.0"
41
+ },
42
+ "scripts": {
43
+ "build": "tsdown",
44
+ "clean": "rm -rf dist"
36
45
  }
37
46
  }
@@ -1,35 +0,0 @@
1
-
2
- 
3
- > @stainless-api/ui-primitives@0.1.0-beta.17 build /Users/maxfreundlich/code/work/stl-api-docs/packages/ui-primitives
4
- > tsdown
5
-
6
- ℹ tsdown v0.15.12 powered by rolldown v1.0.0-beta.45
7
- ℹ Using tsdown config: /Users/maxfreundlich/code/work/stl-api-docs/packages/ui-primitives/tsdown.config.ts
8
- ℹ entry: src/index.ts, src/styles.css, src/components/Accordion.tsx, src/components/Button.tsx, src/components/Callout.tsx, src/components/DropdownButton.tsx, src/scripts/index.ts
9
- ℹ tsconfig: tsconfig.json
10
- ℹ Build start
11
- ℹ Cleaning 24 files
12
- ℹ dist/scripts/index.js  1.21 kB │ gzip: 0.48 kB
13
- ℹ dist/index.js  0.29 kB │ gzip: 0.16 kB
14
- ℹ dist/components/DropdownButton.js  0.10 kB │ gzip: 0.09 kB
15
- ℹ dist/components/Accordion.js  0.08 kB │ gzip: 0.08 kB
16
- ℹ dist/components/Callout.js  0.07 kB │ gzip: 0.08 kB
17
- ℹ dist/components/Button.js  0.07 kB │ gzip: 0.08 kB
18
- ℹ dist/styles.js  0.01 kB │ gzip: 0.03 kB
19
- ℹ dist/styles.css 40.38 kB │ gzip: 6.94 kB
20
- ℹ dist/DropdownButton-DoYDi8tB.js  2.69 kB │ gzip: 0.70 kB
21
- ℹ dist/Button-DBhd6kU7.js  1.51 kB │ gzip: 0.55 kB
22
- ℹ dist/Callout-UZQRuCQ5.js  0.82 kB │ gzip: 0.44 kB
23
- ℹ dist/Accordion-DLQE3Td6.js  0.80 kB │ gzip: 0.30 kB
24
- ℹ dist/index.d.ts  0.46 kB │ gzip: 0.20 kB
25
- ℹ dist/scripts/index.d.ts  0.30 kB │ gzip: 0.19 kB
26
- ℹ dist/components/Callout.d.ts  0.14 kB │ gzip: 0.11 kB
27
- ℹ dist/components/Button.d.ts  0.14 kB │ gzip: 0.10 kB
28
- ℹ dist/components/Accordion.d.ts  0.12 kB │ gzip: 0.09 kB
29
- ℹ dist/components/DropdownButton.d.ts  0.10 kB │ gzip: 0.08 kB
30
- ℹ dist/DropdownButton-zcvep_xH.d.ts  1.38 kB │ gzip: 0.40 kB
31
- ℹ dist/Button-DwndlytB.d.ts  1.27 kB │ gzip: 0.52 kB
32
- ℹ dist/Accordion-CJL9SWwS.d.ts  0.74 kB │ gzip: 0.32 kB
33
- ℹ dist/Callout-CMz3Yl_5.d.ts  0.57 kB │ gzip: 0.33 kB
34
- ℹ 22 files, total: 53.24 kB
35
- ✔ Build complete in 761ms