@jfrader/ui 0.4.0 → 0.5.1

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

package/dist/file-dropzone.js

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