@stanfordspezi/spezi-web-design-system
Version:
Stanford Biodesign Digital Health Spezi Web Design System
286 lines (285 loc) • 6.95 kB
JavaScript
import { jsx as u, jsxs as L, Fragment as j } from "react/jsx-runtime";
import { c as H } from "./index-2NvaPZWc.mjs";
import * as d from "react";
import { c as $, u as w } from "./index-D2LZVjSn.mjs";
import { c as G } from "./index-DFZozV_h.mjs";
import { c as S } from "./index-hURUNS5V.mjs";
import { u as K } from "./index-DOCb3WPZ.mjs";
import { u as U } from "./index-BZPx6jYI.mjs";
import { u as X } from "./index-ejc2HQY3.mjs";
import { P as J } from "./index-DlW0DMEl.mjs";
import "react-dom";
var Q = [
"a",
"button",
"div",
"form",
"h2",
"h3",
"img",
"input",
"label",
"li",
"nav",
"ol",
"p",
"select",
"span",
"svg",
"ul"
], E = Q.reduce((t, o) => {
const n = $(`Primitive.${o}`), s = d.forwardRef((r, e) => {
const { asChild: l, ...p } = r, a = l ? n : o;
return typeof window < "u" && (window[/* @__PURE__ */ Symbol.for("radix-ui")] = !0), /* @__PURE__ */ u(a, { ...p, ref: e });
});
return s.displayName = `Primitive.${o}`, { ...t, [o]: s };
}, {}), P = "Checkbox", [V] = G(P), [W, _] = V(P);
function Y(t) {
const {
__scopeCheckbox: o,
checked: n,
children: s,
defaultChecked: r,
disabled: e,
form: l,
name: p,
onCheckedChange: a,
required: h,
value: C = "on",
// @ts-expect-error
internal_do_not_use_render: f
} = t, [m, x] = K({
prop: n,
defaultProp: r ?? !1,
onChange: a,
caller: P
}), [k, v] = d.useState(null), [y, c] = d.useState(null), i = d.useRef(!1), g = k ? !!l || !!k.closest("form") : (
// We set this to true by default so that events bubble to forms without JS (SSR)
!0
), R = {
checked: m,
disabled: e,
setChecked: x,
control: k,
setControl: v,
name: p,
form: l,
value: C,
hasConsumerStoppedPropagationRef: i,
required: h,
defaultChecked: b(r) ? !1 : r,
isFormControl: g,
bubbleInput: y,
setBubbleInput: c
};
return /* @__PURE__ */ u(
W,
{
scope: o,
...R,
children: Z(f) ? f(R) : s
}
);
}
var N = "CheckboxTrigger", B = d.forwardRef(
({ __scopeCheckbox: t, onKeyDown: o, onClick: n, ...s }, r) => {
const {
control: e,
value: l,
disabled: p,
checked: a,
required: h,
setControl: C,
setChecked: f,
hasConsumerStoppedPropagationRef: m,
isFormControl: x,
bubbleInput: k
} = _(N, t), v = w(r, C), y = d.useRef(a);
return d.useEffect(() => {
const c = e?.form;
if (c) {
const i = () => f(y.current);
return c.addEventListener("reset", i), () => c.removeEventListener("reset", i);
}
}, [e, f]), /* @__PURE__ */ u(
E.button,
{
type: "button",
role: "checkbox",
"aria-checked": b(a) ? "mixed" : a,
"aria-required": h,
"data-state": O(a),
"data-disabled": p ? "" : void 0,
disabled: p,
value: l,
...s,
ref: v,
onKeyDown: S(o, (c) => {
c.key === "Enter" && c.preventDefault();
}),
onClick: S(n, (c) => {
f((i) => b(i) ? !0 : !i), k && x && (m.current = c.isPropagationStopped(), m.current || c.stopPropagation());
})
}
);
}
);
B.displayName = N;
var M = d.forwardRef(
(t, o) => {
const {
__scopeCheckbox: n,
name: s,
checked: r,
defaultChecked: e,
required: l,
disabled: p,
value: a,
onCheckedChange: h,
form: C,
...f
} = t;
return /* @__PURE__ */ u(
Y,
{
__scopeCheckbox: n,
checked: r,
defaultChecked: e,
disabled: p,
required: l,
onCheckedChange: h,
name: s,
form: C,
value: a,
internal_do_not_use_render: ({ isFormControl: m }) => /* @__PURE__ */ L(j, { children: [
/* @__PURE__ */ u(
B,
{
...f,
ref: o,
__scopeCheckbox: n
}
),
m && /* @__PURE__ */ u(
D,
{
__scopeCheckbox: n
}
)
] })
}
);
}
);
M.displayName = P;
var T = "CheckboxIndicator", q = d.forwardRef(
(t, o) => {
const { __scopeCheckbox: n, forceMount: s, ...r } = t, e = _(T, n);
return /* @__PURE__ */ u(
J,
{
present: s || b(e.checked) || e.checked === !0,
children: /* @__PURE__ */ u(
E.span,
{
"data-state": O(e.checked),
"data-disabled": e.disabled ? "" : void 0,
...r,
ref: o,
style: { pointerEvents: "none", ...t.style }
}
)
}
);
}
);
q.displayName = T;
var A = "CheckboxBubbleInput", D = d.forwardRef(
({ __scopeCheckbox: t, ...o }, n) => {
const {
control: s,
hasConsumerStoppedPropagationRef: r,
checked: e,
defaultChecked: l,
required: p,
disabled: a,
name: h,
value: C,
form: f,
bubbleInput: m,
setBubbleInput: x
} = _(A, t), k = w(n, x), v = U(e), y = X(s);
d.useEffect(() => {
const i = m;
if (!i) return;
const g = window.HTMLInputElement.prototype, I = Object.getOwnPropertyDescriptor(
g,
"checked"
).set, z = !r.current;
if (v !== e && I) {
const F = new Event("click", { bubbles: z });
i.indeterminate = b(e), I.call(i, b(e) ? !1 : e), i.dispatchEvent(F);
}
}, [m, v, e, r]);
const c = d.useRef(b(e) ? !1 : e);
return /* @__PURE__ */ u(
E.input,
{
type: "checkbox",
"aria-hidden": !0,
defaultChecked: l ?? c.current,
required: p,
disabled: a,
name: h,
value: C,
form: f,
...o,
tabIndex: -1,
ref: k,
style: {
...o.style,
...y,
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%)"
}
}
);
}
);
D.displayName = A;
function Z(t) {
return typeof t == "function";
}
function b(t) {
return t === "indeterminate";
}
function O(t) {
return b(t) ? "indeterminate" : t ? "checked" : "unchecked";
}
const ue = ({ className: t, ...o }) => /* @__PURE__ */ u(
M,
{
"data-slot": "checkbox",
className: H(
"focus-ring flex-center border-input peer size-4 shrink-0 rounded-sm border disabled:cursor-not-allowed disabled:opacity-50",
t
),
...o,
children: /* @__PURE__ */ u(
q,
{
"data-slot": "checkbox-indicator",
className: "flex-center bg-primary size-2.5 rounded-xs"
}
)
}
);
export {
ue as C
};