@spark-web/text 1.1.1 → 1.2.0

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 (14) hide show
  1. package/CHANGELOG.md +230 -0
  2. package/README.md +67 -81
  3. package/dist/declarations/src/context.d.ts +2 -2
  4. package/dist/declarations/src/{defaultTextProps.d.ts → default-text-props.d.ts} +2 -2
  5. package/dist/declarations/src/index.d.ts +10 -10
  6. package/dist/declarations/src/{Text.d.ts → text.d.ts} +3 -3
  7. package/dist/declarations/src/{useText.d.ts → use-text.d.ts} +1 -1
  8. package/dist/spark-web-text.cjs.dev.js +49 -66
  9. package/dist/spark-web-text.cjs.prod.js +49 -66
  10. package/dist/spark-web-text.esm.js +50 -67
  11. package/package.json +16 -9
  12. /package/dist/declarations/src/{Strong.d.ts → strong.d.ts} +0 -0
  13. /package/dist/declarations/src/{useForegroundTone.d.ts → use-foreground-tone.d.ts} +0 -0
  14. /package/dist/declarations/src/{useOverflowStrategy.d.ts → use-overflow-strategy.d.ts} +0 -0
package/CHANGELOG.md ADDED
@@ -0,0 +1,230 @@
1
+ # @spark-web/text
2
+
3
+ ## 1.2.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#382](https://github.com/brighte-labs/spark-web/pull/382)
8
+ [`955bf5d`](https://github.com/brighte-labs/spark-web/commit/955bf5d7698bfdf45e7f317aa3e726c81d3444c0)
9
+ Thanks [@dilipt-brighte](https://github.com/dilipt-brighte)! - Updates React
10
+ version to latest (18.2.0)
11
+
12
+ ### Patch Changes
13
+
14
+ - Updated dependencies
15
+ [[`955bf5d`](https://github.com/brighte-labs/spark-web/commit/955bf5d7698bfdf45e7f317aa3e726c81d3444c0)]:
16
+ - @spark-web/box@1.2.0
17
+ - @spark-web/theme@3.2.0
18
+ - @spark-web/utils@1.3.0
19
+
20
+ ## 1.1.2
21
+
22
+ ### Patch Changes
23
+
24
+ - [#246](https://github.com/brighte-labs/spark-web/pull/246)
25
+ [`de99b9c`](https://github.com/brighte-labs/spark-web/commit/de99b9c7f72373bd1902cf67f5cfec9a1e1db01c)
26
+ Thanks [@lukebennett88](https://github.com/lukebennett88)! - Remove
27
+ destructuring from theme object
28
+
29
+ - [#218](https://github.com/brighte-labs/spark-web/pull/218)
30
+ [`6fc8d1b`](https://github.com/brighte-labs/spark-web/commit/6fc8d1bc37e25d0cd622bc37f68a1d92eb5961b5)
31
+ Thanks [@nderkim](https://github.com/nderkim)! - Rename files to kebab case
32
+
33
+ - [#222](https://github.com/brighte-labs/spark-web/pull/222)
34
+ [`7f93c45`](https://github.com/brighte-labs/spark-web/commit/7f93c45bbae8c765e10df9d0dd7615473797749b)
35
+ Thanks [@lukebennett88](https://github.com/lukebennett88)! - Update
36
+ dependencies
37
+
38
+ - [#242](https://github.com/brighte-labs/spark-web/pull/242)
39
+ [`6df05f7`](https://github.com/brighte-labs/spark-web/commit/6df05f764e4181c140d6547d6b897d0210468f6a)
40
+ Thanks [@lukebennett88](https://github.com/lukebennett88)! - - Add homepage
41
+ and repository keys to package.json
42
+ - Add CHANGELOG and README to files key in package.json
43
+ - Updated dependencies
44
+ [[`adc5e9e`](https://github.com/brighte-labs/spark-web/commit/adc5e9e6c99acd117f3261edcefdb5573132441b),
45
+ [`de99b9c`](https://github.com/brighte-labs/spark-web/commit/de99b9c7f72373bd1902cf67f5cfec9a1e1db01c),
46
+ [`6fc8d1b`](https://github.com/brighte-labs/spark-web/commit/6fc8d1bc37e25d0cd622bc37f68a1d92eb5961b5),
47
+ [`7f93c45`](https://github.com/brighte-labs/spark-web/commit/7f93c45bbae8c765e10df9d0dd7615473797749b),
48
+ [`62f7de8`](https://github.com/brighte-labs/spark-web/commit/62f7de8a2e1df5ae088c093d3acdaa868d3f61fe),
49
+ [`6df05f7`](https://github.com/brighte-labs/spark-web/commit/6df05f764e4181c140d6547d6b897d0210468f6a)]:
50
+ - @spark-web/box@1.1.0
51
+ - @spark-web/theme@3.1.0
52
+ - @spark-web/utils@1.2.3
53
+
54
+ ## 1.1.1
55
+
56
+ ### Patch Changes
57
+
58
+ - [#208](https://github.com/brighte-labs/spark-web/pull/208)
59
+ [`1ea26ef`](https://github.com/brighte-labs/spark-web/commit/1ea26ef04a3b45875ed0dd2326eeab1fbe1e4bc5)
60
+ Thanks [@lukebennett88](https://github.com/lukebennett88)! - Lower required
61
+ node version
62
+
63
+ - Updated dependencies
64
+ [[`1ea26ef`](https://github.com/brighte-labs/spark-web/commit/1ea26ef04a3b45875ed0dd2326eeab1fbe1e4bc5)]:
65
+ - @spark-web/box@1.0.9
66
+ - @spark-web/theme@3.0.6
67
+ - @spark-web/utils@1.2.2
68
+
69
+ ## 1.1.0
70
+
71
+ ### Minor Changes
72
+
73
+ - [#192](https://github.com/brighte-labs/spark-web/pull/192)
74
+ [`9ff0c4b`](https://github.com/brighte-labs/spark-web/commit/9ff0c4b4cc83e0e1ab609d0bcdb01458b654263e)
75
+ Thanks [@lukebennett88](https://github.com/lukebennett88)! - Spread consumer
76
+ props onto Text
77
+
78
+ ### Patch Changes
79
+
80
+ - [#197](https://github.com/brighte-labs/spark-web/pull/197)
81
+ [`94016d8`](https://github.com/brighte-labs/spark-web/commit/94016d84e26bbe55833bbcbab847a2cce6041538)
82
+ Thanks [@lukebennett88](https://github.com/lukebennett88)! - Update packages
83
+
84
+ - Updated dependencies
85
+ [[`94016d8`](https://github.com/brighte-labs/spark-web/commit/94016d84e26bbe55833bbcbab847a2cce6041538)]:
86
+ - @spark-web/box@1.0.8
87
+ - @spark-web/theme@3.0.5
88
+ - @spark-web/utils@1.2.1
89
+
90
+ ## 1.0.7
91
+
92
+ ### Patch Changes
93
+
94
+ - [#173](https://github.com/brighte-labs/spark-web/pull/173)
95
+ [`90b7e9c`](https://github.com/brighte-labs/spark-web/commit/90b7e9cf4eb7e864d765c74b22c3dedf3d262e25)
96
+ Thanks [@lukebennett88](https://github.com/lukebennett88)! - Update babel
97
+ dependency
98
+
99
+ - Updated dependencies
100
+ [[`90b7e9c`](https://github.com/brighte-labs/spark-web/commit/90b7e9cf4eb7e864d765c74b22c3dedf3d262e25),
101
+ [`c3867af`](https://github.com/brighte-labs/spark-web/commit/c3867af7b77dfae3580ab63a5d5c9e8452f2da62)]:
102
+ - @spark-web/box@1.0.7
103
+ - @spark-web/theme@3.0.3
104
+ - @spark-web/utils@1.2.0
105
+
106
+ ## 1.0.6
107
+
108
+ ### Patch Changes
109
+
110
+ - [#167](https://github.com/brighte-labs/spark-web/pull/167)
111
+ [`4f79350`](https://github.com/brighte-labs/spark-web/commit/4f793508fdb43ddd452f0d59a3126101f9fa5459)
112
+ Thanks [@lukebennett88](https://github.com/lukebennett88)! - Update Babel
113
+
114
+ - Updated dependencies
115
+ [[`4f79350`](https://github.com/brighte-labs/spark-web/commit/4f793508fdb43ddd452f0d59a3126101f9fa5459),
116
+ [`60f7281`](https://github.com/brighte-labs/spark-web/commit/60f7281c4a194d934a2ce561cad47e737b0fb48e)]:
117
+ - @spark-web/box@1.0.6
118
+ - @spark-web/theme@3.0.2
119
+ - @spark-web/utils@1.1.5
120
+
121
+ ## 1.0.5
122
+
123
+ ### Patch Changes
124
+
125
+ - [#113](https://github.com/brighte-labs/spark-web/pull/113)
126
+ [`156236d`](https://github.com/brighte-labs/spark-web/commit/156236d2474aee66a0b8e2030635f9c08a5b78ba)
127
+ Thanks [@lukebennett88](https://github.com/lukebennett88)! - Update
128
+ dependencies
129
+
130
+ - Updated dependencies
131
+ [[`156236d`](https://github.com/brighte-labs/spark-web/commit/156236d2474aee66a0b8e2030635f9c08a5b78ba)]:
132
+ - @spark-web/box@1.0.5
133
+ - @spark-web/theme@3.0.1
134
+ - @spark-web/utils@1.1.3
135
+
136
+ ## 1.0.4
137
+
138
+ ### Patch Changes
139
+
140
+ - [#83](https://github.com/brighte-labs/spark-web/pull/83)
141
+ [`1ef4f82`](https://github.com/brighte-labs/spark-web/commit/1ef4f82df999c487b79cd216c17ca5735e444fc5)
142
+ Thanks [@ChristopherMitchell242](https://github.com/ChristopherMitchell242)! -
143
+ Data attribute added to component props to allow consumers to attach custom
144
+ attributes to components
145
+
146
+ * [#65](https://github.com/brighte-labs/spark-web/pull/65)
147
+ [`182a53a`](https://github.com/brighte-labs/spark-web/commit/182a53a484892df48754e89dd714459a7f69fcff)
148
+ Thanks [@lukebennett88](https://github.com/lukebennett88)! - Remove "Inter"
149
+ font, change font-weights and font-sizes.
150
+
151
+ - [#87](https://github.com/brighte-labs/spark-web/pull/87)
152
+ [`5744b68`](https://github.com/brighte-labs/spark-web/commit/5744b6820f626b93a14e11e1fbd96bcbe1b12b27)
153
+ Thanks [@ChristopherMitchell242](https://github.com/ChristopherMitchell242)! -
154
+ Data attribute added to component props to allow consumers to attach
155
+ customattributes to components
156
+
157
+ * [#52](https://github.com/brighte-labs/spark-web/pull/52)
158
+ [`82ab744`](https://github.com/brighte-labs/spark-web/commit/82ab744f198466810f3386bc459b8ab4d57c820e)
159
+ Thanks [@lukebennett88](https://github.com/lukebennett88)! - Add files array
160
+ to package.json files
161
+
162
+ * Updated dependencies
163
+ [[`182a53a`](https://github.com/brighte-labs/spark-web/commit/182a53a484892df48754e89dd714459a7f69fcff),
164
+ [`82ab744`](https://github.com/brighte-labs/spark-web/commit/82ab744f198466810f3386bc459b8ab4d57c820e),
165
+ [`df618d9`](https://github.com/brighte-labs/spark-web/commit/df618d92d534e06f06ecedc95ea6bdd51cdc906b)]:
166
+ - @spark-web/theme@3.0.0
167
+ - @spark-web/box@1.0.4
168
+ - @spark-web/utils@1.1.2
169
+
170
+ ## 1.0.3
171
+
172
+ ### Patch Changes
173
+
174
+ - [#42](https://github.com/brighte-labs/spark-web/pull/42)
175
+ [`435779a`](https://github.com/brighte-labs/spark-web/commit/435779aa42bd635bbf43e1fd41724c666402caa2)
176
+ Thanks [@lukebennett88](https://github.com/lukebennett88)! - Prevent multiple
177
+ versions of React
178
+
179
+ - Updated dependencies
180
+ [[`435779a`](https://github.com/brighte-labs/spark-web/commit/435779aa42bd635bbf43e1fd41724c666402caa2)]:
181
+ - @spark-web/box@1.0.3
182
+ - @spark-web/theme@2.0.2
183
+ - @spark-web/utils@1.1.1
184
+
185
+ ## 1.0.2
186
+
187
+ ### Patch Changes
188
+
189
+ - [#40](https://github.com/brighte-labs/spark-web/pull/40)
190
+ [`062c8ab`](https://github.com/brighte-labs/spark-web/commit/062c8ab8c7b4120f8d14c269b5f7801288c678ca)
191
+ Thanks [@lukebennett88](https://github.com/lukebennett88)! - Add
192
+ @babel/transform-runtime
193
+
194
+ - Updated dependencies
195
+ [[`062c8ab`](https://github.com/brighte-labs/spark-web/commit/062c8ab8c7b4120f8d14c269b5f7801288c678ca)]:
196
+ - @spark-web/box@1.0.2
197
+ - @spark-web/theme@2.0.1
198
+ - @spark-web/utils@1.0.2
199
+
200
+ ## 1.0.1
201
+
202
+ ### Patch Changes
203
+
204
+ - [#36](https://github.com/brighte-labs/spark-web/pull/36)
205
+ [`8546f8f`](https://github.com/brighte-labs/spark-web/commit/8546f8f05daaa79ea3ff954c6c4928a7a2d0622d)
206
+ Thanks [@lukebennett88](https://github.com/lukebennett88)! - Update Babel
207
+ config
208
+
209
+ - Updated dependencies
210
+ [[`aebff30`](https://github.com/brighte-labs/spark-web/commit/aebff30c86cb0a9db22b545c46159ce0d1c14afb),
211
+ [`8546f8f`](https://github.com/brighte-labs/spark-web/commit/8546f8f05daaa79ea3ff954c6c4928a7a2d0622d)]:
212
+ - @spark-web/theme@2.0.0
213
+ - @spark-web/box@1.0.1
214
+ - @spark-web/utils@1.0.1
215
+
216
+ ## 1.0.0
217
+
218
+ ### Major Changes
219
+
220
+ - [#27](https://github.com/brighte-labs/spark-web/pull/27)
221
+ [`4c8e398`](https://github.com/brighte-labs/spark-web/commit/4c8e3988f8a59d3dab60a6b67b1128b6ff2a5f2c)
222
+ Thanks [@JedWatson](https://github.com/JedWatson)! - Initial Version
223
+
224
+ ### Patch Changes
225
+
226
+ - Updated dependencies
227
+ [[`4c8e398`](https://github.com/brighte-labs/spark-web/commit/4c8e3988f8a59d3dab60a6b67b1128b6ff2a5f2c)]:
228
+ - @spark-web/box@1.0.0
229
+ - @spark-web/theme@1.0.0
230
+ - @spark-web/utils@1.0.0
package/README.md CHANGED
@@ -9,44 +9,26 @@ Constrained, purposeful text styles as a component.
9
9
  ## Examples
10
10
 
11
11
  ```jsx live
12
- <Columns gap="large" collapseBelow="wide">
13
- <Stack gap="medium">
14
- <Text size="large">large regular</Text>
15
- <Text size="large" weight="semibold">
16
- large medium
17
- </Text>
18
- <Text size="large" weight="strong">
19
- large strong
20
- </Text>
21
- </Stack>
22
- <Stack gap="medium">
23
- <Text size="standard">standard regular</Text>
24
- <Text size="standard" weight="semibold">
25
- standard medium
26
- </Text>
27
- <Text size="standard" weight="strong">
28
- standard strong
29
- </Text>
30
- </Stack>
31
- <Stack gap="small">
32
- <Text size="small">small regular</Text>
33
- <Text size="small" weight="semibold">
34
- small medium
35
- </Text>
36
- <Text size="small" weight="strong">
37
- small strong
38
- </Text>
39
- </Stack>
40
- <Stack gap="small">
41
- <Text size="xsmall">xsmall regular</Text>
42
- <Text size="xsmall" weight="semibold">
43
- xsmall medium
44
- </Text>
45
- <Text size="xsmall" weight="strong">
46
- xsmall strong
47
- </Text>
48
- </Stack>
49
- </Columns>
12
+ const textSizes = ['large', 'standard', 'small', 'xsmall'];
13
+
14
+ return (
15
+ <Columns collapseBelow="tablet" gap="xlarge">
16
+ <Stack gap="large">
17
+ {textSizes.map(textSize => (
18
+ <Text key={textSize} size={textSize} weight="regular">
19
+ Text {textSize} regular
20
+ </Text>
21
+ ))}
22
+ </Stack>
23
+ <Stack gap="large">
24
+ {textSizes.map(textSize => (
25
+ <Text key={textSize} size={textSize} weight="semibold">
26
+ Text {textSize} regular
27
+ </Text>
28
+ ))}
29
+ </Stack>
30
+ </Columns>
31
+ );
50
32
  ```
51
33
 
52
34
  ### Align
@@ -67,30 +49,24 @@ Use the `overflowStrategy` prop to manage how `Text` behaves with regard to
67
49
  overflow.
68
50
 
69
51
  ```jsx live
70
- <Stack gap="large" style={{ width: 200 }}>
71
- <Stack gap="small">
72
- <Text weight="strong">Default</Text>
73
- <Text>The quick brown fox jumps over the lazy dog.</Text>
74
- </Stack>
75
- <Stack gap="small">
76
- <Text weight="strong">Truncate</Text>
77
- <Text overflowStrategy="truncate">
78
- The quick brown fox jumps over the lazy dog.
79
- </Text>
52
+ const overflowStrategies = ['truncate', 'nowrap', 'breakword'];
53
+
54
+ return (
55
+ <Stack gap="large" style={{ width: 200 }}>
56
+ <Stack gap="small">
57
+ <Text weight="semibold">Default</Text>
58
+ <Text>The quick brown fox jumps over the lazy dog.</Text>
59
+ </Stack>
60
+ {overflowStrategies.map(overflowStrategy => (
61
+ <Stack key={overflowStrategy} gap="small">
62
+ <Text weight="semibold">{overflowStrategy}</Text>
63
+ <Text overflowStrategy={overflowStrategy}>
64
+ The quick brown fox jumps over the lazy dog.
65
+ </Text>
66
+ </Stack>
67
+ ))}
80
68
  </Stack>
81
- <Stack gap="small">
82
- <Text weight="strong">No wrap</Text>
83
- <Text overflowStrategy="nowrap">
84
- The quick brown fox jumps over the lazy dog.
85
- </Text>
86
- </Stack>
87
- <Stack gap="small">
88
- <Text weight="strong">Break word</Text>
89
- <Text overflowStrategy="breakword">
90
- The_quick_brown_fox_jumps_over_the_lazy dog.
91
- </Text>
92
- </Stack>
93
- </Stack>
69
+ );
94
70
  ```
95
71
 
96
72
  ### Tone
@@ -99,14 +75,35 @@ The foreground colour of text can be set by applying a `tone`. In addition to
99
75
  the foundation tones, “muted” provides a way to de-emphasise text.
100
76
 
101
77
  ```jsx live
102
- <Inline gap="small">
103
- <Text tone="neutral">neutral (default)</Text>
104
- <Text tone="muted">muted</Text>
105
- <Text tone="info">info</Text>
106
- <Text tone="positive">positive</Text>
107
- <Text tone="caution">caution</Text>
108
- <Text tone="critical">critical</Text>
109
- </Inline>
78
+ const textTones = [
79
+ 'neutral', // Default
80
+ 'accent',
81
+ 'caution',
82
+ 'critical',
83
+ 'disabled',
84
+ 'fieldAccent',
85
+ 'info',
86
+ 'link',
87
+ 'muted',
88
+ 'placeholder',
89
+ 'positive',
90
+ 'primary',
91
+ 'primaryActive',
92
+ 'primaryHover',
93
+ 'secondary',
94
+ 'secondaryActive',
95
+ 'secondaryHover',
96
+ ];
97
+
98
+ return (
99
+ <Columns collapseBelow="tablet" gap="large" template={[1, 1]}>
100
+ {textTones.map(tone => (
101
+ <Text key={tone} tone={tone}>
102
+ {tone}
103
+ </Text>
104
+ ))}
105
+ </Columns>
106
+ );
110
107
  ```
111
108
 
112
109
  ### Weight
@@ -138,18 +135,7 @@ tones “neutral” and “muted” will be inverted.
138
135
 
139
136
  ## Props
140
137
 
141
- | Prop | Type | Default | Description |
142
- | ----------------- | --------------------------------------------------------------- | ------- | ---------------------------------------------------------------------------- |
143
- | align? | 'left' \| 'center' \| 'right' | | Sets the horizontal alignment of the component. Used if displaying as block. |
144
- | children | React.ReactNode | | The text content to be rendered. |
145
- | data? | [DataAttributeMap][data-attribute-map] | | Sets data attributes on the component. |
146
- | id? | string | | Sets a unique idenitifier for the component. |
147
- | inline? | boolean | | Indicates if text should be inline or not. |
148
- | overflowStrategy? | 'nowrap' \| 'truncate' \| 'breakword' | | Sets how text behaves with regards to overflow. Used if displaying as block. |
149
- | tabularNumbers? | boolean | | When enabled, numbers will be the same width. Similar to a monospaced font. |
150
- | tone? | keyof [BrighteTheme][brighte-theme]['color']['foreground'] | | The tone of the text. |
151
- | transform? | CSSProperties['textTransform'] | | Transforms the text casing. |
152
- | weight? | keyof [BrighteTheme][brighte-theme]['typography']['fontweight'] | | The weight of the text. |
138
+ <PropsTable displayName="Text" />
153
139
 
154
140
  Extra props are also passed into the underlying [`Box`](/package/box) component.
155
141
 
package/dist/declarations/src/context.d.ts CHANGED
@@ -1,11 +1,11 @@
1
1
  /// <reference types="react" />
2
2
  export declare const TextContext: import("react").Context<{
3
3
  size: "small" | "xsmall" | "standard" | "large";
4
- tone: "link" | "muted" | "disabled" | "fieldAccent" | "accent" | "neutral" | "primary" | "secondary" | "caution" | "critical" | "info" | "positive" | "placeholder" | "primaryHover" | "primaryActive" | "secondaryHover" | "secondaryActive";
4
+ tone: "link" | "placeholder" | "disabled" | "muted" | "fieldAccent" | "accent" | "neutral" | "primary" | "secondary" | "caution" | "critical" | "info" | "positive" | "primaryHover" | "primaryActive" | "secondaryHover" | "secondaryActive";
5
5
  weight: "regular" | "semibold";
6
6
  } | undefined>;
7
7
  export declare function useTextContext(): {
8
8
  size: "small" | "xsmall" | "standard" | "large";
9
- tone: "link" | "muted" | "disabled" | "fieldAccent" | "accent" | "neutral" | "primary" | "secondary" | "caution" | "critical" | "info" | "positive" | "placeholder" | "primaryHover" | "primaryActive" | "secondaryHover" | "secondaryActive";
9
+ tone: "link" | "placeholder" | "disabled" | "muted" | "fieldAccent" | "accent" | "neutral" | "primary" | "secondary" | "caution" | "critical" | "info" | "positive" | "primaryHover" | "primaryActive" | "secondaryHover" | "secondaryActive";
10
10
  weight: "regular" | "semibold";
11
11
  } | undefined;
package/dist/declarations/src/{defaultTextProps.d.ts → default-text-props.d.ts} RENAMED
@@ -1,5 +1,5 @@
1
1
  import type { ReactNode } from 'react';
2
- import type { UseTextProps } from './useText';
2
+ import type { UseTextProps } from './use-text';
3
3
  declare type DefaultTextProps = {
4
4
  size?: NonNullable<UseTextProps['size']>;
5
5
  tone?: NonNullable<UseTextProps['tone']>;
@@ -10,7 +10,7 @@ export declare function DefaultTextPropsProvider({ children, size, tone, weight,
10
10
  }): JSX.Element;
11
11
  export declare const useDefaultTextProps: ({ size: sizeProp, tone: toneProp, weight: weightProp, }: DefaultTextProps) => {
12
12
  size: "small" | "xsmall" | "standard" | "large";
13
- tone: "link" | "muted" | "disabled" | "fieldAccent" | "accent" | "neutral" | "primary" | "secondary" | "caution" | "critical" | "info" | "positive" | "placeholder" | "primaryHover" | "primaryActive" | "secondaryHover" | "secondaryActive";
13
+ tone: "link" | "placeholder" | "disabled" | "muted" | "fieldAccent" | "accent" | "neutral" | "primary" | "secondary" | "caution" | "critical" | "info" | "positive" | "primaryHover" | "primaryActive" | "secondaryHover" | "secondaryActive";
14
14
  weight: "regular" | "semibold";
15
15
  };
16
16
  export {};
package/dist/declarations/src/index.d.ts CHANGED
@@ -1,11 +1,11 @@
1
1
  export { useTextContext } from './context';
2
- export { DefaultTextPropsProvider, useDefaultTextProps, } from './defaultTextProps';
3
- export { Strong } from './Strong';
4
- export { Text } from './Text';
5
- export { useForegroundTone } from './useForegroundTone';
6
- export { useOverflowStrategy } from './useOverflowStrategy';
7
- export { createTextStyles, useText } from './useText';
8
- export type { StrongProps } from './Strong';
9
- export type { TextProps } from './Text';
10
- export type { ForegroundTone } from './useForegroundTone';
11
- export type { TextOverflowStrategy } from './useOverflowStrategy';
2
+ export { DefaultTextPropsProvider, useDefaultTextProps, } from './default-text-props';
3
+ export { Strong } from './strong';
4
+ export { Text } from './text';
5
+ export { useForegroundTone } from './use-foreground-tone';
6
+ export { useOverflowStrategy } from './use-overflow-strategy';
7
+ export { createTextStyles, useText } from './use-text';
8
+ export type { StrongProps } from './strong';
9
+ export type { TextProps } from './text';
10
+ export type { ForegroundTone } from './use-foreground-tone';
11
+ export type { TextOverflowStrategy } from './use-overflow-strategy';
package/dist/declarations/src/{Text.d.ts → text.d.ts} RENAMED
@@ -1,8 +1,8 @@
1
1
  import type { BoxProps } from '@spark-web/box';
2
2
  import type { DataAttributeMap } from '@spark-web/utils/internal';
3
3
  import type { CSSProperties, ReactNode } from 'react';
4
- import type { TextOverflowStrategy } from './useOverflowStrategy';
5
- import type { UseTextProps } from './useText';
4
+ import type { TextOverflowStrategy } from './use-overflow-strategy';
5
+ import type { UseTextProps } from './use-text';
6
6
  declare type InlineProps = {
7
7
  align?: never;
8
8
  /** Display as an inline element. */
@@ -30,6 +30,6 @@ export declare type TextProps = Partial<UseTextProps> & {
30
30
  } & (InlineProps | BlockProps);
31
31
  export declare const Text: <Comp extends import("react").ElementType<any> = "div">(props: {
32
32
  as?: Comp | undefined;
33
- ref?: import("react").Ref<Comp extends "symbol" | "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" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | "set" | keyof HTMLElementTagNameMap ? (HTMLElementTagNameMap & Pick<SVGElementTagNameMap, "symbol" | "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" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | "set">)[Comp] : Comp extends new (...args: any) => any ? InstanceType<Comp> : undefined> | undefined;
33
+ ref?: import("react").Ref<Comp extends "symbol" | "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" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | keyof HTMLElementTagNameMap | "set" ? (HTMLElementTagNameMap & Pick<SVGElementTagNameMap, "symbol" | "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" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | "set">)[Comp] : Comp extends new (...args: any) => any ? InstanceType<Comp> : undefined> | undefined;
34
34
  } & Omit<import("react").PropsWithoutRef<import("react").ComponentProps<Comp>>, "as"> & TextProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
35
35
  export {};
package/dist/declarations/src/{useText.d.ts → use-text.d.ts} RENAMED
@@ -1,5 +1,5 @@
1
1
  import type { BrighteTextDefinition, BrighteTheme } from '@spark-web/theme';
2
- import type { ForegroundTone } from './useForegroundTone';
2
+ import type { ForegroundTone } from './use-foreground-tone';
3
3
  export declare type UseTextProps = {
4
4
  /** Apply leading-trim styles. */
5
5
  baseline?: boolean;
package/dist/spark-web-text.cjs.dev.js CHANGED
@@ -23,9 +23,9 @@ var DefaultTextPropsContext = /*#__PURE__*/react.createContext({
23
23
  });
24
24
  function DefaultTextPropsProvider(_ref) {
25
25
  var children = _ref.children,
26
- size = _ref.size,
27
- tone = _ref.tone,
28
- weight = _ref.weight;
26
+ size = _ref.size,
27
+ tone = _ref.tone,
28
+ weight = _ref.weight;
29
29
  var defaultTextProps = react.useMemo(function () {
30
30
  return {
31
31
  size: size,
@@ -40,16 +40,13 @@ function DefaultTextPropsProvider(_ref) {
40
40
  }
41
41
  var useDefaultTextProps = function useDefaultTextProps(_ref2) {
42
42
  var _ref3, _ref4, _ref5;
43
-
44
43
  var sizeProp = _ref2.size,
45
- toneProp = _ref2.tone,
46
- weightProp = _ref2.weight;
47
-
44
+ toneProp = _ref2.tone,
45
+ weightProp = _ref2.weight;
48
46
  var _useContext = react.useContext(DefaultTextPropsContext),
49
- size = _useContext.size,
50
- tone = _useContext.tone,
51
- weight = _useContext.weight;
52
-
47
+ size = _useContext.size,
48
+ tone = _useContext.tone,
49
+ weight = _useContext.weight;
53
50
  return {
54
51
  size: (_ref3 = sizeProp !== null && sizeProp !== void 0 ? sizeProp : size) !== null && _ref3 !== void 0 ? _ref3 : 'standard',
55
52
  tone: (_ref4 = toneProp !== null && toneProp !== void 0 ? toneProp : tone) !== null && _ref4 !== void 0 ? _ref4 : 'neutral',
@@ -59,12 +56,9 @@ var useDefaultTextProps = function useDefaultTextProps(_ref2) {
59
56
 
60
57
  var Strong = function Strong(_ref) {
61
58
  var children = _ref.children;
62
-
63
- var _useTheme = theme.useTheme(),
64
- typography = _useTheme.typography;
65
-
59
+ var theme$1 = theme.useTheme();
66
60
  var styles = {
67
- fontWeight: typography.fontWeight.semibold
61
+ fontWeight: theme$1.typography.fontWeight.semibold
68
62
  };
69
63
  return /*#__PURE__*/jsxRuntime.jsx("strong", {
70
64
  className: css.css(styles),
@@ -94,7 +88,6 @@ function useOverflowStrategy(strategy) {
94
88
  if (!strategy) {
95
89
  return null;
96
90
  }
97
-
98
91
  return strategyMap[strategy];
99
92
  }
100
93
 
@@ -115,30 +108,24 @@ var invertableTones = {
115
108
  function useForegroundTone(tone) {
116
109
  var theme$1 = theme.useTheme();
117
110
  var backgroundLightness = box.useBackgroundLightness();
118
-
119
111
  if (tone in invertableTones) {
120
112
  return theme$1.color.foreground[invertableTones[tone][backgroundLightness]];
121
113
  }
122
-
123
114
  return theme$1.color.foreground[tone];
124
115
  }
125
116
 
126
117
  function useText(_ref) {
127
118
  var _ref$baseline = _ref.baseline,
128
- baseline = _ref$baseline === void 0 ? true : _ref$baseline,
129
- size = _ref.size,
130
- tone = _ref.tone,
131
- weight = _ref.weight;
132
-
133
- var _useTheme = theme.useTheme(),
134
- typography = _useTheme.typography,
135
- utils = _useTheme.utils;
136
-
119
+ baseline = _ref$baseline === void 0 ? true : _ref$baseline,
120
+ size = _ref.size,
121
+ tone = _ref.tone,
122
+ weight = _ref.weight;
123
+ var theme$1 = theme.useTheme();
137
124
  var color = useForegroundTone(tone);
138
- var _typography$text$size = typography.text[size],
139
- mobile = _typography$text$size.mobile,
140
- tablet = _typography$text$size.tablet;
141
- var responsiveStyles = utils.responsiveStyles({
125
+ var _theme$typography$tex = theme$1.typography.text[size],
126
+ mobile = _theme$typography$tex.mobile,
127
+ tablet = _theme$typography$tex.tablet;
128
+ var responsiveStyles = theme$1.utils.responsiveStyles({
142
129
  mobile: createTextStyles(mobile, {
143
130
  includeTrims: baseline
144
131
  }),
@@ -148,20 +135,18 @@ function useText(_ref) {
148
135
  });
149
136
  var styles = [{
150
137
  color: color,
151
- fontFamily: typography.fontFamily.sans.name,
152
- fontWeight: typography.fontWeight[weight]
138
+ fontFamily: theme$1.typography.fontFamily.sans.name,
139
+ fontWeight: theme$1.typography.fontWeight[weight]
153
140
  }, responsiveStyles];
154
141
  return styles;
155
142
  }
156
143
  function createTextStyles(_ref2) {
157
144
  var fontSize = _ref2.fontSize,
158
- lineHeight = _ref2.lineHeight,
159
- trims = _ref2.trims;
160
-
145
+ lineHeight = _ref2.lineHeight,
146
+ trims = _ref2.trims;
161
147
  var _ref3 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
162
- _ref3$includeTrims = _ref3.includeTrims,
163
- includeTrims = _ref3$includeTrims === void 0 ? true : _ref3$includeTrims;
164
-
148
+ _ref3$includeTrims = _ref3.includeTrims,
149
+ includeTrims = _ref3$includeTrims === void 0 ? true : _ref3$includeTrims;
165
150
  var pseudo = {
166
151
  content: '" "',
167
152
  display: 'table'
@@ -183,32 +168,29 @@ function createTextStyles(_ref2) {
183
168
  var _excluded = ["as", "children", "data", "id", "align", "baseline", "inline", "overflowStrategy", "size", "tabularNumbers", "tone", "transform", "weight"];
184
169
  var Text = ts.forwardRefWithAs(function (_ref, forwardedRef) {
185
170
  var as = _ref.as,
186
- children = _ref.children,
187
- data = _ref.data,
188
- id = _ref.id,
189
- align = _ref.align,
190
- baselineProp = _ref.baseline,
191
- inline = _ref.inline,
192
- overflowStrategy = _ref.overflowStrategy,
193
- sizeProp = _ref.size,
194
- tabularNumbers = _ref.tabularNumbers,
195
- toneProp = _ref.tone,
196
- transform = _ref.transform,
197
- weightProp = _ref.weight,
198
- consumerProps = _objectWithoutProperties(_ref, _excluded);
199
-
171
+ children = _ref.children,
172
+ data = _ref.data,
173
+ id = _ref.id,
174
+ align = _ref.align,
175
+ baselineProp = _ref.baseline,
176
+ inline = _ref.inline,
177
+ overflowStrategy = _ref.overflowStrategy,
178
+ sizeProp = _ref.size,
179
+ tabularNumbers = _ref.tabularNumbers,
180
+ toneProp = _ref.tone,
181
+ transform = _ref.transform,
182
+ weightProp = _ref.weight,
183
+ consumerProps = _objectWithoutProperties(_ref, _excluded);
200
184
  var overflowStyles = useOverflowStrategy(overflowStrategy);
201
185
  var textContext = useTextContext();
202
-
203
186
  var _useDefaultTextProps = useDefaultTextProps({
204
- size: sizeProp !== null && sizeProp !== void 0 ? sizeProp : textContext === null || textContext === void 0 ? void 0 : textContext.size,
205
- tone: toneProp !== null && toneProp !== void 0 ? toneProp : textContext === null || textContext === void 0 ? void 0 : textContext.tone,
206
- weight: weightProp !== null && weightProp !== void 0 ? weightProp : textContext === null || textContext === void 0 ? void 0 : textContext.weight
207
- }),
208
- size = _useDefaultTextProps.size,
209
- tone = _useDefaultTextProps.tone,
210
- weight = _useDefaultTextProps.weight;
211
-
187
+ size: sizeProp !== null && sizeProp !== void 0 ? sizeProp : textContext === null || textContext === void 0 ? void 0 : textContext.size,
188
+ tone: toneProp !== null && toneProp !== void 0 ? toneProp : textContext === null || textContext === void 0 ? void 0 : textContext.tone,
189
+ weight: weightProp !== null && weightProp !== void 0 ? weightProp : textContext === null || textContext === void 0 ? void 0 : textContext.weight
190
+ }),
191
+ size = _useDefaultTextProps.size,
192
+ tone = _useDefaultTextProps.tone,
193
+ weight = _useDefaultTextProps.weight;
212
194
  var baseline = !inline && baselineProp;
213
195
  var textStyles = useText({
214
196
  baseline: baseline,
@@ -221,8 +203,9 @@ var Text = ts.forwardRefWithAs(function (_ref, forwardedRef) {
221
203
  fontVariantNumeric: tabularNumbers ? 'tabular-nums' : undefined,
222
204
  textAlign: align,
223
205
  textTransform: transform
224
- }]; // early exit for inline variant
206
+ }];
225
207
 
208
+ // early exit for inline variant
226
209
  if (inline) {
227
210
  return /*#__PURE__*/jsxRuntime.jsx(box.Box, _objectSpread(_objectSpread({}, consumerProps), {}, {
228
211
  as: as !== null && as !== void 0 ? as : 'span',
@@ -232,9 +215,9 @@ var Text = ts.forwardRefWithAs(function (_ref, forwardedRef) {
232
215
  className: css.css(styles),
233
216
  children: children
234
217
  }));
235
- } // prepare block variant
236
-
218
+ }
237
219
 
220
+ // prepare block variant
238
221
  var content = overflowStrategy ? /*#__PURE__*/jsxRuntime.jsx("span", {
239
222
  className: css.css(overflowStyles),
240
223
  children: children
package/dist/spark-web-text.cjs.prod.js CHANGED
@@ -23,9 +23,9 @@ var DefaultTextPropsContext = /*#__PURE__*/react.createContext({
23
23
  });
24
24
  function DefaultTextPropsProvider(_ref) {
25
25
  var children = _ref.children,
26
- size = _ref.size,
27
- tone = _ref.tone,
28
- weight = _ref.weight;
26
+ size = _ref.size,
27
+ tone = _ref.tone,
28
+ weight = _ref.weight;
29
29
  var defaultTextProps = react.useMemo(function () {
30
30
  return {
31
31
  size: size,
@@ -40,16 +40,13 @@ function DefaultTextPropsProvider(_ref) {
40
40
  }
41
41
  var useDefaultTextProps = function useDefaultTextProps(_ref2) {
42
42
  var _ref3, _ref4, _ref5;
43
-
44
43
  var sizeProp = _ref2.size,
45
- toneProp = _ref2.tone,
46
- weightProp = _ref2.weight;
47
-
44
+ toneProp = _ref2.tone,
45
+ weightProp = _ref2.weight;
48
46
  var _useContext = react.useContext(DefaultTextPropsContext),
49
- size = _useContext.size,
50
- tone = _useContext.tone,
51
- weight = _useContext.weight;
52
-
47
+ size = _useContext.size,
48
+ tone = _useContext.tone,
49
+ weight = _useContext.weight;
53
50
  return {
54
51
  size: (_ref3 = sizeProp !== null && sizeProp !== void 0 ? sizeProp : size) !== null && _ref3 !== void 0 ? _ref3 : 'standard',
55
52
  tone: (_ref4 = toneProp !== null && toneProp !== void 0 ? toneProp : tone) !== null && _ref4 !== void 0 ? _ref4 : 'neutral',
@@ -59,12 +56,9 @@ var useDefaultTextProps = function useDefaultTextProps(_ref2) {
59
56
 
60
57
  var Strong = function Strong(_ref) {
61
58
  var children = _ref.children;
62
-
63
- var _useTheme = theme.useTheme(),
64
- typography = _useTheme.typography;
65
-
59
+ var theme$1 = theme.useTheme();
66
60
  var styles = {
67
- fontWeight: typography.fontWeight.semibold
61
+ fontWeight: theme$1.typography.fontWeight.semibold
68
62
  };
69
63
  return /*#__PURE__*/jsxRuntime.jsx("strong", {
70
64
  className: css.css(styles),
@@ -94,7 +88,6 @@ function useOverflowStrategy(strategy) {
94
88
  if (!strategy) {
95
89
  return null;
96
90
  }
97
-
98
91
  return strategyMap[strategy];
99
92
  }
100
93
 
@@ -115,30 +108,24 @@ var invertableTones = {
115
108
  function useForegroundTone(tone) {
116
109
  var theme$1 = theme.useTheme();
117
110
  var backgroundLightness = box.useBackgroundLightness();
118
-
119
111
  if (tone in invertableTones) {
120
112
  return theme$1.color.foreground[invertableTones[tone][backgroundLightness]];
121
113
  }
122
-
123
114
  return theme$1.color.foreground[tone];
124
115
  }
125
116
 
126
117
  function useText(_ref) {
127
118
  var _ref$baseline = _ref.baseline,
128
- baseline = _ref$baseline === void 0 ? true : _ref$baseline,
129
- size = _ref.size,
130
- tone = _ref.tone,
131
- weight = _ref.weight;
132
-
133
- var _useTheme = theme.useTheme(),
134
- typography = _useTheme.typography,
135
- utils = _useTheme.utils;
136
-
119
+ baseline = _ref$baseline === void 0 ? true : _ref$baseline,
120
+ size = _ref.size,
121
+ tone = _ref.tone,
122
+ weight = _ref.weight;
123
+ var theme$1 = theme.useTheme();
137
124
  var color = useForegroundTone(tone);
138
- var _typography$text$size = typography.text[size],
139
- mobile = _typography$text$size.mobile,
140
- tablet = _typography$text$size.tablet;
141
- var responsiveStyles = utils.responsiveStyles({
125
+ var _theme$typography$tex = theme$1.typography.text[size],
126
+ mobile = _theme$typography$tex.mobile,
127
+ tablet = _theme$typography$tex.tablet;
128
+ var responsiveStyles = theme$1.utils.responsiveStyles({
142
129
  mobile: createTextStyles(mobile, {
143
130
  includeTrims: baseline
144
131
  }),
@@ -148,20 +135,18 @@ function useText(_ref) {
148
135
  });
149
136
  var styles = [{
150
137
  color: color,
151
- fontFamily: typography.fontFamily.sans.name,
152
- fontWeight: typography.fontWeight[weight]
138
+ fontFamily: theme$1.typography.fontFamily.sans.name,
139
+ fontWeight: theme$1.typography.fontWeight[weight]
153
140
  }, responsiveStyles];
154
141
  return styles;
155
142
  }
156
143
  function createTextStyles(_ref2) {
157
144
  var fontSize = _ref2.fontSize,
158
- lineHeight = _ref2.lineHeight,
159
- trims = _ref2.trims;
160
-
145
+ lineHeight = _ref2.lineHeight,
146
+ trims = _ref2.trims;
161
147
  var _ref3 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
162
- _ref3$includeTrims = _ref3.includeTrims,
163
- includeTrims = _ref3$includeTrims === void 0 ? true : _ref3$includeTrims;
164
-
148
+ _ref3$includeTrims = _ref3.includeTrims,
149
+ includeTrims = _ref3$includeTrims === void 0 ? true : _ref3$includeTrims;
165
150
  var pseudo = {
166
151
  content: '" "',
167
152
  display: 'table'
@@ -183,32 +168,29 @@ function createTextStyles(_ref2) {
183
168
  var _excluded = ["as", "children", "data", "id", "align", "baseline", "inline", "overflowStrategy", "size", "tabularNumbers", "tone", "transform", "weight"];
184
169
  var Text = ts.forwardRefWithAs(function (_ref, forwardedRef) {
185
170
  var as = _ref.as,
186
- children = _ref.children,
187
- data = _ref.data,
188
- id = _ref.id,
189
- align = _ref.align,
190
- baselineProp = _ref.baseline,
191
- inline = _ref.inline,
192
- overflowStrategy = _ref.overflowStrategy,
193
- sizeProp = _ref.size,
194
- tabularNumbers = _ref.tabularNumbers,
195
- toneProp = _ref.tone,
196
- transform = _ref.transform,
197
- weightProp = _ref.weight,
198
- consumerProps = _objectWithoutProperties(_ref, _excluded);
199
-
171
+ children = _ref.children,
172
+ data = _ref.data,
173
+ id = _ref.id,
174
+ align = _ref.align,
175
+ baselineProp = _ref.baseline,
176
+ inline = _ref.inline,
177
+ overflowStrategy = _ref.overflowStrategy,
178
+ sizeProp = _ref.size,
179
+ tabularNumbers = _ref.tabularNumbers,
180
+ toneProp = _ref.tone,
181
+ transform = _ref.transform,
182
+ weightProp = _ref.weight,
183
+ consumerProps = _objectWithoutProperties(_ref, _excluded);
200
184
  var overflowStyles = useOverflowStrategy(overflowStrategy);
201
185
  var textContext = useTextContext();
202
-
203
186
  var _useDefaultTextProps = useDefaultTextProps({
204
- size: sizeProp !== null && sizeProp !== void 0 ? sizeProp : textContext === null || textContext === void 0 ? void 0 : textContext.size,
205
- tone: toneProp !== null && toneProp !== void 0 ? toneProp : textContext === null || textContext === void 0 ? void 0 : textContext.tone,
206
- weight: weightProp !== null && weightProp !== void 0 ? weightProp : textContext === null || textContext === void 0 ? void 0 : textContext.weight
207
- }),
208
- size = _useDefaultTextProps.size,
209
- tone = _useDefaultTextProps.tone,
210
- weight = _useDefaultTextProps.weight;
211
-
187
+ size: sizeProp !== null && sizeProp !== void 0 ? sizeProp : textContext === null || textContext === void 0 ? void 0 : textContext.size,
188
+ tone: toneProp !== null && toneProp !== void 0 ? toneProp : textContext === null || textContext === void 0 ? void 0 : textContext.tone,
189
+ weight: weightProp !== null && weightProp !== void 0 ? weightProp : textContext === null || textContext === void 0 ? void 0 : textContext.weight
190
+ }),
191
+ size = _useDefaultTextProps.size,
192
+ tone = _useDefaultTextProps.tone,
193
+ weight = _useDefaultTextProps.weight;
212
194
  var baseline = !inline && baselineProp;
213
195
  var textStyles = useText({
214
196
  baseline: baseline,
@@ -221,8 +203,9 @@ var Text = ts.forwardRefWithAs(function (_ref, forwardedRef) {
221
203
  fontVariantNumeric: tabularNumbers ? 'tabular-nums' : undefined,
222
204
  textAlign: align,
223
205
  textTransform: transform
224
- }]; // early exit for inline variant
206
+ }];
225
207
 
208
+ // early exit for inline variant
226
209
  if (inline) {
227
210
  return /*#__PURE__*/jsxRuntime.jsx(box.Box, _objectSpread(_objectSpread({}, consumerProps), {}, {
228
211
  as: as !== null && as !== void 0 ? as : 'span',
@@ -232,9 +215,9 @@ var Text = ts.forwardRefWithAs(function (_ref, forwardedRef) {
232
215
  className: css.css(styles),
233
216
  children: children
234
217
  }));
235
- } // prepare block variant
236
-
218
+ }
237
219
 
220
+ // prepare block variant
238
221
  var content = overflowStrategy ? /*#__PURE__*/jsxRuntime.jsx("span", {
239
222
  className: css.css(overflowStyles),
240
223
  children: children
package/dist/spark-web-text.esm.js CHANGED
@@ -1,4 +1,4 @@
1
- import { useContext, createContext, useMemo } from 'react';
1
+ import { createContext, useContext, useMemo } from 'react';
2
2
  import { jsx } from 'react/jsx-runtime';
3
3
  import { css } from '@emotion/css';
4
4
  import { useTheme } from '@spark-web/theme';
@@ -19,9 +19,9 @@ var DefaultTextPropsContext = /*#__PURE__*/createContext({
19
19
  });
20
20
  function DefaultTextPropsProvider(_ref) {
21
21
  var children = _ref.children,
22
- size = _ref.size,
23
- tone = _ref.tone,
24
- weight = _ref.weight;
22
+ size = _ref.size,
23
+ tone = _ref.tone,
24
+ weight = _ref.weight;
25
25
  var defaultTextProps = useMemo(function () {
26
26
  return {
27
27
  size: size,
@@ -36,16 +36,13 @@ function DefaultTextPropsProvider(_ref) {
36
36
  }
37
37
  var useDefaultTextProps = function useDefaultTextProps(_ref2) {
38
38
  var _ref3, _ref4, _ref5;
39
-
40
39
  var sizeProp = _ref2.size,
41
- toneProp = _ref2.tone,
42
- weightProp = _ref2.weight;
43
-
40
+ toneProp = _ref2.tone,
41
+ weightProp = _ref2.weight;
44
42
  var _useContext = useContext(DefaultTextPropsContext),
45
- size = _useContext.size,
46
- tone = _useContext.tone,
47
- weight = _useContext.weight;
48
-
43
+ size = _useContext.size,
44
+ tone = _useContext.tone,
45
+ weight = _useContext.weight;
49
46
  return {
50
47
  size: (_ref3 = sizeProp !== null && sizeProp !== void 0 ? sizeProp : size) !== null && _ref3 !== void 0 ? _ref3 : 'standard',
51
48
  tone: (_ref4 = toneProp !== null && toneProp !== void 0 ? toneProp : tone) !== null && _ref4 !== void 0 ? _ref4 : 'neutral',
@@ -55,12 +52,9 @@ var useDefaultTextProps = function useDefaultTextProps(_ref2) {
55
52
 
56
53
  var Strong = function Strong(_ref) {
57
54
  var children = _ref.children;
58
-
59
- var _useTheme = useTheme(),
60
- typography = _useTheme.typography;
61
-
55
+ var theme = useTheme();
62
56
  var styles = {
63
- fontWeight: typography.fontWeight.semibold
57
+ fontWeight: theme.typography.fontWeight.semibold
64
58
  };
65
59
  return /*#__PURE__*/jsx("strong", {
66
60
  className: css(styles),
@@ -90,7 +84,6 @@ function useOverflowStrategy(strategy) {
90
84
  if (!strategy) {
91
85
  return null;
92
86
  }
93
-
94
87
  return strategyMap[strategy];
95
88
  }
96
89
 
@@ -111,30 +104,24 @@ var invertableTones = {
111
104
  function useForegroundTone(tone) {
112
105
  var theme = useTheme();
113
106
  var backgroundLightness = useBackgroundLightness();
114
-
115
107
  if (tone in invertableTones) {
116
108
  return theme.color.foreground[invertableTones[tone][backgroundLightness]];
117
109
  }
118
-
119
110
  return theme.color.foreground[tone];
120
111
  }
121
112
 
122
113
  function useText(_ref) {
123
114
  var _ref$baseline = _ref.baseline,
124
- baseline = _ref$baseline === void 0 ? true : _ref$baseline,
125
- size = _ref.size,
126
- tone = _ref.tone,
127
- weight = _ref.weight;
128
-
129
- var _useTheme = useTheme(),
130
- typography = _useTheme.typography,
131
- utils = _useTheme.utils;
132
-
115
+ baseline = _ref$baseline === void 0 ? true : _ref$baseline,
116
+ size = _ref.size,
117
+ tone = _ref.tone,
118
+ weight = _ref.weight;
119
+ var theme = useTheme();
133
120
  var color = useForegroundTone(tone);
134
- var _typography$text$size = typography.text[size],
135
- mobile = _typography$text$size.mobile,
136
- tablet = _typography$text$size.tablet;
137
- var responsiveStyles = utils.responsiveStyles({
121
+ var _theme$typography$tex = theme.typography.text[size],
122
+ mobile = _theme$typography$tex.mobile,
123
+ tablet = _theme$typography$tex.tablet;
124
+ var responsiveStyles = theme.utils.responsiveStyles({
138
125
  mobile: createTextStyles(mobile, {
139
126
  includeTrims: baseline
140
127
  }),
@@ -144,20 +131,18 @@ function useText(_ref) {
144
131
  });
145
132
  var styles = [{
146
133
  color: color,
147
- fontFamily: typography.fontFamily.sans.name,
148
- fontWeight: typography.fontWeight[weight]
134
+ fontFamily: theme.typography.fontFamily.sans.name,
135
+ fontWeight: theme.typography.fontWeight[weight]
149
136
  }, responsiveStyles];
150
137
  return styles;
151
138
  }
152
139
  function createTextStyles(_ref2) {
153
140
  var fontSize = _ref2.fontSize,
154
- lineHeight = _ref2.lineHeight,
155
- trims = _ref2.trims;
156
-
141
+ lineHeight = _ref2.lineHeight,
142
+ trims = _ref2.trims;
157
143
  var _ref3 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
158
- _ref3$includeTrims = _ref3.includeTrims,
159
- includeTrims = _ref3$includeTrims === void 0 ? true : _ref3$includeTrims;
160
-
144
+ _ref3$includeTrims = _ref3.includeTrims,
145
+ includeTrims = _ref3$includeTrims === void 0 ? true : _ref3$includeTrims;
161
146
  var pseudo = {
162
147
  content: '" "',
163
148
  display: 'table'
@@ -179,32 +164,29 @@ function createTextStyles(_ref2) {
179
164
  var _excluded = ["as", "children", "data", "id", "align", "baseline", "inline", "overflowStrategy", "size", "tabularNumbers", "tone", "transform", "weight"];
180
165
  var Text = forwardRefWithAs(function (_ref, forwardedRef) {
181
166
  var as = _ref.as,
182
- children = _ref.children,
183
- data = _ref.data,
184
- id = _ref.id,
185
- align = _ref.align,
186
- baselineProp = _ref.baseline,
187
- inline = _ref.inline,
188
- overflowStrategy = _ref.overflowStrategy,
189
- sizeProp = _ref.size,
190
- tabularNumbers = _ref.tabularNumbers,
191
- toneProp = _ref.tone,
192
- transform = _ref.transform,
193
- weightProp = _ref.weight,
194
- consumerProps = _objectWithoutProperties(_ref, _excluded);
195
-
167
+ children = _ref.children,
168
+ data = _ref.data,
169
+ id = _ref.id,
170
+ align = _ref.align,
171
+ baselineProp = _ref.baseline,
172
+ inline = _ref.inline,
173
+ overflowStrategy = _ref.overflowStrategy,
174
+ sizeProp = _ref.size,
175
+ tabularNumbers = _ref.tabularNumbers,
176
+ toneProp = _ref.tone,
177
+ transform = _ref.transform,
178
+ weightProp = _ref.weight,
179
+ consumerProps = _objectWithoutProperties(_ref, _excluded);
196
180
  var overflowStyles = useOverflowStrategy(overflowStrategy);
197
181
  var textContext = useTextContext();
198
-
199
182
  var _useDefaultTextProps = useDefaultTextProps({
200
- size: sizeProp !== null && sizeProp !== void 0 ? sizeProp : textContext === null || textContext === void 0 ? void 0 : textContext.size,
201
- tone: toneProp !== null && toneProp !== void 0 ? toneProp : textContext === null || textContext === void 0 ? void 0 : textContext.tone,
202
- weight: weightProp !== null && weightProp !== void 0 ? weightProp : textContext === null || textContext === void 0 ? void 0 : textContext.weight
203
- }),
204
- size = _useDefaultTextProps.size,
205
- tone = _useDefaultTextProps.tone,
206
- weight = _useDefaultTextProps.weight;
207
-
183
+ size: sizeProp !== null && sizeProp !== void 0 ? sizeProp : textContext === null || textContext === void 0 ? void 0 : textContext.size,
184
+ tone: toneProp !== null && toneProp !== void 0 ? toneProp : textContext === null || textContext === void 0 ? void 0 : textContext.tone,
185
+ weight: weightProp !== null && weightProp !== void 0 ? weightProp : textContext === null || textContext === void 0 ? void 0 : textContext.weight
186
+ }),
187
+ size = _useDefaultTextProps.size,
188
+ tone = _useDefaultTextProps.tone,
189
+ weight = _useDefaultTextProps.weight;
208
190
  var baseline = !inline && baselineProp;
209
191
  var textStyles = useText({
210
192
  baseline: baseline,
@@ -217,8 +199,9 @@ var Text = forwardRefWithAs(function (_ref, forwardedRef) {
217
199
  fontVariantNumeric: tabularNumbers ? 'tabular-nums' : undefined,
218
200
  textAlign: align,
219
201
  textTransform: transform
220
- }]; // early exit for inline variant
202
+ }];
221
203
 
204
+ // early exit for inline variant
222
205
  if (inline) {
223
206
  return /*#__PURE__*/jsx(Box, _objectSpread(_objectSpread({}, consumerProps), {}, {
224
207
  as: as !== null && as !== void 0 ? as : 'span',
@@ -228,9 +211,9 @@ var Text = forwardRefWithAs(function (_ref, forwardedRef) {
228
211
  className: css(styles),
229
212
  children: children
230
213
  }));
231
- } // prepare block variant
232
-
214
+ }
233
215
 
216
+ // prepare block variant
234
217
  var content = overflowStrategy ? /*#__PURE__*/jsx("span", {
235
218
  className: css(overflowStyles),
236
219
  children: children
package/package.json CHANGED
@@ -1,22 +1,29 @@
1
1
  {
2
2
  "name": "@spark-web/text",
3
- "version": "1.1.1",
4
- "license": "MIT",
3
+ "version": "1.2.0",
4
+ "homepage": "https://github.com/brighte-labs/spark-web#readme",
5
+ "repository": {
6
+ "type": "git",
7
+ "url": "https://github.com/brighte-labs/spark-web.git",
8
+ "directory": "packages/text"
9
+ },
5
10
  "main": "dist/spark-web-text.cjs.js",
6
11
  "module": "dist/spark-web-text.esm.js",
7
12
  "files": [
8
- "dist"
13
+ "CHANGELOG.md",
14
+ "dist",
15
+ "README.md"
9
16
  ],
10
17
  "dependencies": {
11
- "@babel/runtime": "^7.18.9",
18
+ "@babel/runtime": "^7.19.0",
12
19
  "@emotion/css": "^11.9.0",
13
- "@spark-web/box": "^1.0.9",
14
- "@spark-web/theme": "^3.0.6",
15
- "@spark-web/utils": "^1.2.2"
20
+ "@spark-web/box": "^1.2.0",
21
+ "@spark-web/theme": "^3.2.0",
22
+ "@spark-web/utils": "^1.3.0"
16
23
  },
17
24
  "devDependencies": {
18
- "@types/react": "^17.0.12",
19
- "react": "^17.0.2"
25
+ "@types/react": "^18.2.0",
26
+ "react": "^18.2.0"
20
27
  },
21
28
  "peerDependencies": {
22
29
  "react": ">=17.0.2"