@jfrader/ui 0.5.0 → 0.6.0

package/dist/file-dropzone-pR4v7owg.js

@@ -1,457 +0,0 @@
-'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 };