@ttoss/forms 0.17.1 → 0.17.2

package/dist/esm/index.js

@@ -207,16 +207,17 @@ var FormFieldInput = ({
   });
 };
 
-// src/FormFieldRadio.tsx
-import { Box as Box2, Flex as Flex4, Label as Label4, Radio } from "@ttoss/ui";
+// 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";
-var FormFieldRadio = ({
+var FormFieldPassword = ({
   label,
   name,
-  options,
+  tooltip,
+  onTooltipClick,
   sx,
-  ...radioProps
+  ...inputProps
 }) => {
   const {
     field: {
@@ -224,11 +225,16 @@ var FormFieldRadio = ({
       onBlur,
       value,
       ref
+    },
+    formState: {
+      errors
     }
   } = useController4({
     name,
     defaultValue: ""
   });
+  const id = `form-field-password-${name}`;
+  const hasError = !!errors[name]?.message;
   return /* @__PURE__ */jsxs4(Flex4, {
     sx: {
       flexDirection: "column",
@@ -236,13 +242,62 @@ var FormFieldRadio = ({
       ...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
+    })]
+  });
+};
+
+// 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";
+var FormFieldRadio = ({
+  label,
+  name,
+  options,
+  sx,
+  ...radioProps
+}) => {
+  const {
+    field: {
+      onChange,
+      onBlur,
+      value,
+      ref
+    }
+  } = useController5({
+    name,
+    defaultValue: ""
+  });
+  return /* @__PURE__ */jsxs5(Flex5, {
+    sx: {
+      flexDirection: "column",
+      width: "100%",
+      ...sx
+    },
+    children: [label && /* @__PURE__ */jsx7(Label5, {
       children: label
-    }), /* @__PURE__ */jsx6(Box2, {
+    }), /* @__PURE__ */jsx7(Box2, {
       children: options.map(option => {
         const id = `form-field-radio-${name}-${option.value}`;
-        return /* @__PURE__ */jsxs4(Label4, {
+        return /* @__PURE__ */jsxs5(Label5, {
           htmlFor: id,
-          children: [/* @__PURE__ */jsx6(Radio, {
+          children: [/* @__PURE__ */jsx7(Radio, {
             ref,
             onChange,
             onBlur,
@@ -254,16 +309,16 @@ var FormFieldRadio = ({
           }), option.label]
         }, id);
       })
-    }), /* @__PURE__ */jsx6(ErrorMessage, {
+    }), /* @__PURE__ */jsx7(ErrorMessage, {
       name
     })]
   });
 };
 
 // src/FormFieldSelect.tsx
-import { useController as useController5 } from "react-hook-form";
-import { Flex as Flex5, Label as Label5, Select } from "@ttoss/ui";
-import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+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";
 var checkDefaultValue = (options, defaultValue, placeholder) => {
   const hasEmptyValue = options.some(opt => {
     return opt.value === "" || opt.value === 0;
@@ -299,21 +354,21 @@ var FormFieldSelect = ({
       value,
       ref
     }
-  } = useController5({
+  } = useController6({
     name,
     defaultValue: checkedDefaultValue
   });
   const id = `form-field-select-${name}`;
-  return /* @__PURE__ */jsxs5(Flex5, {
+  return /* @__PURE__ */jsxs6(Flex6, {
     sx: {
       flexDirection: "column",
       width: "100%",
       ...sx
     },
-    children: [label && /* @__PURE__ */jsx7(Label5, {
+    children: [label && /* @__PURE__ */jsx8(Label6, {
       htmlFor: id,
       children: label
-    }), /* @__PURE__ */jsx7(Select, {
+    }), /* @__PURE__ */jsx8(Select, {
       ref,
       name,
       onChange,
@@ -325,12 +380,12 @@ var FormFieldSelect = ({
         defaultValue: void 0
       },
       children: options.map(option => {
-        return /* @__PURE__ */jsx7("option", {
+        return /* @__PURE__ */jsx8("option", {
           value: option.value,
           children: option.label
         }, option.label);
       })
-    }), /* @__PURE__ */jsx7(ErrorMessage, {
+    }), /* @__PURE__ */jsx8(ErrorMessage, {
       name
     })]
   });
@@ -338,7 +393,7 @@ var FormFieldSelect = ({
 
 // src/FormFieldTextarea.tsx
 import { Textarea } from "@ttoss/ui";
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx as jsx9 } from "react/jsx-runtime";
 var FormFieldTextarea = ({
   label,
   name,
@@ -346,7 +401,7 @@ var FormFieldTextarea = ({
   ...textareaProps
 }) => {
   const id = `form-field-textarea-${name}`;
-  return /* @__PURE__ */jsx8(FormField, {
+  return /* @__PURE__ */jsx9(FormField, {
     label,
     name,
     id,
@@ -354,7 +409,7 @@ var FormFieldTextarea = ({
     render: ({
       field
     }) => {
-      return /* @__PURE__ */jsx8(Textarea, {
+      return /* @__PURE__ */jsx9(Textarea, {
         ...field,
         ...textareaProps
       });
@@ -364,8 +419,8 @@ var FormFieldTextarea = ({
 
 // src/FormGroup.tsx
 import * as React3 from "react";
-import { Box as Box3, Flex as Flex6, Text } from "@ttoss/ui";
-import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Box as Box3, Flex as Flex7, Text } from "@ttoss/ui";
+import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
 var FormGroupLevelsManagerContext = /*#__PURE__*/React3.createContext({
   levelsLength: 1,
   registerChild: () => {
@@ -381,7 +436,7 @@ var FormGroupLevelsManager = ({
       setLevelsLength(level + 1);
     }
   }, [levelsLength]);
-  return /* @__PURE__ */jsx9(FormGroupLevelsManagerContext.Provider, {
+  return /* @__PURE__ */jsx10(FormGroupLevelsManagerContext.Provider, {
     value: {
       levelsLength,
       registerChild
@@ -424,7 +479,7 @@ var FormGroupWrapper = ({
     gap: "md",
     width: "100%"
   };
-  return /* @__PURE__ */jsxs6(Box3, {
+  return /* @__PURE__ */jsxs7(Box3, {
     "aria-level": level,
     ...boxProps,
     sx: {
@@ -432,18 +487,18 @@ var FormGroupWrapper = ({
       marginBottom: "lg",
       ...boxProps.sx
     },
-    children: [title && /* @__PURE__ */jsx9(Box3, {
+    children: [title && /* @__PURE__ */jsx10(Box3, {
       sx: {
         marginBottom: "md"
       },
-      children: /* @__PURE__ */jsx9(Text, {
+      children: /* @__PURE__ */jsx10(Text, {
         sx: {
           fontSize: "2xl",
           fontWeight: "bold"
         },
         children: title
       })
-    }), /* @__PURE__ */jsx9(Flex6, {
+    }), /* @__PURE__ */jsx10(Flex7, {
       sx: childrenContainerSx,
       children
     })]
@@ -454,17 +509,17 @@ var FormGroup = props => {
     level
   } = useFormGroup();
   const currentLevel = level === void 0 ? 0 : level + 1;
-  return /* @__PURE__ */jsx9(FormGroupContext.Provider, {
+  return /* @__PURE__ */jsx10(FormGroupContext.Provider, {
     value: {
       parentLevel: currentLevel
     },
-    children: currentLevel === 0 ? /* @__PURE__ */jsx9(FormGroupLevelsManager, {
-      children: /* @__PURE__ */jsx9(FormGroupWrapper, {
+    children: currentLevel === 0 ? /* @__PURE__ */jsx10(FormGroupLevelsManager, {
+      children: /* @__PURE__ */jsx10(FormGroupWrapper, {
         ...props
       })
-    }) : /* @__PURE__ */jsx9(FormGroupWrapper, {
+    }) : /* @__PURE__ */jsx10(FormGroupWrapper, {
       ...props
     })
   });
 };
-export { Form, FormField, FormFieldCheckbox, FormFieldInput, FormFieldRadio, FormFieldSelect, FormFieldTextarea, FormGroup, useFormGroup, yup, yupResolver };
+export { Form, FormField, FormFieldCheckbox, FormFieldInput, FormFieldPassword, FormFieldRadio, FormFieldSelect, FormFieldTextarea, FormGroup, useFormGroup, yup, yupResolver };

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, RadioProps, SelectProps, TextareaProps } from '@ttoss/ui';
+import { BoxProps, FlexProps, CheckboxProps, InputProps, LabelProps, InputPasswordProps, RadioProps, SelectProps, TextareaProps } from '@ttoss/ui';
 
 declare const Form: <TFieldValues extends FieldValues = FieldValues>({ children, onSubmit, sx, ...formMethods }: {
     children?: React.ReactNode;
@@ -29,10 +29,17 @@ declare const FormFieldCheckbox: <TFieldValues extends FieldValues = FieldValues
     name: FieldPath<TFieldValues>;
 } & CheckboxProps) => JSX.Element;
 
-declare const FormFieldInput: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ label, name, tooltip, onTooltipClick, sx, ...inputProps }: {
-    label?: string | undefined;
+type FormFieldInputProps<TName> = {
+    label?: string;
+    name: TName;
+} & InputProps & Pick<LabelProps, 'tooltip' | 'onTooltipClick'>;
+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;
-} & InputProps & Pick<LabelProps, "tooltip" | "onTooltipClick">) => JSX.Element;
+} & InputPasswordProps & Pick<LabelProps, 'tooltip' | 'onTooltipClick'>;
+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 = {
     value: string | number;
@@ -74,4 +81,4 @@ type FormGroupProps = {
 } & BoxProps;
 declare const FormGroup: (props: FormGroupProps) => JSX.Element;
 
-export { Form, FormField, FormFieldCheckbox, FormFieldInput, FormFieldRadio, FormFieldSelect, FormFieldTextarea, FormGroup, useFormGroup };
+export { Form, FormField, FormFieldCheckbox, FormFieldInput, FormFieldPassword, FormFieldRadio, FormFieldSelect, FormFieldTextarea, FormGroup, useFormGroup };

package/dist/index.js

@@ -43,6 +43,7 @@ __export(src_exports, {
   FormField: () => FormField,
   FormFieldCheckbox: () => FormFieldCheckbox,
   FormFieldInput: () => FormFieldInput,
+  FormFieldPassword: () => FormFieldPassword,
   FormFieldRadio: () => FormFieldRadio,
   FormFieldSelect: () => FormFieldSelect,
   FormFieldTextarea: () => FormFieldTextarea,
@@ -258,16 +259,17 @@ var FormFieldInput = ({
   });
 };
 
-// src/FormFieldRadio.tsx
-var import_ui6 = require("@ttoss/ui");
+// 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 FormFieldRadio = ({
+var FormFieldPassword = ({
   label,
   name,
-  options,
+  tooltip,
+  onTooltipClick,
   sx,
-  ...radioProps
+  ...inputProps
 }) => {
   const {
     field: {
@@ -275,11 +277,16 @@ var FormFieldRadio = ({
       onBlur,
       value,
       ref
+    },
+    formState: {
+      errors
     }
   } = (0, import_react_hook_form6.useController)({
     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",
@@ -287,13 +294,62 @@ var FormFieldRadio = ({
       ...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
+    })]
+  });
+};
+
+// src/FormFieldRadio.tsx
+var import_ui7 = require("@ttoss/ui");
+var import_react_hook_form7 = require("react-hook-form");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var FormFieldRadio = ({
+  label,
+  name,
+  options,
+  sx,
+  ...radioProps
+}) => {
+  const {
+    field: {
+      onChange,
+      onBlur,
+      value,
+      ref
+    }
+  } = (0, import_react_hook_form7.useController)({
+    name,
+    defaultValue: ""
+  });
+  return /* @__PURE__ */(0, import_jsx_runtime7.jsxs)(import_ui7.Flex, {
+    sx: {
+      flexDirection: "column",
+      width: "100%",
+      ...sx
+    },
+    children: [label && /* @__PURE__ */(0, import_jsx_runtime7.jsx)(import_ui7.Label, {
       children: label
-    }), /* @__PURE__ */(0, import_jsx_runtime6.jsx)(import_ui6.Box, {
+    }), /* @__PURE__ */(0, import_jsx_runtime7.jsx)(import_ui7.Box, {
       children: options.map(option => {
         const id = `form-field-radio-${name}-${option.value}`;
-        return /* @__PURE__ */(0, import_jsx_runtime6.jsxs)(import_ui6.Label, {
+        return /* @__PURE__ */(0, import_jsx_runtime7.jsxs)(import_ui7.Label, {
           htmlFor: id,
-          children: [/* @__PURE__ */(0, import_jsx_runtime6.jsx)(import_ui6.Radio, {
+          children: [/* @__PURE__ */(0, import_jsx_runtime7.jsx)(import_ui7.Radio, {
             ref,
             onChange,
             onBlur,
@@ -305,16 +361,16 @@ var FormFieldRadio = ({
           }), option.label]
         }, id);
       })
-    }), /* @__PURE__ */(0, import_jsx_runtime6.jsx)(ErrorMessage, {
+    }), /* @__PURE__ */(0, import_jsx_runtime7.jsx)(ErrorMessage, {
       name
     })]
   });
 };
 
 // src/FormFieldSelect.tsx
-var import_react_hook_form7 = require("react-hook-form");
-var import_ui7 = require("@ttoss/ui");
-var import_jsx_runtime7 = require("react/jsx-runtime");
+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) => {
   const hasEmptyValue = options.some(opt => {
     return opt.value === "" || opt.value === 0;
@@ -350,21 +406,21 @@ var FormFieldSelect = ({
       value,
       ref
     }
-  } = (0, import_react_hook_form7.useController)({
+  } = (0, import_react_hook_form8.useController)({
     name,
     defaultValue: checkedDefaultValue
   });
   const id = `form-field-select-${name}`;
-  return /* @__PURE__ */(0, import_jsx_runtime7.jsxs)(import_ui7.Flex, {
+  return /* @__PURE__ */(0, import_jsx_runtime8.jsxs)(import_ui8.Flex, {
     sx: {
       flexDirection: "column",
       width: "100%",
       ...sx
     },
-    children: [label && /* @__PURE__ */(0, import_jsx_runtime7.jsx)(import_ui7.Label, {
+    children: [label && /* @__PURE__ */(0, import_jsx_runtime8.jsx)(import_ui8.Label, {
       htmlFor: id,
       children: label
-    }), /* @__PURE__ */(0, import_jsx_runtime7.jsx)(import_ui7.Select, {
+    }), /* @__PURE__ */(0, import_jsx_runtime8.jsx)(import_ui8.Select, {
       ref,
       name,
       onChange,
@@ -376,20 +432,20 @@ var FormFieldSelect = ({
         defaultValue: void 0
       },
       children: options.map(option => {
-        return /* @__PURE__ */(0, import_jsx_runtime7.jsx)("option", {
+        return /* @__PURE__ */(0, import_jsx_runtime8.jsx)("option", {
           value: option.value,
           children: option.label
         }, option.label);
       })
-    }), /* @__PURE__ */(0, import_jsx_runtime7.jsx)(ErrorMessage, {
+    }), /* @__PURE__ */(0, import_jsx_runtime8.jsx)(ErrorMessage, {
       name
     })]
   });
 };
 
 // src/FormFieldTextarea.tsx
-var import_ui8 = require("@ttoss/ui");
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_ui9 = require("@ttoss/ui");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var FormFieldTextarea = ({
   label,
   name,
@@ -397,7 +453,7 @@ var FormFieldTextarea = ({
   ...textareaProps
 }) => {
   const id = `form-field-textarea-${name}`;
-  return /* @__PURE__ */(0, import_jsx_runtime8.jsx)(FormField, {
+  return /* @__PURE__ */(0, import_jsx_runtime9.jsx)(FormField, {
     label,
     name,
     id,
@@ -405,7 +461,7 @@ var FormFieldTextarea = ({
     render: ({
       field
     }) => {
-      return /* @__PURE__ */(0, import_jsx_runtime8.jsx)(import_ui8.Textarea, {
+      return /* @__PURE__ */(0, import_jsx_runtime9.jsx)(import_ui9.Textarea, {
         ...field,
         ...textareaProps
       });
@@ -415,8 +471,8 @@ var FormFieldTextarea = ({
 
 // src/FormGroup.tsx
 var React3 = __toESM(require("react"));
-var import_ui9 = require("@ttoss/ui");
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_ui10 = require("@ttoss/ui");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 var FormGroupLevelsManagerContext = React3.createContext({
   levelsLength: 1,
   registerChild: () => {
@@ -432,7 +488,7 @@ var FormGroupLevelsManager = ({
       setLevelsLength(level + 1);
     }
   }, [levelsLength]);
-  return /* @__PURE__ */(0, import_jsx_runtime9.jsx)(FormGroupLevelsManagerContext.Provider, {
+  return /* @__PURE__ */(0, import_jsx_runtime10.jsx)(FormGroupLevelsManagerContext.Provider, {
     value: {
       levelsLength,
       registerChild
@@ -475,7 +531,7 @@ var FormGroupWrapper = ({
     gap: "md",
     width: "100%"
   };
-  return /* @__PURE__ */(0, import_jsx_runtime9.jsxs)(import_ui9.Box, {
+  return /* @__PURE__ */(0, import_jsx_runtime10.jsxs)(import_ui10.Box, {
     "aria-level": level,
     ...boxProps,
     sx: {
@@ -483,18 +539,18 @@ var FormGroupWrapper = ({
       marginBottom: "lg",
       ...boxProps.sx
     },
-    children: [title && /* @__PURE__ */(0, import_jsx_runtime9.jsx)(import_ui9.Box, {
+    children: [title && /* @__PURE__ */(0, import_jsx_runtime10.jsx)(import_ui10.Box, {
       sx: {
         marginBottom: "md"
       },
-      children: /* @__PURE__ */(0, import_jsx_runtime9.jsx)(import_ui9.Text, {
+      children: /* @__PURE__ */(0, import_jsx_runtime10.jsx)(import_ui10.Text, {
         sx: {
           fontSize: "2xl",
           fontWeight: "bold"
         },
         children: title
       })
-    }), /* @__PURE__ */(0, import_jsx_runtime9.jsx)(import_ui9.Flex, {
+    }), /* @__PURE__ */(0, import_jsx_runtime10.jsx)(import_ui10.Flex, {
       sx: childrenContainerSx,
       children
     })]
@@ -505,15 +561,15 @@ var FormGroup = props => {
     level
   } = useFormGroup();
   const currentLevel = level === void 0 ? 0 : level + 1;
-  return /* @__PURE__ */(0, import_jsx_runtime9.jsx)(FormGroupContext.Provider, {
+  return /* @__PURE__ */(0, import_jsx_runtime10.jsx)(FormGroupContext.Provider, {
     value: {
       parentLevel: currentLevel
     },
-    children: currentLevel === 0 ? /* @__PURE__ */(0, import_jsx_runtime9.jsx)(FormGroupLevelsManager, {
-      children: /* @__PURE__ */(0, import_jsx_runtime9.jsx)(FormGroupWrapper, {
+    children: currentLevel === 0 ? /* @__PURE__ */(0, import_jsx_runtime10.jsx)(FormGroupLevelsManager, {
+      children: /* @__PURE__ */(0, import_jsx_runtime10.jsx)(FormGroupWrapper, {
         ...props
       })
-    }) : /* @__PURE__ */(0, import_jsx_runtime9.jsx)(FormGroupWrapper, {
+    }) : /* @__PURE__ */(0, import_jsx_runtime10.jsx)(FormGroupWrapper, {
       ...props
     })
   });
@@ -524,6 +580,7 @@ var FormGroup = props => {
   FormField,
   FormFieldCheckbox,
   FormFieldInput,
+  FormFieldPassword,
   FormFieldRadio,
   FormFieldSelect,
   FormFieldTextarea,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/forms",
-  "version": "0.17.1",
+  "version": "0.17.2",
   "license": "UNLICENSED",
   "author": "ttoss",
   "contributors": [
@@ -22,7 +22,7 @@
   },
   "peerDependencies": {
     "react": ">=16.8.0",
-    "@ttoss/ui": "^1.36.1"
+    "@ttoss/ui": "^1.36.2"
   },
   "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.1"
+    "@ttoss/ui": "^1.36.2"
   },
   "publishConfig": {
     "access": "public"

package/src/FormFieldInput.tsx

@@ -8,6 +8,12 @@ import {
   type LabelProps,
 } from '@ttoss/ui';
 
+export type FormFieldInputProps<TName> = {
+  label?: string;
+  name: TName;
+} & InputProps &
+  Pick<LabelProps, 'tooltip' | 'onTooltipClick'>;
+
 export const FormFieldInput = <
   TFieldValues extends FieldValues = FieldValues,
   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
@@ -18,11 +24,7 @@ export const FormFieldInput = <
   onTooltipClick,
   sx,
   ...inputProps
-}: {
-  label?: string;
-  name: TName;
-} & InputProps &
-  Pick<LabelProps, 'tooltip' | 'onTooltipClick'>) => {
+}: FormFieldInputProps<TName>) => {
   const {
     field: { onChange, onBlur, value, ref },
     formState: { errors },

package/src/FormFieldPassword.tsx

@@ -0,0 +1,67 @@
+import { ErrorMessage } from './ErrorMessage';
+import { FieldPath, FieldValues, useController } from 'react-hook-form';
+import {
+  Flex,
+  InputPassword,
+  type InputPasswordProps,
+  Label,
+  type LabelProps,
+} from '@ttoss/ui';
+
+export type FormFieldPasswordProps<TName> = {
+  label?: string;
+  name: TName;
+} & InputPasswordProps &
+  Pick<LabelProps, 'tooltip' | 'onTooltipClick'>;
+
+export const FormFieldPassword = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+>({
+  label,
+  name,
+  tooltip,
+  onTooltipClick,
+  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}
+      />
+
+      <ErrorMessage name={name} />
+    </Flex>
+  );
+};

package/src/index.ts

@@ -6,6 +6,7 @@ export { Form } from './Form';
 export { FormField } from './FormField';
 export { FormFieldCheckbox } from './FormFieldCheckbox';
 export { FormFieldInput } from './FormFieldInput';
+export { FormFieldPassword } from './FormFieldPassword';
 export { FormFieldRadio } from './FormFieldRadio';
 export { FormFieldSelect } from './FormFieldSelect';
 export { FormFieldTextarea } from './FormFieldTextarea';