@zayne-labs/ui-react 0.10.4 → 0.10.6

package/dist/esm/drop-zone-5dDyxv_f.js

@@ -0,0 +1,987 @@
+import { __export } from "./chunk-CTAAG5j7.js";
+import { SlotRoot } from "./slot-WVWfOlr3.js";
+import { For } from "./for-Dfh7e9Z4.js";
+import { cnMerge } from "./cn-s-D7vHW1.js";
+import { Presence } from "./presence-CRZsP1Jk.js";
+import { composeRefs, composeTwoEventHandlers } from "@zayne-labs/toolkit-react/utils";
+import { isFile, isFunction, isNumber, isObject, isString } from "@zayne-labs/toolkit-type-helpers";
+import { useCallback, useMemo, useRef } from "react";
+import { createCustomContext, useCallbackRef, useConstant, useShallowCompSelector, useShallowCompValue, useStore, useUnmountEffect } from "@zayne-labs/toolkit-react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { createFileUrl, createStore, dataAttr, formatBytes, generateFileID, handleFileValidationAsync, toArray } from "@zayne-labs/toolkit-core";
+import { createZustandContext } from "@zayne-labs/toolkit-react/zustand";
+
+//#region src/components/ui/drop-zone/drop-zone-context.ts
+const [DropZoneStoreContextProvider, useDropZoneStoreContext] = createZustandContext({
+	hookName: "useDropZoneStoreContext",
+	name: "DropZoneStoreContext",
+	providerName: "DropZoneRoot"
+});
+const [DropZoneRootContextProvider, useDropZoneRootContext] = createCustomContext({
+	hookName: "useDropZoneRootContext",
+	name: "DropZoneRootContext",
+	providerName: "DropZoneRoot"
+});
+const [FileItemContextProvider, useFileItemContext] = createCustomContext({
+	defaultValue: null,
+	hookName: "useFileItemContext",
+	name: "FileItemContext",
+	providerName: "FileItem",
+	strict: false
+});
+
+//#endregion
+//#region src/components/ui/drop-zone/icons.tsx
+const FileVideoIcon = (props) => /* @__PURE__ */ jsx("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	width: "1em",
+	height: "1em",
+	viewBox: "0 0 24 24",
+	...props,
+	children: /* @__PURE__ */ jsxs("g", {
+		fill: "none",
+		stroke: "currentColor",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		strokeWidth: "2",
+		children: [/* @__PURE__ */ jsx("path", { d: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" }), /* @__PURE__ */ jsx("path", { d: "M14 2v4a2 2 0 0 0 2 2h4m-10 3l5 3l-5 3z" })]
+	})
+});
+const FileAudioIcon = (props) => /* @__PURE__ */ jsx("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	width: "1em",
+	height: "1em",
+	viewBox: "0 0 24 24",
+	...props,
+	children: /* @__PURE__ */ jsxs("g", {
+		fill: "none",
+		stroke: "currentColor",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		strokeWidth: "2",
+		children: [/* @__PURE__ */ jsx("path", { d: "M17.5 22h.5a2 2 0 0 0 2-2V7l-5-5H6a2 2 0 0 0-2 2v3" }), /* @__PURE__ */ jsx("path", { d: "M14 2v4a2 2 0 0 0 2 2h4M2 19a2 2 0 1 1 4 0v1a2 2 0 1 1-4 0v-4a6 6 0 0 1 12 0v4a2 2 0 1 1-4 0v-1a2 2 0 1 1 4 0" })]
+	})
+});
+const FileTextIcon = (props) => /* @__PURE__ */ jsx("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	width: "1em",
+	height: "1em",
+	viewBox: "0 0 24 24",
+	...props,
+	children: /* @__PURE__ */ jsxs("g", {
+		fill: "none",
+		stroke: "currentColor",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		strokeWidth: "2",
+		children: [/* @__PURE__ */ jsx("path", { d: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" }), /* @__PURE__ */ jsx("path", { d: "M14 2v4a2 2 0 0 0 2 2h4M10 9H8m8 4H8m8 4H8" })]
+	})
+});
+const FileCodeIcon = (props) => /* @__PURE__ */ jsx("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	width: "1em",
+	height: "1em",
+	viewBox: "0 0 24 24",
+	...props,
+	children: /* @__PURE__ */ jsxs("g", {
+		fill: "none",
+		stroke: "currentColor",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		strokeWidth: "2",
+		children: [/* @__PURE__ */ jsx("path", { d: "M10 12.5L8 15l2 2.5m4-5l2 2.5l-2 2.5M14 2v4a2 2 0 0 0 2 2h4" }), /* @__PURE__ */ jsx("path", { d: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7z" })]
+	})
+});
+const FileArchiveIcon = (props) => /* @__PURE__ */ jsx("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	width: "1em",
+	height: "1em",
+	viewBox: "0 0 24 24",
+	...props,
+	children: /* @__PURE__ */ jsxs("g", {
+		fill: "none",
+		stroke: "currentColor",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		strokeWidth: "2",
+		children: [
+			/* @__PURE__ */ jsx("path", { d: "M10 12v-1m0 7v-2m0-9V6m4-4v4a2 2 0 0 0 2 2h4" }),
+			/* @__PURE__ */ jsx("path", { d: "M15.5 22H18a2 2 0 0 0 2-2V7l-5-5H6a2 2 0 0 0-2 2v16a2 2 0 0 0 .274 1.01" }),
+			/* @__PURE__ */ jsx("circle", {
+				cx: "10",
+				cy: "20",
+				r: "2"
+			})
+		]
+	})
+});
+const FileCogIcon = (props) => /* @__PURE__ */ jsx("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	width: "1em",
+	height: "1em",
+	viewBox: "0 0 24 24",
+	...props,
+	children: /* @__PURE__ */ jsxs("g", {
+		fill: "none",
+		stroke: "currentColor",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		strokeWidth: "2",
+		children: [
+			/* @__PURE__ */ jsx("path", { d: "M14 2v4a2 2 0 0 0 2 2h4M3.2 12.9l-.9-.4m.9 2.6l-.9.4" }),
+			/* @__PURE__ */ jsx("path", { d: "M4.677 21.5a2 2 0 0 0 1.313.5H18a2 2 0 0 0 2-2V7l-5-5H6a2 2 0 0 0-2 2v2.5m.9 4.7l-.4-.9m.4 6.5l-.4.9m3-7.4l-.4.9m.4 6.5l-.4-.9m2.6-4.3l-.9.4m.9 2.6l-.9-.4" }),
+			/* @__PURE__ */ jsx("circle", {
+				cx: "6",
+				cy: "14",
+				r: "3"
+			})
+		]
+	})
+});
+const FileIcon = (props) => /* @__PURE__ */ jsx("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	width: "1em",
+	height: "1em",
+	viewBox: "0 0 24 24",
+	...props,
+	children: /* @__PURE__ */ jsxs("g", {
+		fill: "none",
+		stroke: "currentColor",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		strokeWidth: "2",
+		children: [/* @__PURE__ */ jsx("path", { d: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" }), /* @__PURE__ */ jsx("path", { d: "M14 2v4a2 2 0 0 0 2 2h4" })]
+	})
+});
+
+//#endregion
+//#region src/components/ui/drop-zone/utils.ts
+const generateFileID$1 = generateFileID;
+const createObjectURL = (file, disallowPreviewForNonImageFiles) => {
+	if (disallowPreviewForNonImageFiles && !file.type?.startsWith("image/")) return;
+	return createFileUrl(file);
+};
+const clearObjectURL = (fileState, disallowPreviewForNonImageFiles) => {
+	if (!isFile(fileState?.file)) return;
+	if (disallowPreviewForNonImageFiles && !fileState.file.type.startsWith("image/")) return;
+	if (!fileState.preview) return;
+	URL.revokeObjectURL(fileState.preview);
+};
+const isMatchingFile = (options) => {
+	const { fileState, fileStateOrID } = options;
+	const fileID = isFile(fileState) ? generateFileID$1(fileState) : fileState.id;
+	if (isString(fileStateOrID)) return fileID === fileStateOrID;
+	if (isFile(fileStateOrID)) {
+		const generatedFileID = generateFileID$1(fileStateOrID);
+		return fileID === generatedFileID;
+	}
+	return fileID === fileStateOrID.id;
+};
+const getScopeAttrs = (part) => {
+	return {
+		"data-slot": `dropzone-${part}`,
+		"data-scope": "dropzone",
+		"data-part": part
+	};
+};
+const dropZoneErrorSymbol = Symbol("DropZoneError");
+var DropZoneError = class DropZoneError extends Error {
+	dropZoneErrorSymbol = dropZoneErrorSymbol;
+	file;
+	name = "DropZoneError";
+	constructor(ctx) {
+		const { file, message } = ctx;
+		super(message);
+		this.file = file;
+	}
+	static isError(error) {
+		if (!isObject(error)) return false;
+		if (error instanceof DropZoneError) return true;
+		const actualError = error;
+		return actualError.dropZoneErrorSymbol === dropZoneErrorSymbol && actualError.name === "DropZoneError";
+	}
+};
+const getErrorContext = (error) => {
+	if (DropZoneError.isError(error)) return {
+		cause: "custom-error",
+		code: "upload-error",
+		file: error.file ?? {},
+		message: error.message,
+		originalError: error.cause ?? error
+	};
+	const actualError = Error.isError(error) ? error : new Error("File upload failed", { cause: error });
+	return {
+		cause: "custom-error",
+		code: "upload-error",
+		file: isFile(actualError.cause) ? actualError.cause : {},
+		message: Error.isError(error) ? actualError.message : String(actualError),
+		originalError: actualError
+	};
+};
+
+//#endregion
+//#region src/components/ui/drop-zone/drop-zone-store.ts
+const createDropZoneStore = (initStoreValues) => {
+	const { allowedFileTypes, disablePreviewForNonImageFiles, initialFiles, inputRef, maxFileCount, maxFileSize, multiple, onFilesChange, onUpload, onValidationError, onValidationSuccess, rejectDuplicateFiles, validator } = initStoreValues;
+	const initialFileArray = toArray(initialFiles).filter(Boolean);
+	const clearInputValue = () => {
+		if (!inputRef.current) return;
+		inputRef.current.value = "";
+	};
+	const initFileStateArray = initialFileArray.map((fileMeta) => ({
+		file: fileMeta,
+		id: fileMeta.id,
+		preview: isString(fileMeta.url) ? fileMeta.url : void 0,
+		progress: 0,
+		status: "idle"
+	}));
+	const store = createStore((set, get) => ({
+		actions: {
+			addFiles: async (files) => {
+				if (!files || files.length === 0) {
+					console.warn("No file selected!");
+					return;
+				}
+				const { actions, fileStateArray } = get();
+				const resolvedNewFiles = !multiple ? [files[0]] : files;
+				const { errors, validFiles } = await handleFileValidationAsync({
+					existingFiles: fileStateArray.map((fileWithPreview) => fileWithPreview.file),
+					hooks: {
+						onErrorEach: onValidationError,
+						onSuccessBatch: onValidationSuccess
+					},
+					newFiles: resolvedNewFiles,
+					settings: {
+						allowedFileTypes,
+						maxFileCount,
+						maxFileSize,
+						rejectDuplicateFiles,
+						validator
+					}
+				});
+				if (validFiles.length === 0) {
+					set({
+						errors,
+						isDraggingOver: false
+					});
+					return;
+				}
+				const newFileStateArray = validFiles.map((file) => ({
+					file,
+					id: generateFileID$1(file),
+					preview: createObjectURL(file, disablePreviewForNonImageFiles),
+					progress: 0,
+					status: "idle"
+				}));
+				set({
+					errors,
+					fileStateArray: !multiple ? newFileStateArray : [...fileStateArray, ...newFileStateArray],
+					isDraggingOver: false
+				});
+				await actions.handleFileUpload({ newFileStateArray });
+			},
+			clearErrors: () => {
+				set({ errors: [] });
+			},
+			clearFiles: () => {
+				const { actions } = get();
+				actions.clearObjectURLs();
+				set({ fileStateArray: [] });
+			},
+			clearObjectURLs: () => {
+				const { fileStateArray } = get();
+				for (const fileState of fileStateArray) clearObjectURL(fileState, disablePreviewForNonImageFiles);
+			},
+			handleChange: async (event) => {
+				const fileList = event.target.files;
+				const { actions } = get();
+				await actions.addFiles(fileList);
+				clearInputValue();
+			},
+			handleDragEnter: (event) => {
+				event.preventDefault();
+				event.stopPropagation();
+				set({ isDraggingOver: true });
+			},
+			handleDragLeave: (event) => {
+				event.preventDefault();
+				event.stopPropagation();
+				set({ isDraggingOver: false });
+			},
+			handleDragOver: (event) => {
+				event.preventDefault();
+				event.stopPropagation();
+			},
+			handleDrop: async (event) => {
+				event.preventDefault();
+				event.stopPropagation();
+				const { actions } = get();
+				const fileList = event.dataTransfer.files;
+				await actions.addFiles(fileList);
+			},
+			handleFileUpload: async (context) => {
+				const { newFileStateArray } = context;
+				const { actions } = get();
+				if (!onUpload) {
+					for (const fileState of newFileStateArray) actions.updateFileState({
+						fileStateOrID: fileState,
+						progress: 100,
+						status: "success"
+					});
+					return;
+				}
+				try {
+					await onUpload({
+						fileStateArray: newFileStateArray,
+						onError: (ctx) => {
+							const { error, fileStateOrID } = ctx;
+							const errorContext = getErrorContext(error);
+							actions.updateFileState({
+								error: errorContext,
+								fileStateOrID,
+								status: "error"
+							});
+						},
+						onProgress: (ctx) => {
+							const { fileStateOrID, progress } = ctx;
+							actions.updateFileState({
+								fileStateOrID,
+								progress
+							});
+						},
+						onSuccess: (ctx) => {
+							const { fileStateOrID } = ctx;
+							actions.updateFileState({
+								fileStateOrID,
+								progress: 100,
+								status: "success"
+							});
+						}
+					});
+				} catch (error) {
+					const errorContext = getErrorContext(error);
+					for (const fileState of newFileStateArray) actions.updateFileState({
+						error: errorContext,
+						fileStateOrID: fileState,
+						status: "error"
+					});
+				}
+			},
+			handleKeyDown: (event) => {
+				const isEnterKey = event.key === "Enter";
+				const isSpaceKey = event.key === " ";
+				if (!(isEnterKey || isSpaceKey)) return;
+				event.preventDefault();
+				const { actions } = get();
+				actions.openFilePicker();
+			},
+			handlePaste: async (event) => {
+				event.preventDefault();
+				event.stopPropagation();
+				const { actions } = get();
+				const fileList = event.clipboardData.files;
+				await actions.addFiles(fileList);
+			},
+			openFilePicker: () => {
+				inputRef.current?.click();
+			},
+			removeFile: (ctx) => {
+				const { fileStateOrID } = ctx;
+				const { fileStateArray } = get();
+				const updatedFileStateArray = fileStateArray.flatMap((fileState) => {
+					if (isMatchingFile({
+						fileState,
+						fileStateOrID
+					})) {
+						clearObjectURL(fileState, disablePreviewForNonImageFiles);
+						return [];
+					}
+					return fileState;
+				});
+				set({
+					errors: [],
+					fileStateArray: updatedFileStateArray
+				});
+			},
+			updateFileState: (ctx) => {
+				const { fileStateOrID,...updatedFileState } = ctx;
+				const { fileStateArray } = get();
+				const updatedFileStateArray = fileStateArray.map((fileState) => {
+					if (isMatchingFile({
+						fileState,
+						fileStateOrID
+					})) return {
+						...fileState,
+						...updatedFileState
+					};
+					return fileState;
+				});
+				set({ fileStateArray: updatedFileStateArray });
+			}
+		},
+		disabled: false,
+		errors: [],
+		fileStateArray: initFileStateArray,
+		isDraggingOver: false
+	}));
+	store.subscribe.withSelector((state) => state.fileStateArray, (fileStateArray) => onFilesChange?.({ fileStateArray }));
+	return store;
+};
+
+//#endregion
+//#region src/components/ui/drop-zone/use-drop-zone.ts
+const useDropZone = (props) => {
+	const { allowedFileTypes, disabled = false, disableInternalStateSubscription = false, disablePreviewForNonImageFiles = true, initialFiles, maxFileCount, maxFileSize, multiple, onFilesChange, onUpload, onValidationError, onValidationSuccess, rejectDuplicateFiles = true, shouldOpenFilePickerOnAreaClick = true, validator } = props ?? {};
+	const inputRef = useRef(null);
+	const savedOnFilesChange = useCallbackRef(onFilesChange);
+	const savedOnUpload = useCallbackRef(onUpload);
+	const savedOnUploadError = useCallbackRef(onValidationError);
+	const savedOnUploadSuccess = useCallbackRef(onValidationSuccess);
+	const savedValidator = useCallbackRef(validator);
+	const constantInitialFiles = useConstant(() => initialFiles);
+	const shallowComparedMaxFileSize = useShallowCompValue(maxFileSize);
+	const shallowComparedAllowedFileTypes = useShallowCompValue(allowedFileTypes);
+	const storeApi = useMemo(() => {
+		return createDropZoneStore({
+			allowedFileTypes: shallowComparedAllowedFileTypes,
+			disablePreviewForNonImageFiles,
+			initialFiles: constantInitialFiles,
+			inputRef,
+			maxFileCount,
+			maxFileSize: shallowComparedMaxFileSize,
+			multiple,
+			onFilesChange: savedOnFilesChange,
+			onUpload: savedOnUpload,
+			onValidationError: savedOnUploadError,
+			onValidationSuccess: savedOnUploadSuccess,
+			rejectDuplicateFiles,
+			validator: savedValidator
+		});
+	}, [
+		shallowComparedAllowedFileTypes,
+		disablePreviewForNonImageFiles,
+		constantInitialFiles,
+		maxFileCount,
+		shallowComparedMaxFileSize,
+		multiple,
+		savedOnFilesChange,
+		savedOnUpload,
+		savedOnUploadError,
+		savedOnUploadSuccess,
+		rejectDuplicateFiles,
+		savedValidator
+	]);
+	const actions = storeApi.getState().actions;
+	useUnmountEffect(() => {
+		actions.clearObjectURLs();
+	});
+	const useDropZoneStore = (selector) => {
+		return useStore(storeApi, selector);
+	};
+	const isDraggingOver = useDropZoneStore((state) => !disableInternalStateSubscription ? state.isDraggingOver : null);
+	const hasFiles = useDropZoneStore((state) => !disableInternalStateSubscription ? state.fileStateArray.length > 0 : null);
+	const getContainerProps = useCallback((innerProps) => {
+		const isDisabled = disabled;
+		const onFileDrop = !isDisabled ? actions.handleDrop : void 0;
+		const onFilePaste = !isDisabled ? actions.handlePaste : void 0;
+		const onKeyDown = !isDisabled ? actions.handleKeyDown : void 0;
+		const tabIndex = !isDisabled ? 0 : void 0;
+		const onAreaClick = !isDisabled && shouldOpenFilePickerOnAreaClick ? actions.openFilePicker : void 0;
+		return {
+			...getScopeAttrs("container"),
+			role: "region",
+			...!disableInternalStateSubscription && { "data-drag-over": dataAttr(isDraggingOver) },
+			...innerProps,
+			className: cnMerge(`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-zu-accent/30
+					focus-visible:border-zu-ring/50 data-[disabled]:pointer-events-none
+					data-[drag-over]:border-zu-primary/30 data-[drag-over]:bg-zu-accent/30`, innerProps.className),
+			"data-disabled": dataAttr(isDisabled),
+			onClick: composeTwoEventHandlers(onAreaClick, innerProps.onClick),
+			onDragEnter: composeTwoEventHandlers(actions.handleDragEnter, innerProps.onDragEnter),
+			onDragLeave: composeTwoEventHandlers(actions.handleDragLeave, innerProps.onDragLeave),
+			onDragOver: composeTwoEventHandlers(actions.handleDragOver, innerProps.onDragOver),
+			onDrop: composeTwoEventHandlers(onFileDrop, innerProps.onDrop),
+			onKeyDown: composeTwoEventHandlers(onKeyDown, innerProps.onKeyDown),
+			onPaste: composeTwoEventHandlers(onFilePaste, innerProps.onPaste),
+			tabIndex
+		};
+	}, [
+		actions.handleDragEnter,
+		actions.handleDragLeave,
+		actions.handleDragOver,
+		actions.handleDrop,
+		actions.handleKeyDown,
+		actions.handlePaste,
+		actions.openFilePicker,
+		disableInternalStateSubscription,
+		disabled,
+		isDraggingOver,
+		shouldOpenFilePickerOnAreaClick
+	]);
+	const getInputProps = useCallback((innerProps) => {
+		const isDisabled = innerProps.disabled ?? disabled;
+		const onFileChange = !isDisabled ? actions.handleChange : void 0;
+		return {
+			...getScopeAttrs("input"),
+			...!disableInternalStateSubscription && { "data-drag-over": dataAttr(isDraggingOver) },
+			...innerProps,
+			accept: allowedFileTypes ? allowedFileTypes.join(", ") : innerProps.accept,
+			className: cnMerge("hidden", innerProps.className),
+			"data-disabled": dataAttr(isDisabled),
+			disabled: isDisabled,
+			multiple: multiple ?? innerProps.multiple,
+			onChange: composeTwoEventHandlers(onFileChange, innerProps.onChange),
+			ref: composeRefs(inputRef, innerProps.ref),
+			type: "file"
+		};
+	}, [
+		actions.handleChange,
+		allowedFileTypes,
+		disableInternalStateSubscription,
+		disabled,
+		isDraggingOver,
+		multiple
+	]);
+	const getTriggerProps = useCallback((innerProps) => {
+		const isDisabled = innerProps.disabled ?? disabled;
+		return {
+			...getScopeAttrs("trigger"),
+			type: "button",
+			...innerProps,
+			"data-disabled": dataAttr(isDisabled),
+			disabled: isDisabled,
+			onClick: composeTwoEventHandlers(actions.openFilePicker, innerProps.onClick)
+		};
+	}, [actions.openFilePicker, disabled]);
+	const getFileListProps = useCallback((innerProps) => {
+		const { orientation = "vertical",...restOfInnerProps } = innerProps;
+		return {
+			...getScopeAttrs("file-list"),
+			"data-orientation": orientation,
+			...!disableInternalStateSubscription && { "data-state": hasFiles ? "active" : "inactive" },
+			...restOfInnerProps,
+			className: cnMerge(`flex flex-col gap-2 data-[state=active]:animate-files-in 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", innerProps.className)
+		};
+	}, [disableInternalStateSubscription, hasFiles]);
+	const getFileItemProps = useCallbackRef((innerProps) => {
+		return {
+			...getScopeAttrs("file-item"),
+			...innerProps,
+			className: cnMerge("relative flex items-center gap-2.5 rounded-md border p-2", innerProps.className)
+		};
+	});
+	const getFileItemProgressProps = useCallbackRef((innerProps) => {
+		const { variant = "linear",...restOfInnerProps } = innerProps;
+		return {
+			...getScopeAttrs("file-item-progress"),
+			role: "progressbar",
+			...restOfInnerProps,
+			className: cnMerge("inline-flex", variant === "circular" && "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2", variant === "fill" && `absolute inset-0 bg-zu-primary/50 transition-[clip-path] duration-300 ease-linear
+						[clip-path:var(--clip-path)]`, variant === "linear" && "relative h-1.5 w-full overflow-hidden rounded-full bg-zu-primary/20", restOfInnerProps.className)
+		};
+	});
+	const getFileItemDeleteProps = useCallback((innerProps) => {
+		const { fileStateOrID,...restOfInnerProps } = innerProps;
+		const isDisabled = innerProps.disabled ?? disabled;
+		const onRemoveFile = () => fileStateOrID && actions.removeFile({ fileStateOrID });
+		return {
+			...getScopeAttrs("file-item-delete"),
+			type: "button",
+			...restOfInnerProps,
+			"data-disabled": dataAttr(isDisabled),
+			disabled: isDisabled,
+			onClick: composeTwoEventHandlers(onRemoveFile, restOfInnerProps.onClick)
+		};
+	}, [actions, disabled]);
+	const getFileItemPreviewProps = useCallbackRef((innerProps) => {
+		return {
+			...getScopeAttrs("file-item-preview"),
+			...innerProps,
+			className: cnMerge(`relative flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-md
+					bg-zu-accent/50 [&>svg]:size-10`, innerProps.className)
+		};
+	});
+	const getFileItemMetadataProps = useCallbackRef((innerProps) => {
+		return {
+			...getScopeAttrs("file-item-metadata"),
+			...innerProps,
+			className: cnMerge("flex min-w-0 grow flex-col", innerProps.className)
+		};
+	});
+	const getFileItemClearProps = useCallback((innerProps) => {
+		const isDisabled = innerProps.disabled ?? disabled;
+		return {
+			...getScopeAttrs("file-item-clear"),
+			type: "button",
+			...innerProps,
+			"data-disabled": dataAttr(isDisabled),
+			disabled: isDisabled,
+			onClick: composeTwoEventHandlers(actions.clearFiles, innerProps.onClick)
+		};
+	}, [actions.clearFiles, disabled]);
+	const propGetters = useMemo(() => ({
+		getContainerProps,
+		getFileItemClearProps,
+		getFileItemDeleteProps,
+		getFileItemMetadataProps,
+		getFileItemPreviewProps,
+		getFileItemProgressProps,
+		getFileItemProps,
+		getFileListProps,
+		getInputProps,
+		getTriggerProps
+	}), [
+		getContainerProps,
+		getFileListProps,
+		getFileItemClearProps,
+		getFileItemDeleteProps,
+		getFileItemMetadataProps,
+		getFileItemPreviewProps,
+		getFileItemProgressProps,
+		getFileItemProps,
+		getInputProps,
+		getTriggerProps
+	]);
+	const savedUseDropZoneStore = useCallbackRef(useDropZoneStore);
+	return useMemo(() => ({
+		disabled,
+		disableInternalStateSubscription,
+		inputRef,
+		propGetters,
+		storeApi,
+		useDropZoneStore: savedUseDropZoneStore
+	}), [
+		disabled,
+		disableInternalStateSubscription,
+		propGetters,
+		storeApi,
+		savedUseDropZoneStore
+	]);
+};
+
+//#endregion
+//#region src/components/ui/drop-zone/drop-zone.tsx
+function DropZoneRoot(props) {
+	const { children,...restOfProps } = props;
+	const { disabled, disableInternalStateSubscription, inputRef, propGetters, storeApi } = useDropZone(restOfProps);
+	const rootContextValue = useMemo(() => ({
+		disabled,
+		disableInternalStateSubscription,
+		inputRef,
+		propGetters
+	}), [
+		disableInternalStateSubscription,
+		disabled,
+		inputRef,
+		propGetters
+	]);
+	return /* @__PURE__ */ jsx(DropZoneStoreContextProvider, {
+		store: storeApi,
+		children: /* @__PURE__ */ jsx(DropZoneRootContextProvider, {
+			value: rootContextValue,
+			children
+		})
+	});
+}
+function DropZoneContext(props) {
+	const { children, selector } = props;
+	const dropZoneCtx = useDropZoneStoreContext(useShallowCompSelector(selector));
+	return isFunction(children) ? children(dropZoneCtx) : children;
+}
+function DropZoneContainer(props) {
+	const { as: Element = "div", asChild,...restOfProps } = props;
+	const { disableInternalStateSubscription, propGetters } = useDropZoneRootContext();
+	const isDraggingOver = useDropZoneStoreContext((store) => disableInternalStateSubscription ? store.isDraggingOver : null);
+	const Component$1 = asChild ? SlotRoot : Element;
+	return /* @__PURE__ */ jsx(Component$1, { ...propGetters.getContainerProps({
+		...disableInternalStateSubscription && { "data-drag-over": dataAttr(isDraggingOver) },
+		...restOfProps
+	}) });
+}
+function DropZoneInput(props) {
+	const { asChild,...restOfProps } = props;
+	const { disableInternalStateSubscription, propGetters } = useDropZoneRootContext();
+	const isDraggingOver = useDropZoneStoreContext((store) => disableInternalStateSubscription ? store.isDraggingOver : null);
+	const Component$1 = asChild ? SlotRoot : "input";
+	return /* @__PURE__ */ jsx(Component$1, { ...propGetters.getInputProps({
+		...disableInternalStateSubscription && { "data-drag-over": dataAttr(isDraggingOver) },
+		...restOfProps
+	}) });
+}
+function DropZoneArea(props) {
+	const { children, classNames, extraProps, selector } = props;
+	return /* @__PURE__ */ jsxs(DropZoneContainer, {
+		...extraProps?.container,
+		className: classNames?.container,
+		children: [/* @__PURE__ */ jsx(DropZoneInput, {
+			...extraProps?.input,
+			className: classNames?.input
+		}), /* @__PURE__ */ jsx(DropZoneContext, {
+			selector,
+			children
+		})]
+	});
+}
+function DropZoneTrigger(props) {
+	const { asChild,...restOfProps } = props;
+	const { propGetters } = useDropZoneRootContext();
+	const Component$1 = asChild ? SlotRoot : "button";
+	return /* @__PURE__ */ jsx(Component$1, { ...propGetters.getTriggerProps(restOfProps) });
+}
+function DropZoneFileList(props) {
+	const { as: Element = "ul", asChild, children, forceMount = false, renderMode = "per-item",...restOfProps } = props;
+	const fileStateArray = useDropZoneStoreContext((store) => store.fileStateArray);
+	const actions = useDropZoneStoreContext((store) => store.actions);
+	const { disableInternalStateSubscription, propGetters } = useDropZoneRootContext();
+	const childrenMap = {
+		"manual-list": () => {
+			return children({
+				actions,
+				fileStateArray
+			});
+		},
+		"per-item": () => {
+			const childrenFn = children;
+			return /* @__PURE__ */ jsx(For, {
+				each: fileStateArray,
+				renderItem: (fileState, index, array) => childrenFn({
+					actions,
+					array,
+					fileState,
+					index
+				})
+			});
+		}
+	};
+	const hasFiles = fileStateArray.length > 0;
+	const Component$1 = asChild ? SlotRoot : Element;
+	return /* @__PURE__ */ jsx(Presence, {
+		present: hasFiles,
+		forceMount,
+		children: /* @__PURE__ */ jsx(Component$1, {
+			...propGetters.getFileListProps({
+				...disableInternalStateSubscription && { "data-state": hasFiles ? "active" : "inactive" },
+				...restOfProps
+			}),
+			children: isFunction(children) ? childrenMap[renderMode]() : children
+		})
+	});
+}
+function DropZoneFileItem(props) {
+	const { as: Element = "li", asChild, fileState,...restOfProps } = props;
+	const { propGetters } = useDropZoneRootContext();
+	const Component$1 = asChild ? SlotRoot : Element;
+	const contextValue = useMemo(() => ({ fileState }), [fileState]);
+	return /* @__PURE__ */ jsx(FileItemContextProvider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx(Component$1, { ...propGetters.getFileItemProps(restOfProps) })
+	});
+}
+function DropZoneFileItemDelete(props) {
+	const { asChild, fileStateOrID,...restOfProps } = props;
+	const { propGetters } = useDropZoneRootContext();
+	const fileItemContextValue = useFileItemContext();
+	const Component$1 = asChild ? SlotRoot : "button";
+	const resolvedFileStateOrID = fileStateOrID ?? fileItemContextValue?.fileState;
+	return /* @__PURE__ */ jsx(Component$1, { ...propGetters.getFileItemDeleteProps({
+		fileStateOrID: resolvedFileStateOrID,
+		...restOfProps
+	}) });
+}
+function DropZoneFileItemProgress(props) {
+	const { as: Element = "span", asChild, forceMount = false, size = 40, variant = "linear",...restOfProps } = props;
+	const fileState = useFileItemContext()?.fileState;
+	const { propGetters } = useDropZoneRootContext();
+	if (!fileState) return null;
+	const currentProgress = fileState.progress;
+	if (!(forceMount || fileState.progress !== 100)) return null;
+	const Component$1 = asChild ? SlotRoot : Element;
+	const componentProps = propGetters.getFileItemProgressProps({
+		variant,
+		...restOfProps
+	});
+	switch (variant) {
+		case "circular": {
+			const circumference = 2 * Math.PI * ((size - 4) / 2);
+			const strokeDashoffset = circumference - currentProgress / 100 * circumference;
+			return /* @__PURE__ */ jsx(Component$1, {
+				...componentProps,
+				children: /* @__PURE__ */ jsxs("svg", {
+					className: "-rotate-90",
+					width: size,
+					height: size,
+					viewBox: `0 0 ${size} ${size}`,
+					fill: "none",
+					stroke: "currentColor",
+					children: [/* @__PURE__ */ jsx("circle", {
+						className: "text-zu-primary/20",
+						strokeWidth: "2",
+						cx: size / 2,
+						cy: size / 2,
+						r: (size - 4) / 2
+					}), /* @__PURE__ */ jsx("circle", {
+						className: "text-zu-primary transition-[stroke-dashoffset] duration-300 ease-linear",
+						strokeWidth: "2",
+						strokeLinecap: "round",
+						strokeDasharray: circumference,
+						strokeDashoffset,
+						cx: size / 2,
+						cy: size / 2,
+						r: (size - 4) / 2
+					})]
+				})
+			});
+		}
+		case "fill": {
+			const topInset = 100 - currentProgress;
+			return /* @__PURE__ */ jsx(Component$1, {
+				...componentProps,
+				style: { "--clip-path": `inset(${topInset}% 0% 0% 0%)` }
+			});
+		}
+		case "linear": return /* @__PURE__ */ jsx(Component$1, {
+			...componentProps,
+			children: /* @__PURE__ */ jsx("span", {
+				className: "inline-block size-full grow translate-x-(--translate-distance) bg-zu-primary transition-transform duration-300 ease-linear",
+				style: { "--translate-distance": `-${100 - currentProgress}%` }
+			})
+		});
+		default: return null;
+	}
+}
+function DropZoneFileItemPreview(props) {
+	const { as: Element = "span", asChild, children, fileState: fileStateProp, renderPreview = true,...restOfProps } = props;
+	const fileItemContextValue = useFileItemContext();
+	const { propGetters } = useDropZoneRootContext();
+	const fileState = fileStateProp ?? fileItemContextValue?.fileState;
+	if (!fileState) return null;
+	const Component$1 = asChild ? SlotRoot : Element;
+	const resolvedChildren = isFunction(children) ? children({ fileState }) : children;
+	return /* @__PURE__ */ jsxs(Component$1, {
+		...propGetters.getFileItemPreviewProps(restOfProps),
+		children: [renderPreview && getFilePreviewOrIcon({
+			fileState,
+			renderPreview
+		}), resolvedChildren]
+	});
+}
+const getFilePreviewOrIcon = (context) => {
+	const { fileState, renderPreview } = context;
+	const type = fileState?.file.type;
+	const extension = fileState?.file.name?.split(".").pop()?.toLowerCase() ?? "";
+	const renderPreviewObject = isFunction(renderPreview) ? renderPreview({ fileState }) : {};
+	const getDefaultPreview = () => {
+		return renderPreviewObject.default?.node ?? /* @__PURE__ */ jsx(FileIcon, { className: renderPreviewObject.default?.className });
+	};
+	if (!type) return getDefaultPreview();
+	switch (true) {
+		case type.startsWith("image/"): return renderPreviewObject.image?.node ?? /* @__PURE__ */ jsx("img", {
+			src: fileState.preview,
+			alt: fileState.file.name,
+			className: cnMerge("size-full object-cover", renderPreviewObject.image?.className)
+		});
+		case type.startsWith("video/"): return renderPreviewObject.video?.node ?? /* @__PURE__ */ jsx(FileVideoIcon, { className: cnMerge("size-full object-cover", renderPreviewObject.video?.className) });
+		case type.startsWith("audio/"): return renderPreviewObject.audio?.node ?? /* @__PURE__ */ jsx(FileAudioIcon, { className: cnMerge("size-full object-cover", renderPreviewObject.audio?.className) });
+		case type.startsWith("text/") || [
+			"md",
+			"pdf",
+			"rtf",
+			"txt"
+		].includes(extension): return renderPreviewObject.text?.node ?? /* @__PURE__ */ jsx(FileTextIcon, { className: renderPreviewObject.text?.className });
+		case [
+			"c",
+			"cpp",
+			"cs",
+			"css",
+			"html",
+			"java",
+			"js",
+			"json",
+			"jsx",
+			"php",
+			"py",
+			"rb",
+			"ts",
+			"tsx",
+			"xml"
+		].includes(extension): return renderPreviewObject.code?.node ?? /* @__PURE__ */ jsx(FileCodeIcon, { className: renderPreviewObject.code?.className });
+		case [
+			"7z",
+			"bz2",
+			"gz",
+			"rar",
+			"tar",
+			"zip"
+		].includes(extension): return renderPreviewObject.archive?.node ?? /* @__PURE__ */ jsx(FileArchiveIcon, { className: renderPreviewObject.archive?.className });
+		case [
+			"apk",
+			"app",
+			"deb",
+			"exe",
+			"msi",
+			"rpm"
+		].includes(extension): return renderPreviewObject.executable?.node ?? /* @__PURE__ */ jsx(FileCogIcon, { className: renderPreviewObject.executable?.className });
+		default: return getDefaultPreview();
+	}
+};
+function DropZoneFileItemMetadata(props) {
+	const { asChild, children, classNames, fileState: fileStateProp, size = "default",...restOfProps } = props;
+	const fileItemContextValue = useFileItemContext();
+	const { propGetters } = useDropZoneRootContext();
+	const fileState = fileStateProp ?? fileItemContextValue?.fileState;
+	if (!fileState) return null;
+	const Component$1 = asChild ? SlotRoot : "div";
+	const resolvedChildren = isFunction(children) ? children({ fileState }) : children;
+	const getDefaultMetadataChildren = () => {
+		return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			/* @__PURE__ */ jsx("p", {
+				className: cnMerge("truncate", size === "default" && "text-[14px] font-medium", size === "sm" && "text-[13px] leading-snug", classNames?.name),
+				children: fileState.file.name
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: cnMerge("truncate text-zu-muted-foreground", size === "default" && "text-[12px]", size === "sm" && "text-[11px] leading-snug", classNames?.size),
+				children: isNumber(fileState.file.size) && formatBytes(fileState.file.size)
+			}),
+			fileState.error && /* @__PURE__ */ jsx("p", {
+				className: "text-[12px] text-zu-destructive",
+				children: fileState.error.message
+			})
+		] });
+	};
+	return /* @__PURE__ */ jsx(Component$1, {
+		...propGetters.getFileItemMetadataProps(restOfProps),
+		children: resolvedChildren ?? getDefaultMetadataChildren()
+	});
+}
+function DropZoneFileClear(props) {
+	const { asChild, forceMount = false,...restOfProps } = props;
+	const { propGetters } = useDropZoneRootContext();
+	const fileCount = useDropZoneStoreContext((state) => state.fileStateArray.length);
+	if (!(forceMount || fileCount > 0)) return null;
+	const Component$1 = asChild ? SlotRoot : "button";
+	return /* @__PURE__ */ jsx(Component$1, { ...propGetters.getFileItemClearProps(restOfProps) });
+}
+
+//#endregion
+//#region src/components/ui/drop-zone/drop-zone-parts.ts
+var drop_zone_parts_exports = __export({
+	Area: () => DropZoneArea,
+	Container: () => DropZoneContainer,
+	Context: () => DropZoneContext,
+	FileClear: () => DropZoneFileClear,
+	FileItem: () => DropZoneFileItem,
+	FileItemDelete: () => DropZoneFileItemDelete,
+	FileItemMetadata: () => DropZoneFileItemMetadata,
+	FileItemPreview: () => DropZoneFileItemPreview,
+	FileItemProgress: () => DropZoneFileItemProgress,
+	FileList: () => DropZoneFileList,
+	Input: () => DropZoneInput,
+	Root: () => DropZoneRoot,
+	Trigger: () => DropZoneTrigger
+});
+
+//#endregion
+export { DropZoneArea, DropZoneContainer, DropZoneContext, DropZoneError, DropZoneFileClear, DropZoneFileItem, DropZoneFileItemDelete, DropZoneFileItemMetadata, DropZoneFileItemPreview, DropZoneFileItemProgress, DropZoneFileList, DropZoneInput, DropZoneRoot, DropZoneTrigger, drop_zone_parts_exports, useDropZone, useDropZoneStoreContext };
+//# sourceMappingURL=drop-zone-5dDyxv_f.js.map