@canvas-components/react-components 0.1.5 → 0.2.1

package/dist/index.cjs

@@ -47,7 +47,7 @@ function styleInject(css, { insertAt } = {}) {
 }
 
 // src/styles/variables.css
-styleInject(":root {\n  --canvas-react-color-primary: #1677ff;\n  --canvas-react-color-primary-hover: #4096ff;\n  --canvas-react-color-border: #d9d9d9;\n  --canvas-react-color-border-strong: #bfbfbf;\n  --canvas-react-color-text: #1f2937;\n  --canvas-react-color-text-muted: #6b7280;\n  --canvas-react-color-bg: #ffffff;\n  --canvas-react-color-bg-soft: #f5f5f5;\n  --canvas-react-color-bg-hover: #f3f4f6;\n  --canvas-react-color-bg-active: #e6f4ff;\n  --canvas-react-shadow-focus: 0 0 0 2px rgba(22, 119, 255, 0.12);\n  --canvas-react-shadow-popup: 0 8px 24px rgba(15, 23, 42, 0.16);\n  --canvas-react-radius-sm: 6px;\n  --canvas-react-radius-md: 8px;\n  --canvas-react-control-height: 32px;\n  --canvas-react-font-size: 14px;\n  --canvas-react-control-padding-inline: 11px;\n  --canvas-react-control-padding-block: 0px;\n  --canvas-react-content-zoom: 1;\n}\n");
+styleInject(":root {\n  --canvas-react-color-primary: #1677ff;\n  --canvas-react-color-primary-hover: #4096ff;\n  --canvas-react-color-border: #d9d9d9;\n  --canvas-react-color-border-strong: #bfbfbf;\n  --canvas-react-color-text: #1f2937;\n  --canvas-react-color-text-muted: #6b7280;\n  --canvas-react-color-bg: #ffffff;\n  --canvas-react-color-bg-soft: #f5f5f5;\n  --canvas-react-color-bg-hover: #f3f4f6;\n  --canvas-react-color-bg-active: #e6f4ff;\n  --canvas-react-shadow-focus: 0 0 0 2px rgba(22, 119, 255, 0.12);\n  --canvas-react-shadow-popup: 0 8px 24px rgba(15, 23, 42, 0.16);\n  --canvas-react-radius-sm: 6px;\n  --canvas-react-radius-md: 8px;\n  --canvas-react-control-height: 32px;\n  --canvas-react-font-size: 14px;\n  --canvas-react-control-padding-inline: 11px;\n  --canvas-react-control-padding-block: 0px;\n  --canvas-react-content-zoom: 1;\n}\n*,\n*::before,\n*::after {\n  scrollbar-width: thin;\n  scrollbar-color: #aeb4bd transparent;\n}\n*::-webkit-scrollbar {\n  width: 8px;\n  height: 8px;\n}\n*::-webkit-scrollbar-track {\n  background: transparent;\n}\n*::-webkit-scrollbar-thumb {\n  min-height: 32px;\n  border: 2px solid transparent;\n  border-radius: 999px;\n  background: #aeb4bd;\n  background-clip: content-box;\n}\n*::-webkit-scrollbar-thumb:hover {\n  background: #8f98a5;\n  background-clip: content-box;\n}\n*::-webkit-scrollbar-corner {\n  background: transparent;\n}\n");
 
 // src/shared/class-names.ts
 function joinClassNames(...values) {
@@ -624,6 +624,770 @@ function resolvePopupSurfaceRect(element, contentScale = 1) {
   };
 }
 
+// src/components/virtual-list/style.css
+styleInject('@import "../../styles/variables.css";\n.canvas-react-virtual-list {\n  position: relative;\n  overflow-y: auto;\n}\n.canvas-react-virtual-list-inner {\n  position: relative;\n  min-width: 100%;\n}\n.canvas-react-virtual-list-empty {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  padding: 0 11px;\n  color: #9ca3af;\n  font-size: var(--canvas-react-font-size);\n}\n');
+var ReactVirtualList = React.forwardRef(function ReactVirtualListInner(props, ref) {
+  const {
+    className,
+    empty,
+    height,
+    innerClassName,
+    itemHeight,
+    itemKey,
+    items,
+    overscan = 2,
+    renderItem,
+    style,
+    virtual = true
+  } = props;
+  const hostRef = React.useRef(null);
+  const [scrollTop, setScrollTop] = React.useState(0);
+  const useVirtual = virtual && items.length * itemHeight > height;
+  const startIndex = useVirtual ? Math.max(0, Math.floor(scrollTop / itemHeight) - overscan) : 0;
+  const endIndex = useVirtual ? Math.min(
+    items.length - 1,
+    Math.ceil((scrollTop + height) / itemHeight) + overscan
+  ) : items.length - 1;
+  const visibleItems = React.useMemo(
+    () => items.slice(startIndex, endIndex + 1),
+    [endIndex, items, startIndex]
+  );
+  React.useImperativeHandle(ref, () => ({
+    scrollToIndex: (index) => {
+      const element = hostRef.current;
+      if (!element || index < 0) {
+        return;
+      }
+      const itemTop = index * itemHeight;
+      const itemBottom = itemTop + itemHeight;
+      const viewportTop = element.scrollTop;
+      const viewportBottom = viewportTop + height;
+      if (itemTop < viewportTop) {
+        element.scrollTop = itemTop;
+        return;
+      }
+      if (itemBottom > viewportBottom) {
+        element.scrollTop = itemBottom - height;
+      }
+    },
+    element: hostRef.current
+  }));
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref: hostRef,
+      className: joinClassNames(`${REACT_COMPONENT_PREFIX}-virtual-list`, className),
+      style: { height, ...style },
+      onScroll: (event) => {
+        setScrollTop(event.currentTarget.scrollTop);
+      },
+      children: items.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${REACT_COMPONENT_PREFIX}-virtual-list-empty`, children: empty ?? "\u6682\u65E0\u6570\u636E" }) : /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: joinClassNames(
+            `${REACT_COMPONENT_PREFIX}-virtual-list-inner`,
+            innerClassName
+          ),
+          style: { height: items.length * itemHeight },
+          children: visibleItems.map((item, index) => {
+            const itemIndex = startIndex + index;
+            return renderItem(item, itemIndex, {
+              style: useVirtual ? {
+                position: "absolute",
+                top: itemIndex * itemHeight,
+                left: 0,
+                right: 0,
+                height: itemHeight
+              } : {
+                height: itemHeight
+              }
+            });
+          })
+        }
+      )
+    }
+  );
+});
+
+// src/components/select/style.css
+styleInject('@import "../../styles/variables.css";\n.canvas-react-select-wrap {\n  position: relative;\n  display: inline-flex;\n  width: 100%;\n  height: 100%;\n}\n.canvas-react-select {\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: center;\n  width: 100%;\n  min-width: 0;\n  height: var(--canvas-react-control-height);\n  padding: var(--canvas-react-control-padding-block, 0px) var(--canvas-react-control-padding-inline, 11px);\n  border: 1px solid var(--canvas-react-color-border);\n  border-radius: var(--canvas-react-radius-sm);\n  background: var(--canvas-react-color-bg);\n  color: var(--canvas-react-color-text);\n  font-size: var(--canvas-react-font-size);\n  outline: none;\n  cursor: pointer;\n  transition:\n    border-color 0.2s ease,\n    box-shadow 0.2s ease,\n    background-color 0.2s ease;\n}\n.canvas-react-select-input-wrap {\n  flex: 1 1 auto;\n  width: 100%;\n  height: 100%;\n  border: none;\n  background: transparent;\n  box-shadow: none;\n}\n.canvas-react-select .canvas-react-input-affix-wrapper {\n  height: 100%;\n  min-height: 0;\n}\n.canvas-react-select-input-wrap:hover,\n.canvas-react-select-input-wrap:focus-within {\n  border-color: transparent;\n  box-shadow: none;\n}\n.canvas-react-select-input {\n  width: 100%;\n  min-width: 0;\n  height: 100%;\n  padding: 0;\n  line-height: normal;\n}\n.canvas-react-select-input::placeholder {\n  color: #9ca3af;\n}\n.canvas-react-select:hover {\n  border-color: var(--canvas-react-color-primary-hover);\n}\n.canvas-react-select:focus {\n  border-color: var(--canvas-react-color-primary);\n  box-shadow: var(--canvas-react-shadow-focus);\n}\n.canvas-react-select-open {\n  border-color: var(--canvas-react-color-primary);\n  box-shadow: var(--canvas-react-shadow-focus);\n}\n.canvas-react-select-disabled {\n  color: #9ca3af;\n  background: #fafafa;\n  cursor: not-allowed;\n}\n.canvas-react-select-actions {\n  position: relative;\n  display: inline-flex;\n  flex: 0 0 auto;\n  align-items: center;\n  justify-content: center;\n  width: 1em;\n  min-width: 12px;\n  height: 1em;\n  min-height: 12px;\n  margin-left: max(6px, calc(var(--canvas-react-control-padding-inline, 11px) * 0.5));\n}\n.canvas-react-select-arrow {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: 0.5em;\n  height: 0.5em;\n  min-width: 6px;\n  min-height: 6px;\n  border-right: 1.5px solid var(--canvas-react-color-text-muted);\n  border-bottom: 1.5px solid var(--canvas-react-color-text-muted);\n  transform: translate(-50%, -58%) rotate(45deg);\n  opacity: 1;\n  transition:\n    opacity 0.18s ease,\n    transform 0.18s ease,\n    border-color 0.18s ease;\n}\n.canvas-react-select:hover .canvas-react-select-arrow,\n.canvas-react-select-open .canvas-react-select-arrow {\n  border-color: #6b7280;\n}\n.canvas-react-select-arrow-open {\n  border-color: #6b7280;\n  transform: translate(-50%, -42%) rotate(225deg);\n}\n.canvas-react-select-clear {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 12px;\n  height: 12px;\n  padding: 0;\n  border: none;\n  background: transparent;\n  color: #9ca3af;\n  opacity: 0;\n  pointer-events: none;\n  cursor: pointer;\n  transform: translate(-50%, -50%) rotate(0deg);\n  transition:\n    color 0.2s ease,\n    opacity 0.2s ease,\n    transform 0.18s ease;\n}\n.canvas-react-select-clear:hover {\n  color: #6b7280;\n  transform: translate(-50%, -50%) rotate(90deg);\n}\n.canvas-react-select:hover .canvas-react-select-clear,\n.canvas-react-select-open .canvas-react-select-clear,\n.canvas-react-select:focus-within .canvas-react-select-clear {\n  opacity: 1;\n  pointer-events: auto;\n}\n.canvas-react-select:hover .canvas-react-select-actions-clearable .canvas-react-select-arrow,\n.canvas-react-select-open .canvas-react-select-actions-clearable .canvas-react-select-arrow,\n.canvas-react-select:focus-within .canvas-react-select-actions-clearable .canvas-react-select-arrow {\n  opacity: 0;\n}\n.canvas-react-select-clear-icon,\n.canvas-react-select-clear-icon::before {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: 8px;\n  height: 1.25px;\n  margin-top: -0.625px;\n  margin-left: -4px;\n  border-radius: 999px;\n  background: currentColor;\n  content: "";\n}\n.canvas-react-select-clear-icon {\n  transform: rotate(45deg);\n}\n.canvas-react-select-clear-icon::before {\n  transform: rotate(90deg);\n}\n.canvas-react-select-dropdown {\n  padding: 4px;\n}\n.canvas-react-select-list {\n  position: relative;\n  overflow-y: auto;\n}\n.canvas-react-select-list-inner {\n  position: relative;\n}\n.canvas-react-select-option {\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  width: 100%;\n  padding: 0 11px;\n  border-radius: var(--canvas-react-radius-sm);\n  color: var(--canvas-react-color-text);\n  font-size: var(--canvas-react-font-size);\n  cursor: pointer;\n}\n.canvas-react-select-option:hover,\n.canvas-react-select-option-active {\n  background: var(--canvas-react-color-bg-hover);\n}\n.canvas-react-select-option-selected {\n  background: var(--canvas-react-color-bg-active);\n}\n.canvas-react-select-option-searching {\n  color: var(--canvas-react-color-text);\n}\n.canvas-react-select-option-searching:hover,\n.canvas-react-select-option-searching.canvas-react-select-option-active {\n  background: var(--canvas-react-color-bg-active);\n}\n.canvas-react-select-option-disabled {\n  color: #9ca3af;\n  cursor: not-allowed;\n}\n.canvas-react-select-option-highlight {\n  color: var(--canvas-react-color-primary);\n  font-weight: 600;\n}\n.canvas-react-select-option-disabled .canvas-react-select-option-highlight {\n  color: inherit;\n}\n.canvas-react-select-empty {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  padding: 0 11px;\n  color: #9ca3af;\n  font-size: var(--canvas-react-font-size);\n}\n');
+var ReactSelect = React.forwardRef(
+  function ReactSelect2(props, ref) {
+    const {
+      autoFocus,
+      allowCustomValue = false,
+      className,
+      disabled,
+      filterOption,
+      onBlur,
+      onChange,
+      onInputValueChange,
+      onPressEnter,
+      onFocus,
+      onKeyDown,
+      options,
+      optionHeight = 32,
+      listHeight = 224,
+      placeholder,
+      popupClassName,
+      popupZIndex,
+      allowClear = true,
+      showArrow = true,
+      showSearch = false,
+      style,
+      value,
+      virtual = true,
+      ...restProps
+    } = props;
+    const triggerRef = React.useRef(null);
+    const inputRef = React.useRef(null);
+    const listRef = React.useRef(null);
+    const skipFocusOpenRef = React.useRef(false);
+    const [open, setOpen] = React.useState(false);
+    const selectedIndex = React.useMemo(
+      () => options.findIndex(
+        (option) => String(option.value) === String(value ?? "")
+      ),
+      [options, value]
+    );
+    const selectedOption = selectedIndex >= 0 ? options[selectedIndex] : void 0;
+    const [keyword, setKeyword] = React.useState("");
+    const [searching, setSearching] = React.useState(false);
+    const searchKeyword = searching ? keyword : "";
+    const filteredOptions = React.useMemo(
+      () => filterSelectOptions(options, searchKeyword, showSearch, filterOption),
+      [filterOption, options, searchKeyword, showSearch]
+    );
+    const [activeIndex, setActiveIndex] = React.useState(() => {
+      return selectedIndex >= 0 ? selectedIndex : 0;
+    });
+    React.useImperativeHandle(ref, () => inputRef.current);
+    React.useEffect(() => {
+      if (autoFocus) {
+        inputRef.current?.focus();
+      }
+    }, [autoFocus]);
+    React.useLayoutEffect(() => {
+      if (open && showSearch && !searching) {
+        inputRef.current?.select();
+      }
+    }, [open, searching, showSearch]);
+    React.useEffect(() => {
+      const nextIndex = filteredOptions.findIndex(
+        (option) => String(option.value) === String(value ?? "")
+      );
+      setActiveIndex(nextIndex >= 0 ? nextIndex : 0);
+    }, [filteredOptions, value]);
+    React.useEffect(() => {
+      if (!open) {
+        return;
+      }
+      listRef.current?.scrollToIndex(activeIndex);
+    }, [activeIndex, listHeight, open, optionHeight]);
+    const selectOption = (option, trigger) => {
+      onChange?.(String(option.value), { trigger });
+      setKeyword(option.label);
+      setSearching(false);
+      setOpen(false);
+      inputRef.current?.focus();
+    };
+    const hasValue = value != null && String(value).length > 0;
+    const showClear = allowClear && !disabled && hasValue;
+    const handleClear = (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+      skipFocusOpenRef.current = true;
+      setKeyword("");
+      setSearching(false);
+      setOpen(false);
+      onChange?.("", { trigger: "clear" });
+      inputRef.current?.blur();
+    };
+    const openSelect = () => {
+      setKeyword(
+        resolveSelectKeywordOnOpen(
+          selectedOption?.label ?? (allowCustomValue ? String(value ?? "") : void 0)
+        )
+      );
+      setSearching(false);
+      setOpen(true);
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: `${REACT_COMPONENT_PREFIX}-select-wrap`, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          ref: triggerRef,
+          className: joinClassNames(
+            `${REACT_COMPONENT_PREFIX}-select`,
+            open && `${REACT_COMPONENT_PREFIX}-select-open`,
+            disabled && `${REACT_COMPONENT_PREFIX}-select-disabled`,
+            className
+          ),
+          style,
+          onClick: (event) => {
+            if (disabled) {
+              return;
+            }
+            if (event.target?.closest(
+              `.${REACT_COMPONENT_PREFIX}-select-clear`
+            )) {
+              return;
+            }
+            if (event.target?.closest(
+              `.${REACT_COMPONENT_PREFIX}-select-arrow`
+            )) {
+              return;
+            }
+            inputRef.current?.focus();
+            if (!open) {
+              openSelect();
+            }
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              ReactInput,
+              {
+                ...restProps,
+                ref: inputRef,
+                allowClear: false,
+                disabled,
+                readOnly: !showSearch,
+                value: open && showSearch ? keyword : selectedOption?.label ?? (allowCustomValue ? String(value ?? "") : ""),
+                className: joinClassNames(`${REACT_COMPONENT_PREFIX}-select-input`),
+                wrapperClassName: `${REACT_COMPONENT_PREFIX}-select-input-wrap`,
+                placeholder,
+                onFocus: (event) => {
+                  if (skipFocusOpenRef.current) {
+                    skipFocusOpenRef.current = false;
+                    onFocus?.(event);
+                    return;
+                  }
+                  if (!open) {
+                    openSelect();
+                  }
+                  onFocus?.(event);
+                },
+                onBlur: (event) => {
+                  setOpen(false);
+                  if ((!keyword.trim() || !showSearch) && selectedOption) {
+                    setKeyword(selectedOption.label);
+                  }
+                  onBlur?.(event);
+                },
+                onChange: (event) => {
+                  if (!showSearch) {
+                    return;
+                  }
+                  setKeyword(event.target.value);
+                  setSearching(true);
+                  onInputValueChange?.(event.target.value);
+                  setOpen(true);
+                },
+                onKeyDown: (event) => {
+                  onKeyDown?.(event);
+                  if (event.defaultPrevented) {
+                    return;
+                  }
+                  if (disabled) {
+                    return;
+                  }
+                  if (event.key === "ArrowDown") {
+                    event.preventDefault();
+                    if (!open) {
+                      openSelect();
+                      return;
+                    }
+                    setActiveIndex(
+                      (prev) => Math.min(prev + 1, Math.max(filteredOptions.length - 1, 0))
+                    );
+                    return;
+                  }
+                  if (event.key === "ArrowUp") {
+                    event.preventDefault();
+                    if (!open) {
+                      openSelect();
+                      return;
+                    }
+                    setActiveIndex((prev) => Math.max(prev - 1, 0));
+                    return;
+                  }
+                  if (event.key === "Enter") {
+                    event.preventDefault();
+                    if (!open) {
+                      openSelect();
+                      return;
+                    }
+                    const targetOption = resolveSelectEnterOption(filteredOptions);
+                    if (targetOption && !targetOption.disabled) {
+                      selectOption(targetOption, "keyboard");
+                    } else if (allowCustomValue && keyword.trim()) {
+                      void Promise.resolve(onPressEnter?.(keyword.trim()));
+                    }
+                    return;
+                  }
+                  if (event.key === "Escape") {
+                    setKeyword(selectedOption?.label ?? "");
+                    setSearching(false);
+                    setOpen(false);
+                  }
+                }
+              }
+            ),
+            showClear || showArrow ? /* @__PURE__ */ jsxRuntime.jsxs(
+              "span",
+              {
+                className: joinClassNames(
+                  `${REACT_COMPONENT_PREFIX}-select-actions`,
+                  showClear && `${REACT_COMPONENT_PREFIX}-select-actions-clearable`
+                ),
+                children: [
+                  showClear ? /* @__PURE__ */ jsxRuntime.jsx(
+                    "button",
+                    {
+                      type: "button",
+                      className: `${REACT_COMPONENT_PREFIX}-select-clear`,
+                      "aria-label": "\u6E05\u7A7A",
+                      tabIndex: -1,
+                      onMouseDown: (event) => {
+                        event.preventDefault();
+                        event.stopPropagation();
+                      },
+                      onClick: handleClear,
+                      children: /* @__PURE__ */ jsxRuntime.jsx(
+                        "span",
+                        {
+                          className: `${REACT_COMPONENT_PREFIX}-select-clear-icon`
+                        }
+                      )
+                    }
+                  ) : null,
+                  showArrow ? /* @__PURE__ */ jsxRuntime.jsx(
+                    "span",
+                    {
+                      className: joinClassNames(
+                        `${REACT_COMPONENT_PREFIX}-select-arrow`,
+                        open && `${REACT_COMPONENT_PREFIX}-select-arrow-open`
+                      )
+                    }
+                  ) : null
+                ]
+              }
+            ) : null
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ReactPopup,
+        {
+          open,
+          anchorRef: triggerRef,
+          matchAnchorWidth: true,
+          zIndex: popupZIndex,
+          surfaceClassName: joinClassNames(
+            `${REACT_COMPONENT_PREFIX}-select-dropdown`,
+            popupClassName
+          ),
+          onOpenChange: setOpen,
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            ReactVirtualList,
+            {
+              ref: listRef,
+              items: filteredOptions,
+              height: Math.min(
+                listHeight,
+                Math.max(filteredOptions.length, 1) * optionHeight
+              ),
+              itemHeight: optionHeight,
+              virtual,
+              className: `${REACT_COMPONENT_PREFIX}-select-list`,
+              innerClassName: `${REACT_COMPONENT_PREFIX}-select-list-inner`,
+              empty: /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${REACT_COMPONENT_PREFIX}-select-empty`, children: "\u6682\u65E0\u6570\u636E" }),
+              itemKey: (option) => String(option.value),
+              renderItem: (option, optionIndex, meta) => {
+                const isSelected = String(option.value) === String(value ?? "");
+                const isActive = optionIndex === activeIndex;
+                const isSearching = showSearch && searchKeyword.trim().length > 0;
+                return /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: joinClassNames(
+                      `${REACT_COMPONENT_PREFIX}-select-option`,
+                      isSelected && `${REACT_COMPONENT_PREFIX}-select-option-selected`,
+                      isActive && `${REACT_COMPONENT_PREFIX}-select-option-active`,
+                      isSearching && `${REACT_COMPONENT_PREFIX}-select-option-searching`,
+                      option.disabled && `${REACT_COMPONENT_PREFIX}-select-option-disabled`
+                    ),
+                    style: meta.style,
+                    onMouseDown: (event) => {
+                      event.preventDefault();
+                    },
+                    onMouseEnter: () => {
+                      setActiveIndex(optionIndex);
+                    },
+                    onClick: () => {
+                      if (option.disabled) {
+                        return;
+                      }
+                      selectOption(option, "mouse");
+                    },
+                    children: renderSelectOptionLabel(
+                      option.label,
+                      showSearch ? searchKeyword : ""
+                    )
+                  },
+                  String(option.value)
+                );
+              }
+            }
+          )
+        }
+      )
+    ] });
+  }
+);
+function filterSelectOptions(options, input, showSearch, filterOption) {
+  if (!showSearch) {
+    return options;
+  }
+  const search = input.trim();
+  if (!search) {
+    return options;
+  }
+  if (filterOption) {
+    return options.filter((option) => filterOption(search, option));
+  }
+  const normalizedSearch = search.toLowerCase();
+  return options.filter((option) => {
+    return option.label.toLowerCase().includes(normalizedSearch) || String(option.value).toLowerCase().includes(normalizedSearch);
+  });
+}
+function resolveSelectEnterOption(options) {
+  return options.find((option) => !option.disabled);
+}
+function resolveSelectKeywordOnOpen(selectedLabel) {
+  return selectedLabel ?? "";
+}
+function splitSelectOptionLabel(label, input) {
+  const search = input.trim();
+  if (!search) {
+    return [{ text: label, highlighted: false }];
+  }
+  const matcher = new RegExp(escapeRegExp(search), "gi");
+  const parts = [];
+  let cursor = 0;
+  let match = matcher.exec(label);
+  while (match) {
+    if (match.index > cursor) {
+      parts.push({
+        text: label.slice(cursor, match.index),
+        highlighted: false
+      });
+    }
+    parts.push({ text: match[0], highlighted: true });
+    cursor = match.index + match[0].length;
+    match = matcher.exec(label);
+  }
+  if (cursor < label.length) {
+    parts.push({ text: label.slice(cursor), highlighted: false });
+  }
+  return parts.length > 0 ? parts : [{ text: label, highlighted: false }];
+}
+function renderSelectOptionLabel(label, input) {
+  return splitSelectOptionLabel(label, input).map(
+    (part, index) => part.highlighted ? /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        className: `${REACT_COMPONENT_PREFIX}-select-option-highlight`,
+        children: part.text
+      },
+      `${part.text}-${index}`
+    ) : part.text
+  );
+}
+function escapeRegExp(value) {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+var operators = [
+  { label: "\u4E0D\u7B5B\u9009", value: "none" },
+  { label: "\u7B49\u4E8E", value: "eq" },
+  { label: "\u4E0D\u7B49\u4E8E", value: "neq" },
+  { label: "\u5927\u4E8E", value: "gt" },
+  { label: "\u5927\u4E8E\u7B49\u4E8E", value: "gte" },
+  { label: "\u5C0F\u4E8E", value: "lt" },
+  { label: "\u5C0F\u4E8E\u7B49\u4E8E", value: "lte" },
+  { label: "\u533A\u95F4", value: "between" },
+  { label: "\u4E0D\u5728\u533A\u95F4", value: "notBetween" },
+  { label: "\u5F00\u5934\u662F", value: "startsWith" },
+  { label: "\u5F00\u5934\u4E0D\u662F", value: "notStartsWith" },
+  { label: "\u7ED3\u5C3E\u662F", value: "endsWith" },
+  { label: "\u7ED3\u5C3E\u4E0D\u662F", value: "notEndsWith" },
+  { label: "\u5305\u542B", value: "includes" },
+  { label: "\u4E0D\u5305\u542B", value: "notIncludes" },
+  { label: "\u4E3A\u7A7A", value: "blank" },
+  { label: "\u4E0D\u4E3A\u7A7A", value: "notBlank" }
+];
+function ReactFilterPanel(props) {
+  const { request } = props;
+  const [draft, setDraft] = React.useState(request?.value ?? null);
+  const [tab, setTab] = React.useState(resolveTab(request?.value));
+  const [options, setOptions] = React.useState(request?.options ?? []);
+  const [loading, setLoading] = React.useState(Boolean(request?.loadOptions));
+  React.useEffect(() => {
+    setDraft(request?.value ?? null);
+    setTab(resolveTab(request?.value));
+    setOptions(request?.options ?? []);
+    setLoading(Boolean(request?.loadOptions));
+  }, [request]);
+  React.useEffect(() => {
+    if (!request?.loadOptions) return;
+    const controller = new AbortController();
+    setLoading(true);
+    void Promise.resolve(request.loadOptions(controller.signal)).then((items) => {
+      if (!controller.signal.aborted) {
+        setOptions(items);
+        setLoading(false);
+      }
+    }).catch(() => {
+      if (!controller.signal.aborted) {
+        setOptions([]);
+        setLoading(false);
+      }
+    });
+    return () => controller.abort();
+  }, [request]);
+  const visibleOptions = React.useMemo(() => {
+    const values = options.filter((item) => item.kind !== "all");
+    const keyword = draft?.keyword.trim().toLowerCase() ?? "";
+    if (!keyword) return values;
+    return values.filter((item) => {
+      const label = item.label.toLowerCase();
+      const value = item.value.toLowerCase();
+      return draft?.searchExact ? label === keyword || value === keyword : label.includes(keyword) || value.includes(keyword);
+    });
+  }, [draft?.keyword, draft?.searchExact, options]);
+  if (!request || !draft) return null;
+  const selected = new Set(draft.selectedKeys ?? []);
+  const visibleKeys = visibleOptions.map((item) => item.value);
+  const selectedCount = visibleKeys.filter((value) => selected.has(value)).length;
+  const allChecked = visibleKeys.length > 0 && selectedCount === visibleKeys.length;
+  const allCount = request.options.find((item) => item.kind === "all")?.count ?? visibleOptions.filter((item) => item.kind === "value").reduce((sum, item) => sum + item.count, 0);
+  const update = (patch) => setDraft((current) => ({ ...current ?? request.value, ...patch }));
+  const toggle = (keys, checked) => {
+    const next = new Set(draft.selectedKeys ?? []);
+    keys.forEach((key) => checked ? next.add(key) : next.delete(key));
+    const value = { ...draft, filterType: "value", selectedKeys: Array.from(next) };
+    setDraft(value);
+    if (request.filterOptionImmediateApply) request.onApply(value);
+  };
+  const apply = () => {
+    request.onApply({ ...draft, filterType: tab });
+    request.onClose();
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ReactPopup,
+    {
+      open: true,
+      anchorRect: request.anchorRect,
+      offset: 8,
+      matchAnchorWidth: false,
+      minWidth: 300,
+      onOpenChange: (open) => {
+        if (!open) request.onClose();
+      },
+      surfaceStyle: { width: 300, height: 460, padding: 12, overflow: "hidden", boxSizing: "border-box" },
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { height: "100%", display: "flex", flexDirection: "column", minHeight: 0 }, children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { fontSize: 14, fontWeight: 600, color: "#111827" }, children: [
+          request.texts.title,
+          " \xB7 ",
+          request.columnTitle
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: 8, marginTop: 12 }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", style: tabStyle(tab === "value"), onClick: () => {
+            setTab("value");
+            update({ filterType: "value" });
+          }, children: request.texts.valueFilterTab }),
+          /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", style: tabStyle(tab === "condition"), onClick: () => {
+            setTab("condition");
+            update({ filterType: "condition" });
+          }, children: request.texts.conditionFilterTab })
+        ] }),
+        tab === "value" ? /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "grid", gap: 12, marginTop: 12, minHeight: 290, alignContent: "start", flex: "1 1 auto" }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ReactInput,
+            {
+              value: draft.keyword,
+              placeholder: request.texts.searchPlaceholder,
+              onChange: (event) => update({ keyword: event.target.value, filterType: "value" }),
+              onPressEnter: apply,
+              style: { width: "100%" }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12, paddingBottom: 8, borderBottom: "1px solid #f0f0f0" }, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("label", { style: checkLabelStyle, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                ReactCheckbox,
+                {
+                  checked: allChecked,
+                  indeterminate: selectedCount > 0 && !allChecked,
+                  onChange: (event) => toggle(visibleKeys, !!event.target.checked)
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+                request.texts.allOptionLabel,
+                " (",
+                allCount,
+                ")"
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("label", { style: checkLabelStyle, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                ReactCheckbox,
+                {
+                  checked: !!draft.searchExact,
+                  onChange: (event) => update({ searchExact: !!event.target.checked, filterType: "value" })
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: request.texts.exactToggleLabel })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { style: { minHeight: 232, borderRadius: 8, border: "1px solid #f0f0f0", background: "#fafafa", padding: 6 }, children: loading || visibleOptions.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: { minHeight: 220, display: "flex", alignItems: "center", justifyContent: "center", color: "#9ca3af", fontSize: 12 }, children: loading ? request.texts.loadingOptions : request.texts.emptyOptions }) : /* @__PURE__ */ jsxRuntime.jsx(
+            ReactVirtualList,
+            {
+              items: visibleOptions,
+              height: Math.min(220, visibleOptions.length * 40),
+              itemHeight: 40,
+              itemKey: (item) => item.value,
+              renderItem: (item, _index, meta) => /* @__PURE__ */ jsxRuntime.jsxs(
+                "label",
+                {
+                  className: "react-list-table-filter-option",
+                  style: { ...optionStyle, ...meta.style },
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      ReactCheckbox,
+                      {
+                        checked: selected.has(item.value),
+                        onChange: (event) => toggle([item.value], !!event.target.checked)
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { title: optionLabel(item, request.texts), style: optionTextStyle, children: optionLabel(item, request.texts) }),
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "#9ca3af", fontSize: 12 }, children: item.count })
+                  ]
+                },
+                item.value
+              )
+            }
+          ) })
+        ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { marginTop: 12, display: "grid", gap: 12, minHeight: 290, alignContent: "start", flex: "1 1 auto" }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ConditionEditor,
+            {
+              label: request.texts.firstConditionLabel,
+              operator: draft.conditionOperator ?? "none",
+              value: draft.conditionValue ?? "",
+              secondValue: draft.conditionSecondValue ?? "",
+              texts: request.texts,
+              onChange: (patch) => update(patch),
+              onSubmit: apply
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { style: fieldLabelStyle, children: request.texts.relationLabel }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              ReactSelect,
+              {
+                value: draft.conditionRelation === "or" ? "or" : "and",
+                allowClear: false,
+                options: [{ label: request.texts.relationAndLabel, value: "and" }, { label: request.texts.relationOrLabel, value: "or" }],
+                onChange: (value) => update({ conditionRelation: value, filterType: "condition" }),
+                style: { width: "100%" }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ConditionEditor,
+            {
+              second: true,
+              label: request.texts.secondConditionLabel,
+              operator: draft.secondConditionOperator ?? "none",
+              value: draft.secondConditionValue ?? "",
+              secondValue: draft.secondConditionSecondValue ?? "",
+              texts: request.texts,
+              onChange: (patch) => update(patch),
+              onSubmit: apply
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between" }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", style: actionStyle(false), onClick: () => {
+            request.onReset();
+            request.onClose();
+          }, children: request.texts.resetAction }),
+          /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", style: actionStyle(true), onClick: apply, children: request.texts.applyAction })
+        ] })
+      ] })
+    }
+  );
+}
+function ConditionEditor(props) {
+  const prefix = props.second ? "secondCondition" : "condition";
+  const hidesValue = ["none", "blank", "notBlank"].includes(props.operator);
+  const needsSecond = ["between", "notBetween"].includes(props.operator);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: fieldLabelStyle, children: props.label }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      ReactSelect,
+      {
+        value: props.operator,
+        options: operators,
+        allowClear: false,
+        onChange: (value) => props.onChange({ [`${prefix}Operator`]: value, filterType: "condition" }),
+        style: { width: "100%" }
+      }
+    ),
+    hidesValue ? null : /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "grid", gap: 8, marginTop: 8 }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        ReactInput,
+        {
+          value: props.value,
+          placeholder: props.texts.firstValuePlaceholder,
+          onPressEnter: props.onSubmit,
+          onChange: (event) => props.onChange({ [`${prefix}Value`]: event.target.value, filterType: "condition" }),
+          style: { width: "100%" }
+        }
+      ),
+      needsSecond ? /* @__PURE__ */ jsxRuntime.jsx(
+        ReactInput,
+        {
+          value: props.secondValue,
+          placeholder: props.texts.secondValuePlaceholder,
+          onPressEnter: props.onSubmit,
+          onChange: (event) => props.onChange({ [`${prefix}SecondValue`]: event.target.value, filterType: "condition" }),
+          style: { width: "100%" }
+        }
+      ) : null
+    ] })
+  ] });
+}
+function resolveTab(value) {
+  return value?.filterType === "condition" || value?.conditionOperator && value.conditionOperator !== "none" ? "condition" : "value";
+}
+function optionLabel(item, texts) {
+  if (item.kind === "blank") return texts.blankOptionLabel;
+  if (item.kind === "notBlank") return texts.notBlankOptionLabel;
+  return item.label;
+}
+var checkLabelStyle = { display: "inline-flex", alignItems: "center", gap: 8, color: "#374151", fontSize: 14 };
+var optionStyle = { display: "flex", alignItems: "center", gap: 8, minHeight: 40, padding: "4px 8px", borderRadius: 6, color: "#374151", fontSize: 14, cursor: "pointer", boxSizing: "border-box" };
+var optionTextStyle = { display: "block", flex: "1 1 0", width: 0, minWidth: 0, overflow: "hidden", whiteSpace: "nowrap", textOverflow: "ellipsis" };
+var fieldLabelStyle = { marginBottom: 6, fontSize: 12, color: "#6b7280" };
+function tabStyle(active) {
+  return { flex: 1, height: 32, border: active ? "1px solid #1677ff" : "1px solid #d9d9d9", borderRadius: 6, background: active ? "#e6f4ff" : "#fff", color: active ? "#1677ff" : "#374151", cursor: "pointer" };
+}
+function actionStyle(primary) {
+  return { minWidth: 72, height: 32, padding: "0 12px", borderRadius: 6, border: primary ? "1px solid #1677ff" : "1px solid #d9d9d9", background: primary ? "#1677ff" : "#fff", color: primary ? "#fff" : "#374151", cursor: "pointer" };
+}
+
 // src/components/color/style.css
 styleInject(".canvas-react-color-wrap {\n  display: inline-flex;\n  width: 100%;\n  height: 100%;\n  min-height: 0;\n  box-sizing: border-box;\n}\n.canvas-react-color {\n  display: flex;\n  align-items: center;\n  width: 100%;\n  min-width: 0;\n  height: var(--canvas-react-control-height);\n  min-height: 0;\n  box-sizing: border-box;\n  border: 1px solid var(--canvas-react-color-border);\n  border-radius: var(--canvas-react-radius-sm);\n  background: var(--canvas-react-color-bg);\n  color: var(--canvas-react-color-text);\n  font-size: var(--canvas-react-font-size);\n  transition: border-color 0.2s ease, box-shadow 0.2s ease;\n  cursor: pointer;\n}\n.canvas-react-color:hover {\n  border-color: var(--canvas-react-color-primary-hover);\n}\n.canvas-react-color-open,\n.canvas-react-color:focus-within {\n  border-color: var(--canvas-react-color-primary);\n  box-shadow: var(--canvas-react-shadow-focus);\n}\n.canvas-react-color-disabled {\n  color: #9ca3af;\n  background: var(--canvas-react-color-bg-soft);\n  cursor: not-allowed;\n}\n.canvas-react-color-preview {\n  flex: 0 0 auto;\n  width: calc(24px * var(--canvas-react-content-zoom, 1));\n  height: calc(24px * var(--canvas-react-content-zoom, 1));\n  margin-left: 3px;\n  box-sizing: border-box;\n  border: 1px solid rgba(0, 0, 0, 0.12);\n  border-radius: 4px;\n}\n.canvas-react-color-input-wrap {\n  flex: 1;\n  min-width: 0;\n  height: 100%;\n  min-height: 0;\n  border: 0;\n  box-shadow: none;\n}\n.canvas-react-color .canvas-react-input-affix-wrapper {\n  height: 100%;\n  min-height: 0;\n}\n.canvas-react-color-input-wrap:hover,\n.canvas-react-color-input-wrap:focus-within {\n  border-color: transparent;\n  box-shadow: none;\n}\n.canvas-react-color-input {\n  cursor: pointer;\n  text-transform: uppercase;\n}\n.canvas-react-color-arrow {\n  flex: 0 0 auto;\n  width: 0.5em;\n  height: 0.5em;\n  min-width: 6px;\n  min-height: 6px;\n  margin-right: var(--canvas-react-control-padding-inline, 11px);\n  border-right: 1.5px solid var(--canvas-react-color-text-muted);\n  border-bottom: 1.5px solid var(--canvas-react-color-text-muted);\n  transform: rotate(45deg) translateY(-2px);\n  transition: transform 0.18s ease;\n}\n.canvas-react-color-arrow-open {\n  transform: rotate(225deg) translate(-1px, -1px);\n}\n.canvas-react-color-dropdown {\n  overflow: hidden;\n}\n.canvas-react-color-panel {\n  padding: 12px;\n  box-sizing: border-box;\n}\n.canvas-react-color-saturation {\n  position: relative;\n  height: 150px;\n  overflow: hidden;\n  border-radius: 6px;\n  cursor: crosshair;\n  background-image:\n    linear-gradient(\n      to top,\n      #000,\n      transparent),\n    linear-gradient(\n      to right,\n      #fff,\n      transparent);\n  touch-action: none;\n}\n.canvas-react-color-saturation-thumb {\n  position: absolute;\n  width: 12px;\n  height: 12px;\n  border: 2px solid #fff;\n  border-radius: 50%;\n  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.28), 0 1px 3px rgba(0, 0, 0, 0.28);\n  transform: translate(-50%, -50%);\n  pointer-events: none;\n}\n.canvas-react-color-controls {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  margin-top: 12px;\n}\n.canvas-react-color-current {\n  flex: 0 0 28px;\n  height: 28px;\n  box-sizing: border-box;\n  border: 1px solid rgba(0, 0, 0, 0.12);\n  border-radius: 50%;\n}\n.canvas-react-color-hue {\n  width: 100%;\n  height: 12px;\n  margin: 0;\n  appearance: none;\n  border-radius: 999px;\n  background:\n    linear-gradient(\n      to right,\n      #f00,\n      #ff0,\n      #0f0,\n      #0ff,\n      #00f,\n      #f0f,\n      #f00);\n  cursor: pointer;\n}\n.canvas-react-color-hue::-webkit-slider-thumb {\n  width: 14px;\n  height: 14px;\n  appearance: none;\n  border: 2px solid #fff;\n  border-radius: 50%;\n  background: transparent;\n  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.28);\n}\n.canvas-react-color-value-row {\n  display: grid;\n  grid-template-columns: 36px 1fr;\n  align-items: center;\n  gap: 8px;\n  margin-top: 12px;\n  color: var(--canvas-react-color-text-muted);\n  font-size: 12px;\n}\n.canvas-react-color-value-row .canvas-react-input-affix-wrapper {\n  height: 28px;\n}\n.canvas-react-color-presets {\n  display: grid;\n  grid-template-columns: repeat(8, 20px);\n  gap: 7px;\n  margin-top: 12px;\n}\n.canvas-react-color-preset {\n  width: 20px;\n  height: 20px;\n  padding: 0;\n  box-sizing: border-box;\n  border: 1px solid rgba(0, 0, 0, 0.12);\n  border-radius: 4px;\n  cursor: pointer;\n  transition: transform 0.16s ease, box-shadow 0.16s ease;\n}\n.canvas-react-color-preset:hover {\n  transform: scale(1.12);\n}\n.canvas-react-color-preset-selected {\n  box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--canvas-react-color-primary);\n}\n");
 var DEFAULT_COLOR = "#1677ff";
@@ -3785,6 +4549,165 @@ function compareDateTimeValue(left, right) {
   return left.localeCompare(right);
 }
 
+// src/components/number-input/style.css
+styleInject('@import "../../styles/variables.css";\n.canvas-react-number-input-affix-wrapper {\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: center;\n  width: 100%;\n  min-width: 0;\n  height: var(--canvas-react-control-height);\n  border: 1px solid var(--canvas-react-color-border);\n  border-radius: var(--canvas-react-radius-sm);\n  background: var(--canvas-react-color-bg);\n  color: var(--canvas-react-color-text);\n  font-size: var(--canvas-react-font-size);\n  outline: none;\n  transition:\n    border-color 0.2s ease,\n    box-shadow 0.2s ease,\n    background-color 0.2s ease;\n}\n.canvas-react-number-input-affix-wrapper:hover {\n  border-color: var(--canvas-react-color-primary-hover);\n}\n.canvas-react-number-input-affix-wrapper:focus-within {\n  border-color: var(--canvas-react-color-primary);\n  box-shadow: var(--canvas-react-shadow-focus);\n}\n.canvas-react-number-input-affix-wrapper-disabled {\n  background: #fafafa;\n  color: #9ca3af;\n  cursor: not-allowed;\n}\n.canvas-react-number-input {\n  box-sizing: border-box;\n  flex: 1 1 auto;\n  width: 100%;\n  min-width: 0;\n  height: 100%;\n  padding: var(--canvas-react-control-padding-block, 0px) var(--canvas-react-control-padding-inline, 11px);\n  border: none;\n  background: transparent;\n  color: inherit;\n  font-size: inherit;\n  outline: none;\n  appearance: textfield;\n  -moz-appearance: textfield;\n}\n.canvas-react-number-input::placeholder {\n  color: #9ca3af;\n}\n.canvas-react-number-input::-webkit-outer-spin-button,\n.canvas-react-number-input::-webkit-inner-spin-button {\n  margin: 0;\n  -webkit-appearance: none;\n}\n.canvas-react-number-input-suffix {\n  display: inline-flex;\n  align-items: center;\n  padding-right: var(--canvas-react-control-padding-inline, 11px);\n}\n.canvas-react-number-input-clear {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 12px;\n  height: 12px;\n  padding: 0;\n  border: none;\n  background: transparent;\n  color: #9ca3af;\n  opacity: 0;\n  pointer-events: none;\n  cursor: pointer;\n  transition:\n    color 0.2s ease,\n    opacity 0.2s ease,\n    transform 0.18s ease;\n}\n.canvas-react-number-input-affix-wrapper:hover .canvas-react-number-input-clear,\n.canvas-react-number-input-affix-wrapper:focus-within .canvas-react-number-input-clear {\n  opacity: 1;\n  pointer-events: auto;\n}\n.canvas-react-number-input-clear:hover {\n  color: #6b7280;\n  transform: rotate(90deg);\n}\n.canvas-react-number-input-clear-icon,\n.canvas-react-number-input-clear-icon::before {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: 8px;\n  height: 1.25px;\n  margin-top: -0.625px;\n  margin-left: -4px;\n  border-radius: 999px;\n  background: currentColor;\n  content: "";\n}\n.canvas-react-number-input-clear-icon {\n  transform: rotate(45deg);\n}\n.canvas-react-number-input-clear-icon::before {\n  transform: rotate(90deg);\n}\n');
+var ReactNumberInput = React.forwardRef(
+  function ReactNumberInput2(props, ref) {
+    const {
+      className,
+      disabled,
+      onBlur,
+      onChange,
+      onKeyDown,
+      onPressEnter,
+      style,
+      value,
+      ...restProps
+    } = props;
+    const [inputValue, setInputValue] = React.useState(toDisplayValue(value));
+    React.useEffect(() => {
+      setInputValue(toDisplayValue(value));
+    }, [value]);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        className: joinClassNames(
+          `${REACT_COMPONENT_PREFIX}-number-input-affix-wrapper`,
+          disabled && `${REACT_COMPONENT_PREFIX}-number-input-affix-wrapper-disabled`
+        ),
+        style,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            ...restProps,
+            ref,
+            disabled,
+            type: "number",
+            value: inputValue,
+            className: joinClassNames(
+              `${REACT_COMPONENT_PREFIX}-number-input`,
+              className
+            ),
+            onChange: (event) => {
+              const nextText = event.target.value;
+              setInputValue(nextText);
+              onChange?.(parseNumberValue(nextText));
+            },
+            onBlur: (event) => {
+              setInputValue(toDisplayValue(parseNumberValue(event.target.value)));
+              onBlur?.(event);
+            },
+            onKeyDown: (event) => {
+              onKeyDown?.(event);
+              if (event.key === "Enter") {
+                onPressEnter?.(event);
+              }
+            }
+          }
+        )
+      }
+    );
+  }
+);
+function parseNumberValue(value) {
+  if (value.trim().length === 0) {
+    return null;
+  }
+  const nextValue = Number(value);
+  return Number.isFinite(nextValue) ? nextValue : null;
+}
+function toDisplayValue(value) {
+  return value == null ? "" : String(value);
+}
+
+// src/components/input-range/style.css
+styleInject('@import "../../styles/variables.css";\n.canvas-react-input-range {\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: center;\n  width: 100%;\n  min-width: 0;\n  height: var(--canvas-react-control-height);\n  overflow: hidden;\n  border: 1px solid var(--canvas-react-color-border);\n  border-radius: var(--canvas-react-radius-sm);\n  background: var(--canvas-react-color-bg);\n  color: var(--canvas-react-color-text);\n  font-size: var(--canvas-react-font-size);\n  outline: none;\n  transition:\n    border-color 0.2s ease,\n    box-shadow 0.2s ease,\n    background-color 0.2s ease;\n}\n.canvas-react-input-range:hover {\n  border-color: var(--canvas-react-color-primary-hover);\n}\n.canvas-react-input-range:focus-within {\n  border-color: var(--canvas-react-color-primary);\n  box-shadow: var(--canvas-react-shadow-focus);\n}\n.canvas-react-input-range-disabled {\n  background: #fafafa;\n  color: #9ca3af;\n  cursor: not-allowed;\n}\n.canvas-react-input-range > .canvas-react-number-input-affix-wrapper,\n.canvas-react-input-range > .canvas-react-number-input-affix-wrapper:hover,\n.canvas-react-input-range > .canvas-react-number-input-affix-wrapper:focus-within {\n  flex: 1 1 0;\n  width: 0;\n  height: 100%;\n  border: 0;\n  border-radius: 0;\n  box-shadow: none;\n}\n.canvas-react-input-range-separator {\n  flex: 0 0 auto;\n  color: #9ca3af;\n  line-height: 1;\n}\n');
+var ReactInputRange = React.forwardRef(function ReactInputRange2(props, ref) {
+  const {
+    autoFocus,
+    className,
+    disabled,
+    max,
+    min,
+    onBlur,
+    onChange,
+    onFocus,
+    onKeyDown,
+    onPressEnter,
+    placeholder = ["\u6700\u5C0F\u503C", "\u6700\u5927\u503C"],
+    rangeSeparator = "~",
+    step,
+    style,
+    value = [null, null],
+    ...restProps
+  } = props;
+  const rootRef = React.useRef(null);
+  const startInputRef = React.useRef(null);
+  React.useImperativeHandle(ref, () => startInputRef.current);
+  React.useEffect(() => {
+    if (autoFocus) {
+      startInputRef.current?.focus();
+    }
+  }, [autoFocus]);
+  const handleBlur = (event) => {
+    const nextTarget = event.relatedTarget;
+    if (nextTarget && rootRef.current?.contains(nextTarget)) {
+      return;
+    }
+    onBlur?.(event);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "span",
+    {
+      ref: rootRef,
+      className: joinClassNames(
+        `${REACT_COMPONENT_PREFIX}-input-range`,
+        disabled && `${REACT_COMPONENT_PREFIX}-input-range-disabled`,
+        className
+      ),
+      style,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ReactNumberInput,
+          {
+            ...restProps,
+            ref: startInputRef,
+            value: value[0],
+            disabled,
+            min,
+            max,
+            step,
+            placeholder: placeholder[0],
+            onChange: (nextValue) => onChange?.([nextValue, value[1]]),
+            onFocus,
+            onBlur: handleBlur,
+            onKeyDown,
+            onPressEnter
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${REACT_COMPONENT_PREFIX}-input-range-separator`, children: rangeSeparator }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          ReactNumberInput,
+          {
+            ...restProps,
+            value: value[1],
+            disabled,
+            min,
+            max,
+            step,
+            placeholder: placeholder[1],
+            onChange: (nextValue) => onChange?.([value[0], nextValue]),
+            onFocus,
+            onBlur: handleBlur,
+            onKeyDown,
+            onPressEnter
+          }
+        )
+      ]
+    }
+  );
+});
+
 // src/components/image-preview/style.css
 styleInject(".canvas-react-image-preview {\n  position: fixed;\n  inset: 0;\n  z-index: 1100;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 48px;\n  background: rgba(0, 0, 0, 0.72);\n  backdrop-filter: blur(2px);\n  opacity: 0;\n  transition: opacity 0.2s ease;\n}\n.canvas-react-image-preview-entered {\n  opacity: 1;\n}\n.canvas-react-image-preview-leave {\n  opacity: 0;\n}\n.canvas-react-image-preview-image {\n  max-width: 90vw;\n  max-height: 86vh;\n  object-fit: contain;\n  border-radius: 4px;\n  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.32);\n  opacity: 0;\n  transition: transform 0.2s ease, opacity 0.2s ease;\n  user-select: none;\n}\n.canvas-react-image-preview-entered .canvas-react-image-preview-image {\n  opacity: 1;\n}\n.canvas-react-image-preview-leave .canvas-react-image-preview-image {\n  opacity: 0;\n}\n.canvas-react-image-preview-close {\n  position: fixed;\n  top: 20px;\n  right: 24px;\n  width: 40px;\n  height: 40px;\n  padding: 0;\n  border: 0;\n  border-radius: 50%;\n  color: #fff;\n  background: rgba(255, 255, 255, 0.14);\n  font: 30px/38px sans-serif;\n  cursor: pointer;\n}\n.canvas-react-image-preview-toolbar {\n  position: fixed;\n  bottom: 28px;\n  left: 50%;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  padding: 6px 10px;\n  color: #fff;\n  background: rgba(0, 0, 0, 0.64);\n  border-radius: 22px;\n  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.24);\n  transform: translateX(-50%);\n  opacity: 0;\n  transition: opacity 0.2s ease;\n}\n.canvas-react-image-preview-entered .canvas-react-image-preview-toolbar {\n  opacity: 1;\n}\n.canvas-react-image-preview-tool {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  padding: 0;\n  border: 0;\n  border-radius: 6px;\n  color: inherit;\n  background: transparent;\n  font: 20px/1 sans-serif;\n  cursor: pointer;\n}\n.canvas-react-image-preview-tool:hover:not(:disabled) {\n  background: rgba(255, 255, 255, 0.16);\n}\n.canvas-react-image-preview-tool:disabled {\n  color: rgba(255, 255, 255, 0.35);\n  cursor: not-allowed;\n}\n.canvas-react-image-preview-scale {\n  min-width: 48px;\n  color: rgba(255, 255, 255, 0.88);\n  font-size: 12px;\n  text-align: center;\n}\n");
 function ReactImagePreview(props) {
@@ -4326,723 +5249,669 @@ function parseMonthValue(value) {
   if (!matched) {
     return null;
   }
-  const month = matched[2];
-  if (!MONTHS4.includes(month)) {
-    return null;
-  }
-  return {
-    month,
-    year: Number(matched[1])
-  };
-}
-function resolveDecadeStart4(year) {
-  return Math.floor(year / 10) * 10;
-}
-
-// src/components/number-input/style.css
-styleInject('@import "../../styles/variables.css";\n.canvas-react-number-input-affix-wrapper {\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: center;\n  width: 100%;\n  min-width: 0;\n  height: var(--canvas-react-control-height);\n  border: 1px solid var(--canvas-react-color-border);\n  border-radius: var(--canvas-react-radius-sm);\n  background: var(--canvas-react-color-bg);\n  color: var(--canvas-react-color-text);\n  font-size: var(--canvas-react-font-size);\n  outline: none;\n  transition:\n    border-color 0.2s ease,\n    box-shadow 0.2s ease,\n    background-color 0.2s ease;\n}\n.canvas-react-number-input-affix-wrapper:hover {\n  border-color: var(--canvas-react-color-primary-hover);\n}\n.canvas-react-number-input-affix-wrapper:focus-within {\n  border-color: var(--canvas-react-color-primary);\n  box-shadow: var(--canvas-react-shadow-focus);\n}\n.canvas-react-number-input-affix-wrapper-disabled {\n  background: #fafafa;\n  color: #9ca3af;\n  cursor: not-allowed;\n}\n.canvas-react-number-input {\n  box-sizing: border-box;\n  flex: 1 1 auto;\n  width: 100%;\n  min-width: 0;\n  height: 100%;\n  padding: var(--canvas-react-control-padding-block, 0px) var(--canvas-react-control-padding-inline, 11px);\n  border: none;\n  background: transparent;\n  color: inherit;\n  font-size: inherit;\n  outline: none;\n  appearance: textfield;\n  -moz-appearance: textfield;\n}\n.canvas-react-number-input::placeholder {\n  color: #9ca3af;\n}\n.canvas-react-number-input::-webkit-outer-spin-button,\n.canvas-react-number-input::-webkit-inner-spin-button {\n  margin: 0;\n  -webkit-appearance: none;\n}\n.canvas-react-number-input-suffix {\n  display: inline-flex;\n  align-items: center;\n  padding-right: var(--canvas-react-control-padding-inline, 11px);\n}\n.canvas-react-number-input-clear {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 12px;\n  height: 12px;\n  padding: 0;\n  border: none;\n  background: transparent;\n  color: #9ca3af;\n  opacity: 0;\n  pointer-events: none;\n  cursor: pointer;\n  transition:\n    color 0.2s ease,\n    opacity 0.2s ease,\n    transform 0.18s ease;\n}\n.canvas-react-number-input-affix-wrapper:hover .canvas-react-number-input-clear,\n.canvas-react-number-input-affix-wrapper:focus-within .canvas-react-number-input-clear {\n  opacity: 1;\n  pointer-events: auto;\n}\n.canvas-react-number-input-clear:hover {\n  color: #6b7280;\n  transform: rotate(90deg);\n}\n.canvas-react-number-input-clear-icon,\n.canvas-react-number-input-clear-icon::before {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: 8px;\n  height: 1.25px;\n  margin-top: -0.625px;\n  margin-left: -4px;\n  border-radius: 999px;\n  background: currentColor;\n  content: "";\n}\n.canvas-react-number-input-clear-icon {\n  transform: rotate(45deg);\n}\n.canvas-react-number-input-clear-icon::before {\n  transform: rotate(90deg);\n}\n');
-var ReactNumberInput = React.forwardRef(
-  function ReactNumberInput2(props, ref) {
-    const {
-      className,
-      disabled,
-      onBlur,
-      onChange,
-      onKeyDown,
-      onPressEnter,
-      style,
-      value,
-      ...restProps
-    } = props;
-    const [inputValue, setInputValue] = React.useState(toDisplayValue(value));
-    React.useEffect(() => {
-      setInputValue(toDisplayValue(value));
-    }, [value]);
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "span",
-      {
-        className: joinClassNames(
-          `${REACT_COMPONENT_PREFIX}-number-input-affix-wrapper`,
-          disabled && `${REACT_COMPONENT_PREFIX}-number-input-affix-wrapper-disabled`
-        ),
-        style,
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          "input",
-          {
-            ...restProps,
-            ref,
-            disabled,
-            type: "number",
-            value: inputValue,
-            className: joinClassNames(
-              `${REACT_COMPONENT_PREFIX}-number-input`,
-              className
-            ),
-            onChange: (event) => {
-              const nextText = event.target.value;
-              setInputValue(nextText);
-              onChange?.(parseNumberValue(nextText));
-            },
-            onBlur: (event) => {
-              setInputValue(toDisplayValue(parseNumberValue(event.target.value)));
-              onBlur?.(event);
-            },
-            onKeyDown: (event) => {
-              onKeyDown?.(event);
-              if (event.key === "Enter") {
-                onPressEnter?.(event);
-              }
-            }
-          }
-        )
-      }
-    );
-  }
-);
-function parseNumberValue(value) {
-  if (value.trim().length === 0) {
+  const month = matched[2];
+  if (!MONTHS4.includes(month)) {
     return null;
   }
-  const nextValue = Number(value);
-  return Number.isFinite(nextValue) ? nextValue : null;
+  return {
+    month,
+    year: Number(matched[1])
+  };
 }
-function toDisplayValue(value) {
-  return value == null ? "" : String(value);
+function resolveDecadeStart4(year) {
+  return Math.floor(year / 10) * 10;
+}
+var compatibleIdSeed = 0;
+function useCompatibleId(prefix = "canvas-react-id") {
+  const nativeUseId = React__namespace.useId;
+  const fallbackIdRef = React__namespace.useRef();
+  if (!fallbackIdRef.current) {
+    compatibleIdSeed += 1;
+    fallbackIdRef.current = `${prefix}-${compatibleIdSeed}`;
+  }
+  return nativeUseId ? nativeUseId() : fallbackIdRef.current;
 }
 
-// src/components/input-number/style.css
-styleInject('@import "../../styles/variables.css";\n.canvas-react-input-number {\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: stretch;\n  width: 100%;\n  min-width: 0;\n  height: var(--canvas-react-control-height);\n  border: 1px solid var(--canvas-react-color-border);\n  border-radius: var(--canvas-react-radius-sm);\n  background: var(--canvas-react-color-bg);\n  color: var(--canvas-react-color-text);\n  font-size: var(--canvas-react-font-size);\n  overflow: hidden;\n  transition:\n    border-color 0.2s ease,\n    box-shadow 0.2s ease,\n    background-color 0.2s ease;\n}\n.canvas-react-input-number:hover {\n  border-color: var(--canvas-react-color-primary-hover);\n}\n.canvas-react-input-number-focused {\n  border-color: var(--canvas-react-color-primary);\n  box-shadow: var(--canvas-react-shadow-focus);\n}\n.canvas-react-input-number-disabled {\n  background: #fafafa;\n  color: #9ca3af;\n  cursor: not-allowed;\n}\n.canvas-react-input-number-handler {\n  position: relative;\n  display: flex;\n  flex: 0 0 28px;\n  align-items: center;\n  justify-content: center;\n  margin: 0;\n  padding: 0;\n  border: none;\n  background: transparent;\n  color: var(--canvas-react-color-text-muted);\n  cursor: pointer;\n  transition: color 0.16s ease, background-color 0.16s ease;\n}\n.canvas-react-input-number-handler-down {\n  border-right: 1px solid var(--canvas-react-color-border);\n}\n.canvas-react-input-number-handler-up {\n  border-left: 1px solid var(--canvas-react-color-border);\n}\n.canvas-react-input-number-handler:hover:not(:disabled) {\n  color: var(--canvas-react-color-primary);\n  background: rgba(22, 119, 255, 0.06);\n}\n.canvas-react-input-number-handler:disabled {\n  color: #c4c7cf;\n  cursor: not-allowed;\n}\n.canvas-react-input-number-handler-icon {\n  position: relative;\n  display: block;\n  width: 10px;\n  height: 10px;\n}\n.canvas-react-input-number-handler-icon::before,\n.canvas-react-input-number-handler-icon::after {\n  content: "";\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  background: currentColor;\n  border-radius: 1px;\n  transform: translate(-50%, -50%);\n}\n.canvas-react-input-number-handler-icon::before {\n  width: 10px;\n  height: 1.5px;\n}\n.canvas-react-input-number-handler-up .canvas-react-input-number-handler-icon::after {\n  width: 1.5px;\n  height: 10px;\n}\n.canvas-react-input-number-input-wrap {\n  display: flex;\n  flex: 1 1 auto;\n  align-items: center;\n  min-width: 0;\n  height: 100%;\n}\n.canvas-react-input-number-input {\n  box-sizing: border-box;\n  width: 100%;\n  min-width: 0;\n  height: 100%;\n  padding: 0 8px;\n  border: none;\n  background: transparent;\n  color: inherit;\n  font-size: inherit;\n  outline: none;\n  text-align: center;\n  appearance: textfield;\n  -moz-appearance: textfield;\n}\n.canvas-react-input-number-input::placeholder {\n  color: #9ca3af;\n}\n.canvas-react-input-number-input::-webkit-outer-spin-button,\n.canvas-react-input-number-input::-webkit-inner-spin-button {\n  margin: 0;\n  -webkit-appearance: none;\n}\n.canvas-react-input-number-addon {\n  flex: 0 0 auto;\n  padding-right: 8px;\n  color: var(--canvas-react-color-text-muted);\n  font-size: 12px;\n  line-height: 1;\n  user-select: none;\n}\n');
-var ReactInputNumber = React.forwardRef(
-  function ReactInputNumber2(props, ref) {
-    const {
-      addonAfter,
-      className,
-      defaultValue = null,
-      disabled,
-      formatter,
-      max,
-      min,
-      onBlur,
-      onChange,
-      onCommit,
-      onFocus,
-      onKeyDown,
-      parser,
-      precision,
-      step = 1,
-      style,
-      value,
-      ...restProps
-    } = props;
-    const isControlled = value !== void 0;
-    const [innerValue, setInnerValue] = React.useState(
-      isControlled ? value ?? null : defaultValue
-    );
-    const currentValue = isControlled ? value ?? null : innerValue;
-    const [draftText, setDraftText] = React.useState(
-      formatDisplayValue(
-        currentValue,
-        formatter,
-        resolvePrecision(precision, step),
-        step
-      )
-    );
-    const [focused, setFocused] = React.useState(false);
-    const resolvedPrecision = React.useMemo(
-      () => resolvePrecision(precision, step),
-      [precision, step]
-    );
-    React.useEffect(() => {
-      if (!focused) {
-        setDraftText(
-          formatDisplayValue(currentValue, formatter, resolvedPrecision, step)
-        );
-      }
-    }, [currentValue, focused, formatter, resolvedPrecision, step]);
-    const commitValue = (nextValue) => {
-      const normalized = normalizeNumberValue(nextValue, {
-        min,
-        max,
-        precision: resolvedPrecision
+// src/components/modal/style.css
+styleInject('@import "../../styles/variables.css";\n.canvas-react-modal-root,\n.canvas-react-modal-root * {\n  box-sizing: border-box;\n}\n.canvas-react-modal-root {\n  position: fixed;\n  inset: 0;\n  color: var(--canvas-react-color-text);\n  font-size: var(--canvas-react-font-size);\n  line-height: 1.5;\n}\n.canvas-react-modal-root-passthrough {\n  pointer-events: none;\n}\n.canvas-react-modal-root-passthrough .canvas-react-modal {\n  pointer-events: auto;\n}\n.canvas-react-modal-mask {\n  position: absolute;\n  inset: 0;\n  background: rgba(0, 0, 0, 0.45);\n}\n.canvas-react-modal-wrap {\n  position: absolute;\n  inset: 0;\n  overflow: auto;\n  padding: 100px 24px 24px;\n  pointer-events: none;\n}\n.canvas-react-modal-root-centered .canvas-react-modal-wrap {\n  display: flex;\n  align-items: center;\n  padding-top: 24px;\n}\n.canvas-react-modal-root-fullscreen .canvas-react-modal-wrap {\n  padding: 0;\n  overflow: hidden;\n}\n.canvas-react-modal {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  width: 520px;\n  max-width: calc(100vw - 48px);\n  max-height: calc(100vh - 124px);\n  margin: 0 auto;\n  overflow: hidden;\n  border-radius: var(--canvas-react-radius-md, 8px);\n  background: var(--canvas-react-color-bg, #ffffff);\n  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.22);\n  outline: none;\n  pointer-events: auto;\n}\n.canvas-react-modal-root-centered .canvas-react-modal {\n  max-height: calc(100vh - 48px);\n}\n.canvas-react-modal.canvas-react-modal-fullscreen {\n  width: 100% !important;\n  max-width: none;\n  height: 100%;\n  max-height: none;\n  border-radius: 0;\n}\n.canvas-react-modal-header {\n  display: flex;\n  flex: 0 0 auto;\n  align-items: center;\n  min-height: 56px;\n  padding: 0 16px 0 24px;\n  border-bottom: 1px solid var(--canvas-react-color-border);\n}\n.canvas-react-modal-header-draggable {\n  cursor: move;\n  user-select: none;\n}\n.canvas-react-modal-title {\n  min-width: 0;\n  flex: 1 1 auto;\n  color: var(--canvas-react-color-text);\n  font-size: 16px;\n  font-weight: 600;\n  overflow-wrap: anywhere;\n}\n.canvas-react-modal-tools {\n  display: flex;\n  flex: 0 0 auto;\n  align-items: center;\n  gap: 4px;\n  margin-left: 16px;\n}\n.canvas-react-modal-tool {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  padding: 0;\n  border: 0;\n  border-radius: var(--canvas-react-radius-sm, 6px);\n  background: transparent;\n  color: var(--canvas-react-color-text-muted);\n  cursor: pointer;\n  transition: background-color 0.18s ease, color 0.18s ease;\n}\n.canvas-react-modal-tool:hover {\n  background: var(--canvas-react-color-bg-hover);\n  color: var(--canvas-react-color-text);\n}\n.canvas-react-modal-tool:focus-visible,\n.canvas-react-modal-button:focus-visible {\n  outline: 2px solid var(--canvas-react-color-primary);\n  outline-offset: 2px;\n}\n.canvas-react-modal-fullscreen-icon {\n  position: relative;\n  display: block;\n  width: 15px;\n  height: 15px;\n  border: 1.5px solid currentColor;\n}\n.canvas-react-modal-fullscreen-icon-exit::before {\n  position: absolute;\n  inset: 3px -4px -4px 3px;\n  border-right: 1.5px solid currentColor;\n  border-bottom: 1.5px solid currentColor;\n  content: "";\n}\n.canvas-react-modal-close-icon {\n  position: relative;\n  display: block;\n  width: 16px;\n  height: 16px;\n}\n.canvas-react-modal-close-icon::before,\n.canvas-react-modal-close-icon::after {\n  position: absolute;\n  top: 7px;\n  left: 1px;\n  width: 14px;\n  height: 1.5px;\n  border-radius: 1px;\n  background: currentColor;\n  content: "";\n}\n.canvas-react-modal-close-icon::before {\n  transform: rotate(45deg);\n}\n.canvas-react-modal-close-icon::after {\n  transform: rotate(-45deg);\n}\n.canvas-react-modal-body {\n  min-height: 0;\n  flex: 1 1 auto;\n  overflow: auto;\n  padding: 20px 24px;\n}\n.canvas-react-modal-footer {\n  display: flex;\n  flex: 0 0 auto;\n  align-items: center;\n  justify-content: flex-end;\n  gap: 8px;\n  padding: 12px 24px;\n  border-top: 1px solid var(--canvas-react-color-border);\n}\n.canvas-react-modal-button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  height: var(--canvas-react-control-height, 32px);\n  min-width: 64px;\n  padding: 0 var(--canvas-react-control-padding-inline, 11px);\n  border: 1px solid var(--canvas-react-color-border);\n  border-radius: var(--canvas-react-radius-sm, 6px);\n  background: var(--canvas-react-color-bg);\n  color: var(--canvas-react-color-text);\n  font: inherit;\n  line-height: 1;\n  white-space: nowrap;\n  cursor: pointer;\n  transition:\n    border-color 0.18s ease,\n    background-color 0.18s ease,\n    color 0.18s ease,\n    opacity 0.18s ease;\n}\n.canvas-react-modal-button:hover {\n  border-color: var(--canvas-react-color-primary-hover);\n  color: var(--canvas-react-color-primary-hover);\n}\n.canvas-react-modal-button-primary {\n  border-color: var(--canvas-react-color-primary);\n  background: var(--canvas-react-color-primary);\n  color: #ffffff;\n}\n.canvas-react-modal-button-primary:hover {\n  border-color: var(--canvas-react-color-primary-hover);\n  background: var(--canvas-react-color-primary-hover);\n  color: #ffffff;\n}\n.canvas-react-modal-button:disabled {\n  opacity: 0.56;\n  cursor: not-allowed;\n}\n.canvas-react-modal-loading {\n  width: 14px;\n  height: 14px;\n  border: 2px solid rgba(255, 255, 255, 0.45);\n  border-top-color: #ffffff;\n  border-radius: 50%;\n  animation: canvas-react-modal-loading 0.8s linear infinite;\n}\n.canvas-react-modal-motion-enter-active,\n.canvas-react-modal-motion-leave-active {\n  transition: opacity 0.2s ease;\n}\n.canvas-react-modal-motion-enter-active .canvas-react-modal,\n.canvas-react-modal-motion-leave-active .canvas-react-modal {\n  transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);\n}\n.canvas-react-modal-motion-enter-from,\n.canvas-react-modal-motion-leave-to {\n  opacity: 0;\n}\n.canvas-react-modal-motion-enter-from .canvas-react-modal,\n.canvas-react-modal-motion-leave-to .canvas-react-modal {\n  opacity: 0;\n  transform: scale(0.96) translateY(-8px);\n}\n@keyframes canvas-react-modal-loading {\n  to {\n    transform: rotate(360deg);\n  }\n}\n@media (max-width: 575px) {\n  .canvas-react-modal-wrap {\n    padding: 24px 12px;\n  }\n  .canvas-react-modal {\n    max-width: calc(100vw - 24px);\n    max-height: calc(100vh - 48px);\n  }\n  .canvas-react-modal-header {\n    padding-right: 12px;\n    padding-left: 16px;\n  }\n  .canvas-react-modal-body {\n    padding: 16px;\n  }\n  .canvas-react-modal-footer {\n    padding: 12px 16px;\n  }\n}\n@media (prefers-reduced-motion: reduce) {\n  .canvas-react-modal-motion-enter-active,\n  .canvas-react-modal-motion-leave-active,\n  .canvas-react-modal-motion-enter-active .canvas-react-modal,\n  .canvas-react-modal-motion-leave-active .canvas-react-modal {\n    transition-duration: 0.01ms;\n  }\n}\n');
+var MODAL_MOTION_DURATION = 200;
+var FOCUSABLE_SELECTOR = [
+  "a[href]",
+  "button:not([disabled])",
+  "input:not([disabled])",
+  "select:not([disabled])",
+  "textarea:not([disabled])",
+  '[tabindex]:not([tabindex="-1"])'
+].join(",");
+var bodyScrollLockCount = 0;
+var bodyOverflowBeforeLock = "";
+function ReactModal(props) {
+  const {
+    afterClose,
+    bodyStyle,
+    cancelButtonProps,
+    cancelText = "\u53D6\u6D88",
+    centered = false,
+    children,
+    className,
+    closable = true,
+    confirmLoading,
+    defaultFullscreen = false,
+    draggable = false,
+    focusTriggerAfterClose = true,
+    footer,
+    fullscreen,
+    fullscreenable = true,
+    getContainer,
+    keyboard = true,
+    mask = true,
+    maskClosable = true,
+    maskStyle,
+    okButtonProps,
+    okText = "\u786E\u5B9A",
+    onCancel,
+    onFullscreenChange,
+    onOk,
+    open,
+    rootClassName,
+    style,
+    title,
+    width = 520,
+    zIndex = 1e3
+  } = props;
+  const transition = useReactTransition({
+    duration: MODAL_MOTION_DURATION,
+    name: `${REACT_COMPONENT_PREFIX}-modal-motion`,
+    show: open
+  });
+  const [innerFullscreen, setInnerFullscreen] = React.useState(defaultFullscreen);
+  const [innerConfirmLoading, setInnerConfirmLoading] = React.useState(false);
+  const [dragOffset, setDragOffset] = React.useState({ x: 0, y: 0 });
+  const panelRef = React.useRef(null);
+  const dragRef = React.useRef(null);
+  const restoreFocusRef = React.useRef(null);
+  const wasRenderedRef = React.useRef(false);
+  const titleId = useCompatibleId(`${REACT_COMPONENT_PREFIX}-modal-title`);
+  const controlledFullscreen = fullscreen !== void 0;
+  const mergedFullscreen = controlledFullscreen ? Boolean(fullscreen) : innerFullscreen;
+  const mergedConfirmLoading = confirmLoading ?? innerConfirmLoading;
+  const hasTitle = title !== null && title !== void 0 && title !== false;
+  React.useEffect(() => {
+    if (!draggable || !transition.rendered) return;
+    const handleMouseMove = (event) => {
+      const drag = dragRef.current;
+      if (!drag) return;
+      setDragOffset({
+        x: drag.offsetX + event.clientX - drag.startX,
+        y: drag.offsetY + event.clientY - drag.startY
       });
-      if (!isControlled) {
-        setInnerValue(normalized);
+    };
+    const handleMouseUp = () => {
+      dragRef.current = null;
+    };
+    window.addEventListener("mousemove", handleMouseMove);
+    window.addEventListener("mouseup", handleMouseUp);
+    return () => {
+      window.removeEventListener("mousemove", handleMouseMove);
+      window.removeEventListener("mouseup", handleMouseUp);
+    };
+  }, [draggable, transition.rendered]);
+  React.useEffect(() => {
+    if (!open) {
+      dragRef.current = null;
+      setDragOffset({ x: 0, y: 0 });
+    }
+  }, [open]);
+  React.useEffect(() => {
+    if (!transition.rendered) {
+      if (wasRenderedRef.current) {
+        wasRenderedRef.current = false;
+        afterClose?.();
+        if (focusTriggerAfterClose) {
+          restoreFocusRef.current?.focus();
+        }
+        restoreFocusRef.current = null;
       }
-      onChange?.(normalized);
-      onCommit?.(normalized);
-      setDraftText(
-        formatDisplayValue(normalized, formatter, resolvedPrecision, step)
-      );
-      return normalized;
+      return;
+    }
+    if (!wasRenderedRef.current) {
+      wasRenderedRef.current = true;
+      restoreFocusRef.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+    }
+    if (mask) {
+      lockBodyScroll();
+      return unlockBodyScroll;
+    }
+  }, [afterClose, focusTriggerAfterClose, mask, transition.rendered]);
+  React.useEffect(() => {
+    if (!mask || !open || !transition.rendered) {
+      return;
+    }
+    const frameId = window.requestAnimationFrame(() => {
+      panelRef.current?.focus();
+    });
+    return () => {
+      window.cancelAnimationFrame(frameId);
     };
-    const stepBy = (direction) => {
-      if (disabled) {
+  }, [mask, open, transition.rendered]);
+  React.useEffect(() => {
+    if (!mask || !transition.rendered) {
+      return;
+    }
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape" && keyboard && open) {
+        event.preventDefault();
+        onCancel?.(event);
         return;
       }
-      const base = currentValue == null || !Number.isFinite(currentValue) ? 0 : currentValue;
-      const next = base + direction * step;
-      commitValue(next);
+      if (event.key !== "Tab" || !open) {
+        return;
+      }
+      trapFocus(event, panelRef.current);
     };
-    const atMin = currentValue != null && min != null && currentValue <= min + Number.EPSILON;
-    const atMax = currentValue != null && max != null && currentValue >= max - Number.EPSILON;
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      "span",
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [keyboard, mask, onCancel, open, transition.rendered]);
+  const setFullscreen = (nextFullscreen) => {
+    if (!controlledFullscreen) {
+      setInnerFullscreen(nextFullscreen);
+    }
+    if (nextFullscreen !== mergedFullscreen) {
+      onFullscreenChange?.(nextFullscreen);
+    }
+  };
+  const handleOk = (event) => {
+    if (mergedConfirmLoading || okButtonProps?.disabled) {
+      return;
+    }
+    const result = onOk?.(event);
+    if (!isPromiseLike(result)) {
+      return;
+    }
+    setInnerConfirmLoading(true);
+    Promise.resolve(result).catch(() => void 0).finally(() => {
+      setInnerConfirmLoading(false);
+    });
+  };
+  if (!transition.rendered || typeof document === "undefined") {
+    return null;
+  }
+  const container = resolveContainer(getContainer);
+  if (!container) {
+    return null;
+  }
+  const {
+    className: okButtonClassName,
+    disabled: okButtonDisabled,
+    ...restOkButtonProps
+  } = okButtonProps ?? {};
+  const {
+    className: cancelButtonClassName,
+    disabled: cancelButtonDisabled,
+    ...restCancelButtonProps
+  } = cancelButtonProps ?? {};
+  const defaultFooter = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
       {
+        ...restCancelButtonProps,
+        type: "button",
         className: joinClassNames(
-          `${REACT_COMPONENT_PREFIX}-input-number`,
-          focused && `${REACT_COMPONENT_PREFIX}-input-number-focused`,
-          disabled && `${REACT_COMPONENT_PREFIX}-input-number-disabled`,
-          className
+          `${REACT_COMPONENT_PREFIX}-modal-button`,
+          cancelButtonClassName
         ),
-        style,
+        disabled: mergedConfirmLoading || cancelButtonDisabled,
+        onClick: onCancel,
+        children: cancelText
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        ...restOkButtonProps,
+        type: "button",
+        className: joinClassNames(
+          `${REACT_COMPONENT_PREFIX}-modal-button`,
+          `${REACT_COMPONENT_PREFIX}-modal-button-primary`,
+          okButtonClassName
+        ),
+        disabled: mergedConfirmLoading || okButtonDisabled,
+        onClick: handleOk,
         children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
+          mergedConfirmLoading ? /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
             {
-              type: "button",
-              tabIndex: -1,
-              disabled: disabled || atMin,
-              className: joinClassNames(
-                `${REACT_COMPONENT_PREFIX}-input-number-handler`,
-                `${REACT_COMPONENT_PREFIX}-input-number-handler-down`
-              ),
-              "aria-label": "\u51CF\u5C11",
-              onMouseDown: (event) => {
-                event.preventDefault();
-              },
-              onClick: () => {
-                stepBy(-1);
-              },
-              children: /* @__PURE__ */ jsxRuntime.jsx(
-                "span",
-                {
-                  className: `${REACT_COMPONENT_PREFIX}-input-number-handler-icon`,
-                  "aria-hidden": "true"
-                }
-              )
+              className: `${REACT_COMPONENT_PREFIX}-modal-loading`,
+              "aria-hidden": "true"
             }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: `${REACT_COMPONENT_PREFIX}-input-number-input-wrap`, children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "input",
-              {
-                ...restProps,
-                ref,
-                disabled,
-                inputMode: "decimal",
-                value: draftText,
-                className: `${REACT_COMPONENT_PREFIX}-input-number-input`,
-                onFocus: (event) => {
-                  setFocused(true);
-                  onFocus?.(event);
-                },
-                onChange: (event) => {
-                  const nextText = event.target.value;
-                  setDraftText(nextText);
-                  const parsed = parser ? parser(nextText) : parseNumberText(nextText);
-                  if (!isControlled) {
-                    setInnerValue(parsed);
-                  }
-                  onChange?.(parsed);
-                },
-                onBlur: (event) => {
-                  setFocused(false);
-                  const parsed = parser ? parser(event.target.value) : parseNumberText(event.target.value);
-                  commitValue(parsed);
-                  onBlur?.(event);
-                },
-                onKeyDown: (event) => {
-                  if (event.key === "ArrowUp") {
-                    event.preventDefault();
-                    stepBy(1);
-                  } else if (event.key === "ArrowDown") {
-                    event.preventDefault();
-                    stepBy(-1);
-                  } else if (event.key === "Enter") {
-                    const parsed = parser ? parser(event.currentTarget.value) : parseNumberText(event.currentTarget.value);
-                    commitValue(parsed);
-                  }
-                  onKeyDown?.(event);
+          ) : null,
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: okText })
+        ]
+      }
+    )
+  ] });
+  return reactDom.createPortal(
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: joinClassNames(
+          `${REACT_COMPONENT_PREFIX}-modal-root`,
+          !mask && `${REACT_COMPONENT_PREFIX}-modal-root-passthrough`,
+          centered && `${REACT_COMPONENT_PREFIX}-modal-root-centered`,
+          mergedFullscreen && `${REACT_COMPONENT_PREFIX}-modal-root-fullscreen`,
+          transition.className,
+          rootClassName
+        ),
+        style: { zIndex },
+        children: [
+          mask ? /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: `${REACT_COMPONENT_PREFIX}-modal-mask`,
+              style: maskStyle,
+              "aria-hidden": "true",
+              onMouseDown: (event) => {
+                if (maskClosable && event.target === event.currentTarget) {
+                  onCancel?.(event);
                 }
               }
-            ),
-            addonAfter != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${REACT_COMPONENT_PREFIX}-input-number-addon`, children: addonAfter }) : null
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "button",
+            }
+          ) : null,
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${REACT_COMPONENT_PREFIX}-modal-wrap`, children: /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
             {
-              type: "button",
-              tabIndex: -1,
-              disabled: disabled || atMax,
+              ref: panelRef,
               className: joinClassNames(
-                `${REACT_COMPONENT_PREFIX}-input-number-handler`,
-                `${REACT_COMPONENT_PREFIX}-input-number-handler-up`
+                `${REACT_COMPONENT_PREFIX}-modal`,
+                mergedFullscreen && `${REACT_COMPONENT_PREFIX}-modal-fullscreen`,
+                className
               ),
-              "aria-label": "\u589E\u52A0",
-              onMouseDown: (event) => {
-                event.preventDefault();
-              },
-              onClick: () => {
-                stepBy(1);
+              style: {
+                width,
+                ...style,
+                ...draggable && !mergedFullscreen ? {
+                  position: "relative",
+                  left: dragOffset.x,
+                  top: dragOffset.y
+                } : void 0
               },
-              children: /* @__PURE__ */ jsxRuntime.jsx(
-                "span",
-                {
-                  className: `${REACT_COMPONENT_PREFIX}-input-number-handler-icon`,
-                  "aria-hidden": "true"
-                }
-              )
+              role: "dialog",
+              "aria-modal": mask ? "true" : void 0,
+              "aria-label": hasTitle ? void 0 : "\u5BF9\u8BDD\u6846",
+              "aria-labelledby": hasTitle ? titleId : void 0,
+              tabIndex: -1,
+              children: [
+                hasTitle || closable || fullscreenable ? /* @__PURE__ */ jsxRuntime.jsxs(
+                  "div",
+                  {
+                    className: joinClassNames(
+                      `${REACT_COMPONENT_PREFIX}-modal-header`,
+                      draggable && !mergedFullscreen ? `${REACT_COMPONENT_PREFIX}-modal-header-draggable` : void 0
+                    ),
+                    onMouseDown: (event) => {
+                      if (!draggable || mergedFullscreen || event.button !== 0) {
+                        return;
+                      }
+                      if (event.target.closest("button")) {
+                        return;
+                      }
+                      dragRef.current = {
+                        startX: event.clientX,
+                        startY: event.clientY,
+                        offsetX: dragOffset.x,
+                        offsetY: dragOffset.y
+                      };
+                      event.preventDefault();
+                    },
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        "div",
+                        {
+                          id: hasTitle ? titleId : void 0,
+                          className: `${REACT_COMPONENT_PREFIX}-modal-title`,
+                          children: title
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${REACT_COMPONENT_PREFIX}-modal-tools`, children: [
+                        fullscreenable ? /* @__PURE__ */ jsxRuntime.jsx(
+                          "button",
+                          {
+                            type: "button",
+                            className: `${REACT_COMPONENT_PREFIX}-modal-tool`,
+                            title: mergedFullscreen ? "\u9000\u51FA\u5168\u5C4F" : "\u5168\u5C4F",
+                            "aria-label": mergedFullscreen ? "\u9000\u51FA\u5168\u5C4F" : "\u5168\u5C4F",
+                            "aria-pressed": mergedFullscreen,
+                            onClick: () => setFullscreen(!mergedFullscreen),
+                            children: /* @__PURE__ */ jsxRuntime.jsx(
+                              "span",
+                              {
+                                className: joinClassNames(
+                                  `${REACT_COMPONENT_PREFIX}-modal-fullscreen-icon`,
+                                  mergedFullscreen && `${REACT_COMPONENT_PREFIX}-modal-fullscreen-icon-exit`
+                                ),
+                                "aria-hidden": "true"
+                              }
+                            )
+                          }
+                        ) : null,
+                        closable ? /* @__PURE__ */ jsxRuntime.jsx(
+                          "button",
+                          {
+                            type: "button",
+                            className: `${REACT_COMPONENT_PREFIX}-modal-tool`,
+                            title: "\u5173\u95ED",
+                            "aria-label": "\u5173\u95ED",
+                            onClick: onCancel,
+                            children: /* @__PURE__ */ jsxRuntime.jsx(
+                              "span",
+                              {
+                                className: `${REACT_COMPONENT_PREFIX}-modal-close-icon`,
+                                "aria-hidden": "true"
+                              }
+                            )
+                          }
+                        ) : null
+                      ] })
+                    ]
+                  }
+                ) : null,
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "div",
+                  {
+                    className: `${REACT_COMPONENT_PREFIX}-modal-body`,
+                    style: bodyStyle,
+                    children
+                  }
+                ),
+                footer === false ? null : /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${REACT_COMPONENT_PREFIX}-modal-footer`, children: footer ?? defaultFooter })
+              ]
             }
-          )
+          ) })
         ]
       }
-    );
-  }
-);
-function parseNumberText(value) {
-  const text = value.trim().replace(/%/g, "");
-  if (!text) {
-    return null;
-  }
-  const nextValue = Number(text);
-  return Number.isFinite(nextValue) ? nextValue : null;
+    ),
+    container
+  );
 }
-function resolvePrecision(precision, step) {
-  if (typeof precision === "number" && Number.isInteger(precision) && precision >= 0) {
-    return precision;
-  }
-  const stepText = String(step);
-  if (!stepText.includes(".")) {
-    return 0;
+function resolveContainer(getContainer) {
+  if (typeof document === "undefined") {
+    return null;
   }
-  return stepText.split(".")[1]?.length ?? 0;
+  return typeof getContainer === "function" ? getContainer() : getContainer ?? document.body;
 }
-function normalizeNumberValue(value, options) {
-  if (value == null || !Number.isFinite(value)) {
-    return null;
+function trapFocus(event, panel) {
+  if (!panel) {
+    return;
   }
-  let next = value;
-  if (options.min != null) {
-    next = Math.max(options.min, next);
+  const focusableElements = Array.from(
+    panel.querySelectorAll(FOCUSABLE_SELECTOR)
+  ).filter((element) => element.offsetParent !== null);
+  if (focusableElements.length === 0) {
+    event.preventDefault();
+    panel.focus();
+    return;
   }
-  if (options.max != null) {
-    next = Math.min(options.max, next);
+  const first = focusableElements[0];
+  const last = focusableElements[focusableElements.length - 1];
+  const active = document.activeElement;
+  if (event.shiftKey && (active === first || !panel.contains(active))) {
+    event.preventDefault();
+    last.focus();
+  } else if (!event.shiftKey && (active === last || !panel.contains(active))) {
+    event.preventDefault();
+    first.focus();
   }
-  const factor = 10 ** options.precision;
-  return Math.round(next * factor) / factor;
 }
-function formatDisplayValue(value, formatter, precision, step) {
-  if (formatter) {
-    return formatter(value);
+function lockBodyScroll() {
+  if (bodyScrollLockCount === 0) {
+    bodyOverflowBeforeLock = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
   }
-  if (value == null || !Number.isFinite(value)) {
-    return "";
+  bodyScrollLockCount += 1;
+}
+function unlockBodyScroll() {
+  bodyScrollLockCount = Math.max(0, bodyScrollLockCount - 1);
+  if (bodyScrollLockCount === 0) {
+    document.body.style.overflow = bodyOverflowBeforeLock;
   }
-  const digits = resolvePrecision(precision, step);
-  return digits > 0 ? value.toFixed(digits) : String(Math.round(value));
+}
+function isPromiseLike(value) {
+  return typeof value === "object" && value !== null && "then" in value && typeof value.then === "function";
 }
 
-// src/components/virtual-list/style.css
-styleInject('@import "../../styles/variables.css";\n.canvas-react-virtual-list {\n  position: relative;\n  overflow-y: auto;\n}\n.canvas-react-virtual-list-inner {\n  position: relative;\n  min-width: 100%;\n}\n.canvas-react-virtual-list-empty {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  padding: 0 11px;\n  color: #9ca3af;\n  font-size: var(--canvas-react-font-size);\n}\n');
-var ReactVirtualList = React.forwardRef(function ReactVirtualListInner(props, ref) {
-  const {
-    className,
-    empty,
-    height,
-    innerClassName,
-    itemHeight,
-    itemKey,
-    items,
-    overscan = 2,
-    renderItem,
-    style,
-    virtual = true
-  } = props;
-  const hostRef = React.useRef(null);
-  const [scrollTop, setScrollTop] = React.useState(0);
-  const useVirtual = virtual && items.length * itemHeight > height;
-  const startIndex = useVirtual ? Math.max(0, Math.floor(scrollTop / itemHeight) - overscan) : 0;
-  const endIndex = useVirtual ? Math.min(
-    items.length - 1,
-    Math.ceil((scrollTop + height) / itemHeight) + overscan
-  ) : items.length - 1;
-  const visibleItems = React.useMemo(
-    () => items.slice(startIndex, endIndex + 1),
-    [endIndex, items, startIndex]
-  );
-  React.useImperativeHandle(ref, () => ({
-    scrollToIndex: (index) => {
-      const element = hostRef.current;
-      if (!element || index < 0) {
-        return;
-      }
-      const itemTop = index * itemHeight;
-      const itemBottom = itemTop + itemHeight;
-      const viewportTop = element.scrollTop;
-      const viewportBottom = viewportTop + height;
-      if (itemTop < viewportTop) {
-        element.scrollTop = itemTop;
-        return;
-      }
-      if (itemBottom > viewportBottom) {
-        element.scrollTop = itemBottom - height;
-      }
-    },
-    element: hostRef.current
-  }));
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      ref: hostRef,
-      className: joinClassNames(`${REACT_COMPONENT_PREFIX}-virtual-list`, className),
-      style: { height, ...style },
-      onScroll: (event) => {
-        setScrollTop(event.currentTarget.scrollTop);
-      },
-      children: items.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${REACT_COMPONENT_PREFIX}-virtual-list-empty`, children: empty ?? "\u6682\u65E0\u6570\u636E" }) : /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          className: joinClassNames(
-            `${REACT_COMPONENT_PREFIX}-virtual-list-inner`,
-            innerClassName
-          ),
-          style: { height: items.length * itemHeight },
-          children: visibleItems.map((item, index) => {
-            const itemIndex = startIndex + index;
-            return renderItem(item, itemIndex, {
-              style: useVirtual ? {
-                position: "absolute",
-                top: itemIndex * itemHeight,
-                left: 0,
-                right: 0,
-                height: itemHeight
-              } : {
-                height: itemHeight
-              }
-            });
-          })
-        }
-      )
-    }
-  );
-});
-
-// src/components/select/style.css
-styleInject('@import "../../styles/variables.css";\n.canvas-react-select-wrap {\n  position: relative;\n  display: inline-flex;\n  width: 100%;\n  height: 100%;\n}\n.canvas-react-select {\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: center;\n  width: 100%;\n  min-width: 0;\n  height: var(--canvas-react-control-height);\n  padding: var(--canvas-react-control-padding-block, 0px) var(--canvas-react-control-padding-inline, 11px);\n  border: 1px solid var(--canvas-react-color-border);\n  border-radius: var(--canvas-react-radius-sm);\n  background: var(--canvas-react-color-bg);\n  color: var(--canvas-react-color-text);\n  font-size: var(--canvas-react-font-size);\n  outline: none;\n  cursor: pointer;\n  transition:\n    border-color 0.2s ease,\n    box-shadow 0.2s ease,\n    background-color 0.2s ease;\n}\n.canvas-react-select-input-wrap {\n  flex: 1 1 auto;\n  width: 100%;\n  height: 100%;\n  border: none;\n  background: transparent;\n  box-shadow: none;\n}\n.canvas-react-select .canvas-react-input-affix-wrapper {\n  height: 100%;\n  min-height: 0;\n}\n.canvas-react-select-input-wrap:hover,\n.canvas-react-select-input-wrap:focus-within {\n  border-color: transparent;\n  box-shadow: none;\n}\n.canvas-react-select-input {\n  width: 100%;\n  min-width: 0;\n  height: 100%;\n  padding: 0;\n  line-height: normal;\n}\n.canvas-react-select-input::placeholder {\n  color: #9ca3af;\n}\n.canvas-react-select:hover {\n  border-color: var(--canvas-react-color-primary-hover);\n}\n.canvas-react-select:focus {\n  border-color: var(--canvas-react-color-primary);\n  box-shadow: var(--canvas-react-shadow-focus);\n}\n.canvas-react-select-open {\n  border-color: var(--canvas-react-color-primary);\n  box-shadow: var(--canvas-react-shadow-focus);\n}\n.canvas-react-select-disabled {\n  color: #9ca3af;\n  background: #fafafa;\n  cursor: not-allowed;\n}\n.canvas-react-select-actions {\n  position: relative;\n  display: inline-flex;\n  flex: 0 0 auto;\n  align-items: center;\n  justify-content: center;\n  width: 1em;\n  min-width: 12px;\n  height: 1em;\n  min-height: 12px;\n  margin-left: max(6px, calc(var(--canvas-react-control-padding-inline, 11px) * 0.5));\n}\n.canvas-react-select-arrow {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: 0.5em;\n  height: 0.5em;\n  min-width: 6px;\n  min-height: 6px;\n  border-right: 1.5px solid var(--canvas-react-color-text-muted);\n  border-bottom: 1.5px solid var(--canvas-react-color-text-muted);\n  transform: translate(-50%, -58%) rotate(45deg);\n  opacity: 1;\n  transition:\n    opacity 0.18s ease,\n    transform 0.18s ease,\n    border-color 0.18s ease;\n}\n.canvas-react-select:hover .canvas-react-select-arrow,\n.canvas-react-select-open .canvas-react-select-arrow {\n  border-color: #6b7280;\n}\n.canvas-react-select-arrow-open {\n  border-color: #6b7280;\n  transform: translate(-50%, -42%) rotate(225deg);\n}\n.canvas-react-select-clear {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 12px;\n  height: 12px;\n  padding: 0;\n  border: none;\n  background: transparent;\n  color: #9ca3af;\n  opacity: 0;\n  pointer-events: none;\n  cursor: pointer;\n  transform: translate(-50%, -50%) rotate(0deg);\n  transition:\n    color 0.2s ease,\n    opacity 0.2s ease,\n    transform 0.18s ease;\n}\n.canvas-react-select-clear:hover {\n  color: #6b7280;\n  transform: translate(-50%, -50%) rotate(90deg);\n}\n.canvas-react-select:hover .canvas-react-select-clear,\n.canvas-react-select-open .canvas-react-select-clear,\n.canvas-react-select:focus-within .canvas-react-select-clear {\n  opacity: 1;\n  pointer-events: auto;\n}\n.canvas-react-select:hover .canvas-react-select-actions-clearable .canvas-react-select-arrow,\n.canvas-react-select-open .canvas-react-select-actions-clearable .canvas-react-select-arrow,\n.canvas-react-select:focus-within .canvas-react-select-actions-clearable .canvas-react-select-arrow {\n  opacity: 0;\n}\n.canvas-react-select-clear-icon,\n.canvas-react-select-clear-icon::before {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: 8px;\n  height: 1.25px;\n  margin-top: -0.625px;\n  margin-left: -4px;\n  border-radius: 999px;\n  background: currentColor;\n  content: "";\n}\n.canvas-react-select-clear-icon {\n  transform: rotate(45deg);\n}\n.canvas-react-select-clear-icon::before {\n  transform: rotate(90deg);\n}\n.canvas-react-select-dropdown {\n  padding: 4px;\n}\n.canvas-react-select-list {\n  position: relative;\n  overflow-y: auto;\n}\n.canvas-react-select-list-inner {\n  position: relative;\n}\n.canvas-react-select-option {\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  width: 100%;\n  padding: 0 11px;\n  border-radius: var(--canvas-react-radius-sm);\n  color: var(--canvas-react-color-text);\n  font-size: var(--canvas-react-font-size);\n  cursor: pointer;\n}\n.canvas-react-select-option:hover,\n.canvas-react-select-option-active {\n  background: var(--canvas-react-color-bg-hover);\n}\n.canvas-react-select-option-selected {\n  background: var(--canvas-react-color-bg-active);\n  color: var(--canvas-react-color-primary);\n}\n.canvas-react-select-option-disabled {\n  color: #9ca3af;\n  cursor: not-allowed;\n}\n.canvas-react-select-empty {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  padding: 0 11px;\n  color: #9ca3af;\n  font-size: var(--canvas-react-font-size);\n}\n');
-var ReactSelect = React.forwardRef(
-  function ReactSelect2(props, ref) {
+// src/components/input-number/style.css
+styleInject('@import "../../styles/variables.css";\n.canvas-react-input-number {\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: stretch;\n  width: 100%;\n  min-width: 0;\n  height: var(--canvas-react-control-height);\n  border: 1px solid var(--canvas-react-color-border);\n  border-radius: var(--canvas-react-radius-sm);\n  background: var(--canvas-react-color-bg);\n  color: var(--canvas-react-color-text);\n  font-size: var(--canvas-react-font-size);\n  overflow: hidden;\n  transition:\n    border-color 0.2s ease,\n    box-shadow 0.2s ease,\n    background-color 0.2s ease;\n}\n.canvas-react-input-number:hover {\n  border-color: var(--canvas-react-color-primary-hover);\n}\n.canvas-react-input-number-focused {\n  border-color: var(--canvas-react-color-primary);\n  box-shadow: var(--canvas-react-shadow-focus);\n}\n.canvas-react-input-number-disabled {\n  background: #fafafa;\n  color: #9ca3af;\n  cursor: not-allowed;\n}\n.canvas-react-input-number-handler {\n  position: relative;\n  display: flex;\n  flex: 0 0 28px;\n  align-items: center;\n  justify-content: center;\n  margin: 0;\n  padding: 0;\n  border: none;\n  background: transparent;\n  color: var(--canvas-react-color-text-muted);\n  cursor: pointer;\n  transition: color 0.16s ease, background-color 0.16s ease;\n}\n.canvas-react-input-number-handler-down {\n  border-right: 1px solid var(--canvas-react-color-border);\n}\n.canvas-react-input-number-handler-up {\n  border-left: 1px solid var(--canvas-react-color-border);\n}\n.canvas-react-input-number-handler:hover:not(:disabled) {\n  color: var(--canvas-react-color-primary);\n  background: rgba(22, 119, 255, 0.06);\n}\n.canvas-react-input-number-handler:disabled {\n  color: #c4c7cf;\n  cursor: not-allowed;\n}\n.canvas-react-input-number-handler-icon {\n  position: relative;\n  display: block;\n  width: 10px;\n  height: 10px;\n}\n.canvas-react-input-number-handler-icon::before,\n.canvas-react-input-number-handler-icon::after {\n  content: "";\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  background: currentColor;\n  border-radius: 1px;\n  transform: translate(-50%, -50%);\n}\n.canvas-react-input-number-handler-icon::before {\n  width: 10px;\n  height: 1.5px;\n}\n.canvas-react-input-number-handler-up .canvas-react-input-number-handler-icon::after {\n  width: 1.5px;\n  height: 10px;\n}\n.canvas-react-input-number-input-wrap {\n  display: flex;\n  flex: 1 1 auto;\n  align-items: center;\n  min-width: 0;\n  height: 100%;\n}\n.canvas-react-input-number-input {\n  box-sizing: border-box;\n  width: 100%;\n  min-width: 0;\n  height: 100%;\n  padding: 0 8px;\n  border: none;\n  background: transparent;\n  color: inherit;\n  font-size: inherit;\n  outline: none;\n  text-align: center;\n  appearance: textfield;\n  -moz-appearance: textfield;\n}\n.canvas-react-input-number-input::placeholder {\n  color: #9ca3af;\n}\n.canvas-react-input-number-input::-webkit-outer-spin-button,\n.canvas-react-input-number-input::-webkit-inner-spin-button {\n  margin: 0;\n  -webkit-appearance: none;\n}\n.canvas-react-input-number-addon {\n  flex: 0 0 auto;\n  padding-right: 8px;\n  color: var(--canvas-react-color-text-muted);\n  font-size: 12px;\n  line-height: 1;\n  user-select: none;\n}\n');
+var ReactInputNumber = React.forwardRef(
+  function ReactInputNumber2(props, ref) {
     const {
-      autoFocus,
+      addonAfter,
       className,
+      defaultValue = null,
       disabled,
+      formatter,
+      max,
+      min,
       onBlur,
       onChange,
+      onCommit,
       onFocus,
       onKeyDown,
-      options,
-      optionHeight = 32,
-      listHeight = 224,
-      placeholder,
-      popupClassName,
-      allowClear = true,
-      showArrow = true,
-      showSearch = false,
+      parser,
+      precision,
+      step = 1,
       style,
       value,
-      virtual = true,
       ...restProps
     } = props;
-    const triggerRef = React.useRef(null);
-    const inputRef = React.useRef(null);
-    const listRef = React.useRef(null);
-    const skipFocusOpenRef = React.useRef(false);
-    const [open, setOpen] = React.useState(false);
-    const selectedIndex = React.useMemo(
-      () => options.findIndex((option) => String(option.value) === String(value ?? "")),
-      [options, value]
+    const isControlled = value !== void 0;
+    const [innerValue, setInnerValue] = React.useState(
+      isControlled ? value ?? null : defaultValue
+    );
+    const currentValue = isControlled ? value ?? null : innerValue;
+    const [draftText, setDraftText] = React.useState(
+      formatDisplayValue(
+        currentValue,
+        formatter,
+        resolvePrecision(precision, step),
+        step
+      )
+    );
+    const [focused, setFocused] = React.useState(false);
+    const resolvedPrecision = React.useMemo(
+      () => resolvePrecision(precision, step),
+      [precision, step]
     );
-    const selectedOption = selectedIndex >= 0 ? options[selectedIndex] : void 0;
-    const [keyword, setKeyword] = React.useState(selectedOption?.label ?? "");
-    const filteredOptions = React.useMemo(() => {
-      if (!showSearch) {
-        return options;
-      }
-      const search = keyword.trim().toLowerCase();
-      if (!search) {
-        return options;
-      }
-      return options.filter((option) => {
-        return option.label.toLowerCase().includes(search) || String(option.value).toLowerCase().includes(search);
-      });
-    }, [keyword, options]);
-    const [activeIndex, setActiveIndex] = React.useState(() => {
-      return selectedIndex >= 0 ? selectedIndex : 0;
-    });
-    React.useImperativeHandle(ref, () => inputRef.current);
     React.useEffect(() => {
-      if (autoFocus) {
-        inputRef.current?.focus();
+      if (!focused) {
+        setDraftText(
+          formatDisplayValue(currentValue, formatter, resolvedPrecision, step)
+        );
       }
-    }, [autoFocus]);
-    React.useEffect(() => {
-      if (!open) {
-        setKeyword(selectedOption?.label ?? "");
+    }, [currentValue, focused, formatter, resolvedPrecision, step]);
+    const commitValue = (nextValue) => {
+      const normalized = normalizeNumberValue(nextValue, {
+        min,
+        max,
+        precision: resolvedPrecision
+      });
+      if (!isControlled) {
+        setInnerValue(normalized);
       }
-    }, [open, selectedOption]);
-    React.useEffect(() => {
-      const nextIndex = filteredOptions.findIndex(
-        (option) => String(option.value) === String(value ?? "")
+      onChange?.(normalized);
+      onCommit?.(normalized);
+      setDraftText(
+        formatDisplayValue(normalized, formatter, resolvedPrecision, step)
       );
-      setActiveIndex(nextIndex >= 0 ? nextIndex : 0);
-    }, [filteredOptions, value]);
-    React.useEffect(() => {
-      if (!open) {
+      return normalized;
+    };
+    const stepBy = (direction) => {
+      if (disabled) {
         return;
       }
-      listRef.current?.scrollToIndex(activeIndex);
-    }, [activeIndex, listHeight, open, optionHeight]);
-    const selectOption = (option) => {
-      onChange?.(String(option.value));
-      setKeyword(option.label);
-      setOpen(false);
-      inputRef.current?.focus();
-    };
-    const hasValue = value != null && String(value).length > 0;
-    const showClear = allowClear && !disabled && hasValue;
-    const handleClear = (event) => {
-      event.preventDefault();
-      event.stopPropagation();
-      skipFocusOpenRef.current = true;
-      setKeyword("");
-      setOpen(false);
-      onChange?.("");
-      inputRef.current?.blur();
+      const base = currentValue == null || !Number.isFinite(currentValue) ? 0 : currentValue;
+      const next = base + direction * step;
+      commitValue(next);
     };
-    return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: `${REACT_COMPONENT_PREFIX}-select-wrap`, children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(
-        "div",
-        {
-          ref: triggerRef,
-          className: joinClassNames(
-            `${REACT_COMPONENT_PREFIX}-select`,
-            open && `${REACT_COMPONENT_PREFIX}-select-open`,
-            disabled && `${REACT_COMPONENT_PREFIX}-select-disabled`,
-            className
-          ),
-          style,
-          onClick: (event) => {
-            if (disabled) {
-              return;
-            }
-            if (event.target?.closest(
-              `.${REACT_COMPONENT_PREFIX}-select-clear`
-            )) {
-              return;
-            }
-            if (event.target?.closest(
-              `.${REACT_COMPONENT_PREFIX}-select-arrow`
-            )) {
-              return;
-            }
-            inputRef.current?.focus();
-            if (!open) {
-              setOpen(true);
+    const atMin = currentValue != null && min != null && currentValue <= min + Number.EPSILON;
+    const atMax = currentValue != null && max != null && currentValue >= max - Number.EPSILON;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "span",
+      {
+        className: joinClassNames(
+          `${REACT_COMPONENT_PREFIX}-input-number`,
+          focused && `${REACT_COMPONENT_PREFIX}-input-number-focused`,
+          disabled && `${REACT_COMPONENT_PREFIX}-input-number-disabled`,
+          className
+        ),
+        style,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              tabIndex: -1,
+              disabled: disabled || atMin,
+              className: joinClassNames(
+                `${REACT_COMPONENT_PREFIX}-input-number-handler`,
+                `${REACT_COMPONENT_PREFIX}-input-number-handler-down`
+              ),
+              "aria-label": "\u51CF\u5C11",
+              onMouseDown: (event) => {
+                event.preventDefault();
+              },
+              onClick: () => {
+                stepBy(-1);
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  className: `${REACT_COMPONENT_PREFIX}-input-number-handler-icon`,
+                  "aria-hidden": "true"
+                }
+              )
             }
-          },
-          children: [
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: `${REACT_COMPONENT_PREFIX}-input-number-input-wrap`, children: [
             /* @__PURE__ */ jsxRuntime.jsx(
-              ReactInput,
+              "input",
               {
                 ...restProps,
-                ref: inputRef,
-                allowClear: false,
+                ref,
                 disabled,
-                readOnly: !showSearch,
-                value: open && showSearch ? keyword : selectedOption?.label ?? "",
-                className: joinClassNames(`${REACT_COMPONENT_PREFIX}-select-input`),
-                wrapperClassName: `${REACT_COMPONENT_PREFIX}-select-input-wrap`,
-                placeholder,
+                inputMode: "decimal",
+                value: draftText,
+                className: `${REACT_COMPONENT_PREFIX}-input-number-input`,
                 onFocus: (event) => {
-                  if (skipFocusOpenRef.current) {
-                    skipFocusOpenRef.current = false;
-                    onFocus?.(event);
-                    return;
-                  }
-                  if (!open) {
-                    setOpen(true);
-                  }
-                  if (!open && showSearch) {
-                    setKeyword(selectedOption?.label ?? "");
-                  }
+                  setFocused(true);
                   onFocus?.(event);
                 },
-                onBlur: (event) => {
-                  setOpen(false);
-                  if ((!keyword.trim() || !showSearch) && selectedOption) {
-                    setKeyword(selectedOption.label);
-                  }
-                  onBlur?.(event);
-                },
                 onChange: (event) => {
-                  if (!showSearch) {
-                    return;
+                  const nextText = event.target.value;
+                  setDraftText(nextText);
+                  const parsed = parser ? parser(nextText) : parseNumberText(nextText);
+                  if (!isControlled) {
+                    setInnerValue(parsed);
                   }
-                  setKeyword(event.target.value);
-                  setOpen(true);
+                  onChange?.(parsed);
+                },
+                onBlur: (event) => {
+                  setFocused(false);
+                  const parsed = parser ? parser(event.target.value) : parseNumberText(event.target.value);
+                  commitValue(parsed);
+                  onBlur?.(event);
                 },
                 onKeyDown: (event) => {
-                  onKeyDown?.(event);
-                  if (event.defaultPrevented) {
-                    return;
-                  }
-                  if (disabled) {
-                    return;
-                  }
-                  if (event.key === "ArrowDown") {
-                    event.preventDefault();
-                    if (!open) {
-                      setOpen(true);
-                      return;
-                    }
-                    setActiveIndex(
-                      (prev) => Math.min(prev + 1, Math.max(filteredOptions.length - 1, 0))
-                    );
-                    return;
-                  }
                   if (event.key === "ArrowUp") {
                     event.preventDefault();
-                    if (!open) {
-                      setOpen(true);
-                      return;
-                    }
-                    setActiveIndex((prev) => Math.max(prev - 1, 0));
-                    return;
-                  }
-                  if (event.key === "Enter") {
+                    stepBy(1);
+                  } else if (event.key === "ArrowDown") {
                     event.preventDefault();
-                    if (!open) {
-                      setOpen(true);
-                      return;
-                    }
-                    const targetOption = filteredOptions[activeIndex];
-                    if (targetOption && !targetOption.disabled) {
-                      selectOption(targetOption);
-                    }
-                    return;
-                  }
-                  if (event.key === "Escape") {
-                    setKeyword(selectedOption?.label ?? "");
-                    setOpen(false);
-                  }
-                }
-              }
-            ),
-            showClear || showArrow ? /* @__PURE__ */ jsxRuntime.jsxs(
-              "span",
-              {
-                className: joinClassNames(
-                  `${REACT_COMPONENT_PREFIX}-select-actions`,
-                  showClear && `${REACT_COMPONENT_PREFIX}-select-actions-clearable`
-                ),
-                children: [
-                  showClear ? /* @__PURE__ */ jsxRuntime.jsx(
-                    "button",
-                    {
-                      type: "button",
-                      className: `${REACT_COMPONENT_PREFIX}-select-clear`,
-                      "aria-label": "\u6E05\u7A7A",
-                      tabIndex: -1,
-                      onMouseDown: (event) => {
-                        event.preventDefault();
-                        event.stopPropagation();
-                      },
-                      onClick: handleClear,
-                      children: /* @__PURE__ */ jsxRuntime.jsx(
-                        "span",
-                        {
-                          className: `${REACT_COMPONENT_PREFIX}-select-clear-icon`
-                        }
-                      )
-                    }
-                  ) : null,
-                  showArrow ? /* @__PURE__ */ jsxRuntime.jsx(
-                    "span",
-                    {
-                      className: joinClassNames(
-                        `${REACT_COMPONENT_PREFIX}-select-arrow`,
-                        open && `${REACT_COMPONENT_PREFIX}-select-arrow-open`
-                      )
-                    }
-                  ) : null
-                ]
-              }
-            ) : null
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        ReactPopup,
-        {
-          open,
-          anchorRef: triggerRef,
-          matchAnchorWidth: true,
-          surfaceClassName: joinClassNames(
-            `${REACT_COMPONENT_PREFIX}-select-dropdown`,
-            popupClassName
-          ),
-          onOpenChange: setOpen,
-          children: /* @__PURE__ */ jsxRuntime.jsx(
-            ReactVirtualList,
+                    stepBy(-1);
+                  } else if (event.key === "Enter") {
+                    const parsed = parser ? parser(event.currentTarget.value) : parseNumberText(event.currentTarget.value);
+                    commitValue(parsed);
+                  }
+                  onKeyDown?.(event);
+                }
+              }
+            ),
+            addonAfter != null ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${REACT_COMPONENT_PREFIX}-input-number-addon`, children: addonAfter }) : null
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
             {
-              ref: listRef,
-              items: filteredOptions,
-              height: Math.min(
-                listHeight,
-                Math.max(filteredOptions.length, 1) * optionHeight
+              type: "button",
+              tabIndex: -1,
+              disabled: disabled || atMax,
+              className: joinClassNames(
+                `${REACT_COMPONENT_PREFIX}-input-number-handler`,
+                `${REACT_COMPONENT_PREFIX}-input-number-handler-up`
               ),
-              itemHeight: optionHeight,
-              virtual,
-              className: `${REACT_COMPONENT_PREFIX}-select-list`,
-              innerClassName: `${REACT_COMPONENT_PREFIX}-select-list-inner`,
-              empty: /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${REACT_COMPONENT_PREFIX}-select-empty`, children: "\u6682\u65E0\u6570\u636E" }),
-              itemKey: (option) => String(option.value),
-              renderItem: (option, optionIndex, meta) => {
-                const isSelected = String(option.value) === String(value ?? "");
-                const isActive = optionIndex === activeIndex;
-                return /* @__PURE__ */ jsxRuntime.jsx(
-                  "div",
-                  {
-                    className: joinClassNames(
-                      `${REACT_COMPONENT_PREFIX}-select-option`,
-                      isSelected && `${REACT_COMPONENT_PREFIX}-select-option-selected`,
-                      isActive && `${REACT_COMPONENT_PREFIX}-select-option-active`,
-                      option.disabled && `${REACT_COMPONENT_PREFIX}-select-option-disabled`
-                    ),
-                    style: meta.style,
-                    onMouseDown: (event) => {
-                      event.preventDefault();
-                    },
-                    onMouseEnter: () => {
-                      setActiveIndex(optionIndex);
-                    },
-                    onClick: () => {
-                      if (option.disabled) {
-                        return;
-                      }
-                      selectOption(option);
-                    },
-                    children: option.label
-                  },
-                  String(option.value)
-                );
-              }
+              "aria-label": "\u589E\u52A0",
+              onMouseDown: (event) => {
+                event.preventDefault();
+              },
+              onClick: () => {
+                stepBy(1);
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  className: `${REACT_COMPONENT_PREFIX}-input-number-handler-icon`,
+                  "aria-hidden": "true"
+                }
+              )
             }
           )
-        }
-      )
-    ] });
+        ]
+      }
+    );
   }
 );
+function parseNumberText(value) {
+  const text = value.trim().replace(/%/g, "");
+  if (!text) {
+    return null;
+  }
+  const nextValue = Number(text);
+  return Number.isFinite(nextValue) ? nextValue : null;
+}
+function resolvePrecision(precision, step) {
+  if (typeof precision === "number" && Number.isInteger(precision) && precision >= 0) {
+    return precision;
+  }
+  const stepText = String(step);
+  if (!stepText.includes(".")) {
+    return 0;
+  }
+  return stepText.split(".")[1]?.length ?? 0;
+}
+function normalizeNumberValue(value, options) {
+  if (value == null || !Number.isFinite(value)) {
+    return null;
+  }
+  let next = value;
+  if (options.min != null) {
+    next = Math.max(options.min, next);
+  }
+  if (options.max != null) {
+    next = Math.min(options.max, next);
+  }
+  const factor = 10 ** options.precision;
+  return Math.round(next * factor) / factor;
+}
+function formatDisplayValue(value, formatter, precision, step) {
+  if (formatter) {
+    return formatter(value);
+  }
+  if (value == null || !Number.isFinite(value)) {
+    return "";
+  }
+  const digits = resolvePrecision(precision, step);
+  return digits > 0 ? value.toFixed(digits) : String(Math.round(value));
+}
 
 // src/components/pagination/style.css
 styleInject('@import "../../styles/variables.css";\n.canvas-react-pagination {\n  display: flex;\n  align-items: center;\n  flex-wrap: nowrap;\n  gap: 8px;\n  color: var(--canvas-react-color-text);\n  font-size: var(--canvas-react-font-size);\n  white-space: nowrap;\n}\n.canvas-react-pagination-pages {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  flex-wrap: nowrap;\n}\n.canvas-react-pagination-button,\n.canvas-react-pagination-page {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 32px;\n  height: 32px;\n  padding: 0 10px;\n  border: 1px solid var(--canvas-react-color-border);\n  border-radius: var(--canvas-react-radius-sm);\n  background: var(--canvas-react-color-bg);\n  color: var(--canvas-react-color-text);\n  cursor: pointer;\n  transition:\n    border-color 0.2s ease,\n    color 0.2s ease,\n    background-color 0.2s ease;\n}\n.canvas-react-pagination-button {\n  position: relative;\n  width: 32px;\n  min-width: 32px;\n  padding: 0;\n}\n.canvas-react-pagination-button:hover,\n.canvas-react-pagination-page:hover {\n  border-color: var(--canvas-react-color-primary-hover);\n  color: var(--canvas-react-color-primary-hover);\n}\n.canvas-react-pagination-page-active {\n  border-color: var(--canvas-react-color-primary);\n  background: var(--canvas-react-color-bg-active);\n  color: var(--canvas-react-color-primary);\n}\n.canvas-react-pagination-button:disabled,\n.canvas-react-pagination-page:disabled {\n  opacity: 0.48;\n  cursor: not-allowed;\n}\n.canvas-react-pagination-ellipsis {\n  color: var(--canvas-react-color-text-muted);\n}\n.canvas-react-pagination-arrow {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: 7px;\n  height: 7px;\n  border-right: 1.5px solid var(--canvas-react-color-text-muted);\n  border-bottom: 1.5px solid var(--canvas-react-color-text-muted);\n  transition:\n    border-color 0.18s ease,\n    transform 0.18s ease,\n    opacity 0.18s ease;\n}\n.canvas-react-pagination-arrow-prev {\n  transform: translate(-42%, -50%) rotate(135deg);\n}\n.canvas-react-pagination-arrow-next {\n  transform: translate(-58%, -50%) rotate(-45deg);\n}\n.canvas-react-pagination-button:hover .canvas-react-pagination-arrow {\n  border-color: var(--canvas-react-color-primary-hover);\n}\n.canvas-react-pagination-button:disabled .canvas-react-pagination-arrow {\n  opacity: 0.56;\n}\n.canvas-react-pagination-quick {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  flex-wrap: nowrap;\n}\n.canvas-react-pagination-total {\n  color: var(--canvas-react-color-text-muted);\n}\n');
@@ -5215,16 +6084,6 @@ function clampPage(page, totalPages) {
   }
   return Math.min(Math.max(1, Math.trunc(page)), totalPages);
 }
-var compatibleIdSeed = 0;
-function useCompatibleId(prefix = "canvas-react-id") {
-  const nativeUseId = React__namespace.useId;
-  const fallbackIdRef = React__namespace.useRef();
-  if (!fallbackIdRef.current) {
-    compatibleIdSeed += 1;
-    fallbackIdRef.current = `${prefix}-${compatibleIdSeed}`;
-  }
-  return nativeUseId ? nativeUseId() : fallbackIdRef.current;
-}
 
 // src/components/popconfirm/style.css
 styleInject('@import "../../styles/variables.css";\n.canvas-react-popconfirm-trigger {\n  display: inline-flex;\n  max-width: 100%;\n}\n.canvas-react-popconfirm-trigger-disabled {\n  cursor: not-allowed;\n}\n.canvas-react-popconfirm-popup {\n  overflow: visible;\n}\n.canvas-react-popconfirm {\n  position: relative;\n  box-sizing: border-box;\n  width: max-content;\n  min-width: 180px;\n  max-width: 320px;\n  padding: 12px;\n  color: var(--canvas-react-color-text);\n  font-size: var(--canvas-react-font-size);\n  line-height: 1.5;\n}\n.canvas-react-popconfirm-arrow {\n  position: absolute;\n  z-index: 1;\n  box-sizing: border-box;\n  width: 10px;\n  height: 10px;\n  border: 0;\n  background: var(--canvas-react-color-bg, #ffffff);\n  pointer-events: none;\n  transform: rotate(45deg);\n}\n.canvas-react-popup[data-placement^=bottom] .canvas-react-popconfirm-arrow {\n  top: -5px;\n  border-top: 1px solid var(--canvas-react-color-border, #d9d9d9);\n  border-left: 1px solid var(--canvas-react-color-border, #d9d9d9);\n}\n.canvas-react-popup[data-placement^=top] .canvas-react-popconfirm-arrow {\n  bottom: -5px;\n  border-right: 1px solid var(--canvas-react-color-border, #d9d9d9);\n  border-bottom: 1px solid var(--canvas-react-color-border, #d9d9d9);\n}\n.canvas-react-popup[data-placement$=Left] .canvas-react-popconfirm-arrow {\n  left: 24px;\n}\n.canvas-react-popup[data-placement$=Right] .canvas-react-popconfirm-arrow {\n  right: 24px;\n}\n.canvas-react-popup[data-placement^=left] .canvas-react-popconfirm-arrow {\n  right: -5px;\n  border-top: 1px solid var(--canvas-react-color-border, #d9d9d9);\n  border-right: 1px solid var(--canvas-react-color-border, #d9d9d9);\n}\n.canvas-react-popup[data-placement^=right] .canvas-react-popconfirm-arrow {\n  left: -5px;\n  border-bottom: 1px solid var(--canvas-react-color-border, #d9d9d9);\n  border-left: 1px solid var(--canvas-react-color-border, #d9d9d9);\n}\n.canvas-react-popup[data-placement$=Top] .canvas-react-popconfirm-arrow {\n  top: 18px;\n}\n.canvas-react-popup[data-placement$=Bottom] .canvas-react-popconfirm-arrow {\n  bottom: 18px;\n}\n.canvas-react-popconfirm-message {\n  display: flex;\n  align-items: flex-start;\n  gap: 8px;\n}\n.canvas-react-popconfirm-icon {\n  display: inline-flex;\n  flex: 0 0 auto;\n  align-items: center;\n  justify-content: center;\n  width: 16px;\n  height: 16px;\n  margin-top: 2px;\n  color: #faad14;\n  font-size: 12px;\n  line-height: 1;\n}\n.canvas-react-popconfirm-default-icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 14px;\n  height: 14px;\n  border-radius: 50%;\n  background: #faad14;\n  color: #ffffff;\n  font-size: 11px;\n  font-weight: 700;\n  line-height: 1;\n}\n.canvas-react-popconfirm-text {\n  min-width: 0;\n}\n.canvas-react-popconfirm-title {\n  color: var(--canvas-react-color-text);\n  font-weight: 500;\n  word-break: break-word;\n}\n.canvas-react-popconfirm-description {\n  margin-top: 4px;\n  color: var(--canvas-react-color-text-muted);\n  word-break: break-word;\n}\n.canvas-react-popconfirm-actions {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: 8px;\n  margin-top: 12px;\n}\n.canvas-react-popconfirm-button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  height: 26px;\n  min-width: 48px;\n  padding: 0 10px;\n  border: 1px solid var(--canvas-react-color-border);\n  border-radius: var(--canvas-react-radius-sm);\n  background: var(--canvas-react-color-bg);\n  color: var(--canvas-react-color-text);\n  font-size: 12px;\n  line-height: 1;\n  white-space: nowrap;\n  cursor: pointer;\n  transition:\n    border-color 0.18s ease,\n    background-color 0.18s ease,\n    color 0.18s ease,\n    opacity 0.18s ease;\n}\n.canvas-react-popconfirm-button:hover {\n  border-color: var(--canvas-react-color-primary-hover);\n  color: var(--canvas-react-color-primary-hover);\n}\n.canvas-react-popconfirm-button-primary {\n  border-color: var(--canvas-react-color-primary);\n  background: var(--canvas-react-color-primary);\n  color: #ffffff;\n}\n.canvas-react-popconfirm-button-primary:hover {\n  border-color: var(--canvas-react-color-primary-hover);\n  background: var(--canvas-react-color-primary-hover);\n  color: #ffffff;\n}\n.canvas-react-popconfirm-button:disabled {\n  opacity: 0.56;\n  cursor: not-allowed;\n}\n.canvas-react-popconfirm-button:disabled:hover {\n  border-color: var(--canvas-react-color-border);\n  color: var(--canvas-react-color-text);\n}\n.canvas-react-popconfirm-button-primary:disabled:hover {\n  border-color: var(--canvas-react-color-primary);\n  background: var(--canvas-react-color-primary);\n  color: #ffffff;\n}\n.canvas-react-popconfirm-loading {\n  width: 12px;\n  height: 12px;\n  border: 2px solid rgba(255, 255, 255, 0.45);\n  border-top-color: #ffffff;\n  border-radius: 50%;\n  animation: canvas-react-popconfirm-loading 0.8s linear infinite;\n}\n@keyframes canvas-react-popconfirm-loading {\n  to {\n    transform: rotate(360deg);\n  }\n}\n');
@@ -5298,7 +6157,7 @@ function ReactPopconfirm(props) {
       return;
     }
     const result = onConfirm?.(event);
-    if (isPromiseLike(result)) {
+    if (isPromiseLike2(result)) {
       setInnerConfirmLoading(true);
       Promise.resolve(result).then(() => {
         setOpen(false);
@@ -5446,7 +6305,7 @@ function ReactPopconfirm(props) {
     )
   ] });
 }
-function isPromiseLike(value) {
+function isPromiseLike2(value) {
   return typeof value === "object" && value !== null && "then" in value && typeof value.then === "function";
 }
 
@@ -5834,6 +6693,413 @@ function parseQuarterValue(value) {
 function resolveDecadeStart5(year) {
   return Math.floor(year / 10) * 10;
 }
+
+// src/components/resizable-panels/style.css
+styleInject('@import "../../styles/variables.css";\n.canvas-react-resizable-panels {\n  display: flex;\n  width: 100%;\n  height: 100%;\n  min-width: 0;\n  min-height: 0;\n  overflow: auto;\n  background: var(--canvas-react-color-bg, #ffffff);\n}\n.canvas-react-resizable-panels-horizontal {\n  flex-direction: row;\n}\n.canvas-react-resizable-panels-vertical {\n  flex-direction: column;\n}\n.canvas-react-resizable-panels-resizing {\n  cursor: inherit;\n}\n.canvas-react-resizable-panels-item {\n  display: contents;\n}\n.canvas-react-resizable-panel {\n  min-width: 0;\n  min-height: 0;\n  overflow: auto;\n}\n.canvas-react-resizable-panels-animated:not(.canvas-react-resizable-panels-resizing) .canvas-react-resizable-panel {\n  transition:\n    flex-basis 0.22s cubic-bezier(0.2, 0, 0, 1),\n    width 0.22s cubic-bezier(0.2, 0, 0, 1),\n    min-width 0.22s cubic-bezier(0.2, 0, 0, 1),\n    max-width 0.22s cubic-bezier(0.2, 0, 0, 1),\n    height 0.22s cubic-bezier(0.2, 0, 0, 1),\n    min-height 0.22s cubic-bezier(0.2, 0, 0, 1),\n    max-height 0.22s cubic-bezier(0.2, 0, 0, 1),\n    opacity 0.14s ease;\n}\n.canvas-react-resizable-panel-collapsed {\n  visibility: hidden;\n  overflow: hidden;\n  opacity: 0;\n  pointer-events: none;\n}\n.canvas-react-resizable-panels-animated:not(.canvas-react-resizable-panels-resizing) .canvas-react-resizable-panel-collapsed {\n  transition:\n    flex-basis 0.22s cubic-bezier(0.2, 0, 0, 1),\n    width 0.22s cubic-bezier(0.2, 0, 0, 1),\n    min-width 0.22s cubic-bezier(0.2, 0, 0, 1),\n    max-width 0.22s cubic-bezier(0.2, 0, 0, 1),\n    height 0.22s cubic-bezier(0.2, 0, 0, 1),\n    min-height 0.22s cubic-bezier(0.2, 0, 0, 1),\n    max-height 0.22s cubic-bezier(0.2, 0, 0, 1),\n    opacity 0.14s ease,\n    visibility 0s linear 0.22s;\n}\n.canvas-react-resizable-panels-divider {\n  position: relative;\n  z-index: 1;\n  flex: 0 0 9px;\n  touch-action: none;\n  outline: none;\n}\n.canvas-react-resizable-panels-divider-horizontal {\n  align-self: stretch;\n  width: 9px;\n  min-height: 24px;\n  cursor: col-resize;\n}\n.canvas-react-resizable-panels-divider-vertical {\n  width: auto;\n  min-width: 24px;\n  height: 9px;\n  cursor: row-resize;\n}\n.canvas-react-resizable-panels-animated .canvas-react-resizable-panels-divider {\n  transition:\n    flex-basis 0.22s cubic-bezier(0.2, 0, 0, 1),\n    width 0.22s cubic-bezier(0.2, 0, 0, 1),\n    height 0.22s cubic-bezier(0.2, 0, 0, 1),\n    opacity 0.14s ease;\n}\n.canvas-react-resizable-panels-divider-collapsed {\n  flex-basis: 0;\n  overflow: hidden;\n  opacity: 0;\n  pointer-events: none;\n}\n.canvas-react-resizable-panels-divider-horizontal.canvas-react-resizable-panels-divider-collapsed {\n  width: 0;\n  min-width: 0;\n}\n.canvas-react-resizable-panels-divider-vertical.canvas-react-resizable-panels-divider-collapsed {\n  height: 0;\n  min-height: 0;\n}\n.canvas-react-resizable-panels-divider-line {\n  position: absolute;\n  background: var(--canvas-react-color-border, #d9d9d9);\n  transition:\n    width 0.16s ease,\n    height 0.16s ease,\n    background-color 0.16s ease,\n    transform 0.16s ease;\n}\n.canvas-react-resizable-panels-divider-horizontal .canvas-react-resizable-panels-divider-line {\n  inset: 0 auto 0 4px;\n  width: 1px;\n}\n.canvas-react-resizable-panels-divider-vertical .canvas-react-resizable-panels-divider-line {\n  inset: 4px 0 auto;\n  height: 1px;\n}\n.canvas-react-resizable-panels-divider-horizontal:hover .canvas-react-resizable-panels-divider-line,\n.canvas-react-resizable-panels-divider-horizontal:focus-visible .canvas-react-resizable-panels-divider-line,\n.canvas-react-resizable-panels-divider-horizontal.canvas-react-resizable-panels-divider-active .canvas-react-resizable-panels-divider-line {\n  width: 3px;\n  background: var(--canvas-react-color-primary, #1677ff);\n  transform: translateX(-1px);\n}\n.canvas-react-resizable-panels-divider-vertical:hover .canvas-react-resizable-panels-divider-line,\n.canvas-react-resizable-panels-divider-vertical:focus-visible .canvas-react-resizable-panels-divider-line,\n.canvas-react-resizable-panels-divider-vertical.canvas-react-resizable-panels-divider-active .canvas-react-resizable-panels-divider-line {\n  height: 3px;\n  background: var(--canvas-react-color-primary, #1677ff);\n  transform: translateY(-1px);\n}\n.canvas-react-resizable-panels-divider:focus-visible {\n  box-shadow: inset 0 0 0 2px rgba(22, 119, 255, 0.12);\n}\n.canvas-react-resizable-panels-divider-disabled {\n  cursor: default;\n}\n.canvas-react-resizable-panels-divider-horizontal.canvas-react-resizable-panels-divider-disabled .canvas-react-resizable-panels-divider-line,\n.canvas-react-resizable-panels-divider-horizontal.canvas-react-resizable-panels-divider-disabled:hover .canvas-react-resizable-panels-divider-line {\n  width: 1px;\n  background: var(--canvas-react-color-border, #d9d9d9);\n  transform: none;\n}\n.canvas-react-resizable-panels-divider-vertical.canvas-react-resizable-panels-divider-disabled .canvas-react-resizable-panels-divider-line,\n.canvas-react-resizable-panels-divider-vertical.canvas-react-resizable-panels-divider-disabled:hover .canvas-react-resizable-panels-divider-line {\n  height: 1px;\n  background: var(--canvas-react-color-border, #d9d9d9);\n  transform: none;\n}\n@media (prefers-reduced-motion: reduce) {\n  .canvas-react-resizable-panels-animated .canvas-react-resizable-panel,\n  .canvas-react-resizable-panels-animated .canvas-react-resizable-panels-divider,\n  .canvas-react-resizable-panels-divider-line {\n    transition-duration: 0.01ms;\n    transition-delay: 0s;\n  }\n}\n');
+var DEFAULT_MIN_SIZE = 80;
+var DEFAULT_KEYBOARD_STEP = 10;
+function ReactResizablePanels(props) {
+  const {
+    animated = false,
+    className,
+    defaultSizes,
+    direction = "horizontal",
+    keyboardStep = DEFAULT_KEYBOARD_STEP,
+    onResizeEnd,
+    onResizeStart,
+    onSizesChange,
+    panels,
+    sizes,
+    style
+  } = props;
+  const [innerSizes, setInnerSizes] = React.useState(
+    () => ({
+      ...defaultSizes
+    })
+  );
+  const [resizingDividerId, setResizingDividerId] = React.useState(
+    null
+  );
+  const panelRefs = React.useRef({});
+  const resizeSessionRef = React.useRef(null);
+  const controlled = sizes !== void 0;
+  const mergedSizes = controlled ? sizes : innerSizes;
+  const visiblePanels = panels.filter((panel) => panel.visible !== false);
+  React.useEffect(
+    () => () => {
+      const session = resizeSessionRef.current;
+      if (!session) {
+        return;
+      }
+      document.body.style.cursor = session.previousBodyCursor;
+      document.body.style.userSelect = session.previousBodyUserSelect;
+      resizeSessionRef.current = null;
+    },
+    []
+  );
+  const applySizes = (nextSizes, info) => {
+    if (!controlled) {
+      setInnerSizes(nextSizes);
+    }
+    if (resizeSessionRef.current) {
+      resizeSessionRef.current.latestSizes = nextSizes;
+    }
+    onSizesChange?.(nextSizes, info);
+  };
+  const resizePair = (params) => {
+    const { afterPanel, beforePanel, delta, startAfterSize, startBeforeSize } = params;
+    const nextPair = resolveResizablePanelSizes({
+      afterMaxSize: afterPanel.maxSize,
+      afterMinSize: afterPanel.minSize,
+      beforeMaxSize: beforePanel.maxSize,
+      beforeMinSize: beforePanel.minSize,
+      delta,
+      startAfterSize,
+      startBeforeSize
+    });
+    const info = createResizeInfo(beforePanel.id, afterPanel.id, direction);
+    const nextSizes = {
+      ...mergedSizes,
+      [beforePanel.id]: nextPair.beforeSize,
+      [afterPanel.id]: nextPair.afterSize
+    };
+    applySizes(nextSizes, info);
+    return nextSizes;
+  };
+  const startResize = (event, beforePanel, afterPanel) => {
+    if (event.button !== 0) {
+      return;
+    }
+    const beforeElement = panelRefs.current[beforePanel.id];
+    const afterElement = panelRefs.current[afterPanel.id];
+    if (!beforeElement || !afterElement) {
+      return;
+    }
+    event.preventDefault();
+    event.currentTarget.setPointerCapture(event.pointerId);
+    const startBeforeSize = resolveElementSize(beforeElement, direction);
+    const startAfterSize = resolveElementSize(afterElement, direction);
+    const info = createResizeInfo(beforePanel.id, afterPanel.id, direction);
+    resizeSessionRef.current = {
+      ...info,
+      latestSizes: {
+        ...mergedSizes,
+        [beforePanel.id]: startBeforeSize,
+        [afterPanel.id]: startAfterSize
+      },
+      pointerId: event.pointerId,
+      previousBodyCursor: document.body.style.cursor,
+      previousBodyUserSelect: document.body.style.userSelect,
+      startAfterSize,
+      startBeforeSize,
+      startPointerPosition: resolvePointerPosition(event, direction)
+    };
+    document.body.style.cursor = resolveResizeCursor(direction);
+    document.body.style.userSelect = "none";
+    setResizingDividerId(beforePanel.id);
+    onResizeStart?.(info);
+  };
+  const moveResize = (event, beforePanel, afterPanel) => {
+    const session = resizeSessionRef.current;
+    if (!session || session.pointerId !== event.pointerId) {
+      return;
+    }
+    resizePair({
+      afterPanel,
+      beforePanel,
+      delta: resolvePointerPosition(event, direction) - session.startPointerPosition,
+      startAfterSize: session.startAfterSize,
+      startBeforeSize: session.startBeforeSize
+    });
+  };
+  const finishResize = (event) => {
+    const session = resizeSessionRef.current;
+    if (!session || session.pointerId !== event.pointerId) {
+      return;
+    }
+    if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+      event.currentTarget.releasePointerCapture(event.pointerId);
+    }
+    document.body.style.cursor = session.previousBodyCursor;
+    document.body.style.userSelect = session.previousBodyUserSelect;
+    resizeSessionRef.current = null;
+    setResizingDividerId(null);
+    onResizeEnd?.(session.latestSizes, {
+      afterPanelId: session.afterPanelId,
+      beforePanelId: session.beforePanelId,
+      direction: session.direction
+    });
+  };
+  const handleDividerKeyDown = (event, beforePanel, afterPanel) => {
+    const deltaDirection = resolveKeyboardDeltaDirection(event.key, direction);
+    if (deltaDirection === 0) {
+      return;
+    }
+    const beforeElement = panelRefs.current[beforePanel.id];
+    const afterElement = panelRefs.current[afterPanel.id];
+    if (!beforeElement || !afterElement) {
+      return;
+    }
+    event.preventDefault();
+    const step = normalizePositiveNumber(keyboardStep, DEFAULT_KEYBOARD_STEP);
+    const nextSizes = resizePair({
+      afterPanel,
+      beforePanel,
+      delta: deltaDirection * step,
+      startAfterSize: resolveElementSize(afterElement, direction),
+      startBeforeSize: resolveElementSize(beforeElement, direction)
+    });
+    onResizeEnd?.(
+      nextSizes,
+      createResizeInfo(beforePanel.id, afterPanel.id, direction)
+    );
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: joinClassNames(
+        `${REACT_COMPONENT_PREFIX}-resizable-panels`,
+        `${REACT_COMPONENT_PREFIX}-resizable-panels-${direction}`,
+        animated && `${REACT_COMPONENT_PREFIX}-resizable-panels-animated`,
+        resizingDividerId !== null && `${REACT_COMPONENT_PREFIX}-resizable-panels-resizing`,
+        className
+      ),
+      style,
+      children: visiblePanels.map((panel, index) => {
+        const nextPanel = visiblePanels[index + 1];
+        const configuredSize = mergedSizes[panel.id] ?? panel.size;
+        const collapsed = panel.collapsed === true;
+        const minSize = collapsed ? 0 : normalizePositiveNumber(panel.minSize, DEFAULT_MIN_SIZE);
+        const maxSize = collapsed ? 0 : normalizeMaxSize(panel.maxSize, minSize);
+        const panelStyle = collapsed ? resolveCollapsedPanelStyle(direction) : resolvePanelStyle({
+          configuredSize,
+          direction,
+          isLast: index === visiblePanels.length - 1,
+          maxSize,
+          minSize
+        });
+        const dividerCollapsed = nextPanel ? collapsed || nextPanel.collapsed === true : false;
+        const dividerDisabled = panel.resizable === false || dividerCollapsed;
+        return /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: `${REACT_COMPONENT_PREFIX}-resizable-panels-item`,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  ref: (element) => {
+                    panelRefs.current[panel.id] = element;
+                  },
+                  className: joinClassNames(
+                    `${REACT_COMPONENT_PREFIX}-resizable-panel`,
+                    collapsed && `${REACT_COMPONENT_PREFIX}-resizable-panel-collapsed`,
+                    panel.className
+                  ),
+                  style: {
+                    ...panelStyle,
+                    ...panel.style,
+                    ...collapsed ? panelStyle : void 0
+                  },
+                  "data-panel-id": panel.id,
+                  "aria-hidden": collapsed || void 0,
+                  children: panel.content
+                }
+              ),
+              nextPanel ? /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: joinClassNames(
+                    `${REACT_COMPONENT_PREFIX}-resizable-panels-divider`,
+                    `${REACT_COMPONENT_PREFIX}-resizable-panels-divider-${direction}`,
+                    dividerDisabled && `${REACT_COMPONENT_PREFIX}-resizable-panels-divider-disabled`,
+                    dividerCollapsed && `${REACT_COMPONENT_PREFIX}-resizable-panels-divider-collapsed`,
+                    resizingDividerId === panel.id && `${REACT_COMPONENT_PREFIX}-resizable-panels-divider-active`
+                  ),
+                  role: "separator",
+                  "aria-label": `\u8C03\u6574 ${panel.id} \u4E0E ${nextPanel.id} \u7684${direction === "horizontal" ? "\u5BBD\u5EA6" : "\u9AD8\u5EA6"}`,
+                  "aria-disabled": dividerDisabled,
+                  "aria-orientation": direction === "horizontal" ? "vertical" : "horizontal",
+                  "aria-valuemin": minSize,
+                  "aria-valuemax": Number.isFinite(maxSize) ? maxSize : void 0,
+                  "aria-valuenow": configuredSize == null ? void 0 : Math.round(configuredSize),
+                  tabIndex: dividerDisabled ? -1 : 0,
+                  onKeyDown: (event) => {
+                    if (!dividerDisabled) {
+                      handleDividerKeyDown(event, panel, nextPanel);
+                    }
+                  },
+                  onPointerCancel: finishResize,
+                  onPointerDown: (event) => {
+                    if (!dividerDisabled) {
+                      startResize(event, panel, nextPanel);
+                    }
+                  },
+                  onPointerMove: (event) => {
+                    if (!dividerDisabled) {
+                      moveResize(event, panel, nextPanel);
+                    }
+                  },
+                  onPointerUp: finishResize,
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                    "span",
+                    {
+                      className: `${REACT_COMPONENT_PREFIX}-resizable-panels-divider-line`,
+                      "aria-hidden": "true"
+                    }
+                  )
+                }
+              ) : null
+            ]
+          },
+          panel.id
+        );
+      })
+    }
+  );
+}
+function resolveResizablePanelSizes(params) {
+  const {
+    afterMaxSize,
+    afterMinSize,
+    beforeMaxSize,
+    beforeMinSize,
+    delta,
+    startAfterSize,
+    startBeforeSize
+  } = params;
+  const safeBeforeMin = normalizePositiveNumber(
+    beforeMinSize,
+    DEFAULT_MIN_SIZE
+  );
+  const safeAfterMin = normalizePositiveNumber(afterMinSize, DEFAULT_MIN_SIZE);
+  const safeBeforeMax = normalizeMaxSize(beforeMaxSize, safeBeforeMin);
+  const safeAfterMax = normalizeMaxSize(afterMaxSize, safeAfterMin);
+  const minDelta = Math.max(
+    safeBeforeMin - startBeforeSize,
+    startAfterSize - safeAfterMax
+  );
+  const maxDelta = Math.min(
+    safeBeforeMax - startBeforeSize,
+    startAfterSize - safeAfterMin
+  );
+  const safeDelta = clamp3(
+    Number.isFinite(delta) ? delta : 0,
+    minDelta,
+    maxDelta
+  );
+  return {
+    afterSize: Math.round((startAfterSize - safeDelta) * 100) / 100,
+    beforeSize: Math.round((startBeforeSize + safeDelta) * 100) / 100
+  };
+}
+function createResizeInfo(beforePanelId, afterPanelId, direction) {
+  return { afterPanelId, beforePanelId, direction };
+}
+function resolveElementSize(element, direction) {
+  const rect = element.getBoundingClientRect();
+  return direction === "horizontal" ? rect.width : rect.height;
+}
+function resolvePointerPosition(event, direction) {
+  return direction === "horizontal" ? event.clientX : event.clientY;
+}
+function resolveResizeCursor(direction) {
+  return direction === "horizontal" ? "col-resize" : "row-resize";
+}
+function resolveKeyboardDeltaDirection(key, direction) {
+  if (direction === "horizontal") {
+    return key === "ArrowLeft" ? -1 : key === "ArrowRight" ? 1 : 0;
+  }
+  return key === "ArrowUp" ? -1 : key === "ArrowDown" ? 1 : 0;
+}
+function resolveCollapsedPanelStyle(direction) {
+  return direction === "horizontal" ? { flex: "0 0 0px", maxWidth: 0, minWidth: 0, width: 0 } : { flex: "0 0 0px", height: 0, maxHeight: 0, minHeight: 0 };
+}
+function resolvePanelStyle(params) {
+  const { configuredSize, direction, isLast, maxSize, minSize } = params;
+  const size = normalizeOptionalSize(configuredSize, minSize, maxSize);
+  const flex = size == null ? "1 1 0" : isLast ? `1 1 ${size}px` : `0 0 ${size}px`;
+  return direction === "horizontal" ? {
+    flex,
+    maxWidth: Number.isFinite(maxSize) ? maxSize : void 0,
+    minWidth: minSize,
+    width: size
+  } : {
+    flex,
+    height: size,
+    maxHeight: Number.isFinite(maxSize) ? maxSize : void 0,
+    minHeight: minSize
+  };
+}
+function normalizeOptionalSize(value, minSize, maxSize) {
+  if (typeof value !== "number" || !Number.isFinite(value)) {
+    return void 0;
+  }
+  return clamp3(value, minSize, maxSize);
+}
+function normalizePositiveNumber(value, fallback) {
+  return typeof value === "number" && Number.isFinite(value) && value >= 0 ? value : fallback;
+}
+function normalizeMaxSize(value, minSize) {
+  return typeof value === "number" && Number.isFinite(value) ? Math.max(value, minSize) : Number.POSITIVE_INFINITY;
+}
+function clamp3(value, min, max) {
+  if (min > max) {
+    return min;
+  }
+  return Math.min(Math.max(value, min), max);
+}
+var ReactAutoComplete = React.forwardRef(function ReactAutoComplete2(props, ref) {
+  const {
+    onChange,
+    onInputValueChange,
+    onPressEnter,
+    options: initialOptions,
+    value,
+    ...restProps
+  } = props;
+  const [options, setOptions] = React.useState(initialOptions);
+  React.useEffect(() => {
+    setOptions(initialOptions);
+  }, [initialOptions]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ReactSelect,
+    {
+      ...restProps,
+      ref,
+      allowCustomValue: true,
+      showSearch: true,
+      value,
+      options,
+      onChange: (nextValue, info) => {
+        onChange?.(
+          options.find((option) => String(option.value) === String(nextValue))?.value ?? nextValue,
+          info
+        );
+      },
+      onInputValueChange: (input) => {
+        onInputValueChange?.(input);
+        onChange?.(input, { trigger: "input" });
+      },
+      onPressEnter: async (input) => {
+        const nextOptions = await onPressEnter?.(input);
+        if (nextOptions) {
+          setOptions(nextOptions);
+        }
+        onChange?.(
+          nextOptions ? resolveAutoCompleteValue(input, nextOptions) : input,
+          { trigger: "keyboard" }
+        );
+      }
+    }
+  );
+});
+function resolveAutoCompleteValue(input, options) {
+  const normalizedInput = input.toLowerCase();
+  return options.find(
+    (option) => option.label.toLowerCase() === normalizedInput || String(option.value).toLowerCase() === normalizedInput
+  )?.value ?? input;
+}
 var ReactTimePicker = React.forwardRef(
   function ReactTimePicker2(props, ref) {
     const {
@@ -6718,6 +7984,7 @@ function resolveDecadeStart6(year) {
 }
 
 exports.REACT_COMPONENT_PREFIX = REACT_COMPONENT_PREFIX;
+exports.ReactAutoComplete = ReactAutoComplete;
 exports.ReactCheckbox = ReactCheckbox;
 exports.ReactColorPicker = ReactColorPicker;
 exports.ReactContentScaleProvider = ReactContentScaleProvider;
@@ -6725,21 +7992,26 @@ exports.ReactDatePicker = ReactDatePicker;
 exports.ReactDateRangePicker = ReactDateRangePicker;
 exports.ReactDateTimePicker = ReactDateTimePicker;
 exports.ReactDateTimeRangePicker = ReactDateTimeRangePicker;
+exports.ReactFilterPanel = ReactFilterPanel;
 exports.ReactImagePreview = ReactImagePreview;
 exports.ReactInput = ReactInput;
 exports.ReactInputNumber = ReactInputNumber;
+exports.ReactInputRange = ReactInputRange;
+exports.ReactModal = ReactModal;
 exports.ReactMonthPicker = ReactMonthPicker;
 exports.ReactNumberInput = ReactNumberInput;
 exports.ReactPagination = ReactPagination;
 exports.ReactPopconfirm = ReactPopconfirm;
 exports.ReactPopup = ReactPopup;
 exports.ReactQuarterPicker = ReactQuarterPicker;
+exports.ReactResizablePanels = ReactResizablePanels;
 exports.ReactSelect = ReactSelect;
 exports.ReactTimePicker = ReactTimePicker;
 exports.ReactTimeRangePicker = ReactTimeRangePicker;
 exports.ReactTransition = ReactTransition;
 exports.ReactVirtualList = ReactVirtualList;
 exports.ReactYearPicker = ReactYearPicker;
+exports.resolveResizablePanelSizes = resolveResizablePanelSizes;
 exports.useReactContentScale = useReactContentScale;
 exports.useReactTransition = useReactTransition;
 //# sourceMappingURL=index.cjs.map