@vinyasa/typography 1.0.23 → 1.0.25

package/dist/esm/513.css

@@ -0,0 +1,60 @@
+._1ohxnc10 {
+  font-family: var(--vinyasa-font-family-sans);
+  font-size: var(--vinyasa-font-size-md);
+  color: var(--vinyasa-text-default);
+  flex-direction: column;
+  margin: 0;
+  display: flex;
+}
+
+._1ohxnc11 {
+  gap: var(--vinyasa-space1);
+}
+
+._1ohxnc12 {
+  gap: var(--vinyasa-space2);
+}
+
+._1ohxnc13 {
+  gap: var(--vinyasa-space3);
+}
+
+._1ohxnc14 {
+  gap: var(--vinyasa-space4);
+}
+
+._1ohxnc15 {
+  gap: var(--vinyasa-space5);
+}
+
+._1ohxnc16 {
+  gap: var(--vinyasa-space6);
+}
+
+._1ohxnc17 {
+  padding-left: var(--vinyasa-space5);
+}
+
+._1ohxnc18 {
+  padding-left: 0;
+  list-style: none;
+}
+
+._1ohxnc1a {
+  align-items: flex-start;
+  gap: var(--vinyasa-space2);
+  list-style: none;
+  display: flex;
+}
+
+._1ohxnc1b {
+  align-items: center;
+}
+
+._1ohxnc1c {
+  flex-shrink: 0;
+  align-items: center;
+  line-height: 1;
+  display: inline-flex;
+}
+

package/dist/esm/513.js

@@ -0,0 +1,126 @@
+import "./513.css";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useThemedRef } from "@vinyasa/tokens";
+import { createContext, forwardRef, useContext } from "react";
+import { createRuntimeFn } from "./953.js";
+import { resolveSpacingStyle } from "./474.js";
+var item = createRuntimeFn({
+    defaultClassName: '_1ohxnc19',
+    variantClassNames: {
+        withIcon: {
+            true: '_1ohxnc1a'
+        },
+        center: {
+            true: '_1ohxnc1b'
+        }
+    },
+    defaultVariants: {},
+    compoundVariants: []
+});
+var itemIcon = '_1ohxnc1c';
+var list = createRuntimeFn({
+    defaultClassName: '_1ohxnc10',
+    variantClassNames: {
+        spacing: {
+            1: '_1ohxnc11',
+            2: '_1ohxnc12',
+            3: '_1ohxnc13',
+            4: '_1ohxnc14',
+            5: '_1ohxnc15',
+            6: '_1ohxnc16'
+        },
+        withPadding: {
+            true: '_1ohxnc17',
+            false: '_1ohxnc18'
+        }
+    },
+    defaultVariants: {
+        spacing: 2,
+        withPadding: true
+    },
+    compoundVariants: []
+});
+const ListContext = /*#__PURE__*/ createContext({});
+const ListRoot = /*#__PURE__*/ forwardRef(({ type = 'unordered', spacing, withPadding, icon, center, m, mt, mr, mb, ml, mx, my, p, pt, pr, pb, pl, px, py, className, style, children, ...rest }, ref)=>{
+    const themedRef = useThemedRef(ref);
+    const classes = className ? `${list({
+        spacing,
+        withPadding
+    })} ${className}` : list({
+        spacing,
+        withPadding
+    });
+    const computedStyle = {
+        ...resolveSpacingStyle({
+            m,
+            mt,
+            mr,
+            mb,
+            ml,
+            mx,
+            my,
+            p,
+            pt,
+            pr,
+            pb,
+            pl,
+            px,
+            py
+        }),
+        ...style
+    };
+    const contextValue = {
+        icon,
+        center
+    };
+    if ('ordered' === type) return /*#__PURE__*/ jsx(ListContext.Provider, {
+        value: contextValue,
+        children: /*#__PURE__*/ jsx("ol", {
+            ref: themedRef,
+            className: classes,
+            style: computedStyle,
+            ...rest,
+            children: children
+        })
+    });
+    return /*#__PURE__*/ jsx(ListContext.Provider, {
+        value: contextValue,
+        children: /*#__PURE__*/ jsx("ul", {
+            ref: themedRef,
+            className: classes,
+            style: computedStyle,
+            ...rest,
+            children: children
+        })
+    });
+});
+ListRoot.displayName = 'List';
+const ListItem = /*#__PURE__*/ forwardRef(({ icon, className, children, ...rest }, ref)=>{
+    const context = useContext(ListContext);
+    const resolvedIcon = icon ?? context.icon;
+    const classes = className ? `${item({
+        withIcon: Boolean(resolvedIcon),
+        center: context.center
+    })} ${className}` : item({
+        withIcon: Boolean(resolvedIcon),
+        center: context.center
+    });
+    return /*#__PURE__*/ jsxs("li", {
+        ref: ref,
+        className: classes,
+        ...rest,
+        children: [
+            resolvedIcon ? /*#__PURE__*/ jsx("span", {
+                className: itemIcon,
+                children: resolvedIcon
+            }) : null,
+            children
+        ]
+    });
+});
+ListItem.displayName = 'ListItem';
+const List = Object.assign(ListRoot, {
+    Item: ListItem
+});
+const list_List = List;
+export { list_List as List };

package/dist/esm/651.js

@@ -1,5 +1,6 @@
 import "./651.css";
 import { jsx } from "react/jsx-runtime";
+import { useThemedRef } from "@vinyasa/tokens";
 import { forwardRef } from "react";
 import { createRuntimeFn } from "./953.js";
 import { resolveSpacingStyle } from "./474.js";
@@ -17,6 +18,7 @@ var code = createRuntimeFn({
     compoundVariants: []
 });
 const Code = /*#__PURE__*/ forwardRef(({ block = false, m, mt, mr, mb, ml, mx, my, p, pt, pr, pb, pl, px, py, className, style, children, ...rest }, ref)=>{
+    const themedRef = useThemedRef(ref);
     const classes = className ? `${code({
         block
     })} ${className}` : code({
@@ -42,7 +44,7 @@ const Code = /*#__PURE__*/ forwardRef(({ block = false, m, mt, mr, mb, ml, mx, m
         ...style
     };
     if (block) return /*#__PURE__*/ jsx("pre", {
-        ref: ref,
+        ref: themedRef,
         className: classes,
         style: computedStyle,
         ...rest,
@@ -51,7 +53,7 @@ const Code = /*#__PURE__*/ forwardRef(({ block = false, m, mt, mr, mb, ml, mx, m
         })
     });
     return /*#__PURE__*/ jsx("code", {
-        ref: ref,
+        ref: themedRef,
         className: classes,
         style: computedStyle,
         ...rest,

package/dist/esm/767.js

@@ -0,0 +1,33 @@
+import { jsx } from "react/jsx-runtime";
+import { Fragment, forwardRef } from "react";
+import { Text as text_Text } from "./191.js";
+import { Mark as mark_Mark } from "./227.js";
+const escapeRegExp = (value)=>value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+const Highlight = /*#__PURE__*/ forwardRef(({ children, highlight, ...props }, ref)=>{
+    const terms = (Array.isArray(highlight) ? highlight : [
+        highlight
+    ]).filter(Boolean);
+    if (0 === terms.length) return /*#__PURE__*/ jsx(text_Text, {
+        ref: ref,
+        ...props,
+        children: children
+    });
+    const lowerTerms = new Set(terms.map((term)=>term.toLowerCase()));
+    const pattern = new RegExp(`(${terms.map(escapeRegExp).join('|')})`, 'gi');
+    const parts = children.split(pattern);
+    return /*#__PURE__*/ jsx(text_Text, {
+        ref: ref,
+        ...props,
+        children: parts.map((part, index)=>{
+            const key = `${String(index)}-${part}`;
+            return lowerTerms.has(part.toLowerCase()) ? /*#__PURE__*/ jsx(mark_Mark, {
+                children: part
+            }, key) : /*#__PURE__*/ jsx(Fragment, {
+                children: part
+            }, key);
+        })
+    });
+});
+Highlight.displayName = 'Highlight';
+const highlight_Highlight = Highlight;
+export { highlight_Highlight as Highlight };

package/dist/esm/783.js

@@ -1,9 +1,11 @@
 import "./783.css";
 import { jsx } from "react/jsx-runtime";
+import { useThemedRef } from "@vinyasa/tokens";
 import { forwardRef } from "react";
 import { resolveSpacingStyle } from "./474.js";
 var blockquote = 'adxw6l0';
 const Blockquote = /*#__PURE__*/ forwardRef(({ m, mt, mr, mb, ml, mx, my, p, pt, pr, pb, pl, px, py, className, style, children, ...rest }, ref)=>{
+    const themedRef = useThemedRef(ref);
     const classes = className ? `${blockquote} ${className}` : blockquote;
     const computedStyle = {
         ...resolveSpacingStyle({
@@ -25,7 +27,7 @@ const Blockquote = /*#__PURE__*/ forwardRef(({ m, mt, mr, mb, ml, mx, my, p, pt,
         ...style
     };
     return /*#__PURE__*/ jsx("blockquote", {
-        ref: ref,
+        ref: themedRef,
         className: classes,
         style: computedStyle,
         ...rest,

package/dist/esm/919.js

@@ -1,9 +1,11 @@
 import "./919.css";
 import { jsx } from "react/jsx-runtime";
+import { useThemedRef } from "@vinyasa/tokens";
 import { forwardRef } from "react";
 import { resolveSpacingStyle } from "./474.js";
 var kbd = '_18ahdyj0';
 const Kbd = /*#__PURE__*/ forwardRef(({ m, mt, mr, mb, ml, mx, my, p, pt, pr, pb, pl, px, py, className, style, children, ...rest }, ref)=>{
+    const themedRef = useThemedRef(ref);
     const classes = className ? `${kbd} ${className}` : kbd;
     const computedStyle = {
         ...resolveSpacingStyle({
@@ -25,7 +27,7 @@ const Kbd = /*#__PURE__*/ forwardRef(({ m, mt, mr, mb, ml, mx, my, p, pt, pr, pb
         ...style
     };
     return /*#__PURE__*/ jsx("kbd", {
-        ref: ref,
+        ref: themedRef,
         className: classes,
         style: computedStyle,
         ...rest,

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

@@ -60,15 +60,108 @@ export declare const text: import("@vanilla-extract/recipes").RuntimeFn<{
         primary: {
             color: `var(--${string})`;
         };
+        info: {
+            color: `var(--${string})`;
+        };
+        success: {
+            color: `var(--${string})`;
+        };
+        warning: {
+            color: `var(--${string})`;
+        };
         error: {
             color: `var(--${string})`;
         };
     };
     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" | "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";