@opensite/ui 0.4.3 → 0.4.5

package/dist/navbar-animated-preview.cjs

@@ -1015,7 +1015,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
@@ -1036,7 +1036,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,
@@ -1056,7 +1056,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 transition duration-300 group-data-[state=open]:rotate-180",
             "aria-hidden": "true"
           }
         )
@@ -1114,7 +1114,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
@@ -1368,6 +1368,11 @@ var imagePlaceholders = [
   "https://toastability-production.s3.amazonaws.com/e13qu3083lkhdg7th64vb628172a",
   "https://toastability-production.s3.amazonaws.com/w87w0fyjdol9yzwo7yywkgxidvzo"
 ];
+
+// components/blocks/navbars/types.ts
+function getLinkUrl(item) {
+  return item.href || item.url || "#";
+}
 var MOBILE_BREAKPOINT = 1280;
 var NavbarAnimatedPreview = ({
   className,
@@ -1496,7 +1501,7 @@ var NavbarAnimatedPreview = ({
           NavigationMenu,
           {
             className: cn(
-              "h-20 max-w-full after:absolute after:inset-0 after:z-998 after:block after:size-full after:bg-background after:content-[''] [&>div:last-child>div]:mt-0 [&>div:last-child>div]:animate-none [&>div:last-child>div]:rounded-none [&>div:last-child>div]:border-0 [&>div:last-child>div]:shadow-[0px_-1px_0px_0px_rgba(0,0,0,0.05),0px_0px_0px_1px_rgba(17,26,37,0.05),0px_2px_5px_0px_rgba(16,25,36,0.1),0px_5px_20px_0px_rgba(16,25,36,0.1)]!",
+              "h-20 max-w-full border-b border-border/50 shadow-sm after:absolute after:inset-0 after:z-998 after:block after:size-full after:bg-background after:content-[''] [&>div:last-child>div]:mt-0 [&>div:last-child>div]:animate-none [&>div:last-child>div]:rounded-none [&>div:last-child>div]:border-0 [&>div:last-child>div]:shadow-[0px_-1px_0px_0px_rgba(0,0,0,0.05),0px_0px_0px_1px_rgba(17,26,37,0.05),0px_2px_5px_0px_rgba(16,25,36,0.1),0px_5px_20px_0px_rgba(16,25,36,0.1)]!",
               navigationMenuClassName
             ),
             children: /* @__PURE__ */ jsxRuntime.jsxs(
@@ -1565,7 +1570,7 @@ var DesktopMenuItem = ({
   );
   if (hasDropdown) {
     return /* @__PURE__ */ jsxRuntime.jsxs(NavigationMenuItem, { value: `${index}`, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuTrigger, { className: "h-auto bg-transparent px-0 py-0 font-normal text-foreground/60 hover:bg-transparent hover:text-foreground focus:bg-transparent focus:text-foreground data-[state=open]:bg-transparent data-[state=open]:text-foreground", children: item.label }),
+      /* @__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: item.label }),
       /* @__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}`);
   }
@@ -1573,7 +1578,7 @@ var DesktopMenuItem = ({
     NavigationMenuLink,
     {
       href: item.href,
-      className: `${navigationMenuTriggerStyle()} bg-transparent px-0 hover:bg-transparent focus:bg-transparent h-fit font-normal text-foreground/60`,
+      className: `${navigationMenuTriggerStyle()} bg-transparent px-3 py-2 hover:bg-muted focus:bg-muted h-fit font-normal text-foreground/80`,
       children: item.label
     }
   ) }, `desktop-menu-item-${index}`);
@@ -1744,7 +1749,7 @@ var FeaturedImageLink = ({
   optixFlowConfig
 }) => {
   if (!link) return null;
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden xl:block", children: /* @__PURE__ */ jsxRuntime.jsx(Pressable, { href: link.url, className: "w-full max-w-147.5", children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden xl:block", children: /* @__PURE__ */ jsxRuntime.jsx(Pressable, { href: link.url || "#", className: "w-full max-w-147.5", children: /* @__PURE__ */ jsxRuntime.jsx(
     AspectRatio,
     {
       ratio: 1.77245509,
@@ -1778,7 +1783,7 @@ var FeaturedLink = ({ link, optixFlowConfig }) => {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Pressable,
     {
-      href: link.url,
+      href: getLinkUrl(link),
       className: "group relative flex w-full overflow-hidden rounded-xl bg-muted px-8 py-7",
       children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative z-10 flex w-full items-center gap-6", children: [
@@ -1814,7 +1819,7 @@ var NavLink = React.forwardRef(
       Pressable,
       {
         ref,
-        href: link.url,
+        href: getLinkUrl(link),
         className: "flex w-full gap-2 transition-opacity duration-300",
         onMouseEnter,
         onMouseLeave,
@@ -1828,8 +1833,8 @@ var NavLink = React.forwardRef(
             }
           ) }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-start gap-2", children: [
-            link.label && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-base leading-normal", children: link.label }),
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm leading-normal text-muted-foreground", children: link.description })
+            link.label && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm leading-normal", children: link.label }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs leading-normal text-muted-foreground", children: link.description })
           ] })
         ]
       }

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

@@ -2,38 +2,14 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { P as PatternName } from './pattern-background-a7gKHzHy.cjs';
 import { SectionBackground, SectionSpacing } from './types.cjs';
+import { L as LogoConfig, b as ILinkItem, a as IMenuLinkGroup } from './types-D2b35ylu.cjs';
 import { A as ActionConfig, O as OptixFlowConfig } from './blocks-Cohq4eio.cjs';
 import 'class-variance-authority';
 import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';
 
 /**
- * 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: React.ReactNode;
-    description?: React.ReactNode;
-    url: string;
-    icon?: React.ReactNode;
-    iconName?: string;
-    image?: string;
-    background?: string;
-}
-/**
- * Group of links with optional metadata
- */
-interface IMenuLinkGroup {
-    label: React.ReactNode;
-    description?: string;
-    image?: string;
-    links: ILinkItem[];
-}
-/**
- * Featured image link with badge
+ * Featured image link with badge (specific to animated-preview)
  */
 interface IFeaturedImageLink {
     url: string;
@@ -42,35 +18,10 @@ interface IFeaturedImageLink {
 }
 /**
  * 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 configuration with layout-based dropdown options
+ * Menu link configuration with layout-based dropdown options (specific to animated-preview)
  */
 interface IMenuLink {
     label: React.ReactNode;
@@ -82,16 +33,6 @@ interface IMenuLink {
     groupLinks?: IMenuLinkGroup[];
     imageLink?: IFeaturedImageLink;
 }
-/**
- * Logo configuration interface
- */
-interface LogoConfig {
-    url?: string;
-    src?: string;
-    alt?: string;
-    title?: React.ReactNode;
-    className?: string;
-}
 /**
  * Props for the NavbarAnimatedPreview component
  */
@@ -176,4 +117,4 @@ interface NavbarAnimatedPreviewProps {
  */
 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 { type AnimatedPreviewLayout, type IFeaturedImageLink, type ILinkItem, type IMenuLink, type IMenuLinkGroup, type LogoConfig, NavbarAnimatedPreview, type NavbarAnimatedPreviewProps };
+export { type AnimatedPreviewLayout, type IFeaturedImageLink, ILinkItem, type IMenuLink, IMenuLinkGroup, LogoConfig, NavbarAnimatedPreview, type NavbarAnimatedPreviewProps };

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

@@ -2,38 +2,14 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { P as PatternName } from './pattern-background-a7gKHzHy.js';
 import { SectionBackground, SectionSpacing } from './types.js';
+import { L as LogoConfig, b as ILinkItem, a as IMenuLinkGroup } from './types-D2b35ylu.js';
 import { A as ActionConfig, O as OptixFlowConfig } from './blocks-k17uluAz.js';
 import 'class-variance-authority';
 import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
 
 /**
- * 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: React.ReactNode;
-    description?: React.ReactNode;
-    url: string;
-    icon?: React.ReactNode;
-    iconName?: string;
-    image?: string;
-    background?: string;
-}
-/**
- * Group of links with optional metadata
- */
-interface IMenuLinkGroup {
-    label: React.ReactNode;
-    description?: string;
-    image?: string;
-    links: ILinkItem[];
-}
-/**
- * Featured image link with badge
+ * Featured image link with badge (specific to animated-preview)
  */
 interface IFeaturedImageLink {
     url: string;
@@ -42,35 +18,10 @@ interface IFeaturedImageLink {
 }
 /**
  * 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 configuration with layout-based dropdown options
+ * Menu link configuration with layout-based dropdown options (specific to animated-preview)
  */
 interface IMenuLink {
     label: React.ReactNode;
@@ -82,16 +33,6 @@ interface IMenuLink {
     groupLinks?: IMenuLinkGroup[];
     imageLink?: IFeaturedImageLink;
 }
-/**
- * Logo configuration interface
- */
-interface LogoConfig {
-    url?: string;
-    src?: string;
-    alt?: string;
-    title?: React.ReactNode;
-    className?: string;
-}
 /**
  * Props for the NavbarAnimatedPreview component
  */
@@ -176,4 +117,4 @@ interface NavbarAnimatedPreviewProps {
  */
 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 { type AnimatedPreviewLayout, type IFeaturedImageLink, type ILinkItem, type IMenuLink, type IMenuLinkGroup, type LogoConfig, NavbarAnimatedPreview, type NavbarAnimatedPreviewProps };
+export { type AnimatedPreviewLayout, type IFeaturedImageLink, ILinkItem, type IMenuLink, IMenuLinkGroup, LogoConfig, NavbarAnimatedPreview, type NavbarAnimatedPreviewProps };

package/dist/navbar-animated-preview.js

@@ -989,7 +989,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
@@ -1010,7 +1010,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,
@@ -1030,7 +1030,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 transition duration-300 group-data-[state=open]:rotate-180",
             "aria-hidden": "true"
           }
         )
@@ -1088,7 +1088,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
@@ -1342,6 +1342,11 @@ var imagePlaceholders = [
   "https://toastability-production.s3.amazonaws.com/e13qu3083lkhdg7th64vb628172a",
   "https://toastability-production.s3.amazonaws.com/w87w0fyjdol9yzwo7yywkgxidvzo"
 ];
+
+// components/blocks/navbars/types.ts
+function getLinkUrl(item) {
+  return item.href || item.url || "#";
+}
 var MOBILE_BREAKPOINT = 1280;
 var NavbarAnimatedPreview = ({
   className,
@@ -1470,7 +1475,7 @@ var NavbarAnimatedPreview = ({
           NavigationMenu,
           {
             className: cn(
-              "h-20 max-w-full after:absolute after:inset-0 after:z-998 after:block after:size-full after:bg-background after:content-[''] [&>div:last-child>div]:mt-0 [&>div:last-child>div]:animate-none [&>div:last-child>div]:rounded-none [&>div:last-child>div]:border-0 [&>div:last-child>div]:shadow-[0px_-1px_0px_0px_rgba(0,0,0,0.05),0px_0px_0px_1px_rgba(17,26,37,0.05),0px_2px_5px_0px_rgba(16,25,36,0.1),0px_5px_20px_0px_rgba(16,25,36,0.1)]!",
+              "h-20 max-w-full border-b border-border/50 shadow-sm after:absolute after:inset-0 after:z-998 after:block after:size-full after:bg-background after:content-[''] [&>div:last-child>div]:mt-0 [&>div:last-child>div]:animate-none [&>div:last-child>div]:rounded-none [&>div:last-child>div]:border-0 [&>div:last-child>div]:shadow-[0px_-1px_0px_0px_rgba(0,0,0,0.05),0px_0px_0px_1px_rgba(17,26,37,0.05),0px_2px_5px_0px_rgba(16,25,36,0.1),0px_5px_20px_0px_rgba(16,25,36,0.1)]!",
               navigationMenuClassName
             ),
             children: /* @__PURE__ */ jsxs(
@@ -1539,7 +1544,7 @@ var DesktopMenuItem = ({
   );
   if (hasDropdown) {
     return /* @__PURE__ */ jsxs(NavigationMenuItem, { value: `${index}`, children: [
-      /* @__PURE__ */ jsx(NavigationMenuTrigger, { className: "h-auto bg-transparent px-0 py-0 font-normal text-foreground/60 hover:bg-transparent hover:text-foreground focus:bg-transparent focus:text-foreground data-[state=open]:bg-transparent data-[state=open]:text-foreground", children: item.label }),
+      /* @__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: item.label }),
       /* @__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}`);
   }
@@ -1547,7 +1552,7 @@ var DesktopMenuItem = ({
     NavigationMenuLink,
     {
       href: item.href,
-      className: `${navigationMenuTriggerStyle()} bg-transparent px-0 hover:bg-transparent focus:bg-transparent h-fit font-normal text-foreground/60`,
+      className: `${navigationMenuTriggerStyle()} bg-transparent px-3 py-2 hover:bg-muted focus:bg-muted h-fit font-normal text-foreground/80`,
       children: item.label
     }
   ) }, `desktop-menu-item-${index}`);
@@ -1718,7 +1723,7 @@ var FeaturedImageLink = ({
   optixFlowConfig
 }) => {
   if (!link) return null;
-  return /* @__PURE__ */ jsx("div", { className: "hidden xl:block", children: /* @__PURE__ */ jsx(Pressable, { href: link.url, className: "w-full max-w-147.5", children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("div", { className: "hidden xl:block", children: /* @__PURE__ */ jsx(Pressable, { href: link.url || "#", className: "w-full max-w-147.5", children: /* @__PURE__ */ jsx(
     AspectRatio,
     {
       ratio: 1.77245509,
@@ -1752,7 +1757,7 @@ var FeaturedLink = ({ link, optixFlowConfig }) => {
   return /* @__PURE__ */ jsxs(
     Pressable,
     {
-      href: link.url,
+      href: getLinkUrl(link),
       className: "group relative flex w-full overflow-hidden rounded-xl bg-muted px-8 py-7",
       children: [
         /* @__PURE__ */ jsxs("div", { className: "relative z-10 flex w-full items-center gap-6", children: [
@@ -1788,7 +1793,7 @@ var NavLink = forwardRef(
       Pressable,
       {
         ref,
-        href: link.url,
+        href: getLinkUrl(link),
         className: "flex w-full gap-2 transition-opacity duration-300",
         onMouseEnter,
         onMouseLeave,
@@ -1802,8 +1807,8 @@ var NavLink = forwardRef(
             }
           ) }),
           /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-start gap-2", children: [
-            link.label && /* @__PURE__ */ jsx("div", { className: "text-base leading-normal", children: link.label }),
-            /* @__PURE__ */ jsx("div", { className: "text-sm leading-normal text-muted-foreground", children: link.description })
+            link.label && /* @__PURE__ */ jsx("div", { className: "text-sm leading-normal", children: link.label }),
+            /* @__PURE__ */ jsx("div", { className: "text-xs leading-normal text-muted-foreground", children: link.description })
           ] })
         ]
       }

package/dist/navbar-centered-menu.cjs

@@ -987,7 +987,7 @@ function NavigationMenuList({
     {
       "data-slot": "navigation-menu-list",
       className: cn(
-        "group flex flex-1 list-none items-center justify-center gap-1",
+        "group flex flex-1 list-none items-center justify-center gap-6",
         className
       ),
       ...props
@@ -1008,7 +1008,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,
@@ -1028,7 +1028,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 transition duration-300 group-data-[state=open]:rotate-180",
             "aria-hidden": "true"
           }
         )
@@ -1062,7 +1062,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
@@ -1179,7 +1179,7 @@ var SubMenuLink = ({ item }) => {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     Pressable,
     {
-      className: "flex flex-row gap-4 rounded-md p-3 leading-none no-underline transition-colors outline-none select-none hover:bg-muted hover:text-accent-foreground",
+      className: "flex flex-row gap-4 rounded-md p-3 leading-none no-underline transition-colors outline-none select-none hover:bg-muted hover:text-foreground",
       href: item.url,
       children: [
         item.icon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-muted-foreground", children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: item.icon, size: 20, className: "shrink-0" }) }),
@@ -1202,7 +1202,7 @@ var renderMenuItem = (item) => {
     NavigationMenuLink,
     {
       href: item.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",
+      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-foreground",
       children: item.title
     }
   ) }, item.title);
@@ -1316,56 +1316,65 @@ var NavbarCenteredMenu = ({
       className: cn(className),
       pattern,
       patternOpacity,
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("container", containerClassName), children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "nav",
-          {
-            className: cn("hidden justify-between lg:flex", desktopNavClassName),
-            children: [
-              renderLogo(),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-6", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center", children: /* @__PURE__ */ jsxRuntime.jsx(
-                NavigationMenuWithoutViewport,
-                {
-                  className: navigationMenuClassName,
-                  children: /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuList, { className: "relative", children: renderMenu() })
-                }
-              ) }) }),
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex gap-2", actionsClassName), children: renderAuthActions() })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("block lg:hidden", mobileNavClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
-          renderLogo(),
-          /* @__PURE__ */ jsxRuntime.jsxs(Sheet, { children: [
-            /* @__PURE__ */ jsxRuntime.jsx(SheetTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-              Pressable,
+      children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: cn(
+            "container border-b border-border/50 shadow-sm",
+            containerClassName
+          ),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "nav",
               {
-                variant: "outline",
-                size: "icon",
-                asButton: true,
-                onClick: () => {
-                },
-                children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/menu", size: 16 })
+                className: cn("hidden justify-between lg:flex", desktopNavClassName),
+                children: [
+                  renderLogo(),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-6", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center", children: /* @__PURE__ */ jsxRuntime.jsx(
+                    NavigationMenuWithoutViewport,
+                    {
+                      className: navigationMenuClassName,
+                      children: /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuList, { className: "relative", children: renderMenu() })
+                    }
+                  ) }) }),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex gap-2", actionsClassName), children: renderAuthActions() })
+                ]
               }
-            ) }),
-            /* @__PURE__ */ jsxRuntime.jsxs(SheetContent, { className: "overflow-y-auto", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(SheetHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(SheetTitle, { children: renderLogo() }) }),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-6 p-4", children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  Accordion,
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("block lg:hidden", mobileNavClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+              renderLogo(),
+              /* @__PURE__ */ jsxRuntime.jsxs(Sheet, { children: [
+                /* @__PURE__ */ jsxRuntime.jsx(SheetTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+                  Pressable,
                   {
-                    type: "single",
-                    collapsible: true,
-                    className: "flex w-full flex-col gap-4",
-                    children: renderMobileMenu()
+                    variant: "outline",
+                    size: "icon",
+                    asButton: true,
+                    onClick: () => {
+                    },
+                    children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/menu", size: 16 })
                   }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col gap-3", actionsClassName), children: renderAuthActions() })
+                ) }),
+                /* @__PURE__ */ jsxRuntime.jsxs(SheetContent, { className: "overflow-y-auto", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(SheetHeader, { children: /* @__PURE__ */ jsxRuntime.jsx(SheetTitle, { children: renderLogo() }) }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-6 p-4", children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      Accordion,
+                      {
+                        type: "single",
+                        collapsible: true,
+                        className: "flex w-full flex-col gap-4",
+                        children: renderMobileMenu()
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex flex-col gap-3", actionsClassName), children: renderAuthActions() })
+                  ] })
+                ] })
               ] })
-            ] })
-          ] })
-        ] }) })
-      ] })
+            ] }) })
+          ]
+        }
+      )
     }
   );
 };

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

@@ -2,6 +2,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { P as PatternName } from './pattern-background-a7gKHzHy.cjs';
 import { SectionBackground, SectionSpacing } from './types.cjs';
+import { L as LogoConfig } from './types-D2b35ylu.cjs';
 import { A as ActionConfig, O as OptixFlowConfig } from './blocks-Cohq4eio.cjs';
 import 'class-variance-authority';
 import './button-variants-lRElsmTc.cjs';
@@ -9,6 +10,7 @@ import 'class-variance-authority/types';
 
 /**
  * Menu item interface for navigation
+ * Component-specific type using 'title' and 'url' fields
  */
 interface MenuItem {
     title: string;
@@ -17,16 +19,6 @@ interface MenuItem {
     icon?: string;
     items?: MenuItem[];
 }
-/**
- * Logo configuration interface
- */
-interface LogoConfig {
-    url?: string;
-    src?: string;
-    alt?: string;
-    title?: React.ReactNode;
-    className?: string;
-}
 /**
  * Props for the NavbarCenteredMenu component
  */