@opensite/ui 0.4.2 → 0.4.4

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

@@ -1,40 +1,36 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
-import { P as PatternName } from './pattern-background-z0e5HB0v.js';
+import { P as PatternName } from './pattern-background-a7gKHzHy.js';
 import { SectionBackground, SectionSpacing } from './types.js';
-import { A as ActionConfig, O as OptixFlowConfig } from './blocks-BWc_7JNA.js';
-import './patternSvgs-c5ZNVoTT.js';
+import { A as ActionConfig, O as OptixFlowConfig } from './blocks-k17uluAz.js';
 import 'class-variance-authority';
-import './button-variants-DJbzb6lO.js';
+import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
 
 /**
- * Base link item for animated image preview layout
+ * SHARED TYPE INTERFACES FOR ALL NAVBAR COMPONENTS
+ * These types provide a consistent interface across all navbar blocks
+ */
+/**
+ * Base link item - used across all navbar components
  */
 interface ILinkItem {
-    label: string;
-    description?: string;
+    label: React.ReactNode;
+    description?: React.ReactNode;
     url: string;
+    icon?: React.ReactNode;
+    iconName?: string;
     image?: string;
+    background?: string;
 }
 /**
- * Grid item with icon or image
+ * Group of links with optional metadata
  */
-interface IGridItem {
-    title: string;
+interface IMenuLinkGroup {
+    label: React.ReactNode;
     description?: string;
-    href: string;
-    icon?: string;
-    imgUrl?: string;
-}
-/**
- * Simple list item with icon
- */
-interface IListItem {
-    title: string;
-    description?: string;
-    href: string;
-    icon?: string;
+    image?: string;
+    links: ILinkItem[];
 }
 /**
  * Layout types for mega menu dropdowns
@@ -52,14 +48,14 @@ interface IListItem {
  *    - Visual: 2-column responsive grid of cards with icons or images
  *    - Behavior: Static grid with hover effects on cards
  *    - Best for: Feature lists, service offerings, general navigation with icons
- *    - Required data: gridItems[] with title, description, href, icon OR imgUrl
+ *    - Required data: links[] with label, description, url, icon/iconName OR image
  *    - Example use case: Features menu showing analytics, reports, dashboards with icons
  *
  * 3. "list-with-icons"
  *    - Visual: Single column list of items with small icons on the left
  *    - Behavior: Compact list with hover effects
  *    - Best for: Simple navigation, documentation links, resource lists
- *    - Required data: listItems[] with title, description (optional), href, icon
+ *    - Required data: links[] with label, description (optional), url, icon/iconName
  *    - Example use case: Resources menu with documentation, API reference, guides
  */
 type MegaMenuLayout = "animated-image-preview" | "simple-grid" | "list-with-icons";
@@ -67,12 +63,11 @@ type MegaMenuLayout = "animated-image-preview" | "simple-grid" | "list-with-icon
  * Menu link configuration with layout-based dropdown options
  */
 interface IMenuLink {
-    title: string;
-    url?: string;
+    label: React.ReactNode;
+    href?: string;
     layout?: MegaMenuLayout;
     links?: ILinkItem[];
-    gridItems?: IGridItem[];
-    listItems?: IListItem[];
+    dropdownGroups?: IMenuLinkGroup[];
 }
 /**
  * Logo configuration interface
@@ -143,7 +138,7 @@ interface NavbarMegaMenuProps {
     /**
      * Optional background pattern name or URL
      */
-    pattern?: PatternName | string;
+    pattern?: PatternName | undefined;
     /**
      * Pattern overlay opacity (0-1)
      */
@@ -163,4 +158,4 @@ interface NavbarMegaMenuProps {
  */
 declare const NavbarMegaMenu: ({ className, containerClassName, navClassName, navigationMenuListClassName, actionsClassName, logoClassName, mobileMenuClassName, logo, logoSlot, menuLinks, actions, background, spacing, pattern, patternOpacity, optixFlowConfig, }: NavbarMegaMenuProps) => react_jsx_runtime.JSX.Element;
 
-export { type IGridItem, type ILinkItem, type IListItem, type IMenuLink, type MegaMenuLayout, NavbarMegaMenu, type NavbarMegaMenuProps };
+export { type ILinkItem, type IMenuLink, type IMenuLinkGroup, type LogoConfig, type MegaMenuLayout, NavbarMegaMenu, type NavbarMegaMenuProps };

package/dist/navbar-mega-menu.js

@@ -861,6 +861,7 @@ var Section = React__default.forwardRef(
     patternClassName,
     ...props
   }, ref) => {
+    const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
     return /* @__PURE__ */ jsxs(
       "section",
       {
@@ -880,7 +881,7 @@ var Section = React__default.forwardRef(
             PatternBackground,
             {
               pattern,
-              opacity: patternOpacity,
+              opacity: effectivePatternOpacity,
               className: patternClassName
             }
           ),
@@ -929,7 +930,7 @@ function NavigationMenuList({
     {
       "data-slot": "navigation-menu-list",
       className: cn(
-        "group flex flex-1 list-none items-center justify-center gap-1",
+        "group flex flex-1 list-none items-center justify-center gap-6",
         className
       ),
       ...props
@@ -950,7 +951,7 @@ function NavigationMenuItem({
   );
 }
 var navigationMenuTriggerStyle = cva(
-  "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1"
+  "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium text-foreground/80 hover:bg-muted hover:text-foreground focus:bg-muted focus:text-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-muted data-[state=open]:text-foreground data-[state=open]:focus:bg-muted data-[state=open]:bg-muted/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1"
 );
 function NavigationMenuTrigger({
   className,
@@ -970,7 +971,7 @@ function NavigationMenuTrigger({
           DynamicIcon,
           {
             name: "lucide/chevron-down",
-            className: "relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180",
+            className: "relative top-[1px] ml-1 size-2.5 transition duration-300 group-data-[state=open]:rotate-180",
             "aria-hidden": "true"
           }
         )
@@ -1028,19 +1029,18 @@ function NavigationMenuLink({
     {
       "data-slot": "navigation-menu-link",
       className: cn(
-        "data-[active=true]:focus:bg-accent data-[active=true]:hover:bg-accent data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-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",
+        "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",
         className
       ),
       ...props
     }
   );
 }
-
-// lib/mediaPlaceholders.ts
-var logoPlaceholders = {
-  logoMark: "https://cdn.ing/assets/i/r/285975/eud79qeya11q5w6ueyhklueardyx/monochrome-rounded-square-app-icon-circular-emblem.png",
-  darkHorizontalLogo: "https://cdn.ing/assets/i/r/285986/5ivxh3ivywsmm6uslf3te38r6tg1/logo-dark.png"};
-var DesktopMenuItem = ({ link, index, optixFlowConfig }) => {
+var DesktopMenuItem = ({
+  link,
+  index,
+  optixFlowConfig
+}) => {
   const imagesRef = React.useRef([]);
   const layout = link.layout || "simple-grid";
   const handleMouseEnter = (event) => {
@@ -1063,7 +1063,7 @@ var DesktopMenuItem = ({ link, index, optixFlowConfig }) => {
   };
   if (layout === "animated-image-preview" && link.links) {
     return /* @__PURE__ */ jsxs(NavigationMenuItem, { children: [
-      /* @__PURE__ */ jsx(NavigationMenuTrigger, { className: "bg-transparent px-0 hover:bg-transparent focus:bg-transparent data-[state=open]:bg-transparent h-fit font-normal text-foreground/60", children: link.title }),
+      /* @__PURE__ */ jsx(NavigationMenuTrigger, { className: "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", children: link.label }),
       /* @__PURE__ */ jsx(NavigationMenuContent, { className: "!rounded-2xl !p-0", children: /* @__PURE__ */ jsxs("div", { className: "grid min-h-[18.75rem] w-[45.25rem] grid-cols-[22.5rem_1fr] gap-4 p-3", children: [
         /* @__PURE__ */ jsx("div", { className: "relative aspect-square w-full overflow-hidden rounded-xl", children: link.links.map((item, idx) => /* @__PURE__ */ jsx(
           Img,
@@ -1074,7 +1074,7 @@ var DesktopMenuItem = ({ link, index, optixFlowConfig }) => {
               }
             },
             src: item.image || "",
-            alt: item.label,
+            alt: typeof item.label === "string" ? item.label : "Menu item",
             className: cn(
               "absolute top-0 left-0 h-full w-full object-cover transition-opacity duration-300",
               idx === 0 ? "opacity-100" : "opacity-0"
@@ -1084,7 +1084,7 @@ var DesktopMenuItem = ({ link, index, optixFlowConfig }) => {
           idx
         )) }),
         /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx("div", { className: "p-4 leading-normal font-bold", children: link.title }),
+          /* @__PURE__ */ jsx("div", { className: "p-4 leading-normal font-bold", children: link.label }),
           /* @__PURE__ */ jsx("ul", { children: link.links.map((item, idx) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
             NavigationMenuLink,
             {
@@ -1103,59 +1103,72 @@ var DesktopMenuItem = ({ link, index, optixFlowConfig }) => {
       ] }) })
     ] }, `desktop-menu-item-${index}`);
   }
-  if (layout === "simple-grid" && link.gridItems) {
+  if (layout === "simple-grid" && link.links) {
     return /* @__PURE__ */ jsxs(NavigationMenuItem, { children: [
-      /* @__PURE__ */ jsx(NavigationMenuTrigger, { className: "bg-transparent px-0 hover:bg-transparent focus:bg-transparent data-[state=open]:bg-transparent h-fit font-normal text-foreground/60", children: link.title }),
-      /* @__PURE__ */ jsx(NavigationMenuContent, { className: "min-w-[520px] p-6", children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2", children: link.gridItems.map((item, itemIndex) => /* @__PURE__ */ jsxs(
+      /* @__PURE__ */ jsx(NavigationMenuTrigger, { className: "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", children: link.label }),
+      /* @__PURE__ */ jsx(NavigationMenuContent, { className: "min-w-[520px] p-6", children: /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2", children: link.links.map((item, itemIndex) => /* @__PURE__ */ jsxs(
         NavigationMenuLink,
         {
-          href: item.href,
-          className: "flex flex-row items-start gap-4 rounded-lg border border-input bg-background p-4 hover:bg-accent hover:text-accent-foreground",
+          href: item.url,
+          className: "flex flex-row items-start gap-4 rounded-lg border border-input bg-background p-4 hover:bg-muted hover:text-foreground",
           children: [
-            item.imgUrl && /* @__PURE__ */ jsx("div", { className: "h-12 w-12 overflow-hidden rounded-md border border-border", children: /* @__PURE__ */ jsx(
+            item.image && /* @__PURE__ */ jsx("div", { className: "h-16 w-16 shrink-0 overflow-hidden rounded-md border border-border", children: /* @__PURE__ */ jsx(
               Img,
               {
-                src: item.imgUrl,
-                alt: item.title,
+                src: item.image,
+                alt: typeof item.label === "string" ? item.label : "Menu item",
                 className: "h-full w-full object-cover object-center",
                 optixFlowConfig
               }
             ) }),
-            !item.imgUrl && item.icon && /* @__PURE__ */ jsx("div", { className: "flex h-12 w-12 items-center justify-center rounded-md border border-border bg-muted/40 text-muted-foreground", children: /* @__PURE__ */ jsx(DynamicIcon, { name: item.icon, size: 18 }) }),
+            !item.image && (item.icon || item.iconName) && /* @__PURE__ */ jsx("div", { className: "flex h-16 w-16 shrink-0 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: 20 }) : null }),
             /* @__PURE__ */ jsxs("div", { children: [
-              /* @__PURE__ */ jsx("div", { className: "text-base", children: item.title }),
+              /* @__PURE__ */ jsx("div", { className: "text-sm font-medium", children: item.label }),
               item.description && /* @__PURE__ */ jsx("div", { className: "text-sm font-normal text-muted-foreground", children: item.description })
             ] })
           ]
         },
-        `${item.title}-${itemIndex}`
+        `grid-item-${itemIndex}`
       )) }) })
     ] }, `desktop-menu-item-${index}`);
   }
-  if (layout === "list-with-icons" && link.listItems) {
+  if (layout === "list-with-icons" && link.links) {
     return /* @__PURE__ */ jsxs(NavigationMenuItem, { children: [
-      /* @__PURE__ */ jsx(NavigationMenuTrigger, { className: "bg-transparent px-0 hover:bg-transparent focus:bg-transparent data-[state=open]:bg-transparent h-fit font-normal text-foreground/60", children: link.title }),
-      /* @__PURE__ */ jsx(NavigationMenuContent, { className: "min-w-[400px] p-4", children: /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-1", children: link.listItems.map((item, itemIndex) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+      /* @__PURE__ */ jsx(NavigationMenuTrigger, { className: "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", children: link.label }),
+      /* @__PURE__ */ jsx(NavigationMenuContent, { className: "min-w-[400px] p-4", children: /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-1", children: link.links.map((item, itemIndex) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
         NavigationMenuLink,
         {
-          href: item.href,
+          href: item.url,
           className: "flex items-start gap-3 rounded-lg p-3 hover:bg-muted",
           children: [
-            item.icon && /* @__PURE__ */ jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-md bg-muted/40 text-muted-foreground", children: /* @__PURE__ */ jsx(DynamicIcon, { name: item.icon, size: 16 }) }),
+            (item.icon || item.iconName) && /* @__PURE__ */ jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-md 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", children: item.title }),
+              /* @__PURE__ */ jsx("div", { className: "text-sm font-medium", children: item.label }),
               item.description && /* @__PURE__ */ jsx("div", { className: "text-xs text-muted-foreground", children: item.description })
             ] })
           ]
         }
-      ) }, `${item.title}-${itemIndex}`)) }) })
+      ) }, `list-item-${itemIndex}`)) }) })
     ] }, `desktop-menu-item-${index}`);
   }
+  if (link.href) {
+    return /* @__PURE__ */ jsx(NavigationMenuItem, { children: /* @__PURE__ */ jsx(
+      NavigationMenuLink,
+      {
+        href: link.href,
+        className: "inline-flex h-auto items-center justify-center px-0 py-0 text-sm font-normal text-foreground/60 transition-colors hover:text-foreground focus:text-foreground",
+        children: link.label
+      }
+    ) }, `desktop-menu-item-${index}`);
+  }
   return null;
 };
-var MobileSubmenu = ({ submenu, mobileMenuClassName, optixFlowConfig }) => {
-  submenu.layout || "simple-grid";
-  const items = submenu.links || submenu.gridItems || submenu.listItems || [];
+var MobileSubmenu = ({
+  submenu,
+  mobileMenuClassName,
+  optixFlowConfig
+}) => {
+  const items = submenu.links || [];
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -1164,36 +1177,31 @@ var MobileSubmenu = ({ submenu, mobileMenuClassName, optixFlowConfig }) => {
         mobileMenuClassName
       ),
       children: [
-        /* @__PURE__ */ jsx("div", { className: "px-8 py-3.5 text-xs tracking-widest text-muted-foreground uppercase", children: submenu.title }),
+        /* @__PURE__ */ jsx("div", { className: "px-8 py-3.5 text-xs tracking-widest text-muted-foreground uppercase", children: submenu.label }),
         items.map((item, index) => {
-          const title = item.title || item.label;
-          const href = item.href || item.url;
-          const description = item.description;
-          const icon = item.icon || item.iconName;
-          const imgUrl = item.imgUrl || item.image;
           return /* @__PURE__ */ jsxs(
             Pressable,
             {
-              href,
+              href: item.url,
               className: "flex items-start gap-4 border-b border-border px-8 py-5",
               children: [
-                imgUrl && /* @__PURE__ */ jsx("div", { className: "h-10 w-10 overflow-hidden rounded-md border border-border", children: /* @__PURE__ */ jsx(
+                item.image && /* @__PURE__ */ jsx("div", { className: "h-10 w-10 overflow-hidden rounded-md border border-border", children: /* @__PURE__ */ jsx(
                   Img,
                   {
-                    src: imgUrl,
-                    alt: title,
+                    src: item.image,
+                    alt: typeof item.label === "string" ? item.label : "Menu item",
                     className: "h-full w-full object-cover object-center",
                     optixFlowConfig
                   }
                 ) }),
-                !imgUrl && icon && /* @__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: /* @__PURE__ */ jsx(DynamicIcon, { name: icon, size: 16 }) }),
+                !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", { children: [
-                  /* @__PURE__ */ jsx("div", { className: "text-base", children: title }),
-                  description && /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground", children: description })
+                  /* @__PURE__ */ jsx("div", { className: "text-base", children: item.label }),
+                  item.description && /* @__PURE__ */ jsx("div", { className: "text-sm text-muted-foreground", children: item.description })
                 ] })
               ]
             },
-            `${title}-${index}`
+            `mobile-item-${index}`
           );
         })
       ]
@@ -1209,9 +1217,7 @@ var NavbarMegaMenu = ({
   logoClassName,
   mobileMenuClassName,
   logo = {
-    url: "/",
-    desktopSrc: logoPlaceholders.darkHorizontalLogo,
-    mobileSrc: logoPlaceholders.logoMark
+    url: "/"
   },
   logoSlot,
   menuLinks,
@@ -1237,7 +1243,7 @@ var NavbarMegaMenu = ({
           /* @__PURE__ */ jsx(
             Img,
             {
-              src: logo.desktopSrc || logoPlaceholders.darkHorizontalLogo,
+              src: logo.desktopSrc,
               className: cn("hidden h-7 dark:invert md:block", logo.className),
               alt: logo.alt || "Logo",
               optixFlowConfig
@@ -1246,7 +1252,7 @@ var NavbarMegaMenu = ({
           /* @__PURE__ */ jsx(
             Img,
             {
-              src: logo.mobileSrc || logoPlaceholders.logoMark,
+              src: logo.mobileSrc,
               className: cn("h-7 dark:invert md:hidden", logo.className),
               alt: logo.alt || "Logo",
               optixFlowConfig
@@ -1256,7 +1262,7 @@ var NavbarMegaMenu = ({
       }
     );
   };
-  const hasDropdownItems = (link) => Boolean(link.links?.length || link.gridItems?.length || link.listItems?.length);
+  const hasDropdownItems = (link) => Boolean(link.links?.length || link.dropdownGroups?.length);
   const renderActions = () => {
     if (!actions || actions.length === 0) return null;
     return actions.map((action, index) => {
@@ -1327,20 +1333,20 @@ var NavbarMegaMenu = ({
                           index,
                           optixFlowConfig
                         },
-                        `${link.title}-${index}`
+                        `menu-link-${index}`
                       );
                     }
-                    if (!link.url) {
+                    if (!link.href) {
                       return null;
                     }
                     return /* @__PURE__ */ jsx(NavigationMenuItem, { children: /* @__PURE__ */ jsx(
                       NavigationMenuLink,
                       {
-                        href: link.url,
-                        className: "group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-muted hover:text-accent-foreground",
-                        children: link.title
+                        href: link.href,
+                        className: "inline-flex h-auto items-center justify-center px-0 py-0 text-sm font-normal text-foreground/60 transition-colors hover:text-foreground focus:text-foreground",
+                        children: link.label
                       }
-                    ) }, `${link.title}-${index}`);
+                    ) }, `menu-link-${index}`);
                   })
                 }
               ),
@@ -1393,24 +1399,24 @@ var NavbarMegaMenu = ({
                           className: "flex w-full items-center border-b border-border px-8 py-7 text-left",
                           onClick: () => setSubmenuIndex(index),
                           children: [
-                            /* @__PURE__ */ jsx("span", { className: "flex-1", children: link.title }),
+                            /* @__PURE__ */ jsx("span", { className: "flex-1", children: link.label }),
                             /* @__PURE__ */ jsx("span", { className: "shrink-0", children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/chevron-right", size: 16 }) })
                           ]
                         },
-                        `${link.title}-${index}`
+                        `mobile-menu-link-${index}`
                       );
                     }
-                    if (!link.url) {
+                    if (!link.href) {
                       return null;
                     }
                     return /* @__PURE__ */ jsx(
                       Pressable,
                       {
-                        href: link.url,
+                        href: link.href,
                         className: "flex w-full items-center border-b border-border px-8 py-7 text-left",
-                        children: /* @__PURE__ */ jsx("span", { className: "flex-1", children: link.title })
+                        children: /* @__PURE__ */ jsx("span", { className: "flex-1", children: link.label })
                       },
-                      `${link.title}-${index}`
+                      `mobile-menu-link-${index}`
                     );
                   }) }),
                   /* @__PURE__ */ jsx(

package/dist/navbar-multi-column-groups.cjs

@@ -887,6 +887,7 @@ var Section = React__namespace.default.forwardRef(
     patternClassName,
     ...props
   }, ref) => {
+    const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "section",
       {
@@ -906,7 +907,7 @@ var Section = React__namespace.default.forwardRef(
             PatternBackground,
             {
               pattern,
-              opacity: patternOpacity,
+              opacity: effectivePatternOpacity,
               className: patternClassName
             }
           ),
@@ -1009,7 +1010,7 @@ function NavigationMenuList({
     {
       "data-slot": "navigation-menu-list",
       className: cn(
-        "group flex flex-1 list-none items-center justify-center gap-1",
+        "group flex flex-1 list-none items-center justify-center gap-6",
         className
       ),
       ...props
@@ -1030,7 +1031,7 @@ function NavigationMenuItem({
   );
 }
 var navigationMenuTriggerStyle = classVarianceAuthority.cva(
-  "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1"
+  "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium text-foreground/80 hover:bg-muted hover:text-foreground focus:bg-muted focus:text-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-muted data-[state=open]:text-foreground data-[state=open]:focus:bg-muted data-[state=open]:bg-muted/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1"
 );
 function NavigationMenuTrigger({
   className,
@@ -1050,7 +1051,7 @@ function NavigationMenuTrigger({
           DynamicIcon,
           {
             name: "lucide/chevron-down",
-            className: "relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180",
+            className: "relative top-[1px] ml-1 size-2.5 transition duration-300 group-data-[state=open]:rotate-180",
             "aria-hidden": "true"
           }
         )
@@ -1108,7 +1109,7 @@ function NavigationMenuLink({
     {
       "data-slot": "navigation-menu-link",
       className: cn(
-        "data-[active=true]:focus:bg-accent data-[active=true]:hover:bg-accent data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-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",
+        "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",
         className
       ),
       ...props
@@ -1277,7 +1278,14 @@ var NavbarMultiColumnGroups = ({
     if (authActionsSlot) return authActionsSlot;
     if (!authActions || authActions.length === 0) return null;
     return authActions.map((action, index) => {
-      const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
+      const {
+        label,
+        icon,
+        iconAfter,
+        children,
+        className: actionClassName,
+        ...pressableProps
+      } = action;
       return /* @__PURE__ */ jsxRuntime.jsx(
         Pressable,
         {
@@ -1306,37 +1314,62 @@ var NavbarMultiColumnGroups = ({
       pattern,
       patternOpacity,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center justify-between gap-8", navClassName), children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-8", children: [
-            renderLogo(),
-            /* @__PURE__ */ jsxRuntime.jsx(NavigationMenu, { className: cn("hidden xl:flex", navigationMenuClassName), viewport: false, children: renderNavigation() })
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("hidden items-center gap-3 xl:flex", actionsClassName), children: renderAuthActions() }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "xl:hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
-            Pressable,
-            {
-              className: "size-11",
-              variant: "ghost",
-              asButton: true,
-              onClick: handleMobileMenu,
-              children: open ? /* @__PURE__ */ jsxRuntime.jsx(
-                DynamicIcon,
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              "flex items-center justify-between gap-8",
+              navClassName
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-8", children: [
+                renderLogo(),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  NavigationMenu,
+                  {
+                    className: cn("hidden xl:flex", navigationMenuClassName),
+                    viewport: false,
+                    children: renderNavigation()
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
                 {
-                  name: "lucide/x",
-                  size: 22,
-                  className: "stroke-foreground"
+                  className: cn(
+                    "hidden items-center gap-3 xl:flex",
+                    actionsClassName
+                  ),
+                  children: renderAuthActions()
                 }
-              ) : /* @__PURE__ */ jsxRuntime.jsx(
-                DynamicIcon,
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "xl:hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
+                Pressable,
                 {
-                  name: "lucide/menu",
-                  size: 22,
-                  className: "stroke-foreground"
+                  className: "size-11",
+                  variant: "ghost",
+                  asButton: true,
+                  onClick: handleMobileMenu,
+                  children: open ? /* @__PURE__ */ jsxRuntime.jsx(
+                    DynamicIcon,
+                    {
+                      name: "lucide/x",
+                      size: 22,
+                      className: "stroke-foreground"
+                    }
+                  ) : /* @__PURE__ */ jsxRuntime.jsx(
+                    DynamicIcon,
+                    {
+                      name: "lucide/menu",
+                      size: 22,
+                      className: "stroke-foreground"
+                    }
+                  )
                 }
-              )
-            }
-          ) })
-        ] }) }),
+              ) })
+            ]
+          }
+        ) }),
         /* @__PURE__ */ jsxRuntime.jsx(
           MobileNavigationMenu,
           {
@@ -1399,7 +1432,14 @@ var MobileNavigationMenu = ({
     if (authActionsSlot) return authActionsSlot;
     if (!authActions || authActions.length === 0) return null;
     return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-4", children: authActions.map((action, index) => {
-      const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
+      const {
+        label,
+        icon,
+        iconAfter,
+        children,
+        className: actionClassName,
+        ...pressableProps
+      } = action;
       return /* @__PURE__ */ jsxRuntime.jsx(
         Pressable,
         {

package/dist/navbar-multi-column-groups.d.cts

@@ -1,11 +1,10 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
-import { P as PatternName } from './pattern-background-BXRgbd05.cjs';
+import { P as PatternName } from './pattern-background-a7gKHzHy.cjs';
 import { SectionBackground, SectionSpacing } from './types.cjs';
-import { A as ActionConfig, O as OptixFlowConfig } from './blocks-CJYRLpXR.cjs';
-import './patternSvgs-c5ZNVoTT.cjs';
+import { A as ActionConfig, O as OptixFlowConfig } from './blocks-Cohq4eio.cjs';
 import 'class-variance-authority';
-import './button-variants-DJbzb6lO.cjs';
+import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';
 
 interface MenuLink {
@@ -105,7 +104,7 @@ interface NavbarMultiColumnGroupsProps {
     /**
      * Optional background pattern name or URL
      */
-    pattern?: PatternName | string;
+    pattern?: PatternName | undefined;
     /**
      * Pattern overlay opacity (0-1)
      */