@stanfordspezi/spezi-web-design-system
Version:
Stanford Biodesign Digital Health Spezi Web Design System
330 lines (327 loc) • 9.99 kB
JavaScript
import { jsx as s, jsxs as m, Fragment as b } from "react/jsx-runtime";
import { c as p } from "./index-2NvaPZWc.mjs";
import { sizeToMaxWidthRecord as q } from "./utils/tailwind.js";
import { X as K } from "./x-DBA6k5_5.mjs";
import * as i from "react";
import { a as U, c as X, d as D, e as Y } from "./index-DqbtYIhp.mjs";
import { u as x, c as Z } from "./index-Bytw4Lqn.mjs";
import { u as R } from "./index-BR4tIz6o.mjs";
import { D as J } from "./index-C9uNU7u7.mjs";
import { P as Q, R as ee, h as te, u as oe, F as ne } from "./index-DdcLbo-g.mjs";
import { P as N } from "./index-ruMUvQgL.mjs";
import { P as v } from "./index-WWNfSPCj.mjs";
var y = "Dialog", [O, we] = X(y), [re, d] = O(y), I = (e) => {
const {
__scopeDialog: t,
children: n,
open: r,
defaultOpen: a,
onOpenChange: o,
modal: c = !0
} = e, l = i.useRef(null), u = i.useRef(null), [g = !1, h] = U({
prop: r,
defaultProp: a,
onChange: o
});
return /* @__PURE__ */ s(
re,
{
scope: t,
triggerRef: l,
contentRef: u,
contentId: R(),
titleId: R(),
descriptionId: R(),
open: g,
onOpenChange: h,
onOpenToggle: i.useCallback(() => h((V) => !V), [h]),
modal: c,
children: n
}
);
};
I.displayName = y;
var T = "DialogTrigger", A = i.forwardRef(
(e, t) => {
const { __scopeDialog: n, ...r } = e, a = d(T, n), o = x(t, a.triggerRef);
return /* @__PURE__ */ s(
v.button,
{
type: "button",
"aria-haspopup": "dialog",
"aria-expanded": a.open,
"aria-controls": a.contentId,
"data-state": E(a.open),
...r,
ref: o,
onClick: D(e.onClick, a.onOpenToggle)
}
);
}
);
A.displayName = T;
var _ = "DialogPortal", [ae, M] = O(_, {
forceMount: void 0
}), w = (e) => {
const { __scopeDialog: t, forceMount: n, children: r, container: a } = e, o = d(_, t);
return /* @__PURE__ */ s(ae, { scope: t, forceMount: n, children: i.Children.map(r, (c) => /* @__PURE__ */ s(N, { present: n || o.open, children: /* @__PURE__ */ s(Q, { asChild: !0, container: a, children: c }) })) });
};
w.displayName = _;
var C = "DialogOverlay", F = i.forwardRef(
(e, t) => {
const n = M(C, e.__scopeDialog), { forceMount: r = n.forceMount, ...a } = e, o = d(C, e.__scopeDialog);
return o.modal ? /* @__PURE__ */ s(N, { present: r || o.open, children: /* @__PURE__ */ s(ie, { ...a, ref: t }) }) : null;
}
);
F.displayName = C;
var se = Z("DialogOverlay.RemoveScroll"), ie = i.forwardRef(
(e, t) => {
const { __scopeDialog: n, ...r } = e, a = d(C, n);
return (
// Make sure `Content` is scrollable even when it doesn't live inside `RemoveScroll`
// ie. when `Overlay` and `Content` are siblings
/* @__PURE__ */ s(ee, { as: se, allowPinchZoom: !0, shards: [a.contentRef], children: /* @__PURE__ */ s(
v.div,
{
"data-state": E(a.open),
...r,
ref: t,
style: { pointerEvents: "auto", ...r.style }
}
) })
);
}
), f = "DialogContent", S = i.forwardRef(
(e, t) => {
const n = M(f, e.__scopeDialog), { forceMount: r = n.forceMount, ...a } = e, o = d(f, e.__scopeDialog);
return /* @__PURE__ */ s(N, { present: r || o.open, children: o.modal ? /* @__PURE__ */ s(ce, { ...a, ref: t }) : /* @__PURE__ */ s(le, { ...a, ref: t }) });
}
);
S.displayName = f;
var ce = i.forwardRef(
(e, t) => {
const n = d(f, e.__scopeDialog), r = i.useRef(null), a = x(t, n.contentRef, r);
return i.useEffect(() => {
const o = r.current;
if (o) return te(o);
}, []), /* @__PURE__ */ s(
$,
{
...e,
ref: a,
trapFocus: n.open,
disableOutsidePointerEvents: !0,
onCloseAutoFocus: D(e.onCloseAutoFocus, (o) => {
var c;
o.preventDefault(), (c = n.triggerRef.current) == null || c.focus();
}),
onPointerDownOutside: D(e.onPointerDownOutside, (o) => {
const c = o.detail.originalEvent, l = c.button === 0 && c.ctrlKey === !0;
(c.button === 2 || l) && o.preventDefault();
}),
onFocusOutside: D(
e.onFocusOutside,
(o) => o.preventDefault()
)
}
);
}
), le = i.forwardRef(
(e, t) => {
const n = d(f, e.__scopeDialog), r = i.useRef(!1), a = i.useRef(!1);
return /* @__PURE__ */ s(
$,
{
...e,
ref: t,
trapFocus: !1,
disableOutsidePointerEvents: !1,
onCloseAutoFocus: (o) => {
var c, l;
(c = e.onCloseAutoFocus) == null || c.call(e, o), o.defaultPrevented || (r.current || (l = n.triggerRef.current) == null || l.focus(), o.preventDefault()), r.current = !1, a.current = !1;
},
onInteractOutside: (o) => {
var u, g;
(u = e.onInteractOutside) == null || u.call(e, o), o.defaultPrevented || (r.current = !0, o.detail.originalEvent.type === "pointerdown" && (a.current = !0));
const c = o.target;
((g = n.triggerRef.current) == null ? void 0 : g.contains(c)) && o.preventDefault(), o.detail.originalEvent.type === "focusin" && a.current && o.preventDefault();
}
}
);
}
), $ = i.forwardRef(
(e, t) => {
const { __scopeDialog: n, trapFocus: r, onOpenAutoFocus: a, onCloseAutoFocus: o, ...c } = e, l = d(f, n), u = i.useRef(null), g = x(t, u);
return oe(), /* @__PURE__ */ m(b, { children: [
/* @__PURE__ */ s(
ne,
{
asChild: !0,
loop: !0,
trapped: r,
onMountAutoFocus: a,
onUnmountAutoFocus: o,
children: /* @__PURE__ */ s(
J,
{
role: "dialog",
id: l.contentId,
"aria-describedby": l.descriptionId,
"aria-labelledby": l.titleId,
"data-state": E(l.open),
...c,
ref: g,
onDismiss: () => l.onOpenChange(!1)
}
)
}
),
/* @__PURE__ */ m(b, { children: [
/* @__PURE__ */ s(de, { titleId: l.titleId }),
/* @__PURE__ */ s(fe, { contentRef: u, descriptionId: l.descriptionId })
] })
] });
}
), P = "DialogTitle", W = i.forwardRef(
(e, t) => {
const { __scopeDialog: n, ...r } = e, a = d(P, n);
return /* @__PURE__ */ s(v.h2, { id: a.titleId, ...r, ref: t });
}
);
W.displayName = P;
var k = "DialogDescription", G = i.forwardRef(
(e, t) => {
const { __scopeDialog: n, ...r } = e, a = d(k, n);
return /* @__PURE__ */ s(v.p, { id: a.descriptionId, ...r, ref: t });
}
);
G.displayName = k;
var L = "DialogClose", z = i.forwardRef(
(e, t) => {
const { __scopeDialog: n, ...r } = e, a = d(L, n);
return /* @__PURE__ */ s(
v.button,
{
type: "button",
...r,
ref: t,
onClick: D(e.onClick, () => a.onOpenChange(!1))
}
);
}
);
z.displayName = L;
function E(e) {
return e ? "open" : "closed";
}
var j = "DialogTitleWarning", [Fe, B] = Y(j, {
contentName: f,
titleName: P,
docsSlug: "dialog"
}), de = ({ titleId: e }) => {
const t = B(j), n = `\`${t.contentName}\` requires a \`${t.titleName}\` for the component to be accessible for screen reader users.
If you want to hide the \`${t.titleName}\`, you can wrap it with our VisuallyHidden component.
For more information, see https://radix-ui.com/primitives/docs/components/${t.docsSlug}`;
return i.useEffect(() => {
e && (document.getElementById(e) || console.error(n));
}, [n, e]), null;
}, ue = "DialogDescriptionWarning", fe = ({ contentRef: e, descriptionId: t }) => {
const r = `Warning: Missing \`Description\` or \`aria-describedby={undefined}\` for {${B(ue).contentName}}.`;
return i.useEffect(() => {
var o;
const a = (o = e.current) == null ? void 0 : o.getAttribute("aria-describedby");
t && a && (document.getElementById(t) || console.warn(r));
}, [r, e, t]), null;
}, ge = I, pe = A, me = w, De = F, ve = S, Ce = W, he = G, H = z;
const Se = ge, $e = pe, Re = me, We = H, xe = ({
className: e,
...t
}) => /* @__PURE__ */ s(
De,
{
className: p(
"animate-entrance-fade fixed inset-0 z-50 bg-black/20",
e
),
...t
}
), ke = ({
className: e,
children: t,
size: n = "lg",
...r
}) => /* @__PURE__ */ m(Re, { children: [
/* @__PURE__ */ s(xe, {}),
/* @__PURE__ */ m(
ve,
{
className: p(
"animate-entrance-fade-zoom bg-surface fixed top-[50%] left-[50%] z-50 grid w-full translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg sm:rounded-lg",
n && q[n],
e
),
...r,
children: [
t,
/* @__PURE__ */ m(H, { 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__ */ s(K, { className: "size-4" }),
/* @__PURE__ */ s("span", { className: "sr-only", children: "Close" })
] })
]
}
)
] }), Ge = ({
className: e,
...t
}) => /* @__PURE__ */ s(
"div",
{
className: p(
"flex flex-col space-y-1.5 text-center sm:text-left",
e
),
...t
}
), Le = ({
className: e,
...t
}) => /* @__PURE__ */ s(
"div",
{
className: p(
"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
e
),
...t
}
), ze = ({
className: e,
...t
}) => /* @__PURE__ */ s(
Ce,
{
className: p("text-lg font-semibold", e),
...t
}
), je = ({
className: e,
...t
}) => /* @__PURE__ */ s(
he,
{
className: p("text-muted-foreground text-sm", e),
...t
}
);
export {
Se as D,
$e as a,
Re as b,
We as c,
xe as d,
ke as e,
Ge as f,
Le as g,
ze as h,
je as i
};