@cfx-dev/ui-components 5.0.4 → 5.0.6

package/dist/components/BurgerMenu/BurgerMenu.d.ts

@@ -4,6 +4,7 @@ export interface BurgerMenuItem {
     label: string;
     highlighted?: boolean;
     id: string;
+    openByDefault?: boolean;
     className?: string;
     submenu?: BurgerMenuItem[];
 }
@@ -12,5 +13,9 @@ export interface BurgerMenuProps {
     onItemClick: (item: string) => void;
     isOpen: boolean;
     className?: string;
+    menuClassName?: string;
+    subItemContainerClassName?: string;
+    itemInteractiveClassName?: string;
+    itemClassName?: string;
 }
-export declare function BurgerMenu({ items, onItemClick, isOpen, className, }: BurgerMenuProps): React.ReactElement;
+export declare function BurgerMenu({ items, onItemClick, isOpen, className, menuClassName, subItemContainerClassName, itemInteractiveClassName, itemClassName, }: BurgerMenuProps): React.ReactElement;

package/dist/components/BurgerMenu/BurgerMenu.js

@@ -1,22 +1,31 @@
-import { jsx as o, jsxs as c } from "react/jsx-runtime";
-import { useState as C, useCallback as d } from "react";
+import { jsx as o, jsxs as p } from "react/jsx-runtime";
+import { useState as x, useCallback as b } from "react";
 import r from "../Flex/Flex.js";
-import { clsx as m } from "../../utils/clsx.js";
-import { Icon as k } from "../Icon/Icon.js";
-import { Interactive as h } from "../Interactive/Interactive.js";
-import { Text as w } from "../Text/Text.js";
+import { clsx as u } from "../../utils/clsx.js";
+import { Icon as N } from "../Icon/Icon.js";
+import { Interactive as f } from "../Interactive/Interactive.js";
+import { Text as S } from "../Text/Text.js";
 import "../../utils/ui/ui.js";
-import { s as l } from "../../BurgerMenu.module-CyY93Y4u.js";
-function K({
-  items: b,
-  onItemClick: u,
-  isOpen: p,
-  className: f
+import { s as i } from "../../BurgerMenu.module-CyY93Y4u.js";
+function P({
+  items: a,
+  onItemClick: c,
+  isOpen: g,
+  className: y,
+  menuClassName: C,
+  subItemContainerClassName: k,
+  itemInteractiveClassName: s,
+  itemClassName: t
 }) {
-  const [t, g] = C({}), i = d((e) => {
-    u(e);
-  }, [u]), s = d((e) => {
-    g((n) => ({
+  const [d, w] = x(() => {
+    const e = {};
+    return a.forEach((n) => {
+      n.openByDefault && (e[n.id] = !0);
+    }), e;
+  }), l = b((e) => {
+    c(e);
+  }, [c]), m = b((e) => {
+    w((n) => ({
       ...n,
       [e]: !n[e]
     }));
@@ -24,24 +33,25 @@ function K({
   return /* @__PURE__ */ o(
     r,
     {
-      className: m(l.burgerMenuContentContainer, f),
+      className: u(i.burgerMenuContentContainer, y),
       direction: "column",
-      children: p && /* @__PURE__ */ o(r, { direction: "column", className: l.menu, children: b.map((e) => /* @__PURE__ */ c("div", { children: [
+      children: g && /* @__PURE__ */ o(r, { direction: "column", className: u(i.menu, C), children: a.map((e) => /* @__PURE__ */ p("div", { children: [
         /* @__PURE__ */ o(
-          h,
+          f,
           {
             showPointer: !0,
             "aria-label": "Toggle item",
             role: "button",
             onClick: () => {
-              e.submenu ? s(e.id) : i(e.id);
+              e.submenu ? m(e.id) : l(e.id);
             },
             onKeyDown: (n) => {
-              (n.key === "Enter" || n.key === " ") && (e.submenu ? s(e.id) : i(e.id));
+              (n.key === "Enter" || n.key === " ") && (e.submenu ? m(e.id) : l(e.id));
             },
-            children: /* @__PURE__ */ c(r, { p: 2, justifyContent: "space-between", children: [
+            className: s,
+            children: /* @__PURE__ */ p(r, { p: 2, justifyContent: "space-between", className: t, children: [
               /* @__PURE__ */ o(
-                w,
+                S,
                 {
                   size: "xsmall",
                   weight: e.highlighted ? "bold" : "regular",
@@ -49,9 +59,9 @@ function K({
                 }
               ),
               e.submenu && /* @__PURE__ */ o(
-                k,
+                N,
                 {
-                  name: t[e.id] ? "UpChevron" : "DownChevron"
+                  name: d[e.id] ? "UpChevron" : "DownChevron"
                 }
               )
             ] })
@@ -60,21 +70,26 @@ function K({
         e.submenu && /* @__PURE__ */ o(
           r,
           {
-            className: m(l.subItemContainer, {
-              [l.subItemContainerOpen]: t[e.id]
-            }),
+            className: u(
+              i.subItemContainer,
+              k,
+              {
+                [i.subItemContainerOpen]: d[e.id]
+              }
+            ),
             direction: "column",
             children: e.submenu.map((n) => /* @__PURE__ */ o(
-              h,
+              f,
               {
                 showPointer: !0,
                 "aria-label": "Toggle sub item",
                 role: "button",
-                onClick: () => i(n.id),
-                onKeyDown: (a) => {
-                  (a.key === "Enter" || a.key === " ") && i(n.id);
+                onClick: () => l(n.id),
+                onKeyDown: (h) => {
+                  (h.key === "Enter" || h.key === " ") && l(n.id);
                 },
-                children: /* @__PURE__ */ o(r, { p: 2, children: n.label })
+                className: s,
+                children: /* @__PURE__ */ o(r, { p: 2, className: t, children: n.label })
               },
               n.id
             ))
@@ -85,5 +100,5 @@ function K({
   );
 }
 export {
-  K as BurgerMenu
+  P as BurgerMenu
 };

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.4",
+  "version": "5.0.6",
   "type": "module",
   "license": "MIT",
   "main": "dist/main.js",