@jfrader/ui 0.5.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-ByiA6D3R.js → copy-button-DCSLcYS-.js}

@@ -5,7 +5,7 @@ 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-C92uYFJW.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";

package/dist/copy-button.js

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

package/dist/{date-picker-5zKSSuFF.js → date-picker-BiPN7yeK.js}

@@ -3,11 +3,11 @@ import { r as e, t } from "./sx-Dx9JUKp5.js";
 import { t as n } from "./use-controlled-state-DpeVQZNR.js";
 import { t as r } from "./renderable-DzcIj1Lo.js";
 import { n as i } from "./surface-DZ4d-2aL.js";
-import { t as a } from "./overlay-layer-SeUyyEPD.js";
-import { t as o } from "./calendar-B3Svu0X2.js";
+import { t as a } from "./overlay-layer-qEbpEtb8.js";
+import { t as o } from "./calendar-BzJdv_SZ.js";
 import { t as s } from "./overlay-portal-C4JZFq2M.js";
-import { t as c } from "./use-overlay-floating-DvJifLpF.js";
-import { t as l } from "./text-field-C8TWG-tY.js";
+import { t as c } from "./use-overlay-floating-Bx2jBKAA.js";
+import { t as l } from "./text-field-hU72iSVS.js";
 import { createContext 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 { jsx as y, jsxs as b } from "@emotion/react/jsx-runtime";

package/dist/date-picker.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as DatePicker } from "./date-picker-5zKSSuFF.js";
+export { t as DatePicker } from "./date-picker-BiPN7yeK.js";