@stainless-api/ui-primitives 0.1.0-beta.0 → 0.1.0-beta.10

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 (20) hide show
  1. package/CHANGELOG.md +60 -0
  2. package/package.json +1 -1
  3. package/src/components/Accordion.tsx +41 -0
  4. package/src/components/Button.tsx +1 -0
  5. package/src/components/DropdownButton.tsx +24 -13
  6. package/src/components/accordion.css +145 -0
  7. package/src/components/button.css +165 -135
  8. package/src/components/callout.css +57 -59
  9. package/src/components/dropdown-button.css +33 -31
  10. package/src/index.ts +1 -1
  11. package/src/styles/layout.css +1 -1
  12. package/src/styles/scales.css +1 -1
  13. package/src/styles/starlight-compat.css +142 -107
  14. package/src/styles/swatches.css +2 -2
  15. package/src/styles/theme.css +2 -2
  16. package/src/styles/typography.css +117 -144
  17. package/src/styles.css +1 -1
  18. package/tsconfig.json +2 -6
  19. package/src/components/DetailsGroup.tsx +0 -17
  20. package/src/components/details.css +0 -126
package/src/styles/starlight-compat.css CHANGED
@@ -1,125 +1,160 @@
1
- @layer stl-ui {
2
- :root {
3
- --stl-ui-button-border-radius: 8px;
4
- --stl-ui-text-body: 14px;
5
- --stl-ui-font-family: 'Geist', system-ui, sans-serif;
6
- --stl-ui-button-size: 2rem;
7
-
8
- /* Brand colors */
9
- --stl-ui-color-text-brand: var(--stl-ui-color-text-invert);
10
- --stl-ui-color-brand: var(--stl-ui-color-accent);
11
- }
1
+ :root {
2
+ /* Layout and Typography */
3
+ --sl-font: var(--stl-ui-typography-font);
4
+ --sl-font-mono: var(--stl-ui-typography-font-mono);
5
+ --sl-line-height: var(--stl-ui-typography-line-height);
6
+
7
+ /* Headings */
8
+ --sl-text-h1: var(--stl-ui-typography-text-h1);
9
+ --sl-text-h2: var(--stl-ui-typography-text-h2);
10
+ --sl-text-h3: var(--stl-ui-typography-text-h3);
11
+ --sl-text-h4: var(--stl-ui-typography-text-h4);
12
+ --sl-text-h5: var(--stl-ui-typography-text-h5);
13
+
14
+ /* Colors */
15
+ --sl-color-bg: var(--stl-ui-background);
16
+ --sl-color-bg-sidebar: var(--stl-ui-background);
17
+ --sl-color-bg-ui: var(--stl-ui-card-background);
18
+ --sl-color-bg-nav: var(--stl-ui-background);
19
+ --sl-color-bg-inline-code: var(--stl-ui-muted-background);
20
+ --sl-color-bg-accent: var(--stl-ui-accent-background);
21
+
22
+ --sl-color-text: var(--stl-ui-foreground);
23
+ --sl-color-text-secondary: var(--stl-ui-foreground-secondary);
24
+ --sl-color-text-tertiary: var(--stl-ui-foreground-muted);
25
+ --sl-color-text-accent: var(--stl-ui-foreground-accent);
26
+ --sl-color-hairline: var(--stl-ui-border);
27
+ --sl-color-hairline-light: var(--stl-ui-border-muted);
28
+ --sl-color-hairline-shade: var(--stl-ui-border-emphasis);
29
+ --sl-color-text-invert: var(--stl-ui-inverse-foreground);
30
+
31
+ /* Primary colors */
32
+ --sl-color-red-low: var(--stl-ui-swatch-red-faint);
33
+ --sl-color-red: var(--stl-ui-swatch-red-base);
34
+ --sl-color-red-high: var(--stl-ui-swatch-red-base);
35
+
36
+ --sl-color-green-low: var(--stl-ui-swatch-green-faint);
37
+ --sl-color-green: var(--stl-ui-swatch-green-base);
38
+ --sl-color-green-high: var(--stl-ui-swatch-green-base);
39
+
40
+ --sl-color-blue-low: var(--stl-ui-swatch-blue-faint);
41
+ --sl-color-blue: var(--stl-ui-swatch-blue-base);
42
+ --sl-color-blue-high: var(--stl-ui-swatch-blue-base);
43
+
44
+ --sl-color-orange-low: var(--stl-ui-swatch-orange-faint);
45
+ --sl-color-orange: var(--stl-ui-swatch-orange-base);
46
+ --sl-color-orange-high: var(--stl-ui-swatch-orange-base);
47
+
48
+ --sl-color-purple-low: var(--stl-ui-swatch-purple-faint);
49
+ --sl-color-purple: var(--stl-ui-swatch-purple-base);
50
+ --sl-color-purple-high: var(--stl-ui-swatch-purple-base);
51
+
52
+ --sl-color-teal-low: var(--stl-ui-swatch-teal-faint);
53
+ --sl-color-teal: var(--stl-ui-swatch-teal-base);
54
+ --sl-color-teal-high: var(--stl-ui-swatch-teal-base);
55
+
56
+ --sl-color-magenta-low: var(--stl-ui-swatch-pink-faint);
57
+ --sl-color-magenta: var(--stl-ui-swatch-pink-base);
58
+ --sl-color-magenta-high: var(--stl-ui-swatch-pink-base);
59
+
60
+ --sl-color-yellow-low: var(--stl-ui-swatch-yellow-faint);
61
+ --sl-color-yellow: var(--stl-ui-swatch-yellow-base);
62
+ --sl-color-yellow-high: var(--stl-ui-swatch-yellow-base);
63
+ }
12
64
 
13
- :root {
14
- /* Layout and Typography */
15
- --sl-text-h1: var(--stl-ui-typography-text-h1);
16
- --sl-text-h2: var(--stl-ui-typography-text-h2);
17
- --sl-text-h3: var(--stl-ui-typography-text-h3);
18
- --sl-text-h4: var(--stl-ui-typography-text-h4);
19
- --sl-text-h4: var(--stl-ui-typography-text-h5);
20
-
21
- /* Colors */
22
- --sl-color-bg: var(--stl-ui-background);
23
- --sl-color-bg-sidebar: var(--stl-ui-background);
24
- --sl-color-bg-ui: var(--stl-ui-card-background);
25
- --sl-color-bg-nav: var(--stl-ui-background);
26
- --sl-color-bg-inline-code: var(--stl-ui-muted-background);
27
- --sl-color-bg-accent: var(--stl-ui-accent-background);
28
-
29
- --sl-color-text: var(--stl-ui-foreground);
30
- --sl-color-text-secondary: var(--stl-ui-foreground-secondary);
31
- --sl-color-text-tertiary: var(--stl-ui-foreground-muted);
32
- --sl-color-text-accent: var(--stl-ui-foreground-accent);
33
- --sl-color-hairline: var(--stl-ui-border);
34
- --sl-color-hairline-light: var(--stl-ui-border-muted);
35
- --sl-color-hairline-shade: var(--stl-ui-border-emphasis);
36
- --sl-color-text-invert: var(--stl-ui-inverse-foreground);
37
-
38
- /* Primary colors */
39
- --sl-color-red-low: var(--stl-ui-swatch-red-faint);
40
- --sl-color-red: var(--stl-ui-swatch-red-base);
41
- --sl-color-red-high: var(--stl-ui-swatch-red-base);
42
-
43
- --sl-color-green-low: var(--stl-ui-swatch-green-faint);
44
- --sl-color-green: var(--stl-ui-swatch-green-base);
45
- --sl-color-green-high: var(--stl-ui-swatch-green-base);
46
-
47
- --sl-color-blue-low: var(--stl-ui-swatch-blue-faint);
48
- --sl-color-blue: var(--stl-ui-swatch-blue-base);
49
- --sl-color-blue-high: var(--stl-ui-swatch-blue-base);
50
-
51
- --sl-color-orange-low: var(--stl-ui-swatch-orange-faint);
52
- --sl-color-orange: var(--stl-ui-swatch-orange-base);
53
- --sl-color-orange-high: var(--stl-ui-swatch-orange-base);
54
-
55
- --sl-color-purple-low: var(--stl-ui-swatch-purple-faint);
56
- --sl-color-purple: var(--stl-ui-swatch-purple-base);
57
- --sl-color-purple-high: var(--stl-ui-swatch-purple-base);
58
-
59
- --sl-color-teal-low: var(--stl-ui-swatch-teal-faint);
60
- --sl-color-teal: var(--stl-ui-swatch-teal-base);
61
- --sl-color-teal-high: var(--stl-ui-swatch-teal-base);
62
-
63
- --sl-color-magenta-low: var(--stl-ui-swatch-pink-faint);
64
- --sl-color-magenta: var(--stl-ui-swatch-pink-base);
65
- --sl-color-magenta-high: var(--stl-ui-swatch-pink-base);
66
-
67
- --sl-color-yellow-low: var(--stl-ui-swatch-yellow-faint);
68
- --sl-color-yellow: var(--stl-ui-swatch-yellow-base);
69
- --sl-color-yellow-high: var(--stl-ui-swatch-yellow-base);
65
+ /* Starlight Compatibility */
66
+ .stl-ui-prose {
67
+ :is(h1, h2, h3, h4, h5) code {
68
+ font-size: 0.9em;
69
+ font-weight: inherit;
70
+ }
71
+ /* TODO: Disable starlight headingLinks and replace with our own */
72
+ /* Duplicate styles from h1–5 in typography; TODO: move to mixins after adopting preprocessor */
73
+ .sl-heading-wrapper.level-h1 {
74
+ font-size: var(--stl-ui-typography-text-h1);
75
+ letter-spacing: -0.03em;
76
+ margin-top: 64px;
77
+ line-height: var(--stl-ui-typography-line-height-headings);
78
+ }
79
+ .sl-heading-wrapper.level-h2 {
80
+ font-size: var(--stl-ui-typography-text-h2);
81
+ letter-spacing: -0.03em;
82
+ margin-top: 48px;
83
+ line-height: var(--stl-ui-typography-line-height-headings);
70
84
  }
71
85
 
72
- /* Starlight Compatibility */
73
- .stl-ui-prose {
74
- .sl-anchor-link svg {
75
- margin-top: 4px;
76
- }
77
-
78
- h2 code {
79
- font-size: var(--stl-ui-typography-text-h4);
80
- line-height: 120%;
81
- }
82
-
83
- h3 code {
84
- font-size: var(--stl-ui-typography-text-h5);
85
- line-height: 120%;
86
- }
87
-
88
- /* Tab component */
89
- starlight-tabs {
90
- a {
91
- text-decoration: none;
92
- line-height: unset;
93
- color: var(--stl-ui-foreground);
86
+ .sl-heading-wrapper.level-h3 {
87
+ font-size: var(--stl-ui-typography-text-h3);
88
+ letter-spacing: -0.02em;
89
+ margin-top: 40px;
90
+ line-height: var(--stl-ui-typography-line-height-headings);
91
+ }
92
+ .sl-heading-wrapper.level-h4 {
93
+ font-size: var(--stl-ui-typography-text-h4);
94
+ letter-spacing: -0.02em;
95
+ margin-top: 32px;
96
+ line-height: var(--stl-ui-typography-line-height-headings);
97
+ }
98
+ .sl-heading-wrapper.level-h5 {
99
+ font-size: var(--stl-ui-typography-text-h5);
100
+ letter-spacing: -0.02em;
101
+ margin-top: 24px;
102
+ line-height: var(--stl-ui-typography-line-height-headings);
103
+ }
104
+ .sl-heading-wrapper {
105
+ --sl-anchor-icon-size: 0.8em;
106
+ }
107
+ /* TODO: replace with an icon that matches Stainless branding */
108
+ .sl-anchor-link svg {
109
+ margin-top: 0;
110
+ }
111
+ }
94
112
 
95
- &[aria-selected='true'] {
96
- color: var(--stl-ui-foreground-accent);
97
- }
113
+ /* TODO: remove these */
114
+ .stl-ui-prose {
115
+ /* Tab component */
116
+ starlight-tabs {
117
+ a {
118
+ text-decoration: none;
119
+ line-height: unset;
120
+ color: var(--stl-ui-foreground);
121
+
122
+ &[aria-selected='true'] {
123
+ color: var(--stl-ui-foreground-accent);
124
+ font-weight: normal;
98
125
  }
126
+ }
99
127
 
100
- ol,
101
- ul {
128
+ ol,
129
+ ul {
130
+ &:not(.stl-ui-not-prose *) {
102
131
  padding-left: 0;
103
132
  }
133
+ }
104
134
 
105
- li {
135
+ li:not(.stl-ui-not-prose *) {
136
+ margin-bottom: -2px;
137
+ &:not(:last-child) {
106
138
  margin-bottom: -2px;
107
- &:not(:last-child) {
108
- margin-bottom: -2px;
109
- }
139
+ }
110
140
 
111
- a:first-child {
112
- display: flex;
113
- }
141
+ a:first-child {
142
+ display: flex;
114
143
  }
115
144
  }
145
+ }
116
146
 
117
- /* Pagination Links */
147
+ /* Pagination Links */
118
148
 
119
- .pagination-links {
120
- a {
121
- color: var(--stl-ui-foreground);
122
- }
149
+ .pagination-links {
150
+ a {
151
+ color: var(--stl-ui-foreground);
152
+ }
153
+ }
154
+
155
+ .starlight-aside {
156
+ svg {
157
+ margin-top: 0;
123
158
  }
124
159
  }
125
160
  }
package/src/styles/swatches.css CHANGED
@@ -1,6 +1,6 @@
1
- @layer stl-ui {
1
+ @layer stl-ui.tokens {
2
2
  /* --stl-ui-swatch-es - Light */
3
- :root[data-theme='light'] {
3
+ :root {
4
4
  --stl-ui-swatch-gray-gray-1: var(--stl-ui-gray-800);
5
5
  --stl-ui-swatch-gray-gray-2: var(--stl-ui-gray-700);
6
6
  --stl-ui-swatch-gray-gray-3: var(--stl-ui-gray-600);
package/src/styles/theme.css CHANGED
@@ -1,6 +1,6 @@
1
- @layer stl-ui {
1
+ @layer stl-ui.tokens {
2
2
  /* Swatches - Light */
3
- :root[data-theme='light'] {
3
+ :root {
4
4
  --stl-ui-background: var(--stl-ui-swatch-gray-white);
5
5
  --stl-ui-card-background: var(--stl-ui-swatch-gray-white);
6
6
  --stl-ui-muted-background: var(--stl-ui-swatch-gray-gray-8);
package/src/styles/typography.css CHANGED
@@ -1,5 +1,5 @@
1
- @layer stl-ui {
2
- /* Typography - Stainless */
1
+ /* Typography - Stainless */
2
+ @layer stl-ui.tokens {
3
3
  :root {
4
4
  --stl-ui-typography-font: 'Geist', system-ui, sans-serif;
5
5
  --stl-ui-typography-font-mono: 'Geist Mono', ui-monospace, monospace;
@@ -30,170 +30,143 @@
30
30
  --stl-ui-type-scale-text-5xl: 42px;
31
31
  --stl-ui-type-scale-text-6xl: 64px;
32
32
  }
33
+ }
33
34
 
34
- /* Prose exists in its own sub-layer for easy reverting */
35
- @layer typography {
36
- body {
37
- font-family: var(--stl-ui-typography-font);
38
- font-feature-settings:
39
- 'ss01' on,
40
- 'ss03' on,
41
- 'ss04' on,
42
- 'ss06' on,
43
- 'ss08' on;
44
- }
45
-
46
- .stl-ui-prose {
47
- color: var(--stl-ui-foreground-secondary);
48
-
49
- /* Body/Regular */
50
- font-size: var(--stl-ui-typography-text-body);
51
- font-style: normal;
52
- font-weight: 400;
53
- line-height: var(--stl-ui-typography-line-height);
54
- letter-spacing: -0.01em;
55
-
56
- * {
57
- margin: 0;
58
- }
59
-
60
- p {
61
- margin-top: 16px;
62
- }
35
+ /* Prose exists in its own sub-layer for easy reverting */
36
+ body {
37
+ font-family: var(--stl-ui-typography-font);
38
+ font-feature-settings:
39
+ 'ss01' on,
40
+ 'ss03' on,
41
+ 'ss04' on,
42
+ 'ss06' on,
43
+ 'ss08' on;
44
+ }
63
45
 
64
- p,
65
- li {
66
- color: var(--stl-ui-foreground-secondary);
67
- }
46
+ .stl-ui-prose {
47
+ :where(p):not(.stl-ui-not-prose *) {
48
+ color: var(--stl-ui-foreground-secondary);
49
+ font-weight: 400;
50
+ line-height: var(--stl-ui-typography-line-height);
51
+ letter-spacing: -0.01em;
52
+ font-size: var(--stl-ui-typography-text-body);
53
+ margin-top: 16px;
54
+ }
68
55
 
69
- strong {
70
- color: var(--stl-ui-foreground);
71
- }
56
+ :where(p, li) {
57
+ &:not(.stl-ui-not-prose *) {
58
+ color: var(--stl-ui-foreground-secondary);
59
+ }
60
+ }
72
61
 
73
- aside {
74
- p,
75
- li {
76
- color: var(--stl-ui-foreground);
77
- }
78
- }
62
+ :where(strong):not(.stl-ui-not-prose *) {
63
+ color: var(--stl-ui-foreground);
64
+ }
79
65
 
80
- a {
81
- color: var(--stl-ui-foreground-accent);
82
-
83
- /* Body/Link */
84
- font-weight: 600;
85
- text-decoration-line: underline;
86
- text-decoration-style: solid;
87
- text-decoration-skip-ink: auto;
88
- text-decoration-thickness: auto;
89
- text-underline-offset: auto;
90
- text-underline-position: from-font;
91
- }
66
+ :where(aside):not(.stl-ui-not-prose *) {
67
+ color: var(--stl-ui-foreground);
68
+ }
92
69
 
93
- h1,
94
- h2,
95
- h3,
96
- h4,
97
- h5,
98
- h6 {
70
+ h1,
71
+ h2,
72
+ h3,
73
+ h4,
74
+ h5,
75
+ h6 {
76
+ &:not(.stl-ui-not-prose *) {
77
+ &,
78
+ * {
99
79
  color: var(--stl-ui-foreground);
100
80
  font-weight: 500;
101
81
  line-height: var(--stl-ui-typography-line-height-headings);
102
82
  }
83
+ }
84
+ }
103
85
 
104
- h1 {
105
- /* Heading 1/Medium */
106
- font-size: var(--stl-ui-typography-text-h1);
107
- letter-spacing: -0.03em;
86
+ h1:not(.stl-ui-not-prose *) {
87
+ /* Heading 1/Medium */
88
+ font-size: var(--stl-ui-typography-text-h1);
89
+ letter-spacing: -0.03em;
108
90
 
109
- margin-top: 64px;
110
- }
91
+ margin-top: 64px;
92
+ }
111
93
 
112
- h2 {
113
- /* Heading 2/Medium */
114
- font-size: var(--stl-ui-typography-text-h2);
115
- letter-spacing: -0.03em;
116
- margin-top: 48px;
117
- }
94
+ h2:not(.stl-ui-not-prose *) {
95
+ /* Heading 2/Medium */
96
+ font-size: var(--stl-ui-typography-text-h2);
97
+ letter-spacing: -0.03em;
118
98
 
119
- h3 {
120
- /* Heading 3/Medium */
121
- font-size: var(--stl-ui-typography-text-h3);
122
- letter-spacing: -0.02em;
123
- margin-top: 40px;
124
- }
99
+ margin-top: 48px;
100
+ }
125
101
 
126
- h4 {
127
- /* Heading 4/Medium */
128
- font-size: var(--stl-ui-typography-text-h4);
129
- letter-spacing: -0.02em;
130
- margin-top: 32px;
131
- }
102
+ h3:not(.stl-ui-not-prose *) {
103
+ /* Heading 3/Medium */
104
+ font-size: var(--stl-ui-typography-text-h3);
105
+ letter-spacing: -0.02em;
106
+ margin-top: 40px;
107
+ }
132
108
 
133
- h5 {
134
- /* Heading 5/Medium */
135
- font-size: var(--stl-ui-typography-text-h5);
136
- letter-spacing: -0.02em;
137
- margin-top: 24px;
138
- }
109
+ h4:not(.stl-ui-not-prose *) {
110
+ /* Heading 4/Medium */
111
+ font-size: var(--stl-ui-typography-text-h4);
112
+ letter-spacing: -0.02em;
113
+ margin-top: 32px;
114
+ }
139
115
 
140
- li {
141
- &:not(:last-child) {
142
- margin-bottom: 8px;
143
- }
144
-
145
- h1,
146
- h2,
147
- h3,
148
- h4,
149
- h5,
150
- p,
151
- a {
152
- &:first-child {
153
- display: inline;
154
- }
155
- }
156
- }
116
+ h5:not(.stl-ui-not-prose *) {
117
+ /* Heading 5/Medium */
118
+ font-size: var(--stl-ui-typography-text-h5);
119
+ letter-spacing: -0.02em;
120
+ margin-top: 24px;
121
+ }
157
122
 
158
- ol,
159
- ul {
160
- padding-left: 26px;
161
- }
123
+ li:not(.stl-ui-not-prose *) {
124
+ &:not(:last-child) {
125
+ margin-bottom: 8px;
126
+ }
162
127
 
163
- ol,
164
- ul,
165
- aside,
166
- img,
167
- svg,
168
- figure,
169
- details {
170
- margin-top: 16px;
128
+ h1,
129
+ h2,
130
+ h3,
131
+ h4,
132
+ h5,
133
+ p,
134
+ a {
135
+ &:first-child {
136
+ display: inline;
171
137
  }
138
+ }
139
+ }
172
140
 
173
- :not(pre) > code {
174
- color: var(--stl-ui-foreground);
175
- font-feature-settings:
176
- 'ss01' on,
177
- 'ss03' on,
178
- 'ss04' on,
179
- 'ss06' on;
180
-
181
- /* Code/Regular */
182
- font-family: var(--stl-ui-typography-font-mono);
183
- font-size: var(--stl-ui-typography-text-body-sm);
184
- font-style: normal;
185
- font-weight: 400;
186
- line-height: 150%; /* 21px */
187
-
188
- padding: 0 4px;
189
- background-color: oklch(from var(--stl-ui-foreground) l c h / 0.1);
190
- border-radius: var(--stl-ui-layout-border-radius-xs);
191
- }
141
+ :where(ol, ul) {
142
+ &:not(.stl-ui-not-prose *) {
143
+ padding-left: 26px;
144
+ }
145
+ }
192
146
 
193
- /* Escape hatch for non-prose content */
194
- .stl-ui-not-prose * {
195
- all: revert-layer;
196
- }
147
+ :where(ol, ul, aside, img, figure, details) {
148
+ &:not(.stl-ui-not-prose *) {
149
+ margin-top: 16px;
197
150
  }
198
151
  }
152
+
153
+ :where(:not(pre) > code):not(.stl-ui-not-prose *) {
154
+ color: var(--stl-ui-foreground);
155
+ font-feature-settings:
156
+ 'ss01' on,
157
+ 'ss03' on,
158
+ 'ss04' on,
159
+ 'ss06' on;
160
+
161
+ /* Code/Regular */
162
+ font-family: var(--stl-ui-typography-font-mono);
163
+ font-size: var(--stl-ui-typography-text-body-sm);
164
+ font-style: normal;
165
+ font-weight: 400;
166
+ line-height: 150%; /* 21px */
167
+
168
+ padding: 0 4px;
169
+ background-color: oklch(from var(--stl-ui-foreground) l c h / 0.1);
170
+ border-radius: var(--stl-ui-layout-border-radius-xs);
171
+ }
199
172
  }
package/src/styles.css CHANGED
@@ -8,4 +8,4 @@
8
8
  @import './components/button.css';
9
9
  @import './components/dropdown-button.css';
10
10
  @import './components/callout.css';
11
- @import './components/details.css';
11
+ @import './components/accordion.css';
package/tsconfig.json CHANGED
@@ -1,15 +1,11 @@
1
1
  {
2
+ "extends": "../../tsconfig.base.json",
2
3
  "compilerOptions": {
3
- "target": "ESNext",
4
- "module": "ESNext",
4
+ "noEmit": false,
5
5
  "declaration": true,
6
6
  "declarationDir": "dist",
7
7
  "outDir": "dist",
8
8
  "jsx": "react-jsx",
9
- "esModuleInterop": true,
10
- "moduleResolution": "Node",
11
- "skipLibCheck": true,
12
- "strict": true
13
9
  },
14
10
  "include": ["src"]
15
11
  }
package/src/components/DetailsGroup.tsx DELETED
@@ -1,17 +0,0 @@
1
- import React from 'react';
2
- import clsx from 'clsx';
3
-
4
- export type DetailsGroupProps = React.ComponentProps<'div'>;
5
-
6
- export function DetailsGroup({ className, children, ...props }: DetailsGroupProps) {
7
- const classes = clsx('stl-ui-details-group', className);
8
-
9
- // TODO: boolean `exclusive` prop assigns a unique `name` to each of the child <details> elements
10
- // For now this can be handled by the user
11
-
12
- return (
13
- <div className={classes} {...props}>
14
- {children}
15
- </div>
16
- );
17
- }