@ttoss/forms 0.11.7 → 0.12.0

package/dist/esm/index.js

@@ -29,8 +29,9 @@ var Form = ({
   ) });
 };
 
-// src/FormFieldCheckbox.tsx
-import { Box as Box2, Checkbox, Flex, Label } from "@ttoss/ui";
+// src/FormField.tsx
+import * as React2 from "react";
+import { Box as Box2, Label } from "@ttoss/ui";
 
 // src/ErrorMessage.tsx
 import { useFormContext } from "react-hook-form";
@@ -53,60 +54,90 @@ var ErrorMessage = ({
   );
 };
 
-// src/FormFieldCheckbox.tsx
-import { useController } from "react-hook-form";
+// src/FormField.tsx
+import {
+  useController
+} from "react-hook-form";
 import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+var FormField = ({
+  label,
+  id: idProp,
+  name,
+  defaultValue,
+  render
+}) => {
+  const controllerReturn = useController({
+    name,
+    defaultValue
+  });
+  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 });
+    });
+  }, [controllerReturn, id, render]);
+  return /* @__PURE__ */ jsxs(Box2, { children: [
+    label && /* @__PURE__ */ jsx3(Label, { htmlFor: id, children: label }),
+    memoizedRender,
+    /* @__PURE__ */ jsx3(ErrorMessage, { name })
+  ] });
+};
+
+// src/FormFieldCheckbox.tsx
+import { Box as Box3, Checkbox, Flex, Label as Label2 } from "@ttoss/ui";
+import { useController as useController2 } from "react-hook-form";
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
 var FormFieldCheckbox = ({
   label,
   name,
-  disabled
+  ...checkboxProps
 }) => {
   const {
     field: { onChange, onBlur, value, ref }
-  } = useController({
+  } = useController2({
     name,
     defaultValue: false
   });
   const id = `form-field-checkbox-${name}`;
-  return /* @__PURE__ */ jsxs(Box2, { children: [
-    /* @__PURE__ */ jsxs(Flex, { sx: { alignItems: "center" }, children: [
-      /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsxs2(Box3, { children: [
+    /* @__PURE__ */ jsxs2(Flex, { sx: { alignItems: "center" }, children: [
+      /* @__PURE__ */ jsx4(
         Checkbox,
         {
           id,
           ref,
-          disabled,
           checked: value,
           onChange,
-          onBlur
+          onBlur,
+          name,
+          ...checkboxProps
         }
       ),
-      label && /* @__PURE__ */ jsx3(Label, { "aria-disabled": disabled, htmlFor: id, children: label })
+      label && /* @__PURE__ */ jsx4(Label2, { "aria-disabled": checkboxProps.disabled, htmlFor: id, children: label })
     ] }),
-    /* @__PURE__ */ jsx3(ErrorMessage, { name })
+    /* @__PURE__ */ jsx4(ErrorMessage, { name })
   ] });
 };
 
 // src/FormFieldInput.tsx
-import { Box as Box3, Input, Label as Label2 } from "@ttoss/ui";
-import { useController as useController2 } from "react-hook-form";
-import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Box as Box4, Input, Label as Label3 } from "@ttoss/ui";
+import { useController as useController3 } from "react-hook-form";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 var FormFieldInput = ({
   label,
   name,
-  disabled,
-  placeholder
+  ...inputProps
 }) => {
   const {
     field: { onChange, onBlur, value, ref }
-  } = useController2({
+  } = useController3({
     name,
     defaultValue: ""
   });
   const id = `form-field-input-${name}`;
-  return /* @__PURE__ */ jsxs2(Box3, { children: [
-    label && /* @__PURE__ */ jsx4(Label2, { "aria-disabled": disabled, htmlFor: id, children: label }),
-    /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsxs3(Box4, { children: [
+    label && /* @__PURE__ */ jsx5(Label3, { "aria-disabled": inputProps.disabled, htmlFor: id, children: label }),
+    /* @__PURE__ */ jsx5(
       Input,
       {
         ref,
@@ -114,36 +145,36 @@ var FormFieldInput = ({
         onBlur,
         value,
         name,
-        disabled,
-        placeholder,
-        id
+        id,
+        ...inputProps
       }
     ),
-    /* @__PURE__ */ jsx4(ErrorMessage, { name })
+    /* @__PURE__ */ jsx5(ErrorMessage, { name })
   ] });
 };
 
 // src/FormFieldRadio.tsx
-import { Box as Box4, Label as Label3, Radio } from "@ttoss/ui";
-import { useController as useController3 } from "react-hook-form";
-import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Box as Box5, Label as Label4, Radio } from "@ttoss/ui";
+import { useController as useController4 } from "react-hook-form";
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 var FormFieldRadio = ({
   label,
   name,
-  options
+  options,
+  ...radioProps
 }) => {
   const {
     field: { onChange, onBlur, value, ref }
-  } = useController3({
+  } = useController4({
     name,
     defaultValue: ""
   });
-  return /* @__PURE__ */ jsxs3(Box4, { children: [
-    label && /* @__PURE__ */ jsx5(Label3, { children: label }),
-    /* @__PURE__ */ jsx5(Box4, { children: options.map((option) => {
+  return /* @__PURE__ */ jsxs4(Box5, { children: [
+    label && /* @__PURE__ */ jsx6(Label4, { children: label }),
+    /* @__PURE__ */ jsx6(Box5, { children: options.map((option) => {
       const id = `form-field-radio-${name}-${option.value}`;
-      return /* @__PURE__ */ jsxs3(Label3, { htmlFor: id, children: [
-        /* @__PURE__ */ jsx5(
+      return /* @__PURE__ */ jsxs4(Label4, { htmlFor: id, children: [
+        /* @__PURE__ */ jsx6(
           Radio,
           {
             ref,
@@ -152,36 +183,37 @@ var FormFieldRadio = ({
             value: option.value,
             defaultChecked: value === option.value,
             name,
-            id
+            id,
+            ...radioProps
           }
         ),
         option.label
       ] }, id);
     }) }),
-    /* @__PURE__ */ jsx5(ErrorMessage, { name })
+    /* @__PURE__ */ jsx6(ErrorMessage, { name })
   ] });
 };
 
 // src/FormFieldSelect.tsx
-import { Box as Box5, Label as Label4, Select } from "@ttoss/ui";
-import { useController as useController4 } from "react-hook-form";
-import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Box as Box6, Label as Label5, Select } from "@ttoss/ui";
+import { useController as useController5 } from "react-hook-form";
+import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 var FormFieldSelect = ({
   label,
   name,
   options,
-  arrow
+  ...selectProps
 }) => {
   const {
     field: { onChange, onBlur, value, ref }
-  } = useController4({
+  } = useController5({
     name,
     defaultValue: ""
   });
   const id = `form-field-select-${name}`;
-  return /* @__PURE__ */ jsxs4(Box5, { children: [
-    label && /* @__PURE__ */ jsx6(Label4, { htmlFor: id, children: label }),
-    /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsxs5(Box6, { children: [
+    label && /* @__PURE__ */ jsx7(Label5, { htmlFor: id, children: label }),
+    /* @__PURE__ */ jsx7(
       Select,
       {
         ref,
@@ -189,25 +221,38 @@ var FormFieldSelect = ({
         onChange,
         onBlur,
         value,
-        arrow,
         id,
+        ...selectProps,
         children: options.map((option) => {
-          return /* @__PURE__ */ jsx6("option", { value: option.value, children: option.label }, option.label);
+          return /* @__PURE__ */ jsx7("option", { value: option.value, children: option.label }, option.label);
         })
       }
     ),
-    /* @__PURE__ */ jsx6(ErrorMessage, { name })
+    /* @__PURE__ */ jsx7(ErrorMessage, { name })
   ] });
 };
 
-// src/FormField.tsx
-var FormField = () => {
-  return null;
+// src/FormFieldTextarea.tsx
+import { Textarea } from "@ttoss/ui";
+import { jsx as jsx8 } from "react/jsx-runtime";
+var FormFieldTextarea = ({
+  label,
+  name,
+  ...textareaProps
+}) => {
+  const id = `form-field-textarea-${name}`;
+  return /* @__PURE__ */ jsx8(
+    FormField,
+    {
+      label,
+      name,
+      id,
+      render: ({ field }) => {
+        return /* @__PURE__ */ jsx8(Textarea, { ...field, ...textareaProps });
+      }
+    }
+  );
 };
-FormField.Input = FormFieldInput;
-FormField.Radio = FormFieldRadio;
-FormField.Select = FormFieldSelect;
-FormField.Checkbox = FormFieldCheckbox;
 export {
   Form,
   FormField,
@@ -215,6 +260,7 @@ export {
   FormFieldInput,
   FormFieldRadio,
   FormFieldSelect,
+  FormFieldTextarea,
   yup,
   yupResolver
 };

package/dist/index.d.ts

@@ -1,11 +1,11 @@
 export { yupResolver } from '@hookform/resolvers/yup';
 import * as react_hook_form from 'react-hook-form';
-import { FieldValues, Path } from 'react-hook-form';
+import { FieldValues, UseControllerReturn } from 'react-hook-form';
 export * from 'react-hook-form';
 import * as yup from 'yup';
 export { yup };
 import * as React from 'react';
-import { BoxProps, SelectProps } from '@ttoss/ui';
+import { BoxProps, CheckboxProps, InputProps, RadioProps, SelectProps, TextareaProps } from '@ttoss/ui';
 
 declare const Form: <TFieldValues extends FieldValues = FieldValues>({ children, onSubmit, sx, ...formMethods }: {
     children?: React.ReactNode;
@@ -15,75 +15,47 @@ declare const Form: <TFieldValues extends FieldValues = FieldValues>({ children,
     children: React.ReactNode | React.ReactNode[];
 } & react_hook_form.UseFormReturn<TFieldValues, any>) => JSX.Element;
 
-/**
- * DEPRECATED: Use `FormFieldInput` instead.
- */
-declare const FormField: {
-    (): null;
-    Input: <TFieldValues extends react_hook_form.FieldValues = react_hook_form.FieldValues>({ label, name, disabled, placeholder, }: {
-        label?: string | undefined;
-        name: react_hook_form.Path<TFieldValues>;
-        disabled?: boolean | undefined;
-        placeholder?: string | undefined;
-    }) => JSX.Element;
-    Radio: <TFieldValues_1 extends react_hook_form.FieldValues = react_hook_form.FieldValues>({ label, name, options, }: {
-        label?: string | undefined;
-        name: react_hook_form.Path<TFieldValues_1>;
-        options: {
-            value: string | number; /**
-             * DEPRECATED: Use `FormFieldInput` instead.
-             */
-            label: string;
-        }[];
-    }) => JSX.Element;
-    Select: <TFieldValues_2 extends react_hook_form.FieldValues = react_hook_form.FieldValues>({ label, name, options, arrow, }: {
-        label?: string | undefined;
-        name: react_hook_form.Path<TFieldValues_2>;
-        options: {
-            value: string | number;
-            label: string;
-        }[];
-        arrow?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
-    }) => JSX.Element;
-    Checkbox: <TFieldValues_3 extends react_hook_form.FieldValues = react_hook_form.FieldValues>({ label, name, disabled, }: {
-        label?: string | undefined;
-        name: react_hook_form.Path<TFieldValues_3>;
-        disabled?: boolean | undefined;
-    }) => JSX.Element;
-};
-
-declare const FormFieldCheckbox: <TFieldValues extends FieldValues = FieldValues>({ label, name, disabled, }: {
+declare const FormField: <TFieldValues extends FieldValues = FieldValues, TName extends react_hook_form.Path<react_hook_form.UnPackAsyncDefaultValues<TFieldValues>> = react_hook_form.Path<react_hook_form.UnPackAsyncDefaultValues<TFieldValues>>>({ label, id: idProp, name, defaultValue, render, }: {
     label?: string | undefined;
-    name: Path<TFieldValues>;
-    disabled?: boolean | undefined;
+    id?: string | undefined;
+    name: TName;
+    defaultValue?: react_hook_form.PathValue<react_hook_form.UnPackAsyncDefaultValues<TFieldValues>, TName> | undefined;
+    render: (props: UseControllerReturn<TFieldValues, TName>) => React.ReactElement;
 }) => JSX.Element;
 
-declare const FormFieldInput: <TFieldValues extends FieldValues = FieldValues>({ label, name, disabled, placeholder, }: {
+declare const FormFieldCheckbox: <TFieldValues extends FieldValues = FieldValues>({ label, name, ...checkboxProps }: {
     label?: string | undefined;
-    name: Path<TFieldValues>;
-    disabled?: boolean | undefined;
-    placeholder?: string | undefined;
-}) => JSX.Element;
+    name: react_hook_form.Path<react_hook_form.UnPackAsyncDefaultValues<TFieldValues>>;
+} & CheckboxProps) => JSX.Element;
+
+declare const FormFieldInput: <TFieldValues extends FieldValues = FieldValues, TName extends react_hook_form.Path<react_hook_form.UnPackAsyncDefaultValues<TFieldValues>> = react_hook_form.Path<react_hook_form.UnPackAsyncDefaultValues<TFieldValues>>>({ label, name, ...inputProps }: {
+    label?: string | undefined;
+    name: TName;
+} & InputProps) => JSX.Element;
 
 type FormRadioOption$1 = {
     value: string | number;
     label: string;
 };
-declare const FormFieldRadio: <TFieldValues extends FieldValues = FieldValues>({ label, name, options, }: {
+declare const FormFieldRadio: <TFieldValues extends FieldValues = FieldValues>({ label, name, options, ...radioProps }: {
     label?: string | undefined;
-    name: Path<TFieldValues>;
+    name: react_hook_form.Path<react_hook_form.UnPackAsyncDefaultValues<TFieldValues>>;
     options: FormRadioOption$1[];
-}) => JSX.Element;
+} & RadioProps) => JSX.Element;
 
 type FormRadioOption = {
     value: string | number;
     label: string;
 };
-declare const FormFieldSelect: <TFieldValues extends FieldValues = FieldValues>({ label, name, options, arrow, }: {
+declare const FormFieldSelect: <TFieldValues extends FieldValues = FieldValues>({ label, name, options, ...selectProps }: {
     label?: string | undefined;
-    name: Path<TFieldValues>;
+    name: react_hook_form.Path<react_hook_form.UnPackAsyncDefaultValues<TFieldValues>>;
     options: FormRadioOption[];
-    arrow?: SelectProps['arrow'];
-}) => JSX.Element;
+} & SelectProps) => JSX.Element;
+
+declare const FormFieldTextarea: <TFieldValues extends FieldValues = FieldValues, TName extends react_hook_form.Path<react_hook_form.UnPackAsyncDefaultValues<TFieldValues>> = react_hook_form.Path<react_hook_form.UnPackAsyncDefaultValues<TFieldValues>>>({ label, name, ...textareaProps }: {
+    label?: string | undefined;
+    name: TName;
+} & TextareaProps) => JSX.Element;
 
-export { Form, FormField, FormFieldCheckbox, FormFieldInput, FormFieldRadio, FormFieldSelect };
+export { Form, FormField, FormFieldCheckbox, FormFieldInput, FormFieldRadio, FormFieldSelect, FormFieldTextarea };

package/dist/index.js

@@ -34,6 +34,7 @@ __export(src_exports, {
   FormFieldInput: () => FormFieldInput,
   FormFieldRadio: () => FormFieldRadio,
   FormFieldSelect: () => FormFieldSelect,
+  FormFieldTextarea: () => FormFieldTextarea,
   yup: () => yup,
   yupResolver: () => import_yup.yupResolver
 });
@@ -66,7 +67,8 @@ var Form = ({
   ) });
 };
 
-// src/FormFieldCheckbox.tsx
+// src/FormField.tsx
+var React2 = __toESM(require("react"));
 var import_ui3 = require("@ttoss/ui");
 
 // src/ErrorMessage.tsx
@@ -90,98 +92,126 @@ var ErrorMessage = ({
   );
 };
 
-// src/FormFieldCheckbox.tsx
+// src/FormField.tsx
 var import_react_hook_form3 = require("react-hook-form");
 var import_jsx_runtime3 = require("react/jsx-runtime");
+var FormField = ({
+  label,
+  id: idProp,
+  name,
+  defaultValue,
+  render
+}) => {
+  const controllerReturn = (0, import_react_hook_form3.useController)({
+    name,
+    defaultValue
+  });
+  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 });
+    });
+  }, [controllerReturn, id, render]);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_ui3.Box, { children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_ui3.Label, { htmlFor: id, children: label }),
+    memoizedRender,
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ErrorMessage, { name })
+  ] });
+};
+
+// src/FormFieldCheckbox.tsx
+var import_ui4 = require("@ttoss/ui");
+var import_react_hook_form4 = require("react-hook-form");
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var FormFieldCheckbox = ({
   label,
   name,
-  disabled
+  ...checkboxProps
 }) => {
   const {
     field: { onChange, onBlur, value, ref }
-  } = (0, import_react_hook_form3.useController)({
+  } = (0, import_react_hook_form4.useController)({
     name,
     defaultValue: false
   });
   const id = `form-field-checkbox-${name}`;
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_ui3.Box, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_ui3.Flex, { sx: { alignItems: "center" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
-        import_ui3.Checkbox,
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_ui4.Box, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_ui4.Flex, { sx: { alignItems: "center" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        import_ui4.Checkbox,
         {
           id,
           ref,
-          disabled,
           checked: value,
           onChange,
-          onBlur
+          onBlur,
+          name,
+          ...checkboxProps
         }
       ),
-      label && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_ui3.Label, { "aria-disabled": disabled, htmlFor: id, children: label })
+      label && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_ui4.Label, { "aria-disabled": checkboxProps.disabled, htmlFor: id, children: label })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ErrorMessage, { name })
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ErrorMessage, { name })
   ] });
 };
 
 // src/FormFieldInput.tsx
-var import_ui4 = require("@ttoss/ui");
-var import_react_hook_form4 = require("react-hook-form");
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_ui5 = require("@ttoss/ui");
+var import_react_hook_form5 = require("react-hook-form");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var FormFieldInput = ({
   label,
   name,
-  disabled,
-  placeholder
+  ...inputProps
 }) => {
   const {
     field: { onChange, onBlur, value, ref }
-  } = (0, import_react_hook_form4.useController)({
+  } = (0, import_react_hook_form5.useController)({
     name,
     defaultValue: ""
   });
   const id = `form-field-input-${name}`;
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_ui4.Box, { children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_ui4.Label, { "aria-disabled": disabled, htmlFor: id, children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-      import_ui4.Input,
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_ui5.Box, { children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_ui5.Label, { "aria-disabled": inputProps.disabled, htmlFor: id, children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      import_ui5.Input,
       {
         ref,
         onChange,
         onBlur,
         value,
         name,
-        disabled,
-        placeholder,
-        id
+        id,
+        ...inputProps
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ErrorMessage, { name })
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ErrorMessage, { name })
   ] });
 };
 
 // src/FormFieldRadio.tsx
-var import_ui5 = require("@ttoss/ui");
-var import_react_hook_form5 = require("react-hook-form");
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_ui6 = require("@ttoss/ui");
+var import_react_hook_form6 = require("react-hook-form");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var FormFieldRadio = ({
   label,
   name,
-  options
+  options,
+  ...radioProps
 }) => {
   const {
     field: { onChange, onBlur, value, ref }
-  } = (0, import_react_hook_form5.useController)({
+  } = (0, import_react_hook_form6.useController)({
     name,
     defaultValue: ""
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_ui5.Box, { children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_ui5.Label, { children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_ui5.Box, { children: options.map((option) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_ui6.Box, { children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_ui6.Label, { children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_ui6.Box, { children: options.map((option) => {
       const id = `form-field-radio-${name}-${option.value}`;
-      return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_ui5.Label, { htmlFor: id, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-          import_ui5.Radio,
+      return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_ui6.Label, { htmlFor: id, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          import_ui6.Radio,
           {
             ref,
             onChange,
@@ -189,62 +219,76 @@ var FormFieldRadio = ({
             value: option.value,
             defaultChecked: value === option.value,
             name,
-            id
+            id,
+            ...radioProps
           }
         ),
         option.label
       ] }, id);
     }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ErrorMessage, { name })
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ErrorMessage, { name })
   ] });
 };
 
 // src/FormFieldSelect.tsx
-var import_ui6 = require("@ttoss/ui");
-var import_react_hook_form6 = require("react-hook-form");
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_ui7 = require("@ttoss/ui");
+var import_react_hook_form7 = require("react-hook-form");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var FormFieldSelect = ({
   label,
   name,
   options,
-  arrow
+  ...selectProps
 }) => {
   const {
     field: { onChange, onBlur, value, ref }
-  } = (0, import_react_hook_form6.useController)({
+  } = (0, import_react_hook_form7.useController)({
     name,
     defaultValue: ""
   });
   const id = `form-field-select-${name}`;
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_ui6.Box, { children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_ui6.Label, { htmlFor: id, children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-      import_ui6.Select,
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_ui7.Box, { children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_ui7.Label, { htmlFor: id, children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      import_ui7.Select,
       {
         ref,
         name,
         onChange,
         onBlur,
         value,
-        arrow,
         id,
+        ...selectProps,
         children: options.map((option) => {
-          return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("option", { value: option.value, children: option.label }, option.label);
+          return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("option", { value: option.value, children: option.label }, option.label);
         })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ErrorMessage, { name })
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ErrorMessage, { name })
   ] });
 };
 
-// src/FormField.tsx
-var FormField = () => {
-  return null;
+// src/FormFieldTextarea.tsx
+var import_ui8 = require("@ttoss/ui");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var FormFieldTextarea = ({
+  label,
+  name,
+  ...textareaProps
+}) => {
+  const id = `form-field-textarea-${name}`;
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    FormField,
+    {
+      label,
+      name,
+      id,
+      render: ({ field }) => {
+        return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_ui8.Textarea, { ...field, ...textareaProps });
+      }
+    }
+  );
 };
-FormField.Input = FormFieldInput;
-FormField.Radio = FormFieldRadio;
-FormField.Select = FormFieldSelect;
-FormField.Checkbox = FormFieldCheckbox;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Form,
@@ -253,6 +297,7 @@ FormField.Checkbox = FormFieldCheckbox;
   FormFieldInput,
   FormFieldRadio,
   FormFieldSelect,
+  FormFieldTextarea,
   yup,
   yupResolver
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/forms",
-  "version": "0.11.7",
+  "version": "0.12.0",
   "license": "UNLICENSED",
   "author": "ttoss",
   "contributors": [
@@ -21,25 +21,25 @@
   "dependencies": {
     "@hookform/error-message": "^2.0.1",
     "@hookform/resolvers": "^2.9.10",
-    "react-hook-form": "^7.39.7",
+    "react-hook-form": "^7.41.2",
     "yup": "^0.32.11"
   },
   "peerDependencies": {
-    "@ttoss/ui": "^1.23.0",
+    "@ttoss/ui": "^1.27.3",
     "react": "^18.2.0"
   },
   "devDependencies": {
     "@ttoss/config": "^1.26.0",
-    "@ttoss/test-utils": "^1.19.0",
-    "@ttoss/ui": "^1.27.3",
+    "@ttoss/test-utils": "^1.20.0",
+    "@ttoss/ui": "^1.28.0",
     "@types/jest": "^29.2.4",
     "jest": "^29.3.1",
     "react": "^18.2.0",
-    "react-hook-form": "^7.39.7",
+    "react-hook-form": "^7.41.2",
     "yup": "^0.32.11"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "98cf227311c2f28ab73520c793bfe0bf0df27530"
+  "gitHead": "4b7a4d3035f4b4d43b02069df62fcc9ca57c2bc6"
 }

package/src/FormField.tsx

@@ -1,19 +1,50 @@
-import { FormFieldCheckbox } from './FormFieldCheckbox';
-import { FormFieldInput } from './FormFieldInput';
-import { FormFieldRadio } from './FormFieldRadio';
-import { FormFieldSelect } from './FormFieldSelect';
+import * as React from 'react';
+import { Box, Label } from '@ttoss/ui';
+import { ErrorMessage } from './ErrorMessage';
+import {
+  FieldPath,
+  FieldPathValue,
+  FieldValues,
+  UseControllerReturn,
+  useController,
+} from 'react-hook-form';
 
-/**
- * DEPRECATED: Use `FormFieldInput` instead.
- */
-const FormField = () => {
-  // to be implemented
-  return null;
-};
+export const FormField = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+>({
+  label,
+  id: idProp,
+  name,
+  defaultValue,
+  render,
+}: {
+  label?: string;
+  id?: string;
+  name: TName;
+  defaultValue?: FieldPathValue<TFieldValues, TName>;
+  render: (
+    props: UseControllerReturn<TFieldValues, TName>
+  ) => React.ReactElement;
+}) => {
+  const controllerReturn = useController<TFieldValues, TName>({
+    name,
+    defaultValue,
+  });
+
+  const id = idProp || `form-field-${name}`;
 
-FormField.Input = FormFieldInput;
-FormField.Radio = FormFieldRadio;
-FormField.Select = FormFieldSelect;
-FormField.Checkbox = FormFieldCheckbox;
+  const memoizedRender = React.useMemo(() => {
+    return React.Children.map(render(controllerReturn), (child) => {
+      return React.createElement(child.type, { id, ...child.props });
+    });
+  }, [controllerReturn, id, render]);
 
-export { FormField };
+  return (
+    <Box>
+      {label && <Label htmlFor={id}>{label}</Label>}
+      {memoizedRender}
+      <ErrorMessage name={name} />
+    </Box>
+  );
+};

package/src/FormFieldCheckbox.tsx

@@ -1,18 +1,17 @@
-import { Box, Checkbox, Flex, Label } from '@ttoss/ui';
+import { Box, Checkbox, type CheckboxProps, Flex, Label } from '@ttoss/ui';
 import { ErrorMessage } from './ErrorMessage';
-import { FieldValues, Path, useController } from 'react-hook-form';
+import { FieldPath, FieldValues, useController } from 'react-hook-form';
 
 export const FormFieldCheckbox = <
   TFieldValues extends FieldValues = FieldValues
 >({
   label,
   name,
-  disabled,
+  ...checkboxProps
 }: {
   label?: string;
-  name: Path<TFieldValues>;
-  disabled?: boolean;
-}) => {
+  name: FieldPath<TFieldValues>;
+} & CheckboxProps) => {
   const {
     field: { onChange, onBlur, value, ref },
   } = useController<any>({
@@ -28,13 +27,14 @@ export const FormFieldCheckbox = <
         <Checkbox
           id={id}
           ref={ref}
-          disabled={disabled}
           checked={value}
           onChange={onChange}
           onBlur={onBlur}
+          name={name}
+          {...checkboxProps}
         />
         {label && (
-          <Label aria-disabled={disabled} htmlFor={id}>
+          <Label aria-disabled={checkboxProps.disabled} htmlFor={id}>
             {label}
           </Label>
         )}

package/src/FormFieldInput.tsx

@@ -1,18 +1,18 @@
-import { Box, Input, Label } from '@ttoss/ui';
+import { Box, Input, type InputProps, Label } from '@ttoss/ui';
 import { ErrorMessage } from './ErrorMessage';
-import { FieldValues, Path, useController } from 'react-hook-form';
+import { FieldPath, FieldValues, useController } from 'react-hook-form';
 
-export const FormFieldInput = <TFieldValues extends FieldValues = FieldValues>({
+export const FormFieldInput = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+>({
   label,
   name,
-  disabled,
-  placeholder,
+  ...inputProps
 }: {
   label?: string;
-  name: Path<TFieldValues>;
-  disabled?: boolean;
-  placeholder?: string;
-}) => {
+  name: TName;
+} & InputProps) => {
   const {
     field: { onChange, onBlur, value, ref },
   } = useController<any>({
@@ -25,7 +25,7 @@ export const FormFieldInput = <TFieldValues extends FieldValues = FieldValues>({
   return (
     <Box>
       {label && (
-        <Label aria-disabled={disabled} htmlFor={id}>
+        <Label aria-disabled={inputProps.disabled} htmlFor={id}>
           {label}
         </Label>
       )}
@@ -35,9 +35,8 @@ export const FormFieldInput = <TFieldValues extends FieldValues = FieldValues>({
         onBlur={onBlur}
         value={value}
         name={name}
-        disabled={disabled}
-        placeholder={placeholder}
         id={id}
+        {...inputProps}
       />
       <ErrorMessage name={name} />
     </Box>

package/src/FormFieldRadio.tsx

@@ -1,6 +1,6 @@
-import { Box, Label, Radio } from '@ttoss/ui';
+import { Box, Label, Radio, type RadioProps } from '@ttoss/ui';
 import { ErrorMessage } from './ErrorMessage';
-import { FieldValues, Path, useController } from 'react-hook-form';
+import { FieldPath, FieldValues, useController } from 'react-hook-form';
 
 type FormRadioOption = {
   value: string | number;
@@ -11,11 +11,12 @@ export const FormFieldRadio = <TFieldValues extends FieldValues = FieldValues>({
   label,
   name,
   options,
+  ...radioProps
 }: {
   label?: string;
-  name: Path<TFieldValues>;
+  name: FieldPath<TFieldValues>;
   options: FormRadioOption[];
-}) => {
+} & RadioProps) => {
   const {
     field: { onChange, onBlur, value, ref },
   } = useController<any>({
@@ -40,6 +41,7 @@ export const FormFieldRadio = <TFieldValues extends FieldValues = FieldValues>({
                 defaultChecked={value === option.value}
                 name={name}
                 id={id}
+                {...radioProps}
               />
               {option.label}
             </Label>

package/src/FormFieldSelect.tsx

@@ -1,6 +1,6 @@
 import { Box, Label, Select, type SelectProps } from '@ttoss/ui';
 import { ErrorMessage } from './ErrorMessage';
-import { FieldValues, Path, useController } from 'react-hook-form';
+import { FieldPath, FieldValues, useController } from 'react-hook-form';
 
 type FormRadioOption = {
   value: string | number;
@@ -13,13 +13,12 @@ export const FormFieldSelect = <
   label,
   name,
   options,
-  arrow,
+  ...selectProps
 }: {
   label?: string;
-  name: Path<TFieldValues>;
+  name: FieldPath<TFieldValues>;
   options: FormRadioOption[];
-  arrow?: SelectProps['arrow'];
-}) => {
+} & SelectProps) => {
   const {
     field: { onChange, onBlur, value, ref },
   } = useController<any>({
@@ -38,8 +37,8 @@ export const FormFieldSelect = <
         onChange={onChange}
         onBlur={onBlur}
         value={value}
-        arrow={arrow}
         id={id}
+        {...selectProps}
       >
         {options.map((option) => {
           return (

package/src/FormFieldTextarea.tsx

@@ -0,0 +1,28 @@
+import { FieldPath, FieldValues } from 'react-hook-form';
+import { FormField } from './FormField';
+import { Textarea, type TextareaProps } from '@ttoss/ui';
+
+export const FormFieldTextarea = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+>({
+  label,
+  name,
+  ...textareaProps
+}: {
+  label?: string;
+  name: TName;
+} & TextareaProps) => {
+  const id = `form-field-textarea-${name}`;
+
+  return (
+    <FormField
+      label={label}
+      name={name}
+      id={id}
+      render={({ field }) => {
+        return <Textarea {...field} {...textareaProps} />;
+      }}
+    />
+  );
+};

package/src/index.ts

@@ -8,3 +8,4 @@ export { FormFieldCheckbox } from './FormFieldCheckbox';
 export { FormFieldInput } from './FormFieldInput';
 export { FormFieldRadio } from './FormFieldRadio';
 export { FormFieldSelect } from './FormFieldSelect';
+export { FormFieldTextarea } from './FormFieldTextarea';