@salesforce/webapp-template-feature-react-file-upload-experimental 1.55.0

package/dist/force-app/main/default/webapplications/feature-react-file-upload/src/components/FileUpload.tsx

@@ -0,0 +1,83 @@
+import { FileUploadDropZone } from "./FileUploadDropZone";
+import { FileUploadDialog } from "./FileUploadDialog";
+import { LABELS } from "../utils/labels";
+import { useFileUpload } from "../hooks/useFileUpload";
+import { useFileUploadDialog } from "../hooks/useFileUploadDialog";
+
+export interface FileUploadProps {
+	/** MIME types to accept (e.g. image/*). Omit for all files. */
+	accept?: string;
+	/** Whether to allow multiple file selection. Default: false */
+	multiple?: boolean;
+	/** Record Id for FirstPublishLocationId (e.g. Account, Opportunity). When provided, files are linked to this record. Otherwise, current user Id is used. */
+	recordId?: string;
+	/** Called when uploads complete. Receives array of successfully uploaded files with name, size, and contentVersionId. */
+	onUploadComplete?: (files: { name: string; size: number; contentVersionId?: string }[]) => void;
+	onUploadError?: (file: File, error: string) => void;
+	/** Optional CSS class for the wrapper div */
+	className?: string;
+}
+
+/**
+ * File upload component. Renders a drop zone for selecting files, a modal dialog
+ * showing upload progress, and a list of successfully uploaded files. Supports
+ * click-to-select and drag-and-drop. Composes FileUploadDropZone and FileUploadDialog.
+ */
+export function FileUpload({
+	accept,
+	multiple = false,
+	recordId,
+	onUploadComplete,
+	onUploadError,
+	className = "",
+}: FileUploadProps) {
+	const { fileItems, getInputProps, getDropZoneProps, isDragging, reset, cancelFile, allDone } =
+		useFileUpload({
+			accept,
+			multiple,
+			recordId,
+			onUploadComplete,
+			onUploadError,
+		});
+
+	const { dialogOpen, uploadedFileNames, handleOpenChange } = useFileUploadDialog({
+		fileItems,
+		reset,
+	});
+
+	const inputProps = getInputProps();
+	const dropZoneProps = getDropZoneProps();
+
+	return (
+		<div className={["w-fit", className].filter(Boolean).join(" ")}>
+			<div className="flex w-fit flex-col gap-1">
+				<FileUploadDropZone
+					inputProps={inputProps}
+					dropZoneProps={dropZoneProps}
+					isDragging={isDragging}
+				/>
+
+				<FileUploadDialog
+					open={dialogOpen}
+					onOpenChange={handleOpenChange}
+					fileItems={fileItems}
+					onCancelFile={cancelFile}
+					allDone={allDone}
+				/>
+
+				{uploadedFileNames.length > 0 && (
+					<ul
+						className="mt-2 list-inside list-disc space-y-1 text-sm text-gray-700"
+						aria-label={LABELS.uploadedFiles}
+					>
+						{uploadedFileNames.map((name, i) => (
+							<li key={`${name}-${i}`}>{name}</li>
+						))}
+					</ul>
+				)}
+			</div>
+		</div>
+	);
+}
+
+export default FileUpload;

package/dist/force-app/main/default/webapplications/feature-react-file-upload/src/components/FileUploadDialog.tsx

@@ -0,0 +1,79 @@
+import {
+	Button,
+	Dialog,
+	DialogClose,
+	DialogContent,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+} from "@/components/ui";
+import { FileUploadFileItem } from "./FileUploadFileItem";
+import { formatUploadSummary } from "../utils/fileUploadUtils";
+import { LABELS } from "../utils/labels";
+import type { FileUploadItem } from "../types/fileUpload";
+
+export interface FileUploadDialogProps {
+	/** Whether the dialog is open */
+	open: boolean;
+	/** Called when the dialog open state changes (e.g. close button, Done) */
+	onOpenChange: (open: boolean) => void;
+	/** File items with upload state and progress */
+	fileItems: FileUploadItem[];
+	/** Called when the user cancels an in-progress upload */
+	onCancelFile: (fileName: string) => void;
+	/** Whether all uploads are complete (success, error, or cancelled) */
+	allDone: boolean;
+}
+
+/**
+ * Modal dialog showing upload progress. Lists each file with FileUploadFileItem,
+ * displays upload summary (e.g. "1 of 2 files uploaded"), and a Done button
+ * disabled until all uploads complete.
+ */
+export function FileUploadDialog({
+	open,
+	onOpenChange,
+	fileItems,
+	onCancelFile,
+	allDone,
+}: FileUploadDialogProps) {
+	const successCount = fileItems.filter((i) => i.state === "success").length;
+	const summaryText = formatUploadSummary(successCount, fileItems.length);
+
+	return (
+		<Dialog open={open} onOpenChange={onOpenChange}>
+			<DialogContent showCloseButton>
+				<DialogHeader>
+					<DialogTitle className="text-blue-900">{LABELS.uploadFilesDialogTitle}</DialogTitle>
+				</DialogHeader>
+
+				<ul className="max-h-60 min-w-0 space-y-2 overflow-y-auto" aria-label={LABELS.uploadStatus}>
+					{fileItems.map((item, i) => (
+						<FileUploadFileItem
+							key={`${item.file.name}-${i}`}
+							item={item}
+							onCancel={onCancelFile}
+						/>
+					))}
+				</ul>
+
+				<DialogFooter className="grid min-w-0 grid-cols-[auto_minmax(0,4fr)_minmax(0,5fr)] items-center px-2 pb-1 pt-2">
+					<div aria-hidden />
+					<p className="min-w-0 text-sm font-medium text-blue-900">{summaryText}</p>
+					<div className="flex min-w-0 justify-end">
+						<DialogClose asChild>
+							<Button
+								variant="outline"
+								className="flex-shrink-0"
+								disabled={!allDone}
+								aria-label={LABELS.doneButton}
+							>
+								{LABELS.done}
+							</Button>
+						</DialogClose>
+					</div>
+				</DialogFooter>
+			</DialogContent>
+		</Dialog>
+	);
+}

package/dist/force-app/main/default/webapplications/feature-react-file-upload/src/components/FileUploadDropZone.tsx

@@ -0,0 +1,82 @@
+import { UtilityIcon } from "./FileUploadIcons";
+import { LABELS } from "../utils/labels";
+
+export interface FileUploadDropZoneProps {
+	/** Props for the hidden file input (ref, type, accept, multiple, onChange) */
+	inputProps: {
+		ref: React.RefObject<HTMLInputElement | null>;
+		type: "file";
+		accept?: string;
+		multiple: boolean;
+		onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+	};
+	/** Props for the drop zone (onClick, onDragOver, onDragLeave, onDrop, onKeyDown) */
+	dropZoneProps: {
+		onClick: () => void;
+		onDragOver: (e: React.DragEvent) => void;
+		onDragLeave: (e: React.DragEvent) => void;
+		onDrop: (e: React.DragEvent) => void;
+		onKeyDown: (e: React.KeyboardEvent) => void;
+	};
+	/** Whether the user is currently dragging over the drop zone */
+	isDragging: boolean;
+}
+
+const DROP_ZONE_BASE_CLASSES =
+	"mb-2 flex cursor-pointer flex-wrap items-center gap-3 rounded-[4px] border border-dashed p-1 transition-colors";
+const DROP_ZONE_DRAGGING_CLASSES = "border-blue-500 bg-blue-50";
+const DROP_ZONE_IDLE_CLASSES = "hover:bg-gray-50";
+const BORDER_COLOR_IDLE = "rgb(116, 116, 116)";
+
+/**
+ * Drop zone for file selection. Renders a dashed border area with "Upload Files"
+ * button and "Or drop files" / "Drop files here" text. Accepts click and drag-and-drop.
+ * Uses a hidden file input; props come from useFileUpload.
+ */
+export function FileUploadDropZone({
+	inputProps,
+	dropZoneProps,
+	isDragging,
+}: FileUploadDropZoneProps) {
+	const dropZoneClassName = [
+		DROP_ZONE_BASE_CLASSES,
+		isDragging ? DROP_ZONE_DRAGGING_CLASSES : DROP_ZONE_IDLE_CLASSES,
+	].join(" ");
+
+	return (
+		<>
+			<p className="mb-1 text-sm font-semibold text-gray-900">{LABELS.attach}</p>
+			<div
+				role="button"
+				tabIndex={0}
+				onClick={dropZoneProps.onClick}
+				onDragOver={dropZoneProps.onDragOver}
+				onDragLeave={dropZoneProps.onDragLeave}
+				onDrop={dropZoneProps.onDrop}
+				onKeyDown={dropZoneProps.onKeyDown}
+				className={dropZoneClassName}
+				style={!isDragging ? { borderColor: BORDER_COLOR_IDLE } : undefined}
+				aria-label={LABELS.dropZone}
+				data-testid="file-upload-drop-zone"
+			>
+				<input
+					id="file-upload-input-id"
+					ref={inputProps.ref}
+					type="file"
+					accept={inputProps.accept}
+					multiple={inputProps.multiple}
+					onChange={inputProps.onChange}
+					className="sr-only"
+					aria-hidden
+				/>
+				<span className="inline-flex items-center gap-2 rounded-[4px] border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-blue-600 hover:bg-gray-50">
+					<UtilityIcon id="upload" size="sm" />
+					{LABELS.uploadFiles}
+				</span>
+				<span className="text-sm text-gray-900">
+					{isDragging ? LABELS.dropFilesHere : LABELS.orDropFiles}
+				</span>
+			</div>
+		</>
+	);
+}

package/dist/force-app/main/default/webapplications/feature-react-file-upload/src/components/FileUploadFileItem.tsx

@@ -0,0 +1,99 @@
+import { Button } from "@/components/ui";
+import { FileTypeIcon, UtilityIcon } from "./FileUploadIcons";
+import {
+	formatFileSize,
+	getFileExtension,
+	getProgressWidth,
+	isUploading,
+} from "../utils/fileUploadUtils";
+import { LABELS } from "../utils/labels";
+import type { FileUploadItem } from "../types/fileUpload";
+
+export interface FileUploadFileItemProps {
+	/** The file item with upload state, progress, and optional error */
+	item: FileUploadItem;
+	/** Called when the user cancels an in-progress upload */
+	onCancel: (fileName: string) => void;
+}
+
+/**
+ * Renders a single file upload item with file type icon, name, size, progress bar,
+ * cancel button (when uploading), and status icon (success, error, or cancelled).
+ */
+export function FileUploadFileItem({ item, onCancel }: FileUploadFileItemProps) {
+	const extension = getFileExtension(item.file.name);
+	const progressWidth = getProgressWidth(item.state, item.progress);
+
+	return (
+		<li
+			className="grid min-w-0 grid-cols-[auto_minmax(0,4fr)_minmax(0,5fr)] items-center gap-2 rounded-lg border border-gray-200 bg-gray-100 p-2"
+			data-testid="file-upload-item"
+		>
+			<FileTypeIcon extension={extension} />
+			<div className="min-w-0 overflow-hidden">
+				<p
+					className="truncate text-sm font-medium text-gray-900"
+					title={item.file.name}
+					aria-label={LABELS.fileName(item.file.name)}
+				>
+					{item.file.name}
+				</p>
+				<p
+					className="truncate text-xs text-gray-600"
+					aria-label={LABELS.fileSize(formatFileSize(item.file.size))}
+				>
+					{formatFileSize(item.file.size)}
+				</p>
+			</div>
+			<div className="flex min-w-0 items-center gap-1.5">
+				<div
+					className="h-1.5 min-w-0 flex-1 overflow-hidden rounded-full bg-gray-200"
+					role="progressbar"
+					aria-label={LABELS.uploadProgress(item.file.name)}
+					aria-valuenow={progressWidth}
+					aria-valuemin={0}
+					aria-valuemax={100}
+				>
+					<div
+						className="h-full bg-blue-600 transition-all duration-300"
+						style={{ width: `${progressWidth}%` }}
+					/>
+				</div>
+				{isUploading(item.state) && (
+					<Button
+						type="button"
+						variant="ghost"
+						size="icon"
+						className="h-7 w-7 shrink-0 text-gray-600 hover:text-red-600"
+						onClick={() => onCancel(item.file.name)}
+						aria-label={LABELS.cancelUpload(item.file.name)}
+					>
+						<UtilityIcon id="clear" fill="rgb(116, 116, 116)" />
+					</Button>
+				)}
+				{renderStatusIcon(item.state)}
+				{item.state === "error" && item.error && <p className="sr-only">{item.error}</p>}
+			</div>
+		</li>
+	);
+}
+
+function renderStatusIcon(state: FileUploadItem["state"]): React.ReactNode {
+	if (isUploading(state)) return null;
+	if (state === "success") return <UtilityIcon id="success" fill="rgb(46, 132, 74)" />;
+	if (state === "cancelled") {
+		return (
+			<span className="shrink-0 text-xs text-gray-500" aria-label={LABELS.cancelled}>
+				{LABELS.cancelled}
+			</span>
+		);
+	}
+	return (
+		<span
+			className="inline-flex h-4 w-4 shrink-0 items-center justify-center text-red-600"
+			aria-label={LABELS.uploadFailed}
+		>
+			×
+		</span>
+	);
+}

package/dist/force-app/main/default/webapplications/feature-react-file-upload/src/components/FileUploadIcons.tsx

@@ -0,0 +1,58 @@
+import symbolsUrl from "@assets/symbols.svg?url";
+
+import utilitySvg from "@assets/utility.svg?url";
+
+const IMAGE_EXTENSIONS = new Set([
+	"jpg",
+	"jpeg",
+	"png",
+	"gif",
+	"webp",
+	"svg",
+	"bmp",
+	"ico",
+	"tiff",
+	"tif",
+]);
+
+/**
+ * Renders a file-type icon based on extension. Uses symbols.svg: "unknown" for
+ * no extension, "image" for image types, or the extension (e.g. pdf) for others.
+ */
+export function FileTypeIcon({ extension }: { extension: string }) {
+	/** Symbol ID in symbols.svg: unknown (no ext), image (image types), or extension (e.g. pdf). */
+	const ext = extension.toLowerCase();
+	const symbolId = extension === "FILE" ? "unknown" : IMAGE_EXTENSIONS.has(ext) ? "image" : ext;
+	return (
+		<span
+			className="inline-flex h-8 w-8 shrink-0 items-center justify-center"
+			aria-hidden
+			title={extension}
+		>
+			<svg className="h-full w-full" aria-hidden>
+				<use href={`${symbolsUrl}#${symbolId}`} />
+			</svg>
+		</span>
+	);
+}
+/** Symbol ID in utility.svg (e.g. clear, success, upload) */
+export interface UtilityIconProps {
+	id: string;
+	size?: "sm" | "md";
+	fill?: string;
+}
+
+/**
+ * Renders a utility icon from utility.svg by symbol id. Supports size (sm/md)
+ * and fill color. Used for clear, success, upload, etc.
+ */
+export function UtilityIcon({ id, size = "md", fill = "currentColor" }: UtilityIconProps) {
+	const sizeClass = size === "sm" ? "h-4 w-4" : "h-6 w-6";
+	return (
+		<span className={`inline-flex ${sizeClass} shrink-0 items-center justify-center`} aria-hidden>
+			<svg className="h-full w-full" fill={fill} aria-hidden>
+				<use href={`${utilitySvg}#${id}`} />
+			</svg>
+		</span>
+	);
+}

package/dist/force-app/main/default/webapplications/feature-react-file-upload/src/components/ui/alert.tsx

@@ -0,0 +1,69 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "../../lib/utils";
+
+const alertVariants = cva(
+	"grid gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4 w-full relative group/alert",
+	{
+		variants: {
+			variant: {
+				default: "bg-card text-card-foreground",
+				destructive:
+					"text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	},
+);
+
+function Alert({
+	className,
+	variant,
+	...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+	return (
+		<div
+			data-slot="alert"
+			role="alert"
+			className={cn(alertVariants({ variant }), className)}
+			{...props}
+		/>
+	);
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="alert-title"
+			className={cn(
+				"font-medium group-has-[>svg]/alert:col-start-2 [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function AlertDescription({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="alert-description"
+			className={cn(
+				"text-muted-foreground text-sm text-balance md:text-pretty [&_p:not(:last-child)]:mb-4 [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function AlertAction({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div data-slot="alert-action" className={cn("absolute top-2 right-2", className)} {...props} />
+	);
+}
+
+export { Alert, AlertTitle, AlertDescription, AlertAction };

package/dist/force-app/main/default/webapplications/feature-react-file-upload/src/components/ui/button.tsx

@@ -0,0 +1,67 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { Slot } from "radix-ui";
+
+import { cn } from "../../lib/utils";
+
+const buttonVariants = cva(
+	"focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none",
+	{
+		variants: {
+			variant: {
+				default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+				outline:
+					"border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground",
+				secondary:
+					"bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+				ghost:
+					"hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground",
+				destructive:
+					"bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30",
+				link: "text-primary underline-offset-4 hover:underline",
+			},
+			size: {
+				default:
+					"h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+				xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+				sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+				lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3",
+				icon: "size-8",
+				"icon-xs":
+					"size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+				"icon-sm":
+					"size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
+				"icon-lg": "size-9",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+			size: "default",
+		},
+	},
+);
+
+function Button({
+	className,
+	variant = "default",
+	size = "default",
+	asChild = false,
+	...props
+}: React.ComponentProps<"button"> &
+	VariantProps<typeof buttonVariants> & {
+		asChild?: boolean;
+	}) {
+	const Comp = asChild ? Slot.Root : "button";
+
+	return (
+		<Comp
+			data-slot="button"
+			data-variant={variant}
+			data-size={size}
+			className={cn(buttonVariants({ variant, size, className }))}
+			{...(props as any)}
+		/>
+	);
+}
+
+export { Button, buttonVariants };

package/dist/force-app/main/default/webapplications/feature-react-file-upload/src/components/ui/card.tsx

@@ -0,0 +1,92 @@
+import * as React from "react";
+
+import { cn } from "../../lib/utils";
+
+function Card({
+	className,
+	size = "default",
+	...props
+}: React.ComponentProps<"div"> & { size?: "default" | "sm" }) {
+	return (
+		<div
+			data-slot="card"
+			data-size={size}
+			className={cn(
+				"ring-foreground/10 bg-card text-card-foreground gap-4 overflow-hidden rounded-xl py-4 text-sm ring-1 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl group/card flex flex-col",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="card-header"
+			className={cn(
+				"gap-1 rounded-t-xl px-4 group-data-[size=sm]/card:px-3 [.border-b]:pb-4 group-data-[size=sm]/card:[.border-b]:pb-3 group/card-header @container/card-header grid auto-rows-min items-start has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto]",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="card-title"
+			className={cn(
+				"text-base leading-snug font-medium group-data-[size=sm]/card:text-sm",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="card-description"
+			className={cn("text-muted-foreground text-sm", className)}
+			{...props}
+		/>
+	);
+}
+
+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="card-action"
+			className={cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end", className)}
+			{...props}
+		/>
+	);
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="card-content"
+			className={cn("px-4 group-data-[size=sm]/card:px-3", className)}
+			{...props}
+		/>
+	);
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+	return (
+		<div
+			data-slot="card-footer"
+			className={cn(
+				"bg-muted/50 rounded-b-xl border-t p-4 group-data-[size=sm]/card:p-3 flex items-center",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent };