import { e as g } from "./custom-element-eaccb8d2.mjs";
import { P as m, n as c } from "./plus-base-1920dd44.mjs";
import { t as v } from "./state-4d7d9621.mjs";
import { i as y } from "./query-48157d42.mjs";
import { l as x } from "./live-cd074699.mjs";
import { n as $ } from "./static-be5c3b1c.mjs";
import { s as k } from "./index-975d3293.mjs";
import "./directive-daf4e9b6.mjs";
const D = k({
  slots: {
    host: ["antialiased font-sans flex flex-col  items-start justify-start w-full relative"],
    base: ["flex flex-row items-center justify-start gap-2 group/base cursor-pointer text-color-default py-2 border border-transparent"],
    inputElement: ["radio sr-only"],
    radio: ["rounded-full bg-color-base border border-color-default"],
    radioDot: ["text-color-transparent transition-all ease-in-out scale-0 absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"]
  },
  variants: {
    checked: {
      true: {
        radioDot: ["scale-100 text-color-primary"],
        radio: ["border-color-primary"]
      }
    },
    focus: {
      true: {
        radio: "ring-2 ring-offset-2 z-[1] border-color-primary"
      },
      false: [""]
    },
    readonly: {
      true: {
        base: ["cursor-default"],
        radio: ["bg-color-base", "border-color-disabled"]
      }
    },
    disabled: {
      true: {
        base: ["cursor-not-allowed text-color-disabled"],
        radio: ["bg-color-disabled", "border-color-disabled"]
      }
    },
    error: {
      true: {
        radioDot: [" text-color-error"],
        radio: ["border-color-error"]
      }
    },
    size: {
      sm: {
        host: ["text-sm gap-1.5"],
        radio: ["w-4 h-4"],
        radioDot: ["text-[8px] leading-[8px]"]
      },
      md: {
        host: ["text-base gap-2"],
        radio: ["w-4.5 h-4.5"],
        radioDot: ["text-[10px] leading-[10px]"]
      },
      lg: {
        host: ["text-lg gap-2.5"],
        radio: ["w-5 h-5"],
        radioDot: ["text-[12px] leading-[12px]"]
      }
    }
  },
  compoundVariants: [
    {
      disabled: !1,
      readonly: !1,
      checked: !1,
      class: {
        radio: ["group-hover/base:bg-color-base-hover", "group-active/base:bg-color-base-pressed"]
      }
    },
    {
      disabled: !1,
      readonly: !1,
      checked: !1,
      error: !0,
      class: {
        radio: ["group-hover/base:bg-color-invert-error-hover", "group-active/base:bg-color-invert-error-pressed"]
      }
    },
    {
      disabled: !1,
      readonly: !1,
      checked: !0,
      class: {
        radio: ["group-hover/base:bg-color-invert-primary-hover", "group-active/base:bg-color-invert-primary-pressed"]
      }
    },
    {
      disabled: !1,
      readonly: !1,
      checked: !0,
      error: !0,
      class: {
        radio: ["border-color-error bg-color-invert-error group-hover/base:bg-color-invert-error-hover", "group-active/base:bg-color-invert-error-pressed"]
      }
    },
    {
      readonly: !0,
      checked: !0,
      class: {
        radio: [],
        radioDot: ["text-color-default"]
      }
    },
    {
      disabled: !0,
      checked: !0,
      class: {
        radio: [],
        radioDot: ["text-color-disabled"]
      }
    }
  ],
  defaultVariants: {
    disabled: !1,
    readonly: !1,
    checked: !1,
    size: "md",
    error: !1
  }
});
var w = Object.defineProperty, F = Object.getOwnPropertyDescriptor, a = (o, t, s, l) => {
  for (var e = l > 1 ? void 0 : l ? F(t, s) : t, i = o.length - 1, d; i >= 0; i--)
    (d = o[i]) && (e = (l ? d(t, s, e) : d(e)) || e);
  return l && e && w(t, s, e), e;
};
let r = class extends m {
  constructor() {
    super(...arguments), this.size = "md", this.checked = !1, this.error = !1, this.hasFocus = !1;
  }
  handleClick() {
    this.checked = !this.checked, this.emit("plus-change");
  }
  handleFocus() {
    this.hasFocus = !0, this.emit("plus-focus");
  }
  handleBlur() {
    this.hasFocus = !1, this.emit("plus-blur");
  }
  render() {
    const { disabled: o, readonly: t, checked: s, text: l, title: e, id: i, size: d, error: n } = this, { base: p, inputElement: u, radio: b, radioDot: h, host: f } = D({ disabled: o, readonly: t, checked: s, size: d, focus: this.hasFocus, error: n });
    return $`
      <div class=${f()}>
        <input
          id=${i}
          class=${u()}
          type="radio"
          title=${e}
          .checked=${x(s)}
          .disabled=${o || t}
          role="radio"
          aria-checked=${s ? "true" : "false"}
          @blur=${this.handleBlur}
          @focus=${this.handleFocus}
          @click=${this.handleClick}
        />
        <label for=${i} class=${p()}>
          <div class="relative">
            <div class=${b()}>
              <i class=${h() + " fa-solid fa-circle"}></i>
            </div>
          </div>
          <slot>${l}</slot>
        </label>
      </div>
    `;
  }
};
a([
  y(".radio")
], r.prototype, "radio", 2);
a([
  c({ type: String })
], r.prototype, "size", 2);
a([
  c({ type: String })
], r.prototype, "text", 2);
a([
  c({ type: Boolean, reflect: !0 })
], r.prototype, "checked", 2);
a([
  c({ type: Boolean, converter: (o) => o != "false" })
], r.prototype, "error", 2);
a([
  v()
], r.prototype, "hasFocus", 2);
r = a([
  g("plus-radio")
], r);
export {
  r as RadioComponent
};
