import { jsx as t, jsxs as v } from "react/jsx-runtime";
import { Item as N, Root as k, List as E } from "@radix-ui/react-navigation-menu";
import { useCallback as g, useRef as R, useState as z, useEffect as B, useMemo as I } from "react";
import s from "../box/Box.js";
import C from "../icon/components/icon-extend/IconExtend.js";
import { c as n } from "../../index-BtlgVD4m.js";
const L = ({ tabs: o, activeTab: i, onSelectTab: l }) => {
  const d = g(
    (e) => {
      l(e);
    },
    [l]
  ), c = g(
    (e, a) => {
      e.preventDefault(), d(a);
    },
    [d]
  ), f = R(/* @__PURE__ */ new Map()), [m, w] = z({
    left: 0,
    width: 0
  });
  B(() => {
    const e = () => {
      var u, h;
      const r = f.current.get(i);
      if (r) {
        const p = r.getBoundingClientRect(), b = ((h = (u = r.parentElement) == null ? void 0 : u.parentElement) == null ? void 0 : h.getBoundingClientRect()) || { left: 0 }, y = p.left - b.left;
        w({
          left: y,
          width: p.width || r.offsetWidth || 0
        });
      }
    }, a = setTimeout(e, 0);
    return window.addEventListener("resize", e), () => {
      clearTimeout(a), window.removeEventListener("resize", e);
    };
  }, [i, o]);
  const x = I(() => o.map((e) => {
    const a = e.id === i;
    return /* @__PURE__ */ t(N, { value: e.id, className: "relative", children: /* @__PURE__ */ t(
      s,
      {
        ref: (r) => {
          r && f.current.set(e.id, r);
        },
        className: n(
          "relative",
          "max-w-[var(--width-w-64)]",
          "flex",
          "items-center",
          "transition-all duration-200",
          "text-[var(--base-foreground)]",
          "rounded-t-[var(--border-radius-default)]"
        ),
        children: /* @__PURE__ */ v(
          "a",
          {
            href: e.id,
            className: n(
              "truncate",
              "flex",
              "h-full",
              "flex-1",
              "items-center",
              "gap-[var(--spacing-2)]",
              "rounded-[var(--border-radius-md)]",
              "px-[var(--spacing-3)]",
              "py-[var(--spacing-2)]",
              "hover:cursor-pointer",
              "hover:bg-[var(--base-accent)]"
            ),
            onClick: (r) => c(r, e.id),
            children: [
              e.icon && /* @__PURE__ */ t("span", { className: n("shrink-0", "text-[var(--base-muted-foreground)]", { "text-[var(--base-foreground)]": a }), children: /* @__PURE__ */ t(C, { icon: e.icon, size: 16 }) }),
              /* @__PURE__ */ t(
                "span",
                {
                  className: n(
                    "truncate",
                    "text-[var(--base-muted-foreground)]",
                    "font-[family-name:var(--typography-font-family-font-sans)]",
                    "text-(length:var(--typography-base-sizes-small-font-size))",
                    "font-[var(--font-weight-normal)]",
                    "leading-[var(--typography-base-sizes-small-line-height)]",
                    { "text-[var(--base-foreground)]": a }
                  ),
                  children: e.title
                }
              )
            ]
          }
        )
      }
    ) }, e.id);
  }), [i, c, o]);
  return /* @__PURE__ */ t(s, { className: "w-full relative flex overflow-hidden", children: /* @__PURE__ */ t(s, { className: "w-full flex overflow-x-auto overflow-y-hidden relative", children: /* @__PURE__ */ v(k, { className: "w-full border-b-(length:--border-width-border-1) border-b-[var(--base-border)]", children: [
    /* @__PURE__ */ t(E, { className: "flex items-center relative py-[var(--spacing-1-5)]", children: x }),
    /* @__PURE__ */ t(
      "div",
      {
        className: n(
          "absolute",
          "bottom-0",
          "h-[var(--border-width-border-2)]",
          "bg-[var(--base-primary)]",
          "transition-all duration-300 ease-in-out"
        ),
        style: {
          left: `${m.left}px`,
          width: `${m.width}px`
        },
        "aria-hidden": "true"
      }
    )
  ] }) }) });
};
L.displayName = "Tab";
export {
  L as default
};
//# sourceMappingURL=Tab.js.map
