@questpie/admin 1.1.0 → 2.0.0

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

@@ -0,0 +1,363 @@
+import { cn } from "../../lib/utils.mjs";
+import { Button } from "../ui/button.mjs";
+import { Skeleton } from "../ui/skeleton.mjs";
+import { Icon } from "@iconify/react";
+import * as React$1 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({ asset, pendingFile, onRemove, onEdit, loading = false, progress, disabled = false, showDragHandle = false, dragHandleProps, variant = "card", href, onClick, className }) {
+	const [imageError, setImageError] = React$1.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);
+	const fileIconName = getFileIconName(mimeType);
+	const extension = getExtension(filename, mimeType);
+	const thumbnailUrl = React$1.useMemo(() => {
+		if (pendingFile && isImageType) return URL.createObjectURL(pendingFile);
+		if (asset.url && isImageType) return asset.url;
+		return null;
+	}, [
+		pendingFile,
+		asset.url,
+		isImageType
+	]);
+	React$1.useEffect(() => {
+		return () => {
+			if (pendingFile && thumbnailUrl) URL.revokeObjectURL(thumbnailUrl);
+		};
+	}, [pendingFile, thumbnailUrl]);
+	if (variant === "thumbnail") {
+		if (isLoadingAsset) return /* @__PURE__ */ jsx(Skeleton, { className: cn("aspect-square w-full rounded-lg", className) });
+		return /* @__PURE__ */ jsxs("div", {
+			className: cn("group relative aspect-square overflow-hidden rounded-lg border", "bg-muted/30 border-border/60", disabled && "opacity-60", onClick && !disabled && "cursor-pointer hover:border-border", className),
+			onClick: onClick && !disabled && asset.id ? () => onClick(asset.id) : void 0,
+			children: [
+				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"
+					})
+				}),
+				loading && /* @__PURE__ */ jsx("div", {
+					className: "bg-background/80 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, "%"]
+						})]
+					})
+				}),
+				!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: (e) => e.stopPropagation()
+							}),
+							children: /* @__PURE__ */ jsx(Icon, { icon: "ph:arrow-square-out-bold" })
+						}),
+						onEdit && /* @__PURE__ */ jsx(Button, {
+							type: "button",
+							variant: "secondary",
+							size: "icon-xs",
+							onClick: (e) => {
+								e.stopPropagation();
+								onEdit();
+							},
+							children: /* @__PURE__ */ jsx(Icon, { icon: "ph:pencil-bold" })
+						}),
+						onRemove && /* @__PURE__ */ jsx(Button, {
+							type: "button",
+							variant: "destructive",
+							size: "icon-xs",
+							onClick: (e) => {
+								e.stopPropagation();
+								onRemove();
+							},
+							children: /* @__PURE__ */ jsx(Icon, { icon: "ph:trash-bold" })
+						})
+					]
+				})
+			]
+		});
+	}
+	if (variant === "compact") {
+		if (isLoadingAsset) return /* @__PURE__ */ jsxs("div", {
+			className: cn("flex items-center gap-2 rounded-md border p-2", "bg-muted/30 border-border/60", className),
+			children: [
+				showDragHandle && /* @__PURE__ */ jsx(Skeleton, { className: "size-4 -ml-1 rounded" }),
+				/* @__PURE__ */ jsx(Skeleton, { className: "size-8 shrink-0 rounded" }),
+				/* @__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" })]
+				})
+			]
+		});
+		return /* @__PURE__ */ jsxs("div", {
+			className: cn("group flex items-center gap-2 rounded-md border p-2", "bg-muted/30 border-border/60", disabled && "opacity-60", onClick && !disabled && "cursor-pointer hover:border-border", className),
+			onClick: onClick && !disabled && asset.id ? () => onClick(asset.id) : void 0,
+			children: [
+				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"
+					})
+				}),
+				/* @__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"
+					})
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "min-w-0 flex-1",
+					children: [/* @__PURE__ */ jsx("p", {
+						className: "truncate text-sm font-medium",
+						children: filename
+					}), size && /* @__PURE__ */ jsx("p", {
+						className: "text-muted-foreground text-xs",
+						children: formatFileSize(size)
+					})]
+				}),
+				loading && /* @__PURE__ */ jsx(Icon, {
+					icon: "ph:spinner-gap",
+					className: "text-muted-foreground size-4 shrink-0 animate-spin"
+				}),
+				!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: (e) => e.stopPropagation()
+							}),
+							children: /* @__PURE__ */ jsx(Icon, { icon: "ph:arrow-square-out-bold" })
+						}),
+						onEdit && /* @__PURE__ */ jsx(Button, {
+							type: "button",
+							variant: "ghost",
+							size: "icon-xs",
+							onClick: (e) => {
+								e.stopPropagation();
+								onEdit();
+							},
+							children: /* @__PURE__ */ jsx(Icon, { icon: "ph:pencil-bold" })
+						}),
+						onRemove && /* @__PURE__ */ jsx(Button, {
+							type: "button",
+							variant: "ghost",
+							size: "icon-xs",
+							onClick: (e) => {
+								e.stopPropagation();
+								onRemove();
+							},
+							className: "text-destructive hover:text-destructive",
+							children: /* @__PURE__ */ jsx(Icon, { icon: "ph:x-bold" })
+						})
+					]
+				})
+			]
+		});
+	}
+	if (isLoadingAsset) return /* @__PURE__ */ jsxs("div", {
+		className: cn("overflow-hidden rounded-lg border", "bg-muted/30 border-border/60", className),
+		children: [/* @__PURE__ */ jsx(Skeleton, { className: "aspect-video w-full" }), /* @__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" })]
+		})]
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("group relative overflow-hidden rounded-lg border", "bg-muted/30 border-border/60", disabled && "opacity-60", onClick && !disabled && "cursor-pointer hover:border-border", className),
+		onClick: onClick && !disabled && asset.id ? () => onClick(asset.id) : void 0,
+		children: [
+			showDragHandle && /* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: "text-muted-foreground hover:text-foreground absolute left-2 top-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"
+				})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "bg-muted/50 relative aspect-video w-full",
+				children: [
+					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
+						})]
+					}),
+					loading && /* @__PURE__ */ jsxs("div", {
+						className: "bg-background/80 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}%` }
+							})
+						})] })]
+					}),
+					!loading && !disabled && onRemove && /* @__PURE__ */ jsx(Button, {
+						type: "button",
+						variant: "secondary",
+						size: "icon-xs",
+						className: "absolute right-2 top-2 opacity-0 transition-opacity group-hover:opacity-100",
+						onClick: (e) => {
+							e.stopPropagation();
+							onRemove();
+						},
+						children: /* @__PURE__ */ jsx(Icon, { icon: "ph:x-bold" })
+					})
+				]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex items-center gap-2 border-t p-2",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "min-w-0 flex-1",
+					children: [/* @__PURE__ */ jsx("p", {
+						className: "truncate text-sm font-medium",
+						title: filename,
+						children: filename
+					}), /* @__PURE__ */ jsxs("p", {
+						className: "text-muted-foreground text-xs",
+						children: [formatFileSize(size), mimeType && ` • ${mimeType.split("/")[1]?.toUpperCase()}`]
+					})]
+				}), !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: (e) => e.stopPropagation()
+						}),
+						children: /* @__PURE__ */ jsx(Icon, { icon: "ph:arrow-square-out-bold" })
+					}), onEdit && /* @__PURE__ */ jsx(Button, {
+						type: "button",
+						variant: "ghost",
+						size: "icon-sm",
+						onClick: (e) => {
+							e.stopPropagation();
+							onEdit();
+						},
+						children: /* @__PURE__ */ jsx(Icon, { icon: "ph:pencil-bold" })
+					})]
+				})]
+			})
+		]
+	});
+}
+
+//#endregion
+export { AssetPreview };
+//# sourceMappingURL=asset-preview.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"asset-preview.mjs","names":["React"],"sources":["../../../../src/client/components/primitives/asset-preview.tsx"],"sourcesContent":["/**\n * AssetPreview Primitive\n *\n * Displays an uploaded asset with thumbnail/icon, metadata, and actions.\n * Supports images, videos, PDFs, and other file types.\n *\n * @example\n * ```tsx\n * <AssetPreview\n *   asset={asset}\n *   onRemove={() => handleRemove(asset.id)}\n *   onEdit={() => openEditDialog(asset)}\n * />\n * ```\n */\n\nimport { Icon } from \"@iconify/react\";\nimport * as React from \"react\";\nimport type { Asset } from \"../../hooks/use-upload\";\nimport { cn } from \"../../lib/utils\";\nimport { Button } from \"../ui/button\";\nimport { Skeleton } from \"../ui/skeleton\";\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface AssetPreviewProps {\n\t/**\n\t * Asset data (from upload or existing record)\n\t */\n\tasset: Partial<Asset> & {\n\t\tid?: string;\n\t\tfilename?: string;\n\t\tmimeType?: string;\n\t\tsize?: number;\n\t\turl?: string;\n\t\talt?: string | null;\n\t};\n\n\t/**\n\t * Pending file object (for displaying local preview before upload)\n\t */\n\tpendingFile?: File;\n\n\t/**\n\t * Called when remove button is clicked\n\t */\n\tonRemove?: () => void;\n\n\t/**\n\t * Called when edit button is clicked\n\t */\n\tonEdit?: () => void;\n\n\t/**\n\t * Show loading state\n\t */\n\tloading?: boolean;\n\n\t/**\n\t * Upload progress (0-100)\n\t */\n\tprogress?: number;\n\n\t/**\n\t * Whether the preview is disabled\n\t */\n\tdisabled?: boolean;\n\n\t/**\n\t * Whether to show the drag handle (for sortable lists)\n\t */\n\tshowDragHandle?: boolean;\n\n\t/**\n\t * Drag handle props (from dnd-kit)\n\t */\n\tdragHandleProps?: React.HTMLAttributes<HTMLButtonElement>;\n\n\t/**\n\t * Display variant\n\t * @default \"card\"\n\t */\n\tvariant?: \"card\" | \"compact\" | \"thumbnail\";\n\n\t/**\n\t * Link to asset detail page (makes the preview clickable)\n\t */\n\thref?: string;\n\n\t/**\n\t * Called when the preview is clicked\n\t */\n\tonClick?: (id: string) => void;\n\n\t/**\n\t * Additional className\n\t */\n\tclassName?: string;\n}\n\n// ============================================================================\n// Helpers\n// ============================================================================\n\n/**\n * Get icon name based on MIME type\n */\nfunction getFileIconName(mimeType?: string): string {\n\tif (!mimeType) return \"ph:file\";\n\n\tconst type = mimeType.toLowerCase();\n\n\tif (type.startsWith(\"image/\")) return \"ph:file-image\";\n\tif (type.startsWith(\"video/\")) return \"ph:file-video\";\n\tif (type.startsWith(\"audio/\")) return \"ph:file-audio\";\n\tif (type === \"application/pdf\") return \"ph:file-pdf\";\n\tif (\n\t\ttype.includes(\"zip\") ||\n\t\ttype.includes(\"compressed\") ||\n\t\ttype.includes(\"archive\")\n\t)\n\t\treturn \"ph:file-zip\";\n\tif (type.includes(\"csv\") || type.includes(\"spreadsheet\"))\n\t\treturn \"ph:file-csv\";\n\tif (\n\t\ttype.includes(\"word\") ||\n\t\ttype.includes(\"document\") ||\n\t\ttype === \"application/rtf\"\n\t)\n\t\treturn \"ph:file-doc\";\n\tif (\n\t\ttype.includes(\"json\") ||\n\t\ttype.includes(\"javascript\") ||\n\t\ttype.includes(\"typescript\") ||\n\t\ttype.includes(\"xml\") ||\n\t\ttype.includes(\"html\")\n\t)\n\t\treturn \"ph:file-code\";\n\n\treturn \"ph:file\";\n}\n\n/**\n * Check if MIME type is an image\n */\nfunction isImage(mimeType?: string): boolean {\n\treturn !!mimeType?.toLowerCase().startsWith(\"image/\");\n}\n\n/**\n * Format file size for display\n */\nfunction formatFileSize(bytes?: number): string {\n\tif (!bytes) return \"\";\n\tif (bytes < 1024) return `${bytes} B`;\n\tif (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;\n\treturn `${(bytes / (1024 * 1024)).toFixed(1)} MB`;\n}\n\n/**\n * Get file extension from filename or MIME type\n */\nfunction getExtension(filename?: string, mimeType?: string): string {\n\tif (filename) {\n\t\tconst parts = filename.split(\".\");\n\t\tif (parts.length > 1) {\n\t\t\treturn parts[parts.length - 1].toUpperCase();\n\t\t}\n\t}\n\tif (mimeType) {\n\t\tconst parts = mimeType.split(\"/\");\n\t\treturn parts[parts.length - 1].toUpperCase();\n\t}\n\treturn \"\";\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport function AssetPreview({\n\tasset,\n\tpendingFile,\n\tonRemove,\n\tonEdit,\n\tloading = false,\n\tprogress,\n\tdisabled = false,\n\tshowDragHandle = false,\n\tdragHandleProps,\n\tvariant = \"card\",\n\thref,\n\tonClick,\n\tclassName,\n}: AssetPreviewProps) {\n\tconst [imageError, setImageError] = React.useState(false);\n\n\t// Check if we have actual asset data or just an ID (loading state)\n\tconst hasAssetData = !!(asset.filename || asset.url || pendingFile);\n\tconst isLoadingAsset = loading && !hasAssetData;\n\n\t// Get display values\n\tconst filename = asset.filename || pendingFile?.name || \"Unknown file\";\n\tconst mimeType = asset.mimeType || pendingFile?.type;\n\tconst size = asset.size || pendingFile?.size;\n\tconst isImageType = isImage(mimeType);\n\tconst fileIconName = getFileIconName(mimeType);\n\tconst extension = getExtension(filename, mimeType);\n\n\t// Build thumbnail URL\n\tconst thumbnailUrl = React.useMemo(() => {\n\t\t// If we have a pending file, create object URL\n\t\tif (pendingFile && isImageType) {\n\t\t\treturn URL.createObjectURL(pendingFile);\n\t\t}\n\t\t// If we have an asset URL and it's an image\n\t\tif (asset.url && isImageType) {\n\t\t\treturn asset.url;\n\t\t}\n\t\treturn null;\n\t}, [pendingFile, asset.url, isImageType]);\n\n\t// Clean up object URL on unmount\n\tReact.useEffect(() => {\n\t\treturn () => {\n\t\t\tif (pendingFile && thumbnailUrl) {\n\t\t\t\tURL.revokeObjectURL(thumbnailUrl);\n\t\t\t}\n\t\t};\n\t}, [pendingFile, thumbnailUrl]);\n\n\t// Thumbnail variant\n\tif (variant === \"thumbnail\") {\n\t\t// Show skeleton when loading and no actual asset data\n\t\tif (isLoadingAsset) {\n\t\t\treturn (\n\t\t\t\t<Skeleton\n\t\t\t\t\tclassName={cn(\"aspect-square w-full rounded-lg\", className)}\n\t\t\t\t/>\n\t\t\t);\n\t\t}\n\n\t\tconst content = (\n\t\t\t<div\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"group relative aspect-square overflow-hidden rounded-lg border\",\n\t\t\t\t\t\"bg-muted/30 border-border/60\",\n\t\t\t\t\tdisabled && \"opacity-60\",\n\t\t\t\t\tonClick && !disabled && \"cursor-pointer hover:border-border\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tonClick={\n\t\t\t\t\tonClick && !disabled && asset.id\n\t\t\t\t\t\t? () => onClick(asset.id!)\n\t\t\t\t\t\t: undefined\n\t\t\t\t}\n\t\t\t>\n\t\t\t\t{/* Thumbnail or icon */}\n\t\t\t\t{thumbnailUrl && !imageError ? (\n\t\t\t\t\t<img\n\t\t\t\t\t\tsrc={thumbnailUrl}\n\t\t\t\t\t\talt={asset.alt || filename}\n\t\t\t\t\t\tclassName=\"h-full w-full object-cover\"\n\t\t\t\t\t\tonError={() => setImageError(true)}\n\t\t\t\t\t/>\n\t\t\t\t) : (\n\t\t\t\t\t<div className=\"flex h-full w-full items-center justify-center\">\n\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\ticon={fileIconName}\n\t\t\t\t\t\t\tclassName=\"text-muted-foreground size-8\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\n\t\t\t\t{/* Loading overlay */}\n\t\t\t\t{loading && (\n\t\t\t\t\t<div className=\"bg-background/80 absolute inset-0 flex items-center justify-center\">\n\t\t\t\t\t\t<div className=\"relative\">\n\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\ticon=\"ph:spinner-gap\"\n\t\t\t\t\t\t\t\tclassName=\"text-muted-foreground size-6 animate-spin\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t{typeof progress === \"number\" && (\n\t\t\t\t\t\t\t\t<span className=\"text-muted-foreground absolute inset-0 flex items-center justify-center text-[10px] font-medium\">\n\t\t\t\t\t\t\t\t\t{progress}%\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\n\t\t\t\t{/* Action buttons (visible on hover) */}\n\t\t\t\t{!loading && !disabled && (onRemove || onEdit || href) && (\n\t\t\t\t\t<div className=\"absolute inset-0 flex items-center justify-center gap-1 bg-black/50 opacity-0 transition-opacity group-hover:opacity-100\">\n\t\t\t\t\t\t{href && (\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\t\t\tsize=\"icon-xs\"\n\t\t\t\t\t\t\t\tnativeButton={false}\n\t\t\t\t\t\t\t\trender={<a href={href} onClick={(e) => e.stopPropagation()} />}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Icon icon=\"ph:arrow-square-out-bold\" />\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{onEdit && (\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\t\t\tsize=\"icon-xs\"\n\t\t\t\t\t\t\t\tonClick={(e) => {\n\t\t\t\t\t\t\t\t\te.stopPropagation();\n\t\t\t\t\t\t\t\t\tonEdit();\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Icon icon=\"ph:pencil-bold\" />\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{onRemove && (\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\tvariant=\"destructive\"\n\t\t\t\t\t\t\t\tsize=\"icon-xs\"\n\t\t\t\t\t\t\t\tonClick={(e) => {\n\t\t\t\t\t\t\t\t\te.stopPropagation();\n\t\t\t\t\t\t\t\t\tonRemove();\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Icon icon=\"ph:trash-bold\" />\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t);\n\n\t\treturn content;\n\t}\n\n\t// Compact variant\n\tif (variant === \"compact\") {\n\t\t// Show skeleton when loading and no actual asset data\n\t\tif (isLoadingAsset) {\n\t\t\treturn (\n\t\t\t\t<div\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\"flex items-center gap-2 rounded-md border p-2\",\n\t\t\t\t\t\t\"bg-muted/30 border-border/60\",\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t)}\n\t\t\t\t>\n\t\t\t\t\t{showDragHandle && <Skeleton className=\"size-4 -ml-1 rounded\" />}\n\t\t\t\t\t<Skeleton className=\"size-8 shrink-0 rounded\" />\n\t\t\t\t\t<div className=\"min-w-0 flex-1 space-y-1.5\">\n\t\t\t\t\t\t<Skeleton className=\"h-4 w-32 rounded\" />\n\t\t\t\t\t\t<Skeleton className=\"h-3 w-16 rounded\" />\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"group flex items-center gap-2 rounded-md border p-2\",\n\t\t\t\t\t\"bg-muted/30 border-border/60\",\n\t\t\t\t\tdisabled && \"opacity-60\",\n\t\t\t\t\tonClick && !disabled && \"cursor-pointer hover:border-border\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tonClick={\n\t\t\t\t\tonClick && !disabled && asset.id\n\t\t\t\t\t\t? () => onClick(asset.id!)\n\t\t\t\t\t\t: undefined\n\t\t\t\t}\n\t\t\t>\n\t\t\t\t{/* Drag handle */}\n\t\t\t\t{showDragHandle && (\n\t\t\t\t\t<button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tclassName=\"text-muted-foreground hover:text-foreground -ml-1 cursor-grab touch-none active:cursor-grabbing\"\n\t\t\t\t\t\t{...dragHandleProps}\n\t\t\t\t\t>\n\t\t\t\t\t\t<Icon icon=\"ph:dots-six-vertical-bold\" className=\"size-4\" />\n\t\t\t\t\t</button>\n\t\t\t\t)}\n\n\t\t\t\t{/* Icon or thumbnail */}\n\t\t\t\t<div className=\"bg-muted flex size-8 shrink-0 items-center justify-center overflow-hidden rounded\">\n\t\t\t\t\t{thumbnailUrl && !imageError ? (\n\t\t\t\t\t\t<img\n\t\t\t\t\t\t\tsrc={thumbnailUrl}\n\t\t\t\t\t\t\talt={asset.alt || filename}\n\t\t\t\t\t\t\tclassName=\"h-full w-full object-cover\"\n\t\t\t\t\t\t\tonError={() => setImageError(true)}\n\t\t\t\t\t\t/>\n\t\t\t\t\t) : (\n\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\ticon={fileIconName}\n\t\t\t\t\t\t\tclassName=\"text-muted-foreground size-4\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\n\t\t\t\t{/* File info */}\n\t\t\t\t<div className=\"min-w-0 flex-1\">\n\t\t\t\t\t<p className=\"truncate text-sm font-medium\">{filename}</p>\n\t\t\t\t\t{size && (\n\t\t\t\t\t\t<p className=\"text-muted-foreground text-xs\">\n\t\t\t\t\t\t\t{formatFileSize(size)}\n\t\t\t\t\t\t</p>\n\t\t\t\t\t)}\n\t\t\t\t</div>\n\n\t\t\t\t{/* Loading indicator */}\n\t\t\t\t{loading && (\n\t\t\t\t\t<Icon\n\t\t\t\t\t\ticon=\"ph:spinner-gap\"\n\t\t\t\t\t\tclassName=\"text-muted-foreground size-4 shrink-0 animate-spin\"\n\t\t\t\t\t/>\n\t\t\t\t)}\n\n\t\t\t\t{/* Action buttons */}\n\t\t\t\t{!loading && !disabled && (href || onEdit || onRemove) && (\n\t\t\t\t\t<div className=\"flex shrink-0 items-center gap-1\">\n\t\t\t\t\t\t{href && (\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t\t\tsize=\"icon-xs\"\n\t\t\t\t\t\t\t\tnativeButton={false}\n\t\t\t\t\t\t\t\trender={<a href={href} onClick={(e) => e.stopPropagation()} />}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Icon icon=\"ph:arrow-square-out-bold\" />\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{onEdit && (\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t\t\tsize=\"icon-xs\"\n\t\t\t\t\t\t\t\tonClick={(e) => {\n\t\t\t\t\t\t\t\t\te.stopPropagation();\n\t\t\t\t\t\t\t\t\tonEdit();\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Icon icon=\"ph:pencil-bold\" />\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{onRemove && (\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t\t\tsize=\"icon-xs\"\n\t\t\t\t\t\t\t\tonClick={(e) => {\n\t\t\t\t\t\t\t\t\te.stopPropagation();\n\t\t\t\t\t\t\t\t\tonRemove();\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\tclassName=\"text-destructive hover:text-destructive\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Icon icon=\"ph:x-bold\" />\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t);\n\t}\n\n\t// Card variant (default)\n\t// Show skeleton when loading and no actual asset data\n\tif (isLoadingAsset) {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"overflow-hidden rounded-lg border\",\n\t\t\t\t\t\"bg-muted/30 border-border/60\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t<Skeleton className=\"aspect-video w-full\" />\n\t\t\t\t<div className=\"space-y-1.5 p-3\">\n\t\t\t\t\t<Skeleton className=\"h-4 w-3/4 rounded\" />\n\t\t\t\t\t<Skeleton className=\"h-3 w-1/2 rounded\" />\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t}\n\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(\n\t\t\t\t\"group relative overflow-hidden rounded-lg border\",\n\t\t\t\t\"bg-muted/30 border-border/60\",\n\t\t\t\tdisabled && \"opacity-60\",\n\t\t\t\tonClick && !disabled && \"cursor-pointer hover:border-border\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tonClick={\n\t\t\t\tonClick && !disabled && asset.id ? () => onClick(asset.id!) : undefined\n\t\t\t}\n\t\t>\n\t\t\t{/* Drag handle */}\n\t\t\t{showDragHandle && (\n\t\t\t\t<button\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tclassName=\"text-muted-foreground hover:text-foreground absolute left-2 top-2 z-10 cursor-grab touch-none rounded p-1 active:cursor-grabbing\"\n\t\t\t\t\t{...dragHandleProps}\n\t\t\t\t>\n\t\t\t\t\t<Icon icon=\"ph:dots-six-vertical-bold\" className=\"size-4\" />\n\t\t\t\t</button>\n\t\t\t)}\n\n\t\t\t{/* Thumbnail area */}\n\t\t\t<div className=\"bg-muted/50 relative aspect-video w-full\">\n\t\t\t\t{thumbnailUrl && !imageError ? (\n\t\t\t\t\t<img\n\t\t\t\t\t\tsrc={thumbnailUrl}\n\t\t\t\t\t\talt={asset.alt || filename}\n\t\t\t\t\t\tclassName=\"h-full w-full object-contain\"\n\t\t\t\t\t\tonError={() => setImageError(true)}\n\t\t\t\t\t/>\n\t\t\t\t) : (\n\t\t\t\t\t<div className=\"flex h-full w-full flex-col items-center justify-center gap-2\">\n\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\ticon={fileIconName}\n\t\t\t\t\t\t\tclassName=\"text-muted-foreground size-12\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t{extension && (\n\t\t\t\t\t\t\t<span className=\"bg-muted text-muted-foreground rounded px-2 py-0.5 text-xs font-medium\">\n\t\t\t\t\t\t\t\t{extension}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\n\t\t\t\t{/* Loading overlay */}\n\t\t\t\t{loading && (\n\t\t\t\t\t<div className=\"bg-background/80 absolute inset-0 flex flex-col items-center justify-center gap-2\">\n\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\ticon=\"ph:spinner-gap\"\n\t\t\t\t\t\t\tclassName=\"text-muted-foreground size-8 animate-spin\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t{typeof progress === \"number\" && (\n\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t<span className=\"text-muted-foreground text-sm font-medium\">\n\t\t\t\t\t\t\t\t\t{progress}%\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t<div className=\"bg-muted h-1.5 w-24 overflow-hidden rounded-full\">\n\t\t\t\t\t\t\t\t\t<div\n\t\t\t\t\t\t\t\t\t\tclassName=\"bg-primary h-full rounded-full transition-all duration-300\"\n\t\t\t\t\t\t\t\t\t\tstyle={{ width: `${progress}%` }}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\n\t\t\t\t{/* Remove button (top right) */}\n\t\t\t\t{!loading && !disabled && onRemove && (\n\t\t\t\t\t<Button\n\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\tvariant=\"secondary\"\n\t\t\t\t\t\tsize=\"icon-xs\"\n\t\t\t\t\t\tclassName=\"absolute right-2 top-2 opacity-0 transition-opacity group-hover:opacity-100\"\n\t\t\t\t\t\tonClick={(e) => {\n\t\t\t\t\t\t\te.stopPropagation();\n\t\t\t\t\t\t\tonRemove();\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<Icon icon=\"ph:x-bold\" />\n\t\t\t\t\t</Button>\n\t\t\t\t)}\n\t\t\t</div>\n\n\t\t\t{/* File info footer */}\n\t\t\t<div className=\"flex items-center gap-2 border-t p-2\">\n\t\t\t\t<div className=\"min-w-0 flex-1\">\n\t\t\t\t\t<p className=\"truncate text-sm font-medium\" title={filename}>\n\t\t\t\t\t\t{filename}\n\t\t\t\t\t</p>\n\t\t\t\t\t<p className=\"text-muted-foreground text-xs\">\n\t\t\t\t\t\t{formatFileSize(size)}\n\t\t\t\t\t\t{mimeType && ` • ${mimeType.split(\"/\")[1]?.toUpperCase()}`}\n\t\t\t\t\t</p>\n\t\t\t\t</div>\n\n\t\t\t\t{/* Action buttons */}\n\t\t\t\t{!loading && !disabled && (href || onEdit) && (\n\t\t\t\t\t<div className=\"flex items-center gap-1\">\n\t\t\t\t\t\t{href && (\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t\t\tsize=\"icon-sm\"\n\t\t\t\t\t\t\t\tnativeButton={false}\n\t\t\t\t\t\t\t\trender={\n\t\t\t\t\t\t\t\t\t// biome-ignore lint/a11y/useAnchorContent: TODO: improve accessibility\n\t\t\t\t\t\t\t\t\t<a href={href} onClick={(e) => e.stopPropagation()} />\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Icon icon=\"ph:arrow-square-out-bold\" />\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t{onEdit && (\n\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\t\t\tsize=\"icon-sm\"\n\t\t\t\t\t\t\t\tonClick={(e) => {\n\t\t\t\t\t\t\t\t\te.stopPropagation();\n\t\t\t\t\t\t\t\t\tonEdit();\n\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Icon icon=\"ph:pencil-bold\" />\n\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t)}\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n"],"mappings":"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"}

package/dist/client/components/primitives/checkbox-input.mjs

@@ -0,0 +1,33 @@
+"use client";
+
+import { Checkbox } from "../ui/checkbox.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/client/components/primitives/checkbox-input.tsx
+/**
+* Checkbox Input Primitive
+*
+* A single checkbox with value/onChange pattern.
+*
+* @example
+* ```tsx
+* <CheckboxInput
+*   value={isAccepted}
+*   onChange={setIsAccepted}
+* />
+* ```
+*/
+function CheckboxInput({ value, onChange, disabled, className, id, "aria-invalid": ariaInvalid }) {
+	return /* @__PURE__ */ jsx(Checkbox, {
+		id,
+		checked: value,
+		onCheckedChange: (checked) => onChange(checked === true),
+		disabled,
+		"aria-invalid": ariaInvalid,
+		className
+	});
+}
+
+//#endregion
+export { CheckboxInput };
+//# sourceMappingURL=checkbox-input.mjs.map

package/dist/client/components/primitives/checkbox-input.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-input.mjs","names":[],"sources":["../../../../src/client/components/primitives/checkbox-input.tsx"],"sourcesContent":["\"use client\";\n\nimport { useResolveText } from \"../../i18n/hooks\";\nimport { cn } from \"../../lib/utils\";\nimport { Checkbox } from \"../ui/checkbox\";\nimport type {\n  CheckboxGroupProps,\n  CheckboxInputProps,\n  RadioGroupProps,\n} from \"./types\";\n\n/**\n * Checkbox Input Primitive\n *\n * A single checkbox with value/onChange pattern.\n *\n * @example\n * ```tsx\n * <CheckboxInput\n *   value={isAccepted}\n *   onChange={setIsAccepted}\n * />\n * ```\n */\nexport function CheckboxInput({\n  value,\n  onChange,\n  disabled,\n  className,\n  id,\n  \"aria-invalid\": ariaInvalid,\n}: CheckboxInputProps) {\n  return (\n    <Checkbox\n      id={id}\n      checked={value}\n      onCheckedChange={(checked) => onChange(checked === true)}\n      disabled={disabled}\n      aria-invalid={ariaInvalid}\n      className={className}\n    />\n  );\n}\n\n/**\n * Checkbox Group Primitive\n *\n * A group of checkboxes for multi-selection.\n * Returns an array of selected values.\n *\n * @example\n * ```tsx\n * <CheckboxGroup\n *   value={selectedCategories}\n *   onChange={setSelectedCategories}\n *   options={[\n *     { value: \"news\", label: \"News\" },\n *     { value: \"blog\", label: \"Blog\" },\n *     { value: \"tutorial\", label: \"Tutorial\" },\n *   ]}\n *   orientation=\"vertical\"\n * />\n * ```\n */\nexport function CheckboxGroup<TValue extends string = string>({\n  value,\n  onChange,\n  options,\n  orientation = \"vertical\",\n  disabled,\n  className,\n  id,\n  \"aria-invalid\": ariaInvalid,\n}: CheckboxGroupProps<TValue>) {\n  const resolveText = useResolveText();\n  const handleChange = (optionValue: TValue, checked: boolean) => {\n    if (checked) {\n      onChange([...value, optionValue]);\n    } else {\n      onChange(value.filter((v) => v !== optionValue));\n    }\n  };\n\n  return (\n    <div\n      id={id}\n      role=\"group\"\n      aria-invalid={ariaInvalid}\n      className={cn(\n        \"flex gap-3\",\n        orientation === \"vertical\" ? \"flex-col\" : \"flex-row flex-wrap\",\n        className,\n      )}\n    >\n      {options.map((option) => {\n        const optionId = `${id}-${String(option.value)}`;\n        return (\n          <div\n            key={String(option.value)}\n            className={cn(\n              \"flex items-center gap-2\",\n              option.disabled || disabled\n                ? \"opacity-50 cursor-not-allowed\"\n                : \"cursor-pointer\",\n            )}\n          >\n            <CheckboxInput\n              id={optionId}\n              value={value.includes(option.value)}\n              onChange={(checked) => handleChange(option.value, checked)}\n              disabled={option.disabled || disabled}\n            />\n            <label htmlFor={optionId} className=\"text-sm cursor-pointer\">\n              {resolveText(option.label)}\n            </label>\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n\n/**\n * Radio Group Primitive\n *\n * A group of radio buttons for single selection.\n * Returns the selected value or null.\n *\n * @example\n * ```tsx\n * <RadioGroup\n *   value={selectedPriority}\n *   onChange={setSelectedPriority}\n *   options={[\n *     { value: \"low\", label: \"Low\" },\n *     { value: \"medium\", label: \"Medium\" },\n *     { value: \"high\", label: \"High\" },\n *   ]}\n * />\n * ```\n */\nexport function RadioGroup<TValue extends string = string>({\n  value,\n  onChange,\n  options,\n  orientation = \"vertical\",\n  disabled,\n  className,\n  id,\n  \"aria-invalid\": ariaInvalid,\n}: RadioGroupProps<TValue>) {\n  const resolveText = useResolveText();\n  return (\n    <div\n      id={id}\n      role=\"radiogroup\"\n      aria-invalid={ariaInvalid}\n      className={cn(\n        \"flex gap-3\",\n        orientation === \"vertical\" ? \"flex-col\" : \"flex-row flex-wrap\",\n        className,\n      )}\n    >\n      {options.map((option) => {\n        const optionId = `${id}-${String(option.value)}`;\n        return (\n          <div\n            key={String(option.value)}\n            className={cn(\n              \"flex items-center gap-2\",\n              option.disabled || disabled\n                ? \"opacity-50 cursor-not-allowed\"\n                : \"cursor-pointer\",\n            )}\n          >\n            <input\n              type=\"radio\"\n              id={optionId}\n              name={id}\n              checked={value === option.value}\n              onChange={() => onChange(option.value)}\n              disabled={option.disabled || disabled}\n              className={cn(\n                \"size-4 shrink-0 accent-primary\",\n                \"disabled:cursor-not-allowed disabled:opacity-50\",\n              )}\n            />\n            <label htmlFor={optionId} className=\"text-sm cursor-pointer\">\n              {resolveText(option.label)}\n            </label>\n          </div>\n        );\n      })}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAwBA,SAAgB,cAAc,EAC5B,OACA,UACA,UACA,WACA,IACA,gBAAgB,eACK;AACrB,QACE,oBAAC;EACK;EACJ,SAAS;EACT,kBAAkB,YAAY,SAAS,YAAY,KAAK;EAC9C;EACV,gBAAc;EACH;GACX"}