@raxrai/stylelab-ui 0.4.0 → 0.4.1

package/README.md

@@ -219,6 +219,10 @@ import { cn, mergeRefs, useFocusTrap, useClickOutside, useKeyboardNavigation, ge
 
 ## Changelog
 
+### [0.4.1]
+
+- **Navbar** — Mobile menu: click-outside ref now wraps both the bar and the dropdown panel so taps on nav links or buttons (e.g. Log out) run the action instead of only closing the menu. Mobile panel uses an explicit opaque theme-aware background in all themes (readable with glass/clay). Optional `mobileMenuExtra` prop renders content at the bottom of the hamburger overlay (e.g. a Log out button); clicking it closes the menu.
+
 ### [0.4.0]
 
 - **Overrides + refs** — Component roots consistently support `style`, consumer `className` overrides (consumer class last), and ref forwarding across the library.

package/dist/index.cjs

@@ -13280,21 +13280,28 @@ var Modal = (0, import_react43.forwardRef)(function Modal2({
 // components/Navbar.tsx
 var import_react44 = require("react");
 var import_jsx_runtime22 = require("react/jsx-runtime");
-var Navbar = (0, import_react44.forwardRef)(function Navbar2({ children, logo, items, right, className, style }, ref) {
+var DARK_PANEL_THEMES = ["night", "glass", "cyberpunk"];
+function mobilePanelOpaqueClasses(theme) {
+  if (DARK_PANEL_THEMES.includes(theme)) {
+    return "bg-zinc-900 text-zinc-100 border-zinc-700";
+  }
+  return "bg-white text-zinc-900 border-zinc-200";
+}
+var Navbar = (0, import_react44.forwardRef)(function Navbar2({ children, logo, items, right, mobileMenuExtra, className, style }, ref) {
   const [mobileOpen, setMobileOpen] = (0, import_react44.useState)(false);
   const navRef = (0, import_react44.useRef)(null);
+  const wrapperRef = (0, import_react44.useRef)(null);
   const mergedNavRef = mergeRefs(ref, navRef);
   const { theme } = useTheme();
   const themeClass = getThemeClass(theme, "navbar", "default");
-  const mobilePanelBgOverride = theme === "glass" ? "bg-white/95 backdrop-blur-xl" : theme === "clay" ? "bg-white/95" : null;
   useClickOutside(
-    navRef,
+    wrapperRef,
     (0, import_react44.useCallback)(() => setMobileOpen(false), []),
     { enabled: mobileOpen }
   );
   const hasResponsiveNav = items != null && items.length > 0;
   if (hasResponsiveNav) {
-    return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
       "nav",
       {
         ref: mergedNavRef,
@@ -13304,7 +13311,7 @@ var Navbar = (0, import_react44.forwardRef)(function Navbar2({ children, logo, i
           className
         ),
         style,
-        children: [
+        children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { ref: wrapperRef, className: "flex min-h-14 w-full flex-col", children: [
           /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex h-14 w-full min-w-0 shrink-0 items-center justify-between gap-2", children: [
             logo != null ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "flex min-w-0 shrink-0 items-center overflow-hidden", children: logo }) : null,
             /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "hidden flex-1 items-center justify-end gap-4 sm:flex", children: [
@@ -13334,29 +13341,39 @@ var Navbar = (0, import_react44.forwardRef)(function Navbar2({ children, logo, i
               )
             ] })
           ] }),
-          mobileOpen && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+          mobileOpen && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
             "div",
             {
               className: cn(
-                "absolute left-0 right-0 top-14 z-10 flex flex-col gap-1 border-t border-inherit px-3 py-3 shadow-lg sm:hidden",
-                themeClass,
-                mobilePanelBgOverride
+                "absolute left-0 right-0 top-14 z-10 flex flex-col gap-1 border-t px-3 py-3 shadow-lg sm:hidden",
+                mobilePanelOpaqueClasses(theme)
               ),
               role: "dialog",
               "aria-label": "Navigation menu",
-              children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-                "a",
-                {
-                  href: item.href,
-                  className: "block rounded-lg px-3 py-2.5 text-sm font-medium text-inherit opacity-90 transition-opacity hover:opacity-100",
-                  onClick: () => setMobileOpen(false),
-                  children: item.label
-                },
-                item.href
-              ))
+              children: [
+                items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                  "a",
+                  {
+                    href: item.href,
+                    className: "block rounded-lg px-3 py-2.5 text-sm font-medium text-inherit opacity-90 transition-opacity hover:opacity-100",
+                    onClick: () => setMobileOpen(false),
+                    children: item.label
+                  },
+                  item.href
+                )),
+                mobileMenuExtra != null ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                  "div",
+                  {
+                    className: "mt-2 border-t border-inherit pt-3",
+                    onClick: () => setMobileOpen(false),
+                    role: "presentation",
+                    children: mobileMenuExtra
+                  }
+                ) : null
+              ]
             }
           )
-        ]
+        ] })
       }
     );
   }