@ttoss/forms 0.35.3 → 0.36.1

package/dist/esm/chunk-QJQFXN4B.js

@@ -0,0 +1,442 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+import * as React from 'react';
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", {
+  value,
+  configurable: true
+});
+
+// src/FormErrorMessage.tsx
+import { ErrorMessage } from "@hookform/error-message";
+import { FormattedMessage } from "@ttoss/react-i18n";
+import { HelpText } from "@ttoss/ui";
+import { useFormContext } from "react-hook-form";
+var isMessageDescriptor = /* @__PURE__ */__name(possibleMessageDescriptor => {
+  return possibleMessageDescriptor !== void 0 && possibleMessageDescriptor.defaultMessage !== void 0;
+}, "isMessageDescriptor");
+var FormErrorMessage = /* @__PURE__ */__name(({
+  name,
+  disabled
+}) => {
+  const {
+    formState: {
+      errors
+    }
+  } = useFormContext();
+  return /* @__PURE__ */React.createElement(ErrorMessage, {
+    name,
+    errors,
+    render: /* @__PURE__ */__name(({
+      message
+    }) => {
+      return /* @__PURE__ */React.createElement(HelpText, {
+        negative: true,
+        disabled
+      }, (() => {
+        if (typeof message === "string") {
+          return message;
+        }
+        if (isMessageDescriptor(message)) {
+          return /* @__PURE__ */React.createElement(FormattedMessage, message);
+        }
+        return JSON.stringify(message);
+      })());
+    }, "render")
+  });
+}, "FormErrorMessage");
+
+// src/FormField.tsx
+import { Checkbox as Checkbox2, Flex as Flex2, Label as Label2, Switch } from "@ttoss/ui";
+import * as React3 from "react";
+import { useController as useController2, useFormContext as useFormContext2 } from "react-hook-form";
+
+// src/AuxiliaryCheckbox.tsx
+import { Checkbox, Flex, Label } from "@ttoss/ui";
+import * as React2 from "react";
+import { useController } from "react-hook-form";
+var AuxiliaryCheckbox = /* @__PURE__ */__name(({
+  label,
+  name,
+  defaultValue = false,
+  rules,
+  disabled
+}) => {
+  const uniqueId = React2.useId();
+  const id = `auxiliary-checkbox-${name}-${uniqueId}`;
+  const {
+    field
+  } = useController({
+    name,
+    defaultValue,
+    rules
+  });
+  const isDisabled = disabled ?? field.disabled;
+  const {
+    value,
+    ...fieldWithoutValue
+  } = field;
+  return /* @__PURE__ */React2.createElement(Label, {
+    "aria-disabled": isDisabled,
+    htmlFor: id,
+    sx: {
+      flexDirection: "row",
+      alignItems: "center",
+      cursor: isDisabled ? "not-allowed" : "pointer"
+    }
+  }, /* @__PURE__ */React2.createElement(Flex, {
+    sx: {
+      position: "relative"
+    }
+  }, /* @__PURE__ */React2.createElement(Checkbox, {
+    id,
+    ...fieldWithoutValue,
+    checked: value,
+    disabled: isDisabled
+  })), label);
+}, "AuxiliaryCheckbox");
+
+// src/FormField.tsx
+var FormField = /* @__PURE__ */__name(({
+  label,
+  id: idProp,
+  name,
+  defaultValue,
+  disabled: propsDisabled,
+  labelTooltip,
+  sx,
+  css,
+  render,
+  warning,
+  rules,
+  auxiliaryCheckbox
+}) => {
+  const controllerReturn = useController2({
+    name,
+    defaultValue,
+    rules
+  });
+  const {
+    formState: {
+      errors
+    }
+  } = useFormContext2();
+  const disabled = propsDisabled ?? controllerReturn.field.disabled;
+  const hasError = !!errors[name];
+  const hasAuxiliaryError = auxiliaryCheckbox ? !!errors[auxiliaryCheckbox.name] : false;
+  const uniqueId = React3.useId();
+  const id = idProp || `form-field-${name}-${uniqueId}`;
+  const isCheckboxOrSwitch = /* @__PURE__ */__name(element => {
+    return [Checkbox2, Switch].some(component => {
+      return element.type === component;
+    });
+  }, "isCheckboxOrSwitch");
+  const controllerReturnWithDisabled = React3.useMemo(() => {
+    return {
+      ...controllerReturn,
+      field: {
+        ...controllerReturn.field,
+        disabled
+      }
+    };
+  }, [controllerReturn, disabled]);
+  const memoizedRender = React3.useMemo(() => {
+    return React3.Children.map(render(controllerReturnWithDisabled), child => {
+      if (! /* @__PURE__ */React3.isValidElement(child)) {
+        return null;
+      }
+      const mergeProps = {
+        id,
+        ...(warning && {
+          trailingIcon: "warning-alt"
+        })
+      };
+      if (label && isCheckboxOrSwitch(child)) {
+        return /* @__PURE__ */React3.createElement(Label2, {
+          "aria-disabled": disabled,
+          htmlFor: id,
+          tooltip: labelTooltip,
+          sx: {
+            flexDirection: "row",
+            alignItems: "center",
+            cursor: disabled ? "not-allowed" : "pointer"
+          }
+        }, /* @__PURE__ */React3.createElement(Flex2, {
+          sx: {
+            position: "relative"
+          }
+        }, /* @__PURE__ */React3.cloneElement(child, mergeProps)), label);
+      }
+      return /* @__PURE__ */React3.createElement(Flex2, {
+        sx: {
+          width: "full",
+          flexDirection: "column",
+          gap: "2"
+        }
+      }, label && /* @__PURE__ */React3.createElement(Label2, {
+        "aria-disabled": disabled,
+        htmlFor: id,
+        tooltip: labelTooltip
+      }, label), /* @__PURE__ */React3.cloneElement(child, mergeProps));
+    });
+  }, [render, controllerReturnWithDisabled, label, disabled, id, labelTooltip, warning]);
+  const errorNameToDisplay = hasError ? name : hasAuxiliaryError && auxiliaryCheckbox ? auxiliaryCheckbox.name : name;
+  return /* @__PURE__ */React3.createElement(Flex2, {
+    sx: {
+      flexDirection: "column",
+      width: "100%",
+      gap: "1",
+      ...sx
+    },
+    css
+  }, memoizedRender, auxiliaryCheckbox && /* @__PURE__ */React3.createElement(AuxiliaryCheckbox, {
+    ...auxiliaryCheckbox,
+    disabled
+  }), /* @__PURE__ */React3.createElement(FormErrorMessage, {
+    name: errorNameToDisplay
+  }), warning && !hasError && /* @__PURE__ */React3.createElement(Flex2, {
+    className: "warning",
+    sx: {
+      color: "feedback.text.caution.default",
+      fontSize: "sm",
+      gap: "2",
+      paddingBottom: "1",
+      alignItems: "center"
+    }
+  }, warning));
+}, "FormField");
+
+// src/FormFieldPatternFormat.tsx
+import { Input } from "@ttoss/ui";
+import { PatternFormat } from "react-number-format";
+var FormFieldPatternFormat = /* @__PURE__ */__name(({
+  disabled,
+  ...props
+}) => {
+  const {
+    label,
+    name,
+    labelTooltip,
+    warning,
+    sx,
+    css,
+    rules,
+    id,
+    defaultValue,
+    leadingIcon,
+    trailingIcon,
+    auxiliaryCheckbox,
+    onBlur,
+    onValueChange,
+    ...patternFormatProps
+  } = props;
+  return /* @__PURE__ */React.createElement(FormField, {
+    id,
+    label,
+    name,
+    labelTooltip,
+    warning,
+    sx,
+    css,
+    defaultValue,
+    rules,
+    disabled,
+    auxiliaryCheckbox,
+    render: /* @__PURE__ */__name(({
+      field,
+      fieldState
+    }) => {
+      return /* @__PURE__ */React.createElement(PatternFormat, {
+        ...patternFormatProps,
+        name: field.name,
+        value: field.value,
+        onBlur: /* @__PURE__ */__name(e => {
+          field.onBlur();
+          onBlur?.(e);
+        }, "onBlur"),
+        onValueChange: /* @__PURE__ */__name((values, sourceInfo) => {
+          field.onChange(values.value);
+          onValueChange?.(values, sourceInfo);
+        }, "onValueChange"),
+        customInput: Input,
+        leadingIcon,
+        trailingIcon,
+        disabled: disabled ?? field.disabled,
+        "aria-invalid": fieldState.error ? "true" : void 0
+      });
+    }, "render")
+  });
+}, "FormFieldPatternFormat");
+
+// src/Brazil/FormFieldCNPJ.tsx
+import { Input as Input2 } from "@ttoss/ui";
+import { PatternFormat as PatternFormat2 } from "react-number-format";
+var isCnpjValid = /* @__PURE__ */__name(cnpj => {
+  if (cnpj?.length != 14) {
+    return false;
+  }
+  if (cnpj == "00000000000000" || cnpj == "11111111111111" || cnpj == "22222222222222" || cnpj == "33333333333333" || cnpj == "44444444444444" || cnpj == "55555555555555" || cnpj == "66666666666666" || cnpj == "77777777777777" || cnpj == "88888888888888" || cnpj == "99999999999999") {
+    return false;
+  }
+  let size = cnpj.length - 2;
+  let numbers = cnpj.substring(0, size);
+  const digits = cnpj.substring(size);
+  let soma = 0;
+  let pos = size - 7;
+  for (let i = size; i >= 1; i--) {
+    soma += numbers.charAt(size - i) * pos--;
+    if (pos < 2) {
+      pos = 9;
+    }
+  }
+  let result = soma % 11 < 2 ? 0 : 11 - soma % 11;
+  if (result != digits.charAt(0)) {
+    return false;
+  }
+  size = size + 1;
+  numbers = cnpj.substring(0, size);
+  soma = 0;
+  pos = size - 7;
+  for (let i = size; i >= 1; i--) {
+    soma += numbers.charAt(size - i) * pos--;
+    if (pos < 2) {
+      pos = 9;
+    }
+  }
+  result = soma % 11 < 2 ? 0 : 11 - soma % 11;
+  if (result != digits.charAt(1)) {
+    return false;
+  }
+  return true;
+}, "isCnpjValid");
+var FormFieldCNPJ = /* @__PURE__ */__name(({
+  disabled,
+  ...props
+}) => {
+  const {
+    label,
+    name,
+    labelTooltip,
+    warning,
+    sx,
+    css,
+    rules,
+    id,
+    defaultValue,
+    placeholder = "12.345.678/0000-00",
+    auxiliaryCheckbox,
+    ...patternFormatProps
+  } = props;
+  return /* @__PURE__ */React.createElement(FormField, {
+    id,
+    label,
+    name,
+    labelTooltip,
+    warning,
+    sx,
+    css,
+    defaultValue,
+    rules,
+    disabled,
+    auxiliaryCheckbox,
+    render: /* @__PURE__ */__name(({
+      field
+    }) => {
+      return /* @__PURE__ */React.createElement(PatternFormat2, {
+        ...patternFormatProps,
+        name: field.name,
+        value: field.value,
+        onBlur: field.onBlur,
+        onValueChange: /* @__PURE__ */__name(values => {
+          field.onChange(values.value);
+        }, "onValueChange"),
+        format: "##.###.###/####-##",
+        customInput: Input2,
+        placeholder,
+        disabled: disabled ?? field.disabled
+      });
+    }, "render")
+  });
+}, "FormFieldCNPJ");
+
+// src/Brazil/FormFieldCPF.tsx
+import { Input as Input3 } from "@ttoss/ui";
+import { PatternFormat as PatternFormat3 } from "react-number-format";
+var isCpfValid = /* @__PURE__ */__name(cpf => {
+  if (cpf?.length != 11) {
+    return false;
+  }
+  if (cpf == "00000000000" || cpf == "11111111111" || cpf == "22222222222" || cpf == "33333333333" || cpf == "44444444444" || cpf == "55555555555" || cpf == "66666666666" || cpf == "77777777777" || cpf == "88888888888" || cpf == "99999999999") {
+    return false;
+  }
+  let soma = 0;
+  for (let i = 0; i < 9; i++) {
+    soma += parseInt(cpf.charAt(i)) * (10 - i);
+  }
+  let resto = soma * 10 % 11;
+  if (resto === 10 || resto === 11) {
+    resto = 0;
+  }
+  if (resto != parseInt(cpf.charAt(9))) {
+    return false;
+  }
+  soma = 0;
+  for (let i = 0; i < 10; i++) {
+    soma += parseInt(cpf.charAt(i)) * (11 - i);
+  }
+  resto = soma * 10 % 11;
+  if (resto === 10 || resto === 11) {
+    resto = 0;
+  }
+  if (resto != parseInt(cpf.charAt(10))) {
+    return false;
+  }
+  return true;
+}, "isCpfValid");
+var FormFieldCPF = /* @__PURE__ */__name(({
+  disabled,
+  ...props
+}) => {
+  const {
+    label,
+    name,
+    labelTooltip,
+    warning,
+    sx,
+    css,
+    rules,
+    id,
+    defaultValue,
+    placeholder = "123.456.789-00",
+    ...patternFormatProps
+  } = props;
+  return /* @__PURE__ */React.createElement(FormField, {
+    id,
+    label,
+    name,
+    labelTooltip,
+    warning,
+    sx,
+    css,
+    defaultValue,
+    rules,
+    disabled,
+    render: /* @__PURE__ */__name(({
+      field
+    }) => {
+      return /* @__PURE__ */React.createElement(PatternFormat3, {
+        ...patternFormatProps,
+        name: field.name,
+        value: field.value,
+        onBlur: field.onBlur,
+        onValueChange: /* @__PURE__ */__name(values => {
+          field.onChange(values.value);
+        }, "onValueChange"),
+        format: "###.###.###-##",
+        customInput: Input3,
+        placeholder,
+        disabled: disabled ?? field.disabled
+      });
+    }, "render")
+  });
+}, "FormFieldCPF");
+export { __name, FormErrorMessage, FormField, FormFieldPatternFormat, isCnpjValid, FormFieldCNPJ, isCpfValid, FormFieldCPF };

package/dist/esm/index.js

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

package/dist/index.d.ts

@@ -0,0 +1,120 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { BoxProps, CheckboxProps, InputProps, InputPasswordProps, RadioProps, ThemeUIStyleObject, SelectProps, SwitchProps, TextareaProps } from '@ttoss/ui';
+import * as React from 'react';
+import { FieldValues, FormProviderProps, FieldName, FieldPath } from 'react-hook-form';
+export * from 'react-hook-form';
+export { Controller, FormProvider, useController, useFieldArray, useForm, useFormContext, useFormState, useWatch } from 'react-hook-form';
+import { F as FormFieldProps, a as FormFieldPatternFormatProps } from './FormFieldPatternFormat-D5CI6eUA.js';
+export { b as FormField, c as FormFieldPatternFormat } from './FormFieldPatternFormat-D5CI6eUA.js';
+import { NumericFormatProps } from 'react-number-format';
+import { DateRange } from '@ttoss/components/DatePicker';
+import './typings.d-BZ6kUiQ4.js';
+import * as yup from 'yup';
+export { yup };
+export { yupResolver } from '@hookform/resolvers/yup';
+
+declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues = TFieldValues>({ children, onSubmit, sx, ...formMethods }: {
+    children?: React.ReactNode;
+    onSubmit?: (data: TTransformedValues) => Promise<void> | void;
+    sx?: BoxProps["sx"];
+} & FormProviderProps<TFieldValues, TContext, TTransformedValues>) => react_jsx_runtime.JSX.Element;
+
+declare const FormErrorMessage: <TFieldValues extends FieldValues = FieldValues>({ name, disabled, }: {
+    name: FieldName<TFieldValues>;
+    disabled?: boolean;
+}) => react_jsx_runtime.JSX.Element;
+
+type FormFieldCheckboxProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = Omit<FormFieldProps<TFieldValues, TName>, 'defaultValue'> & Omit<CheckboxProps, 'name' | 'defaultValue'> & {
+    defaultValue?: boolean;
+};
+declare const FormFieldCheckbox: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ defaultValue, disabled, ...props }: FormFieldCheckboxProps<TFieldValues, TName>) => react_jsx_runtime.JSX.Element;
+
+type FormFieldCreditCardNumberProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = FormFieldPatternFormatProps<TFieldValues, TName>;
+declare const FormFieldCreditCardNumber: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ format, placeholder, ...formFieldPatternFormatProps }: FormFieldCreditCardNumberProps<TFieldValues, TName>) => react_jsx_runtime.JSX.Element;
+
+type FormFieldNumericFormatProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = FormFieldProps<TFieldValues, TName> & Omit<NumericFormatProps, 'name'> & Pick<InputProps, 'leadingIcon' | 'trailingIcon'>;
+declare const FormFieldNumericFormat: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ disabled, ...props }: FormFieldNumericFormatProps<TFieldValues, TName>) => react_jsx_runtime.JSX.Element;
+
+type FormFieldCurrencyInputProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = FormFieldNumericFormatProps<TFieldValues, TName> & {
+    prefix: string;
+};
+declare const FormFieldCurrencyInput: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ prefix, decimalSeparator, thousandSeparator, ...formFieldNumericFormatProps }: FormFieldCurrencyInputProps<TFieldValues, TName>) => react_jsx_runtime.JSX.Element;
+
+interface DateRangePreset {
+    label: string;
+    getValue: () => DateRange;
+}
+type FormFieldDatePickerProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = FormFieldProps<TFieldValues, TName> & {
+    presets?: DateRangePreset[];
+};
+declare const FormFieldDatePicker: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ disabled, ...props }: FormFieldDatePickerProps<TFieldValues, TName>) => react_jsx_runtime.JSX.Element;
+
+type FormFieldInputProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = FormFieldProps<TFieldValues, TName> & Omit<InputProps, 'name'>;
+declare const FormFieldInput: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ defaultValue, disabled, ...props }: FormFieldInputProps<TFieldValues, TName>) => react_jsx_runtime.JSX.Element;
+
+type FormFieldPasswordProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = FormFieldProps<TFieldValues, TName> & Omit<InputPasswordProps, 'name'>;
+declare const FormFieldPassword: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ defaultValue, disabled, ...props }: FormFieldPasswordProps<TFieldValues, TName>) => react_jsx_runtime.JSX.Element;
+
+type FormRadioOption$2 = {
+    value: string | number;
+    label: string;
+};
+type FormFieldRadioProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = FormFieldProps<TFieldValues, TName> & Omit<RadioProps, 'name'> & {
+    options: FormRadioOption$2[];
+};
+declare const FormFieldRadio: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ disabled, options, ...props }: FormFieldRadioProps<TFieldValues, TName>) => react_jsx_runtime.JSX.Element;
+
+type FormRadioOption$1 = {
+    value: string | number;
+    label: string;
+    description?: string;
+};
+type FormFieldRadioCardProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = FormFieldProps<TFieldValues, TName> & Omit<RadioProps, 'name'> & {
+    options: FormRadioOption$1[];
+    direction?: 'column' | 'row';
+    width?: string;
+};
+declare const FormFieldRadioCard: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ disabled, ...props }: FormFieldRadioCardProps<TFieldValues, TName>) => react_jsx_runtime.JSX.Element;
+
+type FormRadioOption = {
+    value: string | number;
+    label: string;
+    description?: string;
+    icon?: React.ComponentType<{
+        size?: number;
+        className?: string;
+    }>;
+    tag?: {
+        label: string;
+        variant?: 'accent' | 'positive' | 'caution' | 'muted' | 'negative' | 'primary' | 'secondary' | 'default';
+        sx?: ThemeUIStyleObject;
+    };
+};
+type FormFieldRadioCardIconyProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = FormFieldProps<TFieldValues, TName> & {
+    options: FormRadioOption[];
+    direction?: 'column' | 'row';
+    width?: string;
+};
+declare const FormFieldRadioCardIcony: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ disabled, ...props }: FormFieldRadioCardIconyProps<TFieldValues, TName>) => react_jsx_runtime.JSX.Element;
+
+type FormFieldSelectProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = FormFieldProps<TFieldValues, TName> & Omit<SelectProps, 'name' | 'defaultValue'>;
+declare const FormFieldSelect: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ disabled, ...props }: FormFieldSelectProps<TFieldValues, TName>) => react_jsx_runtime.JSX.Element;
+
+type FormFieldSwitchProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = FormFieldProps<TFieldValues, TName> & Omit<SwitchProps, 'name'>;
+declare const FormFieldSwitch: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ disabled, ...props }: FormFieldSwitchProps<TFieldValues, TName>) => react_jsx_runtime.JSX.Element;
+
+type FormFieldTextareaProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = FormFieldProps<TFieldValues, TName> & Omit<TextareaProps, 'name'>;
+declare const FormFieldTextarea: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ defaultValue, disabled, ...props }: FormFieldTextareaProps<TFieldValues, TName>) => react_jsx_runtime.JSX.Element;
+
+declare const useFormGroup: () => {
+    level: number | undefined;
+    levelsLength: number;
+};
+type FormGroupProps = {
+    name?: string;
+    title?: string;
+    direction?: 'column' | 'row';
+} & BoxProps;
+declare const FormGroup: (props: FormGroupProps) => react_jsx_runtime.JSX.Element;
+
+export { type DateRangePreset, Form, FormErrorMessage, FormFieldCheckbox, FormFieldCreditCardNumber, FormFieldCurrencyInput, FormFieldDatePicker, FormFieldInput, FormFieldNumericFormat, FormFieldPassword, FormFieldProps, FormFieldRadio, FormFieldRadioCard, FormFieldRadioCardIcony, FormFieldSelect, FormFieldSwitch, FormFieldTextarea, FormGroup, type FormRadioOption, useFormGroup };

package/dist/typings.d-BZ6kUiQ4.d.ts

@@ -0,0 +1,13 @@
+import { Maybe, AnyObject, Flags, Schema } from 'yup';
+
+declare module 'yup' {
+  interface StringSchema<
+    TType extends Maybe<string> = string | undefined,
+    TContext extends AnyObject = AnyObject,
+    TDefault = undefined,
+    TFlags extends Flags = '',
+  > extends Schema<TType, TContext, TDefault, TFlags> {
+    cnpj(): this;
+    cpf(): this;
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/forms",
-  "version": "0.35.3",
+  "version": "0.36.1",
   "license": "MIT",
   "author": "ttoss",
   "contributors": [
@@ -39,9 +39,9 @@
   },
   "peerDependencies": {
     "react": ">=16.8.0",
-    "@ttoss/components": "^2.10.2",
-    "@ttoss/react-i18n": "^2.0.25",
-    "@ttoss/ui": "^6.1.0"
+    "@ttoss/ui": "^6.2.0",
+    "@ttoss/components": "^2.11.0",
+    "@ttoss/react-i18n": "^2.0.25"
   },
   "devDependencies": {
     "@types/jest": "^30.0.0",
@@ -51,13 +51,13 @@
     "react-error-boundary": "^6.0.0",
     "tsup": "^8.5.1",
     "yup": "^1.7.1",
-    "@ttoss/components": "^2.10.2",
     "@ttoss/config": "^1.35.12",
+    "@ttoss/components": "^2.11.0",
     "@ttoss/i18n-cli": "^0.7.38",
     "@ttoss/react-i18n": "^2.0.25",
     "@ttoss/react-icons": "^0.5.6",
     "@ttoss/test-utils": "^4.0.2",
-    "@ttoss/ui": "^6.1.0"
+    "@ttoss/ui": "^6.2.0"
   },
   "publishConfig": {
     "access": "public",