@geomak/ui 6.1.0 → 6.2.1

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);
@@ -3421,6 +3423,106 @@ function Sidebar({
     }
   ) });
 }
+var MegaMenuContext = React8.createContext({ align: "start" });
+function MegaMenu({ children, align = "start", delayDuration = 200, className = "", style, "aria-label": ariaLabel }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(MegaMenuContext.Provider, { value: { align }, children: /* @__PURE__ */ jsxRuntime.jsx(
+    NavigationMenu__namespace.Root,
+    {
+      delayDuration,
+      "aria-label": ariaLabel,
+      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 })
+    }
+  ) });
+}
+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 }),
+      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: `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
+      }
+    )
+  ] });
+}
+function MegaMenuPanel({ children, columns, className = "", style }) {
+  const maxWidth = columns ? `${columns * 248}px` : "min(92vw, 880px)";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: ["flex flex-wrap gap-6 p-6", className].filter(Boolean).join(" "),
+      style: { maxWidth, ...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 = [],
@@ -6897,6 +6999,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;