@ariakit/core 0.1.3 → 0.1.5

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

@@ -25,6 +25,10 @@ export interface CompositeStoreState<T extends Item = Item> extends CollectionSt
      * tabindex](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_roving_tabindex).
      * DOM focus will remain on the composite element while its items receive
      * virtual focus.
+     *
+     * Live examples:
+     * - [Multi-selectable
+     *   Combobox](https://ariakit.org/examples/combobox-multiple)
      * @default false
      */
     virtualFocus: boolean;
@@ -32,9 +36,9 @@ export interface CompositeStoreState<T extends Item = Item> extends CollectionSt
      * Defines the orientation of the composite widget. If the composite has a
      * single row or column (one-dimensional), the `orientation` value determines
      * which arrow keys can be used to move focus:
-     *   - `both`: all arrow keys work.
-     *   - `horizontal`: only left and right arrow keys work.
-     *   - `vertical`: only up and down arrow keys work.
+     * - `both`: all arrow keys work.
+     * - `horizontal`: only left and right arrow keys work.
+     * - `vertical`: only up and down arrow keys work.
      *
      * It doesn't have any effect on two-dimensional composites.
      * @default "both"
@@ -52,27 +56,27 @@ export interface CompositeStoreState<T extends Item = Item> extends CollectionSt
      * composite widget.
      *
      * On one-dimensional composites:
-     *   - `true` loops from the last item to the first item and vice-versa.
-     *   - `horizontal` loops only if `orientation` is `horizontal` or not set.
-     *   - `vertical` loops only if `orientation` is `vertical` or not set.
-     *   - If `includesBaseElement` is set to `true` (or `activeId` is initially
-     *     set to `null`), the composite element will be focused in between the
-     *     last and first items.
+     * - `true` loops from the last item to the first item and vice-versa.
+     * - `horizontal` loops only if `orientation` is `horizontal` or not set.
+     * - `vertical` loops only if `orientation` is `vertical` or not set.
+     * - If `includesBaseElement` is set to `true` (or `activeId` is initially set
+     *   to `null`), the composite element will be focused in between the last and
+     *   first items.
      *
      * On two-dimensional composites (when using `CompositeRow`):
-     *   - `true` loops from the last row/column item to the first item in the
-     *     same row/column and vice-versa. If it's the last item in the last row,
-     *     it moves to the first item in the first row and vice-versa.
-     *   - `horizontal` loops only from the last row item to the first item in the
-     *     same row.
-     *   - `vertical` loops only from the last column item to the first item in
-     *     the column row.
-     *   - If `includesBaseElement` is set to `true` (or `activeId` is initially
-     *     set to `null`), vertical loop will have no effect as moving down from
-     *     the last row or up from the first row will focus the composite element.
-     *   - If `focusWrap` matches the value of `focusLoop`, it'll wrap between the
-     *     last item in the last row or column and the first item in the first row
-     *     or column and vice-versa.
+     * - `true` loops from the last row/column item to the first item in the same
+     *   row/column and vice-versa. If it's the last item in the last row, it
+     *   moves to the first item in the first row and vice-versa.
+     * - `horizontal` loops only from the last row item to the first item in the
+     *   same row.
+     * - `vertical` loops only from the last column item to the first item in the
+     *   column row.
+     * - If `includesBaseElement` is set to `true` (or `activeId` is initially set
+     *   to `null`), vertical loop will have no effect as moving down from the
+     *   last row or up from the first row will focus the composite element.
+     * - If `focusWrap` matches the value of `focusLoop`, it'll wrap between the
+     *   last item in the last row or column and the first item in the first row
+     *   or column and vice-versa.
      * @default false
      */
     focusLoop: boolean | Orientation;
@@ -80,12 +84,12 @@ export interface CompositeStoreState<T extends Item = Item> extends CollectionSt
      * **Works only on two-dimensional composites**. If enabled, moving to the
      * next item from the last one in a row or column will focus the first item in
      * the next row or column and vice-versa.
-     *   - `true` wraps between rows and columns.
-     *   - `horizontal` wraps only between rows.
-     *   - `vertical` wraps only between columns.
-     *   - If `focusLoop` matches the value of `focusWrap`, it'll wrap between the
-     *     last item in the last row or column and the first item in the first row
-     *     or column and vice-versa.
+     * - `true` wraps between rows and columns.
+     * - `horizontal` wraps only between rows.
+     * - `vertical` wraps only between columns.
+     * - If `focusLoop` matches the value of `focusWrap`, it'll wrap between the
+     *   last item in the last row or column and the first item in the first row
+     *   or column and vice-versa.
      * @default false
      */
     focusWrap: boolean | Orientation;
@@ -108,12 +112,12 @@ export interface CompositeStoreState<T extends Item = Item> extends CollectionSt
     includesBaseElement: boolean;
     /**
      * The current focused item `id`.
-     *   - `null` focuses the base composite element and users will be able to
-     *     navigate out of it using arrow keys.
-     *   - If `activeId` is initially set to `null`, the `includesBaseElement`
-     *     prop will also default to `true`, which means the base composite
-     *     element itself will have focus and users will be able to navigate to it
-     *     using arrow keys.
+     * - `null` focuses the base composite element and users will be able to
+     *   navigate out of it using arrow keys.
+     * - If `activeId` is initially set to `null`, the `includesBaseElement` prop
+     *   will also default to `true`, which means the base composite element
+     *   itself will have focus and users will be able to navigate to it using
+     *   arrow keys.
      */
     activeId: string | null | undefined;
 }

package/esm/composite/composite-store.js

@@ -1,11 +1,12 @@
 import {
   createCompositeStore
-} from "../__chunks/X7MJ3FB5.js";
-import "../__chunks/WFGVC6LE.js";
-import "../__chunks/NA5BK7DD.js";
-import "../__chunks/RMD7SNCC.js";
-import "../__chunks/UVCATTRC.js";
+} from "../__chunks/R6VHFWTV.js";
+import "../__chunks/EWHSN7GO.js";
+import "../__chunks/BOKMNDR7.js";
+import "../__chunks/NWU4GBZ6.js";
+import "../__chunks/N6JW4ITM.js";
 import "../__chunks/5XEKIOCW.js";
+import "../__chunks/4BKCJXBM.js";
 export {
   createCompositeStore
 };

package/esm/dialog/dialog-store.js

@@ -1,9 +1,10 @@
 import {
   createDialogStore
-} from "../__chunks/4T5RHRE5.js";
-import "../__chunks/IOAGNCXX.js";
-import "../__chunks/NA5BK7DD.js";
-import "../__chunks/RMD7SNCC.js";
+} from "../__chunks/MNNKHNLW.js";
+import "../__chunks/ZV2GEGPL.js";
+import "../__chunks/BOKMNDR7.js";
+import "../__chunks/NWU4GBZ6.js";
+import "../__chunks/4BKCJXBM.js";
 export {
   createDialogStore
 };

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

@@ -7,6 +7,10 @@ export declare function createDisclosureStore(props?: DisclosureStoreProps): Dis
 export interface DisclosureStoreState {
     /**
      * The visibility state of the content.
+     *
+     * Live examples:
+     * - [Dialog with React
+     *   Router](https://ariakit.org/examples/dialog-react-router)
      * @default false
      */
     open: boolean;
@@ -15,16 +19,26 @@ export interface DisclosureStoreState {
      * this will be the same as `open`. Otherwise, it will wait for the animation
      * to complete before becoming `false` so the content is not unmounted while
      * animating.
+     *
+     * Live examples:
+     * - [Combobox with links](https://ariakit.org/examples/combobox-links)
+     * - [Textarea with inline
+     *   Combobox](https://ariakit.org/examples/combobox-textarea)
      */
     mounted: boolean;
     /**
      * Determines whether the content should animate when it is shown or hidden.
-     *   - If `true`, the `animating` state will be `true` when the content is
-     *     shown or hidden and it will wait for `stopAnimation` to be called or a
-     *     CSS animation/transition to end before becoming `false`.
-     *   - If it's set to a number, the `animating` state will be `true` when the
-     *     content is shown or hidden and it will wait for the number of
-     *     milliseconds to pass before becoming `false`.
+     * - If `true`, the `animating` state will be `true` when the content is shown
+     *   or hidden and it will wait for `stopAnimation` to be called or a CSS
+     *   animation/transition to end before becoming `false`.
+     * - If it's set to a number, the `animating` state will be `true` when the
+     *   content is shown or hidden and it will wait for the number of
+     *   milliseconds to pass before becoming `false`.
+     *
+     * Live examples:
+     * - [Animated Combobox](https://ariakit.org/examples/combobox-animated)
+     * - [Animated Dialog](https://ariakit.org/examples/dialog-animated)
+     * - [Animated Select](https://ariakit.org/examples/select-animated)
      * @default false
      */
     animated: boolean | number;
@@ -44,6 +58,12 @@ export interface DisclosureStoreState {
 export interface DisclosureStoreFunctions {
     /**
      * Sets the `open` state.
+     *
+     * Live examples:
+     * - [Textarea with inline
+     *   Combobox](https://ariakit.org/examples/combobox-textarea)
+     * - [Dialog with React
+     *   Router](https://ariakit.org/examples/dialog-react-router)
      * @example
      * store.setOpen(true);
      * store.setOpen((open) => !open);
@@ -51,10 +71,20 @@ export interface DisclosureStoreFunctions {
     setOpen: SetState<DisclosureStoreState["open"]>;
     /**
      * Sets the `open` state to `true`.
+     *
+     * Live examples:
+     * - [Textarea with inline
+     *   Combobox](https://ariakit.org/examples/combobox-textarea)
      */
     show: () => void;
     /**
      * Sets the `open` state to `false`.
+     *
+     * Live examples:
+     * - [Textarea with inline
+     *   Combobox](https://ariakit.org/examples/combobox-textarea)
+     * - [Dialog with React
+     *   Router](https://ariakit.org/examples/dialog-react-router)
      */
     hide: () => void;
     /**

package/esm/disclosure/disclosure-store.js

@@ -1,8 +1,9 @@
 import {
   createDisclosureStore
-} from "../__chunks/IOAGNCXX.js";
-import "../__chunks/NA5BK7DD.js";
-import "../__chunks/RMD7SNCC.js";
+} from "../__chunks/ZV2GEGPL.js";
+import "../__chunks/BOKMNDR7.js";
+import "../__chunks/NWU4GBZ6.js";
+import "../__chunks/4BKCJXBM.js";
 export {
   createDisclosureStore
 };

package/esm/form/form-store.js

@@ -1,16 +1,20 @@
 import {
   createCollectionStore
-} from "../__chunks/WFGVC6LE.js";
+} from "../__chunks/EWHSN7GO.js";
 import {
   createStore
-} from "../__chunks/NA5BK7DD.js";
+} from "../__chunks/BOKMNDR7.js";
 import {
   applyState,
   defaultValue,
   isInteger,
   isObject
-} from "../__chunks/RMD7SNCC.js";
-import "../__chunks/UVCATTRC.js";
+} from "../__chunks/NWU4GBZ6.js";
+import "../__chunks/N6JW4ITM.js";
+import {
+  __spreadProps,
+  __spreadValues
+} from "../__chunks/4BKCJXBM.js";
 
 // src/form/form-store.ts
 function nextFrame() {
@@ -25,12 +29,13 @@ function hasMessages(object) {
   });
 }
 function get(values, path, defaultValue2) {
+  var _a;
   const [key, ...rest] = Array.isArray(path) ? path : `${path}`.split(".");
   if (key == null || !values) {
     return defaultValue2;
   }
   if (!rest.length) {
-    return values[key] ?? defaultValue2;
+    return (_a = values[key]) != null ? _a : defaultValue2;
   }
   return get(values[key], rest, defaultValue2);
 }
@@ -56,7 +61,7 @@ function set(values, path, value) {
     nextValues2[index] = result;
     return nextValues2;
   }
-  return { ...values, [key]: result };
+  return __spreadProps(__spreadValues({}, values), { [key]: result });
 }
 function setAll(values, value) {
   const result = {};
@@ -101,37 +106,37 @@ function createNames() {
   return new Proxy(/* @__PURE__ */ Object.create(null), getNameHandler(cache));
 }
 function createFormStore(props = {}) {
-  const syncState = props.store?.getState();
+  var _a;
+  const syncState = (_a = props.store) == null ? void 0 : _a.getState();
   const collection = createCollectionStore(props);
   const values = defaultValue(
     props.values,
-    syncState?.values,
+    syncState == null ? void 0 : syncState.values,
     props.defaultValues,
     {}
   );
   const errors = defaultValue(
     props.errors,
-    syncState?.errors,
+    syncState == null ? void 0 : syncState.errors,
     props.defaultErrors,
     {}
   );
   const touched = defaultValue(
     props.touched,
-    syncState?.touched,
+    syncState == null ? void 0 : syncState.touched,
     props.defaultTouched,
     {}
   );
-  const initialState = {
-    ...collection.getState(),
+  const initialState = __spreadProps(__spreadValues({}, collection.getState()), {
     values,
     errors,
     touched,
-    validating: defaultValue(syncState?.validating, false),
-    submitting: defaultValue(syncState?.submitting, false),
-    submitSucceed: defaultValue(syncState?.submitSucceed, 0),
-    submitFailed: defaultValue(syncState?.submitFailed, 0),
+    validating: defaultValue(syncState == null ? void 0 : syncState.validating, false),
+    submitting: defaultValue(syncState == null ? void 0 : syncState.submitting, false),
+    submitSucceed: defaultValue(syncState == null ? void 0 : syncState.submitSucceed, 0),
+    submitFailed: defaultValue(syncState == null ? void 0 : syncState.submitFailed, 0),
     valid: !hasMessages(errors)
-  };
+  });
   const form = createStore(initialState, collection, props.store);
   const validateCallbacks = /* @__PURE__ */ new Set();
   const submitCallbacks = /* @__PURE__ */ new Set();
@@ -148,9 +153,7 @@ function createFormStore(props = {}) {
       form.setState("validating", false);
     }
   };
-  return {
-    ...collection,
-    ...form,
+  return __spreadProps(__spreadValues(__spreadValues({}, collection), form), {
     names: createNames(),
     setValues: (values2) => form.setState("values", values2),
     getValue: (name) => get(form.getState().values, name),
@@ -232,7 +235,7 @@ function createFormStore(props = {}) {
       form.setState("submitSucceed", 0);
       form.setState("submitFailed", 0);
     }
-  };
+  });
 }
 export {
   createFormStore,

package/esm/hovercard/hovercard-store.js

@@ -1,11 +1,12 @@
 import {
   createHovercardStore
-} from "../__chunks/6HMPWUDT.js";
-import "../__chunks/6PEWNRTN.js";
-import "../__chunks/4T5RHRE5.js";
-import "../__chunks/IOAGNCXX.js";
-import "../__chunks/NA5BK7DD.js";
-import "../__chunks/RMD7SNCC.js";
+} from "../__chunks/AHZW5LR4.js";
+import "../__chunks/CUW3E24J.js";
+import "../__chunks/MNNKHNLW.js";
+import "../__chunks/ZV2GEGPL.js";
+import "../__chunks/BOKMNDR7.js";
+import "../__chunks/NWU4GBZ6.js";
+import "../__chunks/4BKCJXBM.js";
 export {
   createHovercardStore
 };

package/esm/index.js

@@ -1,3 +1,5 @@
+import "./__chunks/4BKCJXBM.js";
+
 // src/index.ts
 var src_default = {};
 export {

package/esm/menu/menu-bar-store.js

@@ -1,26 +1,30 @@
 import {
   createCompositeStore
-} from "../__chunks/X7MJ3FB5.js";
-import "../__chunks/WFGVC6LE.js";
-import "../__chunks/NA5BK7DD.js";
+} from "../__chunks/R6VHFWTV.js";
+import "../__chunks/EWHSN7GO.js";
+import "../__chunks/BOKMNDR7.js";
 import {
   defaultValue
-} from "../__chunks/RMD7SNCC.js";
-import "../__chunks/UVCATTRC.js";
+} from "../__chunks/NWU4GBZ6.js";
+import "../__chunks/N6JW4ITM.js";
 import "../__chunks/5XEKIOCW.js";
+import {
+  __spreadProps,
+  __spreadValues
+} from "../__chunks/4BKCJXBM.js";
 
 // src/menu/menu-bar-store.ts
 function createMenuBarStore(props = {}) {
-  const syncState = props.store?.getState();
-  return createCompositeStore({
-    ...props,
+  var _a;
+  const syncState = (_a = props.store) == null ? void 0 : _a.getState();
+  return createCompositeStore(__spreadProps(__spreadValues({}, props), {
     orientation: defaultValue(
       props.orientation,
-      syncState?.orientation,
+      syncState == null ? void 0 : syncState.orientation,
       "horizontal"
     ),
-    focusLoop: defaultValue(props.focusLoop, syncState?.focusLoop, true)
-  });
+    focusLoop: defaultValue(props.focusLoop, syncState == null ? void 0 : syncState.focusLoop, true)
+  }));
 }
 export {
   createMenuBarStore

package/esm/menu/menu-store.js

@@ -1,33 +1,39 @@
 import {
   createHovercardStore
-} from "../__chunks/6HMPWUDT.js";
-import "../__chunks/6PEWNRTN.js";
-import "../__chunks/4T5RHRE5.js";
-import "../__chunks/IOAGNCXX.js";
+} from "../__chunks/AHZW5LR4.js";
+import "../__chunks/CUW3E24J.js";
+import "../__chunks/MNNKHNLW.js";
+import "../__chunks/ZV2GEGPL.js";
 import {
   createCompositeStore
-} from "../__chunks/X7MJ3FB5.js";
-import "../__chunks/WFGVC6LE.js";
+} from "../__chunks/R6VHFWTV.js";
+import "../__chunks/EWHSN7GO.js";
 import {
   createStore,
   mergeStore
-} from "../__chunks/NA5BK7DD.js";
+} from "../__chunks/BOKMNDR7.js";
 import {
   applyState,
   defaultValue
-} from "../__chunks/RMD7SNCC.js";
-import "../__chunks/UVCATTRC.js";
+} from "../__chunks/NWU4GBZ6.js";
+import "../__chunks/N6JW4ITM.js";
 import "../__chunks/5XEKIOCW.js";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../__chunks/4BKCJXBM.js";
 
 // src/menu/menu-store.ts
-function createMenuStore({
-  combobox,
-  ...props
-} = {}) {
+function createMenuStore(_a = {}) {
+  var _b = _a, {
+    combobox
+  } = _b, props = __objRest(_b, [
+    "combobox"
+  ]);
   const store = mergeStore(
     props.store,
-    combobox?.omit(
-      "baseElement",
+    combobox == null ? void 0 : combobox.omit(
       "arrowElement",
       "anchorElement",
       "contentElement",
@@ -36,17 +42,15 @@ function createMenuStore({
     )
   );
   const syncState = store.getState();
-  const composite = createCompositeStore({
-    ...props,
+  const composite = createCompositeStore(__spreadProps(__spreadValues({}, props), {
     store,
     orientation: defaultValue(
       props.orientation,
       syncState.orientation,
       "vertical"
     )
-  });
-  const hovercard = createHovercardStore({
-    ...props,
+  }));
+  const hovercard = createHovercardStore(__spreadProps(__spreadValues({}, props), {
     store,
     placement: defaultValue(
       props.placement,
@@ -54,10 +58,8 @@ function createMenuStore({
       "bottom-start"
     ),
     hideTimeout: defaultValue(props.hideTimeout, syncState.hideTimeout, 0)
-  });
-  const initialState = {
-    ...composite.getState(),
-    ...hovercard.getState(),
+  }));
+  const initialState = __spreadProps(__spreadValues(__spreadValues({}, composite.getState()), hovercard.getState()), {
     initialFocus: defaultValue(syncState.initialFocus, "container"),
     values: defaultValue(
       props.values,
@@ -65,7 +67,7 @@ function createMenuStore({
       props.defaultValues,
       {}
     )
-  };
+  });
   const menu = createStore(initialState, composite, hovercard, store);
   menu.setup(
     () => menu.sync(
@@ -77,10 +79,7 @@ function createMenuStore({
       ["mounted"]
     )
   );
-  return {
-    ...composite,
-    ...hovercard,
-    ...menu,
+  return __spreadProps(__spreadValues(__spreadValues(__spreadValues({}, composite), hovercard), menu), {
     setInitialFocus: (value) => menu.setState("initialFocus", value),
     setValues: (values) => menu.setState("values", values),
     setValue: (name, value) => {
@@ -95,13 +94,12 @@ function createMenuStore({
         const nextValue = applyState(value, prevValue);
         if (nextValue === prevValue)
           return values;
-        return {
-          ...values,
+        return __spreadProps(__spreadValues({}, values), {
           [name]: nextValue !== void 0 && nextValue
-        };
+        });
       });
     }
-  };
+  });
 }
 export {
   createMenuStore

package/esm/popover/popover-store.js

@@ -1,10 +1,11 @@
 import {
   createPopoverStore
-} from "../__chunks/6PEWNRTN.js";
-import "../__chunks/4T5RHRE5.js";
-import "../__chunks/IOAGNCXX.js";
-import "../__chunks/NA5BK7DD.js";
-import "../__chunks/RMD7SNCC.js";
+} from "../__chunks/CUW3E24J.js";
+import "../__chunks/MNNKHNLW.js";
+import "../__chunks/ZV2GEGPL.js";
+import "../__chunks/BOKMNDR7.js";
+import "../__chunks/NWU4GBZ6.js";
+import "../__chunks/4BKCJXBM.js";
 export {
   createPopoverStore
 };

package/esm/radio/radio-store.js

@@ -1,40 +1,41 @@
 import {
   createCompositeStore
-} from "../__chunks/X7MJ3FB5.js";
-import "../__chunks/WFGVC6LE.js";
+} from "../__chunks/R6VHFWTV.js";
+import "../__chunks/EWHSN7GO.js";
 import {
   createStore
-} from "../__chunks/NA5BK7DD.js";
+} from "../__chunks/BOKMNDR7.js";
 import {
   defaultValue
-} from "../__chunks/RMD7SNCC.js";
-import "../__chunks/UVCATTRC.js";
+} from "../__chunks/NWU4GBZ6.js";
+import "../__chunks/N6JW4ITM.js";
 import "../__chunks/5XEKIOCW.js";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "../__chunks/4BKCJXBM.js";
 
 // src/radio/radio-store.ts
-function createRadioStore({
-  ...props
-} = {}) {
-  const syncState = props.store?.getState();
-  const composite = createCompositeStore({
-    ...props,
-    focusLoop: defaultValue(props.focusLoop, syncState?.focusLoop, true)
-  });
-  const initialState = {
-    ...composite.getState(),
+function createRadioStore(_a = {}) {
+  var props = __objRest(_a, []);
+  var _a2;
+  const syncState = (_a2 = props.store) == null ? void 0 : _a2.getState();
+  const composite = createCompositeStore(__spreadProps(__spreadValues({}, props), {
+    focusLoop: defaultValue(props.focusLoop, syncState == null ? void 0 : syncState.focusLoop, true)
+  }));
+  const initialState = __spreadProps(__spreadValues({}, composite.getState()), {
     value: defaultValue(
       props.value,
-      syncState?.value,
+      syncState == null ? void 0 : syncState.value,
       props.defaultValue,
       null
     )
-  };
+  });
   const radio = createStore(initialState, composite, props.store);
-  return {
-    ...composite,
-    ...radio,
+  return __spreadProps(__spreadValues(__spreadValues({}, composite), radio), {
     setValue: (value) => radio.setState("value", value)
-  };
+  });
 }
 export {
   createRadioStore

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

@@ -35,6 +35,10 @@ export interface SelectStoreState<T extends Value = Value> extends CompositeStor
     placement: PopoverStoreState["placement"];
     /**
      * The select value.
+     *
+     * Live examples:
+     * - [Multi-selectable
+     *   Combobox](https://ariakit.org/examples/combobox-multiple)
      */
     value: MutableValue<T>;
     /**
@@ -55,6 +59,10 @@ export interface SelectStoreState<T extends Value = Value> extends CompositeStor
 export interface SelectStoreFunctions<T extends Value = Value> extends CompositeStoreFunctions<Item>, PopoverStoreFunctions {
     /**
      * Sets the `value` state.
+     *
+     * Live examples:
+     * - [Multi-selectable
+     *   Combobox](https://ariakit.org/examples/combobox-multiple)
      * @example
      * store.setValue("Apple");
      * store.setValue(["Apple", "Banana"]);
@@ -75,10 +83,18 @@ export interface SelectStoreOptions<T extends Value = Value> extends StoreOption
      * A reference to a combobox store. This is used when combining the combobox
      * with a select (e.g., select with a search input). The stores will share the
      * same state.
+     *
+     * Live examples:
+     * - [Multi-selectable
+     *   Combobox](https://ariakit.org/examples/combobox-multiple)
      */
     combobox?: ComboboxStore;
     /**
      * The default value. If not set, the first non-disabled item will be used.
+     *
+     * Live examples:
+     * - [Multi-selectable
+     *   Combobox](https://ariakit.org/examples/combobox-multiple)
      */
     defaultValue?: SelectStoreState<T>["value"];
 }