@ttoss/forms 0.29.2 → 0.29.3

package/dist/Brazil/index.d.ts

@@ -1,10 +1,11 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { PatternFormatProps } from 'react-number-format';
-import { F as FormFieldPatternFormatProps } from '../FormFieldPatternFormat-CkcL14ho.js';
+import { F as FormFieldPatternFormatProps } from '../FormFieldPatternFormat-CXU5e0oh.js';
 
 type FormFieldCNPJProps = {
     label: string;
     name: string;
+    warning?: string | React.ReactNode;
 } & Partial<PatternFormatProps>;
 declare const isCnpjValid: (cnpj: any) => boolean;
 declare const FormFieldCNPJ: ({ label, name, ...patternFormatProps }: FormFieldCNPJProps) => react_jsx_runtime.JSX.Element;
@@ -12,6 +13,7 @@ declare const FormFieldCNPJ: ({ label, name, ...patternFormatProps }: FormFieldC
 type FormFieldPhoneProps = {
     label: string;
     name: string;
+    warning?: string | React.ReactNode;
 } & Partial<PatternFormatProps>;
 declare const FormFieldPhone: ({ label, name, ...patternFormatProps }: FormFieldPhoneProps) => react_jsx_runtime.JSX.Element;
 

package/dist/{FormFieldPatternFormat-CkcL14ho.d.ts → FormFieldPatternFormat-CXU5e0oh.d.ts}

@@ -4,7 +4,8 @@ import { PatternFormatProps } from 'react-number-format';
 type FormFieldPatternFormatProps = {
     label?: string;
     name: string;
+    warning?: string | React.ReactNode;
 } & PatternFormatProps;
-declare const FormFieldPatternFormat: ({ label, name, ...patternFormatProps }: FormFieldPatternFormatProps) => react_jsx_runtime.JSX.Element;
+declare const FormFieldPatternFormat: ({ label, name, warning, ...patternFormatProps }: FormFieldPatternFormatProps) => react_jsx_runtime.JSX.Element;
 
 export { type FormFieldPatternFormatProps as F, FormFieldPatternFormat as a };

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-MXGOGSWG.js";
+import { FormField, FormFieldCNPJ, FormFieldPatternFormat, isCnpjValid } from "../chunk-KEIHNDHT.js";
 
 // src/Brazil/FormFieldPhone.tsx
 import { Input } from "@ttoss/ui";
@@ -13,6 +13,7 @@ var FormFieldPhone = ({
   return /* @__PURE__ */jsx(FormField, {
     name,
     label,
+    warning: patternFormatProps.warning,
     render: ({
       field
     }) => {

package/dist/esm/MultistepForm/index.js

@@ -1,5 +1,5 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
-import { Form, useForm, yupResolver } from "../chunk-MXGOGSWG.js";
+import { Form, useForm, yupResolver } from "../chunk-KEIHNDHT.js";
 
 // src/MultistepForm/MultistepForm.tsx
 import { Flex as Flex6 } from "@ttoss/ui";

package/dist/esm/{chunk-MXGOGSWG.js → chunk-KEIHNDHT.js}

@@ -26,9 +26,9 @@ var Form = ({
 
 // src/FormErrorMessage.tsx
 import { ErrorMessage } from "@hookform/error-message";
-import { useFormContext } from "react-hook-form";
 import { FormattedMessage } from "@ttoss/react-i18n";
 import { HelpText } from "@ttoss/ui";
+import { useFormContext } from "react-hook-form";
 import { jsx as jsx2 } from "react/jsx-runtime";
 var isMessageDescriptor = possibleMessageDescriptor => {
   return possibleMessageDescriptor !== void 0 && possibleMessageDescriptor.defaultMessage !== void 0;
@@ -70,7 +70,7 @@ var FormErrorMessage = ({
 // src/FormField.tsx
 import { Checkbox, Flex, Label, Switch } from "@ttoss/ui";
 import * as React from "react";
-import { useController } from "react-hook-form";
+import { useController, useFormContext as useFormContext2 } from "react-hook-form";
 import { jsx as jsx3, jsxs } from "react/jsx-runtime";
 var FormField = ({
   label,
@@ -82,12 +82,19 @@ var FormField = ({
   onTooltipClick,
   sx,
   css,
-  render
+  render,
+  warning
 }) => {
   const controllerReturn = useController({
     name,
     defaultValue
   });
+  const {
+    formState: {
+      errors
+    }
+  } = useFormContext2();
+  const hasError = !!errors[name];
   const uniqueId = React.useId();
   const id = idProp || `form-field-${name}-${uniqueId}`;
   const memoizedRender = React.useMemo(() => {
@@ -104,7 +111,13 @@ var FormField = ({
           tooltip,
           onTooltipClick,
           children: [/* @__PURE__ */jsx3(Flex, {
-            children: React.createElement(child.type, {
+            children: warning ? React.createElement(child.type, {
+              id,
+              ...childProps,
+              ...(warning ? {
+                trailingIcon: "warning-alt"
+              } : {})
+            }) : React.createElement(child.type, {
               id,
               ...childProps
             })
@@ -123,13 +136,19 @@ var FormField = ({
           tooltip,
           onTooltipClick,
           children: label
-        }), React.createElement(child.type, {
+        }), warning ? React.createElement(child.type, {
+          id,
+          ...childProps,
+          ...(warning ? {
+            trailingIcon: "warning-alt"
+          } : {})
+        }) : React.createElement(child.type, {
           id,
           ...childProps
         })]
       });
     });
-  }, [render, controllerReturn, label, disabled, id, tooltip, onTooltipClick]);
+  }, [render, controllerReturn, label, disabled, id, tooltip, onTooltipClick, warning]);
   return /* @__PURE__ */jsxs(Flex, {
     sx: {
       flexDirection: "column",
@@ -140,6 +159,15 @@ var FormField = ({
     css,
     children: [memoizedRender, /* @__PURE__ */jsx3(FormErrorMessage, {
       name
+    }), warning && !hasError && /* @__PURE__ */jsx3(Flex, {
+      sx: {
+        color: "feedback.text.caution.default",
+        fontSize: "sm",
+        gap: "2",
+        paddingBottom: "1",
+        alignItems: "center"
+      },
+      children: warning
     })]
   });
 };
@@ -181,11 +209,13 @@ import { jsx as jsx5 } from "react/jsx-runtime";
 var FormFieldPatternFormat = ({
   label,
   name,
+  warning,
   ...patternFormatProps
 }) => {
   return /* @__PURE__ */jsx5(FormField, {
     name,
     label,
+    warning,
     render: ({
       field,
       fieldState
@@ -215,6 +245,7 @@ var FormFieldCreditCardNumber = ({
   return /* @__PURE__ */jsx6(FormFieldPatternFormat, {
     name,
     label,
+    warning: formFieldPatternFormatProps.warning,
     format: "#### #### #### ####",
     placeholder: "1234 1234 1234 1234",
     ...formFieldPatternFormatProps
@@ -228,6 +259,7 @@ import { jsx as jsx7 } from "react/jsx-runtime";
 var FormFieldNumericFormat = ({
   label,
   name,
+  warning,
   tooltip,
   onTooltipClick,
   ...numericFormatProps
@@ -235,6 +267,7 @@ var FormFieldNumericFormat = ({
   return /* @__PURE__ */jsx7(FormField, {
     label,
     name,
+    warning,
     tooltip,
     onTooltipClick,
     render: ({
@@ -267,6 +300,7 @@ var FormFieldCurrencyInput = ({
   return /* @__PURE__ */jsx8(FormFieldNumericFormat, {
     name,
     label,
+    warning: formFieldNumericFormatProps.warning,
     fixedDecimalScale: true,
     decimalScale: 2,
     prefix,
@@ -296,6 +330,7 @@ var FormFieldInput = ({
     disabled: inputProps.disabled,
     tooltip,
     onTooltipClick,
+    warning: inputProps.warning,
     sx,
     defaultValue,
     render: ({
@@ -329,6 +364,7 @@ var FormFieldPassword = ({
     disabled: inputProps.disabled,
     tooltip,
     onTooltipClick,
+    warning: inputProps.warning,
     sx,
     defaultValue,
     render: ({
@@ -415,6 +451,7 @@ var FormFieldSelect = ({
     disabled,
     tooltip,
     onTooltipClick,
+    warning: selectProps.warning,
     sx,
     css,
     render: ({
@@ -467,6 +504,7 @@ import { jsx as jsx14 } from "react/jsx-runtime";
 var FormFieldTextarea = ({
   label,
   name,
+  warning,
   sx,
   ...textareaProps
 }) => {
@@ -476,6 +514,7 @@ var FormFieldTextarea = ({
     name,
     id,
     sx,
+    warning,
     render: ({
       field,
       fieldState
@@ -709,6 +748,7 @@ var FormFieldCNPJ = ({
   return /* @__PURE__ */jsx16(FormField, {
     name,
     label,
+    warning: patternFormatProps.warning,
     render: ({
       field
     }) => {
@@ -749,6 +789,6 @@ import * as yup2 from "yup";
 
 // src/index.ts
 import { yupResolver } from "@hookform/resolvers/yup";
-import { Controller, FormProvider as FormProvider2, useController as useController2, useFieldArray, useForm, useFormContext as useFormContext2, useFormState, useWatch } from "react-hook-form";
+import { Controller, FormProvider as FormProvider2, useController as useController2, useFieldArray, useForm, useFormContext as useFormContext3, useFormState, useWatch } from "react-hook-form";
 export * from "react-hook-form";
-export { Form, FormErrorMessage, FormField, FormFieldCheckbox, FormFieldPatternFormat, FormFieldCreditCardNumber, FormFieldNumericFormat, FormFieldCurrencyInput, FormFieldInput, FormFieldPassword, FormFieldRadio, FormFieldSelect, FormFieldSwitch, FormFieldTextarea, useFormGroup, FormGroup, isCnpjValid, FormFieldCNPJ, yup2 as yup, yupResolver, Controller, FormProvider2 as FormProvider, useController2 as useController, useFieldArray, useForm, useFormContext2 as useFormContext, useFormState, useWatch };
+export { Form, FormErrorMessage, FormField, FormFieldCheckbox, FormFieldPatternFormat, FormFieldCreditCardNumber, FormFieldNumericFormat, FormFieldCurrencyInput, FormFieldInput, FormFieldPassword, FormFieldRadio, FormFieldSelect, FormFieldSwitch, FormFieldTextarea, useFormGroup, FormGroup, isCnpjValid, FormFieldCNPJ, yup2 as yup, yupResolver, Controller, FormProvider2 as FormProvider, useController2 as useController, useFieldArray, useForm, useFormContext3 as useFormContext, useFormState, useWatch };

package/dist/esm/index.js

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

package/dist/index.d.ts

@@ -1,11 +1,11 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { BoxProps, SxProp, CheckboxProps, InputProps, InputPasswordProps, RadioProps, SelectProps, SwitchProps, TextareaProps } from '@ttoss/ui';
-import * as React from 'react';
+import * as React$1 from 'react';
 import { FieldValues, FormProviderProps, FieldName, FieldPath, FieldPathValue, UseControllerReturn } 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 FormFieldPatternFormatProps } from './FormFieldPatternFormat-CkcL14ho.js';
-export { a as FormFieldPatternFormat } from './FormFieldPatternFormat-CkcL14ho.js';
+import { F as FormFieldPatternFormatProps } from './FormFieldPatternFormat-CXU5e0oh.js';
+export { a as FormFieldPatternFormat } from './FormFieldPatternFormat-CXU5e0oh.js';
 import { NumericFormatProps } from 'react-number-format';
 import './typings.d-HZBqJJjn.js';
 import * as yup from 'yup';
@@ -13,7 +13,7 @@ export { yup };
 export { yupResolver } from '@hookform/resolvers/yup';
 
 declare const Form: <TFieldValues extends FieldValues = FieldValues>({ children, onSubmit, sx, ...formMethods }: {
-    children?: React.ReactNode;
+    children?: React$1.ReactNode;
     onSubmit?: (data: TFieldValues) => Promise<void> | void;
     sx?: BoxProps["sx"];
 } & FormProviderProps<TFieldValues>) => react_jsx_runtime.JSX.Element;
@@ -24,18 +24,19 @@ declare const FormErrorMessage: <TFieldValues extends FieldValues = FieldValues>
 }) => react_jsx_runtime.JSX.Element;
 
 type FormFieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = {
-    label?: React.ReactNode;
+    label?: React$1.ReactNode;
     id?: string;
     name: TName;
     defaultValue?: FieldPathValue<TFieldValues, TName>;
     disabled?: boolean;
-    tooltip?: string | React.ReactNode;
+    tooltip?: string | React$1.ReactNode;
     onTooltipClick?: () => void;
+    warning?: string | React$1.ReactNode;
 } & SxProp;
 type FormFieldCompleteProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = {
-    render: (props: UseControllerReturn<TFieldValues, TName>) => React.ReactElement;
+    render: (props: UseControllerReturn<TFieldValues, TName>) => React$1.ReactElement;
 } & FormFieldProps<TFieldValues, TName>;
-declare const FormField: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ label, id: idProp, name, defaultValue, disabled, tooltip, onTooltipClick, sx, css, render, }: 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, tooltip, onTooltipClick, sx, css, render, warning, }: FormFieldCompleteProps<TFieldValues, TName>) => react_jsx_runtime.JSX.Element;
 
 declare const FormFieldCheckbox: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ label, name, sx, tooltip, onTooltipClick, ...checkboxProps }: FormFieldProps<TFieldValues, TName> & CheckboxProps) => react_jsx_runtime.JSX.Element;
 
@@ -48,17 +49,16 @@ declare const FormFieldCreditCardNumber: ({ label, name, ...formFieldPatternForm
 type FormFieldNumericFormatProps = {
     label?: string;
     name: string;
-    tooltip?: string | React.ReactNode;
+    warning?: string | React$1.ReactNode;
+    tooltip?: string | React$1.ReactNode;
     onTooltipClick?: () => void;
 } & NumericFormatProps;
-declare const FormFieldNumericFormat: ({ label, name, tooltip, onTooltipClick, ...numericFormatProps }: FormFieldNumericFormatProps) => react_jsx_runtime.JSX.Element;
+declare const FormFieldNumericFormat: ({ label, name, warning, tooltip, onTooltipClick, ...numericFormatProps }: FormFieldNumericFormatProps) => react_jsx_runtime.JSX.Element;
 
 type FormFieldCurrencyInputProps = {
     label?: string;
     name: string;
     prefix: string;
-    decimalSeparator: string;
-    thousandSeparator: string;
 } & FormFieldNumericFormatProps;
 declare const FormFieldCurrencyInput: ({ label, name, prefix, decimalSeparator, thousandSeparator, ...formFieldNumericFormatProps }: FormFieldCurrencyInputProps) => react_jsx_runtime.JSX.Element;
 
@@ -87,9 +87,10 @@ declare const FormFieldSelect: <TFieldValues extends FieldValues = FieldValues>(
 
 declare const FormFieldSwitch: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ label, name, sx, tooltip, onTooltipClick, ...switchProps }: FormFieldProps<TFieldValues, TName> & SwitchProps) => react_jsx_runtime.JSX.Element;
 
-declare const FormFieldTextarea: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ label, name, sx, ...textareaProps }: {
+declare const FormFieldTextarea: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ label, name, warning, sx, ...textareaProps }: {
     label?: string;
     name: TName;
+    warning?: string | React.ReactNode;
 } & TextareaProps) => react_jsx_runtime.JSX.Element;
 
 declare const useFormGroup: () => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/forms",
-  "version": "0.29.2",
+  "version": "0.29.3",
   "license": "MIT",
   "author": "ttoss",
   "contributors": [
@@ -39,8 +39,8 @@
   },
   "peerDependencies": {
     "react": ">=16.8.0",
-    "@ttoss/react-i18n": "^2.0.9",
-    "@ttoss/ui": "^5.4.0"
+    "@ttoss/ui": "^5.5.0",
+    "@ttoss/react-i18n": "^2.0.10"
   },
   "devDependencies": {
     "@types/jest": "^29.5.14",
@@ -50,12 +50,12 @@
     "react-error-boundary": "^5.0.0",
     "tsup": "^8.3.5",
     "yup": "^1.6.1",
-    "@ttoss/react-i18n": "^2.0.9",
-    "@ttoss/i18n-cli": "^0.7.26",
     "@ttoss/config": "^1.35.2",
     "@ttoss/react-icons": "^0.4.9",
-    "@ttoss/ui": "^5.4.0",
-    "@ttoss/test-utils": "^2.1.22"
+    "@ttoss/react-i18n": "^2.0.10",
+    "@ttoss/i18n-cli": "^0.7.27",
+    "@ttoss/test-utils": "^2.1.22",
+    "@ttoss/ui": "^5.5.0"
   },
   "publishConfig": {
     "access": "public",