@ttoss/forms 0.14.18 → 0.14.20

package/dist/esm/index.js

@@ -35,8 +35,8 @@ import { Box as Box2, Label } from "@ttoss/ui";
 
 // src/ErrorMessage.tsx
 import { useFormContext } from "react-hook-form";
+import { HelpText } from "@ttoss/ui";
 import { ErrorMessage as HookFormErrorMessage } from "@hookform/error-message";
-import { Text } from "@ttoss/ui";
 import { jsx as jsx2 } from "react/jsx-runtime";
 var ErrorMessage = ({
   name
@@ -49,13 +49,8 @@ var ErrorMessage = ({
   return /* @__PURE__ */jsx2(HookFormErrorMessage, {
     errors,
     name,
-    as: /* @__PURE__ */jsx2(Text, {
-      variant: "text.error",
-      role: "alert",
-      sx: {
-        fontFamily: "caption",
-        fontSize: "xs"
-      }
+    as: /* @__PURE__ */jsx2(HelpText, {
+      negative: true
     })
   });
 };
@@ -108,12 +103,16 @@ var FormFieldCheckbox = ({
       onBlur,
       value,
       ref
+    },
+    formState: {
+      errors
     }
   } = useController2({
     name,
     defaultValue: false
   });
   const id = `form-field-checkbox-${name}`;
+  const error = !!errors[name]?.message;
   return /* @__PURE__ */jsxs2(Box3, {
     children: [/* @__PURE__ */jsx4(Flex, {
       sx: {
@@ -129,6 +128,7 @@ var FormFieldCheckbox = ({
           onChange,
           onBlur,
           name,
+          "aria-invalid": error ? "true" : "false",
           ...checkboxProps
         }), label]
       })
@@ -139,7 +139,7 @@ var FormFieldCheckbox = ({
 };
 
 // src/FormFieldInput.tsx
-import { Box as Box4, Icon, Input, Label as Label3, Text as Text2 } from "@ttoss/ui";
+import { Box as Box4, Icon, Input, Label as Label3, Text } from "@ttoss/ui";
 import { useController as useController3 } from "react-hook-form";
 import React3 from "react";
 import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
@@ -180,7 +180,7 @@ var FormFieldInput = ({
       },
       "aria-disabled": inputProps.disabled,
       htmlFor: id,
-      children: [label, tooltipIcon && /* @__PURE__ */jsx5(Text2, {
+      children: [label, tooltipIcon && /* @__PURE__ */jsx5(Text, {
         sx: {
           marginLeft: "md",
           fontSize: "xs",
@@ -190,7 +190,7 @@ var FormFieldInput = ({
         children: /* @__PURE__ */jsx5(Icon, {
           icon: tooltipIcon
         })
-      }), showCharacterCounter && /* @__PURE__ */jsx5(Text2, {
+      }), showCharacterCounter && /* @__PURE__ */jsx5(Text, {
         sx: {
           marginLeft: "auto",
           fontSize: "xs",

package/dist/index.js

@@ -84,8 +84,8 @@ var import_ui3 = require("@ttoss/ui");
 
 // src/ErrorMessage.tsx
 var import_react_hook_form2 = require("react-hook-form");
-var import_error_message = require("@hookform/error-message");
 var import_ui2 = require("@ttoss/ui");
+var import_error_message = require("@hookform/error-message");
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var ErrorMessage = ({
   name
@@ -98,13 +98,8 @@ var ErrorMessage = ({
   return /* @__PURE__ */(0, import_jsx_runtime2.jsx)(import_error_message.ErrorMessage, {
     errors,
     name,
-    as: /* @__PURE__ */(0, import_jsx_runtime2.jsx)(import_ui2.Text, {
-      variant: "text.error",
-      role: "alert",
-      sx: {
-        fontFamily: "caption",
-        fontSize: "xs"
-      }
+    as: /* @__PURE__ */(0, import_jsx_runtime2.jsx)(import_ui2.HelpText, {
+      negative: true
     })
   });
 };
@@ -157,12 +152,16 @@ var FormFieldCheckbox = ({
       onBlur,
       value,
       ref
+    },
+    formState: {
+      errors
     }
   } = (0, import_react_hook_form4.useController)({
     name,
     defaultValue: false
   });
   const id = `form-field-checkbox-${name}`;
+  const error = !!errors[name]?.message;
   return /* @__PURE__ */(0, import_jsx_runtime4.jsxs)(import_ui4.Box, {
     children: [/* @__PURE__ */(0, import_jsx_runtime4.jsx)(import_ui4.Flex, {
       sx: {
@@ -178,6 +177,7 @@ var FormFieldCheckbox = ({
           onChange,
           onBlur,
           name,
+          "aria-invalid": error ? "true" : "false",
           ...checkboxProps
         }), label]
       })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/forms",
-  "version": "0.14.18",
+  "version": "0.14.20",
   "license": "UNLICENSED",
   "author": "ttoss",
   "contributors": [
@@ -31,7 +31,7 @@
   "devDependencies": {
     "@ttoss/config": "^1.29.2",
     "@ttoss/test-utils": "^1.20.9",
-    "@ttoss/ui": "^1.31.5",
+    "@ttoss/ui": "^1.31.7",
     "@types/jest": "^29.5.0",
     "jest": "^29.5.0",
     "react": "^18.2.0",
@@ -41,5 +41,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "77d124d6e4c2ccd61058c8852789dcd9bc2f527a"
+  "gitHead": "3d2d6ecf2c24eb734b162bfe8d73a7a2886c49f6"
 }

package/src/ErrorMessage.tsx

@@ -1,6 +1,6 @@
 import { FieldName, FieldValues, useFormContext } from 'react-hook-form';
+import { HelpText } from '@ttoss/ui';
 import { ErrorMessage as HookFormErrorMessage } from '@hookform/error-message';
-import { Text } from '@ttoss/ui';
 
 export const ErrorMessage = <TFieldValues extends FieldValues = FieldValues>({
   name,
@@ -15,13 +15,7 @@ export const ErrorMessage = <TFieldValues extends FieldValues = FieldValues>({
     <HookFormErrorMessage
       errors={errors}
       name={name as any}
-      as={
-        <Text
-          variant="text.error"
-          role="alert"
-          sx={{ fontFamily: 'caption', fontSize: 'xs' }}
-        />
-      }
+      as={<HelpText negative />}
     />
   );
 };

package/src/FormFieldCheckbox.tsx

@@ -14,6 +14,7 @@ export const FormFieldCheckbox = <
 } & CheckboxProps) => {
   const {
     field: { onChange, onBlur, value, ref },
+    formState: { errors },
   } = useController<any>({
     name,
     defaultValue: false,
@@ -21,6 +22,8 @@ export const FormFieldCheckbox = <
 
   const id = `form-field-checkbox-${name}`;
 
+  const error = !!errors[name]?.message;
+
   return (
     <Box>
       <Flex sx={{ alignItems: 'center' }}>
@@ -32,6 +35,7 @@ export const FormFieldCheckbox = <
             onChange={onChange}
             onBlur={onBlur}
             name={name}
+            aria-invalid={error ? 'true' : 'false'}
             {...checkboxProps}
           />
           {label}