@inf-monkeys-tech/monkeys-design 1.0.21 → 1.0.23

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

@@ -214,6 +214,7 @@ interface LayoutNavItem {
     children?: LayoutNavItem[];
     disabled?: boolean;
     trailing?: ReactNode;
+    headbarSecondaryAction?: ReactNode;
 }
 interface HeadbarLayout {
     brandTitle?: ReactNode;

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

@@ -214,6 +214,7 @@ interface LayoutNavItem {
     children?: LayoutNavItem[];
     disabled?: boolean;
     trailing?: ReactNode;
+    headbarSecondaryAction?: ReactNode;
 }
 interface HeadbarLayout {
     brandTitle?: ReactNode;

package/dist/components/layout/index.js

@@ -3785,24 +3785,20 @@ function NavigationHeadbarMenu({
   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;
-    if (item.children?.length) {
-      return /* @__PURE__ */ jsxRuntime.jsx(
-        HeadbarNavMenuItem,
-        {
-          activeItemId,
-          isActive,
-          item,
-          label,
-          menuButtonRadiusClass,
-          menuContentRadiusClass,
-          menuItemRadiusClass,
-          onNavigate,
-          useTokenRadius
-        },
-        item.id
-      );
-    }
-    return /* @__PURE__ */ jsxRuntime.jsx(
+    const primaryAction = item.children?.length ? /* @__PURE__ */ jsxRuntime.jsx(
+      HeadbarNavMenuItem,
+      {
+        activeItemId,
+        isActive,
+        item,
+        label,
+        menuButtonRadiusClass,
+        menuContentRadiusClass,
+        menuItemRadiusClass,
+        onNavigate,
+        useTokenRadius
+      }
+    ) : /* @__PURE__ */ jsxRuntime.jsx(
       BaseButton,
       {
         appearance: NAVIGATION_LAYOUT_DEFAULT_APPEARANCE,
@@ -3825,6 +3821,34 @@ function NavigationHeadbarMenu({
           menuButtonRadiusClass,
           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)))]"
         )
+      }
+    );
+    if (!item.headbarSecondaryAction) {
+      return /* @__PURE__ */ jsxRuntime.jsx(react.Fragment, { children: primaryAction }, item.id);
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        "data-navigation-headbar-compound-item": item.id,
+        className: "inline-flex min-w-0 shrink-0 items-center gap-1",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              "data-navigation-headbar-primary-action": "",
+              className: "inline-flex min-w-0 shrink-0",
+              children: primaryAction
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              "data-navigation-headbar-secondary-action": item.id,
+              className: "inline-flex min-w-0 shrink-0 items-center",
+              children: item.headbarSecondaryAction
+            }
+          )
+        ]
       },
       item.id
     );