@ttoss/forms 0.22.1 → 0.22.3

package/dist/esm/chunk-NDUNPJBB.js

@@ -0,0 +1,638 @@
+/** 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 { useForm } 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, FormFieldPatternFormat, FormFieldCreditCardNumber, FormFieldNumericFormat, FormFieldCurrencyInput, FormFieldInput, FormFieldPassword, FormFieldRadio, FormFieldSelect, FormFieldTextarea, useFormGroup, FormGroup, yupResolver, useForm, yup };