@opensite/ui 0.4.7 → 0.4.9

package/dist/navbar-platform-resources.js

@@ -855,11 +855,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;
@@ -886,13 +888,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
+              ]
+            }
+          )
         ]
       }
     );
@@ -985,7 +994,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
@@ -1006,7 +1015,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,
@@ -1021,7 +1030,6 @@ function NavigationMenuTrigger({
       ...props,
       children: [
         children,
-        " ",
         /* @__PURE__ */ jsx(
           DynamicIcon,
           {
@@ -1085,7 +1093,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
@@ -1106,27 +1114,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
   };
@@ -1443,6 +1457,8 @@ var NavbarPlatformResources = ({
     containerWrapperClasses,
     innerContainerClasses,
     navWrapperClasses,
+    sectionContainerClassName,
+    sectionContainerMaxWidth,
     spacingOverride
   } = getNavbarLayoutClasses(layoutVariant, { className, containerClassName });
   return /* @__PURE__ */ jsx(
@@ -1453,156 +1469,164 @@ var NavbarPlatformResources = ({
       className: sectionClasses,
       pattern,
       patternOpacity,
-      children: /* @__PURE__ */ jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: cn(innerContainerClasses, navWrapperClasses), children: /* @__PURE__ */ jsxs(NavigationMenu, { className: cn("min-w-full", navigationMenuClassName), children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center justify-between gap-12 py-4", children: [
-          renderLogo(),
-          /* @__PURE__ */ jsx(
-            NavigationMenuList,
-            {
-              className: cn("hidden lg:flex", navigationMenuListClassName),
-              children: menuLinks?.map((link, index) => {
-                if (hasDropdownItems(link)) {
-                  return /* @__PURE__ */ jsxs(
-                    NavigationMenuItem,
-                    {
-                      children: [
-                        /* @__PURE__ */ jsx(NavigationMenuTrigger, { className: "h-auto bg-transparent px-0 py-0 font-normal text-foreground/60 hover:bg-transparent hover:text-foreground focus:bg-transparent focus:text-foreground data-[state=open]:bg-transparent data-[state=open]:text-foreground", children: link.label }),
-                        renderDropdownContent(link)
-                      ]
-                    },
-                    `${typeof link.label === "string" ? link.label : "menu"}-${index}`
-                  );
-                }
-                if (!link.href) {
-                  return null;
-                }
-                return /* @__PURE__ */ jsx(
-                  NavigationMenuItem,
-                  {
-                    children: /* @__PURE__ */ jsx(
-                      NavigationMenuLink,
+      containerClassName: sectionContainerClassName,
+      containerMaxWidth: sectionContainerMaxWidth,
+      children: /* @__PURE__ */ jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: navWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: innerContainerClasses, children: /* @__PURE__ */ jsxs(
+        NavigationMenu,
+        {
+          className: cn("min-w-full", navigationMenuClassName),
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center justify-between gap-12 py-4", children: [
+              renderLogo(),
+              /* @__PURE__ */ jsx(
+                NavigationMenuList,
+                {
+                  className: cn("hidden lg:flex", navigationMenuListClassName),
+                  children: menuLinks?.map((link, index) => {
+                    if (hasDropdownItems(link)) {
+                      return /* @__PURE__ */ jsxs(
+                        NavigationMenuItem,
+                        {
+                          children: [
+                            /* @__PURE__ */ jsx(NavigationMenuTrigger, { className: "h-auto bg-transparent px-0 py-0 font-normal text-foreground/60 hover:bg-transparent hover:text-foreground focus:bg-transparent focus:text-foreground data-[state=open]:bg-transparent data-[state=open]:text-foreground", children: link.label }),
+                            renderDropdownContent(link)
+                          ]
+                        },
+                        `${typeof link.label === "string" ? link.label : "menu"}-${index}`
+                      );
+                    }
+                    if (!link.href) {
+                      return null;
+                    }
+                    return /* @__PURE__ */ jsx(
+                      NavigationMenuItem,
                       {
-                        href: link.href,
-                        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-accent-foreground",
-                        children: link.label
-                      }
-                    )
-                  },
-                  `${typeof link.label === "string" ? link.label : "menu"}-${index}`
-                );
-              })
-            }
-          ),
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              className: cn(
-                "hidden items-center gap-4 lg:flex",
-                actionsClassName
-              ),
-              children: renderActions()
-            }
-          ),
-          /* @__PURE__ */ jsx("div", { className: "flex items-center gap-4 lg:hidden", children: /* @__PURE__ */ jsxs(
-            Pressable,
-            {
-              variant: "outline",
-              size: "icon",
-              asButton: true,
-              "aria-label": "Main Menu",
-              onClick: () => setOpen(!open),
-              children: [
-                !open && /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/menu", size: 16 }),
-                open && /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/x", size: 16 })
-              ]
-            }
-          ) })
-        ] }),
-        open && /* @__PURE__ */ jsxs(
-          "div",
-          {
-            className: cn(
-              "absolute inset-0 top-[72px] flex h-[calc(100vh-72px)] w-full flex-col overflow-scroll border-t border-border bg-background lg:hidden",
-              mobileMenuClassName
-            ),
-            children: [
-              /* @__PURE__ */ jsx(Accordion, { type: "single", collapsible: true, className: "w-full", children: menuLinks?.map((link, index) => {
-                if (hasDropdownItems(link)) {
-                  return /* @__PURE__ */ jsxs(
-                    AccordionItem,
-                    {
-                      value: `menu-${index}`,
-                      className: "border-b-2 border-dashed",
-                      children: [
-                        /* @__PURE__ */ jsx(AccordionTrigger, { className: "px-2 py-4 text-left hover:no-underline", children: link.label }),
-                        /* @__PURE__ */ jsx(AccordionContent, { className: "px-2 pb-4", children: /* @__PURE__ */ jsx("div", { className: "space-y-3", children: link.links?.map((item, itemIndex) => /* @__PURE__ */ jsxs(
-                          Pressable,
+                        children: /* @__PURE__ */ jsx(
+                          NavigationMenuLink,
                           {
-                            href: getLinkUrl(item),
-                            className: "group flex items-start gap-4 rounded-lg p-2 hover:bg-muted",
-                            children: [
-                              item.image && /* @__PURE__ */ jsx("div", { className: "h-10 w-10 overflow-hidden rounded-md border border-border", children: /* @__PURE__ */ jsx(
-                                Img,
-                                {
-                                  src: item.image,
-                                  alt: typeof item.label === "string" ? item.label : "Menu item",
-                                  className: "h-full w-full object-cover object-center",
-                                  optixFlowConfig
-                                }
-                              ) }),
-                              !item.image && (item.icon || item.iconName) && /* @__PURE__ */ jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded-md border border-border bg-muted/40 text-muted-foreground", children: item.icon ? item.icon : item.iconName ? /* @__PURE__ */ jsx(
-                                DynamicIcon,
-                                {
-                                  name: item.iconName,
-                                  size: 16
-                                }
-                              ) : null }),
-                              /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
-                                /* @__PURE__ */ jsx("div", { className: "text-sm font-medium text-foreground", children: item.label }),
-                                item.description && /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground", children: item.description })
-                              ] })
-                            ]
-                          },
-                          `${typeof item.label === "string" ? item.label : "item"}-${itemIndex}`
-                        )) }) })
-                      ]
-                    },
-                    `${typeof link.label === "string" ? link.label : "menu"}-${index}`
-                  );
+                            href: link.href,
+                            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-accent-foreground",
+                            children: link.label
+                          }
+                        )
+                      },
+                      `${typeof link.label === "string" ? link.label : "menu"}-${index}`
+                    );
+                  })
                 }
-                if (!link.href) {
-                  return null;
-                }
-                return /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    className: "border-b-2 border-dashed",
-                    children: /* @__PURE__ */ jsx(
-                      Pressable,
-                      {
-                        href: link.href,
-                        className: "flex w-full items-center px-2 py-4 text-left text-sm font-medium",
-                        children: link.label
-                      }
-                    )
-                  },
-                  `${typeof link.label === "string" ? link.label : "menu"}-${index}`
-                );
-              }) }),
+              ),
               /* @__PURE__ */ jsx(
                 "div",
                 {
                   className: cn(
-                    "mx-8 mt-auto flex flex-col gap-4 py-12",
+                    "hidden items-center gap-4 lg:flex",
                     actionsClassName
                   ),
                   children: renderActions()
                 }
-              )
-            ]
-          }
-        )
-      ] }) }) })
+              ),
+              /* @__PURE__ */ jsx("div", { className: "flex items-center gap-4 lg:hidden", children: /* @__PURE__ */ jsxs(
+                Pressable,
+                {
+                  variant: "outline",
+                  size: "icon",
+                  asButton: true,
+                  "aria-label": "Main Menu",
+                  onClick: () => setOpen(!open),
+                  children: [
+                    !open && /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/menu", size: 16 }),
+                    open && /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/x", size: 16 })
+                  ]
+                }
+              ) })
+            ] }),
+            open && /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: cn(
+                  "absolute inset-0 top-[72px] flex h-[calc(100vh-72px)] w-full flex-col overflow-scroll border-t border-border bg-background lg:hidden",
+                  mobileMenuClassName
+                ),
+                children: [
+                  /* @__PURE__ */ jsx(Accordion, { type: "single", collapsible: true, className: "w-full", children: menuLinks?.map((link, index) => {
+                    if (hasDropdownItems(link)) {
+                      return /* @__PURE__ */ jsxs(
+                        AccordionItem,
+                        {
+                          value: `menu-${index}`,
+                          className: "border-b-2 border-dashed",
+                          children: [
+                            /* @__PURE__ */ jsx(AccordionTrigger, { className: "px-2 py-4 text-left hover:no-underline", children: link.label }),
+                            /* @__PURE__ */ jsx(AccordionContent, { className: "px-2 pb-4", children: /* @__PURE__ */ jsx("div", { className: "space-y-3", children: link.links?.map((item, itemIndex) => /* @__PURE__ */ jsxs(
+                              Pressable,
+                              {
+                                href: getLinkUrl(item),
+                                className: "group flex items-start gap-4 rounded-lg p-2 hover:bg-muted",
+                                children: [
+                                  item.image && /* @__PURE__ */ jsx("div", { className: "h-10 w-10 overflow-hidden rounded-md border border-border", children: /* @__PURE__ */ jsx(
+                                    Img,
+                                    {
+                                      src: item.image,
+                                      alt: typeof item.label === "string" ? item.label : "Menu item",
+                                      className: "h-full w-full object-cover object-center",
+                                      optixFlowConfig
+                                    }
+                                  ) }),
+                                  !item.image && (item.icon || item.iconName) && /* @__PURE__ */ jsx("div", { className: "flex h-10 w-10 items-center justify-center rounded-md border border-border bg-muted/40 text-muted-foreground", children: item.icon ? item.icon : item.iconName ? /* @__PURE__ */ jsx(
+                                    DynamicIcon,
+                                    {
+                                      name: item.iconName,
+                                      size: 16
+                                    }
+                                  ) : null }),
+                                  /* @__PURE__ */ jsxs("div", { className: "flex-1", children: [
+                                    /* @__PURE__ */ jsx("div", { className: "text-sm font-medium text-foreground", children: item.label }),
+                                    item.description && /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground", children: item.description })
+                                  ] })
+                                ]
+                              },
+                              `${typeof item.label === "string" ? item.label : "item"}-${itemIndex}`
+                            )) }) })
+                          ]
+                        },
+                        `${typeof link.label === "string" ? link.label : "menu"}-${index}`
+                      );
+                    }
+                    if (!link.href) {
+                      return null;
+                    }
+                    return /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        className: "border-b-2 border-dashed",
+                        children: /* @__PURE__ */ jsx(
+                          Pressable,
+                          {
+                            href: link.href,
+                            className: "flex w-full items-center px-2 py-4 text-left text-sm font-medium",
+                            children: link.label
+                          }
+                        )
+                      },
+                      `${typeof link.label === "string" ? link.label : "menu"}-${index}`
+                    );
+                  }) }),
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: cn(
+                        "mx-8 mt-auto flex flex-col gap-4 py-12",
+                        actionsClassName
+                      ),
+                      children: renderActions()
+                    }
+                  )
+                ]
+              }
+            )
+          ]
+        }
+      ) }) }) })
     }
   );
 };

package/dist/navbar-search-focused.cjs

@@ -878,11 +878,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;
@@ -909,13 +911,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
+              ]
+            }
+          )
         ]
       }
     );
@@ -954,7 +963,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
@@ -975,7 +984,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 NavigationMenuViewport({
   className,
@@ -1010,7 +1019,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
@@ -1100,27 +1109,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
   };
@@ -1247,6 +1262,8 @@ var NavbarSearchFocused = ({
     containerWrapperClasses,
     innerContainerClasses,
     navWrapperClasses,
+    sectionContainerClassName,
+    sectionContainerMaxWidth,
     spacingOverride
   } = getNavbarLayoutClasses(layoutVariant, { className, containerClassName });
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -1257,10 +1274,15 @@ var NavbarSearchFocused = ({
       className: sectionClasses,
       pattern,
       patternOpacity,
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(innerContainerClasses, navWrapperClasses), children: /* @__PURE__ */ jsxRuntime.jsxs(
+      containerClassName: sectionContainerClassName,
+      containerMaxWidth: sectionContainerMaxWidth,
+      children: /* @__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 items-center gap-4 py-3 lg:gap-8", navClassName),
+          className: cn(
+            "flex items-center gap-4 py-3 lg:gap-8",
+            navClassName
+          ),
           children: [
             renderLogo(),
             /* @__PURE__ */ jsxRuntime.jsx(
@@ -1325,7 +1347,7 @@ var NavbarSearchFocused = ({
             ] })
           ]
         }
-      ) }) })
+      ) }) }) })
     }
   );
 };

package/dist/navbar-search-focused.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 NavItem {

package/dist/navbar-search-focused.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 NavItem {