@object-ui/plugin-aggrid 3.3.2 → 3.4.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @object-ui/plugin-aggrid
 
+## 3.4.0
+
+### Patch Changes
+
+- Updated dependencies [a2d7023]
+- Updated dependencies [f1ca238]
+- Updated dependencies [de881ef]
+  - @object-ui/components@3.4.0
+  - @object-ui/fields@3.4.0
+  - @object-ui/types@3.4.0
+  - @object-ui/core@3.4.0
+  - @object-ui/data-objectstack@3.4.0
+  - @object-ui/react@3.4.0
+
 ## 3.3.2
 
 ### Patch Changes

package/dist/{AvatarField-CpFxJRdO.js → AvatarField-DuaF__ns.js}

@@ -1,7 +1,7 @@
 import { n as e } from "./rolldown-runtime-CkxV0rQ3.js";
 import { t } from "./jsx-runtime-CXSCp6pT.js";
-import { t as n } from "./upload-BdzwEMeV.js";
-import { t as r } from "./x-98xe-fYG.js";
+import { t as n } from "./upload-DWhfIa3Y.js";
+import { t as r } from "./x-BDi_yYx9.js";
 import i from "react";
 import { Avatar as a, AvatarFallback as o, AvatarImage as s, Button as c } from "@object-ui/components";
 //#region ../fields/src/widgets/AvatarField.tsx

package/dist/FileField-DtvoWRK-.js

@@ -0,0 +1,214 @@
+import { n as e } from "./rolldown-runtime-CkxV0rQ3.js";
+import { t } from "./jsx-runtime-CXSCp6pT.js";
+import { t as n } from "./createLucideIcon-BtZxPlua.js";
+import { n as r, t as i } from "./dist-BcXWTU-8.js";
+import { t as a } from "./loader-circle-Cxg-xF4u.js";
+import { t as o } from "./upload-DWhfIa3Y.js";
+import { t as s } from "./x-BDi_yYx9.js";
+import { useCallback as c, useRef as l, useState as u } from "react";
+import { Button as d, EmptyValue as f } from "@object-ui/components";
+var p = n("camera", [["path", {
+	d: "M13.997 4a2 2 0 0 1 1.76 1.05l.486.9A2 2 0 0 0 18.003 7H20a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V9a2 2 0 0 1 2-2h1.997a2 2 0 0 0 1.759-1.048l.489-.904A2 2 0 0 1 10.004 4z",
+	key: "18u6gg"
+}], ["circle", {
+	cx: "12",
+	cy: "13",
+	r: "3",
+	key: "1vg3eu"
+}]]), m = n("file", [["path", {
+	d: "M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z",
+	key: "1oefj6"
+}], ["path", {
+	d: "M14 2v5a1 1 0 0 0 1 1h5",
+	key: "wfsgrz"
+}]]), h = /* @__PURE__ */ e({ FileField: () => _ }), g = t();
+function _({ value: e, onChange: t, field: n, readonly: h, ..._ }) {
+	let v = l(null), y = l(null), b = n || _.schema, x = b?.multiple || !1, S = b?.accept ? b.accept.join(",") : void 0, C = b?.maxSize, w = b?.capture ?? null, T = !S || S.split(",").some((e) => e.trim().startsWith("image/") || e.trim() === "image/*" || e.trim().startsWith(".jp") || e.trim().startsWith(".png") || e.trim().startsWith(".gif") || e.trim().startsWith(".webp")), E = typeof navigator < "u" && (navigator.maxTouchPoints > 0 || /Mobi|Android/i.test(navigator.userAgent)), D = w === !1 ? !1 : w ?? (T && E ? "environment" : null), [O, k] = u(!1), [A, j] = u([]), { upload: M } = i(), [N, P] = u({}), [F, I] = u(!1), L = e ? Array.isArray(e) ? e : [e] : [], R = c(async (e) => {
+		if (e.length === 0) return;
+		let n = [], r = e.filter((e) => {
+			if (C && e.size > C) {
+				let t = (C / (1024 * 1024)).toFixed(1);
+				return n.push(`"${e.name}" exceeds max size (${t} MB)`), !1;
+			}
+			return !0;
+		});
+		if (j(n), r.length !== 0) {
+			I(!0);
+			try {
+				let e = (await Promise.all(r.map(async (e) => {
+					try {
+						let t = await M(e, { onProgress: (t) => P((n) => ({
+							...n,
+							[e.name]: t
+						})) });
+						return {
+							name: t.name,
+							original_name: e.name,
+							size: t.size,
+							mime_type: t.mimeType,
+							url: t.url
+						};
+					} catch (t) {
+						return n.push(`Failed to upload "${e.name}": ${t.message}`), j([...n]), null;
+					}
+				}))).filter(Boolean);
+				if (e.length === 0) return;
+				t(x ? [...L, ...e] : e[0]);
+			} finally {
+				I(!1), P({});
+			}
+		}
+	}, [
+		L,
+		x,
+		t,
+		C,
+		M
+	]), z = c((e) => {
+		e.preventDefault(), e.stopPropagation(), k(!0);
+	}, []), B = c((e) => {
+		e.preventDefault(), e.stopPropagation(), k(!1);
+	}, []), V = c((e) => {
+		e.preventDefault(), e.stopPropagation(), k(!1);
+		let t = Array.from(e.dataTransfer.files);
+		if (S) {
+			let e = S.split(",").map((e) => e.trim().toLowerCase());
+			R(t.filter((t) => {
+				let n = t.name.split("."), r = n.length > 1 ? "." + n.pop()?.toLowerCase() : "";
+				return e.some((e) => e === t.type || r && e === r || e.endsWith("/*") && t.type.startsWith(e.replace("/*", "/")));
+			}));
+		} else R(t);
+	}, [S, R]);
+	if (h) return e ? /* @__PURE__ */ (0, g.jsx)("div", {
+		className: "flex flex-wrap gap-2",
+		children: (Array.isArray(e) ? e : [e]).map((e, t) => /* @__PURE__ */ (0, g.jsx)("span", {
+			className: "text-sm truncate max-w-xs",
+			children: e.name || e.original_name || "File"
+		}, t))
+	}) : /* @__PURE__ */ (0, g.jsx)(f, {});
+	let H = (e) => {
+		R(Array.from(e.target.files || []));
+	}, U = (e) => {
+		if (x) {
+			let n = L.filter((t, n) => n !== e);
+			t(n.length > 0 ? n : null);
+		} else t(null);
+	}, W = (e) => (e.mime_type || "").startsWith("image/");
+	return /* @__PURE__ */ (0, g.jsxs)("div", {
+		className: _.className,
+		children: [
+			/* @__PURE__ */ (0, g.jsx)("input", {
+				ref: v,
+				type: "file",
+				multiple: x,
+				accept: S,
+				onChange: H,
+				className: "hidden"
+			}),
+			D && /* @__PURE__ */ (0, g.jsx)("input", {
+				ref: y,
+				type: "file",
+				accept: "image/*",
+				capture: D,
+				onChange: H,
+				className: "hidden",
+				"aria-label": "Camera capture",
+				"data-testid": "file-field-camera-input"
+			}),
+			/* @__PURE__ */ (0, g.jsxs)("div", {
+				className: "space-y-2",
+				children: [
+					/* @__PURE__ */ (0, g.jsxs)("div", {
+						onDragOver: z,
+						onDragLeave: B,
+						onDrop: V,
+						onClick: () => v.current?.click(),
+						className: `
+            flex flex-col items-center justify-center gap-2 p-6 
+            border-2 border-dashed rounded-lg cursor-pointer
+            transition-colors duration-200
+            ${O ? "border-primary bg-primary/5 text-primary" : "border-muted-foreground/25 hover:border-primary/50 text-muted-foreground hover:text-foreground"}
+          `,
+						role: "button",
+						tabIndex: 0,
+						onKeyDown: (e) => {
+							(e.key === "Enter" || e.key === " ") && (e.preventDefault(), v.current?.click());
+						},
+						children: [/* @__PURE__ */ (0, g.jsx)(o, { className: `size-8 ${O ? "text-primary" : "text-muted-foreground"}` }), /* @__PURE__ */ (0, g.jsxs)("div", {
+							className: "text-center",
+							children: [/* @__PURE__ */ (0, g.jsx)("p", {
+								className: "text-sm font-medium",
+								children: O ? "Drop files here" : "Drag & drop files here"
+							}), /* @__PURE__ */ (0, g.jsxs)("p", {
+								className: "text-xs text-muted-foreground mt-1",
+								children: ["or click to browse", D ? " • use the camera button below" : ""]
+							})]
+						})]
+					}),
+					D && /* @__PURE__ */ (0, g.jsxs)(d, {
+						type: "button",
+						variant: "outline",
+						size: "sm",
+						className: "w-full",
+						onClick: (e) => {
+							e.stopPropagation(), y.current?.click();
+						},
+						"data-testid": "file-field-camera-button",
+						children: [/* @__PURE__ */ (0, g.jsx)(p, { className: "size-4 mr-2" }), D === "user" ? "Take selfie" : "Take photo"]
+					}),
+					F && /* @__PURE__ */ (0, g.jsxs)("div", {
+						className: "flex items-center gap-2 text-xs text-muted-foreground",
+						"data-testid": "file-field-uploading",
+						children: [/* @__PURE__ */ (0, g.jsx)(a, { className: "size-3 animate-spin" }), /* @__PURE__ */ (0, g.jsxs)("span", { children: ["Uploading…", Object.keys(N).length > 0 && ` (${Math.round(Object.values(N).reduce((e, t) => e + t, 0) / Object.keys(N).length * 100)}%)`] })]
+					}),
+					A.length > 0 && /* @__PURE__ */ (0, g.jsx)("div", {
+						className: "space-y-0.5",
+						children: A.map((e, t) => /* @__PURE__ */ (0, g.jsx)("p", {
+							className: "text-xs text-destructive",
+							children: e
+						}, t))
+					}),
+					L.length > 0 && /* @__PURE__ */ (0, g.jsx)("div", {
+						className: "space-y-1",
+						children: L.map((e, t) => /* @__PURE__ */ (0, g.jsxs)("div", {
+							className: "flex items-center justify-between gap-2 p-2 bg-muted/50 rounded-md border",
+							children: [/* @__PURE__ */ (0, g.jsxs)("div", {
+								className: "flex items-center gap-2 flex-1 min-w-0",
+								children: [
+									W(e) && e.url ? /* @__PURE__ */ (0, g.jsx)("img", {
+										src: e.url,
+										alt: e.name,
+										className: "size-8 object-cover rounded flex-shrink-0"
+									}) : W(e) ? /* @__PURE__ */ (0, g.jsx)(r, { className: "size-4 text-muted-foreground flex-shrink-0" }) : /* @__PURE__ */ (0, g.jsx)(m, { className: "size-4 text-muted-foreground flex-shrink-0" }),
+									/* @__PURE__ */ (0, g.jsx)("span", {
+										className: "text-sm truncate",
+										children: e.name || e.original_name || "File"
+									}),
+									e.size && /* @__PURE__ */ (0, g.jsxs)("span", {
+										className: "text-xs text-muted-foreground",
+										children: [
+											"(",
+											(e.size / 1024).toFixed(1),
+											" KB)"
+										]
+									})
+								]
+							}), /* @__PURE__ */ (0, g.jsx)(d, {
+								type: "button",
+								variant: "ghost",
+								size: "sm",
+								onClick: (e) => {
+									e.stopPropagation(), U(t);
+								},
+								className: "h-6 w-6 p-0",
+								children: /* @__PURE__ */ (0, g.jsx)(s, { className: "size-3" })
+							})]
+						}, t))
+					})
+				]
+			})
+		]
+	});
+}
+//#endregion
+export { h as t };

package/dist/{GeolocationField-BfhC7QLw.js → GeolocationField-CyzG2dqR.js}

@@ -1,6 +1,6 @@
 import { n as e } from "./rolldown-runtime-CkxV0rQ3.js";
 import { t } from "./jsx-runtime-CXSCp6pT.js";
-import { t as n } from "./createLucideIcon-C_5JZ35b.js";
+import { t as n } from "./createLucideIcon-BtZxPlua.js";
 import r from "react";
 import { Button as i, EmptyValue as a, Input as o, Label as s } from "@object-ui/components";
 var c = n("crosshair", [

package/dist/ImageCropperDialog-BFlbM7vO.js

@@ -0,0 +1,153 @@
+import { n as e } from "./rolldown-runtime-CkxV0rQ3.js";
+import { t } from "./jsx-runtime-CXSCp6pT.js";
+import { t as n } from "./createLucideIcon-BtZxPlua.js";
+import { t as r } from "./crop-2wjrXKXD.js";
+import { useCallback as i, useEffect as a, useRef as o, useState as s } from "react";
+import { Button as c, Dialog as l, DialogContent as u, DialogDescription as d, DialogFooter as f, DialogHeader as p, DialogTitle as m } from "@object-ui/components";
+var h = n("rotate-cw", [["path", {
+	d: "M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8",
+	key: "1p45f6"
+}], ["path", {
+	d: "M21 3v5h-5",
+	key: "1q7to0"
+}]]), g = /* @__PURE__ */ e({ ImageCropperDialog: () => v }), _ = t(), v = ({ open: e, onOpenChange: t, src: n, outputType: g = "image/png", outputName: v = "cropped.png", onConfirm: y }) => {
+	let b = o(null), x = o(null), [S, C] = s(0), [w, T] = s({
+		x: 0,
+		y: 0,
+		width: 100,
+		height: 100
+	}), [E, D] = s(null), [O, k] = s(!1);
+	a(() => {
+		if (!e || !n) return;
+		k(!1);
+		let t = new Image();
+		t.crossOrigin = "anonymous", t.onload = () => {
+			x.current = t;
+			let e = t.naturalWidth * .8, n = t.naturalHeight * .8;
+			T({
+				x: (t.naturalWidth - e) / 2,
+				y: (t.naturalHeight - n) / 2,
+				width: e,
+				height: n
+			}), C(0), k(!0);
+		}, t.onerror = () => k(!1), t.src = n;
+	}, [e, n]), a(() => {
+		if (!O || !x.current || !b.current) return;
+		let e = x.current, t = b.current, n = t.getContext("2d");
+		if (!n) return;
+		let r = 480 / e.naturalWidth, i = e.naturalHeight * r;
+		t.width = 480, t.height = i, n.clearRect(0, 0, 480, i), n.save(), n.translate(480 / 2, i / 2), n.rotate(S * Math.PI / 180);
+		let a = S % 180 == 0 ? 480 : i, o = S % 180 == 0 ? i : 480;
+		n.drawImage(e, -a / 2, -o / 2, a, o), n.restore();
+		let s = w.x * r, c = w.y * r, l = w.width * r, u = w.height * r;
+		n.fillStyle = "rgba(0,0,0,0.45)", n.fillRect(0, 0, 480, c), n.fillRect(0, c + u, 480, i - c - u), n.fillRect(0, c, s, u), n.fillRect(s + l, c, 480 - s - l, u), n.strokeStyle = "#3b82f6", n.lineWidth = 2, n.strokeRect(s, c, l, u);
+	}, [
+		O,
+		w,
+		S
+	]);
+	let A = i((e) => {
+		if (!x.current || !b.current) return;
+		let t = b.current.getBoundingClientRect(), n = x.current.naturalWidth / t.width;
+		D({
+			ox: (e.clientX - t.left) * n,
+			oy: (e.clientY - t.top) * n,
+			cx: w.x,
+			cy: w.y
+		}), e.target.setPointerCapture(e.pointerId);
+	}, [w]), j = i((e) => {
+		if (!E || !x.current || !b.current) return;
+		let t = b.current.getBoundingClientRect(), n = x.current.naturalWidth / t.width, r = (e.clientX - t.left) * n - E.ox, i = (e.clientY - t.top) * n - E.oy, a = Math.max(0, Math.min(E.cx + r, x.current.naturalWidth - w.width)), o = Math.max(0, Math.min(E.cy + i, x.current.naturalHeight - w.height));
+		T((e) => ({
+			...e,
+			x: a,
+			y: o
+		}));
+	}, [
+		E,
+		w.width,
+		w.height
+	]), M = i(() => D(null), []), N = i(() => C((e) => (e + 90) % 360), []), P = i(async () => {
+		if (!x.current) return;
+		let e = x.current, n = document.createElement("canvas"), r = w.width, i = w.height;
+		n.width = S % 180 == 0 ? r : i, n.height = S % 180 == 0 ? i : r;
+		let a = n.getContext("2d");
+		if (!a) return;
+		a.save(), a.translate(n.width / 2, n.height / 2), a.rotate(S * Math.PI / 180), a.drawImage(e, w.x, w.y, r, i, -r / 2, -i / 2, r, i), a.restore();
+		let o = await new Promise((e) => n.toBlob(e, g));
+		o && (y(o, v), t(!1));
+	}, [
+		w,
+		S,
+		v,
+		g,
+		y,
+		t
+	]);
+	return /* @__PURE__ */ (0, _.jsx)(l, {
+		open: e,
+		onOpenChange: t,
+		children: /* @__PURE__ */ (0, _.jsxs)(u, {
+			className: "max-w-xl",
+			children: [
+				/* @__PURE__ */ (0, _.jsxs)(p, { children: [/* @__PURE__ */ (0, _.jsx)(m, { children: "Crop & rotate image" }), /* @__PURE__ */ (0, _.jsx)(d, { children: "Drag the highlighted box to reposition the crop. Use the rotate button to spin the image in 90° increments." })] }),
+				/* @__PURE__ */ (0, _.jsxs)("div", {
+					className: "flex flex-col items-center gap-3",
+					children: [O ? /* @__PURE__ */ (0, _.jsx)("canvas", {
+						ref: b,
+						"data-testid": "image-cropper-canvas",
+						role: "img",
+						"aria-label": "Image crop preview",
+						className: "border rounded-md cursor-move touch-none max-w-full",
+						onPointerDown: A,
+						onPointerMove: j,
+						onPointerUp: M,
+						onPointerCancel: M
+					}) : /* @__PURE__ */ (0, _.jsx)("div", {
+						className: "flex h-[270px] w-full items-center justify-center text-sm text-muted-foreground",
+						children: "Loading image…"
+					}), /* @__PURE__ */ (0, _.jsxs)("div", {
+						className: "flex w-full items-center justify-between text-xs text-muted-foreground",
+						children: [/* @__PURE__ */ (0, _.jsxs)("span", { children: [
+							"Crop: ",
+							Math.round(w.width),
+							" × ",
+							Math.round(w.height),
+							" px"
+						] }), /* @__PURE__ */ (0, _.jsxs)("span", { children: [
+							"Rotation: ",
+							S,
+							"°"
+						] })]
+					})]
+				}),
+				/* @__PURE__ */ (0, _.jsxs)(f, {
+					className: "flex justify-between sm:justify-between",
+					children: [/* @__PURE__ */ (0, _.jsxs)(c, {
+						type: "button",
+						variant: "outline",
+						onClick: N,
+						"data-testid": "image-cropper-rotate",
+						children: [/* @__PURE__ */ (0, _.jsx)(h, { className: "size-4 mr-2" }), "Rotate 90°"]
+					}), /* @__PURE__ */ (0, _.jsxs)("div", {
+						className: "flex gap-2",
+						children: [/* @__PURE__ */ (0, _.jsx)(c, {
+							type: "button",
+							variant: "ghost",
+							onClick: () => t(!1),
+							children: "Cancel"
+						}), /* @__PURE__ */ (0, _.jsxs)(c, {
+							type: "button",
+							onClick: P,
+							disabled: !O,
+							"data-testid": "image-cropper-confirm",
+							children: [/* @__PURE__ */ (0, _.jsx)(r, { className: "size-4 mr-2" }), "Apply crop"]
+						})]
+					})]
+				})
+			]
+		})
+	});
+};
+//#endregion
+export { g as t };

package/dist/ImageField-DoXNtXV_.js

@@ -0,0 +1,145 @@
+import { n as e } from "./rolldown-runtime-CkxV0rQ3.js";
+import { t } from "./jsx-runtime-CXSCp6pT.js";
+import { t as n } from "./crop-2wjrXKXD.js";
+import { n as r, t as i } from "./dist-BcXWTU-8.js";
+import { t as a } from "./loader-circle-Cxg-xF4u.js";
+import { t as o } from "./x-BDi_yYx9.js";
+import { Suspense as s, lazy as c, useCallback as l, useRef as u, useState as d } from "react";
+import { Button as f, EmptyValue as p } from "@object-ui/components";
+//#region ../fields/src/widgets/ImageField.tsx
+var m = /* @__PURE__ */ e({ ImageField: () => _ }), h = t(), g = c(() => import("./ImageCropperDialog-BFlbM7vO.js").then((e) => e.t).then((e) => ({ default: e.ImageCropperDialog })));
+function _({ value: e, onChange: t, field: c, readonly: m, ..._ }) {
+	let v = u(null), y = c || _.schema, b = y?.multiple || !1, x = y?.accept ? y.accept.join(",") : "image/*", S = y?.crop !== !1, [C, w] = d(null), { upload: T } = i(), [E, D] = d(!1);
+	if (m) return e ? /* @__PURE__ */ (0, h.jsx)("div", {
+		className: "flex flex-wrap gap-2",
+		children: (Array.isArray(e) ? e : [e]).map((e, t) => /* @__PURE__ */ (0, h.jsx)("img", {
+			src: e.url || "",
+			alt: e.name || `Image ${t + 1}`,
+			className: "size-20 rounded-md object-cover border border-gray-200"
+		}, t))
+	}) : /* @__PURE__ */ (0, h.jsx)(p, {});
+	let O = e ? Array.isArray(e) ? e : [e] : [], k = async (e) => {
+		let n = Array.from(e.target.files || []);
+		if (n.length !== 0) {
+			D(!0);
+			try {
+				let e = await Promise.all(n.map(async (e) => {
+					let t = await T(e);
+					return {
+						name: t.name,
+						original_name: e.name,
+						size: t.size,
+						mime_type: t.mimeType,
+						url: t.url
+					};
+				}));
+				t(b ? [...O, ...e] : e[0]);
+			} finally {
+				D(!1), v.current && (v.current.value = "");
+			}
+		}
+	}, A = (e) => {
+		if (b) {
+			let n = O.filter((t, n) => n !== e);
+			t(n.length > 0 ? n : null);
+		} else t(null);
+	}, j = l(async (e, n) => {
+		if (C) {
+			D(!0);
+			try {
+				let r = await T(e), i = {
+					name: r.name || n,
+					original_name: n,
+					size: r.size,
+					mime_type: r.mimeType,
+					url: r.url
+				};
+				if (b) {
+					let e = [...O];
+					e[C.index] = i, t(e);
+				} else t(i);
+			} finally {
+				D(!1), w(null);
+			}
+		}
+	}, [
+		C,
+		O,
+		b,
+		t,
+		T
+	]), M = l((e) => {
+		let t = O[e];
+		t?.url && w({
+			index: e,
+			src: t.url,
+			name: t.name || `image-${e}.png`
+		});
+	}, [O]);
+	return /* @__PURE__ */ (0, h.jsxs)("div", {
+		className: _.className,
+		children: [
+			/* @__PURE__ */ (0, h.jsx)("input", {
+				ref: v,
+				type: "file",
+				multiple: b,
+				accept: x,
+				onChange: k,
+				className: "hidden"
+			}),
+			/* @__PURE__ */ (0, h.jsxs)("div", {
+				className: "space-y-2",
+				children: [O.length > 0 && /* @__PURE__ */ (0, h.jsx)("div", {
+					className: "grid grid-cols-4 gap-2",
+					children: O.map((e, t) => /* @__PURE__ */ (0, h.jsxs)("div", {
+						className: "relative group",
+						children: [/* @__PURE__ */ (0, h.jsx)("img", {
+							src: e.url || "",
+							alt: e.name || `Image ${t + 1}`,
+							className: "size-20 rounded-md object-cover border border-gray-200"
+						}), /* @__PURE__ */ (0, h.jsxs)("div", {
+							className: "absolute top-1 right-1 flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity",
+							children: [S && /* @__PURE__ */ (0, h.jsx)(f, {
+								type: "button",
+								variant: "secondary",
+								size: "sm",
+								onClick: () => M(t),
+								className: "h-6 w-6 p-0",
+								"aria-label": `Crop image ${t + 1}`,
+								"data-testid": `image-field-crop-${t}`,
+								children: /* @__PURE__ */ (0, h.jsx)(n, { className: "size-3" })
+							}), /* @__PURE__ */ (0, h.jsx)(f, {
+								type: "button",
+								variant: "destructive",
+								size: "sm",
+								onClick: () => A(t),
+								className: "h-6 w-6 p-0",
+								children: /* @__PURE__ */ (0, h.jsx)(o, { className: "size-3" })
+							})]
+						})]
+					}, t))
+				}), /* @__PURE__ */ (0, h.jsxs)(f, {
+					type: "button",
+					variant: "outline",
+					onClick: () => v.current?.click(),
+					className: "w-full",
+					disabled: E,
+					"data-testid": "image-field-upload-button",
+					children: [E ? /* @__PURE__ */ (0, h.jsx)(a, { className: "size-4 mr-2 animate-spin" }) : /* @__PURE__ */ (0, h.jsx)(r, { className: "size-4 mr-2" }), E ? "Uploading…" : O.length > 0 ? "Add More Images" : "Upload Image"]
+				})]
+			}),
+			S && C && /* @__PURE__ */ (0, h.jsx)(s, {
+				fallback: null,
+				children: /* @__PURE__ */ (0, h.jsx)(g, {
+					open: !0,
+					onOpenChange: (e) => !e && w(null),
+					src: C.src,
+					outputName: C.name,
+					onConfirm: j
+				})
+			})
+		]
+	});
+}
+//#endregion
+export { m as n, _ as t };