@ttoss/forms 0.31.4 → 0.31.6

package/dist/esm/chunk-HIARJN6N.js

@@ -0,0 +1,972 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", {
+  value,
+  configurable: true
+});
+
+// src/Form.tsx
+import { Box } from "@ttoss/ui";
+import * as React2 from "react";
+import { FormProvider } from "react-hook-form";
+var Form = /* @__PURE__ */__name(({
+  children,
+  onSubmit,
+  sx,
+  ...formMethods
+}) => {
+  return /* @__PURE__ */React2.createElement(FormProvider, formMethods, /* @__PURE__ */React2.createElement(Box, {
+    as: "form",
+    variant: "forms.form",
+    onSubmit: formMethods.handleSubmit(data => {
+      return onSubmit?.(data);
+    }),
+    sx
+  }, children));
+}, "Form");
+
+// 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, Flex, Label, Switch, Tooltip } from "@ttoss/ui";
+import * as React3 from "react";
+import { useController, useFormContext as useFormContext2 } from "react-hook-form";
+var FormField = /* @__PURE__ */__name(({
+  label,
+  id: idProp,
+  name,
+  defaultValue,
+  disabled,
+  tooltip,
+  inputTooltip,
+  sx,
+  css,
+  render,
+  warning
+}) => {
+  const controllerReturn = useController({
+    name,
+    defaultValue
+  });
+  const {
+    formState: {
+      errors
+    }
+  } = useFormContext2();
+  const hasError = !!errors[name];
+  const uniqueId = React3.useId();
+  const id = idProp || `form-field-${name}-${uniqueId}`;
+  const tooltipId = `${id}-tooltip`;
+  const [showInputTooltip, setShowInputTooltip] = React3.useState(false);
+  const inputRef = React3.useRef(null);
+  React3.useEffect(() => {
+    if (!inputTooltip) return;
+    const handleClickOutside = /* @__PURE__ */__name(event => {
+      if (inputRef.current && !inputRef.current.contains(event.target)) {
+        setShowInputTooltip(false);
+      }
+    }, "handleClickOutside");
+    const handleEscapeKey = /* @__PURE__ */__name(event => {
+      if (event.key === "Escape") {
+        setShowInputTooltip(false);
+      }
+    }, "handleEscapeKey");
+    if (showInputTooltip) {
+      document.addEventListener("mousedown", handleClickOutside);
+      document.addEventListener("keydown", handleEscapeKey);
+    }
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("keydown", handleEscapeKey);
+    };
+  }, [showInputTooltip, inputTooltip]);
+  const memoizedRender = React3.useMemo(() => {
+    return React3.Children.map(render(controllerReturn), child => {
+      if (! /* @__PURE__ */React3.isValidElement(child)) {
+        return null;
+      }
+      const childProps = child.props;
+      const inputProps = {
+        ...childProps,
+        ref: inputRef,
+        onClick: /* @__PURE__ */__name(e => {
+          childProps.onClick?.(e);
+          if (inputTooltip) {
+            setShowInputTooltip(true);
+          }
+        }, "onClick"),
+        onFocus: /* @__PURE__ */__name(e => {
+          childProps.onFocus?.(e);
+          if (inputTooltip && !inputTooltip.openOnClick) {
+            setShowInputTooltip(true);
+          }
+        }, "onFocus"),
+        onBlur: /* @__PURE__ */__name(e => {
+          childProps.onBlur?.(e);
+          if (inputTooltip && !inputTooltip.openOnClick) {
+            setShowInputTooltip(false);
+          }
+        }, "onBlur"),
+        ...(inputTooltip && showInputTooltip ? {
+          "data-tooltip-id": tooltipId
+        } : {})
+      };
+      if (label && [Checkbox, Switch].some(component => {
+        return child.type === component;
+      })) {
+        return /* @__PURE__ */React3.createElement(React3.Fragment, null, /* @__PURE__ */React3.createElement(Label, {
+          "aria-disabled": disabled,
+          tooltip
+        }, /* @__PURE__ */React3.createElement(Flex, null, warning ? /* @__PURE__ */React3.createElement(child.type, {
+          id,
+          ...inputProps,
+          ...(warning ? {
+            trailingIcon: "warning-alt"
+          } : {})
+        }) : /* @__PURE__ */React3.createElement(child.type, {
+          id,
+          ...inputProps
+        })), label), inputTooltip && showInputTooltip && /* @__PURE__ */React3.createElement(Flex, {
+          sx: {
+            width: "full",
+            fontSize: "sm"
+          }
+        }, /* @__PURE__ */React3.createElement(Tooltip, {
+          id: tooltipId,
+          place: inputTooltip.place,
+          clickable: inputTooltip.clickable,
+          isOpen: showInputTooltip,
+          variant: inputTooltip.variant
+        }, inputTooltip.render)));
+      }
+      return /* @__PURE__ */React3.createElement(Flex, {
+        sx: {
+          width: "full",
+          flexDirection: "column",
+          gap: "2"
+        }
+      }, label && /* @__PURE__ */React3.createElement(Label, {
+        "aria-disabled": disabled,
+        htmlFor: id,
+        tooltip
+      }, label), warning ? /* @__PURE__ */React3.createElement(child.type, {
+        id,
+        ...inputProps,
+        ...(warning ? {
+          trailingIcon: "warning-alt"
+        } : {})
+      }) : /* @__PURE__ */React3.createElement(child.type, {
+        id,
+        ...inputProps
+      }), inputTooltip && showInputTooltip && /* @__PURE__ */React3.createElement(Flex, {
+        sx: {
+          width: "full",
+          fontSize: "sm"
+        }
+      }, /* @__PURE__ */React3.createElement(Tooltip, {
+        id: tooltipId,
+        place: inputTooltip.place,
+        clickable: inputTooltip.clickable,
+        isOpen: showInputTooltip,
+        variant: inputTooltip.variant,
+        sx: inputTooltip.sx
+      }, inputTooltip.render)));
+    });
+  }, [render, controllerReturn, label, disabled, id, tooltip, warning, inputTooltip, showInputTooltip, tooltipId]);
+  return /* @__PURE__ */React3.createElement(Flex, {
+    sx: {
+      flexDirection: "column",
+      width: "100%",
+      gap: "1",
+      ...sx
+    },
+    css
+  }, memoizedRender, /* @__PURE__ */React3.createElement(FormErrorMessage, {
+    name
+  }), warning && !hasError && /* @__PURE__ */React3.createElement(Flex, {
+    className: "warning",
+    sx: {
+      color: "feedback.text.caution.default",
+      fontSize: "sm",
+      gap: "2",
+      paddingBottom: "1",
+      alignItems: "center"
+    }
+  }, warning));
+}, "FormField");
+
+// src/FormFieldCheckbox.tsx
+import { Checkbox as Checkbox2 } from "@ttoss/ui";
+var FormFieldCheckbox = /* @__PURE__ */__name(({
+  label,
+  name,
+  sx,
+  tooltip,
+  ...checkboxProps
+}) => {
+  return /* @__PURE__ */React.createElement(FormField, {
+    label,
+    name,
+    tooltip,
+    render: /* @__PURE__ */__name(({
+      field,
+      fieldState
+    }) => {
+      return /* @__PURE__ */React.createElement(Checkbox2, {
+        ...field,
+        ...checkboxProps,
+        "aria-invalid": !!fieldState.error,
+        sx
+      });
+    }, "render")
+  });
+}, "FormFieldCheckbox");
+
+// src/FormFieldPatternFormat.tsx
+import { Input } from "@ttoss/ui";
+import { PatternFormat } from "react-number-format";
+var FormFieldPatternFormat = /* @__PURE__ */__name(({
+  label,
+  name,
+  warning,
+  inputTooltip,
+  ...patternFormatProps
+}) => {
+  return /* @__PURE__ */React.createElement(FormField, {
+    name,
+    label,
+    warning,
+    inputTooltip,
+    render: /* @__PURE__ */__name(({
+      field,
+      fieldState
+    }) => {
+      return /* @__PURE__ */React.createElement(PatternFormat, {
+        name: field.name,
+        value: field.value,
+        onBlur: field.onBlur,
+        onValueChange: /* @__PURE__ */__name(values => {
+          field.onChange(values.value);
+        }, "onValueChange"),
+        customInput: Input,
+        "aria-invalid": Boolean(fieldState.error).valueOf(),
+        ...patternFormatProps
+      });
+    }, "render")
+  });
+}, "FormFieldPatternFormat");
+
+// src/FormFieldCreditCardNumber.tsx
+var FormFieldCreditCardNumber = /* @__PURE__ */__name(({
+  label,
+  name,
+  ...formFieldPatternFormatProps
+}) => {
+  return /* @__PURE__ */React.createElement(FormFieldPatternFormat, {
+    name,
+    label,
+    warning: formFieldPatternFormatProps.warning,
+    format: "#### #### #### ####",
+    placeholder: "1234 1234 1234 1234",
+    ...formFieldPatternFormatProps
+  });
+}, "FormFieldCreditCardNumber");
+
+// src/FormFieldNumericFormat.tsx
+import { Input as Input2 } from "@ttoss/ui";
+import * as React4 from "react";
+import { NumericFormat } from "react-number-format";
+var FormFieldNumericFormat = /* @__PURE__ */__name(({
+  label,
+  name,
+  warning,
+  tooltip,
+  inputTooltip,
+  ...numericFormatProps
+}) => {
+  return /* @__PURE__ */React4.createElement(FormField, {
+    label,
+    name,
+    warning,
+    tooltip,
+    inputTooltip,
+    render: /* @__PURE__ */__name(({
+      field
+    }) => {
+      return /* @__PURE__ */React4.createElement(NumericFormat, {
+        name: field.name,
+        value: field.value,
+        onBlur: field.onBlur,
+        onValueChange: /* @__PURE__ */__name(values => {
+          field.onChange(values.floatValue);
+        }, "onValueChange"),
+        customInput: Input2,
+        ...numericFormatProps
+      });
+    }, "render")
+  });
+}, "FormFieldNumericFormat");
+
+// src/FormFieldCurrencyInput.tsx
+var FormFieldCurrencyInput = /* @__PURE__ */__name(({
+  label,
+  name,
+  prefix,
+  decimalSeparator,
+  thousandSeparator,
+  ...formFieldNumericFormatProps
+}) => {
+  return /* @__PURE__ */React.createElement(FormFieldNumericFormat, {
+    name,
+    label,
+    warning: formFieldNumericFormatProps.warning,
+    fixedDecimalScale: true,
+    decimalScale: 2,
+    prefix,
+    decimalSeparator,
+    thousandSeparator,
+    placeholder: `${prefix} 0${decimalSeparator}00`,
+    allowNegative: false,
+    ...formFieldNumericFormatProps
+  });
+}, "FormFieldCurrencyInput");
+
+// src/FormFieldInput.tsx
+import { Input as Input3 } from "@ttoss/ui";
+var FormFieldInput = /* @__PURE__ */__name(({
+  label,
+  name,
+  tooltip,
+  sx,
+  defaultValue = "",
+  ...inputProps
+}) => {
+  return /* @__PURE__ */React.createElement(FormField, {
+    name,
+    label,
+    disabled: inputProps.disabled,
+    tooltip,
+    warning: inputProps.warning,
+    inputTooltip: inputProps.inputTooltip,
+    sx,
+    defaultValue,
+    render: /* @__PURE__ */__name(({
+      field,
+      fieldState
+    }) => {
+      return /* @__PURE__ */React.createElement(Input3, {
+        ...inputProps,
+        ...field,
+        "aria-invalid": fieldState.error ? "true" : void 0
+      });
+    }, "render")
+  });
+}, "FormFieldInput");
+
+// src/FormFieldPassword.tsx
+import { InputPassword } from "@ttoss/ui";
+var FormFieldPassword = /* @__PURE__ */__name(({
+  label,
+  name,
+  tooltip,
+  sx,
+  defaultValue = "",
+  ...inputProps
+}) => {
+  return /* @__PURE__ */React.createElement(FormField, {
+    name,
+    label,
+    disabled: inputProps.disabled,
+    tooltip,
+    warning: inputProps.warning,
+    inputTooltip: inputProps.inputTooltip,
+    sx,
+    defaultValue,
+    render: /* @__PURE__ */__name(({
+      field,
+      fieldState
+    }) => {
+      return /* @__PURE__ */React.createElement(InputPassword, {
+        ...inputProps,
+        ...field,
+        "aria-invalid": fieldState.error ? "true" : void 0
+      });
+    }, "render")
+  });
+}, "FormFieldPassword");
+
+// src/FormFieldRadio.tsx
+import { Flex as Flex2, Label as Label2, Radio } from "@ttoss/ui";
+var FormFieldRadio = /* @__PURE__ */__name(({
+  label,
+  name,
+  sx,
+  options,
+  tooltip,
+  ...radioProps
+}) => {
+  return /* @__PURE__ */React.createElement(FormField, {
+    label,
+    name,
+    sx,
+    tooltip,
+    render: /* @__PURE__ */__name(({
+      field
+    }) => {
+      return /* @__PURE__ */React.createElement(Flex2, {
+        sx: {
+          flexDirection: "column",
+          gap: "1"
+        }
+      }, options.map(option => {
+        const key = `form-field-radio-${name}-${option.value}`;
+        return /* @__PURE__ */React.createElement(Label2, {
+          key,
+          sx: {
+            fontSize: "md"
+          }
+        }, /* @__PURE__ */React.createElement(Radio, {
+          ref: field.ref,
+          onChange: field.onChange,
+          onBlur: field.onBlur,
+          value: option.value,
+          checked: field.value === option.value,
+          name,
+          ...radioProps
+        }), option.label);
+      }));
+    }, "render")
+  });
+}, "FormFieldRadio");
+
+// src/FormFieldRadioCard.tsx
+import { Box as Box2, Flex as Flex3, Label as Label3, Radio as Radio2, Text } from "@ttoss/ui";
+var FormFieldRadioCard = /* @__PURE__ */__name(({
+  label,
+  name,
+  direction = "column",
+  width = "full",
+  sx,
+  options,
+  tooltip,
+  ...radioProps
+}) => {
+  return /* @__PURE__ */React.createElement(FormField, {
+    label,
+    name,
+    sx,
+    tooltip,
+    render: /* @__PURE__ */__name(({
+      field
+    }) => {
+      return /* @__PURE__ */React.createElement(Flex3, {
+        sx: {
+          flexDirection: direction,
+          gap: "4"
+        }
+      }, options.map(option => {
+        const key = `form-field-radio-${name}-${option.value}`;
+        return /* @__PURE__ */React.createElement(Box2, {
+          key,
+          sx: {
+            gap: "2",
+            width,
+            border: "md",
+            borderColor: "display.border.muted.default",
+            borderRadius: "md"
+          }
+        }, /* @__PURE__ */React.createElement(Label3, {
+          sx: {
+            fontSize: "md",
+            width: "100%",
+            padding: "4"
+          }
+        }, /* @__PURE__ */React.createElement(Radio2, {
+          ref: field.ref,
+          onChange: field.onChange,
+          onBlur: field.onBlur,
+          value: option.value,
+          checked: field.value === option.value,
+          name,
+          ...radioProps
+        }), /* @__PURE__ */React.createElement(Flex3, {
+          sx: {
+            flexDirection: "column",
+            gap: "1"
+          }
+        }, option.label && /* @__PURE__ */React.createElement(Text, null, option.label), option.description && /* @__PURE__ */React.createElement(Text, {
+          sx: {
+            fontSize: "sm"
+          }
+        }, option.description))));
+      }));
+    }, "render")
+  });
+}, "FormFieldRadioCard");
+
+// src/FormFieldRadioCardIcony.tsx
+import { Box as Box3, Flex as Flex4, Text as Text2 } from "@ttoss/ui";
+import * as React5 from "react";
+var FormFieldRadioCardIcony = /* @__PURE__ */__name(({
+  label,
+  name,
+  direction = "row",
+  width = "full",
+  sx,
+  options,
+  tooltip
+}) => {
+  return /* @__PURE__ */React5.createElement(FormField, {
+    label,
+    name,
+    sx,
+    tooltip,
+    render: /* @__PURE__ */__name(({
+      field
+    }) => {
+      const handleOptionClick = /* @__PURE__ */__name(optionValue => {
+        field.onChange(optionValue);
+        field.onBlur();
+      }, "handleOptionClick");
+      return /* @__PURE__ */React5.createElement(Flex4, {
+        sx: {
+          flexDirection: direction,
+          gap: "4"
+        }
+      }, options.map(option => {
+        const key = `form-field-radio-card-${name}-${option.value}`;
+        const isSelected = field.value === option.value;
+        const IconComponent = option.icon;
+        return /* @__PURE__ */React5.createElement(Box3, {
+          key,
+          onClick: /* @__PURE__ */__name(() => {
+            return handleOptionClick(option.value);
+          }, "onClick"),
+          sx: {
+            width,
+            padding: "6",
+            border: isSelected ? "lg" : "md",
+            borderColor: isSelected ? "input.background.accent.default" : "input.border.muted.default",
+            borderRadius: "md",
+            backgroundColor: "transparent",
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            justifyContent: "center",
+            textAlign: "center",
+            cursor: "pointer",
+            transition: "all 0.2s ease-in-out"
+          }
+        }, IconComponent && /* @__PURE__ */React5.createElement(Box3, {
+          sx: {
+            marginBottom: "2",
+            color: "text.primary"
+          }
+        }, /* @__PURE__ */React5.createElement(IconComponent, {
+          size: 24
+        })), /* @__PURE__ */React5.createElement(Flex4, {
+          sx: {
+            flexDirection: "column",
+            gap: "1"
+          }
+        }, option.label && /* @__PURE__ */React5.createElement(Text2, {
+          sx: {
+            fontSize: "lg",
+            fontWeight: "semibold",
+            color: "text.primary"
+          }
+        }, option.label), option.description && /* @__PURE__ */React5.createElement(Text2, {
+          sx: {
+            fontSize: "md",
+            color: "text.secondary"
+          }
+        }, option.description)));
+      }));
+    }, "render")
+  });
+}, "FormFieldRadioCardIcony");
+
+// src/FormFieldSelect.tsx
+import { Select } from "@ttoss/ui";
+var FormFieldSelect = /* @__PURE__ */__name(({
+  label,
+  name,
+  id,
+  defaultValue,
+  sx,
+  css,
+  disabled,
+  tooltip,
+  ...selectProps
+}) => {
+  return /* @__PURE__ */React.createElement(FormField, {
+    name,
+    label,
+    id,
+    defaultValue,
+    disabled,
+    tooltip,
+    inputTooltip: selectProps.inputTooltip,
+    warning: selectProps.warning,
+    sx,
+    css,
+    render: /* @__PURE__ */__name(({
+      field,
+      fieldState
+    }) => {
+      return /* @__PURE__ */React.createElement(Select, {
+        ...selectProps,
+        ...field,
+        isDisabled: disabled,
+        "aria-invalid": fieldState.error ? "true" : void 0
+      });
+    }, "render")
+  });
+}, "FormFieldSelect");
+
+// src/FormFieldSwitch.tsx
+import { Switch as Switch2 } from "@ttoss/ui";
+var FormFieldSwitch = /* @__PURE__ */__name(({
+  label,
+  name,
+  sx,
+  tooltip,
+  ...switchProps
+}) => {
+  return /* @__PURE__ */React.createElement(FormField, {
+    label,
+    name,
+    tooltip,
+    render: /* @__PURE__ */__name(({
+      field,
+      fieldState
+    }) => {
+      return /* @__PURE__ */React.createElement(Switch2, {
+        ...field,
+        ...switchProps,
+        "aria-invalid": !!fieldState.error,
+        sx
+      });
+    }, "render")
+  });
+}, "FormFieldSwitch");
+
+// src/FormFieldTextarea.tsx
+import { Textarea } from "@ttoss/ui";
+var FormFieldTextarea = /* @__PURE__ */__name(({
+  label,
+  name,
+  warning,
+  inputTooltip,
+  sx,
+  ...textareaProps
+}) => {
+  const id = `form-field-textarea-${name}`;
+  return /* @__PURE__ */React.createElement(FormField, {
+    label,
+    name,
+    id,
+    sx,
+    warning,
+    inputTooltip,
+    render: /* @__PURE__ */__name(({
+      field,
+      fieldState
+    }) => {
+      return /* @__PURE__ */React.createElement(Textarea, {
+        ...field,
+        ...textareaProps,
+        "aria-invalid": fieldState.error ? "true" : void 0
+      });
+    }, "render")
+  });
+}, "FormFieldTextarea");
+
+// src/FormGroup.tsx
+import { Box as Box4, Flex as Flex5, Text as Text3 } from "@ttoss/ui";
+import * as React6 from "react";
+var FormGroupLevelsManagerContext = /* @__PURE__ */React6.createContext({
+  levelsLength: 1,
+  registerChild: /* @__PURE__ */__name(() => {
+    return null;
+  }, "registerChild")
+});
+var FormGroupLevelsManager = /* @__PURE__ */__name(({
+  children
+}) => {
+  const [levelsLength, setLevelsLength] = React6.useState(0);
+  const registerChild = React6.useCallback(level => {
+    if (level + 1 > levelsLength) {
+      setLevelsLength(level + 1);
+    }
+  }, [levelsLength]);
+  return /* @__PURE__ */React6.createElement(FormGroupLevelsManagerContext.Provider, {
+    value: {
+      levelsLength,
+      registerChild
+    }
+  }, children);
+}, "FormGroupLevelsManager");
+var FormGroupContext = /* @__PURE__ */React6.createContext({});
+var useFormGroup = /* @__PURE__ */__name(() => {
+  const {
+    parentLevel
+  } = React6.useContext(FormGroupContext);
+  const {
+    levelsLength
+  } = React6.useContext(FormGroupLevelsManagerContext);
+  return {
+    level: parentLevel,
+    levelsLength
+  };
+}, "useFormGroup");
+var FormGroupWrapper = /* @__PURE__ */__name(({
+  title,
+  direction,
+  children,
+  name,
+  ...boxProps
+}) => {
+  const {
+    level
+  } = useFormGroup();
+  const {
+    registerChild
+  } = React6.useContext(FormGroupLevelsManagerContext);
+  React6.useEffect(() => {
+    if (typeof level === "number") {
+      registerChild(level);
+    }
+  }, [level, registerChild]);
+  const childrenContainerSx = {
+    flexDirection: direction || "column",
+    gap: "1",
+    width: "100%"
+  };
+  return /* @__PURE__ */React6.createElement(Box4, {
+    "aria-level": level,
+    ...boxProps,
+    sx: {
+      marginTop: level === 0 ? "none" : "4",
+      marginBottom: "4",
+      ...boxProps.sx
+    }
+  }, title && /* @__PURE__ */React6.createElement(Box4, {
+    sx: {
+      marginBottom: "2"
+    }
+  }, /* @__PURE__ */React6.createElement(Text3, {
+    sx: {
+      fontSize: "2xl",
+      fontWeight: "bold"
+    }
+  }, title)), /* @__PURE__ */React6.createElement(Flex5, {
+    sx: childrenContainerSx
+  }, children), name && /* @__PURE__ */React6.createElement(FormErrorMessage, {
+    name
+  }));
+}, "FormGroupWrapper");
+var FormGroup = /* @__PURE__ */__name(props => {
+  const {
+    level
+  } = useFormGroup();
+  const currentLevel = level === void 0 ? 0 : level + 1;
+  return /* @__PURE__ */React6.createElement(FormGroupContext.Provider, {
+    value: {
+      parentLevel: currentLevel
+    }
+  }, currentLevel === 0 ? /* @__PURE__ */React6.createElement(FormGroupLevelsManager, null, /* @__PURE__ */React6.createElement(FormGroupWrapper, props)) : /* @__PURE__ */React6.createElement(FormGroupWrapper, props));
+}, "FormGroup");
+
+// src/yup/i18n.ts
+import { defineMessage } from "@ttoss/react-i18n";
+import { setLocale } from "yup";
+setLocale({
+  mixed: {
+    required: defineMessage({
+      id: "MfWGyg",
+      defaultMessage: [{
+        "type": 0,
+        "value": "Field is required"
+      }]
+    }),
+    notType: /* @__PURE__ */__name(({
+      type
+    }) => {
+      return {
+        ...defineMessage({
+          id: "ZhaPt0",
+          defaultMessage: [{
+            "type": 0,
+            "value": "Invalid Value for Field of type "
+          }, {
+            "type": 1,
+            "value": "type"
+          }]
+        }),
+        values: {
+          type
+        }
+      };
+    }, "notType")
+  },
+  string: {
+    min: /* @__PURE__ */__name(({
+      min
+    }) => {
+      return {
+        ...defineMessage({
+          id: "D1C6fR",
+          defaultMessage: [{
+            "type": 0,
+            "value": "Field must be at least "
+          }, {
+            "type": 1,
+            "value": "min"
+          }, {
+            "type": 0,
+            "value": " characters"
+          }]
+        }),
+        values: {
+          min
+        }
+      };
+    }, "min")
+  }
+});
+
+// src/yup/schema.ts
+import * as yup from "yup";
+
+// src/Brazil/FormFieldCNPJ.tsx
+import { Input as Input4 } 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(({
+  label,
+  name,
+  ...patternFormatProps
+}) => {
+  return /* @__PURE__ */React.createElement(FormField, {
+    name,
+    label,
+    warning: patternFormatProps.warning,
+    inputTooltip: patternFormatProps.inputTooltip,
+    render: /* @__PURE__ */__name(({
+      field
+    }) => {
+      return /* @__PURE__ */React.createElement(PatternFormat2, {
+        name: field.name,
+        value: field.value,
+        onBlur: field.onBlur,
+        onValueChange: /* @__PURE__ */__name(values => {
+          field.onChange(values.value);
+        }, "onValueChange"),
+        format: "##.###.###/####-##",
+        customInput: Input4,
+        placeholder: "12.345.678/0000-00",
+        ...patternFormatProps
+      });
+    }, "render")
+  });
+}, "FormFieldCNPJ");
+
+// src/yup/schema.ts
+yup.addMethod(yup.string, "cnpj", function () {
+  return this.test("valid-cnpj", "Invalid CNPJ", value => {
+    return isCnpjValid(value);
+  });
+});
+yup.addMethod(yup.string, "password", function ({
+  required
+} = {}) {
+  const schema = this.trim();
+  if (required) {
+    schema.required("Password is required");
+  }
+  return schema.min(8, "Password must be at least 8 characters long");
+});
+
+// src/yup/yup.ts
+import * as yup2 from "yup";
+
+// src/index.ts
+import { yupResolver } from "@hookform/resolvers/yup";
+import { Controller, FormProvider as FormProvider2, useController as useController2, useFieldArray, useForm, useFormContext as useFormContext3, useFormState, useWatch } from "react-hook-form";
+export * from "react-hook-form";
+export { __name, Form, FormErrorMessage, FormField, FormFieldCheckbox, FormFieldPatternFormat, FormFieldCreditCardNumber, FormFieldNumericFormat, FormFieldCurrencyInput, FormFieldInput, FormFieldPassword, FormFieldRadio, FormFieldRadioCard, FormFieldRadioCardIcony, FormFieldSelect, FormFieldSwitch, FormFieldTextarea, useFormGroup, FormGroup, isCnpjValid, FormFieldCNPJ, yup2 as yup, yupResolver, Controller, FormProvider2 as FormProvider, useController2 as useController, useFieldArray, useForm, useFormContext3 as useFormContext, useFormState, useWatch };