@spark-web/text 5.3.0-rc.0 → 5.3.1

package/CHANGELOG.md

@@ -1,17 +1,63 @@
 # @spark-web/text
 
-## 5.3.0-rc.0
+## 5.3.1
+
+### Patch Changes
+
+- [#782](https://github.com/brighte-labs/spark-web/pull/782)
+  [`bb41800`](https://github.com/brighte-labs/spark-web/commit/bb418004d21165f72f4bf2456afea844ee04a21c)
+  Thanks [@jacobporci-brighte](https://github.com/jacobporci-brighte)! -
+  **docs:** add CLAUDE.md AI context files to foundation and form packages;
+  patch data-table with manual sort and spinner overlay patterns
+- Updated dependencies
+  [[`bb41800`](https://github.com/brighte-labs/spark-web/commit/bb418004d21165f72f4bf2456afea844ee04a21c)]:
+  - @spark-web/box@6.0.1
+
+## 5.3.0
 
 ### Minor Changes
 
-- update react version and other packages
+- [#667](https://github.com/brighte-labs/spark-web/pull/667)
+  [`80d9c15`](https://github.com/brighte-labs/spark-web/commit/80d9c156a40bbcd2b1a91a2d0403b3c8e9b47b4e)
+  Thanks [@Leo704099](https://github.com/Leo704099)! - Support react 17 to 19
 
 ### Patch Changes
 
-- Updated dependencies []:
-  - @spark-web/theme@5.12.0-rc.0
-  - @spark-web/utils@5.1.0-rc.0
-  - @spark-web/box@6.0.0-rc.0
+- Updated dependencies
+  [[`80d9c15`](https://github.com/brighte-labs/spark-web/commit/80d9c156a40bbcd2b1a91a2d0403b3c8e9b47b4e)]:
+  - @spark-web/theme@5.13.0
+  - @spark-web/utils@5.1.0
+  - @spark-web/box@6.0.0
+
+## 5.2.3
+
+### Patch Changes
+
+- [#698](https://github.com/brighte-labs/spark-web/pull/698)
+  [`814b373`](https://github.com/brighte-labs/spark-web/commit/814b373cbe9fcf0757738c78eef6b516624df62c)
+  Thanks [@michtntbrighte](https://github.com/michtntbrighte)! - Bump version
+
+- Updated dependencies
+  [[`814b373`](https://github.com/brighte-labs/spark-web/commit/814b373cbe9fcf0757738c78eef6b516624df62c)]:
+  - @spark-web/box@5.2.2
+  - @spark-web/theme@5.12.1
+
+## 5.2.2
+
+### Patch Changes
+
+- Updated dependencies
+  [[`1995db7`](https://github.com/brighte-labs/spark-web/commit/1995db7f4342803732c7648ab3ca6d32442cc347)]:
+  - @spark-web/theme@5.12.0
+
+## 5.2.1
+
+### Patch Changes
+
+- [#685](https://github.com/brighte-labs/spark-web/pull/685)
+  [`ffbfa06`](https://github.com/brighte-labs/spark-web/commit/ffbfa066a4b2f72a838e68b49dd2c63ac44621a1)
+  Thanks [@michtntbrighte](https://github.com/michtntbrighte)! - : add truncate
+  the text with an ellipsis by number of lines
 
 ## 5.2.0
 

package/CLAUDE.md

@@ -0,0 +1,91 @@
+# @spark-web/text — AI Context
+
+## What this is
+
+The primary text rendering component. Applies theme typography tokens (size,
+weight, tone, baseline trimming) and renders as a block `div` by default. Use
+for body copy, labels, captions, status messages, and cell content inside
+tables.
+
+## What this is NOT
+
+- Not a heading — use `@spark-web/heading` for semantic headings (h1–h4)
+- Not a link — use `@spark-web/text-link` for anchor text
+- Not a layout container — do not put layout logic inside `Text`
+
+## Props interface
+
+| Prop               | Type                                                                                                                                                                                                                                                                                            | Default      | Notes                                                                                              |
+| ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ | -------------------------------------------------------------------------------------------------- |
+| `size`             | `'xsmall' \| 'small' \| 'standard' \| 'large'`                                                                                                                                                                                                                                                  | `'standard'` | Typography scale                                                                                   |
+| `tone`             | `'neutral' \| 'muted' \| 'link' \| 'disabled' \| 'field' \| 'fieldAccent' \| 'placeholder' \| 'accent' \| 'primary' \| 'primaryHover' \| 'primaryActive' \| 'secondary' \| 'secondaryHover' \| 'secondaryActive' \| 'caution' \| 'critical' \| 'info' \| 'positive' \| 'dark' \| 'brandSubtle'` | `'neutral'`  | Text color                                                                                         |
+| `weight`           | `'regular' \| 'semibold'`                                                                                                                                                                                                                                                                       | —            | Font weight override                                                                               |
+| `align`            | `'left' \| 'center' \| 'right'`                                                                                                                                                                                                                                                                 | —            | Block variant only (not compatible with `inline`)                                                  |
+| `inline`           | `boolean`                                                                                                                                                                                                                                                                                       | `false`      | Renders as `<span>` with `display: inline`                                                         |
+| `baseline`         | `boolean`                                                                                                                                                                                                                                                                                       | `true`       | Apply leading-trim (cap-height) — set `false` when not adjacent to other baseline-trimmed elements |
+| `overflowStrategy` | `'truncate' \| 'nowrap'`                                                                                                                                                                                                                                                                        | —            | Block variant only                                                                                 |
+| `numberOfLines`    | `number`                                                                                                                                                                                                                                                                                        | —            | Clamp to N lines with ellipsis                                                                     |
+| `tabularNumbers`   | `boolean`                                                                                                                                                                                                                                                                                       | `false`      | Monospace-width numerals                                                                           |
+| `transform`        | CSS `textTransform` value                                                                                                                                                                                                                                                                       | —            | `'uppercase'`, `'capitalize'`, etc.                                                                |
+| `as`               | HTML element tag                                                                                                                                                                                                                                                                                | `'div'`      | Use `'span'`, `'p'`, `'label'`, etc. as needed                                                     |
+| `data`             | `DataAttributeMap`                                                                                                                                                                                                                                                                              | —            | Test/analytics attributes                                                                          |
+
+## Token usage
+
+All typography values come from `theme.typography`. Text internally uses
+`useText()` which maps `size` → responsive font-size/line-height and applies
+baseline trimming. Never compute font sizes or colors directly — always use
+`Text` props.
+
+## Common patterns
+
+### Table cell content
+
+```tsx
+// Always size="small" in table cells
+<Text size="small">{row.name}</Text>
+```
+
+### Muted supporting text
+
+```tsx
+<Text tone="muted" size="small">
+  No records found
+</Text>
+```
+
+### Inline label within a block
+
+```tsx
+<Text>
+  Status:{' '}
+  <Text inline tone="positive">
+    Active
+  </Text>
+</Text>
+```
+
+### Truncate long values
+
+```tsx
+<Text size="small" overflowStrategy="truncate">
+  {longValue}
+</Text>
+```
+
+## Composition
+
+`Text` renders a `Box` internally. It provides a `TextContext` so nested `Text`
+components inherit `size`, `tone`, and `weight` — override only what differs
+from the parent.
+
+## Do NOTs
+
+- NEVER use raw CSS for font-size, color, or line-height — always use `Text`
+  props
+- NEVER use `tone="neutralInverted"` or `tone="mutedInverted"` directly — these
+  are automatic inversions applied by the `background` context
+- NEVER set `baseline={true}` (the default) on a `Text` that is not inside a
+  layout component that accounts for leading-trim — set `baseline={false}` when
+  in doubt for non-standard layouts
+- NEVER use `Text` for headings — use `@spark-web/heading`

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

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

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

@@ -1,6 +1,6 @@
 import type { ReactNode } from 'react';
 import type { UseTextProps } from "./use-text.js";
-declare type DefaultTextProps = {
+type DefaultTextProps = {
     size?: NonNullable<UseTextProps['size']>;
     tone?: NonNullable<UseTextProps['tone']>;
     weight?: NonNullable<UseTextProps['weight']>;
@@ -9,8 +9,8 @@ export declare function DefaultTextPropsProvider({ children, size, tone, weight,
     children: ReactNode;
 }): import("@emotion/react/jsx-runtime").JSX.Element;
 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: "medium" | "light" | "bold" | "thin" | "black" | "extralight" | "regular" | "semibold" | "extrabold" | undefined;
+    size: NonNullable<import("@spark-web/theme/src/themes/_types/typography").TypographySizing>;
+    tone: NonNullable<string | number>;
+    weight: NonNullable<"medium" | "light" | "bold" | "black" | "thin" | "extralight" | "regular" | "semibold" | "extrabold" | undefined> | undefined;
 };
 export {};

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

@@ -3,6 +3,7 @@ export { DefaultTextPropsProvider, useDefaultTextProps, } from "./default-text-p
 export { Strong } from "./strong.js";
 export { Text } from "./text.js";
 export { useForegroundTone } from "./use-foreground-tone.js";
+export { useNumberOfLines } from "./use-number-of-lines.js";
 export { useOverflowStrategy } from "./use-overflow-strategy.js";
 export { createTextStyles, useText } from "./use-text.js";
 export type { StrongProps } from "./strong.js";

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

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

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

@@ -1,24 +1,23 @@
-/** @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';
 import type { TextOverflowStrategy } from "./use-overflow-strategy.js";
 import type { UseTextProps } from "./use-text.js";
-declare type InlineProps = {
+type InlineProps = {
     align?: never;
     /** Display as an inline element. */
     inline?: boolean;
     overflowStrategy?: never;
 };
-declare type BlockProps = {
+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> & {
+export type TextProps = Partial<UseTextProps> & {
     /** The text content. */
     children?: ReactNode;
     /** Customizes the component element. */
@@ -31,9 +30,12 @@ export declare type TextProps = Partial<UseTextProps> & {
     tabularNumbers?: boolean;
     /** Transform the text casing. */
     transform?: CSSProperties['textTransform'];
+    /** Truncate the text with an ellipsis after computing the text layout, including line wrapping,
+     * such that the total number of lines does not exceed this number. */
+    numberOfLines?: number;
 } & (InlineProps | BlockProps);
-export declare const Text: <Comp extends import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> = "div">(props: {
+export declare const Text: <Comp extends import("react").ElementType = "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" | "set" | "stop" | "switch" | "textPath" | "tspan" | "use" | "view" | keyof HTMLElementTagNameMap ? (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" | "set" | "stop" | "switch" | "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>>;
+    ref?: import("react").Ref<Comp extends "symbol" | "text" | "clipPath" | "filter" | "mask" | "marker" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "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" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "set" | "stop" | "switch" | "textPath" | "tspan" | "use" | "view" | keyof HTMLElementTagNameMap ? (HTMLElementTagNameMap & Pick<SVGElementTagNameMap, "symbol" | "text" | "clipPath" | "filter" | "mask" | "marker" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "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" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "set" | "stop" | "switch" | "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;
 export {};

package/dist/declarations/src/use-foreground-tone.d.ts

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

package/dist/declarations/src/use-number-of-lines.d.ts

@@ -0,0 +1,2 @@
+import type { CSSProperties } from 'react';
+export declare const useNumberOfLines: (numberOfLines?: number) => CSSProperties;

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

@@ -15,7 +15,7 @@ declare const strategyMap: {
         readonly wordWrap: "break-word";
     };
 };
-export declare type TextOverflowStrategy = keyof typeof strategyMap;
+export type TextOverflowStrategy = keyof typeof strategyMap;
 export declare function useOverflowStrategy(strategy?: TextOverflowStrategy): {
     readonly whiteSpace: "nowrap";
 } | {

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

@@ -1,6 +1,6 @@
 import type { SparkTextDefinition, SparkTheme } from '@spark-web/theme';
 import type { ForegroundTone } from "./use-foreground-tone.js";
-export declare type UseTextProps = {
+export type UseTextProps = {
     /** Apply leading-trim styles. */
     baseline?: boolean;
     /** The size of the text. */

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

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

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

@@ -66,6 +66,23 @@ var Strong = function Strong(_ref) {
   });
 };
 
+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',
@@ -171,7 +188,7 @@ function createTextStyles(_ref2) {
   }, leadingTrim);
 }
 
-var _excluded = ["as", "children", "data", "id", "align", "baseline", "css", "inline", "overflowStrategy", "size", "tabularNumbers", "tone", "transform", "weight"];
+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,
@@ -187,6 +204,7 @@ var Text = ts.forwardRefWithAs(function (_ref, forwardedRef) {
     toneProp = _ref.tone,
     transform = _ref.transform,
     weightProp = _ref.weight,
+    numberOfLines = _ref.numberOfLines,
     consumerProps = _objectWithoutProperties(_ref, _excluded);
   var overflowStyles = useOverflowStrategy(overflowStrategy);
   var textContext = useTextContext();
@@ -205,6 +223,7 @@ var Text = ts.forwardRefWithAs(function (_ref, forwardedRef) {
     tone: tone,
     weight: weight
   });
+  var numberOfLinesStyle = useNumberOfLines(numberOfLines);
   var styles = [textStyles, {
     display: inline ? 'inline' : 'block',
     fontVariantNumeric: tabularNumbers ? 'tabular-nums' : undefined,
@@ -225,12 +244,21 @@ var Text = ts.forwardRefWithAs(function (_ref, forwardedRef) {
   }
 
   // prepare block variant
-  var content = overflowStrategy ?
-  // eslint-disable-next-line react/no-unknown-property
-  jsxRuntime.jsx("span", {
-    css: react$1.css(overflowStyles),
-    children: children
-  }) : children;
+  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,
@@ -246,7 +274,7 @@ var Text = ts.forwardRefWithAs(function (_ref, forwardedRef) {
       ref: forwardedRef,
       id: id,
       css: react$1.css(styles, cssProps),
-      children: content
+      children: content()
     }))
   });
 });
@@ -257,6 +285,7 @@ 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.prod.js

@@ -66,6 +66,23 @@ var Strong = function Strong(_ref) {
   });
 };
 
+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',
@@ -171,7 +188,7 @@ function createTextStyles(_ref2) {
   }, leadingTrim);
 }
 
-var _excluded = ["as", "children", "data", "id", "align", "baseline", "css", "inline", "overflowStrategy", "size", "tabularNumbers", "tone", "transform", "weight"];
+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,
@@ -187,6 +204,7 @@ var Text = ts.forwardRefWithAs(function (_ref, forwardedRef) {
     toneProp = _ref.tone,
     transform = _ref.transform,
     weightProp = _ref.weight,
+    numberOfLines = _ref.numberOfLines,
     consumerProps = _objectWithoutProperties(_ref, _excluded);
   var overflowStyles = useOverflowStrategy(overflowStrategy);
   var textContext = useTextContext();
@@ -205,6 +223,7 @@ var Text = ts.forwardRefWithAs(function (_ref, forwardedRef) {
     tone: tone,
     weight: weight
   });
+  var numberOfLinesStyle = useNumberOfLines(numberOfLines);
   var styles = [textStyles, {
     display: inline ? 'inline' : 'block',
     fontVariantNumeric: tabularNumbers ? 'tabular-nums' : undefined,
@@ -225,12 +244,21 @@ var Text = ts.forwardRefWithAs(function (_ref, forwardedRef) {
   }
 
   // prepare block variant
-  var content = overflowStrategy ?
-  // eslint-disable-next-line react/no-unknown-property
-  jsxRuntime.jsx("span", {
-    css: react$1.css(overflowStyles),
-    children: children
-  }) : children;
+  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,
@@ -246,7 +274,7 @@ var Text = ts.forwardRefWithAs(function (_ref, forwardedRef) {
       ref: forwardedRef,
       id: id,
       css: react$1.css(styles, cssProps),
-      children: content
+      children: content()
     }))
   });
 });
@@ -257,6 +285,7 @@ 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.esm.js

@@ -62,6 +62,23 @@ var Strong = function Strong(_ref) {
   });
 };
 
+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',
@@ -167,7 +184,7 @@ function createTextStyles(_ref2) {
   }, leadingTrim);
 }
 
-var _excluded = ["as", "children", "data", "id", "align", "baseline", "css", "inline", "overflowStrategy", "size", "tabularNumbers", "tone", "transform", "weight"];
+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,
@@ -183,6 +200,7 @@ var Text = forwardRefWithAs(function (_ref, forwardedRef) {
     toneProp = _ref.tone,
     transform = _ref.transform,
     weightProp = _ref.weight,
+    numberOfLines = _ref.numberOfLines,
     consumerProps = _objectWithoutProperties(_ref, _excluded);
   var overflowStyles = useOverflowStrategy(overflowStrategy);
   var textContext = useTextContext();
@@ -201,6 +219,7 @@ var Text = forwardRefWithAs(function (_ref, forwardedRef) {
     tone: tone,
     weight: weight
   });
+  var numberOfLinesStyle = useNumberOfLines(numberOfLines);
   var styles = [textStyles, {
     display: inline ? 'inline' : 'block',
     fontVariantNumeric: tabularNumbers ? 'tabular-nums' : undefined,
@@ -221,12 +240,21 @@ var Text = forwardRefWithAs(function (_ref, forwardedRef) {
   }
 
   // prepare block variant
-  var content = overflowStrategy ?
-  // eslint-disable-next-line react/no-unknown-property
-  jsx("span", {
-    css: css(overflowStyles),
-    children: children
-  }) : children;
+  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,
@@ -242,9 +270,9 @@ var Text = forwardRefWithAs(function (_ref, forwardedRef) {
       ref: forwardedRef,
       id: id,
       css: css(styles, cssProps),
-      children: content
+      children: content()
     }))
   });
 });
 
-export { DefaultTextPropsProvider, Strong, Text, createTextStyles, useDefaultTextProps, useForegroundTone, useOverflowStrategy, useText, useTextContext };
+export { DefaultTextPropsProvider, Strong, Text, createTextStyles, useDefaultTextProps, useForegroundTone, useNumberOfLines, useOverflowStrategy, useText, useTextContext };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spark-web/text",
-  "version": "5.3.0-rc.0",
+  "version": "5.3.1",
   "homepage": "https://github.com/brighte-labs/spark-web#readme",
   "repository": {
     "type": "git",
@@ -11,22 +11,23 @@
   "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": "^6.0.0-rc.0",
-    "@spark-web/theme": "^5.12.0-rc.0",
-    "@spark-web/utils": "^5.1.0-rc.0"
+    "@spark-web/box": "^6.0.1",
+    "@spark-web/theme": "^5.13.0",
+    "@spark-web/utils": "^5.1.0"
   },
   "devDependencies": {
     "@types/react": "^19.1.0",
     "react": "^19.1.0"
   },
   "peerDependencies": {
-    "react": ">=19.1.0"
+    "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
   },
   "engines": {
     "node": ">=14"