@canvas-components/react-components 0.3.3 → 0.3.5

package/dist/index.cjs

@@ -5370,6 +5370,7 @@ var bodyOverflowBeforeLock = "";
 function ReactModal(props) {
   const {
     afterClose,
+    afterOpenChange,
     bodyStyle,
     cancelButtonProps,
     cancelText = "\u53D6\u6D88",
@@ -5413,11 +5414,21 @@ function ReactModal(props) {
   const dragRef = React.useRef(null);
   const restoreFocusRef = React.useRef(null);
   const wasRenderedRef = React.useRef(false);
+  const afterOpenChangeRef = React.useRef(afterOpenChange);
+  const previousOpenRef = React.useRef();
+  afterOpenChangeRef.current = afterOpenChange;
   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 (previousOpenRef.current === open) {
+      return;
+    }
+    previousOpenRef.current = open;
+    afterOpenChangeRef.current?.(open);
+  }, [open]);
   React.useEffect(() => {
     if (!draggable || !transition.rendered) return;
     const handleMouseMove = (event) => {
@@ -5996,7 +6007,8 @@ function formatDisplayValue(value, formatter, precision, step) {
 }
 
 // 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');
+styleInject('@import "../../styles/variables.css";\n.canvas-react-pagination {\n  --canvas-react-pagination-control-size: 32px;\n  --canvas-react-pagination-gap: 8px;\n  --canvas-react-pagination-padding-inline: 10px;\n  --canvas-react-control-height: var(--canvas-react-pagination-control-size);\n  display: flex;\n  align-items: center;\n  flex-wrap: nowrap;\n  gap: var(--canvas-react-pagination-gap);\n  color: var(--canvas-react-color-text);\n  font-size: var(--canvas-react-font-size);\n  white-space: nowrap;\n}\n.canvas-react-pagination-small {\n  --canvas-react-pagination-control-size: 24px;\n  --canvas-react-pagination-gap: 4px;\n  --canvas-react-pagination-padding-inline: 6px;\n}\n.canvas-react-pagination-large {\n  --canvas-react-pagination-control-size: 40px;\n  --canvas-react-pagination-gap: 10px;\n  --canvas-react-pagination-padding-inline: 14px;\n}\n.canvas-react-pagination-pages {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--canvas-react-pagination-gap);\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: var(--canvas-react-pagination-control-size);\n  height: var(--canvas-react-pagination-control-size);\n  padding: 0 var(--canvas-react-pagination-padding-inline);\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: var(--canvas-react-pagination-control-size);\n  min-width: var(--canvas-react-pagination-control-size);\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: var(--canvas-react-pagination-gap);\n  flex-wrap: nowrap;\n}\n.canvas-react-pagination-total {\n  color: var(--canvas-react-color-text-muted);\n}\n');
+var DEFAULT_PAGE_SIZE_OPTIONS = [10, 20, 50, 100];
 function ReactPagination(props) {
   const {
     current,
@@ -6004,12 +6016,13 @@ function ReactPagination(props) {
     onChange,
     onPageSizeChange,
     pageSize = 10,
-    pageSizeOptions,
+    pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS,
     showLessItems,
     showQuickJumper,
     showSizeChanger,
     showTotal,
     simple,
+    size = "middle",
     total
   } = props;
   const [quickValue, setQuickValue] = React.useState("");
@@ -6037,108 +6050,120 @@ function ReactPagination(props) {
     jumpToPage(Number(quickValue));
     setQuickValue("");
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${REACT_COMPONENT_PREFIX}-pagination`, children: [
-    showTotal ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${REACT_COMPONENT_PREFIX}-pagination-total`, children: showTotal(total, range) }) : null,
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
-      {
-        type: "button",
-        className: `${REACT_COMPONENT_PREFIX}-pagination-button`,
-        "aria-label": "\u4E0A\u4E00\u9875",
-        disabled: disabled || safeCurrent <= 1,
-        onClick: () => jumpToPage(safeCurrent - 1),
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          "span",
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: `${REACT_COMPONENT_PREFIX}-pagination ${REACT_COMPONENT_PREFIX}-pagination-${size}`,
+      children: [
+        showTotal ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${REACT_COMPONENT_PREFIX}-pagination-total`, children: showTotal(total, range) }) : null,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
           {
-            className: `${REACT_COMPONENT_PREFIX}-pagination-arrow ${REACT_COMPONENT_PREFIX}-pagination-arrow-prev`
+            type: "button",
+            className: `${REACT_COMPONENT_PREFIX}-pagination-button`,
+            "aria-label": "\u4E0A\u4E00\u9875",
+            disabled: disabled || safeCurrent <= 1,
+            onClick: () => jumpToPage(safeCurrent - 1),
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: `${REACT_COMPONENT_PREFIX}-pagination-arrow ${REACT_COMPONENT_PREFIX}-pagination-arrow-prev`
+              }
+            )
           }
-        )
-      }
-    ),
-    simple ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: `${REACT_COMPONENT_PREFIX}-pagination-total`, children: [
-      safeCurrent,
-      " / ",
-      totalPages
-    ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${REACT_COMPONENT_PREFIX}-pagination-pages`, children: pages.map(
-      (item, index) => item === "..." ? /* @__PURE__ */ jsxRuntime.jsx(
-        "span",
-        {
-          className: `${REACT_COMPONENT_PREFIX}-pagination-ellipsis`,
-          children: "..."
-        },
-        `ellipsis-${index}`
-      ) : /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          type: "button",
-          className: [
-            `${REACT_COMPONENT_PREFIX}-pagination-page`,
-            item === safeCurrent ? `${REACT_COMPONENT_PREFIX}-pagination-page-active` : ""
-          ].filter(Boolean).join(" "),
-          disabled,
-          onClick: () => jumpToPage(item),
-          children: item
-        },
-        item
-      )
-    ) }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
-      {
-        type: "button",
-        className: `${REACT_COMPONENT_PREFIX}-pagination-button`,
-        "aria-label": "\u4E0B\u4E00\u9875",
-        disabled: disabled || safeCurrent >= totalPages,
-        onClick: () => jumpToPage(safeCurrent + 1),
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          "span",
+        ),
+        simple ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: `${REACT_COMPONENT_PREFIX}-pagination-total`, children: [
+          safeCurrent,
+          " / ",
+          totalPages
+        ] }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${REACT_COMPONENT_PREFIX}-pagination-pages`, children: pages.map(
+          (item, index) => item === "..." ? /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: `${REACT_COMPONENT_PREFIX}-pagination-ellipsis`,
+              children: "..."
+            },
+            `ellipsis-${index}`
+          ) : /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              className: [
+                `${REACT_COMPONENT_PREFIX}-pagination-page`,
+                item === safeCurrent ? `${REACT_COMPONENT_PREFIX}-pagination-page-active` : ""
+              ].filter(Boolean).join(" "),
+              disabled,
+              onClick: () => jumpToPage(item),
+              children: item
+            },
+            item
+          )
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
           {
-            className: `${REACT_COMPONENT_PREFIX}-pagination-arrow ${REACT_COMPONENT_PREFIX}-pagination-arrow-next`
-          }
-        )
-      }
-    ),
-    showSizeChanger && pageSizeOptions?.length ? /* @__PURE__ */ jsxRuntime.jsx(
-      ReactSelect,
-      {
-        value: String(pageSize),
-        disabled,
-        style: { width: 108 },
-        options: pageSizeOptions.map((size) => ({
-          label: `${size} / \u9875`,
-          value: size
-        })),
-        onChange: (value) => {
-          const nextPageSize = Number(value);
-          if (!Number.isFinite(nextPageSize)) {
-            return;
+            type: "button",
+            className: `${REACT_COMPONENT_PREFIX}-pagination-button`,
+            "aria-label": "\u4E0B\u4E00\u9875",
+            disabled: disabled || safeCurrent >= totalPages,
+            onClick: () => jumpToPage(safeCurrent + 1),
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                className: `${REACT_COMPONENT_PREFIX}-pagination-arrow ${REACT_COMPONENT_PREFIX}-pagination-arrow-next`
+              }
+            )
           }
-          onPageSizeChange?.(1, nextPageSize);
-        }
-      }
-    ) : null,
-    showQuickJumper ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${REACT_COMPONENT_PREFIX}-pagination-quick`, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${REACT_COMPONENT_PREFIX}-pagination-total`, children: "\u8DF3\u81F3" }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        ReactInput,
-        {
-          value: quickValue,
-          disabled,
-          style: { width: 72 },
-          onChange: (event) => {
-            setQuickValue(event.target.value.replace(/[^\d]/g, ""));
-          },
-          onPressEnter: () => {
-            handleQuickCommit();
-          },
-          onBlur: () => {
-            handleQuickCommit();
+        ),
+        showSizeChanger && pageSizeOptions?.length ? /* @__PURE__ */ jsxRuntime.jsx(
+          ReactSelect,
+          {
+            value: String(pageSize),
+            disabled,
+            style: { width: resolvePaginationSelectWidth(size) },
+            options: pageSizeOptions.map((size2) => ({
+              label: `${size2} / \u9875`,
+              value: size2
+            })),
+            onChange: (value) => {
+              const nextPageSize = Number(value);
+              if (!Number.isFinite(nextPageSize)) {
+                return;
+              }
+              onPageSizeChange?.(1, nextPageSize);
+            }
           }
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${REACT_COMPONENT_PREFIX}-pagination-total`, children: "\u9875" })
-    ] }) : null
-  ] });
+        ) : null,
+        showQuickJumper ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${REACT_COMPONENT_PREFIX}-pagination-quick`, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${REACT_COMPONENT_PREFIX}-pagination-total`, children: "\u8DF3\u81F3" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            ReactInput,
+            {
+              value: quickValue,
+              disabled,
+              style: { width: resolvePaginationInputWidth(size) },
+              onChange: (event) => {
+                setQuickValue(event.target.value.replace(/[^\d]/g, ""));
+              },
+              onPressEnter: () => {
+                handleQuickCommit();
+              },
+              onBlur: () => {
+                handleQuickCommit();
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${REACT_COMPONENT_PREFIX}-pagination-total`, children: "\u9875" })
+        ] }) : null
+      ]
+    }
+  );
+}
+function resolvePaginationSelectWidth(size) {
+  return size === "small" ? 92 : size === "large" ? 120 : 108;
+}
+function resolvePaginationInputWidth(size) {
+  return size === "small" ? 56 : size === "large" ? 80 : 72;
 }
 function buildPageItems(current, totalPages, showLessItems) {
   if (totalPages <= 1) {
@@ -8065,9 +8090,364 @@ function resolveDecadeStart6(year) {
   return Math.floor(year / 10) * 10;
 }
 
+// src/components/compat/style.css
+styleInject(".canvas-react-button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  min-height: 32px;\n  padding: 4px 14px;\n  border: 1px solid var(--cc-border-color, #d9d9d9);\n  border-radius: 6px;\n  color: var(--cc-text-color, #1f2937);\n  background: var(--cc-surface-color, #fff);\n  cursor: pointer;\n}\n.canvas-react-button:hover:not(:disabled) {\n  color: #1677ff;\n  border-color: #1677ff;\n}\n.canvas-react-button:disabled {\n  cursor: not-allowed;\n  opacity: 0.5;\n}\n.canvas-react-button-primary {\n  color: #fff;\n  border-color: #1677ff;\n  background: #1677ff;\n}\n.canvas-react-button-danger {\n  color: #dc2626;\n  border-color: #fca5a5;\n}\n.canvas-react-button-small {\n  min-height: 24px;\n  padding: 2px 8px;\n}\n.canvas-react-button-large {\n  min-height: 40px;\n  padding: 6px 18px;\n}\n.canvas-react-button-icon {\n  display: inline-flex;\n}\n.canvas-react-row {\n  display: flex;\n  flex-flow: row wrap;\n}\n.canvas-react-col {\n  min-width: 0;\n  padding-inline: 8px;\n}\n.canvas-react-radio-group {\n  display: flex;\n  gap: 16px;\n}\n.canvas-react-radio {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  cursor: pointer;\n}\n.canvas-react-radio input {\n  position: absolute;\n  opacity: 0;\n  pointer-events: none;\n}\n.canvas-react-radio-mark {\n  width: 14px;\n  height: 14px;\n  border: 1px solid #94a3b8;\n  border-radius: 50%;\n  box-sizing: border-box;\n}\n.canvas-react-radio input:checked + .canvas-react-radio-mark {\n  border: 4px solid #1677ff;\n}\n.canvas-react-form-item {\n  display: flex;\n  flex-direction: column;\n  gap: 6px;\n  margin-bottom: 16px;\n}\n.canvas-react-form-label {\n  color: #334155;\n  font-size: 14px;\n}\n.canvas-react-form-error {\n  color: #dc2626;\n  font-size: 12px;\n}\n.canvas-react-textarea {\n  width: 100%;\n  min-height: 72px;\n  padding: 8px 10px;\n  border: 1px solid #d9d9d9;\n  border-radius: 6px;\n  box-sizing: border-box;\n  font: inherit;\n  resize: vertical;\n}\n.canvas-react-message-host {\n  position: fixed;\n  z-index: 3000;\n  top: 24px;\n  left: 50%;\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n  transform: translateX(-50%);\n  pointer-events: none;\n}\n.canvas-react-message {\n  padding: 9px 14px;\n  border: 1px solid #e2e8f0;\n  border-radius: 8px;\n  color: #334155;\n  background: #fff;\n  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.14);\n}\n.canvas-react-message-error {\n  color: #b91c1c;\n  border-color: #fecaca;\n}\n");
+function ReactButton({
+  children,
+  className,
+  danger,
+  htmlType = "button",
+  icon,
+  size = "middle",
+  type = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      ...props,
+      type: htmlType,
+      className: joinClassNames(
+        `${REACT_COMPONENT_PREFIX}-button`,
+        `${REACT_COMPONENT_PREFIX}-button-${type}`,
+        `${REACT_COMPONENT_PREFIX}-button-${size}`,
+        danger && `${REACT_COMPONENT_PREFIX}-button-danger`,
+        className
+      ),
+      children: [
+        icon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${REACT_COMPONENT_PREFIX}-button-icon`, children: icon }) : null,
+        children
+      ]
+    }
+  );
+}
+function ReactFlex({
+  vertical,
+  justify,
+  align,
+  gap,
+  style,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ...props,
+      style: {
+        display: "flex",
+        flexDirection: vertical ? "column" : "row",
+        justifyContent: justify,
+        alignItems: align,
+        gap,
+        ...style
+      }
+    }
+  );
+}
+function ReactRow({ gutter = 0, style, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ...props,
+      className: joinClassNames(
+        `${REACT_COMPONENT_PREFIX}-row`,
+        props.className
+      ),
+      style: { marginInline: -gutter / 2, ...style }
+    }
+  );
+}
+function ReactCol({ span = 24, style, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ...props,
+      className: joinClassNames(
+        `${REACT_COMPONENT_PREFIX}-col`,
+        props.className
+      ),
+      style: {
+        flex: `0 0 ${span / 24 * 100}%`,
+        maxWidth: `${span / 24 * 100}%`,
+        ...style
+      }
+    }
+  );
+}
+function ReactTooltip({ title, children }) {
+  return React.cloneElement(children, {
+    title: typeof title === "string" ? title : void 0,
+    "aria-label": typeof title === "string" ? title : void 0
+  });
+}
+var RadioGroupContext = React.createContext({});
+function ReactRadioOption({
+  value,
+  checked,
+  disabled,
+  onChange,
+  children,
+  className,
+  ...props
+}) {
+  const group = React.useContext(RadioGroupContext);
+  const selected = checked ?? String(group.value ?? "") === String(value);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "label",
+    {
+      ...props,
+      className: joinClassNames(
+        `${REACT_COMPONENT_PREFIX}-radio`,
+        disabled && `${REACT_COMPONENT_PREFIX}-radio-disabled`,
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            type: "radio",
+            checked: selected,
+            disabled,
+            onChange: () => {
+              const event = { target: { value } };
+              onChange?.(event);
+              group.onChange?.(event);
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${REACT_COMPONENT_PREFIX}-radio-mark` }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { children })
+      ]
+    }
+  );
+}
+function ReactRadioGroup({
+  value,
+  onChange,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(RadioGroupContext.Provider, { value: { value, onChange }, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ...props,
+      className: joinClassNames(
+        `${REACT_COMPONENT_PREFIX}-radio-group`,
+        className
+      )
+    }
+  ) });
+}
+var ReactRadio = Object.assign(ReactRadioOption, {
+  Group: ReactRadioGroup
+});
+function ReactTextArea({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "textarea",
+    {
+      ...props,
+      className: joinClassNames(
+        `${REACT_COMPONENT_PREFIX}-textarea`,
+        className
+      )
+    }
+  );
+}
+function createFormInstance() {
+  const store = {
+    values: {},
+    initialValues: {},
+    errors: {},
+    rules: /* @__PURE__ */ new Map(),
+    listeners: /* @__PURE__ */ new Set(),
+    revision: 0,
+    notify() {
+      store.revision += 1;
+      store.listeners.forEach((listener) => listener());
+    }
+  };
+  return {
+    __store: store,
+    getFieldValue: (name) => store.values[name],
+    setFieldsValue(values) {
+      store.values = { ...store.values, ...values };
+      Object.keys(values).forEach((name) => {
+        delete store.errors[name];
+      });
+      store.notify();
+    },
+    resetFields() {
+      store.values = { ...store.initialValues };
+      store.errors = {};
+      store.notify();
+    },
+    async validateFields() {
+      const errors = {};
+      for (const [name, rules] of store.rules) {
+        const value = store.values[name];
+        for (const rawRule of rules) {
+          const rule = typeof rawRule === "function" ? rawRule({ getFieldValue: (field) => store.values[field] }) : rawRule;
+          if (rule.required && (value === void 0 || value === null || value === "")) {
+            errors[name] = rule.message ?? "\u6B64\u9879\u4E3A\u5FC5\u586B\u9879";
+            break;
+          }
+          if ((rule.type === "number" || rule.type === "integer") && typeof value === "number" && rule.min !== void 0 && value < rule.min) {
+            errors[name] = rule.message ?? `\u4E0D\u80FD\u5C0F\u4E8E ${rule.min}`;
+            break;
+          }
+          if ((rule.type === "number" || rule.type === "integer") && typeof value === "number" && rule.max !== void 0 && value > rule.max) {
+            errors[name] = rule.message ?? `\u4E0D\u80FD\u5927\u4E8E ${rule.max}`;
+            break;
+          }
+          if (rule.type === "integer" && typeof value === "number" && !Number.isInteger(value)) {
+            errors[name] = rule.message ?? "\u8BF7\u8F93\u5165\u6574\u6570";
+            break;
+          }
+          if (rule.validator) {
+            try {
+              await rule.validator(rule, value);
+            } catch (error) {
+              errors[name] = error instanceof Error ? error.message : "\u6821\u9A8C\u5931\u8D25";
+              break;
+            }
+          }
+        }
+      }
+      store.errors = errors;
+      store.notify();
+      if (Object.keys(errors).length > 0) {
+        return Promise.reject({
+          errorFields: errors,
+          values: { ...store.values }
+        });
+      }
+      return { ...store.values };
+    }
+  };
+}
+function useReactForm() {
+  const formRef = React.useRef();
+  if (!formRef.current) formRef.current = createFormInstance();
+  return [formRef.current];
+}
+function useReactFormWatch(name, form) {
+  return React.useSyncExternalStore(
+    (listener) => {
+      form.__store.listeners.add(listener);
+      return () => form.__store.listeners.delete(listener);
+    },
+    () => form.__store.revision,
+    () => 0
+  ) >= 0 ? form.getFieldValue(name) : void 0;
+}
+var FormContext = React.createContext(null);
+function ReactFormRoot({
+  form,
+  initialValues,
+  layout = "vertical",
+  className,
+  children,
+  ...props
+}) {
+  const initialKey = React.useMemo(
+    () => JSON.stringify(initialValues ?? {}),
+    [initialValues]
+  );
+  React.useEffect(() => {
+    form.__store.initialValues = { ...initialValues };
+    form.__store.values = { ...initialValues, ...form.__store.values };
+    form.__store.notify();
+  }, [form, initialKey]);
+  return /* @__PURE__ */ jsxRuntime.jsx(FormContext.Provider, { value: form, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "form",
+    {
+      ...props,
+      className: joinClassNames(
+        `${REACT_COMPONENT_PREFIX}-form`,
+        `${REACT_COMPONENT_PREFIX}-form-${layout}`,
+        className
+      ),
+      onSubmit: (event) => event.preventDefault(),
+      children
+    }
+  ) });
+}
+function ReactFormItem({
+  label,
+  name,
+  children,
+  rules = [],
+  initialValue
+}) {
+  const form = React.useContext(FormContext);
+  if (!form) throw new Error("ReactForm.Item \u5FC5\u987B\u5728 ReactForm \u5185\u4F7F\u7528");
+  React.useSyncExternalStore(
+    (listener) => {
+      form.__store.listeners.add(listener);
+      return () => form.__store.listeners.delete(listener);
+    },
+    () => form.__store.revision,
+    () => 0
+  );
+  React.useEffect(() => {
+    form.__store.rules.set(name, rules);
+    if (form.getFieldValue(name) === void 0 && initialValue !== void 0) {
+      form.setFieldsValue({ [name]: initialValue });
+    }
+    return () => {
+      form.__store.rules.delete(name);
+    };
+  }, [form, initialValue, name, rules]);
+  const childProps = children.props;
+  const value = form.getFieldValue(name);
+  return /* @__PURE__ */ jsxRuntime.jsxs("label", { className: `${REACT_COMPONENT_PREFIX}-form-item`, children: [
+    label ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${REACT_COMPONENT_PREFIX}-form-label`, children: label }) : null,
+    React.cloneElement(children, {
+      value: value ?? "",
+      onChange: (...args) => {
+        const first = args[0];
+        const nextValue = typeof first === "object" && first !== null && "target" in first ? first.target?.value : first;
+        form.setFieldsValue({ [name]: nextValue });
+        const childOnChange = childProps.onChange;
+        if (typeof childOnChange === "function") childOnChange(...args);
+      }
+    }),
+    form.__store.errors[name] ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${REACT_COMPONENT_PREFIX}-form-error`, children: form.__store.errors[name] }) : null
+  ] });
+}
+var ReactForm = Object.assign(ReactFormRoot, {
+  Item: ReactFormItem,
+  useForm: useReactForm,
+  useWatch: useReactFormWatch
+});
+function showMessage(type, content) {
+  if (typeof document === "undefined") return;
+  const hostId = `${REACT_COMPONENT_PREFIX}-message-host`;
+  let host = document.getElementById(hostId);
+  if (!host) {
+    host = document.createElement("div");
+    host.id = hostId;
+    host.className = hostId;
+    document.body.appendChild(host);
+  }
+  const item = document.createElement("div");
+  item.className = `${REACT_COMPONENT_PREFIX}-message ${REACT_COMPONENT_PREFIX}-message-${type}`;
+  item.textContent = typeof content === "string" ? content : String(content ?? "");
+  host.appendChild(item);
+  window.setTimeout(() => item.remove(), 3e3);
+}
+var reactMessage = {
+  info: (content) => showMessage("info", content),
+  success: (content) => showMessage("success", content),
+  warning: (content) => showMessage("warning", content),
+  error: (content) => showMessage("error", content)
+};
+
 exports.REACT_COMPONENT_PREFIX = REACT_COMPONENT_PREFIX;
 exports.ReactAutoComplete = ReactAutoComplete;
+exports.ReactButton = ReactButton;
 exports.ReactCheckbox = ReactCheckbox;
+exports.ReactCol = ReactCol;
 exports.ReactColorPicker = ReactColorPicker;
 exports.ReactContentScaleProvider = ReactContentScaleProvider;
 exports.ReactDatePicker = ReactDatePicker;
@@ -8075,6 +8455,8 @@ exports.ReactDateRangePicker = ReactDateRangePicker;
 exports.ReactDateTimePicker = ReactDateTimePicker;
 exports.ReactDateTimeRangePicker = ReactDateTimeRangePicker;
 exports.ReactFilterPanel = ReactFilterPanel;
+exports.ReactFlex = ReactFlex;
+exports.ReactForm = ReactForm;
 exports.ReactImagePreview = ReactImagePreview;
 exports.ReactInput = ReactInput;
 exports.ReactInputNumber = ReactInputNumber;
@@ -8086,15 +8468,22 @@ exports.ReactPagination = ReactPagination;
 exports.ReactPopconfirm = ReactPopconfirm;
 exports.ReactPopup = ReactPopup;
 exports.ReactQuarterPicker = ReactQuarterPicker;
+exports.ReactRadio = ReactRadio;
 exports.ReactResizablePanels = ReactResizablePanels;
+exports.ReactRow = ReactRow;
 exports.ReactSelect = ReactSelect;
+exports.ReactTextArea = ReactTextArea;
 exports.ReactTimePicker = ReactTimePicker;
 exports.ReactTimeRangePicker = ReactTimeRangePicker;
+exports.ReactTooltip = ReactTooltip;
 exports.ReactTransition = ReactTransition;
 exports.ReactVirtualList = ReactVirtualList;
 exports.ReactYearPicker = ReactYearPicker;
+exports.reactMessage = reactMessage;
 exports.resolveResizablePanelSizes = resolveResizablePanelSizes;
 exports.useReactContentScale = useReactContentScale;
+exports.useReactForm = useReactForm;
+exports.useReactFormWatch = useReactFormWatch;
 exports.useReactTransition = useReactTransition;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map