@stanfordspezi/spezi-web-design-system
Version:
Stanford Biodesign Digital Health Spezi Web Design System
142 lines (141 loc) • 4.09 kB
JavaScript
import { jsxs as z, jsx as d } from "react/jsx-runtime";
import { c as M } from "./index-2NvaPZWc.mjs";
import * as n from "react";
import { u as O } from "./index-Bytw4Lqn.mjs";
import { a as j, c as A, d as g } from "./index-DqbtYIhp.mjs";
import { u as B } from "./index-BZPx6jYI.mjs";
import { u as H } from "./index-Da5ea2iF.mjs";
import { P as K } from "./index-ruMUvQgL.mjs";
import { P as S } from "./index-WWNfSPCj.mjs";
var E = "Checkbox", [L, ee] = A(E), [q, T] = L(E), w = n.forwardRef(
(e, a) => {
const {
__scopeCheckbox: t,
name: u,
checked: p,
defaultChecked: r,
required: m,
disabled: i,
value: b = "on",
onCheckedChange: C,
form: l,
...x
} = e, [s, k] = n.useState(null), v = O(a, (o) => k(o)), y = n.useRef(!1), R = s ? l || !!s.closest("form") : !0, [f = !1, P] = j({
prop: p,
defaultProp: r,
onChange: C
}), D = n.useRef(f);
return n.useEffect(() => {
const o = s == null ? void 0 : s.form;
if (o) {
const h = () => P(D.current);
return o.addEventListener("reset", h), () => o.removeEventListener("reset", h);
}
}, [s, P]), /* @__PURE__ */ z(q, { scope: t, state: f, disabled: i, children: [
/* @__PURE__ */ d(
S.button,
{
type: "button",
role: "checkbox",
"aria-checked": c(f) ? "mixed" : f,
"aria-required": m,
"data-state": _(f),
"data-disabled": i ? "" : void 0,
disabled: i,
value: b,
...x,
ref: v,
onKeyDown: g(e.onKeyDown, (o) => {
o.key === "Enter" && o.preventDefault();
}),
onClick: g(e.onClick, (o) => {
P((h) => c(h) ? !0 : !h), R && (y.current = o.isPropagationStopped(), y.current || o.stopPropagation());
})
}
),
R && /* @__PURE__ */ d(
X,
{
control: s,
bubbles: !y.current,
name: u,
value: b,
checked: f,
required: m,
disabled: i,
form: l,
style: { transform: "translateX(-100%)" },
defaultChecked: c(r) ? !1 : r
}
)
] });
}
);
w.displayName = E;
var I = "CheckboxIndicator", N = n.forwardRef(
(e, a) => {
const { __scopeCheckbox: t, forceMount: u, ...p } = e, r = T(I, t);
return /* @__PURE__ */ d(K, { present: u || c(r.state) || r.state === !0, children: /* @__PURE__ */ d(
S.span,
{
"data-state": _(r.state),
"data-disabled": r.disabled ? "" : void 0,
...p,
ref: a,
style: { pointerEvents: "none", ...e.style }
}
) });
}
);
N.displayName = I;
var X = (e) => {
const { control: a, checked: t, bubbles: u = !0, defaultChecked: p, ...r } = e, m = n.useRef(null), i = B(t), b = H(a);
n.useEffect(() => {
const l = m.current, x = window.HTMLInputElement.prototype, k = Object.getOwnPropertyDescriptor(x, "checked").set;
if (i !== t && k) {
const v = new Event("click", { bubbles: u });
l.indeterminate = c(t), k.call(l, c(t) ? !1 : t), l.dispatchEvent(v);
}
}, [i, t, u]);
const C = n.useRef(c(t) ? !1 : t);
return /* @__PURE__ */ d(
"input",
{
type: "checkbox",
"aria-hidden": !0,
defaultChecked: p ?? C.current,
...r,
tabIndex: -1,
ref: m,
style: {
...e.style,
...b,
position: "absolute",
pointerEvents: "none",
opacity: 0,
margin: 0
}
}
);
};
function c(e) {
return e === "indeterminate";
}
function _(e) {
return c(e) ? "indeterminate" : e ? "checked" : "unchecked";
}
var F = w, $ = N;
const te = ({ className: e, ...a }) => /* @__PURE__ */ d(
F,
{
className: M(
"focus-ring flex-center border-input peer size-4 shrink-0 rounded-sm border disabled:cursor-not-allowed disabled:opacity-50",
e
),
...a,
children: /* @__PURE__ */ d($, { className: "flex-center bg-primary size-2.5 rounded-xs" })
}
);
export {
te as C
};