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


import { jsx as o } from "../../../external/preact/jsx-runtime/dist/jsxRuntime.module.js";
import { TypographyVariant as p, TypographyElement as g } from "../Typography/types.js";
import f from "../../../core/Context/useCoreContext.js";
import { useTabbedControl as y } from "../../../hooks/useTabbedControl.js";
import u from "../Typography/Typography.js";
/* empty css                      */
function x({ defaultItem: i, items: a }) {
  const { activeIndex: d, onClick: l, onKeyDown: s, refs: c, uniqueId: n } = y(a, i), { i18n: m } = f();
  return /* @__PURE__ */ o("div", { children: [
    /* @__PURE__ */ o("div", { role: "radiogroup", className: "adyen-fp-segmented-control", children: a.map((e, r) => {
      const t = d === r;
      return /* @__PURE__ */ o(
        "button",
        {
          role: "radio",
          name: e.id,
          ref: c[r],
          id: `item:${n}-${e.id}`,
          className: "adyen-fp-segmented-control__item",
          "aria-checked": t,
          "aria-controls": `segment:${n}-${e.id}`,
          onClick: t ? void 0 : l,
          onKeyDown: s,
          disabled: e.disabled,
          tabIndex: t ? 0 : -1,
          children: /* @__PURE__ */ o(
            u,
            {
              el: g.SPAN,
              variant: p.BODY,
              className: "adyen-fp-segmented-control__item-label",
              stronger: !0,
              children: m.get(e.label)
            }
          )
        },
        `item:${n}-${e.id}`
      );
    }) }),
    /* @__PURE__ */ o("div", { className: "adyen-fp-segmented-content-container", children: a.map((e, r) => /* @__PURE__ */ o(
      "section",
      {
        id: `segment:${n}-${e.id}`,
        className: "adyen-fp-segmented-content",
        "aria-labelledby": `item:${n}-${e.id}`,
        hidden: d !== r,
        children: e.content
      },
      `segment:${n}-${e.id}`
    )) })
  ] });
}
export {
  x as default
};