@geomak/ui 6.0.1 → 6.2.0

package/dist/index.cjs

@@ -13,6 +13,7 @@ var Accordion = require('@radix-ui/react-accordion');
 var ContextMenuPrimitive = require('@radix-ui/react-context-menu');
 var Popover = require('@radix-ui/react-popover');
 var SwitchPrimitive = require('@radix-ui/react-switch');
+var NavigationMenu = require('@radix-ui/react-navigation-menu');
 var CheckboxPrimitive = require('@radix-ui/react-checkbox');
 var RadioGroupPrimitive = require('@radix-ui/react-radio-group');
 var ToggleGroup = require('@radix-ui/react-toggle-group');
@@ -47,6 +48,7 @@ var Accordion__namespace = /*#__PURE__*/_interopNamespace(Accordion);
 var ContextMenuPrimitive__namespace = /*#__PURE__*/_interopNamespace(ContextMenuPrimitive);
 var Popover__namespace = /*#__PURE__*/_interopNamespace(Popover);
 var SwitchPrimitive__namespace = /*#__PURE__*/_interopNamespace(SwitchPrimitive);
+var NavigationMenu__namespace = /*#__PURE__*/_interopNamespace(NavigationMenu);
 var CheckboxPrimitive__namespace = /*#__PURE__*/_interopNamespace(CheckboxPrimitive);
 var RadioGroupPrimitive__namespace = /*#__PURE__*/_interopNamespace(RadioGroupPrimitive);
 var ToggleGroup__namespace = /*#__PURE__*/_interopNamespace(ToggleGroup);
@@ -986,15 +988,27 @@ function Tabs({
   const current = isControlled ? value : internal;
   const reduced = !!framerMotion.useReducedMotion();
   const indicatorId = React8.useId();
-  const handle = (next) => {
+  const select = React8.useCallback((next) => {
     if (!isControlled) setInternal(next);
     onValueChange?.(next);
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(TabsContext.Provider, { value: { value: current, variant, size, orientation, indicatorId, reduced }, children: /* @__PURE__ */ jsxRuntime.jsx(
+  }, [isControlled, onValueChange]);
+  const registry = React8.useRef(/* @__PURE__ */ new Map());
+  const orderRef = React8.useRef(0);
+  const [, bump] = React8.useState(0);
+  const registerTab = React8.useCallback((val, meta) => {
+    const existing = registry.current.get(val);
+    registry.current.set(val, { ...meta, order: existing?.order ?? orderRef.current++ });
+    if (!existing) bump((v) => v + 1);
+  }, []);
+  const unregisterTab = React8.useCallback((val) => {
+    if (registry.current.delete(val)) bump((v) => v + 1);
+  }, []);
+  const getTabs = React8.useCallback(() => [...registry.current.entries()].sort((a, b) => a[1].order - b[1].order).map(([val, m]) => ({ value: val, label: m.label, icon: m.icon, disabled: m.disabled })), []);
+  return /* @__PURE__ */ jsxRuntime.jsx(TabsContext.Provider, { value: { value: current, variant, size, orientation, indicatorId, reduced, select, registerTab, unregisterTab, getTabs }, children: /* @__PURE__ */ jsxRuntime.jsx(
     TabsPrimitive__namespace.Root,
     {
       value: current,
-      onValueChange: handle,
+      onValueChange: select,
       orientation,
       className: [
         "flex min-w-0",
@@ -1007,7 +1021,7 @@ function Tabs({
   ) });
 }
 function TabsList({ children, "aria-label": ariaLabel, className = "" }) {
-  const { variant, orientation, reduced } = useTabsContext();
+  const { variant, orientation, reduced, value } = useTabsContext();
   const horizontal = orientation === "horizontal";
   const scrollRef = React8.useRef(null);
   const [edges, setEdges] = React8.useState({ start: false, end: false });
@@ -1043,6 +1057,14 @@ function TabsList({ children, "aria-label": ariaLabel, className = "" }) {
     const amount = (horizontal ? el.clientWidth : el.clientHeight) * 0.7 * dir;
     el.scrollBy({ [horizontal ? "left" : "top"]: amount, behavior: reduced ? "auto" : "smooth" });
   }, [horizontal, reduced]);
+  React8.useLayoutEffect(() => {
+    const el = scrollRef.current;
+    if (!el || !scrollable) return;
+    const active = el.querySelector("[role=tab][data-state=active]");
+    if (active && typeof active.scrollIntoView === "function") {
+      active.scrollIntoView({ block: "nearest", inline: "nearest", behavior: reduced ? "auto" : "smooth" });
+    }
+  }, [value, scrollable, reduced]);
   const maskStyle = scrollable && (edges.start || edges.end) ? (() => {
     const dir = horizontal ? "to right" : "to bottom";
     const a = edges.start ? "transparent, black 36px" : "black";
@@ -1059,7 +1081,8 @@ function TabsList({ children, "aria-label": ariaLabel, className = "" }) {
     return `flex ${horizontal ? "flex-row" : "flex-col"} ${align} gap-1 ${hairline}`;
   })();
   const scrollClass = scrollable ? horizontal ? "overflow-x-auto overflow-y-hidden hidden-scrollbar" : "overflow-y-auto overflow-x-hidden hidden-scrollbar" : "";
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ["relative flex min-w-0", horizontal ? "flex-row items-stretch" : "flex-col items-stretch", className].filter(Boolean).join(" "), children: [
+  const overflowing = scrollable && (edges.start || edges.end);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ["relative flex min-w-0 gap-1", horizontal ? "flex-row items-stretch" : "flex-col items-stretch", className].filter(Boolean).join(" "), children: [
     scrollable && edges.start && /* @__PURE__ */ jsxRuntime.jsx(Chevron, { side: "start", orientation, onClick: () => nudge(-1) }),
     /* @__PURE__ */ jsxRuntime.jsx(
       TabsPrimitive__namespace.List,
@@ -1071,37 +1094,131 @@ function TabsList({ children, "aria-label": ariaLabel, className = "" }) {
         children
       }
     ),
-    scrollable && edges.end && /* @__PURE__ */ jsxRuntime.jsx(Chevron, { side: "end", orientation, onClick: () => nudge(1) })
+    scrollable && edges.end && /* @__PURE__ */ jsxRuntime.jsx(Chevron, { side: "end", orientation, onClick: () => nudge(1) }),
+    overflowing && /* @__PURE__ */ jsxRuntime.jsx(OverflowMenu, {})
   ] });
 }
 function Chevron({ side, orientation, onClick }) {
   const horizontal = orientation === "horizontal";
   const rotate = horizontal ? side === "start" ? "rotate-180" : "" : side === "start" ? "-rotate-90" : "rotate-90";
-  const pos = horizontal ? side === "start" ? "left-0 top-1/2 -translate-y-1/2" : "right-0 top-1/2 -translate-y-1/2" : side === "start" ? "top-0 left-1/2 -translate-x-1/2" : "bottom-0 left-1/2 -translate-x-1/2";
   return /* @__PURE__ */ jsxRuntime.jsx(
     "button",
     {
       type: "button",
       "aria-label": side === "start" ? "Scroll tabs backward" : "Scroll tabs forward",
       onClick,
-      className: `absolute z-20 ${pos} flex h-7 w-7 items-center justify-center rounded-full border border-border bg-surface text-foreground-secondary shadow-sm hover:text-foreground hover:bg-surface-raised transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-accent`,
+      className: "flex-shrink-0 self-center flex h-7 w-7 items-center justify-center rounded-full border border-border bg-surface text-foreground-secondary shadow-sm hover:text-foreground hover:bg-surface-raised transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-accent",
       children: /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: `h-4 w-4 ${rotate}`, "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" }) })
     }
   );
 }
+function OverflowMenu() {
+  const { getTabs, value, select, orientation } = useTabsContext();
+  const horizontal = orientation === "horizontal";
+  const [open, setOpen] = React8.useState(false);
+  const wrapRef = React8.useRef(null);
+  const timer = React8.useRef(null);
+  const openNow = () => {
+    if (timer.current) clearTimeout(timer.current);
+    setOpen(true);
+  };
+  const closeSoon = () => {
+    timer.current = setTimeout(() => setOpen(false), 160);
+  };
+  React8.useLayoutEffect(() => {
+    if (!open) return;
+    const onDoc = (e) => {
+      if (wrapRef.current && !wrapRef.current.contains(e.target)) setOpen(false);
+    };
+    const onKey = (e) => {
+      if (e.key === "Escape") setOpen(false);
+    };
+    document.addEventListener("mousedown", onDoc);
+    document.addEventListener("keydown", onKey);
+    return () => {
+      document.removeEventListener("mousedown", onDoc);
+      document.removeEventListener("keydown", onKey);
+    };
+  }, [open]);
+  const tabs = getTabs();
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: wrapRef,
+      className: "relative flex-shrink-0 self-center",
+      onMouseEnter: openNow,
+      onMouseLeave: closeSoon,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            "aria-haspopup": "menu",
+            "aria-expanded": open,
+            "aria-label": "Show all tabs",
+            onClick: () => setOpen((o) => !o),
+            className: "flex h-7 w-7 items-center justify-center rounded-full border border-border bg-surface text-foreground-secondary shadow-sm hover:text-foreground hover:bg-surface-raised data-[expanded=true]:text-foreground transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-accent",
+            "data-expanded": open,
+            children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { viewBox: "0 0 24 24", fill: "currentColor", className: "h-4 w-4", "aria-hidden": "true", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "5", cy: "12", r: "1.6" }),
+              /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "1.6" }),
+              /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "19", cy: "12", r: "1.6" })
+            ] })
+          }
+        ),
+        open && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            role: "menu",
+            onMouseEnter: openNow,
+            onMouseLeave: closeSoon,
+            className: `absolute z-30 ${horizontal ? "right-0 top-full mt-1.5" : "left-full top-0 ml-1.5"} min-w-[184px] max-h-72 overflow-y-auto hidden-scrollbar rounded-lg border border-border bg-surface p-1 shadow-md animate-in fade-in-0 zoom-in-95`,
+            children: tabs.map((t) => {
+              const isActive = t.value === value;
+              return /* @__PURE__ */ jsxRuntime.jsxs(
+                "button",
+                {
+                  type: "button",
+                  role: "menuitem",
+                  disabled: t.disabled,
+                  onClick: () => {
+                    select(t.value);
+                    setOpen(false);
+                  },
+                  className: `flex w-full items-center gap-2 rounded-md px-2.5 py-1.5 text-left text-sm transition-colors disabled:opacity-40 disabled:cursor-not-allowed focus:outline-none focus-visible:ring-2 focus-visible:ring-accent ${isActive ? "bg-surface-raised text-accent" : "text-foreground-secondary hover:bg-surface-raised hover:text-foreground"}`,
+                  children: [
+                    t.icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-shrink-0 inline-flex h-4 w-4 items-center justify-center", children: t.icon }),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 truncate", children: t.label }),
+                    isActive && /* @__PURE__ */ jsxRuntime.jsx("svg", { viewBox: "0 0 20 20", fill: "none", className: "h-4 w-4 flex-shrink-0 text-accent", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 10l4.5 4.5L16 6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
+                  ]
+                },
+                t.value
+              );
+            })
+          }
+        )
+      ]
+    }
+  );
+}
 function TabsTrigger({ value, icon, badge, closeable, onClose, disabled, className = "", children }) {
-  const { value: active, variant, size, orientation, indicatorId, reduced } = useTabsContext();
+  const { value: active, variant, size, orientation, indicatorId, reduced, registerTab, unregisterTab } = useTabsContext();
   const isActive = active === value;
   const horizontal = orientation === "horizontal";
   const sz = SIZE[size];
-  const base = "group/trigger relative inline-flex items-center justify-center whitespace-nowrap font-medium select-none transition-colors duration-150 focus:outline-none disabled:opacity-40 disabled:cursor-not-allowed flex-shrink-0";
+  React8.useLayoutEffect(() => {
+    registerTab(value, { label: children, icon, disabled });
+    return () => unregisterTab(value);
+  }, [value, children, icon, disabled, registerTab, unregisterTab]);
+  const layoutCls = horizontal ? "justify-center flex-shrink-0" : "justify-start w-full";
+  const base = "group/trigger relative inline-flex items-center whitespace-nowrap font-medium select-none transition-colors duration-150 focus:outline-none disabled:opacity-40 disabled:cursor-not-allowed";
   const variantCls = variant === "segmented" ? `rounded-md ${isActive ? "text-accent" : "text-foreground-secondary hover:text-foreground"} focus-visible:text-accent` : variant === "enclosed" ? `${horizontal ? "rounded-t-md border border-b-0 -mb-px" : "rounded-l-md border border-r-0 -mr-px"} ${isActive ? "bg-surface border-border text-foreground" : "border-transparent text-foreground-secondary hover:text-foreground hover:bg-surface-raised"} focus-visible:text-accent` : `${isActive ? "text-accent" : "text-foreground-secondary hover:text-foreground"} focus-visible:text-accent`;
   const trigger = /* @__PURE__ */ jsxRuntime.jsxs(
     TabsPrimitive__namespace.Trigger,
     {
       value,
       disabled,
-      className: [base, sz.trigger, closeable ? "pr-8" : "", variantCls, className].filter(Boolean).join(" "),
+      className: [base, sz.trigger, layoutCls, closeable ? "pr-8" : "", variantCls, className].filter(Boolean).join(" "),
       children: [
         variant === "segmented" && isActive && /* @__PURE__ */ jsxRuntime.jsx(
           framerMotion.motion.span,
@@ -1134,7 +1251,7 @@ function TabsTrigger({ value, icon, badge, closeable, onClose, disabled, classNa
     }
   );
   if (!closeable) return trigger;
-  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "relative inline-flex items-center flex-shrink-0", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: `relative inline-flex items-center ${horizontal ? "flex-shrink-0" : "w-full"}`, children: [
     trigger,
     /* @__PURE__ */ jsxRuntime.jsx(
       "button",
@@ -3306,6 +3423,104 @@ 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__ */ jsxRuntime.jsxs(
+    NavigationMenu__namespace.Root,
+    {
+      delayDuration,
+      "aria-label": ariaLabel,
+      className: ["relative z-10 flex", 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"
+          }
+        ) })
+      ]
+    }
+  );
+}
+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 = "" }) {
+  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 }),
+      label
+    ] }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(NavigationMenu__namespace.Item, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(NavigationMenu__namespace.Trigger, { 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 }),
+      label,
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "svg",
+        {
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: 2,
+          "aria-hidden": "true",
+          className: "h-3.5 w-3.5 text-foreground-muted transition-transform duration-200 group-data-[state=open]/top:rotate-180 group-data-[state=open]/top:text-accent",
+          children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(NavigationMenu__namespace.Content, { className: "data-[motion=from-start]:animate-in data-[motion=to-end]:animate-out", 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 }) {
+  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,
+      children
+    }
+  );
+}
+function MegaMenuSection({ title, children, className = "" }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ["min-w-[200px] flex flex-col", className].filter(Boolean).join(" "), children: [
+    title && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "px-3 pb-1.5 text-[11px] font-semibold uppercase tracking-widest text-foreground-muted select-none", children: title }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-0.5", children })
+  ] });
+}
+function MegaMenuLink({ href, icon, description, active, onClick, children, className = "" }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    NavigationMenu__namespace.Link,
+    {
+      active,
+      href,
+      onClick,
+      className: [
+        "group/link flex items-start gap-3 rounded-md p-3 transition-colors select-none",
+        "hover:bg-surface-raised focus:outline-none focus-visible:ring-2 focus-visible:ring-accent",
+        "data-[active]:bg-surface-raised",
+        className
+      ].filter(Boolean).join(" "),
+      children: [
+        icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-md bg-surface-raised text-accent group-hover/link:bg-surface group-data-[active]/link:bg-surface transition-colors", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "h-[18px] w-[18px] inline-flex items-center justify-center", children: icon }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex flex-col min-w-0", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium text-foreground group-data-[active]/link:text-accent", children }),
+          description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-foreground-muted leading-snug mt-0.5", children: description })
+        ] })
+      ]
+    }
+  );
+}
+function MegaMenuFeatured({ children, className = "" }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: ["min-w-[220px] rounded-lg bg-surface-raised border border-border p-4 flex flex-col", className].filter(Boolean).join(" "), children });
+}
+MegaMenu.Item = MegaMenuItem;
+MegaMenu.Panel = MegaMenuPanel;
+MegaMenu.Section = MegaMenuSection;
+MegaMenu.Link = MegaMenuLink;
+MegaMenu.Featured = MegaMenuFeatured;
+var MegaMenu_default = MegaMenu;
 function AppShell({
   topBar,
   sidebarSections = [],
@@ -6782,6 +6997,7 @@ exports.Icon = icons_default;
 exports.IconButton = IconButton;
 exports.List = List2;
 exports.LoadingSpinner = LoadingSpinner;
+exports.MegaMenu = MegaMenu_default;
 exports.Modal = Modal;
 exports.NotificationProvider = NotificationProvider;
 exports.NumberInput = NumberInput;