@faasjs/react 8.0.0-beta.16 → 8.0.0-beta.17

package/README.md

@@ -6,9 +6,6 @@
 - [equal](functions/equal.md)
 - [faas](functions/faas.md)
 - [FaasReactClient](functions/FaasReactClient.md)
-- [Form](functions/Form.md)
-- [FormInput](functions/FormInput.md)
-- [FormItem](functions/FormItem.md)
 - [generateId](functions/generateId.md)
 - [getClient](functions/getClient.md)
 - [OptionalWrapper](functions/OptionalWrapper.md)
@@ -23,7 +20,6 @@
 - [usePrevious](functions/usePrevious.md)
 - [useSplittingState](functions/useSplittingState.md)
 - [useStateRef](functions/useStateRef.md)
-- [validValues](functions/validValues.md)
 - [withFaasData](functions/withFaasData.md)
 
 ## Classes
@@ -51,22 +47,6 @@
 - [FaasParams](type-aliases/FaasParams.md)
 - [FaasReactClientInstance](type-aliases/FaasReactClientInstance.md)
 - [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)
-- [FormInputProps](type-aliases/FormInputProps.md)
-- [FormItemName](type-aliases/FormItemName.md)
-- [FormItemProps](type-aliases/FormItemProps.md)
-- [FormLabelElementProps](type-aliases/FormLabelElementProps.md)
-- [FormLang](type-aliases/FormLang.md)
-- [FormProps](type-aliases/FormProps.md)
-- [FormRule](type-aliases/FormRule.md)
-- [FormRules](type-aliases/FormRules.md)
-- [InferFormInputProps](type-aliases/InferFormInputProps.md)
-- [InferFormRulesOptions](type-aliases/InferFormRulesOptions.md)
-- [InferRuleOption](type-aliases/InferRuleOption.md)
 - [MockHandler](type-aliases/MockHandler.md)
 - [OnError](type-aliases/OnError.md)
 - [OptionalWrapperProps](type-aliases/OptionalWrapperProps.md)
@@ -83,8 +63,3 @@
 ## Variables
 
 - [FaasDataWrapper](variables/FaasDataWrapper.md)
-- [FormContextProvider](variables/FormContextProvider.md)
-- [FormDefaultElements](variables/FormDefaultElements.md)
-- [FormDefaultLang](variables/FormDefaultLang.md)
-- [FormDefaultRules](variables/FormDefaultRules.md)
-- [useFormContext](variables/useFormContext.md)

package/dist/index.cjs

@@ -1080,43 +1080,33 @@ var ErrorBoundary = class extends react.Component {
 	}
 };
 //#endregion
-//#region src/useStateRef.ts
+//#region src/OptionalWrapper.tsx
 /**
-* Custom hook that returns a stateful value and a ref to that value.
-*
-* @template T - The type of the value.
-* @param initialValue - Initial state value. When omitted, state starts as `null`.
-* @returns Tuple containing the current state, the state setter, and a ref that always points at the latest state.
+* A wrapper component that conditionally wraps its children with a provided wrapper component.
 *
 * @example
 * ```tsx
-* import { useStateRef } from '@faasjs/react'
+* import { OptionalWrapper } from '@faasjs/react'
 *
-* function MyComponent() {
-*   const [value, setValue, ref] = useStateRef(0)
+* const Wrapper = ({ children }: { children: React.ReactNode }) => (
+*   <div className='wrapper'>{children}</div>
+* )
 *
-*   return (
-*     <div>
-*       <p>Value: {value}</p>
-*       <button onClick={() => setValue(value + 1)}>Increment</button>
-*       <button onClick={() => console.log(ref.current)}>Submit</button>
-*     </div>
-*   )
-* }
+* const App = () => (
+*   <OptionalWrapper condition={true} Wrapper={Wrapper}>
+*     <span>Test</span>
+*   </OptionalWrapper>
+* )
 * ```
 */
-function useStateRef(initialValue) {
-	const [state, setState] = (0, react.useState)(initialValue ?? null);
-	const ref = (0, react.useRef)(state);
-	(0, react.useEffect)(() => {
-		ref.current = state;
-	}, [state]);
-	return [
-		state,
-		setState,
-		ref
-	];
+function OptionalWrapper({ condition, Wrapper, wrapperProps, children }) {
+	if (condition) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Wrapper, {
+		...wrapperProps,
+		children
+	});
+	return children;
 }
+OptionalWrapper.displayName = "OptionalWrapper";
 //#endregion
 //#region src/splittingState.tsx
 /**
@@ -1229,278 +1219,6 @@ function createSplittingContext(defaultValue) {
 	};
 }
 //#endregion
-//#region src/Form/context.tsx
-const FormContext = createSplittingContext([
-	"items",
-	"onSubmit",
-	"Elements",
-	"lang",
-	"rules",
-	"submitting",
-	"setSubmitting",
-	"values",
-	"setValues",
-	"errors",
-	"setErrors",
-	"valuesRef"
-]);
-const FormContextProvider = FormContext.Provider;
-const useFormContext = FormContext.use;
-//#endregion
-//#region src/Form/Input.tsx
-function processValue(input, rules) {
-	switch (rules?.type) {
-		case "number": return Number(input);
-		case "string": return String(input);
-		default: return input;
-	}
-}
-function FormInput({ name, rules, ...rest }) {
-	const { Elements, values, setValues } = useFormContext();
-	const value = values?.[name];
-	if (rest.Input) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(rest.Input, {
-		name,
-		value,
-		onChange: (v) => setValues((prev) => ({
-			...prev,
-			[name]: processValue(v, rules)
-		})),
-		...rest.props
-	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Elements.Input, {
-		name,
-		value,
-		onChange: (v) => setValues((prev) => ({
-			...prev,
-			[name]: processValue(v, rules)
-		})),
-		...rest.props
-	});
-}
-FormInput.displayName = "FormInput";
-//#endregion
-//#region src/Form/Item.tsx
-function FormItem(props) {
-	const { Elements, errors } = useFormContext();
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(props.label?.Label ?? Elements.Label, {
-		name: props.name,
-		...props.label,
-		error: errors[props.name],
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FormInput, {
-			name: props.name,
-			...props.input,
-			...props.rules ? { rules: props.rules } : {}
-		})
-	});
-}
-FormItem.displayName = "FormItem";
-//#endregion
-//#region src/Form/Body.tsx
-function FormBody() {
-	const { items } = useFormContext();
-	return items.map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FormItem, { ...item }, item.name));
-}
-FormBody.displayName = "FormBody";
-//#endregion
-//#region src/Form/elements/Button.tsx
-const FormButtonElement = (0, react.forwardRef)(({ children, submit, submitting, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
-	type: "button",
-	disabled: submitting,
-	onClick: submit,
-	...props,
-	ref,
-	children
-}));
-FormButtonElement.displayName = "FormButtonElement";
-//#endregion
-//#region src/Form/elements/Input.tsx
-const FormInputElement = (0, react.forwardRef)(({ onChange, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
-	...props,
-	onChange: (e) => onChange(e.target.value),
-	ref
-}));
-FormInputElement.displayName = "FormInputElement";
-//#endregion
-//#region src/Form/elements/Label.tsx
-const FormLabelElement = ({ name, title, description, error, children }) => {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", { children: [
-		title ?? name,
-		children,
-		description,
-		error && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			style: { color: "red" },
-			children: error.message
-		})
-	] });
-};
-FormLabelElement.displayName = "FormLabelElement";
-//#endregion
-//#region src/Form/elements/index.ts
-const FormDefaultElements = {
-	Label: FormLabelElement,
-	Input: FormInputElement,
-	Button: FormButtonElement
-};
-//#endregion
-//#region src/Form/rules.ts
-/**
-* Default validation rules for a form.
-*/
-const FormDefaultRules = {
-	required: async (value, _, lang) => {
-		if (value === null || value === void 0 || value === "" || Number.isNaN(value)) throw Error(lang?.required);
-	},
-	type: async (value, options, lang) => {
-		switch (options) {
-			case "string":
-				if (typeof value !== "string") throw Error(lang?.string);
-				break;
-			case "number":
-				if (Number.isNaN(Number(value))) throw Error(lang?.number);
-				break;
-		}
-	},
-	custom: async (value, options) => {
-		return options(value);
-	}
-};
-async function validValues(rules, items, values, lang) {
-	const errors = {};
-	for (const item of items) {
-		const value = values[item.name];
-		const rulesOptions = item.rules;
-		if (rulesOptions) for (const [name, options] of Object.entries(rulesOptions)) try {
-			await rules[name](value, options, lang);
-		} catch (error) {
-			errors[item.name] = error;
-			break;
-		}
-	}
-	return errors;
-}
-//#endregion
-//#region src/Form/Footer.tsx
-function FormFooter() {
-	const { submitting, setSubmitting, onSubmit, valuesRef, Elements, items, setErrors, lang, rules } = useFormContext();
-	const Button = Elements.Button;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Button, {
-		submitting,
-		submit: (0, react.useCallback)(async () => {
-			setSubmitting(true);
-			setErrors({});
-			const errors = await validValues(rules, items, valuesRef.current, lang);
-			if (Object.keys(errors).length) {
-				setErrors(errors);
-				setSubmitting(false);
-				return;
-			}
-			onSubmit(valuesRef.current).finally(() => setSubmitting(false));
-		}, [
-			setSubmitting,
-			setErrors,
-			rules,
-			items,
-			valuesRef,
-			lang,
-			onSubmit
-		]),
-		children: lang.submit
-	});
-}
-FormFooter.displayName = "FormFooter";
-//#endregion
-//#region src/Form/lang.ts
-const FormDefaultLang = {
-	submit: "Submit",
-	required: "This field is required",
-	string: "This field must be a string",
-	number: "This field must be a number"
-};
-//#endregion
-//#region src/Form/Container.tsx
-function mergeValues(items, defaultValues = {}) {
-	const values = {};
-	for (const item of items) values[item.name] = defaultValues[item.name] ?? "";
-	return values;
-}
-/**
-* Render a form with context, default elements, and validation state.
-*
-* `FormContainer` merges provided elements, language strings, and rules with
-* the package defaults, then exposes them through form context.
-*
-* @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 props - Form items and optional overrides for defaults, language, rules, and submit behavior.
-* @returns React form container with shared form context.
-*
-* @example
-* ```tsx
-* import { Form } from '@faasjs/react'
-*
-* function MyForm() {
-*   return (
-*     <Form
-*       items={[
-*         { name: 'name' },
-*       ]}
-*     />
-*   )
-* }
-* ```
-*/
-function FormContainer({ defaultValues, Elements, rules, lang, items, ...props }) {
-	const [values, setValues, valuesRef] = useStateRef(mergeValues(items, defaultValues));
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(FormContextProvider, {
-		initializeStates: {
-			errors: {},
-			submitting: false
-		},
-		value: {
-			Elements: Object.assign(FormDefaultElements, Elements),
-			lang: Object.assign(FormDefaultLang, lang),
-			rules: Object.assign(FormDefaultRules, rules),
-			items,
-			values,
-			setValues,
-			valuesRef,
-			...props
-		},
-		memo: true,
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(FormBody, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FormFooter, {})]
-	});
-}
-FormContainer.displayName = "FormContainer";
-//#endregion
-//#region src/OptionalWrapper.tsx
-/**
-* A wrapper component that conditionally wraps its children with a provided wrapper component.
-*
-* @example
-* ```tsx
-* import { OptionalWrapper } from '@faasjs/react'
-*
-* const Wrapper = ({ children }: { children: React.ReactNode }) => (
-*   <div className='wrapper'>{children}</div>
-* )
-*
-* const App = () => (
-*   <OptionalWrapper condition={true} Wrapper={Wrapper}>
-*     <span>Test</span>
-*   </OptionalWrapper>
-* )
-* ```
-*/
-function OptionalWrapper({ condition, Wrapper, wrapperProps, children }) {
-	if (condition) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Wrapper, {
-		...wrapperProps,
-		children
-	});
-	return children;
-}
-OptionalWrapper.displayName = "OptionalWrapper";
-//#endregion
 //#region src/useFaasStream.tsx
 /**
 * Stream a FaasJS response into React state.
@@ -1669,17 +1387,48 @@ function usePrevious(value) {
 	return ref.current;
 }
 //#endregion
+//#region src/useStateRef.ts
+/**
+* Custom hook that returns a stateful value and a ref to that value.
+*
+* @template T - The type of the value.
+* @param initialValue - Initial state value. When omitted, state starts as `null`.
+* @returns Tuple containing the current state, the state setter, and a ref that always points at the latest state.
+*
+* @example
+* ```tsx
+* import { useStateRef } from '@faasjs/react'
+*
+* function MyComponent() {
+*   const [value, setValue, ref] = useStateRef(0)
+*
+*   return (
+*     <div>
+*       <p>Value: {value}</p>
+*       <button onClick={() => setValue(value + 1)}>Increment</button>
+*       <button onClick={() => console.log(ref.current)}>Submit</button>
+*     </div>
+*   )
+* }
+* ```
+*/
+function useStateRef(initialValue) {
+	const [state, setState] = (0, react.useState)(initialValue ?? null);
+	const ref = (0, react.useRef)(state);
+	(0, react.useEffect)(() => {
+		ref.current = state;
+	}, [state]);
+	return [
+		state,
+		setState,
+		ref
+	];
+}
+//#endregion
 exports.ErrorBoundary = ErrorBoundary;
 exports.FaasBrowserClient = FaasBrowserClient;
 exports.FaasDataWrapper = FaasDataWrapper;
 exports.FaasReactClient = FaasReactClient;
-exports.Form = FormContainer;
-exports.FormContextProvider = FormContextProvider;
-exports.FormDefaultElements = FormDefaultElements;
-exports.FormDefaultLang = FormDefaultLang;
-exports.FormDefaultRules = FormDefaultRules;
-exports.FormInput = FormInput;
-exports.FormItem = FormItem;
 exports.OptionalWrapper = OptionalWrapper;
 exports.Response = Response;
 exports.ResponseError = ResponseError;
@@ -1696,9 +1445,7 @@ exports.useEqualMemo = useEqualMemo;
 exports.useEqualMemoize = useEqualMemoize;
 exports.useFaas = useFaas;
 exports.useFaasStream = useFaasStream;
-exports.useFormContext = useFormContext;
 exports.usePrevious = usePrevious;
 exports.useSplittingState = useSplittingState;
 exports.useStateRef = useStateRef;
-exports.validValues = validValues;
 exports.withFaasData = withFaasData;

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import { FaasAction, FaasAction as FaasAction$1, FaasActionUnionType, FaasActionUnionType as FaasActionUnionType$1, FaasData, FaasData as FaasData$1, FaasParams, FaasParams as FaasParams$1 } from "@faasjs/types";
 import * as react from "react";
-import { Component, ComponentProps, ComponentType, Dispatch, ErrorInfo, JSX, JSXElementConstructor, ReactElement, ReactNode, RefObject, SetStateAction } from "react";
+import { Component, ComponentProps, ComponentType, Dispatch, ErrorInfo, JSX, ReactElement, ReactNode, RefObject, SetStateAction } from "react";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/generateId.d.ts
@@ -1041,220 +1041,6 @@ declare function useEqualMemo<T>(callback: () => T, dependencies: any[]): T;
  */
 declare function useEqualCallback<T extends (...args: any[]) => any>(callback: T, dependencies: any[]): T;
 //#endregion
-//#region src/Form/elements/Button.d.ts
-/**
- * Props for the FormButtonElement component.
- *
- * @property {React.ReactNode} [children] - The content to be displayed inside the button.
- * @property {boolean} disabled - Indicates whether the button is disabled.
- * @property {() => Promise<void>} submit - A function to be called when the button is clicked, which returns a promise.
- */
-type FormButtonElementProps = {
-  children?: React.ReactNode;
-  submitting: boolean;
-  submit: () => Promise<void>;
-};
-//#endregion
-//#region src/Form/elements/Input.d.ts
-/**
- * Props for the Form Input Element component.
- *
- * @property {string} name - The name of the input element.
- * @property {any} value - The current value of the input element.
- * @property {(value: any) => void} onChange - Callback function to handle changes to the input value.
- */
-type FormInputElementProps = {
-  name: string;
-  value: any;
-  onChange: (value: any) => void;
-};
-//#endregion
-//#region src/Form/elements/Label.d.ts
-/**
- * Props for the FormLabelElement component.
- *
- * @typedef {Object} FormLabelElementProps
- * @property {string} name - The name of the form element.
- * @property {ReactNode} [title] - Optional title for the form element.
- * @property {ReactNode} [description] - Optional description for the form element.
- * @property {Error} [error] - Optional error associated with the form element.
- * @property {ReactNode} children - The child elements, typically an input element.
- */
-type FormLabelElementProps = {
-  name: string;
-  title?: ReactNode;
-  description?: ReactNode;
-  error?: Error; /** as Input element */
-  children: ReactNode;
-};
-//#endregion
-//#region src/Form/elements/index.d.ts
-/**
- * Represents the types of form elements used in the form.
- *
- * @typedef {Object} FormElementTypes
- * @property {ComponentType<FormLabelElementProps>} Label - The component type for the form label element.
- * @property {ComponentType<FormInputElementProps>} Input - The component type for the form input element.
- * @property {ComponentType<FormButtonElementProps>} Button - The component type for the form button element.
- */
-type FormElementTypes = {
-  Label: ComponentType<FormLabelElementProps>;
-  Input: ComponentType<FormInputElementProps>;
-  Button: ComponentType<FormButtonElementProps>;
-};
-declare const FormDefaultElements: FormElementTypes;
-//#endregion
-//#region src/Form/lang.d.ts
-declare const FormDefaultLang: {
-  submit: string;
-  required: string;
-  string: string;
-  number: string;
-};
-type FormLang = typeof FormDefaultLang;
-//#endregion
-//#region src/Form/rules.d.ts
-/**
- * A type representing a form validation rule.
- *
- * @template Options - The type of the options that can be passed to the rule.
- *
- * @param value - The value to be validated.
- * @param options - Optional. Additional options that can be used in the validation.
- * @param lang - Optional. The language settings that can be used in the validation.
- *
- * @returns A promise that resolves if the validation is successful, or rejects with an error if the validation fails.
- *
- * @example
- * ```ts
- * async function required(value: any, options: boolean, lang?: FormLang) {
- *   if (value === null || value === undefined || value === '' || Number.isNaN(value))
- *     throw Error(lang?.required)
- * }
- * ```
- */
-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;
-/**
- * A type representing a set of form validation rules.
- *
- * @typedef {Record<string, FormRule>} FormRules
- *
- * Each key in the record represents the name of a form field, and the corresponding value is a `FormRule` object that defines the validation rules for that field.
- */
-type FormRules = Record<string, FormRule>;
-type InferFormRulesOptions<T> = { [K in keyof T]: InferRuleOption<T[K]> };
-/**
- * Default validation rules for a form.
- */
-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>>;
-//#endregion
-//#region src/Form/Input.d.ts
-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> = {
-  Input?: ComponentType<FormInputElementProps>;
-  props?: InferFormInputProps<FormElements['Input']>;
-};
-declare function FormInput({
-  name,
-  rules,
-  ...rest
-}: FormInputProps & {
-  name: string;
-  rules?: FormDefaultRulesOptions;
-}): react_jsx_runtime0.JSX.Element;
-declare namespace FormInput {
-  var displayName: string;
-}
-//#endregion
-//#region src/Form/Item.d.ts
-type FormItemName = string;
-type FormItemProps<FormElements extends FormElementTypes = FormElementTypes, FormRulesOptions extends Record<string, any> = FormDefaultRulesOptions> = {
-  name: FormItemName;
-  label?: Omit<FormLabelElementProps, 'name' | 'children'> & {
-    Label?: ComponentType<FormLabelElementProps>;
-  };
-  input?: FormInputProps<FormElements>;
-  rules?: FormRulesOptions;
-};
-declare function FormItem(props: FormItemProps): react_jsx_runtime0.JSX.Element;
-declare namespace FormItem {
-  var displayName: string;
-}
-//#endregion
-//#region src/Form/Container.d.ts
-type FormProps<Values extends Record<string, any> = Record<string, any>, FormElements extends FormElementTypes = FormElementTypes, Rules extends FormRules = typeof FormDefaultRules> = {
-  items: FormItemProps<FormElements, InferFormRulesOptions<Rules>>[];
-  onSubmit?: (values: Values) => Promise<void>;
-  Elements?: Partial<FormElements>;
-  lang?: Partial<FormLang>;
-  defaultValues?: Values;
-  rules?: typeof FormDefaultRules & Rules;
-};
-/**
- * Render a form with context, default elements, and validation state.
- *
- * `FormContainer` merges provided elements, language strings, and rules with
- * the package defaults, then exposes them through form context.
- *
- * @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 props - Form items and optional overrides for defaults, language, rules, and submit behavior.
- * @returns React form container with shared form context.
- *
- * @example
- * ```tsx
- * import { Form } from '@faasjs/react'
- *
- * function MyForm() {
- *   return (
- *     <Form
- *       items={[
- *         { name: 'name' },
- *       ]}
- *     />
- *   )
- * }
- * ```
- */
-declare function FormContainer<Values extends Record<string, any> = Record<string, any>, FormElements extends FormElementTypes = FormElementTypes, Rules extends FormRules = typeof FormDefaultRules>({
-  defaultValues,
-  Elements,
-  rules,
-  lang,
-  items,
-  ...props
-}: FormProps<Values, FormElements, Rules>): react_jsx_runtime0.JSX.Element;
-declare namespace FormContainer {
-  var displayName: string;
-}
-//#endregion
-//#region src/Form/context.d.ts
-type FormContextProps<Values extends Record<string, any> = Record<string, any>, FormElements extends FormElementTypes = FormElementTypes, Rules extends FormRules = typeof FormDefaultRules> = {
-  items: FormItemProps<FormElements, InferFormRulesOptions<Rules>>[];
-  onSubmit: (values: Values) => Promise<void>;
-  Elements: FormElementTypes;
-  lang: FormLang;
-  rules: typeof FormDefaultRules & Rules;
-  submitting: boolean;
-  setSubmitting: Dispatch<SetStateAction<boolean>>;
-  values: Values;
-  setValues: Dispatch<SetStateAction<Values>>;
-  errors: Record<string, Error>;
-  setErrors: Dispatch<SetStateAction<Record<string, Error>>>;
-  valuesRef: RefObject<Values>;
-};
-declare const FormContextProvider: <NewT extends FormContextProps<Record<string, any>, FormElementTypes, FormRules> = FormContextProps<Record<string, any>, FormElementTypes, FormRules>>(this: void, props: {
-  value?: Partial<NewT>;
-  children: react.ReactNode;
-  memo?: true | any[];
-  initializeStates?: Partial<NewT>;
-}) => react.ReactNode;
-declare const useFormContext: <NewT extends FormContextProps<Record<string, any>, FormElementTypes, FormRules> = FormContextProps<Record<string, any>, FormElementTypes, FormRules>>(this: void) => Readonly<NewT>;
-//#endregion
 //#region src/OptionalWrapper.d.ts
 type OptionalWrapperProps<TWrapper extends ComponentType<{
   children: ReactNode;
@@ -1522,4 +1308,4 @@ declare function usePrevious<T = any>(value: T): T | undefined;
  */
 declare function useStateRef<T = any>(initialValue?: T): [T | null, Dispatch<SetStateAction<T | null>>, RefObject<T | null>];
 //#endregion
-export { BaseUrl, ErrorBoundary, ErrorBoundaryProps, ErrorChildrenProps, type FaasAction, type FaasActionUnionType, FaasBrowserClient, FaasBrowserClientAction, type FaasData, FaasDataInjection, FaasDataWrapper, FaasDataWrapperProps, FaasDataWrapperRef, type FaasParams, FaasReactClient, FaasReactClientInstance, FaasReactClientOptions, FormContainer as Form, type FormButtonElementProps, FormContextProps, FormContextProvider, FormDefaultElements, FormDefaultLang, FormDefaultRules, FormDefaultRulesOptions, FormElementTypes, FormInput, type FormInputElementProps, FormInputProps, FormItem, FormItemName, FormItemProps, type FormLabelElementProps, FormLang, FormProps, FormRule, FormRules, InferFormInputProps, InferFormRulesOptions, InferRuleOption, MockHandler, OnError, OptionalWrapper, OptionalWrapperProps, Options, Response, ResponseError, ResponseErrorProps, ResponseHeaders, ResponseProps, StateSetters, StatesWithSetters, UseFaasStreamOptions, UseFaasStreamResult, createSplittingContext, equal, faas, generateId, getClient, setMock, useConstant, useEqualCallback, useEqualEffect, useEqualMemo, useEqualMemoize, useFaas, useFaasOptions, useFaasStream, useFormContext, usePrevious, useSplittingState, useStateRef, validValues, withFaasData };
+export { BaseUrl, ErrorBoundary, ErrorBoundaryProps, ErrorChildrenProps, type FaasAction, type FaasActionUnionType, FaasBrowserClient, FaasBrowserClientAction, type FaasData, FaasDataInjection, FaasDataWrapper, FaasDataWrapperProps, FaasDataWrapperRef, type FaasParams, FaasReactClient, FaasReactClientInstance, FaasReactClientOptions, MockHandler, OnError, OptionalWrapper, OptionalWrapperProps, Options, Response, ResponseError, ResponseErrorProps, ResponseHeaders, ResponseProps, StateSetters, StatesWithSetters, UseFaasStreamOptions, UseFaasStreamResult, createSplittingContext, equal, faas, generateId, getClient, setMock, useConstant, useEqualCallback, useEqualEffect, useEqualMemo, useEqualMemoize, useFaas, useFaasOptions, useFaasStream, usePrevious, useSplittingState, useStateRef, withFaasData };

package/dist/index.mjs

@@ -1076,43 +1076,33 @@ var ErrorBoundary = class extends Component {
 	}
 };
 //#endregion
-//#region src/useStateRef.ts
+//#region src/OptionalWrapper.tsx
 /**
-* Custom hook that returns a stateful value and a ref to that value.
-*
-* @template T - The type of the value.
-* @param initialValue - Initial state value. When omitted, state starts as `null`.
-* @returns Tuple containing the current state, the state setter, and a ref that always points at the latest state.
+* A wrapper component that conditionally wraps its children with a provided wrapper component.
 *
 * @example
 * ```tsx
-* import { useStateRef } from '@faasjs/react'
+* import { OptionalWrapper } from '@faasjs/react'
 *
-* function MyComponent() {
-*   const [value, setValue, ref] = useStateRef(0)
+* const Wrapper = ({ children }: { children: React.ReactNode }) => (
+*   <div className='wrapper'>{children}</div>
+* )
 *
-*   return (
-*     <div>
-*       <p>Value: {value}</p>
-*       <button onClick={() => setValue(value + 1)}>Increment</button>
-*       <button onClick={() => console.log(ref.current)}>Submit</button>
-*     </div>
-*   )
-* }
+* const App = () => (
+*   <OptionalWrapper condition={true} Wrapper={Wrapper}>
+*     <span>Test</span>
+*   </OptionalWrapper>
+* )
 * ```
 */
-function useStateRef(initialValue) {
-	const [state, setState] = useState(initialValue ?? null);
-	const ref = useRef(state);
-	useEffect(() => {
-		ref.current = state;
-	}, [state]);
-	return [
-		state,
-		setState,
-		ref
-	];
+function OptionalWrapper({ condition, Wrapper, wrapperProps, children }) {
+	if (condition) return /* @__PURE__ */ jsx(Wrapper, {
+		...wrapperProps,
+		children
+	});
+	return children;
 }
+OptionalWrapper.displayName = "OptionalWrapper";
 //#endregion
 //#region src/splittingState.tsx
 /**
@@ -1225,278 +1215,6 @@ function createSplittingContext(defaultValue) {
 	};
 }
 //#endregion
-//#region src/Form/context.tsx
-const FormContext = createSplittingContext([
-	"items",
-	"onSubmit",
-	"Elements",
-	"lang",
-	"rules",
-	"submitting",
-	"setSubmitting",
-	"values",
-	"setValues",
-	"errors",
-	"setErrors",
-	"valuesRef"
-]);
-const FormContextProvider = FormContext.Provider;
-const useFormContext = FormContext.use;
-//#endregion
-//#region src/Form/Input.tsx
-function processValue(input, rules) {
-	switch (rules?.type) {
-		case "number": return Number(input);
-		case "string": return String(input);
-		default: return input;
-	}
-}
-function FormInput({ name, rules, ...rest }) {
-	const { Elements, values, setValues } = useFormContext();
-	const value = values?.[name];
-	if (rest.Input) return /* @__PURE__ */ jsx(rest.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)
-		})),
-		...rest.props
-	});
-}
-FormInput.displayName = "FormInput";
-//#endregion
-//#region src/Form/Item.tsx
-function FormItem(props) {
-	const { Elements, errors } = useFormContext();
-	return /* @__PURE__ */ jsx(props.label?.Label ?? Elements.Label, {
-		name: props.name,
-		...props.label,
-		error: errors[props.name],
-		children: /* @__PURE__ */ jsx(FormInput, {
-			name: props.name,
-			...props.input,
-			...props.rules ? { rules: props.rules } : {}
-		})
-	});
-}
-FormItem.displayName = "FormItem";
-//#endregion
-//#region src/Form/Body.tsx
-function FormBody() {
-	const { items } = useFormContext();
-	return items.map((item) => /* @__PURE__ */ jsx(FormItem, { ...item }, item.name));
-}
-FormBody.displayName = "FormBody";
-//#endregion
-//#region src/Form/elements/Button.tsx
-const FormButtonElement = forwardRef(({ children, submit, submitting, ...props }, ref) => /* @__PURE__ */ jsx("button", {
-	type: "button",
-	disabled: submitting,
-	onClick: submit,
-	...props,
-	ref,
-	children
-}));
-FormButtonElement.displayName = "FormButtonElement";
-//#endregion
-//#region src/Form/elements/Input.tsx
-const FormInputElement = forwardRef(({ onChange, ...props }, ref) => /* @__PURE__ */ jsx("input", {
-	...props,
-	onChange: (e) => onChange(e.target.value),
-	ref
-}));
-FormInputElement.displayName = "FormInputElement";
-//#endregion
-//#region src/Form/elements/Label.tsx
-const FormLabelElement = ({ name, title, description, error, children }) => {
-	return /* @__PURE__ */ jsxs("label", { children: [
-		title ?? name,
-		children,
-		description,
-		error && /* @__PURE__ */ jsx("div", {
-			style: { color: "red" },
-			children: error.message
-		})
-	] });
-};
-FormLabelElement.displayName = "FormLabelElement";
-//#endregion
-//#region src/Form/elements/index.ts
-const FormDefaultElements = {
-	Label: FormLabelElement,
-	Input: FormInputElement,
-	Button: FormButtonElement
-};
-//#endregion
-//#region src/Form/rules.ts
-/**
-* Default validation rules for a form.
-*/
-const FormDefaultRules = {
-	required: async (value, _, lang) => {
-		if (value === null || value === void 0 || value === "" || Number.isNaN(value)) throw Error(lang?.required);
-	},
-	type: async (value, options, lang) => {
-		switch (options) {
-			case "string":
-				if (typeof value !== "string") throw Error(lang?.string);
-				break;
-			case "number":
-				if (Number.isNaN(Number(value))) throw Error(lang?.number);
-				break;
-		}
-	},
-	custom: async (value, options) => {
-		return options(value);
-	}
-};
-async function validValues(rules, items, values, lang) {
-	const errors = {};
-	for (const item of items) {
-		const value = values[item.name];
-		const rulesOptions = item.rules;
-		if (rulesOptions) for (const [name, options] of Object.entries(rulesOptions)) try {
-			await rules[name](value, options, lang);
-		} catch (error) {
-			errors[item.name] = error;
-			break;
-		}
-	}
-	return errors;
-}
-//#endregion
-//#region src/Form/Footer.tsx
-function FormFooter() {
-	const { submitting, setSubmitting, onSubmit, valuesRef, Elements, items, setErrors, lang, rules } = useFormContext();
-	const Button = Elements.Button;
-	return /* @__PURE__ */ jsx(Button, {
-		submitting,
-		submit: useCallback(async () => {
-			setSubmitting(true);
-			setErrors({});
-			const errors = await validValues(rules, items, valuesRef.current, lang);
-			if (Object.keys(errors).length) {
-				setErrors(errors);
-				setSubmitting(false);
-				return;
-			}
-			onSubmit(valuesRef.current).finally(() => setSubmitting(false));
-		}, [
-			setSubmitting,
-			setErrors,
-			rules,
-			items,
-			valuesRef,
-			lang,
-			onSubmit
-		]),
-		children: lang.submit
-	});
-}
-FormFooter.displayName = "FormFooter";
-//#endregion
-//#region src/Form/lang.ts
-const FormDefaultLang = {
-	submit: "Submit",
-	required: "This field is required",
-	string: "This field must be a string",
-	number: "This field must be a number"
-};
-//#endregion
-//#region src/Form/Container.tsx
-function mergeValues(items, defaultValues = {}) {
-	const values = {};
-	for (const item of items) values[item.name] = defaultValues[item.name] ?? "";
-	return values;
-}
-/**
-* Render a form with context, default elements, and validation state.
-*
-* `FormContainer` merges provided elements, language strings, and rules with
-* the package defaults, then exposes them through form context.
-*
-* @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 props - Form items and optional overrides for defaults, language, rules, and submit behavior.
-* @returns React form container with shared form context.
-*
-* @example
-* ```tsx
-* import { Form } from '@faasjs/react'
-*
-* function MyForm() {
-*   return (
-*     <Form
-*       items={[
-*         { name: 'name' },
-*       ]}
-*     />
-*   )
-* }
-* ```
-*/
-function FormContainer({ defaultValues, Elements, rules, lang, items, ...props }) {
-	const [values, setValues, valuesRef] = useStateRef(mergeValues(items, defaultValues));
-	return /* @__PURE__ */ jsxs(FormContextProvider, {
-		initializeStates: {
-			errors: {},
-			submitting: false
-		},
-		value: {
-			Elements: Object.assign(FormDefaultElements, Elements),
-			lang: Object.assign(FormDefaultLang, lang),
-			rules: Object.assign(FormDefaultRules, rules),
-			items,
-			values,
-			setValues,
-			valuesRef,
-			...props
-		},
-		memo: true,
-		children: [/* @__PURE__ */ jsx(FormBody, {}), /* @__PURE__ */ jsx(FormFooter, {})]
-	});
-}
-FormContainer.displayName = "FormContainer";
-//#endregion
-//#region src/OptionalWrapper.tsx
-/**
-* A wrapper component that conditionally wraps its children with a provided wrapper component.
-*
-* @example
-* ```tsx
-* import { OptionalWrapper } from '@faasjs/react'
-*
-* const Wrapper = ({ children }: { children: React.ReactNode }) => (
-*   <div className='wrapper'>{children}</div>
-* )
-*
-* const App = () => (
-*   <OptionalWrapper condition={true} Wrapper={Wrapper}>
-*     <span>Test</span>
-*   </OptionalWrapper>
-* )
-* ```
-*/
-function OptionalWrapper({ condition, Wrapper, wrapperProps, children }) {
-	if (condition) return /* @__PURE__ */ jsx(Wrapper, {
-		...wrapperProps,
-		children
-	});
-	return children;
-}
-OptionalWrapper.displayName = "OptionalWrapper";
-//#endregion
 //#region src/useFaasStream.tsx
 /**
 * Stream a FaasJS response into React state.
@@ -1665,4 +1383,42 @@ function usePrevious(value) {
 	return ref.current;
 }
 //#endregion
-export { ErrorBoundary, FaasBrowserClient, FaasDataWrapper, FaasReactClient, FormContainer as Form, FormContextProvider, FormDefaultElements, FormDefaultLang, FormDefaultRules, FormInput, FormItem, OptionalWrapper, Response, ResponseError, createSplittingContext, equal, faas, generateId, getClient, setMock, useConstant, useEqualCallback, useEqualEffect, useEqualMemo, useEqualMemoize, useFaas, useFaasStream, useFormContext, usePrevious, useSplittingState, useStateRef, validValues, withFaasData };
+//#region src/useStateRef.ts
+/**
+* Custom hook that returns a stateful value and a ref to that value.
+*
+* @template T - The type of the value.
+* @param initialValue - Initial state value. When omitted, state starts as `null`.
+* @returns Tuple containing the current state, the state setter, and a ref that always points at the latest state.
+*
+* @example
+* ```tsx
+* import { useStateRef } from '@faasjs/react'
+*
+* function MyComponent() {
+*   const [value, setValue, ref] = useStateRef(0)
+*
+*   return (
+*     <div>
+*       <p>Value: {value}</p>
+*       <button onClick={() => setValue(value + 1)}>Increment</button>
+*       <button onClick={() => console.log(ref.current)}>Submit</button>
+*     </div>
+*   )
+* }
+* ```
+*/
+function useStateRef(initialValue) {
+	const [state, setState] = useState(initialValue ?? null);
+	const ref = useRef(state);
+	useEffect(() => {
+		ref.current = state;
+	}, [state]);
+	return [
+		state,
+		setState,
+		ref
+	];
+}
+//#endregion
+export { ErrorBoundary, FaasBrowserClient, FaasDataWrapper, FaasReactClient, OptionalWrapper, Response, ResponseError, createSplittingContext, equal, faas, generateId, getClient, setMock, useConstant, useEqualCallback, useEqualEffect, useEqualMemo, useEqualMemoize, useFaas, useFaasStream, usePrevious, useSplittingState, useStateRef, withFaasData };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faasjs/react",
-  "version": "8.0.0-beta.16",
+  "version": "8.0.0-beta.17",
   "homepage": "https://faasjs.com/doc/react/",
   "bugs": {
     "url": "https://github.com/faasjs/faasjs/issues"
@@ -27,12 +27,12 @@
     }
   },
   "devDependencies": {
-    "@faasjs/types": ">=8.0.0-beta.16",
+    "@faasjs/types": ">=8.0.0-beta.17",
     "@types/react": "^19.0.0",
     "react": "^19.0.0"
   },
   "peerDependencies": {
-    "@faasjs/types": ">=8.0.0-beta.16"
+    "@faasjs/types": ">=8.0.0-beta.17"
   },
   "engines": {
     "node": ">=24.0.0",