@carbonid1/design-system 5.3.0 → 5.4.0

package/dist/Text/Text.d.ts

@@ -12,5 +12,5 @@ declare const textVariants: (props?: ({
     weight?: "bold" | "regular" | "medium" | "semibold" | null | undefined;
     align?: "end" | "center" | "start" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-declare const Text: <E extends ElementType = "p">({ as, variant, color, font, weight, align, numeric, truncate, className, ...props }: TextProps<E>) => import("react/jsx-runtime").JSX.Element;
+declare const Text: <E extends ElementType = "p">({ as, variant, color, font, weight, align, numeric, truncate, lines, className, style, title, children, ...props }: TextProps<E>) => import("react/jsx-runtime").JSX.Element;
 export { Text, textVariants };

package/dist/Text/Text.js

@@ -53,9 +53,42 @@ const textVariants = cva('', {
 });
 /** Variants that read as secondary chrome and default to the muted token. */
 const MUTED_VARIANTS = new Set(['caption', 'overline']);
-const Text = ({ as, variant = 'body', color, font, weight, align, numeric, truncate, className, ...props }) => {
+/**
+ * Literal clamp classes (not a template literal) so a consumer's `@source` scan
+ * over the published `dist` can see them. Line counts outside this range fall
+ * back to an inline `-webkit-line-clamp` style instead.
+ */
+const LINE_CLAMP = {
+    1: 'line-clamp-1',
+    2: 'line-clamp-2',
+    3: 'line-clamp-3',
+    4: 'line-clamp-4',
+    5: 'line-clamp-5',
+    6: 'line-clamp-6',
+};
+const Text = ({ as, variant = 'body', color, font, weight, align, numeric, truncate, lines, className, style, title, children, ...props }) => {
     const Component = (as ?? 'p');
     const resolvedColor = color ?? (variant && MUTED_VARIANTS.has(variant) ? 'muted' : 'default');
-    return (_jsx(Component, { className: cn(textVariants({ variant, color: resolvedColor, font, weight, align }), numeric && 'tabular-nums', truncate && 'truncate', className), ...props }));
+    // Only positive integers clamp; degenerate counts (0, negative, fractional,
+    // NaN) fall back to no clamp rather than emitting an invalid -webkit-line-clamp.
+    const clampLines = typeof lines === 'number' && Number.isInteger(lines) && lines > 0 ? lines : undefined;
+    // Multi-line clamp wins over single-line truncate. A count outside the mapped
+    // range is applied via inline style rather than a utility class.
+    const clampClass = clampLines != null ? LINE_CLAMP[clampLines] : truncate ? 'truncate' : undefined;
+    const clampStyle = clampLines != null && LINE_CLAMP[clampLines] === undefined
+        ? {
+            display: '-webkit-box',
+            WebkitBoxOrient: 'vertical',
+            WebkitLineClamp: clampLines,
+            overflow: 'hidden',
+        }
+        : undefined;
+    // When clipping a string/number child with no explicit title, surface the full
+    // text as a native tooltip so it stays readable on hover. Not overflow-aware
+    // yet (it shows even when the text fits) — a styled, measured reveal is a follow-up.
+    const isClipping = truncate || clampLines != null;
+    const childIsText = typeof children === 'string' || typeof children === 'number';
+    const resolvedTitle = title ?? (isClipping && childIsText ? String(children) : undefined);
+    return (_jsx(Component, { className: cn(textVariants({ variant, color: resolvedColor, font, weight, align }), numeric && 'tabular-nums', clampClass, className), title: resolvedTitle, style: clampStyle ? { ...clampStyle, ...style } : style, ...props, children: children }));
 };
 export { Text, textVariants };

package/dist/Text/Text.types.d.ts

@@ -6,8 +6,10 @@ type TextOwnProps<E extends ElementType = 'p'> = VariantProps<typeof textVariant
     as?: E;
     /** Tabular (fixed-width) digits for numeric columns, timers, and metrics. */
     numeric?: boolean;
-    /** Clamp to a single line with an ellipsis (Tailwind's `truncate`). */
+    /** Clamp to a single line with an ellipsis (Tailwind's `truncate`). When the child is a string or number, the full text is exposed via the native `title` (mouse-only, and not yet overflow-aware — it shows even when the text fits). */
     truncate?: boolean;
+    /** Clamp to N lines with an ellipsis (uses `-webkit-box`, so prefer `truncate` for single-line inline text). Positive integers only; takes precedence over `truncate`. Like it, a string/number child is surfaced via the native `title`. Idiomatic range 1–6. */
+    lines?: number;
     className?: string;
 };
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carbonid1/design-system",
-  "version": "5.3.0",
+  "version": "5.4.0",
   "description": "Shared React UI primitives + design tokens (themes, postcss config)",
   "repository": {
     "type": "git",