@stanfordspezi/spezi-web-design-system
Version:
Stanford Biodesign Digital Health Spezi Web Design System
275 lines (274 loc) • 8.93 kB
JavaScript
import { jsx as a, jsxs as O } from "react/jsx-runtime";
import { c as C } from "./index-2NvaPZWc.mjs";
import { X as j } from "./x-DBA6k5_5.mjs";
import * as p from "react";
import { a as z, c as K, d as P } from "./index-DqbtYIhp.mjs";
import { u as _, c as X } from "./index-Bytw4Lqn.mjs";
import { D as U } from "./index-C9uNU7u7.mjs";
import { P as V, h as W, R as Z, u as q, F as B } from "./index-DdcLbo-g.mjs";
import { u as J } from "./index-BR4tIz6o.mjs";
import { c as w, R as Q, A as b, a as Y, C as ee } from "./index-D3lfN3hi.mjs";
import { P as N } from "./index-ruMUvQgL.mjs";
import { P as E } from "./index-WWNfSPCj.mjs";
var x = "Popover", [y, Ne] = K(x, [
w
]), g = w(), [oe, d] = y(x), F = (e) => {
const {
__scopePopover: o,
children: n,
open: s,
defaultOpen: t,
onOpenChange: r,
modal: c = !1
} = e, i = g(o), l = p.useRef(null), [u, m] = p.useState(!1), [h = !1, f] = z({
prop: s,
defaultProp: t,
onChange: r
});
return /* @__PURE__ */ a(Q, { ...i, children: /* @__PURE__ */ a(
oe,
{
scope: o,
contentId: J(),
triggerRef: l,
open: h,
onOpenChange: f,
onOpenToggle: p.useCallback(() => f((R) => !R), [f]),
hasCustomAnchor: u,
onCustomAnchorAdd: p.useCallback(() => m(!0), []),
onCustomAnchorRemove: p.useCallback(() => m(!1), []),
modal: c,
children: n
}
) });
};
F.displayName = x;
var S = "PopoverAnchor", te = p.forwardRef(
(e, o) => {
const { __scopePopover: n, ...s } = e, t = d(S, n), r = g(n), { onCustomAnchorAdd: c, onCustomAnchorRemove: i } = t;
return p.useEffect(() => (c(), () => i()), [c, i]), /* @__PURE__ */ a(b, { ...r, ...s, ref: o });
}
);
te.displayName = S;
var D = "PopoverTrigger", M = p.forwardRef(
(e, o) => {
const { __scopePopover: n, ...s } = e, t = d(D, n), r = g(n), c = _(o, t.triggerRef), i = /* @__PURE__ */ a(
E.button,
{
type: "button",
"aria-haspopup": "dialog",
"aria-expanded": t.open,
"aria-controls": t.contentId,
"data-state": G(t.open),
...s,
ref: c,
onClick: P(e.onClick, t.onOpenToggle)
}
);
return t.hasCustomAnchor ? i : /* @__PURE__ */ a(b, { asChild: !0, ...r, children: i });
}
);
M.displayName = D;
var A = "PopoverPortal", [re, ne] = y(A, {
forceMount: void 0
}), T = (e) => {
const { __scopePopover: o, forceMount: n, children: s, container: t } = e, r = d(A, o);
return /* @__PURE__ */ a(re, { scope: o, forceMount: n, children: /* @__PURE__ */ a(N, { present: n || r.open, children: /* @__PURE__ */ a(V, { asChild: !0, container: t, children: s }) }) });
};
T.displayName = A;
var v = "PopoverContent", k = p.forwardRef(
(e, o) => {
const n = ne(v, e.__scopePopover), { forceMount: s = n.forceMount, ...t } = e, r = d(v, e.__scopePopover);
return /* @__PURE__ */ a(N, { present: s || r.open, children: r.modal ? /* @__PURE__ */ a(se, { ...t, ref: o }) : /* @__PURE__ */ a(ce, { ...t, ref: o }) });
}
);
k.displayName = v;
var ae = X("PopoverContent.RemoveScroll"), se = p.forwardRef(
(e, o) => {
const n = d(v, e.__scopePopover), s = p.useRef(null), t = _(o, s), r = p.useRef(!1);
return p.useEffect(() => {
const c = s.current;
if (c) return W(c);
}, []), /* @__PURE__ */ a(Z, { as: ae, allowPinchZoom: !0, children: /* @__PURE__ */ a(
I,
{
...e,
ref: t,
trapFocus: n.open,
disableOutsidePointerEvents: !0,
onCloseAutoFocus: P(e.onCloseAutoFocus, (c) => {
var i;
c.preventDefault(), r.current || (i = n.triggerRef.current) == null || i.focus();
}),
onPointerDownOutside: P(
e.onPointerDownOutside,
(c) => {
const i = c.detail.originalEvent, l = i.button === 0 && i.ctrlKey === !0, u = i.button === 2 || l;
r.current = u;
},
{ checkForDefaultPrevented: !1 }
),
onFocusOutside: P(
e.onFocusOutside,
(c) => c.preventDefault(),
{ checkForDefaultPrevented: !1 }
)
}
) });
}
), ce = p.forwardRef(
(e, o) => {
const n = d(v, e.__scopePopover), s = p.useRef(!1), t = p.useRef(!1);
return /* @__PURE__ */ a(
I,
{
...e,
ref: o,
trapFocus: !1,
disableOutsidePointerEvents: !1,
onCloseAutoFocus: (r) => {
var c, i;
(c = e.onCloseAutoFocus) == null || c.call(e, r), r.defaultPrevented || (s.current || (i = n.triggerRef.current) == null || i.focus(), r.preventDefault()), s.current = !1, t.current = !1;
},
onInteractOutside: (r) => {
var l, u;
(l = e.onInteractOutside) == null || l.call(e, r), r.defaultPrevented || (s.current = !0, r.detail.originalEvent.type === "pointerdown" && (t.current = !0));
const c = r.target;
((u = n.triggerRef.current) == null ? void 0 : u.contains(c)) && r.preventDefault(), r.detail.originalEvent.type === "focusin" && t.current && r.preventDefault();
}
}
);
}
), I = p.forwardRef(
(e, o) => {
const {
__scopePopover: n,
trapFocus: s,
onOpenAutoFocus: t,
onCloseAutoFocus: r,
disableOutsidePointerEvents: c,
onEscapeKeyDown: i,
onPointerDownOutside: l,
onFocusOutside: u,
onInteractOutside: m,
...h
} = e, f = d(v, n), R = g(n);
return q(), /* @__PURE__ */ a(
B,
{
asChild: !0,
loop: !0,
trapped: s,
onMountAutoFocus: t,
onUnmountAutoFocus: r,
children: /* @__PURE__ */ a(
U,
{
asChild: !0,
disableOutsidePointerEvents: c,
onInteractOutside: m,
onEscapeKeyDown: i,
onPointerDownOutside: l,
onFocusOutside: u,
onDismiss: () => f.onOpenChange(!1),
children: /* @__PURE__ */ a(
ee,
{
"data-state": G(f.open),
role: "dialog",
id: f.contentId,
...R,
...h,
ref: o,
style: {
...h.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)"
}
}
)
}
)
}
);
}
), $ = "PopoverClose", H = p.forwardRef(
(e, o) => {
const { __scopePopover: n, ...s } = e, t = d($, n);
return /* @__PURE__ */ a(
E.button,
{
type: "button",
...s,
ref: o,
onClick: P(e.onClick, () => t.onOpenChange(!1))
}
);
}
);
H.displayName = $;
var ie = "PopoverArrow", L = p.forwardRef(
(e, o) => {
const { __scopePopover: n, ...s } = e, t = g(n);
return /* @__PURE__ */ a(Y, { ...t, ...s, ref: o });
}
);
L.displayName = ie;
function G(e) {
return e ? "open" : "closed";
}
var pe = F, le = M, ue = T, de = k, fe = H, ve = L;
const Ee = pe, ye = le, Pe = ve, Fe = ({
className: e,
...o
}) => /* @__PURE__ */ a(
"div",
{
className: C(
"flex flex-col space-y-1.5 text-center sm:text-left",
e
),
...o
}
), Se = ({ className: e, ...o }) => /* @__PURE__ */ a("h6", { className: C("text-lg font-semibold", e), ...o }), De = ({
className: e,
...o
}) => /* @__PURE__ */ a("p", { className: C("text-muted-foreground text-sm", e), ...o }), Me = () => /* @__PURE__ */ O(fe, { className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none", children: [
/* @__PURE__ */ a(j, { className: "size-4" }),
/* @__PURE__ */ a("span", { className: "sr-only", children: "Close" })
] }), Te = ({
className: e,
children: o,
align: n = "center",
sideOffset: s = 4,
arrow: t,
...r
}) => /* @__PURE__ */ a(ue, { children: /* @__PURE__ */ O(
de,
{
align: n,
sideOffset: s,
className: C(
"animate-entrance-fade-slide bg-popover text-popover-foreground z-50 w-72 rounded-md border p-4 shadow-sm outline-hidden",
e
),
...r,
children: [
o,
t && /* @__PURE__ */ a(Pe, { className: "fill-popover", width: 12, height: 8 })
]
}
) });
export {
Ee as P,
ye as a,
Pe as b,
Fe as c,
Se as d,
De as e,
Me as f,
Te as g
};