@jfrader/ui 0.4.0 → 0.5.1

package/dist/hover-card-CoMJKg1g.js

@@ -0,0 +1,347 @@
+'use client';
+import { i as e, r as t, t as n } from "./sx-Dx9JUKp5.js";
+import { r } from "./media-8yrN85VT.js";
+import { t as i } from "./use-controlled-state-DpeVQZNR.js";
+import { t as a } from "./renderable-DzcIj1Lo.js";
+import { t as o } from "./avatar-CaGJHy1N.js";
+import { n as s } from "./surface-DZ4d-2aL.js";
+import { t as c } from "./trigger-style-B1KVC8O1.js";
+import { a as l, i as u } from "./overlay-layer-qEbpEtb8.js";
+import { t as d } from "./overlay-portal-C4JZFq2M.js";
+import { t as f } from "./use-overlay-floating-Bx2jBKAA.js";
+import { createContext as p, useCallback as m, useContext as h, useEffect as g, useMemo as _, useRef as v, useState as y } from "react";
+import { vars as b } from "@jfrader/tokens/vars";
+import { jsx as x, jsxs as S } from "@emotion/react/jsx-runtime";
+import { safePolygon as C, useFocus as ee, useHover as w, useInteractions as T, useMergeRefs as E, useRole as D } from "@floating-ui/react";
+//#region src/components/hover-card/hover-card.tsx
+var O = 500, k = 140, A = 300, j = 80, M = "18.5rem", N = p(null), P = p(null);
+function F(e) {
+	let t = h(N);
+	if (!t) throw Error(`HoverCard.${e} must be rendered inside <HoverCard>.`);
+	return t;
+}
+var I = (e, t) => Number.isFinite(e) && e >= 0 ? e : t, L = (e) => e != null && e.ownerDocument.activeElement === e && e.matches(":focus-visible");
+function R(e, t) {
+	let n = v(null);
+	return _(() => ({ reference: {
+		onPointerDown: (t) => {
+			n.current = t.pointerType === "touch" ? { wasOpen: e } : null;
+		},
+		onClick: (r) => {
+			let i = n.current;
+			n.current = null, !r.defaultPrevented && (i ? t(!i.wasOpen) : e || t(!0));
+		}
+	} }), [e, t]);
+}
+var z = b.space[1], B = e({
+	from: {
+		opacity: 0,
+		transform: "translate(var(--hover-card-enter-x, 0), var(--hover-card-enter-y, 0))"
+	},
+	to: {
+		opacity: 1,
+		transform: "none"
+	}
+}), V = e({
+	from: { opacity: 0 },
+	to: { opacity: 1 }
+}), H = t({
+	...s,
+	borderRadius: b.radius.lg,
+	boxShadow: b.shadow.floating,
+	padding: b.space[4],
+	inlineSize: `min(${M}, calc(100vw - 2 * ${b.space[4]}))`,
+	fontSize: b.textSize.sm,
+	textAlign: "start",
+	overflowWrap: "anywhere",
+	animation: `${B} ${b.motion.duration.base} ${b.motion.easeStandard}`,
+	"&[data-side=\"bottom\"]": { "--hover-card-enter-y": `calc(-1 * ${z})` },
+	"&[data-side=\"top\"]": { "--hover-card-enter-y": z },
+	"&[data-side=\"left\"]": { "--hover-card-enter-x": z },
+	"&[data-side=\"right\"]": { "--hover-card-enter-x": `calc(-1 * ${z})` },
+	"&[data-entry=\"warm\"]": { animation: `${V} ${b.motion.duration.fast} ${b.motion.easeStandard}` },
+	[r]: { "&, &[data-entry=\"warm\"]": { animation: "none" } }
+});
+function U({ value: e, defaultValue: t = null, onValueChange: n, skipDelay: r = A, intentDelay: a = j, children: o }) {
+	let [s = null, c] = i(e, t, n), l = I(r, A), u = v(/* @__PURE__ */ new Map()), [d, f] = y(() => ({
+		active: s,
+		warm: !1,
+		closedAt: -Infinity
+	}));
+	if (d.active !== s) {
+		let e = performance.now();
+		f({
+			active: s,
+			warm: d.active !== null || e - d.closedAt < l,
+			closedAt: s === null ? e : d.closedAt
+		});
+	}
+	let p = v(d);
+	g(() => {
+		p.current = d;
+	}, [d]);
+	let h = m(() => {
+		let { active: e, closedAt: t } = p.current;
+		return e !== null || performance.now() - t < l;
+	}, [l]), b = m((e) => {
+		let t = u.current;
+		return t.set(e, (t.get(e) ?? 0) + 1), () => {
+			let n = (t.get(e) ?? 1) - 1;
+			n > 0 ? t.set(e, n) : t.delete(e), queueMicrotask(() => {
+				!t.has(e) && p.current.active === e && c(null);
+			});
+		};
+	}, [c]), S = _(() => ({
+		active: s,
+		requestActive: c,
+		isWarm: h,
+		warmEntry: d.warm,
+		intentDelay: I(a, j),
+		register: b
+	}), [
+		s,
+		c,
+		h,
+		d.warm,
+		a,
+		b
+	]);
+	return /* @__PURE__ */ x(P.Provider, {
+		value: S,
+		children: o
+	});
+}
+U.displayName = "HoverCard.Group";
+function W({ nodeId: e, open: t, defaultOpen: n, onOpenChange: r, value: a, placement: o = "bottom-start", openDelay: s = O, closeDelay: c = k, children: u }) {
+	let d = h(P);
+	if (d) {
+		if (t !== void 0 || n !== void 0 || r !== void 0) throw Error("HoverCard inside <HoverCard.Group> takes no open/defaultOpen/onOpenChange; the group owns state.");
+		if (a === void 0) throw Error("HoverCard inside <HoverCard.Group> requires a `value`.");
+	}
+	let [p = !1, v] = i(d ? void 0 : t, d ? !1 : n ?? !1, d ? void 0 : r), y = d ? a : void 0, b = d ? d.active === y : p, S = m((e) => {
+		d ? e ? d.requestActive(y) : d.active === y && d.requestActive(null) : v(e);
+	}, [
+		d,
+		y,
+		v
+	]), E = d?.register;
+	g(() => {
+		if (E && y !== void 0) return E(y);
+	}, [E, y]);
+	let A = f({
+		open: b,
+		placement: o,
+		nodeId: e,
+		onOpenChange: (e, t, n) => {
+			(e || n !== "hover" && n !== "safe-polygon" || !L(A.refs.domReference.current)) && (!e && n === "escape-key" && t?.preventDefault(), S(e));
+		}
+	}), { refs: j, floatingStyles: M, context: F, placement: z } = A, B = b && d?.warmEntry === !0, V = I(s, O), H = I(c, k), U = w(F, {
+		delay: () => ({
+			open: d?.isWarm() ? d.intentDelay : V,
+			close: H
+		}),
+		mouseOnly: !0,
+		move: !1,
+		handleClose: C()
+	}), W = ee(F, { visibleOnly: !0 }), G = l(F, "leaf"), K = D(F, { role: "tooltip" }), q = R(b, S), { getReferenceProps: J, getFloatingProps: Y } = T([
+		U,
+		W,
+		...G,
+		K,
+		q
+	]), X = z.split("-")[0], Z = _(() => ({
+		open: b,
+		side: X,
+		refs: j,
+		floatingStyles: M,
+		getReferenceProps: J,
+		getFloatingProps: Y,
+		warmEntry: B
+	}), [
+		b,
+		X,
+		j,
+		M,
+		J,
+		Y,
+		B
+	]);
+	return /* @__PURE__ */ x(N.Provider, {
+		value: Z,
+		children: u
+	});
+}
+function G(e) {
+	return /* @__PURE__ */ x(u, { children: (t) => /* @__PURE__ */ x(W, {
+		...e,
+		nodeId: t
+	}) });
+}
+G.displayName = "HoverCard";
+function K({ ref: e = null, render: t, "aria-describedby": r, className: i, sx: a, ...o }) {
+	let { refs: s, getReferenceProps: l } = F("Trigger"), u = E([s.setReference, e]), { "data-ui": d, ...f } = o, p = l(f), m = [r, p["aria-describedby"]].filter(Boolean).join(" ") || void 0, h = {
+		...p,
+		ref: u,
+		"aria-describedby": m,
+		"data-ui": t && d !== void 0 ? `${d} hover-card-trigger` : "hover-card-trigger"
+	};
+	return /* @__PURE__ */ x(n, {
+		className: i,
+		styles: t ? void 0 : c,
+		sx: a,
+		children: (e) => t ? t({
+			...h,
+			className: e
+		}) : /* @__PURE__ */ x("button", {
+			type: "button",
+			...h,
+			className: e
+		})
+	});
+}
+K.displayName = "HoverCard.Trigger";
+function q({ ref: e, style: t, className: r, sx: i, ...a }) {
+	let { side: o, refs: s, floatingStyles: c, getFloatingProps: l, warmEntry: u } = F("Content"), [d] = y(() => {
+		let e = s.domReference.current;
+		return e?.ownerDocument.defaultView?.getComputedStyle(e).direction;
+	}), { tabIndex: f, ...p } = l(a);
+	return /* @__PURE__ */ x("div", {
+		ref: s.setFloating,
+		dir: d,
+		style: c,
+		children: /* @__PURE__ */ x(n, {
+			className: r,
+			styles: H,
+			sx: i,
+			children: (n) => /* @__PURE__ */ x("div", {
+				...p,
+				ref: e,
+				"data-ui": "hover-card",
+				"data-side": o,
+				"data-entry": u ? "warm" : "cold",
+				style: t,
+				className: n
+			})
+		})
+	});
+}
+function J(e) {
+	let { open: t } = F("Content");
+	return t ? /* @__PURE__ */ x(d, { children: /* @__PURE__ */ x(q, { ...e }) }) : null;
+}
+J.displayName = "HoverCard.Content";
+var Y = t({
+	display: "grid",
+	gap: b.space[3],
+	fontFamily: b.font.sans,
+	lineHeight: b.lineHeight.base,
+	color: b.color.text
+}), X = t({
+	display: "flex",
+	alignItems: "center",
+	gap: b.space[3],
+	minInlineSize: 0
+}), Z = t({
+	display: "inline-flex",
+	flexShrink: 0
+}), te = t({
+	display: "grid",
+	minInlineSize: 0
+}), ne = t({
+	fontSize: b.textSize.md,
+	fontWeight: b.fontWeight.medium
+}), Q = t({
+	fontSize: b.textSize.sm,
+	color: b.color.textMuted
+}), re = t({
+	display: "flex",
+	flexWrap: "wrap",
+	columnGap: b.space[6],
+	rowGap: b.space[2],
+	margin: 0
+}), ie = t({ display: "grid" }), ae = t({
+	fontSize: b.textSize.xs,
+	color: b.color.textMuted
+}), oe = t({
+	margin: 0,
+	fontSize: b.textSize.md,
+	fontWeight: b.fontWeight.medium,
+	fontVariantNumeric: "tabular-nums"
+}), se = t({
+	paddingBlockStart: b.space[3],
+	borderBlockStart: `1px solid ${b.color.borderSubtle}`,
+	fontSize: b.textSize.xs,
+	color: b.color.textMuted
+});
+function $({ ref: e, name: t, subtitle: r, bio: i, src: s, avatar: c, stats: l = [], meta: u, locale: d, slotProps: f, className: p, sx: m, ...h }) {
+	let g = l.some((e) => typeof e.value == "number") ? new Intl.NumberFormat(d) : void 0;
+	return /* @__PURE__ */ x(n, {
+		className: p,
+		styles: Y,
+		sx: m,
+		children: (n) => /* @__PURE__ */ S("div", {
+			...h,
+			ref: e,
+			"data-ui": "hover-card-profile",
+			className: n,
+			children: [
+				/* @__PURE__ */ S("div", {
+					css: X,
+					children: [/* @__PURE__ */ x("span", {
+						...f?.avatar,
+						"aria-hidden": "true",
+						css: [Z, f?.avatar?.css],
+						children: a(c) ? c : /* @__PURE__ */ x(o, {
+							name: t,
+							src: s,
+							size: "lg"
+						})
+					}), /* @__PURE__ */ S("div", {
+						...f?.identity,
+						css: [te, f?.identity?.css],
+						children: [/* @__PURE__ */ x("div", {
+							css: ne,
+							children: t
+						}), a(r) && /* @__PURE__ */ x("div", {
+							css: Q,
+							children: r
+						})]
+					})]
+				}),
+				a(i) && /* @__PURE__ */ x("div", {
+					...f?.bio,
+					css: [Q, f?.bio?.css],
+					children: i
+				}),
+				l.length > 0 && /* @__PURE__ */ x("dl", {
+					...f?.stats,
+					css: [re, f?.stats?.css],
+					children: l.map((e) => /* @__PURE__ */ S("div", {
+						css: ie,
+						children: [/* @__PURE__ */ x("dt", {
+							css: ae,
+							children: e.label
+						}), /* @__PURE__ */ x("dd", {
+							css: oe,
+							children: typeof e.value == "number" ? g?.format(e.value) : e.value
+						})]
+					}, e.id))
+				}),
+				a(u) && /* @__PURE__ */ x("div", {
+					...f?.meta,
+					css: [se, f?.meta?.css],
+					children: u
+				})
+			]
+		})
+	});
+}
+$.displayName = "HoverCard.Profile";
+var ce = Object.assign(G, {
+	Trigger: K,
+	Content: J,
+	Profile: $,
+	Group: U
+});
+//#endregion
+export { ce as t };

package/dist/hover-card.js

@@ -0,0 +1,2 @@
+'use client';
+export { t as HoverCard } from "./hover-card-CoMJKg1g.js";