@spark-web/text 0.0.0-snapshot-release-20260409001813

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

@@ -0,0 +1,291 @@
+'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;
+  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: weightProp !== null && weightProp !== void 0 ? weightProp : weight
+  };
+};
+
+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 useNumberOfLines = function useNumberOfLines(numberOfLines) {
+  if (!numberOfLines) {
+    return {};
+  }
+  return {
+    overflow: 'hidden',
+    display: '-webkit-box',
+    WebkitLineClamp: numberOfLines,
+    lineClamp: numberOfLines,
+    WebkitBoxOrient: 'vertical',
+    textOverflow: 'ellipsis',
+    overflowWrap: 'break-word',
+    wordBreak: 'break-word',
+    wordWrap: 'break-word'
+  };
+};
+
+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,
+      includeWeight: !weight
+    }),
+    tablet: createTextStyles(tablet, {
+      includeTrims: baseline,
+      includeWeight: !weight
+    })
+  });
+  var styles = [responsiveStyles, {
+    color: color,
+    fontFamily: theme$1.typography.fontFamily.sans.name,
+    fontWeight: weight ? theme$1.typography.fontWeight[weight] : undefined
+  }];
+  return styles;
+}
+function createTextStyles(_ref2) {
+  var fontSize = _ref2.fontSize,
+    fontWeight = _ref2.fontWeight,
+    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,
+    _ref3$includeWeight = _ref3.includeWeight,
+    includeWeight = _ref3$includeWeight === void 0 ? true : _ref3$includeWeight;
+  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,
+    fontWeight: includeWeight ? fontWeight : undefined,
+    lineHeight: lineHeight
+  }, leadingTrim);
+}
+
+var _excluded = ["as", "children", "data", "id", "align", "baseline", "css", "inline", "overflowStrategy", "size", "tabularNumbers", "tone", "transform", "weight", "numberOfLines"];
+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,
+    cssProps = _ref.css,
+    inline = _ref.inline,
+    overflowStrategy = _ref.overflowStrategy,
+    sizeProp = _ref.size,
+    tabularNumbers = _ref.tabularNumbers,
+    toneProp = _ref.tone,
+    transform = _ref.transform,
+    weightProp = _ref.weight,
+    numberOfLines = _ref.numberOfLines,
+    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 numberOfLinesStyle = useNumberOfLines(numberOfLines);
+  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, cssProps),
+      children: children
+    }));
+  }
+
+  // prepare block variant
+  var content = function content() {
+    if (overflowStrategy) {
+      return jsxRuntime.jsx("span", {
+        css: react$1.css(overflowStyles),
+        children: children
+      });
+    }
+    if (numberOfLines) {
+      return jsxRuntime.jsx("span", {
+        style: numberOfLinesStyle,
+        children: children
+      });
+    }
+    return 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, cssProps),
+      children: content()
+    }))
+  });
+});
+
+exports.DefaultTextPropsProvider = DefaultTextPropsProvider;
+exports.Strong = Strong;
+exports.Text = Text;
+exports.createTextStyles = createTextStyles;
+exports.useDefaultTextProps = useDefaultTextProps;
+exports.useForegroundTone = useForegroundTone;
+exports.useNumberOfLines = useNumberOfLines;
+exports.useOverflowStrategy = useOverflowStrategy;
+exports.useText = useText;
+exports.useTextContext = useTextContext;

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

@@ -0,0 +1,7 @@
+'use strict';
+
+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,291 @@
+'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;
+  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: weightProp !== null && weightProp !== void 0 ? weightProp : weight
+  };
+};
+
+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 useNumberOfLines = function useNumberOfLines(numberOfLines) {
+  if (!numberOfLines) {
+    return {};
+  }
+  return {
+    overflow: 'hidden',
+    display: '-webkit-box',
+    WebkitLineClamp: numberOfLines,
+    lineClamp: numberOfLines,
+    WebkitBoxOrient: 'vertical',
+    textOverflow: 'ellipsis',
+    overflowWrap: 'break-word',
+    wordBreak: 'break-word',
+    wordWrap: 'break-word'
+  };
+};
+
+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,
+      includeWeight: !weight
+    }),
+    tablet: createTextStyles(tablet, {
+      includeTrims: baseline,
+      includeWeight: !weight
+    })
+  });
+  var styles = [responsiveStyles, {
+    color: color,
+    fontFamily: theme$1.typography.fontFamily.sans.name,
+    fontWeight: weight ? theme$1.typography.fontWeight[weight] : undefined
+  }];
+  return styles;
+}
+function createTextStyles(_ref2) {
+  var fontSize = _ref2.fontSize,
+    fontWeight = _ref2.fontWeight,
+    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,
+    _ref3$includeWeight = _ref3.includeWeight,
+    includeWeight = _ref3$includeWeight === void 0 ? true : _ref3$includeWeight;
+  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,
+    fontWeight: includeWeight ? fontWeight : undefined,
+    lineHeight: lineHeight
+  }, leadingTrim);
+}
+
+var _excluded = ["as", "children", "data", "id", "align", "baseline", "css", "inline", "overflowStrategy", "size", "tabularNumbers", "tone", "transform", "weight", "numberOfLines"];
+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,
+    cssProps = _ref.css,
+    inline = _ref.inline,
+    overflowStrategy = _ref.overflowStrategy,
+    sizeProp = _ref.size,
+    tabularNumbers = _ref.tabularNumbers,
+    toneProp = _ref.tone,
+    transform = _ref.transform,
+    weightProp = _ref.weight,
+    numberOfLines = _ref.numberOfLines,
+    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 numberOfLinesStyle = useNumberOfLines(numberOfLines);
+  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, cssProps),
+      children: children
+    }));
+  }
+
+  // prepare block variant
+  var content = function content() {
+    if (overflowStrategy) {
+      return jsxRuntime.jsx("span", {
+        css: react$1.css(overflowStyles),
+        children: children
+      });
+    }
+    if (numberOfLines) {
+      return jsxRuntime.jsx("span", {
+        style: numberOfLinesStyle,
+        children: children
+      });
+    }
+    return 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, cssProps),
+      children: content()
+    }))
+  });
+});
+
+exports.DefaultTextPropsProvider = DefaultTextPropsProvider;
+exports.Strong = Strong;
+exports.Text = Text;
+exports.createTextStyles = createTextStyles;
+exports.useDefaultTextProps = useDefaultTextProps;
+exports.useForegroundTone = useForegroundTone;
+exports.useNumberOfLines = useNumberOfLines;
+exports.useOverflowStrategy = useOverflowStrategy;
+exports.useText = useText;
+exports.useTextContext = useTextContext;