@ttoss/forms 0.17.4 → 0.17.6

package/dist/esm/index.js

@@ -59,14 +59,15 @@ var ErrorMessage = ({
 // src/FormField.tsx
 import { useController } from "react-hook-form";
 import { Flex, Label } from "@ttoss/ui";
-import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx as jsx3, jsxs } from "react/jsx-runtime";
 var FormField = ({
   label,
   id: idProp,
   name,
   defaultValue,
   sx,
-  render
+  render,
+  ...formFieldProps
 }) => {
   const controllerReturn = useController({
     name,
@@ -75,22 +76,27 @@ var FormField = ({
   const id = idProp || `form-field-${name}`;
   const memoizedRender = React2.useMemo(() => {
     return React2.Children.map(render(controllerReturn), child => {
-      return /*#__PURE__*/React2.createElement(child.type, {
-        id,
-        ...child.props
+      return /* @__PURE__ */jsxs(Fragment, {
+        children: [label && /* @__PURE__ */jsx3(Label, {
+          "aria-disabled": formFieldProps.disabled,
+          htmlFor: id,
+          tooltip: formFieldProps.tooltip,
+          onTooltipClick: formFieldProps.onTooltipClick,
+          children: label
+        }), /*#__PURE__*/React2.createElement(child.type, {
+          id,
+          ...child.props
+        })]
       });
     });
-  }, [controllerReturn, id, render]);
+  }, [controllerReturn, formFieldProps.disabled, formFieldProps.onTooltipClick, formFieldProps.tooltip, id, label, render]);
   return /* @__PURE__ */jsxs(Flex, {
     sx: {
       flexDirection: "column",
       width: "100%",
       ...sx
     },
-    children: [label && /* @__PURE__ */jsx3(Label, {
-      htmlFor: id,
-      children: label
-    }), memoizedRender, /* @__PURE__ */jsx3(ErrorMessage, {
+    children: [memoizedRender, /* @__PURE__ */jsx3(ErrorMessage, {
       name
     })]
   });
@@ -153,9 +159,8 @@ var FormFieldCheckbox = ({
 };
 
 // src/FormFieldInput.tsx
-import { useController as useController3 } from "react-hook-form";
-import { Flex as Flex3, Input, Label as Label3 } from "@ttoss/ui";
-import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Input } from "@ttoss/ui";
+import { jsx as jsx5 } from "react/jsx-runtime";
 var FormFieldInput = ({
   label,
   name,
@@ -164,53 +169,30 @@ var FormFieldInput = ({
   sx,
   ...inputProps
 }) => {
-  const {
-    field: {
-      onChange,
-      onBlur,
-      value,
-      ref
-    },
-    formState: {
-      errors
-    }
-  } = useController3({
+  return /* @__PURE__ */jsx5(FormField, {
     name,
-    defaultValue: ""
-  });
-  const id = `form-field-input-${name}`;
-  const hasError = !!errors[name]?.message;
-  return /* @__PURE__ */jsxs3(Flex3, {
-    sx: {
-      flexDirection: "column",
-      width: "100%",
-      ...sx
-    },
-    children: [label && /* @__PURE__ */jsx5(Label3, {
-      "aria-disabled": inputProps.disabled,
-      htmlFor: id,
-      tooltip,
-      onTooltipClick,
-      children: label
-    }), /* @__PURE__ */jsx5(Input, {
-      ref,
-      onChange,
-      className: hasError ? "error" : "",
-      onBlur,
-      value,
-      name,
-      id,
-      ...inputProps
-    }), /* @__PURE__ */jsx5(ErrorMessage, {
-      name
-    })]
+    label,
+    disabled: inputProps.disabled,
+    tooltip,
+    onTooltipClick,
+    sx,
+    render: ({
+      field,
+      formState
+    }) => {
+      const hasError = !!formState.errors[name]?.message;
+      return /* @__PURE__ */jsx5(Input, {
+        ...inputProps,
+        ...field,
+        "aria-invalid": hasError.valueOf()
+      });
+    }
   });
 };
 
 // src/FormFieldPassword.tsx
-import { useController as useController4 } from "react-hook-form";
-import { Flex as Flex4, InputPassword, Label as Label4 } from "@ttoss/ui";
-import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+import { InputPassword } from "@ttoss/ui";
+import { jsx as jsx6 } from "react/jsx-runtime";
 var FormFieldPassword = ({
   label,
   name,
@@ -219,53 +201,31 @@ var FormFieldPassword = ({
   sx,
   ...inputProps
 }) => {
-  const {
-    field: {
-      onChange,
-      onBlur,
-      value,
-      ref
-    },
-    formState: {
-      errors
-    }
-  } = useController4({
+  return /* @__PURE__ */jsx6(FormField, {
     name,
-    defaultValue: ""
-  });
-  const id = `form-field-password-${name}`;
-  const hasError = !!errors[name]?.message;
-  return /* @__PURE__ */jsxs4(Flex4, {
-    sx: {
-      flexDirection: "column",
-      width: "100%",
-      ...sx
-    },
-    children: [label && /* @__PURE__ */jsx6(Label4, {
-      "aria-disabled": inputProps.disabled,
-      htmlFor: id,
-      tooltip,
-      onTooltipClick,
-      children: label
-    }), /* @__PURE__ */jsx6(InputPassword, {
-      ref,
-      onChange,
-      className: hasError ? "error" : "",
-      onBlur,
-      value,
-      name,
-      id,
-      ...inputProps
-    }), /* @__PURE__ */jsx6(ErrorMessage, {
-      name
-    })]
+    label,
+    disabled: inputProps.disabled,
+    tooltip,
+    onTooltipClick,
+    sx,
+    render: ({
+      field,
+      formState
+    }) => {
+      const hasError = !!formState.errors[name]?.message;
+      return /* @__PURE__ */jsx6(InputPassword, {
+        ...inputProps,
+        ...field,
+        "aria-invalid": hasError.valueOf()
+      });
+    }
   });
 };
 
 // src/FormFieldRadio.tsx
-import { Box as Box2, Flex as Flex5, Label as Label5, Radio } from "@ttoss/ui";
-import { useController as useController5 } from "react-hook-form";
-import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+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";
 var FormFieldRadio = ({
   label,
   name,
@@ -280,22 +240,22 @@ var FormFieldRadio = ({
       value,
       ref
     }
-  } = useController5({
+  } = useController3({
     name,
     defaultValue: ""
   });
-  return /* @__PURE__ */jsxs5(Flex5, {
+  return /* @__PURE__ */jsxs3(Flex3, {
     sx: {
       flexDirection: "column",
       width: "100%",
       ...sx
     },
-    children: [label && /* @__PURE__ */jsx7(Label5, {
+    children: [label && /* @__PURE__ */jsx7(Label3, {
       children: label
     }), /* @__PURE__ */jsx7(Box2, {
       children: options.map(option => {
         const id = `form-field-radio-${name}-${option.value}`;
-        return /* @__PURE__ */jsxs5(Label5, {
+        return /* @__PURE__ */jsxs3(Label3, {
           htmlFor: id,
           children: [/* @__PURE__ */jsx7(Radio, {
             ref,
@@ -316,23 +276,28 @@ var FormFieldRadio = ({
 };
 
 // src/FormFieldSelect.tsx
-import { useController as useController6 } from "react-hook-form";
-import { Flex as Flex6, Label as Label6, Select } from "@ttoss/ui";
-import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Select } from "@ttoss/ui";
+import { jsx as jsx8 } from "react/jsx-runtime";
 var checkDefaultValue = (options, defaultValue, placeholder) => {
+  if (defaultValue) {
+    return defaultValue;
+  }
   const hasEmptyValue = options.some(opt => {
     return opt.value === "" || opt.value === 0;
   });
-  if (placeholder && hasEmptyValue) return "";
+  const EMPTY_VALUE = "";
+  if (placeholder && hasEmptyValue) {
+    return EMPTY_VALUE;
+  }
   if (placeholder && !hasEmptyValue) {
     options.unshift({
       label: placeholder,
       value: ""
     });
-    return "";
+    return EMPTY_VALUE;
   }
-  if (!placeholder && defaultValue) return defaultValue;
-  if (options.length === 0) return "";
+  if (!placeholder && defaultValue) return EMPTY_VALUE;
+  if (options.length === 0) return EMPTY_VALUE;
   return options?.[0]?.value;
 };
 var FormFieldSelect = ({
@@ -347,47 +312,32 @@ var FormFieldSelect = ({
     placeholder
   } = selectProps;
   const checkedDefaultValue = checkDefaultValue(options, defaultValue, placeholder);
-  const {
-    field: {
-      onChange,
-      onBlur,
-      value,
-      ref
-    }
-  } = useController6({
+  return /* @__PURE__ */jsx8(FormField, {
     name,
-    defaultValue: checkedDefaultValue
-  });
-  const id = `form-field-select-${name}`;
-  return /* @__PURE__ */jsxs6(Flex6, {
-    sx: {
-      flexDirection: "column",
-      width: "100%",
-      ...sx
-    },
-    children: [label && /* @__PURE__ */jsx8(Label6, {
-      htmlFor: id,
-      children: label
-    }), /* @__PURE__ */jsx8(Select, {
-      ref,
-      name,
-      onChange,
-      onBlur,
-      value,
-      id,
-      ...{
+    label,
+    disabled: selectProps.disabled,
+    tooltip: selectProps.tooltip,
+    onTooltipClick: selectProps.onTooltipClick,
+    sx,
+    defaultValue: checkedDefaultValue,
+    render: ({
+      field
+    }) => {
+      return /* @__PURE__ */jsx8(Select, {
         ...selectProps,
-        defaultValue: void 0
-      },
-      children: options.map(option => {
-        return /* @__PURE__ */jsx8("option", {
-          value: option.value,
-          children: option.label
-        }, option.label);
-      })
-    }), /* @__PURE__ */jsx8(ErrorMessage, {
-      name
-    })]
+        ...field,
+        ...{
+          ...selectProps,
+          defaultValue: void 0
+        },
+        children: options.map(option => {
+          return /* @__PURE__ */jsx8("option", {
+            value: option.value,
+            children: option.label
+          }, option.label);
+        })
+      });
+    }
   });
 };
 
@@ -419,8 +369,8 @@ var FormFieldTextarea = ({
 
 // src/FormGroup.tsx
 import * as React3 from "react";
-import { Box as Box3, Flex as Flex7, Text } from "@ttoss/ui";
-import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Box as Box3, Flex as Flex4, Text } from "@ttoss/ui";
+import { jsx as jsx10, jsxs as jsxs4 } from "react/jsx-runtime";
 var FormGroupLevelsManagerContext = /*#__PURE__*/React3.createContext({
   levelsLength: 1,
   registerChild: () => {
@@ -479,7 +429,7 @@ var FormGroupWrapper = ({
     gap: "md",
     width: "100%"
   };
-  return /* @__PURE__ */jsxs7(Box3, {
+  return /* @__PURE__ */jsxs4(Box3, {
     "aria-level": level,
     ...boxProps,
     sx: {
@@ -498,7 +448,7 @@ var FormGroupWrapper = ({
         },
         children: title
       })
-    }), /* @__PURE__ */jsx10(Flex7, {
+    }), /* @__PURE__ */jsx10(Flex4, {
       sx: childrenContainerSx,
       children
     })]

package/dist/index.d.ts

@@ -5,7 +5,7 @@ export * from 'react-hook-form';
 import * as yup from 'yup';
 export { yup };
 import * as React from 'react';
-import { BoxProps, FlexProps, CheckboxProps, InputProps, LabelProps, InputPasswordProps, RadioProps, SelectProps, TextareaProps } from '@ttoss/ui';
+import { BoxProps, FlexProps, CheckboxProps, InputProps, InputPasswordProps, RadioProps, SelectProps, TextareaProps } from '@ttoss/ui';
 
 declare const Form: <TFieldValues extends FieldValues = FieldValues>({ children, onSubmit, sx, ...formMethods }: {
     children?: React.ReactNode;
@@ -15,14 +15,20 @@ declare const Form: <TFieldValues extends FieldValues = FieldValues>({ children,
     children: React.ReactNode | React.ReactNode[];
 } & react_hook_form.UseFormReturn<TFieldValues, any>) => JSX.Element;
 
-declare const FormField: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ label, id: idProp, name, defaultValue, sx, render, }: {
-    label?: string | undefined;
-    id?: string | undefined;
-    name: TName;
-    defaultValue?: FieldPathValue<TFieldValues, TName> | undefined;
+type FormFieldProps = {
     sx?: FlexProps['sx'];
+    disabled?: boolean;
+    tooltip?: boolean;
+    onTooltipClick?: () => void;
+};
+type FormFieldCompleteProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = {
+    label?: string;
+    id?: string;
+    name: TName;
+    defaultValue?: FieldPathValue<TFieldValues, TName>;
     render: (props: UseControllerReturn<TFieldValues, TName>) => React.ReactElement;
-}) => JSX.Element;
+} & 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>) => JSX.Element;
 
 declare const FormFieldCheckbox: <TFieldValues extends FieldValues = FieldValues>({ label, name, sx, ...checkboxProps }: {
     label?: string | undefined;
@@ -32,13 +38,13 @@ declare const FormFieldCheckbox: <TFieldValues extends FieldValues = FieldValues
 type FormFieldInputProps<TName> = {
     label?: string;
     name: TName;
-} & InputProps & Pick<LabelProps, 'tooltip' | 'onTooltipClick'>;
+} & InputProps & FormFieldProps;
 declare const FormFieldInput: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ label, name, tooltip, onTooltipClick, sx, ...inputProps }: FormFieldInputProps<TName>) => JSX.Element;
 
 type FormFieldPasswordProps<TName> = {
     label?: string;
     name: TName;
-} & InputPasswordProps & Pick<LabelProps, 'tooltip' | 'onTooltipClick'>;
+} & InputPasswordProps & FormFieldProps;
 declare const FormFieldPassword: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ label, name, tooltip, onTooltipClick, sx, ...inputProps }: FormFieldPasswordProps<TName>) => JSX.Element;
 
 type FormRadioOption$1 = {
@@ -60,11 +66,13 @@ type SelectSwitchProps = (SelectProps & {
 }) | (SelectProps & {
     defaultValue?: never;
 });
-declare const FormFieldSelect: <TFieldValues extends FieldValues = FieldValues>({ label, name, options, sx, ...selectProps }: {
-    label?: string | undefined;
+type FormFieldSelectProps<TFieldValues extends FieldValues, TName extends FieldPath<TFieldValues>> = SelectSwitchProps & FormFieldProps & {
+    label?: string;
     name: FieldPath<TFieldValues>;
     options: FormRadioOption[];
-} & SelectSwitchProps) => JSX.Element;
+    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>) => JSX.Element;
 
 declare const FormFieldTextarea: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ label, name, sx, ...textareaProps }: {
     label?: string | undefined;

package/dist/index.js

@@ -118,7 +118,8 @@ var FormField = ({
   name,
   defaultValue,
   sx,
-  render
+  render,
+  ...formFieldProps
 }) => {
   const controllerReturn = (0, import_react_hook_form3.useController)({
     name,
@@ -127,22 +128,27 @@ var FormField = ({
   const id = idProp || `form-field-${name}`;
   const memoizedRender = React2.useMemo(() => {
     return React2.Children.map(render(controllerReturn), child => {
-      return React2.createElement(child.type, {
-        id,
-        ...child.props
+      return /* @__PURE__ */(0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, {
+        children: [label && /* @__PURE__ */(0, import_jsx_runtime3.jsx)(import_ui3.Label, {
+          "aria-disabled": formFieldProps.disabled,
+          htmlFor: id,
+          tooltip: formFieldProps.tooltip,
+          onTooltipClick: formFieldProps.onTooltipClick,
+          children: label
+        }), React2.createElement(child.type, {
+          id,
+          ...child.props
+        })]
       });
     });
-  }, [controllerReturn, id, render]);
+  }, [controllerReturn, formFieldProps.disabled, formFieldProps.onTooltipClick, formFieldProps.tooltip, id, label, render]);
   return /* @__PURE__ */(0, import_jsx_runtime3.jsxs)(import_ui3.Flex, {
     sx: {
       flexDirection: "column",
       width: "100%",
       ...sx
     },
-    children: [label && /* @__PURE__ */(0, import_jsx_runtime3.jsx)(import_ui3.Label, {
-      htmlFor: id,
-      children: label
-    }), memoizedRender, /* @__PURE__ */(0, import_jsx_runtime3.jsx)(ErrorMessage, {
+    children: [memoizedRender, /* @__PURE__ */(0, import_jsx_runtime3.jsx)(ErrorMessage, {
       name
     })]
   });
@@ -205,7 +211,6 @@ var FormFieldCheckbox = ({
 };
 
 // src/FormFieldInput.tsx
-var import_react_hook_form5 = require("react-hook-form");
 var import_ui5 = require("@ttoss/ui");
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var FormFieldInput = ({
@@ -216,51 +221,28 @@ var FormFieldInput = ({
   sx,
   ...inputProps
 }) => {
-  const {
-    field: {
-      onChange,
-      onBlur,
-      value,
-      ref
-    },
-    formState: {
-      errors
-    }
-  } = (0, import_react_hook_form5.useController)({
+  return /* @__PURE__ */(0, import_jsx_runtime5.jsx)(FormField, {
     name,
-    defaultValue: ""
-  });
-  const id = `form-field-input-${name}`;
-  const hasError = !!errors[name]?.message;
-  return /* @__PURE__ */(0, import_jsx_runtime5.jsxs)(import_ui5.Flex, {
-    sx: {
-      flexDirection: "column",
-      width: "100%",
-      ...sx
-    },
-    children: [label && /* @__PURE__ */(0, import_jsx_runtime5.jsx)(import_ui5.Label, {
-      "aria-disabled": inputProps.disabled,
-      htmlFor: id,
-      tooltip,
-      onTooltipClick,
-      children: label
-    }), /* @__PURE__ */(0, import_jsx_runtime5.jsx)(import_ui5.Input, {
-      ref,
-      onChange,
-      className: hasError ? "error" : "",
-      onBlur,
-      value,
-      name,
-      id,
-      ...inputProps
-    }), /* @__PURE__ */(0, import_jsx_runtime5.jsx)(ErrorMessage, {
-      name
-    })]
+    label,
+    disabled: inputProps.disabled,
+    tooltip,
+    onTooltipClick,
+    sx,
+    render: ({
+      field,
+      formState
+    }) => {
+      const hasError = !!formState.errors[name]?.message;
+      return /* @__PURE__ */(0, import_jsx_runtime5.jsx)(import_ui5.Input, {
+        ...inputProps,
+        ...field,
+        "aria-invalid": hasError.valueOf()
+      });
+    }
   });
 };
 
 // src/FormFieldPassword.tsx
-var import_react_hook_form6 = require("react-hook-form");
 var import_ui6 = require("@ttoss/ui");
 var import_jsx_runtime6 = require("react/jsx-runtime");
 var FormFieldPassword = ({
@@ -271,52 +253,30 @@ var FormFieldPassword = ({
   sx,
   ...inputProps
 }) => {
-  const {
-    field: {
-      onChange,
-      onBlur,
-      value,
-      ref
-    },
-    formState: {
-      errors
-    }
-  } = (0, import_react_hook_form6.useController)({
+  return /* @__PURE__ */(0, import_jsx_runtime6.jsx)(FormField, {
     name,
-    defaultValue: ""
-  });
-  const id = `form-field-password-${name}`;
-  const hasError = !!errors[name]?.message;
-  return /* @__PURE__ */(0, import_jsx_runtime6.jsxs)(import_ui6.Flex, {
-    sx: {
-      flexDirection: "column",
-      width: "100%",
-      ...sx
-    },
-    children: [label && /* @__PURE__ */(0, import_jsx_runtime6.jsx)(import_ui6.Label, {
-      "aria-disabled": inputProps.disabled,
-      htmlFor: id,
-      tooltip,
-      onTooltipClick,
-      children: label
-    }), /* @__PURE__ */(0, import_jsx_runtime6.jsx)(import_ui6.InputPassword, {
-      ref,
-      onChange,
-      className: hasError ? "error" : "",
-      onBlur,
-      value,
-      name,
-      id,
-      ...inputProps
-    }), /* @__PURE__ */(0, import_jsx_runtime6.jsx)(ErrorMessage, {
-      name
-    })]
+    label,
+    disabled: inputProps.disabled,
+    tooltip,
+    onTooltipClick,
+    sx,
+    render: ({
+      field,
+      formState
+    }) => {
+      const hasError = !!formState.errors[name]?.message;
+      return /* @__PURE__ */(0, import_jsx_runtime6.jsx)(import_ui6.InputPassword, {
+        ...inputProps,
+        ...field,
+        "aria-invalid": hasError.valueOf()
+      });
+    }
   });
 };
 
 // src/FormFieldRadio.tsx
 var import_ui7 = require("@ttoss/ui");
-var import_react_hook_form7 = require("react-hook-form");
+var import_react_hook_form5 = require("react-hook-form");
 var import_jsx_runtime7 = require("react/jsx-runtime");
 var FormFieldRadio = ({
   label,
@@ -332,7 +292,7 @@ var FormFieldRadio = ({
       value,
       ref
     }
-  } = (0, import_react_hook_form7.useController)({
+  } = (0, import_react_hook_form5.useController)({
     name,
     defaultValue: ""
   });
@@ -368,23 +328,28 @@ var FormFieldRadio = ({
 };
 
 // src/FormFieldSelect.tsx
-var import_react_hook_form8 = require("react-hook-form");
 var import_ui8 = require("@ttoss/ui");
 var import_jsx_runtime8 = require("react/jsx-runtime");
 var checkDefaultValue = (options, defaultValue, placeholder) => {
+  if (defaultValue) {
+    return defaultValue;
+  }
   const hasEmptyValue = options.some(opt => {
     return opt.value === "" || opt.value === 0;
   });
-  if (placeholder && hasEmptyValue) return "";
+  const EMPTY_VALUE = "";
+  if (placeholder && hasEmptyValue) {
+    return EMPTY_VALUE;
+  }
   if (placeholder && !hasEmptyValue) {
     options.unshift({
       label: placeholder,
       value: ""
     });
-    return "";
+    return EMPTY_VALUE;
   }
-  if (!placeholder && defaultValue) return defaultValue;
-  if (options.length === 0) return "";
+  if (!placeholder && defaultValue) return EMPTY_VALUE;
+  if (options.length === 0) return EMPTY_VALUE;
   return options?.[0]?.value;
 };
 var FormFieldSelect = ({
@@ -399,47 +364,32 @@ var FormFieldSelect = ({
     placeholder
   } = selectProps;
   const checkedDefaultValue = checkDefaultValue(options, defaultValue, placeholder);
-  const {
-    field: {
-      onChange,
-      onBlur,
-      value,
-      ref
-    }
-  } = (0, import_react_hook_form8.useController)({
+  return /* @__PURE__ */(0, import_jsx_runtime8.jsx)(FormField, {
     name,
-    defaultValue: checkedDefaultValue
-  });
-  const id = `form-field-select-${name}`;
-  return /* @__PURE__ */(0, import_jsx_runtime8.jsxs)(import_ui8.Flex, {
-    sx: {
-      flexDirection: "column",
-      width: "100%",
-      ...sx
-    },
-    children: [label && /* @__PURE__ */(0, import_jsx_runtime8.jsx)(import_ui8.Label, {
-      htmlFor: id,
-      children: label
-    }), /* @__PURE__ */(0, import_jsx_runtime8.jsx)(import_ui8.Select, {
-      ref,
-      name,
-      onChange,
-      onBlur,
-      value,
-      id,
-      ...{
+    label,
+    disabled: selectProps.disabled,
+    tooltip: selectProps.tooltip,
+    onTooltipClick: selectProps.onTooltipClick,
+    sx,
+    defaultValue: checkedDefaultValue,
+    render: ({
+      field
+    }) => {
+      return /* @__PURE__ */(0, import_jsx_runtime8.jsx)(import_ui8.Select, {
         ...selectProps,
-        defaultValue: void 0
-      },
-      children: options.map(option => {
-        return /* @__PURE__ */(0, import_jsx_runtime8.jsx)("option", {
-          value: option.value,
-          children: option.label
-        }, option.label);
-      })
-    }), /* @__PURE__ */(0, import_jsx_runtime8.jsx)(ErrorMessage, {
-      name
-    })]
+        ...field,
+        ...{
+          ...selectProps,
+          defaultValue: void 0
+        },
+        children: options.map(option => {
+          return /* @__PURE__ */(0, import_jsx_runtime8.jsx)("option", {
+            value: option.value,
+            children: option.label
+          }, option.label);
+        })
+      });
+    }
   });
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/forms",
-  "version": "0.17.4",
+  "version": "0.17.6",
   "license": "UNLICENSED",
   "author": "ttoss",
   "contributors": [
@@ -22,7 +22,7 @@
   },
   "peerDependencies": {
     "react": ">=16.8.0",
-    "@ttoss/ui": "^1.36.4"
+    "@ttoss/ui": "^1.36.6"
   },
   "devDependencies": {
     "@types/jest": "^29.5.1",
@@ -35,7 +35,7 @@
     "yup": "^1.1.1",
     "@ttoss/config": "^1.30.0",
     "@ttoss/test-utils": "^1.23.0",
-    "@ttoss/ui": "^1.36.4"
+    "@ttoss/ui": "^1.36.6"
   },
   "publishConfig": {
     "access": "public"

package/src/FormField.tsx

@@ -9,6 +9,26 @@ import {
 } from 'react-hook-form';
 import { Flex, type FlexProps, Label } from '@ttoss/ui';
 
+export type FormFieldProps = {
+  sx?: FlexProps['sx'];
+  disabled?: boolean;
+  tooltip?: boolean;
+  onTooltipClick?: () => void;
+};
+
+type FormFieldCompleteProps<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+> = {
+  label?: string;
+  id?: string;
+  name: TName;
+  defaultValue?: FieldPathValue<TFieldValues, TName>;
+  render: (
+    props: UseControllerReturn<TFieldValues, TName>
+  ) => React.ReactElement;
+} & FormFieldProps;
+
 export const FormField = <
   TFieldValues extends FieldValues = FieldValues,
   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
@@ -19,16 +39,8 @@ export const FormField = <
   defaultValue,
   sx,
   render,
-}: {
-  label?: string;
-  id?: string;
-  name: TName;
-  defaultValue?: FieldPathValue<TFieldValues, TName>;
-  sx?: FlexProps['sx'];
-  render: (
-    props: UseControllerReturn<TFieldValues, TName>
-  ) => React.ReactElement;
-}) => {
+  ...formFieldProps
+}: FormFieldCompleteProps<TFieldValues, TName>) => {
   const controllerReturn = useController<TFieldValues, TName>({
     name,
     defaultValue,
@@ -38,13 +50,35 @@ export const FormField = <
 
   const memoizedRender = React.useMemo(() => {
     return React.Children.map(render(controllerReturn), (child) => {
-      return React.createElement(child.type, { id, ...child.props });
+      return (
+        <>
+          {label && (
+            <Label
+              aria-disabled={formFieldProps.disabled}
+              htmlFor={id}
+              tooltip={formFieldProps.tooltip}
+              onTooltipClick={formFieldProps.onTooltipClick}
+            >
+              {label}
+            </Label>
+          )}
+
+          {React.createElement(child.type, { id, ...child.props })}
+        </>
+      );
     });
-  }, [controllerReturn, id, render]);
+  }, [
+    controllerReturn,
+    formFieldProps.disabled,
+    formFieldProps.onTooltipClick,
+    formFieldProps.tooltip,
+    id,
+    label,
+    render,
+  ]);
 
   return (
     <Flex sx={{ flexDirection: 'column', width: '100%', ...sx }}>
-      {label && <Label htmlFor={id}>{label}</Label>}
       {memoizedRender}
       <ErrorMessage name={name} />
     </Flex>

package/src/FormFieldInput.tsx

@@ -1,18 +1,12 @@
-import { ErrorMessage } from './ErrorMessage';
-import { FieldPath, FieldValues, useController } from 'react-hook-form';
-import {
-  Flex,
-  Input,
-  type InputProps,
-  Label,
-  type LabelProps,
-} from '@ttoss/ui';
+import { FieldPath, FieldValues } from 'react-hook-form';
+import { FormField, type FormFieldProps } from './FormField';
+import { Input, type InputProps } from '@ttoss/ui';
 
 export type FormFieldInputProps<TName> = {
   label?: string;
   name: TName;
 } & InputProps &
-  Pick<LabelProps, 'tooltip' | 'onTooltipClick'>;
+  FormFieldProps;
 
 export const FormFieldInput = <
   TFieldValues extends FieldValues = FieldValues,
@@ -25,43 +19,21 @@ export const FormFieldInput = <
   sx,
   ...inputProps
 }: FormFieldInputProps<TName>) => {
-  const {
-    field: { onChange, onBlur, value, ref },
-    formState: { errors },
-  } = useController<any>({
-    name,
-    defaultValue: '',
-  });
-
-  const id = `form-field-input-${name}`;
-
-  const hasError = !!errors[name]?.message;
-
   return (
-    <Flex sx={{ flexDirection: 'column', width: '100%', ...sx }}>
-      {label && (
-        <Label
-          aria-disabled={inputProps.disabled}
-          htmlFor={id}
-          tooltip={tooltip}
-          onTooltipClick={onTooltipClick}
-        >
-          {label}
-        </Label>
-      )}
-
-      <Input
-        ref={ref}
-        onChange={onChange}
-        className={hasError ? 'error' : ''}
-        onBlur={onBlur}
-        value={value}
-        name={name}
-        id={id}
-        {...inputProps}
-      />
+    <FormField
+      name={name}
+      label={label}
+      disabled={inputProps.disabled}
+      tooltip={tooltip}
+      onTooltipClick={onTooltipClick}
+      sx={sx}
+      render={({ field, formState }) => {
+        const hasError = !!formState.errors[name]?.message;
 
-      <ErrorMessage name={name} />
-    </Flex>
+        return (
+          <Input {...inputProps} {...field} aria-invalid={hasError.valueOf()} />
+        );
+      }}
+    />
   );
 };

package/src/FormFieldPassword.tsx

@@ -1,18 +1,12 @@
-import { ErrorMessage } from './ErrorMessage';
-import { FieldPath, FieldValues, useController } from 'react-hook-form';
-import {
-  Flex,
-  InputPassword,
-  type InputPasswordProps,
-  Label,
-  type LabelProps,
-} from '@ttoss/ui';
+import { FieldPath, FieldValues } from 'react-hook-form';
+import { FormField, type FormFieldProps } from './FormField';
+import { InputPassword, type InputPasswordProps } from '@ttoss/ui';
 
 export type FormFieldPasswordProps<TName> = {
   label?: string;
   name: TName;
 } & InputPasswordProps &
-  Pick<LabelProps, 'tooltip' | 'onTooltipClick'>;
+  FormFieldProps;
 
 export const FormFieldPassword = <
   TFieldValues extends FieldValues = FieldValues,
@@ -25,43 +19,25 @@ export const FormFieldPassword = <
   sx,
   ...inputProps
 }: FormFieldPasswordProps<TName>) => {
-  const {
-    field: { onChange, onBlur, value, ref },
-    formState: { errors },
-  } = useController<any>({
-    name,
-    defaultValue: '',
-  });
-
-  const id = `form-field-password-${name}`;
-
-  const hasError = !!errors[name]?.message;
-
   return (
-    <Flex sx={{ flexDirection: 'column', width: '100%', ...sx }}>
-      {label && (
-        <Label
-          aria-disabled={inputProps.disabled}
-          htmlFor={id}
-          tooltip={tooltip}
-          onTooltipClick={onTooltipClick}
-        >
-          {label}
-        </Label>
-      )}
-
-      <InputPassword
-        ref={ref}
-        onChange={onChange}
-        className={hasError ? 'error' : ''}
-        onBlur={onBlur}
-        value={value}
-        name={name}
-        id={id}
-        {...inputProps}
-      />
+    <FormField
+      name={name}
+      label={label}
+      disabled={inputProps.disabled}
+      tooltip={tooltip}
+      onTooltipClick={onTooltipClick}
+      sx={sx}
+      render={({ field, formState }) => {
+        const hasError = !!formState.errors[name]?.message;
 
-      <ErrorMessage name={name} />
-    </Flex>
+        return (
+          <InputPassword
+            {...inputProps}
+            {...field}
+            aria-invalid={hasError.valueOf()}
+          />
+        );
+      }}
+    />
   );
 };

package/src/FormFieldSelect.tsx

@@ -1,6 +1,6 @@
-import { ErrorMessage } from './ErrorMessage';
-import { FieldPath, FieldValues, useController } from 'react-hook-form';
-import { Flex, Label, Select, type SelectProps } from '@ttoss/ui';
+import { FieldPath, FieldPathValue, FieldValues } from 'react-hook-form';
+import { FormField, FormFieldProps } from './FormField';
+import { Select, type SelectProps } from '@ttoss/ui';
 
 type FormRadioOption = {
   value: string | number;
@@ -11,79 +11,97 @@ type SelectSwitchProps =
   | (SelectProps & { placeholder?: never })
   | (SelectProps & { defaultValue?: never });
 
-const checkDefaultValue = (
+const checkDefaultValue = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+>(
   options: Array<FormRadioOption>,
-  defaultValue?: string | number | readonly string[],
+  defaultValue?: FieldPathValue<TFieldValues, TName>,
   placeholder?: string
-) => {
+): FieldPathValue<TFieldValues, TName> => {
+  if (defaultValue) {
+    return defaultValue;
+  }
+
   const hasEmptyValue = options.some((opt) => {
     return opt.value === '' || opt.value === 0;
   });
 
-  if (placeholder && hasEmptyValue) return '';
+  const EMPTY_VALUE = '' as FieldPathValue<TFieldValues, TName>;
+
+  if (placeholder && hasEmptyValue) {
+    return EMPTY_VALUE;
+  }
+
   if (placeholder && !hasEmptyValue) {
     options.unshift({
       label: placeholder,
       value: '',
     });
-    return '';
+    return EMPTY_VALUE;
   }
-  if (!placeholder && defaultValue) return defaultValue;
-  if (options.length === 0) return '';
-  return options?.[0]?.value;
+
+  if (!placeholder && defaultValue) return EMPTY_VALUE;
+  if (options.length === 0) return EMPTY_VALUE;
+
+  return options?.[0]?.value as FieldPathValue<TFieldValues, TName>;
 };
 
+type FormFieldSelectProps<
+  TFieldValues extends FieldValues,
+  TName extends FieldPath<TFieldValues>
+> = SelectSwitchProps &
+  FormFieldProps & {
+    label?: string;
+    name: FieldPath<TFieldValues>;
+    options: FormRadioOption[];
+    defaultValue?: FieldPathValue<TFieldValues, TName>;
+  };
+
 export const FormFieldSelect = <
-  TFieldValues extends FieldValues = FieldValues
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
 >({
   label,
   name,
   options,
   sx,
   ...selectProps
-}: {
-  label?: string;
-  name: FieldPath<TFieldValues>;
-  options: FormRadioOption[];
-} & SelectSwitchProps) => {
+}: FormFieldSelectProps<TFieldValues, TName>) => {
   const { defaultValue, placeholder } = selectProps;
 
-  const checkedDefaultValue = checkDefaultValue(
+  const checkedDefaultValue = checkDefaultValue<TFieldValues, TName>(
     options,
     defaultValue,
     placeholder
   );
 
-  const {
-    field: { onChange, onBlur, value, ref },
-  } = useController<any>({
-    name,
-    defaultValue: checkedDefaultValue,
-  });
-
-  const id = `form-field-select-${name}`;
-
   return (
-    <Flex sx={{ flexDirection: 'column', width: '100%', ...sx }}>
-      {label && <Label htmlFor={id}>{label}</Label>}
-      <Select
-        ref={ref}
-        name={name}
-        onChange={onChange}
-        onBlur={onBlur}
-        value={value}
-        id={id}
-        {...{ ...selectProps, defaultValue: undefined }}
-      >
-        {options.map((option) => {
-          return (
-            <option key={option.label} value={option.value}>
-              {option.label}
-            </option>
-          );
-        })}
-      </Select>
-      <ErrorMessage name={name} />
-    </Flex>
+    <FormField
+      name={name}
+      label={label}
+      disabled={selectProps.disabled}
+      tooltip={selectProps.tooltip}
+      onTooltipClick={selectProps.onTooltipClick}
+      sx={sx}
+      defaultValue={checkedDefaultValue}
+      render={({ field }) => {
+        return (
+          <Select
+            {...selectProps}
+            {...field}
+            {...{ ...selectProps, defaultValue: undefined }}
+          >
+            {options.map((option) => {
+              return (
+                <option key={option.label} value={option.value}>
+                  {option.label}
+                </option>
+              );
+            })}
+          </Select>
+        );
+      }}
+    />
   );
 };