@jfrader/ui 0.3.0 → 0.5.0

package/dist/tag-input-DSRCyrX2.js

@@ -0,0 +1,418 @@
+'use client';
+import { r as e } from "./sx-Dx9JUKp5.js";
+import { t } from "./focus-ring-BK5W5_NY.js";
+import { n, r, t as i } from "./media-8yrN85VT.js";
+import { t as a } from "./use-controlled-state-DpeVQZNR.js";
+import { t as ee } from "./visually-hidden-BJdvqqvn.js";
+import { t as te } from "./renderable-DzcIj1Lo.js";
+import { t as ne } from "./icon-wrapper-stN8sD7R.js";
+import { t as re } from "./input-control-DmMuAuPS.js";
+import { a as ie, i as ae, n as oe, r as se, t as ce } from "./field-anatomy-COVdNpf5.js";
+import { useEffect as o, useMemo as s, useRef as c, useState as l } from "react";
+import { vars as u } from "@jfrader/tokens/vars";
+import { jsx as d, jsxs as f } from "@emotion/react/jsx-runtime";
+import { useMergeRefs as le } from "@floating-ui/react";
+//#region src/components/tag-input/tag-input.tsx
+var ue = ["Enter", ","], de = [], fe = "8ch", pe = (e) => e.trim(), me = (e, t, n) => e.filter((r, i) => r === "" || t(r) !== r || e.findIndex((e) => n.compare(e, r) === 0) !== i);
+function he(e) {
+	let t = new Intl.NumberFormat(e);
+	return {
+		listLabel: "Tags",
+		remove: (e) => `Remove ${e}`,
+		added: (e) => `Added ${e}`,
+		removed: (e) => `Removed ${e}`,
+		picked: (e) => `${e} selected. Press Backspace to remove it.`,
+		duplicate: (e) => `${e} is already added`,
+		limit: (e) => `Tag limit reached: ${t.format(e)}`,
+		required: "Add at least one tag."
+	};
+}
+var ge = (e, t) => e.length === t.length && e.every((e, n) => e === t[n]), _e = e({
+	display: "flex",
+	flexWrap: "wrap",
+	alignItems: "center",
+	gap: u.space[1],
+	minInlineSize: 0,
+	borderRadius: u.radius.sm,
+	cursor: "text",
+	"&[data-invalid]:not(:has(> input:focus-visible))": { borderColor: u.color.dangerBorder },
+	"&[data-disabled]": {
+		opacity: .55,
+		cursor: "not-allowed"
+	},
+	[n]: { borderColor: "CanvasText" }
+}), ve = {
+	sm: e({
+		minBlockSize: u.space[8],
+		paddingBlock: `calc(${u.space[1]} / 2)`,
+		paddingInline: u.space[1],
+		fontSize: u.textSize.sm
+	}),
+	md: e({
+		minBlockSize: u.space[10],
+		paddingBlock: u.space[1],
+		paddingInline: u.space[2],
+		fontSize: u.textSize.sm
+	}),
+	lg: e({
+		minBlockSize: u.space[12],
+		paddingBlock: u.space[2],
+		paddingInline: u.space[2],
+		fontSize: u.textSize.md
+	})
+}, ye = e({
+	display: "contents",
+	margin: 0,
+	padding: 0,
+	listStyle: "none"
+}), be = e({
+	display: "inline-flex",
+	alignItems: "center",
+	gap: u.space[1],
+	maxInlineSize: "100%",
+	minInlineSize: 0,
+	minBlockSize: u.space[6],
+	paddingInlineStart: u.space[2],
+	border: `1px solid ${u.color.border}`,
+	borderRadius: u.radius.full,
+	backgroundColor: u.color.surfaceHover,
+	color: u.color.text,
+	fontSize: u.textSize.xs,
+	fontWeight: u.fontWeight.medium,
+	lineHeight: u.lineHeight.base,
+	cursor: "default",
+	transitionProperty: "opacity, background-color, border-color",
+	transitionDuration: u.motion.duration.fast,
+	transitionTimingFunction: u.motion.easeStandard,
+	"&[data-enter]": { "@starting-style": { opacity: 0 } },
+	"&[data-duplicate]": {
+		borderColor: u.color.accentText,
+		backgroundColor: u.color.accentSoft
+	},
+	"&[data-picked]": {
+		outline: `2px solid ${u.color.focusRing}`,
+		outlineOffset: "1px",
+		backgroundColor: u.color.accentSoft
+	},
+	"&[data-readonly]": { paddingInlineEnd: u.space[2] },
+	[r]: {
+		transitionDuration: "0s",
+		"&[data-enter]": { "@starting-style": { opacity: 1 } }
+	},
+	[n]: {
+		borderColor: "CanvasText",
+		"&[data-picked]": { outlineColor: "Highlight" },
+		"&[data-duplicate]": { borderStyle: "dashed" }
+	}
+}), xe = {
+	sm: e({ fontSize: u.textSize.xs }),
+	md: e({ fontSize: u.textSize.sm }),
+	lg: e({ fontSize: u.textSize.sm })
+}, Se = e({
+	minInlineSize: 0,
+	overflow: "hidden",
+	textOverflow: "ellipsis",
+	whiteSpace: "nowrap"
+}), Ce = e({
+	display: "inline-grid",
+	placeItems: "center",
+	flexShrink: 0,
+	inlineSize: u.space[6],
+	blockSize: u.space[6],
+	padding: 0,
+	border: 0,
+	borderRadius: u.radius.full,
+	backgroundColor: "transparent",
+	color: u.color.textMuted,
+	fontSize: u.textSize.sm,
+	cursor: "pointer",
+	transitionProperty: "background-color, color",
+	transitionDuration: u.motion.duration.fast,
+	transitionTimingFunction: u.motion.easeStandard,
+	"&:hover:not(:disabled)": {
+		backgroundColor: u.color.surfaceInset,
+		color: u.color.text
+	},
+	"&:focus-visible": t,
+	"&:disabled": { cursor: "not-allowed" },
+	[r]: { transitionDuration: "0s" },
+	[n]: { color: "ButtonText" }
+}), we = e({
+	flex: "1 1 0%",
+	minInlineSize: fe,
+	blockSize: u.space[6],
+	margin: 0,
+	paddingBlock: 0,
+	paddingInline: u.space[1],
+	border: 0,
+	outline: "none",
+	backgroundColor: "transparent",
+	color: u.color.text,
+	fontFamily: u.font.sans,
+	fontSize: "inherit",
+	lineHeight: u.lineHeight.base,
+	"&::placeholder": { color: u.color.textMuted },
+	"&:disabled": { cursor: "not-allowed" },
+	[i]: { fontSize: u.textSize.md }
+}), Te = e({
+	fontSize: u.textSize.sm,
+	color: u.color.textMuted
+}), Ee = /* @__PURE__ */ d("svg", {
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	strokeWidth: 2,
+	strokeLinecap: "round",
+	children: /* @__PURE__ */ d("path", { d: "m7 7 10 10M17 7 7 17" })
+}), De = (e) => e.nativeEvent.isComposing || e.nativeEvent.keyCode === 229;
+function p({ ref: e, value: t, defaultValue: n, onValueChange: r, inputValue: i, defaultInputValue: u, onInputChange: fe, label: p, description: m, error: h, size: g = "md", separators: Oe = ue, commitOnBlur: ke = !0, normalize: _ = pe, validateToken: Ae, maxTokens: v, locale: y, messages: je, removeIcon: Me = Ee, slotProps: b, className: Ne, sx: Pe, dir: x, name: S, form: C, disabled: w = !1, readOnly: T = !1, required: E = !1, onChange: Fe, onKeyDown: Ie, onBlur: Le, onCompositionStart: Re, onCompositionEnd: ze, id: Be, "aria-labelledby": D, "aria-describedby": Ve, "aria-invalid": He, ...Ue }) {
+	let O = ie({
+		id: Be,
+		description: m,
+		error: h,
+		"aria-describedby": Ve,
+		"aria-invalid": He
+	}), k = `${O.id}-label`, A = `${O.id}-picked`, j = {
+		...s(() => he(y), [y]),
+		...je
+	}, M = s(() => new Intl.Collator(y, {
+		usage: "search",
+		sensitivity: "accent"
+	}), [y]), We = c(n ?? de), N = c(u ?? ""), [Ge, Ke, P] = a(t, We.current, (e) => r?.([...e])), F = Ge ?? de, [qe, I, L] = a(i, N.current, fe), R = qe ?? "", [z, B] = l(null), [V, H] = l(null);
+	z !== null && !F.includes(z) && B(null), V !== null && !F.includes(V) && H(null);
+	let [U, W] = l({
+		text: "",
+		rejection: !1
+	}), [G, K] = l(null), q = c(null), Je = le([q, e]), Ye = c(!1);
+	o(() => {
+		Ye.current = !0;
+	}, []);
+	let J = c(!1), Xe = c(null);
+	o(() => {
+		if (process.env.NODE_ENV === "production") return;
+		let e = me(F, _, M), t = e.length > 0 ? `TagInput: tokens must be unique, nonempty and normalized; invalid entries: ${JSON.stringify(e)}` : null;
+		t !== null && t !== Xe.current && console.warn(t), Xe.current = t;
+	}, [
+		F,
+		_,
+		M
+	]);
+	let Ze = (e) => {
+		ge(e, F) || Ke(e);
+	}, Y = (e, t = !1) => W((n) => ({
+		text: n.text === e ? `${e} ` : e,
+		rejection: t
+	}));
+	o(() => {
+		if (!G) return;
+		let e = F.includes(G.token);
+		(G.kind === "added" ? !e : e) || (Y(G.kind === "added" ? j.added(G.token) : j.removed(G.token)), K(null));
+	}, [G, F]);
+	let Qe = E && F.length === 0;
+	o(() => {
+		q.current?.setCustomValidity(Qe ? j.required : "");
+	}, [Qe, j.required]);
+	let $e = c({
+		inputValue: i,
+		draft: R
+	});
+	$e.current = {
+		inputValue: i,
+		draft: R
+	}, o(() => {
+		let e = q.current, t = e?.form;
+		if (!e || !t) return;
+		let n = !0, r = (t) => {
+			queueMicrotask(() => {
+				if (!n || t.defaultPrevented) return;
+				let r = $e.current;
+				P(), L(), B(null), H(null), K(null), W({
+					text: "",
+					rejection: !1
+				}), e.value = r.inputValue === void 0 ? N.current : r.draft;
+			});
+		};
+		return t.addEventListener("reset", r), () => {
+			n = !1, t.removeEventListener("reset", r);
+		};
+	}, [
+		C,
+		P,
+		L
+	]);
+	let X = !w && !T, Z = () => {
+		H(null), U.rejection && W({
+			text: "",
+			rejection: !1
+		});
+	}, et = () => {
+		let e = _(R);
+		if (e === "") return;
+		let t = F.find((t) => M.compare(t, e) === 0);
+		if (t !== void 0) {
+			H(t), Y(j.duplicate(t), !0);
+			return;
+		}
+		if (v !== void 0 && F.length >= v) {
+			Y(j.limit(v), !0);
+			return;
+		}
+		let n = Ae?.(e) ?? null;
+		n === null ? (B(null), H(null), Ze([...F, e]), I(""), K({
+			kind: "added",
+			token: e
+		})) : Y(n, !0);
+	}, Q = (e) => {
+		B(null), Z(), Ze(F.filter((t) => t !== e)), K({
+			kind: "removed",
+			token: e
+		});
+	}, $ = (e) => {
+		B(e), e !== null && Y(j.picked(e));
+	}, tt = (e) => {
+		Fe?.(e), X && (B(null), Z(), I(e.currentTarget.value));
+	}, nt = (e) => {
+		if (Ie?.(e), e.defaultPrevented || J.current || De(e) || !X || e.altKey || e.ctrlKey || e.metaKey) return;
+		let { key: t, currentTarget: n } = e, r = n.selectionStart === 0 && n.selectionEnd === 0, i = z === null ? -1 : F.indexOf(z);
+		if (Oe.includes(t)) {
+			if (R === "") return;
+			e.preventDefault(), et();
+		} else if (t === "Backspace" || t === "Delete") z === null ? t === "Backspace" && r && F.length > 0 && (e.preventDefault(), e.repeat || $(F[F.length - 1])) : (e.preventDefault(), e.repeat || Q(z));
+		else if (!e.shiftKey) {
+			if (t === "ArrowLeft" && (z !== null || r && F.length > 0)) {
+				e.preventDefault();
+				let t = z === null ? F[F.length - 1] : F[Math.max(i - 1, 0)];
+				t !== z && $(t);
+			} else if (t === "ArrowRight" && z !== null) {
+				e.preventDefault();
+				let t = F[i + 1];
+				t === void 0 ? (B(null), n.setSelectionRange(0, 0)) : $(t);
+			} else t === "Escape" && z !== null && (e.preventDefault(), B(null), n.setSelectionRange(0, 0));
+		}
+	}, rt = (e) => {
+		let t = e.relatedTarget;
+		t instanceof Node && e.currentTarget.contains(t) || (B(null), ke && X && !J.current && et());
+	}, it = (e) => {
+		J.current = !0, Re?.(e);
+	}, at = (e) => {
+		J.current = !1, ze?.(e);
+	}, ot = (e) => {
+		q.current?.focus(), Q(e);
+	}, st = D === void 0 ? void 0 : [te(p) && k, D].filter(Boolean).join(" "), ct = [O.describedBy, z !== null && A].filter(Boolean).join(" ") || void 0;
+	return /* @__PURE__ */ f(ae, {
+		"data-ui": "tag-input",
+		dir: x,
+		className: Ne,
+		sx: Pe,
+		part: b?.root,
+		children: [
+			/* @__PURE__ */ d(se, {
+				id: k,
+				htmlFor: O.id,
+				required: E,
+				part: b?.label,
+				children: p
+			}),
+			/* @__PURE__ */ f("div", {
+				"data-invalid": O.ariaInvalid === !0 || O.ariaInvalid === "true" ? "" : void 0,
+				"data-disabled": w ? "" : void 0,
+				onBlur: rt,
+				onMouseDown: (e) => {
+					w || e.target === q.current || (e.preventDefault(), e.target.closest("button") || q.current?.focus());
+				},
+				className: b?.control?.className,
+				css: [
+					re,
+					_e,
+					ve[g],
+					b?.control?.css
+				],
+				children: [F.length > 0 && /* @__PURE__ */ d("ul", {
+					role: "list",
+					"aria-label": j.listLabel,
+					className: b?.list?.className,
+					css: [ye, b?.list?.css],
+					children: F.map((e) => /* @__PURE__ */ f("li", {
+						"data-picked": e === z ? "" : void 0,
+						"data-duplicate": e === V ? "" : void 0,
+						"data-readonly": T ? "" : void 0,
+						"data-enter": Ye.current ? "" : void 0,
+						className: b?.token?.className,
+						css: [
+							be,
+							xe[g],
+							b?.token?.css
+						],
+						children: [/* @__PURE__ */ d("span", {
+							id: e === z ? A : void 0,
+							css: Se,
+							children: e
+						}), !T && /* @__PURE__ */ d("button", {
+							type: "button",
+							disabled: w,
+							"aria-label": j.remove(e),
+							onClick: () => ot(e),
+							className: b?.remove?.className,
+							css: [Ce, b?.remove?.css],
+							children: /* @__PURE__ */ d("span", {
+								"aria-hidden": !0,
+								css: ne,
+								children: Me
+							})
+						})]
+					}, e))
+				}), /* @__PURE__ */ d("input", {
+					autoComplete: "off",
+					...Ue,
+					ref: Je,
+					type: "text",
+					id: O.id,
+					dir: x,
+					form: C,
+					value: R,
+					disabled: w,
+					readOnly: T,
+					"aria-required": E || void 0,
+					"aria-labelledby": st,
+					"aria-describedby": ct,
+					"aria-invalid": O.ariaInvalid,
+					onChange: tt,
+					onKeyDown: nt,
+					onCompositionStart: it,
+					onCompositionEnd: at,
+					onBlur: Le,
+					className: b?.input?.className,
+					css: [we, b?.input?.css]
+				})]
+			}),
+			/* @__PURE__ */ d(ce, {
+				id: O.descriptionId,
+				part: b?.description,
+				children: m
+			}),
+			/* @__PURE__ */ d(oe, {
+				id: O.errorId,
+				part: b?.error,
+				children: h
+			}),
+			/* @__PURE__ */ d("span", {
+				role: "status",
+				"aria-live": "polite",
+				"aria-atomic": "true",
+				"data-rejection": U.rejection ? "" : void 0,
+				className: b?.status?.className,
+				css: [U.rejection ? Te : ee, b?.status?.css],
+				children: U.text
+			}),
+			S !== void 0 && !w && F.map((e) => /* @__PURE__ */ d("input", {
+				type: "hidden",
+				name: S,
+				form: C,
+				value: e
+			}, e))
+		]
+	});
+}
+p.displayName = "TagInput";
+//#endregion
+export { p as t };

package/dist/tag-input.js

@@ -0,0 +1,2 @@
+'use client';
+export { t as TagInput } from "./tag-input-DSRCyrX2.js";

package/dist/{text-field-D60ok14S.js → text-field-C8TWG-tY.js}

@@ -1,6 +1,7 @@
 'use client';
 import { r as e } from "./sx-Dx9JUKp5.js";
-import { a as t, i as n, n as r, o as i, r as a, t as o } from "./field-anatomy-D2ToMeRa.js";
+import { t } from "./input-control-DmMuAuPS.js";
+import { a as n, i as r, n as i, r as a, t as o } from "./field-anatomy-COVdNpf5.js";
 import { vars as s } from "@jfrader/tokens/vars";
 import { jsx as c, jsxs as l } from "@emotion/react/jsx-runtime";
 //#region src/components/text-field/text-field.tsx
@@ -22,7 +23,7 @@ var u = {
 	})
 };
 function d({ ref: e, label: s, description: d, error: f, size: p = "md", onChange: m, onValueChange: h, slotProps: g, className: _, sx: v, required: y, id: b, "aria-describedby": x, "aria-invalid": S, ...C }) {
-	let w = t({
+	let w = n({
 		id: b,
 		description: d,
 		error: f,
@@ -31,7 +32,7 @@ function d({ ref: e, label: s, description: d, error: f, size: p = "md", onChang
 	}), T = (e) => {
 		m?.(e), h?.(e.currentTarget.value);
 	};
-	return /* @__PURE__ */ l(n, {
+	return /* @__PURE__ */ l(r, {
 		"data-ui": "text-field",
 		className: _,
 		sx: v,
@@ -53,7 +54,7 @@ function d({ ref: e, label: s, description: d, error: f, size: p = "md", onChang
 				onChange: T,
 				className: g?.control?.className,
 				css: [
-					i,
+					t,
 					u[p],
 					g?.control?.css
 				]
@@ -63,7 +64,7 @@ function d({ ref: e, label: s, description: d, error: f, size: p = "md", onChang
 				part: g?.description,
 				children: d
 			}),
-			/* @__PURE__ */ c(r, {
+			/* @__PURE__ */ c(i, {
 				id: w.errorId,
 				part: g?.error,
 				children: f

package/dist/text-field.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as TextField } from "./text-field-D60ok14S.js";
+export { t as TextField } from "./text-field-C8TWG-tY.js";

package/dist/{textarea-DyfjtP0A.js → textarea-BrW0XcG_.js}

@@ -1,6 +1,7 @@
 'use client';
 import { r as e } from "./sx-Dx9JUKp5.js";
-import { a as t, i as n, n as r, o as i, r as a, t as o } from "./field-anatomy-D2ToMeRa.js";
+import { t } from "./input-control-DmMuAuPS.js";
+import { a as n, i as r, n as i, r as a, t as o } from "./field-anatomy-COVdNpf5.js";
 import { vars as s } from "@jfrader/tokens/vars";
 import { jsx as c, jsxs as l } from "@emotion/react/jsx-runtime";
 //#region src/components/textarea/textarea.tsx
@@ -28,7 +29,7 @@ var u = e({
 	vertical: e({ resize: "vertical" })
 }, p = e({ fieldSizing: "content" });
 function m({ ref: e, label: s, description: m, error: h, size: g = "md", resize: _ = "vertical", autoResize: v = !1, rows: y = 3, onChange: b, onValueChange: x, slotProps: S, className: C, sx: w, required: T, id: E, "aria-describedby": D, "aria-invalid": O, ...k }) {
-	let A = t({
+	let A = n({
 		id: E,
 		description: m,
 		error: h,
@@ -37,7 +38,7 @@ function m({ ref: e, label: s, description: m, error: h, size: g = "md", resize:
 	}), j = (e) => {
 		b?.(e), x?.(e.currentTarget.value);
 	};
-	return /* @__PURE__ */ l(n, {
+	return /* @__PURE__ */ l(r, {
 		"data-ui": "textarea",
 		className: C,
 		sx: w,
@@ -60,7 +61,7 @@ function m({ ref: e, label: s, description: m, error: h, size: g = "md", resize:
 				onChange: j,
 				className: S?.control?.className,
 				css: [
-					i,
+					t,
 					u,
 					d[g],
 					f[_],
@@ -73,7 +74,7 @@ function m({ ref: e, label: s, description: m, error: h, size: g = "md", resize:
 				part: S?.description,
 				children: m
 			}),
-			/* @__PURE__ */ c(r, {
+			/* @__PURE__ */ c(i, {
 				id: A.errorId,
 				part: S?.error,
 				children: h

package/dist/textarea.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as Textarea } from "./textarea-DyfjtP0A.js";
+export { t as Textarea } from "./textarea-BrW0XcG_.js";

package/dist/theme-root-BbTBuLMQ.js

@@ -0,0 +1,46 @@
+'use client';
+import { a as e, n as t, t as n } from "./sx-Dx9JUKp5.js";
+import { n as r, r as i } from "./theme-scope-t7nAKc2c.js";
+import { useContext as a, useMemo as o } from "react";
+import { vars as s } from "@jfrader/tokens/vars";
+import { jsx as c } from "@emotion/react/jsx-runtime";
+//#region src/styling/theme.ts
+var l = s;
+//#endregion
+//#region src/components/theme-provider/theme-provider.tsx
+function u({ theme: e = l, children: n }) {
+	return /* @__PURE__ */ c(t, {
+		theme: e,
+		children: n
+	});
+}
+u.displayName = "ThemeProvider";
+function d() {
+	return e();
+}
+//#endregion
+//#region src/components/theme-root/theme-root.tsx
+function f({ ref: e, theme: t = "dark", portalContainer: s, className: l, sx: d, ...f }) {
+	let p = a(r), m = s === void 0 ? p?.portalContainer : s, h = o(() => ({
+		theme: t,
+		portalContainer: m
+	}), [t, m]);
+	return /* @__PURE__ */ c(r.Provider, {
+		value: h,
+		children: /* @__PURE__ */ c(u, { children: /* @__PURE__ */ c(n, {
+			className: l,
+			styles: i,
+			sx: d,
+			children: (n) => /* @__PURE__ */ c("div", {
+				"data-ui": "theme-root",
+				"data-theme": t,
+				...f,
+				ref: e,
+				className: n
+			})
+		}) })
+	});
+}
+f.displayName = "ThemeRoot";
+//#endregion
+export { l as i, u as n, d as r, f as t };

package/dist/theme-root.js

@@ -1,2 +1,2 @@
 'use client';
-export { t as ThemeRoot } from "./theme-root-BiXXvQvr.js";
+export { t as ThemeRoot } from "./theme-root-BbTBuLMQ.js";

package/dist/theme-scope-t7nAKc2c.js

@@ -0,0 +1,27 @@
+'use client';
+import { r as e } from "./sx-Dx9JUKp5.js";
+import { createContext as t, useContext as n } from "react";
+import { vars as r } from "@jfrader/tokens/vars";
+import { jsx as i } from "@emotion/react/jsx-runtime";
+//#region src/styling/theme-scope.tsx
+var a = t(null);
+function o() {
+	return n(a);
+}
+var s = e({
+	color: r.color.text,
+	colorScheme: "dark",
+	"&[data-theme=\"light\"]": { colorScheme: "light" }
+}), c = e({ display: "contents" });
+function l({ children: e }) {
+	let t = o();
+	return t ? /* @__PURE__ */ i("div", {
+		"data-ui": "theme-boundary",
+		"data-theme": t.theme,
+		css: [s, c],
+		children: e
+	}) : e;
+}
+l.displayName = "ThemeBoundary";
+//#endregion
+export { o as i, a as n, s as r, l as t };