@docyrus/shadcn 1.1.0 → 1.2.0

package/dist/radix-vega/file-upload.js

@@ -0,0 +1,1089 @@
+import { useDirection } from '@radix-ui/react-direction';
+import { Slot } from '@radix-ui/react-slot';
+import { FileVideoIcon, FileAudioIcon, FileTextIcon, FileCodeIcon, FileArchiveIcon, FileCogIcon, FileIcon } from 'lucide-react';
+import * as React4 from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? React4.useLayoutEffect : React4.useEffect;
+
+// src/hooks/use-as-ref.ts
+function useAsRef(props) {
+  const ref = React4.useRef(props);
+  useIsomorphicLayoutEffect(() => {
+    ref.current = props;
+  });
+  return ref;
+}
+function useLazyRef(fn) {
+  const ref = React4.useRef(null);
+  if (ref.current === null) {
+    ref.current = fn();
+  }
+  return ref;
+}
+var ROOT_NAME = "FileUpload";
+var DROPZONE_NAME = "FileUploadDropzone";
+var TRIGGER_NAME = "FileUploadTrigger";
+var LIST_NAME = "FileUploadList";
+var ITEM_NAME = "FileUploadItem";
+var ITEM_PREVIEW_NAME = "FileUploadItemPreview";
+var ITEM_METADATA_NAME = "FileUploadItemMetadata";
+var ITEM_PROGRESS_NAME = "FileUploadItemProgress";
+var ITEM_DELETE_NAME = "FileUploadItemDelete";
+var CLEAR_NAME = "FileUploadClear";
+function formatBytes(bytes) {
+  if (bytes === 0) return "0 B";
+  const sizes = ["B", "KB", "MB", "GB", "TB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(1024));
+  return `${(bytes / 1024 ** i).toFixed(i ? 1 : 0)} ${sizes[i]}`;
+}
+function getFileIcon(file) {
+  const type = file.type;
+  const extension = file.name.split(".").pop()?.toLowerCase() ?? "";
+  if (type.startsWith("video/")) {
+    return /* @__PURE__ */ jsx(FileVideoIcon, {});
+  }
+  if (type.startsWith("audio/")) {
+    return /* @__PURE__ */ jsx(FileAudioIcon, {});
+  }
+  if (type.startsWith("text/") || ["txt", "md", "rtf", "pdf"].includes(extension)) {
+    return /* @__PURE__ */ jsx(FileTextIcon, {});
+  }
+  if ([
+    "html",
+    "css",
+    "js",
+    "jsx",
+    "ts",
+    "tsx",
+    "json",
+    "xml",
+    "php",
+    "py",
+    "rb",
+    "java",
+    "c",
+    "cpp",
+    "cs"
+  ].includes(extension)) {
+    return /* @__PURE__ */ jsx(FileCodeIcon, {});
+  }
+  if (["zip", "rar", "7z", "tar", "gz", "bz2"].includes(extension)) {
+    return /* @__PURE__ */ jsx(FileArchiveIcon, {});
+  }
+  if (["exe", "msi", "app", "apk", "deb", "rpm"].includes(extension) || type.startsWith("application/")) {
+    return /* @__PURE__ */ jsx(FileCogIcon, {});
+  }
+  return /* @__PURE__ */ jsx(FileIcon, {});
+}
+var StoreContext = React4.createContext(null);
+function useStoreContext(consumerName) {
+  const context = React4.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 = React4.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 React4.useSyncExternalStore(store.subscribe, getSnapshot, getSnapshot);
+}
+var FileUploadContext = React4.createContext(
+  null
+);
+function useFileUploadContext(consumerName) {
+  const context = React4.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 = React4.useId();
+  const dropzoneId = React4.useId();
+  const listId = React4.useId();
+  const labelId = React4.useId();
+  const dir = useDirection(dirProp);
+  const listeners = useLazyRef(() => /* @__PURE__ */ new Set()).current;
+  const files = useLazyRef(() => /* @__PURE__ */ new Map()).current;
+  const urlCache = useLazyRef(() => /* @__PURE__ */ new WeakMap()).current;
+  const inputRef = React4.useRef(null);
+  const isControlled = value !== void 0;
+  const propsRef = useAsRef({
+    onValueChange,
+    onAccept,
+    onFileAccept,
+    onFileReject,
+    onFileValidate,
+    onUpload
+  });
+  const store = React4.useMemo(() => {
+    let state = {
+      files,
+      dragOver: false,
+      invalid
+    };
+    function reducer(state2, 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 { ...state2, 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 { ...state2, files };
+        }
+        case "SET_PROGRESS": {
+          const fileState = files.get(action.file);
+          if (fileState) {
+            files.set(action.file, {
+              ...fileState,
+              progress: action.progress,
+              status: "uploading"
+            });
+          }
+          return { ...state2, files };
+        }
+        case "SET_SUCCESS": {
+          const fileState = files.get(action.file);
+          if (fileState) {
+            files.set(action.file, {
+              ...fileState,
+              progress: 100,
+              status: "success"
+            });
+          }
+          return { ...state2, files };
+        }
+        case "SET_ERROR": {
+          const fileState = files.get(action.file);
+          if (fileState) {
+            files.set(action.file, {
+              ...fileState,
+              error: action.error,
+              status: "error"
+            });
+          }
+          return { ...state2, 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 { ...state2, files };
+        }
+        case "SET_DRAG_OVER": {
+          return { ...state2, dragOver: action.dragOver };
+        }
+        case "SET_INVALID": {
+          return { ...state2, 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 { ...state2, files, invalid: false };
+        }
+        default:
+          return state2;
+      }
+    }
+    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 = React4.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;
+  React4.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]);
+  React4.useEffect(() => {
+    return () => {
+      for (const file of files.keys()) {
+        const cachedUrl = urlCache.get(file);
+        if (cachedUrl) {
+          URL.revokeObjectURL(cachedUrl);
+        }
+      }
+    };
+  }, [files, urlCache]);
+  const onFilesUpload = React4.useCallback(
+    async (files2) => {
+      try {
+        for (const file of files2) {
+          store.dispatch({ type: "SET_PROGRESS", file, progress: 0 });
+        }
+        if (propsRef.current.onUpload) {
+          await propsRef.current.onUpload(files2, {
+            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 files2) {
+            store.dispatch({ type: "SET_SUCCESS", file });
+          }
+        }
+      } catch (error) {
+        const errorMessage = error instanceof Error ? error.message : "Upload failed";
+        for (const file of files2) {
+          store.dispatch({
+            type: "SET_ERROR",
+            file,
+            error: errorMessage
+          });
+        }
+      }
+    },
+    [store, propsRef, onProgress]
+  );
+  const onFilesChange = React4.useCallback(
+    (originalFiles) => {
+      if (disabled) return;
+      let filesToProcess = [...originalFiles];
+      let invalid2 = false;
+      if (maxFiles) {
+        const currentCount = store.getState().files.size;
+        const remainingSlotCount = Math.max(0, maxFiles - currentCount);
+        if (remainingSlotCount < filesToProcess.length) {
+          const rejectedFiles2 = filesToProcess.slice(remainingSlotCount);
+          invalid2 = true;
+          filesToProcess = filesToProcess.slice(0, remainingSlotCount);
+          for (const file of rejectedFiles2) {
+            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 = [];
+      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;
+            invalid2 = 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;
+            invalid2 = true;
+          }
+        }
+        if (maxSize && file.size > maxSize) {
+          rejectionMessage = "File too large";
+          propsRef.current.onFileReject?.(file, rejectionMessage);
+          rejected = true;
+          invalid2 = true;
+        }
+        if (!rejected) {
+          acceptedFiles.push(file);
+        }
+      }
+      if (invalid2) {
+        store.dispatch({ type: "SET_INVALID", invalid: invalid2 });
+        setTimeout(() => {
+          store.dispatch({ type: "SET_INVALID", invalid: false });
+        }, 2e3);
+      }
+      if (acceptedFiles.length > 0) {
+        store.dispatch({ type: "ADD_FILES", files: acceptedFiles });
+        if (isControlled && propsRef.current.onValueChange) {
+          const currentFiles = Array.from(store.getState().files.values()).map(
+            (f) => f.file
+          );
+          propsRef.current.onValueChange([...currentFiles]);
+        }
+        if (propsRef.current.onAccept) {
+          propsRef.current.onAccept(acceptedFiles);
+        }
+        for (const file of acceptedFiles) {
+          propsRef.current.onFileAccept?.(file);
+        }
+        if (propsRef.current.onUpload) {
+          requestAnimationFrame(() => {
+            onFilesUpload(acceptedFiles);
+          });
+        }
+      }
+    },
+    [
+      store,
+      isControlled,
+      propsRef,
+      onFilesUpload,
+      maxFiles,
+      acceptTypes,
+      maxSize,
+      disabled
+    ]
+  );
+  const onInputChange = React4.useCallback(
+    (event) => {
+      const files2 = Array.from(event.target.files ?? []);
+      onFilesChange(files2);
+      event.target.value = "";
+    },
+    [onFilesChange]
+  );
+  const contextValue = React4.useMemo(
+    () => ({
+      dropzoneId,
+      inputId,
+      listId,
+      labelId,
+      dir,
+      disabled,
+      inputRef,
+      urlCache
+    }),
+    [dropzoneId, inputId, listId, labelId, dir, disabled, urlCache]
+  );
+  const RootPrimitive = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsx(StoreContext.Provider, { value: store, children: /* @__PURE__ */ jsx(FileUploadContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs(
+    RootPrimitive,
+    {
+      "data-disabled": disabled ? "" : void 0,
+      "data-slot": "file-upload",
+      dir,
+      ...rootProps,
+      className: cn("relative flex flex-col gap-2", className),
+      children: [
+        children,
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            type: "file",
+            id: inputId,
+            "aria-labelledby": labelId,
+            "aria-describedby": dropzoneId,
+            ref: inputRef,
+            tabIndex: -1,
+            accept,
+            name,
+            className: "sr-only",
+            disabled,
+            multiple,
+            required,
+            onChange: onInputChange
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { id: labelId, className: "sr-only", children: label ?? "File upload" })
+      ]
+    }
+  ) }) });
+}
+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 = React4.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 = React4.useCallback(
+    (event) => {
+      propsRef.current.onDragOver?.(event);
+      if (event.defaultPrevented) return;
+      event.preventDefault();
+      store.dispatch({ type: "SET_DRAG_OVER", dragOver: true });
+    },
+    [store, propsRef]
+  );
+  const onDragEnter = React4.useCallback(
+    (event) => {
+      propsRef.current.onDragEnter?.(event);
+      if (event.defaultPrevented) return;
+      event.preventDefault();
+      store.dispatch({ type: "SET_DRAG_OVER", dragOver: true });
+    },
+    [store, propsRef]
+  );
+  const onDragLeave = React4.useCallback(
+    (event) => {
+      propsRef.current.onDragLeave?.(event);
+      if (event.defaultPrevented) return;
+      const relatedTarget = event.relatedTarget;
+      if (relatedTarget && relatedTarget instanceof Node && event.currentTarget.contains(relatedTarget)) {
+        return;
+      }
+      event.preventDefault();
+      store.dispatch({ type: "SET_DRAG_OVER", dragOver: false });
+    },
+    [store, propsRef]
+  );
+  const onDrop = React4.useCallback(
+    (event) => {
+      propsRef.current.onDrop?.(event);
+      if (event.defaultPrevented) return;
+      event.preventDefault();
+      store.dispatch({ type: "SET_DRAG_OVER", dragOver: false });
+      const files = Array.from(event.dataTransfer.files);
+      const inputElement = context.inputRef.current;
+      if (!inputElement) return;
+      const dataTransfer = new DataTransfer();
+      for (const file of files) {
+        dataTransfer.items.add(file);
+      }
+      inputElement.files = dataTransfer.files;
+      inputElement.dispatchEvent(new Event("change", { bubbles: true }));
+    },
+    [store, context.inputRef, propsRef]
+  );
+  const onPaste = React4.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 = React4.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 ? Slot : "div";
+  return /* @__PURE__ */ jsx(
+    DropzonePrimitive,
+    {
+      role: "region",
+      id: context.dropzoneId,
+      "aria-controls": `${context.inputId} ${context.listId}`,
+      "aria-disabled": context.disabled,
+      "aria-invalid": invalid,
+      "data-disabled": context.disabled ? "" : void 0,
+      "data-dragging": dragOver ? "" : void 0,
+      "data-invalid": invalid ? "" : void 0,
+      "data-slot": "file-upload-dropzone",
+      dir: context.dir,
+      tabIndex: context.disabled ? void 0 : 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,
+      onDragEnter,
+      onDragLeave,
+      onDragOver,
+      onDrop,
+      onKeyDown,
+      onPaste
+    }
+  );
+}
+function FileUploadTrigger(props) {
+  const { asChild, onClick: onClickProp, ...triggerProps } = props;
+  const context = useFileUploadContext(TRIGGER_NAME);
+  const propsRef = useAsRef({
+    onClick: onClickProp
+  });
+  const onClick = React4.useCallback(
+    (event) => {
+      propsRef.current.onClick?.(event);
+      if (event.defaultPrevented) return;
+      context.inputRef.current?.click();
+    },
+    [context.inputRef, propsRef]
+  );
+  const TriggerPrimitive = asChild ? Slot : "button";
+  return /* @__PURE__ */ jsx(
+    TriggerPrimitive,
+    {
+      type: "button",
+      "aria-controls": context.inputId,
+      "data-disabled": context.disabled ? "" : void 0,
+      "data-slot": "file-upload-trigger",
+      ...triggerProps,
+      disabled: context.disabled,
+      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 ? Slot : "div";
+  return /* @__PURE__ */ 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
+      )
+    }
+  );
+}
+var FileUploadItemContext = React4.createContext(null);
+function useFileUploadItemContext(consumerName) {
+  const context = React4.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 = React4.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 = React4.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 ? Slot : "div";
+  return /* @__PURE__ */ jsx(FileUploadItemContext.Provider, { value: itemContext, children: /* @__PURE__ */ jsxs(
+    ItemPrimitive,
+    {
+      role: "listitem",
+      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,
+        /* @__PURE__ */ 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 = React4.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 (
+          // biome-ignore lint/performance/noImgElement: dynamic file URLs from user uploads don't work well with Next.js Image optimization
+          /* @__PURE__ */ jsx("img", { src: url, alt: file.name, className: "size-full object-cover" })
+        );
+      }
+      return getFileIcon(file);
+    },
+    [itemContext.fileState?.file.type, context.urlCache]
+  );
+  const onPreviewRender = React4.useCallback(
+    (file) => {
+      if (render) {
+        return render(file, () => getDefaultRender(file));
+      }
+      return getDefaultRender(file);
+    },
+    [render, getDefaultRender]
+  );
+  if (!itemContext.fileState) return null;
+  const ItemPreviewPrimitive = asChild ? Slot : "div";
+  return /* @__PURE__ */ 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 ? Slot : "div";
+  return /* @__PURE__ */ jsx(
+    ItemMetadataPrimitive,
+    {
+      "data-slot": "file-upload-metadata",
+      dir: context.dir,
+      ...metadataProps,
+      className: cn("flex min-w-0 flex-1 flex-col", className),
+      children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            id: itemContext.nameId,
+            className: cn(
+              "truncate font-medium text-sm",
+              size === "sm" && "font-normal text-[13px] leading-snug"
+            ),
+            children: itemContext.fileState.file.name
+          }
+        ),
+        /* @__PURE__ */ 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 && /* @__PURE__ */ 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 ? Slot : "div";
+  switch (variant) {
+    case "circular": {
+      const circumference = 2 * Math.PI * ((size - 4) / 2);
+      const strokeDashoffset = circumference - itemContext.fileState.progress / 100 * circumference;
+      return /* @__PURE__ */ 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 left-1/2 -translate-x-1/2 -translate-y-1/2",
+            className
+          ),
+          children: /* @__PURE__ */ jsxs(
+            "svg",
+            {
+              className: "-rotate-90 transform",
+              width: size,
+              height: size,
+              viewBox: `0 0 ${size} ${size}`,
+              fill: "none",
+              stroke: "currentColor",
+              children: [
+                /* @__PURE__ */ jsx(
+                  "circle",
+                  {
+                    className: "text-primary/20",
+                    strokeWidth: "2",
+                    cx: size / 2,
+                    cy: size / 2,
+                    r: (size - 4) / 2
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "circle",
+                  {
+                    className: "text-primary transition-[stroke-dashoffset] duration-300 ease-linear",
+                    strokeWidth: "2",
+                    strokeLinecap: "round",
+                    strokeDasharray: circumference,
+                    strokeDashoffset,
+                    cx: size / 2,
+                    cy: size / 2,
+                    r: (size - 4) / 2
+                  }
+                )
+              ]
+            }
+          )
+        }
+      );
+    }
+    case "fill": {
+      const progressPercentage = itemContext.fileState.progress;
+      const topInset = 100 - progressPercentage;
+      return /* @__PURE__ */ 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 /* @__PURE__ */ 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: /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "h-full w-full flex-1 bg-primary transition-transform duration-300 ease-linear",
+              style: {
+                transform: `translateX(-${100 - itemContext.fileState.progress}%)`
+              }
+            }
+          )
+        }
+      );
+  }
+}
+function FileUploadItemDelete(props) {
+  const { asChild, onClick: onClickProp, ...deleteProps } = props;
+  const store = useStoreContext(ITEM_DELETE_NAME);
+  const itemContext = useFileUploadItemContext(ITEM_DELETE_NAME);
+  const onClick = React4.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 ? Slot : "button";
+  return /* @__PURE__ */ jsx(
+    ItemDeletePrimitive,
+    {
+      type: "button",
+      "aria-controls": itemContext.id,
+      "aria-describedby": itemContext.nameId,
+      "data-slot": "file-upload-item-delete",
+      ...deleteProps,
+      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 = React4.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 ? Slot : "button";
+  return /* @__PURE__ */ jsx(
+    ClearPrimitive,
+    {
+      type: "button",
+      "aria-controls": context.listId,
+      "data-slot": "file-upload-clear",
+      "data-disabled": isDisabled ? "" : void 0,
+      ...clearProps,
+      disabled: isDisabled,
+      onClick
+    }
+  );
+}
+
+export { FileUpload, FileUploadClear, FileUploadDropzone, FileUploadItem, FileUploadItemDelete, FileUploadItemMetadata, FileUploadItemPreview, FileUploadItemProgress, FileUploadList, FileUploadTrigger, useStore as useFileUpload };
+//# sourceMappingURL=file-upload.js.map
+//# sourceMappingURL=file-upload.js.map