@ariakit/react-core 0.0.1 → 0.1.1

package/esm/command/command.js

@@ -0,0 +1,12 @@
+import {
+  Command,
+  useCommand
+} from "../__chunks/SAVDGYCC.js";
+import "../__chunks/5TGAWEHD.js";
+import "../__chunks/JE5NWDDX.js";
+import "../__chunks/B7MIN7YT.js";
+import "../__chunks/SXC6BPOF.js";
+export {
+  Command,
+  useCommand
+};

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

@@ -0,0 +1,44 @@
+import type { As, Options, Props } from "../utils/types.js";
+import type { CompositeStore } from "./composite-store.js";
+/**
+ * Returns props to create a `CompositeContainer` component. This component
+ * renders interactive widgets inside composite items. This should be used in
+ * conjunction with the `CompositeItem` component, the `useCompositeItem` hook,
+ * or any other component/hook that uses `CompositeItem` underneath.
+ * @see https://ariakit.org/components/composite
+ * @example
+ * ```jsx
+ * const store = useCompositeStore();
+ * const props = useCompositeContainer({ store });
+ * <Composite store={store}>
+ *   <CompositeItem {...props}>
+ *     <input type="text" />
+ *   </CompositeItem>
+ * </Composite>
+ * ```
+ */
+export declare const useCompositeContainer: import("../utils/types.js").Hook<CompositeContainerOptions<"div">>;
+/**
+ * Renders a container for interactive widgets inside composite items. This
+ * should be used in conjunction with the `CompositeItem` component or a
+ * component that uses `CompositeItem` underneath.
+ * @see https://ariakit.org/components/composite
+ * @example
+ * ```jsx
+ * const composite = useCompositeStore();
+ * <Composite store={composite}>
+ *   <CompositeItem as={CompositeContainer}>
+ *     <input type="text" />
+ *   </CompositeItem>
+ * </Composite>
+ * ```
+ */
+export declare const CompositeContainer: import("../utils/types.js").Component<CompositeContainerOptions<"div">>;
+export interface CompositeContainerOptions<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.
+     */
+    store?: CompositeStore;
+}
+export type CompositeContainerProps<T extends As = "div"> = Props<CompositeContainerOptions<T>>;

package/esm/composite/composite-container.js

@@ -0,0 +1,14 @@
+import {
+  CompositeContainer,
+  useCompositeContainer
+} from "../__chunks/IACKFX3D.js";
+import "../__chunks/STKLF26R.js";
+import "../__chunks/Z3X3QN6P.js";
+import "../__chunks/JE5NWDDX.js";
+import "../__chunks/6DAEYZ43.js";
+import "../__chunks/B7MIN7YT.js";
+import "../__chunks/SXC6BPOF.js";
+export {
+  CompositeContainer,
+  useCompositeContainer
+};

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

@@ -0,0 +1,9 @@
+import type { CompositeStore } from "./composite-store.js";
+type ItemContext = {
+    baseElement?: HTMLElement;
+    id?: string;
+} | undefined;
+export declare const CompositeRowContext: import("react").Context<ItemContext>;
+export declare const CompositeItemContext: import("react").Context<ItemContext>;
+export declare const CompositeContext: import("react").Context<CompositeStore | undefined>;
+export {};

package/esm/composite/composite-context.js

@@ -0,0 +1,10 @@
+import {
+  CompositeContext,
+  CompositeItemContext,
+  CompositeRowContext
+} from "../__chunks/Z3X3QN6P.js";
+export {
+  CompositeContext,
+  CompositeItemContext,
+  CompositeRowContext
+};

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

@@ -0,0 +1,42 @@
+import type { GroupLabelOptions } from "../group/group-label.js";
+import type { As, Props } from "../utils/types.js";
+import type { CompositeStore } from "./composite-store.js";
+/**
+ * Returns props to create a `CompositeGroupLabel` component. This hook must be
+ * used in a component that's wrapped with `CompositeGroup` so the
+ * `aria-labelledby` prop is properly set on the composite group element.
+ * @see https://ariakit.org/components/composite
+ * @example
+ * ```jsx
+ * // This component must be wrapped with CompositeGroup
+ * const props = useCompositeGroupLabel();
+ * <Role {...props}>Label</Role>
+ * ```
+ */
+export declare const useCompositeGroupLabel: import("../utils/types.js").Hook<CompositeGroupLabelOptions<"div">>;
+/**
+ * Renders a label in a composite group. This component must be wrapped with
+ * `CompositeGroup` so the `aria-labelledby` prop is properly set on the
+ * composite group element.
+ * @see https://ariakit.org/components/composite
+ * @example
+ * ```jsx
+ * const composite = useCompositeStore();
+ * <Composite store={composite}>
+ *   <CompositeGroup>
+ *     <CompositeGroupLabel>Label</CompositeGroupLabel>
+ *     <CompositeItem>Item 1</CompositeItem>
+ *     <CompositeItem>Item 2</CompositeItem>
+ *   </CompositeGroup>
+ * </Composite>
+ * ```
+ */
+export declare const CompositeGroupLabel: import("../utils/types.js").Component<CompositeGroupLabelOptions<"div">>;
+export interface CompositeGroupLabelOptions<T extends As = "div"> extends GroupLabelOptions<T> {
+    /**
+     * Object returned by the `useCompositeStore` hook. If not provided, the
+     * parent `Composite` component's context will be used.
+     */
+    store?: CompositeStore;
+}
+export type CompositeGroupLabelProps<T extends As = "div"> = Props<CompositeGroupLabelOptions<T>>;

package/esm/composite/composite-group-label.js

@@ -0,0 +1,13 @@
+import {
+  CompositeGroupLabel,
+  useCompositeGroupLabel
+} from "../__chunks/NYJYNUSY.js";
+import "../__chunks/SE7IFIBU.js";
+import "../__chunks/F5VAC7MB.js";
+import "../__chunks/JE5NWDDX.js";
+import "../__chunks/B7MIN7YT.js";
+import "../__chunks/SXC6BPOF.js";
+export {
+  CompositeGroupLabel,
+  useCompositeGroupLabel
+};

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

@@ -0,0 +1,44 @@
+import type { GroupOptions } from "../group/group.js";
+import type { As, Props } from "../utils/types.js";
+import type { CompositeStore } from "./composite-store.js";
+/**
+ * Returns props to create a `CompositeGroup` component.
+ * @see https://ariakit.org/components/composite
+ * @example
+ * ```jsx
+ * const store = useCompositeStore();
+ * const props = useCompositeGroup({ store });
+ * <Composite store={store}>
+ *   <Role {...props}>
+ *     <CompositeGroupLabel>Label</CompositeGroupLabel>
+ *     <CompositeItem>Item 1</CompositeItem>
+ *     <CompositeItem>Item 2</CompositeItem>
+ *   </Role>
+ * </Composite>
+ * ```
+ */
+export declare const useCompositeGroup: import("../utils/types.js").Hook<CompositeGroupOptions<"div">>;
+/**
+ * Renders a group element for composite items.
+ * @see https://ariakit.org/components/composite
+ * @example
+ * ```jsx
+ * const composite = useCompositeStore();
+ * <Composite store={composite}>
+ *   <CompositeGroup>
+ *     <CompositeGroupLabel>Label</CompositeGroupLabel>
+ *     <CompositeItem>Item 1</CompositeItem>
+ *     <CompositeItem>Item 2</CompositeItem>
+ *   </CompositeGroup>
+ * </Composite>
+ * ```
+ */
+export declare const CompositeGroup: import("../utils/types.js").Component<CompositeGroupOptions<"div">>;
+export interface CompositeGroupOptions<T extends As = "div"> extends GroupOptions<T> {
+    /**
+     * Object returned by the `useCompositeStore` hook. If not provided, the
+     * parent `Composite` component's context will be used.
+     */
+    store?: CompositeStore;
+}
+export type CompositeGroupProps<T extends As = "div"> = Props<CompositeGroupOptions<T>>;

package/esm/composite/composite-group.js

@@ -0,0 +1,13 @@
+import {
+  CompositeGroup,
+  useCompositeGroup
+} from "../__chunks/TCSUGBIK.js";
+import "../__chunks/SG5D3YRB.js";
+import "../__chunks/F5VAC7MB.js";
+import "../__chunks/JE5NWDDX.js";
+import "../__chunks/B7MIN7YT.js";
+import "../__chunks/SXC6BPOF.js";
+export {
+  CompositeGroup,
+  useCompositeGroup
+};

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

@@ -0,0 +1,47 @@
+import type { MouseEvent as ReactMouseEvent } from "react";
+import type { BooleanOrCallback } from "@ariakit/core/utils/types";
+import type { As, Options, Props } from "../utils/types.js";
+import type { CompositeStore } from "./composite-store.js";
+/**
+ * Returns props to create a `CompositeHover` component. The composite item that
+ * receives these props will get focused on mouse move and lose focus to the
+ * composite base element on mouse leave. This should be combined with the
+ * `CompositeItem` component, the `useCompositeItem` hook or any component/hook
+ * that uses them underneath.
+ * @see https://ariakit.org/components/composite
+ * @example
+ * ```jsx
+ * const store = useCompositeStore();
+ * const props = useCompositeHover({ store });
+ * <CompositeItem store={store} {...props}>Item</CompositeItem>
+ * ```
+ */
+export declare const useCompositeHover: import("../utils/types.js").Hook<CompositeHoverOptions<"div">>;
+/**
+ * Renders an element in a composite widget that receives focus on mouse move
+ * and loses focus to the composite base element on mouse leave. This should be
+ * combined with the `CompositeItem` component, the `useCompositeItem` hook or
+ * any component/hook that uses them underneath.
+ * @see https://ariakit.org/components/composite
+ * @example
+ * ```jsx
+ * const composite = useCompositeStore();
+ * <Composite store={composite}>
+ *   <CompositeHover as={CompositeItem}>Item</CompositeHover>
+ * </Composite>
+ * ```
+ */
+export declare const CompositeHover: import("../utils/types.js").Component<CompositeHoverOptions<"div">>;
+export interface CompositeHoverOptions<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.
+     */
+    store?: CompositeStore;
+    /**
+     * Whether to focus the composite item on hover.
+     * @default true
+     */
+    focusOnHover?: BooleanOrCallback<ReactMouseEvent<HTMLElement>>;
+}
+export type CompositeHoverProps<T extends As = "div"> = Props<CompositeHoverOptions<T>>;

package/esm/composite/composite-hover.js

@@ -0,0 +1,12 @@
+import {
+  CompositeHover,
+  useCompositeHover
+} from "../__chunks/DRSUYUM5.js";
+import "../__chunks/Z3X3QN6P.js";
+import "../__chunks/JE5NWDDX.js";
+import "../__chunks/B7MIN7YT.js";
+import "../__chunks/SXC6BPOF.js";
+export {
+  CompositeHover,
+  useCompositeHover
+};

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

@@ -0,0 +1,39 @@
+import type { As, Options, Props } from "../utils/types.js";
+import type { CompositeStore } from "./composite-store.js";
+/**
+ * Returns props to create a `CompositeInput` component. This should be used in
+ * conjunction with the `CompositeItem` component, the `useCompositeItem` hook,
+ * or any other component/hook that uses `CompositeItem` underneath.
+ * @see https://ariakit.org/components/composite
+ * @example
+ * ```jsx
+ * const store = useCompositeStore();
+ * const props = useCompositeInput({ store });
+ * <Composite store={store}>
+ *   <CompositeItem {...props} />
+ * </Composite>
+ * ```
+ */
+export declare const useCompositeInput: import("../utils/types.js").Hook<CompositeInputOptions<"input">>;
+/**
+ * Renders an input as a composite item. This should be used in conjunction with
+ * the `CompositeItem` component or a component that uses `CompositeItem`
+ * underneath.
+ * @see https://ariakit.org/components/composite
+ * @example
+ * ```jsx
+ * const composite = useCompositeStore();
+ * <Composite store={composite}>
+ *   <CompositeItem as={CompositeInput} />
+ * </Composite>
+ * ```
+ */
+export declare const CompositeInput: import("../utils/types.js").Component<CompositeInputOptions<"input">>;
+export interface CompositeInputOptions<T extends As = "input"> extends Options<T> {
+    /**
+     * Object returned by the `useCompositeStore` hook. If not provided, the
+     * parent `Composite` component's context will be used.
+     */
+    store?: CompositeStore;
+}
+export type CompositeInputProps<T extends As = "input"> = Props<CompositeInputOptions<T>>;

package/esm/composite/composite-input.js

@@ -0,0 +1,12 @@
+import {
+  CompositeInput,
+  useCompositeInput
+} from "../__chunks/VDIWPJGE.js";
+import "../__chunks/STKLF26R.js";
+import "../__chunks/JE5NWDDX.js";
+import "../__chunks/B7MIN7YT.js";
+import "../__chunks/SXC6BPOF.js";
+export {
+  CompositeInput,
+  useCompositeInput
+};

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

@@ -0,0 +1,56 @@
+import type { KeyboardEvent } from "react";
+import type { BooleanOrCallback } from "@ariakit/core/utils/types";
+import type { CollectionItemOptions } from "../collection/collection-item.js";
+import type { CommandOptions } from "../command/command.js";
+import type { As, Props } from "../utils/types.js";
+import type { CompositeStore } from "./composite-store.js";
+/**
+ * Returns props to create a `CompositeItem` component.
+ * @see https://ariakit.org/components/composite
+ * @example
+ * ```jsx
+ * const store = useCompositeStore();
+ * const props = useCompositeItem({ store });
+ * <Role {...props}>Item 1</Role>
+ * ```
+ */
+export declare const useCompositeItem: import("../utils/types.js").Hook<CompositeItemOptions<"button">>;
+/**
+ * Renders a composite item.
+ * @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>
+ * ```
+ */
+export declare const CompositeItem: import("../utils/types.js").Component<CompositeItemOptions<"button">>;
+export interface CompositeItemOptions<T extends As = "button"> extends CommandOptions<T>, CollectionItemOptions<T> {
+    /**
+     * Object returned by the `useCompositeStore` hook. If not provided, the
+     * parent `Composite` component's context will be used.
+     */
+    store?: CompositeStore;
+    /**
+     * The id that will be used to group items in the same row. This is usually
+     * retrieved by the `CompositeRow` component through context so in most cases
+     * you don't need to set it manually.
+     */
+    rowId?: string;
+    /**
+     * Whether the scroll behavior should be prevented when pressing arrow keys on
+     * the first or the last items.
+     * @default false
+     */
+    preventScrollOnKeyDown?: BooleanOrCallback<KeyboardEvent<HTMLElement>>;
+    /**
+     * Whether pressing arrow keys should move the focus to a different item.
+     * @default true
+     */
+    moveOnKeyPress?: BooleanOrCallback<KeyboardEvent<HTMLElement>>;
+}
+export type CompositeItemProps<T extends As = "button"> = Props<CompositeItemOptions<T>>;

package/esm/composite/composite-item.js

@@ -0,0 +1,17 @@
+import {
+  CompositeItem,
+  useCompositeItem
+} from "../__chunks/WHN4PCW7.js";
+import "../__chunks/SAVDGYCC.js";
+import "../__chunks/OJNRBQKS.js";
+import "../__chunks/T3DJZG63.js";
+import "../__chunks/STKLF26R.js";
+import "../__chunks/5TGAWEHD.js";
+import "../__chunks/Z3X3QN6P.js";
+import "../__chunks/JE5NWDDX.js";
+import "../__chunks/B7MIN7YT.js";
+import "../__chunks/SXC6BPOF.js";
+export {
+  CompositeItem,
+  useCompositeItem
+};

package/esm/composite/composite-overflow-disclosure.d.ts

@@ -0,0 +1,45 @@
+import type { PopoverDisclosureOptions } from "../popover/popover-disclosure.js";
+import type { As, Props } from "../utils/types.js";
+import type { CompositeItemOptions } from "./composite-item.js";
+import type { CompositeOverflowStore } from "./composite-overflow-store.js";
+/**
+ * Returns props to create a `CompositeOverflowDisclosure` component. This hook
+ * should be used in a component that's wrapped with a composite component.
+ * @see https://ariakit.org/components/composite
+ * @example
+ * ```jsx
+ * // This component should be wrapped with Composite
+ * const props = useCompositeOverflowDisclosure();
+ * <Role {...props}>+2 items</Role>
+ * ```
+ */
+export declare const useCompositeOverflowDisclosure: import("../utils/types.js").Hook<CompositeOverflowDisclosureOptions<"button">>;
+/**
+ * Renders a disclosure button for the `CompositeOverflow` component. This
+ * component should be wrapped with a composite component.
+ * @see https://ariakit.org/components/composite
+ * @example
+ * ```jsx
+ * const composite = useCompositeStore();
+ * const overflow = useCompositeOverflowStore();
+ * <Composite store={composite}>
+ *   <CompositeItem>Item 1</CompositeItem>
+ *   <CompositeItem>Item 2</CompositeItem>
+ *   <CompositeOverflowDisclosure store={overflow}>
+ *     +2 items
+ *   </CompositeOverflowDisclosure>
+ *   <CompositeOverflow store={overflow}>
+ *     <CompositeItem>Item 3</CompositeItem>
+ *     <CompositeItem>Item 4</CompositeItem>
+ *   </CompositeOverflow>
+ * </Composite>
+ * ```
+ */
+export declare const CompositeOverflowDisclosure: import("../utils/types.js").Component<CompositeOverflowDisclosureOptions<"button">>;
+export interface CompositeOverflowDisclosureOptions<T extends As = "button"> extends Omit<CompositeItemOptions<T>, "store">, PopoverDisclosureOptions<T> {
+    /**
+     * Object returned by the `useCompositeOverflowStore` hook.
+     */
+    store: CompositeOverflowStore;
+}
+export type CompositeOverflowDisclosureProps<T extends As = "button"> = Props<CompositeOverflowDisclosureOptions<T>>;

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

@@ -0,0 +1,74 @@
+import {
+  usePopoverDisclosure
+} from "../__chunks/JKSMOXA4.js";
+import "../__chunks/NRA7DRSD.js";
+import "../__chunks/57UTLR6J.js";
+import "../__chunks/I4MLEPTM.js";
+import "../__chunks/6GS36SYX.js";
+import "../__chunks/RNWB46DZ.js";
+import {
+  useCompositeItem
+} from "../__chunks/WHN4PCW7.js";
+import "../__chunks/SAVDGYCC.js";
+import "../__chunks/OJNRBQKS.js";
+import "../__chunks/T3DJZG63.js";
+import "../__chunks/STKLF26R.js";
+import "../__chunks/5TGAWEHD.js";
+import "../__chunks/Z3X3QN6P.js";
+import {
+  createComponent,
+  createElement,
+  createHook
+} from "../__chunks/JE5NWDDX.js";
+import {
+  useEvent,
+  useForkRef
+} from "../__chunks/B7MIN7YT.js";
+import "../__chunks/SXC6BPOF.js";
+
+// src/composite/composite-overflow-disclosure.ts
+import { useEffect, useRef, useState } from "react";
+var useCompositeOverflowDisclosure = createHook(({ store, ...props }) => {
+  const ref = useRef(null);
+  const [shouldRegisterItem, setShouldRegisterItem] = useState(false);
+  useEffect(() => {
+    return store.sync(() => {
+      store.setDisclosureElement(ref.current);
+    }, ["disclosureElement"]);
+  }, [store]);
+  const onFocusProp = props.onFocus;
+  const onFocus = useEvent((event) => {
+    onFocusProp?.(event);
+    if (event.defaultPrevented)
+      return;
+    setShouldRegisterItem(true);
+  });
+  const onBlurProp = props.onBlur;
+  const onBlur = useEvent((event) => {
+    onBlurProp?.(event);
+    if (event.defaultPrevented)
+      return;
+    setShouldRegisterItem(false);
+  });
+  props = {
+    "aria-hidden": !shouldRegisterItem,
+    ...props,
+    ref: useForkRef(props.ref, ref),
+    onFocus,
+    onBlur
+  };
+  props = useCompositeItem({ ...props, shouldRegisterItem });
+  props = usePopoverDisclosure({ store, ...props });
+  return props;
+});
+var CompositeOverflowDisclosure = createComponent((props) => {
+  const htmlProps = useCompositeOverflowDisclosure(props);
+  return createElement("button", htmlProps);
+});
+if (process.env.NODE_ENV !== "production") {
+  CompositeOverflowDisclosure.displayName = "CompositeOverflowDisclosure";
+}
+export {
+  CompositeOverflowDisclosure,
+  useCompositeOverflowDisclosure
+};

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

@@ -0,0 +1,46 @@
+import * as Core from "@ariakit/core/composite/composite-overflow-store";
+import type { PopoverStoreFunctions, PopoverStoreOptions, PopoverStoreState } from "../popover/popover-store.js";
+import type { Store } from "../utils/store.js";
+export declare function useCompositeOverflowStoreOptions(props: CompositeOverflowStoreProps): {
+    getAnchorRect: ((anchor: HTMLElement | null) => {
+        x?: number | undefined;
+        y?: number | undefined;
+        width?: number | undefined;
+        height?: number | undefined;
+    } | null) | undefined;
+    renderCallback: ((props: import("@ariakit/core/popover/popover-store").PopoverStoreRenderCallbackProps) => void | (() => void)) | undefined;
+    setOpen?: ((open: boolean) => void) | undefined;
+    defaultOpen?: boolean | undefined;
+    open?: boolean | undefined;
+    animated?: number | boolean | undefined;
+};
+export declare function useCompositeOverflowStoreProps<T extends CompositeOverflowStore>(store: T, props: CompositeOverflowStoreProps): T;
+/**
+ * Creates a composite overflow store.
+ * @see https://ariakit.org/components/composite
+ * @example
+ * ```jsx
+ * const composite = useCompositeStore();
+ * const overflow = useCompositeOverflowStore();
+ * <Composite store={composite}>
+ *   <CompositeItem>Item 1</CompositeItem>
+ *   <CompositeItem>Item 2</CompositeItem>
+ *   <CompositeOverflowDisclosure store={overflow}>
+ *     +2 items
+ *   </CompositeOverflowDisclosure>
+ *   <CompositeOverflow store={overflow}>
+ *     <CompositeItem>Item 3</CompositeItem>
+ *     <CompositeItem>Item 4</CompositeItem>
+ *   </CompositeOverflow>
+ * </Composite>
+ * ```
+ */
+export declare function useCompositeOverflowStore(props?: CompositeOverflowStoreProps): CompositeOverflowStore;
+export interface CompositeOverflowStoreState extends Core.CompositeOverflowStoreState, PopoverStoreState {
+}
+export interface CompositeOverflowStoreFunctions extends Core.CompositeOverflowStoreFunctions, PopoverStoreFunctions {
+}
+export interface CompositeOverflowStoreOptions extends Core.CompositeOverflowStoreOptions, PopoverStoreOptions {
+}
+export type CompositeOverflowStoreProps = CompositeOverflowStoreOptions & Core.CompositeOverflowStoreProps;
+export type CompositeOverflowStore = CompositeOverflowStoreFunctions & Store<Core.CompositeOverflowStore>;

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

@@ -0,0 +1,32 @@
+import {
+  usePopoverStoreOptions,
+  usePopoverStoreProps
+} from "../__chunks/RSJJ72ZD.js";
+import "../__chunks/OGTE6FGV.js";
+import "../__chunks/OXIHLN45.js";
+import {
+  useStore
+} from "../__chunks/6DAEYZ43.js";
+import "../__chunks/B7MIN7YT.js";
+import "../__chunks/SXC6BPOF.js";
+
+// src/composite/composite-overflow-store.ts
+import * as Core from "@ariakit/core/composite/composite-overflow-store";
+function useCompositeOverflowStoreOptions(props) {
+  return usePopoverStoreOptions(props);
+}
+function useCompositeOverflowStoreProps(store, props) {
+  return usePopoverStoreProps(store, props);
+}
+function useCompositeOverflowStore(props = {}) {
+  const options = useCompositeOverflowStoreOptions(props);
+  const store = useStore(
+    () => Core.createCompositeOverflowStore({ ...props, ...options })
+  );
+  return useCompositeOverflowStoreProps(store, props);
+}
+export {
+  useCompositeOverflowStore,
+  useCompositeOverflowStoreOptions,
+  useCompositeOverflowStoreProps
+};

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

@@ -0,0 +1,46 @@
+import type { PopoverOptions } from "../popover/popover.js";
+import type { As, Props } from "../utils/types.js";
+import type { CompositeOverflowStore } from "./composite-overflow-store.js";
+/**
+ * Returns props to create a `CompositeOverflow` component.
+ * @see https://ariakit.org/components/composite
+ * @example
+ * ```jsx
+ * const store = useCompositeOverflowStore();
+ * const props = useCompositeOverflow({ store });
+ * <Role {...props}>
+ *   <CompositeItem>Item 3</CompositeItem>
+ *   <CompositeItem>Item 4</CompositeItem>
+ * </Role>
+ * ```
+ */
+export declare const useCompositeOverflow: import("../utils/types.js").Hook<CompositeOverflowOptions<"div">>;
+/**
+ * Renders a popover that will contain the overflow items in a composite
+ * collection.
+ * @see https://ariakit.org/components/composite
+ * @example
+ * ```jsx
+ * const composite = useCompositeStore();
+ * const overflow = useCompositeOverflowStore();
+ * <Composite store={composite}>
+ *   <CompositeItem>Item 1</CompositeItem>
+ *   <CompositeItem>Item 2</CompositeItem>
+ *   <CompositeOverflowDisclosure store={overflow}>
+ *     +2 items
+ *   </CompositeOverflowDisclosure>
+ *   <CompositeOverflow store={overflow}>
+ *     <CompositeItem>Item 3</CompositeItem>
+ *     <CompositeItem>Item 4</CompositeItem>
+ *   </CompositeOverflow>
+ * </Composite>
+ * ```
+ */
+export declare const CompositeOverflow: import("../utils/types.js").Component<CompositeOverflowOptions<"div">>;
+export interface CompositeOverflowOptions<T extends As = "div"> extends PopoverOptions<T> {
+    /**
+     * Object returned by the `useCompositeOverflowStore` hook.
+     */
+    store: CompositeOverflowStore;
+}
+export type CompositeOverflowProps<T extends As = "div"> = Props<CompositeOverflowOptions<T>>;