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

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-ByQQ3hq2.d.ts → core-VmiEI1Jp.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 & {
@@ -1076,4 +1076,4 @@ declare const FloatButton: react.ForwardRefExoticComponent<FloatButtonProps & re
     BackTop: typeof FloatButtonBackTop;
 };
 
-export { Menu as $, type DropdownProps as A, Badge as B, Calendar as C, Dropdown as D, type DropdownTrigger as E, FILLED_ICON_NAMES as F, type FilledIconName as G, FloatButton as H, type FloatButtonBackTopProps as I, type FloatButtonGroupProps as J, type FloatButtonProps as K, type FloatButtonShape as L, type FloatingPlacement as M, type FloatingTrigger as N, type OverlayContainer as O, ICON_NAMES as P, Icon as Q, type IconName as R, type IconProps as S, type IconVariant as T, Image as U, ImagePreview as V, type ImagePreviewConfig as W, type ImagePreviewProps as X, type ImageProps as Y, Input as Z, type InputProps as _, type OverlayApiHandle as a, type TypographyTitleProps as a$, type MenuClickInfo as a0, type MenuItem as a1, type MenuMode as a2, type MenuProps as a3, type MenuTheme as a4, type MessageConfig as a5, type MessageHandle as a6, type MessageKey as a7, type MessageType as a8, Modal as a9, type TabItem as aA, Tabs as aB, type TabsContextMenuClickInfo as aC, type TabsOrientation as aD, type TabsPosition as aE, type TabsProps as aF, type TabsType as aG, Tag as aH, type TagProps as aI, type TagStatus as aJ, type TagVariant as aK, Timeline as aL, type TimelineItem as aM, type TimelineProps as aN, Tooltip as aO, type TooltipProps as aP, Tour as aQ, type TourProps as aR, type TourStep as aS, Tree as aT, type TreeDropPosition as aU, type TreeKey as aV, type TreeNode as aW, type TreeProps as aX, Typography as aY, type TypographyLinkProps as aZ, type TypographyProps as a_, type ModalActionResult as aa, type ModalOpenConfig as ab, type ModalProps as ac, type ModalType as ad, type NotificationConfig as ae, type NotificationPlacement as af, type NotificationType as ag, Popconfirm as ah, type PopconfirmProps as ai, Popover as aj, type PopoverProps as ak, Progress as al, type ProgressProps as am, type ProgressStatus as an, Rate as ao, type RateProps as ap, Segmented as aq, type SegmentedOption as ar, type SegmentedProps as as, type SegmentedValue as at, Spin as au, type SpinProps as av, type StepItem as aw, type StepStatus as ax, Steps as ay, type StepsProps as az, type BadgeProps as b, type TypographyType as b0, Upload as b1, type UploadChangeInfo as b2, type UploadDraggerProps as b3, type UploadFile as b4, type UploadFileStatus as b5, type UploadProps as b6, type UploadRequestOptions as b7, Watermark as b8, type WatermarkFont as b9, type WatermarkProps as ba, message as bb, notification as bc, type BadgeRibbonProps as c, type BadgeStatus as d, Breadcrumb as e, type BreadcrumbItem as f, type BreadcrumbProps as g, Button as h, type ButtonProps as i, type ButtonSize as j, type ButtonVariant as k, type CalendarProps as l, Card as m, type CardAccent as n, type CardProps as o, Carousel as p, type CarouselProps as q, type CarouselRef as r, Collapse as s, type CollapseItem as t, type CollapseKey as u, type CollapseProps as v, type DropdownButtonProps as w, type DropdownMenuProps as x, type DropdownOpenSource as y, type DropdownPlacement as z };
+export { Menu as $, type DropdownProps as A, type ButtonProps as B, Calendar as C, Dropdown as D, type DropdownTrigger as E, FILLED_ICON_NAMES as F, type FilledIconName as G, FloatButton as H, type FloatButtonBackTopProps as I, type FloatButtonGroupProps as J, type FloatButtonProps as K, type FloatButtonShape as L, type FloatingPlacement as M, type FloatingTrigger as N, type OverlayContainer as O, ICON_NAMES as P, Icon as Q, type IconName as R, type IconProps as S, type IconVariant as T, Image as U, ImagePreview as V, type ImagePreviewConfig as W, type ImagePreviewProps as X, type ImageProps as Y, Input as Z, type InputProps as _, type OverlayApiHandle as a, type TypographyTitleProps as a$, type MenuClickInfo as a0, type MenuItem as a1, type MenuMode as a2, type MenuProps as a3, type MenuTheme as a4, type MessageConfig as a5, type MessageHandle as a6, type MessageKey as a7, type MessageType as a8, Modal as a9, type TabItem as aA, Tabs as aB, type TabsContextMenuClickInfo as aC, type TabsOrientation as aD, type TabsPosition as aE, type TabsProps as aF, type TabsType as aG, Tag as aH, type TagProps as aI, type TagStatus as aJ, type TagVariant as aK, Timeline as aL, type TimelineItem as aM, type TimelineProps as aN, Tooltip as aO, type TooltipProps as aP, Tour as aQ, type TourProps as aR, type TourStep as aS, Tree as aT, type TreeDropPosition as aU, type TreeKey as aV, type TreeNode as aW, type TreeProps as aX, Typography as aY, type TypographyLinkProps as aZ, type TypographyProps as a_, type ModalActionResult as aa, type ModalOpenConfig as ab, type ModalProps as ac, type ModalType as ad, type NotificationConfig as ae, type NotificationPlacement as af, type NotificationType as ag, Popconfirm as ah, type PopconfirmProps as ai, Popover as aj, type PopoverProps as ak, Progress as al, type ProgressProps as am, type ProgressStatus as an, Rate as ao, type RateProps as ap, Segmented as aq, type SegmentedOption as ar, type SegmentedProps as as, type SegmentedValue as at, Spin as au, type SpinProps as av, type StepItem as aw, type StepStatus as ax, Steps as ay, type StepsProps as az, Badge as b, type TypographyType as b0, Upload as b1, type UploadChangeInfo as b2, type UploadDraggerProps as b3, type UploadFile as b4, type UploadFileStatus as b5, type UploadProps as b6, type UploadRequestOptions as b7, Watermark as b8, type WatermarkFont as b9, type WatermarkProps as ba, message as bb, notification as bc, type BadgeProps as c, type BadgeRibbonProps as d, type BadgeStatus as e, Breadcrumb as f, type BreadcrumbItem as g, type BreadcrumbProps as h, Button as i, type ButtonSize as j, type ButtonVariant as k, type CalendarProps as l, Card as m, type CardAccent as n, type CardProps as o, Carousel as p, type CarouselProps as q, type CarouselRef as r, Collapse as s, type CollapseItem as t, type CollapseKey as u, type CollapseProps as v, type DropdownButtonProps as w, type DropdownMenuProps as x, type DropdownOpenSource as y, type DropdownPlacement as z };

package/dist/{core-Dwc_30PN.d.cts → core-y0w5PBO2.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 & {
@@ -1076,4 +1076,4 @@ declare const FloatButton: react.ForwardRefExoticComponent<FloatButtonProps & re
     BackTop: typeof FloatButtonBackTop;
 };
 
-export { Menu as $, type DropdownProps as A, Badge as B, Calendar as C, Dropdown as D, type DropdownTrigger as E, FILLED_ICON_NAMES as F, type FilledIconName as G, FloatButton as H, type FloatButtonBackTopProps as I, type FloatButtonGroupProps as J, type FloatButtonProps as K, type FloatButtonShape as L, type FloatingPlacement as M, type FloatingTrigger as N, type OverlayContainer as O, ICON_NAMES as P, Icon as Q, type IconName as R, type IconProps as S, type IconVariant as T, Image as U, ImagePreview as V, type ImagePreviewConfig as W, type ImagePreviewProps as X, type ImageProps as Y, Input as Z, type InputProps as _, type OverlayApiHandle as a, type TypographyTitleProps as a$, type MenuClickInfo as a0, type MenuItem as a1, type MenuMode as a2, type MenuProps as a3, type MenuTheme as a4, type MessageConfig as a5, type MessageHandle as a6, type MessageKey as a7, type MessageType as a8, Modal as a9, type TabItem as aA, Tabs as aB, type TabsContextMenuClickInfo as aC, type TabsOrientation as aD, type TabsPosition as aE, type TabsProps as aF, type TabsType as aG, Tag as aH, type TagProps as aI, type TagStatus as aJ, type TagVariant as aK, Timeline as aL, type TimelineItem as aM, type TimelineProps as aN, Tooltip as aO, type TooltipProps as aP, Tour as aQ, type TourProps as aR, type TourStep as aS, Tree as aT, type TreeDropPosition as aU, type TreeKey as aV, type TreeNode as aW, type TreeProps as aX, Typography as aY, type TypographyLinkProps as aZ, type TypographyProps as a_, type ModalActionResult as aa, type ModalOpenConfig as ab, type ModalProps as ac, type ModalType as ad, type NotificationConfig as ae, type NotificationPlacement as af, type NotificationType as ag, Popconfirm as ah, type PopconfirmProps as ai, Popover as aj, type PopoverProps as ak, Progress as al, type ProgressProps as am, type ProgressStatus as an, Rate as ao, type RateProps as ap, Segmented as aq, type SegmentedOption as ar, type SegmentedProps as as, type SegmentedValue as at, Spin as au, type SpinProps as av, type StepItem as aw, type StepStatus as ax, Steps as ay, type StepsProps as az, type BadgeProps as b, type TypographyType as b0, Upload as b1, type UploadChangeInfo as b2, type UploadDraggerProps as b3, type UploadFile as b4, type UploadFileStatus as b5, type UploadProps as b6, type UploadRequestOptions as b7, Watermark as b8, type WatermarkFont as b9, type WatermarkProps as ba, message as bb, notification as bc, type BadgeRibbonProps as c, type BadgeStatus as d, Breadcrumb as e, type BreadcrumbItem as f, type BreadcrumbProps as g, Button as h, type ButtonProps as i, type ButtonSize as j, type ButtonVariant as k, type CalendarProps as l, Card as m, type CardAccent as n, type CardProps as o, Carousel as p, type CarouselProps as q, type CarouselRef as r, Collapse as s, type CollapseItem as t, type CollapseKey as u, type CollapseProps as v, type DropdownButtonProps as w, type DropdownMenuProps as x, type DropdownOpenSource as y, type DropdownPlacement as z };
+export { Menu as $, type DropdownProps as A, type ButtonProps as B, Calendar as C, Dropdown as D, type DropdownTrigger as E, FILLED_ICON_NAMES as F, type FilledIconName as G, FloatButton as H, type FloatButtonBackTopProps as I, type FloatButtonGroupProps as J, type FloatButtonProps as K, type FloatButtonShape as L, type FloatingPlacement as M, type FloatingTrigger as N, type OverlayContainer as O, ICON_NAMES as P, Icon as Q, type IconName as R, type IconProps as S, type IconVariant as T, Image as U, ImagePreview as V, type ImagePreviewConfig as W, type ImagePreviewProps as X, type ImageProps as Y, Input as Z, type InputProps as _, type OverlayApiHandle as a, type TypographyTitleProps as a$, type MenuClickInfo as a0, type MenuItem as a1, type MenuMode as a2, type MenuProps as a3, type MenuTheme as a4, type MessageConfig as a5, type MessageHandle as a6, type MessageKey as a7, type MessageType as a8, Modal as a9, type TabItem as aA, Tabs as aB, type TabsContextMenuClickInfo as aC, type TabsOrientation as aD, type TabsPosition as aE, type TabsProps as aF, type TabsType as aG, Tag as aH, type TagProps as aI, type TagStatus as aJ, type TagVariant as aK, Timeline as aL, type TimelineItem as aM, type TimelineProps as aN, Tooltip as aO, type TooltipProps as aP, Tour as aQ, type TourProps as aR, type TourStep as aS, Tree as aT, type TreeDropPosition as aU, type TreeKey as aV, type TreeNode as aW, type TreeProps as aX, Typography as aY, type TypographyLinkProps as aZ, type TypographyProps as a_, type ModalActionResult as aa, type ModalOpenConfig as ab, type ModalProps as ac, type ModalType as ad, type NotificationConfig as ae, type NotificationPlacement as af, type NotificationType as ag, Popconfirm as ah, type PopconfirmProps as ai, Popover as aj, type PopoverProps as ak, Progress as al, type ProgressProps as am, type ProgressStatus as an, Rate as ao, type RateProps as ap, Segmented as aq, type SegmentedOption as ar, type SegmentedProps as as, type SegmentedValue as at, Spin as au, type SpinProps as av, type StepItem as aw, type StepStatus as ax, Steps as ay, type StepsProps as az, Badge as b, type TypographyType as b0, Upload as b1, type UploadChangeInfo as b2, type UploadDraggerProps as b3, type UploadFile as b4, type UploadFileStatus as b5, type UploadProps as b6, type UploadRequestOptions as b7, Watermark as b8, type WatermarkFont as b9, type WatermarkProps as ba, message as bb, notification as bc, type BadgeProps as c, type BadgeRibbonProps as d, type BadgeStatus as e, Breadcrumb as f, type BreadcrumbItem as g, type BreadcrumbProps as h, Button as i, type ButtonSize as j, type ButtonVariant as k, type CalendarProps as l, Card as m, type CardAccent as n, type CardProps as o, Carousel as p, type CarouselProps as q, type CarouselRef as r, Collapse as s, type CollapseItem as t, type CollapseKey as u, type CollapseProps as v, type DropdownButtonProps as w, type DropdownMenuProps as x, type DropdownOpenSource as y, type DropdownPlacement as z };

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",
       {