@lets-events/react 11.7.0 → 11.7.2

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @lets-events/react@11.7.0 build
+> @lets-events/react@11.7.2 build
 > tsup src/index.tsx  --format esm,cjs --dts --external react
 
 CLI Building entry: src/index.tsx
@@ -8,11 +8,11 @@
 CLI Target: es6
 ESM Build start
 CJS Build start
+CJS dist\index.js 332.14 KB
+CJS ⚡️ Build success in 234ms
+ESM dist\index.mjs 320.00 KB
+ESM ⚡️ Build success in 235ms
 DTS Build start
-ESM dist\index.mjs 319.18 KB
-ESM ⚡️ Build success in 516ms
-CJS dist\index.js 331.25 KB
-CJS ⚡️ Build success in 517ms
-DTS ⚡️ Build success in 4249ms
-DTS dist\index.d.mts 383.30 KB
-DTS dist\index.d.ts  383.30 KB
+DTS ⚡️ Build success in 4217ms
+DTS dist\index.d.mts 383.61 KB
+DTS dist\index.d.ts  383.61 KB

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @lets-events/react
 
+## 11.7.2
+
+### Patch Changes
+
+- form child function
+
+## 11.7.1
+
+### Patch Changes
+
+- email input
+
 ## 11.7.0
 
 ### Minor Changes

package/dist/index.d.mts

@@ -13,7 +13,7 @@ import { VariantProps } from '@stitches/react';
 import { MaskOptions, format, unformat } from '@react-input/mask';
 import { Dialog } from 'radix-ui';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
-import { FieldError, Merge, FieldErrorsImpl, FieldValues, UseFormProps, SubmitHandler, useForm } from 'react-hook-form';
+import { FieldError, Merge, FieldErrorsImpl, FieldValues, UseFormProps, SubmitHandler, UseFormReturn, useForm } from 'react-hook-form';
 
 interface IconProps extends Omit<FontAwesomeIconProps, "icon" | "size"> {
     name: IconName;
@@ -14535,7 +14535,7 @@ declare const TextFormField: ({ name, label, required, mask, validate, validatio
 
 type FormProps<T extends FieldValues = FieldValues> = UseFormProps<T> & {
     onSubmit: SubmitHandler<T>;
-    children: JSX.Element;
+    children: JSX.Element | ((p: UseFormReturn<T, any, T>) => JSX.Element);
     methods?: ReturnType<typeof useForm<T>>;
 };
 declare const Form: <T extends FieldValues = FieldValues>({ onSubmit, children, ...props }: FormProps<T>) => react_jsx_runtime.JSX.Element;
@@ -14664,4 +14664,11 @@ type SelectFormFieldProps = {
 };
 declare const SelectFormField: ({ name, label, required, placeholder, options, validation, validationErrorMessage, defaultValue, }: SelectFormFieldProps) => react_jsx_runtime.JSX.Element;
 
-export { AddressFormFields, Alert, AlertDialogCompleteStyled, AlertDialogDescriptionStyled, AlertDialogRowStyled, AlertDialogSimpleStyled, AlertDialogSubtitleStyled, AlertDialogTitleStyled, AlertDialoghrStyled, type AlertProps, Avatar, type AvatarProps, AvatarStyled, Badge, type BadgeProps, BadgeStyled, BirthDateFormField, Box, Button, ButtonGroup, type ButtonGroupProps, ButtonGroupStyled, ButtonItem, type ButtonItemProps, ButtonItemStyled, type ButtonProps, CNPJFormField, CPFFormField, Calendar, type CalendarProps, Card, type CardProps, CardStyled, CheckboxGroup, CheckboxGroupFormField, type CheckboxGroupFormFieldProps, type CheckboxGroupProps, CheckboxGroupStyled, CheckboxItem, type CheckboxItemProps, Container, type ContainerProps, ContainerStyled, CountryFormField, Drawer, type DrawerProps, DropdownMenu, DropdownMenuItem, type DropdownMenuItemProps, type DropdownMenuProps, ErrorFormMessage, type ErrorFormMessageProps, Filter, FilterItem, type FilterItemProps, type FilterProps, Flex, type FlexProps, FlexStyled, Form, FormLabel, type FormLabelProps, type FormProps, Grid, type GridProps, GridStyled, Icon, IdentityDocumentNumberFormField, InputStyled, MenuDropdown, type MenuDropdownProps, Modal, type ModalProps, MultiSelect, MultiSelectFormField, type MultiSelectFormFieldProps, type MultiSelectProps, PhoneFormField, type PhoneFormFieldProps, RadioGroup, RadioGroupFormField, type RadioGroupFormFieldProps, type RadioGroupProps, RadioGroupStyled, RadioItem, type RadioItemProps, Section, type SectionProps, SectionStyled, SelectFormField, type SelectFormFieldProps, Step, StepContent, StepList, type StepProps, StepStyled, StepTrigger, StepWrapper, Switch, type SwitchProps, SwitchStyled, Text, TextAreaFormField, type TextAreaFormFieldProps, TextField, type TextFieldProps, TextFieldSlot, type TextFieldSlotProps, TextFieldSlotStyled, TextFieldStyled, TextFormField, type TextFormFieldProps, type TextProps, TextStyle, TextareaField, type TextareaFieldProps, TextareaFieldStyle, TimePicker, TimePickerButtonStyled, TimePickerDropdownStyled, TimePickerFooterStyled, type TimePickerProps, TimePickerStyled, TimerPickerContentStyled, type Toast, type ToastComponentProps, type ToastConfig, type ToastContextType, ToastItem, type ToastOptions, ToastProvider, type ToastProviderProps, type ToastType, type ToasterShowOptions, Tooltip, TooltipContent, type TooltipProps, TooltipProvider, TooltipRoot, TooltipTrigger, isValidCNPJ, maskFormat, maskUnformat, useToast };
+type EmailFormFieldProps = {
+    name: string;
+    label?: string;
+    required?: boolean;
+};
+declare const EmailFormField: ({ name, label, required, }: EmailFormFieldProps) => react_jsx_runtime.JSX.Element;
+
+export { AddressFormFields, Alert, AlertDialogCompleteStyled, AlertDialogDescriptionStyled, AlertDialogRowStyled, AlertDialogSimpleStyled, AlertDialogSubtitleStyled, AlertDialogTitleStyled, AlertDialoghrStyled, type AlertProps, Avatar, type AvatarProps, AvatarStyled, Badge, type BadgeProps, BadgeStyled, BirthDateFormField, Box, Button, ButtonGroup, type ButtonGroupProps, ButtonGroupStyled, ButtonItem, type ButtonItemProps, ButtonItemStyled, type ButtonProps, CNPJFormField, CPFFormField, Calendar, type CalendarProps, Card, type CardProps, CardStyled, CheckboxGroup, CheckboxGroupFormField, type CheckboxGroupFormFieldProps, type CheckboxGroupProps, CheckboxGroupStyled, CheckboxItem, type CheckboxItemProps, Container, type ContainerProps, ContainerStyled, CountryFormField, Drawer, type DrawerProps, DropdownMenu, DropdownMenuItem, type DropdownMenuItemProps, type DropdownMenuProps, EmailFormField, type EmailFormFieldProps, ErrorFormMessage, type ErrorFormMessageProps, Filter, FilterItem, type FilterItemProps, type FilterProps, Flex, type FlexProps, FlexStyled, Form, FormLabel, type FormLabelProps, type FormProps, Grid, type GridProps, GridStyled, Icon, IdentityDocumentNumberFormField, InputStyled, MenuDropdown, type MenuDropdownProps, Modal, type ModalProps, MultiSelect, MultiSelectFormField, type MultiSelectFormFieldProps, type MultiSelectProps, PhoneFormField, type PhoneFormFieldProps, RadioGroup, RadioGroupFormField, type RadioGroupFormFieldProps, type RadioGroupProps, RadioGroupStyled, RadioItem, type RadioItemProps, Section, type SectionProps, SectionStyled, SelectFormField, type SelectFormFieldProps, Step, StepContent, StepList, type StepProps, StepStyled, StepTrigger, StepWrapper, Switch, type SwitchProps, SwitchStyled, Text, TextAreaFormField, type TextAreaFormFieldProps, TextField, type TextFieldProps, TextFieldSlot, type TextFieldSlotProps, TextFieldSlotStyled, TextFieldStyled, TextFormField, type TextFormFieldProps, type TextProps, TextStyle, TextareaField, type TextareaFieldProps, TextareaFieldStyle, TimePicker, TimePickerButtonStyled, TimePickerDropdownStyled, TimePickerFooterStyled, type TimePickerProps, TimePickerStyled, TimerPickerContentStyled, type Toast, type ToastComponentProps, type ToastConfig, type ToastContextType, ToastItem, type ToastOptions, ToastProvider, type ToastProviderProps, type ToastType, type ToasterShowOptions, Tooltip, TooltipContent, type TooltipProps, TooltipProvider, TooltipRoot, TooltipTrigger, isValidCNPJ, maskFormat, maskUnformat, useToast };

package/dist/index.d.ts

@@ -13,7 +13,7 @@ import { VariantProps } from '@stitches/react';
 import { MaskOptions, format, unformat } from '@react-input/mask';
 import { Dialog } from 'radix-ui';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
-import { FieldError, Merge, FieldErrorsImpl, FieldValues, UseFormProps, SubmitHandler, useForm } from 'react-hook-form';
+import { FieldError, Merge, FieldErrorsImpl, FieldValues, UseFormProps, SubmitHandler, UseFormReturn, useForm } from 'react-hook-form';
 
 interface IconProps extends Omit<FontAwesomeIconProps, "icon" | "size"> {
     name: IconName;
@@ -14535,7 +14535,7 @@ declare const TextFormField: ({ name, label, required, mask, validate, validatio
 
 type FormProps<T extends FieldValues = FieldValues> = UseFormProps<T> & {
     onSubmit: SubmitHandler<T>;
-    children: JSX.Element;
+    children: JSX.Element | ((p: UseFormReturn<T, any, T>) => JSX.Element);
     methods?: ReturnType<typeof useForm<T>>;
 };
 declare const Form: <T extends FieldValues = FieldValues>({ onSubmit, children, ...props }: FormProps<T>) => react_jsx_runtime.JSX.Element;
@@ -14664,4 +14664,11 @@ type SelectFormFieldProps = {
 };
 declare const SelectFormField: ({ name, label, required, placeholder, options, validation, validationErrorMessage, defaultValue, }: SelectFormFieldProps) => react_jsx_runtime.JSX.Element;
 
-export { AddressFormFields, Alert, AlertDialogCompleteStyled, AlertDialogDescriptionStyled, AlertDialogRowStyled, AlertDialogSimpleStyled, AlertDialogSubtitleStyled, AlertDialogTitleStyled, AlertDialoghrStyled, type AlertProps, Avatar, type AvatarProps, AvatarStyled, Badge, type BadgeProps, BadgeStyled, BirthDateFormField, Box, Button, ButtonGroup, type ButtonGroupProps, ButtonGroupStyled, ButtonItem, type ButtonItemProps, ButtonItemStyled, type ButtonProps, CNPJFormField, CPFFormField, Calendar, type CalendarProps, Card, type CardProps, CardStyled, CheckboxGroup, CheckboxGroupFormField, type CheckboxGroupFormFieldProps, type CheckboxGroupProps, CheckboxGroupStyled, CheckboxItem, type CheckboxItemProps, Container, type ContainerProps, ContainerStyled, CountryFormField, Drawer, type DrawerProps, DropdownMenu, DropdownMenuItem, type DropdownMenuItemProps, type DropdownMenuProps, ErrorFormMessage, type ErrorFormMessageProps, Filter, FilterItem, type FilterItemProps, type FilterProps, Flex, type FlexProps, FlexStyled, Form, FormLabel, type FormLabelProps, type FormProps, Grid, type GridProps, GridStyled, Icon, IdentityDocumentNumberFormField, InputStyled, MenuDropdown, type MenuDropdownProps, Modal, type ModalProps, MultiSelect, MultiSelectFormField, type MultiSelectFormFieldProps, type MultiSelectProps, PhoneFormField, type PhoneFormFieldProps, RadioGroup, RadioGroupFormField, type RadioGroupFormFieldProps, type RadioGroupProps, RadioGroupStyled, RadioItem, type RadioItemProps, Section, type SectionProps, SectionStyled, SelectFormField, type SelectFormFieldProps, Step, StepContent, StepList, type StepProps, StepStyled, StepTrigger, StepWrapper, Switch, type SwitchProps, SwitchStyled, Text, TextAreaFormField, type TextAreaFormFieldProps, TextField, type TextFieldProps, TextFieldSlot, type TextFieldSlotProps, TextFieldSlotStyled, TextFieldStyled, TextFormField, type TextFormFieldProps, type TextProps, TextStyle, TextareaField, type TextareaFieldProps, TextareaFieldStyle, TimePicker, TimePickerButtonStyled, TimePickerDropdownStyled, TimePickerFooterStyled, type TimePickerProps, TimePickerStyled, TimerPickerContentStyled, type Toast, type ToastComponentProps, type ToastConfig, type ToastContextType, ToastItem, type ToastOptions, ToastProvider, type ToastProviderProps, type ToastType, type ToasterShowOptions, Tooltip, TooltipContent, type TooltipProps, TooltipProvider, TooltipRoot, TooltipTrigger, isValidCNPJ, maskFormat, maskUnformat, useToast };
+type EmailFormFieldProps = {
+    name: string;
+    label?: string;
+    required?: boolean;
+};
+declare const EmailFormField: ({ name, label, required, }: EmailFormFieldProps) => react_jsx_runtime.JSX.Element;
+
+export { AddressFormFields, Alert, AlertDialogCompleteStyled, AlertDialogDescriptionStyled, AlertDialogRowStyled, AlertDialogSimpleStyled, AlertDialogSubtitleStyled, AlertDialogTitleStyled, AlertDialoghrStyled, type AlertProps, Avatar, type AvatarProps, AvatarStyled, Badge, type BadgeProps, BadgeStyled, BirthDateFormField, Box, Button, ButtonGroup, type ButtonGroupProps, ButtonGroupStyled, ButtonItem, type ButtonItemProps, ButtonItemStyled, type ButtonProps, CNPJFormField, CPFFormField, Calendar, type CalendarProps, Card, type CardProps, CardStyled, CheckboxGroup, CheckboxGroupFormField, type CheckboxGroupFormFieldProps, type CheckboxGroupProps, CheckboxGroupStyled, CheckboxItem, type CheckboxItemProps, Container, type ContainerProps, ContainerStyled, CountryFormField, Drawer, type DrawerProps, DropdownMenu, DropdownMenuItem, type DropdownMenuItemProps, type DropdownMenuProps, EmailFormField, type EmailFormFieldProps, ErrorFormMessage, type ErrorFormMessageProps, Filter, FilterItem, type FilterItemProps, type FilterProps, Flex, type FlexProps, FlexStyled, Form, FormLabel, type FormLabelProps, type FormProps, Grid, type GridProps, GridStyled, Icon, IdentityDocumentNumberFormField, InputStyled, MenuDropdown, type MenuDropdownProps, Modal, type ModalProps, MultiSelect, MultiSelectFormField, type MultiSelectFormFieldProps, type MultiSelectProps, PhoneFormField, type PhoneFormFieldProps, RadioGroup, RadioGroupFormField, type RadioGroupFormFieldProps, type RadioGroupProps, RadioGroupStyled, RadioItem, type RadioItemProps, Section, type SectionProps, SectionStyled, SelectFormField, type SelectFormFieldProps, Step, StepContent, StepList, type StepProps, StepStyled, StepTrigger, StepWrapper, Switch, type SwitchProps, SwitchStyled, Text, TextAreaFormField, type TextAreaFormFieldProps, TextField, type TextFieldProps, TextFieldSlot, type TextFieldSlotProps, TextFieldSlotStyled, TextFieldStyled, TextFormField, type TextFormFieldProps, type TextProps, TextStyle, TextareaField, type TextareaFieldProps, TextareaFieldStyle, TimePicker, TimePickerButtonStyled, TimePickerDropdownStyled, TimePickerFooterStyled, type TimePickerProps, TimePickerStyled, TimerPickerContentStyled, type Toast, type ToastComponentProps, type ToastConfig, type ToastContextType, ToastItem, type ToastOptions, ToastProvider, type ToastProviderProps, type ToastType, type ToasterShowOptions, Tooltip, TooltipContent, type TooltipProps, TooltipProvider, TooltipRoot, TooltipTrigger, isValidCNPJ, maskFormat, maskUnformat, useToast };

package/dist/index.js

@@ -1066,6 +1066,7 @@ __export(index_exports, {
   Drawer: () => Drawer,
   DropdownMenu: () => DropdownMenu2,
   DropdownMenuItem: () => DropdownMenuItem,
+  EmailFormField: () => EmailFormField,
   ErrorFormMessage: () => ErrorFormMessage,
   Filter: () => Filter,
   FilterItem: () => FilterItem,
@@ -9911,8 +9912,15 @@ var Form = (_a) => {
     "onSubmit",
     "children"
   ]);
-  const formMethods = (0, import_react_hook_form3.useForm)(props);
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_react_hook_form3.FormProvider, __spreadProps(__spreadValues({}, formMethods), { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("form", { onSubmit: formMethods.handleSubmit(onSubmit), children }) }));
+  const formMethods = (0, import_react_hook_form3.useForm)(__spreadValues({
+    mode: "onTouched"
+  }, props));
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_react_hook_form3.FormProvider, __spreadProps(__spreadValues({}, formMethods), { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("form", { onSubmit: formMethods.handleSubmit(onSubmit), children: (() => {
+    if (typeof children === "function") {
+      return children(formMethods);
+    }
+    return children;
+  })() }) }));
 };
 
 // src/components/FormFields/MultiSelectFormField.tsx
@@ -9966,8 +9974,14 @@ var MultiSelectFormField = (_a) => {
 };
 
 // src/components/FormFields/utils/validation.ts
+var isValidEmail = (email) => {
+  const emailRexep = /^(([^<>()[\].,;:\s@"]+(\.[^<>()[\].,;:\s@"]+)*)|(".+"))@(([^<>()[\].,;:\s@"]+\.)+[^<>()[\].,;:\s@"]{2,})$/i;
+  return emailRexep.test(email);
+};
+var validateEmail = (errorMsg) => (value) => {
+  return !isValidEmail(value) ? errorMsg : true;
+};
 var minMaxLength = (min, max, errorMsg) => (value) => {
-  console.log(value);
   var length = value.length;
   return length > max || length < min ? errorMsg : true;
 };
@@ -9992,15 +10006,15 @@ var PhoneFormField = ({
       },
       placeholder: "(00) 00000-0000",
       type: "tel",
-      validate: minMaxLength(12, 13, "Telefone inv\xE1lido"),
+      validate: minMaxLength(13, 14, "Telefone inv\xE1lido"),
       valueFormatter: {
         format(v) {
           if (!v || v === "") return v;
-          return v.replace(/\b55/, "");
+          return v.replace(/^\+55/, "");
         },
         unformat(v) {
           if (!v || v === "") return v;
-          return "55" + v;
+          return "+55" + v;
         }
       }
     }
@@ -10780,6 +10794,26 @@ var CheckboxGroupFormField = ({
     /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(ErrorFormMessage, { message: errorMsg })
   ] });
 };
+
+// src/components/FormFields/EmailFormField.tsx
+var import_jsx_runtime49 = require("react/jsx-runtime");
+var EmailFormField = ({
+  name,
+  label,
+  required
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+    TextFormField,
+    {
+      name,
+      label,
+      required,
+      placeholder: "@mail.com",
+      type: "email",
+      validate: validateEmail("E-mail inv\xE1lido.")
+    }
+  );
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AddressFormFields,
@@ -10817,6 +10851,7 @@ var CheckboxGroupFormField = ({
   Drawer,
   DropdownMenu,
   DropdownMenuItem,
+  EmailFormField,
   ErrorFormMessage,
   Filter,
   FilterItem,

package/dist/index.mjs

@@ -9818,8 +9818,15 @@ var Form = (_a) => {
     "onSubmit",
     "children"
   ]);
-  const formMethods = useForm(props);
-  return /* @__PURE__ */ jsx34(FormProvider, __spreadProps(__spreadValues({}, formMethods), { children: /* @__PURE__ */ jsx34("form", { onSubmit: formMethods.handleSubmit(onSubmit), children }) }));
+  const formMethods = useForm(__spreadValues({
+    mode: "onTouched"
+  }, props));
+  return /* @__PURE__ */ jsx34(FormProvider, __spreadProps(__spreadValues({}, formMethods), { children: /* @__PURE__ */ jsx34("form", { onSubmit: formMethods.handleSubmit(onSubmit), children: (() => {
+    if (typeof children === "function") {
+      return children(formMethods);
+    }
+    return children;
+  })() }) }));
 };
 
 // src/components/FormFields/MultiSelectFormField.tsx
@@ -9873,8 +9880,14 @@ var MultiSelectFormField = (_a) => {
 };
 
 // src/components/FormFields/utils/validation.ts
+var isValidEmail = (email) => {
+  const emailRexep = /^(([^<>()[\].,;:\s@"]+(\.[^<>()[\].,;:\s@"]+)*)|(".+"))@(([^<>()[\].,;:\s@"]+\.)+[^<>()[\].,;:\s@"]{2,})$/i;
+  return emailRexep.test(email);
+};
+var validateEmail = (errorMsg) => (value) => {
+  return !isValidEmail(value) ? errorMsg : true;
+};
 var minMaxLength = (min, max, errorMsg) => (value) => {
-  console.log(value);
   var length = value.length;
   return length > max || length < min ? errorMsg : true;
 };
@@ -9899,15 +9912,15 @@ var PhoneFormField = ({
       },
       placeholder: "(00) 00000-0000",
       type: "tel",
-      validate: minMaxLength(12, 13, "Telefone inv\xE1lido"),
+      validate: minMaxLength(13, 14, "Telefone inv\xE1lido"),
       valueFormatter: {
         format(v) {
           if (!v || v === "") return v;
-          return v.replace(/\b55/, "");
+          return v.replace(/^\+55/, "");
         },
         unformat(v) {
           if (!v || v === "") return v;
-          return "55" + v;
+          return "+55" + v;
         }
       }
     }
@@ -10687,6 +10700,26 @@ var CheckboxGroupFormField = ({
     /* @__PURE__ */ jsx48(ErrorFormMessage, { message: errorMsg })
   ] });
 };
+
+// src/components/FormFields/EmailFormField.tsx
+import { jsx as jsx49 } from "react/jsx-runtime";
+var EmailFormField = ({
+  name,
+  label,
+  required
+}) => {
+  return /* @__PURE__ */ jsx49(
+    TextFormField,
+    {
+      name,
+      label,
+      required,
+      placeholder: "@mail.com",
+      type: "email",
+      validate: validateEmail("E-mail inv\xE1lido.")
+    }
+  );
+};
 export {
   AddressFormFields,
   Alert,
@@ -10723,6 +10756,7 @@ export {
   Drawer,
   DropdownMenu2 as DropdownMenu,
   DropdownMenuItem,
+  EmailFormField,
   ErrorFormMessage,
   Filter,
   FilterItem,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lets-events/react",
-  "version": "11.7.0",
+  "version": "11.7.2",
   "description": "",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",

package/src/components/FormFields/EmailFormField.tsx

@@ -0,0 +1,25 @@
+import { TextFormField } from "./TextFormField";
+import { validateEmail } from "./utils/validation";
+
+export type EmailFormFieldProps = {
+  name: string;
+  label?: string;
+  required?: boolean;
+};
+
+export const EmailFormField = ({
+  name,
+  label,
+  required,
+}: EmailFormFieldProps) => {
+  return (
+    <TextFormField
+      name={name}
+      label={label}
+      required={required}
+      placeholder="@mail.com"
+      type="email"
+      validate={validateEmail("E-mail inválido.")}
+    />
+  );
+};

package/src/components/FormFields/Form.tsx

@@ -1,15 +1,16 @@
-import { JSX } from "react";
+import { JSX, useMemo } from "react";
 import {
   FormProvider,
   useForm,
   SubmitHandler,
   FieldValues,
   UseFormProps,
+  UseFormReturn,
 } from "react-hook-form";
 
 export type FormProps<T extends FieldValues = FieldValues> = UseFormProps<T> & {
   onSubmit: SubmitHandler<T>;
-  children: JSX.Element;
+  children: JSX.Element | ((p: UseFormReturn<T, any, T>) => JSX.Element);
   methods?: ReturnType<typeof useForm<T>>;
 };
 
@@ -18,11 +19,21 @@ export const Form = <T extends FieldValues = FieldValues>({
   children,
   ...props
 }: FormProps<T>) => {
-  const formMethods = useForm<T>(props);
-
+  const formMethods = useForm<T>({
+    mode: "onTouched",
+    ...props,
+  });
+  
   return (
     <FormProvider {...formMethods}>
-      <form onSubmit={formMethods.handleSubmit(onSubmit)}>{children}</form>
+      <form onSubmit={formMethods.handleSubmit(onSubmit)}>
+        {(() => {
+          if (typeof children === "function") {
+            return children(formMethods);
+          }
+          return children;
+        })()}
+      </form>
     </FormProvider>
   );
 };

package/src/components/FormFields/PhoneFormField.tsx

@@ -24,15 +24,15 @@ export const PhoneFormField = ({
       }}
       placeholder="(00) 00000-0000"
       type="tel"
-      validate={minMaxLength(12, 13, "Telefone inválido")}
+      validate={minMaxLength(13, 14, "Telefone inválido")}
       valueFormatter={{
         format(v) {
           if (!v || v === "") return v;
-          return v.replace(/\b55/, "");
+          return v.replace(/^\+55/, "");
         },
         unformat(v) {
           if (!v || v === "") return v;
-          return "55" + v;
+          return "+55" + v;
         },
       }}
     />

package/src/components/FormFields/utils/validation.ts

@@ -1,9 +1,13 @@
-const validateEmail = (email: string) => {
+const isValidEmail = (email: string) => {
   const emailRexep =
     /^(([^<>()[\].,;:\s@"]+(\.[^<>()[\].,;:\s@"]+)*)|(".+"))@(([^<>()[\].,;:\s@"]+\.)+[^<>()[\].,;:\s@"]{2,})$/i;
   return emailRexep.test(email);
 };
 
+export const validateEmail = (errorMsg: string) => (value: string) => {
+  return !isValidEmail(value) ? errorMsg : true;
+};
+
 export const maxLength = (max: number, errorMsg: string) => (value: string) => {
   return value.length > max ? errorMsg : true;
 };
@@ -14,7 +18,6 @@ export const minLength = (min: number, errorMsg: string) => (value: string) => {
 
 export const minMaxLength =
   (min: number, max: number, errorMsg: string) => (value: string) => {
-    console.log(value)
     var length = value.length;
     return length > max || length < min ? errorMsg : true;
   };

package/src/index.tsx

@@ -52,3 +52,4 @@ export * from "./components/FormFields/RadioGroupFormField";
 export * from "./components/FormFields/CheckboxGroupFormField";
 export * from "./components/FormFields/AddressFormFields/CountryFormField";
 export * from "./components/FormFields/SelectFormField";
+export * from './components/FormFields/EmailFormField';