@ariakit/react-core 0.3.1 → 0.3.2

package/esm/combobox/combobox-separator.d.ts

@@ -22,21 +22,26 @@ export declare const useComboboxSeparator: import("../utils/types.js").Hook<Comb
  * @see https://ariakit.org/components/combobox
  * @example
  * ```jsx
- * const combobox = useComboboxStore();
- * <Combobox store={combobox} />
- * <ComboboxPopover store={combobox}>
- *   <ComboboxItem value="Item 1" />
- *   <ComboboxSeparator />
- *   <ComboboxItem value="Item 2" />
- *   <ComboboxItem value="Item 3" />
- * </ComboboxPopover>
+ * <ComboboxProvider>
+ *   <Combobox />
+ *   <ComboboxPopover>
+ *     <ComboboxItem value="Item 1" />
+ *     <ComboboxSeparator />
+ *     <ComboboxItem value="Item 2" />
+ *     <ComboboxItem value="Item 3" />
+ *   </ComboboxPopover>
+ * </ComboboxProvider>
  * ```
  */
 export declare const ComboboxSeparator: import("../utils/types.js").Component<ComboboxSeparatorOptions<"hr">>;
 export interface ComboboxSeparatorOptions<T extends As = "hr"> extends CompositeSeparatorOptions<T> {
     /**
-     * Object returned by the `useComboboxStore` hook. If not provided, the parent
-     * `ComboboxList` or `ComboboxPopover` components' context will be used.
+     * Object returned by the
+     * [`useComboboxStore`](https://ariakit.org/reference/use-combobox-store)
+     * hook. If not provided, the parent
+     * [`ComboboxList`](https://ariakit.org/reference/combobox-list) or
+     * [`ComboboxPopover`](https://ariakit.org/reference/combobox-popover)
+     * components' context will be used.
      */
     store?: ComboboxStore;
 }

package/esm/combobox/combobox-store.d.ts

@@ -26,11 +26,16 @@ export interface ComboboxStoreFunctions extends Core.ComboboxStoreFunctions, Com
 export interface ComboboxStoreOptions extends Core.ComboboxStoreOptions, CompositeStoreOptions<ComboboxStoreItem>, PopoverStoreOptions {
     /**
      * A callback that gets called when the `value` state changes.
+     *
+     * Live examples:
+     * - [Combobox filtering](https://ariakit.org/examples/combobox-filtering)
+     * - [ComboboxGroup](https://ariakit.org/examples/combobox-group)
+     * - [Combobox with links](https://ariakit.org/examples/combobox-links)
+     * - [Multi-selectable
+     *   Combobox](https://ariakit.org/examples/combobox-multiple)
+     * - [Menu with Combobox](https://ariakit.org/examples/menu-combobox)
+     * - [Select with Combobox](https://ariakit.org/examples/select-combobox)
      * @param value The new value.
-     * @example
-     * function MyCombobox({ value, onChange }) {
-     *   const combobox = useComboboxStore({ value, setValue: onChange });
-     * }
      */
     setValue?: (value: ComboboxStoreState["value"]) => void;
 }

package/esm/combobox/combobox-store.js

@@ -1,12 +1,12 @@
 import {
   useComboboxStore,
   useComboboxStoreProps
-} from "../__chunks/R3N4R7UZ.js";
+} from "../__chunks/V5EW3YHP.js";
 import "../__chunks/WGAKICTY.js";
 import "../__chunks/NWDF5QDV.js";
-import "../__chunks/XEZV3AK4.js";
-import "../__chunks/HCTAKPNS.js";
-import "../__chunks/E6GADH6Y.js";
+import "../__chunks/H2BG4QDT.js";
+import "../__chunks/UY3UQ4QI.js";
+import "../__chunks/A2ONBKVT.js";
 import "../__chunks/XXO3VVQU.js";
 import "../__chunks/J7Q2EO23.js";
 import "../__chunks/CP3U4HPL.js";

package/esm/combobox/combobox.d.ts

@@ -25,31 +25,38 @@ export declare const useCombobox: import("../utils/types.js").Hook<ComboboxOptio
  * @see https://ariakit.org/components/combobox
  * @example
  * ```jsx
- * const combobox = useComboboxStore();
- * <Combobox store={combobox} />
- * <ComboboxPopover store={combobox}>
- *   <ComboboxItem value="Apple" />
- *   <ComboboxItem value="Banana" />
- *   <ComboboxItem value="Orange" />
- * </ComboboxPopover>
+ * <ComboboxProvider>
+ *   <Combobox />
+ *   <ComboboxPopover>
+ *     <ComboboxItem value="Apple" />
+ *     <ComboboxItem value="Banana" />
+ *     <ComboboxItem value="Orange" />
+ *   </ComboboxPopover>
+ * </ComboboxProvider>
  * ```
  */
 export declare const Combobox: import("../utils/types.js").Component<ComboboxOptions<"input">>;
 export interface ComboboxOptions<T extends As = "input"> extends CompositeOptions<T>, PopoverAnchorOptions<T> {
     /**
-     * Object returned by the `useComboboxStore` hook.
+     * Object returned by the
+     * [`useComboboxStore`](https://ariakit.org/reference/use-combobox-store)
+     * hook. If not provided, the closest
+     * [`ComboboxProvider`](https://ariakit.org/reference/combobox-provider)
+     * component's context will be used.
      */
     store?: ComboboxStore;
     /**
      * Whether the first item will be automatically selected when the combobox
      * input value changes. When it's set to `true`, the exact behavior will
-     * depend on the value of `autoComplete` prop:
-     * - If `autoComplete` is `both` or `inline`, the first item is automatically
-     *   focused when the popup opens, and the input value changes to reflect
-     *   this. The inline completion string will be highlighted and will have a
-     *   selected state.
-     * - If `autoComplete` is `list` or `none`, the first item is automatically
-     *   focused when the popup opens, but the input value doesn't change.
+     * depend on the value of
+     * [`autoComplete`](https://ariakit.org/reference/combobox#autocomplete) prop:
+     * - If [`autoComplete`](https://ariakit.org/reference/combobox#autocomplete)
+     *   is `both` or `inline`, the first item is automatically focused when the
+     *   popup opens, and the input value changes to reflect this. The inline
+     *   completion string will be highlighted and will have a selected state.
+     * - If [`autoComplete`](https://ariakit.org/reference/combobox#autocomplete)
+     *   is `list` or `none`, the first item is automatically focused when the
+     *   popup opens, but the input value doesn't change.
      *
      * Live examples:
      * - [ComboboxCancel](https://ariakit.org/examples/combobox-cancel)
@@ -57,26 +64,39 @@ export interface ComboboxOptions<T extends As = "input"> extends CompositeOption
      * - [Combobox with links](https://ariakit.org/examples/combobox-links)
      * - [Textarea with inline
      *   Combobox](https://ariakit.org/examples/combobox-textarea)
+     * - [Menu with Combobox](https://ariakit.org/examples/menu-combobox)
+     * - [Select with Combobox](https://ariakit.org/examples/select-combobox)
      * @default false
      */
     autoSelect?: boolean;
     /**
-     * Whether the items will be filtered based on `value` and whether the input
-     * value will temporarily change based on the active item. If `defaultList` or
-     * `list` are provided, this will be set to `list` by default, otherwise it'll
-     * default to `none`.
-     * - `both`: the items will be filtered based on `value` and the input value
-     *   will temporarily change based on the active item.
-     * - `list`: the items will be filtered based on `value` and the input value
-     *   will NOT change based on the active item.
-     * - `inline`: the items are static, that is, they won't be filtered based on
-     *   `value`, but the input value will temporarily change based on the active
-     *   item.
+     * Whether the items will be filtered based on
+     * [`value`](https://ariakit.org/reference/combobox-provider#value) and
+     * whether the input value will temporarily change based on the active item.
+     *
+     * This prop is based on the standard
+     * [`aria-autocomplete`](https://w3c.github.io/aria/#aria-autocomplete)
+     * attribute, accepting the same values:
+     * - `both`: indicates that the items will be filtered based on
+     *   [`value`](https://ariakit.org/reference/combobox-provider#value) and the
+     *   input value will temporarily change based on the active item. The
+     *   filtering logic must be implemented by the consumer of this component,
+     *   whereas Ariakit will automatically provide the inline autocompletion
+     *   behavior.
+     * - `list` (default): indicates that the items will be filtered based on
+     *   [`value`](https://ariakit.org/reference/combobox-provider#value) and the
+     *   input value will NOT change based on the active item. The filtering logic
+     *   must be implemented by the consumer of this component.
+     * - `inline`: indicates that the items are static, that is, they won't be
+     *   filtered, but the input value will temporarily change based on the active
+     *   item. Ariakit will automatically provide the inline autocompletion
+     *   behavior
      * - `none`: the items are static and the input value will NOT change based on
      *   the active item.
      *
      * Live examples:
      * - [ComboboxGroup](https://ariakit.org/examples/combobox-group)
+     * @default "list"
      */
     autoComplete?: StringWithValue<Required<AriaAttributes>["aria-autocomplete"]>;
     /**
@@ -105,8 +125,9 @@ export interface ComboboxOptions<T extends As = "input"> extends CompositeOption
      */
     setValueOnChange?: BooleanOrCallback<ChangeEvent<HTMLElement>>;
     /**
-     * Whether the combobox list/popover should be shown when the input is
-     * clicked.
+     * Whether the [`ComboboxList`](https://ariakit.org/reference/combobox-list)
+     * or [`ComboboxPopover`](https://ariakit.org/reference/combobox-popover)
+     * components should be shown when the input is clicked.
      *
      * Live examples:
      * - [Textarea with inline
@@ -114,15 +135,15 @@ export interface ComboboxOptions<T extends As = "input"> extends CompositeOption
      * @default true
      * @example
      * ```jsx
-     * const combobox = useComboboxStore();
-     * const canShow = combobox.useState((state) => state.value.length > 1);
-     * <Combobox store={combobox} showOnMouseDown={canShow} />
+     * <Combobox showOnMouseDown={value.length > 1} />
      * ```
      */
     showOnMouseDown?: BooleanOrCallback<MouseEvent<HTMLElement>>;
     /**
-     * Whether the combobox list/popover should be shown when the user presses
-     * the arrow up or down keys while focusing on the combobox input element.
+     * Whether the [`ComboboxList`](https://ariakit.org/reference/combobox-list)
+     * or [`ComboboxPopover`](https://ariakit.org/reference/combobox-popover)
+     * components should be shown when the user presses the arrow up or down keys
+     * while focusing on the combobox input element.
      *
      * Live examples:
      * - [Textarea with inline
@@ -130,9 +151,7 @@ export interface ComboboxOptions<T extends As = "input"> extends CompositeOption
      * @default true
      * @example
      * ```jsx
-     * const combobox = useComboboxStore();
-     * const canShow = combobox.useState((state) => state.value.length > 1);
-     * <Combobox store={combobox} showOnKeyDown={canShow} />
+     * <Combobox showOnKeyDown={value.length > 1} />
      * ```
      */
     showOnKeyDown?: BooleanOrCallback<ReactKeyboardEvent<HTMLElement>>;

package/esm/composite/composite-overflow-store.js

@@ -1,8 +1,8 @@
 import {
   usePopoverStoreProps
-} from "../__chunks/XEZV3AK4.js";
-import "../__chunks/HCTAKPNS.js";
-import "../__chunks/E6GADH6Y.js";
+} from "../__chunks/H2BG4QDT.js";
+import "../__chunks/UY3UQ4QI.js";
+import "../__chunks/A2ONBKVT.js";
 import {
   useStore
 } from "../__chunks/XXO3VVQU.js";

package/esm/composite/composite-overflow.js

@@ -1,8 +1,8 @@
 import {
   usePopover
-} from "../__chunks/RVGVDX6B.js";
-import "../__chunks/CJPLAYFB.js";
-import "../__chunks/NRLOAE2I.js";
+} from "../__chunks/GP4UGJIZ.js";
+import "../__chunks/4RP654JS.js";
+import "../__chunks/W575AF63.js";
 import "../__chunks/PLOINBVB.js";
 import "../__chunks/HAVCR65N.js";
 import "../__chunks/62DFK33R.js";
@@ -35,7 +35,7 @@ import {
   createElement,
   createHook
 } from "../__chunks/CFEUKV6C.js";
-import "../__chunks/E6GADH6Y.js";
+import "../__chunks/A2ONBKVT.js";
 import "../__chunks/XXO3VVQU.js";
 import {
   useEvent

package/esm/dialog/dialog-backdrop.js

@@ -1,6 +1,6 @@
 import {
   DialogBackdrop
-} from "../__chunks/NRLOAE2I.js";
+} from "../__chunks/W575AF63.js";
 import "../__chunks/KGDYSCOM.js";
 import "../__chunks/IXXFVVA2.js";
 import "../__chunks/5M4ITSXL.js";
@@ -10,7 +10,7 @@ import "../__chunks/3D7ZB3CS.js";
 import "../__chunks/5YYGDU4E.js";
 import "../__chunks/56KWVYDN.js";
 import "../__chunks/CFEUKV6C.js";
-import "../__chunks/E6GADH6Y.js";
+import "../__chunks/A2ONBKVT.js";
 import "../__chunks/XXO3VVQU.js";
 import "../__chunks/J7Q2EO23.js";
 import "../__chunks/CP3U4HPL.js";

package/esm/dialog/dialog-provider.js

@@ -5,8 +5,8 @@ import "../__chunks/56KWVYDN.js";
 import "../__chunks/CFEUKV6C.js";
 import {
   useDialogStore
-} from "../__chunks/HCTAKPNS.js";
-import "../__chunks/E6GADH6Y.js";
+} from "../__chunks/UY3UQ4QI.js";
+import "../__chunks/A2ONBKVT.js";
 import "../__chunks/XXO3VVQU.js";
 import "../__chunks/J7Q2EO23.js";
 import "../__chunks/CP3U4HPL.js";

package/esm/dialog/dialog-store.js

@@ -1,8 +1,8 @@
 import {
   useDialogStore,
   useDialogStoreProps
-} from "../__chunks/HCTAKPNS.js";
-import "../__chunks/E6GADH6Y.js";
+} from "../__chunks/UY3UQ4QI.js";
+import "../__chunks/A2ONBKVT.js";
 import "../__chunks/XXO3VVQU.js";
 import "../__chunks/J7Q2EO23.js";
 import "../__chunks/CP3U4HPL.js";

package/esm/dialog/dialog.js

@@ -1,8 +1,8 @@
 import {
   Dialog,
   useDialog
-} from "../__chunks/CJPLAYFB.js";
-import "../__chunks/NRLOAE2I.js";
+} from "../__chunks/4RP654JS.js";
+import "../__chunks/W575AF63.js";
 import "../__chunks/PLOINBVB.js";
 import "../__chunks/HAVCR65N.js";
 import "../__chunks/62DFK33R.js";
@@ -30,7 +30,7 @@ import "../__chunks/M4OAD5XF.js";
 import "../__chunks/BMLNRUFQ.js";
 import "../__chunks/6XXSNRNX.js";
 import "../__chunks/CFEUKV6C.js";
-import "../__chunks/E6GADH6Y.js";
+import "../__chunks/A2ONBKVT.js";
 import "../__chunks/XXO3VVQU.js";
 import "../__chunks/J7Q2EO23.js";
 import "../__chunks/CP3U4HPL.js";

package/esm/disclosure/disclosure-content.d.ts

@@ -18,15 +18,20 @@ export declare const useDisclosureContent: import("../utils/types.js").Hook<Disc
  * @see https://ariakit.org/components/disclosure
  * @example
  * ```jsx
- * const disclosure = useDisclosureStore();
- * <Disclosure store={disclosure}>Disclosure</Disclosure>
- * <DisclosureContent store={disclosure}>Content</DisclosureContent>
+ * <DisclosureProvider>
+ *   <Disclosure>Disclosure</Disclosure>
+ *   <DisclosureContent>Content</DisclosureContent>
+ * </DisclosureProvider>
  * ```
  */
 export declare const DisclosureContent: import("../utils/types.js").Component<DisclosureContentOptions<"div">>;
 export interface DisclosureContentOptions<T extends As = "div"> extends Options<T> {
     /**
-     * Object returned by the `useDisclosureStore` hook.
+     * Object returned by the
+     * [`useDisclosureStore`](https://ariakit.org/reference/use-disclosure-store)
+     * hook. If not provided, the closest
+     * [`DisclosureProvider`](https://ariakit.org/reference/disclosure-provider)
+     * component's context will be used.
      */
     store?: DisclosureStore;
     /**

package/esm/disclosure/disclosure-provider.js

@@ -4,7 +4,7 @@ import {
 import "../__chunks/CFEUKV6C.js";
 import {
   useDisclosureStore
-} from "../__chunks/E6GADH6Y.js";
+} from "../__chunks/A2ONBKVT.js";
 import "../__chunks/XXO3VVQU.js";
 import "../__chunks/J7Q2EO23.js";
 import "../__chunks/CP3U4HPL.js";

package/esm/disclosure/disclosure-store.d.ts

@@ -1,7 +1,6 @@
-import type { DependencyList } from "react";
 import * as Core from "@ariakit/core/disclosure/disclosure-store";
 import type { Store } from "../utils/store.js";
-export declare function useDisclosureStoreProps<T extends Core.DisclosureStore>(store: T, update: () => void, props: DisclosureStoreProps, deps?: DependencyList): T;
+export declare function useDisclosureStoreProps<T extends Core.DisclosureStore>(store: T, update: () => void, props: DisclosureStoreProps): T;
 /**
  * Creates a disclosure store.
  * @see https://ariakit.org/components/disclosure

package/esm/disclosure/disclosure-store.js

@@ -1,7 +1,7 @@
 import {
   useDisclosureStore,
   useDisclosureStoreProps
-} from "../__chunks/E6GADH6Y.js";
+} from "../__chunks/A2ONBKVT.js";
 import "../__chunks/XXO3VVQU.js";
 import "../__chunks/J7Q2EO23.js";
 import "../__chunks/CP3U4HPL.js";

package/esm/disclosure/disclosure.d.ts

@@ -21,20 +21,27 @@ export declare const useDisclosure: import("../utils/types.js").Hook<DisclosureO
  * @see https://ariakit.org/components/disclosure
  * @example
  * ```jsx
- * const disclosure = useDisclosureStore();
- * <Disclosure store={disclosure}>Disclosure</Disclosure>
- * <DisclosureContent store={disclosure}>Content</DisclosureContent>
+ * <DisclosureProvider>
+ *   <Disclosure>Disclosure</Disclosure>
+ *   <DisclosureContent>Content</DisclosureContent>
+ * </DisclosureProvider>
  * ```
  */
 export declare const Disclosure: import("../utils/types.js").Component<DisclosureOptions<"button">>;
 export interface DisclosureOptions<T extends As = "button"> extends ButtonOptions<T> {
     /**
-     * Object returned by the `useDisclosureStore` hook.
+     * Object returned by the
+     * [`useDisclosureStore`](https://ariakit.org/reference/use-disclosure-store)
+     * hook. If not provided, the closest
+     * [`DisclosureProvider`](https://ariakit.org/reference/disclosure-provider)
+     * component's context will be used.
      */
     store?: DisclosureStore;
     /**
-     * Determines whether `store.toggle()` will be called on click. This is useful
-     * if you want to handle the toggle logic yourself.
+     * Determines whether
+     * [`toggle`](https://ariakit.org/reference/use-disclosure-store#toggle) will
+     * be called on click. This is useful if you want to handle the toggle logic
+     * yourself.
      * @default true
      */
     toggleOnClick?: BooleanOrCallback<MouseEvent<HTMLElement>>;

package/esm/form/form-checkbox.d.ts

@@ -22,7 +22,11 @@ export declare const useFormCheckbox: import("../utils/types.js").Hook<FormCheck
  * @see https://ariakit.org/components/form
  * @example
  * ```jsx
- * const form = useFormStore({ defaultValues: { acceptTerms: false } });
+ * const form = useFormStore({
+ *   defaultValues: {
+ *     acceptTerms: false,
+ *   },
+ * });
  * <Form store={form}>
  *   <label>
  *     <FormCheckbox name={form.names.acceptTerms} />

package/esm/form/form-description.d.ts

@@ -22,7 +22,11 @@ export declare const useFormDescription: import("../utils/types.js").Hook<FormDe
  * @see https://ariakit.org/components/form
  * @example
  * ```jsx
- * const form = useFormStore({ defaultValues: { password: "" } });
+ * const form = useFormStore({
+ *   defaultValues: {
+ *     password: "",
+ *   },
+ * });
  * <Form store={form}>
  *   <FormLabel name={form.names.password}>Password</FormLabel>
  *   <FormInput name={form.names.password} type="password" />
@@ -35,8 +39,11 @@ export declare const useFormDescription: import("../utils/types.js").Hook<FormDe
 export declare const FormDescription: import("../utils/types.js").Component<FormDescriptionOptions<"div">>;
 export interface FormDescriptionOptions<T extends As = "div"> extends CollectionItemOptions<T> {
     /**
-     * Object returned by the `useFormStore` hook. If not provided, the parent
-     * `Form` component's context will be used.
+     * Object returned by the
+     * [`useFormStore`](https://ariakit.org/reference/use-form-store) hook. If not
+     * provided, the closest [`Form`](https://ariakit.org/reference/form) or
+     * [`FormProvider`](https://ariakit.org/reference/form-provider) components'
+     * context will be used.
      */
     store?: FormStore;
     /**

package/esm/form/form-error.d.ts

@@ -30,7 +30,11 @@ export declare const useFormError: import("../utils/types.js").Hook<FormErrorOpt
  * @see https://ariakit.org/components/form
  * @example
  * ```jsx
- * const form = useFormStore({ defaultValues: { email: "" } });
+ * const form = useFormStore({
+ *   defaultValues: {
+ *     email: "",
+ *   },
+ * });
  *
  * form.useValidate(() => {
  *   if (!form.values.email) {
@@ -48,8 +52,11 @@ export declare const useFormError: import("../utils/types.js").Hook<FormErrorOpt
 export declare const FormError: import("../utils/types.js").Component<FormErrorOptions<"div">>;
 export interface FormErrorOptions<T extends As = "div"> extends CollectionItemOptions<T> {
     /**
-     * Object returned by the `useFormStore` hook. If not provided, the parent
-     * `Form` component's context will be used.
+     * Object returned by the
+     * [`useFormStore`](https://ariakit.org/reference/use-form-store) hook. If not
+     * provided, the closest [`Form`](https://ariakit.org/reference/form) or
+     * [`FormProvider`](https://ariakit.org/reference/form-provider) components'
+     * context will be used.
      */
     store?: FormStore;
     /**

package/esm/form/form-field.d.ts

@@ -30,21 +30,26 @@ import type { FormStore } from "./form-store.js";
  */
 export declare const useFormField: import("../utils/types.js").Hook<FormFieldOptions<"input">>;
 /**
- * Renders a form field. Unlike `FormInput`, this component doesn't
- * automatically pass the `value` and `onChange` props down to the underlying
- * element. This is so we can use it not only for native form elements but also
- * for custom components whose value is not controlled by the native `value` and
- * `onChange` props.
+ * Renders a form field. Unlike
+ * [`FormInput`](https://ariakit.org/reference/form-input), this component
+ * doesn't automatically pass the `value` and `onChange` props down to the
+ * underlying element. This is so we can use it not only for native form
+ * elements but also for custom components whose value is not controlled by the
+ * native `value` and `onChange` props.
  * @see https://ariakit.org/components/form
  * @example
  * ```jsx
- * const form = useFormStore({ defaultValues: { content: "" } });
+ * const form = useFormStore({
+ *   defaultValues: {
+ *     content: "",
+ *   },
+ * });
+ *
  * const value = form.useValue(form.names.content);
  *
  * <Form store={form}>
  *   <FormLabel name={form.names.content}>Content</FormLabel>
  *   <FormField
- *     {...props}
  *     value={value}
  *     onChange={(value) => form.setValue(form.names.content, value)}
  *     render={<Editor />}
@@ -55,8 +60,11 @@ export declare const useFormField: import("../utils/types.js").Hook<FormFieldOpt
 export declare const FormField: import("../utils/types.js").Component<FormFieldOptions<"input">>;
 export interface FormFieldOptions<T extends As = "input"> extends CollectionItemOptions<T> {
     /**
-     * Object returned by the `useFormStore` hook. If not provided, the parent
-     * `Form` component's context will be used.
+     * Object returned by the
+     * [`useFormStore`](https://ariakit.org/reference/use-form-store) hook. If not
+     * provided, the closest [`Form`](https://ariakit.org/reference/form) or
+     * [`FormProvider`](https://ariakit.org/reference/form-provider) components'
+     * context will be used.
      */
     store?: FormStore;
     /**

package/esm/form/form-group-label.d.ts

@@ -16,8 +16,8 @@ import type { FormStore } from "./form-store.js";
 export declare const useFormGroupLabel: import("../utils/types.js").Hook<FormGroupLabelOptions<"div">>;
 /**
  * Renders a label in a form group. This component must be wrapped with
- * `FormGroup` so the `aria-labelledby` prop is properly set on the form group
- * element.
+ * [`FormGroup`](https://ariakit.org/reference/form-group) so the
+ * `aria-labelledby` prop is properly set on the form group element.
  * @see https://ariakit.org/components/form
  * @example
  * ```jsx
@@ -41,8 +41,11 @@ export declare const useFormGroupLabel: import("../utils/types.js").Hook<FormGro
 export declare const FormGroupLabel: import("../utils/types.js").Component<FormGroupLabelOptions<"div">>;
 export interface FormGroupLabelOptions<T extends As = "div"> extends GroupLabelOptions<T> {
     /**
-     * Object returned by the `useFormStore` hook. If not provided, the parent
-     * `Form` component's context will be used.
+     * Object returned by the
+     * [`useFormStore`](https://ariakit.org/reference/use-form-store) hook. If not
+     * provided, the closest [`Form`](https://ariakit.org/reference/form) or
+     * [`FormProvider`](https://ariakit.org/reference/form-provider) components'
+     * context will be used.
      */
     store?: FormStore;
 }

package/esm/form/form-group.d.ts

@@ -41,8 +41,11 @@ export declare const useFormGroup: import("../utils/types.js").Hook<FormGroupOpt
 export declare const FormGroup: import("../utils/types.js").Component<FormGroupOptions<"div">>;
 export interface FormGroupOptions<T extends As = "div"> extends GroupOptions<T> {
     /**
-     * Object returned by the `useFormStore` hook. If not provided, the parent
-     * `Form` component's context will be used.
+     * Object returned by the
+     * [`useFormStore`](https://ariakit.org/reference/use-form-store) hook. If not
+     * provided, the closest [`Form`](https://ariakit.org/reference/form) or
+     * [`FormProvider`](https://ariakit.org/reference/form-provider) components'
+     * context will be used.
      */
     store?: FormStore;
 }

package/esm/form/form-input.d.ts

@@ -18,13 +18,18 @@ import type { FormFieldOptions } from "./form-field.js";
  */
 export declare const useFormInput: import("../utils/types.js").Hook<FormInputOptions<"input">>;
 /**
- * Renders a form input. Unlike `FormField`, this component passes the `value`
- * and `onChange` props down to the underlying element that can be a native
- * input, select or textarea elements.
+ * Renders a form input. Unlike
+ * [`FormField`](https://ariakit.org/reference/form-field), this component
+ * passes the `value` and `onChange` props down to the underlying element that
+ * can be a native input, select or textarea elements.
  * @see https://ariakit.org/components/form
  * @example
  * ```jsx
- * const form = useFormStore({ defaultValues: { email: "" } });
+ * const form = useFormStore({
+ *   defaultValues: {
+ *     email: "",
+ *   },
+ * });
  * <Form store={form}>
  *   <FormLabel name={form.names.email}>Email</FormLabel>
  *   <FormInput name={form.names.email} />

package/esm/form/form-label.d.ts

@@ -29,7 +29,11 @@ export declare const useFormLabel: import("../utils/types.js").Hook<FormLabelOpt
  * @see https://ariakit.org/components/form
  * @example
  * ```jsx
- * const form = useFormStore({ defaultValues: { email: "" } });
+ * const form = useFormStore({
+ *   defaultValues: {
+ *     email: "",
+ *   },
+ * });
  * <Form store={form}>
  *   <FormLabel name={form.names.email}>Email</Role>
  *   <FormInput name={form.names.email} />
@@ -39,8 +43,11 @@ export declare const useFormLabel: import("../utils/types.js").Hook<FormLabelOpt
 export declare const FormLabel: import("../utils/types.js").Component<FormLabelOptions<"label">>;
 export interface FormLabelOptions<T extends As = "label"> extends CollectionItemOptions<T> {
     /**
-     * Object returned by the `useFormStore` hook. If not provided, the parent
-     * `Form` component's context will be used.
+     * Object returned by the
+     * [`useFormStore`](https://ariakit.org/reference/use-form-store) hook. If not
+     * provided, the closest [`Form`](https://ariakit.org/reference/form) or
+     * [`FormProvider`](https://ariakit.org/reference/form-provider) components'
+     * context will be used.
      */
     store?: FormStore;
     /**