"use client";
import { j as d } from "./index.esm38.js";
import S, { useState as U, useMemo as k, useCallback as a } from "react";
import l from "./index.esm40.js";
import C from "./index.esm48.js";
import { TagGroupItemView as $ } from "./index.esm49.js";
import { Tag as E } from "./index.esm11.js";
import { ChevronUpIcon as o } from "./index.esm50.js";
const q = S.forwardRef(
  ({
    tags: i,
    maxVisible: u = 5,
    tagProps: b,
    overflowTagProps: e,
    collapseTagProps: n,
    collapseText: I = "Свернуть",
    size: c,
    variant: h,
    className: f,
    ...D
  }, N) => {
    const [m, j] = U(!1), { visibleTags: G, hiddenCount: s } = k(() => i.length <= u || m ? {
      visibleTags: i,
      hiddenCount: 0
    } : {
      visibleTags: i.slice(0, u),
      hiddenCount: i.length - u
    }, [i, u, m]), r = a(() => j(!0), []), y = a(() => j(!1), []), K = a(
      (t) => {
        (t.key === "Enter" || t.key === " ") && (t.preventDefault(), r());
      },
      [r]
    ), R = a(
      (t) => {
        (t.key === "Enter" || t.key === " ") && (t.preventDefault(), y());
      },
      [y]
    ), x = k(
      () => ({
        ...b,
        ...c && { size: c },
        ...h && { variant: h }
      }),
      [b, c, h]
    );
    return /* @__PURE__ */ d.jsxs("div", { ref: N, "data-atme-ui": !0, className: l(C.tagGroup, f), ...D, children: [
      G.map((t, M) => /* @__PURE__ */ d.jsx($, { tag: t, baseTagProps: x }, M)),
      !m && s > 0 && /* @__PURE__ */ d.jsxs(
        E,
        {
          ...x,
          ...e,
          onClick: r,
          onKeyDown: K,
          role: "button",
          tabIndex: 0,
          "aria-label": `Показать еще ${s} тегов`,
          className: l(C.tagInteractive, e == null ? void 0 : e.className),
          style: e == null ? void 0 : e.style,
          children: [
            "+",
            s
          ]
        }
      ),
      m && /* @__PURE__ */ d.jsx(
        E,
        {
          ...x,
          ...n,
          onClick: y,
          onKeyDown: R,
          role: "button",
          tabIndex: 0,
          "aria-label": I,
          className: l(C.tagInteractive, n == null ? void 0 : n.className),
          style: n == null ? void 0 : n.style,
          children: /* @__PURE__ */ d.jsx(o, { decorative: !0, width: 16, height: 16 })
        }
      )
    ] });
  }
);
q.displayName = "TagGroup";
export {
  q as TagGroup
};
//# sourceMappingURL=index.esm12.js.map
