@blakesteve/roster 5.0.1 → 5.2.0

package/dist/components/organisms/Navbar/Navbar.js

@@ -1,25 +1,39 @@
 "use client";
 import { jsx as r, jsxs as s, Fragment as I } from "react/jsx-runtime";
-import T, { Fragment as R, useEffect as P, useRef as rr } from "react";
+import Z, { Fragment as q, useEffect as H, useRef as rr } from "react";
 import { FontAwesomeIcon as g } from "../../../node_modules/@fortawesome/react-fontawesome/dist/index.js";
-import { faInbox as tr, faMoon as $, faRightFromBracket as sr, faXmark as q, faBars as er } from "../../../node_modules/@fortawesome/free-solid-svg-icons/index.js";
+import { faInbox as tr, faMoon as E, faRightFromBracket as sr, faXmark as K, faBars as er } from "../../../node_modules/@fortawesome/free-solid-svg-icons/index.js";
 import { cn as a } from "../../../lib/utils.js";
 import { Button as p } from "../../atoms/Button/Button.js";
 import { Link as x } from "../../atoms/Link/Link.js";
-import { Badge as _ } from "../../atoms/Badge/Badge.js";
+import { Badge as V } from "../../atoms/Badge/Badge.js";
 import { Avatar as ar } from "../../atoms/Avatar/Avatar.js";
-import { Switch as X } from "../../atoms/Switch/Switch.js";
-import { navbarVariants as nr } from "./navbar-variants.js";
-import { Menu as ir, MenuButton as or, MenuItems as lr, MenuItem as A } from "../../../node_modules/@headlessui/react/dist/components/menu/menu.js";
-import { Popover as cr, PopoverButton as G, PopoverPanel as dr } from "../../../node_modules/@headlessui/react/dist/components/popover/popover.js";
-import { Transition as H } from "../../../node_modules/@headlessui/react/dist/components/transition/transition.js";
-const J = (e, i) => typeof e == "function" ? e({ close: i }) : e;
-function mr(e) {
-  return T.useSyncExternalStore(
-    (i) => {
+import { switchThumbVariants as nr, switchTrackVariants as ir } from "../../atoms/Switch/switch-variants.js";
+import { navbarVariants as or } from "./navbar-variants.js";
+import { Menu as lr, MenuButton as cr, MenuItems as dr, MenuItem as A } from "../../../node_modules/@headlessui/react/dist/components/menu/menu.js";
+import { Popover as mr, PopoverButton as _, PopoverPanel as hr } from "../../../node_modules/@headlessui/react/dist/components/popover/popover.js";
+import { Transition as T } from "../../../node_modules/@headlessui/react/dist/components/transition/transition.js";
+function X({ on: e, size: n }) {
+  return /* @__PURE__ */ r(
+    "span",
+    {
+      "aria-hidden": "true",
+      "data-testid": "navbar-theme-track",
+      "data-checked": e ? "" : void 0,
+      className: a(ir({ size: n, variant: "neutral" }), "rst:pointer-events-none"),
+      children: /* @__PURE__ */ r("span", { className: a(nr({ size: n })) })
+    }
+  );
+}
+const gr = (e) => {
+  e?.setAttribute("role", "menuitemcheckbox");
+}, G = (e, n) => typeof e == "function" ? e({ close: n }) : e;
+function ur(e) {
+  return Z.useSyncExternalStore(
+    (n) => {
       if (!e || typeof document > "u") return () => {
       };
-      const l = new MutationObserver(i);
+      const l = new MutationObserver(n);
       return l.observe(document.documentElement, {
         attributes: !0,
         attributeFilter: ["class"]
@@ -29,76 +43,76 @@ function mr(e) {
     () => !1
   );
 }
-function hr({ close: e }) {
-  return P(() => {
-    const i = (l) => {
-      const u = document.querySelector("[data-roster-mobile-panel]"), v = document.querySelector("[data-roster-hamburger]"), m = l.target;
-      !u?.contains(m) && !v?.contains(m) && e();
+function pr({ close: e }) {
+  return H(() => {
+    const n = (l) => {
+      const u = document.querySelector("[data-roster-mobile-panel]"), v = document.querySelector("[data-roster-hamburger]"), h = l.target;
+      !u?.contains(h) && !v?.contains(h) && e();
     };
-    return document.addEventListener("pointerdown", i, { capture: !0 }), () => document.removeEventListener("pointerdown", i, { capture: !0 });
+    return document.addEventListener("pointerdown", n, { capture: !0 }), () => document.removeEventListener("pointerdown", n, { capture: !0 });
   }, [e]), null;
 }
-function gr({
+function yr({
   activePath: e,
-  close: i
+  close: n
 }) {
   const l = rr(e);
-  return P(() => {
-    l.current !== e && (l.current = e, i());
-  }, [e, i]), null;
+  return H(() => {
+    l.current !== e && (l.current = e, n());
+  }, [e, n]), null;
 }
-const Br = ({
+const Ir = ({
   logoSrc: e,
-  logoSize: i = "2rem",
+  logoSize: n = "2rem",
   logoClassName: l,
   brandName: u,
   items: v,
-  activePath: m,
-  routerElement: f,
-  user: o,
+  activePath: h,
+  routerElement: y,
+  user: i,
   onLogin: b,
   onLogout: k,
   onInboxClick: N,
-  onThemeToggle: y,
-  actions: Q,
+  onThemeToggle: f,
+  actions: J,
   brandElement: M,
-  navActions: U,
+  navActions: P,
   userMenuItems: w = [],
-  className: V,
-  variant: d = "default",
-  position: W = "sticky",
+  className: Q,
+  variant: m = "default",
+  position: U = "sticky",
   themeMode: B,
   notificationVariant: O = "error",
   notificationFill: L = "solid",
-  ...Y
+  ...W
 }) => {
-  const C = (o?.notificationCount || 0) > 0, E = typeof i == "number" ? `${i}px` : i, K = { width: E, height: E }, Z = mr(B === "auto"), h = (B === "auto" ? Z ? "dark" : "light" : B ?? (d === "white" || d === "default" ? "light" : "dark")) === "dark", D = d === "slate" || d === "primary" || d === "default" && h || d === "white" && h || d === "transparent" && h, j = {
-    brand: D ? "rst:text-white rst:dark:text-white rst:hover:text-gray-200 rst:dark:hover:text-gray-200" : "rst:text-gray-900 rst:dark:text-gray-900 rst:hover:text-gray-600 rst:dark:hover:text-gray-600",
-    linkBase: D ? "rst:text-gray-300 rst:dark:text-gray-300 rst:hover:text-white rst:dark:hover:text-white" : "rst:text-gray-600 rst:dark:text-gray-600 rst:hover:text-gray-900 rst:dark:hover:text-gray-900",
-    linkActive: D ? "rst:text-primary-400 rst:dark:text-primary-400 rst:font-semibold rst:hover:text-primary-300 rst:dark:hover:text-primary-300" : "rst:text-primary-600 rst:dark:text-primary-600 rst:font-semibold rst:hover:text-primary-700 rst:dark:hover:text-primary-700",
-    hamburger: D ? "rst:text-gray-300 rst:dark:text-gray-300 rst:hover:bg-white/10 rst:dark:hover:bg-white/10 rst:hover:text-white rst:dark:hover:text-white" : "rst:text-gray-500 rst:dark:text-gray-500 rst:hover:bg-gray-100 rst:dark:hover:bg-gray-100 rst:hover:text-gray-700 rst:dark:hover:text-gray-700"
+  const C = (i?.notificationCount || 0) > 0, R = typeof n == "number" ? `${n}px` : n, $ = { width: R, height: R }, Y = ur(B === "auto"), c = (B === "auto" ? Y ? "dark" : "light" : B ?? (m === "white" || m === "default" ? "light" : "dark")) === "dark", j = m === "slate" || m === "primary" || m === "default" && c || m === "white" && c || m === "transparent" && c, D = {
+    brand: j ? "rst:text-white rst:dark:text-white rst:hover:text-gray-200 rst:dark:hover:text-gray-200" : "rst:text-gray-900 rst:dark:text-gray-900 rst:hover:text-gray-600 rst:dark:hover:text-gray-600",
+    linkBase: j ? "rst:text-gray-300 rst:dark:text-gray-300 rst:hover:text-white rst:dark:hover:text-white" : "rst:text-gray-600 rst:dark:text-gray-600 rst:hover:text-gray-900 rst:dark:hover:text-gray-900",
+    linkActive: j ? "rst:text-primary-400 rst:dark:text-primary-400 rst:font-semibold rst:hover:text-primary-300 rst:dark:hover:text-primary-300" : "rst:text-primary-600 rst:dark:text-primary-600 rst:font-semibold rst:hover:text-primary-700 rst:dark:hover:text-primary-700",
+    hamburger: j ? "rst:text-gray-300 rst:dark:text-gray-300 rst:hover:bg-white/10 rst:dark:hover:bg-white/10 rst:hover:text-white rst:dark:hover:text-white" : "rst:text-gray-500 rst:dark:text-gray-500 rst:hover:bg-gray-100 rst:dark:hover:bg-gray-100 rst:hover:text-gray-700 rst:dark:hover:text-gray-700"
   };
   return /* @__PURE__ */ r(
-    cr,
+    mr,
     {
       as: "nav",
-      className: a("rst:z-50", nr({ variant: d, position: W }), V),
-      ...Y,
-      children: ({ open: z, close: c }) => {
-        const S = J(Q, c), F = J(U, c);
+      className: a("rst:z-50", or({ variant: m, position: U }), Q),
+      ...W,
+      children: ({ open: F, close: d }) => {
+        const S = G(J, d), z = G(P, d);
         return /* @__PURE__ */ s(I, { children: [
           /* @__PURE__ */ s("div", { className: "rst:container rst:mx-auto rst:flex rst:items-center rst:justify-between rst:px-4 rst:h-16", children: [
             /* @__PURE__ */ s(
               x,
               {
-                as: f,
+                as: y,
                 href: "/",
                 to: "/",
                 variant: "neutral",
                 underline: "none",
                 className: a(
                   "rst:flex rst:items-center rst:gap-3 rst:transition-opacity",
-                  j.brand
+                  D.brand
                 ),
                 children: [
                   /* @__PURE__ */ r(
@@ -106,7 +120,7 @@ const Br = ({
                     {
                       src: e,
                       alt: `${u} Logo`,
-                      style: K,
+                      style: $,
                       className: a("rst:shrink-0", l ?? "rst:rounded-md")
                     }
                   ),
@@ -116,18 +130,18 @@ const Br = ({
             ),
             /* @__PURE__ */ s("div", { className: "rst:hidden rst:md:flex rst:items-center rst:gap-8", children: [
               /* @__PURE__ */ r("div", { className: "rst:flex rst:items-center rst:gap-6", children: v.map((t) => {
-                const n = m === t.path;
+                const o = h === t.path;
                 return /* @__PURE__ */ s(
                   x,
                   {
-                    as: f,
+                    as: y,
                     href: t.path,
                     to: t.path,
                     variant: "neutral",
                     underline: "none",
                     className: a(
                       "rst:inline-flex rst:items-center rst:gap-1.5 rst:text-sm rst:transition-colors rst:duration-200",
-                      n ? j.linkActive : j.linkBase
+                      o ? D.linkActive : D.linkBase
                     ),
                     children: [
                       t.label,
@@ -137,42 +151,42 @@ const Br = ({
                   t.path
                 );
               }) }),
-              F,
-              S ?? (o ? /* @__PURE__ */ s(ir, { as: "div", className: "rst:relative rst:ml-2", children: [
-                /* @__PURE__ */ s(or, { className: "rst:relative rst:flex rst:rounded-full rst:text-sm rst:focus-visible:outline-hidden rst:focus-visible:ring-2 rst:focus-visible:ring-ring rst:focus-visible:ring-offset-2 rst:ring-offset-background", children: [
+              z,
+              S ?? (i ? /* @__PURE__ */ s(lr, { as: "div", className: "rst:relative rst:ml-2", children: [
+                /* @__PURE__ */ s(cr, { className: "rst:relative rst:flex rst:rounded-full rst:text-sm rst:focus-visible:outline-hidden rst:focus-visible:ring-2 rst:focus-visible:ring-ring rst:focus-visible:ring-offset-2 rst:ring-offset-background", children: [
                   /* @__PURE__ */ r("span", { className: "rst:sr-only", children: "Open user menu" }),
                   /* @__PURE__ */ r(
                     ar,
                     {
-                      initials: o.initials,
-                      src: o.avatarSrc,
+                      initials: i.initials,
+                      src: i.avatarSrc,
                       size: "sm",
                       shape: "circle",
-                      colorScheme: o.avatarColor ?? "primary"
+                      colorScheme: i.avatarColor ?? "primary"
                     }
                   ),
                   C && /* @__PURE__ */ r("div", { className: "rst:absolute rst:-top-1 rst:-right-2", children: /* @__PURE__ */ r(
-                    _,
+                    V,
                     {
                       fill: L,
                       size: "xs",
                       statusBadge: !0,
                       variant: O,
-                      children: o.notificationCount
+                      children: i.notificationCount
                     }
                   ) })
                 ] }),
                 /* @__PURE__ */ r(
-                  H,
+                  T,
                   {
-                    as: R,
+                    as: q,
                     enter: "rst:transition rst:ease-out rst:duration-100",
                     enterFrom: "rst:transform rst:opacity-0 rst:scale-95",
                     enterTo: "rst:transform rst:opacity-100 rst:scale-100",
                     leave: "rst:transition rst:ease-in rst:duration-75",
                     leaveFrom: "rst:transform rst:opacity-100 rst:scale-100",
                     leaveTo: "rst:transform rst:opacity-0 rst:scale-95",
-                    children: /* @__PURE__ */ s(lr, { className: "rst:absolute rst:right-0 rst:z-50 rst:mt-2 rst:w-48 rst:origin-top-right rst:rounded-md rst:bg-white rst:dark:bg-gray-800 rst:py-1 rst:elevation-anchored rst:ring-1 rst:ring-black/5 rst:dark:ring-white/10 rst:focus:outline-hidden rst:divide-y rst:divide-gray-100 rst:dark:divide-gray-700", children: [
+                    children: /* @__PURE__ */ s(dr, { className: "rst:absolute rst:right-0 rst:z-50 rst:mt-2 rst:w-48 rst:origin-top-right rst:rounded-md rst:bg-white rst:dark:bg-gray-800 rst:py-1 rst:elevation-anchored rst:ring-1 rst:ring-black/5 rst:dark:ring-white/10 rst:focus:outline-hidden rst:divide-y rst:divide-gray-100 rst:dark:divide-gray-700", children: [
                       /* @__PURE__ */ s("div", { className: "rst:py-1", children: [
                         C && N && /* @__PURE__ */ r(A, { children: ({ focus: t }) => /* @__PURE__ */ s(
                           p,
@@ -194,66 +208,59 @@ const Br = ({
                             ),
                             children: [
                               "Inbox (",
-                              o.notificationCount,
+                              i.notificationCount,
                               ")"
                             ]
                           }
                         ) }),
-                        y && /* @__PURE__ */ r(A, { children: ({ focus: t }) => /* @__PURE__ */ s(
-                          "div",
-                          {
-                            onClick: (n) => {
-                              n.preventDefault(), y();
-                            },
-                            role: "button",
-                            tabIndex: 0,
-                            className: a(
-                              "rst:flex rst:w-full rst:items-center rst:justify-between rst:px-4 rst:py-2 rst:text-sm rst:text-gray-700 rst:dark:text-gray-200 rst:cursor-pointer rst:transition-colors",
-                              t && "rst:bg-gray-50 rst:dark:bg-gray-700"
-                            ),
-                            onKeyDown: (n) => {
-                              (n.key === "Enter" || n.key === " ") && (n.preventDefault(), y());
-                            },
-                            children: [
-                              /* @__PURE__ */ s("div", { className: "rst:flex rst:items-center rst:gap-2", children: [
-                                /* @__PURE__ */ r(
-                                  g,
-                                  {
-                                    icon: $,
-                                    className: a(
-                                      "rst:w-4 rst:transition-colors",
-                                      h ? "rst:text-amber-500" : "rst:text-gray-400"
-                                    )
-                                  }
-                                ),
-                                /* @__PURE__ */ r("span", { className: "rst:font-medium", children: "Dark Mode" })
-                              ] }),
-                              /* @__PURE__ */ r(
-                                X,
-                                {
-                                  checked: h,
-                                  onChange: () => {
-                                  },
-                                  size: "xs",
-                                  variant: "neutral",
-                                  className: "rst:pointer-events-none rst:m-0"
-                                }
-                              )
-                            ]
-                          }
+                        f && /* @__PURE__ */ r(A, { children: ({ focus: t }) => (
+                          /* The row is the control. Headless UI keeps
+                             focus on the menu and clicks the active item
+                             on Enter or Space, so the row needs no key
+                             handler of its own. */
+                          /* @__PURE__ */ s(
+                            "div",
+                            {
+                              ref: gr,
+                              "aria-checked": c,
+                              onClick: (o) => {
+                                o.preventDefault(), f();
+                              },
+                              className: a(
+                                "rst:flex rst:w-full rst:items-center rst:justify-between rst:px-4 rst:py-2 rst:text-sm rst:text-gray-700 rst:dark:text-gray-200 rst:cursor-pointer rst:transition-colors",
+                                t && "rst:bg-gray-50 rst:dark:bg-gray-700"
+                              ),
+                              children: [
+                                /* @__PURE__ */ s("div", { className: "rst:flex rst:items-center rst:gap-2", children: [
+                                  /* @__PURE__ */ r(
+                                    g,
+                                    {
+                                      icon: E,
+                                      className: a(
+                                        "rst:w-4 rst:transition-colors",
+                                        c ? "rst:text-amber-500" : "rst:text-gray-400"
+                                      )
+                                    }
+                                  ),
+                                  /* @__PURE__ */ r("span", { className: "rst:font-medium", children: "Dark Mode" })
+                                ] }),
+                                /* @__PURE__ */ r(X, { on: c, size: "xs" })
+                              ]
+                            }
+                          )
                         ) })
                       ] }),
-                      w.length > 0 && /* @__PURE__ */ r("div", { className: "rst:py-1", children: w.map((t) => /* @__PURE__ */ r(A, { children: ({ focus: n }) => /* @__PURE__ */ s(
+                      w.length > 0 && /* @__PURE__ */ r("div", { className: "rst:py-1", children: w.map((t) => /* @__PURE__ */ r(A, { children: ({ focus: o }) => /* @__PURE__ */ s(
                         x,
                         {
-                          as: f,
+                          as: y,
                           href: t.path,
                           to: t.path,
                           variant: "neutral",
                           underline: "none",
                           className: a(
                             "rst:flex rst:w-full rst:items-center rst:justify-between rst:gap-2 rst:px-4 rst:py-2 rst:text-sm rst:text-gray-700 rst:dark:text-gray-200 rst:transition-colors",
-                            n && "rst:bg-gray-50 rst:dark:bg-gray-700"
+                            o && "rst:bg-gray-50 rst:dark:bg-gray-700"
                           ),
                           children: [
                             t.label,
@@ -288,18 +295,18 @@ const Br = ({
               ] }) : /* @__PURE__ */ r(p, { size: "sm", variant: "solid", colorScheme: "primary", onClick: b, children: "Log In" }))
             ] }),
             /* @__PURE__ */ r("div", { "data-roster-hamburger": !0, className: "rst:flex rst:md:hidden", children: /* @__PURE__ */ s(
-              G,
+              _,
               {
                 className: a(
                   "rst:inline-flex rst:items-center rst:justify-center rst:rounded-md rst:p-2 rst:focus-visible:outline-hidden rst:focus-visible:ring-2 rst:focus-visible:ring-ring rst:focus-visible:ring-offset-2 rst:ring-offset-background",
-                  j.hamburger
+                  D.hamburger
                 ),
                 children: [
                   /* @__PURE__ */ r("span", { className: "rst:sr-only", children: "Open main menu" }),
-                  z ? /* @__PURE__ */ r(
+                  F ? /* @__PURE__ */ r(
                     g,
                     {
-                      icon: q,
+                      icon: K,
                       className: "rst:block rst:h-6 rst:w-6",
                       "aria-hidden": "true"
                     }
@@ -318,12 +325,12 @@ const Br = ({
               }
             ) })
           ] }),
-          z && /* @__PURE__ */ r(hr, { close: c }),
-          z && /* @__PURE__ */ r(gr, { activePath: m, close: c }),
+          F && /* @__PURE__ */ r(pr, { close: d }),
+          F && /* @__PURE__ */ r(yr, { activePath: h, close: d }),
           /* @__PURE__ */ r(
-            H,
+            T,
             {
-              as: R,
+              as: q,
               enter: "rst:duration-200 rst:ease-out",
               enterFrom: "rst:opacity-0 rst:scale-95",
               enterTo: "rst:opacity-100 rst:scale-100",
@@ -331,7 +338,7 @@ const Br = ({
               leaveFrom: "rst:opacity-100 rst:scale-100",
               leaveTo: "rst:opacity-0 rst:scale-95",
               children: /* @__PURE__ */ r(
-                dr,
+                hr,
                 {
                   focus: !0,
                   className: "rst:absolute rst:top-0 rst:inset-x-0 rst:z-50 rst:origin-top-right rst:transform rst:p-2 rst:transition rst:md:hidden",
@@ -344,18 +351,18 @@ const Br = ({
                             {
                               src: e,
                               alt: u,
-                              style: K,
+                              style: $,
                               className: a("rst:shrink-0", l ?? "rst:rounded-md")
                             }
                           ),
                           M ?? /* @__PURE__ */ r("span", { className: "rst:font-bold rst:text-gray-900 rst:dark:text-white", children: u })
                         ] }),
-                        /* @__PURE__ */ r("div", { className: "rst:-mr-2", children: /* @__PURE__ */ s(G, { className: "rst:inline-flex rst:items-center rst:justify-center rst:rounded-md rst:p-2 rst:text-gray-400 rst:hover:bg-gray-100 rst:dark:hover:bg-gray-700 rst:hover:text-gray-500 rst:dark:hover:text-white rst:focus:outline-hidden", children: [
+                        /* @__PURE__ */ r("div", { className: "rst:-mr-2", children: /* @__PURE__ */ s(_, { className: "rst:inline-flex rst:items-center rst:justify-center rst:rounded-md rst:p-2 rst:text-gray-400 rst:hover:bg-gray-100 rst:dark:hover:bg-gray-700 rst:hover:text-gray-500 rst:dark:hover:text-white rst:focus:outline-hidden", children: [
                           /* @__PURE__ */ r("span", { className: "rst:sr-only", children: "Close menu" }),
                           /* @__PURE__ */ r(
                             g,
                             {
-                              icon: q,
+                              icon: K,
                               className: "rst:h-6 rst:w-6",
                               "aria-hidden": "true"
                             }
@@ -363,30 +370,30 @@ const Br = ({
                         ] }) })
                       ] }),
                       /* @__PURE__ */ s("div", { className: "rst:mt-6", children: [
-                        F && /* @__PURE__ */ r("div", { className: "rst:mb-4", children: F }),
+                        z && /* @__PURE__ */ r("div", { className: "rst:mb-4", children: z }),
                         /* @__PURE__ */ s("nav", { className: "rst:grid rst:gap-y-4", children: [
                           v.map((t) => {
-                            const n = m === t.path;
+                            const o = h === t.path;
                             return /* @__PURE__ */ r(
                               x,
                               {
-                                as: f,
+                                as: y,
                                 href: t.path,
                                 to: t.path,
-                                onClick: () => c(),
+                                onClick: () => d(),
                                 variant: "neutral",
                                 underline: "none",
                                 className: a(
                                   "rst:-m-3 rst:flex rst:items-center rst:rounded-md rst:p-3 rst:transition-colors",
                                   "rst:hover:bg-gray-50 rst:dark:hover:bg-gray-700",
-                                  n ? "rst:bg-gray-50 rst:dark:bg-gray-700" : "rst:text-gray-900 rst:dark:text-gray-100"
+                                  o ? "rst:bg-gray-50 rst:dark:bg-gray-700" : "rst:text-gray-900 rst:dark:text-gray-100"
                                 ),
                                 children: /* @__PURE__ */ s(
                                   "span",
                                   {
                                     className: a(
                                       "rst:ml-3 rst:inline-flex rst:items-center rst:gap-1.5 rst:text-base rst:font-medium",
-                                      n ? "rst:text-primary-600 rst:dark:text-primary-400 rst:font-bold" : "rst:text-gray-900 rst:dark:text-gray-100"
+                                      o ? "rst:text-primary-600 rst:dark:text-primary-400 rst:font-bold" : "rst:text-gray-900 rst:dark:text-gray-100"
                                     ),
                                     children: [
                                       t.label,
@@ -398,23 +405,23 @@ const Br = ({
                               t.path
                             );
                           }),
-                          o && w.length > 0 && /* @__PURE__ */ s(I, { children: [
+                          i && w.length > 0 && /* @__PURE__ */ s(I, { children: [
                             /* @__PURE__ */ r("hr", { className: "rst:border-gray-100 rst:dark:border-gray-700" }),
                             w.map((t) => {
-                              const n = m === t.path;
+                              const o = h === t.path;
                               return /* @__PURE__ */ s(
                                 x,
                                 {
-                                  as: f,
+                                  as: y,
                                   href: t.path,
                                   to: t.path,
-                                  onClick: () => c(),
+                                  onClick: () => d(),
                                   variant: "neutral",
                                   underline: "none",
                                   className: a(
                                     "rst:-m-3 rst:flex rst:items-center rst:rounded-md rst:p-3 rst:transition-colors",
                                     "rst:hover:bg-gray-50 rst:dark:hover:bg-gray-700",
-                                    n ? "rst:bg-gray-50 rst:dark:bg-gray-700" : "rst:text-gray-900 rst:dark:text-gray-100"
+                                    o ? "rst:bg-gray-50 rst:dark:bg-gray-700" : "rst:text-gray-900 rst:dark:text-gray-100"
                                   ),
                                   children: [
                                     /* @__PURE__ */ r(
@@ -422,7 +429,7 @@ const Br = ({
                                       {
                                         className: a(
                                           "rst:ml-3 rst:text-base rst:font-medium",
-                                          n ? "rst:text-primary-600 rst:dark:text-primary-400 rst:font-bold" : "rst:text-gray-900 rst:dark:text-gray-100"
+                                          o ? "rst:text-primary-600 rst:dark:text-primary-400 rst:font-bold" : "rst:text-gray-900 rst:dark:text-gray-100"
                                         ),
                                         children: t.label
                                       }
@@ -437,14 +444,14 @@ const Br = ({
                         ] })
                       ] })
                     ] }),
-                    (o || S || b) && /* @__PURE__ */ r("div", { className: "rst:py-6 rst:px-5 rst:space-y-4", children: S || (!o && b ? /* @__PURE__ */ r(
+                    (i || S || b) && /* @__PURE__ */ r("div", { className: "rst:py-6 rst:px-5 rst:space-y-4", children: S || (!i && b ? /* @__PURE__ */ r(
                       p,
                       {
                         variant: "solid",
                         colorScheme: "primary",
                         className: "rst:w-full rst:justify-center",
                         onClick: () => {
-                          b(), c();
+                          b(), d();
                         },
                         children: "Log In"
                       }
@@ -455,32 +462,35 @@ const Br = ({
                           variant: "ghost",
                           colorScheme: "neutral",
                           onClick: () => {
-                            N?.(), c();
+                            N?.(), d();
                           },
                           className: "rst:w-full rst:justify-between rst:px-4 rst:text-base rst:font-medium rst:hover:bg-gray-50 rst:dark:hover:bg-gray-700 rst:text-gray-900 rst:dark:text-gray-100",
                           endIcon: /* @__PURE__ */ r(
-                            _,
+                            V,
                             {
                               fill: L,
                               size: "xs",
                               statusBadge: !0,
                               variant: O,
-                              children: o?.notificationCount
+                              children: i?.notificationCount
                             }
                           ),
                           children: "Pending Invitations"
                         }
                       ),
-                      y && /* @__PURE__ */ s(
+                      f && /* The row is the switch: one tab stop, its
+                      state in `aria-checked`, its name from its text. */
+                      /* @__PURE__ */ s(
                         "div",
                         {
                           onClick: (t) => {
-                            t.preventDefault(), y();
+                            t.preventDefault(), f();
                           },
-                          role: "button",
+                          role: "switch",
+                          "aria-checked": c,
                           tabIndex: 0,
                           onKeyDown: (t) => {
-                            (t.key === "Enter" || t.key === " ") && (t.preventDefault(), y());
+                            t.repeat || (t.key === "Enter" || t.key === " ") && (t.preventDefault(), f());
                           },
                           className: "rst:flex rst:w-full rst:items-center rst:justify-between rst:rounded-md rst:px-4 rst:py-2 rst:text-base rst:transition-colors rst:cursor-pointer rst:hover:bg-gray-50 rst:dark:hover:bg-gray-700 rst:text-gray-900 rst:dark:text-gray-100",
                           children: [
@@ -488,26 +498,16 @@ const Br = ({
                               /* @__PURE__ */ r(
                                 g,
                                 {
-                                  icon: $,
+                                  icon: E,
                                   className: a(
                                     "rst:w-5 rst:transition-colors",
-                                    h ? "rst:text-amber-500" : "rst:text-gray-400"
+                                    c ? "rst:text-amber-500" : "rst:text-gray-400"
                                   )
                                 }
                               ),
                               /* @__PURE__ */ r("span", { children: "Dark Mode" })
                             ] }),
-                            /* @__PURE__ */ r(
-                              X,
-                              {
-                                checked: h,
-                                onChange: () => {
-                                },
-                                size: "sm",
-                                variant: "neutral",
-                                className: "rst:pointer-events-none rst:m-0"
-                              }
-                            )
+                            /* @__PURE__ */ r(X, { on: c, size: "sm" })
                           ]
                         }
                       ),
@@ -518,7 +518,7 @@ const Br = ({
                           colorScheme: "error",
                           className: "rst:w-full rst:justify-center",
                           onClick: () => {
-                            k?.(), c();
+                            k?.(), d();
                           },
                           children: "Log Out"
                         }
@@ -535,5 +535,5 @@ const Br = ({
   );
 };
 export {
-  Br as Navbar
+  Ir as Navbar
 };

package/dist/components/organisms/Sheet/Sheet.cjs

@@ -0,0 +1 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),H=require("react"),J=require("../../../node_modules/@headlessui/react/dist/components/description/description.cjs"),y=require("../../../node_modules/@headlessui/react/dist/components/dialog/dialog.cjs"),Q=require("../../../node_modules/@headlessui/react/dist/components/transition/transition.cjs"),f=require("../../../lib/utils.cjs"),Z=require("../../../internal/popup.cjs"),W=require("../../../internal/motion.cjs"),O=require("../../../internal/page-inert.cjs"),D=require("./sheet-drag.cjs"),tt=require("./sheet-title.cjs");function et(r){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const c in r)if(c!=="default"){const l=Object.getOwnPropertyDescriptor(r,c);Object.defineProperty(i,c,l.get?l:{enumerable:!0,get:()=>r[c]})}}return i.default=r,Object.freeze(i)}const n=et(H),rt="rst:transition-transform rst:duration-(--roster-sheet-enter-duration) rst:ease-(--roster-sheet-enter-easing) rst:data-leave:duration-(--roster-sheet-leave-duration) rst:data-leave:ease-(--roster-sheet-leave-easing) rst:data-closed:translate-y-full",st="rst:transition-opacity rst:duration-(--roster-sheet-fade-duration) rst:ease-out rst:data-closed:opacity-0",nt="rst:transition-opacity rst:duration-(--roster-sheet-enter-duration) rst:ease-out rst:data-leave:duration-(--roster-sheet-leave-duration) rst:data-closed:opacity-0",ot="rst:transition-opacity rst:duration-(--roster-sheet-fade-duration) rst:ease-out rst:data-closed:opacity-0",at=["input:not([type=checkbox]):not([type=radio]):not([type=button]):not([type=submit]):not([type=reset]):not([type=range]):not([type=color]):not([type=file]):not([type=image])","textarea","select","[contenteditable]:not([contenteditable=false])"].join(",");function it(r){return r?"current"in r?r.current:r:null}function ct({target:r}){const i=n.useRef(r),c=n.useRef(!1);return n.useEffect(()=>{i.current=r}),n.useEffect(()=>(c.current=!1,()=>{c.current=!0,queueMicrotask(()=>{if(!c.current)return;const l=it(i.current);l?.isConnected&&l.focus()})}),[]),null}function ut(){return s.jsx("svg",{"aria-hidden":"true",focusable:"false",viewBox:"0 0 20 20",className:"rst:h-5 rst:w-5",fill:"none",stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",children:s.jsx("path",{d:"M5 5l10 10M15 5L5 15"})})}const lt=({isOpen:r,onClose:i,onAfterClose:c,title:l,hideTitle:T=!1,description:S,actions:N,maxWidth:b=560,initialFocus:v,returnFocus:_,busy:p=!1,dragToDismiss:j=!0,contentKey:h,className:z,children:Y})=>{const{ref:R,inDarkScope:B}=Z.useDarkScope(),C=W.useReducedMotion();n.useLayoutEffect(()=>{if(r)return O.lockPage(R.current)},[r,R]);const u=n.useRef(null),I=n.useRef(null),L=n.useRef(null),E=n.useRef(null),k=n.useRef(null),P=n.useId(),g=tt.titleSignature(l),w=n.useRef({signature:g,contentKey:h,open:r,busy:p});n.useEffect(()=>{const t=w.current;if(w.current={signature:g,contentKey:h,open:r,busy:p},!t.open||!r)return;const e=t.contentKey!==h,o=t.signature!==g&&!t.busy;!e&&!o||(L.current?.focus(),k.current&&(k.current.scrollTop=0))},[g,h,r,p]),n.useEffect(()=>{if(!r)return;const t=requestAnimationFrame(()=>{const e=u.current,o=document.activeElement;!e||o&&e.contains(o)||(v?.current??E.current)?.focus()});return()=>cancelAnimationFrame(t)},[r,v]);const[q,M]=n.useState(null);n.useEffect(()=>{if(!r)return;const t=window.visualViewport;if(!t)return;const e=()=>{const o=document.activeElement,d=!!o&&!!u.current?.contains(o)&&o.matches(at);M(d?Math.round(t.height):null)};return t.addEventListener("resize",e),document.addEventListener("focusin",e),document.addEventListener("focusout",e),()=>{t.removeEventListener("resize",e),document.removeEventListener("focusin",e),document.removeEventListener("focusout",e),M(null)}},[r]);const a=n.useRef(null),m=n.useRef(!1),A=n.useRef(r);n.useEffect(()=>{A.current=r},[r]);const x=t=>{u.current?.style.setProperty("--rst-sheet-drag",`${t}px`)},F=t=>{const e=u.current;a.current=null,e&&(delete e.dataset.dragging,t==="close"?(i(),requestAnimationFrame(()=>{A.current&&!a.current&&x(0)})):x(0))};n.useEffect(()=>{!r&&a.current&&(a.current=null,u.current&&delete u.current.dataset.dragging),r&&!a.current&&x(0)},[r]);const U=t=>{a.current||(m.current=!1,!(!j||!r)&&(t.pointerType==="mouse"&&(t.button!==0||!I.current?.contains(t.target))||(a.current={pointerId:t.pointerId,x0:t.clientX,y0:t.clientY,dy:0,phase:"pending",samples:[{t:t.timeStamp,y:t.clientY}]})))},V=t=>{const e=a.current;if(!e||t.pointerId!==e.pointerId)return;const o=t.clientX-e.x0,d=t.clientY-e.y0;if(e.phase==="pending"){if(!D.exceedsSheetTapSlop(o,d))return;if(Math.abs(o)>Math.abs(d)){e.phase="ignored";return}e.phase="dragging",m.current=!0;try{t.currentTarget.setPointerCapture(t.pointerId)}catch{}u.current&&(u.current.dataset.dragging="")}e.phase==="dragging"&&(e.dy=d,e.samples.push({t:t.timeStamp,y:t.clientY}),e.samples.length>32&&e.samples.shift(),x(Math.max(0,d)))},X=t=>{const e=a.current;if(!e||t.pointerId!==e.pointerId)return;if(e.phase!=="dragging"){a.current=null;return}e.samples.push({t:t.timeStamp,y:t.clientY});const o=t.clientY-e.y0,d=u.current?.getBoundingClientRect().height??0;F(D.sheetDragOutcome(o,d,D.sheetReleaseVelocity(e.samples)))},$=t=>{const e=a.current;!e||t.pointerId!==e.pointerId||(e.phase==="dragging"?F("stay"):a.current=null)},G=t=>{!m.current||t.detail===0||(m.current=!1,t.preventDefault(),t.stopPropagation())},K={"--rst-sheet-max-width":typeof b=="number"?`${b}px`:b,...q!==null&&{"--rst-sheet-keyboard-cap":`${q}px`}};return s.jsxs(s.Fragment,{children:[s.jsx("span",{ref:R,hidden:!0}),s.jsxs(y.Dialog,{open:r,as:"div",onClose:i,initialFocus:v??E,className:f.cn("rst:font-ui rst:relative rst:z-50 rst:focus:outline-hidden",B&&"dark"),children:[s.jsx(y.DialogBackdrop,{transition:!0,"data-testid":"sheet-backdrop",className:f.cn("rst:fixed rst:inset-0 rst:bg-(--roster-sheet-backdrop)",C?ot:nt)}),s.jsx("div",{className:"rst:fixed rst:inset-0 rst:flex rst:items-end rst:justify-center",children:s.jsx(Q.TransitionChild,{afterLeave:c,children:s.jsxs(y.DialogPanel,{ref:u,style:K,"data-testid":"sheet-panel",className:f.cn("rst:relative rst:flex rst:max-h-[min(92dvh,var(--rst-sheet-keyboard-cap,92dvh))] rst:w-full rst:flex-col","rst:md:max-w-(--rst-sheet-max-width)","rst:rounded-t-2xl rst:border rst:border-b-0 rst:elevation-overlay","rst:bg-[var(--roster-popover-bg)] rst:border-[var(--roster-popover-border)] rst:text-[var(--roster-popover-text)]","rst:[--roster-ring-offset:var(--roster-popover-bg)]","rst:pb-[env(safe-area-inset-bottom)]","rst:translate-y-[var(--rst-sheet-drag,0px)]",C?st:rt,"rst:data-dragging:transition-none",z),children:[s.jsxs("div",{"data-testid":"sheet-drag-zone",className:f.cn("rst:shrink-0",j&&"rst:touch-none"),onPointerDown:U,onPointerMove:V,onPointerUp:X,onPointerCancel:$,onClickCapture:G,children:[s.jsx("div",{ref:I,"aria-hidden":"true","data-testid":"sheet-handle",className:f.cn("rst:flex rst:h-11 rst:items-start rst:justify-center rst:pt-2",j&&"rst:cursor-grab rst:active:cursor-grabbing"),children:s.jsx("span",{className:"rst:h-1 rst:w-10 rst:rounded-full rst:bg-current rst:opacity-30"})}),s.jsxs("div",{className:"rst:-mt-3 rst:flex rst:items-start rst:gap-2 rst:px-5 rst:pb-4",children:[s.jsxs("div",{className:"rst:min-w-0 rst:flex-1 rst:pt-2",children:[s.jsx(y.DialogTitle,{as:"h2",id:P,ref:L,tabIndex:-1,className:f.cn("rst:text-lg rst:font-semibold rst:text-inherit rst:focus:outline-hidden",T&&"rst:sr-only"),children:l}),S&&s.jsx(J.Description,{as:"p",className:"rst:mt-1 rst:text-sm rst:text-inherit rst:opacity-75",children:S})]}),N&&s.jsx("div",{className:"rst:flex rst:h-11 rst:shrink-0 rst:items-center rst:gap-1",children:N}),s.jsx("button",{ref:E,type:"button",onClick:i,"aria-label":"Close",className:"rst:inline-flex rst:size-11 rst:shrink-0 rst:-mr-2 rst:cursor-pointer rst:items-center rst:justify-center rst:rounded-md rst:bg-transparent rst:text-inherit rst:opacity-60 rst:transition-opacity rst:hover:opacity-100 rst:focus:outline-hidden rst:focus-visible:opacity-100 rst:focus-visible:ring-2 rst:focus-visible:ring-ring rst:focus-visible:ring-offset-2 rst:ring-offset-background",children:s.jsx(ut,{})})]})]}),s.jsx("div",{ref:k,role:"region","aria-labelledby":P,tabIndex:0,"data-testid":"sheet-content","aria-busy":p||void 0,className:"rst:min-h-0 rst:flex-1 rst:overflow-y-auto rst:overscroll-contain rst:px-5 rst:pb-4 rst:focus:outline-hidden rst:ring-inset rst:focus-visible:ring-2 rst:focus-visible:ring-ring",children:Y}),s.jsx(ct,{target:_})]})})})]})]})};exports.Sheet=lt;