@ttoss/forms 0.18.6 → 0.18.8

package/README.md

@@ -5,7 +5,7 @@
 ## Installation
 
 ```shell
-pnpm i @ttoss/forms @ttoss/react-i18n
+pnpm i @ttoss/forms @ttoss/react-i18n @ttoss/ui @emotion/react
 pnpm i --save-dev @ttoss/i18n-cli
 ```
 

package/dist/esm/index.js

@@ -236,7 +236,7 @@ var FormFieldCheckbox = ({
 };
 
 // src/FormFieldInput.tsx
-import { Input } from "@ttoss/ui";
+import { Input } from "@ttoss/ui/src";
 import { jsx as jsx5 } from "react/jsx-runtime";
 var FormFieldInput = ({
   label,
@@ -263,8 +263,7 @@ var FormFieldInput = ({
       return /* @__PURE__ */jsx5(Input, {
         ...inputProps,
         ...field,
-        "aria-invalid": hasError.valueOf(),
-        trailingIcon: hasError ? "warning-alt" : void 0
+        "aria-invalid": hasError.valueOf()
       });
     }
   });
@@ -414,7 +413,8 @@ var FormFieldSelect = ({
     sx,
     defaultValue: checkedDefaultValue,
     render: ({
-      field
+      field,
+      fieldState
     }) => {
       return /* @__PURE__ */jsx8(Select, {
         ...selectProps,
@@ -423,6 +423,7 @@ var FormFieldSelect = ({
           ...selectProps,
           defaultValue: void 0
         },
+        "aria-invalid": fieldState.error ? "true" : void 0,
         children: options.map(option => {
           return /* @__PURE__ */jsx8("option", {
             value: option.value,

package/dist/index.d.ts

@@ -6,7 +6,8 @@ import * as yup from 'yup';
 export { yup };
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
-import { BoxProps, FlexProps, CheckboxProps, InputProps, InputPasswordProps, RadioProps, SelectProps, TextareaProps } from '@ttoss/ui';
+import { BoxProps, FlexProps, CheckboxProps, InputPasswordProps, RadioProps, SelectProps, TextareaProps } from '@ttoss/ui';
+import { InputProps } from '@ttoss/ui/src';
 
 declare const Form: <TFieldValues extends FieldValues = FieldValues>({ children, onSubmit, sx, ...formMethods }: {
     children?: React.ReactNode;

package/dist/index.js

@@ -272,7 +272,7 @@ var FormFieldCheckbox = ({
 };
 
 // src/FormFieldInput.tsx
-var import_ui5 = require("@ttoss/ui");
+var import_src = require("@ttoss/ui/src");
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var FormFieldInput = ({
   label,
@@ -296,18 +296,17 @@ var FormFieldInput = ({
       formState
     }) => {
       const hasError = !!formState.errors[name]?.message;
-      return /* @__PURE__ */(0, import_jsx_runtime5.jsx)(import_ui5.Input, {
+      return /* @__PURE__ */(0, import_jsx_runtime5.jsx)(import_src.Input, {
         ...inputProps,
         ...field,
-        "aria-invalid": hasError.valueOf(),
-        trailingIcon: hasError ? "warning-alt" : void 0
+        "aria-invalid": hasError.valueOf()
       });
     }
   });
 };
 
 // src/FormFieldPassword.tsx
-var import_ui6 = require("@ttoss/ui");
+var import_ui5 = require("@ttoss/ui");
 var import_jsx_runtime6 = require("react/jsx-runtime");
 var FormFieldPassword = ({
   label,
@@ -331,7 +330,7 @@ var FormFieldPassword = ({
       formState
     }) => {
       const hasError = !!formState.errors[name]?.message;
-      return /* @__PURE__ */(0, import_jsx_runtime6.jsx)(import_ui6.InputPassword, {
+      return /* @__PURE__ */(0, import_jsx_runtime6.jsx)(import_ui5.InputPassword, {
         ...inputProps,
         ...field,
         "aria-invalid": hasError.valueOf()
@@ -341,7 +340,7 @@ var FormFieldPassword = ({
 };
 
 // src/FormFieldRadio.tsx
-var import_ui7 = require("@ttoss/ui");
+var import_ui6 = require("@ttoss/ui");
 var import_react_hook_form5 = require("react-hook-form");
 var import_jsx_runtime7 = require("react/jsx-runtime");
 var FormFieldRadio = ({
@@ -362,23 +361,23 @@ var FormFieldRadio = ({
     name,
     defaultValue: ""
   });
-  return /* @__PURE__ */(0, import_jsx_runtime7.jsxs)(import_ui7.Flex, {
+  return /* @__PURE__ */(0, import_jsx_runtime7.jsxs)(import_ui6.Flex, {
     sx: {
       flexDirection: "column",
       width: "100%",
       ...sx
     },
-    children: [label && /* @__PURE__ */(0, import_jsx_runtime7.jsx)(import_ui7.Label, {
+    children: [label && /* @__PURE__ */(0, import_jsx_runtime7.jsx)(import_ui6.Label, {
       sx: {
         marginBottom: "md"
       },
       children: label
-    }), /* @__PURE__ */(0, import_jsx_runtime7.jsx)(import_ui7.Box, {
+    }), /* @__PURE__ */(0, import_jsx_runtime7.jsx)(import_ui6.Box, {
       children: options.map(option => {
         const id = `form-field-radio-${name}-${option.value}`;
-        return /* @__PURE__ */(0, import_jsx_runtime7.jsxs)(import_ui7.Label, {
+        return /* @__PURE__ */(0, import_jsx_runtime7.jsxs)(import_ui6.Label, {
           htmlFor: id,
-          children: [/* @__PURE__ */(0, import_jsx_runtime7.jsx)(import_ui7.Radio, {
+          children: [/* @__PURE__ */(0, import_jsx_runtime7.jsx)(import_ui6.Radio, {
             ref,
             onChange,
             onBlur,
@@ -397,7 +396,7 @@ var FormFieldRadio = ({
 };
 
 // src/FormFieldSelect.tsx
-var import_ui8 = require("@ttoss/ui");
+var import_ui7 = require("@ttoss/ui");
 var import_jsx_runtime8 = require("react/jsx-runtime");
 var checkDefaultValue = ({
   options,
@@ -450,15 +449,17 @@ var FormFieldSelect = ({
     sx,
     defaultValue: checkedDefaultValue,
     render: ({
-      field
+      field,
+      fieldState
     }) => {
-      return /* @__PURE__ */(0, import_jsx_runtime8.jsx)(import_ui8.Select, {
+      return /* @__PURE__ */(0, import_jsx_runtime8.jsx)(import_ui7.Select, {
         ...selectProps,
         ...field,
         ...{
           ...selectProps,
           defaultValue: void 0
         },
+        "aria-invalid": fieldState.error ? "true" : void 0,
         children: options.map(option => {
           return /* @__PURE__ */(0, import_jsx_runtime8.jsx)("option", {
             value: option.value,
@@ -471,7 +472,7 @@ var FormFieldSelect = ({
 };
 
 // src/FormFieldTextarea.tsx
-var import_ui9 = require("@ttoss/ui");
+var import_ui8 = require("@ttoss/ui");
 var import_jsx_runtime9 = require("react/jsx-runtime");
 var FormFieldTextarea = ({
   label,
@@ -488,7 +489,7 @@ var FormFieldTextarea = ({
     render: ({
       field
     }) => {
-      return /* @__PURE__ */(0, import_jsx_runtime9.jsx)(import_ui9.Textarea, {
+      return /* @__PURE__ */(0, import_jsx_runtime9.jsx)(import_ui8.Textarea, {
         ...field,
         ...textareaProps
       });
@@ -498,7 +499,7 @@ var FormFieldTextarea = ({
 
 // src/FormGroup.tsx
 var React3 = __toESM(require("react"));
-var import_ui10 = require("@ttoss/ui");
+var import_ui9 = require("@ttoss/ui");
 var import_jsx_runtime10 = require("react/jsx-runtime");
 var FormGroupLevelsManagerContext = React3.createContext({
   levelsLength: 1,
@@ -558,7 +559,7 @@ var FormGroupWrapper = ({
     gap: "md",
     width: "100%"
   };
-  return /* @__PURE__ */(0, import_jsx_runtime10.jsxs)(import_ui10.Box, {
+  return /* @__PURE__ */(0, import_jsx_runtime10.jsxs)(import_ui9.Box, {
     "aria-level": level,
     ...boxProps,
     sx: {
@@ -566,18 +567,18 @@ var FormGroupWrapper = ({
       marginBottom: "lg",
       ...boxProps.sx
     },
-    children: [title && /* @__PURE__ */(0, import_jsx_runtime10.jsx)(import_ui10.Box, {
+    children: [title && /* @__PURE__ */(0, import_jsx_runtime10.jsx)(import_ui9.Box, {
       sx: {
         marginBottom: "md"
       },
-      children: /* @__PURE__ */(0, import_jsx_runtime10.jsx)(import_ui10.Text, {
+      children: /* @__PURE__ */(0, import_jsx_runtime10.jsx)(import_ui9.Text, {
         sx: {
           fontSize: "2xl",
           fontWeight: "bold"
         },
         children: title
       })
-    }), /* @__PURE__ */(0, import_jsx_runtime10.jsx)(import_ui10.Flex, {
+    }), /* @__PURE__ */(0, import_jsx_runtime10.jsx)(import_ui9.Flex, {
       sx: childrenContainerSx,
       children
     })]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/forms",
-  "version": "0.18.6",
+  "version": "0.18.8",
   "license": "UNLICENSED",
   "author": "ttoss",
   "contributors": [
@@ -27,24 +27,24 @@
   },
   "peerDependencies": {
     "react": ">=16.8.0",
-    "@ttoss/react-i18n": "^1.23.4",
-    "@ttoss/ui": "^2.0.0"
+    "@ttoss/react-i18n": "^1.23.5",
+    "@ttoss/ui": "^2.0.2"
   },
   "devDependencies": {
     "@types/jest": "^29.5.2",
-    "@types/react": "^18.2.11",
+    "@types/react": "^18.2.12",
     "jest": "^29.5.0",
     "react": "^18.2.0",
     "react-error-boundary": "^4.0.9",
     "react-hook-form": "^7.44.3",
-    "theme-ui": "^0.15.7",
-    "tsup": "^6.7.0",
+    "theme-ui": "^0.16.0",
+    "tsup": "^7.0.0",
     "yup": "^1.2.0",
-    "@ttoss/config": "^1.30.3",
-    "@ttoss/i18n-cli": "^0.6.2",
-    "@ttoss/react-i18n": "^1.23.4",
-    "@ttoss/test-utils": "^1.23.4",
-    "@ttoss/ui": "^2.0.0"
+    "@ttoss/config": "^1.30.4",
+    "@ttoss/i18n-cli": "^0.6.3",
+    "@ttoss/react-i18n": "^1.23.5",
+    "@ttoss/test-utils": "^1.23.5",
+    "@ttoss/ui": "^2.0.2"
   },
   "publishConfig": {
     "access": "public",

package/src/FormFieldInput.tsx

@@ -1,6 +1,6 @@
 import { FieldPath, FieldPathValue, FieldValues } from 'react-hook-form';
 import { FormField, type FormFieldProps } from './FormField';
-import { Input, type InputProps } from '@ttoss/ui';
+import { Input, type InputProps } from '@ttoss/ui/src';
 
 export type FormFieldInputProps<TName> = {
   label?: string;
@@ -33,12 +33,7 @@ export const FormFieldInput = <
         const hasError = !!formState.errors[name]?.message;
 
         return (
-          <Input
-            {...inputProps}
-            {...field}
-            aria-invalid={hasError.valueOf()}
-            trailingIcon={hasError ? 'warning-alt' : undefined}
-          />
+          <Input {...inputProps} {...field} aria-invalid={hasError.valueOf()} />
         );
       }}
     />

package/src/FormFieldSelect.tsx

@@ -89,12 +89,13 @@ export const FormFieldSelect = <
       onTooltipClick={selectProps.onTooltipClick}
       sx={sx}
       defaultValue={checkedDefaultValue}
-      render={({ field }) => {
+      render={({ field, fieldState }) => {
         return (
           <Select
             {...selectProps}
             {...field}
             {...{ ...selectProps, defaultValue: undefined }}
+            aria-invalid={fieldState.error ? 'true' : undefined}
           >
             {options.map((option: FormRadioOption) => {
               return (