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

package/dist/components/layout/index.js

@@ -3301,6 +3301,13 @@ function getHeadbarItemStyle(active, useTokenRadius = true) {
     fontWeight: "var(--monkeys-component-navigation-headbar-item-font-weight, 500)"
   };
 }
+function getHeadbarCompoundStyle(active, useTokenRadius = true) {
+  return {
+    ...getHeadbarItemStyle(active, useTokenRadius),
+    paddingInline: void 0,
+    columnGap: void 0
+  };
+}
 function findNavigationRootId(items, activeItemId) {
   for (const item of items) {
     if (item.id === activeItemId) return item.id;
@@ -3646,6 +3653,7 @@ function HeadbarChevronIcon({ open }) {
 }
 function HeadbarNavMenuItem({
   activeItemId,
+  compound,
   isActive,
   item,
   label,
@@ -3711,13 +3719,17 @@ function HeadbarNavMenuItem({
         },
         onMouseEnter: openMenu,
         onMouseLeave: scheduleCloseMenu,
-        style: getHeadbarItemStyle(isActive || open, useTokenRadius),
+        style: getHeadbarItemStyle(
+          isActive || open,
+          compound ? false : useTokenRadius
+        ),
         classNames: {
           icon: "text-[inherit] [&_*]:!text-[inherit] [&_svg]:!stroke-current",
           label: "text-[inherit] [&_*]:!text-[inherit]"
         },
         className: cn2(
           "max-w-[12rem] shrink-0 border shadow-none",
+          compound && "!rounded-none !border-0 !bg-transparent",
           menuButtonRadiusClass,
           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)))]"
         )
@@ -3784,11 +3796,13 @@ function NavigationHeadbarMenu({
   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 hasSecondaryAction = Boolean(item.headbarSecondaryAction);
     const label = item.headbarLabel ?? item.label;
     const primaryAction = item.children?.length ? /* @__PURE__ */ jsxRuntime.jsx(
       HeadbarNavMenuItem,
       {
         activeItemId,
+        compound: hasSecondaryAction,
         isActive,
         item,
         label,
@@ -3811,26 +3825,35 @@ function NavigationHeadbarMenu({
           item.trailing
         ] }),
         onClick: () => onNavigate?.(item.id),
-        style: getHeadbarItemStyle(isActive, useTokenRadius),
+        style: getHeadbarItemStyle(
+          isActive,
+          hasSecondaryAction ? false : useTokenRadius
+        ),
         classNames: {
           icon: "text-[inherit] [&_*]:!text-[inherit] [&_svg]:!stroke-current",
           label: "text-[inherit] [&_*]:!text-[inherit]"
         },
         className: cn2(
           "max-w-[12rem] shrink-0 border shadow-none",
+          hasSecondaryAction && "!rounded-none !border-0 !bg-transparent",
           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) {
+    if (!hasSecondaryAction) {
       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",
+        className: cn2(
+          "inline-flex min-w-0 shrink-0 items-center gap-0 overflow-hidden border shadow-none",
+          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)))]"
+        ),
+        style: getHeadbarCompoundStyle(isActive, useTokenRadius),
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             "span",