@multiplatform.one/components 6.7.0 → 7.0.0

package/dist/cjs/layouts/attachments.cjs

@@ -1,8 +1,6 @@
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all) __defProp(target, name, {
@@ -19,15 +17,6 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-// If the importer is in node compatibility mode or this is not an ESM
-// file that has been converted to a CommonJS file using a Babel-
-// compatible transform (i.e. "__esModule" has not been set), then set
-// "default" to the CommonJS "module.exports" for node compatibility.
-isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
-  value: mod,
-  enumerable: true
-}) : target, mod));
 var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
   value: true
 }), mod);
@@ -39,12 +28,14 @@ module.exports = __toCommonJS(attachments_exports);
 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_react2 = require("react");
+var import_i18n = require("../shared/i18n.cjs");
 var import_tamagui = require("tamagui");
+var import_Button = require("../Button.cjs");
 var import_surfaces = require("../surfaces.cjs");
 var import_componentColors = require("../componentColors.cjs");
 var import_Skeleton = require("../Skeleton/index.cjs");
+var import_useReturnFocusOnClose = require("../shared/useReturnFocusOnClose.cjs");
 var import_AsyncBoundary = require("./AsyncBoundary.cjs");
 var import_jsx_runtime = require("react/jsx-runtime");
 function formatFileSize(bytes) {
@@ -63,14 +54,63 @@ function isImageFile(attachment) {
   const 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) {
+  const name = attachment.fileName || "";
+  const dot = name.lastIndexOf(".");
+  if (dot > 0 && dot < name.length - 1) return name.slice(dot + 1).toUpperCase();
+  const mime = attachment.fileType?.split("/")[1];
+  return mime ? mime.toUpperCase() : "";
+}
+function getFileKind(attachment) {
+  if (isImageFile(attachment)) return "image";
+  const ext = getFileExtension(attachment).toLowerCase();
+  const 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";
+}
+const 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) {
+  const 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({
@@ -93,38 +133,214 @@ function AttachmentThumbnail({
 }
 function AttachmentsSkeleton({
   thumbSize,
-  loadingLabel
+  loadingLabel,
+  rowPad
 }) {
   return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
-    gap: "$1",
     width: "100%",
     "data-async-skeleton": "attachments",
     "aria-busy": true,
     "aria-label": loadingLabel,
     children: Array.from({
       length: 3
-    }).map((_, i) => /* @__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",
+    }).map((_, i) => /* @__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({
+  attachment,
+  index,
+  count,
+  compact,
+  disabled,
+  thumbSize,
+  rowPad,
+  enablePreview,
+  enableDownload,
+  enableRemove,
+  previewLabel,
+  downloadLabel,
+  removeLabel,
+  onAttachmentClick,
+  onPreview,
+  onDownload,
+  onRemove,
+  renderAttachment
+}) {
+  const {
+    knobProps,
+    control
+  } = (0, import_theme.useResolvedKnobs)({
+    compact
+  });
+  const [kbFocus, setKbFocus] = (0, import_react2.useState)(false);
+  const isImage = isImageFile(attachment);
+  const kind = getFileKind(attachment);
+  const tone = FILE_KIND_TONE[kind];
+  const ext = getFileExtension(attachment);
+  const iconSize = compact ? 14 : 16;
+  const position = (0, import_theme.getGroupPosition)(index, count);
+  const corners = (0, import_theme.stackRadiusProps)(position, knobProps.borderRadius.borderRadius);
+  const actions = {
+    onPreview: () => onPreview(attachment),
+    onDownload: () => onDownload(attachment),
+    onRemove: () => onRemove?.(attachment)
+  };
+  const 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: tone.fg
+    },
+    children: isImage ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(AttachmentThumbnail, {
+      attachment,
+      size: thumbSize,
+      fallback: getFileIcon(attachment, iconSize)
+    }) : getFileIcon(attachment, iconSize)
+  });
+  const 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: 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: 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: e => {
+        e.stopPropagation();
+        actions.onRemove();
+      }
+    })]
+  });
+  const 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: () => {
+        onAttachmentClick?.(attachment);
+        if (enablePreview) onPreview(attachment);
+      },
+      onFocus: () => {
+        if ((0, import_theme.wasKeyboardFocus)()) setKbFocus(true);
+      },
+      onBlur: () => 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({
   items,
   label,
@@ -151,13 +367,18 @@ function Attachments({
 }) {
   const {
     t
-  } = (0, import_react_i18next.useTranslation)();
+  } = (0, import_i18n.useTranslation)();
   const {
     knobProps
-  } = (0, import_theme.useResolvedKnobs)();
+  } = (0, import_theme.useResolvedKnobs)({
+    compact
+  });
   const fileInputRef = (0, import_react2.useRef)(null);
   const [previewFile, setPreviewFile] = (0, import_react2.useState)(null);
   const [uploadError, setUploadError] = (0, import_react2.useState)(null);
+  const [dragOver, setDragOver] = (0, import_react2.useState)(false);
+  (0, import_useReturnFocusOnClose.useReturnFocusOnClose)(!!previewFile);
+  if (import_tamagui.isWeb) (0, import_theme.ensureKeyboardModalityTracking)();
   const {
     upload: uploadLabel = "Upload",
     noAttachments: noAttachmentsLabel = "No attachments",
@@ -166,7 +387,8 @@ function Attachments({
     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;
   const hasError = (0, import_AsyncBoundary.resolveAsyncStatus)({
     error
@@ -177,19 +399,22 @@ function Attachments({
     if (maxAttachments > 0 && items.length >= maxAttachments) return false;
     return true;
   }, [disabled, enableAdd, onAdd, maxAttachments, items.length, hasError]);
-  const handleFileSelect = (0, import_react2.useCallback)(event => {
-    const file = event.target.files?.[0];
-    if (!file) return;
+  const acceptFile = (0, import_react2.useCallback)(file => {
     if (maxFileSize && file.size > maxFileSize) {
       setUploadError(`${fileTooLargeLabel} (${formatFileSize(maxFileSize)})`);
       return;
     }
     setUploadError(null);
     onAdd?.(file);
+  }, [maxFileSize, onAdd, fileTooLargeLabel]);
+  const handleFileSelect = (0, import_react2.useCallback)(event => {
+    const file = event.target.files?.[0];
+    if (!file) return;
+    acceptFile(file);
     if (fileInputRef.current) {
       fileInputRef.current.value = "";
     }
-  }, [maxFileSize, onAdd, fileTooLargeLabel]);
+  }, [acceptFile]);
   const handlePreview = (0, import_react2.useCallback)(attachment => {
     setPreviewFile(attachment);
   }, []);
@@ -203,14 +428,38 @@ function Attachments({
   const handleUploadClick = (0, import_react2.useCallback)(() => {
     fileInputRef.current?.click();
   }, []);
+  const dropHandlers = canAdd && import_tamagui.isWeb ? {
+    onDragOver: event => {
+      event.preventDefault();
+      setDragOver(true);
+    },
+    onDragLeave: () => setDragOver(false),
+    onDrop: event => {
+      event.preventDefault();
+      setDragOver(false);
+      const file = event.dataTransfer?.files?.[0];
+      if (file) acceptFile(file);
+    }
+  } : void 0;
   const 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",
@@ -220,103 +469,13 @@ function Attachments({
   });
   const sz = knobProps.sizeToken;
   const thumbSize = compact ? sz === "$3" ? 24 : sz === "$5" ? 40 : 32 : sz === "$3" ? 32 : sz === "$5" ? 48 : 40;
-  const renderAttachmentItem = attachment => {
-    const isImage = isImageFile(attachment);
-    const actions = {
-      onPreview: () => handlePreview(attachment),
-      onDownload: () => handleDownload(attachment),
-      onRemove: () => onRemove?.(attachment)
-    };
-    const 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)
-    });
-    const 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: 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: 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: e => {
-          e.stopPropagation();
-          actions.onRemove();
-        }
-      })]
-    });
-    const 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: () => 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;
-  };
+  const 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",
@@ -327,9 +486,9 @@ function Attachments({
           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
       })]
@@ -353,7 +512,7 @@ function Attachments({
         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,
@@ -366,13 +525,33 @@ function Attachments({
       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(attachment => /* @__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((attachment, index) => /* @__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))
       })
     }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Dialog, {
@@ -381,52 +560,38 @@ function Attachments({
       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,
-          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?.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: 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: () => 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: () => handleDownload(previewFile),
+              children: downloadLabel
+            }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Button.Button, {
+              outlined: true,
+              onPress: () => setPreviewFile(null),
+              children: closeLabel
+            })]
+          }) : null]
         })]
       })
     })]