@ariakit/react-core 0.3.11 → 0.3.13

package/cjs/composite/composite-item.d.ts

@@ -16,16 +16,27 @@ import type { CompositeStore } from "./composite-store.js";
  */
 export declare const useCompositeItem: import("../utils/types.js").Hook<CompositeItemOptions<"button">>;
 /**
- * Renders a composite item.
+ * Renders a focusable item as part of a composite widget. The `tabindex`
+ * attribute is automatically managed by this component based on the
+ * [`virtualFocus`](https://ariakit.org/reference/composite-provider#virtualfocus)
+ * option.
+ *
+ * When this component receives DOM focus or is virtually focused (when the
+ * [`virtualFocus`](https://ariakit.org/reference/composite-provider#virtualfocus)
+ * option is set to `true`), the element will automatically receive the
+ * [`data-active-item`](https://ariakit.org/guide/styling#data-active-item)
+ * attribute. This can be used to style the focused item, no matter the focus
+ * approach employed.
  * @see https://ariakit.org/components/composite
  * @example
- * ```jsx
- * const composite = useCompositeStore();
- * <Composite store={composite}>
- *   <CompositeItem>Item 1</CompositeItem>
- *   <CompositeItem>Item 2</CompositeItem>
- *   <CompositeItem>Item 3</CompositeItem>
- * </Composite>
+ * ```jsx {3-5}
+ * <CompositeProvider>
+ *   <Composite>
+ *     <CompositeItem>Item 1</CompositeItem>
+ *     <CompositeItem>Item 2</CompositeItem>
+ *     <CompositeItem>Item 3</CompositeItem>
+ *   </Composite>
+ * </CompositeProvider>
  * ```
  */
 export declare const CompositeItem: import("../utils/types.js").Component<CompositeItemOptions<"button">>;
@@ -39,6 +50,14 @@ export interface CompositeItemOptions<T extends As = "button"> extends CommandOp
      * components' context will be used.
      */
     store?: CompositeStore;
+    /**
+     * Determines if the item should be registered as part of the collection. If
+     * this is set to `false`, the item won't be accessible via arrow keys.
+     *
+     * Live examples:
+     * - [Combobox with tabs](https://ariakit.org/examples/combobox-tabs)
+     */
+    shouldRegisterItem?: CollectionItemOptions<T>["shouldRegisterItem"];
     /**
      * The id that will be used to group items in the same row. This is usually
      * retrieved by the
@@ -49,12 +68,33 @@ export interface CompositeItemOptions<T extends As = "button"> extends CommandOp
     /**
      * Whether the scroll behavior should be prevented when pressing arrow keys on
      * the first or the last items.
+     * @deprecated Use CSS
+     * [`scroll-margin`](https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-margin)
+     * instead.
      * @default false
      */
     preventScrollOnKeyDown?: BooleanOrCallback<KeyboardEvent<HTMLElement>>;
     /**
-     * Whether pressing arrow keys should move the focus to a different item.
+     * Determines if pressing arrow keys while this item is in focus should move
+     * focus to a different item.
+     *
+     * **Note**: To entirely disable focus moving within a composite widget, you
+     * can use the
+     * [`focusOnMove`](https://ariakit.org/reference/composite#focusonmove) prop
+     * on the composite component instead. If you want to control the behavior
+     * _only when arrow keys are pressed_, where
+     * [`focusOnMove`](https://ariakit.org/reference/composite#focusonmove) may
+     * not be applicable, this prop must be set on all composite items because
+     * they each manage their own key presses, as well as on the composite
+     * component itself.
      * @default true
+     * @example
+     * ```jsx
+     * <Composite moveOnKeyPress={false}>
+     *   <CompositeItem moveOnKeyPress={false} />
+     *   <CompositeItem moveOnKeyPress={false} />
+     * </Composite>
+     * ```
      */
     moveOnKeyPress?: BooleanOrCallback<KeyboardEvent<HTMLElement>>;
     /**

package/cjs/composite/composite-overflow-disclosure.cjs

@@ -1,30 +1,30 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
 
 
-var _LICANQTIcjs = require('../__chunks/LICANQTI.cjs');
-require('../__chunks/QCG6J6X5.cjs');
-require('../__chunks/LFHNPG2L.cjs');
+var _25ZFPUHHcjs = require('../__chunks/25ZFPUHH.cjs');
+require('../__chunks/NLVGDNPE.cjs');
+require('../__chunks/2FTVUUOK.cjs');
 require('../__chunks/3QW6ELTG.cjs');
-require('../__chunks/5UTRYT6E.cjs');
+require('../__chunks/REJALU3P.cjs');
 
 
-var _3RUODFRUcjs = require('../__chunks/3RUODFRU.cjs');
-require('../__chunks/DAJUUBUI.cjs');
+var _GSETTLOUcjs = require('../__chunks/GSETTLOU.cjs');
+require('../__chunks/OSTQZD2E.cjs');
 require('../__chunks/R5A2WTWB.cjs');
-require('../__chunks/RV3PHHWM.cjs');
+require('../__chunks/6ZZYUFPW.cjs');
 require('../__chunks/UZNYSPKP.cjs');
 require('../__chunks/BZTDJIVT.cjs');
 require('../__chunks/UVBBMANL.cjs');
 require('../__chunks/F2A2ZQDB.cjs');
 require('../__chunks/S6UU7NA4.cjs');
-require('../__chunks/Z3GCTNW4.cjs');
+require('../__chunks/VUEWHLYH.cjs');
 require('../__chunks/75KXQZJX.cjs');
 
 
 
 
 var _RNZNGEL4cjs = require('../__chunks/RNZNGEL4.cjs');
-require('../__chunks/B233QVZE.cjs');
+require('../__chunks/OLOZ5JT2.cjs');
 
 
 
@@ -69,8 +69,8 @@ var useCompositeOverflowDisclosure = _RNZNGEL4cjs.createHook.call(void 0, (_a) =
     onFocus,
     onBlur
   });
-  props = _3RUODFRUcjs.useCompositeItem.call(void 0, _AV6KTKLEcjs.__spreadProps.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, {}, props), { shouldRegisterItem }));
-  props = _LICANQTIcjs.usePopoverDisclosure.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, { store }, props));
+  props = _GSETTLOUcjs.useCompositeItem.call(void 0, _AV6KTKLEcjs.__spreadProps.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, {}, props), { shouldRegisterItem }));
+  props = _25ZFPUHHcjs.usePopoverDisclosure.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, { store }, props));
   return props;
 });
 var CompositeOverflowDisclosure = _RNZNGEL4cjs.createComponent.call(void 0, (props) => {

package/cjs/composite/composite-overflow-store.cjs

@@ -1,12 +1,12 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { newObj[key] = obj[key]; } } } newObj.default = obj; return newObj; } }"use client";
 
 
-var _7BPAESN3cjs = require('../__chunks/7BPAESN3.cjs');
-require('../__chunks/HRKRTCJC.cjs');
-require('../__chunks/EGAIDKB5.cjs');
+var _NRGWVSB5cjs = require('../__chunks/NRGWVSB5.cjs');
+require('../__chunks/W5LJEMLB.cjs');
+require('../__chunks/JAQJG42R.cjs');
 
 
-var _B233QVZEcjs = require('../__chunks/B233QVZE.cjs');
+var _OLOZ5JT2cjs = require('../__chunks/OLOZ5JT2.cjs');
 require('../__chunks/EO6LS72H.cjs');
 require('../__chunks/CJDHQUBR.cjs');
 require('../__chunks/AV6KTKLE.cjs');
@@ -14,10 +14,10 @@ require('../__chunks/AV6KTKLE.cjs');
 // src/composite/composite-overflow-store.ts
 var _compositeoverflowstore = require('@ariakit/core/composite/composite-overflow-store'); var Core = _interopRequireWildcard(_compositeoverflowstore);
 function useCompositeOverflowStoreProps(store, update, props) {
-  return _7BPAESN3cjs.usePopoverStoreProps.call(void 0, store, update, props);
+  return _NRGWVSB5cjs.usePopoverStoreProps.call(void 0, store, update, props);
 }
 function useCompositeOverflowStore(props = {}) {
-  const [store, update] = _B233QVZEcjs.useStore.call(void 0, Core.createCompositeOverflowStore, props);
+  const [store, update] = _OLOZ5JT2cjs.useStore.call(void 0, Core.createCompositeOverflowStore, props);
   return useCompositeOverflowStoreProps(store, update, props);
 }
 

package/cjs/composite/composite-overflow.cjs

@@ -1,10 +1,10 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
 
 
-var _NVHGMKAEcjs = require('../__chunks/NVHGMKAE.cjs');
-require('../__chunks/36QK2QLE.cjs');
-require('../__chunks/RTT4XR27.cjs');
-require('../__chunks/NKR65BKC.cjs');
+var _CIZTEPFOcjs = require('../__chunks/CIZTEPFO.cjs');
+require('../__chunks/FGHQW2WS.cjs');
+require('../__chunks/WZ3DRKGP.cjs');
+require('../__chunks/KSPMHEYZ.cjs');
 require('../__chunks/PZL34OVO.cjs');
 require('../__chunks/344F3DYO.cjs');
 require('../__chunks/KREY6HXD.cjs');
@@ -12,11 +12,11 @@ require('../__chunks/5ZOCN23X.cjs');
 require('../__chunks/JVDUGICD.cjs');
 require('../__chunks/VV6WA3I6.cjs');
 require('../__chunks/7YLCVXZ7.cjs');
+require('../__chunks/5GTNIPQ6.cjs');
 require('../__chunks/7TN63K2T.cjs');
+require('../__chunks/V24PR4PW.cjs');
 require('../__chunks/6IUEXB4L.cjs');
 require('../__chunks/JF225FQ5.cjs');
-require('../__chunks/5GTNIPQ6.cjs');
-require('../__chunks/V24PR4PW.cjs');
 require('../__chunks/7566TIRW.cjs');
 require('../__chunks/J3OG6T3B.cjs');
 require('../__chunks/65LGW5LY.cjs');
@@ -24,11 +24,11 @@ require('../__chunks/XB3G2EO2.cjs');
 require('../__chunks/CVD2AZE2.cjs');
 require('../__chunks/2BIO7R5N.cjs');
 require('../__chunks/LAUATD5O.cjs');
-require('../__chunks/TD5MOASJ.cjs');
+require('../__chunks/YPVQYY4J.cjs');
 require('../__chunks/UVBBMANL.cjs');
 require('../__chunks/F2A2ZQDB.cjs');
 require('../__chunks/S6UU7NA4.cjs');
-require('../__chunks/Z3GCTNW4.cjs');
+require('../__chunks/VUEWHLYH.cjs');
 require('../__chunks/75KXQZJX.cjs');
 require('../__chunks/R66IWXK6.cjs');
 
@@ -36,9 +36,9 @@ require('../__chunks/R66IWXK6.cjs');
 
 
 var _RNZNGEL4cjs = require('../__chunks/RNZNGEL4.cjs');
-require('../__chunks/HRKRTCJC.cjs');
-require('../__chunks/EGAIDKB5.cjs');
-require('../__chunks/B233QVZE.cjs');
+require('../__chunks/W5LJEMLB.cjs');
+require('../__chunks/JAQJG42R.cjs');
+require('../__chunks/OLOZ5JT2.cjs');
 
 
 var _EO6LS72Hcjs = require('../__chunks/EO6LS72H.cjs');
@@ -91,7 +91,7 @@ var useCompositeOverflow = _RNZNGEL4cjs.createHook.call(void 0,
     }, props), {
       onFocus
     });
-    props = _NVHGMKAEcjs.usePopover.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, {
+    props = _CIZTEPFOcjs.usePopover.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, {
       store,
       backdropProps,
       wrapperProps,

package/cjs/composite/composite-provider.cjs

@@ -1,14 +1,14 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
 
 
-var _N6CR2VNNcjs = require('../__chunks/N6CR2VNN.cjs');
-require('../__chunks/DKOWT2IJ.cjs');
+var _LUL2YWZ3cjs = require('../__chunks/LUL2YWZ3.cjs');
+require('../__chunks/CDNJPIEG.cjs');
 
 
 var _UZNYSPKPcjs = require('../__chunks/UZNYSPKP.cjs');
 require('../__chunks/BZTDJIVT.cjs');
 require('../__chunks/RNZNGEL4.cjs');
-require('../__chunks/B233QVZE.cjs');
+require('../__chunks/OLOZ5JT2.cjs');
 require('../__chunks/EO6LS72H.cjs');
 require('../__chunks/CJDHQUBR.cjs');
 require('../__chunks/AV6KTKLE.cjs');
@@ -16,7 +16,7 @@ require('../__chunks/AV6KTKLE.cjs');
 // src/composite/composite-provider.tsx
 var _jsxruntime = require('react/jsx-runtime');
 function CompositeProvider(props = {}) {
-  const store = _N6CR2VNNcjs.useCompositeStore.call(void 0, props);
+  const store = _LUL2YWZ3cjs.useCompositeStore.call(void 0, props);
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _UZNYSPKPcjs.CompositeContextProvider, { value: store, children: props.children });
 }
 

package/cjs/composite/composite-provider.d.cts

@@ -2,7 +2,8 @@ import type { ReactElement, ReactNode } from "react";
 import type { PickRequired } from "@ariakit/core/utils/types";
 import type { CompositeStoreItem, CompositeStoreProps } from "./composite-store.js";
 /**
- * Provides a composite store to CompositeItem components.
+ * Provides a composite store to
+ * [`CompositeItem`](https://ariakit.org/reference/composite-item) components.
  * @see https://ariakit.org/components/composite
  * @example
  * ```jsx

package/cjs/composite/composite-provider.d.ts

@@ -2,7 +2,8 @@ import type { ReactElement, ReactNode } from "react";
 import type { PickRequired } from "@ariakit/core/utils/types";
 import type { CompositeStoreItem, CompositeStoreProps } from "./composite-store.js";
 /**
- * Provides a composite store to CompositeItem components.
+ * Provides a composite store to
+ * [`CompositeItem`](https://ariakit.org/reference/composite-item) components.
  * @see https://ariakit.org/components/composite
  * @example
  * ```jsx

package/cjs/composite/composite-renderer.cjs

@@ -2,15 +2,15 @@
 
 
 
-var _NVRUQ5V7cjs = require('../__chunks/NVRUQ5V7.cjs');
+var _LY6FB2NEcjs = require('../__chunks/LY6FB2NE.cjs');
 
 
 
-var _T5G6DLC6cjs = require('../__chunks/T5G6DLC6.cjs');
+var _6LVRCU4Jcjs = require('../__chunks/6LVRCU4J.cjs');
 require('../__chunks/UZNYSPKP.cjs');
 require('../__chunks/BZTDJIVT.cjs');
 require('../__chunks/RNZNGEL4.cjs');
-require('../__chunks/B233QVZE.cjs');
+require('../__chunks/OLOZ5JT2.cjs');
 require('../__chunks/EO6LS72H.cjs');
 require('../__chunks/CJDHQUBR.cjs');
 require('../__chunks/AV6KTKLE.cjs');
@@ -19,4 +19,4 @@ require('../__chunks/AV6KTKLE.cjs');
 
 
 
-exports.CompositeRenderer = _NVRUQ5V7cjs.CompositeRenderer; exports.getCompositeRendererItem = _T5G6DLC6cjs.getCollectionRendererItem; exports.getCompositeRendererItemId = _T5G6DLC6cjs.getCollectionRendererItemId; exports.useCompositeRenderer = _NVRUQ5V7cjs.useCompositeRenderer;
+exports.CompositeRenderer = _LY6FB2NEcjs.CompositeRenderer; exports.getCompositeRendererItem = _6LVRCU4Jcjs.getCollectionRendererItem; exports.getCompositeRendererItemId = _6LVRCU4Jcjs.getCollectionRendererItemId; exports.useCompositeRenderer = _LY6FB2NEcjs.useCompositeRenderer;

package/cjs/composite/composite-renderer.d.cts

@@ -294,7 +294,7 @@ export interface CompositeRendererOptions<T extends Item = any> extends Omit<Col
     /**
      * Object returned by the
      * [`useCompositeStore`](https://ariakit.org/reference/use-composite-store)
-     * hook. If not provided, the parent
+     * hook. If not provided, the closest
      * [Composite](https://ariakit.org/components/composite) component's context
      * will be used.
      *

package/cjs/composite/composite-renderer.d.ts

@@ -294,7 +294,7 @@ export interface CompositeRendererOptions<T extends Item = any> extends Omit<Col
     /**
      * Object returned by the
      * [`useCompositeStore`](https://ariakit.org/reference/use-composite-store)
-     * hook. If not provided, the parent
+     * hook. If not provided, the closest
      * [Composite](https://ariakit.org/components/composite) component's context
      * will be used.
      *

package/cjs/composite/composite-row.d.cts

@@ -20,32 +20,39 @@ import type { CompositeStore } from "./composite-store.js";
  */
 export declare const useCompositeRow: import("../utils/types.js").Hook<CompositeRowOptions<"div">>;
 /**
- * Renders a composite row. Wrapping `CompositeItem` elements within
- * `CompositeRow` will create a two-dimensional composite widget, such as a
- * grid.
+ * Renders a row element for composite items that allows two-dimensional arrow
+ * key navigation.
+ * [`CompositeItem`](https://ariakit.org/reference/composite-item) elements
+ * wrapped within this component will automatically receive a
+ * [`rowId`](https://ariakit.org/reference/composite-item#rowid) prop.
  * @see https://ariakit.org/components/composite
  * @example
- * ```jsx
- * const composite = useCompositeStore();
- * <Composite store={composite}>
- *   <CompositeRow>
- *     <CompositeItem>Item 1.1</CompositeItem>
- *     <CompositeItem>Item 1.2</CompositeItem>
- *     <CompositeItem>Item 1.3</CompositeItem>
- *   </CompositeRow>
- *   <CompositeRow>
- *     <CompositeItem>Item 2.1</CompositeItem>
- *     <CompositeItem>Item 2.2</CompositeItem>
- *     <CompositeItem>Item 2.3</CompositeItem>
- *   </CompositeRow>
- * </Composite>
+ * ```jsx {3-12}
+ * <CompositeProvider>
+ *   <Composite>
+ *     <CompositeRow>
+ *       <CompositeItem>Item 1.1</CompositeItem>
+ *       <CompositeItem>Item 1.2</CompositeItem>
+ *       <CompositeItem>Item 1.3</CompositeItem>
+ *     </CompositeRow>
+ *     <CompositeRow>
+ *       <CompositeItem>Item 2.1</CompositeItem>
+ *       <CompositeItem>Item 2.2</CompositeItem>
+ *       <CompositeItem>Item 2.3</CompositeItem>
+ *     </CompositeRow>
+ *   </Composite>
+ * </CompositeProvider>
  * ```
  */
 export declare const CompositeRow: import("../utils/types.js").Component<CompositeRowOptions<"div">>;
 export interface CompositeRowOptions<T extends As = "div"> extends Options<T> {
     /**
-     * Object returned by the `useCompositeStore` hook. If not provided, the
-     * parent `Composite` component's context will be used.
+     * Object returned by the
+     * [`useCompositeStore`](https://ariakit.org/reference/use-composite-store)
+     * hook. If not provided, the closest
+     * [`Composite`](https://ariakit.org/reference/composite) or
+     * [`CompositeProvider`](https://ariakit.org/reference/composite-provider)
+     * components' context will be used.
      */
     store?: CompositeStore;
 }

package/cjs/composite/composite-row.d.ts

@@ -20,32 +20,39 @@ import type { CompositeStore } from "./composite-store.js";
  */
 export declare const useCompositeRow: import("../utils/types.js").Hook<CompositeRowOptions<"div">>;
 /**
- * Renders a composite row. Wrapping `CompositeItem` elements within
- * `CompositeRow` will create a two-dimensional composite widget, such as a
- * grid.
+ * Renders a row element for composite items that allows two-dimensional arrow
+ * key navigation.
+ * [`CompositeItem`](https://ariakit.org/reference/composite-item) elements
+ * wrapped within this component will automatically receive a
+ * [`rowId`](https://ariakit.org/reference/composite-item#rowid) prop.
  * @see https://ariakit.org/components/composite
  * @example
- * ```jsx
- * const composite = useCompositeStore();
- * <Composite store={composite}>
- *   <CompositeRow>
- *     <CompositeItem>Item 1.1</CompositeItem>
- *     <CompositeItem>Item 1.2</CompositeItem>
- *     <CompositeItem>Item 1.3</CompositeItem>
- *   </CompositeRow>
- *   <CompositeRow>
- *     <CompositeItem>Item 2.1</CompositeItem>
- *     <CompositeItem>Item 2.2</CompositeItem>
- *     <CompositeItem>Item 2.3</CompositeItem>
- *   </CompositeRow>
- * </Composite>
+ * ```jsx {3-12}
+ * <CompositeProvider>
+ *   <Composite>
+ *     <CompositeRow>
+ *       <CompositeItem>Item 1.1</CompositeItem>
+ *       <CompositeItem>Item 1.2</CompositeItem>
+ *       <CompositeItem>Item 1.3</CompositeItem>
+ *     </CompositeRow>
+ *     <CompositeRow>
+ *       <CompositeItem>Item 2.1</CompositeItem>
+ *       <CompositeItem>Item 2.2</CompositeItem>
+ *       <CompositeItem>Item 2.3</CompositeItem>
+ *     </CompositeRow>
+ *   </Composite>
+ * </CompositeProvider>
  * ```
  */
 export declare const CompositeRow: import("../utils/types.js").Component<CompositeRowOptions<"div">>;
 export interface CompositeRowOptions<T extends As = "div"> extends Options<T> {
     /**
-     * Object returned by the `useCompositeStore` hook. If not provided, the
-     * parent `Composite` component's context will be used.
+     * Object returned by the
+     * [`useCompositeStore`](https://ariakit.org/reference/use-composite-store)
+     * hook. If not provided, the closest
+     * [`Composite`](https://ariakit.org/reference/composite) or
+     * [`CompositeProvider`](https://ariakit.org/reference/composite-provider)
+     * components' context will be used.
      */
     store?: CompositeStore;
 }

package/cjs/composite/composite-separator.d.cts

@@ -17,24 +17,37 @@ import type { CompositeStore } from "./composite-store.js";
  */
 export declare const useCompositeSeparator: import("../utils/types.js").Hook<CompositeSeparatorOptions<"hr">>;
 /**
- * Renders a separator for composite items.
+ * Renders a divider between
+ * [`CompositeItem`](https://ariakit.org/reference/composite-item) elements.
  * @see https://ariakit.org/components/composite
  * @example
- * ```jsx
- * const composite = useCompositeStore();
- * <Composite store={composite}>
- *   <CompositeItem>Item 1</CompositeItem>
- *   <CompositeSeparator />
- *   <CompositeItem>Item 2</CompositeItem>
- * </Composite>
+ * ```jsx {4}
+ * <CompositeProvider>
+ *   <Composite>
+ *     <CompositeItem>Item 1</CompositeItem>
+ *     <CompositeSeparator />
+ *     <CompositeItem>Item 2</CompositeItem>
+ *   </Composite>
+ * </CompositeProvider>
  * ```
  */
 export declare const CompositeSeparator: import("../utils/types.js").Component<CompositeSeparatorOptions<"hr">>;
 export interface CompositeSeparatorOptions<T extends As = "hr"> extends SeparatorOptions<T> {
     /**
-     * Object returned by the `useCompositeStore` hook. If not provided, the
-     * parent `Composite` component's context will be used.
+     * Object returned by the
+     * [`useCompositeStore`](https://ariakit.org/reference/use-composite-store)
+     * hook. If not provided, the closest
+     * [`Composite`](https://ariakit.org/reference/composite) or
+     * [`CompositeProvider`](https://ariakit.org/reference/composite-provider)
+     * components' context will be used.
      */
     store?: CompositeStore;
+    /**
+     * The orientation of the separator. By default, this is the opposite of the
+     * [`orientation`](https://ariakit.org/reference/composite-provider#orientation)
+     * state of the composite widget. Which means it doesn't need to be explicitly
+     * set in most cases.
+     */
+    orientation?: SeparatorOptions<T>["orientation"];
 }
 export type CompositeSeparatorProps<T extends As = "hr"> = Props<CompositeSeparatorOptions<T>>;

package/cjs/composite/composite-separator.d.ts

@@ -17,24 +17,37 @@ import type { CompositeStore } from "./composite-store.js";
  */
 export declare const useCompositeSeparator: import("../utils/types.js").Hook<CompositeSeparatorOptions<"hr">>;
 /**
- * Renders a separator for composite items.
+ * Renders a divider between
+ * [`CompositeItem`](https://ariakit.org/reference/composite-item) elements.
  * @see https://ariakit.org/components/composite
  * @example
- * ```jsx
- * const composite = useCompositeStore();
- * <Composite store={composite}>
- *   <CompositeItem>Item 1</CompositeItem>
- *   <CompositeSeparator />
- *   <CompositeItem>Item 2</CompositeItem>
- * </Composite>
+ * ```jsx {4}
+ * <CompositeProvider>
+ *   <Composite>
+ *     <CompositeItem>Item 1</CompositeItem>
+ *     <CompositeSeparator />
+ *     <CompositeItem>Item 2</CompositeItem>
+ *   </Composite>
+ * </CompositeProvider>
  * ```
  */
 export declare const CompositeSeparator: import("../utils/types.js").Component<CompositeSeparatorOptions<"hr">>;
 export interface CompositeSeparatorOptions<T extends As = "hr"> extends SeparatorOptions<T> {
     /**
-     * Object returned by the `useCompositeStore` hook. If not provided, the
-     * parent `Composite` component's context will be used.
+     * Object returned by the
+     * [`useCompositeStore`](https://ariakit.org/reference/use-composite-store)
+     * hook. If not provided, the closest
+     * [`Composite`](https://ariakit.org/reference/composite) or
+     * [`CompositeProvider`](https://ariakit.org/reference/composite-provider)
+     * components' context will be used.
      */
     store?: CompositeStore;
+    /**
+     * The orientation of the separator. By default, this is the opposite of the
+     * [`orientation`](https://ariakit.org/reference/composite-provider#orientation)
+     * state of the composite widget. Which means it doesn't need to be explicitly
+     * set in most cases.
+     */
+    orientation?: SeparatorOptions<T>["orientation"];
 }
 export type CompositeSeparatorProps<T extends As = "hr"> = Props<CompositeSeparatorOptions<T>>;

package/cjs/composite/composite-store.cjs

@@ -2,13 +2,13 @@
 
 
 
-var _N6CR2VNNcjs = require('../__chunks/N6CR2VNN.cjs');
-require('../__chunks/DKOWT2IJ.cjs');
-require('../__chunks/B233QVZE.cjs');
+var _LUL2YWZ3cjs = require('../__chunks/LUL2YWZ3.cjs');
+require('../__chunks/CDNJPIEG.cjs');
+require('../__chunks/OLOZ5JT2.cjs');
 require('../__chunks/EO6LS72H.cjs');
 require('../__chunks/CJDHQUBR.cjs');
 require('../__chunks/AV6KTKLE.cjs');
 
 
 
-exports.useCompositeStore = _N6CR2VNNcjs.useCompositeStore; exports.useCompositeStoreProps = _N6CR2VNNcjs.useCompositeStoreProps;
+exports.useCompositeStore = _LUL2YWZ3cjs.useCompositeStore; exports.useCompositeStoreProps = _LUL2YWZ3cjs.useCompositeStoreProps;

package/cjs/composite/composite-store.d.cts

@@ -4,11 +4,13 @@ import type { CollectionStoreFunctions, CollectionStoreOptions, CollectionStoreS
 import type { Store } from "../utils/store.js";
 export declare function useCompositeStoreProps<T extends Core.CompositeStore>(store: T, update: () => void, props: CompositeStoreProps): T;
 /**
- * Creates a composite store.
+ * Creates a composite store to control the state of
+ * [Composite](https://ariakit.org/components/composite) components.
  * @see https://ariakit.org/components/composite
  * @example
  * ```jsx
  * const composite = useCompositeStore();
+ *
  * <Composite store={composite}>
  *   <CompositeItem>Item</CompositeItem>
  *   <CompositeItem>Item</CompositeItem>
@@ -26,11 +28,12 @@ export interface CompositeStoreFunctions<T extends CompositeStoreItem = Composit
 }
 export interface CompositeStoreOptions<T extends CompositeStoreItem = CompositeStoreItem> extends Core.CompositeStoreOptions<T>, CollectionStoreOptions<T> {
     /**
-     * A callback that gets called when the `activeId` state changes.
-     * @param activeId The new active id.
-     * @example
-     * const [activeId, setActiveId] = useState(null);
-     * const composite = useCompositeStore({ activeId, setActiveId });
+     * A callback that gets called when the
+     * [`activeId`](https://ariakit.org/reference/composite-provider#activeid)
+     * state changes.
+     *
+     * Live examples:
+     * - [Combobox with tabs](https://ariakit.org/examples/combobox-tabs)
      */
     setActiveId?: (activeId: CompositeStoreState<T>["activeId"]) => void;
 }

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

@@ -4,11 +4,13 @@ import type { CollectionStoreFunctions, CollectionStoreOptions, CollectionStoreS
 import type { Store } from "../utils/store.js";
 export declare function useCompositeStoreProps<T extends Core.CompositeStore>(store: T, update: () => void, props: CompositeStoreProps): T;
 /**
- * Creates a composite store.
+ * Creates a composite store to control the state of
+ * [Composite](https://ariakit.org/components/composite) components.
  * @see https://ariakit.org/components/composite
  * @example
  * ```jsx
  * const composite = useCompositeStore();
+ *
  * <Composite store={composite}>
  *   <CompositeItem>Item</CompositeItem>
  *   <CompositeItem>Item</CompositeItem>
@@ -26,11 +28,12 @@ export interface CompositeStoreFunctions<T extends CompositeStoreItem = Composit
 }
 export interface CompositeStoreOptions<T extends CompositeStoreItem = CompositeStoreItem> extends Core.CompositeStoreOptions<T>, CollectionStoreOptions<T> {
     /**
-     * A callback that gets called when the `activeId` state changes.
-     * @param activeId The new active id.
-     * @example
-     * const [activeId, setActiveId] = useState(null);
-     * const composite = useCompositeStore({ activeId, setActiveId });
+     * A callback that gets called when the
+     * [`activeId`](https://ariakit.org/reference/composite-provider#activeid)
+     * state changes.
+     *
+     * Live examples:
+     * - [Combobox with tabs](https://ariakit.org/examples/combobox-tabs)
      */
     setActiveId?: (activeId: CompositeStoreState<T>["activeId"]) => void;
 }