@deftui/react 0.0.6 → 0.1.1

package/dist/vendor/diceui/file-upload.mjs

@@ -0,0 +1,954 @@
+"use client";
+import { useDirection } from "../shadcn/direction.mjs";
+import { cn } from "cn";
+import { mergeProps } from "@base-ui/react/merge-props";
+import * as React$1 from "react";
+import { useRender } from "@base-ui/react/use-render";
+import { useRefWithInit } from "@base-ui/utils/useRefWithInit";
+import { useValueAsRef } from "@base-ui/utils/useValueAsRef";
+import { FileArchiveIcon, FileAudioIcon, FileCodeIcon, FileCogIcon, FileIcon, FileTextIcon, FileVideoIcon } from "lucide-react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+// src/vendor/diceui/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 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.type;
+	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, {});
+}
+const StoreContext = React$1.createContext(null);
+function useStoreContext(consumerName) {
+	const context = React$1.useContext(StoreContext);
+	if (!context) throw new Error(`\`${consumerName}\` must be used within \`${ROOT_NAME}\``);
+	return context;
+}
+function useStore(selector) {
+	const store = useStoreContext("useStore");
+	const lastValueRef = useRefWithInit(() => null);
+	const getSnapshot = React$1.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$1.useSyncExternalStore(store.subscribe, getSnapshot, getSnapshot);
+}
+const FileUploadContext = React$1.createContext(null);
+function useFileUploadContext(consumerName) {
+	const context = React$1.useContext(FileUploadContext);
+	if (!context) throw new Error(`\`${consumerName}\` must be used within \`${ROOT_NAME}\``);
+	return context;
+}
+function FileUpload(props) {
+	const { value, defaultValue, onValueChange, onAccept, onFileAccept, onFileReject, onFileValidate, onUpload, accept, maxFiles, maxSize, dir: dirProp, label, name, render, disabled = false, invalid = false, multiple = false, required = false, children, className, ...rootProps } = props;
+	const inputId = React$1.useId();
+	const dropzoneId = React$1.useId();
+	const listId = React$1.useId();
+	const labelId = React$1.useId();
+	const contextDir = useDirection();
+	const dir = dirProp ?? contextDir;
+	const listeners = useRefWithInit(() => /* @__PURE__ */ new Set()).current;
+	const files = useRefWithInit(() => /* @__PURE__ */ new Map()).current;
+	const urlCache = useRefWithInit(() => /* @__PURE__ */ new WeakMap()).current;
+	const inputRef = React$1.useRef(null);
+	const isControlled = value !== void 0;
+	const propsRef = useValueAsRef({
+		onValueChange,
+		onAccept,
+		onFileAccept,
+		onFileReject,
+		onFileValidate,
+		onUpload
+	});
+	const store = React$1.useMemo(() => {
+		let state = {
+			files,
+			dragOver: false,
+			invalid
+		};
+		function reducer(state, action) {
+			switch (action.type) {
+				case "ADD_FILES":
+					for (const file of action.files) files.set(file, {
+						file,
+						progress: 0,
+						status: "idle"
+					});
+					if (propsRef.current.onValueChange) {
+						const fileList = Array.from(files.values()).map((fileState) => fileState.file);
+						propsRef.current.onValueChange(fileList);
+					}
+					return {
+						...state,
+						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,
+						files
+					};
+				}
+				case "SET_PROGRESS": {
+					const fileState = files.get(action.file);
+					if (fileState) files.set(action.file, {
+						...fileState,
+						progress: action.progress,
+						status: "uploading"
+					});
+					return {
+						...state,
+						files
+					};
+				}
+				case "SET_SUCCESS": {
+					const fileState = files.get(action.file);
+					if (fileState) files.set(action.file, {
+						...fileState,
+						progress: 100,
+						status: "success"
+					});
+					return {
+						...state,
+						files
+					};
+				}
+				case "SET_ERROR": {
+					const fileState = files.get(action.file);
+					if (fileState) files.set(action.file, {
+						...fileState,
+						error: action.error,
+						status: "error"
+					});
+					return {
+						...state,
+						files
+					};
+				}
+				case "REMOVE_FILE": {
+					const cachedUrl = urlCache.get(action.file);
+					if (cachedUrl) {
+						URL.revokeObjectURL(cachedUrl);
+						urlCache.delete(action.file);
+					}
+					files.delete(action.file);
+					if (propsRef.current.onValueChange) {
+						const fileList = Array.from(files.values()).map((fileState) => fileState.file);
+						propsRef.current.onValueChange(fileList);
+					}
+					return {
+						...state,
+						files
+					};
+				}
+				case "SET_DRAG_OVER": return {
+					...state,
+					dragOver: action.dragOver
+				};
+				case "SET_INVALID": return {
+					...state,
+					invalid: action.invalid
+				};
+				case "CLEAR":
+					for (const file of files.keys()) {
+						const cachedUrl = urlCache.get(file);
+						if (cachedUrl) {
+							URL.revokeObjectURL(cachedUrl);
+							urlCache.delete(file);
+						}
+					}
+					files.clear();
+					if (propsRef.current.onValueChange) propsRef.current.onValueChange([]);
+					return {
+						...state,
+						files,
+						invalid: false
+					};
+				default: return state;
+			}
+		}
+		return {
+			getState: () => state,
+			dispatch: (action) => {
+				state = reducer(state, action);
+				for (const listener of listeners) listener();
+			},
+			subscribe: (listener) => {
+				listeners.add(listener);
+				return () => listeners.delete(listener);
+			}
+		};
+	}, [
+		listeners,
+		files,
+		invalid,
+		propsRef,
+		urlCache
+	]);
+	const acceptTypes = React$1.useMemo(() => accept?.split(",").map((t) => t.trim()) ?? null, [accept]);
+	const onProgress = useRefWithInit(() => {
+		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$1.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$1.useEffect(() => {
+		return () => {
+			for (const file of files.keys()) {
+				const cachedUrl = urlCache.get(file);
+				if (cachedUrl) URL.revokeObjectURL(cachedUrl);
+			}
+		};
+	}, [files, urlCache]);
+	const onFilesUpload = React$1.useCallback(async (files) => {
+		try {
+			for (const file of files) store.dispatch({
+				type: "SET_PROGRESS",
+				file,
+				progress: 0
+			});
+			if (propsRef.current.onUpload) await propsRef.current.onUpload(files, {
+				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) store.dispatch({
+				type: "SET_SUCCESS",
+				file
+			});
+		} catch (error) {
+			const errorMessage = error instanceof Error ? error.message : "Upload failed";
+			for (const file of files) store.dispatch({
+				type: "SET_ERROR",
+				file,
+				error: errorMessage
+			});
+		}
+	}, [
+		store,
+		propsRef,
+		onProgress
+	]);
+	const onFilesChange = React$1.useCallback((originalFiles) => {
+		if (disabled) return;
+		let filesToProcess = [...originalFiles];
+		let invalid = false;
+		if (maxFiles) {
+			const currentCount = store.getState().files.size;
+			const remainingSlotCount = Math.max(0, maxFiles - currentCount);
+			if (remainingSlotCount < filesToProcess.length) {
+				const rejectedFiles = filesToProcess.slice(remainingSlotCount);
+				invalid = true;
+				filesToProcess = filesToProcess.slice(0, remainingSlotCount);
+				for (const file of rejectedFiles) {
+					let rejectionMessage = `Maximum ${maxFiles} files allowed`;
+					if (propsRef.current.onFileValidate) {
+						const validationMessage = propsRef.current.onFileValidate(file);
+						if (validationMessage) rejectionMessage = validationMessage;
+					}
+					propsRef.current.onFileReject?.(file, rejectionMessage);
+				}
+			}
+		}
+		const acceptedFiles = [];
+		const rejectedFiles = [];
+		for (const file of filesToProcess) {
+			let rejected = false;
+			let rejectionMessage = "";
+			if (propsRef.current.onFileValidate) {
+				const validationMessage = propsRef.current.onFileValidate(file);
+				if (validationMessage) {
+					rejectionMessage = validationMessage;
+					propsRef.current.onFileReject?.(file, rejectionMessage);
+					rejected = true;
+					invalid = 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";
+					propsRef.current.onFileReject?.(file, rejectionMessage);
+					rejected = true;
+					invalid = true;
+				}
+			}
+			if (maxSize && file.size > maxSize) {
+				rejectionMessage = "File too large";
+				propsRef.current.onFileReject?.(file, rejectionMessage);
+				rejected = true;
+				invalid = true;
+			}
+			if (!rejected) acceptedFiles.push(file);
+			else rejectedFiles.push({
+				file,
+				message: rejectionMessage
+			});
+		}
+		if (invalid) {
+			store.dispatch({
+				type: "SET_INVALID",
+				invalid
+			});
+			setTimeout(() => {
+				store.dispatch({
+					type: "SET_INVALID",
+					invalid: false
+				});
+			}, 2e3);
+		}
+		if (acceptedFiles.length > 0) {
+			store.dispatch({
+				type: "ADD_FILES",
+				files: acceptedFiles
+			});
+			if (isControlled && propsRef.current.onValueChange) {
+				const currentFiles = Array.from(store.getState().files.values()).map((f) => f.file);
+				propsRef.current.onValueChange([...currentFiles]);
+			}
+			if (propsRef.current.onAccept) propsRef.current.onAccept(acceptedFiles);
+			for (const file of acceptedFiles) propsRef.current.onFileAccept?.(file);
+			if (propsRef.current.onUpload) requestAnimationFrame(() => {
+				onFilesUpload(acceptedFiles);
+			});
+		}
+	}, [
+		store,
+		isControlled,
+		propsRef,
+		onFilesUpload,
+		maxFiles,
+		acceptTypes,
+		maxSize,
+		disabled
+	]);
+	const onInputChange = React$1.useCallback((event) => {
+		const files = Array.from(event.target.files ?? []);
+		onFilesChange(files);
+		event.target.value = "";
+	}, [onFilesChange]);
+	const contextValue = React$1.useMemo(() => ({
+		dropzoneId,
+		inputId,
+		listId,
+		labelId,
+		dir,
+		disabled,
+		inputRef,
+		urlCache
+	}), [
+		dropzoneId,
+		inputId,
+		listId,
+		labelId,
+		dir,
+		disabled,
+		urlCache
+	]);
+	const element = useRender({
+		defaultTagName: "div",
+		props: mergeProps({
+			dir,
+			className: cn("relative flex flex-col gap-2", className),
+			children: /* @__PURE__ */ jsxs(Fragment, { 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("div", {
+					id: labelId,
+					className: "sr-only",
+					children: label ?? "File upload"
+				})
+			] })
+		}, rootProps),
+		render,
+		state: {
+			slot: "file-upload",
+			disabled: disabled ? "" : void 0
+		}
+	});
+	return /* @__PURE__ */ jsx(StoreContext.Provider, {
+		value: store,
+		children: /* @__PURE__ */ jsx(FileUploadContext.Provider, {
+			value: contextValue,
+			children: element
+		})
+	});
+}
+function FileUploadDropzone(props) {
+	const { render, 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 propsRef = useValueAsRef({
+		onClick: onClickProp,
+		onDragOver: onDragOverProp,
+		onDragEnter: onDragEnterProp,
+		onDragLeave: onDragLeaveProp,
+		onDrop: onDropProp,
+		onPaste: onPasteProp,
+		onKeyDown: onKeyDownProp
+	});
+	const onClick = React$1.useCallback((event) => {
+		propsRef.current.onClick?.(event);
+		if (event.defaultPrevented) return;
+		const target = event.target;
+		if (!(target instanceof HTMLElement && target.closest("[data-slot=\"file-upload-trigger\"]"))) context.inputRef.current?.click();
+	}, [context.inputRef, propsRef]);
+	const onDragOver = React$1.useCallback((event) => {
+		propsRef.current.onDragOver?.(event);
+		if (event.defaultPrevented) return;
+		event.preventDefault();
+		store.dispatch({
+			type: "SET_DRAG_OVER",
+			dragOver: true
+		});
+	}, [store, propsRef]);
+	const onDragEnter = React$1.useCallback((event) => {
+		propsRef.current.onDragEnter?.(event);
+		if (event.defaultPrevented) return;
+		event.preventDefault();
+		store.dispatch({
+			type: "SET_DRAG_OVER",
+			dragOver: true
+		});
+	}, [store, propsRef]);
+	const onDragLeave = React$1.useCallback((event) => {
+		propsRef.current.onDragLeave?.(event);
+		if (event.defaultPrevented) return;
+		const relatedTarget = event.relatedTarget;
+		if (relatedTarget && relatedTarget instanceof Node && event.currentTarget.contains(relatedTarget)) return;
+		event.preventDefault();
+		store.dispatch({
+			type: "SET_DRAG_OVER",
+			dragOver: false
+		});
+	}, [store, propsRef]);
+	const onDrop = React$1.useCallback((event) => {
+		propsRef.current.onDrop?.(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,
+		propsRef
+	]);
+	const onPaste = React$1.useCallback((event) => {
+		propsRef.current.onPaste?.(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,
+		propsRef
+	]);
+	const onKeyDown = React$1.useCallback((event) => {
+		propsRef.current.onKeyDown?.(event);
+		if (!event.defaultPrevented && (event.key === "Enter" || event.key === " ")) {
+			event.preventDefault();
+			context.inputRef.current?.click();
+		}
+	}, [context.inputRef, propsRef]);
+	return useRender({
+		defaultTagName: "div",
+		props: mergeProps({
+			role: "region",
+			id: context.dropzoneId,
+			"aria-controls": `${context.inputId} ${context.listId}`,
+			"aria-disabled": context.disabled,
+			"aria-invalid": invalid,
+			dir: context.dir,
+			tabIndex: context.disabled ? void 0 : 0,
+			className: cn("relative flex flex-col items-center justify-center gap-2 rounded-lg border-2 border-dashed p-6 transition-colors outline-none select-none hover:bg-accent/30 focus-visible:border-ring/50 data-dragging:border-primary/30 data-dragging:bg-accent/30 data-invalid:border-destructive data-invalid:ring-destructive/20 data-disabled:pointer-events-none", className),
+			onClick,
+			onDragEnter,
+			onDragLeave,
+			onDragOver,
+			onDrop,
+			onKeyDown,
+			onPaste
+		}, dropzoneProps),
+		render,
+		state: {
+			slot: "file-upload-dropzone",
+			disabled: context.disabled ? "" : void 0,
+			dragging: dragOver ? "" : void 0,
+			invalid: invalid ? "" : void 0
+		}
+	});
+}
+function FileUploadTrigger(props) {
+	const { render, onClick: onClickProp, ...triggerProps } = props;
+	const context = useFileUploadContext(TRIGGER_NAME);
+	const propsRef = useValueAsRef({ onClick: onClickProp });
+	const onClick = React$1.useCallback((event) => {
+		propsRef.current.onClick?.(event);
+		if (event.defaultPrevented) return;
+		context.inputRef.current?.click();
+	}, [context.inputRef, propsRef]);
+	return useRender({
+		defaultTagName: "button",
+		props: mergeProps({
+			type: "button",
+			"aria-controls": context.inputId,
+			disabled: context.disabled,
+			onClick
+		}, triggerProps),
+		render,
+		state: {
+			slot: "file-upload-trigger",
+			disabled: context.disabled ? "" : void 0
+		}
+	});
+}
+function FileUploadList(props) {
+	const { className, orientation = "vertical", render, forceMount, ...listProps } = props;
+	const context = useFileUploadContext(LIST_NAME);
+	const fileCount = useStore((state) => state.files.size);
+	const shouldRender = forceMount || fileCount > 0;
+	const element = useRender({
+		defaultTagName: "div",
+		props: mergeProps({
+			role: "list",
+			id: context.listId,
+			"aria-orientation": orientation,
+			dir: context.dir,
+			className: cn("flex flex-col gap-2 data-[state=active]:animate-in data-[state=active]:fade-in-0 data-[state=active]:slide-in-from-top-2 data-[state=inactive]:animate-out data-[state=inactive]:fade-out-0 data-[state=inactive]:slide-out-to-top-2", orientation === "horizontal" && "flex-row overflow-x-auto p-1.5", className)
+		}, listProps),
+		render,
+		state: {
+			slot: "file-upload-list",
+			orientation,
+			state: shouldRender ? "active" : "inactive"
+		}
+	});
+	if (!shouldRender) return null;
+	return element;
+}
+const FileUploadItemContext = React$1.createContext(null);
+function useFileUploadItemContext(consumerName) {
+	const context = React$1.useContext(FileUploadItemContext);
+	if (!context) throw new Error(`\`${consumerName}\` must be used within \`${ITEM_NAME}\``);
+	return context;
+}
+function FileUploadItem(props) {
+	const { value, render, className, ...itemProps } = props;
+	const id = React$1.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$1.useMemo(() => ({
+		id,
+		fileState,
+		nameId,
+		sizeId,
+		statusId,
+		messageId
+	}), [
+		id,
+		fileState,
+		statusId,
+		nameId,
+		sizeId,
+		messageId
+	]);
+	const statusText = fileState?.error ? `Error: ${fileState.error}` : fileState?.status === "uploading" ? `Uploading: ${fileState.progress}% complete` : fileState?.status === "success" ? "Upload complete" : "Ready to upload";
+	const element = useRender({
+		defaultTagName: "div",
+		props: mergeProps({
+			role: "listitem",
+			id,
+			"aria-setsize": fileCount,
+			"aria-posinset": fileIndex,
+			"aria-describedby": `${nameId} ${sizeId} ${statusId} ${fileState?.error ? messageId : ""}`,
+			"aria-labelledby": nameId,
+			dir: context.dir,
+			className: cn("relative flex items-center gap-2.5 rounded-md border p-3", className),
+			children: /* @__PURE__ */ jsxs(Fragment, { children: [props.children, /* @__PURE__ */ jsx("span", {
+				id: statusId,
+				className: "sr-only",
+				children: statusText
+			})] })
+		}, itemProps),
+		render,
+		state: { slot: "file-upload-item" }
+	});
+	if (!fileState) return null;
+	return /* @__PURE__ */ jsx(FileUploadItemContext.Provider, {
+		value: itemContext,
+		children: element
+	});
+}
+function FileUploadItemPreview(props) {
+	const { previewRender, render, children, className, ...previewProps } = props;
+	const itemContext = useFileUploadItemContext(ITEM_PREVIEW_NAME);
+	const context = useFileUploadContext(ITEM_PREVIEW_NAME);
+	const getDefaultRender = React$1.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$1.useCallback((file) => {
+		if (previewRender) return previewRender(file, () => getDefaultRender(file));
+		return getDefaultRender(file);
+	}, [previewRender, getDefaultRender]);
+	const element = useRender({
+		defaultTagName: "div",
+		props: mergeProps({
+			"aria-labelledby": itemContext.nameId,
+			className: cn("relative flex size-10 shrink-0 items-center justify-center overflow-hidden rounded border bg-accent/50 [&>svg]:size-10", className),
+			children: itemContext.fileState ? /* @__PURE__ */ jsxs(Fragment, { children: [onPreviewRender(itemContext.fileState.file), children] }) : null
+		}, previewProps),
+		render,
+		state: { slot: "file-upload-preview" }
+	});
+	if (!itemContext.fileState) return null;
+	return element;
+}
+function FileUploadItemMetadata(props) {
+	const { render, size = "default", children, className, ...metadataProps } = props;
+	const context = useFileUploadContext(ITEM_METADATA_NAME);
+	const itemContext = useFileUploadItemContext(ITEM_METADATA_NAME);
+	const element = useRender({
+		defaultTagName: "div",
+		props: mergeProps({
+			dir: context.dir,
+			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 text-sm font-medium", size === "sm" && "text-[13px] leading-snug font-normal"),
+					children: itemContext.fileState?.file.name
+				}),
+				/* @__PURE__ */ jsx("span", {
+					id: itemContext.sizeId,
+					className: cn("truncate text-xs text-muted-foreground", size === "sm" && "text-[11px] leading-snug"),
+					children: itemContext.fileState ? formatBytes(itemContext.fileState.file.size) : ""
+				}),
+				itemContext.fileState?.error && /* @__PURE__ */ jsx("span", {
+					id: itemContext.messageId,
+					className: "text-xs text-destructive",
+					children: itemContext.fileState.error
+				})
+			] })
+		}, metadataProps),
+		render,
+		state: { slot: "file-upload-metadata" }
+	});
+	if (!itemContext.fileState) return null;
+	return element;
+}
+function FileUploadItemProgress(props) {
+	const { variant = "linear", size = 40, render, forceMount, className, ...progressProps } = props;
+	const itemContext = useFileUploadItemContext(ITEM_PROGRESS_NAME);
+	const shouldRender = forceMount || itemContext.fileState?.progress !== 100 && itemContext.fileState?.progress !== void 0;
+	let elementProps;
+	if (variant === "circular") {
+		const circumference = 2 * Math.PI * ((size - 4) / 2);
+		const strokeDashoffset = itemContext.fileState ? circumference - itemContext.fileState.progress / 100 * circumference : circumference;
+		elementProps = {
+			role: "progressbar",
+			"aria-valuemin": 0,
+			"aria-valuemax": 100,
+			"aria-valuenow": itemContext.fileState?.progress ?? 0,
+			"aria-valuetext": `${itemContext.fileState?.progress ?? 0}%`,
+			"aria-labelledby": itemContext.nameId,
+			className: cn("absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-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
+				})]
+			})
+		};
+	} else if (variant === "fill") {
+		const progressPercentage = itemContext.fileState?.progress ?? 0;
+		const topInset = 100 - progressPercentage;
+		elementProps = {
+			role: "progressbar",
+			"aria-valuemin": 0,
+			"aria-valuemax": 100,
+			"aria-valuenow": progressPercentage,
+			"aria-valuetext": `${progressPercentage}%`,
+			"aria-labelledby": itemContext.nameId,
+			className: cn("absolute inset-0 bg-primary/50 transition-[clip-path] duration-300 ease-linear", className),
+			style: { clipPath: `inset(${topInset}% 0% 0% 0%)` }
+		};
+	} else elementProps = {
+		role: "progressbar",
+		"aria-valuemin": 0,
+		"aria-valuemax": 100,
+		"aria-valuenow": itemContext.fileState?.progress ?? 0,
+		"aria-valuetext": `${itemContext.fileState?.progress ?? 0}%`,
+		"aria-labelledby": itemContext.nameId,
+		className: cn("relative h-1.5 w-full overflow-hidden rounded-full bg-muted", 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 ?? 0)}%)` }
+		})
+	};
+	const element = useRender({
+		defaultTagName: "div",
+		props: mergeProps(elementProps, progressProps),
+		render,
+		state: {
+			slot: "file-upload-progress",
+			variant
+		}
+	});
+	if (!itemContext.fileState || !shouldRender) return null;
+	return element;
+}
+function FileUploadItemDelete(props) {
+	const { render, onClick: onClickProp, ...deleteProps } = props;
+	const store = useStoreContext(ITEM_DELETE_NAME);
+	const itemContext = useFileUploadItemContext(ITEM_DELETE_NAME);
+	const onClick = React$1.useCallback((event) => {
+		onClickProp?.(event);
+		if (!itemContext.fileState || event.defaultPrevented) return;
+		store.dispatch({
+			type: "REMOVE_FILE",
+			file: itemContext.fileState.file
+		});
+	}, [
+		store,
+		itemContext.fileState,
+		onClickProp
+	]);
+	const element = useRender({
+		defaultTagName: "button",
+		props: mergeProps({
+			type: "button",
+			"aria-controls": itemContext.id,
+			"aria-describedby": itemContext.nameId,
+			onClick
+		}, deleteProps),
+		render,
+		state: { slot: "file-upload-item-delete" }
+	});
+	if (!itemContext.fileState) return null;
+	return element;
+}
+function FileUploadClear(props) {
+	const { render, 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$1.useCallback((event) => {
+		onClickProp?.(event);
+		if (event.defaultPrevented) return;
+		store.dispatch({ type: "CLEAR" });
+	}, [store, onClickProp]);
+	const shouldRender = forceMount || fileCount > 0;
+	const element = useRender({
+		defaultTagName: "button",
+		props: mergeProps({
+			type: "button",
+			"aria-controls": context.listId,
+			disabled: isDisabled,
+			onClick
+		}, clearProps),
+		render,
+		state: {
+			slot: "file-upload-clear",
+			disabled: isDisabled ? "" : void 0
+		}
+	});
+	if (!shouldRender) return null;
+	return element;
+}
+export { FileUpload, FileUploadClear, FileUploadDropzone, FileUploadItem, FileUploadItemDelete, FileUploadItemMetadata, FileUploadItemPreview, FileUploadItemProgress, FileUploadList, FileUploadTrigger, useStore as useFileUpload };