@teamix-evo/ui 0.3.0 → 0.5.0

package/src/components/upload/index.tsx

@@ -0,0 +1,858 @@
+/**
+ * 上传 Upload
+ *
+ * 文件选择与上传组件。支持点击 / 拖拽两种触发形态，内置文件列表（text / image）
+ * 与状态管理，并通过回调式 `customRequest` 与业务真实上传链路对接（含进度、abort、错误重试）。
+ *
+ * @when
+ * - 表单中需要上传附件 / 头像 / 图片
+ * - 批量文件导入（多选 + 数量 / 体积限制）
+ * - 拖拽上传区
+ *
+ * 组合结构：Upload（按钮触发）/ UploadDragger（拖拽触发） — 两者共享上传状态机，可独立使用。
+ */
+
+'use client';
+
+import * as React from 'react';
+import {
+  File as FileIcon,
+  ImageIcon,
+  RotateCw,
+  Upload as UploadIcon,
+  X,
+} from 'lucide-react';
+
+import { cn } from '@/lib/utils';
+import { Progress } from '@/components/progress';
+
+// ─── Types ──────────────────────────────────────────────────────────────────
+
+type UploadStatus = 'pending' | 'uploading' | 'done' | 'error' | 'removed';
+
+interface UploadFile {
+  /** 文件唯一标识。 */
+  uid: string;
+  /** 文件名。 */
+  name: string;
+  /** 文件状态。 */
+  status: UploadStatus;
+  /** 上传进度 0-100。 */
+  percent?: number;
+  /** 文件大小（字节）。 */
+  size?: number;
+  /** MIME 类型。 */
+  type?: string;
+  /** 上传完成后的远端地址。 */
+  url?: string;
+  /** 缩略图 URL（image 列表展示）。图片类文件未提供时自动用 ObjectURL 兜底。 */
+  thumbUrl?: string;
+  /** customRequest onSuccess 透传的服务端响应。 */
+  response?: unknown;
+  /** 失败原因。`error.name` 可能为 `BEFOREUPLOAD_REJECT` / `EXCEED_LIMIT` / `EXCEED_SIZE`。 */
+  error?: Error;
+  /** 原生 File 对象，便于业务侧再处理。 */
+  originFile?: File;
+}
+
+interface UploadRequestOptions {
+  file: File;
+  filename?: string;
+  onProgress: (percent: number) => void;
+  onSuccess: (response?: unknown, url?: string) => void;
+  onError: (err: Error) => void;
+}
+
+interface UploadChangeInfo {
+  /** 触发本次变更的文件项。 */
+  file: UploadFile;
+  /** 事件类型。 */
+  type: 'add' | 'progress' | 'success' | 'error' | 'remove';
+}
+
+interface UploadProps
+  extends Omit<React.ComponentProps<'div'>, 'onChange' | 'children'> {
+  /** 受控文件列表。 */
+  fileList?: UploadFile[];
+  /** 默认文件列表（非受控）。@default [] */
+  defaultFileList?: UploadFile[];
+  /** 接受的文件类型（同 input accept）。 */
+  accept?: string;
+  /** 是否多选。@default false */
+  multiple?: boolean;
+  /** 最大文件数；超出触发 onLimitExceed。 */
+  maxCount?: number;
+  /** 单文件最大体积（字节）；超出触发 onSizeExceed 并阻止上传。 */
+  maxSize?: number;
+  /** 是否禁用。@default false */
+  disabled?: boolean;
+  /** 列表展示样式：text 文字行 / image 图文行（带缩略图）。@default 'text' */
+  listType?: 'text' | 'image';
+  /** 是否展示文件列表。@default true */
+  showFileList?: boolean;
+  /** 是否显示删除按钮。@default true */
+  showRemoveIcon?: boolean;
+  /** 上传前钩子；返回 false / Promise.reject 阻止上传。 */
+  beforeUpload?: (
+    file: File,
+    fileList: File[],
+  ) => boolean | Promise<boolean | void>;
+  /** 自定义上传实现；不传则文件入列表后停留在 pending 等待业务自行驱动。 */
+  customRequest?: (
+    options: UploadRequestOptions,
+  ) => void | { abort: () => void };
+  /** 列表变化（含状态流转）的统一回调。 */
+  onChange?: (fileList: UploadFile[], info?: UploadChangeInfo) => void;
+  /** 移除前钩子；返回 false / Promise<false> 阻止移除。 */
+  onRemove?: (file: UploadFile) => boolean | Promise<boolean | void> | void;
+  /** 点击预览（image 列表用）。 */
+  onPreview?: (file: UploadFile) => void;
+  /** 超出 maxCount 时调用。 */
+  onLimitExceed?: (file: File, fileList: File[]) => void;
+  /** 超出 maxSize 时调用。 */
+  onSizeExceed?: (file: File) => void;
+  /** 自定义文件项整行渲染。 */
+  itemRender?: (
+    file: UploadFile,
+    helpers: { remove: () => void; preview: () => void; retry: () => void },
+  ) => React.ReactNode;
+  /** 自定义文件图标渲染（仅默认 itemRender 生效）。 */
+  iconRender?: (file: UploadFile) => React.ReactNode;
+  /** 触发器内容（按钮模式）。Dragger 模式下作为提示文案的替换。 */
+  children?: React.ReactNode;
+}
+
+// ─── Internal helpers ───────────────────────────────────────────────────────
+
+const genUid = () =>
+  `upload-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`;
+
+const isImageFile = (file: { type?: string; name?: string }) => {
+  if (file.type?.startsWith('image/')) return true;
+  return /\.(png|jpe?g|gif|bmp|webp|svg|ico)$/i.test(file.name ?? '');
+};
+
+const formatBytes = (size?: number) => {
+  if (size === undefined || size < 0) return '';
+  if (size < 1024) return `${size} B`;
+  if (size < 1024 * 1024) return `${(size / 1024).toFixed(1)} KB`;
+  return `${(size / 1024 / 1024).toFixed(1)} MB`;
+};
+
+// ─── useUploadCore — 状态机与上传调度 ────────────────────────────────────────
+
+interface UseUploadCoreOptions
+  extends Pick<
+    UploadProps,
+    | 'fileList'
+    | 'defaultFileList'
+    | 'maxCount'
+    | 'maxSize'
+    | 'beforeUpload'
+    | 'customRequest'
+    | 'onChange'
+    | 'onRemove'
+    | 'onLimitExceed'
+    | 'onSizeExceed'
+    | 'listType'
+  > {
+  disabled: boolean;
+}
+
+function useUploadCore(opts: UseUploadCoreOptions) {
+  const {
+    fileList: controlledFileList,
+    defaultFileList = [],
+    maxCount,
+    maxSize,
+    beforeUpload,
+    customRequest,
+    onChange,
+    onRemove,
+    onLimitExceed,
+    onSizeExceed,
+    listType,
+    disabled,
+  } = opts;
+
+  const [internal, setInternal] = React.useState<UploadFile[]>(defaultFileList);
+  const isControlled = controlledFileList !== undefined;
+  const fileList = isControlled ? controlledFileList! : internal;
+
+  // 用 ref 同步最新列表，避免异步回调拿到陈旧值
+  const fileListRef = React.useRef(fileList);
+  fileListRef.current = fileList;
+
+  // 跟踪每个 uid 的 abort 与 ObjectURL，便于清理
+  const abortMapRef = React.useRef<Map<string, () => void>>(new Map());
+  const objectUrlMapRef = React.useRef<Map<string, string>>(new Map());
+
+  const commit = React.useCallback(
+    (next: UploadFile[], info?: UploadChangeInfo) => {
+      fileListRef.current = next;
+      if (!isControlled) setInternal(next);
+      onChange?.(next, info);
+    },
+    [isControlled, onChange],
+  );
+
+  const patchFile = React.useCallback(
+    (
+      uid: string,
+      patch: Partial<UploadFile>,
+      eventType: UploadChangeInfo['type'],
+    ) => {
+      const current = fileListRef.current;
+      const idx = current.findIndex((f) => f.uid === uid);
+      if (idx < 0) return;
+      const merged: UploadFile = { ...current[idx]!, ...patch };
+      const next = [...current];
+      next[idx] = merged;
+      commit(next, { file: merged, type: eventType });
+    },
+    [commit],
+  );
+
+  const startUpload = React.useCallback(
+    (uploadFile: UploadFile, originFile: File) => {
+      if (!customRequest) return;
+      patchFile(
+        uploadFile.uid,
+        { status: 'uploading', percent: 0 },
+        'progress',
+      );
+      try {
+        const handle = customRequest({
+          file: originFile,
+          filename: originFile.name,
+          onProgress: (percent) => {
+            patchFile(
+              uploadFile.uid,
+              {
+                status: 'uploading',
+                percent: Math.max(0, Math.min(100, percent)),
+              },
+              'progress',
+            );
+          },
+          onSuccess: (response, url) => {
+            abortMapRef.current.delete(uploadFile.uid);
+            patchFile(
+              uploadFile.uid,
+              {
+                status: 'done',
+                percent: 100,
+                response,
+                url: url ?? uploadFile.url,
+              },
+              'success',
+            );
+          },
+          onError: (err) => {
+            abortMapRef.current.delete(uploadFile.uid);
+            patchFile(uploadFile.uid, { status: 'error', error: err }, 'error');
+          },
+        });
+        if (handle && typeof handle.abort === 'function') {
+          abortMapRef.current.set(uploadFile.uid, handle.abort);
+        }
+      } catch (err) {
+        patchFile(
+          uploadFile.uid,
+          {
+            status: 'error',
+            error: err instanceof Error ? err : new Error(String(err)),
+          },
+          'error',
+        );
+      }
+    },
+    [customRequest, patchFile],
+  );
+
+  const handleFiles = React.useCallback(
+    async (rawFiles: FileList | null) => {
+      if (!rawFiles || disabled) return;
+      const incoming = Array.from(rawFiles);
+      const current = fileListRef.current;
+
+      // 1) maxCount 截断
+      let remaining = incoming;
+      if (maxCount !== undefined) {
+        const slot = Math.max(0, maxCount - current.length);
+        if (slot < incoming.length) {
+          incoming.slice(slot).forEach((f) => onLimitExceed?.(f, incoming));
+        }
+        remaining = incoming.slice(0, slot);
+      }
+
+      // 2) maxSize 过滤
+      remaining = remaining.filter((f) => {
+        if (maxSize !== undefined && f.size > maxSize) {
+          onSizeExceed?.(f);
+          return false;
+        }
+        return true;
+      });
+
+      if (remaining.length === 0) return;
+
+      // 3) 先入列为 pending
+      const toAppend: { file: UploadFile; origin: File }[] = remaining.map(
+        (f) => {
+          const uid = genUid();
+          let thumbUrl: string | undefined;
+          if (listType === 'image' && isImageFile(f)) {
+            try {
+              thumbUrl = URL.createObjectURL(f);
+              objectUrlMapRef.current.set(uid, thumbUrl);
+            } catch {
+              thumbUrl = undefined;
+            }
+          }
+          return {
+            origin: f,
+            file: {
+              uid,
+              name: f.name,
+              status: 'pending',
+              percent: 0,
+              size: f.size,
+              type: f.type,
+              thumbUrl,
+              originFile: f,
+            },
+          };
+        },
+      );
+
+      const merged = [...current, ...toAppend.map((x) => x.file)];
+      commit(merged, {
+        file: toAppend[toAppend.length - 1]!.file,
+        type: 'add',
+      });
+
+      // 4) 逐个跑 beforeUpload + customRequest
+      for (const { file: uploadFile, origin } of toAppend) {
+        let proceed: boolean | void = true;
+        if (beforeUpload) {
+          try {
+            const ret = await beforeUpload(origin, remaining);
+            proceed = ret;
+          } catch {
+            proceed = false;
+          }
+        }
+        if (proceed === false) {
+          const err = new Error('beforeUpload rejected');
+          err.name = 'BEFOREUPLOAD_REJECT';
+          patchFile(uploadFile.uid, { status: 'error', error: err }, 'error');
+          continue;
+        }
+        if (customRequest) {
+          startUpload(uploadFile, origin);
+        }
+        // 无 customRequest: 保持 pending，由业务自行驱动
+      }
+    },
+    [
+      disabled,
+      maxCount,
+      maxSize,
+      listType,
+      beforeUpload,
+      customRequest,
+      onLimitExceed,
+      onSizeExceed,
+      commit,
+      patchFile,
+      startUpload,
+    ],
+  );
+
+  const removeFile = React.useCallback(
+    async (file: UploadFile) => {
+      const result = onRemove?.(file);
+      const ok = result instanceof Promise ? await result : result;
+      if (ok === false) return;
+
+      // abort + revoke
+      const abort = abortMapRef.current.get(file.uid);
+      if (abort) {
+        try {
+          abort();
+        } catch {
+          /* noop */
+        }
+        abortMapRef.current.delete(file.uid);
+      }
+      const objectUrl = objectUrlMapRef.current.get(file.uid);
+      if (objectUrl) {
+        URL.revokeObjectURL(objectUrl);
+        objectUrlMapRef.current.delete(file.uid);
+      }
+
+      const next = fileListRef.current.filter((f) => f.uid !== file.uid);
+      commit(next, { file: { ...file, status: 'removed' }, type: 'remove' });
+    },
+    [commit, onRemove],
+  );
+
+  const retryFile = React.useCallback(
+    (file: UploadFile) => {
+      if (!file.originFile || !customRequest) return;
+      startUpload(file, file.originFile);
+    },
+    [customRequest, startUpload],
+  );
+
+  // 卸载时清理所有 ObjectURL
+  React.useEffect(() => {
+    const map = objectUrlMapRef.current;
+    return () => {
+      map.forEach((url) => URL.revokeObjectURL(url));
+      map.clear();
+    };
+  }, []);
+
+  return { fileList, handleFiles, removeFile, retryFile };
+}
+
+// ─── UploadList ─────────────────────────────────────────────────────────────
+
+interface UploadListProps {
+  fileList: UploadFile[];
+  listType: 'text' | 'image';
+  showRemoveIcon: boolean;
+  onRemove: (file: UploadFile) => void;
+  onPreview?: (file: UploadFile) => void;
+  onRetry: (file: UploadFile) => void;
+  itemRender?: UploadProps['itemRender'];
+  iconRender?: UploadProps['iconRender'];
+}
+
+function UploadList({
+  fileList,
+  listType,
+  showRemoveIcon,
+  onRemove,
+  onPreview,
+  onRetry,
+  itemRender,
+  iconRender,
+}: UploadListProps) {
+  if (fileList.length === 0) return null;
+
+  return (
+    <div
+      data-slot="upload-list"
+      data-list-type={listType}
+      className={cn('flex flex-col gap-1', listType === 'image' && 'gap-1.5')}
+    >
+      {fileList.map((file) => {
+        const helpers = {
+          remove: () => onRemove(file),
+          preview: () => onPreview?.(file),
+          retry: () => onRetry(file),
+        };
+
+        if (itemRender) {
+          return (
+            <React.Fragment key={file.uid}>
+              {itemRender(file, helpers)}
+            </React.Fragment>
+          );
+        }
+
+        const isError = file.status === 'error';
+        const isUploading = file.status === 'uploading';
+        const showProgress = isUploading && (file.percent ?? 0) < 100;
+
+        return (
+          <div
+            key={file.uid}
+            data-slot="upload-item"
+            data-list-type={listType}
+            data-status={file.status}
+            className={cn(
+              'group flex items-center gap-2 rounded-sm px-2 py-1 text-xs transition-colors hover:bg-accent/50',
+              listType === 'image' && 'items-center gap-2 px-1.5 py-1.5',
+              isError && 'text-destructive',
+            )}
+          >
+            {/* 左：图标 / 缩略图 */}
+            {listType === 'image' ? (
+              <span
+                data-slot="upload-item-thumb"
+                className={cn(
+                  'flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-sm border border-border bg-muted',
+                  onPreview && 'cursor-pointer',
+                )}
+                onClick={() => onPreview?.(file)}
+              >
+                {file.thumbUrl || file.url ? (
+                  <img
+                    src={file.thumbUrl ?? file.url}
+                    alt={file.name}
+                    className="size-full object-cover"
+                  />
+                ) : isImageFile(file) ? (
+                  <ImageIcon
+                    className="size-4 text-muted-foreground"
+                    aria-hidden
+                  />
+                ) : (
+                  <FileIcon
+                    className="size-4 text-muted-foreground"
+                    aria-hidden
+                  />
+                )}
+              </span>
+            ) : (
+              <span
+                data-slot="upload-item-thumb"
+                className="flex shrink-0 items-center justify-center"
+              >
+                {iconRender ? (
+                  iconRender(file)
+                ) : isImageFile(file) ? (
+                  <ImageIcon
+                    className="size-3.5 text-muted-foreground"
+                    aria-hidden
+                  />
+                ) : (
+                  <FileIcon
+                    className="size-3.5 text-muted-foreground"
+                    aria-hidden
+                  />
+                )}
+              </span>
+            )}
+
+            {/* 中：文件名 + 进度 / 状态 */}
+            <div
+              data-slot="upload-item-name"
+              className="flex min-w-0 flex-1 flex-col gap-0.5"
+            >
+              <span
+                className={cn(
+                  'truncate',
+                  onPreview && listType === 'image' && 'cursor-pointer',
+                )}
+                onClick={() =>
+                  listType === 'image' ? onPreview?.(file) : undefined
+                }
+                title={file.name}
+              >
+                {file.name}
+              </span>
+              {showProgress ? (
+                <Progress value={file.percent ?? 0} className="h-0.5" />
+              ) : (
+                <span
+                  data-slot="upload-item-status"
+                  className={cn(
+                    'truncate text-xs text-muted-foreground',
+                    isError && 'text-destructive',
+                  )}
+                >
+                  {isError
+                    ? file.error?.message || '上传失败'
+                    : file.status === 'pending'
+                    ? '待上传'
+                    : formatBytes(file.size)}
+                </span>
+              )}
+            </div>
+
+            {/* 右：操作 */}
+            <div
+              data-slot="upload-item-action"
+              className="flex shrink-0 items-center gap-0.5"
+            >
+              {isError && file.originFile ? (
+                <button
+                  type="button"
+                  aria-label="重试"
+                  onClick={() => onRetry(file)}
+                  className="cursor-pointer rounded-sm p-0.5 text-muted-foreground transition-colors hover:text-foreground"
+                >
+                  <RotateCw className="size-3" aria-hidden />
+                </button>
+              ) : null}
+              {showRemoveIcon ? (
+                <button
+                  type="button"
+                  aria-label="移除"
+                  onClick={() => onRemove(file)}
+                  className="cursor-pointer rounded-sm p-0.5 text-muted-foreground transition-colors hover:text-foreground"
+                >
+                  <X className="size-3" aria-hidden />
+                </button>
+              ) : null}
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+// ─── Upload (button trigger) ────────────────────────────────────────────────
+
+function Upload({
+  fileList: controlledFileList,
+  defaultFileList,
+  accept,
+  multiple = false,
+  maxCount,
+  maxSize,
+  disabled = false,
+  listType = 'text',
+  showFileList = true,
+  showRemoveIcon = true,
+  beforeUpload,
+  customRequest,
+  onChange,
+  onRemove,
+  onPreview,
+  onLimitExceed,
+  onSizeExceed,
+  itemRender,
+  iconRender,
+  className,
+  children,
+  ...props
+}: UploadProps) {
+  const inputRef = React.useRef<HTMLInputElement>(null);
+  const { fileList, handleFiles, removeFile, retryFile } = useUploadCore({
+    fileList: controlledFileList,
+    defaultFileList,
+    maxCount,
+    maxSize,
+    beforeUpload,
+    customRequest,
+    onChange,
+    onRemove,
+    onLimitExceed,
+    onSizeExceed,
+    listType,
+    disabled,
+  });
+
+  const triggerSelect = () => {
+    if (!disabled) inputRef.current?.click();
+  };
+
+  return (
+    <div
+      data-slot="upload"
+      data-list-type={listType}
+      data-disabled={disabled || undefined}
+      className={cn('flex flex-col gap-2', className)}
+      {...props}
+    >
+      <input
+        ref={inputRef}
+        type="file"
+        accept={accept}
+        multiple={multiple}
+        disabled={disabled}
+        className="hidden"
+        onChange={(e) => {
+          handleFiles(e.target.files);
+          e.target.value = '';
+        }}
+      />
+
+      <div
+        data-slot="upload-trigger"
+        role="button"
+        tabIndex={disabled ? -1 : 0}
+        aria-disabled={disabled || undefined}
+        onClick={triggerSelect}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            triggerSelect();
+          }
+        }}
+        className={cn(
+          'inline-flex w-fit',
+          disabled && 'pointer-events-none opacity-50',
+        )}
+      >
+        {children ?? (
+          <button
+            type="button"
+            tabIndex={-1}
+            className="inline-flex cursor-pointer items-center gap-1.5 rounded-md border border-input bg-card px-2.5 h-8 text-xs transition-colors hover:bg-muted hover:text-foreground"
+          >
+            <UploadIcon className="size-3.5" aria-hidden />
+            上传文件
+          </button>
+        )}
+      </div>
+
+      {showFileList ? (
+        <UploadList
+          fileList={fileList}
+          listType={listType}
+          showRemoveIcon={showRemoveIcon}
+          onRemove={removeFile}
+          onPreview={onPreview}
+          onRetry={retryFile}
+          itemRender={itemRender}
+          iconRender={iconRender}
+        />
+      ) : null}
+    </div>
+  );
+}
+
+// ─── UploadDragger ──────────────────────────────────────────────────────────
+
+interface UploadDraggerProps extends UploadProps {
+  /** 提示标题。@default '点击或拖拽文件到此区域上传' */
+  hint?: React.ReactNode;
+  /** 副提示。 */
+  description?: React.ReactNode;
+}
+
+function UploadDragger({
+  fileList: controlledFileList,
+  defaultFileList,
+  accept,
+  multiple = false,
+  maxCount,
+  maxSize,
+  disabled = false,
+  listType = 'text',
+  showFileList = true,
+  showRemoveIcon = true,
+  beforeUpload,
+  customRequest,
+  onChange,
+  onRemove,
+  onPreview,
+  onLimitExceed,
+  onSizeExceed,
+  itemRender,
+  iconRender,
+  hint = '点击或拖拽文件到此区域上传',
+  description,
+  className,
+  children,
+  ...props
+}: UploadDraggerProps) {
+  const inputRef = React.useRef<HTMLInputElement>(null);
+  const [dragOver, setDragOver] = React.useState(false);
+  const { fileList, handleFiles, removeFile, retryFile } = useUploadCore({
+    fileList: controlledFileList,
+    defaultFileList,
+    maxCount,
+    maxSize,
+    beforeUpload,
+    customRequest,
+    onChange,
+    onRemove,
+    onLimitExceed,
+    onSizeExceed,
+    listType,
+    disabled,
+  });
+
+  const triggerSelect = () => {
+    if (!disabled) inputRef.current?.click();
+  };
+
+  return (
+    <div
+      data-slot="upload"
+      data-list-type={listType}
+      data-disabled={disabled || undefined}
+      className={cn('flex flex-col gap-2', className)}
+      {...props}
+    >
+      <input
+        ref={inputRef}
+        type="file"
+        accept={accept}
+        multiple={multiple}
+        disabled={disabled}
+        className="hidden"
+        onChange={(e) => {
+          handleFiles(e.target.files);
+          e.target.value = '';
+        }}
+      />
+
+      <div
+        data-slot="upload-dragger"
+        data-drag-over={dragOver || undefined}
+        role="button"
+        tabIndex={disabled ? -1 : 0}
+        aria-disabled={disabled || undefined}
+        onClick={triggerSelect}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            triggerSelect();
+          }
+        }}
+        onDragOver={(e) => {
+          if (disabled) return;
+          e.preventDefault();
+          setDragOver(true);
+        }}
+        onDragLeave={() => setDragOver(false)}
+        onDrop={(e) => {
+          if (disabled) return;
+          e.preventDefault();
+          setDragOver(false);
+          handleFiles(e.dataTransfer.files);
+        }}
+        className={cn(
+          'flex cursor-pointer flex-col items-center justify-center gap-2 rounded-md border border-dashed border-input bg-card px-6 py-8 text-center transition-colors hover:bg-muted/50 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring',
+          dragOver && 'border-primary bg-primary/5',
+          disabled && 'pointer-events-none opacity-50',
+        )}
+      >
+        {children ?? (
+          <>
+            <UploadIcon className="size-6 text-muted-foreground" aria-hidden />
+            <span className="text-xs text-foreground">{hint}</span>
+            {description ? (
+              <span className="text-xs text-muted-foreground">
+                {description}
+              </span>
+            ) : null}
+          </>
+        )}
+      </div>
+
+      {showFileList ? (
+        <UploadList
+          fileList={fileList}
+          listType={listType}
+          showRemoveIcon={showRemoveIcon}
+          onRemove={removeFile}
+          onPreview={onPreview}
+          onRetry={retryFile}
+          itemRender={itemRender}
+          iconRender={iconRender}
+        />
+      ) : null}
+    </div>
+  );
+}
+
+export { Upload, UploadDragger };
+export type {
+  UploadProps,
+  UploadDraggerProps,
+  UploadFile,
+  UploadStatus,
+  UploadRequestOptions,
+  UploadChangeInfo,
+};