@ttoss/forms 0.22.1 → 0.22.3

package/dist/esm/index.js

@@ -1,633 +1,3 @@
 /** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
-
-// src/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/index.ts
-import { yupResolver } from "@hookform/resolvers/yup";
-export * from "react-hook-form";
-import * as yup from "yup";
-
-// src/Form.tsx
-import { Box } from "@ttoss/ui";
-import { FormProvider } from "react-hook-form";
-import { jsx } from "react/jsx-runtime";
-var Form = ({
-  children,
-  onSubmit,
-  sx,
-  ...formMethods
-}) => {
-  return /* @__PURE__ */jsx(FormProvider, {
-    ...formMethods,
-    children: /* @__PURE__ */jsx(Box, {
-      as: "form",
-      variant: "forms.form",
-      onSubmit: formMethods.handleSubmit(data => {
-        return onSubmit?.(data);
-      }),
-      sx,
-      children
-    })
-  });
-};
-
-// src/FormField.tsx
-import * as React from "react";
-
-// src/ErrorMessage.tsx
-import { useFormContext } from "react-hook-form";
-import { FormattedMessage } from "@ttoss/react-i18n";
-import { HelpText } from "@ttoss/ui";
-import { ErrorMessage as HookformErrorMessage } from "@hookform/error-message";
-import { jsx as jsx2 } from "react/jsx-runtime";
-var isMessageDescriptor = possibleMessageDescriptor => {
-  return possibleMessageDescriptor !== void 0 && possibleMessageDescriptor.defaultMessage !== void 0;
-};
-var ErrorMessage = ({
-  name,
-  disabled
-}) => {
-  const {
-    formState: {
-      errors
-    }
-  } = useFormContext();
-  return /* @__PURE__ */jsx2(HookformErrorMessage, {
-    name,
-    errors,
-    render: ({
-      message
-    }) => {
-      return /* @__PURE__ */jsx2(HelpText, {
-        negative: true,
-        disabled,
-        children: (() => {
-          if (typeof message === "string") return message;
-          if (isMessageDescriptor(message)) return /* @__PURE__ */jsx2(FormattedMessage, {
-            ...message
-          });
-          return JSON.stringify(message);
-        })()
-      });
-    }
-  });
-};
-
-// src/FormField.tsx
-import { useController } from "react-hook-form";
-import { Flex, Label } from "@ttoss/ui";
-import { Fragment, jsx as jsx3, 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__ */jsx3(Label, {
-          "aria-disabled": disabled,
-          htmlFor: id,
-          tooltip,
-          onTooltipClick,
-          children: label
-        }), /*#__PURE__*/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__ */jsx3(ErrorMessage, {
-      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 jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
-var FormFieldCheckbox = ({
-  label,
-  name,
-  sx,
-  ...checkboxProps
-}) => {
-  const {
-    field: {
-      onChange,
-      onBlur,
-      value,
-      ref
-    },
-    formState: {
-      errors
-    }
-  } = 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__ */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(ErrorMessage, {
-      name
-    })]
-  });
-};
-
-// src/FormFieldPatternFormat.tsx
-import { Input } from "@ttoss/ui";
-import { PatternFormat } from "react-number-format";
-import { jsx as jsx5 } from "react/jsx-runtime";
-var FormFieldPatternFormat = ({
-  label,
-  name,
-  ...patternFormatProps
-}) => {
-  return /* @__PURE__ */jsx5(FormField, {
-    name,
-    label,
-    render: ({
-      field,
-      fieldState
-    }) => {
-      return /* @__PURE__ */jsx5(PatternFormat, {
-        name: field.name,
-        value: field.value,
-        onBlur: field.onBlur,
-        onValueChange: values => {
-          field.onChange(values.value);
-        },
-        customInput: Input,
-        "aria-invalid": Boolean(fieldState.error).valueOf(),
-        ...patternFormatProps
-      });
-    }
-  });
-};
-
-// src/FormFieldCreditCardNumber.tsx
-import { jsx as jsx6 } from "react/jsx-runtime";
-var FormFieldCreditCardNumber = ({
-  label,
-  name,
-  ...formFieldPatternFormatProps
-}) => {
-  return /* @__PURE__ */jsx6(FormFieldPatternFormat, {
-    name,
-    label,
-    format: "#### #### #### ####",
-    placeholder: "1234 1234 1234 1234",
-    ...formFieldPatternFormatProps
-  });
-};
-
-// src/FormFieldNumericFormat.tsx
-import { Input as Input2 } from "@ttoss/ui";
-import { NumericFormat } from "react-number-format";
-import { jsx as jsx7 } from "react/jsx-runtime";
-var FormFieldNumericFormat = ({
-  label,
-  name,
-  ...numericFormatProps
-}) => {
-  return /* @__PURE__ */jsx7(FormField, {
-    label,
-    name,
-    render: ({
-      field
-    }) => {
-      return /* @__PURE__ */jsx7(NumericFormat, {
-        name: field.name,
-        value: field.value,
-        onBlur: field.onBlur,
-        onValueChange: values => {
-          field.onChange(values.floatValue);
-        },
-        customInput: Input2,
-        ...numericFormatProps
-      });
-    }
-  });
-};
-
-// src/FormFieldCurrencyInput.tsx
-import { jsx as jsx8 } from "react/jsx-runtime";
-var FormFieldCurrencyInput = ({
-  label,
-  name,
-  prefix,
-  decimalSeparator,
-  thousandSeparator,
-  ...formFieldNumericFormatProps
-}) => {
-  return /* @__PURE__ */jsx8(FormFieldNumericFormat, {
-    name,
-    label,
-    fixedDecimalScale: true,
-    decimalScale: 2,
-    prefix,
-    decimalSeparator,
-    thousandSeparator,
-    placeholder: `${prefix} 0${decimalSeparator}00`,
-    allowNegative: false,
-    ...formFieldNumericFormatProps
-  });
-};
-
-// src/FormFieldInput.tsx
-import { Input as Input3 } from "@ttoss/ui";
-import { jsx as jsx9 } from "react/jsx-runtime";
-var FormFieldInput = ({
-  label,
-  name,
-  tooltip,
-  onTooltipClick,
-  sx,
-  defaultValue = "",
-  ...inputProps
-}) => {
-  return /* @__PURE__ */jsx9(FormField, {
-    name,
-    label,
-    disabled: inputProps.disabled,
-    tooltip,
-    onTooltipClick,
-    sx,
-    defaultValue,
-    render: ({
-      field,
-      fieldState
-    }) => {
-      return /* @__PURE__ */jsx9(Input3, {
-        ...inputProps,
-        ...field,
-        "aria-invalid": fieldState.error ? "true" : void 0
-      });
-    }
-  });
-};
-
-// src/FormFieldPassword.tsx
-import { InputPassword } from "@ttoss/ui";
-import { jsx as jsx10 } from "react/jsx-runtime";
-var FormFieldPassword = ({
-  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(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 jsx11, jsxs as jsxs3 } from "react/jsx-runtime";
-var FormFieldRadio = ({
-  label,
-  name,
-  options,
-  sx,
-  ...radioProps
-}) => {
-  const {
-    field: {
-      onChange,
-      onBlur,
-      value,
-      ref
-    }
-  } = useController3({
-    name,
-    defaultValue: ""
-  });
-  return /* @__PURE__ */jsxs3(Flex3, {
-    sx: {
-      flexDirection: "column",
-      width: "100%",
-      ...sx
-    },
-    children: [label && /* @__PURE__ */jsx11(Label3, {
-      sx: {
-        marginBottom: "md"
-      },
-      children: label
-    }), /* @__PURE__ */jsx11(Box2, {
-      children: options.map(option => {
-        const id = `form-field-radio-${name}-${option.value}`;
-        return /* @__PURE__ */jsxs3(Label3, {
-          htmlFor: id,
-          children: [/* @__PURE__ */jsx11(Radio, {
-            ref,
-            onChange,
-            onBlur,
-            value: option.value,
-            checked: value === option.value,
-            name,
-            id,
-            ...radioProps
-          }), option.label]
-        }, id);
-      })
-    }), /* @__PURE__ */jsx11(ErrorMessage, {
-      name
-    })]
-  });
-};
-
-// src/FormFieldSelect.tsx
-import { Select } from "@ttoss/ui";
-import { jsx as jsx12 } from "react/jsx-runtime";
-var FormFieldSelect = ({
-  label,
-  name,
-  id,
-  defaultValue,
-  sx,
-  css,
-  disabled,
-  tooltip,
-  onTooltipClick,
-  ...selectProps
-}) => {
-  return /* @__PURE__ */jsx12(FormField, {
-    name,
-    label,
-    id,
-    defaultValue,
-    disabled,
-    tooltip,
-    onTooltipClick,
-    sx,
-    css,
-    render: ({
-      field,
-      fieldState
-    }) => {
-      return /* @__PURE__ */jsx12(Select, {
-        ...selectProps,
-        ...field,
-        isDisabled: disabled,
-        "aria-invalid": fieldState.error ? "true" : void 0
-      });
-    }
-  });
-};
-
-// src/FormFieldTextarea.tsx
-import { Textarea } from "@ttoss/ui";
-import { jsx as jsx13 } from "react/jsx-runtime";
-var FormFieldTextarea = ({
-  label,
-  name,
-  sx,
-  ...textareaProps
-}) => {
-  const id = `form-field-textarea-${name}`;
-  return /* @__PURE__ */jsx13(FormField, {
-    label,
-    name,
-    id,
-    sx,
-    render: ({
-      field,
-      fieldState
-    }) => {
-      return /* @__PURE__ */jsx13(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 jsx14, jsxs as jsxs4 } from "react/jsx-runtime";
-var FormGroupLevelsManagerContext = /*#__PURE__*/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__ */jsx14(FormGroupLevelsManagerContext.Provider, {
-    value: {
-      levelsLength,
-      registerChild
-    },
-    children
-  });
-};
-var FormGroupContext = /*#__PURE__*/React2.createContext({});
-var useFormGroup = () => {
-  const {
-    parentLevel
-  } = React2.useContext(FormGroupContext);
-  const {
-    levelsLength
-  } = React2.useContext(FormGroupLevelsManagerContext);
-  return {
-    level: parentLevel,
-    levelsLength
-  };
-};
-var FormGroupWrapper = ({
-  title,
-  direction,
-  children,
-  ...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__ */jsx14(Box3, {
-      sx: {
-        marginBottom: "md"
-      },
-      children: /* @__PURE__ */jsx14(Text, {
-        sx: {
-          fontSize: "2xl",
-          fontWeight: "bold"
-        },
-        children: title
-      })
-    }), /* @__PURE__ */jsx14(Flex4, {
-      sx: childrenContainerSx,
-      children
-    })]
-  });
-};
-var FormGroup = props => {
-  const {
-    level
-  } = useFormGroup();
-  const currentLevel = level === void 0 ? 0 : level + 1;
-  return /* @__PURE__ */jsx14(FormGroupContext.Provider, {
-    value: {
-      parentLevel: currentLevel
-    },
-    children: currentLevel === 0 ? /* @__PURE__ */jsx14(FormGroupLevelsManager, {
-      children: /* @__PURE__ */jsx14(FormGroupWrapper, {
-        ...props
-      })
-    }) : /* @__PURE__ */jsx14(FormGroupWrapper, {
-      ...props
-    })
-  });
-};
-export { Form, FormField, FormFieldCheckbox, FormFieldCreditCardNumber, FormFieldCurrencyInput, FormFieldInput, FormFieldNumericFormat, FormFieldPassword, FormFieldPatternFormat, FormFieldRadio, FormFieldSelect, FormFieldTextarea, FormGroup, useFormGroup, yup, yupResolver };
+import { Form, FormField, FormFieldCheckbox, FormFieldCreditCardNumber, FormFieldCurrencyInput, FormFieldInput, FormFieldNumericFormat, FormFieldPassword, FormFieldPatternFormat, FormFieldRadio, FormFieldSelect, FormFieldTextarea, FormGroup, useForm, useFormGroup, yup, yupResolver } from "./chunk-NDUNPJBB.js";
+export { Form, FormField, FormFieldCheckbox, FormFieldCreditCardNumber, FormFieldCurrencyInput, FormFieldInput, FormFieldNumericFormat, FormFieldPassword, FormFieldPatternFormat, FormFieldRadio, FormFieldSelect, FormFieldTextarea, FormGroup, useForm, useFormGroup, yup, yupResolver };

package/dist/index.d.mts

@@ -2,6 +2,7 @@ export { yupResolver } from '@hookform/resolvers/yup';
 import * as react_hook_form from 'react-hook-form';
 import { FieldValues, FieldPath, UseControllerReturn, FieldPathValue } from 'react-hook-form';
 export * from 'react-hook-form';
+export { useForm } from 'react-hook-form';
 import * as yup from 'yup';
 export { yup };
 import * as react_jsx_runtime from 'react/jsx-runtime';

package/dist/index.d.ts

@@ -2,6 +2,7 @@ export { yupResolver } from '@hookform/resolvers/yup';
 import * as react_hook_form from 'react-hook-form';
 import { FieldValues, FieldPath, UseControllerReturn, FieldPathValue } from 'react-hook-form';
 export * from 'react-hook-form';
+export { useForm } from 'react-hook-form';
 import * as yup from 'yup';
 export { yup };
 import * as react_jsx_runtime from 'react/jsx-runtime';

package/dist/index.js

@@ -52,6 +52,7 @@ __export(src_exports, {
   FormFieldSelect: () => FormFieldSelect,
   FormFieldTextarea: () => FormFieldTextarea,
   FormGroup: () => FormGroup,
+  useForm: () => import_react_hook_form6.useForm,
   useFormGroup: () => useFormGroup,
   yup: () => yup,
   yupResolver: () => import_yup2.yupResolver
@@ -101,6 +102,7 @@ var import_yup = require("yup");
 // src/index.ts
 var import_yup2 = require("@hookform/resolvers/yup");
 __reExport(src_exports, require("react-hook-form"), module.exports);
+var import_react_hook_form6 = require("react-hook-form");
 var yup = __toESM(require("yup"));
 
 // src/Form.tsx
@@ -158,10 +160,14 @@ var ErrorMessage = ({
         negative: true,
         disabled,
         children: (() => {
-          if (typeof message === "string") return message;
-          if (isMessageDescriptor(message)) return /* @__PURE__ */(0, import_jsx_runtime2.jsx)(import_react_i18n2.FormattedMessage, {
-            ...message
-          });
+          if (typeof message === "string") {
+            return message;
+          }
+          if (isMessageDescriptor(message)) {
+            return /* @__PURE__ */(0, import_jsx_runtime2.jsx)(import_react_i18n2.FormattedMessage, {
+              ...message
+            });
+          }
           return JSON.stringify(message);
         })()
       });
@@ -685,6 +691,7 @@ var FormGroup = props => {
   FormFieldSelect,
   FormFieldTextarea,
   FormGroup,
+  useForm,
   useFormGroup,
   yup,
   yupResolver,