@uploadcn/react 0.0.0-stage → 0.1.1

package/dist/index.js

@@ -0,0 +1,1224 @@
+"use client";
+import { UploadError as UploadError$1, createAdapter, createUploader, formatBytes, formatDuration, formatSpeed, getClipboardFiles, getDraggedTypes, getDroppedFiles, getUploadSummary, isActiveStatus, isFileDrag, isPreviewableImage, matchesAccept, toAcceptAttribute, validateFileCount, validateFiles } from "@uploadcn/core";
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { compressImage, transformImage } from "@uploadcn/core/image";
+//#region src/config.tsx
+const UploadConfigContext = React.createContext({});
+/**
+* Configure uploads once — usually in your root layout — and every Upload
+* component and block uses it. Nest providers to override per section.
+*
+* @example
+* <UploadConfigProvider adapter={cloudinaryAdapter({ cloudName, uploadPreset })}>
+*   {children}
+* </UploadConfigProvider>
+*/
+function UploadConfigProvider({ children, ...config }) {
+	const value = {
+		...React.useContext(UploadConfigContext),
+		...stripUndefined(config)
+	};
+	return /* @__PURE__ */ jsx(UploadConfigContext.Provider, {
+		value,
+		children
+	});
+}
+/** The merged config from the nearest `UploadConfigProvider`s. */
+function useUploadConfig() {
+	return React.useContext(UploadConfigContext);
+}
+function stripUndefined(value) {
+	return Object.fromEntries(Object.entries(value).filter(([, entry]) => entry !== void 0));
+}
+//#endregion
+//#region src/use-upload-selector.ts
+/**
+* Subscribes to a slice of uploader state. The component re-renders only
+* when the selected value changes (by `isEqual`, default `Object.is`).
+*/
+function useUploadSelector(uploader, selector, isEqual = Object.is) {
+	const cache = React.useRef(null);
+	const getSnapshot = () => {
+		const state = uploader.getState();
+		const previous = cache.current;
+		if (previous && previous.state === state && previous.selector === selector) return previous.selected;
+		const selected = selector(state);
+		const stable = previous && isEqual(previous.selected, selected) ? previous.selected : selected;
+		cache.current = {
+			state,
+			selector,
+			selected: stable
+		};
+		return stable;
+	};
+	return React.useSyncExternalStore(uploader.subscribe, getSnapshot, getSnapshot);
+}
+/** Shallow array equality, for selectors that return lists. */
+function shallowArrayEqual(a, b) {
+	return a.length === b.length && a.every((value, index) => Object.is(value, b[index]));
+}
+//#endregion
+//#region src/context.ts
+const UploadContext = React.createContext(null);
+function useUploadContext() {
+	const context = React.useContext(UploadContext);
+	if (!context) throw new Error("Upload components must be rendered inside <Upload> (Upload.Root)");
+	return context;
+}
+const UploadItemContext = React.createContext(null);
+/**
+* The current item. Inside `<UploadItem>` it reads from context; pass an id
+* to subscribe to any item from within `<Upload>`.
+*/
+function useUploadItem(id) {
+	const fromContext = React.useContext(UploadItemContext);
+	const byId = useOptionalItem(React.useContext(UploadContext)?.uploader ?? null, id);
+	const item = id ? byId : fromContext;
+	if (!item) throw new Error(id ? `No upload item with id "${id}"` : "useUploadItem() must be used inside <UploadItem> or given an id");
+	return item;
+}
+const emptyState = {
+	items: [],
+	online: true
+};
+const noop = () => () => {};
+const nullUploader = {
+	getState: () => emptyState,
+	subscribe: noop,
+	getItem: () => void 0
+};
+function useOptionalItem(uploader, id) {
+	const source = uploader ?? nullUploader;
+	return useUploadSelector(source, () => id ? source.getItem(id) : void 0);
+}
+//#endregion
+//#region src/messages.ts
+const defaultMessages = {
+	status: {
+		idle: "Ready",
+		validating: "Checking",
+		queued: "Queued",
+		uploading: "Uploading",
+		paused: "Paused",
+		processing: "Processing",
+		scanning: "Scanning",
+		success: "Uploaded",
+		error: "Failed",
+		cancelled: "Cancelled",
+		rejected: "Rejected"
+	},
+	retrying: "Retrying",
+	waitingForNetwork: "Waiting for network",
+	added: (count) => `${count} file${count === 1 ? "" : "s"} added`,
+	uploaded: (name) => `${name} uploaded`,
+	failed: (name, reason) => `${name} failed: ${reason}`,
+	rejected: (name, reason) => `${name} rejected: ${reason}`,
+	cancelled: (name) => `${name} cancelled`,
+	completed: (count) => `${count} upload${count === 1 ? "" : "s"} finished`,
+	remove: (name) => `Remove ${name}`,
+	cancel: (name) => `Cancel upload of ${name}`,
+	retry: (name) => `Retry upload of ${name}`,
+	pause: (name) => `Pause upload of ${name}`,
+	resume: (name) => `Resume upload of ${name}`,
+	progress: (name) => `Upload progress for ${name}`,
+	totalProgress: "Total upload progress"
+};
+/** A status label that also explains automatic retries and offline pauses. */
+function getStatusLabel(item, messages = defaultMessages) {
+	if (item.status === "queued" && item.retryAt) return messages.retrying;
+	if (item.status === "paused" && item.pauseReason === "offline") return messages.waitingForNetwork;
+	return messages.status[item.status];
+}
+//#endregion
+//#region src/render.ts
+function mergeRefs(...refs) {
+	const live = refs.filter(Boolean);
+	if (live.length <= 1) return live[0];
+	return (value) => {
+		const cleanups = [];
+		for (const ref of live) if (typeof ref === "function") {
+			const cleanup = ref(value);
+			if (typeof cleanup === "function") cleanups.push(cleanup);
+		} else if (ref && typeof ref === "object" && "current" in ref) ref.current = value;
+		return () => {
+			for (const cleanup of cleanups) cleanup();
+			for (const ref of live) if (ref && typeof ref === "object" && "current" in ref) ref.current = null;
+		};
+	};
+}
+/**
+* Merges two prop objects: event handlers run in sequence (unless the first
+* calls `preventDefault`), classNames concatenate, styles shallow-merge,
+* refs combine, and everything else from `overrides` wins.
+*/
+function mergeProps(base, overrides) {
+	const merged = { ...base };
+	for (const [key, value] of Object.entries(overrides)) {
+		const current = merged[key];
+		if (/^on[A-Z]/.test(key) && typeof current === "function" && typeof value === "function") merged[key] = (...args) => {
+			value(...args);
+			if (!args[0]?.defaultPrevented) current(...args);
+		};
+		else if (key === "className" && current && value) merged[key] = `${current} ${value}`;
+		else if (key === "style" && current && value) merged[key] = {
+			...current,
+			...value
+		};
+		else if (key === "ref") merged[key] = mergeRefs(current, value);
+		else if (value !== void 0) merged[key] = value;
+	}
+	return merged;
+}
+/** Renders `tag`, or the user's `render` element/function with merged props. */
+function renderElement(tag, props, render, state) {
+	if (!render) return React.createElement(tag, props);
+	if (typeof render === "function") return render(props, state);
+	return React.cloneElement(render, mergeProps(props, render.props));
+}
+/** Converts truthy booleans to `""` data attributes and drops falsy ones. */
+function dataAttributes(attributes) {
+	const result = {};
+	for (const [key, value] of Object.entries(attributes)) if (value === true) result[`data-${key}`] = "";
+	else if (value !== false && value != null) result[`data-${key}`] = value;
+	return result;
+}
+//#endregion
+//#region src/use-dropzone.ts
+/**
+* Drag-and-drop state and handlers for any element. Uses an enter/leave
+* counter so moving over child elements doesn't flicker the drag state.
+*/
+function useDropzone(options) {
+	const { onDrop, accept, multiple = true, disabled = false } = options;
+	const [state, setState] = React.useState({
+		isDragging: false,
+		isDragReject: false
+	});
+	const depth = React.useRef(0);
+	const evaluate = React.useCallback((dataTransfer) => {
+		const types = getDraggedTypes(dataTransfer);
+		const tooMany = !multiple && types.length > 1;
+		const badType = types.some((type) => type !== "" && !matchesAccept({
+			name: "",
+			type
+		}, accept));
+		return tooMany || badType;
+	}, [accept, multiple]);
+	const handlers = React.useMemo(() => ({
+		onDragEnter(event) {
+			if (disabled || !isFileDrag(event.dataTransfer)) return;
+			event.preventDefault();
+			depth.current++;
+			setState({
+				isDragging: true,
+				isDragReject: evaluate(event.dataTransfer)
+			});
+		},
+		onDragOver(event) {
+			if (disabled || !isFileDrag(event.dataTransfer)) return;
+			event.preventDefault();
+			event.dataTransfer.dropEffect = "copy";
+		},
+		onDragLeave(event) {
+			if (disabled || !isFileDrag(event.dataTransfer)) return;
+			depth.current = Math.max(0, depth.current - 1);
+			if (depth.current === 0) setState({
+				isDragging: false,
+				isDragReject: false
+			});
+		},
+		onDrop(event) {
+			if (disabled || !isFileDrag(event.dataTransfer)) return;
+			event.preventDefault();
+			depth.current = 0;
+			setState({
+				isDragging: false,
+				isDragReject: false
+			});
+			getDroppedFiles(event.dataTransfer).then((files) => {
+				if (files.length) onDrop(multiple ? files : files.slice(0, 1));
+			});
+		}
+	}), [
+		disabled,
+		evaluate,
+		multiple,
+		onDrop
+	]);
+	return {
+		...state,
+		handlers
+	};
+}
+//#endregion
+//#region src/use-file-preview.ts
+function getPreviewKind(file) {
+	if (isPreviewableImage(file)) return "image";
+	if (file.type.startsWith("video/")) return "video";
+	if (file.type.startsWith("audio/")) return "audio";
+	if (file.type === "application/pdf" || file.name.toLowerCase().endsWith(".pdf")) return "pdf";
+	return "file";
+}
+async function createThumbnail(file, size) {
+	if (typeof createImageBitmap !== "function" || file.type === "image/svg+xml") return null;
+	const bitmap = await createImageBitmap(file, { imageOrientation: "from-image" });
+	try {
+		const scale = Math.min(1, size / Math.max(bitmap.width, bitmap.height));
+		if (scale === 1) return null;
+		const width = Math.round(bitmap.width * scale);
+		const height = Math.round(bitmap.height * scale);
+		const canvas = typeof OffscreenCanvas !== "undefined" ? new OffscreenCanvas(width, height) : Object.assign(document.createElement("canvas"), {
+			width,
+			height
+		});
+		const context = canvas.getContext("2d");
+		if (!context) return null;
+		context.drawImage(bitmap, 0, 0, width, height);
+		if ("convertToBlob" in canvas) return canvas.convertToBlob({
+			type: "image/webp",
+			quality: .8
+		});
+		return new Promise((resolve) => canvas.toBlob(resolve, "image/webp", .8));
+	} finally {
+		bitmap.close();
+	}
+}
+/**
+* An object URL for previewing a file, revoked automatically when the file
+* changes or the component unmounts.
+*/
+function useFilePreview(file, { thumbnailSize } = {}) {
+	const [preview, setPreview] = React.useState(null);
+	React.useEffect(() => {
+		if (!file) return;
+		let cancelled = false;
+		let objectUrl = null;
+		const source = file;
+		const publish = (blob) => {
+			if (cancelled) return;
+			objectUrl = URL.createObjectURL(blob);
+			setPreview({
+				source,
+				url: objectUrl
+			});
+		};
+		(thumbnailSize && file.type.startsWith("image/") ? createThumbnail(file, thumbnailSize).catch(() => null) : Promise.resolve(null)).then((blob) => publish(blob ?? source));
+		return () => {
+			cancelled = true;
+			if (objectUrl) URL.revokeObjectURL(objectUrl);
+		};
+	}, [file, thumbnailSize]);
+	return preview && preview.source === file ? preview.url : null;
+}
+//#endregion
+//#region src/use-uploader.ts
+function splitOptions(options) {
+	const { onAdd, onReject, onSuccess, onError, onComplete, restore, ...engine } = options;
+	return {
+		callbacks: {
+			onAdd,
+			onReject,
+			onSuccess,
+			onError,
+			onComplete
+		},
+		restore,
+		engine
+	};
+}
+const NO_ADAPTER = "UploadCN: no adapter. Pass `adapter` to the component or useUploader, or wrap your app in <UploadConfigProvider adapter={…}>. See https://uploadcn.dev/docs/storage";
+/**
+* Stands in when no adapter is configured: the component still renders
+* (and pre-renders), and every upload fails right away with the setup hint.
+*/
+const missingAdapter = createAdapter(async () => {
+	throw new UploadError$1(NO_ADAPTER, {
+		code: "unknown",
+		retryable: false
+	});
+}, { name: "missing" });
+/**
+* Creates an upload engine bound to the component's lifetime. The instance
+* is stable; option changes (including a new adapter) apply on the next
+* render without recreating it.
+*/
+function useUploader(options = {}) {
+	const { messages: _messages, ...defaults } = useUploadConfig();
+	const { callbacks, restore, engine: own } = splitOptions(options);
+	const engine = {
+		...defaults,
+		...stripUndefined(own)
+	};
+	const configured = engine.adapter != null;
+	if (!configured) engine.adapter = missingAdapter;
+	const [uploader] = React.useState(() => createUploader(engine));
+	React.useEffect(() => {
+		if (!configured) console.error(NO_ADAPTER);
+	}, [configured]);
+	const callbacksRef = React.useRef(callbacks);
+	React.useEffect(() => {
+		callbacksRef.current = callbacks;
+		uploader.setOptions(engine);
+	});
+	React.useEffect(() => {
+		const unsubscribers = [
+			uploader.on("add", ({ items }) => callbacksRef.current.onAdd?.(items)),
+			uploader.on("reject", ({ item }) => callbacksRef.current.onReject?.(item)),
+			uploader.on("success", ({ item }) => callbacksRef.current.onSuccess?.(item)),
+			uploader.on("error", ({ item, error }) => callbacksRef.current.onError?.(item, error)),
+			uploader.on("complete", ({ items }) => callbacksRef.current.onComplete?.(items))
+		];
+		const unmount = uploader.mount();
+		return () => {
+			for (const unsubscribe of unsubscribers) unsubscribe();
+			unmount();
+		};
+	}, [uploader]);
+	React.useEffect(() => {
+		if (restore) uploader.restore();
+	}, [uploader, restore]);
+	return uploader;
+}
+//#endregion
+//#region src/primitives.tsx
+const visuallyHidden = {
+	position: "absolute",
+	width: 1,
+	height: 1,
+	padding: 0,
+	margin: -1,
+	overflow: "hidden",
+	clip: "rect(0, 0, 0, 0)",
+	whiteSpace: "nowrap",
+	border: 0
+};
+const OPTION_KEYS = [
+	"adapter",
+	"autoUpload",
+	"concurrency",
+	"retry",
+	"duplicates",
+	"transform",
+	"process",
+	"persistence",
+	"network",
+	"progressInterval",
+	"accept",
+	"maxSize",
+	"minSize",
+	"maxFiles",
+	"minFiles",
+	"image",
+	"media",
+	"validate",
+	"restore",
+	"onAdd",
+	"onReject",
+	"onSuccess",
+	"onError",
+	"onComplete"
+];
+const SUBMITTED = /* @__PURE__ */ new Set([
+	"idle",
+	"queued",
+	"uploading",
+	"paused",
+	"success"
+]);
+/** A hidden file input that mirrors the queue, for native form submission. */
+function FormFiles({ name, items }) {
+	const ref = React.useRef(null);
+	React.useEffect(() => {
+		const input = ref.current;
+		if (!input || typeof DataTransfer === "undefined") return;
+		const transfer = new DataTransfer();
+		for (const item of items) if (SUBMITTED.has(item.status)) transfer.items.add(item.file);
+		input.files = transfer.files;
+	}, [items]);
+	return /* @__PURE__ */ jsx("input", {
+		ref,
+		type: "file",
+		name,
+		multiple: true,
+		hidden: true,
+		tabIndex: -1,
+		"aria-hidden": true
+	});
+}
+function defaultFormValue(item) {
+	const result = item.result;
+	if (result && typeof result.key === "string") return result.key;
+	if (result && typeof result.url === "string") return result.url;
+	return item.name;
+}
+/**
+* The root of an upload UI. Pass uploader options directly
+* (`<Upload adapter={…} maxFiles={5}>`) or an `uploader` from `useUploader`
+* to control it from outside.
+*/
+function UploadRoot(props) {
+	if (props.uploader) return /* @__PURE__ */ jsx(UploadRootView, { ...props });
+	return /* @__PURE__ */ jsx(UploadRootWithUploader, { ...props });
+}
+function UploadRootWithUploader(props) {
+	const options = {};
+	const rest = {};
+	for (const [key, value] of Object.entries(props)) if (OPTION_KEYS.includes(key)) options[key] = value;
+	else rest[key] = value;
+	const uploader = useUploader(options);
+	return /* @__PURE__ */ jsx(UploadRootView, {
+		...rest,
+		uploader
+	});
+}
+function UploadRootView({ uploader: typedUploader, multiple: multipleProp, disabled = false, name, getFormValue = defaultFormValue, submit = "value", capture, directory, messages: messagesProp, render, children, ...props }) {
+	const uploader = typedUploader;
+	const inputRef = React.useRef(null);
+	const inputId = React.useId();
+	const { accept, maxFiles } = uploader.getOptions();
+	const multiple = multipleProp ?? maxFiles !== 1;
+	const configMessages = useUploadConfig().messages;
+	const messages = React.useMemo(() => ({
+		...defaultMessages,
+		...configMessages,
+		...messagesProp,
+		status: {
+			...defaultMessages.status,
+			...configMessages?.status,
+			...messagesProp?.status
+		}
+	}), [configMessages, messagesProp]);
+	const items = useUploadSelector(uploader, (state) => state.items);
+	const isUploading = React.useMemo(() => getUploadSummary(items).isUploading, [items]);
+	const addFiles = React.useCallback((files) => {
+		if (disabled || files.length === 0) return;
+		if (!multiple) {
+			uploader.remove();
+			uploader.add(files.slice(0, 1));
+			return;
+		}
+		uploader.add(files);
+	}, [
+		disabled,
+		multiple,
+		uploader
+	]);
+	const openFileDialog = React.useCallback(() => {
+		if (!disabled) inputRef.current?.click();
+	}, [disabled]);
+	const context = React.useMemo(() => ({
+		uploader,
+		openFileDialog,
+		addFiles,
+		accept,
+		multiple,
+		disabled,
+		messages,
+		inputId
+	}), [
+		uploader,
+		openFileDialog,
+		addFiles,
+		accept,
+		multiple,
+		disabled,
+		messages,
+		inputId
+	]);
+	const state = {
+		disabled,
+		isUploading
+	};
+	const rootProps = mergeProps({
+		...dataAttributes({
+			disabled,
+			uploading: isUploading
+		}),
+		"aria-busy": isUploading || void 0
+	}, props);
+	const directoryProps = directory ? {
+		webkitdirectory: "",
+		directory: ""
+	} : {};
+	return /* @__PURE__ */ jsx(UploadContext.Provider, {
+		value: context,
+		children: renderElement("div", {
+			...rootProps,
+			children: /* @__PURE__ */ jsxs(Fragment, { children: [
+				children,
+				/* @__PURE__ */ jsx("input", {
+					ref: inputRef,
+					id: inputId,
+					type: "file",
+					tabIndex: -1,
+					"aria-hidden": true,
+					style: visuallyHidden,
+					accept: toAcceptAttribute(accept),
+					multiple,
+					disabled,
+					capture,
+					...directoryProps,
+					onChange: (event) => {
+						addFiles(Array.from(event.currentTarget.files ?? []));
+						event.currentTarget.value = "";
+					}
+				}),
+				name && submit === "file" ? /* @__PURE__ */ jsx(FormFiles, {
+					name,
+					items
+				}) : null,
+				name && submit === "value" ? items.filter((item) => item.status === "success").map((item) => /* @__PURE__ */ jsx("input", {
+					type: "hidden",
+					name,
+					value: getFormValue(item)
+				}, item.id)) : null,
+				/* @__PURE__ */ jsx(UploadAnnouncer, {
+					uploader,
+					messages
+				})
+			] })
+		}, render, state)
+	});
+}
+function UploadAnnouncer({ uploader, messages }) {
+	const [message, setMessage] = React.useState("");
+	const messagesRef = React.useRef(messages);
+	React.useEffect(() => {
+		messagesRef.current = messages;
+	});
+	React.useEffect(() => {
+		const m = () => messagesRef.current;
+		const unsubscribers = [
+			uploader.on("add", ({ items }) => setMessage(m().added(items.length))),
+			uploader.on("success", ({ item }) => setMessage(m().uploaded(item.name))),
+			uploader.on("error", ({ item, error }) => setMessage(m().failed(item.name, error.message))),
+			uploader.on("reject", ({ item }) => setMessage(m().rejected(item.name, item.issues[0]?.message ?? ""))),
+			uploader.on("cancel", ({ item }) => setMessage(m().cancelled(item.name)))
+		];
+		return () => {
+			for (const unsubscribe of unsubscribers) unsubscribe();
+		};
+	}, [uploader]);
+	return /* @__PURE__ */ jsx("div", {
+		role: "status",
+		"aria-live": "polite",
+		"aria-atomic": true,
+		style: visuallyHidden,
+		children: message
+	});
+}
+const INTERACTIVE = "button, a, input, select, textarea, [role=button], [role=link]";
+function UploadDropzone({ render, clickable = true, ...props }) {
+	const { addFiles, accept, multiple, disabled, openFileDialog } = useUploadContext();
+	const { isDragging, isDragReject, handlers } = useDropzone({
+		onDrop: addFiles,
+		accept,
+		multiple,
+		disabled
+	});
+	const state = {
+		isDragging,
+		isDragReject,
+		disabled
+	};
+	const interaction = clickable ? {
+		role: "button",
+		tabIndex: disabled ? -1 : 0,
+		"aria-disabled": disabled || void 0,
+		onClick(event) {
+			const target = event.target.closest(INTERACTIVE);
+			if (target && target !== event.currentTarget) return;
+			openFileDialog();
+		},
+		onKeyDown(event) {
+			if (event.target !== event.currentTarget) return;
+			if (event.key === "Enter" || event.key === " ") {
+				event.preventDefault();
+				openFileDialog();
+			}
+		}
+	} : {};
+	return renderElement("div", mergeProps({
+		...handlers,
+		...interaction,
+		...dataAttributes({
+			dragging: isDragging,
+			"drag-reject": isDragReject,
+			disabled
+		})
+	}, props), render, state);
+}
+/** A button that opens the file picker. */
+function UploadTrigger({ render, ...props }) {
+	const { openFileDialog, disabled, inputId } = useUploadContext();
+	return renderElement("button", mergeProps({
+		type: "button",
+		disabled,
+		"aria-controls": inputId,
+		onClick: openFileDialog
+	}, props), render, { disabled });
+}
+const ItemSlot = React.memo(function ItemSlot({ id, template }) {
+	const item = useUploadItem(id);
+	return /* @__PURE__ */ jsx(UploadItemContext.Provider, {
+		value: item,
+		children: typeof template === "function" ? template(item) : template
+	});
+});
+/**
+* A list of uploads. Children are rendered once per item, with the item in
+* context; each item re-renders on its own progress without re-rendering
+* its siblings.
+*/
+function UploadList({ render, children, filter, ...props }) {
+	const { uploader } = useUploadContext();
+	const ids = useUploadSelector(uploader, (state) => (filter ? state.items.filter(filter) : state.items).map((item) => item.id), shallowArrayEqual);
+	const content = ids.map((id) => /* @__PURE__ */ jsx(ItemSlot, {
+		id,
+		template: children
+	}, id));
+	return renderElement("ul", mergeProps({
+		role: "list",
+		...dataAttributes({ empty: ids.length === 0 })
+	}, {
+		...props,
+		children: content
+	}), render, { count: ids.length });
+}
+/** Provides an item to the item-level primitives inside it. */
+function UploadItemRoot({ item: itemProp, render, ...props }) {
+	const contextItem = React.useContext(UploadItemContext);
+	const item = itemProp ?? contextItem;
+	if (!item) throw new Error("UploadItem needs an `item` prop or must be rendered inside UploadList");
+	return /* @__PURE__ */ jsx(UploadItemContext.Provider, {
+		value: item,
+		children: renderElement("li", mergeProps({
+			...dataAttributes({
+				status: item.status,
+				restored: item.restored
+			}),
+			"aria-busy": isActiveStatus(item.status) || void 0
+		}, props), render, item)
+	});
+}
+/** An image thumbnail of the item, or `fallback` for other file types. */
+function UploadPreview({ render, fallback = null, thumbnailSize = 256, alt = "", ...props }) {
+	const item = useUploadItem();
+	const isImage = getPreviewKind(item.file) === "image";
+	const url = useFilePreview(isImage ? item.originalFile : null, { thumbnailSize });
+	if (!isImage) return /* @__PURE__ */ jsx(Fragment, { children: fallback });
+	if (!url) return null;
+	return renderElement("img", mergeProps({
+		src: url,
+		alt,
+		decoding: "async",
+		draggable: false
+	}, props), render, item);
+}
+function UploadName({ render, ...props }) {
+	const item = useUploadItem();
+	return renderElement("span", mergeProps({
+		title: item.name,
+		children: item.name
+	}, props), render, item);
+}
+function UploadSize({ render, format = "progress", ...props }) {
+	const item = useUploadItem();
+	return renderElement("span", mergeProps({ children: format === "progress" && (item.status === "uploading" || item.status === "paused") ? `${formatBytes(item.progress.loaded)} / ${formatBytes(item.size)}` : formatBytes(item.size) }, props), render, item);
+}
+/** Upload speed and time remaining, while uploading. */
+function UploadSpeed({ render, ...props }) {
+	const item = useUploadItem();
+	if (item.status !== "uploading" || item.progress.speed == null) return null;
+	const eta = formatDuration(item.progress.eta);
+	return renderElement("span", mergeProps({ children: `${formatSpeed(item.progress.speed)}${eta ? ` · ${eta} left` : ""}` }, props), render, item);
+}
+function UploadStatus({ render, ...props }) {
+	const item = useUploadItem();
+	const { messages } = useUploadContext();
+	return renderElement("span", mergeProps({
+		...dataAttributes({ status: item.status }),
+		children: getStatusLabel(item, messages)
+	}, props), render, item);
+}
+/** The item's error or validation message, when it has one. */
+function UploadError({ render, ...props }) {
+	const item = useUploadItem();
+	if (!item.error) return null;
+	if (item.status !== "error" && item.status !== "rejected") return null;
+	const message = item.issues.length ? item.issues.map((issue) => issue.message).join(". ") : item.error.message;
+	return renderElement("p", mergeProps({
+		...dataAttributes({ status: item.status }),
+		children: message
+	}, props), render, item);
+}
+/** Renders its children only once the item uploaded successfully. */
+function UploadSuccess({ children }) {
+	return useUploadItem().status === "success" ? /* @__PURE__ */ jsx(Fragment, { children }) : null;
+}
+const ProgressContext = React.createContext(null);
+/**
+* An accessible progress bar. Inside `<UploadItem>` it tracks that item;
+* anywhere else it tracks the whole queue.
+*/
+function UploadProgress(props) {
+	const item = React.useContext(UploadItemContext);
+	return item ? /* @__PURE__ */ jsx(ItemProgress, {
+		item,
+		...props
+	}) : /* @__PURE__ */ jsx(QueueProgress, { ...props });
+}
+function ItemProgress({ item, ...props }) {
+	const { messages } = useUploadContext();
+	const done = item.status === "success" || item.status === "processing" || item.status === "scanning";
+	const indeterminate = item.status === "validating" || item.status === "processing" || item.status === "scanning" || item.status === "uploading" && item.size === 0;
+	return /* @__PURE__ */ jsx(ProgressView, {
+		...props,
+		percent: done ? 100 : item.progress.percent,
+		indeterminate,
+		complete: item.status === "success",
+		label: messages.progress(item.name),
+		status: item.status
+	});
+}
+function QueueProgress(props) {
+	const { uploader, messages } = useUploadContext();
+	const items = useUploadSelector(uploader, (state) => state.items);
+	const summary = React.useMemo(() => getUploadSummary(items), [items]);
+	return /* @__PURE__ */ jsx(ProgressView, {
+		...props,
+		percent: summary.percent,
+		indeterminate: false,
+		complete: summary.isComplete,
+		label: messages.totalProgress
+	});
+}
+function ProgressView({ render, percent, indeterminate, complete, label, status, ...props }) {
+	const state = {
+		percent,
+		indeterminate,
+		complete
+	};
+	return /* @__PURE__ */ jsx(ProgressContext.Provider, {
+		value: state,
+		children: renderElement("div", mergeProps({
+			role: "progressbar",
+			"aria-label": label,
+			"aria-valuemin": 0,
+			"aria-valuemax": 100,
+			"aria-valuenow": indeterminate ? void 0 : Math.round(percent),
+			"aria-valuetext": indeterminate ? void 0 : `${Math.round(percent)}%`,
+			style: { "--upload-progress": `${percent}%` },
+			...dataAttributes({
+				indeterminate,
+				complete,
+				status
+			})
+		}, props), render, state)
+	});
+}
+/** The filled part of `UploadProgress`. */
+function UploadProgressIndicator({ render, ...props }) {
+	const state = React.useContext(ProgressContext);
+	if (!state) throw new Error("UploadProgressIndicator must be inside UploadProgress");
+	return renderElement("div", mergeProps({
+		style: state.indeterminate ? void 0 : { transform: `translateX(-${100 - state.percent}%)` },
+		...dataAttributes({
+			indeterminate: state.indeterminate,
+			complete: state.complete
+		})
+	}, props), render, state);
+}
+function createItemAction(name, isAvailable, perform, label) {
+	function Action({ render, forceMount = false, ...props }) {
+		const item = useUploadItem();
+		const { uploader, messages } = useUploadContext();
+		const available = isAvailable(item, uploader);
+		if (!available && !forceMount) return null;
+		return renderElement("button", mergeProps({
+			type: "button",
+			disabled: !available,
+			"aria-label": label(messages, item.name),
+			onClick: () => perform(item, uploader)
+		}, props), render, item);
+	}
+	Action.displayName = name;
+	return Action;
+}
+const UploadRemove = createItemAction("UploadRemove", () => true, (item, uploader) => uploader.remove(item.id), (m, name) => m.remove(name));
+const UploadCancel = createItemAction("UploadCancel", (item) => isActiveStatus(item.status) || item.status === "paused", (item, uploader) => uploader.cancel(item.id), (m, name) => m.cancel(name));
+const UploadRetry = createItemAction("UploadRetry", (item) => item.status === "error" || item.status === "cancelled", (item, uploader) => uploader.retry(item.id), (m, name) => m.retry(name));
+const UploadPause = createItemAction("UploadPause", (item, uploader) => uploader.canPause(item), (item, uploader) => uploader.pause(item.id), (m, name) => m.pause(name));
+const UploadResume = createItemAction("UploadResume", (item) => item.status === "paused", (item, uploader) => uploader.resume(item.id), (m, name) => m.resume(name));
+/** Renders its children only while the queue is empty. */
+function UploadEmpty({ children }) {
+	const { uploader } = useUploadContext();
+	return useUploadSelector(uploader, (state) => state.items.length === 0) ? /* @__PURE__ */ jsx(Fragment, { children }) : null;
+}
+/** Starts idle uploads (when `autoUpload` is off). Hidden when there are none. */
+function UploadStart({ render, forceMount = false, ...props }) {
+	const { uploader, disabled } = useUploadContext();
+	const count = useUploadSelector(uploader, (state) => state.items.filter((item) => item.status === "idle").length);
+	if (count === 0 && !forceMount) return null;
+	return renderElement("button", mergeProps({
+		type: "button",
+		disabled: disabled || count === 0,
+		onClick: () => uploader.start()
+	}, props), render, { count });
+}
+/** Removes finished items (or every item with `all`). Hidden when there's nothing to clear. */
+function UploadClear({ render, forceMount = false, all = false, ...props }) {
+	const { uploader } = useUploadContext();
+	const count = useUploadSelector(uploader, (state) => all ? state.items.length : state.items.filter((item) => [
+		"success",
+		"cancelled",
+		"rejected"
+	].includes(item.status)).length);
+	if (count === 0 && !forceMount) return null;
+	return renderElement("button", mergeProps({
+		type: "button",
+		disabled: count === 0,
+		onClick: () => all ? uploader.remove() : uploader.clearCompleted()
+	}, props), render, { count });
+}
+//#endregion
+//#region src/use-upload.ts
+/**
+* The all-in-one hook: creates an uploader and returns its items, an
+* aggregate summary and bound actions.
+*
+* @example
+* const { items, add, summary } = useUpload({ adapter: s3Adapter({ endpoint: "/api/upload" }) })
+*/
+function useUpload(options) {
+	return useUploadState(useUploader(options));
+}
+/** Like `useUpload`, for an uploader created elsewhere (e.g. from context). */
+function useUploadState(uploader) {
+	const state = useUploadSelector(uploader, (s) => s);
+	const summary = React.useMemo(() => getUploadSummary(state.items), [state.items]);
+	return React.useMemo(() => ({
+		uploader,
+		items: state.items,
+		summary,
+		online: state.online,
+		add: uploader.add,
+		start: uploader.start,
+		pause: uploader.pause,
+		resume: uploader.resume,
+		cancel: uploader.cancel,
+		retry: uploader.retry,
+		remove: uploader.remove,
+		clearCompleted: uploader.clearCompleted,
+		update: uploader.update
+	}), [
+		uploader,
+		state,
+		summary
+	]);
+}
+/** Aggregate progress, speed, ETA and counts for the whole queue. */
+function useUploadProgress(uploader) {
+	const items = useUploadSelector(uploader, (state) => state.items);
+	return React.useMemo(() => getUploadSummary(items), [items]);
+}
+/**
+* Derives form values from successful uploads — e.g. object keys for a
+* server action or react-hook-form field. Pass a stable `getValue` (defined
+* outside the component or memoized) to keep the returned array stable.
+*/
+function useUploadValue(uploader, getValue) {
+	const items = useUploadSelector(uploader, (state) => state.items);
+	return React.useMemo(() => items.filter((item) => item.status === "success").map((item) => getValue(item)), [items, getValue]);
+}
+//#endregion
+//#region src/use-window-drop.ts
+/**
+* Detects files dragged over the browser window — for "drop anywhere"
+* overlays. Drops already handled by an inner dropzone (which calls
+* `preventDefault`) are ignored, so the two can coexist.
+*/
+function useWindowDrop({ onDrop, enabled = true }) {
+	const [isDragging, setIsDragging] = React.useState(false);
+	const onDropRef = React.useRef(onDrop);
+	React.useEffect(() => {
+		onDropRef.current = onDrop;
+	});
+	React.useEffect(() => {
+		if (!enabled) return;
+		let depth = 0;
+		function onDragEnter(event) {
+			if (!isFileDrag(event.dataTransfer)) return;
+			depth++;
+			setIsDragging(true);
+		}
+		function onDragOver(event) {
+			if (!isFileDrag(event.dataTransfer)) return;
+			event.preventDefault();
+		}
+		function onDragLeave(event) {
+			if (!isFileDrag(event.dataTransfer)) return;
+			depth = Math.max(0, depth - 1);
+			if (depth === 0 || event.relatedTarget === null) {
+				depth = 0;
+				setIsDragging(false);
+			}
+		}
+		function onDropEvent(event) {
+			depth = 0;
+			setIsDragging(false);
+			if (!event.dataTransfer || !isFileDrag(event.dataTransfer)) return;
+			const handledByDropzone = event.defaultPrevented;
+			event.preventDefault();
+			if (handledByDropzone) return;
+			getDroppedFiles(event.dataTransfer).then((files) => {
+				if (files.length) onDropRef.current(files);
+			});
+		}
+		function onBlur() {
+			depth = 0;
+			setIsDragging(false);
+		}
+		window.addEventListener("dragenter", onDragEnter);
+		window.addEventListener("dragover", onDragOver);
+		window.addEventListener("dragleave", onDragLeave);
+		window.addEventListener("drop", onDropEvent);
+		window.addEventListener("blur", onBlur);
+		return () => {
+			window.removeEventListener("dragenter", onDragEnter);
+			window.removeEventListener("dragover", onDragOver);
+			window.removeEventListener("dragleave", onDragLeave);
+			window.removeEventListener("drop", onDropEvent);
+			window.removeEventListener("blur", onBlur);
+			setIsDragging(false);
+		};
+	}, [enabled]);
+	return { isDragging: enabled && isDragging };
+}
+//#endregion
+//#region src/use-paste-files.ts
+/**
+* Uploads files and screenshots pasted from the clipboard. Text pastes are
+* left alone so inputs keep working normally.
+*/
+function usePasteFiles({ onPaste, target, enabled = true }) {
+	const onPasteRef = React.useRef(onPaste);
+	React.useEffect(() => {
+		onPasteRef.current = onPaste;
+	});
+	React.useEffect(() => {
+		if (!enabled) return;
+		const element = target?.current ?? document;
+		function handlePaste(event) {
+			const files = getClipboardFiles(event.clipboardData);
+			if (files.length === 0) return;
+			event.preventDefault();
+			onPasteRef.current(files);
+		}
+		element.addEventListener("paste", handlePaste);
+		return () => element.removeEventListener("paste", handlePaste);
+	}, [enabled, target]);
+}
+//#endregion
+//#region src/use-file-validation.ts
+/**
+* Standalone validation for flows that don't upload immediately — e.g.
+* collecting files in a form and submitting them later. Uses the same rules
+* as the uploader, including async and custom validators.
+*/
+function useFileValidation(options) {
+	const [isValidating, setIsValidating] = React.useState(false);
+	const optionsRef = React.useRef(options);
+	React.useEffect(() => {
+		optionsRef.current = options;
+	});
+	const pending = React.useRef(null);
+	React.useEffect(() => () => pending.current?.abort(), []);
+	return {
+		validate: React.useCallback(async (files, context = {}) => {
+			pending.current?.abort();
+			const controller = new AbortController();
+			pending.current = controller;
+			setIsValidating(true);
+			try {
+				return await validateFiles(files, optionsRef.current, {
+					...context,
+					signal: controller.signal
+				});
+			} finally {
+				if (pending.current === controller) {
+					pending.current = null;
+					setIsValidating(false);
+				}
+			}
+		}, []),
+		validateCount: React.useCallback((count) => validateFileCount(count, optionsRef.current), []),
+		isValidating
+	};
+}
+//#endregion
+//#region src/use-image.ts
+/** Compresses images on demand and reports how much was saved. */
+function useImageCompression(options = {}) {
+	const [isCompressing, setIsCompressing] = React.useState(false);
+	const [stats, setStats] = React.useState(null);
+	const [error, setError] = React.useState(null);
+	const optionsRef = React.useRef(options);
+	React.useEffect(() => {
+		optionsRef.current = options;
+	});
+	return {
+		compress: React.useCallback(async (file) => {
+			setIsCompressing(true);
+			setError(null);
+			try {
+				const result = await compressImage(file, optionsRef.current);
+				setStats({
+					before: file.size,
+					after: result.size,
+					saved: file.size === 0 ? 0 : 1 - result.size / file.size
+				});
+				return result;
+			} catch (cause) {
+				const failure = cause instanceof Error ? cause : new Error(String(cause));
+				setError(failure);
+				throw failure;
+			} finally {
+				setIsCompressing(false);
+			}
+		}, []),
+		isCompressing,
+		stats,
+		error
+	};
+}
+const INITIAL_CROP = {
+	position: {
+		x: 0,
+		y: 0
+	},
+	zoom: 1,
+	rotation: 0,
+	flipHorizontal: false,
+	flipVertical: false,
+	area: null
+};
+/**
+* UI-agnostic crop/rotate/zoom state with an `apply` that renders the
+* result. Pair it with any crop UI (react-easy-crop, a canvas, sliders).
+*/
+function useImageCrop({ minZoom = 1, maxZoom = 4 } = {}) {
+	const [state, setState] = React.useState(INITIAL_CROP);
+	const actions = React.useMemo(() => ({
+		setPosition: (position) => setState((s) => ({
+			...s,
+			position
+		})),
+		setZoom: (zoom) => setState((s) => ({
+			...s,
+			zoom: Math.min(maxZoom, Math.max(minZoom, zoom))
+		})),
+		setRotation: (rotation) => setState((s) => ({
+			...s,
+			rotation: (rotation % 360 + 360) % 360
+		})),
+		rotateBy: (degrees) => setState((s) => ({
+			...s,
+			rotation: ((s.rotation + degrees) % 360 + 360) % 360
+		})),
+		flip: (axis) => setState((s) => axis === "horizontal" ? {
+			...s,
+			flipHorizontal: !s.flipHorizontal
+		} : {
+			...s,
+			flipVertical: !s.flipVertical
+		}),
+		setArea: (area) => setState((s) => ({
+			...s,
+			area
+		})),
+		reset: () => setState(INITIAL_CROP)
+	}), [minZoom, maxZoom]);
+	const apply = React.useCallback((file, options = {}) => transformImage(file, {
+		...options,
+		crop: state.area ?? void 0,
+		rotate: state.rotation,
+		flipHorizontal: state.flipHorizontal,
+		flipVertical: state.flipVertical
+	}), [state]);
+	return {
+		...state,
+		...actions,
+		minZoom,
+		maxZoom,
+		apply
+	};
+}
+//#endregion
+//#region src/use-network.ts
+function subscribe(callback) {
+	window.addEventListener("online", callback);
+	window.addEventListener("offline", callback);
+	return () => {
+		window.removeEventListener("online", callback);
+		window.removeEventListener("offline", callback);
+	};
+}
+/**
+* `navigator.onLine`, kept in sync with `online`/`offline` events. `true`
+* on the server. Note that "online" only means a network interface is up.
+*/
+function useNetworkStatus() {
+	return React.useSyncExternalStore(subscribe, () => navigator.onLine, () => true);
+}
+/**
+* Warns before closing or reloading the tab while uploads are in progress.
+* Browsers show their own generic message; custom text is not supported.
+*/
+function useUploadGuard(uploader, { enabled = true } = {}) {
+	const isUploading = useUploadSelector(uploader, (state) => getUploadSummary(state.items).isUploading);
+	React.useEffect(() => {
+		if (!enabled || !isUploading) return;
+		function onBeforeUnload(event) {
+			event.preventDefault();
+		}
+		window.addEventListener("beforeunload", onBeforeUnload);
+		return () => window.removeEventListener("beforeunload", onBeforeUnload);
+	}, [enabled, isUploading]);
+	return isUploading;
+}
+//#endregion
+//#region src/index.ts
+/**
+* Headless, accessible upload primitives. Style them directly or use the
+* shadcn-styled versions from the UploadCN registry.
+*/
+const Upload = {
+	Root: UploadRoot,
+	Dropzone: UploadDropzone,
+	Trigger: UploadTrigger,
+	List: UploadList,
+	Item: UploadItemRoot,
+	Preview: UploadPreview,
+	Name: UploadName,
+	Size: UploadSize,
+	Speed: UploadSpeed,
+	Status: UploadStatus,
+	Error: UploadError,
+	Success: UploadSuccess,
+	Progress: UploadProgress,
+	ProgressIndicator: UploadProgressIndicator,
+	Remove: UploadRemove,
+	Cancel: UploadCancel,
+	Retry: UploadRetry,
+	Pause: UploadPause,
+	Resume: UploadResume,
+	Empty: UploadEmpty,
+	Start: UploadStart,
+	Clear: UploadClear
+};
+//#endregion
+export { Upload, UploadCancel, UploadClear, UploadConfigProvider, UploadContext, UploadDropzone, UploadEmpty, UploadError, UploadItemContext, UploadItemRoot, UploadList, UploadName, UploadPause, UploadPreview, UploadProgress, UploadProgressIndicator, UploadRemove, UploadResume, UploadRetry, UploadRoot, UploadSize, UploadSpeed, UploadStart, UploadStatus, UploadSuccess, UploadTrigger, defaultMessages, getPreviewKind, getStatusLabel, mergeProps, shallowArrayEqual, useDropzone, useFilePreview, useFileValidation, useImageCompression, useImageCrop, useNetworkStatus, usePasteFiles, useUpload, useUploadConfig, useUploadContext, useUploadGuard, useUploadItem, useUploadProgress, useUploadSelector, useUploadState, useUploadValue, useUploader, useWindowDrop };
+
+//# sourceMappingURL=index.js.map