@geomak/ui 6.2.0 → 6.2.1

package/dist/index.d.cts

@@ -1661,7 +1661,8 @@ interface MegaMenuProps {
  * Compose top-level items with `MegaMenu.Item`. An item with children opens a
  * panel (`MegaMenu.Panel` → `MegaMenu.Section` → `MegaMenu.Link`, plus an
  * optional `MegaMenu.Featured` promo column); an item with just `href` is a
- * plain top-level link.
+ * plain top-level link. Each panel positions itself under the bar and sizes to
+ * its content.
  *
  * @example
  * ```tsx
@@ -1701,7 +1702,7 @@ interface MegaMenuItemProps {
 declare function MegaMenuItem({ label, icon, href, children, className }: MegaMenuItemProps): react_jsx_runtime.JSX.Element;
 interface MegaMenuPanelProps {
     children: React__default.ReactNode;
-    /** Number of section columns (the featured column sits outside this grid). Default auto. */
+    /** Cap the panel to roughly this many side-by-side columns before wrapping. Default: single row. */
     columns?: 1 | 2 | 3 | 4;
     className?: string;
     style?: React__default.CSSProperties;

package/dist/index.d.ts

@@ -1661,7 +1661,8 @@ interface MegaMenuProps {
  * Compose top-level items with `MegaMenu.Item`. An item with children opens a
  * panel (`MegaMenu.Panel` → `MegaMenu.Section` → `MegaMenu.Link`, plus an
  * optional `MegaMenu.Featured` promo column); an item with just `href` is a
- * plain top-level link.
+ * plain top-level link. Each panel positions itself under the bar and sizes to
+ * its content.
  *
  * @example
  * ```tsx
@@ -1701,7 +1702,7 @@ interface MegaMenuItemProps {
 declare function MegaMenuItem({ label, icon, href, children, className }: MegaMenuItemProps): react_jsx_runtime.JSX.Element;
 interface MegaMenuPanelProps {
     children: React__default.ReactNode;
-    /** Number of section columns (the featured column sits outside this grid). Default auto. */
+    /** Cap the panel to roughly this many side-by-side columns before wrapping. Default: single row. */
     columns?: 1 | 2 | 3 | 4;
     className?: string;
     style?: React__default.CSSProperties;

package/dist/index.js

@@ -3387,29 +3387,23 @@ function Sidebar({
     }
   ) });
 }
+var MegaMenuContext = 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__ */ jsxs(
+  return /* @__PURE__ */ jsx(MegaMenuContext.Provider, { value: { align }, children: /* @__PURE__ */ jsx(
     NavigationMenu.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__ */ jsx(NavigationMenu.List, { className: "flex items-center gap-1", children }),
-        /* @__PURE__ */ jsx("div", { className: `absolute left-0 top-full flex w-full ${justify} pt-2`, children: /* @__PURE__ */ jsx(
-          NavigationMenu.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__ */ jsx(NavigationMenu.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 } = useContext(MegaMenuContext);
+  const pos = align === "center" ? "left-1/2 -translate-x-1/2" : align === "end" ? "right-0" : "left-0";
   if (!children) {
     return /* @__PURE__ */ jsx(NavigationMenu.Item, { children: /* @__PURE__ */ jsxs(NavigationMenu.Link, { href, className: [TOP_ITEM, className].filter(Boolean).join(" "), children: [
       icon && /* @__PURE__ */ jsx("span", { className: "flex h-4 w-4 flex-shrink-0 items-center justify-center", children: icon }),
@@ -3433,16 +3427,24 @@ function MegaMenuItem({ label, icon, href, children, className = "" }) {
         }
       )
     ] }),
-    /* @__PURE__ */ jsx(NavigationMenu.Content, { className: "data-[motion=from-start]:animate-in data-[motion=to-end]:animate-out", children })
+    /* @__PURE__ */ jsx(
+      NavigationMenu.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__ */ 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
     }
   );