@opensite/ui 1.0.9 → 1.1.0

package/dist/navbar-education-platform.cjs

@@ -1220,6 +1220,7 @@ var NavbarMobileMenu = ({
   children,
   className,
   contentClassName,
+  closeContainerClassName = "",
   title = "Mobile Navigation"
 }) => {
   React__namespace.useEffect(() => {
@@ -1244,18 +1245,27 @@ var NavbarMobileMenu = ({
       "data-state": open ? "open" : "closed",
       children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sr-only", children: /* @__PURE__ */ jsxRuntime.jsx("h2", { children: title }) }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-0 left-0 right-0 p-4 bg-background flex justify-end items-center z-10 w-screen", children: /* @__PURE__ */ jsxRuntime.jsxs(
-          "button",
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
           {
-            onClick: onClose,
-            className: "flex size-10 items-center justify-center rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none",
-            "aria-label": "Close mobile menu",
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/x", className: "size-4" }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
-            ]
+            className: cn(
+              closeContainerClassName,
+              "absolute top-0 left-0 right-0 p-4 bg-background flex justify-end items-center z-10 w-screen"
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsxs(
+              "button",
+              {
+                onClick: onClose,
+                className: "flex size-10 items-center justify-center rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none",
+                "aria-label": "Close mobile menu",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/x", className: "size-4" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
+                ]
+              }
+            )
           }
-        ) }),
+        ),
         /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
@@ -1490,36 +1500,44 @@ var DesktopMenuItem = ({
         ),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4", children: [
           /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-3 text-[10px] text-muted-foreground uppercase", children: group.label }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-1", children: group.links.map((link) => /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuLink, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
-            Pressable,
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-1", children: group.links.map((link) => /* @__PURE__ */ jsxRuntime.jsx(
+            NavigationMenuLink,
             {
-              href: link.href,
-              className: "group flex cursor-pointer flex-row gap-3",
-              children: [
-                link.icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex size-10 shrink-0 items-center justify-center rounded-md border border-border bg-background", children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: link.icon, size: 20 }) }),
-                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
-                  /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-0.5 text-sm font-medium whitespace-nowrap", children: [
-                    link.title,
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      DynamicIcon,
-                      {
-                        name: "lucide/chevron-right",
-                        size: 16,
-                        className: "text-primary! opacity-0 transition-all duration-200 group-hover:translate-x-0.5 group-hover:opacity-100"
-                      }
-                    )
-                  ] }),
-                  link.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs whitespace-nowrap text-muted-foreground", children: link.description })
-                ] })
-              ]
-            }
-          ) }, link.title)) }),
+              asChild: true,
+              className: "w-full",
+              children: /* @__PURE__ */ jsxRuntime.jsxs(
+                Pressable,
+                {
+                  href: link.href,
+                  className: "group flex cursor-pointer flex-row gap-3",
+                  children: [
+                    link.icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex size-10 shrink-0 items-center justify-center rounded-md border border-border bg-background", children: /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: link.icon, size: 20 }) }),
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
+                      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex items-center gap-0.5 text-sm font-medium whitespace-nowrap", children: [
+                        link.title,
+                        /* @__PURE__ */ jsxRuntime.jsx(
+                          DynamicIcon,
+                          {
+                            name: "lucide/chevron-right",
+                            size: 16,
+                            className: "opacity-0 transition-all duration-200 group-hover:translate-x-0.5 group-hover:opacity-100"
+                          }
+                        )
+                      ] }),
+                      link.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs whitespace-nowrap text-muted-foreground", children: link.description })
+                    ] })
+                  ]
+                }
+              )
+            },
+            link.title
+          )) }),
           group.featuredImage && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4", children: /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuLink, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Pressable, { href: group.featuredImage.href || "#", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-lg bg-muted p-3", children: /* @__PURE__ */ jsxRuntime.jsx(
             img.Img,
             {
               src: group.featuredImage.src,
               alt: group.featuredImage.alt || "Featured image",
-              className: "aspect-video w-full max-w-[240px] rounded-md object-cover object-center",
+              className: "aspect-video w-full max-w-60 rounded-md object-cover object-center",
               optixFlowConfig
             }
           ) }) }) }) })
@@ -1583,29 +1601,36 @@ var MobileNavigationMenu = ({
                 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.label }),
-                  /* @__PURE__ */ jsxRuntime.jsx(AccordionContent, { className: "overflow-x-none", children: item.groups.map((group, groupIndex) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-2 px-4 text-[10px] text-muted-foreground uppercase", children: group.label }),
-                    group.links.map((link) => /* @__PURE__ */ jsxRuntime.jsxs(
-                      Pressable,
-                      {
-                        href: link.href,
-                        className: "flex min-h-12 items-center gap-2 rounded-lg px-4 text-muted-foreground transition-colors duration-300 hover:bg-muted hover:text-foreground",
-                        onClick: onClose,
-                        children: [
-                          link.icon && /* @__PURE__ */ jsxRuntime.jsx(
-                            DynamicIcon,
-                            {
-                              name: link.icon,
-                              size: 16,
-                              className: "stroke-muted-foreground"
-                            }
-                          ),
+                  /* @__PURE__ */ jsxRuntime.jsx(AccordionContent, { className: "overflow-x-none", children: item.groups.map((group, groupIndex) => /* @__PURE__ */ jsxRuntime.jsxs(
+                    "div",
+                    {
+                      className: "mb-4",
+                      children: [
+                        group.label && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "block mt-4 mb-2 px-4 text-[10px] text-muted-foreground uppercase", children: group.label }),
+                        group.links.map((link) => /* @__PURE__ */ jsxRuntime.jsxs(
+                          Pressable,
+                          {
+                            href: link.href,
+                            className: "flex min-h-12 items-center gap-2 rounded-lg pl-6 pr-4 text-muted-foreground transition-colors duration-300 hover:bg-muted hover:text-foreground",
+                            onClick: onClose,
+                            children: [
+                              link.icon && /* @__PURE__ */ jsxRuntime.jsx(
+                                DynamicIcon,
+                                {
+                                  name: link.icon,
+                                  size: 16,
+                                  className: "stroke-muted-foreground"
+                                }
+                              ),
+                              link.title
+                            ]
+                          },
                           link.title
-                        ]
-                      },
-                      link.title
-                    ))
-                  ] }, `mobile-group-${groupIndex}`)) })
+                        ))
+                      ]
+                    },
+                    `mobile-group-${groupIndex}`
+                  )) })
                 ]
               },
               `nav-item-${index}`

package/dist/navbar-education-platform.js

@@ -1196,6 +1196,7 @@ var NavbarMobileMenu = ({
   children,
   className,
   contentClassName,
+  closeContainerClassName = "",
   title = "Mobile Navigation"
 }) => {
   React.useEffect(() => {
@@ -1220,18 +1221,27 @@ var NavbarMobileMenu = ({
       "data-state": open ? "open" : "closed",
       children: [
         /* @__PURE__ */ jsx("div", { className: "sr-only", children: /* @__PURE__ */ jsx("h2", { children: title }) }),
-        /* @__PURE__ */ jsx("div", { className: "absolute top-0 left-0 right-0 p-4 bg-background flex justify-end items-center z-10 w-screen", children: /* @__PURE__ */ jsxs(
-          "button",
+        /* @__PURE__ */ jsx(
+          "div",
           {
-            onClick: onClose,
-            className: "flex size-10 items-center justify-center rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none",
-            "aria-label": "Close mobile menu",
-            children: [
-              /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/x", className: "size-4" }),
-              /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
-            ]
+            className: cn(
+              closeContainerClassName,
+              "absolute top-0 left-0 right-0 p-4 bg-background flex justify-end items-center z-10 w-screen"
+            ),
+            children: /* @__PURE__ */ jsxs(
+              "button",
+              {
+                onClick: onClose,
+                className: "flex size-10 items-center justify-center rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none",
+                "aria-label": "Close mobile menu",
+                children: [
+                  /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/x", className: "size-4" }),
+                  /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+                ]
+              }
+            )
           }
-        ) }),
+        ),
         /* @__PURE__ */ jsx(
           "div",
           {
@@ -1466,36 +1476,44 @@ var DesktopMenuItem = ({
         ),
         /* @__PURE__ */ jsxs("div", { className: "p-4", children: [
           /* @__PURE__ */ jsx("p", { className: "mb-3 text-[10px] text-muted-foreground uppercase", children: group.label }),
-          /* @__PURE__ */ jsx("div", { className: "space-y-1", children: group.links.map((link) => /* @__PURE__ */ jsx(NavigationMenuLink, { asChild: true, children: /* @__PURE__ */ jsxs(
-            Pressable,
+          /* @__PURE__ */ jsx("div", { className: "space-y-1", children: group.links.map((link) => /* @__PURE__ */ jsx(
+            NavigationMenuLink,
             {
-              href: link.href,
-              className: "group flex cursor-pointer flex-row gap-3",
-              children: [
-                link.icon && /* @__PURE__ */ jsx("span", { className: "flex size-10 shrink-0 items-center justify-center rounded-md border border-border bg-background", children: /* @__PURE__ */ jsx(DynamicIcon, { name: link.icon, size: 20 }) }),
-                /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
-                  /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-0.5 text-sm font-medium whitespace-nowrap", children: [
-                    link.title,
-                    /* @__PURE__ */ jsx(
-                      DynamicIcon,
-                      {
-                        name: "lucide/chevron-right",
-                        size: 16,
-                        className: "text-primary! opacity-0 transition-all duration-200 group-hover:translate-x-0.5 group-hover:opacity-100"
-                      }
-                    )
-                  ] }),
-                  link.description && /* @__PURE__ */ jsx("p", { className: "text-xs whitespace-nowrap text-muted-foreground", children: link.description })
-                ] })
-              ]
-            }
-          ) }, link.title)) }),
+              asChild: true,
+              className: "w-full",
+              children: /* @__PURE__ */ jsxs(
+                Pressable,
+                {
+                  href: link.href,
+                  className: "group flex cursor-pointer flex-row gap-3",
+                  children: [
+                    link.icon && /* @__PURE__ */ jsx("span", { className: "flex size-10 shrink-0 items-center justify-center rounded-md border border-border bg-background", children: /* @__PURE__ */ jsx(DynamicIcon, { name: link.icon, size: 20 }) }),
+                    /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+                      /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-0.5 text-sm font-medium whitespace-nowrap", children: [
+                        link.title,
+                        /* @__PURE__ */ jsx(
+                          DynamicIcon,
+                          {
+                            name: "lucide/chevron-right",
+                            size: 16,
+                            className: "opacity-0 transition-all duration-200 group-hover:translate-x-0.5 group-hover:opacity-100"
+                          }
+                        )
+                      ] }),
+                      link.description && /* @__PURE__ */ jsx("p", { className: "text-xs whitespace-nowrap text-muted-foreground", children: link.description })
+                    ] })
+                  ]
+                }
+              )
+            },
+            link.title
+          )) }),
           group.featuredImage && /* @__PURE__ */ jsx("div", { className: "mt-4", children: /* @__PURE__ */ jsx(NavigationMenuLink, { asChild: true, children: /* @__PURE__ */ jsx(Pressable, { href: group.featuredImage.href || "#", children: /* @__PURE__ */ jsx("div", { className: "rounded-lg bg-muted p-3", children: /* @__PURE__ */ jsx(
             Img,
             {
               src: group.featuredImage.src,
               alt: group.featuredImage.alt || "Featured image",
-              className: "aspect-video w-full max-w-[240px] rounded-md object-cover object-center",
+              className: "aspect-video w-full max-w-60 rounded-md object-cover object-center",
               optixFlowConfig
             }
           ) }) }) }) })
@@ -1559,29 +1577,36 @@ var MobileNavigationMenu = ({
                 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.label }),
-                  /* @__PURE__ */ jsx(AccordionContent, { className: "overflow-x-none", children: item.groups.map((group, groupIndex) => /* @__PURE__ */ jsxs("div", { className: "mb-4", children: [
-                    /* @__PURE__ */ jsx("p", { className: "mb-2 px-4 text-[10px] text-muted-foreground uppercase", children: group.label }),
-                    group.links.map((link) => /* @__PURE__ */ jsxs(
-                      Pressable,
-                      {
-                        href: link.href,
-                        className: "flex min-h-12 items-center gap-2 rounded-lg px-4 text-muted-foreground transition-colors duration-300 hover:bg-muted hover:text-foreground",
-                        onClick: onClose,
-                        children: [
-                          link.icon && /* @__PURE__ */ jsx(
-                            DynamicIcon,
-                            {
-                              name: link.icon,
-                              size: 16,
-                              className: "stroke-muted-foreground"
-                            }
-                          ),
+                  /* @__PURE__ */ jsx(AccordionContent, { className: "overflow-x-none", children: item.groups.map((group, groupIndex) => /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      className: "mb-4",
+                      children: [
+                        group.label && /* @__PURE__ */ jsx("p", { className: "block mt-4 mb-2 px-4 text-[10px] text-muted-foreground uppercase", children: group.label }),
+                        group.links.map((link) => /* @__PURE__ */ jsxs(
+                          Pressable,
+                          {
+                            href: link.href,
+                            className: "flex min-h-12 items-center gap-2 rounded-lg pl-6 pr-4 text-muted-foreground transition-colors duration-300 hover:bg-muted hover:text-foreground",
+                            onClick: onClose,
+                            children: [
+                              link.icon && /* @__PURE__ */ jsx(
+                                DynamicIcon,
+                                {
+                                  name: link.icon,
+                                  size: 16,
+                                  className: "stroke-muted-foreground"
+                                }
+                              ),
+                              link.title
+                            ]
+                          },
                           link.title
-                        ]
-                      },
-                      link.title
-                    ))
-                  ] }, `mobile-group-${groupIndex}`)) })
+                        ))
+                      ]
+                    },
+                    `mobile-group-${groupIndex}`
+                  )) })
                 ]
               },
               `nav-item-${index}`

package/dist/navbar-enterprise-mega.cjs

@@ -1138,6 +1138,7 @@ var NavbarMobileMenu = ({
   children,
   className,
   contentClassName,
+  closeContainerClassName = "",
   title = "Mobile Navigation"
 }) => {
   React__namespace.useEffect(() => {
@@ -1162,18 +1163,27 @@ var NavbarMobileMenu = ({
       "data-state": open ? "open" : "closed",
       children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sr-only", children: /* @__PURE__ */ jsxRuntime.jsx("h2", { children: title }) }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-0 left-0 right-0 p-4 bg-background flex justify-end items-center z-10 w-screen", children: /* @__PURE__ */ jsxRuntime.jsxs(
-          "button",
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
           {
-            onClick: onClose,
-            className: "flex size-10 items-center justify-center rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none",
-            "aria-label": "Close mobile menu",
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/x", className: "size-4" }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
-            ]
+            className: cn(
+              closeContainerClassName,
+              "absolute top-0 left-0 right-0 p-4 bg-background flex justify-end items-center z-10 w-screen"
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsxs(
+              "button",
+              {
+                onClick: onClose,
+                className: "flex size-10 items-center justify-center rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none",
+                "aria-label": "Close mobile menu",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/x", className: "size-4" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
+                ]
+              }
+            )
           }
-        ) }),
+        ),
         /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
@@ -1933,7 +1943,7 @@ var renderMobileDropdownContent = (item) => {
           Pressable,
           {
             href: solution.href,
-            className: "block pb-2 text-sm font-medium",
+            className: "block pt-4 text-sm font-medium",
             children: solution.title
           }
         ),

package/dist/navbar-enterprise-mega.js

@@ -1115,6 +1115,7 @@ var NavbarMobileMenu = ({
   children,
   className,
   contentClassName,
+  closeContainerClassName = "",
   title = "Mobile Navigation"
 }) => {
   React.useEffect(() => {
@@ -1139,18 +1140,27 @@ var NavbarMobileMenu = ({
       "data-state": open ? "open" : "closed",
       children: [
         /* @__PURE__ */ jsx("div", { className: "sr-only", children: /* @__PURE__ */ jsx("h2", { children: title }) }),
-        /* @__PURE__ */ jsx("div", { className: "absolute top-0 left-0 right-0 p-4 bg-background flex justify-end items-center z-10 w-screen", children: /* @__PURE__ */ jsxs(
-          "button",
+        /* @__PURE__ */ jsx(
+          "div",
           {
-            onClick: onClose,
-            className: "flex size-10 items-center justify-center rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none",
-            "aria-label": "Close mobile menu",
-            children: [
-              /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/x", className: "size-4" }),
-              /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
-            ]
+            className: cn(
+              closeContainerClassName,
+              "absolute top-0 left-0 right-0 p-4 bg-background flex justify-end items-center z-10 w-screen"
+            ),
+            children: /* @__PURE__ */ jsxs(
+              "button",
+              {
+                onClick: onClose,
+                className: "flex size-10 items-center justify-center rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none",
+                "aria-label": "Close mobile menu",
+                children: [
+                  /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/x", className: "size-4" }),
+                  /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+                ]
+              }
+            )
           }
-        ) }),
+        ),
         /* @__PURE__ */ jsx(
           "div",
           {
@@ -1910,7 +1920,7 @@ var renderMobileDropdownContent = (item) => {
           Pressable,
           {
             href: solution.href,
-            className: "block pb-2 text-sm font-medium",
+            className: "block pt-4 text-sm font-medium",
             children: solution.title
           }
         ),

package/dist/navbar-feature-grid.cjs

@@ -1138,6 +1138,7 @@ var NavbarMobileMenu = ({
   children,
   className,
   contentClassName,
+  closeContainerClassName = "",
   title = "Mobile Navigation"
 }) => {
   React__namespace.useEffect(() => {
@@ -1162,18 +1163,27 @@ var NavbarMobileMenu = ({
       "data-state": open ? "open" : "closed",
       children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sr-only", children: /* @__PURE__ */ jsxRuntime.jsx("h2", { children: title }) }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-0 left-0 right-0 p-4 bg-background flex justify-end items-center z-10 w-screen", children: /* @__PURE__ */ jsxRuntime.jsxs(
-          "button",
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
           {
-            onClick: onClose,
-            className: "flex size-10 items-center justify-center rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none",
-            "aria-label": "Close mobile menu",
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/x", className: "size-4" }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
-            ]
+            className: cn(
+              closeContainerClassName,
+              "absolute top-0 left-0 right-0 p-4 bg-background flex justify-end items-center z-10 w-screen"
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsxs(
+              "button",
+              {
+                onClick: onClose,
+                className: "flex size-10 items-center justify-center rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none",
+                "aria-label": "Close mobile menu",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/x", className: "size-4" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
+                ]
+              }
+            )
           }
-        ) }),
+        ),
         /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {

package/dist/navbar-feature-grid.js

@@ -1115,6 +1115,7 @@ var NavbarMobileMenu = ({
   children,
   className,
   contentClassName,
+  closeContainerClassName = "",
   title = "Mobile Navigation"
 }) => {
   React.useEffect(() => {
@@ -1139,18 +1140,27 @@ var NavbarMobileMenu = ({
       "data-state": open ? "open" : "closed",
       children: [
         /* @__PURE__ */ jsx("div", { className: "sr-only", children: /* @__PURE__ */ jsx("h2", { children: title }) }),
-        /* @__PURE__ */ jsx("div", { className: "absolute top-0 left-0 right-0 p-4 bg-background flex justify-end items-center z-10 w-screen", children: /* @__PURE__ */ jsxs(
-          "button",
+        /* @__PURE__ */ jsx(
+          "div",
           {
-            onClick: onClose,
-            className: "flex size-10 items-center justify-center rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none",
-            "aria-label": "Close mobile menu",
-            children: [
-              /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/x", className: "size-4" }),
-              /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
-            ]
+            className: cn(
+              closeContainerClassName,
+              "absolute top-0 left-0 right-0 p-4 bg-background flex justify-end items-center z-10 w-screen"
+            ),
+            children: /* @__PURE__ */ jsxs(
+              "button",
+              {
+                onClick: onClose,
+                className: "flex size-10 items-center justify-center rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none",
+                "aria-label": "Close mobile menu",
+                children: [
+                  /* @__PURE__ */ jsx(DynamicIcon, { name: "lucide/x", className: "size-4" }),
+                  /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+                ]
+              }
+            )
           }
-        ) }),
+        ),
         /* @__PURE__ */ jsx(
           "div",
           {

package/dist/navbar-icon-links.cjs

@@ -1035,6 +1035,7 @@ var NavbarMobileMenu = ({
   children,
   className,
   contentClassName,
+  closeContainerClassName = "",
   title = "Mobile Navigation"
 }) => {
   React__namespace.useEffect(() => {
@@ -1059,18 +1060,27 @@ var NavbarMobileMenu = ({
       "data-state": open ? "open" : "closed",
       children: [
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sr-only", children: /* @__PURE__ */ jsxRuntime.jsx("h2", { children: title }) }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-0 left-0 right-0 p-4 bg-background flex justify-end items-center z-10 w-screen", children: /* @__PURE__ */ jsxRuntime.jsxs(
-          "button",
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
           {
-            onClick: onClose,
-            className: "flex size-10 items-center justify-center rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none",
-            "aria-label": "Close mobile menu",
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/x", className: "size-4" }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
-            ]
+            className: cn(
+              closeContainerClassName,
+              "absolute top-0 left-0 right-0 p-4 bg-background flex justify-end items-center z-10 w-screen"
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsxs(
+              "button",
+              {
+                onClick: onClose,
+                className: "flex size-10 items-center justify-center rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none",
+                "aria-label": "Close mobile menu",
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(DynamicIcon, { name: "lucide/x", className: "size-4" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
+                ]
+              }
+            )
           }
-        ) }),
+        ),
         /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {