import { jsx as a, jsxs as r, Fragment as _ } from "react/jsx-runtime";
import { forwardRef as C, useCallback as v } from "react";
import { cx as n } from "../../utils/classNames.js";
import { useArrowTheme as g } from "../../hooks/useArrowTheme.js";
function k({
  variant: l,
  chip: e,
  checkmarkIcon: s
}) {
  const d = l === "toggle";
  return e.label ? /* @__PURE__ */ r(_, { children: [
    /* @__PURE__ */ a(
      "input",
      {
        id: e.id,
        type: d ? "checkbox" : "radio",
        ...d ? { role: "switch" } : {},
        ...l === "radio" && e.name ? { name: e.name } : {},
        defaultChecked: e.checked,
        className: e.focused ? "force-focus" : void 0
      }
    ),
    /* @__PURE__ */ a(
      "label",
      {
        htmlFor: e.id,
        className: n("tdds-chip", {
          "force-hover": !!e.hover,
          "tdds-chip--unavailable": !!e.isUnavailable
        }),
        children: /* @__PURE__ */ a("span", { className: "tdds-chip__label--wrapper", children: /* @__PURE__ */ r("span", { className: "tdds-chip__label", children: [
          d ? s : null,
          e.label,
          e.isUnavailable ? /* @__PURE__ */ a("span", { className: "tdds-chip__label--sr-only", children: ", unavailable" }) : null
        ] }) })
      }
    )
  ] }) : null;
}
function x({
  chip: l,
  closeIcon: e,
  onRemove: s
}) {
  const d = v(() => {
    s == null || s(l.id);
  }, [s, l.id]);
  return l.label ? /* @__PURE__ */ a(
    "button",
    {
      "aria-label": `${l.label}, delete`,
      className: n({
        "force-pressed": !!l.pressed,
        "force-focus": !!l.focused
      }),
      onClick: d,
      id: l.id,
      children: /* @__PURE__ */ a(
        "span",
        {
          className: n("tdds-chip", {
            "force-hover": !!l.hover
          }),
          children: /* @__PURE__ */ a("span", { className: "tdds-chip__label--wrapper", children: /* @__PURE__ */ r("span", { className: "tdds-chip__label", children: [
            /* @__PURE__ */ a("span", { className: "tdds-chip__label--text", children: l.label }),
            e
          ] }) })
        }
      )
    }
  ) : null;
}
const w = C(
  ({
    variant: l,
    chips: e,
    legend: s,
    inverse: d,
    size: t,
    onChipChange: y,
    onChipSelect: j,
    onChipRemove: o,
    checkmarkIcon: c,
    closeIcon: m,
    className: u,
    ...b
  }, f) => {
    const h = g(), p = d ?? h.inverse, N = l === "radio";
    return /* @__PURE__ */ a(
      "div",
      {
        ref: f,
        className: n("tdds-chips", u),
        "data-inverse": p ? "true" : void 0,
        "data-size": t || void 0,
        ...b,
        children: /* @__PURE__ */ r("fieldset", { ...N ? { role: "radiogroup" } : {}, children: [
          s ? /* @__PURE__ */ a("legend", { className: "tdds-chips__legend", children: s }) : null,
          e == null ? void 0 : e.map((i) => /* @__PURE__ */ a("div", { className: "tdds-chip-container", children: l === "button" ? /* @__PURE__ */ a(
            x,
            {
              chip: i,
              closeIcon: m,
              onRemove: o
            }
          ) : /* @__PURE__ */ a(
            k,
            {
              variant: l,
              chip: i,
              checkmarkIcon: c
            }
          ) }, i.id))
        ] })
      }
    );
  }
);
w.displayName = "Chips";
export {
  w as Chips
};
//# sourceMappingURL=Chips.js.map
