@stanfordspezi/spezi-web-design-system
Version:
Stanford Biodesign Digital Health Spezi Web Design System
253 lines (252 loc) • 6.31 kB
JavaScript
import { jsx as u, jsxs as O, Fragment as j } from "react/jsx-runtime";
import { c as H } from "./index-2NvaPZWc.mjs";
import * as a from "react";
import { u as N } from "./index-CB1Wkg0G.mjs";
import { c as G, u as K, a as S } from "./index-CBSFK5oB.mjs";
import { u as U } from "./index-BZPx6jYI.mjs";
import { u as X } from "./index-DXTv4gV1.mjs";
import { P as $ } from "./index-dgd0uIiN.mjs";
import { P as y } from "./index-8-FPuQXg.mjs";
var R = "Checkbox", [J, se] = G(R), [Q, E] = J(R);
function V(t) {
const {
__scopeCheckbox: r,
checked: s,
children: l,
defaultChecked: n,
disabled: e,
form: f,
name: b,
onCheckedChange: i,
required: m,
value: C = "on",
// @ts-expect-error
internal_do_not_use_render: d
} = t, [p, v] = K({
prop: s,
defaultProp: n ?? !1,
onChange: i,
caller: R
}), [k, x] = a.useState(null), [P, o] = a.useState(null), c = a.useRef(!1), _ = k ? !!f || !!k.closest("form") : (
// We set this to true by default so that events bubble to forms without JS (SSR)
!0
), g = {
checked: p,
disabled: e,
setChecked: v,
control: k,
setControl: x,
name: b,
form: f,
value: C,
hasConsumerStoppedPropagationRef: c,
required: m,
defaultChecked: h(n) ? !1 : n,
isFormControl: _,
bubbleInput: P,
setBubbleInput: o
};
return /* @__PURE__ */ u(
Q,
{
scope: r,
...g,
children: W(d) ? d(g) : l
}
);
}
var w = "CheckboxTrigger", B = a.forwardRef(
({ __scopeCheckbox: t, onKeyDown: r, onClick: s, ...l }, n) => {
const {
control: e,
value: f,
disabled: b,
checked: i,
required: m,
setControl: C,
setChecked: d,
hasConsumerStoppedPropagationRef: p,
isFormControl: v,
bubbleInput: k
} = E(w, t), x = N(n, C), P = a.useRef(i);
return a.useEffect(() => {
const o = e == null ? void 0 : e.form;
if (o) {
const c = () => d(P.current);
return o.addEventListener("reset", c), () => o.removeEventListener("reset", c);
}
}, [e, d]), /* @__PURE__ */ u(
y.button,
{
type: "button",
role: "checkbox",
"aria-checked": h(i) ? "mixed" : i,
"aria-required": m,
"data-state": D(i),
"data-disabled": b ? "" : void 0,
disabled: b,
value: f,
...l,
ref: x,
onKeyDown: S(r, (o) => {
o.key === "Enter" && o.preventDefault();
}),
onClick: S(s, (o) => {
d((c) => h(c) ? !0 : !c), k && v && (p.current = o.isPropagationStopped(), p.current || o.stopPropagation());
})
}
);
}
);
B.displayName = w;
var M = a.forwardRef(
(t, r) => {
const {
__scopeCheckbox: s,
name: l,
checked: n,
defaultChecked: e,
required: f,
disabled: b,
value: i,
onCheckedChange: m,
form: C,
...d
} = t;
return /* @__PURE__ */ u(
V,
{
__scopeCheckbox: s,
checked: n,
defaultChecked: e,
disabled: b,
required: f,
onCheckedChange: m,
name: l,
form: C,
value: i,
internal_do_not_use_render: ({ isFormControl: p }) => /* @__PURE__ */ O(j, { children: [
/* @__PURE__ */ u(
B,
{
...d,
ref: r,
__scopeCheckbox: s
}
),
p && /* @__PURE__ */ u(
z,
{
__scopeCheckbox: s
}
)
] })
}
);
}
);
M.displayName = R;
var T = "CheckboxIndicator", q = a.forwardRef(
(t, r) => {
const { __scopeCheckbox: s, forceMount: l, ...n } = t, e = E(T, s);
return /* @__PURE__ */ u(
$,
{
present: l || h(e.checked) || e.checked === !0,
children: /* @__PURE__ */ u(
y.span,
{
"data-state": D(e.checked),
"data-disabled": e.disabled ? "" : void 0,
...n,
ref: r,
style: { pointerEvents: "none", ...t.style }
}
)
}
);
}
);
q.displayName = T;
var A = "CheckboxBubbleInput", z = a.forwardRef(
({ __scopeCheckbox: t, ...r }, s) => {
const {
control: l,
hasConsumerStoppedPropagationRef: n,
checked: e,
defaultChecked: f,
required: b,
disabled: i,
name: m,
value: C,
form: d,
bubbleInput: p,
setBubbleInput: v
} = E(A, t), k = N(s, v), x = U(e), P = X(l);
a.useEffect(() => {
const c = p;
if (!c) return;
const _ = window.HTMLInputElement.prototype, I = Object.getOwnPropertyDescriptor(
_,
"checked"
).set, F = !n.current;
if (x !== e && I) {
const L = new Event("click", { bubbles: F });
c.indeterminate = h(e), I.call(c, h(e) ? !1 : e), c.dispatchEvent(L);
}
}, [p, x, e, n]);
const o = a.useRef(h(e) ? !1 : e);
return /* @__PURE__ */ u(
y.input,
{
type: "checkbox",
"aria-hidden": !0,
defaultChecked: f ?? o.current,
required: b,
disabled: i,
name: m,
value: C,
form: d,
...r,
tabIndex: -1,
ref: k,
style: {
...r.style,
...P,
position: "absolute",
pointerEvents: "none",
opacity: 0,
margin: 0,
// We transform because the input is absolutely positioned but we have
// rendered it **after** the button. This pulls it back to sit on top
// of the button.
transform: "translateX(-100%)"
}
}
);
}
);
z.displayName = A;
function W(t) {
return typeof t == "function";
}
function h(t) {
return t === "indeterminate";
}
function D(t) {
return h(t) ? "indeterminate" : t ? "checked" : "unchecked";
}
const ae = ({ className: t, ...r }) => /* @__PURE__ */ u(
M,
{
className: H(
"focus-ring flex-center border-input peer size-4 shrink-0 rounded-sm border disabled:cursor-not-allowed disabled:opacity-50",
t
),
...r,
children: /* @__PURE__ */ u(q, { className: "flex-center bg-primary size-2.5 rounded-xs" })
}
);
export {
ae as C
};