@faasjs/react 3.6.0 → 3.7.0-beta.0

package/README.md

@@ -22,6 +22,7 @@ React plugin for FaasJS.
     - [useEqualCallback](functions/useEqualCallback.md): Memoize a callback with deep equality.
     - [useConstant](functions/useConstant.md): Create a constant value with hooks.
     - [createSplittingContext](functions/createSplittingContext.md): Create a context for code splitting.
+    - [splittingState](functions/splittingState.md): Create a splitting states.
     - [OptionalWrapper](functions/OptionalWrapper.md): Render a component optionally.
     - [ErrorBoundary](classes/ErrorBoundary.md): Catch errors in the component tree.
   - Fetch Data:
@@ -43,6 +44,7 @@ npm install @faasjs/react
 - [faas](functions/faas.md)
 - [FaasDataWrapper](functions/FaasDataWrapper.md)
 - [FaasReactClient](functions/FaasReactClient.md)
+- [Form](functions/Form.md)
 - [getClient](functions/getClient.md)
 - [OptionalWrapper](functions/OptionalWrapper.md)
 - [useConstant](functions/useConstant.md)
@@ -51,6 +53,7 @@ npm install @faasjs/react
 - [useEqualMemo](functions/useEqualMemo.md)
 - [useEqualMemoize](functions/useEqualMemoize.md)
 - [useFaas](functions/useFaas.md)
+- [useSplittingState](functions/useSplittingState.md)
 - [withFaasData](functions/withFaasData.md)
 
 ## Classes

package/dist/index.d.mts

@@ -2,7 +2,7 @@ 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, ReactElement, Component, ComponentType, ComponentProps } from 'react';
+import { ReactNode, Dispatch, SetStateAction, ReactElement, Component, ComponentType, ComponentProps, JSXElementConstructor } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
 /**
@@ -105,21 +105,75 @@ declare function createSplittingContext<T extends Record<string, any>>(defaultVa
 } | (keyof T)[]): {
     /**
      * The provider component of the splitting context.
+     *
      * @see https://faasjs.com/doc/react/functions/createSplittingContext.html#provider
+     *
+     * @example
+     * ```tsx
+     * function App() {
+     *   const [value, setValue] = useState(0)
+     *
+     *   return (
+     *     <Provider value={{ value, setValue }}>
+     *       <ReaderComponent />
+     *       <WriterComponent />
+     *     </Provider>
+     *   )
+     * }
+     * ```
      */
     Provider<NewT extends T = T>(props: {
         value?: NewT;
         children: ReactNode;
+        /**
+         * Whether to use memoization for the children.
+         *
+         * @default false
+         *
+         * `true`: memoize the children without dependencies.
+         * `any[]`: memoize the children with specific dependencies.
+         */
         memo?: true | any[];
     }): ReactNode;
     /**
      * The hook to use the splitting context.
      *
      * @see https://faasjs.com/doc/react/functions/createSplittingContext.html#use
+     *
+     * @example
+     * ```tsx
+     * function ChildComponent() {
+     *   const { value, setValue } = use()
+     *
+     *   return <div>{value}<button onClick={() => setValue(1)}>change value</button></div>
+     * }
+     * ```
      */
     use: <NewT extends T = T>() => Readonly<NewT>;
 };
 
+type SetPrefix<S extends string | number | symbol> = S extends string ? (S extends `${infer First}${infer Rest}` ? `set${Capitalize<First>}${Rest}` : never) : never;
+type StateSetters<T> = {
+    [K in keyof T as SetPrefix<K>]: Dispatch<SetStateAction<T[K]>>;
+};
+type StatesWithSetters<T> = T & StateSetters<T>;
+/**
+ * A hook that initializes and splits state variables and their corresponding setters.
+ *
+ * @template T - A generic type that extends a record with string keys and any values.
+ * @param {T} initialStates - An object containing the initial states.
+ *
+ * @example
+ * ```tsx
+ * function Counter() {
+ *   const { count, setCount, name, setName } = useSplittingState({ count: 0, name: 'John' });
+ *
+ *   return <>{name}: {count}</>
+ * }
+ * ```
+ */
+declare function useSplittingState<T extends Record<string, unknown>>(initialStates: T): StatesWithSetters<T>;
+
 /**
  * Injects FaasData props.
  */
@@ -317,4 +371,64 @@ declare const OptionalWrapper: React.FC<OptionalWrapperProps> & {
     whyDidYouRender: boolean;
 };
 
-export { ErrorBoundary, type ErrorBoundaryProps, type ErrorChildrenProps, type FaasDataInjection, FaasDataWrapper, type FaasDataWrapperProps, FaasReactClient, type FaasReactClientInstance, type FaasReactClientOptions, type OnError, OptionalWrapper, type OptionalWrapperProps, createSplittingContext, equal, faas, getClient, useConstant, useEqualCallback, useEqualEffect, useEqualMemo, useEqualMemoize, useFaas, type useFaasOptions, withFaasData };
+type FormRules = {
+    type?: 'string' | 'number';
+    required?: boolean;
+};
+
+type FormInputComponentProps = {
+    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> = {
+    name: string;
+    rules?: FormRules;
+    label?: {
+        title?: ReactNode;
+        description?: ReactNode;
+        Label?: React.ComponentType<FormLabelProps>;
+    };
+    input?: FormInputProps<FormElements>;
+};
+
+type FormButtonProps = {
+    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>;
+};
+
+type FormProps<Values extends Record<string, any> = Record<string, any>, FormElements extends FormElementTypes = FormElementTypes> = {
+    items: FormLabelProps<FormElements>[];
+    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 };

package/dist/index.d.ts

@@ -2,7 +2,7 @@ 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, ReactElement, Component, ComponentType, ComponentProps } from 'react';
+import { ReactNode, Dispatch, SetStateAction, ReactElement, Component, ComponentType, ComponentProps, JSXElementConstructor } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
 /**
@@ -105,21 +105,75 @@ declare function createSplittingContext<T extends Record<string, any>>(defaultVa
 } | (keyof T)[]): {
     /**
      * The provider component of the splitting context.
+     *
      * @see https://faasjs.com/doc/react/functions/createSplittingContext.html#provider
+     *
+     * @example
+     * ```tsx
+     * function App() {
+     *   const [value, setValue] = useState(0)
+     *
+     *   return (
+     *     <Provider value={{ value, setValue }}>
+     *       <ReaderComponent />
+     *       <WriterComponent />
+     *     </Provider>
+     *   )
+     * }
+     * ```
      */
     Provider<NewT extends T = T>(props: {
         value?: NewT;
         children: ReactNode;
+        /**
+         * Whether to use memoization for the children.
+         *
+         * @default false
+         *
+         * `true`: memoize the children without dependencies.
+         * `any[]`: memoize the children with specific dependencies.
+         */
         memo?: true | any[];
     }): ReactNode;
     /**
      * The hook to use the splitting context.
      *
      * @see https://faasjs.com/doc/react/functions/createSplittingContext.html#use
+     *
+     * @example
+     * ```tsx
+     * function ChildComponent() {
+     *   const { value, setValue } = use()
+     *
+     *   return <div>{value}<button onClick={() => setValue(1)}>change value</button></div>
+     * }
+     * ```
      */
     use: <NewT extends T = T>() => Readonly<NewT>;
 };
 
+type SetPrefix<S extends string | number | symbol> = S extends string ? (S extends `${infer First}${infer Rest}` ? `set${Capitalize<First>}${Rest}` : never) : never;
+type StateSetters<T> = {
+    [K in keyof T as SetPrefix<K>]: Dispatch<SetStateAction<T[K]>>;
+};
+type StatesWithSetters<T> = T & StateSetters<T>;
+/**
+ * A hook that initializes and splits state variables and their corresponding setters.
+ *
+ * @template T - A generic type that extends a record with string keys and any values.
+ * @param {T} initialStates - An object containing the initial states.
+ *
+ * @example
+ * ```tsx
+ * function Counter() {
+ *   const { count, setCount, name, setName } = useSplittingState({ count: 0, name: 'John' });
+ *
+ *   return <>{name}: {count}</>
+ * }
+ * ```
+ */
+declare function useSplittingState<T extends Record<string, unknown>>(initialStates: T): StatesWithSetters<T>;
+
 /**
  * Injects FaasData props.
  */
@@ -317,4 +371,64 @@ declare const OptionalWrapper: React.FC<OptionalWrapperProps> & {
     whyDidYouRender: boolean;
 };
 
-export { ErrorBoundary, type ErrorBoundaryProps, type ErrorChildrenProps, type FaasDataInjection, FaasDataWrapper, type FaasDataWrapperProps, FaasReactClient, type FaasReactClientInstance, type FaasReactClientOptions, type OnError, OptionalWrapper, type OptionalWrapperProps, createSplittingContext, equal, faas, getClient, useConstant, useEqualCallback, useEqualEffect, useEqualMemo, useEqualMemoize, useFaas, type useFaasOptions, withFaasData };
+type FormRules = {
+    type?: 'string' | 'number';
+    required?: boolean;
+};
+
+type FormInputComponentProps = {
+    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> = {
+    name: string;
+    rules?: FormRules;
+    label?: {
+        title?: ReactNode;
+        description?: ReactNode;
+        Label?: React.ComponentType<FormLabelProps>;
+    };
+    input?: FormInputProps<FormElements>;
+};
+
+type FormButtonProps = {
+    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>;
+};
+
+type FormProps<Values extends Record<string, any> = Record<string, any>, FormElements extends FormElementTypes = FormElementTypes> = {
+    items: FormLabelProps<FormElements>[];
+    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 };

package/dist/index.js

@@ -115,6 +115,14 @@ function createSplittingContext(defaultValue) {
     use
   };
 }
+function useSplittingState(initialStates) {
+  const states = {};
+  for (const key of Object.keys(initialStates)) {
+    const state = react.useState(initialStates[key]);
+    Object.assign(states, { [key]: state[0], [`set${String(key).charAt(0).toUpperCase()}${String(key).slice(1)}`]: state[1] });
+  }
+  return states;
+}
 function FaasDataWrapper(props) {
   const request = getClient(props.baseUrl).useFaas(
     props.action,
@@ -326,9 +334,152 @@ var OptionalWrapper = ({ condition, Wrapper, wrapperProps, children }) => {
 };
 OptionalWrapper.whyDidYouRender = true;
 
+// src/Form/context.tsx
+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 });
+}
+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({
+  name,
+  rules,
+  ...rest
+}) {
+  const { elements, values, setValues } = useFormContext();
+  const value = values?.[name];
+  if ("Input" in rest && rest.Input) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      rest.Input,
+      {
+        name,
+        value,
+        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
+          }
+        );
+    }
+  }
+  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 }))
+};
+function FormFooter() {
+  const { submitting, setSubmitting, onSubmit, values, elements } = useFormContext();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    elements.button,
+    {
+      disabled: submitting,
+      onClick: () => {
+        setSubmitting(true);
+        onSubmit(values).finally(() => setSubmitting(false));
+      },
+      children: "Submit"
+    }
+  );
+}
+function mergeValues(items, defaultValues = {}) {
+  const values = {};
+  for (const item of items)
+    values[item.name] = defaultValues[item.name] ?? "";
+  return values;
+}
+function FormContainer({ defaultValues, elements, ...props }) {
+  const states = useSplittingState({
+    values: mergeValues(props.items, defaultValues),
+    submitting: false,
+    elements: Object.assign(FormElements, elements)
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    FormContextProvider,
+    {
+      value: {
+        ...states,
+        ...props
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(FormBody, {}),
+        /* @__PURE__ */ jsxRuntime.jsx(FormFooter, {})
+      ]
+    }
+  );
+}
+
 exports.ErrorBoundary = ErrorBoundary;
 exports.FaasDataWrapper = FaasDataWrapper;
 exports.FaasReactClient = FaasReactClient;
+exports.Form = FormContainer;
 exports.OptionalWrapper = OptionalWrapper;
 exports.createSplittingContext = createSplittingContext;
 exports.equal = equal;
@@ -340,4 +491,5 @@ exports.useEqualEffect = useEqualEffect;
 exports.useEqualMemo = useEqualMemo;
 exports.useEqualMemoize = useEqualMemoize;
 exports.useFaas = useFaas;
+exports.useSplittingState = useSplittingState;
 exports.withFaasData = withFaasData;

package/dist/index.mjs

@@ -1,5 +1,5 @@
-import { useRef, useMemo, useEffect, useCallback, createContext, useState, cloneElement, Component, useContext } from 'react';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { forwardRef, useRef, useMemo, useEffect, useCallback, createContext, useState, cloneElement, Component, useContext } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { FaasBrowserClient } from '@faasjs/browser';
 
 // src/constant.ts
@@ -113,6 +113,14 @@ function createSplittingContext(defaultValue) {
     use
   };
 }
+function useSplittingState(initialStates) {
+  const states = {};
+  for (const key of Object.keys(initialStates)) {
+    const state = useState(initialStates[key]);
+    Object.assign(states, { [key]: state[0], [`set${String(key).charAt(0).toUpperCase()}${String(key).slice(1)}`]: state[1] });
+  }
+  return states;
+}
 function FaasDataWrapper(props) {
   const request = getClient(props.baseUrl).useFaas(
     props.action,
@@ -324,4 +332,146 @@ var OptionalWrapper = ({ condition, Wrapper, wrapperProps, children }) => {
 };
 OptionalWrapper.whyDidYouRender = true;
 
-export { ErrorBoundary, FaasDataWrapper, FaasReactClient, OptionalWrapper, createSplittingContext, equal, faas, getClient, useConstant, useEqualCallback, useEqualEffect, useEqualMemo, useEqualMemoize, useFaas, withFaasData };
+// src/Form/context.tsx
+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 });
+}
+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({
+  name,
+  rules,
+  ...rest
+}) {
+  const { elements, values, setValues } = useFormContext();
+  const value = values?.[name];
+  if ("Input" in rest && rest.Input) {
+    return /* @__PURE__ */ jsx(
+      rest.Input,
+      {
+        name,
+        value,
+        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
+          }
+        );
+    }
+  }
+  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 }))
+};
+function FormFooter() {
+  const { submitting, setSubmitting, onSubmit, values, elements } = useFormContext();
+  return /* @__PURE__ */ jsx(
+    elements.button,
+    {
+      disabled: submitting,
+      onClick: () => {
+        setSubmitting(true);
+        onSubmit(values).finally(() => setSubmitting(false));
+      },
+      children: "Submit"
+    }
+  );
+}
+function mergeValues(items, defaultValues = {}) {
+  const values = {};
+  for (const item of items)
+    values[item.name] = defaultValues[item.name] ?? "";
+  return values;
+}
+function FormContainer({ defaultValues, elements, ...props }) {
+  const states = useSplittingState({
+    values: mergeValues(props.items, defaultValues),
+    submitting: false,
+    elements: Object.assign(FormElements, elements)
+  });
+  return /* @__PURE__ */ jsxs(
+    FormContextProvider,
+    {
+      value: {
+        ...states,
+        ...props
+      },
+      children: [
+        /* @__PURE__ */ jsx(FormBody, {}),
+        /* @__PURE__ */ jsx(FormFooter, {})
+      ]
+    }
+  );
+}
+
+export { ErrorBoundary, FaasDataWrapper, FaasReactClient, FormContainer as Form, OptionalWrapper, createSplittingContext, equal, faas, getClient, useConstant, useEqualCallback, useEqualEffect, useEqualMemo, useEqualMemoize, useFaas, useSplittingState, withFaasData };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faasjs/react",
-  "version": "3.6.0",
+  "version": "3.7.0-beta.0",
   "license": "MIT",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -28,19 +28,18 @@
   },
   "funding": "https://github.com/sponsors/faasjs",
   "scripts": {
-    "build": "tsup src/index.tsx --config ../../tsup.config.json"
+    "build": "tsup src/index.tsx --config ../../tsup.config.json --external react"
   },
   "files": [
     "dist"
   ],
   "peerDependencies": {
-    "react": "*",
-    "@faasjs/browser": "3.6.0"
+    "@faasjs/browser": "3.7.0-beta.0"
   },
   "devDependencies": {
+    "@faasjs/browser": "3.7.0-beta.0",
     "@types/react": "*",
-    "react": "*",
-    "@faasjs/browser": "3.6.0"
+    "react": "*"
   },
   "engines": {
     "node": ">=22.0.0",