@sia.soul/sia-react-ui 0.1.84 → 0.1.86

package/dist/{chunk-N4P3QKCY.js → chunk-CKX3AKMT.js}

@@ -2,7 +2,7 @@ import {
   Dropdown,
   Icon,
   Input
-} from "./chunk-VNVDG4AC.js";
+} from "./chunk-U2WPN6TD.js";
 import {
   Button
 } from "./chunk-SJFT5OSX.js";

package/dist/{chunk-2ETLCXNS.js → chunk-D752QGE6.js}

@@ -1,12 +1,12 @@
 import {
   Popover,
   Tooltip
-} from "./chunk-W3EKQOPR.js";
+} from "./chunk-RR7HW5HO.js";
 import {
   Dropdown,
   Icon,
   useOverlayLifecycle
-} from "./chunk-VNVDG4AC.js";
+} from "./chunk-U2WPN6TD.js";
 import {
   Button,
   TextArea

package/dist/{chunk-36FXHK4W.js → chunk-QZG6XT65.js}

@@ -1,10 +1,10 @@
 import {
   FloatingScrollbarProvider,
   Select
-} from "./chunk-W3EKQOPR.js";
+} from "./chunk-RR7HW5HO.js";
 import {
   Icon
-} from "./chunk-VNVDG4AC.js";
+} from "./chunk-U2WPN6TD.js";
 import {
   PopupPortal,
   useControlSize,

package/dist/{chunk-W3EKQOPR.js → chunk-RR7HW5HO.js}

@@ -3,7 +3,7 @@ import {
   Icon,
   Input,
   Modal
-} from "./chunk-VNVDG4AC.js";
+} from "./chunk-U2WPN6TD.js";
 import {
   Button
 } from "./chunk-SJFT5OSX.js";

package/dist/{chunk-VNVDG4AC.js → chunk-U2WPN6TD.js}

@@ -1051,7 +1051,7 @@ function Steps({ items, current = 0, initial = 0, direction = "horizontal", type
     ] }, index);
   }) });
 }
-function Segmented({ options, value, defaultValue, variant = "default", size: sizeProp, block = false, vertical = false, disabled = false, onChange, className = "", onKeyDown, ...props }) {
+function Segmented({ options, value, defaultValue, variant = "default", shape = "capsule", size: sizeProp, block = false, vertical = false, disabled = false, onChange, className = "", onKeyDown, ...props }) {
   const size = useControlSize(sizeProp);
   const normalized = useMemo(() => options.map((option) => typeof option === "object" ? option : { label: option, value: option }), [options]);
   const [current, setCurrent] = useControllableState({ value, defaultValue: defaultValue ?? normalized[0]?.value, onChange: (next) => next !== void 0 && onChange?.(next) });
@@ -1064,7 +1064,7 @@ function Segmented({ options, value, defaultValue, variant = "default", size: si
     const next = event.key === "ArrowRight" || event.key === "ArrowDown" ? enabled[(index + 1) % enabled.length] : enabled[(index - 1 + enabled.length) % enabled.length];
     if (next) setCurrent(next.value);
   }
-  return /* @__PURE__ */ jsx3("div", { className: `sia-segmented sia-segmented--${size}${variant === "zigzag" && !vertical && normalized.length === 2 ? " sia-segmented--zigzag" : ""}${block ? " sia-segmented--block" : ""}${vertical ? " sia-segmented--vertical" : ""}${disabled ? " is-disabled" : ""} ${className}`.trim(), role: "radiogroup", onKeyDown: keyboard, ...withTitleTooltip(props), children: normalized.map((option) => /* @__PURE__ */ createElement("button", { type: "button", role: "radio", "aria-checked": option.value === current, ...withTitleTooltip({ title: option.title }), className: option.value === current ? "is-selected" : "", disabled: disabled || option.disabled, key: option.value, onClick: () => setCurrent(option.value) }, option.icon, /* @__PURE__ */ jsx3("span", { children: option.label ?? option.value }))) });
+  return /* @__PURE__ */ jsx3("div", { className: `sia-segmented sia-segmented--${size}${variant === "zigzag" && !vertical && normalized.length === 2 ? ` sia-segmented--zigzag sia-segmented--shape-${shape}` : ""}${block ? " sia-segmented--block" : ""}${vertical ? " sia-segmented--vertical" : ""}${disabled ? " is-disabled" : ""} ${className}`.trim(), role: "radiogroup", onKeyDown: keyboard, ...withTitleTooltip(props), children: normalized.map((option) => /* @__PURE__ */ createElement("button", { type: "button", role: "radio", "aria-checked": option.value === current, ...withTitleTooltip({ title: option.title }), className: option.value === current ? "is-selected" : "", disabled: disabled || option.disabled, key: option.value, onClick: () => setCurrent(option.value) }, option.icon, /* @__PURE__ */ jsx3("span", { children: option.label ?? option.value }))) });
 }
 
 // src/components/Dropdown.tsx

package/dist/{core-OI4ySo2K.d.ts → core-BU7dVRuz.d.ts}

@@ -662,11 +662,17 @@ type SegmentedOption = SegmentedValue | {
 /** 分段选择的属性配置。 */
 interface SegmentedProps extends Omit<HTMLAttributes<HTMLDivElement>, "defaultValue" | "onChange"> {
     /**
-     * default 为圆角分段样式；slash 为横向闪电折线分隔样式，选中项使用主题色高亮。
+     * default 为圆角分段样式；zigzag 为横向闪电折线分隔样式，选中项主题色高亮并平滑放大至 1.04 倍（200ms）。
      * 仅支持两个横向选项；vertical=true 或选项数量不为 2 时回退为 default 样式。
      * @defaultValue "default"
      */
     variant?: "default" | "zigzag";
+    /**
+     * zigzag 变体的外形：capsule 胶囊、rectangle 直角矩形、rounded 主题圆角矩形。
+     * default 变体不受此属性影响。
+     * @defaultValue "capsule"
+     */
+    shape?: "capsule" | "rectangle" | "rounded";
     /** 可供用户选择的候选项列表。 */
     options: readonly SegmentedOption[];
     /** 当前值；作为受控属性时，需要在变更回调中同步更新。 */
@@ -694,7 +700,7 @@ interface SegmentedProps extends Omit<HTMLAttributes<HTMLDivElement>, "defaultVa
     onChange?: (value: SegmentedValue) => void;
 }
 /** 分段选择组件。 */
-declare function Segmented({ options, value, defaultValue, variant, size: sizeProp, block, vertical, disabled, onChange, className, onKeyDown, ...props }: SegmentedProps): react.JSX.Element;
+declare function Segmented({ options, value, defaultValue, variant, shape, size: sizeProp, block, vertical, disabled, onChange, className, onKeyDown, ...props }: SegmentedProps): react.JSX.Element;
 
 /** Tab的项目定义。 */
 interface TabItem {
@@ -783,7 +789,7 @@ interface TabsProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
     /** 点击选项卡右键菜单时调用。 */
     onTabContextMenuClick?: (info: TabsContextMenuClickInfo) => void;
 }
-/** 选项卡组件；横向空间不足时，剩余标签收起到末尾的更多菜单，支持悬停或点击展开。 */
+/** 选项卡组件；横向空间不足时，剩余标签收起到末尾的更多菜单，支持悬停或点击展开。设置确定高度或由父级弹性布局分配高度时，内容面板占满导航之外的剩余空间；未限定高度时按内容自然撑开。 */
 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;
 
 /** 打开下拉菜单的触发方式。 */

package/dist/{core-BT21wlHN.d.cts → core-DGaJTy1i.d.cts}

@@ -662,11 +662,17 @@ type SegmentedOption = SegmentedValue | {
 /** 分段选择的属性配置。 */
 interface SegmentedProps extends Omit<HTMLAttributes<HTMLDivElement>, "defaultValue" | "onChange"> {
     /**
-     * default 为圆角分段样式；slash 为横向闪电折线分隔样式，选中项使用主题色高亮。
+     * default 为圆角分段样式；zigzag 为横向闪电折线分隔样式，选中项主题色高亮并平滑放大至 1.04 倍（200ms）。
      * 仅支持两个横向选项；vertical=true 或选项数量不为 2 时回退为 default 样式。
      * @defaultValue "default"
      */
     variant?: "default" | "zigzag";
+    /**
+     * zigzag 变体的外形：capsule 胶囊、rectangle 直角矩形、rounded 主题圆角矩形。
+     * default 变体不受此属性影响。
+     * @defaultValue "capsule"
+     */
+    shape?: "capsule" | "rectangle" | "rounded";
     /** 可供用户选择的候选项列表。 */
     options: readonly SegmentedOption[];
     /** 当前值；作为受控属性时，需要在变更回调中同步更新。 */
@@ -694,7 +700,7 @@ interface SegmentedProps extends Omit<HTMLAttributes<HTMLDivElement>, "defaultVa
     onChange?: (value: SegmentedValue) => void;
 }
 /** 分段选择组件。 */
-declare function Segmented({ options, value, defaultValue, variant, size: sizeProp, block, vertical, disabled, onChange, className, onKeyDown, ...props }: SegmentedProps): react.JSX.Element;
+declare function Segmented({ options, value, defaultValue, variant, shape, size: sizeProp, block, vertical, disabled, onChange, className, onKeyDown, ...props }: SegmentedProps): react.JSX.Element;
 
 /** Tab的项目定义。 */
 interface TabItem {
@@ -783,7 +789,7 @@ interface TabsProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
     /** 点击选项卡右键菜单时调用。 */
     onTabContextMenuClick?: (info: TabsContextMenuClickInfo) => void;
 }
-/** 选项卡组件；横向空间不足时，剩余标签收起到末尾的更多菜单，支持悬停或点击展开。 */
+/** 选项卡组件；横向空间不足时，剩余标签收起到末尾的更多菜单，支持悬停或点击展开。设置确定高度或由父级弹性布局分配高度时，内容面板占满导航之外的剩余空间；未限定高度时按内容自然撑开。 */
 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;
 
 /** 打开下拉菜单的触发方式。 */

package/dist/core.cjs

@@ -1408,7 +1408,7 @@ function Menu({
   }
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("ul", { ref: rootRef, className: `sia-menu sia-menu--${mode} sia-menu--${theme}${inlineCollapsed ? " sia-menu--collapsed" : ""} ${className}`.trim(), role: "menu", ...withTitleTooltip(rest), "data-sia-menu-owner": menuId, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(MenuLevel, { items, level: 0, parents: [], props: { menuId, mode, theme, multiple, selectable, inlineCollapsed, inlineIndent, triggerSubMenuAction, selected, open, select, toggle } }) });
 }
-function Segmented({ options, value, defaultValue, variant = "default", size: sizeProp, block = false, vertical = false, disabled = false, onChange, className = "", onKeyDown, ...props }) {
+function Segmented({ options, value, defaultValue, variant = "default", shape = "capsule", size: sizeProp, block = false, vertical = false, disabled = false, onChange, className = "", onKeyDown, ...props }) {
   const size = useControlSize(sizeProp);
   const normalized = (0, import_react5.useMemo)(() => options.map((option) => typeof option === "object" ? option : { label: option, value: option }), [options]);
   const [current, setCurrent] = useControllableState({ value, defaultValue: defaultValue ?? normalized[0]?.value, onChange: (next) => next !== void 0 && onChange?.(next) });
@@ -1421,7 +1421,7 @@ function Segmented({ options, value, defaultValue, variant = "default", size: si
     const next = event.key === "ArrowRight" || event.key === "ArrowDown" ? enabled[(index + 1) % enabled.length] : enabled[(index - 1 + enabled.length) % enabled.length];
     if (next) setCurrent(next.value);
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: `sia-segmented sia-segmented--${size}${variant === "zigzag" && !vertical && normalized.length === 2 ? " sia-segmented--zigzag" : ""}${block ? " sia-segmented--block" : ""}${vertical ? " sia-segmented--vertical" : ""}${disabled ? " is-disabled" : ""} ${className}`.trim(), role: "radiogroup", onKeyDown: keyboard, ...withTitleTooltip(props), children: normalized.map((option) => /* @__PURE__ */ (0, import_react6.createElement)("button", { type: "button", role: "radio", "aria-checked": option.value === current, ...withTitleTooltip({ title: option.title }), className: option.value === current ? "is-selected" : "", disabled: disabled || option.disabled, key: option.value, onClick: () => setCurrent(option.value) }, option.icon, /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: option.label ?? option.value }))) });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: `sia-segmented sia-segmented--${size}${variant === "zigzag" && !vertical && normalized.length === 2 ? ` sia-segmented--zigzag sia-segmented--shape-${shape}` : ""}${block ? " sia-segmented--block" : ""}${vertical ? " sia-segmented--vertical" : ""}${disabled ? " is-disabled" : ""} ${className}`.trim(), role: "radiogroup", onKeyDown: keyboard, ...withTitleTooltip(props), children: normalized.map((option) => /* @__PURE__ */ (0, import_react6.createElement)("button", { type: "button", role: "radio", "aria-checked": option.value === current, ...withTitleTooltip({ title: option.title }), className: option.value === current ? "is-selected" : "", disabled: disabled || option.disabled, key: option.value, onClick: () => setCurrent(option.value) }, option.icon, /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: option.label ?? option.value }))) });
 }
 
 // src/components/Dropdown.tsx

package/dist/core.css

@@ -2883,12 +2883,15 @@ fieldset:disabled .sia-input-number__floating-placeholder {
 .sia-tabs {
   display: flex;
   flex-direction: column;
+  min-width: 0;
+  min-height: 0;
   color: var(--sia-color-text);
 }
 .sia-tabs__header {
   display: flex;
   align-items: stretch;
   min-width: 0;
+  flex-shrink: 0;
 }
 .sia-tabs__title {
   display: flex;
@@ -3331,8 +3334,18 @@ fieldset:disabled .sia-input-number__floating-placeholder {
   border-radius: 0 var(--sia-radius) var(--sia-radius) 0;
 }
 .sia-tabs__panels {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
   padding-top: 16px;
 }
+.sia-tabs__panel {
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+}
 .sia-tabs--bottom > .sia-tabs__panels {
   padding-top: 0;
   padding-bottom: 16px;
@@ -10605,7 +10618,7 @@ button.sia-treemap__tile:focus-visible,
 .sia-segmented.sia-segmented--zigzag {
   gap: 0;
   padding: 0;
-  overflow: hidden;
+  overflow: visible;
   background: var(--sia-color-surface);
   border: 1px solid var(--sia-color-border);
   border-radius: 999px;
@@ -10656,6 +10669,37 @@ button.sia-treemap__tile:focus-visible,
   outline: 2px solid var(--sia-color-primary);
   outline-offset: -2px;
 }
+.sia-segmented--zigzag.sia-segmented--shape-rectangle {
+  border-radius: 0;
+}
+.sia-segmented--zigzag.sia-segmented--shape-rounded {
+  border-radius: var(--sia-radius);
+}
+.sia-segmented--zigzag button {
+  transform: scale(1);
+  transition: transform 200ms cubic-bezier(.2, .8, .2, 1), color 200ms ease;
+}
+.sia-segmented--zigzag button.is-selected {
+  transform: scale(1.04);
+}
+.sia-segmented--zigzag button:first-child {
+  border-top-left-radius: inherit;
+  border-bottom-left-radius: inherit;
+}
+.sia-segmented--zigzag button:last-child {
+  border-top-right-radius: inherit;
+  border-bottom-right-radius: inherit;
+}
+.sia-segmented--zigzag button::before {
+  border-radius: inherit;
+  transition: background 200ms ease;
+}
+@media (prefers-reduced-motion: reduce) {
+  .sia-segmented--zigzag button,
+  .sia-segmented--zigzag button::before {
+    transition: none;
+  }
+}
 
 /* src/title-tooltip.css */
 body > .sia-title-tooltip[data-sia-popup-layer] {

package/dist/core.d.cts

@@ -1,4 +1,4 @@
-export { d as Breadcrumb, e as BreadcrumbItem, f as BreadcrumbProps, h as Card, i as CardAccent, j as CardProps, n as Collapse, o as CollapseItem, p as CollapseKey, q as CollapseProps, x as FilledIconName, y as FloatButton, z as FloatButtonBackTopProps, A as FloatButtonGroupProps, E as FloatButtonProps, G as FloatButtonShape, K as Icon, L as IconName, M as IconProps, N as IconVariant, U as Input, V as InputProps, a0 as MessageConfig, a1 as MessageHandle, a2 as MessageKey, a3 as MessageType, ab as Progress, ac as ProgressProps, ad as ProgressStatus, ag as Segmented, ah as SegmentedOption, ai as SegmentedProps, aj as SegmentedValue, aq as TabItem, ar as Tabs, at as TabsOrientation, au as TabsPosition, av as TabsProps, aw as TabsType, ax as Tag, ay as TagProps, az as TagSize, T as TagStatus, aA as TagVariant, aE as Toolbar, aF as ToolbarItem, aG as ToolbarProps, aR as Typography, aS as TypographyLinkProps, aT as TypographyProps, aU as TypographyTitleProps, aV as TypographyType, aW as Upload, aX as UploadChangeInfo, aY as UploadDraggerProps, aZ as UploadFile, a_ as UploadFileStatus, b1 as UploadProps, b5 as UploadRequestOptions, b9 as message } from './core-BT21wlHN.cjs';
+export { d as Breadcrumb, e as BreadcrumbItem, f as BreadcrumbProps, h as Card, i as CardAccent, j as CardProps, n as Collapse, o as CollapseItem, p as CollapseKey, q as CollapseProps, x as FilledIconName, y as FloatButton, z as FloatButtonBackTopProps, A as FloatButtonGroupProps, E as FloatButtonProps, G as FloatButtonShape, K as Icon, L as IconName, M as IconProps, N as IconVariant, U as Input, V as InputProps, a0 as MessageConfig, a1 as MessageHandle, a2 as MessageKey, a3 as MessageType, ab as Progress, ac as ProgressProps, ad as ProgressStatus, ag as Segmented, ah as SegmentedOption, ai as SegmentedProps, aj as SegmentedValue, aq as TabItem, ar as Tabs, at as TabsOrientation, au as TabsPosition, av as TabsProps, aw as TabsType, ax as Tag, ay as TagProps, az as TagSize, T as TagStatus, aA as TagVariant, aE as Toolbar, aF as ToolbarItem, aG as ToolbarProps, aR as Typography, aS as TypographyLinkProps, aT as TypographyProps, aU as TypographyTitleProps, aV as TypographyType, aW as Upload, aX as UploadChangeInfo, aY as UploadDraggerProps, aZ as UploadFile, a_ as UploadFileStatus, b1 as UploadProps, b5 as UploadRequestOptions, b9 as message } from './core-DGaJTy1i.cjs';
 export { f as Button, B as ButtonProps, e as ButtonSize, g as ButtonVariant, h as Modal, d as ModalActionResult, M as ModalOpenConfig, i as ModalProps, j as ModalType, a as OverlayApiHandle, k as Select, S as SelectOption, c as SelectProps, m as SelectValue } from './Select-Bv2AmXRD.cjs';
 import 'react';
 import './shared-Bx4B28Wh.cjs';

package/dist/core.d.ts

@@ -1,4 +1,4 @@
-export { d as Breadcrumb, e as BreadcrumbItem, f as BreadcrumbProps, h as Card, i as CardAccent, j as CardProps, n as Collapse, o as CollapseItem, p as CollapseKey, q as CollapseProps, x as FilledIconName, y as FloatButton, z as FloatButtonBackTopProps, A as FloatButtonGroupProps, E as FloatButtonProps, G as FloatButtonShape, K as Icon, L as IconName, M as IconProps, N as IconVariant, U as Input, V as InputProps, a0 as MessageConfig, a1 as MessageHandle, a2 as MessageKey, a3 as MessageType, ab as Progress, ac as ProgressProps, ad as ProgressStatus, ag as Segmented, ah as SegmentedOption, ai as SegmentedProps, aj as SegmentedValue, aq as TabItem, ar as Tabs, at as TabsOrientation, au as TabsPosition, av as TabsProps, aw as TabsType, ax as Tag, ay as TagProps, az as TagSize, T as TagStatus, aA as TagVariant, aE as Toolbar, aF as ToolbarItem, aG as ToolbarProps, aR as Typography, aS as TypographyLinkProps, aT as TypographyProps, aU as TypographyTitleProps, aV as TypographyType, aW as Upload, aX as UploadChangeInfo, aY as UploadDraggerProps, aZ as UploadFile, a_ as UploadFileStatus, b1 as UploadProps, b5 as UploadRequestOptions, b9 as message } from './core-OI4ySo2K.js';
+export { d as Breadcrumb, e as BreadcrumbItem, f as BreadcrumbProps, h as Card, i as CardAccent, j as CardProps, n as Collapse, o as CollapseItem, p as CollapseKey, q as CollapseProps, x as FilledIconName, y as FloatButton, z as FloatButtonBackTopProps, A as FloatButtonGroupProps, E as FloatButtonProps, G as FloatButtonShape, K as Icon, L as IconName, M as IconProps, N as IconVariant, U as Input, V as InputProps, a0 as MessageConfig, a1 as MessageHandle, a2 as MessageKey, a3 as MessageType, ab as Progress, ac as ProgressProps, ad as ProgressStatus, ag as Segmented, ah as SegmentedOption, ai as SegmentedProps, aj as SegmentedValue, aq as TabItem, ar as Tabs, at as TabsOrientation, au as TabsPosition, av as TabsProps, aw as TabsType, ax as Tag, ay as TagProps, az as TagSize, T as TagStatus, aA as TagVariant, aE as Toolbar, aF as ToolbarItem, aG as ToolbarProps, aR as Typography, aS as TypographyLinkProps, aT as TypographyProps, aU as TypographyTitleProps, aV as TypographyType, aW as Upload, aX as UploadChangeInfo, aY as UploadDraggerProps, aZ as UploadFile, a_ as UploadFileStatus, b1 as UploadProps, b5 as UploadRequestOptions, b9 as message } from './core-BU7dVRuz.js';
 export { f as Button, B as ButtonProps, e as ButtonSize, g as ButtonVariant, h as Modal, d as ModalActionResult, M as ModalOpenConfig, i as ModalProps, j as ModalType, a as OverlayApiHandle, k as Select, S as SelectOption, c as SelectProps, m as SelectValue } from './Select-Cc1owuvN.js';
 import 'react';
 import './shared-Bx4B28Wh.js';

package/dist/core.js

@@ -10,16 +10,16 @@ import {
   Typography,
   Upload,
   message
-} from "./chunk-2ETLCXNS.js";
+} from "./chunk-D752QGE6.js";
 import {
   Select
-} from "./chunk-W3EKQOPR.js";
+} from "./chunk-RR7HW5HO.js";
 import {
   Icon,
   Input,
   Modal,
   Segmented
-} from "./chunk-VNVDG4AC.js";
+} from "./chunk-U2WPN6TD.js";
 import {
   Button
 } from "./chunk-SJFT5OSX.js";

package/dist/index.cjs

@@ -1578,7 +1578,7 @@ function Steps({ items, current = 0, initial: initial3 = 0, direction = "horizon
     ] }, index);
   }) });
 }
-function Segmented({ options, value, defaultValue, variant = "default", size: sizeProp, block = false, vertical = false, disabled = false, onChange, className = "", onKeyDown, ...props }) {
+function Segmented({ options, value, defaultValue, variant = "default", shape = "capsule", size: sizeProp, block = false, vertical = false, disabled = false, onChange, className = "", onKeyDown, ...props }) {
   const size = useControlSize(sizeProp);
   const normalized = (0, import_react5.useMemo)(() => options.map((option) => typeof option === "object" ? option : { label: option, value: option }), [options]);
   const [current, setCurrent] = useControllableState({ value, defaultValue: defaultValue ?? normalized[0]?.value, onChange: (next) => next !== void 0 && onChange?.(next) });
@@ -1591,7 +1591,7 @@ function Segmented({ options, value, defaultValue, variant = "default", size: si
     const next = event.key === "ArrowRight" || event.key === "ArrowDown" ? enabled[(index + 1) % enabled.length] : enabled[(index - 1 + enabled.length) % enabled.length];
     if (next) setCurrent(next.value);
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: `sia-segmented sia-segmented--${size}${variant === "zigzag" && !vertical && normalized.length === 2 ? " sia-segmented--zigzag" : ""}${block ? " sia-segmented--block" : ""}${vertical ? " sia-segmented--vertical" : ""}${disabled ? " is-disabled" : ""} ${className}`.trim(), role: "radiogroup", onKeyDown: keyboard, ...withTitleTooltip(props), children: normalized.map((option) => /* @__PURE__ */ (0, import_react6.createElement)("button", { type: "button", role: "radio", "aria-checked": option.value === current, ...withTitleTooltip({ title: option.title }), className: option.value === current ? "is-selected" : "", disabled: disabled || option.disabled, key: option.value, onClick: () => setCurrent(option.value) }, option.icon, /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: option.label ?? option.value }))) });
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: `sia-segmented sia-segmented--${size}${variant === "zigzag" && !vertical && normalized.length === 2 ? ` sia-segmented--zigzag sia-segmented--shape-${shape}` : ""}${block ? " sia-segmented--block" : ""}${vertical ? " sia-segmented--vertical" : ""}${disabled ? " is-disabled" : ""} ${className}`.trim(), role: "radiogroup", onKeyDown: keyboard, ...withTitleTooltip(props), children: normalized.map((option) => /* @__PURE__ */ (0, import_react6.createElement)("button", { type: "button", role: "radio", "aria-checked": option.value === current, ...withTitleTooltip({ title: option.title }), className: option.value === current ? "is-selected" : "", disabled: disabled || option.disabled, key: option.value, onClick: () => setCurrent(option.value) }, option.icon, /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: option.label ?? option.value }))) });
 }
 
 // src/components/Dropdown.tsx

package/dist/index.css

@@ -2883,12 +2883,15 @@ fieldset:disabled .sia-input-number__floating-placeholder {
 .sia-tabs {
   display: flex;
   flex-direction: column;
+  min-width: 0;
+  min-height: 0;
   color: var(--sia-color-text);
 }
 .sia-tabs__header {
   display: flex;
   align-items: stretch;
   min-width: 0;
+  flex-shrink: 0;
 }
 .sia-tabs__title {
   display: flex;
@@ -3331,8 +3334,18 @@ fieldset:disabled .sia-input-number__floating-placeholder {
   border-radius: 0 var(--sia-radius) var(--sia-radius) 0;
 }
 .sia-tabs__panels {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
   padding-top: 16px;
 }
+.sia-tabs__panel {
+  flex: 1;
+  min-width: 0;
+  min-height: 0;
+}
 .sia-tabs--bottom > .sia-tabs__panels {
   padding-top: 0;
   padding-bottom: 16px;
@@ -10605,7 +10618,7 @@ button.sia-treemap__tile:focus-visible,
 .sia-segmented.sia-segmented--zigzag {
   gap: 0;
   padding: 0;
-  overflow: hidden;
+  overflow: visible;
   background: var(--sia-color-surface);
   border: 1px solid var(--sia-color-border);
   border-radius: 999px;
@@ -10656,6 +10669,37 @@ button.sia-treemap__tile:focus-visible,
   outline: 2px solid var(--sia-color-primary);
   outline-offset: -2px;
 }
+.sia-segmented--zigzag.sia-segmented--shape-rectangle {
+  border-radius: 0;
+}
+.sia-segmented--zigzag.sia-segmented--shape-rounded {
+  border-radius: var(--sia-radius);
+}
+.sia-segmented--zigzag button {
+  transform: scale(1);
+  transition: transform 200ms cubic-bezier(.2, .8, .2, 1), color 200ms ease;
+}
+.sia-segmented--zigzag button.is-selected {
+  transform: scale(1.04);
+}
+.sia-segmented--zigzag button:first-child {
+  border-top-left-radius: inherit;
+  border-bottom-left-radius: inherit;
+}
+.sia-segmented--zigzag button:last-child {
+  border-top-right-radius: inherit;
+  border-bottom-right-radius: inherit;
+}
+.sia-segmented--zigzag button::before {
+  border-radius: inherit;
+  transition: background 200ms ease;
+}
+@media (prefers-reduced-motion: reduce) {
+  .sia-segmented--zigzag button,
+  .sia-segmented--zigzag button::before {
+    transition: none;
+  }
+}
 
 /* src/title-tooltip.css */
 body > .sia-title-tooltip[data-sia-popup-layer] {

package/dist/index.d.cts

@@ -1,5 +1,5 @@
-import { T as TagStatus, B as BadgeProps } from './core-BT21wlHN.cjs';
-export { a as Badge, b as BadgeRibbonProps, c as BadgeStatus, d as Breadcrumb, e as BreadcrumbItem, f as BreadcrumbProps, C as Calendar, g as CalendarProps, h as Card, i as CardAccent, j as CardProps, k as Carousel, l as CarouselProps, m as CarouselRef, n as Collapse, o as CollapseItem, p as CollapseKey, q as CollapseProps, D as Dropdown, r as DropdownButtonProps, s as DropdownMenuProps, t as DropdownOpenSource, u as DropdownPlacement, v as DropdownProps, w as DropdownTrigger, F as FILLED_ICON_NAMES, x as FilledIconName, y as FloatButton, z as FloatButtonBackTopProps, A as FloatButtonGroupProps, E as FloatButtonProps, G as FloatButtonShape, H as FloatingPlacement, I as FloatingTrigger, J as ICON_NAMES, K as Icon, L as IconName, M as IconProps, N as IconVariant, O as Image, P as ImagePreview, Q as ImagePreviewConfig, R as ImagePreviewProps, S as ImageProps, U as Input, V as InputProps, W as Menu, X as MenuClickInfo, Y as MenuItem, Z as MenuMode, _ as MenuProps, $ as MenuTheme, a0 as MessageConfig, a1 as MessageHandle, a2 as MessageKey, a3 as MessageType, a4 as NotificationConfig, a5 as NotificationPlacement, a6 as NotificationType, a7 as Popconfirm, a8 as PopconfirmProps, a9 as Popover, aa as PopoverProps, ab as Progress, ac as ProgressProps, ad as ProgressStatus, ae as Rate, af as RateProps, ag as Segmented, ah as SegmentedOption, ai as SegmentedProps, aj as SegmentedValue, ak as Spin, al as SpinProps, am as StepItem, an as StepStatus, ao as Steps, ap as StepsProps, aq as TabItem, ar as Tabs, as as TabsContextMenuClickInfo, at as TabsOrientation, au as TabsPosition, av as TabsProps, aw as TabsType, ax as Tag, ay as TagProps, az as TagSize, aA as TagVariant, aB as Timeline, aC as TimelineItem, aD as TimelineProps, aE as Toolbar, aF as ToolbarItem, aG as ToolbarProps, aH as Tooltip, aI as TooltipProps, aJ as Tour, aK as TourProps, aL as TourStep, aM as Tree, aN as TreeDropPosition, aO as TreeKey, aP as TreeNode, aQ as TreeProps, aR as Typography, aS as TypographyLinkProps, aT as TypographyProps, aU as TypographyTitleProps, aV as TypographyType, aW as Upload, aX as UploadChangeInfo, aY as UploadDraggerProps, aZ as UploadFile, a_ as UploadFileStatus, a$ as UploadHttpRequest, b0 as UploadItemActions, b1 as UploadProps, b2 as UploadRef, b3 as UploadRejectInfo, b4 as UploadRequestHandle, b5 as UploadRequestOptions, b6 as Watermark, b7 as WatermarkFont, b8 as WatermarkProps, b9 as message, ba as notification } from './core-BT21wlHN.cjs';
+import { T as TagStatus, B as BadgeProps } from './core-DGaJTy1i.cjs';
+export { a as Badge, b as BadgeRibbonProps, c as BadgeStatus, d as Breadcrumb, e as BreadcrumbItem, f as BreadcrumbProps, C as Calendar, g as CalendarProps, h as Card, i as CardAccent, j as CardProps, k as Carousel, l as CarouselProps, m as CarouselRef, n as Collapse, o as CollapseItem, p as CollapseKey, q as CollapseProps, D as Dropdown, r as DropdownButtonProps, s as DropdownMenuProps, t as DropdownOpenSource, u as DropdownPlacement, v as DropdownProps, w as DropdownTrigger, F as FILLED_ICON_NAMES, x as FilledIconName, y as FloatButton, z as FloatButtonBackTopProps, A as FloatButtonGroupProps, E as FloatButtonProps, G as FloatButtonShape, H as FloatingPlacement, I as FloatingTrigger, J as ICON_NAMES, K as Icon, L as IconName, M as IconProps, N as IconVariant, O as Image, P as ImagePreview, Q as ImagePreviewConfig, R as ImagePreviewProps, S as ImageProps, U as Input, V as InputProps, W as Menu, X as MenuClickInfo, Y as MenuItem, Z as MenuMode, _ as MenuProps, $ as MenuTheme, a0 as MessageConfig, a1 as MessageHandle, a2 as MessageKey, a3 as MessageType, a4 as NotificationConfig, a5 as NotificationPlacement, a6 as NotificationType, a7 as Popconfirm, a8 as PopconfirmProps, a9 as Popover, aa as PopoverProps, ab as Progress, ac as ProgressProps, ad as ProgressStatus, ae as Rate, af as RateProps, ag as Segmented, ah as SegmentedOption, ai as SegmentedProps, aj as SegmentedValue, ak as Spin, al as SpinProps, am as StepItem, an as StepStatus, ao as Steps, ap as StepsProps, aq as TabItem, ar as Tabs, as as TabsContextMenuClickInfo, at as TabsOrientation, au as TabsPosition, av as TabsProps, aw as TabsType, ax as Tag, ay as TagProps, az as TagSize, aA as TagVariant, aB as Timeline, aC as TimelineItem, aD as TimelineProps, aE as Toolbar, aF as ToolbarItem, aG as ToolbarProps, aH as Tooltip, aI as TooltipProps, aJ as Tour, aK as TourProps, aL as TourStep, aM as Tree, aN as TreeDropPosition, aO as TreeKey, aP as TreeNode, aQ as TreeProps, aR as Typography, aS as TypographyLinkProps, aT as TypographyProps, aU as TypographyTitleProps, aV as TypographyType, aW as Upload, aX as UploadChangeInfo, aY as UploadDraggerProps, aZ as UploadFile, a_ as UploadFileStatus, a$ as UploadHttpRequest, b0 as UploadItemActions, b1 as UploadProps, b2 as UploadRef, b3 as UploadRejectInfo, b4 as UploadRequestHandle, b5 as UploadRequestOptions, b6 as Watermark, b7 as WatermarkFont, b8 as WatermarkProps, b9 as message, ba as notification } from './core-DGaJTy1i.cjs';
 import * as react from 'react';
 import { HTMLAttributes, ReactNode, CSSProperties, ElementType, FormHTMLAttributes, InputHTMLAttributes, ChangeEvent, TextareaHTMLAttributes, MouseEvent, Key, PointerEvent, Ref, ReactElement, ButtonHTMLAttributes, RefObject } from 'react';
 import { C as ControlSize, I as InputPlaceholderMode, a as ControlStatus } from './shared-Bx4B28Wh.cjs';

package/dist/index.d.ts

@@ -1,5 +1,5 @@
-import { T as TagStatus, B as BadgeProps } from './core-OI4ySo2K.js';
-export { a as Badge, b as BadgeRibbonProps, c as BadgeStatus, d as Breadcrumb, e as BreadcrumbItem, f as BreadcrumbProps, C as Calendar, g as CalendarProps, h as Card, i as CardAccent, j as CardProps, k as Carousel, l as CarouselProps, m as CarouselRef, n as Collapse, o as CollapseItem, p as CollapseKey, q as CollapseProps, D as Dropdown, r as DropdownButtonProps, s as DropdownMenuProps, t as DropdownOpenSource, u as DropdownPlacement, v as DropdownProps, w as DropdownTrigger, F as FILLED_ICON_NAMES, x as FilledIconName, y as FloatButton, z as FloatButtonBackTopProps, A as FloatButtonGroupProps, E as FloatButtonProps, G as FloatButtonShape, H as FloatingPlacement, I as FloatingTrigger, J as ICON_NAMES, K as Icon, L as IconName, M as IconProps, N as IconVariant, O as Image, P as ImagePreview, Q as ImagePreviewConfig, R as ImagePreviewProps, S as ImageProps, U as Input, V as InputProps, W as Menu, X as MenuClickInfo, Y as MenuItem, Z as MenuMode, _ as MenuProps, $ as MenuTheme, a0 as MessageConfig, a1 as MessageHandle, a2 as MessageKey, a3 as MessageType, a4 as NotificationConfig, a5 as NotificationPlacement, a6 as NotificationType, a7 as Popconfirm, a8 as PopconfirmProps, a9 as Popover, aa as PopoverProps, ab as Progress, ac as ProgressProps, ad as ProgressStatus, ae as Rate, af as RateProps, ag as Segmented, ah as SegmentedOption, ai as SegmentedProps, aj as SegmentedValue, ak as Spin, al as SpinProps, am as StepItem, an as StepStatus, ao as Steps, ap as StepsProps, aq as TabItem, ar as Tabs, as as TabsContextMenuClickInfo, at as TabsOrientation, au as TabsPosition, av as TabsProps, aw as TabsType, ax as Tag, ay as TagProps, az as TagSize, aA as TagVariant, aB as Timeline, aC as TimelineItem, aD as TimelineProps, aE as Toolbar, aF as ToolbarItem, aG as ToolbarProps, aH as Tooltip, aI as TooltipProps, aJ as Tour, aK as TourProps, aL as TourStep, aM as Tree, aN as TreeDropPosition, aO as TreeKey, aP as TreeNode, aQ as TreeProps, aR as Typography, aS as TypographyLinkProps, aT as TypographyProps, aU as TypographyTitleProps, aV as TypographyType, aW as Upload, aX as UploadChangeInfo, aY as UploadDraggerProps, aZ as UploadFile, a_ as UploadFileStatus, a$ as UploadHttpRequest, b0 as UploadItemActions, b1 as UploadProps, b2 as UploadRef, b3 as UploadRejectInfo, b4 as UploadRequestHandle, b5 as UploadRequestOptions, b6 as Watermark, b7 as WatermarkFont, b8 as WatermarkProps, b9 as message, ba as notification } from './core-OI4ySo2K.js';
+import { T as TagStatus, B as BadgeProps } from './core-BU7dVRuz.js';
+export { a as Badge, b as BadgeRibbonProps, c as BadgeStatus, d as Breadcrumb, e as BreadcrumbItem, f as BreadcrumbProps, C as Calendar, g as CalendarProps, h as Card, i as CardAccent, j as CardProps, k as Carousel, l as CarouselProps, m as CarouselRef, n as Collapse, o as CollapseItem, p as CollapseKey, q as CollapseProps, D as Dropdown, r as DropdownButtonProps, s as DropdownMenuProps, t as DropdownOpenSource, u as DropdownPlacement, v as DropdownProps, w as DropdownTrigger, F as FILLED_ICON_NAMES, x as FilledIconName, y as FloatButton, z as FloatButtonBackTopProps, A as FloatButtonGroupProps, E as FloatButtonProps, G as FloatButtonShape, H as FloatingPlacement, I as FloatingTrigger, J as ICON_NAMES, K as Icon, L as IconName, M as IconProps, N as IconVariant, O as Image, P as ImagePreview, Q as ImagePreviewConfig, R as ImagePreviewProps, S as ImageProps, U as Input, V as InputProps, W as Menu, X as MenuClickInfo, Y as MenuItem, Z as MenuMode, _ as MenuProps, $ as MenuTheme, a0 as MessageConfig, a1 as MessageHandle, a2 as MessageKey, a3 as MessageType, a4 as NotificationConfig, a5 as NotificationPlacement, a6 as NotificationType, a7 as Popconfirm, a8 as PopconfirmProps, a9 as Popover, aa as PopoverProps, ab as Progress, ac as ProgressProps, ad as ProgressStatus, ae as Rate, af as RateProps, ag as Segmented, ah as SegmentedOption, ai as SegmentedProps, aj as SegmentedValue, ak as Spin, al as SpinProps, am as StepItem, an as StepStatus, ao as Steps, ap as StepsProps, aq as TabItem, ar as Tabs, as as TabsContextMenuClickInfo, at as TabsOrientation, au as TabsPosition, av as TabsProps, aw as TabsType, ax as Tag, ay as TagProps, az as TagSize, aA as TagVariant, aB as Timeline, aC as TimelineItem, aD as TimelineProps, aE as Toolbar, aF as ToolbarItem, aG as ToolbarProps, aH as Tooltip, aI as TooltipProps, aJ as Tour, aK as TourProps, aL as TourStep, aM as Tree, aN as TreeDropPosition, aO as TreeKey, aP as TreeNode, aQ as TreeProps, aR as Typography, aS as TypographyLinkProps, aT as TypographyProps, aU as TypographyTitleProps, aV as TypographyType, aW as Upload, aX as UploadChangeInfo, aY as UploadDraggerProps, aZ as UploadFile, a_ as UploadFileStatus, a$ as UploadHttpRequest, b0 as UploadItemActions, b1 as UploadProps, b2 as UploadRef, b3 as UploadRejectInfo, b4 as UploadRequestHandle, b5 as UploadRequestOptions, b6 as Watermark, b7 as WatermarkFont, b8 as WatermarkProps, b9 as message, ba as notification } from './core-BU7dVRuz.js';
 import * as react from 'react';
 import { HTMLAttributes, ReactNode, CSSProperties, ElementType, FormHTMLAttributes, InputHTMLAttributes, ChangeEvent, TextareaHTMLAttributes, MouseEvent, Key, PointerEvent, Ref, ReactElement, ButtonHTMLAttributes, RefObject } from 'react';
 import { C as ControlSize, I as InputPlaceholderMode, a as ControlStatus } from './shared-Bx4B28Wh.js';

package/dist/index.js

@@ -80,19 +80,19 @@ import {
   Watermark,
   message,
   notification
-} from "./chunk-2ETLCXNS.js";
+} from "./chunk-D752QGE6.js";
 import {
   MarkdownEditor
 } from "./chunk-TUXNOSCT.js";
 import {
   RichTextContent,
   RichTextEditor
-} from "./chunk-N4P3QKCY.js";
+} from "./chunk-CKX3AKMT.js";
 import {
   DatePicker,
   SelectDateRange,
   TimePanel
-} from "./chunk-36FXHK4W.js";
+} from "./chunk-QZG6XT65.js";
 import {
   Checkbox,
   FloatingScrollbarProvider,
@@ -104,7 +104,7 @@ import {
   Tooltip,
   Tree,
   useScrollbarProximity
-} from "./chunk-W3EKQOPR.js";
+} from "./chunk-RR7HW5HO.js";
 import {
   Dropdown,
   FILLED_ICON_NAMES,
@@ -117,7 +117,7 @@ import {
   Segmented,
   Steps,
   useOverlayLifecycle
-} from "./chunk-VNVDG4AC.js";
+} from "./chunk-U2WPN6TD.js";
 import {
   Button,
   TextArea

package/dist/rich-text-editor.js

@@ -1,8 +1,8 @@
 import {
   RichTextContent,
   RichTextEditor
-} from "./chunk-N4P3QKCY.js";
-import "./chunk-VNVDG4AC.js";
+} from "./chunk-CKX3AKMT.js";
+import "./chunk-U2WPN6TD.js";
 import "./chunk-SJFT5OSX.js";
 import "./chunk-PUZWLIIJ.js";
 export {

package/dist/select-date-range.js

@@ -1,8 +1,8 @@
 import {
   SelectDateRange
-} from "./chunk-36FXHK4W.js";
-import "./chunk-W3EKQOPR.js";
-import "./chunk-VNVDG4AC.js";
+} from "./chunk-QZG6XT65.js";
+import "./chunk-RR7HW5HO.js";
+import "./chunk-U2WPN6TD.js";
 import "./chunk-SJFT5OSX.js";
 import "./chunk-PUZWLIIJ.js";
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sia.soul/sia-react-ui",
-  "version": "0.1.84",
+  "version": "0.1.86",
   "description": "Sia Design components and tokens for React",
   "publishConfig": {
     "access": "public",