@ttoss/forms 0.32.2 → 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';
@@ -226,6 +236,55 @@ All form field components share common props:
 - `warning`: Warning message displayed below the field
 - `sx`: Theme-UI styling object
 
+### Disabling Form Fields
+
+You can disable form fields in two ways:
+
+**1. Disable the entire form:**
+
+Set `disabled: true` in `useForm` to disable all fields at once:
+
+```tsx
+const formMethods = useForm({
+  disabled: true, // Disables all fields
+});
+```
+
+This is particularly useful for preventing user interaction during asynchronous operations:
+
+```tsx
+const [isSubmitting, setIsSubmitting] = useState(false);
+
+const formMethods = useForm({
+  disabled: isSubmitting, // Disable form during submission
+});
+
+const onSubmit = async (data) => {
+  setIsSubmitting(true);
+  await saveData(data);
+  setIsSubmitting(false);
+};
+```
+
+**2. Disable individual fields:**
+
+Use the `disabled` prop on specific form field components:
+
+```tsx
+<FormFieldInput name="email" label="Email" disabled />
+```
+
+Field-level `disabled` props override the form-level setting:
+
+```tsx
+const formMethods = useForm({
+  disabled: false,
+});
+
+// This field will be disabled even though the form is enabled
+<FormFieldInput name="id" label="ID" disabled />;
+```
+
 ### FormFieldInput
 
 Text input field supporting all HTML input types.
@@ -382,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/Brazil/index.d.ts

@@ -1,7 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { FieldValues, FieldPath } from 'react-hook-form';
 import { PatternFormatProps } from 'react-number-format';
-import { F as FormFieldProps, a as FormFieldPatternFormatProps } from '../FormFieldPatternFormat-CxkCeniP.js';
+import { F as FormFieldProps, a as FormFieldPatternFormatProps } from '../FormFieldPatternFormat-SKHmLjAO.js';
 import '@ttoss/ui';
 import 'react';
 

package/dist/{FormFieldPatternFormat-CxkCeniP.d.ts → FormFieldPatternFormat-SKHmLjAO.d.ts}

@@ -31,7 +31,7 @@ type FormFieldProps<TFieldValues extends FieldValues = FieldValues, TName extend
 type FormFieldCompleteProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = {
     render: (props: UseControllerReturn<TFieldValues, TName>) => React.ReactElement;
 } & FormFieldProps<TFieldValues, TName>;
-declare const FormField: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ label, id: idProp, name, defaultValue, disabled, tooltip, inputTooltip, sx, css, render, warning, rules, }: FormFieldCompleteProps<TFieldValues, TName>) => react_jsx_runtime.JSX.Element;
+declare const FormField: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ label, id: idProp, name, defaultValue, disabled: propsDisabled, tooltip, inputTooltip, sx, css, render, warning, rules, }: FormFieldCompleteProps<TFieldValues, TName>) => react_jsx_runtime.JSX.Element;
 
 type FormFieldPatternFormatProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = FormFieldProps<TFieldValues, TName> & Omit<PatternFormatProps, 'name'>;
 declare const FormFieldPatternFormat: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ disabled, ...props }: FormFieldPatternFormatProps<TFieldValues, TName>) => react_jsx_runtime.JSX.Element;

package/dist/esm/Brazil/index.js

@@ -1,6 +1,6 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
 import * as React from 'react';
-import { FormField, FormFieldCNPJ, FormFieldPatternFormat, __name, isCnpjValid } from "../chunk-X42ZUF2A.js";
+import { FormField, FormFieldCNPJ, FormFieldPatternFormat, __name, isCnpjValid } from "../chunk-A5YD5USY.js";
 
 // src/Brazil/FormFieldPhone.tsx
 import { Input } from "@ttoss/ui";
@@ -50,7 +50,7 @@ var FormFieldPhone = /* @__PURE__ */__name(({
         format,
         customInput: Input,
         placeholder,
-        disabled
+        disabled: disabled ?? field.disabled
       });
     }, "render")
   });

package/dist/esm/MultistepForm/index.js

@@ -1,7 +1,7 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
 import * as React from 'react';
-import { Form, useForm, yupResolver } from "../chunk-WZLEU3SB.js";
-import { __name } from "../chunk-X42ZUF2A.js";
+import { Form, useForm, yupResolver } from "../chunk-L2FEA5RZ.js";
+import { __name } from "../chunk-A5YD5USY.js";
 
 // src/MultistepForm/MultistepForm.tsx
 import { Flex as Flex6 } from "@ttoss/ui";

package/dist/esm/{chunk-X42ZUF2A.js → chunk-A5YD5USY.js}

@@ -54,7 +54,7 @@ var FormField = /* @__PURE__ */__name(({
   id: idProp,
   name,
   defaultValue,
-  disabled,
+  disabled: propsDisabled,
   tooltip,
   inputTooltip,
   sx,
@@ -73,6 +73,7 @@ var FormField = /* @__PURE__ */__name(({
       errors
     }
   } = useFormContext2();
+  const disabled = propsDisabled ?? controllerReturn.field.disabled;
   const hasError = !!errors[name];
   const uniqueId = React2.useId();
   const id = idProp || `form-field-${name}-${uniqueId}`;
@@ -138,8 +139,17 @@ var FormField = /* @__PURE__ */__name(({
       return element.type === component;
     });
   }, "isCheckboxOrSwitch");
+  const controllerReturnWithDisabled = React2.useMemo(() => {
+    return {
+      ...controllerReturn,
+      field: {
+        ...controllerReturn.field,
+        disabled
+      }
+    };
+  }, [controllerReturn, disabled]);
   const memoizedRender = React2.useMemo(() => {
-    return React2.Children.map(render(controllerReturn), child => {
+    return React2.Children.map(render(controllerReturnWithDisabled), child => {
       if (! /* @__PURE__ */React2.isValidElement(child)) {
         return null;
       }
@@ -192,7 +202,7 @@ var FormField = /* @__PURE__ */__name(({
         tooltip
       }, label), /* @__PURE__ */React2.createElement(child.type, elementProps), tooltipElement);
     });
-  }, [render, controllerReturn, label, disabled, id, tooltip, warning, inputTooltip, showInputTooltip, tooltipId, handleInputClick, handleInputFocus, handleInputBlur, tooltipElement]);
+  }, [render, controllerReturnWithDisabled, label, disabled, id, tooltip, warning, inputTooltip, showInputTooltip, tooltipId, handleInputClick, handleInputFocus, handleInputBlur, tooltipElement]);
   return /* @__PURE__ */React2.createElement(Flex, {
     sx: {
       flexDirection: "column",
@@ -260,7 +270,7 @@ var FormFieldPatternFormat = /* @__PURE__ */__name(({
           field.onChange(values.value);
         }, "onValueChange"),
         customInput: Input,
-        disabled,
+        disabled: disabled ?? field.disabled,
         "aria-invalid": fieldState.error ? "true" : void 0
       });
     }, "render")
@@ -352,7 +362,7 @@ var FormFieldCNPJ = /* @__PURE__ */__name(({
         format: "##.###.###/####-##",
         customInput: Input2,
         placeholder,
-        disabled
+        disabled: disabled ?? field.disabled
       });
     }, "render")
   });

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

@@ -1,6 +1,6 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
 import * as React from 'react';
-import { FormErrorMessage, FormField, FormFieldPatternFormat, __name, isCnpjValid } from "./chunk-X42ZUF2A.js";
+import { FormErrorMessage, FormField, FormFieldPatternFormat, __name, isCnpjValid } from "./chunk-A5YD5USY.js";
 
 // src/Form.tsx
 import { Box } from "@ttoss/ui";
@@ -60,7 +60,7 @@ var FormFieldCheckbox = /* @__PURE__ */__name(({
       return /* @__PURE__ */React.createElement(Checkbox, {
         ...checkboxProps,
         ...field,
-        disabled,
+        disabled: disabled ?? field.disabled,
         "aria-invalid": !!fieldState.error
       });
     }, "render")
@@ -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";
@@ -124,26 +127,47 @@ var FormFieldNumericFormat = /* @__PURE__ */__name(({
           field.onChange(values.floatValue);
         }, "onValueChange"),
         customInput: Input,
-        disabled
+        disabled: disabled ?? field.disabled
       });
     }, "render")
   });
 }, "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
   });
@@ -187,7 +211,7 @@ var FormFieldInput = /* @__PURE__ */__name(({
       return /* @__PURE__ */React.createElement(Input2, {
         ...inputProps,
         ...field,
-        disabled,
+        disabled: disabled ?? field.disabled,
         "aria-invalid": fieldState.error ? "true" : void 0
       });
     }, "render")
@@ -232,7 +256,7 @@ var FormFieldPassword = /* @__PURE__ */__name(({
       return /* @__PURE__ */React.createElement(InputPassword, {
         ...inputProps,
         ...field,
-        disabled,
+        disabled: disabled ?? field.disabled,
         "aria-invalid": fieldState.error ? "true" : void 0
       });
     }, "render")
@@ -293,7 +317,7 @@ var FormFieldRadio = /* @__PURE__ */__name(({
           value: option.value,
           checked: field.value === option.value,
           name,
-          disabled,
+          disabled: disabled ?? field.disabled,
           ...radioProps
         }), option.label);
       }));
@@ -368,7 +392,7 @@ var FormFieldRadioCard = /* @__PURE__ */__name(({
           value: option.value,
           checked: field.value === option.value,
           name,
-          disabled
+          disabled: disabled ?? field.disabled
         }), /* @__PURE__ */React.createElement(Flex2, {
           sx: {
             flexDirection: "column",
@@ -385,8 +409,7 @@ var FormFieldRadioCard = /* @__PURE__ */__name(({
 }, "FormFieldRadioCard");
 
 // src/FormFieldRadioCardIcony.tsx
-import { Box as Box3, Flex as Flex3, Text as Text2 } from "@ttoss/ui";
-import { Tag } from "@ttoss/ui";
+import { Box as Box3, Flex as Flex3, Tag, Text as Text2 } from "@ttoss/ui";
 import * as React3 from "react";
 var FormFieldRadioCardIcony = /* @__PURE__ */__name(({
   disabled,
@@ -422,8 +445,9 @@ var FormFieldRadioCardIcony = /* @__PURE__ */__name(({
     render: /* @__PURE__ */__name(({
       field
     }) => {
+      const isDisabled = disabled ?? field.disabled;
       const handleOptionClick = /* @__PURE__ */__name(optionValue => {
-        if (!disabled) {
+        if (!isDisabled) {
           field.onChange(optionValue);
           field.onBlur();
         }
@@ -455,8 +479,8 @@ var FormFieldRadioCardIcony = /* @__PURE__ */__name(({
             alignItems: "center",
             justifyContent: "center",
             textAlign: "center",
-            cursor: disabled ? "not-allowed" : "pointer",
-            opacity: disabled ? 0.5 : 1,
+            cursor: isDisabled ? "not-allowed" : "pointer",
+            opacity: isDisabled ? 0.5 : 1,
             transition: "all 0.2s ease-in-out"
           }
         }, IconComponent && /* @__PURE__ */React3.createElement(Box3, {
@@ -534,7 +558,7 @@ var FormFieldSelect = /* @__PURE__ */__name(({
       return /* @__PURE__ */React.createElement(Select, {
         ...selectProps,
         ...field,
-        isDisabled: disabled,
+        isDisabled: disabled ?? field.disabled,
         "aria-invalid": fieldState.error ? "true" : void 0
       });
     }, "render")
@@ -579,7 +603,7 @@ var FormFieldSwitch = /* @__PURE__ */__name(({
       return /* @__PURE__ */React.createElement(Switch, {
         ...switchProps,
         ...field,
-        disabled,
+        disabled: disabled ?? field.disabled,
         "aria-invalid": !!fieldState.error
       });
     }, "render")
@@ -624,7 +648,7 @@ var FormFieldTextarea = /* @__PURE__ */__name(({
       return /* @__PURE__ */React.createElement(Textarea, {
         ...textareaProps,
         ...field,
-        disabled,
+        disabled: disabled ?? field.disabled,
         "aria-invalid": fieldState.error ? "true" : void 0
       });
     }, "render")

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-WZLEU3SB.js";
-import { FormErrorMessage, FormField, FormFieldPatternFormat } from "./chunk-X42ZUF2A.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/dist/index.d.ts

@@ -4,8 +4,8 @@ import * as React from 'react';
 import { FieldValues, FormProviderProps, FieldName, FieldPath } 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 FormFieldProps, a as FormFieldPatternFormatProps } from './FormFieldPatternFormat-CxkCeniP.js';
-export { b as FormField, c as FormFieldPatternFormat } from './FormFieldPatternFormat-CxkCeniP.js';
+import { F as FormFieldProps, a as FormFieldPatternFormatProps } from './FormFieldPatternFormat-SKHmLjAO.js';
+export { b as FormField, c as FormFieldPatternFormat } from './FormFieldPatternFormat-SKHmLjAO.js';
 import { NumericFormatProps } from 'react-number-format';
 import './typings.d-HZBqJJjn.js';
 import * as yup from 'yup';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/forms",
-  "version": "0.32.2",
+  "version": "0.32.4",
   "license": "MIT",
   "author": "ttoss",
   "contributors": [
@@ -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-i18n": "^2.0.21",
     "@ttoss/react-icons": "^0.5.2",
     "@ttoss/test-utils": "^3.0.3",
-    "@ttoss/ui": "^5.10.7"
+    "@ttoss/ui": "^5.10.7",
+    "@ttoss/react-i18n": "^2.0.21",
+    "@ttoss/i18n-cli": "^0.7.37"
   },
   "publishConfig": {
     "access": "public",