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("../lukso-sanitize/index.cjs");
require("../lukso-form-description/index.cjs");
require("../lukso-form-error/index.cjs");
require("../lukso-form-label/index.cjs");
const require_uniq_id = require("../../shared/tools/uniq-id.cjs");
let lit = require("lit");
let lit_decorators_js = require("lit/decorators.js");
let tailwind_variants = require("tailwind-variants");
let lit_directives_style_map_js = require("lit/directives/style-map.js");
//#region src/components/lukso-switch/index.ts
var DEFAULT_COLOR = "green-54";
var LuksoSwitch = class LuksoSwitch extends require_index.TailwindElement {
	async handleChange(event) {
		const target = event.target;
		await this.updateComplete;
		const changeEvent = new CustomEvent("on-change", {
			detail: {
				value: target.checked,
				event
			},
			bubbles: false,
			composed: true
		});
		this.dispatchEvent(changeEvent);
	}
	constructor() {
		super();
		this.color = DEFAULT_COLOR;
		this.id = "";
		this.name = "switch";
		this.label = "";
		this.description = "";
		this.error = "";
		this.isChecked = false;
		this.isDisabled = false;
		this.styles = (0, tailwind_variants.tv)({
			slots: {
				label: "transition duration-300 ease-in block h-6 overflow-hidden rounded-full relative inline-block w-10",
				input: "absolute block w-6 h-6 rounded-full bg-white border-2 appearance-none transition duration-300 ease-in"
			},
			variants: {
				isChecked: {
					true: { input: "translate-x-4" },
					false: {
						label: "bg-neutral-90",
						input: "border-neutral-90"
					}
				},
				isDisabled: {
					true: {
						label: "opacity-70 cursor-not-allowed",
						input: "cursor-not-allowed"
					},
					false: {
						label: "cursor-pointer",
						input: "cursor-pointer"
					}
				},
				hasError: { true: {
					label: "!bg-red-65",
					input: "!border-red-65"
				} }
			}
		});
		if (!this.id) this.id = `switch-${require_uniq_id.uniqId()}`;
	}
	render() {
		const { label, input } = this.styles({
			isChecked: this.isChecked,
			isDisabled: this.isDisabled,
			hasError: !!this.error
		});
		if (!this.color) this.color = DEFAULT_COLOR;
		return lit.html`
      <div>
        <lukso-form-label
          for-name=${this.name}
          label=${this.label}
        ></lukso-form-label>
        <lukso-form-description
          description=${this.description}
        ></lukso-form-description>
        <label for=${this.id} class="w-[inherit]">
          <div class="flex">
            <div
              class=${label()}
              style=${(0, lit_directives_style_map_js.styleMap)({ backgroundColor: `var(--${this.isChecked ? this.color : "neutral-90"})` })}
            >
              <input
                type="checkbox"
                id=${this.id}
                name=${this.name}
                ?checked=${this.isChecked}
                ?disabled=${this.isDisabled}
                class=${input()}
                style=${(0, lit_directives_style_map_js.styleMap)({ borderColor: `var(--${this.isChecked ? this.color : "neutral-90"})` })}
                @change=${this.handleChange}
              />
            </div>
          </div>
        </label>
        <lukso-form-error error=${this.error}></lukso-form-error>
      </div>
    `;
	}
};
require_decorate.__decorate([(0, lit_decorators_js.property)({ type: String })], LuksoSwitch.prototype, "color", void 0);
require_decorate.__decorate([(0, lit_decorators_js.property)({ type: String })], LuksoSwitch.prototype, "id", void 0);
require_decorate.__decorate([(0, lit_decorators_js.property)({ type: String })], LuksoSwitch.prototype, "name", void 0);
require_decorate.__decorate([(0, lit_decorators_js.property)({ type: String })], LuksoSwitch.prototype, "label", void 0);
require_decorate.__decorate([(0, lit_decorators_js.property)({ type: String })], LuksoSwitch.prototype, "description", void 0);
require_decorate.__decorate([(0, lit_decorators_js.property)({ type: String })], LuksoSwitch.prototype, "error", void 0);
require_decorate.__decorate([(0, lit_decorators_js.property)({
	type: Boolean,
	attribute: "is-checked"
})], LuksoSwitch.prototype, "isChecked", void 0);
require_decorate.__decorate([(0, lit_decorators_js.property)({
	type: Boolean,
	attribute: "is-disabled"
})], LuksoSwitch.prototype, "isDisabled", void 0);
LuksoSwitch = require_decorate.__decorate([require_safe_custom_element.safeCustomElement("lukso-switch")], LuksoSwitch);
//#endregion
Object.defineProperty(exports, "LuksoSwitch", {
	enumerable: true,
	get: function() {
		return LuksoSwitch;
	}
});
