@cfx-dev/ui-components 5.0.24 → 5.0.25

package/dist/components/BurgerMenu/BurgerMenu.js

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

package/dist/components/BurgerMenu/BurgerMenuButton.js

@@ -2,7 +2,7 @@ import { jsx as e, jsxs as s } from "react/jsx-runtime";
 import u from "../Flex/Flex.js";
 import { clsx as o } from "../../utils/clsx.js";
 import { Interactive as m } from "../Interactive/Interactive.js";
-import { s as r } from "../../BurgerMenu.module-DzFXW4p3.js";
+import { s as r } from "../../BurgerMenu.module-DA0ojIYf.js";
 function g({
   isOpen: n,
   onToggle: t,

package/dist/components/BurgerMenu/BurgerMenuShowcase.js

@@ -1,11 +1,11 @@
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
-import u, { useState as a, useCallback as s } from "react";
-import t from "../Flex/Flex.js";
-import { Text as m } from "../Text/Text.js";
+import { jsxs as t, jsx as r } from "react/jsx-runtime";
+import g, { useState as d, useCallback as h } from "react";
+import l from "../Flex/Flex.js";
+import { Text as o } from "../Text/Text.js";
 import "../../utils/ui/ui.js";
-import { BurgerMenu as c } from "./BurgerMenu.js";
-import { BurgerMenuButton as d } from "./BurgerMenuButton.js";
-const g = [
+import { BurgerMenu as n } from "./BurgerMenu.js";
+import { BurgerMenuButton as u } from "./BurgerMenuButton.js";
+const a = [
   {
     id: "1",
     label: "Account",
@@ -33,27 +33,42 @@ const g = [
     id: "4",
     label: "Settings"
   }
-], p = (e) => {
+], m = (e) => {
   console.log(`Item clicked: ${e}`);
 };
-function f() {
-  const [e, l] = a(!1), o = s(() => {
-    l((n) => !n);
+function p() {
+  const [e, s] = d(!1), i = h(() => {
+    s((c) => !c);
   }, []);
-  return /* @__PURE__ */ r(t, { gap: "large", vertical: !0, pb: 20, children: /* @__PURE__ */ i(t, { gap: "medium", vertical: !0, children: [
-    /* @__PURE__ */ r(m, { children: "Burger Menu" }),
-    /* @__PURE__ */ r(d, { isOpen: e, onToggle: o }),
-    /* @__PURE__ */ r(
-      c,
-      {
-        items: g,
-        onItemClick: p,
-        isOpen: e
-      }
-    )
-  ] }) });
+  return /* @__PURE__ */ t(l, { gap: "large", vertical: !0, pb: 20, children: [
+    /* @__PURE__ */ t(l, { gap: "medium", vertical: !0, children: [
+      /* @__PURE__ */ r(o, { children: "Burger Menu" }),
+      /* @__PURE__ */ r(u, { isOpen: e, onToggle: i }),
+      /* @__PURE__ */ r(
+        n,
+        {
+          items: a,
+          onItemClick: m,
+          isOpen: e
+        }
+      )
+    ] }),
+    /* @__PURE__ */ t(l, { gap: "medium", vertical: !0, children: [
+      /* @__PURE__ */ r(o, { children: "Burger Menu With highlighted border" }),
+      /* @__PURE__ */ r(u, { isOpen: e, onToggle: i }),
+      /* @__PURE__ */ r(
+        n,
+        {
+          items: a,
+          onItemClick: m,
+          isOpen: e,
+          showHighlightBorder: !0
+        }
+      )
+    ] })
+  ] });
 }
-const I = u.memo(f);
+const k = g.memo(p);
 export {
-  I as default
+  k as default
 };

package/dist/components/Checkbox/Checkbox.js

@@ -1,4 +1,4 @@
-import { jsx as m, jsxs as U, Fragment as V } from "react/jsx-runtime";
+import { jsx as a, jsxs as U, Fragment as V } from "react/jsx-runtime";
 import * as f from "react";
 import R from "react";
 import { P as w, u as W, a as A, c as T, b as Y, d as Z } from "../../index-8cuIcSMB.js";
@@ -56,6 +56,19 @@ import "../Icons/cfx-icons/User.js";
 import "../Icons/cfx-icons/Verified.js";
 import "../Icons/cfx-icons/UpvotesBurst.js";
 import "../Icons/cfx-icons/UpvotesRecurring.js";
+import "../Icons/cfx-icons/Car.js";
+import "../Icons/cfx-icons/Population.js";
+import "../Icons/cfx-icons/Tooling.js";
+import "../Icons/cfx-icons/Integration.js";
+import "../Icons/cfx-icons/RedMServer.js";
+import "../Icons/cfx-icons/FiveMServer.js";
+import "../Icons/cfx-icons/Script.js";
+import "../Icons/cfx-icons/Creator.js";
+import "../Icons/cfx-icons/Documentation.js";
+import "../Icons/cfx-icons/Pen.js";
+import "../Icons/cfx-icons/Expand2.js";
+import "../Icons/cfx-icons/Snail.js";
+import "../Icons/cfx-icons/Hat.js";
 import "../Icons/cfx-iconsXLarge/Close.js";
 import "../Icons/cfx-iconsXLarge/Controller.js";
 import "../Icons/cfx-iconsXLarge/Copy.js";
@@ -108,12 +121,25 @@ import "../Icons/cfx-iconsXLarge/User.js";
 import "../Icons/cfx-iconsXLarge/Verified.js";
 import "../Icons/cfx-iconsXLarge/UpvotesBurst.js";
 import "../Icons/cfx-iconsXLarge/UpvotesRecurring.js";
+import "../Icons/cfx-iconsXLarge/Car.js";
+import "../Icons/cfx-iconsXLarge/Population.js";
+import "../Icons/cfx-iconsXLarge/Tooling.js";
+import "../Icons/cfx-iconsXLarge/Integration.js";
+import "../Icons/cfx-iconsXLarge/RedMServer.js";
+import "../Icons/cfx-iconsXLarge/FiveMServer.js";
+import "../Icons/cfx-iconsXLarge/Script.js";
+import "../Icons/cfx-iconsXLarge/Creator.js";
+import "../Icons/cfx-iconsXLarge/Documentation.js";
+import "../Icons/cfx-iconsXLarge/Pen.js";
+import "../Icons/cfx-iconsXLarge/Expand2.js";
+import "../Icons/cfx-iconsXLarge/Snail.js";
+import "../Icons/cfx-iconsXLarge/Hat.js";
 import { clsx as P } from "../../utils/clsx.js";
 import { getColor as ie } from "../../utils/color.js";
 var q = "Checkbox", [ce] = Z(q), [ne, F] = ce(q);
 function se(o) {
   const {
-    __scopeCheckbox: a,
+    __scopeCheckbox: m,
     checked: c,
     children: p,
     defaultChecked: r,
@@ -149,17 +175,17 @@ function se(o) {
     bubbleInput: C,
     setBubbleInput: i
   };
-  return /* @__PURE__ */ m(
+  return /* @__PURE__ */ a(
     ne,
     {
-      scope: a,
+      scope: m,
       ...I,
-      children: ae(u) ? u(I) : p
+      children: me(u) ? u(I) : p
     }
   );
 }
 var O = "CheckboxTrigger", D = f.forwardRef(
-  ({ __scopeCheckbox: o, onKeyDown: a, onClick: c, ...p }, r) => {
+  ({ __scopeCheckbox: o, onKeyDown: m, onClick: c, ...p }, r) => {
     const {
       control: e,
       value: _,
@@ -178,7 +204,7 @@ var O = "CheckboxTrigger", D = f.forwardRef(
         const t = () => u(C.current);
         return i.addEventListener("reset", t), () => i.removeEventListener("reset", t);
       }
-    }, [e, u]), /* @__PURE__ */ m(
+    }, [e, u]), /* @__PURE__ */ a(
       w.button,
       {
         type: "button",
@@ -191,7 +217,7 @@ var O = "CheckboxTrigger", D = f.forwardRef(
         value: _,
         ...p,
         ref: k,
-        onKeyDown: T(a, (i) => {
+        onKeyDown: T(m, (i) => {
           i.key === "Enter" && i.preventDefault();
         }),
         onClick: T(c, (i) => {
@@ -203,7 +229,7 @@ var O = "CheckboxTrigger", D = f.forwardRef(
 );
 D.displayName = O;
 var L = f.forwardRef(
-  (o, a) => {
+  (o, m) => {
     const {
       __scopeCheckbox: c,
       name: p,
@@ -216,7 +242,7 @@ var L = f.forwardRef(
       form: x,
       ...u
     } = o;
-    return /* @__PURE__ */ m(
+    return /* @__PURE__ */ a(
       se,
       {
         __scopeCheckbox: c,
@@ -229,15 +255,15 @@ var L = f.forwardRef(
         form: x,
         value: d,
         internal_do_not_use_render: ({ isFormControl: n }) => /* @__PURE__ */ U(V, { children: [
-          /* @__PURE__ */ m(
+          /* @__PURE__ */ a(
             D,
             {
               ...u,
-              ref: a,
+              ref: m,
               __scopeCheckbox: c
             }
           ),
-          n && /* @__PURE__ */ m(
+          n && /* @__PURE__ */ a(
             G,
             {
               __scopeCheckbox: c
@@ -250,19 +276,19 @@ var L = f.forwardRef(
 );
 L.displayName = q;
 var j = "CheckboxIndicator", H = f.forwardRef(
-  (o, a) => {
+  (o, m) => {
     const { __scopeCheckbox: c, forceMount: p, ...r } = o, e = F(j, c);
-    return /* @__PURE__ */ m(
+    return /* @__PURE__ */ a(
       oe,
       {
         present: p || v(e.checked) || e.checked === !0,
-        children: /* @__PURE__ */ m(
+        children: /* @__PURE__ */ a(
           w.span,
           {
             "data-state": K(e.checked),
             "data-disabled": e.disabled ? "" : void 0,
             ...r,
-            ref: a,
+            ref: m,
             style: { pointerEvents: "none", ...o.style }
           }
         )
@@ -272,7 +298,7 @@ var j = "CheckboxIndicator", H = f.forwardRef(
 );
 H.displayName = j;
 var $ = "CheckboxBubbleInput", G = f.forwardRef(
-  ({ __scopeCheckbox: o, ...a }, c) => {
+  ({ __scopeCheckbox: o, ...m }, c) => {
     const {
       control: p,
       hasConsumerStoppedPropagationRef: r,
@@ -299,7 +325,7 @@ var $ = "CheckboxBubbleInput", G = f.forwardRef(
       }
     }, [n, k, e, r]);
     const i = f.useRef(v(e) ? !1 : e);
-    return /* @__PURE__ */ m(
+    return /* @__PURE__ */ a(
       w.input,
       {
         type: "checkbox",
@@ -310,11 +336,11 @@ var $ = "CheckboxBubbleInput", G = f.forwardRef(
         name: b,
         value: x,
         form: u,
-        ...a,
+        ...m,
         tabIndex: -1,
         ref: l,
         style: {
-          ...a.style,
+          ...m.style,
           ...C,
           position: "absolute",
           pointerEvents: "none",
@@ -330,7 +356,7 @@ var $ = "CheckboxBubbleInput", G = f.forwardRef(
   }
 );
 G.displayName = $;
-function ae(o) {
+function me(o) {
   return typeof o == "function";
 }
 function v(o) {
@@ -339,8 +365,8 @@ function v(o) {
 function K(o) {
   return v(o) ? "indeterminate" : o ? "checked" : "unchecked";
 }
-const me = "cfxui__Checkbox__rootUnset__cbb57", pe = "cfxui__Checkbox__root__865aa", de = "cfxui__Checkbox__secondary__95e8e", ue = "cfxui__Checkbox__isChecked__e5d94", le = "cfxui__Checkbox__icon__f9f6b", fe = "cfxui__Checkbox__square__029aa", _e = "cfxui__Checkbox__indicator__2afc0", he = "cfxui__Checkbox__squareFilledIcon__7d9b7", Ce = "cfxui__Checkbox__tickIcon__a7f19", s = {
-  rootUnset: me,
+const ae = "cfxui__Checkbox__rootUnset__cbb57", pe = "cfxui__Checkbox__root__865aa", de = "cfxui__Checkbox__secondary__95e8e", ue = "cfxui__Checkbox__isChecked__e5d94", le = "cfxui__Checkbox__icon__f9f6b", fe = "cfxui__Checkbox__square__029aa", _e = "cfxui__Checkbox__indicator__2afc0", he = "cfxui__Checkbox__squareFilledIcon__7d9b7", Ce = "cfxui__Checkbox__tickIcon__a7f19", s = {
+  rootUnset: ae,
   root: pe,
   secondary: de,
   isChecked: ue,
@@ -355,7 +381,7 @@ const me = "cfxui__Checkbox__rootUnset__cbb57", pe = "cfxui__Checkbox__root__865
 };
 function ke(o) {
   const {
-    id: a,
+    id: m,
     size: c = "medium",
     rootClassName: p,
     indicatorClassName: r,
@@ -407,14 +433,14 @@ function ke(o) {
     L,
     {
       ...g,
-      id: a,
+      id: m,
       checked: I,
       style: { color: X },
       className: J,
       onClick: S,
       onCheckedChange: z,
       children: [
-        k && /* @__PURE__ */ m(
+        k && /* @__PURE__ */ a(
           "input",
           {
             type: "hidden",
@@ -422,7 +448,7 @@ function ke(o) {
             value: I ? "on" : ""
           }
         ),
-        /* @__PURE__ */ m(
+        /* @__PURE__ */ a(
           y,
           {
             className: P(
@@ -435,12 +461,12 @@ function ke(o) {
             )
           }
         ),
-        /* @__PURE__ */ m(H, { className: P(s.indicator, s[C], r), children: /* @__PURE__ */ m(l, { className: Q }) })
+        /* @__PURE__ */ a(H, { className: P(s.indicator, s[C], r), children: /* @__PURE__ */ a(l, { className: Q }) })
       ]
     }
   );
 }
-const yt = R.memo(ke);
+const Qt = R.memo(ke);
 export {
-  yt as default
+  Qt as default
 };

package/dist/components/Checkbox/CheckboxShowcase.js

@@ -53,6 +53,19 @@ import "../Icons/cfx-icons/User.js";
 import "../Icons/cfx-icons/Verified.js";
 import "../Icons/cfx-icons/UpvotesBurst.js";
 import "../Icons/cfx-icons/UpvotesRecurring.js";
+import "../Icons/cfx-icons/Car.js";
+import "../Icons/cfx-icons/Population.js";
+import "../Icons/cfx-icons/Tooling.js";
+import "../Icons/cfx-icons/Integration.js";
+import "../Icons/cfx-icons/RedMServer.js";
+import "../Icons/cfx-icons/FiveMServer.js";
+import "../Icons/cfx-icons/Script.js";
+import "../Icons/cfx-icons/Creator.js";
+import "../Icons/cfx-icons/Documentation.js";
+import "../Icons/cfx-icons/Pen.js";
+import "../Icons/cfx-icons/Expand2.js";
+import "../Icons/cfx-icons/Snail.js";
+import "../Icons/cfx-icons/Hat.js";
 import "../Icons/cfx-iconsXLarge/Close.js";
 import "../Icons/cfx-iconsXLarge/Controller.js";
 import "../Icons/cfx-iconsXLarge/Copy.js";
@@ -105,13 +118,26 @@ import "../Icons/cfx-iconsXLarge/User.js";
 import "../Icons/cfx-iconsXLarge/Verified.js";
 import "../Icons/cfx-iconsXLarge/UpvotesBurst.js";
 import "../Icons/cfx-iconsXLarge/UpvotesRecurring.js";
+import "../Icons/cfx-iconsXLarge/Car.js";
+import "../Icons/cfx-iconsXLarge/Population.js";
+import "../Icons/cfx-iconsXLarge/Tooling.js";
+import "../Icons/cfx-iconsXLarge/Integration.js";
+import "../Icons/cfx-iconsXLarge/RedMServer.js";
+import "../Icons/cfx-iconsXLarge/FiveMServer.js";
+import "../Icons/cfx-iconsXLarge/Script.js";
+import "../Icons/cfx-iconsXLarge/Creator.js";
+import "../Icons/cfx-iconsXLarge/Documentation.js";
+import "../Icons/cfx-iconsXLarge/Pen.js";
+import "../Icons/cfx-iconsXLarge/Expand2.js";
+import "../Icons/cfx-iconsXLarge/Snail.js";
+import "../Icons/cfx-iconsXLarge/Hat.js";
 import t from "./Checkbox.js";
 const d = "cfxui__CheckboxShowcase__root__5c0e0", h = "cfxui__CheckboxShowcase__checked__e49f9", s = "cfxui__CheckboxShowcase__icon__686ec", m = {
   root: d,
   checked: h,
   icon: s
 };
-function _i(l) {
+function Hi(l) {
   const [e, p] = a.useState(!1);
   return /* @__PURE__ */ i(r, { direction: "column", gap: "large", children: [
     /* @__PURE__ */ i(r, { direction: "column", gap: "small", children: [
@@ -170,5 +196,5 @@ function _i(l) {
   ] });
 }
 export {
-  _i as default
+  Hi as default
 };

package/dist/components/Icon/Icon.js

@@ -1,7 +1,7 @@
 import { jsx as m } from "react/jsx-runtime";
 import c from "react";
-import { I as h } from "../../cfxIcons-YyDWNxmM.js";
-import { I as _ } from "../../cfxIconsXLarge-Dw37ZSw2.js";
+import { I as h } from "../../cfxIcons-B2ocwAjm.js";
+import { I as _ } from "../../cfxIconsXLarge-C9n01-rM.js";
 import { getTextOpacity as d } from "../Text/Text.js";
 import { ui as t } from "../../utils/ui/ui.js";
 import { IconSizeEnum as f } from "../../utils/ui/ui.types.js";