@ttoss/forms 0.23.7 → 0.24.1

package/README.md

@@ -49,9 +49,82 @@ export const FormComponent = () => {
 
 It exposes all the API from react-hook-form, so you can use all the methods and properties from it. Check the [React Hook Form](https://react-hook-form.com/docs) documentation for more details.
 
-## FormFieldSelect support for Default Value
+## Yup Validation
 
-FormFieldSelect has support for default values, by assigning the first option defined or the value passed to it in the parameter `defaultValue`.
+You can also use yup and all of API from react-hook-form importing `import { yup, useForm } from @ttoss/forms`
+
+```tsx
+const FirstNameForm = () => {
+  const schema = yup.object({
+    firstName: yup.string().required(),
+  });
+
+  const formMethods = useForm({
+    resolver: yupResolver(schema),
+  });
+
+  return (
+    <Form {...formMethods} onSubmit={onSubmit}>
+      <FormField
+        name="firstName"
+        label="First Name"
+        defaultValue={''}
+        render={({ field }) => {
+          return <Input {...field} />;
+        }}
+      />
+      <Button type="submit">Submit</Button>
+    </Form>
+  );
+};
+```
+
+When field is invalid according with schema requirements, it gonna return the default. In this example, for required fields, it gonna be `Field is required`.
+
+You can translate the message or change the generic message by configuring the messages in the json i18n definition. To use this, please, refer to the docs on [React-i18n](https://ttoss.dev/docs/modules/packages/react-i18n/) and [i18n-CLI](https://ttoss.dev/docs/modules/packages/i18n-cli/).
+
+### Custom Error messages
+
+You can, also, pass custom error messages to the validation constraints in schema. It's really recommended that you use i18n pattern to create your custom message.
+
+```tsx
+const ComponentForm = () => {
+  const {
+    intl: { formatMessage },
+  } = useI18n();
+
+  const schema = useMemo(() => {
+    return yup.object({
+      name: yup.string().required(
+        formatMessage({
+          defaultMessage: 'Name must be not null',
+          description: 'Name required constraint',
+        })
+      ),
+      age: yup.number().min(
+        18,
+        formatMessage(
+          {
+            defaultMessage: 'You should be {age} years old or more',
+            description: 'Min Age Constriant message',
+          },
+          { age: 18 }
+        )
+      ),
+    });
+  }, [formatMessage]);
+
+  // ...
+};
+```
+
+## Components
+
+### FormFieldSelect
+
+#### FormFieldSelect support for Default Value
+
+`FormFieldSelect` has support for default values, by assigning the first option defined or the value passed to it in the parameter `defaultValue`.
 
 ```tsx
 const RADIO_OPTIONS = [
@@ -160,74 +233,35 @@ const RenderForm = () => {
 };
 ```
 
-### Yup Validation
+### FormGroup
 
-You can also use yup and all of API from react-hook-form importing `import { yup, useForm } from @ttoss/forms`
+`FormGroup` is a component that groups fields together. It's useful when you need to group fields that are related to each other.
 
 ```tsx
-const FirstNameForm = () => {
-  const schema = yup.object({
-    firstName: yup.string().required(),
-  });
-
-  const formMethods = useForm({
-    resolver: yupResolver(schema),
-  });
+const RenderForm = () => {
+  const formMethods = useForm();
 
   return (
     <Form {...formMethods} onSubmit={onSubmit}>
-      <FormField
-        name="firstName"
-        label="First Name"
-        defaultValue={''}
-        render={({ field }) => {
-          return <Input {...field} />;
-        }}
-      />
+      <FormGroup label="Personal Information" direction="row">
+        <FormField.Input name="firstName" label="First Name" />
+        <FormField.Input name="lastName" label="Last Name" />
+      </FormGroup>
+      <FormGroup label="Address">
+        <FormField.Input name="street" label="Street" />
+        <FormField.Input name="city" label="City" />
+      </FormGroup>
       <Button type="submit">Submit</Button>
     </Form>
   );
 };
 ```
 
-When field is invalid according with schema requirements, it gonna return the default. In this example, for required fields, it gonna be `Field is required`.
-
-You can translate the message or change the generic message by configuring the messages in the json i18n definition. To use this, please, refer to the docs on [React-i18n](https://ttoss.dev/docs/modules/packages/react-i18n/) and [i18n-CLI](https://ttoss.dev/docs/modules/packages/i18n-cli/).
-
-### Custom Error messages
-
-You can, also, pass custom error messages to the validation constraints in schema. It's really recommended that you use i18n pattern to create your custom message.
-
-```tsx
-const ComponentForm = () => {
-  const {
-    intl: { formatMessage },
-  } = useI18n();
-
-  const schema = useMemo(() => {
-    return yup.object({
-      name: yup.string().required(
-        formatMessage({
-          defaultMessage: 'Name must be not null',
-          description: 'Name required constraint',
-        })
-      ),
-      age: yup.number().min(
-        18,
-        formatMessage(
-          {
-            defaultMessage: 'You should be {age} years old or more',
-            description: 'Min Age Constriant message',
-          },
-          { age: 18 }
-        )
-      ),
-    });
-  }, [formatMessage]);
+#### Props
 
-  // ...
-};
-```
+- `title`: The label of the group.
+- `direction`: The direction of the group. It can be `row` or `column`.
+- `name`: The name of the group. It is used to render the group error message.
 
 ## @ttoss/forms/multistep-form
 

package/dist/Brazil/index.js

@@ -51,6 +51,7 @@ var src_exports = {};
 __export(src_exports, {
   Controller: () => import_react_hook_form6.Controller,
   Form: () => Form,
+  FormErrorMessage: () => FormErrorMessage,
   FormField: () => FormField,
   FormFieldCheckbox: () => FormFieldCheckbox,
   FormFieldCreditCardNumber: () => FormFieldCreditCardNumber,
@@ -151,19 +152,16 @@ var Form = ({
   });
 };
 
-// src/FormField.tsx
-var React = __toESM(require("react"));
-
-// src/ErrorMessage.tsx
+// src/FormErrorMessage.tsx
+var import_error_message = require("@hookform/error-message");
 var import_react_hook_form2 = require("react-hook-form");
 var import_react_i18n2 = require("@ttoss/react-i18n");
 var import_ui2 = require("@ttoss/ui");
-var import_error_message = require("@hookform/error-message");
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var isMessageDescriptor = possibleMessageDescriptor => {
   return possibleMessageDescriptor !== void 0 && possibleMessageDescriptor.defaultMessage !== void 0;
 };
-var ErrorMessage = ({
+var FormErrorMessage = ({
   name,
   disabled
 }) => {
@@ -198,6 +196,7 @@ var ErrorMessage = ({
 };
 
 // src/FormField.tsx
+var React = __toESM(require("react"));
 var import_react_hook_form3 = require("react-hook-form");
 var import_ui3 = require("@ttoss/ui");
 var import_jsx_runtime3 = require("react/jsx-runtime");
@@ -242,7 +241,7 @@ var FormField = ({
       ...sx
     },
     css,
-    children: [memoizedRender, /* @__PURE__ */(0, import_jsx_runtime3.jsx)(ErrorMessage, {
+    children: [memoizedRender, /* @__PURE__ */(0, import_jsx_runtime3.jsx)(FormErrorMessage, {
       name
     })]
   });
@@ -268,6 +267,7 @@ var FormFieldCheckbox = ({
     formState: {
       errors
     }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
   } = (0, import_react_hook_form4.useController)({
     name,
     defaultValue: false
@@ -298,7 +298,7 @@ var FormFieldCheckbox = ({
           ...checkboxProps
         }), label]
       })
-    }), /* @__PURE__ */(0, import_jsx_runtime4.jsx)(ErrorMessage, {
+    }), /* @__PURE__ */(0, import_jsx_runtime4.jsx)(FormErrorMessage, {
       name
     })]
   });
@@ -488,6 +488,7 @@ var FormFieldRadio = ({
       value,
       ref
     }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
   } = (0, import_react_hook_form5.useController)({
     name,
     defaultValue: ""
@@ -520,7 +521,7 @@ var FormFieldRadio = ({
           }), option.label]
         }, id);
       })
-    }), /* @__PURE__ */(0, import_jsx_runtime11.jsx)(ErrorMessage, {
+    }), /* @__PURE__ */(0, import_jsx_runtime11.jsx)(FormErrorMessage, {
       name
     })]
   });
@@ -637,6 +638,7 @@ var FormGroupWrapper = ({
   title,
   direction,
   children,
+  name,
   ...boxProps
 }) => {
   const {
@@ -677,6 +679,8 @@ var FormGroupWrapper = ({
     }), /* @__PURE__ */(0, import_jsx_runtime14.jsx)(import_ui12.Flex, {
       sx: childrenContainerSx,
       children
+    }), name && /* @__PURE__ */(0, import_jsx_runtime14.jsx)(FormErrorMessage, {
+      name
     })]
   });
 };

package/dist/MultistepForm/index.js

@@ -88,6 +88,7 @@ var src_exports = {};
 __export(src_exports, {
   Controller: () => import_react_hook_form6.Controller,
   Form: () => Form,
+  FormErrorMessage: () => FormErrorMessage,
   FormField: () => FormField,
   FormFieldCheckbox: () => FormFieldCheckbox,
   FormFieldCreditCardNumber: () => FormFieldCreditCardNumber,
@@ -233,19 +234,16 @@ var Form = ({
   });
 };
 
-// src/FormField.tsx
-var React = __toESM(require("react"));
-
-// src/ErrorMessage.tsx
+// src/FormErrorMessage.tsx
+var import_error_message = require("@hookform/error-message");
 var import_react_hook_form2 = require("react-hook-form");
 var import_react_i18n2 = require("@ttoss/react-i18n");
 var import_ui4 = require("@ttoss/ui");
-var import_error_message = require("@hookform/error-message");
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var isMessageDescriptor = possibleMessageDescriptor => {
   return possibleMessageDescriptor !== void 0 && possibleMessageDescriptor.defaultMessage !== void 0;
 };
-var ErrorMessage = ({
+var FormErrorMessage = ({
   name,
   disabled
 }) => {
@@ -280,6 +278,7 @@ var ErrorMessage = ({
 };
 
 // src/FormField.tsx
+var React = __toESM(require("react"));
 var import_react_hook_form3 = require("react-hook-form");
 var import_ui5 = require("@ttoss/ui");
 var import_jsx_runtime5 = require("react/jsx-runtime");
@@ -324,7 +323,7 @@ var FormField = ({
       ...sx
     },
     css,
-    children: [memoizedRender, /* @__PURE__ */(0, import_jsx_runtime5.jsx)(ErrorMessage, {
+    children: [memoizedRender, /* @__PURE__ */(0, import_jsx_runtime5.jsx)(FormErrorMessage, {
       name
     })]
   });
@@ -350,6 +349,7 @@ var FormFieldCheckbox = ({
     formState: {
       errors
     }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
   } = (0, import_react_hook_form4.useController)({
     name,
     defaultValue: false
@@ -380,7 +380,7 @@ var FormFieldCheckbox = ({
           ...checkboxProps
         }), label]
       })
-    }), /* @__PURE__ */(0, import_jsx_runtime6.jsx)(ErrorMessage, {
+    }), /* @__PURE__ */(0, import_jsx_runtime6.jsx)(FormErrorMessage, {
       name
     })]
   });
@@ -570,6 +570,7 @@ var FormFieldRadio = ({
       value,
       ref
     }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
   } = (0, import_react_hook_form5.useController)({
     name,
     defaultValue: ""
@@ -602,7 +603,7 @@ var FormFieldRadio = ({
           }), option.label]
         }, id);
       })
-    }), /* @__PURE__ */(0, import_jsx_runtime13.jsx)(ErrorMessage, {
+    }), /* @__PURE__ */(0, import_jsx_runtime13.jsx)(FormErrorMessage, {
       name
     })]
   });
@@ -719,6 +720,7 @@ var FormGroupWrapper = ({
   title,
   direction,
   children,
+  name,
   ...boxProps
 }) => {
   const {
@@ -759,6 +761,8 @@ var FormGroupWrapper = ({
     }), /* @__PURE__ */(0, import_jsx_runtime16.jsx)(import_ui14.Flex, {
       sx: childrenContainerSx,
       children
+    }), name && /* @__PURE__ */(0, import_jsx_runtime16.jsx)(FormErrorMessage, {
+      name
     })]
   });
 };

package/dist/esm/Brazil/index.js

@@ -1,5 +1,5 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
-import { FormField, FormFieldCNPJ, FormFieldPatternFormat, isCnpjValid } from "../chunk-KCGLFWPY.js";
+import { FormField, FormFieldCNPJ, FormFieldPatternFormat, isCnpjValid } from "../chunk-CDQJBSC2.js";
 
 // src/Brazil/FormFieldPhone.tsx
 import { Input } from "@ttoss/ui";

package/dist/esm/MultistepForm/index.js

@@ -1,5 +1,5 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
-import { Form, __publicField, useForm, yupResolver } from "../chunk-KCGLFWPY.js";
+import { Form, __publicField, useForm, yupResolver } from "../chunk-CDQJBSC2.js";
 
 // src/MultistepForm/MultistepForm.tsx
 import * as React3 from "react";

package/dist/esm/{chunk-KCGLFWPY.js → chunk-CDQJBSC2.js}

@@ -178,19 +178,16 @@ var Form = ({
   });
 };
 
-// src/FormField.tsx
-import * as React from "react";
-
-// src/ErrorMessage.tsx
+// src/FormErrorMessage.tsx
+import { ErrorMessage } from "@hookform/error-message";
 import { useFormContext } from "react-hook-form";
 import { FormattedMessage } from "@ttoss/react-i18n";
 import { HelpText } from "@ttoss/ui";
-import { ErrorMessage as HookformErrorMessage } from "@hookform/error-message";
 import { jsx as jsx3 } from "react/jsx-runtime";
 var isMessageDescriptor = possibleMessageDescriptor => {
   return possibleMessageDescriptor !== void 0 && possibleMessageDescriptor.defaultMessage !== void 0;
 };
-var ErrorMessage = ({
+var FormErrorMessage = ({
   name,
   disabled
 }) => {
@@ -199,7 +196,7 @@ var ErrorMessage = ({
       errors
     }
   } = useFormContext();
-  return /* @__PURE__ */jsx3(HookformErrorMessage, {
+  return /* @__PURE__ */jsx3(ErrorMessage, {
     name,
     errors,
     render: ({
@@ -225,6 +222,7 @@ var ErrorMessage = ({
 };
 
 // src/FormField.tsx
+import * as React from "react";
 import { useController } from "react-hook-form";
 import { Flex, Label } from "@ttoss/ui";
 import { Fragment, jsx as jsx4, jsxs } from "react/jsx-runtime";
@@ -269,7 +267,7 @@ var FormField = ({
       ...sx
     },
     css,
-    children: [memoizedRender, /* @__PURE__ */jsx4(ErrorMessage, {
+    children: [memoizedRender, /* @__PURE__ */jsx4(FormErrorMessage, {
       name
     })]
   });
@@ -295,6 +293,7 @@ var FormFieldCheckbox = ({
     formState: {
       errors
     }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
   } = useController2({
     name,
     defaultValue: false
@@ -325,7 +324,7 @@ var FormFieldCheckbox = ({
           ...checkboxProps
         }), label]
       })
-    }), /* @__PURE__ */jsx5(ErrorMessage, {
+    }), /* @__PURE__ */jsx5(FormErrorMessage, {
       name
     })]
   });
@@ -515,6 +514,7 @@ var FormFieldRadio = ({
       value,
       ref
     }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
   } = useController3({
     name,
     defaultValue: ""
@@ -547,7 +547,7 @@ var FormFieldRadio = ({
           }), option.label]
         }, id);
       })
-    }), /* @__PURE__ */jsx12(ErrorMessage, {
+    }), /* @__PURE__ */jsx12(FormErrorMessage, {
       name
     })]
   });
@@ -664,6 +664,7 @@ var FormGroupWrapper = ({
   title,
   direction,
   children,
+  name,
   ...boxProps
 }) => {
   const {
@@ -704,6 +705,8 @@ var FormGroupWrapper = ({
     }), /* @__PURE__ */jsx15(Flex4, {
       sx: childrenContainerSx,
       children
+    }), name && /* @__PURE__ */jsx15(FormErrorMessage, {
+      name
     })]
   });
 };
@@ -729,4 +732,4 @@ var FormGroup = props => {
 // src/index.ts
 import { useForm, useFormContext as useFormContext2, useWatch, useFieldArray, useController as useController4, useFormState, Controller, FormProvider as FormProvider2 } from "react-hook-form";
 export * from "react-hook-form";
-export { __publicField, isCnpjValid, FormFieldCNPJ, yup2 as yup, Form, FormField, FormFieldCheckbox, FormFieldPatternFormat, FormFieldCreditCardNumber, FormFieldNumericFormat, FormFieldCurrencyInput, FormFieldInput, FormFieldPassword, FormFieldRadio, FormFieldSelect, FormFieldTextarea, useFormGroup, FormGroup, yupResolver, useForm, useFormContext2 as useFormContext, useWatch, useFieldArray, useController4 as useController, useFormState, Controller, FormProvider2 as FormProvider };
+export { __publicField, isCnpjValid, FormFieldCNPJ, yup2 as yup, Form, FormErrorMessage, FormField, FormFieldCheckbox, FormFieldPatternFormat, FormFieldCreditCardNumber, FormFieldNumericFormat, FormFieldCurrencyInput, FormFieldInput, FormFieldPassword, FormFieldRadio, FormFieldSelect, FormFieldTextarea, useFormGroup, FormGroup, yupResolver, useForm, useFormContext2 as useFormContext, useWatch, useFieldArray, useController4 as useController, useFormState, Controller, FormProvider2 as FormProvider };

package/dist/esm/index.js

@@ -1,3 +1,3 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
-import { Controller, Form, FormField, FormFieldCheckbox, FormFieldCreditCardNumber, FormFieldCurrencyInput, FormFieldInput, FormFieldNumericFormat, FormFieldPassword, FormFieldPatternFormat, FormFieldRadio, FormFieldSelect, FormFieldTextarea, FormGroup, FormProvider, useController, useFieldArray, useForm, useFormContext, useFormGroup, useFormState, useWatch, yup, yupResolver } from "./chunk-KCGLFWPY.js";
-export { Controller, Form, FormField, FormFieldCheckbox, FormFieldCreditCardNumber, FormFieldCurrencyInput, FormFieldInput, FormFieldNumericFormat, FormFieldPassword, FormFieldPatternFormat, FormFieldRadio, FormFieldSelect, FormFieldTextarea, FormGroup, FormProvider, useController, useFieldArray, useForm, useFormContext, useFormGroup, useFormState, useWatch, yup, yupResolver };
+import { Controller, Form, FormErrorMessage, FormField, FormFieldCheckbox, FormFieldCreditCardNumber, FormFieldCurrencyInput, FormFieldInput, FormFieldNumericFormat, FormFieldPassword, FormFieldPatternFormat, FormFieldRadio, FormFieldSelect, FormFieldTextarea, FormGroup, FormProvider, useController, useFieldArray, useForm, useFormContext, useFormGroup, useFormState, useWatch, yup, yupResolver } from "./chunk-CDQJBSC2.js";
+export { Controller, Form, FormErrorMessage, FormField, FormFieldCheckbox, FormFieldCreditCardNumber, FormFieldCurrencyInput, FormFieldInput, FormFieldNumericFormat, FormFieldPassword, FormFieldPatternFormat, FormFieldRadio, FormFieldSelect, FormFieldTextarea, FormGroup, FormProvider, useController, useFieldArray, useForm, useFormContext, useFormGroup, useFormState, useWatch, yup, yupResolver };

package/dist/index.d.mts

@@ -5,7 +5,7 @@ export { yup };
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { BoxProps, SxProp, CheckboxProps, InputProps, InputPasswordProps, RadioProps, SelectProps, TextareaProps } from '@ttoss/ui';
-import { FieldValues, FormProviderProps, FieldPath, UseControllerReturn, FieldPathValue } from 'react-hook-form';
+import { FieldValues, FormProviderProps, FieldName, FieldPath, UseControllerReturn, FieldPathValue } from 'react-hook-form';
 export * from 'react-hook-form';
 export { Controller, FormProvider, useController, useFieldArray, useForm, useFormContext, useFormState, useWatch } from 'react-hook-form';
 import { F as FormFieldPatternFormatProps } from './FormFieldPatternFormat-CkcL14ho.mjs';
@@ -18,6 +18,11 @@ declare const Form: <TFieldValues extends FieldValues = FieldValues>({ children,
     sx?: BoxProps['sx'];
 } & FormProviderProps<TFieldValues>) => react_jsx_runtime.JSX.Element;
 
+declare const FormErrorMessage: <TFieldValues extends FieldValues = FieldValues>({ name, disabled, }: {
+    name: FieldName<TFieldValues>;
+    disabled?: boolean;
+}) => react_jsx_runtime.JSX.Element;
+
 type FormFieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = {
     label?: string;
     id?: string;
@@ -93,9 +98,10 @@ declare const useFormGroup: () => {
     levelsLength: number;
 };
 type FormGroupProps = {
+    name?: string;
     title?: string;
     direction?: 'column' | 'row';
 } & BoxProps;
 declare const FormGroup: (props: FormGroupProps) => react_jsx_runtime.JSX.Element;
 
-export { Form, FormField, FormFieldCheckbox, FormFieldCreditCardNumber, FormFieldCurrencyInput, FormFieldInput, FormFieldNumericFormat, FormFieldPassword, FormFieldRadio, FormFieldSelect, FormFieldTextarea, FormGroup, useFormGroup };
+export { Form, FormErrorMessage, FormField, FormFieldCheckbox, FormFieldCreditCardNumber, FormFieldCurrencyInput, FormFieldInput, FormFieldNumericFormat, FormFieldPassword, FormFieldRadio, FormFieldSelect, FormFieldTextarea, FormGroup, useFormGroup };

package/dist/index.d.ts

@@ -5,7 +5,7 @@ export { yup };
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { BoxProps, SxProp, CheckboxProps, InputProps, InputPasswordProps, RadioProps, SelectProps, TextareaProps } from '@ttoss/ui';
-import { FieldValues, FormProviderProps, FieldPath, UseControllerReturn, FieldPathValue } from 'react-hook-form';
+import { FieldValues, FormProviderProps, FieldName, FieldPath, UseControllerReturn, FieldPathValue } from 'react-hook-form';
 export * from 'react-hook-form';
 export { Controller, FormProvider, useController, useFieldArray, useForm, useFormContext, useFormState, useWatch } from 'react-hook-form';
 import { F as FormFieldPatternFormatProps } from './FormFieldPatternFormat-CkcL14ho.js';
@@ -18,6 +18,11 @@ declare const Form: <TFieldValues extends FieldValues = FieldValues>({ children,
     sx?: BoxProps['sx'];
 } & FormProviderProps<TFieldValues>) => react_jsx_runtime.JSX.Element;
 
+declare const FormErrorMessage: <TFieldValues extends FieldValues = FieldValues>({ name, disabled, }: {
+    name: FieldName<TFieldValues>;
+    disabled?: boolean;
+}) => react_jsx_runtime.JSX.Element;
+
 type FormFieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = {
     label?: string;
     id?: string;
@@ -93,9 +98,10 @@ declare const useFormGroup: () => {
     levelsLength: number;
 };
 type FormGroupProps = {
+    name?: string;
     title?: string;
     direction?: 'column' | 'row';
 } & BoxProps;
 declare const FormGroup: (props: FormGroupProps) => react_jsx_runtime.JSX.Element;
 
-export { Form, FormField, FormFieldCheckbox, FormFieldCreditCardNumber, FormFieldCurrencyInput, FormFieldInput, FormFieldNumericFormat, FormFieldPassword, FormFieldRadio, FormFieldSelect, FormFieldTextarea, FormGroup, useFormGroup };
+export { Form, FormErrorMessage, FormField, FormFieldCheckbox, FormFieldCreditCardNumber, FormFieldCurrencyInput, FormFieldInput, FormFieldNumericFormat, FormFieldPassword, FormFieldRadio, FormFieldSelect, FormFieldTextarea, FormGroup, useFormGroup };

package/dist/index.js

@@ -41,6 +41,7 @@ var src_exports = {};
 __export(src_exports, {
   Controller: () => import_react_hook_form6.Controller,
   Form: () => Form,
+  FormErrorMessage: () => FormErrorMessage,
   FormField: () => FormField,
   FormFieldCheckbox: () => FormFieldCheckbox,
   FormFieldCreditCardNumber: () => FormFieldCreditCardNumber,
@@ -187,19 +188,16 @@ var Form = ({
   });
 };
 
-// src/FormField.tsx
-var React = __toESM(require("react"));
-
-// src/ErrorMessage.tsx
+// src/FormErrorMessage.tsx
+var import_error_message = require("@hookform/error-message");
 var import_react_hook_form2 = require("react-hook-form");
 var import_react_i18n2 = require("@ttoss/react-i18n");
 var import_ui3 = require("@ttoss/ui");
-var import_error_message = require("@hookform/error-message");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var isMessageDescriptor = possibleMessageDescriptor => {
   return possibleMessageDescriptor !== void 0 && possibleMessageDescriptor.defaultMessage !== void 0;
 };
-var ErrorMessage = ({
+var FormErrorMessage = ({
   name,
   disabled
 }) => {
@@ -234,6 +232,7 @@ var ErrorMessage = ({
 };
 
 // src/FormField.tsx
+var React = __toESM(require("react"));
 var import_react_hook_form3 = require("react-hook-form");
 var import_ui4 = require("@ttoss/ui");
 var import_jsx_runtime4 = require("react/jsx-runtime");
@@ -278,7 +277,7 @@ var FormField = ({
       ...sx
     },
     css,
-    children: [memoizedRender, /* @__PURE__ */(0, import_jsx_runtime4.jsx)(ErrorMessage, {
+    children: [memoizedRender, /* @__PURE__ */(0, import_jsx_runtime4.jsx)(FormErrorMessage, {
       name
     })]
   });
@@ -304,6 +303,7 @@ var FormFieldCheckbox = ({
     formState: {
       errors
     }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
   } = (0, import_react_hook_form4.useController)({
     name,
     defaultValue: false
@@ -334,7 +334,7 @@ var FormFieldCheckbox = ({
           ...checkboxProps
         }), label]
       })
-    }), /* @__PURE__ */(0, import_jsx_runtime5.jsx)(ErrorMessage, {
+    }), /* @__PURE__ */(0, import_jsx_runtime5.jsx)(FormErrorMessage, {
       name
     })]
   });
@@ -524,6 +524,7 @@ var FormFieldRadio = ({
       value,
       ref
     }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
   } = (0, import_react_hook_form5.useController)({
     name,
     defaultValue: ""
@@ -556,7 +557,7 @@ var FormFieldRadio = ({
           }), option.label]
         }, id);
       })
-    }), /* @__PURE__ */(0, import_jsx_runtime12.jsx)(ErrorMessage, {
+    }), /* @__PURE__ */(0, import_jsx_runtime12.jsx)(FormErrorMessage, {
       name
     })]
   });
@@ -673,6 +674,7 @@ var FormGroupWrapper = ({
   title,
   direction,
   children,
+  name,
   ...boxProps
 }) => {
   const {
@@ -713,6 +715,8 @@ var FormGroupWrapper = ({
     }), /* @__PURE__ */(0, import_jsx_runtime15.jsx)(import_ui13.Flex, {
       sx: childrenContainerSx,
       children
+    }), name && /* @__PURE__ */(0, import_jsx_runtime15.jsx)(FormErrorMessage, {
+      name
     })]
   });
 };
@@ -742,6 +746,7 @@ __reExport(src_exports, require("react-hook-form"), module.exports);
 0 && (module.exports = {
   Controller,
   Form,
+  FormErrorMessage,
   FormField,
   FormFieldCheckbox,
   FormFieldCreditCardNumber,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/forms",
-  "version": "0.23.7",
+  "version": "0.24.1",
   "author": "ttoss",
   "contributors": [
     "Pedro Arantes <pedro@arantespp.com> (https://arantespp.com/contact)"
@@ -35,14 +35,14 @@
   "dependencies": {
     "@hookform/error-message": "^2.0.1",
     "@hookform/resolvers": "^3.3.4",
-    "react-hook-form": "^7.51.2",
+    "react-hook-form": "^7.51.4",
     "react-number-format": "^5.3.4",
     "yup": "^1.4.0"
   },
   "peerDependencies": {
     "react": ">=16.8.0",
-    "@ttoss/react-i18n": "^1.26.7",
-    "@ttoss/ui": "^4.1.9"
+    "@ttoss/ui": "^4.1.9",
+    "@ttoss/react-i18n": "^1.26.7"
   },
   "devDependencies": {
     "@types/jest": "^29.5.12",
@@ -54,10 +54,10 @@
     "tsup": "^8.0.2",
     "yup": "^1.4.0",
     "@ttoss/config": "^1.32.3",
-    "@ttoss/react-i18n": "^1.26.7",
     "@ttoss/i18n-cli": "^0.7.11",
-    "@ttoss/react-icons": "^0.3.6",
     "@ttoss/test-utils": "^2.1.6",
+    "@ttoss/react-icons": "^0.3.6",
+    "@ttoss/react-i18n": "^1.26.7",
     "@ttoss/ui": "^4.1.9"
   },
   "publishConfig": {

package/src/{ErrorMessage.tsx → FormErrorMessage.tsx}

@@ -1,4 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
+import { ErrorMessage } from '@hookform/error-message';
 import {
   FieldError,
   FieldName,
@@ -7,7 +8,6 @@ import {
 } from 'react-hook-form';
 import { FormattedMessage, MessageDescriptor } from '@ttoss/react-i18n';
 import { HelpText } from '@ttoss/ui';
-import { ErrorMessage as HookformErrorMessage } from '@hookform/error-message';
 
 type ModifiedDescriptor = MessageDescriptor & { values?: any };
 
@@ -21,7 +21,9 @@ const isMessageDescriptor = (
   );
 };
 
-export const ErrorMessage = <TFieldValues extends FieldValues = FieldValues>({
+export const FormErrorMessage = <
+  TFieldValues extends FieldValues = FieldValues,
+>({
   name,
   disabled,
 }: {
@@ -33,7 +35,7 @@ export const ErrorMessage = <TFieldValues extends FieldValues = FieldValues>({
   } = useFormContext<TFieldValues>();
 
   return (
-    <HookformErrorMessage
+    <ErrorMessage
       name={name as any}
       errors={errors}
       render={({ message }: { message: FieldError | string }) => {

package/src/FormField.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { ErrorMessage } from './ErrorMessage';
 import {
   FieldPath,
   FieldPathValue,
@@ -8,6 +7,7 @@ import {
   useController,
 } from 'react-hook-form';
 import { Flex, Label, type SxProp } from '@ttoss/ui';
+import { FormErrorMessage } from './FormErrorMessage';
 
 export type FormFieldProps<
   TFieldValues extends FieldValues = FieldValues,
@@ -80,7 +80,7 @@ export const FormField = <
       css={css}
     >
       {memoizedRender}
-      <ErrorMessage name={name} />
+      <FormErrorMessage name={name} />
     </Flex>
   );
 };

package/src/FormFieldCheckbox.tsx

@@ -1,9 +1,9 @@
 import { Checkbox, type CheckboxProps, Flex, Label } from '@ttoss/ui';
-import { ErrorMessage } from './ErrorMessage';
 import { FieldPath, FieldValues, useController } from 'react-hook-form';
+import { FormErrorMessage } from './FormErrorMessage';
 
 export const FormFieldCheckbox = <
-  TFieldValues extends FieldValues = FieldValues
+  TFieldValues extends FieldValues = FieldValues,
 >({
   label,
   name,
@@ -16,6 +16,7 @@ export const FormFieldCheckbox = <
   const {
     field: { onChange, onBlur, value, ref },
     formState: { errors },
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
   } = useController<any>({
     name,
     defaultValue: false,
@@ -42,7 +43,7 @@ export const FormFieldCheckbox = <
           {label}
         </Label>
       </Flex>
-      <ErrorMessage name={name} />
+      <FormErrorMessage name={name} />
     </Flex>
   );
 };

package/src/FormFieldRadio.tsx

@@ -1,6 +1,6 @@
 import { Box, Flex, Label, Radio, type RadioProps } from '@ttoss/ui';
-import { ErrorMessage } from './ErrorMessage';
 import { FieldPath, FieldValues, useController } from 'react-hook-form';
+import { FormErrorMessage } from './FormErrorMessage';
 
 type FormRadioOption = {
   value: string | number;
@@ -20,6 +20,7 @@ export const FormFieldRadio = <TFieldValues extends FieldValues = FieldValues>({
 } & RadioProps) => {
   const {
     field: { onChange, onBlur, value, ref },
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
   } = useController<any>({
     name,
     defaultValue: '',
@@ -50,7 +51,7 @@ export const FormFieldRadio = <TFieldValues extends FieldValues = FieldValues>({
         })}
       </Box>
 
-      <ErrorMessage name={name} />
+      <FormErrorMessage name={name} />
     </Flex>
   );
 };

package/src/FormGroup.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { Box, BoxProps, Flex, FlexProps, Text } from '@ttoss/ui';
+import { FormErrorMessage } from './FormErrorMessage';
 
 type FormGroupLevelsManagerContextType = {
   levelsLength: number;
@@ -56,6 +57,7 @@ export const useFormGroup = () => {
 };
 
 type FormGroupProps = {
+  name?: string;
   title?: string;
   direction?: 'column' | 'row';
 } & BoxProps;
@@ -64,6 +66,7 @@ const FormGroupWrapper = ({
   title,
   direction,
   children,
+  name,
   ...boxProps
 }: FormGroupProps) => {
   const { level } = useFormGroup();
@@ -109,6 +112,7 @@ const FormGroupWrapper = ({
         </Box>
       )}
       <Flex sx={childrenContainerSx}>{children}</Flex>
+      {name && <FormErrorMessage name={name} />}
     </Box>
   );
 };

package/src/index.ts

@@ -2,6 +2,7 @@ export { yupResolver } from '@hookform/resolvers/yup';
 export { yup } from './yup/yup';
 
 export { Form } from './Form';
+export { FormErrorMessage } from './FormErrorMessage';
 export { FormField } from './FormField';
 export { FormFieldCheckbox } from './FormFieldCheckbox';
 export { FormFieldCreditCardNumber } from './FormFieldCreditCardNumber';