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 { cn } from "../../shared/tools/cn.js";
import "../../shared/tools/index.js";
import "../../shared/index.js";
import style_default from "./style.css?inline.js";
import { html, nothing } from "lit";
import { property, state } from "lit/decorators.js";
import { tv } from "tailwind-variants";
import { withTheme } from "@lukso/core";
//#region src/components/lukso-button/index.ts
var LONG_PRESS_ANIMATION_DURATION_IN_MS = 2e3;
var LuksoButton = class LuksoButton extends withTheme(TailwindStyledElement(style_default)) {
	constructor(..._args) {
		super(..._args);
		this.variant = "primary";
		this.size = "large";
		this.disabled = false;
		this.isFullWidth = false;
		this.isLongPress = false;
		this.isLink = false;
		this.isLoading = false;
		this.type = "button";
		this.href = "";
		this.target = "_blank";
		this.rel = "";
		this.loadingText = "";
		this.customClass = "";
		this.isActive = false;
		this.count = "";
		this.isIcon = false;
		this.label = "";
		this.isPressed = false;
		this.noTransition = false;
		this.timer = 0;
		this.counterStyles = tv({
			base: "ml-2 border border-neutral-20 rounded-4 px-[2px] py-[1px] paragraph-inter-10-semi-bold text-neutral-20 bg-neutral-100",
			variants: { isActive: { true: "text-neutral-100 bg-neutral-20" } }
		});
		this.buttonStyles = tv({
			base: `flex justify-center items-center relative text-center
      border border-solid cursor-pointer transition
      duration-250 active:scale-98 active:duration-25
      disabled:shadow-none disabled:cursor-not-allowed disabled:scale-100 disabled:opacity-50`,
			variants: {
				color: {
					primary: `bg-neutral-20 border-neutral-20 text-neutral-100
            disabled:hover:!bg-neutral-20 disabled:hover:!border-neutral-20
            hover:bg-neutral-25 hover:border-neutral-25
            active:bg-neutral-25 active:border-neutral-25 before:bg-neutral-10`,
					secondary: "bg-neutral-100 border-neutral-90 text-neutral-20 dark:border-neutral-20 dark:bg-neutral-20 dark:text-neutral-100",
					landing: `bg-purple-51 border-purple-51 text-neutral-100
            disabled:hover:!bg-purple-51 disabled:hover:!border-purple-51
            hover:bg-purple-58 hover:border-purple-58 before:bg-purple-51`,
					text: `bg-transparent border-none text-neutral-20
            hover:text-neutral-35
            active:text-neutral-35 active:scale-100
            disabled:text-neutral-90`,
					link: "bg-transparent border-none active:!scale-100 underline text-purple-51 hover:text-purple-41",
					"nav-button": "nav-inter-12-medium-uppercase text-purple-41 !text-12",
					"nav-text": "bg-transparent border-none nav-inter-12-medium-uppercase text-purple-63 hover:text-purple-41 !text-12 transition",
					success: `bg-green-54 border-green-54 text-neutral-100
            disabled:hover:!bg-green-54 disabled:hover:!border-green-54
            hover:bg-green-63 hover:border-green-63 before:bg-green-54`,
					danger: `bg-red-55 border-red-55 text-neutral-100
          disabled:hover:!bg-red-55 disabled:hover:!border-red-55
          hover:bg-red-65 hover:border-red-65 before:bg-red-55`,
					warning: `bg-yellow-55 border-yellow-55 text-neutral-100
          disabled:hover:!bg-yellow-55 disabled:hover:!border-yellow-55
          hover:bg-yellow-65 hover:border-yellow-65 before:bg-yellow-55`
				},
				size: {
					small: "h-7 px-3 paragraph-inter-12-medium rounded-8",
					medium: "h-10 px-4 paragraph-inter-14-semi-bold rounded-10",
					large: "h-12 px-6 paragraph-inter-16-semi-bold rounded-12",
					"x-large": "h-17 px-8 paragraph-inter-20-semi-bold rounded-[14px]"
				},
				isLongPress: { true: `relative overflow-hidden z-[1] active:outline-0
          before:absolute before:content-[''] before:top-0 before:left-0 before:w-0 before:h-12
          before:transition-all before:duration-[2000ms] before:z-[-1] before:rounded-0` },
				isFullWidth: { true: "w-full" },
				isPressed: { true: "before:w-full before:z-[-1]" },
				noTransition: { true: "before:transition-none" },
				isActive: { true: "border-neutral-20" },
				isIcon: { true: "" }
			},
			compoundVariants: [
				{
					isActive: true,
					color: "nav-text",
					class: "text-purple-41"
				},
				{
					size: [
						"medium",
						"small",
						"large",
						"x-large"
					],
					color: "link",
					class: "p-0 h-[initial]"
				},
				{
					size: [
						"medium",
						"large",
						"x-large"
					],
					color: [
						"primary",
						"landing",
						"success",
						"danger",
						"warning"
					],
					class: "hover:shadow-button-medium-hover-primary active:shadow-button-medium-press-primary"
				},
				{
					size: [
						"medium",
						"large",
						"x-large"
					],
					color: ["secondary"],
					class: "hover:shadow-button-medium-hover-secondary active:shadow-button-medium-press-secondary"
				},
				{
					size: ["small"],
					color: [
						"primary",
						"landing",
						"success",
						"danger",
						"warning"
					],
					class: "hover:shadow-button-small-hover-primary active:shadow-button-small-press-primary"
				},
				{
					size: ["small"],
					color: ["secondary"],
					class: "hover:shadow-button-small-hover-secondary active:shadow-button-small-press-secondary"
				},
				{
					isIcon: true,
					size: ["small"],
					class: "px-0 w-7"
				},
				{
					isIcon: true,
					size: ["medium"],
					class: "px-0 w-10"
				},
				{
					isIcon: true,
					size: ["large"],
					class: "px-0 w-12"
				},
				{
					isIcon: true,
					size: ["x-large"],
					class: "px-0 w-17"
				}
			]
		});
		this.loadingStyles = tv({
			slots: {
				icon: "animate-spin",
				text: ""
			},
			variants: { size: {
				small: { text: "ml-1" },
				medium: { text: "ml-[6px]" },
				large: { text: "ml-2" },
				"x-large": { text: "ml-2" }
			} }
		});
	}
	handleMouseDown() {
		if (this.variant !== "primary" && this.variant !== "landing" && this.isLongPress) return console.warn("Long press is only available for primary and landing variants");
		if (!this.isLongPress) return;
		this.isPressed = true;
		this.timer = window.setTimeout(() => {
			const event = new CustomEvent("on-long-press-complete", {
				bubbles: true,
				composed: true
			});
			this.dispatchEvent(event);
		}, LONG_PRESS_ANIMATION_DURATION_IN_MS);
	}
	handleMouseUp() {
		if (!this.isLongPress) return;
		this.isPressed = false;
		this.noTransition = true;
		setTimeout(() => {
			this.noTransition = false;
		}, 100);
		if (this.timer) {
			clearTimeout(this.timer);
			this.timer = 0;
		}
	}
	loadingTemplate() {
		const { icon, text } = this.loadingStyles({ size: this.size });
		return html`<lukso-icon
        name="spinner"
        size=${this.size}
        color=${!this.isDark && (this.variant === "secondary" || this.variant === "text") ? "neutral-20" : "neutral-100"}
        class=${icon()}
      ></lukso-icon>
      ${this.loadingText ? html`<span class=${text()}>${this.loadingText}</span>` : nothing}`;
	}
	counterTemplate() {
		return html` <span class=${this.counterStyles({ isActive: this.isActive })}>${this.count}</span> `;
	}
	buttonTemplate() {
		const buttonStyles = this.buttonStyles({
			size: this.size,
			color: this.variant,
			isLongPress: this.isLongPress,
			isFullWidth: this.isFullWidth,
			isPressed: this.isPressed,
			isActive: this.isActive,
			isIcon: this.isIcon
		});
		return html`
      <button
        data-testid="button"
        ?disabled=${this.disabled || this.isLoading}
        type=${this.type}
        class=${cn(buttonStyles, this.customClass)}
        aria-label=${this.label}
        @mousedown=${this.handleMouseDown}
        @touchstart=${this.handleMouseDown}
        @touchend=${this.handleMouseUp}
        @touchcancel=${this.handleMouseUp}
        @mouseup=${this.handleMouseUp}
        @mouseleave=${this.handleMouseUp}
      >
        ${this.isLoading ? this.loadingTemplate() : html`<slot></slot>`}
        ${this.count ? this.counterTemplate() : nothing}
      </button>
    `;
	}
	linkTemplate() {
		return html`
      <a
        data-testid="link"
        class=${cn(this.buttonStyles({
			size: this.size,
			color: this.variant,
			isLongPress: this.isLongPress,
			isFullWidth: this.isFullWidth,
			isPressed: this.isPressed,
			isIcon: this.isIcon
		}), this.customClass)}
        href=${this.href}
        target=${this.target}
        rel=${this.rel}
        aria-label=${this.label}
      >
        <slot></slot>
      </a>
    `;
	}
	render() {
		return html` ${this.isLink ? this.linkTemplate() : this.buttonTemplate()} `;
	}
};
__decorate([property({ type: String })], LuksoButton.prototype, "variant", void 0);
__decorate([property({ type: String })], LuksoButton.prototype, "size", void 0);
__decorate([property({ type: Boolean })], LuksoButton.prototype, "disabled", void 0);
__decorate([property({
	type: Boolean,
	attribute: "is-full-width"
})], LuksoButton.prototype, "isFullWidth", void 0);
__decorate([property({
	type: Boolean,
	attribute: "is-long-press"
})], LuksoButton.prototype, "isLongPress", void 0);
__decorate([property({
	type: Boolean,
	attribute: "is-link"
})], LuksoButton.prototype, "isLink", void 0);
__decorate([property({
	type: Boolean,
	attribute: "is-loading"
})], LuksoButton.prototype, "isLoading", void 0);
__decorate([property({ type: String })], LuksoButton.prototype, "type", void 0);
__decorate([property({ type: String })], LuksoButton.prototype, "href", void 0);
__decorate([property({ type: String })], LuksoButton.prototype, "target", void 0);
__decorate([property({ type: String })], LuksoButton.prototype, "rel", void 0);
__decorate([property({
	type: String,
	attribute: "loading-text"
})], LuksoButton.prototype, "loadingText", void 0);
__decorate([property({
	type: String,
	attribute: "custom-class"
})], LuksoButton.prototype, "customClass", void 0);
__decorate([property({
	type: Boolean,
	attribute: "is-active"
})], LuksoButton.prototype, "isActive", void 0);
__decorate([property({ type: Number })], LuksoButton.prototype, "count", void 0);
__decorate([property({
	type: Boolean,
	attribute: "is-icon"
})], LuksoButton.prototype, "isIcon", void 0);
__decorate([property({ type: String })], LuksoButton.prototype, "label", void 0);
__decorate([state()], LuksoButton.prototype, "isPressed", void 0);
__decorate([state()], LuksoButton.prototype, "noTransition", void 0);
__decorate([state()], LuksoButton.prototype, "timer", void 0);
LuksoButton = __decorate([safeCustomElement("lukso-button")], LuksoButton);
//#endregion
export { LuksoButton };
