@stainless-api/ui-primitives 0.1.0-beta.2 → 0.1.0-beta.20

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 (51) hide show
  1. package/.turbo/turbo-build.log +35 -0
  2. package/CHANGELOG.md +112 -0
  3. package/dist/Accordion-CJL9SWwS.d.ts +26 -0
  4. package/dist/Accordion-DLQE3Td6.js +31 -0
  5. package/dist/Button-DBhd6kU7.js +51 -0
  6. package/dist/Button-DwndlytB.d.ts +38 -0
  7. package/dist/Callout-CMz3Yl_5.d.ts +18 -0
  8. package/dist/Callout-UZQRuCQ5.js +28 -0
  9. package/dist/DropdownButton-DoYDi8tB.js +82 -0
  10. package/dist/DropdownButton-zcvep_xH.d.ts +50 -0
  11. package/dist/components/Accordion.d.ts +2 -0
  12. package/dist/components/Accordion.js +3 -0
  13. package/dist/components/Button.d.ts +2 -0
  14. package/dist/components/Button.js +3 -0
  15. package/dist/components/Callout.d.ts +2 -0
  16. package/dist/components/Callout.js +3 -0
  17. package/dist/components/DropdownButton.d.ts +2 -0
  18. package/dist/components/DropdownButton.js +3 -0
  19. package/dist/index.d.ts +5 -0
  20. package/dist/index.js +6 -0
  21. package/dist/scripts/index.d.ts +12 -0
  22. package/dist/scripts/index.js +33 -0
  23. package/dist/styles.css +1181 -0
  24. package/dist/styles.js +1 -0
  25. package/package.json +9 -9
  26. package/src/components/Accordion.tsx +41 -0
  27. package/src/components/Button.tsx +1 -0
  28. package/src/components/accordion.css +145 -0
  29. package/src/components/button.css +165 -135
  30. package/src/components/callout.css +78 -57
  31. package/src/components/dropdown/Dropdown.tsx +51 -0
  32. package/src/components/dropdown/DropdownButton.tsx +54 -0
  33. package/src/components/dropdown/DropdownMenu.tsx +113 -0
  34. package/src/components/dropdown/dropdown.css +231 -0
  35. package/src/index.ts +3 -2
  36. package/src/scripts/dropdown-button.ts +20 -36
  37. package/src/scripts/dropdown.ts +193 -0
  38. package/src/scripts/index.ts +1 -0
  39. package/src/styles/layout.css +3 -1
  40. package/src/styles/scales.css +1 -1
  41. package/src/styles/starlight-compat.css +138 -107
  42. package/src/styles/swatches.css +2 -2
  43. package/src/styles/theme.css +2 -2
  44. package/src/styles/typography.css +117 -147
  45. package/src/styles.css +2 -2
  46. package/tsconfig.json +3 -7
  47. package/.env +0 -1
  48. package/src/components/DetailsGroup.tsx +0 -17
  49. package/src/components/DropdownButton.tsx +0 -98
  50. package/src/components/details.css +0 -126
  51. package/src/components/dropdown-button.css +0 -162
package/src/components/dropdown-button.css DELETED
@@ -1,162 +0,0 @@
1
- @layer stl-ui {
2
- .stl-ui-dropdown-button {
3
- --stl-ui-dropdown-button-color: var(--stl-ui-foreground);
4
- --stl-ui-dropdown-button-background-color: var(--stl-ui-card-background);
5
- --stl-ui-dropdown-button-border-color: var(--stl-ui-border);
6
- --stl-ui-dropdown-button-border-radius: var(--stl-ui-layout-border-radius-sml);
7
- --stl-ui-dropdown-button-font-size: var(--stl-ui-type-scale-text-sm);
8
-
9
- --stl-ui-dropdown-button-height: 32px;
10
- --stl-ui-dropdown-button-padding: 8px 10px;
11
- --stl-ui-dropdown-button-line-height: 100%;
12
- --stl-ui-dropdown-button-font-weight: 500;
13
-
14
- position: relative;
15
- display: inline-flex;
16
- align-items: center;
17
-
18
- background-color: var(--stl-ui-dropdown-button-background-color);
19
- border: 1px solid var(--stl-ui-dropdown-button-border-color);
20
- border-radius: var(--stl-ui-dropdown-button-border-radius);
21
- color: var(--stl-ui-dropdown-button-color);
22
- gap: 0;
23
- font-size: var(--stl-ui-dropdown-button-font-size);
24
- }
25
-
26
- .stl-ui-dropdown-button__button {
27
- border: none;
28
- background: none;
29
- height: var(--stl-ui-dropdown-button-height);
30
- padding: var(--stl-ui-dropdown-button-padding);
31
- line-height: var(--stl-ui-dropdown-button-line-height);
32
- font-weight: var(--stl-ui-dropdown-button-font-weight);
33
- cursor: pointer;
34
- display: flex;
35
- align-items: center;
36
- justify-content: center;
37
-
38
- &:hover {
39
- background-color: oklch(from var(--stl-ui-foreground) l c h / 0.05);
40
- border-color: var(--stl-ui-border-emphasis);
41
- }
42
- }
43
-
44
- .stl-ui-dropdown-button--action {
45
- display: flex;
46
- align-items: center;
47
- gap: 8px;
48
-
49
- &:hover {
50
- background-color: oklch(from var(--stl-ui-foreground) l c h / 0.05);
51
- border-color: var(--stl-ui-border-emphasis);
52
- }
53
-
54
- &.disabled {
55
- cursor: not-allowed;
56
- background-color: oklch(from var(--stl-ui-foreground) l c h / 0.05);
57
- }
58
- }
59
-
60
- .stl-ui-dropdown-button__trigger {
61
- border-left: 1px solid var(--stl-ui-border);
62
- border-radius: 0;
63
-
64
- &:hover {
65
- background-color: oklch(from var(--stl-ui-foreground) l c h / 0.05);
66
- border-color: var(--stl-ui-border-emphasis);
67
- }
68
- }
69
-
70
- .stl-ui-dropdown-button__menu {
71
- --stl-ui-dropdown-button__menu-background-color: var(--stl-ui-card-background);
72
- --stl-ui-dropdown-button__menu-border-color: var(--stl-ui-border);
73
- --stl-ui-dropdown-button__menu-box-shadow: var(--stl-ui-shadow-md);
74
- --stl-ui-dropdown-button__menu-border-radius: var(--stl-ui-layout-border-radius-sml);
75
-
76
- background-color: var(--stl-ui-dropdown-button__menu-background-color);
77
- border: 1px solid var(--stl-ui-dropdown-button__menu-border-color);
78
- box-shadow: var(--stl-ui-dropdown-button__menu-box-shadow);
79
- border-radius: var(--stl-ui-dropdown-button__menu-border-radius);
80
-
81
- position: absolute;
82
- top: 100%;
83
- right: 0;
84
- margin-top: 4px;
85
- z-index: 1000;
86
- min-width: 100%;
87
- padding: 4px;
88
- display: none;
89
-
90
- &[data-state='open'] {
91
- display: block;
92
- }
93
- }
94
-
95
- .stl-ui-dropdown-button__menu-item {
96
- /* border-radius, height, and lineheight */
97
- --stl-ui-dropdown-button__menu-item-border-radius: var(--stl-ui-dropdown-button-border-radius);
98
- --stl-ui-dropdown-button__menu-item-height: var(--stl-ui-dropdown-button-height);
99
- --stl-ui-dropdown-button__menu-item-line-height: var(--stl-ui-dropdown-button-line-height);
100
- --stl-ui-dropdown-button__menu-item-hover-background-color: oklch(
101
- from var(--stl-ui-foreground) l c h / 0.05
102
- );
103
-
104
- border-radius: var(--stl-ui-dropdown-button__menu-item-border-radius);
105
- height: var(--stl-ui-dropdown-button__menu-item-height);
106
- line-height: var(--stl-ui-dropdown-button__menu-item-line-height);
107
-
108
- padding: 8px;
109
- cursor: pointer;
110
- display: flex;
111
- align-items: center;
112
- justify-content: space-between;
113
- gap: 8px;
114
-
115
- &:hover {
116
- background-color: var(--stl-ui-dropdown-button__menu-item-hover-background-color);
117
- }
118
-
119
- .stl-ui-dropdown-button__menu-item-content {
120
- display: flex;
121
- align-items: center;
122
- gap: 8px;
123
- }
124
-
125
- .stl-ui-dropdown-button__menu-item-text {
126
- white-space: nowrap;
127
- }
128
-
129
- .stl-ui-dropdown-button__menu-item-text-subtle {
130
- --stl-ui-dropdown-button__menu-item-text-subtle-color: var(--stl-ui-foreground-muted);
131
- color: var(--stl-ui-dropdown-button__menu-item-text-subtle-color);
132
- }
133
-
134
- .stl-ui-dropdown-button__menu-item-icon {
135
- display: flex;
136
- align-items: center;
137
- justify-content: center;
138
- }
139
-
140
- .stl-ui-dropdown-button__menu-item-external-link-icon {
141
- --stl-ui-dropdown-button__menu-item-external-link-icon-color: oklch(
142
- from var(--stl-ui-foreground) l c h / 0.25
143
- );
144
- margin-left: 8px;
145
- svg {
146
- color: var(--stl-ui-dropdown-button__menu-item-external-link-icon-color);
147
- }
148
- }
149
- }
150
-
151
- .stl-ui-dropdown-button__divider {
152
- --stl-ui-dropdown-button__divider-height: 1px;
153
- --stl-ui-dropdown-button__divider-color: var(--stl-ui-border);
154
-
155
- height: var(--stl-ui-dropdown-button__divider-height);
156
- background-color: var(--stl-ui-dropdown-button__divider-color);
157
-
158
- margin: 4px 0;
159
- width: calc(100% + 8px);
160
- transform: translateX(-4px);
161
- }
162
- }