@zenify-omni/chat-ui-react-js 0.1.0

package/components/custom/field-file-upload/files-upload.js

@@ -0,0 +1,87 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Label } from "../../ui/label.js";
+import UploadCustom from "./upload-custom.js";
+import PreviewListFiles from "./preview-list-file.js";
+import { cn } from "../../../lib/utils.js";
+import {
+  EXTRAFIELD_FILE_UPLOAD_MAXSIZE,
+  EXTRAFIELD_FILE_UPLOAD_MAXCOUNT
+} from "@zenify-omni/chat-js/constants/file-upload.js";
+import { useTranslation } from "react-i18next";
+function FilesUpload({
+  multiple = true,
+  maxSize = EXTRAFIELD_FILE_UPLOAD_MAXSIZE,
+  onFilesChange,
+  value,
+  isMiniSize,
+  showImageName,
+  classNameItem,
+  maxCount = EXTRAFIELD_FILE_UPLOAD_MAXCOUNT,
+  isChange = true,
+  disabled
+}) {
+  const { t } = useTranslation();
+  const [files, setFiles] = useState([]);
+  const removeFile = (updated) => {
+    setFiles(updated);
+    onFilesChange?.(updated.map((img) => img));
+  };
+  return /* @__PURE__ */ jsxs("div", { className: cn(isMiniSize && "px-3"), children: [
+    /* @__PURE__ */ jsx("div", { className: "space-y-3", children: /* @__PURE__ */ jsx(
+      UploadCustom,
+      {
+        isChange,
+        isMiniSize,
+        onChange: onFilesChange,
+        setFiles,
+        disabled,
+        value,
+        maxSize,
+        maxCount,
+        multiple,
+        inputAccept: ".pdf,.doc,.docx,.xls,.xlsx,.txt",
+        allowedType: [
+          "application/pdf",
+          // pdf
+          "application/msword",
+          // doc
+          "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+          // docx
+          "application/vnd.ms-excel",
+          // xls
+          "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+          // xlsx
+          "text/plain"
+          // txt
+        ],
+        title: t("common:message.orDragDropFileHere", {
+          defaultValue: "ho\u1EB7c k\xE9o th\u1EA3 file v\xE0o \u0111\xE2y"
+        }),
+        desc: t("common:message.fileUploadHint", {
+          maxSize,
+          defaultValue: "PDF, DOC, DOCX, XLS, XLSX, TXT t\u1ED1i \u0111a {maxSize}MB"
+        })
+      }
+    ) }),
+    /* @__PURE__ */ jsxs("div", { className: "mt-2 space-y-3", children: [
+      files.length > 0 && !isMiniSize && /* @__PURE__ */ jsx(Label, { className: "flex items-center justify-between text-xs font-medium text-foreground", children: /* @__PURE__ */ jsx("span", { children: t("common:label.selectedFilesCount", {
+        length: files.length,
+        defaultValue: "File \u0111\xE3 ch\u1ECDn ({length})"
+      }) }) }),
+      /* @__PURE__ */ jsx(
+        PreviewListFiles,
+        {
+          isRemoveFiles: isChange && !disabled,
+          classNameItem,
+          removeFile,
+          showImageName,
+          datas: files
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  FilesUpload
+};

package/components/custom/field-file-upload/image-upload.js

@@ -0,0 +1,115 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { ChevronDown } from "lucide-react";
+import { Label } from "../../ui/label.js";
+import PreviewListImage from "./preview-list-image.js";
+import UploadCustom from "./upload-custom.js";
+import { cn } from "../../../lib/utils.js";
+import {
+  EXTRAFIELD_IMAGE_UPLOAD_MAXSIZE,
+  EXTRAFIELD_IMAGE_UPLOAD_MAXCOUNT
+} from "@zenify-omni/chat-js/constants/file-upload.js";
+import { useTranslation } from "react-i18next";
+const formatLinkToPreviewImage = (value) => {
+  if (!Array.isArray(value)) {
+    return null;
+  }
+  const data = value.filter((e) => e).map((e) => {
+    let formatValue = {};
+    if (typeof e === "string" || !e.file?.name) {
+      formatValue.file = {};
+      const previewUrl = typeof e === "string" ? e : e.preview || "";
+      formatValue.preview = previewUrl;
+      formatValue.file.name = previewUrl ? previewUrl.split("/").pop() : "image";
+    } else {
+      formatValue = e;
+    }
+    return formatValue;
+  });
+  return data;
+};
+function ImageUpload({
+  multiple = true,
+  maxSize = EXTRAFIELD_IMAGE_UPLOAD_MAXSIZE,
+  onImagesChange,
+  value,
+  isMiniSize,
+  showImageName,
+  maxImageShowing = 4,
+  maxCount = EXTRAFIELD_IMAGE_UPLOAD_MAXCOUNT,
+  disabled = false,
+  isChange = true
+}) {
+  const { t } = useTranslation();
+  const [images, setImages] = useState([]);
+  const [isShowAll, setIsShowAll] = useState(false);
+  const removeImage = (updated) => {
+    setImages(updated);
+    onImagesChange?.(updated.map((img) => img));
+  };
+  return /* @__PURE__ */ jsxs("div", { className: cn(isMiniSize && "px-3"), children: [
+    /* @__PURE__ */ jsx("div", { className: "space-y-3", children: /* @__PURE__ */ jsx(
+      UploadCustom,
+      {
+        isImage: true,
+        isChange,
+        disabled,
+        maxImageShowing,
+        isOptionShowAll: true,
+        isShowAll,
+        setIsShowAll,
+        isMiniSize,
+        onChange: onImagesChange,
+        setFiles: setImages,
+        value,
+        maxSize,
+        maxCount,
+        multiple,
+        allowedType: ["image/jpeg", "image/png", "image/jpg"],
+        inputAccept: "image/*",
+        title: t("common:message.orDragDropImage", {
+          defaultValue: "ho\u1EB7c k\xE9o th\u1EA3 \u1EA3nh v\xE0o \u0111\xE2y"
+        }),
+        desc: t("common:message.supportedImageTypesJpgPng", {
+          maxSize,
+          defaultValue: "JPG, JPEG, PNG t\u1ED1i \u0111a {maxSize}MB"
+        })
+      }
+    ) }),
+    /* @__PURE__ */ jsx("div", { className: "my-2 space-y-3", children: images.length > 0 && !isMiniSize && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsx(Label, { className: "flex items-center justify-between text-xs font-medium text-foreground", children: /* @__PURE__ */ jsx("span", { children: t("common:label.selectedImagesCount", {
+        length: images.length,
+        defaultValue: "\u1EA2nh \u0111\xE3 ch\u1ECDn ({length})"
+      }) }) }),
+      images.length > maxImageShowing && /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "cursor-pointer p-1 text-foreground transition-transform duration-200 ease-in-out",
+          onClick: () => setIsShowAll(!isShowAll),
+          children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: `transition-transform duration-300 ease-in-out ${isShowAll ? "rotate-0" : "rotate-90"}`,
+              children: /* @__PURE__ */ jsx(ChevronDown, { size: 16 })
+            }
+          )
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsx(
+      PreviewListImage,
+      {
+        isRemoveImages: isChange,
+        disabled,
+        maxImageShowing: isShowAll ? images.length : maxImageShowing,
+        removeImages: removeImage,
+        showImageName,
+        images
+      }
+    )
+  ] });
+}
+export {
+  ImageUpload,
+  formatLinkToPreviewImage
+};

package/components/custom/field-file-upload/preview-images-modal.js

@@ -0,0 +1,284 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { placeholderSvg } from "../../../assets/public-urls.js";
+import { useEffect, useState } from "react";
+import {
+  X,
+  ChevronLeft,
+  ChevronRight,
+  Download,
+  ZoomIn,
+  ZoomOut,
+  RotateCw,
+  RotateCcw,
+  RefreshCw
+} from "lucide-react";
+import { Button } from "../../ui/button.js";
+import usePreviewImageStore from "../../../store/preview-image-store.js";
+import { useShallow } from "zustand/react/shallow";
+import { createPortal } from "react-dom";
+import { saveAs } from "file-saver";
+import { Dialog, DialogContent } from "../../ui/dialog.js";
+const MIN_SCALE = 0.5;
+const MAX_SCALE = 3;
+const DEFAULT_SCALE = 1.8;
+const ZOOM_STEP = 0.2;
+function GlobalPreviewImage() {
+  const [scale, setScale] = useState(DEFAULT_SCALE);
+  const [rotation, setRotation] = useState(0);
+  const [modalImages, previewModal, setPreviewModal] = usePreviewImageStore(
+    useShallow((state) => [
+      state.modalImages,
+      state.previewModal,
+      state.setPreviewModal
+    ])
+  );
+  const currentIndex = previewModal.currentIndex;
+  const isOpen = previewModal.isOpen;
+  const images = modalImages;
+  const resetTransform = () => {
+    setScale(DEFAULT_SCALE);
+    setRotation(0);
+  };
+  const changeImage = (data) => {
+    resetTransform();
+    setPreviewModal(data);
+  };
+  const clampScale = (value) => Math.max(MIN_SCALE, Math.min(value, MAX_SCALE));
+  const onZoomIn = () => setScale((prev) => clampScale(prev + ZOOM_STEP));
+  const onZoomOut = () => setScale((prev) => clampScale(prev - ZOOM_STEP));
+  const onRotateLeft = () => setRotation((prev) => prev - 90);
+  const onRotateRight = () => setRotation((prev) => prev + 90);
+  const onClose = () => {
+    changeImage({ isOpen: false, currentIndex: 0 });
+  };
+  const onNext = () => {
+    changeImage({
+      ...previewModal,
+      currentIndex: (currentIndex + 1) % images.length
+    });
+  };
+  const onPrev = () => {
+    changeImage({
+      ...previewModal,
+      currentIndex: currentIndex === 0 ? images.length - 1 : currentIndex - 1
+    });
+  };
+  const onSelectImage = (index) => {
+    changeImage({
+      ...previewModal,
+      currentIndex: index
+    });
+  };
+  useEffect(() => {
+    const handleKeyDown = (e) => {
+      if (!isOpen) return;
+      switch (e.key) {
+        case "Escape":
+          onClose();
+          break;
+        case "ArrowLeft":
+          onPrev();
+          break;
+        case "ArrowRight":
+          onNext();
+          break;
+        case "+":
+        case "=":
+          onZoomIn();
+          break;
+        case "-":
+        case "_":
+          onZoomOut();
+          break;
+        case "r":
+        case "R":
+          onRotateRight();
+          break;
+        case "0":
+          resetTransform();
+          break;
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [isOpen, onClose, onNext, onPrev]);
+  if (!isOpen || !images[currentIndex]) return null;
+  const currentImage = images[currentIndex];
+  const hasMultipleImages = images.length > 1;
+  const handleBackdropClick = (e) => {
+    if (e.target === e.currentTarget) {
+      onClose();
+    }
+  };
+  const handleDownload = () => {
+    let cleanedUrl = currentImage.url;
+    if (cleanedUrl.includes("\n")) {
+      cleanedUrl = cleanedUrl.split("\n")[0].trim();
+    }
+    const filename = images[currentIndex].file?.name?.trim() || images[currentIndex].name?.trim() || "download";
+    saveAs(cleanedUrl, filename);
+  };
+  const handleWheel = (e) => {
+    e.preventDefault();
+    const newScale = clampScale(scale - e.deltaY * 1e-3);
+    setScale(newScale);
+  };
+  return createPortal(
+    /* @__PURE__ */ jsx(Dialog, { open: isOpen, children: /* @__PURE__ */ jsx(DialogContent, { className: "fixed inset-0 z-50 m-0 h-screen w-screen max-w-none translate-x-0 translate-y-0 !animate-none rounded-none border-none bg-transparent p-0 shadow-none !transition-none !duration-0", children: /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "relative z-10 flex h-full w-full flex-col items-center justify-center",
+        onClick: handleBackdropClick,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "absolute left-0 right-0 top-0 z-20 bg-gradient-to-b from-black/50 to-transparent p-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ jsxs("div", { className: "text-white", children: [
+              /* @__PURE__ */ jsx("h3", { className: "max-w-md truncate text-lg font-semibold", children: currentImage.name }),
+              hasMultipleImages && /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground", children: [
+                currentIndex + 1,
+                " of ",
+                images.length
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "ghost",
+                  size: "sm",
+                  title: "Zoom out (-)",
+                  disabled: scale <= MIN_SCALE,
+                  className: "h-10 w-10 rounded-full bg-black/30 p-0 !text-white hover:bg-gray-500/50 disabled:opacity-40",
+                  onClick: onZoomOut,
+                  children: /* @__PURE__ */ jsx(ZoomOut, { className: "h-5 w-5" })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "ghost",
+                  size: "sm",
+                  title: "Zoom in (+)",
+                  disabled: scale >= MAX_SCALE,
+                  className: "h-10 w-10 rounded-full bg-black/30 p-0 !text-white hover:bg-gray-500/50 disabled:opacity-40",
+                  onClick: onZoomIn,
+                  children: /* @__PURE__ */ jsx(ZoomIn, { className: "h-5 w-5" })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "ghost",
+                  size: "sm",
+                  title: "Rotate left",
+                  className: "h-10 w-10 rounded-full bg-black/30 p-0 !text-white hover:bg-gray-500/50",
+                  onClick: onRotateLeft,
+                  children: /* @__PURE__ */ jsx(RotateCcw, { className: "h-5 w-5" })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "ghost",
+                  size: "sm",
+                  title: "Rotate right (R)",
+                  className: "h-10 w-10 rounded-full bg-black/30 p-0 !text-white hover:bg-gray-500/50",
+                  onClick: onRotateRight,
+                  children: /* @__PURE__ */ jsx(RotateCw, { className: "h-5 w-5" })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "ghost",
+                  size: "sm",
+                  title: "Reset (0)",
+                  className: "h-10 w-10 rounded-full bg-black/30 p-0 !text-white hover:bg-gray-500/50",
+                  onClick: resetTransform,
+                  children: /* @__PURE__ */ jsx(RefreshCw, { className: "h-5 w-5" })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "ghost",
+                  size: "sm",
+                  title: "Download",
+                  className: "h-10 w-10 rounded-full bg-black/30 p-0 !text-white hover:bg-gray-500/50",
+                  onClick: handleDownload,
+                  children: /* @__PURE__ */ jsx(Download, { className: "h-5 w-5" })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "ghost",
+                  size: "sm",
+                  title: "Close (Esc)",
+                  className: "h-10 w-10 rounded-full bg-black/30 p-0 !text-white hover:bg-gray-500/50",
+                  onClick: onClose,
+                  children: /* @__PURE__ */ jsx(X, { className: "h-5 w-5" })
+                }
+              )
+            ] })
+          ] }) }),
+          hasMultipleImages && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "ghost",
+                size: "sm",
+                className: "absolute left-4 top-1/2 z-20 h-12 w-12 -translate-y-1/2 transform rounded-full bg-black/30 p-0 !text-white hover:bg-gray-500/50",
+                onClick: onPrev,
+                children: /* @__PURE__ */ jsx(ChevronLeft, { className: "h-6 w-6" })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "ghost",
+                size: "sm",
+                className: "absolute right-4 top-1/2 z-20 h-12 w-12 -translate-y-1/2 transform rounded-full bg-black/30 p-0 !text-white hover:bg-gray-500/50",
+                onClick: onNext,
+                children: /* @__PURE__ */ jsx(ChevronRight, { className: "h-6 w-6" })
+              }
+            )
+          ] }),
+          currentImage.loading ? /* @__PURE__ */ jsx("div", { className: "z-10 flex h-[35vh] w-[35vw] items-center justify-center rounded-lg bg-black/20", children: /* @__PURE__ */ jsx("div", { className: "h-10 w-10 animate-spin rounded-full border-4 border-white/30 border-t-card" }) }) : /* @__PURE__ */ jsx(
+            "img",
+            {
+              style: { transform: `scale(${scale}) rotate(${rotation}deg)` },
+              onWheel: handleWheel,
+              src: currentImage.url || placeholderSvg,
+              alt: currentImage.name,
+              onClick: (e) => e.stopPropagation(),
+              className: "z-10 max-h-[35vh] max-w-[35vw] rounded-lg object-contain shadow-2xl transition-transform duration-300"
+            }
+          ),
+          hasMultipleImages && /* @__PURE__ */ jsx("div", { className: "absolute bottom-0 left-0 right-0 z-20 bg-gradient-to-t from-black/50 to-transparent p-4", children: /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx("div", { className: "flex max-w-full space-x-2 overflow-x-auto p-3", children: images.map((image, index) => /* @__PURE__ */ jsxs(
+            "button",
+            {
+              className: `relative h-16 w-16 flex-shrink-0 overflow-hidden rounded-lg border-2 transition-all duration-200 ${index === currentIndex ? "scale-110 border-card shadow-lg" : "border-transparent opacity-70 hover:border-border hover:opacity-100"}`,
+              onClick: () => onSelectImage(index),
+              children: [
+                image.loading ? /* @__PURE__ */ jsx("div", { className: "flex h-full w-full items-center justify-center bg-black/20", children: /* @__PURE__ */ jsx("div", { className: "h-4 w-4 animate-spin rounded-full border-2 border-white/30 border-t-card" }) }) : /* @__PURE__ */ jsx(
+                  "img",
+                  {
+                    src: image.url || placeholderSvg,
+                    alt: image.name,
+                    className: "h-full w-full object-cover"
+                  }
+                ),
+                index === currentIndex && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-white/20", children: /* @__PURE__ */ jsx("div", { className: "h-2 w-2 rounded-full bg-card" }) })
+              ]
+            },
+            index
+          )) }) }) })
+        ]
+      }
+    ) }) }),
+    document.body
+  );
+}
+export {
+  GlobalPreviewImage as default
+};

package/components/custom/field-file-upload/preview-list-file.js

@@ -0,0 +1,134 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import { Download, X } from "lucide-react";
+import { cn } from "../../../lib/utils.js";
+import {
+  getIconForContentType,
+  mimeTypes,
+  getMimeType,
+  checkMimeType,
+  getColor
+} from "../previews/file-preview.js";
+import { useTranslation } from "react-i18next";
+const PreviewListFiles = ({
+  datas,
+  removeFile,
+  maxFileShowing,
+  isRemoveFiles = true,
+  isDownloadFiles = true,
+  classNameItem,
+  ...props
+}) => {
+  const { t } = useTranslation();
+  const [fileResults, setFileResults] = useState([]);
+  const removeFiles = (index) => {
+    URL.revokeObjectURL(datas[index].preview);
+    const updated = datas.filter((_, i) => i !== index);
+    setFileResults(updated);
+    removeFile(updated);
+  };
+  useEffect(() => {
+    const processFiles = async () => {
+      let results = datas;
+      if (maxFileShowing) {
+        results = datas.slice(0, maxFileShowing);
+      }
+      const processed = await Promise.all(
+        results.map(async (value) => {
+          const mimeType = await genMimeType(value.file.name, value.preview);
+          return { ...value, mimeType };
+        })
+      );
+      setFileResults(processed);
+    };
+    if (datas?.length > 0) {
+      processFiles();
+    } else {
+      setFileResults([]);
+    }
+  }, [datas, maxFileShowing]);
+  const genMimeType = async (fileName, preview) => {
+    const extension = fileName.split(".").pop().toLowerCase();
+    if (mimeTypes[extension]) {
+      return getMimeType(extension);
+    }
+    return await checkMimeType(preview);
+  };
+  return /* @__PURE__ */ jsx("div", { className: "!mt-1", children: fileResults.length > 0 && /* @__PURE__ */ jsxs("div", { className: cn("space-y-2", maxFileShowing && "flex items-center"), children: [
+    fileResults.map((it, index) => /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "flex min-w-0 items-center justify-between rounded-md border bg-card p-2",
+          it.error ? "border-destructive" : "border-border-subtle",
+          classNameItem
+        ),
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-grow items-center gap-2 overflow-hidden", children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "flex h-6 w-6 shrink-0 items-center justify-center rounded-full",
+                  getColor(it.mimeType, it.file.name)
+                ),
+                children: getIconForContentType(it.mimeType, "h-4 w-4")
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  "overflow-hidden truncate text-xs text-foreground",
+                  props.classNameTitle
+                ),
+                title: it.file.name,
+                children: decodeURIComponent(it.file.name)
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "ml-1 flex shrink-0 items-center gap-2", children: [
+            isDownloadFiles && /* @__PURE__ */ jsx(
+              "a",
+              {
+                href: it.preview,
+                download: it.file.name,
+                className: "inline-flex items-center gap-1 text-xs text-primary transition-colors hover:text-primary",
+                "aria-label": t("common:action.downloadNamed", {
+                  name: it.file.name,
+                  defaultValue: "T\u1EA3i v\u1EC1 {name}"
+                }),
+                target: "_blank",
+                rel: "noopener noreferrer",
+                children: /* @__PURE__ */ jsx(Download, { className: "h-3 w-3" })
+              }
+            ),
+            isRemoveFiles && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                onClick: () => removeFiles(index),
+                className: "text-destructive transition-colors hover:text-destructive",
+                "aria-label": t("common:action.deleteNamed", {
+                  name: it.file.name,
+                  defaultValue: "X\xF3a {name}"
+                }),
+                children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
+              }
+            )
+          ] }),
+          it.error && /* @__PURE__ */ jsx("span", { className: "ml-2 text-xs text-destructive", children: it.error })
+        ]
+      },
+      (it.id || "_map_file") + index
+    )),
+    maxFileShowing && maxFileShowing > 0 && datas.length > maxFileShowing && /* @__PURE__ */ jsxs("span", { className: "!m-0 ml-3 whitespace-nowrap font-medium text-muted-foreground", children: [
+      "+",
+      datas.length - maxFileShowing
+    ] })
+  ] }) });
+};
+var preview_list_file_default = PreviewListFiles;
+export {
+  preview_list_file_default as default
+};