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