@stanfordspezi/spezi-web-design-system
Version:
Stanford Biodesign Digital Health Spezi Web Design System
329 lines (328 loc) • 9.48 kB
JavaScript
import { jsx as a, jsxs as O } from "react/jsx-runtime";
import { c as P } from "./index-2NvaPZWc.mjs";
import z from "./x-0Nj1BYxw.mjs";
import * as i from "react";
import { c as m } from "./index-hURUNS5V.mjs";
import { c as w, u as N } from "./index-D2LZVjSn.mjs";
import { c as K } from "./index-DFZozV_h.mjs";
import { P as X, D as U } from "./index-DJ6gB4bU.mjs";
import { h as V, R as W, u as Z, F as q } from "./index-dzIOViH8.mjs";
import { u as B } from "./index-C3vaq8Fy.mjs";
import { A as J, R as Q, a as _, c as b, C as Y } from "./index-Ba44uSOb.mjs";
import { P as y } from "./index-DlW0DMEl.mjs";
import "react-dom";
import { u as ee } from "./index-DOCb3WPZ.mjs";
var oe = [
"a",
"button",
"div",
"form",
"h2",
"h3",
"img",
"input",
"label",
"li",
"nav",
"ol",
"p",
"select",
"span",
"svg",
"ul"
], E = oe.reduce((e, o) => {
const n = w(`Primitive.${o}`), s = i.forwardRef((r, t) => {
const { asChild: c, ...p } = r, u = c ? n : o;
return typeof window < "u" && (window[/* @__PURE__ */ Symbol.for("radix-ui")] = !0), /* @__PURE__ */ a(u, { ...p, ref: t });
});
return s.displayName = `Primitive.${o}`, { ...e, [o]: s };
}, {}), R = "Popover", [S] = K(R, [
b
]), h = b(), [re, l] = S(R), F = (e) => {
const {
__scopePopover: o,
children: n,
open: s,
defaultOpen: r,
onOpenChange: t,
modal: c = !1
} = e, p = h(o), u = i.useRef(null), [v, g] = i.useState(!1), [C, d] = ee({
prop: s,
defaultProp: r ?? !1,
onChange: t,
caller: R
});
return /* @__PURE__ */ a(Q, { ...p, children: /* @__PURE__ */ a(
re,
{
scope: o,
contentId: B(),
triggerRef: u,
open: C,
onOpenChange: d,
onOpenToggle: i.useCallback(() => d((x) => !x), [d]),
hasCustomAnchor: v,
onCustomAnchorAdd: i.useCallback(() => g(!0), []),
onCustomAnchorRemove: i.useCallback(() => g(!1), []),
modal: c,
children: n
}
) });
};
F.displayName = R;
var D = "PopoverAnchor", te = i.forwardRef(
(e, o) => {
const { __scopePopover: n, ...s } = e, r = l(D, n), t = h(n), { onCustomAnchorAdd: c, onCustomAnchorRemove: p } = r;
return i.useEffect(() => (c(), () => p()), [c, p]), /* @__PURE__ */ a(_, { ...t, ...s, ref: o });
}
);
te.displayName = D;
var M = "PopoverTrigger", T = i.forwardRef(
(e, o) => {
const { __scopePopover: n, ...s } = e, r = l(M, n), t = h(n), c = N(o, r.triggerRef), p = /* @__PURE__ */ a(
E.button,
{
type: "button",
"aria-haspopup": "dialog",
"aria-expanded": r.open,
"aria-controls": r.contentId,
"data-state": j(r.open),
...s,
ref: c,
onClick: m(e.onClick, r.onOpenToggle)
}
);
return r.hasCustomAnchor ? p : /* @__PURE__ */ a(_, { asChild: !0, ...t, children: p });
}
);
T.displayName = M;
var A = "PopoverPortal", [ne, se] = S(A, {
forceMount: void 0
}), k = (e) => {
const { __scopePopover: o, forceMount: n, children: s, container: r } = e, t = l(A, o);
return /* @__PURE__ */ a(ne, { scope: o, forceMount: n, children: /* @__PURE__ */ a(y, { present: n || t.open, children: /* @__PURE__ */ a(X, { asChild: !0, container: r, children: s }) }) });
};
k.displayName = A;
var f = "PopoverContent", I = i.forwardRef(
(e, o) => {
const n = se(f, e.__scopePopover), { forceMount: s = n.forceMount, ...r } = e, t = l(f, e.__scopePopover);
return /* @__PURE__ */ a(y, { present: s || t.open, children: t.modal ? /* @__PURE__ */ a(ce, { ...r, ref: o }) : /* @__PURE__ */ a(ie, { ...r, ref: o }) });
}
);
I.displayName = f;
var ae = w("PopoverContent.RemoveScroll"), ce = i.forwardRef(
(e, o) => {
const n = l(f, e.__scopePopover), s = i.useRef(null), r = N(o, s), t = i.useRef(!1);
return i.useEffect(() => {
const c = s.current;
if (c) return V(c);
}, []), /* @__PURE__ */ a(W, { as: ae, allowPinchZoom: !0, children: /* @__PURE__ */ a(
$,
{
...e,
ref: r,
trapFocus: n.open,
disableOutsidePointerEvents: !0,
onCloseAutoFocus: m(e.onCloseAutoFocus, (c) => {
c.preventDefault(), t.current || n.triggerRef.current?.focus();
}),
onPointerDownOutside: m(
e.onPointerDownOutside,
(c) => {
const p = c.detail.originalEvent, u = p.button === 0 && p.ctrlKey === !0, v = p.button === 2 || u;
t.current = v;
},
{ checkForDefaultPrevented: !1 }
),
onFocusOutside: m(
e.onFocusOutside,
(c) => c.preventDefault(),
{ checkForDefaultPrevented: !1 }
)
}
) });
}
), ie = i.forwardRef(
(e, o) => {
const n = l(f, e.__scopePopover), s = i.useRef(!1), r = i.useRef(!1);
return /* @__PURE__ */ a(
$,
{
...e,
ref: o,
trapFocus: !1,
disableOutsidePointerEvents: !1,
onCloseAutoFocus: (t) => {
e.onCloseAutoFocus?.(t), t.defaultPrevented || (s.current || n.triggerRef.current?.focus(), t.preventDefault()), s.current = !1, r.current = !1;
},
onInteractOutside: (t) => {
e.onInteractOutside?.(t), t.defaultPrevented || (s.current = !0, t.detail.originalEvent.type === "pointerdown" && (r.current = !0));
const c = t.target;
n.triggerRef.current?.contains(c) && t.preventDefault(), t.detail.originalEvent.type === "focusin" && r.current && t.preventDefault();
}
}
);
}
), $ = i.forwardRef(
(e, o) => {
const {
__scopePopover: n,
trapFocus: s,
onOpenAutoFocus: r,
onCloseAutoFocus: t,
disableOutsidePointerEvents: c,
onEscapeKeyDown: p,
onPointerDownOutside: u,
onFocusOutside: v,
onInteractOutside: g,
...C
} = e, d = l(f, n), x = h(n);
return Z(), /* @__PURE__ */ a(
q,
{
asChild: !0,
loop: !0,
trapped: s,
onMountAutoFocus: r,
onUnmountAutoFocus: t,
children: /* @__PURE__ */ a(
U,
{
asChild: !0,
disableOutsidePointerEvents: c,
onInteractOutside: g,
onEscapeKeyDown: p,
onPointerDownOutside: u,
onFocusOutside: v,
onDismiss: () => d.onOpenChange(!1),
children: /* @__PURE__ */ a(
Y,
{
"data-state": j(d.open),
role: "dialog",
id: d.contentId,
...x,
...C,
ref: o,
style: {
...C.style,
"--radix-popover-content-transform-origin": "var(--radix-popper-transform-origin)",
"--radix-popover-content-available-width": "var(--radix-popper-available-width)",
"--radix-popover-content-available-height": "var(--radix-popper-available-height)",
"--radix-popover-trigger-width": "var(--radix-popper-anchor-width)",
"--radix-popover-trigger-height": "var(--radix-popper-anchor-height)"
}
}
)
}
)
}
);
}
), H = "PopoverClose", L = i.forwardRef(
(e, o) => {
const { __scopePopover: n, ...s } = e, r = l(H, n);
return /* @__PURE__ */ a(
E.button,
{
type: "button",
...s,
ref: o,
onClick: m(e.onClick, () => r.onOpenChange(!1))
}
);
}
);
L.displayName = H;
var pe = "PopoverArrow", G = i.forwardRef(
(e, o) => {
const { __scopePopover: n, ...s } = e, r = h(n);
return /* @__PURE__ */ a(J, { ...r, ...s, ref: o });
}
);
G.displayName = pe;
function j(e) {
return e ? "open" : "closed";
}
var le = F, ue = T, de = k, fe = I, ve = L, me = G;
const Se = le, Fe = ue, Pe = me, De = ({
className: e,
...o
}) => /* @__PURE__ */ a(
"div",
{
"data-slot": "popover-header",
className: P(
"flex flex-col space-y-1.5 text-center sm:text-left",
e
),
...o
}
), Me = ({ className: e, ...o }) => /* @__PURE__ */ a(
"h6",
{
"data-slot": "popover-title",
className: P("text-lg font-semibold", e),
...o
}
), Te = ({
className: e,
...o
}) => /* @__PURE__ */ a(
"p",
{
"data-slot": "popover-description",
className: P("text-muted-foreground text-sm", e),
...o
}
), ke = ({
className: e,
...o
}) => /* @__PURE__ */ O(
ve,
{
"data-slot": "popover-close",
className: P(
"focus-ring text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition hover:opacity-100 disabled:pointer-events-none",
e
),
...o,
children: [
/* @__PURE__ */ a(z, { className: "size-4" }),
/* @__PURE__ */ a("span", { className: "sr-only", children: "Close" })
]
}
), Ie = ({
className: e,
children: o,
align: n = "center",
sideOffset: s = 4,
arrow: r,
...t
}) => /* @__PURE__ */ a(de, { children: /* @__PURE__ */ O(
fe,
{
"data-slot": "popover-content",
align: n,
sideOffset: s,
className: P(
"animate-entrance-fade-slide bg-popover text-popover-foreground z-50 w-72 rounded-md border p-4 shadow-sm outline-hidden",
e
),
...t,
children: [
o,
r && /* @__PURE__ */ a(Pe, { className: "fill-popover", width: 12, height: 8 })
]
}
) });
export {
Pe as P,
ke as a,
Ie as b,
Te as c,
De as d,
Se as e,
Me as f,
Fe as g
};