@component-labs/ui 0.0.1

package/dist/menu.js

@@ -0,0 +1,1335 @@
+import { jsx as P, jsxs as Pe } from "react/jsx-runtime";
+import { P as Ee, m as vt, i as gt, j as ht, k as bt, n as Mt, a as Ct, o as xt, c as yt, d as wt, u as St } from "./X6LNAU2F-DroCIVyL.js";
+import { c as E, f as k, a as T, i as R, E as me, K as pt, L as ke, k as Y, G as Ce, M as W, N as Pt, h as Et, w as oe, m as U, p as Te, O as le, d as V, P as q, Q as Ie, R as kt, F as L, S as Tt, o as Ae, C as De, D as Ne, T as It, y as At, U as Dt, t as Nt, j as Fe, l as Oe, V as Ft, W as Re, x as He, z as Ot, A as Rt, X as Ht, Y as Lt, Z as Vt } from "./U6HHPQDW-BkT6kvCd.js";
+import { g as Le, C as Ve, a as _e, h as _t, u as Bt, c as $t, d as Kt } from "./IQYAUKXT-CoP_Jrsi.js";
+import { useRef as K, useState as Q, useEffect as O, useContext as Be, createContext as fe, useCallback as $e, useMemo as Ke, createRef as jt, forwardRef as Z } from "react";
+import { c as je, e as zt, f as Wt, i as qt, R as Ut } from "./Z32PU2LQ-CPSDShGU.js";
+import { s as de, c as ve, f as X, t as ze, e as We, a as z, m as Gt, o as Xt, p as Yt, b as xe } from "./Q5W46E73-DjlVG3LH.js";
+import { u as Qt } from "./HMKTUWOU-DlOdK4rt.js";
+import { u as Zt } from "./HOITXJDS-DBccNHOl.js";
+import { u as Jt } from "./I7KWAPMF-CcAk8kiH.js";
+import { c as J, a as ue } from "./utils-BZvHF7th.js";
+var en = "hr", qe = E(
+  function({ orientation: e = "horizontal", ...t }) {
+    return t = {
+      role: "separator",
+      "aria-orientation": e,
+      ...t
+    }, t;
+  }
+);
+k(function(e) {
+  const t = qe(e);
+  return T(en, t);
+});
+var tn = "hr", Ue = E(function({ store: e, ...t }) {
+  const r = Le();
+  e = e || r, R(
+    e,
+    process.env.NODE_ENV !== "production" && "CompositeSeparator must be wrapped in a Composite component."
+  );
+  const o = e.useState(
+    (u) => u.orientation === "horizontal" ? "vertical" : "horizontal"
+  );
+  return t = qe({ ...t, orientation: o }), t;
+});
+k(function(e) {
+  const t = Ue(e);
+  return T(tn, t);
+});
+var ee = me(
+  [vt],
+  [Ee]
+);
+ee.useContext;
+ee.useScopedContext;
+var ge = ee.useProviderContext, nn = ee.ContextProvider, Ge = ee.ScopedContextProvider;
+function ae(n) {
+  return [n.clientX, n.clientY];
+}
+function ye(n, e) {
+  const [t, r] = n;
+  let o = !1;
+  const u = e.length;
+  for (let i = u, a = 0, c = i - 1; a < i; c = a++) {
+    const [s, d] = e[a], [l, v] = e[c], [, f] = e[c === 0 ? i - 1 : c - 1] || [0, 0], h = (d - v) * (t - s) - (s - l) * (r - d);
+    if (v < d) {
+      if (r >= v && r < d) {
+        if (h === 0) return !0;
+        h > 0 && (r === v ? r > f && (o = !o) : o = !o);
+      }
+    } else if (d < v) {
+      if (r > d && r <= v) {
+        if (h === 0) return !0;
+        h < 0 && (r === v ? r < f && (o = !o) : o = !o);
+      }
+    } else if (r === d && (t >= l && t <= s || t >= s && t <= l))
+      return !0;
+  }
+  return o;
+}
+function rn(n, e) {
+  const { top: t, right: r, bottom: o, left: u } = e, [i, a] = n, c = i < u ? "left" : i > r ? "right" : null, s = a < t ? "top" : a > o ? "bottom" : null;
+  return [c, s];
+}
+function we(n, e) {
+  const t = n.getBoundingClientRect(), { top: r, right: o, bottom: u, left: i } = t, [a, c] = rn(e, t), s = [e];
+  return a ? (c !== "top" && s.push([a === "left" ? i : o, r]), s.push([a === "left" ? o : i, r]), s.push([a === "left" ? o : i, u]), c !== "bottom" && s.push([a === "left" ? i : o, u])) : c === "top" ? (s.push([i, r]), s.push([i, u]), s.push([o, u]), s.push([o, r])) : (s.push([i, u]), s.push([i, r]), s.push([o, r]), s.push([o, u])), s;
+}
+var on = "div";
+function Xe(n, e, t, r) {
+  return q(e) ? !0 : n ? !!(le(e, n) || t && le(t, n) || r != null && r.some((o) => Xe(n, o, t))) : !1;
+}
+function un({
+  store: n,
+  ...e
+}) {
+  const [t, r] = Q(!1), o = n.useState("mounted");
+  O(() => {
+    o || r(!1);
+  }, [o]);
+  const u = e.onFocus, i = V((c) => {
+    u == null || u(c), !c.defaultPrevented && r(!0);
+  }), a = K(null);
+  return O(() => de(n, ["anchorElement"], (c) => {
+    a.current = c.anchorElement;
+  }), []), e = {
+    autoFocusOnHide: t,
+    finalFocus: a,
+    ...e,
+    onFocus: i
+  }, e;
+}
+var Se = fe(null), Ye = E(
+  function({
+    store: e,
+    modal: t = !1,
+    portal: r = !!t,
+    hideOnEscape: o = !0,
+    hideOnHoverOutside: u = !0,
+    disablePointerEventsOnApproach: i = !!u,
+    ...a
+  }) {
+    const c = ge();
+    e = e || c, R(
+      e,
+      process.env.NODE_ENV !== "production" && "Hovercard must receive a `store` prop or be wrapped in a HovercardProvider component."
+    );
+    const s = K(null), [d, l] = Q([]), v = K(0), f = K(null), { portalRef: h, domReady: g } = pt(r, a.portalRef), m = ke(), S = !!u, p = Y(u), M = !!i, A = Y(
+      i
+    ), x = e.useState("open"), D = e.useState("mounted");
+    O(() => {
+      if (!g || !D || !S && !M) return;
+      const b = s.current;
+      return b ? Ce(
+        W("mousemove", (y) => {
+          if (!e || !m()) return;
+          const { anchorElement: w, hideTimeout: _, timeout: ne } = e.getState(), G = f.current, [j] = y.composedPath(), B = w;
+          if (Xe(j, b, B, d)) {
+            f.current = j && B && le(B, j) ? ae(y) : null, window.clearTimeout(v.current), v.current = 0;
+            return;
+          }
+          if (!v.current) {
+            if (G) {
+              const Me = ae(y), ft = we(b, G);
+              if (ye(Me, ft)) {
+                if (f.current = Me, !A(y)) return;
+                y.preventDefault(), y.stopPropagation();
+                return;
+              }
+            }
+            p(y) && (v.current = window.setTimeout(() => {
+              v.current = 0, e == null || e.hide();
+            }, _ ?? ne));
+          }
+        }, !0),
+        () => clearTimeout(v.current)
+      ) : void 0;
+    }, [
+      e,
+      m,
+      g,
+      D,
+      S,
+      M,
+      d,
+      A,
+      p
+    ]), O(() => {
+      if (!g || !D || !M) return;
+      const b = (N) => {
+        const y = s.current;
+        if (!y) return;
+        const w = f.current;
+        if (!w) return;
+        const _ = we(y, w);
+        if (ye(ae(N), _)) {
+          if (!A(N)) return;
+          N.preventDefault(), N.stopPropagation();
+        }
+      };
+      return Ce(
+        // Note: we may need to add pointer events here in the future.
+        W("mouseenter", b, !0),
+        W("mouseover", b, !0),
+        W("mouseout", b, !0),
+        W("mouseleave", b, !0)
+      );
+    }, [g, D, M, A]), O(() => {
+      g && (x || e == null || e.setAutoFocusOnShow(!1));
+    }, [e, g, x]);
+    const F = Pt(x);
+    O(() => {
+      if (g)
+        return () => {
+          F.current || e == null || e.setAutoFocusOnShow(!1);
+        };
+    }, [e, g]);
+    const H = Be(Se);
+    Et(() => {
+      if (t || !r || !D || !g) return;
+      const b = s.current;
+      if (b)
+        return H == null ? void 0 : H(b);
+    }, [t, r, D, g]);
+    const C = $e(
+      (b) => {
+        l((y) => [...y, b]);
+        const N = H == null ? void 0 : H(b);
+        return () => {
+          l(
+            (y) => y.filter((w) => w !== b)
+          ), N == null || N();
+        };
+      },
+      [H]
+    );
+    a = oe(
+      a,
+      (b) => /* @__PURE__ */ P(Ge, { value: e, children: /* @__PURE__ */ P(Se.Provider, { value: C, children: b }) }),
+      [e, C]
+    ), a = {
+      ...a,
+      ref: U(s, a.ref)
+    }, a = un({ store: e, ...a });
+    const I = e.useState(
+      (b) => t || b.autoFocusOnShow
+    );
+    return a = gt({
+      store: e,
+      modal: t,
+      portal: r,
+      autoFocusOnShow: I,
+      ...a,
+      portalRef: h,
+      hideOnEscape(b) {
+        return Te(o, b) ? !1 : (requestAnimationFrame(() => {
+          requestAnimationFrame(() => {
+            e == null || e.hide();
+          });
+        }), !0);
+      }
+    }), a;
+  }
+);
+je(
+  k(function(e) {
+    const t = Ye(e);
+    return T(on, t);
+  }),
+  ge
+);
+var an = "a", Qe = E(
+  function({ store: e, showOnHover: t = !0, ...r }) {
+    const o = ge();
+    e = e || o, R(
+      e,
+      process.env.NODE_ENV !== "production" && "HovercardAnchor must receive a `store` prop or be wrapped in a HovercardProvider component."
+    );
+    const u = Ie(r), i = K(0);
+    O(() => () => window.clearTimeout(i.current), []), O(() => W("mouseleave", (g) => {
+      if (!e) return;
+      const { anchorElement: m } = e.getState();
+      m && g.target === m && (window.clearTimeout(i.current), i.current = 0);
+    }, !0), [e]);
+    const a = r.onMouseMove, c = Y(t), s = ke(), d = V((h) => {
+      if (a == null || a(h), u || !e || h.defaultPrevented || i.current || !s() || !c(h)) return;
+      const g = h.currentTarget;
+      e.setAnchorElement(g), e.setDisclosureElement(g);
+      const { showTimeout: m, timeout: S } = e.getState(), p = () => {
+        i.current = 0, s() && (e == null || e.setAnchorElement(g), e == null || e.show(), queueMicrotask(() => {
+          e == null || e.setDisclosureElement(g);
+        }));
+      }, M = m ?? S;
+      M === 0 ? p() : i.current = window.setTimeout(p, M);
+    }), l = r.onClick, v = V((h) => {
+      l == null || l(h), e && (window.clearTimeout(i.current), i.current = 0);
+    }), f = $e(
+      (h) => {
+        if (!e) return;
+        const { anchorElement: g } = e.getState();
+        g != null && g.isConnected || e.setAnchorElement(h);
+      },
+      [e]
+    );
+    return r = {
+      ...r,
+      ref: U(f, r.ref),
+      onMouseMove: d,
+      onClick: v
+    }, r = kt(r), r;
+  }
+);
+k(function(e) {
+  const t = Qe(e);
+  return T(an, t);
+});
+function cn(n = {}) {
+  var e;
+  const t = (e = n.store) == null ? void 0 : e.getState(), r = ht({
+    ...n,
+    placement: L(
+      n.placement,
+      t == null ? void 0 : t.placement,
+      "bottom"
+    )
+  }), o = L(n.timeout, t == null ? void 0 : t.timeout, 500), u = {
+    ...r.getState(),
+    timeout: o,
+    showTimeout: L(n.showTimeout, t == null ? void 0 : t.showTimeout),
+    hideTimeout: L(n.hideTimeout, t == null ? void 0 : t.hideTimeout),
+    autoFocusOnShow: L(t == null ? void 0 : t.autoFocusOnShow, !1)
+  }, i = ve(u, r, n.store);
+  return {
+    ...r,
+    ...i,
+    setAutoFocusOnShow: (a) => i.setState("autoFocusOnShow", a)
+  };
+}
+function sn(n, e, t) {
+  return X(n, t, "timeout"), X(n, t, "showTimeout"), X(n, t, "hideTimeout"), bt(n, e, t);
+}
+var Ze = me(
+  [_e],
+  [Ve]
+), ln = Ze.useContext, dn = Ze.useScopedContext;
+fe(
+  void 0
+);
+var mn = "button", fn = Symbol("disclosure"), Je = E(
+  function({ store: e, toggleOnClick: t = !0, ...r }) {
+    const o = zt();
+    e = e || o, R(
+      e,
+      process.env.NODE_ENV !== "production" && "Disclosure must receive a `store` prop or be wrapped in a DisclosureProvider component."
+    );
+    const u = K(null), [i, a] = Q(!1), c = e.useState("disclosureElement"), s = e.useState("open");
+    O(() => {
+      let m = c === u.current;
+      c != null && c.isConnected || (e == null || e.setDisclosureElement(u.current), m = !0), a(s && m);
+    }, [c, e, s]);
+    const d = r.onClick, l = Y(t), [v, f] = Tt(r, fn, !0), h = V((m) => {
+      d == null || d(m), !m.defaultPrevented && (v || l(m) && (e == null || e.setDisclosureElement(m.currentTarget), e == null || e.toggle()));
+    }), g = e.useState("contentElement");
+    return r = {
+      "aria-expanded": i,
+      "aria-controls": g == null ? void 0 : g.id,
+      ...f,
+      ...r,
+      ref: U(u, r.ref),
+      onClick: h
+    }, r = Qt(r), r;
+  }
+);
+k(function(e) {
+  const t = Je(e);
+  return T(mn, t);
+});
+var vn = "button", et = E(
+  function({ store: e, ...t }) {
+    const r = Wt();
+    e = e || r, R(
+      e,
+      process.env.NODE_ENV !== "production" && "DialogDisclosure must receive a `store` prop or be wrapped in a DialogProvider component."
+    );
+    const o = e.useState("contentElement");
+    return t = {
+      "aria-haspopup": Ae(o, "dialog"),
+      ...t
+    }, t = Je({ store: e, ...t }), t;
+  }
+);
+k(function(e) {
+  const t = et(e);
+  return T(vn, t);
+});
+var gn = "button", tt = E(function({ store: e, ...t }) {
+  const r = Mt();
+  e = e || r, R(
+    e,
+    process.env.NODE_ENV !== "production" && "PopoverDisclosure must receive a `store` prop or be wrapped in a PopoverProvider component."
+  );
+  const o = t.onClick, u = V((i) => {
+    e == null || e.setAnchorElement(i.currentTarget), o == null || o(i);
+  });
+  return t = oe(
+    t,
+    (i) => /* @__PURE__ */ P(Ee, { value: e, children: i }),
+    [e]
+  ), t = {
+    ...t,
+    onClick: u
+  }, t = Ct({ store: e, ...t }), t = et({ store: e, ...t }), t;
+});
+k(function(e) {
+  const t = tt(e);
+  return T(gn, t);
+});
+var hn = "span", bn = {
+  top: "4,10 8,6 12,10",
+  right: "6,4 10,8 6,12",
+  bottom: "4,6 8,10 12,6",
+  left: "10,4 6,8 10,12"
+}, nt = E(function({ store: e, placement: t, ...r }) {
+  const o = xt();
+  e = e || o, R(
+    e,
+    process.env.NODE_ENV !== "production" && "PopoverDisclosureArrow must be wrapped in a PopoverDisclosure component."
+  );
+  const i = e.useState((s) => t || s.placement).split("-")[0], a = bn[i];
+  return r = {
+    children: Ke(
+      () => /* @__PURE__ */ P(
+        "svg",
+        {
+          display: "block",
+          fill: "none",
+          stroke: "currentColor",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          strokeWidth: 1.5,
+          viewBox: "0 0 16 16",
+          height: "1em",
+          width: "1em",
+          children: /* @__PURE__ */ P("polyline", { points: a })
+        }
+      ),
+      [a]
+    ),
+    "aria-hidden": !0,
+    ...r,
+    style: {
+      width: "1em",
+      height: "1em",
+      pointerEvents: "none",
+      ...r.style
+    }
+  }, De(r);
+});
+k(
+  function(e) {
+    const t = nt(e);
+    return T(hn, t);
+  }
+);
+var Mn = "div", $ = "";
+function ce() {
+  $ = "";
+}
+function Cn(n) {
+  const e = n.target;
+  return e && At(e) ? !1 : n.key === " " && $.length ? !0 : n.key.length === 1 && !n.ctrlKey && !n.altKey && !n.metaKey && /^[\p{Letter}\p{Number}]$/u.test(n.key);
+}
+function xn(n, e) {
+  if (Dt(n)) return !0;
+  const t = n.target;
+  return t ? e.some((o) => o.element === t) : !1;
+}
+function yn(n) {
+  return n.filter((e) => !e.disabled);
+}
+function re(n, e) {
+  var t;
+  const r = ((t = n.element) == null ? void 0 : t.textContent) || n.children || // The composite item object itself doesn't include a value property, but
+  // other components like Select do. Since CompositeTypeahead is a generic
+  // component that can be used with those as well, we also consider the value
+  // property as a fallback for the typeahead text content.
+  "value" in n && n.value;
+  return r ? Nt(r).trim().toLowerCase().startsWith(e.toLowerCase()) : !1;
+}
+function wn(n, e, t) {
+  if (!t) return n;
+  const r = n.find((o) => o.id === t);
+  return !r || !re(r, e) || $ !== e && re(r, $) ? n : ($ = e, _t(
+    n.filter((o) => re(o, $)),
+    t
+  ).filter((o) => o.id !== t));
+}
+var he = E(function({ store: e, typeahead: t = !0, ...r }) {
+  const o = Le();
+  e = e || o, R(
+    e,
+    process.env.NODE_ENV !== "production" && "CompositeTypeahead must be a Composite component"
+  );
+  const u = r.onKeyDownCapture, i = K(0), a = V((c) => {
+    if (u == null || u(c), c.defaultPrevented || !t || !e) return;
+    if (!Cn(c))
+      return ce();
+    const { renderedItems: s, items: d, activeId: l, id: v } = e.getState();
+    let f = yn(
+      d.length > s.length ? d : s
+    );
+    const h = Ne(c.currentTarget), g = `[data-offscreen-id="${v}"]`, m = h.querySelectorAll(g);
+    for (const M of m) {
+      const A = M.ariaDisabled === "true" || "disabled" in M && !!M.disabled;
+      f.push({ id: M.id, element: M, disabled: A });
+    }
+    if (m.length && (f = It(f, (M) => M.element)), !xn(c, f)) return ce();
+    c.preventDefault(), window.clearTimeout(i.current), i.current = window.setTimeout(() => {
+      $ = "";
+    }, 500);
+    const S = c.key.toLowerCase();
+    $ += S, f = wn(f, S, l);
+    const p = f.find((M) => re(M, $));
+    p ? e.move(p.id) : ce();
+  });
+  return r = {
+    ...r,
+    onKeyDownCapture: a
+  }, De(r);
+});
+k(function(e) {
+  const t = he(e);
+  return T(Mn, t);
+});
+function Sn(n = {}) {
+  var e;
+  ze(n, n.store);
+  const t = (e = n.store) == null ? void 0 : e.getState(), r = {
+    value: L(
+      n.value,
+      t == null ? void 0 : t.value,
+      n.defaultValue,
+      !1
+    )
+  }, o = ve(r, n.store);
+  return {
+    ...o,
+    setValue: (u) => o.setState("value", u)
+  };
+}
+function pn(n, e, t) {
+  return Fe(e, [t.store]), X(n, t, "value", "setValue"), n;
+}
+function Pn(n = {}) {
+  const [e, t] = We(Sn, n);
+  return pn(e, t, n);
+}
+var te = me(
+  [_e, nn],
+  [Ve, Ge]
+), be = te.useContext, rt = te.useScopedContext, ie = te.useProviderContext, ot = te.ContextProvider, En = te.ScopedContextProvider, kn = fe(
+  void 0
+), Tn = "div";
+function In({ store: n, ...e }) {
+  const [t, r] = Q(void 0), o = e["aria-label"], u = z(n, "disclosureElement"), i = z(n, "contentElement");
+  return O(() => {
+    const a = u;
+    if (!a) return;
+    const c = i;
+    if (!c) return;
+    o || c.hasAttribute("aria-label") ? r(void 0) : a.id && r(a.id);
+  }, [o, u, i]), t;
+}
+var ut = E(
+  function({ store: e, alwaysVisible: t, composite: r, ...o }) {
+    const u = ie();
+    e = e || u, R(
+      e,
+      process.env.NODE_ENV !== "production" && "MenuList must receive a `store` prop or be wrapped in a MenuProvider component."
+    );
+    const i = e.parent, a = e.menubar, c = !!i, s = Oe(o.id), d = o.onKeyDown, l = e.useState(
+      (x) => x.placement.split("-")[0]
+    ), v = e.useState(
+      (x) => x.orientation === "both" ? void 0 : x.orientation
+    ), f = v !== "vertical", h = z(
+      a,
+      (x) => !!x && x.orientation !== "vertical"
+    ), g = V((x) => {
+      if (d == null || d(x), !x.defaultPrevented) {
+        if (c || a && !f) {
+          const F = {
+            ArrowRight: () => l === "left" && !f,
+            ArrowLeft: () => l === "right" && !f,
+            ArrowUp: () => l === "bottom" && f,
+            ArrowDown: () => l === "top" && f
+          }[x.key];
+          if (F != null && F())
+            return x.stopPropagation(), x.preventDefault(), e == null ? void 0 : e.hide();
+        }
+        if (a) {
+          const F = {
+            ArrowRight: () => {
+              if (h)
+                return a.next();
+            },
+            ArrowLeft: () => {
+              if (h)
+                return a.previous();
+            },
+            ArrowDown: () => {
+              if (!h)
+                return a.next();
+            },
+            ArrowUp: () => {
+              if (!h)
+                return a.previous();
+            }
+          }[x.key], H = F == null ? void 0 : F();
+          H !== void 0 && (x.stopPropagation(), x.preventDefault(), a.move(H));
+        }
+      }
+    });
+    o = oe(
+      o,
+      (x) => /* @__PURE__ */ P(En, { value: e, children: x }),
+      [e]
+    );
+    const m = In({ store: e, ...o }), S = e.useState("mounted"), p = qt(S, o.hidden, t), M = p ? { ...o.style, display: "none" } : o.style;
+    o = {
+      id: s,
+      "aria-labelledby": m,
+      hidden: p,
+      ...o,
+      ref: U(s ? e.setContentElement : null, o.ref),
+      style: M,
+      onKeyDown: g
+    };
+    const A = !!e.combobox;
+    return r = r ?? !A, r && (o = {
+      role: "menu",
+      "aria-orientation": v,
+      ...o
+    }), o = Bt({ store: e, composite: r, ...o }), o = he({ store: e, typeahead: !A, ...o }), o;
+  }
+);
+k(function(e) {
+  const t = ut(e);
+  return T(Tn, t);
+});
+var An = "div", Dn = E(function({
+  store: e,
+  modal: t = !1,
+  portal: r = !!t,
+  hideOnEscape: o = !0,
+  autoFocusOnShow: u = !0,
+  hideOnHoverOutside: i,
+  alwaysVisible: a,
+  ...c
+}) {
+  const s = ie();
+  e = e || s, R(
+    e,
+    process.env.NODE_ENV !== "production" && "Menu must receive a `store` prop or be wrapped in a MenuProvider component."
+  );
+  const d = K(null), l = e.parent, v = e.menubar, f = !!l, h = !!v && !f;
+  c = {
+    ...c,
+    ref: U(d, c.ref)
+  };
+  const { "aria-labelledby": g, ...m } = ut({
+    store: e,
+    alwaysVisible: a,
+    ...c
+  });
+  c = m;
+  const [S, p] = Q(), M = e.useState("autoFocusOnShow"), A = e.useState("initialFocus"), x = e.useState("baseElement"), D = e.useState("renderedItems");
+  O(() => {
+    let y = !1;
+    return p((w) => {
+      var _, ne, G;
+      if (y || !M) return;
+      if ((_ = w == null ? void 0 : w.current) != null && _.isConnected) return w;
+      const j = jt();
+      switch (A) {
+        case "first":
+          j.current = ((ne = D.find((B) => !B.disabled && B.element)) == null ? void 0 : ne.element) || null;
+          break;
+        case "last":
+          j.current = ((G = [...D].reverse().find((B) => !B.disabled && B.element)) == null ? void 0 : G.element) || null;
+          break;
+        default:
+          j.current = x;
+      }
+      return j;
+    }), () => {
+      y = !0;
+    };
+  }, [e, M, A, D, x]);
+  const F = f ? !1 : t, H = !!u, C = !!S || !!c.initialFocus || !!F, I = z(
+    e.combobox || e,
+    "contentElement"
+  ), b = z(
+    (l == null ? void 0 : l.combobox) || l,
+    "contentElement"
+  ), N = Ke(() => {
+    if (!b || !I) return;
+    const y = I.getAttribute("role"), w = b.getAttribute("role");
+    if (!((w === "menu" || w === "menubar") && y === "menu"))
+      return b;
+  }, [I, b]);
+  return N !== void 0 && (c = {
+    preserveTabOrderAnchor: N,
+    ...c
+  }), c = Ye({
+    store: e,
+    alwaysVisible: a,
+    initialFocus: S,
+    autoFocusOnShow: H ? C && u : M || !!F,
+    ...c,
+    hideOnEscape(y) {
+      return Te(o, y) ? !1 : (e == null || e.hideAll(), !0);
+    },
+    hideOnHoverOutside(y) {
+      const w = e == null ? void 0 : e.getState().disclosureElement;
+      return (typeof i == "function" ? i(y) : i ?? (f ? !0 : h ? w ? !q(w) : !0 : !1)) ? y.defaultPrevented || !f || !w || (Ft(w, "mouseout", y), !q(w)) ? !0 : (requestAnimationFrame(() => {
+        q(w) || e == null || e.hide();
+      }), !1) : !1;
+    },
+    modal: F,
+    portal: r,
+    backdrop: f ? !1 : c.backdrop
+  }), c = {
+    "aria-labelledby": g,
+    ...c
+  }, c;
+}), Nn = je(
+  k(function(e) {
+    const t = Dn(e);
+    return T(An, t);
+  }),
+  ie
+), Fn = "button";
+function On(n, e) {
+  return {
+    ArrowDown: e === "bottom" || e === "top" ? "first" : !1,
+    ArrowUp: e === "bottom" || e === "top" ? "last" : !1,
+    ArrowRight: e === "right" ? "first" : !1,
+    ArrowLeft: e === "left" ? "first" : !1
+  }[n.key];
+}
+function pe(n, e) {
+  return !!(n != null && n.some((t) => !t.element || t.element === e ? !1 : t.element.getAttribute("aria-expanded") === "true"));
+}
+var Rn = E(
+  function({
+    store: e,
+    focusable: t,
+    accessibleWhenDisabled: r,
+    showOnHover: o,
+    ...u
+  }) {
+    const i = ie();
+    e = e || i, R(
+      e,
+      process.env.NODE_ENV !== "production" && "MenuButton must receive a `store` prop or be wrapped in a MenuProvider component."
+    );
+    const a = K(null), c = e.parent, s = e.menubar, d = !!c, l = !!s && !d, v = Ie(u), f = () => {
+      const C = a.current;
+      C && (e == null || e.setDisclosureElement(C), e == null || e.setAnchorElement(C), e == null || e.show());
+    }, h = u.onFocus, g = V((C) => {
+      if (h == null || h(C), v || C.defaultPrevented || (e == null || e.setAutoFocusOnShow(!1), e == null || e.setActiveId(null), !s) || !l) return;
+      const { items: I } = s.getState();
+      pe(I, C.currentTarget) && f();
+    }), m = z(
+      e,
+      (C) => C.placement.split("-")[0]
+    ), S = u.onKeyDown, p = V((C) => {
+      if (S == null || S(C), v || C.defaultPrevented) return;
+      const I = On(C, m);
+      I && (C.preventDefault(), f(), e == null || e.setAutoFocusOnShow(!0), e == null || e.setInitialFocus(I));
+    }), M = u.onClick, A = V((C) => {
+      if (M == null || M(C), C.defaultPrevented || !e) return;
+      const I = !C.detail, { open: b } = e.getState();
+      (!b || I) && ((!d || I) && e.setAutoFocusOnShow(!0), e.setInitialFocus(I ? "first" : "container")), d && f();
+    });
+    u = oe(
+      u,
+      (C) => /* @__PURE__ */ P(ot, { value: e, children: C }),
+      [e]
+    ), d && (u = {
+      ...u,
+      render: /* @__PURE__ */ P(Ut.div, { render: u.render })
+    });
+    const x = Oe(u.id), D = z(
+      (c == null ? void 0 : c.combobox) || c,
+      "contentElement"
+    ), F = d || l ? Re(D, "menuitem") : void 0, H = e.useState("contentElement");
+    return u = {
+      id: x,
+      role: F,
+      "aria-haspopup": Ae(H, "menu"),
+      ...u,
+      ref: U(a, u.ref),
+      onFocus: g,
+      onKeyDown: p,
+      onClick: A
+    }, u = Qe({
+      store: e,
+      focusable: t,
+      accessibleWhenDisabled: r,
+      ...u,
+      showOnHover: (C) => {
+        if (!(() => {
+          if (typeof o == "function") return o(C);
+          if (o != null) return o;
+          if (d) return !0;
+          if (!s) return !1;
+          const { items: y } = s.getState();
+          return l && pe(y);
+        })()) return !1;
+        const N = l ? s : c;
+        return N && N.setActiveId(C.currentTarget.id), !0;
+      }
+    }), u = tt({
+      store: e,
+      toggleOnClick: !d,
+      focusable: t,
+      accessibleWhenDisabled: r,
+      ...u
+    }), u = he({
+      store: e,
+      typeahead: l,
+      ...u
+    }), u;
+  }
+), Hn = k(function(e) {
+  const t = Rn(e);
+  return T(Fn, t);
+}), Ln = "span", Vn = E(
+  function({ store: e, ...t }) {
+    const r = be();
+    return e = e || r, t = nt({ store: e, ...t }), t;
+  }
+), _n = k(function(e) {
+  const t = Vn(e);
+  return T(Ln, t);
+}), Bn = "div";
+function $n(n, e, t) {
+  var r;
+  if (!n) return !1;
+  if (q(n)) return !0;
+  const o = e == null ? void 0 : e.find((c) => {
+    var s;
+    return c.element === t ? !1 : ((s = c.element) == null ? void 0 : s.getAttribute("aria-expanded")) === "true";
+  }), u = (r = o == null ? void 0 : o.element) == null ? void 0 : r.getAttribute("aria-controls");
+  if (!u) return !1;
+  const a = Ne(n).getElementById(u);
+  return a ? q(a) ? !0 : !!a.querySelector("[role=menuitem][aria-expanded=true]") : !1;
+}
+var it = E(
+  function({
+    store: e,
+    hideOnClick: t = !0,
+    preventScrollOnKeyDown: r = !0,
+    focusOnHover: o,
+    blurOnHoverEnd: u,
+    ...i
+  }) {
+    const a = rt(!0), c = dn();
+    e = e || a || c, R(
+      e,
+      process.env.NODE_ENV !== "production" && "MenuItem must be wrapped in a MenuList, Menu or Menubar component"
+    );
+    const s = i.onClick, d = Y(t), l = "hideAll" in e ? e.hideAll : void 0, v = !!l, f = V((m) => {
+      s == null || s(m), !(m.defaultPrevented || Ot(m) || Rt(m) || !l || m.currentTarget.getAttribute("aria-haspopup") === "menu") && d(m) && l();
+    }), h = z(
+      e,
+      (m) => "contentElement" in m ? m.contentElement : null
+    );
+    return i = {
+      role: Re(h, "menuitem"),
+      ...i,
+      onClick: f
+    }, i = yt({
+      store: e,
+      preventScrollOnKeyDown: r,
+      ...i
+    }), i = wt({
+      store: e,
+      ...i,
+      focusOnHover(m) {
+        const S = () => typeof o == "function" ? o(m) : o ?? !0;
+        if (!e || !S()) return !1;
+        const { baseElement: p, items: M } = e.getState();
+        return v ? (m.currentTarget.hasAttribute("aria-expanded") && m.currentTarget.focus(), !0) : $n(p, M, m.currentTarget) ? (m.currentTarget.focus(), !0) : !1;
+      },
+      blurOnHoverEnd(m) {
+        return typeof u == "function" ? u(m) : u ?? v;
+      }
+    }), i;
+  }
+), Kn = He(
+  k(function(e) {
+    const t = it(e);
+    return T(Bn, t);
+  })
+), jn = "span", zn = E(
+  function({ store: e, checked: t, ...r }) {
+    const o = Be(kn);
+    return t = t ?? o, r = Zt({ ...r, checked: t }), r;
+  }
+), Wn = k(function(e) {
+  const t = zn(e);
+  return T(jn, t);
+}), qn = "div";
+function Un(n) {
+  return Array.isArray(n) ? n.toString() : n;
+}
+function se(n, e, t) {
+  if (e === void 0)
+    return Array.isArray(n) ? n : !!t;
+  const r = Un(e);
+  return Array.isArray(n) ? t ? n.includes(r) ? n : [...n, r] : n.filter((o) => o !== r) : t ? r : n === r ? !1 : n;
+}
+var Gn = E(
+  function({
+    store: e,
+    name: t,
+    value: r,
+    checked: o,
+    defaultChecked: u,
+    hideOnClick: i = !1,
+    ...a
+  }) {
+    const c = rt();
+    e = e || c, R(
+      e,
+      process.env.NODE_ENV !== "production" && "MenuItemCheckbox must be wrapped in a MenuList or Menu component"
+    );
+    const s = Ht(u);
+    O(() => {
+      e == null || e.setValue(t, (l = []) => s ? se(l, r, !0) : l);
+    }, [e, t, r, s]), O(() => {
+      o !== void 0 && (e == null || e.setValue(t, (l) => se(l, r, o)));
+    }, [e, t, r, o]);
+    const d = Pn({
+      value: e.useState((l) => l.values[t]),
+      setValue(l) {
+        e == null || e.setValue(t, () => {
+          if (o === void 0) return l;
+          const v = se(l, r, o);
+          return !Array.isArray(v) || !Array.isArray(l) ? v : Lt(l, v) ? l : v;
+        });
+      }
+    });
+    return a = {
+      role: "menuitemcheckbox",
+      ...a
+    }, a = Jt({
+      store: d,
+      name: t,
+      value: r,
+      checked: o,
+      ...a
+    }), a = it({ store: e, hideOnClick: i, ...a }), a;
+  }
+), Xn = He(
+  k(function(e) {
+    const t = Gn(e);
+    return T(qn, t);
+  })
+);
+function Yn({
+  combobox: n,
+  parent: e,
+  menubar: t,
+  ...r
+} = {}) {
+  const o = !!t && !e, u = Gt(
+    r.store,
+    Yt(e, ["values"]),
+    Xt(n, [
+      "arrowElement",
+      "anchorElement",
+      "contentElement",
+      "popoverElement",
+      "disclosureElement"
+    ])
+  );
+  ze(r, u);
+  const i = u.getState(), a = $t({
+    ...r,
+    store: u,
+    orientation: L(
+      r.orientation,
+      i.orientation,
+      "vertical"
+    )
+  }), c = cn({
+    ...r,
+    store: u,
+    placement: L(
+      r.placement,
+      i.placement,
+      "bottom-start"
+    ),
+    timeout: L(
+      r.timeout,
+      i.timeout,
+      o ? 0 : 150
+    ),
+    hideTimeout: L(r.hideTimeout, i.hideTimeout, 0)
+  }), s = {
+    ...a.getState(),
+    ...c.getState(),
+    initialFocus: L(i.initialFocus, "container"),
+    values: L(
+      r.values,
+      i.values,
+      r.defaultValues,
+      {}
+    )
+  }, d = ve(s, a, c, u);
+  return xe(
+    d,
+    () => de(d, ["mounted"], (l) => {
+      l.mounted || d.setState("activeId", null);
+    })
+  ), xe(
+    d,
+    () => de(e, ["orientation"], (l) => {
+      d.setState(
+        "placement",
+        l.orientation === "vertical" ? "right-start" : "bottom-start"
+      );
+    })
+  ), {
+    ...a,
+    ...c,
+    ...d,
+    combobox: n,
+    parent: e,
+    menubar: t,
+    hideAll: () => {
+      c.hide(), e == null || e.hideAll();
+    },
+    setInitialFocus: (l) => d.setState("initialFocus", l),
+    setValues: (l) => d.setState("values", l),
+    setValue: (l, v) => {
+      l !== "__proto__" && l !== "constructor" && (Array.isArray(l) || d.setState("values", (f) => {
+        const h = f[l], g = Vt(v, h);
+        return g === h ? f : {
+          ...f,
+          [l]: g !== void 0 && g
+        };
+      }));
+    }
+  };
+}
+function Qn(n, e, t) {
+  return Fe(e, [t.combobox, t.parent, t.menubar]), X(n, t, "values", "setValues"), Object.assign(
+    sn(
+      Kt(n, e, t),
+      e,
+      t
+    ),
+    {
+      combobox: t.combobox,
+      parent: t.parent,
+      menubar: t.menubar
+    }
+  );
+}
+function Zn(n = {}) {
+  const e = be(), t = ln(), r = St();
+  n = {
+    ...n,
+    parent: n.parent !== void 0 ? n.parent : e,
+    menubar: n.menubar !== void 0 ? n.menubar : t,
+    combobox: n.combobox !== void 0 ? n.combobox : r
+  };
+  const [o, u] = We(Yn, n);
+  return Qn(o, u, n);
+}
+function Jn(n = {}) {
+  const e = Zn(n);
+  return /* @__PURE__ */ P(ot, { value: e, children: n.children });
+}
+var er = "hr", tr = E(
+  function({ store: e, ...t }) {
+    const r = be();
+    return e = e || r, t = Ue({ store: e, ...t }), t;
+  }
+), nr = k(function(e) {
+  const t = tr(e);
+  return T(er, t);
+});
+const rr = ue(
+  [
+    "inline-flex items-center justify-center gap-2",
+    "font-medium transition-all duration-200",
+    "rounded-lg",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
+    "disabled:opacity-50 disabled:cursor-not-allowed"
+  ],
+  {
+    variants: {
+      variant: {
+        default: [
+          "bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100 border border-gray-300 dark:border-gray-700",
+          "hover:bg-gray-50 dark:hover:bg-gray-800",
+          "focus-visible:ring-primary-600",
+          "shadow-sm hover:shadow"
+        ],
+        primary: [
+          "bg-primary-600 text-white border border-transparent",
+          "hover:bg-primary-700",
+          "focus-visible:ring-primary-600",
+          "shadow-sm hover:shadow"
+        ],
+        ghost: [
+          "text-gray-900 dark:text-gray-100 bg-transparent border-transparent",
+          "hover:bg-gray-100 dark:hover:bg-gray-800",
+          "focus-visible:ring-primary-600"
+        ]
+      },
+      size: {
+        sm: "h-9 px-3 text-sm",
+        md: "h-10 px-4 text-base",
+        lg: "h-11 px-6 text-lg"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "md"
+    }
+  }
+), or = ue([
+  "z-50 min-w-[200px] rounded-lg border bg-white p-1 shadow-lg",
+  "dark:bg-gray-900 dark:border-gray-700",
+  "opacity-0 transition-all duration-200 ease-out",
+  "data-enter:opacity-100 data-enter:translate-y-0",
+  "data-leave:opacity-0 data-leave:-translate-y-1"
+]), at = ue(
+  [
+    "flex items-center gap-2 px-3 py-2 rounded-md",
+    "text-sm cursor-pointer",
+    "transition-colors duration-150",
+    "outline-none",
+    "text-gray-900 dark:text-gray-100",
+    "data-active-item:bg-primary-100 dark:data-active-item:bg-primary-900",
+    "data-active-item:text-primary-900 dark:data-active-item:text-primary-100",
+    "disabled:opacity-50 disabled:cursor-not-allowed"
+  ]
+), ur = ue([
+  "my-1 h-px bg-gray-200 dark:bg-gray-700"
+]);
+function ir({ children: n, ...e }) {
+  return /* @__PURE__ */ P(Jn, { ...e, children: n });
+}
+const ct = Z(
+  ({ variant: n, size: e, showArrow: t = !0, className: r, children: o, ...u }, i) => /* @__PURE__ */ Pe(
+    Hn,
+    {
+      ref: i,
+      className: J(rr({ variant: n, size: e, className: r })),
+      ...u,
+      children: [
+        o,
+        t && /* @__PURE__ */ P(_n, { className: "transition-transform duration-200 group-data-[open]:rotate-180" })
+      ]
+    }
+  )
+);
+ct.displayName = "MenuTrigger";
+const st = Z(
+  ({ gutter: n = 8, className: e, children: t, ...r }, o) => /* @__PURE__ */ P(
+    Nn,
+    {
+      ref: o,
+      gutter: n,
+      className: J(or(), e),
+      ...r,
+      children: t
+    }
+  )
+);
+st.displayName = "MenuContent";
+const lt = Z(({ className: n, children: e, ...t }, r) => /* @__PURE__ */ P(
+  Kn,
+  {
+    ref: r,
+    className: J(at(), n),
+    ...t,
+    children: e
+  }
+));
+lt.displayName = "MenuItem";
+const dt = Z(({ className: n, children: e, ...t }, r) => /* @__PURE__ */ Pe(
+  Xn,
+  {
+    ref: r,
+    className: J(at(), "pl-8 relative", n),
+    ...t,
+    children: [
+      /* @__PURE__ */ P(Wn, { className: "absolute left-2 flex items-center justify-center", children: /* @__PURE__ */ P(
+        "svg",
+        {
+          width: "16",
+          height: "16",
+          viewBox: "0 0 16 16",
+          fill: "none",
+          xmlns: "http://www.w3.org/2000/svg",
+          className: "text-primary-600 dark:text-primary-400",
+          children: /* @__PURE__ */ P(
+            "path",
+            {
+              d: "M13 4L6 11L3 8",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              strokeLinecap: "round",
+              strokeLinejoin: "round"
+            }
+          )
+        }
+      ) }),
+      e
+    ]
+  }
+));
+dt.displayName = "MenuItemCheckbox";
+const mt = Z(({ className: n, ...e }, t) => /* @__PURE__ */ P(
+  nr,
+  {
+    ref: t,
+    className: J(ur(), n),
+    ...e
+  }
+));
+mt.displayName = "MenuSeparator";
+const Mr = {
+  Root: ir,
+  Trigger: ct,
+  Content: st,
+  Item: lt,
+  ItemCheckbox: dt,
+  Separator: mt
+}, Cr = {
+  name: "Menu",
+  description: "Dropdown menu with keyboard navigation and checkbox support, built on Ariakit.",
+  category: "Navigation",
+  installation: "pnpm add @component-labs/ui",
+  usage: `import { Menu } from "@component-labs/ui";
+
+<Menu.Root>
+  <Menu.Trigger>Open Menu</Menu.Trigger>
+  <Menu.Content>
+    <Menu.Item>Item 1</Menu.Item>
+    <Menu.Item>Item 2</Menu.Item>
+  </Menu.Content>
+</Menu.Root>`,
+  props: [
+    {
+      name: "variant",
+      type: "'default' | 'primary' | 'ghost'",
+      description: "Visual style variant of the menu trigger button (Menu.Trigger)",
+      default: "'default'"
+    },
+    {
+      name: "size",
+      type: "'sm' | 'md' | 'lg'",
+      description: "Size of the menu trigger button (Menu.Trigger)",
+      default: "'md'"
+    },
+    {
+      name: "showArrow",
+      type: "boolean",
+      description: "Whether to show arrow icon on trigger (Menu.Trigger)",
+      default: "true"
+    },
+    {
+      name: "gutter",
+      type: "number",
+      description: "Space between trigger and menu content (Menu.Content)",
+      default: "8"
+    }
+  ],
+  examples: [
+    {
+      title: "Basic Menu",
+      code: `<Menu.Root>
+  <Menu.Trigger>Actions</Menu.Trigger>
+  <Menu.Content>
+    <Menu.Item>Edit</Menu.Item>
+    <Menu.Item>Duplicate</Menu.Item>
+    <Menu.Separator />
+    <Menu.Item>Delete</Menu.Item>
+  </Menu.Content>
+</Menu.Root>`,
+      description: "Simple dropdown menu with items and separator"
+    },
+    {
+      title: "With Checkboxes",
+      code: `<Menu.Root>
+  <Menu.Trigger>View Options</Menu.Trigger>
+  <Menu.Content>
+    <Menu.ItemCheckbox defaultChecked>Show toolbar</Menu.ItemCheckbox>
+    <Menu.ItemCheckbox>Show sidebar</Menu.ItemCheckbox>
+    <Menu.ItemCheckbox defaultChecked>Show footer</Menu.ItemCheckbox>
+  </Menu.Content>
+</Menu.Root>`,
+      description: "Menu with checkbox items for toggleable options"
+    },
+    {
+      title: "Trigger Variants",
+      code: `<div className="flex gap-2">
+  <Menu.Root>
+    <Menu.Trigger variant="default">Default</Menu.Trigger>
+    <Menu.Content>
+      <Menu.Item>Item 1</Menu.Item>
+    </Menu.Content>
+  </Menu.Root>
+
+  <Menu.Root>
+    <Menu.Trigger variant="primary">Primary</Menu.Trigger>
+    <Menu.Content>
+      <Menu.Item>Item 1</Menu.Item>
+    </Menu.Content>
+  </Menu.Root>
+
+  <Menu.Root>
+    <Menu.Trigger variant="ghost">Ghost</Menu.Trigger>
+    <Menu.Content>
+      <Menu.Item>Item 1</Menu.Item>
+    </Menu.Content>
+  </Menu.Root>
+</div>`,
+      description: "Different trigger button styles"
+    },
+    {
+      title: "Without Arrow",
+      code: `<Menu.Root>
+  <Menu.Trigger showArrow={false}>No Arrow</Menu.Trigger>
+  <Menu.Content>
+    <Menu.Item>Item 1</Menu.Item>
+  </Menu.Content>
+</Menu.Root>`,
+      description: "Menu trigger without arrow indicator"
+    }
+  ],
+  accessibility: [
+    "Built on Ariakit's accessible Menu component",
+    "Full keyboard navigation (Arrow keys, Enter, Escape)",
+    "Proper ARIA attributes (aria-haspopup, aria-expanded)",
+    "Focus management and trap within menu",
+    "Screen reader announcements",
+    "Automatic focus return to trigger on close"
+  ],
+  relatedComponents: ["Combobox", "Command"]
+};
+export {
+  Mr as Menu,
+  Cr as menuDocs
+};
+//# sourceMappingURL=menu.js.map