@stanfordspezi/spezi-web-design-system
Version:
Stanford Biodesign Digital Health Spezi Web Design System
142 lines (141 loc) • 4.13 kB
JavaScript
import { jsx as a } from "react/jsx-runtime";
import { c as T } from "./index-2NvaPZWc.mjs";
import * as n from "react";
import { c as M, a as D, u as L, d as $ } from "./index-CBSFK5oB.mjs";
import { u as k, S as E } from "./index-CB1Wkg0G.mjs";
import { P as g } from "./index-8-FPuQXg.mjs";
import { P as F } from "./index-dgd0uIiN.mjs";
import { u as B } from "./index-D59fTEgK.mjs";
var f = "Collapsible", [G, te] = M(f), [j, v] = G(f), I = n.forwardRef(
(e, t) => {
const {
__scopeCollapsible: s,
open: r,
defaultOpen: o,
disabled: c,
onOpenChange: i,
...C
} = e, [p, d] = L({
prop: r,
defaultProp: o ?? !1,
onChange: i,
caller: f
});
return /* @__PURE__ */ a(
j,
{
scope: s,
disabled: c,
contentId: B(),
open: p,
onOpenToggle: n.useCallback(() => d((m) => !m), [d]),
children: /* @__PURE__ */ a(
g.div,
{
"data-state": R(p),
"data-disabled": c ? "" : void 0,
...C,
ref: t
}
)
}
);
}
);
I.displayName = f;
var S = "CollapsibleTrigger", A = n.forwardRef(
(e, t) => {
const { __scopeCollapsible: s, ...r } = e, o = v(S, s);
return /* @__PURE__ */ a(
g.button,
{
type: "button",
"aria-controls": o.contentId,
"aria-expanded": o.open || !1,
"data-state": R(o.open),
"data-disabled": o.disabled ? "" : void 0,
disabled: o.disabled,
...r,
ref: t,
onClick: D(e.onClick, o.onOpenToggle)
}
);
}
);
A.displayName = S;
var h = "CollapsibleContent", O = n.forwardRef(
(e, t) => {
const { forceMount: s, ...r } = e, o = v(h, e.__scopeCollapsible);
return /* @__PURE__ */ a(F, { present: s || o.open, children: ({ present: c }) => /* @__PURE__ */ a(q, { ...r, ref: t, present: c }) });
}
);
O.displayName = h;
var q = n.forwardRef((e, t) => {
const { __scopeCollapsible: s, present: r, children: o, ...c } = e, i = v(h, s), [C, p] = n.useState(r), d = n.useRef(null), m = k(t, d), N = n.useRef(0), P = N.current, y = n.useRef(0), x = y.current, b = i.open || C, w = n.useRef(b), u = n.useRef(void 0);
return n.useEffect(() => {
const l = requestAnimationFrame(() => w.current = !1);
return () => cancelAnimationFrame(l);
}, []), $(() => {
const l = d.current;
if (l) {
u.current = u.current || {
transitionDuration: l.style.transitionDuration,
animationName: l.style.animationName
}, l.style.transitionDuration = "0s", l.style.animationName = "none";
const _ = l.getBoundingClientRect();
N.current = _.height, y.current = _.width, w.current || (l.style.transitionDuration = u.current.transitionDuration, l.style.animationName = u.current.animationName), p(r);
}
}, [i.open, r]), /* @__PURE__ */ a(
g.div,
{
"data-state": R(i.open),
"data-disabled": i.disabled ? "" : void 0,
id: i.contentId,
hidden: !b,
...c,
ref: m,
style: {
"--radix-collapsible-content-height": P ? `${P}px` : void 0,
"--radix-collapsible-content-width": x ? `${x}px` : void 0,
...e.style
},
children: b && o
}
);
});
function R(e) {
return e ? "open" : "closed";
}
var H = I, z = A, J = O;
const oe = (e) => /* @__PURE__ */ a(H, { "data-slot": "collapsible-root", ...e }), ne = z, K = ({
className: e,
asChild: t = !1,
...s
}) => /* @__PURE__ */ a(
t ? E : "div",
{
className: T(
"grid !transition-all data-[state=closed]:grid-rows-[0fr] data-[state=open]:grid-rows-[1fr]",
e
),
...s
}
), Q = ({
className: e,
asChild: t = !1,
...s
}) => /* @__PURE__ */ a(t ? E : "div", { className: T("overflow-hidden", e), ...s }), ae = ({
children: e,
...t
}) => /* @__PURE__ */ a(J, { asChild: !0, forceMount: !0, ...t, children: /* @__PURE__ */ a(K, { children: /* @__PURE__ */ a(Q, { children: e }) }) });
export {
oe as C,
H as R,
z as T,
ne as a,
K as b,
Q as c,
ae as d,
te as e,
J as f
};