2b:I[97408,["/_next/static/chunks/2mboumxmn9vsj.js","/_next/static/chunks/32dvni95tpg53.js","/_next/static/chunks/096pdj0p9us7b.js","/_next/static/chunks/2zmhim7fs4co6.js","/_next/static/chunks/3xch0q4i4r97l.js","/_next/static/chunks/0rrxkn5ubhu1j.js"],"StageProvider"] 2c:I[60401,["/_next/static/chunks/2mboumxmn9vsj.js","/_next/static/chunks/32dvni95tpg53.js","/_next/static/chunks/096pdj0p9us7b.js","/_next/static/chunks/2zmhim7fs4co6.js","/_next/static/chunks/3xch0q4i4r97l.js","/_next/static/chunks/0rrxkn5ubhu1j.js"],"DetailTabs"] 2d:T49fd,"use client"; import { AnimatePresence, motion } from "motion/react"; import { AlertCircle, Check, File as FileIcon, FileArchive, FileImage, FileText, FileVideo, RotateCcw, Upload, X } from "lucide-react"; import { useCallback, useEffect, useId, useRef, useState, type ClipboardEvent, type ComponentProps, type DragEvent, type ReactNode } from "react"; import { cn } from "@/lib/utils"; export type UploadStatus = "uploading" | "done" | "error"; export type UploadFile = { id: string; name: string; size: number; type: string; progress: number; status: UploadStatus; error?: string; /** An object URL or image address for image files. */ preview?: string; file?: File; }; export type FileRejection = { file: File; reason: string }; /** 1536 → "1.5 KB". */ export function formatBytes(bytes: number) { if (bytes < 1024) return `${bytes} B`; const units = ["KB", "MB", "GB"]; let n = bytes / 1024; let i = 0; while (n >= 1024 && i < units.length - 1) (n /= 1024), i++; return `${n < 10 ? n.toFixed(1) : Math.round(n)} ${units[i]}`; } /** Whether a file matches an accept string such as "image/*,.pdf". */ export function accepts(file: { name: string; type: string }, accept?: string) { if (!accept) return true; return accept.split(",").some((rule) => { const r = rule.trim().toLowerCase(); if (r.startsWith(".")) return file.name.toLowerCase().endsWith(r); if (r.endsWith("/*")) return file.type.startsWith(r.slice(0, -1)); return file.type === r; }); } function kindIcon(type: string, name: string) { if (type.startsWith("image/")) return FileImage; if (type.startsWith("video/")) return FileVideo; if (/zip|tar|rar|7z/.test(type) || /\.(zip|tar|gz|rar|7z)$/i.test(name)) return FileArchive; if (type.startsWith("text/") || /pdf|document|sheet|csv/.test(type)) return FileText; return FileIcon; } export interface UseFileUploadOptions { accept?: string; /** Largest file in bytes. */ maxSize?: number; maxFiles?: number; initial?: UploadFile[]; /** * Sends one file and reports progress from 0 to 100. Leave it out to simulate an upload, which is handy in * prototypes; swap in your own fetch or storage call later. */ upload?: (file: File, onProgress: (progress: number) => void) => Promise; } function simulate(file: File, onProgress: (p: number) => void) { return new Promise((resolve) => { let p = 0; const step = Math.max(4, 40 - Math.log2(file.size + 2) * 1.5); const id = setInterval(() => { p = Math.min(100, p + step * (0.5 + Math.random())); onProgress(p); if (p >= 100) clearInterval(id), resolve(); }, 160); }); } /** * Keeps a list of uploads: checks type, size and count, then runs each file through `upload` with progress, and * offers remove and retry. */ export function useFileUpload({ accept, maxSize, maxFiles, initial = [], upload = simulate }: UseFileUploadOptions = {}) { const [files, setFiles] = useState(initial); const [rejected, setRejected] = useState([]); const alive = useRef(true); const count = useRef(initial.length); const latest = useRef(files); useEffect(() => { latest.current = files; }, [files]); useEffect(() => { alive.current = true; return () => { alive.current = false; }; }, []); const patch = (id: string, change: Partial) => alive.current && setFiles((list) => list.map((f) => (f.id === id ? { ...f, ...change } : f))); const run = useCallback( (item: UploadFile) => { patch(item.id, { status: "uploading", progress: 0, error: undefined }); upload(item.file ?? new File([], item.name, { type: item.type }), (progress) => patch(item.id, { progress })) .then(() => patch(item.id, { status: "done", progress: 100 })) .catch((e: unknown) => patch(item.id, { status: "error", error: e instanceof Error ? e.message : "Upload failed" })); }, [upload], ); const add = useCallback( (incoming: File[]) => { const bad: FileRejection[] = []; const good: UploadFile[] = []; for (const file of incoming) { if (!accepts(file, accept)) bad.push({ file, reason: "This file type isn't allowed" }); else if (maxSize && file.size > maxSize) bad.push({ file, reason: `Larger than ${formatBytes(maxSize)}` }); else if (maxFiles && count.current + good.length >= maxFiles) bad.push({ file, reason: `Only ${maxFiles} file${maxFiles === 1 ? "" : "s"} allowed` }); else good.push({ id: `${file.name}-${file.size}-${Math.random().toString(36).slice(2, 7)}`, name: file.name, size: file.size, type: file.type, progress: 0, status: "uploading", preview: file.type.startsWith("image/") ? URL.createObjectURL(file) : undefined, file, }); } count.current += good.length; setRejected(bad); if (good.length) setFiles((list) => [...list, ...good]); good.forEach(run); }, [accept, maxSize, maxFiles, run], ); const remove = useCallback((id: string) => { setFiles((list) => { const f = list.find((x) => x.id === id); if (f?.preview?.startsWith("blob:")) URL.revokeObjectURL(f.preview); return list.filter((x) => x.id !== id); }); count.current = Math.max(0, count.current - 1); }, []); const retry = useCallback( (id: string) => { const f = latest.current.find((x) => x.id === id); if (f) run(f); }, [run], ); const clear = useCallback(() => (setFiles([]), setRejected([]), (count.current = 0)), []); return { files, rejected, add, remove, retry, clear, dismissRejected: () => setRejected([]) }; } export interface DropzoneProps extends Omit, "onDrop" | "children"> { onFiles: (files: File[]) => void; accept?: string; multiple?: boolean; disabled?: boolean; /** default: a tall dashed area · compact: one line with a button. */ variant?: "default" | "compact"; /** Replaces the default text. Receives whether a file is being dragged over. */ children?: ReactNode | ((dragging: boolean) => ReactNode); /** Shown under the title, e.g. "PNG or JPG up to 5 MB". */ hint?: ReactNode; } /** A drop area that also opens the file picker on click, Enter or Space, and takes pasted images. */ export function Dropzone({ onFiles, accept, multiple = true, disabled = false, variant = "default", hint, className, children, ...props }: DropzoneProps) { const input = useRef(null); const [dragging, setDragging] = useState(false); const depth = useRef(0); const id = useId(); const take = (list: FileList | null) => { if (!list?.length || disabled) return; const files = Array.from(list); onFiles(multiple ? files : files.slice(0, 1)); }; const drag = (e: DragEvent, delta: number) => { e.preventDefault(); if (disabled) return; depth.current = Math.max(0, depth.current + delta); setDragging(depth.current > 0); }; return (

!disabled && input.current?.click()} onKeyDown={(e) => { if ((e.key === "Enter" || e.key === " ") && !disabled) e.preventDefault(), input.current?.click(); }} onDragEnter={(e) => drag(e, 1)} onDragLeave={(e) => drag(e, -1)} onDragOver={(e) => e.preventDefault()} onDrop={(e) => { e.preventDefault(); depth.current = 0; setDragging(false); take(e.dataTransfer.files); }} onPaste={(e: ClipboardEvent) => take(e.clipboardData.files)} className={cn( "group relative cursor-pointer outline-none transition-[background-color,border-color,box-shadow] duration-200", "rounded-[18px] border-[1.5px] border-dashed border-black/[0.12] bg-neutral-50/60 hover:border-black/[0.22] hover:bg-neutral-50 focus-visible:border-neutral-950/40 focus-visible:bg-white", "dark:border-white/[0.14] dark:bg-white/[0.02] dark:hover:border-white/[0.26] dark:hover:bg-white/[0.04] dark:focus-visible:border-white/40", "data-dragging:border-neutral-950/50 data-dragging:bg-neutral-950/[0.03] dark:data-dragging:border-white/50 dark:data-dragging:bg-white/[0.06]", disabled && "pointer-events-none opacity-50", variant === "default" ? "flex flex-col items-center justify-center gap-1 px-6 py-8 text-center" : "flex items-center gap-3 px-3 py-2.5", className, )} {...props} > (take(e.target.files), (e.target.value = ""))} onClick={(e) => e.stopPropagation()} /> {typeof children === "function" ? ( children(dragging) ) : children ? ( children ) : variant === "default" ? ( <>

{dragging ? "Drop to upload" : ( <> Drop files here or browse )}

{hint && (

{hint}

)} ) : ( <> {dragging ? "Drop to upload" : "Drop files or browse"} {hint && ( {hint} )} Choose )}

); } export interface FileItemProps { file: UploadFile; onRemove?: () => void; onRetry?: () => void; className?: string; } /** One file with its type icon or thumbnail, size, progress and remove or retry. */ export function FileItem({ file, onRemove, onRetry, className }: FileItemProps) { const Icon = kindIcon(file.type, file.name); const failed = file.status === "error"; const [broken, setBroken] = useState(false); return (

{file.preview && !broken ? (

setBroken(true)} className="size-9 shrink-0 rounded-[9px] object-cover ring-1 ring-black/[0.06] dark:ring-white/[0.08]" /> ) : ( {failed ? : } )}

{file.name}

{failed ? ( file.error ) : file.status === "uploading" ? ( <> {formatBytes((file.size * file.progress) / 100)} of {formatBytes(file.size)} · {Math.round(file.progress)}% ) : ( <> {formatBytes(file.size)} Uploaded )}

{failed && onRetry && ( )} {onRemove && ( )} {file.status === "uploading" && ( )}

); } /** Files stacked in a list; new ones slide in and removed ones fold away. */ export function FileList({ files, onRemove, onRetry, className }: { files: UploadFile[]; onRemove?: (id: string) => void; onRetry?: (id: string) => void; className?: string }) { return (

{files.map((f) => ( onRemove(f.id))} onRetry={onRetry && (() => onRetry(f.id))} /> ))}

); } /** Image files as square thumbnails with a progress veil and a remove button on hover. */ export function FileGrid({ files, onRemove, className, children }: { files: UploadFile[]; onRemove?: (id: string) => void; className?: string; children?: ReactNode }) { return (

{files.map((f) => ( {f.preview &&

} {f.status === "uploading" && ( )} {onRemove && ( )} ))}

); } /** Lists files that were turned away and why. */ export function FileRejections({ rejected, onDismiss, className }: { rejected: FileRejection[]; onDismiss?: () => void; className?: string }) { return ( {rejected.length > 0 && (

{r.file.name} · {r.reason}

{onDismiss && ( )}

)} ); } export default Dropzone; 2e:T309a1,

"use client";

import { AnimatePresence, motion } from "motion/react";
import { AlertCircle, Check, File as FileIcon, FileArchive, FileImage, FileText, FileVideo, RotateCcw, Upload, X } from "lucide-react";
import { useCallback, useEffect, useId, useRef, useState, type ClipboardEvent, type ComponentProps, type DragEvent, type ReactNode } from "react";
import { cn } from "@/lib/utils";

export type UploadStatus = "uploading" | "done" | "error";

export type UploadFile = {
  id: string;
  name: string;
  size: number;
  type: string;
  progress: number;
  status: UploadStatus;
  error?: string;
  /** An object URL or image address for image files. */
  preview?: string;
  file?: File;
};

export type FileRejection = { file: File; reason: string };

/** 1536 → "1.5 KB". */
export function formatBytes(bytes: number) {
  if (bytes < 1024) return `${bytes} B`;
  const units = ["KB", "MB", "GB"];
  let n = bytes / 1024;
  let i = 0;
  while (n >= 1024 && i < units.length - 1) (n /= 1024), i++;
  return `${n < 10 ? n.toFixed(1) : Math.round(n)} ${units[i]}`;
}

/** Whether a file matches an accept string such as "image/*,.pdf". */
export function accepts(file: { name: string; type: string }, accept?: string) {
  if (!accept) return true;
  return accept.split(",").some((rule) => {
    const r = rule.trim().toLowerCase();
    if (r.startsWith(".")) return file.name.toLowerCase().endsWith(r);
    if (r.endsWith("/*")) return file.type.startsWith(r.slice(0, -1));
    return file.type === r;
  });
}

function kindIcon(type: string, name: string) {
  if (type.startsWith("image/")) return FileImage;
  if (type.startsWith("video/")) return FileVideo;
  if (/zip|tar|rar|7z/.test(type) || /\.(zip|tar|gz|rar|7z)$/i.test(name)) return FileArchive;
  if (type.startsWith("text/") || /pdf|document|sheet|csv/.test(type)) return FileText;
  return FileIcon;
}

export interface UseFileUploadOptions {
  accept?: string;
  /** Largest file in bytes. */
  maxSize?: number;
  maxFiles?: number;
  initial?: UploadFile[];
  /**
   * Sends one file and reports progress from 0 to 100. Leave it out to simulate an upload, which is handy in
   * prototypes; swap in your own fetch or storage call later.
   */
  upload?: (file: File, onProgress: (progress: number) => void) => Promise<void>;
}

function simulate(file: File, onProgress: (p: number) => void) {
  return new Promise<void>((resolve) => {
    let p = 0;
    const step = Math.max(4, 40 - Math.log2(file.size + 2) * 1.5);
    const id = setInterval(() => {
      p = Math.min(100, p + step * (0.5 + Math.random()));
      onProgress(p);
      if (p >= 100) clearInterval(id), resolve();
    }, 160);
  });
}

/**
 * Keeps a list of uploads: checks type, size and count, then runs each file through `upload` with progress, and
 * offers remove and retry.
 */
export function useFileUpload({ accept, maxSize, maxFiles, initial = [], upload = simulate }: UseFileUploadOptions = {}) {
  const [files, setFiles] = useState<UploadFile[]>(initial);
  const [rejected, setRejected] = useState<FileRejection[]>([]);
  const alive = useRef(true);
  const count = useRef(initial.length);
  const latest = useRef(files);
  useEffect(() => {
    latest.current = files;
  }, [files]);
  useEffect(() => {
    alive.current = true;
    return () => {
      alive.current = false;
    };
  }, []);

  const patch = (id: string, change: Partial<UploadFile>) => alive.current && setFiles((list) => list.map((f) => (f.id === id ? { ...f, ...change } : f)));

  const run = useCallback(
    (item: UploadFile) => {
      patch(item.id, { status: "uploading", progress: 0, error: undefined });
      upload(item.file ?? new File([], item.name, { type: item.type }), (progress) => patch(item.id, { progress }))
        .then(() => patch(item.id, { status: "done", progress: 100 }))
        .catch((e: unknown) => patch(item.id, { status: "error", error: e instanceof Error ? e.message : "Upload failed" }));
    },
    [upload],
  );

  const add = useCallback(
    (incoming: File[]) => {
      const bad: FileRejection[] = [];
      const good: UploadFile[] = [];
      for (const file of incoming) {
        if (!accepts(file, accept)) bad.push({ file, reason: "This file type isn't allowed" });
        else if (maxSize && file.size > maxSize) bad.push({ file, reason: `Larger than ${formatBytes(maxSize)}` });
        else if (maxFiles && count.current + good.length >= maxFiles) bad.push({ file, reason: `Only ${maxFiles} file${maxFiles === 1 ? "" : "s"} allowed` });
        else
          good.push({
            id: `${file.name}-${file.size}-${Math.random().toString(36).slice(2, 7)}`,
            name: file.name,
            size: file.size,
            type: file.type,
            progress: 0,
            status: "uploading",
            preview: file.type.startsWith("image/") ? URL.createObjectURL(file) : undefined,
            file,
          });
      }
      count.current += good.length;
      setRejected(bad);
      if (good.length) setFiles((list) => [...list, ...good]);
      good.forEach(run);
    },
    [accept, maxSize, maxFiles, run],
  );

  const remove = useCallback((id: string) => {
    setFiles((list) => {
      const f = list.find((x) => x.id === id);
      if (f?.preview?.startsWith("blob:")) URL.revokeObjectURL(f.preview);
      return list.filter((x) => x.id !== id);
    });
    count.current = Math.max(0, count.current - 1);
  }, []);

  const retry = useCallback(
    (id: string) => {
      const f = latest.current.find((x) => x.id === id);
      if (f) run(f);
    },
    [run],
  );
  const clear = useCallback(() => (setFiles([]), setRejected([]), (count.current = 0)), []);

  return { files, rejected, add, remove, retry, clear, dismissRejected: () => setRejected([]) };
}

export interface DropzoneProps extends Omit<ComponentProps<"div">, "onDrop" | "children"> {
  onFiles: (files: File[]) => void;
  accept?: string;
  multiple?: boolean;
  disabled?: boolean;
  /** default: a tall dashed area · compact: one line with a button. */
  variant?: "default" | "compact";
  /** Replaces the default text. Receives whether a file is being dragged over. */
  children?: ReactNode | ((dragging: boolean) => ReactNode);
  /** Shown under the title, e.g. "PNG or JPG up to 5 MB". */
  hint?: ReactNode;
}

/** A drop area that also opens the file picker on click, Enter or Space, and takes pasted images. */
export function Dropzone({ onFiles, accept, multiple = true, disabled = false, variant = "default", hint, className, children, ...props }: DropzoneProps) {
  const input = useRef<HTMLInputElement>(null);
  const [dragging, setDragging] = useState(false);
  const depth = useRef(0);
  const id = useId();

  const take = (list: FileList | null) => {
    if (!list?.length || disabled) return;
    const files = Array.from(list);
    onFiles(multiple ? files : files.slice(0, 1));
  };
  const drag = (e: DragEvent, delta: number) => {
    e.preventDefault();
    if (disabled) return;
    depth.current = Math.max(0, depth.current + delta);
    setDragging(depth.current > 0);
  };

  return (
    <div
      role="button"
      tabIndex={disabled ? -1 : 0}
      aria-disabled={disabled || undefined}
      aria-describedby={hint ? `${id}-hint` : undefined}
      data-dragging={dragging || undefined}
      onClick={() => !disabled && input.current?.click()}
      onKeyDown={(e) => {
        if ((e.key === "Enter" || e.key === " ") && !disabled) e.preventDefault(), input.current?.click();
      }}
      onDragEnter={(e) => drag(e, 1)}
      onDragLeave={(e) => drag(e, -1)}
      onDragOver={(e) => e.preventDefault()}
      onDrop={(e) => {
        e.preventDefault();
        depth.current = 0;
        setDragging(false);
        take(e.dataTransfer.files);
      }}
      onPaste={(e: ClipboardEvent) => take(e.clipboardData.files)}
      className={cn(
        "group relative cursor-pointer outline-none transition-[background-color,border-color,box-shadow] duration-200",
        "rounded-[18px] border-[1.5px] border-dashed border-black/[0.12] bg-neutral-50/60 hover:border-black/[0.22] hover:bg-neutral-50 focus-visible:border-neutral-950/40 focus-visible:bg-white",
        "dark:border-white/[0.14] dark:bg-white/[0.02] dark:hover:border-white/[0.26] dark:hover:bg-white/[0.04] dark:focus-visible:border-white/40",
        "data-dragging:border-neutral-950/50 data-dragging:bg-neutral-950/[0.03] dark:data-dragging:border-white/50 dark:data-dragging:bg-white/[0.06]",
        disabled && "pointer-events-none opacity-50",
        variant === "default" ? "flex flex-col items-center justify-center gap-1 px-6 py-8 text-center" : "flex items-center gap-3 px-3 py-2.5",
        className,
      )}
      {...props}
    >
      <input ref={input} type="file" accept={accept} multiple={multiple} tabIndex={-1} className="sr-only" onChange={(e) => (take(e.target.files), (e.target.value = ""))} onClick={(e) => e.stopPropagation()} />
      {typeof children === "function" ? (
        children(dragging)
      ) : children ? (
        children
      ) : variant === "default" ? (
        <>
          <motion.span
            animate={{ y: dragging ? -3 : 0, scale: dragging ? 1.06 : 1 }}
            transition={{ type: "spring", bounce: 0.35, duration: 0.35 }}
            className="mb-2 flex size-11 items-center justify-center rounded-[13px] bg-white text-neutral-500 shadow-[0_1px_2px_rgb(0_0_0/0.06)] ring-1 ring-black/[0.06] dark:bg-white/[0.06] dark:text-neutral-300 dark:ring-white/[0.08]"
          >
            <Upload className="size-[18px]" />
          </motion.span>
          <p className="text-[13.5px] font-medium text-neutral-900 dark:text-white">
            {dragging ? "Drop to upload" : (
              <>
                Drop files here or <span className="underline decoration-neutral-950/25 underline-offset-4 dark:decoration-white/30">browse</span>
              </>
            )}
          </p>
          {hint && (
            <p id={`${id}-hint`} className="text-[12px] text-neutral-500">
              {hint}
            </p>
          )}
        </>
      ) : (
        <>
          <span className="flex size-8 shrink-0 items-center justify-center rounded-[9px] bg-white text-neutral-500 ring-1 ring-black/[0.06] dark:bg-white/[0.06] dark:ring-white/[0.08]">
            <Upload className="size-3.5" />
          </span>
          <span className="min-w-0 flex-1 text-left">
            <span className="block text-[13px] font-medium text-neutral-900 dark:text-white">{dragging ? "Drop to upload" : "Drop files or browse"}</span>
            {hint && (
              <span id={`${id}-hint`} className="block truncate text-[11.5px] text-neutral-500">
                {hint}
              </span>
            )}
          </span>
          <span className="flex h-7 items-center rounded-[8px] bg-white px-2.5 text-[12px] font-medium text-neutral-800 shadow-[0_1px_2px_rgb(0_0_0/0.06)] ring-1 ring-black/[0.08] dark:bg-white/[0.08] dark:text-white dark:ring-white/[0.1]">Choose</span>
        </>
      )}
    </div>
  );
}

export interface FileItemProps {
  file: UploadFile;
  onRemove?: () => void;
  onRetry?: () => void;
  className?: string;
}

/** One file with its type icon or thumbnail, size, progress and remove or retry. */
export function FileItem({ file, onRemove, onRetry, className }: FileItemProps) {
  const Icon = kindIcon(file.type, file.name);
  const failed = file.status === "error";
  const [broken, setBroken] = useState(false);
  return (
    <div className={cn("relative flex items-center gap-3 overflow-hidden rounded-[14px] bg-white px-3 py-2.5 ring-1 ring-black/[0.07] dark:bg-white/[0.03] dark:ring-white/[0.08]", failed && "ring-red-500/30 dark:ring-red-400/30", className)}>
      {file.preview && !broken ? (
        <img src={file.preview} alt="" onError={() => setBroken(true)} className="size-9 shrink-0 rounded-[9px] object-cover ring-1 ring-black/[0.06] dark:ring-white/[0.08]" />
      ) : (
        <span className={cn("flex size-9 shrink-0 items-center justify-center rounded-[9px] bg-neutral-950/[0.04] text-neutral-500 dark:bg-white/[0.06] dark:text-neutral-400", failed && "bg-red-500/10 text-red-600 dark:text-red-400")}>
          {failed ? <AlertCircle className="size-4" /> : <Icon className="size-4" />}
        </span>
      )}
      <div className="min-w-0 flex-1">
        <p className="truncate text-[13px] font-medium text-neutral-900 dark:text-white">{file.name}</p>
        <p className={cn("flex items-center gap-1.5 text-[11.5px] tabular-nums text-neutral-500", failed && "text-red-600 dark:text-red-400")}>
          {failed ? (
            file.error
          ) : file.status === "uploading" ? (
            <>
              {formatBytes((file.size * file.progress) / 100)} of {formatBytes(file.size)} · {Math.round(file.progress)}%
            </>
          ) : (
            <>
              {formatBytes(file.size)}
              <span className="flex items-center gap-0.5 text-emerald-600 dark:text-emerald-400">
                <Check className="size-3" strokeWidth={2.5} />
                Uploaded
              </span>
            </>
          )}
        </p>
      </div>
      {failed && onRetry && (
        <button type="button" onClick={onRetry} aria-label={`Retry ${file.name}`} className="flex size-7 shrink-0 items-center justify-center rounded-[8px] text-neutral-500 outline-none hover:bg-neutral-950/[0.05] hover:text-neutral-900 focus-visible:bg-neutral-950/[0.06] dark:hover:bg-white/[0.08] dark:hover:text-white">
          <RotateCcw className="size-3.5" />
        </button>
      )}
      {onRemove && (
        <button type="button" onClick={onRemove} aria-label={file.status === "uploading" ? `Cancel ${file.name}` : `Remove ${file.name}`} className="flex size-7 shrink-0 items-center justify-center rounded-[8px] text-neutral-400 outline-none hover:bg-neutral-950/[0.05] hover:text-neutral-900 focus-visible:bg-neutral-950/[0.06] dark:hover:bg-white/[0.08] dark:hover:text-white">
          <X className="size-3.5" />
        </button>
      )}
      <AnimatePresence>
        {file.status === "uploading" && (
          <motion.span exit={{ opacity: 0 }} transition={{ duration: 0.3, delay: 0.2 }} className="absolute inset-x-0 bottom-0 h-[2px] bg-neutral-950/[0.05] dark:bg-white/[0.06]">
            <motion.span className="block h-full origin-left bg-neutral-950 dark:bg-white" initial={false} animate={{ scaleX: file.progress / 100 }} transition={{ type: "spring", bounce: 0, duration: 0.4 }} />
          </motion.span>
        )}
      </AnimatePresence>
    </div>
  );
}

/** Files stacked in a list; new ones slide in and removed ones fold away. */
export function FileList({ files, onRemove, onRetry, className }: { files: UploadFile[]; onRemove?: (id: string) => void; onRetry?: (id: string) => void; className?: string }) {
  return (
    <ul className={cn("flex flex-col gap-2", className)}>
      <AnimatePresence initial={false}>
        {files.map((f) => (
          <motion.li key={f.id} layout initial={{ opacity: 0, y: 6 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, scale: 0.98, transition: { duration: 0.15 } }} transition={{ type: "spring", bounce: 0, duration: 0.35 }}>
            <FileItem file={f} onRemove={onRemove && (() => onRemove(f.id))} onRetry={onRetry && (() => onRetry(f.id))} />
          </motion.li>
        ))}
      </AnimatePresence>
    </ul>
  );
}

/** Image files as square thumbnails with a progress veil and a remove button on hover. */
export function FileGrid({ files, onRemove, className, children }: { files: UploadFile[]; onRemove?: (id: string) => void; className?: string; children?: ReactNode }) {
  return (
    <ul className={cn("grid grid-cols-[repeat(auto-fill,minmax(96px,1fr))] gap-2", className)}>
      <AnimatePresence initial={false}>
        {files.map((f) => (
          <motion.li key={f.id} layout initial={{ opacity: 0, scale: 0.92 }} animate={{ opacity: 1, scale: 1 }} exit={{ opacity: 0, scale: 0.92, transition: { duration: 0.15 } }} transition={{ type: "spring", bounce: 0.2, duration: 0.4 }} className="group relative aspect-square overflow-hidden rounded-[14px] bg-neutral-100 ring-1 ring-black/[0.06] dark:bg-white/[0.05] dark:ring-white/[0.08]">
            {f.preview && <img src={f.preview} alt={f.name} className={cn("size-full object-cover transition-[filter] duration-500", f.status === "uploading" && "blur-[2px] brightness-90")} />}
            {f.status === "uploading" && (
              <span className="absolute inset-x-2 bottom-2 h-1 overflow-hidden rounded-full bg-white/40">
                <motion.span className="block h-full origin-left rounded-full bg-white" initial={false} animate={{ scaleX: f.progress / 100 }} transition={{ type: "spring", bounce: 0, duration: 0.4 }} />
              </span>
            )}
            {onRemove && (
              <button type="button" onClick={() => onRemove(f.id)} aria-label={`Remove ${f.name}`} className="absolute right-1.5 top-1.5 flex size-6 items-center justify-center rounded-full bg-black/55 text-white opacity-0 outline-none backdrop-blur-sm transition-opacity hover:bg-black/70 focus-visible:opacity-100 group-hover:opacity-100">
                <X className="size-3" />
              </button>
            )}
          </motion.li>
        ))}
      </AnimatePresence>
      {children}
    </ul>
  );
}

/** Lists files that were turned away and why. */
export function FileRejections({ rejected, onDismiss, className }: { rejected: FileRejection[]; onDismiss?: () => void; className?: string }) {
  return (
    <AnimatePresence initial={false}>
      {rejected.length > 0 && (
        <motion.div initial={{ opacity: 0, height: 0 }} animate={{ opacity: 1, height: "auto" }} exit={{ opacity: 0, height: 0 }} transition={{ type: "spring", bounce: 0, duration: 0.3 }} className={cn("overflow-hidden", className)}>
          <div role="alert" className="flex items-start gap-2.5 rounded-[14px] bg-red-50 px-3 py-2.5 text-[12.5px] ring-1 ring-red-500/15 dark:bg-red-500/10 dark:ring-red-400/20">
            <AlertCircle className="mt-px size-4 shrink-0 text-red-600 dark:text-red-400" />
            <ul className="min-w-0 flex-1 space-y-0.5">
              {rejected.map((r, i) => (
                <li key={i} className="truncate text-red-800 dark:text-red-200">
                  <span className="font-medium">{r.file.name}</span> · {r.reason}
                </li>
              ))}
            </ul>
            {onDismiss && (
              <button type="button" onClick={onDismiss} aria-label="Dismiss" className="-m-1 flex size-6 items-center justify-center rounded-[7px] text-red-700/70 hover:bg-red-500/10 hover:text-red-800 dark:text-red-300/70">
                <X className="size-3.5" />
              </button>
            )}
          </div>
        </motion.div>
      )}
    </AnimatePresence>
  );
}

export default Dropzone;

2f:T64a,"use client"; import { useEffect, useRef } from "react"; import { Dropzone, FileList, FileRejections, useFileUpload } from "@/components/scalar-ui/file-upload"; const MB = 1024 * 1024; export default function Demo() { const upload = useFileUpload({ maxSize: 50 * MB, maxFiles: 6, initial: [ { id: "guide", name: "brand-guide.pdf", size: 2.4 * MB, type: "application/pdf", progress: 100, status: "done" }, { id: "deck", name: "q3-board-deck.key", size: 31 * MB, type: "application/vnd.apple.keynote", progress: 0, status: "error", error: "Connection lost · try again" }, ], }); const started = useRef(false); useEffect(() => { if (started.current) return; started.current = true; upload.add([new File([new ArrayBuffer(18 * MB)], "launch-teaser.mp4", { type: "video/mp4" })]); }, [upload]); return (

Upload files

Add the assets for the launch. They're shared with everyone on the project.

); } 30:T396d,

"use client";

import { useEffect, useRef } from "react";
import { Dropzone, FileList, FileRejections, useFileUpload } from "@/components/scalar-ui/file-upload";

const MB = 1024 * 1024;

export default function Demo() {
  const upload = useFileUpload({
    maxSize: 50 * MB,
    maxFiles: 6,
    initial: [
      { id: "guide", name: "brand-guide.pdf", size: 2.4 * MB, type: "application/pdf", progress: 100, status: "done" },
      { id: "deck", name: "q3-board-deck.key", size: 31 * MB, type: "application/vnd.apple.keynote", progress: 0, status: "error", error: "Connection lost · try again" },
    ],
  });
  const started = useRef(false);
  useEffect(() => {
    if (started.current) return;
    started.current = true;
    upload.add([new File([new ArrayBuffer(18 * MB)], "launch-teaser.mp4", { type: "video/mp4" })]);
  }, [upload]);

  return (
    <div className="w-[min(100%,520px)] rounded-[22px] bg-white p-5 shadow-[0_1px_2px_rgb(0_0_0/0.04),0_12px_32px_-16px_rgb(0_0_0/0.12)] ring-1 ring-black/[0.06] dark:bg-neutral-900 dark:ring-white/[0.08]">
      <p className="text-[15px] font-semibold text-neutral-950 dark:text-white">Upload files</p>
      <p className="mb-4 text-[12.5px] text-neutral-500">Add the assets for the launch. They're shared with everyone on the project.</p>
      <Dropzone onFiles={upload.add} hint="Any file up to 50 MB · 6 files at most" />
      <FileRejections rejected={upload.rejected} onDismiss={upload.dismissRejected} className="mt-3" />
      <FileList files={upload.files} onRemove={upload.remove} onRetry={upload.retry} className="mt-3" />
    </div>
  );
}

31:T527,"use client"; import { Dropzone, FileList, useFileUpload } from "@/components/scalar-ui/file-upload"; export default function Example() { const upload = useFileUpload({ maxSize: 10 * 1024 * 1024, initial: [{ id: "a", name: "invoice-0412.pdf", size: 184_000, type: "application/pdf", progress: 100, status: "done" }], }); return ( ); } 32:T2bda,

"use client";

import { Dropzone, FileList, useFileUpload } from "@/components/scalar-ui/file-upload";

export default function Example() {
  const upload = useFileUpload({
    maxSize: 10 * 1024 * 1024,
    initial: [{ id: "a", name: "invoice-0412.pdf", size: 184_000, type: "application/pdf", progress: 100, status: "done" }],
  });
  return (
    <form onSubmit={(e) => e.preventDefault()} className="flex w-[min(100%,440px)] flex-col gap-4">
      <label className="flex flex-col gap-1.5">
        <span className="text-[13px] font-medium text-neutral-900 dark:text-white">Subject</span>
        <input defaultValue="Refund for order #4821" className="h-10 rounded-xl bg-white px-3 text-sm text-neutral-900 shadow-[0_1px_2px_rgb(0_0_0/0.04)] outline-none ring-1 ring-inset ring-black/[0.1] focus:ring-2 focus:ring-neutral-950/20 dark:bg-white/[0.03] dark:text-white dark:ring-white/[0.12] dark:focus:ring-white/25" />
      </label>
      <div className="flex flex-col gap-1.5">
        <span className="text-[13px] font-medium text-neutral-900 dark:text-white">Attachments</span>
        <Dropzone variant="compact" onFiles={upload.add} hint="PDF, PNG or JPG up to 10 MB" />
        <FileList files={upload.files} onRemove={upload.remove} onRetry={upload.retry} className="mt-1" />
      </div>
    </form>
  );
}

33:T5ed,"use client"; import { Plus } from "lucide-react"; import { Dropzone, FileGrid, useFileUpload } from "@/components/scalar-ui/file-upload"; const photo = (id: string) => `https://images.unsplash.com/photo-${id}?w=240&h=240&fit=crop&auto=format&q=70`; const PHOTOS = ["1441974231531-c6227db76b6e", "1500530855697-b586d89ba3ee", "1472214103451-9374bd1c798e", "1507525428034-b723cf961d3e"]; export default function Example() { const upload = useFileUpload({ accept: "image/*", maxFiles: 8, initial: PHOTOS.map((id, i) => ({ id, name: `photo-${i + 1}.jpg`, size: 1_200_000, type: "image/jpeg", progress: 100, status: "done" as const, preview: photo(id) })), }); return (

Gallery

{upload.files.length} of 8

{upload.files.length < 8 && (

{(dragging) => }

)}

); } 34:T3c37,

"use client";

import { Plus } from "lucide-react";
import { Dropzone, FileGrid, useFileUpload } from "@/components/scalar-ui/file-upload";

const photo = (id: string) => `https://images.unsplash.com/photo-${id}?w=240&h=240&fit=crop&auto=format&q=70`;
const PHOTOS = ["1441974231531-c6227db76b6e", "1500530855697-b586d89ba3ee", "1472214103451-9374bd1c798e", "1507525428034-b723cf961d3e"];

export default function Example() {
  const upload = useFileUpload({
    accept: "image/*",
    maxFiles: 8,
    initial: PHOTOS.map((id, i) => ({ id, name: `photo-${i + 1}.jpg`, size: 1_200_000, type: "image/jpeg", progress: 100, status: "done" as const, preview: photo(id) })),
  });
  return (
    <div className="w-[min(100%,480px)]">
      <div className="mb-3 flex items-baseline justify-between">
        <p className="text-[14px] font-semibold text-neutral-950 dark:text-white">Gallery</p>
        <p className="text-[12px] tabular-nums text-neutral-500">{upload.files.length} of 8</p>
      </div>
      <FileGrid files={upload.files} onRemove={upload.remove}>
        {upload.files.length < 8 && (
          <li className="aspect-square">
            <Dropzone accept="image/*" onFiles={upload.add} aria-label="Add photos" className="flex size-full items-center justify-center rounded-[14px] p-0">
              {(dragging) => <Plus className={dragging ? "size-5 text-neutral-900 dark:text-white" : "size-5 text-neutral-400"} />}
            </Dropzone>
          </li>
        )}
      </FileGrid>
    </div>
  );
}

35:T43f,"use client"; import { useEffect, useRef } from "react"; import { Dropzone, FileList, FileRejections, useFileUpload } from "@/components/scalar-ui/file-upload"; const MB = 1024 * 1024; export default function Example() { const upload = useFileUpload({ accept: "image/png,image/jpeg", maxSize: 5 * MB }); const ran = useRef(false); useEffect(() => { if (ran.current) return; ran.current = true; upload.add([ new File([new ArrayBuffer(800_000)], "cover.png", { type: "image/png" }), new File([new ArrayBuffer(12 * MB)], "poster-print.jpg", { type: "image/jpeg" }), new File([new ArrayBuffer(40_000)], "setup.exe", { type: "application/x-msdownload" }), ]); }, [upload]); return (

); } 36:T2ff2,

"use client";

import { useEffect, useRef } from "react";
import { Dropzone, FileList, FileRejections, useFileUpload } from "@/components/scalar-ui/file-upload";

const MB = 1024 * 1024;

export default function Example() {
  const upload = useFileUpload({ accept: "image/png,image/jpeg", maxSize: 5 * MB });
  const ran = useRef(false);
  useEffect(() => {
    if (ran.current) return;
    ran.current = true;
    upload.add([
      new File([new ArrayBuffer(800_000)], "cover.png", { type: "image/png" }),
      new File([new ArrayBuffer(12 * MB)], "poster-print.jpg", { type: "image/jpeg" }),
      new File([new ArrayBuffer(40_000)], "setup.exe", { type: "application/x-msdownload" }),
    ]);
  }, [upload]);
  return (
    <div className="w-[min(100%,460px)]">
      <Dropzone accept="image/png,image/jpeg" onFiles={upload.add} hint="PNG or JPG up to 5 MB" className="py-6" />
      <FileRejections rejected={upload.rejected} onDismiss={upload.dismissRejected} className="mt-3" />
      <FileList files={upload.files} onRemove={upload.remove} className="mt-3" />
    </div>
  );
}

37:T5e0,"use client"; import { FileSpreadsheet } from "lucide-react"; import { Dropzone, FileItem, useFileUpload } from "@/components/scalar-ui/file-upload"; export default function Example() { const upload = useFileUpload({ accept: ".csv,text/csv", maxFiles: 1 }); const file = upload.files[0]; return (

{file ? (

upload.remove(file.id)} />

Wrong file?{" "}

) : ( {(dragging) => ( <>

{dragging ? "Drop your CSV" : "Import contacts from a CSV"}

One row per person, with a header row

)} )}

); } 38:T38c8,

"use client";

import { FileSpreadsheet } from "lucide-react";
import { Dropzone, FileItem, useFileUpload } from "@/components/scalar-ui/file-upload";

export default function Example() {
  const upload = useFileUpload({ accept: ".csv,text/csv", maxFiles: 1 });
  const file = upload.files[0];
  return (
    <div className="w-[min(100%,420px)]">
      {file ? (
        <div className="flex flex-col gap-2">
          <FileItem file={file} onRemove={() => upload.remove(file.id)} />
          <p className="px-1 text-[12px] text-neutral-500">
            Wrong file?{" "}
            <button type="button" onClick={() => upload.remove(file.id)} className="font-medium text-neutral-900 underline underline-offset-4 dark:text-white">
              Choose another
            </button>
          </p>
        </div>
      ) : (
        <Dropzone accept=".csv,text/csv" multiple={false} onFiles={upload.add}>
          {(dragging) => (
            <>
              <span className="mb-2 flex size-11 items-center justify-center rounded-[13px] bg-emerald-500/10 text-emerald-600 dark:text-emerald-400">
                <FileSpreadsheet className="size-5" />
              </span>
              <p className="text-[13.5px] font-medium text-neutral-900 dark:text-white">{dragging ? "Drop your CSV" : "Import contacts from a CSV"}</p>
              <p className="text-[12px] text-neutral-500">One row per person, with a header row</p>
            </>
          )}
        </Dropzone>
      )}
    </div>
  );
}

29:["$","section","file-upload",{"id":"file-upload","aria-labelledby":"file-upload-title","className":"scroll-mt-24","children":[["$","header",null,{"className":"mb-5 flex flex-wrap items-start justify-between gap-4","children":[["$","div",null,{"className":"min-w-0 max-w-2xl","children":[["$","div",null,{"className":"flex flex-wrap items-center gap-2","children":[["$","h2",null,{"id":"file-upload-title","className":"sr-only","children":"File Upload"}],false,false]}],false,["$","p",null,{"className":"font-mono text-[11.5px] text-fg-subtle","children":"motion · lucide-react"}]]}],false]}],["$","$L2b",null,{"children":["$","$L2c",null,{"slug":"file-upload","gated":{"unlocked":true,"files":[{"name":"file-upload.tsx","code":"$2d","html":"$2e"},{"name":"demo.tsx","code":"$2f","html":"$30"}],"examples":{"compact":{"name":"compact.tsx","code":"$31","html":"$32"},"image-grid":{"name":"image-grid.tsx","code":"$33","html":"$34"},"rejected":{"name":"rejected.tsx","code":"$35","html":"$36"},"single":{"name":"single.tsx","code":"$37","html":"$38"}},"prompt":"","promptHtml":""},"install":{"cli":"npx scalar-ui add file-upload","shadcn":"npx shadcn@latest add https://scalarui.com/r/file-upload.json","shadcnConfig":"{\n \"registries\": {\n \"@scalar-ui\": {\n \"url\": \"https://scalarui.com/r/{name}.json\",\n \"headers\": {\n \"Authorization\": \"Bearer ${SCALAR_TOKEN}\"\n }\n }\n }\n}","mcpClaude":"claude mcp add scalar-ui \\\n -e SCALAR_TOKEN=slk_your_token \\\n -e SCALAR_URL=https://scalarui.com \\\n -- npx -y @scalardesign/mcp","mcpJson":"{\n \"mcpServers\": {\n \"scalar-ui\": {\n \"command\": \"npx\",\n \"args\": [\n \"-y\",\n \"@scalardesign/mcp\"\n ],\n \"env\": {\n \"SCALAR_TOKEN\": \"slk_your_token\",\n \"SCALAR_URL\": \"https://scalarui.com\"\n }\n }\n }\n}","npm":"npm install motion lucide-react","origin":"https://scalarui.com"},"open":true,"prompt":false,"shadcn":false,"preview":"$L39","toolbar":"$L3a"}]}],["$L3b","$L3c","$L3d","$L3e"]]}]

File Uploads

File Uploads

Compact

Image Grid

Rejected Files

Single File