@ttoss/forms 0.27.0 → 0.28.0

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-GB65RGLC.js";
+import { FormField, FormFieldCNPJ, FormFieldPatternFormat, isCnpjValid } from "../chunk-3L7PNPZA.js";
 
 // src/Brazil/FormFieldPhone.tsx
 import { Input } from "@ttoss/ui";

package/dist/esm/MultistepForm/index.js

@@ -1,5 +1,5 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
-import { Form, useForm, yupResolver } from "../chunk-GB65RGLC.js";
+import { Form, useForm, yupResolver } from "../chunk-3L7PNPZA.js";
 
 // src/MultistepForm/MultistepForm.tsx
 import * as React3 from "react";

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

@@ -68,12 +68,13 @@ var FormErrorMessage = ({
 };
 
 // src/FormField.tsx
+import { Box as Box2, Flex, Label } from "@ttoss/ui";
 import * as React from "react";
 import { useController } from "react-hook-form";
-import { Flex, Label } from "@ttoss/ui";
-import { Fragment, jsx as jsx3, jsxs } from "react/jsx-runtime";
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
 var FormField = ({
   label,
+  labelPosition = "top",
   id: idProp,
   name,
   defaultValue,
@@ -88,27 +89,46 @@ var FormField = ({
     name,
     defaultValue
   });
-  const id = idProp || `form-field-${name}`;
+  const uniqueId = React.useId();
+  const id = idProp || `form-field-${name}-${uniqueId}`;
   const memoizedRender = React.useMemo(() => {
     return React.Children.map(render(controllerReturn), child => {
       if (!React.isValidElement(child)) {
         return null;
       }
       const childProps = child.props;
-      return /* @__PURE__ */jsxs(Fragment, {
+      const isLabelHorizontal = ["left", "right"].includes(labelPosition);
+      const labelFontSize = isLabelHorizontal ? "md" : "sm";
+      const flexDirectionMap = {
+        top: "column",
+        bottom: "column-reverse",
+        left: "row",
+        right: "row-reverse"
+      };
+      return /* @__PURE__ */jsxs(Flex, {
+        sx: {
+          width: "100%",
+          flexDirection: flexDirectionMap[labelPosition],
+          gap: "sm"
+        },
         children: [label && /* @__PURE__ */jsx3(Label, {
           "aria-disabled": disabled,
           htmlFor: id,
           tooltip,
           onTooltipClick,
+          sx: {
+            fontSize: labelFontSize
+          },
           children: label
-        }), React.createElement(child.type, {
-          id,
-          ...childProps
+        }), /* @__PURE__ */jsx3(Box2, {
+          children: React.createElement(child.type, {
+            id,
+            ...childProps
+          })
         })]
       });
     });
-  }, [controllerReturn, disabled, onTooltipClick, tooltip, id, label, render]);
+  }, [render, controllerReturn, labelPosition, label, disabled, id, tooltip, onTooltipClick]);
   return /* @__PURE__ */jsxs(Flex, {
     sx: {
       flexDirection: "column",
@@ -124,61 +144,29 @@ var FormField = ({
 };
 
 // src/FormFieldCheckbox.tsx
-import { Checkbox, Flex as Flex2, Label as Label2 } from "@ttoss/ui";
-import * as React2 from "react";
-import { useController as useController2 } from "react-hook-form";
-import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Checkbox } from "@ttoss/ui";
+import { jsx as jsx4 } from "react/jsx-runtime";
 var FormFieldCheckbox = ({
   label,
   name,
   sx,
   ...checkboxProps
 }) => {
-  const {
-    field: {
-      onChange,
-      onBlur,
-      value,
-      ref
-    },
-    formState: {
-      errors
-    }
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  } = useController2({
+  return /* @__PURE__ */jsx4(FormField, {
+    label,
+    labelPosition: "right",
     name,
-    defaultValue: false
-  });
-  const uniqueId = React2.useId();
-  const id = checkboxProps.id || `form-field-checkbox-${name}-${uniqueId}`;
-  const error = !!errors[name]?.message;
-  return /* @__PURE__ */jsxs2(Flex2, {
-    sx: {
-      flexDirection: "column",
-      width: "100%",
-      ...sx
-    },
-    children: [/* @__PURE__ */jsx4(Flex2, {
-      sx: {
-        alignItems: "center"
-      },
-      children: /* @__PURE__ */jsxs2(Label2, {
-        "aria-disabled": checkboxProps.disabled,
-        htmlFor: id,
-        children: [/* @__PURE__ */jsx4(Checkbox, {
-          id,
-          ref,
-          checked: value,
-          onChange,
-          onBlur,
-          name,
-          "aria-invalid": error ? "true" : "false",
-          ...checkboxProps
-        }), label]
-      })
-    }), /* @__PURE__ */jsx4(FormErrorMessage, {
-      name
-    })]
+    render: ({
+      field,
+      fieldState
+    }) => {
+      return /* @__PURE__ */jsx4(Checkbox, {
+        ...field,
+        ...checkboxProps,
+        "aria-invalid": !!fieldState.error,
+        sx
+      });
+    }
   });
 };
 
@@ -349,9 +337,9 @@ var FormFieldPassword = ({
 };
 
 // src/FormFieldRadio.tsx
-import { Box as Box2, Flex as Flex3, Label as Label3, Radio } from "@ttoss/ui";
-import { useController as useController3 } from "react-hook-form";
-import { jsx as jsx11, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Box as Box3, Flex as Flex2, Label as Label2, Radio } from "@ttoss/ui";
+import { useController as useController2 } from "react-hook-form";
+import { jsx as jsx11, jsxs as jsxs2 } from "react/jsx-runtime";
 var FormFieldRadio = ({
   label,
   name,
@@ -367,25 +355,25 @@ var FormFieldRadio = ({
       ref
     }
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  } = useController3({
+  } = useController2({
     name,
     defaultValue: ""
   });
-  return /* @__PURE__ */jsxs3(Flex3, {
+  return /* @__PURE__ */jsxs2(Flex2, {
     sx: {
       flexDirection: "column",
       width: "100%",
       ...sx
     },
-    children: [label && /* @__PURE__ */jsx11(Label3, {
+    children: [label && /* @__PURE__ */jsx11(Label2, {
       sx: {
         marginBottom: "md"
       },
       children: label
-    }), /* @__PURE__ */jsx11(Box2, {
+    }), /* @__PURE__ */jsx11(Box3, {
       children: options.map(option => {
         const id = `form-field-radio-${name}-${option.value}`;
-        return /* @__PURE__ */jsxs3(Label3, {
+        return /* @__PURE__ */jsxs2(Label2, {
           htmlFor: id,
           children: [/* @__PURE__ */jsx11(Radio, {
             ref,
@@ -444,9 +432,36 @@ var FormFieldSelect = ({
   });
 };
 
+// src/FormFieldSwitch.tsx
+import { Switch } from "@ttoss/ui";
+import { jsx as jsx13 } from "react/jsx-runtime";
+var FormFieldSwitch = ({
+  label,
+  name,
+  sx,
+  ...switchProps
+}) => {
+  return /* @__PURE__ */jsx13(FormField, {
+    label,
+    labelPosition: "right",
+    name,
+    render: ({
+      field,
+      fieldState
+    }) => {
+      return /* @__PURE__ */jsx13(Switch, {
+        ...field,
+        ...switchProps,
+        "aria-invalid": !!fieldState.error,
+        sx
+      });
+    }
+  });
+};
+
 // src/FormFieldTextarea.tsx
 import { Textarea } from "@ttoss/ui";
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx14 } from "react/jsx-runtime";
 var FormFieldTextarea = ({
   label,
   name,
@@ -454,7 +469,7 @@ var FormFieldTextarea = ({
   ...textareaProps
 }) => {
   const id = `form-field-textarea-${name}`;
-  return /* @__PURE__ */jsx13(FormField, {
+  return /* @__PURE__ */jsx14(FormField, {
     label,
     name,
     id,
@@ -463,7 +478,7 @@ var FormFieldTextarea = ({
       field,
       fieldState
     }) => {
-      return /* @__PURE__ */jsx13(Textarea, {
+      return /* @__PURE__ */jsx14(Textarea, {
         ...field,
         ...textareaProps,
         "aria-invalid": fieldState.error ? "true" : void 0
@@ -473,10 +488,10 @@ var FormFieldTextarea = ({
 };
 
 // src/FormGroup.tsx
-import * as React3 from "react";
-import { Box as Box3, Flex as Flex4, Text } from "@ttoss/ui";
-import { jsx as jsx14, jsxs as jsxs4 } from "react/jsx-runtime";
-var FormGroupLevelsManagerContext = React3.createContext({
+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,
   registerChild: () => {
     return null;
@@ -485,13 +500,13 @@ var FormGroupLevelsManagerContext = React3.createContext({
 var FormGroupLevelsManager = ({
   children
 }) => {
-  const [levelsLength, setLevelsLength] = React3.useState(0);
-  const registerChild = React3.useCallback(level => {
+  const [levelsLength, setLevelsLength] = React2.useState(0);
+  const registerChild = React2.useCallback(level => {
     if (level + 1 > levelsLength) {
       setLevelsLength(level + 1);
     }
   }, [levelsLength]);
-  return /* @__PURE__ */jsx14(FormGroupLevelsManagerContext.Provider, {
+  return /* @__PURE__ */jsx15(FormGroupLevelsManagerContext.Provider, {
     value: {
       levelsLength,
       registerChild
@@ -499,14 +514,14 @@ var FormGroupLevelsManager = ({
     children
   });
 };
-var FormGroupContext = React3.createContext({});
+var FormGroupContext = React2.createContext({});
 var useFormGroup = () => {
   const {
     parentLevel
-  } = React3.useContext(FormGroupContext);
+  } = React2.useContext(FormGroupContext);
   const {
     levelsLength
-  } = React3.useContext(FormGroupLevelsManagerContext);
+  } = React2.useContext(FormGroupLevelsManagerContext);
   return {
     level: parentLevel,
     levelsLength
@@ -524,8 +539,8 @@ var FormGroupWrapper = ({
   } = useFormGroup();
   const {
     registerChild
-  } = React3.useContext(FormGroupLevelsManagerContext);
-  React3.useEffect(() => {
+  } = React2.useContext(FormGroupLevelsManagerContext);
+  React2.useEffect(() => {
     if (typeof level === "number") {
       registerChild(level);
     }
@@ -535,7 +550,7 @@ var FormGroupWrapper = ({
     gap: "md",
     width: "100%"
   };
-  return /* @__PURE__ */jsxs4(Box3, {
+  return /* @__PURE__ */jsxs3(Box4, {
     "aria-level": level,
     ...boxProps,
     sx: {
@@ -543,21 +558,21 @@ var FormGroupWrapper = ({
       marginBottom: "lg",
       ...boxProps.sx
     },
-    children: [title && /* @__PURE__ */jsx14(Box3, {
+    children: [title && /* @__PURE__ */jsx15(Box4, {
       sx: {
         marginBottom: "md"
       },
-      children: /* @__PURE__ */jsx14(Text, {
+      children: /* @__PURE__ */jsx15(Text, {
         sx: {
           fontSize: "2xl",
           fontWeight: "bold"
         },
         children: title
       })
-    }), /* @__PURE__ */jsx14(Flex4, {
+    }), /* @__PURE__ */jsx15(Flex3, {
       sx: childrenContainerSx,
       children
-    }), name && /* @__PURE__ */jsx14(FormErrorMessage, {
+    }), name && /* @__PURE__ */jsx15(FormErrorMessage, {
       name
     })]
   });
@@ -567,15 +582,15 @@ var FormGroup = props => {
     level
   } = useFormGroup();
   const currentLevel = level === void 0 ? 0 : level + 1;
-  return /* @__PURE__ */jsx14(FormGroupContext.Provider, {
+  return /* @__PURE__ */jsx15(FormGroupContext.Provider, {
     value: {
       parentLevel: currentLevel
     },
-    children: currentLevel === 0 ? /* @__PURE__ */jsx14(FormGroupLevelsManager, {
-      children: /* @__PURE__ */jsx14(FormGroupWrapper, {
+    children: currentLevel === 0 ? /* @__PURE__ */jsx15(FormGroupLevelsManager, {
+      children: /* @__PURE__ */jsx15(FormGroupWrapper, {
         ...props
       })
-    }) : /* @__PURE__ */jsx14(FormGroupWrapper, {
+    }) : /* @__PURE__ */jsx15(FormGroupWrapper, {
       ...props
     })
   });
@@ -645,7 +660,7 @@ import * as yup from "yup";
 // src/Brazil/FormFieldCNPJ.tsx
 import { Input as Input4 } from "@ttoss/ui";
 import { PatternFormat as PatternFormat2 } from "react-number-format";
-import { jsx as jsx15 } from "react/jsx-runtime";
+import { jsx as jsx16 } from "react/jsx-runtime";
 var isCnpjValid = cnpj => {
   if (cnpj?.length != 14) {
     return false;
@@ -689,13 +704,13 @@ var FormFieldCNPJ = ({
   name,
   ...patternFormatProps
 }) => {
-  return /* @__PURE__ */jsx15(FormField, {
+  return /* @__PURE__ */jsx16(FormField, {
     name,
     label,
     render: ({
       field
     }) => {
-      return /* @__PURE__ */jsx15(PatternFormat2, {
+      return /* @__PURE__ */jsx16(PatternFormat2, {
         name: field.name,
         value: field.value,
         onBlur: field.onBlur,
@@ -732,6 +747,6 @@ import * as yup2 from "yup";
 
 // src/index.ts
 import { yupResolver } from "@hookform/resolvers/yup";
-import { Controller, FormProvider as FormProvider2, useController as useController4, useFieldArray, useForm, useFormContext as useFormContext2, useFormState, useWatch } from "react-hook-form";
+import { Controller, FormProvider as FormProvider2, useController as useController3, 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, FormFieldTextarea, useFormGroup, FormGroup, isCnpjValid, FormFieldCNPJ, yup2 as yup, yupResolver, Controller, FormProvider2 as FormProvider, useController4 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, useController3 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, FormFieldTextarea, FormGroup, FormProvider, useController, useFieldArray, useForm, useFormContext, useFormGroup, useFormState, useWatch, yup, yupResolver } from "./chunk-GB65RGLC.js";
-export { Controller, Form, FormErrorMessage, FormField, FormFieldCheckbox, FormFieldCreditCardNumber, FormFieldCurrencyInput, FormFieldInput, FormFieldNumericFormat, FormFieldPassword, FormFieldPatternFormat, FormFieldRadio, FormFieldSelect, FormFieldTextarea, FormGroup, FormProvider, useController, useFieldArray, useForm, useFormContext, useFormGroup, useFormState, useWatch, yup, yupResolver };
+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";
+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, TextareaProps } from '@ttoss/ui';
+import { BoxProps, SxProp, CheckboxProps, InputProps, InputPasswordProps, RadioProps, SelectProps, SwitchProps, TextareaProps } from '@ttoss/ui';
 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';
@@ -24,7 +24,8 @@ 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?: string;
+    label?: React.ReactNode;
+    labelPosition?: 'top' | 'bottom' | 'left' | 'right';
     id?: string;
     name: TName;
     defaultValue?: FieldPathValue<TFieldValues, TName>;
@@ -35,7 +36,7 @@ type FormFieldProps<TFieldValues extends FieldValues = FieldValues, TName extend
 type FormFieldCompleteProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = {
     render: (props: UseControllerReturn<TFieldValues, TName>) => React.ReactElement;
 } & FormFieldProps<TFieldValues, TName>;
-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 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 FormFieldCheckbox: <TFieldValues extends FieldValues = FieldValues>({ label, name, sx, ...checkboxProps }: {
     label?: React.ReactNode;
@@ -88,6 +89,11 @@ declare const FormFieldRadio: <TFieldValues extends FieldValues = FieldValues>({
 type FormFieldSelectProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = Omit<SelectProps, 'defaultValue'> & FormFieldProps<TFieldValues, 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;
+    name: TName;
+} & SwitchProps) => react_jsx_runtime.JSX.Element;
+
 declare const FormFieldTextarea: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ label, name, sx, ...textareaProps }: {
     label?: string;
     name: TName;
@@ -104,4 +110,4 @@ type FormGroupProps = {
 } & BoxProps;
 declare const FormGroup: (props: FormGroupProps) => react_jsx_runtime.JSX.Element;
 
-export { Form, FormErrorMessage, FormField, FormFieldCheckbox, FormFieldCreditCardNumber, FormFieldCurrencyInput, FormFieldInput, FormFieldNumericFormat, FormFieldPassword, FormFieldRadio, FormFieldSelect, FormFieldTextarea, FormGroup, useFormGroup };
+export { Form, FormErrorMessage, FormField, FormFieldCheckbox, FormFieldCreditCardNumber, FormFieldCurrencyInput, FormFieldInput, FormFieldNumericFormat, FormFieldPassword, FormFieldRadio, FormFieldSelect, FormFieldSwitch, FormFieldTextarea, FormGroup, useFormGroup };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/forms",
-  "version": "0.27.0",
+  "version": "0.28.0",
   "license": "MIT",
   "author": "ttoss",
   "contributors": [
@@ -39,8 +39,8 @@
   },
   "peerDependencies": {
     "react": ">=16.8.0",
-    "@ttoss/react-i18n": "^2.0.9",
-    "@ttoss/ui": "^5.0.15"
+    "@ttoss/ui": "^5.1.0",
+    "@ttoss/react-i18n": "^2.0.9"
   },
   "devDependencies": {
     "@types/jest": "^29.5.14",
@@ -51,10 +51,10 @@
     "tsup": "^8.3.5",
     "yup": "^1.6.1",
     "@ttoss/config": "^1.35.2",
-    "@ttoss/react-icons": "^0.4.9",
     "@ttoss/i18n-cli": "^0.7.26",
+    "@ttoss/react-icons": "^0.4.9",
     "@ttoss/react-i18n": "^2.0.9",
-    "@ttoss/ui": "^5.0.15",
+    "@ttoss/ui": "^5.1.0",
     "@ttoss/test-utils": "^2.1.22"
   },
   "publishConfig": {