@jfrader/ui 0.4.0 → 0.5.1

package/dist/comment-thread.js

@@ -0,0 +1,2 @@
+'use client';
+export { t as CommentThread } from "./comment-thread-ASaXDcGo.js";

package/dist/context-menu-__1c2Dk9.js

@@ -0,0 +1,370 @@
+'use client';
+import { i as e, r as t, t as n } from "./sx-Dx9JUKp5.js";
+import { n as r, r as i } from "./media-8yrN85VT.js";
+import { t as a } from "./use-latest-callback-cj1OOQL6.js";
+import { t as o } from "./use-controlled-state-DpeVQZNR.js";
+import { t as s } from "./renderable-DzcIj1Lo.js";
+import { t as c } from "./icon-wrapper-stN8sD7R.js";
+import { t as l } from "./trigger-style-B1KVC8O1.js";
+import { s as u } from "./listbox-style-WX-RASp1.js";
+import { a as d, c as f, d as p, i as m, l as h, n as g, r as _, s as v, u as y } from "./menu-DDKgmK2F.js";
+import { createContext as b, useCallback as x, useContext as S, useEffect as C, useId as w, useLayoutEffect as T, useMemo as ee, useRef as E, useState as D } from "react";
+import { vars as O } from "@jfrader/tokens/vars";
+import { Fragment as te, jsx as k, jsxs as A } from "@emotion/react/jsx-runtime";
+import { useMergeRefs as j } from "@floating-ui/react";
+import { isEventTargetWithin as ne } from "@floating-ui/react/utils";
+//#region src/components/context-menu/context-menu.tsx
+var M = "ContextMenu", N = "13rem", P = "300px", re = 4, F = "--context-menu-origin", I = "--context-menu-available-inline", L = "--context-menu-available-block", R = b(null);
+function z(e) {
+	let t = S(R);
+	if (!t) throw Error(`${M}.${e} must be rendered inside <${M}>.`);
+	return t;
+}
+var B = (e) => {
+	let { x: t, y: n, width: r, height: i } = e.getBoundingClientRect();
+	return {
+		x: t,
+		y: n,
+		width: r,
+		height: i
+	};
+}, V = (e) => getComputedStyle(e).direction === "rtl", H = (e) => {
+	let t = B(e);
+	return {
+		...t,
+		x: V(e) ? t.x + t.width : t.x,
+		width: 0
+	};
+}, U = (e, t) => ({
+	x: e,
+	y: t,
+	width: 0,
+	height: 0
+}), ie = (e) => e.nativeEvent.pointerType === "" || e.clientX === 0 && e.clientY === 0, ae = (e) => e.key === "ContextMenu" || e.key === "F10" && e.shiftKey, oe = (e) => e.key === "Enter" || e.key === " ", se = (e) => Object.fromEntries(Object.entries(e).filter(([e]) => e.startsWith("aria-"))), ce = e({
+	from: {
+		opacity: 0,
+		scale: "0.98"
+	},
+	to: {
+		opacity: 1,
+		scale: "1"
+	}
+}), le = t({
+	label: "context-menu-target",
+	"&:focus-visible": {
+		outline: `2px solid ${O.color.focusRing}`,
+		outlineOffset: "2px"
+	}
+}), ue = t({
+	label: "context-menu",
+	borderColor: O.color.borderControl,
+	inlineSize: N,
+	minInlineSize: 0,
+	maxInlineSize: `var(${I}, ${N})`,
+	maxBlockSize: `min(${P}, var(${L}, ${P}))`,
+	overflowY: "auto",
+	overscrollBehavior: "contain",
+	fontSize: O.textSize.sm,
+	transformOrigin: `var(${F}, top left)`,
+	animation: `${ce} ${O.motion.duration.base} ${O.motion.easeStandard}`,
+	"&:focus-visible": {
+		outline: `2px solid ${O.color.focusRing}`,
+		outlineOffset: "2px"
+	},
+	[i]: { animation: "none" },
+	[r]: { borderColor: "ButtonText" }
+}), W = t({
+	gap: O.space[2],
+	lineHeight: O.lineHeight.base,
+	[r]: { "&[data-active]": {
+		outline: "2px solid Highlight",
+		outlineOffset: "-2px"
+	} }
+}), de = t({
+	flex: 1,
+	minInlineSize: 0,
+	overflowWrap: "anywhere"
+}), fe = t({
+	boxSizing: "border-box",
+	display: "inline-flex",
+	alignItems: "center",
+	justifyContent: "center",
+	flexShrink: 0,
+	inlineSize: "1rem",
+	blockSize: "1rem",
+	border: `1px solid ${O.color.borderControl}`,
+	borderRadius: O.radius.sm,
+	"& svg": {
+		inlineSize: "0.75rem",
+		blockSize: "0.75rem",
+		visibility: "hidden"
+	},
+	"&[data-state=\"checked\"] svg": { visibility: "visible" },
+	[r]: { borderColor: "ButtonText" }
+}), pe = /* @__PURE__ */ k("svg", {
+	viewBox: "0 0 16 16",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: "2",
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	children: /* @__PURE__ */ k("path", { d: "M3.5 8.5l3 3 6-7" })
+});
+function me({ available: e, children: t }) {
+	let { open: n, refs: r, requestOpen: i, requestClose: o } = p(M, "Root"), s = E(null), c = E(null), l = E(!1), [u, d] = D(null), [f, m] = D(), [h, g] = D(), _ = a(() => o(!1)), v = x((e, t) => {
+		r.setReference(e), r.setPositionReference({
+			getBoundingClientRect: () => DOMRect.fromRect(t),
+			contextElement: e
+		}), d(t), l.current = !0, queueMicrotask(() => l.current = !1);
+	}, [r]);
+	T(() => {
+		if (!n) return;
+		let e = s.current;
+		e && (m(V(e) ? "rtl" : "ltr"), l.current || v(e, H(e)));
+	}, [n, v]), C(() => {
+		let e = r.domReference.current;
+		if (!n || !e) return;
+		let t = e.ownerDocument, i = t.defaultView, a = !1, o = (e) => {
+			a || e.type === "scroll" && ne(e, r.floating.current) || (a = !0, _());
+		};
+		return t.addEventListener("scroll", o, {
+			capture: !0,
+			passive: !0
+		}), i?.addEventListener("resize", o), () => {
+			t.removeEventListener("scroll", o, { capture: !0 }), i?.removeEventListener("resize", o);
+		};
+	}, [
+		n,
+		r,
+		_
+	]);
+	let y = ee(() => ({
+		targetRef: s,
+		triggerRef: c,
+		anchorTo: v,
+		invoke: (e, t) => {
+			v(e, t), i();
+		},
+		anchor: u,
+		available: e,
+		direction: f,
+		targetLabel: h,
+		setTargetLabel: g
+	}), [
+		v,
+		i,
+		u,
+		e,
+		f,
+		h
+	]);
+	return /* @__PURE__ */ k(R.Provider, {
+		value: y,
+		children: t
+	});
+}
+function G({ open: e, defaultOpen: t = !1, onOpenChange: n, children: r }) {
+	let [i, a] = D();
+	return /* @__PURE__ */ k(_, {
+		open: e,
+		defaultOpen: t,
+		onOpenChange: n,
+		placement: "bottom-start",
+		positioning: {
+			strategy: "fixed",
+			gap: re,
+			transform: !1,
+			onAvailableSize: (e) => a((t) => t?.width === e.width && t.height === e.height ? t : e)
+		},
+		children: /* @__PURE__ */ k(me, {
+			available: i,
+			children: r
+		})
+	});
+}
+G.displayName = "ContextMenu";
+function K({ ref: e, id: t, openOnClick: r = !1, disabled: i = !1, "aria-labelledby": a, className: o, sx: s, ...c }) {
+	let l = z("Target"), { open: u, refs: d, requestClose: f, getReferenceProps: m } = p(M, "Target"), h = w(), g = t ?? h, _ = j([l.targetRef, e]), { setTargetLabel: y, triggerRef: b } = l;
+	T(() => (y(a ?? g), () => y(void 0)), [
+		a,
+		g,
+		y
+	]);
+	let x = (e) => b.current?.contains(e.target) ?? !1, S = i ? {} : {
+		...se(m()),
+		onContextMenu: (e) => {
+			e.preventDefault();
+			let t = e.currentTarget;
+			l.invoke(t, ie(e) ? H(t) : U(e.clientX, e.clientY));
+		},
+		onKeyDown: (e) => {
+			let t = r && oe(e) && e.target === e.currentTarget;
+			(ae(e) || t) && (e.preventDefault(), l.invoke(e.currentTarget, H(e.currentTarget)));
+		},
+		onMouseDown: (e) => {
+			u && e.button === 2 && e.preventDefault();
+		},
+		onPointerDown: (e) => {
+			!u || r || e.button !== 0 || e.ctrlKey || d.domReference.current !== e.currentTarget || x(e) || f(!1);
+		},
+		onClick: r ? (e) => {
+			e.detail === 0 || x(e) || l.invoke(e.currentTarget, U(e.clientX, e.clientY));
+		} : void 0
+	};
+	return /* @__PURE__ */ k(n, {
+		className: o,
+		styles: le,
+		sx: s,
+		children: (e) => /* @__PURE__ */ k("div", {
+			role: "group",
+			tabIndex: 0,
+			...v(c, (e) => ({
+				...e,
+				...S
+			})),
+			ref: _,
+			id: g,
+			"aria-labelledby": a,
+			"data-ui": "context-menu-target",
+			"data-disabled": i || void 0,
+			className: e
+		})
+	});
+}
+K.displayName = "ContextMenu.Target";
+function q({ ref: e, id: t, className: r, sx: i, ...a }) {
+	let o = z("Trigger"), { open: s, getReferenceProps: c } = p(M, "Trigger"), u = w(), d = j([o.triggerRef, e]), f = (e) => (t) => {
+		s || o.anchorTo(t.currentTarget, B(t.currentTarget)), typeof e == "function" && e(t);
+	}, m = (e) => {
+		let t = c(e);
+		return {
+			...t,
+			onClick: f(t.onClick),
+			onKeyDown: f(t.onKeyDown)
+		};
+	};
+	return /* @__PURE__ */ k(n, {
+		className: r,
+		styles: l,
+		sx: i,
+		children: (e) => /* @__PURE__ */ k("button", {
+			type: "button",
+			...v(a, m),
+			ref: d,
+			id: t ?? u,
+			"data-ui": "context-menu-trigger",
+			className: e
+		})
+	});
+}
+q.displayName = "ContextMenu.Trigger";
+function J({ ref: e, style: t, dir: n, onKeyDown: r, ...i }) {
+	let { anchor: a, available: o, direction: s, targetLabel: c } = z("Content"), { floatingContext: l, refs: d } = p(M, "Content"), [f, m] = D(null), h = j([m, e]);
+	C(() => {
+		f && !f.querySelector("[role^=\"menuitem\"]:not([aria-disabled=\"true\"])") && f.focus({ preventScroll: !0 });
+	}, [f]);
+	let { x: _, y: v, placement: y } = l, b = n ?? s, x = a && `${(b === "rtl" ? a.x + a.width : a.x) - _}px ${(y.startsWith("top") ? a.y : a.y + a.height) - v}px`, S = {
+		[F]: x || void 0,
+		[I]: o ? `${o.width}px` : void 0,
+		[L]: o ? `${o.height}px` : void 0
+	};
+	return /* @__PURE__ */ k(g, {
+		...i,
+		ref: h,
+		dir: b,
+		style: {
+			...t,
+			...S
+		},
+		onKeyDown: (e) => {
+			r?.(e);
+			let t = d.domReference.current;
+			!e.defaultPrevented && e.key === "Tab" && e.shiftKey && t && (e.preventDefault(), t.focus());
+		},
+		defaultLabelledBy: c,
+		family: M,
+		marker: "context-menu",
+		styles: [u, ue]
+	});
+}
+J.displayName = "ContextMenu.Content";
+var Y = (e) => s(e) && e !== "";
+function X({ icon: e, children: t }) {
+	return /* @__PURE__ */ A(te, { children: [Y(e) && /* @__PURE__ */ k("span", {
+		css: c,
+		"aria-hidden": !0,
+		"data-ui": "context-menu-item-icon",
+		children: e
+	}), Y(t) && /* @__PURE__ */ k("span", {
+		css: de,
+		children: t
+	})] });
+}
+function Z({ tone: e = "neutral", icon: t, children: n, ...r }) {
+	return z("Item"), /* @__PURE__ */ k(m, {
+		...r,
+		part: "Item",
+		family: M,
+		marker: "context-menu-item",
+		styles: [
+			f,
+			W,
+			h[e]
+		],
+		children: /* @__PURE__ */ k(X, {
+			icon: t,
+			children: n
+		})
+	});
+}
+Z.displayName = "ContextMenu.Item";
+function Q({ value: e, defaultValue: t = !1, onValueChange: n, onSelect: r, closeOnSelect: i = !1, tone: a = "neutral", icon: s, children: c, ...l }) {
+	z("CheckboxItem");
+	let [u = !1, d] = o(e, t, n);
+	return /* @__PURE__ */ A(m, {
+		...l,
+		"aria-checked": u,
+		onSelect: () => {
+			d(!u), r?.();
+		},
+		itemRole: "menuitemcheckbox",
+		closeOnSelect: i,
+		part: "CheckboxItem",
+		family: M,
+		marker: "context-menu-checkbox-item",
+		styles: [
+			f,
+			W,
+			h[a]
+		],
+		children: [/* @__PURE__ */ k("span", {
+			css: fe,
+			"aria-hidden": !0,
+			"data-state": u ? "checked" : "unchecked",
+			"data-ui": "context-menu-check",
+			children: pe
+		}), /* @__PURE__ */ k(X, {
+			icon: s,
+			children: c
+		})]
+	});
+}
+Q.displayName = "ContextMenu.CheckboxItem";
+function $(e) {
+	return z("Separator"), /* @__PURE__ */ k(d, {
+		...e,
+		marker: "context-menu-separator",
+		styles: y
+	});
+}
+$.displayName = "ContextMenu.Separator";
+var he = Object.assign(G, {
+	Target: K,
+	Trigger: q,
+	Content: J,
+	Item: Z,
+	CheckboxItem: Q,
+	Separator: $
+});
+//#endregion
+export { he as t };

package/dist/context-menu.js

@@ -0,0 +1,2 @@
+'use client';
+export { t as ContextMenu } from "./context-menu-__1c2Dk9.js";

package/dist/copy-button-DCSLcYS-.js

@@ -0,0 +1,252 @@
+'use client';
+import { r as e } from "./sx-Dx9JUKp5.js";
+import { n as t, r as n } from "./media-8yrN85VT.js";
+import { t as r } from "./use-controlled-state-DpeVQZNR.js";
+import { t as i } from "./visually-hidden-BJdvqqvn.js";
+import { t as a } from "./renderable-DzcIj1Lo.js";
+import { t as o } from "./loading-ring-B8-30Dl1.js";
+import { t as ee } from "./button-NLY0h6EJ.js";
+import { useEffect as s, useRef as c, useState as l } from "react";
+import { vars as u } from "@jfrader/tokens/vars";
+import { Fragment as d, jsx as f, jsxs as p } from "@emotion/react/jsx-runtime";
+import { flushSync as te } from "react-dom";
+//#region src/components/copy-button/copy-button.tsx
+var m = 1900, h = [
+	"idle",
+	"pending",
+	"copied",
+	"error"
+], ne = e({
+	label: "copy-button",
+	position: "relative",
+	maxInlineSize: "100%"
+}), re = e({
+	whiteSpace: "normal",
+	blockSize: "auto",
+	paddingBlock: u.space[1]
+}), g = {
+	sm: e({ minBlockSize: u.space[8] }),
+	md: e({ minBlockSize: u.space[10] }),
+	lg: e({ minBlockSize: u.space[12] })
+}, ie = {
+	sm: e({
+		inlineSize: u.space[8],
+		paddingInline: 0
+	}),
+	md: e({
+		inlineSize: u.space[10],
+		paddingInline: 0
+	}),
+	lg: e({
+		inlineSize: u.space[12],
+		paddingInline: 0
+	})
+}, _ = e({
+	display: "grid",
+	minInlineSize: 0
+}), v = e({
+	flexShrink: 0,
+	inlineSize: u.space[4],
+	blockSize: u.space[4]
+}), y = e({ textAlign: "start" }), b = e({
+	gridArea: "1 / 1",
+	minInlineSize: 0,
+	opacity: 0,
+	transitionProperty: "opacity",
+	transitionDuration: u.motion.duration.base,
+	transitionTimingFunction: u.motion.easeStandard,
+	"&[data-active]": { opacity: 1 },
+	[n]: { transitionDuration: "0s" }
+}), ae = e({ overflowWrap: "anywhere" }), oe = e({
+	display: "inline-flex",
+	alignItems: "center",
+	justifyContent: "center",
+	"& svg": {
+		inlineSize: "100%",
+		blockSize: "100%"
+	}
+}), x = {
+	copied: e({
+		color: u.color.success,
+		[t]: { color: "ButtonText" }
+	}),
+	error: e({
+		color: u.color.dangerText,
+		[t]: { color: "ButtonText" }
+	})
+}, se = {
+	solid: {},
+	soft: x,
+	outline: x,
+	ghost: x
+}, S = e({
+	...o,
+	boxSizing: "border-box",
+	inlineSize: "100%",
+	blockSize: "100%",
+	[n]: { animation: "none" }
+}), C = {
+	viewBox: "0 0 16 16",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: 1.5,
+	strokeLinecap: "round",
+	strokeLinejoin: "round"
+}, ce = {
+	idle: /* @__PURE__ */ p("svg", {
+		...C,
+		children: [/* @__PURE__ */ f("rect", {
+			x: "5.5",
+			y: "5.5",
+			width: "8",
+			height: "8",
+			rx: "1.5"
+		}), /* @__PURE__ */ f("path", { d: "M10.5 3.5v-.5a1 1 0 0 0-1-1h-6a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h.5" })]
+	}),
+	pending: /* @__PURE__ */ f("span", { css: S }),
+	copied: /* @__PURE__ */ f("svg", {
+		...C,
+		children: /* @__PURE__ */ f("path", { d: "M3 8.5l3.25 3.25L13 5" })
+	}),
+	error: /* @__PURE__ */ f("svg", {
+		...C,
+		children: /* @__PURE__ */ f("path", { d: "M4.5 4.5l7 7M11.5 4.5l-7 7" })
+	})
+}, w = (e) => e === "copied" || e === "error", T = (e) => e === !0 || e === "true";
+function E({ ref: e, text: t, label: n, pendingLabel: o, copiedLabel: u, errorLabel: x, iconOnly: S = !1, icons: C, value: E, defaultValue: le = "idle", onValueChange: ue, onCopied: D, onCopyError: O, resetAfterMs: k = m, variant: A = "outline", tone: j = "neutral", size: M = "sm", slotProps: N, disabled: P, onClick: F, className: I, css: L, sx: R, ...z }) {
+	let [B, V] = r(E, le, ue), H = B ?? "idle", U = c(null), [W, G] = l(!1), K = c(!1), q = c(V), J = c({
+		onCopied: D,
+		onCopyError: O
+	});
+	s(() => {
+		q.current = V, J.current = {
+			onCopied: D,
+			onCopyError: O
+		};
+	}), s(() => (K.current = !0, () => {
+		K.current = !1, U.current = null;
+	}), []);
+	let Y = Number.isFinite(k) && k > 0 ? k : 0;
+	s(() => {
+		if (W || !w(H) || Y === 0) return;
+		let e = setTimeout(() => q.current("idle"), Y);
+		return () => clearTimeout(e);
+	}, [
+		H,
+		W,
+		Y
+	]);
+	let X = (e, t) => {
+		K.current && U.current === e && (U.current = null, G(!1), t.ok ? (q.current("copied"), J.current.onCopied?.(t.text)) : (q.current("error"), J.current.onCopyError?.(t.error)));
+	}, de = (e) => {
+		if (U.current || (F?.(e), e.defaultPrevented)) return;
+		let n = t, r = e.currentTarget.ownerDocument.defaultView?.navigator.clipboard, i = {};
+		if (U.current = i, te(() => {
+			G(!0), V("pending");
+		}), typeof r?.writeText != "function") {
+			X(i, {
+				ok: !1,
+				error: /* @__PURE__ */ Error("Clipboard API is unavailable")
+			});
+			return;
+		}
+		let a;
+		try {
+			a = r.writeText(n);
+		} catch (e) {
+			X(i, {
+				ok: !1,
+				error: e
+			});
+			return;
+		}
+		Promise.resolve(a).then(() => X(i, {
+			ok: !0,
+			text: n
+		}), (e) => X(i, {
+			ok: !1,
+			error: e
+		}));
+	}, Z = H === "pending", Q = {
+		idle: n,
+		pending: o,
+		copied: u,
+		error: x
+	}, $ = h.map((e) => C?.[e] === void 0 ? ce[e] : C[e]), fe = $.some(a), { css: pe, ...me } = N?.icon ?? {}, { css: he, ...ge } = N?.label ?? {}, { css: _e, ...ve } = N?.status ?? {};
+	return /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ p(ee, {
+		...z,
+		ref: e,
+		type: "button",
+		variant: A,
+		tone: j,
+		size: M,
+		"data-ui": "copy-button",
+		"data-state": H,
+		"aria-busy": Z ? !0 : z["aria-busy"],
+		"aria-disabled": Z || T(z["aria-disabled"]) ? !0 : z["aria-disabled"],
+		onClick: de,
+		className: I,
+		css: [
+			ne,
+			S ? ie[M] : [re, g[M]],
+			L
+		],
+		sx: R,
+		render: (e) => /* @__PURE__ */ f("button", {
+			...e,
+			type: "button",
+			disabled: P
+		}),
+		children: [
+			/* @__PURE__ */ f("span", {
+				css: i,
+				children: n
+			}),
+			fe && /* @__PURE__ */ f("span", {
+				...me,
+				"aria-hidden": "true",
+				"data-ui": "copy-button-icon",
+				css: [
+					_,
+					v,
+					pe
+				],
+				children: h.map((e, t) => /* @__PURE__ */ f("span", {
+					"data-active": e === H || void 0,
+					css: [
+						b,
+						oe,
+						se[A][e]
+					],
+					children: $[t]
+				}, e))
+			}),
+			!S && /* @__PURE__ */ f("span", {
+				...ge,
+				"aria-hidden": "true",
+				"data-ui": "copy-button-label",
+				css: [
+					_,
+					y,
+					he
+				],
+				children: h.map((e) => /* @__PURE__ */ f("span", {
+					"data-active": e === H || void 0,
+					css: [b, ae],
+					children: Q[e]
+				}, e))
+			})
+		]
+	}), /* @__PURE__ */ f("span", {
+		...ve,
+		role: "status",
+		"aria-live": "polite",
+		"aria-atomic": "true",
+		"data-ui": "copy-button-status",
+		css: [i, _e],
+		children: H === "idle" ? "" : Q[H]
+	})] });
+}
+E.displayName = "CopyButton";
+//#endregion
+export { E as t };

package/dist/copy-button.js

@@ -0,0 +1,2 @@
+'use client';
+export { t as CopyButton } from "./copy-button-DCSLcYS-.js";