@multiplatform.one/components 6.6.0 → 7.0.0

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

@@ -1,13 +1,15 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { DownloadSimpleIcon, EyeIcon, FileIcon, ImageIcon, PaperclipIcon, TrashIcon, UploadIcon, XIcon } from "@phosphor-icons/react";
+import { DownloadSimpleIcon, EyeIcon, FileIcon, FileTextIcon, ImageIcon, PaperclipIcon, PlusIcon, TrashIcon, XIcon } from "@phosphor-icons/react";
 import { downloadFile } from "@multiplatform.one/platform";
-import { useResolvedKnobs } from "@multiplatform.one/theme";
+import { ensureFocusVisibleRing, ensureKeyboardModalityTracking, getGroupPosition, hairline, stackRadiusProps, useResolvedKnobs, wasKeyboardFocus } from "@multiplatform.one/theme";
 import React, { useCallback, useMemo, useRef, useState } from "react";
-import { useTranslation } from "react-i18next";
-import { Button, Dialog, Image, isWeb, Label, ListItem, Text, XStack, YStack } from "tamagui";
-import { DialogOverlay } from "../surfaces.native.js";
+import { useTranslation } from "../shared/i18n.native.js";
+import { Dialog, Image, Label, Separator, Text, XStack, YStack, isWeb } from "tamagui";
+import { Button } from "../Button.native.js";
+import { DialogContent, DialogOverlay } from "../surfaces.native.js";
 import { componentColors, sectionHeading } from "../componentColors.native.js";
 import { Skeleton } from "../Skeleton/index.native.js";
+import { useReturnFocusOnClose } from "../shared/useReturnFocusOnClose.native.js";
 import { AsyncBoundary, resolveAsyncStatus } from "./AsyncBoundary.native.js";
 function formatFileSize(bytes) {
   if (bytes === 0) return "0 B";
@@ -25,14 +27,64 @@ function isImageFile(attachment) {
   var ext = url.substring(url.lastIndexOf(".")).toLowerCase();
   return imageExtensions.includes(ext);
 }
-function getFileIcon(attachment) {
-  if (isImageFile(attachment)) {
-    return /* @__PURE__ */_jsx(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__ */_jsx(ImageIcon, {
+    size
+  });
+  if (kind === "pdf" || kind === "doc") return /* @__PURE__ */_jsx(FileTextIcon, {
+    size
+  });
   return /* @__PURE__ */_jsx(FileIcon, {
-    size: 20
+    size
   });
 }
 function AttachmentThumbnail(param) {
@@ -62,10 +114,10 @@ function AttachmentThumbnail(param) {
 function AttachmentsSkeleton(param) {
   var {
     thumbSize,
-    loadingLabel
+    loadingLabel,
+    rowPad
   } = param;
   return /* @__PURE__ */_jsx(YStack, {
-    gap: "$1",
     width: "100%",
     "data-async-skeleton": "attachments",
     "aria-busy": true,
@@ -73,29 +125,216 @@ function AttachmentsSkeleton(param) {
     children: Array.from({
       length: 3
     }).map(function (_, i) {
-      return /* @__PURE__ */_jsxs(XStack, {
-        gap: "$3",
-        alignItems: "center",
-        paddingVertical: "$2",
-        children: [/* @__PURE__ */_jsx(Skeleton, {
-          variant: "rounded",
-          width: thumbSize,
-          height: thumbSize
-        }), /* @__PURE__ */_jsxs(YStack, {
-          flex: 1,
-          gap: "$1",
+      return /* @__PURE__ */_jsxs(YStack, {
+        children: [i > 0 ? /* @__PURE__ */_jsx(Separator, {
+          ...hairline.line
+        }) : null, /* @__PURE__ */_jsxs(XStack, {
+          gap: "$3",
+          alignItems: "center",
+          paddingVertical: "$2",
+          paddingHorizontal: rowPad,
+          minHeight: 44,
           children: [/* @__PURE__ */_jsx(Skeleton, {
-            width: "55%",
-            height: 14
-          }), /* @__PURE__ */_jsx(Skeleton, {
-            width: "25%",
-            height: 12
+            variant: "rounded",
+            width: thumbSize,
+            height: thumbSize
+          }), /* @__PURE__ */_jsxs(YStack, {
+            flex: 1,
+            gap: "$1",
+            children: [/* @__PURE__ */_jsx(Skeleton, {
+              width: "55%",
+              height: 14
+            }), /* @__PURE__ */_jsx(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
+  } = useResolvedKnobs({
+    compact
+  });
+  var [kbFocus, setKbFocus] = 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 = getGroupPosition(index, count);
+  var corners = 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__ */_jsx(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__ */_jsx(AttachmentThumbnail, {
+      attachment,
+      size: thumbSize,
+      fallback: getFileIcon(attachment, iconSize)
+    }) : getFileIcon(attachment, iconSize)
+  });
+  var actionButtons = /* @__PURE__ */_jsxs(XStack, {
+    gap: "$1",
+    alignItems: "center",
+    children: [enablePreview && isImage && /* @__PURE__ */_jsx(Button, {
+      size: "$2",
+      chromeless: true,
+      nested: true,
+      icon: EyeIcon,
+      "aria-label": previewLabel,
+      onPress: function onPress(e) {
+        e.stopPropagation();
+        actions.onPreview();
+      }
+    }), enableDownload && /* @__PURE__ */_jsx(Button, {
+      size: "$2",
+      chromeless: true,
+      nested: true,
+      icon: DownloadSimpleIcon,
+      "aria-label": downloadLabel,
+      onPress: function onPress(e) {
+        e.stopPropagation();
+        actions.onDownload();
+      }
+    }), enableRemove && !disabled && onRemove && /* @__PURE__ */_jsx(Button, {
+      size: "$2",
+      chromeless: true,
+      nested: true,
+      icon: TrashIcon,
+      "aria-label": removeLabel,
+      onPress: function onPress(e) {
+        e.stopPropagation();
+        actions.onRemove();
+      }
+    })]
+  });
+  var defaultContent = /* @__PURE__ */_jsxs(YStack, {
+    children: [index > 0 ? /* @__PURE__ */_jsx(Separator, {
+      ...hairline.line
+    }) : null, /* @__PURE__ */_jsx(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: componentColors.interactive.background,
+        ...control.hoverKnobProps,
+        ...corners
+      },
+      pressStyle: {
+        backgroundColor: componentColors.interactive.hover,
+        ...control.pressKnobProps,
+        ...corners
+      },
+      ...(kbFocus ? 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 (wasKeyboardFocus()) setKbFocus(true);
+      },
+      onBlur: function onBlur() {
+        return setKbFocus(false);
+      },
+      children: /* @__PURE__ */_jsxs(XStack, {
+        flex: 1,
+        alignItems: "center",
+        minWidth: 0,
+        gap: "$3",
+        children: [mediaSlot, /* @__PURE__ */_jsxs(YStack, {
+          flex: 1,
+          minWidth: 0,
+          children: [/* @__PURE__ */_jsx(Text, {
+            ...knobProps.body,
+            fontSize: compact ? "$3" : "$4",
+            numberOfLines: 1,
+            children: attachment.fileName
+          }), /* @__PURE__ */_jsxs(XStack, {
+            gap: "$2",
+            alignItems: "center",
+            children: [/* @__PURE__ */_jsx(Text, {
+              fontSize: "$2",
+              color: componentColors.text.muted,
+              children: attachment.formattedSize || formatFileSize(attachment.fileSize)
+            }), ext ? /* @__PURE__ */_jsxs(_Fragment, {
+              children: [/* @__PURE__ */_jsx(Text, {
+                fontSize: "$2",
+                color: componentColors.text.subtle,
+                children: "\xB7"
+              }), /* @__PURE__ */_jsx(Text, {
+                fontSize: "$2",
+                color: componentColors.text.subtle,
+                children: ext
+              })]
+            }) : null]
+          })]
+        }), actionButtons]
+      })
+    })]
+  });
+  if (renderAttachment) {
+    return renderAttachment(attachment, defaultContent, actions);
+  }
+  return defaultContent;
+}
 function Attachments(param) {
   var {
     items,
@@ -126,10 +365,15 @@ function Attachments(param) {
   } = useTranslation();
   var {
     knobProps
-  } = useResolvedKnobs();
+  } = useResolvedKnobs({
+    compact
+  });
   var fileInputRef = useRef(null);
   var [previewFile, setPreviewFile] = useState(null);
   var [uploadError, setUploadError] = useState(null);
+  var [dragOver, setDragOver] = useState(false);
+  useReturnFocusOnClose(!!previewFile);
+  if (isWeb) ensureKeyboardModalityTracking();
   var {
     upload: uploadLabel = "Upload",
     noAttachments: noAttachmentsLabel = "No attachments",
@@ -138,7 +382,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 = resolveAsyncStatus({
     error
@@ -149,20 +394,23 @@ function Attachments(param) {
     if (maxAttachments > 0 && items.length >= maxAttachments) return false;
     return true;
   }, [disabled, enableAdd, onAdd, maxAttachments, items.length, hasError]);
-  var handleFileSelect = 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 = 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 = 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 = useCallback(function (attachment) {
     setPreviewFile(attachment);
   }, []);
@@ -177,14 +425,41 @@ function Attachments(param) {
     var _fileInputRef_current;
     (_fileInputRef_current = fileInputRef.current) === null || _fileInputRef_current === void 0 ? void 0 : _fileInputRef_current.click();
   }, []);
+  var dropHandlers = canAdd && 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__ */_jsxs(YStack, {
     ...(compact ? {
       padding: "$2"
     } : knobProps.panelPadding),
     alignItems: "center",
-    opacity: 0.5,
+    ...knobProps.borderRadius,
+    borderWidth: canAdd ? 1 : 0,
+    borderStyle: canAdd ? "dashed" : void 0,
+    borderColor: dragOver ? componentColors.interactive.border : componentColors.surface.border,
+    backgroundColor: dragOver ? componentColors.interactive.background : "transparent",
+    cursor: canAdd ? "pointer" : "default",
+    opacity: canAdd ? 1 : 0.5,
+    hoverStyle: canAdd ? {
+      backgroundColor: componentColors.interactive.background
+    } : void 0,
+    onPress: canAdd ? handleUploadClick : void 0,
+    ...dropHandlers,
     children: [/* @__PURE__ */_jsx(PaperclipIcon, {
-      size: compact ? 20 : 32
+      size: compact ? 20 : 28
     }), /* @__PURE__ */_jsx(Text, {
       color: componentColors.text.muted,
       fontSize: compact ? "$2" : "$3",
@@ -194,109 +469,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__ */_jsx(YStack, {
-      width: thumbSize,
-      height: thumbSize,
-      flexShrink: 0,
-      overflow: "hidden",
-      backgroundColor: componentColors.surface.background,
-      ...knobProps.borderRadius,
-      alignItems: "center",
-      justifyContent: "center",
-      children: isImage ? /* @__PURE__ */_jsx(AttachmentThumbnail, {
-        attachment,
-        size: thumbSize,
-        fallback: getFileIcon(attachment)
-      }) : getFileIcon(attachment)
-    });
-    var actionButtons = /* @__PURE__ */_jsxs(XStack, {
-      gap: "$1",
-      children: [enablePreview && isImage && /* @__PURE__ */_jsx(Button, {
-        size: "$2",
-        chromeless: true,
-        icon: EyeIcon,
-        "aria-label": previewLabel,
-        onPress: function onPress(e) {
-          e.stopPropagation();
-          actions.onPreview();
-        }
-      }), enableDownload && /* @__PURE__ */_jsx(Button, {
-        size: "$2",
-        chromeless: true,
-        icon: DownloadSimpleIcon,
-        "aria-label": downloadLabel,
-        onPress: function onPress(e) {
-          e.stopPropagation();
-          actions.onDownload();
-        }
-      }), enableRemove && !disabled && onRemove && /* @__PURE__ */_jsx(Button, {
-        size: "$2",
-        chromeless: true,
-        icon: TrashIcon,
-        "aria-label": removeLabel,
-        onPress: function onPress(e) {
-          e.stopPropagation();
-          actions.onRemove();
-        }
-      })]
-    });
-    var defaultContent = /* @__PURE__ */_jsx(ListItem, {
-      size: compact ? "$3" : knobProps.sizeToken,
-      paddingVertical: "$2",
-      hoverStyle: {
-        backgroundColor: componentColors.surface.background
-      },
-      pressStyle: {
-        backgroundColor: componentColors.interactive.background
-      },
-      onPress: function onPress() {
-        return onAttachmentClick === null || onAttachmentClick === void 0 ? void 0 : onAttachmentClick(attachment);
-      },
-      cursor: "pointer",
-      children: /* @__PURE__ */_jsxs(XStack, {
-        flex: 1,
-        alignItems: "center",
-        ...knobProps.gap,
-        children: [mediaSlot, /* @__PURE__ */_jsxs(YStack, {
-          flex: 1,
-          minWidth: 0,
-          children: [/* @__PURE__ */_jsx(Text, {
-            ...knobProps.body,
-            fontSize: compact ? "$3" : knobProps.sizeToken,
-            numberOfLines: 1,
-            children: attachment.fileName
-          }), /* @__PURE__ */_jsx(Text, {
-            fontSize: "$2",
-            color: 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__ */_jsxs(YStack, {
     ...knobProps.gap,
     ...stackProps,
     children: [(label || canAdd) && /* @__PURE__ */_jsxs(XStack, {
       alignItems: "center",
-      justifyContent: "space-between",
+      justifyContent: label ? "space-between" : "flex-end",
       children: [label && /* @__PURE__ */_jsxs(Label, {
         ...(compact ? {
           fontSize: "$3",
@@ -310,7 +489,7 @@ function Attachments(param) {
         })]
       }), canAdd && /* @__PURE__ */_jsx(Button, {
         size: compact ? "$2" : "$3",
-        icon: UploadIcon,
+        icon: PlusIcon,
         onPress: handleUploadClick,
         children: uploadLabel
       })]
@@ -353,14 +532,34 @@ function Attachments(param) {
       errorTitle: loadFailedLabel,
       loading: showSkeleton ? /* @__PURE__ */_jsx(AttachmentsSkeleton, {
         thumbSize,
-        loadingLabel: t("Loading")
+        loadingLabel: t("Loading"),
+        rowPad
       }) : false,
       empty: !hasError && items.length === 0 ? emptyState : false,
       children: /* @__PURE__ */_jsx(YStack, {
-        gap: "$1",
-        children: items.map(function (attachment) {
-          return /* @__PURE__ */_jsx(React.Fragment, {
-            children: renderAttachmentItem(attachment)
+        role: "list",
+        backgroundColor: dragOver ? componentColors.interactive.background : "transparent",
+        ...dropHandlers,
+        children: items.map(function (attachment, index) {
+          return /* @__PURE__ */_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);
         })
       })
@@ -372,57 +571,42 @@ function Attachments(param) {
       children: /* @__PURE__ */_jsxs(Dialog.Portal, {
         children: [/* @__PURE__ */_jsx(DialogOverlay, {
           opacity: 0.5
-        }), /* @__PURE__ */_jsxs(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__ */_jsxs(DialogContent, {
           maxWidth: 800,
           maxHeight: "80vh",
           children: [/* @__PURE__ */_jsx(Dialog.Title, {
             children: previewFile === null || previewFile === void 0 ? void 0 : previewFile.fileName
-          }), previewFile && /* @__PURE__ */_jsxs(YStack, {
-            ...knobProps.panelPadding,
+          }), previewFile && isImageFile(previewFile) ? /* @__PURE__ */_jsx(Image, {
+            src: previewFile.fileUrl,
+            alt: previewFile.fileName,
+            width: "100%",
+            height: 320,
+            objectFit: "contain"
+          }) : previewFile ? /* @__PURE__ */_jsxs(YStack, {
             alignItems: "center",
-            children: [/* @__PURE__ */_jsx(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__ */_jsxs(XStack, {
-              gap: "$2",
-              marginTop: "$4",
-              children: [/* @__PURE__ */_jsx(Button, {
-                icon: DownloadSimpleIcon,
-                onPress: function onPress() {
-                  return handleDownload(previewFile);
-                },
-                children: downloadLabel
-              }), /* @__PURE__ */_jsx(Dialog.Close, {
-                asChild: true,
-                children: /* @__PURE__ */_jsx(Button, {
-                  variant: "outlined",
-                  children: closeLabel
-                })
-              })]
+            ...knobProps.gap,
+            paddingVertical: "$4",
+            children: [getFileIcon(previewFile, 40), /* @__PURE__ */_jsx(Text, {
+              color: componentColors.text.muted,
+              textAlign: "center",
+              children: previewUnavailableLabel
             })]
-          })]
+          }) : null, previewFile ? /* @__PURE__ */_jsxs(XStack, {
+            gap: "$2",
+            children: [/* @__PURE__ */_jsx(Button, {
+              icon: DownloadSimpleIcon,
+              onPress: function onPress() {
+                return handleDownload(previewFile);
+              },
+              children: downloadLabel
+            }), /* @__PURE__ */_jsx(Button, {
+              outlined: true,
+              onPress: function onPress() {
+                return setPreviewFile(null);
+              },
+              children: closeLabel
+            })]
+          }) : null]
         })]
       })
     })]