import * as Core from "@ariakit/core/form/form-store"; import type { StringLike } from "@ariakit/core/form/types"; import type { PickRequired } from "@ariakit/core/utils/types"; import type { CollectionStoreFunctions, CollectionStoreOptions, CollectionStoreState } from "../collection/collection-store.ts"; import type { Store } from "../utils/store.tsx"; export declare function useFormStoreProps>(store: T, update: () => void, props: FormStoreProps): T & { useValue: (name: StringLike) => T_1; useValidate: (callback: Core.FormStoreCallback>) => void; useSubmit: (callback: Core.FormStoreCallback>) => void; }; /** * Creates a form store to control the state of * [Form](https://ariakit.com/components/form) components. * @example * ```jsx * const form = useFormStore({ * defaultValues: { * email: "", * }, * }); * *
* Email * * * Submit * * ``` */ export declare function useFormStore(props: PickRequired, "values" | "defaultValues" | "errors" | "defaultErrors" | "touched" | "defaultTouched">): FormStore; export declare function useFormStore(props: FormStoreProps): FormStore; export interface FormStoreValues extends Core.FormStoreValues { } export interface FormStoreItem extends Core.FormStoreItem { } export interface FormStoreState extends Core.FormStoreState, CollectionStoreState { } export interface FormStoreFunctions extends Core.FormStoreFunctions, CollectionStoreFunctions { /** * A custom hook that rerenders the component when the value of the given * field changes. It accepts a string or a reference to a field name from the * [`names`](https://ariakit.com/reference/use-form-store#names) object in the * store, for type safety. It returns the value of the field. * * Live examples: * - [Form with Select](https://ariakit.com/examples/form-select) * @example * const nameValue = store.useValue("name"); * // Can also use store.names for type safety. * const emailValue = store.useValue(store.names.email); */ useValue: (name: StringLike) => T; /** * Custom hook that accepts a callback that will be used to validate the form * when [`validate`](https://ariakit.com/reference/use-form-store#validate) is * called, typically when a form field is touched or when the form is * submitted. * * Live examples: * - [FormRadio](https://ariakit.com/examples/form-radio) * @example * store.useValidate(async (state) => { * const errors = await api.validate(state.values); * if (errors) { * store.setErrors(errors); * } * }); */ useValidate: (callback: Core.FormStoreCallback>) => void; /** * Custom hook that accepts a callback that will be used to submit the form * when [`submit`](https://ariakit.com/reference/use-form-store#submit) is * called. * * Live examples: * - [FormRadio](https://ariakit.com/examples/form-radio) * - [Form with Select](https://ariakit.com/examples/form-select) * @example * store.useSubmit(async (state) => { * try { * await api.submit(state.values); * } catch (errors) { * store.setErrors(errors); * } * }); */ useSubmit: (callback: Core.FormStoreCallback>) => void; } export interface FormStoreOptions extends Core.FormStoreOptions, CollectionStoreOptions { /** * Function that will be called when * [`values`](https://ariakit.com/reference/use-form-store#values) state * changes. * @example * function MyForm({ values, onChange }) { * const form = useFormStore({ values, setValues: onChange }); * } */ setValues?: (values: FormStoreState["values"]) => void; /** * Function that will be called when the * [`errors`](https://ariakit.com/reference/use-form-store#errors) state * changes. * @example * useFormStore({ setErrors: (errors) => console.log(errors) }); */ setErrors?: (errors: FormStoreState["errors"]) => void; /** * Function that will be called when the * [`touched`](https://ariakit.com/reference/use-form-store#touched) state * changes. * @example * useFormStore({ setTouched: (touched) => console.log(touched) }); */ setTouched?: (touched: FormStoreState["touched"]) => void; } export interface FormStoreProps extends FormStoreOptions, Core.FormStoreProps { } export interface FormStore extends FormStoreFunctions, Store> { }