@opensite/ui 0.4.4 → 0.4.6

package/dist/navbar-mega-menu.js

@@ -930,7 +930,7 @@ function NavigationMenuList({
     {
       "data-slot": "navigation-menu-list",
       className: cn(
-        "group flex flex-1 list-none items-center justify-center gap-6",
+        "group flex flex-1 list-none items-center justify-center gap-2 lg:gap-4 xl:gap-6",
         className
       ),
       ...props
@@ -970,8 +970,9 @@ function NavigationMenuTrigger({
         /* @__PURE__ */ jsx(
           DynamicIcon,
           {
+            size: 18,
             name: "lucide/chevron-down",
-            className: "relative top-[1px] ml-1 size-2.5 transition duration-300 group-data-[state=open]:rotate-180",
+            className: "relative top-px opacity-50 transition duration-300 group-data-[state=open]:rotate-180",
             "aria-hidden": "true"
           }
         )
@@ -1011,7 +1012,7 @@ function NavigationMenuViewport({
         {
           "data-slot": "navigation-menu-viewport",
           className: cn(
-            "origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow md:w-[var(--radix-navigation-menu-viewport-width)]",
+            "origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-(--radix-navigation-menu-viewport-height) w-full overflow-hidden rounded-md border border-border/50 shadow-sm md:w-(--radix-navigation-menu-viewport-width)",
             className
           ),
           ...props
@@ -1029,13 +1030,48 @@ function NavigationMenuLink({
     {
       "data-slot": "navigation-menu-link",
       className: cn(
-        "data-[active=true]:focus:bg-muted data-[active=true]:hover:bg-muted data-[active=true]:bg-muted/50 data-[active=true]:text-foreground hover:bg-muted hover:text-foreground focus:bg-muted focus:text-foreground focus-visible:ring-ring/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4",
+        "group inline-flex w-max items-center justify-center rounded-md text-sm disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-muted data-[state=open]:focus:bg-muted focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 group h-auto bg-transparent px-3 py-2 font-normal text-foreground/80 hover:bg-muted hover:text-foreground focus:bg-muted focus:text-foreground data-[state=open]:bg-muted/50 data-[state=open]:text-foreground",
         className
       ),
       ...props
     }
   );
 }
+
+// components/blocks/navbars/types.ts
+function getLinkUrl(item) {
+  return item.href || item.url || "#";
+}
+
+// components/blocks/navbars/layout-variant-utils.ts
+function getNavbarLayoutClasses(layoutVariant = "fullScreenContainerizedLinks", customClasses) {
+  const isFloatingBar = layoutVariant === "floatingBar";
+  const isFullWidthLinks = layoutVariant === "fullScreenFullWidthLinks";
+  return {
+    // Section wrapper classes
+    sectionClasses: cn(
+      "inset-x-0 z-20",
+      isFloatingBar ? "sticky top-4" : "top-0",
+      customClasses?.className
+    ),
+    // Outer container wrapper (only for floating bar)
+    containerWrapperClasses: cn(
+      isFloatingBar && "mx-auto w-full px-2 sm:px-4 lg:px-8 max-w-7xl relative z-10"
+    ),
+    // Inner container classes
+    innerContainerClasses: cn(
+      !isFloatingBar && !isFullWidthLinks && "container",
+      isFullWidthLinks && "mx-auto w-full px-2 sm:px-4 lg:px-8",
+      customClasses?.containerClassName
+    ),
+    // Navigation wrapper classes (for border and shadow)
+    navWrapperClasses: cn(
+      isFloatingBar ? "border border-border/50 shadow-sm rounded-full" : "border-b border-border/50 shadow-sm"
+    ),
+    // Spacing adjustment for Section component
+    spacingOverride: isFloatingBar ? "none" : void 0
+  };
+}
 var DesktopMenuItem = ({
   link,
   index,
@@ -1064,8 +1100,8 @@ var DesktopMenuItem = ({
   if (layout === "animated-image-preview" && link.links) {
     return /* @__PURE__ */ jsxs(NavigationMenuItem, { children: [
       /* @__PURE__ */ jsx(NavigationMenuTrigger, { className: "h-auto bg-transparent px-3 py-2 font-normal text-foreground/80 hover:bg-muted hover:text-foreground focus:bg-muted focus:text-foreground data-[state=open]:bg-muted/50 data-[state=open]:text-foreground", children: link.label }),
-      /* @__PURE__ */ jsx(NavigationMenuContent, { className: "!rounded-2xl !p-0", children: /* @__PURE__ */ jsxs("div", { className: "grid min-h-[18.75rem] w-[45.25rem] grid-cols-[22.5rem_1fr] gap-4 p-3", children: [
-        /* @__PURE__ */ jsx("div", { className: "relative aspect-square w-full overflow-hidden rounded-xl", children: link.links.map((item, idx) => /* @__PURE__ */ jsx(
+      /* @__PURE__ */ jsx(NavigationMenuContent, { className: "rounded-2xl! p-0!", children: /* @__PURE__ */ jsxs("div", { className: "grid min-h-75 w-181 grid-cols-[22.5rem_1fr] gap-4 p-3", children: [
+        /* @__PURE__ */ jsx("div", { className: "relative aspect-square w-full overflow-hidden rounded-xl shadow-xl", children: link.links.map((item, idx) => /* @__PURE__ */ jsx(
           Img,
           {
             ref: (el) => {
@@ -1088,14 +1124,14 @@ var DesktopMenuItem = ({
           /* @__PURE__ */ jsx("ul", { children: link.links.map((item, idx) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
             NavigationMenuLink,
             {
-              href: item.url,
+              href: getLinkUrl(item),
               className: "flex items-center gap-4 rounded-lg px-4 py-3 hover:bg-muted",
               "data-index": idx,
               onMouseEnter: handleMouseEnter,
               onMouseLeave: handleMouseLeave,
               children: /* @__PURE__ */ jsxs("div", { children: [
-                /* @__PURE__ */ jsx("h3", { className: "leading-normal font-medium", children: item.label }),
-                item.description && /* @__PURE__ */ jsx("p", { className: "leading-normal text-muted-foreground", children: item.description })
+                /* @__PURE__ */ jsx("div", { className: "text-sm font-medium", children: item.label }),
+                item.description && /* @__PURE__ */ jsx("p", { className: "text-xs leading-normal text-muted-foreground", children: item.description })
               ] })
             }
           ) }, `desktop-nav-sublink-${idx}`)) })
@@ -1106,13 +1142,13 @@ var DesktopMenuItem = ({
   if (layout === "simple-grid" && link.links) {
     return /* @__PURE__ */ jsxs(NavigationMenuItem, { children: [
       /* @__PURE__ */ jsx(NavigationMenuTrigger, { className: "h-auto bg-transparent px-3 py-2 font-normal text-foreground/80 hover:bg-muted hover:text-foreground focus:bg-muted focus:text-foreground data-[state=open]:bg-muted/50 data-[state=open]:text-foreground", children: link.label }),
-      /* @__PURE__ */ jsx(NavigationMenuContent, { className: "min-w-[520px] p-6", children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2", children: link.links.map((item, itemIndex) => /* @__PURE__ */ jsxs(
+      /* @__PURE__ */ jsx(NavigationMenuContent, { className: "min-w-[700px] p-6", children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2", children: link.links.map((item, itemIndex) => /* @__PURE__ */ jsxs(
         NavigationMenuLink,
         {
-          href: item.url,
+          href: getLinkUrl(item),
           className: "flex flex-row items-start gap-4 rounded-lg border border-input bg-background p-4 hover:bg-muted hover:text-foreground",
           children: [
-            item.image && /* @__PURE__ */ jsx("div", { className: "h-16 w-16 shrink-0 overflow-hidden rounded-md border border-border", children: /* @__PURE__ */ jsx(
+            item.image && /* @__PURE__ */ jsx("div", { className: "h-20 w-20 shrink-0 overflow-hidden rounded-md border border-border", children: /* @__PURE__ */ jsx(
               Img,
               {
                 src: item.image,
@@ -1121,7 +1157,7 @@ var DesktopMenuItem = ({
                 optixFlowConfig
               }
             ) }),
-            !item.image && (item.icon || item.iconName) && /* @__PURE__ */ jsx("div", { className: "flex h-16 w-16 shrink-0 items-center justify-center rounded-md border border-border bg-muted/40 text-muted-foreground", children: item.icon ? item.icon : item.iconName ? /* @__PURE__ */ jsx(DynamicIcon, { name: item.iconName, size: 20 }) : null }),
+            !item.image && (item.icon || item.iconName) && /* @__PURE__ */ jsx("div", { className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-md border border-border bg-muted/40 text-muted-foreground", children: item.icon ? item.icon : item.iconName ? /* @__PURE__ */ jsx(DynamicIcon, { name: item.iconName, size: 20 }) : null }),
             /* @__PURE__ */ jsxs("div", { children: [
               /* @__PURE__ */ jsx("div", { className: "text-sm font-medium", children: item.label }),
               item.description && /* @__PURE__ */ jsx("div", { className: "text-sm font-normal text-muted-foreground", children: item.description })
@@ -1138,7 +1174,7 @@ var DesktopMenuItem = ({
       /* @__PURE__ */ jsx(NavigationMenuContent, { className: "min-w-[400px] p-4", children: /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-1", children: link.links.map((item, itemIndex) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
         NavigationMenuLink,
         {
-          href: item.url,
+          href: getLinkUrl(item),
           className: "flex items-start gap-3 rounded-lg p-3 hover:bg-muted",
           children: [
             (item.icon || item.iconName) && /* @__PURE__ */ jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-md bg-muted/40 text-muted-foreground", children: item.icon ? item.icon : item.iconName ? /* @__PURE__ */ jsx(DynamicIcon, { name: item.iconName, size: 16 }) : null }),
@@ -1182,7 +1218,7 @@ var MobileSubmenu = ({
           return /* @__PURE__ */ jsxs(
             Pressable,
             {
-              href: item.url,
+              href: getLinkUrl(item),
               className: "flex items-start gap-4 border-b border-border px-8 py-5",
               children: [
                 item.image && /* @__PURE__ */ jsx("div", { className: "h-10 w-10 overflow-hidden rounded-md border border-border", children: /* @__PURE__ */ jsx(
@@ -1222,6 +1258,7 @@ var NavbarMegaMenu = ({
   logoSlot,
   menuLinks,
   actions,
+  layoutVariant = "fullScreenContainerizedLinks",
   background = "white",
   spacing = "none",
   pattern,
@@ -1281,15 +1318,27 @@ var NavbarMegaMenu = ({
       ] }) }, index);
     });
   };
+  const {
+    sectionClasses,
+    containerWrapperClasses,
+    innerContainerClasses,
+    navWrapperClasses: baseNavWrapperClasses,
+    spacingOverride
+  } = getNavbarLayoutClasses(layoutVariant, { className, containerClassName });
+  const navWrapperClasses = cn(
+    "flex w-full items-center justify-between gap-12 py-4",
+    baseNavWrapperClasses,
+    layoutVariant === "floatingBar" && "pr-4 pl-8"
+  );
   return /* @__PURE__ */ jsx(
     Section,
     {
       background,
-      spacing,
-      className: cn("inset-x-0 top-0 z-20", className),
+      spacing: spacingOverride ?? spacing,
+      className: sectionClasses,
       pattern,
       patternOpacity,
-      children: /* @__PURE__ */ jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxs(
+      children: /* @__PURE__ */ jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: innerContainerClasses, children: /* @__PURE__ */ jsxs(
         NavigationMenu,
         {
           className: cn(
@@ -1297,7 +1346,7 @@ var NavbarMegaMenu = ({
             navClassName
           ),
           children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center justify-between gap-12 py-4", children: [
+            /* @__PURE__ */ jsxs("div", { className: navWrapperClasses, children: [
               /* @__PURE__ */ jsxs("div", { children: [
                 (!open || submenuIndex === null) && renderLogo(),
                 open && submenuIndex !== null && /* @__PURE__ */ jsxs(
@@ -1442,7 +1491,7 @@ var NavbarMegaMenu = ({
             )
           ]
         }
-      ) })
+      ) }) })
     }
   );
 };

package/dist/navbar-multi-column-groups.cjs

@@ -1010,7 +1010,7 @@ function NavigationMenuList({
     {
       "data-slot": "navigation-menu-list",
       className: cn(
-        "group flex flex-1 list-none items-center justify-center gap-6",
+        "group flex flex-1 list-none items-center justify-center gap-2 lg:gap-4 xl:gap-6",
         className
       ),
       ...props
@@ -1050,8 +1050,9 @@ function NavigationMenuTrigger({
         /* @__PURE__ */ jsxRuntime.jsx(
           DynamicIcon,
           {
+            size: 18,
             name: "lucide/chevron-down",
-            className: "relative top-[1px] ml-1 size-2.5 transition duration-300 group-data-[state=open]:rotate-180",
+            className: "relative top-px opacity-50 transition duration-300 group-data-[state=open]:rotate-180",
             "aria-hidden": "true"
           }
         )
@@ -1091,7 +1092,7 @@ function NavigationMenuViewport({
         {
           "data-slot": "navigation-menu-viewport",
           className: cn(
-            "origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow md:w-[var(--radix-navigation-menu-viewport-width)]",
+            "origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-(--radix-navigation-menu-viewport-height) w-full overflow-hidden rounded-md border border-border/50 shadow-sm md:w-(--radix-navigation-menu-viewport-width)",
             className
           ),
           ...props
@@ -1109,7 +1110,7 @@ function NavigationMenuLink({
     {
       "data-slot": "navigation-menu-link",
       className: cn(
-        "data-[active=true]:focus:bg-muted data-[active=true]:hover:bg-muted data-[active=true]:bg-muted/50 data-[active=true]:text-foreground hover:bg-muted hover:text-foreground focus:bg-muted focus:text-foreground focus-visible:ring-ring/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4",
+        "group inline-flex w-max items-center justify-center rounded-md text-sm disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-muted data-[state=open]:focus:bg-muted focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 group h-auto bg-transparent px-3 py-2 font-normal text-foreground/80 hover:bg-muted hover:text-foreground focus:bg-muted focus:text-foreground data-[state=open]:bg-muted/50 data-[state=open]:text-foreground",
         className
       ),
       ...props
@@ -1189,6 +1190,36 @@ function SheetTitle({
 // lib/mediaPlaceholders.ts
 var logoPlaceholders = {
   logoMark: "https://cdn.ing/assets/i/r/285975/eud79qeya11q5w6ueyhklueardyx/monochrome-rounded-square-app-icon-circular-emblem.png"};
+
+// components/blocks/navbars/layout-variant-utils.ts
+function getNavbarLayoutClasses(layoutVariant = "fullScreenContainerizedLinks", customClasses) {
+  const isFloatingBar = layoutVariant === "floatingBar";
+  const isFullWidthLinks = layoutVariant === "fullScreenFullWidthLinks";
+  return {
+    // Section wrapper classes
+    sectionClasses: cn(
+      "inset-x-0 z-20",
+      isFloatingBar ? "sticky top-4" : "top-0",
+      customClasses?.className
+    ),
+    // Outer container wrapper (only for floating bar)
+    containerWrapperClasses: cn(
+      isFloatingBar && "mx-auto w-full px-2 sm:px-4 lg:px-8 max-w-7xl relative z-10"
+    ),
+    // Inner container classes
+    innerContainerClasses: cn(
+      !isFloatingBar && !isFullWidthLinks && "container",
+      isFullWidthLinks && "mx-auto w-full px-2 sm:px-4 lg:px-8",
+      customClasses?.containerClassName
+    ),
+    // Navigation wrapper classes (for border and shadow)
+    navWrapperClasses: cn(
+      isFloatingBar ? "border border-border/50 shadow-sm rounded-full" : "border-b border-border/50 shadow-sm"
+    ),
+    // Spacing adjustment for Section component
+    spacingOverride: isFloatingBar ? "none" : void 0
+  };
+}
 var MOBILE_BREAKPOINT = 1024;
 var NavbarMultiColumnGroups = ({
   className,
@@ -1208,6 +1239,7 @@ var NavbarMultiColumnGroups = ({
   authActionsSlot,
   mobileAuthActions,
   mobileAuthActionsSlot,
+  layoutVariant = "fullScreenContainerizedLinks",
   background = "white",
   spacing = "none",
   pattern,
@@ -1302,19 +1334,23 @@ var NavbarMultiColumnGroups = ({
       );
     });
   };
+  const {
+    sectionClasses,
+    containerWrapperClasses,
+    innerContainerClasses,
+    navWrapperClasses,
+    spacingOverride
+  } = getNavbarLayoutClasses(layoutVariant, { className, containerClassName });
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Section,
     {
       background,
-      spacing,
-      className: cn(
-        "pointer-events-auto fixed top-0 z-999 flex h-16 w-full items-center justify-center",
-        className
-      ),
+      spacing: spacingOverride ?? spacing,
+      className: sectionClasses,
       pattern,
       patternOpacity,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs(
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(innerContainerClasses, navWrapperClasses), children: /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
             className: cn(
@@ -1369,7 +1405,7 @@ var NavbarMultiColumnGroups = ({
               ) })
             ]
           }
-        ) }),
+        ) }) }),
         /* @__PURE__ */ jsxRuntime.jsx(
           MobileNavigationMenu,
           {

package/dist/navbar-multi-column-groups.d.cts

@@ -2,6 +2,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { P as PatternName } from './pattern-background-a7gKHzHy.cjs';
 import { SectionBackground, SectionSpacing } from './types.cjs';
+import { L as LogoConfig, N as NavbarLayoutVariant } from './types-COVDidbn.cjs';
 import { A as ActionConfig, O as OptixFlowConfig } from './blocks-Cohq4eio.cjs';
 import 'class-variance-authority';
 import './button-variants-lRElsmTc.cjs';
@@ -23,16 +24,6 @@ interface MenuItem {
     url?: string;
     groups?: MenuGroup[];
 }
-/**
- * Logo configuration interface
- */
-interface LogoConfig {
-    url?: string;
-    src?: string;
-    alt?: string;
-    title?: React.ReactNode;
-    className?: string;
-}
 /**
  * Props for the NavbarMultiColumnGroups component
  */
@@ -113,6 +104,10 @@ interface NavbarMultiColumnGroupsProps {
      * OptixFlow image optimization configuration
      */
     optixFlowConfig?: OptixFlowConfig;
+    /**
+     * Layout variant for the navbar
+     */
+    layoutVariant?: NavbarLayoutVariant;
 }
 /**
  * NavbarMultiColumnGroups - A navigation bar with multi-column grouped dropdown menus.
@@ -123,6 +118,6 @@ interface NavbarMultiColumnGroupsProps {
  * full-screen sheet with accordion navigation and CTA buttons at the top. Ideal for SaaS
  * platforms, enterprise software, and products with many features to showcase.
  */
-declare const NavbarMultiColumnGroups: ({ className, containerClassName, navClassName, navigationMenuClassName, actionsClassName, logo, logoSlot, logoClassName, navigation, navigationSlot, authActions, authActionsSlot, mobileAuthActions, mobileAuthActionsSlot, background, spacing, pattern, patternOpacity, optixFlowConfig, }: NavbarMultiColumnGroupsProps) => react_jsx_runtime.JSX.Element;
+declare const NavbarMultiColumnGroups: ({ className, containerClassName, navClassName, navigationMenuClassName, actionsClassName, logo, logoSlot, logoClassName, navigation, navigationSlot, authActions, authActionsSlot, mobileAuthActions, mobileAuthActionsSlot, layoutVariant, background, spacing, pattern, patternOpacity, optixFlowConfig, }: NavbarMultiColumnGroupsProps) => react_jsx_runtime.JSX.Element;
 
 export { NavbarMultiColumnGroups, type NavbarMultiColumnGroupsProps };

package/dist/navbar-multi-column-groups.d.ts

@@ -2,6 +2,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { P as PatternName } from './pattern-background-a7gKHzHy.js';
 import { SectionBackground, SectionSpacing } from './types.js';
+import { L as LogoConfig, N as NavbarLayoutVariant } from './types-COVDidbn.js';
 import { A as ActionConfig, O as OptixFlowConfig } from './blocks-k17uluAz.js';
 import 'class-variance-authority';
 import './button-variants-lRElsmTc.js';
@@ -23,16 +24,6 @@ interface MenuItem {
     url?: string;
     groups?: MenuGroup[];
 }
-/**
- * Logo configuration interface
- */
-interface LogoConfig {
-    url?: string;
-    src?: string;
-    alt?: string;
-    title?: React.ReactNode;
-    className?: string;
-}
 /**
  * Props for the NavbarMultiColumnGroups component
  */
@@ -113,6 +104,10 @@ interface NavbarMultiColumnGroupsProps {
      * OptixFlow image optimization configuration
      */
     optixFlowConfig?: OptixFlowConfig;
+    /**
+     * Layout variant for the navbar
+     */
+    layoutVariant?: NavbarLayoutVariant;
 }
 /**
  * NavbarMultiColumnGroups - A navigation bar with multi-column grouped dropdown menus.
@@ -123,6 +118,6 @@ interface NavbarMultiColumnGroupsProps {
  * full-screen sheet with accordion navigation and CTA buttons at the top. Ideal for SaaS
  * platforms, enterprise software, and products with many features to showcase.
  */
-declare const NavbarMultiColumnGroups: ({ className, containerClassName, navClassName, navigationMenuClassName, actionsClassName, logo, logoSlot, logoClassName, navigation, navigationSlot, authActions, authActionsSlot, mobileAuthActions, mobileAuthActionsSlot, background, spacing, pattern, patternOpacity, optixFlowConfig, }: NavbarMultiColumnGroupsProps) => react_jsx_runtime.JSX.Element;
+declare const NavbarMultiColumnGroups: ({ className, containerClassName, navClassName, navigationMenuClassName, actionsClassName, logo, logoSlot, logoClassName, navigation, navigationSlot, authActions, authActionsSlot, mobileAuthActions, mobileAuthActionsSlot, layoutVariant, background, spacing, pattern, patternOpacity, optixFlowConfig, }: NavbarMultiColumnGroupsProps) => react_jsx_runtime.JSX.Element;
 
 export { NavbarMultiColumnGroups, type NavbarMultiColumnGroupsProps };

package/dist/navbar-multi-column-groups.js

@@ -986,7 +986,7 @@ function NavigationMenuList({
     {
       "data-slot": "navigation-menu-list",
       className: cn(
-        "group flex flex-1 list-none items-center justify-center gap-6",
+        "group flex flex-1 list-none items-center justify-center gap-2 lg:gap-4 xl:gap-6",
         className
       ),
       ...props
@@ -1026,8 +1026,9 @@ function NavigationMenuTrigger({
         /* @__PURE__ */ jsx(
           DynamicIcon,
           {
+            size: 18,
             name: "lucide/chevron-down",
-            className: "relative top-[1px] ml-1 size-2.5 transition duration-300 group-data-[state=open]:rotate-180",
+            className: "relative top-px opacity-50 transition duration-300 group-data-[state=open]:rotate-180",
             "aria-hidden": "true"
           }
         )
@@ -1067,7 +1068,7 @@ function NavigationMenuViewport({
         {
           "data-slot": "navigation-menu-viewport",
           className: cn(
-            "origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow md:w-[var(--radix-navigation-menu-viewport-width)]",
+            "origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-(--radix-navigation-menu-viewport-height) w-full overflow-hidden rounded-md border border-border/50 shadow-sm md:w-(--radix-navigation-menu-viewport-width)",
             className
           ),
           ...props
@@ -1085,7 +1086,7 @@ function NavigationMenuLink({
     {
       "data-slot": "navigation-menu-link",
       className: cn(
-        "data-[active=true]:focus:bg-muted data-[active=true]:hover:bg-muted data-[active=true]:bg-muted/50 data-[active=true]:text-foreground hover:bg-muted hover:text-foreground focus:bg-muted focus:text-foreground focus-visible:ring-ring/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4",
+        "group inline-flex w-max items-center justify-center rounded-md text-sm disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-muted data-[state=open]:focus:bg-muted focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 group h-auto bg-transparent px-3 py-2 font-normal text-foreground/80 hover:bg-muted hover:text-foreground focus:bg-muted focus:text-foreground data-[state=open]:bg-muted/50 data-[state=open]:text-foreground",
         className
       ),
       ...props
@@ -1165,6 +1166,36 @@ function SheetTitle({
 // lib/mediaPlaceholders.ts
 var logoPlaceholders = {
   logoMark: "https://cdn.ing/assets/i/r/285975/eud79qeya11q5w6ueyhklueardyx/monochrome-rounded-square-app-icon-circular-emblem.png"};
+
+// components/blocks/navbars/layout-variant-utils.ts
+function getNavbarLayoutClasses(layoutVariant = "fullScreenContainerizedLinks", customClasses) {
+  const isFloatingBar = layoutVariant === "floatingBar";
+  const isFullWidthLinks = layoutVariant === "fullScreenFullWidthLinks";
+  return {
+    // Section wrapper classes
+    sectionClasses: cn(
+      "inset-x-0 z-20",
+      isFloatingBar ? "sticky top-4" : "top-0",
+      customClasses?.className
+    ),
+    // Outer container wrapper (only for floating bar)
+    containerWrapperClasses: cn(
+      isFloatingBar && "mx-auto w-full px-2 sm:px-4 lg:px-8 max-w-7xl relative z-10"
+    ),
+    // Inner container classes
+    innerContainerClasses: cn(
+      !isFloatingBar && !isFullWidthLinks && "container",
+      isFullWidthLinks && "mx-auto w-full px-2 sm:px-4 lg:px-8",
+      customClasses?.containerClassName
+    ),
+    // Navigation wrapper classes (for border and shadow)
+    navWrapperClasses: cn(
+      isFloatingBar ? "border border-border/50 shadow-sm rounded-full" : "border-b border-border/50 shadow-sm"
+    ),
+    // Spacing adjustment for Section component
+    spacingOverride: isFloatingBar ? "none" : void 0
+  };
+}
 var MOBILE_BREAKPOINT = 1024;
 var NavbarMultiColumnGroups = ({
   className,
@@ -1184,6 +1215,7 @@ var NavbarMultiColumnGroups = ({
   authActionsSlot,
   mobileAuthActions,
   mobileAuthActionsSlot,
+  layoutVariant = "fullScreenContainerizedLinks",
   background = "white",
   spacing = "none",
   pattern,
@@ -1278,19 +1310,23 @@ var NavbarMultiColumnGroups = ({
       );
     });
   };
+  const {
+    sectionClasses,
+    containerWrapperClasses,
+    innerContainerClasses,
+    navWrapperClasses,
+    spacingOverride
+  } = getNavbarLayoutClasses(layoutVariant, { className, containerClassName });
   return /* @__PURE__ */ jsxs(
     Section,
     {
       background,
-      spacing,
-      className: cn(
-        "pointer-events-auto fixed top-0 z-999 flex h-16 w-full items-center justify-center",
-        className
-      ),
+      spacing: spacingOverride ?? spacing,
+      className: sectionClasses,
       pattern,
       patternOpacity,
       children: [
-        /* @__PURE__ */ jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: cn(innerContainerClasses, navWrapperClasses), children: /* @__PURE__ */ jsxs(
           "div",
           {
             className: cn(
@@ -1345,7 +1381,7 @@ var NavbarMultiColumnGroups = ({
               ) })
             ]
           }
-        ) }),
+        ) }) }),
         /* @__PURE__ */ jsx(
           MobileNavigationMenu,
           {