@jfrader/ui 0.4.0 → 0.5.0

package/dist/command-palette-BQ5LleGb.js

@@ -0,0 +1,384 @@
+'use client';
+import { r as e, t } from "./sx-Dx9JUKp5.js";
+import { t as n } from "./focus-ring-BK5W5_NY.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 { n as o, t as s } from "./surface-DZ4d-2aL.js";
+import { t as c } from "./trigger-style-B1KVC8O1.js";
+import { t as l } from "./overlay-layer-SeUyyEPD.js";
+import { i as u, r as d, t as f } from "./use-native-dialog-DWpIUVO1.js";
+import { n as p } from "./listbox-style-WX-RASp1.js";
+import { a as m, r as h, t as g } from "./collection-registry-k6JcD3Jr.js";
+import { createContext as _, useCallback as v, useContext as y, useId as b, useMemo as x, useRef as S, useState as C } from "react";
+import { vars as w } from "@jfrader/tokens/vars";
+import { jsx as T, jsxs as E } from "@emotion/react/jsx-runtime";
+import { FloatingList as D, useFloatingRootContext as O, useInteractions as ee, useListNavigation as te, useMergeRefs as k } from "@floating-ui/react";
+//#region src/components/command-palette/command-palette.styles.ts
+var A = e({
+	...s,
+	marginBlockStart: w.space[12]
+}), j = e({
+	...o,
+	display: "flex",
+	flexDirection: "column",
+	borderRadius: w.radius.lg,
+	boxShadow: w.shadow.floating,
+	inlineSize: "min(560px, calc(100vw - 32px))"
+}), M = e({
+	boxSizing: "border-box",
+	inlineSize: "100%",
+	blockSize: "48px",
+	margin: 0,
+	border: 0,
+	borderBlockEnd: `1px solid ${w.color.borderControl}`,
+	borderStartStartRadius: w.radius.lg,
+	borderStartEndRadius: w.radius.lg,
+	backgroundColor: "transparent",
+	paddingInline: w.space[4],
+	font: "inherit",
+	fontSize: w.textSize.md,
+	color: w.color.text,
+	"&::placeholder": { color: w.color.textSubtle },
+	"&:focus-visible": { ...n }
+}), N = e({
+	boxSizing: "border-box",
+	display: "flex",
+	flexDirection: "column",
+	maxBlockSize: "320px",
+	overflow: "auto",
+	padding: w.space[1],
+	"&[hidden]": { display: "none" }
+}), P = e({
+	display: "flex",
+	flexDirection: "column",
+	"&[hidden]": { display: "none" }
+}), F = e({
+	paddingBlock: w.space[1],
+	paddingInline: w.space[2],
+	fontSize: w.textSize.xs,
+	fontWeight: w.fontWeight.medium,
+	color: w.color.textMuted
+}), I = e({
+	"&:hover, &[data-active]": { backgroundColor: w.color.surfaceHover },
+	"&[hidden]": { display: "none" }
+}), L = e({
+	paddingBlock: w.space[6],
+	paddingInline: w.space[4],
+	textAlign: "center",
+	fontSize: w.textSize.sm,
+	color: w.color.textMuted
+}), ne = "Command palette", re = "No results", R = new Intl.PluralRules("en"), ie = (e, t) => e.toLocaleLowerCase().includes(t.toLocaleLowerCase()), ae = (e) => `${e} ${R.select(e) === "one" ? "result" : "results"}`, z = _(null), B = _(null);
+function V(e) {
+	let t = y(z);
+	if (!t) throw Error(`CommandPalette.${e} must be rendered inside <CommandPalette>.`);
+	return t;
+}
+var H = (e) => {
+	e?.setAttribute("autofocus", "");
+};
+function U({ open: e, defaultOpen: t = !1, onOpenChange: n, label: i = ne, filter: a = ie, emptyMessage: o = re, formatResultCount: s = ae, children: c }) {
+	let l = b(), [d = !1, f] = r(e, t, n), { dialogElementRef: p, setDialogElement: h, setOpen: g, requestClose: _, repairToken: y } = u(d, f), [w, E] = C(""), [D, k] = C(!1), [A, j] = C(null), [M, N] = m(), [P, F] = C(null), [I, L] = C(null), [R, B] = C(d), V = S([]);
+	d !== R && (B(d), d && (E(""), k(!1), j(null)));
+	let H = v(() => {
+		g(!(d && p.current?.open));
+	}, [
+		d,
+		g,
+		p
+	]), { matchedValues: U, matchedIndices: W, visibleGroupIds: G } = x(() => {
+		let e = /* @__PURE__ */ new Set(), t = [], n = /* @__PURE__ */ new Set();
+		return M.forEach((r, i) => {
+			r.index !== -1 && (w === "" || a(r.label, w) || r.keywords !== void 0 && a(r.keywords, w)) && (e.add(i), t.push(r.index), r.groupId !== null && n.add(r.groupId));
+		}), t.sort((e, t) => e - t), {
+			matchedValues: e,
+			matchedIndices: t,
+			visibleGroupIds: n
+		};
+	}, [
+		M,
+		w,
+		a
+	]), K = x(() => new Set(W), [W]), q = A !== null && K.has(A) ? A : W[0] ?? null, J = O({
+		open: d,
+		onOpenChange: (e) => g(e),
+		elements: {
+			reference: P,
+			floating: I
+		}
+	}), Y = te(J, {
+		listRef: V,
+		activeIndex: q,
+		onNavigate: (e) => {
+			e !== null && j(e);
+		},
+		virtual: !0,
+		loop: !0,
+		focusItemOnOpen: !1,
+		disabledIndices: (e) => !K.has(e)
+	}), { getReferenceProps: X, getFloatingProps: Z, getItemProps: Q } = ee([Y]), $ = W.length, oe = D ? s($) : "", se = x(() => ({
+		open: d,
+		setOpen: g,
+		toggleOpen: H,
+		requestClose: _,
+		repairToken: y,
+		setDialogElement: h,
+		label: i,
+		emptyMessage: o,
+		baseId: l,
+		listId: `${l}-list`,
+		query: w,
+		announcement: oe,
+		matchCount: $,
+		matchedValues: U,
+		visibleGroupIds: G,
+		activeIndex: q,
+		elementsRef: V,
+		setInputElement: F,
+		setListElement: L,
+		getReferenceProps: X,
+		getFloatingProps: Z,
+		getItemProps: Q,
+		changeQuery: (e) => {
+			E(e), k(!0), j(null);
+		},
+		moveToEdge: (e) => {
+			let t = e === "first" ? W[0] : W[W.length - 1];
+			t !== void 0 && j(t);
+		},
+		registration: N
+	}), [
+		d,
+		g,
+		H,
+		_,
+		y,
+		h,
+		i,
+		o,
+		l,
+		w,
+		oe,
+		$,
+		U,
+		W,
+		G,
+		q,
+		X,
+		Z,
+		Q,
+		N
+	]);
+	return /* @__PURE__ */ T(z.Provider, {
+		value: se,
+		children: c
+	});
+}
+function W(e) {
+	return /* @__PURE__ */ T(l, { children: /* @__PURE__ */ T(U, { ...e }) });
+}
+W.displayName = "CommandPalette";
+function G({ ref: e, onClick: n, className: r, sx: i, ...a }) {
+	let { open: o, toggleOpen: s } = V("Trigger"), l = (e) => {
+		n?.(e), e.defaultPrevented || s();
+	};
+	return /* @__PURE__ */ T(t, {
+		className: r,
+		styles: c,
+		sx: i,
+		children: (t) => /* @__PURE__ */ T("button", {
+			type: "button",
+			...a,
+			ref: e,
+			"data-ui": "command-palette-trigger",
+			"aria-haspopup": "dialog",
+			"aria-expanded": o,
+			onClick: l,
+			className: t
+		})
+	});
+}
+G.displayName = "CommandPalette.Trigger";
+function K({ ref: e, className: n, sx: r, ...a }) {
+	let { children: o, onCancel: s, onClick: c, onClose: l, ...u } = f(a), p = V("Content"), { label: m, announcement: h } = p, g = d(p, {
+		onCancel: s,
+		onClick: c,
+		onClose: l
+	}, e);
+	return /* @__PURE__ */ T(t, {
+		className: n,
+		styles: A,
+		sx: r,
+		children: (e) => /* @__PURE__ */ T("dialog", {
+			"aria-label": m,
+			...u,
+			...g,
+			"data-ui": "command-palette",
+			"aria-modal": "true",
+			className: e,
+			children: /* @__PURE__ */ E("div", {
+				css: j,
+				children: [o, /* @__PURE__ */ T("div", {
+					role: "status",
+					"aria-live": "polite",
+					"aria-atomic": "true",
+					css: i,
+					children: h
+				})]
+			})
+		})
+	});
+}
+K.displayName = "CommandPalette.Content";
+function q({ ref: e, onChange: n, onKeyDown: r, className: i, sx: a, ...o }) {
+	let { label: s, listId: c, query: l, matchCount: u, activeIndex: d, elementsRef: f, requestClose: p, setInputElement: m, getReferenceProps: h, changeQuery: g, moveToEdge: _ } = V("Input"), v = k([
+		m,
+		H,
+		e
+	]), y = (e) => {
+		n?.(e), g(e.currentTarget.value);
+	}, b = (e) => {
+		r?.(e), !(e.defaultPrevented || e.nativeEvent.isComposing) && (e.key === "Escape" ? (e.preventDefault(), p()) : (e.key === "Home" || e.key === "End") && !e.shiftKey && !e.ctrlKey && !e.metaKey && !e.altKey ? (e.preventDefault(), _(e.key === "Home" ? "first" : "last")) : e.key === "Enter" && d !== null && (e.preventDefault(), f.current[d]?.click()));
+	};
+	return /* @__PURE__ */ T(t, {
+		className: i,
+		styles: M,
+		sx: a,
+		children: (e) => /* @__PURE__ */ T("input", {
+			"aria-label": s,
+			autoComplete: "off",
+			spellCheck: !1,
+			...h({
+				...o,
+				onChange: y,
+				onKeyDown: b
+			}),
+			ref: v,
+			type: "text",
+			value: l,
+			role: "combobox",
+			"aria-autocomplete": "list",
+			"aria-expanded": u > 0,
+			"aria-controls": c,
+			"data-ui": "command-palette-input",
+			className: e
+		})
+	});
+}
+q.displayName = "CommandPalette.Input";
+function J({ ref: e, onMouseDown: n, children: r, className: i, sx: a, ...o }) {
+	let { label: s, listId: c, matchCount: l, elementsRef: u, setListElement: d, getFloatingProps: f } = V("List"), p = k([d, e]), m = (e) => {
+		n?.(e), e.preventDefault();
+	};
+	return /* @__PURE__ */ T(t, {
+		className: i,
+		styles: N,
+		sx: a,
+		children: (e) => /* @__PURE__ */ T("div", {
+			"aria-label": s,
+			...f({
+				...o,
+				onMouseDown: m
+			}),
+			ref: p,
+			id: c,
+			role: "listbox",
+			hidden: l === 0,
+			"data-ui": "command-palette-list",
+			className: e,
+			children: /* @__PURE__ */ T(D, {
+				elementsRef: u,
+				children: r
+			})
+		})
+	});
+}
+J.displayName = "CommandPalette.List";
+function Y({ ref: e, children: n, className: r, sx: i, ...o }) {
+	let { matchCount: s, emptyMessage: c } = V("Empty");
+	return s > 0 ? null : /* @__PURE__ */ T(t, {
+		className: r,
+		styles: L,
+		sx: i,
+		children: (t) => /* @__PURE__ */ T("div", {
+			...o,
+			ref: e,
+			"data-ui": "command-palette-empty",
+			className: t,
+			children: a(n) ? n : c
+		})
+	});
+}
+Y.displayName = "CommandPalette.Empty";
+function X({ ref: e, label: n, children: r, "aria-labelledby": i, className: a, sx: o, ...s }) {
+	let { visibleGroupIds: c } = V("Group"), l = b(), u = `${l}-heading`;
+	return /* @__PURE__ */ T(t, {
+		className: a,
+		styles: P,
+		sx: o,
+		children: (t) => /* @__PURE__ */ E("div", {
+			...s,
+			ref: e,
+			role: "group",
+			"aria-labelledby": [i, u].filter(Boolean).join(" "),
+			hidden: !c.has(l),
+			"data-ui": "command-palette-group",
+			className: t,
+			children: [/* @__PURE__ */ T("div", {
+				id: u,
+				css: F,
+				children: n
+			}), /* @__PURE__ */ T(B.Provider, {
+				value: l,
+				children: r
+			})]
+		})
+	});
+}
+X.displayName = "CommandPalette.Group";
+function Z({ ref: e, value: n, onSelect: r, keywords: i, onClick: a, children: o, className: s, sx: c, ...l }) {
+	let { baseId: u, activeIndex: d, matchedValues: f, getItemProps: m, setOpen: _, registration: v } = V("Item"), b = y(B), x = S(null), { ref: C, index: w } = h(n, v, x, (e, t) => ({
+		index: e,
+		label: t,
+		keywords: i,
+		groupId: b
+	})), E = k([
+		C,
+		x,
+		e
+	]), D = w !== -1 && d === w, O = (e) => {
+		a?.(e), !e.defaultPrevented && (r?.(), _(!1));
+	};
+	return /* @__PURE__ */ T(t, {
+		className: s,
+		styles: [p, I],
+		sx: c,
+		children: (e) => /* @__PURE__ */ T("div", {
+			...m({
+				id: g(u, n),
+				...l,
+				onClick: O
+			}),
+			ref: E,
+			role: "option",
+			"aria-selected": D,
+			hidden: !f.has(n),
+			"data-active": D || void 0,
+			"data-ui": "command-palette-item",
+			className: e,
+			children: o
+		})
+	});
+}
+Z.displayName = "CommandPalette.Item";
+var Q = Object.assign(W, {
+	Trigger: G,
+	Content: K,
+	Input: q,
+	List: J,
+	Empty: Y,
+	Group: X,
+	Item: Z
+});
+//#endregion
+export { Q as t };

package/dist/command-palette.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as CommandPalette } from "./command-palette-V_2pEay7.js";
+export { t as CommandPalette } from "./command-palette-BQ5LleGb.js";

package/dist/copy-button-ByiA6D3R.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-C92uYFJW.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-ByiA6D3R.js";