@ttoss/forms 0.19.0 → 0.21.0

package/dist/esm/index.js

@@ -141,9 +141,12 @@ var FormField = ({
   id: idProp,
   name,
   defaultValue,
+  disabled,
+  tooltip,
+  onTooltipClick,
   sx,
-  render,
-  ...formFieldProps
+  css,
+  render
 }) => {
   const controllerReturn = useController({
     name,
@@ -154,10 +157,10 @@ var FormField = ({
     return React2.Children.map(render(controllerReturn), child => {
       return /* @__PURE__ */jsxs(Fragment, {
         children: [label && /* @__PURE__ */jsx3(Label, {
-          "aria-disabled": formFieldProps.disabled,
+          "aria-disabled": disabled,
           htmlFor: id,
-          tooltip: formFieldProps.tooltip,
-          onTooltipClick: formFieldProps.onTooltipClick,
+          tooltip,
+          onTooltipClick,
           children: label
         }), /*#__PURE__*/React2.createElement(child.type, {
           id,
@@ -165,7 +168,7 @@ var FormField = ({
         })]
       });
     });
-  }, [controllerReturn, formFieldProps.disabled, formFieldProps.onTooltipClick, formFieldProps.tooltip, id, label, render]);
+  }, [controllerReturn, disabled, onTooltipClick, tooltip, id, label, render]);
   return /* @__PURE__ */jsxs(Flex, {
     sx: {
       flexDirection: "column",
@@ -173,6 +176,7 @@ var FormField = ({
       gap: "md",
       ...sx
     },
+    css,
     children: [memoizedRender, /* @__PURE__ */jsx3(ErrorMessage, {
       name
     })]
@@ -235,38 +239,109 @@ var FormFieldCheckbox = ({
   });
 };
 
-// src/FormFieldNumericFormat.tsx
+// src/FormFieldPatternFormat.tsx
 import { Input } from "@ttoss/ui";
-import { NumericFormat } from "react-number-format";
+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__ */jsx5(FormField, {
+  return /* @__PURE__ */jsx7(FormField, {
     label,
     name,
     render: ({
       field
     }) => {
-      return /* @__PURE__ */jsx5(NumericFormat, {
+      return /* @__PURE__ */jsx7(NumericFormat, {
         name: field.name,
         value: field.value,
         onBlur: field.onBlur,
         onValueChange: values => {
           field.onChange(values.floatValue);
         },
-        customInput: Input,
+        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 Input2 } from "@ttoss/ui";
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { Input as Input3 } from "@ttoss/ui";
+import { jsx as jsx9 } from "react/jsx-runtime";
 var FormFieldInput = ({
   label,
   name,
@@ -276,7 +351,7 @@ var FormFieldInput = ({
   defaultValue = "",
   ...inputProps
 }) => {
-  return /* @__PURE__ */jsx6(FormField, {
+  return /* @__PURE__ */jsx9(FormField, {
     name,
     label,
     disabled: inputProps.disabled,
@@ -288,7 +363,7 @@ var FormFieldInput = ({
       field,
       fieldState
     }) => {
-      return /* @__PURE__ */jsx6(Input2, {
+      return /* @__PURE__ */jsx9(Input3, {
         ...inputProps,
         ...field,
         "aria-invalid": fieldState.error ? "true" : void 0
@@ -299,7 +374,7 @@ var FormFieldInput = ({
 
 // src/FormFieldPassword.tsx
 import { InputPassword } from "@ttoss/ui";
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx10 } from "react/jsx-runtime";
 var FormFieldPassword = ({
   label,
   name,
@@ -309,7 +384,7 @@ var FormFieldPassword = ({
   defaultValue = "",
   ...inputProps
 }) => {
-  return /* @__PURE__ */jsx7(FormField, {
+  return /* @__PURE__ */jsx10(FormField, {
     name,
     label,
     disabled: inputProps.disabled,
@@ -321,7 +396,7 @@ var FormFieldPassword = ({
       field,
       fieldState
     }) => {
-      return /* @__PURE__ */jsx7(InputPassword, {
+      return /* @__PURE__ */jsx10(InputPassword, {
         ...inputProps,
         ...field,
         "aria-invalid": fieldState.error ? "true" : void 0
@@ -333,7 +408,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 jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs3 } from "react/jsx-runtime";
 var FormFieldRadio = ({
   label,
   name,
@@ -358,17 +433,17 @@ var FormFieldRadio = ({
       width: "100%",
       ...sx
     },
-    children: [label && /* @__PURE__ */jsx8(Label3, {
+    children: [label && /* @__PURE__ */jsx11(Label3, {
       sx: {
         marginBottom: "md"
       },
       children: label
-    }), /* @__PURE__ */jsx8(Box2, {
+    }), /* @__PURE__ */jsx11(Box2, {
       children: options.map(option => {
         const id = `form-field-radio-${name}-${option.value}`;
         return /* @__PURE__ */jsxs3(Label3, {
           htmlFor: id,
-          children: [/* @__PURE__ */jsx8(Radio, {
+          children: [/* @__PURE__ */jsx11(Radio, {
             ref,
             onChange,
             onBlur,
@@ -380,7 +455,7 @@ var FormFieldRadio = ({
           }), option.label]
         }, id);
       })
-    }), /* @__PURE__ */jsx8(ErrorMessage, {
+    }), /* @__PURE__ */jsx11(ErrorMessage, {
       name
     })]
   });
@@ -388,75 +463,48 @@ var FormFieldRadio = ({
 
 // src/FormFieldSelect.tsx
 import { Select } from "@ttoss/ui";
-import { jsx as jsx9 } from "react/jsx-runtime";
-var checkDefaultValue = ({
-  options,
-  defaultValue,
-  placeholder
-}) => {
-  if (defaultValue) {
-    return defaultValue;
-  }
-  const hasEmptyValue = options.some(opt => {
-    return opt.value === "" || opt.value === 0;
-  });
-  const EMPTY_VALUE = "";
-  if (placeholder && hasEmptyValue) {
-    return EMPTY_VALUE;
-  }
-  if (placeholder && !hasEmptyValue) {
-    options.unshift({
-      label: placeholder,
-      value: ""
-    });
-    return EMPTY_VALUE;
-  }
-  if (!placeholder && defaultValue) return EMPTY_VALUE;
-  if (options.length === 0) return EMPTY_VALUE;
-  return options?.[0]?.value;
-};
+import { jsx as jsx12 } from "react/jsx-runtime";
 var FormFieldSelect = ({
   label,
   name,
-  options,
+  id,
+  defaultValue,
   sx,
+  css,
+  disabled,
+  tooltip,
+  onTooltipClick,
   ...selectProps
 }) => {
-  const {
-    defaultValue,
-    placeholder
-  } = selectProps;
-  const checkedDefaultValue = checkDefaultValue({
-    options,
-    defaultValue,
-    placeholder
-  });
-  return /* @__PURE__ */jsx9(FormField, {
+  return /* @__PURE__ */jsx12(FormField, {
     name,
     label,
-    disabled: selectProps.disabled,
-    tooltip: selectProps.tooltip,
-    onTooltipClick: selectProps.onTooltipClick,
+    id,
+    defaultValue,
+    disabled,
+    tooltip,
+    onTooltipClick,
     sx,
-    defaultValue: checkedDefaultValue,
+    css,
     render: ({
       field,
       fieldState
     }) => {
-      return /* @__PURE__ */jsx9(Select, {
+      const value = selectProps.options?.find(option => {
+        if ("value" in option) {
+          return option.value === field.value;
+        }
+        return false;
+      });
+      return /* @__PURE__ */jsx12(Select, {
         ...selectProps,
         ...field,
-        ...{
-          ...selectProps,
-          defaultValue: void 0
+        defaultValue: value,
+        value,
+        onChange: value2 => {
+          field.onChange(value2?.value);
         },
-        "aria-invalid": fieldState.error ? "true" : void 0,
-        children: options.map(option => {
-          return /* @__PURE__ */jsx9("option", {
-            value: option.value,
-            children: option.label
-          }, option.label);
-        })
+        "aria-invalid": fieldState.error ? "true" : void 0
       });
     }
   });
@@ -464,7 +512,7 @@ var FormFieldSelect = ({
 
 // src/FormFieldTextarea.tsx
 import { Textarea } from "@ttoss/ui";
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx13 } from "react/jsx-runtime";
 var FormFieldTextarea = ({
   label,
   name,
@@ -472,7 +520,7 @@ var FormFieldTextarea = ({
   ...textareaProps
 }) => {
   const id = `form-field-textarea-${name}`;
-  return /* @__PURE__ */jsx10(FormField, {
+  return /* @__PURE__ */jsx13(FormField, {
     label,
     name,
     id,
@@ -481,7 +529,7 @@ var FormFieldTextarea = ({
       field,
       fieldState
     }) => {
-      return /* @__PURE__ */jsx10(Textarea, {
+      return /* @__PURE__ */jsx13(Textarea, {
         ...field,
         ...textareaProps,
         "aria-invalid": fieldState.error ? "true" : void 0
@@ -493,7 +541,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 jsx11, 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: () => {
@@ -509,7 +557,7 @@ var FormGroupLevelsManager = ({
       setLevelsLength(level + 1);
     }
   }, [levelsLength]);
-  return /* @__PURE__ */jsx11(FormGroupLevelsManagerContext.Provider, {
+  return /* @__PURE__ */jsx14(FormGroupLevelsManagerContext.Provider, {
     value: {
       levelsLength,
       registerChild
@@ -560,18 +608,18 @@ var FormGroupWrapper = ({
       marginBottom: "lg",
       ...boxProps.sx
     },
-    children: [title && /* @__PURE__ */jsx11(Box3, {
+    children: [title && /* @__PURE__ */jsx14(Box3, {
       sx: {
         marginBottom: "md"
       },
-      children: /* @__PURE__ */jsx11(Text, {
+      children: /* @__PURE__ */jsx14(Text, {
         sx: {
           fontSize: "2xl",
           fontWeight: "bold"
         },
         children: title
       })
-    }), /* @__PURE__ */jsx11(Flex4, {
+    }), /* @__PURE__ */jsx14(Flex4, {
       sx: childrenContainerSx,
       children
     })]
@@ -582,17 +630,17 @@ var FormGroup = props => {
     level
   } = useFormGroup();
   const currentLevel = level === void 0 ? 0 : level + 1;
-  return /* @__PURE__ */jsx11(FormGroupContext.Provider, {
+  return /* @__PURE__ */jsx14(FormGroupContext.Provider, {
     value: {
       parentLevel: currentLevel
     },
-    children: currentLevel === 0 ? /* @__PURE__ */jsx11(FormGroupLevelsManager, {
-      children: /* @__PURE__ */jsx11(FormGroupWrapper, {
+    children: currentLevel === 0 ? /* @__PURE__ */jsx14(FormGroupLevelsManager, {
+      children: /* @__PURE__ */jsx14(FormGroupWrapper, {
         ...props
       })
-    }) : /* @__PURE__ */jsx11(FormGroupWrapper, {
+    }) : /* @__PURE__ */jsx14(FormGroupWrapper, {
       ...props
     })
   });
 };
-export { Form, FormField, FormFieldCheckbox, FormFieldInput, FormFieldNumericFormat, 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

@@ -1,13 +1,13 @@
 export { yupResolver } from '@hookform/resolvers/yup';
 import * as react_hook_form from 'react-hook-form';
-import { FieldValues, FieldPath, FieldPathValue, UseControllerReturn } from 'react-hook-form';
+import { FieldValues, FieldPath, UseControllerReturn, FieldPathValue } from 'react-hook-form';
 export * from 'react-hook-form';
 import * as yup from 'yup';
 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 { NumericFormatProps } from 'react-number-format';
+import { BoxProps, SxProp, 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;
@@ -17,32 +17,52 @@ declare const Form: <TFieldValues extends FieldValues = FieldValues>({ children,
     children: React.ReactNode | React.ReactNode[];
 } & react_hook_form.UseFormReturn<TFieldValues, any, undefined>) => react_jsx_runtime.JSX.Element;
 
-type FormFieldProps = {
-    sx?: FlexProps['sx'];
-    disabled?: boolean;
-    tooltip?: boolean;
-    onTooltipClick?: () => void;
-};
-type FormFieldCompleteProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = {
+type FormFieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = {
     label?: string;
     id?: string;
     name: TName;
     defaultValue?: FieldPathValue<TFieldValues, TName>;
+    disabled?: boolean;
+    tooltip?: boolean;
+    onTooltipClick?: () => void;
+} & SxProp;
+type FormFieldCompleteProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = {
     render: (props: UseControllerReturn<TFieldValues, TName>) => React.ReactElement;
-} & FormFieldProps;
-declare const FormField: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ label, id: idProp, name, defaultValue, sx, render, ...formFieldProps }: FormFieldCompleteProps<TFieldValues, TName>) => react_jsx_runtime.JSX.Element;
+} & 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 FormFieldCheckbox: <TFieldValues extends FieldValues = FieldValues>({ label, name, sx, ...checkboxProps }: {
     label?: string | undefined;
     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;
@@ -55,32 +75,18 @@ type FormFieldPasswordProps<TName> = {
 } & InputPasswordProps & FormFieldProps;
 declare const FormFieldPassword: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ label, name, tooltip, onTooltipClick, sx, defaultValue, ...inputProps }: FormFieldPasswordProps<TName>) => react_jsx_runtime.JSX.Element;
 
-type FormRadioOption$1 = {
+type FormRadioOption = {
     value: string | number;
     label: string;
 };
 declare const FormFieldRadio: <TFieldValues extends FieldValues = FieldValues>({ label, name, options, sx, ...radioProps }: {
     label?: string | undefined;
     name: FieldPath<TFieldValues>;
-    options: FormRadioOption$1[];
+    options: FormRadioOption[];
 } & RadioProps) => react_jsx_runtime.JSX.Element;
 
-type FormRadioOption = {
-    value: string | number;
-    label: string;
-};
-type SelectSwitchProps = (SelectProps & {
-    placeholder?: never;
-}) | (SelectProps & {
-    defaultValue?: never;
-});
-type FormFieldSelectProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> = SelectSwitchProps & FormFieldProps & {
-    label?: string;
-    name: FieldPath<TFieldValues>;
-    options: FormRadioOption[];
-    defaultValue?: FieldPathValue<TFieldValues, TName>;
-};
-declare const FormFieldSelect: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ label, name, options, sx, ...selectProps }: FormFieldSelectProps<TFieldValues, TName>) => react_jsx_runtime.JSX.Element;
+type FormFieldSelectProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = Omit<SelectProps, 'defaultValue'> & FormFieldProps<TFieldValues, TName>;
+declare const FormFieldSelect: <TFieldValues extends FieldValues = FieldValues>({ label, name, id, defaultValue, sx, css, disabled, tooltip, onTooltipClick, ...selectProps }: FormFieldSelectProps<TFieldValues, react_hook_form.Path<TFieldValues>>) => react_jsx_runtime.JSX.Element;
 
 declare const FormFieldTextarea: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ label, name, sx, ...textareaProps }: {
     label?: string | undefined;
@@ -97,4 +103,4 @@ type FormGroupProps = {
 } & BoxProps;
 declare const FormGroup: (props: FormGroupProps) => react_jsx_runtime.JSX.Element;
 
-export { Form, FormField, FormFieldCheckbox, FormFieldInput, FormFieldNumericFormat, 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

@@ -1,13 +1,13 @@
 export { yupResolver } from '@hookform/resolvers/yup';
 import * as react_hook_form from 'react-hook-form';
-import { FieldValues, FieldPath, FieldPathValue, UseControllerReturn } from 'react-hook-form';
+import { FieldValues, FieldPath, UseControllerReturn, FieldPathValue } from 'react-hook-form';
 export * from 'react-hook-form';
 import * as yup from 'yup';
 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 { NumericFormatProps } from 'react-number-format';
+import { BoxProps, SxProp, 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;
@@ -17,32 +17,52 @@ declare const Form: <TFieldValues extends FieldValues = FieldValues>({ children,
     children: React.ReactNode | React.ReactNode[];
 } & react_hook_form.UseFormReturn<TFieldValues, any, undefined>) => react_jsx_runtime.JSX.Element;
 
-type FormFieldProps = {
-    sx?: FlexProps['sx'];
-    disabled?: boolean;
-    tooltip?: boolean;
-    onTooltipClick?: () => void;
-};
-type FormFieldCompleteProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = {
+type FormFieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = {
     label?: string;
     id?: string;
     name: TName;
     defaultValue?: FieldPathValue<TFieldValues, TName>;
+    disabled?: boolean;
+    tooltip?: boolean;
+    onTooltipClick?: () => void;
+} & SxProp;
+type FormFieldCompleteProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = {
     render: (props: UseControllerReturn<TFieldValues, TName>) => React.ReactElement;
-} & FormFieldProps;
-declare const FormField: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ label, id: idProp, name, defaultValue, sx, render, ...formFieldProps }: FormFieldCompleteProps<TFieldValues, TName>) => react_jsx_runtime.JSX.Element;
+} & 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 FormFieldCheckbox: <TFieldValues extends FieldValues = FieldValues>({ label, name, sx, ...checkboxProps }: {
     label?: string | undefined;
     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;
@@ -55,32 +75,18 @@ type FormFieldPasswordProps<TName> = {
 } & InputPasswordProps & FormFieldProps;
 declare const FormFieldPassword: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ label, name, tooltip, onTooltipClick, sx, defaultValue, ...inputProps }: FormFieldPasswordProps<TName>) => react_jsx_runtime.JSX.Element;
 
-type FormRadioOption$1 = {
+type FormRadioOption = {
     value: string | number;
     label: string;
 };
 declare const FormFieldRadio: <TFieldValues extends FieldValues = FieldValues>({ label, name, options, sx, ...radioProps }: {
     label?: string | undefined;
     name: FieldPath<TFieldValues>;
-    options: FormRadioOption$1[];
+    options: FormRadioOption[];
 } & RadioProps) => react_jsx_runtime.JSX.Element;
 
-type FormRadioOption = {
-    value: string | number;
-    label: string;
-};
-type SelectSwitchProps = (SelectProps & {
-    placeholder?: never;
-}) | (SelectProps & {
-    defaultValue?: never;
-});
-type FormFieldSelectProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> = SelectSwitchProps & FormFieldProps & {
-    label?: string;
-    name: FieldPath<TFieldValues>;
-    options: FormRadioOption[];
-    defaultValue?: FieldPathValue<TFieldValues, TName>;
-};
-declare const FormFieldSelect: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ label, name, options, sx, ...selectProps }: FormFieldSelectProps<TFieldValues, TName>) => react_jsx_runtime.JSX.Element;
+type FormFieldSelectProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = Omit<SelectProps, 'defaultValue'> & FormFieldProps<TFieldValues, TName>;
+declare const FormFieldSelect: <TFieldValues extends FieldValues = FieldValues>({ label, name, id, defaultValue, sx, css, disabled, tooltip, onTooltipClick, ...selectProps }: FormFieldSelectProps<TFieldValues, react_hook_form.Path<TFieldValues>>) => react_jsx_runtime.JSX.Element;
 
 declare const FormFieldTextarea: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ label, name, sx, ...textareaProps }: {
     label?: string | undefined;
@@ -97,4 +103,4 @@ type FormGroupProps = {
 } & BoxProps;
 declare const FormGroup: (props: FormGroupProps) => react_jsx_runtime.JSX.Element;
 
-export { Form, FormField, FormFieldCheckbox, FormFieldInput, FormFieldNumericFormat, FormFieldPassword, FormFieldRadio, FormFieldSelect, FormFieldTextarea, FormGroup, useFormGroup };
+export { Form, FormField, FormFieldCheckbox, FormFieldCreditCardNumber, FormFieldCurrencyInput, FormFieldInput, FormFieldNumericFormat, FormFieldPassword, FormFieldPatternFormat, FormFieldRadio, FormFieldSelect, FormFieldTextarea, FormGroup, useFormGroup };