@spark-web/text 5.1.0 → 5.2.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @spark-web/text
 
+## 5.2.0
+
+### Minor Changes
+
+- [#554](https://github.com/brighte-labs/spark-web/pull/554)
+  [`8e67e65`](https://github.com/brighte-labs/spark-web/commit/8e67e658cff29a4819417142c989f3c3de1e46c1)
+  Thanks [@ralcoriza-brighte](https://github.com/ralcoriza-brighte)! - Add
+  support for `css` prop in <Text />
+
+  Fixed issues with the `weight` prop in text
+
 ## 5.1.0
 
 ### Minor Changes

package/dist/declarations/src/context.d.ts

@@ -2,10 +2,10 @@
 export declare const TextContext: import("react").Context<{
     size: import("@spark-web/theme/src/themes/_types/typography").TypographySizing;
     tone: string | number;
-    weight: "bold" | "medium" | "light" | "thin" | "black" | "extralight" | "regular" | "semibold" | "extrabold";
+    weight: "bold" | "medium" | "light" | "thin" | "black" | "extralight" | "regular" | "semibold" | "extrabold" | undefined;
 } | undefined>;
 export declare function useTextContext(): {
     size: import("@spark-web/theme/src/themes/_types/typography").TypographySizing;
     tone: string | number;
-    weight: "bold" | "medium" | "light" | "thin" | "black" | "extralight" | "regular" | "semibold" | "extrabold";
+    weight: "bold" | "medium" | "light" | "thin" | "black" | "extralight" | "regular" | "semibold" | "extrabold" | undefined;
 } | undefined;

package/dist/declarations/src/default-text-props.d.ts

@@ -11,6 +11,6 @@ export declare function DefaultTextPropsProvider({ children, size, tone, weight,
 export declare const useDefaultTextProps: ({ size: sizeProp, tone: toneProp, weight: weightProp, }: DefaultTextProps) => {
     size: import("@spark-web/theme/src/themes/_types/typography").TypographySizing;
     tone: string | number;
-    weight: "bold" | "medium" | "light" | "thin" | "black" | "extralight" | "regular" | "semibold" | "extrabold";
+    weight: "bold" | "medium" | "light" | "thin" | "black" | "extralight" | "regular" | "semibold" | "extrabold" | undefined;
 };
 export {};

package/dist/declarations/src/text.d.ts

@@ -1,3 +1,5 @@
+/** @jsxImportSource @emotion/react */
+import type { CSSObject } from '@emotion/react';
 import type { BoxProps } from '@spark-web/box';
 import type { DataAttributeMap } from '@spark-web/utils/internal';
 import type { CSSProperties, ReactNode } from 'react';
@@ -19,6 +21,8 @@ declare type BlockProps = {
 export declare type TextProps = Partial<UseTextProps> & {
     /** The text content. */
     children?: ReactNode;
+    /** Customizes the component element. */
+    css?: CSSObject;
     /** Sets data attributes on the component. */
     data?: DataAttributeMap;
     /** An identifier which must be unique in the whole document. */

package/dist/declarations/src/use-text.d.ts

@@ -8,11 +8,12 @@ export declare type UseTextProps = {
     /** The tone of the text. */
     tone: ForegroundTone;
     /** The weight of the text. */
-    weight: keyof SparkTheme['typography']['fontWeight'];
+    weight?: keyof SparkTheme['typography']['fontWeight'];
 };
 export declare function useText({ baseline, size, tone, weight }: UseTextProps): (import("@emotion/serialize").CSSObject | undefined)[];
-export declare function createTextStyles({ fontSize, fontWeight, lineHeight, trims }: SparkTextDefinition, { includeTrims }?: {
+export declare function createTextStyles({ fontSize, fontWeight, lineHeight, trims }: SparkTextDefinition, { includeTrims, includeWeight }?: {
     includeTrims?: boolean | undefined;
+    includeWeight?: boolean | undefined;
 }): {
     '::before'?: {
         marginBottom: string;
@@ -25,6 +26,6 @@ export declare function createTextStyles({ fontSize, fontWeight, lineHeight, tri
         display: string;
     } | undefined;
     fontSize: string;
-    fontWeight: number;
+    fontWeight: number | undefined;
     lineHeight: string;
 };

package/dist/spark-web-text.cjs.dev.js

@@ -39,7 +39,7 @@ function DefaultTextPropsProvider(_ref) {
   });
 }
 var useDefaultTextProps = function useDefaultTextProps(_ref2) {
-  var _ref3, _ref4, _ref5;
+  var _ref3, _ref4;
   var sizeProp = _ref2.size,
     toneProp = _ref2.tone,
     weightProp = _ref2.weight;
@@ -50,7 +50,7 @@ var useDefaultTextProps = function useDefaultTextProps(_ref2) {
   return {
     size: (_ref3 = sizeProp !== null && sizeProp !== void 0 ? sizeProp : size) !== null && _ref3 !== void 0 ? _ref3 : 'standard',
     tone: (_ref4 = toneProp !== null && toneProp !== void 0 ? toneProp : tone) !== null && _ref4 !== void 0 ? _ref4 : 'neutral',
-    weight: (_ref5 = weightProp !== null && weightProp !== void 0 ? weightProp : weight) !== null && _ref5 !== void 0 ? _ref5 : 'regular'
+    weight: weightProp !== null && weightProp !== void 0 ? weightProp : weight
   };
 };
 
@@ -127,17 +127,19 @@ function useText(_ref) {
     tablet = _theme$typography$tex.tablet;
   var responsiveStyles = theme$1.utils.responsiveStyles({
     mobile: createTextStyles(mobile, {
-      includeTrims: baseline
+      includeTrims: baseline,
+      includeWeight: !weight
     }),
     tablet: createTextStyles(tablet, {
-      includeTrims: baseline
+      includeTrims: baseline,
+      includeWeight: !weight
     })
   });
-  var styles = [{
+  var styles = [responsiveStyles, {
     color: color,
     fontFamily: theme$1.typography.fontFamily.sans.name,
-    fontWeight: theme$1.typography.fontWeight[weight]
-  }, responsiveStyles];
+    fontWeight: weight ? theme$1.typography.fontWeight[weight] : undefined
+  }];
   return styles;
 }
 function createTextStyles(_ref2) {
@@ -147,7 +149,9 @@ function createTextStyles(_ref2) {
     trims = _ref2.trims;
   var _ref3 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
     _ref3$includeTrims = _ref3.includeTrims,
-    includeTrims = _ref3$includeTrims === void 0 ? true : _ref3$includeTrims;
+    includeTrims = _ref3$includeTrims === void 0 ? true : _ref3$includeTrims,
+    _ref3$includeWeight = _ref3.includeWeight,
+    includeWeight = _ref3$includeWeight === void 0 ? true : _ref3$includeWeight;
   var pseudo = {
     content: '" "',
     display: 'table'
@@ -162,12 +166,12 @@ function createTextStyles(_ref2) {
   } : null;
   return _objectSpread({
     fontSize: fontSize,
-    fontWeight: fontWeight,
+    fontWeight: includeWeight ? fontWeight : undefined,
     lineHeight: lineHeight
   }, leadingTrim);
 }
 
-var _excluded = ["as", "children", "data", "id", "align", "baseline", "inline", "overflowStrategy", "size", "tabularNumbers", "tone", "transform", "weight"];
+var _excluded = ["as", "children", "data", "id", "align", "baseline", "css", "inline", "overflowStrategy", "size", "tabularNumbers", "tone", "transform", "weight"];
 var Text = ts.forwardRefWithAs(function (_ref, forwardedRef) {
   var as = _ref.as,
     children = _ref.children,
@@ -175,6 +179,7 @@ var Text = ts.forwardRefWithAs(function (_ref, forwardedRef) {
     id = _ref.id,
     align = _ref.align,
     baselineProp = _ref.baseline,
+    cssProps = _ref.css,
     inline = _ref.inline,
     overflowStrategy = _ref.overflowStrategy,
     sizeProp = _ref.size,
@@ -214,7 +219,7 @@ var Text = ts.forwardRefWithAs(function (_ref, forwardedRef) {
       data: data,
       ref: forwardedRef,
       id: id,
-      css: react$1.css(styles),
+      css: react$1.css(styles, cssProps),
       children: children
     }));
   }
@@ -240,7 +245,7 @@ var Text = ts.forwardRefWithAs(function (_ref, forwardedRef) {
       data: data,
       ref: forwardedRef,
       id: id,
-      css: react$1.css(styles),
+      css: react$1.css(styles, cssProps),
       children: content
     }))
   });

package/dist/spark-web-text.cjs.prod.js

@@ -39,7 +39,7 @@ function DefaultTextPropsProvider(_ref) {
   });
 }
 var useDefaultTextProps = function useDefaultTextProps(_ref2) {
-  var _ref3, _ref4, _ref5;
+  var _ref3, _ref4;
   var sizeProp = _ref2.size,
     toneProp = _ref2.tone,
     weightProp = _ref2.weight;
@@ -50,7 +50,7 @@ var useDefaultTextProps = function useDefaultTextProps(_ref2) {
   return {
     size: (_ref3 = sizeProp !== null && sizeProp !== void 0 ? sizeProp : size) !== null && _ref3 !== void 0 ? _ref3 : 'standard',
     tone: (_ref4 = toneProp !== null && toneProp !== void 0 ? toneProp : tone) !== null && _ref4 !== void 0 ? _ref4 : 'neutral',
-    weight: (_ref5 = weightProp !== null && weightProp !== void 0 ? weightProp : weight) !== null && _ref5 !== void 0 ? _ref5 : 'regular'
+    weight: weightProp !== null && weightProp !== void 0 ? weightProp : weight
   };
 };
 
@@ -127,17 +127,19 @@ function useText(_ref) {
     tablet = _theme$typography$tex.tablet;
   var responsiveStyles = theme$1.utils.responsiveStyles({
     mobile: createTextStyles(mobile, {
-      includeTrims: baseline
+      includeTrims: baseline,
+      includeWeight: !weight
     }),
     tablet: createTextStyles(tablet, {
-      includeTrims: baseline
+      includeTrims: baseline,
+      includeWeight: !weight
     })
   });
-  var styles = [{
+  var styles = [responsiveStyles, {
     color: color,
     fontFamily: theme$1.typography.fontFamily.sans.name,
-    fontWeight: theme$1.typography.fontWeight[weight]
-  }, responsiveStyles];
+    fontWeight: weight ? theme$1.typography.fontWeight[weight] : undefined
+  }];
   return styles;
 }
 function createTextStyles(_ref2) {
@@ -147,7 +149,9 @@ function createTextStyles(_ref2) {
     trims = _ref2.trims;
   var _ref3 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
     _ref3$includeTrims = _ref3.includeTrims,
-    includeTrims = _ref3$includeTrims === void 0 ? true : _ref3$includeTrims;
+    includeTrims = _ref3$includeTrims === void 0 ? true : _ref3$includeTrims,
+    _ref3$includeWeight = _ref3.includeWeight,
+    includeWeight = _ref3$includeWeight === void 0 ? true : _ref3$includeWeight;
   var pseudo = {
     content: '" "',
     display: 'table'
@@ -162,12 +166,12 @@ function createTextStyles(_ref2) {
   } : null;
   return _objectSpread({
     fontSize: fontSize,
-    fontWeight: fontWeight,
+    fontWeight: includeWeight ? fontWeight : undefined,
     lineHeight: lineHeight
   }, leadingTrim);
 }
 
-var _excluded = ["as", "children", "data", "id", "align", "baseline", "inline", "overflowStrategy", "size", "tabularNumbers", "tone", "transform", "weight"];
+var _excluded = ["as", "children", "data", "id", "align", "baseline", "css", "inline", "overflowStrategy", "size", "tabularNumbers", "tone", "transform", "weight"];
 var Text = ts.forwardRefWithAs(function (_ref, forwardedRef) {
   var as = _ref.as,
     children = _ref.children,
@@ -175,6 +179,7 @@ var Text = ts.forwardRefWithAs(function (_ref, forwardedRef) {
     id = _ref.id,
     align = _ref.align,
     baselineProp = _ref.baseline,
+    cssProps = _ref.css,
     inline = _ref.inline,
     overflowStrategy = _ref.overflowStrategy,
     sizeProp = _ref.size,
@@ -214,7 +219,7 @@ var Text = ts.forwardRefWithAs(function (_ref, forwardedRef) {
       data: data,
       ref: forwardedRef,
       id: id,
-      css: react$1.css(styles),
+      css: react$1.css(styles, cssProps),
       children: children
     }));
   }
@@ -240,7 +245,7 @@ var Text = ts.forwardRefWithAs(function (_ref, forwardedRef) {
       data: data,
       ref: forwardedRef,
       id: id,
-      css: react$1.css(styles),
+      css: react$1.css(styles, cssProps),
       children: content
     }))
   });

package/dist/spark-web-text.esm.js

@@ -35,7 +35,7 @@ function DefaultTextPropsProvider(_ref) {
   });
 }
 var useDefaultTextProps = function useDefaultTextProps(_ref2) {
-  var _ref3, _ref4, _ref5;
+  var _ref3, _ref4;
   var sizeProp = _ref2.size,
     toneProp = _ref2.tone,
     weightProp = _ref2.weight;
@@ -46,7 +46,7 @@ var useDefaultTextProps = function useDefaultTextProps(_ref2) {
   return {
     size: (_ref3 = sizeProp !== null && sizeProp !== void 0 ? sizeProp : size) !== null && _ref3 !== void 0 ? _ref3 : 'standard',
     tone: (_ref4 = toneProp !== null && toneProp !== void 0 ? toneProp : tone) !== null && _ref4 !== void 0 ? _ref4 : 'neutral',
-    weight: (_ref5 = weightProp !== null && weightProp !== void 0 ? weightProp : weight) !== null && _ref5 !== void 0 ? _ref5 : 'regular'
+    weight: weightProp !== null && weightProp !== void 0 ? weightProp : weight
   };
 };
 
@@ -123,17 +123,19 @@ function useText(_ref) {
     tablet = _theme$typography$tex.tablet;
   var responsiveStyles = theme.utils.responsiveStyles({
     mobile: createTextStyles(mobile, {
-      includeTrims: baseline
+      includeTrims: baseline,
+      includeWeight: !weight
     }),
     tablet: createTextStyles(tablet, {
-      includeTrims: baseline
+      includeTrims: baseline,
+      includeWeight: !weight
     })
   });
-  var styles = [{
+  var styles = [responsiveStyles, {
     color: color,
     fontFamily: theme.typography.fontFamily.sans.name,
-    fontWeight: theme.typography.fontWeight[weight]
-  }, responsiveStyles];
+    fontWeight: weight ? theme.typography.fontWeight[weight] : undefined
+  }];
   return styles;
 }
 function createTextStyles(_ref2) {
@@ -143,7 +145,9 @@ function createTextStyles(_ref2) {
     trims = _ref2.trims;
   var _ref3 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
     _ref3$includeTrims = _ref3.includeTrims,
-    includeTrims = _ref3$includeTrims === void 0 ? true : _ref3$includeTrims;
+    includeTrims = _ref3$includeTrims === void 0 ? true : _ref3$includeTrims,
+    _ref3$includeWeight = _ref3.includeWeight,
+    includeWeight = _ref3$includeWeight === void 0 ? true : _ref3$includeWeight;
   var pseudo = {
     content: '" "',
     display: 'table'
@@ -158,12 +162,12 @@ function createTextStyles(_ref2) {
   } : null;
   return _objectSpread({
     fontSize: fontSize,
-    fontWeight: fontWeight,
+    fontWeight: includeWeight ? fontWeight : undefined,
     lineHeight: lineHeight
   }, leadingTrim);
 }
 
-var _excluded = ["as", "children", "data", "id", "align", "baseline", "inline", "overflowStrategy", "size", "tabularNumbers", "tone", "transform", "weight"];
+var _excluded = ["as", "children", "data", "id", "align", "baseline", "css", "inline", "overflowStrategy", "size", "tabularNumbers", "tone", "transform", "weight"];
 var Text = forwardRefWithAs(function (_ref, forwardedRef) {
   var as = _ref.as,
     children = _ref.children,
@@ -171,6 +175,7 @@ var Text = forwardRefWithAs(function (_ref, forwardedRef) {
     id = _ref.id,
     align = _ref.align,
     baselineProp = _ref.baseline,
+    cssProps = _ref.css,
     inline = _ref.inline,
     overflowStrategy = _ref.overflowStrategy,
     sizeProp = _ref.size,
@@ -210,7 +215,7 @@ var Text = forwardRefWithAs(function (_ref, forwardedRef) {
       data: data,
       ref: forwardedRef,
       id: id,
-      css: css(styles),
+      css: css(styles, cssProps),
       children: children
     }));
   }
@@ -236,7 +241,7 @@ var Text = forwardRefWithAs(function (_ref, forwardedRef) {
       data: data,
       ref: forwardedRef,
       id: id,
-      css: css(styles),
+      css: css(styles, cssProps),
       children: content
     }))
   });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spark-web/text",
-  "version": "5.1.0",
+  "version": "5.2.0",
   "homepage": "https://github.com/brighte-labs/spark-web#readme",
   "repository": {
     "type": "git",