@cfx-dev/ui-components 5.0.3 → 5.0.5

package/dist/components/Prose/Prose.d.ts

@@ -1,4 +1,10 @@
 import { default as React } from 'react';
+import { ResponsiveTextSize, TextColorProps } from '../Text';
+import { ResponsiveValueType } from '../../utils/ui';
 
-export type ProseProps = React.PropsWithChildren;
-export declare function Prose({ children, }: ProseProps): import("react/jsx-runtime").JSX.Element;
+export type ProseProps = React.PropsWithChildren & TextColorProps & {
+    size?: ResponsiveValueType<ResponsiveTextSize>;
+    className?: string;
+    lineHeight?: ResponsiveValueType<number>;
+};
+export declare function Prose(props: ProseProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Prose/Prose.js

@@ -1,12 +1,35 @@
-import { jsx as r } from "react/jsx-runtime";
-const t = "cfxui__Prose__root__e03c1", s = {
-  root: t
+import { jsx as p } from "react/jsx-runtime";
+import { getTextOpacity as g, DEFAULT_TEXT_COLOR as f, lineHeightResponsiveValueFormatter as _, textSizeResponsiveValueFormatter as h } from "../Text/Text.js";
+import { ui as e } from "../../utils/ui/ui.js";
+import { clsx as v } from "../../utils/clsx.js";
+import { getColor as R } from "../../utils/color.js";
+const u = "cfxui__Prose__root__e03c1", x = {
+  root: u
 };
-function e({
-  children: o
-}) {
-  return /* @__PURE__ */ r("div", { className: s.root, children: o });
+function d(t) {
+  const {
+    size: o = "normal",
+    lineHeight: s = o,
+    color: i,
+    opacity: r,
+    className: n,
+    children: l
+  } = t, c = R({
+    ...t,
+    color: i || f,
+    opacity: g(r)
+  }), a = v(
+    x.root,
+    n,
+    e.getResponsiveClassnames("font-size", o),
+    e.getResponsiveClassnames("line-height", o)
+  ), m = {
+    color: c,
+    ...e.getResponsiveStyles("font-size", o, h),
+    ...e.getResponsiveStyles("line-height", s, _)
+  };
+  return /* @__PURE__ */ p("div", { className: a, style: m, children: l });
 }
 export {
-  e as Prose
+  d as Prose
 };

package/dist/components/Text/Text.js

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

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

@@ -20,6 +20,10 @@ interface TextPropsBase {
      * If it'll be a multiline text, use this to add extra spacing between lines
      */
     typographic?: boolean;
+    /**
+     * Will remove vertical trim feature based on before and after pseudo elements with negative margins
+     */
+    verticalTrimDisabled?: boolean;
     /**
      * Allow users to select text
      */

package/dist/styles-scss/tokens.scss

@@ -23,6 +23,8 @@
   @each $name, $value in ui.$mediaMap {
     @include ui.media-min($name) {
       .ui-#{$propName}-#{$name} {
+        @include ui.def('#{$propName}-current', var(--#{$propName}-#{$name}));
+
         #{$propName}: var(--#{$propName}-#{$name});
       }
     }

package/dist/utils/ui/ui.types.d.ts

@@ -17,6 +17,7 @@ export declare enum ColorEnum {
 }
 export type ColorType = keyof typeof ColorEnum;
 export declare enum TextSizeEnum {
+    xxxsmall = "xxxsmall",
     xxsmall = "xxsmall",
     xsmall = "xsmall",
     small = "small",

package/dist/utils/ui/ui.types.js

@@ -1,4 +1,4 @@
-var a = /* @__PURE__ */ ((l) => (l.accent = "accent", l.primary = "primary", l.secondary = "secondary", l.tertiary = "tertiary", l.green = "green", l.yellow = "yellow", l.red = "red", l.argentum = "argentum", l.aurum = "aurum", l.platinum = "platinum", l.bg = "bg", l["bg-light"] = "bg-light", l["bg-dark"] = "bg-dark", l["bg-dark-grey"] = "bg-dark-grey", l["bg-black"] = "bg-black", l))(a || {}), x = /* @__PURE__ */ ((l) => (l.xxsmall = "xxsmall", l.xsmall = "xsmall", l.small = "small", l.medium = "medium", l.large = "large", l.xlarge = "xlarge", l.xxlarge = "xxlarge", l.xxxlarge = "xxxlarge", l.xxxxlarge = "xxxxlarge", l))(x || {}), r = /* @__PURE__ */ ((l) => (l.xsmall = "xsmall", l.small = "small", l.medium = "medium", l.large = "large", l.xlarge = "xlarge", l))(r || {}), s = /* @__PURE__ */ ((l) => (l.none = "none", l.xsmall = "xsmall", l.small = "small", l.medium = "medium", l.large = "large", l.xlarge = "xlarge", l.pill = "pill", l))(s || {}), e = /* @__PURE__ */ ((l) => (l.zero = "zero", l.first = "first", l.second = "second", l.max = "max", l))(e || {}), g = /* @__PURE__ */ ((l) => (l.none = "none", l.hairthin = "hairthin", l.thin = "thin", l.xxsmall = "xxsmall", l.xsmall = "xsmall", l.small = "small", l.normal = "normal", l.medium = "medium", l.large = "large", l.xlarge = "xlarge", l.safezone = "safezone", l))(g || {}), p = /* @__PURE__ */ ((l) => (l.xxsmall = "xxsmall", l.xsmall = "xsmall", l.small = "small", l.medium = "medium", l.large = "large", l.xlarge = "xlarge", l.xxlarge = "xxlarge", l.xxxlarge = "xxxlarge", l.xxxxlarge = "xxxxlarge", l.xxxxxlarge = "xxxxxlarge", l))(p || {}), t = /* @__PURE__ */ ((l) => (l.sp25 = "sp25", l.sp100 = "sp100", l.sp110 = "sp110", l.sp150 = "sp150", l.sp175 = "sp175", l.sp200 = "sp200", l.sp250 = "sp250", l.sp300 = "sp300", l.sp400 = "sp400", l.sp450 = "sp450", l.sp600 = "sp600", l.sp700 = "sp700", l.sp800 = "sp800", l.sp900 = "sp900", l.sp1000 = "sp1000", l.sp1200 = "sp1200", l.sp1600 = "sp1600", l.sp2400 = "sp2400", l))(t || {}), b = /* @__PURE__ */ ((l) => (l.initial = "initial", l.small = "small", l["small-medium"] = "small-medium", l.medium = "medium", l["medium-large"] = "medium-large", l.large = "large", l.xlarge = "xlarge", l))(b || {});
+var a = /* @__PURE__ */ ((l) => (l.accent = "accent", l.primary = "primary", l.secondary = "secondary", l.tertiary = "tertiary", l.green = "green", l.yellow = "yellow", l.red = "red", l.argentum = "argentum", l.aurum = "aurum", l.platinum = "platinum", l.bg = "bg", l["bg-light"] = "bg-light", l["bg-dark"] = "bg-dark", l["bg-dark-grey"] = "bg-dark-grey", l["bg-black"] = "bg-black", l))(a || {}), x = /* @__PURE__ */ ((l) => (l.xxxsmall = "xxxsmall", l.xxsmall = "xxsmall", l.xsmall = "xsmall", l.small = "small", l.medium = "medium", l.large = "large", l.xlarge = "xlarge", l.xxlarge = "xxlarge", l.xxxlarge = "xxxlarge", l.xxxxlarge = "xxxxlarge", l))(x || {}), s = /* @__PURE__ */ ((l) => (l.xsmall = "xsmall", l.small = "small", l.medium = "medium", l.large = "large", l.xlarge = "xlarge", l))(s || {}), r = /* @__PURE__ */ ((l) => (l.none = "none", l.xsmall = "xsmall", l.small = "small", l.medium = "medium", l.large = "large", l.xlarge = "xlarge", l.pill = "pill", l))(r || {}), g = /* @__PURE__ */ ((l) => (l.zero = "zero", l.first = "first", l.second = "second", l.max = "max", l))(g || {}), e = /* @__PURE__ */ ((l) => (l.none = "none", l.hairthin = "hairthin", l.thin = "thin", l.xxsmall = "xxsmall", l.xsmall = "xsmall", l.small = "small", l.normal = "normal", l.medium = "medium", l.large = "large", l.xlarge = "xlarge", l.safezone = "safezone", l))(e || {}), p = /* @__PURE__ */ ((l) => (l.xxsmall = "xxsmall", l.xsmall = "xsmall", l.small = "small", l.medium = "medium", l.large = "large", l.xlarge = "xlarge", l.xxlarge = "xxlarge", l.xxxlarge = "xxxlarge", l.xxxxlarge = "xxxxlarge", l.xxxxxlarge = "xxxxxlarge", l))(p || {}), t = /* @__PURE__ */ ((l) => (l.sp25 = "sp25", l.sp100 = "sp100", l.sp110 = "sp110", l.sp150 = "sp150", l.sp175 = "sp175", l.sp200 = "sp200", l.sp250 = "sp250", l.sp300 = "sp300", l.sp400 = "sp400", l.sp450 = "sp450", l.sp600 = "sp600", l.sp700 = "sp700", l.sp800 = "sp800", l.sp900 = "sp900", l.sp1000 = "sp1000", l.sp1200 = "sp1200", l.sp1600 = "sp1600", l.sp2400 = "sp2400", l))(t || {}), b = /* @__PURE__ */ ((l) => (l.initial = "initial", l.small = "small", l["small-medium"] = "small-medium", l.medium = "medium", l["medium-large"] = "medium-large", l.large = "large", l.xlarge = "xlarge", l))(b || {});
 const d = {
   initial: 0,
   small: 360,
@@ -9,14 +9,14 @@ const d = {
   xlarge: 2560
 };
 export {
-  s as BorderRadiusEnum,
+  r as BorderRadiusEnum,
   a as ColorEnum,
-  r as IconSizeEnum,
+  s as IconSizeEnum,
   b as MediaQueryEnum,
   d as MediaQueryValuesMap,
-  g as OffsetEnum,
+  e as OffsetEnum,
   p as SpacerEnum,
   t as SpacingEnum,
   x as TextSizeEnum,
-  e as ZIndexEnum
+  g as ZIndexEnum
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cfx-dev/ui-components",
   "private": false,
-  "version": "5.0.3",
+  "version": "5.0.5",
   "type": "module",
   "license": "MIT",
   "main": "dist/main.js",