@rakun-kit/manager-react 1.0.0

package/dist/esm/components/ui/file-upload.js

@@ -0,0 +1,722 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { FileArchiveIcon, FileAudioIcon, FileCodeIcon, FileCogIcon, FileIcon, FileTextIcon, FileVideoIcon, } from 'lucide-react';
+import { Direction as DirectionPrimitive, Slot as SlotPrimitive, } from 'radix-ui';
+import * as React from 'react';
+import { cn } from '../../lib/utils.js';
+import { useAsRef } from '../../hooks/use-as-ref.js';
+import { useLazyRef } from '../../hooks/use-lazy-ref.js';
+const ROOT_NAME = 'FileUpload';
+const DROPZONE_NAME = 'FileUploadDropzone';
+const TRIGGER_NAME = 'FileUploadTrigger';
+const LIST_NAME = 'FileUploadList';
+const ITEM_NAME = 'FileUploadItem';
+const ITEM_PREVIEW_NAME = 'FileUploadItemPreview';
+const ITEM_METADATA_NAME = 'FileUploadItemMetadata';
+const ITEM_PROGRESS_NAME = 'FileUploadItemProgress';
+const ITEM_DELETE_NAME = 'FileUploadItemDelete';
+const CLEAR_NAME = 'FileUploadClear';
+function formatBytes(bytes) {
+    if (bytes === 0)
+        return '0 B';
+    const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(1024));
+    return `${(bytes / 1024 ** i).toFixed(i ? 1 : 0)} ${sizes[i]}`;
+}
+function getFileIcon(file) {
+    const type = file.type;
+    const extension = file.name.split('.').pop()?.toLowerCase() ?? '';
+    if (type.startsWith('video/')) {
+        return _jsx(FileVideoIcon, {});
+    }
+    if (type.startsWith('audio/')) {
+        return _jsx(FileAudioIcon, {});
+    }
+    if (type.startsWith('text/') ||
+        ['txt', 'md', 'rtf', 'pdf'].includes(extension)) {
+        return _jsx(FileTextIcon, {});
+    }
+    if ([
+        'html',
+        'css',
+        'js',
+        'jsx',
+        'ts',
+        'tsx',
+        'json',
+        'xml',
+        'php',
+        'py',
+        'rb',
+        'java',
+        'c',
+        'cpp',
+        'cs',
+    ].includes(extension)) {
+        return _jsx(FileCodeIcon, {});
+    }
+    if (['zip', 'rar', '7z', 'tar', 'gz', 'bz2'].includes(extension)) {
+        return _jsx(FileArchiveIcon, {});
+    }
+    if (['exe', 'msi', 'app', 'apk', 'deb', 'rpm'].includes(extension) ||
+        type.startsWith('application/')) {
+        return _jsx(FileCogIcon, {});
+    }
+    return _jsx(FileIcon, {});
+}
+const StoreContext = React.createContext(null);
+function useStoreContext(consumerName) {
+    const context = React.useContext(StoreContext);
+    if (!context) {
+        throw new Error(`\`${consumerName}\` must be used within \`${ROOT_NAME}\``);
+    }
+    return context;
+}
+function useStore(selector) {
+    const store = useStoreContext('useStore');
+    const lastValueRef = useLazyRef(() => null);
+    const getSnapshot = React.useCallback(() => {
+        const state = store.getState();
+        const prevValue = lastValueRef.current;
+        if (prevValue && prevValue.state === state) {
+            return prevValue.value;
+        }
+        const nextValue = selector(state);
+        lastValueRef.current = { value: nextValue, state };
+        return nextValue;
+    }, [store, selector, lastValueRef]);
+    return React.useSyncExternalStore(store.subscribe, getSnapshot, getSnapshot);
+}
+const FileUploadContext = React.createContext(null);
+function useFileUploadContext(consumerName) {
+    const context = React.useContext(FileUploadContext);
+    if (!context) {
+        throw new Error(`\`${consumerName}\` must be used within \`${ROOT_NAME}\``);
+    }
+    return context;
+}
+function FileUpload(props) {
+    const { value, defaultValue, onValueChange, onAccept, onFileAccept, onFileReject, onFileValidate, onUpload, accept, maxFiles, maxSize, dir: dirProp, label, name, asChild, disabled = false, invalid = false, multiple = false, required = false, children, className, ...rootProps } = props;
+    const inputId = React.useId();
+    const dropzoneId = React.useId();
+    const listId = React.useId();
+    const labelId = React.useId();
+    const dir = DirectionPrimitive.useDirection(dirProp);
+    const listeners = useLazyRef(() => new Set()).current;
+    const files = useLazyRef(() => new Map()).current;
+    const urlCache = useLazyRef(() => new WeakMap()).current;
+    const inputRef = React.useRef(null);
+    const isControlled = value !== undefined;
+    const propsRef = useAsRef({
+        onValueChange,
+        onAccept,
+        onFileAccept,
+        onFileReject,
+        onFileValidate,
+        onUpload,
+    });
+    const store = React.useMemo(() => {
+        let state = {
+            files,
+            dragOver: false,
+            invalid: invalid,
+        };
+        function reducer(state, action) {
+            switch (action.type) {
+                case 'ADD_FILES': {
+                    for (const file of action.files) {
+                        files.set(file, {
+                            file,
+                            progress: 0,
+                            status: 'idle',
+                        });
+                    }
+                    if (propsRef.current.onValueChange) {
+                        const fileList = Array.from(files.values()).map((fileState) => fileState.file);
+                        propsRef.current.onValueChange(fileList);
+                    }
+                    return { ...state, files };
+                }
+                case 'SET_FILES': {
+                    const newFileSet = new Set(action.files);
+                    for (const existingFile of files.keys()) {
+                        if (!newFileSet.has(existingFile)) {
+                            files.delete(existingFile);
+                        }
+                    }
+                    for (const file of action.files) {
+                        const existingState = files.get(file);
+                        if (!existingState) {
+                            files.set(file, {
+                                file,
+                                progress: 0,
+                                status: 'idle',
+                            });
+                        }
+                    }
+                    return { ...state, files };
+                }
+                case 'SET_PROGRESS': {
+                    const fileState = files.get(action.file);
+                    if (fileState) {
+                        files.set(action.file, {
+                            ...fileState,
+                            progress: action.progress,
+                            status: 'uploading',
+                        });
+                    }
+                    return { ...state, files };
+                }
+                case 'SET_SUCCESS': {
+                    const fileState = files.get(action.file);
+                    if (fileState) {
+                        files.set(action.file, {
+                            ...fileState,
+                            progress: 100,
+                            status: 'success',
+                        });
+                    }
+                    return { ...state, files };
+                }
+                case 'SET_ERROR': {
+                    const fileState = files.get(action.file);
+                    if (fileState) {
+                        files.set(action.file, {
+                            ...fileState,
+                            error: action.error,
+                            status: 'error',
+                        });
+                    }
+                    return { ...state, files };
+                }
+                case 'REMOVE_FILE': {
+                    const cachedUrl = urlCache.get(action.file);
+                    if (cachedUrl) {
+                        URL.revokeObjectURL(cachedUrl);
+                        urlCache.delete(action.file);
+                    }
+                    files.delete(action.file);
+                    if (propsRef.current.onValueChange) {
+                        const fileList = Array.from(files.values()).map((fileState) => fileState.file);
+                        propsRef.current.onValueChange(fileList);
+                    }
+                    return { ...state, files };
+                }
+                case 'SET_DRAG_OVER': {
+                    return { ...state, dragOver: action.dragOver };
+                }
+                case 'SET_INVALID': {
+                    return { ...state, invalid: action.invalid };
+                }
+                case 'CLEAR': {
+                    for (const file of files.keys()) {
+                        const cachedUrl = urlCache.get(file);
+                        if (cachedUrl) {
+                            URL.revokeObjectURL(cachedUrl);
+                            urlCache.delete(file);
+                        }
+                    }
+                    files.clear();
+                    if (propsRef.current.onValueChange) {
+                        propsRef.current.onValueChange([]);
+                    }
+                    return { ...state, files, invalid: false };
+                }
+                default:
+                    return state;
+            }
+        }
+        return {
+            getState: () => state,
+            dispatch: (action) => {
+                state = reducer(state, action);
+                for (const listener of listeners) {
+                    listener();
+                }
+            },
+            subscribe: (listener) => {
+                listeners.add(listener);
+                return () => listeners.delete(listener);
+            },
+        };
+    }, [listeners, files, invalid, propsRef, urlCache]);
+    const acceptTypes = React.useMemo(() => accept?.split(',').map((t) => t.trim()) ?? null, [accept]);
+    const onProgress = useLazyRef(() => {
+        let frame = 0;
+        return (file, progress) => {
+            if (frame)
+                return;
+            frame = requestAnimationFrame(() => {
+                frame = 0;
+                store.dispatch({
+                    type: 'SET_PROGRESS',
+                    file,
+                    progress: Math.min(Math.max(0, progress), 100),
+                });
+            });
+        };
+    }).current;
+    React.useEffect(() => {
+        if (isControlled) {
+            store.dispatch({ type: 'SET_FILES', files: value });
+        }
+        else if (defaultValue &&
+            defaultValue.length > 0 &&
+            !store.getState().files.size) {
+            store.dispatch({ type: 'SET_FILES', files: defaultValue });
+        }
+    }, [value, defaultValue, isControlled, store]);
+    React.useEffect(() => {
+        return () => {
+            for (const file of files.keys()) {
+                const cachedUrl = urlCache.get(file);
+                if (cachedUrl) {
+                    URL.revokeObjectURL(cachedUrl);
+                }
+            }
+        };
+    }, [files, urlCache]);
+    const onFilesUpload = React.useCallback(async (files) => {
+        try {
+            for (const file of files) {
+                store.dispatch({ type: 'SET_PROGRESS', file, progress: 0 });
+            }
+            if (propsRef.current.onUpload) {
+                await propsRef.current.onUpload(files, {
+                    onProgress,
+                    onSuccess: (file) => {
+                        store.dispatch({ type: 'SET_SUCCESS', file });
+                    },
+                    onError: (file, error) => {
+                        store.dispatch({
+                            type: 'SET_ERROR',
+                            file,
+                            error: error.message ?? 'Upload failed',
+                        });
+                    },
+                });
+            }
+            else {
+                for (const file of files) {
+                    store.dispatch({ type: 'SET_SUCCESS', file });
+                }
+            }
+        }
+        catch (error) {
+            const errorMessage = error instanceof Error ? error.message : 'Upload failed';
+            for (const file of files) {
+                store.dispatch({
+                    type: 'SET_ERROR',
+                    file,
+                    error: errorMessage,
+                });
+            }
+        }
+    }, [store, propsRef, onProgress]);
+    const onFilesChange = React.useCallback((originalFiles) => {
+        if (disabled)
+            return;
+        let filesToProcess = [...originalFiles];
+        let invalid = false;
+        if (maxFiles) {
+            const currentCount = store.getState().files.size;
+            const remainingSlotCount = Math.max(0, maxFiles - currentCount);
+            if (remainingSlotCount < filesToProcess.length) {
+                const rejectedFiles = filesToProcess.slice(remainingSlotCount);
+                invalid = true;
+                filesToProcess = filesToProcess.slice(0, remainingSlotCount);
+                for (const file of rejectedFiles) {
+                    let rejectionMessage = `Maximum ${maxFiles} files allowed`;
+                    if (propsRef.current.onFileValidate) {
+                        const validationMessage = propsRef.current.onFileValidate(file);
+                        if (validationMessage) {
+                            rejectionMessage = validationMessage;
+                        }
+                    }
+                    propsRef.current.onFileReject?.(file, rejectionMessage);
+                }
+            }
+        }
+        const acceptedFiles = [];
+        const rejectedFiles = [];
+        for (const file of filesToProcess) {
+            let rejected = false;
+            let rejectionMessage = '';
+            if (propsRef.current.onFileValidate) {
+                const validationMessage = propsRef.current.onFileValidate(file);
+                if (validationMessage) {
+                    rejectionMessage = validationMessage;
+                    propsRef.current.onFileReject?.(file, rejectionMessage);
+                    rejected = true;
+                    invalid = true;
+                    continue;
+                }
+            }
+            if (acceptTypes) {
+                const fileType = file.type;
+                const fileExtension = `.${file.name.split('.').pop()}`;
+                if (!acceptTypes.some((type) => type === fileType ||
+                    type === fileExtension ||
+                    (type.includes('/*') &&
+                        fileType.startsWith(type.replace('/*', '/'))))) {
+                    rejectionMessage = 'File type not accepted';
+                    propsRef.current.onFileReject?.(file, rejectionMessage);
+                    rejected = true;
+                    invalid = true;
+                }
+            }
+            if (maxSize && file.size > maxSize) {
+                rejectionMessage = 'File too large';
+                propsRef.current.onFileReject?.(file, rejectionMessage);
+                rejected = true;
+                invalid = true;
+            }
+            if (!rejected) {
+                acceptedFiles.push(file);
+            }
+            else {
+                rejectedFiles.push({ file, message: rejectionMessage });
+            }
+        }
+        if (invalid) {
+            store.dispatch({ type: 'SET_INVALID', invalid });
+            setTimeout(() => {
+                store.dispatch({ type: 'SET_INVALID', invalid: false });
+            }, 2000);
+        }
+        if (acceptedFiles.length > 0) {
+            store.dispatch({ type: 'ADD_FILES', files: acceptedFiles });
+            if (isControlled && propsRef.current.onValueChange) {
+                const currentFiles = Array.from(store.getState().files.values()).map((f) => f.file);
+                propsRef.current.onValueChange([...currentFiles]);
+            }
+            if (propsRef.current.onAccept) {
+                propsRef.current.onAccept(acceptedFiles);
+            }
+            for (const file of acceptedFiles) {
+                propsRef.current.onFileAccept?.(file);
+            }
+            if (propsRef.current.onUpload) {
+                requestAnimationFrame(() => {
+                    onFilesUpload(acceptedFiles);
+                });
+            }
+        }
+    }, [
+        store,
+        isControlled,
+        propsRef,
+        onFilesUpload,
+        maxFiles,
+        acceptTypes,
+        maxSize,
+        disabled,
+    ]);
+    const onInputChange = React.useCallback((event) => {
+        const files = Array.from(event.target.files ?? []);
+        onFilesChange(files);
+        event.target.value = '';
+    }, [onFilesChange]);
+    const contextValue = React.useMemo(() => ({
+        dropzoneId,
+        inputId,
+        listId,
+        labelId,
+        dir,
+        disabled,
+        inputRef,
+        urlCache,
+    }), [dropzoneId, inputId, listId, labelId, dir, disabled, urlCache]);
+    const RootPrimitive = asChild ? SlotPrimitive.Slot : 'div';
+    return (_jsx(StoreContext.Provider, { value: store, children: _jsx(FileUploadContext.Provider, { value: contextValue, children: _jsxs(RootPrimitive, { "data-disabled": disabled ? '' : undefined, "data-slot": 'file-upload', dir: dir, ...rootProps, className: cn('relative flex flex-col gap-2', className), children: [children, _jsx("input", { type: 'file', id: inputId, "aria-labelledby": labelId, "aria-describedby": dropzoneId, ref: inputRef, tabIndex: -1, accept: accept, name: name, className: 'sr-only', disabled: disabled, multiple: multiple, required: required, onChange: onInputChange }), _jsx("div", { id: labelId, className: 'sr-only', children: label ?? 'File upload' })] }) }) }));
+}
+function FileUploadDropzone(props) {
+    const { asChild, className, onClick: onClickProp, onDragOver: onDragOverProp, onDragEnter: onDragEnterProp, onDragLeave: onDragLeaveProp, onDrop: onDropProp, onPaste: onPasteProp, onKeyDown: onKeyDownProp, ...dropzoneProps } = props;
+    const context = useFileUploadContext(DROPZONE_NAME);
+    const store = useStoreContext(DROPZONE_NAME);
+    const dragOver = useStore((state) => state.dragOver);
+    const invalid = useStore((state) => state.invalid);
+    const propsRef = useAsRef({
+        onClick: onClickProp,
+        onDragOver: onDragOverProp,
+        onDragEnter: onDragEnterProp,
+        onDragLeave: onDragLeaveProp,
+        onDrop: onDropProp,
+        onPaste: onPasteProp,
+        onKeyDown: onKeyDownProp,
+    });
+    const onClick = React.useCallback((event) => {
+        propsRef.current.onClick?.(event);
+        if (event.defaultPrevented)
+            return;
+        const target = event.target;
+        const isFromTrigger = target instanceof HTMLElement &&
+            target.closest('[data-slot="file-upload-trigger"]');
+        if (!isFromTrigger) {
+            context.inputRef.current?.click();
+        }
+    }, [context.inputRef, propsRef]);
+    const onDragOver = React.useCallback((event) => {
+        propsRef.current.onDragOver?.(event);
+        if (event.defaultPrevented)
+            return;
+        if (!event.dataTransfer?.types?.includes('Files'))
+            return;
+        event.preventDefault();
+        store.dispatch({ type: 'SET_DRAG_OVER', dragOver: true });
+    }, [store, propsRef]);
+    const onDragEnter = React.useCallback((event) => {
+        propsRef.current.onDragEnter?.(event);
+        if (event.defaultPrevented)
+            return;
+        if (!event.dataTransfer?.types?.includes('Files'))
+            return;
+        event.preventDefault();
+        store.dispatch({ type: 'SET_DRAG_OVER', dragOver: true });
+    }, [store, propsRef]);
+    const onDragLeave = React.useCallback((event) => {
+        propsRef.current.onDragLeave?.(event);
+        if (event.defaultPrevented)
+            return;
+        if (!event.dataTransfer?.types?.includes('Files'))
+            return;
+        const relatedTarget = event.relatedTarget;
+        if (relatedTarget &&
+            relatedTarget instanceof Node &&
+            event.currentTarget.contains(relatedTarget)) {
+            return;
+        }
+        event.preventDefault();
+        store.dispatch({ type: 'SET_DRAG_OVER', dragOver: false });
+    }, [store, propsRef]);
+    const onDrop = React.useCallback((event) => {
+        propsRef.current.onDrop?.(event);
+        if (event.defaultPrevented)
+            return;
+        if (!event.dataTransfer?.types?.includes('Files'))
+            return;
+        event.preventDefault();
+        store.dispatch({ type: 'SET_DRAG_OVER', dragOver: false });
+        const files = Array.from(event.dataTransfer.files);
+        const inputElement = context.inputRef.current;
+        if (!inputElement)
+            return;
+        const dataTransfer = new DataTransfer();
+        for (const file of files) {
+            dataTransfer.items.add(file);
+        }
+        inputElement.files = dataTransfer.files;
+        inputElement.dispatchEvent(new Event('change', { bubbles: true }));
+    }, [store, context.inputRef, propsRef]);
+    const onPaste = React.useCallback((event) => {
+        propsRef.current.onPaste?.(event);
+        if (event.defaultPrevented)
+            return;
+        event.preventDefault();
+        store.dispatch({ type: 'SET_DRAG_OVER', dragOver: false });
+        const items = event.clipboardData?.items;
+        if (!items)
+            return;
+        const files = [];
+        for (let i = 0; i < items.length; i++) {
+            const item = items[i];
+            if (item?.kind === 'file') {
+                const file = item.getAsFile();
+                if (file) {
+                    files.push(file);
+                }
+            }
+        }
+        if (files.length === 0)
+            return;
+        const inputElement = context.inputRef.current;
+        if (!inputElement)
+            return;
+        const dataTransfer = new DataTransfer();
+        for (const file of files) {
+            dataTransfer.items.add(file);
+        }
+        inputElement.files = dataTransfer.files;
+        inputElement.dispatchEvent(new Event('change', { bubbles: true }));
+    }, [store, context.inputRef, propsRef]);
+    const onKeyDown = React.useCallback((event) => {
+        propsRef.current.onKeyDown?.(event);
+        if (!event.defaultPrevented &&
+            (event.key === 'Enter' || event.key === ' ')) {
+            event.preventDefault();
+            context.inputRef.current?.click();
+        }
+    }, [context.inputRef, propsRef]);
+    const DropzonePrimitive = asChild ? SlotPrimitive.Slot : 'div';
+    return (_jsx(DropzonePrimitive, { role: 'region', id: context.dropzoneId, "aria-controls": `${context.inputId} ${context.listId}`, "aria-disabled": context.disabled, "aria-invalid": invalid, "data-disabled": context.disabled ? '' : undefined, "data-dragging": dragOver ? '' : undefined, "data-invalid": invalid ? '' : undefined, "data-slot": 'file-upload-dropzone', dir: context.dir, tabIndex: context.disabled ? undefined : 0, ...dropzoneProps, className: cn('relative flex select-none flex-col items-center justify-center gap-2 rounded-lg border-2 border-dashed p-6 outline-none transition-colors hover:bg-accent/30 focus-visible:border-ring/50 data-disabled:pointer-events-none data-dragging:border-primary/30 data-invalid:border-destructive data-dragging:bg-accent/30 data-invalid:ring-destructive/20', className), onClick: onClick, onDragEnter: onDragEnter, onDragLeave: onDragLeave, onDragOver: onDragOver, onDrop: onDrop, onKeyDown: onKeyDown, onPaste: onPaste }));
+}
+function FileUploadTrigger(props) {
+    const { asChild, onClick: onClickProp, ...triggerProps } = props;
+    const context = useFileUploadContext(TRIGGER_NAME);
+    const propsRef = useAsRef({
+        onClick: onClickProp,
+    });
+    const onClick = React.useCallback((event) => {
+        propsRef.current.onClick?.(event);
+        if (event.defaultPrevented)
+            return;
+        context.inputRef.current?.click();
+    }, [context.inputRef, propsRef]);
+    const TriggerPrimitive = asChild ? SlotPrimitive.Slot : 'button';
+    return (_jsx(TriggerPrimitive, { type: 'button', "aria-controls": context.inputId, "data-disabled": context.disabled ? '' : undefined, "data-slot": 'file-upload-trigger', ...triggerProps, disabled: context.disabled, onClick: onClick }));
+}
+function FileUploadList(props) {
+    const { className, orientation = 'vertical', asChild, forceMount, ...listProps } = props;
+    const context = useFileUploadContext(LIST_NAME);
+    const fileCount = useStore((state) => state.files.size);
+    const shouldRender = forceMount || fileCount > 0;
+    if (!shouldRender)
+        return null;
+    const ListPrimitive = asChild ? SlotPrimitive.Slot : 'div';
+    return (_jsx(ListPrimitive, { role: 'list', id: context.listId, "aria-orientation": orientation, "data-orientation": orientation, "data-slot": 'file-upload-list', "data-state": shouldRender ? 'active' : 'inactive', dir: context.dir, ...listProps, className: cn('data-[state=inactive]:fade-out-0 data-[state=active]:fade-in-0 data-[state=inactive]:slide-out-to-top-2 data-[state=active]:slide-in-from-top-2 flex flex-col gap-2 data-[state=active]:animate-in data-[state=inactive]:animate-out', orientation === 'horizontal' && 'flex-row overflow-x-auto p-1.5', className) }));
+}
+const FileUploadItemContext = React.createContext(null);
+function useFileUploadItemContext(consumerName) {
+    const context = React.useContext(FileUploadItemContext);
+    if (!context) {
+        throw new Error(`\`${consumerName}\` must be used within \`${ITEM_NAME}\``);
+    }
+    return context;
+}
+function FileUploadItem(props) {
+    const { value, asChild, className, ...itemProps } = props;
+    const id = React.useId();
+    const statusId = `${id}-status`;
+    const nameId = `${id}-name`;
+    const sizeId = `${id}-size`;
+    const messageId = `${id}-message`;
+    const context = useFileUploadContext(ITEM_NAME);
+    const fileState = useStore((state) => state.files.get(value));
+    const fileCount = useStore((state) => state.files.size);
+    const fileIndex = useStore((state) => {
+        const files = Array.from(state.files.keys());
+        return files.indexOf(value) + 1;
+    });
+    const itemContext = React.useMemo(() => ({
+        id,
+        fileState,
+        nameId,
+        sizeId,
+        statusId,
+        messageId,
+    }), [id, fileState, statusId, nameId, sizeId, messageId]);
+    if (!fileState)
+        return null;
+    const statusText = fileState.error
+        ? `Error: ${fileState.error}`
+        : fileState.status === 'uploading'
+            ? `Uploading: ${fileState.progress}% complete`
+            : fileState.status === 'success'
+                ? 'Upload complete'
+                : 'Ready to upload';
+    const ItemPrimitive = asChild ? SlotPrimitive.Slot : 'div';
+    return (_jsx(FileUploadItemContext.Provider, { value: itemContext, children: _jsxs(ItemPrimitive, { role: 'listitem', id: id, "aria-setsize": fileCount, "aria-posinset": fileIndex, "aria-describedby": `${nameId} ${sizeId} ${statusId} ${fileState.error ? messageId : ''}`, "aria-labelledby": nameId, "data-slot": 'file-upload-item', dir: context.dir, ...itemProps, className: cn('relative flex items-center gap-2.5 rounded-md border p-3', className), children: [props.children, _jsx("span", { id: statusId, className: 'sr-only', children: statusText })] }) }));
+}
+function FileUploadItemPreview(props) {
+    const { render, asChild, children, className, ...previewProps } = props;
+    const itemContext = useFileUploadItemContext(ITEM_PREVIEW_NAME);
+    const context = useFileUploadContext(ITEM_PREVIEW_NAME);
+    const getDefaultRender = React.useCallback((file) => {
+        if (itemContext.fileState?.file.type.startsWith('image/')) {
+            let url = context.urlCache.get(file);
+            if (!url) {
+                url = URL.createObjectURL(file);
+                context.urlCache.set(file, url);
+            }
+            return (_jsx("img", { src: url, alt: file.name, className: 'size-full object-cover' }));
+        }
+        return getFileIcon(file);
+    }, [itemContext.fileState?.file.type, context.urlCache]);
+    const onPreviewRender = React.useCallback((file) => {
+        if (render) {
+            return render(file, () => getDefaultRender(file));
+        }
+        return getDefaultRender(file);
+    }, [render, getDefaultRender]);
+    if (!itemContext.fileState)
+        return null;
+    const ItemPreviewPrimitive = asChild ? SlotPrimitive.Slot : 'div';
+    return (_jsxs(ItemPreviewPrimitive, { "aria-labelledby": itemContext.nameId, "data-slot": 'file-upload-preview', ...previewProps, className: cn('relative flex size-10 shrink-0 items-center justify-center overflow-hidden rounded border bg-accent/50 [&>svg]:size-10', className), children: [onPreviewRender(itemContext.fileState.file), children] }));
+}
+function FileUploadItemMetadata(props) {
+    const { asChild, size = 'default', children, className, ...metadataProps } = props;
+    const context = useFileUploadContext(ITEM_METADATA_NAME);
+    const itemContext = useFileUploadItemContext(ITEM_METADATA_NAME);
+    if (!itemContext.fileState)
+        return null;
+    const ItemMetadataPrimitive = asChild ? SlotPrimitive.Slot : 'div';
+    return (_jsx(ItemMetadataPrimitive, { "data-slot": 'file-upload-metadata', dir: context.dir, ...metadataProps, className: cn('flex min-w-0 flex-1 flex-col', className), children: children ?? (_jsxs(_Fragment, { children: [_jsx("span", { id: itemContext.nameId, className: cn('truncate font-medium text-sm', size === 'sm' && 'font-normal text-[13px] leading-snug'), children: itemContext.fileState.file.name }), _jsx("span", { id: itemContext.sizeId, className: cn('truncate text-muted-foreground text-xs', size === 'sm' && 'text-[11px] leading-snug'), children: formatBytes(itemContext.fileState.file.size) }), itemContext.fileState.error && (_jsx("span", { id: itemContext.messageId, className: 'text-destructive text-xs', children: itemContext.fileState.error }))] })) }));
+}
+function FileUploadItemProgress(props) {
+    const { variant = 'linear', size = 40, asChild, forceMount, className, ...progressProps } = props;
+    const itemContext = useFileUploadItemContext(ITEM_PROGRESS_NAME);
+    if (!itemContext.fileState)
+        return null;
+    const shouldRender = forceMount || itemContext.fileState.progress !== 100;
+    if (!shouldRender)
+        return null;
+    const ItemProgressPrimitive = asChild ? SlotPrimitive.Slot : 'div';
+    switch (variant) {
+        case 'circular': {
+            const circumference = 2 * Math.PI * ((size - 4) / 2);
+            const strokeDashoffset = circumference - (itemContext.fileState.progress / 100) * circumference;
+            return (_jsx(ItemProgressPrimitive, { role: 'progressbar', "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": itemContext.fileState.progress, "aria-valuetext": `${itemContext.fileState.progress}%`, "aria-labelledby": itemContext.nameId, "data-slot": 'file-upload-progress', ...progressProps, className: cn('absolute top-1/2 start-1/2 -translate-x-1/2 rtl:translate-x-1/2 -translate-y-1/2', className), children: _jsxs("svg", { className: '-rotate-90 transform', width: size, height: size, viewBox: `0 0 ${size} ${size}`, fill: 'none', stroke: 'currentColor', children: [_jsx("circle", { className: 'text-primary/20', strokeWidth: '2', cx: size / 2, cy: size / 2, r: (size - 4) / 2 }), _jsx("circle", { className: 'text-primary transition-[stroke-dashoffset] duration-300 ease-linear', strokeWidth: '2', strokeLinecap: 'round', strokeDasharray: circumference, strokeDashoffset: strokeDashoffset, cx: size / 2, cy: size / 2, r: (size - 4) / 2 })] }) }));
+        }
+        case 'fill': {
+            const progressPercentage = itemContext.fileState.progress;
+            const topInset = 100 - progressPercentage;
+            return (_jsx(ItemProgressPrimitive, { role: 'progressbar', "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": progressPercentage, "aria-valuetext": `${progressPercentage}%`, "aria-labelledby": itemContext.nameId, "data-slot": 'file-upload-progress', ...progressProps, className: cn('absolute inset-0 bg-primary/50 transition-[clip-path] duration-300 ease-linear', className), style: {
+                    clipPath: `inset(${topInset}% 0% 0% 0%)`,
+                } }));
+        }
+        default:
+            return (_jsx(ItemProgressPrimitive, { role: 'progressbar', "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": itemContext.fileState.progress, "aria-valuetext": `${itemContext.fileState.progress}%`, "aria-labelledby": itemContext.nameId, "data-slot": 'file-upload-progress', ...progressProps, className: cn('relative h-1.5 w-full overflow-hidden rounded-full bg-primary/20', className), children: _jsx("div", { className: 'h-full w-full flex-1 bg-primary transition-transform duration-300 ease-linear', style: {
+                        transform: `translateX(-${100 - itemContext.fileState.progress}%)`,
+                    } }) }));
+    }
+}
+function FileUploadItemDelete(props) {
+    const { asChild, onClick: onClickProp, ...deleteProps } = props;
+    const store = useStoreContext(ITEM_DELETE_NAME);
+    const itemContext = useFileUploadItemContext(ITEM_DELETE_NAME);
+    const onClick = React.useCallback((event) => {
+        onClickProp?.(event);
+        if (!itemContext.fileState || event.defaultPrevented)
+            return;
+        store.dispatch({
+            type: 'REMOVE_FILE',
+            file: itemContext.fileState.file,
+        });
+    }, [store, itemContext.fileState, onClickProp]);
+    if (!itemContext.fileState)
+        return null;
+    const ItemDeletePrimitive = asChild ? SlotPrimitive.Slot : 'button';
+    return (_jsx(ItemDeletePrimitive, { type: 'button', "aria-controls": itemContext.id, "aria-describedby": itemContext.nameId, "data-slot": 'file-upload-item-delete', ...deleteProps, onClick: onClick }));
+}
+function FileUploadClear(props) {
+    const { asChild, forceMount, disabled, onClick: onClickProp, ...clearProps } = props;
+    const context = useFileUploadContext(CLEAR_NAME);
+    const store = useStoreContext(CLEAR_NAME);
+    const fileCount = useStore((state) => state.files.size);
+    const isDisabled = disabled || context.disabled;
+    const onClick = React.useCallback((event) => {
+        onClickProp?.(event);
+        if (event.defaultPrevented)
+            return;
+        store.dispatch({ type: 'CLEAR' });
+    }, [store, onClickProp]);
+    const shouldRender = forceMount || fileCount > 0;
+    if (!shouldRender)
+        return null;
+    const ClearPrimitive = asChild ? SlotPrimitive.Slot : 'button';
+    return (_jsx(ClearPrimitive, { type: 'button', "aria-controls": context.listId, "data-slot": 'file-upload-clear', "data-disabled": isDisabled ? '' : undefined, ...clearProps, disabled: isDisabled, onClick: onClick }));
+}
+export { FileUpload, FileUploadDropzone, FileUploadTrigger, FileUploadList, FileUploadItem, FileUploadItemPreview, FileUploadItemMetadata, FileUploadItemProgress, FileUploadItemDelete, FileUploadClear, 
+//
+useStore as useFileUpload, };
+//# sourceMappingURL=file-upload.js.map