@opensite/ui 0.4.5 → 0.4.7

package/dist/navbar-education-platform.d.ts

@@ -2,7 +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 } from './types-D2b35ylu.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';
@@ -101,6 +101,10 @@ interface NavbarEducationPlatformProps {
      * Pattern overlay opacity (0-1)
      */
     patternOpacity?: number;
+    /**
+     * Layout variant for the navbar
+     */
+    layoutVariant?: NavbarLayoutVariant;
     /**
      * OptixFlow image optimization configuration
      */
@@ -115,6 +119,6 @@ interface NavbarEducationPlatformProps {
  * Mobile view uses accordion navigation with categorized sections. Ideal for e-learning platforms,
  * course management systems, and educational technology products.
  */
-declare const NavbarEducationPlatform: ({ className, containerClassName, navClassName, navigationMenuClassName, actionsClassName, logoClassName, mobileMenuClassName, logo, logoSlot, features, docs, company, authActions, authActionsSlot, background, spacing, pattern, patternOpacity, optixFlowConfig, }: NavbarEducationPlatformProps) => react_jsx_runtime.JSX.Element;
+declare const NavbarEducationPlatform: ({ className, containerClassName, navClassName, navigationMenuClassName, actionsClassName, logoClassName, mobileMenuClassName, logo, logoSlot, features, docs, company, authActions, authActionsSlot, layoutVariant, background, spacing, pattern, patternOpacity, optixFlowConfig, }: NavbarEducationPlatformProps) => react_jsx_runtime.JSX.Element;
 
 export { NavbarEducationPlatform, type NavbarEducationPlatformProps };

package/dist/navbar-education-platform.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 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
@@ -1233,6 +1234,36 @@ var imagePlaceholders = [
   "https://toastability-production.s3.amazonaws.com/e13qu3083lkhdg7th64vb628172a",
   "https://toastability-production.s3.amazonaws.com/w87w0fyjdol9yzwo7yywkgxidvzo"
 ];
+
+// 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 NavbarEducationPlatform = ({
   className,
   containerClassName,
@@ -1251,6 +1282,7 @@ var NavbarEducationPlatform = ({
   company,
   authActions,
   authActionsSlot,
+  layoutVariant = "fullScreenContainerizedLinks",
   background = "white",
   spacing = "none",
   pattern,
@@ -1300,23 +1332,29 @@ var NavbarEducationPlatform = ({
       ] }) }, index);
     });
   };
+  const {
+    sectionClasses,
+    containerWrapperClasses,
+    innerContainerClasses,
+    navWrapperClasses,
+    spacingOverride
+  } = getNavbarLayoutClasses(layoutVariant, { className, containerClassName });
   return /* @__PURE__ */ jsxs(
     Section,
     {
       background,
-      spacing,
+      spacing: spacingOverride ?? spacing,
       className: cn(
-        "border-b border-border lg:border-b",
         isOpen && "border-b-0",
-        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: innerContainerClasses, children: /* @__PURE__ */ jsxs(
           "nav",
           {
-            className: cn("flex items-center justify-between py-4", navClassName),
+            className: cn("flex items-center justify-between py-4", navWrapperClasses, navClassName),
             children: [
               /* @__PURE__ */ jsxs("div", { className: "flex flex-1 items-center gap-9", children: [
                 renderLogo(),
@@ -1507,7 +1545,7 @@ var NavbarEducationPlatform = ({
               )
             ]
           }
-        ) }),
+        ) }) }),
         isOpen && /* @__PURE__ */ jsx(
           "div",
           {

package/dist/navbar-enterprise-mega.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 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 NavbarEnterpriseMega = ({
   className,
@@ -1205,6 +1236,7 @@ var NavbarEnterpriseMega = ({
   menuLinks,
   actions,
   actionsSlot,
+  layoutVariant = "fullScreenContainerizedLinks",
   background = "white",
   spacing = "none",
   pattern,
@@ -1273,23 +1305,31 @@ var NavbarEnterpriseMega = ({
       ] }) }, index);
     });
   };
+  const {
+    sectionClasses,
+    containerWrapperClasses,
+    innerContainerClasses,
+    navWrapperClasses,
+    spacingOverride
+  } = getNavbarLayoutClasses(layoutVariant, { className, containerClassName });
   return /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       Section,
       {
         background,
-        spacing,
+        spacing: spacingOverride ?? spacing,
         className: cn(
-          "pointer-events-auto fixed top-0 z-999 flex w-full items-center justify-center border-b border-border/50 shadow-sm",
-          className
+          "pointer-events-auto fixed top-0 z-999 flex w-full items-center justify-center",
+          sectionClasses
         ),
         pattern,
         patternOpacity,
-        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
+        children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: innerContainerClasses, children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "nav",
           {
             className: cn(
               "flex h-16 items-center justify-between gap-8",
+              navWrapperClasses,
               navClassName
             ),
             children: [
@@ -1340,7 +1380,7 @@ var NavbarEnterpriseMega = ({
               ] })
             ]
           }
-        ) })
+        ) }) })
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(

package/dist/navbar-enterprise-mega.d.cts

@@ -2,7 +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, b as ILinkItem, a as IMenuLinkGroup } from './types-D2b35ylu.cjs';
+import { L as LogoConfig, b as ILinkItem, a as IMenuLinkGroup, 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';
@@ -268,6 +268,10 @@ interface NavbarEnterpriseMegaProps {
      * Pattern overlay opacity (0-1)
      */
     patternOpacity?: number;
+    /**
+     * Layout variant for the navbar
+     */
+    layoutVariant?: NavbarLayoutVariant;
     /**
      * OptixFlow image optimization configuration
      */
@@ -283,6 +287,6 @@ interface NavbarEnterpriseMegaProps {
  * cards. Each menu spans full width with rich content layouts. Mobile view uses a full-screen sheet
  * with accordion navigation. Ideal for large enterprise SaaS platforms and B2B software companies.
  */
-declare const NavbarEnterpriseMega: ({ className, containerClassName, navClassName, navigationMenuClassName, actionsClassName, logoClassName, logo, logoSlot, menuLinks, actions, actionsSlot, background, spacing, pattern, patternOpacity, optixFlowConfig, }: NavbarEnterpriseMegaProps) => react_jsx_runtime.JSX.Element;
+declare const NavbarEnterpriseMega: ({ className, containerClassName, navClassName, navigationMenuClassName, actionsClassName, logoClassName, logo, logoSlot, menuLinks, actions, actionsSlot, layoutVariant, background, spacing, pattern, patternOpacity, optixFlowConfig, }: NavbarEnterpriseMegaProps) => react_jsx_runtime.JSX.Element;
 
 export { type IFeatureCategory, type IFeatureItem, type IFeaturedHeroCard, ILinkItem, type ILocationItem, type IMenuLink, IMenuLinkGroup, type IPartnerCard, type IProductCategory, type IProductItem, type IRegionItem, type IResourceItem, type ISolutionCard, type ISubpageItem, type ITechnologyItem, type ITopicGroup, type ITopicItem, LogoConfig, type MegaMenuLayout, NavbarEnterpriseMega, type NavbarEnterpriseMegaProps };

package/dist/navbar-enterprise-mega.d.ts

@@ -2,7 +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, b as ILinkItem, a as IMenuLinkGroup } from './types-D2b35ylu.js';
+import { L as LogoConfig, b as ILinkItem, a as IMenuLinkGroup, 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';
@@ -268,6 +268,10 @@ interface NavbarEnterpriseMegaProps {
      * Pattern overlay opacity (0-1)
      */
     patternOpacity?: number;
+    /**
+     * Layout variant for the navbar
+     */
+    layoutVariant?: NavbarLayoutVariant;
     /**
      * OptixFlow image optimization configuration
      */
@@ -283,6 +287,6 @@ interface NavbarEnterpriseMegaProps {
  * cards. Each menu spans full width with rich content layouts. Mobile view uses a full-screen sheet
  * with accordion navigation. Ideal for large enterprise SaaS platforms and B2B software companies.
  */
-declare const NavbarEnterpriseMega: ({ className, containerClassName, navClassName, navigationMenuClassName, actionsClassName, logoClassName, logo, logoSlot, menuLinks, actions, actionsSlot, background, spacing, pattern, patternOpacity, optixFlowConfig, }: NavbarEnterpriseMegaProps) => react_jsx_runtime.JSX.Element;
+declare const NavbarEnterpriseMega: ({ className, containerClassName, navClassName, navigationMenuClassName, actionsClassName, logoClassName, logo, logoSlot, menuLinks, actions, actionsSlot, layoutVariant, background, spacing, pattern, patternOpacity, optixFlowConfig, }: NavbarEnterpriseMegaProps) => react_jsx_runtime.JSX.Element;
 
 export { type IFeatureCategory, type IFeatureItem, type IFeaturedHeroCard, ILinkItem, type ILocationItem, type IMenuLink, IMenuLinkGroup, type IPartnerCard, type IProductCategory, type IProductItem, type IRegionItem, type IResourceItem, type ISolutionCard, type ISubpageItem, type ITechnologyItem, type ITopicGroup, type ITopicItem, LogoConfig, type MegaMenuLayout, NavbarEnterpriseMega, type NavbarEnterpriseMegaProps };

package/dist/navbar-enterprise-mega.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 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 NavbarEnterpriseMega = ({
   className,
@@ -1181,6 +1212,7 @@ var NavbarEnterpriseMega = ({
   menuLinks,
   actions,
   actionsSlot,
+  layoutVariant = "fullScreenContainerizedLinks",
   background = "white",
   spacing = "none",
   pattern,
@@ -1249,23 +1281,31 @@ var NavbarEnterpriseMega = ({
       ] }) }, index);
     });
   };
+  const {
+    sectionClasses,
+    containerWrapperClasses,
+    innerContainerClasses,
+    navWrapperClasses,
+    spacingOverride
+  } = getNavbarLayoutClasses(layoutVariant, { className, containerClassName });
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       Section,
       {
         background,
-        spacing,
+        spacing: spacingOverride ?? spacing,
         className: cn(
-          "pointer-events-auto fixed top-0 z-999 flex w-full items-center justify-center border-b border-border/50 shadow-sm",
-          className
+          "pointer-events-auto fixed top-0 z-999 flex w-full items-center justify-center",
+          sectionClasses
         ),
         pattern,
         patternOpacity,
-        children: /* @__PURE__ */ jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxs(
-          "div",
+        children: /* @__PURE__ */ jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: innerContainerClasses, children: /* @__PURE__ */ jsxs(
+          "nav",
           {
             className: cn(
               "flex h-16 items-center justify-between gap-8",
+              navWrapperClasses,
               navClassName
             ),
             children: [
@@ -1316,7 +1356,7 @@ var NavbarEnterpriseMega = ({
               ] })
             ]
           }
-        ) })
+        ) }) })
       }
     ),
     /* @__PURE__ */ jsx(

package/dist/navbar-feature-grid.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 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
@@ -1204,6 +1205,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 NavbarFeatureGrid = ({
   className,
   containerClassName,
@@ -1219,6 +1250,7 @@ var NavbarFeatureGrid = ({
   features,
   authActions,
   authActionsSlot,
+  layoutVariant = "fullScreenContainerizedLinks",
   background = "white",
   spacing = "sm",
   pattern,
@@ -1267,15 +1299,22 @@ var NavbarFeatureGrid = ({
       ] }) }, index);
     });
   };
+  const {
+    sectionClasses,
+    containerWrapperClasses,
+    innerContainerClasses,
+    navWrapperClasses,
+    spacingOverride
+  } = getNavbarLayoutClasses(layoutVariant, { className, containerClassName });
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
       background,
-      spacing,
-      className: cn(className),
+      spacing: spacingOverride ?? spacing,
+      className: sectionClasses,
       pattern,
       patternOpacity,
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("nav", { className: cn("flex items-center justify-between", navClassName), children: [
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: innerContainerClasses, children: /* @__PURE__ */ jsxRuntime.jsxs("nav", { className: cn("flex items-center justify-between", navWrapperClasses, navClassName), children: [
         renderLogo(),
         /* @__PURE__ */ jsxRuntime.jsx(
           NavigationMenu,
@@ -1379,7 +1418,7 @@ var NavbarFeatureGrid = ({
             ] })
           ] })
         ] })
-      ] }) })
+      ] }) }) })
     }
   );
 };

package/dist/navbar-feature-grid.d.cts

@@ -2,7 +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 } from './types-D2b35ylu.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';
@@ -77,6 +77,10 @@ interface NavbarFeatureGridProps {
      * Pattern overlay opacity (0-1)
      */
     patternOpacity?: number;
+    /**
+     * Layout variant for the navbar
+     */
+    layoutVariant?: NavbarLayoutVariant;
     /**
      * OptixFlow image optimization configuration
      */
@@ -90,6 +94,6 @@ interface NavbarFeatureGridProps {
  * view uses a top-sliding sheet with accordion navigation. Ideal for SaaS applications
  * with multiple feature categories.
  */
-declare const NavbarFeatureGrid: ({ className, containerClassName, navClassName, navigationMenuClassName, actionsClassName, logoClassName, logo, logoSlot, features, authActions, authActionsSlot, background, spacing, pattern, patternOpacity, optixFlowConfig, }: NavbarFeatureGridProps) => react_jsx_runtime.JSX.Element;
+declare const NavbarFeatureGrid: ({ className, containerClassName, navClassName, navigationMenuClassName, actionsClassName, logoClassName, logo, logoSlot, features, authActions, authActionsSlot, layoutVariant, background, spacing, pattern, patternOpacity, optixFlowConfig, }: NavbarFeatureGridProps) => react_jsx_runtime.JSX.Element;
 
 export { NavbarFeatureGrid, type NavbarFeatureGridProps };

package/dist/navbar-feature-grid.d.ts

@@ -2,7 +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 } from './types-D2b35ylu.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';
@@ -77,6 +77,10 @@ interface NavbarFeatureGridProps {
      * Pattern overlay opacity (0-1)
      */
     patternOpacity?: number;
+    /**
+     * Layout variant for the navbar
+     */
+    layoutVariant?: NavbarLayoutVariant;
     /**
      * OptixFlow image optimization configuration
      */
@@ -90,6 +94,6 @@ interface NavbarFeatureGridProps {
  * view uses a top-sliding sheet with accordion navigation. Ideal for SaaS applications
  * with multiple feature categories.
  */
-declare const NavbarFeatureGrid: ({ className, containerClassName, navClassName, navigationMenuClassName, actionsClassName, logoClassName, logo, logoSlot, features, authActions, authActionsSlot, background, spacing, pattern, patternOpacity, optixFlowConfig, }: NavbarFeatureGridProps) => react_jsx_runtime.JSX.Element;
+declare const NavbarFeatureGrid: ({ className, containerClassName, navClassName, navigationMenuClassName, actionsClassName, logoClassName, logo, logoSlot, features, authActions, authActionsSlot, layoutVariant, background, spacing, pattern, patternOpacity, optixFlowConfig, }: NavbarFeatureGridProps) => react_jsx_runtime.JSX.Element;
 
 export { NavbarFeatureGrid, type NavbarFeatureGridProps };