@opensite/ui 0.4.2 → 0.4.4

package/dist/navbar-sidebar-mobile.js

@@ -863,6 +863,7 @@ var Section = React__default.forwardRef(
     patternClassName,
     ...props
   }, ref) => {
+    const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
     return /* @__PURE__ */ jsxs(
       "section",
       {
@@ -882,7 +883,7 @@ var Section = React__default.forwardRef(
             PatternBackground,
             {
               pattern,
-              opacity: patternOpacity,
+              opacity: effectivePatternOpacity,
               className: patternClassName
             }
           ),
@@ -985,7 +986,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
@@ -1006,7 +1007,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,
@@ -1026,7 +1027,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"
           }
         )
@@ -1084,7 +1085,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
@@ -1197,24 +1198,38 @@ var NavbarSidebarMobile = ({
   const renderLogo = () => {
     if (logoSlot) return logoSlot;
     if (!logo) return null;
-    return /* @__PURE__ */ jsxs(Pressable, { href: logo.url || "/", className: cn("flex items-center gap-2", logoClassName), children: [
-      logo.src && /* @__PURE__ */ jsx(
-        Img,
-        {
-          src: logo.src,
-          className: cn("h-8", logo.className),
-          alt: logo.alt || "Logo",
-          optixFlowConfig
-        }
-      ),
-      logo.title && (typeof logo.title === "string" ? /* @__PURE__ */ jsx("span", { className: "text-lg font-semibold", children: logo.title }) : logo.title)
-    ] });
+    return /* @__PURE__ */ jsxs(
+      Pressable,
+      {
+        href: logo.url || "/",
+        className: cn("flex items-center gap-2", logoClassName),
+        children: [
+          logo.src && /* @__PURE__ */ jsx(
+            Img,
+            {
+              src: logo.src,
+              className: cn("h-8", logo.className),
+              alt: logo.alt || "Logo",
+              optixFlowConfig
+            }
+          ),
+          logo.title && (typeof logo.title === "string" ? /* @__PURE__ */ jsx("span", { className: "text-lg font-semibold", children: logo.title }) : logo.title)
+        ]
+      }
+    );
   };
   const renderAuthActions = () => {
     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,
         {
@@ -1249,90 +1264,132 @@ var NavbarSidebarMobile = ({
       className: cn("border-b", className),
       pattern,
       patternOpacity,
-      children: /* @__PURE__ */ jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxs("nav", { className: cn("flex items-center justify-between py-4", navClassName), children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-8", children: [
-          renderLogo(),
-          /* @__PURE__ */ jsx(NavigationMenu, { className: cn("hidden lg:flex", navigationMenuClassName), children: /* @__PURE__ */ jsx(NavigationMenuList, { children: menuSlot ? menuSlot : renderMenu()?.map(
-            (item, index) => item.items ? /* @__PURE__ */ jsxs(NavigationMenuItem, { children: [
-              /* @__PURE__ */ jsx(NavigationMenuTrigger, { children: item.title }),
-              /* @__PURE__ */ jsx(NavigationMenuContent, { children: /* @__PURE__ */ jsx("ul", { className: "grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2", children: item.items.map((subItem, subIndex) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(NavigationMenuLink, { asChild: true, children: /* @__PURE__ */ jsxs(
-                Pressable,
+      children: /* @__PURE__ */ jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxs(
+        "nav",
+        {
+          className: cn("flex items-center justify-between py-4", navClassName),
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-8", children: [
+              renderLogo(),
+              /* @__PURE__ */ jsx(
+                NavigationMenu,
                 {
-                  href: subItem.url,
-                  className: "block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
-                  children: [
-                    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-                      subItem.icon && /* @__PURE__ */ jsx(DynamicIcon, { name: subItem.icon, size: 16 }),
-                      /* @__PURE__ */ jsx("div", { className: "text-sm font-medium leading-none", children: subItem.title })
-                    ] }),
-                    subItem.description && /* @__PURE__ */ jsx("p", { className: "line-clamp-2 text-sm leading-snug text-muted-foreground", children: subItem.description })
-                  ]
+                  className: cn("hidden lg:flex", navigationMenuClassName),
+                  children: /* @__PURE__ */ jsx(NavigationMenuList, { children: menuSlot ? menuSlot : renderMenu()?.map(
+                    (item, index) => item.items ? /* @__PURE__ */ jsxs(NavigationMenuItem, { children: [
+                      /* @__PURE__ */ jsx(NavigationMenuTrigger, { children: item.title }),
+                      /* @__PURE__ */ jsx(NavigationMenuContent, { children: /* @__PURE__ */ jsx("ul", { className: "grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2", children: item.items.map((subItem, subIndex) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(NavigationMenuLink, { asChild: true, children: /* @__PURE__ */ jsxs(
+                        Pressable,
+                        {
+                          href: subItem.url,
+                          className: "block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
+                          children: [
+                            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                              subItem.icon && /* @__PURE__ */ jsx(
+                                DynamicIcon,
+                                {
+                                  name: subItem.icon,
+                                  size: 16
+                                }
+                              ),
+                              /* @__PURE__ */ jsx("div", { className: "text-sm font-medium leading-none", children: subItem.title })
+                            ] }),
+                            subItem.description && /* @__PURE__ */ jsx("p", { className: "line-clamp-2 text-sm leading-snug text-muted-foreground", children: subItem.description })
+                          ]
+                        }
+                      ) }) }, subIndex)) }) })
+                    ] }, index) : /* @__PURE__ */ jsx(NavigationMenuItem, { children: /* @__PURE__ */ jsx(
+                      NavigationMenuLink,
+                      {
+                        asChild: true,
+                        className: navigationMenuTriggerStyle(),
+                        children: /* @__PURE__ */ jsx(Pressable, { href: item.url, children: item.title })
+                      }
+                    ) }, index)
+                  ) })
                 }
-              ) }) }, subIndex)) }) })
-            ] }, index) : /* @__PURE__ */ jsx(NavigationMenuItem, { children: /* @__PURE__ */ jsx(
-              NavigationMenuLink,
+              )
+            ] }),
+            /* @__PURE__ */ jsx(
+              "div",
               {
-                asChild: true,
-                className: navigationMenuTriggerStyle(),
-                children: /* @__PURE__ */ jsx(Pressable, { href: item.url, children: item.title })
+                className: cn(
+                  "hidden items-center gap-2 lg:flex",
+                  actionsClassName
+                ),
+                children: renderAuthActions()
               }
-            ) }, index)
-          ) }) })
-        ] }),
-        /* @__PURE__ */ jsx("div", { className: cn("hidden items-center gap-2 lg:flex", actionsClassName), children: renderAuthActions() }),
-        /* @__PURE__ */ jsxs(Sheet, { open: isOpen, onOpenChange: setIsOpen, children: [
-          /* @__PURE__ */ jsx(SheetTrigger, { asChild: true, className: "lg:hidden", children: /* @__PURE__ */ jsxs(Pressable, { variant: "outline", size: "icon", asButton: true, onClick: () => {
-          }, children: [
-            /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/menu", size: 20 }),
-            /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Toggle menu" })
-          ] }) }),
-          /* @__PURE__ */ jsxs(SheetContent, { side: "left", className: "w-[300px] sm:w-[350px]", children: [
-            /* @__PURE__ */ jsx(SheetTitle, { className: "sr-only", children: "Navigation Menu" }),
-            /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col", children: [
-              /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between border-b pb-4", children: renderLogo() }),
-              /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto py-4", children: /* @__PURE__ */ jsx(Accordion, { type: "single", collapsible: true, className: "w-full", children: menuSlot ? menuSlot : renderMenu()?.map(
-                (item, index) => item.items ? /* @__PURE__ */ jsxs(AccordionItem, { value: `item-${index}`, children: [
-                  /* @__PURE__ */ jsx(AccordionTrigger, { className: "text-base hover:no-underline", children: item.title }),
-                  /* @__PURE__ */ jsx(AccordionContent, { children: /* @__PURE__ */ jsx("div", { className: "flex flex-col space-y-2 pl-4", children: item.items.map((subItem, subIndex) => /* @__PURE__ */ jsxs(
-                    Pressable,
-                    {
-                      href: subItem.url,
-                      className: "flex items-center gap-2 rounded-md py-2 text-sm text-muted-foreground hover:text-foreground",
-                      onClick: () => setIsOpen(false),
-                      children: [
-                        subItem.icon && /* @__PURE__ */ jsx(DynamicIcon, { name: subItem.icon, size: 14 }),
-                        subItem.title
-                      ]
-                    },
-                    subIndex
-                  )) }) })
-                ] }, index) : /* @__PURE__ */ jsx("div", { className: "border-b py-4", children: /* @__PURE__ */ jsx(
-                  Pressable,
-                  {
-                    href: item.url,
-                    className: "text-base font-medium",
-                    onClick: () => setIsOpen(false),
-                    children: item.title
-                  }
-                ) }, index)
-              ) }) }),
-              /* @__PURE__ */ jsxs("div", { className: "border-t pt-4", children: [
-                /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: renderAuthActions() }),
-                /* @__PURE__ */ jsx("div", { className: "mt-4 flex flex-wrap gap-x-4 gap-y-2", children: mobileExtraLinksSlot ? mobileExtraLinksSlot : renderMobileExtraLinks()?.map((link, index) => /* @__PURE__ */ jsx(
-                  Pressable,
-                  {
-                    href: link.url,
-                    className: "text-xs text-muted-foreground hover:text-foreground",
-                    onClick: () => setIsOpen(false),
-                    children: link.title
+            ),
+            /* @__PURE__ */ jsxs(Sheet, { open: isOpen, onOpenChange: setIsOpen, children: [
+              /* @__PURE__ */ jsx(SheetTrigger, { asChild: true, className: "lg:hidden", children: /* @__PURE__ */ jsxs(
+                Pressable,
+                {
+                  variant: "outline",
+                  size: "icon",
+                  asButton: true,
+                  onClick: () => {
                   },
-                  index
-                )) })
+                  children: [
+                    /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/menu", size: 20 }),
+                    /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Toggle menu" })
+                  ]
+                }
+              ) }),
+              /* @__PURE__ */ jsxs(SheetContent, { side: "left", className: "w-[300px] sm:w-[350px]", children: [
+                /* @__PURE__ */ jsx(SheetTitle, { className: "sr-only", children: "Navigation Menu" }),
+                /* @__PURE__ */ jsxs("div", { className: "flex h-full flex-col", children: [
+                  /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between border-b pb-4", children: renderLogo() }),
+                  /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto py-4", children: /* @__PURE__ */ jsx(Accordion, { type: "single", collapsible: true, className: "w-full", children: menuSlot ? menuSlot : renderMenu()?.map(
+                    (item, index) => item.items ? /* @__PURE__ */ jsxs(AccordionItem, { value: `item-${index}`, children: [
+                      /* @__PURE__ */ jsx(AccordionTrigger, { className: "text-base hover:no-underline", children: item.title }),
+                      /* @__PURE__ */ jsx(AccordionContent, { children: /* @__PURE__ */ jsx("div", { className: "flex flex-col space-y-2 pl-4", children: item.items.map((subItem, subIndex) => /* @__PURE__ */ jsxs(
+                        Pressable,
+                        {
+                          href: subItem.url,
+                          className: "flex items-center gap-2 rounded-md py-2 text-sm text-muted-foreground hover:text-foreground",
+                          onClick: () => setIsOpen(false),
+                          children: [
+                            subItem.icon && /* @__PURE__ */ jsx(
+                              DynamicIcon,
+                              {
+                                name: subItem.icon,
+                                size: 14
+                              }
+                            ),
+                            subItem.title
+                          ]
+                        },
+                        subIndex
+                      )) }) })
+                    ] }, index) : /* @__PURE__ */ jsx("div", { className: "border-b py-4", children: /* @__PURE__ */ jsx(
+                      Pressable,
+                      {
+                        href: item.url,
+                        className: "text-base font-medium",
+                        onClick: () => setIsOpen(false),
+                        children: item.title
+                      }
+                    ) }, index)
+                  ) }) }),
+                  /* @__PURE__ */ jsxs("div", { className: "border-t pt-4", children: [
+                    /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: renderAuthActions() }),
+                    /* @__PURE__ */ jsx("div", { className: "mt-4 flex flex-wrap gap-x-4 gap-y-2", children: mobileExtraLinksSlot ? mobileExtraLinksSlot : renderMobileExtraLinks()?.map((link, index) => /* @__PURE__ */ jsx(
+                      Pressable,
+                      {
+                        href: link.url,
+                        className: "text-xs text-muted-foreground hover:text-foreground",
+                        onClick: () => setIsOpen(false),
+                        children: link.title
+                      },
+                      index
+                    )) })
+                  ] })
+                ] })
               ] })
             ] })
-          ] })
-        ] })
-      ] }) })
+          ]
+        }
+      ) })
     }
   );
 };

package/dist/navbar-simple-links.cjs

@@ -885,6 +885,7 @@ var Section = React__namespace.default.forwardRef(
     patternClassName,
     ...props
   }, ref) => {
+    const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "section",
       {
@@ -904,7 +905,7 @@ var Section = React__namespace.default.forwardRef(
             PatternBackground,
             {
               pattern,
-              opacity: patternOpacity,
+              opacity: effectivePatternOpacity,
               className: patternClassName
             }
           ),
@@ -953,7 +954,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
@@ -974,7 +975,7 @@ function NavigationMenuItem({
   );
 }
 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 NavigationMenuViewport({
   className,
@@ -1009,7 +1010,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
@@ -1070,13 +1071,26 @@ var AnimatedHamburger = ({ isOpen }) => {
     )
   ] }) });
 };
-var MobileNav = ({ navItems, activeItem, setActiveItem, actions, actionsSlot }) => {
+var MobileNav = ({
+  navItems,
+  activeItem,
+  setActiveItem,
+  actions,
+  actionsSlot
+}) => {
   const [isOpen, setIsOpen] = React.useState(false);
   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;
+      const {
+        label,
+        icon,
+        iconAfter,
+        children,
+        className: actionClassName,
+        ...pressableProps
+      } = action;
       return /* @__PURE__ */ jsxRuntime.jsx(
         Pressable,
         {
@@ -1141,7 +1155,9 @@ var NavbarSimpleLinks = ({
   patternOpacity,
   optixFlowConfig
 }) => {
-  const [activeItem, setActiveItem] = React.useState(defaultActiveItem || navItems?.[0]?.name || "");
+  const [activeItem, setActiveItem] = React.useState(
+    defaultActiveItem || navItems?.[0]?.name || ""
+  );
   const indicatorRef = React.useRef(null);
   const menuRef = React.useRef(null);
   React.useEffect(() => {
@@ -1163,18 +1179,25 @@ var NavbarSimpleLinks = ({
   const renderLogo = () => {
     if (logoSlot) return logoSlot;
     if (!logo) return null;
-    return /* @__PURE__ */ jsxRuntime.jsxs(Pressable, { href: logo.url || "/", className: cn("flex items-center gap-2", logoClassName), children: [
-      logo.src && /* @__PURE__ */ jsxRuntime.jsx(
-        img.Img,
-        {
-          src: logo.src,
-          className: cn("max-h-8 w-8", logo.className),
-          alt: logo.alt || "Logo",
-          optixFlowConfig
-        }
-      ),
-      logo.title && (typeof logo.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-lg font-semibold tracking-tighter", children: logo.title }) : logo.title)
-    ] });
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      Pressable,
+      {
+        href: logo.url || "/",
+        className: cn("flex items-center gap-2", logoClassName),
+        children: [
+          logo.src && /* @__PURE__ */ jsxRuntime.jsx(
+            img.Img,
+            {
+              src: logo.src,
+              className: cn("max-h-8 w-8", logo.className),
+              alt: logo.alt || "Logo",
+              optixFlowConfig
+            }
+          ),
+          logo.title && (typeof logo.title === "string" ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-lg font-semibold tracking-tighter", children: logo.title }) : logo.title)
+        ]
+      }
+    );
   };
   const renderNavItems = () => {
     if (navItemsSlot) return navItemsSlot;
@@ -1184,7 +1207,7 @@ var NavbarSimpleLinks = ({
       {
         "data-nav-item": item.name,
         onClick: () => setActiveItem(item.name),
-        className: `relative cursor-pointer text-sm font-medium hover:bg-transparent ${activeItem === item.name ? "text-foreground" : "text-muted-foreground"}`,
+        className: `relative cursor-pointer rounded-md px-3 py-2 text-sm font-medium transition-colors hover:bg-muted ${activeItem === item.name ? "text-foreground" : "text-muted-foreground hover:text-foreground"}`,
         children: item.name
       }
     ) }) }, item.name));
@@ -1193,7 +1216,14 @@ var NavbarSimpleLinks = ({
     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;
+      const {
+        label,
+        icon,
+        iconAfter,
+        children,
+        className: actionClassName,
+        ...pressableProps
+      } = action;
       return /* @__PURE__ */ jsxRuntime.jsx(
         Pressable,
         {
@@ -1220,24 +1250,33 @@ var NavbarSimpleLinks = ({
       patternOpacity,
       children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("container", containerClassName), children: /* @__PURE__ */ jsxRuntime.jsxs("nav", { className: cn("flex items-center justify-between", navClassName), children: [
         renderLogo(),
-        /* @__PURE__ */ jsxRuntime.jsx(NavigationMenu, { className: cn("hidden lg:block", navigationMenuClassName), children: /* @__PURE__ */ jsxRuntime.jsxs(
-          NavigationMenuList,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          NavigationMenu,
           {
-            ref: menuRef,
-            className: cn("flex items-center gap-6 rounded-4xl px-8 py-3", menuListClassName),
-            children: [
-              renderNavItems(),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                "div",
-                {
-                  ref: indicatorRef,
-                  className: "absolute bottom-2 flex h-1 items-center justify-center px-2 transition-all duration-300",
-                  children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-0.5 w-full rounded-t-none bg-foreground transition-all duration-300" })
-                }
-              )
-            ]
+            className: cn("hidden lg:block", navigationMenuClassName),
+            children: /* @__PURE__ */ jsxRuntime.jsxs(
+              NavigationMenuList,
+              {
+                ref: menuRef,
+                className: cn(
+                  "flex items-center gap-6 rounded-4xl px-8 py-3",
+                  menuListClassName
+                ),
+                children: [
+                  renderNavItems(),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      ref: indicatorRef,
+                      className: "absolute bottom-2 flex h-1 items-center justify-center px-2 transition-all duration-300",
+                      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-0.5 w-full rounded-t-none bg-foreground transition-all duration-300" })
+                    }
+                  )
+                ]
+              }
+            )
           }
-        ) }),
+        ),
         /* @__PURE__ */ jsxRuntime.jsx(
           MobileNav,
           {
@@ -1248,7 +1287,16 @@ var NavbarSimpleLinks = ({
             actionsSlot
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("hidden items-center gap-2 lg:flex", actionsClassName), children: renderActions() })
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: cn(
+              "hidden items-center gap-2 lg:flex",
+              actionsClassName
+            ),
+            children: renderActions()
+          }
+        )
       ] }) })
     }
   );

package/dist/navbar-simple-links.d.cts

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

package/dist/navbar-simple-links.d.ts

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