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

package/dist/index.mjs

@@ -16016,16 +16016,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)";
@@ -16040,6 +16048,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;
@@ -16357,7 +16378,8 @@ function HeadbarNavMenuItem({
   menuButtonRadiusClass,
   menuContentRadiusClass,
   menuItemRadiusClass,
-  onNavigate
+  onNavigate,
+  useTokenRadius
 }) {
   const [open, setOpen] = useState(false);
   const closeTimerRef = useRef(null);
@@ -16388,13 +16410,19 @@ function HeadbarNavMenuItem({
         icon: item.icon,
         endIcon: /* @__PURE__ */ jsx(HeadbarChevronIcon, { open }),
         label: /* @__PURE__ */ 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)))]"
         )
       }
     ) }),
@@ -16407,24 +16435,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__ */ jsxs(
           DropdownMenu2.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__ */ 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__ */ jsx("span", { className: "min-w-0 truncate", children: child.headbarLabel ?? child.label })
+              /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: child.headbarLabel ?? child.label }),
+              child.trailing
             ]
           },
           child.id
@@ -16433,16 +16471,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__ */ 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;
@@ -16457,7 +16496,8 @@ function HeadbarNav({
           menuButtonRadiusClass,
           menuContentRadiusClass,
           menuItemRadiusClass,
-          onNavigate
+          onNavigate,
+          useTokenRadius
         },
         item.id
       );
@@ -16468,77 +16508,99 @@ function HeadbarNav({
         appearance: NAVIGATION_LAYOUT_DEFAULT_APPEARANCE,
         tone: "muted",
         active: isActive,
+        disabled: item.disabled,
         icon: item.icon,
-        label: /* @__PURE__ */ jsx("span", { className: "truncate whitespace-nowrap", children: label }),
+        label: /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 items-center gap-1.5", children: [
+          /* @__PURE__ */ 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__ */ jsxs("header", { className: getHeadbarFrameClass(layoutMode), style: frameStyle, children: [
-    /* @__PURE__ */ jsx("div", { className: "flex min-w-0 items-center justify-start", children: logo ? /* @__PURE__ */ jsx(
-      BaseButton,
-      {
-        appearance: NAVIGATION_LAYOUT_DEFAULT_APPEARANCE,
-        tone: "muted",
-        icon: /* @__PURE__ */ jsx(
-          "div",
+  return /* @__PURE__ */ jsxs(
+    "header",
+    {
+      className: cn2(getHeadbarFrameClass(layoutMode, layout?.navPosition), className),
+      "data-navigation-headbar": "",
+      "data-navigation-headbar-surface": surface,
+      style: frameStyle,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "flex min-w-0 items-center justify-start", children: brand ?? (logo ? /* @__PURE__ */ 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__ */ 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__ */ jsx("img", { src: logo.url, alt: logo.title, className: "block h-full w-auto object-contain" }) : /* @__PURE__ */ 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__ */ jsx("img", { src: logo.url, alt: logo.title, className: "block h-full w-auto object-contain" }) : /* @__PURE__ */ jsx("span", { className: "text-base font-bold", children: logo.title.charAt(0) })
+            label: showBrandTitle ? /* @__PURE__ */ 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__ */ 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__ */ jsx("div", { className: cn2("flex min-w-0 items-center", getHeadbarNavClass(layout?.navPosition)), children: /* @__PURE__ */ jsx("div", { className: "no-scrollbar flex max-w-full min-w-0 items-center overflow-x-auto overscroll-x-contain", children: /* @__PURE__ */ jsx(
-      HeadbarNav,
-      {
-        activeItemId,
-        activeRootId,
-        items: navItems,
-        menuRadius,
-        onNavigate
-      }
-    ) }) }),
-    /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center justify-end gap-3", children: [
-      actions,
-      extra,
-      accountMenu
-    ] })
-  ] });
+        ) : null) }),
+        /* @__PURE__ */ jsx("div", { className: cn2("flex min-w-0 items-center", getHeadbarNavClass(layout?.navPosition)), children: /* @__PURE__ */ jsx("div", { className: "no-scrollbar flex max-w-full min-w-0 items-center overflow-x-auto overscroll-x-contain", children: navigation ?? /* @__PURE__ */ jsx(
+          NavigationHeadbarMenu,
+          {
+            activeItemId,
+            activeRootId,
+            items: navItems,
+            menuRadius,
+            onNavigate
+          }
+        ) }) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center justify-end gap-3", children: [
+          actions,
+          extra,
+          accountMenu
+        ] })
+      ]
+    }
+  );
 }
 function NavigationLayout({
   activeItemId,
@@ -16654,7 +16716,7 @@ function NavigationLayout({
     }
   );
   const header = isHeadbarMode ? /* @__PURE__ */ jsx(
-    Headbar,
+    NavigationHeadbar,
     {
       activeItemId,
       activeRootId: activeRootId ?? findNavigationRootId(navItems, activeItemId),