import { jsx as h, jsxs as c } from "react/jsx-runtime";
import { useRef as v } from "react";
function k({
  tabs: l,
  activeTab: d,
  onTabChange: a,
  ariaLabel: b,
  children: f,
  className: x
}) {
  const i = v(/* @__PURE__ */ new Map()), t = l.filter((e) => !e.hidden), u = (e) => {
    const r = i.current.get(e);
    r && r.focus();
  }, p = (e, r) => {
    const n = t.findIndex((m) => m.id === r);
    if (n === -1) return;
    let o = null;
    switch (e.key) {
      case "ArrowRight":
        o = (n + 1) % t.length;
        break;
      case "ArrowLeft":
        o = (n - 1 + t.length) % t.length;
        break;
      case "Home":
        o = 0;
        break;
      case "End":
        o = t.length - 1;
        break;
      default:
        return;
    }
    e.preventDefault();
    const s = t[o];
    a(s.id), u(s.id);
  };
  return /* @__PURE__ */ h("div", { className: `border-b border-[var(--border-color)] ${x ?? ""}`, children: /* @__PURE__ */ c(
    "div",
    {
      className: "flex gap-1 -mb-px overflow-x-auto",
      role: "tablist",
      "aria-label": b,
      children: [
        t.map((e) => {
          const r = d === e.id;
          return /* @__PURE__ */ c(
            "button",
            {
              ref: (n) => {
                i.current.set(e.id, n);
              },
              type: "button",
              role: "tab",
              id: `tab-${e.id}`,
              "aria-selected": r,
              "aria-controls": `tabpanel-${e.id}`,
              tabIndex: r ? 0 : -1,
              onClick: () => a(e.id),
              onKeyDown: (n) => p(n, e.id),
              className: `flex-shrink-0 flex items-center gap-2 px-4 py-2 whitespace-nowrap border-b-2 font-medium transition-colors ${r ? "border-[var(--color-accent-600)] text-[var(--color-accent-600)]" : "border-transparent text-[var(--text-secondary)] hover:text-[var(--text-primary)]"}`,
              children: [
                e.icon,
                e.label
              ]
            },
            e.id
          );
        }),
        f
      ]
    }
  ) });
}
export {
  k as U
};
//# sourceMappingURL=UnderlinedTabs-BEbz4Kre.js.map
