@orchidui/dashboard 1.8.1-95 → 1.8.1-96

package/dist/ui/navigation-menu/index.js

@@ -0,0 +1,873 @@
+import { c as ye } from "../../index-C_aI-Wfj.js";
+import { defineComponent as P, ref as O, toRefs as be, computed as R, watchEffect as Y, createBlock as T, openBlock as N, unref as e, withCtx as w, createVNode as $, renderSlot as I, withKeys as Ce, mergeProps as B, Teleport as ie, createCommentVNode as Q, onMounted as se, createElementBlock as j, Fragment as ne, watch as oe, createElementVNode as we, normalizeProps as re, guardReactiveProps as le } from "vue";
+import { c as K } from "../../utils-SFgRDk1R.js";
+import { u as q, a as U } from "../../useForwardPropsEmits-0XKBv1pB.js";
+import { u as _e, r as ue, v as Me, l as Ee, i as ae, q as W, a as ke } from "../../index-BwPb_idr.js";
+import { g as L } from "../../getActiveElement-B-HWdUIb.js";
+import { u as x } from "../../useForwardExpose-DZT6mL_U.js";
+import { P as Z } from "../../Presence-CxfTrw6l.js";
+import { P as V } from "../../Primitive-B3twiLO1.js";
+import { u as H } from "../../Collection-COudIl-A.js";
+import { c as de } from "../../createContext-CZEfaSVa.js";
+import { u as Ne } from "../../useDirection-C3C_TLKm.js";
+import { u as ce } from "../../useId-reAg216X.js";
+import { r as S } from "../../index-OpE2oGce.js";
+import { u as fe } from "../../useArrowNavigation-BRMPveaB.js";
+import { _ as Pe } from "../../DismissableLayer-C7IJliOb.js";
+import { _ as Oe } from "../../VisuallyHidden-DMAU4heD.js";
+import { C as Te } from "../../chevron-down-CnpAlizg.js";
+function G(r) {
+  return r ? "open" : "closed";
+}
+function pe(r, o) {
+  return `${r}-trigger-${o}`;
+}
+function ee(r, o) {
+  return `${r}-content-${o}`;
+}
+const Ie = "navigationMenu.linkSelect", z = "navigationMenu.rootContentDismiss";
+function X(r) {
+  const o = [], n = document.createTreeWalker(r, NodeFilter.SHOW_ELEMENT, {
+    acceptNode: (t) => {
+      const a = t.tagName === "INPUT" && t.type === "hidden";
+      return t.disabled || t.hidden || a ? NodeFilter.FILTER_SKIP : t.tabIndex >= 0 ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP;
+    }
+  });
+  for (; n.nextNode(); ) o.push(n.currentNode);
+  return o;
+}
+function ve(r) {
+  const o = L();
+  return r.some((n) => n === o ? !0 : (n.focus(), L() !== o));
+}
+function $e(r) {
+  return r.forEach((o) => {
+    o.dataset.tabindex = o.getAttribute("tabindex") || "", o.setAttribute("tabindex", "-1");
+  }), () => {
+    r.forEach((o) => {
+      const n = o.dataset.tabindex;
+      o.setAttribute("tabindex", n);
+    });
+  };
+}
+function me(r) {
+  return (o) => o.pointerType === "mouse" ? r(o) : void 0;
+}
+const [F, De] = de(["NavigationMenuRoot", "NavigationMenuSub"], "NavigationMenuContext"), Be = /* @__PURE__ */ P({
+  __name: "NavigationMenuRoot",
+  props: {
+    modelValue: { default: void 0 },
+    defaultValue: {},
+    dir: {},
+    orientation: { default: "horizontal" },
+    delayDuration: { default: 200 },
+    skipDelayDuration: { default: 300 },
+    disableClickTrigger: { type: Boolean, default: !1 },
+    disableHoverTrigger: { type: Boolean, default: !1 },
+    disablePointerLeaveClose: { type: Boolean },
+    unmountOnHide: { type: Boolean, default: !0 },
+    asChild: { type: Boolean },
+    as: { default: "nav" }
+  },
+  emits: ["update:modelValue"],
+  setup(r, { emit: o }) {
+    const n = r, a = _e(n, "modelValue", o, {
+      defaultValue: n.defaultValue ?? "",
+      passive: n.modelValue === void 0
+    }), f = O(""), { forwardRef: l, currentElement: u } = x(), c = O(), b = O(), _ = O(), { getItems: m, CollectionSlot: D } = H({ key: "NavigationMenu", isProvider: !0 }), { delayDuration: k, skipDelayDuration: p, dir: y, disableClickTrigger: C, disableHoverTrigger: E, unmountOnHide: s } = be(n), i = Ne(y), v = ue(!1, p), h = R(() => a.value !== "" || v.value ? 150 : k.value), g = Me((d) => {
+      typeof d == "string" && (f.value = a.value, a.value = d);
+    }, h);
+    return Y(() => {
+      if (!a.value)
+        return;
+      const d = m().map((M) => M.ref);
+      _.value = d.find(
+        (M) => M.id.includes(a.value)
+      );
+    }), De({
+      isRootMenu: !0,
+      modelValue: a,
+      previousValue: f,
+      baseId: ce(void 0, "reka-navigation-menu"),
+      disableClickTrigger: C,
+      disableHoverTrigger: E,
+      dir: i,
+      unmountOnHide: s,
+      orientation: n.orientation,
+      rootNavigationMenu: u,
+      indicatorTrack: c,
+      activeTrigger: _,
+      onIndicatorTrackChange: (d) => {
+        c.value = d;
+      },
+      viewport: b,
+      onViewportChange: (d) => {
+        b.value = d;
+      },
+      onTriggerEnter: (d) => {
+        g(d);
+      },
+      onTriggerLeave: () => {
+        v.value = !0, g("");
+      },
+      onContentEnter: () => {
+        g();
+      },
+      onContentLeave: () => {
+        n.disablePointerLeaveClose || g("");
+      },
+      onItemSelect: (d) => {
+        f.value = a.value, a.value = d;
+      },
+      onItemDismiss: () => {
+        f.value = a.value, a.value = "";
+      }
+    }), (d, M) => (N(), T(e(D), null, {
+      default: w(() => [
+        $(e(V), {
+          ref: e(l),
+          "aria-label": "Main",
+          as: d.as,
+          "as-child": d.asChild,
+          "data-orientation": d.orientation,
+          dir: e(i),
+          "data-reka-navigation-menu": ""
+        }, {
+          default: w(() => [
+            I(d.$slots, "default", { modelValue: e(a) })
+          ]),
+          _: 3
+        }, 8, ["as", "as-child", "data-orientation", "dir"])
+      ]),
+      _: 3
+    }));
+  }
+}), [te, xe] = de("NavigationMenuItem"), Re = /* @__PURE__ */ P({
+  __name: "NavigationMenuItem",
+  props: {
+    value: {},
+    asChild: { type: Boolean },
+    as: { default: "li" }
+  },
+  setup(r) {
+    const o = r;
+    x();
+    const { getItems: n } = H({ key: "NavigationMenu" }), t = F(), a = ce(o.value), f = O(), l = O(), u = ee(t.baseId, a);
+    let c = () => ({});
+    const b = O(!1);
+    async function _(p = "start") {
+      const y = document.getElementById(u);
+      if (y) {
+        c();
+        const C = X(y);
+        C.length && ve(p === "start" ? C : C.reverse());
+      }
+    }
+    function m() {
+      const p = document.getElementById(u);
+      if (p) {
+        const y = X(p);
+        y.length && (c = $e(y));
+      }
+    }
+    xe({
+      value: a,
+      contentId: u,
+      triggerRef: f,
+      focusProxyRef: l,
+      wasEscapeCloseRef: b,
+      onEntryKeyDown: _,
+      onFocusProxyEnter: _,
+      onContentFocusOutside: m,
+      onRootContentClose: m
+    });
+    function D() {
+      var p;
+      t.onItemDismiss(), (p = f.value) == null || p.focus();
+    }
+    function k(p) {
+      const y = L();
+      if (p.keyCode === 32 || p.key === "Enter")
+        if (t.modelValue.value === a) {
+          D(), p.preventDefault();
+          return;
+        } else {
+          p.target.click(), p.preventDefault();
+          return;
+        }
+      const C = n().filter(
+        (s) => {
+          var i;
+          return (i = s.ref.parentElement) == null ? void 0 : i.hasAttribute("data-menu-item");
+        }
+      ).map((s) => s.ref);
+      if (!C.includes(y))
+        return;
+      const E = fe(p, y, void 0, {
+        itemsArray: C,
+        loop: !1
+      });
+      E && (E == null || E.focus()), p.preventDefault(), p.stopPropagation();
+    }
+    return (p, y) => (N(), T(e(V), {
+      "as-child": p.asChild,
+      as: p.as,
+      "data-menu-item": "",
+      onKeydown: Ce(k, ["up", "down", "left", "right", "home", "end", "space"])
+    }, {
+      default: w(() => [
+        I(p.$slots, "default")
+      ]),
+      _: 3
+    }, 8, ["as-child", "as"]));
+  }
+}), Ve = /* @__PURE__ */ P({
+  __name: "NavigationMenuContentImpl",
+  props: {
+    disableOutsidePointerEvents: { type: Boolean },
+    asChild: { type: Boolean },
+    as: {}
+  },
+  emits: ["escapeKeyDown", "pointerDownOutside", "focusOutside", "interactOutside"],
+  setup(r, { emit: o }) {
+    const n = r, t = o, { getItems: a } = H({ key: "NavigationMenu" }), { forwardRef: f, currentElement: l } = x(), u = F(), c = te(), b = pe(u.baseId, c.value), _ = ee(u.baseId, c.value), m = O(null), D = R(() => {
+      const s = a().map((M) => M.ref.id.split("trigger-")[1]);
+      u.dir.value === "rtl" && s.reverse();
+      const i = s.indexOf(u.modelValue.value), v = s.indexOf(u.previousValue.value), h = c.value === u.modelValue.value, g = v === s.indexOf(c.value);
+      if (!h && !g)
+        return m.value;
+      const d = (() => {
+        if (i !== v) {
+          if (h && v !== -1)
+            return i > v ? "from-end" : "from-start";
+          if (g && i !== -1)
+            return i > v ? "to-start" : "to-end";
+        }
+        return null;
+      })();
+      return m.value = d, d;
+    });
+    function k(s) {
+      var v, h;
+      if (t("focusOutside", s), t("interactOutside", s), s.detail.originalEvent.target.hasAttribute("data-navigation-menu-trigger") && s.preventDefault(), !s.defaultPrevented) {
+        c.onContentFocusOutside();
+        const g = s.target;
+        (h = (v = u.rootNavigationMenu) == null ? void 0 : v.value) != null && h.contains(g) && s.preventDefault();
+      }
+    }
+    function p(s) {
+      var i;
+      if (t("pointerDownOutside", s), !s.defaultPrevented) {
+        const v = s.target, h = a().some(
+          (d) => d.ref.contains(v)
+        ), g = u.isRootMenu && ((i = u.viewport.value) == null ? void 0 : i.contains(v));
+        (h || g || !u.isRootMenu) && s.preventDefault();
+      }
+    }
+    Y((s) => {
+      const i = l.value;
+      if (u.isRootMenu && i) {
+        const v = () => {
+          var h;
+          u.onItemDismiss(), c.onRootContentClose(), i.contains(L()) && ((h = c.triggerRef.value) == null || h.focus());
+        };
+        i.addEventListener(z, v), s(
+          () => i.removeEventListener(z, v)
+        );
+      }
+    });
+    function y(s) {
+      var i, v;
+      t("escapeKeyDown", s), s.defaultPrevented || (u.onItemDismiss(), (v = (i = c.triggerRef) == null ? void 0 : i.value) == null || v.focus(), c.wasEscapeCloseRef.value = !0);
+    }
+    function C(s) {
+      var d;
+      if (s.target.closest("[data-reka-navigation-menu]") !== u.rootNavigationMenu.value)
+        return;
+      const i = s.altKey || s.ctrlKey || s.metaKey, v = s.key === "Tab" && !i, h = X(s.currentTarget);
+      if (v) {
+        const M = L(), A = h.findIndex(
+          (he) => he === M
+        ), ge = s.shiftKey ? h.slice(0, A).reverse() : h.slice(A + 1, h.length);
+        if (ve(ge))
+          s.preventDefault();
+        else {
+          (d = c.focusProxyRef.value) == null || d.focus();
+          return;
+        }
+      }
+      const g = fe(
+        s,
+        L(),
+        void 0,
+        { itemsArray: h, loop: !1, enableIgnoredElement: !0 }
+      );
+      g == null || g.focus();
+    }
+    function E() {
+      var i;
+      const s = new Event(z, {
+        bubbles: !0,
+        cancelable: !0
+      });
+      (i = l.value) == null || i.dispatchEvent(s);
+    }
+    return (s, i) => (N(), T(e(Pe), B({
+      id: e(_),
+      ref: e(f),
+      "aria-labelledby": e(b),
+      "data-motion": D.value,
+      "data-state": e(G)(e(u).modelValue.value === e(c).value),
+      "data-orientation": e(u).orientation
+    }, n, {
+      onKeydown: C,
+      onEscapeKeyDown: y,
+      onPointerDownOutside: p,
+      onFocusOutside: k,
+      onDismiss: E
+    }), {
+      default: w(() => [
+        I(s.$slots, "default")
+      ]),
+      _: 3
+    }, 16, ["id", "aria-labelledby", "data-motion", "data-state", "data-orientation"]));
+  }
+}), Fe = /* @__PURE__ */ P({
+  inheritAttrs: !1,
+  __name: "NavigationMenuContent",
+  props: {
+    forceMount: { type: Boolean },
+    disableOutsidePointerEvents: { type: Boolean },
+    asChild: { type: Boolean },
+    as: {}
+  },
+  emits: ["escapeKeyDown", "pointerDownOutside", "focusOutside", "interactOutside"],
+  setup(r, { emit: o }) {
+    const n = r, t = o, a = q(Ee(n, "forceMount"), t), { forwardRef: f } = x(), l = F(), u = te(), c = R(() => u.value === l.modelValue.value), b = R(() => l.viewport.value && !l.modelValue.value && l.previousValue.value ? l.previousValue.value === u.value : !1);
+    return (_, m) => (N(), T(ie, {
+      to: e(ae) && e(l).viewport.value ? e(l).viewport.value : "body",
+      disabled: e(ae) && e(l).viewport.value ? !e(l).viewport.value : !0
+    }, [
+      $(e(Z), {
+        present: _.forceMount || c.value || b.value,
+        "force-mount": !e(l).unmountOnHide.value
+      }, {
+        default: w(({ present: D }) => [
+          $(Ve, B({
+            ref: e(f),
+            "data-state": e(G)(c.value),
+            style: {
+              pointerEvents: !c.value && e(l).isRootMenu ? "none" : void 0
+            }
+          }, { ..._.$attrs, ...e(a) }, {
+            hidden: !D,
+            onPointerenter: m[0] || (m[0] = (k) => e(l).onContentEnter(e(u).value)),
+            onPointerleave: m[1] || (m[1] = (k) => e(me)(() => e(l).onContentLeave())(k)),
+            onPointerDownOutside: m[2] || (m[2] = (k) => t("pointerDownOutside", k)),
+            onFocusOutside: m[3] || (m[3] = (k) => t("focusOutside", k)),
+            onInteractOutside: m[4] || (m[4] = (k) => t("interactOutside", k))
+          }), {
+            default: w(() => [
+              I(_.$slots, "default")
+            ]),
+            _: 2
+          }, 1040, ["data-state", "style", "hidden"])
+        ]),
+        _: 3
+      }, 8, ["present", "force-mount"])
+    ], 8, ["to", "disabled"]));
+  }
+}), Le = /* @__PURE__ */ P({
+  inheritAttrs: !1,
+  __name: "NavigationMenuIndicator",
+  props: {
+    forceMount: { type: Boolean },
+    asChild: { type: Boolean },
+    as: {}
+  },
+  setup(r) {
+    const o = r, { forwardRef: n } = x(), t = F(), a = O(), f = R(() => t.orientation === "horizontal"), l = R(() => !!t.modelValue.value), { activeTrigger: u } = t;
+    function c() {
+      u.value && (a.value = {
+        size: f.value ? u.value.offsetWidth : u.value.offsetHeight,
+        position: f.value ? u.value.offsetLeft : u.value.offsetTop
+      });
+    }
+    return Y(() => {
+      t.modelValue.value && c();
+    }), W(u, c), W(t.indicatorTrack, c), (b, _) => e(t).indicatorTrack.value ? (N(), T(ie, {
+      key: 0,
+      to: e(t).indicatorTrack.value
+    }, [
+      $(e(Z), {
+        present: b.forceMount || l.value
+      }, {
+        default: w(() => [
+          $(e(V), B({
+            ref: e(n),
+            "aria-hidden": "true",
+            "data-state": l.value ? "visible" : "hidden",
+            "data-orientation": e(t).orientation,
+            "as-child": o.asChild,
+            as: b.as,
+            style: {
+              ...a.value ? {
+                "--reka-navigation-menu-indicator-size": `${a.value.size}px`,
+                "--reka-navigation-menu-indicator-position": `${a.value.position}px`
+              } : {}
+            }
+          }, b.$attrs), {
+            default: w(() => [
+              I(b.$slots, "default")
+            ]),
+            _: 3
+          }, 16, ["data-state", "data-orientation", "as-child", "as", "style"])
+        ]),
+        _: 3
+      }, 8, ["present"])
+    ], 8, ["to"])) : Q("", !0);
+  }
+}), Ke = /* @__PURE__ */ P({
+  __name: "NavigationMenuLink",
+  props: {
+    active: { type: Boolean },
+    asChild: { type: Boolean },
+    as: { default: "a" }
+  },
+  emits: ["select"],
+  setup(r, { emit: o }) {
+    const n = r, t = o, { CollectionItem: a } = H({ key: "NavigationMenu" });
+    x();
+    async function f(l) {
+      var c;
+      const u = new CustomEvent(Ie, {
+        bubbles: !0,
+        cancelable: !0,
+        detail: {
+          originalEvent: l
+        }
+      });
+      if (t("select", u), !u.defaultPrevented && !l.metaKey) {
+        const b = new CustomEvent(
+          z,
+          {
+            bubbles: !0,
+            cancelable: !0
+          }
+        );
+        (c = l.target) == null || c.dispatchEvent(b);
+      }
+    }
+    return (l, u) => (N(), T(e(a), null, {
+      default: w(() => [
+        $(e(V), {
+          as: l.as,
+          "data-active": l.active ? "" : void 0,
+          "aria-current": l.active ? "page" : void 0,
+          "as-child": n.asChild,
+          onClick: f
+        }, {
+          default: w(() => [
+            I(l.$slots, "default")
+          ]),
+          _: 3
+        }, 8, ["as", "data-active", "aria-current", "as-child"])
+      ]),
+      _: 3
+    }));
+  }
+}), Se = /* @__PURE__ */ P({
+  inheritAttrs: !1,
+  __name: "NavigationMenuList",
+  props: {
+    asChild: { type: Boolean },
+    as: { default: "ul" }
+  },
+  setup(r) {
+    const o = r, n = F(), { forwardRef: t, currentElement: a } = x();
+    return se(() => {
+      n.onIndicatorTrackChange(a.value);
+    }), (f, l) => (N(), T(e(V), {
+      ref: e(t),
+      style: { position: "relative" }
+    }, {
+      default: w(() => [
+        $(e(V), B(f.$attrs, {
+          "as-child": o.asChild,
+          as: f.as,
+          "data-orientation": e(n).orientation
+        }), {
+          default: w(() => [
+            I(f.$slots, "default")
+          ]),
+          _: 3
+        }, 16, ["as-child", "as", "data-orientation"])
+      ]),
+      _: 3
+    }, 512));
+  }
+}), Ae = ["aria-owns"], He = /* @__PURE__ */ P({
+  inheritAttrs: !1,
+  __name: "NavigationMenuTrigger",
+  props: {
+    disabled: { type: Boolean },
+    asChild: { type: Boolean },
+    as: { default: "button" }
+  },
+  setup(r) {
+    const o = r, n = F(), t = te(), { CollectionItem: a } = H({ key: "NavigationMenu" }), { forwardRef: f, currentElement: l } = x(), u = O(""), c = O(""), b = ue(!1, 300), _ = O(!1), m = R(() => t.value === n.modelValue.value);
+    se(() => {
+      t.triggerRef = l, u.value = pe(n.baseId, t.value), c.value = ee(n.baseId, t.value);
+    });
+    function D() {
+      n.disableHoverTrigger.value || (_.value = !1, t.wasEscapeCloseRef.value = !1);
+    }
+    function k(i) {
+      if (!n.disableHoverTrigger.value && i.pointerType === "mouse") {
+        if (o.disabled || _.value || t.wasEscapeCloseRef.value || b.value)
+          return;
+        n.onTriggerEnter(t.value), b.value = !0;
+      }
+    }
+    function p(i) {
+      if (!n.disableHoverTrigger.value && i.pointerType === "mouse") {
+        if (o.disabled)
+          return;
+        n.onTriggerLeave(), b.value = !1;
+      }
+    }
+    function y(i) {
+      i.pointerType === "mouse" && n.disableClickTrigger.value || b.value || (m.value ? n.onItemSelect("") : n.onItemSelect(t.value), _.value = m.value);
+    }
+    function C(i) {
+      const h = { horizontal: "ArrowDown", vertical: n.dir.value === "rtl" ? "ArrowLeft" : "ArrowRight" }[n.orientation];
+      m.value && i.key === h && (t.onEntryKeyDown(), i.preventDefault(), i.stopPropagation());
+    }
+    function E(i) {
+      t.focusProxyRef.value = ke(i);
+    }
+    function s(i) {
+      const v = document.getElementById(t.contentId), h = i.relatedTarget, g = h === l.value, d = v == null ? void 0 : v.contains(h);
+      (g || !d) && t.onFocusProxyEnter(g ? "start" : "end");
+    }
+    return (i, v) => (N(), j(ne, null, [
+      $(e(a), null, {
+        default: w(() => [
+          $(e(V), B({
+            id: u.value,
+            ref: e(f),
+            disabled: i.disabled,
+            "data-disabled": i.disabled ? "" : void 0,
+            "data-state": e(G)(m.value),
+            "data-navigation-menu-trigger": "",
+            "aria-expanded": m.value,
+            "aria-controls": c.value,
+            "as-child": o.asChild,
+            as: i.as
+          }, i.$attrs, {
+            onPointerenter: D,
+            onPointermove: k,
+            onPointerleave: p,
+            onClick: y,
+            onKeydown: C
+          }), {
+            default: w(() => [
+              I(i.$slots, "default")
+            ]),
+            _: 3
+          }, 16, ["id", "disabled", "data-disabled", "data-state", "aria-expanded", "aria-controls", "as-child", "as"])
+        ]),
+        _: 3
+      }),
+      m.value ? (N(), j(ne, { key: 0 }, [
+        $(e(Oe), {
+          ref: E,
+          "aria-hidden": "true",
+          tabindex: 0,
+          onFocus: s
+        }),
+        e(n).viewport ? (N(), j("span", {
+          key: 0,
+          "aria-owns": c.value
+        }, null, 8, Ae)) : Q("", !0)
+      ], 64)) : Q("", !0)
+    ], 64));
+  }
+}), je = /* @__PURE__ */ P({
+  inheritAttrs: !1,
+  __name: "NavigationMenuViewport",
+  props: {
+    forceMount: { type: Boolean },
+    align: { default: "center" },
+    asChild: { type: Boolean },
+    as: {}
+  },
+  setup(r) {
+    var k;
+    const o = r, { forwardRef: n, currentElement: t } = x(), a = F(), { activeTrigger: f, rootNavigationMenu: l, modelValue: u } = a, c = O(), b = O(), _ = R(() => !!a.modelValue.value);
+    oe(t, () => {
+      a.onViewportChange(t.value);
+    });
+    const m = O();
+    oe([u, _], () => {
+      t.value && requestAnimationFrame(() => {
+        var y;
+        const p = (y = t.value) == null ? void 0 : y.querySelector("[data-state=open]");
+        m.value = p;
+      });
+    }, { immediate: !0, flush: "post" });
+    function D() {
+      if (m.value && f.value && l.value) {
+        const p = document.documentElement.offsetWidth, y = document.documentElement.offsetHeight, C = l.value.getBoundingClientRect(), E = f.value.getBoundingClientRect(), { offsetWidth: s, offsetHeight: i } = m.value, v = E.left - C.left, h = E.top - C.top;
+        let g = null, d = null;
+        switch (o.align) {
+          case "start":
+            g = v, d = h;
+            break;
+          case "end":
+            g = v - s + E.width, d = h - i + E.height;
+            break;
+          default:
+            g = v - s / 2 + E.width / 2, d = h - i / 2 + E.height / 2;
+        }
+        const M = 10;
+        g + C.left < M && (g = M - C.left);
+        const A = g + C.left + s;
+        A > p - M && (g -= A - p + M, g < M - C.left && (g = M - C.left)), d + C.top < M && (d = M - C.top);
+        const J = d + C.top + i;
+        J > y - M && (d -= J - y + M, d < M - C.top && (d = M - C.top)), g = Math.round(g), d = Math.round(d), b.value = {
+          left: g,
+          top: d
+        };
+      }
+    }
+    return W(m, () => {
+      m.value && (c.value = {
+        width: m.value.offsetWidth,
+        height: m.value.offsetHeight
+      }, D());
+    }), W([(k = globalThis.document) == null ? void 0 : k.body, l], () => {
+      D();
+    }), (p, y) => (N(), T(e(Z), {
+      present: p.forceMount || _.value,
+      "force-mount": !e(a).unmountOnHide.value,
+      onAfterLeave: y[2] || (y[2] = () => {
+        c.value = void 0, b.value = void 0;
+      })
+    }, {
+      default: w(({ present: C }) => {
+        var E, s, i, v;
+        return [
+          $(e(V), B(p.$attrs, {
+            ref: e(n),
+            as: p.as,
+            "as-child": p.asChild,
+            "data-state": e(G)(_.value),
+            "data-orientation": e(a).orientation,
+            style: {
+              // Prevent interaction when animating out
+              pointerEvents: !_.value && e(a).isRootMenu ? "none" : void 0,
+              "--reka-navigation-menu-viewport-width": c.value ? `${(E = c.value) == null ? void 0 : E.width}px` : void 0,
+              "--reka-navigation-menu-viewport-height": c.value ? `${(s = c.value) == null ? void 0 : s.height}px` : void 0,
+              "--reka-navigation-menu-viewport-left": b.value ? `${(i = b.value) == null ? void 0 : i.left}px` : void 0,
+              "--reka-navigation-menu-viewport-top": b.value ? `${(v = b.value) == null ? void 0 : v.top}px` : void 0
+            },
+            hidden: !C,
+            onPointerenter: y[0] || (y[0] = (h) => e(a).onContentEnter(e(a).modelValue.value)),
+            onPointerleave: y[1] || (y[1] = (h) => e(me)(() => e(a).onContentLeave())(h))
+          }), {
+            default: w(() => [
+              I(p.$slots, "default")
+            ]),
+            _: 2
+          }, 1040, ["as", "as-child", "data-state", "data-orientation", "style", "hidden"])
+        ];
+      }),
+      _: 3
+    }, 8, ["present", "force-mount"]));
+  }
+}), ze = { class: "absolute left-0 top-full flex justify-center" }, We = /* @__PURE__ */ P({
+  __name: "NavigationMenuViewport",
+  props: {
+    forceMount: { type: Boolean },
+    align: {},
+    asChild: { type: Boolean },
+    as: { type: [String, Object, Function] },
+    class: {}
+  },
+  setup(r) {
+    const o = r, n = S(o, "class"), t = U(n);
+    return (a, f) => (N(), j("div", ze, [
+      $(e(je), B(e(t), {
+        class: e(K)(
+          "origin-top-center relative mt-1.5 h-[--reka-navigation-menu-viewport-height] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[--reka-navigation-menu-viewport-width]",
+          o.class
+        )
+      }), null, 16, ["class"])
+    ]));
+  }
+}), ct = /* @__PURE__ */ P({
+  __name: "NavigationMenu",
+  props: {
+    modelValue: {},
+    defaultValue: {},
+    dir: {},
+    orientation: {},
+    delayDuration: {},
+    skipDelayDuration: {},
+    disableClickTrigger: { type: Boolean },
+    disableHoverTrigger: { type: Boolean },
+    disablePointerLeaveClose: { type: Boolean },
+    unmountOnHide: { type: Boolean },
+    asChild: { type: Boolean },
+    as: { type: [String, Object, Function] },
+    class: {}
+  },
+  emits: ["update:modelValue"],
+  setup(r, { emit: o }) {
+    const n = r, t = o, a = S(n, "class"), f = q(a, t);
+    return (l, u) => (N(), T(e(Be), B(e(f), {
+      class: e(K)("relative z-10 flex max-w-max flex-1 items-center justify-center", n.class)
+    }), {
+      default: w(() => [
+        I(l.$slots, "default"),
+        $(We)
+      ]),
+      _: 3
+    }, 16, ["class"]));
+  }
+}), ft = /* @__PURE__ */ P({
+  __name: "NavigationMenuContent",
+  props: {
+    forceMount: { type: Boolean },
+    disableOutsidePointerEvents: { type: Boolean },
+    asChild: { type: Boolean },
+    as: { type: [String, Object, Function] },
+    class: {}
+  },
+  emits: ["escapeKeyDown", "pointerDownOutside", "focusOutside", "interactOutside"],
+  setup(r, { emit: o }) {
+    const n = r, t = o, a = S(n, "class"), f = q(a, t);
+    return (l, u) => (N(), T(e(Fe), B(e(f), {
+      class: e(K)(
+        "left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto",
+        n.class
+      )
+    }), {
+      default: w(() => [
+        I(l.$slots, "default")
+      ]),
+      _: 3
+    }, 16, ["class"]));
+  }
+}), pt = /* @__PURE__ */ P({
+  __name: "NavigationMenuIndicator",
+  props: {
+    forceMount: { type: Boolean },
+    asChild: { type: Boolean },
+    as: { type: [String, Object, Function] },
+    class: {}
+  },
+  setup(r) {
+    const o = r, n = S(o, "class"), t = U(n);
+    return (a, f) => (N(), T(e(Le), B(e(t), {
+      class: e(K)("top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in", o.class)
+    }), {
+      default: w(() => f[0] || (f[0] = [
+        we("div", { class: "relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" }, null, -1)
+      ])),
+      _: 1,
+      __: [0]
+    }, 16, ["class"]));
+  }
+}), vt = /* @__PURE__ */ P({
+  __name: "NavigationMenuItem",
+  props: {
+    value: {},
+    asChild: { type: Boolean },
+    as: { type: [String, Object, Function] }
+  },
+  setup(r) {
+    const o = r;
+    return (n, t) => (N(), T(e(Re), re(le(o)), {
+      default: w(() => [
+        I(n.$slots, "default")
+      ]),
+      _: 3
+    }, 16));
+  }
+}), mt = /* @__PURE__ */ P({
+  __name: "NavigationMenuLink",
+  props: {
+    active: { type: Boolean },
+    asChild: { type: Boolean },
+    as: { type: [String, Object, Function] }
+  },
+  emits: ["select"],
+  setup(r, { emit: o }) {
+    const a = q(r, o);
+    return (f, l) => (N(), T(e(Ke), re(le(e(a))), {
+      default: w(() => [
+        I(f.$slots, "default")
+      ]),
+      _: 3
+    }, 16));
+  }
+}), gt = /* @__PURE__ */ P({
+  __name: "NavigationMenuList",
+  props: {
+    asChild: { type: Boolean },
+    as: { type: [String, Object, Function] },
+    class: {}
+  },
+  setup(r) {
+    const o = r, n = S(o, "class"), t = U(n);
+    return (a, f) => (N(), T(e(Se), B(e(t), {
+      class: e(K)(
+        "group flex flex-1 list-none items-center justify-center gap-x-1",
+        o.class
+      )
+    }), {
+      default: w(() => [
+        I(a.$slots, "default")
+      ]),
+      _: 3
+    }, 16, ["class"]));
+  }
+}), ht = /* @__PURE__ */ P({
+  __name: "NavigationMenuTrigger",
+  props: {
+    disabled: { type: Boolean },
+    asChild: { type: Boolean },
+    as: { type: [String, Object, Function] },
+    class: {}
+  },
+  setup(r) {
+    const o = r, n = S(o, "class"), t = U(n);
+    return (a, f) => (N(), T(e(He), B(e(t), {
+      class: e(K)(e(qe)(), "group", o.class)
+    }), {
+      default: w(() => [
+        I(a.$slots, "default"),
+        $(e(Te), {
+          class: "relative top-px ml-1 h-3 w-3 transition duration-200 group-data-[state=open]:rotate-180",
+          "aria-hidden": "true"
+        })
+      ]),
+      _: 3
+    }, 16, ["class"]));
+  }
+}), qe = ye(
+  "group inline-flex h-10 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent/50 data-[state=open]:bg-accent/50"
+);
+export {
+  ct as NavigationMenu,
+  ft as NavigationMenuContent,
+  pt as NavigationMenuIndicator,
+  vt as NavigationMenuItem,
+  mt as NavigationMenuLink,
+  gt as NavigationMenuList,
+  ht as NavigationMenuTrigger,
+  We as NavigationMenuViewport,
+  qe as navigationMenuTriggerStyle
+};