@spark-ui/components 11.5.1 → 11.6.1

package/dist/file-upload/index.js

@@ -20,15 +20,47 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/file-upload/index.ts
 var file_upload_exports = {};
 __export(file_upload_exports, {
+  FILE_UPLOAD_ERRORS: () => FILE_UPLOAD_ERRORS,
   FileUpload: () => FileUpload2
 });
 module.exports = __toCommonJS(file_upload_exports);
 
 // src/file-upload/FileUpload.tsx
 var import_form_field = require("@spark-ui/components/form-field");
+var import_react3 = require("react");
+
+// src/file-upload/useFileUploadState.tsx
 var import_use_combined_state = require("@spark-ui/hooks/use-combined-state");
 var import_react2 = require("react");
 
+// src/file-upload/constants.ts
+var FILE_UPLOAD_ERRORS = {
+  /**
+   * Exceeds the maxFiles limit
+   */
+  TOO_MANY_FILES: "TOO_MANY_FILES",
+  /**
+   * File type not in the accept list
+   */
+  FILE_INVALID_TYPE: "FILE_INVALID_TYPE",
+  /**
+   * File size exceeds maxFileSize
+   */
+  FILE_TOO_LARGE: "FILE_TOO_LARGE",
+  /**
+   * File size below minFileSize
+   */
+  FILE_TOO_SMALL: "FILE_TOO_SMALL",
+  /**
+   * Generic validation failure
+   */
+  FILE_INVALID: "FILE_INVALID",
+  /**
+   * Duplicate file detected
+   */
+  FILE_EXISTS: "FILE_EXISTS"
+};
+
 // src/file-upload/utils.ts
 var import_CvOutline = require("@spark-ui/icons/CvOutline");
 var import_FilePdfOutline = require("@spark-ui/icons/FilePdfOutline");
@@ -127,14 +159,32 @@ function getFileIcon(file) {
   }
   return (0, import_react.createElement)(import_CvOutline.CvOutline);
 }
+function isFocusable(element) {
+  if (!element) {
+    return false;
+  }
+  const tabIndex = element.tabIndex;
+  if (tabIndex >= 0) {
+    return true;
+  }
+  const isContentEditable = String(element.contentEditable) === "true";
+  const naturallyFocusable = element instanceof HTMLInputElement || element instanceof HTMLButtonElement || element instanceof HTMLSelectElement || element instanceof HTMLTextAreaElement || element instanceof HTMLAnchorElement && Boolean(element.href) || isContentEditable;
+  return naturallyFocusable;
+}
+function findFocusableElement(candidates, inputRef) {
+  for (const candidate of candidates) {
+    if (isFocusable(candidate)) {
+      return candidate;
+    }
+  }
+  if (inputRef.current) {
+    return inputRef.current;
+  }
+  return null;
+}
 
-// src/file-upload/FileUpload.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
-var FileUploadContext = (0, import_react2.createContext)(null);
-var ID_PREFIX = ":file-upload";
-var FileUpload = ({
-  asChild: _asChild = false,
-  children,
+// src/file-upload/useFileUploadState.tsx
+function useFileUploadState({
   defaultValue = [],
   value: controlledValue,
   onFileAccept,
@@ -145,32 +195,12 @@ var FileUpload = ({
   maxFiles,
   maxFileSize,
   minFileSize,
-  disabled: disabledProp = false,
-  readOnly: readOnlyProp = false,
+  disabled = false,
+  readOnly = false,
   locale
-}) => {
-  const field = (0, import_form_field.useFormFieldControl)();
-  const {
-    id: fieldId,
-    name: fieldName,
-    isInvalid,
-    isRequired,
-    description,
-    disabled: fieldDisabled,
-    readOnly: fieldReadOnly,
-    labelId
-  } = field;
+}) {
   const defaultLocale = locale || (typeof navigator !== "undefined" && navigator.language ? navigator.language : "en");
-  const internalId = (0, import_react2.useId)();
-  const inputId = fieldId || `${ID_PREFIX}-${internalId}`;
-  const inputName = fieldName;
-  const inputRef = (0, import_react2.useRef)(null);
-  const triggerRef = (0, import_react2.useRef)(null);
-  const dropzoneRef = (0, import_react2.useRef)(null);
-  const deleteButtonRefs = (0, import_react2.useRef)([]);
-  const disabled = fieldDisabled ?? disabledProp;
-  const readOnly = fieldReadOnly ?? readOnlyProp;
-  const [filesState, setFilesState, ,] = (0, import_use_combined_state.useCombinedState)(controlledValue, defaultValue);
+  const [filesState, setFilesState] = (0, import_use_combined_state.useCombinedState)(controlledValue, defaultValue);
   const files = filesState ?? [];
   const setFiles = setFilesState;
   const [rejectedFiles, setRejectedFiles] = (0, import_react2.useState)([]);
@@ -202,20 +232,17 @@ var FileUpload = ({
     };
     setFiles((prev) => {
       const currentFiles = prev ?? [];
-      if (maxFiles !== void 0) {
-        const currentCount = currentFiles.length;
-        const remainingSlots = maxFiles - currentCount;
-        if (remainingSlots <= 0) {
-          newFiles.forEach((file) => {
-            addRejectedFile(file, "TOO_MANY_FILES");
-          });
-        }
+      const remainingSlots = maxFiles !== void 0 ? maxFiles - currentFiles.length : void 0;
+      if (remainingSlots !== void 0 && remainingSlots <= 0) {
+        newFiles.forEach((file) => {
+          addRejectedFile(file, FILE_UPLOAD_ERRORS.TOO_MANY_FILES);
+        });
       }
       let filteredFiles = newFiles;
       if (accept) {
         const rejectedByAccept = newFiles.filter((file) => !validateFileAccept(file, accept));
         rejectedByAccept.forEach((file) => {
-          addRejectedFile(file, "FILE_INVALID_TYPE");
+          addRejectedFile(file, FILE_UPLOAD_ERRORS.FILE_INVALID_TYPE);
         });
         filteredFiles = newFiles.filter((file) => validateFileAccept(file, accept));
       }
@@ -225,11 +252,11 @@ var FileUpload = ({
           const validation = validateFileSize(file, minFileSize, maxFileSize, defaultLocale);
           if (!validation.valid) {
             if (maxFileSize !== void 0 && file.size > maxFileSize) {
-              addRejectedFile(file, "FILE_TOO_LARGE");
+              addRejectedFile(file, FILE_UPLOAD_ERRORS.FILE_TOO_LARGE);
             } else if (minFileSize !== void 0 && file.size < minFileSize) {
-              addRejectedFile(file, "FILE_TOO_SMALL");
+              addRejectedFile(file, FILE_UPLOAD_ERRORS.FILE_TOO_SMALL);
             } else {
-              addRejectedFile(file, "FILE_INVALID");
+              addRejectedFile(file, FILE_UPLOAD_ERRORS.FILE_INVALID);
             }
             return false;
           }
@@ -237,35 +264,27 @@ var FileUpload = ({
         });
       }
       const seenFiles = /* @__PURE__ */ new Map();
-      const duplicateFiles = [];
       const uniqueFiles = validSizeFiles.filter((file) => {
         const fileKey = `${file.name}-${file.size}`;
         const existsInPrev = fileExists(file, currentFiles);
         if (existsInPrev) {
-          duplicateFiles.push(file);
-          addRejectedFile(file, "FILE_EXISTS");
+          addRejectedFile(file, FILE_UPLOAD_ERRORS.FILE_EXISTS);
           return false;
         }
         if (seenFiles.has(fileKey)) {
-          duplicateFiles.push(file);
-          addRejectedFile(file, "FILE_EXISTS");
+          addRejectedFile(file, FILE_UPLOAD_ERRORS.FILE_EXISTS);
           return false;
         }
         seenFiles.set(fileKey, file);
         return true;
       });
       let filesToAdd = multiple ? uniqueFiles : uniqueFiles.slice(0, 1);
-      if (maxFiles !== void 0) {
-        const currentCount = currentFiles.length;
-        const remainingSlots = maxFiles - currentCount;
+      if (remainingSlots !== void 0) {
         if (remainingSlots <= 0) {
-          filesToAdd.forEach((file) => {
-            addRejectedFile(file, "TOO_MANY_FILES");
-          });
           filesToAdd = [];
         } else if (filesToAdd.length > remainingSlots) {
           filesToAdd.forEach((file) => {
-            addRejectedFile(file, "TOO_MANY_FILES");
+            addRejectedFile(file, FILE_UPLOAD_ERRORS.TOO_MANY_FILES);
           });
           filesToAdd = [];
         }
@@ -298,7 +317,7 @@ var FileUpload = ({
       let updatedRejectedFiles = rejectedFiles;
       if (maxFiles !== void 0 && updated.length < maxFiles) {
         updatedRejectedFiles = rejectedFiles.filter(
-          (rejected) => !rejected.errors.includes("TOO_MANY_FILES")
+          (rejected) => !rejected.errors.includes(FILE_UPLOAD_ERRORS.TOO_MANY_FILES)
         );
         setRejectedFiles(updatedRejectedFiles);
       }
@@ -317,7 +336,6 @@ var FileUpload = ({
     }
     setFiles([]);
     setRejectedFiles([]);
-    deleteButtonRefs.current = [];
     if (onFileChange) {
       onFileChange({
         acceptedFiles: [],
@@ -335,6 +353,82 @@ var FileUpload = ({
     setRejectedFiles([]);
   };
   const maxFilesReached = maxFiles !== void 0 && files.length >= maxFiles;
+  return {
+    files,
+    rejectedFiles,
+    addFiles,
+    removeFile,
+    removeRejectedFile,
+    clearFiles,
+    clearRejectedFiles,
+    maxFilesReached
+  };
+}
+
+// src/file-upload/FileUpload.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var FileUploadContext = (0, import_react3.createContext)(null);
+var ID_PREFIX = ":file-upload";
+var FileUpload = ({
+  asChild: _asChild = false,
+  children,
+  defaultValue = [],
+  value: controlledValue,
+  onFileAccept,
+  onFileReject,
+  onFileChange,
+  multiple = true,
+  accept,
+  maxFiles,
+  maxFileSize,
+  minFileSize,
+  disabled: disabledProp = false,
+  readOnly: readOnlyProp = false,
+  locale
+}) => {
+  const field = (0, import_form_field.useFormFieldControl)();
+  const internalId = (0, import_react3.useId)();
+  const inputId = field.id || `${ID_PREFIX}-${internalId}`;
+  const inputName = field.name;
+  const inputRef = (0, import_react3.useRef)(null);
+  const triggerRef = (0, import_react3.useRef)(null);
+  const dropzoneRef = (0, import_react3.useRef)(null);
+  const deleteButtonRefs = (0, import_react3.useRef)([]);
+  const rejectedFileDeleteButtonRefs = (0, import_react3.useRef)([]);
+  const disabled = field.disabled ?? disabledProp;
+  const readOnly = field.readOnly ?? readOnlyProp;
+  const {
+    files,
+    rejectedFiles,
+    addFiles,
+    removeFile,
+    removeRejectedFile,
+    clearFiles: clearFilesFromHook,
+    clearRejectedFiles,
+    maxFilesReached
+  } = useFileUploadState({
+    defaultValue,
+    value: controlledValue,
+    onFileAccept,
+    onFileReject,
+    onFileChange,
+    multiple,
+    accept,
+    maxFiles,
+    maxFileSize,
+    minFileSize,
+    disabled,
+    readOnly,
+    locale
+  });
+  const clearFiles = () => {
+    clearFilesFromHook();
+    deleteButtonRefs.current = [];
+  };
+  const clearRejectedFilesWithRefs = () => {
+    clearRejectedFiles();
+    rejectedFileDeleteButtonRefs.current = [];
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     FileUploadContext.Provider,
     {
@@ -346,19 +440,20 @@ var FileUpload = ({
         removeFile,
         removeRejectedFile,
         clearFiles,
-        clearRejectedFiles,
+        clearRejectedFiles: clearRejectedFilesWithRefs,
         triggerRef,
         dropzoneRef,
         deleteButtonRefs,
+        rejectedFileDeleteButtonRefs,
         multiple,
         maxFiles,
         maxFilesReached,
         disabled,
         readOnly,
-        locale: defaultLocale,
-        description,
-        isInvalid,
-        isRequired
+        locale: locale || (typeof navigator !== "undefined" && navigator.language ? navigator.language : "en"),
+        description: field.description,
+        isInvalid: field.isInvalid,
+        isRequired: field.isRequired
       },
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative", children: [
         children,
@@ -374,10 +469,10 @@ var FileUpload = ({
             accept,
             disabled,
             readOnly: readOnly && !disabled,
-            required: isRequired,
-            "aria-invalid": isInvalid,
-            "aria-describedby": description,
-            "aria-label": !labelId ? "Upload files test" : void 0,
+            required: field.isRequired,
+            "aria-invalid": field.isInvalid,
+            "aria-describedby": field.description,
+            "aria-label": !field.labelId ? "Upload files" : void 0,
             className: "sr-only",
             onChange: (e) => {
               if (e.target.files && !disabled && !readOnly) {
@@ -396,7 +491,7 @@ var FileUpload = ({
 };
 FileUpload.displayName = "FileUpload";
 var useFileUploadContext = () => {
-  const context = (0, import_react2.useContext)(FileUploadContext);
+  const context = (0, import_react3.useContext)(FileUploadContext);
   if (!context) {
     throw Error("useFileUploadContext must be used within a FileUpload provider");
   }
@@ -405,13 +500,14 @@ var useFileUploadContext = () => {
 
 // src/file-upload/FileUploadAcceptedFile.tsx
 var import_class_variance_authority10 = require("class-variance-authority");
+var import_react11 = require("react");
 
 // src/icon/Icon.tsx
-var import_react4 = require("react");
+var import_react5 = require("react");
 
 // src/slot/Slot.tsx
 var import_radix_ui = require("radix-ui");
-var import_react3 = require("react");
+var import_react4 = require("react");
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var Slottable = import_radix_ui.Slot.Slottable;
 var Slot = ({ ref, ...props }) => {
@@ -419,7 +515,7 @@ var Slot = ({ ref, ...props }) => {
 };
 var wrapPolymorphicSlot = (asChild, children, callback) => {
   if (!asChild) return callback(children);
-  return (0, import_react3.isValidElement)(children) ? (0, import_react3.cloneElement)(
+  return (0, import_react4.isValidElement)(children) ? (0, import_react4.cloneElement)(
     children,
     void 0,
     callback(children.props.children)
@@ -497,9 +593,9 @@ var Icon = ({
   children,
   ...others
 }) => {
-  const child = import_react4.Children.only(children);
+  const child = import_react5.Children.only(children);
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
-    (0, import_react4.cloneElement)(child, {
+    (0, import_react5.cloneElement)(child, {
       className: iconStyles({ className, size, intent }),
       "data-spark-component": "icon",
       "aria-hidden": "true",
@@ -514,7 +610,7 @@ Icon.displayName = "Icon";
 // src/progress/Progress.tsx
 var import_class_variance_authority4 = require("class-variance-authority");
 var import_radix_ui3 = require("radix-ui");
-var import_react6 = require("react");
+var import_react7 = require("react");
 
 // src/progress/ProgressBar.styles.ts
 var import_class_variance_authority2 = require("class-variance-authority");
@@ -531,11 +627,11 @@ var progressBarStyles = (0, import_class_variance_authority2.cva)(
 );
 
 // src/progress/ProgressContext.tsx
-var import_react5 = require("react");
-var ProgressContext = (0, import_react5.createContext)(null);
+var import_react6 = require("react");
+var ProgressContext = (0, import_react6.createContext)(null);
 var ID_PREFIX2 = ":progress";
 var useProgress = () => {
-  const context = (0, import_react5.useContext)(ProgressContext);
+  const context = (0, import_react6.useContext)(ProgressContext);
   if (!context) {
     throw new Error("useProgress must be used within a Progress provider");
   }
@@ -586,10 +682,17 @@ var ProgressIndicator = ({
   className,
   style,
   ref,
+  onTransitionEnd,
   ...others
 }) => {
-  const { value, max, intent, shape, isIndeterminate } = useProgress();
+  const { value, max, intent, shape, isIndeterminate, onComplete } = useProgress();
   const x = (max - value) / max * 100;
+  const handleTransitionEnd = (event) => {
+    onTransitionEnd?.(event);
+    if (value >= max && onComplete && !isIndeterminate) {
+      onComplete();
+    }
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     import_radix_ui2.Progress.ProgressIndicator,
     {
@@ -597,6 +700,7 @@ var ProgressIndicator = ({
       className: progressIndicatorStyles({ className, intent, shape, isIndeterminate }),
       style: { ...style, ...!isIndeterminate && { transform: `translateX(-${x}%)` } },
       ref,
+      onTransitionEnd: handleTransitionEnd,
       ...others
     }
   );
@@ -634,14 +738,23 @@ var Progress = ({
   shape = "square",
   intent = "basic",
   isIndeterminate = false,
+  onComplete,
   children = /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ProgressBar, {}),
   ref,
   ...others
 }) => {
-  const [labelId, setLabelId] = (0, import_react6.useState)();
-  const value = (0, import_react6.useMemo)(() => {
-    return { value: valueProp ?? 0, max, intent, shape, isIndeterminate, onLabelId: setLabelId };
-  }, [max, valueProp, intent, shape, isIndeterminate, setLabelId]);
+  const [labelId, setLabelId] = (0, import_react7.useState)();
+  const value = (0, import_react7.useMemo)(() => {
+    return {
+      value: valueProp ?? 0,
+      max,
+      intent,
+      shape,
+      isIndeterminate,
+      onLabelId: setLabelId,
+      onComplete
+    };
+  }, [max, valueProp, intent, shape, isIndeterminate, setLabelId, onComplete]);
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ProgressContext.Provider, { "data-spark-component": "progress", value, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     import_radix_ui3.Progress.Progress,
     {
@@ -661,7 +774,7 @@ Progress.displayName = "Progress";
 
 // src/progress/ProgressLabel.tsx
 var import_use_merge_refs = require("@spark-ui/hooks/use-merge-refs");
-var import_react7 = require("react");
+var import_react8 = require("react");
 var import_jsx_runtime8 = require("react/jsx-runtime");
 var ProgressLabel = ({
   id: idProp,
@@ -669,10 +782,10 @@ var ProgressLabel = ({
   ref: forwardedRef,
   ...others
 }) => {
-  const internalID = `${ID_PREFIX2}-label-${(0, import_react7.useId)()}`;
+  const internalID = `${ID_PREFIX2}-label-${(0, import_react8.useId)()}`;
   const id = idProp || internalID;
   const { onLabelId } = useProgress();
-  const rootRef = (0, import_react7.useCallback)(
+  const rootRef = (0, import_react8.useCallback)(
     (el) => {
       onLabelId(el ? id : void 0);
     },
@@ -707,11 +820,11 @@ ProgressLabel.displayName = "Progress.Label";
 // src/file-upload/FileUploadItemDeleteTrigger.tsx
 var import_Close = require("@spark-ui/icons/Close");
 var import_class_variance_authority9 = require("class-variance-authority");
-var import_react9 = require("react");
+var import_react10 = require("react");
 
 // src/button/Button.tsx
 var import_class_variance_authority7 = require("class-variance-authority");
-var import_react8 = require("react");
+var import_react9 = require("react");
 
 // src/spinner/Spinner.styles.tsx
 var import_internal_utils2 = require("@spark-ui/internal-utils");
@@ -1516,7 +1629,7 @@ var Button = ({
 }) => {
   const Component = asChild ? Slot : "button";
   const shouldNotInteract = !!disabled || isLoading;
-  const disabledEventHandlers = (0, import_react8.useMemo)(() => {
+  const disabledEventHandlers = (0, import_react9.useMemo)(() => {
     const result = {};
     if (shouldNotInteract) {
       blockedEventHandlers.forEach((eventHandler) => result[eventHandler] = void 0);
@@ -1622,15 +1735,24 @@ var ItemDeleteTrigger = ({
   onClick,
   ...props
 }) => {
-  const { removeFile, triggerRef, dropzoneRef, deleteButtonRefs, disabled, readOnly, files } = useFileUploadContext();
-  const buttonRef = (0, import_react9.useRef)(null);
+  const {
+    removeFile,
+    triggerRef,
+    dropzoneRef,
+    deleteButtonRefs,
+    inputRef,
+    disabled,
+    readOnly,
+    files
+  } = useFileUploadContext();
+  const buttonRef = (0, import_react10.useRef)(null);
   const fileIndex = files.findIndex((f) => f.name === file.name && f.size === file.size);
   const handleClick = (e) => {
     if (disabled || readOnly) {
       return;
     }
     removeFile(fileIndex);
-    setTimeout(() => {
+    requestAnimationFrame(() => {
       const remainingButtons = deleteButtonRefs.current.filter(Boolean);
       if (remainingButtons.length > 0) {
         const targetIndex = Math.min(fileIndex, remainingButtons.length - 1);
@@ -1639,12 +1761,15 @@ var ItemDeleteTrigger = ({
           nextButton.focus();
         }
       } else {
-        const focusTarget = triggerRef.current || dropzoneRef.current;
+        const focusTarget = findFocusableElement(
+          [triggerRef.current, dropzoneRef.current],
+          inputRef
+        );
         if (focusTarget) {
           focusTarget.focus();
         }
       }
-    }, 0);
+    });
     onClick?.(e);
   };
   const setRef = (node) => {
@@ -1681,7 +1806,6 @@ ItemDeleteTrigger.displayName = "FileUpload.ItemDeleteTrigger";
 // src/file-upload/FileUploadAcceptedFile.tsx
 var import_jsx_runtime13 = require("react/jsx-runtime");
 var AcceptedFile = ({
-  asChild: _asChild = false,
   className,
   file,
   uploadProgress,
@@ -1690,6 +1814,17 @@ var AcceptedFile = ({
   ...props
 }) => {
   const { locale } = useFileUploadContext();
+  const [showProgress, setShowProgress] = (0, import_react11.useState)(uploadProgress !== void 0);
+  (0, import_react11.useEffect)(() => {
+    if (uploadProgress !== void 0) {
+      setShowProgress(true);
+    } else {
+      setShowProgress(false);
+    }
+  }, [uploadProgress]);
+  const handleProgressComplete = (0, import_react11.useCallback)(() => {
+    setShowProgress(false);
+  }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
     "li",
     {
@@ -1702,13 +1837,19 @@ var AcceptedFile = ({
       ),
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "size-sz-40 bg-support-container flex items-center justify-center rounded-md", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon, { size: "md", children: getFileIcon(file) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "min-w-0 flex-1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "gap-md flex flex-row items-center justify-between", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "text-body-2 truncate font-medium", children: file.name }),
-            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "text-caption opacity-dim-1", children: formatFileSize(file.size, locale) })
-          ] }),
-          uploadProgress !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "mt-md", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Progress2, { value: uploadProgress, max: 100, "aria-label": progressAriaLabel }) })
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "size-sz-36 bg-support-container flex items-center justify-center rounded-md", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon, { size: "md", children: getFileIcon(file) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "gap-md relative flex min-w-0 flex-1 flex-row items-center justify-between self-stretch", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "text-body-2 truncate font-medium", children: file.name }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "text-caption opacity-dim-1", children: formatFileSize(file.size, locale) }),
+          showProgress && uploadProgress !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "absolute bottom-0 left-0 w-full", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            Progress2,
+            {
+              value: uploadProgress,
+              max: 100,
+              "aria-label": progressAriaLabel,
+              onComplete: handleProgressComplete
+            }
+          ) })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ItemDeleteTrigger, { "aria-label": deleteButtonAriaLabel, file })
       ]
@@ -1732,17 +1873,17 @@ Context.displayName = "FileUpload.Context";
 
 // src/file-upload/FileUploadDropzone.tsx
 var import_class_variance_authority11 = require("class-variance-authority");
-var import_react10 = require("react");
+var import_react12 = require("react");
 var import_jsx_runtime15 = require("react/jsx-runtime");
-var DropzoneContext = (0, import_react10.createContext)(false);
-var useDropzoneContext = () => (0, import_react10.useContext)(DropzoneContext);
+var DropzoneContext = (0, import_react12.createContext)(false);
+var useDropzoneContext = () => (0, import_react12.useContext)(DropzoneContext);
 function Dropzone({
   children,
   className,
   unstyled = false
 }) {
   const ctx = useFileUploadContext();
-  const dropzoneRef = (0, import_react10.useRef)(null);
+  const dropzoneRef = (0, import_react12.useRef)(null);
   if (!ctx) throw new Error("FileUploadDropzone must be used inside <FileUpload>");
   const handleDrop = (e) => {
     e.preventDefault();
@@ -1824,20 +1965,19 @@ Dropzone.displayName = "FileUploadDropzone";
 
 // src/file-upload/FileUploadPreviewImage.tsx
 var import_class_variance_authority12 = require("class-variance-authority");
-var import_react11 = require("react");
+var import_react13 = require("react");
 var import_jsx_runtime16 = require("react/jsx-runtime");
 var PreviewImage = ({
-  asChild: _asChild = false,
   className,
   file,
   fallback = "\u{1F4C4}",
   ...props
 }) => {
-  const [imageError, setImageError] = (0, import_react11.useState)(false);
-  const [imageLoaded, setImageLoaded] = (0, import_react11.useState)(false);
+  const [imageError, setImageError] = (0, import_react13.useState)(false);
+  const [imageLoaded, setImageLoaded] = (0, import_react13.useState)(false);
   const isImage = file.type.startsWith("image/");
   const imageUrl = isImage ? URL.createObjectURL(file) : null;
-  (0, import_react11.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     return () => {
       if (imageUrl) {
         URL.revokeObjectURL(imageUrl);
@@ -1889,7 +2029,7 @@ var import_class_variance_authority14 = require("class-variance-authority");
 // src/file-upload/FileUploadRejectedFileDeleteTrigger.tsx
 var import_Close2 = require("@spark-ui/icons/Close");
 var import_class_variance_authority13 = require("class-variance-authority");
-var import_react12 = require("react");
+var import_react14 = require("react");
 var import_jsx_runtime17 = require("react/jsx-runtime");
 var RejectedFileDeleteTrigger = ({
   className,
@@ -1897,8 +2037,17 @@ var RejectedFileDeleteTrigger = ({
   onClick,
   ...props
 }) => {
-  const { removeRejectedFile, triggerRef, dropzoneRef, disabled, readOnly, rejectedFiles } = useFileUploadContext();
-  const buttonRef = (0, import_react12.useRef)(null);
+  const {
+    removeRejectedFile,
+    triggerRef,
+    dropzoneRef,
+    rejectedFileDeleteButtonRefs,
+    inputRef,
+    disabled,
+    readOnly,
+    rejectedFiles
+  } = useFileUploadContext();
+  const buttonRef = (0, import_react14.useRef)(null);
   const rejectedFileIndex = rejectedFiles.findIndex(
     (rf) => rf.file.name === rejectedFile.file.name && rf.file.size === rejectedFile.file.size
   );
@@ -1907,18 +2056,43 @@ var RejectedFileDeleteTrigger = ({
       return;
     }
     removeRejectedFile(rejectedFileIndex);
-    setTimeout(() => {
-      const focusTarget = triggerRef.current || dropzoneRef.current;
-      if (focusTarget) {
-        focusTarget.focus();
+    requestAnimationFrame(() => {
+      const remainingButtons = rejectedFileDeleteButtonRefs.current.filter(Boolean);
+      if (remainingButtons.length > 0) {
+        const targetIndex = Math.min(rejectedFileIndex, remainingButtons.length - 1);
+        const nextButton = remainingButtons[targetIndex];
+        if (nextButton) {
+          nextButton.focus();
+        }
+      } else {
+        const focusTarget = findFocusableElement(
+          [triggerRef.current, dropzoneRef.current],
+          inputRef
+        );
+        if (focusTarget) {
+          focusTarget.focus();
+        }
       }
-    }, 0);
+    });
     onClick?.(e);
   };
+  const setRef = (node) => {
+    buttonRef.current = node;
+    if (node) {
+      while (rejectedFileDeleteButtonRefs.current.length <= rejectedFileIndex) {
+        rejectedFileDeleteButtonRefs.current.push(null);
+      }
+      rejectedFileDeleteButtonRefs.current[rejectedFileIndex] = node;
+    } else {
+      if (rejectedFileDeleteButtonRefs.current[rejectedFileIndex]) {
+        rejectedFileDeleteButtonRefs.current[rejectedFileIndex] = null;
+      }
+    }
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     IconButton,
     {
-      ref: buttonRef,
+      ref: setRef,
       "data-spark-component": "file-upload-rejected-file-delete-trigger",
       className: (0, import_class_variance_authority13.cx)(className),
       onClick: handleClick,
@@ -1936,7 +2110,6 @@ RejectedFileDeleteTrigger.displayName = "FileUpload.RejectedFileDeleteTrigger";
 // src/file-upload/FileUploadRejectedFile.tsx
 var import_jsx_runtime18 = require("react/jsx-runtime");
 var RejectedFile = ({
-  asChild: _asChild = false,
   className,
   rejectedFile,
   renderError,
@@ -1957,7 +2130,7 @@ var RejectedFile = ({
       ),
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "size-sz-40 bg-error-container flex items-center justify-center rounded-md", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Icon, { size: "md", className: "text-error", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_WarningOutline.WarningOutline, {}) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "size-sz-36 bg-error-container flex items-center justify-center rounded-md", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Icon, { size: "md", className: "text-error", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_WarningOutline.WarningOutline, {}) }) }),
         /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "gap-md flex flex-col", children: [
           /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "gap-md flex flex-row items-center justify-between", children: [
             /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: "text-body-2 truncate font-medium", children: rejectedFile.file.name }),
@@ -2076,6 +2249,7 @@ RejectedFile.displayName = "FileUpload.RejectedFile";
 RejectedFileDeleteTrigger.displayName = "FileUpload.RejectedFileDeleteTrigger";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  FILE_UPLOAD_ERRORS,
   FileUpload
 });
 //# sourceMappingURL=index.js.map