import { safeCustomElement } from "../../shared/safe-custom-element.js";
import { TailwindElement } 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 { html } from "lit";
import { property } from "lit/decorators.js";
import { styleMap } from "lit-html/directives/style-map.js";
//#region src/components/lukso-progress/index.ts
var LuksoProgress = class LuksoProgress extends TailwindElement {
	constructor(..._args) {
		super(..._args);
		this.min = 0;
		this.max = 100;
		this.current = 0;
		this.variant = "success";
		this.height = 16;
	}
	progressWidth() {
		return this.current / this.max * 100;
	}
	render() {
		return html`
      <div
        data-testid="progress"
        style=${styleMap({ height: this.height > 16 ? `${this.height}px` : "16px" })}
        class=${cn("w-full rounded-24 bg-neutral-95 relative")}
      >
        <div
          style=${styleMap({ width: `${this.progressWidth()}%` })}
          class=${cn("rounded-s-24 h-full rounded-e-24  transition-all w-[1%]", {
			"bg-green-85": !!this.variant || this.variant === "success",
			"bg-red-85": this.variant === "error",
			"bg-yellow-85": this.variant === "warning"
		})}
        ></div>
        <div
          class=${cn("shadow-neutral-inner-shadow h-full absolute w-full top-0 rounded-24")}
        ></div>
      </div>
    `;
	}
};
__decorate([property({ type: Number })], LuksoProgress.prototype, "min", void 0);
__decorate([property({ type: Number })], LuksoProgress.prototype, "max", void 0);
__decorate([property({ type: Number })], LuksoProgress.prototype, "current", void 0);
__decorate([property({ type: String })], LuksoProgress.prototype, "variant", void 0);
__decorate([property({ type: Number })], LuksoProgress.prototype, "height", void 0);
LuksoProgress = __decorate([safeCustomElement("lukso-progress")], LuksoProgress);
//#endregion
export { LuksoProgress };
