@multiplatform.one/forms 7.4.1 → 7.6.0

package/dist/cjs/fields/FileUpload/index.native.js

@@ -39,13 +39,30 @@ var import_utils = require("../../shared/utils.native.js");
 var import_theme = require("@multiplatform.one/theme");
 var import_colorRamps = require("../../shared/colorRamps.native.js");
 var import_t = require("../../shared/t.native.js");
+var import_nativeFilePicker = require("./nativeFilePicker.native.js");
+function _instanceof(left, right) {
+  "@swc/helpers - instanceof";
+
+  if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) {
+    return !!right[Symbol.hasInstance](left);
+  } else {
+    return left instanceof right;
+  }
+}
 var UploadAreaFrame = (0, import_tamagui2.styled)(import_tamagui2.YStack, {
   width: "100%",
   position: "relative",
   overflow: "hidden",
   borderStyle: "dashed",
-  backgroundColor: import_colorRamps.formInputColors.background.base,
-  borderColor: import_colorRamps.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: import_colorRamps.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).
@@ -58,15 +75,18 @@ var UploadAreaFrame = (0, import_tamagui2.styled)(import_tamagui2.YStack, {
   focusVisibleStyle: {
     outlineWidth: 0,
     outlineStyle: "none"
-  },
-  variants: {
-    outlined: {
-      true: {
-        backgroundColor: "transparent"
-      }
-    }
   }
 });
+function withZoneFocusRing() {
+  var ring = (0, import_theme.ensureFocusVisibleRing)({
+    outlineOffset: 0
+  });
+  return {
+    ...ring,
+    focusStyle: ring,
+    focusVisibleStyle: ring
+  };
+}
 var DropOverlayFrame = (0, import_tamagui2.styled)(import_tamagui2.YStack, {
   position: "absolute",
   top: 0,
@@ -84,7 +104,8 @@ var DropOverlayFrame = (0, import_tamagui2.styled)(import_tamagui2.YStack, {
 var UploadFileListFrame = (0, import_tamagui2.styled)(import_tamagui2.YStack, {
   width: "100%",
   borderTopWidth: 1,
-  borderTopColor: import_colorRamps.formCommonColors.divider
+  borderStyle: "dashed",
+  borderTopColor: import_colorRamps.formDropzoneColors.border
 });
 function FileUpload(props) {
   var {
@@ -95,12 +116,15 @@ function FileUpload(props) {
     multiple = false,
     dragDrop = true,
     showPreview = true,
-    placeholder = (0, import_t.t)("or drag and drop"),
+    // Bento caption on web; native has nothing to drag so the same slot is the tap hint.
+    placeholder = import_tamagui2.isWeb ? (0, import_t.t)("Drag a file into this area") : (0, import_t.t)("or tap to browse"),
     buttonText = (0, import_t.t)("Choose File"),
     onFileSelect,
     onFileRemove,
+    onUpload,
     onChange: onChangeProp,
     onValueChange: onValueChangeProp,
+    pickerMode = "auto",
     mode,
     name,
     preserveValue,
@@ -109,6 +133,7 @@ function FileUpload(props) {
     readOnly,
     skeleton,
     compact,
+    actions,
     id: idProp,
     ...fieldProps
   } = (0, import_tamagui.useProps)(props);
@@ -130,13 +155,30 @@ function FileUpload(props) {
   }, [onChangeProp, onValueChangeProp]);
   var resolvedValidators = (0, import_utils.useResolvedValidators)(fieldProps.required, validators, fieldProps.label, name);
   var cappedRadius = (0, import_utils.clampRadiusForLargeComponent)(knobProps.borderRadius.borderRadius);
+  var rowMediaPx = knobProps.nestedControl.px;
+  var rowGlyphSize = knobProps.controlIcon.width;
   var [selectedFiles, setSelectedFiles] = (0, import_react2.useState)([]);
+  var [transfers, setTransfers] = (0, import_react2.useState)([]);
   var [isDragOver, setIsDragOver] = (0, import_react2.useState)(false);
   var [validationError, setValidationError] = (0, import_react2.useState)();
   var fileInputRef = (0, import_react2.useRef)(null);
   var zoneCleanupRef = (0, import_react2.useRef)(null);
   var lastZoneInputWasKeyboardRef = (0, import_react2.useRef)(false);
   var previewUrlsRef = (0, import_react2.useRef)(/* @__PURE__ */new Map());
+  var transferSeqRef = (0, import_react2.useRef)(0);
+  var transfersRef = (0, import_react2.useRef)([]);
+  var onUploadRef = (0, import_react2.useRef)(onUpload);
+  onUploadRef.current = onUpload;
+  var emitFieldRef = (0, import_react2.useRef)(void 0);
+  var multipleRef = (0, import_react2.useRef)(multiple);
+  multipleRef.current = multiple;
+  var setTransfersAndRef = (0, import_react2.useCallback)(function (updater) {
+    setTransfers(function (prev) {
+      var next = updater(prev);
+      transfersRef.current = next;
+      return next;
+    });
+  }, []);
   (0, import_react2.useEffect)(function () {
     if (!import_tamagui2.isWeb) return;
     (0, import_theme.ensureKeyboardModalityTracking)();
@@ -156,6 +198,9 @@ function FileUpload(props) {
         return URL.revokeObjectURL(url);
       });
       previewUrlsRef.current.clear();
+      transfersRef.current.forEach(function (item) {
+        return item.controller.abort();
+      });
       (_zoneCleanupRef_current = zoneCleanupRef.current) === null || _zoneCleanupRef_current === void 0 ? void 0 : _zoneCleanupRef_current.call(zoneCleanupRef);
       zoneCleanupRef.current = null;
     };
@@ -200,6 +245,132 @@ function FileUpload(props) {
     }
     onValueChange((_nextFiles_ = nextFiles[0]) !== null && _nextFiles_ !== void 0 ? _nextFiles_ : null);
   }, [multiple]);
+  var runTransfer = (0, import_react2.useCallback)(async function (id2, file, controller) {
+    var upload = onUploadRef.current;
+    if (!upload) return;
+    try {
+      await upload(file, {
+        onProgress: function onProgress(percent) {
+          var n = Math.min(100, Math.max(0, Math.round(Number(percent) || 0)));
+          setTransfersAndRef(function (prev) {
+            return prev.map(function (item) {
+              return item.id === id2 ? {
+                ...item,
+                progress: n
+              } : item;
+            });
+          });
+        },
+        signal: controller.signal
+      });
+      if (controller.signal.aborted) return;
+      setTransfersAndRef(function (prev) {
+        return prev.filter(function (item) {
+          return item.id !== id2;
+        });
+      });
+      setSelectedFiles(function (prev) {
+        var nextFiles = multipleRef.current ? [...prev, file] : [file];
+        syncFieldValue(nextFiles, emitFieldRef.current);
+        return nextFiles;
+      });
+    } catch (err) {
+      if (controller.signal.aborted || _instanceof(err, DOMException) && err.name === "AbortError") {
+        setTransfersAndRef(function (prev) {
+          return prev.filter(function (item) {
+            return item.id !== id2;
+          });
+        });
+        return;
+      }
+      var problem = _instanceof(err, Error) && err.message ? err.message : (0, import_t.t)("Upload failed");
+      setTransfersAndRef(function (prev) {
+        return prev.map(function (item) {
+          return item.id === id2 ? {
+            ...item,
+            status: "failed",
+            error: {
+              problem,
+              action: (0, import_t.t)("Try again or remove the file"),
+              cta: (0, import_t.t)("Retry")
+            }
+          } : item;
+        });
+      });
+    }
+  }, [setTransfersAndRef, syncFieldValue]);
+  var startTransfer = (0, import_react2.useCallback)(function (file) {
+    if (!multipleRef.current) {
+      transfersRef.current.forEach(function (item2) {
+        return item2.controller.abort();
+      });
+      setTransfersAndRef(function () {
+        return [];
+      });
+    }
+    var id2 = `xfer-${++transferSeqRef.current}`;
+    var controller = new AbortController();
+    var item = {
+      id: id2,
+      file,
+      status: "uploading",
+      progress: 0,
+      controller
+    };
+    setTransfersAndRef(function (prev) {
+      return [...prev, item];
+    });
+    void runTransfer(id2, file, controller);
+  }, [runTransfer, setTransfersAndRef]);
+  var handleCancelTransfer = (0, import_react2.useCallback)(function (id2) {
+    var item = transfersRef.current.find(function (row) {
+      return row.id === id2;
+    });
+    item === null || item === void 0 ? void 0 : item.controller.abort();
+    setTransfersAndRef(function (prev) {
+      return prev.filter(function (row) {
+        return row.id !== id2;
+      });
+    });
+  }, [setTransfersAndRef]);
+  var handleRetryTransfer = (0, import_react2.useCallback)(function (id2) {
+    var item = transfersRef.current.find(function (row) {
+      return row.id === id2;
+    });
+    if (!item) return;
+    item.controller.abort();
+    var controller = new AbortController();
+    setTransfersAndRef(function (prev) {
+      return prev.map(function (row) {
+        return row.id === id2 ? {
+          ...row,
+          status: "uploading",
+          progress: 0,
+          error: void 0,
+          controller
+        } : row;
+      });
+    });
+    void runTransfer(id2, item.file, controller);
+  }, [runTransfer, setTransfersAndRef]);
+  var handleRemoveTransfer = (0, import_react2.useCallback)(function (id2) {
+    var item = transfersRef.current.find(function (row) {
+      return row.id === id2;
+    });
+    item === null || item === void 0 ? void 0 : item.controller.abort();
+    if (import_tamagui2.isWeb && item) {
+      var previewUrl = previewUrlsRef.current.get(item.file);
+      if (previewUrl) {
+        URL.revokeObjectURL(previewUrl);
+        previewUrlsRef.current.delete(item.file);
+      }
+    }
+    setTransfersAndRef(function (prev) {
+      return prev.filter(function (row) {
+        return row.id !== id2;
+      });
+    });
+  }, [setTransfersAndRef]);
   var handleFileSelect = (0, import_react2.useCallback)(function (files, onValueChange, rawFileList) {
     if (!files) return;
     var fileArray = Array.isArray(files) ? files : Array.from(files);
@@ -215,14 +386,21 @@ function FileUpload(props) {
     });
     setValidationError(errors.length > 0 ? errors.join("\n") : void 0);
     if (validFiles.length > 0) {
-      setSelectedFiles(function (prev) {
-        var nextFiles = multiple ? [...prev, ...validFiles] : validFiles.slice(0, 1);
-        syncFieldValue(nextFiles, onValueChange);
-        return nextFiles;
-      });
+      emitFieldRef.current = onValueChange;
+      if (onUploadRef.current) {
+        validFiles.forEach(function (file) {
+          return startTransfer(file);
+        });
+      } else {
+        setSelectedFiles(function (prev) {
+          var nextFiles = multiple ? [...prev, ...validFiles] : validFiles.slice(0, 1);
+          syncFieldValue(nextFiles, onValueChange);
+          return nextFiles;
+        });
+      }
       onFileSelect === null || onFileSelect === void 0 ? void 0 : onFileSelect(rawFileList !== null && rawFileList !== void 0 ? rawFileList : Array.isArray(files) ? null : files);
     }
-  }, [multiple, validateFile, onFileSelect, syncFieldValue]);
+  }, [multiple, validateFile, onFileSelect, syncFieldValue, startTransfer]);
   var handleFileRemove = (0, import_react2.useCallback)(function (fileToRemove, onValueChange) {
     if (import_tamagui2.isWeb) {
       var previewUrl = previewUrlsRef.current.get(fileToRemove);
@@ -274,6 +452,31 @@ function FileUpload(props) {
     if (disabled || readOnly) return;
     (_fileInputRef_current = fileInputRef.current) === null || _fileInputRef_current === void 0 ? void 0 : _fileInputRef_current.click();
   }, [disabled, readOnly]);
+  var nativePickInFlightRef = (0, import_react2.useRef)(false);
+  var openNativePicker = (0, import_react2.useCallback)(async function (onValueChange, onBlurHandler) {
+    if (disabled || readOnly || nativePickInFlightRef.current) return;
+    nativePickInFlightRef.current = true;
+    try {
+      var outcome = await (0, import_nativeFilePicker.pickFilesNatively)({
+        accept,
+        multiple,
+        mode: pickerMode
+      });
+      if (outcome.unavailable) {
+        setValidationError((0, import_t.t)("No file picker is available on this device."));
+        return;
+      }
+      if (outcome.denied) {
+        setValidationError((0, import_t.t)("Permission to open your photo library was denied."));
+        return;
+      }
+      if (outcome.canceled || outcome.files.length === 0) return;
+      handleFileSelect(outcome.files, onValueChange);
+      onBlurHandler === null || onBlurHandler === void 0 ? void 0 : onBlurHandler();
+    } finally {
+      nativePickInFlightRef.current = false;
+    }
+  }, [accept, disabled, handleFileSelect, multiple, pickerMode, readOnly]);
   var isInteractiveChild = (0, import_react2.useCallback)(function (e) {
     var target = e.target;
     var current = e.currentTarget;
@@ -319,7 +522,11 @@ function FileUpload(props) {
     setKbZoneFocus(false);
   }, []);
   var getFilePreview = (0, import_react2.useCallback)(function (file) {
-    if (!import_tamagui2.isWeb) return null;
+    if (!import_tamagui2.isWeb) {
+      var _file_type;
+      var uri = file.uri;
+      return uri && ((_file_type = file.type) === null || _file_type === void 0 ? void 0 : _file_type.startsWith("image/")) ? uri : null;
+    }
     if (file.type.startsWith("image/")) {
       var existingUrl = previewUrlsRef.current.get(file);
       if (existingUrl) return existingUrl;
@@ -344,47 +551,106 @@ function FileUpload(props) {
     });
   }
   var canInteract = !disabled && !readOnly;
-  var renderUploadArea = function renderUploadArea2(errorProp, onValueChange, onBlurHandler) {
-    var _knobProps_borderRadius_borderWidth, _knobProps_borderRadius_borderWidth1;
-    if (!import_tamagui2.isWeb) {
-      var _knobProps_borderRadius_borderWidth2;
-      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(UploadAreaFrame, {
-        outlined: knobProps.outlined,
-        // LC-40: text-bearing chrome — surface wash, not an opacity dim
-        // (a dim here stacks with the inner Button's treatment).
-        ...(disabled ? disabledState.surfaceKnobProps : void 0),
+  var hasRows = selectedFiles.length > 0 || transfers.length > 0;
+  var renderRemoveDisc = function renderRemoveDisc2(ariaLabel, onPress) {
+    return canInteract ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
+      // Bento remove: a filled $color12 disc with the inverse
+      // ✕ — painted at nestedControl (32) with hitSlop
+      // restoring the 44 floor via `nested` (held exception);
+      // the nested icon step lands the board's 14px ✕.
+      nested: true,
+      circular: true,
+      icon: import_react.XIcon,
+      "aria-label": ariaLabel,
+      backgroundColor: import_colorRamps.formDropzoneColors.removeDisc.background.base,
+      color: import_colorRamps.formDropzoneColors.removeDisc.ink,
+      hoverStyle: {
+        backgroundColor: import_colorRamps.formDropzoneColors.removeDisc.background.hover
+      },
+      pressStyle: {
+        backgroundColor: import_colorRamps.formDropzoneColors.removeDisc.background.press
+      },
+      onPress: function onPress1(e) {
+        e.stopPropagation();
+        onPress();
+      }
+    }) : null;
+  };
+  var renderFileMeta = function renderFileMeta2(file, preview, extra) {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui2.XStack, {
+      flex: 1,
+      gap: "$2",
+      alignItems: "center",
+      children: [preview ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui2.Image, {
         borderRadius: cappedRadius,
-        // Intentional: extract borderWidth from knobProps.borderRadius fragment
-        // to use as a fallback value, not as a style spread.
-        borderWidth: (_knobProps_borderRadius_borderWidth2 = knobProps.borderRadius.borderWidth) !== null && _knobProps_borderRadius_borderWidth2 !== void 0 ? _knobProps_borderRadius_borderWidth2 : 1,
-        ...(errorProp ? {
-          borderColor: import_colorRamps.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__ */(0, import_jsx_runtime.jsxs)(import_tamagui2.YStack, {
-          ...knobProps.panelPadding,
-          minHeight: (0, import_utils.getFieldHeight)(fieldProps.size || knobProps.sizeToken, 5),
-          width: "100%",
-          alignItems: "center",
-          justifyContent: "center",
-          ...knobProps.gap,
-          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui2.Paragraph, {
-            color: import_colorRamps.formCommonColors.text,
-            textAlign: "center",
-            children: (0, import_t.t)("File upload requires a native file picker.")
-          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui2.Paragraph, {
-            color: import_colorRamps.formCommonColors.muted,
-            textAlign: "center",
-            fontSize: "$2",
-            children: "Use expo-document-picker or expo-image-picker for native support."
-          })]
+        // src (string), not source: the RN source object leaks
+        // onto the DOM <img> as source="[object Object]" on web
+        src: preview,
+        alt: file.name,
+        width: rowMediaPx,
+        height: rowMediaPx,
+        objectFit: "cover"
+      }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui2.XStack, {
+        width: rowMediaPx,
+        height: rowMediaPx,
+        justifyContent: "center",
+        alignItems: "center",
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.FileIcon, {
+          size: rowGlyphSize
         })
-      });
-    }
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui2.YStack, {
+        flex: 1,
+        gap: "$1",
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui2.Text, {
+          numberOfLines: 1,
+          ...knobProps.body,
+          children: file.name
+        }),
+        /* Bento (bento-pickers-measured.md §2): the size is a
+        SECOND LINE, BOLD, one type step down (the label
+        tier — 13/24 at medium). The 700 is the Bento
+        treatment, a deliberate eject over the weight knob. */
+        /* @__PURE__ */
+        (0, import_jsx_runtime.jsx)(import_tamagui2.Text, {
+          numberOfLines: 1,
+          color: import_colorRamps.formCommonColors.text,
+          ...knobProps.label,
+          fontWeight: "700",
+          children: formatFileSize(file.size)
+        }), extra]
+      })]
+    });
+  };
+  var renderUploadArea = function renderUploadArea2(errorProp, onValueChange, onBlurHandler) {
+    var _knobProps_borderRadius_borderWidth, _knobProps_borderRadius_borderWidth1, _knobProps_borderRadius_borderWidth2;
+    emitFieldRef.current = onValueChange;
+    var requestFiles = import_tamagui2.isWeb ? openFileDialog : function () {
+      void openNativePicker(onValueChange, onBlurHandler);
+    };
+    var zoneInteractionProps = canInteract ? import_tamagui2.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: function onDrop(e) {
+          handleDrop(e, onValueChange);
+          onBlurHandler === null || onBlurHandler === void 0 ? void 0 : onBlurHandler();
+        }
+      } : null)
+    } : {
+      role: "button",
+      onPress: requestFiles
+    } : {
+      cursor: disabled ? "not-allowed" : void 0
+    };
     return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(UploadAreaFrame, {
       // The dropzone is this field's control: it carries the FieldLayout id
       // so the rendered `<label htmlFor>` resolves (family pattern — see
@@ -396,7 +662,8 @@ function FileUpload(props) {
       "data-kb-ring": kbZoneFocus ? "true" : void 0,
       outlined: knobProps.outlined,
       // LC-40: text-bearing chrome — surface wash, not an opacity dim
-      // (a dim here stacks with the inner Button's treatment).
+      // (a dim here stacks with the inner Button's treatment). This is the
+      // ONLY treatment that paints the transparent zone ground at rest.
       ...(disabled ? disabledState.surfaceKnobProps : void 0),
       borderRadius: cappedRadius,
       // Keep width stable on drag (Polaris overlay, not a 1→2 layout shift).
@@ -406,49 +673,44 @@ function FileUpload(props) {
       } : void 0),
       elevation: knobProps.elevation,
       transition: knobProps.transition,
+      // CONTRACT (boards media-01..03): the getFieldHeight floor sits on
+      // the FRAME, so the frame border-box measures 220 — hanging it on
+      // the inner stack painted 222, a number no token expresses.
+      minHeight: (0, import_utils.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,
-      // Inset: overflow:hidden on this frame would clip an outer ring (LC-71).
-      ...(kbZoneFocus ? (0, import_theme.ensureFocusVisibleRing)({
-        outlineOffset: -2
-      }) : void 0),
+      // One family ring rule (boards media-01 dz-ring): 2px $outlineColor at
+      // offset 0. The old -2 inset was the F1 defect — an element's own
+      // outline is never clipped by its own overflow:hidden.
+      //
+      // The ring must ALSO be spread into focusStyle/focusVisibleStyle. The
+      // base props alone lose: the frame's LC-71 kill is a :focus-visible
+      // rule, the browser matches :focus-visible on a keyboard-origin focus,
+      // and a pseudo-class rule outranks the plain-class atom — the zone
+      // carried `_outlineWidth-2px` AND `_outlineWidth-0focus-visible-0px`
+      // and computed outline-width 0px. Measured on the harness, not read off
+      // the source: the pre-fix spec asserted the atom's PRESENCE, which was
+      // true while nothing painted.
+      ...(kbZoneFocus ? withZoneFocusRing() : void 0),
       hoverStyle: canInteract ? {
         borderColor: errorProp ? import_colorRamps.formCommonColors.error : import_colorRamps.formInputColors.border.hover,
-        ...(knobProps.outlined ? void 0 : {
-          backgroundColor: import_colorRamps.formInputColors.background.focus
-        })
+        // Held exception: the measured mpo $color4 hover flood stays
+        // (Bento's hover/drag states were not measurable headlessly).
+        backgroundColor: import_colorRamps.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" ? (0, import_t.t)("{{label}}: choose file", {
-            label: fieldProps.label
-          }) : (0, import_t.t)("Choose file")
-        }),
-        cursor: "pointer",
-        onClick: handleZoneClick,
-        onKeyDown: handleZoneKeyDown,
-        ...(dragDrop ? {
-          onDragEnter: handleDragEnter,
-          onDragOver: handleDragOver,
-          onDragLeave: handleDragLeave,
-          onDrop: function onDrop(e) {
-            handleDrop(e, onValueChange);
-            onBlurHandler === null || onBlurHandler === void 0 ? void 0 : 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" ? (0, import_t.t)("{{label}}: choose file", {
+          label: fieldProps.label
+        }) : (0, import_t.t)("Choose file")
+      } : null),
       children: [isDragOver && canInteract && dragDrop ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(DropOverlayFrame, {
         "data-file-upload": "overlay",
         borderRadius: cappedRadius,
@@ -459,8 +721,8 @@ function FileUpload(props) {
         ...knobProps.gap,
         ...knobProps.panelPadding,
         children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui2.XStack, {
-          width: compact ? 24 : 32,
-          height: compact ? 24 : 32,
+          width: rowMediaPx,
+          height: rowMediaPx,
           alignItems: "center",
           justifyContent: "center",
           // `color` tints the phosphor glyph via currentColor; Tamagui applies
@@ -469,7 +731,7 @@ function FileUpload(props) {
             color: import_colorRamps.formCommonColors.text
           },
           children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.UploadIcon, {
-            size: compact ? 24 : 32,
+            size: rowMediaPx,
             "aria-hidden": true
           })
         }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui2.Text, {
@@ -480,40 +742,35 @@ function FileUpload(props) {
         })]
       }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui2.YStack, {
         ...knobProps.panelPadding,
-        minHeight: (0, import_utils.getFieldHeight)(fieldProps.size || knobProps.sizeToken, 5),
+        flexGrow: 1,
         width: "100%",
         alignItems: "center",
         justifyContent: "center",
         ...knobProps.gap,
-        children: [selectedFiles.length === 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui2.XStack, {
-          width: compact ? 24 : 32,
-          height: compact ? 24 : 32,
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui2.XStack, {
           alignItems: "center",
-          justifyContent: "center",
-          // `color` tints the phosphor glyph via currentColor; Tamagui applies
-          // it on web Stacks though the RN-flavored View type omits it.
-          ...{
-            color: import_colorRamps.formCommonColors.muted
-          },
-          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.UploadIcon, {
-            size: compact ? 24 : 32,
-            "aria-hidden": true
-          })
-        }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
-          onPress: openFileDialog,
-          disabled: !canInteract,
-          size: knobProps.sizeToken,
-          tabIndex: -1,
-          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button.Text, {
-            ...knobProps.body,
-            children: buttonText
-          })
-        }), selectedFiles.length === 0 && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui2.Text, {
+          ...knobProps.gap,
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
+            onPress: requestFiles,
+            disabled: !canInteract,
+            size: knobProps.sizeToken,
+            tabIndex: -1,
+            // BENTO-DERIVED (bento-pickers-measured.md §2/§4): NO standalone
+            // glyph exists — the upload mark rides INSIDE the CTA. Held at
+            // the house 44 control with the recipe's 16px icon (Bento draws
+            // 14 on its own 36/$3 button — ruled exception).
+            icon: import_react.UploadIcon,
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button.Text, {
+              ...knobProps.body,
+              children: buttonText
+            })
+          }), actions]
+        }), selectedFiles.length === 0 && transfers.length === 0 && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui2.Text, {
           color: import_colorRamps.formCommonColors.muted,
           textAlign: "center",
           ...knobProps.body,
           children: placeholder
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)("input", {
+        }), import_tamagui2.isWeb ? /* @__PURE__ */(0, import_jsx_runtime.jsx)("input", {
           ref: fileInputRef,
           type: "file",
           accept,
@@ -527,9 +784,12 @@ function FileUpload(props) {
             display: "none"
           },
           disabled: !canInteract
-        })]
-      }), selectedFiles.length > 0 && /* @__PURE__ */(0, import_jsx_runtime.jsx)(UploadFileListFrame, {
-        children: selectedFiles.map(function (file, index) {
+        }) : null]
+      }), hasRows && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(UploadFileListFrame, {
+        "data-file-upload": "files",
+        // The hairline tracks the frame edge's knob width — one dash voice.
+        borderTopWidth: (_knobProps_borderRadius_borderWidth2 = knobProps.borderRadius.borderWidth) !== null && _knobProps_borderRadius_borderWidth2 !== void 0 ? _knobProps_borderRadius_borderWidth2 : 1,
+        children: [selectedFiles.map(function (file, index) {
           var preview = showPreview ? getFilePreview(file) : null;
           return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui2.XStack, {
             width: "100%",
@@ -537,54 +797,82 @@ function FileUpload(props) {
             alignItems: "center",
             justifyContent: "space-between",
             ...knobProps.panelPadding,
-            children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui2.XStack, {
-              flex: 1,
-              gap: "$2",
-              alignItems: "center",
-              children: [preview ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui2.Image, {
-                borderRadius: cappedRadius,
-                // src (string), not source: the RN source object leaks
-                // onto the DOM <img> as source="[object Object]" on web
-                src: preview,
-                alt: file.name,
-                width: compact ? 24 : 32,
-                height: compact ? 24 : 32,
-                objectFit: "cover"
-              }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui2.XStack, {
-                width: compact ? 24 : 32,
-                height: compact ? 24 : 32,
-                justifyContent: "center",
-                alignItems: "center",
-                children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.FileIcon, {
-                  size: compact ? 14 : 16
+            children: [renderFileMeta(file, preview), renderRemoveDisc((0, import_t.t)("Remove {{name}}", {
+              name: file.name
+            }), function () {
+              return handleFileRemove(file, onValueChange);
+            })]
+          }, `${file.name}-${index}`);
+        }), transfers.map(function (item) {
+          var _failed_cta;
+          var preview = showPreview ? getFilePreview(item.file) : null;
+          var isUploading = item.status === "uploading";
+          var failed = item.status === "failed" ? item.error : void 0;
+          return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui2.XStack, {
+            "data-transfer-status": item.status,
+            width: "100%",
+            ...knobProps.gap,
+            alignItems: "center",
+            justifyContent: "space-between",
+            ...knobProps.panelPadding,
+            children: [renderFileMeta(item.file, preview, /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+              children: [isUploading ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui2.YStack, {
+                "data-file-upload": "progress",
+                role: "progressbar",
+                "aria-label": (0, import_t.t)("Uploading {{name}}", {
+                  name: item.file.name
+                }),
+                "aria-valuemin": 0,
+                "aria-valuemax": 100,
+                "aria-valuenow": item.progress,
+                height: 11,
+                width: "100%",
+                borderRadius: 1e3,
+                backgroundColor: import_colorRamps.formDropzoneColors.progress.track,
+                overflow: "hidden",
+                children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui2.YStack, {
+                  height: "100%",
+                  width: `${item.progress}%`,
+                  backgroundColor: import_colorRamps.formDropzoneColors.progress.fill
                 })
-              }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui2.YStack, {
-                flex: 1,
+              }) : null, failed ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui2.YStack, {
                 gap: "$1",
                 children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui2.Text, {
-                  numberOfLines: 1,
-                  ...knobProps.body,
-                  children: file.name
+                  color: import_colorRamps.formCommonColors.error,
+                  ...knobProps.label,
+                  children: failed.problem
                 }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui2.Text, {
-                  numberOfLines: 1,
-                  color: import_colorRamps.formCommonColors.text,
-                  ...knobProps.body,
-                  children: formatFileSize(file.size)
+                  color: import_colorRamps.formCommonColors.muted,
+                  ...knobProps.label,
+                  children: failed.action
                 })]
+              }) : null]
+            })), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui2.XStack, {
+              ...knobProps.gap,
+              alignItems: "center",
+              children: [canInteract && failed ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
+                outlined: true,
+                size: "$2",
+                "aria-label": (0, import_t.t)("Retry {{name}}", {
+                  name: item.file.name
+                }),
+                onPress: function onPress(e) {
+                  e.stopPropagation();
+                  handleRetryTransfer(item.id);
+                },
+                children: (_failed_cta = failed.cta) !== null && _failed_cta !== void 0 ? _failed_cta : (0, import_t.t)("Retry")
+              }) : null, isUploading ? renderRemoveDisc((0, import_t.t)("Cancel {{name}}", {
+                name: item.file.name
+              }), function () {
+                return handleCancelTransfer(item.id);
+              }) : renderRemoveDisc((0, import_t.t)("Remove {{name}}", {
+                name: item.file.name
+              }), function () {
+                return handleRemoveTransfer(item.id);
               })]
-            }), canInteract && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
-              circular: true,
-              size: knobProps.sizeToken,
-              onPress: function onPress(e) {
-                e.stopPropagation();
-                handleFileRemove(file, onValueChange);
-              },
-              children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button.Icon, {
-                children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.XIcon, {})
-              })
             })]
-          }, `${file.name}-${index}`);
-        })
+          }, item.id);
+        })]
       })]
     });
   };