@astra-kit/ui 0.0.0-stage → 1.0.0

package/dist/components/file-upload.js

@@ -0,0 +1,776 @@
+"use client";
+import { c as _c } from "react/compiler-runtime";
+/**
+* File upload building blocks: a drop zone that validates picked or dropped files, and a list of
+* files with upload progress, failure and retry. Uploading itself stays with the application.
+*/
+import { useId, useRef, useState } from "react";
+import { AnimatePresence } from "motion/react";
+import { CheckCircle2Icon, FileIcon, Trash2Icon, UploadCloudIcon, XCircleIcon } from "lucide-react";
+import { cn } from "../lib/utils.js";
+import { classifyFiles } from "../lib/file-acceptance.js";
+import { formatFileSize } from "../lib/format-file-size.js";
+import { AnimatedListItem } from "./animated-list-item.js";
+import { ControlButton } from "./control-button.js";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const COMPLETE_PROGRESS = 100;
+const FILE_UPLOAD_DROP_ZONE_DEFAULT_LABELS = {
+	uploadAction: "Elegí un archivo",
+	uploadActionMobileSuffix: "",
+	dragAndDrop: "o arrastralo acá",
+	input: "Subir archivos"
+};
+/**
+* Renders the drop zone. The action button and a click anywhere on the zone open the native file
+* picker; the same file can be picked again after a failure.
+* @param props - Constraints, callbacks and optional copy.
+* @returns The drop zone.
+*/
+export function FileUploadDropZone(t0) {
+	const $ = _c(66);
+	const { hint, isDisabled: t1, accept, allowsMultiple: t2, maxSize, onDropFiles, onDropUnacceptedFiles, onSizeLimitExceed, inputId, labels, className } = t0;
+	const isDisabled = t1 === undefined ? false : t1;
+	const allowsMultiple = t2 === undefined ? true : t2;
+	let t3;
+	if ($[0] !== labels) {
+		t3 = {
+			...FILE_UPLOAD_DROP_ZONE_DEFAULT_LABELS,
+			...labels
+		};
+		$[0] = labels;
+		$[1] = t3;
+	} else {
+		t3 = $[1];
+	}
+	const resolvedLabels = t3;
+	const generatedInputId = useId();
+	const hintId = useId();
+	const resolvedInputId = inputId ?? generatedInputId;
+	const inputRef = useRef(null);
+	const [isInvalid, setIsInvalid] = useState(false);
+	const [isDraggingOver, setIsDraggingOver] = useState(false);
+	let t4;
+	if ($[2] !== accept || $[3] !== allowsMultiple || $[4] !== maxSize || $[5] !== onDropFiles || $[6] !== onDropUnacceptedFiles || $[7] !== onSizeLimitExceed) {
+		t4 = (files) => {
+			const { accepted, unaccepted, oversized } = classifyFiles(files, {
+				accept,
+				maxSize,
+				allowsMultiple
+			});
+			setIsInvalid(unaccepted.length > 0 || oversized.length > 0);
+			if (oversized.length > 0) {
+				onSizeLimitExceed?.(oversized);
+			}
+			if (accepted.length > 0) {
+				onDropFiles?.(accepted);
+			}
+			if (unaccepted.length > 0) {
+				onDropUnacceptedFiles?.(unaccepted);
+			}
+			if (inputRef.current) {
+				inputRef.current.value = "";
+			}
+		};
+		$[2] = accept;
+		$[3] = allowsMultiple;
+		$[4] = maxSize;
+		$[5] = onDropFiles;
+		$[6] = onDropUnacceptedFiles;
+		$[7] = onSizeLimitExceed;
+		$[8] = t4;
+	} else {
+		t4 = $[8];
+	}
+	const processFiles = t4;
+	let t5;
+	if ($[9] !== isDisabled) {
+		t5 = (event) => {
+			event.preventDefault();
+			if (!isDisabled) {
+				setIsDraggingOver(true);
+			}
+		};
+		$[9] = isDisabled;
+		$[10] = t5;
+	} else {
+		t5 = $[10];
+	}
+	const handleDragOver = t5;
+	let t6;
+	if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = (event_0) => {
+			event_0.preventDefault();
+			setIsDraggingOver(false);
+		};
+		$[11] = t6;
+	} else {
+		t6 = $[11];
+	}
+	const handleDragLeave = t6;
+	let t7;
+	if ($[12] !== isDisabled || $[13] !== processFiles) {
+		t7 = (event_1) => {
+			event_1.preventDefault();
+			setIsDraggingOver(false);
+			if (!isDisabled) {
+				processFiles(Array.from(event_1.dataTransfer.files));
+			}
+		};
+		$[12] = isDisabled;
+		$[13] = processFiles;
+		$[14] = t7;
+	} else {
+		t7 = $[14];
+	}
+	const handleDrop = t7;
+	let t8;
+	if ($[15] !== isDisabled) {
+		t8 = () => {
+			if (!isDisabled) {
+				inputRef.current?.click();
+			}
+		};
+		$[15] = isDisabled;
+		$[16] = t8;
+	} else {
+		t8 = $[16];
+	}
+	const openFilePicker = t8;
+	const t9 = isDraggingOver || undefined;
+	const t10 = isDisabled || undefined;
+	const t11 = isInvalid || undefined;
+	let t12;
+	if ($[17] !== className) {
+		t12 = cn("relative flex cursor-pointer flex-col items-center gap-3 rounded-xl bg-background px-6 py-4 text-muted-foreground ring-1 ring-border transition-[box-shadow,background-color] ring-inset data-dragging:ring-2 data-dragging:ring-primary data-disabled:cursor-not-allowed data-disabled:bg-muted", className);
+		$[17] = className;
+		$[18] = t12;
+	} else {
+		t12 = $[18];
+	}
+	const t13 = isDisabled && "opacity-50";
+	let t14;
+	if ($[19] !== t13) {
+		t14 = cn("inline-flex size-10 items-center justify-center rounded-lg border border-border bg-background shadow-xs", t13);
+		$[19] = t13;
+		$[20] = t14;
+	} else {
+		t14 = $[20];
+	}
+	let t15;
+	if ($[21] === Symbol.for("react.memo_cache_sentinel")) {
+		t15 = /* @__PURE__ */ _jsx(UploadCloudIcon, {
+			"aria-hidden": true,
+			className: "size-5 text-foreground"
+		});
+		$[21] = t15;
+	} else {
+		t15 = $[21];
+	}
+	let t16;
+	if ($[22] !== t14) {
+		t16 = /* @__PURE__ */ _jsx("span", {
+			className: t14,
+			children: t15
+		});
+		$[22] = t14;
+		$[23] = t16;
+	} else {
+		t16 = $[23];
+	}
+	const t17 = hint ? hintId : undefined;
+	let t18;
+	if ($[24] !== processFiles) {
+		t18 = (event_2) => processFiles(Array.from(event_2.target.files ?? []));
+		$[24] = processFiles;
+		$[25] = t18;
+	} else {
+		t18 = $[25];
+	}
+	let t19;
+	if ($[26] !== accept || $[27] !== allowsMultiple || $[28] !== isDisabled || $[29] !== resolvedInputId || $[30] !== resolvedLabels.input || $[31] !== t17 || $[32] !== t18) {
+		t19 = /* @__PURE__ */ _jsx("input", {
+			ref: inputRef,
+			id: resolvedInputId,
+			type: "file",
+			className: "sr-only",
+			disabled: isDisabled,
+			"aria-label": resolvedLabels.input,
+			"aria-describedby": t17,
+			accept,
+			multiple: allowsMultiple,
+			onChange: t18,
+			onClick: _temp
+		});
+		$[26] = accept;
+		$[27] = allowsMultiple;
+		$[28] = isDisabled;
+		$[29] = resolvedInputId;
+		$[30] = resolvedLabels.input;
+		$[31] = t17;
+		$[32] = t18;
+		$[33] = t19;
+	} else {
+		t19 = $[33];
+	}
+	let t20;
+	if ($[34] !== openFilePicker) {
+		t20 = (event_4) => {
+			event_4.stopPropagation();
+			openFilePicker();
+		};
+		$[34] = openFilePicker;
+		$[35] = t20;
+	} else {
+		t20 = $[35];
+	}
+	let t21;
+	if ($[36] !== resolvedLabels.uploadActionMobileSuffix) {
+		t21 = resolvedLabels.uploadActionMobileSuffix ? /* @__PURE__ */ _jsxs(_Fragment, { children: [" ", /* @__PURE__ */ _jsx("span", {
+			className: "md:hidden",
+			children: resolvedLabels.uploadActionMobileSuffix
+		})] }) : null;
+		$[36] = resolvedLabels.uploadActionMobileSuffix;
+		$[37] = t21;
+	} else {
+		t21 = $[37];
+	}
+	let t22;
+	if ($[38] !== isDisabled || $[39] !== resolvedLabels.uploadAction || $[40] !== t20 || $[41] !== t21) {
+		t22 = /* @__PURE__ */ _jsxs(ControlButton, {
+			className: "h-auto p-0 font-medium",
+			disabled: isDisabled,
+			type: "button",
+			variant: "link",
+			onClick: t20,
+			children: [resolvedLabels.uploadAction, t21]
+		});
+		$[38] = isDisabled;
+		$[39] = resolvedLabels.uploadAction;
+		$[40] = t20;
+		$[41] = t21;
+		$[42] = t22;
+	} else {
+		t22 = $[42];
+	}
+	let t23;
+	if ($[43] !== resolvedLabels.dragAndDrop) {
+		t23 = /* @__PURE__ */ _jsx("span", {
+			className: "text-sm max-md:hidden",
+			children: resolvedLabels.dragAndDrop
+		});
+		$[43] = resolvedLabels.dragAndDrop;
+		$[44] = t23;
+	} else {
+		t23 = $[44];
+	}
+	let t24;
+	if ($[45] !== t19 || $[46] !== t22 || $[47] !== t23) {
+		t24 = /* @__PURE__ */ _jsxs("div", {
+			className: "flex flex-wrap items-center justify-center gap-1",
+			children: [
+				t19,
+				t22,
+				t23
+			]
+		});
+		$[45] = t19;
+		$[46] = t22;
+		$[47] = t23;
+		$[48] = t24;
+	} else {
+		t24 = $[48];
+	}
+	let t25;
+	if ($[49] !== hint || $[50] !== hintId || $[51] !== isInvalid) {
+		t25 = hint ? /* @__PURE__ */ _jsx("p", {
+			id: hintId,
+			className: cn("m-0 text-xs transition-colors", isInvalid && "text-destructive"),
+			children: hint
+		}) : null;
+		$[49] = hint;
+		$[50] = hintId;
+		$[51] = isInvalid;
+		$[52] = t25;
+	} else {
+		t25 = $[52];
+	}
+	let t26;
+	if ($[53] !== t24 || $[54] !== t25) {
+		t26 = /* @__PURE__ */ _jsxs("div", {
+			className: "flex flex-col gap-1 text-center",
+			children: [t24, t25]
+		});
+		$[53] = t24;
+		$[54] = t25;
+		$[55] = t26;
+	} else {
+		t26 = $[55];
+	}
+	let t27;
+	if ($[56] !== handleDragOver || $[57] !== handleDrop || $[58] !== openFilePicker || $[59] !== t10 || $[60] !== t11 || $[61] !== t12 || $[62] !== t16 || $[63] !== t26 || $[64] !== t9) {
+		t27 = /* @__PURE__ */ _jsxs("div", {
+			"data-slot": "file-upload-drop-zone",
+			"data-dragging": t9,
+			"data-disabled": t10,
+			"data-invalid": t11,
+			className: t12,
+			onClick: openFilePicker,
+			onDragEnter: handleDragOver,
+			onDragOver: handleDragOver,
+			onDragLeave: handleDragLeave,
+			onDragEnd: handleDragLeave,
+			onDrop: handleDrop,
+			children: [t16, t26]
+		});
+		$[56] = handleDragOver;
+		$[57] = handleDrop;
+		$[58] = openFilePicker;
+		$[59] = t10;
+		$[60] = t11;
+		$[61] = t12;
+		$[62] = t16;
+		$[63] = t26;
+		$[64] = t9;
+		$[65] = t27;
+	} else {
+		t27 = $[65];
+	}
+	return t27;
+}
+function _temp(event_3) {
+	return event_3.stopPropagation();
+}
+const FILE_UPLOAD_ITEM_DEFAULT_LABELS = {
+	complete: "Completado",
+	uploading: "Subiendo...",
+	failed: "Falló",
+	retry: "Reintentar",
+	delete: "Eliminar",
+	progress: "Progreso de subida"
+};
+/**
+* Renders one file with its size, status, progress (a bar or a background fill), delete action
+* and, after a failure, a retry action. Place it inside `FileUploadList` so additions and removals animate.
+* @param props - File metadata, progress, callbacks and optional copy.
+* @returns The list item.
+*/
+export function FileUploadItem(t0) {
+	const $ = _c(70);
+	const { name, size, progress, failed: t1, onDelete, isDeleteDisabled, onRetry, locale, labels, icon, progressVariant: t2, className } = t0;
+	const failed = t1 === undefined ? false : t1;
+	const progressVariant = t2 === undefined ? "bar" : t2;
+	let t3;
+	if ($[0] !== labels) {
+		t3 = {
+			...FILE_UPLOAD_ITEM_DEFAULT_LABELS,
+			...labels
+		};
+		$[0] = labels;
+		$[1] = t3;
+	} else {
+		t3 = $[1];
+	}
+	const resolvedLabels = t3;
+	const clampedProgress = Math.min(Math.max(progress, 0), COMPLETE_PROGRESS);
+	const isComplete = clampedProgress === COMPLETE_PROGRESS && !failed;
+	const isFillVariant = progressVariant === "fill";
+	let t4;
+	if ($[2] !== clampedProgress || $[3] !== resolvedLabels.progress) {
+		t4 = {
+			"aria-label": resolvedLabels.progress,
+			"aria-valuemax": COMPLETE_PROGRESS,
+			"aria-valuemin": 0,
+			"aria-valuenow": clampedProgress,
+			role: "progressbar"
+		};
+		$[2] = clampedProgress;
+		$[3] = resolvedLabels.progress;
+		$[4] = t4;
+	} else {
+		t4 = $[4];
+	}
+	const progressBarProps = t4;
+	const t5 = failed || undefined;
+	let t6;
+	if ($[5] !== className) {
+		t6 = cn("group/file-item relative flex w-full min-w-0 gap-3 overflow-hidden rounded-xl bg-background p-4", className);
+		$[5] = className;
+		$[6] = t6;
+	} else {
+		t6 = $[6];
+	}
+	let t7;
+	if ($[7] !== clampedProgress || $[8] !== failed || $[9] !== isComplete || $[10] !== isFillVariant || $[11] !== progressBarProps) {
+		t7 = isFillVariant && !failed ? /* @__PURE__ */ _jsx("div", {
+			...progressBarProps,
+			className: cn("absolute inset-0 bg-muted transition-[translate,opacity] duration-150", isComplete && "opacity-0"),
+			style: { translate: `${clampedProgress - COMPLETE_PROGRESS}% 0` }
+		}) : null;
+		$[7] = clampedProgress;
+		$[8] = failed;
+		$[9] = isComplete;
+		$[10] = isFillVariant;
+		$[11] = progressBarProps;
+		$[12] = t7;
+	} else {
+		t7 = $[12];
+	}
+	let t8;
+	if ($[13] === Symbol.for("react.memo_cache_sentinel")) {
+		t8 = /* @__PURE__ */ _jsx("span", {
+			"data-slot": "file-upload-item-outline",
+			"aria-hidden": true,
+			className: "pointer-events-none absolute inset-0 z-[1] rounded-[inherit] ring-1 ring-border ring-inset group-data-failed/file-item:ring-2 group-data-failed/file-item:ring-destructive"
+		});
+		$[13] = t8;
+	} else {
+		t8 = $[13];
+	}
+	let t9;
+	if ($[14] !== icon) {
+		t9 = icon ?? /* @__PURE__ */ _jsx(FileIcon, {
+			"aria-hidden": true,
+			className: "size-10 shrink-0 stroke-[1.25] text-muted-foreground"
+		});
+		$[14] = icon;
+		$[15] = t9;
+	} else {
+		t9 = $[15];
+	}
+	let t10;
+	if ($[16] !== t9) {
+		t10 = /* @__PURE__ */ _jsx("span", {
+			className: "relative flex shrink-0",
+			children: t9
+		});
+		$[16] = t9;
+		$[17] = t10;
+	} else {
+		t10 = $[17];
+	}
+	let t11;
+	if ($[18] !== name) {
+		t11 = /* @__PURE__ */ _jsx("p", {
+			className: "m-0 max-w-full text-sm font-medium break-words text-foreground",
+			children: name
+		});
+		$[18] = name;
+		$[19] = t11;
+	} else {
+		t11 = $[19];
+	}
+	let t12;
+	if ($[20] !== locale || $[21] !== size) {
+		t12 = formatFileSize(size, { locale });
+		$[20] = locale;
+		$[21] = size;
+		$[22] = t12;
+	} else {
+		t12 = $[22];
+	}
+	let t13;
+	if ($[23] !== t12) {
+		t13 = /* @__PURE__ */ _jsx("span", {
+			className: "truncate whitespace-nowrap text-muted-foreground",
+			children: t12
+		});
+		$[23] = t12;
+		$[24] = t13;
+	} else {
+		t13 = $[24];
+	}
+	let t14;
+	if ($[25] === Symbol.for("react.memo_cache_sentinel")) {
+		t14 = /* @__PURE__ */ _jsx("span", {
+			"aria-hidden": true,
+			className: "h-3 w-px rounded-full bg-border"
+		});
+		$[25] = t14;
+	} else {
+		t14 = $[25];
+	}
+	let t15;
+	if ($[26] !== failed || $[27] !== isComplete || $[28] !== resolvedLabels.complete || $[29] !== resolvedLabels.failed || $[30] !== resolvedLabels.uploading) {
+		t15 = failed ? /* @__PURE__ */ _jsxs(_Fragment, { children: [/* @__PURE__ */ _jsx(XCircleIcon, {
+			"aria-hidden": true,
+			className: "size-4 text-destructive"
+		}), /* @__PURE__ */ _jsx("span", {
+			className: "text-destructive",
+			children: resolvedLabels.failed
+		})] }) : isComplete ? /* @__PURE__ */ _jsxs(_Fragment, { children: [/* @__PURE__ */ _jsx(CheckCircle2Icon, {
+			"aria-hidden": true,
+			className: "size-4 text-green-600 dark:text-green-500"
+		}), /* @__PURE__ */ _jsx("span", {
+			className: "text-green-700 dark:text-green-400",
+			children: resolvedLabels.complete
+		})] }) : /* @__PURE__ */ _jsxs(_Fragment, { children: [/* @__PURE__ */ _jsx(UploadCloudIcon, {
+			"aria-hidden": true,
+			className: "size-4 text-muted-foreground"
+		}), /* @__PURE__ */ _jsx("span", {
+			className: "text-muted-foreground",
+			children: resolvedLabels.uploading
+		})] });
+		$[26] = failed;
+		$[27] = isComplete;
+		$[28] = resolvedLabels.complete;
+		$[29] = resolvedLabels.failed;
+		$[30] = resolvedLabels.uploading;
+		$[31] = t15;
+	} else {
+		t15 = $[31];
+	}
+	let t16;
+	if ($[32] !== clampedProgress || $[33] !== failed || $[34] !== isFillVariant) {
+		t16 = isFillVariant && !failed ? /* @__PURE__ */ _jsxs("span", {
+			className: "font-normal text-muted-foreground tabular-nums",
+			children: [clampedProgress, "%"]
+		}) : null;
+		$[32] = clampedProgress;
+		$[33] = failed;
+		$[34] = isFillVariant;
+		$[35] = t16;
+	} else {
+		t16 = $[35];
+	}
+	let t17;
+	if ($[36] !== t15 || $[37] !== t16) {
+		t17 = /* @__PURE__ */ _jsxs("span", {
+			className: "flex items-center gap-1 font-medium",
+			role: "status",
+			children: [t15, t16]
+		});
+		$[36] = t15;
+		$[37] = t16;
+		$[38] = t17;
+	} else {
+		t17 = $[38];
+	}
+	let t18;
+	if ($[39] !== t13 || $[40] !== t17) {
+		t18 = /* @__PURE__ */ _jsxs("div", {
+			className: "mt-0.5 flex items-center gap-2 text-sm",
+			children: [
+				t13,
+				t14,
+				t17
+			]
+		});
+		$[39] = t13;
+		$[40] = t17;
+		$[41] = t18;
+	} else {
+		t18 = $[41];
+	}
+	let t19;
+	if ($[42] !== t11 || $[43] !== t18) {
+		t19 = /* @__PURE__ */ _jsxs("div", {
+			className: "min-w-0 flex-1",
+			children: [t11, t18]
+		});
+		$[42] = t11;
+		$[43] = t18;
+		$[44] = t19;
+	} else {
+		t19 = $[44];
+	}
+	let t20;
+	if ($[45] !== isDeleteDisabled || $[46] !== name || $[47] !== onDelete || $[48] !== resolvedLabels.delete) {
+		t20 = onDelete ? /* @__PURE__ */ _jsx(ControlButton, {
+			"aria-label": `${resolvedLabels.delete} ${name}`,
+			className: "-mt-2 -mr-2 self-start text-muted-foreground",
+			disabled: isDeleteDisabled,
+			size: "icon-sm",
+			type: "button",
+			variant: "ghost",
+			onClick: onDelete,
+			children: /* @__PURE__ */ _jsx(Trash2Icon, { "aria-hidden": true })
+		}) : null;
+		$[45] = isDeleteDisabled;
+		$[46] = name;
+		$[47] = onDelete;
+		$[48] = resolvedLabels.delete;
+		$[49] = t20;
+	} else {
+		t20 = $[49];
+	}
+	let t21;
+	if ($[50] !== t19 || $[51] !== t20) {
+		t21 = /* @__PURE__ */ _jsxs("div", {
+			className: "flex w-full min-w-0 flex-1",
+			children: [t19, t20]
+		});
+		$[50] = t19;
+		$[51] = t20;
+		$[52] = t21;
+	} else {
+		t21 = $[52];
+	}
+	let t22;
+	if ($[53] !== clampedProgress || $[54] !== failed || $[55] !== isFillVariant || $[56] !== onRetry || $[57] !== progressBarProps || $[58] !== resolvedLabels.retry) {
+		t22 = failed ? onRetry ? /* @__PURE__ */ _jsx(ControlButton, {
+			className: "mt-1.5 h-auto p-0 text-destructive",
+			size: "sm",
+			type: "button",
+			variant: "link",
+			onClick: onRetry,
+			children: resolvedLabels.retry
+		}) : null : isFillVariant ? null : /* @__PURE__ */ _jsxs("div", {
+			className: "mt-1 flex w-full items-center gap-3",
+			children: [/* @__PURE__ */ _jsx("div", {
+				...progressBarProps,
+				className: "h-2 flex-1 overflow-hidden rounded-full bg-muted",
+				children: /* @__PURE__ */ _jsx("div", {
+					className: "h-full rounded-full bg-primary transition-[width] duration-150",
+					style: { width: `${clampedProgress}%` }
+				})
+			}), /* @__PURE__ */ _jsxs("span", {
+				className: "text-sm font-medium text-foreground tabular-nums",
+				children: [clampedProgress, "%"]
+			})]
+		});
+		$[53] = clampedProgress;
+		$[54] = failed;
+		$[55] = isFillVariant;
+		$[56] = onRetry;
+		$[57] = progressBarProps;
+		$[58] = resolvedLabels.retry;
+		$[59] = t22;
+	} else {
+		t22 = $[59];
+	}
+	let t23;
+	if ($[60] !== t21 || $[61] !== t22) {
+		t23 = /* @__PURE__ */ _jsxs("div", {
+			className: "relative flex min-w-0 flex-1 flex-col items-start",
+			children: [t21, t22]
+		});
+		$[60] = t21;
+		$[61] = t22;
+		$[62] = t23;
+	} else {
+		t23 = $[62];
+	}
+	let t24;
+	if ($[63] !== progressVariant || $[64] !== t10 || $[65] !== t23 || $[66] !== t5 || $[67] !== t6 || $[68] !== t7) {
+		t24 = /* @__PURE__ */ _jsxs(AnimatedListItem, {
+			"data-slot": "file-upload-item",
+			"data-failed": t5,
+			"data-progress-variant": progressVariant,
+			className: t6,
+			children: [
+				t7,
+				t8,
+				t10,
+				t23
+			]
+		});
+		$[63] = progressVariant;
+		$[64] = t10;
+		$[65] = t23;
+		$[66] = t5;
+		$[67] = t6;
+		$[68] = t7;
+		$[69] = t24;
+	} else {
+		t24 = $[69];
+	}
+	return t24;
+}
+/**
+* Lays out a drop zone and its file list.
+* @param props - Native `div` attributes.
+* @returns The container.
+*/
+export function FileUpload(t0) {
+	const $ = _c(8);
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+	} else {
+		className = $[1];
+		props = $[2];
+	}
+	let t1;
+	if ($[3] !== className) {
+		t1 = cn("flex w-full min-w-0 flex-col gap-4", className);
+		$[3] = className;
+		$[4] = t1;
+	} else {
+		t1 = $[4];
+	}
+	let t2;
+	if ($[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ _jsx("div", {
+			"data-slot": "file-upload",
+			className: t1,
+			...props
+		});
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else {
+		t2 = $[7];
+	}
+	return t2;
+}
+/**
+* Lists `FileUploadItem`s; only files added after the first render animate in.
+* @param props - Native `ul` attributes and the items.
+* @returns The list.
+*/
+export function FileUploadList(t0) {
+	const $ = _c(12);
+	let children;
+	let className;
+	let props;
+	if ($[0] !== t0) {
+		({className, children, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = className;
+		$[3] = props;
+	} else {
+		children = $[1];
+		className = $[2];
+		props = $[3];
+	}
+	let t1;
+	if ($[4] !== className) {
+		t1 = cn("m-0 flex w-full min-w-0 list-none flex-col gap-3 p-0", className);
+		$[4] = className;
+		$[5] = t1;
+	} else {
+		t1 = $[5];
+	}
+	let t2;
+	if ($[6] !== children) {
+		t2 = /* @__PURE__ */ _jsx(AnimatePresence, {
+			initial: false,
+			children
+		});
+		$[6] = children;
+		$[7] = t2;
+	} else {
+		t2 = $[7];
+	}
+	let t3;
+	if ($[8] !== props || $[9] !== t1 || $[10] !== t2) {
+		t3 = /* @__PURE__ */ _jsx("ul", {
+			"data-slot": "file-upload-list",
+			className: t1,
+			...props,
+			children: t2
+		});
+		$[8] = props;
+		$[9] = t1;
+		$[10] = t2;
+		$[11] = t3;
+	} else {
+		t3 = $[11];
+	}
+	return t3;
+}