@spark-web/stack 0.0.0-snapshot-release-20260409001813
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.
- package/CHANGELOG.md +732 -0
- package/CLAUDE.md +70 -0
- package/README.md +118 -0
- package/dist/declarations/src/alignment.d.ts +14 -0
- package/dist/declarations/src/index.d.ts +2 -0
- package/dist/declarations/src/stack.d.ts +21 -0
- package/dist/spark-web-stack.cjs.d.ts +2 -0
- package/dist/spark-web-stack.cjs.dev.js +58 -0
- package/dist/spark-web-stack.cjs.js +7 -0
- package/dist/spark-web-stack.cjs.prod.js +58 -0
- package/dist/spark-web-stack.esm.js +54 -0
- package/package.json +36 -0
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,732 @@
|
|
|
1
|
+
# @spark-web/stack
|
|
2
|
+
|
|
3
|
+
## 0.0.0-snapshot-release-20260409001813
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#782](https://github.com/brighte-labs/spark-web/pull/782)
|
|
8
|
+
[`b18cf44`](https://github.com/brighte-labs/spark-web/commit/b18cf4426df1e94b005ece8d93996459dc3e41d6)
|
|
9
|
+
Thanks [@jacobporci-brighte](https://github.com/jacobporci-brighte)! -
|
|
10
|
+
**docs:** add CLAUDE.md AI context files to foundation and form packages;
|
|
11
|
+
patch data-table with manual sort and spinner overlay patterns
|
|
12
|
+
- Updated dependencies
|
|
13
|
+
[[`b18cf44`](https://github.com/brighte-labs/spark-web/commit/b18cf4426df1e94b005ece8d93996459dc3e41d6)]:
|
|
14
|
+
- @spark-web/box@0.0.0-snapshot-release-20260409001813
|
|
15
|
+
|
|
16
|
+
## 5.1.0
|
|
17
|
+
|
|
18
|
+
### Minor Changes
|
|
19
|
+
|
|
20
|
+
- [#667](https://github.com/brighte-labs/spark-web/pull/667)
|
|
21
|
+
[`80d9c15`](https://github.com/brighte-labs/spark-web/commit/80d9c156a40bbcd2b1a91a2d0403b3c8e9b47b4e)
|
|
22
|
+
Thanks [@Leo704099](https://github.com/Leo704099)! - Support react 17 to 19
|
|
23
|
+
|
|
24
|
+
### Patch Changes
|
|
25
|
+
|
|
26
|
+
- Updated dependencies
|
|
27
|
+
[[`80d9c15`](https://github.com/brighte-labs/spark-web/commit/80d9c156a40bbcd2b1a91a2d0403b3c8e9b47b4e)]:
|
|
28
|
+
- @spark-web/divider@5.1.0
|
|
29
|
+
- @spark-web/theme@5.13.0
|
|
30
|
+
- @spark-web/utils@5.1.0
|
|
31
|
+
- @spark-web/box@6.0.0
|
|
32
|
+
|
|
33
|
+
## 5.0.2
|
|
34
|
+
|
|
35
|
+
### Patch Changes
|
|
36
|
+
|
|
37
|
+
- [#698](https://github.com/brighte-labs/spark-web/pull/698)
|
|
38
|
+
[`814b373`](https://github.com/brighte-labs/spark-web/commit/814b373cbe9fcf0757738c78eef6b516624df62c)
|
|
39
|
+
Thanks [@michtntbrighte](https://github.com/michtntbrighte)! - Bump version
|
|
40
|
+
|
|
41
|
+
- Updated dependencies
|
|
42
|
+
[[`814b373`](https://github.com/brighte-labs/spark-web/commit/814b373cbe9fcf0757738c78eef6b516624df62c)]:
|
|
43
|
+
- @spark-web/box@5.2.2
|
|
44
|
+
- @spark-web/theme@5.12.1
|
|
45
|
+
|
|
46
|
+
## 5.0.1
|
|
47
|
+
|
|
48
|
+
### Patch Changes
|
|
49
|
+
|
|
50
|
+
- Updated dependencies
|
|
51
|
+
[[`1995db7`](https://github.com/brighte-labs/spark-web/commit/1995db7f4342803732c7648ab3ca6d32442cc347)]:
|
|
52
|
+
- @spark-web/theme@5.12.0
|
|
53
|
+
|
|
54
|
+
## 5.0.0
|
|
55
|
+
|
|
56
|
+
### Major Changes
|
|
57
|
+
|
|
58
|
+
- This release of spark-web standardises the version across all packages to be
|
|
59
|
+
**`v5`**, primarily signifying the switch from `@emotion/css` to
|
|
60
|
+
`@emotion/react` as one of the key dependencies of the entire library, in
|
|
61
|
+
order to support server-side rendering / SSR.
|
|
62
|
+
|
|
63
|
+
This release also introduces support for theming, to allow for more co-branded
|
|
64
|
+
experiences across our web applications. It also supports component-level
|
|
65
|
+
theming for `<Button />`, `<ButtonLink />`, and `<Checkbox />`, which provides
|
|
66
|
+
the capability to override the global theme available inside an application.
|
|
67
|
+
|
|
68
|
+
To use this in an application, you can wrap the affected areas with a
|
|
69
|
+
`ThemeProvider`:
|
|
70
|
+
|
|
71
|
+
```
|
|
72
|
+
<ThemeProvider theme="pantheon">
|
|
73
|
+
<Input type="text" />
|
|
74
|
+
<Button type="submit" />
|
|
75
|
+
</ThemeProvider>
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
Part of the theming capabilities includes a new theme for `spark-web` called
|
|
79
|
+
"pantheon", which should map with our co-branding efforts in the Pantheon
|
|
80
|
+
project. It currently includes a small set of colors and its corresponding
|
|
81
|
+
font family.
|
|
82
|
+
|
|
83
|
+
### Patch Changes
|
|
84
|
+
|
|
85
|
+
- [#532](https://github.com/brighte-labs/spark-web/pull/532)
|
|
86
|
+
[`631573c`](https://github.com/brighte-labs/spark-web/commit/631573cb72981d99b9afa4ad559123f44e47b2a9)
|
|
87
|
+
Thanks [@ralcoriza-brighte](https://github.com/ralcoriza-brighte)! - Fix
|
|
88
|
+
type-related issues
|
|
89
|
+
|
|
90
|
+
- Updated dependencies
|
|
91
|
+
[[`631573c`](https://github.com/brighte-labs/spark-web/commit/631573cb72981d99b9afa4ad559123f44e47b2a9)]:
|
|
92
|
+
- @spark-web/divider@5.0.0
|
|
93
|
+
- @spark-web/theme@5.0.0
|
|
94
|
+
- @spark-web/utils@5.0.0
|
|
95
|
+
- @spark-web/box@5.0.0
|
|
96
|
+
|
|
97
|
+
## 5.0.0-rc.31
|
|
98
|
+
|
|
99
|
+
### Patch Changes
|
|
100
|
+
|
|
101
|
+
- Fix type-related issues
|
|
102
|
+
|
|
103
|
+
- Updated dependencies []:
|
|
104
|
+
- @spark-web/divider@5.0.0-rc.31
|
|
105
|
+
- @spark-web/theme@5.0.0-rc.31
|
|
106
|
+
- @spark-web/utils@5.0.0-rc.31
|
|
107
|
+
- @spark-web/box@5.0.0-rc.31
|
|
108
|
+
|
|
109
|
+
## 5.0.0-rc.30
|
|
110
|
+
|
|
111
|
+
### Minor Changes
|
|
112
|
+
|
|
113
|
+
- Adopt latest changes from stable main branch
|
|
114
|
+
|
|
115
|
+
### Patch Changes
|
|
116
|
+
|
|
117
|
+
- Updated dependencies []:
|
|
118
|
+
- @spark-web/divider@5.0.0-rc.30
|
|
119
|
+
- @spark-web/theme@5.0.0-rc.30
|
|
120
|
+
- @spark-web/utils@5.0.0-rc.30
|
|
121
|
+
- @spark-web/box@5.0.0-rc.30
|
|
122
|
+
|
|
123
|
+
## 5.0.0-rc.29
|
|
124
|
+
|
|
125
|
+
### Minor Changes
|
|
126
|
+
|
|
127
|
+
- Revise stylesheet maps to align with theme name change
|
|
128
|
+
|
|
129
|
+
### Patch Changes
|
|
130
|
+
|
|
131
|
+
- Updated dependencies []:
|
|
132
|
+
- @spark-web/divider@5.0.0-rc.29
|
|
133
|
+
- @spark-web/theme@5.0.0-rc.29
|
|
134
|
+
- @spark-web/utils@5.0.0-rc.29
|
|
135
|
+
- @spark-web/box@5.0.0-rc.29
|
|
136
|
+
|
|
137
|
+
## 5.0.0-rc.28
|
|
138
|
+
|
|
139
|
+
### Minor Changes
|
|
140
|
+
|
|
141
|
+
- Move fonts to theme package; Introduce Pantheon font family and stylesheet
|
|
142
|
+
|
|
143
|
+
### Patch Changes
|
|
144
|
+
|
|
145
|
+
- Updated dependencies []:
|
|
146
|
+
- @spark-web/divider@5.0.0-rc.28
|
|
147
|
+
- @spark-web/theme@5.0.0-rc.28
|
|
148
|
+
- @spark-web/utils@5.0.0-rc.28
|
|
149
|
+
- @spark-web/box@5.0.0-rc.28
|
|
150
|
+
|
|
151
|
+
## 5.0.0-rc.27
|
|
152
|
+
|
|
153
|
+
### Minor Changes
|
|
154
|
+
|
|
155
|
+
- Remove theme prop in button link
|
|
156
|
+
|
|
157
|
+
### Patch Changes
|
|
158
|
+
|
|
159
|
+
- Updated dependencies []:
|
|
160
|
+
- @spark-web/divider@5.0.0-rc.27
|
|
161
|
+
- @spark-web/theme@5.0.0-rc.27
|
|
162
|
+
- @spark-web/utils@5.0.0-rc.27
|
|
163
|
+
- @spark-web/box@5.0.0-rc.27
|
|
164
|
+
|
|
165
|
+
## 5.0.0-rc.26
|
|
166
|
+
|
|
167
|
+
### Minor Changes
|
|
168
|
+
|
|
169
|
+
- Roll back on using theme prop for component level theming; prefer using
|
|
170
|
+
ThemeProvider in applications instead
|
|
171
|
+
|
|
172
|
+
### Patch Changes
|
|
173
|
+
|
|
174
|
+
- Updated dependencies []:
|
|
175
|
+
- @spark-web/divider@5.0.0-rc.26
|
|
176
|
+
- @spark-web/theme@5.0.0-rc.26
|
|
177
|
+
- @spark-web/utils@5.0.0-rc.26
|
|
178
|
+
- @spark-web/box@5.0.0-rc.26
|
|
179
|
+
|
|
180
|
+
## 5.0.0-rc.25
|
|
181
|
+
|
|
182
|
+
### Minor Changes
|
|
183
|
+
|
|
184
|
+
- Implement checkbox tokens for test theme
|
|
185
|
+
|
|
186
|
+
### Patch Changes
|
|
187
|
+
|
|
188
|
+
- Updated dependencies []:
|
|
189
|
+
- @spark-web/divider@5.0.0-rc.25
|
|
190
|
+
- @spark-web/theme@5.0.0-rc.25
|
|
191
|
+
- @spark-web/utils@5.0.0-rc.25
|
|
192
|
+
- @spark-web/box@5.0.0-rc.25
|
|
193
|
+
|
|
194
|
+
## 5.0.0-rc.24
|
|
195
|
+
|
|
196
|
+
### Minor Changes
|
|
197
|
+
|
|
198
|
+
- Resolve issues with package build output
|
|
199
|
+
|
|
200
|
+
### Patch Changes
|
|
201
|
+
|
|
202
|
+
- Updated dependencies []:
|
|
203
|
+
- @spark-web/divider@5.0.0-rc.24
|
|
204
|
+
- @spark-web/theme@5.0.0-rc.24
|
|
205
|
+
- @spark-web/utils@5.0.0-rc.24
|
|
206
|
+
- @spark-web/box@5.0.0-rc.24
|
|
207
|
+
|
|
208
|
+
## 2.0.0-rc.21
|
|
209
|
+
|
|
210
|
+
### Minor Changes
|
|
211
|
+
|
|
212
|
+
- Introduce global theming provider to set global default theme
|
|
213
|
+
|
|
214
|
+
### Patch Changes
|
|
215
|
+
|
|
216
|
+
- Updated dependencies []:
|
|
217
|
+
- @spark-web/divider@2.0.0-rc.21
|
|
218
|
+
- @spark-web/theme@4.0.0-rc.21
|
|
219
|
+
- @spark-web/utils@2.0.0-rc.21
|
|
220
|
+
- @spark-web/box@2.0.0-rc.21
|
|
221
|
+
|
|
222
|
+
## 2.0.0-rc.20
|
|
223
|
+
|
|
224
|
+
### Minor Changes
|
|
225
|
+
|
|
226
|
+
- Support for component-level theming; button-level theming
|
|
227
|
+
|
|
228
|
+
### Patch Changes
|
|
229
|
+
|
|
230
|
+
- Updated dependencies []:
|
|
231
|
+
- @spark-web/divider@2.0.0-rc.20
|
|
232
|
+
- @spark-web/theme@4.0.0-rc.20
|
|
233
|
+
- @spark-web/utils@2.0.0-rc.20
|
|
234
|
+
- @spark-web/box@2.0.0-rc.20
|
|
235
|
+
|
|
236
|
+
## 2.0.0-rc.19
|
|
237
|
+
|
|
238
|
+
### Major Changes
|
|
239
|
+
|
|
240
|
+
- test
|
|
241
|
+
|
|
242
|
+
### Patch Changes
|
|
243
|
+
|
|
244
|
+
- Updated dependencies []:
|
|
245
|
+
- @spark-web/divider@2.0.0-rc.19
|
|
246
|
+
- @spark-web/theme@4.0.0-rc.19
|
|
247
|
+
- @spark-web/utils@2.0.0-rc.19
|
|
248
|
+
- @spark-web/box@2.0.0-rc.19
|
|
249
|
+
|
|
250
|
+
## 2.0.0-rc.18
|
|
251
|
+
|
|
252
|
+
### Major Changes
|
|
253
|
+
|
|
254
|
+
- tests
|
|
255
|
+
|
|
256
|
+
### Patch Changes
|
|
257
|
+
|
|
258
|
+
- Updated dependencies []:
|
|
259
|
+
- @spark-web/divider@2.0.0-rc.18
|
|
260
|
+
- @spark-web/theme@4.0.0-rc.18
|
|
261
|
+
- @spark-web/utils@2.0.0-rc.18
|
|
262
|
+
- @spark-web/box@2.0.0-rc.18
|
|
263
|
+
|
|
264
|
+
## 2.0.0-rc.17
|
|
265
|
+
|
|
266
|
+
### Major Changes
|
|
267
|
+
|
|
268
|
+
- test
|
|
269
|
+
|
|
270
|
+
### Patch Changes
|
|
271
|
+
|
|
272
|
+
- Updated dependencies []:
|
|
273
|
+
- @spark-web/divider@2.0.0-rc.17
|
|
274
|
+
- @spark-web/theme@4.0.0-rc.17
|
|
275
|
+
- @spark-web/utils@2.0.0-rc.17
|
|
276
|
+
- @spark-web/box@2.0.0-rc.17
|
|
277
|
+
|
|
278
|
+
## 2.0.0-rc.16
|
|
279
|
+
|
|
280
|
+
### Major Changes
|
|
281
|
+
|
|
282
|
+
- test
|
|
283
|
+
|
|
284
|
+
### Patch Changes
|
|
285
|
+
|
|
286
|
+
- Updated dependencies []:
|
|
287
|
+
- @spark-web/divider@2.0.0-rc.16
|
|
288
|
+
- @spark-web/theme@4.0.0-rc.16
|
|
289
|
+
- @spark-web/utils@2.0.0-rc.16
|
|
290
|
+
- @spark-web/box@2.0.0-rc.16
|
|
291
|
+
|
|
292
|
+
## 2.0.0-rc.15
|
|
293
|
+
|
|
294
|
+
### Major Changes
|
|
295
|
+
|
|
296
|
+
- test
|
|
297
|
+
|
|
298
|
+
### Patch Changes
|
|
299
|
+
|
|
300
|
+
- Updated dependencies []:
|
|
301
|
+
- @spark-web/divider@2.0.0-rc.15
|
|
302
|
+
- @spark-web/theme@4.0.0-rc.15
|
|
303
|
+
- @spark-web/utils@2.0.0-rc.15
|
|
304
|
+
- @spark-web/box@2.0.0-rc.15
|
|
305
|
+
|
|
306
|
+
## 2.0.0-rc.14
|
|
307
|
+
|
|
308
|
+
### Major Changes
|
|
309
|
+
|
|
310
|
+
- test
|
|
311
|
+
|
|
312
|
+
### Patch Changes
|
|
313
|
+
|
|
314
|
+
- Updated dependencies []:
|
|
315
|
+
- @spark-web/divider@2.0.0-rc.14
|
|
316
|
+
- @spark-web/theme@4.0.0-rc.14
|
|
317
|
+
- @spark-web/utils@2.0.0-rc.14
|
|
318
|
+
- @spark-web/box@2.0.0-rc.14
|
|
319
|
+
|
|
320
|
+
## 2.0.0-rc.13
|
|
321
|
+
|
|
322
|
+
### Major Changes
|
|
323
|
+
|
|
324
|
+
- test
|
|
325
|
+
|
|
326
|
+
### Patch Changes
|
|
327
|
+
|
|
328
|
+
- Updated dependencies []:
|
|
329
|
+
- @spark-web/divider@2.0.0-rc.13
|
|
330
|
+
- @spark-web/theme@4.0.0-rc.13
|
|
331
|
+
- @spark-web/utils@2.0.0-rc.13
|
|
332
|
+
- @spark-web/box@2.0.0-rc.13
|
|
333
|
+
|
|
334
|
+
## 2.0.0-rc.12
|
|
335
|
+
|
|
336
|
+
### Major Changes
|
|
337
|
+
|
|
338
|
+
- test
|
|
339
|
+
|
|
340
|
+
### Patch Changes
|
|
341
|
+
|
|
342
|
+
- Updated dependencies []:
|
|
343
|
+
- @spark-web/divider@2.0.0-rc.12
|
|
344
|
+
- @spark-web/theme@4.0.0-rc.12
|
|
345
|
+
- @spark-web/utils@2.0.0-rc.12
|
|
346
|
+
- @spark-web/box@2.0.0-rc.12
|
|
347
|
+
|
|
348
|
+
## 2.0.0-rc.11
|
|
349
|
+
|
|
350
|
+
### Major Changes
|
|
351
|
+
|
|
352
|
+
- test
|
|
353
|
+
|
|
354
|
+
### Patch Changes
|
|
355
|
+
|
|
356
|
+
- Updated dependencies []:
|
|
357
|
+
- @spark-web/divider@2.0.0-rc.11
|
|
358
|
+
- @spark-web/theme@4.0.0-rc.11
|
|
359
|
+
- @spark-web/utils@2.0.0-rc.11
|
|
360
|
+
- @spark-web/box@2.0.0-rc.11
|
|
361
|
+
|
|
362
|
+
## 2.0.0-rc.10
|
|
363
|
+
|
|
364
|
+
### Major Changes
|
|
365
|
+
|
|
366
|
+
- test
|
|
367
|
+
|
|
368
|
+
### Patch Changes
|
|
369
|
+
|
|
370
|
+
- Updated dependencies []:
|
|
371
|
+
- @spark-web/divider@2.0.0-rc.10
|
|
372
|
+
- @spark-web/theme@4.0.0-rc.10
|
|
373
|
+
- @spark-web/utils@2.0.0-rc.10
|
|
374
|
+
- @spark-web/box@2.0.0-rc.10
|
|
375
|
+
|
|
376
|
+
## 2.0.0-rc.9
|
|
377
|
+
|
|
378
|
+
### Major Changes
|
|
379
|
+
|
|
380
|
+
- test
|
|
381
|
+
|
|
382
|
+
### Patch Changes
|
|
383
|
+
|
|
384
|
+
- Updated dependencies []:
|
|
385
|
+
- @spark-web/divider@2.0.0-rc.9
|
|
386
|
+
- @spark-web/theme@4.0.0-rc.9
|
|
387
|
+
- @spark-web/utils@2.0.0-rc.9
|
|
388
|
+
- @spark-web/box@2.0.0-rc.9
|
|
389
|
+
|
|
390
|
+
## 2.0.0-rc.8
|
|
391
|
+
|
|
392
|
+
### Major Changes
|
|
393
|
+
|
|
394
|
+
- test
|
|
395
|
+
|
|
396
|
+
### Patch Changes
|
|
397
|
+
|
|
398
|
+
- Updated dependencies []:
|
|
399
|
+
- @spark-web/divider@2.0.0-rc.8
|
|
400
|
+
- @spark-web/theme@4.0.0-rc.8
|
|
401
|
+
- @spark-web/utils@2.0.0-rc.8
|
|
402
|
+
- @spark-web/box@2.0.0-rc.8
|
|
403
|
+
|
|
404
|
+
## 2.0.0-rc.7
|
|
405
|
+
|
|
406
|
+
### Major Changes
|
|
407
|
+
|
|
408
|
+
- test
|
|
409
|
+
|
|
410
|
+
### Patch Changes
|
|
411
|
+
|
|
412
|
+
- Updated dependencies []:
|
|
413
|
+
- @spark-web/divider@2.0.0-rc.7
|
|
414
|
+
- @spark-web/theme@4.0.0-rc.7
|
|
415
|
+
- @spark-web/utils@2.0.0-rc.7
|
|
416
|
+
- @spark-web/box@2.0.0-rc.7
|
|
417
|
+
|
|
418
|
+
## 2.0.0-rc.6
|
|
419
|
+
|
|
420
|
+
### Major Changes
|
|
421
|
+
|
|
422
|
+
- test
|
|
423
|
+
|
|
424
|
+
### Patch Changes
|
|
425
|
+
|
|
426
|
+
- Updated dependencies []:
|
|
427
|
+
- @spark-web/divider@2.0.0-rc.6
|
|
428
|
+
- @spark-web/theme@4.0.0-rc.6
|
|
429
|
+
- @spark-web/utils@2.0.0-rc.6
|
|
430
|
+
- @spark-web/box@2.0.0-rc.6
|
|
431
|
+
|
|
432
|
+
## 2.0.0-rc.5
|
|
433
|
+
|
|
434
|
+
### Major Changes
|
|
435
|
+
|
|
436
|
+
- test
|
|
437
|
+
|
|
438
|
+
### Patch Changes
|
|
439
|
+
|
|
440
|
+
- Updated dependencies []:
|
|
441
|
+
- @spark-web/divider@2.0.0-rc.5
|
|
442
|
+
- @spark-web/theme@4.0.0-rc.5
|
|
443
|
+
- @spark-web/utils@2.0.0-rc.5
|
|
444
|
+
- @spark-web/box@2.0.0-rc.5
|
|
445
|
+
|
|
446
|
+
## 2.0.0-rc.4
|
|
447
|
+
|
|
448
|
+
### Major Changes
|
|
449
|
+
|
|
450
|
+
- bug
|
|
451
|
+
|
|
452
|
+
### Patch Changes
|
|
453
|
+
|
|
454
|
+
- Updated dependencies []:
|
|
455
|
+
- @spark-web/divider@2.0.0-rc.4
|
|
456
|
+
- @spark-web/theme@4.0.0-rc.4
|
|
457
|
+
- @spark-web/utils@2.0.0-rc.4
|
|
458
|
+
- @spark-web/box@2.0.0-rc.4
|
|
459
|
+
|
|
460
|
+
## 2.0.0-rc.3
|
|
461
|
+
|
|
462
|
+
### Major Changes
|
|
463
|
+
|
|
464
|
+
- upgrade package
|
|
465
|
+
|
|
466
|
+
### Patch Changes
|
|
467
|
+
|
|
468
|
+
- Updated dependencies []:
|
|
469
|
+
- @spark-web/divider@2.0.0-rc.3
|
|
470
|
+
- @spark-web/theme@4.0.0-rc.3
|
|
471
|
+
- @spark-web/utils@2.0.0-rc.3
|
|
472
|
+
- @spark-web/box@2.0.0-rc.3
|
|
473
|
+
|
|
474
|
+
## 2.0.0-rc.2
|
|
475
|
+
|
|
476
|
+
### Major Changes
|
|
477
|
+
|
|
478
|
+
- add parser
|
|
479
|
+
|
|
480
|
+
### Patch Changes
|
|
481
|
+
|
|
482
|
+
- Updated dependencies []:
|
|
483
|
+
- @spark-web/divider@2.0.0-rc.2
|
|
484
|
+
- @spark-web/theme@4.0.0-rc.2
|
|
485
|
+
- @spark-web/utils@2.0.0-rc.2
|
|
486
|
+
- @spark-web/box@2.0.0-rc.2
|
|
487
|
+
|
|
488
|
+
## 2.0.0-rc.1
|
|
489
|
+
|
|
490
|
+
### Major Changes
|
|
491
|
+
|
|
492
|
+
- rc
|
|
493
|
+
|
|
494
|
+
### Patch Changes
|
|
495
|
+
|
|
496
|
+
- Updated dependencies []:
|
|
497
|
+
- @spark-web/divider@2.0.0-rc.1
|
|
498
|
+
- @spark-web/theme@4.0.0-rc.1
|
|
499
|
+
- @spark-web/utils@2.0.0-rc.1
|
|
500
|
+
- @spark-web/box@2.0.0-rc.1
|
|
501
|
+
|
|
502
|
+
## 2.0.0-rc.0
|
|
503
|
+
|
|
504
|
+
### Major Changes
|
|
505
|
+
|
|
506
|
+
- rc versio
|
|
507
|
+
|
|
508
|
+
### Patch Changes
|
|
509
|
+
|
|
510
|
+
- Updated dependencies []:
|
|
511
|
+
- @spark-web/divider@2.0.0-rc.0
|
|
512
|
+
- @spark-web/theme@4.0.0-rc.0
|
|
513
|
+
- @spark-web/box@2.0.0-rc.0
|
|
514
|
+
- @spark-web/utils@2.0.0-rc.0
|
|
515
|
+
|
|
516
|
+
## 1.1.0
|
|
517
|
+
|
|
518
|
+
### Minor Changes
|
|
519
|
+
|
|
520
|
+
- [#382](https://github.com/brighte-labs/spark-web/pull/382)
|
|
521
|
+
[`955bf5d`](https://github.com/brighte-labs/spark-web/commit/955bf5d7698bfdf45e7f317aa3e726c81d3444c0)
|
|
522
|
+
Thanks [@dilipt-brighte](https://github.com/dilipt-brighte)! - Updates React
|
|
523
|
+
version to latest (18.2.0)
|
|
524
|
+
|
|
525
|
+
### Patch Changes
|
|
526
|
+
|
|
527
|
+
- Updated dependencies
|
|
528
|
+
[[`955bf5d`](https://github.com/brighte-labs/spark-web/commit/955bf5d7698bfdf45e7f317aa3e726c81d3444c0)]:
|
|
529
|
+
- @spark-web/box@1.2.0
|
|
530
|
+
- @spark-web/divider@1.1.0
|
|
531
|
+
- @spark-web/theme@3.2.0
|
|
532
|
+
- @spark-web/utils@1.3.0
|
|
533
|
+
|
|
534
|
+
## 1.0.10
|
|
535
|
+
|
|
536
|
+
### Patch Changes
|
|
537
|
+
|
|
538
|
+
- [#218](https://github.com/brighte-labs/spark-web/pull/218)
|
|
539
|
+
[`6fc8d1b`](https://github.com/brighte-labs/spark-web/commit/6fc8d1bc37e25d0cd622bc37f68a1d92eb5961b5)
|
|
540
|
+
Thanks [@nderkim](https://github.com/nderkim)! - Rename files to kebab case
|
|
541
|
+
|
|
542
|
+
- [#222](https://github.com/brighte-labs/spark-web/pull/222)
|
|
543
|
+
[`7f93c45`](https://github.com/brighte-labs/spark-web/commit/7f93c45bbae8c765e10df9d0dd7615473797749b)
|
|
544
|
+
Thanks [@lukebennett88](https://github.com/lukebennett88)! - Update
|
|
545
|
+
dependencies
|
|
546
|
+
|
|
547
|
+
- [#242](https://github.com/brighte-labs/spark-web/pull/242)
|
|
548
|
+
[`6df05f7`](https://github.com/brighte-labs/spark-web/commit/6df05f764e4181c140d6547d6b897d0210468f6a)
|
|
549
|
+
Thanks [@lukebennett88](https://github.com/lukebennett88)! - - Add homepage
|
|
550
|
+
and repository keys to package.json
|
|
551
|
+
- Add CHANGELOG and README to files key in package.json
|
|
552
|
+
- Updated dependencies
|
|
553
|
+
[[`adc5e9e`](https://github.com/brighte-labs/spark-web/commit/adc5e9e6c99acd117f3261edcefdb5573132441b),
|
|
554
|
+
[`de99b9c`](https://github.com/brighte-labs/spark-web/commit/de99b9c7f72373bd1902cf67f5cfec9a1e1db01c),
|
|
555
|
+
[`6fc8d1b`](https://github.com/brighte-labs/spark-web/commit/6fc8d1bc37e25d0cd622bc37f68a1d92eb5961b5),
|
|
556
|
+
[`7f93c45`](https://github.com/brighte-labs/spark-web/commit/7f93c45bbae8c765e10df9d0dd7615473797749b),
|
|
557
|
+
[`62f7de8`](https://github.com/brighte-labs/spark-web/commit/62f7de8a2e1df5ae088c093d3acdaa868d3f61fe),
|
|
558
|
+
[`6df05f7`](https://github.com/brighte-labs/spark-web/commit/6df05f764e4181c140d6547d6b897d0210468f6a)]:
|
|
559
|
+
- @spark-web/box@1.1.0
|
|
560
|
+
- @spark-web/divider@1.0.10
|
|
561
|
+
- @spark-web/theme@3.1.0
|
|
562
|
+
- @spark-web/utils@1.2.3
|
|
563
|
+
|
|
564
|
+
## 1.0.9
|
|
565
|
+
|
|
566
|
+
### Patch Changes
|
|
567
|
+
|
|
568
|
+
- [#208](https://github.com/brighte-labs/spark-web/pull/208)
|
|
569
|
+
[`1ea26ef`](https://github.com/brighte-labs/spark-web/commit/1ea26ef04a3b45875ed0dd2326eeab1fbe1e4bc5)
|
|
570
|
+
Thanks [@lukebennett88](https://github.com/lukebennett88)! - Lower required
|
|
571
|
+
node version
|
|
572
|
+
|
|
573
|
+
- Updated dependencies
|
|
574
|
+
[[`1ea26ef`](https://github.com/brighte-labs/spark-web/commit/1ea26ef04a3b45875ed0dd2326eeab1fbe1e4bc5)]:
|
|
575
|
+
- @spark-web/box@1.0.9
|
|
576
|
+
- @spark-web/divider@1.0.9
|
|
577
|
+
- @spark-web/theme@3.0.6
|
|
578
|
+
- @spark-web/utils@1.2.2
|
|
579
|
+
|
|
580
|
+
## 1.0.8
|
|
581
|
+
|
|
582
|
+
### Patch Changes
|
|
583
|
+
|
|
584
|
+
- [#197](https://github.com/brighte-labs/spark-web/pull/197)
|
|
585
|
+
[`94016d8`](https://github.com/brighte-labs/spark-web/commit/94016d84e26bbe55833bbcbab847a2cce6041538)
|
|
586
|
+
Thanks [@lukebennett88](https://github.com/lukebennett88)! - Update packages
|
|
587
|
+
|
|
588
|
+
- Updated dependencies
|
|
589
|
+
[[`94016d8`](https://github.com/brighte-labs/spark-web/commit/94016d84e26bbe55833bbcbab847a2cce6041538)]:
|
|
590
|
+
- @spark-web/box@1.0.8
|
|
591
|
+
- @spark-web/divider@1.0.8
|
|
592
|
+
- @spark-web/theme@3.0.5
|
|
593
|
+
- @spark-web/utils@1.2.1
|
|
594
|
+
|
|
595
|
+
## 1.0.7
|
|
596
|
+
|
|
597
|
+
### Patch Changes
|
|
598
|
+
|
|
599
|
+
- [#173](https://github.com/brighte-labs/spark-web/pull/173)
|
|
600
|
+
[`90b7e9c`](https://github.com/brighte-labs/spark-web/commit/90b7e9cf4eb7e864d765c74b22c3dedf3d262e25)
|
|
601
|
+
Thanks [@lukebennett88](https://github.com/lukebennett88)! - Update babel
|
|
602
|
+
dependency
|
|
603
|
+
|
|
604
|
+
- Updated dependencies
|
|
605
|
+
[[`90b7e9c`](https://github.com/brighte-labs/spark-web/commit/90b7e9cf4eb7e864d765c74b22c3dedf3d262e25),
|
|
606
|
+
[`c3867af`](https://github.com/brighte-labs/spark-web/commit/c3867af7b77dfae3580ab63a5d5c9e8452f2da62)]:
|
|
607
|
+
- @spark-web/box@1.0.7
|
|
608
|
+
- @spark-web/divider@1.0.7
|
|
609
|
+
- @spark-web/theme@3.0.3
|
|
610
|
+
- @spark-web/utils@1.2.0
|
|
611
|
+
|
|
612
|
+
## 1.0.6
|
|
613
|
+
|
|
614
|
+
### Patch Changes
|
|
615
|
+
|
|
616
|
+
- [#167](https://github.com/brighte-labs/spark-web/pull/167)
|
|
617
|
+
[`4f79350`](https://github.com/brighte-labs/spark-web/commit/4f793508fdb43ddd452f0d59a3126101f9fa5459)
|
|
618
|
+
Thanks [@lukebennett88](https://github.com/lukebennett88)! - Update Babel
|
|
619
|
+
|
|
620
|
+
- Updated dependencies
|
|
621
|
+
[[`4f79350`](https://github.com/brighte-labs/spark-web/commit/4f793508fdb43ddd452f0d59a3126101f9fa5459),
|
|
622
|
+
[`60f7281`](https://github.com/brighte-labs/spark-web/commit/60f7281c4a194d934a2ce561cad47e737b0fb48e)]:
|
|
623
|
+
- @spark-web/box@1.0.6
|
|
624
|
+
- @spark-web/divider@1.0.6
|
|
625
|
+
- @spark-web/theme@3.0.2
|
|
626
|
+
- @spark-web/utils@1.1.5
|
|
627
|
+
|
|
628
|
+
## 1.0.5
|
|
629
|
+
|
|
630
|
+
### Patch Changes
|
|
631
|
+
|
|
632
|
+
- [#113](https://github.com/brighte-labs/spark-web/pull/113)
|
|
633
|
+
[`156236d`](https://github.com/brighte-labs/spark-web/commit/156236d2474aee66a0b8e2030635f9c08a5b78ba)
|
|
634
|
+
Thanks [@lukebennett88](https://github.com/lukebennett88)! - Update
|
|
635
|
+
dependencies
|
|
636
|
+
|
|
637
|
+
- Updated dependencies
|
|
638
|
+
[[`156236d`](https://github.com/brighte-labs/spark-web/commit/156236d2474aee66a0b8e2030635f9c08a5b78ba)]:
|
|
639
|
+
- @spark-web/box@1.0.5
|
|
640
|
+
- @spark-web/divider@1.0.5
|
|
641
|
+
- @spark-web/theme@3.0.1
|
|
642
|
+
- @spark-web/utils@1.1.3
|
|
643
|
+
|
|
644
|
+
## 1.0.4
|
|
645
|
+
|
|
646
|
+
### Patch Changes
|
|
647
|
+
|
|
648
|
+
- [#87](https://github.com/brighte-labs/spark-web/pull/87)
|
|
649
|
+
[`5744b68`](https://github.com/brighte-labs/spark-web/commit/5744b6820f626b93a14e11e1fbd96bcbe1b12b27)
|
|
650
|
+
Thanks [@ChristopherMitchell242](https://github.com/ChristopherMitchell242)! -
|
|
651
|
+
Data attribute added to component props to allow consumers to attach
|
|
652
|
+
customattributes to components
|
|
653
|
+
|
|
654
|
+
* [#52](https://github.com/brighte-labs/spark-web/pull/52)
|
|
655
|
+
[`82ab744`](https://github.com/brighte-labs/spark-web/commit/82ab744f198466810f3386bc459b8ab4d57c820e)
|
|
656
|
+
Thanks [@lukebennett88](https://github.com/lukebennett88)! - Add files array
|
|
657
|
+
to package.json files
|
|
658
|
+
|
|
659
|
+
* Updated dependencies
|
|
660
|
+
[[`182a53a`](https://github.com/brighte-labs/spark-web/commit/182a53a484892df48754e89dd714459a7f69fcff),
|
|
661
|
+
[`82ab744`](https://github.com/brighte-labs/spark-web/commit/82ab744f198466810f3386bc459b8ab4d57c820e),
|
|
662
|
+
[`df618d9`](https://github.com/brighte-labs/spark-web/commit/df618d92d534e06f06ecedc95ea6bdd51cdc906b)]:
|
|
663
|
+
- @spark-web/theme@3.0.0
|
|
664
|
+
- @spark-web/box@1.0.4
|
|
665
|
+
- @spark-web/divider@1.0.4
|
|
666
|
+
- @spark-web/utils@1.1.2
|
|
667
|
+
|
|
668
|
+
## 1.0.3
|
|
669
|
+
|
|
670
|
+
### Patch Changes
|
|
671
|
+
|
|
672
|
+
- [#42](https://github.com/brighte-labs/spark-web/pull/42)
|
|
673
|
+
[`435779a`](https://github.com/brighte-labs/spark-web/commit/435779aa42bd635bbf43e1fd41724c666402caa2)
|
|
674
|
+
Thanks [@lukebennett88](https://github.com/lukebennett88)! - Prevent multiple
|
|
675
|
+
versions of React
|
|
676
|
+
|
|
677
|
+
- Updated dependencies
|
|
678
|
+
[[`435779a`](https://github.com/brighte-labs/spark-web/commit/435779aa42bd635bbf43e1fd41724c666402caa2)]:
|
|
679
|
+
- @spark-web/box@1.0.3
|
|
680
|
+
- @spark-web/divider@1.0.3
|
|
681
|
+
- @spark-web/theme@2.0.2
|
|
682
|
+
- @spark-web/utils@1.1.1
|
|
683
|
+
|
|
684
|
+
## 1.0.2
|
|
685
|
+
|
|
686
|
+
### Patch Changes
|
|
687
|
+
|
|
688
|
+
- [#40](https://github.com/brighte-labs/spark-web/pull/40)
|
|
689
|
+
[`062c8ab`](https://github.com/brighte-labs/spark-web/commit/062c8ab8c7b4120f8d14c269b5f7801288c678ca)
|
|
690
|
+
Thanks [@lukebennett88](https://github.com/lukebennett88)! - Add
|
|
691
|
+
@babel/transform-runtime
|
|
692
|
+
|
|
693
|
+
- Updated dependencies
|
|
694
|
+
[[`062c8ab`](https://github.com/brighte-labs/spark-web/commit/062c8ab8c7b4120f8d14c269b5f7801288c678ca)]:
|
|
695
|
+
- @spark-web/box@1.0.2
|
|
696
|
+
- @spark-web/divider@1.0.2
|
|
697
|
+
- @spark-web/theme@2.0.1
|
|
698
|
+
- @spark-web/utils@1.0.2
|
|
699
|
+
|
|
700
|
+
## 1.0.1
|
|
701
|
+
|
|
702
|
+
### Patch Changes
|
|
703
|
+
|
|
704
|
+
- [#36](https://github.com/brighte-labs/spark-web/pull/36)
|
|
705
|
+
[`8546f8f`](https://github.com/brighte-labs/spark-web/commit/8546f8f05daaa79ea3ff954c6c4928a7a2d0622d)
|
|
706
|
+
Thanks [@lukebennett88](https://github.com/lukebennett88)! - Update Babel
|
|
707
|
+
config
|
|
708
|
+
|
|
709
|
+
- Updated dependencies
|
|
710
|
+
[[`aebff30`](https://github.com/brighte-labs/spark-web/commit/aebff30c86cb0a9db22b545c46159ce0d1c14afb),
|
|
711
|
+
[`8546f8f`](https://github.com/brighte-labs/spark-web/commit/8546f8f05daaa79ea3ff954c6c4928a7a2d0622d)]:
|
|
712
|
+
- @spark-web/theme@2.0.0
|
|
713
|
+
- @spark-web/box@1.0.1
|
|
714
|
+
- @spark-web/divider@1.0.1
|
|
715
|
+
- @spark-web/utils@1.0.1
|
|
716
|
+
|
|
717
|
+
## 1.0.0
|
|
718
|
+
|
|
719
|
+
### Major Changes
|
|
720
|
+
|
|
721
|
+
- [#27](https://github.com/brighte-labs/spark-web/pull/27)
|
|
722
|
+
[`4c8e398`](https://github.com/brighte-labs/spark-web/commit/4c8e3988f8a59d3dab60a6b67b1128b6ff2a5f2c)
|
|
723
|
+
Thanks [@JedWatson](https://github.com/JedWatson)! - Initial Version
|
|
724
|
+
|
|
725
|
+
### Patch Changes
|
|
726
|
+
|
|
727
|
+
- Updated dependencies
|
|
728
|
+
[[`4c8e398`](https://github.com/brighte-labs/spark-web/commit/4c8e3988f8a59d3dab60a6b67b1128b6ff2a5f2c)]:
|
|
729
|
+
- @spark-web/box@1.0.0
|
|
730
|
+
- @spark-web/divider@1.0.0
|
|
731
|
+
- @spark-web/theme@1.0.0
|
|
732
|
+
- @spark-web/utils@1.0.0
|
package/CLAUDE.md
ADDED
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
# @spark-web/stack — AI Context
|
|
2
|
+
|
|
3
|
+
## What this is
|
|
4
|
+
|
|
5
|
+
Vertical layout component. Renders children in a column with consistent spacing
|
|
6
|
+
between them. Use `Stack` as the default layout for any top-to-bottom
|
|
7
|
+
arrangement — page sections, form fields, card bodies, filter bars.
|
|
8
|
+
|
|
9
|
+
## What this is NOT
|
|
10
|
+
|
|
11
|
+
- Not for horizontal layouts — use `Row` or `Columns`
|
|
12
|
+
- Not a grid — use `Columns` for multi-column layouts
|
|
13
|
+
- Not a scrollable container — add `overflow` via a wrapping `Box`
|
|
14
|
+
|
|
15
|
+
## Props interface
|
|
16
|
+
|
|
17
|
+
| Prop | Type | Default | Notes |
|
|
18
|
+
| ---------- | --------------------------------------------------------- | ----------- | ------------------------------------- |
|
|
19
|
+
| `gap` | spacing token (responsive) | — | Space between children |
|
|
20
|
+
| `align` | `'left' \| 'center' \| 'right' \| 'stretch'` (responsive) | `'stretch'` | Cross-axis alignment of children |
|
|
21
|
+
| `dividers` | `boolean` | `false` | Insert a `Divider` between each child |
|
|
22
|
+
| `as` | HTML element tag | `'div'` | — |
|
|
23
|
+
| `data` | `DataAttributeMap` | — | Test/analytics attributes |
|
|
24
|
+
|
|
25
|
+
`Stack` also accepts all `Box` props except `display`, `alignItems`,
|
|
26
|
+
`flexDirection`, `justifyContent`, and `flexWrap` — those are locked.
|
|
27
|
+
|
|
28
|
+
## Common patterns
|
|
29
|
+
|
|
30
|
+
### Page-level layout
|
|
31
|
+
|
|
32
|
+
```tsx
|
|
33
|
+
<Stack gap="xlarge">
|
|
34
|
+
<PageHeader>Users</PageHeader>
|
|
35
|
+
<FilterRow />
|
|
36
|
+
<DataTable ... />
|
|
37
|
+
<Pagination />
|
|
38
|
+
</Stack>
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
### Card body
|
|
42
|
+
|
|
43
|
+
```tsx
|
|
44
|
+
<Stack gap="medium" padding="large">
|
|
45
|
+
<Text weight="semibold">{title}</Text>
|
|
46
|
+
<Text tone="muted" size="small">
|
|
47
|
+
{description}
|
|
48
|
+
</Text>
|
|
49
|
+
</Stack>
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
### Form fields
|
|
53
|
+
|
|
54
|
+
```tsx
|
|
55
|
+
<Stack gap="large">
|
|
56
|
+
<Field label="Name">
|
|
57
|
+
<TextInput />
|
|
58
|
+
</Field>
|
|
59
|
+
<Field label="Email">
|
|
60
|
+
<TextInput type="email" />
|
|
61
|
+
</Field>
|
|
62
|
+
</Stack>
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
## Do NOTs
|
|
66
|
+
|
|
67
|
+
- NEVER set `flexDirection`, `display`, or `alignItems` on `Stack` — locked
|
|
68
|
+
- NEVER use `Stack` for side-by-side layouts — use `Row` or `Columns`
|
|
69
|
+
- NEVER nest `Stack` inside itself just to change gap — restructure the children
|
|
70
|
+
instead
|
package/README.md
ADDED
|
@@ -0,0 +1,118 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: Stack
|
|
3
|
+
storybookPath: page-layout-stack--default
|
|
4
|
+
isExperimentalPackage: false
|
|
5
|
+
---
|
|
6
|
+
|
|
7
|
+
Used to distribute children vertically, with even spacing between each child.
|
|
8
|
+
|
|
9
|
+
```jsx live
|
|
10
|
+
<Stack gap="large">
|
|
11
|
+
<Placeholder />
|
|
12
|
+
<Placeholder />
|
|
13
|
+
<Placeholder />
|
|
14
|
+
</Stack>
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
## Examples
|
|
18
|
+
|
|
19
|
+
### Gap
|
|
20
|
+
|
|
21
|
+
The spacing between children can be adjusted using the `gap` prop.
|
|
22
|
+
|
|
23
|
+
```jsx live
|
|
24
|
+
<Columns gap="xxlarge">
|
|
25
|
+
<Stack gap="small">
|
|
26
|
+
<Placeholder />
|
|
27
|
+
<Placeholder />
|
|
28
|
+
<Placeholder />
|
|
29
|
+
</Stack>
|
|
30
|
+
<Stack gap="medium">
|
|
31
|
+
<Placeholder />
|
|
32
|
+
<Placeholder />
|
|
33
|
+
<Placeholder />
|
|
34
|
+
</Stack>
|
|
35
|
+
<Stack gap="large">
|
|
36
|
+
<Placeholder />
|
|
37
|
+
<Placeholder />
|
|
38
|
+
<Placeholder />
|
|
39
|
+
</Stack>
|
|
40
|
+
<Stack gap="xlarge">
|
|
41
|
+
<Placeholder />
|
|
42
|
+
<Placeholder />
|
|
43
|
+
<Placeholder />
|
|
44
|
+
</Stack>
|
|
45
|
+
</Columns>
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
### Horizontal alignment
|
|
49
|
+
|
|
50
|
+
Items can be aligned horizontally using the `align` prop.
|
|
51
|
+
|
|
52
|
+
```jsx live
|
|
53
|
+
<Stack gap="medium" dividers>
|
|
54
|
+
<Stack gap="small" align="left">
|
|
55
|
+
<Placeholder />
|
|
56
|
+
<Placeholder label="left" width={128} />
|
|
57
|
+
<Placeholder />
|
|
58
|
+
</Stack>
|
|
59
|
+
<Stack gap="small" align="center">
|
|
60
|
+
<Placeholder />
|
|
61
|
+
<Placeholder label="center" width={128} />
|
|
62
|
+
<Placeholder />
|
|
63
|
+
</Stack>
|
|
64
|
+
<Stack gap="small" align="right">
|
|
65
|
+
<Placeholder />
|
|
66
|
+
<Placeholder label="right" width={128} />
|
|
67
|
+
<Placeholder />
|
|
68
|
+
</Stack>
|
|
69
|
+
</Stack>
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
### Dividers
|
|
73
|
+
|
|
74
|
+
Use the `dividers` property to render a [Divider](/package/divider) between each
|
|
75
|
+
element in the Stack.
|
|
76
|
+
|
|
77
|
+
```jsx live
|
|
78
|
+
<Stack gap="medium" dividers>
|
|
79
|
+
<Text>First item</Text>
|
|
80
|
+
<Text>Second item</Text>
|
|
81
|
+
<Text>Third item</Text>
|
|
82
|
+
</Stack>
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
### Nesting
|
|
86
|
+
|
|
87
|
+
Nest Stack components to create more complex white space rules.
|
|
88
|
+
|
|
89
|
+
```jsx live
|
|
90
|
+
<Stack gap="xlarge">
|
|
91
|
+
<Heading level="4">Heading</Heading>
|
|
92
|
+
<Stack gap="small">
|
|
93
|
+
<Text>Line 1</Text>
|
|
94
|
+
<Text>Line 2</Text>
|
|
95
|
+
<Text>Line 3</Text>
|
|
96
|
+
</Stack>
|
|
97
|
+
<Stack gap="small">
|
|
98
|
+
<Text>Line 1</Text>
|
|
99
|
+
<Text>Line 2</Text>
|
|
100
|
+
<Text>Line 3</Text>
|
|
101
|
+
</Stack>
|
|
102
|
+
</Stack>
|
|
103
|
+
```
|
|
104
|
+
|
|
105
|
+
## Props
|
|
106
|
+
|
|
107
|
+
<PropsTable displayName="Stack" />
|
|
108
|
+
|
|
109
|
+
`Stack` props also include [`Box`](/package/box) props and are not listed here
|
|
110
|
+
(excludes `display`, `className`, `alignItems`, `flexDirection`,
|
|
111
|
+
`justifyContent` and `flexWrap`).
|
|
112
|
+
|
|
113
|
+
Extra props are also passed into the underlying [`Box`](/package/box) component.
|
|
114
|
+
|
|
115
|
+
[align]:
|
|
116
|
+
https://github.com/brighte-labs/spark-web/blob/e7f6f4285b4cfd876312cc89fbdd094039aa239a/packages/stack/src/Stack.tsx#L24
|
|
117
|
+
[data-attribute-map]:
|
|
118
|
+
https://github.com/brighte-labs/spark-web/blob/e7f6f4285b4cfd876312cc89fbdd094039aa239a/packages/utils/src/internal/buildDataAttributes.ts#L1
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
declare const alignLookup: {
|
|
2
|
+
readonly left: "start";
|
|
3
|
+
readonly center: "center";
|
|
4
|
+
readonly right: "end";
|
|
5
|
+
readonly stretch: "stretch";
|
|
6
|
+
};
|
|
7
|
+
export type Align = keyof typeof alignLookup;
|
|
8
|
+
export declare const alignToAlignItems: (prop?: import("@spark-web/theme").ResponsiveProp<"center" | "left" | "right" | "stretch"> | undefined) => "center" | "end" | "start" | "stretch" | {
|
|
9
|
+
mobile: "center" | "end" | "start" | "stretch" | undefined;
|
|
10
|
+
tablet: "center" | "end" | "start" | "stretch" | undefined;
|
|
11
|
+
desktop: "center" | "end" | "start" | "stretch" | undefined;
|
|
12
|
+
wide: "center" | "end" | "start" | "stretch" | undefined;
|
|
13
|
+
} | undefined;
|
|
14
|
+
export {};
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import type { BoxProps } from '@spark-web/box';
|
|
2
|
+
import type { ResponsiveProp } from '@spark-web/theme';
|
|
3
|
+
import type { ReactElement } from 'react';
|
|
4
|
+
import type { Align } from "./alignment.js";
|
|
5
|
+
type ValidBoxProps = Omit<BoxProps, 'display' | 'className' | 'alignItems' | 'flexDirection' | 'justifyContent' | 'flexWrap'>;
|
|
6
|
+
export type StackProps = {
|
|
7
|
+
/** Horizontally align items within the stack. */
|
|
8
|
+
align?: ResponsiveProp<Align>;
|
|
9
|
+
/** Place a divider between each element. */
|
|
10
|
+
dividers?: boolean;
|
|
11
|
+
} & ValidBoxProps;
|
|
12
|
+
export declare const Stack: <Comp extends import("react").ElementType = "div">(props: {
|
|
13
|
+
as?: Comp | undefined;
|
|
14
|
+
ref?: import("react").Ref<Comp extends "symbol" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "set" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | keyof HTMLElementTagNameMap ? (HTMLElementTagNameMap & Pick<SVGElementTagNameMap, "symbol" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "set" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view">)[Comp] : Comp extends new (...args: any) => any ? InstanceType<Comp> : undefined> | undefined;
|
|
15
|
+
} & Omit<import("react").PropsWithoutRef<import("react").ComponentProps<Comp>>, "as"> & {
|
|
16
|
+
/** Horizontally align items within the stack. */
|
|
17
|
+
align?: ResponsiveProp<Align>;
|
|
18
|
+
/** Place a divider between each element. */
|
|
19
|
+
dividers?: boolean;
|
|
20
|
+
} & ValidBoxProps) => ReactElement;
|
|
21
|
+
export {};
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
export * from "./declarations/src/index.js";
|
|
2
|
+
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3Bhcmstd2ViLXN0YWNrLmNqcy5kLnRzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi9kZWNsYXJhdGlvbnMvc3JjL2luZGV4LmQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEifQ==
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
|
|
6
|
+
var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
|
|
7
|
+
var box = require('@spark-web/box');
|
|
8
|
+
var divider = require('@spark-web/divider');
|
|
9
|
+
var ts = require('@spark-web/utils/ts');
|
|
10
|
+
var react = require('react');
|
|
11
|
+
var theme = require('@spark-web/theme');
|
|
12
|
+
var jsxRuntime = require('@emotion/react/jsx-runtime');
|
|
13
|
+
|
|
14
|
+
var alignLookup = {
|
|
15
|
+
left: 'start',
|
|
16
|
+
center: 'center',
|
|
17
|
+
right: 'end',
|
|
18
|
+
stretch: 'stretch'
|
|
19
|
+
};
|
|
20
|
+
var alignToAlignItems = theme.createResponsiveMapFn(alignLookup);
|
|
21
|
+
|
|
22
|
+
var _excluded = ["align", "children", "data", "dividers"];
|
|
23
|
+
var Stack = ts.forwardRefWithAs(function (_ref, forwardedRef) {
|
|
24
|
+
var _ref$align = _ref.align,
|
|
25
|
+
align = _ref$align === void 0 ? 'stretch' : _ref$align,
|
|
26
|
+
children = _ref.children,
|
|
27
|
+
data = _ref.data,
|
|
28
|
+
dividers = _ref.dividers,
|
|
29
|
+
props = _objectWithoutProperties(_ref, _excluded);
|
|
30
|
+
var alignItems = alignToAlignItems(align);
|
|
31
|
+
var rootProps = _objectSpread({
|
|
32
|
+
ref: forwardedRef,
|
|
33
|
+
alignItems: alignItems,
|
|
34
|
+
data: data,
|
|
35
|
+
display: 'flex',
|
|
36
|
+
flexDirection: 'column'
|
|
37
|
+
}, props);
|
|
38
|
+
|
|
39
|
+
// bail early w/o dividers to avoid unnecessary map
|
|
40
|
+
if (!dividers) {
|
|
41
|
+
return jsxRuntime.jsx(box.Box, _objectSpread(_objectSpread({}, rootProps), {}, {
|
|
42
|
+
children: children
|
|
43
|
+
}));
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
// map over children to insert dividers
|
|
47
|
+
// remove falsy values before mapping, keeps the index in sync
|
|
48
|
+
var childArray = react.Children.toArray(children);
|
|
49
|
+
return jsxRuntime.jsx(box.Box, _objectSpread(_objectSpread({}, rootProps), {}, {
|
|
50
|
+
children: childArray.map(function (child, idx) {
|
|
51
|
+
return jsxRuntime.jsxs(react.Fragment, {
|
|
52
|
+
children: [dividers && idx ? jsxRuntime.jsx(divider.Divider, {}) : null, child]
|
|
53
|
+
}, child.key || idx);
|
|
54
|
+
})
|
|
55
|
+
}));
|
|
56
|
+
});
|
|
57
|
+
|
|
58
|
+
exports.Stack = Stack;
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
|
|
6
|
+
var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
|
|
7
|
+
var box = require('@spark-web/box');
|
|
8
|
+
var divider = require('@spark-web/divider');
|
|
9
|
+
var ts = require('@spark-web/utils/ts');
|
|
10
|
+
var react = require('react');
|
|
11
|
+
var theme = require('@spark-web/theme');
|
|
12
|
+
var jsxRuntime = require('@emotion/react/jsx-runtime');
|
|
13
|
+
|
|
14
|
+
var alignLookup = {
|
|
15
|
+
left: 'start',
|
|
16
|
+
center: 'center',
|
|
17
|
+
right: 'end',
|
|
18
|
+
stretch: 'stretch'
|
|
19
|
+
};
|
|
20
|
+
var alignToAlignItems = theme.createResponsiveMapFn(alignLookup);
|
|
21
|
+
|
|
22
|
+
var _excluded = ["align", "children", "data", "dividers"];
|
|
23
|
+
var Stack = ts.forwardRefWithAs(function (_ref, forwardedRef) {
|
|
24
|
+
var _ref$align = _ref.align,
|
|
25
|
+
align = _ref$align === void 0 ? 'stretch' : _ref$align,
|
|
26
|
+
children = _ref.children,
|
|
27
|
+
data = _ref.data,
|
|
28
|
+
dividers = _ref.dividers,
|
|
29
|
+
props = _objectWithoutProperties(_ref, _excluded);
|
|
30
|
+
var alignItems = alignToAlignItems(align);
|
|
31
|
+
var rootProps = _objectSpread({
|
|
32
|
+
ref: forwardedRef,
|
|
33
|
+
alignItems: alignItems,
|
|
34
|
+
data: data,
|
|
35
|
+
display: 'flex',
|
|
36
|
+
flexDirection: 'column'
|
|
37
|
+
}, props);
|
|
38
|
+
|
|
39
|
+
// bail early w/o dividers to avoid unnecessary map
|
|
40
|
+
if (!dividers) {
|
|
41
|
+
return jsxRuntime.jsx(box.Box, _objectSpread(_objectSpread({}, rootProps), {}, {
|
|
42
|
+
children: children
|
|
43
|
+
}));
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
// map over children to insert dividers
|
|
47
|
+
// remove falsy values before mapping, keeps the index in sync
|
|
48
|
+
var childArray = react.Children.toArray(children);
|
|
49
|
+
return jsxRuntime.jsx(box.Box, _objectSpread(_objectSpread({}, rootProps), {}, {
|
|
50
|
+
children: childArray.map(function (child, idx) {
|
|
51
|
+
return jsxRuntime.jsxs(react.Fragment, {
|
|
52
|
+
children: [dividers && idx ? jsxRuntime.jsx(divider.Divider, {}) : null, child]
|
|
53
|
+
}, child.key || idx);
|
|
54
|
+
})
|
|
55
|
+
}));
|
|
56
|
+
});
|
|
57
|
+
|
|
58
|
+
exports.Stack = Stack;
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
import _objectSpread from '@babel/runtime/helpers/esm/objectSpread2';
|
|
2
|
+
import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
|
|
3
|
+
import { Box } from '@spark-web/box';
|
|
4
|
+
import { Divider } from '@spark-web/divider';
|
|
5
|
+
import { forwardRefWithAs } from '@spark-web/utils/ts';
|
|
6
|
+
import { Children, Fragment } from 'react';
|
|
7
|
+
import { createResponsiveMapFn } from '@spark-web/theme';
|
|
8
|
+
import { jsx, jsxs } from '@emotion/react/jsx-runtime';
|
|
9
|
+
|
|
10
|
+
var alignLookup = {
|
|
11
|
+
left: 'start',
|
|
12
|
+
center: 'center',
|
|
13
|
+
right: 'end',
|
|
14
|
+
stretch: 'stretch'
|
|
15
|
+
};
|
|
16
|
+
var alignToAlignItems = createResponsiveMapFn(alignLookup);
|
|
17
|
+
|
|
18
|
+
var _excluded = ["align", "children", "data", "dividers"];
|
|
19
|
+
var Stack = forwardRefWithAs(function (_ref, forwardedRef) {
|
|
20
|
+
var _ref$align = _ref.align,
|
|
21
|
+
align = _ref$align === void 0 ? 'stretch' : _ref$align,
|
|
22
|
+
children = _ref.children,
|
|
23
|
+
data = _ref.data,
|
|
24
|
+
dividers = _ref.dividers,
|
|
25
|
+
props = _objectWithoutProperties(_ref, _excluded);
|
|
26
|
+
var alignItems = alignToAlignItems(align);
|
|
27
|
+
var rootProps = _objectSpread({
|
|
28
|
+
ref: forwardedRef,
|
|
29
|
+
alignItems: alignItems,
|
|
30
|
+
data: data,
|
|
31
|
+
display: 'flex',
|
|
32
|
+
flexDirection: 'column'
|
|
33
|
+
}, props);
|
|
34
|
+
|
|
35
|
+
// bail early w/o dividers to avoid unnecessary map
|
|
36
|
+
if (!dividers) {
|
|
37
|
+
return jsx(Box, _objectSpread(_objectSpread({}, rootProps), {}, {
|
|
38
|
+
children: children
|
|
39
|
+
}));
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
// map over children to insert dividers
|
|
43
|
+
// remove falsy values before mapping, keeps the index in sync
|
|
44
|
+
var childArray = Children.toArray(children);
|
|
45
|
+
return jsx(Box, _objectSpread(_objectSpread({}, rootProps), {}, {
|
|
46
|
+
children: childArray.map(function (child, idx) {
|
|
47
|
+
return jsxs(Fragment, {
|
|
48
|
+
children: [dividers && idx ? jsx(Divider, {}) : null, child]
|
|
49
|
+
}, child.key || idx);
|
|
50
|
+
})
|
|
51
|
+
}));
|
|
52
|
+
});
|
|
53
|
+
|
|
54
|
+
export { Stack };
|
package/package.json
ADDED
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@spark-web/stack",
|
|
3
|
+
"version": "0.0.0-snapshot-release-20260409001813",
|
|
4
|
+
"homepage": "https://github.com/brighte-labs/spark-web#readme",
|
|
5
|
+
"repository": {
|
|
6
|
+
"type": "git",
|
|
7
|
+
"url": "https://github.com/brighte-labs/spark-web.git",
|
|
8
|
+
"directory": "packages/stack"
|
|
9
|
+
},
|
|
10
|
+
"main": "dist/spark-web-stack.cjs.js",
|
|
11
|
+
"module": "dist/spark-web-stack.esm.js",
|
|
12
|
+
"files": [
|
|
13
|
+
"CHANGELOG.md",
|
|
14
|
+
"CLAUDE.md",
|
|
15
|
+
"dist",
|
|
16
|
+
"README.md"
|
|
17
|
+
],
|
|
18
|
+
"dependencies": {
|
|
19
|
+
"@babel/runtime": "^7.25.0",
|
|
20
|
+
"@emotion/react": "^11.14.0",
|
|
21
|
+
"@spark-web/box": "0.0.0-snapshot-release-20260409001813",
|
|
22
|
+
"@spark-web/divider": "^5.1.0",
|
|
23
|
+
"@spark-web/theme": "^5.13.0",
|
|
24
|
+
"@spark-web/utils": "^5.1.0"
|
|
25
|
+
},
|
|
26
|
+
"devDependencies": {
|
|
27
|
+
"@types/react": "^19.1.0",
|
|
28
|
+
"react": "^19.1.0"
|
|
29
|
+
},
|
|
30
|
+
"peerDependencies": {
|
|
31
|
+
"react": "^17.0.0 || ^18.0.0 || ^19.0.0"
|
|
32
|
+
},
|
|
33
|
+
"engines": {
|
|
34
|
+
"node": ">=14"
|
|
35
|
+
}
|
|
36
|
+
}
|