@opensite/ui 0.4.5 → 0.4.6

package/dist/navbar-platform-resources.js

@@ -985,7 +985,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
@@ -1025,8 +1025,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"
           }
         )
@@ -1066,7 +1067,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
@@ -1084,7 +1085,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
@@ -1100,6 +1101,36 @@ var logoPlaceholders = {
 function getLinkUrl(item) {
   return item.href || item.url || "#";
 }
+
+// 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 NavbarPlatformResources = ({
   className,
   containerClassName,
@@ -1115,6 +1146,7 @@ var NavbarPlatformResources = ({
   logoSlot,
   menuLinks,
   actions,
+  layoutVariant = "fullScreenContainerizedLinks",
   background = "white",
   spacing = "none",
   pattern,
@@ -1406,173 +1438,171 @@ var NavbarPlatformResources = ({
       ] }) }, index);
     });
   };
+  const {
+    sectionClasses,
+    containerWrapperClasses,
+    innerContainerClasses,
+    navWrapperClasses,
+    spacingOverride
+  } = getNavbarLayoutClasses(layoutVariant, { className, containerClassName });
   return /* @__PURE__ */ jsx(
     Section,
     {
       background,
-      spacing,
-      className: cn("inset-x-0 top-0 z-20", className),
+      spacing: spacingOverride ?? spacing,
+      className: sectionClasses,
       pattern,
       patternOpacity,
-      children: /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: cn(
-            "container px-4 sm:px-6 md:px-8 lg:px-40 xl:px-52",
-            containerClassName
-          ),
-          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("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,
                       {
-                        children: /* @__PURE__ */ jsx(
-                          NavigationMenuLink,
+                        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,
                           {
-                            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}`
-                    );
-                  })
+                            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(
-                    "hidden items-center gap-4 lg:flex",
+                    "mx-8 mt-auto flex flex-col gap-4 py-12",
                     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

@@ -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
@@ -1095,6 +1095,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,
@@ -1116,6 +1146,7 @@ var NavbarSearchFocused = ({
   authActionsSlot,
   mobileMenuActions,
   mobileMenuActionsSlot,
+  layoutVariant = "fullScreenContainerizedLinks",
   background = "white",
   spacing = "none",
   pattern,
@@ -1211,15 +1242,22 @@ var NavbarSearchFocused = ({
       );
     }) });
   };
+  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 gap-4 py-3 lg:gap-8", navClassName),
@@ -1287,7 +1325,7 @@ var NavbarSearchFocused = ({
             ] })
           ]
         }
-      ) })
+      ) }) })
     }
   );
 };

package/dist/navbar-search-focused.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';
@@ -106,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.
@@ -116,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.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';
@@ -106,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.
@@ -116,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 };