@faasjs/react 3.7.0-beta.7 → 3.7.0-beta.8

package/README.md

@@ -34,7 +34,7 @@ React plugin for FaasJS.
 ## Install
 
 ```sh
-npm install @faasjs/react
+npm install @faasjs/react react
 ```
 
 ## Functions
@@ -46,6 +46,7 @@ npm install @faasjs/react
 - [FaasReactClient](functions/FaasReactClient.md)
 - [Form](functions/Form.md)
 - [FormContextProvider](functions/FormContextProvider.md)
+- [FormItem](functions/FormItem.md)
 - [getClient](functions/getClient.md)
 - [OptionalWrapper](functions/OptionalWrapper.md)
 - [useConstant](functions/useConstant.md)
@@ -56,6 +57,7 @@ npm install @faasjs/react
 - [useFaas](functions/useFaas.md)
 - [useFormContext](functions/useFormContext.md)
 - [useSplittingState](functions/useSplittingState.md)
+- [validValues](functions/validValues.md)
 - [withFaasData](functions/withFaasData.md)
 
 ## Classes
@@ -80,10 +82,16 @@ npm install @faasjs/react
 - [FaasReactClientOptions](type-aliases/FaasReactClientOptions.md)
 - [FormButtonElementProps](type-aliases/FormButtonElementProps.md)
 - [FormContextProps](type-aliases/FormContextProps.md)
+- [FormDefaultRulesOptions](type-aliases/FormDefaultRulesOptions.md)
 - [FormElementTypes](type-aliases/FormElementTypes.md)
 - [FormInputElementProps](type-aliases/FormInputElementProps.md)
+- [FormItemName](type-aliases/FormItemName.md)
+- [FormItemProps](type-aliases/FormItemProps.md)
 - [FormLabelElementProps](type-aliases/FormLabelElementProps.md)
 - [FormProps](type-aliases/FormProps.md)
+- [FormRule](type-aliases/FormRule.md)
+- [FormRules](type-aliases/FormRules.md)
+- [InferFormRulesOptions](type-aliases/InferFormRulesOptions.md)
 - [OnError](type-aliases/OnError.md)
 - [OptionalWrapperProps](type-aliases/OptionalWrapperProps.md)
 - [Options](type-aliases/Options.md)
@@ -93,3 +101,4 @@ npm install @faasjs/react
 ## Variables
 
 - [FormDefaultElements](variables/FormDefaultElements.md)
+- [FormDefaultRules](variables/FormDefaultRules.md)

package/dist/index.d.mts

@@ -408,6 +408,22 @@ type FormInputElementProps = {
     onChange: (value: any) => void;
 };
 
+type FormLabelElementProps = {
+    name: string;
+    title?: ReactNode;
+    description?: ReactNode;
+    error?: Error;
+    /** as Input element */
+    children: ReactNode;
+};
+
+type FormElementTypes = {
+    Label: ComponentType<FormLabelElementProps>;
+    Input: ComponentType<FormInputElementProps>;
+    Button: ComponentType<FormButtonElementProps>;
+};
+declare const FormDefaultElements: FormElementTypes;
+
 declare const FormDefaultLang: {
     submit: string;
     required: string;
@@ -416,17 +432,15 @@ declare const FormDefaultLang: {
 };
 type FormLang = typeof FormDefaultLang;
 
-type FormError = {
-    message: string;
-};
-type FormRule<Options = any> = (value: any, options?: Options, lang?: FormLang) => Promise<FormError | undefined>;
-type InferRuleOption<T> = T extends (value: any, options: infer O, lang?: FormLang) => Promise<FormError | undefined> ? O : never;
+type FormRule<Options = any> = (value: any, options?: Options, lang?: FormLang) => Promise<void>;
+type InferRuleOption<T> = T extends (value: any, options: infer O, lang?: FormLang) => Promise<void> ? O : never;
 type FormRules = Record<string, FormRule>;
 type InferFormRulesOptions<T> = {
     [K in keyof T]: InferRuleOption<T[K]>;
 };
 declare const FormDefaultRules: FormRules;
 type FormDefaultRulesOptions = InferFormRulesOptions<typeof FormDefaultRules>;
+declare function validValues(rules: FormRules, items: FormItemProps[], values: Record<string, any>, lang: FormLang): Promise<Record<string, Error>>;
 
 type InferFormInputProps<T extends ComponentType<FormInputElementProps> | JSXElementConstructor<any>> = T extends ComponentType<FormInputElementProps> ? Omit<ComponentProps<T>, 'name' | 'value' | 'onChange'> : Omit<ComponentProps<T>, 'name' | 'value'>;
 type FormInputProps<FormElements extends FormElementTypes = FormElementTypes> = {
@@ -434,30 +448,46 @@ type FormInputProps<FormElements extends FormElementTypes = FormElementTypes> =
     props?: InferFormInputProps<FormElements['Input']>;
 };
 
-type FormLabelElementProps<FormElements extends FormElementTypes = FormElementTypes, FormRulesOptions extends Record<string, any> = FormDefaultRulesOptions> = {
-    name: string;
-    rules?: FormRulesOptions;
-    title?: ReactNode;
-    description?: ReactNode;
-    Label?: FormElements['Label'];
+type FormItemName = string;
+type FormItemProps<FormElements extends FormElementTypes = FormElementTypes, FormRulesOptions extends Record<string, any> = FormDefaultRulesOptions> = {
+    name: FormItemName;
+    label?: Omit<FormLabelElementProps, 'name'> & {
+        Label?: ComponentType<FormLabelElementProps>;
+    };
     input?: FormInputProps<FormElements>;
+    rules?: FormRulesOptions;
 };
-
-type FormElementTypes = {
-    Label: ComponentType<FormLabelElementProps>;
-    Input: ComponentType<FormInputElementProps>;
-    Button: ComponentType<FormButtonElementProps>;
-};
-declare const FormDefaultElements: FormElementTypes;
+declare function FormItem(props: FormItemProps): react_jsx_runtime.JSX.Element;
+declare namespace FormItem {
+    var displayName: string;
+    var whyDidYouRender: boolean;
+}
 
 type FormProps<Values extends Record<string, any> = Record<string, any>, FormElements extends FormElementTypes = FormElementTypes, Rules extends FormRules = typeof FormDefaultRules> = {
-    items: FormLabelElementProps<FormElements, InferFormRulesOptions<Rules>>[];
+    items: FormItemProps<FormElements, InferFormRulesOptions<Rules>>[];
     onSubmit?: (values: Values) => Promise<void>;
     Elements?: Partial<FormElements>;
     lang?: Partial<FormLang>;
     defaultValues?: Values;
     rules?: typeof FormDefaultRules & Rules;
 };
+/**
+ * FormContainer component is a wrapper that provides context and state management for form elements.
+ * It initializes form states such as values, errors, submitting status, elements, language, and rules.
+ *
+ * @template Values - The type of form values, defaults to Record<string, any>.
+ * @template FormElements - The type of form elements, defaults to FormElementTypes.
+ * @template Rules - The type of form rules, defaults to FormDefaultRules.
+ *
+ * @param {FormProps<Values, FormElements, Rules>} props - The properties for the FormContainer component.
+ * @param {Values} props.defaultValues - The default values for the form fields.
+ * @param {FormElements} props.Elements - The form elements to be used in the form.
+ * @param {Rules} props.rules - The validation rules for the form fields.
+ * @param {FormLang} props.lang - The language settings for the form.
+ * @param {Partial<FormContextProps>} props - Additional properties for the form context.
+ *
+ * @returns {JSX.Element} The FormContainer component.
+ */
 declare function FormContainer<Values extends Record<string, any> = Record<string, any>, FormElements extends FormElementTypes = FormElementTypes, Rules extends FormRules = typeof FormDefaultRules>({ defaultValues, Elements, rules, lang, ...props }: FormProps<Values, FormElements, Rules>): react_jsx_runtime.JSX.Element;
 declare namespace FormContainer {
     var displayName: string;
@@ -474,8 +504,8 @@ type FormContextProps<Values extends Record<string, any> = Record<string, any>,
     setSubmitting: Dispatch<SetStateAction<boolean>>;
     values: Values;
     setValues: Dispatch<SetStateAction<Values>>;
-    errors: Record<string, FormError>;
-    setErrors: Dispatch<SetStateAction<Record<string, FormError>>>;
+    errors: Record<string, Error>;
+    setErrors: Dispatch<SetStateAction<Record<string, Error>>>;
 };
 declare const FormContextProvider: <NewT extends FormContextProps<Record<string, any>, FormRules> = FormContextProps<Record<string, any>, FormRules>>(props: {
     value?: Partial<NewT>;
@@ -485,4 +515,4 @@ declare const FormContextProvider: <NewT extends FormContextProps<Record<string,
 }) => react.ReactNode;
 declare const useFormContext: <NewT extends FormContextProps<Record<string, any>, FormRules> = FormContextProps<Record<string, any>, FormRules>>() => Readonly<NewT>;
 
-export { ErrorBoundary, type ErrorBoundaryProps, type ErrorChildrenProps, type FaasDataInjection, FaasDataWrapper, type FaasDataWrapperProps, FaasReactClient, type FaasReactClientInstance, type FaasReactClientOptions, FormContainer as Form, type FormButtonElementProps, type FormContextProps, FormContextProvider, FormDefaultElements, type FormElementTypes, type FormInputElementProps, type FormLabelElementProps, type FormProps, type OnError, OptionalWrapper, type OptionalWrapperProps, createSplittingContext, equal, faas, getClient, useConstant, useEqualCallback, useEqualEffect, useEqualMemo, useEqualMemoize, useFaas, type useFaasOptions, useFormContext, useSplittingState, withFaasData };
+export { ErrorBoundary, type ErrorBoundaryProps, type ErrorChildrenProps, type FaasDataInjection, FaasDataWrapper, type FaasDataWrapperProps, FaasReactClient, type FaasReactClientInstance, type FaasReactClientOptions, FormContainer as Form, type FormButtonElementProps, type FormContextProps, FormContextProvider, FormDefaultElements, FormDefaultRules, type FormDefaultRulesOptions, type FormElementTypes, type FormInputElementProps, FormItem, type FormItemName, type FormItemProps, type FormLabelElementProps, type FormProps, type FormRule, type FormRules, type InferFormRulesOptions, type OnError, OptionalWrapper, type OptionalWrapperProps, createSplittingContext, equal, faas, getClient, useConstant, useEqualCallback, useEqualEffect, useEqualMemo, useEqualMemoize, useFaas, type useFaasOptions, useFormContext, useSplittingState, validValues, withFaasData };

package/dist/index.d.ts

@@ -408,6 +408,22 @@ type FormInputElementProps = {
     onChange: (value: any) => void;
 };
 
+type FormLabelElementProps = {
+    name: string;
+    title?: ReactNode;
+    description?: ReactNode;
+    error?: Error;
+    /** as Input element */
+    children: ReactNode;
+};
+
+type FormElementTypes = {
+    Label: ComponentType<FormLabelElementProps>;
+    Input: ComponentType<FormInputElementProps>;
+    Button: ComponentType<FormButtonElementProps>;
+};
+declare const FormDefaultElements: FormElementTypes;
+
 declare const FormDefaultLang: {
     submit: string;
     required: string;
@@ -416,17 +432,15 @@ declare const FormDefaultLang: {
 };
 type FormLang = typeof FormDefaultLang;
 
-type FormError = {
-    message: string;
-};
-type FormRule<Options = any> = (value: any, options?: Options, lang?: FormLang) => Promise<FormError | undefined>;
-type InferRuleOption<T> = T extends (value: any, options: infer O, lang?: FormLang) => Promise<FormError | undefined> ? O : never;
+type FormRule<Options = any> = (value: any, options?: Options, lang?: FormLang) => Promise<void>;
+type InferRuleOption<T> = T extends (value: any, options: infer O, lang?: FormLang) => Promise<void> ? O : never;
 type FormRules = Record<string, FormRule>;
 type InferFormRulesOptions<T> = {
     [K in keyof T]: InferRuleOption<T[K]>;
 };
 declare const FormDefaultRules: FormRules;
 type FormDefaultRulesOptions = InferFormRulesOptions<typeof FormDefaultRules>;
+declare function validValues(rules: FormRules, items: FormItemProps[], values: Record<string, any>, lang: FormLang): Promise<Record<string, Error>>;
 
 type InferFormInputProps<T extends ComponentType<FormInputElementProps> | JSXElementConstructor<any>> = T extends ComponentType<FormInputElementProps> ? Omit<ComponentProps<T>, 'name' | 'value' | 'onChange'> : Omit<ComponentProps<T>, 'name' | 'value'>;
 type FormInputProps<FormElements extends FormElementTypes = FormElementTypes> = {
@@ -434,30 +448,46 @@ type FormInputProps<FormElements extends FormElementTypes = FormElementTypes> =
     props?: InferFormInputProps<FormElements['Input']>;
 };
 
-type FormLabelElementProps<FormElements extends FormElementTypes = FormElementTypes, FormRulesOptions extends Record<string, any> = FormDefaultRulesOptions> = {
-    name: string;
-    rules?: FormRulesOptions;
-    title?: ReactNode;
-    description?: ReactNode;
-    Label?: FormElements['Label'];
+type FormItemName = string;
+type FormItemProps<FormElements extends FormElementTypes = FormElementTypes, FormRulesOptions extends Record<string, any> = FormDefaultRulesOptions> = {
+    name: FormItemName;
+    label?: Omit<FormLabelElementProps, 'name'> & {
+        Label?: ComponentType<FormLabelElementProps>;
+    };
     input?: FormInputProps<FormElements>;
+    rules?: FormRulesOptions;
 };
-
-type FormElementTypes = {
-    Label: ComponentType<FormLabelElementProps>;
-    Input: ComponentType<FormInputElementProps>;
-    Button: ComponentType<FormButtonElementProps>;
-};
-declare const FormDefaultElements: FormElementTypes;
+declare function FormItem(props: FormItemProps): react_jsx_runtime.JSX.Element;
+declare namespace FormItem {
+    var displayName: string;
+    var whyDidYouRender: boolean;
+}
 
 type FormProps<Values extends Record<string, any> = Record<string, any>, FormElements extends FormElementTypes = FormElementTypes, Rules extends FormRules = typeof FormDefaultRules> = {
-    items: FormLabelElementProps<FormElements, InferFormRulesOptions<Rules>>[];
+    items: FormItemProps<FormElements, InferFormRulesOptions<Rules>>[];
     onSubmit?: (values: Values) => Promise<void>;
     Elements?: Partial<FormElements>;
     lang?: Partial<FormLang>;
     defaultValues?: Values;
     rules?: typeof FormDefaultRules & Rules;
 };
+/**
+ * FormContainer component is a wrapper that provides context and state management for form elements.
+ * It initializes form states such as values, errors, submitting status, elements, language, and rules.
+ *
+ * @template Values - The type of form values, defaults to Record<string, any>.
+ * @template FormElements - The type of form elements, defaults to FormElementTypes.
+ * @template Rules - The type of form rules, defaults to FormDefaultRules.
+ *
+ * @param {FormProps<Values, FormElements, Rules>} props - The properties for the FormContainer component.
+ * @param {Values} props.defaultValues - The default values for the form fields.
+ * @param {FormElements} props.Elements - The form elements to be used in the form.
+ * @param {Rules} props.rules - The validation rules for the form fields.
+ * @param {FormLang} props.lang - The language settings for the form.
+ * @param {Partial<FormContextProps>} props - Additional properties for the form context.
+ *
+ * @returns {JSX.Element} The FormContainer component.
+ */
 declare function FormContainer<Values extends Record<string, any> = Record<string, any>, FormElements extends FormElementTypes = FormElementTypes, Rules extends FormRules = typeof FormDefaultRules>({ defaultValues, Elements, rules, lang, ...props }: FormProps<Values, FormElements, Rules>): react_jsx_runtime.JSX.Element;
 declare namespace FormContainer {
     var displayName: string;
@@ -474,8 +504,8 @@ type FormContextProps<Values extends Record<string, any> = Record<string, any>,
     setSubmitting: Dispatch<SetStateAction<boolean>>;
     values: Values;
     setValues: Dispatch<SetStateAction<Values>>;
-    errors: Record<string, FormError>;
-    setErrors: Dispatch<SetStateAction<Record<string, FormError>>>;
+    errors: Record<string, Error>;
+    setErrors: Dispatch<SetStateAction<Record<string, Error>>>;
 };
 declare const FormContextProvider: <NewT extends FormContextProps<Record<string, any>, FormRules> = FormContextProps<Record<string, any>, FormRules>>(props: {
     value?: Partial<NewT>;
@@ -485,4 +515,4 @@ declare const FormContextProvider: <NewT extends FormContextProps<Record<string,
 }) => react.ReactNode;
 declare const useFormContext: <NewT extends FormContextProps<Record<string, any>, FormRules> = FormContextProps<Record<string, any>, FormRules>>() => Readonly<NewT>;
 
-export { ErrorBoundary, type ErrorBoundaryProps, type ErrorChildrenProps, type FaasDataInjection, FaasDataWrapper, type FaasDataWrapperProps, FaasReactClient, type FaasReactClientInstance, type FaasReactClientOptions, FormContainer as Form, type FormButtonElementProps, type FormContextProps, FormContextProvider, FormDefaultElements, type FormElementTypes, type FormInputElementProps, type FormLabelElementProps, type FormProps, type OnError, OptionalWrapper, type OptionalWrapperProps, createSplittingContext, equal, faas, getClient, useConstant, useEqualCallback, useEqualEffect, useEqualMemo, useEqualMemoize, useFaas, type useFaasOptions, useFormContext, useSplittingState, withFaasData };
+export { ErrorBoundary, type ErrorBoundaryProps, type ErrorChildrenProps, type FaasDataInjection, FaasDataWrapper, type FaasDataWrapperProps, FaasReactClient, type FaasReactClientInstance, type FaasReactClientOptions, FormContainer as Form, type FormButtonElementProps, type FormContextProps, FormContextProvider, FormDefaultElements, FormDefaultRules, type FormDefaultRulesOptions, type FormElementTypes, type FormInputElementProps, FormItem, type FormItemName, type FormItemProps, type FormLabelElementProps, type FormProps, type FormRule, type FormRules, type InferFormRulesOptions, type OnError, OptionalWrapper, type OptionalWrapperProps, createSplittingContext, equal, faas, getClient, useConstant, useEqualCallback, useEqualEffect, useEqualMemo, useEqualMemoize, useFaas, type useFaasOptions, useFormContext, useSplittingState, validValues, withFaasData };

package/dist/index.js

@@ -49,7 +49,6 @@ function equal(a, b) {
       return a === b;
     case Object: {
       const keys = Object.keys(a);
-      if (keys.length !== Object.keys(b).length) return false;
       for (const key of keys) {
         if (!equal(a[key], b[key])) return false;
       }
@@ -360,16 +359,27 @@ var FormContext = createSplittingContext([
 ]);
 var FormContextProvider = FormContext.Provider;
 var useFormContext = FormContext.use;
-function FormLabel(props) {
-  const { Elements } = useFormContext();
-  if (props.Label) return /* @__PURE__ */ jsxRuntime.jsx(props.Label, { ...props });
-  return /* @__PURE__ */ jsxRuntime.jsx(Elements.Label, { ...props });
+function FormItem(props) {
+  const { Elements, values, setValues } = useFormContext();
+  const Label = props.label?.Label ?? Elements.Label;
+  const Input = props.input?.Input ?? Elements.Input;
+  return /* @__PURE__ */ jsxRuntime.jsx(Label, { name: props.name, ...props.label, children: /* @__PURE__ */ jsxRuntime.jsx(
+    Input,
+    {
+      name: props.name,
+      value: values[props.name],
+      onChange: (v) => setValues((prev) => ({
+        ...prev,
+        [props.name]: v
+      }))
+    }
+  ) });
 }
-FormLabel.displayName = "FormLabel";
-FormLabel.whyDidYouRender = true;
+FormItem.displayName = "FormItem";
+FormItem.whyDidYouRender = true;
 function FormBody() {
   const { items } = useFormContext();
-  return items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(FormLabel, { ...item }, item.name));
+  return items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(FormItem, { ...item }, item.name));
 }
 FormBody.displayName = "FormBody";
 FormBody.whyDidYouRender = true;
@@ -378,20 +388,16 @@ FormBody.whyDidYouRender = true;
 var FormDefaultRules = {
   required: async (value, _, lang) => {
     if (value === null || value === void 0 || value === "" || Number.isNaN(value)) {
-      return { message: lang?.required };
+      throw Error(lang?.required);
     }
   },
   type: async (value, options, lang) => {
     switch (options) {
       case "string":
-        if (typeof value !== "string") {
-          return { message: lang?.string };
-        }
+        if (typeof value !== "string") throw Error(lang?.string);
         break;
       case "number":
-        if (Number.isNaN(Number(value))) {
-          return { message: lang?.number };
-        }
+        if (Number.isNaN(Number(value))) throw Error(lang?.number);
         break;
     }
   },
@@ -406,13 +412,9 @@ async function validValues(rules, items, values, lang) {
     const rulesOptions = item.rules;
     if (rulesOptions) {
       for (const [name, options] of Object.entries(rulesOptions)) {
-        const handler = rules[name];
-        if (!handler) {
-          console.warn(`Rule "${name}" is not defined`);
-          continue;
-        }
-        const error = await handler(value, options, lang);
-        if (error) {
+        try {
+          await rules[name](value, options, lang);
+        } catch (error) {
           errors[item.name] = error;
           break;
         }
@@ -473,45 +475,14 @@ var FormLabelElement = ({
   name,
   title,
   description,
-  Label,
-  input
+  error,
+  children
 }) => {
-  const { values, setValues, errors } = useFormContext();
-  if (Label)
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      Label,
-      {
-        name,
-        title,
-        description,
-        input
-      }
-    );
   return /* @__PURE__ */ jsxRuntime.jsxs("label", { children: [
     title ?? name,
-    input?.Input ? /* @__PURE__ */ jsxRuntime.jsx(
-      input.Input,
-      {
-        name,
-        value: values[name],
-        onChange: (v) => setValues((prev) => ({
-          ...prev,
-          [name]: v
-        }))
-      }
-    ) : /* @__PURE__ */ jsxRuntime.jsx(
-      FormInputElement,
-      {
-        name,
-        value: values[name],
-        onChange: (v) => setValues((prev) => ({
-          ...prev,
-          [name]: v
-        }))
-      }
-    ),
+    children,
     description,
-    errors[name]?.message
+    error && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { color: "red" }, children: error.message })
   ] });
 };
 FormLabelElement.displayName = "FormLabelElement";
@@ -576,6 +547,8 @@ exports.FaasReactClient = FaasReactClient;
 exports.Form = FormContainer;
 exports.FormContextProvider = FormContextProvider;
 exports.FormDefaultElements = FormDefaultElements;
+exports.FormDefaultRules = FormDefaultRules;
+exports.FormItem = FormItem;
 exports.OptionalWrapper = OptionalWrapper;
 exports.createSplittingContext = createSplittingContext;
 exports.equal = equal;
@@ -589,4 +562,5 @@ exports.useEqualMemoize = useEqualMemoize;
 exports.useFaas = useFaas;
 exports.useFormContext = useFormContext;
 exports.useSplittingState = useSplittingState;
+exports.validValues = validValues;
 exports.withFaasData = withFaasData;

package/dist/index.mjs

@@ -47,7 +47,6 @@ function equal(a, b) {
       return a === b;
     case Object: {
       const keys = Object.keys(a);
-      if (keys.length !== Object.keys(b).length) return false;
       for (const key of keys) {
         if (!equal(a[key], b[key])) return false;
       }
@@ -358,16 +357,27 @@ var FormContext = createSplittingContext([
 ]);
 var FormContextProvider = FormContext.Provider;
 var useFormContext = FormContext.use;
-function FormLabel(props) {
-  const { Elements } = useFormContext();
-  if (props.Label) return /* @__PURE__ */ jsx(props.Label, { ...props });
-  return /* @__PURE__ */ jsx(Elements.Label, { ...props });
+function FormItem(props) {
+  const { Elements, values, setValues } = useFormContext();
+  const Label = props.label?.Label ?? Elements.Label;
+  const Input = props.input?.Input ?? Elements.Input;
+  return /* @__PURE__ */ jsx(Label, { name: props.name, ...props.label, children: /* @__PURE__ */ jsx(
+    Input,
+    {
+      name: props.name,
+      value: values[props.name],
+      onChange: (v) => setValues((prev) => ({
+        ...prev,
+        [props.name]: v
+      }))
+    }
+  ) });
 }
-FormLabel.displayName = "FormLabel";
-FormLabel.whyDidYouRender = true;
+FormItem.displayName = "FormItem";
+FormItem.whyDidYouRender = true;
 function FormBody() {
   const { items } = useFormContext();
-  return items.map((item) => /* @__PURE__ */ jsx(FormLabel, { ...item }, item.name));
+  return items.map((item) => /* @__PURE__ */ jsx(FormItem, { ...item }, item.name));
 }
 FormBody.displayName = "FormBody";
 FormBody.whyDidYouRender = true;
@@ -376,20 +386,16 @@ FormBody.whyDidYouRender = true;
 var FormDefaultRules = {
   required: async (value, _, lang) => {
     if (value === null || value === void 0 || value === "" || Number.isNaN(value)) {
-      return { message: lang?.required };
+      throw Error(lang?.required);
     }
   },
   type: async (value, options, lang) => {
     switch (options) {
       case "string":
-        if (typeof value !== "string") {
-          return { message: lang?.string };
-        }
+        if (typeof value !== "string") throw Error(lang?.string);
         break;
       case "number":
-        if (Number.isNaN(Number(value))) {
-          return { message: lang?.number };
-        }
+        if (Number.isNaN(Number(value))) throw Error(lang?.number);
         break;
     }
   },
@@ -404,13 +410,9 @@ async function validValues(rules, items, values, lang) {
     const rulesOptions = item.rules;
     if (rulesOptions) {
       for (const [name, options] of Object.entries(rulesOptions)) {
-        const handler = rules[name];
-        if (!handler) {
-          console.warn(`Rule "${name}" is not defined`);
-          continue;
-        }
-        const error = await handler(value, options, lang);
-        if (error) {
+        try {
+          await rules[name](value, options, lang);
+        } catch (error) {
           errors[item.name] = error;
           break;
         }
@@ -471,45 +473,14 @@ var FormLabelElement = ({
   name,
   title,
   description,
-  Label,
-  input
+  error,
+  children
 }) => {
-  const { values, setValues, errors } = useFormContext();
-  if (Label)
-    return /* @__PURE__ */ jsx(
-      Label,
-      {
-        name,
-        title,
-        description,
-        input
-      }
-    );
   return /* @__PURE__ */ jsxs("label", { children: [
     title ?? name,
-    input?.Input ? /* @__PURE__ */ jsx(
-      input.Input,
-      {
-        name,
-        value: values[name],
-        onChange: (v) => setValues((prev) => ({
-          ...prev,
-          [name]: v
-        }))
-      }
-    ) : /* @__PURE__ */ jsx(
-      FormInputElement,
-      {
-        name,
-        value: values[name],
-        onChange: (v) => setValues((prev) => ({
-          ...prev,
-          [name]: v
-        }))
-      }
-    ),
+    children,
     description,
-    errors[name]?.message
+    error && /* @__PURE__ */ jsx("div", { style: { color: "red" }, children: error.message })
   ] });
 };
 FormLabelElement.displayName = "FormLabelElement";
@@ -568,4 +539,4 @@ function FormContainer({
 FormContainer.displayName = "FormContainer";
 FormContainer.whyDidYouRender = true;
 
-export { ErrorBoundary, FaasDataWrapper, FaasReactClient, FormContainer as Form, FormContextProvider, FormDefaultElements, OptionalWrapper, createSplittingContext, equal, faas, getClient, useConstant, useEqualCallback, useEqualEffect, useEqualMemo, useEqualMemoize, useFaas, useFormContext, useSplittingState, withFaasData };
+export { ErrorBoundary, FaasDataWrapper, FaasReactClient, FormContainer as Form, FormContextProvider, FormDefaultElements, FormDefaultRules, FormItem, OptionalWrapper, createSplittingContext, equal, faas, getClient, useConstant, useEqualCallback, useEqualEffect, useEqualMemo, useEqualMemoize, useFaas, useFormContext, useSplittingState, validValues, withFaasData };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faasjs/react",
-  "version": "3.7.0-beta.7",
+  "version": "3.7.0-beta.8",
   "license": "MIT",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -34,10 +34,10 @@
     "dist"
   ],
   "peerDependencies": {
-    "@faasjs/browser": "3.7.0-beta.7"
+    "@faasjs/browser": "3.7.0-beta.8"
   },
   "devDependencies": {
-    "@faasjs/browser": "3.7.0-beta.7",
+    "@faasjs/browser": "3.7.0-beta.8",
     "@types/react": "*",
     "react": "*"
   },