import { jsxs as a, jsx as s } from "react/jsx-runtime";
import { forwardRef as D, useEffect as p, useState as E, useMemo as S, useCallback as T, useRef as v } from "react";
import { cx as K } from "../../utils/classNames.js";
import { useArrowTheme as P } from "../../hooks/useArrowTheme.js";
import { useRovingTabIndex as q } from "../../hooks/useRovingTabIndex.js";
const h = { current: !1 }, z = D(({
  tabs: i,
  activeTab: f,
  defaultActiveTab: I,
  onTabChange: r,
  ariaLabel: o,
  inverse: b,
  className: x,
  id: y
}, N) => {
  const w = P(), $ = b ?? w.inverse;
  p(() => {
    process.env.NODE_ENV !== "production" && o === void 0 && !h.current && (h.current = !0, console.warn(
      "Tabs: ariaLabel is recommended for accessibility when no visible heading labels the tab set."
    ));
  }, [o]);
  const d = f !== void 0, [A, R] = E(
    () => I ?? (i.length > 0 ? i[0].id : "")
  ), l = d ? f : A, c = S(() => {
    const e = i.findIndex((t) => t.id === l);
    return e >= 0 ? e : 0;
  }, [i, l]), _ = T(
    (e) => {
      const t = i[e];
      !t || t.disabled || (d || R(t.id), r == null || r(t.id));
    },
    [i, d, r]
  ), { getItemProps: k } = q({
    items: i,
    activeIndex: c,
    onActivate: _,
    orientation: "horizontal"
  }), u = v(null), m = v(null);
  p(() => {
    const e = u.current, t = m.current;
    if (!e || !t) return;
    const n = t.querySelectorAll('button[role="tab"]')[c];
    n && (e.style.width = `${n.offsetWidth}px`, e.style.left = `${n.offsetLeft}px`);
  }, [c, i]);
  const j = y ?? `tablist-${i.map((e) => e.id).join("-")}`;
  return /* @__PURE__ */ a(
    "div",
    {
      ref: N,
      className: x,
      "data-inverse": String($),
      children: [
        /* @__PURE__ */ a(
          "div",
          {
            ref: m,
            className: "tdds-tablist",
            id: j,
            role: "tablist",
            "aria-label": o,
            children: [
              i.map((e, t) => {
                const n = k(t);
                return /* @__PURE__ */ a(
                  "button",
                  {
                    type: "button",
                    role: "tab",
                    id: e.tabId ?? `${e.id}-tab`,
                    className: K("tdds-tab", {
                      "force-hover": !!e.hover,
                      "force-focus": !!e.focused
                    }),
                    "aria-controls": e.panelId ?? `${e.id}-panel`,
                    "aria-selected": n["aria-selected"],
                    "aria-disabled": e.disabled || void 0,
                    tabIndex: n.tabIndex,
                    onClick: n.onClick,
                    onKeyDown: n.onKeyDown,
                    ref: n.ref,
                    children: [
                      e.icon && /* @__PURE__ */ s("span", { className: "tdds-tab__icon", children: e.icon }),
                      e.label && /* @__PURE__ */ s("span", { className: "tdds-tab__label", children: e.label })
                    ]
                  },
                  e.id
                );
              }),
              /* @__PURE__ */ s("div", { className: "tdds-tab-selector", "aria-hidden": "true", ref: u })
            ]
          }
        ),
        /* @__PURE__ */ s("div", { children: i.map((e) => {
          const t = e.id === l;
          return /* @__PURE__ */ s(
            "div",
            {
              id: e.panelId ?? `${e.id}-panel`,
              role: "tabpanel",
              className: "tdds-tabpanel",
              "aria-labelledby": e.tabId ?? `${e.id}-tab`,
              style: { display: t ? "block" : "none" },
              children: e.content
            },
            e.id
          );
        }) })
      ]
    }
  );
});
z.displayName = "Tabs";
export {
  z as Tabs
};
//# sourceMappingURL=Tabs.js.map
