@cfx-dev/ui-components 4.2.7 → 4.2.9

package/dist/assets/all_css.css

@@ -3,6 +3,7 @@
 @import "./css/Avatar.css";
 @import "./css/Badge.css";
 @import "./css/Box.css";
+@import "./css/BurgerMenu.css";
 @import "./css/Button.css";
 @import "./css/ButtonBar.css";
 @import "./css/Center.css";

package/dist/assets/css/BurgerMenu.css

@@ -0,0 +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)}

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

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

package/dist/components/BurgerMenu/BurgerMenu.js

@@ -0,0 +1,138 @@
+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 "../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
+};
+function K({
+  items: h,
+  onItemClick: b
+}) {
+  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]
+    }));
+  }, []);
+  return /* @__PURE__ */ a(
+    u,
+    {
+      className: t({ [r.burgerContainerOpen]: i }),
+      direction: "column",
+      children: [
+        /* @__PURE__ */ n(u, { justifyContent: "flex-end", children: /* @__PURE__ */ n(
+          c,
+          {
+            showPointer: !0,
+            "aria-label": "Toggle menu",
+            role: "button",
+            onClick: p,
+            onKeyDown: (e) => {
+              (e.key === "Enter" || e.key === " ") && p();
+            },
+            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,
+                {
+                  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 })
+                },
+                o.id
+              ))
+            }
+          )
+        ] }, e.id)) })
+      ]
+    }
+  );
+}
+export {
+  K as BurgerMenu
+};

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

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+
+declare function BurgerMenuShowcase(): import("react/jsx-runtime").JSX.Element;
+declare const _default: React.MemoExoticComponent<typeof BurgerMenuShowcase>;
+export default _default;

package/dist/components/BurgerMenu/BurgerMenuShowcase.js

@@ -0,0 +1,53 @@
+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 "../ui.js";
+import { BurgerMenu as n } from "./BurgerMenu.js";
+const a = [
+  {
+    id: "1",
+    label: "Account",
+    highlighted: !0
+  },
+  {
+    id: "2",
+    label: "Dashboard"
+  },
+  {
+    id: "3",
+    label: "Servers",
+    submenu: [
+      {
+        id: "3-1",
+        label: "Server Keys"
+      },
+      {
+        id: "3-2",
+        label: "Server Hosting"
+      }
+    ]
+  },
+  {
+    id: "4",
+    label: "Settings"
+  }
+], m = (t) => {
+  console.log(`Item clicked: ${t}`);
+};
+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,
+      {
+        items: a,
+        onItemClick: m
+      }
+    ) })
+  ] }) });
+}
+const b = i.memo(c);
+export {
+  b as default
+};

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

@@ -0,0 +1 @@
+export { BurgerMenu } from './BurgerMenu';

package/dist/components/BurgerMenu/index.js

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