@spark-web/text 2.0.0-rc.0 → 2.0.0-rc.2

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # @spark-web/text
 
+## 2.0.0-rc.2
+
+### Major Changes
+
+- add parser
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @spark-web/theme@4.0.0-rc.2
+  - @spark-web/utils@2.0.0-rc.2
+  - @spark-web/box@2.0.0-rc.2
+
+## 2.0.0-rc.1
+
+### Major Changes
+
+- rc
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @spark-web/theme@4.0.0-rc.1
+  - @spark-web/utils@2.0.0-rc.1
+  - @spark-web/box@2.0.0-rc.1
+
 ## 2.0.0-rc.0
 
 ### Major Changes

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

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

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

@@ -0,0 +1,16 @@
+import type { ReactNode } from 'react';
+import type { UseTextProps } from "./use-text.js";
+declare type DefaultTextProps = {
+    size?: NonNullable<UseTextProps['size']>;
+    tone?: NonNullable<UseTextProps['tone']>;
+    weight?: NonNullable<UseTextProps['weight']>;
+};
+export declare function DefaultTextPropsProvider({ children, size, tone, weight, }: DefaultTextProps & {
+    children: ReactNode;
+}): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare const useDefaultTextProps: ({ size: sizeProp, tone: toneProp, weight: weightProp, }: DefaultTextProps) => {
+    size: "small" | "xsmall" | "standard" | "large";
+    tone: "disabled" | "link" | "muted" | "fieldAccent" | "accent" | "neutral" | "primary" | "secondary" | "caution" | "critical" | "info" | "positive" | "placeholder" | "primaryHover" | "primaryActive" | "secondaryHover" | "secondaryActive";
+    weight: "regular" | "semibold";
+};
+export {};

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

@@ -0,0 +1,11 @@
+export { useTextContext } from "./context.js";
+export { DefaultTextPropsProvider, useDefaultTextProps, } from "./default-text-props.js";
+export { Strong } from "./strong.js";
+export { Text } from "./text.js";
+export { useForegroundTone } from "./use-foreground-tone.js";
+export { useOverflowStrategy } from "./use-overflow-strategy.js";
+export { createTextStyles, useText } from "./use-text.js";
+export type { StrongProps } from "./strong.js";
+export type { TextProps } from "./text.js";
+export type { ForegroundTone } from "./use-foreground-tone.js";
+export type { TextOverflowStrategy } from "./use-overflow-strategy.js";

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

@@ -0,0 +1,5 @@
+import type { ReactNode } from 'react';
+export declare type StrongProps = {
+    children: ReactNode;
+};
+export declare const Strong: ({ children }: StrongProps) => import("@emotion/react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,35 @@
+import type { BoxProps } from '@spark-web/box';
+import type { DataAttributeMap } from '@spark-web/utils/internal';
+import type { CSSProperties, ReactNode } from 'react';
+import type { TextOverflowStrategy } from "./use-overflow-strategy.js";
+import type { UseTextProps } from "./use-text.js";
+declare type InlineProps = {
+    align?: never;
+    /** Display as an inline element. */
+    inline?: boolean;
+    overflowStrategy?: never;
+};
+declare type BlockProps = {
+    /** The horizontal alignment. */
+    align?: 'left' | 'center' | 'right';
+    inline?: never;
+    /** Manage how text behaves with regard to overflow. */
+    overflowStrategy?: TextOverflowStrategy;
+};
+export declare type TextProps = Partial<UseTextProps> & {
+    /** The text content. */
+    children?: ReactNode;
+    /** Sets data attributes on the component. */
+    data?: DataAttributeMap;
+    /** An identifier which must be unique in the whole document. */
+    id?: BoxProps['id'];
+    /** When enabled, numbers will be the same width. Similar to a monospaced font. */
+    tabularNumbers?: boolean;
+    /** Transform the text casing. */
+    transform?: CSSProperties['textTransform'];
+} & (InlineProps | BlockProps);
+export declare const Text: <Comp extends import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> = "div">(props: {
+    as?: Comp | 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" | "set" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | 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" | "set" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view">)[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/use-foreground-tone.d.ts

@@ -0,0 +1,3 @@
+import type { BrighteTheme } from '@spark-web/theme';
+export declare type ForegroundTone = keyof Omit<BrighteTheme['color']['foreground'], 'neutralInverted' | 'mutedInverted'>;
+export declare function useForegroundTone(tone: ForegroundTone): string;

package/dist/declarations/src/use-overflow-strategy.d.ts

@@ -0,0 +1,27 @@
+declare const strategyMap: {
+    readonly truncate: {
+        readonly display: "block";
+        readonly overflow: "hidden";
+        readonly textOverflow: "ellipsis";
+        readonly whiteSpace: "nowrap";
+    };
+    readonly nowrap: {
+        readonly whiteSpace: "nowrap";
+    };
+    readonly breakword: {
+        readonly display: "block";
+        readonly overflowWrap: "break-word";
+        readonly wordBreak: "break-word";
+        readonly wordWrap: "break-word";
+    };
+};
+export declare type TextOverflowStrategy = keyof typeof strategyMap;
+export declare function useOverflowStrategy(strategy?: TextOverflowStrategy): {
+    readonly whiteSpace: "nowrap";
+} | {
+    readonly display: "block";
+    readonly overflowWrap: "break-word";
+    readonly wordBreak: "break-word";
+    readonly wordWrap: "break-word";
+} | null;
+export {};

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

@@ -0,0 +1,29 @@
+import type { BrighteTextDefinition, BrighteTheme } from '@spark-web/theme';
+import type { ForegroundTone } from "./use-foreground-tone.js";
+export declare type UseTextProps = {
+    /** Apply leading-trim styles. */
+    baseline?: boolean;
+    /** The size of the text. */
+    size: keyof BrighteTheme['typography']['text'];
+    /** The tone of the text. */
+    tone: ForegroundTone;
+    /** The weight of the text. */
+    weight: keyof BrighteTheme['typography']['fontWeight'];
+};
+export declare function useText({ baseline, size, tone, weight }: UseTextProps): any[];
+export declare function createTextStyles({ fontSize, lineHeight, trims }: BrighteTextDefinition, { includeTrims }?: {
+    includeTrims?: boolean | undefined;
+}): {
+    '::before'?: {
+        marginBottom: string;
+        content: string;
+        display: string;
+    } | undefined;
+    '::after'?: {
+        marginTop: string;
+        content: string;
+        display: string;
+    } | undefined;
+    fontSize: string;
+    lineHeight: string;
+};

package/dist/spark-web-text.cjs.d.ts

@@ -1,2 +1,2 @@
-export * from "../src/index";
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3Bhcmstd2ViLXRleHQuY2pzLmQudHMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi9zcmMvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEifQ==
+export * from "./declarations/src/index";
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3Bhcmstd2ViLXRleHQuY2pzLmQudHMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuL2RlY2xhcmF0aW9ucy9zcmMvaW5kZXguZC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSJ9

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

@@ -0,0 +1,253 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var react = require('react');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var react$1 = require('@emotion/react');
+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 TextContext = /*#__PURE__*/react.createContext(undefined);
+function useTextContext() {
+  return react.useContext(TextContext);
+}
+
+var DefaultTextPropsContext = /*#__PURE__*/react.createContext({
+  size: undefined,
+  tone: undefined,
+  weight: undefined
+});
+function DefaultTextPropsProvider(_ref) {
+  var children = _ref.children,
+    size = _ref.size,
+    tone = _ref.tone,
+    weight = _ref.weight;
+  var defaultTextProps = react.useMemo(function () {
+    return {
+      size: size,
+      tone: tone,
+      weight: weight
+    };
+  }, [size, tone, weight]);
+  return jsxRuntime.jsx(DefaultTextPropsContext.Provider, {
+    value: defaultTextProps,
+    children: children
+  });
+}
+var useDefaultTextProps = function useDefaultTextProps(_ref2) {
+  var _ref3, _ref4, _ref5;
+  var sizeProp = _ref2.size,
+    toneProp = _ref2.tone,
+    weightProp = _ref2.weight;
+  var _useContext = react.useContext(DefaultTextPropsContext),
+    size = _useContext.size,
+    tone = _useContext.tone,
+    weight = _useContext.weight;
+  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'
+  };
+};
+
+var Strong = function Strong(_ref) {
+  var children = _ref.children;
+  var theme$1 = theme.useTheme();
+  var styles = {
+    fontWeight: theme$1.typography.fontWeight.semibold
+  };
+  return jsxRuntime.jsx("strong", {
+    css: react$1.css(styles),
+    children: children
+  });
+};
+
+var strategyMap = {
+  truncate: {
+    display: 'block',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap'
+  },
+  nowrap: {
+    whiteSpace: 'nowrap'
+  },
+  // https://css-tricks.com/better-line-breaks-for-long-urls/
+  breakword: {
+    display: 'block',
+    overflowWrap: 'break-word',
+    wordBreak: 'break-word',
+    wordWrap: 'break-word'
+  }
+};
+function useOverflowStrategy(strategy) {
+  if (!strategy) {
+    return null;
+  }
+  return strategyMap[strategy];
+}
+
+var invertableTones = {
+  neutral: {
+    dark: 'neutralInverted',
+    light: 'neutral'
+  },
+  muted: {
+    dark: 'mutedInverted',
+    light: 'muted'
+  },
+  link: {
+    dark: 'neutralInverted',
+    light: 'link'
+  }
+};
+function useForegroundTone(tone) {
+  var theme$1 = theme.useTheme();
+  var backgroundLightness = box.useBackgroundLightness();
+  if (tone in invertableTones) {
+    return theme$1.color.foreground[invertableTones[tone][backgroundLightness]];
+  }
+  return theme$1.color.foreground[tone];
+}
+
+function useText(_ref) {
+  var _ref$baseline = _ref.baseline,
+    baseline = _ref$baseline === void 0 ? true : _ref$baseline,
+    size = _ref.size,
+    tone = _ref.tone,
+    weight = _ref.weight;
+  var theme$1 = theme.useTheme();
+  var color = useForegroundTone(tone);
+  var _theme$typography$tex = theme$1.typography.text[size],
+    mobile = _theme$typography$tex.mobile,
+    tablet = _theme$typography$tex.tablet;
+  var responsiveStyles = theme$1.utils.responsiveStyles({
+    mobile: createTextStyles(mobile, {
+      includeTrims: baseline
+    }),
+    tablet: createTextStyles(tablet, {
+      includeTrims: baseline
+    })
+  });
+  var styles = [{
+    color: color,
+    fontFamily: theme$1.typography.fontFamily.sans.name,
+    fontWeight: theme$1.typography.fontWeight[weight]
+  }, responsiveStyles];
+  return styles;
+}
+function createTextStyles(_ref2) {
+  var fontSize = _ref2.fontSize,
+    lineHeight = _ref2.lineHeight,
+    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;
+  var pseudo = {
+    content: '" "',
+    display: 'table'
+  };
+  var leadingTrim = includeTrims ? {
+    '::before': _objectSpread(_objectSpread({}, pseudo), {}, {
+      marginBottom: trims.capHeightTrim
+    }),
+    '::after': _objectSpread(_objectSpread({}, pseudo), {}, {
+      marginTop: trims.baselineTrim
+    })
+  } : null;
+  return _objectSpread({
+    fontSize: fontSize,
+    lineHeight: lineHeight
+  }, 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,
+    data = _ref.data,
+    id = _ref.id,
+    align = _ref.align,
+    baselineProp = _ref.baseline,
+    inline = _ref.inline,
+    overflowStrategy = _ref.overflowStrategy,
+    sizeProp = _ref.size,
+    tabularNumbers = _ref.tabularNumbers,
+    toneProp = _ref.tone,
+    transform = _ref.transform,
+    weightProp = _ref.weight,
+    consumerProps = _objectWithoutProperties(_ref, _excluded);
+  var overflowStyles = useOverflowStrategy(overflowStrategy);
+  var textContext = useTextContext();
+  var _useDefaultTextProps = useDefaultTextProps({
+      size: sizeProp !== null && sizeProp !== void 0 ? sizeProp : textContext === null || textContext === void 0 ? void 0 : textContext.size,
+      tone: toneProp !== null && toneProp !== void 0 ? toneProp : textContext === null || textContext === void 0 ? void 0 : textContext.tone,
+      weight: weightProp !== null && weightProp !== void 0 ? weightProp : textContext === null || textContext === void 0 ? void 0 : textContext.weight
+    }),
+    size = _useDefaultTextProps.size,
+    tone = _useDefaultTextProps.tone,
+    weight = _useDefaultTextProps.weight;
+  var baseline = !inline && baselineProp;
+  var textStyles = useText({
+    baseline: baseline,
+    size: size,
+    tone: tone,
+    weight: weight
+  });
+  var styles = [textStyles, {
+    display: inline ? 'inline' : 'block',
+    fontVariantNumeric: tabularNumbers ? 'tabular-nums' : undefined,
+    textAlign: align,
+    textTransform: transform
+  }];
+
+  // early exit for inline variant
+  if (inline) {
+    return jsxRuntime.jsx(box.Box, _objectSpread(_objectSpread({}, consumerProps), {}, {
+      as: as !== null && as !== void 0 ? as : 'span',
+      data: data,
+      ref: forwardedRef,
+      id: id,
+      css: react$1.css(styles),
+      children: children
+    }));
+  }
+
+  // prepare block variant
+  var content = overflowStrategy ? jsxRuntime.jsx("span", {
+    css: react$1.css(overflowStyles),
+    children: children
+  }) : children;
+  var textContextValue = react.useMemo(function () {
+    return {
+      size: size,
+      tone: tone,
+      weight: weight
+    };
+  }, [size, tone, weight]);
+  return jsxRuntime.jsx(TextContext.Provider, {
+    value: textContextValue,
+    children: jsxRuntime.jsx(box.Box, _objectSpread(_objectSpread({}, consumerProps), {}, {
+      as: as,
+      data: data,
+      ref: forwardedRef,
+      id: id,
+      css: react$1.css(styles),
+      children: content
+    }))
+  });
+});
+
+exports.DefaultTextPropsProvider = DefaultTextPropsProvider;
+exports.Strong = Strong;
+exports.Text = Text;
+exports.createTextStyles = createTextStyles;
+exports.useDefaultTextProps = useDefaultTextProps;
+exports.useForegroundTone = useForegroundTone;
+exports.useOverflowStrategy = useOverflowStrategy;
+exports.useText = useText;
+exports.useTextContext = useTextContext;

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

@@ -1,16 +1,7 @@
-"use strict";
-// this file might look strange and you might be wondering what it's for
-// it's lets you import your source files by importing this entrypoint
-// as you would import it if it was built with preconstruct build
-// this file is slightly different to some others though
-// it has a require hook which compiles your code with Babel
-// this means that you don't have to set up @babel/register or anything like that
-// but you can still require this module and it'll be compiled
+'use strict';
 
-// this bit of code imports the require hook and registers it
-let unregister = require("../../../node_modules/@preconstruct/hook").___internalHook(typeof __dirname === 'undefined' ? undefined : __dirname, "../../..", "..");
-
-// this re-exports the source file
-module.exports = require("../src/index.ts");
-
-unregister();
+if (process.env.NODE_ENV === "production") {
+  module.exports = require("./spark-web-text.cjs.prod.js");
+} else {
+  module.exports = require("./spark-web-text.cjs.dev.js");
+}

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

@@ -0,0 +1,253 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var react = require('react');
+var jsxRuntime = require('@emotion/react/jsx-runtime');
+var react$1 = require('@emotion/react');
+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 TextContext = /*#__PURE__*/react.createContext(undefined);
+function useTextContext() {
+  return react.useContext(TextContext);
+}
+
+var DefaultTextPropsContext = /*#__PURE__*/react.createContext({
+  size: undefined,
+  tone: undefined,
+  weight: undefined
+});
+function DefaultTextPropsProvider(_ref) {
+  var children = _ref.children,
+    size = _ref.size,
+    tone = _ref.tone,
+    weight = _ref.weight;
+  var defaultTextProps = react.useMemo(function () {
+    return {
+      size: size,
+      tone: tone,
+      weight: weight
+    };
+  }, [size, tone, weight]);
+  return jsxRuntime.jsx(DefaultTextPropsContext.Provider, {
+    value: defaultTextProps,
+    children: children
+  });
+}
+var useDefaultTextProps = function useDefaultTextProps(_ref2) {
+  var _ref3, _ref4, _ref5;
+  var sizeProp = _ref2.size,
+    toneProp = _ref2.tone,
+    weightProp = _ref2.weight;
+  var _useContext = react.useContext(DefaultTextPropsContext),
+    size = _useContext.size,
+    tone = _useContext.tone,
+    weight = _useContext.weight;
+  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'
+  };
+};
+
+var Strong = function Strong(_ref) {
+  var children = _ref.children;
+  var theme$1 = theme.useTheme();
+  var styles = {
+    fontWeight: theme$1.typography.fontWeight.semibold
+  };
+  return jsxRuntime.jsx("strong", {
+    css: react$1.css(styles),
+    children: children
+  });
+};
+
+var strategyMap = {
+  truncate: {
+    display: 'block',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap'
+  },
+  nowrap: {
+    whiteSpace: 'nowrap'
+  },
+  // https://css-tricks.com/better-line-breaks-for-long-urls/
+  breakword: {
+    display: 'block',
+    overflowWrap: 'break-word',
+    wordBreak: 'break-word',
+    wordWrap: 'break-word'
+  }
+};
+function useOverflowStrategy(strategy) {
+  if (!strategy) {
+    return null;
+  }
+  return strategyMap[strategy];
+}
+
+var invertableTones = {
+  neutral: {
+    dark: 'neutralInverted',
+    light: 'neutral'
+  },
+  muted: {
+    dark: 'mutedInverted',
+    light: 'muted'
+  },
+  link: {
+    dark: 'neutralInverted',
+    light: 'link'
+  }
+};
+function useForegroundTone(tone) {
+  var theme$1 = theme.useTheme();
+  var backgroundLightness = box.useBackgroundLightness();
+  if (tone in invertableTones) {
+    return theme$1.color.foreground[invertableTones[tone][backgroundLightness]];
+  }
+  return theme$1.color.foreground[tone];
+}
+
+function useText(_ref) {
+  var _ref$baseline = _ref.baseline,
+    baseline = _ref$baseline === void 0 ? true : _ref$baseline,
+    size = _ref.size,
+    tone = _ref.tone,
+    weight = _ref.weight;
+  var theme$1 = theme.useTheme();
+  var color = useForegroundTone(tone);
+  var _theme$typography$tex = theme$1.typography.text[size],
+    mobile = _theme$typography$tex.mobile,
+    tablet = _theme$typography$tex.tablet;
+  var responsiveStyles = theme$1.utils.responsiveStyles({
+    mobile: createTextStyles(mobile, {
+      includeTrims: baseline
+    }),
+    tablet: createTextStyles(tablet, {
+      includeTrims: baseline
+    })
+  });
+  var styles = [{
+    color: color,
+    fontFamily: theme$1.typography.fontFamily.sans.name,
+    fontWeight: theme$1.typography.fontWeight[weight]
+  }, responsiveStyles];
+  return styles;
+}
+function createTextStyles(_ref2) {
+  var fontSize = _ref2.fontSize,
+    lineHeight = _ref2.lineHeight,
+    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;
+  var pseudo = {
+    content: '" "',
+    display: 'table'
+  };
+  var leadingTrim = includeTrims ? {
+    '::before': _objectSpread(_objectSpread({}, pseudo), {}, {
+      marginBottom: trims.capHeightTrim
+    }),
+    '::after': _objectSpread(_objectSpread({}, pseudo), {}, {
+      marginTop: trims.baselineTrim
+    })
+  } : null;
+  return _objectSpread({
+    fontSize: fontSize,
+    lineHeight: lineHeight
+  }, 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,
+    data = _ref.data,
+    id = _ref.id,
+    align = _ref.align,
+    baselineProp = _ref.baseline,
+    inline = _ref.inline,
+    overflowStrategy = _ref.overflowStrategy,
+    sizeProp = _ref.size,
+    tabularNumbers = _ref.tabularNumbers,
+    toneProp = _ref.tone,
+    transform = _ref.transform,
+    weightProp = _ref.weight,
+    consumerProps = _objectWithoutProperties(_ref, _excluded);
+  var overflowStyles = useOverflowStrategy(overflowStrategy);
+  var textContext = useTextContext();
+  var _useDefaultTextProps = useDefaultTextProps({
+      size: sizeProp !== null && sizeProp !== void 0 ? sizeProp : textContext === null || textContext === void 0 ? void 0 : textContext.size,
+      tone: toneProp !== null && toneProp !== void 0 ? toneProp : textContext === null || textContext === void 0 ? void 0 : textContext.tone,
+      weight: weightProp !== null && weightProp !== void 0 ? weightProp : textContext === null || textContext === void 0 ? void 0 : textContext.weight
+    }),
+    size = _useDefaultTextProps.size,
+    tone = _useDefaultTextProps.tone,
+    weight = _useDefaultTextProps.weight;
+  var baseline = !inline && baselineProp;
+  var textStyles = useText({
+    baseline: baseline,
+    size: size,
+    tone: tone,
+    weight: weight
+  });
+  var styles = [textStyles, {
+    display: inline ? 'inline' : 'block',
+    fontVariantNumeric: tabularNumbers ? 'tabular-nums' : undefined,
+    textAlign: align,
+    textTransform: transform
+  }];
+
+  // early exit for inline variant
+  if (inline) {
+    return jsxRuntime.jsx(box.Box, _objectSpread(_objectSpread({}, consumerProps), {}, {
+      as: as !== null && as !== void 0 ? as : 'span',
+      data: data,
+      ref: forwardedRef,
+      id: id,
+      css: react$1.css(styles),
+      children: children
+    }));
+  }
+
+  // prepare block variant
+  var content = overflowStrategy ? jsxRuntime.jsx("span", {
+    css: react$1.css(overflowStyles),
+    children: children
+  }) : children;
+  var textContextValue = react.useMemo(function () {
+    return {
+      size: size,
+      tone: tone,
+      weight: weight
+    };
+  }, [size, tone, weight]);
+  return jsxRuntime.jsx(TextContext.Provider, {
+    value: textContextValue,
+    children: jsxRuntime.jsx(box.Box, _objectSpread(_objectSpread({}, consumerProps), {}, {
+      as: as,
+      data: data,
+      ref: forwardedRef,
+      id: id,
+      css: react$1.css(styles),
+      children: content
+    }))
+  });
+});
+
+exports.DefaultTextPropsProvider = DefaultTextPropsProvider;
+exports.Strong = Strong;
+exports.Text = Text;
+exports.createTextStyles = createTextStyles;
+exports.useDefaultTextProps = useDefaultTextProps;
+exports.useForegroundTone = useForegroundTone;
+exports.useOverflowStrategy = useOverflowStrategy;
+exports.useText = useText;
+exports.useTextContext = useTextContext;

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

@@ -0,0 +1,241 @@
+import { createContext, useContext, useMemo } from 'react';
+import { jsx } from '@emotion/react/jsx-runtime';
+import { css } from '@emotion/react';
+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';
+
+var TextContext = /*#__PURE__*/createContext(undefined);
+function useTextContext() {
+  return useContext(TextContext);
+}
+
+var DefaultTextPropsContext = /*#__PURE__*/createContext({
+  size: undefined,
+  tone: undefined,
+  weight: undefined
+});
+function DefaultTextPropsProvider(_ref) {
+  var children = _ref.children,
+    size = _ref.size,
+    tone = _ref.tone,
+    weight = _ref.weight;
+  var defaultTextProps = useMemo(function () {
+    return {
+      size: size,
+      tone: tone,
+      weight: weight
+    };
+  }, [size, tone, weight]);
+  return jsx(DefaultTextPropsContext.Provider, {
+    value: defaultTextProps,
+    children: children
+  });
+}
+var useDefaultTextProps = function useDefaultTextProps(_ref2) {
+  var _ref3, _ref4, _ref5;
+  var sizeProp = _ref2.size,
+    toneProp = _ref2.tone,
+    weightProp = _ref2.weight;
+  var _useContext = useContext(DefaultTextPropsContext),
+    size = _useContext.size,
+    tone = _useContext.tone,
+    weight = _useContext.weight;
+  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'
+  };
+};
+
+var Strong = function Strong(_ref) {
+  var children = _ref.children;
+  var theme = useTheme();
+  var styles = {
+    fontWeight: theme.typography.fontWeight.semibold
+  };
+  return jsx("strong", {
+    css: css(styles),
+    children: children
+  });
+};
+
+var strategyMap = {
+  truncate: {
+    display: 'block',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap'
+  },
+  nowrap: {
+    whiteSpace: 'nowrap'
+  },
+  // https://css-tricks.com/better-line-breaks-for-long-urls/
+  breakword: {
+    display: 'block',
+    overflowWrap: 'break-word',
+    wordBreak: 'break-word',
+    wordWrap: 'break-word'
+  }
+};
+function useOverflowStrategy(strategy) {
+  if (!strategy) {
+    return null;
+  }
+  return strategyMap[strategy];
+}
+
+var invertableTones = {
+  neutral: {
+    dark: 'neutralInverted',
+    light: 'neutral'
+  },
+  muted: {
+    dark: 'mutedInverted',
+    light: 'muted'
+  },
+  link: {
+    dark: 'neutralInverted',
+    light: 'link'
+  }
+};
+function useForegroundTone(tone) {
+  var theme = useTheme();
+  var backgroundLightness = useBackgroundLightness();
+  if (tone in invertableTones) {
+    return theme.color.foreground[invertableTones[tone][backgroundLightness]];
+  }
+  return theme.color.foreground[tone];
+}
+
+function useText(_ref) {
+  var _ref$baseline = _ref.baseline,
+    baseline = _ref$baseline === void 0 ? true : _ref$baseline,
+    size = _ref.size,
+    tone = _ref.tone,
+    weight = _ref.weight;
+  var theme = useTheme();
+  var color = useForegroundTone(tone);
+  var _theme$typography$tex = theme.typography.text[size],
+    mobile = _theme$typography$tex.mobile,
+    tablet = _theme$typography$tex.tablet;
+  var responsiveStyles = theme.utils.responsiveStyles({
+    mobile: createTextStyles(mobile, {
+      includeTrims: baseline
+    }),
+    tablet: createTextStyles(tablet, {
+      includeTrims: baseline
+    })
+  });
+  var styles = [{
+    color: color,
+    fontFamily: theme.typography.fontFamily.sans.name,
+    fontWeight: theme.typography.fontWeight[weight]
+  }, responsiveStyles];
+  return styles;
+}
+function createTextStyles(_ref2) {
+  var fontSize = _ref2.fontSize,
+    lineHeight = _ref2.lineHeight,
+    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;
+  var pseudo = {
+    content: '" "',
+    display: 'table'
+  };
+  var leadingTrim = includeTrims ? {
+    '::before': _objectSpread(_objectSpread({}, pseudo), {}, {
+      marginBottom: trims.capHeightTrim
+    }),
+    '::after': _objectSpread(_objectSpread({}, pseudo), {}, {
+      marginTop: trims.baselineTrim
+    })
+  } : null;
+  return _objectSpread({
+    fontSize: fontSize,
+    lineHeight: lineHeight
+  }, 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,
+    data = _ref.data,
+    id = _ref.id,
+    align = _ref.align,
+    baselineProp = _ref.baseline,
+    inline = _ref.inline,
+    overflowStrategy = _ref.overflowStrategy,
+    sizeProp = _ref.size,
+    tabularNumbers = _ref.tabularNumbers,
+    toneProp = _ref.tone,
+    transform = _ref.transform,
+    weightProp = _ref.weight,
+    consumerProps = _objectWithoutProperties(_ref, _excluded);
+  var overflowStyles = useOverflowStrategy(overflowStrategy);
+  var textContext = useTextContext();
+  var _useDefaultTextProps = useDefaultTextProps({
+      size: sizeProp !== null && sizeProp !== void 0 ? sizeProp : textContext === null || textContext === void 0 ? void 0 : textContext.size,
+      tone: toneProp !== null && toneProp !== void 0 ? toneProp : textContext === null || textContext === void 0 ? void 0 : textContext.tone,
+      weight: weightProp !== null && weightProp !== void 0 ? weightProp : textContext === null || textContext === void 0 ? void 0 : textContext.weight
+    }),
+    size = _useDefaultTextProps.size,
+    tone = _useDefaultTextProps.tone,
+    weight = _useDefaultTextProps.weight;
+  var baseline = !inline && baselineProp;
+  var textStyles = useText({
+    baseline: baseline,
+    size: size,
+    tone: tone,
+    weight: weight
+  });
+  var styles = [textStyles, {
+    display: inline ? 'inline' : 'block',
+    fontVariantNumeric: tabularNumbers ? 'tabular-nums' : undefined,
+    textAlign: align,
+    textTransform: transform
+  }];
+
+  // early exit for inline variant
+  if (inline) {
+    return jsx(Box, _objectSpread(_objectSpread({}, consumerProps), {}, {
+      as: as !== null && as !== void 0 ? as : 'span',
+      data: data,
+      ref: forwardedRef,
+      id: id,
+      css: css(styles),
+      children: children
+    }));
+  }
+
+  // prepare block variant
+  var content = overflowStrategy ? jsx("span", {
+    css: css(overflowStyles),
+    children: children
+  }) : children;
+  var textContextValue = useMemo(function () {
+    return {
+      size: size,
+      tone: tone,
+      weight: weight
+    };
+  }, [size, tone, weight]);
+  return jsx(TextContext.Provider, {
+    value: textContextValue,
+    children: jsx(Box, _objectSpread(_objectSpread({}, consumerProps), {}, {
+      as: as,
+      data: data,
+      ref: forwardedRef,
+      id: id,
+      css: css(styles),
+      children: content
+    }))
+  });
+});
+
+export { DefaultTextPropsProvider, Strong, Text, createTextStyles, useDefaultTextProps, useForegroundTone, useOverflowStrategy, useText, useTextContext };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spark-web/text",
-  "version": "2.0.0-rc.0",
+  "version": "2.0.0-rc.2",
   "homepage": "https://github.com/brighte-labs/spark-web#readme",
   "repository": {
     "type": "git",
@@ -17,9 +17,9 @@
   "dependencies": {
     "@babel/runtime": "^7.25.0",
     "@emotion/react": "^11.13.5",
-    "@spark-web/box": "^2.0.0-rc.0",
-    "@spark-web/theme": "^4.0.0-rc.0",
-    "@spark-web/utils": "^2.0.0-rc.0"
+    "@spark-web/box": "^2.0.0-rc.2",
+    "@spark-web/theme": "^4.0.0-rc.2",
+    "@spark-web/utils": "^2.0.0-rc.2"
   },
   "devDependencies": {
     "@types/react": "^18.2.0",