import { T as TailwindElement, x } from '../../chunks/index-5X9ujrWL.js';
import { n } from '../../chunks/property-DfumgIL6.js';
import { r } from '../../chunks/state-CaelFSbE.js';
import { c as ce } from '../../chunks/index-B9iart53.js';
import { s as safeCustomElement } from '../../chunks/safe-custom-element-qdGIR_v6.js';
import '../lukso-form-label/index.js';
import '../lukso-form-description/index.js';
import '../lukso-form-error/index.js';
import '../../tailwind-config.js';
import { c as cn } from '../../chunks/axe-DJKac19y.js';

var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __decorateClass = (decorators, target, key, kind) => {
  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
    if (decorator = decorators[i])
      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
  if (kind && result) __defProp(target, key, result);
  return result;
};
let LuksoRadio = class extends TailwindElement {
  constructor() {
    super(...arguments);
    this.name = "";
    this.id = "";
    this.value = "";
    this.size = "medium";
    this.label = "";
    this.description = "";
    this.error = "";
    this.checked = false;
    this.customClass = "";
    this.isReadonly = false;
    this.isDisabled = false;
    this.hasFocus = false;
    this.hasHighlight = false;
    this.radioStyles = ce({
      slots: {
        container: "flex items-center gap-2 select-none outline-none",
        radio: `
        relative bg-neutral-100 justify-center items-center flex
        border border-solid rounded-full border-neutral-35
        outline-none transition transition-all duration-150 appearance-none shrink-0
      `,
        indicator: "rounded-full absolute appearance-none transition duration-300 ease-in",
        content: "text-neutral-20 block",
        errorText: "paragraph-inter-12-regular text-red-65 pt-2"
      },
      variants: {
        size: {
          medium: {
            radio: "h-10 w-[40px]",
            indicator: "w-[26px] h-[26px]",
            content: "paragraph-inter-16-regular"
          },
          small: {
            radio: "h-[32px] w-[32px]",
            indicator: "w-[20px] h-[20px]",
            content: "paragraph-inter-16-regular"
          },
          "x-small": {
            radio: "h-7 w-[28px]",
            indicator: "w-[17px] h-[17px]",
            content: "paragraph-inter-12-semi-bold"
          }
        },
        hasError: {
          true: {
            radio: "border-red-65",
            content: "text-red-65"
          },
          false: {
            radio: "border-neutral-90"
          }
        },
        hasHighlight: {
          true: {
            radio: "border-neutral-35"
          }
        },
        isDisabled: {
          true: {
            radio: "border-neutral-90",
            content: "text-neutral-90",
            indicator: "bg-neutral-90",
            container: "cursor-not-allowed"
          },
          false: {
            indicator: "bg-green-54"
          }
        },
        isReadonly: {
          true: {
            container: "cursor-not-allowed"
          }
        },
        isChecked: {
          true: {},
          false: {}
        }
      },
      compoundVariants: [
        {
          hasHighlight: true,
          hasError: true,
          class: {
            radio: "border-red-65"
          }
        },
        {
          isDisabled: true,
          class: {
            container: "cursor-not-allowed"
          }
        }
      ]
    });
  }
  // Expose the focus method for programmatic focusing
  focus() {
    const radioElement = this.renderRoot.querySelector('[role="radio"]');
    if (radioElement instanceof HTMLElement) {
      radioElement.focus();
    }
  }
  checkedIndicatorTemplate() {
    const { indicator } = this.radioStyles({
      size: this.size,
      isDisabled: this.isDisabled,
      isChecked: this.checked
    });
    return x`
      <div class=${cn(indicator(), this.checked ? "" : "hidden")}></div>
    `;
  }
  radioTemplate() {
    const { radio } = this.radioStyles({
      size: this.size,
      hasError: !!this.error,
      hasHighlight: this.hasHighlight,
      isDisabled: this.isDisabled
    });
    return x`
      <div class=${cn(radio(), this.customClass)}>
        ${this.checkedIndicatorTemplate()}
      </div>
    `;
  }
  contentTemplate() {
    const { content } = this.radioStyles({
      size: this.size,
      hasError: !!this.error,
      isDisabled: this.isDisabled
    });
    return x`
      <div class=${content()}>
        <slot></slot>
      </div>
    `;
  }
  render() {
    const { container } = this.radioStyles({
      isDisabled: this.isDisabled,
      isReadonly: this.isReadonly
    });
    return x`
      <div>
        <lukso-form-label label=${this.label}></lukso-form-label>
        <lukso-form-description
          description=${this.description}
        ></lukso-form-description>
        <div
          class=${container()}
          @mouseenter=${this.handleMouseOver}
          @mouseleave=${this.handleMouseOut}
          @click=${!this.isDisabled && !this.isReadonly ? this.handleClick : void 0}
          @keydown=${this.handleKeydown}
          @focus=${this.handleFocus}
          @blur=${this.handleBlur}
          aria-checked=${this.checked}
          role="radio"
          tabindex=${!this.isDisabled && !this.isReadonly ? "0" : "-1"}
          aria-disabled=${this.isDisabled}
          aria-readonly=${this.isReadonly}
          aria-labelledby="${this.id || `radio-${this.value}`}"
          id="${this.id || `radio-${this.value}`}"
          part="radio"
        >
          ${this.radioTemplate()} ${this.contentTemplate()}
        </div>
        <lukso-form-error error=${this.error}></lukso-form-error>
      </div>
    `;
  }
  handleKeydown(event) {
    if (this.isDisabled || this.isReadonly) return;
    if (event.key === " " || event.key === "Enter") {
      event.preventDefault();
      this.handleClick(event);
    }
    if ([
      "ArrowUp",
      "ArrowDown",
      "ArrowLeft",
      "ArrowRight",
      "Home",
      "End"
    ].includes(event.key)) {
      const radioGroup = this.closest("lukso-radio-group");
      if (radioGroup) {
        return;
      }
    }
  }
  handleFocus() {
    this.hasFocus = true;
    this.hasHighlight = true;
  }
  handleBlur() {
    this.hasFocus = false;
    this.hasHighlight = false;
  }
  async handleClick(event) {
    if (this.isReadonly || this.isDisabled) return;
    this.checked = true;
    await this.updateComplete;
    this.dispatchEvent(
      new CustomEvent("on-change", {
        detail: {
          value: this.value,
          checked: true,
          event
        },
        bubbles: true,
        composed: true
      })
    );
  }
  handleMouseOver() {
    if (!this.isReadonly && !this.isDisabled) {
      this.hasHighlight = true;
    }
  }
  handleMouseOut() {
    if (!this.hasFocus) {
      this.hasHighlight = false;
    }
  }
};
__decorateClass([
  n({ type: String })
], LuksoRadio.prototype, "name", 2);
__decorateClass([
  n({ type: String })
], LuksoRadio.prototype, "id", 2);
__decorateClass([
  n({ type: String })
], LuksoRadio.prototype, "value", 2);
__decorateClass([
  n({ type: String })
], LuksoRadio.prototype, "size", 2);
__decorateClass([
  n({ type: String })
], LuksoRadio.prototype, "label", 2);
__decorateClass([
  n({ type: String })
], LuksoRadio.prototype, "description", 2);
__decorateClass([
  n({ type: String })
], LuksoRadio.prototype, "error", 2);
__decorateClass([
  n({ type: Boolean })
], LuksoRadio.prototype, "checked", 2);
__decorateClass([
  n({ type: String, attribute: "custom-class" })
], LuksoRadio.prototype, "customClass", 2);
__decorateClass([
  n({ type: Boolean, attribute: "is-readonly" })
], LuksoRadio.prototype, "isReadonly", 2);
__decorateClass([
  n({ type: Boolean, attribute: "is-disabled" })
], LuksoRadio.prototype, "isDisabled", 2);
__decorateClass([
  r()
], LuksoRadio.prototype, "hasFocus", 2);
__decorateClass([
  r()
], LuksoRadio.prototype, "hasHighlight", 2);
LuksoRadio = __decorateClass([
  safeCustomElement("lukso-radio")
], LuksoRadio);

export { LuksoRadio };
