@ttoss/forms 0.17.9 → 0.17.11

package/dist/esm/index.js

@@ -94,6 +94,7 @@ var FormField = ({
     sx: {
       flexDirection: "column",
       width: "100%",
+      gap: "md",
       ...sx
     },
     children: [memoizedRender, /* @__PURE__ */jsx3(ErrorMessage, {
@@ -186,7 +187,8 @@ var FormFieldInput = ({
       return /* @__PURE__ */jsx5(Input, {
         ...inputProps,
         ...field,
-        "aria-invalid": hasError.valueOf()
+        "aria-invalid": hasError.valueOf(),
+        trailingIcon: hasError ? "warning-alt" : void 0
       });
     }
   });
@@ -255,6 +257,9 @@ var FormFieldRadio = ({
       ...sx
     },
     children: [label && /* @__PURE__ */jsx7(Label3, {
+      sx: {
+        marginBottom: "md"
+      },
       children: label
     }), /* @__PURE__ */jsx7(Box2, {
       children: options.map(option => {
@@ -282,7 +287,11 @@ var FormFieldRadio = ({
 // src/FormFieldSelect.tsx
 import { Select } from "@ttoss/ui";
 import { jsx as jsx8 } from "react/jsx-runtime";
-var checkDefaultValue = (options, defaultValue, placeholder) => {
+var checkDefaultValue = ({
+  options,
+  defaultValue,
+  placeholder
+}) => {
   if (defaultValue) {
     return defaultValue;
   }
@@ -315,7 +324,11 @@ var FormFieldSelect = ({
     defaultValue,
     placeholder
   } = selectProps;
-  const checkedDefaultValue = checkDefaultValue(options, defaultValue, placeholder);
+  const checkedDefaultValue = checkDefaultValue({
+    options,
+    defaultValue,
+    placeholder
+  });
   return /* @__PURE__ */jsx8(FormField, {
     name,
     label,

package/dist/index.js

@@ -146,6 +146,7 @@ var FormField = ({
     sx: {
       flexDirection: "column",
       width: "100%",
+      gap: "md",
       ...sx
     },
     children: [memoizedRender, /* @__PURE__ */(0, import_jsx_runtime3.jsx)(ErrorMessage, {
@@ -238,7 +239,8 @@ var FormFieldInput = ({
       return /* @__PURE__ */(0, import_jsx_runtime5.jsx)(import_ui5.Input, {
         ...inputProps,
         ...field,
-        "aria-invalid": hasError.valueOf()
+        "aria-invalid": hasError.valueOf(),
+        trailingIcon: hasError ? "warning-alt" : void 0
       });
     }
   });
@@ -307,6 +309,9 @@ var FormFieldRadio = ({
       ...sx
     },
     children: [label && /* @__PURE__ */(0, import_jsx_runtime7.jsx)(import_ui7.Label, {
+      sx: {
+        marginBottom: "md"
+      },
       children: label
     }), /* @__PURE__ */(0, import_jsx_runtime7.jsx)(import_ui7.Box, {
       children: options.map(option => {
@@ -334,7 +339,11 @@ var FormFieldRadio = ({
 // src/FormFieldSelect.tsx
 var import_ui8 = require("@ttoss/ui");
 var import_jsx_runtime8 = require("react/jsx-runtime");
-var checkDefaultValue = (options, defaultValue, placeholder) => {
+var checkDefaultValue = ({
+  options,
+  defaultValue,
+  placeholder
+}) => {
   if (defaultValue) {
     return defaultValue;
   }
@@ -367,7 +376,11 @@ var FormFieldSelect = ({
     defaultValue,
     placeholder
   } = selectProps;
-  const checkedDefaultValue = checkDefaultValue(options, defaultValue, placeholder);
+  const checkedDefaultValue = checkDefaultValue({
+    options,
+    defaultValue,
+    placeholder
+  });
   return /* @__PURE__ */(0, import_jsx_runtime8.jsx)(FormField, {
     name,
     label,

package/package.json

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

package/src/FormField.tsx

@@ -78,7 +78,7 @@ export const FormField = <
   ]);
 
   return (
-    <Flex sx={{ flexDirection: 'column', width: '100%', ...sx }}>
+    <Flex sx={{ flexDirection: 'column', width: '100%', gap: 'md', ...sx }}>
       {memoizedRender}
       <ErrorMessage name={name} />
     </Flex>

package/src/FormFieldInput.tsx

@@ -33,7 +33,12 @@ export const FormFieldInput = <
         const hasError = !!formState.errors[name]?.message;
 
         return (
-          <Input {...inputProps} {...field} aria-invalid={hasError.valueOf()} />
+          <Input
+            {...inputProps}
+            {...field}
+            aria-invalid={hasError.valueOf()}
+            trailingIcon={hasError ? 'warning-alt' : undefined}
+          />
         );
       }}
     />

package/src/FormFieldRadio.tsx

@@ -27,9 +27,9 @@ export const FormFieldRadio = <TFieldValues extends FieldValues = FieldValues>({
 
   return (
     <Flex sx={{ flexDirection: 'column', width: '100%', ...sx }}>
-      {label && <Label>{label}</Label>}
+      {label && <Label sx={{ marginBottom: 'md' }}>{label}</Label>}
       <Box>
-        {options.map((option) => {
+        {options.map((option: FormRadioOption) => {
           const id = `form-field-radio-${name}-${option.value}`;
 
           return (

package/src/FormFieldSelect.tsx

@@ -14,11 +14,15 @@ type SelectSwitchProps =
 const checkDefaultValue = <
   TFieldValues extends FieldValues = FieldValues,
   TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
->(
-  options: Array<FormRadioOption>,
-  defaultValue?: FieldPathValue<TFieldValues, TName>,
-  placeholder?: string
-): FieldPathValue<TFieldValues, TName> => {
+>({
+  options,
+  defaultValue,
+  placeholder,
+}: {
+  options: Array<FormRadioOption>;
+  defaultValue?: FieldPathValue<TFieldValues, TName>;
+  placeholder?: string;
+}): FieldPathValue<TFieldValues, TName> => {
   if (defaultValue) {
     return defaultValue;
   }
@@ -70,11 +74,11 @@ export const FormFieldSelect = <
 }: FormFieldSelectProps<TFieldValues, TName>) => {
   const { defaultValue, placeholder } = selectProps;
 
-  const checkedDefaultValue = checkDefaultValue<TFieldValues, TName>(
+  const checkedDefaultValue = checkDefaultValue<TFieldValues, TName>({
     options,
     defaultValue,
-    placeholder
-  );
+    placeholder,
+  });
 
   return (
     <FormField
@@ -92,7 +96,7 @@ export const FormFieldSelect = <
             {...field}
             {...{ ...selectProps, defaultValue: undefined }}
           >
-            {options.map((option) => {
+            {options.map((option: FormRadioOption) => {
               return (
                 <option key={option.label} value={option.value}>
                   {option.label}