@stanfordspezi/spezi-web-design-system/dist/Radio-TMfTjM17.mjs

Stanford Biodesign Digital Health Spezi Web Design System

import { jsx as s, jsxs as L } from "react/jsx-runtime";
import { c as q } from "./index-2NvaPZWc.mjs";
import * as d from "react";
import { a as K, c as w, d as y } from "./index-DqbtYIhp.mjs";
import { u as I } from "./index-Bytw4Lqn.mjs";
import { P as k } from "./index-WWNfSPCj.mjs";
import { c as g, R as V, I as z } from "./index-PV-tUMSQ.mjs";
import { u as T } from "./index-B__yqZ4y.mjs";
import { u as j } from "./index-Da5ea2iF.mjs";
import { u as U } from "./index-BZPx6jYI.mjs";
import { P as B } from "./index-ruMUvQgL.mjs";
var C = "Radio", [H, E] = w(C), [$, W] = H(C), G = d.forwardRef(
  (r, a) => {
    const {
      __scopeRadio: e,
      name: i,
      checked: o = !1,
      required: t,
      disabled: n,
      value: l = "on",
      onCheck: u,
      form: f,
      ...v
    } = r, [p, m] = d.useState(null), c = I(a, (h) => m(h)), R = d.useRef(!1), b = p ? f || !!p.closest("form") : !0;
    return /* @__PURE__ */ L($, { scope: e, checked: o, disabled: n, children: [
      /* @__PURE__ */ s(
        k.button,
        {
          type: "button",
          role: "radio",
          "aria-checked": o,
          "data-state": A(o),
          "data-disabled": n ? "" : void 0,
          disabled: n,
          value: l,
          ...v,
          ref: c,
          onClick: y(r.onClick, (h) => {
            o || u == null || u(), b && (R.current = h.isPropagationStopped(), R.current || h.stopPropagation());
          })
        }
      ),
      b && /* @__PURE__ */ s(
        X,
        {
          control: p,
          bubbles: !R.current,
          name: i,
          value: l,
          checked: o,
          required: t,
          disabled: n,
          form: f,
          style: { transform: "translateX(-100%)" }
        }
      )
    ] });
  }
);
G.displayName = C;
var S = "RadioIndicator", _ = d.forwardRef(
  (r, a) => {
    const { __scopeRadio: e, forceMount: i, ...o } = r, t = W(S, e);
    return /* @__PURE__ */ s(B, { present: i || t.checked, children: /* @__PURE__ */ s(
      k.span,
      {
        "data-state": A(t.checked),
        "data-disabled": t.disabled ? "" : void 0,
        ...o,
        ref: a
      }
    ) });
  }
);
_.displayName = S;
var X = (r) => {
  const { control: a, checked: e, bubbles: i = !0, ...o } = r, t = d.useRef(null), n = U(e), l = j(a);
  return d.useEffect(() => {
    const u = t.current, f = window.HTMLInputElement.prototype, p = Object.getOwnPropertyDescriptor(f, "checked").set;
    if (n !== e && p) {
      const m = new Event("click", { bubbles: i });
      p.call(u, e), u.dispatchEvent(m);
    }
  }, [n, e, i]), /* @__PURE__ */ s(
    "input",
    {
      type: "radio",
      "aria-hidden": !0,
      defaultChecked: e,
      ...o,
      tabIndex: -1,
      ref: t,
      style: {
        ...r.style,
        ...l,
        position: "absolute",
        pointerEvents: "none",
        opacity: 0,
        margin: 0
      }
    }
  );
};
function A(r) {
  return r ? "checked" : "unchecked";
}
var Y = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"], P = "RadioGroup", [J, me] = w(P, [
  g,
  E
]), N = g(), x = E(), [Q, Z] = J(P), D = d.forwardRef(
  (r, a) => {
    const {
      __scopeRadioGroup: e,
      name: i,
      defaultValue: o,
      value: t,
      required: n = !1,
      disabled: l = !1,
      orientation: u,
      dir: f,
      loop: v = !0,
      onValueChange: p,
      ...m
    } = r, c = N(e), R = T(f), [b, h] = K({
      prop: t,
      defaultProp: o,
      onChange: p
    });
    return /* @__PURE__ */ s(
      Q,
      {
        scope: e,
        name: i,
        required: n,
        disabled: l,
        value: b,
        onValueChange: h,
        children: /* @__PURE__ */ s(
          V,
          {
            asChild: !0,
            ...c,
            orientation: u,
            dir: R,
            loop: v,
            children: /* @__PURE__ */ s(
              k.div,
              {
                role: "radiogroup",
                "aria-required": n,
                "aria-orientation": u,
                "data-disabled": l ? "" : void 0,
                dir: R,
                ...m,
                ref: a
              }
            )
          }
        )
      }
    );
  }
);
D.displayName = P;
var M = "RadioGroupItem", O = d.forwardRef(
  (r, a) => {
    const { __scopeRadioGroup: e, disabled: i, ...o } = r, t = Z(M, e), n = t.disabled || i, l = N(e), u = x(e), f = d.useRef(null), v = I(a, f), p = t.value === o.value, m = d.useRef(!1);
    return d.useEffect(() => {
      const c = (b) => {
        Y.includes(b.key) && (m.current = !0);
      }, R = () => m.current = !1;
      return document.addEventListener("keydown", c), document.addEventListener("keyup", R), () => {
        document.removeEventListener("keydown", c), document.removeEventListener("keyup", R);
      };
    }, []), /* @__PURE__ */ s(
      z,
      {
        asChild: !0,
        ...l,
        focusable: !n,
        active: p,
        children: /* @__PURE__ */ s(
          G,
          {
            disabled: n,
            required: t.required,
            checked: p,
            ...u,
            ...o,
            name: t.name,
            ref: v,
            onCheck: () => t.onValueChange(o.value),
            onKeyDown: y((c) => {
              c.key === "Enter" && c.preventDefault();
            }),
            onFocus: y(o.onFocus, () => {
              var c;
              m.current && ((c = f.current) == null || c.click());
            })
          }
        )
      }
    );
  }
);
O.displayName = M;
var ee = "RadioGroupIndicator", F = d.forwardRef(
  (r, a) => {
    const { __scopeRadioGroup: e, ...i } = r, o = x(e);
    return /* @__PURE__ */ s(_, { ...o, ...i, ref: a });
  }
);
F.displayName = ee;
var oe = D, re = O, te = F;
const Re = oe, ve = ({
  className: r,
  ...a
}) => /* @__PURE__ */ s(
  re,
  {
    className: q(
      "focus-ring flex-center border-input size-4 shrink-0 rounded-full border disabled:cursor-not-allowed disabled:opacity-50",
      r
    ),
    ...a,
    children: /* @__PURE__ */ s(te, { className: "flex-center bg-primary size-2 rounded-full" })
  }
);
export {
  Re as R,
  ve as a
};