themelia-react-ui 0.0.0-stage → 1.0.1

package/dist/upload-D8Za5x_c.js

@@ -0,0 +1,849 @@
+"use client";
+import { _ as e, c as t, s as n } from "./ui-provider-CftIB6TY.js";
+import { useStrings as r } from "./lib/strings.js";
+import { t as i } from "./utils-C2EKeIw3.js";
+import { n as a } from "./buttons-Co6GavvM.js";
+import { a as o } from "./typography-Cv8MT-82.js";
+import { _ as s, f as c, m as l } from "./smart-card-CYLn46e6.js";
+import { a as u, i as d } from "./primitives-DKPOGVpj.js";
+import { o as f } from "./item-pJ0GsOiJ.js";
+import { t as p } from "./use-file-drop-target-BX7GnhoQ.js";
+import { a as m, s as ee } from "./upload-queue-hIIYBLS7.js";
+import { a as h, c as g, i as _, n as v, o as y, r as b, t as x } from "./attachment-BO2R47wn.js";
+import * as S from "react";
+import C, { forwardRef as w, useCallback as T, useEffect as E, useId as te, useLayoutEffect as ne, useMemo as D, useRef as O, useState as k } from "react";
+import { jsx as A, jsxs as j } from "react/jsx-runtime";
+import { Camera as M, ImageIcon as re, Trash2 as ie, Trash2Icon as N, TriangleAlert as P, UploadIcon as F, X as ae } from "lucide-react";
+//#region src/components/base/upload/file-upload.strings.ts
+var I = {
+	instruction: "Drag files here or click to browse",
+	helper: "",
+	browse: "Browse files",
+	replace: "Replace file",
+	remove: "Remove file",
+	dragOver: "Release to select",
+	errorsHeading: "Some files could not be selected",
+	replaceFileAria: (e) => `Replace ${e}`,
+	removeFileAria: (e) => `Remove ${e}`,
+	invalidType: (e, t) => `${e} is not an accepted file type (${t}).`,
+	fileTooSmall: (e, t) => `${e} is smaller than the minimum size of ${t}.`,
+	fileTooLarge: (e, t) => `${e} is larger than the maximum size of ${t}.`,
+	tooManyFiles: (e, t) => `${e} exceeds the limit of ${t} files.`,
+	duplicateFile: (e) => `${e} has already been selected.`,
+	customValidationFailed: (e) => `${e} did not pass validation.`
+};
+//#endregion
+//#region src/components/base/upload/file-upload.validation.ts
+function L(e) {
+	return `${e.name}\u0000${e.size}\u0000${e.type}\u0000${e.lastModified}`;
+}
+function R(e, t) {
+	if (!t?.trim()) return !0;
+	let n = e.name.toLowerCase(), r = e.type.toLowerCase();
+	return t.split(",").map((e) => e.trim().toLowerCase()).filter(Boolean).some((e) => e.startsWith(".") ? n.endsWith(e) : e.endsWith("/*") ? r.startsWith(e.slice(0, -1)) : r === e);
+}
+function z(e, t) {
+	let { accept: n, minSizeBytes: r, maxSizeBytes: i, validateFile: a, formatSize: o, strings: s } = t;
+	if (!R(e, n)) return {
+		file: e,
+		code: "invalid-type",
+		message: s.invalidType(e.name, n ?? "")
+	};
+	if (r !== void 0 && e.size < r) return {
+		file: e,
+		code: "too-small",
+		message: s.fileTooSmall(e.name, o(r))
+	};
+	if (i !== void 0 && e.size > i) return {
+		file: e,
+		code: "too-large",
+		message: s.fileTooLarge(e.name, o(i))
+	};
+	if (a) {
+		let t;
+		try {
+			t = a(e);
+		} catch {
+			t = !1;
+		}
+		if (t !== !0) return {
+			file: e,
+			code: "custom",
+			message: typeof t == "string" ? t : s.customValidationFailed(e.name)
+		};
+	}
+}
+function oe({ incoming: e, current: t, accept: n, minSizeBytes: r, maxSizeBytes: i, maxFiles: a, append: o, validateFile: s, formatSize: c, strings: l }) {
+	let u = o ? [...t] : [], d = new Set(u.map(L)), f = [], p = [];
+	for (let t of e) {
+		let e = z(t, {
+			accept: n,
+			minSizeBytes: r,
+			maxSizeBytes: i,
+			validateFile: s,
+			formatSize: c,
+			strings: l
+		});
+		if (e) {
+			p.push(e);
+			continue;
+		}
+		let o = L(t);
+		if (d.has(o)) {
+			p.push({
+				file: t,
+				code: "duplicate",
+				message: l.duplicateFile(t.name)
+			});
+			continue;
+		}
+		if (u.length >= a) {
+			p.push({
+				file: t,
+				code: "too-many",
+				message: l.tooManyFiles(t.name, a)
+			});
+			continue;
+		}
+		f.push(t), u.push(t), d.add(o);
+	}
+	return {
+		accepted: f,
+		nextFiles: u,
+		rejections: p
+	};
+}
+//#endregion
+//#region src/components/base/upload/file-upload.tsx
+function se(e) {
+	return Object.prototype.hasOwnProperty.call(e, "value");
+}
+function ce(e) {
+	return e === void 0 || !Number.isFinite(e) ? 2 ** 53 - 1 : Math.max(1, Math.floor(e));
+}
+function le(e, t) {
+	return `${e.name}-${e.size}-${e.type}-${e.lastModified}-${t}`;
+}
+function ue(e, t, n) {
+	t.current = e, typeof n == "function" ? n(e) : n && (n.current = e);
+}
+function B({ file: e, index: t, disabled: n, size: r, locale: i, strings: s, showReplace: c, onReplace: l, onRemove: u }) {
+	let f = s.replaceFileAria(e.name), p = s.removeFileAria(e.name);
+	return /* @__PURE__ */ j(x, {
+		variant: "outline",
+		size: r,
+		className: "file-upload--file flex-nowrap bg-card text-card-foreground",
+		children: [
+			/* @__PURE__ */ A(y, {
+				variant: "icon",
+				className: "file-upload--file-media self-center group-has-data-[slot=item-description]/item:self-center",
+				children: /* @__PURE__ */ A(h, { name: e.name })
+			}),
+			/* @__PURE__ */ j(b, {
+				className: "file-upload--file-content min-w-0",
+				children: [/* @__PURE__ */ A(g, {
+					className: "file-upload--file-name truncate",
+					title: e.name,
+					children: e.name
+				}), /* @__PURE__ */ A(_, {
+					className: "file-upload--file-size",
+					clamp: 1,
+					children: /* @__PURE__ */ A(d, {
+						value: e.size,
+						locale: i,
+						size: "xs",
+						align: "left",
+						type: "secondary"
+					})
+				})]
+			}),
+			/* @__PURE__ */ j(v, {
+				className: "file-upload--actions gap-space-xs",
+				children: [c && /* @__PURE__ */ A(a, {
+					type: "button",
+					tone: "secondary",
+					buttonStyle: "ghost",
+					size: "sm",
+					iconOnly: !0,
+					icon: F,
+					"aria-label": f,
+					title: f,
+					disabled: n,
+					onClick: l,
+					children: /* @__PURE__ */ A(o, {
+						tag: "span",
+						size: "inherit",
+						className: "sr-only",
+						children: s.replace
+					})
+				}), /* @__PURE__ */ A(a, {
+					type: "button",
+					tone: "destructive",
+					buttonStyle: "ghost",
+					size: "sm",
+					iconOnly: !0,
+					icon: N,
+					"aria-label": p,
+					title: p,
+					disabled: n,
+					onClick: () => u(t),
+					children: /* @__PURE__ */ A(o, {
+						tag: "span",
+						size: "inherit",
+						className: "sr-only",
+						children: s.remove
+					})
+				})]
+			})
+		]
+	});
+}
+function V(d, h) {
+	let { accept: g, disabled: _ = !1, invalid: v = !1, size: y, minSizeBytes: b, maxSizeBytes: x, validateFile: S, onRejectedFiles: C, className: w, strings: E, multiple: M = !1, value: re, defaultValue: ie, onValueChange: N, selectionMode: F, maxFiles: ae, "aria-describedby": L, "aria-invalid": R, ...z } = d, V = r(I, E), { defaultScale: H } = n(), { locale: U } = t(), W = e(y, H), G = se(d), [de, fe] = k(() => d.multiple ? [...d.defaultValue ?? []] : d.defaultValue ? [d.defaultValue] : []), [K, pe] = k([]), q = O(null), J = O(null), Y = O(!1), X = O(!1), me = te(), Z = D(() => G ? d.multiple ? d.value ?? [] : d.value ? [d.value] : [] : de, [
+		G,
+		d.multiple,
+		d.value,
+		de
+	]);
+	ne(() => {
+		if (!Y.current) return;
+		let e = J.current?.querySelector(".file-upload--actions button, .file-upload--dropzone input[type=file], .file-upload--dropzone button");
+		e && (e.focus(), Y.current = !1);
+	}, [Z]);
+	let he = d.multiple ? d : void 0, ge = M ? ce(he?.maxFiles) : 1, _e = M && (he?.selectionMode ?? "append") === "append", ve = `${z.id ?? `file-upload-${me}`}-errors`, ye = [L, K.length > 0 ? ve : void 0].filter(Boolean).join(" ") || void 0, Q = v || K.length > 0, $ = T((e) => {
+		if (G || fe(e), d.multiple) d.onValueChange?.(e);
+		else {
+			let t = e[0];
+			d.onValueChange?.(t);
+		}
+	}, [G, d]), be = T((e) => u(e, { locale: U }) ?? `${e} B`, [U]), xe = T((e) => {
+		if (_ || e.length === 0) return !1;
+		let t = oe({
+			incoming: e,
+			current: Z,
+			accept: g,
+			minSizeBytes: b,
+			maxSizeBytes: x,
+			maxFiles: ge,
+			append: _e,
+			validateFile: S,
+			formatSize: be,
+			strings: V
+		});
+		return pe(t.rejections), t.rejections.length > 0 && C?.(t.rejections), t.accepted.length !== 0 && (Y.current = !M && (X.current || !!J.current?.contains(document.activeElement)), X.current = !1, $(t.nextFiles), t.rejections.length === 0);
+	}, [
+		g,
+		_e,
+		$,
+		_,
+		M,
+		Z,
+		be,
+		ge,
+		x,
+		b,
+		C,
+		V,
+		S
+	]), Se = T(() => {
+		q.current && (q.current.value = "");
+	}, []), Ce = T((e) => {
+		_ || (pe([]), Se(), Y.current = !!J.current?.contains(document.activeElement), $(Z.filter((t, n) => n !== e)));
+	}, [
+		Se,
+		$,
+		_,
+		Z
+	]), we = T(() => {
+		_ || (X.current = !!J.current?.contains(document.activeElement), q.current?.click());
+	}, [_]), { isDragging: Te, dropTargetProps: Ee } = p({
+		disabled: _,
+		onFiles: xe
+	}), De = {
+		...z,
+		accept: g,
+		multiple: M,
+		disabled: _,
+		"aria-describedby": ye,
+		"aria-invalid": Q ? !0 : R
+	}, Oe = /* @__PURE__ */ A(m, {
+		ref: (e) => ue(e, q, h),
+		onDrop: xe,
+		accept: g,
+		multiple: M,
+		disabled: _,
+		invalid: Q,
+		size: W,
+		className: "file-upload--dropzone",
+		inputProps: De,
+		strings: {
+			instruction: V.instruction,
+			helper: V.helper,
+			dragOver: V.dragOver
+		},
+		children: /* @__PURE__ */ A(a, {
+			type: "button",
+			tone: "secondary",
+			buttonStyle: "outline",
+			size: W,
+			disabled: _,
+			onClick: we,
+			children: V.browse
+		})
+	});
+	return /* @__PURE__ */ j("div", {
+		ref: J,
+		"data-disabled": _ || void 0,
+		"data-invalid": Q || void 0,
+		className: i("file-upload--component grid gap-space-md", w),
+		children: [
+			(M || Z.length === 0) && Oe,
+			!M && Z[0] && /* @__PURE__ */ j("div", {
+				...Ee,
+				"data-dragging": Te || void 0,
+				"data-invalid": Q || void 0,
+				className: i("file-upload--selected rounded-radius transition-shadow", Q && "[&_.file-upload--file]:border-destructive", !_ && Te && (Q ? "ring-2 ring-destructive/50 ring-offset-2" : "ring-2 ring-primary/50 ring-offset-2")),
+				children: [/* @__PURE__ */ A(ee, {
+					...De,
+					ref: (e) => ue(e, q, h),
+					tabIndex: -1,
+					className: "file-upload--input",
+					onFiles: xe
+				}), /* @__PURE__ */ A(B, {
+					file: Z[0],
+					index: 0,
+					disabled: _,
+					size: W,
+					locale: U,
+					strings: V,
+					showReplace: !0,
+					onReplace: we,
+					onRemove: Ce
+				})]
+			}),
+			M && Z.length > 0 && /* @__PURE__ */ A(f, {
+				className: "file-upload--files",
+				children: Z.map((e, t) => /* @__PURE__ */ A(B, {
+					file: e,
+					index: t,
+					disabled: _,
+					size: W,
+					locale: U,
+					strings: V,
+					showReplace: !1,
+					onReplace: we,
+					onRemove: Ce
+				}, le(e, t)))
+			}),
+			K.length > 0 && /* @__PURE__ */ j(c, {
+				id: ve,
+				tone: "destructive",
+				"aria-live": "polite",
+				className: i("file-upload--errors", W === "sm" && "p-surface-xs"),
+				children: [
+					/* @__PURE__ */ A(P, { "aria-hidden": "true" }),
+					/* @__PURE__ */ A(s, { children: V.errorsHeading }),
+					/* @__PURE__ */ A(l, { children: /* @__PURE__ */ A("ul", {
+						className: "grid gap-space-2xs",
+						children: K.map((e, t) => /* @__PURE__ */ A("li", {
+							className: "file-upload--error",
+							children: /* @__PURE__ */ A(o, {
+								tag: "span",
+								size: "xs",
+								type: "error",
+								children: e.message
+							})
+						}, `${e.code}-${le(e.file, t)}`))
+					}) })
+				]
+			})
+		]
+	});
+}
+var H = w(V);
+H.displayName = "FileUpload";
+//#endregion
+//#region src/hooks/use-files.ts
+var U = [
+	"B",
+	"KB",
+	"MB",
+	"GB",
+	"TB"
+];
+function W(e) {
+	if (!Number.isFinite(e) || e <= 0) return "0 B";
+	let t = Math.min(Math.floor(Math.log(e) / Math.log(1024)), U.length - 1), n = e / 1024 ** t;
+	return `${t === 0 ? n.toFixed(0) : Number(n.toFixed(1)).toString()} ${U[t]}`;
+}
+var G = 0;
+function de() {
+	return `${Date.now().toString(36)}-${(G++).toString(36)}`;
+}
+function fe(e) {
+	return e.name.split(".").pop()?.toLowerCase() ?? "";
+}
+function K(e) {
+	return `${e.name}\u0000${e.size}\u0000${e.type}\u0000${e.lastModified}`;
+}
+function pe(e) {
+	return {
+		id: de(),
+		file: e,
+		name: e.name,
+		size: e.size,
+		formattedSize: W(e.size),
+		type: e.type,
+		extension: fe(e),
+		lastModified: e.lastModified
+	};
+}
+function q(e, t) {
+	let n = fe(e);
+	if (t?.minSize !== void 0 && e.size < t.minSize) return {
+		file: e,
+		code: "too-small",
+		details: { minimumBytes: t.minSize }
+	};
+	if (t?.maxSize !== void 0 && e.size > t.maxSize) return {
+		file: e,
+		code: "too-large",
+		details: { maximumBytes: t.maxSize }
+	};
+	if (t?.allowedExtensions && !t.allowedExtensions.some((e) => e.toLowerCase().replace(/^\./, "") === n)) return {
+		file: e,
+		code: "invalid-type",
+		details: { extension: n }
+	};
+	if (t?.customValidator) {
+		let n;
+		try {
+			n = t.customValidator(e);
+		} catch {
+			n = !1;
+		}
+		if (n !== !0) return {
+			file: e,
+			code: "custom",
+			details: { customMessage: typeof n == "string" && n.length > 0 ? n : void 0 }
+		};
+	}
+}
+function J(e) {
+	return Object.fromEntries(e.map((e) => [e.file.name, e]));
+}
+function Y(e) {
+	let [t, n] = k([]), r = O([]), [i, a] = k([]), o = T(W, []), s = T((t, i) => {
+		let o = Array.isArray(t) ? t : Array.from(t), s = r.current, c = i ? [] : [...s], l = new Set(c.map((e) => K(e.file))), u = [], d = [];
+		for (let t of o) {
+			let n = K(t);
+			if (l.has(n)) {
+				d.push({
+					file: t,
+					code: "duplicate",
+					details: {}
+				});
+				continue;
+			}
+			let r = q(t, e);
+			if (r) {
+				d.push(r);
+				continue;
+			}
+			if (e?.maxFiles !== void 0 && c.length >= e.maxFiles) {
+				d.push({
+					file: t,
+					code: "too-many",
+					details: { maximumFiles: e.maxFiles }
+				});
+				continue;
+			}
+			let i = pe(t);
+			u.push(i), c.push(i), l.add(n);
+		}
+		return i && u.length === 0 && d.length > 0 && (c = s), r.current = c, n(c), a(d), {
+			accepted: u,
+			files: c,
+			rejections: d
+		};
+	}, [e]);
+	return {
+		files: t,
+		addFiles: T((e) => s(e, !1), [s]),
+		setFiles: T((e) => s(e, !0), [s]),
+		remove: T((e) => {
+			let t = r.current.filter((t) => t.id !== e);
+			r.current = t, n(t);
+		}, []),
+		removeAll: T(() => {
+			r.current = [], n([]), a([]);
+		}, []),
+		formatSize: o,
+		validationErrors: J(i),
+		rejections: i
+	};
+}
+//#endregion
+//#region src/components/base/upload/image-upload.tsx
+var X = 2, me = {
+	square: "aspect-square",
+	standard: "aspect-[4/3]",
+	widescreen: "aspect-[16/9]",
+	portrait: "aspect-[9/16]"
+}, Z = {
+	select: "Select image",
+	change: "Change image",
+	remove: "Remove",
+	noSelection: "No file selected yet.",
+	keepCurrent: "Current image stays until you upload a new one.",
+	previewAlt: "Selected image",
+	supportsTemplate: "Supports {ext} files up to {size} MB.",
+	invalidType: (e, t) => `${e} uses an unsupported .${t || "unknown"} file type.`,
+	tooSmall: (e, t) => `${e} is smaller than ${t}.`,
+	tooLarge: (e, t) => `${e} is larger than ${t}.`,
+	tooMany: (e, t) => `${e} exceeds the limit of ${t} images.`,
+	duplicate: (e) => `${e} is already selected.`,
+	customValidationFailed: (e) => `${e} did not pass validation.`,
+	moreFiles: (e) => `+ ${e} more file${e === 1 ? "" : "s"}`
+};
+function he(e, t, n) {
+	let { file: r, code: i, details: a } = e;
+	switch (i) {
+		case "invalid-type": return t.invalidType(r.name, a.extension ?? "");
+		case "too-small": return t.tooSmall(r.name, n(a.minimumBytes ?? 0));
+		case "too-large": return t.tooLarge(r.name, n(a.maximumBytes ?? 0));
+		case "too-many": return t.tooMany(r.name, a.maximumFiles ?? 1);
+		case "duplicate": return t.duplicate(r.name);
+		case "custom": return a.customMessage ?? t.customValidationFailed(r.name);
+	}
+}
+function ge({ accept: e = ".png,.jpg,.jpeg,.gif,.svg", multiple: t = !1, value: n, onValueChange: s, disabled: c, initialPreviewUrl: l, aspectRatio: u = "square", fit: d = "cover", maxWidth: f, layout: m = "stacked", invalid: ee, strings: h }, g) {
+	let _ = r(Z, h), v = te(), y = O(null), b = D(() => {
+		if (!e) return [
+			"png",
+			"jpg",
+			"jpeg",
+			"gif",
+			"svg"
+		];
+		let t = e.split(",").map((e) => e.trim()).map((e) => {
+			if (!e) return null;
+			if (e.startsWith(".")) return e.slice(1).toLowerCase();
+			if (e.includes("/")) {
+				let t = e.split("/")[1] ?? "";
+				return t === "*" || t.length === 0 ? null : t.replace(/\+.*/, "").toLowerCase();
+			}
+			return e.toLowerCase();
+		}).filter((e) => !!e);
+		if (t.length !== 0) return Array.from(new Set(t));
+	}, [e]), { files: x, setFiles: S, remove: C, removeAll: w, formatSize: ne, rejections: M } = Y(D(() => ({
+		maxFiles: t ? void 0 : 1,
+		maxSize: X * 1024 * 1024,
+		allowedExtensions: b
+	}), [t, b]));
+	E(() => {
+		n ? S([n]) : (w(), y.current && (y.current.value = ""));
+	}, [
+		n,
+		S,
+		w
+	]);
+	let N = x[0], P = N ? _.change : _.select, [F, ae] = k(void 0), I = D(() => !b || b.length === 0 ? null : b.map((e) => e.toUpperCase()).join(", "), [b]);
+	E(() => {
+		let e = N?.file ?? n;
+		if (!e) {
+			ae(void 0);
+			return;
+		}
+		let t = URL.createObjectURL(e);
+		return ae(t), () => URL.revokeObjectURL(t);
+	}, [N, n]);
+	let L = F ?? l, R = !!L, z = N?.name ?? _.previewAlt ?? Z.previewAlt, oe = me[u] ?? me.square, se = d === "contain" ? "object-contain p-surface-xs" : "object-cover", ce = f ? typeof f == "number" ? `${f}px` : f : "240px", le = m === "inline" ? void 0 : { maxWidth: ce }, ue = m === "inline" ? {
+		maxWidth: f ? ce : "185px",
+		width: "100%"
+	} : void 0, B = T((e) => {
+		if (c || e.length === 0) return;
+		let t = S(e).accepted[0]?.file;
+		t && s?.(t);
+	}, [
+		c,
+		S,
+		s
+	]), V = T((e) => {
+		B(Array.from(e.target.files ?? []));
+	}, [B]), { isDragging: H, dropTargetProps: U } = p({
+		disabled: c,
+		onFiles: B
+	}), W = T(() => {
+		c || y.current?.click();
+	}, [c]), G = T(() => {
+		N && C(N.id), s?.(void 0), y.current && (y.current.value = "");
+	}, [
+		N,
+		C,
+		s
+	]);
+	return /* @__PURE__ */ j("div", {
+		className: i("image-upload--component", "grid gap-space-md"),
+		style: le,
+		children: [
+			/* @__PURE__ */ A("input", {
+				ref: (e) => {
+					y.current = e, typeof g == "function" ? g(e) : g && (g.current = e);
+				},
+				id: v,
+				type: "file",
+				className: "sr-only",
+				"aria-label": P,
+				accept: e,
+				multiple: t,
+				disabled: c,
+				onChange: V
+			}),
+			/* @__PURE__ */ j("div", {
+				className: i(m === "inline" ? "flex flex-wrap items-start gap-space-xl" : "grid gap-space-md"),
+				children: [/* @__PURE__ */ A("div", {
+					...U,
+					"data-dragging": H || void 0,
+					className: i("relative overflow-hidden rounded-radius-md border transition-colors", m === "inline" ? "flex-shrink-0 w-full" : "w-full", oe, !c && H && "ring-2 ring-ring", R ? "border-border bg-muted/20" : i("border-dashed bg-background text-muted-foreground ", ee ? "border-destructive" : "border-border")),
+					style: ue,
+					children: R && L ? /* @__PURE__ */ A("img", {
+						src: L,
+						alt: z,
+						className: i("absolute inset-0 h-full w-full", se)
+					}) : /* @__PURE__ */ A("div", {
+						className: "absolute inset-0 flex items-center justify-center",
+						children: /* @__PURE__ */ A(re, {
+							"aria-hidden": !0,
+							className: "size-icon-lg"
+						})
+					})
+				}), /* @__PURE__ */ j("div", {
+					className: i("grid gap-space-sm", m === "inline" && "flex-1 min-w-0 basis-40"),
+					children: [
+						/* @__PURE__ */ j("div", {
+							className: "flex flex-wrap items-center gap-space-md",
+							children: [/* @__PURE__ */ A(a, {
+								type: "button",
+								tone: "secondary",
+								buttonStyle: "outline",
+								onClick: W,
+								disabled: c,
+								children: P
+							}), !N && !!R && /* @__PURE__ */ A(o, {
+								size: "xs",
+								type: "secondary",
+								children: _.keepCurrent
+							})]
+						}),
+						!!I && /* @__PURE__ */ A(o, {
+							size: "xs",
+							type: "secondary",
+							children: _.supportsTemplate.replace("{ext}", I).replace("{size}", String(X))
+						}),
+						!!N && /* @__PURE__ */ j("div", {
+							className: "grid gap-space-2xs",
+							children: [
+								/* @__PURE__ */ A(o, {
+									weight: "medium",
+									title: N.name,
+									className: "truncate",
+									children: N.name
+								}),
+								/* @__PURE__ */ A(o, {
+									size: "xs",
+									type: "secondary",
+									children: N.formattedSize
+								}),
+								!!t && x.length > 1 && /* @__PURE__ */ A(o, {
+									size: "xs",
+									type: "secondary",
+									children: _.moreFiles(x.length - 1)
+								}),
+								/* @__PURE__ */ A(a, {
+									type: "button",
+									tone: "destructive",
+									buttonStyle: "ghost",
+									size: "sm",
+									icon: ie,
+									onClick: G,
+									children: _.remove
+								})
+							]
+						}),
+						!N && !R && /* @__PURE__ */ A(o, {
+							size: "xs",
+							type: "secondary",
+							children: _.noSelection
+						})
+					]
+				})]
+			}),
+			M.length > 0 && /* @__PURE__ */ A("div", {
+				className: "image-upload--errors grid gap-space-2xs",
+				role: "alert",
+				"aria-live": "polite",
+				children: M.map((e, t) => /* @__PURE__ */ A(o, {
+					size: "xs",
+					type: "error",
+					children: he(e, _, ne)
+				}, `${e.file.name}-${e.code}-${t}`))
+			})
+		]
+	});
+}
+var _e = C.forwardRef(ge);
+_e.displayName = "ImageUpload";
+//#endregion
+//#region src/components/base/upload/avatar-upload.tsx
+var ve = {
+	change: "Change photo",
+	remove: "Remove photo",
+	hint: "Click or drop an image",
+	dragOver: "Drop image to upload",
+	invalidType: (e, t) => `${e} uses an unsupported .${t || "unknown"} file type.`,
+	tooSmall: (e, t) => `${e} is smaller than ${t}.`,
+	tooLarge: (e, t) => `${e} is larger than ${t}.`,
+	tooMany: (e, t) => `${e} exceeds the limit of ${t} images.`,
+	duplicate: (e) => `${e} is already selected.`,
+	customValidationFailed: (e) => `${e} did not pass validation.`
+};
+function ye(e, t, n) {
+	let { file: r, code: i, details: a } = e;
+	switch (i) {
+		case "invalid-type": return t.invalidType(r.name, a.extension ?? "");
+		case "too-small": return t.tooSmall(r.name, n(a.minimumBytes ?? 0));
+		case "too-large": return t.tooLarge(r.name, n(a.maximumBytes ?? 0));
+		case "too-many": return t.tooMany(r.name, a.maximumFiles ?? 1);
+		case "duplicate": return t.duplicate(r.name);
+		case "custom": return a.customMessage ?? t.customValidationFailed(r.name);
+	}
+}
+var Q = {
+	sm: {
+		box: "size-upload-avatar-small",
+		icon: "size-icon",
+		remove: "size-control-clear"
+	},
+	md: {
+		box: "size-upload-avatar",
+		icon: "size-icon-lg",
+		remove: "size-action"
+	},
+	lg: {
+		box: "size-upload-avatar-large",
+		icon: "size-icon-lg",
+		remove: "size-action-lg"
+	}
+};
+function $({ value: t, onValueChange: a, initialPreviewUrl: s, accept: c = ".png,.jpg,.jpeg,.gif,.webp", disabled: l = !1, invalid: u = !1, size: d, className: f, strings: m, initials: ee }, h) {
+	let { defaultScale: g } = n(), _ = e(d, g), v = r(ve, m), y = te(), b = O(null), x = Q[_], { files: S, setFiles: C, removeAll: w, formatSize: ne, rejections: re } = Y({
+		maxFiles: 1,
+		allowedExtensions: D(() => c.split(",").map((e) => e.trim().replace(/^\./, "").toLowerCase()).filter(Boolean), [c])
+	});
+	E(() => {
+		t ? C([t]) : w();
+	}, [t]);
+	let ie = S[0], [N, P] = k(void 0);
+	E(() => {
+		let e = ie?.file ?? t;
+		if (!e) {
+			P(void 0);
+			return;
+		}
+		let n = URL.createObjectURL(e);
+		return P(n), () => URL.revokeObjectURL(n);
+	}, [ie, t]);
+	let F = N ?? s, I = !!F, L = T((e) => {
+		let t = e.target.files;
+		if (!t || t.length === 0) return;
+		let n = C(t).accepted[0]?.file;
+		n && a?.(n), b.current && (b.current.value = "");
+	}, [a, C]), R = T(() => {
+		w(), a?.(void 0), b.current && (b.current.value = "");
+	}, [a, w]), z = T((e) => {
+		let t = C(e).accepted[0]?.file;
+		t && a?.(t);
+	}, [a, C]), { isDragging: oe, dropTargetProps: se } = p({
+		disabled: l,
+		onFiles: z
+	});
+	return /* @__PURE__ */ j("div", {
+		className: i("avatar-upload--component", "inline-flex flex-col items-center gap-space-md", f),
+		children: [
+			/* @__PURE__ */ j("div", {
+				...se,
+				className: i("group relative flex shrink-0 items-center justify-center overflow-hidden rounded-full", "border border-dashed transition-colors duration-150 outline-none", "focus-within:ring-2 focus-within:ring-ring/50", I ? "border-border/60 bg-muted/20" : i("bg-muted/30 hover:border-primary hover:bg-primary/5", u ? "border-destructive" : "border-muted-foreground/40"), l && "cursor-not-allowed opacity-50", !l && oe && "border-primary bg-primary/10", x.box),
+				children: [
+					/* @__PURE__ */ A("input", {
+						id: y,
+						ref: (e) => {
+							b.current = e, typeof h == "function" ? h(e) : h && (h.current = e);
+						},
+						type: "file",
+						className: "absolute inset-0 z-10 size-full cursor-pointer opacity-0 disabled:cursor-not-allowed",
+						"aria-label": v.change,
+						"aria-invalid": u || void 0,
+						accept: c,
+						disabled: l,
+						onChange: L
+					}),
+					I && F ? /* @__PURE__ */ A("img", {
+						src: F,
+						alt: v.change,
+						className: "absolute inset-0 size-full object-cover"
+					}) : ee ? /* @__PURE__ */ A(o, {
+						size: _ === "sm" ? "sm" : _ === "lg" ? "lg" : "base",
+						weight: "bold",
+						className: "leading-none",
+						children: ee
+					}) : /* @__PURE__ */ A(M, {
+						className: i(x.icon, "text-muted-foreground"),
+						"aria-hidden": "true"
+					}),
+					!l && I && /* @__PURE__ */ A("div", {
+						className: "pointer-events-none absolute inset-0 hidden items-center justify-center bg-foreground/50 text-background backdrop-blur-[1px] group-hover:flex",
+						"aria-hidden": "true",
+						children: /* @__PURE__ */ A(M, { className: x.icon })
+					}),
+					!l && I && /* @__PURE__ */ A("button", {
+						type: "button",
+						"aria-label": v.remove,
+						onClick: (e) => {
+							e.stopPropagation(), R();
+						},
+						className: i("absolute right-0.5 top-0.5 z-20 inline-flex items-center justify-center rounded-full bg-card text-foreground shadow ring-1 ring-border", "opacity-100 transition-opacity sm:opacity-0 sm:group-hover:opacity-100 group-focus-within:opacity-100 focus-visible:opacity-100", x.remove),
+						children: /* @__PURE__ */ A(ae, { className: "size-icon-sm" })
+					}),
+					!l && !I && oe && /* @__PURE__ */ A(o, {
+						size: "xs",
+						weight: "medium",
+						className: "absolute inset-x-0 bottom-1.5 text-center text-primary-accent",
+						children: v.dragOver
+					})
+				]
+			}),
+			!I && /* @__PURE__ */ A(o, {
+				size: "xs",
+				type: "secondary",
+				children: v.hint
+			}),
+			re.length > 0 && /* @__PURE__ */ A("div", {
+				className: "avatar-upload--errors grid gap-space-2xs",
+				role: "alert",
+				"aria-live": "polite",
+				children: re.map((e, t) => /* @__PURE__ */ A(o, {
+					size: "xs",
+					type: "error",
+					children: ye(e, v, ne)
+				}, `${e.file.name}-${e.code}-${t}`))
+			})
+		]
+	});
+}
+var be = S.forwardRef($);
+be.displayName = "AvatarUpload";
+//#endregion
+export { H as a, Z as i, ve as n, I as o, _e as r, be as t };
+
+//# sourceMappingURL=upload-D8Za5x_c.js.map