@geomak/ui 6.2.0 → 6.2.2

package/dist/index.d.cts

@@ -1648,6 +1648,16 @@ interface MegaMenuProps {
     align?: 'start' | 'center' | 'end';
     /** Delay (ms) before a hovered item opens. Default `200`. */
     delayDuration?: number;
+    /**
+     * Below the `md` breakpoint, collapse the hover bar into a tap-friendly
+     * hamburger disclosure (a vertical accordion of the same items). Hover
+     * mega-panels don't work on touch, so this is the graceful fallback.
+     * Set `false` to render the desktop bar at every width (e.g. when you
+     * provide your own mobile navigation). Default `true`.
+     */
+    responsive?: boolean;
+    /** Label for the mobile disclosure toggle. Default `'Menu'`. */
+    mobileLabel?: React__default.ReactNode;
     /** Extra classes merged onto the menu bar root. */
     className?: string;
     style?: React__default.CSSProperties;
@@ -1661,7 +1671,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
@@ -1679,7 +1690,7 @@ interface MegaMenuProps {
  * </MegaMenu>
  * ```
  */
-declare function MegaMenu({ children, align, delayDuration, className, style, 'aria-label': ariaLabel }: MegaMenuProps): react_jsx_runtime.JSX.Element;
+declare function MegaMenu({ children, align, delayDuration, responsive, mobileLabel, className, style, 'aria-label': ariaLabel, }: MegaMenuProps): react_jsx_runtime.JSX.Element;
 declare namespace MegaMenu {
     var Item: typeof MegaMenuItem;
     var Panel: typeof MegaMenuPanel;
@@ -1701,7 +1712,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

@@ -1648,6 +1648,16 @@ interface MegaMenuProps {
     align?: 'start' | 'center' | 'end';
     /** Delay (ms) before a hovered item opens. Default `200`. */
     delayDuration?: number;
+    /**
+     * Below the `md` breakpoint, collapse the hover bar into a tap-friendly
+     * hamburger disclosure (a vertical accordion of the same items). Hover
+     * mega-panels don't work on touch, so this is the graceful fallback.
+     * Set `false` to render the desktop bar at every width (e.g. when you
+     * provide your own mobile navigation). Default `true`.
+     */
+    responsive?: boolean;
+    /** Label for the mobile disclosure toggle. Default `'Menu'`. */
+    mobileLabel?: React__default.ReactNode;
     /** Extra classes merged onto the menu bar root. */
     className?: string;
     style?: React__default.CSSProperties;
@@ -1661,7 +1671,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
@@ -1679,7 +1690,7 @@ interface MegaMenuProps {
  * </MegaMenu>
  * ```
  */
-declare function MegaMenu({ children, align, delayDuration, className, style, 'aria-label': ariaLabel }: MegaMenuProps): react_jsx_runtime.JSX.Element;
+declare function MegaMenu({ children, align, delayDuration, responsive, mobileLabel, className, style, 'aria-label': ariaLabel, }: MegaMenuProps): react_jsx_runtime.JSX.Element;
 declare namespace MegaMenu {
     var Item: typeof MegaMenuItem;
     var Panel: typeof MegaMenuPanel;
@@ -1701,7 +1712,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

@@ -1,7 +1,7 @@
 import { colors_default } from './chunk-GKXP6OJJ.js';
 export { colors_default as COLORS, PALETTE as palette, semanticTokens, vars } from './chunk-GKXP6OJJ.js';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import React8, { createContext, useState, useEffect, useMemo, useId, useCallback, useRef, useContext, useLayoutEffect, useSyncExternalStore } from 'react';
+import React12, { createContext, useState, useEffect, useMemo, useId, useCallback, useRef, useContext, useLayoutEffect, useSyncExternalStore } from 'react';
 import { createPortal } from 'react-dom';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
 import * as Dialog from '@radix-ui/react-dialog';
@@ -2471,7 +2471,7 @@ function Field({
   );
 }
 var SearchIcon = /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "currentColor", className: "w-4 h-4", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", d: "M10.5 3.75a6.75 6.75 0 100 13.5 6.75 6.75 0 000-13.5zM2.25 10.5a8.25 8.25 0 1114.59 5.28l4.69 4.69a.75.75 0 11-1.06 1.06l-4.69-4.69A8.25 8.25 0 012.25 10.5z", clipRule: "evenodd" }) });
-var SearchInput = React8.forwardRef(function SearchInput2({ value, onChange, disabled, label, htmlFor, placeholder, name, inputStyle, style, layout = "vertical", size = "md", icon, helperText, className }, ref) {
+var SearchInput = React12.forwardRef(function SearchInput2({ value, onChange, disabled, label, htmlFor, placeholder, name, inputStyle, style, layout = "vertical", size = "md", icon, helperText, className }, ref) {
   return /* @__PURE__ */ jsx(Field, { className, label, htmlFor, layout, helperText, children: /* @__PURE__ */ jsxs(
     "div",
     {
@@ -2971,7 +2971,7 @@ function TableBody({
   return /* @__PURE__ */ jsx("tbody", { children: rows.map((row, i) => {
     const rowKey = getRowKey(row, i);
     const isExpanded = expanded.has(rowKey);
-    return /* @__PURE__ */ jsxs(React8.Fragment, { children: [
+    return /* @__PURE__ */ jsxs(React12.Fragment, { children: [
       /* @__PURE__ */ jsxs(
         "tr",
         {
@@ -3387,29 +3387,39 @@ function Sidebar({
     }
   ) });
 }
-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(
-    NavigationMenu.Root,
-    {
-      delayDuration,
-      "aria-label": ariaLabel,
-      className: ["relative z-10 flex", 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"
-          }
-        ) })
-      ]
-    }
-  );
+var MegaMenuContext = createContext({ align: "start" });
+function MegaMenu({
+  children,
+  align = "start",
+  delayDuration = 200,
+  responsive = true,
+  mobileLabel = "Menu",
+  className = "",
+  style,
+  "aria-label": ariaLabel
+}) {
+  return /* @__PURE__ */ jsxs(MegaMenuContext.Provider, { value: { align }, children: [
+    /* @__PURE__ */ jsx(
+      NavigationMenu.Root,
+      {
+        delayDuration,
+        "aria-label": ariaLabel,
+        className: [
+          "relative z-10 w-full",
+          responsive ? "hidden md:flex" : "flex",
+          className
+        ].filter(Boolean).join(" "),
+        style,
+        children: /* @__PURE__ */ jsx(NavigationMenu.List, { className: "flex items-center gap-1", children })
+      }
+    ),
+    responsive && /* @__PURE__ */ jsx(MegaMenuMobile, { label: mobileLabel, 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,22 +3443,36 @@ 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 layout = columns ? {
+    gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,
+    width: `min(92vw, ${columns * 272}px)`
+  } : {
+    gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))",
+    width: "min(92vw, 760px)"
+  };
   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: ["grid gap-6 p-6", className].filter(Boolean).join(" "),
+      style: { ...layout, maxWidth: "min(92vw, 960px)", ...style },
       children
     }
   );
 }
 function MegaMenuSection({ title, children, className = "" }) {
-  return /* @__PURE__ */ jsxs("div", { className: ["min-w-[200px] flex flex-col", className].filter(Boolean).join(" "), children: [
+  return /* @__PURE__ */ jsxs("div", { className: ["min-w-0 flex flex-col", className].filter(Boolean).join(" "), children: [
     title && /* @__PURE__ */ jsx("p", { className: "px-3 pb-1.5 text-[11px] font-semibold uppercase tracking-widest text-foreground-muted select-none", children: title }),
     /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-0.5", children })
   ] });
@@ -3477,7 +3501,124 @@ function MegaMenuLink({ href, icon, description, active, onClick, children, clas
   );
 }
 function MegaMenuFeatured({ children, className = "" }) {
-  return /* @__PURE__ */ jsx("div", { className: ["min-w-[220px] rounded-lg bg-surface-raised border border-border p-4 flex flex-col", className].filter(Boolean).join(" "), children });
+  return /* @__PURE__ */ jsx("div", { className: ["min-w-0 rounded-lg bg-surface-raised border border-border p-4 flex flex-col", className].filter(Boolean).join(" "), children });
+}
+var elementsOfType = (children, type) => React12.Children.toArray(children).filter(
+  (c) => React12.isValidElement(c) && c.type === type
+);
+var MOBILE_CHEVRON = /* @__PURE__ */ jsx(
+  "svg",
+  {
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: 2,
+    "aria-hidden": "true",
+    className: "h-4 w-4 flex-shrink-0 text-foreground-muted transition-transform duration-200",
+    children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" })
+  }
+);
+function MobileLinkRow({ link, onNavigate }) {
+  const { href, icon, description, active, onClick, children } = link.props;
+  return /* @__PURE__ */ jsxs(
+    "a",
+    {
+      href,
+      onClick: (e) => {
+        onClick?.(e);
+        onNavigate();
+      },
+      "data-active": active ? "" : void 0,
+      className: "flex items-start gap-3 rounded-md p-2.5 transition-colors select-none\n                hover:bg-surface-raised focus:outline-none focus-visible:ring-2 focus-visible:ring-accent\n                data-[active]:bg-surface-raised",
+      children: [
+        icon && /* @__PURE__ */ jsx("span", { className: "flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-md bg-surface-raised text-accent", children: /* @__PURE__ */ jsx("span", { className: "h-[17px] w-[17px] inline-flex items-center justify-center", children: icon }) }),
+        /* @__PURE__ */ jsxs("span", { className: "flex flex-col min-w-0", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-foreground data-[active]:text-accent", children }),
+          description && /* @__PURE__ */ jsx("span", { className: "text-xs text-foreground-muted leading-snug mt-0.5", children: description })
+        ] })
+      ]
+    }
+  );
+}
+function MobilePanel({ panel, onNavigate }) {
+  const nodes = React12.Children.toArray(panel.props.children);
+  return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-4 px-2 pb-3 pt-1", children: nodes.map((node, i) => {
+    if (!React12.isValidElement(node)) return null;
+    const el = node;
+    if (el.type === MegaMenuSection) {
+      const { title, children } = el.props;
+      return /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+        title && /* @__PURE__ */ jsx("p", { className: "px-2.5 pb-1 text-[11px] font-semibold uppercase tracking-widest text-foreground-muted select-none", children: title }),
+        /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-0.5", children: elementsOfType(children, MegaMenuLink).map((lnk, j) => /* @__PURE__ */ jsx(MobileLinkRow, { link: lnk, onNavigate }, j)) })
+      ] }, i);
+    }
+    if (el.type === MegaMenuFeatured) {
+      return /* @__PURE__ */ jsx("div", { className: "rounded-lg bg-surface-raised border border-border p-3 flex flex-col", children: el.props.children }, i);
+    }
+    return /* @__PURE__ */ jsx("div", { children: node }, i);
+  }) });
+}
+function MegaMenuMobile({
+  children,
+  label
+}) {
+  const [open, setOpen] = useState(false);
+  const [expanded, setExpanded] = useState(null);
+  const items = elementsOfType(children, MegaMenuItem);
+  return /* @__PURE__ */ jsxs("div", { className: "md:hidden w-full", children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => setOpen((o) => !o),
+        "aria-expanded": open,
+        className: "inline-flex items-center gap-2 h-10 px-3 rounded-md text-sm font-medium\n                    text-foreground-secondary hover:text-foreground hover:bg-surface-raised\n                    focus:outline-none focus-visible:ring-2 focus-visible:ring-accent transition-colors",
+        children: [
+          /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, "aria-hidden": "true", className: "h-5 w-5", children: open ? /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 6l12 12M18 6L6 18" }) : /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M4 7h16M4 12h16M4 17h16" }) }),
+          label
+        ]
+      }
+    ),
+    open && /* @__PURE__ */ jsx("div", { className: "mt-2 overflow-hidden rounded-lg border border-border bg-surface shadow-lg", children: items.map((item, i) => {
+      const { label: itemLabel, icon, href, children: panel } = item.props;
+      const hasPanel = panel != null;
+      const isOpen = expanded === i;
+      const rowBase = "flex w-full items-center gap-2 px-3 h-11 text-sm font-medium text-foreground-secondary hover:bg-surface-raised hover:text-foreground transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-accent";
+      const divider = i > 0 ? "border-t border-border" : "";
+      if (!hasPanel) {
+        return /* @__PURE__ */ jsxs(
+          "a",
+          {
+            href,
+            onClick: () => setOpen(false),
+            className: [rowBase, divider].filter(Boolean).join(" "),
+            children: [
+              icon && /* @__PURE__ */ jsx("span", { className: "flex h-4 w-4 flex-shrink-0 items-center justify-center", children: icon }),
+              itemLabel
+            ]
+          },
+          i
+        );
+      }
+      return /* @__PURE__ */ jsxs("div", { className: divider || void 0, children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => setExpanded(isOpen ? null : i),
+            "aria-expanded": isOpen,
+            className: [rowBase, isOpen ? "text-accent" : ""].filter(Boolean).join(" "),
+            children: [
+              icon && /* @__PURE__ */ jsx("span", { className: "flex h-4 w-4 flex-shrink-0 items-center justify-center", children: icon }),
+              /* @__PURE__ */ jsx("span", { className: "flex-1 text-left", children: itemLabel }),
+              /* @__PURE__ */ jsx("span", { className: isOpen ? "rotate-180" : "", children: MOBILE_CHEVRON })
+            ]
+          }
+        ),
+        isOpen && /* @__PURE__ */ jsx(MobilePanel, { panel, onNavigate: () => setOpen(false) })
+      ] }, i);
+    }) })
+  ] });
 }
 MegaMenu.Item = MegaMenuItem;
 MegaMenu.Panel = MegaMenuPanel;
@@ -3695,7 +3836,7 @@ function ThemeProvider({
   className = "",
   style
 }) {
-  const id = React8.useId().replace(/:/g, "");
+  const id = React12.useId().replace(/:/g, "");
   const scopeClass = `geo-th-${id}`;
   const divRef = useRef(null);
   useEffect(() => {
@@ -5699,7 +5840,7 @@ function OtpInput({
     emit(valid.join(""));
     focusBox(valid.length);
   };
-  return /* @__PURE__ */ jsx(Field, { className, label, htmlFor, errorId, errorMessage, required, layout, helperText, children: /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", role: "group", "aria-label": typeof label === "string" ? label : "One-time code", children: chars.map((char, idx) => /* @__PURE__ */ jsxs(React8.Fragment, { children: [
+  return /* @__PURE__ */ jsx(Field, { className, label, htmlFor, errorId, errorMessage, required, layout, helperText, children: /* @__PURE__ */ jsx("div", { className: "flex items-center gap-2", role: "group", "aria-label": typeof label === "string" ? label : "One-time code", children: chars.map((char, idx) => /* @__PURE__ */ jsxs(React12.Fragment, { children: [
     /* @__PURE__ */ jsx(
       "input",
       {