import { safeCustomElement } from "../../shared/safe-custom-element.js";
import { TailwindStyledElement } from "../../shared/tailwind-element/index.js";
import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.127.0/helpers/decorate.js";
import { customStyleMap } from "../../shared/directives/custom-style-map/index.js";
import "../../shared/directives/index.js";
import style_default from "./style.css?inline.js";
import { html } from "lit";
import { property } from "lit/decorators.js";
import { tv } from "tailwind-variants";
//#region src/components/lukso-tag/index.ts
var LuksoTag = class LuksoTag extends TailwindStyledElement(style_default) {
	constructor(..._args) {
		super(..._args);
		this.size = "small";
		this.isRounded = false;
		this.backgroundColor = "";
		this.borderColor = "";
		this.textColor = "";
		this.tagStyles = tv({
			base: "inline-flex items-center justify-center border border-neutral-20 text-neutral-20 px-2 whitespace-nowrap",
			variants: {
				size: {
					"x-small": "font-inter text-8 font-500 leading-20 h-[20px] px-1 rounded-4",
					small: "paragraph-inter-12-medium h-7 px-2 rounded-8",
					large: "paragraph-inter-14-medium h-[34px] px-4 rounded-8"
				},
				isRounded: { true: "rounded-[56px]" }
			},
			compoundVariants: [{
				size: "small",
				isRounded: true,
				class: "px-3"
			}, {
				size: "x-small",
				isRounded: true,
				class: "px-2"
			}]
		});
	}
	resolveBorderColor() {
		if (this.borderColor) return this.borderColor;
		if (this.backgroundColor) return this.backgroundColor;
	}
	render() {
		return html`
      <div
        data-testid="tag"
        class=${this.tagStyles({
			size: this.size,
			isRounded: this.isRounded
		})}
        style=${customStyleMap({
			[`background-color: var(--${this.backgroundColor})`]: !!this.backgroundColor,
			[`border-color: var(--${this.resolveBorderColor()})`]: !!this.resolveBorderColor(),
			[`color: var(--${this.textColor})`]: !!this.textColor
		})}
      >
        <slot></slot>
      </div>
    `;
	}
};
__decorate([property({ type: String })], LuksoTag.prototype, "size", void 0);
__decorate([property({
	type: Boolean,
	attribute: "is-rounded"
})], LuksoTag.prototype, "isRounded", void 0);
__decorate([property({
	type: String,
	attribute: "background-color"
})], LuksoTag.prototype, "backgroundColor", void 0);
__decorate([property({
	type: String,
	attribute: "border-color"
})], LuksoTag.prototype, "borderColor", void 0);
__decorate([property({
	type: String,
	attribute: "text-color"
})], LuksoTag.prototype, "textColor", void 0);
LuksoTag = __decorate([safeCustomElement("lukso-tag")], LuksoTag);
//#endregion
export { LuksoTag };
