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 "../lukso-icon/index.js";
import "../lukso-sanitize/index.js";
import style_default from "./style.css?inline.js";
import { html, nothing } from "lit";
import { property } from "lit/decorators.js";
import { tv } from "tailwind-variants";
//#region src/components/lukso-alert/index.ts
var LuksoAlert = class LuksoAlert extends TailwindStyledElement(style_default) {
	constructor(..._args) {
		super(..._args);
		this.variant = "info";
		this.size = "medium";
		this.hasIcon = false;
		this.title = "";
		this.description = "";
		this.isFullWidth = false;
		this.styles = tv({
			slots: {
				container: "flex items-center",
				title: "",
				description: ""
			},
			variants: {
				variant: {
					info: { container: "bg-blue-95 text-blue-40" },
					warning: { container: "bg-honey-92 text-yellow-25" },
					error: { container: "bg-red-95 text-red-55" },
					success: { container: "bg-green-95 text-green-45" }
				},
				size: {
					medium: {
						container: "p-4 gap-3 rounded-8",
						title: "paragraph-inter-14-semi-bold",
						description: "paragraph-inter-12-regular"
					},
					large: {
						container: "p-5 gap-4 rounded-10",
						title: "paragraph-inter-16-semi-bold",
						description: "paragraph-inter-14-regular"
					}
				},
				isFullWidth: { true: { container: "w-full" } }
			}
		});
	}
	get icon() {
		switch (this.variant) {
			case "warning": return {
				name: "info-circle",
				color: "yellow-25"
			};
			case "error": return {
				name: "danger",
				color: "red-55"
			};
			case "success": return {
				name: "tick-circle",
				color: "green-45"
			};
			default: return {
				name: "info-circle",
				color: "blue-40"
			};
		}
	}
	render() {
		const { container, title, description } = this.styles({
			variant: this.variant,
			size: this.size,
			isFullWidth: this.isFullWidth
		});
		return html`
      <div class=${container()}>
        ${this.hasIcon ? html`<lukso-icon
              pack="vuesax"
              name="${this.icon.name}"
              color="${this.icon.color}"
            ></lukso-icon>` : nothing}
        <div class="flex flex-col gap-1">
          ${this.title ? html`<div class=${title()}>${this.title}</div>` : nothing}
          ${this.description ? html`<lukso-sanitize
                class=${description()}
                html-content="${this.description}"
              ></lukso-sanitize>` : nothing}
        </div>
      </div>
    `;
	}
};
__decorate([property({ type: String })], LuksoAlert.prototype, "variant", void 0);
__decorate([property({ type: String })], LuksoAlert.prototype, "size", void 0);
__decorate([property({
	type: Boolean,
	attribute: "has-icon",
	reflect: true
})], LuksoAlert.prototype, "hasIcon", void 0);
__decorate([property({ type: String })], LuksoAlert.prototype, "title", void 0);
__decorate([property({ type: String })], LuksoAlert.prototype, "description", void 0);
__decorate([property({
	type: Boolean,
	attribute: "is-full-width",
	reflect: true
})], LuksoAlert.prototype, "isFullWidth", void 0);
LuksoAlert = __decorate([safeCustomElement("lukso-alert")], LuksoAlert);
//#endregion
export { LuksoAlert };
