@jfrader/ui 0.4.0 → 0.5.0

package/dist/file-dropzone-pR4v7owg.js

@@ -0,0 +1,457 @@
+'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 a } from "./use-latest-callback-cj1OOQL6.js";
+import { t as ee } from "./use-controlled-state-DpeVQZNR.js";
+import { t as te } from "./visually-hidden-BJdvqqvn.js";
+import { t as o } from "./renderable-DzcIj1Lo.js";
+import { t as ne } from "./button-C92uYFJW.js";
+import { t as re } from "./progress-CbOWBUdA.js";
+import { useEffect as s, useId as ie, useRef as c, useState as l } from "react";
+import { vars as u } from "@jfrader/tokens/vars";
+import { createElement as ae } from "@emotion/react";
+import { jsx as d, jsxs as f } from "@emotion/react/jsx-runtime";
+import { useMergeRefs as oe } from "@floating-ui/react";
+//#region src/components/file-dropzone/file-dropzone.tsx
+var se = e({
+	label: "file-dropzone",
+	display: "grid",
+	gap: u.space[3],
+	minInlineSize: 0,
+	color: u.color.text,
+	fontFamily: u.font.sans,
+	fontSize: u.textSize.sm,
+	lineHeight: u.lineHeight.base
+}), ce = e({
+	position: "relative",
+	display: "grid",
+	border: `1px dashed ${u.color.borderControl}`,
+	borderRadius: u.radius.lg,
+	backgroundColor: u.color.surface,
+	cursor: "pointer",
+	transitionProperty: "background-color, border-color",
+	transitionDuration: u.motion.duration.fast,
+	transitionTimingFunction: u.motion.easeStandard,
+	"&:has(input:focus-visible)": n,
+	"&[data-dragging=\"true\"]": {
+		borderStyle: "solid",
+		backgroundColor: u.color.surfaceHover
+	},
+	[i]: { transitionDuration: "0s" },
+	[r]: { borderColor: "ButtonText" }
+}), le = e({
+	display: "grid",
+	justifyItems: "center",
+	gap: u.space[3],
+	textAlign: "center"
+}), ue = e({ cursor: "not-allowed" }), de = {
+	sm: e({ padding: u.space[4] }),
+	md: e({ padding: u.space[6] }),
+	lg: e({ padding: u.space[8] })
+}, fe = {
+	sm: e({
+		paddingInline: u.space[4],
+		paddingBlockEnd: u.space[4]
+	}),
+	md: e({
+		paddingInline: u.space[6],
+		paddingBlockEnd: u.space[6]
+	}),
+	lg: e({
+		paddingInline: u.space[8],
+		paddingBlockEnd: u.space[8]
+	})
+}, pe = e({
+	display: "inline-flex",
+	alignItems: "center",
+	minBlockSize: u.space[8],
+	paddingInline: u.space[3],
+	border: `1px solid ${u.color.borderControl}`,
+	borderRadius: u.radius.md,
+	fontWeight: u.fontWeight.medium,
+	overflowWrap: "anywhere"
+}), me = e({
+	position: "absolute",
+	opacity: 0,
+	inlineSize: "1px",
+	blockSize: "1px"
+}), p = e({ color: u.color.textMuted }), he = e({
+	display: "grid",
+	gap: u.space[2],
+	margin: 0,
+	padding: 0,
+	listStyle: "none",
+	inlineSize: "100%",
+	textAlign: "start"
+}), ge = e({
+	display: "flex",
+	flexWrap: "wrap",
+	alignItems: "center",
+	gap: u.space[3],
+	padding: u.space[3],
+	border: `1px solid ${u.color.borderControl}`,
+	borderRadius: u.radius.md,
+	backgroundColor: u.color.surfaceRaised,
+	cursor: "default"
+}), _e = e({
+	flex: "1 1 10rem",
+	minInlineSize: 0,
+	display: "grid",
+	gap: u.space[2],
+	overflowWrap: "anywhere"
+}), ve = e({
+	inlineSize: u.space[12],
+	blockSize: u.space[12],
+	objectFit: "cover",
+	borderRadius: u.radius.sm
+}), ye = e({
+	display: "flex",
+	flexWrap: "wrap",
+	gap: u.space[2]
+}), be = e({
+	whiteSpace: "normal",
+	overflowWrap: "anywhere",
+	minBlockSize: u.space[8],
+	blockSize: "auto",
+	paddingBlock: u.space[2],
+	maxInlineSize: "100%"
+}), xe = e({
+	color: u.color.dangerText,
+	overflowWrap: "anywhere"
+}), Se = e({ "& > [data-ui=\"progress-indicator\"]": { transitionDuration: "0s" } }), Ce = "label, [data-file-row], a, button, input, select, textarea, [role=\"button\"]", we = [], Te = 5, Ee = 100, m = 1e3, h = [
+	"byte",
+	"kilobyte",
+	"megabyte",
+	"gigabyte"
+], De = (e, t) => e.length === t.length && e.every((e, n) => e.id === t[n]?.id && e.file === t[n]?.file), g = (e) => Array.from(e.types).includes("Files"), Oe = (e, t) => e.name === t.name && e.size === t.size && e.lastModified === t.lastModified;
+function ke(e, t) {
+	let n = t?.split(",").map((e) => e.trim().toLowerCase()).filter(Boolean) ?? [];
+	return !n.length || n.some((t) => t.startsWith(".") ? e.name.toLowerCase().endsWith(t) : !!e.type && (t.endsWith("/*") ? e.type.toLowerCase().startsWith(t.slice(0, -1)) : e.type.toLowerCase() === t));
+}
+function Ae(e, t) {
+	let n = e > 0 ? Math.min(Math.floor(Math.log(e) / Math.log(m)), h.length - 1) : 0;
+	return new Intl.NumberFormat(t, {
+		style: "unit",
+		unit: h[Math.max(0, n)],
+		unitDisplay: "short",
+		maximumFractionDigits: 1
+	}).format(e / m ** Math.max(0, n));
+}
+function _({ ref: e, value: n, defaultValue: r = we, onValueChange: i, onReject: u, accept: m, multiple: h = !0, maxFiles: _ = Te, maxSize: v, validate: je, onUpload: y, listPlacement: b = "below", compactAt: x, label: S, description: C, note: w, dropLabel: Me, error: T, messages: E, locale: Ne, disabled: D = !1, readOnly: O = !1, required: Pe = !1, size: Fe = "md", paste: Ie = !0, renderFileIcon: Le, name: Re, inputRef: ze, slotProps: k, className: Be, sx: Ve, onDragEnter: He, onDragOver: Ue, onDragLeave: We, onDrop: Ge, onPaste: Ke, ...qe }) {
+	let A = ie(), Je = c(r), [j = we, Ye, Xe] = ee(n, Je.current, i), M = c(null), N = c(null), Ze = oe([N, e]), Qe = oe([M, ze]), P = c(/* @__PURE__ */ new Map()), F = c(/* @__PURE__ */ new Map()), I = c(/* @__PURE__ */ new Map()), L = c(null), [, $e] = l(0), R = () => $e((e) => e + 1), [z, B] = l(!1), V = c(0), [H, et] = l([]), [tt, U] = l(""), [nt, rt] = l(/* @__PURE__ */ new Set()), W = D || O, G = o(S) && S !== "", it = o(C), K = o(w), q = o(T) || H.length > 0, J = k?.input, at = J?.id ?? `${A}-input`, ot = [
+		J?.["aria-describedby"],
+		it && `${A}-description`,
+		K && `${A}-note`,
+		q && `${A}-error`
+	].filter(Boolean).join(" ") || void 0, st = [J?.["aria-labelledby"], G && `${A}-label`].filter(Boolean).join(" ") || void 0, ct = q ? !0 : J?.["aria-invalid"], Y = (e) => {
+		De(j, e) || Ye(e);
+	}, lt = Number.isInteger(_) && _ > 0 ? _ : Te, X = a((e) => {
+		if (!e.file || !y) return;
+		P.current.get(e.id)?.controller.abort();
+		let t = {
+			file: e.file,
+			controller: new AbortController(),
+			status: "uploading"
+		};
+		P.current.set(e.id, t), R();
+		let n = () => !t.controller.signal.aborted && P.current.get(e.id) === t, r = (e) => {
+			n() && t.status === "uploading" && Number.isFinite(e) && (t.progress = Math.max(t.progress ?? 0, Math.min(Ee, Math.max(0, e))), R());
+		};
+		Promise.resolve().then(() => {
+			if (n()) return y(e, {
+				signal: t.controller.signal,
+				onProgress: r
+			});
+		}).then(() => {
+			n() && (t.status = "uploaded", U(E.status("uploaded", e.name)), R());
+		}, (r) => {
+			n() && (r instanceof Error && r.name === "AbortError" ? (t.status = "idle", R()) : (t.status = "failed", t.error = r instanceof Error && r.message.trim() ? r.message : E.uploadError, U(E.status("failed", e.name)), R()));
+		});
+	});
+	s(() => {
+		let e = !1, t = 0;
+		for (let [t, n] of P.current) j.some((e) => e.id === t && e.file === n.file) || (n.controller.abort(), P.current.delete(t), e = !0);
+		for (let [t, n] of I.current) j.some((e) => e.id === t && e.file === n.file && e.preview === void 0) || (URL.revokeObjectURL(n.url), I.current.delete(t), e = !0);
+		for (let n of j) {
+			let r = F.current.get(n.id);
+			r && r.file === n.file && (F.current.delete(n.id), n.file?.type.startsWith("image/") && n.preview === void 0 && !I.current.has(n.id) && (I.current.set(n.id, {
+				file: n.file,
+				url: URL.createObjectURL(n.file)
+			}), e = !0), t++, X(n));
+		}
+		t && U(E.added(t));
+		let n = L.current;
+		n && !j.some((e) => e.id === n.item.id && e.file === n.item.file) && (L.current = null, U(E.removed(n.item.name)), n.active && (N.current?.ownerDocument.activeElement === n.active || N.current?.ownerDocument.activeElement === N.current?.ownerDocument.body) && ((N.current?.querySelectorAll("[data-file-row]")?.[Math.min(n.index, j.length - 1)])?.querySelector("[data-action=\"remove\"]") ?? M.current)?.focus()), e && R();
+	}, [
+		j,
+		E,
+		X
+	]), s(() => () => {
+		for (let e of P.current.values()) e.controller.abort();
+		P.current.clear();
+		for (let e of I.current.values()) URL.revokeObjectURL(e.url);
+		I.current.clear(), F.current.clear();
+	}, []);
+	let ut = a(() => {
+		F.current.clear(), et([]), U(""), n === void 0 ? Xe() : Y(Je.current);
+	});
+	s(() => {
+		let e = M.current?.form, t = (e) => {
+			queueMicrotask(() => {
+				e.defaultPrevented || ut();
+			});
+		};
+		return e?.addEventListener("reset", t), () => e?.removeEventListener("reset", t);
+	}, [ut]);
+	function Z(e) {
+		if (W) return;
+		let t = [], n = [], r = h ? j : j.filter((e) => !e.file);
+		for (let i of e) {
+			let e, a = null;
+			ke(i, m) ? v !== void 0 && Number.isFinite(v) && v >= 0 && i.size > v ? e = "size" : (a = je?.(i) ?? null, a !== null && (e = "custom")) : e = "type", (e || !j.some((e) => e.file && Oe(e.file, i)) && !n.some((e) => Oe(e, i))) && (!e && (r.length + n.length >= lt || !h && n.length >= 1) && (e = "count"), e ? t.push({
+				file: i,
+				code: e,
+				message: e === "custom" ? a : E.rejection(e, i)
+			}) : n.push(i));
+		}
+		if (et(t), t.length && u?.(t), !n.length) return;
+		let i = n.map((e) => ({
+			id: crypto.randomUUID(),
+			file: e,
+			name: e.name,
+			size: e.size
+		}));
+		F.current.clear();
+		for (let e of i) F.current.set(e.id, e);
+		Y([...r, ...i]);
+	}
+	function dt(e, t) {
+		if (W) return;
+		let n = N.current?.querySelectorAll("[data-file-row]")[t], r = N.current?.ownerDocument.activeElement ?? null;
+		L.current = {
+			item: e,
+			index: t,
+			active: n?.contains(r) ? r : null
+		}, Y(j.filter((t) => t.id !== e.id));
+	}
+	function ft(e, t, n) {
+		if (!W && e.target instanceof HTMLButtonElement && ((e.key === "Delete" || e.key === "Backspace") && (e.preventDefault(), dt(t, n)), e.key === "ArrowUp" || e.key === "ArrowDown")) {
+			e.preventDefault();
+			let t = n + (e.key === "ArrowUp" ? -1 : 1), r = N.current?.querySelectorAll("[data-file-row]")[t], i = e.target.dataset.action;
+			(r?.querySelector(`[data-action="${i}"]`) ?? r?.querySelector("[data-action=\"remove\"]"))?.focus();
+		}
+	}
+	let Q = j.length > 0 && /* @__PURE__ */ d("ul", {
+		...k?.list,
+		"aria-label": k?.list?.["aria-label"] ?? E.files,
+		css: [
+			he,
+			b === "inside" && fe[Fe],
+			k?.list?.css
+		],
+		children: j.map((e, t) => {
+			let n = P.current.get(e.id), r = n?.status ?? (e.uploaded ? "uploaded" : "idle"), i = e.preview ?? I.current.get(e.id)?.url, a = Le?.(e);
+			return /* @__PURE__ */ ae("li", {
+				...k?.item,
+				key: e.id,
+				"data-file-row": !0,
+				"data-state": r,
+				onKeyDown: (n) => {
+					k?.item?.onKeyDown?.(n), n.defaultPrevented || ft(n, e, t);
+				},
+				css: [ge, k?.item?.css]
+			}, i && !nt.has(i) ? /* @__PURE__ */ d("img", {
+				...k?.preview,
+				src: i,
+				alt: "",
+				css: [ve, k?.preview?.css],
+				onError: (e) => {
+					k?.preview?.onError?.(e), rt((e) => /* @__PURE__ */ new Set([...e, i]));
+				}
+			}) : o(a) && /* @__PURE__ */ d("span", {
+				"aria-hidden": !0,
+				children: a
+			}), /* @__PURE__ */ f("div", {
+				css: _e,
+				children: [
+					/* @__PURE__ */ d("bdi", { children: e.name }),
+					/* @__PURE__ */ d("span", {
+						css: p,
+						children: Ae(e.size, Ne)
+					}),
+					/* @__PURE__ */ d("span", { children: E.status(r, e.name) }),
+					r === "uploading" && /* @__PURE__ */ d(re, {
+						...k?.progress,
+						value: n?.progress,
+						"aria-label": k?.progress?.["aria-label"] ?? e.name,
+						getValueLabel: (e) => new Intl.NumberFormat(Ne, { style: "percent" }).format(e / Ee),
+						css: [Se, k?.progress?.css]
+					}),
+					n?.error && /* @__PURE__ */ d("span", {
+						css: xe,
+						children: n.error
+					})
+				]
+			}), /* @__PURE__ */ f("div", {
+				css: ye,
+				children: [r === "failed" && e.file && y && /* @__PURE__ */ d(ne, {
+					...k?.action,
+					css: [be, k?.action?.css],
+					variant: "outline",
+					size: "sm",
+					disabled: D,
+					"aria-disabled": O || k?.action?.["aria-disabled"],
+					"data-action": "retry",
+					"aria-label": k?.action?.["aria-label"] ?? E.retry(e.name),
+					onClick: (t) => {
+						k?.action?.onClick?.(t), !t.defaultPrevented && !W && (X(e), t.currentTarget.parentElement?.querySelector("[data-action=\"remove\"]")?.focus());
+					},
+					children: E.retry(e.name)
+				}), /* @__PURE__ */ d(ne, {
+					...k?.action,
+					css: [be, k?.action?.css],
+					variant: "outline",
+					size: "sm",
+					disabled: D,
+					"aria-disabled": O || k?.action?.["aria-disabled"],
+					"data-action": "remove",
+					"aria-label": k?.action?.["aria-label"] ?? E.remove(e.name),
+					onClick: (n) => {
+						k?.action?.onClick?.(n), n.defaultPrevented || dt(e, t);
+					},
+					children: E.remove(e.name)
+				})]
+			}));
+		})
+	}), $ = x !== void 0 && x > 0 && j.length >= x && !z;
+	return /* @__PURE__ */ d(t, {
+		className: [k?.root?.className, Be].filter(Boolean).join(" "),
+		styles: [se, k?.root?.css],
+		sx: Ve,
+		children: (e) => /* @__PURE__ */ f("div", {
+			...k?.root,
+			...qe,
+			ref: Ze,
+			className: e,
+			"data-ui": "file-dropzone",
+			"data-state": z ? "dragging" : j.length ? "selected" : "empty",
+			"aria-disabled": W || qe["aria-disabled"] || k?.root?.["aria-disabled"],
+			onDragEnter: (e) => {
+				k?.root?.onDragEnter?.(e), He?.(e), !e.defaultPrevented && !W && g(e.dataTransfer) && (e.preventDefault(), V.current++, B(!0));
+			},
+			onDragOver: (e) => {
+				k?.root?.onDragOver?.(e), Ue?.(e), !e.defaultPrevented && !W && g(e.dataTransfer) && (e.preventDefault(), e.dataTransfer.dropEffect = "copy");
+			},
+			onDragLeave: (e) => {
+				k?.root?.onDragLeave?.(e), We?.(e), !e.defaultPrevented && g(e.dataTransfer) && (V.current = Math.max(0, V.current - 1), V.current || B(!1));
+			},
+			onDrop: (e) => {
+				k?.root?.onDrop?.(e), Ge?.(e), V.current = 0, B(!1), !e.defaultPrevented && g(e.dataTransfer) && (e.preventDefault(), Z(Array.from(e.dataTransfer.files)));
+			},
+			onPaste: (e) => {
+				k?.root?.onPaste?.(e), Ke?.(e);
+				let t = e.target;
+				!e.defaultPrevented && Ie && !W && N.current?.contains(N.current.ownerDocument.activeElement) && !t.closest("input, textarea, [contenteditable]:not([contenteditable=\"false\"])") && e.clipboardData.files.length && (e.preventDefault(), Z(Array.from(e.clipboardData.files)));
+			},
+			children: [
+				/* @__PURE__ */ f("div", {
+					...k?.target,
+					"data-dragging": z,
+					"data-compact": $,
+					css: [
+						ce,
+						W && ue,
+						k?.target?.css
+					],
+					onClick: (e) => {
+						k?.target?.onClick?.(e);
+						let t = e.target.closest(Ce);
+						!e.defaultPrevented && !W && !e.currentTarget.contains(t) && M.current?.click();
+					},
+					children: [/* @__PURE__ */ f("label", {
+						...k?.label,
+						htmlFor: at,
+						css: [
+							le,
+							de[Fe],
+							k?.label?.css
+						],
+						children: [
+							/* @__PURE__ */ d("input", {
+								...J,
+								ref: Qe,
+								id: at,
+								type: "file",
+								name: Re,
+								accept: m,
+								multiple: h,
+								required: Pe,
+								disabled: D,
+								"aria-disabled": O || J?.["aria-disabled"],
+								"aria-labelledby": st,
+								"aria-label": J?.["aria-label"] ?? (!G && !J?.["aria-labelledby"] ? E.browse : void 0),
+								"aria-describedby": ot,
+								"aria-invalid": ct,
+								css: [me, J?.css],
+								onClick: (e) => {
+									J?.onClick?.(e), W && e.preventDefault();
+								},
+								onChange: (e) => {
+									J?.onChange?.(e), e.defaultPrevented || Z(Array.from(e.currentTarget.files ?? [])), e.currentTarget.value = "";
+								}
+							}),
+							G && /* @__PURE__ */ d("span", {
+								id: `${A}-label`,
+								children: S
+							}),
+							it && /* @__PURE__ */ d("div", {
+								...k?.description,
+								id: `${A}-description`,
+								css: [$ ? te : p, k?.description?.css],
+								children: C
+							}),
+							z && o(Me) && /* @__PURE__ */ d("div", { children: Me }),
+							$ && /* @__PURE__ */ d("span", { children: E.count(j.length) }),
+							/* @__PURE__ */ d("span", {
+								...k?.browse,
+								"aria-hidden": !0,
+								css: [pe, k?.browse?.css],
+								children: E.browse
+							}),
+							K && /* @__PURE__ */ d("div", {
+								...k?.note,
+								id: `${A}-note`,
+								css: [p, k?.note?.css],
+								children: w
+							})
+						]
+					}), b === "inside" && Q]
+				}),
+				q && /* @__PURE__ */ f("div", {
+					...k?.error,
+					id: `${A}-error`,
+					role: "alert",
+					css: [xe, k?.error?.css],
+					children: [o(T) && T, H.length > 0 && /* @__PURE__ */ d("ul", { children: H.map((e, t) => /* @__PURE__ */ f("li", { children: [
+						/* @__PURE__ */ d("bdi", { children: e.file.name }),
+						": ",
+						e.message
+					] }, t)) })]
+				}),
+				b === "below" && Q,
+				/* @__PURE__ */ d("div", {
+					...k?.status,
+					role: "status",
+					"aria-live": "polite",
+					"aria-atomic": "true",
+					css: [te, k?.status?.css],
+					children: tt
+				})
+			]
+		})
+	});
+}
+_.displayName = "FileDropzone";
+//#endregion
+export { _ as t };

package/dist/file-dropzone.js

@@ -0,0 +1,2 @@
+'use client';
+export { t as FileDropzone } from "./file-dropzone-pR4v7owg.js";