@pixpilot/shadcn 0.1.7 → 0.1.8

package/dist/file-upload-DPXO1W1r.js

@@ -0,0 +1,906 @@
+import { t as cn } from "./utils-CeuVg6RA.js";
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+import { FileArchiveIcon, FileAudioIcon, FileCodeIcon, FileCogIcon, FileIcon, FileTextIcon, FileVideoIcon } from "lucide-react";
+import { useDirection } from "@radix-ui/react-direction";
+
+//#region src/components/ui/file-upload.tsx
+const ROOT_NAME = "FileUpload";
+const DROPZONE_NAME = "FileUploadDropzone";
+const TRIGGER_NAME = "FileUploadTrigger";
+const LIST_NAME = "FileUploadList";
+const ITEM_NAME = "FileUploadItem";
+const ITEM_PREVIEW_NAME = "FileUploadItemPreview";
+const ITEM_METADATA_NAME = "FileUploadItemMetadata";
+const ITEM_PROGRESS_NAME = "FileUploadItemProgress";
+const ITEM_DELETE_NAME = "FileUploadItemDelete";
+const CLEAR_NAME = "FileUploadClear";
+function useLazyRef(fn) {
+	const ref = React.useRef(null);
+	if (ref.current === null) ref.current = fn();
+	return ref;
+}
+function createStore(listeners, files, urlCache, invalid, onValueChange) {
+	let state = {
+		files,
+		dragOver: false,
+		invalid
+	};
+	function reducer(state$1, action) {
+		switch (action.type) {
+			case "ADD_FILES":
+				for (const file of action.files) files.set(file, {
+					file,
+					progress: 0,
+					status: "idle"
+				});
+				if (onValueChange) onValueChange(Array.from(files.values()).map((fileState) => fileState.file));
+				return {
+					...state$1,
+					files
+				};
+			case "SET_FILES": {
+				const newFileSet = new Set(action.files);
+				for (const existingFile of files.keys()) if (!newFileSet.has(existingFile)) files.delete(existingFile);
+				for (const file of action.files) if (!files.get(file)) files.set(file, {
+					file,
+					progress: 0,
+					status: "idle"
+				});
+				return {
+					...state$1,
+					files
+				};
+			}
+			case "SET_PROGRESS": {
+				const fileState = files.get(action.file);
+				if (fileState) files.set(action.file, {
+					...fileState,
+					progress: action.progress,
+					status: "uploading"
+				});
+				return {
+					...state$1,
+					files
+				};
+			}
+			case "SET_SUCCESS": {
+				const fileState = files.get(action.file);
+				if (fileState) files.set(action.file, {
+					...fileState,
+					progress: 100,
+					status: "success"
+				});
+				return {
+					...state$1,
+					files
+				};
+			}
+			case "SET_ERROR": {
+				const fileState = files.get(action.file);
+				if (fileState) files.set(action.file, {
+					...fileState,
+					error: action.error,
+					status: "error"
+				});
+				return {
+					...state$1,
+					files
+				};
+			}
+			case "REMOVE_FILE":
+				if (urlCache) {
+					const cachedUrl = urlCache.get(action.file);
+					if (cachedUrl) {
+						URL.revokeObjectURL(cachedUrl);
+						urlCache.delete(action.file);
+					}
+				}
+				files.delete(action.file);
+				if (onValueChange) onValueChange(Array.from(files.values()).map((fileState) => fileState.file));
+				return {
+					...state$1,
+					files
+				};
+			case "SET_DRAG_OVER": return {
+				...state$1,
+				dragOver: action.dragOver
+			};
+			case "SET_INVALID": return {
+				...state$1,
+				invalid: action.invalid
+			};
+			case "CLEAR":
+				if (urlCache) for (const file of files.keys()) {
+					const cachedUrl = urlCache.get(file);
+					if (cachedUrl) {
+						URL.revokeObjectURL(cachedUrl);
+						urlCache.delete(file);
+					}
+				}
+				files.clear();
+				if (onValueChange) onValueChange([]);
+				return {
+					...state$1,
+					files,
+					invalid: false
+				};
+			default: return state$1;
+		}
+	}
+	function getState() {
+		return state;
+	}
+	function dispatch(action) {
+		state = reducer(state, action);
+		for (const listener of listeners) listener();
+	}
+	function subscribe(listener) {
+		listeners.add(listener);
+		return () => listeners.delete(listener);
+	}
+	return {
+		getState,
+		dispatch,
+		subscribe
+	};
+}
+const StoreContext = React.createContext(null);
+function useStoreContext(consumerName) {
+	const context = React.use(StoreContext);
+	if (!context) throw new Error(`\`${consumerName}\` must be used within \`${ROOT_NAME}\``);
+	return context;
+}
+function useStore(selector) {
+	const store = useStoreContext("useStore");
+	const lastValueRef = useLazyRef(() => null);
+	const getSnapshot = React.useCallback(() => {
+		const state = store.getState();
+		const prevValue = lastValueRef.current;
+		if (prevValue && prevValue.state === state) return prevValue.value;
+		const nextValue = selector(state);
+		lastValueRef.current = {
+			value: nextValue,
+			state
+		};
+		return nextValue;
+	}, [
+		store,
+		selector,
+		lastValueRef
+	]);
+	return React.useSyncExternalStore(store.subscribe, getSnapshot, getSnapshot);
+}
+const FileUploadContext = React.createContext(null);
+function useFileUploadContext(consumerName) {
+	const context = React.use(FileUploadContext);
+	if (!context) throw new Error(`\`${consumerName}\` must be used within \`${ROOT_NAME}\``);
+	return context;
+}
+function FileUploadRoot(props) {
+	const { value, defaultValue, onValueChange, onAccept, onFileAccept, onFileReject, onFilesReject, onFileValidate, onUpload, accept, maxFiles, maxSize, dir: dirProp, label, name, asChild, disabled = false, invalid = false, multiple = false, required = false, children, className, ...rootProps } = props;
+	const inputId = React.useId();
+	const dropzoneId = React.useId();
+	const listId = React.useId();
+	const labelId = React.useId();
+	const dir = useDirection(dirProp);
+	const listeners = useLazyRef(() => /* @__PURE__ */ new Set()).current;
+	const files = useLazyRef(() => /* @__PURE__ */ new Map()).current;
+	const urlCache = useLazyRef(() => /* @__PURE__ */ new WeakMap()).current;
+	const inputRef = React.useRef(null);
+	const isControlled = value !== void 0;
+	const store = React.useMemo(() => createStore(listeners, files, urlCache, invalid, onValueChange), [
+		listeners,
+		files,
+		invalid,
+		onValueChange,
+		urlCache
+	]);
+	const acceptTypes = React.useMemo(() => accept?.split(",").map((t) => t.trim()) ?? null, [accept]);
+	const onProgress = useLazyRef(() => {
+		let frame = 0;
+		return (file, progress) => {
+			if (frame) return;
+			frame = requestAnimationFrame(() => {
+				frame = 0;
+				store.dispatch({
+					type: "SET_PROGRESS",
+					file,
+					progress: Math.min(Math.max(0, progress), 100)
+				});
+			});
+		};
+	}).current;
+	React.useEffect(() => {
+		if (isControlled) store.dispatch({
+			type: "SET_FILES",
+			files: value
+		});
+		else if (defaultValue && defaultValue.length > 0 && !store.getState().files.size) store.dispatch({
+			type: "SET_FILES",
+			files: defaultValue
+		});
+	}, [
+		value,
+		defaultValue,
+		isControlled,
+		store
+	]);
+	React.useEffect(() => {
+		return () => {
+			for (const file of files.keys()) {
+				const cachedUrl = urlCache.get(file);
+				if (cachedUrl) URL.revokeObjectURL(cachedUrl);
+			}
+		};
+	}, [files, urlCache]);
+	const onFilesUpload = React.useCallback(async (files$1) => {
+		try {
+			for (const file of files$1) store.dispatch({
+				type: "SET_PROGRESS",
+				file,
+				progress: 0
+			});
+			if (onUpload) await onUpload(files$1, {
+				onProgress,
+				onSuccess: (file) => {
+					store.dispatch({
+						type: "SET_SUCCESS",
+						file
+					});
+				},
+				onError: (file, error) => {
+					store.dispatch({
+						type: "SET_ERROR",
+						file,
+						error: error.message ?? "Upload failed"
+					});
+				}
+			});
+			else for (const file of files$1) store.dispatch({
+				type: "SET_SUCCESS",
+				file
+			});
+		} catch (error) {
+			const errorMessage = error instanceof Error ? error.message : "Upload failed";
+			for (const file of files$1) store.dispatch({
+				type: "SET_ERROR",
+				file,
+				error: errorMessage
+			});
+		}
+	}, [
+		store,
+		onUpload,
+		onProgress
+	]);
+	const onFilesChange = React.useCallback((originalFiles) => {
+		if (disabled) return;
+		let filesToProcess = [...originalFiles];
+		let invalid$1 = false;
+		const allRejectedFiles = [];
+		if (maxFiles) {
+			const currentCount = store.getState().files.size;
+			const remainingSlotCount = Math.max(0, maxFiles - currentCount);
+			if (remainingSlotCount < filesToProcess.length) {
+				const rejectedFromMaxFiles = filesToProcess.slice(remainingSlotCount);
+				invalid$1 = true;
+				filesToProcess = filesToProcess.slice(0, remainingSlotCount);
+				for (const file of rejectedFromMaxFiles) {
+					let rejectionMessage = `Maximum ${maxFiles} files allowed`;
+					if (onFileValidate) {
+						const validationMessage = onFileValidate(file);
+						if (validationMessage) rejectionMessage = validationMessage;
+					}
+					onFileReject?.(file, rejectionMessage);
+					allRejectedFiles.push({
+						file,
+						message: rejectionMessage
+					});
+				}
+			}
+		}
+		const acceptedFiles = [];
+		const rejectedFiles = [];
+		for (const file of filesToProcess) {
+			let rejected = false;
+			let rejectionMessage = "";
+			if (onFileValidate) {
+				const validationMessage = onFileValidate(file);
+				if (validationMessage) {
+					rejectionMessage = validationMessage;
+					onFileReject?.(file, rejectionMessage);
+					rejected = true;
+					invalid$1 = true;
+					continue;
+				}
+			}
+			if (acceptTypes) {
+				const fileType = file.type;
+				const fileExtension = `.${file.name.split(".").pop()}`;
+				if (!acceptTypes.some((type) => type === fileType || type === fileExtension || type.includes("/*") && fileType.startsWith(type.replace("/*", "/")))) {
+					rejectionMessage = "File type not accepted";
+					onFileReject?.(file, rejectionMessage);
+					rejected = true;
+					invalid$1 = true;
+				}
+			}
+			if (maxSize && file.size > maxSize) {
+				rejectionMessage = "File too large";
+				onFileReject?.(file, rejectionMessage);
+				rejected = true;
+				invalid$1 = true;
+			}
+			if (!rejected) acceptedFiles.push(file);
+			else rejectedFiles.push({
+				file,
+				message: rejectionMessage
+			});
+		}
+		allRejectedFiles.push(...rejectedFiles);
+		if (invalid$1) {
+			store.dispatch({
+				type: "SET_INVALID",
+				invalid: invalid$1
+			});
+			setTimeout(() => {
+				store.dispatch({
+					type: "SET_INVALID",
+					invalid: false
+				});
+			}, 2e3);
+		}
+		if (allRejectedFiles.length > 0) onFilesReject?.(allRejectedFiles);
+		if (acceptedFiles.length > 0) {
+			store.dispatch({
+				type: "ADD_FILES",
+				files: acceptedFiles
+			});
+			if (isControlled && onValueChange) onValueChange([...Array.from(store.getState().files.values()).map((f) => f.file)]);
+			if (onAccept) onAccept(acceptedFiles);
+			for (const file of acceptedFiles) onFileAccept?.(file);
+			if (onUpload) requestAnimationFrame(() => {
+				onFilesUpload(acceptedFiles);
+			});
+		}
+	}, [
+		store,
+		isControlled,
+		onValueChange,
+		onAccept,
+		onFileAccept,
+		onUpload,
+		onFilesUpload,
+		maxFiles,
+		onFileValidate,
+		onFileReject,
+		onFilesReject,
+		acceptTypes,
+		maxSize,
+		disabled
+	]);
+	const onInputChange = React.useCallback((event) => {
+		onFilesChange(Array.from(event.target.files ?? []));
+		event.target.value = "";
+	}, [onFilesChange]);
+	const contextValue = React.useMemo(() => ({
+		dropzoneId,
+		inputId,
+		listId,
+		labelId,
+		dir,
+		disabled,
+		inputRef,
+		urlCache
+	}), [
+		dropzoneId,
+		inputId,
+		listId,
+		labelId,
+		dir,
+		disabled,
+		urlCache
+	]);
+	const RootPrimitive = asChild ? Slot : "div";
+	return /* @__PURE__ */ jsx(StoreContext.Provider, {
+		value: store,
+		children: /* @__PURE__ */ jsx(FileUploadContext.Provider, {
+			value: contextValue,
+			children: /* @__PURE__ */ jsxs(RootPrimitive, {
+				"data-disabled": disabled ? "" : void 0,
+				"data-slot": "file-upload",
+				dir,
+				...rootProps,
+				className: cn("relative flex flex-col gap-2", className),
+				children: [
+					children,
+					/* @__PURE__ */ jsx("input", {
+						type: "file",
+						id: inputId,
+						"aria-labelledby": labelId,
+						"aria-describedby": dropzoneId,
+						ref: inputRef,
+						tabIndex: -1,
+						accept,
+						name,
+						className: "sr-only",
+						disabled,
+						multiple,
+						required,
+						onChange: onInputChange
+					}),
+					/* @__PURE__ */ jsx("span", {
+						id: labelId,
+						className: "sr-only",
+						children: label ?? "File upload"
+					})
+				]
+			})
+		})
+	});
+}
+function FileUploadDropzone(props) {
+	const { asChild, className, onClick: onClickProp, onDragOver: onDragOverProp, onDragEnter: onDragEnterProp, onDragLeave: onDragLeaveProp, onDrop: onDropProp, onPaste: onPasteProp, onKeyDown: onKeyDownProp, ...dropzoneProps } = props;
+	const context = useFileUploadContext(DROPZONE_NAME);
+	const store = useStoreContext(DROPZONE_NAME);
+	const dragOver = useStore((state) => state.dragOver);
+	const invalid = useStore((state) => state.invalid);
+	const onClick = React.useCallback((event) => {
+		onClickProp?.(event);
+		if (event.defaultPrevented) return;
+		const { target } = event;
+		if (!(target instanceof HTMLElement && target.closest("[data-slot=\"file-upload-trigger\"]"))) context.inputRef.current?.click();
+	}, [context.inputRef, onClickProp]);
+	const onDragOver = React.useCallback((event) => {
+		onDragOverProp?.(event);
+		if (event.defaultPrevented) return;
+		event.preventDefault();
+		store.dispatch({
+			type: "SET_DRAG_OVER",
+			dragOver: true
+		});
+	}, [store, onDragOverProp]);
+	const onDragEnter = React.useCallback((event) => {
+		onDragEnterProp?.(event);
+		if (event.defaultPrevented) return;
+		event.preventDefault();
+		store.dispatch({
+			type: "SET_DRAG_OVER",
+			dragOver: true
+		});
+	}, [store, onDragEnterProp]);
+	const onDragLeave = React.useCallback((event) => {
+		onDragLeaveProp?.(event);
+		if (event.defaultPrevented) return;
+		const { relatedTarget } = event;
+		if (relatedTarget && relatedTarget instanceof Node && event.currentTarget.contains(relatedTarget)) return;
+		event.preventDefault();
+		store.dispatch({
+			type: "SET_DRAG_OVER",
+			dragOver: false
+		});
+	}, [store, onDragLeaveProp]);
+	const onDrop = React.useCallback((event) => {
+		onDropProp?.(event);
+		if (event.defaultPrevented) return;
+		event.preventDefault();
+		store.dispatch({
+			type: "SET_DRAG_OVER",
+			dragOver: false
+		});
+		const files = Array.from(event.dataTransfer.files);
+		const inputElement = context.inputRef.current;
+		if (!inputElement) return;
+		const dataTransfer = new DataTransfer();
+		for (const file of files) dataTransfer.items.add(file);
+		inputElement.files = dataTransfer.files;
+		inputElement.dispatchEvent(new Event("change", { bubbles: true }));
+	}, [
+		store,
+		context.inputRef,
+		onDropProp
+	]);
+	const onPaste = React.useCallback((event) => {
+		onPasteProp?.(event);
+		if (event.defaultPrevented) return;
+		event.preventDefault();
+		store.dispatch({
+			type: "SET_DRAG_OVER",
+			dragOver: false
+		});
+		const items = event.clipboardData?.items;
+		if (!items) return;
+		const files = [];
+		for (let i = 0; i < items.length; i++) {
+			const item = items[i];
+			if (item?.kind === "file") {
+				const file = item.getAsFile();
+				if (file) files.push(file);
+			}
+		}
+		if (files.length === 0) return;
+		const inputElement = context.inputRef.current;
+		if (!inputElement) return;
+		const dataTransfer = new DataTransfer();
+		for (const file of files) dataTransfer.items.add(file);
+		inputElement.files = dataTransfer.files;
+		inputElement.dispatchEvent(new Event("change", { bubbles: true }));
+	}, [
+		store,
+		context.inputRef,
+		onPasteProp
+	]);
+	const onKeyDown = React.useCallback((event) => {
+		onKeyDownProp?.(event);
+		if (!event.defaultPrevented && (event.key === "Enter" || event.key === " ")) {
+			event.preventDefault();
+			context.inputRef.current?.click();
+		}
+	}, [context.inputRef, onKeyDownProp]);
+	return /* @__PURE__ */ jsx(asChild ? Slot : "div", {
+		role: "region",
+		id: context.dropzoneId,
+		"aria-controls": `${context.inputId} ${context.listId}`,
+		"aria-disabled": context.disabled,
+		"aria-invalid": invalid,
+		"data-disabled": context.disabled ? "" : void 0,
+		"data-dragging": dragOver ? "" : void 0,
+		"data-invalid": invalid ? "" : void 0,
+		"data-slot": "file-upload-dropzone",
+		dir: context.dir,
+		tabIndex: context.disabled ? void 0 : 0,
+		...dropzoneProps,
+		className: cn("relative flex select-none flex-col items-center justify-center gap-2 rounded-lg border-2 border-dashed p-6 outline-none transition-colors hover:bg-accent/30 focus-visible:border-ring/50 data-disabled:pointer-events-none data-dragging:border-primary/30 data-invalid:border-destructive data-dragging:bg-accent/30 data-invalid:ring-destructive/20", className),
+		onClick,
+		onDragEnter,
+		onDragLeave,
+		onDragOver,
+		onDrop,
+		onKeyDown,
+		onPaste
+	});
+}
+function FileUploadTrigger(props) {
+	const { asChild, onClick: onClickProp, ...triggerProps } = props;
+	const context = useFileUploadContext(TRIGGER_NAME);
+	const onClick = React.useCallback((event) => {
+		onClickProp?.(event);
+		if (event.defaultPrevented) return;
+		context.inputRef.current?.click();
+	}, [context.inputRef, onClickProp]);
+	return /* @__PURE__ */ jsx(asChild ? Slot : "button", {
+		type: "button",
+		"aria-controls": context.inputId,
+		"data-disabled": context.disabled ? "" : void 0,
+		"data-slot": "file-upload-trigger",
+		...triggerProps,
+		disabled: context.disabled,
+		onClick
+	});
+}
+function FileUploadList(props) {
+	const { className, orientation = "vertical", asChild, forceMount, ...listProps } = props;
+	const context = useFileUploadContext(LIST_NAME);
+	const fileCount = useStore((state) => state.files.size);
+	const shouldRender = forceMount || fileCount > 0;
+	if (!shouldRender) return null;
+	return /* @__PURE__ */ jsx(asChild ? Slot : "div", {
+		role: "list",
+		id: context.listId,
+		"aria-orientation": orientation,
+		"data-orientation": orientation,
+		"data-slot": "file-upload-list",
+		"data-state": shouldRender ? "active" : "inactive",
+		dir: context.dir,
+		...listProps,
+		className: cn("data-[state=inactive]:fade-out-0 data-[state=active]:fade-in-0 data-[state=inactive]:slide-out-to-top-2 data-[state=active]:slide-in-from-top-2 flex flex-col gap-2 data-[state=active]:animate-in data-[state=inactive]:animate-out", orientation === "horizontal" && "flex-row overflow-x-auto p-1.5", className)
+	});
+}
+const FileUploadItemContext = React.createContext(null);
+function useFileUploadItemContext(consumerName) {
+	const context = React.use(FileUploadItemContext);
+	if (!context) throw new Error(`\`${consumerName}\` must be used within \`${ITEM_NAME}\``);
+	return context;
+}
+function FileUploadItem(props) {
+	const { value, asChild, className, ...itemProps } = props;
+	const id = React.useId();
+	const statusId = `${id}-status`;
+	const nameId = `${id}-name`;
+	const sizeId = `${id}-size`;
+	const messageId = `${id}-message`;
+	const context = useFileUploadContext(ITEM_NAME);
+	const fileState = useStore((state) => state.files.get(value));
+	const fileCount = useStore((state) => state.files.size);
+	const fileIndex = useStore((state) => {
+		return Array.from(state.files.keys()).indexOf(value) + 1;
+	});
+	const itemContext = React.useMemo(() => ({
+		id,
+		fileState,
+		nameId,
+		sizeId,
+		statusId,
+		messageId
+	}), [
+		id,
+		fileState,
+		statusId,
+		nameId,
+		sizeId,
+		messageId
+	]);
+	if (!fileState) return null;
+	const statusText = fileState.error ? `Error: ${fileState.error}` : fileState.status === "uploading" ? `Uploading: ${fileState.progress}% complete` : fileState.status === "success" ? "Upload complete" : "Ready to upload";
+	const ItemPrimitive = asChild ? Slot : "div";
+	return /* @__PURE__ */ jsx(FileUploadItemContext.Provider, {
+		value: itemContext,
+		children: /* @__PURE__ */ jsxs(ItemPrimitive, {
+			role: "listitem",
+			id,
+			"aria-setsize": fileCount,
+			"aria-posinset": fileIndex,
+			"aria-describedby": `${nameId} ${sizeId} ${statusId} ${fileState.error ? messageId : ""}`,
+			"aria-labelledby": nameId,
+			"data-slot": "file-upload-item",
+			dir: context.dir,
+			...itemProps,
+			className: cn("relative flex items-center  rounded-md border p-3", className),
+			children: [props.children, /* @__PURE__ */ jsx("span", {
+				id: statusId,
+				className: "sr-only",
+				children: statusText
+			})]
+		})
+	});
+}
+function formatBytes(bytes) {
+	if (bytes === 0) return "0 B";
+	const sizes = [
+		"B",
+		"KB",
+		"MB",
+		"GB",
+		"TB"
+	];
+	const i = Math.floor(Math.log(bytes) / Math.log(1024));
+	return `${(bytes / 1024 ** i).toFixed(i ? 1 : 0)} ${sizes[i]}`;
+}
+function getFileIcon(file) {
+	const { type } = file;
+	const extension = file.name.split(".").pop()?.toLowerCase() ?? "";
+	if (type.startsWith("video/")) return /* @__PURE__ */ jsx(FileVideoIcon, {});
+	if (type.startsWith("audio/")) return /* @__PURE__ */ jsx(FileAudioIcon, {});
+	if (type.startsWith("text/") || [
+		"txt",
+		"md",
+		"rtf",
+		"pdf"
+	].includes(extension)) return /* @__PURE__ */ jsx(FileTextIcon, {});
+	if ([
+		"html",
+		"css",
+		"js",
+		"jsx",
+		"ts",
+		"tsx",
+		"json",
+		"xml",
+		"php",
+		"py",
+		"rb",
+		"java",
+		"c",
+		"cpp",
+		"cs"
+	].includes(extension)) return /* @__PURE__ */ jsx(FileCodeIcon, {});
+	if ([
+		"zip",
+		"rar",
+		"7z",
+		"tar",
+		"gz",
+		"bz2"
+	].includes(extension)) return /* @__PURE__ */ jsx(FileArchiveIcon, {});
+	if ([
+		"exe",
+		"msi",
+		"app",
+		"apk",
+		"deb",
+		"rpm"
+	].includes(extension) || type.startsWith("application/")) return /* @__PURE__ */ jsx(FileCogIcon, {});
+	return /* @__PURE__ */ jsx(FileIcon, {});
+}
+function FileUploadItemPreview(props) {
+	const { render, asChild, children, className, ...previewProps } = props;
+	const itemContext = useFileUploadItemContext(ITEM_PREVIEW_NAME);
+	const context = useFileUploadContext(ITEM_PREVIEW_NAME);
+	const getDefaultRender = React.useCallback((file) => {
+		if (itemContext.fileState?.file.type.startsWith("image/")) {
+			let url = context.urlCache.get(file);
+			if (!url) {
+				url = URL.createObjectURL(file);
+				context.urlCache.set(file, url);
+			}
+			return /* @__PURE__ */ jsx("img", {
+				src: url,
+				alt: file.name,
+				className: "size-full object-cover"
+			});
+		}
+		return getFileIcon(file);
+	}, [itemContext.fileState?.file.type, context.urlCache]);
+	const onPreviewRender = React.useCallback(async (file) => {
+		if (render) return render(file, () => getDefaultRender(file));
+		return getDefaultRender(file);
+	}, [render, getDefaultRender]);
+	if (!itemContext.fileState) return null;
+	return /* @__PURE__ */ jsxs(asChild ? Slot : "div", {
+		"aria-labelledby": itemContext.nameId,
+		"data-slot": "file-upload-preview",
+		...previewProps,
+		className: cn("relative flex size-10 shrink-0 items-center justify-center overflow-hidden rounded border bg-accent/50 [&>svg]:size-10", className),
+		children: [onPreviewRender(itemContext.fileState.file), children]
+	});
+}
+function FileUploadItemMetadata(props) {
+	const { asChild, size = "default", children, className, ...metadataProps } = props;
+	const context = useFileUploadContext(ITEM_METADATA_NAME);
+	const itemContext = useFileUploadItemContext(ITEM_METADATA_NAME);
+	if (!itemContext.fileState) return null;
+	return /* @__PURE__ */ jsx(asChild ? Slot : "div", {
+		"data-slot": "file-upload-metadata",
+		dir: context.dir,
+		...metadataProps,
+		className: cn("flex min-w-0 flex-1 flex-col", className),
+		children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+			/* @__PURE__ */ jsx("span", {
+				id: itemContext.nameId,
+				className: cn("truncate font-medium text-sm", size === "sm" && "font-normal text-[13px] leading-snug"),
+				children: itemContext.fileState.file.name
+			}),
+			/* @__PURE__ */ jsx("span", {
+				id: itemContext.sizeId,
+				className: cn("truncate text-muted-foreground text-xs", size === "sm" && "text-[11px] leading-snug"),
+				children: formatBytes(itemContext.fileState.file.size)
+			}),
+			itemContext.fileState.error && /* @__PURE__ */ jsx("span", {
+				id: itemContext.messageId,
+				className: "text-destructive text-xs",
+				children: itemContext.fileState.error
+			})
+		] })
+	});
+}
+function FileUploadItemProgress(props) {
+	const { variant = "linear", size = 40, asChild, forceMount, className, ...progressProps } = props;
+	const itemContext = useFileUploadItemContext(ITEM_PROGRESS_NAME);
+	if (!itemContext.fileState) return null;
+	if (!(forceMount || itemContext.fileState.progress !== 100)) return null;
+	const ItemProgressPrimitive = asChild ? Slot : "div";
+	switch (variant) {
+		case "circular": {
+			const circumference = 2 * Math.PI * ((size - 4) / 2);
+			const strokeDashoffset = circumference - itemContext.fileState.progress / 100 * circumference;
+			return /* @__PURE__ */ jsx(ItemProgressPrimitive, {
+				role: "progressbar",
+				"aria-valuemin": 0,
+				"aria-valuemax": 100,
+				"aria-valuenow": itemContext.fileState.progress,
+				"aria-valuetext": `${itemContext.fileState.progress}%`,
+				"aria-labelledby": itemContext.nameId,
+				"data-slot": "file-upload-progress",
+				...progressProps,
+				className: cn("-translate-x-1/2 -translate-y-1/2 absolute top-1/2 left-1/2", className),
+				children: /* @__PURE__ */ jsxs("svg", {
+					className: "-rotate-90 transform",
+					width: size,
+					height: size,
+					viewBox: `0 0 ${size} ${size}`,
+					fill: "none",
+					stroke: "currentColor",
+					children: [/* @__PURE__ */ jsx("circle", {
+						className: "text-primary/20",
+						strokeWidth: "2",
+						cx: size / 2,
+						cy: size / 2,
+						r: (size - 4) / 2
+					}), /* @__PURE__ */ jsx("circle", {
+						className: "text-primary transition-[stroke-dashoffset] duration-300 ease-linear",
+						strokeWidth: "2",
+						strokeLinecap: "round",
+						strokeDasharray: circumference,
+						strokeDashoffset,
+						cx: size / 2,
+						cy: size / 2,
+						r: (size - 4) / 2
+					})]
+				})
+			});
+		}
+		case "fill": {
+			const progressPercentage = itemContext.fileState.progress;
+			const topInset = 100 - progressPercentage;
+			return /* @__PURE__ */ jsx(ItemProgressPrimitive, {
+				role: "progressbar",
+				"aria-valuemin": 0,
+				"aria-valuemax": 100,
+				"aria-valuenow": progressPercentage,
+				"aria-valuetext": `${progressPercentage}%`,
+				"aria-labelledby": itemContext.nameId,
+				"data-slot": "file-upload-progress",
+				...progressProps,
+				className: cn("absolute inset-0 bg-primary/50 transition-[clip-path] duration-300 ease-linear", className),
+				style: { clipPath: `inset(${topInset}% 0% 0% 0%)` }
+			});
+		}
+		default: return /* @__PURE__ */ jsx(ItemProgressPrimitive, {
+			role: "progressbar",
+			"aria-valuemin": 0,
+			"aria-valuemax": 100,
+			"aria-valuenow": itemContext.fileState.progress,
+			"aria-valuetext": `${itemContext.fileState.progress}%`,
+			"aria-labelledby": itemContext.nameId,
+			"data-slot": "file-upload-progress",
+			...progressProps,
+			className: cn("relative h-1.5 w-full overflow-hidden rounded-full bg-primary/20", className),
+			children: /* @__PURE__ */ jsx("div", {
+				className: "h-full w-full flex-1 bg-primary transition-transform duration-300 ease-linear",
+				style: { transform: `translateX(-${100 - itemContext.fileState.progress}%)` }
+			})
+		});
+	}
+}
+function FileUploadItemDelete(props) {
+	const { asChild, onClick: onClickProp, ...deleteProps } = props;
+	const store = useStoreContext(ITEM_DELETE_NAME);
+	const itemContext = useFileUploadItemContext(ITEM_DELETE_NAME);
+	const onClick = React.useCallback((event) => {
+		onClickProp?.(event);
+		if (!itemContext.fileState || event.defaultPrevented) return;
+		store.dispatch({
+			type: "REMOVE_FILE",
+			file: itemContext.fileState.file
+		});
+	}, [
+		store,
+		itemContext.fileState,
+		onClickProp
+	]);
+	if (!itemContext.fileState) return null;
+	return /* @__PURE__ */ jsx(asChild ? Slot : "button", {
+		type: "button",
+		"aria-controls": itemContext.id,
+		"aria-describedby": itemContext.nameId,
+		"data-slot": "file-upload-item-delete",
+		...deleteProps,
+		onClick
+	});
+}
+function FileUploadClear(props) {
+	const { asChild, forceMount, disabled, onClick: onClickProp, ...clearProps } = props;
+	const context = useFileUploadContext(CLEAR_NAME);
+	const store = useStoreContext(CLEAR_NAME);
+	const fileCount = useStore((state) => state.files.size);
+	const isDisabled = disabled || context.disabled;
+	const onClick = React.useCallback((event) => {
+		onClickProp?.(event);
+		if (event.defaultPrevented) return;
+		store.dispatch({ type: "CLEAR" });
+	}, [store, onClickProp]);
+	if (!(forceMount || fileCount > 0)) return null;
+	return /* @__PURE__ */ jsx(asChild ? Slot : "button", {
+		type: "button",
+		"aria-controls": context.listId,
+		"data-slot": "file-upload-clear",
+		"data-disabled": isDisabled ? "" : void 0,
+		...clearProps,
+		disabled: isDisabled,
+		onClick
+	});
+}
+
+//#endregion
+export { FileUploadItemMetadata as a, FileUploadList as c, useStore as d, FileUploadItemDelete as i, FileUploadRoot as l, FileUploadDropzone as n, FileUploadItemPreview as o, FileUploadItem as r, FileUploadItemProgress as s, FileUploadClear as t, FileUploadTrigger as u };