@ariakit/react-core 0.3.1 → 0.3.3

package/esm/select/select-item.d.ts

@@ -16,39 +16,64 @@ import type { SelectStore } from "./select-store.js";
  */
 export declare const useSelectItem: import("../utils/types.js").Hook<SelectItemOptions<"div">>;
 /**
- * Renders a select item inside a select list or select popover. The `role` prop
- * will be automatically set based on the `SelectList` or `SelectPopover` own
- * `role` prop. For example, if the `SelectPopover` component's `role` prop is
- * set to `listbox` (default), the `SelectItem` `role` will be set to `option`.
- * By default, the `value` prop will be rendered as the children, but this can
- * be overriden.
+ * Renders a select item inside a
+ * [`SelectList`](https://ariakit.org/reference/select-list) or
+ * [`SelectPopover`](https://ariakit.org/reference/select-popover).
+ *
+ * The `role` attribute will be automatically set on the item based on the
+ * list's own `role` attribute. For example, if the
+ * [`SelectPopover`](https://ariakit.org/reference/select-popover) component's
+ * `role` attribute is set to `listbox` (which is the default), the item `role`
+ * will be set to `option`.
+ *
+ * By default, the [`value`](https://ariakit.org/reference/select-item#value)
+ * prop will be rendered as the children, but this can be overriden if a custom
+ * children is provided.
  * @see https://ariakit.org/components/select
  * @example
- * ```jsx
- * const select = useSelectStore();
- * <Select store={select} />
- * <SelectPopover store={select}>
- *   <SelectItem value="Apple" />
- *   <SelectItem value="Orange" />
- * </SelectPopover>
+ * ```jsx {4-5}
+ * <SelectProvider>
+ *   <Select />
+ *   <SelectPopover>
+ *     <SelectItem value="Apple" />
+ *     <SelectItem value="Orange" />
+ *   </SelectPopover>
+ * </SelectProvider>
  * ```
  */
 export declare const SelectItem: import("../utils/types.js").Component<SelectItemOptions<"div">>;
 export interface SelectItemOptions<T extends As = "div"> extends CompositeItemOptions<T>, CompositeHoverOptions<T> {
     /**
-     * Object returned by the `useSelectStore` hook. If not provided, the parent
-     * `SelectList` or `SelectPopover` components' context will be used.
+     * Object returned by the
+     * [`useSelectStore`](https://ariakit.org/reference/use-select-store) hook. If
+     * not provided, the parent
+     * [`SelectList`](https://ariakit.org/reference/select-list) or
+     * [`SelectPopover`](https://ariakit.org/reference/select-popover) components'
+     * context will be used.
      */
     store?: SelectStore;
     /**
      * The value of the item. This will be rendered as the children by default.
-     *   - If `setValueOnClick` is set to `true` on this component, the
-     *     `select.value` state will be set to this value when the user clicks on
-     *     it.
-     *   - If `select.setValueOnMove` is set to `true` on the select store, the
-     *     `select.value` state will be set to this value when the user moves to
-     *     it (which is usually the case when moving through the items using the
-     *     keyboard).
+     * - If
+     *   [`setValueOnClick`](https://ariakit.org/reference/select-item#setvalueonclick)
+     *   is set to `true`, the
+     *   [`value`](https://ariakit.org/reference/select-provider#value) state will
+     *   be set to this value when the user clicks on it.
+     * - If
+     *   [`setValueOnMove`](https://ariakit.org/reference/select-provider#setvalueonmove)
+     *   is set to `true`, the
+     *   [`value`](https://ariakit.org/reference/select-provider#value) state will
+     *   be set to this value when the user moves to it (which is usually the case
+     *   when moving through the items using the keyboard).
+     *
+     * Live examples:
+     * - [Form with Select](https://ariakit.org/examples/form-select)
+     * - [Animated Select](https://ariakit.org/examples/select-animated)
+     * - [Select with Combobox](https://ariakit.org/examples/select-combobox)
+     * - [Select grid](https://ariakit.org/examples/select-grid)
+     * - [SelectGroup](https://ariakit.org/examples/select-group)
+     * - [Select with custom
+     *   item](https://ariakit.org/examples/select-item-custom)
      * @example
      * ```jsx
      * <SelectItem value="Apple" />
@@ -57,12 +82,14 @@ export interface SelectItemOptions<T extends As = "div"> extends CompositeItemOp
     value?: string;
     /**
      * Whether to hide the select when this item is clicked. By default, it's
-     * `true` when the `value` prop is also provided.
+     * `true` when the [`value`](https://ariakit.org/reference/select-item#value)
+     * prop is also provided.
      */
     hideOnClick?: BooleanOrCallback<MouseEvent<HTMLElement>>;
     /**
      * Whether to set the select value with this item's value, if any, when this
-     * item is clicked. By default, it's `true` when the `value` prop is also
+     * item is clicked. By default, it's `true` when the
+     * [`value`](https://ariakit.org/reference/select-item#value) prop is also
      * provided.
      */
     setValueOnClick?: BooleanOrCallback<MouseEvent<HTMLElement>>;

package/esm/select/select-item.js

@@ -7,8 +7,8 @@ import {
 } from "../__chunks/US4OMDIO.js";
 import {
   useCompositeItem
-} from "../__chunks/72OJKUSZ.js";
-import "../__chunks/LND6SMHN.js";
+} from "../__chunks/54J7EHCU.js";
+import "../__chunks/XBIFFFUN.js";
 import "../__chunks/XIA3HAXM.js";
 import "../__chunks/OXPV2NBK.js";
 import "../__chunks/5C7J4IAS.js";
@@ -16,14 +16,14 @@ import "../__chunks/74KKBFVP.js";
 import "../__chunks/547DFODS.js";
 import "../__chunks/5YYGDU4E.js";
 import "../__chunks/56KWVYDN.js";
-import "../__chunks/M4OAD5XF.js";
+import "../__chunks/YTHH33BK.js";
 import "../__chunks/BMLNRUFQ.js";
 import {
   createElement,
   createHook,
   createMemoComponent
 } from "../__chunks/CFEUKV6C.js";
-import "../__chunks/XXO3VVQU.js";
+import "../__chunks/4LP74VAP.js";
 import {
   useBooleanEvent,
   useEvent,

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

@@ -16,27 +16,31 @@ import type { SelectStore } from "./select-store.js";
  */
 export declare const useSelectLabel: import("../utils/types.js").Hook<SelectLabelOptions<"div">>;
 /**
- * Renders a label for the `Select` component. Since it's not a native select
- * element, we can't use the native label element. The `SelectLabel` component
- * will move focus and click on the `Select` component when the user clicks on
- * the label.
+ * Renders a label for the [`Select`](https://ariakit.org/reference/select)
+ * component. Since it's not a native select element, we can't use the native
+ * label element. This component will move focus and click on the
+ * [`Select`](https://ariakit.org/reference/select) component when clicked.
  * @see https://ariakit.org/components/select
  * @example
- * ```jsx
- * const select = useSelectStore({ defaultValue: "Apple" });
- * <SelectLabel store={select}>Favorite fruit</SelectLabel>
- * <Select store={select} />
- * <SelectPopover store={select}>
- *   <SelectItem value="Apple" />
- *   <SelectItem value="Orange" />
- * </SelectPopover>
+ * ```jsx {2}
+ * <SelectProvider defaultValue="Apple">
+ *   <SelectLabel>Favorite fruit</SelectLabel>
+ *   <Select />
+ *   <SelectPopover>
+ *     <SelectItem value="Apple" />
+ *     <SelectItem value="Orange" />
+ *   </SelectPopover>
+ * </SelectProvider>
  * ```
  */
 export declare const SelectLabel: import("../utils/types.js").Component<SelectLabelOptions<"div">>;
 export interface SelectLabelOptions<T extends As = "div"> extends Options<T> {
     /**
-     * Object returned by the `useSelectStore` hook. If not provided, the parent
-     * `Select` component's context will be used.
+     * Object returned by the
+     * [`useSelectStore`](https://ariakit.org/reference/use-select-store) hook. If
+     * not provided, the closest
+     * [`SelectProvider`](https://ariakit.org/reference/select-provider)
+     * component's context will be used.
      */
     store?: SelectStore;
 }

package/esm/select/select-list.d.ts

@@ -20,37 +20,47 @@ import type { SelectStore } from "./select-store.js";
  */
 export declare const useSelectList: import("../utils/types.js").Hook<SelectListOptions<"div">>;
 /**
- * Renders a select list. The `role` prop is set to `listbox` by default, but
- * can be overriden by any other valid select popup role (`listbox`, `menu`,
- * `tree`, `grid` or `dialog`). The `aria-labelledby` prop is set to the select
- * input element's `id` by default.
+ * Renders a select list. The `role` attribute is set to `listbox` by default,
+ * but can be overriden by any other valid select popup role (`listbox`, `menu`,
+ * `tree`, `grid` or `dialog`).
+ *
+ * The `aria-labelledby` attribute is set to the
+ * [`Select`](https://ariakit.org/reference/select) element's `id` by default.
  * @see https://ariakit.org/components/select
  * @example
- * ```jsx
- * const select = useSelectStore();
- * <Select store={select} />
- * <SelectList store={select}>
- *   <SelectItem value="Apple" />
- *   <SelectItem value="Orange" />
- * </SelectList>
+ * ```jsx {3-6}
+ * <SelectProvider>
+ *   <Select />
+ *   <SelectList>
+ *     <SelectItem value="Apple" />
+ *     <SelectItem value="Orange" />
+ *   </SelectList>
+ * </SelectProvider>
  * ```
  */
 export declare const SelectList: import("../utils/types.js").Component<SelectListOptions<"div">>;
 export interface SelectListOptions<T extends As = "div"> extends CompositeOptions<T>, CompositeTypeaheadOptions<T>, Pick<DisclosureContentOptions, "alwaysVisible"> {
     /**
-     * Object returned by the `useSelectStore` hook.
+     * Object returned by the
+     * [`useSelectStore`](https://ariakit.org/reference/use-select-store) hook. If
+     * not provided, the closest
+     * [`SelectProvider`](https://ariakit.org/reference/select-provider)
+     * component's context will be used.
      */
     store?: SelectStore;
     /**
      * Whether the select value should be reset to the value before the list got
-     * shown when Escape is pressed. This has effect only when `selectOnMove` is
-     * `true` on the select store.
+     * shown when Escape is pressed. This has effect only when
+     * [`setValueOnMove`](https://ariakit.org/reference/select-provider#setvalueonmove)
+     * is `true`.
      * @default true
      */
     resetOnEscape?: BooleanOrCallback<KeyboardEvent<HTMLElement>>;
     /**
-     * Whether the select list should be hidden when the user presses Enter or
-     * Space while the list is focused (that is, no item is selected).
+     * Whether the [`SelectList`](https://ariakit.org/reference/select-list) or
+     * [`SelectPopover`](https://ariakit.org/reference/select-popover) components
+     * should be hidden when the user presses Enter or Space while the list
+     * element is focused and no item is active.
      * @default true
      */
     hideOnEnter?: BooleanOrCallback<KeyboardEvent<HTMLElement>>;

package/esm/select/select-list.js

@@ -1,10 +1,10 @@
 import {
   SelectList,
   useSelectList
-} from "../__chunks/QJMIKN5O.js";
+} from "../__chunks/DX7BNVVX.js";
 import "../__chunks/YVYWIVKG.js";
 import "../__chunks/US4OMDIO.js";
-import "../__chunks/HYNMOU7J.js";
+import "../__chunks/56TAEBRJ.js";
 import "../__chunks/OXPV2NBK.js";
 import "../__chunks/5C7J4IAS.js";
 import "../__chunks/74KKBFVP.js";
@@ -12,7 +12,7 @@ import "../__chunks/3D7ZB3CS.js";
 import "../__chunks/547DFODS.js";
 import "../__chunks/5YYGDU4E.js";
 import "../__chunks/56KWVYDN.js";
-import "../__chunks/M4OAD5XF.js";
+import "../__chunks/YTHH33BK.js";
 import "../__chunks/BMLNRUFQ.js";
 import "../__chunks/CFEUKV6C.js";
 import "../__chunks/J7Q2EO23.js";

package/esm/select/select-popover.d.ts

@@ -16,18 +16,19 @@ import type { SelectListOptions } from "./select-list.js";
  */
 export declare const useSelectPopover: import("../utils/types.js").Hook<SelectPopoverOptions<"div">>;
 /**
- * Renders a select popover. The `role` prop is set to `listbox` by default, but
- * can be overriden by any other valid select popup role (`listbox`, `menu`,
- * `tree`, `grid` or `dialog`).
+ * Renders a select popover. The `role` attribute is set to `listbox` by
+ * default, but can be overriden by any other valid select popup role
+ * (`listbox`, `menu`, `tree`, `grid` or `dialog`).
  * @see https://ariakit.org/components/select
  * @example
- * ```jsx
- * const select = useSelectStore();
- * <Select store={select} />
- * <SelectPopover store={select}>
- *   <SelectItem value="Apple" />
- *   <SelectItem value="Orange" />
- * </SelectPopover>
+ * ```jsx {3-6}
+ * <SelectProvider>
+ *   <Select />
+ *   <SelectPopover>
+ *     <SelectItem value="Apple" />
+ *     <SelectItem value="Orange" />
+ *   </SelectPopover>
+ * </SelectProvider>
  * ```
  */
 export declare const SelectPopover: import("../utils/types.js").Component<SelectPopoverOptions<"div">>;

package/esm/select/select-popover.js

@@ -1,28 +1,28 @@
 import {
   useSelectList
-} from "../__chunks/QJMIKN5O.js";
+} from "../__chunks/DX7BNVVX.js";
 import "../__chunks/YVYWIVKG.js";
 import {
   useSelectProviderContext
 } from "../__chunks/US4OMDIO.js";
-import "../__chunks/HYNMOU7J.js";
+import "../__chunks/56TAEBRJ.js";
 import "../__chunks/OXPV2NBK.js";
 import "../__chunks/5C7J4IAS.js";
 import "../__chunks/74KKBFVP.js";
 import {
   usePopover
-} from "../__chunks/RVGVDX6B.js";
-import "../__chunks/CJPLAYFB.js";
-import "../__chunks/NRLOAE2I.js";
-import "../__chunks/PLOINBVB.js";
-import "../__chunks/HAVCR65N.js";
+} from "../__chunks/MNVQ65E5.js";
+import "../__chunks/YGEFENKI.js";
+import "../__chunks/IAA7Y45N.js";
+import "../__chunks/HWJ7DGMR.js";
+import "../__chunks/7LB47D2O.js";
 import "../__chunks/62DFK33R.js";
-import "../__chunks/KGDYSCOM.js";
-import "../__chunks/XASENZA4.js";
-import "../__chunks/X5VV5CBA.js";
+import "../__chunks/FRKOFFMT.js";
+import "../__chunks/EGOOWJGN.js";
+import "../__chunks/7VWXICM7.js";
 import "../__chunks/KOVUJERF.js";
 import "../__chunks/IXXFVVA2.js";
-import "../__chunks/5M4ITSXL.js";
+import "../__chunks/VRCYQ6JX.js";
 import "../__chunks/7JNF6I52.js";
 import "../__chunks/3LGVTTHD.js";
 import "../__chunks/FW6QFGFT.js";
@@ -38,7 +38,7 @@ import "../__chunks/3D7ZB3CS.js";
 import "../__chunks/547DFODS.js";
 import "../__chunks/5YYGDU4E.js";
 import "../__chunks/56KWVYDN.js";
-import "../__chunks/M4OAD5XF.js";
+import "../__chunks/YTHH33BK.js";
 import "../__chunks/BMLNRUFQ.js";
 import "../__chunks/6XXSNRNX.js";
 import {
@@ -46,8 +46,8 @@ import {
   createElement,
   createHook
 } from "../__chunks/CFEUKV6C.js";
-import "../__chunks/E6GADH6Y.js";
-import "../__chunks/XXO3VVQU.js";
+import "../__chunks/BWOZSOC7.js";
+import "../__chunks/4LP74VAP.js";
 import "../__chunks/J7Q2EO23.js";
 import "../__chunks/CP3U4HPL.js";
 import {

package/esm/select/select-provider.js

@@ -1,22 +1,22 @@
 import {
   useSelectStore
-} from "../__chunks/RA2AAYOC.js";
+} from "../__chunks/X6F6ND2A.js";
 import "../__chunks/QP4RN5UY.js";
 import {
   SelectContextProvider
 } from "../__chunks/US4OMDIO.js";
-import "../__chunks/WGAKICTY.js";
-import "../__chunks/NWDF5QDV.js";
+import "../__chunks/EZ23JQKA.js";
+import "../__chunks/C6MBVGZ2.js";
 import "../__chunks/5C7J4IAS.js";
 import "../__chunks/74KKBFVP.js";
 import "../__chunks/547DFODS.js";
 import "../__chunks/5YYGDU4E.js";
 import "../__chunks/56KWVYDN.js";
 import "../__chunks/CFEUKV6C.js";
-import "../__chunks/XEZV3AK4.js";
-import "../__chunks/HCTAKPNS.js";
-import "../__chunks/E6GADH6Y.js";
-import "../__chunks/XXO3VVQU.js";
+import "../__chunks/DO6GQUCF.js";
+import "../__chunks/DJUMA466.js";
+import "../__chunks/BWOZSOC7.js";
+import "../__chunks/4LP74VAP.js";
 import "../__chunks/J7Q2EO23.js";
 import "../__chunks/CP3U4HPL.js";
 import "../__chunks/PNRLI7OV.js";

package/esm/select/select-renderer.js

@@ -1,10 +1,10 @@
 import {
   useCompositeRenderer
-} from "../__chunks/C5JX5C3O.js";
+} from "../__chunks/NQQVRTV2.js";
 import {
   getCollectionRendererItem,
   getCollectionRendererItemId
-} from "../__chunks/3HFOFZP4.js";
+} from "../__chunks/2EIZAZYB.js";
 import {
   useSelectContext
 } from "../__chunks/US4OMDIO.js";
@@ -19,7 +19,7 @@ import {
 } from "../__chunks/CFEUKV6C.js";
 import {
   useStoreState
-} from "../__chunks/XXO3VVQU.js";
+} from "../__chunks/4LP74VAP.js";
 import "../__chunks/J7Q2EO23.js";
 import "../__chunks/CP3U4HPL.js";
 import {

package/esm/select/select-row.d.ts

@@ -21,26 +21,31 @@ export declare const useSelectRow: import("../utils/types.js").Hook<SelectRowOpt
  * Renders a select row.
  * @see https://ariakit.org/components/select
  * @example
- * ```jsx
- * const select = useSelectStore();
- * <Select store={select} />
- * <SelectPopover store={select}>
- *   <SelectRow>
- *     <SelectItem value="Apple" />
- *     <SelectItem value="Orange" />
- *   </SelectRow>
- *   <SelectRow>
- *     <SelectItem value="Banana" />
- *     <SelectItem value="Grape" />
- *   </SelectRow>
- * </SelectPopover>
+ * ```jsx {4-11}
+ * <SelectProvider>
+ *   <Select />
+ *   <SelectPopover>
+ *     <SelectRow>
+ *       <SelectItem value="Apple" />
+ *       <SelectItem value="Orange" />
+ *     </SelectRow>
+ *     <SelectRow>
+ *       <SelectItem value="Banana" />
+ *       <SelectItem value="Grape" />
+ *     </SelectRow>
+ *   </SelectPopover>
+ * </SelectProvider>
  * ```
  */
 export declare const SelectRow: import("../utils/types.js").Component<SelectRowOptions<"div">>;
 export interface SelectRowOptions<T extends As = "div"> extends CompositeRowOptions<T> {
     /**
-     * Object returned by the `useSelectStore` hook. If not provided, the parent
-     * `SelectList` or `SelectPopover` components' context will be used.
+     * Object returned by the
+     * [`useSelectStore`](https://ariakit.org/reference/use-select-store) hook. If
+     * not provided, the parent
+     * [`SelectList`](https://ariakit.org/reference/select-list) or
+     * [`SelectPopover`](https://ariakit.org/reference/select-popover) components'
+     * context will be used.
      */
     store?: SelectStore;
 }

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

@@ -21,22 +21,27 @@ export declare const useSelectSeparator: import("../utils/types.js").Hook<Select
  * Renders a separator element for select items.
  * @see https://ariakit.org/components/select
  * @example
- * ```jsx
- * const select = useSelectStore();
- * <Select store={select} />
- * <SelectPopover store={select}>
- *   <SelectItem value="Item 1" />
- *   <SelectSeparator />
- *   <SelectItem value="Item 2" />
- *   <SelectItem value="Item 3" />
- * </SelectPopover>
+ * ```jsx {5}
+ * <SelectProvider>
+ *   <Select />
+ *   <SelectPopover>
+ *     <SelectItem value="Item 1" />
+ *     <SelectSeparator />
+ *     <SelectItem value="Item 2" />
+ *     <SelectItem value="Item 3" />
+ *   </SelectPopover>
+ * </SelectProvider>
  * ```
  */
 export declare const SelectSeparator: import("../utils/types.js").Component<SelectSeparatorOptions<"hr">>;
 export interface SelectSeparatorOptions<T extends As = "hr"> extends CompositeSeparatorOptions<T> {
     /**
-     * Object returned by the `useSelectStore` hook. If not provided, the parent
-     * `SelectList` or `SelectPopover` components' context will be used.
+     * Object returned by the
+     * [`useSelectStore`](https://ariakit.org/reference/use-select-store) hook. If
+     * not provided, the parent
+     * [`SelectList`](https://ariakit.org/reference/select-list) or
+     * [`SelectPopover`](https://ariakit.org/reference/select-popover) components'
+     * context will be used.
      */
     store?: SelectStore;
 }

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

@@ -13,7 +13,7 @@ export declare function useSelectStoreProps<T extends Core.SelectStore>(store: T
             <K extends keyof import("@ariakit/core/combobox/combobox-store").ComboboxStoreState>(key: K): import("@ariakit/core/combobox/combobox-store").ComboboxStoreState[K];
             <V>(selector: (state: import("@ariakit/core/combobox/combobox-store").ComboboxStoreState) => V): V;
         };
-    }) | undefined;
+    }) | null | undefined;
 };
 /**
  * Creates a select store.
@@ -40,10 +40,6 @@ export interface SelectStoreOptions<T extends Value = Value> extends Core.Select
     /**
      * Function that will be called when the `value` state changes.
      * @param value The new value.
-     * @example
-     * function MySelect({ value, onChange }) {
-     *   const select = useSelectStore({ value, setValue: onChange });
-     * }
      */
     setValue?: BivariantCallback<(value: SelectStoreState<T>["value"]) => void>;
     /**
@@ -55,7 +51,7 @@ export interface SelectStoreOptions<T extends Value = Value> extends Core.Select
      * - [Multi-selectable
      *   Combobox](https://ariakit.org/examples/combobox-multiple)
      */
-    combobox?: ComboboxStore;
+    combobox?: ComboboxStore | null;
 }
 export type SelectStoreProps<T extends Value = Value> = SelectStoreOptions<T> & Core.SelectStoreProps<T>;
 export type SelectStore<T extends Value = Value> = SelectStoreFunctions<T> & Store<Core.SelectStore<T>>;

package/esm/select/select-store.js

@@ -1,20 +1,20 @@
 import {
   useSelectStore,
   useSelectStoreProps
-} from "../__chunks/RA2AAYOC.js";
+} from "../__chunks/X6F6ND2A.js";
 import "../__chunks/QP4RN5UY.js";
-import "../__chunks/WGAKICTY.js";
-import "../__chunks/NWDF5QDV.js";
+import "../__chunks/EZ23JQKA.js";
+import "../__chunks/C6MBVGZ2.js";
 import "../__chunks/5C7J4IAS.js";
 import "../__chunks/74KKBFVP.js";
 import "../__chunks/547DFODS.js";
 import "../__chunks/5YYGDU4E.js";
 import "../__chunks/56KWVYDN.js";
 import "../__chunks/CFEUKV6C.js";
-import "../__chunks/XEZV3AK4.js";
-import "../__chunks/HCTAKPNS.js";
-import "../__chunks/E6GADH6Y.js";
-import "../__chunks/XXO3VVQU.js";
+import "../__chunks/DO6GQUCF.js";
+import "../__chunks/DJUMA466.js";
+import "../__chunks/BWOZSOC7.js";
+import "../__chunks/4LP74VAP.js";
 import "../__chunks/J7Q2EO23.js";
 import "../__chunks/CP3U4HPL.js";
 import "../__chunks/PNRLI7OV.js";

package/esm/select/select.d.ts

@@ -19,44 +19,66 @@ export declare const useSelect: import("../utils/types.js").Hook<SelectOptions<"
  * Renders a select button.
  * @see https://ariakit.org/components/select
  * @example
- * ```jsx
- * const select = useSelectStore();
- * <Select store={select} />
- * <SelectPopover store={select}>
- *   <SelectItem value="Apple" />
- *   <SelectItem value="Orange" />
- * </SelectPopover>
+ * ```jsx {2}
+ * <SelectProvider>
+ *   <Select />
+ *   <SelectPopover>
+ *     <SelectItem value="Apple" />
+ *     <SelectItem value="Orange" />
+ *   </SelectPopover>
+ * </SelectProvider>
  * ```
  */
 export declare const Select: import("../utils/types.js").Component<SelectOptions<"button">>;
 export interface SelectOptions<T extends As = "button"> extends PopoverDisclosureOptions<T>, CompositeTypeaheadOptions<T>, Pick<SelectHTMLAttributes<HTMLSelectElement>, "name" | "form" | "required"> {
     /**
-     * Object returned by the `useSelectStore` hook.
+     * Object returned by the
+     * [`useSelectStore`](https://ariakit.org/reference/use-select-store) hook. If
+     * not provided, the closest
+     * [`SelectProvider`](https://ariakit.org/reference/select-provider)
+     * component's context will be used.
      */
     store?: SelectStore;
     /**
-     * Determines whether the select list will be shown when the user presses
-     * arrow keys while the select element is focused.
+     * Determines whether the
+     * [`SelectList`](https://ariakit.org/reference/select-list) or
+     * [`SelectPopover`](https://ariakit.org/reference/select-popover) components
+     * will be shown when the user presses arrow keys while the select element is
+     * focused.
+     *
+     * Live examples:
+     * - [Select grid](https://ariakit.org/examples/select-grid)
      * @default true
      */
     showOnKeyDown?: BooleanOrCallback<KeyboardEvent<HTMLElement>>;
     /**
-     * Determines whether pressing arrow keys will move the active item even
-     * when the select list is hidden.
+     * Determines whether pressing arrow keys will move the active item even when
+     * the [`SelectList`](https://ariakit.org/reference/select-list) or
+     * [`SelectPopover`](https://ariakit.org/reference/select-popover) components
+     * is hidden.
      * @default false
      */
     moveOnKeyDown?: BooleanOrCallback<KeyboardEvent<HTMLElement>>;
     /**
-     * Determines whether `store.toggle()` will be called on click. By default,
-     * the select list will be shown on press (on mouse down and on key down).
-     * If this prop is set to `true`, the select list will be shown on click
-     * instead.
+     * Determines whether
+     * [`toggle`](https://ariakit.org/reference/use-select-store#toggle) will be
+     * called on click. By default, the
+     * [`SelectList`](https://ariakit.org/reference/select-list) or
+     * [`SelectPopover`](https://ariakit.org/reference/select-popover) components
+     * will be shown on press (on mouse down and on key down). If this prop is set
+     * to `true`, the [`SelectList`](https://ariakit.org/reference/select-list) or
+     * [`SelectPopover`](https://ariakit.org/reference/select-popover) components
+     * will be shown on click instead.
      * @default false
      */
     toggleOnClick?: BooleanOrCallback<MouseEvent<HTMLElement>>;
     /**
      * Determines whether pressing space, enter or mouse down will toggle the
-     * select list. This will be ignored if `toggleOnClick` is set to `true`.
+     * [`SelectList`](https://ariakit.org/reference/select-list) or
+     * [`SelectPopover`](https://ariakit.org/reference/select-popover) components.
+     * This prop will be ignored if
+     * [`toggleOnClick`](https://ariakit.org/reference/select#toggleonclick) is
+     * set to `true`.
      * @default true
      */
     toggleOnPress?: BooleanOrCallback<MouseEvent<HTMLElement> | KeyboardEvent<HTMLElement>>;