@spark-web/text 5.3.0 → 5.3.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
CHANGED
|
@@ -1,5 +1,18 @@
|
|
|
1
1
|
# @spark-web/text
|
|
2
2
|
|
|
3
|
+
## 5.3.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.3.0
|
|
4
17
|
|
|
5
18
|
### Minor Changes
|
package/CLAUDE.md
ADDED
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
# @spark-web/text — AI Context
|
|
2
|
+
|
|
3
|
+
## What this is
|
|
4
|
+
|
|
5
|
+
The primary text rendering component. Applies theme typography tokens (size,
|
|
6
|
+
weight, tone, baseline trimming) and renders as a block `div` by default. Use
|
|
7
|
+
for body copy, labels, captions, status messages, and cell content inside
|
|
8
|
+
tables.
|
|
9
|
+
|
|
10
|
+
## What this is NOT
|
|
11
|
+
|
|
12
|
+
- Not a heading — use `@spark-web/heading` for semantic headings (h1–h4)
|
|
13
|
+
- Not a link — use `@spark-web/text-link` for anchor text
|
|
14
|
+
- Not a layout container — do not put layout logic inside `Text`
|
|
15
|
+
|
|
16
|
+
## Props interface
|
|
17
|
+
|
|
18
|
+
| Prop | Type | Default | Notes |
|
|
19
|
+
| ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ | -------------------------------------------------------------------------------------------------- |
|
|
20
|
+
| `size` | `'xsmall' \| 'small' \| 'standard' \| 'large'` | `'standard'` | Typography scale |
|
|
21
|
+
| `tone` | `'neutral' \| 'muted' \| 'link' \| 'disabled' \| 'field' \| 'fieldAccent' \| 'placeholder' \| 'accent' \| 'primary' \| 'primaryHover' \| 'primaryActive' \| 'secondary' \| 'secondaryHover' \| 'secondaryActive' \| 'caution' \| 'critical' \| 'info' \| 'positive' \| 'dark' \| 'brandSubtle'` | `'neutral'` | Text color |
|
|
22
|
+
| `weight` | `'regular' \| 'semibold'` | — | Font weight override |
|
|
23
|
+
| `align` | `'left' \| 'center' \| 'right'` | — | Block variant only (not compatible with `inline`) |
|
|
24
|
+
| `inline` | `boolean` | `false` | Renders as `<span>` with `display: inline` |
|
|
25
|
+
| `baseline` | `boolean` | `true` | Apply leading-trim (cap-height) — set `false` when not adjacent to other baseline-trimmed elements |
|
|
26
|
+
| `overflowStrategy` | `'truncate' \| 'nowrap'` | — | Block variant only |
|
|
27
|
+
| `numberOfLines` | `number` | — | Clamp to N lines with ellipsis |
|
|
28
|
+
| `tabularNumbers` | `boolean` | `false` | Monospace-width numerals |
|
|
29
|
+
| `transform` | CSS `textTransform` value | — | `'uppercase'`, `'capitalize'`, etc. |
|
|
30
|
+
| `as` | HTML element tag | `'div'` | Use `'span'`, `'p'`, `'label'`, etc. as needed |
|
|
31
|
+
| `data` | `DataAttributeMap` | — | Test/analytics attributes |
|
|
32
|
+
|
|
33
|
+
## Token usage
|
|
34
|
+
|
|
35
|
+
All typography values come from `theme.typography`. Text internally uses
|
|
36
|
+
`useText()` which maps `size` → responsive font-size/line-height and applies
|
|
37
|
+
baseline trimming. Never compute font sizes or colors directly — always use
|
|
38
|
+
`Text` props.
|
|
39
|
+
|
|
40
|
+
## Common patterns
|
|
41
|
+
|
|
42
|
+
### Table cell content
|
|
43
|
+
|
|
44
|
+
```tsx
|
|
45
|
+
// Always size="small" in table cells
|
|
46
|
+
<Text size="small">{row.name}</Text>
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
### Muted supporting text
|
|
50
|
+
|
|
51
|
+
```tsx
|
|
52
|
+
<Text tone="muted" size="small">
|
|
53
|
+
No records found
|
|
54
|
+
</Text>
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
### Inline label within a block
|
|
58
|
+
|
|
59
|
+
```tsx
|
|
60
|
+
<Text>
|
|
61
|
+
Status:{' '}
|
|
62
|
+
<Text inline tone="positive">
|
|
63
|
+
Active
|
|
64
|
+
</Text>
|
|
65
|
+
</Text>
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
### Truncate long values
|
|
69
|
+
|
|
70
|
+
```tsx
|
|
71
|
+
<Text size="small" overflowStrategy="truncate">
|
|
72
|
+
{longValue}
|
|
73
|
+
</Text>
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
## Composition
|
|
77
|
+
|
|
78
|
+
`Text` renders a `Box` internally. It provides a `TextContext` so nested `Text`
|
|
79
|
+
components inherit `size`, `tone`, and `weight` — override only what differs
|
|
80
|
+
from the parent.
|
|
81
|
+
|
|
82
|
+
## Do NOTs
|
|
83
|
+
|
|
84
|
+
- NEVER use raw CSS for font-size, color, or line-height — always use `Text`
|
|
85
|
+
props
|
|
86
|
+
- NEVER use `tone="neutralInverted"` or `tone="mutedInverted"` directly — these
|
|
87
|
+
are automatic inversions applied by the `background` context
|
|
88
|
+
- NEVER set `baseline={true}` (the default) on a `Text` that is not inside a
|
|
89
|
+
layout component that accounts for leading-trim — set `baseline={false}` when
|
|
90
|
+
in doubt for non-standard layouts
|
|
91
|
+
- NEVER use `Text` for headings — use `@spark-web/heading`
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
export declare const TextContext: import("react").Context<{
|
|
2
2
|
size: NonNullable<import("@spark-web/theme/src/themes/_types/typography").TypographySizing>;
|
|
3
3
|
tone: NonNullable<string | number>;
|
|
4
|
-
weight: NonNullable<"
|
|
4
|
+
weight: NonNullable<"medium" | "light" | "bold" | "black" | "thin" | "extralight" | "regular" | "semibold" | "extrabold" | undefined> | undefined;
|
|
5
5
|
} | undefined>;
|
|
6
6
|
export declare function useTextContext(): {
|
|
7
7
|
size: NonNullable<import("@spark-web/theme/src/themes/_types/typography").TypographySizing>;
|
|
8
8
|
tone: NonNullable<string | number>;
|
|
9
|
-
weight: NonNullable<"
|
|
9
|
+
weight: NonNullable<"medium" | "light" | "bold" | "black" | "thin" | "extralight" | "regular" | "semibold" | "extrabold" | undefined> | undefined;
|
|
10
10
|
} | undefined;
|
|
@@ -11,6 +11,6 @@ export declare function DefaultTextPropsProvider({ children, size, tone, weight,
|
|
|
11
11
|
export declare const useDefaultTextProps: ({ size: sizeProp, tone: toneProp, weight: weightProp, }: DefaultTextProps) => {
|
|
12
12
|
size: NonNullable<import("@spark-web/theme/src/themes/_types/typography").TypographySizing>;
|
|
13
13
|
tone: NonNullable<string | number>;
|
|
14
|
-
weight: NonNullable<"
|
|
14
|
+
weight: NonNullable<"medium" | "light" | "bold" | "black" | "thin" | "extralight" | "regular" | "semibold" | "extrabold" | undefined> | undefined;
|
|
15
15
|
};
|
|
16
16
|
export {};
|
|
@@ -36,6 +36,6 @@ export type TextProps = Partial<UseTextProps> & {
|
|
|
36
36
|
} & (InlineProps | BlockProps);
|
|
37
37
|
export declare const Text: <Comp extends import("react").ElementType = "div">(props: {
|
|
38
38
|
as?: Comp | undefined;
|
|
39
|
-
ref?: import("react").Ref<Comp extends "symbol" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "
|
|
39
|
+
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;
|
|
40
40
|
} & (Omit<import("react").PropsWithoutRef<import("react").ComponentProps<Comp>>, "as"> & TextProps)) => import("react").ReactElement;
|
|
41
41
|
export {};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@spark-web/text",
|
|
3
|
-
"version": "5.3.
|
|
3
|
+
"version": "5.3.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-text.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/theme": "^5.13.0",
|
|
22
23
|
"@spark-web/utils": "^5.1.0"
|
|
23
24
|
},
|