import { defineComponent as f, computed as g, openBlock as t, createBlock as v, resolveDynamicComponent as b, normalizeClass as a, unref as r, normalizeStyle as k, withCtx as x, createElementBlock as y, renderSlot as l, createElementVNode as z, createVNode as B } from "vue";
import { useColors as C } from "../../composables/useColors.js";
import { useCommon as n } from "../../composables/useCommon.js";
import { useTheme as h } from "../../composables/useTheme.js";
import { closeIcon as S } from "../../common/icons.js";
import _ from "../icon/Icon.vue.js";
const $ = {
  key: 0,
  class: "max-w-full truncate pr-4"
}, w = { class: "absolute right-1.5 top-0 h-full flex items-center" }, N = {
  ...n.props(),
  ...C.props("secondary"),
  tag: {
    type: String,
    default: "span"
  },
  rounded: Boolean,
  removable: Boolean,
  outlined: Boolean,
  filled: Boolean,
  disabled: Boolean
}, T = {
  name: "XTag",
  validators: {
    ...n.validators()
  }
}, j = /* @__PURE__ */ f({
  ...T,
  props: N,
  emits: ["remove"],
  setup(d) {
    const o = d, i = g(() => o.size === "xs" ? "xs" : o.size === "sm" ? "sm" : o.size === "lg" ? "md" : o.size === "xl" ? "lg" : "sm"), { styles: m, classes: c, className: u } = h("Tag", {}, o);
    return (e, s) => (t(), v(b(e.tag), {
      class: a([
        "text-[color:var(--x-tag-text)] dark:text-[color:var(--x-tag-dark-text)] border relative",
        [
          r(u),
          r(c).wrapper,
          e.outlined ? "border-[color:var(--x-tag-border)] dark:border-[color:var(--x-tag-dark-border)]" : "!border-transparent bg-[color:var(--x-tag-bg)] dark:bg-[color:var(--x-tag-dark-bg)]",
          e.rounded ? "rounded-full" : "rounded"
        ]
      ]),
      style: k(r(m))
    }, {
      default: x(() => [
        e.removable ? (t(), y("span", $, [
          l(e.$slots, "default"),
          z("div", w, [
            B(_, {
              size: i.value,
              icon: r(S),
              class: a(["cursor-pointer transition-colors duration-150", [e.disabled ? "text-secondary-400" : "hover:text-secondary-500"]]),
              onClick: s[0] || (s[0] = (p) => !e.disabled && e.$emit("remove", p))
            }, null, 8, ["size", "icon", "class"])
          ])
        ])) : l(e.$slots, "default", { key: 1 })
      ]),
      _: 3
    }, 8, ["style", "class"]));
  }
});
export {
  j as default
};
