@ttoss/forms 0.14.6 → 0.14.9

package/dist/esm/index.js

@@ -49,7 +49,14 @@ var ErrorMessage = ({
     {
       errors,
       name,
-      as: /* @__PURE__ */ jsx2(Text, { variant: "text.error", role: "alert" })
+      as: /* @__PURE__ */ jsx2(
+        Text,
+        {
+          variant: "text.error",
+          role: "alert",
+          sx: { fontFamily: "caption", fontSize: "xs" }
+        }
+      )
     }
   );
 };
@@ -138,7 +145,8 @@ var FormFieldInput = ({
   ...inputProps
 }) => {
   const {
-    field: { onChange, onBlur, value, ref }
+    field: { onChange, onBlur, value, ref },
+    formState: { errors }
   } = useController3({
     name,
     defaultValue: ""
@@ -150,6 +158,7 @@ var FormFieldInput = ({
     return String(value).length;
   }, [value]);
   const id = `form-field-input-${name}`;
+  const hasError = !!errors[name]?.message;
   return /* @__PURE__ */ jsxs3(Box4, { children: [
     label && /* @__PURE__ */ jsxs3(
       Label3,
@@ -173,7 +182,8 @@ var FormFieldInput = ({
               sx: {
                 marginLeft: "auto",
                 fontSize: "xs",
-                lineHeight: 0
+                lineHeight: 0,
+                color: "underemphasize"
               },
               variant: "character-counter",
               children: characterCounter
@@ -187,6 +197,7 @@ var FormFieldInput = ({
       {
         ref,
         onChange,
+        className: hasError ? "error" : "",
         onBlur,
         value,
         name,

package/dist/index.js

@@ -91,7 +91,14 @@ var ErrorMessage = ({
     {
       errors,
       name,
-      as: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_ui2.Text, { variant: "text.error", role: "alert" })
+      as: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        import_ui2.Text,
+        {
+          variant: "text.error",
+          role: "alert",
+          sx: { fontFamily: "caption", fontSize: "xs" }
+        }
+      )
     }
   );
 };
@@ -172,7 +179,8 @@ var FormFieldInput = ({
   ...inputProps
 }) => {
   const {
-    field: { onChange, onBlur, value, ref }
+    field: { onChange, onBlur, value, ref },
+    formState: { errors }
   } = (0, import_react_hook_form5.useController)({
     name,
     defaultValue: ""
@@ -184,6 +192,7 @@ var FormFieldInput = ({
     return String(value).length;
   }, [value]);
   const id = `form-field-input-${name}`;
+  const hasError = !!errors[name]?.message;
   return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_ui5.Box, { children: [
     label && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
       import_ui5.Label,
@@ -207,7 +216,8 @@ var FormFieldInput = ({
               sx: {
                 marginLeft: "auto",
                 fontSize: "xs",
-                lineHeight: 0
+                lineHeight: 0,
+                color: "underemphasize"
               },
               variant: "character-counter",
               children: characterCounter
@@ -221,6 +231,7 @@ var FormFieldInput = ({
       {
         ref,
         onChange,
+        className: hasError ? "error" : "",
         onBlur,
         value,
         name,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/forms",
-  "version": "0.14.6",
+  "version": "0.14.9",
   "license": "UNLICENSED",
   "author": "ttoss",
   "contributors": [
@@ -29,11 +29,11 @@
     "react": "^18.2.0"
   },
   "devDependencies": {
-    "@ttoss/config": "^1.28.2",
-    "@ttoss/test-utils": "^1.20.4",
-    "@ttoss/ui": "^1.30.6",
+    "@ttoss/config": "^1.28.3",
+    "@ttoss/test-utils": "^1.20.5",
+    "@ttoss/ui": "^1.30.9",
     "@types/jest": "^29.4.0",
-    "jest": "^29.4.3",
+    "jest": "^29.5.0",
     "react": "^18.2.0",
     "react-hook-form": "^7.43.2",
     "yup": "^1.0.0"
@@ -41,5 +41,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "0a6b947e6dc4386ff80861cbed8c119c6bd39f47"
+  "gitHead": "fb122458378a96e09d1da7fbad0bf12e72e8d04d"
 }

package/src/ErrorMessage.tsx

@@ -15,7 +15,13 @@ export const ErrorMessage = <TFieldValues extends FieldValues = FieldValues>({
     <HookFormErrorMessage
       errors={errors}
       name={name as any}
-      as={<Text variant="text.error" role="alert" />}
+      as={
+        <Text
+          variant="text.error"
+          role="alert"
+          sx={{ fontFamily: 'caption', fontSize: 'xs' }}
+        />
+      }
     />
   );
 };

package/src/FormFieldInput.tsx

@@ -28,6 +28,7 @@ export const FormFieldInput = <
 } & InputProps) => {
   const {
     field: { onChange, onBlur, value, ref },
+    formState: { errors },
   } = useController<any>({
     name,
     defaultValue: '',
@@ -43,6 +44,8 @@ export const FormFieldInput = <
 
   const id = `form-field-input-${name}`;
 
+  const hasError = !!errors[name]?.message;
+
   return (
     <Box>
       {label && (
@@ -67,6 +70,7 @@ export const FormFieldInput = <
                 marginLeft: 'auto',
                 fontSize: 'xs',
                 lineHeight: 0,
+                color: 'underemphasize',
               }}
               variant="character-counter"
             >
@@ -79,6 +83,7 @@ export const FormFieldInput = <
       <Input
         ref={ref}
         onChange={onChange}
+        className={hasError ? 'error' : ''}
         onBlur={onBlur}
         value={value}
         name={name}