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