import { jsx as o, jsxs as _ } from "react/jsx-runtime";
import { useCallback as m } from "react";
import a from "../box/Box.js";
import v from "../icon/components/icon-extend/IconExtend.js";
import { tagSizes as y } from "./types/TagSize.js";
import b from "../text/Text.js";
import d from "../button/Button.js";
import z from "../icon/Icon.js";
import { c as i } from "../../index-BtlgVD4m.js";
import { tagVariants as I } from "./types/TagVariant.js";
const N = ({
  label: c,
  variant: f = "default",
  size: p = "default",
  icon: s,
  closable: l = !0,
  onClose: e,
  disabled: t = !1,
  ref: g,
  ...h
}) => {
  const u = "inline-flex", r = y[p], x = m(
    (n) => {
      n.stopPropagation(), !t && e && e();
    },
    [t, e]
  ), w = m(
    (n) => {
      (n.key === "Enter" || n.key === " ") && !t && e && (n.preventDefault(), e());
    },
    [t, e]
  );
  return /* @__PURE__ */ o(
    "div",
    {
      ref: g,
      tabIndex: t ? -1 : 0,
      className: i(
        u,
        "w-fit",
        r.borderRadius,
        "focus:outline-none",
        "focus:ring-2",
        "focus:ring-[var(--base-ring)]",
        "focus:ring-offset-1",
        "max-w-full",
        t && "opacity-50 cursor-not-allowed"
      ),
      onKeyDown: w,
      children: /* @__PURE__ */ _(
        a,
        {
          className: i([
            u,
            "justify-center",
            "items-center",
            r.borderRadius,
            "transition-colors",
            "whitespace-nowrap",
            "overflow-hidden",
            "max-w-full",
            ...r.container,
            ...I[f],
            t && "pointer-events-none"
          ]),
          ...h,
          children: [
            s && // This wrapper prevents flex container from affecting SVG sizing
            /* @__PURE__ */ o(a, { as: "span", children: /* @__PURE__ */ o(v, { icon: s, size: r.iconSize }) }),
            /* @__PURE__ */ o(b, { type: r.textType, weight: "medium", truncate: !0, children: c }),
            l && /* @__PURE__ */ o(
              a,
              {
                className: i(
                  "tag-close-wrapper",
                  "text-current",
                  "[&_button]:!bg-transparent",
                  "[&_button]:hover:!bg-transparent",
                  "[&_button]:hover:opacity-70",
                  "[&_button]:!text-current",
                  "[&_button]:!h-auto",
                  "[&_button]:!w-auto",
                  "[&_button]:!p-0",
                  "[&_button]:!min-w-0",
                  "[&_button_svg]:!text-current"
                ),
                children: /* @__PURE__ */ o(
                  d,
                  {
                    size: "iconXs",
                    variant: "ghost",
                    icon: /* @__PURE__ */ o(z, { name: "X", size: r.closeIconSize }),
                    onClick: x,
                    disabled: t,
                    "aria-label": `Remove ${c}`
                  }
                )
              }
            )
          ]
        }
      )
    }
  );
};
N.displayName = "Tag";
export {
  N as default
};
//# sourceMappingURL=Tag.js.map
