@sia.soul/sia-react-ui 0.1.10 → 0.1.11

package/dist/{chunk-SGJLZN23.js → chunk-BUMS62NO.js}

@@ -1092,6 +1092,7 @@ var Select = forwardRef3(function Select2({
   optionHeight = showValue ? 54 : 34,
   disabled,
   className = "",
+  style,
   id,
   notFoundContent = "\u6682\u65E0\u6570\u636E",
   onKeyDown,
@@ -1322,7 +1323,7 @@ var Select = forwardRef3(function Select2({
     setModalValues([...modalValues.filter((value2) => !editable.has(value2)), ...modalEnabled.filter((option) => operation === "all" || operation === "invert" && !modalValues.includes(option.value)).map((option) => option.value)]);
   }
   const floating = useFloatingPlaceholder({ mode: placeholderMode, placeholder, filled: hasValue, active: open });
-  return /* @__PURE__ */ jsxs6("div", { ref: rootRef, className: `sia-select sia-select--${size} sia-select--${status}${open ? " is-open" : ""}${disabled ? " is-disabled" : ""}${multiple ? " sia-select--multiple" : ""} ${className}`.trim(), children: [
+  return /* @__PURE__ */ jsxs6("div", { ref: rootRef, className: `sia-select sia-select--${size} sia-select--${status}${open ? " is-open" : ""}${disabled ? " is-disabled" : ""}${multiple ? " sia-select--multiple" : ""} ${className}`.trim(), style, children: [
     /* @__PURE__ */ jsxs6(
       "button",
       {

package/dist/{chunk-6HP6IIT4.js → chunk-MOOMDRAN.js}

@@ -5,7 +5,7 @@ import {
   Popover,
   Tooltip,
   useOverlayLifecycle
-} from "./chunk-SGJLZN23.js";
+} from "./chunk-BUMS62NO.js";
 import {
   Dropdown,
   Icon
@@ -110,7 +110,7 @@ function Tag({
 }
 
 // src/components/Tabs.tsx
-import { useId, useMemo, useState as useState2 } from "react";
+import { useId, useLayoutEffect, useMemo, useRef, useState as useState2 } from "react";
 import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 function Tabs({
   items,
@@ -140,6 +140,38 @@ function Tabs({
   const enabledItems = useMemo(() => items.filter((item) => !item.disabled), [items]);
   const resolvedPosition = tabPosition ?? (orientation === "vertical" ? "left" : "top");
   const resolvedOrientation = resolvedPosition === "left" || resolvedPosition === "right" ? "vertical" : "horizontal";
+  const sliding = ["capsule", "line", "underline", "tech", "tech-line"].includes(type);
+  const listRef = useRef(null);
+  const indicatorRef = useRef(null);
+  useLayoutEffect(() => {
+    if (!sliding) return;
+    const list = listRef.current;
+    const indicator = indicatorRef.current;
+    if (!list || !indicator) return;
+    function updateIndicator() {
+      if (!list || !indicator) return;
+      const active = list.querySelector('[role="tab"][aria-selected="true"]');
+      if (!active) {
+        indicator.style.visibility = "hidden";
+        return;
+      }
+      const listRect = list.getBoundingClientRect();
+      const rect = active.getBoundingClientRect();
+      indicator.style.transform = `translate(${rect.left - listRect.left - list.clientLeft + list.scrollLeft}px, ${rect.top - listRect.top - list.clientTop + list.scrollTop}px)`;
+      indicator.style.width = `${rect.width}px`;
+      indicator.style.height = `${rect.height}px`;
+      indicator.style.visibility = "visible";
+      if (!indicator.dataset.ready) {
+        indicator.getBoundingClientRect();
+        indicator.dataset.ready = "true";
+      }
+    }
+    updateIndicator();
+    const observer = new ResizeObserver(updateIndicator);
+    observer.observe(list);
+    list.querySelectorAll('[role="tab"]').forEach((tab) => observer.observe(tab));
+    return () => observer.disconnect();
+  }, [sliding, type, selectedKey, items, size, resolvedPosition, centered, closable]);
   function selectTab(key) {
     if (key === selectedKey) return;
     if (activeKey === void 0) setInternalActiveKey(key);
@@ -165,7 +197,7 @@ function Tabs({
   return /* @__PURE__ */ jsxs3(
     "div",
     {
-      className: `sia-tabs sia-tabs--${type} sia-tabs--${size} sia-tabs--${resolvedOrientation} sia-tabs--${resolvedPosition}${centered ? " sia-tabs--centered" : ""} ${className}`.trim(),
+      className: `sia-tabs sia-tabs--${type}${type === "underline" ? " sia-tabs--line" : ""} sia-tabs--${size} sia-tabs--${resolvedOrientation} sia-tabs--${resolvedPosition}${centered ? " sia-tabs--centered" : ""} ${className}`.trim(),
       ...props,
       children: [
         /* @__PURE__ */ jsxs3("div", { className: "sia-tabs__header", children: [
@@ -173,77 +205,96 @@ function Tabs({
             tabBarTitle,
             type === "tech-line" ? /* @__PURE__ */ jsx3("svg", { className: "sia-tabs__title-connector", viewBox: "0 0 32 40", "aria-hidden": "true", children: /* @__PURE__ */ jsx3("path", { d: "M0 39 H5 Q8 39 10 35 L28 3 Q29 1 32 1", fill: "none", stroke: "currentColor", strokeWidth: "1.5" }) }) : null
           ] }) : null,
-          /* @__PURE__ */ jsx3("div", { className: "sia-tabs__list", role: "tablist", "aria-orientation": resolvedOrientation, children: items.map((item) => {
-            const selected = item.key === selectedKey;
-            const canClose = item.closable ?? closable;
-            const tabNode = /* @__PURE__ */ jsxs3("span", { className: `sia-tabs__tab-wrap${canClose ? " is-closable" : ""}`, children: [
-              /* @__PURE__ */ jsxs3(
-                "button",
+          /* @__PURE__ */ jsxs3("div", { ref: listRef, className: `sia-tabs__list${sliding ? " sia-tabs__list--sliding" : ""}`, role: "tablist", "aria-orientation": resolvedOrientation, children: [
+            sliding ? /* @__PURE__ */ jsx3("span", { ref: indicatorRef, className: `sia-tabs__indicator${type === "capsule" ? " sia-tabs__capsule-indicator" : ""}`, "aria-hidden": "true", children: type === "tech-line" ? /* @__PURE__ */ jsxs3("svg", { className: "sia-tabs__indicator-shape", viewBox: "0 0 100 34", preserveAspectRatio: "none", "aria-hidden": "true", children: [
+              /* @__PURE__ */ jsx3("defs", { children: /* @__PURE__ */ jsxs3("linearGradient", { id: `${baseId}-tab-fill-indicator`, x1: "0", y1: "0", x2: "1", y2: "0", children: [
+                /* @__PURE__ */ jsx3("stop", { offset: "0", stopColor: "var(--sia-tabs-line-fill-edge, var(--sia-tabs-line-fill))" }),
+                /* @__PURE__ */ jsx3("stop", { offset: ".53", stopColor: "var(--sia-tabs-line-fill-center, var(--sia-tabs-line-fill))" }),
+                /* @__PURE__ */ jsx3("stop", { offset: "1", stopColor: "var(--sia-tabs-line-fill-edge, var(--sia-tabs-line-fill))" })
+              ] }) }),
+              /* @__PURE__ */ jsx3(
+                "path",
                 {
-                  id: `${baseId}-tab-${item.key}`,
-                  type: "button",
-                  className: "sia-tabs__tab",
-                  role: "tab",
-                  "aria-selected": selected,
-                  "aria-controls": hasPanels ? `${baseId}-panel-${item.key}` : void 0,
-                  tabIndex: selected ? 0 : -1,
-                  disabled: item.disabled,
-                  onClick: () => selectTab(item.key),
-                  onKeyDown: (event) => handleKeyDown(event, item.key),
-                  children: [
-                    type === "tech-line" ? /* @__PURE__ */ jsxs3("svg", { className: "sia-tabs__tab-shape", viewBox: "0 0 100 34", preserveAspectRatio: "none", "aria-hidden": "true", children: [
-                      /* @__PURE__ */ jsx3("defs", { children: /* @__PURE__ */ jsxs3("linearGradient", { id: `${baseId}-tab-fill-${item.key}`, x1: "0", y1: "0", x2: "1", y2: "0", children: [
-                        /* @__PURE__ */ jsx3("stop", { offset: "0", stopColor: "var(--sia-tabs-line-fill-edge, var(--sia-tabs-line-fill))" }),
-                        /* @__PURE__ */ jsx3("stop", { offset: ".53", stopColor: "var(--sia-tabs-line-fill-center, var(--sia-tabs-line-fill))" }),
-                        /* @__PURE__ */ jsx3("stop", { offset: "1", stopColor: "var(--sia-tabs-line-fill-edge, var(--sia-tabs-line-fill))" })
-                      ] }) }),
-                      /* @__PURE__ */ jsx3(
-                        "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,
-                    item.icon ? /* @__PURE__ */ jsx3("span", { className: "sia-tabs__icon", children: item.icon }) : null,
-                    /* @__PURE__ */ jsx3("span", { children: item.label })
-                  ]
+                  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"
                 }
-              ),
-              canClose ? /* @__PURE__ */ jsx3(
-                "button",
+              )
+            ] }) : null }, type) : null,
+            items.map((item) => {
+              const selected = item.key === selectedKey;
+              const canClose = item.closable ?? closable;
+              const tabNode = /* @__PURE__ */ jsxs3("span", { className: `sia-tabs__tab-wrap${canClose ? " is-closable" : ""}`, children: [
+                /* @__PURE__ */ jsxs3(
+                  "button",
+                  {
+                    id: `${baseId}-tab-${item.key}`,
+                    type: "button",
+                    className: "sia-tabs__tab",
+                    role: "tab",
+                    "aria-selected": selected,
+                    "aria-controls": hasPanels ? `${baseId}-panel-${item.key}` : void 0,
+                    tabIndex: selected ? 0 : -1,
+                    disabled: item.disabled,
+                    onClick: () => selectTab(item.key),
+                    onKeyDown: (event) => handleKeyDown(event, item.key),
+                    children: [
+                      type === "tech-line" ? /* @__PURE__ */ jsxs3("svg", { className: "sia-tabs__tab-shape", viewBox: "0 0 100 34", preserveAspectRatio: "none", "aria-hidden": "true", children: [
+                        /* @__PURE__ */ jsx3("defs", { children: /* @__PURE__ */ jsxs3("linearGradient", { id: `${baseId}-tab-fill-${item.key}`, x1: "0", y1: "0", x2: "1", y2: "0", children: [
+                          /* @__PURE__ */ jsx3("stop", { offset: "0", stopColor: "var(--sia-tabs-line-fill-edge, var(--sia-tabs-line-fill))" }),
+                          /* @__PURE__ */ jsx3("stop", { offset: ".53", stopColor: "var(--sia-tabs-line-fill-center, var(--sia-tabs-line-fill))" }),
+                          /* @__PURE__ */ jsx3("stop", { offset: "1", stopColor: "var(--sia-tabs-line-fill-edge, var(--sia-tabs-line-fill))" })
+                        ] }) }),
+                        /* @__PURE__ */ jsx3(
+                          "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,
+                      item.icon ? /* @__PURE__ */ jsx3("span", { className: "sia-tabs__icon", children: item.icon }) : null,
+                      /* @__PURE__ */ jsx3("span", { children: item.label })
+                    ]
+                  }
+                ),
+                canClose ? /* @__PURE__ */ jsx3(
+                  "button",
+                  {
+                    type: "button",
+                    className: "sia-tabs__close",
+                    "aria-label": `\u5173\u95ED${typeof item.label === "string" ? item.label : "\u6807\u7B7E\u9875"}`,
+                    disabled: item.disabled,
+                    onClick: () => onEdit?.(item.key, "remove"),
+                    children: /* @__PURE__ */ jsx3(Icon, { name: "close", size: 12 })
+                  }
+                ) : null
+              ] }, item.key);
+              const contextMenuItems = typeof tabContextMenu === "function" ? tabContextMenu(item) : tabContextMenu;
+              if (!contextMenuItems?.length) return tabNode;
+              return /* @__PURE__ */ jsx3(
+                Dropdown,
                 {
-                  type: "button",
-                  className: "sia-tabs__close",
-                  "aria-label": `\u5173\u95ED${typeof item.label === "string" ? item.label : "\u6807\u7B7E\u9875"}`,
-                  disabled: item.disabled,
-                  onClick: () => onEdit?.(item.key, "remove"),
-                  children: /* @__PURE__ */ jsx3(Icon, { name: "close", size: 12 })
-                }
-              ) : null
-            ] }, item.key);
-            const contextMenuItems = typeof tabContextMenu === "function" ? tabContextMenu(item) : tabContextMenu;
-            if (!contextMenuItems?.length) return tabNode;
-            return /* @__PURE__ */ jsx3(
-              Dropdown,
-              {
-                className: "sia-tabs__tab-context-trigger",
-                popupClassName: "sia-tabs__tab-context-menu",
-                trigger: ["contextMenu"],
-                tabIndex: -1,
-                menu: {
-                  items: contextMenuItems,
-                  selectable: false,
-                  onClick: (info) => onTabContextMenuClick?.({ ...info, tabKey: item.key, tab: item })
+                  className: "sia-tabs__tab-context-trigger",
+                  popupClassName: "sia-tabs__tab-context-menu",
+                  trigger: ["contextMenu"],
+                  tabIndex: -1,
+                  menu: {
+                    items: contextMenuItems,
+                    selectable: false,
+                    onClick: (info) => onTabContextMenuClick?.({ ...info, tabKey: item.key, tab: item })
+                  },
+                  children: tabNode
                 },
-                children: tabNode
-              },
-              item.key
-            );
-          }) }),
+                item.key
+              );
+            })
+          ] }),
           tabBarExtraContent ? /* @__PURE__ */ jsx3("div", { className: "sia-tabs__extra", children: tabBarExtraContent }) : null
         ] }),
         hasPanels ? /* @__PURE__ */ jsx3("div", { className: "sia-tabs__panels", children: items.map((item) => {
@@ -526,7 +577,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 useRef2, useState as useState4 } from "react";
+import { Children, useEffect as useEffect2, useMemo as useMemo3, useRef as useRef3, useState as useState4 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
 import { Fragment as Fragment3, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 function Rate({ value, defaultValue = 0, count = 5, allowHalf = false, allowClear = true, disabled = false, character, tooltips, onChange, onHoverChange, className = "", ...props }) {
@@ -740,7 +791,7 @@ function Collapse({ items, activeKey, defaultActiveKey = [], accordion = false,
   }) });
 }
 function ImagePreview({ open, src, alt = "", onOpenChange }) {
-  const previewRef = useRef2(null);
+  const previewRef = useRef3(null);
   useOverlayLifecycle(open, previewRef, () => onOpenChange(false));
   if (!open || !src || typeof document === "undefined") return null;
   return createPortal2(/* @__PURE__ */ jsxs5("div", { ref: previewRef, className: "sia-image-preview", role: "dialog", "aria-modal": "true", "aria-label": "\u56FE\u7247\u9884\u89C8", tabIndex: -1, onClick: () => onOpenChange(false), children: [
@@ -780,7 +831,7 @@ function Image({ fallback, placeholder, preview = true, rootClassName = "", clas
 }
 
 // src/components/Upload.tsx
-import { useId as useId2, useRef as useRef3 } from "react";
+import { useId as useId2, useRef as useRef4 } from "react";
 import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
 var LIST_IGNORE = /* @__PURE__ */ Symbol("SIA_UPLOAD_LIST_IGNORE");
 function UploadRoot({
@@ -803,8 +854,8 @@ function UploadRoot({
   onDrop,
   ...props
 }) {
-  const inputRef = useRef3(null);
-  const filesRef = useRef3(fileList ?? defaultFileList);
+  const inputRef = useRef4(null);
+  const filesRef = useRef4(fileList ?? defaultFileList);
   const id = useId2();
   const [files, setFiles] = useControllableState({ value: fileList, defaultValue: defaultFileList });
   filesRef.current = files;
@@ -1028,7 +1079,7 @@ function Breadcrumb({ items, separator = "/", itemRender, className = "", ...pro
 }
 
 // src/components/Typography.tsx
-import { useEffect as useEffect3, useLayoutEffect, useRef as useRef4, useState as useState5 } from "react";
+import { useEffect as useEffect3, useLayoutEffect as useLayoutEffect2, useRef as useRef5, useState as useState5 } from "react";
 import { Fragment as Fragment5, jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
 function TypographyContent({
   as: Tag2 = "span",
@@ -1048,9 +1099,9 @@ function TypographyContent({
   className = "",
   ...props
 }) {
-  const contentRef = useRef4(null);
-  const editRef = useRef4(null);
-  const timer = useRef4();
+  const contentRef = useRef5(null);
+  const editRef = useRef5(null);
+  const timer = useRef5();
   const [localText, setLocalText] = useState5();
   const [draft, setDraft] = useState5("");
   const [editing, setEditing] = useState5(false);
@@ -1067,7 +1118,7 @@ function TypographyContent({
     setLocalText(void 0);
   }, [children]);
   useEffect3(() => () => clearTimeout(timer.current), []);
-  useLayoutEffect(() => {
+  useLayoutEffect2(() => {
     const element = contentRef.current;
     if (!element || !ellipsis || editing || expanded) return;
     const measure = () => setOverflow(element.scrollHeight > element.clientHeight + 1 || element.scrollWidth > element.clientWidth + 1);
@@ -1176,7 +1227,7 @@ function TypographyRoot({ className = "", ...props }) {
 var Typography = Object.assign(TypographyRoot, { Title, Text, Paragraph, Link });
 
 // src/components/FloatButton.tsx
-import { createContext, forwardRef, useContext, useEffect as useEffect4, useId as useId3, useRef as useRef5, useState as useState6 } from "react";
+import { createContext, forwardRef, useContext, useEffect as useEffect4, useId as useId3, useRef as useRef6, useState as useState6 } from "react";
 import { jsx as jsx10, jsxs as jsxs10 } from "react/jsx-runtime";
 var GroupShape = createContext(void 0);
 var FloatButtonRoot = forwardRef(function FloatButton({
@@ -1230,8 +1281,8 @@ function FloatButtonGroup({
   ...props
 }) {
   const [visible, setVisible] = useControllableState({ value: open, defaultValue: defaultOpen, onChange: onOpenChange });
-  const rootRef = useRef5(null);
-  const triggerRef = useRef5(null);
+  const rootRef = useRef6(null);
+  const triggerRef = useRef6(null);
   const id = useId3();
   useEffect4(() => {
     if (!trigger || !visible) return;

package/dist/{chunk-T2X6WK6Z.js → chunk-RLTG3IK7.js}

@@ -1,6 +1,6 @@
 import {
   Select
-} from "./chunk-SGJLZN23.js";
+} from "./chunk-BUMS62NO.js";
 import {
   Icon,
   PopupPortal

package/dist/{core-Dwc_30PN.d.cts → core-D3ZPxJ7a.d.cts}

@@ -401,7 +401,7 @@ interface TabItem {
     icon?: ReactNode;
     closable?: boolean;
 }
-type TabsType = "line" | "card" | "pill" | "tech" | "tech-line";
+type TabsType = "line" | "card" | "pill" | "capsule" | "underline" | "tech" | "tech-line";
 type TabsOrientation = "horizontal" | "vertical";
 type TabsPosition = "top" | "right" | "bottom" | "left";
 type TabsContextMenuClickInfo = MenuClickInfo & {

package/dist/{core-ByQQ3hq2.d.ts → core-EyinLic7.d.ts}

@@ -401,7 +401,7 @@ interface TabItem {
     icon?: ReactNode;
     closable?: boolean;
 }
-type TabsType = "line" | "card" | "pill" | "tech" | "tech-line";
+type TabsType = "line" | "card" | "pill" | "capsule" | "underline" | "tech" | "tech-line";
 type TabsOrientation = "horizontal" | "vertical";
 type TabsPosition = "top" | "right" | "bottom" | "left";
 type TabsContextMenuClickInfo = MenuClickInfo & {

package/dist/core.cjs

@@ -1621,6 +1621,38 @@ function Tabs({
   const enabledItems = (0, import_react8.useMemo)(() => items.filter((item) => !item.disabled), [items]);
   const resolvedPosition = tabPosition ?? (orientation === "vertical" ? "left" : "top");
   const resolvedOrientation = resolvedPosition === "left" || resolvedPosition === "right" ? "vertical" : "horizontal";
+  const sliding = ["capsule", "line", "underline", "tech", "tech-line"].includes(type);
+  const listRef = (0, import_react8.useRef)(null);
+  const indicatorRef = (0, import_react8.useRef)(null);
+  (0, import_react8.useLayoutEffect)(() => {
+    if (!sliding) return;
+    const list = listRef.current;
+    const indicator = indicatorRef.current;
+    if (!list || !indicator) return;
+    function updateIndicator() {
+      if (!list || !indicator) return;
+      const active = list.querySelector('[role="tab"][aria-selected="true"]');
+      if (!active) {
+        indicator.style.visibility = "hidden";
+        return;
+      }
+      const listRect = list.getBoundingClientRect();
+      const rect = active.getBoundingClientRect();
+      indicator.style.transform = `translate(${rect.left - listRect.left - list.clientLeft + list.scrollLeft}px, ${rect.top - listRect.top - list.clientTop + list.scrollTop}px)`;
+      indicator.style.width = `${rect.width}px`;
+      indicator.style.height = `${rect.height}px`;
+      indicator.style.visibility = "visible";
+      if (!indicator.dataset.ready) {
+        indicator.getBoundingClientRect();
+        indicator.dataset.ready = "true";
+      }
+    }
+    updateIndicator();
+    const observer = new ResizeObserver(updateIndicator);
+    observer.observe(list);
+    list.querySelectorAll('[role="tab"]').forEach((tab) => observer.observe(tab));
+    return () => observer.disconnect();
+  }, [sliding, type, selectedKey, items, size, resolvedPosition, centered, closable]);
   function selectTab(key) {
     if (key === selectedKey) return;
     if (activeKey === void 0) setInternalActiveKey(key);
@@ -1646,7 +1678,7 @@ function Tabs({
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
     "div",
     {
-      className: `sia-tabs sia-tabs--${type} sia-tabs--${size} sia-tabs--${resolvedOrientation} sia-tabs--${resolvedPosition}${centered ? " sia-tabs--centered" : ""} ${className}`.trim(),
+      className: `sia-tabs sia-tabs--${type}${type === "underline" ? " sia-tabs--line" : ""} sia-tabs--${size} sia-tabs--${resolvedOrientation} sia-tabs--${resolvedPosition}${centered ? " sia-tabs--centered" : ""} ${className}`.trim(),
       ...props,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "sia-tabs__header", children: [
@@ -1654,77 +1686,96 @@ function Tabs({
             tabBarTitle,
             type === "tech-line" ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("svg", { className: "sia-tabs__title-connector", viewBox: "0 0 32 40", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M0 39 H5 Q8 39 10 35 L28 3 Q29 1 32 1", fill: "none", stroke: "currentColor", strokeWidth: "1.5" }) }) : null
           ] }) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "sia-tabs__list", role: "tablist", "aria-orientation": resolvedOrientation, children: items.map((item) => {
-            const selected = item.key === selectedKey;
-            const canClose = item.closable ?? closable;
-            const tabNode = /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: `sia-tabs__tab-wrap${canClose ? " is-closable" : ""}`, children: [
-              /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
-                "button",
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { ref: listRef, className: `sia-tabs__list${sliding ? " sia-tabs__list--sliding" : ""}`, role: "tablist", "aria-orientation": resolvedOrientation, children: [
+            sliding ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { ref: indicatorRef, className: `sia-tabs__indicator${type === "capsule" ? " sia-tabs__capsule-indicator" : ""}`, "aria-hidden": "true", children: type === "tech-line" ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("svg", { className: "sia-tabs__indicator-shape", viewBox: "0 0 100 34", preserveAspectRatio: "none", "aria-hidden": "true", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("linearGradient", { id: `${baseId}-tab-fill-indicator`, x1: "0", y1: "0", x2: "1", y2: "0", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("stop", { offset: "0", stopColor: "var(--sia-tabs-line-fill-edge, var(--sia-tabs-line-fill))" }),
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("stop", { offset: ".53", stopColor: "var(--sia-tabs-line-fill-center, var(--sia-tabs-line-fill))" }),
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("stop", { offset: "1", stopColor: "var(--sia-tabs-line-fill-edge, var(--sia-tabs-line-fill))" })
+              ] }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                "path",
                 {
-                  id: `${baseId}-tab-${item.key}`,
-                  type: "button",
-                  className: "sia-tabs__tab",
-                  role: "tab",
-                  "aria-selected": selected,
-                  "aria-controls": hasPanels ? `${baseId}-panel-${item.key}` : void 0,
-                  tabIndex: selected ? 0 : -1,
-                  disabled: item.disabled,
-                  onClick: () => selectTab(item.key),
-                  onKeyDown: (event) => handleKeyDown(event, item.key),
-                  children: [
-                    type === "tech-line" ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("svg", { className: "sia-tabs__tab-shape", viewBox: "0 0 100 34", preserveAspectRatio: "none", "aria-hidden": "true", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("linearGradient", { id: `${baseId}-tab-fill-${item.key}`, x1: "0", y1: "0", x2: "1", y2: "0", children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("stop", { offset: "0", stopColor: "var(--sia-tabs-line-fill-edge, var(--sia-tabs-line-fill))" }),
-                        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("stop", { offset: ".53", stopColor: "var(--sia-tabs-line-fill-center, var(--sia-tabs-line-fill))" }),
-                        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("stop", { offset: "1", stopColor: "var(--sia-tabs-line-fill-edge, var(--sia-tabs-line-fill))" })
-                      ] }) }),
-                      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-                        "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,
-                    item.icon ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "sia-tabs__icon", children: item.icon }) : null,
-                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: item.label })
-                  ]
+                  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"
                 }
-              ),
-              canClose ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-                "button",
+              )
+            ] }) : null }, type) : null,
+            items.map((item) => {
+              const selected = item.key === selectedKey;
+              const canClose = item.closable ?? closable;
+              const tabNode = /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { className: `sia-tabs__tab-wrap${canClose ? " is-closable" : ""}`, children: [
+                /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+                  "button",
+                  {
+                    id: `${baseId}-tab-${item.key}`,
+                    type: "button",
+                    className: "sia-tabs__tab",
+                    role: "tab",
+                    "aria-selected": selected,
+                    "aria-controls": hasPanels ? `${baseId}-panel-${item.key}` : void 0,
+                    tabIndex: selected ? 0 : -1,
+                    disabled: item.disabled,
+                    onClick: () => selectTab(item.key),
+                    onKeyDown: (event) => handleKeyDown(event, item.key),
+                    children: [
+                      type === "tech-line" ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("svg", { className: "sia-tabs__tab-shape", viewBox: "0 0 100 34", preserveAspectRatio: "none", "aria-hidden": "true", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("linearGradient", { id: `${baseId}-tab-fill-${item.key}`, x1: "0", y1: "0", x2: "1", y2: "0", children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("stop", { offset: "0", stopColor: "var(--sia-tabs-line-fill-edge, var(--sia-tabs-line-fill))" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("stop", { offset: ".53", stopColor: "var(--sia-tabs-line-fill-center, var(--sia-tabs-line-fill))" }),
+                          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("stop", { offset: "1", stopColor: "var(--sia-tabs-line-fill-edge, var(--sia-tabs-line-fill))" })
+                        ] }) }),
+                        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                          "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,
+                      item.icon ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "sia-tabs__icon", children: item.icon }) : null,
+                      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { children: item.label })
+                    ]
+                  }
+                ),
+                canClose ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    className: "sia-tabs__close",
+                    "aria-label": `\u5173\u95ED${typeof item.label === "string" ? item.label : "\u6807\u7B7E\u9875"}`,
+                    disabled: item.disabled,
+                    onClick: () => onEdit?.(item.key, "remove"),
+                    children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Icon, { name: "close", size: 12 })
+                  }
+                ) : null
+              ] }, item.key);
+              const contextMenuItems = typeof tabContextMenu === "function" ? tabContextMenu(item) : tabContextMenu;
+              if (!contextMenuItems?.length) return tabNode;
+              return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                Dropdown,
                 {
-                  type: "button",
-                  className: "sia-tabs__close",
-                  "aria-label": `\u5173\u95ED${typeof item.label === "string" ? item.label : "\u6807\u7B7E\u9875"}`,
-                  disabled: item.disabled,
-                  onClick: () => onEdit?.(item.key, "remove"),
-                  children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Icon, { name: "close", size: 12 })
-                }
-              ) : null
-            ] }, item.key);
-            const contextMenuItems = typeof tabContextMenu === "function" ? tabContextMenu(item) : tabContextMenu;
-            if (!contextMenuItems?.length) return tabNode;
-            return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
-              Dropdown,
-              {
-                className: "sia-tabs__tab-context-trigger",
-                popupClassName: "sia-tabs__tab-context-menu",
-                trigger: ["contextMenu"],
-                tabIndex: -1,
-                menu: {
-                  items: contextMenuItems,
-                  selectable: false,
-                  onClick: (info) => onTabContextMenuClick?.({ ...info, tabKey: item.key, tab: item })
+                  className: "sia-tabs__tab-context-trigger",
+                  popupClassName: "sia-tabs__tab-context-menu",
+                  trigger: ["contextMenu"],
+                  tabIndex: -1,
+                  menu: {
+                    items: contextMenuItems,
+                    selectable: false,
+                    onClick: (info) => onTabContextMenuClick?.({ ...info, tabKey: item.key, tab: item })
+                  },
+                  children: tabNode
                 },
-                children: tabNode
-              },
-              item.key
-            );
-          }) }),
+                item.key
+              );
+            })
+          ] }),
           tabBarExtraContent ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "sia-tabs__extra", children: tabBarExtraContent }) : null
         ] }),
         hasPanels ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "sia-tabs__panels", children: items.map((item) => {
@@ -2813,6 +2864,7 @@ var Select = (0, import_react18.forwardRef)(function Select2({
   optionHeight = showValue ? 54 : 34,
   disabled,
   className = "",
+  style,
   id,
   notFoundContent = "\u6682\u65E0\u6570\u636E",
   onKeyDown,
@@ -3043,7 +3095,7 @@ var Select = (0, import_react18.forwardRef)(function Select2({
     setModalValues([...modalValues.filter((value2) => !editable.has(value2)), ...modalEnabled.filter((option) => operation === "all" || operation === "invert" && !modalValues.includes(option.value)).map((option) => option.value)]);
   }
   const floating = useFloatingPlaceholder({ mode: placeholderMode, placeholder, filled: hasValue, active: open });
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { ref: rootRef, className: `sia-select sia-select--${size} sia-select--${status}${open ? " is-open" : ""}${disabled ? " is-disabled" : ""}${multiple ? " sia-select--multiple" : ""} ${className}`.trim(), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { ref: rootRef, className: `sia-select sia-select--${size} sia-select--${status}${open ? " is-open" : ""}${disabled ? " is-disabled" : ""}${multiple ? " sia-select--multiple" : ""} ${className}`.trim(), style, children: [
     /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
       "button",
       {