@raxrai/stylelab-ui 0.4.0 → 0.4.1

package/dist/index.d.mts

@@ -336,6 +336,8 @@ type NavbarProps = {
     items?: NavbarItem[];
     /** Optional slot for right side (e.g. theme switcher, user menu). Shown after nav items on desktop, in header row on mobile. */
     right?: ReactNode;
+    /** Optional content shown only in the mobile hamburger menu (e.g. Log out button). Rendered at the bottom of the overlay; clicking it closes the menu. */
+    mobileMenuExtra?: ReactNode;
     className?: string;
     style?: React.CSSProperties;
 };

package/dist/index.d.ts

@@ -336,6 +336,8 @@ type NavbarProps = {
     items?: NavbarItem[];
     /** Optional slot for right side (e.g. theme switcher, user menu). Shown after nav items on desktop, in header row on mobile. */
     right?: ReactNode;
+    /** Optional content shown only in the mobile hamburger menu (e.g. Log out button). Rendered at the bottom of the overlay; clicking it closes the menu. */
+    mobileMenuExtra?: ReactNode;
     className?: string;
     style?: React.CSSProperties;
 };

package/dist/index.mjs

@@ -13238,21 +13238,28 @@ var Modal = forwardRef20(function Modal2({
 // components/Navbar.tsx
 import { forwardRef as forwardRef21, useCallback as useCallback11, useRef as useRef7, useState as useState8 } from "react";
 import { jsx as jsx22, jsxs as jsxs19 } from "react/jsx-runtime";
-var Navbar = forwardRef21(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 = forwardRef21(function Navbar2({ children, logo, items, right, mobileMenuExtra, className, style }, ref) {
   const [mobileOpen, setMobileOpen] = useState8(false);
   const navRef = useRef7(null);
+  const wrapperRef = useRef7(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,
     useCallback11(() => setMobileOpen(false), []),
     { enabled: mobileOpen }
   );
   const hasResponsiveNav = items != null && items.length > 0;
   if (hasResponsiveNav) {
-    return /* @__PURE__ */ jsxs19(
+    return /* @__PURE__ */ jsx22(
       "nav",
       {
         ref: mergedNavRef,
@@ -13262,7 +13269,7 @@ var Navbar = forwardRef21(function Navbar2({ children, logo, items, right, class
           className
         ),
         style,
-        children: [
+        children: /* @__PURE__ */ jsxs19("div", { ref: wrapperRef, className: "flex min-h-14 w-full flex-col", children: [
           /* @__PURE__ */ jsxs19("div", { className: "flex h-14 w-full min-w-0 shrink-0 items-center justify-between gap-2", children: [
             logo != null ? /* @__PURE__ */ jsx22("div", { className: "flex min-w-0 shrink-0 items-center overflow-hidden", children: logo }) : null,
             /* @__PURE__ */ jsxs19("div", { className: "hidden flex-1 items-center justify-end gap-4 sm:flex", children: [
@@ -13292,29 +13299,39 @@ var Navbar = forwardRef21(function Navbar2({ children, logo, items, right, class
               )
             ] })
           ] }),
-          mobileOpen && /* @__PURE__ */ jsx22(
+          mobileOpen && /* @__PURE__ */ jsxs19(
             "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__ */ jsx22(
-                "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__ */ jsx22(
+                  "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__ */ jsx22(
+                  "div",
+                  {
+                    className: "mt-2 border-t border-inherit pt-3",
+                    onClick: () => setMobileOpen(false),
+                    role: "presentation",
+                    children: mobileMenuExtra
+                  }
+                ) : null
+              ]
             }
           )
-        ]
+        ] })
       }
     );
   }