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