@spark-web/row 5.1.0 → 5.1.1
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 +13 -0
- package/CLAUDE.md +54 -0
- package/dist/declarations/src/alignment.d.ts +10 -10
- package/dist/declarations/src/row.d.ts +1 -1
- package/package.json +3 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,18 @@
|
|
|
1
1
|
# @spark-web/row
|
|
2
2
|
|
|
3
|
+
## 5.1.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#782](https://github.com/brighte-labs/spark-web/pull/782)
|
|
8
|
+
[`bb41800`](https://github.com/brighte-labs/spark-web/commit/bb418004d21165f72f4bf2456afea844ee04a21c)
|
|
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
|
+
[[`bb41800`](https://github.com/brighte-labs/spark-web/commit/bb418004d21165f72f4bf2456afea844ee04a21c)]:
|
|
14
|
+
- @spark-web/box@6.0.1
|
|
15
|
+
|
|
3
16
|
## 5.1.0
|
|
4
17
|
|
|
5
18
|
### Minor Changes
|
package/CLAUDE.md
ADDED
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
# @spark-web/row — AI Context
|
|
2
|
+
|
|
3
|
+
## What this is
|
|
4
|
+
|
|
5
|
+
Horizontal layout component. Renders children in a single non-wrapping row. Use
|
|
6
|
+
`Row` for toolbars, page header action areas, label+button pairs, and any layout
|
|
7
|
+
where items should be side by side and never wrap.
|
|
8
|
+
|
|
9
|
+
## What this is NOT
|
|
10
|
+
|
|
11
|
+
- Not for wrapping inline content — use `Inline` (`@spark-web/inline`) when
|
|
12
|
+
items should wrap across lines
|
|
13
|
+
- Not for vertical stacks — use `Stack`
|
|
14
|
+
- Not a CSS grid — use `Columns` for proportional multi-column layouts
|
|
15
|
+
|
|
16
|
+
## Props interface
|
|
17
|
+
|
|
18
|
+
| Prop | Type | Default | Notes |
|
|
19
|
+
| ---------- | -------------------------------------------------------------- | ----------- | ----------------------------------------- |
|
|
20
|
+
| `align` | `'left' \| 'center' \| 'right' \| 'spaceBetween'` (responsive) | `'left'` | Horizontal (main-axis) alignment |
|
|
21
|
+
| `alignY` | `'top' \| 'center' \| 'bottom' \| 'stretch'` (responsive) | `'stretch'` | Vertical (cross-axis) alignment |
|
|
22
|
+
| `gap` | spacing token (responsive) | — | Space between children |
|
|
23
|
+
| `dividers` | `boolean` | `false` | Insert a vertical `Divider` between items |
|
|
24
|
+
| `as` | HTML element tag | `'div'` | — |
|
|
25
|
+
| `data` | `DataAttributeMap` | — | Test/analytics attributes |
|
|
26
|
+
|
|
27
|
+
`Row` also accepts all `Box` props except `display`, `alignItems`,
|
|
28
|
+
`flexDirection`, `justifyContent`, and `flexWrap` — those are locked.
|
|
29
|
+
|
|
30
|
+
## Common patterns
|
|
31
|
+
|
|
32
|
+
### Page header action bar (title left, button right)
|
|
33
|
+
|
|
34
|
+
```tsx
|
|
35
|
+
<Row align="spaceBetween" alignY="center">
|
|
36
|
+
<Text weight="semibold">{title}</Text>
|
|
37
|
+
<Button tone="primary">Add new</Button>
|
|
38
|
+
</Row>
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
### Icon + label pair
|
|
42
|
+
|
|
43
|
+
```tsx
|
|
44
|
+
<Row gap="xsmall" alignY="center">
|
|
45
|
+
<SearchIcon size="xsmall" tone="muted" />
|
|
46
|
+
<Text tone="muted">Search</Text>
|
|
47
|
+
</Row>
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
## Do NOTs
|
|
51
|
+
|
|
52
|
+
- NEVER set `flexDirection`, `display`, or `flexWrap` on `Row` — locked
|
|
53
|
+
- NEVER use `Row` when items need to wrap — use `Inline` instead
|
|
54
|
+
- NEVER use `Row` for vertical stacks — use `Stack`
|
|
@@ -11,16 +11,16 @@ declare const alignYLookup: {
|
|
|
11
11
|
};
|
|
12
12
|
export type Align = keyof typeof alignLookup;
|
|
13
13
|
export type AlignY = keyof typeof alignYLookup;
|
|
14
|
-
export declare const alignToJustifyContent: (prop?: import("@spark-web/theme").ResponsiveProp<"
|
|
15
|
-
mobile: "center" | "
|
|
16
|
-
tablet: "center" | "
|
|
17
|
-
desktop: "center" | "
|
|
18
|
-
wide: "center" | "
|
|
14
|
+
export declare const alignToJustifyContent: (prop?: import("@spark-web/theme").ResponsiveProp<"left" | "right" | "center"> | undefined) => "center" | "start" | "end" | {
|
|
15
|
+
mobile: "center" | "start" | "end" | undefined;
|
|
16
|
+
tablet: "center" | "start" | "end" | undefined;
|
|
17
|
+
desktop: "center" | "start" | "end" | undefined;
|
|
18
|
+
wide: "center" | "start" | "end" | undefined;
|
|
19
19
|
} | undefined;
|
|
20
|
-
export declare const alignYToAlignItems: (prop?: import("@spark-web/theme").ResponsiveProp<"
|
|
21
|
-
mobile: "center" | "
|
|
22
|
-
tablet: "center" | "
|
|
23
|
-
desktop: "center" | "
|
|
24
|
-
wide: "center" | "
|
|
20
|
+
export declare const alignYToAlignItems: (prop?: import("@spark-web/theme").ResponsiveProp<"bottom" | "top" | "center" | "stretch"> | undefined) => "center" | "stretch" | "start" | "end" | {
|
|
21
|
+
mobile: "center" | "stretch" | "start" | "end" | undefined;
|
|
22
|
+
tablet: "center" | "stretch" | "start" | "end" | undefined;
|
|
23
|
+
desktop: "center" | "stretch" | "start" | "end" | undefined;
|
|
24
|
+
wide: "center" | "stretch" | "start" | "end" | undefined;
|
|
25
25
|
} | undefined;
|
|
26
26
|
export {};
|
|
@@ -16,7 +16,7 @@ export type RowProps = {
|
|
|
16
16
|
} & ValidBoxProps;
|
|
17
17
|
export declare const Row: <Comp extends import("react").ElementType = "div">(props: {
|
|
18
18
|
as?: Comp | undefined;
|
|
19
|
-
ref?: import("react").Ref<Comp extends "symbol" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "
|
|
19
|
+
ref?: import("react").Ref<Comp extends "symbol" | "text" | "clipPath" | "filter" | "mask" | "marker" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "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" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "set" | "stop" | "switch" | "textPath" | "tspan" | "use" | "view" | keyof HTMLElementTagNameMap ? (HTMLElementTagNameMap & Pick<SVGElementTagNameMap, "symbol" | "text" | "clipPath" | "filter" | "mask" | "marker" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "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" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "set" | "stop" | "switch" | "textPath" | "tspan" | "use" | "view">)[Comp] : Comp extends new (...args: any) => any ? InstanceType<Comp> : undefined> | undefined;
|
|
20
20
|
} & Omit<import("react").PropsWithoutRef<import("react").ComponentProps<Comp>>, "as"> & {
|
|
21
21
|
/** Horizontally align items within the container. */
|
|
22
22
|
align?: ResponsiveProp<Align>;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spark-web/row",
|
|
3
|
-
"version": "5.1.
|
|
3
|
+
"version": "5.1.1",
|
|
4
4
|
"homepage": "https://github.com/brighte-labs/spark-web#readme",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -11,13 +11,14 @@
|
|
|
11
11
|
"module": "dist/spark-web-row.esm.js",
|
|
12
12
|
"files": [
|
|
13
13
|
"CHANGELOG.md",
|
|
14
|
+
"CLAUDE.md",
|
|
14
15
|
"dist",
|
|
15
16
|
"README.md"
|
|
16
17
|
],
|
|
17
18
|
"dependencies": {
|
|
18
19
|
"@babel/runtime": "^7.25.0",
|
|
19
20
|
"@emotion/react": "^11.14.0",
|
|
20
|
-
"@spark-web/box": "^6.0.
|
|
21
|
+
"@spark-web/box": "^6.0.1",
|
|
21
22
|
"@spark-web/divider": "^5.1.0",
|
|
22
23
|
"@spark-web/theme": "^5.13.0",
|
|
23
24
|
"@spark-web/utils": "^5.1.0"
|