"use client";
import { jsx as u } from "react/jsx-runtime";
import { T as x } from "./tooltip-mooldq78tg77ekvv.js";
import { IconContext as k } from "@phosphor-icons/react";
import { useRef as p, useEffect as w } from "react";
import { c as b } from "./vendor-styling-ofvnbcuht98q88oo.js";
const y = ({
  menuRef: e,
  direction: o = "horizontal"
}) => {
  const t = p(null);
  w(() => {
    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 r = (i) => {
      if (!t.current) return;
      const l = n.indexOf(t.current);
      let a = l;
      const m = o === "horizontal", g = m ? "ArrowRight" : "ArrowDown", h = m ? "ArrowLeft" : "ArrowUp";
      if (i.key === g)
        i.preventDefault(), a = (l + 1) % n.length;
      else if (i.key === h)
        i.preventDefault(), a = (l - 1 + n.length) % n.length;
      else
        return;
      const v = n[a];
      t.current = v, v.focus();
    }, s = () => document.addEventListener("keydown", r), c = () => document.removeEventListener("keydown", r), d = () => {
      t.current = document.activeElement, s();
    }, f = () => {
      t.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: t,
  onClick: n,
  tooltip: r
}) => {
  const s = /* @__PURE__ */ u(
    "button",
    {
      "data-kumo-component": "MenuBar",
      "data-kumo-part": "option",
      "aria-label": r,
      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": t === o
        }
      ),
      onClick: n,
      children: /* @__PURE__ */ u(k.Provider, { value: { size: 18 }, children: e })
    }
  );
  return /* @__PURE__ */ u(x, { content: r, render: s });
}, D = ({
  className: e,
  isActive: o,
  options: t,
  optionIds: n = !1
  // if option needs an extra unique ID
}) => {
  const r = p(null);
  return y({ menuRef: r, direction: "horizontal" }), /* @__PURE__ */ u(
    "nav",
    {
      className: b(
        "isolate flex rounded-lg ring ring-kumo-line bg-kumo-recessed pl-px shadow-xs transition-colors",
        e
      ),
      ref: r,
      children: t.map((s, c) => /* @__PURE__ */ u(
        E,
        {
          ...s,
          isActive: o,
          id: n ? s.id : c
        },
        c
      ))
    }
  );
};
export {
  D as M,
  y as u
};
//# sourceMappingURL=menubar-opzxfzylaatfz4nv.js.map
