@ariakit/react-components 0.1.0

package/dist/form/form-radio-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-radio-group.js","names":[],"sources":["../../src/form/form-radio-group.tsx"],"sourcesContent":["import {\n  useWrapElement,\n  createElement,\n  createHook,\n  forwardRef,\n} from \"@ariakit/react-utils\";\nimport type { Props } from \"@ariakit/react-utils\";\nimport type { ElementType } from \"react\";\nimport { CompositeScopedContextProvider } from \"../composite/composite-context.tsx\";\nimport type { FormGroupOptions } from \"./form-group.tsx\";\nimport { useFormGroup } from \"./form-group.tsx\";\n\nconst TagName = \"div\" satisfies ElementType;\ntype TagName = typeof TagName;\n\n/**\n * Returns props to create a `FormRadioGroup` component.\n * @see https://ariakit.com/components/form\n * @example\n * ```jsx\n * const store = useFormStore({ defaultValues: { color: \"red\" } });\n * const props = useFormRadioGroup({ store });\n * <Form store={store}>\n *   <Role {...props}>\n *     <FormGroupLabel>Favorite color</FormGroupLabel>\n *     <FormRadio name={store.names.color} value=\"red\" />\n *     <FormRadio name={store.names.color} value=\"blue\" />\n *     <FormRadio name={store.names.color} value=\"green\" />\n *   </Role>\n * </Form>\n * ```\n */\nexport const useFormRadioGroup = createHook<TagName, FormRadioGroupOptions>(\n  function useFormRadioGroup({ store, ...props }) {\n    // Reset the composite context so FormRadio items inside this group\n    // don't register to an unrelated ancestor composite store (e.g.,\n    // TabStore). Form controls explicitly pass their store to\n    // useCollectionItem, so they're not affected by this reset.\n    props = useWrapElement(\n      props,\n      (element) => (\n        <CompositeScopedContextProvider value={undefined}>\n          {element}\n        </CompositeScopedContextProvider>\n      ),\n      [],\n    );\n\n    props = { role: \"radiogroup\", ...props };\n    props = useFormGroup(props);\n    return props;\n  },\n);\n\n/**\n * Renders a group element for\n * [`FormRadio`](https://ariakit.com/reference/form-radio) elements. The\n * [`FormGroupLabel`](https://ariakit.com/reference/form-group-label) component\n * can be used inside this component so the `aria-labelledby` prop is properly\n * set on the group element.\n * @see https://ariakit.com/components/form\n * @example\n * ```jsx {8-13}\n * const form = useFormStore({\n *   defaultValues: {\n *     color: \"red\",\n *   },\n * });\n *\n * <Form store={form}>\n *   <FormRadioGroup>\n *     <FormGroupLabel>Favorite color</FormGroupLabel>\n *     <FormRadio name={form.names.color} value=\"red\" />\n *     <FormRadio name={form.names.color} value=\"blue\" />\n *     <FormRadio name={form.names.color} value=\"green\" />\n *   </FormRadioGroup>\n * </Form>\n * ```\n */\nexport const FormRadioGroup = forwardRef(function FormRadioGroup(\n  props: FormRadioGroupProps,\n) {\n  const htmlProps = useFormRadioGroup(props);\n  return createElement(TagName, htmlProps);\n});\n\nexport type FormRadioGroupOptions<T extends ElementType = TagName> =\n  FormGroupOptions<T>;\n\nexport type FormRadioGroupProps<T extends ElementType = TagName> = Props<\n  T,\n  FormRadioGroupOptions<T>\n>;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;MAsCI,oBACE,WACC,SACC,kBAAC,EAAA,OAAA,GAAA,SAAA;SAAsC,eAAA,QAAA,YAAA,oBAAA,gCAAA;cACpC;EAC6B,UAGpC;CAEA,CAAA,GAAA,CAAA,CAAA;SAAgB;EAAc,MAAG;EAAM,GAAA;CACvC;CACA,QAAO,aAAA,KAAA;CAEX,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;MA+BE,iBAAqB,WADH,SAAA,eACqB,OAAA;CACxC,OAAA,cAAA,SAAA,kBAAA,KAAA,CAAA"}

package/dist/form/form-radio.d.ts

@@ -0,0 +1,58 @@
+import { FormControlOptions } from "./form-control.js";
+import { RadioOptions } from "../radio/radio.js";
+import { Props } from "@ariakit/react-utils";
+import { ElementType } from "react";
+
+//#region src/form/form-radio.d.ts
+declare const TagName = "input";
+type TagName = typeof TagName;
+/**
+ * Returns props to create a `FormRadio` component.
+ * @see https://ariakit.com/components/form
+ * @example
+ * ```jsx
+ * const store = useFormStore({ defaultValues: { char: "a" } });
+ * const a = useFormRadio({ store, name: store.names.char, value: "a" });
+ * const b = useFormRadio({ store, name: store.names.char, value: "b" });
+ * const c = useFormRadio({ store, name: store.names.char, value: "c" });
+ * <Form store={store}>
+ *   <FormRadioGroup>
+ *     <FormGroupLabel>Favorite character</FormGroupLabel>
+ *     <Role {...a} />
+ *     <Role {...b} />
+ *     <Role {...c} />
+ *   </FormRadioGroup>
+ * </Form>
+ * ```
+ */
+declare const useFormRadio: import("@ariakit/react-utils").Hook<"input", FormRadioOptions<"input">>;
+/**
+ * Renders a radio button as a form control. This component must be wrapped in a
+ * [`FormRadioGroup`](https://ariakit.com/reference/form-radio-group) along with
+ * other radio buttons sharing the same
+ * [`name`](https://ariakit.com/reference/form-radio#name).
+ * @see https://ariakit.com/components/form
+ * @example
+ * ```jsx {10-12}
+ * const form = useFormStore({
+ *   defaultValues: {
+ *     char: "a",
+ *   },
+ * });
+ *
+ * <Form store={form}>
+ *   <FormRadioGroup>
+ *     <FormGroupLabel>Favorite character</FormGroupLabel>
+ *     <FormRadio name={form.names.char} value="a" />
+ *     <FormRadio name={form.names.char} value="b" />
+ *     <FormRadio name={form.names.char} value="c" />
+ *   </FormRadioGroup>
+ * </Form>
+ * ```
+ */
+declare const FormRadio: (props: FormRadioProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+interface FormRadioOptions<T extends ElementType = TagName> extends FormControlOptions<T>, Omit<RadioOptions<T>, "store" | "name"> {}
+type FormRadioProps<T extends ElementType = TagName> = Props<T, FormRadioOptions<T>>;
+//#endregion
+export { FormRadio, FormRadioOptions, FormRadioProps, useFormRadio };
+//# sourceMappingURL=form-radio.d.ts.map

package/dist/form/form-radio.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-radio.d.ts","names":["Props","ElementType","RadioOptions","FormControlOptions","TagName","useFormRadio","FormRadioOptions","Hook","FormRadio","FormRadioProps","props","ReactElement","JSXElementConstructor","T","Omit"],"sources":["../../src/form/form-radio.d.ts"],"mappings":";;;;;;cAIcI,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAFgC;;;;AACxC;AAAA;;;;AACQ;AAoB7B;;;;AAAgG;AAyBhG;;;;AA/C6D,cAsBxCC,YAAAA,iCAA6CE,IAAAA,UAAcD,gBAAgB;;;;;AAyB2C;AAC3I;;;;;;;;;;;;;;;;;;;cADqBE,SAAAA,GAAYE,KAAAA,EAAOD,cAAc,qBAAqBE,YAAAA,+BAA2CC,qBAAAA;AAAAA,UACrGN,gBAAAA,WAA2BL,WAAAA,GAAcG,OAAAA,UAAiBD,kBAAAA,CAAmBU,CAAAA,GAAIC,IAAAA,CAAKZ,YAAAA,CAAaW,CAAAA;AAAAA,KAExGJ,cAAAA,WAAyBR,WAAAA,GAAcG,OAAAA,IAAWJ,KAAAA,CAAMa,CAAAA,EAAGP,gBAAAA,CAAiBO,CAAAA"}

package/dist/form/form-radio.js

@@ -0,0 +1,90 @@
+"use client";
+import { useFormContext } from "./form-context.js";
+import { useFormControl } from "./form-control.js";
+import { useRadio } from "../radio/radio.js";
+import { createElement, createHook, forwardRef, memo, useEvent } from "@ariakit/react-utils";
+import { invariant } from "@ariakit/utils";
+import { useStoreState } from "@ariakit/react-store";
+//#region src/form/form-radio.tsx
+const TagName = "input";
+/**
+* Returns props to create a `FormRadio` component.
+* @see https://ariakit.com/components/form
+* @example
+* ```jsx
+* const store = useFormStore({ defaultValues: { char: "a" } });
+* const a = useFormRadio({ store, name: store.names.char, value: "a" });
+* const b = useFormRadio({ store, name: store.names.char, value: "b" });
+* const c = useFormRadio({ store, name: store.names.char, value: "c" });
+* <Form store={store}>
+*   <FormRadioGroup>
+*     <FormGroupLabel>Favorite character</FormGroupLabel>
+*     <Role {...a} />
+*     <Role {...b} />
+*     <Role {...c} />
+*   </FormRadioGroup>
+* </Form>
+* ```
+*/
+const useFormRadio = createHook(function useFormRadio({ store, name: nameProp, value, ...props }) {
+	const context = useFormContext();
+	store = store || context;
+	invariant(store, "FormRadio must be wrapped in a Form component.");
+	const name = String(nameProp);
+	const onChangeProp = props.onChange;
+	const onChange = useEvent((event) => {
+		onChangeProp?.(event);
+		if (event.defaultPrevented) return;
+		store?.setValue(name, value);
+	});
+	const checkedProp = props.checked;
+	const checked = useStoreState(store, () => checkedProp ?? store?.getValue(name) === value);
+	props = {
+		...props,
+		checked,
+		onChange
+	};
+	props = useRadio({
+		name,
+		value,
+		...props
+	});
+	props = useFormControl({
+		store,
+		name,
+		"aria-labelledby": void 0,
+		...props
+	});
+	return props;
+});
+/**
+* Renders a radio button as a form control. This component must be wrapped in a
+* [`FormRadioGroup`](https://ariakit.com/reference/form-radio-group) along with
+* other radio buttons sharing the same
+* [`name`](https://ariakit.com/reference/form-radio#name).
+* @see https://ariakit.com/components/form
+* @example
+* ```jsx {10-12}
+* const form = useFormStore({
+*   defaultValues: {
+*     char: "a",
+*   },
+* });
+*
+* <Form store={form}>
+*   <FormRadioGroup>
+*     <FormGroupLabel>Favorite character</FormGroupLabel>
+*     <FormRadio name={form.names.char} value="a" />
+*     <FormRadio name={form.names.char} value="b" />
+*     <FormRadio name={form.names.char} value="c" />
+*   </FormRadioGroup>
+* </Form>
+* ```
+*/
+const FormRadio = memo(forwardRef(function FormRadio(props) {
+	return createElement(TagName, useFormRadio(props));
+}));
+//#endregion
+export { FormRadio, useFormRadio };
+
+//# sourceMappingURL=form-radio.js.map

package/dist/form/form-radio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-radio.js","names":[],"sources":["../../src/form/form-radio.tsx"],"sourcesContent":["import { useStoreState } from \"@ariakit/react-store\";\nimport {\n  useEvent,\n  createElement,\n  createHook,\n  forwardRef,\n  memo,\n} from \"@ariakit/react-utils\";\nimport type { Props } from \"@ariakit/react-utils\";\nimport { invariant } from \"@ariakit/utils\";\nimport type { ChangeEvent, ElementType } from \"react\";\nimport type { RadioOptions } from \"../radio/radio.tsx\";\nimport { useRadio } from \"../radio/radio.tsx\";\nimport { useFormContext } from \"./form-context.tsx\";\nimport type { FormControlOptions } from \"./form-control.tsx\";\nimport { useFormControl } from \"./form-control.tsx\";\n\nconst TagName = \"input\" satisfies ElementType;\ntype TagName = typeof TagName;\n\n/**\n * Returns props to create a `FormRadio` component.\n * @see https://ariakit.com/components/form\n * @example\n * ```jsx\n * const store = useFormStore({ defaultValues: { char: \"a\" } });\n * const a = useFormRadio({ store, name: store.names.char, value: \"a\" });\n * const b = useFormRadio({ store, name: store.names.char, value: \"b\" });\n * const c = useFormRadio({ store, name: store.names.char, value: \"c\" });\n * <Form store={store}>\n *   <FormRadioGroup>\n *     <FormGroupLabel>Favorite character</FormGroupLabel>\n *     <Role {...a} />\n *     <Role {...b} />\n *     <Role {...c} />\n *   </FormRadioGroup>\n * </Form>\n * ```\n */\nexport const useFormRadio = createHook<TagName, FormRadioOptions>(\n  function useFormRadio({ store, name: nameProp, value, ...props }) {\n    const context = useFormContext();\n    store = store || context;\n\n    invariant(\n      store,\n      process.env.NODE_ENV !== \"production\" &&\n        \"FormRadio must be wrapped in a Form component.\",\n    );\n\n    const name = String(nameProp);\n    const onChangeProp = props.onChange;\n\n    const onChange = useEvent((event: ChangeEvent<HTMLInputElement>) => {\n      onChangeProp?.(event);\n      if (event.defaultPrevented) return;\n      store?.setValue(name, value);\n    });\n\n    const checkedProp = props.checked;\n    const checked = useStoreState(\n      store,\n      () => checkedProp ?? store?.getValue(name) === value,\n    );\n\n    props = {\n      ...props,\n      checked,\n      onChange,\n    };\n\n    props = useRadio({ name, value, ...props });\n\n    props = useFormControl({\n      store,\n      name,\n      \"aria-labelledby\": undefined,\n      ...props,\n    });\n\n    return props;\n  },\n);\n\n/**\n * Renders a radio button as a form control. This component must be wrapped in a\n * [`FormRadioGroup`](https://ariakit.com/reference/form-radio-group) along with\n * other radio buttons sharing the same\n * [`name`](https://ariakit.com/reference/form-radio#name).\n * @see https://ariakit.com/components/form\n * @example\n * ```jsx {10-12}\n * const form = useFormStore({\n *   defaultValues: {\n *     char: \"a\",\n *   },\n * });\n *\n * <Form store={form}>\n *   <FormRadioGroup>\n *     <FormGroupLabel>Favorite character</FormGroupLabel>\n *     <FormRadio name={form.names.char} value=\"a\" />\n *     <FormRadio name={form.names.char} value=\"b\" />\n *     <FormRadio name={form.names.char} value=\"c\" />\n *   </FormRadioGroup>\n * </Form>\n * ```\n */\nexport const FormRadio = memo(\n  forwardRef(function FormRadio(props: FormRadioProps) {\n    const htmlProps = useFormRadio(props);\n    return createElement(TagName, htmlProps);\n  }),\n);\n\nexport interface FormRadioOptions<T extends ElementType = TagName>\n  extends FormControlOptions<T>, Omit<RadioOptions<T>, \"store\" | \"name\"> {}\n\nexport type FormRadioProps<T extends ElementType = TagName> = Props<\n  T,\n  FormRadioOptions<T>\n>;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;MAyCI,eAAgB,WAAe,SAAA,aAAA,EAAA,OAAA,MAAA,UAAA,OAAA,GAAA,SAAA;CAC/B,MAAA,UAAQ,eAAS;CAEjB,QAAA,SAGI;CAGJ,UAAM,OAAO,gDAAe;CAC5B,MAAM,OAAA,OAAA,QAAqB;CAE3B,MAAM,eAAW,MAAU;OACzB,WAAe,UAAK,UAAA;EACpB,eAAU,KAAA;EACV,IAAA,MAAO,kBAAoB;EAC5B,OAAA,SAAA,MAAA,KAAA;CAED,CAAA;CACA,MAAM,cAAU,MAAA;CAKhB,MAAA,UAAQ,cAAA,aAAA,eAAA,OAAA,SAAA,IAAA,MAAA,KAAA;SACH;EACH,GAAA;EACA;EACF;CAEA;SAAmB,SAAA;EAAM;EAAO;EAAU,GAAA;CAE1C,CAAA;SACE,eAAA;EACA;EACA;EACA,mBAAG,KAAA;EACJ,GAAA;CAED,CAAA;CAEJ,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;MA6BI,YAAO,KAAc,WADH,SAAA,UACqB,OAAA;CACxC,OACH,cAAA,SAAA,aAAA,KAAA,CAAA"}

package/dist/form/form-remove.d.ts

@@ -0,0 +1,102 @@
+import { n as ButtonOptions } from "../button-Cp853csH.js";
+import { t as FormStore } from "../form-store-C4Kf5QHm.js";
+import { Props } from "@ariakit/react-utils";
+import { ElementType } from "react";
+import { StringLike } from "@ariakit/components/form/types";
+
+//#region src/form/form-remove.d.ts
+declare const TagName = "button";
+type TagName = typeof TagName;
+/**
+ * Returns props to create a `FormRemove` component.
+ * @see https://ariakit.com/components/form
+ * @example
+ * ```jsx
+ * const store = useFormStore({
+ *   defaultValues: {
+ *     languages: ["JavaScript", "PHP"],
+ *   },
+ * });
+ * const props = useFormRemove({
+ *   store,
+ *   name: store.names.languages,
+ *   index: 0,
+ * });
+ * const values = useStoreState(store, "values");
+ *
+ * <Form store={store}>
+ *   {values.languages.map((_, i) => (
+ *     <FormInput key={i} name={store.names.languages[i]} />
+ *   ))}
+ *   <Role {...props}>Remove first language</Role>
+ * </Form>
+ * ```
+ */
+declare const useFormRemove: import("@ariakit/react-utils").Hook<"button", FormRemoveOptions<"button">>;
+/**
+ * Renders a button that will remove an item from an array field in the form
+ * when clicked.
+ *
+ * The [`name`](https://ariakit.com/reference/form-remove#name) prop must be
+ * provided to identify the array field. Similarly, the
+ * [`index`](https://ariakit.com/reference/form-remove#index) prop is required
+ * to pinpoint the item to remove.
+ *
+ * By default, the button will automatically move focus to the next field in the
+ * form when clicked, or to the previous field if there isn't a next field. This
+ * behavior can be disabled by setting the
+ * [`autoFocusOnClick`](https://ariakit.com/reference/form-remove#autofocusonclick)
+ * prop to `false`.
+ * @see https://ariakit.com/components/form
+ * @example
+ * ```jsx {13}
+ * const form = useFormStore({
+ *   defaultValues: {
+ *     languages: ["JavaScript", "PHP"],
+ *   },
+ * });
+ *
+ * const values = useStoreState(form, "values");
+ *
+ * <Form store={form}>
+ *   {values.languages.map((_, i) => (
+ *     <div key={i}>
+ *       <FormInput name={form.names.languages[i]} />
+ *       <FormRemove name={form.names.languages} index={i} />
+ *     </div>
+ *   ))}
+ * </Form>
+ * ```
+ */
+declare const FormRemove: (props: FormRemoveProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+interface FormRemoveOptions<T extends ElementType = TagName> extends ButtonOptions<T> {
+  /**
+   * Object returned by the
+   * [`useFormStore`](https://ariakit.com/reference/use-form-store) hook. If not
+   * provided, the closest [`Form`](https://ariakit.com/reference/form) or
+   * [`FormProvider`](https://ariakit.com/reference/form-provider) components'
+   * context will be used.
+   */
+  store?: FormStore;
+  /**
+   * Name of the array field. This can either be 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.
+   */
+  name: StringLike;
+  /**
+   * Index of the item to remove.
+   */
+  index: number;
+  /**
+   * Whether the focus should be moved to the next or previous field when the
+   * button is clicked.
+   * @default true
+   */
+  autoFocusOnClick?: boolean;
+}
+type FormRemoveProps<T extends ElementType = TagName> = Props<T, FormRemoveOptions<T>>;
+//#endregion
+export { FormRemove, FormRemoveOptions, FormRemoveProps, useFormRemove };
+//# sourceMappingURL=form-remove.d.ts.map

package/dist/form/form-remove.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-remove.d.ts","names":["StringLike","Props","ElementType","ButtonOptions","FormStore","TagName","useFormRemove","FormRemoveOptions","Hook","FormRemove","FormRemoveProps","props","ReactElement","JSXElementConstructor","T","store","name","index","autoFocusOnClick"],"sources":["../../src/form/form-remove.d.ts"],"mappings":";;;;;;;cAKcK,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAFoB;;;;AAC5B;AAAA;;;;AACQ;AA0B7B;;;;AAAmG;AAoCnG;;;;;;;;;AAA6I;AAhE5F,cA4B5BC,aAAAA,iCAA8CE,IAAAA,WAAeD,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;AA8D/E;AAEpB;;;;;;;;;;;;cA5BqBE,UAAAA,GAAaE,KAAAA,EAAOD,eAAe,qBAAqBE,YAAAA,+BAA2CC,qBAAAA;AAAAA,UACvGN,iBAAAA,WAA4BL,WAAAA,GAAcG,OAAAA,UAAiBF,aAAAA,CAAcW,CAAAA;EA2B3Bb;;;;;AAA4B;;EAnBvFc,KAAAA,GAAQX,SAAAA;;;;;;;EAORY,IAAAA,EAAMhB,UAAAA;;;;EAINiB,KAAAA;;;;;;EAMAC,gBAAAA;AAAAA;AAAAA,KAEQR,eAAAA,WAA0BR,WAAAA,GAAcG,OAAAA,IAAWJ,KAAAA,CAAMa,CAAAA,EAAGP,iBAAAA,CAAkBO,CAAAA"}

package/dist/form/form-remove.js

@@ -0,0 +1,116 @@
+"use client";
+import { useButton } from "../button/button.js";
+import { useFormContext } from "./form-context.js";
+import { createElement, createHook, forwardRef, useEvent } from "@ariakit/react-utils";
+import { invariant, isTextField } from "@ariakit/utils";
+//#region src/form/form-remove.tsx
+const TagName = "button";
+function findNextOrPreviousField(items, name, index) {
+	const fields = items?.filter((item) => item.type === "field" && item.name.startsWith(name));
+	const regex = new RegExp(`^${name}\\.(\\d+)`);
+	const nextField = fields?.find((field) => {
+		const fieldIndex = field.name.replace(regex, "$1");
+		return Number.parseInt(fieldIndex, 10) > index;
+	});
+	if (nextField) return nextField;
+	return fields?.reverse().find((field) => {
+		const fieldIndex = field.name.replace(regex, "$1");
+		return Number.parseInt(fieldIndex, 10) < index;
+	});
+}
+function findPushButton(items, name) {
+	return items?.find((item) => item.type === "button" && item.name === name);
+}
+/**
+* Returns props to create a `FormRemove` component.
+* @see https://ariakit.com/components/form
+* @example
+* ```jsx
+* const store = useFormStore({
+*   defaultValues: {
+*     languages: ["JavaScript", "PHP"],
+*   },
+* });
+* const props = useFormRemove({
+*   store,
+*   name: store.names.languages,
+*   index: 0,
+* });
+* const values = useStoreState(store, "values");
+*
+* <Form store={store}>
+*   {values.languages.map((_, i) => (
+*     <FormInput key={i} name={store.names.languages[i]} />
+*   ))}
+*   <Role {...props}>Remove first language</Role>
+* </Form>
+* ```
+*/
+const useFormRemove = createHook(function useFormRemove({ store, name: nameProp, index, autoFocusOnClick = true, ...props }) {
+	const context = useFormContext();
+	store = store || context;
+	invariant(store, "FormRemove must be wrapped in a Form component.");
+	const name = String(nameProp);
+	const onClickProp = props.onClick;
+	const onClick = useEvent((event) => {
+		onClickProp?.(event);
+		if (event.defaultPrevented) return;
+		if (!store) return;
+		store.removeValue(name, index);
+		if (!autoFocusOnClick) return;
+		const { items } = store.getState();
+		const element = findNextOrPreviousField(items, name, index)?.element;
+		if (element) {
+			element.focus();
+			if (isTextField(element)) element.select();
+		} else findPushButton(items, name)?.element?.focus();
+	});
+	props = {
+		...props,
+		onClick
+	};
+	props = useButton(props);
+	return props;
+});
+/**
+* Renders a button that will remove an item from an array field in the form
+* when clicked.
+*
+* The [`name`](https://ariakit.com/reference/form-remove#name) prop must be
+* provided to identify the array field. Similarly, the
+* [`index`](https://ariakit.com/reference/form-remove#index) prop is required
+* to pinpoint the item to remove.
+*
+* By default, the button will automatically move focus to the next field in the
+* form when clicked, or to the previous field if there isn't a next field. This
+* behavior can be disabled by setting the
+* [`autoFocusOnClick`](https://ariakit.com/reference/form-remove#autofocusonclick)
+* prop to `false`.
+* @see https://ariakit.com/components/form
+* @example
+* ```jsx {13}
+* const form = useFormStore({
+*   defaultValues: {
+*     languages: ["JavaScript", "PHP"],
+*   },
+* });
+*
+* const values = useStoreState(form, "values");
+*
+* <Form store={form}>
+*   {values.languages.map((_, i) => (
+*     <div key={i}>
+*       <FormInput name={form.names.languages[i]} />
+*       <FormRemove name={form.names.languages} index={i} />
+*     </div>
+*   ))}
+* </Form>
+* ```
+*/
+const FormRemove = forwardRef(function FormRemove(props) {
+	return createElement(TagName, useFormRemove(props));
+});
+//#endregion
+export { FormRemove, useFormRemove };
+
+//# sourceMappingURL=form-remove.js.map

package/dist/form/form-remove.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-remove.js","names":[],"sources":["../../src/form/form-remove.tsx"],"sourcesContent":["import type { StringLike } from \"@ariakit/components/form/types\";\nimport {\n  useEvent,\n  createElement,\n  createHook,\n  forwardRef,\n} from \"@ariakit/react-utils\";\nimport type { Props } from \"@ariakit/react-utils\";\nimport { isTextField, invariant } from \"@ariakit/utils\";\nimport type { ElementType, MouseEvent } from \"react\";\nimport type { ButtonOptions } from \"../button/button.tsx\";\nimport { useButton } from \"../button/button.tsx\";\nimport { useFormContext } from \"./form-context.tsx\";\nimport type { FormStore, FormStoreState } from \"./form-store.ts\";\n\nconst TagName = \"button\" satisfies ElementType;\ntype TagName = typeof TagName;\ntype HTMLType = HTMLElementTagNameMap[TagName];\n\nfunction findNextOrPreviousField(\n  items: FormStoreState[\"items\"] | undefined,\n  name: string,\n  index: number,\n) {\n  const fields = items?.filter(\n    (item) => item.type === \"field\" && item.name.startsWith(name),\n  );\n  const regex = new RegExp(`^${name}\\\\.(\\\\d+)`);\n  const nextField = fields?.find((field) => {\n    const fieldIndex = field.name.replace(regex, \"$1\");\n    return Number.parseInt(fieldIndex, 10) > index;\n  });\n  if (nextField) return nextField;\n  return fields?.reverse().find((field) => {\n    const fieldIndex = field.name.replace(regex, \"$1\");\n    return Number.parseInt(fieldIndex, 10) < index;\n  });\n}\n\nfunction findPushButton(\n  items: FormStoreState[\"items\"] | undefined,\n  name: string,\n) {\n  return items?.find((item) => item.type === \"button\" && item.name === name);\n}\n\n/**\n * Returns props to create a `FormRemove` component.\n * @see https://ariakit.com/components/form\n * @example\n * ```jsx\n * const store = useFormStore({\n *   defaultValues: {\n *     languages: [\"JavaScript\", \"PHP\"],\n *   },\n * });\n * const props = useFormRemove({\n *   store,\n *   name: store.names.languages,\n *   index: 0,\n * });\n * const values = useStoreState(store, \"values\");\n *\n * <Form store={store}>\n *   {values.languages.map((_, i) => (\n *     <FormInput key={i} name={store.names.languages[i]} />\n *   ))}\n *   <Role {...props}>Remove first language</Role>\n * </Form>\n * ```\n */\nexport const useFormRemove = createHook<TagName, FormRemoveOptions>(\n  function useFormRemove({\n    store,\n    name: nameProp,\n    index,\n    autoFocusOnClick = true,\n    ...props\n  }) {\n    const context = useFormContext();\n    store = store || context;\n\n    invariant(\n      store,\n      process.env.NODE_ENV !== \"production\" &&\n        \"FormRemove must be wrapped in a Form component.\",\n    );\n\n    const name = String(nameProp);\n    const onClickProp = props.onClick;\n\n    const onClick = useEvent((event: MouseEvent<HTMLType>) => {\n      onClickProp?.(event);\n      if (event.defaultPrevented) return;\n      if (!store) return;\n      store.removeValue(name, index);\n      if (!autoFocusOnClick) return;\n      const { items } = store.getState();\n      const item = findNextOrPreviousField(items, name, index);\n      const element = item?.element;\n      if (element) {\n        element.focus();\n        if (isTextField(element)) {\n          element.select();\n        }\n      } else {\n        const pushButton = findPushButton(items, name);\n        pushButton?.element?.focus();\n      }\n    });\n\n    props = {\n      ...props,\n      onClick,\n    };\n\n    props = useButton(props);\n\n    return props;\n  },\n);\n\n/**\n * Renders a button that will remove an item from an array field in the form\n * when clicked.\n *\n * The [`name`](https://ariakit.com/reference/form-remove#name) prop must be\n * provided to identify the array field. Similarly, the\n * [`index`](https://ariakit.com/reference/form-remove#index) prop is required\n * to pinpoint the item to remove.\n *\n * By default, the button will automatically move focus to the next field in the\n * form when clicked, or to the previous field if there isn't a next field. This\n * behavior can be disabled by setting the\n * [`autoFocusOnClick`](https://ariakit.com/reference/form-remove#autofocusonclick)\n * prop to `false`.\n * @see https://ariakit.com/components/form\n * @example\n * ```jsx {13}\n * const form = useFormStore({\n *   defaultValues: {\n *     languages: [\"JavaScript\", \"PHP\"],\n *   },\n * });\n *\n * const values = useStoreState(form, \"values\");\n *\n * <Form store={form}>\n *   {values.languages.map((_, i) => (\n *     <div key={i}>\n *       <FormInput name={form.names.languages[i]} />\n *       <FormRemove name={form.names.languages} index={i} />\n *     </div>\n *   ))}\n * </Form>\n * ```\n */\nexport const FormRemove = forwardRef(function FormRemove(\n  props: FormRemoveProps,\n) {\n  const htmlProps = useFormRemove(props);\n  return createElement(TagName, htmlProps);\n});\n\nexport interface FormRemoveOptions<\n  T extends ElementType = TagName,\n> extends ButtonOptions<T> {\n  /**\n   * Object returned by the\n   * [`useFormStore`](https://ariakit.com/reference/use-form-store) hook. If not\n   * provided, the closest [`Form`](https://ariakit.com/reference/form) or\n   * [`FormProvider`](https://ariakit.com/reference/form-provider) components'\n   * context will be used.\n   */\n  store?: FormStore;\n  /**\n   * Name of the array field. This can either be a string or a reference to a\n   * field name from the\n   * [`names`](https://ariakit.com/reference/use-form-store#names) object in the\n   * store, for type safety.\n   */\n  name: StringLike;\n  /**\n   * Index of the item to remove.\n   */\n  index: number;\n  /**\n   * Whether the focus should be moved to the next or previous field when the\n   * button is clicked.\n   * @default true\n   */\n  autoFocusOnClick?: boolean;\n}\n\nexport type FormRemoveProps<T extends ElementType = TagName> = Props<\n  T,\n  FormRemoveOptions<T>\n>;\n"],"mappings":";;;;;;AAmBA,MAAA,UAAS;SAKD,wBACH,OAAS,MAAK,OAAA;CAEjB,MAAM,SAAQ,OAAI,QAAW,SAAK,KAAU,SAAA,WAAA,KAAA,KAAA,WAAA,IAAA,CAAA;CAC5C,MAAM,QAAA,IAAY,OAAA,IAAQ,KAAM,UAAU;OACxC,YAAM,QAAmB,MAAK,UAAQ;EACtC,MAAA,aAAc,MAAS,KAAA,QAAc,OAAI,IAAA;EAC1C,OAAA,OAAA,SAAA,YAAA,EAAA,IAAA;CACD,CAAA;CACA,IAAA,WAAe,OAAA;QACP,QAAA,QAAa,EAAA,MAAW,UAAQ;EACtC,MAAA,aAAc,MAAS,KAAA,QAAc,OAAI,IAAA;EAC1C,OAAA,OAAA,SAAA,YAAA,EAAA,IAAA;CACH,CAAA;AAEA;SAIS,eAAa,OAAS,MAAK;CACpC,OAAA,OAAA,MAAA,SAAA,KAAA,SAAA,YAAA,KAAA,SAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;MAmCI,gBAAgB,WAAe,SAAA,cAAA,EAAA,OAAA,MAAA,UAAA,OAAA,mBAAA,MAAA,GAAA,SAAA;CAC/B,MAAA,UAAQ,eAAS;CAEjB,QAAA,SAGI;CAGJ,UAAM,OAAO,iDAAe;CAC5B,MAAM,OAAA,OAAc,QAAM;CAE1B,MAAM,cAAU,MAAU;OACxB,UAAc,UAAK,UAAA;EACnB,cAAU,KAAA;EACV,IAAI,MAAC,kBAAO;EACZ,IAAA,CAAA,OAAM;EACN,MAAK,YAAA,MAAkB,KAAA;EACvB,IAAA,CAAA,kBAAkB;EAElB,MAAM,EAAA,UADO,MAAA,SAAA;EAEb,MAAI,UAAS,wBAAA,OAAA,MAAA,KAAA,GAAA;MACX,SAAQ;GACR,QAAI,MAAA;GAGN,IAAA,YACqB,OAAe,GAAA,QACzB,OAAG;EAEf,OAAA,eAAA,OAAA,IAAA,GAAA,SAAA,MAAA;CAED,CAAA;SACK;EACH,GAAA;EACF;CAEA;CAEA,QAAO,UAAA,KAAA;CAEX,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAyCE,aAAO,WAAc,SADH,WACoB,OAAC;CACxC,OAAA,cAAA,SAAA,cAAA,KAAA,CAAA"}

package/dist/form/form-reset.d.ts

@@ -0,0 +1,51 @@
+import { n as ButtonOptions } from "../button-Cp853csH.js";
+import { t as FormStore } from "../form-store-C4Kf5QHm.js";
+import { Props } from "@ariakit/react-utils";
+import { ElementType } from "react";
+
+//#region src/form/form-reset.d.ts
+declare const TagName = "button";
+type TagName = typeof TagName;
+/**
+ * Returns props to create a `FormReset` component.
+ * @see https://ariakit.com/components/form
+ * @example
+ * ```jsx
+ * const store = useFormStore();
+ * const props = useFormReset({ store });
+ * <Form store={store}>
+ *   <Role {...props}>Reset</Role>
+ * </Form>
+ * ```
+ */
+declare const useFormReset: import("@ariakit/react-utils").Hook<"button", FormResetOptions<"button">>;
+/**
+ * Renders a button that resets the form to its initial values, as defined by
+ * the
+ * [`defaultValues`](https://ariakit.com/reference/use-form-store#defaultvalues)
+ * prop given to the form store.
+ * @see https://ariakit.com/components/form
+ * @example
+ * ```jsx {4}
+ * const form = useFormStore();
+ *
+ * <Form store={form}>
+ *   <FormReset>Reset</FormReset>
+ * </Form>
+ * ```
+ */
+declare const FormReset: (props: FormResetProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+interface FormResetOptions<T extends ElementType = TagName> extends ButtonOptions<T> {
+  /**
+   * Object returned by the
+   * [`useFormStore`](https://ariakit.com/reference/use-form-store) hook. If not
+   * provided, the closest [`Form`](https://ariakit.com/reference/form) or
+   * [`FormProvider`](https://ariakit.com/reference/form-provider) components'
+   * context will be used.
+   */
+  store?: FormStore;
+}
+type FormResetProps<T extends ElementType = TagName> = Props<T, FormResetOptions<T>>;
+//#endregion
+export { FormReset, FormResetOptions, FormResetProps, useFormReset };
+//# sourceMappingURL=form-reset.d.ts.map

package/dist/form/form-reset.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-reset.d.ts","names":["Props","ElementType","ButtonOptions","FormStore","TagName","useFormReset","FormResetOptions","Hook","FormReset","FormResetProps","props","ReactElement","JSXElementConstructor","T","store"],"sources":["../../src/form/form-reset.d.ts"],"mappings":";;;;;;cAIcI,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAFoB;;;;AAC5B;AAAA;;;;AACQ;AAa7B;;AAfiD,cAe5BC,YAAAA,iCAA6CE,IAAAA,WAAeD,gBAAgB;;AAAA;AAgBjG;;;;;;;;;AAA2I;AAC3I;;;cADqBE,SAAAA,GAAYE,KAAAA,EAAOD,cAAc,qBAAqBE,YAAAA,+BAA2CC,qBAAAA;AAAAA,UACrGN,gBAAAA,WAA2BL,WAAAA,GAAcG,OAAAA,UAAiBF,aAAAA,CAAcW,CAAAA;EAAAA;;;;;;;EAQrFC,KAAAA,GAAQX,SAAAA;AAAAA;AAAAA,KAEAM,cAAAA,WAAyBR,WAAAA,GAAcG,OAAAA,IAAWJ,KAAAA,CAAMa,CAAAA,EAAGP,gBAAAA,CAAiBO,CAAAA"}

package/dist/form/form-reset.js

@@ -0,0 +1,54 @@
+"use client";
+import { useButton } from "../button/button.js";
+import { useFormContext } from "./form-context.js";
+import { createElement, createHook, forwardRef } from "@ariakit/react-utils";
+import { invariant } from "@ariakit/utils";
+import { useStoreState } from "@ariakit/react-store";
+//#region src/form/form-reset.tsx
+const TagName = "button";
+/**
+* Returns props to create a `FormReset` component.
+* @see https://ariakit.com/components/form
+* @example
+* ```jsx
+* const store = useFormStore();
+* const props = useFormReset({ store });
+* <Form store={store}>
+*   <Role {...props}>Reset</Role>
+* </Form>
+* ```
+*/
+const useFormReset = createHook(function useFormReset({ store, ...props }) {
+	const context = useFormContext();
+	store = store || context;
+	invariant(store, "FormReset must be wrapped in a Form component.");
+	props = {
+		type: "reset",
+		disabled: useStoreState(store, "submitting"),
+		...props
+	};
+	props = useButton(props);
+	return props;
+});
+/**
+* Renders a button that resets the form to its initial values, as defined by
+* the
+* [`defaultValues`](https://ariakit.com/reference/use-form-store#defaultvalues)
+* prop given to the form store.
+* @see https://ariakit.com/components/form
+* @example
+* ```jsx {4}
+* const form = useFormStore();
+*
+* <Form store={form}>
+*   <FormReset>Reset</FormReset>
+* </Form>
+* ```
+*/
+const FormReset = forwardRef(function FormReset(props) {
+	return createElement(TagName, useFormReset(props));
+});
+//#endregion
+export { FormReset, useFormReset };
+
+//# sourceMappingURL=form-reset.js.map

package/dist/form/form-reset.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-reset.js","names":[],"sources":["../../src/form/form-reset.tsx"],"sourcesContent":["import { useStoreState } from \"@ariakit/react-store\";\nimport { createElement, createHook, forwardRef } from \"@ariakit/react-utils\";\nimport type { Props } from \"@ariakit/react-utils\";\nimport { invariant } from \"@ariakit/utils\";\nimport type { ElementType } from \"react\";\nimport type { ButtonOptions } from \"../button/button.tsx\";\nimport { useButton } from \"../button/button.tsx\";\nimport { useFormContext } from \"./form-context.tsx\";\nimport type { FormStore } from \"./form-store.ts\";\n\nconst TagName = \"button\" satisfies ElementType;\ntype TagName = typeof TagName;\n\n/**\n * Returns props to create a `FormReset` component.\n * @see https://ariakit.com/components/form\n * @example\n * ```jsx\n * const store = useFormStore();\n * const props = useFormReset({ store });\n * <Form store={store}>\n *   <Role {...props}>Reset</Role>\n * </Form>\n * ```\n */\nexport const useFormReset = createHook<TagName, FormResetOptions>(\n  function useFormReset({ store, ...props }) {\n    const context = useFormContext();\n    store = store || context;\n\n    invariant(\n      store,\n      process.env.NODE_ENV !== \"production\" &&\n        \"FormReset must be wrapped in a Form component.\",\n    );\n\n    props = {\n      type: \"reset\",\n      disabled: useStoreState(store, \"submitting\"),\n      ...props,\n    };\n\n    props = useButton(props);\n\n    return props;\n  },\n);\n\n/**\n * Renders a button that resets the form to its initial values, as defined by\n * the\n * [`defaultValues`](https://ariakit.com/reference/use-form-store#defaultvalues)\n * prop given to the form store.\n * @see https://ariakit.com/components/form\n * @example\n * ```jsx {4}\n * const form = useFormStore();\n *\n * <Form store={form}>\n *   <FormReset>Reset</FormReset>\n * </Form>\n * ```\n */\nexport const FormReset = forwardRef(function FormReset(props: FormResetProps) {\n  const htmlProps = useFormReset(props);\n  return createElement(TagName, htmlProps);\n});\n\nexport interface FormResetOptions<\n  T extends ElementType = TagName,\n> extends ButtonOptions<T> {\n  /**\n   * Object returned by the\n   * [`useFormStore`](https://ariakit.com/reference/use-form-store) hook. If not\n   * provided, the closest [`Form`](https://ariakit.com/reference/form) or\n   * [`FormProvider`](https://ariakit.com/reference/form-provider) components'\n   * context will be used.\n   */\n  store?: FormStore;\n}\n\nexport type FormResetProps<T extends ElementType = TagName> = Props<\n  T,\n  FormResetOptions<T>\n>;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;MA2BI,eAAgB,WAAe,SAAA,aAAA,EAAA,OAAA,GAAA,SAAA;CAC/B,MAAA,UAAQ,eAAS;CAEjB,QAAA,SAGI;CAGJ,UAAQ,OAAA,gDAAA;SACA;EACN,MAAA;EACA,UAAG,cAAA,OAAA,YAAA;EACL,GAAA;CAEA;CAEA,QAAO,UAAA,KAAA;CAEX,OAAA;;;;;;;;;;;;;;;;;MAmBE,YAAO,WAAc,SADH,UAAa,OACQ;CACxC,OAAA,cAAA,SAAA,aAAA,KAAA,CAAA"}

package/dist/form/form-store.d.ts

@@ -0,0 +1,2 @@
+import { a as FormStoreProps, c as useFormStore, i as FormStoreOptions, l as useFormStoreProps, n as FormStoreFunctions, o as FormStoreState, r as FormStoreItem, s as FormStoreValues, t as FormStore } from "../form-store-C4Kf5QHm.js";
+export { FormStore, FormStoreFunctions, FormStoreItem, FormStoreOptions, FormStoreProps, FormStoreState, FormStoreValues, useFormStore, useFormStoreProps };

package/dist/form/form-store.js

@@ -0,0 +1,41 @@
+"use client";
+import { useCollectionStoreProps } from "../collection/collection-store.js";
+import { useEvent } from "@ariakit/react-utils";
+import { useCallback, useEffect, useMemo } from "react";
+import { useStore, useStoreProps, useStoreState } from "@ariakit/react-store";
+import * as Core from "@ariakit/components/form/form-store";
+//#region src/form/form-store.ts
+function useFormStoreProps(store, update, props) {
+	store = useCollectionStoreProps(store, update, props);
+	useStoreProps(store, props, "values", "setValues");
+	useStoreProps(store, props, "errors", "setErrors");
+	useStoreProps(store, props, "touched", "setTouched");
+	const useValue = useCallback((name) => useStoreState(store, () => store.getValue(name)), [store]);
+	const useValidate = useCallback((callback) => {
+		callback = useEvent(callback);
+		useEffect(() => store.onValidate(callback), [useStoreState(store, "items"), callback]);
+	}, [store]);
+	const useSubmit = useCallback((callback) => {
+		callback = useEvent(callback);
+		useEffect(() => store.onSubmit(callback), [useStoreState(store, "items"), callback]);
+	}, [store]);
+	return useMemo(() => ({
+		...store,
+		useValue,
+		useValidate,
+		useSubmit
+	}), [
+		store,
+		useValue,
+		useValidate,
+		useSubmit
+	]);
+}
+function useFormStore(props = {}) {
+	const [store, update] = useStore(Core.createFormStore, props);
+	return useFormStoreProps(store, update, props);
+}
+//#endregion
+export { useFormStore, useFormStoreProps };
+
+//# sourceMappingURL=form-store.js.map

package/dist/form/form-store.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-store.js","names":[],"sources":["../../src/form/form-store.ts"],"sourcesContent":["import * as Core from \"@ariakit/components/form/form-store\";\nimport type { StringLike } from \"@ariakit/components/form/types\";\nimport { useStore, useStoreProps, useStoreState } from \"@ariakit/react-store\";\nimport type { Store } from \"@ariakit/react-store\";\nimport { useEvent } from \"@ariakit/react-utils\";\nimport type { PickRequired } from \"@ariakit/utils\";\nimport { useCallback, useEffect, useMemo } from \"react\";\nimport type {\n  CollectionStoreFunctions,\n  CollectionStoreOptions,\n  CollectionStoreState,\n} from \"../collection/collection-store.ts\";\nimport { useCollectionStoreProps } from \"../collection/collection-store.ts\";\n\nexport function useFormStoreProps<\n  T extends Omit<FormStore, \"useValue\" | \"useValidate\" | \"useSubmit\">,\n>(store: T, update: () => void, props: FormStoreProps) {\n  store = useCollectionStoreProps(store, update, props);\n\n  useStoreProps(store, props, \"values\", \"setValues\");\n  useStoreProps(store, props, \"errors\", \"setErrors\");\n  useStoreProps(store, props, \"touched\", \"setTouched\");\n\n  const useValue = useCallback<FormStore[\"useValue\"]>(\n    (name) => useStoreState(store, () => store.getValue(name)),\n    [store],\n  );\n\n  const useValidate = useCallback<FormStore[\"useValidate\"]>(\n    (callback) => {\n      callback = useEvent(callback);\n      // Whenever the items change (for example, when form fields are lazily\n      // rendered), we need to reset the callbacks so they always run in a\n      // consistent order.\n      const items = useStoreState(store, \"items\");\n      useEffect(() => store.onValidate(callback), [items, callback]);\n    },\n    [store],\n  );\n\n  const useSubmit = useCallback<FormStore[\"useSubmit\"]>(\n    (callback) => {\n      callback = useEvent(callback);\n      // Same logic as useValidate.\n      const items = useStoreState(store, \"items\");\n      useEffect(() => store.onSubmit(callback), [items, callback]);\n    },\n    [store],\n  );\n\n  return useMemo(\n    () => ({\n      ...store,\n      useValue,\n      useValidate,\n      useSubmit,\n    }),\n    [store, useValue, useValidate, useSubmit],\n  );\n}\n\n/**\n * Creates a form store to control the state of\n * [Form](https://ariakit.com/components/form) components.\n * @example\n * ```jsx\n * const form = useFormStore({\n *   defaultValues: {\n *     email: \"\",\n *   },\n * });\n *\n * <Form store={form}>\n *   <FormLabel name={form.names.email}>Email</FormLabel>\n *   <FormInput name={form.names.email} />\n *   <FormError name={form.names.email} />\n *   <FormSubmit>Submit</FormSubmit>\n * </Form>\n * ```\n */\nexport function useFormStore<T extends FormStoreValues = FormStoreValues>(\n  props: PickRequired<\n    FormStoreProps<T>,\n    | \"values\"\n    | \"defaultValues\"\n    | \"errors\"\n    | \"defaultErrors\"\n    | \"touched\"\n    | \"defaultTouched\"\n  >,\n): FormStore<T>;\n\nexport function useFormStore(props: FormStoreProps): FormStore;\n\nexport function useFormStore(props: FormStoreProps = {}): FormStore {\n  const [store, update] = useStore(Core.createFormStore, props);\n  return useFormStoreProps(store, update, props);\n}\n\nexport interface FormStoreValues extends Core.FormStoreValues {}\n\nexport interface FormStoreItem extends Core.FormStoreItem {}\n\nexport interface FormStoreState<T extends FormStoreValues = FormStoreValues>\n  extends Core.FormStoreState<T>, CollectionStoreState<FormStoreItem> {}\n\nexport interface FormStoreFunctions<T extends FormStoreValues = FormStoreValues>\n  extends Core.FormStoreFunctions<T>, CollectionStoreFunctions<FormStoreItem> {\n  /**\n   * A custom hook that rerenders the component when the value of the given\n   * field changes. It accepts a string or a reference to a field name from the\n   * [`names`](https://ariakit.com/reference/use-form-store#names) object in the\n   * store, for type safety. It returns the value of the field.\n   *\n   * Live examples:\n   * - [Form with Select](https://ariakit.com/examples/form-select)\n   * @example\n   * const nameValue = store.useValue(\"name\");\n   * // Can also use store.names for type safety.\n   * const emailValue = store.useValue(store.names.email);\n   */\n  // oxlint-disable-next-line no-unnecessary-type-parameters\n  useValue: <T = any>(name: StringLike) => T;\n  /**\n   * Custom hook that accepts a callback that will be used to validate the form\n   * when [`validate`](https://ariakit.com/reference/use-form-store#validate) is\n   * called, typically when a form field is touched or when the form is\n   * submitted.\n   *\n   * Live examples:\n   * - [FormRadio](https://ariakit.com/examples/form-radio)\n   * @example\n   * store.useValidate(async (state) => {\n   *   const errors = await api.validate(state.values);\n   *   if (errors) {\n   *     store.setErrors(errors);\n   *   }\n   * });\n   */\n  useValidate: (callback: Core.FormStoreCallback<FormStoreState<T>>) => void;\n  /**\n   * Custom hook that accepts a callback that will be used to submit the form\n   * when [`submit`](https://ariakit.com/reference/use-form-store#submit) is\n   * called.\n   *\n   * Live examples:\n   * - [FormRadio](https://ariakit.com/examples/form-radio)\n   * - [Form with Select](https://ariakit.com/examples/form-select)\n   * @example\n   * store.useSubmit(async (state) => {\n   *   try {\n   *     await api.submit(state.values);\n   *   } catch (errors) {\n   *     store.setErrors(errors);\n   *   }\n   * });\n   */\n  useSubmit: (callback: Core.FormStoreCallback<FormStoreState<T>>) => void;\n}\n\nexport interface FormStoreOptions<T extends FormStoreValues = FormStoreValues>\n  extends Core.FormStoreOptions<T>, CollectionStoreOptions<FormStoreItem> {\n  /**\n   * Function that will be called when\n   * [`values`](https://ariakit.com/reference/use-form-store#values) state\n   * changes.\n   * @example\n   * function MyForm({ values, onChange }) {\n   *   const form = useFormStore({ values, setValues: onChange });\n   * }\n   */\n  setValues?: (values: FormStoreState<T>[\"values\"]) => void;\n  /**\n   * Function that will be called when the\n   * [`errors`](https://ariakit.com/reference/use-form-store#errors) state\n   * changes.\n   * @example\n   * useFormStore({ setErrors: (errors) => console.log(errors) });\n   */\n  setErrors?: (errors: FormStoreState<T>[\"errors\"]) => void;\n  /**\n   * Function that will be called when the\n   * [`touched`](https://ariakit.com/reference/use-form-store#touched) state\n   * changes.\n   * @example\n   * useFormStore({ setTouched: (touched) => console.log(touched) });\n   */\n  setTouched?: (touched: FormStoreState<T>[\"touched\"]) => void;\n}\n\nexport interface FormStoreProps<T extends FormStoreValues = FormStoreValues>\n  extends FormStoreOptions<T>, Core.FormStoreProps<T> {}\n\nexport interface FormStore<T extends FormStoreValues = FormStoreValues>\n  extends FormStoreFunctions<T>, Store<Core.FormStore<T>> {}\n"],"mappings":";;;;;;;SAiBU,kBAAA,OAAwB,QAAO,OAAQ;CAE/C,QAAA,wBAA4B,OAAU,QAAA,KAAW;CACjD,cAAc,OAAO,OAAO,UAAU,WAAW;CACjD,cAAc,OAAO,OAAO,UAAA,WAAW;CAEvC,cAAM,OAAW,OAAA,WACL,YAAA;CAIZ,MAAM,WAAA,aAAc,SACjB,cAAa,aAAA,MAAA,SAAA,IAAA,CAAA,GAAA,CAAA,KAAA,CAAA;OACZ,cAAW,aAAiB,aAAA;EAK5B,WAAA,SAAgB,QAAM;EACxB,gBAEF,MAAA,WAAA,QAAA,GAAA,CAAA,cAAA,OAAA,OAAA,GAAA,QAAA,CAAA;CAEA,GAAA,CAAA,KAAM,CAAA;OAEF,YAAW,aAAiB,aAAA;EAG5B,WAAA,SAAgB,QAAM;EACxB,gBAEF,MAAA,SAAA,QAAA,GAAA,CAAA,cAAA,OAAA,OAAA,GAAA,QAAA,CAAA;CAEA,GAAA,CAAA,KAAO,CAAA;QAEA,eAAA;EACH,GAAA;EACA;EACA;EACF;KACC;EAAO;EAAU;EAAa;EACjC;CACF,CAAA;AAmCA;SACS,aAAO,QAAU,CAAA,GAAS;CACjC,MAAA,CAAO,OAAA,UAAA,SAAyB,KAAA,iBAAa,KAAA;CAC/C,OAAA,kBAAA,OAAA,QAAA,KAAA"}