@sia.soul/sia-react-ui 0.1.13 → 0.1.14

package/dist/index.cjs

@@ -1039,11 +1039,35 @@ function Alert({
   ] });
 }
 
+// src/components/shared.ts
+var import_react3 = require("react");
+var ControlSizeContext = (0, import_react3.createContext)("medium");
+function useControlSize(size) {
+  const inherited = (0, import_react3.useContext)(ControlSizeContext);
+  return size ?? inherited;
+}
+var PlaceholderModeContext = (0, import_react3.createContext)("default");
+function usePlaceholderMode(mode) {
+  const inherited = (0, import_react3.useContext)(PlaceholderModeContext);
+  return mode ?? inherited;
+}
+function useControllableState({ value, defaultValue, onChange }) {
+  const [internalValue, setInternalValue] = (0, import_react3.useState)(defaultValue);
+  const controlled = value !== void 0;
+  const currentValue = controlled ? value : internalValue;
+  const setValue2 = (0, import_react3.useCallback)((nextValue) => {
+    if (Object.is(currentValue, nextValue)) return;
+    if (!controlled) setInternalValue(nextValue);
+    onChange?.(nextValue);
+  }, [controlled, currentValue, onChange]);
+  return [currentValue, setValue2];
+}
+
 // src/components/Navigation.tsx
 var import_react5 = require("react");
 
 // src/components/PopupPortal.tsx
-var import_react3 = require("react");
+var import_react4 = require("react");
 var import_react_dom = require("react-dom");
 var import_jsx_runtime4 = require("react/jsx-runtime");
 function setForwardedRef(ref, value) {
@@ -1053,7 +1077,7 @@ function setForwardedRef(ref, value) {
 function clamp(value, min, max) {
   return Math.min(Math.max(value, min), Math.max(min, max));
 }
-var PopupPortal = (0, import_react3.forwardRef)(function PopupPortal2({
+var PopupPortal = (0, import_react4.forwardRef)(function PopupPortal2({
   anchorRef,
   open = true,
   placement = "bottom-start",
@@ -1064,9 +1088,9 @@ var PopupPortal = (0, import_react3.forwardRef)(function PopupPortal2({
   children,
   ...props
 }, forwardedRef) {
-  const popupRef = (0, import_react3.useRef)(null);
-  const [position, setPosition] = (0, import_react3.useState)();
-  (0, import_react3.useLayoutEffect)(() => {
+  const popupRef = (0, import_react4.useRef)(null);
+  const [position, setPosition] = (0, import_react4.useState)();
+  (0, import_react4.useLayoutEffect)(() => {
     if (!open || typeof document === "undefined") {
       setPosition(void 0);
       return;
@@ -1157,25 +1181,6 @@ var PopupPortal = (0, import_react3.forwardRef)(function PopupPortal2({
   );
 });
 
-// src/components/shared.ts
-var import_react4 = require("react");
-var PlaceholderModeContext = (0, import_react4.createContext)("default");
-function usePlaceholderMode(mode) {
-  const inherited = (0, import_react4.useContext)(PlaceholderModeContext);
-  return mode ?? inherited;
-}
-function useControllableState({ value, defaultValue, onChange }) {
-  const [internalValue, setInternalValue] = (0, import_react4.useState)(defaultValue);
-  const controlled = value !== void 0;
-  const currentValue = controlled ? value : internalValue;
-  const setValue2 = (0, import_react4.useCallback)((nextValue) => {
-    if (Object.is(currentValue, nextValue)) return;
-    if (!controlled) setInternalValue(nextValue);
-    onChange?.(nextValue);
-  }, [controlled, currentValue, onChange]);
-  return [currentValue, setValue2];
-}
-
 // src/components/Navigation.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
 function MenuPopup({
@@ -1377,7 +1382,8 @@ function Steps({ items, current = 0, initial: initial3 = 0, direction = "horizon
     ] }, index);
   }) });
 }
-function Segmented({ options, value, defaultValue, size = "medium", block = false, vertical = false, disabled = false, onChange, className = "", onKeyDown, ...props }) {
+function Segmented({ options, value, defaultValue, 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) });
   function keyboard(event) {
@@ -1403,7 +1409,7 @@ var import_react6 = require("react");
 var import_jsx_runtime6 = require("react/jsx-runtime");
 var Button = (0, import_react6.forwardRef)(function Button2({
   variant = "default",
-  size = "medium",
+  size: sizeProp,
   loading = false,
   block = false,
   danger = false,
@@ -1416,6 +1422,7 @@ var Button = (0, import_react6.forwardRef)(function Button2({
   style,
   ...props
 }, forwardedRef) {
+  const size = useControlSize(sizeProp);
   const localRef = (0, import_react6.useRef)(null);
   function setRef(node) {
     localRef.current = node;
@@ -2027,7 +2034,7 @@ var Input = (0, import_react10.forwardRef)(function Input2({
   label,
   hint,
   status = "default",
-  size = "medium",
+  size: sizeProp,
   prefix,
   suffix,
   allowClear = false,
@@ -2044,6 +2051,7 @@ var Input = (0, import_react10.forwardRef)(function Input2({
   onChange,
   ...props
 }, forwardedRef) {
+  const size = useControlSize(sizeProp);
   const fallbackId = (0, import_react10.useId)();
   const inputId = id ?? fallbackId;
   const localRef = (0, import_react10.useRef)(null);
@@ -2127,7 +2135,8 @@ var Input = (0, import_react10.forwardRef)(function Input2({
 var import_react11 = require("react");
 var import_jsx_runtime11 = require("react/jsx-runtime");
 var CheckboxGroupContext = (0, import_react11.createContext)(null);
-var CheckboxRoot = (0, import_react11.forwardRef)(function Checkbox({ value, indeterminate = false, children, disabled, checked, defaultChecked, className = "", onChange, ...props }, forwardedRef) {
+var CheckboxRoot = (0, import_react11.forwardRef)(function Checkbox({ value, size: sizeProp, indeterminate = false, children, disabled, checked, defaultChecked, className = "", onChange, ...props }, forwardedRef) {
+  const size = useControlSize(sizeProp);
   const group = (0, import_react11.useContext)(CheckboxGroupContext);
   const localRef = (0, import_react11.useRef)(null);
   const fallbackId = (0, import_react11.useId)();
@@ -2141,7 +2150,7 @@ var CheckboxRoot = (0, import_react11.forwardRef)(function Checkbox({ value, ind
     if (typeof forwardedRef === "function") forwardedRef(node);
     else if (forwardedRef) forwardedRef.current = node;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("label", { className: `sia-checkbox${disabled || group?.disabled ? " is-disabled" : ""} ${className}`.trim(), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("label", { className: `sia-checkbox sia-checkbox--${size}${disabled || group?.disabled ? " is-disabled" : ""} ${className}`.trim(), children: [
     /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       "input",
       {
@@ -2166,6 +2175,7 @@ var CheckboxRoot = (0, import_react11.forwardRef)(function Checkbox({ value, ind
   ] });
 });
 function CheckboxGroup({
+  size: sizeProp,
   value,
   defaultValue = [],
   options,
@@ -2175,6 +2185,7 @@ function CheckboxGroup({
   children,
   onChange
 }) {
+  const size = useControlSize(sizeProp);
   const [values, setValues] = useControllableState({ value, defaultValue, onChange });
   const context = (0, import_react11.useMemo)(() => ({
     values,
@@ -2185,13 +2196,13 @@ function CheckboxGroup({
       setValues(next);
     }
   }), [disabled, name, setValues, values]);
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(CheckboxGroupContext.Provider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: `sia-checkbox-group ${className}`.trim(), role: "group", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ControlSizeContext.Provider, { value: size, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(CheckboxGroupContext.Provider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: `sia-checkbox-group ${className}`.trim(), role: "group", children: [
     options?.map((option) => {
       const normalized = typeof option === "object" ? option : { label: String(option), value: option };
       return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(CheckboxRoot, { value: normalized.value, disabled: normalized.disabled, children: normalized.label }, normalized.value);
     }),
     children
-  ] }) });
+  ] }) }) });
 }
 var Checkbox2 = Object.assign(CheckboxRoot, { Group: CheckboxGroup });
 
@@ -2885,7 +2896,7 @@ var Select = (0, import_react15.forwardRef)(function Select2({
   onChange,
   placeholder = "\u8BF7\u9009\u62E9",
   placeholderMode,
-  size = "medium",
+  size: sizeProp,
   status = "default",
   allowClear = false,
   loading = false,
@@ -2911,6 +2922,7 @@ var Select = (0, import_react15.forwardRef)(function Select2({
   onKeyDown,
   ...props
 }, forwardedRef) {
+  const size = useControlSize(sizeProp);
   const fallbackId = (0, import_react15.useId)();
   const selectId = id ?? fallbackId;
   const listboxId = `${selectId}-listbox`;
@@ -3297,6 +3309,7 @@ var Select = (0, import_react15.forwardRef)(function Select2({
 var import_jsx_runtime16 = require("react/jsx-runtime");
 var DEFAULT_PAGE_SIZE_OPTIONS = [10, 25, 50, 100, 200, 500, 1e3, 2e3, 5e3];
 function Pagination({
+  size: sizeProp,
   total = 0,
   current,
   defaultCurrent = 1,
@@ -3314,6 +3327,7 @@ function Pagination({
   className = "",
   ...props
 }) {
+  const controlSize = useControlSize(sizeProp);
   const [size, setSize] = useControllableState({ value: pageSize, defaultValue: Math.max(1, defaultPageSize) });
   const [page, setPage] = useControllableState({ value: current, defaultValue: Math.max(1, defaultCurrent) });
   const [internalRefreshing, setInternalRefreshing] = (0, import_react16.useState)(false);
@@ -3345,14 +3359,14 @@ function Pagination({
       if (refreshing === void 0) setInternalRefreshing(false);
     }
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("nav", { className: `sia-pagination ${className}`.trim(), "aria-label": "\u5206\u9875", ...props, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("nav", { className: `sia-pagination sia-pagination--${controlSize} ${className}`.trim(), "aria-label": "\u5206\u9875", ...props, children: [
     showSizeChanger ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "sia-pagination__size", children: [
       /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { children: "\u6BCF\u9875\u663E\u793A" }),
       /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
         Select,
         {
           className: "sia-pagination__size-select",
-          size: "small",
+          size: controlSize,
           "aria-label": "\u6BCF\u9875\u6761\u6570",
           value: size,
           options: sizes.map((value) => ({ label: `${value} \u6761`, value })),
@@ -3367,7 +3381,7 @@ function Pagination({
       Button,
       {
         variant: "text",
-        size: "small",
+        size: controlSize,
         className: "sia-pagination__total",
         disabled: disabled || !onRefreshTotal || loading,
         title: onRefreshTotal ? "\u70B9\u51FB\u5237\u65B0\u603B\u8BB0\u5F55\u6570" : void 0,
@@ -3382,15 +3396,15 @@ function Pagination({
       }
     ) : null,
     /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "sia-pagination__buttons", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Button, { size: "small", variant: "text", "aria-label": "\u7B2C\u4E00\u9875", disabled: disabled || safePage <= 1, onClick: () => change(1), children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Icon, { name: "double-left", size: 15 }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Button, { size: "small", variant: "text", "aria-label": "\u4E0A\u4E00\u9875", disabled: disabled || safePage <= 1, onClick: () => change(safePage - 1), children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Icon, { name: "chevron-left", size: 15 }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Button, { size: controlSize, variant: "text", "aria-label": "\u7B2C\u4E00\u9875", disabled: disabled || safePage <= 1, onClick: () => change(1), children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Icon, { name: "double-left", size: 15 }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Button, { size: controlSize, variant: "text", "aria-label": "\u4E0A\u4E00\u9875", disabled: disabled || safePage <= 1, onClick: () => change(safePage - 1), children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Icon, { name: "chevron-left", size: 15 }) }),
       /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("span", { "aria-live": "polite", children: [
         safePage,
         " / ",
         totalPages
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Button, { size: "small", variant: "text", "aria-label": "\u4E0B\u4E00\u9875", disabled: disabled || safePage >= totalPages, onClick: () => change(safePage + 1), children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Icon, { name: "chevron-right", size: 15 }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Button, { size: "small", variant: "text", "aria-label": "\u6700\u540E\u4E00\u9875", disabled: disabled || safePage >= totalPages, onClick: () => change(totalPages), children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Icon, { name: "double-right", size: 15 }) })
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Button, { size: controlSize, variant: "text", "aria-label": "\u4E0B\u4E00\u9875", disabled: disabled || safePage >= totalPages, onClick: () => change(safePage + 1), children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Icon, { name: "chevron-right", size: 15 }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Button, { size: controlSize, variant: "text", "aria-label": "\u6700\u540E\u4E00\u9875", disabled: disabled || safePage >= totalPages, onClick: () => change(totalPages), children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Icon, { name: "double-right", size: 15 }) })
     ] })
   ] });
 }
@@ -3435,6 +3449,7 @@ function Cascader({
   options,
   value,
   defaultValue,
+  size: sizeProp,
   multiple = false,
   showSearch = false,
   allowClear = false,
@@ -3450,6 +3465,7 @@ function Cascader({
   className = "",
   ...props
 }) {
+  const size = useControlSize(sizeProp);
   const fields = (0, import_react17.useMemo)(() => ({ label: fieldNames?.label ?? "label", value: fieldNames?.value ?? "value", children: fieldNames?.children ?? "children" }), [fieldNames]);
   const rootRef = (0, import_react17.useRef)(null);
   const popupRef = (0, import_react17.useRef)(null);
@@ -3538,7 +3554,7 @@ function Cascader({
     if (children?.length) columns.push(children);
   });
   const floating = useFloatingPlaceholder({ mode: placeholderMode, placeholder, filled: selectedPaths.length > 0, active: open });
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { ref: rootRef, className: `sia-cascader${open ? " is-open" : ""}${disabled ? " is-disabled" : ""} ${className}`.trim(), ...props, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { ref: rootRef, className: `sia-cascader sia-cascader--${size}${open ? " is-open" : ""}${disabled ? " is-disabled" : ""} ${className}`.trim(), ...props, children: [
     /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("button", { type: "button", className: `sia-cascader__trigger${floating.className}`, disabled, "aria-haspopup": "listbox", "aria-expanded": open, onClick: toggleOpen, children: [
       /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "sia-cascader__value", children: display ? multiple && Array.isArray(display) ? display.map((label, index) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "sia-cascader__tag", children: label }, pathKey(selectedPaths[index] ?? []))) : display : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "sia-cascader__placeholder", children: placeholder }) }),
       allowClear && selectedPaths.length ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "sia-cascader__clear", role: "button", "aria-label": "\u6E05\u9664\u9009\u62E9", onClick: (event) => {
@@ -3604,14 +3620,15 @@ function Cascader({
 var import_react18 = require("react");
 var import_react_dom4 = require("react-dom");
 var import_jsx_runtime18 = require("react/jsx-runtime");
-function Rate({ value, defaultValue = 0, count = 5, allowHalf = false, allowClear = true, disabled = false, character, tooltips, onChange, onHoverChange, className = "", ...props }) {
+function Rate({ value, size: sizeProp, defaultValue = 0, count = 5, allowHalf = false, allowClear = true, disabled = false, character, tooltips, onChange, onHoverChange, className = "", ...props }) {
+  const size = useControlSize(sizeProp);
   const [current, setCurrent] = useControllableState({ value, defaultValue, onChange });
   const [hover, setHover] = (0, import_react18.useState)(0);
   const shown = hover || current;
   function choose(next) {
     setCurrent(allowClear && next === current ? 0 : next);
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: `sia-rate${disabled ? " is-disabled" : ""} ${className}`.trim(), role: "radiogroup", "aria-label": "\u8BC4\u5206", onMouseLeave: () => {
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: `sia-rate sia-rate--${size}${disabled ? " is-disabled" : ""} ${className}`.trim(), role: "radiogroup", "aria-label": "\u8BC4\u5206", onMouseLeave: () => {
     setHover(0);
     onHoverChange?.(0);
   }, ...props, children: Array.from({ length: count }, (_, index) => {
@@ -5069,6 +5086,7 @@ var import_jsx_runtime26 = require("react/jsx-runtime");
 var Switch = (0, import_react25.forwardRef)(function Switch2({
   label,
   variant = "standard",
+  size: sizeProp,
   checkedContent,
   uncheckedContent,
   onChange,
@@ -5076,6 +5094,7 @@ var Switch = (0, import_react25.forwardRef)(function Switch2({
   className = "",
   ...props
 }, ref) {
+  const size = useControlSize(sizeProp);
   const hasContent = checkedContent !== void 0 || uncheckedContent !== void 0;
   const checkedVisual = checkedContent ?? (variant === "segmented" ? "\u5F00" : null);
   const uncheckedVisual = uncheckedContent ?? (variant === "segmented" ? "\u5173" : null);
@@ -5083,7 +5102,7 @@ var Switch = (0, import_react25.forwardRef)(function Switch2({
     onCheckedChange?.(event.currentTarget.checked);
     onChange?.(event);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("label", { className: `sia-switch-wrap ${className}`.trim(), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("label", { className: `sia-switch-wrap sia-switch-wrap--${size} ${className}`.trim(), children: [
     /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("input", { ref, type: "checkbox", role: "switch", className: "sia-switch-input", onChange: handleChange, ...props }),
     /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
       "span",
@@ -5292,6 +5311,7 @@ function FormRoot({
   form,
   initialValues,
   layout = "horizontal",
+  size: sizeProp,
   placeholderMode,
   disabled = false,
   requiredMark = true,
@@ -5302,16 +5322,17 @@ function FormRoot({
   children,
   ...props
 }) {
+  const size = useControlSize(sizeProp);
   const resolvedPlaceholderMode = usePlaceholderMode(placeholderMode);
   const [internalForm] = useForm(form);
   const instance = internalForm;
   instance.configure(initialValues, { onFinish, onFinishFailed, onValuesChange });
   const context = (0, import_react25.useMemo)(() => instance, [instance]);
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(FormContext.Provider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(PlaceholderModeContext.Provider, { value: resolvedPlaceholderMode, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(FormContext.Provider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(PlaceholderModeContext.Provider, { value: resolvedPlaceholderMode, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ControlSizeContext.Provider, { value: size, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     "form",
     {
       ...props,
-      className: `sia-form sia-form--${layout}${disabled ? " is-disabled" : ""} ${className}`.trim(),
+      className: `sia-form sia-form--${layout} sia-form--${size}${disabled ? " is-disabled" : ""} ${className}`.trim(),
       "data-required-mark": requiredMark,
       onSubmit: (event) => {
         event.preventDefault();
@@ -5319,7 +5340,7 @@ function FormRoot({
       },
       children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("fieldset", { disabled, children })
     }
-  ) }) });
+  ) }) }) });
 }
 function defaultEventValue(valuePropName, args) {
   const first = args[0];
@@ -5467,12 +5488,13 @@ var Form = Object.assign(FormRoot, {
 var import_react26 = require("react");
 var import_jsx_runtime27 = require("react/jsx-runtime");
 var RadioContext = (0, import_react26.createContext)(null);
-var RadioRoot = (0, import_react26.forwardRef)(function Radio({ value, children, disabled, checked, defaultChecked, button = false, className = "", onChange, ...props }, ref) {
+var RadioRoot = (0, import_react26.forwardRef)(function Radio({ value, size: sizeProp, children, disabled, checked, defaultChecked, button = false, className = "", onChange, ...props }, ref) {
+  const size = useControlSize(sizeProp);
   const group = (0, import_react26.useContext)(RadioContext);
   const fallbackId = (0, import_react26.useId)();
   const grouped = group !== null;
   const currentChecked = grouped ? group.value === value : checked;
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("label", { className: `sia-radio${button ? " sia-radio--button" : ""}${button && group?.buttonStyle === "solid" ? " sia-radio--solid" : ""}${disabled || group?.disabled ? " is-disabled" : ""} ${className}`.trim(), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("label", { className: `sia-radio sia-radio--${size}${button ? " sia-radio--button" : ""}${button && group?.buttonStyle === "solid" ? " sia-radio--solid" : ""}${disabled || group?.disabled ? " is-disabled" : ""} ${className}`.trim(), children: [
     /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
       "input",
       {
@@ -5500,6 +5522,7 @@ function RadioButton(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(RadioRoot, { ...props, button: true });
 }
 function RadioGroup({
+  size: sizeProp,
   value,
   defaultValue,
   options,
@@ -5511,6 +5534,7 @@ function RadioGroup({
   children,
   onChange
 }) {
+  const size = useControlSize(sizeProp);
   const fallbackName = (0, import_react26.useId)();
   const [currentValue, setValue2] = useControllableState({
     value,
@@ -5527,13 +5551,13 @@ function RadioGroup({
     setValue: setValue2
   }), [buttonStyle, currentValue, disabled, fallbackName, name, setValue2]);
   const Component = optionType === "button" ? RadioButton : RadioRoot;
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(RadioContext.Provider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: `sia-radio-group${optionType === "button" ? " sia-radio-group--button" : ""} ${className}`.trim(), role: "radiogroup", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ControlSizeContext.Provider, { value: size, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(RadioContext.Provider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: `sia-radio-group${optionType === "button" ? " sia-radio-group--button" : ""} ${className}`.trim(), role: "radiogroup", children: [
     options?.map((option) => {
       const normalized = typeof option === "object" ? option : { label: String(option), value: option };
       return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Component, { value: normalized.value, disabled: normalized.disabled, children: normalized.label }, normalized.value);
     }),
     children
-  ] }) });
+  ] }) }) });
 }
 var Radio2 = Object.assign(RadioRoot, { Button: RadioButton, Group: RadioGroup });
 
@@ -5728,6 +5752,7 @@ function createDefaultStops(color) {
   return [createStop(color, 0), createStop("#FFFFFF", 100)];
 }
 function ColorPicker({
+  size: sizeProp,
   value,
   defaultValue = "#1677FF",
   mode,
@@ -5745,6 +5770,7 @@ function ColorPicker({
   onClear,
   ...props
 }) {
+  const size = useControlSize(sizeProp);
   const rootRef = (0, import_react28.useRef)(null);
   const popupRef = (0, import_react28.useRef)(null);
   const lastEmittedValue = (0, import_react28.useRef)();
@@ -5845,7 +5871,7 @@ function ColorPicker({
   const triggerBackground = color || "transparent";
   const triggerText = color || "\u65E0\u8272";
   const opaqueColor = rgbaToHex({ ...rgba, a: 100 }, false);
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { ref: rootRef, className: `sia-color-picker${disabled ? " is-disabled" : ""} ${className}`.trim(), ...props, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { ref: rootRef, className: `sia-color-picker sia-color-picker--${size}${disabled ? " is-disabled" : ""} ${className}`.trim(), ...props, children: [
     /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
       "button",
       {
@@ -6233,7 +6259,7 @@ function DatePicker({
   value,
   defaultValue,
   picker = "date",
-  size = "medium",
+  size: sizeProp,
   status = "default",
   allowClear = true,
   multiple = false,
@@ -6257,6 +6283,7 @@ function DatePicker({
   renderExtraFooter,
   ...props
 }) {
+  const size = useControlSize(sizeProp);
   const id = (0, import_react30.useId)();
   const rootRef = (0, import_react30.useRef)(null);
   const popupRef = (0, import_react30.useRef)(null);
@@ -6417,7 +6444,7 @@ function DateRangePicker({
   maxRangeDays,
   allowEmpty = [false, false],
   endpointDisabled = [false, false],
-  size = "medium",
+  size: sizeProp,
   status = "default",
   allowClear = true,
   needConfirm,
@@ -6438,6 +6465,7 @@ function DateRangePicker({
   renderExtraFooter,
   ...props
 }) {
+  const size = useControlSize(sizeProp);
   const id = (0, import_react30.useId)();
   const rootRef = (0, import_react30.useRef)(null);
   const popupRef = (0, import_react30.useRef)(null);
@@ -6678,8 +6706,9 @@ function DateRangePicker({
       endpointLabel
     );
   }
-  const floating = useFloatingPlaceholder({ mode: placeholderMode, placeholder: placeholder.filter(Boolean).join(" / "), filled: currentValue.some(Boolean), active: visible });
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("span", { ref: rootRef, className: `sia-picker${floating.className} sia-picker-range-control sia-picker--${size} sia-picker--${status}${visible ? " is-open" : ""}${disabled ? " is-disabled" : ""} ${className}`.trim(), children: [
+  const startFloating = useFloatingPlaceholder({ mode: placeholderMode, placeholder: placeholder[0], filled: Boolean(currentValue[0]), active: visible });
+  const endFloating = useFloatingPlaceholder({ mode: placeholderMode, placeholder: placeholder[1], filled: Boolean(currentValue[1]), active: visible });
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("span", { ref: rootRef, className: `sia-picker sia-picker-range-control sia-picker--${size} sia-picker--${status}${visible ? " is-open" : ""}${disabled ? " is-disabled" : ""} ${className}`.trim(), children: [
     /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
       "button",
       {
@@ -6696,14 +6725,19 @@ function DateRangePicker({
         disabled,
         onClick: () => changeOpen(!visible),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: `sia-picker-range-control__value${currentValue[0] ? "" : " is-placeholder"}`, children: currentValue[0] ? formatValue2(currentValue[0]) : placeholder[0] }),
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("span", { className: `sia-picker-range-control__field${startFloating.className}`, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: `sia-picker-range-control__value${currentValue[0] ? "" : " is-placeholder"}`, children: currentValue[0] ? formatValue2(currentValue[0]) : placeholder[0] }),
+            startFloating.label
+          ] }),
           /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "sia-picker-range-control__separator", children: separator }),
-          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: `sia-picker-range-control__value${currentValue[1] ? "" : " is-placeholder"}`, children: currentValue[1] ? formatValue2(currentValue[1]) : placeholder[1] }),
+          /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("span", { className: `sia-picker-range-control__field${endFloating.className}`, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: `sia-picker-range-control__value${currentValue[1] ? "" : " is-placeholder"}`, children: currentValue[1] ? formatValue2(currentValue[1]) : placeholder[1] }),
+            endFloating.label
+          ] }),
           /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "sia-picker__icon", "aria-hidden": "true", children: suffixIcon ?? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Icon, { name: "calendar", size: 16 }) })
         ]
       }
     ),
-    floating.label,
     allowClear && (currentValue[0] || currentValue[1]) && !disabled ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("button", { type: "button", className: "sia-picker__clear", "aria-label": "\u6E05\u9664\u65E5\u671F\u8303\u56F4", onClick: clearValue, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Icon, { name: "circle-close", variant: "filled", size: 15 }) }) : null,
     /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(PopupPortal, { ref: popupRef, anchorRef: rootRef, open: visible, className: `sia-date-panel sia-date-panel--range${showTime ? ` sia-date-panel--with-time sia-date-panel--range-time-${compactDateTime ? "compact" : "paired"}` : ""}${presets?.length ? " sia-date-panel--with-presets" : ""}`, role: "dialog", "aria-label": "\u65E5\u671F\u8303\u56F4\u9009\u62E9\u9762\u677F", children: [
       /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "sia-date-panel__body", children: showTime ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "sia-date-panel__range-date-time", children: compactDateTime ? renderDateTimeGroup(activeIndex) : /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
@@ -6779,7 +6813,7 @@ function SelectDateRange({
   selectAriaLabel = "\u9009\u62E9\u7C7B\u578B",
   rangeAriaLabel = "\u65E5\u671F\u8303\u56F4",
   presets,
-  size = "medium",
+  size: sizeProp,
   status = "default",
   disabled = false,
   onChange,
@@ -6787,6 +6821,7 @@ function SelectDateRange({
   style,
   ...props
 }) {
+  const size = useControlSize(sizeProp);
   const initialValue = defaultValue ?? { select: options[0]?.value ?? "", range: ["", ""] };
   const [currentValue, setCurrentValue] = useControllableState({ value: value === void 0 ? void 0 : value && typeof value === "object" ? value : { select: "", range: ["", ""] }, defaultValue: initialValue, onChange });
   return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: `sia-select-date-range sia-select-date-range--${size} ${className}`.trim(), role: "group", "aria-label": `${selectAriaLabel}\u4E0E${rangeAriaLabel}`, ...props, style: { ...style, "--sia-select-date-range-select-width": typeof selectWidth === "number" ? `${selectWidth}px` : selectWidth }, children: [
@@ -6836,7 +6871,7 @@ function seconds(value) {
 function TimePicker({
   value,
   defaultValue = "",
-  size = "medium",
+  size: sizeProp,
   status = "default",
   allowClear = true,
   use12Hours = false,
@@ -6856,6 +6891,7 @@ function TimePicker({
   step,
   ...props
 }) {
+  const size = useControlSize(sizeProp);
   const id = (0, import_react31.useId)();
   const rootRef = (0, import_react31.useRef)(null);
   const inputRef = (0, import_react31.useRef)(null);
@@ -6982,13 +7018,14 @@ function TimePicker({
   ] });
 }
 function TimeRangePicker({ value, defaultValue = ["", ""], placeholder = ["\u5F00\u59CB\u65F6\u95F4", "\u7ED3\u675F\u65F6\u95F4"], separator = "\u2192", onChange, className = "", style, ...props }) {
+  const size = useControlSize(props.size);
   const [currentValue, setValue2] = useControllableState({ value: value === void 0 ? void 0 : Array.isArray(value) ? value : ["", ""], defaultValue, onChange });
   function update(index, next) {
     const pair = [currentValue[0], currentValue[1]];
     pair[index] = next;
     setValue2(pair);
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("span", { style, className: `sia-time-range sia-picker--${props.size ?? "medium"} sia-picker--${props.status ?? "default"}${props.disabled ? " is-disabled" : ""} ${className}`.trim(), children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("span", { style, className: `sia-time-range sia-picker--${size} sia-picker--${props.status ?? "default"}${props.disabled ? " is-disabled" : ""} ${className}`.trim(), children: [
     /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(TimePicker, { ...props, "aria-label": props["aria-label"] ? props["aria-label"] + "\u5F00\u59CB\u65F6\u95F4" : "\u5F00\u59CB\u65F6\u95F4", value: currentValue[0], placeholder: placeholder[0], max: currentValue[1] && (!props.max || seconds(currentValue[1]) < seconds(String(props.max))) ? currentValue[1] : props.max, onChange: (next) => update(0, next) }),
     /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "sia-time-range__separator", children: separator }),
     /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(TimePicker, { ...props, id: props.id ? props.id + "-end" : void 0, "aria-label": props["aria-label"] ? props["aria-label"] + "\u7ED3\u675F\u65F6\u95F4" : "\u7ED3\u675F\u65F6\u95F4", value: currentValue[1], placeholder: placeholder[1], min: currentValue[0] && (!props.min || seconds(currentValue[0]) > seconds(String(props.min))) ? currentValue[0] : props.min, onChange: (next) => update(1, next) })
@@ -7034,7 +7071,7 @@ function TreeSelect({
   searchPlaceholder = "\u641C\u7D22\u8282\u70B9",
   maxTagCount = 3,
   disabled = false,
-  size = "medium",
+  size: sizeProp,
   status = "default",
   className = "",
   onChange,
@@ -7061,6 +7098,7 @@ function TreeSelect({
   onDeselect,
   ...props
 }) {
+  const size = useControlSize(sizeProp);
   const rootRef = (0, import_react32.useRef)(null);
   const popupRef = (0, import_react32.useRef)(null);
   const nodeIndex = (0, import_react32.useMemo)(() => {
@@ -7453,6 +7491,7 @@ var TextArea = (0, import_react34.forwardRef)(function TextArea2({
   label,
   hint,
   status = "default",
+  size: sizeProp,
   showCount = false,
   placeholder,
   placeholderMode,
@@ -7465,6 +7504,7 @@ var TextArea = (0, import_react34.forwardRef)(function TextArea2({
   onChange,
   ...props
 }, ref) {
+  const size = useControlSize(sizeProp);
   const fallbackId = (0, import_react34.useId)();
   const textAreaId = id ?? fallbackId;
   const [uncontrolledValue, setUncontrolledValue] = (0, import_react34.useState)(() => defaultValue === void 0 ? "" : String(defaultValue));
@@ -7476,7 +7516,7 @@ var TextArea = (0, import_react34.forwardRef)(function TextArea2({
     setUncontrolledValue(event.target.value);
     onChange?.(event);
   }
-  const control = /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("span", { className: `sia-textarea-control sia-textarea-control--${status}${floating.className}${disabled ? " is-disabled" : ""}`, children: [
+  const control = /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("span", { className: `sia-textarea-control sia-textarea-control--${size} sia-textarea-control--${status}${floating.className}${disabled ? " is-disabled" : ""}`, children: [
     /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
       "textarea",
       {
@@ -8067,7 +8107,7 @@ function MarkdownEditor({
         width: "100%",
         height: "100%",
         minHeight: typeof minHeight === "number" ? minHeight : void 0,
-        placeholder,
+        placeholder: floating.enabled ? "" : placeholder,
         cdn: assetBaseUrl,
         cache: { enable: false },
         toolbar,
@@ -8147,7 +8187,7 @@ function MarkdownEditor({
       if (editorRef.current === createdEditor) editorRef.current = null;
       if (editorInitialized) createdEditor?.destroy();
     };
-  }, [ariaLabel, assetBaseUrl, hasImageUpload, minHeight, mode, placeholder]);
+  }, [ariaLabel, assetBaseUrl, hasImageUpload, minHeight, mode, placeholder, floating.enabled]);
   (0, import_react36.useEffect)(() => {
     const editor = editorRef.current;
     if (!editor || value === void 0) return;
@@ -9328,7 +9368,7 @@ var InputNumber = (0, import_react39.forwardRef)(function InputNumber2({
   max,
   step = 1,
   precision,
-  size = "medium",
+  size: sizeProp,
   status = "default",
   prefix,
   suffix,
@@ -9343,6 +9383,7 @@ var InputNumber = (0, import_react39.forwardRef)(function InputNumber2({
   onKeyDown,
   ...props
 }, forwardedRef) {
+  const size = useControlSize(sizeProp);
   const fallbackId = (0, import_react39.useId)();
   const inputId = id ?? fallbackId;
   const localRef = (0, import_react39.useRef)(null);
@@ -11549,13 +11590,14 @@ function orderColumnSettings(items) {
 }
 function ColumnSettingPanel({ open, items, columns, loading, loadError, onRetry, onClose, onApply }) {
   const [draft, setDraft] = (0, import_react44.useState)(items);
-  const drag = (0, import_react44.useRef)(null);
-  const [draggingKey, setDraggingKey] = (0, import_react44.useState)(null);
+  const listRef = (0, import_react44.useRef)(null);
+  const cancelDrag = (0, import_react44.useRef)(null);
+  const [preview, setPreview] = (0, import_react44.useState)(null);
   (0, import_react44.useEffect)(() => {
+    cancelDrag.current?.();
     if (open) setDraft(orderColumnSettings(items));
-    drag.current = null;
-    setDraggingKey(null);
   }, [items, open]);
+  (0, import_react44.useEffect)(() => () => cancelDrag.current?.(), []);
   const labels = new Map(flattenTableColumns(columns).map((column) => [column.key, getColumnLabel(column)]));
   const visibleCount = draft.filter((item) => item.visible).length;
   function setFixed(key, fixed) {
@@ -11569,20 +11611,107 @@ function ColumnSettingPanel({ open, items, columns, loading, loadError, onRetry,
       return orderColumnSettings(next);
     });
   }
-  function previewMove(key, clientY, element) {
-    const active = drag.current;
-    if (!active || active.key === key || loading || loadError) return;
-    const rect = element.getBoundingClientRect();
-    setDraft((previous) => {
-      const from = previous.findIndex((entry) => entry.key === active.key);
-      const to = previous.findIndex((entry) => entry.key === key);
-      if (from < 0 || to < 0 || previous[from].fixed !== previous[to].fixed) return previous;
-      if (from < to ? clientY < rect.top + rect.height / 2 : clientY > rect.top + rect.height / 2) return previous;
-      const next = [...previous];
-      const [moved] = next.splice(from, 1);
-      next.splice(to, 0, moved);
-      return orderColumnSettings(next);
-    });
+  function startSort(event, key) {
+    if (loading || loadError || event.button !== 0 || event.target.closest("button, input, label")) return;
+    const list = listRef.current;
+    if (!list) return;
+    cancelDrag.current?.();
+    const original = [...draft];
+    const from = original.findIndex((item) => item.key === key);
+    const elements = Array.from(list.querySelectorAll(".sia-table-settings__item"));
+    const rects = elements.map((element) => element.getBoundingClientRect());
+    const gap = parseFloat(getComputedStyle(list).rowGap) || 0;
+    const positions = original.map((_, index) => index);
+    const startY = event.clientY;
+    let lastY = startY;
+    let moved = false;
+    let next = original;
+    let frame = 0;
+    let scrollParent = list.parentElement;
+    while (scrollParent && !(scrollParent.scrollHeight > scrollParent.clientHeight && /auto|scroll/.test(getComputedStyle(scrollParent).overflowY))) scrollParent = scrollParent.parentElement;
+    const initialScroll = scrollParent?.scrollTop ?? 0;
+    const target = event.currentTarget;
+    target.setPointerCapture(event.pointerId);
+    const previousUserSelect = document.body.style.userSelect;
+    function update() {
+      const dy = lastY - startY + (scrollParent?.scrollTop ?? 0) - initialScroll;
+      if (!moved && Math.abs(dy) < 4) return;
+      moved = true;
+      document.body.style.userSelect = "none";
+      const center = rects[from].top + rects[from].height / 2 + dy;
+      let to = from;
+      for (const index of positions) {
+        if (index > from && center > rects[index].top + rects[index].height / 2) to = index;
+        if (index < from && center < rects[index].top + rects[index].height / 2) {
+          to = index;
+          break;
+        }
+      }
+      next = [...original];
+      const [item] = next.splice(from, 1);
+      next.splice(to, 0, { ...item, fixed: original[to].fixed });
+      const offsets = {};
+      let top = rects[0].top;
+      for (const entry of next) {
+        const index = original.findIndex((item2) => item2.key === entry.key);
+        offsets[entry.key] = entry.key === key ? dy : top - rects[index].top;
+        top += rects[index].height + gap;
+      }
+      setPreview({ key, fixed: original[to].fixed, offsets });
+    }
+    function tick() {
+      if (moved && scrollParent) {
+        const bounds = scrollParent.getBoundingClientRect();
+        const delta = lastY < bounds.top + 40 ? -10 : lastY > bounds.bottom - 40 ? 10 : 0;
+        if (delta) {
+          scrollParent.scrollTop += delta;
+          update();
+        }
+      }
+      frame = requestAnimationFrame(tick);
+    }
+    function move(moveEvent) {
+      if (moveEvent.pointerId !== event.pointerId) return;
+      lastY = moveEvent.clientY;
+      update();
+    }
+    function finish(commit) {
+      document.removeEventListener("pointermove", move);
+      document.removeEventListener("pointerup", up);
+      document.removeEventListener("pointercancel", cancel);
+      document.removeEventListener("keydown", escape, true);
+      window.removeEventListener("blur", cancel);
+      cancelAnimationFrame(frame);
+      if (target.hasPointerCapture(event.pointerId)) target.releasePointerCapture(event.pointerId);
+      document.body.style.userSelect = previousUserSelect;
+      cancelDrag.current = null;
+      setPreview(null);
+      if (commit && moved) setDraft(orderColumnSettings(next));
+    }
+    function up(upEvent) {
+      if (upEvent.pointerId === event.pointerId) {
+        lastY = upEvent.clientY;
+        update();
+        finish(true);
+      }
+    }
+    function cancel() {
+      finish(false);
+    }
+    function escape(event2) {
+      if (event2.key === "Escape") {
+        event2.preventDefault();
+        event2.stopPropagation();
+        cancel();
+      }
+    }
+    cancelDrag.current = cancel;
+    document.addEventListener("pointermove", move);
+    document.addEventListener("pointerup", up);
+    document.addEventListener("pointercancel", cancel);
+    document.addEventListener("keydown", escape, true);
+    window.addEventListener("blur", cancel);
+    frame = requestAnimationFrame(tick);
   }
   return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(Drawer2, { open, title: "\u5217\u8BBE\u7F6E", size: 440, onOpenChange: (next) => {
     if (!next) onClose();
@@ -11606,40 +11735,20 @@ function ColumnSettingPanel({ open, items, columns, loading, loadError, onRetry,
           "\uFF09"
         ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "sia-table-settings__list", onDragOver: (event) => {
-        if (drag.current) event.preventDefault();
-      }, onDrop: (event) => {
-        event.preventDefault();
-        if (drag.current) drag.current.dropped = true;
-      }, children: draft.map((item) => /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { ref: listRef, className: `sia-table-settings__list${preview ? " is-sorting" : ""}`, children: draft.map((item) => /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
         "div",
         {
           "data-column-key": item.key,
-          className: `sia-table-settings__item${draggingKey === item.key ? " is-dragging" : ""}`,
-          draggable: !loading && !loadError,
-          onDragStart: (event) => {
-            drag.current = { key: item.key, original: draft, dropped: false };
-            event.dataTransfer.effectAllowed = "move";
-            event.dataTransfer.setData("text/plain", item.key);
-            setDraggingKey(item.key);
-          },
-          onDragOver: (event) => {
-            event.preventDefault();
-            event.dataTransfer.dropEffect = "move";
-            previewMove(item.key, event.clientY, event.currentTarget);
-          },
-          onDragEnd: () => {
-            if (drag.current && !drag.current.dropped) setDraft(drag.current.original);
-            drag.current = null;
-            setDraggingKey(null);
-          },
+          className: `sia-table-settings__item${preview?.key === item.key ? " is-dragging" : ""}`,
+          style: preview ? { transform: `translateY(${preview.offsets[item.key] ?? 0}px)` } : void 0,
+          onPointerDown: (event) => startSort(event, item.key),
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Icon, { name: "menu", size: 15 }),
             /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(TableCheckbox, { label: `\u663E\u793A${labels.get(item.key) ?? item.key}\u5217`, checked: item.visible, onChange: (checked) => setDraft((previous) => previous.map((entry) => entry.key === item.key ? { ...entry, visible: checked } : entry)) }),
             /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "sia-table-settings__name", title: labels.get(item.key) ?? item.key, children: labels.get(item.key) ?? item.key }),
             /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "sia-table-settings__actions", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Button, { size: "small", variant: item.fixed === "left" ? "primary" : "text", "aria-label": "\u5DE6\u56FA\u5B9A", onClick: () => setFixed(item.key, item.fixed === "left" ? void 0 : "left"), children: "\u5DE6" }),
-              /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Button, { size: "small", variant: item.fixed === "right" ? "primary" : "text", "aria-label": "\u53F3\u56FA\u5B9A", onClick: () => setFixed(item.key, item.fixed === "right" ? void 0 : "right"), children: "\u53F3" })
+              /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Button, { size: "small", variant: (preview?.key === item.key ? preview.fixed : item.fixed) === "left" ? "primary" : "text", "aria-label": "\u5DE6\u56FA\u5B9A", onClick: () => setFixed(item.key, item.fixed === "left" ? void 0 : "left"), children: "\u5DE6" }),
+              /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Button, { size: "small", variant: (preview?.key === item.key ? preview.fixed : item.fixed) === "right" ? "primary" : "text", "aria-label": "\u53F3\u56FA\u5B9A", onClick: () => setFixed(item.key, item.fixed === "right" ? void 0 : "right"), children: "\u53F3" })
             ] })
           ]
         },
@@ -20594,7 +20703,7 @@ var InputSelect = (0, import_react86.forwardRef)(function InputSelect2({
   showValue = false,
   placeholder = "\u8BF7\u9009\u62E9",
   placeholderMode,
-  size = "medium",
+  size: sizeProp,
   status,
   disabled = false,
   loading = false,
@@ -20609,6 +20718,7 @@ var InputSelect = (0, import_react86.forwardRef)(function InputSelect2({
   onOpenChange,
   ...inputProps
 }, forwardedRef) {
+  const size = useControlSize(sizeProp);
   const [internal, setInternal] = (0, import_react86.useState)(defaultValue);
   const current = value !== void 0 ? value : internal;
   const values = current == null ? [] : Array.isArray(current) ? current : [current];