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

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

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

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

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

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

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

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

@@ -1051,7 +1051,7 @@ function Steps({ items, current = 0, initial = 0, direction = "horizontal", type
     ] }, index);
   }) });
 }
-function Segmented({ options, value, defaultValue, size: sizeProp, block = false, vertical = false, disabled = false, onChange, className = "", onKeyDown, ...props }) {
+function Segmented({ options, value, defaultValue, variant = "default", 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, size: sizeProp, block = false
     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}${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" : ""}${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/{chunk-V4GGPMKS.js → chunk-W3EKQOPR.js}

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

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

@@ -661,6 +661,12 @@ type SegmentedOption = SegmentedValue | {
 };
 /** 分段选择的属性配置。 */
 interface SegmentedProps extends Omit<HTMLAttributes<HTMLDivElement>, "defaultValue" | "onChange"> {
+    /**
+     * default 为圆角分段样式；slash 为横向闪电折线分隔样式，选中项使用主题色高亮。
+     * 仅支持两个横向选项；vertical=true 或选项数量不为 2 时回退为 default 样式。
+     * @defaultValue "default"
+     */
+    variant?: "default" | "zigzag";
     /** 可供用户选择的候选项列表。 */
     options: readonly SegmentedOption[];
     /** 当前值；作为受控属性时，需要在变更回调中同步更新。 */
@@ -688,7 +694,7 @@ interface SegmentedProps extends Omit<HTMLAttributes<HTMLDivElement>, "defaultVa
     onChange?: (value: SegmentedValue) => void;
 }
 /** 分段选择组件。 */
-declare function Segmented({ options, value, defaultValue, size: sizeProp, block, vertical, disabled, onChange, className, onKeyDown, ...props }: SegmentedProps): react.JSX.Element;
+declare function Segmented({ options, value, defaultValue, variant, size: sizeProp, block, vertical, disabled, onChange, className, onKeyDown, ...props }: SegmentedProps): react.JSX.Element;
 
 /** Tab的项目定义。 */
 interface TabItem {

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

@@ -661,6 +661,12 @@ type SegmentedOption = SegmentedValue | {
 };
 /** 分段选择的属性配置。 */
 interface SegmentedProps extends Omit<HTMLAttributes<HTMLDivElement>, "defaultValue" | "onChange"> {
+    /**
+     * default 为圆角分段样式；slash 为横向闪电折线分隔样式，选中项使用主题色高亮。
+     * 仅支持两个横向选项；vertical=true 或选项数量不为 2 时回退为 default 样式。
+     * @defaultValue "default"
+     */
+    variant?: "default" | "zigzag";
     /** 可供用户选择的候选项列表。 */
     options: readonly SegmentedOption[];
     /** 当前值；作为受控属性时，需要在变更回调中同步更新。 */
@@ -688,7 +694,7 @@ interface SegmentedProps extends Omit<HTMLAttributes<HTMLDivElement>, "defaultVa
     onChange?: (value: SegmentedValue) => void;
 }
 /** 分段选择组件。 */
-declare function Segmented({ options, value, defaultValue, size: sizeProp, block, vertical, disabled, onChange, className, onKeyDown, ...props }: SegmentedProps): react.JSX.Element;
+declare function Segmented({ options, value, defaultValue, variant, size: sizeProp, block, vertical, disabled, onChange, className, onKeyDown, ...props }: SegmentedProps): react.JSX.Element;
 
 /** Tab的项目定义。 */
 interface TabItem {

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, size: sizeProp, block = false, vertical = false, disabled = false, onChange, className = "", onKeyDown, ...props }) {
+function Segmented({ options, value, defaultValue, variant = "default", 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, size: sizeProp, block = false
     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}${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" : ""}${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

@@ -5055,6 +5055,69 @@ fieldset:disabled .sia-input-number__floating-placeholder {
   gap: var(--sia-query-field-gap, 8px);
   padding-top: 8px;
 }
+.sia-query-settings {
+  display: grid;
+  gap: 12px;
+}
+.sia-query-settings__trigger.sia-button {
+  padding-inline: 6px;
+}
+.sia-query-settings__hint {
+  margin: 0;
+  color: var(--sia-color-text-secondary);
+}
+.sia-query-settings__list {
+  display: grid;
+  gap: 6px;
+  max-height: 360px;
+  overflow-y: auto;
+}
+.sia-query-settings__item {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 42px;
+  padding: 8px;
+  background: var(--sia-color-surface);
+  border: 1px solid var(--sia-color-border);
+  border-radius: var(--sia-radius);
+  touch-action: none;
+  cursor: grab;
+}
+.sia-query-settings__item.is-disabled {
+  cursor: default;
+}
+.sia-query-settings__name {
+  flex: 1;
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+.sia-query-settings__list.is-sorting .sia-query-settings__item {
+  transition: transform 180ms ease;
+  user-select: none;
+}
+.sia-query-settings__list.is-sorting .sia-query-settings__item.is-dragging {
+  z-index: 2;
+  transition: none;
+  cursor: grabbing;
+  border-color: var(--sia-color-primary);
+  background: var(--sia-color-primary-light);
+  box-shadow: 0 4px 10px -3px rgb(0 0 0 / 25%);
+}
+@media (prefers-reduced-motion: reduce) {
+  .sia-query-settings__list.is-sorting .sia-query-settings__item {
+    transition: none;
+  }
+}
+.sia-query-settings__item > .sia-checkbox {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+.sia-query-settings__order {
+  display: flex;
+  flex-shrink: 0;
+}
 .sia-query-form__field {
   --sia-query-item-width: var(--sia-query-field-width, 220px);
   flex: 0 1 var(--sia-query-item-width);
@@ -10539,6 +10602,60 @@ button.sia-treemap__tile:focus-visible,
 .sia-time-panel button {
   font: inherit;
 }
+.sia-segmented.sia-segmented--zigzag {
+  gap: 0;
+  padding: 0;
+  overflow: hidden;
+  background: var(--sia-color-surface);
+  border: 1px solid var(--sia-color-border);
+  border-radius: 999px;
+}
+.sia-segmented--zigzag:not(.sia-segmented--block) {
+  width: max-content;
+}
+.sia-segmented--zigzag button {
+  position: relative;
+  isolation: isolate;
+  padding-inline: 20px;
+  border-radius: 0;
+}
+.sia-segmented--zigzag button::before {
+  position: absolute;
+  z-index: -1;
+  inset: 0;
+  content: "";
+  background: var(--sia-color-surface);
+  transition: background 140ms ease;
+  pointer-events: none;
+}
+.sia-segmented--zigzag button:first-child::before {
+  right: -6px;
+  clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 42%, calc(100% - 2px) 42%, calc(100% - 12px) 100%, 0 100%);
+}
+.sia-segmented--zigzag button:last-child::before {
+  left: -6px;
+  clip-path: polygon(12px 0, 100% 0, 100% 100%, 0 100%, 10px 42%, 2px 42%);
+}
+.sia-segmented--zigzag button:hover:not(:disabled)::before {
+  background: var(--sia-color-control-hover);
+}
+.sia-segmented--zigzag button.is-selected {
+  z-index: 1;
+  color: #fff;
+  background: transparent;
+  box-shadow: none;
+}
+.sia-segmented--zigzag button.is-selected::before,
+.sia-segmented--zigzag button.is-selected:hover:not(:disabled)::before {
+  background: var(--sia-color-primary);
+}
+.sia-segmented--zigzag button.is-selected:hover:not(:disabled) {
+  color: #fff;
+}
+.sia-segmented--zigzag button:focus-visible {
+  outline: 2px solid var(--sia-color-primary);
+  outline-offset: -2px;
+}
 
 /* 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-DOEG2EHr.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-BT21wlHN.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-BjXlrCQ3.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-OI4ySo2K.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-BCOFQJ76.js";
+} from "./chunk-2ETLCXNS.js";
 import {
   Select
-} from "./chunk-V4GGPMKS.js";
+} from "./chunk-W3EKQOPR.js";
 import {
   Icon,
   Input,
   Modal,
   Segmented
-} from "./chunk-CLBWJEID.js";
+} from "./chunk-VNVDG4AC.js";
 import {
   Button
 } from "./chunk-SJFT5OSX.js";