@expcat/tigercat-react 0.3.0 → 0.3.69

package/dist/{chunk-C5EFBJBR.js → chunk-QM4GOQDT.js}

@@ -145,6 +145,10 @@ var Tree = ({
     }
     return internalCheckedState;
   }, [controlledCheckedKeys, internalCheckedState, treeData, checkStrictly]);
+  const checkedSets = react.useMemo(
+    () => tigercatCore.checkedSetsFromState(computedCheckedState),
+    [computedCheckedState]
+  );
   react.useEffect(() => {
     if (filterValue) {
       const matched = tigercatCore.filterTreeNodes(treeData, filterValue, filterFn);
@@ -269,6 +273,20 @@ var Tree = ({
     },
     [treeData, computedCheckedState, checkStrictly, checkStrategy, controlledCheckedKeys, onCheck]
   );
+  const getFirstChildKey = react.useCallback(
+    (nodeKey) => {
+      const index = visibleItems.findIndex((i) => i.key === nodeKey);
+      if (index < 0) return void 0;
+      const base = visibleItems[index];
+      for (let i = index + 1; i < visibleItems.length; i++) {
+        const item = visibleItems[i];
+        if (item.level <= base.level) break;
+        if (item.parentKey === nodeKey && !item.node.disabled) return item.key;
+      }
+      return void 0;
+    },
+    [visibleItems]
+  );
   const handleKeyDown = react.useCallback(
     (e, node, isExpanded, isChecked) => {
       if (node.disabled) return;
@@ -277,18 +295,6 @@ var Tree = ({
       const isExpandable = !!(node.children && node.children.length > 0) || !!(loadData && !node.isLeaf);
       const parents = tigercatCore.getParentKeys(treeData, node.key);
       const parentKey = parents[parents.length - 1];
-      const getFirstChildKey = () => {
-        const list = visibleItems;
-        const index = list.findIndex((i) => i.key === node.key);
-        if (index < 0) return void 0;
-        const base = list[index];
-        for (let i = index + 1; i < list.length; i++) {
-          const item = list[i];
-          if (item.level <= base.level) break;
-          if (item.parentKey === node.key && !item.node.disabled) return item.key;
-        }
-        return void 0;
-      };
       if (e.key === "ArrowDown") {
         e.preventDefault();
         setActiveKey(focusableKeys[currentIndex + 1] ?? currentKey);
@@ -316,7 +322,7 @@ var Tree = ({
           return;
         }
         if (isExpandable && isExpanded) {
-          setActiveKey(getFirstChildKey() ?? currentKey);
+          setActiveKey(getFirstChildKey(node.key) ?? currentKey);
         }
         return;
       }
@@ -371,147 +377,118 @@ var Tree = ({
       activeKey,
       defaultActiveKey,
       focusableKeys,
-      visibleItems,
       treeData,
       loadData,
       checkable,
       computedExpandedKeys,
       effectiveSelectable,
+      getFirstChildKey,
       handleExpand,
       handleSelect,
       handleCheck
     ]
   );
-  const handleNodeClickInternal = react.useCallback(
-    (node, event) => {
-      if (node.disabled) return;
-      onNodeClick?.(node, event);
-    },
-    [onNodeClick]
-  );
-  const renderTreeNode = react.useCallback(
-    (node, level, _parentKey) => {
-      const hasChildren = !!(node.children && node.children.length > 0);
-      const isExpanded = computedExpandedKeys.has(node.key);
-      const isSelected = computedSelectedKeys.has(node.key);
-      const isChecked = computedCheckedState.checked.includes(node.key);
-      const isHalfChecked = computedCheckedState.halfChecked.includes(node.key);
-      const isLoading = loadingNodes.has(node.key);
-      const isFiltered = filteredNodeKeys.size > 0;
-      const isMatched = filteredNodeKeys.has(node.key);
-      const isVisible = !isFiltered || isMatched;
-      const isExpandable = hasChildren || !!(loadData && !node.isLeaf);
-      const isFocusable = !node.disabled && node.key === (activeKey ?? defaultActiveKey);
-      if (!isVisible) {
-        return null;
-      }
-      const indent = [];
-      for (let i = 0; i < level; i++) {
-        indent.push(/* @__PURE__ */ jsxRuntime.jsx("span", { className: tigercatCore.treeNodeIndentClasses }, i));
-      }
-      const nodeContent = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        indent,
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "span",
-          {
-            className: isExpandable ? "cursor-pointer" : "",
-            onClick: (e) => {
-              e.stopPropagation();
-              if (isExpandable) {
-                setActiveKey(node.key);
-                handleExpand(node.key);
-              }
-            },
-            children: /* @__PURE__ */ jsxRuntime.jsx(ExpandIcon, { expanded: isExpanded, hasChildren: isExpandable })
-          }
-        ),
-        checkable && /* @__PURE__ */ jsxRuntime.jsx(
-          "input",
-          {
-            type: "checkbox",
-            "aria-label": `Select ${node.label}`,
-            className: tigercatCore.treeNodeCheckboxClasses,
-            checked: isChecked,
-            ref: (input) => {
-              if (input) {
-                input.indeterminate = isHalfChecked;
-              }
-            },
-            disabled: node.disabled,
-            onClick: (e) => {
-              e.stopPropagation();
-            },
-            onChange: (e) => {
-              handleCheck(node.key, e.target.checked);
-            }
-          }
-        ),
-        showIcon && node.icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: tigercatCore.treeNodeIconClasses, children: node.icon }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "span",
-          {
-            className: tigercatCore.classNames(
-              tigercatCore.treeNodeLabelClasses,
-              isFiltered && isMatched ? "font-semibold text-[var(--tiger-primary,#2563eb)]" : ""
-            ),
-            children: node.label
-          }
-        ),
-        isLoading && /* @__PURE__ */ jsxRuntime.jsx(LoadingSpinner, {})
-      ] });
-      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: tigercatCore.treeNodeWrapperClasses, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            className: tigercatCore.getTreeNodeClasses(isSelected, !!node.disabled, blockNode),
-            ref: (el) => {
-              itemRefs.current.set(node.key, el);
-            },
-            role: "treeitem",
-            "aria-level": level + 1,
-            "aria-disabled": node.disabled || void 0,
-            "aria-selected": effectiveSelectable ? isSelected : void 0,
-            "aria-expanded": isExpandable ? isExpanded : void 0,
-            "aria-checked": checkable ? isHalfChecked ? "mixed" : isChecked : void 0,
-            tabIndex: isFocusable ? 0 : -1,
-            onFocus: () => {
-              if (!node.disabled) setActiveKey(node.key);
-            },
-            onKeyDown: (e) => handleKeyDown(e, node, isExpanded, isChecked),
-            onClick: (e) => {
+  const renderTreeNode = (node, level) => {
+    const hasChildren = !!(node.children && node.children.length > 0);
+    const isExpanded = computedExpandedKeys.has(node.key);
+    const isSelected = computedSelectedKeys.has(node.key);
+    const isChecked = checkedSets.checkedSet.has(node.key);
+    const isHalfChecked = checkedSets.halfCheckedSet.has(node.key);
+    const isLoading = loadingNodes.has(node.key);
+    const isFiltered = filteredNodeKeys.size > 0;
+    const isMatched = filteredNodeKeys.has(node.key);
+    const isVisible = !isFiltered || isMatched;
+    const isExpandable = hasChildren || !!(loadData && !node.isLeaf);
+    const isFocusable = !node.disabled && node.key === (activeKey ?? defaultActiveKey);
+    if (!isVisible) {
+      return null;
+    }
+    const indent = [];
+    for (let i = 0; i < level; i++) {
+      indent.push(/* @__PURE__ */ jsxRuntime.jsx("span", { className: tigercatCore.treeNodeIndentClasses }, i));
+    }
+    const nodeContent = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      indent,
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          className: isExpandable ? "cursor-pointer" : "",
+          onClick: (e) => {
+            e.stopPropagation();
+            if (isExpandable) {
               setActiveKey(node.key);
-              handleNodeClickInternal(node, e);
-              if (effectiveSelectable && !node.disabled) {
-                handleSelect(node.key, e);
-              }
-            },
-            children: nodeContent
+              handleExpand(node.key);
+            }
+          },
+          children: /* @__PURE__ */ jsxRuntime.jsx(ExpandIcon, { expanded: isExpanded, hasChildren: isExpandable })
+        }
+      ),
+      checkable && /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          type: "checkbox",
+          "aria-label": `Select ${node.label}`,
+          className: tigercatCore.treeNodeCheckboxClasses,
+          checked: isChecked,
+          ref: (input) => {
+            if (input) {
+              input.indeterminate = isHalfChecked;
+            }
+          },
+          disabled: node.disabled,
+          onClick: (e) => {
+            e.stopPropagation();
+          },
+          onChange: (e) => {
+            handleCheck(node.key, e.target.checked);
           }
-        ),
-        hasChildren && isExpanded && /* @__PURE__ */ jsxRuntime.jsx("div", { className: tigercatCore.classNames(tigercatCore.treeNodeChildrenClasses, showLine && tigercatCore.treeLineClasses), children: node.children.map((child) => renderTreeNode(child, level + 1, node.key)) })
-      ] }, node.key);
-    },
-    [
-      computedExpandedKeys,
-      computedSelectedKeys,
-      computedCheckedState,
-      loadingNodes,
-      filteredNodeKeys,
-      activeKey,
-      defaultActiveKey,
-      loadData,
-      checkable,
-      blockNode,
-      effectiveSelectable,
-      showIcon,
-      showLine,
-      handleExpand,
-      handleCheck,
-      handleSelect,
-      handleNodeClickInternal,
-      handleKeyDown
-    ]
-  );
+        }
+      ),
+      showIcon && node.icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: tigercatCore.treeNodeIconClasses, children: node.icon }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          className: tigercatCore.classNames(
+            tigercatCore.treeNodeLabelClasses,
+            isFiltered && isMatched ? "font-semibold text-[var(--tiger-primary,#2563eb)]" : ""
+          ),
+          children: node.label
+        }
+      ),
+      isLoading && /* @__PURE__ */ jsxRuntime.jsx(LoadingSpinner, {})
+    ] });
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: tigercatCore.treeNodeWrapperClasses, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: tigercatCore.getTreeNodeClasses(isSelected, !!node.disabled, blockNode),
+          ref: (el) => {
+            itemRefs.current.set(node.key, el);
+          },
+          role: "treeitem",
+          "aria-level": level + 1,
+          "aria-disabled": node.disabled || void 0,
+          "aria-selected": effectiveSelectable ? isSelected : void 0,
+          "aria-expanded": isExpandable ? isExpanded : void 0,
+          "aria-checked": checkable ? isHalfChecked ? "mixed" : isChecked : void 0,
+          tabIndex: isFocusable ? 0 : -1,
+          onFocus: () => {
+            if (!node.disabled) setActiveKey(node.key);
+          },
+          onKeyDown: (e) => handleKeyDown(e, node, isExpanded, isChecked),
+          onClick: (e) => {
+            setActiveKey(node.key);
+            if (!node.disabled) onNodeClick?.(node, e);
+            if (effectiveSelectable && !node.disabled) {
+              handleSelect(node.key, e);
+            }
+          },
+          children: nodeContent
+        }
+      ),
+      hasChildren && isExpanded && /* @__PURE__ */ jsxRuntime.jsx("div", { className: tigercatCore.classNames(tigercatCore.treeNodeChildrenClasses, showLine && tigercatCore.treeLineClasses), children: node.children.map((child) => renderTreeNode(child, level + 1)) })
+    ] }, node.key);
+  };
   if (!treeData || treeData.length === 0) {
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",

package/dist/{chunk-PBJ2J2B3.js → chunk-QNRAM3CM.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunk4TWHENPT_js = require('./chunk-4TWHENPT.js');
+var chunkHB2UYJBY_js = require('./chunk-HB2UYJBY.js');
 var react = require('react');
 var tigercatCore = require('@expcat/tigercat-core');
 var jsxRuntime = require('react/jsx-runtime');
@@ -13,7 +13,7 @@ var DropdownItem = ({
   children,
   ...buttonProps
 }) => {
-  const context = react.useContext(chunk4TWHENPT_js.DropdownContext);
+  const context = react.useContext(chunkHB2UYJBY_js.DropdownContext);
   const handleClick = (event) => {
     if (disabled) {
       event.preventDefault();

package/dist/{chunk-Z5DDULTA.js → chunk-RARHRSPQ.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkZPWDDAFE_js = require('./chunk-ZPWDDAFE.js');
+var chunkXID6T65A_js = require('./chunk-XID6T65A.js');
 var React = require('react');
 var tigercatCore = require('@expcat/tigercat-core');
 var jsxRuntime = require('react/jsx-runtime');
@@ -17,7 +17,7 @@ var AnchorLink = ({
   children,
   ...props
 }) => {
-  const anchorContext = chunkZPWDDAFE_js.useAnchorContext();
+  const anchorContext = chunkXID6T65A_js.useAnchorContext();
   React.useEffect(() => {
     anchorContext?.registerLink(href);
     return () => {

package/dist/{chunk-5QKMQRCW.js → chunk-RDIEZKV2.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkVSF4DF7N_js = require('./chunk-VSF4DF7N.js');
+var chunkSAZ6V6DX_js = require('./chunk-SAZ6V6DX.js');
 var react = require('react');
 var tigercatCore = require('@expcat/tigercat-core');
 var jsxRuntime = require('react/jsx-runtime');
@@ -18,7 +18,7 @@ var Radio = ({
   style,
   ...props
 }) => {
-  const groupContext = react.useContext(chunkVSF4DF7N_js.RadioGroupContext);
+  const groupContext = react.useContext(chunkSAZ6V6DX_js.RadioGroupContext);
   const [internalChecked, setInternalChecked] = react.useState(defaultChecked);
   const isCheckedControlled = checked !== void 0;
   const isInGroup = !!groupContext;
@@ -26,23 +26,31 @@ var Radio = ({
   const actualDisabled = disabled !== void 0 ? disabled : groupContext?.disabled || false;
   const actualName = name || groupContext?.name || "";
   const isChecked = checked !== void 0 ? checked : groupContext?.value !== void 0 ? groupContext.value === value : internalChecked;
-  const colors = tigercatCore.getRadioColorClasses();
-  const radioClasses = tigercatCore.getRadioVisualClasses({
-    size: actualSize,
-    checked: isChecked,
-    disabled: actualDisabled,
-    colors
-  });
-  const dotClasses = tigercatCore.getRadioDotClasses({
-    size: actualSize,
-    checked: isChecked,
-    colors
-  });
-  const labelClasses = tigercatCore.getRadioLabelClasses({
-    size: actualSize,
-    disabled: actualDisabled,
-    colors
-  });
+  const radioClasses = react.useMemo(
+    () => tigercatCore.getRadioVisualClasses({
+      size: actualSize,
+      checked: isChecked,
+      disabled: actualDisabled,
+      colors: tigercatCore.defaultRadioColors
+    }),
+    [actualSize, isChecked, actualDisabled]
+  );
+  const dotClasses = react.useMemo(
+    () => tigercatCore.getRadioDotClasses({
+      size: actualSize,
+      checked: isChecked,
+      colors: tigercatCore.defaultRadioColors
+    }),
+    [actualSize, isChecked]
+  );
+  const labelClasses = react.useMemo(
+    () => tigercatCore.getRadioLabelClasses({
+      size: actualSize,
+      disabled: actualDisabled,
+      colors: tigercatCore.defaultRadioColors
+    }),
+    [actualSize, actualDisabled]
+  );
   const handleChange = (event) => {
     if (actualDisabled) {
       event.preventDefault();
@@ -66,7 +74,7 @@ var Radio = ({
       if (!input.checked) input.click();
     }
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("label", { className: tigercatCore.classNames("inline-flex items-center", className), style, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("label", { className: tigercatCore.classNames(tigercatCore.radioRootBaseClasses, className), style, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       "input",
       {

package/dist/{chunk-OZLAGTZW.mjs → chunk-RGFSY3S2.mjs}

@@ -1,8 +1,23 @@
-import { useFormContext } from './chunk-3XXXM4OB.mjs';
-import React, { useState, useId, useMemo, useCallback, useEffect } from 'react';
-import { getFieldError, classNames, getFormItemClasses, getFormItemLabelClasses, getFormItemErrorClasses, getFormItemContentClasses, getFormItemFieldClasses, getFormItemAsteriskClasses, getFormItemAsteriskStyle } from '@expcat/tigercat-core';
+import { useFormContext } from './chunk-IGE44BIS.mjs';
+import React, { useState, useRef, useId, useMemo, useEffect, useCallback } from 'react';
+import { getFormItemFieldClasses, getFormItemAsteriskClasses, getFieldError, classNames, getFormItemClasses, getFormItemLabelClasses, getFormItemErrorClasses, getFormItemContentClasses } from '@expcat/tigercat-core';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
+function hasRequiredRule(maybeRules) {
+  if (!maybeRules) return false;
+  const ruleArr = Array.isArray(maybeRules) ? maybeRules : [maybeRules];
+  return ruleArr.some((rule) => !!rule && typeof rule === "object" && !!rule.required);
+}
+function mergeAriaDescribedBy(existing, next) {
+  if (!existing) return next;
+  if (!next) return existing;
+  const parts = new Set(
+    `${existing} ${next}`.split(" ").map((s) => s.trim()).filter(Boolean)
+  );
+  return Array.from(parts).join(" ");
+}
+var FIELD_CLASSES = getFormItemFieldClasses();
+var ASTERISK_CLASSES = getFormItemAsteriskClasses();
 var FormItem = ({
   name,
   label,
@@ -17,26 +32,13 @@ var FormItem = ({
 }) => {
   const formContext = useFormContext();
   const [errorMessage, setErrorMessage] = useState("");
+  const [shakeTrigger, setShakeTrigger] = useState(0);
+  const prevFormErrorRef = useRef("");
   const reactId = useId();
-  const baseId = useMemo(() => `tiger-form-item-${reactId}`, [reactId]);
+  const baseId = `tiger-form-item-${reactId}`;
   const labelId = `${baseId}-label`;
   const fieldId = `${baseId}-field`;
   const errorId = `${baseId}-error`;
-  const mergeAriaDescribedBy = useCallback(
-    (existing, next) => {
-      if (!existing) {
-        return next;
-      }
-      if (!next) {
-        return existing;
-      }
-      const parts = new Set(
-        `${existing} ${next}`.split(" ").map((s) => s.trim()).filter(Boolean)
-      );
-      return Array.from(parts).join(" ");
-    },
-    []
-  );
   const actualSize = size || formContext?.size || "md";
   const labelPosition = formContext?.labelPosition || "right";
   const labelAlign = formContext?.labelAlign || "right";
@@ -47,18 +49,6 @@ var FormItem = ({
     }
     return width;
   }, [labelWidth, formContext?.labelWidth]);
-  const hasRequiredRule = useCallback((maybeRules) => {
-    if (!maybeRules) {
-      return false;
-    }
-    const rules2 = Array.isArray(maybeRules) ? maybeRules : [maybeRules];
-    return rules2.some((rule) => {
-      if (!rule || typeof rule !== "object") {
-        return false;
-      }
-      return !!rule.required;
-    });
-  }, []);
   const showRequiredAsterisk = useMemo(() => {
     if (required !== void 0) {
       return required;
@@ -73,15 +63,19 @@ var FormItem = ({
       }
     }
     return false;
-  }, [required, rules, name, formContext?.rules, hasRequiredRule]);
+  }, [required, rules, name, formContext?.rules]);
   const isRequired = useMemo(
     () => showRequiredAsterisk && (formContext?.showRequiredAsterisk ?? true),
     [showRequiredAsterisk, formContext?.showRequiredAsterisk]
   );
   useEffect(() => {
     if (name && formContext?.errors) {
-      const error = getFieldError(name, formContext.errors);
-      setErrorMessage(error || "");
+      const error = getFieldError(name, formContext.errors) || "";
+      setErrorMessage(error);
+      if (error && error !== prevFormErrorRef.current) {
+        setShakeTrigger((prev) => prev + 1);
+      }
+      prevFormErrorRef.current = error;
     }
   }, [name, formContext?.errors]);
   useEffect(() => {
@@ -110,7 +104,7 @@ var FormItem = ({
       formContext.validateField(name, rules, "change");
     }
   }, [name, formContext, rules]);
-  const hasError = useMemo(() => !!errorMessage, [errorMessage]);
+  const hasError = !!errorMessage;
   const describedById = useMemo(
     () => showMessage && hasError ? errorId : void 0,
     [showMessage, hasError, errorId]
@@ -123,6 +117,7 @@ var FormItem = ({
     return React.Children.toArray(children)[0] ?? null;
   }, [children]);
   const isClonableChild = React.isValidElement(onlyChild);
+  const isNativeElement = isClonableChild && typeof onlyChild.type === "string";
   const childId = isClonableChild ? onlyChild.props.id : void 0;
   const effectiveFieldId = childId ?? fieldId;
   const enhancedChild = useMemo(() => {
@@ -131,6 +126,9 @@ var FormItem = ({
     }
     const nextProps = {
       id: effectiveFieldId,
+      status: !isNativeElement && hasError ? "error" : onlyChild.props.status,
+      errorMessage: !isNativeElement && hasError && !showMessage ? errorMessage : onlyChild.props.errorMessage,
+      _shakeTrigger: !isNativeElement && hasError ? shakeTrigger : void 0,
       "aria-invalid": hasError ? true : onlyChild.props["aria-invalid"],
       "aria-required": isRequired ? true : onlyChild.props["aria-required"],
       "aria-describedby": mergeAriaDescribedBy(onlyChild.props["aria-describedby"], describedById),
@@ -150,8 +148,11 @@ var FormItem = ({
     onlyChild,
     effectiveFieldId,
     hasError,
+    errorMessage,
+    showMessage,
+    shakeTrigger,
     isRequired,
-    mergeAriaDescribedBy,
+    isNativeElement,
     describedById,
     handleBlur,
     handleChange
@@ -184,13 +185,10 @@ var FormItem = ({
     return actualLabelWidth ? { width: actualLabelWidth } : {};
   }, [labelPosition, actualLabelWidth]);
   const errorClasses = useMemo(
-    () => classNames(getFormItemErrorClasses(actualSize), hasError && "tiger-form-item__error--show"),
+    () => classNames(getFormItemErrorClasses(actualSize), hasError && "opacity-100"),
     [actualSize, hasError]
   );
   const contentClasses = useMemo(() => getFormItemContentClasses(labelPosition), [labelPosition]);
-  const fieldClasses = useMemo(() => getFormItemFieldClasses(), []);
-  const asteriskClasses = useMemo(() => getFormItemAsteriskClasses(), []);
-  const asteriskStyle = useMemo(() => getFormItemAsteriskStyle(), []);
   return /* @__PURE__ */ jsxs("div", { className: formItemClasses, children: [
     label && /* @__PURE__ */ jsxs(
       "label",
@@ -200,7 +198,7 @@ var FormItem = ({
         style: labelStyles,
         htmlFor: isClonableChild ? effectiveFieldId : void 0,
         children: [
-          isRequired && /* @__PURE__ */ jsx("span", { className: asteriskClasses, style: asteriskStyle, children: "*" }),
+          isRequired && /* @__PURE__ */ jsx("span", { className: ASTERISK_CLASSES, children: "*" }),
           label
         ]
       }
@@ -209,7 +207,7 @@ var FormItem = ({
       /* @__PURE__ */ jsx(
         "div",
         {
-          className: fieldClasses,
+          className: FIELD_CLASSES,
           role: "group",
           "aria-labelledby": label ? labelId : void 0,
           "aria-describedby": describedById,
@@ -220,7 +218,16 @@ var FormItem = ({
           children: enhancedChild
         }
       ),
-      showMessage && hasError && /* @__PURE__ */ jsx("div", { id: errorId, role: "alert", className: errorClasses, children: errorMessage })
+      showMessage && /* @__PURE__ */ jsx(
+        "div",
+        {
+          id: hasError ? errorId : void 0,
+          role: hasError ? "alert" : void 0,
+          className: errorClasses,
+          "aria-hidden": hasError ? void 0 : true,
+          children: hasError ? errorMessage : ""
+        }
+      )
     ] })
   ] });
 };