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 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-dropdown-option/index.ts
var LuksoDropdownOption = class LuksoDropdownOption extends TailwindStyledElement(style_default) {
	constructor(..._args) {
		super(..._args);
		this.isReadonly = false;
		this.isDisabled = false;
		this.isSelected = false;
		this.isActive = false;
		this.isGroup = false;
		this.size = "large";
		this.styles = tv({
			base: `text-neutral-20 cursor-pointer select-none
      whitespace-nowrap flex items-center truncate gap-2`,
			variants: {
				isSelected: { true: "bg-neutral-95" },
				isActive: { true: "bg-neutral-98" },
				isGroup: { true: "" },
				size: {
					small: "paragraph-inter-12-regular rounded-4 px-2 min-h-7",
					medium: "paragraph-inter-14-regular rounded-8 px-3 min-h-[38px]",
					large: "paragraph-inter-14-regular rounded-8 px-3 min-h-[38px]",
					"x-large": ""
				},
				isDisabled: { true: "opacity-60 cursor-not-allowed" },
				isReadonly: {
					true: "cursor-not-allowed",
					false: "hover:bg-neutral-98"
				}
			},
			compoundVariants: [
				{
					isGroup: true,
					size: "small",
					class: "pl-3"
				},
				{
					isGroup: true,
					size: "medium",
					class: "pl-4"
				},
				{
					isGroup: true,
					size: "large",
					class: "pl-4"
				},
				{
					isReadonly: false,
					isSelected: true,
					class: "hover:bg-neutral-95"
				}
			]
		});
	}
	render() {
		return html`<div class="${this.styles({
			isSelected: this.isSelected,
			isActive: this.isActive,
			size: this.size,
			isGroup: this.isGroup,
			isDisabled: this.isDisabled,
			isReadonly: this.isReadonly
		})}">
      <slot></slot>
    </div>`;
	}
};
__decorate([property({
	type: Boolean,
	attribute: "is-readonly"
})], LuksoDropdownOption.prototype, "isReadonly", void 0);
__decorate([property({
	type: Boolean,
	attribute: "is-disabled"
})], LuksoDropdownOption.prototype, "isDisabled", void 0);
__decorate([property({
	type: Boolean,
	attribute: "is-selected"
})], LuksoDropdownOption.prototype, "isSelected", void 0);
__decorate([property({
	type: Boolean,
	attribute: "is-active"
})], LuksoDropdownOption.prototype, "isActive", void 0);
__decorate([property({
	type: Boolean,
	attribute: "is-group"
})], LuksoDropdownOption.prototype, "isGroup", void 0);
__decorate([property({ type: String })], LuksoDropdownOption.prototype, "size", void 0);
LuksoDropdownOption = __decorate([safeCustomElement("lukso-dropdown-option")], LuksoDropdownOption);
//#endregion
export { LuksoDropdownOption };
