Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
require("../../_virtual/_rolldown/runtime.cjs");
const require_safe_custom_element = require("../../shared/safe-custom-element.cjs");
const require_index = require("../../shared/tailwind-element/index.cjs");
const require_decorate = require("../../_virtual/_@oxc-project_runtime@0.127.0/helpers/decorate.cjs");
const require_index$1 = require("../../shared/directives/custom-style-map/index.cjs");
require("../../shared/directives/index.cjs");
const require_style = require("./style.css?inline.cjs");
let lit = require("lit");
let lit_decorators_js = require("lit/decorators.js");
let tailwind_variants = require("tailwind-variants");
//#region src/components/lukso-tag/index.ts
var LuksoTag = class LuksoTag extends require_index.TailwindStyledElement(require_style.default) {
	constructor(..._args) {
		super(..._args);
		this.size = "small";
		this.isRounded = false;
		this.backgroundColor = "";
		this.borderColor = "";
		this.textColor = "";
		this.tagStyles = (0, tailwind_variants.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 lit.html`
      <div
        data-testid="tag"
        class=${this.tagStyles({
			size: this.size,
			isRounded: this.isRounded
		})}
        style=${require_index$1.customStyleMap({
			[`background-color: var(--${this.backgroundColor})`]: !!this.backgroundColor,
			[`border-color: var(--${this.resolveBorderColor()})`]: !!this.resolveBorderColor(),
			[`color: var(--${this.textColor})`]: !!this.textColor
		})}
      >
        <slot></slot>
      </div>
    `;
	}
};
require_decorate.__decorate([(0, lit_decorators_js.property)({ type: String })], LuksoTag.prototype, "size", void 0);
require_decorate.__decorate([(0, lit_decorators_js.property)({
	type: Boolean,
	attribute: "is-rounded"
})], LuksoTag.prototype, "isRounded", void 0);
require_decorate.__decorate([(0, lit_decorators_js.property)({
	type: String,
	attribute: "background-color"
})], LuksoTag.prototype, "backgroundColor", void 0);
require_decorate.__decorate([(0, lit_decorators_js.property)({
	type: String,
	attribute: "border-color"
})], LuksoTag.prototype, "borderColor", void 0);
require_decorate.__decorate([(0, lit_decorators_js.property)({
	type: String,
	attribute: "text-color"
})], LuksoTag.prototype, "textColor", void 0);
LuksoTag = require_decorate.__decorate([require_safe_custom_element.safeCustomElement("lukso-tag")], LuksoTag);
//#endregion
Object.defineProperty(exports, "LuksoTag", {
	enumerable: true,
	get: function() {
		return LuksoTag;
	}
});
