@ttoss/forms 0.40.1 → 0.41.0

package/README.md

@@ -1,12 +1,14 @@
 # @ttoss/forms
 
-**@ttoss/forms** provides React form components built on [React Hook Form](https://react-hook-form.com/) and [Yup](https://github.com/jquense/yup), with integrated i18n support and theme styling.
+**@ttoss/forms** provides React form components built on [React Hook Form](https://react-hook-form.com/), with schema validation using [Zod](https://zod.dev/), integrated i18n support, and theme styling.
+
+> **Note:** Yup support is deprecated and will be removed in a future version. Please migrate to Zod for new projects.
 
 ## Installation
 
 ```shell
 pnpm i @ttoss/forms @ttoss/react-i18n @ttoss/ui @emotion/react
-pnpm i --save-dev @ttoss/i18n-cli
+pnpm i -D @ttoss/i18n-cli
 ```
 
 **Note:** This package is [ESM only](https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c). I18n configuration is required—see [@ttoss/react-i18n](https://ttoss.dev/docs/modules/packages/react-i18n/) for setup details.
@@ -20,21 +22,21 @@ import {
   FormFieldCheckbox,
   FormFieldInput,
   useForm,
-  yup,
-  yupResolver,
+  z,
+  zodResolver,
 } from '@ttoss/forms';
 import { I18nProvider } from '@ttoss/react-i18n';
 
-const schema = yup.object({
-  firstName: yup.string().required('First name is required'),
-  age: yup.number().required('Age is required'),
-  receiveEmails: yup.boolean(),
+const schema = z.object({
+  firstName: z.string().min(1, 'First name is required'),
+  age: z.number(),
+  receiveEmails: z.boolean(),
 });
 
 export const FormComponent = () => {
   const formMethods = useForm({
     mode: 'all',
-    resolver: yupResolver(schema),
+    resolver: zodResolver(schema),
   });
 
   const onSubmit = (data) => {
@@ -58,20 +60,20 @@ export const FormComponent = () => {
 
 All React Hook Form APIs are re-exported from `@ttoss/forms`, including hooks like `useForm`, `useController`, `useFieldArray`, and `useFormContext`. See the [React Hook Form documentation](https://react-hook-form.com/docs) for complete API details.
 
-## Yup Validation
+## Zod Validation (Recommended)
 
-Import `yup` and `yupResolver` directly from `@ttoss/forms`:
+Import `z` and `zodResolver` directly from `@ttoss/forms` for schema validation using [Zod](https://zod.dev/):
 
 ```tsx
-import { Form, FormFieldInput, useForm, yup, yupResolver } from '@ttoss/forms';
+import { Form, FormFieldInput, useForm, z, zodResolver } from '@ttoss/forms';
 
-const schema = yup.object({
-  firstName: yup.string().required(),
+const schema = z.object({
+  firstName: z.string().min(1, 'First name is required'),
 });
 
 const MyForm = () => {
   const formMethods = useForm({
-    resolver: yupResolver(schema),
+    resolver: zodResolver(schema),
   });
 
   return (
@@ -87,59 +89,91 @@ const MyForm = () => {
 
 Invalid fields display default error messages like "Field is required". These messages are defined using i18n and can be customized for each locale.
 
-#### Default Yup Messages
+#### Default Zod Messages
 
-The package provides internationalized default messages for common Yup validation errors. These are automatically extracted when you run `pnpm run i18n`:
+The package provides internationalized default messages for common Zod validation errors. These are automatically extracted when you run `pnpm run i18n`:
 
-- **Required field**: "Field is required"
-- **Type mismatch**: "Invalid Value for Field of type (type)"
-- **Minimum length**: "Field must be at least (min) characters"
+- **Required field**: `"Field is required"`
+- **Type mismatch**: `"Invalid Value for Field of type {expected}"`
+- **Minimum length**: `"Field must be at least {min} characters"`
 
 To customize these messages for your locale, extract the i18n messages and translate them in your application's i18n files (e.g., `i18n/compiled/pt-BR.json`). See the [i18n-CLI documentation](https://ttoss.dev/docs/modules/packages/i18n-cli/) for more details.
 
-#### Custom Schema Messages
+### Custom Validations
+
+The package extends Zod with custom validation methods for Brazilian documents:
 
-You can also provide custom error messages directly in your Yup schemas using i18n patterns:
+#### CPF Validation
 
 ```tsx
-import { useI18n } from '@ttoss/react-i18n';
-import { useMemo } from 'react';
+import { z } from '@ttoss/forms';
+
+const schema = z.object({
+  cpf: z.string().cpf(), // Uses default message: "Invalid CPF"
+  // Or with custom message:
+  cpfCustom: z.string().cpf('CPF inválido'),
+});
+```
+
+#### CNPJ Validation
+
+````
+
+```tsx
+import { z } from '@ttoss/forms';
+
+const schema = z.object({
+  cnpj: z.string().cnpj(), // Uses default message: "Invalid CNPJ"
+  // Or with custom message:
+  cnpjCustom: z.string().cnpj('CNPJ inválido'),
+});
+````
+
+#### Password Validation
+
+```tsx
+import { passwordSchema } from '@ttoss/forms';
+import { z } from '@ttoss/forms';
+
+const schema = z.object({
+  // Required password (minimum 8 characters)
+  password: passwordSchema({ required: true }),
+
+  // Optional password (accepts empty string or minimum 8 characters)
+  optionalPassword: passwordSchema(),
+});
+```
+
+## Yup Validation (Deprecated)
+
+> **DEPRECATION WARNING:** Yup support is deprecated and will be removed in a future major version. Please migrate to Zod for new projects. Existing Yup schemas will continue to work, but we recommend planning your migration to Zod.
+
+For legacy projects still using Yup, you can import `yup` and `yupResolver` from `@ttoss/forms`:
+
+```tsx
+import { Form, FormFieldInput, useForm, yup, yupResolver } from '@ttoss/forms';
+
+const schema = yup.object({
+  firstName: yup.string().required(),
+});
 
 const MyForm = () => {
-  const {
-    intl: { formatMessage },
-  } = useI18n();
-
-  const schema = useMemo(
-    () =>
-      yup.object({
-        name: yup.string().required(
-          formatMessage({
-            defaultMessage: 'Name must not be null',
-            description: 'Name required constraint',
-          })
-        ),
-        age: yup.number().min(
-          18,
-          formatMessage(
-            {
-              defaultMessage: 'You must be {age} years old or more',
-              description: 'Min age constraint message',
-            },
-            { age: 18 }
-          )
-        ),
-      }),
-    [formatMessage]
-  );
+  const formMethods = useForm({
+    resolver: yupResolver(schema),
+  });
 
-  // ... rest of form implementation
+  return (
+    <Form {...formMethods} onSubmit={(data) => console.log(data)}>
+      <FormFieldInput name="firstName" label="First Name" />
+      <Button type="submit">Submit</Button>
+    </Form>
+  );
 };
 ```
 
 ## Validation Approaches
 
-There are two ways to validate form fields in `@ttoss/forms`: schema-based validation using Yup schemas with `yupResolver`, and field-level validation using the `rules` prop on individual form fields.
+There are two ways to validate form fields in `@ttoss/forms`: schema-based validation using Zod schemas with `zodResolver`, and field-level validation using the `rules` prop on individual form fields.
 
 **IMPORTANT:** You cannot mix both validation methods for the same field—choose either schema-based or field-level validation per field.
 
@@ -159,16 +193,18 @@ There are two ways to validate form fields in `@ttoss/forms`: schema-based valid
 
 ### 1. Schema-based Validation (Recommended)
 
-Use Yup schemas with `yupResolver` for complex validation logic:
+Use Zod schemas with `zodResolver` for complex validation logic:
 
 ```tsx
-const schema = yup.object({
-  email: yup.string().email().required(),
-  age: yup.number().min(18).max(100).required(),
+import { z, zodResolver } from '@ttoss/forms';
+
+const schema = z.object({
+  email: z.string().email(),
+  age: z.number().min(18).max(100),
 });
 
 const formMethods = useForm({
-  resolver: yupResolver(schema),
+  resolver: zodResolver(schema),
 });
 ```
 
@@ -609,15 +645,15 @@ Import from `@ttoss/forms/multistep-form`:
 
 ```tsx
 import { MultistepForm } from '@ttoss/forms/multistep-form';
-import { FormFieldInput, yup } from '@ttoss/forms';
+import { FormFieldInput, z } from '@ttoss/forms';
 
 const steps = [
   {
     label: 'Step 1',
     question: 'What is your name?',
     fields: <FormFieldInput name="name" label="Name" />,
-    schema: yup.object({
-      name: yup.string().required('Name is required'),
+    schema: z.object({
+      name: z.string().min(1, 'Name is required'),
     }),
   },
   {
@@ -625,11 +661,8 @@ const steps = [
     question: 'How old are you?',
     fields: <FormFieldInput type="number" name="age" label="Age" />,
     defaultValues: { age: 18 },
-    schema: yup.object({
-      age: yup
-        .number()
-        .min(18, 'Must be at least 18')
-        .required('Age is required'),
+    schema: z.object({
+      age: z.number().min(18, 'Must be at least 18'),
     }),
   },
 ];
@@ -664,7 +697,7 @@ Each step object contains:
 - `label`: Step label for navigation
 - `question`: Question or instruction text
 - `fields`: React element(s) containing form fields
-- `schema`: Yup validation schema
+- `schema`: Zod validation schema
 - `defaultValues`: Optional default values for step fields
 
 ### Header Types

package/dist/MultistepForm/index.d.ts

@@ -1,8 +1,9 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
-import '../typings.d-BZ6kUiQ4.js';
+import '../typings.d-BzNUo1mD.js';
 import * as yup from 'yup';
 import { IconType } from '@ttoss/react-icons';
+import 'zod';
 
 type MultistepFlowMessageVariant = 'image-text' | 'heading-and-subheading';
 type MultistepFlowMessageBase = {

package/dist/esm/MultistepForm/index.js

@@ -1,6 +1,6 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
 import * as React from 'react';
-import { Form, useForm, yupResolver } from "../chunk-ILQOS34E.js";
+import { Form, useForm, yupResolver } from "../chunk-PBTKK77I.js";
 import { __name } from "../chunk-BL55OAIO.js";
 
 // src/MultistepForm/MultistepForm.tsx
@@ -134,7 +134,7 @@ var MultistepFormStepper = /* @__PURE__ */__name(({
   }, submitLabel));
 }, "MultistepFormStepper");
 
-// ../../node_modules/.pnpm/@iconify-icon+react@2.3.0_react@19.2.3/node_modules/@iconify-icon/react/dist/iconify.mjs
+// ../../node_modules/.pnpm/@iconify-icon+react@2.3.0_react@19.2.4/node_modules/@iconify-icon/react/dist/iconify.mjs
 import React5 from "react";
 
 // ../../node_modules/.pnpm/iconify-icon@2.3.0/node_modules/iconify-icon/dist/iconify-icon.mjs
@@ -2263,7 +2263,7 @@ var {
   _api
 } = IconifyIconComponent;
 
-// ../../node_modules/.pnpm/@iconify-icon+react@2.3.0_react@19.2.3/node_modules/@iconify-icon/react/dist/iconify.mjs
+// ../../node_modules/.pnpm/@iconify-icon+react@2.3.0_react@19.2.4/node_modules/@iconify-icon/react/dist/iconify.mjs
 var Icon = React5.forwardRef((props, ref) => {
   const newProps = {
     ...props,

package/dist/esm/{chunk-ILQOS34E.js → chunk-PBTKK77I.js}

@@ -1023,8 +1023,87 @@ yup.addMethod(yup.string, "password", function ({
 // src/yup/yup.ts
 import * as yup2 from "yup";
 
+// src/zod/i18n.ts
+import { defineMessage as defineMessage2 } from "@ttoss/react-i18n";
+import * as z from "zod";
+var customErrorMap = /* @__PURE__ */__name((issue, ctx) => {
+  if (issue.code === z.ZodIssueCode.invalid_type) {
+    if (issue.received === "undefined") {
+      return {
+        message: defineMessage2({
+          defaultMessage: "Field is required",
+          description: "Field is required"
+        })
+      };
+    }
+    return {
+      message: {
+        ...defineMessage2({
+          defaultMessage: "Invalid Value for Field of type {expected}",
+          description: "Invalid Value"
+        }),
+        values: {
+          expected: issue.expected
+        }
+      }
+    };
+  }
+  if (issue.code === z.ZodIssueCode.too_small) {
+    if (issue.type === "string") {
+      return {
+        message: {
+          ...defineMessage2({
+            defaultMessage: "Field must be at least {min} characters",
+            description: "Min length field"
+          }),
+          values: {
+            min: issue.minimum
+          }
+        }
+      };
+    }
+  }
+  return {
+    message: ctx.defaultError
+  };
+}, "customErrorMap");
+z.setErrorMap(customErrorMap);
+
+// src/zod/schema.ts
+import * as z2 from "zod";
+var cnpjRefinement = /* @__PURE__ */__name(val => {
+  return isCnpjValid(val);
+}, "cnpjRefinement");
+var cpfRefinement = /* @__PURE__ */__name(val => {
+  return isCpfValid(val);
+}, "cpfRefinement");
+z2.ZodString.prototype.cnpj = function (message = "Invalid CNPJ") {
+  return this.refine(cnpjRefinement, {
+    message
+  });
+};
+z2.ZodString.prototype.cpf = function (message = "Invalid CPF") {
+  return this.refine(cpfRefinement, {
+    message
+  });
+};
+z2.ZodEffects.prototype.cnpj = function (message = "Invalid CNPJ") {
+  return this.refine(cnpjRefinement, {
+    message
+  });
+};
+z2.ZodEffects.prototype.cpf = function (message = "Invalid CPF") {
+  return this.refine(cpfRefinement, {
+    message
+  });
+};
+
+// src/zod/zod.ts
+import * as z3 from "zod";
+
 // src/index.ts
 import { yupResolver } from "@hookform/resolvers/yup";
+import { zodResolver } from "@hookform/resolvers/zod";
 import { Controller, FormProvider as FormProvider2, useController, useFieldArray, useForm, useFormContext, useFormState, useWatch } from "react-hook-form";
 export * from "react-hook-form";
-export { Form, FormFieldCheckbox, FormFieldCreditCardNumber, FormFieldNumericFormat, FormFieldCurrencyInput, FormFieldDatePicker, FormFieldInput, FormFieldPassword, FormFieldRadio, FormFieldRadioCard, FormFieldRadioCardIcony, FormFieldSegmentedControl, FormFieldSelect, FormFieldSwitch, FormFieldTextarea, useFormGroup, FormGroup, yup2 as yup, yupResolver, Controller, FormProvider2 as FormProvider, useController, useFieldArray, useForm, useFormContext, useFormState, useWatch };
+export { Form, FormFieldCheckbox, FormFieldCreditCardNumber, FormFieldNumericFormat, FormFieldCurrencyInput, FormFieldDatePicker, FormFieldInput, FormFieldPassword, FormFieldRadio, FormFieldRadioCard, FormFieldRadioCardIcony, FormFieldSegmentedControl, FormFieldSelect, FormFieldSwitch, FormFieldTextarea, useFormGroup, FormGroup, yup2 as yup, z3 as z, yupResolver, zodResolver, Controller, FormProvider2 as FormProvider, useController, useFieldArray, useForm, useFormContext, useFormState, useWatch };

package/dist/esm/index.js

@@ -1,4 +1,4 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
-import { Controller, Form, FormFieldCheckbox, FormFieldCreditCardNumber, FormFieldCurrencyInput, FormFieldDatePicker, FormFieldInput, FormFieldNumericFormat, FormFieldPassword, FormFieldRadio, FormFieldRadioCard, FormFieldRadioCardIcony, FormFieldSegmentedControl, FormFieldSelect, FormFieldSwitch, FormFieldTextarea, FormGroup, FormProvider, useController, useFieldArray, useForm, useFormContext, useFormGroup, useFormState, useWatch, yup, yupResolver } from "./chunk-ILQOS34E.js";
+import { Controller, Form, FormFieldCheckbox, FormFieldCreditCardNumber, FormFieldCurrencyInput, FormFieldDatePicker, FormFieldInput, FormFieldNumericFormat, FormFieldPassword, FormFieldRadio, FormFieldRadioCard, FormFieldRadioCardIcony, FormFieldSegmentedControl, FormFieldSelect, FormFieldSwitch, FormFieldTextarea, FormGroup, FormProvider, useController, useFieldArray, useForm, useFormContext, useFormGroup, useFormState, useWatch, yup, yupResolver, z, zodResolver } from "./chunk-PBTKK77I.js";
 import { FormErrorMessage, FormField, FormFieldPatternFormat } from "./chunk-BL55OAIO.js";
-export { Controller, Form, FormErrorMessage, FormField, FormFieldCheckbox, FormFieldCreditCardNumber, FormFieldCurrencyInput, FormFieldDatePicker, FormFieldInput, FormFieldNumericFormat, FormFieldPassword, FormFieldPatternFormat, FormFieldRadio, FormFieldRadioCard, FormFieldRadioCardIcony, FormFieldSegmentedControl, FormFieldSelect, FormFieldSwitch, FormFieldTextarea, FormGroup, FormProvider, useController, useFieldArray, useForm, useFormContext, useFormGroup, useFormState, useWatch, yup, yupResolver };
+export { Controller, Form, FormErrorMessage, FormField, FormFieldCheckbox, FormFieldCreditCardNumber, FormFieldCurrencyInput, FormFieldDatePicker, FormFieldInput, FormFieldNumericFormat, FormFieldPassword, FormFieldPatternFormat, FormFieldRadio, FormFieldRadioCard, FormFieldRadioCardIcony, FormFieldSegmentedControl, FormFieldSelect, FormFieldSwitch, FormFieldTextarea, FormGroup, FormProvider, useController, useFieldArray, useForm, useFormContext, useFormGroup, useFormState, useWatch, yup, yupResolver, z, zodResolver };

package/dist/index.d.ts

@@ -8,10 +8,13 @@ import { F as FormFieldProps, a as FormFieldPatternFormatProps } from './FormFie
 export { b as FormField, c as FormFieldPatternFormat } from './FormFieldPatternFormat-kaO0pl1R.js';
 import { NumericFormatProps } from 'react-number-format';
 import { DateRange } from '@ttoss/components/DatePicker';
-import './typings.d-BZ6kUiQ4.js';
+import './typings.d-BzNUo1mD.js';
 import * as yup from 'yup';
 export { yup };
+import * as z from 'zod';
+export { z };
 export { yupResolver } from '@hookform/resolvers/yup';
+export { zodResolver } from '@hookform/resolvers/zod';
 
 declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues = TFieldValues>({ children, onSubmit, sx, ...formMethods }: {
     children?: React.ReactNode;

package/dist/typings.d-BzNUo1mD.d.ts

@@ -0,0 +1,30 @@
+import { Maybe, AnyObject, Flags, Schema } from 'yup';
+import { z } from 'zod';
+
+declare module 'yup' {
+  interface StringSchema<
+    TType extends Maybe<string> = string | undefined,
+    TContext extends AnyObject = AnyObject,
+    TDefault = undefined,
+    TFlags extends Flags = '',
+  > extends Schema<TType, TContext, TDefault, TFlags> {
+    cnpj(): this;
+    cpf(): this;
+  }
+}
+
+declare module 'zod' {
+  interface ZodString {
+    cnpj(message?: string): z.ZodEffects<this, string, string>;
+    cpf(message?: string): z.ZodEffects<this, string, string>;
+  }
+
+  interface ZodEffects<
+    T extends z.ZodTypeAny,
+    Output = T['_output'],
+    Input = T['_input'],
+  > {
+    cnpj(message?: string): z.ZodEffects<this, Output, Input>;
+    cpf(message?: string): z.ZodEffects<this, Output, Input>;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/forms",
-  "version": "0.40.1",
+  "version": "0.41.0",
   "license": "MIT",
   "author": "ttoss",
   "contributors": [
@@ -33,31 +33,32 @@
   "dependencies": {
     "@hookform/error-message": "^2.0.1",
     "@hookform/resolvers": "^5.2.2",
-    "react-hook-form": "^7.66.1",
+    "react-hook-form": "^7.71.1",
     "react-number-format": "^5.4.4",
-    "yup": "^1.7.1"
+    "yup": "^1.7.1",
+    "zod": "^3.25.0"
   },
   "peerDependencies": {
     "react": ">=16.8.0",
-    "@ttoss/components": "^2.12.6",
-    "@ttoss/ui": "^6.5.1",
-    "@ttoss/react-i18n": "^2.0.26"
+    "@ttoss/components": "^2.13.0",
+    "@ttoss/ui": "^6.6.0",
+    "@ttoss/react-i18n": "^2.1.0"
   },
   "devDependencies": {
     "@types/jest": "^30.0.0",
-    "@types/react": "^19.2.8",
+    "@types/react": "^19.2.14",
     "jest": "^30.2.0",
-    "react": "^19.2.3",
-    "react-error-boundary": "^6.0.0",
+    "react": "^19.2.4",
+    "react-error-boundary": "^6.1.0",
     "tsup": "^8.5.1",
     "yup": "^1.7.1",
-    "@ttoss/components": "^2.12.6",
-    "@ttoss/i18n-cli": "^0.7.38",
-    "@ttoss/react-i18n": "^2.0.26",
-    "@ttoss/test-utils": "^4.0.3",
-    "@ttoss/ui": "^6.5.1",
-    "@ttoss/react-icons": "^0.5.7",
-    "@ttoss/config": "^1.35.12"
+    "@ttoss/components": "^2.13.0",
+    "@ttoss/react-icons": "^0.6.0",
+    "@ttoss/i18n-cli": "^0.7.39",
+    "@ttoss/react-i18n": "^2.1.0",
+    "@ttoss/config": "^1.36.0",
+    "@ttoss/test-utils": "^4.1.0",
+    "@ttoss/ui": "^6.6.0"
   },
   "publishConfig": {
     "access": "public",

package/dist/typings.d-BZ6kUiQ4.d.ts

@@ -1,13 +0,0 @@
-import { Maybe, AnyObject, Flags, Schema } from 'yup';
-
-declare module 'yup' {
-  interface StringSchema<
-    TType extends Maybe<string> = string | undefined,
-    TContext extends AnyObject = AnyObject,
-    TDefault = undefined,
-    TFlags extends Flags = '',
-  > extends Schema<TType, TContext, TDefault, TFlags> {
-    cnpj(): this;
-    cpf(): this;
-  }
-}