@geekapps/silo-elements-nextjs 0.0.1 → 0.0.3

package/dist/MediaUploader.js

@@ -1,47 +1,658 @@
-"use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from "react";
-import { ImageUploader } from "./ImageUploader.js";
-import { VideoUploader } from "./VideoUploader.js";
-import { FileUploader } from "./FileUploader.js";
-import { resolveTheme, themeToVars } from "./utils/theme.js";
-const TAB_LABELS = {
-    image: { label: "Image", icon: "🖼️" },
-    video: { label: "Video", icon: "🎬" },
-    file: { label: "File", icon: "📎" },
+import { useState, useCallback, useRef } from 'react';
+import { useUpload } from '@geekapps/silo-nextjs';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+// src/utils/theme.ts
+var defaultTheme = {
+  borderColor: "#e2e8f0",
+  borderColorActive: "#6366f1",
+  backgroundColor: "#f8fafc",
+  backgroundColorHover: "#f1f5f9",
+  textColor: "#0f172a",
+  textColorMuted: "#64748b",
+  accentColor: "#6366f1",
+  accentColorHover: "#4f46e5",
+  errorColor: "#ef4444",
+  successColor: "#22c55e",
+  borderRadius: "12px",
+  fontFamily: "inherit"
 };
-export function MediaUploader({ tabs = ["image", "video", "file"], defaultTab, imageProps, videoProps, fileProps, className = "", style, theme, onUpload, onError, ...shared }) {
-    const [activeTab, setActiveTab] = useState(defaultTab ?? tabs[0] ?? "image");
-    const t = resolveTheme(theme);
-    const vars = themeToVars(t);
-    const containerStyle = {
-        ...vars,
-        display: "flex",
-        flexDirection: "column",
-        gap: "0",
-        width: "100%",
-        fontFamily: "var(--silo-font)",
-        border: "1px solid var(--silo-border)",
-        borderRadius: "var(--silo-radius)",
+function resolveTheme(theme) {
+  return { ...defaultTheme, ...theme };
+}
+function themeToVars(theme) {
+  return {
+    "--silo-border": theme.borderColor,
+    "--silo-border-active": theme.borderColorActive,
+    "--silo-bg": theme.backgroundColor,
+    "--silo-bg-hover": theme.backgroundColorHover,
+    "--silo-text": theme.textColor,
+    "--silo-text-muted": theme.textColorMuted,
+    "--silo-accent": theme.accentColor,
+    "--silo-accent-hover": theme.accentColorHover,
+    "--silo-error": theme.errorColor,
+    "--silo-success": theme.successColor,
+    "--silo-radius": theme.borderRadius,
+    "--silo-font": theme.fontFamily
+  };
+}
+function DropZone({
+  accept,
+  multiple = false,
+  disabled = false,
+  maxSize,
+  onFiles,
+  onError,
+  className = "",
+  style,
+  theme,
+  children
+}) {
+  const [dragging, setDragging] = useState(false);
+  const inputRef = useRef(null);
+  const t = resolveTheme(theme);
+  const vars = themeToVars(t);
+  const validate = useCallback(
+    (files) => {
+      return files.filter((f) => {
+        if (maxSize && f.size > maxSize) {
+          onError?.(new Error(`File "${f.name}" exceeds max size of ${maxSize} bytes`));
+          return false;
+        }
+        return true;
+      });
+    },
+    [maxSize, onError]
+  );
+  const handleDrop = useCallback(
+    (e) => {
+      e.preventDefault();
+      setDragging(false);
+      if (disabled) return;
+      const files = Array.from(e.dataTransfer.files);
+      const valid = validate(files);
+      if (valid.length) onFiles(valid);
+    },
+    [disabled, validate, onFiles]
+  );
+  const handleChange = useCallback(
+    (e) => {
+      const files = Array.from(e.target.files ?? []);
+      const valid = validate(files);
+      if (valid.length) onFiles(valid);
+      e.target.value = "";
+    },
+    [validate, onFiles]
+  );
+  const rootStyle = {
+    ...vars,
+    fontFamily: "var(--silo-font)",
+    border: `2px dashed ${dragging ? "var(--silo-border-active)" : "var(--silo-border)"}`,
+    borderRadius: "var(--silo-radius)",
+    backgroundColor: dragging ? "var(--silo-bg-hover)" : "var(--silo-bg)",
+    color: "var(--silo-text)",
+    cursor: disabled ? "not-allowed" : "pointer",
+    transition: "border-color 0.15s, background-color 0.15s",
+    opacity: disabled ? 0.5 : 1,
+    ...style
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `silo-dropzone${className ? ` ${className}` : ""}`,
+      style: rootStyle,
+      onDragOver: (e) => {
+        e.preventDefault();
+        if (!disabled) setDragging(true);
+      },
+      onDragLeave: () => setDragging(false),
+      onDrop: handleDrop,
+      onClick: () => !disabled && inputRef.current?.click(),
+      role: "button",
+      tabIndex: disabled ? -1 : 0,
+      onKeyDown: (e) => {
+        if (e.key === "Enter" || e.key === " ") inputRef.current?.click();
+      },
+      "aria-label": "Upload area",
+      children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: inputRef,
+            type: "file",
+            accept,
+            multiple,
+            style: { display: "none" },
+            onChange: handleChange,
+            disabled
+          }
+        ),
+        children
+      ]
+    }
+  );
+}
+function ProgressBar({ progress, className = "", style }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: `silo-progress-track${className ? ` ${className}` : ""}`,
+      style: {
+        height: "6px",
+        borderRadius: "3px",
+        backgroundColor: "rgba(99,102,241,0.15)",
         overflow: "hidden",
-        backgroundColor: "var(--silo-bg)",
-        ...style,
-    };
-    return (_jsxs("div", { className: `silo-media-uploader${className ? ` ${className}` : ""}`, style: containerStyle, children: [_jsx("div", { style: { display: "flex", borderBottom: "1px solid var(--silo-border)" }, children: tabs.map((tab) => (_jsxs("button", { onClick: () => setActiveTab(tab), style: {
-                        flex: 1,
-                        padding: "10px 8px",
-                        background: "none",
-                        border: "none",
-                        borderBottom: `2px solid ${activeTab === tab ? "var(--silo-accent)" : "transparent"}`,
-                        cursor: "pointer",
-                        fontSize: "13px",
-                        fontWeight: activeTab === tab ? 600 : 400,
-                        color: activeTab === tab ? "var(--silo-accent)" : "var(--silo-text-muted)",
-                        transition: "color 0.15s, border-color 0.15s",
-                        display: "flex",
-                        alignItems: "center",
-                        justifyContent: "center",
-                        gap: "6px",
-                    }, children: [_jsx("span", { children: TAB_LABELS[tab].icon }), _jsx("span", { children: TAB_LABELS[tab].label })] }, tab))) }), _jsxs("div", { style: { padding: "16px" }, children: [activeTab === "image" && (_jsx(ImageUploader, { ...shared, ...imageProps, ...(theme !== undefined && { theme }), ...(onUpload !== undefined && { onUpload }), ...(onError !== undefined && { onError }) })), activeTab === "video" && (_jsx(VideoUploader, { ...shared, ...videoProps, ...(theme !== undefined && { theme }), ...(onUpload !== undefined && { onUpload }), ...(onError !== undefined && { onError }) })), activeTab === "file" && (_jsx(FileUploader, { ...shared, ...fileProps, ...(theme !== undefined && { theme }), ...(onUpload !== undefined && { onUpload }), ...(onError !== undefined && { onError }) }))] })] }));
+        ...style
+      },
+      role: "progressbar",
+      "aria-valuenow": progress,
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "silo-progress-fill",
+          style: {
+            height: "100%",
+            width: `${progress}%`,
+            backgroundColor: "var(--silo-accent, #6366f1)",
+            borderRadius: "3px",
+            transition: "width 0.2s ease"
+          }
+        }
+      )
+    }
+  );
+}
+
+// src/utils/format.ts
+function formatBytes(bytes) {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 ** 2) return `${(bytes / 1024).toFixed(1)} KB`;
+  if (bytes < 1024 ** 3) return `${(bytes / 1024 ** 2).toFixed(1)} MB`;
+  return `${(bytes / 1024 ** 3).toFixed(2)} GB`;
+}
+function ImageUploader({
+  bucket,
+  expiresIn,
+  private: isPrivate = true,
+  onUpload,
+  onError,
+  className = "",
+  style,
+  disabled = false,
+  maxSize,
+  accept = "image/*",
+  showPreview = true,
+  theme,
+  renderIcon,
+  renderProgress,
+  renderSuccess,
+  renderError,
+  children
+}) {
+  const uploadOpts = { private: isPrivate, ...bucket !== void 0 && { bucket }, ...expiresIn !== void 0 && { expiresIn } };
+  const { state, upload, reset } = useUpload(uploadOpts);
+  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 containerStyle = {
+    ...vars,
+    display: "flex",
+    flexDirection: "column",
+    gap: "12px",
+    width: "100%",
+    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) });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: `silo-image-uploader${className ? ` ${className}` : ""}`, style: containerStyle, children: [
+    /* @__PURE__ */ jsx(
+      DropZone,
+      {
+        ...accept !== void 0 && { accept },
+        ...maxSize !== void 0 && { maxSize },
+        ...onError !== void 0 && { onError },
+        ...theme !== void 0 && { theme },
+        disabled: disabled || state.status === "uploading",
+        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" })
+        ] }) : /* @__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" }),
+            maxSize && /* @__PURE__ */ jsxs("span", { style: { fontSize: "12px", color: "var(--silo-text-muted)" }, children: [
+              "Max ",
+              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,
+          "%"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(ProgressBar, { progress: state.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"
+        }
+      )
+    ] }),
+    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();
+            reset();
+          },
+          style: { marginLeft: "auto", background: "none", border: "none", cursor: "pointer", fontSize: "12px", color: "var(--silo-text-muted)" },
+          children: "Retry"
+        }
+      )
+    ] })
+  ] });
+}
+function VideoUploader({
+  bucket,
+  expiresIn,
+  private: isPrivate = true,
+  onUpload,
+  onError,
+  className = "",
+  style,
+  disabled = false,
+  maxSize,
+  accept = "video/*",
+  showPreview = true,
+  theme,
+  renderIcon,
+  renderProgress,
+  renderSuccess,
+  renderError,
+  children
+}) {
+  const uploadOpts = { private: isPrivate, ...bucket !== void 0 && { bucket }, ...expiresIn !== void 0 && { expiresIn } };
+  const { state, upload, reset } = useUpload(uploadOpts);
+  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 containerStyle = {
+    ...vars,
+    display: "flex",
+    flexDirection: "column",
+    gap: "12px",
+    width: "100%",
+    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) });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: `silo-video-uploader${className ? ` ${className}` : ""}`, style: containerStyle, children: [
+    /* @__PURE__ */ jsx(
+      DropZone,
+      {
+        ...accept !== void 0 && { accept },
+        ...maxSize !== void 0 && { maxSize },
+        ...onError !== void 0 && { onError },
+        ...theme !== void 0 && { theme },
+        disabled: disabled || state.status === "uploading",
+        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" })
+        ] }) : /* @__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__ */ jsxs("span", { style: { fontSize: "12px", color: "var(--silo-text-muted)" }, children: [
+              "MP4, MOV, MKV, WebM",
+              maxSize ? ` \xB7 Max ${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,
+          "%"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(ProgressBar, { progress: state.progress }),
+      /* @__PURE__ */ jsx("span", { style: { fontSize: "12px", color: "var(--silo-text-muted)" }, children: "Processing will start after upload completes" })
+    ] }) }),
+    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();
+        reset();
+        setPreview(null);
+      }, style: { marginLeft: "auto", background: "none", border: "none", cursor: "pointer", fontSize: "12px", color: "var(--silo-text-muted)" }, children: "Upload another" })
+    ] }),
+    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();
+        reset();
+      }, style: { marginLeft: "auto", background: "none", border: "none", cursor: "pointer", fontSize: "12px", color: "var(--silo-text-muted)" }, children: "Retry" })
+    ] })
+  ] });
+}
+function FileUploader({
+  bucket,
+  expiresIn,
+  private: isPrivate = true,
+  onUpload,
+  onError,
+  className = "",
+  style,
+  disabled = false,
+  maxSize,
+  accept,
+  multiple = false,
+  theme,
+  renderIcon,
+  renderProgress,
+  renderSuccess,
+  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",
+    flexDirection: "column",
+    gap: "12px",
+    width: "100%",
+    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) });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: `silo-file-uploader${className ? ` ${className}` : ""}`, style: containerStyle, children: [
+    /* @__PURE__ */ jsx(
+      DropZone,
+      {
+        ...accept !== void 0 && { accept },
+        ...maxSize !== void 0 && { maxSize },
+        ...onError !== void 0 && { onError },
+        ...theme !== void 0 && { theme },
+        multiple,
+        disabled: disabled || state.status === "uploading",
+        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" }),
+            maxSize && /* @__PURE__ */ jsxs("span", { style: { fontSize: "12px", color: "var(--silo-text-muted)" }, children: [
+              "Max ",
+              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,
+          "%"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(ProgressBar, { progress: state.progress })
+    ] }) }),
+    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: (e) => {
+        e.stopPropagation();
+        reset();
+      }, style: { background: "none", border: "none", cursor: "pointer", fontSize: "12px", color: "var(--silo-text-muted)", flexShrink: 0 }, children: "Replace" })
+    ] }),
+    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" })
+    ] })
+  ] });
+}
+var TAB_LABELS = {
+  image: { label: "Image", icon: "\u{1F5BC}\uFE0F" },
+  video: { label: "Video", icon: "\u{1F3AC}" },
+  file: { label: "File", icon: "\u{1F4CE}" }
+};
+function MediaUploader({
+  tabs = ["image", "video", "file"],
+  defaultTab,
+  imageProps,
+  videoProps,
+  fileProps,
+  className = "",
+  style,
+  theme,
+  onUpload,
+  onError,
+  ...shared
+}) {
+  const [activeTab, setActiveTab] = useState(defaultTab ?? tabs[0] ?? "image");
+  const t = resolveTheme(theme);
+  const vars = themeToVars(t);
+  const containerStyle = {
+    ...vars,
+    display: "flex",
+    flexDirection: "column",
+    gap: "0",
+    width: "100%",
+    fontFamily: "var(--silo-font)",
+    border: "1px solid var(--silo-border)",
+    borderRadius: "var(--silo-radius)",
+    overflow: "hidden",
+    backgroundColor: "var(--silo-bg)",
+    ...style
+  };
+  return /* @__PURE__ */ jsxs("div", { className: `silo-media-uploader${className ? ` ${className}` : ""}`, style: containerStyle, children: [
+    /* @__PURE__ */ jsx("div", { style: { display: "flex", borderBottom: "1px solid var(--silo-border)" }, children: tabs.map((tab) => /* @__PURE__ */ jsxs(
+      "button",
+      {
+        onClick: () => setActiveTab(tab),
+        style: {
+          flex: 1,
+          padding: "10px 8px",
+          background: "none",
+          border: "none",
+          borderBottom: `2px solid ${activeTab === tab ? "var(--silo-accent)" : "transparent"}`,
+          cursor: "pointer",
+          fontSize: "13px",
+          fontWeight: activeTab === tab ? 600 : 400,
+          color: activeTab === tab ? "var(--silo-accent)" : "var(--silo-text-muted)",
+          transition: "color 0.15s, border-color 0.15s",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          gap: "6px"
+        },
+        children: [
+          /* @__PURE__ */ jsx("span", { children: TAB_LABELS[tab].icon }),
+          /* @__PURE__ */ jsx("span", { children: TAB_LABELS[tab].label })
+        ]
+      },
+      tab
+    )) }),
+    /* @__PURE__ */ jsxs("div", { style: { padding: "16px" }, children: [
+      activeTab === "image" && /* @__PURE__ */ jsx(
+        ImageUploader,
+        {
+          ...shared,
+          ...imageProps,
+          ...theme !== void 0 && { theme },
+          ...onUpload !== void 0 && { onUpload },
+          ...onError !== void 0 && { onError }
+        }
+      ),
+      activeTab === "video" && /* @__PURE__ */ jsx(
+        VideoUploader,
+        {
+          ...shared,
+          ...videoProps,
+          ...theme !== void 0 && { theme },
+          ...onUpload !== void 0 && { onUpload },
+          ...onError !== void 0 && { onError }
+        }
+      ),
+      activeTab === "file" && /* @__PURE__ */ jsx(
+        FileUploader,
+        {
+          ...shared,
+          ...fileProps,
+          ...theme !== void 0 && { theme },
+          ...onUpload !== void 0 && { onUpload },
+          ...onError !== void 0 && { onError }
+        }
+      )
+    ] })
+  ] });
 }
+
+export { MediaUploader };
+//# sourceMappingURL=MediaUploader.js.map
 //# sourceMappingURL=MediaUploader.js.map