@opensite/ui 1.1.2 → 1.1.4

package/dist/navbar-tabbed-sections.cjs

@@ -7,6 +7,7 @@ var tailwindMerge = require('tailwind-merge');
 var classVarianceAuthority = require('class-variance-authority');
 var jsxRuntime = require('react/jsx-runtime');
 var img = require('@page-speed/img');
+var AccordionPrimitive = require('@radix-ui/react-accordion');
 var NavigationMenuPrimitive = require('@radix-ui/react-navigation-menu');
 var TabsPrimitive = require('@radix-ui/react-tabs');
 
@@ -29,6 +30,7 @@ function _interopNamespace(e) {
 }
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var AccordionPrimitive__namespace = /*#__PURE__*/_interopNamespace(AccordionPrimitive);
 var NavigationMenuPrimitive__namespace = /*#__PURE__*/_interopNamespace(NavigationMenuPrimitive);
 var TabsPrimitive__namespace = /*#__PURE__*/_interopNamespace(TabsPrimitive);
 
@@ -994,6 +996,66 @@ var NavbarLogo = ({
     }
   );
 };
+function Accordion({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(AccordionPrimitive__namespace.Root, { "data-slot": "accordion", ...props });
+}
+function AccordionItem({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    AccordionPrimitive__namespace.Item,
+    {
+      "data-slot": "accordion-item",
+      className: cn("border-b ", className),
+      ...props
+    }
+  );
+}
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(AccordionPrimitive__namespace.Header, { className: "flex", children: /* @__PURE__ */ jsxRuntime.jsxs(
+    AccordionPrimitive__namespace.Trigger,
+    {
+      "data-slot": "accordion-trigger",
+      className: cn(
+        "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-center justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          DynamicIcon,
+          {
+            name: "lucide/chevron-down",
+            className: "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200"
+          }
+        )
+      ]
+    }
+  ) });
+}
+function AccordionContent({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    AccordionPrimitive__namespace.Content,
+    {
+      "data-slot": "accordion-content",
+      className: "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm",
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("pt-0 pb-4", className), children })
+    }
+  );
+}
 function NavigationMenu({
   className,
   children,
@@ -1270,7 +1332,7 @@ function getNavbarLayoutClasses(layoutVariant = "fullScreenContainerizedLinks",
     // Section wrapper classes - always full width for non-floating variants
     sectionClasses: cn(
       "inset-x-0 z-20",
-      isFloatingBar ? "sticky top-4" : "top-0",
+      isFloatingBar ? "sticky top-4" : "fixed top-0",
       customClasses?.className
     ),
     // Outer container wrapper (only for floating bar - this containerizes the entire navbar)
@@ -1349,13 +1411,13 @@ var NavbarTabbedSections = ({
     if (!menu || menu.length === 0) return null;
     return menu.map(
       (item, index) => item.tabs ? /* @__PURE__ */ jsxRuntime.jsxs(NavigationMenuItem, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuTrigger, { children: item.title }),
+        /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuTrigger, { className: "bg-transparent hover:bg-muted", children: item.title }),
         /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuContent, { children: /* @__PURE__ */ jsxRuntime.jsxs(Tabs, { defaultValue: item.tabs[0]?.id, className: "w-[600px]", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-b px-4 pt-2", children: /* @__PURE__ */ jsxRuntime.jsx(TabsList, { className: "h-auto bg-transparent p-0", children: item.tabs.map((tab) => /* @__PURE__ */ jsxRuntime.jsx(
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-b-2 px-4 pt-2", children: /* @__PURE__ */ jsxRuntime.jsx(TabsList, { className: "h-auto bg-transparent p-0", children: item.tabs.map((tab) => /* @__PURE__ */ jsxRuntime.jsx(
             TabsTrigger,
             {
               value: tab.id,
-              className: "rounded-none border-b-2 border-transparent px-4 py-2 data-[state=active]:border-b-primary hover:border-b-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none",
+              className: "-mb-2 rounded-none border-b-2 border-transparent px-4 py-2 data-[state=active]:border-b-primary data-[state=active]:text-primary hover:border-b-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none",
               children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
                 tab.icon && /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: tab.icon, size: 16 }),
                 tab.title
@@ -1364,20 +1426,28 @@ var NavbarTabbedSections = ({
             tab.id
           )) }) }),
           item.tabs.map((tab) => /* @__PURE__ */ jsxRuntime.jsx(TabsContent, { value: tab.id, className: "mt-0 p-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-6", children: [
-            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 space-y-1", children: tab.links.map((link, linkIndex) => /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuLink, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
-              Pressable,
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 grid grid-cols-2 space-y-2 space-x-4", children: tab.links.map((link, linkIndex) => /* @__PURE__ */ jsxRuntime.jsx(
+              NavigationMenuLink,
               {
-                href: link.url,
-                className: "flex items-start gap-3 rounded-md p-3 hover:bg-muted",
-                children: [
-                  link.icon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-md border border-muted bg-background", children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: link.icon, size: 16 }) }),
-                  /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-medium", children: link.title }),
-                    link.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs", children: link.description })
-                  ] })
-                ]
-              }
-            ) }, linkIndex)) }),
+                asChild: true,
+                className: "w-full",
+                children: /* @__PURE__ */ jsxRuntime.jsxs(
+                  Pressable,
+                  {
+                    href: link.url,
+                    className: "w-full flex items-start gap-3 rounded-md p-3 hover:bg-muted",
+                    children: [
+                      link.icon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-md border bg-background", children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: link.icon, size: 16 }) }),
+                      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-medium", children: link.title }),
+                        link.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs", children: link.description })
+                      ] })
+                    ]
+                  }
+                )
+              },
+              linkIndex
+            )) }),
             tab.featured && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-[200px] shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuLink, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
               Pressable,
               {
@@ -1415,39 +1485,58 @@ var NavbarTabbedSections = ({
   const renderMobileMenu = React.useMemo(() => {
     if (menuSlot) return menuSlot;
     if (!menu || menu.length === 0) return null;
-    return menu.map(
-      (item, index) => item.tabs ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm font-semibold", children: item.title }),
-        item.tabs.map((tab) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-1 pl-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 text-xs font-medium text-muted-foreground", children: [
-            tab.icon && /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: tab.icon, size: 14 }),
-            tab.title
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-1 pl-4", children: tab.links.map((link, linkIndex) => /* @__PURE__ */ jsxRuntime.jsxs(
-            Pressable,
-            {
-              href: link.url,
-              className: "flex items-center gap-2 rounded-md py-1.5 text-sm",
-              onClick: () => setIsOpen(false),
-              children: [
-                link.icon && /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: link.icon, size: 14 }),
-                link.title
-              ]
-            },
-            linkIndex
-          )) })
-        ] }, tab.id))
-      ] }, index) : /* @__PURE__ */ jsxRuntime.jsx(
+    return /* @__PURE__ */ jsxRuntime.jsx(Accordion, { type: "multiple", className: "w-full", children: menu.map((item, index) => {
+      if (item.tabs && item.tabs.length > 0) {
+        return /* @__PURE__ */ jsxRuntime.jsxs(
+          AccordionItem,
+          {
+            value: `nav-${index}`,
+            className: "border-b-0",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(AccordionTrigger, { className: "h-15 items-center p-0 px-4! text-base leading-[3.75] font-normal text-muted-foreground hover:bg-muted hover:no-underline", children: item.title }),
+              /* @__PURE__ */ jsxRuntime.jsx(AccordionContent, { className: "overflow-x-none pb-4", children: /* @__PURE__ */ jsxRuntime.jsx(Accordion, { type: "multiple", className: "w-full pl-4", children: item.tabs.map((tab) => /* @__PURE__ */ jsxRuntime.jsxs(
+                AccordionItem,
+                {
+                  value: tab.id,
+                  className: "border-b-0",
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(AccordionTrigger, { className: "h-12 items-center p-0 px-4! text-sm leading-[3] font-medium text-muted-foreground hover:bg-muted hover:no-underline", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+                      tab.icon && /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: tab.icon, size: 14 }),
+                      tab.title
+                    ] }) }),
+                    /* @__PURE__ */ jsxRuntime.jsx(AccordionContent, { className: "overflow-x-none", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-1 pl-4", children: tab.links.map((link, linkIndex) => /* @__PURE__ */ jsxRuntime.jsxs(
+                      Pressable,
+                      {
+                        href: link.url,
+                        className: "flex items-center gap-2 rounded-md px-4 py-2 text-sm hover:bg-muted",
+                        onClick: () => setIsOpen(false),
+                        children: [
+                          link.icon && /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: link.icon, size: 14 }),
+                          link.title
+                        ]
+                      },
+                      linkIndex
+                    )) }) })
+                  ]
+                },
+                tab.id
+              )) }) })
+            ]
+          },
+          `nav-item-${index}`
+        );
+      }
+      return /* @__PURE__ */ jsxRuntime.jsx(
         Pressable,
         {
           href: item.url,
-          className: "text-sm font-medium",
+          className: "flex h-15 items-center px-4 text-base font-normal text-muted-foreground hover:bg-muted",
           onClick: () => setIsOpen(false),
           children: item.title
         },
-        index
-      )
-    );
+        `nav-link-${index}`
+      );
+    }) });
   }, [menuSlot, menu]);
   const {
     sectionClasses,

package/dist/navbar-tabbed-sections.js

@@ -6,6 +6,7 @@ import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Img } from '@page-speed/img';
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 
@@ -971,6 +972,66 @@ var NavbarLogo = ({
     }
   );
 };
+function Accordion({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(AccordionPrimitive.Root, { "data-slot": "accordion", ...props });
+}
+function AccordionItem({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    AccordionPrimitive.Item,
+    {
+      "data-slot": "accordion-item",
+      className: cn("border-b ", className),
+      ...props
+    }
+  );
+}
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(AccordionPrimitive.Header, { className: "flex", children: /* @__PURE__ */ jsxs(
+    AccordionPrimitive.Trigger,
+    {
+      "data-slot": "accordion-trigger",
+      className: cn(
+        "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-center justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(
+          DynamicIcon,
+          {
+            name: "lucide/chevron-down",
+            className: "text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200"
+          }
+        )
+      ]
+    }
+  ) });
+}
+function AccordionContent({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    AccordionPrimitive.Content,
+    {
+      "data-slot": "accordion-content",
+      className: "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm",
+      ...props,
+      children: /* @__PURE__ */ jsx("div", { className: cn("pt-0 pb-4", className), children })
+    }
+  );
+}
 function NavigationMenu({
   className,
   children,
@@ -1247,7 +1308,7 @@ function getNavbarLayoutClasses(layoutVariant = "fullScreenContainerizedLinks",
     // Section wrapper classes - always full width for non-floating variants
     sectionClasses: cn(
       "inset-x-0 z-20",
-      isFloatingBar ? "sticky top-4" : "top-0",
+      isFloatingBar ? "sticky top-4" : "fixed top-0",
       customClasses?.className
     ),
     // Outer container wrapper (only for floating bar - this containerizes the entire navbar)
@@ -1326,13 +1387,13 @@ var NavbarTabbedSections = ({
     if (!menu || menu.length === 0) return null;
     return menu.map(
       (item, index) => item.tabs ? /* @__PURE__ */ jsxs(NavigationMenuItem, { children: [
-        /* @__PURE__ */ jsx(NavigationMenuTrigger, { children: item.title }),
+        /* @__PURE__ */ jsx(NavigationMenuTrigger, { className: "bg-transparent hover:bg-muted", children: item.title }),
         /* @__PURE__ */ jsx(NavigationMenuContent, { children: /* @__PURE__ */ jsxs(Tabs, { defaultValue: item.tabs[0]?.id, className: "w-[600px]", children: [
-          /* @__PURE__ */ jsx("div", { className: "border-b px-4 pt-2", children: /* @__PURE__ */ jsx(TabsList, { className: "h-auto bg-transparent p-0", children: item.tabs.map((tab) => /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx("div", { className: "border-b-2 px-4 pt-2", children: /* @__PURE__ */ jsx(TabsList, { className: "h-auto bg-transparent p-0", children: item.tabs.map((tab) => /* @__PURE__ */ jsx(
             TabsTrigger,
             {
               value: tab.id,
-              className: "rounded-none border-b-2 border-transparent px-4 py-2 data-[state=active]:border-b-primary hover:border-b-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none",
+              className: "-mb-2 rounded-none border-b-2 border-transparent px-4 py-2 data-[state=active]:border-b-primary data-[state=active]:text-primary hover:border-b-primary data-[state=active]:bg-transparent data-[state=active]:shadow-none",
               children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
                 tab.icon && /* @__PURE__ */ jsx(DynamicIcon, { name: tab.icon, size: 16 }),
                 tab.title
@@ -1341,20 +1402,28 @@ var NavbarTabbedSections = ({
             tab.id
           )) }) }),
           item.tabs.map((tab) => /* @__PURE__ */ jsx(TabsContent, { value: tab.id, className: "mt-0 p-4", children: /* @__PURE__ */ jsxs("div", { className: "flex gap-6", children: [
-            /* @__PURE__ */ jsx("div", { className: "flex-1 space-y-1", children: tab.links.map((link, linkIndex) => /* @__PURE__ */ jsx(NavigationMenuLink, { asChild: true, children: /* @__PURE__ */ jsxs(
-              Pressable,
+            /* @__PURE__ */ jsx("div", { className: "flex-1 grid grid-cols-2 space-y-2 space-x-4", children: tab.links.map((link, linkIndex) => /* @__PURE__ */ jsx(
+              NavigationMenuLink,
               {
-                href: link.url,
-                className: "flex items-start gap-3 rounded-md p-3 hover:bg-muted",
-                children: [
-                  link.icon && /* @__PURE__ */ jsx("div", { className: "mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-md border border-muted bg-background", children: /* @__PURE__ */ jsx(DynamicIcon, { name: link.icon, size: 16 }) }),
-                  /* @__PURE__ */ jsxs("div", { children: [
-                    /* @__PURE__ */ jsx("div", { className: "text-sm font-medium", children: link.title }),
-                    link.description && /* @__PURE__ */ jsx("p", { className: "text-xs", children: link.description })
-                  ] })
-                ]
-              }
-            ) }, linkIndex)) }),
+                asChild: true,
+                className: "w-full",
+                children: /* @__PURE__ */ jsxs(
+                  Pressable,
+                  {
+                    href: link.url,
+                    className: "w-full flex items-start gap-3 rounded-md p-3 hover:bg-muted",
+                    children: [
+                      link.icon && /* @__PURE__ */ jsx("div", { className: "mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-md border bg-background", children: /* @__PURE__ */ jsx(DynamicIcon, { name: link.icon, size: 16 }) }),
+                      /* @__PURE__ */ jsxs("div", { children: [
+                        /* @__PURE__ */ jsx("div", { className: "text-sm font-medium", children: link.title }),
+                        link.description && /* @__PURE__ */ jsx("p", { className: "text-xs", children: link.description })
+                      ] })
+                    ]
+                  }
+                )
+              },
+              linkIndex
+            )) }),
             tab.featured && /* @__PURE__ */ jsx("div", { className: "w-[200px] shrink-0", children: /* @__PURE__ */ jsx(NavigationMenuLink, { asChild: true, children: /* @__PURE__ */ jsxs(
               Pressable,
               {
@@ -1392,39 +1461,58 @@ var NavbarTabbedSections = ({
   const renderMobileMenu = useMemo(() => {
     if (menuSlot) return menuSlot;
     if (!menu || menu.length === 0) return null;
-    return menu.map(
-      (item, index) => item.tabs ? /* @__PURE__ */ jsxs("div", { className: "space-y-3", children: [
-        /* @__PURE__ */ jsx("div", { className: "text-sm font-semibold", children: item.title }),
-        item.tabs.map((tab) => /* @__PURE__ */ jsxs("div", { className: "space-y-1 pl-2", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-xs font-medium text-muted-foreground", children: [
-            tab.icon && /* @__PURE__ */ jsx(DynamicIcon, { name: tab.icon, size: 14 }),
-            tab.title
-          ] }),
-          /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1 pl-4", children: tab.links.map((link, linkIndex) => /* @__PURE__ */ jsxs(
-            Pressable,
-            {
-              href: link.url,
-              className: "flex items-center gap-2 rounded-md py-1.5 text-sm",
-              onClick: () => setIsOpen(false),
-              children: [
-                link.icon && /* @__PURE__ */ jsx(DynamicIcon, { name: link.icon, size: 14 }),
-                link.title
-              ]
-            },
-            linkIndex
-          )) })
-        ] }, tab.id))
-      ] }, index) : /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx(Accordion, { type: "multiple", className: "w-full", children: menu.map((item, index) => {
+      if (item.tabs && item.tabs.length > 0) {
+        return /* @__PURE__ */ jsxs(
+          AccordionItem,
+          {
+            value: `nav-${index}`,
+            className: "border-b-0",
+            children: [
+              /* @__PURE__ */ jsx(AccordionTrigger, { className: "h-15 items-center p-0 px-4! text-base leading-[3.75] font-normal text-muted-foreground hover:bg-muted hover:no-underline", children: item.title }),
+              /* @__PURE__ */ jsx(AccordionContent, { className: "overflow-x-none pb-4", children: /* @__PURE__ */ jsx(Accordion, { type: "multiple", className: "w-full pl-4", children: item.tabs.map((tab) => /* @__PURE__ */ jsxs(
+                AccordionItem,
+                {
+                  value: tab.id,
+                  className: "border-b-0",
+                  children: [
+                    /* @__PURE__ */ jsx(AccordionTrigger, { className: "h-12 items-center p-0 px-4! text-sm leading-[3] font-medium text-muted-foreground hover:bg-muted hover:no-underline", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                      tab.icon && /* @__PURE__ */ jsx(DynamicIcon, { name: tab.icon, size: 14 }),
+                      tab.title
+                    ] }) }),
+                    /* @__PURE__ */ jsx(AccordionContent, { className: "overflow-x-none", children: /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-1 pl-4", children: tab.links.map((link, linkIndex) => /* @__PURE__ */ jsxs(
+                      Pressable,
+                      {
+                        href: link.url,
+                        className: "flex items-center gap-2 rounded-md px-4 py-2 text-sm hover:bg-muted",
+                        onClick: () => setIsOpen(false),
+                        children: [
+                          link.icon && /* @__PURE__ */ jsx(DynamicIcon, { name: link.icon, size: 14 }),
+                          link.title
+                        ]
+                      },
+                      linkIndex
+                    )) }) })
+                  ]
+                },
+                tab.id
+              )) }) })
+            ]
+          },
+          `nav-item-${index}`
+        );
+      }
+      return /* @__PURE__ */ jsx(
         Pressable,
         {
           href: item.url,
-          className: "text-sm font-medium",
+          className: "flex h-15 items-center px-4 text-base font-normal text-muted-foreground hover:bg-muted",
           onClick: () => setIsOpen(false),
           children: item.title
         },
-        index
-      )
-    );
+        `nav-link-${index}`
+      );
+    }) });
   }, [menuSlot, menu]);
   const {
     sectionClasses,

package/dist/navbar-transparent-overlay.cjs

@@ -1216,7 +1216,7 @@ function getNavbarLayoutClasses(layoutVariant = "fullScreenContainerizedLinks",
     // Section wrapper classes - always full width for non-floating variants
     sectionClasses: cn(
       "inset-x-0 z-20",
-      isFloatingBar ? "sticky top-4" : "top-0",
+      isFloatingBar ? "sticky top-4" : "fixed top-0",
       customClasses?.className
     ),
     // Outer container wrapper (only for floating bar - this containerizes the entire navbar)
@@ -1404,18 +1404,10 @@ var NavbarTransparentOverlay = ({
                   onClick: () => setIsOpen(true),
                   className: cn(
                     "size-11",
-                    !isScrolled && "hover:bg-white/10"
+                    !isScrolled && "hover:bg-white/10",
+                    isScrolled ? "text-foreground" : "text-white"
                   ),
-                  children: /* @__PURE__ */ jsxRuntime.jsx(
-                    DynamicIcon,
-                    {
-                      name: "lucide/menu",
-                      size: 16,
-                      className: cn(
-                        isScrolled ? "stroke-foreground" : "stroke-white"
-                      )
-                    }
-                  )
+                  children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/menu", size: 16 })
                 }
               ) })
             ] }) })

package/dist/navbar-transparent-overlay.js

@@ -1194,7 +1194,7 @@ function getNavbarLayoutClasses(layoutVariant = "fullScreenContainerizedLinks",
     // Section wrapper classes - always full width for non-floating variants
     sectionClasses: cn(
       "inset-x-0 z-20",
-      isFloatingBar ? "sticky top-4" : "top-0",
+      isFloatingBar ? "sticky top-4" : "fixed top-0",
       customClasses?.className
     ),
     // Outer container wrapper (only for floating bar - this containerizes the entire navbar)
@@ -1382,18 +1382,10 @@ var NavbarTransparentOverlay = ({
                   onClick: () => setIsOpen(true),
                   className: cn(
                     "size-11",
-                    !isScrolled && "hover:bg-white/10"
+                    !isScrolled && "hover:bg-white/10",
+                    isScrolled ? "text-foreground" : "text-white"
                   ),
-                  children: /* @__PURE__ */ jsx(
-                    DynamicIcon,
-                    {
-                      name: "lucide/menu",
-                      size: 16,
-                      className: cn(
-                        isScrolled ? "stroke-foreground" : "stroke-white"
-                      )
-                    }
-                  )
+                  children: /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/menu", size: 16 })
                 }
               ) })
             ] }) })