@sia.soul/sia-react-ui 0.1.31 → 0.1.33

package/dist/chart.cjs

@@ -247,6 +247,7 @@ function installTitleTooltips(doc) {
   documents.add(doc);
   let hovered = null;
   let focused = null;
+  let keyboardFocus = true;
   let active = null;
   let pending = null;
   let timer;
@@ -337,19 +338,30 @@ function installTitleTooltips(doc) {
     else show(hovered ?? focused);
   }, true);
   doc.addEventListener("focusin", (event) => {
-    focused = candidate(event.target);
+    focused = keyboardFocus ? candidate(event.target) : null;
     if (hasExplicitTooltip(event.target)) hide();
-    else show(focused ?? hovered);
+    else if (keyboardFocus) show(focused ?? hovered);
   }, true);
   doc.addEventListener("focusout", (event) => {
-    focused = candidate(event.relatedTarget);
+    focused = keyboardFocus ? candidate(event.relatedTarget) : null;
     show(hovered ?? focused);
   }, true);
-  doc.addEventListener("pointerdown", hide, true);
+  doc.addEventListener("pointerdown", () => {
+    keyboardFocus = false;
+    focused = null;
+    hide();
+  }, true);
   doc.addEventListener("keydown", (event) => {
     if (event.key === "Escape") hide();
+    else if (event.key === "Tab") keyboardFocus = true;
   }, true);
   doc.addEventListener("scroll", hide, true);
+  doc.addEventListener("visibilitychange", () => {
+    if (doc.hidden) {
+      hovered = focused = null;
+      hide();
+    }
+  });
   doc.defaultView?.addEventListener("blur", () => {
     hovered = focused = null;
     hide();

package/dist/chart.js

@@ -56,10 +56,10 @@ import {
   smoothSvgPath,
   svgArcPath,
   transferCompositeValue
-} from "./chunk-TZROBD65.js";
-import "./chunk-YQDHCORW.js";
-import "./chunk-IYNS423D.js";
-import "./chunk-RAO3JHDL.js";
+} from "./chunk-Q4FDV6KP.js";
+import "./chunk-SMCYEPBL.js";
+import "./chunk-IKAMZNCK.js";
+import "./chunk-H7IAG72O.js";
 export {
   BarChart,
   CHART_VIEWBOX_HEIGHT,

package/dist/{chunk-33C5ZEQ6.js → chunk-BR2SD6RD.js}

@@ -1,17 +1,17 @@
 import {
   FloatingScrollbarProvider,
   Select
-} from "./chunk-AHBC5UXJ.js";
+} from "./chunk-QAVQEBIS.js";
 import {
   Icon
-} from "./chunk-YF2I6SDB.js";
+} from "./chunk-HOU5JLNJ.js";
 import {
   PopupPortal,
   useControlSize,
   useControllableState,
   useFloatingPlaceholder,
   withTitleTooltip
-} from "./chunk-RAO3JHDL.js";
+} from "./chunk-H7IAG72O.js";
 
 // src/components/DatePicker.tsx
 import { useEffect, useId, useMemo, useRef as useRef2, useState } from "react";

package/dist/{chunk-RAO3JHDL.js → chunk-H7IAG72O.js}

@@ -13,6 +13,7 @@ function installTitleTooltips(doc) {
   documents.add(doc);
   let hovered = null;
   let focused = null;
+  let keyboardFocus = true;
   let active = null;
   let pending = null;
   let timer;
@@ -103,19 +104,30 @@ function installTitleTooltips(doc) {
     else show(hovered ?? focused);
   }, true);
   doc.addEventListener("focusin", (event) => {
-    focused = candidate(event.target);
+    focused = keyboardFocus ? candidate(event.target) : null;
     if (hasExplicitTooltip(event.target)) hide();
-    else show(focused ?? hovered);
+    else if (keyboardFocus) show(focused ?? hovered);
   }, true);
   doc.addEventListener("focusout", (event) => {
-    focused = candidate(event.relatedTarget);
+    focused = keyboardFocus ? candidate(event.relatedTarget) : null;
     show(hovered ?? focused);
   }, true);
-  doc.addEventListener("pointerdown", hide, true);
+  doc.addEventListener("pointerdown", () => {
+    keyboardFocus = false;
+    focused = null;
+    hide();
+  }, true);
   doc.addEventListener("keydown", (event) => {
     if (event.key === "Escape") hide();
+    else if (event.key === "Tab") keyboardFocus = true;
   }, true);
   doc.addEventListener("scroll", hide, true);
+  doc.addEventListener("visibilitychange", () => {
+    if (doc.hidden) {
+      hovered = focused = null;
+      hide();
+    }
+  });
   doc.defaultView?.addEventListener("blur", () => {
     hovered = focused = null;
     hide();

package/dist/{chunk-YF2I6SDB.js → chunk-HOU5JLNJ.js}

@@ -1,13 +1,13 @@
 import {
   Button
-} from "./chunk-IYNS423D.js";
+} from "./chunk-IKAMZNCK.js";
 import {
   PopupPortal,
   useControlSize,
   useControllableState,
   usePlaceholderMode,
   withTitleTooltip
-} from "./chunk-RAO3JHDL.js";
+} from "./chunk-H7IAG72O.js";
 
 // src/components/Icon.tsx
 import { forwardRef } from "react";

package/dist/{chunk-IYNS423D.js → chunk-IKAMZNCK.js}

@@ -1,7 +1,7 @@
 import {
   useControlSize,
   withTitleTooltip
-} from "./chunk-RAO3JHDL.js";
+} from "./chunk-H7IAG72O.js";
 
 // src/components/Button.tsx
 import { forwardRef, useRef } from "react";

package/dist/{chunk-PXHBIRQW.js → chunk-JZPAIZYK.js}

@@ -1,7 +1,7 @@
 import {
   useFloatingPlaceholder,
   withTitleTooltip
-} from "./chunk-RAO3JHDL.js";
+} from "./chunk-H7IAG72O.js";
 
 // src/components/MarkdownEditor.tsx
 import { useEffect, useRef, useState } from "react";

package/dist/{chunk-LK56NX5F.js → chunk-MHUYOGCG.js}

@@ -2,14 +2,14 @@ import {
   Dropdown,
   Icon,
   Input
-} from "./chunk-YF2I6SDB.js";
+} from "./chunk-HOU5JLNJ.js";
 import {
   Button
-} from "./chunk-IYNS423D.js";
+} from "./chunk-IKAMZNCK.js";
 import {
   useFloatingPlaceholder,
   withTitleTooltip
-} from "./chunk-RAO3JHDL.js";
+} from "./chunk-H7IAG72O.js";
 
 // src/components/RichTextEditor.tsx
 import { useEffect, useMemo, useRef, useState } from "react";

package/dist/{chunk-TZROBD65.js → chunk-Q4FDV6KP.js}

@@ -1,12 +1,12 @@
 import {
   TextArea
-} from "./chunk-YQDHCORW.js";
+} from "./chunk-SMCYEPBL.js";
 import {
   Button
-} from "./chunk-IYNS423D.js";
+} from "./chunk-IKAMZNCK.js";
 import {
   withTitleTooltip
-} from "./chunk-RAO3JHDL.js";
+} from "./chunk-H7IAG72O.js";
 
 // src/components/ChartWhirlingLoading.tsx
 import { useEffect, useState } from "react";

package/dist/{chunk-AHBC5UXJ.js → chunk-QAVQEBIS.js}

@@ -2,10 +2,10 @@ import {
   Dropdown,
   Icon,
   Input
-} from "./chunk-YF2I6SDB.js";
+} from "./chunk-HOU5JLNJ.js";
 import {
   Button
-} from "./chunk-IYNS423D.js";
+} from "./chunk-IKAMZNCK.js";
 import {
   ControlSizeContext,
   PopupPortal,
@@ -13,7 +13,7 @@ import {
   useControllableState,
   useFloatingPlaceholder,
   withTitleTooltip
-} from "./chunk-RAO3JHDL.js";
+} from "./chunk-H7IAG72O.js";
 
 // src/components/Checkbox.tsx
 import { createContext, forwardRef, useContext, useEffect, useId, useMemo, useRef } from "react";

package/dist/{chunk-YQDHCORW.js → chunk-SMCYEPBL.js}

@@ -2,7 +2,7 @@ import {
   useControlSize,
   useFloatingPlaceholder,
   withTitleTooltip
-} from "./chunk-RAO3JHDL.js";
+} from "./chunk-H7IAG72O.js";
 
 // src/components/TextArea.tsx
 import { forwardRef, useId, useState } from "react";

package/dist/{chunk-NDJSNM54.js → chunk-Z63VYNCR.js}

@@ -1,23 +1,23 @@
 import {
   TextArea
-} from "./chunk-YQDHCORW.js";
+} from "./chunk-SMCYEPBL.js";
 import {
   Popover,
   Tooltip,
   useOverlayLifecycle
-} from "./chunk-AHBC5UXJ.js";
+} from "./chunk-QAVQEBIS.js";
 import {
   Dropdown,
   Icon
-} from "./chunk-YF2I6SDB.js";
+} from "./chunk-HOU5JLNJ.js";
 import {
   Button
-} from "./chunk-IYNS423D.js";
+} from "./chunk-IKAMZNCK.js";
 import {
   useControlSize,
   useControllableState,
   withTitleTooltip
-} from "./chunk-RAO3JHDL.js";
+} from "./chunk-H7IAG72O.js";
 
 // src/components/Toolbar.tsx
 import { useLayoutEffect, useRef, useState } from "react";
@@ -188,13 +188,15 @@ function Tag({
 }
 
 // src/components/Tabs.tsx
-import { useId, useLayoutEffect as useLayoutEffect2, useMemo, useRef as useRef2, useState as useState3 } from "react";
+import { useEffect, useId, useLayoutEffect as useLayoutEffect2, useMemo, useRef as useRef2, useState as useState3 } from "react";
 import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 function Tabs({
   items,
   activeKey,
   defaultActiveKey,
   onChange,
+  onAfterChange,
+  deferContent = false,
   type = "line",
   size = "medium",
   tabPosition,
@@ -202,6 +204,7 @@ function Tabs({
   centered = false,
   tabBarTitle,
   tabBarExtraContent,
+  contentGap,
   destroyInactiveTabPane = true,
   closable = false,
   onEdit,
@@ -221,6 +224,12 @@ function Tabs({
   const sliding = ["capsule", "line", "underline", "tech", "tech-line"].includes(type);
   const listRef = useRef2(null);
   const indicatorRef = useRef2(null);
+  const [contentState, setContentState] = useState3(() => ({ key: selectedKey, visited: /* @__PURE__ */ new Set([selectedKey]) }));
+  const settledKeyRef = useRef2(selectedKey);
+  const afterChangeRef = useRef2(onAfterChange);
+  useLayoutEffect2(() => {
+    afterChangeRef.current = onAfterChange;
+  }, [onAfterChange]);
   useLayoutEffect2(() => {
     if (!sliding) return;
     const list = listRef.current;
@@ -250,6 +259,32 @@ function Tabs({
     list.querySelectorAll('[role="tab"]').forEach((tab) => observer.observe(tab));
     return () => observer.disconnect();
   }, [sliding, type, selectedKey, items, size, resolvedPosition, centered, closable]);
+  useEffect(() => {
+    let cancelled = false;
+    let frame = 0;
+    frame = requestAnimationFrame(() => {
+      const indicator = indicatorRef.current;
+      if (indicator) getComputedStyle(indicator).transform;
+      const animations = indicator?.getAnimations() ?? [];
+      const complete = () => {
+        if (cancelled) return;
+        setContentState((previous) => ({ key: selectedKey, visited: new Set([...previous.visited].filter((key) => items.some((item) => item.key === key))).add(selectedKey) }));
+        if (settledKeyRef.current !== selectedKey) {
+          settledKeyRef.current = selectedKey;
+          afterChangeRef.current?.(selectedKey);
+        }
+      };
+      if (!animations.length) complete();
+      else Promise.allSettled(animations.map((animation) => animation.finished)).then(() => {
+        if (!cancelled) frame = requestAnimationFrame(complete);
+      });
+    });
+    return () => {
+      cancelled = true;
+      cancelAnimationFrame(frame);
+    };
+  }, [selectedKey, type, deferContent]);
+  const contentKey = deferContent ? contentState.key : selectedKey;
   function selectTab(key) {
     if (key === selectedKey) return;
     if (activeKey === void 0) setInternalActiveKey(key);
@@ -281,26 +316,10 @@ function Tabs({
         /* @__PURE__ */ jsxs4("div", { className: "sia-tabs__header", children: [
           tabBarTitle ? /* @__PURE__ */ jsxs4("div", { className: "sia-tabs__title", children: [
             tabBarTitle,
-            type === "tech-line" ? /* @__PURE__ */ jsx4("svg", { className: "sia-tabs__title-connector", viewBox: "0 0 32 40", "aria-hidden": "true", children: /* @__PURE__ */ jsx4("path", { d: "M0 39 H5 Q8 39 10 35 L28 3 Q29 1 32 1", fill: "none", stroke: "currentColor", strokeWidth: "1.5" }) }) : null
+            type === "tech-line" ? /* @__PURE__ */ jsx4("svg", { className: "sia-tabs__title-connector", viewBox: "0 0 32 40", "aria-hidden": "true", children: /* @__PURE__ */ jsx4("path", { d: "M0 39.25 H5 Q8 39.25 10 35.25 L28 3.75 Q29 1.75 32 1.75", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinejoin: "round" }) }) : null
           ] }) : null,
           /* @__PURE__ */ jsxs4("div", { ref: listRef, className: `sia-tabs__list${sliding ? " sia-tabs__list--sliding" : ""}`, role: "tablist", "aria-orientation": resolvedOrientation, children: [
-            sliding ? /* @__PURE__ */ jsx4("span", { ref: indicatorRef, className: `sia-tabs__indicator${type === "capsule" ? " sia-tabs__capsule-indicator" : ""}`, "aria-hidden": "true", children: type === "tech-line" ? /* @__PURE__ */ jsxs4("svg", { className: "sia-tabs__indicator-shape", viewBox: "0 0 100 34", preserveAspectRatio: "none", "aria-hidden": "true", children: [
-              /* @__PURE__ */ jsx4("defs", { children: /* @__PURE__ */ jsxs4("linearGradient", { id: `${baseId}-tab-fill-indicator`, x1: "0", y1: "0", x2: "1", y2: "0", children: [
-                /* @__PURE__ */ jsx4("stop", { offset: "0", stopColor: "var(--sia-tabs-line-fill-edge, var(--sia-tabs-line-fill))" }),
-                /* @__PURE__ */ jsx4("stop", { offset: ".53", stopColor: "var(--sia-tabs-line-fill-center, var(--sia-tabs-line-fill))" }),
-                /* @__PURE__ */ jsx4("stop", { offset: "1", stopColor: "var(--sia-tabs-line-fill-edge, var(--sia-tabs-line-fill))" })
-              ] }) }),
-              /* @__PURE__ */ jsx4(
-                "path",
-                {
-                  d: "M19 1 H96 Q99 1 97.5 4 L83.5 30 Q82 33 79 33 H4 Q1 33 2.5 30 L16.5 4 Q18 1 19 1 Z",
-                  fill: `url(#${baseId}-tab-fill-indicator)`,
-                  stroke: "currentColor",
-                  strokeWidth: "1.5",
-                  vectorEffect: "non-scaling-stroke"
-                }
-              )
-            ] }) : null }, type) : null,
+            sliding ? /* @__PURE__ */ jsx4("span", { ref: indicatorRef, className: `sia-tabs__indicator${type === "capsule" ? " sia-tabs__capsule-indicator" : ""}`, "aria-hidden": "true", children: type === "tech-line" ? /* @__PURE__ */ jsx4("span", { className: "sia-tabs__indicator-shape", "aria-hidden": "true" }) : null }, type) : null,
             items.map((item) => {
               const selected = item.key === selectedKey;
               const canClose = item.closable ?? closable;
@@ -319,23 +338,7 @@ function Tabs({
                     onClick: () => selectTab(item.key),
                     onKeyDown: (event) => handleKeyDown(event, item.key),
                     children: [
-                      type === "tech-line" ? /* @__PURE__ */ jsxs4("svg", { className: "sia-tabs__tab-shape", viewBox: "0 0 100 34", preserveAspectRatio: "none", "aria-hidden": "true", children: [
-                        /* @__PURE__ */ jsx4("defs", { children: /* @__PURE__ */ jsxs4("linearGradient", { id: `${baseId}-tab-fill-${item.key}`, x1: "0", y1: "0", x2: "1", y2: "0", children: [
-                          /* @__PURE__ */ jsx4("stop", { offset: "0", stopColor: "var(--sia-tabs-line-fill-edge, var(--sia-tabs-line-fill))" }),
-                          /* @__PURE__ */ jsx4("stop", { offset: ".53", stopColor: "var(--sia-tabs-line-fill-center, var(--sia-tabs-line-fill))" }),
-                          /* @__PURE__ */ jsx4("stop", { offset: "1", stopColor: "var(--sia-tabs-line-fill-edge, var(--sia-tabs-line-fill))" })
-                        ] }) }),
-                        /* @__PURE__ */ jsx4(
-                          "path",
-                          {
-                            d: "M19 1 H96 Q99 1 97.5 4 L83.5 30 Q82 33 79 33 H4 Q1 33 2.5 30 L16.5 4 Q18 1 19 1 Z",
-                            fill: `url(#${baseId}-tab-fill-${item.key})`,
-                            stroke: "currentColor",
-                            strokeWidth: "1.5",
-                            vectorEffect: "non-scaling-stroke"
-                          }
-                        )
-                      ] }) : null,
+                      type === "tech-line" ? /* @__PURE__ */ jsx4("span", { className: "sia-tabs__tab-shape", "aria-hidden": "true" }) : null,
                       item.icon ? /* @__PURE__ */ jsx4("span", { className: "sia-tabs__icon", children: item.icon }) : null,
                       /* @__PURE__ */ jsx4("span", { children: item.label })
                     ]
@@ -375,9 +378,13 @@ function Tabs({
           ] }),
           tabBarExtraContent ? /* @__PURE__ */ jsx4("div", { className: "sia-tabs__extra", children: tabBarExtraContent }) : null
         ] }),
-        hasPanels ? /* @__PURE__ */ jsx4("div", { className: "sia-tabs__panels", children: items.map((item) => {
-          const selected = item.key === selectedKey;
+        hasPanels ? /* @__PURE__ */ jsx4("div", { className: "sia-tabs__panels", style: contentGap === void 0 ? void 0 : {
+          // 仅设置面板靠近导航的一侧，保留各方向布局原有的其余边界。
+          [resolvedPosition === "top" ? "paddingTop" : resolvedPosition === "bottom" ? "paddingBottom" : resolvedPosition === "left" ? "paddingLeft" : "paddingRight"]: contentGap
+        }, "aria-busy": deferContent && contentKey !== selectedKey || void 0, children: items.map((item) => {
+          const selected = item.key === contentKey;
           if (destroyInactiveTabPane && !selected) return null;
+          if (deferContent && !selected && !contentState.visited.has(item.key)) return null;
           return /* @__PURE__ */ jsx4(
             "div",
             {
@@ -398,7 +405,7 @@ function Tabs({
 }
 
 // src/components/Feedback.tsx
-import { useEffect, useMemo as useMemo2, useState as useState4 } from "react";
+import { useEffect as useEffect2, useMemo as useMemo2, useState as useState4 } from "react";
 import { createPortal } from "react-dom";
 import { createRoot } from "react-dom/client";
 import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
@@ -498,7 +505,7 @@ function Progress({
 }
 function Spin({ spinning = true, size = "default", tip, indicator, delay = 0, fullscreen = false, className = "", children, ...props }) {
   const [visible, setVisible] = useState4(delay === 0 && spinning);
-  useEffect(() => {
+  useEffect2(() => {
     if (!spinning) {
       setVisible(false);
       return;
@@ -557,7 +564,7 @@ function closeNotification(key) {
 }
 function NotificationHost() {
   const [entries, setEntries] = useState4(notificationEntries);
-  useEffect(() => {
+  useEffect2(() => {
     notificationListeners.add(setEntries);
     return () => {
       notificationListeners.delete(setEntries);
@@ -618,7 +625,7 @@ var notification = {
 function Tour({ open = false, steps, current, defaultCurrent = 0, mask = true, closable = true, disabledInteraction = false, onChange, onClose, onFinish }) {
   const [index, setIndex] = useControllableState({ value: current, defaultValue: defaultCurrent, onChange });
   const [, force] = useState4(0);
-  useEffect(() => {
+  useEffect2(() => {
     if (!open) return;
     const update = () => force((value) => value + 1);
     window.addEventListener("resize", update);
@@ -661,7 +668,7 @@ function Tour({ open = false, steps, current, defaultCurrent = 0, mask = true, c
 }
 
 // src/components/DataDisplay.tsx
-import { Children, useEffect as useEffect2, useMemo as useMemo3, useRef as useRef4, useState as useState5 } from "react";
+import { Children, useEffect as useEffect3, useMemo as useMemo3, useRef as useRef4, useState as useState5 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
 import { Fragment as Fragment3, jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 function Rate({ value, size: sizeProp, defaultValue = 0, count = 5, allowHalf = false, allowClear = true, disabled = false, character, tooltips, onChange, onHoverChange, className = "", ...props }) {
@@ -743,7 +750,7 @@ function Calendar({ value, defaultValue, mode = "month", fullscreen = true, vali
     const date = parseDate(value ?? defaultValue);
     return new Date(date.getFullYear(), date.getMonth(), 1);
   });
-  useEffect2(() => {
+  useEffect3(() => {
     if (value) {
       const date = parseDate(value);
       setPanel(new Date(date.getFullYear(), date.getMonth(), 1));
@@ -811,7 +818,7 @@ function Carousel({ autoplay = false, autoplaySpeed = 3e3, arrows = false, dots
     setCurrent(resolved);
     afterChange?.(resolved);
   }
-  useEffect2(() => {
+  useEffect3(() => {
     if (!autoplay || paused || slides.length < 2) return;
     const timer = window.setInterval(() => go(current + 1), autoplaySpeed);
     return () => window.clearInterval(timer);
@@ -832,7 +839,7 @@ function CollapsePanel({
   children
 }) {
   const [keepChildren, setKeepChildren] = useState5(open || forceRender || !destroyInactivePanel);
-  useEffect2(() => {
+  useEffect3(() => {
     if (open || forceRender || !destroyInactivePanel) {
       setKeepChildren(true);
       return void 0;
@@ -916,7 +923,7 @@ function Image({ fallback, placeholder, preview = true, rootClassName = "", clas
 }
 
 // src/components/Upload.tsx
-import { forwardRef, useEffect as useEffect3, useImperativeHandle, useRef as useRef5, useState as useState6 } from "react";
+import { forwardRef, useEffect as useEffect4, useImperativeHandle, useRef as useRef5, useState as useState6 } from "react";
 
 // src/components/uploadFiles.ts
 function acceptsUploadFile(file, accept) {
@@ -1008,7 +1015,7 @@ import { Fragment as Fragment4, jsx as jsx7, jsxs as jsxs7 } from "react/jsx-run
 var LIST_IGNORE = /* @__PURE__ */ Symbol("SIA_UPLOAD_LIST_IGNORE");
 function useThumbnail(file) {
   const [local, setLocal] = useState6();
-  useEffect3(() => {
+  useEffect4(() => {
     if (!file?.thumbUrl && file?.originFileObj?.type.startsWith("image/")) {
       const url = URL.createObjectURL(file.originFileObj);
       setLocal(url);
@@ -1021,7 +1028,7 @@ function useThumbnail(file) {
 function UploadItem({ file, files, props, actions }) {
   const source = useThumbnail(file);
   const [failed, setFailed] = useState6(false);
-  useEffect3(() => setFailed(false), [source]);
+  useEffect4(() => 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 }),
@@ -1093,14 +1100,14 @@ var UploadRoot = forwardRef(function UploadRoot2({
     }
     task?.finish();
   }
-  useEffect3(() => {
+  useEffect4(() => {
     mounted.current = true;
     return () => {
       mounted.current = false;
       [...tasks.current.keys()].forEach(cancel);
     };
   }, []);
-  useEffect3(() => {
+  useEffect4(() => {
     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]);
@@ -1467,7 +1474,7 @@ function Breadcrumb({ items, separator = "/", itemRender, className = "", ...pro
 }
 
 // src/components/Typography.tsx
-import { useEffect as useEffect4, useLayoutEffect as useLayoutEffect3, useRef as useRef6, useState as useState7 } from "react";
+import { useEffect as useEffect5, 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",
@@ -1502,10 +1509,10 @@ function TypographyContent({
   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;
-  useEffect4(() => {
+  useEffect5(() => {
     setLocalText(void 0);
   }, [children]);
-  useEffect4(() => () => clearTimeout(timer.current), []);
+  useEffect5(() => () => clearTimeout(timer.current), []);
   useLayoutEffect3(() => {
     const element = contentRef.current;
     if (!element || !ellipsis || editing || expanded) return;
@@ -1624,7 +1631,7 @@ var Typography = Object.assign(TypographyRoot, {
 });
 
 // src/components/FloatButton.tsx
-import { createContext, forwardRef as forwardRef2, useContext, useEffect as useEffect5, useId as useId2, useRef as useRef7, useState as useState8 } from "react";
+import { createContext, forwardRef as forwardRef2, useContext, useEffect as useEffect6, 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 = forwardRef2(function FloatButton({
@@ -1681,7 +1688,7 @@ function FloatButtonGroup({
   const rootRef = useRef7(null);
   const triggerRef = useRef7(null);
   const id = useId2();
-  useEffect5(() => {
+  useEffect6(() => {
     if (!trigger || !visible) return;
     const close = (event) => {
       if (!rootRef.current?.contains(event.target)) setVisible(false);
@@ -1736,7 +1743,7 @@ function FloatButtonGroup({
 }
 function FloatButtonBackTop({ target, visibilityHeight = 400, behavior = "smooth", onClick, icon, tooltip = "\u8FD4\u56DE\u9876\u90E8", ...props }) {
   const [visible, setVisible] = useState8(false);
-  useEffect5(() => {
+  useEffect6(() => {
     const element = target ? target() : window;
     if (!element) return;
     const update = () => setVisible((element === window ? window.scrollY : element.scrollTop) >= visibilityHeight);

package/dist/{core-C89ubkwU.d.ts → core-CIXKpA9Z.d.ts}

@@ -689,10 +689,14 @@ interface TabsProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
     activeKey?: string;
     /** 非受控模式下初始激活的项目标识。 */
     defaultActiveKey?: string;
-    /** 激活项变化回调 */
+    /** 用户切换标签时立即调用，参数为目标 key；受控模式需同步更新 activeKey。重内容或路由切换可放在 onAfterChange 中，避免阻塞选中框动画。 */
     onChange?: (key: string) => void;
+    /** 选中框动画结束且目标面板获准显示时调用，参数为最终目标 key；首次渲染不调用，连续切换仅通知最终目标。无动画或系统减少动态效果时在下一帧完成，不等待面板数据请求；也适用于业务在 Tabs 外渲染内容或切换路由。 */
+    onAfterChange?: (key: string) => void;
+    /** 是否等选中框动画结束后再切换 items[].children，等待期间保留旧面板。默认 false，立即切换；true 时配合 destroyInactiveTabPane=false 仅在首次激活后挂载并保留面板。不能延迟父组件已执行的同步计算或 onChange 中的渲染，请将外部重内容更新放到 onAfterChange。 */
+    deferContent?: boolean;
     /**
-     * 线型、卡片型、胶囊型、圆角胶囊、紧凑下划线或科技样式
+     * 线型、卡片型、胶囊型、圆角胶囊、紧凑下划线或科技样式；tech-line 使用固定倾角的圆角斜切选中框，长标题仅扩展中段宽度；位移与尺寸在 300ms 内同步过渡，系统减少动态效果时直接切换。
      * @defaultValue "line"
      */
     type?: TabsType;
@@ -713,8 +717,10 @@ interface TabsProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
      * @defaultValue false
      */
     centered?: boolean;
-    /** 标签栏左侧标题，科技大屏型会附带装饰线 */
+    /** 标签栏左侧标题，科技大屏型会附带装饰线；折线科技型横向布局按标题内容及装饰留白确定宽度，窄屏时标题独占一行。 */
     tabBarTitle?: ReactNode;
+    /** 标签栏与内容面板之间的间距，单位 px，支持 0；未指定时上下布局为 16px，左右布局为 20px。仅影响当前 Tabs，不传递给嵌套实例。 */
+    contentGap?: number;
     /** 标签栏右侧额外操作 */
     tabBarExtraContent?: ReactNode;
     /**
@@ -735,7 +741,7 @@ interface TabsProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
     onTabContextMenuClick?: (info: TabsContextMenuClickInfo) => void;
 }
 /** 选项卡组件。 */
-declare function Tabs({ items, activeKey, defaultActiveKey, onChange, type, size, tabPosition, orientation, centered, tabBarTitle, tabBarExtraContent, destroyInactiveTabPane, closable, onEdit, tabContextMenu, onTabContextMenuClick, className, ...props }: TabsProps): react.JSX.Element;
+declare function Tabs({ items, activeKey, defaultActiveKey, onChange, onAfterChange, deferContent, type, size, tabPosition, orientation, centered, tabBarTitle, tabBarExtraContent, contentGap, destroyInactiveTabPane, closable, onEdit, tabContextMenu, onTabContextMenuClick, className, ...props }: TabsProps): react.JSX.Element;
 
 /** 打开下拉菜单的触发方式。 */
 type DropdownTrigger = "click" | "hover" | "contextMenu";

package/dist/{core-DwsFTbqh.d.cts → core-CzO_tc34.d.cts}

@@ -689,10 +689,14 @@ interface TabsProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
     activeKey?: string;
     /** 非受控模式下初始激活的项目标识。 */
     defaultActiveKey?: string;
-    /** 激活项变化回调 */
+    /** 用户切换标签时立即调用，参数为目标 key；受控模式需同步更新 activeKey。重内容或路由切换可放在 onAfterChange 中，避免阻塞选中框动画。 */
     onChange?: (key: string) => void;
+    /** 选中框动画结束且目标面板获准显示时调用，参数为最终目标 key；首次渲染不调用，连续切换仅通知最终目标。无动画或系统减少动态效果时在下一帧完成，不等待面板数据请求；也适用于业务在 Tabs 外渲染内容或切换路由。 */
+    onAfterChange?: (key: string) => void;
+    /** 是否等选中框动画结束后再切换 items[].children，等待期间保留旧面板。默认 false，立即切换；true 时配合 destroyInactiveTabPane=false 仅在首次激活后挂载并保留面板。不能延迟父组件已执行的同步计算或 onChange 中的渲染，请将外部重内容更新放到 onAfterChange。 */
+    deferContent?: boolean;
     /**
-     * 线型、卡片型、胶囊型、圆角胶囊、紧凑下划线或科技样式
+     * 线型、卡片型、胶囊型、圆角胶囊、紧凑下划线或科技样式；tech-line 使用固定倾角的圆角斜切选中框，长标题仅扩展中段宽度；位移与尺寸在 300ms 内同步过渡，系统减少动态效果时直接切换。
      * @defaultValue "line"
      */
     type?: TabsType;
@@ -713,8 +717,10 @@ interface TabsProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
      * @defaultValue false
      */
     centered?: boolean;
-    /** 标签栏左侧标题，科技大屏型会附带装饰线 */
+    /** 标签栏左侧标题，科技大屏型会附带装饰线；折线科技型横向布局按标题内容及装饰留白确定宽度，窄屏时标题独占一行。 */
     tabBarTitle?: ReactNode;
+    /** 标签栏与内容面板之间的间距，单位 px，支持 0；未指定时上下布局为 16px，左右布局为 20px。仅影响当前 Tabs，不传递给嵌套实例。 */
+    contentGap?: number;
     /** 标签栏右侧额外操作 */
     tabBarExtraContent?: ReactNode;
     /**
@@ -735,7 +741,7 @@ interface TabsProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
     onTabContextMenuClick?: (info: TabsContextMenuClickInfo) => void;
 }
 /** 选项卡组件。 */
-declare function Tabs({ items, activeKey, defaultActiveKey, onChange, type, size, tabPosition, orientation, centered, tabBarTitle, tabBarExtraContent, destroyInactiveTabPane, closable, onEdit, tabContextMenu, onTabContextMenuClick, className, ...props }: TabsProps): react.JSX.Element;
+declare function Tabs({ items, activeKey, defaultActiveKey, onChange, onAfterChange, deferContent, type, size, tabPosition, orientation, centered, tabBarTitle, tabBarExtraContent, contentGap, destroyInactiveTabPane, closable, onEdit, tabContextMenu, onTabContextMenuClick, className, ...props }: TabsProps): react.JSX.Element;
 
 /** 打开下拉菜单的触发方式。 */
 type DropdownTrigger = "click" | "hover" | "contextMenu";