@stanfordspezi/spezi-web-design-system
Version:
Stanford Biodesign Digital Health Spezi Web Design System
300 lines (299 loc) • 8.11 kB
JavaScript
import { jsx as n, jsxs as Q } from "react/jsx-runtime";
import { e as W, R as X, T as Z, f as T, b as ee, a as oe } from "./Collapsible-e01o3cFu.mjs";
import { c as S } from "./index-2NvaPZWc.mjs";
import re from "./chevron-down-CefUL7ih.mjs";
import * as te from "react";
import l from "react";
import { c as ne } from "./index-DFZozV_h.mjs";
import { c as ce } from "./index-Bj70Jptv.mjs";
import { c as ae, u as ie } from "./index-D2LZVjSn.mjs";
import { c as se } from "./index-hURUNS5V.mjs";
import { u as M } from "./index-DOCb3WPZ.mjs";
import "react-dom";
import { u as le } from "./index-C3vaq8Fy.mjs";
import { u as de } from "./index-ByaXH_ih.mjs";
var pe = [
"a",
"button",
"div",
"form",
"h2",
"h3",
"img",
"input",
"label",
"li",
"nav",
"ol",
"p",
"select",
"span",
"svg",
"ul"
], V = pe.reduce((e, r) => {
const o = ae(`Primitive.${r}`), c = te.forwardRef((a, t) => {
const { asChild: s, ...i } = a, d = s ? o : r;
return typeof window < "u" && (window[/* @__PURE__ */ Symbol.for("radix-ui")] = !0), /* @__PURE__ */ n(d, { ...i, ref: t });
});
return c.displayName = `Primitive.${r}`, { ...e, [r]: c };
}, {}), p = "Accordion", me = ["Home", "End", "ArrowDown", "ArrowUp", "ArrowLeft", "ArrowRight"], [E, fe, ue] = ce(p), [g] = ne(p, [
ue,
T
]), D = T(), H = l.forwardRef(
(e, r) => {
const { type: o, ...c } = e, a = c, t = c;
return /* @__PURE__ */ n(E.Provider, { scope: e.__scopeAccordion, children: o === "multiple" ? /* @__PURE__ */ n(be, { ...t, ref: r }) : /* @__PURE__ */ n(Ae, { ...a, ref: r }) });
}
);
H.displayName = p;
var [$, ve] = g(p), [K, Ce] = g(
p,
{ collapsible: !1 }
), Ae = l.forwardRef(
(e, r) => {
const {
value: o,
defaultValue: c,
onValueChange: a = () => {
},
collapsible: t = !1,
...s
} = e, [i, d] = M({
prop: o,
defaultProp: c ?? "",
onChange: a,
caller: p
});
return /* @__PURE__ */ n(
$,
{
scope: e.__scopeAccordion,
value: l.useMemo(() => i ? [i] : [], [i]),
onItemOpen: d,
onItemClose: l.useCallback(() => t && d(""), [t, d]),
children: /* @__PURE__ */ n(K, { scope: e.__scopeAccordion, collapsible: t, children: /* @__PURE__ */ n(j, { ...s, ref: r }) })
}
);
}
), be = l.forwardRef((e, r) => {
const {
value: o,
defaultValue: c,
onValueChange: a = () => {
},
...t
} = e, [s, i] = M({
prop: o,
defaultProp: c ?? [],
onChange: a,
caller: p
}), d = l.useCallback(
(v) => i((f = []) => [...f, v]),
[i]
), u = l.useCallback(
(v) => i((f = []) => f.filter((x) => x !== v)),
[i]
);
return /* @__PURE__ */ n(
$,
{
scope: e.__scopeAccordion,
value: s,
onItemOpen: d,
onItemClose: u,
children: /* @__PURE__ */ n(K, { scope: e.__scopeAccordion, collapsible: !0, children: /* @__PURE__ */ n(j, { ...t, ref: r }) })
}
);
}), [ge, h] = g(p), j = l.forwardRef(
(e, r) => {
const { __scopeAccordion: o, disabled: c, dir: a, orientation: t = "vertical", ...s } = e, i = l.useRef(null), d = ie(i, r), u = fe(o), f = de(a) === "ltr", x = se(e.onKeyDown, (C) => {
if (!me.includes(C.key)) return;
const F = C.target, I = u().filter((P) => !P.ref.current?.disabled), A = I.findIndex((P) => P.ref.current === F), O = I.length;
if (A === -1) return;
C.preventDefault();
let m = A;
const w = 0, _ = O - 1, R = () => {
m = A + 1, m > _ && (m = w);
}, N = () => {
m = A - 1, m < w && (m = _);
};
switch (C.key) {
case "Home":
m = w;
break;
case "End":
m = _;
break;
case "ArrowRight":
t === "horizontal" && (f ? R() : N());
break;
case "ArrowDown":
t === "vertical" && R();
break;
case "ArrowLeft":
t === "horizontal" && (f ? N() : R());
break;
case "ArrowUp":
t === "vertical" && N();
break;
}
const J = m % O;
I[J].ref.current?.focus();
});
return /* @__PURE__ */ n(
ge,
{
scope: o,
disabled: c,
direction: a,
orientation: t,
children: /* @__PURE__ */ n(E.Slot, { scope: o, children: /* @__PURE__ */ n(
V.div,
{
...s,
"data-orientation": t,
ref: d,
onKeyDown: c ? void 0 : x
}
) })
}
);
}
), b = "AccordionItem", [he, k] = g(b), z = l.forwardRef(
(e, r) => {
const { __scopeAccordion: o, value: c, ...a } = e, t = h(b, o), s = ve(b, o), i = D(o), d = le(), u = c && s.value.includes(c) || !1, v = t.disabled || e.disabled;
return /* @__PURE__ */ n(
he,
{
scope: o,
open: u,
disabled: v,
triggerId: d,
children: /* @__PURE__ */ n(
X,
{
"data-orientation": t.orientation,
"data-state": B(u),
...i,
...a,
ref: r,
disabled: v,
open: u,
onOpenChange: (f) => {
f ? s.onItemOpen(c) : s.onItemClose(c);
}
}
)
}
);
}
);
z.displayName = b;
var L = "AccordionHeader", G = l.forwardRef(
(e, r) => {
const { __scopeAccordion: o, ...c } = e, a = h(p, o), t = k(L, o);
return /* @__PURE__ */ n(
V.h3,
{
"data-orientation": a.orientation,
"data-state": B(t.open),
"data-disabled": t.disabled ? "" : void 0,
...c,
ref: r
}
);
}
);
G.displayName = L;
var y = "AccordionTrigger", U = l.forwardRef(
(e, r) => {
const { __scopeAccordion: o, ...c } = e, a = h(p, o), t = k(y, o), s = Ce(y, o), i = D(o);
return /* @__PURE__ */ n(E.ItemSlot, { scope: o, children: /* @__PURE__ */ n(
Z,
{
"aria-disabled": t.open && !s.collapsible || void 0,
"data-orientation": a.orientation,
id: t.triggerId,
...i,
...c,
ref: r
}
) });
}
);
U.displayName = y;
var Y = "AccordionContent", q = l.forwardRef(
(e, r) => {
const { __scopeAccordion: o, ...c } = e, a = h(p, o), t = k(Y, o), s = D(o);
return /* @__PURE__ */ n(
W,
{
role: "region",
"aria-labelledby": t.triggerId,
"data-orientation": a.orientation,
...s,
...c,
ref: r,
style: {
"--radix-accordion-content-height": "var(--radix-collapsible-content-height)",
"--radix-accordion-content-width": "var(--radix-collapsible-content-width)",
...e.style
}
}
);
}
);
q.displayName = Y;
function B(e) {
return e ? "open" : "closed";
}
var xe = H, Ie = z, we = G, _e = U, Re = q;
const Ke = (e) => /* @__PURE__ */ n(xe, { "data-slot": "accordion", ...e }), je = ({
className: e,
...r
}) => /* @__PURE__ */ n(
Ie,
{
"data-slot": "accordion-item",
className: S("border-b last:border-b-0", e),
...r
}
), ze = ({
className: e,
children: r,
...o
}) => /* @__PURE__ */ n(we, { className: "flex", children: /* @__PURE__ */ Q(
_e,
{
"data-slot": "accordion-trigger",
className: S(
"interactive-opacity flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
e
),
...o,
children: [
r,
/* @__PURE__ */ n(re, { className: "text-muted-foreground size-4 shrink-0 translate-y-0.5 transition" })
]
}
) }), Le = ({
className: e,
children: r,
...o
}) => /* @__PURE__ */ n(
Re,
{
"data-slot": "accordion-content",
className: "text-sm",
asChild: !0,
forceMount: !0,
...o,
children: /* @__PURE__ */ n(ee, { children: /* @__PURE__ */ n(oe, { children: /* @__PURE__ */ n("div", { className: S("pt-0 pb-4", e), children: r }) }) })
}
);
export {
Le as A,
je as a,
Ke as b,
ze as c
};