@questpie/admin 1.1.1 → 3.0.0

package/dist/client/components/primitives/asset-preview.mjs

@@ -0,0 +1,771 @@
+import { cn } from "../../lib/utils.mjs";
+import { Button } from "../ui/button.mjs";
+import { Skeleton } from "../ui/skeleton.mjs";
+import { c } from "react/compiler-runtime";
+import { Icon } from "@iconify/react";
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/client/components/primitives/asset-preview.tsx
+/**
+* AssetPreview Primitive
+*
+* Displays an uploaded asset with thumbnail/icon, metadata, and actions.
+* Supports images, videos, PDFs, and other file types.
+*
+* @example
+* ```tsx
+* <AssetPreview
+*   asset={asset}
+*   onRemove={() => handleRemove(asset.id)}
+*   onEdit={() => openEditDialog(asset)}
+* />
+* ```
+*/
+/**
+* Get icon name based on MIME type
+*/
+function getFileIconName(mimeType) {
+	if (!mimeType) return "ph:file";
+	const type = mimeType.toLowerCase();
+	if (type.startsWith("image/")) return "ph:file-image";
+	if (type.startsWith("video/")) return "ph:file-video";
+	if (type.startsWith("audio/")) return "ph:file-audio";
+	if (type === "application/pdf") return "ph:file-pdf";
+	if (type.includes("zip") || type.includes("compressed") || type.includes("archive")) return "ph:file-zip";
+	if (type.includes("csv") || type.includes("spreadsheet")) return "ph:file-csv";
+	if (type.includes("word") || type.includes("document") || type === "application/rtf") return "ph:file-doc";
+	if (type.includes("json") || type.includes("javascript") || type.includes("typescript") || type.includes("xml") || type.includes("html")) return "ph:file-code";
+	return "ph:file";
+}
+/**
+* Check if MIME type is an image
+*/
+function isImage(mimeType) {
+	return !!mimeType?.toLowerCase().startsWith("image/");
+}
+/**
+* Format file size for display
+*/
+function formatFileSize(bytes) {
+	if (!bytes) return "";
+	if (bytes < 1024) return `${bytes} B`;
+	if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+	return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+/**
+* Get file extension from filename or MIME type
+*/
+function getExtension(filename, mimeType) {
+	if (filename) {
+		const parts = filename.split(".");
+		if (parts.length > 1) return parts[parts.length - 1].toUpperCase();
+	}
+	if (mimeType) {
+		const parts = mimeType.split("/");
+		return parts[parts.length - 1].toUpperCase();
+	}
+	return "";
+}
+function AssetPreview(t0) {
+	const $ = c(154);
+	const { asset, pendingFile, onRemove, onEdit, loading: t1, progress, disabled: t2, showDragHandle: t3, dragHandleProps, variant: t4, href, onClick, className } = t0;
+	const loading = t1 === void 0 ? false : t1;
+	const disabled = t2 === void 0 ? false : t2;
+	const showDragHandle = t3 === void 0 ? false : t3;
+	const variant = t4 === void 0 ? "card" : t4;
+	const [imageError, setImageError] = React.useState(false);
+	const hasAssetData = !!(asset.filename || asset.url || pendingFile);
+	const isLoadingAsset = loading && !hasAssetData;
+	const filename = asset.filename || pendingFile?.name || "Unknown file";
+	const mimeType = asset.mimeType || pendingFile?.type;
+	const size = asset.size || pendingFile?.size;
+	const isImageType = isImage(mimeType);
+	let t5;
+	if ($[0] !== mimeType) {
+		t5 = getFileIconName(mimeType);
+		$[0] = mimeType;
+		$[1] = t5;
+	} else t5 = $[1];
+	const fileIconName = t5;
+	let t6;
+	if ($[2] !== filename || $[3] !== mimeType) {
+		t6 = getExtension(filename, mimeType);
+		$[2] = filename;
+		$[3] = mimeType;
+		$[4] = t6;
+	} else t6 = $[4];
+	const extension = t6;
+	let t7;
+	bb0: {
+		if (pendingFile && isImageType) {
+			let t8$1;
+			if ($[5] !== pendingFile) {
+				t8$1 = URL.createObjectURL(pendingFile);
+				$[5] = pendingFile;
+				$[6] = t8$1;
+			} else t8$1 = $[6];
+			t7 = t8$1;
+			break bb0;
+		}
+		if (asset.url && isImageType) {
+			t7 = asset.url;
+			break bb0;
+		}
+		t7 = null;
+	}
+	const thumbnailUrl = t7;
+	let t8;
+	let t9;
+	if ($[7] !== pendingFile || $[8] !== thumbnailUrl) {
+		t8 = () => () => {
+			if (pendingFile && thumbnailUrl) URL.revokeObjectURL(thumbnailUrl);
+		};
+		t9 = [pendingFile, thumbnailUrl];
+		$[7] = pendingFile;
+		$[8] = thumbnailUrl;
+		$[9] = t8;
+		$[10] = t9;
+	} else {
+		t8 = $[9];
+		t9 = $[10];
+	}
+	React.useEffect(t8, t9);
+	if (variant === "thumbnail") {
+		if (isLoadingAsset) {
+			let t10$2;
+			if ($[11] !== className) {
+				t10$2 = cn("aspect-square w-full", className);
+				$[11] = className;
+				$[12] = t10$2;
+			} else t10$2 = $[12];
+			let t11$2;
+			if ($[13] !== t10$2) {
+				t11$2 = /* @__PURE__ */ jsx(Skeleton, { className: t10$2 });
+				$[13] = t10$2;
+				$[14] = t11$2;
+			} else t11$2 = $[14];
+			return t11$2;
+		}
+		const isInteractive = onClick && !disabled && asset.id;
+		let t10$1;
+		if ($[15] !== asset.id || $[16] !== isInteractive || $[17] !== onClick) {
+			t10$1 = isInteractive ? {
+				role: "button",
+				tabIndex: 0,
+				onClick: () => onClick(asset.id),
+				onKeyDown: (e) => {
+					if (e.key === "Enter" || e.key === " ") {
+						e.preventDefault();
+						onClick(asset.id);
+					}
+				}
+			} : {};
+			$[15] = asset.id;
+			$[16] = isInteractive;
+			$[17] = onClick;
+			$[18] = t10$1;
+		} else t10$1 = $[18];
+		const interactiveProps = t10$1;
+		const t11$1 = disabled && "opacity-60";
+		const t12$1 = onClick && !disabled && "hover:border-border cursor-pointer";
+		let t13$1;
+		if ($[19] !== className || $[20] !== t11$1 || $[21] !== t12$1) {
+			t13$1 = cn("group relative aspect-square overflow-hidden border", "bg-muted border-border", t11$1, t12$1, className);
+			$[19] = className;
+			$[20] = t11$1;
+			$[21] = t12$1;
+			$[22] = t13$1;
+		} else t13$1 = $[22];
+		let t14$1;
+		if ($[23] !== asset.alt || $[24] !== fileIconName || $[25] !== filename || $[26] !== imageError || $[27] !== thumbnailUrl) {
+			t14$1 = thumbnailUrl && !imageError ? /* @__PURE__ */ jsx("img", {
+				src: thumbnailUrl,
+				alt: asset.alt || filename,
+				className: "h-full w-full object-cover",
+				onError: () => setImageError(true)
+			}) : /* @__PURE__ */ jsx("div", {
+				className: "flex h-full w-full items-center justify-center",
+				children: /* @__PURE__ */ jsx(Icon, {
+					icon: fileIconName,
+					className: "text-muted-foreground size-8"
+				})
+			});
+			$[23] = asset.alt;
+			$[24] = fileIconName;
+			$[25] = filename;
+			$[26] = imageError;
+			$[27] = thumbnailUrl;
+			$[28] = t14$1;
+		} else t14$1 = $[28];
+		let t15$1;
+		if ($[29] !== loading || $[30] !== progress) {
+			t15$1 = loading && /* @__PURE__ */ jsx("div", {
+				className: "bg-background absolute inset-0 flex items-center justify-center",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: "relative",
+					children: [/* @__PURE__ */ jsx(Icon, {
+						icon: "ph:spinner-gap",
+						className: "text-muted-foreground size-6 animate-spin"
+					}), typeof progress === "number" && /* @__PURE__ */ jsxs("span", {
+						className: "text-muted-foreground absolute inset-0 flex items-center justify-center text-[10px] font-medium",
+						children: [progress, "%"]
+					})]
+				})
+			});
+			$[29] = loading;
+			$[30] = progress;
+			$[31] = t15$1;
+		} else t15$1 = $[31];
+		let t16$1;
+		if ($[32] !== disabled || $[33] !== href || $[34] !== loading || $[35] !== onEdit || $[36] !== onRemove) {
+			t16$1 = !loading && !disabled && (onRemove || onEdit || href) && /* @__PURE__ */ jsxs("div", {
+				className: "absolute inset-0 flex items-center justify-center gap-1 bg-black/50 opacity-0 transition-opacity group-hover:opacity-100",
+				children: [
+					href && /* @__PURE__ */ jsx(Button, {
+						type: "button",
+						variant: "secondary",
+						size: "icon-xs",
+						nativeButton: false,
+						render: /* @__PURE__ */ jsx("a", {
+							href,
+							onClick: _temp
+						}),
+						children: /* @__PURE__ */ jsx(Icon, { icon: "ph:arrow-square-out-bold" })
+					}),
+					onEdit && /* @__PURE__ */ jsx(Button, {
+						type: "button",
+						variant: "secondary",
+						size: "icon-xs",
+						onClick: (e_1) => {
+							e_1.stopPropagation();
+							onEdit();
+						},
+						children: /* @__PURE__ */ jsx(Icon, { icon: "ph:pencil-bold" })
+					}),
+					onRemove && /* @__PURE__ */ jsx(Button, {
+						type: "button",
+						variant: "destructive",
+						size: "icon-xs",
+						onClick: (e_2) => {
+							e_2.stopPropagation();
+							onRemove();
+						},
+						children: /* @__PURE__ */ jsx(Icon, { icon: "ph:trash-bold" })
+					})
+				]
+			});
+			$[32] = disabled;
+			$[33] = href;
+			$[34] = loading;
+			$[35] = onEdit;
+			$[36] = onRemove;
+			$[37] = t16$1;
+		} else t16$1 = $[37];
+		let t17$1;
+		if ($[38] !== interactiveProps || $[39] !== t13$1 || $[40] !== t14$1 || $[41] !== t15$1 || $[42] !== t16$1) {
+			t17$1 = /* @__PURE__ */ jsxs("div", {
+				className: t13$1,
+				...interactiveProps,
+				children: [
+					t14$1,
+					t15$1,
+					t16$1
+				]
+			});
+			$[38] = interactiveProps;
+			$[39] = t13$1;
+			$[40] = t14$1;
+			$[41] = t15$1;
+			$[42] = t16$1;
+			$[43] = t17$1;
+		} else t17$1 = $[43];
+		return t17$1;
+	}
+	if (variant === "compact") {
+		if (isLoadingAsset) {
+			let t10$2;
+			if ($[44] !== className) {
+				t10$2 = cn("flex items-center gap-2 border p-2", "bg-muted border-border", className);
+				$[44] = className;
+				$[45] = t10$2;
+			} else t10$2 = $[45];
+			let t11$2;
+			if ($[46] !== showDragHandle) {
+				t11$2 = showDragHandle && /* @__PURE__ */ jsx(Skeleton, { className: "-ml-1 size-4 rounded" });
+				$[46] = showDragHandle;
+				$[47] = t11$2;
+			} else t11$2 = $[47];
+			let t12$2;
+			if ($[48] === Symbol.for("react.memo_cache_sentinel")) {
+				t12$2 = /* @__PURE__ */ jsx(Skeleton, { className: "size-8 shrink-0 rounded" });
+				$[48] = t12$2;
+			} else t12$2 = $[48];
+			let t13$2;
+			if ($[49] === Symbol.for("react.memo_cache_sentinel")) {
+				t13$2 = /* @__PURE__ */ jsxs("div", {
+					className: "min-w-0 flex-1 space-y-1.5",
+					children: [/* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-32 rounded" }), /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-16 rounded" })]
+				});
+				$[49] = t13$2;
+			} else t13$2 = $[49];
+			let t14$2;
+			if ($[50] !== t10$2 || $[51] !== t11$2) {
+				t14$2 = /* @__PURE__ */ jsxs("div", {
+					className: t10$2,
+					children: [
+						t11$2,
+						t12$2,
+						t13$2
+					]
+				});
+				$[50] = t10$2;
+				$[51] = t11$2;
+				$[52] = t14$2;
+			} else t14$2 = $[52];
+			return t14$2;
+		}
+		const isCompactInteractive = onClick && !disabled && asset.id;
+		let t10$1;
+		if ($[53] !== asset.id || $[54] !== isCompactInteractive || $[55] !== onClick) {
+			t10$1 = isCompactInteractive ? {
+				role: "button",
+				tabIndex: 0,
+				onClick: () => onClick(asset.id),
+				onKeyDown: (e_3) => {
+					if (e_3.key === "Enter" || e_3.key === " ") {
+						e_3.preventDefault();
+						onClick(asset.id);
+					}
+				}
+			} : {};
+			$[53] = asset.id;
+			$[54] = isCompactInteractive;
+			$[55] = onClick;
+			$[56] = t10$1;
+		} else t10$1 = $[56];
+		const compactInteractiveProps = t10$1;
+		const t11$1 = disabled && "opacity-60";
+		const t12$1 = onClick && !disabled && "hover:border-border cursor-pointer";
+		let t13$1;
+		if ($[57] !== className || $[58] !== t11$1 || $[59] !== t12$1) {
+			t13$1 = cn("group flex items-center gap-2 border p-2", "bg-muted border-border", t11$1, t12$1, className);
+			$[57] = className;
+			$[58] = t11$1;
+			$[59] = t12$1;
+			$[60] = t13$1;
+		} else t13$1 = $[60];
+		let t14$1;
+		if ($[61] !== dragHandleProps || $[62] !== showDragHandle) {
+			t14$1 = showDragHandle && /* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: "text-muted-foreground hover:text-foreground -ml-1 cursor-grab touch-none active:cursor-grabbing",
+				...dragHandleProps,
+				children: /* @__PURE__ */ jsx(Icon, {
+					icon: "ph:dots-six-vertical-bold",
+					className: "size-4"
+				})
+			});
+			$[61] = dragHandleProps;
+			$[62] = showDragHandle;
+			$[63] = t14$1;
+		} else t14$1 = $[63];
+		let t15$1;
+		if ($[64] !== asset.alt || $[65] !== fileIconName || $[66] !== filename || $[67] !== imageError || $[68] !== thumbnailUrl) {
+			t15$1 = /* @__PURE__ */ jsx("div", {
+				className: "bg-muted flex size-8 shrink-0 items-center justify-center overflow-hidden rounded",
+				children: thumbnailUrl && !imageError ? /* @__PURE__ */ jsx("img", {
+					src: thumbnailUrl,
+					alt: asset.alt || filename,
+					className: "h-full w-full object-cover",
+					onError: () => setImageError(true)
+				}) : /* @__PURE__ */ jsx(Icon, {
+					icon: fileIconName,
+					className: "text-muted-foreground size-4"
+				})
+			});
+			$[64] = asset.alt;
+			$[65] = fileIconName;
+			$[66] = filename;
+			$[67] = imageError;
+			$[68] = thumbnailUrl;
+			$[69] = t15$1;
+		} else t15$1 = $[69];
+		let t16$1;
+		if ($[70] !== filename) {
+			t16$1 = /* @__PURE__ */ jsx("p", {
+				className: "truncate text-sm font-medium",
+				children: filename
+			});
+			$[70] = filename;
+			$[71] = t16$1;
+		} else t16$1 = $[71];
+		let t17$1;
+		if ($[72] !== size) {
+			t17$1 = size && /* @__PURE__ */ jsx("p", {
+				className: "text-muted-foreground text-xs",
+				children: formatFileSize(size)
+			});
+			$[72] = size;
+			$[73] = t17$1;
+		} else t17$1 = $[73];
+		let t18$1;
+		if ($[74] !== t16$1 || $[75] !== t17$1) {
+			t18$1 = /* @__PURE__ */ jsxs("div", {
+				className: "min-w-0 flex-1",
+				children: [t16$1, t17$1]
+			});
+			$[74] = t16$1;
+			$[75] = t17$1;
+			$[76] = t18$1;
+		} else t18$1 = $[76];
+		let t19$1;
+		if ($[77] !== loading) {
+			t19$1 = loading && /* @__PURE__ */ jsx(Icon, {
+				icon: "ph:spinner-gap",
+				className: "text-muted-foreground size-4 shrink-0 animate-spin"
+			});
+			$[77] = loading;
+			$[78] = t19$1;
+		} else t19$1 = $[78];
+		let t20$1;
+		if ($[79] !== disabled || $[80] !== href || $[81] !== loading || $[82] !== onEdit || $[83] !== onRemove) {
+			t20$1 = !loading && !disabled && (href || onEdit || onRemove) && /* @__PURE__ */ jsxs("div", {
+				className: "flex shrink-0 items-center gap-1",
+				children: [
+					href && /* @__PURE__ */ jsx(Button, {
+						type: "button",
+						variant: "ghost",
+						size: "icon-xs",
+						nativeButton: false,
+						render: /* @__PURE__ */ jsx("a", {
+							href,
+							onClick: _temp2
+						}),
+						children: /* @__PURE__ */ jsx(Icon, { icon: "ph:arrow-square-out-bold" })
+					}),
+					onEdit && /* @__PURE__ */ jsx(Button, {
+						type: "button",
+						variant: "ghost",
+						size: "icon-xs",
+						onClick: (e_5) => {
+							e_5.stopPropagation();
+							onEdit();
+						},
+						children: /* @__PURE__ */ jsx(Icon, { icon: "ph:pencil-bold" })
+					}),
+					onRemove && /* @__PURE__ */ jsx(Button, {
+						type: "button",
+						variant: "ghost",
+						size: "icon-xs",
+						onClick: (e_6) => {
+							e_6.stopPropagation();
+							onRemove();
+						},
+						className: "text-destructive hover:text-destructive",
+						children: /* @__PURE__ */ jsx(Icon, { icon: "ph:x-bold" })
+					})
+				]
+			});
+			$[79] = disabled;
+			$[80] = href;
+			$[81] = loading;
+			$[82] = onEdit;
+			$[83] = onRemove;
+			$[84] = t20$1;
+		} else t20$1 = $[84];
+		let t21$1;
+		if ($[85] !== compactInteractiveProps || $[86] !== t13$1 || $[87] !== t14$1 || $[88] !== t15$1 || $[89] !== t18$1 || $[90] !== t19$1 || $[91] !== t20$1) {
+			t21$1 = /* @__PURE__ */ jsxs("div", {
+				className: t13$1,
+				...compactInteractiveProps,
+				children: [
+					t14$1,
+					t15$1,
+					t18$1,
+					t19$1,
+					t20$1
+				]
+			});
+			$[85] = compactInteractiveProps;
+			$[86] = t13$1;
+			$[87] = t14$1;
+			$[88] = t15$1;
+			$[89] = t18$1;
+			$[90] = t19$1;
+			$[91] = t20$1;
+			$[92] = t21$1;
+		} else t21$1 = $[92];
+		return t21$1;
+	}
+	if (isLoadingAsset) {
+		let t10$1;
+		if ($[93] !== className) {
+			t10$1 = cn("overflow-hidden border", "bg-muted border-border", className);
+			$[93] = className;
+			$[94] = t10$1;
+		} else t10$1 = $[94];
+		let t11$1;
+		if ($[95] === Symbol.for("react.memo_cache_sentinel")) {
+			t11$1 = /* @__PURE__ */ jsx(Skeleton, { className: "aspect-video w-full" });
+			$[95] = t11$1;
+		} else t11$1 = $[95];
+		let t12$1;
+		if ($[96] === Symbol.for("react.memo_cache_sentinel")) {
+			t12$1 = /* @__PURE__ */ jsxs("div", {
+				className: "space-y-1.5 p-3",
+				children: [/* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-3/4 rounded" }), /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-1/2 rounded" })]
+			});
+			$[96] = t12$1;
+		} else t12$1 = $[96];
+		let t13$1;
+		if ($[97] !== t10$1) {
+			t13$1 = /* @__PURE__ */ jsxs("div", {
+				className: t10$1,
+				children: [t11$1, t12$1]
+			});
+			$[97] = t10$1;
+			$[98] = t13$1;
+		} else t13$1 = $[98];
+		return t13$1;
+	}
+	const isCardInteractive = onClick && !disabled && asset.id;
+	let t10;
+	if ($[99] !== asset.id || $[100] !== isCardInteractive || $[101] !== onClick) {
+		t10 = isCardInteractive ? {
+			role: "button",
+			tabIndex: 0,
+			onClick: () => onClick(asset.id),
+			onKeyDown: (e_7) => {
+				if (e_7.key === "Enter" || e_7.key === " ") {
+					e_7.preventDefault();
+					onClick(asset.id);
+				}
+			}
+		} : {};
+		$[99] = asset.id;
+		$[100] = isCardInteractive;
+		$[101] = onClick;
+		$[102] = t10;
+	} else t10 = $[102];
+	const cardInteractiveProps = t10;
+	const t11 = disabled && "opacity-60";
+	const t12 = onClick && !disabled && "hover:border-border cursor-pointer";
+	let t13;
+	if ($[103] !== className || $[104] !== t11 || $[105] !== t12) {
+		t13 = cn("group relative overflow-hidden border", "bg-muted border-border", t11, t12, className);
+		$[103] = className;
+		$[104] = t11;
+		$[105] = t12;
+		$[106] = t13;
+	} else t13 = $[106];
+	let t14;
+	if ($[107] !== dragHandleProps || $[108] !== showDragHandle) {
+		t14 = showDragHandle && /* @__PURE__ */ jsx("button", {
+			type: "button",
+			className: "text-muted-foreground hover:text-foreground absolute top-2 left-2 z-10 cursor-grab touch-none rounded p-1 active:cursor-grabbing",
+			...dragHandleProps,
+			children: /* @__PURE__ */ jsx(Icon, {
+				icon: "ph:dots-six-vertical-bold",
+				className: "size-4"
+			})
+		});
+		$[107] = dragHandleProps;
+		$[108] = showDragHandle;
+		$[109] = t14;
+	} else t14 = $[109];
+	let t15;
+	if ($[110] !== asset.alt || $[111] !== extension || $[112] !== fileIconName || $[113] !== filename || $[114] !== imageError || $[115] !== thumbnailUrl) {
+		t15 = thumbnailUrl && !imageError ? /* @__PURE__ */ jsx("img", {
+			src: thumbnailUrl,
+			alt: asset.alt || filename,
+			className: "h-full w-full object-contain",
+			onError: () => setImageError(true)
+		}) : /* @__PURE__ */ jsxs("div", {
+			className: "flex h-full w-full flex-col items-center justify-center gap-2",
+			children: [/* @__PURE__ */ jsx(Icon, {
+				icon: fileIconName,
+				className: "text-muted-foreground size-12"
+			}), extension && /* @__PURE__ */ jsx("span", {
+				className: "bg-muted text-muted-foreground rounded px-2 py-0.5 text-xs font-medium",
+				children: extension
+			})]
+		});
+		$[110] = asset.alt;
+		$[111] = extension;
+		$[112] = fileIconName;
+		$[113] = filename;
+		$[114] = imageError;
+		$[115] = thumbnailUrl;
+		$[116] = t15;
+	} else t15 = $[116];
+	let t16;
+	if ($[117] !== loading || $[118] !== progress) {
+		t16 = loading && /* @__PURE__ */ jsxs("div", {
+			className: "bg-background absolute inset-0 flex flex-col items-center justify-center gap-2",
+			children: [/* @__PURE__ */ jsx(Icon, {
+				icon: "ph:spinner-gap",
+				className: "text-muted-foreground size-8 animate-spin"
+			}), typeof progress === "number" && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("span", {
+				className: "text-muted-foreground text-sm font-medium",
+				children: [progress, "%"]
+			}), /* @__PURE__ */ jsx("div", {
+				className: "bg-muted h-1.5 w-24 overflow-hidden rounded-full",
+				children: /* @__PURE__ */ jsx("div", {
+					className: "bg-primary h-full rounded-full transition-all duration-300",
+					style: { width: `${progress}%` }
+				})
+			})] })]
+		});
+		$[117] = loading;
+		$[118] = progress;
+		$[119] = t16;
+	} else t16 = $[119];
+	let t17;
+	if ($[120] !== disabled || $[121] !== loading || $[122] !== onRemove) {
+		t17 = !loading && !disabled && onRemove && /* @__PURE__ */ jsx(Button, {
+			type: "button",
+			variant: "secondary",
+			size: "icon-xs",
+			className: "absolute top-2 right-2 opacity-0 transition-opacity group-hover:opacity-100",
+			onClick: (e_8) => {
+				e_8.stopPropagation();
+				onRemove();
+			},
+			children: /* @__PURE__ */ jsx(Icon, { icon: "ph:x-bold" })
+		});
+		$[120] = disabled;
+		$[121] = loading;
+		$[122] = onRemove;
+		$[123] = t17;
+	} else t17 = $[123];
+	let t18;
+	if ($[124] !== t15 || $[125] !== t16 || $[126] !== t17) {
+		t18 = /* @__PURE__ */ jsxs("div", {
+			className: "bg-muted relative aspect-video w-full",
+			children: [
+				t15,
+				t16,
+				t17
+			]
+		});
+		$[124] = t15;
+		$[125] = t16;
+		$[126] = t17;
+		$[127] = t18;
+	} else t18 = $[127];
+	let t19;
+	if ($[128] !== filename) {
+		t19 = /* @__PURE__ */ jsx("p", {
+			className: "truncate text-sm font-medium",
+			title: filename,
+			children: filename
+		});
+		$[128] = filename;
+		$[129] = t19;
+	} else t19 = $[129];
+	let t20;
+	if ($[130] !== size) {
+		t20 = formatFileSize(size);
+		$[130] = size;
+		$[131] = t20;
+	} else t20 = $[131];
+	let t21;
+	if ($[132] !== mimeType) {
+		t21 = mimeType && ` • ${mimeType.split("/")[1]?.toUpperCase()}`;
+		$[132] = mimeType;
+		$[133] = t21;
+	} else t21 = $[133];
+	let t22;
+	if ($[134] !== t20 || $[135] !== t21) {
+		t22 = /* @__PURE__ */ jsxs("p", {
+			className: "text-muted-foreground text-xs",
+			children: [t20, t21]
+		});
+		$[134] = t20;
+		$[135] = t21;
+		$[136] = t22;
+	} else t22 = $[136];
+	let t23;
+	if ($[137] !== t19 || $[138] !== t22) {
+		t23 = /* @__PURE__ */ jsxs("div", {
+			className: "min-w-0 flex-1",
+			children: [t19, t22]
+		});
+		$[137] = t19;
+		$[138] = t22;
+		$[139] = t23;
+	} else t23 = $[139];
+	let t24;
+	if ($[140] !== disabled || $[141] !== href || $[142] !== loading || $[143] !== onEdit) {
+		t24 = !loading && !disabled && (href || onEdit) && /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-1",
+			children: [href && /* @__PURE__ */ jsx(Button, {
+				type: "button",
+				variant: "ghost",
+				size: "icon-sm",
+				nativeButton: false,
+				render: /* @__PURE__ */ jsx("a", {
+					href,
+					onClick: _temp3
+				}),
+				children: /* @__PURE__ */ jsx(Icon, { icon: "ph:arrow-square-out-bold" })
+			}), onEdit && /* @__PURE__ */ jsx(Button, {
+				type: "button",
+				variant: "ghost",
+				size: "icon-sm",
+				onClick: (e_10) => {
+					e_10.stopPropagation();
+					onEdit();
+				},
+				children: /* @__PURE__ */ jsx(Icon, { icon: "ph:pencil-bold" })
+			})]
+		});
+		$[140] = disabled;
+		$[141] = href;
+		$[142] = loading;
+		$[143] = onEdit;
+		$[144] = t24;
+	} else t24 = $[144];
+	let t25;
+	if ($[145] !== t23 || $[146] !== t24) {
+		t25 = /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2 border-t p-2",
+			children: [t23, t24]
+		});
+		$[145] = t23;
+		$[146] = t24;
+		$[147] = t25;
+	} else t25 = $[147];
+	let t26;
+	if ($[148] !== cardInteractiveProps || $[149] !== t13 || $[150] !== t14 || $[151] !== t18 || $[152] !== t25) {
+		t26 = /* @__PURE__ */ jsxs("div", {
+			className: t13,
+			...cardInteractiveProps,
+			children: [
+				t14,
+				t18,
+				t25
+			]
+		});
+		$[148] = cardInteractiveProps;
+		$[149] = t13;
+		$[150] = t14;
+		$[151] = t18;
+		$[152] = t25;
+		$[153] = t26;
+	} else t26 = $[153];
+	return t26;
+}
+function _temp3(e_9) {
+	return e_9.stopPropagation();
+}
+function _temp2(e_4) {
+	return e_4.stopPropagation();
+}
+function _temp(e_0) {
+	return e_0.stopPropagation();
+}
+
+//#endregion
+export { AssetPreview };