@ttoss/forms 0.25.6 → 0.26.0

package/dist/esm/chunk-6U527R3X.js

@@ -0,0 +1,741 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, {
+  enumerable: true,
+  configurable: true,
+  writable: true,
+  value
+}) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+
+// src/index.ts
+import { yupResolver } from "@hookform/resolvers/yup";
+
+// 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: ({
+      type
+    }) => {
+      return {
+        ...defineMessage({
+          id: "ZhaPt0",
+          defaultMessage: [{
+            "type": 0,
+            "value": "Invalid Value for Field of type "
+          }, {
+            "type": 1,
+            "value": "type"
+          }]
+        }),
+        values: {
+          type
+        }
+      };
+    }
+  },
+  string: {
+    min: ({
+      min
+    }) => {
+      return {
+        ...defineMessage({
+          id: "D1C6fR",
+          defaultMessage: [{
+            "type": 0,
+            "value": "Field must be at least "
+          }, {
+            "type": 1,
+            "value": "min"
+          }, {
+            "type": 0,
+            "value": " characters"
+          }]
+        }),
+        values: {
+          min
+        }
+      };
+    }
+  }
+});
+
+// src/yup/schema.ts
+import * as yup from "yup";
+
+// src/Brazil/FormFieldCNPJ.tsx
+import { Input } from "@ttoss/ui";
+import { PatternFormat } from "react-number-format";
+import { jsx } from "react/jsx-runtime";
+var isCnpjValid = 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;
+};
+var FormFieldCNPJ = ({
+  label,
+  name,
+  ...patternFormatProps
+}) => {
+  return /* @__PURE__ */jsx(FormField, {
+    name,
+    label,
+    render: ({
+      field
+    }) => {
+      return /* @__PURE__ */jsx(PatternFormat, {
+        name: field.name,
+        value: field.value,
+        onBlur: field.onBlur,
+        onValueChange: values => {
+          field.onChange(values.value);
+        },
+        format: "##.###.###/####-##",
+        customInput: Input,
+        placeholder: "12.345.678/0000-00",
+        ...patternFormatProps
+      });
+    }
+  });
+};
+
+// 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/Form.tsx
+import { Box } from "@ttoss/ui";
+import { FormProvider } from "react-hook-form";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var Form = ({
+  children,
+  onSubmit,
+  sx,
+  ...formMethods
+}) => {
+  return /* @__PURE__ */jsx2(FormProvider, {
+    ...formMethods,
+    children: /* @__PURE__ */jsx2(Box, {
+      as: "form",
+      variant: "forms.form",
+      onSubmit: formMethods.handleSubmit(data => {
+        return onSubmit?.(data);
+      }),
+      sx,
+      children
+    })
+  });
+};
+
+// src/FormErrorMessage.tsx
+import { ErrorMessage } from "@hookform/error-message";
+import { useFormContext } from "react-hook-form";
+import { FormattedMessage } from "@ttoss/react-i18n";
+import { HelpText } from "@ttoss/ui";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var isMessageDescriptor = possibleMessageDescriptor => {
+  return possibleMessageDescriptor !== void 0 && possibleMessageDescriptor.defaultMessage !== void 0;
+};
+var FormErrorMessage = ({
+  name,
+  disabled
+}) => {
+  const {
+    formState: {
+      errors
+    }
+  } = useFormContext();
+  return /* @__PURE__ */jsx3(ErrorMessage, {
+    name,
+    errors,
+    render: ({
+      message
+    }) => {
+      return /* @__PURE__ */jsx3(HelpText, {
+        negative: true,
+        disabled,
+        children: (() => {
+          if (typeof message === "string") {
+            return message;
+          }
+          if (isMessageDescriptor(message)) {
+            return /* @__PURE__ */jsx3(FormattedMessage, {
+              ...message
+            });
+          }
+          return JSON.stringify(message);
+        })()
+      });
+    }
+  });
+};
+
+// src/FormField.tsx
+import * as React from "react";
+import { useController } from "react-hook-form";
+import { Flex, Label } from "@ttoss/ui";
+import { Fragment, jsx as jsx4, jsxs } from "react/jsx-runtime";
+var FormField = ({
+  label,
+  id: idProp,
+  name,
+  defaultValue,
+  disabled,
+  tooltip,
+  onTooltipClick,
+  sx,
+  css,
+  render
+}) => {
+  const controllerReturn = useController({
+    name,
+    defaultValue
+  });
+  const id = idProp || `form-field-${name}`;
+  const memoizedRender = React.useMemo(() => {
+    return React.Children.map(render(controllerReturn), child => {
+      return /* @__PURE__ */jsxs(Fragment, {
+        children: [label && /* @__PURE__ */jsx4(Label, {
+          "aria-disabled": disabled,
+          htmlFor: id,
+          tooltip,
+          onTooltipClick,
+          children: label
+        }), React.createElement(child.type, {
+          id,
+          ...child.props
+        })]
+      });
+    });
+  }, [controllerReturn, disabled, onTooltipClick, tooltip, id, label, render]);
+  return /* @__PURE__ */jsxs(Flex, {
+    sx: {
+      flexDirection: "column",
+      width: "100%",
+      gap: "md",
+      ...sx
+    },
+    css,
+    children: [memoizedRender, /* @__PURE__ */jsx4(FormErrorMessage, {
+      name
+    })]
+  });
+};
+
+// src/FormFieldCheckbox.tsx
+import { Checkbox, Flex as Flex2, Label as Label2 } from "@ttoss/ui";
+import { useController as useController2 } from "react-hook-form";
+import { jsx as jsx5, jsxs as jsxs2 } 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({
+    name,
+    defaultValue: false
+  });
+  const id = `form-field-checkbox-${name}`;
+  const error = !!errors[name]?.message;
+  return /* @__PURE__ */jsxs2(Flex2, {
+    sx: {
+      flexDirection: "column",
+      width: "100%",
+      ...sx
+    },
+    children: [/* @__PURE__ */jsx5(Flex2, {
+      sx: {
+        alignItems: "center"
+      },
+      children: /* @__PURE__ */jsxs2(Label2, {
+        "aria-disabled": checkboxProps.disabled,
+        htmlFor: id,
+        children: [/* @__PURE__ */jsx5(Checkbox, {
+          id,
+          ref,
+          checked: value,
+          onChange,
+          onBlur,
+          name,
+          "aria-invalid": error ? "true" : "false",
+          ...checkboxProps
+        }), label]
+      })
+    }), /* @__PURE__ */jsx5(FormErrorMessage, {
+      name
+    })]
+  });
+};
+
+// src/FormFieldPatternFormat.tsx
+import { Input as Input2 } from "@ttoss/ui";
+import { PatternFormat as PatternFormat2 } from "react-number-format";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var FormFieldPatternFormat = ({
+  label,
+  name,
+  ...patternFormatProps
+}) => {
+  return /* @__PURE__ */jsx6(FormField, {
+    name,
+    label,
+    render: ({
+      field,
+      fieldState
+    }) => {
+      return /* @__PURE__ */jsx6(PatternFormat2, {
+        name: field.name,
+        value: field.value,
+        onBlur: field.onBlur,
+        onValueChange: values => {
+          field.onChange(values.value);
+        },
+        customInput: Input2,
+        "aria-invalid": Boolean(fieldState.error).valueOf(),
+        ...patternFormatProps
+      });
+    }
+  });
+};
+
+// src/FormFieldCreditCardNumber.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+var FormFieldCreditCardNumber = ({
+  label,
+  name,
+  ...formFieldPatternFormatProps
+}) => {
+  return /* @__PURE__ */jsx7(FormFieldPatternFormat, {
+    name,
+    label,
+    format: "#### #### #### ####",
+    placeholder: "1234 1234 1234 1234",
+    ...formFieldPatternFormatProps
+  });
+};
+
+// src/FormFieldNumericFormat.tsx
+import { Input as Input3 } from "@ttoss/ui";
+import { NumericFormat } from "react-number-format";
+import { jsx as jsx8 } from "react/jsx-runtime";
+var FormFieldNumericFormat = ({
+  label,
+  name,
+  ...numericFormatProps
+}) => {
+  return /* @__PURE__ */jsx8(FormField, {
+    label,
+    name,
+    render: ({
+      field
+    }) => {
+      return /* @__PURE__ */jsx8(NumericFormat, {
+        name: field.name,
+        value: field.value,
+        onBlur: field.onBlur,
+        onValueChange: values => {
+          field.onChange(values.floatValue);
+        },
+        customInput: Input3,
+        ...numericFormatProps
+      });
+    }
+  });
+};
+
+// src/FormFieldCurrencyInput.tsx
+import { jsx as jsx9 } from "react/jsx-runtime";
+var FormFieldCurrencyInput = ({
+  label,
+  name,
+  prefix,
+  decimalSeparator,
+  thousandSeparator,
+  ...formFieldNumericFormatProps
+}) => {
+  return /* @__PURE__ */jsx9(FormFieldNumericFormat, {
+    name,
+    label,
+    fixedDecimalScale: true,
+    decimalScale: 2,
+    prefix,
+    decimalSeparator,
+    thousandSeparator,
+    placeholder: `${prefix} 0${decimalSeparator}00`,
+    allowNegative: false,
+    ...formFieldNumericFormatProps
+  });
+};
+
+// src/FormFieldInput.tsx
+import { Input as Input4 } from "@ttoss/ui";
+import { jsx as jsx10 } from "react/jsx-runtime";
+var FormFieldInput = ({
+  label,
+  name,
+  tooltip,
+  onTooltipClick,
+  sx,
+  defaultValue = "",
+  ...inputProps
+}) => {
+  return /* @__PURE__ */jsx10(FormField, {
+    name,
+    label,
+    disabled: inputProps.disabled,
+    tooltip,
+    onTooltipClick,
+    sx,
+    defaultValue,
+    render: ({
+      field,
+      fieldState
+    }) => {
+      return /* @__PURE__ */jsx10(Input4, {
+        ...inputProps,
+        ...field,
+        "aria-invalid": fieldState.error ? "true" : void 0
+      });
+    }
+  });
+};
+
+// src/FormFieldPassword.tsx
+import { InputPassword } from "@ttoss/ui";
+import { jsx as jsx11 } from "react/jsx-runtime";
+var FormFieldPassword = ({
+  label,
+  name,
+  tooltip,
+  onTooltipClick,
+  sx,
+  defaultValue = "",
+  ...inputProps
+}) => {
+  return /* @__PURE__ */jsx11(FormField, {
+    name,
+    label,
+    disabled: inputProps.disabled,
+    tooltip,
+    onTooltipClick,
+    sx,
+    defaultValue,
+    render: ({
+      field,
+      fieldState
+    }) => {
+      return /* @__PURE__ */jsx11(InputPassword, {
+        ...inputProps,
+        ...field,
+        "aria-invalid": fieldState.error ? "true" : void 0
+      });
+    }
+  });
+};
+
+// 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 jsx12, jsxs as jsxs3 } from "react/jsx-runtime";
+var FormFieldRadio = ({
+  label,
+  name,
+  options,
+  sx,
+  ...radioProps
+}) => {
+  const {
+    field: {
+      onChange,
+      onBlur,
+      value,
+      ref
+    }
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  } = useController3({
+    name,
+    defaultValue: ""
+  });
+  return /* @__PURE__ */jsxs3(Flex3, {
+    sx: {
+      flexDirection: "column",
+      width: "100%",
+      ...sx
+    },
+    children: [label && /* @__PURE__ */jsx12(Label3, {
+      sx: {
+        marginBottom: "md"
+      },
+      children: label
+    }), /* @__PURE__ */jsx12(Box2, {
+      children: options.map(option => {
+        const id = `form-field-radio-${name}-${option.value}`;
+        return /* @__PURE__ */jsxs3(Label3, {
+          htmlFor: id,
+          children: [/* @__PURE__ */jsx12(Radio, {
+            ref,
+            onChange,
+            onBlur,
+            value: option.value,
+            checked: value === option.value,
+            name,
+            id,
+            ...radioProps
+          }), option.label]
+        }, id);
+      })
+    }), /* @__PURE__ */jsx12(FormErrorMessage, {
+      name
+    })]
+  });
+};
+
+// src/FormFieldSelect.tsx
+import { Select } from "@ttoss/ui";
+import { jsx as jsx13 } from "react/jsx-runtime";
+var FormFieldSelect = ({
+  label,
+  name,
+  id,
+  defaultValue,
+  sx,
+  css,
+  disabled,
+  tooltip,
+  onTooltipClick,
+  ...selectProps
+}) => {
+  return /* @__PURE__ */jsx13(FormField, {
+    name,
+    label,
+    id,
+    defaultValue,
+    disabled,
+    tooltip,
+    onTooltipClick,
+    sx,
+    css,
+    render: ({
+      field,
+      fieldState
+    }) => {
+      return /* @__PURE__ */jsx13(Select, {
+        ...selectProps,
+        ...field,
+        isDisabled: disabled,
+        "aria-invalid": fieldState.error ? "true" : void 0
+      });
+    }
+  });
+};
+
+// src/FormFieldTextarea.tsx
+import { Textarea } from "@ttoss/ui";
+import { jsx as jsx14 } from "react/jsx-runtime";
+var FormFieldTextarea = ({
+  label,
+  name,
+  sx,
+  ...textareaProps
+}) => {
+  const id = `form-field-textarea-${name}`;
+  return /* @__PURE__ */jsx14(FormField, {
+    label,
+    name,
+    id,
+    sx,
+    render: ({
+      field,
+      fieldState
+    }) => {
+      return /* @__PURE__ */jsx14(Textarea, {
+        ...field,
+        ...textareaProps,
+        "aria-invalid": fieldState.error ? "true" : void 0
+      });
+    }
+  });
+};
+
+// src/FormGroup.tsx
+import * as React2 from "react";
+import { Box as Box3, Flex as Flex4, Text } from "@ttoss/ui";
+import { jsx as jsx15, jsxs as jsxs4 } from "react/jsx-runtime";
+var FormGroupLevelsManagerContext = React2.createContext({
+  levelsLength: 1,
+  registerChild: () => {
+    return null;
+  }
+});
+var FormGroupLevelsManager = ({
+  children
+}) => {
+  const [levelsLength, setLevelsLength] = React2.useState(0);
+  const registerChild = React2.useCallback(level => {
+    if (level + 1 > levelsLength) {
+      setLevelsLength(level + 1);
+    }
+  }, [levelsLength]);
+  return /* @__PURE__ */jsx15(FormGroupLevelsManagerContext.Provider, {
+    value: {
+      levelsLength,
+      registerChild
+    },
+    children
+  });
+};
+var FormGroupContext = React2.createContext({});
+var useFormGroup = () => {
+  const {
+    parentLevel
+  } = React2.useContext(FormGroupContext);
+  const {
+    levelsLength
+  } = React2.useContext(FormGroupLevelsManagerContext);
+  return {
+    level: parentLevel,
+    levelsLength
+  };
+};
+var FormGroupWrapper = ({
+  title,
+  direction,
+  children,
+  name,
+  ...boxProps
+}) => {
+  const {
+    level
+  } = useFormGroup();
+  const {
+    registerChild
+  } = React2.useContext(FormGroupLevelsManagerContext);
+  React2.useEffect(() => {
+    if (typeof level === "number") {
+      registerChild(level);
+    }
+  }, [level, registerChild]);
+  const childrenContainerSx = {
+    flexDirection: direction || "column",
+    gap: "md",
+    width: "100%"
+  };
+  return /* @__PURE__ */jsxs4(Box3, {
+    "aria-level": level,
+    ...boxProps,
+    sx: {
+      marginTop: level === 0 ? "none" : "lg",
+      marginBottom: "lg",
+      ...boxProps.sx
+    },
+    children: [title && /* @__PURE__ */jsx15(Box3, {
+      sx: {
+        marginBottom: "md"
+      },
+      children: /* @__PURE__ */jsx15(Text, {
+        sx: {
+          fontSize: "2xl",
+          fontWeight: "bold"
+        },
+        children: title
+      })
+    }), /* @__PURE__ */jsx15(Flex4, {
+      sx: childrenContainerSx,
+      children
+    }), name && /* @__PURE__ */jsx15(FormErrorMessage, {
+      name
+    })]
+  });
+};
+var FormGroup = props => {
+  const {
+    level
+  } = useFormGroup();
+  const currentLevel = level === void 0 ? 0 : level + 1;
+  return /* @__PURE__ */jsx15(FormGroupContext.Provider, {
+    value: {
+      parentLevel: currentLevel
+    },
+    children: currentLevel === 0 ? /* @__PURE__ */jsx15(FormGroupLevelsManager, {
+      children: /* @__PURE__ */jsx15(FormGroupWrapper, {
+        ...props
+      })
+    }) : /* @__PURE__ */jsx15(FormGroupWrapper, {
+      ...props
+    })
+  });
+};
+
+// src/index.ts
+import { useForm, useFormContext as useFormContext2, useWatch, useFieldArray, useController as useController4, useFormState, Controller, FormProvider as FormProvider2 } from "react-hook-form";
+export * from "react-hook-form";
+export { __publicField, isCnpjValid, FormFieldCNPJ, yup2 as yup, Form, FormErrorMessage, FormField, FormFieldCheckbox, FormFieldPatternFormat, FormFieldCreditCardNumber, FormFieldNumericFormat, FormFieldCurrencyInput, FormFieldInput, FormFieldPassword, FormFieldRadio, FormFieldSelect, FormFieldTextarea, useFormGroup, FormGroup, yupResolver, useForm, useFormContext2 as useFormContext, useWatch, useFieldArray, useController4 as useController, useFormState, Controller, FormProvider2 as FormProvider };