@spark-web/text 1.1.2 → 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 (8) hide show
  1. package/CHANGELOG.md +17 -0
  2. package/dist/declarations/src/context.d.ts +2 -2
  3. package/dist/declarations/src/default-text-props.d.ts +1 -1
  4. package/dist/declarations/src/text.d.ts +1 -1
  5. package/dist/spark-web-text.cjs.dev.js +42 -52
  6. package/dist/spark-web-text.cjs.prod.js +42 -52
  7. package/dist/spark-web-text.esm.js +43 -53
  8. package/package.json +6 -6
package/CHANGELOG.md CHANGED
@@ -1,5 +1,22 @@
1
1
  # @spark-web/text
2
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
+
3
20
  ## 1.1.2
4
21
 
5
22
  ### Patch Changes
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/default-text-props.d.ts CHANGED
@@ -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/text.d.ts CHANGED
@@ -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/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',
@@ -91,7 +88,6 @@ function useOverflowStrategy(strategy) {
91
88
  if (!strategy) {
92
89
  return null;
93
90
  }
94
-
95
91
  return strategyMap[strategy];
96
92
  }
97
93
 
@@ -112,25 +108,23 @@ var invertableTones = {
112
108
  function useForegroundTone(tone) {
113
109
  var theme$1 = theme.useTheme();
114
110
  var backgroundLightness = box.useBackgroundLightness();
115
-
116
111
  if (tone in invertableTones) {
117
112
  return theme$1.color.foreground[invertableTones[tone][backgroundLightness]];
118
113
  }
119
-
120
114
  return theme$1.color.foreground[tone];
121
115
  }
122
116
 
123
117
  function useText(_ref) {
124
118
  var _ref$baseline = _ref.baseline,
125
- baseline = _ref$baseline === void 0 ? true : _ref$baseline,
126
- size = _ref.size,
127
- tone = _ref.tone,
128
- weight = _ref.weight;
119
+ baseline = _ref$baseline === void 0 ? true : _ref$baseline,
120
+ size = _ref.size,
121
+ tone = _ref.tone,
122
+ weight = _ref.weight;
129
123
  var theme$1 = theme.useTheme();
130
124
  var color = useForegroundTone(tone);
131
125
  var _theme$typography$tex = theme$1.typography.text[size],
132
- mobile = _theme$typography$tex.mobile,
133
- tablet = _theme$typography$tex.tablet;
126
+ mobile = _theme$typography$tex.mobile,
127
+ tablet = _theme$typography$tex.tablet;
134
128
  var responsiveStyles = theme$1.utils.responsiveStyles({
135
129
  mobile: createTextStyles(mobile, {
136
130
  includeTrims: baseline
@@ -148,13 +142,11 @@ function useText(_ref) {
148
142
  }
149
143
  function createTextStyles(_ref2) {
150
144
  var fontSize = _ref2.fontSize,
151
- lineHeight = _ref2.lineHeight,
152
- trims = _ref2.trims;
153
-
145
+ lineHeight = _ref2.lineHeight,
146
+ trims = _ref2.trims;
154
147
  var _ref3 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
155
- _ref3$includeTrims = _ref3.includeTrims,
156
- includeTrims = _ref3$includeTrims === void 0 ? true : _ref3$includeTrims;
157
-
148
+ _ref3$includeTrims = _ref3.includeTrims,
149
+ includeTrims = _ref3$includeTrims === void 0 ? true : _ref3$includeTrims;
158
150
  var pseudo = {
159
151
  content: '" "',
160
152
  display: 'table'
@@ -176,32 +168,29 @@ function createTextStyles(_ref2) {
176
168
  var _excluded = ["as", "children", "data", "id", "align", "baseline", "inline", "overflowStrategy", "size", "tabularNumbers", "tone", "transform", "weight"];
177
169
  var Text = ts.forwardRefWithAs(function (_ref, forwardedRef) {
178
170
  var as = _ref.as,
179
- children = _ref.children,
180
- data = _ref.data,
181
- id = _ref.id,
182
- align = _ref.align,
183
- baselineProp = _ref.baseline,
184
- inline = _ref.inline,
185
- overflowStrategy = _ref.overflowStrategy,
186
- sizeProp = _ref.size,
187
- tabularNumbers = _ref.tabularNumbers,
188
- toneProp = _ref.tone,
189
- transform = _ref.transform,
190
- weightProp = _ref.weight,
191
- consumerProps = _objectWithoutProperties(_ref, _excluded);
192
-
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);
193
184
  var overflowStyles = useOverflowStrategy(overflowStrategy);
194
185
  var textContext = useTextContext();
195
-
196
186
  var _useDefaultTextProps = useDefaultTextProps({
197
- size: sizeProp !== null && sizeProp !== void 0 ? sizeProp : textContext === null || textContext === void 0 ? void 0 : textContext.size,
198
- tone: toneProp !== null && toneProp !== void 0 ? toneProp : textContext === null || textContext === void 0 ? void 0 : textContext.tone,
199
- weight: weightProp !== null && weightProp !== void 0 ? weightProp : textContext === null || textContext === void 0 ? void 0 : textContext.weight
200
- }),
201
- size = _useDefaultTextProps.size,
202
- tone = _useDefaultTextProps.tone,
203
- weight = _useDefaultTextProps.weight;
204
-
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;
205
194
  var baseline = !inline && baselineProp;
206
195
  var textStyles = useText({
207
196
  baseline: baseline,
@@ -214,8 +203,9 @@ var Text = ts.forwardRefWithAs(function (_ref, forwardedRef) {
214
203
  fontVariantNumeric: tabularNumbers ? 'tabular-nums' : undefined,
215
204
  textAlign: align,
216
205
  textTransform: transform
217
- }]; // early exit for inline variant
206
+ }];
218
207
 
208
+ // early exit for inline variant
219
209
  if (inline) {
220
210
  return /*#__PURE__*/jsxRuntime.jsx(box.Box, _objectSpread(_objectSpread({}, consumerProps), {}, {
221
211
  as: as !== null && as !== void 0 ? as : 'span',
@@ -225,9 +215,9 @@ var Text = ts.forwardRefWithAs(function (_ref, forwardedRef) {
225
215
  className: css.css(styles),
226
216
  children: children
227
217
  }));
228
- } // prepare block variant
229
-
218
+ }
230
219
 
220
+ // prepare block variant
231
221
  var content = overflowStrategy ? /*#__PURE__*/jsxRuntime.jsx("span", {
232
222
  className: css.css(overflowStyles),
233
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',
@@ -91,7 +88,6 @@ function useOverflowStrategy(strategy) {
91
88
  if (!strategy) {
92
89
  return null;
93
90
  }
94
-
95
91
  return strategyMap[strategy];
96
92
  }
97
93
 
@@ -112,25 +108,23 @@ var invertableTones = {
112
108
  function useForegroundTone(tone) {
113
109
  var theme$1 = theme.useTheme();
114
110
  var backgroundLightness = box.useBackgroundLightness();
115
-
116
111
  if (tone in invertableTones) {
117
112
  return theme$1.color.foreground[invertableTones[tone][backgroundLightness]];
118
113
  }
119
-
120
114
  return theme$1.color.foreground[tone];
121
115
  }
122
116
 
123
117
  function useText(_ref) {
124
118
  var _ref$baseline = _ref.baseline,
125
- baseline = _ref$baseline === void 0 ? true : _ref$baseline,
126
- size = _ref.size,
127
- tone = _ref.tone,
128
- weight = _ref.weight;
119
+ baseline = _ref$baseline === void 0 ? true : _ref$baseline,
120
+ size = _ref.size,
121
+ tone = _ref.tone,
122
+ weight = _ref.weight;
129
123
  var theme$1 = theme.useTheme();
130
124
  var color = useForegroundTone(tone);
131
125
  var _theme$typography$tex = theme$1.typography.text[size],
132
- mobile = _theme$typography$tex.mobile,
133
- tablet = _theme$typography$tex.tablet;
126
+ mobile = _theme$typography$tex.mobile,
127
+ tablet = _theme$typography$tex.tablet;
134
128
  var responsiveStyles = theme$1.utils.responsiveStyles({
135
129
  mobile: createTextStyles(mobile, {
136
130
  includeTrims: baseline
@@ -148,13 +142,11 @@ function useText(_ref) {
148
142
  }
149
143
  function createTextStyles(_ref2) {
150
144
  var fontSize = _ref2.fontSize,
151
- lineHeight = _ref2.lineHeight,
152
- trims = _ref2.trims;
153
-
145
+ lineHeight = _ref2.lineHeight,
146
+ trims = _ref2.trims;
154
147
  var _ref3 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
155
- _ref3$includeTrims = _ref3.includeTrims,
156
- includeTrims = _ref3$includeTrims === void 0 ? true : _ref3$includeTrims;
157
-
148
+ _ref3$includeTrims = _ref3.includeTrims,
149
+ includeTrims = _ref3$includeTrims === void 0 ? true : _ref3$includeTrims;
158
150
  var pseudo = {
159
151
  content: '" "',
160
152
  display: 'table'
@@ -176,32 +168,29 @@ function createTextStyles(_ref2) {
176
168
  var _excluded = ["as", "children", "data", "id", "align", "baseline", "inline", "overflowStrategy", "size", "tabularNumbers", "tone", "transform", "weight"];
177
169
  var Text = ts.forwardRefWithAs(function (_ref, forwardedRef) {
178
170
  var as = _ref.as,
179
- children = _ref.children,
180
- data = _ref.data,
181
- id = _ref.id,
182
- align = _ref.align,
183
- baselineProp = _ref.baseline,
184
- inline = _ref.inline,
185
- overflowStrategy = _ref.overflowStrategy,
186
- sizeProp = _ref.size,
187
- tabularNumbers = _ref.tabularNumbers,
188
- toneProp = _ref.tone,
189
- transform = _ref.transform,
190
- weightProp = _ref.weight,
191
- consumerProps = _objectWithoutProperties(_ref, _excluded);
192
-
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);
193
184
  var overflowStyles = useOverflowStrategy(overflowStrategy);
194
185
  var textContext = useTextContext();
195
-
196
186
  var _useDefaultTextProps = useDefaultTextProps({
197
- size: sizeProp !== null && sizeProp !== void 0 ? sizeProp : textContext === null || textContext === void 0 ? void 0 : textContext.size,
198
- tone: toneProp !== null && toneProp !== void 0 ? toneProp : textContext === null || textContext === void 0 ? void 0 : textContext.tone,
199
- weight: weightProp !== null && weightProp !== void 0 ? weightProp : textContext === null || textContext === void 0 ? void 0 : textContext.weight
200
- }),
201
- size = _useDefaultTextProps.size,
202
- tone = _useDefaultTextProps.tone,
203
- weight = _useDefaultTextProps.weight;
204
-
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;
205
194
  var baseline = !inline && baselineProp;
206
195
  var textStyles = useText({
207
196
  baseline: baseline,
@@ -214,8 +203,9 @@ var Text = ts.forwardRefWithAs(function (_ref, forwardedRef) {
214
203
  fontVariantNumeric: tabularNumbers ? 'tabular-nums' : undefined,
215
204
  textAlign: align,
216
205
  textTransform: transform
217
- }]; // early exit for inline variant
206
+ }];
218
207
 
208
+ // early exit for inline variant
219
209
  if (inline) {
220
210
  return /*#__PURE__*/jsxRuntime.jsx(box.Box, _objectSpread(_objectSpread({}, consumerProps), {}, {
221
211
  as: as !== null && as !== void 0 ? as : 'span',
@@ -225,9 +215,9 @@ var Text = ts.forwardRefWithAs(function (_ref, forwardedRef) {
225
215
  className: css.css(styles),
226
216
  children: children
227
217
  }));
228
- } // prepare block variant
229
-
218
+ }
230
219
 
220
+ // prepare block variant
231
221
  var content = overflowStrategy ? /*#__PURE__*/jsxRuntime.jsx("span", {
232
222
  className: css.css(overflowStyles),
233
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',
@@ -87,7 +84,6 @@ function useOverflowStrategy(strategy) {
87
84
  if (!strategy) {
88
85
  return null;
89
86
  }
90
-
91
87
  return strategyMap[strategy];
92
88
  }
93
89
 
@@ -108,25 +104,23 @@ var invertableTones = {
108
104
  function useForegroundTone(tone) {
109
105
  var theme = useTheme();
110
106
  var backgroundLightness = useBackgroundLightness();
111
-
112
107
  if (tone in invertableTones) {
113
108
  return theme.color.foreground[invertableTones[tone][backgroundLightness]];
114
109
  }
115
-
116
110
  return theme.color.foreground[tone];
117
111
  }
118
112
 
119
113
  function useText(_ref) {
120
114
  var _ref$baseline = _ref.baseline,
121
- baseline = _ref$baseline === void 0 ? true : _ref$baseline,
122
- size = _ref.size,
123
- tone = _ref.tone,
124
- weight = _ref.weight;
115
+ baseline = _ref$baseline === void 0 ? true : _ref$baseline,
116
+ size = _ref.size,
117
+ tone = _ref.tone,
118
+ weight = _ref.weight;
125
119
  var theme = useTheme();
126
120
  var color = useForegroundTone(tone);
127
121
  var _theme$typography$tex = theme.typography.text[size],
128
- mobile = _theme$typography$tex.mobile,
129
- tablet = _theme$typography$tex.tablet;
122
+ mobile = _theme$typography$tex.mobile,
123
+ tablet = _theme$typography$tex.tablet;
130
124
  var responsiveStyles = theme.utils.responsiveStyles({
131
125
  mobile: createTextStyles(mobile, {
132
126
  includeTrims: baseline
@@ -144,13 +138,11 @@ function useText(_ref) {
144
138
  }
145
139
  function createTextStyles(_ref2) {
146
140
  var fontSize = _ref2.fontSize,
147
- lineHeight = _ref2.lineHeight,
148
- trims = _ref2.trims;
149
-
141
+ lineHeight = _ref2.lineHeight,
142
+ trims = _ref2.trims;
150
143
  var _ref3 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
151
- _ref3$includeTrims = _ref3.includeTrims,
152
- includeTrims = _ref3$includeTrims === void 0 ? true : _ref3$includeTrims;
153
-
144
+ _ref3$includeTrims = _ref3.includeTrims,
145
+ includeTrims = _ref3$includeTrims === void 0 ? true : _ref3$includeTrims;
154
146
  var pseudo = {
155
147
  content: '" "',
156
148
  display: 'table'
@@ -172,32 +164,29 @@ function createTextStyles(_ref2) {
172
164
  var _excluded = ["as", "children", "data", "id", "align", "baseline", "inline", "overflowStrategy", "size", "tabularNumbers", "tone", "transform", "weight"];
173
165
  var Text = forwardRefWithAs(function (_ref, forwardedRef) {
174
166
  var as = _ref.as,
175
- children = _ref.children,
176
- data = _ref.data,
177
- id = _ref.id,
178
- align = _ref.align,
179
- baselineProp = _ref.baseline,
180
- inline = _ref.inline,
181
- overflowStrategy = _ref.overflowStrategy,
182
- sizeProp = _ref.size,
183
- tabularNumbers = _ref.tabularNumbers,
184
- toneProp = _ref.tone,
185
- transform = _ref.transform,
186
- weightProp = _ref.weight,
187
- consumerProps = _objectWithoutProperties(_ref, _excluded);
188
-
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);
189
180
  var overflowStyles = useOverflowStrategy(overflowStrategy);
190
181
  var textContext = useTextContext();
191
-
192
182
  var _useDefaultTextProps = useDefaultTextProps({
193
- size: sizeProp !== null && sizeProp !== void 0 ? sizeProp : textContext === null || textContext === void 0 ? void 0 : textContext.size,
194
- tone: toneProp !== null && toneProp !== void 0 ? toneProp : textContext === null || textContext === void 0 ? void 0 : textContext.tone,
195
- weight: weightProp !== null && weightProp !== void 0 ? weightProp : textContext === null || textContext === void 0 ? void 0 : textContext.weight
196
- }),
197
- size = _useDefaultTextProps.size,
198
- tone = _useDefaultTextProps.tone,
199
- weight = _useDefaultTextProps.weight;
200
-
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;
201
190
  var baseline = !inline && baselineProp;
202
191
  var textStyles = useText({
203
192
  baseline: baseline,
@@ -210,8 +199,9 @@ var Text = forwardRefWithAs(function (_ref, forwardedRef) {
210
199
  fontVariantNumeric: tabularNumbers ? 'tabular-nums' : undefined,
211
200
  textAlign: align,
212
201
  textTransform: transform
213
- }]; // early exit for inline variant
202
+ }];
214
203
 
204
+ // early exit for inline variant
215
205
  if (inline) {
216
206
  return /*#__PURE__*/jsx(Box, _objectSpread(_objectSpread({}, consumerProps), {}, {
217
207
  as: as !== null && as !== void 0 ? as : 'span',
@@ -221,9 +211,9 @@ var Text = forwardRefWithAs(function (_ref, forwardedRef) {
221
211
  className: css(styles),
222
212
  children: children
223
213
  }));
224
- } // prepare block variant
225
-
214
+ }
226
215
 
216
+ // prepare block variant
227
217
  var content = overflowStrategy ? /*#__PURE__*/jsx("span", {
228
218
  className: css(overflowStyles),
229
219
  children: children
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spark-web/text",
3
- "version": "1.1.2",
3
+ "version": "1.2.0",
4
4
  "homepage": "https://github.com/brighte-labs/spark-web#readme",
5
5
  "repository": {
6
6
  "type": "git",
@@ -17,13 +17,13 @@
17
17
  "dependencies": {
18
18
  "@babel/runtime": "^7.19.0",
19
19
  "@emotion/css": "^11.9.0",
20
- "@spark-web/box": "^1.1.0",
21
- "@spark-web/theme": "^3.1.0",
22
- "@spark-web/utils": "^1.2.3"
20
+ "@spark-web/box": "^1.2.0",
21
+ "@spark-web/theme": "^3.2.0",
22
+ "@spark-web/utils": "^1.3.0"
23
23
  },
24
24
  "devDependencies": {
25
- "@types/react": "^17.0.12",
26
- "react": "^17.0.2"
25
+ "@types/react": "^18.2.0",
26
+ "react": "^18.2.0"
27
27
  },
28
28
  "peerDependencies": {
29
29
  "react": ">=17.0.2"