@zayne-labs/ui-react 0.10.9 → 0.10.11

package/dist/esm/drop-zone-FkkbzZ3j.js

@@ -1,1019 +0,0 @@
-import { __export } from "./chunk-CTAAG5j7.js";
-import { SlotRoot } from "./slot-WVWfOlr3.js";
-import { For } from "./for-DK5rEY_m.js";
-import { cnMerge } from "./cn-s-D7vHW1.js";
-import { Presence } from "./presence-CL5_GHQH.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) => ({
-		disabled: false,
-		errors: [],
-		fileStateArray: initFileStateArray,
-		isDraggingOver: false,
-		isInvalid: false,
-		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: [],
-					isInvalid: false
-				});
-			},
-			clearFiles: () => {
-				const { actions } = get();
-				actions.clearObjectURLs();
-				set({
-					errors: [],
-					fileStateArray: [],
-					isInvalid: false
-				});
-			},
-			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 });
-			}
-		}
-	}));
-	store.subscribe.withSelector((state) => state.fileStateArray, (fileStateArray) => onFilesChange?.({ fileStateArray }));
-	store.subscribe.withSelector((state) => state.errors, (errors) => {
-		if (errors.length === 0) return;
-		store.setState({ isInvalid: true });
-	});
-	store.subscribe.withSelector((state) => state.isInvalid, (isInvalid) => {
-		if (!isInvalid) return;
-		setTimeout(() => store.setState({ isInvalid: !isInvalid }), 1500);
-	});
-	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 isInvalid = useDropZoneStore((state) => !disableInternalStateSubscription ? state.isInvalid : 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),
-				"data-invalid": dataAttr(isInvalid)
-			},
-			...innerProps,
-			className: cnMerge(`relative flex flex-col items-center justify-center gap-2 rounded-lg border-2 border-dashed
-					p-6 transition-colors duration-250 ease-out 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 data-[dragging]:bg-zu-accent/30
-					data-[invalid]:border-zu-destructive data-[invalid]:ring-zu-destructive/20`, 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,
-		isInvalid,
-		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 isInvalid = useDropZoneStoreContext((store) => disableInternalStateSubscription ? store.isInvalid : null);
-	const Component$1 = asChild ? SlotRoot : Element;
-	return /* @__PURE__ */ jsx(Component$1, { ...propGetters.getContainerProps({
-		...disableInternalStateSubscription && {
-			"data-drag-over": dataAttr(isDraggingOver),
-			"data-invalid": dataAttr(isInvalid)
-		},
-		...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 fileType = fileState.file.type ?? "";
-	const fileExtension = fileState.file.name?.split(".").pop()?.toLowerCase() ?? "";
-	const Component$1 = asChild ? SlotRoot : Element;
-	const resolvedChildren = isFunction(children) ? children({
-		fileExtension,
-		fileState,
-		fileType
-	}) : children;
-	return /* @__PURE__ */ jsxs(Component$1, {
-		...propGetters.getFileItemPreviewProps(restOfProps),
-		children: [renderPreview && getFilePreviewOrIcon({
-			fileExtension,
-			fileState,
-			fileType,
-			renderPreview
-		}), resolvedChildren]
-	});
-}
-const getFilePreviewOrIcon = (context) => {
-	const { fileExtension, fileState, fileType, renderPreview } = context;
-	const renderPreviewObject = isFunction(renderPreview) ? renderPreview({
-		fileExtension,
-		fileState,
-		fileType
-	}) : {};
-	switch (true) {
-		case fileType.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 fileType.startsWith("video/"): return renderPreviewObject.video?.node ?? /* @__PURE__ */ jsx(FileVideoIcon, { className: cnMerge("size-full object-cover", renderPreviewObject.video?.className) });
-		case fileType.startsWith("audio/"): return renderPreviewObject.audio?.node ?? /* @__PURE__ */ jsx(FileAudioIcon, { className: cnMerge("size-full object-cover", renderPreviewObject.audio?.className) });
-		case fileType.startsWith("text/") || [
-			"md",
-			"pdf",
-			"rtf",
-			"txt"
-		].includes(fileExtension): 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(fileExtension): return renderPreviewObject.code?.node ?? /* @__PURE__ */ jsx(FileCodeIcon, { className: renderPreviewObject.code?.className });
-		case [
-			"7z",
-			"bz2",
-			"gz",
-			"rar",
-			"tar",
-			"zip"
-		].includes(fileExtension): return renderPreviewObject.archive?.node ?? /* @__PURE__ */ jsx(FileArchiveIcon, { className: renderPreviewObject.archive?.className });
-		case [
-			"apk",
-			"app",
-			"deb",
-			"exe",
-			"msi",
-			"rpm"
-		].includes(fileExtension): return renderPreviewObject.executable?.node ?? /* @__PURE__ */ jsx(FileCogIcon, { className: renderPreviewObject.executable?.className });
-		default: return renderPreviewObject.default?.node ?? /* @__PURE__ */ jsx(FileIcon, { className: renderPreviewObject.default?.className });
-	}
-};
-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-FkkbzZ3j.js.map