@spark-web/row 5.1.0-rc.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 +44 -7
- package/CLAUDE.md +54 -0
- package/dist/declarations/src/alignment.d.ts +12 -12
- package/dist/declarations/src/row.d.ts +9 -9
- package/dist/spark-web-row.cjs.d.ts +1 -1
- package/package.json +7 -6
package/CHANGELOG.md
CHANGED
|
@@ -1,18 +1,55 @@
|
|
|
1
1
|
# @spark-web/row
|
|
2
2
|
|
|
3
|
-
## 5.1.
|
|
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
|
+
|
|
16
|
+
## 5.1.0
|
|
4
17
|
|
|
5
18
|
### Minor Changes
|
|
6
19
|
|
|
7
|
-
-
|
|
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
|
|
8
23
|
|
|
9
24
|
### Patch Changes
|
|
10
25
|
|
|
11
|
-
- Updated dependencies
|
|
12
|
-
-
|
|
13
|
-
- @spark-web/
|
|
14
|
-
- @spark-web/
|
|
15
|
-
- @spark-web/
|
|
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
|
|
16
53
|
|
|
17
54
|
## 5.0.0
|
|
18
55
|
|
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`
|
|
@@ -9,18 +9,18 @@ declare const alignYLookup: {
|
|
|
9
9
|
readonly bottom: "end";
|
|
10
10
|
readonly stretch: "stretch";
|
|
11
11
|
};
|
|
12
|
-
export
|
|
13
|
-
export
|
|
14
|
-
export declare const alignToJustifyContent: (prop?: import("@spark-web/theme").ResponsiveProp<"
|
|
15
|
-
mobile: "center" | "
|
|
16
|
-
tablet: "center" | "
|
|
17
|
-
desktop: "center" | "
|
|
18
|
-
wide: "center" | "
|
|
12
|
+
export type Align = keyof typeof alignLookup;
|
|
13
|
+
export type AlignY = keyof typeof alignYLookup;
|
|
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 {};
|
|
@@ -3,8 +3,8 @@ import type { ResponsiveProp } from '@spark-web/theme';
|
|
|
3
3
|
import type { DataAttributeMap } from '@spark-web/utils/internal';
|
|
4
4
|
import type { ReactElement } from 'react';
|
|
5
5
|
import type { Align, AlignY } from "./alignment.js";
|
|
6
|
-
|
|
7
|
-
export
|
|
6
|
+
type ValidBoxProps = Omit<BoxProps, 'display' | 'alignItems' | 'flexDirection' | 'justifyContent' | 'flexWrap' | 'dangerouslySetInnerHTML'>;
|
|
7
|
+
export type RowProps = {
|
|
8
8
|
/** Horizontally align items within the container. */
|
|
9
9
|
align?: ResponsiveProp<Align>;
|
|
10
10
|
/** Vertically align items within the container. */
|
|
@@ -14,17 +14,17 @@ export declare type RowProps = {
|
|
|
14
14
|
/** Place a divider between each element. */
|
|
15
15
|
dividers?: boolean;
|
|
16
16
|
} & ValidBoxProps;
|
|
17
|
-
export declare const Row: <Comp extends import("react").ElementType
|
|
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" | "text" | "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
|
-
align?: ResponsiveProp<
|
|
22
|
+
align?: ResponsiveProp<Align>;
|
|
23
23
|
/** Vertically align items within the container. */
|
|
24
|
-
alignY?: ResponsiveProp<
|
|
24
|
+
alignY?: ResponsiveProp<AlignY>;
|
|
25
25
|
/** Sets data attributes for the element. */
|
|
26
|
-
data?: DataAttributeMap
|
|
26
|
+
data?: DataAttributeMap;
|
|
27
27
|
/** Place a divider between each element. */
|
|
28
|
-
dividers?: boolean
|
|
29
|
-
} & ValidBoxProps) => ReactElement
|
|
28
|
+
dividers?: boolean;
|
|
29
|
+
} & ValidBoxProps) => ReactElement;
|
|
30
30
|
export {};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export * from "./declarations/src/index";
|
|
1
|
+
export * from "./declarations/src/index.js";
|
|
2
2
|
//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3Bhcmstd2ViLXJvdy5janMuZC50cyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4vZGVjbGFyYXRpb25zL3NyYy9pbmRleC5kLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBIn0=
|
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,23 +11,24 @@
|
|
|
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/divider": "^5.1.0
|
|
22
|
-
"@spark-web/theme": "^5.
|
|
23
|
-
"@spark-web/utils": "^5.1.0
|
|
21
|
+
"@spark-web/box": "^6.0.1",
|
|
22
|
+
"@spark-web/divider": "^5.1.0",
|
|
23
|
+
"@spark-web/theme": "^5.13.0",
|
|
24
|
+
"@spark-web/utils": "^5.1.0"
|
|
24
25
|
},
|
|
25
26
|
"devDependencies": {
|
|
26
27
|
"@types/react": "^19.1.0",
|
|
27
28
|
"react": "^19.1.0"
|
|
28
29
|
},
|
|
29
30
|
"peerDependencies": {
|
|
30
|
-
"react": "
|
|
31
|
+
"react": "^17.0.0 || ^18.0.0 || ^19.0.0"
|
|
31
32
|
},
|
|
32
33
|
"engines": {
|
|
33
34
|
"node": ">=14"
|