@stanfordspezi/spezi-web-design-system
Version:
Stanford Biodesign Digital Health Spezi Web Design System
415 lines (414 loc) • 13.5 kB
JavaScript
import { jsx as u, jsxs as I } from "react/jsx-runtime";
import { c as X } from "./index-DG4iIeSU.mjs";
import { c as K } from "./index-2NvaPZWc.mjs";
import * as a from "react";
import { c as x } from "./index-hURUNS5V.mjs";
import { c as W, u as H, a as J } from "./index-D2LZVjSn.mjs";
import { c as Q } from "./index-DFZozV_h.mjs";
import { P as Z, D as ee } from "./index-DJ6gB4bU.mjs";
import { u as te } from "./index-C3vaq8Fy.mjs";
import { R as oe, a as re, c as G, C as ne, A as ae } from "./index-Ba44uSOb.mjs";
import { P as j } from "./index-DlW0DMEl.mjs";
import "react-dom";
import { u as se } from "./index-DOCb3WPZ.mjs";
import { R as ie } from "./index-CWjvisfz.mjs";
var le = [
"a",
"button",
"div",
"form",
"h2",
"h3",
"img",
"input",
"label",
"li",
"nav",
"ol",
"p",
"select",
"span",
"svg",
"ul"
], ce = le.reduce((t, o) => {
const e = W(`Primitive.${o}`), r = a.forwardRef((n, l) => {
const { asChild: s, ...d } = n, i = s ? e : o;
return typeof window < "u" && (window[/* @__PURE__ */ Symbol.for("radix-ui")] = !0), /* @__PURE__ */ u(i, { ...d, ref: l });
});
return r.displayName = `Primitive.${o}`, { ...t, [o]: r };
}, {}), [O] = Q("Tooltip", [
G
]), D = G(), $ = "TooltipProvider", ue = 700, A = "tooltip.open", [de, k] = O($), F = (t) => {
const {
__scopeTooltip: o,
delayDuration: e = ue,
skipDelayDuration: r = 300,
disableHoverableContent: n = !1,
children: l
} = t, s = a.useRef(!0), d = a.useRef(!1), i = a.useRef(0);
return a.useEffect(() => {
const f = i.current;
return () => window.clearTimeout(f);
}, []), /* @__PURE__ */ u(
de,
{
scope: o,
isOpenDelayedRef: s,
delayDuration: e,
onOpen: a.useCallback(() => {
window.clearTimeout(i.current), s.current = !1;
}, []),
onClose: a.useCallback(() => {
window.clearTimeout(i.current), i.current = window.setTimeout(
() => s.current = !0,
r
);
}, [r]),
isPointerInTransitRef: d,
onPointerInTransitChange: a.useCallback((f) => {
d.current = f;
}, []),
disableHoverableContent: n,
children: l
}
);
};
F.displayName = $;
var E = "Tooltip", [pe, _] = O(E), V = (t) => {
const {
__scopeTooltip: o,
children: e,
open: r,
defaultOpen: n,
onOpenChange: l,
disableHoverableContent: s,
delayDuration: d
} = t, i = k(E, t.__scopeTooltip), f = D(o), [c, v] = a.useState(null), m = te(), p = a.useRef(0), h = s ?? i.disableHoverableContent, g = d ?? i.delayDuration, T = a.useRef(!1), [y, C] = se({
prop: r,
defaultProp: n ?? !1,
onChange: (S) => {
S ? (i.onOpen(), document.dispatchEvent(new CustomEvent(A))) : i.onClose(), l?.(S);
},
caller: E
}), w = a.useMemo(() => y ? T.current ? "delayed-open" : "instant-open" : "closed", [y]), P = a.useCallback(() => {
window.clearTimeout(p.current), p.current = 0, T.current = !1, C(!0);
}, [C]), R = a.useCallback(() => {
window.clearTimeout(p.current), p.current = 0, C(!1);
}, [C]), M = a.useCallback(() => {
window.clearTimeout(p.current), p.current = window.setTimeout(() => {
T.current = !0, C(!0), p.current = 0;
}, g);
}, [g, C]);
return a.useEffect(() => () => {
p.current && (window.clearTimeout(p.current), p.current = 0);
}, []), /* @__PURE__ */ u(oe, { ...f, children: /* @__PURE__ */ u(
pe,
{
scope: o,
contentId: m,
open: y,
stateAttribute: w,
trigger: c,
onTriggerChange: v,
onTriggerEnter: a.useCallback(() => {
i.isOpenDelayedRef.current ? M() : P();
}, [i.isOpenDelayedRef, M, P]),
onTriggerLeave: a.useCallback(() => {
h ? R() : (window.clearTimeout(p.current), p.current = 0);
}, [R, h]),
onOpen: P,
onClose: R,
disableHoverableContent: h,
children: e
}
) });
};
V.displayName = E;
var L = "TooltipTrigger", B = a.forwardRef(
(t, o) => {
const { __scopeTooltip: e, ...r } = t, n = _(L, e), l = k(L, e), s = D(e), d = a.useRef(null), i = H(o, d, n.onTriggerChange), f = a.useRef(!1), c = a.useRef(!1), v = a.useCallback(() => f.current = !1, []);
return a.useEffect(() => () => document.removeEventListener("pointerup", v), [v]), /* @__PURE__ */ u(re, { asChild: !0, ...s, children: /* @__PURE__ */ u(
ce.button,
{
"aria-describedby": n.open ? n.contentId : void 0,
"data-state": n.stateAttribute,
...r,
ref: i,
onPointerMove: x(t.onPointerMove, (m) => {
m.pointerType !== "touch" && !c.current && !l.isPointerInTransitRef.current && (n.onTriggerEnter(), c.current = !0);
}),
onPointerLeave: x(t.onPointerLeave, () => {
n.onTriggerLeave(), c.current = !1;
}),
onPointerDown: x(t.onPointerDown, () => {
n.open && n.onClose(), f.current = !0, document.addEventListener("pointerup", v, { once: !0 });
}),
onFocus: x(t.onFocus, () => {
f.current || n.onOpen();
}),
onBlur: x(t.onBlur, n.onClose),
onClick: x(t.onClick, n.onClose)
}
) });
}
);
B.displayName = L;
var N = "TooltipPortal", [fe, ve] = O(N, {
forceMount: void 0
}), z = (t) => {
const { __scopeTooltip: o, forceMount: e, children: r, container: n } = t, l = _(N, o);
return /* @__PURE__ */ u(fe, { scope: o, forceMount: e, children: /* @__PURE__ */ u(j, { present: e || l.open, children: /* @__PURE__ */ u(Z, { asChild: !0, container: n, children: r }) }) });
};
z.displayName = N;
var b = "TooltipContent", U = a.forwardRef(
(t, o) => {
const e = ve(b, t.__scopeTooltip), { forceMount: r = e.forceMount, side: n = "top", ...l } = t, s = _(b, t.__scopeTooltip);
return /* @__PURE__ */ u(j, { present: r || s.open, children: s.disableHoverableContent ? /* @__PURE__ */ u(Y, { side: n, ...l, ref: o }) : /* @__PURE__ */ u(me, { side: n, ...l, ref: o }) });
}
), me = a.forwardRef((t, o) => {
const e = _(b, t.__scopeTooltip), r = k(b, t.__scopeTooltip), n = a.useRef(null), l = H(o, n), [s, d] = a.useState(null), { trigger: i, onClose: f } = e, c = n.current, { onPointerInTransitChange: v } = r, m = a.useCallback(() => {
d(null), v(!1);
}, [v]), p = a.useCallback(
(h, g) => {
const T = h.currentTarget, y = { x: h.clientX, y: h.clientY }, C = ye(y, T.getBoundingClientRect()), w = xe(y, C), P = be(g.getBoundingClientRect()), R = Pe([...w, ...P]);
d(R), v(!0);
},
[v]
);
return a.useEffect(() => () => m(), [m]), a.useEffect(() => {
if (i && c) {
const h = (T) => p(T, c), g = (T) => p(T, i);
return i.addEventListener("pointerleave", h), c.addEventListener("pointerleave", g), () => {
i.removeEventListener("pointerleave", h), c.removeEventListener("pointerleave", g);
};
}
}, [i, c, p, m]), a.useEffect(() => {
if (s) {
const h = (g) => {
const T = g.target, y = { x: g.clientX, y: g.clientY }, C = i?.contains(T) || c?.contains(T), w = !we(y, s);
C ? m() : w && (m(), f());
};
return document.addEventListener("pointermove", h), () => document.removeEventListener("pointermove", h);
}
}, [i, c, s, f, m]), /* @__PURE__ */ u(Y, { ...t, ref: l });
}), [he, Te] = O(E, { isInside: !1 }), ge = J("TooltipContent"), Y = a.forwardRef(
(t, o) => {
const {
__scopeTooltip: e,
children: r,
"aria-label": n,
onEscapeKeyDown: l,
onPointerDownOutside: s,
...d
} = t, i = _(b, e), f = D(e), { onClose: c } = i;
return a.useEffect(() => (document.addEventListener(A, c), () => document.removeEventListener(A, c)), [c]), a.useEffect(() => {
if (i.trigger) {
const v = (m) => {
m.target?.contains(i.trigger) && c();
};
return window.addEventListener("scroll", v, { capture: !0 }), () => window.removeEventListener("scroll", v, { capture: !0 });
}
}, [i.trigger, c]), /* @__PURE__ */ u(
ee,
{
asChild: !0,
disableOutsidePointerEvents: !1,
onEscapeKeyDown: l,
onPointerDownOutside: s,
onFocusOutside: (v) => v.preventDefault(),
onDismiss: c,
children: /* @__PURE__ */ I(
ne,
{
"data-state": i.stateAttribute,
...f,
...d,
ref: o,
style: {
...d.style,
"--radix-tooltip-content-transform-origin": "var(--radix-popper-transform-origin)",
"--radix-tooltip-content-available-width": "var(--radix-popper-available-width)",
"--radix-tooltip-content-available-height": "var(--radix-popper-available-height)",
"--radix-tooltip-trigger-width": "var(--radix-popper-anchor-width)",
"--radix-tooltip-trigger-height": "var(--radix-popper-anchor-height)"
},
children: [
/* @__PURE__ */ u(ge, { children: r }),
/* @__PURE__ */ u(he, { scope: e, isInside: !0, children: /* @__PURE__ */ u(ie, { id: i.contentId, role: "tooltip", children: n || r }) })
]
}
)
}
);
}
);
U.displayName = b;
var q = "TooltipArrow", Ce = a.forwardRef(
(t, o) => {
const { __scopeTooltip: e, ...r } = t, n = D(e);
return Te(
q,
e
).isInside ? null : /* @__PURE__ */ u(ae, { ...n, ...r, ref: o });
}
);
Ce.displayName = q;
function ye(t, o) {
const e = Math.abs(o.top - t.y), r = Math.abs(o.bottom - t.y), n = Math.abs(o.right - t.x), l = Math.abs(o.left - t.x);
switch (Math.min(e, r, n, l)) {
case l:
return "left";
case n:
return "right";
case e:
return "top";
case r:
return "bottom";
default:
throw new Error("unreachable");
}
}
function xe(t, o, e = 5) {
const r = [];
switch (o) {
case "top":
r.push(
{ x: t.x - e, y: t.y + e },
{ x: t.x + e, y: t.y + e }
);
break;
case "bottom":
r.push(
{ x: t.x - e, y: t.y - e },
{ x: t.x + e, y: t.y - e }
);
break;
case "left":
r.push(
{ x: t.x + e, y: t.y - e },
{ x: t.x + e, y: t.y + e }
);
break;
case "right":
r.push(
{ x: t.x - e, y: t.y - e },
{ x: t.x - e, y: t.y + e }
);
break;
}
return r;
}
function be(t) {
const { top: o, right: e, bottom: r, left: n } = t;
return [
{ x: n, y: o },
{ x: e, y: o },
{ x: e, y: r },
{ x: n, y: r }
];
}
function we(t, o) {
const { x: e, y: r } = t;
let n = !1;
for (let l = 0, s = o.length - 1; l < o.length; s = l++) {
const d = o[l], i = o[s], f = d.x, c = d.y, v = i.x, m = i.y;
c > r != m > r && e < (v - f) * (r - c) / (m - c) + f && (n = !n);
}
return n;
}
function Pe(t) {
const o = t.slice();
return o.sort((e, r) => e.x < r.x ? -1 : e.x > r.x ? 1 : e.y < r.y ? -1 : e.y > r.y ? 1 : 0), Re(o);
}
function Re(t) {
if (t.length <= 1) return t.slice();
const o = [];
for (let r = 0; r < t.length; r++) {
const n = t[r];
for (; o.length >= 2; ) {
const l = o[o.length - 1], s = o[o.length - 2];
if ((l.x - s.x) * (n.y - s.y) >= (l.y - s.y) * (n.x - s.x)) o.pop();
else break;
}
o.push(n);
}
o.pop();
const e = [];
for (let r = t.length - 1; r >= 0; r--) {
const n = t[r];
for (; e.length >= 2; ) {
const l = e[e.length - 1], s = e[e.length - 2];
if ((l.x - s.x) * (n.y - s.y) >= (l.y - s.y) * (n.x - s.x)) e.pop();
else break;
}
e.push(n);
}
return e.pop(), o.length === 1 && e.length === 1 && o[0].x === e[0].x && o[0].y === e[0].y ? o : o.concat(e);
}
var Ee = F, _e = V, Oe = B, Ke = z, De = U;
const Ae = Ee, Le = _e, ke = Oe, Ne = {
/**
* Controls the visual variant of the tooltip.
* - `default`: Similar to popover styling. Use for most cases when the tooltip needs to blend with the interface.
* - `inverted`: Inverted color styles. Use when higher contrast is needed or when the tooltip must stand out against busy backgrounds.
*
* @default "default"
*/
variant: {
default: "bg-popover text-popover-foreground",
inverted: "bg-inverted text-inverted-foreground"
}
}, Me = X(
"animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-max overflow-hidden rounded-sm border px-2 py-0.5 shadow-sm",
{
variants: Ne,
defaultVariants: {
variant: "default"
}
}
), Se = ({
className: t,
sideOffset: o = 4,
variant: e = "default",
...r
}) => /* @__PURE__ */ u(
De,
{
"data-slot": "tooltip-content",
"data-variant": e,
sideOffset: o,
className: K(Me({ variant: e, className: t })),
...r
}
), We = ({
children: t,
tooltip: o,
className: e,
sideOffset: r,
side: n,
variant: l,
delayDuration: s = 0,
...d
}) => /* @__PURE__ */ u(Ae, { children: /* @__PURE__ */ I(Le, { ...d, delayDuration: s, children: [
t && /* @__PURE__ */ u(ke, { asChild: !0, children: t }),
/* @__PURE__ */ u(
Se,
{
side: n,
sideOffset: r,
variant: l,
className: e,
children: o
}
)
] }) });
export {
Ke as P,
We as T,
Se as a,
Ae as b,
Le as c,
ke as d,
Ne as e,
Me as t
};