convex-cms 0.0.2 → 0.0.5-alpha.0

package/admin-dist/server/_ssr/tabs-CnMj0aRy.mjs

@@ -0,0 +1,630 @@
+import { j as jsxRuntimeExports, r as reactExports } from "../_chunks/_libs/react.mjs";
+import { C as CmsButton } from "./CmsButton-B45JAKR1.mjs";
+import { c as cn } from "./router-D1BMAMJT.mjs";
+import { R as Root2, L as List, T as Trigger, C as Content } from "../_chunks/_libs/@radix-ui/react-tabs.mjs";
+import { g as CircleAlert, a3 as Upload, X, am as RefreshCw, Z as Check } from "../_libs/lucide-react.mjs";
+import { d as useMutation } from "../_libs/convex.mjs";
+function generateUploadId() {
+  return `${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
+}
+function getImageDimensions(file, timeoutMs = 5e3) {
+  if (!file.type.startsWith("image/")) return Promise.resolve(void 0);
+  return new Promise((resolve) => {
+    const img = new Image();
+    let objectUrl = null;
+    const timeoutId = setTimeout(() => {
+      if (objectUrl) URL.revokeObjectURL(objectUrl);
+      resolve(void 0);
+    }, timeoutMs);
+    img.onload = () => {
+      clearTimeout(timeoutId);
+      if (objectUrl) URL.revokeObjectURL(objectUrl);
+      resolve({ width: img.naturalWidth, height: img.naturalHeight });
+    };
+    img.onerror = () => {
+      clearTimeout(timeoutId);
+      if (objectUrl) URL.revokeObjectURL(objectUrl);
+      resolve(void 0);
+    };
+    objectUrl = URL.createObjectURL(file);
+    img.src = objectUrl;
+  });
+}
+function uploadWithXHR(url, file, signal, onProgress) {
+  return new Promise((resolve, reject) => {
+    const xhr = new XMLHttpRequest();
+    const abortHandler = () => {
+      xhr.abort();
+      reject(new DOMException("Upload aborted", "AbortError"));
+    };
+    signal.addEventListener("abort", abortHandler);
+    xhr.upload.onprogress = (event) => {
+      if (event.lengthComputable) {
+        const percent = Math.round(event.loaded / event.total * 80);
+        onProgress(10 + percent);
+      }
+    };
+    xhr.onload = () => {
+      signal.removeEventListener("abort", abortHandler);
+      if (xhr.status >= 200 && xhr.status < 300) {
+        try {
+          const response = JSON.parse(xhr.responseText);
+          resolve(response.storageId);
+        } catch {
+          reject(new Error("Invalid response from upload server"));
+        }
+      } else {
+        reject(
+          new Error(`Upload failed: ${xhr.statusText || `HTTP ${xhr.status}`}`)
+        );
+      }
+    };
+    xhr.onerror = () => {
+      signal.removeEventListener("abort", abortHandler);
+      reject(new Error("Network error during upload"));
+    };
+    xhr.ontimeout = () => {
+      signal.removeEventListener("abort", abortHandler);
+      reject(new Error("Upload timed out"));
+    };
+    xhr.open("POST", url);
+    xhr.setRequestHeader("Content-Type", file.type);
+    xhr.send(file);
+  });
+}
+function queueReducer(state, action) {
+  switch (action.type) {
+    case "ADD_FILES": {
+      const newFiles = action.files.map((file) => ({
+        id: generateUploadId(),
+        file,
+        status: "pending",
+        progress: 0
+      }));
+      return [...state, ...newFiles];
+    }
+    case "UPDATE_FILE":
+      return state.map(
+        (f) => f.id === action.id ? { ...f, ...action.updates } : f
+      );
+    case "RETRY_FILE":
+      return state.map(
+        (f) => f.id === action.id ? { ...f, status: "pending", progress: 0, error: void 0 } : f
+      );
+    case "REMOVE_FILE":
+      return state.filter((f) => f.id !== action.id);
+    case "CLEAR_COMPLETED":
+      return state.filter(
+        (f) => f.status === "pending" || f.status === "uploading"
+      );
+    case "CLEAR_ALL":
+      return [];
+    case "CANCEL_FILE":
+      return state.map(
+        (f) => f.id === action.id && (f.status === "pending" || f.status === "uploading") ? { ...f, status: "cancelled", error: "Upload cancelled" } : f
+      );
+    case "CANCEL_ALL":
+      return state.map(
+        (f) => f.status === "pending" || f.status === "uploading" ? { ...f, status: "cancelled", error: "Upload cancelled" } : f
+      );
+    default:
+      return state;
+  }
+}
+function useMediaUploadQueue(options) {
+  const { maxConcurrent = 3, metadata, onComplete, onError } = options;
+  const [files, dispatch] = reactExports.useReducer(queueReducer, []);
+  const generateUrl = useMutation(options.getUploadUrl);
+  const create = useMutation(options.createAsset);
+  const activeUploadsRef = reactExports.useRef(0);
+  const abortControllersRef = reactExports.useRef(/* @__PURE__ */ new Map());
+  const processingRef = reactExports.useRef(false);
+  const uploadFile = reactExports.useCallback(
+    async (queueFile) => {
+      const abortController = new AbortController();
+      abortControllersRef.current.set(queueFile.id, abortController);
+      dispatch({
+        type: "UPDATE_FILE",
+        id: queueFile.id,
+        updates: { status: "uploading", progress: 0 }
+      });
+      try {
+        const uploadUrl = await generateUrl({});
+        dispatch({
+          type: "UPDATE_FILE",
+          id: queueFile.id,
+          updates: { progress: 5 }
+        });
+        const storageId = await uploadWithXHR(
+          uploadUrl,
+          queueFile.file,
+          abortController.signal,
+          (progress) => {
+            dispatch({
+              type: "UPDATE_FILE",
+              id: queueFile.id,
+              updates: { progress }
+            });
+          }
+        );
+        dispatch({
+          type: "UPDATE_FILE",
+          id: queueFile.id,
+          updates: { progress: 90 }
+        });
+        const dimensions = await getImageDimensions(queueFile.file);
+        const result = await create({
+          storageId,
+          name: queueFile.file.name,
+          mimeType: queueFile.file.type,
+          size: queueFile.file.size,
+          ...dimensions,
+          ...metadata
+        });
+        dispatch({
+          type: "UPDATE_FILE",
+          id: queueFile.id,
+          updates: { status: "complete", progress: 100, result }
+        });
+      } catch (e) {
+        const err = e instanceof Error ? e : new Error(String(e));
+        if (err.name === "AbortError") {
+          dispatch({
+            type: "UPDATE_FILE",
+            id: queueFile.id,
+            updates: { status: "cancelled", error: "Upload cancelled" }
+          });
+        } else {
+          const updatedFile = {
+            ...queueFile,
+            status: "error",
+            error: err.message
+          };
+          dispatch({
+            type: "UPDATE_FILE",
+            id: queueFile.id,
+            updates: { status: "error", error: err.message }
+          });
+          onError?.(updatedFile);
+        }
+      } finally {
+        abortControllersRef.current.delete(queueFile.id);
+        activeUploadsRef.current--;
+      }
+    },
+    [generateUrl, create, metadata, onError]
+  );
+  const processQueue = reactExports.useCallback(() => {
+    if (processingRef.current) return;
+    processingRef.current = true;
+    const pending = files.filter((f) => f.status === "pending");
+    while (activeUploadsRef.current < maxConcurrent && pending.length > 0) {
+      const next = pending.shift();
+      activeUploadsRef.current++;
+      uploadFile(next);
+    }
+    processingRef.current = false;
+    if (activeUploadsRef.current === 0 && files.length > 0 && files.every((f) => f.status !== "pending" && f.status !== "uploading")) {
+      onComplete?.(files);
+    }
+  }, [files, maxConcurrent, uploadFile, onComplete]);
+  reactExports.useEffect(() => {
+    if (files.some((f) => f.status === "pending") && activeUploadsRef.current < maxConcurrent) {
+      processQueue();
+    }
+  }, [files, maxConcurrent, processQueue]);
+  const addFiles = reactExports.useCallback((newFiles) => {
+    dispatch({ type: "ADD_FILES", files: newFiles });
+  }, []);
+  const cancelFile = reactExports.useCallback((id) => {
+    const controller = abortControllersRef.current.get(id);
+    if (controller) {
+      controller.abort();
+    }
+    dispatch({ type: "CANCEL_FILE", id });
+  }, []);
+  const cancelAll = reactExports.useCallback(() => {
+    abortControllersRef.current.forEach((controller) => controller.abort());
+    dispatch({ type: "CANCEL_ALL" });
+  }, []);
+  const retryFile = reactExports.useCallback((id) => {
+    dispatch({ type: "RETRY_FILE", id });
+  }, []);
+  const clearCompleted = reactExports.useCallback(() => {
+    dispatch({ type: "CLEAR_COMPLETED" });
+  }, []);
+  const clearAll = reactExports.useCallback(() => {
+    abortControllersRef.current.forEach((controller) => controller.abort());
+    dispatch({ type: "CLEAR_ALL" });
+  }, []);
+  const isUploading = files.some((f) => f.status === "uploading");
+  const overallProgress = files.length > 0 ? Math.round(files.reduce((sum, f) => sum + f.progress, 0) / files.length) : 0;
+  return {
+    files,
+    addFiles,
+    cancelFile,
+    cancelAll,
+    retryFile,
+    clearCompleted,
+    clearAll,
+    isUploading,
+    overallProgress
+  };
+}
+function formatFileSize(bytes) {
+  if (bytes === 0) return "0 B";
+  const k = 1024;
+  const sizes = ["B", "KB", "MB", "GB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(1))} ${sizes[i]}`;
+}
+function isMimeTypeAllowed(mimeType, allowedTypes) {
+  if (allowedTypes.length === 0) return true;
+  return allowedTypes.some((allowed) => {
+    if (allowed.endsWith("/*")) {
+      const category = allowed.slice(0, -2);
+      return mimeType.startsWith(category + "/");
+    }
+    return mimeType === allowed;
+  });
+}
+function UploadDropzone({
+  onUploadComplete,
+  currentFolderId,
+  generateUploadUrl,
+  createAsset,
+  maxFileSize,
+  allowedMimeTypes = [],
+  maxConcurrentUploads = 3,
+  onError
+}) {
+  const [isDragActive, setIsDragActive] = reactExports.useState(false);
+  const [validationErrors, setValidationErrors] = reactExports.useState(/* @__PURE__ */ new Map());
+  const fileInputRef = reactExports.useRef(null);
+  const queue = useMediaUploadQueue({
+    getUploadUrl: generateUploadUrl,
+    createAsset,
+    maxConcurrent: maxConcurrentUploads,
+    metadata: currentFolderId ? { parentId: currentFolderId } : void 0,
+    onComplete: (results) => {
+      const uploadedFiles = results.map((f) => ({
+        filename: f.file.name,
+        storageId: f.result ? String(f.result._id || "") : "",
+        success: f.status === "complete",
+        error: f.error
+      }));
+      onUploadComplete(uploadedFiles);
+    },
+    onError: (file) => {
+      onError?.(file.error || "Upload failed", file.file.name);
+    }
+  });
+  const validateFile = reactExports.useCallback(
+    (file) => {
+      if (maxFileSize && file.size > maxFileSize) {
+        return `File exceeds maximum size of ${formatFileSize(maxFileSize)}`;
+      }
+      if (allowedMimeTypes.length > 0 && !isMimeTypeAllowed(file.type, allowedMimeTypes)) {
+        return `File type ${file.type || "unknown"} is not allowed`;
+      }
+      return null;
+    },
+    [maxFileSize, allowedMimeTypes]
+  );
+  const addFiles = reactExports.useCallback(
+    (files) => {
+      const fileArray = Array.from(files);
+      const errors = /* @__PURE__ */ new Map();
+      const validFiles = [];
+      for (const file of fileArray) {
+        const error = validateFile(file);
+        if (error) {
+          errors.set(file.name, error);
+        } else {
+          validFiles.push(file);
+        }
+      }
+      setValidationErrors(errors);
+      if (validFiles.length > 0) {
+        queue.addFiles(validFiles);
+      }
+    },
+    [validateFile, queue]
+  );
+  const handleDragEnter = reactExports.useCallback((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragActive(true);
+  }, []);
+  const handleDragLeave = reactExports.useCallback((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragActive(false);
+  }, []);
+  const handleDragOver = reactExports.useCallback((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+  }, []);
+  const handleDrop = reactExports.useCallback(
+    (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      setIsDragActive(false);
+      if (e.dataTransfer.files?.length) {
+        addFiles(e.dataTransfer.files);
+      }
+    },
+    [addFiles]
+  );
+  const handleFileChange = reactExports.useCallback(
+    (e) => {
+      if (e.target.files?.length) {
+        addFiles(e.target.files);
+        e.target.value = "";
+      }
+    },
+    [addFiles]
+  );
+  const getStatusIcon = (status) => {
+    switch (status) {
+      case "complete":
+        return /* @__PURE__ */ jsxRuntimeExports.jsx(Check, { className: "size-4 text-emerald-500" });
+      case "error":
+      case "cancelled":
+        return /* @__PURE__ */ jsxRuntimeExports.jsx(X, { className: "size-4 text-red-500" });
+      case "uploading":
+        return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "size-4 animate-spin rounded-full border-2 border-muted border-t-primary" });
+      default:
+        return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "size-4 rounded-full border-2 border-muted" });
+    }
+  };
+  const completedCount = queue.files.filter((f) => f.status === "complete").length;
+  const errorCount = queue.files.filter(
+    (f) => f.status === "error" || f.status === "cancelled"
+  ).length;
+  const hasCompletedOrFailed = completedCount > 0 || errorCount > 0;
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-4", children: [
+    validationErrors.size > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "rounded-md border border-destructive/50 bg-destructive/10 p-3", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-start gap-2", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(CircleAlert, { className: "mt-0.5 size-4 shrink-0 text-destructive" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 space-y-1", children: Array.from(validationErrors.entries()).map(([filename, error]) => /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "text-sm text-destructive", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "font-medium", children: [
+            filename,
+            ":"
+          ] }),
+          " ",
+          error
+        ] }, filename)) })
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        CmsButton,
+        {
+          variant: "ghost",
+          size: "sm",
+          className: "mt-2",
+          onClick: () => setValidationErrors(/* @__PURE__ */ new Map()),
+          children: "Dismiss"
+        }
+      )
+    ] }),
+    !queue.isUploading && queue.files.length === 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      "div",
+      {
+        className: cn(
+          "flex cursor-pointer flex-col items-center justify-center gap-3 rounded-lg border-2 border-dashed p-8 text-center transition-colors",
+          isDragActive ? "border-primary bg-primary/5" : "border-muted-foreground/25 hover:border-primary/50 hover:bg-muted/50"
+        ),
+        onClick: () => fileInputRef.current?.click(),
+        onDragEnter: handleDragEnter,
+        onDragLeave: handleDragLeave,
+        onDragOver: handleDragOver,
+        onDrop: handleDrop,
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex size-12 items-center justify-center rounded-full bg-muted", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Upload, { className: "size-6 text-muted-foreground" }) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm font-medium text-foreground", children: isDragActive ? "Drop files here" : "Drag and drop files here" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "mt-1 text-xs text-muted-foreground", children: "or click to browse" })
+          ] }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("p", { className: "text-xs text-muted-foreground", children: [
+            "Supports images, videos, documents, and more",
+            maxFileSize && ` (max ${formatFileSize(maxFileSize)} per file)`
+          ] })
+        ]
+      }
+    ),
+    queue.files.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-3", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2 text-sm", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "font-medium", children: [
+            queue.files.length,
+            " file",
+            queue.files.length !== 1 ? "s" : ""
+          ] }),
+          queue.isUploading && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-muted-foreground", children: [
+            queue.overallProgress,
+            "% complete"
+          ] }),
+          !queue.isUploading && hasCompletedOrFailed && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
+            completedCount > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-emerald-600", children: [
+              completedCount,
+              " completed"
+            ] }),
+            errorCount > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-red-500", children: [
+              errorCount,
+              " failed"
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
+          !queue.isUploading && /* @__PURE__ */ jsxRuntimeExports.jsx(
+            CmsButton,
+            {
+              variant: "outline",
+              size: "sm",
+              onClick: () => fileInputRef.current?.click(),
+              children: "Add More"
+            }
+          ),
+          queue.isUploading && /* @__PURE__ */ jsxRuntimeExports.jsx(CmsButton, { variant: "outline", size: "sm", onClick: queue.cancelAll, children: "Cancel All" }),
+          hasCompletedOrFailed && !queue.isUploading && /* @__PURE__ */ jsxRuntimeExports.jsx(CmsButton, { variant: "ghost", size: "sm", onClick: queue.clearCompleted, children: "Clear Done" })
+        ] })
+      ] }),
+      queue.isUploading && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-1.5 overflow-hidden rounded-full bg-muted", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+        "div",
+        {
+          className: "h-full bg-primary transition-all duration-300",
+          style: { width: `${queue.overallProgress}%` }
+        }
+      ) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-2", children: queue.files.map((uploadFile) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        "div",
+        {
+          className: cn(
+            "flex items-center gap-3 rounded-lg border bg-card p-3",
+            uploadFile.status === "error" && "border-red-200 bg-red-50 dark:border-red-900 dark:bg-red-950/20",
+            uploadFile.status === "complete" && "border-emerald-200 bg-emerald-50 dark:border-emerald-900 dark:bg-emerald-950/20"
+          ),
+          children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "shrink-0", children: getStatusIcon(uploadFile.status) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "min-w-0 flex-1", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                "p",
+                {
+                  className: "truncate text-sm font-medium",
+                  title: uploadFile.file.name,
+                  children: uploadFile.file.name
+                }
+              ),
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs text-muted-foreground", children: formatFileSize(uploadFile.file.size) }),
+                uploadFile.error && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-xs text-red-500", children: uploadFile.error })
+              ] })
+            ] }),
+            uploadFile.status === "uploading" && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex w-20 items-center gap-2", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-1.5 flex-1 overflow-hidden rounded-full bg-muted", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                "div",
+                {
+                  className: "h-full bg-primary transition-all",
+                  style: { width: `${uploadFile.progress}%` }
+                }
+              ) }),
+              /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-xs text-muted-foreground", children: [
+                uploadFile.progress,
+                "%"
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "shrink-0", children: [
+              uploadFile.status === "pending" && !queue.isUploading && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                CmsButton,
+                {
+                  variant: "ghost",
+                  size: "icon-sm",
+                  onClick: () => queue.cancelFile(uploadFile.id),
+                  title: "Remove",
+                  children: /* @__PURE__ */ jsxRuntimeExports.jsx(X, { className: "size-4" })
+                }
+              ),
+              (uploadFile.status === "uploading" || uploadFile.status === "pending") && queue.isUploading && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                CmsButton,
+                {
+                  variant: "ghost",
+                  size: "icon-sm",
+                  onClick: () => queue.cancelFile(uploadFile.id),
+                  title: "Cancel",
+                  children: /* @__PURE__ */ jsxRuntimeExports.jsx(X, { className: "size-4" })
+                }
+              ),
+              (uploadFile.status === "error" || uploadFile.status === "cancelled") && !queue.isUploading && /* @__PURE__ */ jsxRuntimeExports.jsx(
+                CmsButton,
+                {
+                  variant: "ghost",
+                  size: "icon-sm",
+                  onClick: () => queue.retryFile(uploadFile.id),
+                  title: "Retry",
+                  children: /* @__PURE__ */ jsxRuntimeExports.jsx(RefreshCw, { className: "size-4" })
+                }
+              )
+            ] })
+          ]
+        },
+        uploadFile.id
+      )) })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "input",
+      {
+        ref: fileInputRef,
+        type: "file",
+        multiple: true,
+        onChange: handleFileChange,
+        className: "hidden",
+        accept: allowedMimeTypes.length > 0 ? allowedMimeTypes.join(",") : void 0
+      }
+    )
+  ] });
+}
+function Tabs({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    Root2,
+    {
+      "data-slot": "tabs",
+      className: cn("flex flex-col gap-2", className),
+      ...props
+    }
+  );
+}
+function TabsList({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    List,
+    {
+      "data-slot": "tabs-list",
+      className: cn(
+        "bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function TabsTrigger({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    Trigger,
+    {
+      "data-slot": "tabs-trigger",
+      className: cn(
+        "data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function TabsContent({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    Content,
+    {
+      "data-slot": "tabs-content",
+      className: cn("flex-1 outline-none", className),
+      ...props
+    }
+  );
+}
+export {
+  Tabs as T,
+  UploadDropzone as U,
+  TabsList as a,
+  TabsTrigger as b,
+  TabsContent as c
+};