@multiplatform.one/forms 7.4.0 → 7.5.0

package/dist/esm/fields/FileUpload/index.mjs

@@ -1,22 +1,30 @@
 import { FileIcon, UploadIcon, XIcon } from "@phosphor-icons/react";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { useProps } from "tamagui";
-import { Image, isWeb, Paragraph, Text, XStack, YStack, styled } from "tamagui";
+import { Image, isWeb, Text, XStack, YStack, styled } from "tamagui";
 import { Button } from "../../Button/index.mjs";
 import { Field, FieldLayout } from "../../fieldLayout.mjs";
 import { Skeleton } from "../../Skeleton/index.mjs";
 import { clampRadiusForLargeComponent, getFieldError, getFieldHeight, mergeFieldHandler, useFormField, useResolvedValidators } from "../../shared/utils.mjs";
 import { ensureFocusVisibleRing, ensureKeyboardModalityTracking, wasKeyboardFocus } from "@multiplatform.one/theme";
-import { formCommonColors, formInputColors } from "../../shared/colorRamps.mjs";
+import { formCommonColors, formDropzoneColors, formInputColors } from "../../shared/colorRamps.mjs";
 import { t } from "../../shared/t.mjs";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { pickFilesNatively } from "./nativeFilePicker.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 const UploadAreaFrame = styled(YStack, {
   width: "100%",
   position: "relative",
   overflow: "hidden",
   borderStyle: "dashed",
-  backgroundColor: formInputColors.background.base,
-  borderColor: formInputColors.border.base,
+  // BENTO-DERIVED (bento-pickers-measured.md §2/§4, MPO-57): the zone ground
+  // is TRANSPARENT — the page shows through and the dashed edge is the whole
+  // control. Only the LC-40 disabled wash paints the ground at rest; the
+  // hover/drag $color4 flood is a held mpo state, not a ground.
+  backgroundColor: "transparent",
+  // The dash is the legible $color9 step (boards media-01..04: 1px dashed
+  // rgb(77,77,77) light / rgb(133,133,133) dark) — formInputColors.border.base
+  // ($borderColor) measured near-invisible as a dashed edge.
+  borderColor: formDropzoneColors.border,
   // LC-71: kill UA :focus-visible on the dropzone. House ring is painted
   // only on keyboard-origin focus via wasKeyboardFocus() below — never the
   // 1px browser outline (forms-fileupload--standalone audit Cluster C).
@@ -29,13 +37,6 @@ const UploadAreaFrame = styled(YStack, {
   focusVisibleStyle: {
     outlineWidth: 0,
     outlineStyle: "none"
-  },
-  variants: {
-    outlined: {
-      true: {
-        backgroundColor: "transparent"
-      }
-    }
   }
 });
 const DropOverlayFrame = styled(YStack, {
@@ -55,7 +56,8 @@ const DropOverlayFrame = styled(YStack, {
 const UploadFileListFrame = styled(YStack, {
   width: "100%",
   borderTopWidth: 1,
-  borderTopColor: formCommonColors.divider
+  borderStyle: "dashed",
+  borderTopColor: formDropzoneColors.border
 });
 function FileUpload(props) {
   const {
@@ -66,12 +68,15 @@ function FileUpload(props) {
     multiple = false,
     dragDrop = true,
     showPreview = true,
-    placeholder = t("or drag and drop"),
+    // Bento caption on web; native has nothing to drag so the same slot is the tap hint.
+    placeholder = isWeb ? t("Drag a file into this area") : t("or tap to browse"),
     buttonText = t("Choose File"),
     onFileSelect,
     onFileRemove,
+    onUpload,
     onChange: onChangeProp,
     onValueChange: onValueChangeProp,
+    pickerMode = "auto",
     mode,
     name,
     preserveValue,
@@ -80,6 +85,7 @@ function FileUpload(props) {
     readOnly,
     skeleton,
     compact,
+    actions,
     id: idProp,
     ...fieldProps
   } = useProps(props);
@@ -101,13 +107,30 @@ function FileUpload(props) {
   }, [onChangeProp, onValueChangeProp]);
   const resolvedValidators = useResolvedValidators(fieldProps.required, validators, fieldProps.label, name);
   const cappedRadius = clampRadiusForLargeComponent(knobProps.borderRadius.borderRadius);
+  const rowMediaPx = knobProps.nestedControl.px;
+  const rowGlyphSize = knobProps.controlIcon.width;
   const [selectedFiles, setSelectedFiles] = useState([]);
+  const [transfers, setTransfers] = useState([]);
   const [isDragOver, setIsDragOver] = useState(false);
   const [validationError, setValidationError] = useState();
   const fileInputRef = useRef(null);
   const zoneCleanupRef = useRef(null);
   const lastZoneInputWasKeyboardRef = useRef(false);
   const previewUrlsRef = useRef(/* @__PURE__ */new Map());
+  const transferSeqRef = useRef(0);
+  const transfersRef = useRef([]);
+  const onUploadRef = useRef(onUpload);
+  onUploadRef.current = onUpload;
+  const emitFieldRef = useRef(void 0);
+  const multipleRef = useRef(multiple);
+  multipleRef.current = multiple;
+  const setTransfersAndRef = useCallback(updater => {
+    setTransfers(prev => {
+      const next = updater(prev);
+      transfersRef.current = next;
+      return next;
+    });
+  }, []);
   useEffect(() => {
     if (!isWeb) return;
     ensureKeyboardModalityTracking();
@@ -124,6 +147,7 @@ function FileUpload(props) {
       document.removeEventListener("pointerdown", onPointer, true);
       previewUrlsRef.current.forEach(url => URL.revokeObjectURL(url));
       previewUrlsRef.current.clear();
+      transfersRef.current.forEach(item => item.controller.abort());
       zoneCleanupRef.current?.();
       zoneCleanupRef.current = null;
     };
@@ -165,6 +189,92 @@ function FileUpload(props) {
     }
     onValueChange(nextFiles[0] ?? null);
   }, [multiple]);
+  const runTransfer = useCallback(async (id2, file, controller) => {
+    const upload = onUploadRef.current;
+    if (!upload) return;
+    try {
+      await upload(file, {
+        onProgress: percent => {
+          const n = Math.min(100, Math.max(0, Math.round(Number(percent) || 0)));
+          setTransfersAndRef(prev => prev.map(item => item.id === id2 ? {
+            ...item,
+            progress: n
+          } : item));
+        },
+        signal: controller.signal
+      });
+      if (controller.signal.aborted) return;
+      setTransfersAndRef(prev => prev.filter(item => item.id !== id2));
+      setSelectedFiles(prev => {
+        const nextFiles = multipleRef.current ? [...prev, file] : [file];
+        syncFieldValue(nextFiles, emitFieldRef.current);
+        return nextFiles;
+      });
+    } catch (err) {
+      if (controller.signal.aborted || err instanceof DOMException && err.name === "AbortError") {
+        setTransfersAndRef(prev => prev.filter(item => item.id !== id2));
+        return;
+      }
+      const problem = err instanceof Error && err.message ? err.message : t("Upload failed");
+      setTransfersAndRef(prev => prev.map(item => item.id === id2 ? {
+        ...item,
+        status: "failed",
+        error: {
+          problem,
+          action: t("Try again or remove the file"),
+          cta: t("Retry")
+        }
+      } : item));
+    }
+  }, [setTransfersAndRef, syncFieldValue]);
+  const startTransfer = useCallback(file => {
+    if (!multipleRef.current) {
+      transfersRef.current.forEach(item2 => item2.controller.abort());
+      setTransfersAndRef(() => []);
+    }
+    const id2 = `xfer-${++transferSeqRef.current}`;
+    const controller = new AbortController();
+    const item = {
+      id: id2,
+      file,
+      status: "uploading",
+      progress: 0,
+      controller
+    };
+    setTransfersAndRef(prev => [...prev, item]);
+    void runTransfer(id2, file, controller);
+  }, [runTransfer, setTransfersAndRef]);
+  const handleCancelTransfer = useCallback(id2 => {
+    const item = transfersRef.current.find(row => row.id === id2);
+    item?.controller.abort();
+    setTransfersAndRef(prev => prev.filter(row => row.id !== id2));
+  }, [setTransfersAndRef]);
+  const handleRetryTransfer = useCallback(id2 => {
+    const item = transfersRef.current.find(row => row.id === id2);
+    if (!item) return;
+    item.controller.abort();
+    const controller = new AbortController();
+    setTransfersAndRef(prev => prev.map(row => row.id === id2 ? {
+      ...row,
+      status: "uploading",
+      progress: 0,
+      error: void 0,
+      controller
+    } : row));
+    void runTransfer(id2, item.file, controller);
+  }, [runTransfer, setTransfersAndRef]);
+  const handleRemoveTransfer = useCallback(id2 => {
+    const item = transfersRef.current.find(row => row.id === id2);
+    item?.controller.abort();
+    if (isWeb && item) {
+      const previewUrl = previewUrlsRef.current.get(item.file);
+      if (previewUrl) {
+        URL.revokeObjectURL(previewUrl);
+        previewUrlsRef.current.delete(item.file);
+      }
+    }
+    setTransfersAndRef(prev => prev.filter(row => row.id !== id2));
+  }, [setTransfersAndRef]);
   const handleFileSelect = useCallback((files, onValueChange, rawFileList) => {
     if (!files) return;
     const fileArray = Array.isArray(files) ? files : Array.from(files);
@@ -180,14 +290,19 @@ function FileUpload(props) {
     });
     setValidationError(errors.length > 0 ? errors.join("\n") : void 0);
     if (validFiles.length > 0) {
-      setSelectedFiles(prev => {
-        const nextFiles = multiple ? [...prev, ...validFiles] : validFiles.slice(0, 1);
-        syncFieldValue(nextFiles, onValueChange);
-        return nextFiles;
-      });
+      emitFieldRef.current = onValueChange;
+      if (onUploadRef.current) {
+        validFiles.forEach(file => startTransfer(file));
+      } else {
+        setSelectedFiles(prev => {
+          const nextFiles = multiple ? [...prev, ...validFiles] : validFiles.slice(0, 1);
+          syncFieldValue(nextFiles, onValueChange);
+          return nextFiles;
+        });
+      }
       onFileSelect?.(rawFileList ?? (Array.isArray(files) ? null : files));
     }
-  }, [multiple, validateFile, onFileSelect, syncFieldValue]);
+  }, [multiple, validateFile, onFileSelect, syncFieldValue, startTransfer]);
   const handleFileRemove = useCallback((fileToRemove, onValueChange) => {
     if (isWeb) {
       const previewUrl = previewUrlsRef.current.get(fileToRemove);
@@ -236,6 +351,31 @@ function FileUpload(props) {
     if (disabled || readOnly) return;
     fileInputRef.current?.click();
   }, [disabled, readOnly]);
+  const nativePickInFlightRef = useRef(false);
+  const openNativePicker = useCallback(async (onValueChange, onBlurHandler) => {
+    if (disabled || readOnly || nativePickInFlightRef.current) return;
+    nativePickInFlightRef.current = true;
+    try {
+      const outcome = await pickFilesNatively({
+        accept,
+        multiple,
+        mode: pickerMode
+      });
+      if (outcome.unavailable) {
+        setValidationError(t("No file picker is available on this device."));
+        return;
+      }
+      if (outcome.denied) {
+        setValidationError(t("Permission to open your photo library was denied."));
+        return;
+      }
+      if (outcome.canceled || outcome.files.length === 0) return;
+      handleFileSelect(outcome.files, onValueChange);
+      onBlurHandler?.();
+    } finally {
+      nativePickInFlightRef.current = false;
+    }
+  }, [accept, disabled, handleFileSelect, multiple, pickerMode, readOnly]);
   const isInteractiveChild = useCallback(e => {
     const target = e.target;
     const current = e.currentTarget;
@@ -275,7 +415,10 @@ function FileUpload(props) {
     setKbZoneFocus(false);
   }, []);
   const getFilePreview = useCallback(file => {
-    if (!isWeb) return null;
+    if (!isWeb) {
+      const uri = file.uri;
+      return uri && file.type?.startsWith("image/") ? uri : null;
+    }
     if (file.type.startsWith("image/")) {
       const existingUrl = previewUrlsRef.current.get(file);
       if (existingUrl) return existingUrl;
@@ -300,41 +443,89 @@ function FileUpload(props) {
     });
   }
   const canInteract = !disabled && !readOnly;
-  const renderUploadArea = (errorProp, onValueChange, onBlurHandler) => {
-    if (!isWeb) {
-      return /* @__PURE__ */jsx(UploadAreaFrame, {
-        outlined: knobProps.outlined,
-        ...(disabled ? disabledState.surfaceKnobProps : void 0),
-        borderRadius: cappedRadius,
-        borderWidth: knobProps.borderRadius.borderWidth ?? 1,
-        ...(errorProp ? {
-          borderColor: formCommonColors.error
-        } : void 0),
-        elevation: knobProps.elevation,
-        transition: knobProps.transition,
-        "aria-required": fieldProps.required || void 0,
-        "aria-invalid": !!errorProp || void 0,
-        "aria-readonly": readOnly || void 0,
-        children: /* @__PURE__ */jsxs(YStack, {
-          ...knobProps.panelPadding,
-          minHeight: getFieldHeight(fieldProps.size || knobProps.sizeToken, 5),
-          width: "100%",
-          alignItems: "center",
-          justifyContent: "center",
-          ...knobProps.gap,
-          children: [/* @__PURE__ */jsx(Paragraph, {
-            color: formCommonColors.text,
-            textAlign: "center",
-            children: t("File upload requires a native file picker.")
-          }), /* @__PURE__ */jsx(Paragraph, {
-            color: formCommonColors.muted,
-            textAlign: "center",
-            fontSize: "$2",
-            children: "Use expo-document-picker or expo-image-picker for native support."
-          })]
-        })
-      });
+  const hasRows = selectedFiles.length > 0 || transfers.length > 0;
+  const renderRemoveDisc = (ariaLabel, onPress) => canInteract ? /* @__PURE__ */jsx(Button, {
+    nested: true,
+    circular: true,
+    icon: XIcon,
+    "aria-label": ariaLabel,
+    backgroundColor: formDropzoneColors.removeDisc.background.base,
+    color: formDropzoneColors.removeDisc.ink,
+    hoverStyle: {
+      backgroundColor: formDropzoneColors.removeDisc.background.hover
+    },
+    pressStyle: {
+      backgroundColor: formDropzoneColors.removeDisc.background.press
+    },
+    onPress: e => {
+      e.stopPropagation();
+      onPress();
     }
+  }) : null;
+  const renderFileMeta = (file, preview, extra) => /* @__PURE__ */jsxs(XStack, {
+    flex: 1,
+    gap: "$2",
+    alignItems: "center",
+    children: [preview ? /* @__PURE__ */jsx(Image, {
+      borderRadius: cappedRadius,
+      src: preview,
+      alt: file.name,
+      width: rowMediaPx,
+      height: rowMediaPx,
+      objectFit: "cover"
+    }) : /* @__PURE__ */jsx(XStack, {
+      width: rowMediaPx,
+      height: rowMediaPx,
+      justifyContent: "center",
+      alignItems: "center",
+      children: /* @__PURE__ */jsx(FileIcon, {
+        size: rowGlyphSize
+      })
+    }), /* @__PURE__ */jsxs(YStack, {
+      flex: 1,
+      gap: "$1",
+      children: [/* @__PURE__ */jsx(Text, {
+        numberOfLines: 1,
+        ...knobProps.body,
+        children: file.name
+      }), /* @__PURE__ */jsx(Text, {
+        numberOfLines: 1,
+        color: formCommonColors.text,
+        ...knobProps.label,
+        fontWeight: "700",
+        children: formatFileSize(file.size)
+      }), extra]
+    })]
+  });
+  const renderUploadArea = (errorProp, onValueChange, onBlurHandler) => {
+    emitFieldRef.current = onValueChange;
+    const requestFiles = isWeb ? openFileDialog : () => {
+      void openNativePicker(onValueChange, onBlurHandler);
+    };
+    const zoneInteractionProps = canInteract ? isWeb ? {
+      // DROPZONE-FULL-TARGET: the entire surface is the click target.
+      role: "button",
+      tabIndex: 0,
+      onFocus: handleZoneFocus,
+      onBlur: handleZoneBlur,
+      cursor: "pointer",
+      onClick: handleZoneClick,
+      onKeyDown: handleZoneKeyDown,
+      ...(dragDrop ? {
+        onDragEnter: handleDragEnter,
+        onDragOver: handleDragOver,
+        onDragLeave: handleDragLeave,
+        onDrop: e => {
+          handleDrop(e, onValueChange);
+          onBlurHandler?.();
+        }
+      } : null)
+    } : {
+      role: "button",
+      onPress: requestFiles
+    } : {
+      cursor: disabled ? "not-allowed" : void 0
+    };
     return /* @__PURE__ */jsxs(UploadAreaFrame, {
       id,
       ref: bindZoneNode,
@@ -350,48 +541,31 @@ function FileUpload(props) {
       } : void 0),
       elevation: knobProps.elevation,
       transition: knobProps.transition,
+      minHeight: getFieldHeight(fieldProps.size || knobProps.sizeToken, 5),
       "aria-required": fieldProps.required || void 0,
       "aria-invalid": !!errorProp || void 0,
       "aria-readonly": readOnly || void 0,
       "aria-disabled": disabled || void 0,
       ...(kbZoneFocus ? ensureFocusVisibleRing({
-        outlineOffset: -2
+        outlineOffset: 0
       }) : void 0),
       hoverStyle: canInteract ? {
         borderColor: errorProp ? formCommonColors.error : formInputColors.border.hover,
-        ...(knobProps.outlined ? void 0 : {
-          backgroundColor: formInputColors.background.focus
-        })
+        // Held exception: the measured mpo $color4 hover flood stays
+        // (Bento's hover/drag states were not measurable headlessly).
+        backgroundColor: formInputColors.background.focus
       } : void 0,
-      ...(canInteract ? {
-        // DROPZONE-FULL-TARGET: the entire surface is the click target.
-        role: "button",
-        tabIndex: 0,
-        onFocus: handleZoneFocus,
-        onBlur: handleZoneBlur,
-        // Labeled fields get aria-labelledby auto-wired by the
-        // FieldLayout Label (tamagui Label htmlFor → this id); the
-        // aria-label fallback covers label-less usage.
-        ...(fieldProps.label && id ? null : {
-          "aria-label": typeof fieldProps.label === "string" ? t("{{label}}: choose file", {
-            label: fieldProps.label
-          }) : t("Choose file")
-        }),
-        cursor: "pointer",
-        onClick: handleZoneClick,
-        onKeyDown: handleZoneKeyDown,
-        ...(dragDrop ? {
-          onDragEnter: handleDragEnter,
-          onDragOver: handleDragOver,
-          onDragLeave: handleDragLeave,
-          onDrop: e => {
-            handleDrop(e, onValueChange);
-            onBlurHandler?.();
-          }
-        } : null)
-      } : {
-        cursor: disabled ? "not-allowed" : void 0
-      }),
+      ...zoneInteractionProps,
+      ...(canInteract ?
+      // Labeled fields get aria-labelledby auto-wired by the FieldLayout
+      // Label (tamagui Label htmlFor → this id); the aria-label fallback
+      // covers label-less usage, and is what a screen reader announces
+      // for the native press target too.
+      fieldProps.label && id ? null : {
+        "aria-label": typeof fieldProps.label === "string" ? t("{{label}}: choose file", {
+          label: fieldProps.label
+        }) : t("Choose file")
+      } : null),
       children: [isDragOver && canInteract && dragDrop ? /* @__PURE__ */jsxs(DropOverlayFrame, {
         "data-file-upload": "overlay",
         borderRadius: cappedRadius,
@@ -402,15 +576,15 @@ function FileUpload(props) {
         ...knobProps.gap,
         ...knobProps.panelPadding,
         children: [/* @__PURE__ */jsx(XStack, {
-          width: compact ? 24 : 32,
-          height: compact ? 24 : 32,
+          width: rowMediaPx,
+          height: rowMediaPx,
           alignItems: "center",
           justifyContent: "center",
           ...{
             color: formCommonColors.text
           },
           children: /* @__PURE__ */jsx(UploadIcon, {
-            size: compact ? 24 : 32,
+            size: rowMediaPx,
             "aria-hidden": true
           })
         }), /* @__PURE__ */jsx(Text, {
@@ -421,38 +595,31 @@ function FileUpload(props) {
         })]
       }) : null, /* @__PURE__ */jsxs(YStack, {
         ...knobProps.panelPadding,
-        minHeight: getFieldHeight(fieldProps.size || knobProps.sizeToken, 5),
+        flexGrow: 1,
         width: "100%",
         alignItems: "center",
         justifyContent: "center",
         ...knobProps.gap,
-        children: [selectedFiles.length === 0 ? /* @__PURE__ */jsx(XStack, {
-          width: compact ? 24 : 32,
-          height: compact ? 24 : 32,
+        children: [/* @__PURE__ */jsxs(XStack, {
           alignItems: "center",
-          justifyContent: "center",
-          ...{
-            color: formCommonColors.muted
-          },
-          children: /* @__PURE__ */jsx(UploadIcon, {
-            size: compact ? 24 : 32,
-            "aria-hidden": true
-          })
-        }) : null, /* @__PURE__ */jsx(Button, {
-          onPress: openFileDialog,
-          disabled: !canInteract,
-          size: knobProps.sizeToken,
-          tabIndex: -1,
-          children: /* @__PURE__ */jsx(Button.Text, {
-            ...knobProps.body,
-            children: buttonText
-          })
-        }), selectedFiles.length === 0 && /* @__PURE__ */jsx(Text, {
+          ...knobProps.gap,
+          children: [/* @__PURE__ */jsx(Button, {
+            onPress: requestFiles,
+            disabled: !canInteract,
+            size: knobProps.sizeToken,
+            tabIndex: -1,
+            icon: UploadIcon,
+            children: /* @__PURE__ */jsx(Button.Text, {
+              ...knobProps.body,
+              children: buttonText
+            })
+          }), actions]
+        }), selectedFiles.length === 0 && transfers.length === 0 && /* @__PURE__ */jsx(Text, {
           color: formCommonColors.muted,
           textAlign: "center",
           ...knobProps.body,
           children: placeholder
-        }), /* @__PURE__ */jsx("input", {
+        }), isWeb ? /* @__PURE__ */jsx("input", {
           ref: fileInputRef,
           type: "file",
           accept,
@@ -466,9 +633,11 @@ function FileUpload(props) {
             display: "none"
           },
           disabled: !canInteract
-        })]
-      }), selectedFiles.length > 0 && /* @__PURE__ */jsx(UploadFileListFrame, {
-        children: selectedFiles.map((file, index) => {
+        }) : null]
+      }), hasRows && /* @__PURE__ */jsxs(UploadFileListFrame, {
+        "data-file-upload": "files",
+        borderTopWidth: knobProps.borderRadius.borderWidth ?? 1,
+        children: [selectedFiles.map((file, index) => {
           const preview = showPreview ? getFilePreview(file) : null;
           return /* @__PURE__ */jsxs(XStack, {
             width: "100%",
@@ -476,52 +645,75 @@ function FileUpload(props) {
             alignItems: "center",
             justifyContent: "space-between",
             ...knobProps.panelPadding,
-            children: [/* @__PURE__ */jsxs(XStack, {
-              flex: 1,
-              gap: "$2",
-              alignItems: "center",
-              children: [preview ? /* @__PURE__ */jsx(Image, {
-                borderRadius: cappedRadius,
-                src: preview,
-                alt: file.name,
-                width: compact ? 24 : 32,
-                height: compact ? 24 : 32,
-                objectFit: "cover"
-              }) : /* @__PURE__ */jsx(XStack, {
-                width: compact ? 24 : 32,
-                height: compact ? 24 : 32,
-                justifyContent: "center",
-                alignItems: "center",
-                children: /* @__PURE__ */jsx(FileIcon, {
-                  size: compact ? 14 : 16
+            children: [renderFileMeta(file, preview), renderRemoveDisc(t("Remove {{name}}", {
+              name: file.name
+            }), () => handleFileRemove(file, onValueChange))]
+          }, `${file.name}-${index}`);
+        }), transfers.map(item => {
+          const preview = showPreview ? getFilePreview(item.file) : null;
+          const isUploading = item.status === "uploading";
+          const failed = item.status === "failed" ? item.error : void 0;
+          return /* @__PURE__ */jsxs(XStack, {
+            "data-transfer-status": item.status,
+            width: "100%",
+            ...knobProps.gap,
+            alignItems: "center",
+            justifyContent: "space-between",
+            ...knobProps.panelPadding,
+            children: [renderFileMeta(item.file, preview, /* @__PURE__ */jsxs(Fragment, {
+              children: [isUploading ? /* @__PURE__ */jsx(YStack, {
+                "data-file-upload": "progress",
+                role: "progressbar",
+                "aria-label": t("Uploading {{name}}", {
+                  name: item.file.name
+                }),
+                "aria-valuemin": 0,
+                "aria-valuemax": 100,
+                "aria-valuenow": item.progress,
+                height: 11,
+                width: "100%",
+                borderRadius: 1e3,
+                backgroundColor: formDropzoneColors.progress.track,
+                overflow: "hidden",
+                children: /* @__PURE__ */jsx(YStack, {
+                  height: "100%",
+                  width: `${item.progress}%`,
+                  backgroundColor: formDropzoneColors.progress.fill
                 })
-              }), /* @__PURE__ */jsxs(YStack, {
-                flex: 1,
+              }) : null, failed ? /* @__PURE__ */jsxs(YStack, {
                 gap: "$1",
                 children: [/* @__PURE__ */jsx(Text, {
-                  numberOfLines: 1,
-                  ...knobProps.body,
-                  children: file.name
+                  color: formCommonColors.error,
+                  ...knobProps.label,
+                  children: failed.problem
                 }), /* @__PURE__ */jsx(Text, {
-                  numberOfLines: 1,
-                  color: formCommonColors.text,
-                  ...knobProps.body,
-                  children: formatFileSize(file.size)
+                  color: formCommonColors.muted,
+                  ...knobProps.label,
+                  children: failed.action
                 })]
-              })]
-            }), canInteract && /* @__PURE__ */jsx(Button, {
-              circular: true,
-              size: knobProps.sizeToken,
-              onPress: e => {
-                e.stopPropagation();
-                handleFileRemove(file, onValueChange);
-              },
-              children: /* @__PURE__ */jsx(Button.Icon, {
-                children: /* @__PURE__ */jsx(XIcon, {})
-              })
+              }) : null]
+            })), /* @__PURE__ */jsxs(XStack, {
+              ...knobProps.gap,
+              alignItems: "center",
+              children: [canInteract && failed ? /* @__PURE__ */jsx(Button, {
+                outlined: true,
+                size: "$2",
+                "aria-label": t("Retry {{name}}", {
+                  name: item.file.name
+                }),
+                onPress: e => {
+                  e.stopPropagation();
+                  handleRetryTransfer(item.id);
+                },
+                children: failed.cta ?? t("Retry")
+              }) : null, isUploading ? renderRemoveDisc(t("Cancel {{name}}", {
+                name: item.file.name
+              }), () => handleCancelTransfer(item.id)) : renderRemoveDisc(t("Remove {{name}}", {
+                name: item.file.name
+              }), () => handleRemoveTransfer(item.id))]
             })]
-          }, `${file.name}-${index}`);
-        })
+          }, item.id);
+        })]
       })]
     });
   };