@adyen/adyen-platform-experience-web/dist/es/components/internal/Tabs/Tabs.js


import { jsx as n } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
import { TypographyVariant as b, TypographyElement as y } from "../Typography/types.js";
import $ from "../../../core/Context/useCoreContext.js";
import { useTabbedControl as h } from "../../../hooks/useTabbedControl.js";
import u from "../Typography/Typography.js";
/* empty css          */
function T({ activeTab: d, tabs: t, onChange: s }) {
  const { activeIndex: r, onClick: p, onKeyDown: c, refs: m, uniqueId: a } = h({ onChange: s, options: t, activeOption: d }), { i18n: l } = $();
  return /* @__PURE__ */ n("section", { "aria-label": l.get("tabs"), children: [
    /* @__PURE__ */ n("div", { className: "adyen-pe-tabs", role: "tablist", "aria-orientation": "horizontal", children: t.map((e, i) => {
      const o = r === i;
      return /* @__PURE__ */ n(
        "button",
        {
          role: "tab",
          name: e.id,
          ref: m[i],
          id: `tab:${a}-${e.id}`,
          className: "adyen-pe-tabs__tab",
          "aria-controls": `panel:${a}-${e.id}`,
          "aria-selected": o,
          onClick: o ? void 0 : p,
          onKeyDown: c,
          disabled: e.disabled,
          tabIndex: o ? 0 : -1,
          children: /* @__PURE__ */ n(u, { el: y.SPAN, variant: b.BODY, className: "adyen-pe-tabs__tab-label", stronger: !0, children: l.get(e.label) })
        },
        `tab:${a}-${e.id}`
      );
    }) }),
    /* @__PURE__ */ n("div", { className: "adyen-pe-tabpanels", children: t.map((e, i) => /* @__PURE__ */ n(
      "section",
      {
        role: "tabpanel",
        id: `panel:${a}-${e.id}`,
        className: "adyen-pe-tabpanels__panel",
        "aria-labelledby": `tab:${a}-${e.id}`,
        hidden: r !== i,
        children: e.content
      },
      `panel:${a}-${e.id}`
    )) })
  ] });
}
export {
  T as default
};