@fangxinyan/lumina 0.6.18 → 0.8.0

package/dist/chunk-QDCPVI3S.cjs

@@ -0,0 +1,333 @@
+'use strict';
+
+var chunkFJB3243S_cjs = require('./chunk-FJB3243S.cjs');
+var chunkSTQDKMS5_cjs = require('./chunk-STQDKMS5.cjs');
+var chunkHSDMJUB6_cjs = require('./chunk-HSDMJUB6.cjs');
+var chunk2AUXUZ3Z_cjs = require('./chunk-2AUXUZ3Z.cjs');
+var chunkNRJXZPZR_cjs = require('./chunk-NRJXZPZR.cjs');
+var chunkEE5KXDRK_cjs = require('./chunk-EE5KXDRK.cjs');
+require('./tokens-CEJVVA3G.css');
+require('./shared-NJHRNLRH.css');
+require('./Cascader-YBVDK6DC.css');
+var React = require('react');
+var reactDom = require('react-dom');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+var collectPaths = (options, prefix = []) => options.flatMap((option) => {
+  const next = [...prefix, option];
+  if (option.children?.length) return collectPaths(option.children, next);
+  return [next];
+});
+var defaultSearchFilter = (inputValue, path) => {
+  const q = inputValue.trim().toLowerCase();
+  if (!q) return true;
+  return path.map(getCascaderOptionText).join(" / ").toLowerCase().includes(q);
+};
+function getCascaderOptionText(option) {
+  if (option.text) return option.text;
+  if (typeof option.label === "string" || typeof option.label === "number") {
+    return String(option.label);
+  }
+  return option.value;
+}
+function getCascaderPathAriaLabel(path) {
+  return path.map((option) => option.ariaLabel ?? getCascaderOptionText(option)).join(" / ");
+}
+var CascaderBase = React__namespace.forwardRef(({
+  options,
+  value,
+  defaultValue = [],
+  onChange,
+  placeholder = "\u8BF7\u9009\u62E9",
+  disabled,
+  allowClear,
+  onClear,
+  changeOnSelect,
+  showSearch,
+  optionRender,
+  selectedRender,
+  listHeight = 280,
+  popupStyle,
+  popupClassName = "",
+  dropdownClassName = "",
+  className = "",
+  id: fieldId,
+  "aria-invalid": ariaInvalid,
+  "aria-describedby": ariaDescribedBy,
+  "aria-labelledby": ariaLabelledBy,
+  "aria-required": ariaRequired,
+  "aria-label": ariaLabel,
+  ...rest
+}, ref) => {
+  const [inner, setInner] = React__namespace.useState(() => Array.isArray(defaultValue) ? defaultValue : []);
+  const isControlled = value !== void 0;
+  const cur = isControlled ? Array.isArray(value) ? value : [] : inner;
+  const [innerOpen, setInnerOpen] = React__namespace.useState(false);
+  const open = innerOpen && !disabled;
+  const [path, setPath] = React__namespace.useState(cur);
+  const [query, setQuery] = React__namespace.useState("");
+  const searchRef = React__namespace.useRef(null);
+  const portalContainer = chunkEE5KXDRK_cjs.usePortalContainer();
+  const portalTheme = chunkNRJXZPZR_cjs.useComponentPortalTheme("Cascader");
+  const panelId = React__namespace.useId();
+  const searchConfig = typeof showSearch === "object" ? showSearch : {};
+  const searchable = !!showSearch;
+  const mergedListHeight = Number.isFinite(listHeight) && listHeight > 0 ? listHeight : 280;
+  const { triggerRef, floatingRef: panelRef, floatingStyle, zIndex: panelZIndex } = chunkFJB3243S_cjs.useFloating({
+    open,
+    placement: "bottom",
+    panelWidth: 520,
+    panelHeight: mergedListHeight + (searchable ? 58 : 12)
+  });
+  chunkHSDMJUB6_cjs.useOverlayLayer({
+    open: open && portalContainer != null,
+    containerRef: panelRef,
+    ownerRef: triggerRef,
+    zIndex: panelZIndex,
+    onEscape: () => setInnerOpen(false),
+    restoreFocus: true
+  });
+  const setTriggerRef = React__namespace.useCallback(
+    (node) => {
+      triggerRef.current = node;
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    },
+    [ref, triggerRef]
+  );
+  React__namespace.useEffect(() => {
+    if (disabled) setInnerOpen(false);
+  }, [disabled]);
+  React__namespace.useEffect(() => {
+    const h = (e) => {
+      const t = e.target;
+      if (triggerRef.current?.contains(t)) return;
+      if (panelRef.current?.contains(t)) return;
+      setInnerOpen(false);
+    };
+    document.addEventListener("mousedown", h);
+    return () => document.removeEventListener("mousedown", h);
+  }, []);
+  React__namespace.useEffect(() => {
+    if (open) setPath(cur);
+    if (!open) setQuery("");
+  }, [open, cur]);
+  React__namespace.useEffect(() => {
+    if (!open || !searchable) return;
+    requestAnimationFrame(() => searchRef.current?.focus());
+  }, [open, searchable]);
+  const columns = [options];
+  let cursor = options;
+  for (const v of path) {
+    const match = cursor.find((o) => o.value === v);
+    if (match && match.children) {
+      cursor = match.children;
+      columns.push(cursor);
+    } else break;
+  }
+  const selectedOptionsForPath = (nextPath) => {
+    const selected = [];
+    let list = options;
+    for (const item of nextPath) {
+      const match = list.find((option) => option.value === item);
+      if (!match) break;
+      selected.push(match);
+      list = match.children ?? [];
+    }
+    return selected;
+  };
+  const commit = (nextPath, closeAfterSelect) => {
+    if (disabled) return;
+    const selectedOptions2 = selectedOptionsForPath(nextPath);
+    if (nextPath.length > 0 && (selectedOptions2.length !== nextPath.length || selectedOptions2.some((option) => option.disabled))) {
+      return;
+    }
+    if (!isControlled) setInner(nextPath);
+    onChange?.(nextPath, selectedOptions2);
+    if (closeAfterSelect) setInnerOpen(false);
+  };
+  const pick = (depth, val, hasChildren) => {
+    if (disabled) return;
+    const np = [...path.slice(0, depth), val];
+    setPath(np);
+    if (!hasChildren || changeOnSelect) commit(np, !hasChildren);
+  };
+  const clear = (e) => {
+    e.stopPropagation();
+    if (disabled) return;
+    setPath([]);
+    if (!isControlled) setInner([]);
+    onChange?.([], []);
+    onClear?.();
+  };
+  const selectedOptions = selectedOptionsForPath(cur);
+  const labels = selectedOptions.map((option) => option.label);
+  const allPaths = React__namespace.useMemo(() => collectPaths(options), [options]);
+  const matchedPaths = React__namespace.useMemo(() => {
+    if (!query.trim()) return [];
+    const filter = searchConfig.filter ?? defaultSearchFilter;
+    const result = allPaths.filter(
+      (itemPath) => itemPath.every((option) => !option.disabled) && filter(query, itemPath)
+    );
+    const limit = searchConfig.limit === false ? result.length : searchConfig.limit ?? 50;
+    return result.slice(0, limit);
+  }, [allPaths, query, searchConfig.filter, searchConfig.limit]);
+  const panelClassName = [
+    "cascader-panel",
+    searchable && "with-search",
+    optionRender && "custom-options",
+    popupClassName,
+    dropdownClassName
+  ].filter(Boolean).join(" ");
+  const panelStyle = {
+    ...floatingStyle,
+    ...portalTheme.style,
+    ...portalTheme.styles.popup,
+    ["--cascader-list-height"]: `${mergedListHeight}px`,
+    ...popupStyle
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: setTriggerRef, className: `cascader ${open ? "open" : ""} ${className}`, ...rest, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        className: `cascader-trigger ${labels.length === 0 ? "placeholder" : ""}`,
+        disabled,
+        onClick: () => !disabled && setInnerOpen((current) => !current),
+        onKeyDown: (event) => {
+          if (event.key === "Escape" && open) {
+            event.preventDefault();
+            setInnerOpen(false);
+          } else if (event.key === "ArrowDown" && !open) {
+            event.preventDefault();
+            setInnerOpen(true);
+          } else if ((event.key === "Delete" || event.key === "Backspace") && allowClear && labels.length) {
+            event.preventDefault();
+            clear(event);
+          }
+        },
+        "aria-haspopup": "dialog",
+        id: fieldId,
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledBy,
+        "aria-invalid": ariaInvalid,
+        "aria-required": ariaRequired,
+        "aria-describedby": ariaDescribedBy,
+        "aria-expanded": open,
+        "aria-controls": open ? panelId : void 0,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cascader-value", children: labels.length ? selectedRender?.(selectedOptions, cur) ?? labels.map((label, index) => /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+            index > 0 && " / ",
+            label
+          ] }, index)) : placeholder }),
+          !!allowClear && labels.length > 0 && !disabled && /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: "cascader-clear",
+              "aria-label": "Clear",
+              "aria-hidden": "true",
+              onClick: clear,
+              children: /* @__PURE__ */ jsxRuntime.jsx(chunk2AUXUZ3Z_cjs.Icon, { name: "x", size: 12 })
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { style: { position: "absolute", right: 12, color: "var(--lmn-cascader-fg-subtle, var(--fg-subtle))" }, children: /* @__PURE__ */ jsxRuntime.jsx(chunk2AUXUZ3Z_cjs.Icon, { name: "chevDown", size: 14 }) })
+        ]
+      }
+    ),
+    open && portalContainer && reactDom.createPortal(
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          ref: panelRef,
+          id: panelId,
+          role: "dialog",
+          "aria-label": "\u7EA7\u8054\u9009\u62E9",
+          className: panelClassName,
+          ...portalTheme.dataAttributes,
+          style: panelStyle,
+          children: [
+            searchable && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cascader-search", children: /* @__PURE__ */ jsxRuntime.jsx(chunkNRJXZPZR_cjs.InternalComponentThemePart, { components: "Input", children: /* @__PURE__ */ jsxRuntime.jsx(
+              chunkSTQDKMS5_cjs.Input,
+              {
+                ref: searchRef,
+                size: "sm",
+                leadingIcon: "search",
+                value: query,
+                onValueChange: setQuery,
+                placeholder: "\u641C\u7D22...",
+                "aria-label": "\u641C\u7D22\u7EA7\u8054\u9009\u9879"
+              }
+            ) }) }),
+            searchable && query.trim() ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cascader-search-list", role: "listbox", children: matchedPaths.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cascader-empty", children: "\u6682\u65E0\u5339\u914D\u9879" }) : matchedPaths.map((itemPath) => /* @__PURE__ */ jsxRuntime.jsx(
+              "button",
+              {
+                type: "button",
+                role: "option",
+                "aria-label": getCascaderPathAriaLabel(itemPath),
+                className: "cascader-search-item",
+                onClick: () => commit(itemPath.map((item) => item.value), true),
+                children: searchConfig.render ? searchConfig.render(query, itemPath) : itemPath.map((item) => item.label).map((label, index) => /* @__PURE__ */ jsxRuntime.jsxs(React__namespace.Fragment, { children: [
+                  index > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cascader-path-sep", children: "/" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { children: label })
+                ] }, index))
+              },
+              itemPath.map((item) => item.value).join("__")
+            )) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cascader-columns", children: columns.map((col, depth) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "cascader-col", role: "listbox", "aria-label": `\u7B2C ${depth + 1} \u7EA7`, children: col.map((o) => {
+              const isActive = path[depth] === o.value;
+              const hasChildren = !!(o.children && o.children.length);
+              return /* @__PURE__ */ jsxRuntime.jsxs(
+                "button",
+                {
+                  type: "button",
+                  role: "option",
+                  "aria-selected": isActive,
+                  "aria-label": o.ariaLabel ?? getCascaderOptionText(o),
+                  className: `cascader-item ${isActive ? "active" : ""}`,
+                  disabled: o.disabled,
+                  onClick: () => pick(depth, o.value, hasChildren),
+                  children: [
+                    optionRender ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cascader-item-custom", children: optionRender(o, { depth, selected: isActive, hasChildren }) }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                      chunk2AUXUZ3Z_cjs.renderIconSlot(o.icon, { size: 13, className: "cascader-icon" }),
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "cascader-item-label", children: o.label })
+                    ] }),
+                    hasChildren && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "chev", children: /* @__PURE__ */ jsxRuntime.jsx(chunk2AUXUZ3Z_cjs.Icon, { name: "chevRight", size: 12 }) })
+                  ]
+                },
+                o.value
+              );
+            }) }, depth)) })
+          ]
+        }
+      ),
+      portalContainer
+    )
+  ] });
+});
+CascaderBase.displayName = "Cascader";
+var Cascader = chunkNRJXZPZR_cjs.withComponentTheme(
+  CascaderBase,
+  "Cascader",
+  ["cascader", "input"]
+);
+
+exports.Cascader = Cascader;

package/dist/{chunk-ZR4IMROK.js → chunk-QDMFXRPI.js}

@@ -1,10 +1,11 @@
-import './tokens-RYJ3DFTU.css';
+import { isTargetWithinOverlayScope } from './chunk-2A4GYSN4.js';
+import { withComponentTheme } from './chunk-DRDDQCDD.js';
+import './tokens-CEJVVA3G.css';
 import './shared-NJHRNLRH.css';
-import './Form-NGCQWTMZ.css';
+import './Form-DNEDZRJA.css';
 import * as React from 'react';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 
-// src/components/Form/Form.tsx
 function makeStore() {
   return {
     values: {},
@@ -13,7 +14,8 @@ function makeStore() {
     initial: {},
     fields: /* @__PURE__ */ new Map(),
     fieldSubs: /* @__PURE__ */ new Map(),
-    formSubs: /* @__PURE__ */ new Set()
+    formSubs: /* @__PURE__ */ new Set(),
+    validationVersions: /* @__PURE__ */ new Map()
   };
 }
 var EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
@@ -24,9 +26,10 @@ async function validateSingle(rule, value) {
   if (rule.required && isEmpty) return msg ?? "\u5FC5\u586B\u9879";
   if (rule.whitespace && typeof value === "string" && value.trim() === "") return msg ?? "\u4E0D\u80FD\u4E3A\u7A7A";
   if (isEmpty) return null;
-  if (rule.type === "email" && typeof value === "string" && !EMAIL_RE.test(value)) return msg ?? "\u90AE\u7BB1\u683C\u5F0F\u4E0D\u6B63\u786E";
-  if (rule.type === "url" && typeof value === "string" && !URL_RE.test(value)) return msg ?? "\u94FE\u63A5\u683C\u5F0F\u4E0D\u6B63\u786E";
-  if (rule.type === "number" && typeof value !== "number" && isNaN(Number(value))) return msg ?? "\u5FC5\u987B\u662F\u6570\u5B57";
+  if (rule.type === "email" && (typeof value !== "string" || !EMAIL_RE.test(value))) return msg ?? "\u90AE\u7BB1\u683C\u5F0F\u4E0D\u6B63\u786E";
+  if (rule.type === "url" && (typeof value !== "string" || !URL_RE.test(value))) return msg ?? "\u94FE\u63A5\u683C\u5F0F\u4E0D\u6B63\u786E";
+  if (rule.type === "string" && typeof value !== "string") return msg ?? "\u5FC5\u987B\u662F\u5B57\u7B26\u4E32";
+  if (rule.type === "number" && (typeof value !== "number" || Number.isNaN(value))) return msg ?? "\u5FC5\u987B\u662F\u6570\u5B57";
   if (rule.type === "array" && !Array.isArray(value)) return msg ?? "\u5FC5\u987B\u662F\u6570\u7EC4";
   if (rule.pattern && typeof value === "string" && !rule.pattern.test(value)) return msg ?? "\u683C\u5F0F\u4E0D\u6B63\u786E";
   const strLen = typeof value === "string" ? value.length : Array.isArray(value) ? value.length : void 0;
@@ -49,12 +52,17 @@ async function validateSingle(rule, value) {
 async function validateField(store, name) {
   const entry = store.fields.get(name);
   if (!entry) return [];
+  const version = (store.validationVersions.get(name) ?? 0) + 1;
+  store.validationVersions.set(name, version);
   const value = store.values[name];
   const errs = [];
   for (const rule of entry.rules) {
     const err = await validateSingle(rule, value);
     if (err) errs.push(err);
   }
+  if (store.validationVersions.get(name) !== version) {
+    return store.errors[name] ?? [];
+  }
   store.errors[name] = errs;
   return errs;
 }
@@ -98,6 +106,7 @@ function buildInstance(store) {
     resetFields: (names) => {
       const keys = names ?? Array.from(store.fields.keys());
       for (const k of keys) {
+        store.validationVersions.set(k, (store.validationVersions.get(k) ?? 0) + 1);
         store.values[k] = store.initial[k];
         store.errors[k] = [];
         store.touched.delete(k);
@@ -201,8 +210,13 @@ var FormRootInner = (props, ref) => {
     }
   ) });
 };
-var FormRoot = React.forwardRef(FormRootInner);
-FormRoot.displayName = "Form";
+var FormRootBase = React.forwardRef(FormRootInner);
+FormRootBase.displayName = "Form";
+var FormRoot = withComponentTheme(
+  FormRootBase,
+  "Form",
+  "form"
+);
 var extractValue = (valuePropName, args) => {
   const first = args[0];
   if (first && typeof first === "object") {
@@ -213,13 +227,29 @@ var extractValue = (valuePropName, args) => {
   }
   return first;
 };
-var FormItem = ({
+function getFormControlName(element) {
+  const type = element.type;
+  if (typeof type === "string") return type;
+  return type.displayName ?? type.name;
+}
+function getEmptyFormControlValue(element, valuePropName) {
+  if (valuePropName === "checked") return false;
+  const controlName = getFormControlName(element);
+  if (controlName === "Cascader") return [];
+  if (controlName === "Select" && element.props?.multiple) return [];
+  if (["InputNumber", "DatePicker", "DateTimePicker", "TimePicker", "Calendar", "Select", "RadioGroup"].includes(controlName ?? "")) {
+    return null;
+  }
+  return "";
+}
+var FormItemBase = React.forwardRef(({
   name,
   label,
   rules,
   noStyle,
   valuePropName = "value",
   trigger = "onChange",
+  validateTrigger = "onChange",
   initialValue,
   help,
   extra,
@@ -227,17 +257,22 @@ var FormItem = ({
   hidden,
   children,
   className = "",
-  style
-}) => {
+  style,
+  ...rest
+}, ref) => {
   const ctx = React.useContext(FormCtx);
   const [, tick] = React.useReducer((n) => n + 1, 0);
+  const generatedId = React.useId();
+  if (ctx && name && initialValue !== void 0) {
+    const hasFormInitial = Object.prototype.hasOwnProperty.call(ctx.store.initial, name);
+    if (!hasFormInitial) ctx.store.initial[name] = initialValue;
+    if (!Object.prototype.hasOwnProperty.call(ctx.store.values, name)) {
+      ctx.store.values[name] = ctx.store.initial[name];
+    }
+  }
   React.useEffect(() => {
     if (!ctx || !name) return;
     const store2 = ctx.store;
-    if (initialValue !== void 0) {
-      if (store2.initial[name] === void 0) store2.initial[name] = initialValue;
-      if (store2.values[name] === void 0) store2.values[name] = initialValue;
-    }
     store2.fields.set(name, { rules: rules ?? [], initial: initialValue });
     let subs = store2.fieldSubs.get(name);
     if (!subs) {
@@ -261,7 +296,7 @@ var FormItem = ({
   if (!hasName) {
     const content = children;
     if (noStyle) return /* @__PURE__ */ jsx(Fragment, { children: content });
-    return /* @__PURE__ */ jsxs("div", { className: `form-item ${className}`, style, children: [
+    return /* @__PURE__ */ jsxs("div", { ref, className: `form-item ${className}`, style, ...rest, children: [
       label && /* @__PURE__ */ jsx("div", { className: "form-item-label", children: label }),
       /* @__PURE__ */ jsx("div", { className: "form-item-control", children: content }),
       help && /* @__PURE__ */ jsx("div", { className: "form-item-help", children: help }),
@@ -272,35 +307,94 @@ var FormItem = ({
   const value = store?.values[name];
   const errors = store?.errors[name] ?? [];
   const hasError = errors.length > 0;
-  const bound = React.isValidElement(children) ? React.cloneElement(children, {
-    [valuePropName]: value ?? (valuePropName === "checked" ? false : ""),
+  const childElement = React.isValidElement(children) ? children : null;
+  const controlId = childElement?.props?.id ?? `lumina-field-${generatedId.replace(/:/g, "")}`;
+  const labelId = `${controlId}-label`;
+  const messageId = `${controlId}-${hasError ? "error" : "help"}`;
+  const validationEvents = Array.isArray(validateTrigger) ? validateTrigger : [validateTrigger];
+  const childDescribedBy = childElement?.props?.["aria-describedby"];
+  const childLabelledBy = childElement?.props?.["aria-labelledby"];
+  const childAriaLabel = childElement?.props?.["aria-label"];
+  const describedBy = [childDescribedBy, hasError || help ? messageId : void 0].filter(Boolean).join(" ") || void 0;
+  const runValidation = () => {
+    if (!store) return;
+    void validateField(store, name).then(() => notifyField(store, name));
+  };
+  const callChildHandler = (eventName, args) => {
+    const childHandler = childElement?.props?.[eventName];
+    if (typeof childHandler === "function") childHandler(...args);
+  };
+  const runEventValidation = (eventName, args) => {
+    if (eventName !== "onBlur") {
+      runValidation();
+      return;
+    }
+    const event = args[0];
+    const owner = event?.currentTarget;
+    if (!owner) {
+      runValidation();
+      return;
+    }
+    if (isTargetWithinOverlayScope(owner, event.relatedTarget)) return;
+    if (event.relatedTarget) {
+      runValidation();
+      return;
+    }
+    const view = owner.ownerDocument.defaultView;
+    if (!view) {
+      runValidation();
+      return;
+    }
+    view.requestAnimationFrame(() => {
+      if (!isTargetWithinOverlayScope(owner, owner.ownerDocument.activeElement)) {
+        runValidation();
+      }
+    });
+  };
+  const bound = childElement ? React.cloneElement(childElement, {
+    [valuePropName]: value ?? getEmptyFormControlValue(childElement, valuePropName),
     [trigger]: (...args) => {
       const next = extractValue(valuePropName, args);
       store?.values && (store.values[name] = next);
       store?.touched.add(name);
       if (store) {
-        void validateField(store, name).then(() => notifyField(store, name));
+        if (validationEvents.includes(trigger)) runEventValidation(trigger, args);
         notifyField(store, name);
         notifyAll(store);
         store.onValuesChange?.({ [name]: next }, { ...store.values });
       }
-      const childTrigger = children.props?.[trigger];
-      if (typeof childTrigger === "function") childTrigger(...args);
+      callChildHandler(trigger, args);
     },
-    disabled: children.props?.disabled ?? ctx?.disabled,
-    ...hasError ? { invalid: true } : {}
+    disabled: ctx?.disabled || children.props?.disabled || void 0,
+    id: controlId,
+    "aria-invalid": hasError || childElement.props?.["aria-invalid"] || void 0,
+    "aria-required": isRequired || childElement.props?.["aria-required"] || void 0,
+    "aria-describedby": describedBy,
+    "aria-labelledby": childLabelledBy ?? (!childAriaLabel && label ? labelId : void 0),
+    ...hasError ? { invalid: true } : {},
+    ...Object.fromEntries(
+      validationEvents.filter((eventName) => eventName !== trigger).map((eventName) => [
+        eventName,
+        (...args) => {
+          callChildHandler(eventName, args);
+          runEventValidation(eventName, args);
+        }
+      ])
+    )
   }) : children;
   if (noStyle) return /* @__PURE__ */ jsx(Fragment, { children: bound });
-  return /* @__PURE__ */ jsxs("div", { className: `form-item ${hasError ? "has-error" : ""} ${className}`, style, children: [
-    label && /* @__PURE__ */ jsxs("div", { className: "form-item-label", children: [
+  return /* @__PURE__ */ jsxs("div", { ref, className: `form-item ${hasError ? "has-error" : ""} ${className}`, style, ...rest, children: [
+    label && /* @__PURE__ */ jsxs("label", { id: labelId, className: "form-item-label", htmlFor: controlId, children: [
       isRequired && ctx?.requiredMark !== false && /* @__PURE__ */ jsx("span", { className: "form-item-required", "aria-hidden": true, children: "*" }),
       label
     ] }),
     /* @__PURE__ */ jsx("div", { className: "form-item-control", children: bound }),
-    hasError ? /* @__PURE__ */ jsx("div", { className: "form-item-error", children: errors[0] }) : help ? /* @__PURE__ */ jsx("div", { className: "form-item-help", children: help }) : null,
+    hasError ? /* @__PURE__ */ jsx("div", { id: messageId, className: "form-item-error", role: "alert", children: errors[0] }) : help ? /* @__PURE__ */ jsx("div", { id: messageId, className: "form-item-help", children: help }) : null,
     extra && /* @__PURE__ */ jsx("div", { className: "form-item-extra", children: extra })
   ] });
-};
+});
+FormItemBase.displayName = "FormItem";
+var FormItem = withComponentTheme(FormItemBase, "FormItem", "form");
 var Form = FormRoot;
 Form.Item = FormItem;
 Form.useForm = useForm;