@opensite/ui 0.4.5 → 0.4.6

package/dist/navbar-centered-menu.cjs

@@ -987,7 +987,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
@@ -1027,8 +1027,9 @@ function NavigationMenuTrigger({
         /* @__PURE__ */ jsxRuntime.jsx(
           DynamicIcon,
           {
+            size: 18,
             name: "lucide/chevron-down",
-            className: "relative top-[1px] ml-1 size-2 transition duration-300 group-data-[state=open]:rotate-180",
+            className: "relative top-px opacity-50 transition duration-300 group-data-[state=open]:rotate-180",
             "aria-hidden": "true"
           }
         )
@@ -1062,7 +1063,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
@@ -1157,6 +1158,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 NavigationMenuWithoutViewport = ({
   className,
   children,
@@ -1241,6 +1272,7 @@ var NavbarCenteredMenu = ({
   mobileNavClassName,
   navigationMenuClassName,
   actionsClassName,
+  layoutVariant = "fullScreenContainerizedLinks",
   background = "white",
   spacing = "sm",
   pattern,
@@ -1308,73 +1340,71 @@ var NavbarCenteredMenu = ({
     if (!menu || menu.length === 0) return null;
     return menu.map((item) => renderMobileMenuItem(item));
   };
+  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.jsxs(
-        "div",
-        {
-          className: cn(
-            "container border-b border-border/50 shadow-sm",
-            containerClassName
-          ),
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsxs(
-              "nav",
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(innerContainerClasses, navWrapperClasses), children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "nav",
+          {
+            className: cn("hidden justify-between lg:flex", desktopNavClassName),
+            children: [
+              renderLogo(),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-6", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+                NavigationMenuWithoutViewport,
+                {
+                  className: navigationMenuClassName,
+                  children: /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuList, { className: "relative", children: renderMenu() })
+                }
+              ) }) }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex gap-2", actionsClassName), children: renderAuthActions() })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("block lg:hidden", mobileNavClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+          renderLogo(),
+          /* @__PURE__ */ jsxRuntime.jsxs(Sheet, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(SheetTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+              Pressable,
               {
-                className: cn("hidden justify-between lg:flex", desktopNavClassName),
-                children: [
-                  renderLogo(),
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-6", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center", children: /* @__PURE__ */ jsxRuntime.jsx(
-                    NavigationMenuWithoutViewport,
-                    {
-                      className: navigationMenuClassName,
-                      children: /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuList, { className: "relative", children: renderMenu() })
-                    }
-                  ) }) }),
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex gap-2", actionsClassName), children: renderAuthActions() })
-                ]
+                variant: "outline",
+                size: "icon",
+                asButton: true,
+                onClick: () => {
+                },
+                children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/menu", size: 16 })
               }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("block lg:hidden", mobileNavClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
-              renderLogo(),
-              /* @__PURE__ */ jsxRuntime.jsxs(Sheet, { children: [
-                /* @__PURE__ */ jsxRuntime.jsx(SheetTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-                  Pressable,
+            ) }),
+            /* @__PURE__ */ jsxRuntime.jsxs(SheetContent, { className: "overflow-y-auto", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(SheetHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(SheetTitle, { children: renderLogo() }) }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-6 p-4", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  Accordion,
                   {
-                    variant: "outline",
-                    size: "icon",
-                    asButton: true,
-                    onClick: () => {
-                    },
-                    children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/menu", size: 16 })
+                    type: "single",
+                    collapsible: true,
+                    className: "flex w-full flex-col gap-4",
+                    children: renderMobileMenu()
                   }
-                ) }),
-                /* @__PURE__ */ jsxRuntime.jsxs(SheetContent, { className: "overflow-y-auto", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(SheetHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(SheetTitle, { children: renderLogo() }) }),
-                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-6 p-4", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      Accordion,
-                      {
-                        type: "single",
-                        collapsible: true,
-                        className: "flex w-full flex-col gap-4",
-                        children: renderMobileMenu()
-                      }
-                    ),
-                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col gap-3", actionsClassName), children: renderAuthActions() })
-                  ] })
-                ] })
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col gap-3", actionsClassName), children: renderAuthActions() })
               ] })
-            ] }) })
-          ]
-        }
-      )
+            ] })
+          ] })
+        ] }) })
+      ] }) })
     }
   );
 };

package/dist/navbar-centered-menu.d.cts

@@ -2,7 +2,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { P as PatternName } from './pattern-background-a7gKHzHy.cjs';
 import { SectionBackground, SectionSpacing } from './types.cjs';
-import { L as LogoConfig } from './types-D2b35ylu.cjs';
+import { L as LogoConfig, N as NavbarLayoutVariant } from './types-COVDidbn.cjs';
 import { A as ActionConfig, O as OptixFlowConfig } from './blocks-Cohq4eio.cjs';
 import 'class-variance-authority';
 import './button-variants-lRElsmTc.cjs';
@@ -91,6 +91,10 @@ interface NavbarCenteredMenuProps {
      * Pattern overlay opacity (0-1)
      */
     patternOpacity?: number;
+    /**
+     * Layout variant for the navbar
+     */
+    layoutVariant?: NavbarLayoutVariant;
     /**
      * OptixFlow image optimization configuration
      */
@@ -104,6 +108,6 @@ interface NavbarCenteredMenuProps {
  * slide-out sheet with accordion navigation. The dropdowns are centered under their
  * trigger elements for a balanced visual appearance.
  */
-declare const NavbarCenteredMenu: ({ logo, logoSlot, logoClassName, menu, menuSlot, authActions, authActionsSlot, className, containerClassName, desktopNavClassName, mobileNavClassName, navigationMenuClassName, actionsClassName, background, spacing, pattern, patternOpacity, optixFlowConfig, }: NavbarCenteredMenuProps) => react_jsx_runtime.JSX.Element;
+declare const NavbarCenteredMenu: ({ logo, logoSlot, logoClassName, menu, menuSlot, authActions, authActionsSlot, className, containerClassName, desktopNavClassName, mobileNavClassName, navigationMenuClassName, actionsClassName, layoutVariant, background, spacing, pattern, patternOpacity, optixFlowConfig, }: NavbarCenteredMenuProps) => react_jsx_runtime.JSX.Element;
 
 export { NavbarCenteredMenu, type NavbarCenteredMenuProps };

package/dist/navbar-centered-menu.d.ts

@@ -2,7 +2,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { P as PatternName } from './pattern-background-a7gKHzHy.js';
 import { SectionBackground, SectionSpacing } from './types.js';
-import { L as LogoConfig } from './types-D2b35ylu.js';
+import { L as LogoConfig, N as NavbarLayoutVariant } from './types-COVDidbn.js';
 import { A as ActionConfig, O as OptixFlowConfig } from './blocks-k17uluAz.js';
 import 'class-variance-authority';
 import './button-variants-lRElsmTc.js';
@@ -91,6 +91,10 @@ interface NavbarCenteredMenuProps {
      * Pattern overlay opacity (0-1)
      */
     patternOpacity?: number;
+    /**
+     * Layout variant for the navbar
+     */
+    layoutVariant?: NavbarLayoutVariant;
     /**
      * OptixFlow image optimization configuration
      */
@@ -104,6 +108,6 @@ interface NavbarCenteredMenuProps {
  * slide-out sheet with accordion navigation. The dropdowns are centered under their
  * trigger elements for a balanced visual appearance.
  */
-declare const NavbarCenteredMenu: ({ logo, logoSlot, logoClassName, menu, menuSlot, authActions, authActionsSlot, className, containerClassName, desktopNavClassName, mobileNavClassName, navigationMenuClassName, actionsClassName, background, spacing, pattern, patternOpacity, optixFlowConfig, }: NavbarCenteredMenuProps) => react_jsx_runtime.JSX.Element;
+declare const NavbarCenteredMenu: ({ logo, logoSlot, logoClassName, menu, menuSlot, authActions, authActionsSlot, className, containerClassName, desktopNavClassName, mobileNavClassName, navigationMenuClassName, actionsClassName, layoutVariant, background, spacing, pattern, patternOpacity, optixFlowConfig, }: NavbarCenteredMenuProps) => react_jsx_runtime.JSX.Element;
 
 export { NavbarCenteredMenu, type NavbarCenteredMenuProps };

package/dist/navbar-centered-menu.js

@@ -963,7 +963,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
@@ -1003,8 +1003,9 @@ function NavigationMenuTrigger({
         /* @__PURE__ */ jsx(
           DynamicIcon,
           {
+            size: 18,
             name: "lucide/chevron-down",
-            className: "relative top-[1px] ml-1 size-2 transition duration-300 group-data-[state=open]:rotate-180",
+            className: "relative top-px opacity-50 transition duration-300 group-data-[state=open]:rotate-180",
             "aria-hidden": "true"
           }
         )
@@ -1038,7 +1039,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
@@ -1133,6 +1134,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 NavigationMenuWithoutViewport = ({
   className,
   children,
@@ -1217,6 +1248,7 @@ var NavbarCenteredMenu = ({
   mobileNavClassName,
   navigationMenuClassName,
   actionsClassName,
+  layoutVariant = "fullScreenContainerizedLinks",
   background = "white",
   spacing = "sm",
   pattern,
@@ -1284,73 +1316,71 @@ var NavbarCenteredMenu = ({
     if (!menu || menu.length === 0) return null;
     return menu.map((item) => renderMobileMenuItem(item));
   };
+  const {
+    sectionClasses,
+    containerWrapperClasses,
+    innerContainerClasses,
+    navWrapperClasses,
+    spacingOverride
+  } = getNavbarLayoutClasses(layoutVariant, { className, containerClassName });
   return /* @__PURE__ */ jsx(
     Section,
     {
       background,
-      spacing,
-      className: cn(className),
+      spacing: spacingOverride ?? spacing,
+      className: sectionClasses,
       pattern,
       patternOpacity,
-      children: /* @__PURE__ */ jsxs(
-        "div",
-        {
-          className: cn(
-            "container border-b border-border/50 shadow-sm",
-            containerClassName
-          ),
-          children: [
-            /* @__PURE__ */ jsxs(
-              "nav",
+      children: /* @__PURE__ */ jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsxs("div", { className: cn(innerContainerClasses, navWrapperClasses), children: [
+        /* @__PURE__ */ jsxs(
+          "nav",
+          {
+            className: cn("hidden justify-between lg:flex", desktopNavClassName),
+            children: [
+              renderLogo(),
+              /* @__PURE__ */ jsx("div", { className: "flex items-center gap-6", children: /* @__PURE__ */ jsx("div", { className: "flex items-center", children: /* @__PURE__ */ jsx(
+                NavigationMenuWithoutViewport,
+                {
+                  className: navigationMenuClassName,
+                  children: /* @__PURE__ */ jsx(NavigationMenuList, { className: "relative", children: renderMenu() })
+                }
+              ) }) }),
+              /* @__PURE__ */ jsx("div", { className: cn("flex gap-2", actionsClassName), children: renderAuthActions() })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: cn("block lg:hidden", mobileNavClassName), children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+          renderLogo(),
+          /* @__PURE__ */ jsxs(Sheet, { children: [
+            /* @__PURE__ */ jsx(SheetTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+              Pressable,
               {
-                className: cn("hidden justify-between lg:flex", desktopNavClassName),
-                children: [
-                  renderLogo(),
-                  /* @__PURE__ */ jsx("div", { className: "flex items-center gap-6", children: /* @__PURE__ */ jsx("div", { className: "flex items-center", children: /* @__PURE__ */ jsx(
-                    NavigationMenuWithoutViewport,
-                    {
-                      className: navigationMenuClassName,
-                      children: /* @__PURE__ */ jsx(NavigationMenuList, { className: "relative", children: renderMenu() })
-                    }
-                  ) }) }),
-                  /* @__PURE__ */ jsx("div", { className: cn("flex gap-2", actionsClassName), children: renderAuthActions() })
-                ]
+                variant: "outline",
+                size: "icon",
+                asButton: true,
+                onClick: () => {
+                },
+                children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/menu", size: 16 })
               }
-            ),
-            /* @__PURE__ */ jsx("div", { className: cn("block lg:hidden", mobileNavClassName), children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-              renderLogo(),
-              /* @__PURE__ */ jsxs(Sheet, { children: [
-                /* @__PURE__ */ jsx(SheetTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
-                  Pressable,
+            ) }),
+            /* @__PURE__ */ jsxs(SheetContent, { className: "overflow-y-auto", children: [
+              /* @__PURE__ */ jsx(SheetHeader, { children: /* @__PURE__ */ jsx(SheetTitle, { children: renderLogo() }) }),
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6 p-4", children: [
+                /* @__PURE__ */ jsx(
+                  Accordion,
                   {
-                    variant: "outline",
-                    size: "icon",
-                    asButton: true,
-                    onClick: () => {
-                    },
-                    children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/menu", size: 16 })
+                    type: "single",
+                    collapsible: true,
+                    className: "flex w-full flex-col gap-4",
+                    children: renderMobileMenu()
                   }
-                ) }),
-                /* @__PURE__ */ jsxs(SheetContent, { className: "overflow-y-auto", children: [
-                  /* @__PURE__ */ jsx(SheetHeader, { children: /* @__PURE__ */ jsx(SheetTitle, { children: renderLogo() }) }),
-                  /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6 p-4", children: [
-                    /* @__PURE__ */ jsx(
-                      Accordion,
-                      {
-                        type: "single",
-                        collapsible: true,
-                        className: "flex w-full flex-col gap-4",
-                        children: renderMobileMenu()
-                      }
-                    ),
-                    /* @__PURE__ */ jsx("div", { className: cn("flex flex-col gap-3", actionsClassName), children: renderAuthActions() })
-                  ] })
-                ] })
+                ),
+                /* @__PURE__ */ jsx("div", { className: cn("flex flex-col gap-3", actionsClassName), children: renderAuthActions() })
               ] })
-            ] }) })
-          ]
-        }
-      )
+            ] })
+          ] })
+        ] }) })
+      ] }) })
     }
   );
 };

package/dist/navbar-dark-icons.cjs

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

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

@@ -2,7 +2,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { P as PatternName } from './pattern-background-a7gKHzHy.cjs';
 import { SectionBackground, SectionSpacing } from './types.cjs';
-import { L as LogoConfig } from './types-D2b35ylu.cjs';
+import { L as LogoConfig, N as NavbarLayoutVariant } from './types-COVDidbn.cjs';
 import { A as ActionConfig, O as OptixFlowConfig } from './blocks-Cohq4eio.cjs';
 import 'class-variance-authority';
 import './button-variants-lRElsmTc.cjs';
@@ -97,6 +97,10 @@ interface NavbarDarkIconsProps {
      * Pattern overlay opacity (0-1)
      */
     patternOpacity?: number;
+    /**
+     * Layout variant for the navbar
+     */
+    layoutVariant?: NavbarLayoutVariant;
     /**
      * OptixFlow image optimization configuration
      */
@@ -110,6 +114,6 @@ interface NavbarDarkIconsProps {
  * view uses a full-screen dark sheet with accordion navigation. Ideal for developer
  * tools, open-source projects, and tech-focused applications.
  */
-declare const NavbarDarkIcons: ({ className, containerClassName, navClassName, navigationMenuClassName, actionsClassName, logo, logoSlot, logoClassName, navigation, navigationSlot, authActions, authActionsSlot, githubUrl, githubSlot, background, spacing, pattern, patternOpacity, optixFlowConfig, }: NavbarDarkIconsProps) => react_jsx_runtime.JSX.Element;
+declare const NavbarDarkIcons: ({ className, containerClassName, navClassName, navigationMenuClassName, actionsClassName, logo, logoSlot, logoClassName, navigation, navigationSlot, authActions, authActionsSlot, githubUrl, githubSlot, layoutVariant, background, spacing, pattern, patternOpacity, optixFlowConfig, }: NavbarDarkIconsProps) => react_jsx_runtime.JSX.Element;
 
 export { NavbarDarkIcons, type NavbarDarkIconsProps };

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

@@ -2,7 +2,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { P as PatternName } from './pattern-background-a7gKHzHy.js';
 import { SectionBackground, SectionSpacing } from './types.js';
-import { L as LogoConfig } from './types-D2b35ylu.js';
+import { L as LogoConfig, N as NavbarLayoutVariant } from './types-COVDidbn.js';
 import { A as ActionConfig, O as OptixFlowConfig } from './blocks-k17uluAz.js';
 import 'class-variance-authority';
 import './button-variants-lRElsmTc.js';
@@ -97,6 +97,10 @@ interface NavbarDarkIconsProps {
      * Pattern overlay opacity (0-1)
      */
     patternOpacity?: number;
+    /**
+     * Layout variant for the navbar
+     */
+    layoutVariant?: NavbarLayoutVariant;
     /**
      * OptixFlow image optimization configuration
      */
@@ -110,6 +114,6 @@ interface NavbarDarkIconsProps {
  * view uses a full-screen dark sheet with accordion navigation. Ideal for developer
  * tools, open-source projects, and tech-focused applications.
  */
-declare const NavbarDarkIcons: ({ className, containerClassName, navClassName, navigationMenuClassName, actionsClassName, logo, logoSlot, logoClassName, navigation, navigationSlot, authActions, authActionsSlot, githubUrl, githubSlot, background, spacing, pattern, patternOpacity, optixFlowConfig, }: NavbarDarkIconsProps) => react_jsx_runtime.JSX.Element;
+declare const NavbarDarkIcons: ({ className, containerClassName, navClassName, navigationMenuClassName, actionsClassName, logo, logoSlot, logoClassName, navigation, navigationSlot, authActions, authActionsSlot, githubUrl, githubSlot, layoutVariant, background, spacing, pattern, patternOpacity, optixFlowConfig, }: NavbarDarkIconsProps) => react_jsx_runtime.JSX.Element;
 
 export { NavbarDarkIcons, type NavbarDarkIconsProps };