@opensite/ui 0.4.1 → 0.4.3

package/dist/navbar-animated-preview.js

@@ -866,6 +866,7 @@ var Section = React__default.forwardRef(
     patternClassName,
     ...props
   }, ref) => {
+    const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
     return /* @__PURE__ */ jsxs(
       "section",
       {
@@ -885,7 +886,7 @@ var Section = React__default.forwardRef(
             PatternBackground,
             {
               pattern,
-              opacity: patternOpacity,
+              opacity: effectivePatternOpacity,
               className: patternClassName
             }
           ),
@@ -1354,10 +1355,10 @@ var NavbarAnimatedPreview = ({
   },
   logoSlot,
   logoClassName,
-  navigation,
+  menuLinks,
   navigationSlot,
-  authActions,
-  authActionsSlot,
+  actions,
+  actionsSlot,
   background = "white",
   spacing = "none",
   pattern,
@@ -1412,11 +1413,18 @@ var NavbarAnimatedPreview = ({
       }
     );
   };
-  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 renderActions = () => {
+    if (actionsSlot) return actionsSlot;
+    if (!actions || actions.length === 0) return null;
+    return actions.map((action, index) => {
+      const {
+        label,
+        icon,
+        iconAfter,
+        children,
+        className: actionClassName,
+        ...pressableProps
+      } = action;
       return /* @__PURE__ */ jsx(
         Pressable,
         {
@@ -1435,8 +1443,8 @@ var NavbarAnimatedPreview = ({
   };
   const renderNavigation = () => {
     if (navigationSlot) return navigationSlot;
-    if (!navigation || navigation.length === 0) return null;
-    return /* @__PURE__ */ jsx(NavigationMenuList, { children: navigation.map((item, index) => /* @__PURE__ */ jsx(
+    if (!menuLinks || menuLinks.length === 0) return null;
+    return /* @__PURE__ */ jsx(NavigationMenuList, { children: menuLinks.map((item, index) => /* @__PURE__ */ jsx(
       DesktopMenuItem,
       {
         item,
@@ -1458,51 +1466,63 @@ var NavbarAnimatedPreview = ({
       pattern,
       patternOpacity,
       children: [
-        /* @__PURE__ */ jsx(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)]!",
-          navigationMenuClassName
-        ), children: /* @__PURE__ */ jsxs("div", { className: cn(
-          "relative z-999 container grid w-full grid-cols-2 items-center justify-between gap-8 xl:grid-cols-3",
-          containerClassName
-        ), children: [
-          renderLogo(),
-          /* @__PURE__ */ jsx("div", { className: cn("hidden xl:flex", navClassName), children: renderNavigation() }),
-          /* @__PURE__ */ jsxs("div", { className: cn("justify-self-end", actionsClassName), children: [
-            /* @__PURE__ */ jsx("div", { className: "hidden xl:block", children: renderAuthActions() }),
-            /* @__PURE__ */ jsx("div", { className: "xl:hidden", children: /* @__PURE__ */ jsx(
-              Pressable,
+        /* @__PURE__ */ jsx(
+          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)]!",
+              navigationMenuClassName
+            ),
+            children: /* @__PURE__ */ jsxs(
+              "div",
               {
-                className: "size-11",
-                variant: "ghost",
-                size: "icon",
-                asButton: true,
-                onClick: handleMobileMenu,
-                children: open ? /* @__PURE__ */ jsx(
-                  DynamicIcon,
-                  {
-                    name: "lucide/x",
-                    size: 22,
-                    className: "stroke-foreground"
-                  }
-                ) : /* @__PURE__ */ jsx(
-                  DynamicIcon,
-                  {
-                    name: "lucide/menu",
-                    size: 22,
-                    className: "stroke-foreground"
-                  }
-                )
+                className: cn(
+                  "relative z-999 container grid w-full grid-cols-2 items-center justify-between gap-8 xl:grid-cols-3",
+                  containerClassName
+                ),
+                children: [
+                  renderLogo(),
+                  /* @__PURE__ */ jsx("div", { className: cn("hidden xl:flex", navClassName), children: renderNavigation() }),
+                  /* @__PURE__ */ jsxs("div", { className: cn("justify-self-end", actionsClassName), children: [
+                    /* @__PURE__ */ jsx("div", { className: "hidden xl:block", children: renderActions() }),
+                    /* @__PURE__ */ jsx("div", { className: "xl:hidden", children: /* @__PURE__ */ jsx(
+                      Pressable,
+                      {
+                        className: "size-11",
+                        variant: "ghost",
+                        size: "icon",
+                        asButton: true,
+                        onClick: handleMobileMenu,
+                        children: open ? /* @__PURE__ */ jsx(
+                          DynamicIcon,
+                          {
+                            name: "lucide/x",
+                            size: 22,
+                            className: "stroke-foreground"
+                          }
+                        ) : /* @__PURE__ */ jsx(
+                          DynamicIcon,
+                          {
+                            name: "lucide/menu",
+                            size: 22,
+                            className: "stroke-foreground"
+                          }
+                        )
+                      }
+                    ) })
+                  ] })
+                ]
               }
-            ) })
-          ] })
-        ] }) }),
+            )
+          }
+        ),
         /* @__PURE__ */ jsx(
           MobileNavigationMenu,
           {
             open,
-            navigation: navigation ?? [],
-            authActions,
-            authActionsSlot
+            menuLinks: menuLinks ?? [],
+            actions,
+            actionsSlot
           }
         )
       ]
@@ -1514,46 +1534,61 @@ var DesktopMenuItem = ({
   index,
   optixFlowConfig
 }) => {
-  if (item.links || item.featuredLinks || item.groupLinks) {
+  const hasDropdown = Boolean(
+    item.links?.length || item.featuredLinks?.length || item.groupLinks?.length
+  );
+  if (hasDropdown) {
     return /* @__PURE__ */ jsxs(NavigationMenuItem, { value: `${index}`, children: [
-      /* @__PURE__ */ jsx(NavigationMenuTrigger, { className: "h-fit bg-transparent font-normal text-foreground/60", children: item.title }),
-      /* @__PURE__ */ jsx(NavigationMenuContent, { className: "hidden rounded-xl! border-0! p-0! xl:block", children: /* @__PURE__ */ jsx("div", { className: "w-dvw animate-[fade-in-slide-down_0.35s_cubic-bezier(0.33,1,0.68,1)_forwards] px-8 pt-6 pb-12", children: /* @__PURE__ */ jsxs("div", { className: "container", children: [
-        item.id === 1 && /* @__PURE__ */ jsx(
-          DropdownMenu1,
-          {
-            links: item.links,
-            optixFlowConfig
-          }
-        ),
-        item.id === 2 && /* @__PURE__ */ jsx(
-          DropdownMenu2,
-          {
-            featuredLinks: item.featuredLinks,
-            links: item.links,
-            optixFlowConfig
-          }
-        ),
-        item.id === 3 && /* @__PURE__ */ jsx(
-          DropdownMenu3,
-          {
-            groupLinks: item.groupLinks,
-            imageLink: item.imageLink,
-            optixFlowConfig
-          }
-        )
-      ] }) }) })
+      /* @__PURE__ */ jsx(NavigationMenuTrigger, { className: "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(NavigationMenuContent, { className: "hidden rounded-xl! border-0! p-0! xl:block", children: /* @__PURE__ */ jsx("div", { className: "w-dvw animate-[fade-in-slide-down_0.35s_cubic-bezier(0.33,1,0.68,1)_forwards] px-8 pt-6 pb-12", children: /* @__PURE__ */ jsx("div", { className: "container", children: renderDropdownContent(item, optixFlowConfig) }) }) })
     ] }, `desktop-menu-item-${index}`);
   }
   return /* @__PURE__ */ jsx(NavigationMenuItem, { value: `${index}`, children: /* @__PURE__ */ jsx(
     NavigationMenuLink,
     {
-      href: item.url,
-      className: `${navigationMenuTriggerStyle()} h-fit bg-transparent font-normal text-foreground/60`,
-      children: item.title
+      href: item.href,
+      className: `${navigationMenuTriggerStyle()} bg-transparent px-0 hover:bg-transparent focus:bg-transparent h-fit font-normal text-foreground/60`,
+      children: item.label
     }
   ) }, `desktop-menu-item-${index}`);
 };
-var DropdownMenu1 = ({ links, optixFlowConfig }) => {
+var renderDropdownContent = (item, optixFlowConfig) => {
+  const layout = item.layout || "animated-image-preview";
+  switch (layout) {
+    case "animated-image-preview":
+      return /* @__PURE__ */ jsx(
+        AnimatedImagePreviewDropdown,
+        {
+          links: item.links,
+          optixFlowConfig
+        }
+      );
+    case "featured-cards-grid":
+      return /* @__PURE__ */ jsx(
+        FeaturedCardsGridDropdown,
+        {
+          featuredLinks: item.featuredLinks,
+          links: item.links,
+          optixFlowConfig
+        }
+      );
+    case "grouped-links-image":
+      return /* @__PURE__ */ jsx(
+        GroupedLinksImageDropdown,
+        {
+          groupLinks: item.groupLinks,
+          imageLink: item.imageLink,
+          optixFlowConfig
+        }
+      );
+    default:
+      return null;
+  }
+};
+var AnimatedImagePreviewDropdown = ({
+  links,
+  optixFlowConfig
+}) => {
   const linksRef = useRef([]);
   const imageRefs = useRef([]);
   const updateImageClasses = (activeIndex) => {
@@ -1616,7 +1651,7 @@ var DropdownMenu1 = ({ links, optixFlowConfig }) => {
     )) })
   ] });
 };
-var DropdownMenu2 = ({
+var FeaturedCardsGridDropdown = ({
   links,
   featuredLinks,
   optixFlowConfig
@@ -1634,7 +1669,7 @@ var DropdownMenu2 = ({
     /* @__PURE__ */ jsx("div", { className: "grid grid-cols-4 pt-8", children: links?.map((link, index) => /* @__PURE__ */ jsx(NavLink, { link }, `default-nav-link-${index}`)) })
   ] });
 };
-var DropdownMenu3 = ({
+var GroupedLinksImageDropdown = ({
   groupLinks,
   imageLink,
   optixFlowConfig
@@ -1661,7 +1696,7 @@ var GroupLinks = ({ groupLinks }) => {
   if (!groupLinks) return null;
   let linkIndex = 0;
   return /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 gap-8", children: groupLinks.map((group, index1) => /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx("div", { className: "mb-4 text-xs text-muted-foreground", children: group.title }),
+    /* @__PURE__ */ jsx("div", { className: "mb-4 text-xs text-muted-foreground", children: group.label }),
     /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-8", children: group.links.map((link, index2) => {
       const idx = linkIndex++;
       return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
@@ -1758,17 +1793,15 @@ var NavLink = forwardRef(
         onMouseEnter,
         onMouseLeave,
         children: [
-          (link.icon || link.iconName) && /* @__PURE__ */ jsx("div", { className: "flex size-6 shrink-0 rounded-md border shadow", children: link.icon ? link.icon : link.iconName && /* @__PURE__ */ jsx(DynamicIcon, { name: link.iconName, size: 14, className: "m-auto" }) }),
+          (link.icon || link.iconName) && /* @__PURE__ */ jsx("div", { className: "flex size-6 shrink-0 rounded-md border shadow", children: link.icon ? link.icon : link.iconName && /* @__PURE__ */ jsx(
+            DynamicIcon,
+            {
+              name: link.iconName,
+              size: 14,
+              className: "m-auto"
+            }
+          ) }),
           /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-start gap-2", children: [
-            link.company && /* @__PURE__ */ jsx("div", { className: "block text-base leading-normal xl:hidden", children: link.company.name }),
-            link.company && /* @__PURE__ */ jsx(
-              Img,
-              {
-                className: "hidden h-6 xl:block",
-                src: link.company.logo,
-                alt: typeof link.company.name === "string" ? link.company.name : ""
-              }
-            ),
             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 })
           ] })
@@ -1780,15 +1813,22 @@ var NavLink = forwardRef(
 NavLink.displayName = "NavLink";
 var MobileNavigationMenu = ({
   open,
-  navigation,
-  authActions,
-  authActionsSlot
+  menuLinks,
+  actions,
+  actionsSlot
 }) => {
-  const renderMobileAuthActions = () => {
-    if (authActionsSlot) return authActionsSlot;
-    if (!authActions || authActions.length === 0) return null;
-    return authActions.map((action, index) => {
-      const { label, icon, iconAfter, children, className: actionClassName, ...pressableProps } = action;
+  const renderMobileActions = () => {
+    if (actionsSlot) return actionsSlot;
+    if (!actions || actions.length === 0) return null;
+    return actions.map((action, index) => {
+      const {
+        label,
+        icon,
+        iconAfter,
+        children,
+        className: actionClassName,
+        ...pressableProps
+      } = action;
       return /* @__PURE__ */ jsx(
         Pressable,
         {
@@ -1814,10 +1854,10 @@ var MobileNavigationMenu = ({
       children: /* @__PURE__ */ jsx("div", { className: "flex-1 overflow-y-auto", children: /* @__PURE__ */ jsxs("div", { className: "container py-8", children: [
         /* @__PURE__ */ jsx("div", { className: "absolute -m-px h-px w-px overflow-hidden border-0 mask-clip-border p-0 text-nowrap whitespace-nowrap", children: /* @__PURE__ */ jsx(SheetTitle, { className: "text-primary", children: "Mobile Navigation" }) }),
         /* @__PURE__ */ jsxs("div", { className: "flex min-h-full flex-col gap-6", children: [
-          /* @__PURE__ */ jsx(Accordion, { type: "multiple", className: "w-full", children: navigation.map(
+          /* @__PURE__ */ jsx(Accordion, { type: "multiple", className: "w-full", children: menuLinks.map(
             (item, index) => renderMobileMenuItem(item, index)
           ) }),
-          /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: renderMobileAuthActions() })
+          /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: renderMobileActions() })
         ] })
       ] }) })
     }
@@ -1831,12 +1871,12 @@ var renderMobileMenuItem = (item, index) => {
         value: `nav-${index}`,
         className: "border-b-0",
         children: [
-          /* @__PURE__ */ jsx(AccordionTrigger, { className: "h-10 items-center text-base font-normal text-foreground hover:no-underline", children: item.title }),
+          /* @__PURE__ */ jsx(AccordionTrigger, { className: "h-10 items-center text-base font-normal text-foreground hover:no-underline", children: item.label }),
           /* @__PURE__ */ jsxs(AccordionContent, { className: "flex flex-col gap-6 p-2", children: [
             item.featuredLinks && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2 p-2", children: item.featuredLinks.map((link, idx) => /* @__PURE__ */ jsx(NavLink, { link }, `default-nav-link-${idx}`)) }),
             item.links && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2 p-2", children: item.links.map((link, idx) => /* @__PURE__ */ jsx(NavLink, { link }, `default-nav-link-${idx}`)) }),
             item.groupLinks && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2 p-2", children: item.groupLinks.map((group, groupIdx) => /* @__PURE__ */ jsxs("div", { className: "mb-8 last:mb-0", children: [
-              /* @__PURE__ */ jsx("div", { className: "mb-4 text-xs text-muted-foreground", children: group.title }),
+              /* @__PURE__ */ jsx("div", { className: "mb-4 text-xs text-muted-foreground", children: group.label }),
               /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-2", children: group.links.map((link, linkIdx) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(NavLink, { link }) }, `group-link-${groupIdx}-${linkIdx}`)) })
             ] }, `group-link-${groupIdx}`)) })
           ] })
@@ -1848,9 +1888,9 @@ var renderMobileMenuItem = (item, index) => {
   return /* @__PURE__ */ jsx(
     Pressable,
     {
-      href: item.url,
+      href: item.href,
       className: "flex h-10 items-center rounded-md text-left text-base leading-[3.75] font-normal text-foreground ring-ring/10 outline-ring/50 transition-all focus-visible:ring-4 focus-visible:outline-1 nth-last-1:border-0",
-      children: item.title
+      children: item.label
     },
     `nav-link-${index}`
   );

package/dist/navbar-centered-menu.cjs

@@ -887,6 +887,7 @@ var Section = React__namespace.default.forwardRef(
     patternClassName,
     ...props
   }, ref) => {
+    const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "section",
       {
@@ -906,7 +907,7 @@ var Section = React__namespace.default.forwardRef(
             PatternBackground,
             {
               pattern,
-              opacity: patternOpacity,
+              opacity: effectivePatternOpacity,
               className: patternClassName
             }
           ),
@@ -1213,7 +1214,15 @@ var renderMobileMenuItem = (item) => {
       /* @__PURE__ */ jsxRuntime.jsx(AccordionContent, { className: "mt-2", children: item.items.map((subItem) => /* @__PURE__ */ jsxRuntime.jsx(SubMenuLink, { item: subItem }, subItem.title)) })
     ] }, item.title);
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(Pressable, { href: item.url, className: "text-md font-semibold", children: item.title }, item.title);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Pressable,
+    {
+      href: item.url,
+      className: "text-md font-semibold",
+      children: item.title
+    },
+    item.title
+  );
 };
 var NavbarCenteredMenu = ({
   logo = {
@@ -1241,24 +1250,38 @@ var NavbarCenteredMenu = ({
   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", 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", 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 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__ */ jsxRuntime.jsx(
         Pressable,
         {
@@ -1294,16 +1317,37 @@ var NavbarCenteredMenu = ({
       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.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, { variant: "outline", size: "icon", asButton: true, onClick: () => {
-            }, children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/menu", size: 16 }) }) }),
+            /* @__PURE__ */ jsxRuntime.jsx(SheetTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+              Pressable,
+              {
+                variant: "outline",
+                size: "icon",
+                asButton: true,
+                onClick: () => {
+                },
+                children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/menu", size: 16 })
+              }
+            ) }),
             /* @__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: [

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

@@ -1,9 +1,8 @@
 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-Cohq4eio.cjs';
-import './patternSvgs-c5ZNVoTT.cjs';
 import 'class-variance-authority';
 import './button-variants-lRElsmTc.cjs';
 import 'class-variance-authority/types';
@@ -95,7 +94,7 @@ interface NavbarCenteredMenuProps {
     /**
      * Optional background pattern name or URL
      */
-    pattern?: PatternName | string;
+    pattern?: PatternName | undefined;
     /**
      * Pattern overlay opacity (0-1)
      */

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

@@ -1,9 +1,8 @@
 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-k17uluAz.js';
-import './patternSvgs-c5ZNVoTT.js';
 import 'class-variance-authority';
 import './button-variants-lRElsmTc.js';
 import 'class-variance-authority/types';
@@ -95,7 +94,7 @@ interface NavbarCenteredMenuProps {
     /**
      * Optional background pattern name or URL
      */
-    pattern?: PatternName | string;
+    pattern?: PatternName | undefined;
     /**
      * Pattern overlay opacity (0-1)
      */