@opensite/ui 0.4.7 → 0.4.9

package/dist/navbar-centered-menu.js

@@ -856,11 +856,13 @@ var Section = React__default.forwardRef(
     children,
     className,
     style,
-    background = "white",
+    background = "transparent",
     spacing = "lg",
     pattern,
     patternOpacity,
     patternClassName,
+    containerClassName,
+    containerMaxWidth = "xl",
     ...props
   }, ref) => {
     const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
@@ -887,13 +889,20 @@ var Section = React__default.forwardRef(
               className: patternClassName
             }
           ),
-          /* @__PURE__ */ jsxs(Container, { className: "relative z-10", children: [
-            (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "mb-12 text-center md:mb-16", children: [
-              subtitle && /* @__PURE__ */ jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
-              title && /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
-            ] }),
-            children
-          ] })
+          /* @__PURE__ */ jsxs(
+            Container,
+            {
+              maxWidth: containerMaxWidth,
+              className: cn("relative z-10", containerClassName),
+              children: [
+                (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "mb-12 text-center md:mb-16", children: [
+                  subtitle && /* @__PURE__ */ jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
+                  title && /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
+                ] }),
+                children
+              ]
+            }
+          )
         ]
       }
     );
@@ -963,7 +972,7 @@ function NavigationMenuList({
     {
       "data-slot": "navigation-menu-list",
       className: cn(
-        "group flex flex-1 list-none items-center justify-center gap-2 lg:gap-4 xl:gap-6",
+        "group flex flex-1 list-none items-center justify-center gap-2 lg:gap-4",
         className
       ),
       ...props
@@ -984,7 +993,7 @@ function NavigationMenuItem({
   );
 }
 var navigationMenuTriggerStyle = cva(
-  "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium text-foreground/80 hover:bg-muted hover:text-foreground focus:bg-muted focus:text-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-muted data-[state=open]:text-foreground data-[state=open]:focus:bg-muted data-[state=open]:bg-muted/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1"
+  "group inline-flex h-9 w-max gap-1 items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium text-foreground/80 hover:bg-muted hover:text-foreground focus:bg-muted focus:text-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-muted data-[state=open]:text-foreground data-[state=open]:focus:bg-muted data-[state=open]:bg-muted/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1"
 );
 function NavigationMenuTrigger({
   className,
@@ -999,7 +1008,6 @@ function NavigationMenuTrigger({
       ...props,
       children: [
         children,
-        " ",
         /* @__PURE__ */ jsx(
           DynamicIcon,
           {
@@ -1039,7 +1047,7 @@ function NavigationMenuLink({
     {
       "data-slot": "navigation-menu-link",
       className: cn(
-        "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",
+        "group inline-flex h-auto w-max items-center justify-center rounded-md bg-transparent px-3 py-2 text-sm font-normal text-foreground/80 hover:bg-muted hover:text-foreground focus:bg-muted focus:text-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-muted data-[state=open]:text-foreground data-[state=open]:focus:bg-muted data-[state=open]:bg-muted/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1",
         className
       ),
       ...props
@@ -1139,27 +1147,33 @@ var logoPlaceholders = {
 function getNavbarLayoutClasses(layoutVariant = "fullScreenContainerizedLinks", customClasses) {
   const isFloatingBar = layoutVariant === "floatingBar";
   const isFullWidthLinks = layoutVariant === "fullScreenFullWidthLinks";
+  const isContainerizedLinks = layoutVariant === "fullScreenContainerizedLinks";
   return {
-    // Section wrapper classes
+    // Section wrapper classes - always full width for non-floating variants
     sectionClasses: cn(
       "inset-x-0 z-20",
       isFloatingBar ? "sticky top-4" : "top-0",
       customClasses?.className
     ),
-    // Outer container wrapper (only for floating bar)
+    // Outer container wrapper (only for floating bar - this containerizes the entire navbar)
     containerWrapperClasses: cn(
+      "w-full",
       isFloatingBar && "mx-auto w-full px-2 sm:px-4 lg:px-8 max-w-7xl relative z-10"
     ),
-    // Inner container classes
+    // Inner container classes (only for fullScreenContainerizedLinks - this containerizes the content inside the navbar)
     innerContainerClasses: cn(
-      !isFloatingBar && !isFullWidthLinks && "container",
+      isContainerizedLinks && "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(
+      "w-full",
       isFloatingBar ? "border border-border/50 shadow-sm rounded-full" : "border-b border-border/50 shadow-sm"
     ),
+    // Section container configuration for full-width navbars
+    sectionContainerClassName: "px-0 sm:px-0 lg:px-0",
+    sectionContainerMaxWidth: "full",
     // Spacing adjustment for Section component
     spacingOverride: isFloatingBar ? "none" : void 0
   };
@@ -1205,14 +1219,7 @@ var renderMenuItem = (item) => {
       /* @__PURE__ */ jsx(NavigationMenuContent, { className: "origin-top-center relative top-11 w-full overflow-hidden rounded-md border bg-popover shadow data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 data-[motion^=from-]:animate-in data-[motion^=from-]:fade-in data-[motion^=to-]:animate-out data-[motion^=to-]:fade-out data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:zoom-in-90 md:absolute md:left-1/2 md:w-80 md:-translate-x-1/2", children: item.items.map((subItem) => /* @__PURE__ */ jsx(NavigationMenuLink, { asChild: true, className: "w-full", children: /* @__PURE__ */ jsx(SubMenuLink, { item: subItem }) }, subItem.title)) })
     ] }, item.title);
   }
-  return /* @__PURE__ */ jsx(NavigationMenuItem, { children: /* @__PURE__ */ jsx(
-    NavigationMenuLink,
-    {
-      href: item.url,
-      className: "group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-muted hover:text-foreground",
-      children: item.title
-    }
-  ) }, item.title);
+  return /* @__PURE__ */ jsx(NavigationMenuItem, { children: /* @__PURE__ */ jsx(NavigationMenuLink, { href: item.url, children: item.title }) }, item.title);
 };
 var renderMobileMenuItem = (item) => {
   if (item.items) {
@@ -1321,6 +1328,8 @@ var NavbarCenteredMenu = ({
     containerWrapperClasses,
     innerContainerClasses,
     navWrapperClasses,
+    sectionContainerClassName,
+    sectionContainerMaxWidth,
     spacingOverride
   } = getNavbarLayoutClasses(layoutVariant, { className, containerClassName });
   return /* @__PURE__ */ jsx(
@@ -1331,7 +1340,9 @@ var NavbarCenteredMenu = ({
       className: sectionClasses,
       pattern,
       patternOpacity,
-      children: /* @__PURE__ */ jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsxs("div", { className: cn(innerContainerClasses, navWrapperClasses), children: [
+      containerClassName: sectionContainerClassName,
+      containerMaxWidth: sectionContainerMaxWidth,
+      children: /* @__PURE__ */ jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: navWrapperClasses, children: /* @__PURE__ */ jsxs("div", { className: innerContainerClasses, children: [
         /* @__PURE__ */ jsxs(
           "nav",
           {
@@ -1380,7 +1391,7 @@ var NavbarCenteredMenu = ({
             ] })
           ] })
         ] }) })
-      ] }) })
+      ] }) }) })
     }
   );
 };

package/dist/navbar-dark-icons.cjs

@@ -880,11 +880,13 @@ var Section = React__namespace.default.forwardRef(
     children,
     className,
     style,
-    background = "white",
+    background = "transparent",
     spacing = "lg",
     pattern,
     patternOpacity,
     patternClassName,
+    containerClassName,
+    containerMaxWidth = "xl",
     ...props
   }, ref) => {
     const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
@@ -911,13 +913,20 @@ var Section = React__namespace.default.forwardRef(
               className: patternClassName
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsxs(Container, { className: "relative z-10", children: [
-            (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-12 text-center md:mb-16", children: [
-              subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
-              title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
-            ] }),
-            children
-          ] })
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            Container,
+            {
+              maxWidth: containerMaxWidth,
+              className: cn("relative z-10", containerClassName),
+              children: [
+                (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-12 text-center md:mb-16", children: [
+                  subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
+                  title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
+                ] }),
+                children
+              ]
+            }
+          )
         ]
       }
     );
@@ -1010,7 +1019,7 @@ function NavigationMenuList({
     {
       "data-slot": "navigation-menu-list",
       className: cn(
-        "group flex flex-1 list-none items-center justify-center gap-2 lg:gap-4 xl:gap-6",
+        "group flex flex-1 list-none items-center justify-center gap-2 lg:gap-4",
         className
       ),
       ...props
@@ -1031,7 +1040,7 @@ function NavigationMenuItem({
   );
 }
 var navigationMenuTriggerStyle = classVarianceAuthority.cva(
-  "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium text-foreground/80 hover:bg-muted hover:text-foreground focus:bg-muted focus:text-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-muted data-[state=open]:text-foreground data-[state=open]:focus:bg-muted data-[state=open]:bg-muted/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1"
+  "group inline-flex h-9 w-max gap-1 items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium text-foreground/80 hover:bg-muted hover:text-foreground focus:bg-muted focus:text-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-muted data-[state=open]:text-foreground data-[state=open]:focus:bg-muted data-[state=open]:bg-muted/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1"
 );
 function NavigationMenuTrigger({
   className,
@@ -1046,7 +1055,6 @@ function NavigationMenuTrigger({
       ...props,
       children: [
         children,
-        " ",
         /* @__PURE__ */ jsxRuntime.jsx(
           DynamicIcon,
           {
@@ -1110,7 +1118,7 @@ function NavigationMenuLink({
     {
       "data-slot": "navigation-menu-link",
       className: cn(
-        "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",
+        "group inline-flex h-auto w-max items-center justify-center rounded-md bg-transparent px-3 py-2 text-sm font-normal text-foreground/80 hover:bg-muted hover:text-foreground focus:bg-muted focus:text-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-muted data-[state=open]:text-foreground data-[state=open]:focus:bg-muted data-[state=open]:bg-muted/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1",
         className
       ),
       ...props
@@ -1195,27 +1203,33 @@ var logoPlaceholders = {
 function getNavbarLayoutClasses(layoutVariant = "fullScreenContainerizedLinks", customClasses) {
   const isFloatingBar = layoutVariant === "floatingBar";
   const isFullWidthLinks = layoutVariant === "fullScreenFullWidthLinks";
+  const isContainerizedLinks = layoutVariant === "fullScreenContainerizedLinks";
   return {
-    // Section wrapper classes
+    // Section wrapper classes - always full width for non-floating variants
     sectionClasses: cn(
       "inset-x-0 z-20",
       isFloatingBar ? "sticky top-4" : "top-0",
       customClasses?.className
     ),
-    // Outer container wrapper (only for floating bar)
+    // Outer container wrapper (only for floating bar - this containerizes the entire navbar)
     containerWrapperClasses: cn(
+      "w-full",
       isFloatingBar && "mx-auto w-full px-2 sm:px-4 lg:px-8 max-w-7xl relative z-10"
     ),
-    // Inner container classes
+    // Inner container classes (only for fullScreenContainerizedLinks - this containerizes the content inside the navbar)
     innerContainerClasses: cn(
-      !isFloatingBar && !isFullWidthLinks && "container",
+      isContainerizedLinks && "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(
+      "w-full",
       isFloatingBar ? "border border-border/50 shadow-sm rounded-full" : "border-b border-border/50 shadow-sm"
     ),
+    // Section container configuration for full-width navbars
+    sectionContainerClassName: "px-0 sm:px-0 lg:px-0",
+    sectionContainerMaxWidth: "full",
     // Spacing adjustment for Section component
     spacingOverride: isFloatingBar ? "none" : void 0
   };
@@ -1344,6 +1358,8 @@ var NavbarDarkIcons = ({
     containerWrapperClasses,
     innerContainerClasses,
     navWrapperClasses,
+    sectionContainerClassName,
+    sectionContainerMaxWidth,
     spacingOverride
   } = getNavbarLayoutClasses(layoutVariant, { className, containerClassName });
   return /* @__PURE__ */ jsxRuntime.jsxs(
@@ -1354,13 +1370,14 @@ var NavbarDarkIcons = ({
       className: cn("dark pointer-events-auto relative z-999", sectionClasses),
       pattern,
       patternOpacity,
+      containerClassName: sectionContainerClassName,
+      containerMaxWidth: sectionContainerMaxWidth,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: innerContainerClasses, children: /* @__PURE__ */ jsxRuntime.jsxs(
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: navWrapperClasses, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: innerContainerClasses, children: /* @__PURE__ */ jsxRuntime.jsxs(
           "nav",
           {
             className: cn(
               "flex h-16 items-center justify-between",
-              navWrapperClasses,
               navClassName
             ),
             children: [
@@ -1403,7 +1420,7 @@ var NavbarDarkIcons = ({
               ] })
             ]
           }
-        ) }) }),
+        ) }) }) }),
         /* @__PURE__ */ jsxRuntime.jsx(
           MobileNavigationMenu,
           {

package/dist/navbar-dark-icons.d.cts

@@ -3,9 +3,9 @@ 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 { A as ActionConfig, O as OptixFlowConfig } from './blocks-CFlYq-V7.cjs';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.cjs';
+import './button-variants-OIpPF9yW.cjs';
 import 'class-variance-authority/types';
 
 interface MenuLink {

package/dist/navbar-dark-icons.d.ts

@@ -3,9 +3,9 @@ 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 { A as ActionConfig, O as OptixFlowConfig } from './blocks-BmrJXeAA.js';
 import 'class-variance-authority';
-import './button-variants-lRElsmTc.js';
+import './button-variants-OIpPF9yW.js';
 import 'class-variance-authority/types';
 
 interface MenuLink {

package/dist/navbar-dark-icons.js

@@ -856,11 +856,13 @@ var Section = React__default.forwardRef(
     children,
     className,
     style,
-    background = "white",
+    background = "transparent",
     spacing = "lg",
     pattern,
     patternOpacity,
     patternClassName,
+    containerClassName,
+    containerMaxWidth = "xl",
     ...props
   }, ref) => {
     const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
@@ -887,13 +889,20 @@ var Section = React__default.forwardRef(
               className: patternClassName
             }
           ),
-          /* @__PURE__ */ jsxs(Container, { className: "relative z-10", children: [
-            (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "mb-12 text-center md:mb-16", children: [
-              subtitle && /* @__PURE__ */ jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
-              title && /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
-            ] }),
-            children
-          ] })
+          /* @__PURE__ */ jsxs(
+            Container,
+            {
+              maxWidth: containerMaxWidth,
+              className: cn("relative z-10", containerClassName),
+              children: [
+                (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "mb-12 text-center md:mb-16", children: [
+                  subtitle && /* @__PURE__ */ jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
+                  title && /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
+                ] }),
+                children
+              ]
+            }
+          )
         ]
       }
     );
@@ -986,7 +995,7 @@ function NavigationMenuList({
     {
       "data-slot": "navigation-menu-list",
       className: cn(
-        "group flex flex-1 list-none items-center justify-center gap-2 lg:gap-4 xl:gap-6",
+        "group flex flex-1 list-none items-center justify-center gap-2 lg:gap-4",
         className
       ),
       ...props
@@ -1007,7 +1016,7 @@ function NavigationMenuItem({
   );
 }
 var navigationMenuTriggerStyle = cva(
-  "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium text-foreground/80 hover:bg-muted hover:text-foreground focus:bg-muted focus:text-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-muted data-[state=open]:text-foreground data-[state=open]:focus:bg-muted data-[state=open]:bg-muted/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1"
+  "group inline-flex h-9 w-max gap-1 items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium text-foreground/80 hover:bg-muted hover:text-foreground focus:bg-muted focus:text-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-muted data-[state=open]:text-foreground data-[state=open]:focus:bg-muted data-[state=open]:bg-muted/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1"
 );
 function NavigationMenuTrigger({
   className,
@@ -1022,7 +1031,6 @@ function NavigationMenuTrigger({
       ...props,
       children: [
         children,
-        " ",
         /* @__PURE__ */ jsx(
           DynamicIcon,
           {
@@ -1086,7 +1094,7 @@ function NavigationMenuLink({
     {
       "data-slot": "navigation-menu-link",
       className: cn(
-        "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",
+        "group inline-flex h-auto w-max items-center justify-center rounded-md bg-transparent px-3 py-2 text-sm font-normal text-foreground/80 hover:bg-muted hover:text-foreground focus:bg-muted focus:text-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-muted data-[state=open]:text-foreground data-[state=open]:focus:bg-muted data-[state=open]:bg-muted/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1",
         className
       ),
       ...props
@@ -1171,27 +1179,33 @@ var logoPlaceholders = {
 function getNavbarLayoutClasses(layoutVariant = "fullScreenContainerizedLinks", customClasses) {
   const isFloatingBar = layoutVariant === "floatingBar";
   const isFullWidthLinks = layoutVariant === "fullScreenFullWidthLinks";
+  const isContainerizedLinks = layoutVariant === "fullScreenContainerizedLinks";
   return {
-    // Section wrapper classes
+    // Section wrapper classes - always full width for non-floating variants
     sectionClasses: cn(
       "inset-x-0 z-20",
       isFloatingBar ? "sticky top-4" : "top-0",
       customClasses?.className
     ),
-    // Outer container wrapper (only for floating bar)
+    // Outer container wrapper (only for floating bar - this containerizes the entire navbar)
     containerWrapperClasses: cn(
+      "w-full",
       isFloatingBar && "mx-auto w-full px-2 sm:px-4 lg:px-8 max-w-7xl relative z-10"
     ),
-    // Inner container classes
+    // Inner container classes (only for fullScreenContainerizedLinks - this containerizes the content inside the navbar)
     innerContainerClasses: cn(
-      !isFloatingBar && !isFullWidthLinks && "container",
+      isContainerizedLinks && "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(
+      "w-full",
       isFloatingBar ? "border border-border/50 shadow-sm rounded-full" : "border-b border-border/50 shadow-sm"
     ),
+    // Section container configuration for full-width navbars
+    sectionContainerClassName: "px-0 sm:px-0 lg:px-0",
+    sectionContainerMaxWidth: "full",
     // Spacing adjustment for Section component
     spacingOverride: isFloatingBar ? "none" : void 0
   };
@@ -1320,6 +1334,8 @@ var NavbarDarkIcons = ({
     containerWrapperClasses,
     innerContainerClasses,
     navWrapperClasses,
+    sectionContainerClassName,
+    sectionContainerMaxWidth,
     spacingOverride
   } = getNavbarLayoutClasses(layoutVariant, { className, containerClassName });
   return /* @__PURE__ */ jsxs(
@@ -1330,13 +1346,14 @@ var NavbarDarkIcons = ({
       className: cn("dark pointer-events-auto relative z-999", sectionClasses),
       pattern,
       patternOpacity,
+      containerClassName: sectionContainerClassName,
+      containerMaxWidth: sectionContainerMaxWidth,
       children: [
-        /* @__PURE__ */ jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: innerContainerClasses, children: /* @__PURE__ */ jsxs(
+        /* @__PURE__ */ jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: navWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: innerContainerClasses, children: /* @__PURE__ */ jsxs(
           "nav",
           {
             className: cn(
               "flex h-16 items-center justify-between",
-              navWrapperClasses,
               navClassName
             ),
             children: [
@@ -1379,7 +1396,7 @@ var NavbarDarkIcons = ({
               ] })
             ]
           }
-        ) }) }),
+        ) }) }) }),
         /* @__PURE__ */ jsx(
           MobileNavigationMenu,
           {

package/dist/navbar-dropdown-menu.cjs

@@ -880,11 +880,13 @@ var Section = React__namespace.default.forwardRef(
     children,
     className,
     style,
-    background = "white",
+    background = "transparent",
     spacing = "lg",
     pattern,
     patternOpacity,
     patternClassName,
+    containerClassName,
+    containerMaxWidth = "xl",
     ...props
   }, ref) => {
     const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
@@ -911,13 +913,20 @@ var Section = React__namespace.default.forwardRef(
               className: patternClassName
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsxs(Container, { className: "relative z-10", children: [
-            (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-12 text-center md:mb-16", children: [
-              subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
-              title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
-            ] }),
-            children
-          ] })
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            Container,
+            {
+              maxWidth: containerMaxWidth,
+              className: cn("relative z-10", containerClassName),
+              children: [
+                (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-12 text-center md:mb-16", children: [
+                  subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 text-sm font-semibold uppercase tracking-wider text-primary", children: subtitle }),
+                  title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-3xl font-bold tracking-tight md:text-4xl lg:text-5xl", children: title })
+                ] }),
+                children
+              ]
+            }
+          )
         ]
       }
     );
@@ -1010,7 +1019,7 @@ function NavigationMenuList({
     {
       "data-slot": "navigation-menu-list",
       className: cn(
-        "group flex flex-1 list-none items-center justify-center gap-2 lg:gap-4 xl:gap-6",
+        "group flex flex-1 list-none items-center justify-center gap-2 lg:gap-4",
         className
       ),
       ...props
@@ -1031,7 +1040,7 @@ function NavigationMenuItem({
   );
 }
 var navigationMenuTriggerStyle = classVarianceAuthority.cva(
-  "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium text-foreground/80 hover:bg-muted hover:text-foreground focus:bg-muted focus:text-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-muted data-[state=open]:text-foreground data-[state=open]:focus:bg-muted data-[state=open]:bg-muted/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1"
+  "group inline-flex h-9 w-max gap-1 items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium text-foreground/80 hover:bg-muted hover:text-foreground focus:bg-muted focus:text-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-muted data-[state=open]:text-foreground data-[state=open]:focus:bg-muted data-[state=open]:bg-muted/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1"
 );
 function NavigationMenuTrigger({
   className,
@@ -1046,7 +1055,6 @@ function NavigationMenuTrigger({
       ...props,
       children: [
         children,
-        " ",
         /* @__PURE__ */ jsxRuntime.jsx(
           DynamicIcon,
           {
@@ -1110,7 +1118,7 @@ function NavigationMenuLink({
     {
       "data-slot": "navigation-menu-link",
       className: cn(
-        "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",
+        "group inline-flex h-auto w-max items-center justify-center rounded-md bg-transparent px-3 py-2 text-sm font-normal text-foreground/80 hover:bg-muted hover:text-foreground focus:bg-muted focus:text-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-muted data-[state=open]:text-foreground data-[state=open]:focus:bg-muted data-[state=open]:bg-muted/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1",
         className
       ),
       ...props
@@ -1210,27 +1218,33 @@ var logoPlaceholders = {
 function getNavbarLayoutClasses(layoutVariant = "fullScreenContainerizedLinks", customClasses) {
   const isFloatingBar = layoutVariant === "floatingBar";
   const isFullWidthLinks = layoutVariant === "fullScreenFullWidthLinks";
+  const isContainerizedLinks = layoutVariant === "fullScreenContainerizedLinks";
   return {
-    // Section wrapper classes
+    // Section wrapper classes - always full width for non-floating variants
     sectionClasses: cn(
       "inset-x-0 z-20",
       isFloatingBar ? "sticky top-4" : "top-0",
       customClasses?.className
     ),
-    // Outer container wrapper (only for floating bar)
+    // Outer container wrapper (only for floating bar - this containerizes the entire navbar)
     containerWrapperClasses: cn(
+      "w-full",
       isFloatingBar && "mx-auto w-full px-2 sm:px-4 lg:px-8 max-w-7xl relative z-10"
     ),
-    // Inner container classes
+    // Inner container classes (only for fullScreenContainerizedLinks - this containerizes the content inside the navbar)
     innerContainerClasses: cn(
-      !isFloatingBar && !isFullWidthLinks && "container",
+      isContainerizedLinks && "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(
+      "w-full",
       isFloatingBar ? "border border-border/50 shadow-sm rounded-full" : "border-b border-border/50 shadow-sm"
     ),
+    // Section container configuration for full-width navbars
+    sectionContainerClassName: "px-0 sm:px-0 lg:px-0",
+    sectionContainerMaxWidth: "full",
     // Spacing adjustment for Section component
     spacingOverride: isFloatingBar ? "none" : void 0
   };
@@ -1261,14 +1275,7 @@ var renderMenuItem = (item, optixFlowConfig) => {
       /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuContent, { className: "bg-popover text-popover-foreground", children: item.items.map((subItem) => /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuLink, { asChild: true, className: "w-80", children: /* @__PURE__ */ jsxRuntime.jsx(SubMenuLink, { item: subItem, optixFlowConfig }) }, subItem.title)) })
     ] }, item.title);
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuItem, { children: /* @__PURE__ */ jsxRuntime.jsx(
-    NavigationMenuLink,
-    {
-      href: item.url,
-      className: "group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-muted hover:text-foreground",
-      children: item.title
-    }
-  ) }, item.title);
+  return /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuItem, { children: /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuLink, { href: item.url, children: item.title }) }, item.title);
 };
 var renderMobileMenuItem = (item, optixFlowConfig) => {
   if (item.items) {
@@ -1384,6 +1391,8 @@ var NavbarDropdownMenu = ({
     containerWrapperClasses,
     innerContainerClasses,
     navWrapperClasses,
+    sectionContainerClassName,
+    sectionContainerMaxWidth,
     spacingOverride
   } = getNavbarLayoutClasses(layoutVariant, { className, containerClassName });
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -1394,7 +1403,9 @@ var NavbarDropdownMenu = ({
       className: sectionClasses,
       pattern,
       patternOpacity,
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(innerContainerClasses, navWrapperClasses), children: [
+      containerClassName: sectionContainerClassName,
+      containerMaxWidth: sectionContainerMaxWidth,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: navWrapperClasses, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: innerContainerClasses, children: [
         /* @__PURE__ */ jsxRuntime.jsxs(
           "nav",
           {
@@ -1442,7 +1453,7 @@ var NavbarDropdownMenu = ({
             ] })
           ] })
         ] }) })
-      ] }) })
+      ] }) }) })
     }
   );
 };