@ttoss/forms 0.28.0 → 0.28.2

package/dist/esm/Brazil/index.js

@@ -1,5 +1,5 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
-import { FormField, FormFieldCNPJ, FormFieldPatternFormat, isCnpjValid } from "../chunk-3L7PNPZA.js";
+import { FormField, FormFieldCNPJ, FormFieldPatternFormat, isCnpjValid } from "../chunk-MXENUSCP.js";
 
 // src/Brazil/FormFieldPhone.tsx
 import { Input } from "@ttoss/ui";

package/dist/esm/MultistepForm/index.js

@@ -1,9 +1,9 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
-import { Form, useForm, yupResolver } from "../chunk-3L7PNPZA.js";
+import { Form, useForm, yupResolver } from "../chunk-MXENUSCP.js";
 
 // src/MultistepForm/MultistepForm.tsx
-import * as React3 from "react";
 import { Flex as Flex6 } from "@ttoss/ui";
+import * as React3 from "react";
 
 // src/MultistepForm/MultistepFooter.tsx
 import { Flex, Text } from "@ttoss/ui";
@@ -19,9 +19,9 @@ var MultistepFooter = ({
     children: /* @__PURE__ */jsx(Text, {
       sx: {
         textAlign: "center",
-        marginTop: "4xl",
-        marginBottom: "lg",
-        marginX: "2xl"
+        marginTop: "8",
+        marginBottom: "4",
+        marginX: "6"
       },
       children: footer
     })
@@ -41,9 +41,9 @@ var MultistepFlowMessageImageText = ({
   return /* @__PURE__ */jsxs(Flex2, {
     sx: {
       flexDirection: "column",
-      paddingY: "xl",
-      paddingX: "2xl",
-      gap: "xl"
+      paddingY: "5",
+      paddingX: "6",
+      gap: "5"
     },
     children: [/* @__PURE__ */jsx2(Image, {
       src,
@@ -83,20 +83,20 @@ var MultistepQuestion = ({
   return /* @__PURE__ */jsxs2(Flex3, {
     sx: {
       flexDirection: "column",
-      paddingTop: "xl",
-      paddingX: "2xl"
+      paddingTop: "5",
+      paddingX: "6"
     },
     children: [/* @__PURE__ */jsx4(Text3, {
       sx: {
         textAlign: "center",
         fontSize: "lg",
-        marginBottom: "xl"
+        marginBottom: "5"
       },
       children: question
     }), /* @__PURE__ */jsx4(Flex3, {
       sx: {
         flexDirection: "column",
-        gap: "xl"
+        gap: "4"
       },
       children: fields
     })]
@@ -136,9 +136,9 @@ var MultistepFormStepper = ({
     }), /* @__PURE__ */jsx5(Button, {
       sx: {
         justifyContent: "center",
-        marginTop: "2xl",
-        marginBottom: "xl",
-        marginX: "2xl"
+        marginTop: "6",
+        marginBottom: "4",
+        marginX: "6"
       },
       rightIcon: isLastStep ? void 0 : "nav-right",
       "aria-label": `btn-step-${stepNumber}`,
@@ -148,9 +148,6 @@ var MultistepFormStepper = ({
   });
 };
 
-// src/MultistepForm/MultistepHeader.tsx
-import { CloseButton, Flex as Flex4, Image as Image2, Text as Text4 } from "@ttoss/ui";
-
 // ../react-icons/src/Icon.tsx
 import * as React2 from "react";
 
@@ -2410,6 +2407,7 @@ var Icon2 = React2.forwardRef((props, ref) => {
 Icon2.displayName = "Icon";
 
 // src/MultistepForm/MultistepHeader.tsx
+import { CloseButton, Flex as Flex4, Image as Image2, Text as Text4 } from "@ttoss/ui";
 import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
 var MultistepHeaderTitled = ({
   title,
@@ -2422,8 +2420,8 @@ var MultistepHeaderTitled = ({
     sx: {
       display: "flex",
       justifyContent: "space-between",
-      paddingX: "xl",
-      paddingY: "lg",
+      paddingX: "5",
+      paddingY: "4",
       alignItems: "center"
     },
     children: [/* @__PURE__ */jsx7(Icon2, {
@@ -2449,8 +2447,8 @@ var MultistepHeaderLogo = ({
     sx: {
       justifyContent: "space-between",
       alignItems: "center",
-      paddingX: "xl",
-      paddingY: "lg"
+      paddingX: "5",
+      paddingY: "4"
     },
     children: [/* @__PURE__ */jsx7(Image2, {
       width: 115,
@@ -2492,7 +2490,7 @@ var MultistepNavigation = ({
   return /* @__PURE__ */jsxs5(Flex5, {
     sx: {
       justifyContent: "space-between",
-      marginX: "2xl"
+      marginX: "5"
     },
     children: [/* @__PURE__ */jsxs5(Flex5, {
       onClick: onBack,

package/dist/esm/{chunk-3L7PNPZA.js → chunk-MXENUSCP.js}

@@ -68,13 +68,12 @@ var FormErrorMessage = ({
 };
 
 // src/FormField.tsx
-import { Box as Box2, Flex, Label } from "@ttoss/ui";
+import { Checkbox, Flex, Label, Switch } from "@ttoss/ui";
 import * as React from "react";
 import { useController } from "react-hook-form";
 import { jsx as jsx3, jsxs } from "react/jsx-runtime";
 var FormField = ({
   label,
-  labelPosition = "top",
   id: idProp,
   name,
   defaultValue,
@@ -97,43 +96,45 @@ var FormField = ({
         return null;
       }
       const childProps = child.props;
-      const isLabelHorizontal = ["left", "right"].includes(labelPosition);
-      const labelFontSize = isLabelHorizontal ? "md" : "sm";
-      const flexDirectionMap = {
-        top: "column",
-        bottom: "column-reverse",
-        left: "row",
-        right: "row-reverse"
-      };
+      if (label && [Checkbox, Switch].some(component => {
+        return child.type === component;
+      })) {
+        return /* @__PURE__ */jsxs(Label, {
+          "aria-disabled": disabled,
+          tooltip,
+          onTooltipClick,
+          children: [/* @__PURE__ */jsx3(Flex, {
+            children: React.createElement(child.type, {
+              id,
+              ...childProps
+            })
+          }), label]
+        });
+      }
       return /* @__PURE__ */jsxs(Flex, {
         sx: {
           width: "100%",
-          flexDirection: flexDirectionMap[labelPosition],
-          gap: "sm"
+          flexDirection: "column",
+          gap: "1"
         },
         children: [label && /* @__PURE__ */jsx3(Label, {
           "aria-disabled": disabled,
           htmlFor: id,
           tooltip,
           onTooltipClick,
-          sx: {
-            fontSize: labelFontSize
-          },
           children: label
-        }), /* @__PURE__ */jsx3(Box2, {
-          children: React.createElement(child.type, {
-            id,
-            ...childProps
-          })
+        }), React.createElement(child.type, {
+          id,
+          ...childProps
         })]
       });
     });
-  }, [render, controllerReturn, labelPosition, label, disabled, id, tooltip, onTooltipClick]);
+  }, [render, controllerReturn, label, disabled, id, tooltip, onTooltipClick]);
   return /* @__PURE__ */jsxs(Flex, {
     sx: {
       flexDirection: "column",
       width: "100%",
-      gap: "md",
+      gap: "1",
       ...sx
     },
     css,
@@ -144,7 +145,7 @@ var FormField = ({
 };
 
 // src/FormFieldCheckbox.tsx
-import { Checkbox } from "@ttoss/ui";
+import { Checkbox as Checkbox2 } from "@ttoss/ui";
 import { jsx as jsx4 } from "react/jsx-runtime";
 var FormFieldCheckbox = ({
   label,
@@ -154,13 +155,12 @@ var FormFieldCheckbox = ({
 }) => {
   return /* @__PURE__ */jsx4(FormField, {
     label,
-    labelPosition: "right",
     name,
     render: ({
       field,
       fieldState
     }) => {
-      return /* @__PURE__ */jsx4(Checkbox, {
+      return /* @__PURE__ */jsx4(Checkbox2, {
         ...field,
         ...checkboxProps,
         "aria-invalid": !!fieldState.error,
@@ -337,59 +337,46 @@ var FormFieldPassword = ({
 };
 
 // src/FormFieldRadio.tsx
-import { Box as Box3, Flex as Flex2, Label as Label2, Radio } from "@ttoss/ui";
-import { useController as useController2 } from "react-hook-form";
+import { Flex as Flex2, Label as Label2, Radio } from "@ttoss/ui";
 import { jsx as jsx11, jsxs as jsxs2 } from "react/jsx-runtime";
 var FormFieldRadio = ({
   label,
   name,
-  options,
   sx,
+  options,
   ...radioProps
 }) => {
-  const {
-    field: {
-      onChange,
-      onBlur,
-      value,
-      ref
-    }
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  } = useController2({
+  return /* @__PURE__ */jsx11(FormField, {
+    label,
     name,
-    defaultValue: ""
-  });
-  return /* @__PURE__ */jsxs2(Flex2, {
-    sx: {
-      flexDirection: "column",
-      width: "100%",
-      ...sx
-    },
-    children: [label && /* @__PURE__ */jsx11(Label2, {
-      sx: {
-        marginBottom: "md"
-      },
-      children: label
-    }), /* @__PURE__ */jsx11(Box3, {
-      children: options.map(option => {
-        const id = `form-field-radio-${name}-${option.value}`;
-        return /* @__PURE__ */jsxs2(Label2, {
-          htmlFor: id,
-          children: [/* @__PURE__ */jsx11(Radio, {
-            ref,
-            onChange,
-            onBlur,
-            value: option.value,
-            checked: value === option.value,
-            name,
-            id,
-            ...radioProps
-          }), option.label]
-        }, id);
-      })
-    }), /* @__PURE__ */jsx11(FormErrorMessage, {
-      name
-    })]
+    sx,
+    render: ({
+      field
+    }) => {
+      return /* @__PURE__ */jsx11(Flex2, {
+        sx: {
+          flexDirection: "column",
+          gap: "1"
+        },
+        children: options.map(option => {
+          const id = `form-field-radio-${name}-${option.value}`;
+          return /* @__PURE__ */jsxs2(Label2, {
+            sx: {
+              fontSize: "md"
+            },
+            children: [/* @__PURE__ */jsx11(Radio, {
+              ref: field.ref,
+              onChange: field.onChange,
+              onBlur: field.onBlur,
+              value: option.value,
+              checked: field.value === option.value,
+              name,
+              ...radioProps
+            }), option.label]
+          }, id);
+        })
+      });
+    }
   });
 };
 
@@ -433,7 +420,7 @@ var FormFieldSelect = ({
 };
 
 // src/FormFieldSwitch.tsx
-import { Switch } from "@ttoss/ui";
+import { Switch as Switch2 } from "@ttoss/ui";
 import { jsx as jsx13 } from "react/jsx-runtime";
 var FormFieldSwitch = ({
   label,
@@ -443,13 +430,12 @@ var FormFieldSwitch = ({
 }) => {
   return /* @__PURE__ */jsx13(FormField, {
     label,
-    labelPosition: "right",
     name,
     render: ({
       field,
       fieldState
     }) => {
-      return /* @__PURE__ */jsx13(Switch, {
+      return /* @__PURE__ */jsx13(Switch2, {
         ...field,
         ...switchProps,
         "aria-invalid": !!fieldState.error,
@@ -488,8 +474,8 @@ var FormFieldTextarea = ({
 };
 
 // src/FormGroup.tsx
+import { Box as Box2, Flex as Flex3, Text } from "@ttoss/ui";
 import * as React2 from "react";
-import { Box as Box4, Flex as Flex3, Text } from "@ttoss/ui";
 import { jsx as jsx15, jsxs as jsxs3 } from "react/jsx-runtime";
 var FormGroupLevelsManagerContext = React2.createContext({
   levelsLength: 1,
@@ -547,20 +533,20 @@ var FormGroupWrapper = ({
   }, [level, registerChild]);
   const childrenContainerSx = {
     flexDirection: direction || "column",
-    gap: "md",
+    gap: "1",
     width: "100%"
   };
-  return /* @__PURE__ */jsxs3(Box4, {
+  return /* @__PURE__ */jsxs3(Box2, {
     "aria-level": level,
     ...boxProps,
     sx: {
-      marginTop: level === 0 ? "none" : "lg",
-      marginBottom: "lg",
+      marginTop: level === 0 ? "none" : "4",
+      marginBottom: "4",
       ...boxProps.sx
     },
-    children: [title && /* @__PURE__ */jsx15(Box4, {
+    children: [title && /* @__PURE__ */jsx15(Box2, {
       sx: {
-        marginBottom: "md"
+        marginBottom: "2"
       },
       children: /* @__PURE__ */jsx15(Text, {
         sx: {
@@ -747,6 +733,6 @@ import * as yup2 from "yup";
 
 // src/index.ts
 import { yupResolver } from "@hookform/resolvers/yup";
-import { Controller, FormProvider as FormProvider2, useController as useController3, useFieldArray, useForm, useFormContext as useFormContext2, useFormState, useWatch } from "react-hook-form";
+import { Controller, FormProvider as FormProvider2, useController as useController2, useFieldArray, useForm, useFormContext as useFormContext2, useFormState, useWatch } from "react-hook-form";
 export * from "react-hook-form";
-export { Form, FormErrorMessage, FormField, FormFieldCheckbox, FormFieldPatternFormat, FormFieldCreditCardNumber, FormFieldNumericFormat, FormFieldCurrencyInput, FormFieldInput, FormFieldPassword, FormFieldRadio, FormFieldSelect, FormFieldSwitch, FormFieldTextarea, useFormGroup, FormGroup, isCnpjValid, FormFieldCNPJ, yup2 as yup, yupResolver, Controller, FormProvider2 as FormProvider, useController3 as useController, useFieldArray, useForm, useFormContext2 as useFormContext, useFormState, useWatch };
+export { Form, FormErrorMessage, FormField, FormFieldCheckbox, FormFieldPatternFormat, FormFieldCreditCardNumber, FormFieldNumericFormat, FormFieldCurrencyInput, FormFieldInput, FormFieldPassword, FormFieldRadio, FormFieldSelect, FormFieldSwitch, FormFieldTextarea, useFormGroup, FormGroup, isCnpjValid, FormFieldCNPJ, yup2 as yup, yupResolver, Controller, FormProvider2 as FormProvider, useController2 as useController, useFieldArray, useForm, useFormContext2 as useFormContext, useFormState, useWatch };

package/dist/esm/index.js

@@ -1,3 +1,3 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
-import { Controller, Form, FormErrorMessage, FormField, FormFieldCheckbox, FormFieldCreditCardNumber, FormFieldCurrencyInput, FormFieldInput, FormFieldNumericFormat, FormFieldPassword, FormFieldPatternFormat, FormFieldRadio, FormFieldSelect, FormFieldSwitch, FormFieldTextarea, FormGroup, FormProvider, useController, useFieldArray, useForm, useFormContext, useFormGroup, useFormState, useWatch, yup, yupResolver } from "./chunk-3L7PNPZA.js";
+import { Controller, Form, FormErrorMessage, FormField, FormFieldCheckbox, FormFieldCreditCardNumber, FormFieldCurrencyInput, FormFieldInput, FormFieldNumericFormat, FormFieldPassword, FormFieldPatternFormat, FormFieldRadio, FormFieldSelect, FormFieldSwitch, FormFieldTextarea, FormGroup, FormProvider, useController, useFieldArray, useForm, useFormContext, useFormGroup, useFormState, useWatch, yup, yupResolver } from "./chunk-MXENUSCP.js";
 export { Controller, Form, FormErrorMessage, FormField, FormFieldCheckbox, FormFieldCreditCardNumber, FormFieldCurrencyInput, FormFieldInput, FormFieldNumericFormat, FormFieldPassword, FormFieldPatternFormat, FormFieldRadio, FormFieldSelect, FormFieldSwitch, FormFieldTextarea, FormGroup, FormProvider, useController, useFieldArray, useForm, useFormContext, useFormGroup, useFormState, useWatch, yup, yupResolver };

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as React from 'react';
 import { BoxProps, SxProp, CheckboxProps, InputProps, InputPasswordProps, RadioProps, SelectProps, SwitchProps, TextareaProps } from '@ttoss/ui';
+import * as React$1 from 'react';
 import { FieldValues, FormProviderProps, FieldName, FieldPath, UseControllerReturn, FieldPathValue } from 'react-hook-form';
 export * from 'react-hook-form';
 export { Controller, FormProvider, useController, useFieldArray, useForm, useFormContext, useFormState, useWatch } from 'react-hook-form';
@@ -13,7 +13,7 @@ export { yup };
 export { yupResolver } from '@hookform/resolvers/yup';
 
 declare const Form: <TFieldValues extends FieldValues = FieldValues>({ children, onSubmit, sx, ...formMethods }: {
-    children?: React.ReactNode;
+    children?: React$1.ReactNode;
     onSubmit?: (data: TFieldValues) => Promise<void> | void;
     sx?: BoxProps["sx"];
 } & FormProviderProps<TFieldValues>) => react_jsx_runtime.JSX.Element;
@@ -24,8 +24,7 @@ declare const FormErrorMessage: <TFieldValues extends FieldValues = FieldValues>
 }) => react_jsx_runtime.JSX.Element;
 
 type FormFieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = {
-    label?: React.ReactNode;
-    labelPosition?: 'top' | 'bottom' | 'left' | 'right';
+    label?: React$1.ReactNode;
     id?: string;
     name: TName;
     defaultValue?: FieldPathValue<TFieldValues, TName>;
@@ -34,12 +33,12 @@ type FormFieldProps<TFieldValues extends FieldValues = FieldValues, TName extend
     onTooltipClick?: () => void;
 } & SxProp;
 type FormFieldCompleteProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = {
-    render: (props: UseControllerReturn<TFieldValues, TName>) => React.ReactElement;
+    render: (props: UseControllerReturn<TFieldValues, TName>) => React$1.ReactElement;
 } & FormFieldProps<TFieldValues, TName>;
-declare const FormField: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ label, labelPosition, id: idProp, name, defaultValue, disabled, tooltip, onTooltipClick, sx, css, render, }: FormFieldCompleteProps<TFieldValues, TName>) => react_jsx_runtime.JSX.Element;
+declare const FormField: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ label, id: idProp, name, defaultValue, disabled, tooltip, onTooltipClick, sx, css, render, }: FormFieldCompleteProps<TFieldValues, TName>) => react_jsx_runtime.JSX.Element;
 
 declare const FormFieldCheckbox: <TFieldValues extends FieldValues = FieldValues>({ label, name, sx, ...checkboxProps }: {
-    label?: React.ReactNode;
+    label?: React$1.ReactNode;
     name: FieldPath<TFieldValues>;
 } & CheckboxProps) => react_jsx_runtime.JSX.Element;
 
@@ -80,9 +79,9 @@ type FormRadioOption = {
     value: string | number;
     label: string;
 };
-declare const FormFieldRadio: <TFieldValues extends FieldValues = FieldValues>({ label, name, options, sx, ...radioProps }: {
-    label?: string;
-    name: FieldPath<TFieldValues>;
+declare const FormFieldRadio: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ label, name, sx, options, ...radioProps }: {
+    label?: React.ReactNode;
+    name: TName;
     options: FormRadioOption[];
 } & RadioProps) => react_jsx_runtime.JSX.Element;
 
@@ -90,7 +89,7 @@ type FormFieldSelectProps<TFieldValues extends FieldValues = FieldValues, TName
 declare const FormFieldSelect: <TFieldValues extends FieldValues = FieldValues>({ label, name, id, defaultValue, sx, css, disabled, tooltip, onTooltipClick, ...selectProps }: FormFieldSelectProps<TFieldValues>) => react_jsx_runtime.JSX.Element;
 
 declare const FormFieldSwitch: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ label, name, sx, ...switchProps }: {
-    label?: React.ReactNode;
+    label?: React$1.ReactNode;
     name: TName;
 } & SwitchProps) => react_jsx_runtime.JSX.Element;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/forms",
-  "version": "0.28.0",
+  "version": "0.28.2",
   "license": "MIT",
   "author": "ttoss",
   "contributors": [
@@ -39,7 +39,7 @@
   },
   "peerDependencies": {
     "react": ">=16.8.0",
-    "@ttoss/ui": "^5.1.0",
+    "@ttoss/ui": "^5.1.1",
     "@ttoss/react-i18n": "^2.0.9"
   },
   "devDependencies": {
@@ -52,10 +52,10 @@
     "yup": "^1.6.1",
     "@ttoss/config": "^1.35.2",
     "@ttoss/i18n-cli": "^0.7.26",
+    "@ttoss/test-utils": "^2.1.22",
     "@ttoss/react-icons": "^0.4.9",
     "@ttoss/react-i18n": "^2.0.9",
-    "@ttoss/ui": "^5.1.0",
-    "@ttoss/test-utils": "^2.1.22"
+    "@ttoss/ui": "^5.1.1"
   },
   "publishConfig": {
     "access": "public",