@spark-web/box 6.0.0 → 6.0.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 +10 -0
- package/CLAUDE.md +87 -0
- package/dist/declarations/src/box.d.ts +1 -1
- package/package.json +2 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,15 @@
|
|
|
1
1
|
# @spark-web/box
|
|
2
2
|
|
|
3
|
+
## 6.0.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
|
+
|
|
3
13
|
## 6.0.0
|
|
4
14
|
|
|
5
15
|
### Minor Changes
|
package/CLAUDE.md
ADDED
|
@@ -0,0 +1,87 @@
|
|
|
1
|
+
# @spark-web/box — AI Context
|
|
2
|
+
|
|
3
|
+
## What this is
|
|
4
|
+
|
|
5
|
+
The foundational layout primitive. Every Spark component is built on `Box`. It
|
|
6
|
+
exposes a prop-based API for applying theme-constrained styles to any HTML
|
|
7
|
+
element. Use it when no higher-level layout component (`Stack`, `Row`,
|
|
8
|
+
`Columns`) fits the shape of what you need.
|
|
9
|
+
|
|
10
|
+
## What this is NOT
|
|
11
|
+
|
|
12
|
+
- Not a text component — use `Text` for any rendered text content
|
|
13
|
+
- Not a layout shorthand — for vertical stacks use `Stack`, for horizontal rows
|
|
14
|
+
use `Row`, for CSS grid use `Columns`
|
|
15
|
+
- Not a button — use `Button` or `ButtonLink` for interactive elements
|
|
16
|
+
|
|
17
|
+
## Props interface
|
|
18
|
+
|
|
19
|
+
`Box` accepts all `BoxStyleProps` (see below) plus:
|
|
20
|
+
|
|
21
|
+
| Prop | Type | Notes |
|
|
22
|
+
| ----------- | ----------------------------- | ------------------------------------------------ |
|
|
23
|
+
| `as` | `keyof HTMLElementTagNameMap` | Changes the rendered element; defaults to `div` |
|
|
24
|
+
| `asElement` | `keyof HTMLElementTagNameMap` | Tells the reset system what element `as` renders |
|
|
25
|
+
| `children` | `ReactNode` | — |
|
|
26
|
+
| `data` | `DataAttributeMap` | Test/analytics attributes |
|
|
27
|
+
| `id` | `string` | — |
|
|
28
|
+
| `css` | `CSSObject` | Escape hatch for styles not covered by props |
|
|
29
|
+
|
|
30
|
+
### BoxStyleProps — commonly used
|
|
31
|
+
|
|
32
|
+
Spacing values map to `SparkTheme['spacing']` keys:
|
|
33
|
+
`none | xsmall | small | medium | large | xlarge | xxlarge`
|
|
34
|
+
|
|
35
|
+
Sizing values map to `SparkTheme['sizing']` keys:
|
|
36
|
+
`xxsmall | xsmall | small | medium | large | xlarge | xxlarge | full`
|
|
37
|
+
|
|
38
|
+
| Prop | Values |
|
|
39
|
+
| --------------------------------- | ---------------------------------------------------------------------------- |
|
|
40
|
+
| `padding` | spacing token (responsive) |
|
|
41
|
+
| `paddingX` | spacing token (responsive) |
|
|
42
|
+
| `paddingY` | spacing token (responsive) |
|
|
43
|
+
| `paddingTop/Bottom/Left/Right` | spacing token (responsive) |
|
|
44
|
+
| `margin` | spacing token (responsive) |
|
|
45
|
+
| `marginX/Y/Top/Bottom/Left/Right` | spacing token (responsive) |
|
|
46
|
+
| `gap` | spacing token (responsive, excludes `none` and `full`) |
|
|
47
|
+
| `width` | sizing token or `'full'` (responsive) |
|
|
48
|
+
| `height` | sizing token (responsive) |
|
|
49
|
+
| `display` | `'block' \| 'inline' \| 'inline-block' \| 'inline-flex' \| 'flex' \| 'none'` |
|
|
50
|
+
| `flexDirection` | `'row' \| 'rowReverse' \| 'column' \| 'columnReverse'` |
|
|
51
|
+
| `flexWrap` | `'wrap' \| 'nowrap'` |
|
|
52
|
+
| `alignItems` | `'center' \| 'flexStart' \| 'flexEnd' \| 'stretch'` |
|
|
53
|
+
| `justifyContent` | `'start' \| 'center' \| 'end' \| 'spaceBetween' \| 'stretch'` |
|
|
54
|
+
| `flexShrink` | `0 \| 1` |
|
|
55
|
+
| `position` | `'relative' \| 'absolute' \| 'fixed' \| 'sticky'` |
|
|
56
|
+
| `top/bottom/left/right` | `number` (responsive) |
|
|
57
|
+
| `overflow` | `'hidden' \| 'auto' \| 'scroll' \| 'visible'` |
|
|
58
|
+
| `background` | background token (e.g. `'surface' \| 'primary' \| 'primarySoft'`) |
|
|
59
|
+
| `border` | border color token (e.g. `'standard' \| 'primary'`) |
|
|
60
|
+
| `borderRadius` | `'small' \| 'medium' \| 'large' \| 'full'` |
|
|
61
|
+
| `cursor` | `'default' \| 'pointer'` |
|
|
62
|
+
|
|
63
|
+
## Token usage
|
|
64
|
+
|
|
65
|
+
All values come from the theme — never raw hex, px, or Tailwind. Use
|
|
66
|
+
`useTheme()` from `@spark-web/theme` for any value not expressible as a Box prop
|
|
67
|
+
(e.g. inline color from `theme.color.foreground.muted`).
|
|
68
|
+
|
|
69
|
+
The `background` prop automatically pushes a background context so child `Text`
|
|
70
|
+
components can invert their color tone when placed on dark backgrounds.
|
|
71
|
+
|
|
72
|
+
## Composition
|
|
73
|
+
|
|
74
|
+
`Box` is the leaf — it does not compose other Spark components. Every other
|
|
75
|
+
Spark component composes `Box` internally.
|
|
76
|
+
|
|
77
|
+
## Do NOTs
|
|
78
|
+
|
|
79
|
+
- NEVER use raw hex, px, em, rem, or Tailwind classes
|
|
80
|
+
- NEVER use `Box` for text content — use `Text`
|
|
81
|
+
- NEVER use `Box` when `Stack`, `Row`, or `Columns` fits the layout — those
|
|
82
|
+
components encode the correct flex/grid setup automatically
|
|
83
|
+
- NEVER pass `display`, `alignItems`, `flexDirection`, or `justifyContent` to
|
|
84
|
+
`Stack` or `Row` — those are locked internally; use `Box` if you need custom
|
|
85
|
+
flex control
|
|
86
|
+
- NEVER use `style={{}}` for theme values — use Box props or `css` prop with
|
|
87
|
+
theme tokens
|
|
@@ -21,7 +21,7 @@ export type BoxProps = {
|
|
|
21
21
|
/** Exposes a prop-based API for adding styles to a view, within the constraints of the theme. */
|
|
22
22
|
export declare const Box: <Comp extends import("react").ElementType = "div">(props: {
|
|
23
23
|
as?: Comp | undefined;
|
|
24
|
-
ref?: import("react").Ref<Comp extends "symbol" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "
|
|
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
|
/** Children element to be rendered inside the component. */
|
|
27
27
|
children?: ReactNode;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spark-web/box",
|
|
3
|
-
"version": "6.0.
|
|
3
|
+
"version": "6.0.1",
|
|
4
4
|
"homepage": "https://github.com/brighte-labs/spark-web#readme",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -11,6 +11,7 @@
|
|
|
11
11
|
"module": "dist/spark-web-box.esm.js",
|
|
12
12
|
"files": [
|
|
13
13
|
"CHANGELOG.md",
|
|
14
|
+
"CLAUDE.md",
|
|
14
15
|
"dist",
|
|
15
16
|
"README.md"
|
|
16
17
|
],
|