@opensite/ui 0.4.4 → 0.4.6

package/dist/navbar-search-focused.d.ts

@@ -2,6 +2,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { P as PatternName } from './pattern-background-a7gKHzHy.js';
 import { SectionBackground, SectionSpacing } from './types.js';
+import { L as LogoConfig, N as NavbarLayoutVariant } from './types-COVDidbn.js';
 import { A as ActionConfig, O as OptixFlowConfig } from './blocks-k17uluAz.js';
 import 'class-variance-authority';
 import './button-variants-lRElsmTc.js';
@@ -13,16 +14,6 @@ interface NavItem {
     icon?: React.ReactNode;
     iconName?: string;
 }
-/**
- * Logo configuration interface
- */
-interface LogoConfig {
-    url?: string;
-    src?: string;
-    alt?: string;
-    title?: React.ReactNode;
-    className?: string;
-}
 /**
  * Props for the NavbarSearchFocused component
  */
@@ -115,6 +106,10 @@ interface NavbarSearchFocusedProps {
      * OptixFlow image optimization configuration
      */
     optixFlowConfig?: OptixFlowConfig;
+    /**
+     * Layout variant for the navbar
+     */
+    layoutVariant?: NavbarLayoutVariant;
 }
 /**
  * NavbarSearchFocused - A navigation bar with a prominent search input.
@@ -125,6 +120,6 @@ interface NavbarSearchFocusedProps {
  * below the logo and hamburger menu, with navigation in a slide-out sheet. Ideal for
  * e-commerce sites, marketplaces, documentation sites, and content-heavy platforms.
  */
-declare const NavbarSearchFocused: ({ className, containerClassName, navClassName, navigationMenuClassName, actionsClassName, logo, logoSlot, logoClassName, navItems, navigationSlot, searchPlaceholder, onSearch, searchSlot, authActions, authActionsSlot, mobileMenuActions, mobileMenuActionsSlot, background, spacing, pattern, patternOpacity, optixFlowConfig, }: NavbarSearchFocusedProps) => react_jsx_runtime.JSX.Element;
+declare const NavbarSearchFocused: ({ className, containerClassName, navClassName, navigationMenuClassName, actionsClassName, logo, logoSlot, logoClassName, navItems, navigationSlot, searchPlaceholder, onSearch, searchSlot, authActions, authActionsSlot, mobileMenuActions, mobileMenuActionsSlot, layoutVariant, background, spacing, pattern, patternOpacity, optixFlowConfig, }: NavbarSearchFocusedProps) => react_jsx_runtime.JSX.Element;
 
 export { NavbarSearchFocused, type NavbarSearchFocusedProps };

package/dist/navbar-search-focused.js

@@ -931,7 +931,7 @@ function NavigationMenuList({
     {
       "data-slot": "navigation-menu-list",
       className: cn(
-        "group flex flex-1 list-none items-center justify-center gap-6",
+        "group flex flex-1 list-none items-center justify-center gap-2 lg:gap-4 xl:gap-6",
         className
       ),
       ...props
@@ -969,7 +969,7 @@ function NavigationMenuViewport({
         {
           "data-slot": "navigation-menu-viewport",
           className: cn(
-            "origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow md:w-[var(--radix-navigation-menu-viewport-width)]",
+            "origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-(--radix-navigation-menu-viewport-height) w-full overflow-hidden rounded-md border border-border/50 shadow-sm md:w-(--radix-navigation-menu-viewport-width)",
             className
           ),
           ...props
@@ -987,7 +987,7 @@ function NavigationMenuLink({
     {
       "data-slot": "navigation-menu-link",
       className: cn(
-        "data-[active=true]:focus:bg-muted data-[active=true]:hover:bg-muted data-[active=true]:bg-muted/50 data-[active=true]:text-foreground hover:bg-muted hover:text-foreground focus:bg-muted focus:text-foreground focus-visible:ring-ring/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4",
+        "group inline-flex w-max items-center justify-center rounded-md text-sm disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-muted data-[state=open]:focus:bg-muted focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 group h-auto bg-transparent px-3 py-2 font-normal text-foreground/80 hover:bg-muted hover:text-foreground focus:bg-muted focus:text-foreground data-[state=open]:bg-muted/50 data-[state=open]:text-foreground",
         className
       ),
       ...props
@@ -1072,6 +1072,36 @@ function SheetTitle({
 // lib/mediaPlaceholders.ts
 var logoPlaceholders = {
   logoMark: "https://cdn.ing/assets/i/r/285975/eud79qeya11q5w6ueyhklueardyx/monochrome-rounded-square-app-icon-circular-emblem.png"};
+
+// components/blocks/navbars/layout-variant-utils.ts
+function getNavbarLayoutClasses(layoutVariant = "fullScreenContainerizedLinks", customClasses) {
+  const isFloatingBar = layoutVariant === "floatingBar";
+  const isFullWidthLinks = layoutVariant === "fullScreenFullWidthLinks";
+  return {
+    // Section wrapper classes
+    sectionClasses: cn(
+      "inset-x-0 z-20",
+      isFloatingBar ? "sticky top-4" : "top-0",
+      customClasses?.className
+    ),
+    // Outer container wrapper (only for floating bar)
+    containerWrapperClasses: cn(
+      isFloatingBar && "mx-auto w-full px-2 sm:px-4 lg:px-8 max-w-7xl relative z-10"
+    ),
+    // Inner container classes
+    innerContainerClasses: cn(
+      !isFloatingBar && !isFullWidthLinks && "container",
+      isFullWidthLinks && "mx-auto w-full px-2 sm:px-4 lg:px-8",
+      customClasses?.containerClassName
+    ),
+    // Navigation wrapper classes (for border and shadow)
+    navWrapperClasses: cn(
+      isFloatingBar ? "border border-border/50 shadow-sm rounded-full" : "border-b border-border/50 shadow-sm"
+    ),
+    // Spacing adjustment for Section component
+    spacingOverride: isFloatingBar ? "none" : void 0
+  };
+}
 var NavbarSearchFocused = ({
   className,
   containerClassName,
@@ -1093,6 +1123,7 @@ var NavbarSearchFocused = ({
   authActionsSlot,
   mobileMenuActions,
   mobileMenuActionsSlot,
+  layoutVariant = "fullScreenContainerizedLinks",
   background = "white",
   spacing = "none",
   pattern,
@@ -1188,15 +1219,22 @@ var NavbarSearchFocused = ({
       );
     }) });
   };
+  const {
+    sectionClasses,
+    containerWrapperClasses,
+    innerContainerClasses,
+    navWrapperClasses,
+    spacingOverride
+  } = getNavbarLayoutClasses(layoutVariant, { className, containerClassName });
   return /* @__PURE__ */ jsx(
     Section,
     {
       background,
-      spacing,
-      className: cn("border-b", className),
+      spacing: spacingOverride ?? spacing,
+      className: sectionClasses,
       pattern,
       patternOpacity,
-      children: /* @__PURE__ */ jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxs(
+      children: /* @__PURE__ */ jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: cn(innerContainerClasses, navWrapperClasses), children: /* @__PURE__ */ jsxs(
         "nav",
         {
           className: cn("flex items-center gap-4 py-3 lg:gap-8", navClassName),
@@ -1264,7 +1302,7 @@ var NavbarSearchFocused = ({
             ] })
           ]
         }
-      ) })
+      ) }) })
     }
   );
 };

package/dist/navbar-sidebar-mobile.cjs

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

package/dist/navbar-sidebar-mobile.d.cts

@@ -2,6 +2,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { P as PatternName } from './pattern-background-a7gKHzHy.cjs';
 import { SectionBackground, SectionSpacing } from './types.cjs';
+import { L as LogoConfig, N as NavbarLayoutVariant } from './types-COVDidbn.cjs';
 import { A as ActionConfig, O as OptixFlowConfig } from './blocks-Cohq4eio.cjs';
 import 'class-variance-authority';
 import './button-variants-lRElsmTc.cjs';
@@ -18,16 +19,6 @@ interface MenuItem {
     url?: string;
     items?: SubMenuItem[];
 }
-/**
- * Logo configuration interface
- */
-interface LogoConfig {
-    url?: string;
-    src?: string;
-    alt?: string;
-    title?: React.ReactNode;
-    className?: string;
-}
 /**
  * Props for the NavbarSidebarMobile component
  */
@@ -111,6 +102,10 @@ interface NavbarSidebarMobileProps {
      * OptixFlow image optimization configuration
      */
     optixFlowConfig?: OptixFlowConfig;
+    /**
+     * Layout variant for the navbar
+     */
+    layoutVariant?: NavbarLayoutVariant;
 }
 /**
  * NavbarSidebarMobile - A navigation bar with a slide-out sidebar for mobile devices.
@@ -121,6 +116,6 @@ interface NavbarSidebarMobileProps {
  * header with logo and close button. Ideal for applications that need a more app-like
  * mobile navigation experience.
  */
-declare const NavbarSidebarMobile: ({ logo, logoSlot, logoClassName, menu, menuSlot, mobileExtraLinks, mobileExtraLinksSlot, authActions, authActionsSlot, className, containerClassName, navClassName, navigationMenuClassName, actionsClassName, background, spacing, pattern, patternOpacity, optixFlowConfig, }: NavbarSidebarMobileProps) => react_jsx_runtime.JSX.Element;
+declare const NavbarSidebarMobile: ({ logo, logoSlot, logoClassName, menu, menuSlot, mobileExtraLinks, mobileExtraLinksSlot, authActions, authActionsSlot, className, containerClassName, navClassName, navigationMenuClassName, actionsClassName, layoutVariant, background, spacing, pattern, patternOpacity, optixFlowConfig, }: NavbarSidebarMobileProps) => react_jsx_runtime.JSX.Element;
 
 export { NavbarSidebarMobile, type NavbarSidebarMobileProps };

package/dist/navbar-sidebar-mobile.d.ts

@@ -2,6 +2,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { P as PatternName } from './pattern-background-a7gKHzHy.js';
 import { SectionBackground, SectionSpacing } from './types.js';
+import { L as LogoConfig, N as NavbarLayoutVariant } from './types-COVDidbn.js';
 import { A as ActionConfig, O as OptixFlowConfig } from './blocks-k17uluAz.js';
 import 'class-variance-authority';
 import './button-variants-lRElsmTc.js';
@@ -18,16 +19,6 @@ interface MenuItem {
     url?: string;
     items?: SubMenuItem[];
 }
-/**
- * Logo configuration interface
- */
-interface LogoConfig {
-    url?: string;
-    src?: string;
-    alt?: string;
-    title?: React.ReactNode;
-    className?: string;
-}
 /**
  * Props for the NavbarSidebarMobile component
  */
@@ -111,6 +102,10 @@ interface NavbarSidebarMobileProps {
      * OptixFlow image optimization configuration
      */
     optixFlowConfig?: OptixFlowConfig;
+    /**
+     * Layout variant for the navbar
+     */
+    layoutVariant?: NavbarLayoutVariant;
 }
 /**
  * NavbarSidebarMobile - A navigation bar with a slide-out sidebar for mobile devices.
@@ -121,6 +116,6 @@ interface NavbarSidebarMobileProps {
  * header with logo and close button. Ideal for applications that need a more app-like
  * mobile navigation experience.
  */
-declare const NavbarSidebarMobile: ({ logo, logoSlot, logoClassName, menu, menuSlot, mobileExtraLinks, mobileExtraLinksSlot, authActions, authActionsSlot, className, containerClassName, navClassName, navigationMenuClassName, actionsClassName, background, spacing, pattern, patternOpacity, optixFlowConfig, }: NavbarSidebarMobileProps) => react_jsx_runtime.JSX.Element;
+declare const NavbarSidebarMobile: ({ logo, logoSlot, logoClassName, menu, menuSlot, mobileExtraLinks, mobileExtraLinksSlot, authActions, authActionsSlot, className, containerClassName, navClassName, navigationMenuClassName, actionsClassName, layoutVariant, background, spacing, pattern, patternOpacity, optixFlowConfig, }: NavbarSidebarMobileProps) => react_jsx_runtime.JSX.Element;
 
 export { NavbarSidebarMobile, type NavbarSidebarMobileProps };

package/dist/navbar-sidebar-mobile.js

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

package/dist/navbar-simple-links.cjs

@@ -954,7 +954,7 @@ function NavigationMenuList({
     {
       "data-slot": "navigation-menu-list",
       className: cn(
-        "group flex flex-1 list-none items-center justify-center gap-6",
+        "group flex flex-1 list-none items-center justify-center gap-2 lg:gap-4 xl:gap-6",
         className
       ),
       ...props
@@ -992,7 +992,7 @@ function NavigationMenuViewport({
         {
           "data-slot": "navigation-menu-viewport",
           className: cn(
-            "origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow md:w-[var(--radix-navigation-menu-viewport-width)]",
+            "origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-(--radix-navigation-menu-viewport-height) w-full overflow-hidden rounded-md border border-border/50 shadow-sm md:w-(--radix-navigation-menu-viewport-width)",
             className
           ),
           ...props
@@ -1010,7 +1010,7 @@ function NavigationMenuLink({
     {
       "data-slot": "navigation-menu-link",
       className: cn(
-        "data-[active=true]:focus:bg-muted data-[active=true]:hover:bg-muted data-[active=true]:bg-muted/50 data-[active=true]:text-foreground hover:bg-muted hover:text-foreground focus:bg-muted focus:text-foreground focus-visible:ring-ring/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4",
+        "group inline-flex w-max items-center justify-center rounded-md text-sm disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-muted data-[state=open]:focus:bg-muted focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 group h-auto bg-transparent px-3 py-2 font-normal text-foreground/80 hover:bg-muted hover:text-foreground focus:bg-muted focus:text-foreground data-[state=open]:bg-muted/50 data-[state=open]:text-foreground",
         className
       ),
       ...props
@@ -1051,6 +1051,36 @@ function PopoverContent({
 // lib/mediaPlaceholders.ts
 var logoPlaceholders = {
   logoMark: "https://cdn.ing/assets/i/r/285975/eud79qeya11q5w6ueyhklueardyx/monochrome-rounded-square-app-icon-circular-emblem.png"};
+
+// components/blocks/navbars/layout-variant-utils.ts
+function getNavbarLayoutClasses(layoutVariant = "fullScreenContainerizedLinks", customClasses) {
+  const isFloatingBar = layoutVariant === "floatingBar";
+  const isFullWidthLinks = layoutVariant === "fullScreenFullWidthLinks";
+  return {
+    // Section wrapper classes
+    sectionClasses: cn(
+      "inset-x-0 z-20",
+      isFloatingBar ? "sticky top-4" : "top-0",
+      customClasses?.className
+    ),
+    // Outer container wrapper (only for floating bar)
+    containerWrapperClasses: cn(
+      isFloatingBar && "mx-auto w-full px-2 sm:px-4 lg:px-8 max-w-7xl relative z-10"
+    ),
+    // Inner container classes
+    innerContainerClasses: cn(
+      !isFloatingBar && !isFullWidthLinks && "container",
+      isFullWidthLinks && "mx-auto w-full px-2 sm:px-4 lg:px-8",
+      customClasses?.containerClassName
+    ),
+    // Navigation wrapper classes (for border and shadow)
+    navWrapperClasses: cn(
+      isFloatingBar ? "border border-border/50 shadow-sm rounded-full" : "border-b border-border/50 shadow-sm"
+    ),
+    // Spacing adjustment for Section component
+    spacingOverride: isFloatingBar ? "none" : void 0
+  };
+}
 var AnimatedHamburger = ({ isOpen }) => {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "group relative size-full", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute flex size-full items-center justify-center", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -1149,6 +1179,7 @@ var NavbarSimpleLinks = ({
   defaultActiveItem,
   actions,
   actionsSlot,
+  layoutVariant = "fullScreenContainerizedLinks",
   background = "white",
   spacing = "sm",
   pattern,
@@ -1240,15 +1271,22 @@ var NavbarSimpleLinks = ({
       );
     });
   };
+  const {
+    sectionClasses,
+    containerWrapperClasses,
+    innerContainerClasses,
+    navWrapperClasses,
+    spacingOverride
+  } = getNavbarLayoutClasses(layoutVariant, { className, containerClassName });
   return /* @__PURE__ */ jsxRuntime.jsx(
     Section,
     {
       background,
-      spacing,
-      className: cn(className),
+      spacing: spacingOverride ?? spacing,
+      className: sectionClasses,
       pattern,
       patternOpacity,
-      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("nav", { className: cn("flex items-center justify-between", navClassName), children: [
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: innerContainerClasses, children: /* @__PURE__ */ jsxRuntime.jsxs("nav", { className: cn("flex items-center justify-between", navWrapperClasses, navClassName), children: [
         renderLogo(),
         /* @__PURE__ */ jsxRuntime.jsx(
           NavigationMenu,
@@ -1297,7 +1335,7 @@ var NavbarSimpleLinks = ({
             children: renderActions()
           }
         )
-      ] }) })
+      ] }) }) })
     }
   );
 };

package/dist/navbar-simple-links.d.cts

@@ -2,6 +2,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { P as PatternName } from './pattern-background-a7gKHzHy.cjs';
 import { SectionBackground, SectionSpacing } from './types.cjs';
+import { L as LogoConfig, N as NavbarLayoutVariant } from './types-COVDidbn.cjs';
 import { A as ActionConfig, O as OptixFlowConfig } from './blocks-Cohq4eio.cjs';
 import 'class-variance-authority';
 import './button-variants-lRElsmTc.cjs';
@@ -14,16 +15,6 @@ interface NavItem {
     name: string;
     link: string;
 }
-/**
- * Logo configuration interface
- */
-interface LogoConfig {
-    url?: string;
-    src?: string;
-    alt?: string;
-    title?: React.ReactNode;
-    className?: string;
-}
 /**
  * Props for the NavbarSimpleLinks component
  */
@@ -100,6 +91,10 @@ interface NavbarSimpleLinksProps {
      * Pattern overlay opacity (0-1)
      */
     patternOpacity?: number;
+    /**
+     * Layout variant for the navbar
+     */
+    layoutVariant?: NavbarLayoutVariant;
     /**
      * OptixFlow image optimization configuration
      */
@@ -114,6 +109,6 @@ interface NavbarSimpleLinksProps {
  * with a left border indicator for the active item. Perfect for simple marketing
  * sites and portfolios.
  */
-declare const NavbarSimpleLinks: ({ className, containerClassName, navClassName, navigationMenuClassName, menuListClassName, actionsClassName, logo, logoSlot, logoClassName, navItems, navItemsSlot, defaultActiveItem, actions, actionsSlot, background, spacing, pattern, patternOpacity, optixFlowConfig, }: NavbarSimpleLinksProps) => react_jsx_runtime.JSX.Element;
+declare const NavbarSimpleLinks: ({ className, containerClassName, navClassName, navigationMenuClassName, menuListClassName, actionsClassName, logo, logoSlot, logoClassName, navItems, navItemsSlot, defaultActiveItem, actions, actionsSlot, layoutVariant, background, spacing, pattern, patternOpacity, optixFlowConfig, }: NavbarSimpleLinksProps) => react_jsx_runtime.JSX.Element;
 
 export { NavbarSimpleLinks, type NavbarSimpleLinksProps };