@opensite/ui 0.4.2 → 0.4.3

package/dist/navbar-floating-pill.js

@@ -861,6 +861,7 @@ var Section = React__default.forwardRef(
     patternClassName,
     ...props
   }, ref) => {
+    const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
     return /* @__PURE__ */ jsxs(
       "section",
       {
@@ -880,7 +881,7 @@ var Section = React__default.forwardRef(
             PatternBackground,
             {
               pattern,
-              opacity: patternOpacity,
+              opacity: effectivePatternOpacity,
               className: patternClassName
             }
           ),
@@ -1066,24 +1067,38 @@ var NavbarFloatingPill = ({
   const renderLogo = () => {
     if (logoSlot) return logoSlot;
     if (!logo) return null;
-    return /* @__PURE__ */ jsxs(Pressable, { href: logo.url || "/", className: cn("flex shrink-0 items-center gap-2", logoClassName), children: [
-      logo.src && /* @__PURE__ */ jsx(
-        Img,
-        {
-          src: logo.src,
-          className: cn("w-10", logo.className),
-          alt: logo.alt || "Logo",
-          optixFlowConfig
-        }
-      ),
-      logo.title && (typeof logo.title === "string" ? /* @__PURE__ */ jsx("span", { className: "text-lg font-semibold tracking-tighter", children: logo.title }) : logo.title)
-    ] });
+    return /* @__PURE__ */ jsxs(
+      Pressable,
+      {
+        href: logo.url || "/",
+        className: cn("flex shrink-0 items-center gap-2", logoClassName),
+        children: [
+          logo.src && /* @__PURE__ */ jsx(
+            Img,
+            {
+              src: logo.src,
+              className: cn("w-10", logo.className),
+              alt: logo.alt || "Logo",
+              optixFlowConfig
+            }
+          ),
+          logo.title && (typeof logo.title === "string" ? /* @__PURE__ */ 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__ */ jsx(
         Pressable,
         {
@@ -1121,70 +1136,85 @@ var NavbarFloatingPill = ({
             containerClassName
           ),
           children: [
-            /* @__PURE__ */ jsxs("div", { className: cn("flex items-center justify-between px-6 py-3", pillWrapperClassName), children: [
-              renderLogo(),
-              /* @__PURE__ */ jsx(NavigationMenu, { className: cn("max-lg:hidden", navigationMenuClassName), children: /* @__PURE__ */ jsx(NavigationMenuList, { children: menuSlot ? menuSlot : renderMenu()?.map(
-                (link) => link.dropdownItems ? /* @__PURE__ */ jsxs(NavigationMenuItem, { children: [
-                  /* @__PURE__ */ jsx(NavigationMenuTrigger, { className: "bg-transparent! px-1.5 data-[state=open]:bg-accent/50", children: link.label }),
-                  /* @__PURE__ */ jsx(NavigationMenuContent, { children: /* @__PURE__ */ jsx("ul", { className: "w-[400px] space-y-2 p-4", children: link.dropdownItems.map((item) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(NavigationMenuLink, { asChild: true, children: /* @__PURE__ */ jsx(
-                    Pressable,
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: cn(
+                  "flex items-center justify-between px-6 py-3",
+                  pillWrapperClassName
+                ),
+                children: [
+                  renderLogo(),
+                  /* @__PURE__ */ jsx(
+                    NavigationMenu,
                     {
-                      href: item.href,
-                      className: "group flex gap-4 rounded-md p-3 leading-none no-underline outline-hidden transition-colors select-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
-                      children: /* @__PURE__ */ jsxs("div", { className: "transition-transform duration-300 group-hover:translate-x-1", children: [
-                        /* @__PURE__ */ jsx("div", { className: "mb-1 text-sm leading-none font-medium", children: item.title }),
-                        /* @__PURE__ */ jsx("p", { className: "line-clamp-2 text-sm leading-snug text-muted-foreground", children: item.description })
-                      ] })
-                    }
-                  ) }) }, item.title)) }) })
-                ] }, link.label) : /* @__PURE__ */ jsx(NavigationMenuItem, { children: /* @__PURE__ */ jsx(
-                  Pressable,
-                  {
-                    href: link.href,
-                    className: cn(
-                      "relative bg-transparent px-1.5 text-sm font-medium text-muted-foreground"
-                    ),
-                    children: link.label
-                  }
-                ) }, link.label)
-              ) }) }),
-              /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2.5", actionsClassName), children: [
-                /* @__PURE__ */ jsx("div", { className: "max-lg:hidden", children: renderAuthActions() }),
-                /* @__PURE__ */ jsxs(
-                  "button",
-                  {
-                    className: "relative flex size-8 text-muted-foreground lg:hidden",
-                    onClick: () => setIsMenuOpen(!isMenuOpen),
-                    children: [
-                      /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Open main menu" }),
-                      /* @__PURE__ */ jsxs("div", { className: "absolute top-1/2 left-1/2 block w-[18px] -translate-x-1/2 -translate-y-1/2", children: [
-                        /* @__PURE__ */ jsx(
-                          "span",
-                          {
-                            "aria-hidden": "true",
-                            className: `absolute block h-0.5 w-full rounded-full bg-current transition duration-500 ease-in-out ${isMenuOpen ? "rotate-45" : "-translate-y-1.5"}`
-                          }
-                        ),
-                        /* @__PURE__ */ jsx(
-                          "span",
-                          {
-                            "aria-hidden": "true",
-                            className: `absolute block h-0.5 w-full rounded-full bg-current transition duration-500 ease-in-out ${isMenuOpen ? "opacity-0" : ""}`
-                          }
-                        ),
-                        /* @__PURE__ */ jsx(
-                          "span",
+                      className: cn("max-lg:hidden", navigationMenuClassName),
+                      children: /* @__PURE__ */ jsx(NavigationMenuList, { children: menuSlot ? menuSlot : renderMenu()?.map(
+                        (link) => link.dropdownItems ? /* @__PURE__ */ jsxs(NavigationMenuItem, { children: [
+                          /* @__PURE__ */ jsx(NavigationMenuTrigger, { className: "bg-transparent! px-1.5 data-[state=open]:bg-accent/50", children: link.label }),
+                          /* @__PURE__ */ jsx(NavigationMenuContent, { children: /* @__PURE__ */ jsx("ul", { className: "w-[400px] space-y-2 p-4", children: link.dropdownItems.map((item) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(NavigationMenuLink, { asChild: true, children: /* @__PURE__ */ jsx(
+                            Pressable,
+                            {
+                              href: item.href,
+                              className: "group flex gap-4 rounded-md p-3 leading-none no-underline outline-hidden transition-colors select-none hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
+                              children: /* @__PURE__ */ jsxs("div", { className: "transition-transform duration-300 group-hover:translate-x-1", children: [
+                                /* @__PURE__ */ jsx("div", { className: "mb-1 text-sm leading-none font-medium", children: item.title }),
+                                /* @__PURE__ */ jsx("p", { className: "line-clamp-2 text-sm leading-snug text-muted-foreground", children: item.description })
+                              ] })
+                            }
+                          ) }) }, item.title)) }) })
+                        ] }, link.label) : /* @__PURE__ */ jsx(NavigationMenuItem, { children: /* @__PURE__ */ jsx(
+                          Pressable,
                           {
-                            "aria-hidden": "true",
-                            className: `absolute block h-0.5 w-full rounded-full bg-current transition duration-500 ease-in-out ${isMenuOpen ? "-rotate-45" : "translate-y-1.5"}`
+                            href: link.href,
+                            className: cn(
+                              "relative bg-transparent px-1.5 text-sm font-medium text-muted-foreground"
+                            ),
+                            children: link.label
                           }
-                        )
-                      ] })
-                    ]
-                  }
-                )
-              ] })
-            ] }),
+                        ) }, link.label)
+                      ) })
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2.5", actionsClassName), children: [
+                    /* @__PURE__ */ jsx("div", { className: "max-lg:hidden", children: renderAuthActions() }),
+                    /* @__PURE__ */ jsxs(
+                      "button",
+                      {
+                        className: "relative flex size-8 text-muted-foreground lg:hidden",
+                        onClick: () => setIsMenuOpen(!isMenuOpen),
+                        children: [
+                          /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Open main menu" }),
+                          /* @__PURE__ */ jsxs("div", { className: "absolute top-1/2 left-1/2 block w-[18px] -translate-x-1/2 -translate-y-1/2", children: [
+                            /* @__PURE__ */ jsx(
+                              "span",
+                              {
+                                "aria-hidden": "true",
+                                className: `absolute block h-0.5 w-full rounded-full bg-current transition duration-500 ease-in-out ${isMenuOpen ? "rotate-45" : "-translate-y-1.5"}`
+                              }
+                            ),
+                            /* @__PURE__ */ jsx(
+                              "span",
+                              {
+                                "aria-hidden": "true",
+                                className: `absolute block h-0.5 w-full rounded-full bg-current transition duration-500 ease-in-out ${isMenuOpen ? "opacity-0" : ""}`
+                              }
+                            ),
+                            /* @__PURE__ */ jsx(
+                              "span",
+                              {
+                                "aria-hidden": "true",
+                                className: `absolute block h-0.5 w-full rounded-full bg-current transition duration-500 ease-in-out ${isMenuOpen ? "-rotate-45" : "translate-y-1.5"}`
+                              }
+                            )
+                          ] })
+                        ]
+                      }
+                    )
+                  ] })
+                ]
+              }
+            ),
             /* @__PURE__ */ jsx(
               "div",
               {

package/dist/navbar-fullscreen-menu.cjs

@@ -776,6 +776,7 @@ var Section = React__namespace.default.forwardRef(
     patternClassName,
     ...props
   }, ref) => {
+    const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "section",
       {
@@ -795,7 +796,7 @@ var Section = React__namespace.default.forwardRef(
             PatternBackground,
             {
               pattern,
-              opacity: patternOpacity,
+              opacity: effectivePatternOpacity,
               className: patternClassName
             }
           ),
@@ -844,18 +845,25 @@ var NavbarFullscreenMenu = ({
   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("h-9", 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("h-9", 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 renderMenuItems = () => {
     if (menuSlot) return menuSlot;
@@ -864,15 +872,12 @@ var NavbarFullscreenMenu = ({
       "div",
       {
         className: "mb-5 animate-in slide-in-from-bottom-4 fade-in",
-        style: { animationDelay: `${0.2 + index * 0.1}s`, animationFillMode: "both" },
+        style: {
+          animationDelay: `${0.2 + index * 0.1}s`,
+          animationFillMode: "both"
+        },
         children: /* @__PURE__ */ jsxRuntime.jsxs(Pressable, { href: item.href, className: "group relative inline-block", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "span",
-            {
-              className: "relative z-10 text-4xl font-black text-foreground uppercase transition-all duration-300 md:text-6xl group-hover:opacity-80 group-hover:blur-[6px]",
-              children: item.label
-            }
-          ),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "relative z-10 text-4xl font-black text-foreground uppercase transition-all duration-300 md:text-6xl group-hover:opacity-80 group-hover:blur-[6px]", children: item.label }),
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-0 left-0 h-1 w-0 bg-primary transition-all duration-300 group-hover:w-full" })
         ] })
       },
@@ -904,34 +909,43 @@ var NavbarFullscreenMenu = ({
       pattern,
       patternOpacity,
       children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(containerClassName), children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center justify-between px-6 py-6", headerClassName), children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "z-50", children: renderLogo() }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "z-50", children: /* @__PURE__ */ jsxRuntime.jsxs(
-            "button",
-            {
-              onClick: toggleMenu,
-              className: "text-lg tracking-wider text-foreground transition-colors hover:text-muted-foreground",
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "span",
-                  {
-                    className: `inline-block transition-all duration-200 ${isOpen ? "opacity-0 -translate-y-2" : "opacity-100 translate-y-0"}`,
-                    style: { display: isOpen ? "none" : "inline-block" },
-                    children: "MENU"
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "span",
-                  {
-                    className: `inline-block transition-all duration-200 ${isOpen ? "opacity-100 translate-y-0" : "opacity-0 translate-y-2"}`,
-                    style: { display: isOpen ? "inline-block" : "none" },
-                    children: "CLOSE"
-                  }
-                )
-              ]
-            }
-          ) })
-        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              "flex items-center justify-between px-6 py-6",
+              headerClassName
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "z-50", children: renderLogo() }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "z-50", children: /* @__PURE__ */ jsxRuntime.jsxs(
+                "button",
+                {
+                  onClick: toggleMenu,
+                  className: "text-lg tracking-wider text-foreground transition-colors hover:text-muted-foreground",
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "span",
+                      {
+                        className: `inline-block transition-all duration-200 ${isOpen ? "opacity-0 -translate-y-2" : "opacity-100 translate-y-0"}`,
+                        style: { display: isOpen ? "none" : "inline-block" },
+                        children: "MENU"
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      "span",
+                      {
+                        className: `inline-block transition-all duration-200 ${isOpen ? "opacity-100 translate-y-0" : "opacity-0 translate-y-2"}`,
+                        style: { display: isOpen ? "inline-block" : "none" },
+                        children: "CLOSE"
+                      }
+                    )
+                  ]
+                }
+              ) })
+            ]
+          }
+        ),
         isOpen && /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {

package/dist/navbar-fullscreen-menu.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 { O as OptixFlowConfig } from './blocks-CJYRLpXR.cjs';
-import './patternSvgs-c5ZNVoTT.cjs';
+import { 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';
 
 interface MenuItem {
@@ -93,7 +92,7 @@ interface NavbarFullscreenMenuProps {
     /**
      * Optional background pattern name or URL
      */
-    pattern?: PatternName | string;
+    pattern?: PatternName | undefined;
     /**
      * Pattern overlay opacity (0-1)
      */

package/dist/navbar-fullscreen-menu.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 { O as OptixFlowConfig } from './blocks-BWc_7JNA.js';
-import './patternSvgs-c5ZNVoTT.js';
+import { 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';
 
 interface MenuItem {
@@ -93,7 +92,7 @@ interface NavbarFullscreenMenuProps {
     /**
      * Optional background pattern name or URL
      */
-    pattern?: PatternName | string;
+    pattern?: PatternName | undefined;
     /**
      * Pattern overlay opacity (0-1)
      */

package/dist/navbar-fullscreen-menu.js

@@ -755,6 +755,7 @@ var Section = React__default.forwardRef(
     patternClassName,
     ...props
   }, ref) => {
+    const effectivePatternOpacity = patternOpacity !== void 0 ? patternOpacity : pattern ? 1 : 0;
     return /* @__PURE__ */ jsxs(
       "section",
       {
@@ -774,7 +775,7 @@ var Section = React__default.forwardRef(
             PatternBackground,
             {
               pattern,
-              opacity: patternOpacity,
+              opacity: effectivePatternOpacity,
               className: patternClassName
             }
           ),
@@ -823,18 +824,25 @@ var NavbarFullscreenMenu = ({
   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-9", logo.className),
-          alt: logo.alt || "Logo",
-          optixFlowConfig
-        }
-      ),
-      logo.title && (typeof logo.title === "string" ? /* @__PURE__ */ jsx("span", { className: "text-lg font-semibold tracking-tighter", 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-9", logo.className),
+              alt: logo.alt || "Logo",
+              optixFlowConfig
+            }
+          ),
+          logo.title && (typeof logo.title === "string" ? /* @__PURE__ */ jsx("span", { className: "text-lg font-semibold tracking-tighter", children: logo.title }) : logo.title)
+        ]
+      }
+    );
   };
   const renderMenuItems = () => {
     if (menuSlot) return menuSlot;
@@ -843,15 +851,12 @@ var NavbarFullscreenMenu = ({
       "div",
       {
         className: "mb-5 animate-in slide-in-from-bottom-4 fade-in",
-        style: { animationDelay: `${0.2 + index * 0.1}s`, animationFillMode: "both" },
+        style: {
+          animationDelay: `${0.2 + index * 0.1}s`,
+          animationFillMode: "both"
+        },
         children: /* @__PURE__ */ jsxs(Pressable, { href: item.href, className: "group relative inline-block", children: [
-          /* @__PURE__ */ jsx(
-            "span",
-            {
-              className: "relative z-10 text-4xl font-black text-foreground uppercase transition-all duration-300 md:text-6xl group-hover:opacity-80 group-hover:blur-[6px]",
-              children: item.label
-            }
-          ),
+          /* @__PURE__ */ jsx("span", { className: "relative z-10 text-4xl font-black text-foreground uppercase transition-all duration-300 md:text-6xl group-hover:opacity-80 group-hover:blur-[6px]", children: item.label }),
           /* @__PURE__ */ jsx("div", { className: "absolute bottom-0 left-0 h-1 w-0 bg-primary transition-all duration-300 group-hover:w-full" })
         ] })
       },
@@ -883,34 +888,43 @@ var NavbarFullscreenMenu = ({
       pattern,
       patternOpacity,
       children: /* @__PURE__ */ jsxs("div", { className: cn(containerClassName), children: [
-        /* @__PURE__ */ jsxs("div", { className: cn("flex items-center justify-between px-6 py-6", headerClassName), children: [
-          /* @__PURE__ */ jsx("div", { className: "z-50", children: renderLogo() }),
-          /* @__PURE__ */ jsx("div", { className: "z-50", children: /* @__PURE__ */ jsxs(
-            "button",
-            {
-              onClick: toggleMenu,
-              className: "text-lg tracking-wider text-foreground transition-colors hover:text-muted-foreground",
-              children: [
-                /* @__PURE__ */ jsx(
-                  "span",
-                  {
-                    className: `inline-block transition-all duration-200 ${isOpen ? "opacity-0 -translate-y-2" : "opacity-100 translate-y-0"}`,
-                    style: { display: isOpen ? "none" : "inline-block" },
-                    children: "MENU"
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  "span",
-                  {
-                    className: `inline-block transition-all duration-200 ${isOpen ? "opacity-100 translate-y-0" : "opacity-0 translate-y-2"}`,
-                    style: { display: isOpen ? "inline-block" : "none" },
-                    children: "CLOSE"
-                  }
-                )
-              ]
-            }
-          ) })
-        ] }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "flex items-center justify-between px-6 py-6",
+              headerClassName
+            ),
+            children: [
+              /* @__PURE__ */ jsx("div", { className: "z-50", children: renderLogo() }),
+              /* @__PURE__ */ jsx("div", { className: "z-50", children: /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  onClick: toggleMenu,
+                  className: "text-lg tracking-wider text-foreground transition-colors hover:text-muted-foreground",
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: `inline-block transition-all duration-200 ${isOpen ? "opacity-0 -translate-y-2" : "opacity-100 translate-y-0"}`,
+                        style: { display: isOpen ? "none" : "inline-block" },
+                        children: "MENU"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: `inline-block transition-all duration-200 ${isOpen ? "opacity-100 translate-y-0" : "opacity-0 translate-y-2"}`,
+                        style: { display: isOpen ? "inline-block" : "none" },
+                        children: "CLOSE"
+                      }
+                    )
+                  ]
+                }
+              ) })
+            ]
+          }
+        ),
         isOpen && /* @__PURE__ */ jsx(
           "div",
           {