@jfrader/ui 0.4.0 → 0.5.0

package/dist/toast-BHxI32ZA.js

@@ -0,0 +1,352 @@
+'use client';
+import { r as e, t } from "./sx-Dx9JUKp5.js";
+import { n, r } from "./media-8yrN85VT.js";
+import { t as i } from "./renderable-DzcIj1Lo.js";
+import { t as a } from "./button-C92uYFJW.js";
+import { i as o, t as s } from "./theme-scope-t7nAKc2c.js";
+import { t as c } from "./spinner-DtxvDPdM.js";
+import { createContext as l, useCallback as u, useContext as d, useEffect as f, useId as p, useLayoutEffect as m, useMemo as h, useRef as g, useState as _ } from "react";
+import { vars as v } from "@jfrader/tokens/vars";
+import { Fragment as y, jsx as b, jsxs as x } from "@emotion/react/jsx-runtime";
+import { createPortal as S } from "react-dom";
+//#region src/components/toast/toast.tsx
+var C = 4, w = 5e3, T = "Dismiss", E = 100, D = "min(380px, calc(100vw - 32px))", O = "3px", k = l(null), A = l(null), j = e({
+	position: "fixed",
+	insetBlockEnd: 0,
+	insetInlineEnd: 0,
+	display: "flex",
+	flexDirection: "column",
+	gap: v.space[2],
+	inlineSize: D,
+	margin: 0,
+	paddingInlineEnd: v.space[4],
+	paddingBlockEnd: v.space[4],
+	pointerEvents: "none",
+	fontFamily: v.font.sans
+}), M = e({
+	boxSizing: "border-box",
+	display: "grid",
+	gridTemplateColumns: "minmax(0, 1fr) auto",
+	alignItems: "start",
+	gap: v.space[2],
+	backgroundColor: v.color.surfaceRaised,
+	border: `1px solid ${v.color.border}`,
+	borderRadius: v.radius.lg,
+	boxShadow: v.shadow.floating,
+	padding: v.space[3],
+	color: v.color.text,
+	lineHeight: v.lineHeight.base,
+	pointerEvents: "auto",
+	transitionProperty: "opacity, transform",
+	transitionDuration: v.motion.duration.base,
+	transitionTimingFunction: v.motion.easeStandard,
+	"&[data-populated=\"false\"][data-exposed=\"true\"]": { opacity: 0 },
+	"&[data-state=\"closing\"]": {
+		opacity: 0,
+		transform: `translateY(${v.space[2]})`,
+		pointerEvents: "none"
+	},
+	[r]: {
+		transitionDuration: "0s",
+		transform: "none"
+	},
+	[n]: {
+		backgroundColor: "Canvas",
+		color: "CanvasText",
+		borderColor: "CanvasText"
+	}
+}), N = {
+	neutral: e({ borderInlineStart: `${O} solid ${v.color.borderStrong}` }),
+	success: e({ borderInlineStart: `${O} solid ${v.color.success}` }),
+	danger: e({ borderInlineStart: `${O} solid ${v.color.danger}` }),
+	info: e({ borderInlineStart: `${O} solid ${v.color.info}` }),
+	warning: e({ borderInlineStart: `${O} solid ${v.color.warning}` })
+}, P = e({
+	display: "grid",
+	gap: v.space[1],
+	alignSelf: "center",
+	minInlineSize: 0
+}), F = e({
+	margin: 0,
+	fontSize: v.textSize.sm,
+	fontWeight: v.fontWeight.semibold
+}), I = e({
+	margin: 0,
+	fontSize: v.textSize.sm,
+	color: v.color.textMuted
+}), L = e({
+	gridColumn: 2,
+	gridRow: 1,
+	inlineSize: "32px",
+	paddingInline: 0
+}), R = e({ display: "contents" }), z = e({
+	gridColumn: "1 / -1",
+	display: "flex",
+	gap: v.space[2]
+});
+function B(e) {
+	let t = d(A);
+	if (!t) throw Error(`Toast.${e} must be rendered inside <Toast.Provider>.`);
+	return t;
+}
+function V() {
+	let e = d(k);
+	if (!e) throw Error("useToast() must be called inside <Toast.Provider>.");
+	return e;
+}
+function H({ children: e, max: t = C, duration: n = w, dismissLabel: r = T }) {
+	let i = p(), a = g(0), [o, s] = _([]), c = g([]), l = g(/* @__PURE__ */ new Map()), d = g(null), f = g(0), v = u(() => (f.current += 1, process.env.NODE_ENV !== "production" && f.current > 1 && console.warn("Mount only one Toast queue renderer per provider."), () => {
+		--f.current;
+	}), []), y = Math.max(1, Math.floor(Number.isFinite(t) ? t : C)), x = u((e, t) => {
+		t ? l.current.set(e, t) : l.current.delete(e);
+	}, []), S = u((e, t) => {
+		for (let n of e) {
+			let e = l.current.get(n.id);
+			if (!e?.contains(e.ownerDocument.activeElement)) continue;
+			let r = e.closest("[data-ui=\"toast-stack-list\"], [data-ui=\"toast-viewport\"]") ?? e.parentElement;
+			r && (d.current = {
+				container: r,
+				ids: new Set(t.filter((e) => e.state === "open").map((e) => e.id))
+			});
+			break;
+		}
+	}, []);
+	m(() => {
+		let e = d.current;
+		e && (d.current = null, Array.from(e.container.querySelectorAll("[data-ui=\"toast\"]")).find((t) => e.ids.has(t.dataset.toastId))?.querySelector("[data-toast-dismiss]")?.focus());
+	}, [o]);
+	let E = u((e) => {
+		a.current += 1;
+		let t = `${i}toast-${a.current}`, r = {
+			id: t,
+			options: {
+				...e,
+				duration: e.duration === void 0 ? e.loading ? null : n : e.duration
+			},
+			state: "open"
+		}, o = c.current, l = [...o, r].slice(-y);
+		return S(o.filter((e) => !l.includes(e)), l), c.current = l, s(l), t;
+	}, [
+		i,
+		y,
+		n,
+		S
+	]), D = u((e, t) => {
+		let r = c.current.map((r) => {
+			if (r.id !== e || r.state !== "open") return r;
+			let i = {
+				...r.options,
+				...t
+			};
+			return i.duration = t.duration === void 0 ? t.loading === void 0 ? r.options.duration : t.loading ? null : n : t.duration, {
+				...r,
+				options: i
+			};
+		});
+		c.current = r, s(r);
+	}, [n]), O = u((e) => {
+		let t = c.current;
+		S(t.filter((t) => t.id === e), t.filter((t) => t.id !== e));
+		let n = t.map((t) => t.id === e && t.state === "open" ? {
+			...t,
+			state: "closing"
+		} : t);
+		c.current = n, s(n);
+	}, [S]), j = u((e) => {
+		let t = c.current, n = t.filter((t) => t.id !== e);
+		S(t.filter((t) => t.id === e), n), c.current = n, s(n);
+	}, [S]), M = h(() => ({
+		toast: E,
+		dismiss: O,
+		update: D
+	}), [
+		E,
+		O,
+		D
+	]), N = h(() => ({
+		toasts: o,
+		dismiss: O,
+		remove: j,
+		registerRoot: x,
+		dismissLabel: r,
+		registerRenderer: v
+	}), [
+		o,
+		O,
+		j,
+		x,
+		r,
+		v
+	]);
+	return /* @__PURE__ */ b(k.Provider, {
+		value: M,
+		children: /* @__PURE__ */ b(A.Provider, {
+			value: N,
+			children: e
+		})
+	});
+}
+H.displayName = "Toast.Provider";
+function U({ ref: e, className: n, sx: r, ...i }) {
+	let { toasts: a, registerRenderer: o } = B("Viewport");
+	return f(o, [o]), /* @__PURE__ */ b(W, { children: /* @__PURE__ */ b(t, {
+		className: n,
+		styles: j,
+		sx: r,
+		children: (t) => /* @__PURE__ */ b("div", {
+			...i,
+			ref: e,
+			"data-ui": "toast-viewport",
+			className: t,
+			children: a.map((e) => /* @__PURE__ */ b(G, { record: e }, e.id))
+		})
+	}) });
+}
+function W({ children: e, contained: t = !1 }) {
+	let n = g(null), [r, i] = _(null), a = o()?.portalContainer, c = a === void 0 ? r : a;
+	return f(() => {
+		i(n.current?.ownerDocument.body ?? null);
+	}, []), /* @__PURE__ */ x(y, { children: [/* @__PURE__ */ b("span", {
+		hidden: !0,
+		ref: n
+	}), t ? e : c && S(/* @__PURE__ */ b(s, { children: e }), c)] });
+}
+U.displayName = "Toast.Viewport";
+function G({ record: e, exposed: t = !0, paused: n = !1, style: r, className: o, escapeDismiss: s = !1 }) {
+	let { dismiss: l, remove: d, registerRoot: p, dismissLabel: m } = B("Viewport"), { id: h, options: v, state: S } = e, { title: C, description: w, tone: T = "neutral", action: D, loading: O } = v, k = v.duration, A = g(null), j = u((e) => {
+		A.current = e, p(h, e);
+	}, [h, p]), [V, H] = _(!1), [U, W] = _(!1), [G, q] = _(!1), J = g(k ?? 0), [Y, X] = _(!1);
+	f(() => {
+		let e = A.current?.ownerDocument;
+		if (!e) return;
+		let t = () => X(e.hidden);
+		return t(), e.addEventListener("visibilitychange", t), () => e.removeEventListener("visibilitychange", t);
+	}, []), f(() => {
+		J.current = k ?? 0;
+	}, [k]), f(() => {
+		if (!t || V) return;
+		let e = setTimeout(() => H(!0), E);
+		return () => clearTimeout(e);
+	}, [t, V]);
+	let Z = V && t && !n && !Y && S === "open" && k !== null && !U && !G;
+	return f(() => {
+		if (!Z) return;
+		let e = performance.now(), t = setTimeout(() => l(h), J.current);
+		return () => {
+			clearTimeout(t), J.current -= performance.now() - e;
+		};
+	}, [
+		Z,
+		l,
+		h,
+		k
+	]), f(() => {
+		if (S !== "closing") return;
+		let e = A.current, t = e && typeof e.getAnimations == "function" ? e.getAnimations() : [], n = !1;
+		return Promise.allSettled(t.map((e) => e.finished)).then(() => {
+			n || d(h);
+		}), () => {
+			n = !0;
+		};
+	}, [
+		S,
+		d,
+		h
+	]), /* @__PURE__ */ x("div", {
+		ref: j,
+		inert: S === "closing" || !t,
+		"aria-hidden": S === "closing" || !t || void 0,
+		"data-toast-id": h,
+		style: r,
+		className: o,
+		onKeyDown: (e) => {
+			s && e.key === "Escape" && !e.defaultPrevented && (e.preventDefault(), e.stopPropagation(), l(h));
+		},
+		"data-ui": "toast",
+		"data-tone": T,
+		"data-state": S,
+		"data-populated": V,
+		"data-exposed": t,
+		onPointerEnter: () => W(!0),
+		onPointerLeave: () => W(!1),
+		onFocus: () => q(!0),
+		onBlur: (e) => {
+			e.currentTarget.contains(e.relatedTarget) || q(!1);
+		},
+		css: [M, N[T]],
+		children: [
+			/* @__PURE__ */ b("div", {
+				role: T === "danger" ? "alert" : "status",
+				"aria-atomic": "true",
+				css: P,
+				children: V && /* @__PURE__ */ x(y, { children: [i(C) && /* @__PURE__ */ b("div", {
+					css: F,
+					children: C
+				}), i(w) && /* @__PURE__ */ b("div", {
+					css: I,
+					children: w
+				})] })
+			}),
+			O && /* @__PURE__ */ b(c, {
+				"aria-hidden": "true",
+				label: "",
+				size: "sm"
+			}),
+			(V || s && t) && /* @__PURE__ */ x("div", {
+				css: R,
+				children: [/* @__PURE__ */ b(a, {
+					variant: "ghost",
+					size: "sm",
+					"aria-label": m,
+					"data-toast-dismiss": "",
+					onClick: () => l(h),
+					css: L,
+					children: /* @__PURE__ */ b(K, {})
+				}), D && /* @__PURE__ */ b("div", {
+					css: z,
+					children: /* @__PURE__ */ b(a, {
+						variant: "outline",
+						size: "sm",
+						onClick: (e) => {
+							D?.onClick(e), e.defaultPrevented || l(h);
+						},
+						children: D.label
+					})
+				})]
+			})
+		]
+	});
+}
+function K() {
+	return /* @__PURE__ */ x("svg", {
+		"aria-hidden": "true",
+		viewBox: "0 0 16 16",
+		width: "16",
+		height: "16",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		children: [/* @__PURE__ */ b("line", {
+			x1: "4",
+			y1: "4",
+			x2: "12",
+			y2: "12"
+		}), /* @__PURE__ */ b("line", {
+			x1: "12",
+			y1: "4",
+			x2: "4",
+			y2: "12"
+		})]
+	});
+}
+function q(e) {
+	return /* @__PURE__ */ b(H, { ...e });
+}
+q.displayName = "Toast";
+var J = Object.assign(q, {
+	Provider: H,
+	Viewport: U
+});
+//#endregion
+export { V as a, W as i, J as n, B as o, G as r, D as t };

package/dist/toast-stack-DqrAzdg5.js

@@ -0,0 +1,183 @@
+'use client';
+import { r as e, t } from "./sx-Dx9JUKp5.js";
+import { r as n } from "./media-8yrN85VT.js";
+import { t as r } from "./button-C92uYFJW.js";
+import { i, o as a, r as o, t as s } from "./toast-BHxI32ZA.js";
+import { useEffect as c, useId as l, useLayoutEffect as u, useRef as d, useState as f } from "react";
+import { vars as p } from "@jfrader/tokens/vars";
+import { jsx as m, jsxs as h } from "@emotion/react/jsx-runtime";
+//#region src/components/toast-stack/toast-stack.tsx
+var g = e({
+	position: "fixed",
+	insetBlockEnd: p.space[4],
+	insetInlineEnd: p.space[4],
+	inlineSize: s,
+	fontFamily: p.font.sans,
+	display: "grid",
+	gap: p.space[2],
+	maxBlockSize: `calc(100dvh - ${p.space[8]})`,
+	overflowY: "auto",
+	pointerEvents: "auto",
+	"&[data-empty=\"true\"]": { pointerEvents: "none" },
+	"&[data-contained=\"true\"]": {
+		position: "absolute",
+		maxInlineSize: `calc(100% - ${p.space[8]})`,
+		maxBlockSize: `calc(100% - ${p.space[8]})`
+	},
+	"&[data-position=\"bottom-start\"]": {
+		insetInlineEnd: "auto",
+		insetInlineStart: p.space[4]
+	},
+	"&[data-position=\"bottom-center\"]": {
+		insetInline: p.space[4],
+		marginInline: "auto"
+	},
+	"@media (max-width: 30rem)": { "&[data-position]": {
+		insetInline: p.space[4],
+		marginInline: "auto"
+	} }
+}), _ = e({
+	position: "relative",
+	blockSize: "var(--toast-stack-height, 0px)",
+	pointerEvents: "auto",
+	transitionProperty: "block-size",
+	transitionDuration: p.motion.duration.base,
+	transitionTimingFunction: p.motion.easeStandard,
+	[n]: { transitionDuration: "0s" }
+}), v = e({
+	position: "absolute",
+	insetInline: 0,
+	insetBlockEnd: "var(--toast-stack-offset, 0px)",
+	zIndex: "var(--toast-stack-order)",
+	transitionProperty: "opacity, inset-block-end",
+	transitionDuration: p.motion.duration.base,
+	transitionTimingFunction: p.motion.easeStandard,
+	"&[data-stack-visible=\"false\"]": { visibility: "hidden" },
+	[n]: { transitionDuration: "0s" }
+}), y = e({
+	pointerEvents: "auto",
+	justifySelf: "end",
+	minBlockSize: p.space[8]
+});
+function b({ ref: e, className: n, sx: i, variant: s = "stacked", position: b = "bottom-end", contained: x = !1, maxVisible: S = 3, label: C = "Notifications", hotkey: w = !1, expandLabel: T = "Expand notifications", collapseLabel: E = "Collapse notifications", slotProps: D, onPointerEnter: O, onPointerLeave: ee, onFocus: te, onBlur: ne, onKeyDown: k, ...A }) {
+	let { toasts: j, registerRenderer: M } = a("Stack"), N = d(null), P = d(null), F = l(), [I, L] = f(!1), [R, z] = f(!1), [B, V] = f(!1), [H, U] = f({}), W = d(/* @__PURE__ */ new Map()), G = [...j].reverse(), K = G.filter((e) => e.state === "open"), q = Math.max(1, Math.floor(Number.isFinite(S) ? S : 3)), J = s === "list" || I || R || B, Y = I || R || B;
+	c(M, [M]), c(() => {
+		K.length || V(!1);
+	}, [K.length]), u(() => {
+		let e = N.current;
+		R && e && !e.contains(e.ownerDocument.activeElement) && z(!1);
+	}, [j, R]), u(() => {
+		let e = P.current;
+		if (!e) return;
+		let t = () => {
+			let t = {};
+			e.querySelectorAll("[data-toast-id]").forEach((e) => {
+				t[e.dataset.toastId] = e.getBoundingClientRect().height;
+			}), U((e) => JSON.stringify(e) === JSON.stringify(t) ? e : t);
+		}, n = new ResizeObserver(t);
+		return Array.from(e.children).forEach((e) => n.observe(e)), t(), () => n.disconnect();
+	}, [j]), c(() => {
+		let e = N.current;
+		if (!e) return;
+		let t = e.ownerDocument, n = (t) => {
+			e.contains(t.target) || V(!1);
+		}, r = (t) => {
+			let n = t.target;
+			if (!w || !t.altKey || t.ctrlKey || t.metaKey || t.key.toLowerCase() !== "t" || t.defaultPrevented || n.closest("input, textarea, select, [contenteditable]:not([contenteditable=\"false\"])")) return;
+			let r = e.querySelector("[data-state=\"open\"] [data-toast-dismiss]");
+			r && (t.preventDefault(), V(!0), r.focus());
+		};
+		return t.addEventListener("pointerdown", n), t.addEventListener("keydown", r), () => {
+			t.removeEventListener("pointerdown", n), t.removeEventListener("keydown", r);
+		};
+	}, [w, j]);
+	let X = "0px", Z = /* @__PURE__ */ new Map(), Q = 0;
+	K.forEach((e, t) => {
+		Z.set(e.id, J ? `calc(${Q}px + ${t} * ${p.space[2]})` : `calc(${t} * ${p.space[3]})`), Q += H[e.id] ?? 0;
+	}), u(() => {
+		Z.forEach((e, t) => W.current.set(t, e));
+		for (let e of W.current.keys()) G.some((t) => t.id === e) || W.current.delete(e);
+	}), K.length && (X = J ? `calc(${Q}px + ${K.length - 1} * ${p.space[2]})` : `calc(${H[K[0].id] ?? 0}px + ${Math.min(K.length, q) - 1} * ${p.space[3]})`);
+	let $ = Math.max(0, K.length - q);
+	return /* @__PURE__ */ m(t, {
+		className: n,
+		styles: g,
+		sx: i,
+		children: (t) => /* @__PURE__ */ h("div", {
+			...A,
+			role: "region",
+			"aria-label": A["aria-label"] ?? (A["aria-labelledby"] ? void 0 : C),
+			className: t,
+			"data-ui": "toast-stack",
+			"data-empty": !K.length,
+			"data-contained": x,
+			"data-position": b,
+			"data-expanded": J,
+			ref: (t) => {
+				if (N.current = t, typeof e == "function") return e(t);
+				e && (e.current = t);
+			},
+			onPointerEnter: (e) => {
+				O?.(e), !e.defaultPrevented && e.pointerType !== "touch" && L(!0);
+			},
+			onPointerLeave: (e) => {
+				ee?.(e), e.defaultPrevented || L(!1);
+			},
+			onFocus: (e) => {
+				te?.(e), e.defaultPrevented || z(!0);
+			},
+			onBlur: (e) => {
+				ne?.(e), e.currentTarget.contains(e.relatedTarget) || z(!1);
+			},
+			onKeyDownCapture: (e) => {
+				A.onKeyDownCapture?.(e), k?.(e);
+			},
+			children: [s === "stacked" && K.length > 1 && /* @__PURE__ */ h(r, {
+				variant: "outline",
+				size: "sm",
+				"data-ui": "toast-stack-toggle",
+				"aria-expanded": J,
+				"aria-controls": F,
+				"aria-label": J ? E : T,
+				className: D?.toggle?.className,
+				css: [y, D?.toggle?.css],
+				onClick: () => V((e) => !e),
+				children: [J ? E : T, $ > 0 && ` (+${new Intl.NumberFormat().format($)})`]
+			}), /* @__PURE__ */ m("div", {
+				id: F,
+				ref: P,
+				"data-ui": "toast-stack-list",
+				className: D?.list?.className,
+				css: [_, D?.list?.css],
+				style: { "--toast-stack-height": X },
+				children: G.map((e) => {
+					let t = K.indexOf(e), n = e.state === "closing" || t >= 0 && (J || t < q);
+					return /* @__PURE__ */ m("div", {
+						"data-stack-visible": n,
+						css: v,
+						style: {
+							"--toast-stack-offset": Z.get(e.id) ?? W.current.get(e.id) ?? "0px",
+							"--toast-stack-order": G.length - G.indexOf(e)
+						},
+						children: /* @__PURE__ */ m(o, {
+							record: e,
+							exposed: t >= 0 && (J || t === 0),
+							paused: Y,
+							escapeDismiss: !0,
+							style: !J && t > 0 ? { minBlockSize: H[K[0].id] } : void 0
+						})
+					}, e.id);
+				})
+			})]
+		})
+	});
+}
+function x(e) {
+	return /* @__PURE__ */ m(i, {
+		contained: e.contained,
+		children: /* @__PURE__ */ m(b, { ...e })
+	});
+}
+x.displayName = "ToastStack";
+//#endregion
+export { x as t };

package/dist/toast-stack.js

@@ -0,0 +1,2 @@
+'use client';
+export { t as ToastStack } from "./toast-stack-DqrAzdg5.js";

package/dist/toast.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as Toast, n as useToast } from "./toast-CjmELMZZ.js";
+export { n as Toast, a as useToast } from "./toast-BHxI32ZA.js";

package/dist/{toggle-group-CI0e7hFm.js → toggle-group-fcjzpifI.js}

@@ -1,9 +1,9 @@
 'use client';
 import { r as e, t } from "./sx-Dx9JUKp5.js";
 import { t as n } from "./focus-ring-BK5W5_NY.js";
-import { n as r, t as i } from "./media-D_eA_I-e.js";
+import { n as r, r as i } from "./media-8yrN85VT.js";
 import { n as a, r as o, t as s } from "./roving-focus-CYlo_Kf8.js";
-import { t as c } from "./use-controlled-state-CVXDa-qM.js";
+import { t as c } from "./use-controlled-state-DpeVQZNR.js";
 import { createContext as l, useContext as u, useEffect as d, useImperativeHandle as f, useMemo as p, useRef as m, useState as h } from "react";
 import { vars as g } from "@jfrader/tokens/vars";
 import { jsx as _ } from "@emotion/react/jsx-runtime";
@@ -72,8 +72,8 @@ var b = [], x = (e, t) => {
 		cursor: "not-allowed"
 	},
 	"&:focus-visible": { ...n },
-	[r]: { transitionDuration: "0s" },
-	[i]: { "&[aria-pressed=\"true\"]": {
+	[i]: { transitionDuration: "0s" },
+	[r]: { "&[aria-pressed=\"true\"]": {
 		backgroundColor: "SelectedItem",
 		borderColor: "SelectedItem",
 		color: "SelectedItemText"

package/dist/toggle-group.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as ToggleGroup } from "./toggle-group-CI0e7hFm.js";
+export { t as ToggleGroup } from "./toggle-group-fcjzpifI.js";

package/dist/tooltip-CkeiW9C1.js

@@ -0,0 +1,113 @@
+'use client';
+import { r as e, t } from "./sx-Dx9JUKp5.js";
+import { t as n } from "./use-controlled-state-DpeVQZNR.js";
+import { t as r } from "./trigger-style-B1KVC8O1.js";
+import { t as i } from "./overlay-layer-SeUyyEPD.js";
+import { t as a } from "./overlay-portal-C4JZFq2M.js";
+import { t as o } from "./use-overlay-floating-DvJifLpF.js";
+import { createContext as s, useContext as c, useMemo as l } from "react";
+import { vars as u } from "@jfrader/tokens/vars";
+import { jsx as d } from "@emotion/react/jsx-runtime";
+import { useDismiss as f, useFocus as p, useHover as m, useInteractions as h, useMergeRefs as g, useRole as _ } from "@floating-ui/react";
+//#region src/components/tooltip/tooltip.tsx
+var v = 300, y = 100, b = s(null);
+function x(e) {
+	let t = c(b);
+	if (!t) throw Error(`Tooltip.${e} must be rendered inside <Tooltip>.`);
+	return t;
+}
+var S = e({
+	boxSizing: "border-box",
+	backgroundColor: u.color.bgSoft,
+	border: `1px solid ${u.color.border}`,
+	borderRadius: u.radius.sm,
+	boxShadow: u.shadow.raised,
+	padding: `${u.space[1]} ${u.space[2]}`,
+	maxInlineSize: "260px",
+	color: u.color.text,
+	fontFamily: u.font.sans,
+	fontSize: u.textSize.sm,
+	lineHeight: u.lineHeight.base
+});
+function C({ open: e, defaultOpen: t = !1, onOpenChange: r, placement: i = "top", openDelay: a = v, closeDelay: s = y, children: c }) {
+	let [u = !1, g] = n(e, t, r), { refs: x, floatingStyles: S, context: C } = o({
+		open: u,
+		placement: i,
+		onOpenChange: g
+	}), w = m(C, {
+		delay: {
+			open: a,
+			close: s
+		},
+		move: !1
+	}), T = p(C), E = f(C, { escapeKey: !0 }), D = _(C, { role: "tooltip" }), { getReferenceProps: O, getFloatingProps: k } = h([
+		w,
+		T,
+		E,
+		D
+	]), A = l(() => ({
+		open: u,
+		refs: x,
+		floatingStyles: S,
+		getReferenceProps: O,
+		getFloatingProps: k
+	}), [
+		u,
+		x,
+		S,
+		O,
+		k
+	]);
+	return /* @__PURE__ */ d(b.Provider, {
+		value: A,
+		children: c
+	});
+}
+function w(e) {
+	return /* @__PURE__ */ d(i, { children: /* @__PURE__ */ d(C, { ...e }) });
+}
+w.displayName = "Tooltip";
+function T({ ref: e, "aria-describedby": n, className: i, sx: a, ...o }) {
+	let { refs: s, getReferenceProps: c } = x("Trigger"), l = g([s.setReference, e]), u = c(o), f = [n, u["aria-describedby"]].filter(Boolean).join(" ") || void 0;
+	return /* @__PURE__ */ d(t, {
+		className: i,
+		styles: r,
+		sx: a,
+		children: (e) => /* @__PURE__ */ d("button", {
+			type: "button",
+			...u,
+			ref: l,
+			"aria-describedby": f,
+			"data-ui": "tooltip-trigger",
+			className: e
+		})
+	});
+}
+T.displayName = "Tooltip.Trigger";
+function E({ ref: e, style: n, className: r, sx: i, ...o }) {
+	let { open: s, refs: c, floatingStyles: l, getFloatingProps: u } = x("Content"), f = g([c.setFloating, e]);
+	if (!s) return null;
+	let { tabIndex: p, ...m } = u(o);
+	return /* @__PURE__ */ d(a, { children: /* @__PURE__ */ d(t, {
+		className: r,
+		styles: S,
+		sx: i,
+		children: (e) => /* @__PURE__ */ d("div", {
+			...m,
+			ref: f,
+			"data-ui": "tooltip",
+			style: {
+				...n,
+				...l
+			},
+			className: e
+		})
+	}) });
+}
+E.displayName = "Tooltip.Content";
+var D = Object.assign(w, {
+	Trigger: T,
+	Content: E
+});
+//#endregion
+export { D as t };

package/dist/tooltip.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as Tooltip } from "./tooltip-CaL3rKbV.js";
+export { t as Tooltip } from "./tooltip-CkeiW9C1.js";