"use client";
import { jsx as i } from "react/jsx-runtime";
import { T as g } from "./tooltip-hnc71tg4gz2gpcvc.js";
import { c as h } from "./cn-ct4n7r74mh8y0f48.js";
import { IconContext as w } from "@phosphor-icons/react";
import { useRef as p, useEffect as y } from "react";
const E = ({
  menuRef: e,
  direction: o = "horizontal"
}) => {
  const n = p(null);
  y(() => {
    if (!e.current) return;
    const t = Array.from(
      e.current.querySelectorAll(
        'a, button, input, textarea, select, details, [tabindex]:not([tabindex="-1"])'
      )
    );
    if (t.length === 0) return;
    const r = (l) => {
      if (!n.current) return;
      const u = t.indexOf(n.current);
      let a = u;
      const m = o === "horizontal", x = m ? "ArrowRight" : "ArrowDown", b = m ? "ArrowLeft" : "ArrowUp";
      if (l.key === x)
        l.preventDefault(), a = (u + 1) % t.length;
      else if (l.key === b)
        l.preventDefault(), a = (u - 1 + t.length) % t.length;
      else
        return;
      const v = t[a];
      n.current = v, v.focus();
    }, c = () => document.addEventListener("keydown", r), s = () => document.removeEventListener("keydown", r), d = () => {
      n.current = document.activeElement, c();
    }, f = () => {
      n.current = null, s();
    };
    return e.current.addEventListener("focusin", d), e.current.addEventListener("focusout", f), () => {
      e.current?.removeEventListener("focusin", d), e.current?.removeEventListener("focusout", f), s();
    };
  }, [e, o]);
}, k = ({
  icon: e,
  id: o,
  isActive: n,
  onClick: t,
  tooltip: r
}) => /* @__PURE__ */ i(g, { content: r, asChild: !0, children: /* @__PURE__ */ i(
  "button",
  {
    className: h(
      "focus:inset-ring-focus relative -ml-px flex h-full w-11 cursor-pointer items-center justify-center rounded-md border-none bg-kumo-fill first:rounded-l-lg last:rounded-r-lg transition-colors focus:z-1 focus:outline-none focus-visible:z-1 focus-visible:inset-ring-[0.5]",
      {
        "z-2 bg-kumo-base shadow-xs transition-colors": n === o
      }
    ),
    onClick: t,
    children: /* @__PURE__ */ i(w.Provider, { value: { size: 18 }, children: e })
  }
) }), I = ({
  className: e,
  isActive: o,
  options: n,
  optionIds: t = !1
  // if option needs an extra unique ID
}) => {
  const r = p(null);
  return E({ menuRef: r, direction: "horizontal" }), /* @__PURE__ */ i(
    "nav",
    {
      className: h(
        "isolate flex rounded-lg border border-kumo-fill bg-kumo-fill pl-px shadow-xs transition-colors",
        e
      ),
      ref: r,
      children: n.map((c, s) => /* @__PURE__ */ i(
        k,
        {
          ...c,
          isActive: o,
          id: t ? c.id : s
        },
        s
      ))
    }
  );
};
export {
  I as M,
  E as u
};
//# sourceMappingURL=menubar-g1wqqjuyyfvsim83.js.map
