@ttoss/forms 0.14.7 → 0.14.10

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" }
+        }
+      )
     }
   );
 };
@@ -100,7 +107,7 @@ var FormFieldCheckbox = ({
   });
   const id = `form-field-checkbox-${name}`;
   return /* @__PURE__ */ jsxs2(Box3, { children: [
-    /* @__PURE__ */ jsxs2(Flex, { sx: { alignItems: "center" }, children: [
+    /* @__PURE__ */ jsx4(Flex, { sx: { alignItems: "center" }, children: /* @__PURE__ */ jsxs2(Label2, { "aria-disabled": checkboxProps.disabled, htmlFor: id, children: [
       /* @__PURE__ */ jsx4(
         Checkbox,
         {
@@ -113,8 +120,8 @@ var FormFieldCheckbox = ({
           ...checkboxProps
         }
       ),
-      label && /* @__PURE__ */ jsx4(Label2, { "aria-disabled": checkboxProps.disabled, htmlFor: id, children: label })
-    ] }),
+      label
+    ] }) }),
     /* @__PURE__ */ jsx4(ErrorMessage, { name })
   ] });
 };
@@ -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" }
+        }
+      )
     }
   );
 };
@@ -140,7 +147,7 @@ var FormFieldCheckbox = ({
   });
   const id = `form-field-checkbox-${name}`;
   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.Flex, { sx: { alignItems: "center" }, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_ui4.Label, { "aria-disabled": checkboxProps.disabled, htmlFor: id, children: [
       /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
         import_ui4.Checkbox,
         {
@@ -153,8 +160,8 @@ var FormFieldCheckbox = ({
           ...checkboxProps
         }
       ),
-      label && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_ui4.Label, { "aria-disabled": checkboxProps.disabled, htmlFor: id, children: label })
-    ] }),
+      label
+    ] }) }),
     /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ErrorMessage, { name })
   ] });
 };
@@ -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.7",
+  "version": "0.14.10",
   "license": "UNLICENSED",
   "author": "ttoss",
   "contributors": [
@@ -31,7 +31,7 @@
   "devDependencies": {
     "@ttoss/config": "^1.28.3",
     "@ttoss/test-utils": "^1.20.5",
-    "@ttoss/ui": "^1.30.7",
+    "@ttoss/ui": "^1.30.10",
     "@types/jest": "^29.4.0",
     "jest": "^29.5.0",
     "react": "^18.2.0",
@@ -41,5 +41,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "56e8cfde36a962deaa5514453618280699824b4f"
+  "gitHead": "5a7f5a875b4474af9c78bbec65355cde6e6a7c81"
 }

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/FormFieldCheckbox.tsx

@@ -24,20 +24,18 @@ export const FormFieldCheckbox = <
   return (
     <Box>
       <Flex sx={{ alignItems: 'center' }}>
-        <Checkbox
-          id={id}
-          ref={ref}
-          checked={value}
-          onChange={onChange}
-          onBlur={onBlur}
-          name={name}
-          {...checkboxProps}
-        />
-        {label && (
-          <Label aria-disabled={checkboxProps.disabled} htmlFor={id}>
-            {label}
-          </Label>
-        )}
+        <Label aria-disabled={checkboxProps.disabled} htmlFor={id}>
+          <Checkbox
+            id={id}
+            ref={ref}
+            checked={value}
+            onChange={onChange}
+            onBlur={onBlur}
+            name={name}
+            {...checkboxProps}
+          />
+          {label}
+        </Label>
       </Flex>
       <ErrorMessage name={name} />
     </Box>

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}