@vinyasa/typography 1.0.24 → 1.0.25

package/dist/esm/components/highlight/Highlight.d.ts

@@ -0,0 +1,14 @@
+import { type TextProps } from '../text/Text';
+export type HighlightProps = Omit<TextProps, 'children'> & {
+    /** Plain text to search within. Rich `children` can't be reliably split and re-wrapped, so this only accepts a string, unlike Text's own `children`. */
+    children: string;
+    /** Substring(s) to wrap in a `Mark`, matched case-insensitively. */
+    highlight: string | string[];
+};
+declare const Highlight: import("react").ForwardRefExoticComponent<Omit<TextProps, "children"> & {
+    /** Plain text to search within. Rich `children` can't be reliably split and re-wrapped, so this only accepts a string, unlike Text's own `children`. */
+    children: string;
+    /** Substring(s) to wrap in a `Mark`, matched case-insensitively. */
+    highlight: string | string[];
+} & import("react").RefAttributes<HTMLElement>>;
+export default Highlight;

package/dist/esm/components/highlight/index.d.ts

@@ -0,0 +1 @@
+export { default, type HighlightProps } from './Highlight';

package/dist/esm/components/list/List.css.d.ts

@@ -0,0 +1,47 @@
+export declare const list: import("@vanilla-extract/recipes").RuntimeFn<{
+    spacing: {
+        1: {
+            gap: `var(--${string})`;
+        };
+        2: {
+            gap: `var(--${string})`;
+        };
+        3: {
+            gap: `var(--${string})`;
+        };
+        4: {
+            gap: `var(--${string})`;
+        };
+        5: {
+            gap: `var(--${string})`;
+        };
+        6: {
+            gap: `var(--${string})`;
+        };
+    };
+    withPadding: {
+        true: {
+            paddingLeft: `var(--${string})`;
+        };
+        false: {
+            paddingLeft: number;
+            listStyle: "none";
+        };
+    };
+}>;
+export declare const item: import("@vanilla-extract/recipes").RuntimeFn<{
+    withIcon: {
+        true: {
+            display: "flex";
+            alignItems: "flex-start";
+            gap: `var(--${string})`;
+            listStyle: "none";
+        };
+    };
+    center: {
+        true: {
+            alignItems: "center";
+        };
+    };
+}>;
+export declare const itemIcon: string;

package/dist/esm/components/list/List.d.ts

@@ -0,0 +1,52 @@
+import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
+import { type SpaceScale, type SpacingProps } from '../../spacing';
+export type ListRootProps = Omit<ComponentPropsWithoutRef<'ul'>, 'type'> & SpacingProps & {
+    /** Renders `<ol>` instead of `<ul>`. */
+    type?: 'unordered' | 'ordered';
+    /** Gap between items, on the shared 1-6 space scale. */
+    spacing?: SpaceScale;
+    /**
+     * Keeps the browser's default list indent. On by default; turn off
+     * when every item supplies its own `icon`, which already replaces the
+     * native marker and its indent.
+     */
+    withPadding?: boolean;
+    /**
+     * Default icon rendered before every item's content, replacing the
+     * native bullet/number. Overridable per-item via `List.Item`'s own
+     * `icon`.
+     */
+    icon?: ReactNode;
+    /** Vertically centers each item's icon against its content instead of aligning both to the top. */
+    center?: boolean;
+};
+export type ListItemProps = ComponentPropsWithoutRef<'li'> & {
+    /** Overrides the list's own default `icon` for this item only. */
+    icon?: ReactNode;
+};
+declare const List: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref">, "type"> & SpacingProps & {
+    /** Renders `<ol>` instead of `<ul>`. */
+    type?: "unordered" | "ordered";
+    /** Gap between items, on the shared 1-6 space scale. */
+    spacing?: SpaceScale;
+    /**
+     * Keeps the browser's default list indent. On by default; turn off
+     * when every item supplies its own `icon`, which already replaces the
+     * native marker and its indent.
+     */
+    withPadding?: boolean;
+    /**
+     * Default icon rendered before every item's content, replacing the
+     * native bullet/number. Overridable per-item via `List.Item`'s own
+     * `icon`.
+     */
+    icon?: ReactNode;
+    /** Vertically centers each item's icon against its content instead of aligning both to the top. */
+    center?: boolean;
+} & import("react").RefAttributes<HTMLOListElement | HTMLUListElement>> & {
+    Item: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & {
+        /** Overrides the list's own default `icon` for this item only. */
+        icon?: ReactNode;
+    } & import("react").RefAttributes<HTMLLIElement>>;
+};
+export default List;

package/dist/esm/components/list/index.d.ts

@@ -0,0 +1 @@
+export { default, type ListItemProps, type ListRootProps } from './List';

package/dist/esm/components/mark/Mark.css.d.ts

@@ -0,0 +1 @@
+export declare const mark: string;

package/dist/esm/components/mark/Mark.d.ts

@@ -0,0 +1,5 @@
+import { type ComponentPropsWithoutRef } from 'react';
+import { type SpacingProps } from '../../spacing';
+export type MarkProps = ComponentPropsWithoutRef<'mark'> & SpacingProps;
+declare const Mark: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & SpacingProps & import("react").RefAttributes<HTMLElement>>;
+export default Mark;

package/dist/esm/components/mark/index.d.ts

@@ -0,0 +1 @@
+export { default, type MarkProps } from './Mark';

package/dist/esm/components/text/Text.css.d.ts

@@ -74,10 +74,94 @@ export declare const text: import("@vanilla-extract/recipes").RuntimeFn<{
         };
     };
     truncate: {
-        true: {
+        end: {
+            display: "inline-block";
+            maxWidth: "100%";
+            overflow: "hidden";
+            textOverflow: "ellipsis";
+            whiteSpace: "nowrap";
+        };
+        start: {
+            display: "inline-block";
+            maxWidth: "100%";
             overflow: "hidden";
             textOverflow: "ellipsis";
             whiteSpace: "nowrap";
+            direction: "rtl";
+            textAlign: "left";
+        };
+    };
+    italic: {
+        true: {
+            fontStyle: "italic";
+        };
+    };
+    textTransform: {
+        uppercase: {
+            textTransform: "uppercase";
+        };
+        lowercase: {
+            textTransform: "lowercase";
+        };
+        capitalize: {
+            textTransform: "capitalize";
+        };
+        none: {
+            textTransform: "none";
+        };
+    };
+    decoration: {
+        underline: {
+            textDecoration: "underline";
+        };
+        'line-through': {
+            textDecoration: "line-through";
+        };
+        none: {
+            textDecoration: "none";
+        };
+    };
+    letterSpacing: {
+        tight: {
+            letterSpacing: `var(--${string})`;
+        };
+        normal: {
+            letterSpacing: `var(--${string})`;
+        };
+        wide: {
+            letterSpacing: `var(--${string})`;
+        };
+    };
+    lineHeight: {
+        tight: {
+            lineHeight: `var(--${string})`;
+        };
+        normal: {
+            lineHeight: `var(--${string})`;
+        };
+        loose: {
+            lineHeight: `var(--${string})`;
+        };
+    };
+    textWrap: {
+        wrap: {
+            textWrap: "wrap";
+        };
+        balance: {
+            textWrap: "balance";
+        };
+        pretty: {
+            textWrap: "pretty";
+        };
+        nowrap: {
+            textWrap: "nowrap";
+        };
+    };
+    variant: {
+        gradient: {
+            backgroundClip: "text";
+            WebkitBackgroundClip: "text";
+            color: "transparent";
         };
     };
 }>;

package/dist/esm/components/text/Text.d.ts

@@ -2,13 +2,59 @@ import type { RecipeVariants } from '@vanilla-extract/recipes';
 import type { PolymorphicProps } from '../../polymorphic';
 import { type SpacingProps } from '../../spacing';
 import { text } from './Text.css';
-type TextVariants = RecipeVariants<typeof text>;
-export type TextProps = PolymorphicProps & TextVariants & SpacingProps;
-declare const Text: import("react").ForwardRefExoticComponent<PolymorphicProps & {
-    size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | undefined;
-    weight?: "medium" | "bold" | "regular" | "semibold" | undefined;
-    align?: "left" | "right" | "center" | undefined;
-    color?: "default" | "muted" | "primary" | "info" | "success" | "warning" | "error" | undefined;
-    truncate?: boolean | undefined;
-} & SpacingProps & import("react").RefAttributes<HTMLElement>>;
+type TextVariants = Omit<NonNullable<RecipeVariants<typeof text>>, 'truncate'>;
+export type TextProps = PolymorphicProps & TextVariants & SpacingProps & {
+    /**
+     * Truncate to one line with an ellipsis. `true` (or `'end'`) clips the
+     * end; `'start'` clips the beginning instead — e.g. a long file path
+     * where the filename at the end matters most.
+     */
+    truncate?: boolean | 'start' | 'end';
+    /**
+     * Clamp to this many lines with a trailing ellipsis instead of a
+     * single-line `truncate`. Takes precedence over `truncate` when both
+     * are set.
+     */
+    lineClamp?: number;
+    /**
+     * Skip Text's own font-size/weight/color/line-height and inherit them
+     * from the closest styled ancestor — for composing Text inside a
+     * heading or another Text where it should pick up the surrounding
+     * type instead of resetting to Text's own defaults.
+     */
+    inherit?: boolean;
+    /** Paints the text with a gradient instead of a solid `color`. Only applied when `variant="gradient"`. */
+    gradient?: {
+        from: string;
+        to: string;
+        deg?: number;
+    };
+};
+declare const Text: import("react").ForwardRefExoticComponent<PolymorphicProps & TextVariants & SpacingProps & {
+    /**
+     * Truncate to one line with an ellipsis. `true` (or `'end'`) clips the
+     * end; `'start'` clips the beginning instead — e.g. a long file path
+     * where the filename at the end matters most.
+     */
+    truncate?: boolean | "start" | "end";
+    /**
+     * Clamp to this many lines with a trailing ellipsis instead of a
+     * single-line `truncate`. Takes precedence over `truncate` when both
+     * are set.
+     */
+    lineClamp?: number;
+    /**
+     * Skip Text's own font-size/weight/color/line-height and inherit them
+     * from the closest styled ancestor — for composing Text inside a
+     * heading or another Text where it should pick up the surrounding
+     * type instead of resetting to Text's own defaults.
+     */
+    inherit?: boolean;
+    /** Paints the text with a gradient instead of a solid `color`. Only applied when `variant="gradient"`. */
+    gradient?: {
+        from: string;
+        to: string;
+        deg?: number;
+    };
+} & import("react").RefAttributes<HTMLElement>>;
 export default Text;

package/dist/esm/highlight.d.ts

@@ -0,0 +1,2 @@
+export * from './components/highlight/index';
+export { default } from './components/highlight/index';

package/dist/esm/highlight.js

@@ -0,0 +1 @@
+export { Highlight as default } from "./767.js";

package/dist/esm/index.d.ts

@@ -2,9 +2,13 @@ export { default as Blockquote, type BlockquoteProps } from './components/blockq
 export { default as Caption, type CaptionProps } from './components/caption';
 export { default as Code, type CodeProps } from './components/code';
 export { default as Heading, type HeadingLevel, type HeadingProps } from './components/heading';
+export { default as Highlight, type HighlightProps } from './components/highlight';
 export { default as Kbd, type KbdProps } from './components/kbd';
 export { default as Label, type LabelProps } from './components/label';
 export { default as Link, type LinkProps } from './components/link';
+export { default as List, type ListItemProps, type ListRootProps } from './components/list';
+export { default as Mark, type MarkProps } from './components/mark';
 export { default as MarkdownRenderer, type MarkdownRendererProps, } from './components/markdown-renderer';
 export { default as Paragraph, type ParagraphProps } from './components/paragraph';
 export { default as Text, type TextProps } from './components/text';
+export { useIsTruncated } from './useIsTruncated';

package/dist/esm/index.js

@@ -1,10 +1,36 @@
+import { useLayoutEffect, useRef, useState } from "react";
+const checkOverflow = (element)=>element.scrollWidth > element.clientWidth || element.scrollHeight > element.clientHeight;
+const useIsTruncated = (deps = [])=>{
+    const ref = useRef(null);
+    const [isTruncated, setIsTruncated] = useState(false);
+    useLayoutEffect(()=>{
+        const element = ref.current;
+        if (!element) return;
+        setIsTruncated(checkOverflow(element));
+        const observer = new ResizeObserver(()=>{
+            setIsTruncated(checkOverflow(element));
+        });
+        observer.observe(element);
+        return ()=>{
+            observer.disconnect();
+        };
+    }, deps);
+    return [
+        ref,
+        isTruncated
+    ];
+};
 export { Blockquote } from "./783.js";
 export { Caption } from "./975.js";
 export { Code } from "./651.js";
 export { Heading } from "./63.js";
+export { Highlight } from "./767.js";
 export { Kbd } from "./919.js";
 export { Label } from "./691.js";
 export { Link } from "./57.js";
+export { List } from "./513.js";
+export { Mark } from "./227.js";
 export { MarkdownRenderer } from "./654.js";
 export { Paragraph } from "./895.js";
 export { Text } from "./191.js";
+export { useIsTruncated };

package/dist/esm/list.d.ts

@@ -0,0 +1,2 @@
+export * from './components/list/index';
+export { default } from './components/list/index';

package/dist/esm/list.js

@@ -0,0 +1 @@
+export { List as default } from "./513.js";

package/dist/esm/mark.d.ts

@@ -0,0 +1,2 @@
+export * from './components/mark/index';
+export { default } from './components/mark/index';

package/dist/esm/mark.js

@@ -0,0 +1 @@
+export { Mark as default } from "./227.js";

package/dist/esm/useIsTruncated.d.ts

@@ -0,0 +1,15 @@
+import { type DependencyList, type RefObject } from 'react';
+/**
+ * Reports whether the element the returned ref is attached to currently
+ * overflows its own box — horizontally (Text's `truncate`) or vertically
+ * (Text's `lineClamp`) — so a caller can show a tooltip with the full
+ * content only when it's actually clipped, instead of on every hover.
+ *
+ * Re-checks whenever the element itself resizes (via `ResizeObserver`,
+ * covering the common "container got narrower/wider" case). A content
+ * change that doesn't also resize the element (e.g. a fixed-width truncated
+ * label whose text changes at runtime) won't retrigger the observer on its
+ * own — pass the changing value(s) in `deps` (e.g. `[children]`) to force a
+ * re-check for that case too.
+ */
+export declare const useIsTruncated: <T extends HTMLElement>(deps?: DependencyList) => [RefObject<T | null>, boolean];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vinyasa/typography",
-  "version": "1.0.24",
+  "version": "1.0.25",
   "private": false,
   "type": "module",
   "sideEffects": [
@@ -93,14 +93,34 @@
       "require": "./dist/cjs/markdown-renderer.cjs",
       "default": "./dist/esm/markdown-renderer.js"
     },
+    "./mark": {
+      "types": "./dist/esm/mark.d.ts",
+      "import": "./dist/esm/mark.js",
+      "require": "./dist/cjs/mark.cjs",
+      "default": "./dist/esm/mark.js"
+    },
+    "./mark/style.css": "./dist/esm/mark.css",
+    "./highlight": {
+      "types": "./dist/esm/highlight.d.ts",
+      "import": "./dist/esm/highlight.js",
+      "require": "./dist/cjs/highlight.cjs",
+      "default": "./dist/esm/highlight.js"
+    },
+    "./list": {
+      "types": "./dist/esm/list.d.ts",
+      "import": "./dist/esm/list.js",
+      "require": "./dist/cjs/list.cjs",
+      "default": "./dist/esm/list.js"
+    },
+    "./list/style.css": "./dist/esm/list.css",
     "./style.css": "./dist/esm/index.css",
     "./package.json": "./package.json"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
-    "@vinyasa/layout": "^1.0.24",
-    "@vinyasa/tokens": "^1.0.24"
+    "@vinyasa/tokens": "^1.0.25",
+    "@vinyasa/layout": "^1.0.25"
   },
   "dependencies": {
     "react-markdown": "^10.1.0"
@@ -116,8 +136,8 @@
     "@vanilla-extract/vite-plugin": "^5.2.3",
     "@vanilla-extract/webpack-plugin": "^2.3.27",
     "typescript": "^5.7.3",
-    "@vinyasa/layout": "1.0.24",
-    "@vinyasa/tokens": "1.0.24"
+    "@vinyasa/layout": "1.0.25",
+    "@vinyasa/tokens": "1.0.25"
   },
   "scripts": {
     "build": "rslib build && node ../../scripts/postbuild-package.mjs",