quirk-ui 0.0.205 → 0.0.206

package/dist/components/NavBar/NavBar.test.js

@@ -1,5 +1,5 @@
-import { jsx as i } from "react/jsx-runtime";
-import { d as m, i as s, r as l, g as a, s as e, f as n, w as o } from "../../vi.ClIskdbk-CZ8iFAMK.js";
+import { jsx as n } from "react/jsx-runtime";
+import { d as u, i as o, r as s, g as t, s as a, f as i, w as l } from "../../vi.ClIskdbk-CZ8iFAMK.js";
 import { Navbar as r } from "./index.js";
 const c = [
   { label: "Home", href: "/" },
@@ -18,7 +18,7 @@ const c = [
     ]
   },
   { label: "External", href: "https://example.com", isExternal: !0 }
-], u = [
+], m = [
   {
     title: "Company",
     primaryItems: [
@@ -34,60 +34,50 @@ const c = [
       { label: "Careers", href: "/careers" },
       { label: "Blog", href: "/blog" }
     ],
-    spotlight: /* @__PURE__ */ i("div", { children: "Spotlight Content" })
+    spotlight: /* @__PURE__ */ n("div", { children: "Spotlight Content" })
   }
 ];
-m("Navbar (default navigation)", () => {
-  s("renders all top-level nav items", () => {
-    l(/* @__PURE__ */ i(r, { navigationType: "default", alignment: "right", items: c })), a(e.getByText("Home")).toBeInTheDocument(), a(e.getByText("Services")).toBeInTheDocument(), a(e.getByText("External")).toBeInTheDocument();
-  }), s("toggles mobile menu", () => {
-    l(/* @__PURE__ */ i(r, { navigationType: "default", alignment: "right", items: c }));
-    const t = e.getByLabelText("Open menu");
-    n.click(t), a(t).toHaveAttribute("aria-label", "Close menu"), n.click(t), a(t).toHaveAttribute("aria-label", "Open menu");
-  }), s("open and closes submenu on click", async () => {
-    l(/* @__PURE__ */ i(r, { navigationType: "default", alignment: "right", items: c }));
-    const t = e.getByText("Services"), g = e.getByRole("menu", { name: "Services submenu" });
-    n.click(t), await o(() => {
-      a(g).toHaveClass("show");
-    }), n.click(t), await o(() => {
-      a(g).not.toHaveClass("show");
+u("Navbar (default navigation)", () => {
+  o("renders all top-level nav items", () => {
+    s(/* @__PURE__ */ n(r, { navigationType: "default", alignment: "right", items: c })), t(a.getByText("Home")).toBeInTheDocument(), t(a.getByText("Services")).toBeInTheDocument(), t(a.getByText("External")).toBeInTheDocument();
+  }), o("toggles mobile menu", () => {
+    s(/* @__PURE__ */ n(r, { navigationType: "default", alignment: "right", items: c }));
+    const e = a.getByLabelText("Open menu");
+    i.click(e), t(e).toHaveAttribute("aria-label", "Close menu"), i.click(e), t(e).toHaveAttribute("aria-label", "Open menu");
+  }), o("open and closes submenu on click", async () => {
+    s(/* @__PURE__ */ n(r, { navigationType: "default", alignment: "right", items: c }));
+    const e = a.getByText("Services"), g = a.getByRole("menu", { name: "Services submenu" });
+    i.click(e), await l(() => {
+      t(g).toHaveClass("show");
+    }), i.click(e), await l(() => {
+      t(g).not.toHaveClass("show");
     });
-  }), s("has appropriate aria attributes", async () => {
-    l(/* @__PURE__ */ i(r, { navigationType: "default", alignment: "right", items: c }));
-    const t = e.getByText("Services");
-    n.click(t), await o(() => {
-      a(t).toHaveAttribute("aria-expanded", "true");
-    }), n.click(t), await o(() => {
-      a(t).toHaveAttribute("aria-expanded", "false");
+  }), o("has appropriate aria attributes", async () => {
+    s(/* @__PURE__ */ n(r, { navigationType: "default", alignment: "right", items: c }));
+    const e = a.getByText("Services");
+    i.click(e), await l(() => {
+      t(e).toHaveAttribute("aria-expanded", "true");
+    }), i.click(e), await l(() => {
+      t(e).toHaveAttribute("aria-expanded", "false");
     });
-  }), s("only allows one submenu open at a time", async () => {
-    l(/* @__PURE__ */ i(r, { navigationType: "default", alignment: "right", items: c }));
-    const t = e.getByText("Services"), g = e.getByText("About");
-    n.click(t), await o(() => {
-      a(
-        e.getByRole("menu", { name: "Services submenu" })
+  }), o("only allows one submenu open at a time", async () => {
+    s(/* @__PURE__ */ n(r, { navigationType: "default", alignment: "right", items: c }));
+    const e = a.getByText("Services"), g = a.getByText("About");
+    i.click(e), await l(() => {
+      t(
+        a.getByRole("menu", { name: "Services submenu" })
       ).toHaveClass("show");
-    }), n.click(g), await o(() => {
-      a(
-        e.getByRole("menu", { name: "Services submenu" })
+    }), i.click(g), await l(() => {
+      t(
+        a.getByRole("menu", { name: "Services submenu" })
       ).not.toHaveClass("show");
     });
   });
 });
-m("Navbar (advanced navigation with groups)", () => {
-  s("renders group title", () => {
-    l(
-      /* @__PURE__ */ i(r, { alignment: "right", groups: u, navigationType: "advanced" })
-    ), a(e.getByText("Company")).toBeInTheDocument();
-  }), s("renders dropdown on hover and shows all columns", async () => {
-    l(
-      /* @__PURE__ */ i(r, { alignment: "right", groups: u, navigationType: "advanced" })
-    );
-    const t = e.getByText("Company");
-    n.mouseEnter(t), await o(() => {
-      a(e.getByText("About")).toBeInTheDocument();
-    }), n.mouseEnter(e.getByText("About")), await o(() => {
-      a(e.getByText("Team")).toBeInTheDocument(), a(e.getByText("Careers")).toBeInTheDocument(), a(e.getByText("Spotlight Content")).toBeInTheDocument();
-    });
+u("Navbar (advanced navigation with groups)", () => {
+  o("renders group title", () => {
+    s(
+      /* @__PURE__ */ n(r, { alignment: "right", groups: m, navigationType: "advanced" })
+    ), t(a.getByText("Company")).toBeInTheDocument();
   });
 });

package/dist/components/NavBar/index.js

@@ -1,124 +1,119 @@
-import { jsx as n, jsxs as f } from "react/jsx-runtime";
-import { useState as t, useRef as k, useCallback as b, useEffect as _ } from "react";
-import { s as e, N as se } from "../../NavLink-D8ccaE3T.js";
-import { CallToAction as D } from "../CallToAction/index.js";
-import { ButtonGroup as V } from "../ButtonGroup/index.js";
-import { X as ie } from "../../x-CnsEH4Ox.js";
-import { c as re } from "../../createLucideIcon-C8GTh_Qx.js";
-import { C as ce } from "../../chevron-down-DSUzBz9F.js";
+import { jsx as n, jsxs as v } from "react/jsx-runtime";
+import { useState as o, useRef as y, useCallback as b, useEffect as G } from "react";
+import { s as e, N as ne } from "../../NavLink-D8ccaE3T.js";
+import { CallToAction as j } from "../CallToAction/index.js";
+import { ButtonGroup as X } from "../ButtonGroup/index.js";
+import { X as ae } from "../../x-CnsEH4Ox.js";
+import { c as le } from "../../createLucideIcon-C8GTh_Qx.js";
+import { C as se } from "../../chevron-down-DSUzBz9F.js";
 /**
  * @license lucide-react v0.488.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
  */
-const oe = [
+const ie = [
   ["line", { x1: "4", x2: "20", y1: "12", y2: "12", key: "1e0a9i" }],
   ["line", { x1: "4", x2: "20", y1: "6", y2: "6", key: "1owob3" }],
   ["line", { x1: "4", x2: "20", y1: "18", y2: "18", key: "yk5zj1" }]
-], te = re("menu", oe), de = {
+], re = le("menu", ie), ce = {
   default: e.default,
   minimal: e.minimal
-}, he = {
+}, te = {
   left: e.left,
   center: e.center,
   right: e.right
 };
-function Ne({
-  title: H,
-  logo: y,
-  items: x,
-  groups: C,
+function pe({
+  title: _,
+  logo: x,
+  items: C,
+  groups: L,
   utilityItems: l,
-  isSticky: U = !1,
-  isTransparent: q = !1,
+  isSticky: D = !1,
+  isTransparent: V = !1,
   alignment: p = "right",
-  variant: F = "default",
-  navigationType: L = "default",
-  className: J
+  variant: H = "default",
+  navigationType: R = "default",
+  className: U
 }) {
-  const [o, R] = t(!1), [g, h] = t(null), [K, P] = t(0), [Q, Y] = t(!1), [Z, I] = t(null), w = k(null), m = k(null), S = k(/* @__PURE__ */ new Map()), ee = () => {
-    R((a) => !a);
-  }, ne = (a) => {
-    const s = S.current.get(a);
-    if (s && m.current) {
-      const c = s.getBoundingClientRect(), d = m.current.getBoundingClientRect(), i = c.left - d.left + c.width / 4;
-      I(i);
+  const [c, S] = o(!1), [w, m] = o(null), [q, F] = o(0), [J, K] = o(!1), [P, Q] = o(null), g = y(null), h = y(null), M = y(/* @__PURE__ */ new Map()), Y = () => {
+    S((a) => !a);
+  }, Z = (a) => {
+    const s = M.current.get(a);
+    if (s && h.current) {
+      const t = s.getBoundingClientRect(), d = h.current.getBoundingClientRect(), i = t.left - d.left + t.width / 4;
+      Q(i);
     }
-  }, ae = (a) => {
-    h((s) => s === a ? null : a);
-  }, M = b((a) => {
-    w.current && !w.current.contains(a.target) && h(null);
+  }, I = (a) => {
+    m((s) => s === a ? null : a);
+  }, A = b((a) => {
+    g.current && !g.current.contains(a.target) && m(null);
   }, []), E = b(() => {
-    h(null);
-  }, []), A = b(() => {
-    T(), typeof window < "u" && window.innerWidth > 768 && (R(!1), h(null), typeof document < "u" && (document.body.style.overflow = ""));
+    m(null);
   }, []), T = b(() => {
-    if (m.current) {
-      const a = m.current.getBoundingClientRect().width;
-      P(a), Y(!0);
+    z(), typeof window < "u" && window.innerWidth > 768 && (S(!1), m(null), typeof document < "u" && (document.body.style.overflow = ""));
+  }, []), z = b(() => {
+    if (h.current) {
+      const a = h.current.getBoundingClientRect().width;
+      F(a), K(!0);
     }
   }, []);
-  _(() => {
+  G(() => {
     const a = typeof window < "u", s = typeof document < "u";
-    return a && (window.addEventListener("resize", A), window.addEventListener("scroll", E)), s && document.addEventListener("click", M), T(), () => {
-      a && (window.removeEventListener("resize", A), window.removeEventListener("scroll", E)), s && document.removeEventListener("click", M);
+    return a && (window.addEventListener("resize", T), window.addEventListener("scroll", E)), s && document.addEventListener("click", A), z(), () => {
+      a && (window.removeEventListener("resize", T), window.removeEventListener("scroll", E)), s && document.removeEventListener("click", A);
     };
-  }, []), _(() => {
+  }, []), G(() => {
     if (typeof document < "u")
-      return document.body.style.overflow = o ? "hidden" : "", () => {
+      return document.body.style.overflow = c ? "hidden" : "", () => {
         document.body.style.overflow = "";
       };
-  }, [o]);
-  const le = (a) => {
-    const [s, c] = t(null), [d, N] = t(
+  }, [c]);
+  const ee = (a) => {
+    const [s, t] = o(null), [d, N] = o(
       null
     );
     return console.log("GROUPS", a), a.map((i, u) => {
-      var O, W, B, G;
-      const z = `group-${u}`, $ = d === u, r = (O = i.primaryItems) == null ? void 0 : O[s ?? 0];
-      return /* @__PURE__ */ f(
+      var O, W, B;
+      const $ = `group-${u}`, k = d === u, r = (O = i.primaryItems) == null ? void 0 : O[s ?? 0];
+      return /* @__PURE__ */ v(
         "div",
         {
           className: `${e.linkWrapper} ${e.parent}`,
           onMouseEnter: () => N(u),
           onMouseLeave: () => {
-            N(null), c(null);
+            N(null), t(null);
           },
           children: [
-            /* @__PURE__ */ n("div", { className: e.linkItem, children: /* @__PURE__ */ f(
+            /* @__PURE__ */ n("div", { className: e.linkItem, children: /* @__PURE__ */ v(
               "button",
               {
                 "aria-haspopup": "true",
-                "aria-expanded": $,
-                className: `${e.sublinkToggle} ${$ ? e.open : ""} `,
+                "aria-expanded": k,
+                className: `${e.sublinkToggle} ${k ? e.open : ""} `,
                 children: [
                   i.title,
-                  /* @__PURE__ */ n(ce, { size: 18, className: e.chevron })
+                  /* @__PURE__ */ n(se, { size: 18, className: e.chevron })
                 ]
               }
             ) }),
-            $ && /* @__PURE__ */ n(
+            k && /* @__PURE__ */ n(
               "div",
               {
                 className: `${e.sublinks} ${e.show}`,
                 role: "menu",
                 "aria-label": `${i.title} submenu`,
-                children: /* @__PURE__ */ n("div", { children: /* @__PURE__ */ f("div", { className: e.sublinksInner, children: [
-                  /* @__PURE__ */ n("div", { className: e.sublinksColumn, children: (W = i.primaryItems) == null ? void 0 : W.map((j, X) => /* @__PURE__ */ n(
-                    "div",
-                    {
-                      className: e.linkItem,
-                      onMouseEnter: () => c(X),
-                      children: j.label
-                    },
-                    j._key ?? X
-                  )) }),
-                  (r == null ? void 0 : r.sublinks) && ((B = r == null ? void 0 : r.sublinks) == null ? void 0 : B.length) > 0 && /* @__PURE__ */ n("div", { className: e.sublinksColumn, children: (r == null ? void 0 : r.sublinks) && v(
+                children: /* @__PURE__ */ n("div", { children: /* @__PURE__ */ v("div", { className: e.sublinksInner, children: [
+                  i.primaryItems && /* @__PURE__ */ n("div", { className: e.sublinksColumn, children: f(
+                    i.primaryItems,
+                    `${$}-${s}`
+                  ) }),
+                  (r == null ? void 0 : r.sublinks) && ((W = r == null ? void 0 : r.sublinks) == null ? void 0 : W.length) > 0 && /* @__PURE__ */ n("div", { className: e.sublinksColumn, children: (r == null ? void 0 : r.sublinks) && f(
                     r.sublinks,
-                    `${z}-${s}`
+                    `${$}-${s}`
                   ) }),
-                  (i == null ? void 0 : i.secondaryItems) && ((G = i == null ? void 0 : i.secondaryItems) == null ? void 0 : G.length) > 0 && /* @__PURE__ */ n("div", { className: e.sublinksColumn, children: v(i.secondaryItems, `${z}-secondary`) }),
+                  (i == null ? void 0 : i.secondaryItems) && ((B = i == null ? void 0 : i.secondaryItems) == null ? void 0 : B.length) > 0 && /* @__PURE__ */ n("div", { className: e.sublinksColumn, children: f(i.secondaryItems, `${$}-secondary`) }),
                   i.spotlight && /* @__PURE__ */ n("div", { className: e.sublinksColumn, children: i.spotlight })
                 ] }) })
               }
@@ -128,20 +123,20 @@ function Ne({
         u
       );
     });
-  }, v = (a, s = "") => a.map((c) => {
-    const d = `${s}/${c.label}`;
+  }, f = (a, s = "") => a.map((t) => {
+    const d = `${s}/${t.label}`;
     return /* @__PURE__ */ n(
-      se,
+      ne,
       {
-        link: c,
+        link: t,
         path: d,
         parentPath: s,
-        openPath: g,
-        togglePath: ae,
-        updateTriangleIndicator: ne,
-        setOpenPath: h,
-        renderLinks: v,
-        buttonRefs: S
+        openPath: w,
+        togglePath: I,
+        updateTriangleIndicator: Z,
+        setOpenPath: m,
+        renderLinks: f,
+        buttonRefs: M
       },
       d
     );
@@ -149,32 +144,32 @@ function Ne({
   return /* @__PURE__ */ n(
     "header",
     {
-      ref: w,
-      className: `${J ?? ""} ${he[p]} ${de[F]} ${e.navbar} ${U ? e.sticky : ""} ${q ? e.transparent : ""} `,
+      ref: g,
+      className: `${U ?? ""} ${te[p]} ${ce[H]} ${e.navbar} ${D ? e.sticky : ""} ${V ? e.transparent : ""} `,
       role: "navigation",
       "aria-label": "Main navigation",
-      children: /* @__PURE__ */ f(
+      children: /* @__PURE__ */ v(
         "div",
         {
           className: `${e.container} ${(!l || l.length === 0) && p !== "center" ? e.twoColumn : ""}`,
           children: [
-            y ? /* @__PURE__ */ n("div", { className: e.logo, children: y }) : /* @__PURE__ */ n("div", { className: e.title, children: H }),
+            x ? /* @__PURE__ */ n("div", { className: e.logo, children: x }) : /* @__PURE__ */ n("div", { className: e.title, children: _ }),
             /* @__PURE__ */ n(
               "nav",
               {
-                ref: m,
+                ref: h,
                 style: {
-                  left: p === "center" ? `calc(50% - ${K / 2}px)` : "0"
+                  left: p === "center" ? `calc(50% - ${q / 2}px)` : "0"
                 },
-                className: `${e.nav} ${o ? e.open : ""} ${Q ? e.visible : e.hidden}`,
+                className: `${e.nav} ${c ? e.open : ""} ${J ? e.visible : e.hidden}`,
                 id: "main-menu",
                 role: "menubar",
-                children: /* @__PURE__ */ f("div", { className: e.navInner, children: [
+                children: /* @__PURE__ */ v("div", { className: e.navInner, children: [
                   /* @__PURE__ */ n(
                     "svg",
                     {
-                      style: { left: `${Z}px` },
-                      className: `${e.triangle} ${g ? e.show : ""}`,
+                      style: { left: `${P}px` },
+                      className: `${e.triangle} ${w ? e.show : ""}`,
                       width: 16,
                       height: 12,
                       viewBox: "0 0 100 75",
@@ -193,16 +188,16 @@ function Ne({
                   /* @__PURE__ */ n(
                     "div",
                     {
-                      className: `${e.triangle} ${g ? e.show : ""}`
+                      className: `${e.triangle} ${w ? e.show : ""}`
                     }
                   ),
-                  L === "default" && x && /* @__PURE__ */ n("div", { className: e.grid, children: v(x) }),
-                  L === "advanced" && C && /* @__PURE__ */ n("div", { className: e.grid, children: le(C) })
+                  R === "default" && C && /* @__PURE__ */ n("div", { className: e.grid, children: f(C) }),
+                  R === "advanced" && L && /* @__PURE__ */ n("div", { className: e.grid, children: ee(L) })
                 ] })
               }
             ),
-            l && /* @__PURE__ */ n("nav", { className: e.utility, children: /* @__PURE__ */ n(V, { children: l.map((a, s) => /* @__PURE__ */ n(
-              D,
+            l && /* @__PURE__ */ n("nav", { className: e.utility, children: /* @__PURE__ */ n(X, { children: l.map((a, s) => /* @__PURE__ */ n(
+              j,
               {
                 as: "a",
                 href: a.href ?? "/",
@@ -225,9 +220,9 @@ function Ne({
             l && /* @__PURE__ */ n(
               "nav",
               {
-                className: `${e.utilityMobile} ${o ? e.open : ""}`,
-                children: /* @__PURE__ */ n(V, { alignment: "center", children: /* @__PURE__ */ n(
-                  D,
+                className: `${e.utilityMobile} ${c ? e.open : ""}`,
+                children: /* @__PURE__ */ n(X, { alignment: "center", children: /* @__PURE__ */ n(
+                  j,
                   {
                     as: "a",
                     href: l[1].href ?? "/",
@@ -252,11 +247,11 @@ function Ne({
               "button",
               {
                 className: e.menuToggle,
-                onClick: ee,
-                "aria-label": o ? "Close menu" : "Open menu",
-                "aria-expanded": o,
+                onClick: Y,
+                "aria-label": c ? "Close menu" : "Open menu",
+                "aria-expanded": c,
                 "aria-controls": "main-menu",
-                children: o ? /* @__PURE__ */ n(ie, { size: 24 }) : /* @__PURE__ */ n(te, { size: 24 })
+                children: c ? /* @__PURE__ */ n(ae, { size: 24 }) : /* @__PURE__ */ n(re, { size: 24 })
               }
             )
           ]
@@ -266,5 +261,5 @@ function Ne({
   );
 }
 export {
-  Ne as Navbar
+  pe as Navbar
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "quirk-ui",
   "private": false,
-  "version": "0.0.205",
+  "version": "0.0.206",
   "type": "module",
   "exports": {
     ".": {