@ttoss/forms 0.23.7 → 0.24.0

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

@@ -50,6 +50,7 @@ module.exports = __toCommonJS(Brazil_exports);
 var src_exports = {};
 __export(src_exports, {
   Controller: () => import_react_hook_form6.Controller,
+  ErrorMessage: () => ErrorMessage,
   Form: () => Form,
   FormField: () => FormField,
   FormFieldCheckbox: () => FormFieldCheckbox,
@@ -127,39 +128,12 @@ yup.addMethod(yup.string, "cnpj", function () {
 // src/yup/yup.ts
 var yup2 = __toESM(require("yup"));
 
-// src/Form.tsx
-var import_ui = require("@ttoss/ui");
-var import_react_hook_form = require("react-hook-form");
-var import_jsx_runtime = require("react/jsx-runtime");
-var Form = ({
-  children,
-  onSubmit,
-  sx,
-  ...formMethods
-}) => {
-  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react_hook_form.FormProvider, {
-    ...formMethods,
-    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ui.Box, {
-      as: "form",
-      variant: "forms.form",
-      onSubmit: formMethods.handleSubmit(data => {
-        return onSubmit?.(data);
-      }),
-      sx,
-      children
-    })
-  });
-};
-
-// src/FormField.tsx
-var React = __toESM(require("react"));
-
 // src/ErrorMessage.tsx
-var import_react_hook_form2 = require("react-hook-form");
+var import_react_hook_form = require("react-hook-form");
 var import_react_i18n2 = require("@ttoss/react-i18n");
-var import_ui2 = require("@ttoss/ui");
+var import_ui = require("@ttoss/ui");
 var import_error_message = require("@hookform/error-message");
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_jsx_runtime = require("react/jsx-runtime");
 var isMessageDescriptor = possibleMessageDescriptor => {
   return possibleMessageDescriptor !== void 0 && possibleMessageDescriptor.defaultMessage !== void 0;
 };
@@ -171,14 +145,14 @@ var ErrorMessage = ({
     formState: {
       errors
     }
-  } = (0, import_react_hook_form2.useFormContext)();
-  return /* @__PURE__ */(0, import_jsx_runtime2.jsx)(import_error_message.ErrorMessage, {
+  } = (0, import_react_hook_form.useFormContext)();
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_error_message.ErrorMessage, {
     name,
     errors,
     render: ({
       message
     }) => {
-      return /* @__PURE__ */(0, import_jsx_runtime2.jsx)(import_ui2.HelpText, {
+      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ui.HelpText, {
         negative: true,
         disabled,
         children: (() => {
@@ -186,7 +160,7 @@ var ErrorMessage = ({
             return message;
           }
           if (isMessageDescriptor(message)) {
-            return /* @__PURE__ */(0, import_jsx_runtime2.jsx)(import_react_i18n2.FormattedMessage, {
+            return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react_i18n2.FormattedMessage, {
               ...message
             });
           }
@@ -197,7 +171,32 @@ var ErrorMessage = ({
   });
 };
 
+// src/Form.tsx
+var import_ui2 = require("@ttoss/ui");
+var import_react_hook_form2 = require("react-hook-form");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var Form = ({
+  children,
+  onSubmit,
+  sx,
+  ...formMethods
+}) => {
+  return /* @__PURE__ */(0, import_jsx_runtime2.jsx)(import_react_hook_form2.FormProvider, {
+    ...formMethods,
+    children: /* @__PURE__ */(0, import_jsx_runtime2.jsx)(import_ui2.Box, {
+      as: "form",
+      variant: "forms.form",
+      onSubmit: formMethods.handleSubmit(data => {
+        return onSubmit?.(data);
+      }),
+      sx,
+      children
+    })
+  });
+};
+
 // 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");
@@ -637,6 +636,7 @@ var FormGroupWrapper = ({
   title,
   direction,
   children,
+  name,
   ...boxProps
 }) => {
   const {
@@ -677,6 +677,8 @@ var FormGroupWrapper = ({
     }), /* @__PURE__ */(0, import_jsx_runtime14.jsx)(import_ui12.Flex, {
       sx: childrenContainerSx,
       children
+    }), name && /* @__PURE__ */(0, import_jsx_runtime14.jsx)(ErrorMessage, {
+      name
     })]
   });
 };

package/dist/MultistepForm/index.js

@@ -87,6 +87,7 @@ var import_ui17 = require("@ttoss/ui");
 var src_exports = {};
 __export(src_exports, {
   Controller: () => import_react_hook_form6.Controller,
+  ErrorMessage: () => ErrorMessage,
   Form: () => Form,
   FormField: () => FormField,
   FormFieldCheckbox: () => FormFieldCheckbox,
@@ -209,39 +210,12 @@ yup.addMethod(yup.string, "cnpj", function () {
 // src/yup/yup.ts
 var yup2 = __toESM(require("yup"));
 
-// src/Form.tsx
-var import_ui3 = require("@ttoss/ui");
-var import_react_hook_form = require("react-hook-form");
-var import_jsx_runtime3 = require("react/jsx-runtime");
-var Form = ({
-  children,
-  onSubmit,
-  sx,
-  ...formMethods
-}) => {
-  return /* @__PURE__ */(0, import_jsx_runtime3.jsx)(import_react_hook_form.FormProvider, {
-    ...formMethods,
-    children: /* @__PURE__ */(0, import_jsx_runtime3.jsx)(import_ui3.Box, {
-      as: "form",
-      variant: "forms.form",
-      onSubmit: formMethods.handleSubmit(data => {
-        return onSubmit?.(data);
-      }),
-      sx,
-      children
-    })
-  });
-};
-
-// src/FormField.tsx
-var React = __toESM(require("react"));
-
 // src/ErrorMessage.tsx
-var import_react_hook_form2 = require("react-hook-form");
+var import_react_hook_form = require("react-hook-form");
 var import_react_i18n2 = require("@ttoss/react-i18n");
-var import_ui4 = require("@ttoss/ui");
+var import_ui3 = require("@ttoss/ui");
 var import_error_message = require("@hookform/error-message");
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 var isMessageDescriptor = possibleMessageDescriptor => {
   return possibleMessageDescriptor !== void 0 && possibleMessageDescriptor.defaultMessage !== void 0;
 };
@@ -253,14 +227,14 @@ var ErrorMessage = ({
     formState: {
       errors
     }
-  } = (0, import_react_hook_form2.useFormContext)();
-  return /* @__PURE__ */(0, import_jsx_runtime4.jsx)(import_error_message.ErrorMessage, {
+  } = (0, import_react_hook_form.useFormContext)();
+  return /* @__PURE__ */(0, import_jsx_runtime3.jsx)(import_error_message.ErrorMessage, {
     name,
     errors,
     render: ({
       message
     }) => {
-      return /* @__PURE__ */(0, import_jsx_runtime4.jsx)(import_ui4.HelpText, {
+      return /* @__PURE__ */(0, import_jsx_runtime3.jsx)(import_ui3.HelpText, {
         negative: true,
         disabled,
         children: (() => {
@@ -268,7 +242,7 @@ var ErrorMessage = ({
             return message;
           }
           if (isMessageDescriptor(message)) {
-            return /* @__PURE__ */(0, import_jsx_runtime4.jsx)(import_react_i18n2.FormattedMessage, {
+            return /* @__PURE__ */(0, import_jsx_runtime3.jsx)(import_react_i18n2.FormattedMessage, {
               ...message
             });
           }
@@ -279,7 +253,32 @@ var ErrorMessage = ({
   });
 };
 
+// src/Form.tsx
+var import_ui4 = require("@ttoss/ui");
+var import_react_hook_form2 = require("react-hook-form");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var Form = ({
+  children,
+  onSubmit,
+  sx,
+  ...formMethods
+}) => {
+  return /* @__PURE__ */(0, import_jsx_runtime4.jsx)(import_react_hook_form2.FormProvider, {
+    ...formMethods,
+    children: /* @__PURE__ */(0, import_jsx_runtime4.jsx)(import_ui4.Box, {
+      as: "form",
+      variant: "forms.form",
+      onSubmit: formMethods.handleSubmit(data => {
+        return onSubmit?.(data);
+      }),
+      sx,
+      children
+    })
+  });
+};
+
 // 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");
@@ -719,6 +718,7 @@ var FormGroupWrapper = ({
   title,
   direction,
   children,
+  name,
   ...boxProps
 }) => {
   const {
@@ -759,6 +759,8 @@ var FormGroupWrapper = ({
     }), /* @__PURE__ */(0, import_jsx_runtime16.jsx)(import_ui14.Flex, {
       sx: childrenContainerSx,
       children
+    }), name && /* @__PURE__ */(0, import_jsx_runtime16.jsx)(ErrorMessage, {
+      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-FGWZI374.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-FGWZI374.js";
 
 // src/MultistepForm/MultistepForm.tsx
 import * as React3 from "react";

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

@@ -154,39 +154,12 @@ yup.addMethod(yup.string, "cnpj", function () {
 // src/yup/yup.ts
 import * as yup2 from "yup";
 
-// src/Form.tsx
-import { Box } from "@ttoss/ui";
-import { FormProvider } from "react-hook-form";
-import { jsx as jsx2 } from "react/jsx-runtime";
-var Form = ({
-  children,
-  onSubmit,
-  sx,
-  ...formMethods
-}) => {
-  return /* @__PURE__ */jsx2(FormProvider, {
-    ...formMethods,
-    children: /* @__PURE__ */jsx2(Box, {
-      as: "form",
-      variant: "forms.form",
-      onSubmit: formMethods.handleSubmit(data => {
-        return onSubmit?.(data);
-      }),
-      sx,
-      children
-    })
-  });
-};
-
-// src/FormField.tsx
-import * as React from "react";
-
 // src/ErrorMessage.tsx
 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";
+import { jsx as jsx2 } from "react/jsx-runtime";
 var isMessageDescriptor = possibleMessageDescriptor => {
   return possibleMessageDescriptor !== void 0 && possibleMessageDescriptor.defaultMessage !== void 0;
 };
@@ -199,13 +172,13 @@ var ErrorMessage = ({
       errors
     }
   } = useFormContext();
-  return /* @__PURE__ */jsx3(HookformErrorMessage, {
+  return /* @__PURE__ */jsx2(HookformErrorMessage, {
     name,
     errors,
     render: ({
       message
     }) => {
-      return /* @__PURE__ */jsx3(HelpText, {
+      return /* @__PURE__ */jsx2(HelpText, {
         negative: true,
         disabled,
         children: (() => {
@@ -213,7 +186,7 @@ var ErrorMessage = ({
             return message;
           }
           if (isMessageDescriptor(message)) {
-            return /* @__PURE__ */jsx3(FormattedMessage, {
+            return /* @__PURE__ */jsx2(FormattedMessage, {
               ...message
             });
           }
@@ -224,7 +197,32 @@ var ErrorMessage = ({
   });
 };
 
+// src/Form.tsx
+import { Box } from "@ttoss/ui";
+import { FormProvider } from "react-hook-form";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var Form = ({
+  children,
+  onSubmit,
+  sx,
+  ...formMethods
+}) => {
+  return /* @__PURE__ */jsx3(FormProvider, {
+    ...formMethods,
+    children: /* @__PURE__ */jsx3(Box, {
+      as: "form",
+      variant: "forms.form",
+      onSubmit: formMethods.handleSubmit(data => {
+        return onSubmit?.(data);
+      }),
+      sx,
+      children
+    })
+  });
+};
+
 // 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";
@@ -664,6 +662,7 @@ var FormGroupWrapper = ({
   title,
   direction,
   children,
+  name,
   ...boxProps
 }) => {
   const {
@@ -704,6 +703,8 @@ var FormGroupWrapper = ({
     }), /* @__PURE__ */jsx15(Flex4, {
       sx: childrenContainerSx,
       children
+    }), name && /* @__PURE__ */jsx15(ErrorMessage, {
+      name
     })]
   });
 };
@@ -729,4 +730,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, ErrorMessage, 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 };

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, ErrorMessage, 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-FGWZI374.js";
+export { Controller, ErrorMessage, Form, 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

@@ -3,15 +3,20 @@ import './typings.d-HZBqJJjn.mjs';
 import * as yup from 'yup';
 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, FieldName, FormProviderProps, 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 * as React from 'react';
+import { BoxProps, SxProp, CheckboxProps, InputProps, InputPasswordProps, RadioProps, SelectProps, TextareaProps } from '@ttoss/ui';
 import { F as FormFieldPatternFormatProps } from './FormFieldPatternFormat-CkcL14ho.mjs';
 export { a as FormFieldPatternFormat } from './FormFieldPatternFormat-CkcL14ho.mjs';
 import { NumericFormatProps } from 'react-number-format';
 
+declare const ErrorMessage: <TFieldValues extends FieldValues = FieldValues>({ name, disabled, }: {
+    name: FieldName<TFieldValues>;
+    disabled?: boolean;
+}) => react_jsx_runtime.JSX.Element;
+
 declare const Form: <TFieldValues extends FieldValues = FieldValues>({ children, onSubmit, sx, ...formMethods }: {
     children?: React.ReactNode;
     onSubmit?: (data: TFieldValues) => Promise<void> | void;
@@ -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 { ErrorMessage, Form, FormField, FormFieldCheckbox, FormFieldCreditCardNumber, FormFieldCurrencyInput, FormFieldInput, FormFieldNumericFormat, FormFieldPassword, FormFieldRadio, FormFieldSelect, FormFieldTextarea, FormGroup, useFormGroup };

package/dist/index.d.ts

@@ -3,15 +3,20 @@ import './typings.d-HZBqJJjn.js';
 import * as yup from 'yup';
 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, FieldName, FormProviderProps, 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 * as React from 'react';
+import { BoxProps, SxProp, CheckboxProps, InputProps, InputPasswordProps, RadioProps, SelectProps, TextareaProps } from '@ttoss/ui';
 import { F as FormFieldPatternFormatProps } from './FormFieldPatternFormat-CkcL14ho.js';
 export { a as FormFieldPatternFormat } from './FormFieldPatternFormat-CkcL14ho.js';
 import { NumericFormatProps } from 'react-number-format';
 
+declare const ErrorMessage: <TFieldValues extends FieldValues = FieldValues>({ name, disabled, }: {
+    name: FieldName<TFieldValues>;
+    disabled?: boolean;
+}) => react_jsx_runtime.JSX.Element;
+
 declare const Form: <TFieldValues extends FieldValues = FieldValues>({ children, onSubmit, sx, ...formMethods }: {
     children?: React.ReactNode;
     onSubmit?: (data: TFieldValues) => Promise<void> | void;
@@ -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 { ErrorMessage, Form, FormField, FormFieldCheckbox, FormFieldCreditCardNumber, FormFieldCurrencyInput, FormFieldInput, FormFieldNumericFormat, FormFieldPassword, FormFieldRadio, FormFieldSelect, FormFieldTextarea, FormGroup, useFormGroup };

package/dist/index.js

@@ -40,6 +40,7 @@ var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
 var src_exports = {};
 __export(src_exports, {
   Controller: () => import_react_hook_form6.Controller,
+  ErrorMessage: () => ErrorMessage,
   Form: () => Form,
   FormField: () => FormField,
   FormFieldCheckbox: () => FormFieldCheckbox,
@@ -163,39 +164,12 @@ yup.addMethod(yup.string, "cnpj", function () {
 // src/yup/yup.ts
 var yup2 = __toESM(require("yup"));
 
-// src/Form.tsx
-var import_ui2 = require("@ttoss/ui");
-var import_react_hook_form = require("react-hook-form");
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var Form = ({
-  children,
-  onSubmit,
-  sx,
-  ...formMethods
-}) => {
-  return /* @__PURE__ */(0, import_jsx_runtime2.jsx)(import_react_hook_form.FormProvider, {
-    ...formMethods,
-    children: /* @__PURE__ */(0, import_jsx_runtime2.jsx)(import_ui2.Box, {
-      as: "form",
-      variant: "forms.form",
-      onSubmit: formMethods.handleSubmit(data => {
-        return onSubmit?.(data);
-      }),
-      sx,
-      children
-    })
-  });
-};
-
-// src/FormField.tsx
-var React = __toESM(require("react"));
-
 // src/ErrorMessage.tsx
-var import_react_hook_form2 = require("react-hook-form");
+var import_react_hook_form = require("react-hook-form");
 var import_react_i18n2 = require("@ttoss/react-i18n");
-var import_ui3 = require("@ttoss/ui");
+var import_ui2 = require("@ttoss/ui");
 var import_error_message = require("@hookform/error-message");
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime2 = require("react/jsx-runtime");
 var isMessageDescriptor = possibleMessageDescriptor => {
   return possibleMessageDescriptor !== void 0 && possibleMessageDescriptor.defaultMessage !== void 0;
 };
@@ -207,14 +181,14 @@ var ErrorMessage = ({
     formState: {
       errors
     }
-  } = (0, import_react_hook_form2.useFormContext)();
-  return /* @__PURE__ */(0, import_jsx_runtime3.jsx)(import_error_message.ErrorMessage, {
+  } = (0, import_react_hook_form.useFormContext)();
+  return /* @__PURE__ */(0, import_jsx_runtime2.jsx)(import_error_message.ErrorMessage, {
     name,
     errors,
     render: ({
       message
     }) => {
-      return /* @__PURE__ */(0, import_jsx_runtime3.jsx)(import_ui3.HelpText, {
+      return /* @__PURE__ */(0, import_jsx_runtime2.jsx)(import_ui2.HelpText, {
         negative: true,
         disabled,
         children: (() => {
@@ -222,7 +196,7 @@ var ErrorMessage = ({
             return message;
           }
           if (isMessageDescriptor(message)) {
-            return /* @__PURE__ */(0, import_jsx_runtime3.jsx)(import_react_i18n2.FormattedMessage, {
+            return /* @__PURE__ */(0, import_jsx_runtime2.jsx)(import_react_i18n2.FormattedMessage, {
               ...message
             });
           }
@@ -233,7 +207,32 @@ var ErrorMessage = ({
   });
 };
 
+// src/Form.tsx
+var import_ui3 = require("@ttoss/ui");
+var import_react_hook_form2 = require("react-hook-form");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var Form = ({
+  children,
+  onSubmit,
+  sx,
+  ...formMethods
+}) => {
+  return /* @__PURE__ */(0, import_jsx_runtime3.jsx)(import_react_hook_form2.FormProvider, {
+    ...formMethods,
+    children: /* @__PURE__ */(0, import_jsx_runtime3.jsx)(import_ui3.Box, {
+      as: "form",
+      variant: "forms.form",
+      onSubmit: formMethods.handleSubmit(data => {
+        return onSubmit?.(data);
+      }),
+      sx,
+      children
+    })
+  });
+};
+
 // 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");
@@ -673,6 +672,7 @@ var FormGroupWrapper = ({
   title,
   direction,
   children,
+  name,
   ...boxProps
 }) => {
   const {
@@ -713,6 +713,8 @@ var FormGroupWrapper = ({
     }), /* @__PURE__ */(0, import_jsx_runtime15.jsx)(import_ui13.Flex, {
       sx: childrenContainerSx,
       children
+    }), name && /* @__PURE__ */(0, import_jsx_runtime15.jsx)(ErrorMessage, {
+      name
     })]
   });
 };
@@ -741,6 +743,7 @@ __reExport(src_exports, require("react-hook-form"), module.exports);
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Controller,
+  ErrorMessage,
   Form,
   FormField,
   FormFieldCheckbox,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/forms",
-  "version": "0.23.7",
+  "version": "0.24.0",
   "author": "ttoss",
   "contributors": [
     "Pedro Arantes <pedro@arantespp.com> (https://arantespp.com/contact)"
@@ -35,7 +35,7 @@
   "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"
   },
@@ -54,11 +54,11 @@
     "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/ui": "^4.1.9"
+    "@ttoss/ui": "^4.1.9",
+    "@ttoss/react-i18n": "^1.26.7"
   },
   "publishConfig": {
     "access": "public",

package/src/FormGroup.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { Box, BoxProps, Flex, FlexProps, Text } from '@ttoss/ui';
+import { ErrorMessage } from './ErrorMessage';
 
 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 && <ErrorMessage name={name} />}
     </Box>
   );
 };

package/src/index.ts

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