@geomak/ui 6.2.0 → 6.2.1

package/dist/index.cjs

@@ -3423,29 +3423,23 @@ function Sidebar({
     }
   ) });
 }
+var MegaMenuContext = React8.createContext({ align: "start" });
 function MegaMenu({ children, align = "start", delayDuration = 200, className = "", style, "aria-label": ariaLabel }) {
-  const justify = align === "center" ? "justify-center" : align === "end" ? "justify-end" : "justify-start";
-  return /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsx(MegaMenuContext.Provider, { value: { align }, children: /* @__PURE__ */ jsxRuntime.jsx(
     NavigationMenu__namespace.Root,
     {
       delayDuration,
       "aria-label": ariaLabel,
-      className: ["relative z-10 flex", className].filter(Boolean).join(" "),
+      className: ["relative z-10 flex w-full", className].filter(Boolean).join(" "),
       style,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(NavigationMenu__namespace.List, { className: "flex items-center gap-1", children }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: `absolute left-0 top-full flex w-full ${justify} pt-2`, children: /* @__PURE__ */ jsxRuntime.jsx(
-          NavigationMenu__namespace.Viewport,
-          {
-            className: "relative origin-top overflow-hidden rounded-lg border border-border bg-surface shadow-lg\n                        h-[var(--radix-navigation-menu-viewport-height)] w-[var(--radix-navigation-menu-viewport-width)]\n                        transition-[width,height] duration-200 ease-out\n                        data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95\n                        data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95"
-          }
-        ) })
-      ]
+      children: /* @__PURE__ */ jsxRuntime.jsx(NavigationMenu__namespace.List, { className: "flex items-center gap-1", children })
     }
-  );
+  ) });
 }
 var TOP_ITEM = "group/top inline-flex items-center gap-1.5 h-10 px-3 rounded-md text-sm font-medium select-none text-foreground-secondary hover:text-foreground hover:bg-surface-raised data-[state=open]:text-accent data-[active]:text-accent transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-accent";
 function MegaMenuItem({ label, icon, href, children, className = "" }) {
+  const { align } = React8.useContext(MegaMenuContext);
+  const pos = align === "center" ? "left-1/2 -translate-x-1/2" : align === "end" ? "right-0" : "left-0";
   if (!children) {
     return /* @__PURE__ */ jsxRuntime.jsx(NavigationMenu__namespace.Item, { children: /* @__PURE__ */ jsxRuntime.jsxs(NavigationMenu__namespace.Link, { href, className: [TOP_ITEM, className].filter(Boolean).join(" "), children: [
       icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-4 w-4 flex-shrink-0 items-center justify-center", children: icon }),
@@ -3469,16 +3463,24 @@ function MegaMenuItem({ label, icon, href, children, className = "" }) {
         }
       )
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(NavigationMenu__namespace.Content, { className: "data-[motion=from-start]:animate-in data-[motion=to-end]:animate-out", children })
+    /* @__PURE__ */ jsxRuntime.jsx(
+      NavigationMenu__namespace.Content,
+      {
+        className: `absolute top-full mt-2 ${pos} z-20 overflow-hidden rounded-lg border border-border bg-surface shadow-lg
+                    data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95
+                    data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95`,
+        children
+      }
+    )
   ] });
 }
-var COLS = { 1: "grid-cols-1", 2: "grid-cols-2", 3: "grid-cols-3", 4: "grid-cols-4" };
 function MegaMenuPanel({ children, columns, className = "", style }) {
+  const maxWidth = columns ? `${columns * 248}px` : "min(92vw, 880px)";
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: ["grid gap-6 p-6", columns ? COLS[columns] : "auto-cols-fr grid-flow-col", "w-max max-w-[min(92vw,860px)]", className].filter(Boolean).join(" "),
-      style,
+      className: ["flex flex-wrap gap-6 p-6", className].filter(Boolean).join(" "),
+      style: { maxWidth, ...style },
       children
     }
   );