@vinyasa/typography 1.0.24 → 1.0.25

package/README.md

@@ -1,6 +1,6 @@
 # @vinyasa/typography
 
-10 typography primitives: Text, Heading, Paragraph, Label, Caption, Link, Code, Kbd, Blockquote, MarkdownRenderer.
+13 typography primitives: Text, Heading, Paragraph, Label, Caption, Link, Code, Kbd, Blockquote, Mark, Highlight, List, MarkdownRenderer.
 
 ## Installation
 
@@ -39,7 +39,44 @@ The one real recipe every other component in this package builds on.
 </Text>
 ```
 
-`size`: `xs`/`sm`/`md`/`lg`/`xl`/`2xl`/`3xl`/`4xl`. `weight`: `regular`/`medium`/`semibold`/`bold`. `align`: `left`/`center`/`right`. `color`: `default`/`muted`/`primary`/`error`. `truncate`: boolean.
+`size`: `xs`/`sm`/`md`/`lg`/`xl`/`2xl`/`3xl`/`4xl`. `weight`: `regular`/`medium`/`semibold`/`bold`. `align`: `left`/`center`/`right`. `color`: `default`/`muted`/`primary`/`info`/`success`/`warning`/`error`.
+
+Other props: `italic` (boolean), `textTransform` (`uppercase`/`lowercase`/`capitalize`/`none`), `decoration` (`underline`/`line-through`/`none`), `letterSpacing`/`lineHeight` (`tight`/`normal`/`wide` and `tight`/`normal`/`loose` respectively, off the shared spacing tokens), `textWrap` (`wrap`/`balance`/`pretty`/`nowrap`), `lineClamp` (number of lines before an ellipsis), `inherit` (boolean — skip Text's own font-size/weight/color/line-height and pick up the closest styled ancestor's instead), and `variant="gradient"` + `gradient={{ from, to, deg? }}` for gradient text.
+
+`truncate`: `boolean | 'start' | 'end'` — `true` is an alias for `'end'` (clips the end with an ellipsis); `'start'` clips the beginning instead, for cases like a long file path where the filename at the end matters most.
+
+```tsx
+<Text truncate="start" style={{ width: '12rem' }}>
+	/Users/rohit/projects/vinyasa/report-final.pdf
+</Text>
+```
+
+#### Showing the full text on hover when truncated
+
+`truncate`/`lineClamp` only clip visually — they don't add any hover affordance on their own. Pair `Text` with `@vinyasa/typography`'s `useIsTruncated` hook and `@vinyasa/overlay`'s `Tooltip` to show the full content only when it's actually overflowing, not on every hover:
+
+```tsx
+import { Text, useIsTruncated } from '@vinyasa/typography';
+import { Tooltip } from '@vinyasa/overlay';
+import { useState } from 'react';
+
+const TruncatedLabel = ({ text }: { text: string }) => {
+	const [ref, isTruncated] = useIsTruncated<HTMLSpanElement>([text]);
+	const [open, setOpen] = useState(false);
+
+	return (
+		<Tooltip label={text} open={isTruncated && open} onOpenChange={setOpen}>
+			<Text ref={ref} truncate="end" style={{ maxWidth: '12rem' }}>
+				{text}
+			</Text>
+		</Tooltip>
+	);
+};
+```
+
+`useIsTruncated` returns a ref (attach it to the truncated element) and a boolean, re-checked on every resize of that element via `ResizeObserver`. Pass the truncated content itself as the hook's `deps` argument (as above) so a content change with no resize still re-checks. `@vinyasa/typography` itself stays free of any dependency on `@vinyasa/overlay` — the hook only measures overflow; wiring it to a `Tooltip` is left to the consumer, same as this example.
+
+`Tooltip` stays mounted unconditionally, with `open` mirrored into local state via `onOpenChange` and forced closed whenever `isTruncated` is false — conditionally rendering the `Tooltip` wrapper only once truncated would remount `Text`'s DOM node (it moves one level deeper, under `Tooltip.Trigger`'s Slot), detaching `useIsTruncated`'s `ResizeObserver` from the live element in the process.
 
 ### Heading
 
@@ -90,6 +127,44 @@ Real anchor props (`href`, `target`, `rel`), plus `size`/`weight`/`truncate` fro
 <Blockquote>Design is not just what it looks like. Design is how it works.</Blockquote>
 ```
 
+### Mark
+
+Native `<mark>`, styled off the existing `statusWarning` tokens (no new tokens needed).
+
+```tsx
+<Text>
+	The quick brown fox <Mark>jumps over</Mark> the lazy dog.
+</Text>
+```
+
+### Highlight
+
+Wraps every case-insensitive occurrence of `highlight` in `Mark`. `highlight` takes one term or a list. `children` must be a plain string — rich content can't be reliably split and re-wrapped.
+
+```tsx
+<Highlight highlight={['React', 'vanilla-extract']}>
+	This design system is built with React and vanilla-extract
+</Highlight>
+```
+
+### List
+
+`List`/`List.Item` — no simple non-compound form, since composing `.Item` children _is_ the natural simple form for a list.
+
+```tsx
+<List type="ordered" spacing={2}>
+	<List.Item>Write the contract</List.Item>
+	<List.Item>Stabilize tokens and layout</List.Item>
+</List>
+
+<List icon={<CheckIcon />} withPadding={false}>
+	<List.Item>Consistent spacing scale</List.Item>
+	<List.Item icon={<WarningIcon />}>One item with its own override icon</List.Item>
+</List>
+```
+
+`type`: `unordered` (default, `<ul>`) / `ordered` (`<ol>`). `icon` on `List` sets every item's default icon; an item's own `icon` overrides it. `withPadding` (default `true`) keeps the browser's list indent — turn it off once every item has an `icon`, which already replaces the native marker.
+
 ### MarkdownRenderer
 
 Wraps [`react-markdown`](https://github.com/remarkjs/react-markdown), mapping every markdown element to this package's own components (headings → `Heading`, paragraphs → `Paragraph`, links → `Link`, code → `Code`, blockquotes → `Blockquote`) so rendered markdown automatically picks up your theme.

package/dist/cjs/caption.cjs

@@ -227,7 +227,41 @@ var Text_css_text = createRuntimeFn({
             error: '_4sie9wm'
         },
         truncate: {
-            true: '_4sie9wn'
+            end: '_4sie9wn',
+            start: '_4sie9wo'
+        },
+        italic: {
+            true: '_4sie9wp'
+        },
+        textTransform: {
+            uppercase: '_4sie9wq',
+            lowercase: '_4sie9wr',
+            capitalize: '_4sie9ws',
+            none: '_4sie9wt'
+        },
+        decoration: {
+            underline: '_4sie9wu',
+            'line-through': '_4sie9wv',
+            none: '_4sie9ww'
+        },
+        letterSpacing: {
+            tight: '_4sie9wx',
+            normal: '_4sie9wy',
+            wide: '_4sie9wz'
+        },
+        lineHeight: {
+            tight: '_4sie9w10',
+            normal: '_4sie9w11',
+            loose: '_4sie9w12'
+        },
+        textWrap: {
+            wrap: '_4sie9w13',
+            balance: '_4sie9w14',
+            pretty: '_4sie9w15',
+            nowrap: '_4sie9w16'
+        },
+        variant: {
+            gradient: '_4sie9w17'
         }
     },
     defaultVariants: {
@@ -319,13 +353,23 @@ const Text = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)((_0, _
     let _ref = [
         _0,
         _1
-    ], [_ref1, ..._rest] = _ref, { as: Component = 'span', size, weight, align, color, truncate, m, mt, mr, mb, ml, mx, my, p, pt, pr, pb, pl, px, py, className, style, children } = _ref1, rest = _object_without_properties(_ref1, [
+    ], [_ref1, ..._rest] = _ref, { as: Component = 'span', size, weight, align, color, truncate, italic, textTransform, decoration, letterSpacing, lineHeight, textWrap, variant, lineClamp, inherit, gradient, m, mt, mr, mb, ml, mx, my, p, pt, pr, pb, pl, px, py, className, style, children } = _ref1, rest = _object_without_properties(_ref1, [
         "as",
         "size",
         "weight",
         "align",
         "color",
         "truncate",
+        "italic",
+        "textTransform",
+        "decoration",
+        "letterSpacing",
+        "lineHeight",
+        "textWrap",
+        "variant",
+        "lineClamp",
+        "inherit",
+        "gradient",
         "m",
         "mt",
         "mr",
@@ -344,20 +388,24 @@ const Text = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)((_0, _
         "style",
         "children"
     ]), [ref] = _rest;
+    var _gradient_deg;
     const themedRef = (0, tokens_namespaceObject.useThemedRef)(ref);
-    const classes = className ? `${Text_css_text({
+    const normalizedTruncate = true === truncate ? 'end' : false === truncate ? void 0 : truncate;
+    const variantArgs = {
         size,
         weight,
         align,
         color,
-        truncate
-    })} ${className}` : Text_css_text({
-        size,
-        weight,
-        align,
-        color,
-        truncate
-    });
+        truncate: normalizedTruncate,
+        italic,
+        textTransform,
+        decoration,
+        letterSpacing,
+        lineHeight,
+        textWrap,
+        variant
+    };
+    const classes = className ? `${Text_css_text(variantArgs)} ${className}` : Text_css_text(variantArgs);
     const spacingStyle = resolveSpacingStyle({
         m,
         mt,
@@ -374,10 +422,26 @@ const Text = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)((_0, _
         px,
         py
     });
+    const inheritStyle = inherit ? {
+        fontFamily: 'inherit',
+        fontSize: 'inherit',
+        fontWeight: 'inherit',
+        color: 'inherit',
+        lineHeight: 'inherit'
+    } : void 0;
+    const gradientStyle = 'gradient' === variant && gradient ? {
+        backgroundImage: `linear-gradient(${String(null != (_gradient_deg = gradient.deg) ? _gradient_deg : 45)}deg, ${gradient.from}, ${gradient.to})`
+    } : void 0;
+    const lineClampStyle = void 0 !== lineClamp ? {
+        display: '-webkit-box',
+        WebkitLineClamp: lineClamp,
+        WebkitBoxOrient: 'vertical',
+        overflow: 'hidden'
+    } : void 0;
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Component, _object_spread_props(_object_spread({
         ref: themedRef,
         className: classes,
-        style: _object_spread({}, spacingStyle, style)
+        style: _object_spread({}, spacingStyle, inheritStyle, gradientStyle, lineClampStyle, style)
     }, rest), {
         children: children
     }));

package/dist/cjs/caption.css

@@ -94,6 +94,96 @@
 ._4sie9wn {
   text-overflow: ellipsis;
   white-space: nowrap;
+  max-width: 100%;
+  display: inline-block;
   overflow: hidden;
 }
 
+._4sie9wo {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-align: left;
+  direction: rtl;
+  max-width: 100%;
+  display: inline-block;
+  overflow: hidden;
+}
+
+._4sie9wp {
+  font-style: italic;
+}
+
+._4sie9wq {
+  text-transform: uppercase;
+}
+
+._4sie9wr {
+  text-transform: lowercase;
+}
+
+._4sie9ws {
+  text-transform: capitalize;
+}
+
+._4sie9wt {
+  text-transform: none;
+}
+
+._4sie9wu {
+  text-decoration: underline;
+}
+
+._4sie9wv {
+  text-decoration: line-through;
+}
+
+._4sie9ww {
+  text-decoration: none;
+}
+
+._4sie9wx {
+  letter-spacing: var(--vinyasa-letter-spacing-tight);
+}
+
+._4sie9wy {
+  letter-spacing: var(--vinyasa-letter-spacing-normal);
+}
+
+._4sie9wz {
+  letter-spacing: var(--vinyasa-letter-spacing-wide);
+}
+
+._4sie9w10 {
+  line-height: var(--vinyasa-line-height-tight);
+}
+
+._4sie9w11 {
+  line-height: var(--vinyasa-line-height-normal);
+}
+
+._4sie9w12 {
+  line-height: var(--vinyasa-line-height-loose);
+}
+
+._4sie9w13 {
+  text-wrap: wrap;
+}
+
+._4sie9w14 {
+  text-wrap: balance;
+}
+
+._4sie9w15 {
+  text-wrap: pretty;
+}
+
+._4sie9w16 {
+  text-wrap: nowrap;
+}
+
+._4sie9w17 {
+  color: rgba(0, 0, 0, 0);
+  -webkit-background-clip: text;
+  background-clip: text;
+}
+

package/dist/cjs/heading.cjs

@@ -227,7 +227,41 @@ var Text_css_text = createRuntimeFn({
             error: '_4sie9wm'
         },
         truncate: {
-            true: '_4sie9wn'
+            end: '_4sie9wn',
+            start: '_4sie9wo'
+        },
+        italic: {
+            true: '_4sie9wp'
+        },
+        textTransform: {
+            uppercase: '_4sie9wq',
+            lowercase: '_4sie9wr',
+            capitalize: '_4sie9ws',
+            none: '_4sie9wt'
+        },
+        decoration: {
+            underline: '_4sie9wu',
+            'line-through': '_4sie9wv',
+            none: '_4sie9ww'
+        },
+        letterSpacing: {
+            tight: '_4sie9wx',
+            normal: '_4sie9wy',
+            wide: '_4sie9wz'
+        },
+        lineHeight: {
+            tight: '_4sie9w10',
+            normal: '_4sie9w11',
+            loose: '_4sie9w12'
+        },
+        textWrap: {
+            wrap: '_4sie9w13',
+            balance: '_4sie9w14',
+            pretty: '_4sie9w15',
+            nowrap: '_4sie9w16'
+        },
+        variant: {
+            gradient: '_4sie9w17'
         }
     },
     defaultVariants: {
@@ -319,13 +353,23 @@ const Text = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)((_0, _
     let _ref = [
         _0,
         _1
-    ], [_ref1, ..._rest] = _ref, { as: Component = 'span', size, weight, align, color, truncate, m, mt, mr, mb, ml, mx, my, p, pt, pr, pb, pl, px, py, className, style, children } = _ref1, rest = _object_without_properties(_ref1, [
+    ], [_ref1, ..._rest] = _ref, { as: Component = 'span', size, weight, align, color, truncate, italic, textTransform, decoration, letterSpacing, lineHeight, textWrap, variant, lineClamp, inherit, gradient, m, mt, mr, mb, ml, mx, my, p, pt, pr, pb, pl, px, py, className, style, children } = _ref1, rest = _object_without_properties(_ref1, [
         "as",
         "size",
         "weight",
         "align",
         "color",
         "truncate",
+        "italic",
+        "textTransform",
+        "decoration",
+        "letterSpacing",
+        "lineHeight",
+        "textWrap",
+        "variant",
+        "lineClamp",
+        "inherit",
+        "gradient",
         "m",
         "mt",
         "mr",
@@ -344,20 +388,24 @@ const Text = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)((_0, _
         "style",
         "children"
     ]), [ref] = _rest;
+    var _gradient_deg;
     const themedRef = (0, tokens_namespaceObject.useThemedRef)(ref);
-    const classes = className ? `${Text_css_text({
+    const normalizedTruncate = true === truncate ? 'end' : false === truncate ? void 0 : truncate;
+    const variantArgs = {
         size,
         weight,
         align,
         color,
-        truncate
-    })} ${className}` : Text_css_text({
-        size,
-        weight,
-        align,
-        color,
-        truncate
-    });
+        truncate: normalizedTruncate,
+        italic,
+        textTransform,
+        decoration,
+        letterSpacing,
+        lineHeight,
+        textWrap,
+        variant
+    };
+    const classes = className ? `${Text_css_text(variantArgs)} ${className}` : Text_css_text(variantArgs);
     const spacingStyle = resolveSpacingStyle({
         m,
         mt,
@@ -374,10 +422,26 @@ const Text = /*#__PURE__*/ (0, external_react_namespaceObject.forwardRef)((_0, _
         px,
         py
     });
+    const inheritStyle = inherit ? {
+        fontFamily: 'inherit',
+        fontSize: 'inherit',
+        fontWeight: 'inherit',
+        color: 'inherit',
+        lineHeight: 'inherit'
+    } : void 0;
+    const gradientStyle = 'gradient' === variant && gradient ? {
+        backgroundImage: `linear-gradient(${String(null != (_gradient_deg = gradient.deg) ? _gradient_deg : 45)}deg, ${gradient.from}, ${gradient.to})`
+    } : void 0;
+    const lineClampStyle = void 0 !== lineClamp ? {
+        display: '-webkit-box',
+        WebkitLineClamp: lineClamp,
+        WebkitBoxOrient: 'vertical',
+        overflow: 'hidden'
+    } : void 0;
     return /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(Component, _object_spread_props(_object_spread({
         ref: themedRef,
         className: classes,
-        style: _object_spread({}, spacingStyle, style)
+        style: _object_spread({}, spacingStyle, inheritStyle, gradientStyle, lineClampStyle, style)
     }, rest), {
         children: children
     }));

package/dist/cjs/heading.css

@@ -94,6 +94,96 @@
 ._4sie9wn {
   text-overflow: ellipsis;
   white-space: nowrap;
+  max-width: 100%;
+  display: inline-block;
   overflow: hidden;
 }
 
+._4sie9wo {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  text-align: left;
+  direction: rtl;
+  max-width: 100%;
+  display: inline-block;
+  overflow: hidden;
+}
+
+._4sie9wp {
+  font-style: italic;
+}
+
+._4sie9wq {
+  text-transform: uppercase;
+}
+
+._4sie9wr {
+  text-transform: lowercase;
+}
+
+._4sie9ws {
+  text-transform: capitalize;
+}
+
+._4sie9wt {
+  text-transform: none;
+}
+
+._4sie9wu {
+  text-decoration: underline;
+}
+
+._4sie9wv {
+  text-decoration: line-through;
+}
+
+._4sie9ww {
+  text-decoration: none;
+}
+
+._4sie9wx {
+  letter-spacing: var(--vinyasa-letter-spacing-tight);
+}
+
+._4sie9wy {
+  letter-spacing: var(--vinyasa-letter-spacing-normal);
+}
+
+._4sie9wz {
+  letter-spacing: var(--vinyasa-letter-spacing-wide);
+}
+
+._4sie9w10 {
+  line-height: var(--vinyasa-line-height-tight);
+}
+
+._4sie9w11 {
+  line-height: var(--vinyasa-line-height-normal);
+}
+
+._4sie9w12 {
+  line-height: var(--vinyasa-line-height-loose);
+}
+
+._4sie9w13 {
+  text-wrap: wrap;
+}
+
+._4sie9w14 {
+  text-wrap: balance;
+}
+
+._4sie9w15 {
+  text-wrap: pretty;
+}
+
+._4sie9w16 {
+  text-wrap: nowrap;
+}
+
+._4sie9w17 {
+  color: rgba(0, 0, 0, 0);
+  -webkit-background-clip: text;
+  background-clip: text;
+}
+