@usefragments/ui 1.0.0

package/dist/components/NavigationMenu/index.js

@@ -0,0 +1,658 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import { createPortal } from "react-dom";
+import { CaretDown, X, List } from "@phosphor-icons/react";
+import { useFocusTrap, handleArrowNavigation } from "../../utils/a11y.js";
+import { Collapsible } from "../Collapsible/index.js";
+import { ScrollArea } from "../ScrollArea/index.js";
+import { NavigationMenuContext, useNavigationMenuContext, NavigationMenuItemContext, useNavigationMenuItemContext } from "./NavigationMenuContext.js";
+import { useNavigationMenu } from "./useNavigationMenu.js";
+import styles from "./NavigationMenu.module.scss.js";
+function composeNavMenuClickHandlers(childHandler, internalHandler) {
+  return (event) => {
+    childHandler == null ? void 0 : childHandler(event);
+    if (event.defaultPrevented) return;
+    internalHandler(event);
+  };
+}
+function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState(false);
+  React.useEffect(() => {
+    if (typeof window === "undefined") return;
+    const mq = window.matchMedia("(max-width: 767px)");
+    setIsMobile(mq.matches);
+    const handler = (e) => setIsMobile(e.matches);
+    mq.addEventListener("change", handler);
+    return () => mq.removeEventListener("change", handler);
+  }, []);
+  return isMobile;
+}
+function renderNavigationMenuIcon(slot, state) {
+  if (slot === void 0) return void 0;
+  return typeof slot === "function" ? slot(state) : slot;
+}
+function NavigationMenuRoot({
+  children,
+  value: controlledValue,
+  defaultValue,
+  onValueChange,
+  orientation = "horizontal",
+  delayDuration = 200,
+  skipDelayDuration = 300,
+  icons,
+  className,
+  "aria-label": ariaLabel = "Main navigation",
+  ...htmlProps
+}) {
+  const rootId = React.useId();
+  const isMobile = useIsMobile();
+  const state = useNavigationMenu({
+    value: controlledValue,
+    defaultValue,
+    onValueChange,
+    delayDuration,
+    skipDelayDuration
+  });
+  const classes = [styles.root, orientation === "vertical" && styles.rootVertical, className].filter(Boolean).join(" ");
+  const contextValue = React.useMemo(
+    () => ({
+      ...state,
+      orientation,
+      isMobile,
+      rootId,
+      icons
+    }),
+    [state, orientation, isMobile, rootId, icons]
+  );
+  return /* @__PURE__ */ jsx(NavigationMenuContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs("nav", { ...htmlProps, className: classes, "aria-label": ariaLabel, "data-orientation": orientation, children: [
+    children,
+    isMobile && /* @__PURE__ */ jsx(MobileHamburger, {}),
+    isMobile && state.mobileOpen && /* @__PURE__ */ jsx(MobileDrawer, {})
+  ] }) });
+}
+function NavigationMenuList({ children, className }) {
+  const { orientation, triggerOrder, triggerRefs, value } = useNavigationMenuContext();
+  const listRef = React.useRef(null);
+  const handleKeyDown = (e) => {
+    var _a;
+    const order = triggerOrder.current;
+    const focusedValue = (_a = document.activeElement) == null ? void 0 : _a.getAttribute(
+      "data-navmenu-value"
+    );
+    const currentValue = focusedValue || value;
+    const currentIdx = order.indexOf(currentValue);
+    const newIdx = handleArrowNavigation(e, order, currentIdx >= 0 ? currentIdx : 0, {
+      orientation: orientation === "horizontal" ? "horizontal" : "vertical",
+      loop: true
+    });
+    if (newIdx !== void 0) {
+      const targetValue = order[newIdx];
+      const trigger = triggerRefs.current.get(targetValue);
+      trigger == null ? void 0 : trigger.focus();
+    }
+  };
+  const classes = [styles.list, orientation === "vertical" && styles.listVertical, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx(
+    "ul",
+    {
+      ref: listRef,
+      className: classes,
+      role: "list",
+      "data-orientation": orientation,
+      onKeyDown: handleKeyDown,
+      children
+    }
+  );
+}
+function NavigationMenuItem({ children, value: valueProp, className }) {
+  const rootCtx = useNavigationMenuContext();
+  const generatedValue = React.useId();
+  const autoValue = valueProp || `navmenu-item-${generatedValue}`;
+  const triggerId = `${rootCtx.rootId}-trigger-${autoValue}`;
+  const contentId = `${rootCtx.rootId}-content-${autoValue}`;
+  React.useEffect(() => {
+    if (!rootCtx.itemOrder.current.includes(autoValue)) {
+      rootCtx.itemOrder.current.push(autoValue);
+    }
+    const existing = rootCtx.itemInfoMap.current.get(autoValue);
+    if (!existing) {
+      rootCtx.itemInfoMap.current.set(autoValue, {
+        value: autoValue,
+        triggerLabel: "",
+        contentChildren: null
+      });
+    }
+    return () => {
+      rootCtx.itemOrder.current = rootCtx.itemOrder.current.filter((v) => v !== autoValue);
+      rootCtx.itemInfoMap.current.delete(autoValue);
+    };
+  }, [autoValue, rootCtx.itemInfoMap, rootCtx.itemOrder]);
+  const itemCtx = React.useMemo(
+    () => ({
+      value: autoValue,
+      triggerId,
+      contentId
+    }),
+    [autoValue, triggerId, contentId]
+  );
+  return /* @__PURE__ */ jsx(NavigationMenuItemContext.Provider, { value: itemCtx, children: /* @__PURE__ */ jsx("li", { className, children }) });
+}
+function NavigationMenuTrigger({ children, className }) {
+  var _a;
+  const ctx = useNavigationMenuContext();
+  const itemCtx = useNavigationMenuItemContext();
+  const isOpen = ctx.value === itemCtx.value;
+  const triggerRef = React.useRef(null);
+  React.useEffect(() => {
+    if (triggerRef.current) {
+      ctx.triggerRefs.current.set(itemCtx.value, triggerRef.current);
+      if (!ctx.triggerOrder.current.includes(itemCtx.value)) {
+        ctx.triggerOrder.current.push(itemCtx.value);
+      }
+    }
+    return () => {
+      ctx.triggerRefs.current.delete(itemCtx.value);
+      ctx.triggerOrder.current = ctx.triggerOrder.current.filter((v) => v !== itemCtx.value);
+    };
+  }, [itemCtx.value]);
+  React.useEffect(() => {
+    const label = typeof children === "string" ? children : "";
+    const existing = ctx.itemInfoMap.current.get(itemCtx.value);
+    ctx.itemInfoMap.current.set(itemCtx.value, {
+      ...existing,
+      value: itemCtx.value,
+      triggerLabel: label || (existing == null ? void 0 : existing.triggerLabel) || ""
+    });
+  }, [itemCtx.value, children]);
+  const handleClick = () => {
+    if (ctx.openTimerRef.current) {
+      clearTimeout(ctx.openTimerRef.current);
+      ctx.openTimerRef.current = null;
+    }
+    if (ctx.closeTimerRef.current) {
+      clearTimeout(ctx.closeTimerRef.current);
+      ctx.closeTimerRef.current = null;
+    }
+    ctx.setValue(isOpen ? "" : itemCtx.value);
+  };
+  const handlePointerEnter = () => {
+    if (ctx.closeTimerRef.current) {
+      clearTimeout(ctx.closeTimerRef.current);
+      ctx.closeTimerRef.current = null;
+    }
+    if (ctx.isRecentlyOpenRef.current) {
+      ctx.setValue(itemCtx.value);
+      return;
+    }
+    ctx.openTimerRef.current = setTimeout(() => {
+      ctx.setValue(itemCtx.value);
+    }, ctx.delayDuration);
+  };
+  const handlePointerLeave = () => {
+    if (ctx.openTimerRef.current) {
+      clearTimeout(ctx.openTimerRef.current);
+      ctx.openTimerRef.current = null;
+    }
+    ctx.closeTimerRef.current = setTimeout(() => {
+      ctx.setValue("");
+    }, ctx.delayDuration);
+  };
+  const handleKeyDown = (e) => {
+    var _a2;
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      ctx.setValue(isOpen ? "" : itemCtx.value);
+    }
+    if (e.key === "Escape" && isOpen) {
+      e.preventDefault();
+      ctx.setValue("");
+      (_a2 = triggerRef.current) == null ? void 0 : _a2.focus();
+    }
+  };
+  const classes = [styles.trigger, className].filter(Boolean).join(" ");
+  const chevronOverride = renderNavigationMenuIcon((_a = ctx.icons) == null ? void 0 : _a.triggerChevron, {
+    slot: "triggerChevron",
+    open: isOpen,
+    isMobile: ctx.isMobile
+  });
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ref: triggerRef,
+      type: "button",
+      id: itemCtx.triggerId,
+      className: classes,
+      "data-navmenu-value": itemCtx.value,
+      "aria-expanded": isOpen,
+      "aria-controls": itemCtx.contentId,
+      "data-state": isOpen ? "open" : "closed",
+      onClick: handleClick,
+      onPointerEnter: handlePointerEnter,
+      onPointerLeave: handlePointerLeave,
+      onKeyDown: handleKeyDown,
+      children: [
+        children,
+        chevronOverride ? /* @__PURE__ */ jsx("span", { className: styles.triggerChevron, "aria-hidden": true, children: chevronOverride }) : /* @__PURE__ */ jsx(CaretDown, { size: 12, className: styles.triggerChevron, "aria-hidden": true })
+      ]
+    }
+  );
+}
+function NavigationMenuContent({ children, className }) {
+  const ctx = useNavigationMenuContext();
+  const itemCtx = useNavigationMenuItemContext();
+  const isOpen = ctx.value === itemCtx.value;
+  const contentRef = React.useRef(null);
+  React.useEffect(() => {
+    const existing = ctx.itemInfoMap.current.get(itemCtx.value);
+    ctx.itemInfoMap.current.set(itemCtx.value, {
+      ...existing,
+      value: itemCtx.value,
+      triggerLabel: (existing == null ? void 0 : existing.triggerLabel) || "",
+      contentChildren: children
+    });
+  }, [itemCtx.value, children]);
+  React.useEffect(() => {
+    if (!isOpen || !contentRef.current) return;
+    const el = contentRef.current;
+    const observer = new ResizeObserver(([entry]) => {
+      if (entry) {
+        ctx.setViewportSize({
+          width: entry.contentRect.width,
+          height: entry.contentRect.height
+        });
+      }
+    });
+    observer.observe(el);
+    ctx.setViewportSize({
+      width: el.scrollWidth,
+      height: el.scrollHeight
+    });
+    return () => observer.disconnect();
+  }, [isOpen]);
+  const prevValue = ctx.previousValue.current;
+  const triggerOrder = ctx.triggerOrder.current;
+  const prevIdx = triggerOrder.indexOf(prevValue);
+  const currentIdx = triggerOrder.indexOf(itemCtx.value);
+  let motion;
+  if (isOpen && prevValue && prevValue !== itemCtx.value) {
+    motion = currentIdx > prevIdx ? "from-end" : "from-start";
+  }
+  React.useEffect(() => {
+    if (isOpen) {
+      ctx.previousValue.current = itemCtx.value;
+    }
+  }, [isOpen, itemCtx.value]);
+  if (!isOpen) return null;
+  const classes = [styles.content, className].filter(Boolean).join(" ");
+  const handlePointerEnter = () => {
+    if (ctx.closeTimerRef.current) {
+      clearTimeout(ctx.closeTimerRef.current);
+      ctx.closeTimerRef.current = null;
+    }
+  };
+  const handlePointerLeave = () => {
+    ctx.closeTimerRef.current = setTimeout(() => {
+      ctx.setValue("");
+    }, ctx.delayDuration);
+  };
+  const contentElement = /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: contentRef,
+      id: itemCtx.contentId,
+      className: classes,
+      role: "region",
+      "aria-labelledby": itemCtx.triggerId,
+      "data-motion": motion,
+      onPointerEnter: handlePointerEnter,
+      onPointerLeave: handlePointerLeave,
+      children
+    }
+  );
+  if (ctx.viewportRef.current) {
+    return createPortal(contentElement, ctx.viewportRef.current);
+  }
+  return contentElement;
+}
+function NavigationMenuLink({
+  children,
+  title,
+  description,
+  icon,
+  active = false,
+  featured = false,
+  asChild = false,
+  className,
+  href,
+  onClick,
+  ...htmlProps
+}) {
+  const ctx = React.useContext(NavigationMenuContext);
+  const itemCtx = React.useContext(NavigationMenuItemContext);
+  const isStructured = !!(title || description || icon);
+  React.useEffect(() => {
+    if (!ctx || !itemCtx) return;
+    const existing = ctx.itemInfoMap.current.get(itemCtx.value);
+    const fallbackLabel = typeof children === "string" ? children : typeof title === "string" ? title : React.Children.toArray(title ?? children).filter(
+      (node) => typeof node === "string" || typeof node === "number"
+    ).join("");
+    const resolvedHref = typeof href === "string" ? href : existing == null ? void 0 : existing.linkHref;
+    ctx.itemInfoMap.current.set(itemCtx.value, {
+      ...existing,
+      value: itemCtx.value,
+      triggerLabel: (existing == null ? void 0 : existing.triggerLabel) || fallbackLabel || "",
+      contentChildren: (existing == null ? void 0 : existing.contentChildren) ?? null,
+      linkHref: resolvedHref
+    });
+  }, [ctx, itemCtx, children, title, href]);
+  const handleClick = (e) => {
+    onClick == null ? void 0 : onClick(e);
+    if (e.defaultPrevented) return;
+    if ((ctx == null ? void 0 : ctx.isMobile) && ctx.mobileOpen) {
+      ctx.setMobileOpen(false);
+    }
+    if (ctx) {
+      ctx.setValue("");
+    }
+  };
+  if (isStructured) {
+    const classes2 = [
+      styles.link,
+      styles.linkStructured,
+      active && styles.linkActive,
+      featured && styles.linkFeatured,
+      className
+    ].filter(Boolean).join(" ");
+    const linkProps2 = {
+      ...htmlProps,
+      className: classes2,
+      href,
+      "aria-current": active ? "page" : void 0,
+      onClick: handleClick
+    };
+    if (asChild && React.isValidElement(children)) {
+      const childProps = children.props;
+      return React.cloneElement(children, {
+        ...linkProps2,
+        onClick: composeNavMenuClickHandlers(childProps.onClick, handleClick),
+        className: [classes2, childProps.className].filter(Boolean).join(" "),
+        children: /* @__PURE__ */ jsxs(Fragment, { children: [
+          icon && /* @__PURE__ */ jsx("span", { className: styles.linkIcon, children: icon }),
+          /* @__PURE__ */ jsxs("span", { className: styles.linkBody, children: [
+            title && /* @__PURE__ */ jsx("span", { className: styles.linkTitle, children: title }),
+            description && /* @__PURE__ */ jsx("span", { className: styles.linkDescription, children: description })
+          ] })
+        ] })
+      });
+    }
+    return /* @__PURE__ */ jsxs("a", { ...linkProps2, children: [
+      icon && /* @__PURE__ */ jsx("span", { className: styles.linkIcon, children: icon }),
+      /* @__PURE__ */ jsxs("span", { className: styles.linkBody, children: [
+        title && /* @__PURE__ */ jsx("span", { className: styles.linkTitle, children: title }),
+        description && /* @__PURE__ */ jsx("span", { className: styles.linkDescription, children: description })
+      ] })
+    ] });
+  }
+  const classes = [styles.link, active && styles.linkActive, className].filter(Boolean).join(" ");
+  const linkProps = {
+    ...htmlProps,
+    className: classes,
+    href,
+    "aria-current": active ? "page" : void 0,
+    onClick: handleClick
+  };
+  if (asChild && React.isValidElement(children)) {
+    const childProps = children.props;
+    return React.cloneElement(children, {
+      ...linkProps,
+      onClick: composeNavMenuClickHandlers(childProps.onClick, handleClick),
+      className: [classes, childProps.className].filter(Boolean).join(" ")
+    });
+  }
+  return /* @__PURE__ */ jsx("a", { ...linkProps, children });
+}
+function NavigationMenuIndicator({ className }) {
+  const { value, triggerRefs } = useNavigationMenuContext();
+  const [style, setStyle] = React.useState({ opacity: 0 });
+  React.useEffect(() => {
+    if (!value) {
+      setStyle({ opacity: 0 });
+      return;
+    }
+    const trigger = triggerRefs.current.get(value);
+    if (trigger) {
+      const parent = trigger.closest("ul");
+      if (parent) {
+        const parentRect = parent.getBoundingClientRect();
+        const triggerRect = trigger.getBoundingClientRect();
+        setStyle({
+          left: triggerRect.left - parentRect.left,
+          width: triggerRect.width,
+          opacity: 1
+        });
+      }
+    }
+  }, [value, triggerRefs]);
+  const classes = [styles.indicator, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx("div", { className: classes, style, "aria-hidden": true });
+}
+function NavigationMenuViewport({ className }) {
+  const ctx = useNavigationMenuContext();
+  const { viewportSize, viewportRef, value, triggerRefs } = ctx;
+  const isOpen = !!value;
+  const [triggerLeft, setTriggerLeft] = React.useState(0);
+  React.useEffect(() => {
+    if (!isOpen || !value) return;
+    const trigger = triggerRefs.current.get(value);
+    if (!trigger || !viewportRef.current) return;
+    const navRoot = viewportRef.current.parentElement;
+    if (!navRoot) return;
+    const navRect = navRoot.getBoundingClientRect();
+    const triggerRect = trigger.getBoundingClientRect();
+    setTriggerLeft(triggerRect.left - navRect.left);
+  }, [isOpen, value, triggerRefs, viewportRef]);
+  const cssVars = {
+    "--fui-navmenu-viewport-width": isOpen ? `${viewportSize.width}px` : "0px",
+    "--fui-navmenu-viewport-height": isOpen ? `${viewportSize.height}px` : "0px",
+    "--fui-navmenu-viewport-left": `${triggerLeft}px`
+  };
+  React.useEffect(() => {
+    if (isOpen) {
+      ctx.isRecentlyOpenRef.current = true;
+      if (ctx.skipDelayTimerRef.current) {
+        clearTimeout(ctx.skipDelayTimerRef.current);
+      }
+    } else {
+      ctx.skipDelayTimerRef.current = setTimeout(() => {
+        ctx.isRecentlyOpenRef.current = false;
+      }, ctx.skipDelayDuration);
+    }
+  }, [isOpen]);
+  const classes = [styles.viewport, className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: viewportRef,
+      className: classes,
+      style: cssVars,
+      "data-state": isOpen ? "open" : "closed",
+      role: "presentation"
+    }
+  );
+}
+function NavigationMenuMobileContent({ children }) {
+  const ctx = useNavigationMenuContext();
+  React.useEffect(() => {
+    ctx.setMobileContentChildren(children);
+    return () => ctx.setMobileContentChildren(null);
+  }, [children]);
+  return null;
+}
+function NavigationMenuMobileBrand({ children }) {
+  const ctx = useNavigationMenuContext();
+  React.useEffect(() => {
+    ctx.setMobileBrandChildren(children);
+    return () => ctx.setMobileBrandChildren(null);
+  }, [children]);
+  return null;
+}
+function NavigationMenuMobileSection({ children, label }) {
+  return /* @__PURE__ */ jsxs("div", { role: "group", "aria-label": label, children: [
+    label && /* @__PURE__ */ jsx("div", { className: styles.drawerSectionLabel, children: label }),
+    /* @__PURE__ */ jsx("div", { className: styles.drawerNav, children })
+  ] });
+}
+function MobileHamburger() {
+  var _a, _b;
+  const ctx = useNavigationMenuContext();
+  const { mobileOpen, setMobileOpen } = ctx;
+  const iconOverride = renderNavigationMenuIcon(
+    mobileOpen ? (_a = ctx.icons) == null ? void 0 : _a.mobileClose : (_b = ctx.icons) == null ? void 0 : _b.mobileMenu,
+    {
+      slot: mobileOpen ? "mobileClose" : "mobileMenu",
+      open: mobileOpen,
+      isMobile: true
+    }
+  );
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      className: styles.hamburger,
+      onClick: () => setMobileOpen(!mobileOpen),
+      "aria-label": "Toggle navigation",
+      "aria-expanded": mobileOpen,
+      children: iconOverride ?? (mobileOpen ? /* @__PURE__ */ jsx(X, { size: 24, "aria-hidden": true }) : /* @__PURE__ */ jsx(List, { size: 24, "aria-hidden": true }))
+    }
+  );
+}
+function MobileDrawer() {
+  var _a;
+  const ctx = useNavigationMenuContext();
+  const drawerRef = React.useRef(null);
+  useFocusTrap(drawerRef, true);
+  React.useEffect(() => {
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = "";
+    };
+  }, []);
+  React.useEffect(() => {
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") {
+        ctx.setMobileOpen(false);
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [ctx]);
+  const autoItems = [];
+  for (const value of ctx.itemOrder.current) {
+    const info = ctx.itemInfoMap.current.get(value);
+    if (info) autoItems.push(info);
+  }
+  const handleLinkClick = () => {
+    ctx.setMobileOpen(false);
+  };
+  const drawerContent = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { className: styles.drawerBackdrop, onClick: () => ctx.setMobileOpen(false), "aria-hidden": true }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref: drawerRef,
+        className: styles.drawer,
+        role: "dialog",
+        "aria-modal": true,
+        "aria-label": "Navigation",
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: styles.drawerHeader, children: [
+            ctx.mobileBrandChildren ?? /* @__PURE__ */ jsx("span", {}),
+            /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: styles.drawerClose,
+                onClick: () => ctx.setMobileOpen(false),
+                "aria-label": "Close navigation",
+                children: renderNavigationMenuIcon((_a = ctx.icons) == null ? void 0 : _a.drawerClose, {
+                  slot: "drawerClose",
+                  open: ctx.mobileOpen,
+                  isMobile: true
+                }) ?? /* @__PURE__ */ jsx(X, { size: 20, "aria-hidden": true })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(ScrollArea, { orientation: "vertical", className: styles.drawerBody, children: ctx.mobileContentChildren ? ctx.mobileContentChildren : /* @__PURE__ */ jsx("div", { className: styles.drawerNav, children: autoItems.map(
+            (item) => item.contentChildren ? /* @__PURE__ */ jsx(
+              MobileCollapsibleSection,
+              {
+                label: item.triggerLabel,
+                onLinkClick: handleLinkClick,
+                children: item.contentChildren
+              },
+              item.value
+            ) : item.linkHref ? /* @__PURE__ */ jsx(
+              "a",
+              {
+                className: styles.drawerLink,
+                href: item.linkHref,
+                onClick: handleLinkClick,
+                children: item.triggerLabel
+              },
+              item.value
+            ) : null
+          ) }) })
+        ]
+      }
+    )
+  ] });
+  if (typeof document === "undefined") return null;
+  return createPortal(drawerContent, document.body);
+}
+function MobileCollapsibleSection({
+  label,
+  children,
+  onLinkClick
+}) {
+  return /* @__PURE__ */ jsxs(Collapsible, { defaultOpen: false, children: [
+    /* @__PURE__ */ jsx(Collapsible.Trigger, { className: styles.drawerCollapsibleTrigger, children: label }),
+    /* @__PURE__ */ jsx(Collapsible.Content, { children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: styles.drawerCollapsibleContent,
+        onClick: onLinkClick,
+        onKeyDown: (e) => {
+          if (e.key === "Enter") onLinkClick();
+        },
+        role: "group",
+        children
+      }
+    ) })
+  ] });
+}
+const NavigationMenu = Object.assign(NavigationMenuRoot, {
+  List: NavigationMenuList,
+  Item: NavigationMenuItem,
+  Trigger: NavigationMenuTrigger,
+  Content: NavigationMenuContent,
+  Link: NavigationMenuLink,
+  Indicator: NavigationMenuIndicator,
+  Viewport: NavigationMenuViewport,
+  MobileBrand: NavigationMenuMobileBrand,
+  MobileContent: NavigationMenuMobileContent,
+  MobileSection: NavigationMenuMobileSection
+});
+export {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuIndicator,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuMobileBrand,
+  NavigationMenuMobileContent,
+  NavigationMenuMobileSection,
+  NavigationMenuRoot,
+  NavigationMenuTrigger,
+  NavigationMenuViewport
+};