@geekapps/silo-elements-nextjs 0.0.8 → 0.0.9

package/dist/index.js

@@ -1,6 +1,6 @@
 import React, { useState, useRef, useCallback, useMemo, useEffect } from 'react';
-import { useUpload } from '@geekapps/silo-nextjs';
-export { SiloProvider, useFileStatus, useSignedUrl, useSiloClient, useUpload } from '@geekapps/silo-nextjs';
+import { useMultipartUpload, useBatchUpload, useSignedUrl } from '@geekapps/silo-nextjs';
+export { SiloProvider, useBatchUpload, useFileStatus, useMultipartUpload, useSignedUrl, useSiloClient } from '@geekapps/silo-nextjs';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import gsap from 'gsap';
 import { Play, Pause, FastForward, VolumeX, Volume2, AudioLines, Captions, Settings, Minimize, Maximize } from 'lucide-react';
@@ -177,10 +177,21 @@ function formatBytes(bytes) {
   if (bytes < 1024 ** 3) return `${(bytes / 1024 ** 2).toFixed(1)} MB`;
   return `${(bytes / 1024 ** 3).toFixed(2)} GB`;
 }
+function getFileIcon(mimeType) {
+  if (mimeType.startsWith("image/")) return "\u{1F5BC}\uFE0F";
+  if (mimeType.startsWith("video/")) return "\u{1F3AC}";
+  if (mimeType.startsWith("audio/")) return "\u{1F3B5}";
+  if (mimeType === "application/pdf") return "\u{1F4C4}";
+  if (mimeType.includes("spreadsheet") || mimeType.includes("excel")) return "\u{1F4CA}";
+  if (mimeType.includes("presentation") || mimeType.includes("powerpoint")) return "\u{1F4D1}";
+  if (mimeType.includes("word") || mimeType.includes("document")) return "\u{1F4DD}";
+  if (mimeType.includes("zip") || mimeType.includes("tar") || mimeType.includes("gzip")) return "\u{1F4E6}";
+  return "\u{1F4CE}";
+}
 function ImageUploader({
   bucket,
   expiresIn,
-  private: isPrivate = true,
+  visibility = "private",
   onUpload,
   onError,
   className = "",
@@ -189,6 +200,7 @@ function ImageUploader({
   maxSize,
   accept = "image/*",
   showPreview = true,
+  image,
   theme,
   renderIcon,
   renderProgress,
@@ -196,28 +208,25 @@ function ImageUploader({
   renderError,
   children
 }) {
-  const uploadOpts = { private: isPrivate, ...bucket !== void 0 && { bucket }, ...expiresIn !== void 0 && { expiresIn } };
-  const { state, upload, reset } = useUpload(uploadOpts);
+  const { state, upload, pause, resume, abort, reset } = useMultipartUpload(bucket);
   const [preview, setPreview] = useState(null);
   const t = resolveTheme(theme);
   const vars = themeToVars(t);
-  const handleFiles = useCallback(
-    async (files) => {
-      const file = files[0];
-      if (!file) return;
-      if (showPreview) {
-        const url = URL.createObjectURL(file);
-        setPreview(url);
-      }
-      try {
-        const result = await upload(file);
-        onUpload?.(result);
-      } catch (err) {
-        onError?.(err instanceof Error ? err : new Error(String(err)));
-      }
-    },
-    [upload, onUpload, onError, showPreview]
-  );
+  const handleFiles = useCallback(async (files) => {
+    const file = files[0];
+    if (!file) return;
+    if (showPreview) setPreview(URL.createObjectURL(file));
+    try {
+      const result = await upload(file, {
+        ...bucket !== void 0 && { bucket },
+        visibility,
+        ...image && { image }
+      });
+      if (result) onUpload?.(result);
+    } catch (err) {
+      onError?.(err instanceof Error ? err : new Error(String(err)));
+    }
+  }, [upload, bucket, visibility, image, onUpload, onError, showPreview]);
   const containerStyle = {
     ...vars,
     display: "flex",
@@ -227,12 +236,11 @@ function ImageUploader({
     fontFamily: "var(--silo-font)",
     ...style
   };
-  if (state.status === "error" && renderError) {
-    return /* @__PURE__ */ jsx("div", { style: containerStyle, children: renderError(state.error, reset) });
-  }
-  if (state.status === "done" && renderSuccess) {
-    return /* @__PURE__ */ jsx("div", { style: containerStyle, children: renderSuccess(state.result) });
-  }
+  const isUploading = state.status === "uploading" || state.status === "preparing" || state.status === "completing";
+  const progress = state.status === "uploading" ? state.progress : state.status === "completing" ? 99 : 0;
+  const isPaused = state.status === "idle" && preview !== null;
+  if (state.status === "error" && renderError) return /* @__PURE__ */ jsx("div", { style: containerStyle, children: renderError(state.error, reset) });
+  if (state.status === "done" && renderSuccess) return /* @__PURE__ */ jsx("div", { style: containerStyle, children: renderSuccess(state.result) });
   return /* @__PURE__ */ jsxs("div", { className: `silo-image-uploader${className ? ` ${className}` : ""}`, style: containerStyle, children: [
     /* @__PURE__ */ jsx(
       DropZone,
@@ -241,102 +249,69 @@ function ImageUploader({
         ...maxSize !== void 0 && { maxSize },
         ...onError !== void 0 && { onError },
         ...theme !== void 0 && { theme },
-        disabled: disabled || state.status === "uploading",
+        disabled: disabled || isUploading,
         onFiles: handleFiles,
         style: { padding: "32px 24px", textAlign: "center" },
-        children: preview && state.status !== "uploading" ? /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }, children: [
-          /* @__PURE__ */ jsx(
-            "img",
-            {
-              src: preview,
-              alt: "Preview",
-              style: {
-                maxWidth: "100%",
-                maxHeight: "200px",
-                borderRadius: "8px",
-                objectFit: "contain"
-              }
-            }
-          ),
-          /* @__PURE__ */ jsx("span", { style: { fontSize: "12px", color: "var(--silo-text-muted)" }, children: "Click or drag to replace" })
+        children: preview && !isUploading ? /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }, children: [
+          /* @__PURE__ */ jsx("img", { src: preview, alt: "Preview", style: { maxWidth: "100%", maxHeight: "200px", borderRadius: "8px", objectFit: "contain" } }),
+          /* @__PURE__ */ jsx("span", { style: { fontSize: "12px", color: "var(--silo-text-muted)" }, children: "Clique ou arraste para substituir" })
         ] }) : /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }, children: [
           renderIcon ? renderIcon() : /* @__PURE__ */ jsx("svg", { width: "40", height: "40", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", style: { color: "var(--silo-text-muted)", opacity: 0.6 }, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" }) }),
           children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx("span", { style: { fontWeight: 600, color: "var(--silo-text)" }, children: "Drop image here" }),
-            /* @__PURE__ */ jsx("span", { style: { fontSize: "13px", color: "var(--silo-text-muted)" }, children: "or click to browse" }),
+            /* @__PURE__ */ jsx("span", { style: { fontWeight: 600, color: "var(--silo-text)" }, children: "Arraste a imagem aqui" }),
+            /* @__PURE__ */ jsx("span", { style: { fontSize: "13px", color: "var(--silo-text-muted)" }, children: "ou clique para selecionar" }),
             maxSize && /* @__PURE__ */ jsxs("span", { style: { fontSize: "12px", color: "var(--silo-text-muted)" }, children: [
-              "Max ",
+              "M\xE1x ",
               formatBytes(maxSize)
             ] })
           ] })
         ] })
       }
     ),
-    state.status === "uploading" && /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: "6px" }, children: renderProgress ? renderProgress(state.progress) : /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", fontSize: "13px", color: "var(--silo-text-muted)" }, children: [
-        /* @__PURE__ */ jsx("span", { children: "Uploading\u2026" }),
-        /* @__PURE__ */ jsxs("span", { children: [
-          state.progress,
-          "%"
+    isUploading && /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: "6px" }, children: renderProgress ? renderProgress(progress) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", fontSize: "13px", color: "var(--silo-text-muted)" }, children: [
+        /* @__PURE__ */ jsx("span", { children: state.status === "completing" ? "Finalizando\u2026" : state.status === "preparing" ? "Preparando\u2026" : `Parte ${state.part} de ${state.totalParts}` }),
+        /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "8px", alignItems: "center" }, children: [
+          /* @__PURE__ */ jsxs("span", { children: [
+            progress,
+            "%"
+          ] }),
+          /* @__PURE__ */ jsx("button", { onClick: pause, style: { background: "none", border: "none", cursor: "pointer", fontSize: "12px", color: "var(--silo-text-muted)" }, children: "Pausar" })
         ] })
       ] }),
-      /* @__PURE__ */ jsx(ProgressBar, { progress: state.progress })
+      /* @__PURE__ */ jsx(ProgressBar, { progress })
     ] }) }),
-    state.status === "done" && !renderSuccess && /* @__PURE__ */ jsxs("div", { style: {
-      display: "flex",
-      alignItems: "center",
-      gap: "8px",
-      padding: "10px 14px",
-      borderRadius: "8px",
-      backgroundColor: "rgba(34,197,94,0.1)",
-      color: "var(--silo-success, #22c55e)",
-      fontSize: "14px"
-    }, children: [
-      /* @__PURE__ */ jsx("svg", { width: "18", height: "18", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }),
-      /* @__PURE__ */ jsx("span", { children: "Upload complete" }),
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          onClick: (e) => {
-            e.stopPropagation();
-            reset();
-            setPreview(null);
-          },
-          style: { marginLeft: "auto", background: "none", border: "none", cursor: "pointer", fontSize: "12px", color: "var(--silo-text-muted)" },
-          children: "Upload another"
-        }
-      )
+    isPaused && /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "8px" }, children: [
+      /* @__PURE__ */ jsx("button", { onClick: () => resume({ ...bucket !== void 0 && { bucket }, visibility, ...image && { image } }), style: { flex: 1, padding: "8px", borderRadius: "6px", border: "none", backgroundColor: "#10b981", color: "#fff", fontSize: "13px", fontWeight: 600, cursor: "pointer" }, children: "Retomar upload" }),
+      /* @__PURE__ */ jsx("button", { onClick: () => {
+        abort();
+        setPreview(null);
+      }, style: { padding: "8px 12px", borderRadius: "6px", border: "1px solid #e2e8f0", background: "#f8fafc", fontSize: "13px", cursor: "pointer", color: "var(--silo-text-muted)" }, children: "Cancelar" })
     ] }),
-    state.status === "error" && !renderError && /* @__PURE__ */ jsxs("div", { style: {
-      display: "flex",
-      alignItems: "center",
-      gap: "8px",
-      padding: "10px 14px",
-      borderRadius: "8px",
-      backgroundColor: "rgba(239,68,68,0.1)",
-      color: "var(--silo-error, #ef4444)",
-      fontSize: "14px"
-    }, children: [
-      /* @__PURE__ */ jsx("svg", { width: "18", height: "18", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
+    state.status === "done" && !renderSuccess && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "10px", padding: "10px 14px", borderRadius: "8px", backgroundColor: "rgba(34,197,94,0.08)", border: "1px solid rgba(34,197,94,0.2)", fontSize: "14px" }, children: [
+      /* @__PURE__ */ jsx("svg", { width: "18", height: "18", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", style: { color: "#22c55e", flexShrink: 0 }, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }),
+      /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
+        /* @__PURE__ */ jsx("div", { style: { fontWeight: 500, color: "var(--silo-text)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: state.result.key }),
+        /* @__PURE__ */ jsx("div", { style: { fontSize: "12px", color: "var(--silo-text-muted)" }, children: formatBytes(state.result.size) })
+      ] }),
+      /* @__PURE__ */ jsx("button", { onClick: () => {
+        reset();
+        setPreview(null);
+      }, style: { background: "none", border: "none", cursor: "pointer", fontSize: "12px", color: "var(--silo-text-muted)", flexShrink: 0 }, children: "Enviar outro" })
+    ] }),
+    state.status === "error" && !renderError && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px", padding: "10px 14px", borderRadius: "8px", backgroundColor: "rgba(239,68,68,0.1)", color: "var(--silo-error, #ef4444)", fontSize: "14px" }, children: [
       /* @__PURE__ */ jsx("span", { children: state.error.message }),
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          onClick: (e) => {
-            e.stopPropagation();
-            reset();
-          },
-          style: { marginLeft: "auto", background: "none", border: "none", cursor: "pointer", fontSize: "12px", color: "var(--silo-text-muted)" },
-          children: "Retry"
-        }
-      )
+      /* @__PURE__ */ jsx("button", { onClick: () => {
+        reset();
+        setPreview(null);
+      }, style: { marginLeft: "auto", background: "none", border: "none", cursor: "pointer", fontSize: "12px" }, children: "Tentar novamente" })
     ] })
   ] });
 }
 function VideoUploader({
   bucket,
   expiresIn,
-  private: isPrivate = true,
+  visibility = "private",
   onUpload,
   onError,
   className = "",
@@ -345,6 +320,7 @@ function VideoUploader({
   maxSize,
   accept = "video/*",
   showPreview = true,
+  video,
   theme,
   renderIcon,
   renderProgress,
@@ -352,28 +328,25 @@ function VideoUploader({
   renderError,
   children
 }) {
-  const uploadOpts = { private: isPrivate, ...bucket !== void 0 && { bucket }, ...expiresIn !== void 0 && { expiresIn } };
-  const { state, upload, reset } = useUpload(uploadOpts);
+  const { state, upload, pause, resume, abort, reset } = useMultipartUpload(bucket);
   const [preview, setPreview] = useState(null);
   const t = resolveTheme(theme);
   const vars = themeToVars(t);
-  const handleFiles = useCallback(
-    async (files) => {
-      const file = files[0];
-      if (!file) return;
-      if (showPreview) {
-        const url = URL.createObjectURL(file);
-        setPreview(url);
-      }
-      try {
-        const result = await upload(file);
-        onUpload?.(result);
-      } catch (err) {
-        onError?.(err instanceof Error ? err : new Error(String(err)));
-      }
-    },
-    [upload, onUpload, onError, showPreview]
-  );
+  const handleFiles = useCallback(async (files) => {
+    const file = files[0];
+    if (!file) return;
+    if (showPreview) setPreview(URL.createObjectURL(file));
+    try {
+      const result = await upload(file, {
+        ...bucket !== void 0 && { bucket },
+        visibility,
+        ...video && { video }
+      });
+      if (result) onUpload?.(result);
+    } catch (err) {
+      onError?.(err instanceof Error ? err : new Error(String(err)));
+    }
+  }, [upload, bucket, visibility, video, onUpload, onError, showPreview]);
   const containerStyle = {
     ...vars,
     display: "flex",
@@ -383,12 +356,11 @@ function VideoUploader({
     fontFamily: "var(--silo-font)",
     ...style
   };
-  if (state.status === "error" && renderError) {
-    return /* @__PURE__ */ jsx("div", { style: containerStyle, children: renderError(state.error, reset) });
-  }
-  if (state.status === "done" && renderSuccess) {
-    return /* @__PURE__ */ jsx("div", { style: containerStyle, children: renderSuccess(state.result) });
-  }
+  const isUploading = state.status === "uploading" || state.status === "preparing" || state.status === "completing";
+  const progress = state.status === "uploading" ? state.progress : state.status === "completing" ? 99 : 0;
+  const isPaused = state.status === "idle" && preview !== null;
+  if (state.status === "error" && renderError) return /* @__PURE__ */ jsx("div", { style: containerStyle, children: renderError(state.error, reset) });
+  if (state.status === "done" && renderSuccess) return /* @__PURE__ */ jsx("div", { style: containerStyle, children: renderSuccess(state.result) });
   return /* @__PURE__ */ jsxs("div", { className: `silo-video-uploader${className ? ` ${className}` : ""}`, style: containerStyle, children: [
     /* @__PURE__ */ jsx(
       DropZone,
@@ -397,69 +369,68 @@ function VideoUploader({
         ...maxSize !== void 0 && { maxSize },
         ...onError !== void 0 && { onError },
         ...theme !== void 0 && { theme },
-        disabled: disabled || state.status === "uploading",
+        disabled: disabled || isUploading,
         onFiles: handleFiles,
         style: { padding: "32px 24px", textAlign: "center" },
-        children: preview && state.status !== "uploading" ? /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }, children: [
-          /* @__PURE__ */ jsx(
-            "video",
-            {
-              src: preview,
-              style: { maxWidth: "100%", maxHeight: "180px", borderRadius: "8px" },
-              controls: false,
-              muted: true,
-              playsInline: true
-            }
-          ),
-          /* @__PURE__ */ jsx("span", { style: { fontSize: "12px", color: "var(--silo-text-muted)" }, children: "Click or drag to replace" })
+        children: preview && !isUploading ? /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }, children: [
+          /* @__PURE__ */ jsx("video", { src: preview, style: { maxWidth: "100%", maxHeight: "180px", borderRadius: "8px" }, controls: false, muted: true, playsInline: true }),
+          /* @__PURE__ */ jsx("span", { style: { fontSize: "12px", color: "var(--silo-text-muted)" }, children: "Clique ou arraste para substituir" })
         ] }) : /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }, children: [
           renderIcon ? renderIcon() : /* @__PURE__ */ jsx("svg", { width: "40", height: "40", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", style: { color: "var(--silo-text-muted)", opacity: 0.6 }, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M15 10l4.553-2.069A1 1 0 0121 8.878v6.244a1 1 0 01-1.447.894L15 14M3 8a2 2 0 012-2h8a2 2 0 012 2v8a2 2 0 01-2 2H5a2 2 0 01-2-2V8z" }) }),
           children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx("span", { style: { fontWeight: 600, color: "var(--silo-text)" }, children: "Drop video here" }),
-            /* @__PURE__ */ jsx("span", { style: { fontSize: "13px", color: "var(--silo-text-muted)" }, children: "or click to browse" }),
+            /* @__PURE__ */ jsx("span", { style: { fontWeight: 600, color: "var(--silo-text)" }, children: "Arraste o v\xEDdeo aqui" }),
+            /* @__PURE__ */ jsx("span", { style: { fontSize: "13px", color: "var(--silo-text-muted)" }, children: "ou clique para selecionar" }),
             /* @__PURE__ */ jsxs("span", { style: { fontSize: "12px", color: "var(--silo-text-muted)" }, children: [
               "MP4, MOV, MKV, WebM",
-              maxSize ? ` \xB7 Max ${formatBytes(maxSize)}` : ""
+              maxSize ? ` \xB7 M\xE1x ${formatBytes(maxSize)}` : ""
             ] })
           ] })
         ] })
       }
     ),
-    state.status === "uploading" && /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: "6px" }, children: renderProgress ? renderProgress(state.progress) : /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", fontSize: "13px", color: "var(--silo-text-muted)" }, children: [
-        /* @__PURE__ */ jsx("span", { children: "Uploading video\u2026" }),
-        /* @__PURE__ */ jsxs("span", { children: [
-          state.progress,
-          "%"
+    isUploading && /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: "6px" }, children: renderProgress ? renderProgress(progress) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", fontSize: "13px", color: "var(--silo-text-muted)" }, children: [
+        /* @__PURE__ */ jsx("span", { children: state.status === "completing" ? "Finalizando\u2026" : state.status === "preparing" ? "Preparando\u2026" : `Parte ${state.part} de ${state.totalParts}` }),
+        /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "8px", alignItems: "center" }, children: [
+          /* @__PURE__ */ jsxs("span", { children: [
+            progress,
+            "%"
+          ] }),
+          /* @__PURE__ */ jsx("button", { onClick: pause, style: { background: "none", border: "none", cursor: "pointer", fontSize: "12px", color: "var(--silo-text-muted)" }, children: "Pausar" })
         ] })
       ] }),
-      /* @__PURE__ */ jsx(ProgressBar, { progress: state.progress }),
-      /* @__PURE__ */ jsx("span", { style: { fontSize: "12px", color: "var(--silo-text-muted)" }, children: "Processing will start after upload completes" })
+      /* @__PURE__ */ jsx(ProgressBar, { progress }),
+      /* @__PURE__ */ jsx("span", { style: { fontSize: "12px", color: "var(--silo-text-muted)" }, children: "O processamento inicia ap\xF3s o upload" })
     ] }) }),
+    isPaused && /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "8px" }, children: [
+      /* @__PURE__ */ jsx("button", { onClick: () => resume({ ...bucket !== void 0 && { bucket }, visibility, ...video && { video } }), style: { flex: 1, padding: "8px", borderRadius: "6px", border: "none", backgroundColor: "#10b981", color: "#fff", fontSize: "13px", fontWeight: 600, cursor: "pointer" }, children: "Retomar upload" }),
+      /* @__PURE__ */ jsx("button", { onClick: () => {
+        abort();
+        setPreview(null);
+      }, style: { padding: "8px 12px", borderRadius: "6px", border: "1px solid #e2e8f0", background: "#f8fafc", fontSize: "13px", cursor: "pointer", color: "var(--silo-text-muted)" }, children: "Cancelar" })
+    ] }),
     state.status === "done" && !renderSuccess && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px", padding: "10px 14px", borderRadius: "8px", backgroundColor: "rgba(34,197,94,0.1)", color: "var(--silo-success, #22c55e)", fontSize: "14px" }, children: [
       /* @__PURE__ */ jsx("svg", { width: "18", height: "18", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }),
-      /* @__PURE__ */ jsx("span", { children: "Video uploaded \u2014 processing in background" }),
-      /* @__PURE__ */ jsx("button", { onClick: (e) => {
-        e.stopPropagation();
+      /* @__PURE__ */ jsx("span", { children: "V\xEDdeo enviado \u2014 processando em segundo plano" }),
+      /* @__PURE__ */ jsx("button", { onClick: () => {
         reset();
         setPreview(null);
-      }, style: { marginLeft: "auto", background: "none", border: "none", cursor: "pointer", fontSize: "12px", color: "var(--silo-text-muted)" }, children: "Upload another" })
+      }, style: { marginLeft: "auto", background: "none", border: "none", cursor: "pointer", fontSize: "12px", color: "var(--silo-text-muted)" }, children: "Enviar outro" })
     ] }),
     state.status === "error" && !renderError && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px", padding: "10px 14px", borderRadius: "8px", backgroundColor: "rgba(239,68,68,0.1)", color: "var(--silo-error, #ef4444)", fontSize: "14px" }, children: [
-      /* @__PURE__ */ jsx("svg", { width: "18", height: "18", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) }),
       /* @__PURE__ */ jsx("span", { children: state.error.message }),
-      /* @__PURE__ */ jsx("button", { onClick: (e) => {
-        e.stopPropagation();
+      /* @__PURE__ */ jsx("button", { onClick: () => {
         reset();
-      }, style: { marginLeft: "auto", background: "none", border: "none", cursor: "pointer", fontSize: "12px", color: "var(--silo-text-muted)" }, children: "Retry" })
+        setPreview(null);
+      }, style: { marginLeft: "auto", background: "none", border: "none", cursor: "pointer", fontSize: "12px" }, children: "Tentar novamente" })
     ] })
   ] });
 }
 function FileUploader({
   bucket,
-  expiresIn,
-  private: isPrivate = true,
+  visibility = "private",
   onUpload,
+  onBatchUpload,
   onError,
   className = "",
   style,
@@ -467,6 +438,8 @@ function FileUploader({
   maxSize,
   accept,
   multiple = false,
+  image,
+  video,
   theme,
   renderIcon,
   renderProgress,
@@ -474,23 +447,8 @@ function FileUploader({
   renderError,
   children
 }) {
-  const uploadOpts = { private: isPrivate, ...bucket !== void 0 && { bucket }, ...expiresIn !== void 0 && { expiresIn } };
-  const { state, upload, reset } = useUpload(uploadOpts);
   const t = resolveTheme(theme);
   const vars = themeToVars(t);
-  const handleFiles = useCallback(
-    async (files) => {
-      const file = files[0];
-      if (!file) return;
-      try {
-        const result = await upload(file);
-        onUpload?.(result);
-      } catch (err) {
-        onError?.(err instanceof Error ? err : new Error(String(err)));
-      }
-    },
-    [upload, onUpload, onError]
-  );
   const containerStyle = {
     ...vars,
     display: "flex",
@@ -500,14 +458,39 @@ function FileUploader({
     fontFamily: "var(--silo-font)",
     ...style
   };
-  if (state.status === "error" && renderError) {
-    return /* @__PURE__ */ jsx("div", { style: containerStyle, children: renderError(state.error, reset) });
-  }
-  if (state.status === "done" && renderSuccess) {
-    return /* @__PURE__ */ jsx("div", { style: containerStyle, children: renderSuccess(state.result) });
-  }
+  const single = useMultipartUpload(bucket);
+  const batch = useBatchUpload();
+  const handleFiles = useCallback(async (files) => {
+    if (multiple && files.length > 1) {
+      try {
+        const opts = { ...bucket !== void 0 && { bucket }, visibility, ...image && { image }, ...video && { video } };
+        const results = await batch.upload(files, opts);
+        onBatchUpload?.(results);
+        results.forEach((r) => onUpload?.(r));
+      } catch (err) {
+        onError?.(err instanceof Error ? err : new Error(String(err)));
+      }
+    } else {
+      const file = files[0];
+      if (!file) return;
+      try {
+        const opts = { ...bucket !== void 0 && { bucket }, visibility, ...image && { image }, ...video && { video } };
+        const result = await single.upload(file, opts);
+        if (result) onUpload?.(result);
+      } catch (err) {
+        onError?.(err instanceof Error ? err : new Error(String(err)));
+      }
+    }
+  }, [single, batch, multiple, bucket, visibility, image, video, onUpload, onBatchUpload, onError]);
+  const isBatch = batch.state.files.length > 0;
+  const isSingleUploading = single.state.status === "uploading" || single.state.status === "preparing" || single.state.status === "completing";
+  const isBatchUploading = batch.state.status === "uploading" || batch.state.status === "preparing";
+  const isUploading = isSingleUploading || isBatchUploading;
+  const singleProgress = single.state.status === "uploading" ? single.state.progress : single.state.status === "completing" ? 99 : 0;
+  if (single.state.status === "error" && renderError) return /* @__PURE__ */ jsx("div", { style: containerStyle, children: renderError(single.state.error, single.reset) });
+  if (single.state.status === "done" && renderSuccess) return /* @__PURE__ */ jsx("div", { style: containerStyle, children: renderSuccess(single.state.result) });
   return /* @__PURE__ */ jsxs("div", { className: `silo-file-uploader${className ? ` ${className}` : ""}`, style: containerStyle, children: [
-    /* @__PURE__ */ jsx(
+    !isBatch && /* @__PURE__ */ jsx(
       DropZone,
       {
         ...accept !== void 0 && { accept },
@@ -515,56 +498,89 @@ function FileUploader({
         ...onError !== void 0 && { onError },
         ...theme !== void 0 && { theme },
         multiple,
-        disabled: disabled || state.status === "uploading",
+        disabled: disabled || isUploading,
         onFiles: handleFiles,
         style: { padding: "28px 24px", textAlign: "center" },
         children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: "8px" }, children: [
           renderIcon ? renderIcon() : /* @__PURE__ */ jsx("svg", { width: "40", height: "40", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", style: { color: "var(--silo-text-muted)", opacity: 0.6 }, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M9 13h6m-3-3v6m5 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" }) }),
           children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx("span", { style: { fontWeight: 600, color: "var(--silo-text)" }, children: multiple ? "Drop files here" : "Drop a file here" }),
-            /* @__PURE__ */ jsx("span", { style: { fontSize: "13px", color: "var(--silo-text-muted)" }, children: "or click to browse" }),
+            /* @__PURE__ */ jsx("span", { style: { fontWeight: 600, color: "var(--silo-text)" }, children: multiple ? "Arraste arquivos aqui" : "Arraste o arquivo aqui" }),
+            /* @__PURE__ */ jsx("span", { style: { fontSize: "13px", color: "var(--silo-text-muted)" }, children: "ou clique para selecionar" }),
             maxSize && /* @__PURE__ */ jsxs("span", { style: { fontSize: "12px", color: "var(--silo-text-muted)" }, children: [
-              "Max ",
+              "M\xE1x ",
               formatBytes(maxSize)
             ] })
           ] })
         ] })
       }
     ),
-    state.status === "uploading" && /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: "6px" }, children: renderProgress ? renderProgress(state.progress) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    isSingleUploading && !isBatch && /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: "6px" }, children: renderProgress ? renderProgress(singleProgress) : /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", fontSize: "13px", color: "var(--silo-text-muted)" }, children: [
-        /* @__PURE__ */ jsx("span", { children: "Uploading\u2026" }),
+        /* @__PURE__ */ jsx("span", { children: single.state.status === "completing" ? "Finalizando\u2026" : single.state.status === "preparing" ? "Preparando\u2026" : `Parte ${single.state.part} de ${single.state.totalParts}` }),
         /* @__PURE__ */ jsxs("span", { children: [
-          state.progress,
+          singleProgress,
           "%"
         ] })
       ] }),
-      /* @__PURE__ */ jsx(ProgressBar, { progress: state.progress })
+      /* @__PURE__ */ jsx(ProgressBar, { progress: singleProgress })
     ] }) }),
-    state.status === "done" && !renderSuccess && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "10px", padding: "10px 14px", borderRadius: "8px", backgroundColor: "rgba(34,197,94,0.08)", border: "1px solid rgba(34,197,94,0.2)", fontSize: "14px" }, children: [
+    isBatch && /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: "8px" }, children: [
+      batch.state.files.map((f, i) => {
+        const st = f.status;
+        const p = st.status === "uploading" ? st.progress : st.status === "paused" ? st.progress : st.status === "done" ? 100 : st.status === "completing" ? 99 : 0;
+        const isPaused = st.status === "paused";
+        const isDone = st.status === "done";
+        const isErr = st.status === "error";
+        return /* @__PURE__ */ jsxs("div", { style: { padding: "10px 12px", backgroundColor: "var(--silo-bg)", borderRadius: "8px", border: "1px solid var(--silo-border)" }, children: [
+          /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px", marginBottom: isDone || isErr ? 0 : "6px" }, children: [
+            /* @__PURE__ */ jsx("span", { style: { fontSize: "16px" }, children: getFileIcon(f.file.type) }),
+            /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
+              /* @__PURE__ */ jsx("div", { style: { fontSize: "13px", fontWeight: 500, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: f.file.name }),
+              /* @__PURE__ */ jsx("div", { style: { fontSize: "11px", color: "var(--silo-text-muted)" }, children: formatBytes(f.file.size) })
+            ] }),
+            /* @__PURE__ */ jsx("span", { style: { fontSize: "11px", fontWeight: 600, color: isDone ? "#16a34a" : isErr ? "#ef4444" : isPaused ? "#f59e0b" : "var(--silo-accent)", flexShrink: 0 }, children: isDone ? "\u2713" : isErr ? "Erro" : isPaused ? `Pausado ${p}%` : `${p}%` }),
+            !isDone && !isErr && f.fileId && (isPaused ? /* @__PURE__ */ jsx("button", { onClick: () => batch.resumeFile(f.fileId), style: { fontSize: "11px", padding: "2px 8px", borderRadius: "4px", border: "none", backgroundColor: "#10b981", color: "#fff", cursor: "pointer" }, children: "Retomar" }) : st.status === "uploading" ? /* @__PURE__ */ jsx("button", { onClick: () => batch.pauseFile(f.fileId), style: { fontSize: "11px", padding: "2px 8px", borderRadius: "4px", border: "none", backgroundColor: "#f59e0b", color: "#fff", cursor: "pointer" }, children: "Pausar" }) : null)
+          ] }),
+          !isDone && !isErr && /* @__PURE__ */ jsx(ProgressBar, { progress: p })
+        ] }, i);
+      }),
+      /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "8px", marginTop: "4px" }, children: [
+        batch.state.status !== "done" && /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: isBatchUploading ? batch.pauseAll : batch.resumeAll,
+            style: { flex: 1, padding: "8px", borderRadius: "6px", border: "none", backgroundColor: isBatchUploading ? "#f59e0b" : "#10b981", color: "#fff", fontSize: "13px", fontWeight: 600, cursor: "pointer" },
+            children: isBatchUploading ? "Pausar tudo" : "Retomar tudo"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: batch.state.status === "done" ? batch.reset : batch.abortAll,
+            style: { padding: "8px 14px", borderRadius: "6px", border: "none", backgroundColor: batch.state.status === "done" ? "var(--silo-accent)" : "rgba(239,68,68,0.1)", color: batch.state.status === "done" ? "#fff" : "#ef4444", fontSize: "13px", fontWeight: 600, cursor: "pointer" },
+            children: batch.state.status === "done" ? "Novo upload" : "Cancelar"
+          }
+        )
+      ] })
+    ] }),
+    single.state.status === "done" && !renderSuccess && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "10px", padding: "10px 14px", borderRadius: "8px", backgroundColor: "rgba(34,197,94,0.08)", border: "1px solid rgba(34,197,94,0.2)", fontSize: "14px" }, children: [
       /* @__PURE__ */ jsx("svg", { width: "18", height: "18", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", style: { color: "#22c55e", flexShrink: 0 }, children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" }) }),
       /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
-        /* @__PURE__ */ jsx("div", { style: { fontWeight: 500, color: "var(--silo-text)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: state.result.key }),
-        /* @__PURE__ */ jsx("div", { style: { fontSize: "12px", color: "var(--silo-text-muted)" }, children: formatBytes(state.result.size) })
+        /* @__PURE__ */ jsx("div", { style: { fontWeight: 500, color: "var(--silo-text)", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: single.state.result.key }),
+        /* @__PURE__ */ jsx("div", { style: { fontSize: "12px", color: "var(--silo-text-muted)" }, children: formatBytes(single.state.result.size) })
       ] }),
-      /* @__PURE__ */ jsx("button", { onClick: (e) => {
-        e.stopPropagation();
-        reset();
-      }, style: { background: "none", border: "none", cursor: "pointer", fontSize: "12px", color: "var(--silo-text-muted)", flexShrink: 0 }, children: "Replace" })
+      /* @__PURE__ */ jsx("button", { onClick: single.reset, style: { background: "none", border: "none", cursor: "pointer", fontSize: "12px", color: "var(--silo-text-muted)", flexShrink: 0 }, children: "Enviar outro" })
     ] }),
-    state.status === "error" && !renderError && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px", padding: "10px 14px", borderRadius: "8px", backgroundColor: "rgba(239,68,68,0.1)", color: "var(--silo-error, #ef4444)", fontSize: "14px" }, children: [
-      /* @__PURE__ */ jsx("span", { children: state.error.message }),
-      /* @__PURE__ */ jsx("button", { onClick: (e) => {
-        e.stopPropagation();
-        reset();
-      }, style: { marginLeft: "auto", background: "none", border: "none", cursor: "pointer", fontSize: "12px" }, children: "Retry" })
+    single.state.status === "error" && !renderError && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px", padding: "10px 14px", borderRadius: "8px", backgroundColor: "rgba(239,68,68,0.1)", color: "var(--silo-error, #ef4444)", fontSize: "14px" }, children: [
+      /* @__PURE__ */ jsx("span", { children: single.state.error.message }),
+      /* @__PURE__ */ jsx("button", { onClick: single.reset, style: { marginLeft: "auto", background: "none", border: "none", cursor: "pointer", fontSize: "12px" }, children: "Tentar novamente" })
     ] })
   ] });
 }
 var TAB_LABELS = {
-  image: { label: "Image", icon: "\u{1F5BC}\uFE0F" },
-  video: { label: "Video", icon: "\u{1F3AC}" },
-  file: { label: "File", icon: "\u{1F4CE}" }
+  image: { label: "Imagem", icon: "\u{1F5BC}\uFE0F" },
+  video: { label: "V\xEDdeo", icon: "\u{1F3AC}" },
+  file: { label: "Arquivo", icon: "\u{1F4CE}" }
 };
 function MediaUploader({
   tabs = ["image", "video", "file"],
@@ -576,6 +592,7 @@ function MediaUploader({
   style,
   theme,
   onUpload,
+  onBatchUpload,
   onError,
   ...shared
 }) {
@@ -649,8 +666,10 @@ function MediaUploader({
         {
           ...shared,
           ...fileProps,
+          multiple: true,
           ...theme !== void 0 && { theme },
           ...onUpload !== void 0 && { onUpload },
+          ...onBatchUpload !== void 0 && { onBatchUpload },
           ...onError !== void 0 && { onError }
         }
       )
@@ -1643,7 +1662,218 @@ function formatTime(seconds) {
   }
   return `${String(minutes).padStart(2, "0")}:${String(secs).padStart(2, "0")}`;
 }
+var RADIUS = { full: "50%", md: "12px", sm: "6px" };
+function Avatar({
+  fileKey,
+  bucket,
+  initials,
+  size = 40,
+  shape = "full",
+  className = "",
+  style,
+  alt = "avatar"
+}) {
+  const { url } = useSignedUrl(fileKey ?? null);
+  const [error, setError] = useState(false);
+  const radius = RADIUS[shape];
+  const base = {
+    width: size,
+    height: size,
+    borderRadius: radius,
+    overflow: "hidden",
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0,
+    fontSize: size * 0.38,
+    fontWeight: 600,
+    userSelect: "none",
+    background: "var(--silo-bg, #e2e8f0)",
+    color: "var(--silo-text-muted, #64748b)",
+    ...style
+  };
+  if (url && !error) {
+    return /* @__PURE__ */ jsx("span", { className, style: base, children: /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: url,
+        alt,
+        style: { width: "100%", height: "100%", objectFit: "cover", display: "block" },
+        onError: () => setError(true)
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsx("span", { className, style: base, "aria-label": alt, children: initials ? initials.slice(0, 2).toUpperCase() : "?" });
+}
+function Thumbnail({
+  fileKey,
+  bucket,
+  mimeType,
+  width = "100%",
+  height = 160,
+  fit = "cover",
+  borderRadius = "var(--silo-radius, 12px)",
+  placeholder,
+  className = "",
+  style,
+  alt = "thumbnail"
+}) {
+  const { url, loading } = useSignedUrl(fileKey);
+  const [error, setError] = useState(false);
+  const isVideo = mimeType?.startsWith("video/");
+  const wrapper = {
+    width,
+    height,
+    borderRadius,
+    overflow: "hidden",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    background: "var(--silo-bg, #f1f5f9)",
+    position: "relative",
+    flexShrink: 0,
+    ...style
+  };
+  if (loading) {
+    return /* @__PURE__ */ jsx("span", { className, style: wrapper, children: placeholder ?? /* @__PURE__ */ jsx("span", { style: { color: "var(--silo-text-muted, #94a3b8)", fontSize: 12 }, children: "..." }) });
+  }
+  if (error || !url) {
+    return /* @__PURE__ */ jsx("span", { className, style: wrapper, children: /* @__PURE__ */ jsx("span", { style: { fontSize: 28 }, children: isVideo ? "\u{1F3AC}" : "\u{1F5BC}\uFE0F" }) });
+  }
+  if (isVideo) {
+    return /* @__PURE__ */ jsxs("span", { className, style: wrapper, children: [
+      /* @__PURE__ */ jsx(
+        "video",
+        {
+          src: url,
+          style: { width: "100%", height: "100%", objectFit: fit, display: "block" },
+          muted: true,
+          preload: "metadata",
+          onError: () => setError(true)
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          style: {
+            position: "absolute",
+            inset: 0,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            pointerEvents: "none"
+          },
+          children: /* @__PURE__ */ jsx("span", { style: { fontSize: 24, opacity: 0.85 }, children: "\u25B6" })
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsx("span", { className, style: wrapper, children: /* @__PURE__ */ jsx(
+    "img",
+    {
+      src: url,
+      alt,
+      style: { width: "100%", height: "100%", objectFit: fit, display: "block" },
+      onError: () => setError(true)
+    }
+  ) });
+}
+function Background({
+  fileKey,
+  bucket,
+  size = "cover",
+  position = "center",
+  overlay,
+  children,
+  className = "",
+  style
+}) {
+  const { url } = useSignedUrl(fileKey);
+  const wrapper = {
+    position: "relative",
+    backgroundImage: url ? `url(${url})` : void 0,
+    backgroundSize: size,
+    backgroundPosition: position,
+    backgroundRepeat: "no-repeat",
+    ...style
+  };
+  return /* @__PURE__ */ jsxs("div", { className, style: wrapper, children: [
+    overlay && /* @__PURE__ */ jsx(
+      "div",
+      {
+        "aria-hidden": true,
+        style: {
+          position: "absolute",
+          inset: 0,
+          background: overlay,
+          pointerEvents: "none"
+        }
+      }
+    ),
+    children && /* @__PURE__ */ jsx("div", { style: { position: "relative", zIndex: 1 }, children })
+  ] });
+}
+function FileIcon({
+  mimeType,
+  name,
+  size,
+  iconSize = 40,
+  showName = false,
+  showSize = false,
+  className = "",
+  style
+}) {
+  const icon = getFileIcon(mimeType);
+  const ext = name?.split(".").pop()?.toUpperCase();
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      className,
+      style: {
+        display: "inline-flex",
+        flexDirection: "column",
+        alignItems: "center",
+        gap: 4,
+        fontFamily: "var(--silo-font, inherit)",
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ jsx("span", { style: { fontSize: iconSize, lineHeight: 1 }, children: icon }),
+        ext && /* @__PURE__ */ jsx(
+          "span",
+          {
+            style: {
+              fontSize: iconSize * 0.22,
+              fontWeight: 700,
+              color: "var(--silo-text-muted, #64748b)",
+              letterSpacing: "0.04em",
+              textTransform: "uppercase"
+            },
+            children: ext
+          }
+        ),
+        showName && name && /* @__PURE__ */ jsx(
+          "span",
+          {
+            style: {
+              fontSize: 12,
+              color: "var(--silo-text, #0f172a)",
+              maxWidth: iconSize * 3,
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              whiteSpace: "nowrap",
+              textAlign: "center"
+            },
+            title: name,
+            children: name
+          }
+        ),
+        showSize && size !== void 0 && /* @__PURE__ */ jsx("span", { style: { fontSize: 11, color: "var(--silo-text-muted, #64748b)" }, children: formatBytes(size) })
+      ]
+    }
+  );
+}
 
-export { DropZone, FileUploader, ImageUploader, MediaUploader, ProgressBar, Source, Sources, Storyboard, StoryboardFrame, Subtitle, Subtitles, Video, VideoPlayer, VideoUploader, defaultTheme, resolveTheme };
+export { Avatar, Background, DropZone, FileIcon, FileUploader, ImageUploader, MediaUploader, ProgressBar, Source, Sources, Storyboard, StoryboardFrame, Subtitle, Subtitles, Thumbnail, Video, VideoPlayer, VideoUploader, defaultTheme, resolveTheme };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map