@opensite/ui 1.0.7 → 1.0.9

package/dist/navbar-multi-column-groups.cjs

@@ -1222,7 +1222,7 @@ 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-4 right-4 z-10", children: /* @__PURE__ */ jsxRuntime.jsxs(
+        /* @__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",
           {
             onClick: onClose,
@@ -1507,10 +1507,11 @@ var MobileNavigationMenu = ({
   authActions,
   authActionsSlot
 }) => {
+  const handleClose = () => setOpen(false);
   const renderMobileAuthActions = React.useMemo(() => {
     if (authActionsSlot) return authActionsSlot;
     if (!authActions || authActions.length === 0) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-4", children: authActions.map((action, index) => {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-4 mt-6", children: authActions.map((action, index) => {
       const {
         label,
         icon,
@@ -1524,6 +1525,7 @@ var MobileNavigationMenu = ({
         {
           asButton: true,
           className: cn("w-full", actionClassName),
+          onClick: handleClose,
           ...pressableProps,
           children: children ?? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
             icon,
@@ -1534,63 +1536,65 @@ var MobileNavigationMenu = ({
         index
       );
     }) });
-  }, [authActionsSlot, authActions]);
+  }, [authActionsSlot, authActions, handleClose]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     NavbarMobileMenu,
     {
       open,
-      onClose: () => setOpen(false),
+      onClose: handleClose,
       title: "Mobile Navigation",
       children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-screen-sm mx-auto", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-6", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Accordion, { type: "multiple", className: "w-full", children: navigation.map((item, index) => renderMobileMenuItem(item, index)) }),
-        renderMobileAuthActions
-      ] }) })
-    }
-  );
-};
-var renderMobileMenuItem = (item, index) => {
-  if (item.groups) {
-    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", children: item.groups.flatMap(
-            (group, groupIndex) => group.links.map((link, linkIndex) => /* @__PURE__ */ jsxRuntime.jsxs(
-              Pressable,
+        /* @__PURE__ */ jsxRuntime.jsx(Accordion, { type: "multiple", className: "w-full", children: navigation.map((item, index) => {
+          if (item.groups && item.groups.length > 0) {
+            return /* @__PURE__ */ jsxRuntime.jsxs(
+              AccordionItem,
               {
-                href: link.url,
-                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",
+                value: `nav-${index}`,
+                className: "border-b-0",
                 children: [
-                  link.icon ? link.icon : link.iconName ? /* @__PURE__ */ jsxRuntime.jsx(
-                    DynamicIcon,
-                    {
-                      name: link.iconName,
-                      size: 16,
-                      className: "stroke-muted-foreground"
-                    }
-                  ) : null,
-                  link.label
+                  /* @__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", 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.title }),
+                    group.links.map((link, linkIndex) => /* @__PURE__ */ jsxRuntime.jsxs(
+                      Pressable,
+                      {
+                        href: link.url,
+                        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: handleClose,
+                        children: [
+                          link.icon ? link.icon : link.iconName ? /* @__PURE__ */ jsxRuntime.jsx(
+                            DynamicIcon,
+                            {
+                              name: link.iconName,
+                              size: 16,
+                              className: "stroke-muted-foreground"
+                            }
+                          ) : null,
+                          link.label
+                        ]
+                      },
+                      `mobile-link-${groupIndex}-${linkIndex}`
+                    ))
+                  ] }, `mobile-group-${groupIndex}`)) })
                 ]
               },
-              `mobile-link-${groupIndex}-${linkIndex}`
-            ))
-          ) })
-        ]
-      },
-      `nav-item-${index}`
-    );
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Pressable,
-    {
-      href: item.url,
-      className: "flex h-15 items-center rounded-md p-0 px-4 text-left text-base leading-[3.75] font-normal text-muted-foreground ring-ring/10 outline-ring/50 transition-all hover:bg-muted focus-visible:ring-4 focus-visible:outline-1 nth-last-1:border-0",
-      children: item.title
-    },
-    `nav-link-${index}`
+              `nav-item-${index}`
+            );
+          }
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            Pressable,
+            {
+              href: item.url,
+              className: "flex h-15 items-center rounded-md p-0 px-4 text-left text-base leading-[3.75] font-normal text-muted-foreground ring-ring/10 outline-ring/50 transition-all hover:bg-muted focus-visible:ring-4 focus-visible:outline-1",
+              onClick: handleClose,
+              children: item.title
+            },
+            `nav-link-${index}`
+          );
+        }) }),
+        renderMobileAuthActions
+      ] }) })
+    }
   );
 };
 

package/dist/navbar-multi-column-groups.js

@@ -1199,7 +1199,7 @@ 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-4 right-4 z-10", children: /* @__PURE__ */ jsxs(
+        /* @__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",
           {
             onClick: onClose,
@@ -1484,10 +1484,11 @@ var MobileNavigationMenu = ({
   authActions,
   authActionsSlot
 }) => {
+  const handleClose = () => setOpen(false);
   const renderMobileAuthActions = useMemo(() => {
     if (authActionsSlot) return authActionsSlot;
     if (!authActions || authActions.length === 0) return null;
-    return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-4", children: authActions.map((action, index) => {
+    return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-4 mt-6", children: authActions.map((action, index) => {
       const {
         label,
         icon,
@@ -1501,6 +1502,7 @@ var MobileNavigationMenu = ({
         {
           asButton: true,
           className: cn("w-full", actionClassName),
+          onClick: handleClose,
           ...pressableProps,
           children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
             icon,
@@ -1511,63 +1513,65 @@ var MobileNavigationMenu = ({
         index
       );
     }) });
-  }, [authActionsSlot, authActions]);
+  }, [authActionsSlot, authActions, handleClose]);
   return /* @__PURE__ */ jsx(
     NavbarMobileMenu,
     {
       open,
-      onClose: () => setOpen(false),
+      onClose: handleClose,
       title: "Mobile Navigation",
       children: /* @__PURE__ */ jsx("div", { className: "max-w-screen-sm mx-auto", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6", children: [
-        /* @__PURE__ */ jsx(Accordion, { type: "multiple", className: "w-full", children: navigation.map((item, index) => renderMobileMenuItem(item, index)) }),
-        renderMobileAuthActions
-      ] }) })
-    }
-  );
-};
-var renderMobileMenuItem = (item, index) => {
-  if (item.groups) {
-    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", children: item.groups.flatMap(
-            (group, groupIndex) => group.links.map((link, linkIndex) => /* @__PURE__ */ jsxs(
-              Pressable,
+        /* @__PURE__ */ jsx(Accordion, { type: "multiple", className: "w-full", children: navigation.map((item, index) => {
+          if (item.groups && item.groups.length > 0) {
+            return /* @__PURE__ */ jsxs(
+              AccordionItem,
               {
-                href: link.url,
-                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",
+                value: `nav-${index}`,
+                className: "border-b-0",
                 children: [
-                  link.icon ? link.icon : link.iconName ? /* @__PURE__ */ jsx(
-                    DynamicIcon,
-                    {
-                      name: link.iconName,
-                      size: 16,
-                      className: "stroke-muted-foreground"
-                    }
-                  ) : null,
-                  link.label
+                  /* @__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", 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.title }),
+                    group.links.map((link, linkIndex) => /* @__PURE__ */ jsxs(
+                      Pressable,
+                      {
+                        href: link.url,
+                        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: handleClose,
+                        children: [
+                          link.icon ? link.icon : link.iconName ? /* @__PURE__ */ jsx(
+                            DynamicIcon,
+                            {
+                              name: link.iconName,
+                              size: 16,
+                              className: "stroke-muted-foreground"
+                            }
+                          ) : null,
+                          link.label
+                        ]
+                      },
+                      `mobile-link-${groupIndex}-${linkIndex}`
+                    ))
+                  ] }, `mobile-group-${groupIndex}`)) })
                 ]
               },
-              `mobile-link-${groupIndex}-${linkIndex}`
-            ))
-          ) })
-        ]
-      },
-      `nav-item-${index}`
-    );
-  }
-  return /* @__PURE__ */ jsx(
-    Pressable,
-    {
-      href: item.url,
-      className: "flex h-15 items-center rounded-md p-0 px-4 text-left text-base leading-[3.75] font-normal text-muted-foreground ring-ring/10 outline-ring/50 transition-all hover:bg-muted focus-visible:ring-4 focus-visible:outline-1 nth-last-1:border-0",
-      children: item.title
-    },
-    `nav-link-${index}`
+              `nav-item-${index}`
+            );
+          }
+          return /* @__PURE__ */ jsx(
+            Pressable,
+            {
+              href: item.url,
+              className: "flex h-15 items-center rounded-md p-0 px-4 text-left text-base leading-[3.75] font-normal text-muted-foreground ring-ring/10 outline-ring/50 transition-all hover:bg-muted focus-visible:ring-4 focus-visible:outline-1",
+              onClick: handleClose,
+              children: item.title
+            },
+            `nav-link-${index}`
+          );
+        }) }),
+        renderMobileAuthActions
+      ] }) })
+    }
   );
 };
 

package/dist/navbar-platform-resources.cjs

@@ -1222,7 +1222,7 @@ 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-4 right-4 z-10", children: /* @__PURE__ */ jsxRuntime.jsxs(
+        /* @__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",
           {
             onClick: onClose,
@@ -1595,6 +1595,7 @@ var NavbarPlatformResources = ({
       children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: navWrapperClasses, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: innerContainerClasses, children: /* @__PURE__ */ jsxRuntime.jsxs(
         NavigationMenu,
         {
+          viewport: false,
           className: cn("min-w-full", navigationMenuClassName),
           children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full items-center justify-between gap-12 py-4", children: [
@@ -1617,7 +1618,7 @@ var NavbarPlatformResources = ({
                         NavigationMenuItem,
                         {
                           children: [
-                            /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuTrigger, { className: "h-auto bg-transparent px-0 py-0 font-normal text-muted-foreground hover:bg-transparent focus:bg-transparent data-[state=open]:bg-transparent", children: link.label }),
+                            /* @__PURE__ */ jsxRuntime.jsx(NavigationMenuTrigger, { className: "h-auto bg-transparent px-4 py-2 font-normal hover:bg-muted focus:bg-transparent data-[state=open]:bg-transparent", children: link.label }),
                             renderDropdownContent(link)
                           ]
                         },
@@ -1634,7 +1635,7 @@ var NavbarPlatformResources = ({
                           NavigationMenuLink,
                           {
                             href: link.href,
-                            className: "group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-muted hover:text-accent-foreground",
+                            className: "group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-muted",
                             children: link.label
                           }
                         )
@@ -1685,7 +1686,7 @@ var NavbarPlatformResources = ({
                           className: "border-b-0",
                           children: [
                             /* @__PURE__ */ jsxRuntime.jsx(AccordionTrigger, { className: "h-15 items-center text-base font-normal text-foreground hover:no-underline", children: link.label }),
-                            /* @__PURE__ */ jsxRuntime.jsx(AccordionContent, { className: "overflow-x-none", children: link.links?.map((item, itemIndex) => /* @__PURE__ */ jsxRuntime.jsxs(
+                            /* @__PURE__ */ jsxRuntime.jsx(AccordionContent, { className: "overflow-x-none space-y-4", children: link.links?.map((item, itemIndex) => /* @__PURE__ */ jsxRuntime.jsxs(
                               Pressable,
                               {
                                 href: getLinkUrl(item),

package/dist/navbar-platform-resources.js

@@ -1199,7 +1199,7 @@ 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-4 right-4 z-10", children: /* @__PURE__ */ jsxs(
+        /* @__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",
           {
             onClick: onClose,
@@ -1572,6 +1572,7 @@ var NavbarPlatformResources = ({
       children: /* @__PURE__ */ jsx("div", { className: containerWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: navWrapperClasses, children: /* @__PURE__ */ jsx("div", { className: innerContainerClasses, children: /* @__PURE__ */ jsxs(
         NavigationMenu,
         {
+          viewport: false,
           className: cn("min-w-full", navigationMenuClassName),
           children: [
             /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center justify-between gap-12 py-4", children: [
@@ -1594,7 +1595,7 @@ var NavbarPlatformResources = ({
                         NavigationMenuItem,
                         {
                           children: [
-                            /* @__PURE__ */ jsx(NavigationMenuTrigger, { className: "h-auto bg-transparent px-0 py-0 font-normal text-muted-foreground hover:bg-transparent focus:bg-transparent data-[state=open]:bg-transparent", children: link.label }),
+                            /* @__PURE__ */ jsx(NavigationMenuTrigger, { className: "h-auto bg-transparent px-4 py-2 font-normal hover:bg-muted focus:bg-transparent data-[state=open]:bg-transparent", children: link.label }),
                             renderDropdownContent(link)
                           ]
                         },
@@ -1611,7 +1612,7 @@ var NavbarPlatformResources = ({
                           NavigationMenuLink,
                           {
                             href: link.href,
-                            className: "group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-muted hover:text-accent-foreground",
+                            className: "group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-muted",
                             children: link.label
                           }
                         )
@@ -1662,7 +1663,7 @@ var NavbarPlatformResources = ({
                           className: "border-b-0",
                           children: [
                             /* @__PURE__ */ jsx(AccordionTrigger, { className: "h-15 items-center text-base font-normal text-foreground hover:no-underline", children: link.label }),
-                            /* @__PURE__ */ jsx(AccordionContent, { className: "overflow-x-none", children: link.links?.map((item, itemIndex) => /* @__PURE__ */ jsxs(
+                            /* @__PURE__ */ jsx(AccordionContent, { className: "overflow-x-none space-y-4", children: link.links?.map((item, itemIndex) => /* @__PURE__ */ jsxs(
                               Pressable,
                               {
                                 href: getLinkUrl(item),

package/dist/navbar-search-focused.cjs

@@ -1117,7 +1117,7 @@ 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-4 right-4 z-10", children: /* @__PURE__ */ jsxRuntime.jsxs(
+        /* @__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",
           {
             onClick: onClose,

package/dist/navbar-search-focused.js

@@ -1095,7 +1095,7 @@ 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-4 right-4 z-10", children: /* @__PURE__ */ jsxs(
+        /* @__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",
           {
             onClick: onClose,