@deftui/react 0.1.1 → 0.1.3

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

@@ -1,954 +0,0 @@
-"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 };