@questpie/admin 3.2.4 → 3.2.6

package/dist/client/components/media/media-grid.mjs

@@ -1,7 +1,6 @@
 import { useSafeI18n } from "../../i18n/hooks.mjs";
 import { cn } from "../../lib/utils.mjs";
 import { Skeleton } from "../ui/skeleton.mjs";
-import { c } from "react/compiler-runtime";
 import { Icon } from "@iconify/react";
 import * as React from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -47,287 +46,99 @@ function getAssetTypeColor(mimeType) {
 function isImage(mimeType) {
 	return !!mimeType?.toLowerCase().startsWith("image/");
 }
-function MediaGridSkeleton(t0) {
-	const $ = c(9);
-	const { columns: t1 } = t0;
-	const columns = t1 === void 0 ? 4 : t1;
+function MediaGridSkeleton({ columns = 4 }) {
 	const count = columns * 3;
-	let t2;
-	if ($[0] !== count) {
-		t2 = Array.from({ length: count }, _temp);
-		$[0] = count;
-		$[1] = t2;
-	} else t2 = $[1];
-	const skeletonKeys = t2;
-	const gridClass = columns === 2 ? "grid-cols-2" : columns === 3 ? "grid-cols-2 sm:grid-cols-3" : columns === 5 ? "grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5" : "grid-cols-2 sm:grid-cols-3 lg:grid-cols-4";
-	let t3;
-	if ($[2] !== gridClass) {
-		t3 = cn("grid gap-3", gridClass);
-		$[2] = gridClass;
-		$[3] = t3;
-	} else t3 = $[3];
-	let t4;
-	if ($[4] !== skeletonKeys) {
-		t4 = skeletonKeys.map(_temp2);
-		$[4] = skeletonKeys;
-		$[5] = t4;
-	} else t4 = $[5];
-	let t5;
-	if ($[6] !== t3 || $[7] !== t4) {
-		t5 = /* @__PURE__ */ jsx("div", {
-			className: t3,
-			children: t4
-		});
-		$[6] = t3;
-		$[7] = t4;
-		$[8] = t5;
-	} else t5 = $[8];
-	return t5;
+	const skeletonKeys = React.useMemo(() => Array.from({ length: count }, () => crypto.randomUUID()), [count]);
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("grid gap-3", columns === 2 ? "grid-cols-2" : columns === 3 ? "grid-cols-2 sm:grid-cols-3" : columns === 5 ? "grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5" : "grid-cols-2 sm:grid-cols-3 lg:grid-cols-4"),
+		children: skeletonKeys.map((key) => /* @__PURE__ */ jsxs("div", {
+			className: "space-y-2",
+			children: [/* @__PURE__ */ jsx(Skeleton, { className: "aspect-square w-full" }), /* @__PURE__ */ jsx(Skeleton, {
+				variant: "text",
+				className: "h-4 w-3/4"
+			})]
+		}, key))
+	});
 }
-function _temp2(key) {
-	return /* @__PURE__ */ jsxs("div", {
-		className: "space-y-2",
-		children: [/* @__PURE__ */ jsx(Skeleton, { className: "aspect-square w-full" }), /* @__PURE__ */ jsx(Skeleton, {
-			variant: "text",
-			className: "h-4 w-3/4"
-		})]
-	}, key);
-}
-function _temp() {
-	return crypto.randomUUID();
-}
-function AssetItem(t0) {
-	const $ = c(26);
-	const { asset, selected, selectionMode, onToggle, onClick } = t0;
+function AssetItem({ asset, selected, selectionMode, onToggle, onClick }) {
 	const [imageError, setImageError] = React.useState(false);
 	const thumbnailUrl = asset.url;
-	let t1;
-	if ($[0] !== asset.mimeType) {
-		t1 = isImage(asset.mimeType);
-		$[0] = asset.mimeType;
-		$[1] = t1;
-	} else t1 = $[1];
-	const isImageType = t1;
+	const isImageType = isImage(asset.mimeType);
 	const showCheckbox = selectionMode !== "none";
-	let t2;
-	if ($[2] !== onClick || $[3] !== onToggle || $[4] !== selectionMode) {
-		t2 = () => {
-			if (selectionMode !== "none") onToggle();
-			onClick?.();
-		};
-		$[2] = onClick;
-		$[3] = onToggle;
-		$[4] = selectionMode;
-		$[5] = t2;
-	} else t2 = $[5];
-	const handleClick = t2;
-	const t3 = selected ? "border-border-strong bg-surface-high ring-ring/20 ring-2" : "hover:border-border hover:bg-accent/20";
-	let t4;
-	if ($[6] !== t3) {
-		t4 = cn("panel-surface group relative aspect-square w-full overflow-hidden", "focus-visible:ring-ring transition-[background-color,border-color,box-shadow,transform] focus-visible:ring-2 focus-visible:outline-none active:scale-[0.96]", t3, "bg-card");
-		$[6] = t3;
-		$[7] = t4;
-	} else t4 = $[7];
-	let t5;
-	if ($[8] !== asset.alt || $[9] !== asset.filename || $[10] !== asset.mimeType || $[11] !== imageError || $[12] !== isImageType || $[13] !== thumbnailUrl) {
-		t5 = thumbnailUrl && isImageType && !imageError ? /* @__PURE__ */ jsx("img", {
-			src: thumbnailUrl,
-			alt: asset.alt || asset.filename || "Asset",
-			className: "image-outline h-full w-full object-cover",
-			onError: () => setImageError(true)
-		}) : /* @__PURE__ */ jsx("div", {
-			className: cn("flex h-full w-full items-center justify-center", getAssetTypeColor(asset.mimeType)),
-			children: /* @__PURE__ */ jsx("span", {
-				className: "text-muted-foreground chrome-meta text-xs font-medium",
-				children: asset.mimeType?.split("/")[1]?.slice(0, 4) || "FILE"
-			})
-		});
-		$[8] = asset.alt;
-		$[9] = asset.filename;
-		$[10] = asset.mimeType;
-		$[11] = imageError;
-		$[12] = isImageType;
-		$[13] = thumbnailUrl;
-		$[14] = t5;
-	} else t5 = $[14];
-	let t6;
-	if ($[15] !== selected || $[16] !== showCheckbox) {
-		t6 = showCheckbox && /* @__PURE__ */ jsx("div", {
-			className: cn("absolute top-2 right-2 flex size-5 items-center justify-center rounded-full border-2 transition-[background-color,border-color,color,opacity,transform]", selected ? "border-foreground bg-foreground text-background" : "border-border bg-background/80 text-muted-foreground group-hover:bg-background"),
-			children: selected && /* @__PURE__ */ jsx(Icon, {
-				icon: "ph:check-bold",
-				className: "size-3"
-			})
-		});
-		$[15] = selected;
-		$[16] = showCheckbox;
-		$[17] = t6;
-	} else t6 = $[17];
-	let t7;
-	if ($[18] !== asset.filename) {
-		t7 = asset.filename && /* @__PURE__ */ jsx("div", {
-			className: "absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/60 to-transparent p-2 opacity-0 transition-opacity group-hover:opacity-100",
-			children: /* @__PURE__ */ jsx("p", {
-				className: "truncate text-xs text-white",
-				title: asset.filename,
-				children: asset.filename
+	const handleClick = () => {
+		if (selectionMode !== "none") onToggle();
+		onClick?.();
+	};
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		onClick: handleClick,
+		className: cn("panel-surface group relative aspect-square w-full overflow-hidden", "focus-visible:ring-ring transition-[background-color,border-color,box-shadow,transform] focus-visible:ring-2 focus-visible:outline-none active:scale-[0.96]", selected ? "border-border-strong bg-surface-high ring-ring/20 ring-2" : "hover:border-border hover:bg-accent/20", "bg-card"),
+		children: [
+			thumbnailUrl && isImageType && !imageError ? /* @__PURE__ */ jsx("img", {
+				src: thumbnailUrl,
+				alt: asset.alt || asset.filename || "Asset",
+				className: "image-outline h-full w-full object-cover",
+				onError: () => setImageError(true)
+			}) : /* @__PURE__ */ jsx("div", {
+				className: cn("flex h-full w-full items-center justify-center", getAssetTypeColor(asset.mimeType)),
+				children: /* @__PURE__ */ jsx("span", {
+					className: "text-muted-foreground chrome-meta text-xs font-medium",
+					children: asset.mimeType?.split("/")[1]?.slice(0, 4) || "FILE"
+				})
+			}),
+			showCheckbox && /* @__PURE__ */ jsx("div", {
+				className: cn("absolute top-2 right-2 flex size-5 items-center justify-center rounded-full border-2 transition-[background-color,border-color,color,opacity,transform]", selected ? "border-foreground bg-foreground text-background" : "border-border bg-background/80 text-muted-foreground group-hover:bg-background"),
+				children: selected && /* @__PURE__ */ jsx(Icon, {
+					icon: "ph:check-bold",
+					className: "size-3"
+				})
+			}),
+			asset.filename && /* @__PURE__ */ jsx("div", {
+				className: "absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/60 to-transparent p-2 opacity-0 transition-opacity group-hover:opacity-100",
+				children: /* @__PURE__ */ jsx("p", {
+					className: "truncate text-xs text-white",
+					title: asset.filename,
+					children: asset.filename
+				})
 			})
-		});
-		$[18] = asset.filename;
-		$[19] = t7;
-	} else t7 = $[19];
-	let t8;
-	if ($[20] !== handleClick || $[21] !== t4 || $[22] !== t5 || $[23] !== t6 || $[24] !== t7) {
-		t8 = /* @__PURE__ */ jsxs("button", {
-			type: "button",
-			onClick: handleClick,
-			className: t4,
-			children: [
-				t5,
-				t6,
-				t7
-			]
-		});
-		$[20] = handleClick;
-		$[21] = t4;
-		$[22] = t5;
-		$[23] = t6;
-		$[24] = t7;
-		$[25] = t8;
-	} else t8 = $[25];
-	return t8;
+		]
+	});
 }
 const EMPTY_SET = /* @__PURE__ */ new Set();
-function MediaGrid(t0) {
-	const $ = c(37);
-	const { assets, selectedIds: t1, onSelectionChange, selectionMode: t2, loading: t3, onAssetClick, columns: t4, className } = t0;
-	const selectedIds = t1 === void 0 ? EMPTY_SET : t1;
-	const selectionMode = t2 === void 0 ? "none" : t2;
-	const loading = t3 === void 0 ? false : t3;
-	const columns = t4 === void 0 ? 4 : t4;
+function MediaGrid({ assets, selectedIds = EMPTY_SET, onSelectionChange, selectionMode = "none", loading = false, onAssetClick, columns = 4, className }) {
 	const i18n = useSafeI18n();
-	let t5;
-	if ($[0] !== i18n) {
-		t5 = (key, fallback) => i18n?.t(key) ?? fallback;
-		$[0] = i18n;
-		$[1] = t5;
-	} else t5 = $[1];
-	const t = t5;
-	let t6;
-	if ($[2] !== onSelectionChange || $[3] !== selectedIds || $[4] !== selectionMode) {
-		t6 = (assetId) => {
-			if (!onSelectionChange) return;
-			const newSelection = new Set(selectedIds);
-			if (selectionMode === "single") {
-				newSelection.clear();
-				newSelection.add(assetId);
-			} else if (newSelection.has(assetId)) newSelection.delete(assetId);
-			else newSelection.add(assetId);
-			onSelectionChange(newSelection);
-		};
-		$[2] = onSelectionChange;
-		$[3] = selectedIds;
-		$[4] = selectionMode;
-		$[5] = t6;
-	} else t6 = $[5];
-	const handleToggle = t6;
-	if (loading) {
-		let t7$1;
-		if ($[6] !== columns) {
-			t7$1 = /* @__PURE__ */ jsx(MediaGridSkeleton, { columns });
-			$[6] = columns;
-			$[7] = t7$1;
-		} else t7$1 = $[7];
-		let t8$1;
-		if ($[8] !== className || $[9] !== t7$1) {
-			t8$1 = /* @__PURE__ */ jsx("div", {
-				className,
-				children: t7$1
-			});
-			$[8] = className;
-			$[9] = t7$1;
-			$[10] = t8$1;
-		} else t8$1 = $[10];
-		return t8$1;
-	}
-	if (assets.length === 0) {
-		let t7$1;
-		if ($[11] !== className) {
-			t7$1 = cn("flex flex-col items-center justify-center p-8", "text-muted-foreground", className);
-			$[11] = className;
-			$[12] = t7$1;
-		} else t7$1 = $[12];
-		let t8$1;
-		if ($[13] !== t) {
-			t8$1 = t("media.noAssets", "No assets found");
-			$[13] = t;
-			$[14] = t8$1;
-		} else t8$1 = $[14];
-		let t9$1;
-		if ($[15] !== t8$1) {
-			t9$1 = /* @__PURE__ */ jsx("p", {
-				className: "text-sm",
-				children: t8$1
-			});
-			$[15] = t8$1;
-			$[16] = t9$1;
-		} else t9$1 = $[16];
-		let t10;
-		if ($[17] !== t7$1 || $[18] !== t9$1) {
-			t10 = /* @__PURE__ */ jsx("div", {
-				className: t7$1,
-				children: t9$1
-			});
-			$[17] = t7$1;
-			$[18] = t9$1;
-			$[19] = t10;
-		} else t10 = $[19];
-		return t10;
-	}
-	const gridClass = columns === 2 ? "grid-cols-2" : columns === 3 ? "grid-cols-2 sm:grid-cols-3" : columns === 5 ? "grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5" : "grid-cols-2 sm:grid-cols-3 lg:grid-cols-4";
-	let t7;
-	if ($[20] !== className || $[21] !== gridClass) {
-		t7 = cn("grid gap-3", gridClass, className);
-		$[20] = className;
-		$[21] = gridClass;
-		$[22] = t7;
-	} else t7 = $[22];
-	let t8;
-	if ($[23] !== assets || $[24] !== handleToggle || $[25] !== onAssetClick || $[26] !== selectedIds || $[27] !== selectionMode) {
-		let t9$1;
-		if ($[29] !== handleToggle || $[30] !== onAssetClick || $[31] !== selectedIds || $[32] !== selectionMode) {
-			t9$1 = (asset) => /* @__PURE__ */ jsx(AssetItem, {
-				asset,
-				selected: selectedIds.has(asset.id),
-				selectionMode,
-				onToggle: () => handleToggle(asset.id),
-				onClick: onAssetClick ? () => onAssetClick(asset) : void 0
-			}, asset.id);
-			$[29] = handleToggle;
-			$[30] = onAssetClick;
-			$[31] = selectedIds;
-			$[32] = selectionMode;
-			$[33] = t9$1;
-		} else t9$1 = $[33];
-		t8 = assets.map(t9$1);
-		$[23] = assets;
-		$[24] = handleToggle;
-		$[25] = onAssetClick;
-		$[26] = selectedIds;
-		$[27] = selectionMode;
-		$[28] = t8;
-	} else t8 = $[28];
-	let t9;
-	if ($[34] !== t7 || $[35] !== t8) {
-		t9 = /* @__PURE__ */ jsx("div", {
-			className: t7,
-			children: t8
-		});
-		$[34] = t7;
-		$[35] = t8;
-		$[36] = t9;
-	} else t9 = $[36];
-	return t9;
+	const t = (key, fallback) => i18n?.t(key) ?? fallback;
+	const handleToggle = (assetId) => {
+		if (!onSelectionChange) return;
+		const newSelection = new Set(selectedIds);
+		if (selectionMode === "single") {
+			newSelection.clear();
+			newSelection.add(assetId);
+		} else if (newSelection.has(assetId)) newSelection.delete(assetId);
+		else newSelection.add(assetId);
+		onSelectionChange(newSelection);
+	};
+	if (loading) return /* @__PURE__ */ jsx("div", {
+		className,
+		children: /* @__PURE__ */ jsx(MediaGridSkeleton, { columns })
+	});
+	if (assets.length === 0) return /* @__PURE__ */ jsx("div", {
+		className: cn("flex flex-col items-center justify-center p-8", "text-muted-foreground", className),
+		children: /* @__PURE__ */ jsx("p", {
+			className: "text-sm",
+			children: t("media.noAssets", "No assets found")
+		})
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: cn("grid gap-3", columns === 2 ? "grid-cols-2" : columns === 3 ? "grid-cols-2 sm:grid-cols-3" : columns === 5 ? "grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5" : "grid-cols-2 sm:grid-cols-3 lg:grid-cols-4", className),
+		children: assets.map((asset) => /* @__PURE__ */ jsx(AssetItem, {
+			asset,
+			selected: selectedIds.has(asset.id),
+			selectionMode,
+			onToggle: () => handleToggle(asset.id),
+			onClick: onAssetClick ? () => onAssetClick(asset) : void 0
+		}, asset.id))
+	});
 }
 
 //#endregion