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

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

@@ -0,0 +1,278 @@
+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;
+  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: weightProp !== null && weightProp !== void 0 ? weightProp : weight
+  };
+};
+
+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 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 = 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,
+      includeWeight: !weight
+    }),
+    tablet: createTextStyles(tablet, {
+      includeTrims: baseline,
+      includeWeight: !weight
+    })
+  });
+  var styles = [responsiveStyles, {
+    color: color,
+    fontFamily: theme.typography.fontFamily.sans.name,
+    fontWeight: weight ? theme.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 = 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 jsx(Box, _objectSpread(_objectSpread({}, consumerProps), {}, {
+      as: as !== null && as !== void 0 ? as : 'span',
+      data: data,
+      ref: forwardedRef,
+      id: id,
+      css: css(styles, cssProps),
+      children: children
+    }));
+  }
+
+  // prepare block variant
+  var content = function content() {
+    if (overflowStrategy) {
+      return jsx("span", {
+        css: css(overflowStyles),
+        children: children
+      });
+    }
+    if (numberOfLines) {
+      return jsx("span", {
+        style: numberOfLinesStyle,
+        children: children
+      });
+    }
+    return 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, cssProps),
+      children: content()
+    }))
+  });
+});
+
+export { DefaultTextPropsProvider, Strong, Text, createTextStyles, useDefaultTextProps, useForegroundTone, useNumberOfLines, useOverflowStrategy, useText, useTextContext };

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@spark-web/text",
+  "version": "0.0.0-snapshot-release-20260409001813",
+  "homepage": "https://github.com/brighte-labs/spark-web#readme",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/brighte-labs/spark-web.git",
+    "directory": "packages/text"
+  },
+  "main": "dist/spark-web-text.cjs.js",
+  "module": "dist/spark-web-text.esm.js",
+  "files": [
+    "CHANGELOG.md",
+    "CLAUDE.md",
+    "dist",
+    "README.md"
+  ],
+  "dependencies": {
+    "@babel/runtime": "^7.25.0",
+    "@emotion/react": "^11.14.0",
+    "@spark-web/box": "0.0.0-snapshot-release-20260409001813",
+    "@spark-web/theme": "^5.13.0",
+    "@spark-web/utils": "^5.1.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.1.0",
+    "react": "^19.1.0"
+  },
+  "peerDependencies": {
+    "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+  },
+  "engines": {
+    "node": ">=14"
+  }
+}