@faasjs/react 3.7.0-beta.0 → 3.7.0-beta.1

package/README.md

@@ -45,6 +45,7 @@ npm install @faasjs/react
 - [FaasDataWrapper](functions/FaasDataWrapper.md)
 - [FaasReactClient](functions/FaasReactClient.md)
 - [Form](functions/Form.md)
+- [FormContextProvider](functions/FormContextProvider.md)
 - [getClient](functions/getClient.md)
 - [OptionalWrapper](functions/OptionalWrapper.md)
 - [useConstant](functions/useConstant.md)
@@ -53,6 +54,7 @@ npm install @faasjs/react
 - [useEqualMemo](functions/useEqualMemo.md)
 - [useEqualMemoize](functions/useEqualMemoize.md)
 - [useFaas](functions/useFaas.md)
+- [useFormContext](functions/useFormContext.md)
 - [useSplittingState](functions/useSplittingState.md)
 - [withFaasData](functions/withFaasData.md)
 
@@ -76,8 +78,15 @@ npm install @faasjs/react
 - [FaasParams](type-aliases/FaasParams.md)
 - [FaasReactClientInstance](type-aliases/FaasReactClientInstance.md)
 - [FaasReactClientOptions](type-aliases/FaasReactClientOptions.md)
+- [FormContextProps](type-aliases/FormContextProps.md)
+- [FormElementTypes](type-aliases/FormElementTypes.md)
+- [FormProps](type-aliases/FormProps.md)
 - [OnError](type-aliases/OnError.md)
 - [OptionalWrapperProps](type-aliases/OptionalWrapperProps.md)
 - [Options](type-aliases/Options.md)
 - [ResponseHeaders](type-aliases/ResponseHeaders.md)
 - [useFaasOptions](type-aliases/useFaasOptions.md)
+
+## Variables
+
+- [FormDefaultElements](variables/FormDefaultElements.md)

package/dist/index.d.mts

@@ -2,7 +2,8 @@ import { FaasAction, FaasData, FaasParams } from '@faasjs/types';
 export { FaasAction, FaasData, FaasParams } from '@faasjs/types';
 import { Response, BaseUrl, ResponseError, Options, FaasBrowserClient } from '@faasjs/browser';
 export { Options, Response, ResponseError, ResponseHeaders } from '@faasjs/browser';
-import { ReactNode, Dispatch, SetStateAction, ReactElement, Component, ComponentType, ComponentProps, JSXElementConstructor } from 'react';
+import * as react from 'react';
+import { ReactNode, Dispatch, SetStateAction, ReactElement, Component, ComponentType, ComponentProps } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
 /**
@@ -376,59 +377,59 @@ type FormRules = {
     required?: boolean;
 };
 
-type FormInputComponentProps = {
+type FormInputElementProps = {
     name: string;
     value: any;
     onChange: (value: any) => void;
 };
-type FormInputComponent<Extra extends Record<string, any> = Record<string, any>> = ComponentType<FormInputComponentProps & Extra>;
-type InferFormInputProps<T extends FormInputComponent | JSXElementConstructor<any>> = T extends FormInputComponent ? Omit<ComponentProps<T>, 'name' | 'value' | 'onChange'> : Omit<ComponentProps<T>, 'name' | 'value'>;
-type FormInputProps<FormElements extends FormElementTypes = FormElementTypes> = {
-    Input: FormInputComponent;
-} | {
-    type?: 'input';
-    props?: InferFormInputProps<FormElements['input']>;
-} | {
-    type: 'select';
-    props?: InferFormInputProps<FormElements['select']>;
-};
 
-type FormLabelProps<FormElements extends FormElementTypes = FormElementTypes> = {
+type FormLabelElementProps = {
     name: string;
     rules?: FormRules;
-    label?: {
-        title?: ReactNode;
-        description?: ReactNode;
-        Label?: React.ComponentType<FormLabelProps>;
+    title?: ReactNode;
+    description?: ReactNode;
+    Label?: React.ComponentType<FormLabelElementProps>;
+    input?: {
+        Input?: ComponentType<FormInputElementProps>;
+        props?: FormInputElementProps;
     };
-    input?: FormInputProps<FormElements>;
 };
 
-type FormButtonProps = {
+type FormButtonElementProps = {
     children?: React.ReactNode;
     disabled?: boolean;
     onClick?: () => void;
 };
 
-type FormSelectOption = {
-    value: string | number;
-    label: string;
-};
 type FormElementTypes = {
-    label: ComponentType<FormLabelProps>;
-    input: FormInputComponent;
-    select: FormInputComponent<{
-        options?: FormSelectOption[];
-    }>;
-    button: ComponentType<FormButtonProps>;
+    Label: ComponentType<FormLabelElementProps>;
+    Input: ComponentType<FormInputElementProps>;
+    Button: ComponentType<FormButtonElementProps>;
 };
+declare const FormDefaultElements: FormElementTypes;
 
 type FormProps<Values extends Record<string, any> = Record<string, any>, FormElements extends FormElementTypes = FormElementTypes> = {
-    items: FormLabelProps<FormElements>[];
+    items: FormLabelElementProps[];
     onSubmit?: (values: Values) => Promise<void>;
     elements?: FormElements;
     defaultValues?: Values;
 };
 declare function FormContainer<Values extends Record<string, any> = Record<string, any>, FormElements extends FormElementTypes = FormElementTypes>({ defaultValues, elements, ...props }: FormProps<Values, FormElements>): react_jsx_runtime.JSX.Element;
 
-export { ErrorBoundary, type ErrorBoundaryProps, type ErrorChildrenProps, type FaasDataInjection, FaasDataWrapper, type FaasDataWrapperProps, FaasReactClient, type FaasReactClientInstance, type FaasReactClientOptions, FormContainer as Form, type OnError, OptionalWrapper, type OptionalWrapperProps, createSplittingContext, equal, faas, getClient, useConstant, useEqualCallback, useEqualEffect, useEqualMemo, useEqualMemoize, useFaas, type useFaasOptions, useSplittingState, withFaasData };
+type FormContextProps<Values extends Record<string, any> = Record<string, any>> = {
+    items: FormLabelElementProps[];
+    onSubmit: (values: Values) => Promise<void>;
+    Elements: FormElementTypes;
+    submitting: boolean;
+    setSubmitting: React.Dispatch<React.SetStateAction<boolean>>;
+    values: Values;
+    setValues: React.Dispatch<React.SetStateAction<Values>>;
+};
+declare const FormContextProvider: <NewT extends FormContextProps<Record<string, any>> = FormContextProps<Record<string, any>>>(props: {
+    value?: NewT;
+    children: react.ReactNode;
+    memo?: true | any[];
+}) => react.ReactNode;
+declare const useFormContext: <NewT extends FormContextProps<Record<string, any>> = FormContextProps<Record<string, any>>>() => Readonly<NewT>;
+
+export { ErrorBoundary, type ErrorBoundaryProps, type ErrorChildrenProps, type FaasDataInjection, FaasDataWrapper, type FaasDataWrapperProps, FaasReactClient, type FaasReactClientInstance, type FaasReactClientOptions, FormContainer as Form, type FormContextProps, FormContextProvider, FormDefaultElements, type FormElementTypes, type FormProps, type OnError, OptionalWrapper, type OptionalWrapperProps, createSplittingContext, equal, faas, getClient, useConstant, useEqualCallback, useEqualEffect, useEqualMemo, useEqualMemoize, useFaas, type useFaasOptions, useFormContext, useSplittingState, withFaasData };

package/dist/index.d.ts

@@ -2,7 +2,8 @@ import { FaasAction, FaasData, FaasParams } from '@faasjs/types';
 export { FaasAction, FaasData, FaasParams } from '@faasjs/types';
 import { Response, BaseUrl, ResponseError, Options, FaasBrowserClient } from '@faasjs/browser';
 export { Options, Response, ResponseError, ResponseHeaders } from '@faasjs/browser';
-import { ReactNode, Dispatch, SetStateAction, ReactElement, Component, ComponentType, ComponentProps, JSXElementConstructor } from 'react';
+import * as react from 'react';
+import { ReactNode, Dispatch, SetStateAction, ReactElement, Component, ComponentType, ComponentProps } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
 /**
@@ -376,59 +377,59 @@ type FormRules = {
     required?: boolean;
 };
 
-type FormInputComponentProps = {
+type FormInputElementProps = {
     name: string;
     value: any;
     onChange: (value: any) => void;
 };
-type FormInputComponent<Extra extends Record<string, any> = Record<string, any>> = ComponentType<FormInputComponentProps & Extra>;
-type InferFormInputProps<T extends FormInputComponent | JSXElementConstructor<any>> = T extends FormInputComponent ? Omit<ComponentProps<T>, 'name' | 'value' | 'onChange'> : Omit<ComponentProps<T>, 'name' | 'value'>;
-type FormInputProps<FormElements extends FormElementTypes = FormElementTypes> = {
-    Input: FormInputComponent;
-} | {
-    type?: 'input';
-    props?: InferFormInputProps<FormElements['input']>;
-} | {
-    type: 'select';
-    props?: InferFormInputProps<FormElements['select']>;
-};
 
-type FormLabelProps<FormElements extends FormElementTypes = FormElementTypes> = {
+type FormLabelElementProps = {
     name: string;
     rules?: FormRules;
-    label?: {
-        title?: ReactNode;
-        description?: ReactNode;
-        Label?: React.ComponentType<FormLabelProps>;
+    title?: ReactNode;
+    description?: ReactNode;
+    Label?: React.ComponentType<FormLabelElementProps>;
+    input?: {
+        Input?: ComponentType<FormInputElementProps>;
+        props?: FormInputElementProps;
     };
-    input?: FormInputProps<FormElements>;
 };
 
-type FormButtonProps = {
+type FormButtonElementProps = {
     children?: React.ReactNode;
     disabled?: boolean;
     onClick?: () => void;
 };
 
-type FormSelectOption = {
-    value: string | number;
-    label: string;
-};
 type FormElementTypes = {
-    label: ComponentType<FormLabelProps>;
-    input: FormInputComponent;
-    select: FormInputComponent<{
-        options?: FormSelectOption[];
-    }>;
-    button: ComponentType<FormButtonProps>;
+    Label: ComponentType<FormLabelElementProps>;
+    Input: ComponentType<FormInputElementProps>;
+    Button: ComponentType<FormButtonElementProps>;
 };
+declare const FormDefaultElements: FormElementTypes;
 
 type FormProps<Values extends Record<string, any> = Record<string, any>, FormElements extends FormElementTypes = FormElementTypes> = {
-    items: FormLabelProps<FormElements>[];
+    items: FormLabelElementProps[];
     onSubmit?: (values: Values) => Promise<void>;
     elements?: FormElements;
     defaultValues?: Values;
 };
 declare function FormContainer<Values extends Record<string, any> = Record<string, any>, FormElements extends FormElementTypes = FormElementTypes>({ defaultValues, elements, ...props }: FormProps<Values, FormElements>): react_jsx_runtime.JSX.Element;
 
-export { ErrorBoundary, type ErrorBoundaryProps, type ErrorChildrenProps, type FaasDataInjection, FaasDataWrapper, type FaasDataWrapperProps, FaasReactClient, type FaasReactClientInstance, type FaasReactClientOptions, FormContainer as Form, type OnError, OptionalWrapper, type OptionalWrapperProps, createSplittingContext, equal, faas, getClient, useConstant, useEqualCallback, useEqualEffect, useEqualMemo, useEqualMemoize, useFaas, type useFaasOptions, useSplittingState, withFaasData };
+type FormContextProps<Values extends Record<string, any> = Record<string, any>> = {
+    items: FormLabelElementProps[];
+    onSubmit: (values: Values) => Promise<void>;
+    Elements: FormElementTypes;
+    submitting: boolean;
+    setSubmitting: React.Dispatch<React.SetStateAction<boolean>>;
+    values: Values;
+    setValues: React.Dispatch<React.SetStateAction<Values>>;
+};
+declare const FormContextProvider: <NewT extends FormContextProps<Record<string, any>> = FormContextProps<Record<string, any>>>(props: {
+    value?: NewT;
+    children: react.ReactNode;
+    memo?: true | any[];
+}) => react.ReactNode;
+declare const useFormContext: <NewT extends FormContextProps<Record<string, any>> = FormContextProps<Record<string, any>>>() => Readonly<NewT>;
+
+export { ErrorBoundary, type ErrorBoundaryProps, type ErrorChildrenProps, type FaasDataInjection, FaasDataWrapper, type FaasDataWrapperProps, FaasReactClient, type FaasReactClientInstance, type FaasReactClientOptions, FormContainer as Form, type FormContextProps, FormContextProvider, FormDefaultElements, type FormElementTypes, type FormProps, type OnError, OptionalWrapper, type OptionalWrapperProps, createSplittingContext, equal, faas, getClient, useConstant, useEqualCallback, useEqualEffect, useEqualMemo, useEqualMemoize, useFaas, type useFaasOptions, useFormContext, useSplittingState, withFaasData };

package/dist/index.js

@@ -335,110 +335,76 @@ var OptionalWrapper = ({ condition, Wrapper, wrapperProps, children }) => {
 OptionalWrapper.whyDidYouRender = true;
 
 // src/Form/context.tsx
-var FormContext = createSplittingContext(["items", "onSubmit", "elements", "submitting", "setSubmitting", "values", "setValues"]);
+var FormContext = createSplittingContext(["items", "onSubmit", "Elements", "submitting", "setSubmitting", "values", "setValues"]);
 var FormContextProvider = FormContext.Provider;
 var useFormContext = FormContext.use;
 function FormLabel(props) {
-  const { elements } = useFormContext();
-  if (props.label?.Label) return /* @__PURE__ */ jsxRuntime.jsx(props.label.Label, { ...props });
-  return /* @__PURE__ */ jsxRuntime.jsx(elements.label, { ...props });
+  const { Elements } = useFormContext();
+  if (props.Label) return /* @__PURE__ */ jsxRuntime.jsx(props.Label, { ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx(Elements.Label, { ...props });
 }
 function FormBody() {
   const { items } = useFormContext();
   return items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(FormLabel, { ...item }, item.name));
 }
-function processValue(input, rules) {
-  let value = input;
-  if (typeof input === "object" && "target" in input) {
-    value = input.target.value;
-  }
-  switch (rules?.type) {
-    case "number":
-      return Number(value);
-    case "string":
-      return String(value);
-    default:
-      return value;
-  }
-}
-function FormInput({
+var FormInputElement = react.forwardRef(({ onChange, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("input", { ...props, onChange: (e) => onChange(e.target.value), ref }));
+var FormLabelElement = ({
   name,
-  rules,
-  ...rest
-}) {
-  const { elements, values, setValues } = useFormContext();
-  const value = values?.[name];
-  if ("Input" in rest && rest.Input) {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      rest.Input,
+  title,
+  description,
+  Label,
+  input
+}) => {
+  const { values, setValues } = 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,
+        value: values[name],
         onChange: (v) => setValues((prev) => ({
           ...prev,
           [name]: v
         }))
       }
-    );
-  }
-  if ("type" in rest || "props" in rest) {
-    switch (rest.type) {
-      case "select":
-        return /* @__PURE__ */ jsxRuntime.jsx(
-          elements.select,
-          {
-            name,
-            value,
-            onChange: (v) => setValues((prev) => ({
-              ...prev,
-              [name]: processValue(v, rules)
-            })),
-            ...rest.props
-          }
-        );
-      default:
-        return /* @__PURE__ */ jsxRuntime.jsx(
-          elements.input,
-          {
-            name,
-            value,
-            onChange: (v) => setValues((prev) => ({
-              ...prev,
-              [name]: processValue(v, rules)
-            })),
-            ...rest.props
-          }
-        );
-    }
+    ) : /* @__PURE__ */ jsxRuntime.jsx(
+      FormInputElement,
+      {
+        name,
+        value: values[name],
+        onChange: (v) => setValues((prev) => ({
+          ...prev,
+          [name]: v
+        }))
+      }
+    ),
+    description
+  ] });
+};
+var FormButtonElement = react.forwardRef(({ disabled, children, onClick, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+  "button",
+  {
+    type: "button",
+    disabled,
+    onClick,
+    ...props,
+    ref,
+    children
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    elements.input,
-    {
-      name,
-      value,
-      onChange: (v) => setValues((prev) => ({
-        ...prev,
-        [name]: processValue(v, rules)
-      }))
-    }
-  );
-}
-var FormElements = {
-  label: react.forwardRef(({ name, label, input, rules }, ref) => /* @__PURE__ */ jsxRuntime.jsxs("label", { ref, children: [
-    label?.title ?? name,
-    /* @__PURE__ */ jsxRuntime.jsx(FormInput, { name, rules, ...input }),
-    label?.description
-  ] })),
-  input: react.forwardRef(
-    (props, ref) => /* @__PURE__ */ jsxRuntime.jsx("input", { ...props, ref })
-  ),
-  select: react.forwardRef(({ options, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("select", { ...props, ref, children: options?.map((option) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: option.value, children: option.label }, option.value)) })),
-  button: react.forwardRef(({ disabled, children, onClick, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", disabled, onClick, ...props, ref, children }))
+));
+
+// src/Form/elements/index.ts
+var FormDefaultElements = {
+  Label: FormLabelElement,
+  Input: FormInputElement,
+  Button: FormButtonElement
 };
 function FormFooter() {
-  const { submitting, setSubmitting, onSubmit, values, elements } = useFormContext();
+  const { submitting, setSubmitting, onSubmit, values, Elements } = useFormContext();
   return /* @__PURE__ */ jsxRuntime.jsx(
-    elements.button,
+    Elements.Button,
     {
       disabled: submitting,
       onClick: () => {
@@ -459,7 +425,7 @@ function FormContainer({ defaultValues, elements, ...props }) {
   const states = useSplittingState({
     values: mergeValues(props.items, defaultValues),
     submitting: false,
-    elements: Object.assign(FormElements, elements)
+    Elements: Object.assign(FormDefaultElements, elements)
   });
   return /* @__PURE__ */ jsxRuntime.jsxs(
     FormContextProvider,
@@ -480,6 +446,8 @@ exports.ErrorBoundary = ErrorBoundary;
 exports.FaasDataWrapper = FaasDataWrapper;
 exports.FaasReactClient = FaasReactClient;
 exports.Form = FormContainer;
+exports.FormContextProvider = FormContextProvider;
+exports.FormDefaultElements = FormDefaultElements;
 exports.OptionalWrapper = OptionalWrapper;
 exports.createSplittingContext = createSplittingContext;
 exports.equal = equal;
@@ -491,5 +459,6 @@ exports.useEqualEffect = useEqualEffect;
 exports.useEqualMemo = useEqualMemo;
 exports.useEqualMemoize = useEqualMemoize;
 exports.useFaas = useFaas;
+exports.useFormContext = useFormContext;
 exports.useSplittingState = useSplittingState;
 exports.withFaasData = withFaasData;

package/dist/index.mjs

@@ -1,5 +1,5 @@
 import { forwardRef, useRef, useMemo, useEffect, useCallback, createContext, useState, cloneElement, Component, useContext } from 'react';
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { FaasBrowserClient } from '@faasjs/browser';
 
 // src/constant.ts
@@ -333,110 +333,76 @@ var OptionalWrapper = ({ condition, Wrapper, wrapperProps, children }) => {
 OptionalWrapper.whyDidYouRender = true;
 
 // src/Form/context.tsx
-var FormContext = createSplittingContext(["items", "onSubmit", "elements", "submitting", "setSubmitting", "values", "setValues"]);
+var FormContext = createSplittingContext(["items", "onSubmit", "Elements", "submitting", "setSubmitting", "values", "setValues"]);
 var FormContextProvider = FormContext.Provider;
 var useFormContext = FormContext.use;
 function FormLabel(props) {
-  const { elements } = useFormContext();
-  if (props.label?.Label) return /* @__PURE__ */ jsx(props.label.Label, { ...props });
-  return /* @__PURE__ */ jsx(elements.label, { ...props });
+  const { Elements } = useFormContext();
+  if (props.Label) return /* @__PURE__ */ jsx(props.Label, { ...props });
+  return /* @__PURE__ */ jsx(Elements.Label, { ...props });
 }
 function FormBody() {
   const { items } = useFormContext();
   return items.map((item) => /* @__PURE__ */ jsx(FormLabel, { ...item }, item.name));
 }
-function processValue(input, rules) {
-  let value = input;
-  if (typeof input === "object" && "target" in input) {
-    value = input.target.value;
-  }
-  switch (rules?.type) {
-    case "number":
-      return Number(value);
-    case "string":
-      return String(value);
-    default:
-      return value;
-  }
-}
-function FormInput({
+var FormInputElement = forwardRef(({ onChange, ...props }, ref) => /* @__PURE__ */ jsx("input", { ...props, onChange: (e) => onChange(e.target.value), ref }));
+var FormLabelElement = ({
   name,
-  rules,
-  ...rest
-}) {
-  const { elements, values, setValues } = useFormContext();
-  const value = values?.[name];
-  if ("Input" in rest && rest.Input) {
-    return /* @__PURE__ */ jsx(
-      rest.Input,
+  title,
+  description,
+  Label,
+  input
+}) => {
+  const { values, setValues } = 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,
+        value: values[name],
         onChange: (v) => setValues((prev) => ({
           ...prev,
           [name]: v
         }))
       }
-    );
-  }
-  if ("type" in rest || "props" in rest) {
-    switch (rest.type) {
-      case "select":
-        return /* @__PURE__ */ jsx(
-          elements.select,
-          {
-            name,
-            value,
-            onChange: (v) => setValues((prev) => ({
-              ...prev,
-              [name]: processValue(v, rules)
-            })),
-            ...rest.props
-          }
-        );
-      default:
-        return /* @__PURE__ */ jsx(
-          elements.input,
-          {
-            name,
-            value,
-            onChange: (v) => setValues((prev) => ({
-              ...prev,
-              [name]: processValue(v, rules)
-            })),
-            ...rest.props
-          }
-        );
-    }
+    ) : /* @__PURE__ */ jsx(
+      FormInputElement,
+      {
+        name,
+        value: values[name],
+        onChange: (v) => setValues((prev) => ({
+          ...prev,
+          [name]: v
+        }))
+      }
+    ),
+    description
+  ] });
+};
+var FormButtonElement = forwardRef(({ disabled, children, onClick, ...props }, ref) => /* @__PURE__ */ jsx(
+  "button",
+  {
+    type: "button",
+    disabled,
+    onClick,
+    ...props,
+    ref,
+    children
   }
-  return /* @__PURE__ */ jsx(
-    elements.input,
-    {
-      name,
-      value,
-      onChange: (v) => setValues((prev) => ({
-        ...prev,
-        [name]: processValue(v, rules)
-      }))
-    }
-  );
-}
-var FormElements = {
-  label: forwardRef(({ name, label, input, rules }, ref) => /* @__PURE__ */ jsxs("label", { ref, children: [
-    label?.title ?? name,
-    /* @__PURE__ */ jsx(FormInput, { name, rules, ...input }),
-    label?.description
-  ] })),
-  input: forwardRef(
-    (props, ref) => /* @__PURE__ */ jsx("input", { ...props, ref })
-  ),
-  select: forwardRef(({ options, ...props }, ref) => /* @__PURE__ */ jsx("select", { ...props, ref, children: options?.map((option) => /* @__PURE__ */ jsx("option", { value: option.value, children: option.label }, option.value)) })),
-  button: forwardRef(({ disabled, children, onClick, ...props }, ref) => /* @__PURE__ */ jsx("button", { type: "button", disabled, onClick, ...props, ref, children }))
+));
+
+// src/Form/elements/index.ts
+var FormDefaultElements = {
+  Label: FormLabelElement,
+  Input: FormInputElement,
+  Button: FormButtonElement
 };
 function FormFooter() {
-  const { submitting, setSubmitting, onSubmit, values, elements } = useFormContext();
+  const { submitting, setSubmitting, onSubmit, values, Elements } = useFormContext();
   return /* @__PURE__ */ jsx(
-    elements.button,
+    Elements.Button,
     {
       disabled: submitting,
       onClick: () => {
@@ -457,7 +423,7 @@ function FormContainer({ defaultValues, elements, ...props }) {
   const states = useSplittingState({
     values: mergeValues(props.items, defaultValues),
     submitting: false,
-    elements: Object.assign(FormElements, elements)
+    Elements: Object.assign(FormDefaultElements, elements)
   });
   return /* @__PURE__ */ jsxs(
     FormContextProvider,
@@ -474,4 +440,4 @@ function FormContainer({ defaultValues, elements, ...props }) {
   );
 }
 
-export { ErrorBoundary, FaasDataWrapper, FaasReactClient, FormContainer as Form, OptionalWrapper, createSplittingContext, equal, faas, getClient, useConstant, useEqualCallback, useEqualEffect, useEqualMemo, useEqualMemoize, useFaas, useSplittingState, withFaasData };
+export { ErrorBoundary, FaasDataWrapper, FaasReactClient, FormContainer as Form, FormContextProvider, FormDefaultElements, OptionalWrapper, createSplittingContext, equal, faas, getClient, useConstant, useEqualCallback, useEqualEffect, useEqualMemo, useEqualMemoize, useFaas, useFormContext, useSplittingState, withFaasData };

package/package.json

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