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");
require("../../shared/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");
let _lukso_core = require("@lukso/core");
//#region src/components/lukso-modal/index.ts
var LuksoModal = class LuksoModal extends (0, _lukso_core.withTheme)(require_index.TailwindStyledElement(require_style.default)) {
	constructor(..._args) {
		super(..._args);
		this.isOpen = false;
		this.disableAnimations = false;
		this.size = "small";
		this.hasBottomPadding = false;
		this.styles = (0, tailwind_variants.tv)({
			slots: {
				wrapper: "opacity-0 fixed z-[1011] transition-opacity inset-0 w-screen h-screen overflow-y-auto overscroll-none scrolling-touch touch-pan-y isolate",
				inner: "min-h-screen flex items-center justify-center px-6 pt-6 w-full",
				overlay: "absolute inset-0 w-full h-full z-[1010]",
				dialog: "shadow-neutral-shadow-round-3xl z-[1012] mx-auto"
			},
			variants: {
				isOpen: {
					true: { wrapper: "opacity-100 visible w-[100vw] h-[100vh]" },
					false: { wrapper: "hidden" }
				},
				size: {
					small: { dialog: "w-[352px]" },
					medium: { dialog: "w-[849px]" },
					full: { dialog: "w-full" },
					auto: {}
				},
				disableAnimations: { false: {
					wrapper: "animation-duration-300 delay-300",
					overlay: "animation-duration-300"
				} },
				hasBottomPadding: {
					true: { inner: "pb-[120px]" },
					false: { inner: "pb-6" }
				}
			},
			compoundVariants: [{
				disableAnimations: false,
				isOpen: true,
				class: {
					wrapper: "animate-fade-in",
					overlay: "animate-fade-in"
				}
			}]
		});
	}
	close() {
		this.isOpen = false;
	}
	async handleBackdropClick() {
		await this.updateComplete;
		const clickEvent = new CustomEvent("on-backdrop-click", {
			bubbles: true,
			composed: true
		});
		this.dispatchEvent(clickEvent);
	}
	render() {
		const { wrapper, overlay, dialog, inner } = this.styles({
			isOpen: this.isOpen,
			size: this.size,
			disableAnimations: this.disableAnimations,
			hasBottomPadding: this.hasBottomPadding
		});
		return lit.html`
      <div data-testid="modal" class=${wrapper()}>
        <div class=${inner()}>
          <div class=${overlay()} @click=${this.handleBackdropClick}></div>
          <div
            class=${dialog()}
            style="background: var(--lukso-modal-resolved-bg); border-radius: var(--lukso-modal-border-radius, 12px);"
          >
            <slot></slot>
          </div>
        </div>
      </div>
    `;
	}
};
require_decorate.__decorate([(0, lit_decorators_js.property)({
	type: Boolean,
	attribute: "is-open"
})], LuksoModal.prototype, "isOpen", void 0);
require_decorate.__decorate([(0, lit_decorators_js.property)({
	type: Boolean,
	attribute: "disable-animations"
})], LuksoModal.prototype, "disableAnimations", void 0);
require_decorate.__decorate([(0, lit_decorators_js.property)({ type: String })], LuksoModal.prototype, "size", void 0);
require_decorate.__decorate([(0, lit_decorators_js.property)({
	type: Boolean,
	attribute: "has-bottom-padding"
})], LuksoModal.prototype, "hasBottomPadding", void 0);
LuksoModal = require_decorate.__decorate([require_safe_custom_element.safeCustomElement("lukso-modal")], LuksoModal);
//#endregion
Object.defineProperty(exports, "LuksoModal", {
	enumerable: true,
	get: function() {
		return LuksoModal;
	}
});
