@opensite/ui 0.4.7 → 0.4.9

package/dist/navbar-animated-preview.cjs

@@ -885,11 +885,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;
@@ -916,13 +918,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
+              ]
+            }
+          )
         ]
       }
     );
@@ -1015,7 +1024,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
@@ -1036,7 +1045,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,
@@ -1051,7 +1060,6 @@ function NavigationMenuTrigger({
       ...props,
       children: [
         children,
-        " ",
         /* @__PURE__ */ jsxRuntime.jsx(
           DynamicIcon,
           {
@@ -1115,7 +1123,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
@@ -1379,27 +1387,33 @@ function getLinkUrl(item) {
 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
   };
@@ -1522,11 +1536,12 @@ var NavbarAnimatedPreview = ({
     containerWrapperClasses,
     innerContainerClasses,
     navWrapperClasses: baseNavWrapperClasses,
+    sectionContainerClassName,
+    sectionContainerMaxWidth,
     spacingOverride
   } = getNavbarLayoutClasses(layoutVariant, { className, containerClassName });
   const navWrapperClasses = cn(
     "h-20 max-w-full after:absolute after:inset-0 after:z-998 after:block after:size-full after:bg-background after:content-[''] [&>div:last-child>div]:mt-0 [&>div:last-child>div]:animate-none [&>div:last-child>div]:rounded-none [&>div:last-child>div]:border-0 [&>div:last-child>div]:shadow-[0px_-1px_0px_0px_rgba(0,0,0,0.05),0px_0px_0px_1px_rgba(17,26,37,0.05),0px_2px_5px_0px_rgba(16,25,36,0.1),0px_5px_20px_0px_rgba(16,25,36,0.1)]!",
-    baseNavWrapperClasses,
     navigationMenuClassName
   );
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -1540,7 +1555,9 @@ var NavbarAnimatedPreview = ({
       ),
       pattern,
       patternOpacity,
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: innerContainerClasses, children: [
+      containerClassName: sectionContainerClassName,
+      containerMaxWidth: sectionContainerMaxWidth,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: baseNavWrapperClasses, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: innerContainerClasses, children: [
         /* @__PURE__ */ jsxRuntime.jsx(NavigationMenu, { className: navWrapperClasses, children: /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
@@ -1590,7 +1607,7 @@ var NavbarAnimatedPreview = ({
             actionsSlot
           }
         )
-      ] }) })
+      ] }) }) })
     }
   );
 };

package/dist/navbar-animated-preview.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, 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 { 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';
 
 /**

package/dist/navbar-animated-preview.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, 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 { 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';
 
 /**

package/dist/navbar-animated-preview.js

@@ -859,11 +859,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;
@@ -890,13 +892,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
+              ]
+            }
+          )
         ]
       }
     );
@@ -989,7 +998,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
@@ -1010,7 +1019,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,
@@ -1025,7 +1034,6 @@ function NavigationMenuTrigger({
       ...props,
       children: [
         children,
-        " ",
         /* @__PURE__ */ jsx(
           DynamicIcon,
           {
@@ -1089,7 +1097,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
@@ -1353,27 +1361,33 @@ function getLinkUrl(item) {
 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
   };
@@ -1496,11 +1510,12 @@ var NavbarAnimatedPreview = ({
     containerWrapperClasses,
     innerContainerClasses,
     navWrapperClasses: baseNavWrapperClasses,
+    sectionContainerClassName,
+    sectionContainerMaxWidth,
     spacingOverride
   } = getNavbarLayoutClasses(layoutVariant, { className, containerClassName });
   const navWrapperClasses = cn(
     "h-20 max-w-full after:absolute after:inset-0 after:z-998 after:block after:size-full after:bg-background after:content-[''] [&>div:last-child>div]:mt-0 [&>div:last-child>div]:animate-none [&>div:last-child>div]:rounded-none [&>div:last-child>div]:border-0 [&>div:last-child>div]:shadow-[0px_-1px_0px_0px_rgba(0,0,0,0.05),0px_0px_0px_1px_rgba(17,26,37,0.05),0px_2px_5px_0px_rgba(16,25,36,0.1),0px_5px_20px_0px_rgba(16,25,36,0.1)]!",
-    baseNavWrapperClasses,
     navigationMenuClassName
   );
   return /* @__PURE__ */ jsx(
@@ -1514,7 +1529,9 @@ var NavbarAnimatedPreview = ({
       ),
       pattern,
       patternOpacity,
-      children: /* @__PURE__ */ jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsxs("div", { className: innerContainerClasses, children: [
+      containerClassName: sectionContainerClassName,
+      containerMaxWidth: sectionContainerMaxWidth,
+      children: /* @__PURE__ */ jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: baseNavWrapperClasses, children: /* @__PURE__ */ jsxs("div", { className: innerContainerClasses, children: [
         /* @__PURE__ */ jsx(NavigationMenu, { className: navWrapperClasses, children: /* @__PURE__ */ jsxs(
           "div",
           {
@@ -1564,7 +1581,7 @@ var NavbarAnimatedPreview = ({
             actionsSlot
           }
         )
-      ] }) })
+      ] }) }) })
     }
   );
 };

package/dist/navbar-centered-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
+              ]
+            }
+          )
         ]
       }
     );
@@ -987,7 +996,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
@@ -1008,7 +1017,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,
@@ -1023,7 +1032,6 @@ function NavigationMenuTrigger({
       ...props,
       children: [
         children,
-        " ",
         /* @__PURE__ */ jsxRuntime.jsx(
           DynamicIcon,
           {
@@ -1063,7 +1071,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
@@ -1163,27 +1171,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
   };
@@ -1229,14 +1243,7 @@ var renderMenuItem = (item) => {
       /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(NavigationMenuLink, { asChild: true, className: "w-full", children: /* @__PURE__ */ jsxRuntime.jsx(SubMenuLink, { item: subItem }) }, 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) => {
   if (item.items) {
@@ -1345,6 +1352,8 @@ var NavbarCenteredMenu = ({
     containerWrapperClasses,
     innerContainerClasses,
     navWrapperClasses,
+    sectionContainerClassName,
+    sectionContainerMaxWidth,
     spacingOverride
   } = getNavbarLayoutClasses(layoutVariant, { className, containerClassName });
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -1355,7 +1364,9 @@ var NavbarCenteredMenu = ({
       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",
           {
@@ -1404,7 +1415,7 @@ var NavbarCenteredMenu = ({
             ] })
           ] })
         ] }) })
-      ] }) })
+      ] }) }) })
     }
   );
 };

package/dist/navbar-centered-menu.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';
 
 /**

package/dist/navbar-centered-menu.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';
 
 /**