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