@inf-monkeys-tech/monkeys-design 1.0.4 → 1.0.6

package/dist/components/layout/index.d.mts

@@ -176,12 +176,15 @@ type NavigationMode = 'headbar' | 'sidebar';
 type HeadbarLayoutMode = 'boxed' | 'full-bleed';
 type HeadbarMenuRadius = 'default' | 'full' | 'lg' | 'md' | 'none' | 'sm' | 'xl';
 type HeadbarNavPosition = 'center' | 'left' | 'right';
+type HeadbarSurface = 'card' | 'ghost' | 'glassy';
 interface LayoutNavItem {
     id: string;
     label: ReactNode;
     headbarLabel?: ReactNode;
     icon?: ReactNode;
     children?: LayoutNavItem[];
+    disabled?: boolean;
+    trailing?: ReactNode;
 }
 interface HeadbarLayout {
     brandTitle?: ReactNode;
@@ -189,6 +192,7 @@ interface HeadbarLayout {
     layoutMode?: HeadbarLayoutMode;
     menuRadius?: HeadbarMenuRadius;
     navPosition?: HeadbarNavPosition;
+    surface?: HeadbarSurface;
 }
 interface NavigationLayoutProps {
     activeItemId?: string;
@@ -221,5 +225,28 @@ interface NavigationLayoutProps {
     switchToHeadbarLabel?: string;
     switchToSidebarLabel?: string;
 }
+interface NavigationHeadbarMenuProps {
+    activeItemId?: string;
+    activeRootId?: string;
+    items: LayoutNavItem[];
+    menuRadius?: HeadbarMenuRadius;
+    onNavigate?: (itemId: string) => void;
+}
+declare function NavigationHeadbarMenu({ activeItemId, activeRootId, items, menuRadius, onNavigate, }: NavigationHeadbarMenuProps): react_jsx_runtime.JSX.Element;
+interface NavigationHeadbarProps {
+    activeItemId?: string;
+    activeRootId?: string;
+    actions?: ReactNode;
+    accountMenu?: ReactNode;
+    className?: string;
+    extra?: ReactNode;
+    layout?: HeadbarLayout;
+    brand?: ReactNode;
+    logo?: AppHeaderLogo;
+    navigation?: ReactNode;
+    navItems?: LayoutNavItem[];
+    onNavigate?: (itemId: string) => void;
+}
+declare function NavigationHeadbar({ activeItemId, activeRootId, actions, accountMenu, className, extra, layout, brand, logo, navigation, navItems, onNavigate, }: NavigationHeadbarProps): react_jsx_runtime.JSX.Element;
 declare function NavigationLayout({ activeItemId, activeRootId, allowModeSwitch, accountMenu, children, className, collapsedSidebarAccountMenu, collapsedSidebarWidth, defaultMode, defaultSidebarCollapsed, expandedSidebarWidth, expandSidebarLabel, flush, headbarActions, headbarLayout, logo, mode, navItems, onModeChange, onNavigate, onSidebarCollapsedChange, renderHeadbarExtra, collapseSidebarLabel, sidebarCollapsed: controlledSidebarCollapsed, sidebarAccountMenu, sidebarFooter, sidebarHeader, switchToHeadbarLabel, switchToSidebarLabel, }: NavigationLayoutProps): react_jsx_runtime.JSX.Element;
-export { AppHeader, type AppHeaderLogo, type AppHeaderProps, type AppHeaderUser, AppLayout, type AppLayoutProps, AppSidebar, type AppSidebarProps, type HeadbarLayout, type HeadbarLayoutMode, type HeadbarMenuRadius, type HeadbarNavPosition, type HeaderTab, type LayoutNavItem, NavButton, type NavButtonProps, NavigationLayout, type NavigationLayoutProps, type NavigationMode, type SidebarAccount, type SidebarNavItem, UserAccountMenu, type UserAccountMenuClassNames, type UserAccountMenuItem, type UserAccountMenuProps, type UserAccountMenuRadius, type UserAccountMenuSelectorConfig, type UserAccountMenuSelectorOption, type UserAccountMenuSide, type UserAccountMenuTriggerVariant, type UserAccountMenuUser, cn };
+export { AppHeader, type AppHeaderLogo, type AppHeaderProps, type AppHeaderUser, AppLayout, type AppLayoutProps, AppSidebar, type AppSidebarProps, type HeadbarLayout, type HeadbarLayoutMode, type HeadbarMenuRadius, type HeadbarNavPosition, type HeadbarSurface, type HeaderTab, type LayoutNavItem, NavButton, type NavButtonProps, NavigationHeadbar, NavigationHeadbarMenu, type NavigationHeadbarMenuProps, type NavigationHeadbarProps, NavigationLayout, type NavigationLayoutProps, type NavigationMode, type SidebarAccount, type SidebarNavItem, UserAccountMenu, type UserAccountMenuClassNames, type UserAccountMenuItem, type UserAccountMenuProps, type UserAccountMenuRadius, type UserAccountMenuSelectorConfig, type UserAccountMenuSelectorOption, type UserAccountMenuSide, type UserAccountMenuTriggerVariant, type UserAccountMenuUser, cn };

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

@@ -176,12 +176,15 @@ type NavigationMode = 'headbar' | 'sidebar';
 type HeadbarLayoutMode = 'boxed' | 'full-bleed';
 type HeadbarMenuRadius = 'default' | 'full' | 'lg' | 'md' | 'none' | 'sm' | 'xl';
 type HeadbarNavPosition = 'center' | 'left' | 'right';
+type HeadbarSurface = 'card' | 'ghost' | 'glassy';
 interface LayoutNavItem {
     id: string;
     label: ReactNode;
     headbarLabel?: ReactNode;
     icon?: ReactNode;
     children?: LayoutNavItem[];
+    disabled?: boolean;
+    trailing?: ReactNode;
 }
 interface HeadbarLayout {
     brandTitle?: ReactNode;
@@ -189,6 +192,7 @@ interface HeadbarLayout {
     layoutMode?: HeadbarLayoutMode;
     menuRadius?: HeadbarMenuRadius;
     navPosition?: HeadbarNavPosition;
+    surface?: HeadbarSurface;
 }
 interface NavigationLayoutProps {
     activeItemId?: string;
@@ -221,5 +225,28 @@ interface NavigationLayoutProps {
     switchToHeadbarLabel?: string;
     switchToSidebarLabel?: string;
 }
+interface NavigationHeadbarMenuProps {
+    activeItemId?: string;
+    activeRootId?: string;
+    items: LayoutNavItem[];
+    menuRadius?: HeadbarMenuRadius;
+    onNavigate?: (itemId: string) => void;
+}
+declare function NavigationHeadbarMenu({ activeItemId, activeRootId, items, menuRadius, onNavigate, }: NavigationHeadbarMenuProps): react_jsx_runtime.JSX.Element;
+interface NavigationHeadbarProps {
+    activeItemId?: string;
+    activeRootId?: string;
+    actions?: ReactNode;
+    accountMenu?: ReactNode;
+    className?: string;
+    extra?: ReactNode;
+    layout?: HeadbarLayout;
+    brand?: ReactNode;
+    logo?: AppHeaderLogo;
+    navigation?: ReactNode;
+    navItems?: LayoutNavItem[];
+    onNavigate?: (itemId: string) => void;
+}
+declare function NavigationHeadbar({ activeItemId, activeRootId, actions, accountMenu, className, extra, layout, brand, logo, navigation, navItems, onNavigate, }: NavigationHeadbarProps): react_jsx_runtime.JSX.Element;
 declare function NavigationLayout({ activeItemId, activeRootId, allowModeSwitch, accountMenu, children, className, collapsedSidebarAccountMenu, collapsedSidebarWidth, defaultMode, defaultSidebarCollapsed, expandedSidebarWidth, expandSidebarLabel, flush, headbarActions, headbarLayout, logo, mode, navItems, onModeChange, onNavigate, onSidebarCollapsedChange, renderHeadbarExtra, collapseSidebarLabel, sidebarCollapsed: controlledSidebarCollapsed, sidebarAccountMenu, sidebarFooter, sidebarHeader, switchToHeadbarLabel, switchToSidebarLabel, }: NavigationLayoutProps): react_jsx_runtime.JSX.Element;
-export { AppHeader, type AppHeaderLogo, type AppHeaderProps, type AppHeaderUser, AppLayout, type AppLayoutProps, AppSidebar, type AppSidebarProps, type HeadbarLayout, type HeadbarLayoutMode, type HeadbarMenuRadius, type HeadbarNavPosition, type HeaderTab, type LayoutNavItem, NavButton, type NavButtonProps, NavigationLayout, type NavigationLayoutProps, type NavigationMode, type SidebarAccount, type SidebarNavItem, UserAccountMenu, type UserAccountMenuClassNames, type UserAccountMenuItem, type UserAccountMenuProps, type UserAccountMenuRadius, type UserAccountMenuSelectorConfig, type UserAccountMenuSelectorOption, type UserAccountMenuSide, type UserAccountMenuTriggerVariant, type UserAccountMenuUser, cn };
+export { AppHeader, type AppHeaderLogo, type AppHeaderProps, type AppHeaderUser, AppLayout, type AppLayoutProps, AppSidebar, type AppSidebarProps, type HeadbarLayout, type HeadbarLayoutMode, type HeadbarMenuRadius, type HeadbarNavPosition, type HeadbarSurface, type HeaderTab, type LayoutNavItem, NavButton, type NavButtonProps, NavigationHeadbar, NavigationHeadbarMenu, type NavigationHeadbarMenuProps, type NavigationHeadbarProps, NavigationLayout, type NavigationLayoutProps, type NavigationMode, type SidebarAccount, type SidebarNavItem, UserAccountMenu, type UserAccountMenuClassNames, type UserAccountMenuItem, type UserAccountMenuProps, type UserAccountMenuRadius, type UserAccountMenuSelectorConfig, type UserAccountMenuSelectorOption, type UserAccountMenuSide, type UserAccountMenuTriggerVariant, type UserAccountMenuUser, cn };

package/dist/components/layout/index.js

@@ -2879,16 +2879,24 @@ function getHeadbarMenuRadiusClass(menuRadius = "default", part = "all") {
   }
   return NAVIGATION_LAYOUT_MENU_RADIUS_CLASS_MAP[menuRadius][part];
 }
-function getHeadbarFrameClass(layoutMode = "boxed") {
-  return layoutMode === "full-bleed" ? "relative z-40 grid w-full shrink-0 grid-cols-[minmax(max-content,1fr)_minmax(0,max-content)_minmax(max-content,1fr)] items-center gap-4 rounded-none border-b border-x-0 border-t-0 border-[hsl(var(--input))] bg-[hsl(var(--background))] p-[var(--global-spacing,0.75rem)]" : "relative z-40 grid w-full shrink-0 grid-cols-[minmax(max-content,1fr)_minmax(0,max-content)_minmax(max-content,1fr)] items-center gap-4 rounded-xl border border-[hsl(var(--input))] bg-[hsl(var(--background))] p-[var(--global-spacing,0.75rem)]";
+function getHeadbarFrameClass(layoutMode = "boxed", navPosition = "center") {
+  const columns = navPosition === "center" ? "grid-cols-[minmax(max-content,1fr)_minmax(0,max-content)_minmax(max-content,1fr)]" : "grid-cols-[max-content_minmax(0,1fr)_max-content]";
+  return layoutMode === "full-bleed" ? cn2("sticky top-0 z-40 grid w-full shrink-0 items-center gap-4 rounded-none border-b border-x-0 border-t-0 border-[hsl(var(--input))] bg-[hsl(var(--background))] p-[var(--global-spacing,0.75rem)]", columns) : cn2("sticky top-0 z-40 grid w-full shrink-0 items-center gap-4 rounded-xl border border-[hsl(var(--input))] bg-[hsl(var(--background))] p-[var(--global-spacing,0.75rem)]", columns);
 }
-function getHeadbarFrameStyle(layoutMode = "boxed", heightPx) {
+function getHeadbarFrameStyle(layoutMode = "boxed", heightPx, surface = "card") {
   const verticalPaddingPx = getHeadbarVerticalPaddingPx(heightPx);
+  const fallbackBackground = "hsl(var(--background))";
   const style = {
-    height: `${heightPx}px`,
-    minHeight: `${heightPx}px`,
+    height: `var(--monkeys-component-navigation-headbar-height, ${heightPx}px)`,
+    minHeight: `var(--monkeys-component-navigation-headbar-height, ${heightPx}px)`,
     paddingTop: `${verticalPaddingPx}px`,
-    paddingBottom: `${verticalPaddingPx}px`
+    paddingBottom: `${verticalPaddingPx}px`,
+    background: `var(--monkeys-component-navigation-headbar-frame-background, ${fallbackBackground})`,
+    color: "var(--monkeys-component-navigation-headbar-frame-foreground, hsl(var(--foreground)))",
+    borderColor: surface === "glassy" ? "var(--monkeys-component-navigation-headbar-frame-border-color, rgb(255 255 255 / 0.5))" : "var(--monkeys-component-navigation-headbar-frame-border-color, hsl(var(--input)))",
+    borderRadius: layoutMode === "full-bleed" ? "0" : "var(--monkeys-component-navigation-headbar-frame-radius, var(--radius, 0.75rem))",
+    boxShadow: surface === "glassy" ? "var(--monkeys-component-navigation-headbar-frame-shadow, inset 0 0 0 0 rgb(0 0 0 / 0.1))" : "var(--monkeys-component-navigation-headbar-frame-shadow, none)",
+    backdropFilter: `blur(var(--monkeys-component-navigation-headbar-frame-backdrop-blur, ${surface === "glassy" ? "45px" : "0px"}))`
   };
   if (layoutMode === "full-bleed") {
     style.marginLeft = "calc(var(--global-spacing,0.75rem) * -1)";
@@ -2903,6 +2911,19 @@ function getHeadbarNavClass(navPosition = "center") {
   if (navPosition === "right") return "justify-end";
   return "justify-center";
 }
+function getHeadbarItemStyle(active, useTokenRadius = true) {
+  return {
+    height: "var(--monkeys-component-navigation-headbar-item-height, 2.25rem)",
+    borderRadius: useTokenRadius ? "var(--monkeys-component-navigation-headbar-item-radius, var(--radius, 0.5rem))" : void 0,
+    paddingInline: "var(--monkeys-component-navigation-headbar-item-padding-inline, 0.75rem)",
+    columnGap: "var(--monkeys-component-navigation-headbar-item-gap, 0.375rem)",
+    color: active ? "var(--monkeys-component-navigation-headbar-item-active-foreground, hsl(var(--foreground)))" : "var(--monkeys-component-navigation-headbar-item-foreground, hsl(var(--muted-foreground)))",
+    background: active ? "var(--monkeys-component-navigation-headbar-item-active-background, hsl(var(--muted)))" : "transparent",
+    borderColor: active ? "var(--monkeys-component-navigation-headbar-item-active-border-color, transparent)" : "transparent",
+    fontSize: "var(--monkeys-component-navigation-headbar-item-font-size, 0.875rem)",
+    fontWeight: "var(--monkeys-component-navigation-headbar-item-font-weight, 500)"
+  };
+}
 function findNavigationRootId(items, activeItemId) {
   for (const item of items) {
     if (item.id === activeItemId) return item.id;
@@ -3220,7 +3241,8 @@ function HeadbarNavMenuItem({
   menuButtonRadiusClass,
   menuContentRadiusClass,
   menuItemRadiusClass,
-  onNavigate
+  onNavigate,
+  useTokenRadius
 }) {
   const [open, setOpen] = react.useState(false);
   const closeTimerRef = react.useRef(null);
@@ -3251,13 +3273,19 @@ function HeadbarNavMenuItem({
         icon: item.icon,
         endIcon: /* @__PURE__ */ jsxRuntime.jsx(HeadbarChevronIcon, { open }),
         label: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate whitespace-nowrap", children: label }),
+        disabled: item.disabled,
         onClick: () => setOpen(true),
         onMouseEnter: openMenu,
         onMouseLeave: scheduleCloseMenu,
+        style: getHeadbarItemStyle(isActive || open, useTokenRadius),
+        classNames: {
+          icon: "text-[inherit] [&_*]:!text-[inherit] [&_svg]:!stroke-current",
+          label: "text-[inherit] [&_*]:!text-[inherit]"
+        },
         className: cn2(
-          "h-9 max-w-[12rem] shrink-0 border-transparent px-3 text-sm font-medium shadow-none",
+          "max-w-[12rem] shrink-0 border shadow-none",
           menuButtonRadiusClass,
-          isActive || open ? "!bg-[hsl(var(--muted))] text-[hsl(var(--foreground))]" : "!bg-transparent text-[hsl(var(--muted-foreground))] hover:!bg-[hsl(var(--muted))]/60 hover:text-[hsl(var(--foreground))]"
+          isActive || open ? "" : "hover:!bg-[var(--monkeys-component-navigation-headbar-item-hover-background,hsl(var(--muted)))] hover:!text-[var(--monkeys-component-navigation-headbar-item-hover-foreground,hsl(var(--foreground)))]"
         )
       }
     ) }),
@@ -3270,24 +3298,34 @@ function HeadbarNavMenuItem({
         onMouseEnter: openMenu,
         onMouseLeave: scheduleCloseMenu,
         className: cn2(
-          "z-50 min-w-56 border border-[hsl(var(--border))] bg-[hsl(var(--popover))] p-1.5 text-[hsl(var(--popover-foreground))] shadow-md animate-in fade-in-0 zoom-in-95",
+          "z-50 min-w-56 border p-1.5 animate-in fade-in-0 zoom-in-95",
           menuContentRadiusClass
         ),
+        style: {
+          background: "var(--monkeys-component-navigation-headbar-menu-background, hsl(var(--popover)))",
+          borderColor: "var(--monkeys-component-navigation-headbar-menu-border-color, hsl(var(--border)))",
+          color: "var(--monkeys-component-navigation-headbar-menu-foreground, hsl(var(--popover-foreground)))",
+          boxShadow: "var(--monkeys-component-navigation-headbar-menu-shadow, 0 10px 15px -3px rgb(0 0 0 / 0.1))",
+          backdropFilter: "blur(var(--monkeys-component-navigation-headbar-menu-backdrop-blur, 0px))"
+        },
         children: item.children?.map((child) => /* @__PURE__ */ jsxRuntime.jsxs(
           DropdownMenu__namespace.Item,
           {
+            disabled: child.disabled,
             className: cn2(
-              "relative flex cursor-pointer select-none items-center gap-2.5 px-3 py-2 text-sm outline-none transition-colors hover:bg-[hsl(var(--accent))]",
-              menuItemRadiusClass,
-              child.id === activeItemId && "bg-[hsl(var(--muted))] text-[hsl(var(--foreground))]"
+              "relative flex cursor-pointer select-none items-center gap-2.5 px-3 py-2 text-sm outline-none transition-colors hover:bg-[var(--monkeys-component-navigation-headbar-item-hover-background,hsl(var(--accent)))]",
+              menuItemRadiusClass
             ),
+            style: getHeadbarItemStyle(child.id === activeItemId, useTokenRadius),
             onSelect: () => {
+              if (child.disabled) return;
               setOpen(false);
               onNavigate?.(child.id);
             },
             children: [
               child.icon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex h-4 w-4 shrink-0 items-center justify-center text-[hsl(var(--muted-foreground))]", children: child.icon }) : null,
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 truncate", children: child.headbarLabel ?? child.label })
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 truncate", children: child.headbarLabel ?? child.label }),
+              child.trailing
             ]
           },
           child.id
@@ -3296,16 +3334,17 @@ function HeadbarNavMenuItem({
     ) })
   ] });
 }
-function HeadbarNav({
+function NavigationHeadbarMenu({
   activeItemId,
   activeRootId,
   items,
-  menuRadius,
+  menuRadius = "default",
   onNavigate
 }) {
   const menuButtonRadiusClass = getHeadbarMenuRadiusClass(menuRadius);
   const menuContentRadiusClass = getHeadbarMenuRadiusClass(menuRadius);
   const menuItemRadiusClass = getHeadbarMenuRadiusClass(menuRadius);
+  const useTokenRadius = menuRadius === "default";
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex w-max min-w-0 shrink-0 items-center gap-1", children: items.map((item) => {
     const isActive = activeRootId === item.id || activeItemId === item.id;
     const label = item.headbarLabel ?? item.label;
@@ -3320,7 +3359,8 @@ function HeadbarNav({
           menuButtonRadiusClass,
           menuContentRadiusClass,
           menuItemRadiusClass,
-          onNavigate
+          onNavigate,
+          useTokenRadius
         },
         item.id
       );
@@ -3331,77 +3371,99 @@ function HeadbarNav({
         appearance: NAVIGATION_LAYOUT_DEFAULT_APPEARANCE,
         tone: "muted",
         active: isActive,
+        disabled: item.disabled,
         icon: item.icon,
-        label: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate whitespace-nowrap", children: label }),
+        label: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 items-center gap-1.5", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate whitespace-nowrap", children: label }),
+          item.trailing
+        ] }),
         onClick: () => onNavigate?.(item.id),
+        style: getHeadbarItemStyle(isActive, useTokenRadius),
+        classNames: {
+          icon: "text-[inherit] [&_*]:!text-[inherit] [&_svg]:!stroke-current",
+          label: "text-[inherit] [&_*]:!text-[inherit]"
+        },
         className: cn2(
-          "h-9 max-w-[12rem] shrink-0 border-transparent px-3 text-sm font-medium shadow-none",
+          "max-w-[12rem] shrink-0 border shadow-none",
           menuButtonRadiusClass,
-          isActive ? "!bg-[hsl(var(--muted))] text-[hsl(var(--foreground))]" : "!bg-transparent text-[hsl(var(--muted-foreground))] hover:!bg-[hsl(var(--muted))]/60 hover:text-[hsl(var(--foreground))]"
+          isActive ? "" : "hover:!bg-[var(--monkeys-component-navigation-headbar-item-hover-background,hsl(var(--muted)))] hover:!text-[var(--monkeys-component-navigation-headbar-item-hover-foreground,hsl(var(--foreground)))]"
         )
       },
       item.id
     );
   }) });
 }
-function Headbar({
+function NavigationHeadbar({
   activeItemId,
   activeRootId,
   actions,
   accountMenu,
+  className,
   extra,
   layout,
+  brand,
   logo,
-  navItems,
+  navigation,
+  navItems = [],
   onNavigate
 }) {
   const heightPx = clampHeadbarHeight(layout?.heightPx);
   const layoutMode = layout?.layoutMode ?? "boxed";
   const menuRadius = layout?.menuRadius ?? "default";
+  const surface = layout?.surface ?? "card";
   const logoHeightPx = getHeadbarLogoSizePx(heightPx);
-  const frameStyle = getHeadbarFrameStyle(layoutMode, heightPx);
+  const frameStyle = getHeadbarFrameStyle(layoutMode, heightPx, surface);
   const showBrandTitle = Boolean(layout?.brandTitle);
-  return /* @__PURE__ */ jsxRuntime.jsxs("header", { className: getHeadbarFrameClass(layoutMode), style: frameStyle, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-w-0 items-center justify-start", children: logo ? /* @__PURE__ */ jsxRuntime.jsx(
-      BaseButton,
-      {
-        appearance: NAVIGATION_LAYOUT_DEFAULT_APPEARANCE,
-        tone: "muted",
-        icon: /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "header",
+    {
+      className: cn2(getHeadbarFrameClass(layoutMode, layout?.navPosition), className),
+      "data-navigation-headbar": "",
+      "data-navigation-headbar-surface": surface,
+      style: frameStyle,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex min-w-0 items-center justify-start", children: brand ?? (logo ? /* @__PURE__ */ jsxRuntime.jsx(
+          BaseButton,
           {
-            className: cn2(
-              "flex items-center justify-center overflow-hidden rounded-lg",
-              logo.url ? "w-auto max-w-[min(22rem,30vw)] bg-transparent" : "bg-[hsl(var(--primary))] text-[hsl(var(--primary-foreground))]"
+            appearance: NAVIGATION_LAYOUT_DEFAULT_APPEARANCE,
+            tone: "muted",
+            icon: /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                className: cn2(
+                  "flex items-center justify-center overflow-hidden rounded-lg",
+                  logo.url ? "w-auto max-w-[min(22rem,30vw)] bg-transparent" : "bg-[hsl(var(--primary))] text-[hsl(var(--primary-foreground))]"
+                ),
+                style: logo.url ? { height: logoHeightPx } : { width: logoHeightPx, height: logoHeightPx },
+                children: logo.url ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: logo.url, alt: logo.title, className: "block h-full w-auto object-contain" }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base font-bold", children: logo.title.charAt(0) })
+              }
             ),
-            style: logo.url ? { height: logoHeightPx } : { width: logoHeightPx, height: logoHeightPx },
-            children: logo.url ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: logo.url, alt: logo.title, className: "block h-full w-auto object-contain" }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-base font-bold", children: logo.title.charAt(0) })
+            label: showBrandTitle ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate whitespace-nowrap text-base font-medium text-[hsl(var(--foreground))]", children: layout?.brandTitle }) : null,
+            ariaLabel: logo.title,
+            title: logo.title,
+            className: "h-auto min-w-0 justify-start border-transparent bg-transparent p-0 shadow-none hover:bg-transparent",
+            classNames: logo.url ? { icon: "!h-auto !w-auto shrink-0" } : void 0,
+            onClick: logo.onClick
           }
-        ),
-        label: showBrandTitle ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "truncate whitespace-nowrap text-base font-medium text-[hsl(var(--foreground))]", children: layout?.brandTitle }) : null,
-        ariaLabel: logo.title,
-        title: logo.title,
-        className: "h-auto min-w-0 justify-start border-transparent bg-transparent p-0 shadow-none hover:bg-transparent",
-        classNames: logo.url ? { icon: "!h-auto !w-auto shrink-0" } : void 0,
-        onClick: logo.onClick
-      }
-    ) : null }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn2("flex min-w-0 items-center", getHeadbarNavClass(layout?.navPosition)), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "no-scrollbar flex max-w-full min-w-0 items-center overflow-x-auto overscroll-x-contain", children: /* @__PURE__ */ jsxRuntime.jsx(
-      HeadbarNav,
-      {
-        activeItemId,
-        activeRootId,
-        items: navItems,
-        menuRadius,
-        onNavigate
-      }
-    ) }) }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 items-center justify-end gap-3", children: [
-      actions,
-      extra,
-      accountMenu
-    ] })
-  ] });
+        ) : null) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn2("flex min-w-0 items-center", getHeadbarNavClass(layout?.navPosition)), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "no-scrollbar flex max-w-full min-w-0 items-center overflow-x-auto overscroll-x-contain", children: navigation ?? /* @__PURE__ */ jsxRuntime.jsx(
+          NavigationHeadbarMenu,
+          {
+            activeItemId,
+            activeRootId,
+            items: navItems,
+            menuRadius,
+            onNavigate
+          }
+        ) }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 items-center justify-end gap-3", children: [
+          actions,
+          extra,
+          accountMenu
+        ] })
+      ]
+    }
+  );
 }
 function NavigationLayout({
   activeItemId,
@@ -3517,7 +3579,7 @@ function NavigationLayout({
     }
   );
   const header = isHeadbarMode ? /* @__PURE__ */ jsxRuntime.jsx(
-    Headbar,
+    NavigationHeadbar,
     {
       activeItemId,
       activeRootId: activeRootId ?? findNavigationRootId(navItems, activeItemId),
@@ -3557,6 +3619,8 @@ exports.AppHeader = AppHeader;
 exports.AppLayout = AppLayout;
 exports.AppSidebar = AppSidebar;
 exports.NavButton = NavButton;
+exports.NavigationHeadbar = NavigationHeadbar;
+exports.NavigationHeadbarMenu = NavigationHeadbarMenu;
 exports.NavigationLayout = NavigationLayout;
 exports.UserAccountMenu = UserAccountMenu;
 exports.cn = cn2;