@ttoss/forms 0.5.4 → 0.5.5

package/dist/esm/index.js

@@ -0,0 +1,95 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+
+// tsup.inject.js
+import * as React from "react";
+
+// 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) => onSubmit(data)),
+      sx,
+      children
+    })
+  });
+};
+
+// src/FormFieldInput.tsx
+import { Box as Box2, Input, Label } from "@ttoss/ui";
+
+// src/ErrorMessage.tsx
+import { useFormContext } from "react-hook-form";
+import { ErrorMessage as HookFormErrorMessage } from "@hookform/error-message";
+import { Text } from "@ttoss/ui";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var ErrorMessage = ({
+  name
+}) => {
+  const {
+    formState: { errors }
+  } = useFormContext();
+  return /* @__PURE__ */ jsx2(HookFormErrorMessage, {
+    errors,
+    name,
+    as: /* @__PURE__ */ jsx2(Text, {
+      variant: "text.error",
+      role: "alert"
+    })
+  });
+};
+
+// src/FormFieldInput.tsx
+import { useController } from "react-hook-form";
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+var FormFieldInput = ({
+  label,
+  name
+}) => {
+  const {
+    field: { onChange, onBlur, value, ref }
+  } = useController({
+    name,
+    defaultValue: ""
+  });
+  const id = `form-field-input-${name}`;
+  return /* @__PURE__ */ jsxs(Box2, {
+    children: [
+      label && /* @__PURE__ */ jsx3(Label, {
+        htmlFor: id,
+        children: label
+      }),
+      /* @__PURE__ */ jsx3(Input, {
+        ref,
+        onChange,
+        onBlur,
+        value,
+        name,
+        id
+      }),
+      /* @__PURE__ */ jsx3(ErrorMessage, {
+        name
+      })
+    ]
+  });
+};
+
+// src/FormField.tsx
+var FormField = () => {
+  return null;
+};
+FormField.Input = FormFieldInput;
+export {
+  Form,
+  FormField
+};

package/dist/index.d.ts

@@ -0,0 +1,22 @@
+import * as react_hook_form from 'react-hook-form';
+import { FieldValues } from 'react-hook-form';
+import * as React from 'react';
+import { BoxProps } from '@ttoss/ui';
+
+declare const Form: <TFieldValues extends FieldValues = FieldValues>({ children, onSubmit, sx, ...formMethods }: {
+    children?: React.ReactNode;
+    onSubmit: (data: TFieldValues) => Promise<void> | void;
+    sx?: BoxProps['sx'];
+} & {
+    children: React.ReactNode | React.ReactNode[];
+} & react_hook_form.UseFormReturn<TFieldValues, any>) => JSX.Element;
+
+declare const FormField: {
+    (): null;
+    Input: <TFieldValues extends react_hook_form.FieldValues = react_hook_form.FieldValues>({ label, name, }: {
+        label?: string | undefined;
+        name: react_hook_form.Path<TFieldValues>;
+    }) => JSX.Element;
+};
+
+export { Form, FormField };

package/dist/index.js

@@ -0,0 +1,128 @@
+/** Powered by @ttoss/config. https://ttoss.dev/docs/modules/packages/config/ */
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  Form: () => Form,
+  FormField: () => FormField
+});
+module.exports = __toCommonJS(src_exports);
+
+// tsup.inject.js
+var React = __toESM(require("react"));
+
+// src/Form.tsx
+var import_ui = require("@ttoss/ui");
+var import_react_hook_form = require("react-hook-form");
+var import_jsx_runtime = require("react/jsx-runtime");
+var Form = ({
+  children,
+  onSubmit,
+  sx,
+  ...formMethods
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_hook_form.FormProvider, {
+    ...formMethods,
+    children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui.Box, {
+      as: "form",
+      variant: "forms.form",
+      onSubmit: formMethods.handleSubmit((data) => onSubmit(data)),
+      sx,
+      children
+    })
+  });
+};
+
+// src/FormFieldInput.tsx
+var import_ui3 = require("@ttoss/ui");
+
+// src/ErrorMessage.tsx
+var import_react_hook_form2 = require("react-hook-form");
+var import_error_message = require("@hookform/error-message");
+var import_ui2 = require("@ttoss/ui");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var ErrorMessage = ({
+  name
+}) => {
+  const {
+    formState: { errors }
+  } = (0, import_react_hook_form2.useFormContext)();
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_error_message.ErrorMessage, {
+    errors,
+    name,
+    as: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_ui2.Text, {
+      variant: "text.error",
+      role: "alert"
+    })
+  });
+};
+
+// src/FormFieldInput.tsx
+var import_react_hook_form3 = require("react-hook-form");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var FormFieldInput = ({
+  label,
+  name
+}) => {
+  const {
+    field: { onChange, onBlur, value, ref }
+  } = (0, import_react_hook_form3.useController)({
+    name,
+    defaultValue: ""
+  });
+  const id = `form-field-input-${name}`;
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_ui3.Box, {
+    children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_ui3.Label, {
+        htmlFor: id,
+        children: label
+      }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_ui3.Input, {
+        ref,
+        onChange,
+        onBlur,
+        value,
+        name,
+        id
+      }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ErrorMessage, {
+        name
+      })
+    ]
+  });
+};
+
+// src/FormField.tsx
+var FormField = () => {
+  return null;
+};
+FormField.Input = FormFieldInput;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Form,
+  FormField
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/forms",
-  "version": "0.5.4",
+  "version": "0.5.5",
   "license": "UNLICENSED",
   "author": "ttoss",
   "contributors": [
@@ -29,7 +29,7 @@
     "@hookform/resolvers": "^2.9.8",
     "@ttoss/config": "^1.18.3",
     "@ttoss/test-utils": "^1.16.10",
-    "@ttoss/ui": "^1.20.4",
+    "@ttoss/ui": "^1.21.0",
     "@types/jest": "^29.0.3",
     "jest": "^29.0.3",
     "react": "^18.2.0",
@@ -42,5 +42,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b9f9de9b8389be76965f125b593166f10c2171e6"
+  "gitHead": "8407ac0199e566fb6695f0caddb9f6bed4bf6578"
 }