@szum-tech/design-system 3.13.0 → 3.14.0

package/dist/chunk-EOTQVIA5.js

@@ -0,0 +1,993 @@
+import { useLazyRef, useAsRef } from './chunk-G24PWQKG.js';
+import { cn } from './chunk-ZD2QRAOX.js';
+import * as React3 from 'react';
+import { Direction, Slot } from 'radix-ui';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { cva } from 'class-variance-authority';
+import { FileVideoIcon, FileAudioIcon, FileTextIcon, FileCodeIcon, FileArchiveIcon, FileCogIcon, FileIcon } from 'lucide-react';
+
+// src/components/file-upload/file-upload.constants.ts
+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";
+
+// src/components/file-upload/file-upload.context.tsx
+var FileUploadContext = React3.createContext(null);
+function useFileUploadContext(consumerName) {
+  const context = React3.useContext(FileUploadContext);
+  if (!context) {
+    throw new Error(`\`${consumerName}\` must be used within \`${ROOT_NAME}\``);
+  }
+  return context;
+}
+var FileUploadStoreContext = React3.createContext(null);
+function useFileUploadStoreContext(consumerName) {
+  const context = React3.useContext(FileUploadStoreContext);
+  if (!context) {
+    throw new Error(`\`${consumerName}\` must be used within \`${ROOT_NAME}\``);
+  }
+  return context;
+}
+function useFileUploadStore(selector) {
+  const store = useFileUploadStoreContext("useFileUploadStore");
+  const lastValueRef = useLazyRef(() => null);
+  const getSnapshot = React3.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 React3.useSyncExternalStore(store.subscribe, getSnapshot, getSnapshot);
+}
+function createFileUploadStore(listeners, files, urlCache, propsRef, initialInvalid) {
+  let state = {
+    files,
+    dragOver: false,
+    invalid: initialInvalid
+  };
+  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);
+    }
+  };
+}
+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 = React3.useId();
+  const dropzoneId = React3.useId();
+  const listId = React3.useId();
+  const labelId = React3.useId();
+  const dir = Direction.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 = React3.useRef(null);
+  const isControlled = value !== void 0;
+  const propsRef = useAsRef({
+    onValueChange,
+    onAccept,
+    onFileAccept,
+    onFileReject,
+    onFileValidate,
+    onUpload
+  });
+  const store = React3.useMemo(
+    () => createFileUploadStore(listeners, files, urlCache, propsRef, invalid),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [listeners, files, urlCache, propsRef]
+  );
+  React3.useEffect(() => {
+    store.dispatch({ type: "SET_INVALID", invalid });
+  }, [store, invalid]);
+  const acceptTypes = React3.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;
+  React3.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]);
+  React3.useEffect(() => {
+    return () => {
+      for (const file of files.keys()) {
+        const cachedUrl = urlCache.get(file);
+        if (cachedUrl) {
+          URL.revokeObjectURL(cachedUrl);
+        }
+      }
+    };
+  }, [files, urlCache]);
+  const onFilesUpload = React3.useCallback(
+    async (filesToUpload) => {
+      try {
+        for (const file of filesToUpload) {
+          store.dispatch({ type: "SET_PROGRESS", file, progress: 0 });
+        }
+        if (propsRef.current.onUpload) {
+          await propsRef.current.onUpload(filesToUpload, {
+            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 filesToUpload) {
+            store.dispatch({ type: "SET_SUCCESS", file });
+          }
+        }
+      } catch (error) {
+        const errorMessage = error instanceof Error ? error.message : "Upload failed";
+        for (const file of filesToUpload) {
+          store.dispatch({
+            type: "SET_ERROR",
+            file,
+            error: errorMessage
+          });
+        }
+      }
+    },
+    [store, propsRef, onProgress]
+  );
+  const onFilesChange = React3.useCallback(
+    (originalFiles) => {
+      if (disabled) return;
+      let filesToProcess = [...originalFiles];
+      let hasInvalid = 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);
+          hasInvalid = 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 = [];
+      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;
+            hasInvalid = 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;
+            hasInvalid = true;
+          }
+        }
+        if (maxSize && file.size > maxSize) {
+          rejectionMessage = "File too large";
+          propsRef.current.onFileReject?.(file, rejectionMessage);
+          rejected = true;
+          hasInvalid = true;
+        }
+        if (!rejected) {
+          acceptedFiles.push(file);
+        }
+      }
+      if (hasInvalid) {
+        store.dispatch({ type: "SET_INVALID", invalid: true });
+        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(() => {
+            void onFilesUpload(acceptedFiles);
+          });
+        }
+      }
+    },
+    [store, isControlled, propsRef, onFilesUpload, maxFiles, acceptTypes, maxSize, disabled]
+  );
+  const onInputChange = React3.useCallback(
+    (event) => {
+      const changedFiles = Array.from(event.target.files ?? []);
+      onFilesChange(changedFiles);
+      event.target.value = "";
+    },
+    [onFilesChange]
+  );
+  const contextValue = React3.useMemo(
+    () => ({
+      dropzoneId,
+      inputId,
+      listId,
+      labelId,
+      dir,
+      disabled,
+      inputRef,
+      urlCache
+    }),
+    [dropzoneId, inputId, listId, labelId, dir, disabled, urlCache]
+  );
+  const RootPrimitive = asChild ? Slot.Slot : "div";
+  return /* @__PURE__ */ jsx(FileUploadStoreContext.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 = useFileUploadStoreContext(DROPZONE_NAME);
+  const dragOver = useFileUploadStore((state) => state.dragOver);
+  const invalid = useFileUploadStore((state) => state.invalid);
+  const propsRef = useAsRef({
+    onClick: onClickProp,
+    onDragOver: onDragOverProp,
+    onDragEnter: onDragEnterProp,
+    onDragLeave: onDragLeaveProp,
+    onDrop: onDropProp,
+    onPaste: onPasteProp,
+    onKeyDown: onKeyDownProp
+  });
+  const onClick = React3.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 = React3.useCallback(
+    (event) => {
+      propsRef.current.onDragOver?.(event);
+      if (event.defaultPrevented) return;
+      event.preventDefault();
+      store.dispatch({ type: "SET_DRAG_OVER", dragOver: true });
+    },
+    [store, propsRef]
+  );
+  const onDragEnter = React3.useCallback(
+    (event) => {
+      propsRef.current.onDragEnter?.(event);
+      if (event.defaultPrevented) return;
+      event.preventDefault();
+      store.dispatch({ type: "SET_DRAG_OVER", dragOver: true });
+    },
+    [store, propsRef]
+  );
+  const onDragLeave = React3.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 = React3.useCallback(
+    (event) => {
+      propsRef.current.onDrop?.(event);
+      if (event.defaultPrevented) return;
+      event.preventDefault();
+      store.dispatch({ type: "SET_DRAG_OVER", dragOver: false });
+      const droppedFiles = Array.from(event.dataTransfer.files);
+      const inputElement = context.inputRef.current;
+      if (!inputElement) return;
+      const dataTransfer = new DataTransfer();
+      for (const file of droppedFiles) {
+        dataTransfer.items.add(file);
+      }
+      inputElement.files = dataTransfer.files;
+      inputElement.dispatchEvent(new Event("change", { bubbles: true }));
+    },
+    [store, context.inputRef, propsRef]
+  );
+  const onPaste = React3.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 pastedFiles = [];
+      for (let i = 0; i < items.length; i++) {
+        const item = items[i];
+        if (item?.kind === "file") {
+          const file = item.getAsFile();
+          if (file) {
+            pastedFiles.push(file);
+          }
+        }
+      }
+      if (pastedFiles.length === 0) return;
+      const inputElement = context.inputRef.current;
+      if (!inputElement) return;
+      const dataTransfer = new DataTransfer();
+      for (const file of pastedFiles) {
+        dataTransfer.items.add(file);
+      }
+      inputElement.files = dataTransfer.files;
+      inputElement.dispatchEvent(new Event("change", { bubbles: true }));
+    },
+    [store, context.inputRef, propsRef]
+  );
+  const onKeyDown = React3.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.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(
+        "hover:bg-accent/30 focus-visible:border-ring/50 data-dragging:border-primary/30 data-invalid:border-error data-dragging:bg-accent/30 data-invalid:ring-error/20 relative flex flex-col items-center justify-center gap-2 rounded border-2 border-dashed p-6 transition-colors outline-none select-none data-disabled:pointer-events-none",
+        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 = React3.useCallback(
+    (event) => {
+      propsRef.current.onClick?.(event);
+      if (event.defaultPrevented) return;
+      context.inputRef.current?.click();
+    },
+    [context.inputRef, propsRef]
+  );
+  const TriggerPrimitive = asChild ? Slot.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
+    }
+  );
+}
+var fileUploadListVariants = cva(
+  "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 data-[state=active]:animate-in data-[state=inactive]:animate-out flex flex-col gap-2",
+  {
+    variants: {
+      orientation: {
+        vertical: "",
+        horizontal: "flex-row overflow-x-auto p-1.5"
+      }
+    },
+    defaultVariants: {
+      orientation: "vertical"
+    }
+  }
+);
+function FileUploadList(props) {
+  const { className, orientation = "vertical", asChild, forceMount, ...listProps } = props;
+  const context = useFileUploadContext(LIST_NAME);
+  const fileCount = useFileUploadStore((state) => state.files.size);
+  const shouldRender = forceMount || fileCount > 0;
+  if (!shouldRender) return null;
+  const ListPrimitive = asChild ? Slot.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(fileUploadListVariants({ orientation }), className)
+    }
+  );
+}
+var FileUploadItemContext = React3.createContext(null);
+function useFileUploadItemContext(consumerName) {
+  const context = React3.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 = React3.useId();
+  const statusId = `${id}-status`;
+  const nameId = `${id}-name`;
+  const sizeId = `${id}-size`;
+  const messageId = `${id}-message`;
+  const context = useFileUploadContext(ITEM_NAME);
+  const fileState = useFileUploadStore((state) => state.files.get(value));
+  const fileCount = useFileUploadStore((state) => state.files.size);
+  const fileIndex = useFileUploadStore((state) => {
+    const keys = Array.from(state.files.keys());
+    return keys.indexOf(value) + 1;
+  });
+  const itemContext = React3.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.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 border p-3", className),
+      children: [
+        props.children,
+        /* @__PURE__ */ jsx("span", { id: statusId, className: "sr-only", children: statusText })
+      ]
+    }
+  ) });
+}
+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, {});
+}
+function FileUploadItemPreview(props) {
+  const { render, asChild, children, className, ...previewProps } = props;
+  const itemContext = useFileUploadItemContext(ITEM_PREVIEW_NAME);
+  const context = useFileUploadContext(ITEM_PREVIEW_NAME);
+  const getDefaultRender = React3.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 = React3.useCallback(
+    (file) => {
+      if (render) {
+        return render(file, () => getDefaultRender(file));
+      }
+      return getDefaultRender(file);
+    },
+    [render, getDefaultRender]
+  );
+  if (!itemContext.fileState) return null;
+  const ItemPreviewPrimitive = asChild ? Slot.Slot : "div";
+  return /* @__PURE__ */ jsxs(
+    ItemPreviewPrimitive,
+    {
+      "aria-labelledby": itemContext.nameId,
+      "data-slot": "file-upload-preview",
+      ...previewProps,
+      className: cn(
+        "bg-accent/50 relative flex size-10 shrink-0 items-center justify-center overflow-hidden rounded border [&>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.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 text-sm font-medium", size === "sm" && "text-[13px] leading-snug font-normal"),
+            children: itemContext.fileState.file.name
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            id: itemContext.sizeId,
+            className: cn("text-muted-foreground truncate 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.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("bg-primary/50 absolute inset-0 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("bg-primary/20 relative h-1.5 w-full overflow-hidden rounded-full", className),
+          children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "bg-primary h-full w-full flex-1 transition-transform duration-300 ease-linear",
+              style: {
+                transform: `translateX(-${100 - itemContext.fileState.progress}%)`
+              }
+            }
+          )
+        }
+      );
+  }
+}
+function FileUploadItemDelete(props) {
+  const { asChild, onClick: onClickProp, ...deleteProps } = props;
+  const store = useFileUploadStoreContext(ITEM_DELETE_NAME);
+  const itemContext = useFileUploadItemContext(ITEM_DELETE_NAME);
+  const onClick = React3.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.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 = useFileUploadStoreContext(CLEAR_NAME);
+  const fileCount = useFileUploadStore((state) => state.files.size);
+  const isDisabled = disabled || context.disabled;
+  const onClick = React3.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.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, useFileUploadContext, useFileUploadItemContext, useFileUploadStore };