@multiplatform.one/components 6.6.0 → 7.0.0

package/dist/jsx/layouts/attachments.native.js

@@ -43,11 +43,13 @@ var import_react = require("@phosphor-icons/react");
 var import_platform = require("@multiplatform.one/platform");
 var import_theme = require("@multiplatform.one/theme");
 var import_react2 = __toESM(require("react"));
-var import_react_i18next = require("react-i18next");
+var import_i18n = require("../shared/i18n.native.js");
 var import_tamagui = require("tamagui");
+var import_Button = require("../Button.native.js");
 var import_surfaces = require("../surfaces.native.js");
 var import_componentColors = require("../componentColors.native.js");
 var import_Skeleton = require("../Skeleton/index.native.js");
+var import_useReturnFocusOnClose = require("../shared/useReturnFocusOnClose.native.js");
 var import_AsyncBoundary = require("./AsyncBoundary.native.js");
 function formatFileSize(bytes) {
   if (bytes === 0) return "0 B";
@@ -65,14 +67,64 @@ function isImageFile(attachment) {
   var ext = url.substring(url.lastIndexOf(".")).toLowerCase();
   return imageExtensions.includes(ext);
 }
-function getFileIcon(attachment) {
-  if (isImageFile(attachment)) {
-    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.ImageIcon, {
-      size: 20
-    });
+function getFileExtension(attachment) {
+  var _attachment_fileType;
+  var name = attachment.fileName || "";
+  var dot = name.lastIndexOf(".");
+  if (dot > 0 && dot < name.length - 1) return name.slice(dot + 1).toUpperCase();
+  var mime = (_attachment_fileType = attachment.fileType) === null || _attachment_fileType === void 0 ? void 0 : _attachment_fileType.split("/")[1];
+  return mime ? mime.toUpperCase() : "";
+}
+function getFileKind(attachment) {
+  if (isImageFile(attachment)) return "image";
+  var ext = getFileExtension(attachment).toLowerCase();
+  var mime = (attachment.fileType || "").toLowerCase();
+  if (ext === "pdf" || mime.includes("pdf")) return "pdf";
+  if (["doc", "docx", "odt", "rtf", "txt", "md"].includes(ext) || mime.includes("word") || mime.includes("text")) {
+    return "doc";
+  }
+  if (["xls", "xlsx", "csv", "ods"].includes(ext) || mime.includes("spreadsheet") || mime.includes("excel")) {
+    return "sheet";
+  }
+  if (["zip", "rar", "7z", "tar", "gz"].includes(ext) || mime.includes("zip")) return "archive";
+  return "file";
+}
+var FILE_KIND_TONE = {
+  image: {
+    bg: "$color3",
+    fg: "$color11"
+  },
+  pdf: {
+    bg: "$red3",
+    fg: "$red11"
+  },
+  doc: {
+    bg: "$blue3",
+    fg: "$blue11"
+  },
+  sheet: {
+    bg: "$green3",
+    fg: "$green11"
+  },
+  archive: {
+    bg: "$orange3",
+    fg: "$orange11"
+  },
+  file: {
+    bg: "$color3",
+    fg: "$color11"
   }
+};
+function getFileIcon(attachment, size) {
+  var kind = getFileKind(attachment);
+  if (kind === "image") return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.ImageIcon, {
+    size
+  });
+  if (kind === "pdf" || kind === "doc") return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.FileTextIcon, {
+    size
+  });
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.FileIcon, {
-    size: 20
+    size
   });
 }
 function AttachmentThumbnail(param) {
@@ -102,10 +154,10 @@ function AttachmentThumbnail(param) {
 function AttachmentsSkeleton(param) {
   var {
     thumbSize,
-    loadingLabel
+    loadingLabel,
+    rowPad
   } = param;
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
-    gap: "$1",
     width: "100%",
     "data-async-skeleton": "attachments",
     "aria-busy": true,
@@ -113,29 +165,216 @@ function AttachmentsSkeleton(param) {
     children: Array.from({
       length: 3
     }).map(function (_, i) {
-      return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
-        gap: "$3",
-        alignItems: "center",
-        paddingVertical: "$2",
-        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Skeleton.Skeleton, {
-          variant: "rounded",
-          width: thumbSize,
-          height: thumbSize
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-          flex: 1,
-          gap: "$1",
+      return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+        children: [i > 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Separator, {
+          ...import_theme.hairline.line
+        }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+          gap: "$3",
+          alignItems: "center",
+          paddingVertical: "$2",
+          paddingHorizontal: rowPad,
+          minHeight: 44,
           children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Skeleton.Skeleton, {
-            width: "55%",
-            height: 14
-          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Skeleton.Skeleton, {
-            width: "25%",
-            height: 12
+            variant: "rounded",
+            width: thumbSize,
+            height: thumbSize
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+            flex: 1,
+            gap: "$1",
+            children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Skeleton.Skeleton, {
+              width: "55%",
+              height: 14
+            }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Skeleton.Skeleton, {
+              width: "25%",
+              height: 12
+            })]
           })]
         })]
       }, i);
     })
   });
 }
+function AttachmentRow(param) {
+  var {
+    attachment,
+    index,
+    count,
+    compact,
+    disabled,
+    thumbSize,
+    rowPad,
+    enablePreview,
+    enableDownload,
+    enableRemove,
+    previewLabel,
+    downloadLabel,
+    removeLabel,
+    onAttachmentClick,
+    onPreview,
+    onDownload,
+    onRemove,
+    renderAttachment
+  } = param;
+  var {
+    knobProps,
+    control
+  } = (0, import_theme.useResolvedKnobs)({
+    compact
+  });
+  var [kbFocus, setKbFocus] = (0, import_react2.useState)(false);
+  var isImage = isImageFile(attachment);
+  var kind = getFileKind(attachment);
+  var tone = FILE_KIND_TONE[kind];
+  var ext = getFileExtension(attachment);
+  var iconSize = compact ? 14 : 16;
+  var position = (0, import_theme.getGroupPosition)(index, count);
+  var corners = (0, import_theme.stackRadiusProps)(position, knobProps.borderRadius.borderRadius);
+  var actions = {
+    onPreview: function onPreview1() {
+      return onPreview(attachment);
+    },
+    onDownload: function onDownload1() {
+      return onDownload(attachment);
+    },
+    onRemove: function onRemove1() {
+      return onRemove === null || onRemove === void 0 ? void 0 : onRemove(attachment);
+    }
+  };
+  var mediaSlot = /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+    width: thumbSize,
+    height: thumbSize,
+    flexShrink: 0,
+    overflow: "hidden",
+    backgroundColor: tone.bg,
+    borderRadius: knobProps.borderRadius.borderRadius,
+    alignItems: "center",
+    justifyContent: "center",
+    // `color` sets the icon's inherited color; Tamagui forwards it at runtime
+    // but the RN-flavored View prop type omits it (house Record cast).
+    ...{
+      color: tone.fg
+    },
+    children: isImage ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(AttachmentThumbnail, {
+      attachment,
+      size: thumbSize,
+      fallback: getFileIcon(attachment, iconSize)
+    }) : getFileIcon(attachment, iconSize)
+  });
+  var actionButtons = /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+    gap: "$1",
+    alignItems: "center",
+    children: [enablePreview && isImage && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
+      size: "$2",
+      chromeless: true,
+      nested: true,
+      icon: import_react.EyeIcon,
+      "aria-label": previewLabel,
+      onPress: function onPress(e) {
+        e.stopPropagation();
+        actions.onPreview();
+      }
+    }), enableDownload && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
+      size: "$2",
+      chromeless: true,
+      nested: true,
+      icon: import_react.DownloadSimpleIcon,
+      "aria-label": downloadLabel,
+      onPress: function onPress(e) {
+        e.stopPropagation();
+        actions.onDownload();
+      }
+    }), enableRemove && !disabled && onRemove && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
+      size: "$2",
+      chromeless: true,
+      nested: true,
+      icon: import_react.TrashIcon,
+      "aria-label": removeLabel,
+      onPress: function onPress(e) {
+        e.stopPropagation();
+        actions.onRemove();
+      }
+    })]
+  });
+  var defaultContent = /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+    children: [index > 0 ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Separator, {
+      ...import_theme.hairline.line
+    }) : null, /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+      role: "listitem",
+      "data-stack-position": position,
+      alignItems: "center",
+      paddingVertical: "$2",
+      paddingHorizontal: rowPad,
+      minHeight: 44,
+      overflow: "hidden",
+      cursor: "pointer",
+      ...corners,
+      transition: knobProps.transition,
+      hoverStyle: {
+        backgroundColor: import_componentColors.componentColors.interactive.background,
+        ...control.hoverKnobProps,
+        ...corners
+      },
+      pressStyle: {
+        backgroundColor: import_componentColors.componentColors.interactive.hover,
+        ...control.pressKnobProps,
+        ...corners
+      },
+      ...(kbFocus ? (0, import_theme.ensureFocusVisibleRing)({
+        outlineOffset: -2
+      }) : {
+        outlineWidth: 0
+      }),
+      onPress: function onPress() {
+        onAttachmentClick === null || onAttachmentClick === void 0 ? void 0 : onAttachmentClick(attachment);
+        if (enablePreview) onPreview(attachment);
+      },
+      onFocus: function onFocus() {
+        if ((0, import_theme.wasKeyboardFocus)()) setKbFocus(true);
+      },
+      onBlur: function onBlur() {
+        return setKbFocus(false);
+      },
+      children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+        flex: 1,
+        alignItems: "center",
+        minWidth: 0,
+        gap: "$3",
+        children: [mediaSlot, /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+          flex: 1,
+          minWidth: 0,
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+            ...knobProps.body,
+            fontSize: compact ? "$3" : "$4",
+            numberOfLines: 1,
+            children: attachment.fileName
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+            gap: "$2",
+            alignItems: "center",
+            children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+              fontSize: "$2",
+              color: import_componentColors.componentColors.text.muted,
+              children: attachment.formattedSize || formatFileSize(attachment.fileSize)
+            }), ext ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
+              children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+                fontSize: "$2",
+                color: import_componentColors.componentColors.text.subtle,
+                children: "\xB7"
+              }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+                fontSize: "$2",
+                color: import_componentColors.componentColors.text.subtle,
+                children: ext
+              })]
+            }) : null]
+          })]
+        }), actionButtons]
+      })
+    })]
+  });
+  if (renderAttachment) {
+    return renderAttachment(attachment, defaultContent, actions);
+  }
+  return defaultContent;
+}
 function Attachments(param) {
   var {
     items,
@@ -163,13 +402,18 @@ function Attachments(param) {
   } = param;
   var {
     t
-  } = (0, import_react_i18next.useTranslation)();
+  } = (0, import_i18n.useTranslation)();
   var {
     knobProps
-  } = (0, import_theme.useResolvedKnobs)();
+  } = (0, import_theme.useResolvedKnobs)({
+    compact
+  });
   var fileInputRef = (0, import_react2.useRef)(null);
   var [previewFile, setPreviewFile] = (0, import_react2.useState)(null);
   var [uploadError, setUploadError] = (0, import_react2.useState)(null);
+  var [dragOver, setDragOver] = (0, import_react2.useState)(false);
+  (0, import_useReturnFocusOnClose.useReturnFocusOnClose)(!!previewFile);
+  if (import_tamagui.isWeb) (0, import_theme.ensureKeyboardModalityTracking)();
   var {
     upload: uploadLabel = "Upload",
     noAttachments: noAttachmentsLabel = "No attachments",
@@ -178,7 +422,8 @@ function Attachments(param) {
     remove: removeLabel = "Remove",
     close: closeLabel = "Close",
     fileTooLarge: fileTooLargeLabel = "File too large",
-    loadFailed: loadFailedLabel = t("Couldn't load attachments")
+    loadFailed: loadFailedLabel = t("Couldn't load attachments"),
+    previewUnavailable: previewUnavailableLabel = t("Preview not available for this file type.")
   } = labels;
   var hasError = (0, import_AsyncBoundary.resolveAsyncStatus)({
     error
@@ -189,20 +434,23 @@ function Attachments(param) {
     if (maxAttachments > 0 && items.length >= maxAttachments) return false;
     return true;
   }, [disabled, enableAdd, onAdd, maxAttachments, items.length, hasError]);
-  var handleFileSelect = (0, import_react2.useCallback)(function (event) {
-    var _event_target_files;
-    var file = (_event_target_files = event.target.files) === null || _event_target_files === void 0 ? void 0 : _event_target_files[0];
-    if (!file) return;
+  var acceptFile = (0, import_react2.useCallback)(function (file) {
     if (maxFileSize && file.size > maxFileSize) {
       setUploadError(`${fileTooLargeLabel} (${formatFileSize(maxFileSize)})`);
       return;
     }
     setUploadError(null);
     onAdd === null || onAdd === void 0 ? void 0 : onAdd(file);
+  }, [maxFileSize, onAdd, fileTooLargeLabel]);
+  var handleFileSelect = (0, import_react2.useCallback)(function (event) {
+    var _event_target_files;
+    var file = (_event_target_files = event.target.files) === null || _event_target_files === void 0 ? void 0 : _event_target_files[0];
+    if (!file) return;
+    acceptFile(file);
     if (fileInputRef.current) {
       fileInputRef.current.value = "";
     }
-  }, [maxFileSize, onAdd, fileTooLargeLabel]);
+  }, [acceptFile]);
   var handlePreview = (0, import_react2.useCallback)(function (attachment) {
     setPreviewFile(attachment);
   }, []);
@@ -217,14 +465,41 @@ function Attachments(param) {
     var _fileInputRef_current;
     (_fileInputRef_current = fileInputRef.current) === null || _fileInputRef_current === void 0 ? void 0 : _fileInputRef_current.click();
   }, []);
+  var dropHandlers = canAdd && import_tamagui.isWeb ? {
+    onDragOver: function onDragOver(event) {
+      event.preventDefault();
+      setDragOver(true);
+    },
+    onDragLeave: function onDragLeave() {
+      return setDragOver(false);
+    },
+    onDrop: function onDrop(event) {
+      var _event_dataTransfer_files, _event_dataTransfer;
+      event.preventDefault();
+      setDragOver(false);
+      var file = (_event_dataTransfer = event.dataTransfer) === null || _event_dataTransfer === void 0 ? void 0 : (_event_dataTransfer_files = _event_dataTransfer.files) === null || _event_dataTransfer_files === void 0 ? void 0 : _event_dataTransfer_files[0];
+      if (file) acceptFile(file);
+    }
+  } : void 0;
   var emptyState = renderEmpty ? renderEmpty() : /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
     ...(compact ? {
       padding: "$2"
     } : knobProps.panelPadding),
     alignItems: "center",
-    opacity: 0.5,
+    ...knobProps.borderRadius,
+    borderWidth: canAdd ? 1 : 0,
+    borderStyle: canAdd ? "dashed" : void 0,
+    borderColor: dragOver ? import_componentColors.componentColors.interactive.border : import_componentColors.componentColors.surface.border,
+    backgroundColor: dragOver ? import_componentColors.componentColors.interactive.background : "transparent",
+    cursor: canAdd ? "pointer" : "default",
+    opacity: canAdd ? 1 : 0.5,
+    hoverStyle: canAdd ? {
+      backgroundColor: import_componentColors.componentColors.interactive.background
+    } : void 0,
+    onPress: canAdd ? handleUploadClick : void 0,
+    ...dropHandlers,
     children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.PaperclipIcon, {
-      size: compact ? 20 : 32
+      size: compact ? 20 : 28
     }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
       color: import_componentColors.componentColors.text.muted,
       fontSize: compact ? "$2" : "$3",
@@ -234,109 +509,13 @@ function Attachments(param) {
   });
   var sz = knobProps.sizeToken;
   var thumbSize = compact ? sz === "$3" ? 24 : sz === "$5" ? 40 : 32 : sz === "$3" ? 32 : sz === "$5" ? 48 : 40;
-  var renderAttachmentItem = function renderAttachmentItem2(attachment) {
-    var isImage = isImageFile(attachment);
-    var actions = {
-      onPreview: function onPreview() {
-        return handlePreview(attachment);
-      },
-      onDownload: function onDownload2() {
-        return handleDownload(attachment);
-      },
-      onRemove: function onRemove1() {
-        return onRemove === null || onRemove === void 0 ? void 0 : onRemove(attachment);
-      }
-    };
-    var mediaSlot = /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
-      width: thumbSize,
-      height: thumbSize,
-      flexShrink: 0,
-      overflow: "hidden",
-      backgroundColor: import_componentColors.componentColors.surface.background,
-      ...knobProps.borderRadius,
-      alignItems: "center",
-      justifyContent: "center",
-      children: isImage ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(AttachmentThumbnail, {
-        attachment,
-        size: thumbSize,
-        fallback: getFileIcon(attachment)
-      }) : getFileIcon(attachment)
-    });
-    var actionButtons = /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
-      gap: "$1",
-      children: [enablePreview && isImage && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Button, {
-        size: "$2",
-        chromeless: true,
-        icon: import_react.EyeIcon,
-        "aria-label": previewLabel,
-        onPress: function onPress(e) {
-          e.stopPropagation();
-          actions.onPreview();
-        }
-      }), enableDownload && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Button, {
-        size: "$2",
-        chromeless: true,
-        icon: import_react.DownloadSimpleIcon,
-        "aria-label": downloadLabel,
-        onPress: function onPress(e) {
-          e.stopPropagation();
-          actions.onDownload();
-        }
-      }), enableRemove && !disabled && onRemove && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Button, {
-        size: "$2",
-        chromeless: true,
-        icon: import_react.TrashIcon,
-        "aria-label": removeLabel,
-        onPress: function onPress(e) {
-          e.stopPropagation();
-          actions.onRemove();
-        }
-      })]
-    });
-    var defaultContent = /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.ListItem, {
-      size: compact ? "$3" : knobProps.sizeToken,
-      paddingVertical: "$2",
-      hoverStyle: {
-        backgroundColor: import_componentColors.componentColors.surface.background
-      },
-      pressStyle: {
-        backgroundColor: import_componentColors.componentColors.interactive.background
-      },
-      onPress: function onPress() {
-        return onAttachmentClick === null || onAttachmentClick === void 0 ? void 0 : onAttachmentClick(attachment);
-      },
-      cursor: "pointer",
-      children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
-        flex: 1,
-        alignItems: "center",
-        ...knobProps.gap,
-        children: [mediaSlot, /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-          flex: 1,
-          minWidth: 0,
-          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-            ...knobProps.body,
-            fontSize: compact ? "$3" : knobProps.sizeToken,
-            numberOfLines: 1,
-            children: attachment.fileName
-          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
-            fontSize: "$2",
-            color: import_componentColors.componentColors.text.muted,
-            children: attachment.formattedSize || formatFileSize(attachment.fileSize)
-          })]
-        }), actionButtons]
-      })
-    });
-    if (renderAttachment) {
-      return renderAttachment(attachment, defaultContent, actions);
-    }
-    return defaultContent;
-  };
+  var rowPad = knobProps.panelPadding.padding;
   return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
     ...knobProps.gap,
     ...stackProps,
     children: [(label || canAdd) && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
       alignItems: "center",
-      justifyContent: "space-between",
+      justifyContent: label ? "space-between" : "flex-end",
       children: [label && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Label, {
         ...(compact ? {
           fontSize: "$3",
@@ -348,9 +527,9 @@ function Attachments(param) {
           fontSize: "$2",
           children: [" ", "(", items.length, "/", maxAttachments, ")"]
         })]
-      }), canAdd && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Button, {
+      }), canAdd && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
         size: compact ? "$2" : "$3",
-        icon: import_react.UploadIcon,
+        icon: import_react.PlusIcon,
         onPress: handleUploadClick,
         children: uploadLabel
       })]
@@ -377,7 +556,7 @@ function Attachments(param) {
         fontSize: "$2",
         flex: 1,
         children: uploadError
-      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Button, {
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
         size: "$1",
         chromeless: true,
         icon: import_react.XIcon,
@@ -393,14 +572,34 @@ function Attachments(param) {
       errorTitle: loadFailedLabel,
       loading: showSkeleton ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(AttachmentsSkeleton, {
         thumbSize,
-        loadingLabel: t("Loading")
+        loadingLabel: t("Loading"),
+        rowPad
       }) : false,
       empty: !hasError && items.length === 0 ? emptyState : false,
       children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
-        gap: "$1",
-        children: items.map(function (attachment) {
-          return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react2.default.Fragment, {
-            children: renderAttachmentItem(attachment)
+        role: "list",
+        backgroundColor: dragOver ? import_componentColors.componentColors.interactive.background : "transparent",
+        ...dropHandlers,
+        children: items.map(function (attachment, index) {
+          return /* @__PURE__ */(0, import_jsx_runtime.jsx)(AttachmentRow, {
+            attachment,
+            index,
+            count: items.length,
+            compact,
+            disabled,
+            thumbSize,
+            rowPad,
+            enablePreview,
+            enableDownload,
+            enableRemove,
+            previewLabel,
+            downloadLabel,
+            removeLabel,
+            onAttachmentClick,
+            onPreview: handlePreview,
+            onDownload: handleDownload,
+            onRemove,
+            renderAttachment
           }, attachment.id);
         })
       })
@@ -412,57 +611,42 @@ function Attachments(param) {
       children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Dialog.Portal, {
         children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_surfaces.DialogOverlay, {
           opacity: 0.5
-        }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.Dialog.Content, {
-          borderWidth: 1,
-          borderColor: "$borderColor",
-          elevation: knobProps.elevation,
-          // LC-24: enter/exit styles are dead code without a resolved token
-          transition: knobProps.transition,
-          enterStyle: {
-            x: 0,
-            y: -20,
-            opacity: 0,
-            scale: 0.9
-          },
-          exitStyle: {
-            x: 0,
-            y: 10,
-            opacity: 0,
-            scale: 0.95
-          },
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_surfaces.DialogContent, {
           maxWidth: 800,
           maxHeight: "80vh",
           children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Dialog.Title, {
             children: previewFile === null || previewFile === void 0 ? void 0 : previewFile.fileName
-          }), previewFile && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
-            ...knobProps.panelPadding,
+          }), previewFile && isImageFile(previewFile) ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Image, {
+            src: previewFile.fileUrl,
+            alt: previewFile.fileName,
+            width: "100%",
+            height: 320,
+            objectFit: "contain"
+          }) : previewFile ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
             alignItems: "center",
-            children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Image, {
-              // src/objectFit, not source/resizeMode (RN-only props leak
-              // onto the DOM <img> on web; tamagui maps these on native)
-              src: previewFile.fileUrl,
-              alt: previewFile.fileName,
-              width: "100%",
-              height: 400,
-              objectFit: "contain"
-            }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
-              gap: "$2",
-              marginTop: "$4",
-              children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Button, {
-                icon: import_react.DownloadSimpleIcon,
-                onPress: function onPress() {
-                  return handleDownload(previewFile);
-                },
-                children: downloadLabel
-              }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Dialog.Close, {
-                asChild: true,
-                children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Button, {
-                  variant: "outlined",
-                  children: closeLabel
-                })
-              })]
+            ...knobProps.gap,
+            paddingVertical: "$4",
+            children: [getFileIcon(previewFile, 40), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+              color: import_componentColors.componentColors.text.muted,
+              textAlign: "center",
+              children: previewUnavailableLabel
             })]
-          })]
+          }) : null, previewFile ? /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+            gap: "$2",
+            children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
+              icon: import_react.DownloadSimpleIcon,
+              onPress: function onPress() {
+                return handleDownload(previewFile);
+              },
+              children: downloadLabel
+            }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
+              outlined: true,
+              onPress: function onPress() {
+                return setPreviewFile(null);
+              },
+              children: closeLabel
+            })]
+          }) : null]
         })]
       })
     })]