@canvas-components/react-components 0.3.17 → 0.3.19

package/dist/index.cjs

@@ -738,7 +738,7 @@ var ReactVirtualList = React.forwardRef(function ReactVirtualListInner(props, re
 });
 
 // src/components/select/style.css
-styleInject('@import "../../styles/variables.css";\n.canvas-react-select-wrap {\n  position: relative;\n  display: inline-flex;\n  width: 100%;\n  height: 100%;\n}\n.canvas-react-select {\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: center;\n  width: 100%;\n  min-width: 0;\n  height: var(--canvas-react-control-height);\n  padding: var(--canvas-react-control-padding-block, 0px) var(--canvas-react-control-padding-inline, 11px);\n  border: 1px solid var(--canvas-react-color-border);\n  border-radius: var(--canvas-react-radius-sm);\n  background: var(--canvas-react-color-bg);\n  color: var(--canvas-react-color-text);\n  font-size: var(--canvas-react-font-size);\n  outline: none;\n  cursor: pointer;\n  transition:\n    border-color 0.2s ease,\n    box-shadow 0.2s ease,\n    background-color 0.2s ease;\n}\n.canvas-react-select-input-wrap {\n  flex: 1 1 auto;\n  width: 100%;\n  height: 100%;\n  border: none;\n  background: transparent;\n  box-shadow: none;\n}\n.canvas-react-select .canvas-react-input-affix-wrapper {\n  height: 100%;\n  min-height: 0;\n}\n.canvas-react-select-input-wrap:hover,\n.canvas-react-select-input-wrap:focus-within {\n  border-color: transparent;\n  box-shadow: none;\n}\n.canvas-react-select-input {\n  width: 100%;\n  min-width: 0;\n  height: 100%;\n  padding: 0;\n  line-height: normal;\n}\n.canvas-react-select-input::placeholder {\n  color: #9ca3af;\n}\n.canvas-react-select:hover {\n  border-color: var(--canvas-react-color-primary-hover);\n}\n.canvas-react-select:focus,\n.canvas-react-select:focus-within {\n  border-color: var(--canvas-react-color-primary);\n  box-shadow: var(--canvas-react-shadow-focus);\n}\n.canvas-react-select-open {\n  border-color: var(--canvas-react-color-primary);\n  box-shadow: var(--canvas-react-shadow-focus);\n}\n.canvas-react-select-disabled {\n  color: #9ca3af;\n  background: #fafafa;\n  cursor: not-allowed;\n}\n.canvas-react-select-actions {\n  position: relative;\n  display: inline-flex;\n  flex: 0 0 auto;\n  align-items: center;\n  justify-content: center;\n  width: 1em;\n  min-width: 12px;\n  height: 1em;\n  min-height: 12px;\n  margin-left: max(6px, calc(var(--canvas-react-control-padding-inline, 11px) * 0.5));\n}\n.canvas-react-select-arrow {\n  pointer-events: none;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: 0.5em;\n  height: 0.5em;\n  min-width: 6px;\n  min-height: 6px;\n  border-right: 1.5px solid var(--canvas-react-color-text-muted);\n  border-bottom: 1.5px solid var(--canvas-react-color-text-muted);\n  transform: translate(-50%, -58%) rotate(45deg);\n  opacity: 1;\n  transition:\n    opacity 0.18s ease,\n    transform 0.18s ease,\n    border-color 0.18s ease;\n}\n.canvas-react-select:hover .canvas-react-select-arrow,\n.canvas-react-select-open .canvas-react-select-arrow {\n  border-color: #6b7280;\n}\n.canvas-react-select-arrow-open {\n  border-color: #6b7280;\n  transform: translate(-50%, -42%) rotate(225deg);\n}\n.canvas-react-select-clear {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 12px;\n  height: 12px;\n  padding: 0;\n  border: none;\n  background: transparent;\n  color: #9ca3af;\n  opacity: 0;\n  pointer-events: none;\n  cursor: pointer;\n  transform: translate(-50%, -50%) rotate(0deg);\n  transition:\n    color 0.2s ease,\n    opacity 0.2s ease,\n    transform 0.18s ease;\n}\n.canvas-react-select-clear:hover {\n  color: #6b7280;\n  transform: translate(-50%, -50%) rotate(90deg);\n}\n.canvas-react-select:hover .canvas-react-select-clear,\n.canvas-react-select-open .canvas-react-select-clear,\n.canvas-react-select:focus-within .canvas-react-select-clear,\n.canvas-react-cascader:hover .canvas-react-select-clear,\n.canvas-react-cascader-open .canvas-react-select-clear,\n.canvas-react-cascader:focus-within .canvas-react-select-clear {\n  opacity: 1;\n  pointer-events: auto;\n}\n.canvas-react-select:hover .canvas-react-select-actions-clearable .canvas-react-select-arrow,\n.canvas-react-select-open .canvas-react-select-actions-clearable .canvas-react-select-arrow,\n.canvas-react-select:focus-within .canvas-react-select-actions-clearable .canvas-react-select-arrow,\n.canvas-react-cascader:hover .canvas-react-select-actions-clearable .canvas-react-select-arrow,\n.canvas-react-cascader-open .canvas-react-select-actions-clearable .canvas-react-select-arrow,\n.canvas-react-cascader:focus-within .canvas-react-select-actions-clearable .canvas-react-select-arrow {\n  opacity: 0;\n}\n.canvas-react-select-clear-icon,\n.canvas-react-select-clear-icon::before {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: 8px;\n  height: 1.25px;\n  margin-top: -0.625px;\n  margin-left: -4px;\n  border-radius: 999px;\n  background: currentColor;\n  content: "";\n}\n.canvas-react-select-clear-icon {\n  transform: rotate(45deg);\n}\n.canvas-react-select-clear-icon::before {\n  transform: rotate(90deg);\n}\n.canvas-react-select-dropdown {\n  padding: 4px;\n}\n.canvas-react-select-list {\n  position: relative;\n  overflow-y: auto;\n}\n.canvas-react-select-list-inner {\n  position: relative;\n}\n.canvas-react-select-option {\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  width: 100%;\n  padding: 0 11px;\n  border-radius: var(--canvas-react-radius-sm);\n  color: var(--canvas-react-color-text);\n  font-size: var(--canvas-react-font-size);\n  cursor: pointer;\n}\n.canvas-react-select-option:hover,\n.canvas-react-select-option-active {\n  background: var(--canvas-react-color-bg-hover);\n}\n.canvas-react-select-option-selected {\n  background: var(--canvas-react-color-bg-active);\n}\n.canvas-react-select-option-searching {\n  color: var(--canvas-react-color-text);\n}\n.canvas-react-select-option-searching:hover,\n.canvas-react-select-option-searching.canvas-react-select-option-active {\n  background: var(--canvas-react-color-bg-active);\n}\n.canvas-react-select-option-disabled {\n  color: #9ca3af;\n  cursor: not-allowed;\n}\n.canvas-react-select-option-highlight {\n  color: var(--canvas-react-color-primary);\n  font-weight: 600;\n}\n.canvas-react-select-option-disabled .canvas-react-select-option-highlight {\n  color: inherit;\n}\n.canvas-react-select-empty {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  padding: 0 11px;\n  color: #9ca3af;\n  font-size: var(--canvas-react-font-size);\n}\n');
+styleInject('@import "../../styles/variables.css";\n.canvas-react-select-wrap {\n  position: relative;\n  display: inline-flex;\n  width: 100%;\n  height: 100%;\n}\n.canvas-react-select {\n  box-sizing: border-box;\n  display: inline-flex;\n  align-items: center;\n  width: 100%;\n  min-width: 0;\n  height: var(--canvas-react-control-height);\n  padding: var(--canvas-react-control-padding-block, 0px) var(--canvas-react-control-padding-inline, 11px);\n  border: 1px solid var(--canvas-react-color-border);\n  border-radius: var(--canvas-react-radius-sm);\n  background: var(--canvas-react-color-bg);\n  color: var(--canvas-react-color-text);\n  font-size: var(--canvas-react-font-size);\n  outline: none;\n  cursor: pointer;\n  transition:\n    border-color 0.2s ease,\n    box-shadow 0.2s ease,\n    background-color 0.2s ease;\n}\n.canvas-react-select-input-wrap {\n  flex: 1 1 auto;\n  width: 100%;\n  height: 100%;\n  border: none;\n  background: transparent;\n  box-shadow: none;\n}\n.canvas-react-select .canvas-react-input-affix-wrapper {\n  height: 100%;\n  min-height: 0;\n}\n.canvas-react-select-input-wrap:hover,\n.canvas-react-select-input-wrap:focus-within {\n  border-color: transparent;\n  box-shadow: none;\n}\n.canvas-react-select-input {\n  width: 100%;\n  min-width: 0;\n  height: 100%;\n  padding: 0;\n  line-height: normal;\n}\n.canvas-react-select-input::placeholder {\n  color: #9ca3af;\n}\n.canvas-react-select:hover {\n  border-color: var(--canvas-react-color-primary-hover);\n}\n.canvas-react-select:focus,\n.canvas-react-select:focus-within {\n  border-color: var(--canvas-react-color-primary);\n  box-shadow: var(--canvas-react-shadow-focus);\n}\n.canvas-react-select-open {\n  border-color: var(--canvas-react-color-primary);\n  box-shadow: var(--canvas-react-shadow-focus);\n}\n.canvas-react-select-disabled {\n  color: #9ca3af;\n  background: #fafafa;\n  cursor: not-allowed;\n}\n.canvas-react-select-actions {\n  position: relative;\n  display: inline-flex;\n  flex: 0 0 auto;\n  align-items: center;\n  justify-content: center;\n  width: 1em;\n  min-width: 12px;\n  height: 1em;\n  min-height: 12px;\n  margin-left: max(6px, calc(var(--canvas-react-control-padding-inline, 11px) * 0.5));\n}\n.canvas-react-select-arrow {\n  pointer-events: none;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: 0.5em;\n  height: 0.5em;\n  min-width: 6px;\n  min-height: 6px;\n  border-right: 1.5px solid var(--canvas-react-color-text-muted);\n  border-bottom: 1.5px solid var(--canvas-react-color-text-muted);\n  transform: translate(-50%, -58%) rotate(45deg);\n  opacity: 1;\n  transition:\n    opacity 0.18s ease,\n    transform 0.18s ease,\n    border-color 0.18s ease;\n}\n.canvas-react-select:hover .canvas-react-select-arrow,\n.canvas-react-select-open .canvas-react-select-arrow {\n  border-color: #6b7280;\n}\n.canvas-react-select-arrow-open {\n  border-color: #6b7280;\n  transform: translate(-50%, -42%) rotate(225deg);\n}\n.canvas-react-select-clear {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 12px;\n  height: 12px;\n  padding: 0;\n  border: none;\n  background: transparent;\n  color: #9ca3af;\n  opacity: 0;\n  pointer-events: none;\n  cursor: pointer;\n  transform: translate(-50%, -50%) rotate(0deg);\n  transition:\n    color 0.2s ease,\n    opacity 0.2s ease,\n    transform 0.18s ease;\n}\n.canvas-react-select-clear:hover {\n  color: #6b7280;\n  transform: translate(-50%, -50%) rotate(90deg);\n}\n.canvas-react-select:hover .canvas-react-select-clear,\n.canvas-react-select-open .canvas-react-select-clear,\n.canvas-react-select:focus-within .canvas-react-select-clear,\n.canvas-react-cascader:hover .canvas-react-select-clear,\n.canvas-react-cascader-open .canvas-react-select-clear,\n.canvas-react-cascader:focus-within .canvas-react-select-clear {\n  opacity: 1;\n  pointer-events: auto;\n}\n.canvas-react-select:hover .canvas-react-select-actions-clearable .canvas-react-select-arrow,\n.canvas-react-select-open .canvas-react-select-actions-clearable .canvas-react-select-arrow,\n.canvas-react-select:focus-within .canvas-react-select-actions-clearable .canvas-react-select-arrow,\n.canvas-react-cascader:hover .canvas-react-select-actions-clearable .canvas-react-select-arrow,\n.canvas-react-cascader-open .canvas-react-select-actions-clearable .canvas-react-select-arrow,\n.canvas-react-cascader:focus-within .canvas-react-select-actions-clearable .canvas-react-select-arrow {\n  opacity: 0;\n}\n.canvas-react-select-clear-icon,\n.canvas-react-select-clear-icon::before {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  width: 8px;\n  height: 1.25px;\n  margin-top: -0.625px;\n  margin-left: -4px;\n  border-radius: 999px;\n  background: currentColor;\n  content: "";\n}\n.canvas-react-select-clear-icon {\n  transform: rotate(45deg);\n}\n.canvas-react-select-clear-icon::before {\n  transform: rotate(90deg);\n}\n.canvas-react-select-dropdown {\n  padding: 4px;\n}\n.canvas-react-select-list {\n  position: relative;\n  overflow-y: auto;\n}\n.canvas-react-select-list-inner {\n  position: relative;\n}\n.canvas-react-select-option {\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  width: 100%;\n  padding: 0 11px;\n  border-radius: var(--canvas-react-radius-sm);\n  color: var(--canvas-react-color-text);\n  font-size: var(--canvas-react-font-size);\n  cursor: pointer;\n}\n.canvas-react-select-option:hover,\n.canvas-react-select-option-active {\n  background: var(--canvas-react-color-bg-hover);\n}\n.canvas-react-select-option-label {\n  display: block;\n  flex: 1 1 auto;\n  min-width: 0;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n}\n.canvas-react-select-option-selected {\n  background: var(--canvas-react-color-bg-active);\n}\n.canvas-react-select-option-searching {\n  color: var(--canvas-react-color-text);\n}\n.canvas-react-select-option-searching:hover,\n.canvas-react-select-option-searching.canvas-react-select-option-active {\n  background: var(--canvas-react-color-bg-active);\n}\n.canvas-react-select-option-disabled {\n  color: #9ca3af;\n  cursor: not-allowed;\n}\n.canvas-react-select-option-highlight {\n  color: var(--canvas-react-color-primary);\n  font-weight: 600;\n}\n.canvas-react-select-option-disabled .canvas-react-select-option-highlight {\n  color: inherit;\n}\n.canvas-react-select-empty {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  padding: 0 11px;\n  color: #9ca3af;\n  font-size: var(--canvas-react-font-size);\n}\n');
 var ReactSelect = React.forwardRef(
   function ReactSelect2(props, ref) {
     const {
@@ -1062,9 +1062,16 @@ var ReactSelect = React.forwardRef(
                       }
                       selectOption(option, "mouse");
                     },
-                    children: renderSelectOptionLabel(
-                      option.label,
-                      showSearch ? searchKeyword : ""
+                    children: /* @__PURE__ */ jsxRuntime.jsx(
+                      "span",
+                      {
+                        className: `${REACT_COMPONENT_PREFIX}-select-option-label`,
+                        title: option.label,
+                        children: renderSelectOptionLabel(
+                          option.label,
+                          showSearch ? searchKeyword : ""
+                        )
+                      }
                     )
                   },
                   String(option.value)
@@ -1511,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";
@@ -5907,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,
@@ -6069,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`;
@@ -9834,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;