@multiplatform.one/forms 6.7.0 → 7.1.0

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

@@ -33,15 +33,30 @@ var import_Button = require("../../Button/index.cjs");
 var import_fieldLayout = require("../../fieldLayout.cjs");
 var import_Skeleton = require("../../Skeleton/index.cjs");
 var import_utils = require("../../shared/utils.cjs");
+var import_theme = require("@multiplatform.one/theme");
 var import_colorRamps = require("../../shared/colorRamps.cjs");
 var import_t = require("../../shared/t.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
 const 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,
+  // 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).
+  outlineWidth: 0,
+  outlineStyle: "none",
+  focusStyle: {
+    outlineWidth: 0,
+    outlineStyle: "none"
+  },
+  focusVisibleStyle: {
+    outlineWidth: 0,
+    outlineStyle: "none"
+  },
   variants: {
     outlined: {
       true: {
@@ -50,6 +65,20 @@ const UploadAreaFrame = (0, import_tamagui2.styled)(import_tamagui2.YStack, {
     }
   }
 });
+const DropOverlayFrame = (0, import_tamagui2.styled)(import_tamagui2.YStack, {
+  position: "absolute",
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0,
+  alignItems: "center",
+  justifyContent: "center",
+  pointerEvents: "none",
+  zIndex: 2,
+  backgroundColor: import_colorRamps.formInputColors.background.focus,
+  borderStyle: "solid",
+  borderColor: import_colorRamps.formInputColors.border.focus
+});
 const UploadFileListFrame = (0, import_tamagui2.styled)(import_tamagui2.YStack, {
   width: "100%",
   borderTopWidth: 1,
@@ -64,7 +93,7 @@ function FileUpload(props) {
     multiple = false,
     dragDrop = true,
     showPreview = true,
-    placeholder = (0, import_t.t)("Drag a file into this area"),
+    placeholder = (0, import_t.t)("or drag and drop"),
     buttonText = (0, import_t.t)("Choose File"),
     onFileSelect,
     onFileRemove,
@@ -91,6 +120,8 @@ function FileUpload(props) {
     id: idProp,
     compact
   });
+  if (import_tamagui2.isWeb) (0, import_theme.ensureKeyboardModalityTracking)();
+  const [kbZoneFocus, setKbZoneFocus] = (0, import_react2.useState)(false);
   const emitChange = (0, import_react2.useCallback)(nextValue => {
     onChangeProp?.(nextValue);
     onValueChangeProp?.(nextValue);
@@ -101,12 +132,27 @@ function FileUpload(props) {
   const [isDragOver, setIsDragOver] = (0, import_react2.useState)(false);
   const [validationError, setValidationError] = (0, import_react2.useState)();
   const fileInputRef = (0, import_react2.useRef)(null);
+  const zoneCleanupRef = (0, import_react2.useRef)(null);
+  const lastZoneInputWasKeyboardRef = (0, import_react2.useRef)(false);
   const previewUrlsRef = (0, import_react2.useRef)(/* @__PURE__ */new Map());
   (0, import_react2.useEffect)(() => {
     if (!import_tamagui2.isWeb) return;
+    (0, import_theme.ensureKeyboardModalityTracking)();
+    const onKey = () => {
+      lastZoneInputWasKeyboardRef.current = true;
+    };
+    const onPointer = () => {
+      lastZoneInputWasKeyboardRef.current = false;
+    };
+    document.addEventListener("keydown", onKey, true);
+    document.addEventListener("pointerdown", onPointer, true);
     return () => {
+      document.removeEventListener("keydown", onKey, true);
+      document.removeEventListener("pointerdown", onPointer, true);
       previewUrlsRef.current.forEach(url => URL.revokeObjectURL(url));
       previewUrlsRef.current.clear();
+      zoneCleanupRef.current?.();
+      zoneCleanupRef.current = null;
     };
   }, []);
   const formatFileSize = (0, import_react2.useCallback)(bytes => {
@@ -235,6 +281,26 @@ function FileUpload(props) {
       openFileDialog();
     }
   }, [openFileDialog]);
+  const paintZoneRing = (0, import_react2.useCallback)(() => {
+    if (lastZoneInputWasKeyboardRef.current || (0, import_theme.wasKeyboardFocus)()) setKbZoneFocus(true);
+  }, []);
+  const bindZoneNode = (0, import_react2.useCallback)(node => {
+    zoneCleanupRef.current?.();
+    zoneCleanupRef.current = null;
+    if (!node || !import_tamagui2.isWeb) return;
+    const onFocus = () => paintZoneRing();
+    const onBlur = () => setKbZoneFocus(false);
+    node.addEventListener("focus", onFocus);
+    node.addEventListener("blur", onBlur);
+    zoneCleanupRef.current = () => {
+      node.removeEventListener("focus", onFocus);
+      node.removeEventListener("blur", onBlur);
+    };
+  }, [paintZoneRing]);
+  const handleZoneFocus = paintZoneRing;
+  const handleZoneBlur = (0, import_react2.useCallback)(() => {
+    setKbZoneFocus(false);
+  }, []);
   const getFilePreview = (0, import_react2.useCallback)(file => {
     if (!import_tamagui2.isWeb) return null;
     if (file.type.startsWith("image/")) {
@@ -298,25 +364,38 @@ function FileUpload(props) {
     }
     return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(UploadAreaFrame, {
       id,
+      ref: bindZoneNode,
+      "data-file-upload": "dropzone",
+      "data-drag-over": isDragOver && canInteract && dragDrop ? "true" : void 0,
+      "data-kb-ring": kbZoneFocus ? "true" : void 0,
       outlined: knobProps.outlined,
       ...(disabled ? disabledState.surfaceKnobProps : void 0),
       borderRadius: cappedRadius,
-      borderWidth: isDragOver && canInteract ? 2 : knobProps.borderRadius.borderWidth ?? 1,
+      borderWidth: knobProps.borderRadius.borderWidth ?? 1,
       ...(errorProp ? {
         borderColor: import_colorRamps.formCommonColors.error
       } : void 0),
-      ...(isDragOver && canInteract ? {
-        borderColor: import_colorRamps.formCommonColors.text
-      } : void 0),
       elevation: knobProps.elevation,
       transition: knobProps.transition,
       "aria-required": fieldProps.required || void 0,
       "aria-invalid": !!errorProp || void 0,
       "aria-readonly": readOnly || void 0,
+      "aria-disabled": disabled || void 0,
+      ...(kbZoneFocus ? (0, import_theme.ensureFocusVisibleRing)({
+        outlineOffset: -2
+      }) : 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
+        })
+      } : 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.
@@ -327,16 +406,8 @@ function FileUpload(props) {
         }),
         cursor: "pointer",
         onClick: handleZoneClick,
-        onKeyDown: handleZoneKeyDown
-      } : {}),
-      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,
-        ...(canInteract ? {
+        onKeyDown: handleZoneKeyDown,
+        ...(dragDrop ? {
           onDragEnter: handleDragEnter,
           onDragOver: handleDragOver,
           onDragLeave: handleDragLeave,
@@ -344,17 +415,65 @@ function FileUpload(props) {
             handleDrop(e, onValueChange);
             onBlurHandler?.();
           }
-        } : {}),
-        children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_Button.Button, {
+        } : null)
+      } : {
+        cursor: disabled ? "not-allowed" : void 0
+      }),
+      children: [isDragOver && canInteract && dragDrop ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(DropOverlayFrame, {
+        "data-file-upload": "overlay",
+        borderRadius: cappedRadius,
+        borderWidth: knobProps.borderRadius.borderWidth ?? 1,
+        ...(errorProp ? {
+          borderColor: import_colorRamps.formCommonColors.error
+        } : void 0),
+        ...knobProps.gap,
+        ...knobProps.panelPadding,
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui2.XStack, {
+          width: compact ? 24 : 32,
+          height: compact ? 24 : 32,
+          alignItems: "center",
+          justifyContent: "center",
+          ...{
+            color: import_colorRamps.formCommonColors.text
+          },
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.UploadIcon, {
+            size: compact ? 24 : 32,
+            "aria-hidden": true
+          })
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui2.Text, {
+          color: import_colorRamps.formCommonColors.text,
+          textAlign: "center",
+          ...knobProps.body,
+          children: multiple ? (0, import_t.t)("Drop files to upload") : (0, import_t.t)("Drop a file to upload")
+        })]
+      }) : null, /* @__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: [selectedFiles.length === 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui2.XStack, {
+          width: compact ? 24 : 32,
+          height: compact ? 24 : 32,
+          alignItems: "center",
+          justifyContent: "center",
+          ...{
+            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,
-          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button.Icon, {
-            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.UploadIcon, {})
-          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button.Text, {
+          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, {
           color: import_colorRamps.formCommonColors.muted,
           textAlign: "center",
@@ -365,6 +484,7 @@ function FileUpload(props) {
           type: "file",
           accept,
           multiple,
+          tabIndex: -1,
           onChange: e => {
             handleFileSelect(e.target.files, onValueChange, e.target.files);
             onBlurHandler?.();
@@ -391,16 +511,16 @@ function FileUpload(props) {
                 borderRadius: cappedRadius,
                 src: preview,
                 alt: file.name,
-                width: 32,
-                height: 32,
+                width: compact ? 24 : 32,
+                height: compact ? 24 : 32,
                 objectFit: "cover"
               }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui2.XStack, {
-                width: 20,
-                height: 20,
+                width: compact ? 24 : 32,
+                height: compact ? 24 : 32,
                 justifyContent: "center",
                 alignItems: "center",
                 children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.FileIcon, {
-                  size: 16
+                  size: compact ? 14 : 16
                 })
               }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui2.YStack, {
                 flex: 1,
@@ -419,7 +539,6 @@ function FileUpload(props) {
             }), canInteract && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
               circular: true,
               size: knobProps.sizeToken,
-              tabIndex: -1,
               onPress: e => {
                 e.stopPropagation();
                 handleFileRemove(file, onValueChange);

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

@@ -36,14 +36,29 @@ var import_Button = require("../../Button/index.native.js");
 var import_fieldLayout = require("../../fieldLayout.native.js");
 var import_Skeleton = require("../../Skeleton/index.native.js");
 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 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,
+  // 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).
+  outlineWidth: 0,
+  outlineStyle: "none",
+  focusStyle: {
+    outlineWidth: 0,
+    outlineStyle: "none"
+  },
+  focusVisibleStyle: {
+    outlineWidth: 0,
+    outlineStyle: "none"
+  },
   variants: {
     outlined: {
       true: {
@@ -52,6 +67,20 @@ var UploadAreaFrame = (0, import_tamagui2.styled)(import_tamagui2.YStack, {
     }
   }
 });
+var DropOverlayFrame = (0, import_tamagui2.styled)(import_tamagui2.YStack, {
+  position: "absolute",
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0,
+  alignItems: "center",
+  justifyContent: "center",
+  pointerEvents: "none",
+  zIndex: 2,
+  backgroundColor: import_colorRamps.formInputColors.background.focus,
+  borderStyle: "solid",
+  borderColor: import_colorRamps.formInputColors.border.focus
+});
 var UploadFileListFrame = (0, import_tamagui2.styled)(import_tamagui2.YStack, {
   width: "100%",
   borderTopWidth: 1,
@@ -66,7 +95,7 @@ function FileUpload(props) {
     multiple = false,
     dragDrop = true,
     showPreview = true,
-    placeholder = (0, import_t.t)("Drag a file into this area"),
+    placeholder = (0, import_t.t)("or drag and drop"),
     buttonText = (0, import_t.t)("Choose File"),
     onFileSelect,
     onFileRemove,
@@ -93,6 +122,8 @@ function FileUpload(props) {
     id: idProp,
     compact
   });
+  if (import_tamagui2.isWeb) (0, import_theme.ensureKeyboardModalityTracking)();
+  var [kbZoneFocus, setKbZoneFocus] = (0, import_react2.useState)(false);
   var emitChange = (0, import_react2.useCallback)(function (nextValue) {
     onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(nextValue);
     onValueChangeProp === null || onValueChangeProp === void 0 ? void 0 : onValueChangeProp(nextValue);
@@ -103,14 +134,30 @@ function FileUpload(props) {
   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());
   (0, import_react2.useEffect)(function () {
     if (!import_tamagui2.isWeb) return;
+    (0, import_theme.ensureKeyboardModalityTracking)();
+    var onKey = function onKey2() {
+      lastZoneInputWasKeyboardRef.current = true;
+    };
+    var onPointer = function onPointer2() {
+      lastZoneInputWasKeyboardRef.current = false;
+    };
+    document.addEventListener("keydown", onKey, true);
+    document.addEventListener("pointerdown", onPointer, true);
     return function () {
+      var _zoneCleanupRef_current;
+      document.removeEventListener("keydown", onKey, true);
+      document.removeEventListener("pointerdown", onPointer, true);
       previewUrlsRef.current.forEach(function (url) {
         return URL.revokeObjectURL(url);
       });
       previewUrlsRef.current.clear();
+      (_zoneCleanupRef_current = zoneCleanupRef.current) === null || _zoneCleanupRef_current === void 0 ? void 0 : _zoneCleanupRef_current.call(zoneCleanupRef);
+      zoneCleanupRef.current = null;
     };
   }, []);
   var formatFileSize = (0, import_react2.useCallback)(function (bytes) {
@@ -246,6 +293,31 @@ function FileUpload(props) {
       openFileDialog();
     }
   }, [openFileDialog]);
+  var paintZoneRing = (0, import_react2.useCallback)(function () {
+    if (lastZoneInputWasKeyboardRef.current || (0, import_theme.wasKeyboardFocus)()) setKbZoneFocus(true);
+  }, []);
+  var bindZoneNode = (0, import_react2.useCallback)(function (node) {
+    var _zoneCleanupRef_current;
+    (_zoneCleanupRef_current = zoneCleanupRef.current) === null || _zoneCleanupRef_current === void 0 ? void 0 : _zoneCleanupRef_current.call(zoneCleanupRef);
+    zoneCleanupRef.current = null;
+    if (!node || !import_tamagui2.isWeb) return;
+    var onFocus = function onFocus2() {
+      return paintZoneRing();
+    };
+    var onBlur = function onBlur2() {
+      return setKbZoneFocus(false);
+    };
+    node.addEventListener("focus", onFocus);
+    node.addEventListener("blur", onBlur);
+    zoneCleanupRef.current = function () {
+      node.removeEventListener("focus", onFocus);
+      node.removeEventListener("blur", onBlur);
+    };
+  }, [paintZoneRing]);
+  var handleZoneFocus = paintZoneRing;
+  var handleZoneBlur = (0, import_react2.useCallback)(function () {
+    setKbZoneFocus(false);
+  }, []);
   var getFilePreview = (0, import_react2.useCallback)(function (file) {
     if (!import_tamagui2.isWeb) return null;
     if (file.type.startsWith("image/")) {
@@ -273,9 +345,9 @@ function FileUpload(props) {
   }
   var canInteract = !disabled && !readOnly;
   var renderUploadArea = function renderUploadArea2(errorProp, onValueChange, onBlurHandler) {
-    var _knobProps_borderRadius_borderWidth;
+    var _knobProps_borderRadius_borderWidth, _knobProps_borderRadius_borderWidth1;
     if (!import_tamagui2.isWeb) {
-      var _knobProps_borderRadius_borderWidth1;
+      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
@@ -284,7 +356,7 @@ function FileUpload(props) {
         borderRadius: cappedRadius,
         // Intentional: extract borderWidth from knobProps.borderRadius fragment
         // to use as a fallback value, not as a style spread.
-        borderWidth: (_knobProps_borderRadius_borderWidth1 = knobProps.borderRadius.borderWidth) !== null && _knobProps_borderRadius_borderWidth1 !== void 0 ? _knobProps_borderRadius_borderWidth1 : 1,
+        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),
@@ -318,29 +390,42 @@ function FileUpload(props) {
       // so the rendered `<label htmlFor>` resolves (family pattern — see
       // Barcode / ColorPicker for other non-native-input controls).
       id,
+      ref: bindZoneNode,
+      "data-file-upload": "dropzone",
+      "data-drag-over": isDragOver && canInteract && dragDrop ? "true" : void 0,
+      "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).
       ...(disabled ? disabledState.surfaceKnobProps : void 0),
       borderRadius: cappedRadius,
-      // Intentional: extract borderWidth from knobProps.borderRadius fragment
-      // to conditionally override with drag-over state (2px) vs knob value.
-      borderWidth: isDragOver && canInteract ? 2 : (_knobProps_borderRadius_borderWidth = knobProps.borderRadius.borderWidth) !== null && _knobProps_borderRadius_borderWidth !== void 0 ? _knobProps_borderRadius_borderWidth : 1,
+      // Keep width stable on drag (Polaris overlay, not a 1→2 layout shift).
+      borderWidth: (_knobProps_borderRadius_borderWidth = knobProps.borderRadius.borderWidth) !== null && _knobProps_borderRadius_borderWidth !== void 0 ? _knobProps_borderRadius_borderWidth : 1,
       ...(errorProp ? {
         borderColor: import_colorRamps.formCommonColors.error
       } : void 0),
-      ...(isDragOver && canInteract ? {
-        borderColor: import_colorRamps.formCommonColors.text
-      } : void 0),
       elevation: knobProps.elevation,
       transition: knobProps.transition,
       "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),
+      hoverStyle: canInteract ? {
+        borderColor: errorProp ? import_colorRamps.formCommonColors.error : import_colorRamps.formInputColors.border.hover,
+        ...(knobProps.outlined ? void 0 : {
+          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.
@@ -351,16 +436,8 @@ function FileUpload(props) {
         }),
         cursor: "pointer",
         onClick: handleZoneClick,
-        onKeyDown: handleZoneKeyDown
-      } : {}),
-      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,
-        ...(canInteract ? {
+        onKeyDown: handleZoneKeyDown,
+        ...(dragDrop ? {
           onDragEnter: handleDragEnter,
           onDragOver: handleDragOver,
           onDragLeave: handleDragLeave,
@@ -368,17 +445,69 @@ function FileUpload(props) {
             handleDrop(e, onValueChange);
             onBlurHandler === null || onBlurHandler === void 0 ? void 0 : onBlurHandler();
           }
-        } : {}),
-        children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_Button.Button, {
+        } : null)
+      } : {
+        cursor: disabled ? "not-allowed" : void 0
+      }),
+      children: [isDragOver && canInteract && dragDrop ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(DropOverlayFrame, {
+        "data-file-upload": "overlay",
+        borderRadius: cappedRadius,
+        borderWidth: (_knobProps_borderRadius_borderWidth1 = knobProps.borderRadius.borderWidth) !== null && _knobProps_borderRadius_borderWidth1 !== void 0 ? _knobProps_borderRadius_borderWidth1 : 1,
+        ...(errorProp ? {
+          borderColor: import_colorRamps.formCommonColors.error
+        } : void 0),
+        ...knobProps.gap,
+        ...knobProps.panelPadding,
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui2.XStack, {
+          width: compact ? 24 : 32,
+          height: compact ? 24 : 32,
+          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.text
+          },
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.UploadIcon, {
+            size: compact ? 24 : 32,
+            "aria-hidden": true
+          })
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui2.Text, {
+          color: import_colorRamps.formCommonColors.text,
+          textAlign: "center",
+          ...knobProps.body,
+          children: multiple ? (0, import_t.t)("Drop files to upload") : (0, import_t.t)("Drop a file to upload")
+        })]
+      }) : null, /* @__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: [selectedFiles.length === 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui2.XStack, {
+          width: compact ? 24 : 32,
+          height: compact ? 24 : 32,
+          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,
-          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button.Icon, {
-            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.UploadIcon, {})
-          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button.Text, {
+          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, {
           color: import_colorRamps.formCommonColors.muted,
           textAlign: "center",
@@ -389,6 +518,7 @@ function FileUpload(props) {
           type: "file",
           accept,
           multiple,
+          tabIndex: -1,
           onChange: function onChange(e) {
             handleFileSelect(e.target.files, onValueChange, e.target.files);
             onBlurHandler === null || onBlurHandler === void 0 ? void 0 : onBlurHandler();
@@ -417,16 +547,16 @@ function FileUpload(props) {
                 // onto the DOM <img> as source="[object Object]" on web
                 src: preview,
                 alt: file.name,
-                width: 32,
-                height: 32,
+                width: compact ? 24 : 32,
+                height: compact ? 24 : 32,
                 objectFit: "cover"
               }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui2.XStack, {
-                width: 20,
-                height: 20,
+                width: compact ? 24 : 32,
+                height: compact ? 24 : 32,
                 justifyContent: "center",
                 alignItems: "center",
                 children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.FileIcon, {
-                  size: 16
+                  size: compact ? 14 : 16
                 })
               }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui2.YStack, {
                 flex: 1,
@@ -445,7 +575,6 @@ function FileUpload(props) {
             }), canInteract && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
               circular: true,
               size: knobProps.sizeToken,
-              tabIndex: -1,
               onPress: function onPress(e) {
                 e.stopPropagation();
                 handleFileRemove(file, onValueChange);