@sia.soul/sia-react-ui 0.1.28 → 0.1.30

package/dist/core.cjs

@@ -1761,6 +1761,7 @@ function Card({
 // src/components/Tag.tsx
 var import_jsx_runtime10 = require("react/jsx-runtime");
 function Tag({
+  color,
   status = "default",
   compact = false,
   variant = "soft",
@@ -1771,13 +1772,16 @@ function Tag({
   onClose,
   className = "",
   children,
+  style,
   ...props
 }) {
+  const customColor = color?.trim() ? variant === "outlined" ? { borderColor: color, color, backgroundColor: "transparent" } : variant === "filled" ? { backgroundColor: color, color: "#fff", borderColor: "transparent" } : { color, backgroundColor: `color-mix(in srgb, ${color} 10%, transparent)`, borderColor: `color-mix(in srgb, ${color} 35%, transparent)` } : void 0;
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
     "span",
     {
       className: `sia-tag${closable && closeOnHover ? " sia-tag--close-on-hover" : ""} sia-tag--${status} sia-tag--${variant}${compact ? " sia-tag--compact" : ""}${disabled ? " sia-tag--disabled" : ""} ${className}`.trim(),
       "aria-disabled": disabled || void 0,
+      style: customColor ? { ...customColor, ...style } : style,
       ...withTitleTooltip(props),
       children: [
         icon ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "sia-tag__icon", children: icon }) : null,
@@ -2488,6 +2492,15 @@ function Collapse({ items, activeKey, defaultActiveKey = [], accordion = false,
     ] }, item.key);
   }) });
 }
+function ImagePreview({ open, src, alt = "", onOpenChange }) {
+  const previewRef = (0, import_react15.useRef)(null);
+  useOverlayLifecycle(open, previewRef, () => onOpenChange(false));
+  if (!open || !src || typeof document === "undefined") return null;
+  return (0, import_react_dom5.createPortal)(/* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { ref: previewRef, className: "sia-image-preview", role: "dialog", "aria-modal": "true", "aria-label": "\u56FE\u7247\u9884\u89C8", tabIndex: -1, onClick: () => onOpenChange(false), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("button", { type: "button", "aria-label": "\u5173\u95ED\u9884\u89C8", onClick: () => onOpenChange(false), children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Icon, { name: "close" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("img", { src, alt, onClick: (event) => event.stopPropagation() })
+  ] }), document.body);
+}
 
 // src/components/FloatingPlaceholder.tsx
 var import_jsx_runtime16 = require("react/jsx-runtime");
@@ -3930,136 +3943,426 @@ var Select = (0, import_react22.forwardRef)(function Select2({
 
 // src/components/Upload.tsx
 var import_react23 = require("react");
+
+// src/components/uploadFiles.ts
+function acceptsUploadFile(file, accept) {
+  if (!accept?.trim()) return true;
+  return accept.split(",").some((part) => {
+    const rule = part.trim().toLowerCase();
+    const type = file.type.toLowerCase();
+    return rule.startsWith(".") ? file.name.toLowerCase().endsWith(rule) : rule.endsWith("/*") ? type.startsWith(rule.slice(0, -1)) : type === rule;
+  });
+}
+function includeUploadPath(path, recursive) {
+  return recursive || path.split("/").filter(Boolean).length <= 2;
+}
+async function readUploadEntries(entries, recursive) {
+  const files = [];
+  async function visit(entry, path, depth) {
+    if (entry.isFile) {
+      const file = await new Promise((resolve, reject) => entry.file(resolve, reject));
+      files.push({ file, path });
+    } else if (entry.isDirectory && (recursive || depth === 0)) {
+      const reader = entry.createReader();
+      while (true) {
+        const batch = await new Promise((resolve, reject) => reader.readEntries(resolve, reject));
+        if (!batch.length) break;
+        for (const child of batch) await visit(child, `${path}/${child.name}`, depth + 1);
+      }
+    }
+  }
+  for (const entry of entries) await visit(entry, entry.name, 0);
+  return files;
+}
+
+// src/components/uploadRequest.ts
+function sendUploadRequest(config, options) {
+  const xhr = new XMLHttpRequest();
+  const abort = () => xhr.abort();
+  const cleanup2 = () => options.signal.removeEventListener("abort", abort);
+  xhr.open(config.method ?? "POST", config.action, true);
+  xhr.withCredentials = config.withCredentials ?? false;
+  xhr.timeout = config.timeout ?? 0;
+  for (const [name, value] of Object.entries(config.headers ?? {})) xhr.setRequestHeader(name, value);
+  xhr.upload.onprogress = (event) => {
+    if (event.lengthComputable) options.onProgress(event.loaded / event.total * 100);
+  };
+  xhr.onload = () => {
+    cleanup2();
+    if (xhr.status < 200 || xhr.status >= 300) {
+      options.onError(new Error(`\u4E0A\u4F20\u5931\u8D25\uFF1AHTTP ${xhr.status}`));
+      return;
+    }
+    let response = xhr.responseText;
+    try {
+      response = JSON.parse(xhr.responseText);
+    } catch {
+    }
+    options.onSuccess(response, config.url);
+  };
+  xhr.onerror = () => {
+    cleanup2();
+    options.onError(new Error("\u4E0A\u4F20\u7F51\u7EDC\u9519\u8BEF\uFF0C\u8BF7\u68C0\u67E5\u8FDE\u63A5\u4E0E\u8DE8\u57DF\u914D\u7F6E"));
+  };
+  xhr.ontimeout = () => {
+    cleanup2();
+    options.onError(new Error("\u4E0A\u4F20\u8D85\u65F6"));
+  };
+  xhr.onabort = cleanup2;
+  options.signal.addEventListener("abort", abort, { once: true });
+  if (options.signal.aborted) {
+    cleanup2();
+    return { abort };
+  }
+  try {
+    if (config.body === "file") xhr.send(options.file);
+    else {
+      const body = new FormData();
+      for (const [name, value] of Object.entries(config.data ?? {})) body.append(name, value);
+      body.append(config.name ?? "file", options.file, options.filename);
+      xhr.send(body);
+    }
+  } catch (error) {
+    cleanup2();
+    throw error;
+  }
+  return { abort };
+}
+
+// src/components/Upload.tsx
 var import_jsx_runtime22 = require("react/jsx-runtime");
 var LIST_IGNORE = /* @__PURE__ */ Symbol("SIA_UPLOAD_LIST_IGNORE");
-function UploadRoot({
+function useThumbnail(file) {
+  const [local, setLocal] = (0, import_react23.useState)();
+  (0, import_react23.useEffect)(() => {
+    if (!file?.thumbUrl && file?.originFileObj?.type.startsWith("image/")) {
+      const url = URL.createObjectURL(file.originFileObj);
+      setLocal(url);
+      return () => URL.revokeObjectURL(url);
+    }
+    setLocal(void 0);
+  }, [file?.originFileObj, file?.thumbUrl]);
+  return file?.thumbUrl || local || (file?.type?.startsWith("image/") || /\.(png|jpe?g|gif|webp|avif|svg)(\?|$)/i.test(file?.url ?? "") ? file?.url : void 0);
+}
+function UploadItem({ file, files, props, actions }) {
+  const source = useThumbnail(file);
+  const [failed, setFailed] = (0, import_react23.useState)(false);
+  (0, import_react23.useEffect)(() => setFailed(false), [source]);
+  const node = /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: `sia-upload__item sia-upload__item--${file.status ?? "ready"}`, children: [
+    props.listType !== "text" ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Button, { variant: "text", className: "sia-upload__thumbnail", "aria-label": `\u9884\u89C8 ${file.name}`, onClick: actions.preview, disabled: !source && !props.onPreview, children: source && !failed ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("img", { src: source, alt: file.name, onError: () => setFailed(true) }) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Icon, { name: file.type?.startsWith("image/") ? "image" : "file", size: 28 }) }) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Icon, { name: file.status === "done" ? "circle-check" : "file", size: 16 }),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "sia-upload__name", ...withTitleTooltip({ title: file.relativePath || file.name }), children: file.url ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("a", { href: file.url, target: "_blank", rel: "noreferrer", children: file.name }) : file.name }),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Button, { variant: "text", className: "sia-upload__remove", disabled: props.disabled, "aria-label": `\u79FB\u9664 ${file.name}`, onClick: () => void actions.remove(), children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Icon, { name: "close", size: 14 }) }),
+    file.status === "uploading" && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "sia-upload__uploading", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("span", { children: [
+        "\u4E0A\u4F20\u4E2D ",
+        Math.round(file.percent ?? 0),
+        "%"
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "sia-upload__progress", role: "progressbar", "aria-label": `${file.name} \u4E0A\u4F20\u8FDB\u5EA6`, "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": file.percent ?? 0, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { style: { width: `${file.percent ?? 0}%` } }) })
+    ] }),
+    file.status === "error" && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "sia-upload__error", children: "\u4E0A\u4F20\u5931\u8D25" })
+  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_jsx_runtime22.Fragment, { children: props.itemRender ? props.itemRender(node, file, files, actions) : node });
+}
+var UploadRoot = (0, import_react23.forwardRef)(function UploadRoot2({
   accept,
   multiple = false,
   directory = false,
+  recursive = true,
+  pastable = false,
   disabled = false,
+  autoUpload = true,
   maxCount: maxCount2,
   fileList,
   defaultFileList = [],
   listType = "text",
   showUploadList = true,
   beforeUpload,
+  request,
   customRequest,
   onChange,
   onRemove,
+  onReject,
+  onReadError,
+  onPreview,
+  itemRender,
   children,
   className = "",
   onDragOver,
+  onDragLeave,
   onDrop,
+  onPaste,
+  tabIndex,
   ...props
-}) {
+}, ref) {
   const inputRef = (0, import_react23.useRef)(null);
-  const filesRef = (0, import_react23.useRef)(fileList ?? defaultFileList);
-  const id = (0, import_react23.useId)();
-  const [files, setFiles] = useControllableState({ value: fileList, defaultValue: defaultFileList });
+  const [internalFiles, setInternalFiles] = (0, import_react23.useState)(defaultFileList);
+  const files = fileList ?? internalFiles;
+  const filesRef = (0, import_react23.useRef)(files);
   filesRef.current = files;
-  function emit(file, nextList) {
-    filesRef.current = nextList;
-    setFiles(nextList);
-    onChange?.({ file, fileList: nextList });
-  }
-  async function processFile(file, allFiles) {
-    const beforeResult = await beforeUpload?.(file, allFiles);
-    if (beforeResult === LIST_IGNORE) return;
-    if (beforeResult === false) {
-      const pending = { uid: `${Date.now()}-${file.name}`, name: file.name, size: file.size, type: file.type, status: "ready", originFileObj: file };
-      emit(pending, maxCount2 === 1 ? [pending] : [...filesRef.current, pending].slice(-(maxCount2 ?? Number.POSITIVE_INFINITY)));
-      return;
+  const tasks = (0, import_react23.useRef)(/* @__PURE__ */ new Map());
+  const mounted = (0, import_react23.useRef)(true);
+  const [dragging, setDragging] = (0, import_react23.useState)(false);
+  const [preview, setPreview] = (0, import_react23.useState)();
+  const previewSource = useThumbnail(preview);
+  const limit = maxCount2 === void 0 || !Number.isFinite(maxCount2) ? Infinity : Math.max(0, Math.floor(maxCount2));
+  const full = files.length >= limit;
+  const current = (0, import_react23.useRef)({ disabled, directory, recursive });
+  current.current = { disabled, directory, recursive };
+  function cancel(uid) {
+    const task = tasks.current.get(uid);
+    tasks.current.delete(uid);
+    task?.controller.abort();
+    try {
+      task?.handle?.abort?.();
+    } catch {
     }
-    const uploadFile = beforeResult instanceof File ? beforeResult : file;
-    const item = { uid: `${Date.now()}-${Math.random().toString(36).slice(2)}`, name: uploadFile.name, size: uploadFile.size, type: uploadFile.type, status: "uploading", percent: 0, originFileObj: uploadFile };
-    const nextList = maxCount2 === 1 ? [item] : [...filesRef.current, item].slice(-(maxCount2 ?? Number.POSITIVE_INFINITY));
-    emit(item, nextList);
-    const request = {
-      file: uploadFile,
-      filename: uploadFile.name,
+    task?.finish();
+  }
+  (0, import_react23.useEffect)(() => {
+    mounted.current = true;
+    return () => {
+      mounted.current = false;
+      [...tasks.current.keys()].forEach(cancel);
+    };
+  }, []);
+  (0, import_react23.useEffect)(() => {
+    for (const uid of tasks.current.keys()) if (!files.some((file) => file.uid === uid)) cancel(uid);
+    if (preview && !files.some((file) => file.uid === preview.uid)) setPreview(void 0);
+  }, [files, preview]);
+  function emit(file, next, event) {
+    if (!mounted.current) return;
+    filesRef.current = next;
+    if (fileList === void 0) setInternalFiles(next);
+    onChange?.({ file, fileList: next, event });
+  }
+  function start(file) {
+    if (current.current.disabled || !mounted.current || file.status === "done" || !file.originFileObj) return Promise.resolve();
+    const existing = tasks.current.get(file.uid);
+    if (existing) return existing.done;
+    let finish = () => {
+    };
+    const done = new Promise((resolve) => {
+      finish = resolve;
+    });
+    const task = { controller: new AbortController(), done, finish };
+    tasks.current.set(file.uid, task);
+    const active = () => mounted.current && tasks.current.get(file.uid) === task && !task.controller.signal.aborted && filesRef.current.some((entry) => entry.uid === file.uid);
+    const update = (patch, event) => {
+      if (!active()) return;
+      const next = { ...filesRef.current.find((entry) => entry.uid === file.uid), ...patch };
+      emit(next, filesRef.current.map((entry) => entry.uid === file.uid ? next : entry), event);
+    };
+    const settle = () => {
+      if (tasks.current.get(file.uid) === task) tasks.current.delete(file.uid);
+      finish();
+    };
+    const options = {
+      file: file.originFileObj,
+      filename: file.name,
+      uploadFile: file,
+      relativePath: file.relativePath || file.name,
+      signal: task.controller.signal,
       onProgress: (percent) => {
-        const progressing = { ...item, status: "uploading", percent };
-        const progressList = filesRef.current.map((entry) => entry.uid === item.uid ? progressing : entry);
-        emit(progressing, progressList);
+        if (Number.isFinite(percent)) update({ percent: Math.max(0, Math.min(100, percent)) }, "progress");
       },
-      onSuccess: (response) => {
-        const done = { ...item, status: "done", percent: 100, response };
-        const completed = filesRef.current.map((entry) => entry.uid === item.uid ? done : entry);
-        emit(done, completed);
+      onSuccess: (response, url) => {
+        if (!active()) return;
+        update({ status: "done", percent: 100, response, ...url ? { url } : {} }, "success");
+        settle();
       },
       onError: (error) => {
-        const failed = { ...item, status: "error", error };
-        const completed = filesRef.current.map((entry) => entry.uid === item.uid ? failed : entry);
-        emit(failed, completed);
+        if (!active()) return;
+        update({ status: "error", error }, "error");
+        settle();
       }
     };
-    if (customRequest) customRequest(request);
-    else window.setTimeout(() => request.onSuccess({ local: true }), 180);
+    update({ status: "uploading", percent: 0, error: void 0 }, "start");
+    void (async () => {
+      try {
+        if (!active()) return;
+        const result = await beforeUpload?.(options.file, filesRef.current.flatMap((entry) => entry.originFileObj ? [entry.originFileObj] : []));
+        if (!active()) return;
+        if (result === LIST_IGNORE) {
+          settle();
+          emit(file, filesRef.current.filter((entry) => entry.uid !== file.uid), "remove");
+          return;
+        }
+        if (result === false || !customRequest && !request) {
+          update({ status: "ready" }, "cancel");
+          settle();
+          return;
+        }
+        if (result instanceof File) {
+          options.file = result;
+          options.filename = result.name;
+        }
+        if (customRequest) task.handle = await customRequest(options) || void 0;
+        else {
+          const config = typeof request === "function" ? await request({ ...file, originFileObj: options.file, name: options.filename }, task.controller.signal) : request;
+          if (active()) task.handle = sendUploadRequest(config, options);
+        }
+        if (task.controller.signal.aborted) task.handle?.abort?.();
+      } catch (error) {
+        options.onError(error);
+      }
+    })();
+    return done;
   }
-  function handleFiles(event) {
-    const selected = [...event.currentTarget.files ?? []];
-    selected.forEach((file) => void processFile(file, selected));
-    event.currentTarget.value = "";
+  function abort(uid) {
+    const ids = uid ? [uid] : [...tasks.current.keys()];
+    for (const id of ids) {
+      if (!tasks.current.has(id)) continue;
+      cancel(id);
+      const file = filesRef.current.find((entry) => entry.uid === id);
+      if (file) {
+        const next = { ...file, status: "ready", percent: 0 };
+        emit(next, filesRef.current.map((entry) => entry.uid === id ? next : entry), "cancel");
+      }
+    }
+  }
+  async function remove(uid) {
+    if (current.current.disabled) return;
+    const file = filesRef.current.find((entry) => entry.uid === uid);
+    if (!file) return;
+    try {
+      if (await onRemove?.(file) === false || !mounted.current || current.current.disabled) return;
+      cancel(uid);
+      emit(file, filesRef.current.filter((entry) => entry.uid !== uid), "remove");
+    } catch {
+    }
+  }
+  (0, import_react23.useImperativeHandle)(ref, () => ({
+    upload: async (uid) => {
+      await Promise.all(filesRef.current.filter((file) => (!uid || file.uid === uid) && file.status !== "done").map(start));
+    },
+    abort,
+    remove
+  }));
+  function ingest(entries) {
+    if (current.current.disabled || !mounted.current) return;
+    const filtered = directory ? entries.filter((entry) => includeUploadPath(entry.path, recursive)) : entries;
+    const selected = multiple || directory ? filtered : filtered.slice(0, 1);
+    const added = [];
+    for (const { file, path } of selected) {
+      if (!acceptsUploadFile(file, accept)) {
+        onReject?.({ file, reason: "accept" });
+        continue;
+      }
+      if (filesRef.current.length >= limit) {
+        onReject?.({ file, reason: "max-count" });
+        continue;
+      }
+      const item = { uid: `upload-${Date.now()}-${Math.random().toString(36).slice(2)}`, name: file.name, size: file.size, type: file.type, relativePath: path, originFileObj: file, status: "ready", percent: 0 };
+      emit(item, [...filesRef.current, item], "add");
+      added.push(item);
+    }
+    if (autoUpload) added.forEach((file) => {
+      void start(file);
+    });
   }
-  function handleDrop(event) {
+  async function handleDrop(event) {
     onDrop?.(event);
-    if (event.defaultPrevented || disabled) return;
+    setDragging(false);
+    if (event.defaultPrevented) return;
     event.preventDefault();
-    const selected = [...event.dataTransfer.files];
-    selected.forEach((file) => void processFile(file, selected));
+    if (disabled) return;
+    const fallback = [...event.dataTransfer.files].map((file) => ({ file, path: file.webkitRelativePath || file.name }));
+    const entries = [...event.dataTransfer.items].map((item) => item.webkitGetAsEntry?.()).filter((entry) => !!entry);
+    try {
+      if (entries.length) ingest(await readUploadEntries(entries.filter((entry) => directory || !entry.isDirectory), recursive));
+      else ingest(fallback);
+    } catch (error) {
+      if (mounted.current) onReadError?.(error);
+    }
   }
-  async function remove(file) {
-    if (await onRemove?.(file) === false) return;
-    const next = files.filter((item) => item.uid !== file.uid);
-    emit({ ...file, status: "ready" }, next);
+  function handlePaste(event) {
+    onPaste?.(event);
+    if (event.defaultPrevented || disabled || !pastable) return;
+    const selected = [...event.clipboardData.files];
+    if (!selected.length) return;
+    event.preventDefault();
+    ingest(selected.map((file) => ({ file, path: file.name })));
   }
+  const trigger = !(listType === "picture-card" && full) && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "sia-upload__trigger", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Button, { className: "sia-upload__choose", disabled: disabled || full, onClick: () => inputRef.current?.click(), children: children ?? (listType === "picture-card" ? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Icon, { name: "plus", size: 24 }),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { children: "\u4E0A\u4F20\u56FE\u7247" })
+  ] }) : /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Icon, { name: "upload", size: 16 }),
+    directory ? "\u9009\u62E9\u6587\u4EF6\u5939" : "\u9009\u62E9\u6587\u4EF6"
+  ] })) }) });
   return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
     "div",
     {
-      className: `sia-upload sia-upload--${listType} ${className}`.trim(),
+      ...withTitleTooltip(props),
+      className: `sia-upload sia-upload--${listType}${dragging ? " is-dragging" : ""}${disabled ? " is-disabled" : ""} ${className}`.trim(),
+      tabIndex: tabIndex ?? (pastable && !disabled ? 0 : void 0),
+      onPaste: handlePaste,
       onDragOver: (event) => {
         onDragOver?.(event);
-        if (!event.defaultPrevented && !disabled) event.preventDefault();
+        if (!event.defaultPrevented) {
+          event.preventDefault();
+          if (!disabled) setDragging(true);
+        }
       },
-      onDrop: handleDrop,
-      ...withTitleTooltip(props),
+      onDragLeave: (event) => {
+        onDragLeave?.(event);
+        if (!event.currentTarget.contains(event.relatedTarget)) setDragging(false);
+      },
+      onDrop: (event) => void handleDrop(event),
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
           "input",
           {
             ref: inputRef,
-            id,
             className: "sia-upload__input",
             type: "file",
             accept,
-            multiple,
-            disabled,
-            ...withTitleTooltip(directory ? { webkitdirectory: "", directory: "" } : {}),
-            onChange: handleFiles
+            multiple: multiple || directory,
+            disabled: disabled || full,
+            ...directory ? { webkitdirectory: "", directory: "" } : {},
+            onChange: (event) => {
+              ingest([...event.currentTarget.files ?? []].map((file) => ({ file, path: file.webkitRelativePath || file.name })));
+              event.currentTarget.value = "";
+            }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "sia-upload__trigger", onClick: () => !disabled && inputRef.current?.click(), children: children ?? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Button, { icon: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Icon, { name: "upload", size: 16 }), disabled, children: "\u9009\u62E9\u6587\u4EF6" }) }),
-        showUploadList && files.length ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "sia-upload__list", children: files.map((file) => /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: `sia-upload__item sia-upload__item--${file.status ?? "ready"}`, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Icon, { name: file.status === "done" ? "circle-check" : "file", size: 16 }),
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "sia-upload__name", ...withTitleTooltip({ title: file.name }), children: file.name }),
-          file.status === "uploading" ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "sia-upload__progress", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { style: { width: `${file.percent ?? 0}%` } }) }) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("button", { type: "button", "aria-label": `\u79FB\u9664 ${file.name}`, onClick: () => void remove(file), children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Icon, { name: "close", size: 14 }) })
-        ] }, file.uid)) }) : null
+        listType !== "picture-card" && trigger,
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "sia-upload__list", children: [
+          showUploadList && files.map((file) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(UploadItem, { file, files, props: { listType, disabled, itemRender, onPreview }, actions: {
+            upload: () => start(file),
+            abort: () => abort(file.uid),
+            remove: () => remove(file.uid),
+            preview: () => {
+              if (onPreview) onPreview(file);
+              else setPreview(file);
+            }
+          } }, file.uid)),
+          listType === "picture-card" && trigger
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ImagePreview, { open: !!preview && !!(preview.url || previewSource), src: preview?.url || previewSource, alt: preview?.name, onOpenChange: (open) => {
+          if (!open) setPreview(void 0);
+        } })
       ]
     }
   );
-}
-function UploadDragger({ hint = "\u652F\u6301\u5355\u4E2A\u6216\u6279\u91CF\u4E0A\u4F20", children, className = "", ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(UploadRoot, { ...props, className: `sia-upload-dragger ${className}`.trim(), children: children ?? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "sia-upload-dragger__content", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Icon, { name: "upload", size: 28 }),
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("strong", { children: "\u70B9\u51FB\u6216\u62D6\u62FD\u6587\u4EF6\u5230\u6B64\u533A\u57DF\u4E0A\u4F20" }),
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { children: hint })
+});
+var UploadDragger = (0, import_react23.forwardRef)(function UploadDragger2({ hint = "\u652F\u6301\u5355\u4E2A\u6216\u6279\u91CF\u4E0A\u4F20", children, className = "", ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(UploadRoot, { ...props, ref, className: `sia-upload-dragger ${className}`.trim(), children: children ?? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("span", { className: "sia-upload-dragger__content", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Icon, { name: "upload", size: 32 }),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("strong", { children: [
+      "\u70B9\u51FB\u6216\u62D6\u62FD",
+      props.directory ? "\u6587\u4EF6\u5939" : "\u6587\u4EF6",
+      "\u5230\u6B64\u533A\u57DF\u4E0A\u4F20"
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { children: hint }),
+    props.pastable && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { children: "\u805A\u7126\u6B64\u533A\u57DF\u540E\u6309 Ctrl / \u2318 + V \u7C98\u8D34\u6587\u4EF6\u6216\u622A\u56FE" })
   ] }) });
-}
+});
 var Upload = Object.assign(UploadRoot, {
-  /** 支持拖入文件上传的区域组件。 */
+  /** 可点击、键盘操作和拖拽的上传区域，ref 支持手动上传、取消及移除。 */
   Dragger: UploadDragger,
-  /** beforeUpload 返回此标记时忽略该文件，不加入上传列表。 */
+  /** beforeUpload 返回时移除该文件，不进行上传。 */
   LIST_IGNORE
 });