import { jsx as i, jsxs as I, Fragment as x } from "react/jsx-runtime";
import { c as g, a as J } from "../index-BmAFn37q.mjs";
import * as R from "react";
import { createContext as Q, useContext as Z, useId as E, useMemo as ee } from "react";
import { useFormFieldControl as _ } from "../form-field/index.mjs";
import { makeVariants as S } from "@spark-ui/internal-utils";
import { u as re, c as G } from "../index-DlIFg0Eu.mjs";
import { u as w } from "../index-DhGWNzsz.mjs";
import { c as A } from "../index-DFZozV_h.mjs";
import { P as y } from "../index-MSR-vgWR.mjs";
import { c as D, R as oe, I as te } from "../index-DWlg8lkk.mjs";
import { u as ae } from "../index-BlkdpEIe.mjs";
import { u as ne } from "../index-C1qb0595.mjs";
import { u as ie } from "../index-BZPx6jYI.mjs";
import { P as se } from "../index-BZAtNKwE.mjs";
import { R as de } from "../index-C34GgsKQ.mjs";
var C = "Radio", [ce, F] = A(C), [ue, le] = ce(C), L = R.forwardRef(
  (e, t) => {
    const {
      __scopeRadio: r,
      name: a,
      checked: o = !1,
      required: n,
      disabled: s,
      value: u = "on",
      onCheck: p,
      form: f,
      ...m
    } = e, [c, b] = R.useState(null), d = w(t, (h) => b(h)), l = R.useRef(!1), v = c ? f || !!c.closest("form") : !0;
    return /* @__PURE__ */ I(ue, { scope: r, checked: o, disabled: s, children: [
      /* @__PURE__ */ i(
        y.button,
        {
          type: "button",
          role: "radio",
          "aria-checked": o,
          "data-state": O(o),
          "data-disabled": s ? "" : void 0,
          disabled: s,
          value: u,
          ...m,
          ref: d,
          onClick: G(e.onClick, (h) => {
            o || p?.(), v && (l.current = h.isPropagationStopped(), l.current || h.stopPropagation());
          })
        }
      ),
      v && /* @__PURE__ */ i(
        $,
        {
          control: c,
          bubbles: !l.current,
          name: a,
          value: u,
          checked: o,
          required: n,
          disabled: s,
          form: f,
          style: { transform: "translateX(-100%)" }
        }
      )
    ] });
  }
);
L.displayName = C;
var M = "RadioIndicator", V = R.forwardRef(
  (e, t) => {
    const { __scopeRadio: r, forceMount: a, ...o } = e, n = le(M, r);
    return /* @__PURE__ */ i(se, { present: a || n.checked, children: /* @__PURE__ */ i(
      y.span,
      {
        "data-state": O(n.checked),
        "data-disabled": n.disabled ? "" : void 0,
        ...o,
        ref: t
      }
    ) });
  }
);
V.displayName = M;
var pe = "RadioBubbleInput", $ = R.forwardRef(
  ({
    __scopeRadio: e,
    control: t,
    checked: r,
    bubbles: a = !0,
    ...o
  }, n) => {
    const s = R.useRef(null), u = w(s, n), p = ie(r), f = ne(t);
    return R.useEffect(() => {
      const m = s.current;
      if (!m) return;
      const c = window.HTMLInputElement.prototype, d = Object.getOwnPropertyDescriptor(
        c,
        "checked"
      ).set;
      if (p !== r && d) {
        const l = new Event("click", { bubbles: a });
        d.call(m, r), m.dispatchEvent(l);
      }
    }, [p, r, a]), /* @__PURE__ */ i(
      y.input,
      {
        type: "radio",
        "aria-hidden": !0,
        defaultChecked: r,
        ...o,
        tabIndex: -1,
        ref: u,
        style: {
          ...o.style,
          ...f,
          position: "absolute",
          pointerEvents: "none",
          opacity: 0,
          margin: 0
        }
      }
    );
  }
);
$.displayName = pe;
function O(e) {
  return e ? "checked" : "unchecked";
}
var fe = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"], k = "RadioGroup", [me] = A(k, [
  D,
  F
]), q = D(), z = F(), [be, Re] = me(k), B = R.forwardRef(
  (e, t) => {
    const {
      __scopeRadioGroup: r,
      name: a,
      defaultValue: o,
      value: n,
      required: s = !1,
      disabled: u = !1,
      orientation: p,
      dir: f,
      loop: m = !0,
      onValueChange: c,
      ...b
    } = e, d = q(r), l = ae(f), [v, h] = re({
      prop: n,
      defaultProp: o ?? null,
      onChange: c,
      caller: k
    });
    return /* @__PURE__ */ i(
      be,
      {
        scope: r,
        name: a,
        required: s,
        disabled: u,
        value: v,
        onValueChange: h,
        children: /* @__PURE__ */ i(
          oe,
          {
            asChild: !0,
            ...d,
            orientation: p,
            dir: l,
            loop: m,
            children: /* @__PURE__ */ i(
              y.div,
              {
                role: "radiogroup",
                "aria-required": s,
                "aria-orientation": p,
                "data-disabled": u ? "" : void 0,
                dir: l,
                ...b,
                ref: t
              }
            )
          }
        )
      }
    );
  }
);
B.displayName = k;
var j = "RadioGroupItem", K = R.forwardRef(
  (e, t) => {
    const { __scopeRadioGroup: r, disabled: a, ...o } = e, n = Re(j, r), s = n.disabled || a, u = q(r), p = z(r), f = R.useRef(null), m = w(t, f), c = n.value === o.value, b = R.useRef(!1);
    return R.useEffect(() => {
      const d = (v) => {
        fe.includes(v.key) && (b.current = !0);
      }, l = () => b.current = !1;
      return document.addEventListener("keydown", d), document.addEventListener("keyup", l), () => {
        document.removeEventListener("keydown", d), document.removeEventListener("keyup", l);
      };
    }, []), /* @__PURE__ */ i(
      te,
      {
        asChild: !0,
        ...u,
        focusable: !s,
        active: c,
        children: /* @__PURE__ */ i(
          L,
          {
            disabled: s,
            required: n.required,
            checked: c,
            ...p,
            ...o,
            name: n.name,
            ref: m,
            onCheck: () => n.onValueChange(o.value),
            onKeyDown: G((d) => {
              d.key === "Enter" && d.preventDefault();
            }),
            onFocus: G(o.onFocus, () => {
              b.current && f.current?.click();
            })
          }
        )
      }
    );
  }
);
K.displayName = j;
var ve = "RadioGroupIndicator", T = R.forwardRef(
  (e, t) => {
    const { __scopeRadioGroup: r, ...a } = e, o = z(r);
    return /* @__PURE__ */ i(V, { ...o, ...a, ref: t });
  }
);
T.displayName = ve;
var he = T;
const U = Q(null), ge = () => {
  const e = Z(U);
  if (!e)
    throw Error("useRadioGroup must be used within a RadioGroup provider");
  return e;
}, ye = g(
  [
    "relative block",
    "size-3/5",
    "after:absolute",
    "after:left-1/2 after:top-1/2 after:-translate-x-1/2 after:-translate-y-1/2",
    "after:h-0",
    "after:w-0",
    "after:block",
    "after:rounded-[50%]",
    "after:content-['']",
    "after:transition-all",
    "data-[state=checked]:after:size-full"
  ],
  {
    variants: {
      intent: S({
        main: ["after:bg-main"],
        support: ["after:bg-support"],
        accent: ["after:bg-accent"],
        basic: ["after:bg-basic"],
        neutral: ["after:bg-neutral"],
        success: ["after:bg-success"],
        alert: ["after:bg-alert"],
        error: ["after:bg-error"],
        info: ["after:bg-info"]
      })
    },
    defaultVariants: {
      intent: "basic"
    }
  }
), H = ({ intent: e, className: t, ref: r, ...a }) => /* @__PURE__ */ i(
  he,
  {
    ref: r,
    className: ye({ intent: e, className: t }),
    ...a
  }
);
H.displayName = "RadioGroup.RadioIndicator";
const ke = g(
  [
    "flex shrink-0 items-center justify-center",
    "rounded-full",
    "border-md",
    "outline-hidden",
    "hover:ring-4",
    "focus-visible:u-outline",
    "disabled:cursor-not-allowed disabled:border-outline/dim-2 disabled:hover:ring-transparent",
    "u-shadow-border-transition",
    "size-sz-24"
  ],
  {
    variants: {
      /**
       * Color scheme of the radio input.
       */
      intent: S({
        main: ["border-outline", "data-[state=checked]:border-main", "hover:ring-main-container"],
        support: [
          "border-outline",
          "data-[state=checked]:border-support",
          "hover:ring-support-container"
        ],
        accent: [
          "border-outline",
          "data-[state=checked]:border-accent",
          "hover:ring-accent-container"
        ],
        basic: [
          "border-outline",
          "data-[state=checked]:border-basic",
          "hover:ring-basic-container"
        ],
        neutral: [
          "border-outline",
          "data-[state=checked]:border-neutral",
          "hover:ring-neutral-container"
        ],
        info: ["border-info", "data-[state=checked]:border-info", "hover:ring-info-container"],
        success: [
          "border-success",
          "data-[state=checked]:border-success",
          "hover:ring-success-container"
        ],
        alert: ["border-alert", "data-[state=checked]:border-alert", "hover:ring-alert-container"],
        error: ["border-error", "data-[state=checked]:border-error", "hover:ring-error-container"]
      })
    },
    defaultVariants: {
      intent: "basic"
    }
  }
), X = ({ intent: e, className: t, ref: r, ...a }) => {
  const { state: o } = _(), n = o ?? e;
  return /* @__PURE__ */ i(
    K,
    {
      "data-spark-component": "radio-input",
      ref: r,
      className: ke({ intent: n, className: t }),
      ...a,
      children: /* @__PURE__ */ i(H, { intent: n, forceMount: !0 })
    }
  );
};
X.displayName = "RadioGroup.RadioInput";
const Ie = g("grow", {
  variants: {
    disabled: {
      true: ["text-neutral/dim-2", "cursor-not-allowed"],
      false: ["cursor-pointer"]
    }
  },
  defaultVariants: {
    disabled: !1
  }
}), W = ({ disabled: e, ...t }) => /* @__PURE__ */ i(
  de,
  {
    "data-spark-component": "radio-label",
    className: Ie({ disabled: e }),
    ...t
  }
);
W.displayName = "RadioGroup.RadioLabel";
const P = ":radio", N = ({
  className: e,
  children: t,
  id: r,
  disabled: a,
  ref: o,
  ...n
}) => {
  const s = `${P}-input-${E()}`, u = `${P}-label-${E()}`, { intent: p, disabled: f, reverse: m } = ge(), c = t && /* @__PURE__ */ i(W, { disabled: a || f, htmlFor: r || s, id: u, children: t }), b = /* @__PURE__ */ i(
    X,
    {
      ref: o,
      id: r || s,
      intent: p,
      "aria-labelledby": t ? u : void 0,
      ...n,
      disabled: a
    }
  ), d = m ? /* @__PURE__ */ I(x, { children: [
    c,
    b
  ] }) : /* @__PURE__ */ I(x, { children: [
    b,
    c
  ] });
  return /* @__PURE__ */ i("div", { className: J("gap-md text-body-1 flex items-start", e), children: d });
};
N.displayName = "RadioGroup.Radio";
const Ge = g(["flex"], {
  variants: {
    orientation: {
      vertical: ["flex-col", "gap-lg"],
      horizontal: ["flex-row", "gap-xl"]
    }
  }
}), we = ({
  intent: e,
  disabled: t,
  reverse: r,
  children: a
}) => {
  const o = ee(() => ({ intent: e, disabled: t, reverse: r }), [e, t, r]);
  return /* @__PURE__ */ i(U.Provider, { value: o, children: a });
}, Y = ({
  orientation: e = "vertical",
  loop: t = !0,
  intent: r = "basic",
  disabled: a,
  className: o,
  required: n,
  reverse: s = !1,
  ref: u,
  ...p
}) => {
  const { labelId: f, isInvalid: m, isRequired: c, description: b, name: d } = _(), l = n !== void 0 ? n : c;
  return /* @__PURE__ */ i(we, { reverse: s, intent: r, disabled: a, children: /* @__PURE__ */ i(
    B,
    {
      "data-spark-component": "radio-group",
      className: Ge({ orientation: e, className: o }),
      name: d,
      ref: u,
      disabled: a,
      orientation: e,
      loop: t,
      required: l,
      "aria-labelledby": f,
      "aria-invalid": m,
      "aria-required": l,
      "aria-describedby": b,
      ...p
    }
  ) });
};
Y.displayName = "RadioGroup";
const Ce = Object.assign(Y, {
  Radio: N
});
Ce.displayName = "RadioGroup";
N.displayName = "RadioGroup.Radio";
export {
  Ce as RadioGroup
};
//# sourceMappingURL=index.mjs.map
