@spark-web/text 1.0.5 → 1.1.0

package/README.md

@@ -1,6 +1,7 @@
 ---
 title: Text
 storybookPath: typography-text--default
+isExperimentalPackage: false
 ---
 
 Constrained, purposeful text styles as a component.
@@ -150,6 +151,8 @@ tones “neutral” and “muted” will be inverted.
 | transform?        | CSSProperties['textTransform']                                  |         | Transforms the text casing.                                                  |
 | weight?           | keyof [BrighteTheme][brighte-theme]['typography']['fontweight'] |         | The weight of the text.                                                      |
 
+Extra props are also passed into the underlying [`Box`](/package/box) component.
+
 [brighte-theme]:
   https://github.com/brighte-labs/spark-web/blob/e503bea4f7668d187ec7a78f99c5ed374417588b/packages/theme/src/makeTheme.ts#L158
 [data-attribute-map]:

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

@@ -30,6 +30,6 @@ export declare type TextProps = Partial<UseTextProps> & {
 } & (InlineProps | BlockProps);
 export declare const Text: <Comp extends import("react").ElementType<any> = "div">(props: {
     as?: Comp | undefined;
-    ref?: import("react").Ref<Comp extends "symbol" | "text" | "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" | "textPath" | "tspan" | "use" | "view" | keyof HTMLElementTagNameMap | "set" ? (HTMLElementTagNameMap & Pick<SVGElementTagNameMap, "symbol" | "text" | "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" | "textPath" | "tspan" | "use" | "view" | "set">)[Comp] : Comp extends new (...args: any) => any ? InstanceType<Comp> : undefined> | undefined;
+    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;
 } & Omit<import("react").PropsWithoutRef<import("react").ComponentProps<Comp>>, "as"> & TextProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
 export {};

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

@@ -1,11 +1,11 @@
 /// <reference types="react" />
 export declare const TextContext: import("react").Context<{
-    size: "xsmall" | "small" | "standard" | "large";
-    tone: "caution" | "critical" | "info" | "positive" | "muted" | "disabled" | "fieldAccent" | "accent" | "neutral" | "primary" | "secondary" | "link" | "placeholder" | "primaryHover" | "primaryActive" | "secondaryHover" | "secondaryActive";
+    size: "small" | "xsmall" | "standard" | "large";
+    tone: "link" | "muted" | "disabled" | "fieldAccent" | "accent" | "neutral" | "primary" | "secondary" | "caution" | "critical" | "info" | "positive" | "placeholder" | "primaryHover" | "primaryActive" | "secondaryHover" | "secondaryActive";
     weight: "regular" | "semibold";
 } | undefined>;
 export declare function useTextContext(): {
-    size: "xsmall" | "small" | "standard" | "large";
-    tone: "caution" | "critical" | "info" | "positive" | "muted" | "disabled" | "fieldAccent" | "accent" | "neutral" | "primary" | "secondary" | "link" | "placeholder" | "primaryHover" | "primaryActive" | "secondaryHover" | "secondaryActive";
+    size: "small" | "xsmall" | "standard" | "large";
+    tone: "link" | "muted" | "disabled" | "fieldAccent" | "accent" | "neutral" | "primary" | "secondary" | "caution" | "critical" | "info" | "positive" | "placeholder" | "primaryHover" | "primaryActive" | "secondaryHover" | "secondaryActive";
     weight: "regular" | "semibold";
 } | undefined;

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

@@ -9,8 +9,8 @@ export declare function DefaultTextPropsProvider({ children, size, tone, weight,
     children: ReactNode;
 }): JSX.Element;
 export declare const useDefaultTextProps: ({ size: sizeProp, tone: toneProp, weight: weightProp, }: DefaultTextProps) => {
-    size: "xsmall" | "small" | "standard" | "large";
-    tone: "caution" | "critical" | "info" | "positive" | "muted" | "disabled" | "fieldAccent" | "accent" | "neutral" | "primary" | "secondary" | "link" | "placeholder" | "primaryHover" | "primaryActive" | "secondaryHover" | "secondaryActive";
+    size: "small" | "xsmall" | "standard" | "large";
+    tone: "link" | "muted" | "disabled" | "fieldAccent" | "accent" | "neutral" | "primary" | "secondary" | "caution" | "critical" | "info" | "positive" | "placeholder" | "primaryHover" | "primaryActive" | "secondaryHover" | "secondaryActive";
     weight: "regular" | "semibold";
 };
 export {};

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

@@ -6,9 +6,10 @@ var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 var css = require('@emotion/css');
 var theme = require('@spark-web/theme');
+var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var box = require('@spark-web/box');
 var ts = require('@spark-web/utils/ts');
-var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
 
 var TextContext = /*#__PURE__*/react.createContext(undefined);
 function useTextContext() {
@@ -179,6 +180,7 @@ function createTextStyles(_ref2) {
   }, leadingTrim);
 }
 
+var _excluded = ["as", "children", "data", "id", "align", "baseline", "inline", "overflowStrategy", "size", "tabularNumbers", "tone", "transform", "weight"];
 var Text = ts.forwardRefWithAs(function (_ref, forwardedRef) {
   var as = _ref.as,
       children = _ref.children,
@@ -192,7 +194,9 @@ var Text = ts.forwardRefWithAs(function (_ref, forwardedRef) {
       tabularNumbers = _ref.tabularNumbers,
       toneProp = _ref.tone,
       transform = _ref.transform,
-      weightProp = _ref.weight;
+      weightProp = _ref.weight,
+      consumerProps = _objectWithoutProperties(_ref, _excluded);
+
   var overflowStyles = useOverflowStrategy(overflowStrategy);
   var textContext = useTextContext();
 
@@ -220,14 +224,14 @@ var Text = ts.forwardRefWithAs(function (_ref, forwardedRef) {
   }]; // early exit for inline variant
 
   if (inline) {
-    return /*#__PURE__*/jsxRuntime.jsx(box.Box, {
+    return /*#__PURE__*/jsxRuntime.jsx(box.Box, _objectSpread(_objectSpread({}, consumerProps), {}, {
       as: as !== null && as !== void 0 ? as : 'span',
       data: data,
       ref: forwardedRef,
       id: id,
       className: css.css(styles),
       children: children
-    });
+    }));
   } // prepare block variant
 
 
@@ -244,14 +248,14 @@ var Text = ts.forwardRefWithAs(function (_ref, forwardedRef) {
   }, [size, tone, weight]);
   return /*#__PURE__*/jsxRuntime.jsx(TextContext.Provider, {
     value: textContextValue,
-    children: /*#__PURE__*/jsxRuntime.jsx(box.Box, {
+    children: /*#__PURE__*/jsxRuntime.jsx(box.Box, _objectSpread(_objectSpread({}, consumerProps), {}, {
       as: as,
       data: data,
       ref: forwardedRef,
       id: id,
       className: css.css(styles),
       children: content
-    })
+    }))
   });
 });
 

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

@@ -6,9 +6,10 @@ var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 var css = require('@emotion/css');
 var theme = require('@spark-web/theme');
+var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
+var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var box = require('@spark-web/box');
 var ts = require('@spark-web/utils/ts');
-var _objectSpread = require('@babel/runtime/helpers/objectSpread2');
 
 var TextContext = /*#__PURE__*/react.createContext(undefined);
 function useTextContext() {
@@ -179,6 +180,7 @@ function createTextStyles(_ref2) {
   }, leadingTrim);
 }
 
+var _excluded = ["as", "children", "data", "id", "align", "baseline", "inline", "overflowStrategy", "size", "tabularNumbers", "tone", "transform", "weight"];
 var Text = ts.forwardRefWithAs(function (_ref, forwardedRef) {
   var as = _ref.as,
       children = _ref.children,
@@ -192,7 +194,9 @@ var Text = ts.forwardRefWithAs(function (_ref, forwardedRef) {
       tabularNumbers = _ref.tabularNumbers,
       toneProp = _ref.tone,
       transform = _ref.transform,
-      weightProp = _ref.weight;
+      weightProp = _ref.weight,
+      consumerProps = _objectWithoutProperties(_ref, _excluded);
+
   var overflowStyles = useOverflowStrategy(overflowStrategy);
   var textContext = useTextContext();
 
@@ -220,14 +224,14 @@ var Text = ts.forwardRefWithAs(function (_ref, forwardedRef) {
   }]; // early exit for inline variant
 
   if (inline) {
-    return /*#__PURE__*/jsxRuntime.jsx(box.Box, {
+    return /*#__PURE__*/jsxRuntime.jsx(box.Box, _objectSpread(_objectSpread({}, consumerProps), {}, {
       as: as !== null && as !== void 0 ? as : 'span',
       data: data,
       ref: forwardedRef,
       id: id,
       className: css.css(styles),
       children: children
-    });
+    }));
   } // prepare block variant
 
 
@@ -244,14 +248,14 @@ var Text = ts.forwardRefWithAs(function (_ref, forwardedRef) {
   }, [size, tone, weight]);
   return /*#__PURE__*/jsxRuntime.jsx(TextContext.Provider, {
     value: textContextValue,
-    children: /*#__PURE__*/jsxRuntime.jsx(box.Box, {
+    children: /*#__PURE__*/jsxRuntime.jsx(box.Box, _objectSpread(_objectSpread({}, consumerProps), {}, {
       as: as,
       data: data,
       ref: forwardedRef,
       id: id,
       className: css.css(styles),
       children: content
-    })
+    }))
   });
 });
 

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

@@ -2,9 +2,10 @@ import { useContext, createContext, useMemo } from 'react';
 import { jsx } from 'react/jsx-runtime';
 import { css } from '@emotion/css';
 import { useTheme } from '@spark-web/theme';
+import _objectSpread from '@babel/runtime/helpers/esm/objectSpread2';
+import _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
 import { useBackgroundLightness, Box } from '@spark-web/box';
 import { forwardRefWithAs } from '@spark-web/utils/ts';
-import _objectSpread from '@babel/runtime/helpers/esm/objectSpread2';
 
 var TextContext = /*#__PURE__*/createContext(undefined);
 function useTextContext() {
@@ -175,6 +176,7 @@ function createTextStyles(_ref2) {
   }, leadingTrim);
 }
 
+var _excluded = ["as", "children", "data", "id", "align", "baseline", "inline", "overflowStrategy", "size", "tabularNumbers", "tone", "transform", "weight"];
 var Text = forwardRefWithAs(function (_ref, forwardedRef) {
   var as = _ref.as,
       children = _ref.children,
@@ -188,7 +190,9 @@ var Text = forwardRefWithAs(function (_ref, forwardedRef) {
       tabularNumbers = _ref.tabularNumbers,
       toneProp = _ref.tone,
       transform = _ref.transform,
-      weightProp = _ref.weight;
+      weightProp = _ref.weight,
+      consumerProps = _objectWithoutProperties(_ref, _excluded);
+
   var overflowStyles = useOverflowStrategy(overflowStrategy);
   var textContext = useTextContext();
 
@@ -216,14 +220,14 @@ var Text = forwardRefWithAs(function (_ref, forwardedRef) {
   }]; // early exit for inline variant
 
   if (inline) {
-    return /*#__PURE__*/jsx(Box, {
+    return /*#__PURE__*/jsx(Box, _objectSpread(_objectSpread({}, consumerProps), {}, {
       as: as !== null && as !== void 0 ? as : 'span',
       data: data,
       ref: forwardedRef,
       id: id,
       className: css(styles),
       children: children
-    });
+    }));
   } // prepare block variant
 
 
@@ -240,14 +244,14 @@ var Text = forwardRefWithAs(function (_ref, forwardedRef) {
   }, [size, tone, weight]);
   return /*#__PURE__*/jsx(TextContext.Provider, {
     value: textContextValue,
-    children: /*#__PURE__*/jsx(Box, {
+    children: /*#__PURE__*/jsx(Box, _objectSpread(_objectSpread({}, consumerProps), {}, {
       as: as,
       data: data,
       ref: forwardedRef,
       id: id,
       className: css(styles),
       children: content
-    })
+    }))
   });
 });
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spark-web/text",
-  "version": "1.0.5",
+  "version": "1.1.0",
   "license": "MIT",
   "main": "dist/spark-web-text.cjs.js",
   "module": "dist/spark-web-text.esm.js",
@@ -8,11 +8,11 @@
     "dist"
   ],
   "dependencies": {
-    "@babel/runtime": "^7.18.0",
+    "@babel/runtime": "^7.18.9",
     "@emotion/css": "^11.9.0",
-    "@spark-web/box": "^1.0.5",
-    "@spark-web/theme": "^3.0.1",
-    "@spark-web/utils": "^1.1.3"
+    "@spark-web/box": "^1.0.8",
+    "@spark-web/theme": "^3.0.5",
+    "@spark-web/utils": "^1.2.1"
   },
   "devDependencies": {
     "@types/react": "^17.0.12",