@ttoss/forms 0.18.21 → 0.20.0

package/dist/esm/index.js

@@ -235,9 +235,109 @@ var FormFieldCheckbox = ({
   });
 };
 
-// src/FormFieldInput.tsx
+// src/FormFieldPatternFormat.tsx
 import { Input } from "@ttoss/ui";
+import { PatternFormat } from "react-number-format";
 import { jsx as jsx5 } from "react/jsx-runtime";
+var FormFieldPatternFormat = ({
+  label,
+  name,
+  ...patternFormatProps
+}) => {
+  return /* @__PURE__ */jsx5(FormField, {
+    name,
+    label,
+    render: ({
+      field,
+      fieldState
+    }) => {
+      return /* @__PURE__ */jsx5(PatternFormat, {
+        name: field.name,
+        value: field.value,
+        onBlur: field.onBlur,
+        onValueChange: values => {
+          field.onChange(values.value);
+        },
+        customInput: Input,
+        "aria-invalid": Boolean(fieldState.error).valueOf(),
+        ...patternFormatProps
+      });
+    }
+  });
+};
+
+// src/FormFieldCreditCardNumber.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+var FormFieldCreditCardNumber = ({
+  label,
+  name,
+  ...formFieldPatternFormatProps
+}) => {
+  return /* @__PURE__ */jsx6(FormFieldPatternFormat, {
+    name,
+    label,
+    format: "#### #### #### ####",
+    placeholder: "1234 1234 1234 1234",
+    ...formFieldPatternFormatProps
+  });
+};
+
+// src/FormFieldNumericFormat.tsx
+import { Input as Input2 } from "@ttoss/ui";
+import { NumericFormat } from "react-number-format";
+import { jsx as jsx7 } from "react/jsx-runtime";
+var FormFieldNumericFormat = ({
+  label,
+  name,
+  ...numericFormatProps
+}) => {
+  return /* @__PURE__ */jsx7(FormField, {
+    label,
+    name,
+    render: ({
+      field
+    }) => {
+      return /* @__PURE__ */jsx7(NumericFormat, {
+        name: field.name,
+        value: field.value,
+        onBlur: field.onBlur,
+        onValueChange: values => {
+          field.onChange(values.floatValue);
+        },
+        customInput: Input2,
+        ...numericFormatProps
+      });
+    }
+  });
+};
+
+// src/FormFieldCurrencyInput.tsx
+import { jsx as jsx8 } from "react/jsx-runtime";
+var FormFieldCurrencyInput = ({
+  label,
+  name,
+  prefix,
+  decimalSeparator,
+  thousandSeparator,
+  ...formFieldNumericFormatProps
+}) => {
+  return /* @__PURE__ */jsx8(FormFieldNumericFormat, {
+    name,
+    label,
+    fixedDecimalScale: true,
+    decimalScale: 2,
+    prefix,
+    decimalSeparator,
+    thousandSeparator,
+    placeholder: `${prefix} 0${decimalSeparator}00`,
+    allowNegative: false,
+    ...formFieldNumericFormatProps
+  });
+};
+
+// src/FormFieldInput.tsx
+import { Input as Input3 } from "@ttoss/ui";
+import { jsx as jsx9 } from "react/jsx-runtime";
 var FormFieldInput = ({
   label,
   name,
@@ -247,7 +347,7 @@ var FormFieldInput = ({
   defaultValue = "",
   ...inputProps
 }) => {
-  return /* @__PURE__ */jsx5(FormField, {
+  return /* @__PURE__ */jsx9(FormField, {
     name,
     label,
     disabled: inputProps.disabled,
@@ -259,7 +359,7 @@ var FormFieldInput = ({
       field,
       fieldState
     }) => {
-      return /* @__PURE__ */jsx5(Input, {
+      return /* @__PURE__ */jsx9(Input3, {
         ...inputProps,
         ...field,
         "aria-invalid": fieldState.error ? "true" : void 0
@@ -270,7 +370,7 @@ var FormFieldInput = ({
 
 // src/FormFieldPassword.tsx
 import { InputPassword } from "@ttoss/ui";
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx10 } from "react/jsx-runtime";
 var FormFieldPassword = ({
   label,
   name,
@@ -280,7 +380,7 @@ var FormFieldPassword = ({
   defaultValue = "",
   ...inputProps
 }) => {
-  return /* @__PURE__ */jsx6(FormField, {
+  return /* @__PURE__ */jsx10(FormField, {
     name,
     label,
     disabled: inputProps.disabled,
@@ -292,7 +392,7 @@ var FormFieldPassword = ({
       field,
       fieldState
     }) => {
-      return /* @__PURE__ */jsx6(InputPassword, {
+      return /* @__PURE__ */jsx10(InputPassword, {
         ...inputProps,
         ...field,
         "aria-invalid": fieldState.error ? "true" : void 0
@@ -304,7 +404,7 @@ var FormFieldPassword = ({
 // src/FormFieldRadio.tsx
 import { Box as Box2, Flex as Flex3, Label as Label3, Radio } from "@ttoss/ui";
 import { useController as useController3 } from "react-hook-form";
-import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs3 } from "react/jsx-runtime";
 var FormFieldRadio = ({
   label,
   name,
@@ -329,17 +429,17 @@ var FormFieldRadio = ({
       width: "100%",
       ...sx
     },
-    children: [label && /* @__PURE__ */jsx7(Label3, {
+    children: [label && /* @__PURE__ */jsx11(Label3, {
       sx: {
         marginBottom: "md"
       },
       children: label
-    }), /* @__PURE__ */jsx7(Box2, {
+    }), /* @__PURE__ */jsx11(Box2, {
       children: options.map(option => {
         const id = `form-field-radio-${name}-${option.value}`;
         return /* @__PURE__ */jsxs3(Label3, {
           htmlFor: id,
-          children: [/* @__PURE__ */jsx7(Radio, {
+          children: [/* @__PURE__ */jsx11(Radio, {
             ref,
             onChange,
             onBlur,
@@ -351,7 +451,7 @@ var FormFieldRadio = ({
           }), option.label]
         }, id);
       })
-    }), /* @__PURE__ */jsx7(ErrorMessage, {
+    }), /* @__PURE__ */jsx11(ErrorMessage, {
       name
     })]
   });
@@ -359,7 +459,7 @@ var FormFieldRadio = ({
 
 // src/FormFieldSelect.tsx
 import { Select } from "@ttoss/ui";
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx as jsx12 } from "react/jsx-runtime";
 var checkDefaultValue = ({
   options,
   defaultValue,
@@ -402,7 +502,7 @@ var FormFieldSelect = ({
     defaultValue,
     placeholder
   });
-  return /* @__PURE__ */jsx8(FormField, {
+  return /* @__PURE__ */jsx12(FormField, {
     name,
     label,
     disabled: selectProps.disabled,
@@ -414,7 +514,7 @@ var FormFieldSelect = ({
       field,
       fieldState
     }) => {
-      return /* @__PURE__ */jsx8(Select, {
+      return /* @__PURE__ */jsx12(Select, {
         ...selectProps,
         ...field,
         ...{
@@ -423,7 +523,7 @@ var FormFieldSelect = ({
         },
         "aria-invalid": fieldState.error ? "true" : void 0,
         children: options.map(option => {
-          return /* @__PURE__ */jsx8("option", {
+          return /* @__PURE__ */jsx12("option", {
             value: option.value,
             children: option.label
           }, option.label);
@@ -435,7 +535,7 @@ var FormFieldSelect = ({
 
 // src/FormFieldTextarea.tsx
 import { Textarea } from "@ttoss/ui";
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { jsx as jsx13 } from "react/jsx-runtime";
 var FormFieldTextarea = ({
   label,
   name,
@@ -443,7 +543,7 @@ var FormFieldTextarea = ({
   ...textareaProps
 }) => {
   const id = `form-field-textarea-${name}`;
-  return /* @__PURE__ */jsx9(FormField, {
+  return /* @__PURE__ */jsx13(FormField, {
     label,
     name,
     id,
@@ -452,7 +552,7 @@ var FormFieldTextarea = ({
       field,
       fieldState
     }) => {
-      return /* @__PURE__ */jsx9(Textarea, {
+      return /* @__PURE__ */jsx13(Textarea, {
         ...field,
         ...textareaProps,
         "aria-invalid": fieldState.error ? "true" : void 0
@@ -464,7 +564,7 @@ var FormFieldTextarea = ({
 // src/FormGroup.tsx
 import * as React3 from "react";
 import { Box as Box3, Flex as Flex4, Text } from "@ttoss/ui";
-import { jsx as jsx10, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs4 } from "react/jsx-runtime";
 var FormGroupLevelsManagerContext = /*#__PURE__*/React3.createContext({
   levelsLength: 1,
   registerChild: () => {
@@ -480,7 +580,7 @@ var FormGroupLevelsManager = ({
       setLevelsLength(level + 1);
     }
   }, [levelsLength]);
-  return /* @__PURE__ */jsx10(FormGroupLevelsManagerContext.Provider, {
+  return /* @__PURE__ */jsx14(FormGroupLevelsManagerContext.Provider, {
     value: {
       levelsLength,
       registerChild
@@ -531,18 +631,18 @@ var FormGroupWrapper = ({
       marginBottom: "lg",
       ...boxProps.sx
     },
-    children: [title && /* @__PURE__ */jsx10(Box3, {
+    children: [title && /* @__PURE__ */jsx14(Box3, {
       sx: {
         marginBottom: "md"
       },
-      children: /* @__PURE__ */jsx10(Text, {
+      children: /* @__PURE__ */jsx14(Text, {
         sx: {
           fontSize: "2xl",
           fontWeight: "bold"
         },
         children: title
       })
-    }), /* @__PURE__ */jsx10(Flex4, {
+    }), /* @__PURE__ */jsx14(Flex4, {
       sx: childrenContainerSx,
       children
     })]
@@ -553,17 +653,17 @@ var FormGroup = props => {
     level
   } = useFormGroup();
   const currentLevel = level === void 0 ? 0 : level + 1;
-  return /* @__PURE__ */jsx10(FormGroupContext.Provider, {
+  return /* @__PURE__ */jsx14(FormGroupContext.Provider, {
     value: {
       parentLevel: currentLevel
     },
-    children: currentLevel === 0 ? /* @__PURE__ */jsx10(FormGroupLevelsManager, {
-      children: /* @__PURE__ */jsx10(FormGroupWrapper, {
+    children: currentLevel === 0 ? /* @__PURE__ */jsx14(FormGroupLevelsManager, {
+      children: /* @__PURE__ */jsx14(FormGroupWrapper, {
         ...props
       })
-    }) : /* @__PURE__ */jsx10(FormGroupWrapper, {
+    }) : /* @__PURE__ */jsx14(FormGroupWrapper, {
       ...props
     })
   });
 };
-export { Form, FormField, FormFieldCheckbox, FormFieldInput, FormFieldPassword, FormFieldRadio, FormFieldSelect, FormFieldTextarea, FormGroup, useFormGroup, yup, yupResolver };
+export { Form, FormField, FormFieldCheckbox, FormFieldCreditCardNumber, FormFieldCurrencyInput, FormFieldInput, FormFieldNumericFormat, FormFieldPassword, FormFieldPatternFormat, FormFieldRadio, FormFieldSelect, FormFieldTextarea, FormGroup, useFormGroup, yup, yupResolver };

package/dist/index.d.mts

@@ -7,6 +7,7 @@ export { yup };
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { BoxProps, FlexProps, CheckboxProps, InputProps, InputPasswordProps, RadioProps, SelectProps, TextareaProps } from '@ttoss/ui';
+import { PatternFormatProps, NumericFormatProps } from 'react-number-format';
 
 declare const Form: <TFieldValues extends FieldValues = FieldValues>({ children, onSubmit, sx, ...formMethods }: {
     children?: React.ReactNode;
@@ -36,6 +37,33 @@ 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;
+} & Partial<FormFieldPatternFormatProps>;
+declare const FormFieldCreditCardNumber: ({ label, name, ...formFieldPatternFormatProps }: FormFieldCreditCardNumberProps) => react_jsx_runtime.JSX.Element;
+
+type FormFieldNumericFormatProps = {
+    label?: string;
+    name: string;
+} & NumericFormatProps;
+declare const FormFieldNumericFormat: ({ label, name, ...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;
+
 type FormFieldInputProps<TName> = {
     label?: string;
     name: TName;
@@ -90,4 +118,4 @@ type FormGroupProps = {
 } & BoxProps;
 declare const FormGroup: (props: FormGroupProps) => react_jsx_runtime.JSX.Element;
 
-export { Form, FormField, FormFieldCheckbox, FormFieldInput, FormFieldPassword, FormFieldRadio, FormFieldSelect, FormFieldTextarea, FormGroup, useFormGroup };
+export { Form, FormField, FormFieldCheckbox, FormFieldCreditCardNumber, FormFieldCurrencyInput, FormFieldInput, FormFieldNumericFormat, FormFieldPassword, FormFieldPatternFormat, FormFieldRadio, FormFieldSelect, FormFieldTextarea, FormGroup, useFormGroup };

package/dist/index.d.ts

@@ -7,6 +7,7 @@ export { yup };
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import { BoxProps, FlexProps, CheckboxProps, InputProps, InputPasswordProps, RadioProps, SelectProps, TextareaProps } from '@ttoss/ui';
+import { PatternFormatProps, NumericFormatProps } from 'react-number-format';
 
 declare const Form: <TFieldValues extends FieldValues = FieldValues>({ children, onSubmit, sx, ...formMethods }: {
     children?: React.ReactNode;
@@ -36,6 +37,33 @@ 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;
+} & Partial<FormFieldPatternFormatProps>;
+declare const FormFieldCreditCardNumber: ({ label, name, ...formFieldPatternFormatProps }: FormFieldCreditCardNumberProps) => react_jsx_runtime.JSX.Element;
+
+type FormFieldNumericFormatProps = {
+    label?: string;
+    name: string;
+} & NumericFormatProps;
+declare const FormFieldNumericFormat: ({ label, name, ...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;
+
 type FormFieldInputProps<TName> = {
     label?: string;
     name: TName;
@@ -90,4 +118,4 @@ type FormGroupProps = {
 } & BoxProps;
 declare const FormGroup: (props: FormGroupProps) => react_jsx_runtime.JSX.Element;
 
-export { Form, FormField, FormFieldCheckbox, FormFieldInput, FormFieldPassword, FormFieldRadio, FormFieldSelect, FormFieldTextarea, FormGroup, useFormGroup };
+export { Form, FormField, FormFieldCheckbox, FormFieldCreditCardNumber, FormFieldCurrencyInput, FormFieldInput, FormFieldNumericFormat, FormFieldPassword, FormFieldPatternFormat, FormFieldRadio, FormFieldSelect, FormFieldTextarea, FormGroup, useFormGroup };

package/dist/index.js

@@ -42,8 +42,12 @@ __export(src_exports, {
   Form: () => Form,
   FormField: () => FormField,
   FormFieldCheckbox: () => FormFieldCheckbox,
+  FormFieldCreditCardNumber: () => FormFieldCreditCardNumber,
+  FormFieldCurrencyInput: () => FormFieldCurrencyInput,
   FormFieldInput: () => FormFieldInput,
+  FormFieldNumericFormat: () => FormFieldNumericFormat,
   FormFieldPassword: () => FormFieldPassword,
+  FormFieldPatternFormat: () => FormFieldPatternFormat,
   FormFieldRadio: () => FormFieldRadio,
   FormFieldSelect: () => FormFieldSelect,
   FormFieldTextarea: () => FormFieldTextarea,
@@ -271,9 +275,109 @@ var FormFieldCheckbox = ({
   });
 };
 
-// src/FormFieldInput.tsx
+// 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,
@@ -283,7 +387,7 @@ var FormFieldInput = ({
   defaultValue = "",
   ...inputProps
 }) => {
-  return /* @__PURE__ */(0, import_jsx_runtime5.jsx)(FormField, {
+  return /* @__PURE__ */(0, import_jsx_runtime9.jsx)(FormField, {
     name,
     label,
     disabled: inputProps.disabled,
@@ -295,7 +399,7 @@ var FormFieldInput = ({
       field,
       fieldState
     }) => {
-      return /* @__PURE__ */(0, import_jsx_runtime5.jsx)(import_ui5.Input, {
+      return /* @__PURE__ */(0, import_jsx_runtime9.jsx)(import_ui7.Input, {
         ...inputProps,
         ...field,
         "aria-invalid": fieldState.error ? "true" : void 0
@@ -305,8 +409,8 @@ var FormFieldInput = ({
 };
 
 // src/FormFieldPassword.tsx
-var import_ui6 = require("@ttoss/ui");
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_ui8 = require("@ttoss/ui");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 var FormFieldPassword = ({
   label,
   name,
@@ -316,7 +420,7 @@ var FormFieldPassword = ({
   defaultValue = "",
   ...inputProps
 }) => {
-  return /* @__PURE__ */(0, import_jsx_runtime6.jsx)(FormField, {
+  return /* @__PURE__ */(0, import_jsx_runtime10.jsx)(FormField, {
     name,
     label,
     disabled: inputProps.disabled,
@@ -328,7 +432,7 @@ var FormFieldPassword = ({
       field,
       fieldState
     }) => {
-      return /* @__PURE__ */(0, import_jsx_runtime6.jsx)(import_ui6.InputPassword, {
+      return /* @__PURE__ */(0, import_jsx_runtime10.jsx)(import_ui8.InputPassword, {
         ...inputProps,
         ...field,
         "aria-invalid": fieldState.error ? "true" : void 0
@@ -338,9 +442,9 @@ var FormFieldPassword = ({
 };
 
 // src/FormFieldRadio.tsx
-var import_ui7 = require("@ttoss/ui");
+var import_ui9 = require("@ttoss/ui");
 var import_react_hook_form5 = require("react-hook-form");
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 var FormFieldRadio = ({
   label,
   name,
@@ -359,23 +463,23 @@ var FormFieldRadio = ({
     name,
     defaultValue: ""
   });
-  return /* @__PURE__ */(0, import_jsx_runtime7.jsxs)(import_ui7.Flex, {
+  return /* @__PURE__ */(0, import_jsx_runtime11.jsxs)(import_ui9.Flex, {
     sx: {
       flexDirection: "column",
       width: "100%",
       ...sx
     },
-    children: [label && /* @__PURE__ */(0, import_jsx_runtime7.jsx)(import_ui7.Label, {
+    children: [label && /* @__PURE__ */(0, import_jsx_runtime11.jsx)(import_ui9.Label, {
       sx: {
         marginBottom: "md"
       },
       children: label
-    }), /* @__PURE__ */(0, import_jsx_runtime7.jsx)(import_ui7.Box, {
+    }), /* @__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_runtime7.jsxs)(import_ui7.Label, {
+        return /* @__PURE__ */(0, import_jsx_runtime11.jsxs)(import_ui9.Label, {
           htmlFor: id,
-          children: [/* @__PURE__ */(0, import_jsx_runtime7.jsx)(import_ui7.Radio, {
+          children: [/* @__PURE__ */(0, import_jsx_runtime11.jsx)(import_ui9.Radio, {
             ref,
             onChange,
             onBlur,
@@ -387,15 +491,15 @@ var FormFieldRadio = ({
           }), option.label]
         }, id);
       })
-    }), /* @__PURE__ */(0, import_jsx_runtime7.jsx)(ErrorMessage, {
+    }), /* @__PURE__ */(0, import_jsx_runtime11.jsx)(ErrorMessage, {
       name
     })]
   });
 };
 
 // src/FormFieldSelect.tsx
-var import_ui8 = require("@ttoss/ui");
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_ui10 = require("@ttoss/ui");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var checkDefaultValue = ({
   options,
   defaultValue,
@@ -438,7 +542,7 @@ var FormFieldSelect = ({
     defaultValue,
     placeholder
   });
-  return /* @__PURE__ */(0, import_jsx_runtime8.jsx)(FormField, {
+  return /* @__PURE__ */(0, import_jsx_runtime12.jsx)(FormField, {
     name,
     label,
     disabled: selectProps.disabled,
@@ -450,7 +554,7 @@ var FormFieldSelect = ({
       field,
       fieldState
     }) => {
-      return /* @__PURE__ */(0, import_jsx_runtime8.jsx)(import_ui8.Select, {
+      return /* @__PURE__ */(0, import_jsx_runtime12.jsx)(import_ui10.Select, {
         ...selectProps,
         ...field,
         ...{
@@ -459,7 +563,7 @@ var FormFieldSelect = ({
         },
         "aria-invalid": fieldState.error ? "true" : void 0,
         children: options.map(option => {
-          return /* @__PURE__ */(0, import_jsx_runtime8.jsx)("option", {
+          return /* @__PURE__ */(0, import_jsx_runtime12.jsx)("option", {
             value: option.value,
             children: option.label
           }, option.label);
@@ -470,8 +574,8 @@ var FormFieldSelect = ({
 };
 
 // src/FormFieldTextarea.tsx
-var import_ui9 = require("@ttoss/ui");
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_ui11 = require("@ttoss/ui");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var FormFieldTextarea = ({
   label,
   name,
@@ -479,7 +583,7 @@ var FormFieldTextarea = ({
   ...textareaProps
 }) => {
   const id = `form-field-textarea-${name}`;
-  return /* @__PURE__ */(0, import_jsx_runtime9.jsx)(FormField, {
+  return /* @__PURE__ */(0, import_jsx_runtime13.jsx)(FormField, {
     label,
     name,
     id,
@@ -488,7 +592,7 @@ var FormFieldTextarea = ({
       field,
       fieldState
     }) => {
-      return /* @__PURE__ */(0, import_jsx_runtime9.jsx)(import_ui9.Textarea, {
+      return /* @__PURE__ */(0, import_jsx_runtime13.jsx)(import_ui11.Textarea, {
         ...field,
         ...textareaProps,
         "aria-invalid": fieldState.error ? "true" : void 0
@@ -499,8 +603,8 @@ var FormFieldTextarea = ({
 
 // src/FormGroup.tsx
 var React3 = __toESM(require("react"));
-var import_ui10 = require("@ttoss/ui");
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_ui12 = require("@ttoss/ui");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var FormGroupLevelsManagerContext = React3.createContext({
   levelsLength: 1,
   registerChild: () => {
@@ -516,7 +620,7 @@ var FormGroupLevelsManager = ({
       setLevelsLength(level + 1);
     }
   }, [levelsLength]);
-  return /* @__PURE__ */(0, import_jsx_runtime10.jsx)(FormGroupLevelsManagerContext.Provider, {
+  return /* @__PURE__ */(0, import_jsx_runtime14.jsx)(FormGroupLevelsManagerContext.Provider, {
     value: {
       levelsLength,
       registerChild
@@ -559,7 +663,7 @@ var FormGroupWrapper = ({
     gap: "md",
     width: "100%"
   };
-  return /* @__PURE__ */(0, import_jsx_runtime10.jsxs)(import_ui10.Box, {
+  return /* @__PURE__ */(0, import_jsx_runtime14.jsxs)(import_ui12.Box, {
     "aria-level": level,
     ...boxProps,
     sx: {
@@ -567,18 +671,18 @@ var FormGroupWrapper = ({
       marginBottom: "lg",
       ...boxProps.sx
     },
-    children: [title && /* @__PURE__ */(0, import_jsx_runtime10.jsx)(import_ui10.Box, {
+    children: [title && /* @__PURE__ */(0, import_jsx_runtime14.jsx)(import_ui12.Box, {
       sx: {
         marginBottom: "md"
       },
-      children: /* @__PURE__ */(0, import_jsx_runtime10.jsx)(import_ui10.Text, {
+      children: /* @__PURE__ */(0, import_jsx_runtime14.jsx)(import_ui12.Text, {
         sx: {
           fontSize: "2xl",
           fontWeight: "bold"
         },
         children: title
       })
-    }), /* @__PURE__ */(0, import_jsx_runtime10.jsx)(import_ui10.Flex, {
+    }), /* @__PURE__ */(0, import_jsx_runtime14.jsx)(import_ui12.Flex, {
       sx: childrenContainerSx,
       children
     })]
@@ -589,15 +693,15 @@ var FormGroup = props => {
     level
   } = useFormGroup();
   const currentLevel = level === void 0 ? 0 : level + 1;
-  return /* @__PURE__ */(0, import_jsx_runtime10.jsx)(FormGroupContext.Provider, {
+  return /* @__PURE__ */(0, import_jsx_runtime14.jsx)(FormGroupContext.Provider, {
     value: {
       parentLevel: currentLevel
     },
-    children: currentLevel === 0 ? /* @__PURE__ */(0, import_jsx_runtime10.jsx)(FormGroupLevelsManager, {
-      children: /* @__PURE__ */(0, import_jsx_runtime10.jsx)(FormGroupWrapper, {
+    children: currentLevel === 0 ? /* @__PURE__ */(0, import_jsx_runtime14.jsx)(FormGroupLevelsManager, {
+      children: /* @__PURE__ */(0, import_jsx_runtime14.jsx)(FormGroupWrapper, {
         ...props
       })
-    }) : /* @__PURE__ */(0, import_jsx_runtime10.jsx)(FormGroupWrapper, {
+    }) : /* @__PURE__ */(0, import_jsx_runtime14.jsx)(FormGroupWrapper, {
       ...props
     })
   });
@@ -607,8 +711,12 @@ var FormGroup = props => {
   Form,
   FormField,
   FormFieldCheckbox,
+  FormFieldCreditCardNumber,
+  FormFieldCurrencyInput,
   FormFieldInput,
+  FormFieldNumericFormat,
   FormFieldPassword,
+  FormFieldPatternFormat,
   FormFieldRadio,
   FormFieldSelect,
   FormFieldTextarea,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/forms",
-  "version": "0.18.21",
+  "version": "0.20.0",
   "license": "UNLICENSED",
   "author": "ttoss",
   "contributors": [
@@ -23,6 +23,7 @@
     "@hookform/error-message": "^2.0.1",
     "@hookform/resolvers": "^3.1.0",
     "react-hook-form": "^7.44.3",
+    "react-number-format": "^5.3.1",
     "yup": "^1.2.0"
   },
   "peerDependencies": {

package/src/FormFieldCreditCardNumber.tsx

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

package/src/FormFieldCurrencyInput.tsx

@@ -0,0 +1,36 @@
+import {
+  FormFieldNumericFormat,
+  FormFieldNumericFormatProps,
+} from './FormFieldNumericFormat';
+
+export type FormFieldCurrencyInputProps = {
+  label?: string;
+  name: string;
+  prefix: string;
+  decimalSeparator: string;
+  thousandSeparator: string;
+} & FormFieldNumericFormatProps;
+
+export const FormFieldCurrencyInput = ({
+  label,
+  name,
+  prefix,
+  decimalSeparator,
+  thousandSeparator,
+  ...formFieldNumericFormatProps
+}: FormFieldCurrencyInputProps) => {
+  return (
+    <FormFieldNumericFormat
+      name={name}
+      label={label}
+      fixedDecimalScale
+      decimalScale={2}
+      prefix={prefix}
+      decimalSeparator={decimalSeparator}
+      thousandSeparator={thousandSeparator}
+      placeholder={`${prefix} 0${decimalSeparator}00`}
+      allowNegative={false}
+      {...formFieldNumericFormatProps}
+    />
+  );
+};

package/src/FormFieldInput.tsx

@@ -10,7 +10,7 @@ export type FormFieldInputProps<TName> = {
 
 export const FormFieldInput = <
   TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
 >({
   label,
   name,

package/src/FormFieldNumericFormat.tsx

@@ -0,0 +1,35 @@
+import { FormField } from './FormField';
+import { Input } from '@ttoss/ui';
+import { NumericFormat, NumericFormatProps } from 'react-number-format';
+
+export type FormFieldNumericFormatProps = {
+  label?: string;
+  name: string;
+} & NumericFormatProps;
+
+export const FormFieldNumericFormat = ({
+  label,
+  name,
+  ...numericFormatProps
+}: FormFieldNumericFormatProps) => {
+  return (
+    <FormField
+      label={label}
+      name={name}
+      render={({ field }) => {
+        return (
+          <NumericFormat
+            name={field.name}
+            value={field.value}
+            onBlur={field.onBlur}
+            onValueChange={(values) => {
+              field.onChange(values.floatValue);
+            }}
+            customInput={Input}
+            {...numericFormatProps}
+          />
+        );
+      }}
+    />
+  );
+};

package/src/FormFieldPassword.tsx

@@ -10,7 +10,7 @@ export type FormFieldPasswordProps<TName> = {
 
 export const FormFieldPassword = <
   TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
 >({
   label,
   name,

package/src/FormFieldPatternFormat.tsx

@@ -0,0 +1,36 @@
+import { FormField } from './FormField';
+import { Input } from '@ttoss/ui';
+import { PatternFormat, PatternFormatProps } from 'react-number-format';
+
+export type FormFieldPatternFormatProps = {
+  label?: string;
+  name: string;
+} & PatternFormatProps;
+
+export const FormFieldPatternFormat = ({
+  label,
+  name,
+  ...patternFormatProps
+}: FormFieldPatternFormatProps) => {
+  return (
+    <FormField
+      name={name}
+      label={label}
+      render={({ field, fieldState }) => {
+        return (
+          <PatternFormat
+            name={field.name}
+            value={field.value}
+            onBlur={field.onBlur}
+            onValueChange={(values) => {
+              field.onChange(values.value);
+            }}
+            customInput={Input}
+            aria-invalid={Boolean(fieldState.error).valueOf()}
+            {...patternFormatProps}
+          />
+        );
+      }}
+    />
+  );
+};

package/src/index.ts

@@ -7,6 +7,10 @@ export * as yup from 'yup';
 export { Form } from './Form';
 export { FormField } from './FormField';
 export { FormFieldCheckbox } from './FormFieldCheckbox';
+export { FormFieldCreditCardNumber } from './FormFieldCreditCardNumber';
+export { FormFieldNumericFormat } from './FormFieldNumericFormat';
+export { FormFieldPatternFormat } from './FormFieldPatternFormat';
+export { FormFieldCurrencyInput } from './FormFieldCurrencyInput';
 export { FormFieldInput } from './FormFieldInput';
 export { FormFieldPassword } from './FormFieldPassword';
 export { FormFieldRadio } from './FormFieldRadio';