@ttoss/forms 0.22.6 → 0.23.0

package/dist/Brazil/index.d.mts

@@ -0,0 +1,23 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { PatternFormatProps } from 'react-number-format';
+import { F as FormFieldPatternFormatProps } from '../FormFieldPatternFormat-DF8nU9tn.mjs';
+
+type FormFieldCNPJProps = {
+    label: string;
+    name: string;
+} & Partial<PatternFormatProps>;
+declare const FormFieldCNPJ: ({ label, name, ...patternFormatProps }: FormFieldCNPJProps) => react_jsx_runtime.JSX.Element;
+
+type FormFieldPhoneProps = {
+    label: string;
+    name: string;
+} & Partial<PatternFormatProps>;
+declare const FormFieldPhone: ({ label, name, ...patternFormatProps }: FormFieldPhoneProps) => react_jsx_runtime.JSX.Element;
+
+type FormFieldCEPProps = {
+    label: string;
+    name: string;
+} & Partial<FormFieldPatternFormatProps>;
+declare const FormFieldCEP: ({ label, name, ...formFieldPatternFormatProps }: FormFieldCEPProps) => react_jsx_runtime.JSX.Element;
+
+export { FormFieldCEP, FormFieldCNPJ, FormFieldPhone };

package/dist/Brazil/index.d.ts

@@ -0,0 +1,23 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { PatternFormatProps } from 'react-number-format';
+import { F as FormFieldPatternFormatProps } from '../FormFieldPatternFormat-DF8nU9tn.js';
+
+type FormFieldCNPJProps = {
+    label: string;
+    name: string;
+} & Partial<PatternFormatProps>;
+declare const FormFieldCNPJ: ({ label, name, ...patternFormatProps }: FormFieldCNPJProps) => react_jsx_runtime.JSX.Element;
+
+type FormFieldPhoneProps = {
+    label: string;
+    name: string;
+} & Partial<PatternFormatProps>;
+declare const FormFieldPhone: ({ label, name, ...patternFormatProps }: FormFieldPhoneProps) => react_jsx_runtime.JSX.Element;
+
+type FormFieldCEPProps = {
+    label: string;
+    name: string;
+} & Partial<FormFieldPatternFormatProps>;
+declare const FormFieldCEP: ({ label, name, ...formFieldPatternFormatProps }: FormFieldCEPProps) => react_jsx_runtime.JSX.Element;
+
+export { FormFieldCEP, FormFieldCNPJ, FormFieldPhone };

package/dist/Brazil/index.js

@@ -0,0 +1,780 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+"use strict";
+
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+// If the importer is in node compatibility mode or this is not an ESM
+// file that has been converted to a CommonJS file using a Babel-
+// compatible transform (i.e. "__esModule" has not been set), then set
+// "default" to the CommonJS "module.exports" for node compatibility.
+isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+  value: mod,
+  enumerable: true
+}) : target, mod));
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+
+// src/Brazil/index.ts
+var Brazil_exports = {};
+__export(Brazil_exports, {
+  FormFieldCEP: () => FormFieldCEP,
+  FormFieldCNPJ: () => FormFieldCNPJ,
+  FormFieldPhone: () => FormFieldPhone
+});
+module.exports = __toCommonJS(Brazil_exports);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  Controller: () => import_react_hook_form6.Controller,
+  Form: () => Form,
+  FormField: () => FormField,
+  FormFieldCheckbox: () => FormFieldCheckbox,
+  FormFieldCreditCardNumber: () => FormFieldCreditCardNumber,
+  FormFieldCurrencyInput: () => FormFieldCurrencyInput,
+  FormFieldInput: () => FormFieldInput,
+  FormFieldNumericFormat: () => FormFieldNumericFormat,
+  FormFieldPassword: () => FormFieldPassword,
+  FormFieldPatternFormat: () => FormFieldPatternFormat,
+  FormFieldRadio: () => FormFieldRadio,
+  FormFieldSelect: () => FormFieldSelect,
+  FormFieldTextarea: () => FormFieldTextarea,
+  FormGroup: () => FormGroup,
+  FormProvider: () => import_react_hook_form6.FormProvider,
+  useController: () => import_react_hook_form6.useController,
+  useFieldArray: () => import_react_hook_form6.useFieldArray,
+  useForm: () => import_react_hook_form6.useForm,
+  useFormContext: () => import_react_hook_form6.useFormContext,
+  useFormGroup: () => useFormGroup,
+  useFormState: () => import_react_hook_form6.useFormState,
+  useWatch: () => import_react_hook_form6.useWatch,
+  yup: () => yup,
+  yupResolver: () => import_yup2.yupResolver
+});
+
+// src/i18n.ts
+var import_react_i18n = require("@ttoss/react-i18n");
+var import_yup = require("yup");
+(0, import_yup.setLocale)({
+  mixed: {
+    required: (0, import_react_i18n.defineMessage)({
+      defaultMessage: "Field is required",
+      description: "Field is required"
+    }),
+    notType: ({
+      type
+    }) => {
+      return {
+        ...(0, import_react_i18n.defineMessage)({
+          defaultMessage: "Invalid Value for Field of type {type}",
+          description: "Invalid Value"
+        }),
+        values: {
+          type
+        }
+      };
+    }
+  },
+  string: {
+    min: ({
+      min
+    }) => {
+      return {
+        ...(0, import_react_i18n.defineMessage)({
+          defaultMessage: "Field must be at least {min} characters",
+          description: "Min length field"
+        }),
+        values: {
+          min
+        }
+      };
+    }
+  }
+});
+
+// src/index.ts
+var import_yup2 = require("@hookform/resolvers/yup");
+var yup = __toESM(require("yup"));
+
+// src/Form.tsx
+var import_ui = require("@ttoss/ui");
+var import_react_hook_form = require("react-hook-form");
+var import_jsx_runtime = require("react/jsx-runtime");
+var Form = ({
+  children,
+  onSubmit,
+  sx,
+  ...formMethods
+}) => {
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react_hook_form.FormProvider, {
+    ...formMethods,
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ui.Box, {
+      as: "form",
+      variant: "forms.form",
+      onSubmit: formMethods.handleSubmit(data => {
+        return onSubmit?.(data);
+      }),
+      sx,
+      children
+    })
+  });
+};
+
+// src/FormField.tsx
+var React = __toESM(require("react"));
+
+// src/ErrorMessage.tsx
+var import_react_hook_form2 = require("react-hook-form");
+var import_react_i18n2 = require("@ttoss/react-i18n");
+var import_ui2 = require("@ttoss/ui");
+var import_error_message = require("@hookform/error-message");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var isMessageDescriptor = possibleMessageDescriptor => {
+  return possibleMessageDescriptor !== void 0 && possibleMessageDescriptor.defaultMessage !== void 0;
+};
+var ErrorMessage = ({
+  name,
+  disabled
+}) => {
+  const {
+    formState: {
+      errors
+    }
+  } = (0, import_react_hook_form2.useFormContext)();
+  return /* @__PURE__ */(0, import_jsx_runtime2.jsx)(import_error_message.ErrorMessage, {
+    name,
+    errors,
+    render: ({
+      message
+    }) => {
+      return /* @__PURE__ */(0, import_jsx_runtime2.jsx)(import_ui2.HelpText, {
+        negative: true,
+        disabled,
+        children: (() => {
+          if (typeof message === "string") {
+            return message;
+          }
+          if (isMessageDescriptor(message)) {
+            return /* @__PURE__ */(0, import_jsx_runtime2.jsx)(import_react_i18n2.FormattedMessage, {
+              ...message
+            });
+          }
+          return JSON.stringify(message);
+        })()
+      });
+    }
+  });
+};
+
+// src/FormField.tsx
+var import_react_hook_form3 = require("react-hook-form");
+var import_ui3 = require("@ttoss/ui");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var FormField = ({
+  label,
+  id: idProp,
+  name,
+  defaultValue,
+  disabled,
+  tooltip,
+  onTooltipClick,
+  sx,
+  css,
+  render
+}) => {
+  const controllerReturn = (0, import_react_hook_form3.useController)({
+    name,
+    defaultValue
+  });
+  const id = idProp || `form-field-${name}`;
+  const memoizedRender = React.useMemo(() => {
+    return React.Children.map(render(controllerReturn), child => {
+      return /* @__PURE__ */(0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, {
+        children: [label && /* @__PURE__ */(0, import_jsx_runtime3.jsx)(import_ui3.Label, {
+          "aria-disabled": disabled,
+          htmlFor: id,
+          tooltip,
+          onTooltipClick,
+          children: label
+        }), React.createElement(child.type, {
+          id,
+          ...child.props
+        })]
+      });
+    });
+  }, [controllerReturn, disabled, onTooltipClick, tooltip, id, label, render]);
+  return /* @__PURE__ */(0, import_jsx_runtime3.jsxs)(import_ui3.Flex, {
+    sx: {
+      flexDirection: "column",
+      width: "100%",
+      gap: "md",
+      ...sx
+    },
+    css,
+    children: [memoizedRender, /* @__PURE__ */(0, import_jsx_runtime3.jsx)(ErrorMessage, {
+      name
+    })]
+  });
+};
+
+// src/FormFieldCheckbox.tsx
+var import_ui4 = require("@ttoss/ui");
+var import_react_hook_form4 = require("react-hook-form");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var FormFieldCheckbox = ({
+  label,
+  name,
+  sx,
+  ...checkboxProps
+}) => {
+  const {
+    field: {
+      onChange,
+      onBlur,
+      value,
+      ref
+    },
+    formState: {
+      errors
+    }
+  } = (0, import_react_hook_form4.useController)({
+    name,
+    defaultValue: false
+  });
+  const id = `form-field-checkbox-${name}`;
+  const error = !!errors[name]?.message;
+  return /* @__PURE__ */(0, import_jsx_runtime4.jsxs)(import_ui4.Flex, {
+    sx: {
+      flexDirection: "column",
+      width: "100%",
+      ...sx
+    },
+    children: [/* @__PURE__ */(0, import_jsx_runtime4.jsx)(import_ui4.Flex, {
+      sx: {
+        alignItems: "center"
+      },
+      children: /* @__PURE__ */(0, import_jsx_runtime4.jsxs)(import_ui4.Label, {
+        "aria-disabled": checkboxProps.disabled,
+        htmlFor: id,
+        children: [/* @__PURE__ */(0, import_jsx_runtime4.jsx)(import_ui4.Checkbox, {
+          id,
+          ref,
+          checked: value,
+          onChange,
+          onBlur,
+          name,
+          "aria-invalid": error ? "true" : "false",
+          ...checkboxProps
+        }), label]
+      })
+    }), /* @__PURE__ */(0, import_jsx_runtime4.jsx)(ErrorMessage, {
+      name
+    })]
+  });
+};
+
+// src/FormFieldPatternFormat.tsx
+var import_ui5 = require("@ttoss/ui");
+var import_react_number_format = require("react-number-format");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var FormFieldPatternFormat = ({
+  label,
+  name,
+  ...patternFormatProps
+}) => {
+  return /* @__PURE__ */(0, import_jsx_runtime5.jsx)(FormField, {
+    name,
+    label,
+    render: ({
+      field,
+      fieldState
+    }) => {
+      return /* @__PURE__ */(0, import_jsx_runtime5.jsx)(import_react_number_format.PatternFormat, {
+        name: field.name,
+        value: field.value,
+        onBlur: field.onBlur,
+        onValueChange: values => {
+          field.onChange(values.value);
+        },
+        customInput: import_ui5.Input,
+        "aria-invalid": Boolean(fieldState.error).valueOf(),
+        ...patternFormatProps
+      });
+    }
+  });
+};
+
+// src/FormFieldCreditCardNumber.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var FormFieldCreditCardNumber = ({
+  label,
+  name,
+  ...formFieldPatternFormatProps
+}) => {
+  return /* @__PURE__ */(0, import_jsx_runtime6.jsx)(FormFieldPatternFormat, {
+    name,
+    label,
+    format: "#### #### #### ####",
+    placeholder: "1234 1234 1234 1234",
+    ...formFieldPatternFormatProps
+  });
+};
+
+// src/FormFieldNumericFormat.tsx
+var import_ui6 = require("@ttoss/ui");
+var import_react_number_format2 = require("react-number-format");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var FormFieldNumericFormat = ({
+  label,
+  name,
+  ...numericFormatProps
+}) => {
+  return /* @__PURE__ */(0, import_jsx_runtime7.jsx)(FormField, {
+    label,
+    name,
+    render: ({
+      field
+    }) => {
+      return /* @__PURE__ */(0, import_jsx_runtime7.jsx)(import_react_number_format2.NumericFormat, {
+        name: field.name,
+        value: field.value,
+        onBlur: field.onBlur,
+        onValueChange: values => {
+          field.onChange(values.floatValue);
+        },
+        customInput: import_ui6.Input,
+        ...numericFormatProps
+      });
+    }
+  });
+};
+
+// src/FormFieldCurrencyInput.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var FormFieldCurrencyInput = ({
+  label,
+  name,
+  prefix,
+  decimalSeparator,
+  thousandSeparator,
+  ...formFieldNumericFormatProps
+}) => {
+  return /* @__PURE__ */(0, import_jsx_runtime8.jsx)(FormFieldNumericFormat, {
+    name,
+    label,
+    fixedDecimalScale: true,
+    decimalScale: 2,
+    prefix,
+    decimalSeparator,
+    thousandSeparator,
+    placeholder: `${prefix} 0${decimalSeparator}00`,
+    allowNegative: false,
+    ...formFieldNumericFormatProps
+  });
+};
+
+// src/FormFieldInput.tsx
+var import_ui7 = require("@ttoss/ui");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var FormFieldInput = ({
+  label,
+  name,
+  tooltip,
+  onTooltipClick,
+  sx,
+  defaultValue = "",
+  ...inputProps
+}) => {
+  return /* @__PURE__ */(0, import_jsx_runtime9.jsx)(FormField, {
+    name,
+    label,
+    disabled: inputProps.disabled,
+    tooltip,
+    onTooltipClick,
+    sx,
+    defaultValue,
+    render: ({
+      field,
+      fieldState
+    }) => {
+      return /* @__PURE__ */(0, import_jsx_runtime9.jsx)(import_ui7.Input, {
+        ...inputProps,
+        ...field,
+        "aria-invalid": fieldState.error ? "true" : void 0
+      });
+    }
+  });
+};
+
+// src/FormFieldPassword.tsx
+var import_ui8 = require("@ttoss/ui");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var FormFieldPassword = ({
+  label,
+  name,
+  tooltip,
+  onTooltipClick,
+  sx,
+  defaultValue = "",
+  ...inputProps
+}) => {
+  return /* @__PURE__ */(0, import_jsx_runtime10.jsx)(FormField, {
+    name,
+    label,
+    disabled: inputProps.disabled,
+    tooltip,
+    onTooltipClick,
+    sx,
+    defaultValue,
+    render: ({
+      field,
+      fieldState
+    }) => {
+      return /* @__PURE__ */(0, import_jsx_runtime10.jsx)(import_ui8.InputPassword, {
+        ...inputProps,
+        ...field,
+        "aria-invalid": fieldState.error ? "true" : void 0
+      });
+    }
+  });
+};
+
+// src/FormFieldRadio.tsx
+var import_ui9 = require("@ttoss/ui");
+var import_react_hook_form5 = require("react-hook-form");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var FormFieldRadio = ({
+  label,
+  name,
+  options,
+  sx,
+  ...radioProps
+}) => {
+  const {
+    field: {
+      onChange,
+      onBlur,
+      value,
+      ref
+    }
+  } = (0, import_react_hook_form5.useController)({
+    name,
+    defaultValue: ""
+  });
+  return /* @__PURE__ */(0, import_jsx_runtime11.jsxs)(import_ui9.Flex, {
+    sx: {
+      flexDirection: "column",
+      width: "100%",
+      ...sx
+    },
+    children: [label && /* @__PURE__ */(0, import_jsx_runtime11.jsx)(import_ui9.Label, {
+      sx: {
+        marginBottom: "md"
+      },
+      children: label
+    }), /* @__PURE__ */(0, import_jsx_runtime11.jsx)(import_ui9.Box, {
+      children: options.map(option => {
+        const id = `form-field-radio-${name}-${option.value}`;
+        return /* @__PURE__ */(0, import_jsx_runtime11.jsxs)(import_ui9.Label, {
+          htmlFor: id,
+          children: [/* @__PURE__ */(0, import_jsx_runtime11.jsx)(import_ui9.Radio, {
+            ref,
+            onChange,
+            onBlur,
+            value: option.value,
+            checked: value === option.value,
+            name,
+            id,
+            ...radioProps
+          }), option.label]
+        }, id);
+      })
+    }), /* @__PURE__ */(0, import_jsx_runtime11.jsx)(ErrorMessage, {
+      name
+    })]
+  });
+};
+
+// src/FormFieldSelect.tsx
+var import_ui10 = require("@ttoss/ui");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var FormFieldSelect = ({
+  label,
+  name,
+  id,
+  defaultValue,
+  sx,
+  css,
+  disabled,
+  tooltip,
+  onTooltipClick,
+  ...selectProps
+}) => {
+  return /* @__PURE__ */(0, import_jsx_runtime12.jsx)(FormField, {
+    name,
+    label,
+    id,
+    defaultValue,
+    disabled,
+    tooltip,
+    onTooltipClick,
+    sx,
+    css,
+    render: ({
+      field,
+      fieldState
+    }) => {
+      return /* @__PURE__ */(0, import_jsx_runtime12.jsx)(import_ui10.Select, {
+        ...selectProps,
+        ...field,
+        isDisabled: disabled,
+        "aria-invalid": fieldState.error ? "true" : void 0
+      });
+    }
+  });
+};
+
+// src/FormFieldTextarea.tsx
+var import_ui11 = require("@ttoss/ui");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var FormFieldTextarea = ({
+  label,
+  name,
+  sx,
+  ...textareaProps
+}) => {
+  const id = `form-field-textarea-${name}`;
+  return /* @__PURE__ */(0, import_jsx_runtime13.jsx)(FormField, {
+    label,
+    name,
+    id,
+    sx,
+    render: ({
+      field,
+      fieldState
+    }) => {
+      return /* @__PURE__ */(0, import_jsx_runtime13.jsx)(import_ui11.Textarea, {
+        ...field,
+        ...textareaProps,
+        "aria-invalid": fieldState.error ? "true" : void 0
+      });
+    }
+  });
+};
+
+// src/FormGroup.tsx
+var React2 = __toESM(require("react"));
+var import_ui12 = require("@ttoss/ui");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var FormGroupLevelsManagerContext = React2.createContext({
+  levelsLength: 1,
+  registerChild: () => {
+    return null;
+  }
+});
+var FormGroupLevelsManager = ({
+  children
+}) => {
+  const [levelsLength, setLevelsLength] = React2.useState(0);
+  const registerChild = React2.useCallback(level => {
+    if (level + 1 > levelsLength) {
+      setLevelsLength(level + 1);
+    }
+  }, [levelsLength]);
+  return /* @__PURE__ */(0, import_jsx_runtime14.jsx)(FormGroupLevelsManagerContext.Provider, {
+    value: {
+      levelsLength,
+      registerChild
+    },
+    children
+  });
+};
+var FormGroupContext = React2.createContext({});
+var useFormGroup = () => {
+  const {
+    parentLevel
+  } = React2.useContext(FormGroupContext);
+  const {
+    levelsLength
+  } = React2.useContext(FormGroupLevelsManagerContext);
+  return {
+    level: parentLevel,
+    levelsLength
+  };
+};
+var FormGroupWrapper = ({
+  title,
+  direction,
+  children,
+  ...boxProps
+}) => {
+  const {
+    level
+  } = useFormGroup();
+  const {
+    registerChild
+  } = React2.useContext(FormGroupLevelsManagerContext);
+  React2.useEffect(() => {
+    if (typeof level === "number") {
+      registerChild(level);
+    }
+  }, [level, registerChild]);
+  const childrenContainerSx = {
+    flexDirection: direction || "column",
+    gap: "md",
+    width: "100%"
+  };
+  return /* @__PURE__ */(0, import_jsx_runtime14.jsxs)(import_ui12.Box, {
+    "aria-level": level,
+    ...boxProps,
+    sx: {
+      marginTop: level === 0 ? "none" : "lg",
+      marginBottom: "lg",
+      ...boxProps.sx
+    },
+    children: [title && /* @__PURE__ */(0, import_jsx_runtime14.jsx)(import_ui12.Box, {
+      sx: {
+        marginBottom: "md"
+      },
+      children: /* @__PURE__ */(0, import_jsx_runtime14.jsx)(import_ui12.Text, {
+        sx: {
+          fontSize: "2xl",
+          fontWeight: "bold"
+        },
+        children: title
+      })
+    }), /* @__PURE__ */(0, import_jsx_runtime14.jsx)(import_ui12.Flex, {
+      sx: childrenContainerSx,
+      children
+    })]
+  });
+};
+var FormGroup = props => {
+  const {
+    level
+  } = useFormGroup();
+  const currentLevel = level === void 0 ? 0 : level + 1;
+  return /* @__PURE__ */(0, import_jsx_runtime14.jsx)(FormGroupContext.Provider, {
+    value: {
+      parentLevel: currentLevel
+    },
+    children: currentLevel === 0 ? /* @__PURE__ */(0, import_jsx_runtime14.jsx)(FormGroupLevelsManager, {
+      children: /* @__PURE__ */(0, import_jsx_runtime14.jsx)(FormGroupWrapper, {
+        ...props
+      })
+    }) : /* @__PURE__ */(0, import_jsx_runtime14.jsx)(FormGroupWrapper, {
+      ...props
+    })
+  });
+};
+
+// src/index.ts
+var import_react_hook_form6 = require("react-hook-form");
+__reExport(src_exports, require("react-hook-form"));
+
+// src/Brazil/FormFieldCNPJ.tsx
+var import_ui13 = require("@ttoss/ui");
+var import_react_number_format3 = require("react-number-format");
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var FormFieldCNPJ = ({
+  label,
+  name,
+  ...patternFormatProps
+}) => {
+  return /* @__PURE__ */(0, import_jsx_runtime15.jsx)(FormField, {
+    name,
+    label,
+    render: ({
+      field
+    }) => {
+      return /* @__PURE__ */(0, import_jsx_runtime15.jsx)(import_react_number_format3.PatternFormat, {
+        name: field.name,
+        value: field.value,
+        onBlur: field.onBlur,
+        onValueChange: values => {
+          field.onChange(values.value);
+        },
+        format: "##.###.###/####-##",
+        customInput: import_ui13.Input,
+        placeholder: "12.345.678/0000-00",
+        ...patternFormatProps
+      });
+    }
+  });
+};
+
+// src/Brazil/FormFieldPhone.tsx
+var import_ui14 = require("@ttoss/ui");
+var import_react_number_format4 = require("react-number-format");
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var FormFieldPhone = ({
+  label,
+  name,
+  ...patternFormatProps
+}) => {
+  return /* @__PURE__ */(0, import_jsx_runtime16.jsx)(FormField, {
+    name,
+    label,
+    render: ({
+      field
+    }) => {
+      const format = field.value?.length > 10 ? "(##) #####-####" : "(##) ####-#####";
+      return /* @__PURE__ */(0, import_jsx_runtime16.jsx)(import_react_number_format4.PatternFormat, {
+        name: field.name,
+        value: field.value,
+        onBlur: field.onBlur,
+        onValueChange: values => {
+          field.onChange(values.value);
+        },
+        format,
+        customInput: import_ui14.Input,
+        placeholder: "(11) 91234-1234",
+        ...patternFormatProps
+      });
+    }
+  });
+};
+
+// src/Brazil/FormFieldCEP.tsx
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var FormFieldCEP = ({
+  label,
+  name,
+  ...formFieldPatternFormatProps
+}) => {
+  return /* @__PURE__ */(0, import_jsx_runtime17.jsx)(FormFieldPatternFormat, {
+    name,
+    label,
+    format: "#####-###",
+    placeholder: "12345-678",
+    ...formFieldPatternFormatProps
+  });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  FormFieldCEP,
+  FormFieldCNPJ,
+  FormFieldPhone
+});

package/dist/FormFieldPatternFormat-DF8nU9tn.d.mts

@@ -0,0 +1,10 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { PatternFormatProps } from 'react-number-format';
+
+type FormFieldPatternFormatProps = {
+    label?: string;
+    name: string;
+} & PatternFormatProps;
+declare const FormFieldPatternFormat: ({ label, name, ...patternFormatProps }: FormFieldPatternFormatProps) => react_jsx_runtime.JSX.Element;
+
+export { type FormFieldPatternFormatProps as F, FormFieldPatternFormat as a };

package/dist/FormFieldPatternFormat-DF8nU9tn.d.ts

@@ -0,0 +1,10 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { PatternFormatProps } from 'react-number-format';
+
+type FormFieldPatternFormatProps = {
+    label?: string;
+    name: string;
+} & PatternFormatProps;
+declare const FormFieldPatternFormat: ({ label, name, ...patternFormatProps }: FormFieldPatternFormatProps) => react_jsx_runtime.JSX.Element;
+
+export { type FormFieldPatternFormatProps as F, FormFieldPatternFormat as a };

package/dist/esm/Brazil/index.js

@@ -0,0 +1,82 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+import { FormField, FormFieldPatternFormat } from "../chunk-5SH4STWG.js";
+
+// src/Brazil/FormFieldCNPJ.tsx
+import { Input } from "@ttoss/ui";
+import { PatternFormat } from "react-number-format";
+import { jsx } from "react/jsx-runtime";
+var FormFieldCNPJ = ({
+  label,
+  name,
+  ...patternFormatProps
+}) => {
+  return /* @__PURE__ */jsx(FormField, {
+    name,
+    label,
+    render: ({
+      field
+    }) => {
+      return /* @__PURE__ */jsx(PatternFormat, {
+        name: field.name,
+        value: field.value,
+        onBlur: field.onBlur,
+        onValueChange: values => {
+          field.onChange(values.value);
+        },
+        format: "##.###.###/####-##",
+        customInput: Input,
+        placeholder: "12.345.678/0000-00",
+        ...patternFormatProps
+      });
+    }
+  });
+};
+
+// src/Brazil/FormFieldPhone.tsx
+import { Input as Input2 } from "@ttoss/ui";
+import { PatternFormat as PatternFormat2 } from "react-number-format";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var FormFieldPhone = ({
+  label,
+  name,
+  ...patternFormatProps
+}) => {
+  return /* @__PURE__ */jsx2(FormField, {
+    name,
+    label,
+    render: ({
+      field
+    }) => {
+      const format = field.value?.length > 10 ? "(##) #####-####" : "(##) ####-#####";
+      return /* @__PURE__ */jsx2(PatternFormat2, {
+        name: field.name,
+        value: field.value,
+        onBlur: field.onBlur,
+        onValueChange: values => {
+          field.onChange(values.value);
+        },
+        format,
+        customInput: Input2,
+        placeholder: "(11) 91234-1234",
+        ...patternFormatProps
+      });
+    }
+  });
+};
+
+// src/Brazil/FormFieldCEP.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+var FormFieldCEP = ({
+  label,
+  name,
+  ...formFieldPatternFormatProps
+}) => {
+  return /* @__PURE__ */jsx3(FormFieldPatternFormat, {
+    name,
+    label,
+    format: "#####-###",
+    placeholder: "12345-678",
+    ...formFieldPatternFormatProps
+  });
+};
+export { FormFieldCEP, FormFieldCNPJ, FormFieldPhone };

package/dist/index.d.mts

@@ -8,7 +8,9 @@ export * from 'react-hook-form';
 export { Controller, FormProvider, useController, useFieldArray, useForm, useFormContext, useFormState, useWatch } from 'react-hook-form';
 import * as React from 'react';
 import { BoxProps, SxProp, CheckboxProps, InputProps, InputPasswordProps, RadioProps, SelectProps, TextareaProps } from '@ttoss/ui';
-import { PatternFormatProps, NumericFormatProps } from 'react-number-format';
+import { F as FormFieldPatternFormatProps } from './FormFieldPatternFormat-DF8nU9tn.mjs';
+export { a as FormFieldPatternFormat } from './FormFieldPatternFormat-DF8nU9tn.mjs';
+import { NumericFormatProps } from 'react-number-format';
 
 declare const Form: <TFieldValues extends FieldValues = FieldValues>({ children, onSubmit, sx, ...formMethods }: {
     children?: React.ReactNode;
@@ -37,12 +39,6 @@ declare const FormFieldCheckbox: <TFieldValues extends FieldValues = FieldValues
     name: FieldPath<TFieldValues>;
 } & CheckboxProps) => react_jsx_runtime.JSX.Element;
 
-type FormFieldPatternFormatProps = {
-    label?: string;
-    name: string;
-} & PatternFormatProps;
-declare const FormFieldPatternFormat: ({ label, name, ...patternFormatProps }: FormFieldPatternFormatProps) => react_jsx_runtime.JSX.Element;
-
 type FormFieldCreditCardNumberProps = {
     label: string;
     name: string;
@@ -104,4 +100,4 @@ type FormGroupProps = {
 } & BoxProps;
 declare const FormGroup: (props: FormGroupProps) => react_jsx_runtime.JSX.Element;
 
-export { Form, FormField, FormFieldCheckbox, FormFieldCreditCardNumber, FormFieldCurrencyInput, FormFieldInput, FormFieldNumericFormat, FormFieldPassword, FormFieldPatternFormat, FormFieldRadio, FormFieldSelect, FormFieldTextarea, FormGroup, useFormGroup };
+export { Form, FormField, FormFieldCheckbox, FormFieldCreditCardNumber, FormFieldCurrencyInput, FormFieldInput, FormFieldNumericFormat, FormFieldPassword, FormFieldRadio, FormFieldSelect, FormFieldTextarea, FormGroup, useFormGroup };

package/dist/index.d.ts

@@ -8,7 +8,9 @@ export * from 'react-hook-form';
 export { Controller, FormProvider, useController, useFieldArray, useForm, useFormContext, useFormState, useWatch } from 'react-hook-form';
 import * as React from 'react';
 import { BoxProps, SxProp, CheckboxProps, InputProps, InputPasswordProps, RadioProps, SelectProps, TextareaProps } from '@ttoss/ui';
-import { PatternFormatProps, NumericFormatProps } from 'react-number-format';
+import { F as FormFieldPatternFormatProps } from './FormFieldPatternFormat-DF8nU9tn.js';
+export { a as FormFieldPatternFormat } from './FormFieldPatternFormat-DF8nU9tn.js';
+import { NumericFormatProps } from 'react-number-format';
 
 declare const Form: <TFieldValues extends FieldValues = FieldValues>({ children, onSubmit, sx, ...formMethods }: {
     children?: React.ReactNode;
@@ -37,12 +39,6 @@ declare const FormFieldCheckbox: <TFieldValues extends FieldValues = FieldValues
     name: FieldPath<TFieldValues>;
 } & CheckboxProps) => react_jsx_runtime.JSX.Element;
 
-type FormFieldPatternFormatProps = {
-    label?: string;
-    name: string;
-} & PatternFormatProps;
-declare const FormFieldPatternFormat: ({ label, name, ...patternFormatProps }: FormFieldPatternFormatProps) => react_jsx_runtime.JSX.Element;
-
 type FormFieldCreditCardNumberProps = {
     label: string;
     name: string;
@@ -104,4 +100,4 @@ type FormGroupProps = {
 } & BoxProps;
 declare const FormGroup: (props: FormGroupProps) => react_jsx_runtime.JSX.Element;
 
-export { Form, FormField, FormFieldCheckbox, FormFieldCreditCardNumber, FormFieldCurrencyInput, FormFieldInput, FormFieldNumericFormat, FormFieldPassword, FormFieldPatternFormat, FormFieldRadio, FormFieldSelect, FormFieldTextarea, FormGroup, useFormGroup };
+export { Form, FormField, FormFieldCheckbox, FormFieldCreditCardNumber, FormFieldCurrencyInput, FormFieldInput, FormFieldNumericFormat, FormFieldPassword, FormFieldRadio, FormFieldSelect, FormFieldTextarea, FormGroup, useFormGroup };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/forms",
-  "version": "0.22.6",
+  "version": "0.23.0",
   "author": "ttoss",
   "contributors": [
     "Pedro Arantes <pedro@arantespp.com> (https://arantespp.com/contact)"
@@ -20,6 +20,11 @@
       "import": "./dist/esm/MultistepForm/index.js",
       "require": "./dist/MultistepForm/index.js",
       "types": "./dist/MultistepForm/index.d.ts"
+    },
+    "./brazil": {
+      "import": "./dist/esm/Brazil/index.js",
+      "require": "./dist/Brazil/index.js",
+      "types": "./dist/Brazil/index.d.ts"
     }
   },
   "files": [
@@ -37,7 +42,7 @@
   "peerDependencies": {
     "react": ">=16.8.0",
     "@ttoss/react-i18n": "^1.26.1",
-    "@ttoss/ui": "^4.1.3"
+    "@ttoss/ui": "^4.1.4"
   },
   "devDependencies": {
     "@types/jest": "^29.5.12",
@@ -49,11 +54,11 @@
     "tsup": "^8.0.2",
     "yup": "^1.3.3",
     "@ttoss/config": "^1.31.5",
+    "@ttoss/react-i18n": "^1.26.1",
     "@ttoss/i18n-cli": "^0.7.6",
     "@ttoss/react-icons": "^0.3.1",
-    "@ttoss/test-utils": "^2.1.1",
-    "@ttoss/ui": "^4.1.3",
-    "@ttoss/react-i18n": "^1.26.1"
+    "@ttoss/ui": "^4.1.4",
+    "@ttoss/test-utils": "^2.1.1"
   },
   "publishConfig": {
     "access": "public",

package/src/Brazil/FormFieldCEP.tsx

@@ -0,0 +1,25 @@
+import {
+  FormFieldPatternFormat,
+  FormFieldPatternFormatProps,
+} from '../FormFieldPatternFormat';
+
+export type FormFieldCEPProps = {
+  label: string;
+  name: string;
+} & Partial<FormFieldPatternFormatProps>;
+
+export const FormFieldCEP = ({
+  label,
+  name,
+  ...formFieldPatternFormatProps
+}: FormFieldCEPProps) => {
+  return (
+    <FormFieldPatternFormat
+      name={name}
+      label={label}
+      format="#####-###"
+      placeholder="12345-678"
+      {...formFieldPatternFormatProps}
+    />
+  );
+};

package/src/Brazil/FormFieldCNPJ.tsx

@@ -0,0 +1,37 @@
+import { FormField } from '..';
+import { Input } from '@ttoss/ui';
+import { PatternFormat, PatternFormatProps } from 'react-number-format';
+
+export type FormFieldCNPJProps = {
+  label: string;
+  name: string;
+} & Partial<PatternFormatProps>;
+
+export const FormFieldCNPJ = ({
+  label,
+  name,
+  ...patternFormatProps
+}: FormFieldCNPJProps) => {
+  return (
+    <FormField
+      name={name}
+      label={label}
+      render={({ field }) => {
+        return (
+          <PatternFormat
+            name={field.name}
+            value={field.value}
+            onBlur={field.onBlur}
+            onValueChange={(values) => {
+              field.onChange(values.value);
+            }}
+            format={'##.###.###/####-##'}
+            customInput={Input}
+            placeholder="12.345.678/0000-00"
+            {...patternFormatProps}
+          />
+        );
+      }}
+    />
+  );
+};

package/src/Brazil/FormFieldPhone.tsx

@@ -0,0 +1,41 @@
+import { FormField } from '../FormField';
+import { Input } from '@ttoss/ui';
+
+import { PatternFormat, PatternFormatProps } from 'react-number-format';
+
+export type FormFieldPhoneProps = {
+  label: string;
+  name: string;
+} & Partial<PatternFormatProps>;
+
+export const FormFieldPhone = ({
+  label,
+  name,
+  ...patternFormatProps
+}: FormFieldPhoneProps) => {
+  return (
+    <FormField
+      name={name}
+      label={label}
+      render={({ field }) => {
+        const format =
+          field.value?.length > 10 ? '(##) #####-####' : '(##) ####-#####';
+
+        return (
+          <PatternFormat
+            name={field.name}
+            value={field.value}
+            onBlur={field.onBlur}
+            onValueChange={(values) => {
+              field.onChange(values.value);
+            }}
+            format={format}
+            customInput={Input}
+            placeholder="(11) 91234-1234"
+            {...patternFormatProps}
+          />
+        );
+      }}
+    />
+  );
+};

package/src/Brazil/index.ts

@@ -0,0 +1,3 @@
+export { FormFieldCNPJ } from './FormFieldCNPJ';
+export { FormFieldPhone } from './FormFieldPhone';
+export { FormFieldCEP } from './FormFieldCEP';