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

package/dist/{chunk-NEYUBLLB.js → chunk-KT7DIBXX.js}

@@ -141,6 +141,7 @@ function Card({
 // src/components/Tag.tsx
 import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 function Tag({
+  color,
   status = "default",
   compact = false,
   variant = "soft",
@@ -151,13 +152,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__ */ jsxs3(
     "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__ */ jsx3("span", { className: "sia-tag__icon", children: icon }) : null,
@@ -910,137 +914,427 @@ function Image({ fallback, placeholder, preview = true, rootClassName = "", clas
 }
 
 // src/components/Upload.tsx
-import { useId as useId2, useRef as useRef5 } from "react";
-import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+import { forwardRef, useEffect as useEffect3, useImperativeHandle, useRef as useRef5, useState as useState6 } from "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 cleanup = () => 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 = () => {
+    cleanup();
+    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 = () => {
+    cleanup();
+    options.onError(new Error("\u4E0A\u4F20\u7F51\u7EDC\u9519\u8BEF\uFF0C\u8BF7\u68C0\u67E5\u8FDE\u63A5\u4E0E\u8DE8\u57DF\u914D\u7F6E"));
+  };
+  xhr.ontimeout = () => {
+    cleanup();
+    options.onError(new Error("\u4E0A\u4F20\u8D85\u65F6"));
+  };
+  xhr.onabort = cleanup;
+  options.signal.addEventListener("abort", abort, { once: true });
+  if (options.signal.aborted) {
+    cleanup();
+    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) {
+    cleanup();
+    throw error;
+  }
+  return { abort };
+}
+
+// src/components/Upload.tsx
+import { Fragment as Fragment4, jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
 var LIST_IGNORE = /* @__PURE__ */ Symbol("SIA_UPLOAD_LIST_IGNORE");
-function UploadRoot({
+function useThumbnail(file) {
+  const [local, setLocal] = useState6();
+  useEffect3(() => {
+    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] = useState6(false);
+  useEffect3(() => setFailed(false), [source]);
+  const node = /* @__PURE__ */ jsxs7("div", { className: `sia-upload__item sia-upload__item--${file.status ?? "ready"}`, children: [
+    props.listType !== "text" ? /* @__PURE__ */ jsx7(Button, { variant: "text", className: "sia-upload__thumbnail", "aria-label": `\u9884\u89C8 ${file.name}`, onClick: actions.preview, disabled: !source && !props.onPreview, children: source && !failed ? /* @__PURE__ */ jsx7("img", { src: source, alt: file.name, onError: () => setFailed(true) }) : /* @__PURE__ */ jsx7(Icon, { name: file.type?.startsWith("image/") ? "image" : "file", size: 28 }) }) : /* @__PURE__ */ jsx7(Icon, { name: file.status === "done" ? "circle-check" : "file", size: 16 }),
+    /* @__PURE__ */ jsx7("span", { className: "sia-upload__name", ...withTitleTooltip({ title: file.relativePath || file.name }), children: file.url ? /* @__PURE__ */ jsx7("a", { href: file.url, target: "_blank", rel: "noreferrer", children: file.name }) : file.name }),
+    /* @__PURE__ */ jsx7(Button, { variant: "text", className: "sia-upload__remove", disabled: props.disabled, "aria-label": `\u79FB\u9664 ${file.name}`, onClick: () => void actions.remove(), children: /* @__PURE__ */ jsx7(Icon, { name: "close", size: 14 }) }),
+    file.status === "uploading" && /* @__PURE__ */ jsxs7("div", { className: "sia-upload__uploading", children: [
+      /* @__PURE__ */ jsxs7("span", { children: [
+        "\u4E0A\u4F20\u4E2D ",
+        Math.round(file.percent ?? 0),
+        "%"
+      ] }),
+      /* @__PURE__ */ jsx7("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__ */ jsx7("span", { style: { width: `${file.percent ?? 0}%` } }) })
+    ] }),
+    file.status === "error" && /* @__PURE__ */ jsx7("span", { className: "sia-upload__error", children: "\u4E0A\u4F20\u5931\u8D25" })
+  ] });
+  return /* @__PURE__ */ jsx7(Fragment4, { children: props.itemRender ? props.itemRender(node, file, files, actions) : node });
+}
+var UploadRoot = 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 = useRef5(null);
-  const filesRef = useRef5(fileList ?? defaultFileList);
-  const id = useId2();
-  const [files, setFiles] = useControllableState({ value: fileList, defaultValue: defaultFileList });
+  const [internalFiles, setInternalFiles] = useState6(defaultFileList);
+  const files = fileList ?? internalFiles;
+  const filesRef = useRef5(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 = useRef5(/* @__PURE__ */ new Map());
+  const mounted = useRef5(true);
+  const [dragging, setDragging] = useState6(false);
+  const [preview, setPreview] = useState6();
+  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 = useRef5({ 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();
+  }
+  useEffect3(() => {
+    mounted.current = true;
+    return () => {
+      mounted.current = false;
+      [...tasks.current.keys()].forEach(cancel);
+    };
+  }, []);
+  useEffect3(() => {
+    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 {
+    }
+  }
+  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__ */ jsx7("div", { className: "sia-upload__trigger", children: /* @__PURE__ */ jsx7(Button, { className: "sia-upload__choose", disabled: disabled || full, onClick: () => inputRef.current?.click(), children: children ?? (listType === "picture-card" ? /* @__PURE__ */ jsxs7(Fragment4, { children: [
+    /* @__PURE__ */ jsx7(Icon, { name: "plus", size: 24 }),
+    /* @__PURE__ */ jsx7("span", { children: "\u4E0A\u4F20\u56FE\u7247" })
+  ] }) : /* @__PURE__ */ jsxs7(Fragment4, { children: [
+    /* @__PURE__ */ jsx7(Icon, { name: "upload", size: 16 }),
+    directory ? "\u9009\u62E9\u6587\u4EF6\u5939" : "\u9009\u62E9\u6587\u4EF6"
+  ] })) }) });
   return /* @__PURE__ */ jsxs7(
     "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__ */ jsx7(
           "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__ */ jsx7("div", { className: "sia-upload__trigger", onClick: () => !disabled && inputRef.current?.click(), children: children ?? /* @__PURE__ */ jsx7(Button, { icon: /* @__PURE__ */ jsx7(Icon, { name: "upload", size: 16 }), disabled, children: "\u9009\u62E9\u6587\u4EF6" }) }),
-        showUploadList && files.length ? /* @__PURE__ */ jsx7("div", { className: "sia-upload__list", children: files.map((file) => /* @__PURE__ */ jsxs7("div", { className: `sia-upload__item sia-upload__item--${file.status ?? "ready"}`, children: [
-          /* @__PURE__ */ jsx7(Icon, { name: file.status === "done" ? "circle-check" : "file", size: 16 }),
-          /* @__PURE__ */ jsx7("span", { className: "sia-upload__name", ...withTitleTooltip({ title: file.name }), children: file.name }),
-          file.status === "uploading" ? /* @__PURE__ */ jsx7("span", { className: "sia-upload__progress", children: /* @__PURE__ */ jsx7("span", { style: { width: `${file.percent ?? 0}%` } }) }) : null,
-          /* @__PURE__ */ jsx7("button", { type: "button", "aria-label": `\u79FB\u9664 ${file.name}`, onClick: () => void remove(file), children: /* @__PURE__ */ jsx7(Icon, { name: "close", size: 14 }) })
-        ] }, file.uid)) }) : null
+        listType !== "picture-card" && trigger,
+        /* @__PURE__ */ jsxs7("div", { className: "sia-upload__list", children: [
+          showUploadList && files.map((file) => /* @__PURE__ */ jsx7(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__ */ jsx7(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__ */ jsx7(UploadRoot, { ...props, className: `sia-upload-dragger ${className}`.trim(), children: children ?? /* @__PURE__ */ jsxs7("div", { className: "sia-upload-dragger__content", children: [
-    /* @__PURE__ */ jsx7(Icon, { name: "upload", size: 28 }),
-    /* @__PURE__ */ jsx7("strong", { children: "\u70B9\u51FB\u6216\u62D6\u62FD\u6587\u4EF6\u5230\u6B64\u533A\u57DF\u4E0A\u4F20" }),
-    /* @__PURE__ */ jsx7("span", { children: hint })
+});
+var UploadDragger = forwardRef(function UploadDragger2({ hint = "\u652F\u6301\u5355\u4E2A\u6216\u6279\u91CF\u4E0A\u4F20", children, className = "", ...props }, ref) {
+  return /* @__PURE__ */ jsx7(UploadRoot, { ...props, ref, className: `sia-upload-dragger ${className}`.trim(), children: children ?? /* @__PURE__ */ jsxs7("span", { className: "sia-upload-dragger__content", children: [
+    /* @__PURE__ */ jsx7(Icon, { name: "upload", size: 32 }),
+    /* @__PURE__ */ jsxs7("strong", { children: [
+      "\u70B9\u51FB\u6216\u62D6\u62FD",
+      props.directory ? "\u6587\u4EF6\u5939" : "\u6587\u4EF6",
+      "\u5230\u6B64\u533A\u57DF\u4E0A\u4F20"
+    ] }),
+    /* @__PURE__ */ jsx7("span", { children: hint }),
+    props.pastable && /* @__PURE__ */ jsx7("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
 });
 
@@ -1150,11 +1444,11 @@ var message = {
 };
 
 // src/components/Breadcrumb.tsx
-import { Fragment as Fragment4, jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
 function Breadcrumb({ items, separator = "/", itemRender, className = "", ...props }) {
   return /* @__PURE__ */ jsx9("nav", { "aria-label": "\u9762\u5305\u5C51\u5BFC\u822A", ...withTitleTooltip(props), className: `sia-breadcrumb ${className}`.trim(), children: /* @__PURE__ */ jsx9("ol", { className: "sia-breadcrumb__list", children: items.map((item, index) => {
     const current = index === items.length - 1;
-    const content = /* @__PURE__ */ jsxs9(Fragment4, { children: [
+    const content = /* @__PURE__ */ jsxs9(Fragment5, { children: [
       item.icon ? /* @__PURE__ */ jsx9("span", { className: "sia-breadcrumb__icon", "aria-hidden": "true", children: item.icon }) : null,
       /* @__PURE__ */ jsx9("span", { className: "sia-breadcrumb__title", children: item.title })
     ] });
@@ -1171,8 +1465,8 @@ function Breadcrumb({ items, separator = "/", itemRender, className = "", ...pro
 }
 
 // src/components/Typography.tsx
-import { useEffect as useEffect3, useLayoutEffect as useLayoutEffect3, useRef as useRef6, useState as useState6 } from "react";
-import { Fragment as Fragment5, jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
+import { useEffect as useEffect4, useLayoutEffect as useLayoutEffect3, useRef as useRef6, useState as useState7 } from "react";
+import { Fragment as Fragment6, jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
 function TypographyContent({
   as: Tag2 = "span",
   type,
@@ -1194,22 +1488,22 @@ function TypographyContent({
   const contentRef = useRef6(null);
   const editRef = useRef6(null);
   const timer = useRef6();
-  const [localText, setLocalText] = useState6();
-  const [draft, setDraft] = useState6("");
-  const [editing, setEditing] = useState6(false);
-  const [copied, setCopied] = useState6(false);
-  const [copyError, setCopyError] = useState6(false);
-  const [expanded, setExpanded] = useState6(false);
-  const [overflow, setOverflow] = useState6(false);
+  const [localText, setLocalText] = useState7();
+  const [draft, setDraft] = useState7("");
+  const [editing, setEditing] = useState7(false);
+  const [copied, setCopied] = useState7(false);
+  const [copyError, setCopyError] = useState7(false);
+  const [expanded, setExpanded] = useState7(false);
+  const [overflow, setOverflow] = useState7(false);
   const editConfig = typeof editable === "object" ? editable : void 0;
   const content = editConfig?.text ?? localText ?? children;
   const requestedRows = typeof ellipsis === "object" ? ellipsis.rows ?? 1 : 1;
   const rows = Number.isFinite(requestedRows) ? Math.max(1, Math.floor(requestedRows)) : 1;
   const expandable = typeof ellipsis === "object" && ellipsis.expandable;
-  useEffect3(() => {
+  useEffect4(() => {
     setLocalText(void 0);
   }, [children]);
-  useEffect3(() => () => clearTimeout(timer.current), []);
+  useEffect4(() => () => clearTimeout(timer.current), []);
   useLayoutEffect3(() => {
     const element = contentRef.current;
     if (!element || !ellipsis || editing || expanded) return;
@@ -1275,7 +1569,7 @@ function TypographyContent({
       /* @__PURE__ */ jsx10(Button, { size: "small", onClick: () => finish(false), children: "\u53D6\u6D88" }),
       /* @__PURE__ */ jsx10(Button, { size: "small", variant: "primary", onClick: () => finish(true), children: "\u4FDD\u5B58" })
     ] })
-  ] }) : /* @__PURE__ */ jsxs10(Fragment5, { children: [
+  ] }) : /* @__PURE__ */ jsxs10(Fragment6, { children: [
     /* @__PURE__ */ jsx10("span", { ref: contentRef, className: ellipsis && !expanded ? "sia-typography__ellipsis" : void 0, style: ellipsis && !expanded ? { "--sia-typography-rows": rows } : void 0, children: formatted }),
     expandable && (overflow || expanded) ? /* @__PURE__ */ jsx10(Button, { variant: "link", size: "small", className: "sia-typography__action", "aria-expanded": expanded, disabled, onClick: () => setExpanded(!expanded), children: expanded ? "\u6536\u8D77" : "\u5C55\u5F00" }) : null,
     editable ? /* @__PURE__ */ jsx10(Button, { ref: editRef, variant: "text", size: "small", className: "sia-typography__action", "aria-label": "\u7F16\u8F91\u6587\u672C", title: "\u7F16\u8F91", disabled, icon: /* @__PURE__ */ jsx10(Icon, { name: "edit", size: 14 }), onClick: () => {
@@ -1328,10 +1622,10 @@ var Typography = Object.assign(TypographyRoot, {
 });
 
 // src/components/FloatButton.tsx
-import { createContext, forwardRef, useContext, useEffect as useEffect4, useId as useId3, useRef as useRef7, useState as useState7 } from "react";
+import { createContext, forwardRef as forwardRef2, useContext, useEffect as useEffect5, useId as useId2, useRef as useRef7, useState as useState8 } from "react";
 import { jsx as jsx11, jsxs as jsxs11 } from "react/jsx-runtime";
 var GroupShape = createContext(void 0);
-var FloatButtonRoot = forwardRef(function FloatButton({
+var FloatButtonRoot = forwardRef2(function FloatButton({
   icon,
   description,
   tooltip,
@@ -1384,8 +1678,8 @@ function FloatButtonGroup({
   const [visible, setVisible] = useControllableState({ value: open, defaultValue: defaultOpen, onChange: onOpenChange });
   const rootRef = useRef7(null);
   const triggerRef = useRef7(null);
-  const id = useId3();
-  useEffect4(() => {
+  const id = useId2();
+  useEffect5(() => {
     if (!trigger || !visible) return;
     const close = (event) => {
       if (!rootRef.current?.contains(event.target)) setVisible(false);
@@ -1439,8 +1733,8 @@ function FloatButtonGroup({
   ) });
 }
 function FloatButtonBackTop({ target, visibilityHeight = 400, behavior = "smooth", onClick, icon, tooltip = "\u8FD4\u56DE\u9876\u90E8", ...props }) {
-  const [visible, setVisible] = useState7(false);
-  useEffect4(() => {
+  const [visible, setVisible] = useState8(false);
+  useEffect5(() => {
     const element = target ? target() : window;
     if (!element) return;
     const update = () => setVisible((element === window ? window.scrollY : element.scrollTop) >= visibilityHeight);