@spark-web/columns 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.
Files changed (6) hide show
  1. package/CHANGELOG.md +43 -6
  2. package/CLAUDE.md +70 -0
  3. package/dist/declarations/src/alignment.d.ts +6 -6
  4. package/dist/declarations/src/columns.d.ts +11 -11
  5. package/dist/spark-web-columns.cjs.d.ts +1 -1
  6. package/package.json +6 -5
package/CHANGELOG.md CHANGED
@@ -1,17 +1,54 @@
1
1
  # @spark-web/columns
2
2
 
3
- ## 5.1.0-rc.0
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
- - update react version and other packages
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
- - @spark-web/theme@5.12.0-rc.0
13
- - @spark-web/utils@5.1.0-rc.0
14
- - @spark-web/box@6.0.0-rc.0
26
+ - Updated dependencies
27
+ [[`80d9c15`](https://github.com/brighte-labs/spark-web/commit/80d9c156a40bbcd2b1a91a2d0403b3c8e9b47b4e)]:
28
+ - @spark-web/theme@5.13.0
29
+ - @spark-web/utils@5.1.0
30
+ - @spark-web/box@6.0.0
31
+
32
+ ## 5.0.2
33
+
34
+ ### Patch Changes
35
+
36
+ - [#698](https://github.com/brighte-labs/spark-web/pull/698)
37
+ [`814b373`](https://github.com/brighte-labs/spark-web/commit/814b373cbe9fcf0757738c78eef6b516624df62c)
38
+ Thanks [@michtntbrighte](https://github.com/michtntbrighte)! - Bump version
39
+
40
+ - Updated dependencies
41
+ [[`814b373`](https://github.com/brighte-labs/spark-web/commit/814b373cbe9fcf0757738c78eef6b516624df62c)]:
42
+ - @spark-web/box@5.2.2
43
+ - @spark-web/theme@5.12.1
44
+
45
+ ## 5.0.1
46
+
47
+ ### Patch Changes
48
+
49
+ - Updated dependencies
50
+ [[`1995db7`](https://github.com/brighte-labs/spark-web/commit/1995db7f4342803732c7648ab3ca6d32442cc347)]:
51
+ - @spark-web/theme@5.12.0
15
52
 
16
53
  ## 5.0.0
17
54
 
package/CLAUDE.md ADDED
@@ -0,0 +1,70 @@
1
+ # @spark-web/columns — AI Context
2
+
3
+ ## What this is
4
+
5
+ CSS grid layout component. Distributes children into equal-width columns by
6
+ default, or proportionally via a `template` array. Supports responsive collapse
7
+ to a single column below a breakpoint. Use `Columns` for filter bars, form
8
+ layouts with side-by-side fields, and any N-column grid.
9
+
10
+ ## What this is NOT
11
+
12
+ - Not for a single row of items — use `Row` for horizontal flex layouts
13
+ - Not for vertical stacks — use `Stack`
14
+ - Not for wrapping inline content — use `Inline`
15
+
16
+ ## Props interface
17
+
18
+ | Prop | Type | Default | Notes |
19
+ | --------------- | --------------------------------------------------------- | ------- | --------------------------------------------------------------------------- |
20
+ | `gap` | spacing token (responsive) | — | Gap between all grid cells |
21
+ | `template` | `number[]` | — | Fractional column widths, e.g. `[2, 1]` → `2fr 1fr`. Omit for equal columns |
22
+ | `collapseBelow` | `'tablet' \| 'desktop' \| 'wide'` | — | Stack columns vertically below this breakpoint |
23
+ | `alignY` | `'top' \| 'center' \| 'bottom' \| 'stretch'` (responsive) | `'top'` | Vertical alignment of items in each row |
24
+ | `data` | `DataAttributeMap` | — | Test/analytics attributes |
25
+
26
+ Column count is derived from the number of direct children. Each direct child
27
+ occupies one column.
28
+
29
+ ## Common patterns
30
+
31
+ ### Equal-width 3-column filter bar (collapses on mobile)
32
+
33
+ ```tsx
34
+ <Columns gap="medium" collapseBelow="tablet">
35
+ <Field label="Role" labelVisibility="hidden">
36
+ <Select options={roleOptions} placeholder="Select role" />
37
+ </Field>
38
+ <Field label="Status" labelVisibility="hidden">
39
+ <Select options={statusOptions} placeholder="Select status" />
40
+ </Field>
41
+ <Field label="Search" labelVisibility="hidden">
42
+ <TextInput placeholder="Search users">
43
+ <InputAdornment placement="start">
44
+ <SearchIcon size="xsmall" tone="placeholder" />
45
+ </InputAdornment>
46
+ </TextInput>
47
+ </Field>
48
+ </Columns>
49
+ ```
50
+
51
+ ### Proportional 2-column layout
52
+
53
+ ```tsx
54
+ {
55
+ /* Left column takes 2/3, right takes 1/3 */
56
+ }
57
+ <Columns gap="large" template={[2, 1]}>
58
+ <MainContent />
59
+ <Sidebar />
60
+ </Columns>;
61
+ ```
62
+
63
+ ## Do NOTs
64
+
65
+ - NEVER set `display`, `gap` via inline styles, or `gridTemplateColumns`
66
+ directly — use `Columns` props
67
+ - NEVER wrap a single child in `Columns` — use `Box` or `Stack`
68
+ - NEVER use `Columns` when items need to wrap dynamically — use `Inline`
69
+ - NEVER use `template` values that don't sum to a meaningful ratio — keep it
70
+ simple (e.g. `[1, 1]`, `[2, 1]`, `[1, 2, 1]`)
package/dist/declarations/src/alignment.d.ts CHANGED
@@ -4,11 +4,11 @@ declare const alignYLookup: {
4
4
  readonly bottom: "end";
5
5
  readonly stretch: "stretch";
6
6
  };
7
- export declare type AlignY = keyof typeof alignYLookup;
8
- export declare const alignYToAlignItems: (prop?: import("@spark-web/theme").ResponsiveProp<"center" | "top" | "bottom" | "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;
7
+ export type AlignY = keyof typeof alignYLookup;
8
+ export declare const alignYToAlignItems: (prop?: import("@spark-web/theme").ResponsiveProp<"bottom" | "top" | "center" | "stretch"> | undefined) => "center" | "stretch" | "start" | "end" | {
9
+ mobile: "center" | "stretch" | "start" | "end" | undefined;
10
+ tablet: "center" | "stretch" | "start" | "end" | undefined;
11
+ desktop: "center" | "stretch" | "start" | "end" | undefined;
12
+ wide: "center" | "stretch" | "start" | "end" | undefined;
13
13
  } | undefined;
14
14
  export {};
package/dist/declarations/src/columns.d.ts CHANGED
@@ -3,9 +3,9 @@ import type { ResponsiveProp, ResponsiveRangeProps, SparkTheme } from '@spark-we
3
3
  import type { DataAttributeMap } from '@spark-web/utils/internal';
4
4
  import type { ReactNode } from 'react';
5
5
  import type { AlignY } from "./alignment.js";
6
- declare type Gap = ResponsiveProp<keyof Omit<SparkTheme['spacing'], 'none'>>;
7
- declare type ValidBoxProps = Omit<BoxProps, 'display' | 'alignItems' | 'gap' | 'flexDirection' | 'justifyContent' | 'flexWrap' | 'dangerouslySetInnerHTML'>;
8
- export declare type ColumnsProps = {
6
+ type Gap = ResponsiveProp<keyof Omit<SparkTheme['spacing'], 'none'>>;
7
+ type ValidBoxProps = Omit<BoxProps, 'display' | 'alignItems' | 'gap' | 'flexDirection' | 'justifyContent' | 'flexWrap' | 'dangerouslySetInnerHTML'>;
8
+ export type ColumnsProps = {
9
9
  /** Vertically align items within the container. */
10
10
  alignY?: ResponsiveProp<AlignY>;
11
11
  /** Elements representing each column. */
@@ -19,21 +19,21 @@ export declare type ColumnsProps = {
19
19
  /** Define the relative width of each column. By default each column is the same width. */
20
20
  template?: number[];
21
21
  } & ValidBoxProps;
22
- export declare const Columns: <Comp extends import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> = "div">(props: {
22
+ export declare const Columns: <Comp extends import("react").ElementType = "div">(props: {
23
23
  as?: Comp | undefined;
24
- ref?: import("react").Ref<Comp extends "symbol" | "text" | "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" | "textPath" | "tspan" | "use" | "view" | keyof HTMLElementTagNameMap ? (HTMLElementTagNameMap & Pick<SVGElementTagNameMap, "symbol" | "text" | "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" | "textPath" | "tspan" | "use" | "view">)[Comp] : Comp extends new (...args: any) => any ? InstanceType<Comp> : undefined> | undefined;
24
+ 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;
25
25
  } & Omit<import("react").PropsWithoutRef<import("react").ComponentProps<Comp>>, "as"> & {
26
26
  /** Vertically align items within the container. */
27
- alignY?: ResponsiveProp<"center" | "top" | "bottom" | "stretch"> | undefined;
27
+ alignY?: ResponsiveProp<AlignY>;
28
28
  /** Elements representing each column. */
29
29
  children: ReactNode;
30
30
  /** At which breakpoint, if any, should the columns collapse. */
31
- collapseBelow?: ResponsiveRangeProps['below'];
31
+ collapseBelow?: ResponsiveRangeProps["below"];
32
32
  /** Sets data attributes on the component. */
33
- data?: DataAttributeMap | undefined;
33
+ data?: DataAttributeMap;
34
34
  /** The size of the gap between each column. */
35
- gap?: Gap | undefined;
35
+ gap?: Gap;
36
36
  /** Define the relative width of each column. By default each column is the same width. */
37
- template?: number[] | undefined;
38
- } & ValidBoxProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
37
+ template?: number[];
38
+ } & ValidBoxProps) => import("react").ReactElement;
39
39
  export {};
package/dist/spark-web-columns.cjs.d.ts CHANGED
@@ -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,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3Bhcmstd2ViLWNvbHVtbnMuY2pzLmQudHMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuL2RlY2xhcmF0aW9ucy9zcmMvaW5kZXguZC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSJ9
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spark-web/columns",
3
- "version": "5.1.0-rc.0",
3
+ "version": "5.1.1",
4
4
  "homepage": "https://github.com/brighte-labs/spark-web#readme",
5
5
  "repository": {
6
6
  "type": "git",
@@ -11,22 +11,23 @@
11
11
  "module": "dist/spark-web-columns.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.0-rc.0",
21
- "@spark-web/theme": "^5.12.0-rc.0",
22
- "@spark-web/utils": "^5.1.0-rc.0"
21
+ "@spark-web/box": "^6.0.1",
22
+ "@spark-web/theme": "^5.13.0",
23
+ "@spark-web/utils": "^5.1.0"
23
24
  },
24
25
  "devDependencies": {
25
26
  "@types/react": "^19.1.0",
26
27
  "react": "^19.1.0"
27
28
  },
28
29
  "peerDependencies": {
29
- "react": ">=19.1.0"
30
+ "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
30
31
  },
31
32
  "engines": {
32
33
  "node": ">=14"