@cfx-dev/ui-components 4.5.21 → 5.0.1

package/dist/components/Text/HeadingShowcase.js

@@ -1,7 +1,42 @@
 import { jsx as e } from "react/jsx-runtime";
 import i from "react";
-import t from "./TextShowcase.js";
-const a = [
+import s from "./TextShowcase.js";
+const p = [
+  {
+    textProps: {
+      size: "xxxxlarge",
+      weight: "bold",
+      as: "h1",
+      family: "secondary"
+    },
+    title: "00",
+    descriptions: [
+      "Helvetica Now Display Bold",
+      "-2.5% Letter Spacing"
+    ],
+    responsiveInfo: {
+      mobile: {
+        size: "gs(450), 48px",
+        lineHeight: "110%",
+        paragraph: "gs(200), 20px"
+      },
+      tablet: {
+        size: "gs(800), 80px",
+        lineHeight: "110%",
+        paragraph: "gs(350), 32px"
+      },
+      desktop: {
+        size: "gs(1200), 120px",
+        lineHeight: "110%",
+        paragraph: "gs(500), 50px"
+      },
+      ldesktop: {
+        size: "gs(1200), 120px",
+        lineHeight: "110%",
+        paragraph: "gs(500), 50px"
+      }
+    }
+  },
   {
     textProps: {
       size: "xxxlarge",
@@ -12,10 +47,30 @@ const a = [
     title: "01",
     descriptions: [
       "Helvetica Now Display Bold",
-      "70px",
-      "115% Line Height",
       "-2.5% Letter Spacing"
-    ]
+    ],
+    responsiveInfo: {
+      mobile: {
+        size: "gs(400), 40px",
+        lineHeight: "110%",
+        paragraph: "gs(140), 14px"
+      },
+      tablet: {
+        size: "gs(700), 72px",
+        lineHeight: "110%",
+        paragraph: "gs(300), 30px"
+      },
+      desktop: {
+        size: "gs(1000), 100px",
+        lineHeight: "110%",
+        paragraph: "gs(400), 40px"
+      },
+      ldesktop: {
+        size: "gs(1000), 100px",
+        lineHeight: "110%",
+        paragraph: "gs(400), 40px"
+      }
+    }
   },
   {
     textProps: {
@@ -27,10 +82,30 @@ const a = [
     title: "02",
     descriptions: [
       "Helvetica Now Display Bold",
-      "50px",
-      "135% Line Height",
       "-2.5% Letter Spacing"
-    ]
+    ],
+    responsiveInfo: {
+      mobile: {
+        size: "gs(350), 32px",
+        lineHeight: "120%",
+        paragraph: "gs(120), 12px"
+      },
+      tablet: {
+        size: "gs(400), 40px",
+        lineHeight: "120%",
+        paragraph: "gs(150), 15px"
+      },
+      desktop: {
+        size: "gs(500), 50px",
+        lineHeight: "120%",
+        paragraph: "gs(200), 20px"
+      },
+      ldesktop: {
+        size: "gs(500), 50px",
+        lineHeight: "120%",
+        paragraph: "gs(200), 20px"
+      }
+    }
   },
   {
     textProps: {
@@ -42,10 +117,30 @@ const a = [
     title: "03",
     descriptions: [
       "Helvetica Now Display Bold",
-      "40px",
-      "130% Line Height",
       "-2.5% Letter Spacing"
-    ]
+    ],
+    responsiveInfo: {
+      mobile: {
+        size: "gs(250), 25px",
+        lineHeight: "120%",
+        paragraph: "gs(110), 10px"
+      },
+      tablet: {
+        size: "gs(300), 30px",
+        lineHeight: "120%",
+        paragraph: "gs(140), 14px"
+      },
+      desktop: {
+        size: "gs(400), 40px",
+        lineHeight: "120%",
+        paragraph: "gs(180), 18px"
+      },
+      ldesktop: {
+        size: "gs(400), 40px",
+        lineHeight: "120%",
+        paragraph: "gs(180), 18px"
+      }
+    }
   },
   {
     textProps: {
@@ -57,10 +152,30 @@ const a = [
     title: "04",
     descriptions: [
       "Helvetica Now Display Bold",
-      "30px",
-      "130% Line Height",
       "-2.5% Letter Spacing"
-    ]
+    ],
+    responsiveInfo: {
+      mobile: {
+        size: "gs(240), 24px",
+        lineHeight: "120%",
+        paragraph: "gs(110), 10px"
+      },
+      tablet: {
+        size: "gs(240), 24px",
+        lineHeight: "120%",
+        paragraph: "gs(110), 10px"
+      },
+      desktop: {
+        size: "gs(300), 30px",
+        lineHeight: "120%",
+        paragraph: "gs(200), 20px"
+      },
+      ldesktop: {
+        size: "gs(300), 30px",
+        lineHeight: "120%",
+        paragraph: "gs(200), 20px"
+      }
+    }
   },
   {
     textProps: {
@@ -72,10 +187,30 @@ const a = [
     title: "05",
     descriptions: [
       "Helvetica Now Display Bold",
-      "25px",
-      "130% Line Height",
       "-2.5% Letter Spacing"
-    ]
+    ],
+    responsiveInfo: {
+      mobile: {
+        size: "gs(200), 20px",
+        lineHeight: "130%",
+        paragraph: "gs(100), 8px"
+      },
+      tablet: {
+        size: "gs(200), 20px",
+        lineHeight: "130%",
+        paragraph: "gs(100), 8px"
+      },
+      desktop: {
+        size: "gs(240), 24px",
+        lineHeight: "130%",
+        paragraph: "gs(110), 10px"
+      },
+      ldesktop: {
+        size: "gs(240), 24px",
+        lineHeight: "130%",
+        paragraph: "gs(110), 10px"
+      }
+    }
   },
   {
     textProps: {
@@ -86,16 +221,36 @@ const a = [
     title: "06",
     descriptions: [
       "Helvetica Now Display Regular",
-      "25px",
-      "130% Line Height",
       "-2.5% Letter Spacing"
-    ]
+    ],
+    responsiveInfo: {
+      mobile: {
+        size: "gs(200), 20px",
+        lineHeight: "130%",
+        paragraph: "gs(100), 8px"
+      },
+      tablet: {
+        size: "gs(200), 20px",
+        lineHeight: "130%",
+        paragraph: "gs(100), 8px"
+      },
+      desktop: {
+        size: "gs(240), 24px",
+        lineHeight: "130%",
+        paragraph: "gs(110), 10px"
+      },
+      ldesktop: {
+        size: "gs(240), 24px",
+        lineHeight: "130%",
+        paragraph: "gs(110), 10px"
+      }
+    }
   }
 ];
-function s() {
-  return /* @__PURE__ */ e(t, { items: a });
+function a() {
+  return /* @__PURE__ */ e(s, { items: p });
 }
-const p = i.memo(s);
+const l = i.memo(a);
 export {
-  p as default
+  l as default
 };

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

@@ -2,6 +2,7 @@ import { TextOpacity, ResponsiveTextSize, TextPropsWithRef, TextSpecificOpacity
 
 export declare const textSizeResponsiveValueFormatter: (val: ResponsiveTextSize) => string;
 export declare const lineHeightResponsiveValueFormatter: (val: ResponsiveTextSize) => string;
+export declare const paragraphSpacingResponsiveValueFormatter: (val: ResponsiveTextSize) => string;
 export declare const TEXT_OPACITY_MAP: Record<TextSpecificOpacity, number | string>;
 export declare const getTextOpacity: (opacity?: TextOpacity, otherwise?: string | number) => string | number;
 export declare const DEFAULT_TEXT_COLOR = "primary";

package/dist/components/Text/Text.js

@@ -1,17 +1,17 @@
-import { jsx as a } from "react/jsx-runtime";
-import { clsx as H } from "../../utils/clsx.js";
+import { jsx as p } from "react/jsx-runtime";
+import { clsx as v } from "../../utils/clsx.js";
 import { getColor as N } from "../../utils/color.js";
 import { ui as t } from "../../utils/ui/ui.js";
-import { TextSizeEnum as s } from "../../utils/ui/ui.types.js";
-const O = "cfxui__Text__root__2fe11", P = "cfxui__Text__centered__4d7bd", $ = "cfxui__Text__underlined__5860e", w = "cfxui__Text__strikethrough__e3ee3", B = "cfxui__Text__truncated__417f4", D = "cfxui__Text__typographic__d8155", I = "cfxui__Text__block__cb1b6", r = {
+import { TextSizeEnum as i } from "../../utils/ui/ui.types.js";
+const O = "cfxui__Text__root__2fe11", P = "cfxui__Text__centered__4d7bd", V = "cfxui__Text__underlined__5860e", $ = "cfxui__Text__strikethrough__e3ee3", q = "cfxui__Text__truncated__417f4", w = "cfxui__Text__typographic__d8155", B = "cfxui__Text__block__cb1b6", r = {
   root: O,
   centered: P,
-  underlined: $,
-  strikethrough: w,
-  truncated: B,
-  typographic: D,
-  block: I
-}, L = (e) => e in s ? t.fontSize(e) : typeof e == "number" ? t.q(e) : e, M = (e) => e in s ? t.lineHeight(e) : typeof e == "number" ? e >= 100 ? (e / 100).toFixed(2) : t.lineHeight(s.normal) : e, V = {
+  underlined: V,
+  strikethrough: $,
+  truncated: q,
+  typographic: w,
+  block: B
+}, D = (e) => e in i ? t.fontSize(e) : typeof e == "number" ? t.q(e) : e, I = (e) => e in i ? t.lineHeight(e) : typeof e == "number" ? e >= 100 ? (e / 100).toFixed(2) : t.lineHeight(i.small) : e, L = (e) => e in i ? t.paragraphSpacing(e) : typeof e == "number" ? t.q(e) : e, M = {
   0: 0,
   25: "var(--text-opacity-25)",
   50: "var(--text-opacity-50)",
@@ -24,79 +24,84 @@ const O = "cfxui__Text__root__2fe11", P = "cfxui__Text__centered__4d7bd", $ = "c
   h4: "h4",
   h5: "h5",
   h6: "h6"
-}, j = (e, o = 1) => typeof e == "number" ? e : typeof e == "string" && V[e] || o, q = "primary";
-function G(e) {
+}, j = (e, n = 1) => typeof e == "number" ? e : typeof e == "string" && M[e] || n, G = "primary";
+function U(e) {
   const {
-    family: o,
-    size: n = "normal",
-    lineHeight: l = n,
-    weight: f = "normal",
-    letterSpacing: u = "normal",
-    color: _,
-    opacity: p,
-    as: i = "span",
+    family: n,
+    size: o = "small",
+    lineHeight: c = o,
+    weight: l = "regular",
+    letterSpacing: u = "small",
+    color: f,
+    opacity: _,
+    as: s = "span",
     centered: h = !1,
-    truncated: m = !1,
-    typographic: d = !1,
-    uppercase: g = !1,
+    truncated: g = !1,
+    typographic: m = !1,
+    uppercase: d = !1,
     userSelectable: x = !1,
     underlined: y = !1,
     strikethrough: T = !1,
     children: b,
-    className: k,
-    style: S,
-    ref: C,
-    htmlFor: R,
+    className: S,
+    style: k,
+    ref: R,
+    htmlFor: C,
     id: F
-  } = e, z = i === "div", v = H(
+  } = e, z = s === "div", A = v(
     r.root,
-    k,
-    t.getResponsiveClassnames("font-size", n),
-    t.getResponsiveClassnames("line-height", n),
+    S,
+    // TODO: do we need reposive in text now?
+    // all sizes is responsive by default
+    t.getResponsiveClassnames("font-size", o),
+    t.getResponsiveClassnames("line-height", o),
+    t.getResponsiveClassnames("paragraph-spacing", o),
     {
       [r.block]: z,
       [r.centered]: h,
-      [r.truncated]: m,
+      [r.truncated]: g,
       [r.underlined]: y,
       [r.strikethrough]: T,
-      [r.typographic]: d,
+      [r.typographic]: m,
       [t.cls.userSelectableText]: x
     }
-  ), A = N({
+  ), E = N({
     ...e,
-    color: _ || q,
-    opacity: j(p)
-  }), E = typeof o == "string" ? o : X[i] || "primary", c = {
-    color: A,
-    fontFamily: `var(--font-family-${E})`,
+    color: f || G,
+    opacity: j(_)
+  }), H = typeof n == "string" ? n : X[s] || "primary", a = {
+    color: E,
+    fontFamily: `var(--font-family-${H})`,
     letterSpacing: `var(--letter-spacing-${u})`,
-    fontWeight: `var(--font-weight-${f})`,
-    ...t.getResponsiveStyles("font-size", n, L),
-    ...t.getResponsiveStyles("line-height", l, M),
-    ...S
+    fontWeight: `var(--font-weight-${l})`,
+    ...t.getResponsiveStyles("font-size", o, D),
+    ...t.getResponsiveStyles("line-height", c, I),
+    ...t.getResponsiveStyles("paragraph-spacing", c, L),
+    ...k
   };
-  return g && (c.textTransform = "uppercase"), /* @__PURE__ */ a(
-    i,
+  return d && (a.textTransform = "uppercase"), /* @__PURE__ */ p(
+    s,
     {
-      ref: C,
+      ref: R,
       dir: "auto",
-      className: v,
-      style: c,
-      htmlFor: R,
+      className: A,
+      style: a,
+      htmlFor: C,
       id: F,
       children: b
     }
   );
 }
-function Z(e) {
-  return /* @__PURE__ */ a(G, { ...e, as: "div" });
+function ee(e) {
+  return /* @__PURE__ */ p(U, { ...e, as: "div" });
 }
 export {
-  q as DEFAULT_TEXT_COLOR,
-  V as TEXT_OPACITY_MAP,
-  G as Text,
-  Z as TextBlock,
+  G as DEFAULT_TEXT_COLOR,
+  M as TEXT_OPACITY_MAP,
+  U as Text,
+  ee as TextBlock,
   j as getTextOpacity,
-  M as lineHeightResponsiveValueFormatter,
-  L as textSizeResponsiveValueFormatter
+  I as lineHeightResponsiveValueFormatter,
+  L as paragraphSpacingResponsiveValueFormatter,
+  D as textSizeResponsiveValueFormatter
 };

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

@@ -1,15 +1,16 @@
 import { default as React } from 'react';
 import { GetColorProps } from '../../utils/color';
 import { ResponsiveValueType, TextSize as RawTextSize } from '../../utils/ui';
-import { OpacityRange } from '../../utils/ui/ui.types';
+import { IconSizeType, OpacityRange } from '../../utils/ui/ui.types';
 
 export type TextSize = RawTextSize;
 export type ResponsiveTextSize = TextSize | string | number;
-export type TextWeight = 'thin' | 'normal' | 'bold' | 'bolder';
+export type ResponsiveIconSize = IconSizeType | string | number;
+export type TextWeight = 'thin' | 'regular' | 'bold' | 'bolder';
 export type TextSpecificOpacity = '0' | '25' | '50' | '75' | '100';
 export type TextOpacity = TextSpecificOpacity | OpacityRange;
 export type TextAs = 'span' | 'div' | 'p' | 'label' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
-export type TextLetterSpacing = 'normal' | 'large' | 'xlarge';
+export type TextLetterSpacing = 'small' | 'large' | 'xlarge';
 export type TextFamaly = 'primary' | 'secondary';
 interface TextPropsBase {
     as?: TextAs;
@@ -29,7 +30,8 @@ interface TextPropsBase {
     size?: ResponsiveValueType<ResponsiveTextSize>;
     weight?: TextWeight;
     letterSpacing?: TextLetterSpacing;
-    lineHeight?: ResponsiveValueType<number>;
+    lineHeight?: ResponsiveValueType<TextSize | number>;
+    paragraphSpacing?: ResponsiveValueType<TextSize | number>;
     family?: TextFamaly;
     children?: React.ReactNode;
     className?: string;

package/dist/components/Text/TextShowcase.d.ts

@@ -1,12 +1,21 @@
 import { default as React } from 'react';
 import { TextProps } from './Text.types';
 
-interface TextShowcaseProps {
-    items: {
-        textProps: TextProps;
-        title: string;
-        descriptions: string[];
-    }[];
+declare enum ResponsiveKeyEnum {
+    mobile = "mobile",
+    tablet = "tablet",
+    desktop = "desktop",
+    ldesktop = "ldesktop"
+}
+type ResponsiveKeyType = keyof typeof ResponsiveKeyEnum;
+export interface TextShowcaseItemType {
+    textProps: TextProps;
+    title: string;
+    descriptions: string[];
+    responsiveInfo: Record<ResponsiveKeyType, Record<string, string>>;
+}
+export interface TextShowcaseProps {
+    items: TextShowcaseItemType[];
 }
 declare const _default: React.NamedExoticComponent<TextShowcaseProps>;
 export default _default;

package/dist/components/Text/TextShowcase.js

@@ -1,50 +1,75 @@
-import { jsx as o, jsxs as t, Fragment as a } from "react/jsx-runtime";
-import s from "react";
-import m from "../Flex/Flex.js";
-import { Separator as l } from "../Separator/Separator.js";
-import { Text as c } from "./Text.js";
-const _ = "cfxui__TextShowcase__root__a3632", f = {
-  root: _
-}, u = "The quick brown fox jumps over the lazy dog.", T = "How vexingly quick daft zebras jump.";
+import { jsx as r, jsxs as e, Fragment as f } from "react/jsx-runtime";
+import a from "react";
+import s from "../Box/Box.js";
+import "../../utils/ui/ui.js";
+import l from "../Flex/Flex.js";
+import { Separator as d } from "../Separator/Separator.js";
+import { Text as i } from "./Text.js";
+const u = "cfxui__TextShowcase__responsiveInfoItem__bce26", g = {
+  responsiveInfoItem: u
+}, _ = "The quick brown fox jumps over the lazy dog.", b = "How vexingly quick daft zebras jump.";
+var p = /* @__PURE__ */ ((c) => (c.mobile = "mobile", c.tablet = "tablet", c.desktop = "desktop", c.ldesktop = "ldesktop", c))(p || {});
 function x() {
-  return /* @__PURE__ */ t(a, { children: [
-    u,
-    /* @__PURE__ */ o("br", {}),
-    T
+  return /* @__PURE__ */ e(f, { children: [
+    _,
+    /* @__PURE__ */ r("br", {}),
+    b
   ] });
 }
-function g(p) {
+function T(c) {
   const {
-    items: d
-  } = p;
-  return /* @__PURE__ */ o(m, { direction: "column", children: d.map((r, h) => /* @__PURE__ */ t(a, { children: [
-    h > 0 && /* @__PURE__ */ o(l, { mt: 6, mb: 6 }),
-    /* @__PURE__ */ t("div", { className: f.root, children: [
-      /* @__PURE__ */ t("div", { children: [
-        /* @__PURE__ */ o(c, { ...r.textProps, children: r.title }),
-        /* @__PURE__ */ o("br", {}),
-        /* @__PURE__ */ t(c, { color: "secondary", children: [
-          r.descriptions.map((e, n) => (
+    items: h
+  } = c;
+  return /* @__PURE__ */ r(l, { direction: "column", gap: "xlarge", children: h.map((o) => /* @__PURE__ */ e(a.Fragment, { children: [
+    /* @__PURE__ */ e(l, { direction: "column", gap: 2, children: [
+      /* @__PURE__ */ r(i, { ...o.textProps, children: /* @__PURE__ */ r(x, {}) }),
+      /* @__PURE__ */ e(l, { gap: 2, children: [
+        /* @__PURE__ */ e(s, { fullWidth: !0, children: [
+          /* @__PURE__ */ r(d, { content: "description", my: "large" }),
+          /* @__PURE__ */ r(i, { size: "large", children: o.title }),
+          /* @__PURE__ */ r("br", {}),
+          /* @__PURE__ */ r(i, { color: "secondary", children: o.descriptions.map((t, n) => (
             // eslint-disable-next-line react/no-array-index-key
-            /* @__PURE__ */ t(s.Fragment, { children: [
-              e,
-              n < r.descriptions.length - 1 && /* @__PURE__ */ o("br", {})
+            /* @__PURE__ */ e(a.Fragment, { children: [
+              t,
+              n < o.descriptions.length - 1 && /* @__PURE__ */ r("br", {})
             ] }, `description_${n}`)
-          )),
-          Object.entries(r.textProps).map(([e, n], i) => /* @__PURE__ */ t(s.Fragment, { children: [
-            r.descriptions.length > 0 && i === 0 && /* @__PURE__ */ o(l, { content: "props", offset: "large" }),
-            e,
+          )) })
+        ] }),
+        /* @__PURE__ */ e(s, { fullWidth: !0, children: [
+          /* @__PURE__ */ r(d, { content: "props", my: "large" }),
+          /* @__PURE__ */ r(i, { color: "secondary", children: Object.entries(o.textProps).map(([t, n], m) => /* @__PURE__ */ e(a.Fragment, { children: [
+            t,
             ":",
+            " ",
             n.toString(),
-            i < r.descriptions.length - 1 && /* @__PURE__ */ o("br", {})
-          ] }, `prop_${e}`))
+            m < o.descriptions.length - 1 && /* @__PURE__ */ r("br", {})
+          ] }, `prop_${t}`)) })
         ] })
-      ] }),
-      /* @__PURE__ */ o(c, { ...r.textProps, children: /* @__PURE__ */ o(x, {}) })
-    ] }, `prop_${r.title}`)
-  ] })) });
+      ] })
+    ] }),
+    /* @__PURE__ */ e(l, { direction: "column", gap: 2, children: [
+      /* @__PURE__ */ r(d, { content: "responsive", my: "large" }),
+      /* @__PURE__ */ r(l, { wrap: !0, gap: 2, children: Object.keys(p).map((t) => /* @__PURE__ */ e("div", { className: g.responsiveInfoItem, children: [
+        /* @__PURE__ */ r(i, { size: "xsmall", color: "secondary", luminance: 300, children: t }),
+        Object.keys(o.responsiveInfo[t]).map((n) => /* @__PURE__ */ e(
+          l,
+          {
+            fullWidth: !0,
+            justifyContent: "space-between",
+            gap: 1,
+            children: [
+              /* @__PURE__ */ r("div", { children: n }),
+              /* @__PURE__ */ r("div", { children: o.responsiveInfo[t][n] })
+            ]
+          },
+          `${t}_${n}`
+        ))
+      ] }, t)) })
+    ] })
+  ] }, `prop_${o.title}`)) });
 }
-const C = s.memo(g);
+const F = a.memo(T);
 export {
-  C as default
+  F as default
 };