@cfx-dev/ui-components 4.2.9 → 4.2.11

package/dist/BurgerMenu.module-CyY93Y4u.js

@@ -0,0 +1,11 @@
+const e = "cfxui__BurgerMenu__burgerButton__cc9ab", n = "cfxui__BurgerMenu__burgerMenuContentContainer__2fb6f", r = "cfxui__BurgerMenu__burgerLine__886ad", u = "cfxui__BurgerMenu__burgerLineOpen__af602", _ = "cfxui__BurgerMenu__subItemContainer__0d64a", t = "cfxui__BurgerMenu__subItemContainerOpen__5491d", o = {
+  burgerButton: e,
+  burgerMenuContentContainer: n,
+  burgerLine: r,
+  burgerLineOpen: u,
+  subItemContainer: _,
+  subItemContainerOpen: t
+};
+export {
+  o as s
+};

package/dist/assets/css/BurgerMenu.css

@@ -1 +1 @@
-.cfxui__BurgerMenu__burgerButton__cc9ab{width:calc(var(--quant) * 3.25);height:calc(var(--quant) * 3.25);cursor:pointer}.cfxui__BurgerMenu__burgerContainerOpen__ed7ab{background:rgba(var(--color-bg-light),1);height:var(--height)}.cfxui__BurgerMenu__burgerLine__886ad,.cfxui__BurgerMenu__burgerLineOpen__af602{width:100%;height:calc(var(--quant) * .3);background-color:rgba(var(--color-primary),1);border-radius:var(--border-radius-xsmall)}.cfxui__BurgerMenu__burgerLine__886ad,.cfxui__BurgerMenu__burgerLineOpen__af602{transition:all .25s ease,outline-offset 0s,outline 0s}.cfxui__BurgerMenu__burgerLineOpen__af602:nth-child(1){transform:rotate(45deg) translate(5px,5px)}.cfxui__BurgerMenu__burgerLineOpen__af602:nth-child(1){transition:all .25s ease,outline-offset 0s,outline 0s}.cfxui__BurgerMenu__burgerLineOpen__af602:nth-child(2){opacity:0}.cfxui__BurgerMenu__burgerLineOpen__af602:nth-child(2){transition:all .25s ease,outline-offset 0s,outline 0s}.cfxui__BurgerMenu__burgerLineOpen__af602:nth-child(3){transform:rotate(-45deg) translate(7px,-7px)}.cfxui__BurgerMenu__burgerLineOpen__af602:nth-child(3){transition:all .25s ease,outline-offset 0s,outline 0s}.cfxui__BurgerMenu__subItemContainer__0d64a{background-color:rgba(var(--color-secondary),.25);max-height:0;overflow:hidden}.cfxui__BurgerMenu__subItemContainer__0d64a{transition:all .25s ease,outline-offset 0s,outline 0s}.cfxui__BurgerMenu__subItemContainerOpen__5491d{max-height:var(--height)}
+.cfxui__BurgerMenu__burgerButton__cc9ab{width:calc(var(--quant) * 3.25);height:calc(var(--quant) * 3.25);cursor:pointer}.cfxui__BurgerMenu__burgerMenuContentContainer__2fb6f{background:rgba(var(--color-bg-light),1)}.cfxui__BurgerMenu__burgerLine__886ad,.cfxui__BurgerMenu__burgerLineOpen__af602{width:100%;height:calc(var(--quant) * .3);background-color:rgba(var(--color-primary),1);border-radius:var(--border-radius-xsmall)}.cfxui__BurgerMenu__burgerLine__886ad,.cfxui__BurgerMenu__burgerLineOpen__af602{transition:all .25s ease,outline-offset 0s,outline 0s}.cfxui__BurgerMenu__burgerLineOpen__af602:nth-child(1){transform:rotate(45deg) translate(5px,5px)}.cfxui__BurgerMenu__burgerLineOpen__af602:nth-child(1){transition:all .25s ease,outline-offset 0s,outline 0s}.cfxui__BurgerMenu__burgerLineOpen__af602:nth-child(2){opacity:0}.cfxui__BurgerMenu__burgerLineOpen__af602:nth-child(2){transition:all .25s ease,outline-offset 0s,outline 0s}.cfxui__BurgerMenu__burgerLineOpen__af602:nth-child(3){transform:rotate(-45deg) translate(7px,-7px)}.cfxui__BurgerMenu__burgerLineOpen__af602:nth-child(3){transition:all .25s ease,outline-offset 0s,outline 0s}.cfxui__BurgerMenu__subItemContainer__0d64a{background-color:rgba(var(--color-secondary),.25);max-height:0;overflow:hidden}.cfxui__BurgerMenu__subItemContainer__0d64a{transition:all .25s ease,outline-offset 0s,outline 0s}.cfxui__BurgerMenu__subItemContainerOpen__5491d{max-height:var(--height)}

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

@@ -1,15 +1,16 @@
 import { default as React } from 'react';
 
-interface MenuItem {
+export interface BurgerMenuItem {
     label: string;
     highlighted?: boolean;
     id: string;
     className?: string;
-    submenu?: MenuItem[];
+    submenu?: BurgerMenuItem[];
 }
-interface BurgerMenuProps {
-    items: MenuItem[];
+export interface BurgerMenuProps {
+    items: BurgerMenuItem[];
     onItemClick: (item: string) => void;
+    isOpen: boolean;
+    className?: string;
 }
-export declare function BurgerMenu({ items, onItemClick, }: BurgerMenuProps): React.ReactElement;
-export {};
+export declare function BurgerMenu({ items, onItemClick, isOpen, className, }: BurgerMenuProps): React.ReactElement;

package/dist/components/BurgerMenu/BurgerMenu.js

@@ -1,135 +1,86 @@
-import { jsxs as a, jsx as n } from "react/jsx-runtime";
-import { useState as f, useCallback as l } from "react";
-import { Icon as O } from "../Icon/Icon.js";
-import { Interactive as c } from "../Interactive/Interactive.js";
-import { Flex as u } from "../Layout/Flex/Flex.js";
-import { Text as x } from "../Text/Text.js";
+import { jsx as o, jsxs as c } from "react/jsx-runtime";
+import { useState as C, useCallback as d } from "react";
+import { Icon as k } from "../Icon/Icon.js";
+import { Interactive as m } from "../Interactive/Interactive.js";
+import { Flex as r } from "../Layout/Flex/Flex.js";
+import { Text as w } from "../Text/Text.js";
 import "../ui.js";
-import { clsx as t } from "../../utils/clsx.js";
-const y = "cfxui__BurgerMenu__burgerButton__cc9ab", L = "cfxui__BurgerMenu__burgerContainerOpen__ed7ab", B = "cfxui__BurgerMenu__burgerLine__886ad", k = "cfxui__BurgerMenu__burgerLineOpen__af602", w = "cfxui__BurgerMenu__subItemContainer__0d64a", I = "cfxui__BurgerMenu__subItemContainerOpen__5491d", r = {
-  burgerButton: y,
-  burgerContainerOpen: L,
-  burgerLine: B,
-  burgerLineOpen: k,
-  subItemContainer: w,
-  subItemContainerOpen: I
-};
+import { clsx as h } from "../../utils/clsx.js";
+import { s as l } from "../../BurgerMenu.module-CyY93Y4u.js";
 function K({
-  items: h,
-  onItemClick: b
+  items: b,
+  onItemClick: t,
+  isOpen: p,
+  className: f
 }) {
-  const [i, g] = f(!1), [d, C] = f({}), p = l(() => {
-    g((e) => !e);
-  }, []), s = l((e) => {
-    b(e), g(!1);
-  }, [b]), _ = l((e) => {
-    C((o) => ({
-      ...o,
-      [e]: !o[e]
+  const [u, g] = C({}), i = d((e) => {
+    t(e);
+  }, [t]), s = d((e) => {
+    g((n) => ({
+      ...n,
+      [e]: !n[e]
     }));
   }, []);
-  return /* @__PURE__ */ a(
-    u,
+  return /* @__PURE__ */ o(
+    r,
     {
-      className: t({ [r.burgerContainerOpen]: i }),
+      className: h(l.burgerMenuContentContainer, f),
       direction: "column",
-      children: [
-        /* @__PURE__ */ n(u, { justifyContent: "flex-end", children: /* @__PURE__ */ n(
-          c,
+      children: p && /* @__PURE__ */ o(r, { direction: "column", className: l.menu, children: b.map((e) => /* @__PURE__ */ c("div", { children: [
+        /* @__PURE__ */ o(
+          m,
           {
             showPointer: !0,
-            "aria-label": "Toggle menu",
+            "aria-label": "Toggle item",
             role: "button",
-            onClick: p,
-            onKeyDown: (e) => {
-              (e.key === "Enter" || e.key === " ") && p();
+            onClick: () => {
+              e.submenu ? s(e.id) : i(e.id);
             },
-            children: /* @__PURE__ */ a(
-              u,
-              {
-                justifyContent: "space-around",
-                direction: "column",
-                className: r.burgerButton,
-                children: [
-                  /* @__PURE__ */ n(
-                    "span",
-                    {
-                      className: t(i ? r.burgerLineOpen : r.burgerLine)
-                    }
-                  ),
-                  /* @__PURE__ */ n(
-                    "span",
-                    {
-                      className: t(i ? r.burgerLineOpen : r.burgerLine)
-                    }
-                  ),
-                  /* @__PURE__ */ n(
-                    "span",
-                    {
-                      className: t(i ? r.burgerLineOpen : r.burgerLine)
-                    }
-                  )
-                ]
-              }
-            )
-          }
-        ) }),
-        i && /* @__PURE__ */ n(u, { direction: "column", className: r.menu, children: h.map((e) => /* @__PURE__ */ a("div", { children: [
-          /* @__PURE__ */ n(
-            c,
-            {
-              showPointer: !0,
-              "aria-label": "Toggle item",
-              role: "button",
-              onClick: () => {
-                e.submenu ? _(e.id) : s(e.id);
-              },
-              onKeyDown: (o) => {
-                (o.key === "Enter" || o.key === " ") && (e.submenu ? _(e.id) : s(e.id));
-              },
-              children: /* @__PURE__ */ a(u, { p: 2, justifyContent: "space-between", children: [
-                /* @__PURE__ */ n(
-                  x,
-                  {
-                    size: "xsmall",
-                    weight: e.highlighted ? "bold" : "normal",
-                    children: e.label
-                  }
-                ),
-                e.submenu && /* @__PURE__ */ n(
-                  O,
-                  {
-                    name: d[e.id] ? "UpChevron" : "DownChevron"
-                  }
-                )
-              ] })
-            }
-          ),
-          e.submenu && /* @__PURE__ */ n(
-            u,
-            {
-              className: t(r.subItemContainer, {
-                [r.subItemContainerOpen]: d[e.id]
-              }),
-              direction: "column",
-              children: e.submenu.map((o) => /* @__PURE__ */ n(
-                c,
+            onKeyDown: (n) => {
+              (n.key === "Enter" || n.key === " ") && (e.submenu ? s(e.id) : i(e.id));
+            },
+            children: /* @__PURE__ */ c(r, { p: 2, justifyContent: "space-between", children: [
+              /* @__PURE__ */ o(
+                w,
                 {
-                  showPointer: !0,
-                  "aria-label": "Toggle sub item",
-                  role: "button",
-                  onClick: () => s(o.id),
-                  onKeyDown: (m) => {
-                    (m.key === "Enter" || m.key === " ") && s(o.id);
-                  },
-                  children: /* @__PURE__ */ n(u, { p: 2, children: o.label })
+                  size: "xsmall",
+                  weight: e.highlighted ? "bold" : "normal",
+                  children: e.label
+                }
+              ),
+              e.submenu && /* @__PURE__ */ o(
+                k,
+                {
+                  name: u[e.id] ? "UpChevron" : "DownChevron"
+                }
+              )
+            ] })
+          }
+        ),
+        e.submenu && /* @__PURE__ */ o(
+          r,
+          {
+            className: h(l.subItemContainer, {
+              [l.subItemContainerOpen]: u[e.id]
+            }),
+            direction: "column",
+            children: e.submenu.map((n) => /* @__PURE__ */ o(
+              m,
+              {
+                showPointer: !0,
+                "aria-label": "Toggle sub item",
+                role: "button",
+                onClick: () => i(n.id),
+                onKeyDown: (a) => {
+                  (a.key === "Enter" || a.key === " ") && i(n.id);
                 },
-                o.id
-              ))
-            }
-          )
-        ] }, e.id)) })
-      ]
+                children: /* @__PURE__ */ o(r, { p: 2, children: n.label })
+              },
+              n.id
+            ))
+          }
+        )
+      ] }, e.id)) })
     }
   );
 }

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

@@ -0,0 +1,8 @@
+import { default as React } from 'react';
+
+export interface BurgerMenuButtonProps {
+    isOpen: boolean;
+    onToggle: () => void;
+    className?: string;
+}
+export declare function BurgerMenuButton({ isOpen, onToggle, className, }: BurgerMenuButtonProps): React.ReactElement;

package/dist/components/BurgerMenu/BurgerMenuButton.js

@@ -0,0 +1,54 @@
+import { jsx as e, jsxs as s } from "react/jsx-runtime";
+import { Interactive as m } from "../Interactive/Interactive.js";
+import { Flex as u } from "../Layout/Flex/Flex.js";
+import { clsx as o } from "../../utils/clsx.js";
+import { s as r } from "../../BurgerMenu.module-CyY93Y4u.js";
+function g({
+  isOpen: n,
+  onToggle: t,
+  className: a
+}) {
+  return /* @__PURE__ */ e(u, { className: a, children: /* @__PURE__ */ e(
+    m,
+    {
+      showPointer: !0,
+      "aria-label": "Toggle menu",
+      role: "button",
+      onClick: t,
+      onKeyDown: (i) => {
+        (i.key === "Enter" || i.key === " ") && t();
+      },
+      children: /* @__PURE__ */ s(
+        u,
+        {
+          justifyContent: "space-around",
+          direction: "column",
+          className: r.burgerButton,
+          children: [
+            /* @__PURE__ */ e(
+              "span",
+              {
+                className: o(n ? r.burgerLineOpen : r.burgerLine)
+              }
+            ),
+            /* @__PURE__ */ e(
+              "span",
+              {
+                className: o(n ? r.burgerLineOpen : r.burgerLine)
+              }
+            ),
+            /* @__PURE__ */ e(
+              "span",
+              {
+                className: o(n ? r.burgerLineOpen : r.burgerLine)
+              }
+            )
+          ]
+        }
+      )
+    }
+  ) });
+}
+export {
+  g as BurgerMenuButton
+};

package/dist/components/BurgerMenu/BurgerMenuShowcase.js

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

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

@@ -1 +1,4 @@
+export { BurgerMenuButton } from './BurgerMenuButton';
+export type { BurgerMenuButtonProps } from './BurgerMenuButton';
 export { BurgerMenu } from './BurgerMenu';
+export type { BurgerMenuItem, BurgerMenuProps } from './BurgerMenu';

package/dist/components/BurgerMenu/index.js

@@ -1,4 +1,6 @@
-import { BurgerMenu as o } from "./BurgerMenu.js";
+import { BurgerMenuButton as o } from "./BurgerMenuButton.js";
+import { BurgerMenu as t } from "./BurgerMenu.js";
 export {
-  o as BurgerMenu
+  t as BurgerMenu,
+  o as BurgerMenuButton
 };