@opensite/ui 0.4.0 → 0.4.2

package/dist/navbar-animated-preview.cjs

@@ -1380,10 +1380,10 @@ var NavbarAnimatedPreview = ({
   },
   logoSlot,
   logoClassName,
-  navigation,
+  menuLinks,
   navigationSlot,
-  authActions,
-  authActionsSlot,
+  actions,
+  actionsSlot,
   background = "white",
   spacing = "none",
   pattern,
@@ -1438,10 +1438,10 @@ var NavbarAnimatedPreview = ({
       }
     );
   };
-  const renderAuthActions = () => {
-    if (authActionsSlot) return authActionsSlot;
-    if (!authActions || authActions.length === 0) return null;
-    return authActions.map((action, index) => {
+  const renderActions = () => {
+    if (actionsSlot) return actionsSlot;
+    if (!actions || actions.length === 0) return null;
+    return actions.map((action, index) => {
       const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
       return /* @__PURE__ */ jsxRuntime.jsx(
         Pressable,
@@ -1461,8 +1461,8 @@ var NavbarAnimatedPreview = ({
   };
   const renderNavigation = () => {
     if (navigationSlot) return navigationSlot;
-    if (!navigation || navigation.length === 0) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuList, { children: navigation.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(
+    if (!menuLinks || menuLinks.length === 0) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuList, { children: menuLinks.map((item, index) => /* @__PURE__ */ jsxRuntime.jsx(
       DesktopMenuItem,
       {
         item,
@@ -1494,7 +1494,7 @@ var NavbarAnimatedPreview = ({
           renderLogo(),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("hidden xl:flex", navClassName), children: renderNavigation() }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("justify-self-end", actionsClassName), children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden xl:block", children: renderAuthActions() }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden xl:block", children: renderActions() }),
             /* @__PURE__ */ jsxRuntime.jsx("div", { className: "xl:hidden", children: /* @__PURE__ */ jsxRuntime.jsx(
               Pressable,
               {
@@ -1526,9 +1526,9 @@ var NavbarAnimatedPreview = ({
           MobileNavigationMenu,
           {
             open,
-            navigation: navigation ?? [],
-            authActions,
-            authActionsSlot
+            menuLinks: menuLinks ?? [],
+            actions,
+            actionsSlot
           }
         )
       ]
@@ -1540,46 +1540,58 @@ var DesktopMenuItem = ({
   index,
   optixFlowConfig
 }) => {
-  if (item.links || item.featuredLinks || item.groupLinks) {
+  const hasDropdown = Boolean(
+    item.links?.length || item.featuredLinks?.length || item.groupLinks?.length
+  );
+  if (hasDropdown) {
     return /* @__PURE__ */ jsxRuntime.jsxs(NavigationMenuItem, { value: `${index}`, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuTrigger, { className: "h-fit bg-transparent font-normal text-foreground/60", children: item.title }),
-      /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuContent, { className: "hidden rounded-xl! border-0! p-0! xl:block", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-dvw animate-[fade-in-slide-down_0.35s_cubic-bezier(0.33,1,0.68,1)_forwards] px-8 pt-6 pb-12", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "container", children: [
-        item.id === 1 && /* @__PURE__ */ jsxRuntime.jsx(
-          DropdownMenu1,
-          {
-            links: item.links,
-            optixFlowConfig
-          }
-        ),
-        item.id === 2 && /* @__PURE__ */ jsxRuntime.jsx(
-          DropdownMenu2,
-          {
-            featuredLinks: item.featuredLinks,
-            links: item.links,
-            optixFlowConfig
-          }
-        ),
-        item.id === 3 && /* @__PURE__ */ jsxRuntime.jsx(
-          DropdownMenu3,
-          {
-            groupLinks: item.groupLinks,
-            imageLink: item.imageLink,
-            optixFlowConfig
-          }
-        )
-      ] }) }) })
+      /* @__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: item.title }),
+      /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuContent, { className: "hidden rounded-xl! border-0! p-0! xl:block", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-dvw animate-[fade-in-slide-down_0.35s_cubic-bezier(0.33,1,0.68,1)_forwards] px-8 pt-6 pb-12", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "container", children: renderDropdownContent(item, optixFlowConfig) }) }) })
     ] }, `desktop-menu-item-${index}`);
   }
   return /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuItem, { value: `${index}`, children: /* @__PURE__ */ jsxRuntime.jsx(
     NavigationMenuLink,
     {
       href: item.url,
-      className: `${navigationMenuTriggerStyle()} h-fit bg-transparent font-normal text-foreground/60`,
+      className: `${navigationMenuTriggerStyle()} bg-transparent px-0 hover:bg-transparent focus:bg-transparent h-fit font-normal text-foreground/60`,
       children: item.title
     }
   ) }, `desktop-menu-item-${index}`);
 };
-var DropdownMenu1 = ({ links, optixFlowConfig }) => {
+var renderDropdownContent = (item, optixFlowConfig) => {
+  const layout = item.layout || "animated-image-preview";
+  switch (layout) {
+    case "animated-image-preview":
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        AnimatedImagePreviewDropdown,
+        {
+          links: item.links,
+          optixFlowConfig
+        }
+      );
+    case "featured-cards-grid":
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        FeaturedCardsGridDropdown,
+        {
+          featuredLinks: item.featuredLinks,
+          links: item.links,
+          optixFlowConfig
+        }
+      );
+    case "grouped-links-image":
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        GroupedLinksImageDropdown,
+        {
+          groupLinks: item.groupLinks,
+          imageLink: item.imageLink,
+          optixFlowConfig
+        }
+      );
+    default:
+      return null;
+  }
+};
+var AnimatedImagePreviewDropdown = ({ links, optixFlowConfig }) => {
   const linksRef = React.useRef([]);
   const imageRefs = React.useRef([]);
   const updateImageClasses = (activeIndex) => {
@@ -1642,7 +1654,7 @@ var DropdownMenu1 = ({ links, optixFlowConfig }) => {
     )) })
   ] });
 };
-var DropdownMenu2 = ({
+var FeaturedCardsGridDropdown = ({
   links,
   featuredLinks,
   optixFlowConfig
@@ -1660,7 +1672,7 @@ var DropdownMenu2 = ({
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-4 pt-8", children: links?.map((link, index) => /* @__PURE__ */ jsxRuntime.jsx(NavLink, { link }, `default-nav-link-${index}`)) })
   ] });
 };
-var DropdownMenu3 = ({
+var GroupedLinksImageDropdown = ({
   groupLinks,
   imageLink,
   optixFlowConfig
@@ -1806,14 +1818,14 @@ var NavLink = React.forwardRef(
 NavLink.displayName = "NavLink";
 var MobileNavigationMenu = ({
   open,
-  navigation,
-  authActions,
-  authActionsSlot
+  menuLinks,
+  actions,
+  actionsSlot
 }) => {
-  const renderMobileAuthActions = () => {
-    if (authActionsSlot) return authActionsSlot;
-    if (!authActions || authActions.length === 0) return null;
-    return authActions.map((action, index) => {
+  const renderMobileActions = () => {
+    if (actionsSlot) return actionsSlot;
+    if (!actions || actions.length === 0) return null;
+    return actions.map((action, index) => {
       const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
       return /* @__PURE__ */ jsxRuntime.jsx(
         Pressable,
@@ -1840,10 +1852,10 @@ var MobileNavigationMenu = ({
       children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "container py-8", children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -m-px h-px w-px overflow-hidden border-0 mask-clip-border p-0 text-nowrap whitespace-nowrap", children: /* @__PURE__ */ jsxRuntime.jsx(SheetTitle, { className: "text-primary", children: "Mobile Navigation" }) }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-h-full flex-col gap-6", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Accordion, { type: "multiple", className: "w-full", children: navigation.map(
+          /* @__PURE__ */ jsxRuntime.jsx(Accordion, { type: "multiple", className: "w-full", children: menuLinks.map(
             (item, index) => renderMobileMenuItem(item, index)
           ) }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-2", children: renderMobileAuthActions() })
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-2", children: renderMobileActions() })
         ] })
       ] }) })
     }

package/dist/navbar-animated-preview.d.cts

@@ -2,13 +2,16 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { P as PatternName } from './pattern-background-BXRgbd05.cjs';
 import { SectionBackground, SectionSpacing } from './types.cjs';
-import { A as ActionConfig, O as OptixFlowConfig } from './blocks-BfXV7q25.cjs';
+import { A as ActionConfig, O as OptixFlowConfig } from './blocks-CJYRLpXR.cjs';
 import './patternSvgs-c5ZNVoTT.cjs';
 import 'class-variance-authority';
-import './button-variants-CKmytxru.cjs';
+import './button-variants-DJbzb6lO.cjs';
 import 'class-variance-authority/types';
 
-interface MenuLink {
+/**
+ * Base link item for dropdown menus
+ */
+interface ILinkItem {
     label: React.ReactNode;
     description?: React.ReactNode;
     url: string;
@@ -21,18 +24,61 @@ interface MenuLink {
         logo: string;
     };
 }
-interface MenuGroup {
+/**
+ * Group of links with a title
+ */
+interface ILinkGroup {
     title: React.ReactNode;
-    links: MenuLink[];
+    links: ILinkItem[];
+}
+/**
+ * Featured image link with badge
+ */
+interface IFeaturedImageLink {
+    url: string;
+    image?: string;
+    label: React.ReactNode;
 }
-interface MenuItem {
-    id?: number;
+/**
+ * Layout types for animated preview dropdown menus
+ *
+ * LAYOUT OPTIONS FOR AI PAGE BUILDER:
+ *
+ * 1. "animated-image-preview"
+ *    - Visual: Grid layout with large image preview on left (360px wide), links list on right
+ *    - Behavior: Image changes on hover based on which link is being hovered
+ *    - Best for: Product showcases, feature highlights, visual content navigation
+ *    - Required data: links[] with label, description, url, image
+ *    - Example use case: Product categories where each has a hero image
+ *
+ * 2. "featured-cards-grid"
+ *    - Visual: 2-column grid of featured cards with background images and icons
+ *    - Behavior: Static grid, cards have hover effects
+ *    - Best for: Highlighting key features or products with visual emphasis
+ *    - Required data: featuredLinks[] with label, description, url, iconName, background
+ *                     links[] for additional non-featured links
+ *    - Example use case: Premium features or flagship products
+ *
+ * 3. "grouped-links-image"
+ *    - Visual: Left side has grouped link sections, right side has single featured image card
+ *    - Behavior: Static layout with organized link groups
+ *    - Best for: Organized navigation with many links grouped by category
+ *    - Required data: groupLinks[] with title and links[]
+ *                     imageLink with label, description, url, image, badge (optional)
+ *    - Example use case: Developer resources grouped by topic with featured documentation
+ */
+type AnimatedPreviewLayout = "animated-image-preview" | "featured-cards-grid" | "grouped-links-image";
+/**
+ * Menu link interface with flexible dropdown configuration
+ */
+interface IMenuLink {
     title: React.ReactNode;
     url?: string;
-    links?: MenuLink[];
-    featuredLinks?: MenuLink[];
-    groupLinks?: MenuGroup[];
-    imageLink?: MenuLink;
+    layout?: AnimatedPreviewLayout;
+    links?: ILinkItem[];
+    featuredLinks?: ILinkItem[];
+    groupLinks?: ILinkGroup[];
+    imageLink?: IFeaturedImageLink;
 }
 /**
  * Logo configuration interface
@@ -81,21 +127,21 @@ interface NavbarAnimatedPreviewProps {
      */
     logoClassName?: string;
     /**
-     * Navigation menu items
+     * Navigation menu links with optional dropdown groups
      */
-    navigation?: MenuItem[];
+    menuLinks?: IMenuLink[];
     /**
-     * Custom slot for navigation (overrides navigation array)
+     * Custom slot for navigation (overrides menuLinks array)
      */
     navigationSlot?: React.ReactNode;
     /**
-     * Authentication action configurations
+     * Action configurations (e.g., Sign In, Get Started buttons)
      */
-    authActions?: ActionConfig[];
+    actions?: ActionConfig[];
     /**
-     * Custom slot for auth actions (overrides authActions array)
+     * Custom slot for actions (overrides actions array)
      */
-    authActionsSlot?: React.ReactNode;
+    actionsSlot?: React.ReactNode;
     /**
      * Background style for the section
      */
@@ -126,6 +172,6 @@ interface NavbarAnimatedPreviewProps {
  * menu spans full width with smooth fade-in animations. Mobile view uses a full-screen sheet with
  * accordion navigation. Ideal for complex SaaS products and developer platforms.
  */
-declare const NavbarAnimatedPreview: ({ className, containerClassName, navClassName, navigationMenuClassName, actionsClassName, logo, logoSlot, logoClassName, navigation, navigationSlot, authActions, authActionsSlot, background, spacing, pattern, patternOpacity, optixFlowConfig, }: NavbarAnimatedPreviewProps) => react_jsx_runtime.JSX.Element;
+declare const NavbarAnimatedPreview: ({ className, containerClassName, navClassName, navigationMenuClassName, actionsClassName, logo, logoSlot, logoClassName, menuLinks, navigationSlot, actions, actionsSlot, background, spacing, pattern, patternOpacity, optixFlowConfig, }: NavbarAnimatedPreviewProps) => react_jsx_runtime.JSX.Element;
 
 export { NavbarAnimatedPreview, type NavbarAnimatedPreviewProps };

package/dist/navbar-animated-preview.d.ts

@@ -2,13 +2,16 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { P as PatternName } from './pattern-background-z0e5HB0v.js';
 import { SectionBackground, SectionSpacing } from './types.js';
-import { A as ActionConfig, O as OptixFlowConfig } from './blocks-BYytGxbF.js';
+import { A as ActionConfig, O as OptixFlowConfig } from './blocks-BWc_7JNA.js';
 import './patternSvgs-c5ZNVoTT.js';
 import 'class-variance-authority';
-import './button-variants-CKmytxru.js';
+import './button-variants-DJbzb6lO.js';
 import 'class-variance-authority/types';
 
-interface MenuLink {
+/**
+ * Base link item for dropdown menus
+ */
+interface ILinkItem {
     label: React.ReactNode;
     description?: React.ReactNode;
     url: string;
@@ -21,18 +24,61 @@ interface MenuLink {
         logo: string;
     };
 }
-interface MenuGroup {
+/**
+ * Group of links with a title
+ */
+interface ILinkGroup {
     title: React.ReactNode;
-    links: MenuLink[];
+    links: ILinkItem[];
+}
+/**
+ * Featured image link with badge
+ */
+interface IFeaturedImageLink {
+    url: string;
+    image?: string;
+    label: React.ReactNode;
 }
-interface MenuItem {
-    id?: number;
+/**
+ * Layout types for animated preview dropdown menus
+ *
+ * LAYOUT OPTIONS FOR AI PAGE BUILDER:
+ *
+ * 1. "animated-image-preview"
+ *    - Visual: Grid layout with large image preview on left (360px wide), links list on right
+ *    - Behavior: Image changes on hover based on which link is being hovered
+ *    - Best for: Product showcases, feature highlights, visual content navigation
+ *    - Required data: links[] with label, description, url, image
+ *    - Example use case: Product categories where each has a hero image
+ *
+ * 2. "featured-cards-grid"
+ *    - Visual: 2-column grid of featured cards with background images and icons
+ *    - Behavior: Static grid, cards have hover effects
+ *    - Best for: Highlighting key features or products with visual emphasis
+ *    - Required data: featuredLinks[] with label, description, url, iconName, background
+ *                     links[] for additional non-featured links
+ *    - Example use case: Premium features or flagship products
+ *
+ * 3. "grouped-links-image"
+ *    - Visual: Left side has grouped link sections, right side has single featured image card
+ *    - Behavior: Static layout with organized link groups
+ *    - Best for: Organized navigation with many links grouped by category
+ *    - Required data: groupLinks[] with title and links[]
+ *                     imageLink with label, description, url, image, badge (optional)
+ *    - Example use case: Developer resources grouped by topic with featured documentation
+ */
+type AnimatedPreviewLayout = "animated-image-preview" | "featured-cards-grid" | "grouped-links-image";
+/**
+ * Menu link interface with flexible dropdown configuration
+ */
+interface IMenuLink {
     title: React.ReactNode;
     url?: string;
-    links?: MenuLink[];
-    featuredLinks?: MenuLink[];
-    groupLinks?: MenuGroup[];
-    imageLink?: MenuLink;
+    layout?: AnimatedPreviewLayout;
+    links?: ILinkItem[];
+    featuredLinks?: ILinkItem[];
+    groupLinks?: ILinkGroup[];
+    imageLink?: IFeaturedImageLink;
 }
 /**
  * Logo configuration interface
@@ -81,21 +127,21 @@ interface NavbarAnimatedPreviewProps {
      */
     logoClassName?: string;
     /**
-     * Navigation menu items
+     * Navigation menu links with optional dropdown groups
      */
-    navigation?: MenuItem[];
+    menuLinks?: IMenuLink[];
     /**
-     * Custom slot for navigation (overrides navigation array)
+     * Custom slot for navigation (overrides menuLinks array)
      */
     navigationSlot?: React.ReactNode;
     /**
-     * Authentication action configurations
+     * Action configurations (e.g., Sign In, Get Started buttons)
      */
-    authActions?: ActionConfig[];
+    actions?: ActionConfig[];
     /**
-     * Custom slot for auth actions (overrides authActions array)
+     * Custom slot for actions (overrides actions array)
      */
-    authActionsSlot?: React.ReactNode;
+    actionsSlot?: React.ReactNode;
     /**
      * Background style for the section
      */
@@ -126,6 +172,6 @@ interface NavbarAnimatedPreviewProps {
  * menu spans full width with smooth fade-in animations. Mobile view uses a full-screen sheet with
  * accordion navigation. Ideal for complex SaaS products and developer platforms.
  */
-declare const NavbarAnimatedPreview: ({ className, containerClassName, navClassName, navigationMenuClassName, actionsClassName, logo, logoSlot, logoClassName, navigation, navigationSlot, authActions, authActionsSlot, background, spacing, pattern, patternOpacity, optixFlowConfig, }: NavbarAnimatedPreviewProps) => react_jsx_runtime.JSX.Element;
+declare const NavbarAnimatedPreview: ({ className, containerClassName, navClassName, navigationMenuClassName, actionsClassName, logo, logoSlot, logoClassName, menuLinks, navigationSlot, actions, actionsSlot, background, spacing, pattern, patternOpacity, optixFlowConfig, }: NavbarAnimatedPreviewProps) => react_jsx_runtime.JSX.Element;
 
 export { NavbarAnimatedPreview, type NavbarAnimatedPreviewProps };

package/dist/navbar-animated-preview.js

@@ -1354,10 +1354,10 @@ var NavbarAnimatedPreview = ({
   },
   logoSlot,
   logoClassName,
-  navigation,
+  menuLinks,
   navigationSlot,
-  authActions,
-  authActionsSlot,
+  actions,
+  actionsSlot,
   background = "white",
   spacing = "none",
   pattern,
@@ -1412,10 +1412,10 @@ var NavbarAnimatedPreview = ({
       }
     );
   };
-  const renderAuthActions = () => {
-    if (authActionsSlot) return authActionsSlot;
-    if (!authActions || authActions.length === 0) return null;
-    return authActions.map((action, index) => {
+  const renderActions = () => {
+    if (actionsSlot) return actionsSlot;
+    if (!actions || actions.length === 0) return null;
+    return actions.map((action, index) => {
       const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
       return /* @__PURE__ */ jsx(
         Pressable,
@@ -1435,8 +1435,8 @@ var NavbarAnimatedPreview = ({
   };
   const renderNavigation = () => {
     if (navigationSlot) return navigationSlot;
-    if (!navigation || navigation.length === 0) return null;
-    return /* @__PURE__ */ jsx(NavigationMenuList, { children: navigation.map((item, index) => /* @__PURE__ */ jsx(
+    if (!menuLinks || menuLinks.length === 0) return null;
+    return /* @__PURE__ */ jsx(NavigationMenuList, { children: menuLinks.map((item, index) => /* @__PURE__ */ jsx(
       DesktopMenuItem,
       {
         item,
@@ -1468,7 +1468,7 @@ var NavbarAnimatedPreview = ({
           renderLogo(),
           /* @__PURE__ */ jsx("div", { className: cn("hidden xl:flex", navClassName), children: renderNavigation() }),
           /* @__PURE__ */ jsxs("div", { className: cn("justify-self-end", actionsClassName), children: [
-            /* @__PURE__ */ jsx("div", { className: "hidden xl:block", children: renderAuthActions() }),
+            /* @__PURE__ */ jsx("div", { className: "hidden xl:block", children: renderActions() }),
             /* @__PURE__ */ jsx("div", { className: "xl:hidden", children: /* @__PURE__ */ jsx(
               Pressable,
               {
@@ -1500,9 +1500,9 @@ var NavbarAnimatedPreview = ({
           MobileNavigationMenu,
           {
             open,
-            navigation: navigation ?? [],
-            authActions,
-            authActionsSlot
+            menuLinks: menuLinks ?? [],
+            actions,
+            actionsSlot
           }
         )
       ]
@@ -1514,46 +1514,58 @@ var DesktopMenuItem = ({
   index,
   optixFlowConfig
 }) => {
-  if (item.links || item.featuredLinks || item.groupLinks) {
+  const hasDropdown = Boolean(
+    item.links?.length || item.featuredLinks?.length || item.groupLinks?.length
+  );
+  if (hasDropdown) {
     return /* @__PURE__ */ jsxs(NavigationMenuItem, { value: `${index}`, children: [
-      /* @__PURE__ */ jsx(NavigationMenuTrigger, { className: "h-fit bg-transparent font-normal text-foreground/60", children: item.title }),
-      /* @__PURE__ */ jsx(NavigationMenuContent, { className: "hidden rounded-xl! border-0! p-0! xl:block", children: /* @__PURE__ */ jsx("div", { className: "w-dvw animate-[fade-in-slide-down_0.35s_cubic-bezier(0.33,1,0.68,1)_forwards] px-8 pt-6 pb-12", children: /* @__PURE__ */ jsxs("div", { className: "container", children: [
-        item.id === 1 && /* @__PURE__ */ jsx(
-          DropdownMenu1,
-          {
-            links: item.links,
-            optixFlowConfig
-          }
-        ),
-        item.id === 2 && /* @__PURE__ */ jsx(
-          DropdownMenu2,
-          {
-            featuredLinks: item.featuredLinks,
-            links: item.links,
-            optixFlowConfig
-          }
-        ),
-        item.id === 3 && /* @__PURE__ */ jsx(
-          DropdownMenu3,
-          {
-            groupLinks: item.groupLinks,
-            imageLink: item.imageLink,
-            optixFlowConfig
-          }
-        )
-      ] }) }) })
+      /* @__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: item.title }),
+      /* @__PURE__ */ jsx(NavigationMenuContent, { className: "hidden rounded-xl! border-0! p-0! xl:block", children: /* @__PURE__ */ jsx("div", { className: "w-dvw animate-[fade-in-slide-down_0.35s_cubic-bezier(0.33,1,0.68,1)_forwards] px-8 pt-6 pb-12", children: /* @__PURE__ */ jsx("div", { className: "container", children: renderDropdownContent(item, optixFlowConfig) }) }) })
     ] }, `desktop-menu-item-${index}`);
   }
   return /* @__PURE__ */ jsx(NavigationMenuItem, { value: `${index}`, children: /* @__PURE__ */ jsx(
     NavigationMenuLink,
     {
       href: item.url,
-      className: `${navigationMenuTriggerStyle()} h-fit bg-transparent font-normal text-foreground/60`,
+      className: `${navigationMenuTriggerStyle()} bg-transparent px-0 hover:bg-transparent focus:bg-transparent h-fit font-normal text-foreground/60`,
       children: item.title
     }
   ) }, `desktop-menu-item-${index}`);
 };
-var DropdownMenu1 = ({ links, optixFlowConfig }) => {
+var renderDropdownContent = (item, optixFlowConfig) => {
+  const layout = item.layout || "animated-image-preview";
+  switch (layout) {
+    case "animated-image-preview":
+      return /* @__PURE__ */ jsx(
+        AnimatedImagePreviewDropdown,
+        {
+          links: item.links,
+          optixFlowConfig
+        }
+      );
+    case "featured-cards-grid":
+      return /* @__PURE__ */ jsx(
+        FeaturedCardsGridDropdown,
+        {
+          featuredLinks: item.featuredLinks,
+          links: item.links,
+          optixFlowConfig
+        }
+      );
+    case "grouped-links-image":
+      return /* @__PURE__ */ jsx(
+        GroupedLinksImageDropdown,
+        {
+          groupLinks: item.groupLinks,
+          imageLink: item.imageLink,
+          optixFlowConfig
+        }
+      );
+    default:
+      return null;
+  }
+};
+var AnimatedImagePreviewDropdown = ({ links, optixFlowConfig }) => {
   const linksRef = useRef([]);
   const imageRefs = useRef([]);
   const updateImageClasses = (activeIndex) => {
@@ -1616,7 +1628,7 @@ var DropdownMenu1 = ({ links, optixFlowConfig }) => {
     )) })
   ] });
 };
-var DropdownMenu2 = ({
+var FeaturedCardsGridDropdown = ({
   links,
   featuredLinks,
   optixFlowConfig
@@ -1634,7 +1646,7 @@ var DropdownMenu2 = ({
     /* @__PURE__ */ jsx("div", { className: "grid grid-cols-4 pt-8", children: links?.map((link, index) => /* @__PURE__ */ jsx(NavLink, { link }, `default-nav-link-${index}`)) })
   ] });
 };
-var DropdownMenu3 = ({
+var GroupedLinksImageDropdown = ({
   groupLinks,
   imageLink,
   optixFlowConfig
@@ -1780,14 +1792,14 @@ var NavLink = forwardRef(
 NavLink.displayName = "NavLink";
 var MobileNavigationMenu = ({
   open,
-  navigation,
-  authActions,
-  authActionsSlot
+  menuLinks,
+  actions,
+  actionsSlot
 }) => {
-  const renderMobileAuthActions = () => {
-    if (authActionsSlot) return authActionsSlot;
-    if (!authActions || authActions.length === 0) return null;
-    return authActions.map((action, index) => {
+  const renderMobileActions = () => {
+    if (actionsSlot) return actionsSlot;
+    if (!actions || actions.length === 0) return null;
+    return actions.map((action, index) => {
       const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
       return /* @__PURE__ */ jsx(
         Pressable,
@@ -1814,10 +1826,10 @@ var MobileNavigationMenu = ({
       children: /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto", children: /* @__PURE__ */ jsxs("div", { className: "container py-8", children: [
         /* @__PURE__ */ jsx("div", { className: "absolute -m-px h-px w-px overflow-hidden border-0 mask-clip-border p-0 text-nowrap whitespace-nowrap", children: /* @__PURE__ */ jsx(SheetTitle, { className: "text-primary", children: "Mobile Navigation" }) }),
         /* @__PURE__ */ jsxs("div", { className: "flex min-h-full flex-col gap-6", children: [
-          /* @__PURE__ */ jsx(Accordion, { type: "multiple", className: "w-full", children: navigation.map(
+          /* @__PURE__ */ jsx(Accordion, { type: "multiple", className: "w-full", children: menuLinks.map(
             (item, index) => renderMobileMenuItem(item, index)
           ) }),
-          /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: renderMobileAuthActions() })
+          /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: renderMobileActions() })
         ] })
       ] }) })
     }

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

@@ -2,10 +2,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 { SectionBackground, SectionSpacing } from './types.cjs';
-import { A as ActionConfig, O as OptixFlowConfig } from './blocks-BfXV7q25.cjs';
+import { A as ActionConfig, O as OptixFlowConfig } from './blocks-CJYRLpXR.cjs';
 import './patternSvgs-c5ZNVoTT.cjs';
 import 'class-variance-authority';
-import './button-variants-CKmytxru.cjs';
+import './button-variants-DJbzb6lO.cjs';
 import 'class-variance-authority/types';
 
 /**