@canvas-components/react-components 0.3.18 → 0.3.19

package/dist/index.cjs

@@ -1518,6 +1518,275 @@ 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/form/style.css
+styleInject(".canvas-react-form {\n  min-width: 0;\n}\n.canvas-react-form-vertical {\n  display: grid;\n  gap: 16px;\n}\n.canvas-react-form-horizontal {\n  display: grid;\n  gap: 12px;\n}\n.canvas-react-form-inline {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: flex-start;\n  gap: 12px 16px;\n}\n.canvas-react-form-item {\n  box-sizing: border-box;\n  min-width: 0;\n}\n.canvas-react-form-item-vertical {\n  display: grid;\n  gap: 6px;\n}\n.canvas-react-form-item-horizontal {\n  display: grid;\n  grid-template-columns: auto minmax(0, 1fr);\n  align-items: center;\n  column-gap: 10px;\n  row-gap: 4px;\n}\n.canvas-react-form-item-inline {\n  display: inline-grid;\n  grid-template-columns: auto minmax(0, 1fr);\n  align-items: center;\n  column-gap: 8px;\n}\n.canvas-react-form-item-no-wrap {\n  flex-wrap: nowrap;\n}\n.canvas-react-form-item-horizontal.canvas-react-form-item-no-wrap {\n  display: grid;\n  grid-template-columns: max-content minmax(0, 1fr);\n}\n.canvas-react-form-horizontal > .canvas-react-form-item {\n  margin-bottom: var(--canvas-react-form-item-spacing, 16px);\n}\n.canvas-react-form-item-inline.canvas-react-form-item-no-wrap {\n  display: inline-grid;\n  grid-template-columns: max-content minmax(0, 1fr);\n}\n.canvas-react-form-item-no-wrap > .canvas-react-form-label {\n  white-space: nowrap;\n}\n.canvas-react-form-label {\n  display: inline-flex;\n  align-items: center;\n  gap: 3px;\n  min-width: 0;\n  color: #475569;\n  font-size: 13px;\n  line-height: 1.4;\n}\n.canvas-react-form-horizontal > .canvas-react-form-item > .canvas-react-form-label {\n  min-height: 32px;\n}\n.canvas-react-form-required {\n  color: #dc2626;\n}\n.canvas-react-form-control {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n}\n.canvas-react-form-error {\n  color: #dc2626;\n  font-size: 12px;\n}\n.canvas-react-form-help,\n.canvas-react-form-extra {\n  color: #64748b;\n  font-size: 12px;\n}\n.canvas-react-form-item-error .canvas-react-form-control > input,\n.canvas-react-form-item-error .canvas-react-form-control > textarea {\n  border-color: #dc2626;\n}\n");
+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(null);
+  if (!formRef.current) formRef.current = createFormInstance();
+  return [formRef.current];
+}
+function useReactFormWatch(name, form) {
+  React.useSyncExternalStore(
+    (listener) => {
+      form.__store.listeners.add(listener);
+      return () => form.__store.listeners.delete(listener);
+    },
+    () => form.__store.revision,
+    () => 0
+  );
+  return form.getFieldValue(name);
+}
+var FormContext = React.createContext(null);
+var emptySubscribe = () => () => {
+};
+var emptySnapshot = () => 0;
+function ReactFormRoot({
+  form: formProp,
+  initialValues,
+  layout = "vertical",
+  noWrap = false,
+  itemSpacing,
+  labelWidth,
+  labelAlign = "right",
+  colon = false,
+  requiredMark = true,
+  className,
+  children,
+  ...props
+}) {
+  const internalForm = React.useRef(null);
+  if (!internalForm.current) internalForm.current = createFormInstance();
+  const form = formProp ?? internalForm.current;
+  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]);
+  const contextValue = React.useMemo(
+    () => ({
+      form,
+      layout,
+      noWrap,
+      labelWidth,
+      labelAlign,
+      colon,
+      requiredMark
+    }),
+    [colon, form, labelAlign, labelWidth, layout, noWrap, requiredMark]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(FormContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "form",
+    {
+      ...props,
+      style: itemSpacing === void 0 ? props.style : {
+        ...props.style,
+        "--canvas-react-form-item-spacing": itemSpacing
+      },
+      className: joinClassNames(
+        `${REACT_COMPONENT_PREFIX}-form`,
+        `${REACT_COMPONENT_PREFIX}-form-${layout}`,
+        className
+      ),
+      onSubmit: (event) => event.preventDefault(),
+      children
+    }
+  ) });
+}
+function ReactFormItem({
+  label,
+  name,
+  children,
+  rules = [],
+  initialValue,
+  required,
+  colon,
+  labelWidth,
+  labelAlign,
+  labelStyle,
+  controlStyle,
+  help,
+  extra,
+  className,
+  style,
+  noWrap
+}) {
+  const context = React.useContext(FormContext);
+  const form = context?.form ?? null;
+  if (name && !form) throw new Error("ReactForm.Item \u5FC5\u987B\u5728 ReactForm \u5185\u4F7F\u7528");
+  React.useSyncExternalStore(
+    form ? (listener) => {
+      form.__store.listeners.add(listener);
+      return () => form.__store.listeners.delete(listener);
+    } : emptySubscribe,
+    form ? () => form.__store.revision : emptySnapshot,
+    emptySnapshot
+  );
+  React.useEffect(() => {
+    if (!form || !name) return;
+    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 = React.isValidElement(children) ? children.props : {};
+  const value = form && name ? form.getFieldValue(name) : void 0;
+  const child = form && name && React.isValidElement(children) ? 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);
+    }
+  }) : children;
+  const error = form && name ? form.__store.errors[name] : void 0;
+  const isRequired = required ?? rules.some((rule) => typeof rule !== "function" && rule.required === true);
+  const resolvedLabelWidth = labelWidth ?? context?.labelWidth;
+  const resolvedLabelAlign = labelAlign ?? context?.labelAlign ?? "right";
+  const showColon = colon ?? context?.colon ?? false;
+  const shouldMarkRequired = context?.requiredMark ?? true;
+  const resolvedLayout = context?.layout ?? "vertical";
+  const resolvedNoWrap = noWrap ?? context?.noWrap ?? false;
+  const labelElementId = typeof childProps.id === "string" ? childProps.id : void 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: joinClassNames(
+        `${REACT_COMPONENT_PREFIX}-form-item`,
+        `${REACT_COMPONENT_PREFIX}-form-item-${resolvedLayout}`,
+        resolvedNoWrap && `${REACT_COMPONENT_PREFIX}-form-item-no-wrap`,
+        className,
+        error && `${REACT_COMPONENT_PREFIX}-form-item-error`
+      ),
+      style,
+      children: [
+        label ? /* @__PURE__ */ jsxRuntime.jsxs(
+          "label",
+          {
+            className: `${REACT_COMPONENT_PREFIX}-form-label`,
+            htmlFor: labelElementId,
+            style: {
+              width: resolvedLabelWidth,
+              flexBasis: resolvedLabelWidth,
+              textAlign: resolvedLabelAlign,
+              ...labelStyle
+            },
+            children: [
+              shouldMarkRequired && isRequired ? /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  "aria-hidden": "true",
+                  className: `${REACT_COMPONENT_PREFIX}-form-required`,
+                  children: "*"
+                }
+              ) : null,
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: label }),
+              showColon ? /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: ":" }) : null
+            ]
+          }
+        ) : null,
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: `${REACT_COMPONENT_PREFIX}-form-control`,
+            style: controlStyle,
+            children: [
+              child,
+              error ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${REACT_COMPONENT_PREFIX}-form-error`, children: error }) : help ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${REACT_COMPONENT_PREFIX}-form-help`, children: help }) : null,
+              extra ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${REACT_COMPONENT_PREFIX}-form-extra`, children: extra }) : null
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+var ReactForm = Object.assign(ReactFormRoot, {
+  Item: ReactFormItem,
+  useForm: useReactForm,
+  useWatch: useReactFormWatch
+});
+
 // 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";
@@ -5914,7 +6183,7 @@ function isPromiseLike(value) {
 }
 
 // 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");
+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-primary:hover:not(:disabled) {\n  color: #fff;\n  border-color: #4096ff;\n  background: #4096ff;\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,
@@ -6076,173 +6345,6 @@ function ReactTextArea({ className, ...props }) {
     }
   );
 }
-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`;
@@ -9841,6 +9943,7 @@ exports.ReactDateTimeRangePicker = ReactDateTimeRangePicker;
 exports.ReactFilterPanel = ReactFilterPanel;
 exports.ReactFlex = ReactFlex;
 exports.ReactForm = ReactForm;
+exports.ReactFormItem = ReactFormItem;
 exports.ReactImagePreview = ReactImagePreview;
 exports.ReactInput = ReactInput;
 exports.ReactInputNumber = ReactInputNumber;

package/dist/index.d.cts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { InputHTMLAttributes, ReactNode, KeyboardEvent as KeyboardEvent$1, CSSProperties, ButtonHTMLAttributes, MouseEvent, RefObject, HTMLAttributes, ReactElement, TextareaHTMLAttributes } from 'react';
+import { InputHTMLAttributes, ReactNode, HTMLAttributes, CSSProperties, KeyboardEvent as KeyboardEvent$1, ButtonHTMLAttributes, MouseEvent, RefObject, TextareaHTMLAttributes, ReactElement } from 'react';
 
 interface ReactCheckboxRef {
     focus: () => void;
@@ -102,6 +102,80 @@ declare function ReactFilterPanel(props: {
     request: ReactFilterPanelRequest | null;
 }): react.JSX.Element | null;
 
+type ReactFormValues = Record<string, unknown>;
+interface ReactFormRuleContext {
+    getFieldValue: (name: string) => unknown;
+}
+interface ReactFormRuleConfig {
+    required?: boolean;
+    message?: string;
+    type?: "number" | "integer" | "string";
+    min?: number;
+    max?: number;
+    validator?: (rule: ReactFormRuleConfig, value: unknown) => void | Promise<void>;
+}
+type ReactFormRule = ReactFormRuleConfig | ((context: ReactFormRuleContext) => ReactFormRuleConfig);
+interface ReactFormInstance<T extends object = Record<string, unknown>> {
+    getFieldValue: (name: string) => unknown;
+    setFieldsValue: (values: Partial<T>) => void;
+    resetFields: () => void;
+    validateFields: () => Promise<T>;
+    /** @internal */
+    __store: FormStore;
+}
+interface FormStore {
+    values: ReactFormValues;
+    initialValues: ReactFormValues;
+    errors: Record<string, string>;
+    rules: Map<string, ReactFormRule[]>;
+    listeners: Set<() => void>;
+    revision: number;
+    notify: () => void;
+}
+type ReactFormLayout = "vertical" | "horizontal" | "inline";
+/** 创建表单实例。 */
+declare function useReactForm<T extends object = Record<string, unknown>>(): readonly [ReactFormInstance<T>];
+/** 订阅表单字段值。 */
+declare function useReactFormWatch(name: string, form: ReactFormInstance): unknown;
+interface ReactFormProps extends Omit<HTMLAttributes<HTMLFormElement>, "onSubmit"> {
+    form?: ReactFormInstance;
+    initialValues?: ReactFormValues;
+    layout?: ReactFormLayout;
+    noWrap?: boolean;
+    itemSpacing?: CSSProperties["marginBlockEnd"];
+    labelWidth?: CSSProperties["width"];
+    labelAlign?: "left" | "right";
+    colon?: boolean;
+    requiredMark?: boolean;
+}
+declare function ReactFormRoot({ form: formProp, initialValues, layout, noWrap, itemSpacing, labelWidth, labelAlign, colon, requiredMark, className, children, ...props }: ReactFormProps): react.JSX.Element;
+interface ReactFormItemProps {
+    label?: ReactNode;
+    name?: string;
+    children: ReactNode;
+    rules?: ReactFormRule[];
+    dependencies?: string[];
+    initialValue?: unknown;
+    required?: boolean;
+    colon?: boolean;
+    labelWidth?: CSSProperties["width"];
+    labelAlign?: "left" | "right";
+    labelStyle?: CSSProperties;
+    controlStyle?: CSSProperties;
+    help?: ReactNode;
+    extra?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+    noWrap?: boolean;
+}
+declare function ReactFormItem({ label, name, children, rules, initialValue, required, colon, labelWidth, labelAlign, labelStyle, controlStyle, help, extra, className, style, noWrap, }: ReactFormItemProps): react.JSX.Element;
+/** Ant Design 风格表单，支持横向、纵向与行内布局。 */
+declare const ReactForm: typeof ReactFormRoot & {
+    Item: typeof ReactFormItem;
+    useForm: typeof useReactForm;
+    useWatch: typeof useReactFormWatch;
+};
+
 interface ReactInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
     /**
      * 回车确认回调。
@@ -1323,61 +1397,6 @@ interface ReactTextAreaProps extends TextareaHTMLAttributes<HTMLTextAreaElement>
 }
 /** 多行文本输入框。 */
 declare function ReactTextArea({ className, ...props }: ReactTextAreaProps): react.JSX.Element;
-type ReactFormValues = Record<string, unknown>;
-interface ReactFormRuleContext {
-    getFieldValue: (name: string) => any;
-}
-interface ReactFormRuleConfig {
-    required?: boolean;
-    message?: string;
-    type?: "number" | "integer" | "string";
-    min?: number;
-    max?: number;
-    validator?: (rule: ReactFormRuleConfig, value: any) => void | Promise<void>;
-}
-type ReactFormRule = ReactFormRuleConfig | ((context: ReactFormRuleContext) => ReactFormRuleConfig);
-interface ReactFormInstance<T extends object = any> {
-    getFieldValue: (name: string) => any;
-    setFieldsValue: (values: Partial<T>) => void;
-    resetFields: () => void;
-    validateFields: () => Promise<T>;
-    /** @internal */
-    __store: FormStore;
-}
-interface FormStore {
-    values: ReactFormValues;
-    initialValues: ReactFormValues;
-    errors: Record<string, string>;
-    rules: Map<string, ReactFormRule[]>;
-    listeners: Set<() => void>;
-    revision: number;
-    notify: () => void;
-}
-/** 创建表单实例。 */
-declare function useReactForm<T extends object = any>(): readonly [ReactFormInstance<T>];
-/** 订阅表单字段值。 */
-declare function useReactFormWatch(name: string, form: ReactFormInstance): any;
-interface ReactFormProps extends Omit<HTMLAttributes<HTMLFormElement>, "onSubmit"> {
-    form: ReactFormInstance;
-    initialValues?: ReactFormValues;
-    layout?: "vertical" | "horizontal";
-}
-declare function ReactFormRoot({ form, initialValues, layout, className, children, ...props }: ReactFormProps): react.JSX.Element;
-interface ReactFormItemProps {
-    label?: ReactNode;
-    name: string;
-    children: ReactElement;
-    rules?: ReactFormRule[];
-    dependencies?: string[];
-    initialValue?: unknown;
-}
-declare function ReactFormItem({ label, name, children, rules, initialValue, }: ReactFormItemProps): react.JSX.Element;
-/** 带字段绑定和异步校验的轻量表单。 */
-declare const ReactForm: typeof ReactFormRoot & {
-    Item: typeof ReactFormItem;
-    useForm: typeof useReactForm;
-    useWatch: typeof useReactFormWatch;
-};
 type ReactMessageType = "info" | "success" | "warning" | "error";
 /** 全局消息提示服务。 */
 declare const reactMessage: {
@@ -1410,4 +1429,4 @@ declare function useReactContentScale(): ReactContentScaleValue;
  */
 declare const REACT_COMPONENT_PREFIX = "canvas-react";
 
-export { type CascaderCheckedStrategy, type CascaderPath, REACT_COMPONENT_PREFIX, ReactAutoComplete, type ReactAutoCompleteProps, ReactButton, type ReactButtonProps, ReactCascader, type ReactCascaderChangeInfo, type ReactCascaderOption, type ReactCascaderProps, ReactCheckbox, type ReactCheckboxProps, type ReactCheckboxRef, ReactCol, type ReactColProps, ReactColorPicker, type ReactColorPickerProps, ReactContentScaleProvider, type ReactContentScaleValue, ReactDatePicker, type ReactDatePickerProps, ReactDateRangePicker, type ReactDateRangePickerProps, ReactDateTimePicker, type ReactDateTimePickerProps, ReactDateTimeRangePicker, type ReactDateTimeRangePickerProps, type ReactFilterConditionOperator, ReactFilterPanel, type ReactFilterPanelCondition, type ReactFilterPanelOption, type ReactFilterPanelRequest, type ReactFilterPanelTexts, type ReactFilterPanelValue, ReactFlex, type ReactFlexProps, ReactForm, type ReactFormInstance, type ReactFormItemProps, type ReactFormProps, type ReactFormRule, type ReactFormRuleConfig, type ReactFormValues, ReactImagePreview, type ReactImagePreviewProps, ReactInput, ReactInputNumber, type ReactInputNumberProps, type ReactInputProps, ReactInputRange, type ReactInputRangeProps, type ReactInputRangeValue, type ReactMessageType, ReactModal, type ReactModalButtonProps, type ReactModalCancelEvent, type ReactModalProps, ReactMonthPicker, type ReactMonthPickerProps, ReactNumberInput, type ReactNumberInputProps, ReactPagination, type ReactPaginationProps, type ReactPaginationStyles, ReactPopconfirm, type ReactPopconfirmButtonProps, type ReactPopconfirmPlacement, type ReactPopconfirmProps, ReactPopup, type ReactPopupProps, ReactQuarterPicker, type ReactQuarterPickerProps, ReactRadio, type ReactRadioGroupProps, type ReactRadioProps, type ReactResizablePanel, type ReactResizablePanelSizes, ReactResizablePanels, type ReactResizablePanelsDirection, type ReactResizablePanelsProps, type ReactResizablePanelsResizeInfo, ReactRow, type ReactRowProps, ReactScrollbarPositionDialog, type ReactScrollbarSettings, ReactScrollbarSettingsDialog, ReactSelect, type ReactSelectChangeInfo, type ReactSelectFilterOption, type ReactSelectOption, type ReactSelectProps, ReactTextArea, type ReactTextAreaProps, ReactTimePicker, type ReactTimePickerProps, ReactTimeRangePicker, type ReactTimeRangePickerProps, ReactTooltip, type ReactTooltipProps, ReactTransition, type ReactTransitionDuration, type ReactTransitionOptions, type ReactTransitionPhase, type ReactTransitionProps, type ReactTransitionState, ReactTreeSelect, type ReactTreeSelectChangeInfo, type TreeSelectNode as ReactTreeSelectNode, type ReactTreeSelectProps, type ReactTreeSelectValue, ReactVirtualList, type ReactVirtualListProps, type ReactVirtualListRef, ReactYearPicker, type ReactYearPickerProps, type SharedScrollbarSettings, getSharedScrollbarSettings, reactMessage, resolveReactScrollbarMode, resolveResizablePanelSizes, setSharedScrollbarSettings, subscribeSharedScrollbarSettings, useReactContentScale, useReactForm, useReactFormWatch, useReactTransition };
+export { type CascaderCheckedStrategy, type CascaderPath, REACT_COMPONENT_PREFIX, ReactAutoComplete, type ReactAutoCompleteProps, ReactButton, type ReactButtonProps, ReactCascader, type ReactCascaderChangeInfo, type ReactCascaderOption, type ReactCascaderProps, ReactCheckbox, type ReactCheckboxProps, type ReactCheckboxRef, ReactCol, type ReactColProps, ReactColorPicker, type ReactColorPickerProps, ReactContentScaleProvider, type ReactContentScaleValue, ReactDatePicker, type ReactDatePickerProps, ReactDateRangePicker, type ReactDateRangePickerProps, ReactDateTimePicker, type ReactDateTimePickerProps, ReactDateTimeRangePicker, type ReactDateTimeRangePickerProps, type ReactFilterConditionOperator, ReactFilterPanel, type ReactFilterPanelCondition, type ReactFilterPanelOption, type ReactFilterPanelRequest, type ReactFilterPanelTexts, type ReactFilterPanelValue, ReactFlex, type ReactFlexProps, ReactForm, type ReactFormInstance, ReactFormItem, type ReactFormItemProps, type ReactFormLayout, type ReactFormProps, type ReactFormRule, type ReactFormRuleConfig, type ReactFormRuleContext, type ReactFormValues, ReactImagePreview, type ReactImagePreviewProps, ReactInput, ReactInputNumber, type ReactInputNumberProps, type ReactInputProps, ReactInputRange, type ReactInputRangeProps, type ReactInputRangeValue, type ReactMessageType, ReactModal, type ReactModalButtonProps, type ReactModalCancelEvent, type ReactModalProps, ReactMonthPicker, type ReactMonthPickerProps, ReactNumberInput, type ReactNumberInputProps, ReactPagination, type ReactPaginationProps, type ReactPaginationStyles, ReactPopconfirm, type ReactPopconfirmButtonProps, type ReactPopconfirmPlacement, type ReactPopconfirmProps, ReactPopup, type ReactPopupProps, ReactQuarterPicker, type ReactQuarterPickerProps, ReactRadio, type ReactRadioGroupProps, type ReactRadioProps, type ReactResizablePanel, type ReactResizablePanelSizes, ReactResizablePanels, type ReactResizablePanelsDirection, type ReactResizablePanelsProps, type ReactResizablePanelsResizeInfo, ReactRow, type ReactRowProps, ReactScrollbarPositionDialog, type ReactScrollbarSettings, ReactScrollbarSettingsDialog, ReactSelect, type ReactSelectChangeInfo, type ReactSelectFilterOption, type ReactSelectOption, type ReactSelectProps, ReactTextArea, type ReactTextAreaProps, ReactTimePicker, type ReactTimePickerProps, ReactTimeRangePicker, type ReactTimeRangePickerProps, ReactTooltip, type ReactTooltipProps, ReactTransition, type ReactTransitionDuration, type ReactTransitionOptions, type ReactTransitionPhase, type ReactTransitionProps, type ReactTransitionState, ReactTreeSelect, type ReactTreeSelectChangeInfo, type TreeSelectNode as ReactTreeSelectNode, type ReactTreeSelectProps, type ReactTreeSelectValue, ReactVirtualList, type ReactVirtualListProps, type ReactVirtualListRef, ReactYearPicker, type ReactYearPickerProps, type SharedScrollbarSettings, getSharedScrollbarSettings, reactMessage, resolveReactScrollbarMode, resolveResizablePanelSizes, setSharedScrollbarSettings, subscribeSharedScrollbarSettings, useReactContentScale, useReactForm, useReactFormWatch, useReactTransition };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { InputHTMLAttributes, ReactNode, KeyboardEvent as KeyboardEvent$1, CSSProperties, ButtonHTMLAttributes, MouseEvent, RefObject, HTMLAttributes, ReactElement, TextareaHTMLAttributes } from 'react';
+import { InputHTMLAttributes, ReactNode, HTMLAttributes, CSSProperties, KeyboardEvent as KeyboardEvent$1, ButtonHTMLAttributes, MouseEvent, RefObject, TextareaHTMLAttributes, ReactElement } from 'react';
 
 interface ReactCheckboxRef {
     focus: () => void;
@@ -102,6 +102,80 @@ declare function ReactFilterPanel(props: {
     request: ReactFilterPanelRequest | null;
 }): react.JSX.Element | null;
 
+type ReactFormValues = Record<string, unknown>;
+interface ReactFormRuleContext {
+    getFieldValue: (name: string) => unknown;
+}
+interface ReactFormRuleConfig {
+    required?: boolean;
+    message?: string;
+    type?: "number" | "integer" | "string";
+    min?: number;
+    max?: number;
+    validator?: (rule: ReactFormRuleConfig, value: unknown) => void | Promise<void>;
+}
+type ReactFormRule = ReactFormRuleConfig | ((context: ReactFormRuleContext) => ReactFormRuleConfig);
+interface ReactFormInstance<T extends object = Record<string, unknown>> {
+    getFieldValue: (name: string) => unknown;
+    setFieldsValue: (values: Partial<T>) => void;
+    resetFields: () => void;
+    validateFields: () => Promise<T>;
+    /** @internal */
+    __store: FormStore;
+}
+interface FormStore {
+    values: ReactFormValues;
+    initialValues: ReactFormValues;
+    errors: Record<string, string>;
+    rules: Map<string, ReactFormRule[]>;
+    listeners: Set<() => void>;
+    revision: number;
+    notify: () => void;
+}
+type ReactFormLayout = "vertical" | "horizontal" | "inline";
+/** 创建表单实例。 */
+declare function useReactForm<T extends object = Record<string, unknown>>(): readonly [ReactFormInstance<T>];
+/** 订阅表单字段值。 */
+declare function useReactFormWatch(name: string, form: ReactFormInstance): unknown;
+interface ReactFormProps extends Omit<HTMLAttributes<HTMLFormElement>, "onSubmit"> {
+    form?: ReactFormInstance;
+    initialValues?: ReactFormValues;
+    layout?: ReactFormLayout;
+    noWrap?: boolean;
+    itemSpacing?: CSSProperties["marginBlockEnd"];
+    labelWidth?: CSSProperties["width"];
+    labelAlign?: "left" | "right";
+    colon?: boolean;
+    requiredMark?: boolean;
+}
+declare function ReactFormRoot({ form: formProp, initialValues, layout, noWrap, itemSpacing, labelWidth, labelAlign, colon, requiredMark, className, children, ...props }: ReactFormProps): react.JSX.Element;
+interface ReactFormItemProps {
+    label?: ReactNode;
+    name?: string;
+    children: ReactNode;
+    rules?: ReactFormRule[];
+    dependencies?: string[];
+    initialValue?: unknown;
+    required?: boolean;
+    colon?: boolean;
+    labelWidth?: CSSProperties["width"];
+    labelAlign?: "left" | "right";
+    labelStyle?: CSSProperties;
+    controlStyle?: CSSProperties;
+    help?: ReactNode;
+    extra?: ReactNode;
+    className?: string;
+    style?: CSSProperties;
+    noWrap?: boolean;
+}
+declare function ReactFormItem({ label, name, children, rules, initialValue, required, colon, labelWidth, labelAlign, labelStyle, controlStyle, help, extra, className, style, noWrap, }: ReactFormItemProps): react.JSX.Element;
+/** Ant Design 风格表单，支持横向、纵向与行内布局。 */
+declare const ReactForm: typeof ReactFormRoot & {
+    Item: typeof ReactFormItem;
+    useForm: typeof useReactForm;
+    useWatch: typeof useReactFormWatch;
+};
+
 interface ReactInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
     /**
      * 回车确认回调。
@@ -1323,61 +1397,6 @@ interface ReactTextAreaProps extends TextareaHTMLAttributes<HTMLTextAreaElement>
 }
 /** 多行文本输入框。 */
 declare function ReactTextArea({ className, ...props }: ReactTextAreaProps): react.JSX.Element;
-type ReactFormValues = Record<string, unknown>;
-interface ReactFormRuleContext {
-    getFieldValue: (name: string) => any;
-}
-interface ReactFormRuleConfig {
-    required?: boolean;
-    message?: string;
-    type?: "number" | "integer" | "string";
-    min?: number;
-    max?: number;
-    validator?: (rule: ReactFormRuleConfig, value: any) => void | Promise<void>;
-}
-type ReactFormRule = ReactFormRuleConfig | ((context: ReactFormRuleContext) => ReactFormRuleConfig);
-interface ReactFormInstance<T extends object = any> {
-    getFieldValue: (name: string) => any;
-    setFieldsValue: (values: Partial<T>) => void;
-    resetFields: () => void;
-    validateFields: () => Promise<T>;
-    /** @internal */
-    __store: FormStore;
-}
-interface FormStore {
-    values: ReactFormValues;
-    initialValues: ReactFormValues;
-    errors: Record<string, string>;
-    rules: Map<string, ReactFormRule[]>;
-    listeners: Set<() => void>;
-    revision: number;
-    notify: () => void;
-}
-/** 创建表单实例。 */
-declare function useReactForm<T extends object = any>(): readonly [ReactFormInstance<T>];
-/** 订阅表单字段值。 */
-declare function useReactFormWatch(name: string, form: ReactFormInstance): any;
-interface ReactFormProps extends Omit<HTMLAttributes<HTMLFormElement>, "onSubmit"> {
-    form: ReactFormInstance;
-    initialValues?: ReactFormValues;
-    layout?: "vertical" | "horizontal";
-}
-declare function ReactFormRoot({ form, initialValues, layout, className, children, ...props }: ReactFormProps): react.JSX.Element;
-interface ReactFormItemProps {
-    label?: ReactNode;
-    name: string;
-    children: ReactElement;
-    rules?: ReactFormRule[];
-    dependencies?: string[];
-    initialValue?: unknown;
-}
-declare function ReactFormItem({ label, name, children, rules, initialValue, }: ReactFormItemProps): react.JSX.Element;
-/** 带字段绑定和异步校验的轻量表单。 */
-declare const ReactForm: typeof ReactFormRoot & {
-    Item: typeof ReactFormItem;
-    useForm: typeof useReactForm;
-    useWatch: typeof useReactFormWatch;
-};
 type ReactMessageType = "info" | "success" | "warning" | "error";
 /** 全局消息提示服务。 */
 declare const reactMessage: {
@@ -1410,4 +1429,4 @@ declare function useReactContentScale(): ReactContentScaleValue;
  */
 declare const REACT_COMPONENT_PREFIX = "canvas-react";
 
-export { type CascaderCheckedStrategy, type CascaderPath, REACT_COMPONENT_PREFIX, ReactAutoComplete, type ReactAutoCompleteProps, ReactButton, type ReactButtonProps, ReactCascader, type ReactCascaderChangeInfo, type ReactCascaderOption, type ReactCascaderProps, ReactCheckbox, type ReactCheckboxProps, type ReactCheckboxRef, ReactCol, type ReactColProps, ReactColorPicker, type ReactColorPickerProps, ReactContentScaleProvider, type ReactContentScaleValue, ReactDatePicker, type ReactDatePickerProps, ReactDateRangePicker, type ReactDateRangePickerProps, ReactDateTimePicker, type ReactDateTimePickerProps, ReactDateTimeRangePicker, type ReactDateTimeRangePickerProps, type ReactFilterConditionOperator, ReactFilterPanel, type ReactFilterPanelCondition, type ReactFilterPanelOption, type ReactFilterPanelRequest, type ReactFilterPanelTexts, type ReactFilterPanelValue, ReactFlex, type ReactFlexProps, ReactForm, type ReactFormInstance, type ReactFormItemProps, type ReactFormProps, type ReactFormRule, type ReactFormRuleConfig, type ReactFormValues, ReactImagePreview, type ReactImagePreviewProps, ReactInput, ReactInputNumber, type ReactInputNumberProps, type ReactInputProps, ReactInputRange, type ReactInputRangeProps, type ReactInputRangeValue, type ReactMessageType, ReactModal, type ReactModalButtonProps, type ReactModalCancelEvent, type ReactModalProps, ReactMonthPicker, type ReactMonthPickerProps, ReactNumberInput, type ReactNumberInputProps, ReactPagination, type ReactPaginationProps, type ReactPaginationStyles, ReactPopconfirm, type ReactPopconfirmButtonProps, type ReactPopconfirmPlacement, type ReactPopconfirmProps, ReactPopup, type ReactPopupProps, ReactQuarterPicker, type ReactQuarterPickerProps, ReactRadio, type ReactRadioGroupProps, type ReactRadioProps, type ReactResizablePanel, type ReactResizablePanelSizes, ReactResizablePanels, type ReactResizablePanelsDirection, type ReactResizablePanelsProps, type ReactResizablePanelsResizeInfo, ReactRow, type ReactRowProps, ReactScrollbarPositionDialog, type ReactScrollbarSettings, ReactScrollbarSettingsDialog, ReactSelect, type ReactSelectChangeInfo, type ReactSelectFilterOption, type ReactSelectOption, type ReactSelectProps, ReactTextArea, type ReactTextAreaProps, ReactTimePicker, type ReactTimePickerProps, ReactTimeRangePicker, type ReactTimeRangePickerProps, ReactTooltip, type ReactTooltipProps, ReactTransition, type ReactTransitionDuration, type ReactTransitionOptions, type ReactTransitionPhase, type ReactTransitionProps, type ReactTransitionState, ReactTreeSelect, type ReactTreeSelectChangeInfo, type TreeSelectNode as ReactTreeSelectNode, type ReactTreeSelectProps, type ReactTreeSelectValue, ReactVirtualList, type ReactVirtualListProps, type ReactVirtualListRef, ReactYearPicker, type ReactYearPickerProps, type SharedScrollbarSettings, getSharedScrollbarSettings, reactMessage, resolveReactScrollbarMode, resolveResizablePanelSizes, setSharedScrollbarSettings, subscribeSharedScrollbarSettings, useReactContentScale, useReactForm, useReactFormWatch, useReactTransition };
+export { type CascaderCheckedStrategy, type CascaderPath, REACT_COMPONENT_PREFIX, ReactAutoComplete, type ReactAutoCompleteProps, ReactButton, type ReactButtonProps, ReactCascader, type ReactCascaderChangeInfo, type ReactCascaderOption, type ReactCascaderProps, ReactCheckbox, type ReactCheckboxProps, type ReactCheckboxRef, ReactCol, type ReactColProps, ReactColorPicker, type ReactColorPickerProps, ReactContentScaleProvider, type ReactContentScaleValue, ReactDatePicker, type ReactDatePickerProps, ReactDateRangePicker, type ReactDateRangePickerProps, ReactDateTimePicker, type ReactDateTimePickerProps, ReactDateTimeRangePicker, type ReactDateTimeRangePickerProps, type ReactFilterConditionOperator, ReactFilterPanel, type ReactFilterPanelCondition, type ReactFilterPanelOption, type ReactFilterPanelRequest, type ReactFilterPanelTexts, type ReactFilterPanelValue, ReactFlex, type ReactFlexProps, ReactForm, type ReactFormInstance, ReactFormItem, type ReactFormItemProps, type ReactFormLayout, type ReactFormProps, type ReactFormRule, type ReactFormRuleConfig, type ReactFormRuleContext, type ReactFormValues, ReactImagePreview, type ReactImagePreviewProps, ReactInput, ReactInputNumber, type ReactInputNumberProps, type ReactInputProps, ReactInputRange, type ReactInputRangeProps, type ReactInputRangeValue, type ReactMessageType, ReactModal, type ReactModalButtonProps, type ReactModalCancelEvent, type ReactModalProps, ReactMonthPicker, type ReactMonthPickerProps, ReactNumberInput, type ReactNumberInputProps, ReactPagination, type ReactPaginationProps, type ReactPaginationStyles, ReactPopconfirm, type ReactPopconfirmButtonProps, type ReactPopconfirmPlacement, type ReactPopconfirmProps, ReactPopup, type ReactPopupProps, ReactQuarterPicker, type ReactQuarterPickerProps, ReactRadio, type ReactRadioGroupProps, type ReactRadioProps, type ReactResizablePanel, type ReactResizablePanelSizes, ReactResizablePanels, type ReactResizablePanelsDirection, type ReactResizablePanelsProps, type ReactResizablePanelsResizeInfo, ReactRow, type ReactRowProps, ReactScrollbarPositionDialog, type ReactScrollbarSettings, ReactScrollbarSettingsDialog, ReactSelect, type ReactSelectChangeInfo, type ReactSelectFilterOption, type ReactSelectOption, type ReactSelectProps, ReactTextArea, type ReactTextAreaProps, ReactTimePicker, type ReactTimePickerProps, ReactTimeRangePicker, type ReactTimeRangePickerProps, ReactTooltip, type ReactTooltipProps, ReactTransition, type ReactTransitionDuration, type ReactTransitionOptions, type ReactTransitionPhase, type ReactTransitionProps, type ReactTransitionState, ReactTreeSelect, type ReactTreeSelectChangeInfo, type TreeSelectNode as ReactTreeSelectNode, type ReactTreeSelectProps, type ReactTreeSelectValue, ReactVirtualList, type ReactVirtualListProps, type ReactVirtualListRef, ReactYearPicker, type ReactYearPickerProps, type SharedScrollbarSettings, getSharedScrollbarSettings, reactMessage, resolveReactScrollbarMode, resolveResizablePanelSizes, setSharedScrollbarSettings, subscribeSharedScrollbarSettings, useReactContentScale, useReactForm, useReactFormWatch, useReactTransition };

package/dist/index.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { forwardRef, useRef, useEffect, useImperativeHandle, createContext, useState, useMemo, useLayoutEffect, useContext, useSyncExternalStore, cloneElement, Fragment as Fragment$1, useId } from 'react';
+import { forwardRef, useRef, useEffect, useImperativeHandle, createContext, useState, useMemo, useLayoutEffect, useSyncExternalStore, useContext, isValidElement, cloneElement, Fragment as Fragment$1, useId } from 'react';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { createPortal } from 'react-dom';
 
@@ -1497,6 +1497,275 @@ 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/form/style.css
+styleInject(".canvas-react-form {\n  min-width: 0;\n}\n.canvas-react-form-vertical {\n  display: grid;\n  gap: 16px;\n}\n.canvas-react-form-horizontal {\n  display: grid;\n  gap: 12px;\n}\n.canvas-react-form-inline {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: flex-start;\n  gap: 12px 16px;\n}\n.canvas-react-form-item {\n  box-sizing: border-box;\n  min-width: 0;\n}\n.canvas-react-form-item-vertical {\n  display: grid;\n  gap: 6px;\n}\n.canvas-react-form-item-horizontal {\n  display: grid;\n  grid-template-columns: auto minmax(0, 1fr);\n  align-items: center;\n  column-gap: 10px;\n  row-gap: 4px;\n}\n.canvas-react-form-item-inline {\n  display: inline-grid;\n  grid-template-columns: auto minmax(0, 1fr);\n  align-items: center;\n  column-gap: 8px;\n}\n.canvas-react-form-item-no-wrap {\n  flex-wrap: nowrap;\n}\n.canvas-react-form-item-horizontal.canvas-react-form-item-no-wrap {\n  display: grid;\n  grid-template-columns: max-content minmax(0, 1fr);\n}\n.canvas-react-form-horizontal > .canvas-react-form-item {\n  margin-bottom: var(--canvas-react-form-item-spacing, 16px);\n}\n.canvas-react-form-item-inline.canvas-react-form-item-no-wrap {\n  display: inline-grid;\n  grid-template-columns: max-content minmax(0, 1fr);\n}\n.canvas-react-form-item-no-wrap > .canvas-react-form-label {\n  white-space: nowrap;\n}\n.canvas-react-form-label {\n  display: inline-flex;\n  align-items: center;\n  gap: 3px;\n  min-width: 0;\n  color: #475569;\n  font-size: 13px;\n  line-height: 1.4;\n}\n.canvas-react-form-horizontal > .canvas-react-form-item > .canvas-react-form-label {\n  min-height: 32px;\n}\n.canvas-react-form-required {\n  color: #dc2626;\n}\n.canvas-react-form-control {\n  display: flex;\n  flex-direction: column;\n  min-width: 0;\n}\n.canvas-react-form-error {\n  color: #dc2626;\n  font-size: 12px;\n}\n.canvas-react-form-help,\n.canvas-react-form-extra {\n  color: #64748b;\n  font-size: 12px;\n}\n.canvas-react-form-item-error .canvas-react-form-control > input,\n.canvas-react-form-item-error .canvas-react-form-control > textarea {\n  border-color: #dc2626;\n}\n");
+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 = useRef(null);
+  if (!formRef.current) formRef.current = createFormInstance();
+  return [formRef.current];
+}
+function useReactFormWatch(name, form) {
+  useSyncExternalStore(
+    (listener) => {
+      form.__store.listeners.add(listener);
+      return () => form.__store.listeners.delete(listener);
+    },
+    () => form.__store.revision,
+    () => 0
+  );
+  return form.getFieldValue(name);
+}
+var FormContext = createContext(null);
+var emptySubscribe = () => () => {
+};
+var emptySnapshot = () => 0;
+function ReactFormRoot({
+  form: formProp,
+  initialValues,
+  layout = "vertical",
+  noWrap = false,
+  itemSpacing,
+  labelWidth,
+  labelAlign = "right",
+  colon = false,
+  requiredMark = true,
+  className,
+  children,
+  ...props
+}) {
+  const internalForm = useRef(null);
+  if (!internalForm.current) internalForm.current = createFormInstance();
+  const form = formProp ?? internalForm.current;
+  const initialKey = useMemo(
+    () => JSON.stringify(initialValues ?? {}),
+    [initialValues]
+  );
+  useEffect(() => {
+    form.__store.initialValues = { ...initialValues };
+    form.__store.values = { ...initialValues, ...form.__store.values };
+    form.__store.notify();
+  }, [form, initialKey]);
+  const contextValue = useMemo(
+    () => ({
+      form,
+      layout,
+      noWrap,
+      labelWidth,
+      labelAlign,
+      colon,
+      requiredMark
+    }),
+    [colon, form, labelAlign, labelWidth, layout, noWrap, requiredMark]
+  );
+  return /* @__PURE__ */ jsx(FormContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    "form",
+    {
+      ...props,
+      style: itemSpacing === void 0 ? props.style : {
+        ...props.style,
+        "--canvas-react-form-item-spacing": itemSpacing
+      },
+      className: joinClassNames(
+        `${REACT_COMPONENT_PREFIX}-form`,
+        `${REACT_COMPONENT_PREFIX}-form-${layout}`,
+        className
+      ),
+      onSubmit: (event) => event.preventDefault(),
+      children
+    }
+  ) });
+}
+function ReactFormItem({
+  label,
+  name,
+  children,
+  rules = [],
+  initialValue,
+  required,
+  colon,
+  labelWidth,
+  labelAlign,
+  labelStyle,
+  controlStyle,
+  help,
+  extra,
+  className,
+  style,
+  noWrap
+}) {
+  const context = useContext(FormContext);
+  const form = context?.form ?? null;
+  if (name && !form) throw new Error("ReactForm.Item \u5FC5\u987B\u5728 ReactForm \u5185\u4F7F\u7528");
+  useSyncExternalStore(
+    form ? (listener) => {
+      form.__store.listeners.add(listener);
+      return () => form.__store.listeners.delete(listener);
+    } : emptySubscribe,
+    form ? () => form.__store.revision : emptySnapshot,
+    emptySnapshot
+  );
+  useEffect(() => {
+    if (!form || !name) return;
+    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 = isValidElement(children) ? children.props : {};
+  const value = form && name ? form.getFieldValue(name) : void 0;
+  const child = form && name && isValidElement(children) ? 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);
+    }
+  }) : children;
+  const error = form && name ? form.__store.errors[name] : void 0;
+  const isRequired = required ?? rules.some((rule) => typeof rule !== "function" && rule.required === true);
+  const resolvedLabelWidth = labelWidth ?? context?.labelWidth;
+  const resolvedLabelAlign = labelAlign ?? context?.labelAlign ?? "right";
+  const showColon = colon ?? context?.colon ?? false;
+  const shouldMarkRequired = context?.requiredMark ?? true;
+  const resolvedLayout = context?.layout ?? "vertical";
+  const resolvedNoWrap = noWrap ?? context?.noWrap ?? false;
+  const labelElementId = typeof childProps.id === "string" ? childProps.id : void 0;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: joinClassNames(
+        `${REACT_COMPONENT_PREFIX}-form-item`,
+        `${REACT_COMPONENT_PREFIX}-form-item-${resolvedLayout}`,
+        resolvedNoWrap && `${REACT_COMPONENT_PREFIX}-form-item-no-wrap`,
+        className,
+        error && `${REACT_COMPONENT_PREFIX}-form-item-error`
+      ),
+      style,
+      children: [
+        label ? /* @__PURE__ */ jsxs(
+          "label",
+          {
+            className: `${REACT_COMPONENT_PREFIX}-form-label`,
+            htmlFor: labelElementId,
+            style: {
+              width: resolvedLabelWidth,
+              flexBasis: resolvedLabelWidth,
+              textAlign: resolvedLabelAlign,
+              ...labelStyle
+            },
+            children: [
+              shouldMarkRequired && isRequired ? /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "aria-hidden": "true",
+                  className: `${REACT_COMPONENT_PREFIX}-form-required`,
+                  children: "*"
+                }
+              ) : null,
+              /* @__PURE__ */ jsx("span", { children: label }),
+              showColon ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: ":" }) : null
+            ]
+          }
+        ) : null,
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: `${REACT_COMPONENT_PREFIX}-form-control`,
+            style: controlStyle,
+            children: [
+              child,
+              error ? /* @__PURE__ */ jsx("span", { className: `${REACT_COMPONENT_PREFIX}-form-error`, children: error }) : help ? /* @__PURE__ */ jsx("span", { className: `${REACT_COMPONENT_PREFIX}-form-help`, children: help }) : null,
+              extra ? /* @__PURE__ */ jsx("span", { className: `${REACT_COMPONENT_PREFIX}-form-extra`, children: extra }) : null
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+var ReactForm = Object.assign(ReactFormRoot, {
+  Item: ReactFormItem,
+  useForm: useReactForm,
+  useWatch: useReactFormWatch
+});
+
 // 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";
@@ -5893,7 +6162,7 @@ function isPromiseLike(value) {
 }
 
 // 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");
+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-primary:hover:not(:disabled) {\n  color: #fff;\n  border-color: #4096ff;\n  background: #4096ff;\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,
@@ -6055,173 +6324,6 @@ function ReactTextArea({ className, ...props }) {
     }
   );
 }
-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 = useRef();
-  if (!formRef.current) formRef.current = createFormInstance();
-  return [formRef.current];
-}
-function useReactFormWatch(name, form) {
-  return 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 = createContext(null);
-function ReactFormRoot({
-  form,
-  initialValues,
-  layout = "vertical",
-  className,
-  children,
-  ...props
-}) {
-  const initialKey = useMemo(
-    () => JSON.stringify(initialValues ?? {}),
-    [initialValues]
-  );
-  useEffect(() => {
-    form.__store.initialValues = { ...initialValues };
-    form.__store.values = { ...initialValues, ...form.__store.values };
-    form.__store.notify();
-  }, [form, initialKey]);
-  return /* @__PURE__ */ jsx(FormContext.Provider, { value: form, children: /* @__PURE__ */ 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 = useContext(FormContext);
-  if (!form) throw new Error("ReactForm.Item \u5FC5\u987B\u5728 ReactForm \u5185\u4F7F\u7528");
-  useSyncExternalStore(
-    (listener) => {
-      form.__store.listeners.add(listener);
-      return () => form.__store.listeners.delete(listener);
-    },
-    () => form.__store.revision,
-    () => 0
-  );
-  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__ */ jsxs("label", { className: `${REACT_COMPONENT_PREFIX}-form-item`, children: [
-    label ? /* @__PURE__ */ jsx("span", { className: `${REACT_COMPONENT_PREFIX}-form-label`, children: label }) : null,
-    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__ */ 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`;
@@ -9805,4 +9907,4 @@ function resolveDecadeStart6(year) {
   return Math.floor(year / 10) * 10;
 }
 
-export { REACT_COMPONENT_PREFIX, ReactAutoComplete, ReactButton, ReactCascader, ReactCheckbox, ReactCol, ReactColorPicker, ReactContentScaleProvider, ReactDatePicker, ReactDateRangePicker, ReactDateTimePicker, ReactDateTimeRangePicker, ReactFilterPanel, ReactFlex, ReactForm, ReactImagePreview, ReactInput, ReactInputNumber, ReactInputRange, ReactModal, ReactMonthPicker, ReactNumberInput, ReactPagination, ReactPopconfirm, ReactPopup, ReactQuarterPicker, ReactRadio, ReactResizablePanels, ReactRow, ReactScrollbarPositionDialog, ReactScrollbarSettingsDialog, ReactSelect, ReactTextArea, ReactTimePicker, ReactTimeRangePicker, ReactTooltip, ReactTransition, ReactTreeSelect, ReactVirtualList, ReactYearPicker, getSharedScrollbarSettings, reactMessage, resolveReactScrollbarMode, resolveResizablePanelSizes, setSharedScrollbarSettings, subscribeSharedScrollbarSettings, useReactContentScale, useReactForm, useReactFormWatch, useReactTransition };
+export { REACT_COMPONENT_PREFIX, ReactAutoComplete, ReactButton, ReactCascader, ReactCheckbox, ReactCol, ReactColorPicker, ReactContentScaleProvider, ReactDatePicker, ReactDateRangePicker, ReactDateTimePicker, ReactDateTimeRangePicker, ReactFilterPanel, ReactFlex, ReactForm, ReactFormItem, ReactImagePreview, ReactInput, ReactInputNumber, ReactInputRange, ReactModal, ReactMonthPicker, ReactNumberInput, ReactPagination, ReactPopconfirm, ReactPopup, ReactQuarterPicker, ReactRadio, ReactResizablePanels, ReactRow, ReactScrollbarPositionDialog, ReactScrollbarSettingsDialog, ReactSelect, ReactTextArea, ReactTimePicker, ReactTimeRangePicker, ReactTooltip, ReactTransition, ReactTreeSelect, ReactVirtualList, ReactYearPicker, getSharedScrollbarSettings, reactMessage, resolveReactScrollbarMode, resolveResizablePanelSizes, setSharedScrollbarSettings, subscribeSharedScrollbarSettings, useReactContentScale, useReactForm, useReactFormWatch, useReactTransition };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canvas-components/react-components",
-  "version": "0.3.18",
+  "version": "0.3.19",
   "description": "Shared React UI primitives for canvas-components adapters.",
   "license": "MIT",
   "type": "module",