@als-tp/als-react-ts-ui 0.5.1 → 0.5.2

package/dist/als-react-ts-ui161.js

@@ -1,145 +1,101 @@
-import * as d from "react";
-import { inertValue as Q } from "./als-react-ts-ui239.js";
-import { MenuPositionerContext as X } from "./als-react-ts-ui475.js";
-import { useMenuRootContext as Y } from "./als-react-ts-ui472.js";
-import { useAnchorPositioning as Z } from "./als-react-ts-ui391.js";
-import { useRenderElement as $ } from "./als-react-ts-ui226.js";
-import { popupStateMapping as ee } from "./als-react-ts-ui227.js";
-import { CompositeList as te } from "./als-react-ts-ui269.js";
-import { InternalBackdrop as ne } from "./als-react-ts-ui240.js";
-import { useMenuPortalContext as oe } from "./als-react-ts-ui474.js";
-import { DROPDOWN_COLLISION_AVOIDANCE as re } from "./als-react-ts-ui243.js";
-import { useContextMenuRootContext as se } from "./als-react-ts-ui471.js";
-import { createChangeEventDetails as x } from "./als-react-ts-ui229.js";
-import { jsxs as ie, jsx as I } from "react/jsx-runtime";
-import { FloatingNode as ae } from "./als-react-ts-ui364.js";
-import { triggerHover as de, siblingOpen as g } from "./als-react-ts-ui231.js";
-const le = /* @__PURE__ */ d.forwardRef(function(c, C) {
+import * as e from "react";
+import { useStableCallback as m } from "./als-react-ts-ui223.js";
+import { FieldRootContext as G } from "./als-react-ts-ui398.js";
+import { DEFAULT_VALIDITY_STATE as H, fieldValidityMapping as J } from "./als-react-ts-ui409.js";
+import { useFieldsetRootContext as K } from "./als-react-ts-ui432.js";
+import { useFormContext as Q } from "./als-react-ts-ui402.js";
+import { useRenderElement as W } from "./als-react-ts-ui220.js";
+import { useFieldValidation as X } from "./als-react-ts-ui433.js";
+import { jsx as y } from "react/jsx-runtime";
+import { LabelableProvider as Z } from "./als-react-ts-ui434.js";
+const C = /* @__PURE__ */ e.forwardRef(function(o, p) {
   const {
-    anchor: v,
-    positionMethod: M = "absolute",
-    className: ce,
-    render: pe,
-    side: y,
-    align: E,
-    sideOffset: b = 0,
-    alignOffset: w = 0,
-    collisionBoundary: A = "clipping-ancestors",
-    collisionPadding: k = 5,
-    arrowPadding: D = 5,
-    sticky: H = !1,
-    disableAnchorTracking: T = !1,
-    collisionAvoidance: B = re,
+    errors: h,
+    validationMode: A,
+    submitAttemptedRef: I
+  } = Q(), {
+    render: ee,
+    className: te,
+    validate: g,
+    validationDebounceTime: v = 0,
+    validationMode: i = A,
+    name: t,
+    disabled: O = !1,
+    invalid: _,
+    dirty: D,
+    touched: S,
     ...L
-  } = c, {
-    store: e
-  } = Y(), V = oe(), U = se(!0), n = e.useState("parent"), _ = e.useState("floatingRootContext"), s = e.useState("floatingTreeRoot"), p = e.useState("mounted"), i = e.useState("open"), j = e.useState("modal"), u = e.useState("activeTriggerElement"), F = e.useState("lastOpenChangeReason"), a = e.useState("floatingNodeId"), O = e.useState("floatingParentNodeId");
-  let P = v, S = b, N = w, m = E;
-  n.type === "context-menu" && (P = v ?? n.context?.anchor, m = m ?? "start", !y && m !== "center" && (N = c.alignOffset ?? 2, S = c.sideOffset ?? -5));
-  let l = y, f = m;
-  n.type === "menu" ? (l = l ?? "inline-end", f = f ?? "start") : n.type === "menubar" && (l = l ?? "bottom", f = f ?? "start");
-  const R = n.type === "context-menu", t = Z({
-    anchor: P,
-    floatingRootContext: _,
-    positionMethod: U ? "fixed" : M,
-    mounted: p,
-    side: l,
-    sideOffset: S,
-    align: f,
-    alignOffset: N,
-    arrowPadding: R ? 0 : D,
-    collisionBoundary: A,
-    collisionPadding: k,
-    sticky: H,
-    nodeId: a,
-    keepMounted: V,
-    disableAnchorTracking: T,
-    collisionAvoidance: B,
-    shiftCrossAxis: R,
-    externalTree: s
-  }), W = d.useMemo(() => {
-    const r = {};
-    return i || (r.pointerEvents = "none"), {
-      role: "presentation",
-      hidden: !p,
-      style: {
-        ...t.positionerStyles,
-        ...r
-      }
-    };
-  }, [i, p, t.positionerStyles]);
-  d.useEffect(() => {
-    function r(o) {
-      o.open ? (o.parentNodeId === a && e.set("hoverEnabled", !1), o.nodeId !== a && o.parentNodeId === e.select("floatingParentNodeId") && e.setOpen(!1, x(g))) : o.parentNodeId === a && o.reason !== g && e.set("hoverEnabled", !0);
-    }
-    return s.events.on("menuopenchange", r), () => {
-      s.events.off("menuopenchange", r);
-    };
-  }, [e, s.events, a]), d.useEffect(() => {
-    if (e.select("floatingParentNodeId") == null)
-      return;
-    function r(o) {
-      if (o.open || o.nodeId !== e.select("floatingParentNodeId"))
-        return;
-      const K = o.reason ?? g;
-      e.setOpen(!1, x(K));
-    }
-    return s.events.on("menuopenchange", r), () => {
-      s.events.off("menuopenchange", r);
-    };
-  }, [s.events, e]), d.useEffect(() => {
-    function r(o) {
-      !i || o.nodeId !== e.select("floatingParentNodeId") || o.target && u && u !== o.target && e.setOpen(!1, x(g));
-    }
-    return s.events.on("itemhover", r), () => {
-      s.events.off("itemhover", r);
-    };
-  }, [s.events, i, u, e]), d.useEffect(() => {
-    const r = {
-      open: i,
-      nodeId: a,
-      parentNodeId: O,
-      reason: e.select("lastOpenChangeReason")
-    };
-    s.events.emit("menuopenchange", r);
-  }, [s.events, i, e, a, O]);
-  const q = d.useMemo(() => ({
-    open: i,
-    side: t.side,
-    align: t.align,
-    anchorHidden: t.anchorHidden,
-    nested: n.type === "menu"
-  }), [i, t.side, t.align, t.anchorHidden, n.type]), z = d.useMemo(() => ({
-    side: t.side,
-    align: t.align,
-    arrowRef: t.arrowRef,
-    arrowUncentered: t.arrowUncentered,
-    arrowStyles: t.arrowStyles,
-    nodeId: t.context.nodeId
-  }), [t.side, t.align, t.arrowRef, t.arrowUncentered, t.arrowStyles, t.context.nodeId]), G = $("div", c, {
-    state: q,
-    stateAttributesMapping: ee,
-    ref: [C, e.useStateSetter("positionerElement")],
-    props: [W, L]
-  }), J = p && n.type !== "menu" && (n.type !== "menubar" && j && F !== de || n.type === "menubar" && n.context.modal);
-  let h = null;
-  return n.type === "menubar" ? h = n.context.contentElement : n.type === void 0 && (h = u), /* @__PURE__ */ ie(X.Provider, {
-    value: z,
-    children: [J && /* @__PURE__ */ I(ne, {
-      ref: n.type === "context-menu" || n.type === "nested-context-menu" ? n.context.internalBackdropRef : null,
-      inert: Q(!i),
-      cutout: h
-    }), /* @__PURE__ */ I(ae, {
-      id: a,
-      children: /* @__PURE__ */ I(te, {
-        elementsRef: e.context.itemDomElements,
-        labelsRef: e.context.itemLabels,
-        children: G
-      })
-    })]
+  } = o, {
+    disabled: U
+  } = K(), R = m(g || (() => null)), r = U || O, [k, j] = e.useState(!1), [B, Y] = e.useState(!1), [n, V] = e.useState(!1), [a, P] = e.useState(!1), d = D ?? B, s = S ?? k, F = e.useRef(!1), E = m((f) => {
+    D === void 0 && (f && (F.current = !0), Y(f));
+  }), M = m((f) => {
+    S === void 0 && j(f);
+  }), b = m(() => i === "onChange" || i === "onSubmit" && I.current), l = !!(_ || t && {}.hasOwnProperty.call(h, t) && h[t] !== void 0), [c, N] = e.useState({
+    state: H,
+    error: "",
+    errors: [],
+    value: null,
+    initialValue: null
+  }), T = !l && c.state.valid, u = e.useMemo(() => ({
+    disabled: r,
+    touched: s,
+    dirty: d,
+    valid: T,
+    filled: n,
+    focused: a
+  }), [r, s, d, T, n, a]), x = X({
+    setValidityData: N,
+    validate: R,
+    validityData: c,
+    validationDebounceTime: v,
+    invalid: l,
+    markedDirtyRef: F,
+    state: u,
+    name: t,
+    shouldValidateOnChange: b
+  }), q = e.useMemo(() => ({
+    invalid: l,
+    name: t,
+    validityData: c,
+    setValidityData: N,
+    disabled: r,
+    touched: s,
+    setTouched: M,
+    dirty: d,
+    setDirty: E,
+    filled: n,
+    setFilled: V,
+    focused: a,
+    setFocused: P,
+    validate: R,
+    validationMode: i,
+    validationDebounceTime: v,
+    shouldValidateOnChange: b,
+    state: u,
+    markedDirtyRef: F,
+    validation: x
+  }), [l, t, c, r, s, M, d, E, n, V, a, P, R, i, v, b, u, x]), z = W("div", o, {
+    ref: p,
+    state: u,
+    props: L,
+    stateAttributesMapping: J
+  });
+  return /* @__PURE__ */ y(G.Provider, {
+    value: q,
+    children: z
+  });
+});
+process.env.NODE_ENV !== "production" && (C.displayName = "FieldRootInner");
+const $ = /* @__PURE__ */ e.forwardRef(function(o, p) {
+  return /* @__PURE__ */ y(Z, {
+    children: /* @__PURE__ */ y(C, {
+      ...o,
+      ref: p
+    })
   });
 });
-process.env.NODE_ENV !== "production" && (le.displayName = "MenuPositioner");
+process.env.NODE_ENV !== "production" && ($.displayName = "FieldRoot");
 export {
-  le as MenuPositioner
+  $ as FieldRoot
 };

package/dist/als-react-ts-ui162.js

@@ -1,87 +1,38 @@
-import * as a from "react";
-import { useMenuRootContext as O } from "./als-react-ts-ui472.js";
-import { useMenuPositionerContext as D } from "./als-react-ts-ui475.js";
-import { useRenderElement as I } from "./als-react-ts-ui226.js";
-import { popupStateMapping as N } from "./als-react-ts-ui227.js";
-import { transitionStatusMapping as w } from "./als-react-ts-ui228.js";
-import { useOpenChangeComplete as G } from "./als-react-ts-ui236.js";
-import { createChangeEventDetails as K } from "./als-react-ts-ui229.js";
-import { useToolbarRootContext as _ } from "./als-react-ts-ui395.js";
-import { COMPOSITE_KEYS as j } from "./als-react-ts-ui237.js";
-import { getDisabledMountTransitionStyles as k } from "./als-react-ts-ui393.js";
-import { jsx as A } from "react/jsx-runtime";
-import { useHoverFloatingInteraction as H } from "./als-react-ts-ui375.js";
-import { FloatingFocusManager as V } from "./als-react-ts-ui238.js";
-import { outsidePress as Y } from "./als-react-ts-ui231.js";
-const q = {
-  ...N,
-  ...w
-}, z = /* @__PURE__ */ a.forwardRef(function(u, g) {
+import * as i from "react";
+import { useIsoLayoutEffect as u } from "./als-react-ts-ui224.js";
+import { useFieldRootContext as p } from "./als-react-ts-ui398.js";
+import { useLabelableContext as c } from "./als-react-ts-ui399.js";
+import { fieldValidityMapping as b } from "./als-react-ts-ui409.js";
+import { useBaseUiId as R } from "./als-react-ts-ui276.js";
+import { useRenderElement as g } from "./als-react-ts-ui220.js";
+import { getTarget as L } from "./als-react-ts-ui330.js";
+const x = /* @__PURE__ */ i.forwardRef(function(r, l) {
   const {
-    render: J,
-    className: L,
-    finalFocus: i,
-    ...S
-  } = u, {
-    store: e
-  } = O(), {
-    side: p,
-    align: c
-  } = D(), y = _(!0) != null, n = e.useState("open"), r = e.useState("transitionStatus"), b = e.useState("popupProps"), x = e.useState("mounted"), m = e.useState("instantType"), C = e.useState("activeTriggerElement"), t = e.useState("parent"), E = e.useState("lastOpenChangeReason"), R = e.useState("rootId"), l = e.useState("floatingRootContext"), s = e.useState("floatingTreeRoot"), F = e.useState("closeDelay"), T = e.useState("activeTriggerElement");
-  G({
-    open: n,
-    ref: e.context.popupRef,
-    onComplete() {
-      n && e.context.onOpenChangeComplete?.(!0);
-    }
-  }), a.useEffect(() => {
-    function o(d) {
-      e.setOpen(!1, K(d.reason, d.domEvent));
-    }
-    return s.events.on("close", o), () => {
-      s.events.off("close", o);
-    };
-  }, [s.events, e]);
-  const v = e.useState("hoverEnabled"), M = e.useState("disabled");
-  H(l, {
-    enabled: v && !M && t.type !== "context-menu" && t.type !== "menubar",
-    closeDelay: F
-  });
-  const h = a.useMemo(() => ({
-    transitionStatus: r,
-    side: p,
-    align: c,
-    open: n,
-    nested: t.type === "menu",
-    instant: m
-  }), [r, p, c, n, t.type, m]), P = I("div", u, {
-    state: h,
-    ref: [g, e.context.popupRef],
-    stateAttributesMapping: q,
-    props: [b, {
-      onKeyDown(o) {
-        y && j.has(o.key) && o.stopPropagation();
+    render: F,
+    className: I,
+    id: n,
+    ...a
+  } = r, s = p(!1), {
+    controlId: d,
+    setLabelId: t,
+    labelId: f
+  } = c(), o = R(n), m = i.useRef(null);
+  return u(() => (o && t(o), () => {
+    t(void 0);
+  }), [o, t]), g("label", r, {
+    ref: [l, m],
+    state: s.state,
+    props: [{
+      id: f,
+      htmlFor: d ?? void 0,
+      onMouseDown(e) {
+        L(e.nativeEvent)?.closest("button,input,select,textarea") || !e.defaultPrevented && e.detail > 1 && e.preventDefault();
       }
-    }, k(r), S, {
-      "data-rootownerid": R
-    }]
-  });
-  let f = t.type === void 0 || t.type === "context-menu";
-  return (C || t.type === "menubar" && E !== Y) && (f = !0), /* @__PURE__ */ A(V, {
-    context: l,
-    modal: !1,
-    disabled: !x,
-    returnFocus: i === void 0 ? f : i,
-    initialFocus: t.type !== "menu",
-    restoreFocus: !0,
-    externalTree: t.type !== "menubar" ? s : void 0,
-    previousFocusableElement: T,
-    nextFocusableElement: t.type === void 0 ? e.context.triggerFocusTargetRef : void 0,
-    beforeContentFocusGuardRef: t.type === void 0 ? e.context.beforeContentFocusGuardRef : void 0,
-    children: P
+    }, a],
+    stateAttributesMapping: b
   });
 });
-process.env.NODE_ENV !== "production" && (z.displayName = "MenuPopup");
+process.env.NODE_ENV !== "production" && (x.displayName = "FieldLabel");
 export {
-  z as MenuPopup
+  x as FieldLabel
 };

package/dist/als-react-ts-ui163.js

@@ -1,39 +1,97 @@
-import * as s from "react";
-import { useMenuPositionerContext as d } from "./als-react-ts-ui475.js";
-import { useMenuRootContext as f } from "./als-react-ts-ui472.js";
-import { useRenderElement as M } from "./als-react-ts-ui226.js";
-import { popupStateMapping as l } from "./als-react-ts-ui227.js";
-const w = /* @__PURE__ */ s.forwardRef(function(e, a) {
+import * as p from "react";
+import { useStableCallback as x } from "./als-react-ts-ui223.js";
+import { useControlled as L } from "./als-react-ts-ui292.js";
+import { useIsoLayoutEffect as k } from "./als-react-ts-ui224.js";
+import { useFieldRootContext as b } from "./als-react-ts-ui398.js";
+import { useLabelableContext as B } from "./als-react-ts-ui399.js";
+import { useLabelableId as S } from "./als-react-ts-ui400.js";
+import { fieldValidityMapping as U } from "./als-react-ts-ui409.js";
+import { useRenderElement as A } from "./als-react-ts-ui220.js";
+import { useField as K } from "./als-react-ts-ui403.js";
+import { createChangeEventDetails as O } from "./als-react-ts-ui273.js";
+import { none as _ } from "./als-react-ts-ui275.js";
+const j = /* @__PURE__ */ p.forwardRef(function(n, C) {
   const {
-    className: A,
-    render: N,
-    ...i
-  } = e, {
-    store: p
-  } = f(), {
-    arrowRef: u,
-    side: r,
-    align: t,
-    arrowUncentered: o,
-    arrowStyles: m
-  } = d(), n = p.useState("open"), c = s.useMemo(() => ({
-    open: n,
-    side: r,
-    align: t,
-    uncentered: o
-  }), [n, r, t, o]);
-  return M("div", e, {
-    ref: [u, a],
-    stateAttributesMapping: l,
-    state: c,
-    props: {
-      style: m,
-      "aria-hidden": !0,
-      ...i
-    }
+    render: z,
+    className: G,
+    id: g,
+    name: v,
+    value: o,
+    disabled: R = !1,
+    onValueChange: V,
+    defaultValue: i,
+    ...F
+  } = n, {
+    state: s,
+    name: y,
+    disabled: E
+  } = b(), l = E || R, u = y ?? v, N = p.useMemo(() => ({
+    ...s,
+    disabled: l
+  }), [s, l]), {
+    setTouched: d,
+    setDirty: P,
+    validityData: T,
+    setFocused: m,
+    setFilled: r,
+    validationMode: h,
+    validation: t
+  } = b(), {
+    labelId: D
+  } = B(), f = S({
+    id: g
+  });
+  k(() => {
+    const e = o != null;
+    t.inputRef.current?.value || e && o !== "" ? r(!0) : e && o === "" && r(!1);
+  }, [t.inputRef, r, o]);
+  const [c, I] = L({
+    controlled: o,
+    default: i,
+    name: "FieldControl",
+    state: "value"
+  }), M = o !== void 0, w = x((e, a) => {
+    V?.(e, a), !a.isCanceled && I(e);
+  });
+  return K({
+    id: f,
+    name: u,
+    commit: t.commit,
+    value: c,
+    getValue: () => t.inputRef.current?.value,
+    controlRef: t.inputRef
+  }), A("input", n, {
+    ref: C,
+    state: N,
+    props: [{
+      id: f,
+      disabled: l,
+      name: u,
+      ref: t.inputRef,
+      "aria-labelledby": D,
+      ...M ? {
+        value: c
+      } : {
+        defaultValue: i
+      },
+      onChange(e) {
+        const a = e.currentTarget.value;
+        w(a, O(_, e.nativeEvent)), P(a !== T.initialValue), r(a !== "");
+      },
+      onFocus() {
+        m(!0);
+      },
+      onBlur(e) {
+        d(!0), m(!1), h === "onBlur" && t.commit(e.currentTarget.value);
+      },
+      onKeyDown(e) {
+        e.currentTarget.tagName === "INPUT" && e.key === "Enter" && (d(!0), t.commit(e.currentTarget.value));
+      }
+    }, t.getInputValidationProps(), F],
+    stateAttributesMapping: U
   });
 });
-process.env.NODE_ENV !== "production" && (w.displayName = "MenuArrow");
+process.env.NODE_ENV !== "production" && (j.displayName = "FieldControl");
 export {
-  w as MenuArrow
+  j as FieldControl
 };

package/dist/als-react-ts-ui164.js

@@ -1,47 +1,34 @@
-import * as i from "react";
-import { useMenuItem as P, REGULAR_ITEM as x } from "./als-react-ts-ui477.js";
-import { useMenuRootContext as C } from "./als-react-ts-ui472.js";
-import { useRenderElement as E } from "./als-react-ts-ui226.js";
-import { useBaseUiId as v } from "./als-react-ts-ui232.js";
-import { useCompositeListItem as N } from "./als-react-ts-ui275.js";
-import { useMenuPositionerContext as g } from "./als-react-ts-ui475.js";
-const h = /* @__PURE__ */ i.forwardRef(function(s, n) {
+import * as f from "react";
+import { useIsoLayoutEffect as d } from "./als-react-ts-ui224.js";
+import { useFieldRootContext as m } from "./als-react-ts-ui398.js";
+import { useLabelableContext as l } from "./als-react-ts-ui399.js";
+import { fieldValidityMapping as c } from "./als-react-ts-ui409.js";
+import { useBaseUiId as u } from "./als-react-ts-ui276.js";
+import { useRenderElement as R } from "./als-react-ts-ui220.js";
+const x = /* @__PURE__ */ f.forwardRef(function(r, i) {
   const {
-    render: A,
-    className: B,
-    id: m,
-    label: u,
-    nativeButton: a = !1,
-    disabled: e = !1,
-    closeOnClick: d = !0,
-    ...c
-  } = s, r = N({
-    label: u
-  }), p = g(!0), f = v(m), {
-    store: t
-  } = C(), o = t.useState("isActive", r.index), l = t.useState("itemProps"), {
-    getItemProps: I,
-    itemRef: M
-  } = P({
-    closeOnClick: d,
-    disabled: e,
-    highlighted: o,
-    id: f,
-    store: t,
-    nativeButton: a,
-    nodeId: p?.nodeId,
-    itemMetadata: x
-  }), R = i.useMemo(() => ({
-    disabled: e,
-    highlighted: o
-  }), [e, o]);
-  return E("div", s, {
-    state: R,
-    props: [l, c, I],
-    ref: [M, n, r.ref]
+    render: E,
+    id: s,
+    className: F,
+    ...n
+  } = r, e = u(s), p = m(!1), {
+    setMessageIds: t
+  } = l();
+  return d(() => {
+    if (e)
+      return t((o) => o.concat(e)), () => {
+        t((o) => o.filter((a) => a !== e));
+      };
+  }, [e, t]), R("p", r, {
+    ref: i,
+    state: p.state,
+    props: [{
+      id: e
+    }, n],
+    stateAttributesMapping: c
   });
 });
-process.env.NODE_ENV !== "production" && (h.displayName = "MenuItem");
+process.env.NODE_ENV !== "production" && (x.displayName = "FieldDescription");
 export {
-  h as MenuItem
+  x as FieldDescription
 };

package/dist/als-react-ts-ui165.js

@@ -1,28 +1,48 @@
-import * as e from "react";
-import { useRenderElement as l } from "./als-react-ts-ui226.js";
-import { MenuGroupContext as p } from "./als-react-ts-ui476.js";
-import { jsx as d } from "react/jsx-runtime";
-const i = /* @__PURE__ */ e.forwardRef(function(r, t) {
+import * as n from "react";
+import { useIsoLayoutEffect as F } from "./als-react-ts-ui224.js";
+import { useFieldRootContext as v } from "./als-react-ts-ui398.js";
+import { useLabelableContext as x } from "./als-react-ts-ui399.js";
+import { fieldValidityMapping as N } from "./als-react-ts-ui409.js";
+import { useFormContext as R } from "./als-react-ts-ui402.js";
+import { useRenderElement as b } from "./als-react-ts-ui220.js";
+import { useBaseUiId as g } from "./als-react-ts-ui276.js";
+const h = /* @__PURE__ */ n.forwardRef(function(l, m) {
   const {
-    render: c,
-    className: f,
-    ...n
-  } = r, [s, o] = e.useState(void 0), u = e.useMemo(() => ({
-    setLabelId: o
-  }), [o]), a = l("div", r, {
-    ref: t,
-    props: {
-      role: "group",
-      "aria-labelledby": s,
-      ...n
-    }
-  });
-  return /* @__PURE__ */ d(p.Provider, {
-    value: u,
-    children: a
+    render: I,
+    id: d,
+    className: M,
+    match: i,
+    ...u
+  } = l, t = g(d), {
+    validityData: o,
+    state: c,
+    name: a
+  } = v(!1), {
+    setMessageIds: s
+  } = x(), {
+    errors: p
+  } = R(), f = a ? p[a] : null;
+  let e = !1;
+  f || i === !0 ? e = !0 : i ? e = !!o.state[i] : e = o.state.valid === !1, F(() => {
+    if (!(!e || !t))
+      return s((r) => r.concat(t)), () => {
+        s((r) => r.filter((y) => y !== t));
+      };
+  }, [e, t, s]);
+  const E = b("div", l, {
+    ref: m,
+    state: c,
+    props: [{
+      id: t,
+      children: f || (o.errors.length > 1 ? /* @__PURE__ */ n.createElement("ul", {}, o.errors.map((r) => /* @__PURE__ */ n.createElement("li", {
+        key: r
+      }, r))) : o.error)
+    }, u],
+    stateAttributesMapping: N
   });
+  return e ? E : null;
 });
-process.env.NODE_ENV !== "production" && (i.displayName = "MenuGroup");
+process.env.NODE_ENV !== "production" && (h.displayName = "FieldError");
 export {
-  i as MenuGroup
+  h as FieldError
 };