@opensite/ui 0.4.2 → 0.4.4

package/dist/navbar-image-preview.js

@@ -862,6 +862,7 @@ var Section = React__default.forwardRef(
     patternClassName,
     ...props
   }, ref) => {
+    const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
     return /* @__PURE__ */ jsxs(
       "section",
       {
@@ -881,7 +882,7 @@ var Section = React__default.forwardRef(
             PatternBackground,
             {
               pattern,
-              opacity: patternOpacity,
+              opacity: effectivePatternOpacity,
               className: patternClassName
             }
           ),
@@ -930,7 +931,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
@@ -951,7 +952,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,
@@ -971,7 +972,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"
           }
         )
@@ -1029,7 +1030,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
@@ -1336,7 +1337,14 @@ var NavbarImagePreview = ({
     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__ */ jsx(
         Pressable,
         {
@@ -1370,26 +1378,41 @@ var NavbarImagePreview = ({
               containerClassName
             ),
             ref: navRef,
-            children: /* @__PURE__ */ jsx("div", { className: "container border-b", children: /* @__PURE__ */ jsxs("div", { className: cn("flex items-center justify-between gap-3.5 py-5", navClassName), children: [
-              renderLogo(),
-              /* @__PURE__ */ jsx(NavigationMenu, { className: cn(
-                "hidden lg:flex [&>div:nth-child(2)]:left-1/2 [&>div:nth-child(2)]:-translate-x-1/2",
-                navigationMenuClassName
-              ), children: renderNavigation() }),
-              /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-3.5", actionsClassName), children: [
-                renderAuthActions(),
-                /* @__PURE__ */ jsx("div", { className: "lg:hidden", children: /* @__PURE__ */ jsx(
-                  Pressable,
-                  {
-                    variant: "ghost",
-                    size: "icon",
-                    asButton: true,
-                    onClick: handleMobileMenu,
-                    children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/menu", size: 22 })
-                  }
-                ) })
-              ] })
-            ] }) })
+            children: /* @__PURE__ */ jsx("div", { className: "container border-b", children: /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: cn(
+                  "flex items-center justify-between gap-3.5 py-5",
+                  navClassName
+                ),
+                children: [
+                  renderLogo(),
+                  /* @__PURE__ */ jsx(
+                    NavigationMenu,
+                    {
+                      className: cn(
+                        "hidden lg:flex [&>div:nth-child(2)]:left-1/2 [&>div:nth-child(2)]:-translate-x-1/2",
+                        navigationMenuClassName
+                      ),
+                      children: renderNavigation()
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-3.5", actionsClassName), children: [
+                    renderAuthActions(),
+                    /* @__PURE__ */ jsx("div", { className: "lg:hidden", children: /* @__PURE__ */ jsx(
+                      Pressable,
+                      {
+                        variant: "ghost",
+                        size: "icon",
+                        asButton: true,
+                        onClick: handleMobileMenu,
+                        children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/menu", size: 22 })
+                      }
+                    ) })
+                  ] })
+                ]
+              }
+            ) })
           }
         ),
         /* @__PURE__ */ jsx(
@@ -1435,7 +1458,7 @@ var DesktopMenuItem = ({
   };
   if (item.links) {
     return /* @__PURE__ */ jsxs(NavigationMenuItem, { value: `${index}`, children: [
-      /* @__PURE__ */ jsx(NavigationMenuTrigger, { className: "bg-transparent", children: item.title }),
+      /* @__PURE__ */ jsx(NavigationMenuTrigger, { className: "bg-transparent px-3 py-2 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: item.title }),
       /* @__PURE__ */ jsx(NavigationMenuContent, { className: "rounded-2xl! p-0!", children: /* @__PURE__ */ jsxs("div", { className: "grid min-h-75 w-181 grid-cols-[22.5rem_1fr] gap-4 p-3", children: [
         /* @__PURE__ */ jsx("div", { className: "relative aspect-square w-full overflow-hidden rounded-xl", children: item.links.map((link, linkIndex) => /* @__PURE__ */ jsx(
           Img,
@@ -1476,7 +1499,7 @@ var DesktopMenuItem = ({
     NavigationMenuItem,
     {
       value: `${index}`,
-      className: `${navigationMenuTriggerStyle()} bg-transparent`,
+      className: `${navigationMenuTriggerStyle()} bg-transparent text-foreground/80 hover:bg-muted hover:text-foreground`,
       children: /* @__PURE__ */ jsx(NavigationMenuLink, { href: item.url, children: item.title })
     },
     `desktop-menu-item-${index}`
@@ -1543,7 +1566,14 @@ var MobileNavigationMenu = ({
     if (authActionsSlot) return authActionsSlot;
     if (!authActions || authActions.length === 0) return null;
     return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", 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__ */ jsx(
         Pressable,
         {

package/dist/navbar-mega-menu.cjs

@@ -883,6 +883,7 @@ var Section = React__namespace.default.forwardRef(
     patternClassName,
     ...props
   }, ref) => {
+    const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "section",
       {
@@ -902,7 +903,7 @@ var Section = React__namespace.default.forwardRef(
             PatternBackground,
             {
               pattern,
-              opacity: patternOpacity,
+              opacity: effectivePatternOpacity,
               className: patternClassName
             }
           ),
@@ -951,7 +952,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
@@ -972,7 +973,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,
@@ -992,7 +993,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"
           }
         )
@@ -1050,19 +1051,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__namespace.useRef([]);
   const layout = link.layout || "simple-grid";
   const handleMouseEnter = (event) => {
@@ -1085,7 +1085,7 @@ var DesktopMenuItem = ({ link, index, optixFlowConfig }) => {
   };
   if (layout === "animated-image-preview" && link.links) {
     return /* @__PURE__ */ jsxRuntime.jsxs(NavigationMenuItem, { children: [
-      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(NavigationMenuContent, { className: "!rounded-2xl !p-0", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid min-h-[18.75rem] w-[45.25rem] grid-cols-[22.5rem_1fr] gap-4 p-3", children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative aspect-square w-full overflow-hidden rounded-xl", children: link.links.map((item, idx) => /* @__PURE__ */ jsxRuntime.jsx(
           img.Img,
@@ -1096,7 +1096,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"
@@ -1106,7 +1106,7 @@ var DesktopMenuItem = ({ link, index, optixFlowConfig }) => {
           idx
         )) }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 leading-normal font-bold", children: link.title }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-4 leading-normal font-bold", children: link.label }),
           /* @__PURE__ */ jsxRuntime.jsx("ul", { children: link.links.map((item, idx) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(
             NavigationMenuLink,
             {
@@ -1125,59 +1125,72 @@ var DesktopMenuItem = ({ link, index, optixFlowConfig }) => {
       ] }) })
     ] }, `desktop-menu-item-${index}`);
   }
-  if (layout === "simple-grid" && link.gridItems) {
+  if (layout === "simple-grid" && link.links) {
     return /* @__PURE__ */ jsxRuntime.jsxs(NavigationMenuItem, { children: [
-      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(NavigationMenuContent, { className: "min-w-[520px] p-6", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2", children: link.gridItems.map((item, itemIndex) => /* @__PURE__ */ jsxRuntime.jsxs(
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(NavigationMenuContent, { className: "min-w-[520px] p-6", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-1 gap-4 sm:grid-cols-2", children: link.links.map((item, itemIndex) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "h-12 w-12 overflow-hidden rounded-md border border-border", children: /* @__PURE__ */ jsxRuntime.jsx(
+            item.image && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-16 w-16 shrink-0 overflow-hidden rounded-md border border-border", children: /* @__PURE__ */ jsxRuntime.jsx(
               img.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(DynamicIcon, { name: item.icon, size: 18 }) }),
+            !item.image && (item.icon || item.iconName) && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(DynamicIcon, { name: item.iconName, size: 20 }) : null }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-base", children: item.title }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-medium", children: item.label }),
               item.description && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(NavigationMenuItem, { children: [
-      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(NavigationMenuContent, { className: "min-w-[400px] p-4", children: /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "flex flex-col gap-1", children: link.listItems.map((item, itemIndex) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsxs(
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(NavigationMenuContent, { className: "min-w-[400px] p-4", children: /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "flex flex-col gap-1", children: link.links.map((item, itemIndex) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "flex h-8 w-8 items-center justify-center rounded-md bg-muted/40 text-muted-foreground", children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: item.icon, size: 16 }) }),
+            (item.icon || item.iconName) && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(DynamicIcon, { name: item.iconName, size: 16 }) : null }),
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-medium", children: item.title }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-medium", children: item.label }),
               item.description && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(NavigationMenuItem, { children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
     "div",
     {
@@ -1186,36 +1199,31 @@ var MobileSubmenu = ({ submenu, mobileMenuClassName, optixFlowConfig }) => {
         mobileMenuClassName
       ),
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-8 py-3.5 text-xs tracking-widest text-muted-foreground uppercase", children: submenu.title }),
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
             Pressable,
             {
-              href,
+              href: item.url,
               className: "flex items-start gap-4 border-b border-border px-8 py-5",
               children: [
-                imgUrl && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-10 w-10 overflow-hidden rounded-md border border-border", children: /* @__PURE__ */ jsxRuntime.jsx(
+                item.image && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-10 w-10 overflow-hidden rounded-md border border-border", children: /* @__PURE__ */ jsxRuntime.jsx(
                   img.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(DynamicIcon, { name: icon, size: 16 }) }),
+                !item.image && (item.icon || item.iconName) && /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(DynamicIcon, { name: item.iconName, size: 16 }) : null }),
                 /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-base", children: title }),
-                  description && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-muted-foreground", children: description })
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-base", children: item.label }),
+                  item.description && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-muted-foreground", children: item.description })
                 ] })
               ]
             },
-            `${title}-${index}`
+            `mobile-item-${index}`
           );
         })
       ]
@@ -1231,9 +1239,7 @@ var NavbarMegaMenu = ({
   logoClassName,
   mobileMenuClassName,
   logo = {
-    url: "/",
-    desktopSrc: logoPlaceholders.darkHorizontalLogo,
-    mobileSrc: logoPlaceholders.logoMark
+    url: "/"
   },
   logoSlot,
   menuLinks,
@@ -1259,7 +1265,7 @@ var NavbarMegaMenu = ({
           /* @__PURE__ */ jsxRuntime.jsx(
             img.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
@@ -1268,7 +1274,7 @@ var NavbarMegaMenu = ({
           /* @__PURE__ */ jsxRuntime.jsx(
             img.Img,
             {
-              src: logo.mobileSrc || logoPlaceholders.logoMark,
+              src: logo.mobileSrc,
               className: cn("h-7 dark:invert md:hidden", logo.className),
               alt: logo.alt || "Logo",
               optixFlowConfig
@@ -1278,7 +1284,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) => {
@@ -1349,20 +1355,20 @@ var NavbarMegaMenu = ({
                           index,
                           optixFlowConfig
                         },
-                        `${link.title}-${index}`
+                        `menu-link-${index}`
                       );
                     }
-                    if (!link.url) {
+                    if (!link.href) {
                       return null;
                     }
                     return /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuItem, { children: /* @__PURE__ */ jsxRuntime.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}`);
                   })
                 }
               ),
@@ -1415,24 +1421,24 @@ var NavbarMegaMenu = ({
                           className: "flex w-full items-center border-b border-border px-8 py-7 text-left",
                           onClick: () => setSubmenuIndex(index),
                           children: [
-                            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1", children: link.title }),
+                            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1", children: link.label }),
                             /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "flex-1", children: link.title })
+                        children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1", children: link.label })
                       },
-                      `${link.title}-${index}`
+                      `mobile-menu-link-${index}`
                     );
                   }) }),
                   /* @__PURE__ */ jsxRuntime.jsx(

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

@@ -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-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';
 
 /**
- * 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 };