@jfrader/ui 0.3.0 → 0.5.0

package/dist/inline-edit-C0eeml65.js

@@ -0,0 +1,535 @@
+'use client';
+import { r as e, t } from "./sx-Dx9JUKp5.js";
+import { n } from "./focus-ring-BK5W5_NY.js";
+import { n as r, r as i } from "./media-8yrN85VT.js";
+import { t as ee } from "./use-controlled-state-DpeVQZNR.js";
+import { t as a } from "./visually-hidden-BJdvqqvn.js";
+import { t as o } from "./renderable-DzcIj1Lo.js";
+import { t as s } from "./icon-wrapper-stN8sD7R.js";
+import { t as te } from "./loading-ring-B8-30Dl1.js";
+import { t as ne } from "./input-control-DmMuAuPS.js";
+import { n as re, t as ie } from "./field-anatomy-COVdNpf5.js";
+import { useEffect as c, useId as ae, useLayoutEffect as oe, useRef as l, useState as u } from "react";
+import { vars as d } from "@jfrader/tokens/vars";
+import { Fragment as f, jsx as p, jsxs as m } from "@emotion/react/jsx-runtime";
+import { useMergeRefs as se } from "@floating-ui/react";
+//#region src/components/inline-edit/inline-edit.tsx
+var ce = {
+	edit: ({ label: e, value: t }) => t === "" ? `Edit ${e}` : `Edit ${e}: ${t}`,
+	save: "Save",
+	cancel: "Cancel",
+	retry: "Retry save",
+	instructions: ({ multiline: e }) => e ? "Press Enter to save, Shift+Enter for a new line, Escape to cancel." : "Press Enter to save, Escape to cancel.",
+	saving: "Saving…",
+	saved: "Saved",
+	failed: "Could not save. Try again."
+}, le = (e) => e, ue = (e) => typeof e == "object" && !!e && typeof e.then == "function", de = (e) => e.nativeEvent.isComposing || e.nativeEvent.keyCode === 229, fe = (e) => e.preventDefault(), pe = e({
+	label: "inline-edit",
+	position: "relative",
+	display: "grid",
+	justifyItems: "start",
+	gap: d.space[1],
+	minInlineSize: 0,
+	maxInlineSize: "100%",
+	color: d.color.text,
+	fontFamily: d.font.sans,
+	lineHeight: d.lineHeight.base,
+	textAlign: "start"
+}), me = {
+	title: e({
+		fontSize: d.textSize.xl,
+		fontWeight: d.fontWeight.medium
+	}),
+	body: e({
+		fontSize: d.textSize.md,
+		fontWeight: d.fontWeight.regular
+	})
+}, h = {
+	boxSizing: "border-box",
+	margin: 0,
+	paddingBlock: d.space[1],
+	paddingInline: d.space[2],
+	borderRadius: d.radius.sm,
+	fontFamily: "inherit",
+	lineHeight: "inherit"
+}, he = {
+	sm: e({ minBlockSize: d.space[8] }),
+	md: e({ minBlockSize: d.space[10] }),
+	lg: e({ minBlockSize: d.space[12] })
+}, ge = e({
+	...h,
+	display: "inline-flex",
+	alignItems: "center",
+	gap: d.space[2],
+	maxInlineSize: "100%",
+	minInlineSize: 0,
+	border: "1px solid transparent",
+	backgroundColor: "transparent",
+	color: "inherit",
+	textAlign: "start",
+	cursor: "pointer",
+	transitionProperty: "background-color, border-color",
+	transitionDuration: d.motion.duration.fast,
+	transitionTimingFunction: d.motion.easeStandard,
+	"&:hover:not(:disabled):not([aria-disabled=\"true\"])": {
+		backgroundColor: d.color.surfaceHover,
+		borderColor: d.color.borderControl
+	},
+	"&:focus-visible": n,
+	"&:disabled, &[aria-disabled=\"true\"]": { cursor: "not-allowed" },
+	"&:disabled": { opacity: .55 },
+	[i]: { transitionDuration: "0s" },
+	[r]: {
+		color: "ButtonText",
+		"&:hover:not(:disabled):not([aria-disabled=\"true\"])": { borderColor: "ButtonText" }
+	}
+}), _e = {
+	sm: e({ minInlineSize: d.space[8] }),
+	md: e({ minInlineSize: d.space[10] }),
+	lg: e({ minInlineSize: d.space[12] })
+}, ve = e({
+	minInlineSize: 0,
+	whiteSpace: "pre-wrap",
+	overflowWrap: "anywhere"
+}), ye = e({ color: d.color.textMuted }), be = e({
+	color: d.color.textMuted,
+	fontSize: d.textSize.md,
+	[r]: { color: "ButtonText" }
+}), xe = e({
+	display: "flex",
+	flexWrap: "wrap",
+	alignItems: "flex-start",
+	gap: d.space[1],
+	justifySelf: "stretch",
+	minInlineSize: 0
+}), Se = e({
+	...h,
+	flex: `1 1 calc(${d.space[12]} * 4)`,
+	minInlineSize: 0,
+	inlineSize: "auto",
+	fontSize: "inherit",
+	fontWeight: "inherit",
+	"&[readonly]": { cursor: "progress" }
+}), Ce = e({
+	fieldSizing: "content",
+	resize: "none"
+}), we = e({
+	display: "inline-flex",
+	alignItems: "center",
+	gap: d.space[1],
+	flexShrink: 0
+}), g = e({
+	display: "inline-grid",
+	placeItems: "center",
+	flexShrink: 0,
+	boxSizing: "border-box",
+	margin: 0,
+	padding: 0,
+	border: "1px solid transparent",
+	borderRadius: d.radius.sm,
+	backgroundColor: "transparent",
+	color: d.color.textMuted,
+	fontFamily: d.font.sans,
+	fontSize: d.textSize.md,
+	fontWeight: d.fontWeight.regular,
+	cursor: "pointer",
+	transitionProperty: "background-color, color",
+	transitionDuration: d.motion.duration.fast,
+	transitionTimingFunction: d.motion.easeStandard,
+	"&:hover:not(:disabled):not([aria-disabled=\"true\"])": {
+		backgroundColor: d.color.surfaceHover,
+		color: d.color.text
+	},
+	"&:focus-visible": n,
+	"&:disabled, &[aria-disabled=\"true\"]": {
+		cursor: "not-allowed",
+		opacity: .55
+	},
+	[i]: { transitionDuration: "0s" },
+	[r]: {
+		color: "ButtonText",
+		borderColor: "ButtonText"
+	}
+}), Te = e({
+	backgroundColor: d.color.accentSoft,
+	color: d.color.accentText,
+	"&:hover:not(:disabled):not([aria-disabled=\"true\"])": {
+		backgroundColor: d.color.accentSoftHover,
+		color: d.color.accentText
+	}
+}), Ee = {
+	sm: e({
+		inlineSize: d.space[6],
+		blockSize: d.space[6]
+	}),
+	md: e({
+		inlineSize: d.space[8],
+		blockSize: d.space[8]
+	}),
+	lg: e({
+		inlineSize: d.space[10],
+		blockSize: d.space[10]
+	})
+}, De = {
+	sm: e({ minBlockSize: d.space[8] }),
+	md: e({ minBlockSize: d.space[10] }),
+	lg: e({ minBlockSize: d.space[12] })
+}, Oe = e({
+	display: "inline-flex",
+	alignItems: "center",
+	minBlockSize: d.space[8],
+	paddingInline: d.space[3],
+	borderColor: d.color.borderControl,
+	color: d.color.text,
+	fontSize: d.textSize.sm
+}), ke = e({
+	display: "inline-flex",
+	alignItems: "center",
+	gap: d.space[1],
+	fontSize: d.textSize.sm,
+	fontWeight: d.fontWeight.regular,
+	color: d.color.textMuted
+}), Ae = e({ color: d.color.dangerText }), je = e({
+	display: "inline-flex",
+	transitionProperty: "opacity",
+	transitionDuration: d.motion.duration.base,
+	transitionTimingFunction: d.motion.easeStandard,
+	"@starting-style": { opacity: 0 },
+	"& svg": {
+		inlineSize: "1em",
+		blockSize: "1em"
+	},
+	[i]: { transitionDuration: "0s" }
+}), Me = e({
+	color: d.color.success,
+	[r]: { color: "CanvasText" }
+}), _ = e({
+	...te,
+	boxSizing: "border-box",
+	inlineSize: "0.875em",
+	blockSize: "0.875em",
+	[i]: { animation: "none" }
+}), v = {
+	viewBox: "0 0 16 16",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: 1.5,
+	strokeLinecap: "round",
+	strokeLinejoin: "round"
+}, Ne = /* @__PURE__ */ p("svg", {
+	...v,
+	children: /* @__PURE__ */ p("path", { d: "M10.5 3.5l2 2M3 13l.5-2.5 7.25-7.25a1.4 1.4 0 0 1 2 2L5.5 12.5 3 13z" })
+}), Pe = /* @__PURE__ */ p("svg", {
+	...v,
+	children: /* @__PURE__ */ p("path", { d: "M3 8.5l3.25 3.25L13 5" })
+}), Fe = /* @__PURE__ */ p("svg", {
+	...v,
+	children: /* @__PURE__ */ p("path", { d: "M4.5 4.5l7 7M11.5 4.5l-7 7" })
+}), Ie = {
+	saving: /* @__PURE__ */ p("span", { css: _ }),
+	saved: /* @__PURE__ */ p("span", {
+		css: Me,
+		children: Pe
+	}),
+	failed: Fe
+};
+function y({ ref: e, value: n, defaultValue: r = "", onValueChange: i, open: te, defaultOpen: d = !1, onOpenChange: h, onSave: Me, label: _, validate: v, normalize: y = le, multiline: b = !1, variant: Le = "title", size: x = "md", disabled: S = !1, readOnly: C = !1, saveOnBlur: Re = !0, placeholder: ze, inputPlaceholder: Be, description: Ve, error: He, controlProps: w, controlRef: Ue, messages: We, editIcon: Ge = Ne, saveIcon: Ke = Pe, cancelIcon: qe = Fe, slotProps: T, className: Je, sx: Ye, onBlur: Xe, ...Ze }) {
+	let E = {
+		...ce,
+		...We
+	}, [Qe, $e] = ee(n, r, i), D = Qe ?? "", [et, O] = ee(te, d, h), k = et ?? !1, [tt, A] = u(D), [j, M] = u("idle"), [N, P] = u(null), [nt, F] = u(null), [I, L] = u(null), [rt, it] = u(!1), [at, ot] = u(k);
+	at !== k && (ot(k), k && (A(D), F(null), j !== "saving" && (M("idle"), P(null)))), rt && (it(!1), A(D));
+	let R = ae(), st = w?.id ?? `${R}-control`, ct = `${R}-label`, lt = `${R}-instructions`, z = `${R}-description`, B = `${R}-error`, V = l(null), ut = se([V, e]), dt = l(null), H = l(null), ft = se([H, Ue]), U = l(!1), W = l(!1), G = l(null), K = l(!1), q = l(k);
+	q.current = k;
+	let J = l(D), pt = () => {
+		let e = V.current, t = e?.ownerDocument.activeElement;
+		return e != null && t != null && e.contains(t);
+	}, mt = () => {
+		let e = V.current;
+		if (!e) return !1;
+		let { activeElement: t, body: n } = e.ownerDocument;
+		return t === null || t === n || e.contains(t);
+	};
+	c(() => (K.current = !0, () => {
+		K.current = !1, G.current = null;
+	}), []), oe(() => {
+		J.current !== D && (J.current = D, G.current !== null && (G.current = null, M("idle")));
+	}, [D]), oe(() => {
+		if (I === null || I === "trigger" === k || (L(null), !mt())) return;
+		if (I === "trigger") {
+			dt.current?.focus();
+			return;
+		}
+		let e = H.current;
+		e && (e.focus(), I === "select" ? e.select() : e.setSelectionRange(e.value.length, e.value.length));
+	}, [I, k]), c(() => {
+		let e = V.current;
+		if (I === null || !e) return;
+		let { ownerDocument: t } = e, n = (t) => {
+			t.defaultPrevented || t.composedPath().includes(e) || L(null);
+		};
+		return t.addEventListener("mousedown", n), t.addEventListener("focusin", n), () => {
+			t.removeEventListener("mousedown", n), t.removeEventListener("focusin", n);
+		};
+	}, [I]), c(() => {
+		let e = H.current, t = e?.form;
+		if (!e || !t) return;
+		let n = !0, r = (t) => {
+			queueMicrotask(() => {
+				n && !t.defaultPrevented && (e.value = J.current, A(J.current), F(null));
+			});
+		};
+		return t.addEventListener("reset", r), () => {
+			n = !1, t.removeEventListener("reset", r);
+		};
+	}, [
+		k,
+		b,
+		w?.form
+	]);
+	let Y = !S && !C, X = j === "saving", ht = o(He), gt = ht ? He : nt, Z = o(gt), _t = o(Ve), vt = (e, t) => {
+		let n = {};
+		G.current = n, M("saving");
+		let r = (r) => {
+			K.current && G.current === n && (G.current = null, r ? (M("saved"), P(null), it(!0), $e(e), t && pt() && L("trigger"), q.current && O(!1)) : (M("failed"), P(e)));
+		}, i;
+		try {
+			i = Me(e);
+		} catch {
+			r(!1);
+			return;
+		}
+		ue(i) ? i.then(() => r(!0), () => r(!1)) : r(!0);
+	}, yt = (e) => {
+		e && pt() && L("trigger"), O(!1);
+	}, Q = (e, t) => {
+		if (!Y || X || G.current !== null) return;
+		let n = e();
+		if (n === D) {
+			F(null), M("idle"), P(null), yt(t);
+			return;
+		}
+		if (ht) return;
+		let r = v?.(n);
+		typeof r == "string" && r !== "" ? F(r) : (F(null), vt(n, t));
+	}, $ = (e) => Q(() => y(tt), e), bt = () => !Y || X ? !1 : (A(D), F(null), j === "failed" && M("idle"), P(null), yt(!0), !0), xt = () => {
+		N !== null && Q(() => N, !0);
+	}, St = () => {
+		let e = U.current;
+		U.current = !1, Y && !X && (L(e ? "end" : "select"), O(!0));
+	}, Ct = (e) => {
+		w?.onChange?.(e), Y && !X && (A(e.currentTarget.value), F(null));
+	}, wt = (e) => {
+		w?.onKeyDown?.(e), !(e.key !== "Enter" || b && e.shiftKey) && (e.defaultPrevented || W.current || de(e) || (e.preventDefault(), e.repeat || $(!0)));
+	}, Tt = (e) => {
+		e.key !== "Escape" || e.defaultPrevented || W.current || de(e) || bt() && (e.preventDefault(), e.stopPropagation());
+	}, Et = (e) => {
+		W.current = !0, w?.onCompositionStart?.(e);
+	}, Dt = (e) => {
+		W.current = !1, w?.onCompositionEnd?.(e);
+	}, Ot = (e) => {
+		Xe?.(e), !e.currentTarget.contains(e.relatedTarget) && e.currentTarget.ownerDocument.activeElement !== e.target && (L(null), q.current && Re && !W.current && $(!1));
+	}, kt = [_t && z, Z && B].filter(Boolean).join(" ") || void 0, At = [
+		w?.["aria-describedby"],
+		lt,
+		_t && z,
+		Z && B
+	].filter(Boolean).join(" "), jt = w?.["aria-labelledby"], Mt = D === "", Nt = [Je, T?.root?.className].filter(Boolean).join(" ") || void 0, Pt = {
+		...w,
+		ref: ft,
+		id: st,
+		value: tt,
+		placeholder: Be,
+		disabled: S,
+		readOnly: C || X,
+		"aria-labelledby": jt === void 0 ? void 0 : `${ct} ${jt}`,
+		"aria-describedby": At,
+		"aria-invalid": Z ? !0 : w?.["aria-invalid"],
+		onChange: Ct,
+		onKeyDown: wt,
+		onCompositionStart: Et,
+		onCompositionEnd: Dt,
+		className: T?.control?.className
+	}, { rows: Ft, wrap: It, ...Lt } = Pt, Rt = [
+		ne,
+		Se,
+		me[Le],
+		he[x]
+	];
+	return /* @__PURE__ */ p(t, {
+		className: Nt,
+		styles: [pe, T?.root?.css],
+		sx: Ye,
+		children: (e) => /* @__PURE__ */ m("div", {
+			...Ze,
+			ref: ut,
+			"data-ui": "inline-edit",
+			"data-state": k ? "open" : "closed",
+			"data-phase": j,
+			"aria-busy": X ? !0 : Ze["aria-busy"],
+			onBlur: Ot,
+			className: e,
+			children: [
+				k ? /* @__PURE__ */ m(f, { children: [
+					/* @__PURE__ */ p("label", {
+						id: ct,
+						htmlFor: st,
+						css: a,
+						children: _
+					}),
+					/* @__PURE__ */ p("span", {
+						id: lt,
+						css: a,
+						children: E.instructions({ multiline: b })
+					}),
+					/* @__PURE__ */ m("div", {
+						css: xe,
+						onKeyDown: Tt,
+						children: [b ? /* @__PURE__ */ p("textarea", {
+							rows: 3,
+							...Pt,
+							css: [
+								...Rt,
+								Ce,
+								T?.control?.css
+							]
+						}) : /* @__PURE__ */ p("input", {
+							type: "text",
+							...Lt,
+							css: [...Rt, T?.control?.css]
+						}), /* @__PURE__ */ m("div", {
+							className: T?.actions?.className,
+							css: [
+								we,
+								De[x],
+								T?.actions?.css
+							],
+							children: [/* @__PURE__ */ p("button", {
+								type: "button",
+								"aria-label": E.save,
+								"aria-disabled": X || C || void 0,
+								disabled: S,
+								onMouseDown: fe,
+								onClick: () => $(!0),
+								className: T?.save?.className,
+								css: [
+									g,
+									Te,
+									Ee[x],
+									T?.save?.css
+								],
+								children: o(Ke) && /* @__PURE__ */ p("span", {
+									"aria-hidden": !0,
+									css: s,
+									children: Ke
+								})
+							}), /* @__PURE__ */ p("button", {
+								type: "button",
+								"aria-label": E.cancel,
+								"aria-disabled": X || C || void 0,
+								disabled: S,
+								onMouseDown: fe,
+								onClick: bt,
+								className: T?.cancel?.className,
+								css: [
+									g,
+									Ee[x],
+									T?.cancel?.css
+								],
+								children: o(qe) && /* @__PURE__ */ p("span", {
+									"aria-hidden": !0,
+									css: s,
+									children: qe
+								})
+							})]
+						})]
+					})
+				] }) : /* @__PURE__ */ m("button", {
+					ref: dt,
+					type: "button",
+					"aria-label": Mt ? void 0 : E.edit({
+						label: _,
+						value: D
+					}),
+					"aria-describedby": kt,
+					"aria-disabled": C || X || void 0,
+					disabled: S,
+					onPointerDown: () => {
+						U.current = !0;
+					},
+					onKeyDown: () => {
+						U.current = !1;
+					},
+					onClick: St,
+					className: T?.trigger?.className,
+					css: [
+						ge,
+						me[Le],
+						he[x],
+						_e[x],
+						T?.trigger?.css
+					],
+					children: [Mt ? /* @__PURE__ */ m("span", {
+						css: [ve, ye],
+						children: [/* @__PURE__ */ p("span", {
+							css: a,
+							children: `${E.edit({
+								label: _,
+								value: D
+							})} `
+						}), ze]
+					}) : /* @__PURE__ */ p("span", {
+						css: ve,
+						children: D
+					}), o(Ge) && /* @__PURE__ */ p("span", {
+						"aria-hidden": !0,
+						css: [s, be],
+						children: Ge
+					})]
+				}),
+				/* @__PURE__ */ p(ie, {
+					id: z,
+					part: T?.description,
+					children: Ve
+				}),
+				/* @__PURE__ */ p(re, {
+					id: B,
+					part: T?.error,
+					children: gt
+				}),
+				!k && N !== null && /* @__PURE__ */ p("button", {
+					type: "button",
+					"aria-disabled": X || !Y || void 0,
+					disabled: S,
+					onClick: xt,
+					className: T?.retry?.className,
+					css: [
+						g,
+						Oe,
+						T?.retry?.css
+					],
+					children: E.retry
+				}),
+				/* @__PURE__ */ p("span", {
+					role: "status",
+					"aria-live": "polite",
+					"aria-atomic": "true",
+					className: T?.status?.className,
+					css: [
+						ke,
+						j === "failed" && Ae,
+						T?.status?.css
+					],
+					children: j !== "idle" && /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ p("span", {
+						"aria-hidden": !0,
+						css: je,
+						children: Ie[j]
+					}, j), E[j]] })
+				})
+			]
+		})
+	});
+}
+y.displayName = "InlineEdit";
+//#endregion
+export { y as t };

package/dist/inline-edit.js

@@ -0,0 +1,2 @@
+'use client';
+export { t as InlineEdit } from "./inline-edit-C0eeml65.js";

package/dist/input-control-DmMuAuPS.js

@@ -0,0 +1,34 @@
+'use client';
+import { r as e } from "./sx-Dx9JUKp5.js";
+import { n as t } from "./focus-ring-BK5W5_NY.js";
+import { r as n } from "./media-8yrN85VT.js";
+import { vars as r } from "@jfrader/tokens/vars";
+//#region src/styling/input-control.ts
+var i = "&:focus-visible, &:has(> input:focus-visible)", a = ":not(:focus-visible, :has(> input:focus-visible))", o = e({
+	display: "block",
+	inlineSize: "100%",
+	boxSizing: "border-box",
+	margin: 0,
+	backgroundColor: r.color.surfaceRaised,
+	border: `1px solid ${r.color.borderControl}`,
+	borderRadius: r.radius.md,
+	color: r.color.text,
+	fontFamily: r.font.sans,
+	transitionProperty: "border-color",
+	transitionDuration: r.motion.duration.fast,
+	transitionTimingFunction: r.motion.easeStandard,
+	"&::placeholder": { color: r.color.textSubtle },
+	[`&:hover:not(:disabled)${a}`]: { borderColor: r.color.textSubtle },
+	[i]: {
+		...t,
+		borderColor: r.color.focusRing
+	},
+	"&:disabled": {
+		opacity: .55,
+		cursor: "not-allowed"
+	},
+	[`&[aria-invalid="true"]${a}`]: { borderColor: r.color.dangerBorder },
+	[n]: { transitionDuration: "0s" }
+});
+//#endregion
+export { o as t };