@ttoss/forms 0.32.3 → 0.32.4

package/README.md

@@ -85,11 +85,21 @@ const MyForm = () => {
 
 ### Validation Messages
 
-Invalid fields display default error messages like "Field is required". Customize these messages via i18n configuration—see [React-i18n](https://ttoss.dev/docs/modules/packages/react-i18n/) and [i18n-CLI](https://ttoss.dev/docs/modules/packages/i18n-cli/).
+Invalid fields display default error messages like "Field is required". These messages are defined using i18n and can be customized for each locale.
 
-### Custom Error Messages
+#### Default Yup Messages
 
-Provide custom error messages using i18n patterns:
+The package provides internationalized default messages for common Yup 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"
+
+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
+
+You can also provide custom error messages directly in your Yup schemas using i18n patterns:
 
 ```tsx
 import { useI18n } from '@ttoss/react-i18n';
@@ -431,17 +441,30 @@ Numeric input with formatting support (decimals, thousands separators).
 
 ### FormFieldCurrencyInput
 
-Currency input with locale-based formatting.
+Currency input with locale-based formatting. The decimal and thousand separators are automatically determined by the locale set in the `I18nProvider`.
 
 ```tsx
-<FormFieldCurrencyInput
-  name="amount"
-  label="Amount"
-  prefix="$"
-  decimalsLimit={2}
-/>
+<FormFieldCurrencyInput name="amount" label="Amount" prefix="$" />
+```
+
+#### Customizing Separators per Locale
+
+The component uses i18n messages to determine the decimal and thousand separators based on the current locale. You can customize these for each locale in your application:
+
+1. First, extract the i18n messages by running `pnpm run i18n` in your package
+2. In your application's i18n files (e.g., `i18n/compiled/pt-BR.json`), add the custom separators:
+
+```json
+{
+  "JnCaDG": ",", // Decimal separator (default: ".")
+  "0+4wTp": "." // Thousand separator (default: ",")
+}
 ```
 
+This approach allows each locale to define its own number formatting rules, which will be automatically applied to all currency inputs.
+
+For more information about the i18n workflow, see the [i18n-CLI documentation](https://ttoss.dev/docs/modules/packages/i18n-cli/).
+
 ### FormFieldPatternFormat
 
 Input with custom format patterns.

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-HUZSVTQD.js";
+import { Form, useForm, yupResolver } from "../chunk-L2FEA5RZ.js";
 import { __name } from "../chunk-A5YD5USY.js";
 
 // src/MultistepForm/MultistepForm.tsx

package/dist/esm/{chunk-HUZSVTQD.js → chunk-L2FEA5RZ.js}

@@ -80,6 +80,9 @@ var FormFieldCreditCardNumber = /* @__PURE__ */__name(({
   });
 }, "FormFieldCreditCardNumber");
 
+// src/FormFieldCurrencyInput.tsx
+import { defineMessages, useI18n } from "@ttoss/react-i18n";
+
 // src/FormFieldNumericFormat.tsx
 import { Input } from "@ttoss/ui";
 import { NumericFormat } from "react-number-format";
@@ -131,19 +134,40 @@ var FormFieldNumericFormat = /* @__PURE__ */__name(({
 }, "FormFieldNumericFormat");
 
 // src/FormFieldCurrencyInput.tsx
+var messages = defineMessages({
+  decimalSeparator: {
+    id: "JnCaDG",
+    defaultMessage: [{
+      "type": 0,
+      "value": "."
+    }]
+  },
+  thousandSeparator: {
+    id: "0+4wTp",
+    defaultMessage: [{
+      "type": 0,
+      "value": ","
+    }]
+  }
+});
 var FormFieldCurrencyInput = /* @__PURE__ */__name(({
   prefix,
-  decimalSeparator = ",",
-  thousandSeparator = ".",
+  decimalSeparator,
+  thousandSeparator,
   ...formFieldNumericFormatProps
 }) => {
+  const {
+    intl
+  } = useI18n();
+  const finalDecimalSeparator = decimalSeparator ?? intl.formatMessage(messages.decimalSeparator);
+  const finalThousandSeparator = thousandSeparator ?? intl.formatMessage(messages.thousandSeparator);
   return /* @__PURE__ */React.createElement(FormFieldNumericFormat, {
     fixedDecimalScale: true,
     decimalScale: 2,
     prefix,
-    decimalSeparator,
-    thousandSeparator,
-    placeholder: `${prefix} 0${decimalSeparator}00`,
+    decimalSeparator: finalDecimalSeparator,
+    thousandSeparator: finalThousandSeparator,
+    placeholder: `${prefix} 0${finalDecimalSeparator}00`,
     allowNegative: false,
     ...formFieldNumericFormatProps
   });

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, FormFieldInput, FormFieldNumericFormat, FormFieldPassword, FormFieldRadio, FormFieldRadioCard, FormFieldRadioCardIcony, FormFieldSelect, FormFieldSwitch, FormFieldTextarea, FormGroup, FormProvider, useController, useFieldArray, useForm, useFormContext, useFormGroup, useFormState, useWatch, yup, yupResolver } from "./chunk-HUZSVTQD.js";
+import { Controller, Form, FormFieldCheckbox, FormFieldCreditCardNumber, FormFieldCurrencyInput, FormFieldInput, FormFieldNumericFormat, FormFieldPassword, FormFieldRadio, FormFieldRadioCard, FormFieldRadioCardIcony, FormFieldSelect, FormFieldSwitch, FormFieldTextarea, FormGroup, FormProvider, useController, useFieldArray, useForm, useFormContext, useFormGroup, useFormState, useWatch, yup, yupResolver } from "./chunk-L2FEA5RZ.js";
 import { FormErrorMessage, FormField, FormFieldPatternFormat } from "./chunk-A5YD5USY.js";
 export { Controller, Form, FormErrorMessage, FormField, FormFieldCheckbox, FormFieldCreditCardNumber, FormFieldCurrencyInput, FormFieldInput, FormFieldNumericFormat, FormFieldPassword, FormFieldPatternFormat, FormFieldRadio, FormFieldRadioCard, FormFieldRadioCardIcony, FormFieldSelect, FormFieldSwitch, FormFieldTextarea, FormGroup, FormProvider, useController, useFieldArray, useForm, useFormContext, useFormGroup, useFormState, useWatch, yup, yupResolver };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/forms",
-  "version": "0.32.3",
+  "version": "0.32.4",
   "license": "MIT",
   "author": "ttoss",
   "contributors": [
@@ -39,8 +39,8 @@
   },
   "peerDependencies": {
     "react": ">=16.8.0",
-    "@ttoss/ui": "^5.10.7",
-    "@ttoss/react-i18n": "^2.0.21"
+    "@ttoss/react-i18n": "^2.0.21",
+    "@ttoss/ui": "^5.10.7"
   },
   "devDependencies": {
     "@types/jest": "^30.0.0",
@@ -51,11 +51,11 @@
     "tsup": "^8.5.1",
     "yup": "^1.7.1",
     "@ttoss/config": "^1.35.11",
-    "@ttoss/i18n-cli": "^0.7.37",
+    "@ttoss/react-icons": "^0.5.2",
     "@ttoss/test-utils": "^3.0.3",
     "@ttoss/ui": "^5.10.7",
-    "@ttoss/react-icons": "^0.5.2",
-    "@ttoss/react-i18n": "^2.0.21"
+    "@ttoss/react-i18n": "^2.0.21",
+    "@ttoss/i18n-cli": "^0.7.37"
   },
   "publishConfig": {
     "access": "public",