@vinyasa/typography 1.0.24 → 1.0.25

package/dist/cjs/text.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/text.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/esm/191.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: #0000;
+  -webkit-background-clip: text;
+  background-clip: text;
+}
+

package/dist/esm/191.js

@@ -38,7 +38,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: {
@@ -48,21 +82,24 @@ var Text_css_text = createRuntimeFn({
     },
     compoundVariants: []
 });
-const Text = /*#__PURE__*/ forwardRef(({ 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, ...rest }, ref)=>{
+const Text = /*#__PURE__*/ forwardRef(({ 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, ...rest }, ref)=>{
     const themedRef = useThemedRef(ref);
-    const classes = className ? `${Text_css_text({
-        size,
-        weight,
-        align,
-        color,
-        truncate
-    })} ${className}` : Text_css_text({
+    const normalizedTruncate = true === truncate ? 'end' : false === truncate ? void 0 : truncate;
+    const variantArgs = {
         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,
@@ -79,11 +116,30 @@ const Text = /*#__PURE__*/ forwardRef(({ as: Component = 'span', size, weight, a
         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(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__*/ jsx(Component, {
         ref: themedRef,
         className: classes,
         style: {
             ...spacingStyle,
+            ...inheritStyle,
+            ...gradientStyle,
+            ...lineClampStyle,
             ...style
         },
         ...rest,

package/dist/esm/227.css

@@ -0,0 +1,7 @@
+.x8q83o0 {
+  background-color: var(--vinyasa-status-warning-bg);
+  color: var(--vinyasa-status-warning-text);
+  border-radius: var(--vinyasa-radius-sm);
+  padding-inline: .2em;
+}
+

package/dist/esm/227.js

@@ -0,0 +1,39 @@
+import "./227.css";
+import { jsx } from "react/jsx-runtime";
+import { useThemedRef } from "@vinyasa/tokens";
+import { forwardRef } from "react";
+import { resolveSpacingStyle } from "./474.js";
+var mark = 'x8q83o0';
+const Mark = /*#__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 ? `${mark} ${className}` : mark;
+    const computedStyle = {
+        ...resolveSpacingStyle({
+            m,
+            mt,
+            mr,
+            mb,
+            ml,
+            mx,
+            my,
+            p,
+            pt,
+            pr,
+            pb,
+            pl,
+            px,
+            py
+        }),
+        ...style
+    };
+    return /*#__PURE__*/ jsx("mark", {
+        ref: themedRef,
+        className: classes,
+        style: computedStyle,
+        ...rest,
+        children: children
+    });
+});
+Mark.displayName = 'Mark';
+const mark_Mark = Mark;
+export { mark_Mark as Mark };

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/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 };