@ariakit/react-core 0.3.4 → 0.3.5

package/cjs/dialog/dialog-heading.d.cts

@@ -0,0 +1,41 @@
+import type { HeadingOptions } from "../heading/heading.js";
+import type { As, Props } from "../utils/types.js";
+import type { DialogStore } from "./dialog-store.js";
+/**
+ * Returns props to create a `DialogHeading` component. This hook must be used
+ * in a component that's wrapped with `Dialog` so the `aria-labelledby` prop is
+ * properly set on the dialog element.
+ * @see https://ariakit.org/components/dialog
+ * @example
+ * ```jsx
+ * // This component must be wrapped with Dialog
+ * const props = useDialogHeading();
+ * <Role {...props}>Heading</Role>
+ * ```
+ */
+export declare const useDialogHeading: import("../utils/types.js").Hook<DialogHeadingOptions<"h1">>;
+/**
+ * Renders a heading in a dialog. This component must be wrapped with
+ * [`Dialog`](https://ariakit.org/reference/dialog) so the `aria-labelledby`
+ * prop is properly set on the dialog element.
+ * @see https://ariakit.org/components/dialog
+ * @example
+ * ```jsx {4}
+ * const [open, setOpen] = useState(false);
+ *
+ * <Dialog open={open} onClose={() => setOpen(false)}>
+ *   <DialogHeading>Heading</DialogHeading>
+ * </Dialog>
+ * ```
+ */
+export declare const DialogHeading: import("../utils/types.js").Component<DialogHeadingOptions<"h1">>;
+export interface DialogHeadingOptions<T extends As = "h1"> extends HeadingOptions<T> {
+    /**
+     * Object returned by the
+     * [`useDialogStore`](https://ariakit.org/reference/use-dialog-store) hook. If
+     * not provided, the closest [`Dialog`](https://ariakit.org/reference/dialog)
+     * component's context will be used.
+     */
+    store?: DialogStore;
+}
+export type DialogHeadingProps<T extends As = "h1"> = Props<DialogHeadingOptions<T>>;

package/cjs/dialog/dialog-heading.d.ts

@@ -15,13 +15,15 @@ import type { DialogStore } from "./dialog-store.js";
  */
 export declare const useDialogHeading: import("../utils/types.js").Hook<DialogHeadingOptions<"h1">>;
 /**
- * Renders a heading in a dialog. This component must be wrapped with `Dialog`
- * so the `aria-labelledby` prop is properly set on the dialog element.
+ * Renders a heading in a dialog. This component must be wrapped with
+ * [`Dialog`](https://ariakit.org/reference/dialog) so the `aria-labelledby`
+ * prop is properly set on the dialog element.
  * @see https://ariakit.org/components/dialog
  * @example
- * ```jsx
- * const dialog = useDialogStore();
- * <Dialog store={dialog}>
+ * ```jsx {4}
+ * const [open, setOpen] = useState(false);
+ *
+ * <Dialog open={open} onClose={() => setOpen(false)}>
  *   <DialogHeading>Heading</DialogHeading>
  * </Dialog>
  * ```
@@ -29,8 +31,10 @@ export declare const useDialogHeading: import("../utils/types.js").Hook<DialogHe
 export declare const DialogHeading: import("../utils/types.js").Component<DialogHeadingOptions<"h1">>;
 export interface DialogHeadingOptions<T extends As = "h1"> extends HeadingOptions<T> {
     /**
-     * Object returned by the `useDialogStore` hook. If not provided, the parent
-     * `Dialog` component's context will be used.
+     * Object returned by the
+     * [`useDialogStore`](https://ariakit.org/reference/use-dialog-store) hook. If
+     * not provided, the closest [`Dialog`](https://ariakit.org/reference/dialog)
+     * component's context will be used.
      */
     store?: DialogStore;
 }

package/cjs/dialog/dialog-provider.cjs

@@ -1,22 +1,23 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
 
-var _W6ZRSMO5cjs = require('../__chunks/W6ZRSMO5.cjs');
-require('../__chunks/A2NMYLCG.cjs');
-require('../__chunks/Z5PUIG6A.cjs');
 
+var _QKKT6RXXcjs = require('../__chunks/QKKT6RXX.cjs');
+require('../__chunks/SMKW5GKS.cjs');
+require('../__chunks/VKYTJKYN.cjs');
 
-var _ZZZ5MQHAcjs = require('../__chunks/ZZZ5MQHA.cjs');
-require('../__chunks/HSOKUBYY.cjs');
-require('../__chunks/EVNF7KMT.cjs');
-require('../__chunks/5WLTMVVQ.cjs');
-require('../__chunks/7WUTS26Y.cjs');
-require('../__chunks/72I2GWXF.cjs');
+
+var _QQNI2PXZcjs = require('../__chunks/QQNI2PXZ.cjs');
+require('../__chunks/4H55S5YC.cjs');
+require('../__chunks/WLJVTO7A.cjs');
+require('../__chunks/JTVNRMAC.cjs');
+require('../__chunks/LNE2FWJO.cjs');
+require('../__chunks/WYXAWBLE.cjs');
 
 // src/dialog/dialog-provider.tsx
 var _jsxruntime = require('react/jsx-runtime');
 function DialogProvider(props = {}) {
-  const store = _ZZZ5MQHAcjs.useDialogStore.call(void 0, props);
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _W6ZRSMO5cjs.DialogContextProvider, { value: store, children: props.children });
+  const store = _QQNI2PXZcjs.useDialogStore.call(void 0, props);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _QKKT6RXXcjs.DialogContextProvider, { value: store, children: props.children });
 }
 
 

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

@@ -0,0 +1,16 @@
+import type { ReactNode } from "react";
+import type { DialogStoreProps } from "./dialog-store.js";
+/**
+ * Provides a dialog store to Dialog components.
+ * @see https://ariakit.org/components/dialog
+ * @example
+ * ```jsx
+ * <DialogProvider>
+ *   <Dialog />
+ * </DialogProvider>
+ * ```
+ */
+export declare function DialogProvider(props?: DialogProviderProps): import("react/jsx-runtime").JSX.Element;
+export interface DialogProviderProps extends DialogStoreProps {
+    children?: ReactNode;
+}

package/cjs/dialog/dialog-store.cjs

@@ -1,13 +1,14 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
 
 
-var _ZZZ5MQHAcjs = require('../__chunks/ZZZ5MQHA.cjs');
-require('../__chunks/HSOKUBYY.cjs');
-require('../__chunks/EVNF7KMT.cjs');
-require('../__chunks/5WLTMVVQ.cjs');
-require('../__chunks/7WUTS26Y.cjs');
-require('../__chunks/72I2GWXF.cjs');
 
+var _QQNI2PXZcjs = require('../__chunks/QQNI2PXZ.cjs');
+require('../__chunks/4H55S5YC.cjs');
+require('../__chunks/WLJVTO7A.cjs');
+require('../__chunks/JTVNRMAC.cjs');
+require('../__chunks/LNE2FWJO.cjs');
+require('../__chunks/WYXAWBLE.cjs');
 
 
-exports.useDialogStore = _ZZZ5MQHAcjs.useDialogStore; exports.useDialogStoreProps = _ZZZ5MQHAcjs.useDialogStoreProps;
+
+exports.useDialogStore = _QQNI2PXZcjs.useDialogStore; exports.useDialogStoreProps = _QQNI2PXZcjs.useDialogStoreProps;

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

@@ -0,0 +1,23 @@
+import * as Core from "@ariakit/core/dialog/dialog-store";
+import type { DisclosureStoreFunctions, DisclosureStoreOptions, DisclosureStoreState } from "../disclosure/disclosure-store.js";
+import type { Store } from "../utils/store.js";
+export declare function useDialogStoreProps<T extends Core.DialogStore>(store: T, update: () => void, props: DialogStoreProps): T;
+/**
+ * Creates a dialog store.
+ * @see https://ariakit.org/components/dialog
+ * @example
+ * ```jsx
+ * const dialog = useDialogStore();
+ * <button onClick={dialog.toggle}>Open dialog</button>
+ * <Dialog store={dialog}>Content</Dialog>
+ * ```
+ */
+export declare function useDialogStore(props?: DialogStoreProps): DialogStore;
+export interface DialogStoreState extends Core.DialogStoreState, DisclosureStoreState {
+}
+export interface DialogStoreFunctions extends Core.DialogStoreFunctions, DisclosureStoreFunctions {
+}
+export interface DialogStoreOptions extends Core.DialogStoreOptions, DisclosureStoreOptions {
+}
+export type DialogStoreProps = DialogStoreOptions & Core.DialogStoreProps;
+export type DialogStore = DialogStoreFunctions & Store<Core.DialogStore>;

package/cjs/dialog/dialog.cjs

@@ -1,44 +1,45 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});
-
-
-
-var _QFGI3BJEcjs = require('../__chunks/QFGI3BJE.cjs');
-require('../__chunks/R7CSCUVW.cjs');
-require('../__chunks/RWS2MAR2.cjs');
-require('../__chunks/DFFFHQVQ.cjs');
-require('../__chunks/W32FX7DM.cjs');
-require('../__chunks/QK4GI6B3.cjs');
-require('../__chunks/COHI5HTS.cjs');
-require('../__chunks/F4RJLWZG.cjs');
-require('../__chunks/56NPFF7P.cjs');
-require('../__chunks/Z3TLXRS7.cjs');
-require('../__chunks/TLA46MN6.cjs');
-require('../__chunks/X2GXTE3P.cjs');
-require('../__chunks/VTRMALP6.cjs');
-require('../__chunks/BWQVQDGC.cjs');
-require('../__chunks/ELOQI33M.cjs');
-require('../__chunks/A6H7IIHJ.cjs');
-require('../__chunks/SOPRUU56.cjs');
-require('../__chunks/MNZPRWGC.cjs');
-require('../__chunks/CKEXTQ2S.cjs');
-require('../__chunks/NS56XHXG.cjs');
-require('../__chunks/CQSUIL2D.cjs');
-require('../__chunks/OAEUR56W.cjs');
-require('../__chunks/L2VQ4YLN.cjs');
-require('../__chunks/W6ZRSMO5.cjs');
-require('../__chunks/A2NMYLCG.cjs');
-require('../__chunks/GQAB4M3B.cjs');
-require('../__chunks/LHHW5ZQP.cjs');
-require('../__chunks/KSFAO77E.cjs');
-require('../__chunks/Z5PUIG6A.cjs');
-require('../__chunks/ZZZ5MQHA.cjs');
-require('../__chunks/HSOKUBYY.cjs');
-require('../__chunks/EVNF7KMT.cjs');
-require('../__chunks/5WLTMVVQ.cjs');
-require('../__chunks/7WUTS26Y.cjs');
-require('../__chunks/72I2GWXF.cjs');
-
-
-
-
-exports.Dialog = _QFGI3BJEcjs.Dialog; exports.createDialogComponent = _QFGI3BJEcjs.createDialogComponent; exports.useDialog = _QFGI3BJEcjs.useDialog;
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
+
+
+
+
+var _L5APETYYcjs = require('../__chunks/L5APETYY.cjs');
+require('../__chunks/YREZ6S36.cjs');
+require('../__chunks/D5XLZTLO.cjs');
+require('../__chunks/DJLIJTDU.cjs');
+require('../__chunks/JF225FQ5.cjs');
+require('../__chunks/VV6WA3I6.cjs');
+require('../__chunks/DEZWSLIM.cjs');
+require('../__chunks/PZL34OVO.cjs');
+require('../__chunks/6IUEXB4L.cjs');
+require('../__chunks/7YLCVXZ7.cjs');
+require('../__chunks/5GTNIPQ6.cjs');
+require('../__chunks/7TN63K2T.cjs');
+require('../__chunks/PRN5A3P4.cjs');
+require('../__chunks/V24PR4PW.cjs');
+require('../__chunks/POBIUXYK.cjs');
+require('../__chunks/G3CEEQUP.cjs');
+require('../__chunks/J3OG6T3B.cjs');
+require('../__chunks/AE6TH3T4.cjs');
+require('../__chunks/PG7QUWN4.cjs');
+require('../__chunks/CVD2AZE2.cjs');
+require('../__chunks/2BIO7R5N.cjs');
+require('../__chunks/2TEJFTKY.cjs');
+require('../__chunks/RXGXI75N.cjs');
+require('../__chunks/QKKT6RXX.cjs');
+require('../__chunks/SMKW5GKS.cjs');
+require('../__chunks/7ARL6QHN.cjs');
+require('../__chunks/75KXQZJX.cjs');
+require('../__chunks/QCAPQDE7.cjs');
+require('../__chunks/VKYTJKYN.cjs');
+require('../__chunks/QQNI2PXZ.cjs');
+require('../__chunks/4H55S5YC.cjs');
+require('../__chunks/WLJVTO7A.cjs');
+require('../__chunks/JTVNRMAC.cjs');
+require('../__chunks/LNE2FWJO.cjs');
+require('../__chunks/WYXAWBLE.cjs');
+
+
+
+
+exports.Dialog = _L5APETYYcjs.Dialog; exports.createDialogComponent = _L5APETYYcjs.createDialogComponent; exports.useDialog = _L5APETYYcjs.useDialog;

package/cjs/dialog/dialog.d.cts

@@ -0,0 +1,231 @@
+import type { ComponentPropsWithRef, ElementType, ReactElement, KeyboardEvent as ReactKeyboardEvent, RefObject, SyntheticEvent } from "react";
+import type { BooleanOrCallback } from "@ariakit/core/utils/types";
+import type { DisclosureContentOptions } from "../disclosure/disclosure-content.js";
+import type { FocusableOptions } from "../focusable/focusable.js";
+import type { PortalOptions } from "../portal/portal.js";
+import type { As, Component, Props } from "../utils/types.js";
+import type { DialogStore } from "./dialog-store.js";
+/**
+ * Returns props to create a `Dialog` component.
+ * @see https://ariakit.org/components/dialog
+ * @example
+ * ```jsx
+ * const store = useDialogStore();
+ * const props = useDialog({ store });
+ * <Role {...props}>Dialog</Role>
+ * ```
+ */
+export declare const useDialog: import("../utils/types.js").Hook<DialogOptions<"div">>;
+export declare function createDialogComponent<T extends DialogOptions>(Component: Component<T>, useProviderContext?: () => DialogStore | undefined): Component<T>;
+/**
+ * Renders a dialog element.
+ * @see https://ariakit.org/components/dialog
+ * @example
+ * ```jsx {4-6}
+ * const [open, setOpen] = useState(false);
+ *
+ * <button onClick={() => setOpen(true)}>Open dialog</button>
+ * <Dialog open={open} onClose={() => setOpen(false)}>
+ *   Dialog
+ * </Dialog>
+ * ```
+ */
+export declare const Dialog: Component<DialogOptions<"div">>;
+export interface DialogOptions<T extends As = "div"> extends FocusableOptions<T>, PortalOptions<T>, DisclosureContentOptions<T> {
+    /**
+     * Object returned by the
+     * [`useDialogStore`](https://ariakit.org/reference/use-dialog-store) hook. If
+     * not provided, the closest
+     * [`DialogProvider`](https://ariakit.org/reference/dialog-provider)
+     * component's context will be used. Otherwise, an internal store will be
+     * created.
+     */
+    store?: DialogStore;
+    /**
+     * Controls the open state of the dialog. This is similar to the
+     * [`open`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/open)
+     * attribute on native dialog elements.
+     *
+     * Live examples:
+     * - [Dialog with scrollable
+     *   backdrop](https://ariakit.org/examples/dialog-backdrop-scrollable)
+     * - [Dialog with details &
+     *   summary](https://ariakit.org/examples/dialog-details)
+     * - [Warning on Dialog
+     *   hide](https://ariakit.org/examples/dialog-hide-warning)
+     * - [Dialog with Menu](https://ariakit.org/examples/dialog-menu)
+     */
+    open?: boolean;
+    /**
+     * This is an event handler prop triggered when the dialog's `close` event is
+     * dispatched. The `close` event is similar to the native dialog
+     * [`close`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/close_event)
+     * event. The only difference is that this event can be cancelled with
+     * `event.preventDefault()`, which will prevent the dialog from hiding.
+     *
+     * It's important to note that this event only fires when the dialog store's
+     * [`open`](https://ariakit.org/reference/use-dialog-store#open) state is set
+     * to `false`. If the controlled
+     * [`open`](https://ariakit.org/reference/dialog#open) prop value changes, or
+     * if the dialog's visibility is altered in any other way (such as unmounting
+     * the dialog without adjusting the open state), this event won't be
+     * triggered.
+     *
+     * Live examples:
+     * - [Dialog with scrollable
+     *   backdrop](https://ariakit.org/examples/dialog-backdrop-scrollable)
+     * - [Dialog with details &
+     *   summary](https://ariakit.org/examples/dialog-details)
+     * - [Warning on Dialog
+     *   hide](https://ariakit.org/examples/dialog-hide-warning)
+     * - [Dialog with Menu](https://ariakit.org/examples/dialog-menu)
+     */
+    onClose?: (event: Event) => void;
+    /**
+     * Determines whether the dialog is modal. Modal dialogs have distinct states
+     * and behaviors:
+     * - The [`portal`](https://ariakit.org/reference/dialog#portal) and
+     *   [`preventBodyScroll`](https://ariakit.org/reference/dialog#preventbodyscroll)
+     *   props are set to `true`. They can still be manually set to `false`.
+     * - A visually hidden dismiss button will be rendered if the
+     *   [`DialogDismiss`](https://ariakit.org/reference/dialog-dismiss) component
+     *   hasn't been used. This allows screen reader users to close the dialog.
+     * - When the dialog is open, element tree outside it will be disabled.
+     * - When using the [`Heading`](https://ariakit.org/reference/heading) or
+     *   [`DialogHeading`](https://ariakit.org/reference/dialog-heading)
+     *   components within the dialog, their level will be reset so they start
+     *   with `h1`.
+     *
+     * Live examples:
+     * - [Dialog with details &
+     *   summary](https://ariakit.org/examples/dialog-details)
+     * - [Form with Select](https://ariakit.org/examples/form-select)
+     * - [Context menu](https://ariakit.org/examples/menu-context-menu)
+     * - [Responsive Popover](https://ariakit.org/examples/popover-responsive)
+     * @default true
+     */
+    modal?: boolean;
+    /**
+     * Determines whether there will be a backdrop behind the dialog. On modal
+     * dialogs, this is `true` by default. Besides a `boolean`, this prop can also
+     * be a React component or JSX element that will be rendered as the backdrop.
+     *
+     * **If a custom component is used, it must accept ref and spread all props to
+     * its underlying DOM element**, the same way a native element would.
+     *
+     * Live examples:
+     * - [Animated Dialog](https://ariakit.org/examples/dialog-animated)
+     * - [Dialog with scrollable
+     *   backdrop](https://ariakit.org/examples/dialog-backdrop-scrollable)
+     * - [Dialog with Framer
+     *   Motion](https://ariakit.org/examples/dialog-framer-motion)
+     * - [Dialog with Menu](https://ariakit.org/examples/dialog-menu)
+     * - [Nested Dialog](https://ariakit.org/examples/dialog-nested)
+     * - [Dialog with Next.js App
+     *   Router](https://ariakit.org/examples/dialog-next-router)
+     * @example
+     * ```jsx
+     * <Dialog backdrop={<div className="backdrop" />} />
+     * ```
+     */
+    backdrop?: boolean | ReactElement<ComponentPropsWithRef<"div">> | ElementType<ComponentPropsWithRef<"div">>;
+    /**
+     * Props that will be passed to the backdrop element if
+     * [`backdrop`](https://ariakit.org/reference/dialog#backdrop) is `true`.
+     * @deprecated Use the
+     * [`backdrop`](https://ariakit.org/reference/dialog#backdrop) prop instead.
+     */
+    backdropProps?: ComponentPropsWithRef<"div">;
+    /**
+     * Determines whether the dialog will be hidden when the user presses the
+     * Escape key.
+     * @default true
+     */
+    hideOnEscape?: BooleanOrCallback<KeyboardEvent | ReactKeyboardEvent>;
+    /**
+     * Determines whether the dialog will be hidden when the user clicks or focus
+     * on an element outside of the dialog.
+     *
+     * Live examples:
+     * - [Selection Popover](https://ariakit.org/examples/popover-selection)
+     * @default true
+     */
+    hideOnInteractOutside?: BooleanOrCallback<Event | SyntheticEvent>;
+    /**
+     * When a dialog is open, the elements outside of it will be disabled so they
+     * can't be interacted with if the dialog is modal. For non-modal dialogs,
+     * interacting with elements outside of the dialog will close it. With this
+     * function, you can return a collection of elements that will be considered
+     * part of the dialog and therefore will be excluded from this behavior.
+     *
+     * Live examples:
+     * - [Dialog with
+     *   React-Toastify](https://ariakit.org/examples/dialog-react-toastify)
+     */
+    getPersistentElements?: () => Iterable<Element>;
+    /**
+     * Determines whether the body scrolling will be prevented when the dialog is
+     * shown.
+     */
+    preventBodyScroll?: boolean;
+    /**
+     * Determines whether an element inside the dialog will receive focus when the
+     * dialog is shown. By default, this is usually the first tabbable element in
+     * the dialog or the dialog itself. The `initialFocus` prop can be used to set
+     * a different element to receive focus.
+     *
+     * Live examples:
+     * - [Warning on Dialog
+     *   hide](https://ariakit.org/examples/dialog-hide-warning)
+     * - [Sliding Menu](https://ariakit.org/examples/menu-slide)
+     * - [Selection Popover](https://ariakit.org/examples/popover-selection)
+     * @default true
+     */
+    autoFocusOnShow?: BooleanOrCallback<HTMLElement | null>;
+    /**
+     * Determines whether an element outside of the dialog will be focused when
+     * the dialog is hidden if another element hasn't been focused in the action
+     * of hiding the dialog (for example, by clicking or tabbing into another
+     * tabbable element outside of the dialog).
+     *
+     * By default, this is usually the disclosure element. The
+     * [`finalFocus`](https://ariakit.org/reference/dialog#finalfocus) prop can be
+     * used to define a different element to be focused.
+     *
+     * Live examples:
+     * - [Dialog with Next.js App
+     *   Router](https://ariakit.org/examples/dialog-next-router)
+     * - [Sliding menu](https://ariakit.org/examples/menu-slide)
+     * @default true
+     */
+    autoFocusOnHide?: BooleanOrCallback<HTMLElement | null>;
+    /**
+     * Specifies the element that will receive focus when the dialog is first
+     * opened. It can be an `HTMLElement` or a `React.RefObject` with an
+     * `HTMLElement`.
+     *
+     * If
+     * [`autoFocusOnShow`](https://ariakit.org/reference/dialog#autofocusonshow)
+     * is set to `false`, this prop will have no effect. If left unset, the dialog
+     * will attempt to determine the initial focus element in the following order:
+     * 1. A [Focusable](https://ariakit.org/components/focusable) element with an
+     *    [`autoFocus`](https://ariakit.org/reference/focusable#autofocus) prop.
+     * 2. The first tabbable element inside the dialog.
+     * 3. The first focusable element inside the dialog.
+     * 4. The dialog element itself.
+     */
+    initialFocus?: HTMLElement | RefObject<HTMLElement> | null;
+    /**
+     * Determines the element that will receive focus once the dialog is closed,
+     * provided that no other element has been focused while the dialog was being
+     * hidden (e.g., by clicking or tabbing into another tabbable element outside
+     * of the dialog).
+     * - If
+     *   [`autoFocusOnHide`](https://ariakit.org/reference/dialog#autofocusonhide)
+     *   is set to `false`, this prop will have no effect.
+     * - If left unset, the element that was focused before the dialog was opened
+     *   will be focused again.
+     */
+    finalFocus?: HTMLElement | RefObject<HTMLElement> | null;
+}
+export type DialogProps<T extends As = "div"> = Props<DialogOptions<T>>;

package/cjs/dialog/dialog.d.ts

@@ -21,10 +21,13 @@ export declare function createDialogComponent<T extends DialogOptions>(Component
  * Renders a dialog element.
  * @see https://ariakit.org/components/dialog
  * @example
- * ```jsx
- * const dialog = useDialogStore();
- * <button onClick={dialog.toggle}>Open dialog</button>
- * <Dialog store={dialog}>Dialog</Dialog>
+ * ```jsx {4-6}
+ * const [open, setOpen] = useState(false);
+ *
+ * <button onClick={() => setOpen(true)}>Open dialog</button>
+ * <Dialog open={open} onClose={() => setOpen(false)}>
+ *   Dialog
+ * </Dialog>
  * ```
  */
 export declare const Dialog: Component<DialogOptions<"div">>;
@@ -183,9 +186,16 @@ export interface DialogOptions<T extends As = "div"> extends FocusableOptions<T>
      * Determines whether an element outside of the dialog will be focused when
      * the dialog is hidden if another element hasn't been focused in the action
      * of hiding the dialog (for example, by clicking or tabbing into another
-     * tabbable element outside of the dialog). By default, this is usually the
-     * disclosure element. The `finalFocus` prop can be used to define a different
-     * element to be focused.
+     * tabbable element outside of the dialog).
+     *
+     * By default, this is usually the disclosure element. The
+     * [`finalFocus`](https://ariakit.org/reference/dialog#finalfocus) prop can be
+     * used to define a different element to be focused.
+     *
+     * Live examples:
+     * - [Dialog with Next.js App
+     *   Router](https://ariakit.org/examples/dialog-next-router)
+     * - [Sliding menu](https://ariakit.org/examples/menu-slide)
      * @default true
      */
     autoFocusOnHide?: BooleanOrCallback<HTMLElement | null>;
@@ -209,9 +219,12 @@ export interface DialogOptions<T extends As = "div"> extends FocusableOptions<T>
      * Determines the element that will receive focus once the dialog is closed,
      * provided that no other element has been focused while the dialog was being
      * hidden (e.g., by clicking or tabbing into another tabbable element outside
-     * of the dialog). However, if `autoFocusOnHide` is set to `false`, this prop
-     * will have no effect. If left unset, the element that was focused before the
-     * dialog was opened will be focused again.
+     * of the dialog).
+     * - If
+     *   [`autoFocusOnHide`](https://ariakit.org/reference/dialog#autofocusonhide)
+     *   is set to `false`, this prop will have no effect.
+     * - If left unset, the element that was focused before the dialog was opened
+     *   will be focused again.
      */
     finalFocus?: HTMLElement | RefObject<HTMLElement> | null;
 }

package/cjs/dialog/utils/disable-accessibility-tree-outside.cjs

@@ -1,12 +1,13 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
 
 
-var _F4RJLWZGcjs = require('../../__chunks/F4RJLWZG.cjs');
-require('../../__chunks/Z3TLXRS7.cjs');
-require('../../__chunks/TLA46MN6.cjs');
-require('../../__chunks/BWQVQDGC.cjs');
-require('../../__chunks/72I2GWXF.cjs');
 
+var _PZL34OVOcjs = require('../../__chunks/PZL34OVO.cjs');
+require('../../__chunks/7YLCVXZ7.cjs');
+require('../../__chunks/5GTNIPQ6.cjs');
+require('../../__chunks/V24PR4PW.cjs');
+require('../../__chunks/WYXAWBLE.cjs');
 
 
-exports.disableAccessibilityTreeOutside = _F4RJLWZGcjs.disableAccessibilityTreeOutside; exports.hideElementFromAccessibilityTree = _F4RJLWZGcjs.hideElementFromAccessibilityTree;
+
+exports.disableAccessibilityTreeOutside = _PZL34OVOcjs.disableAccessibilityTreeOutside; exports.hideElementFromAccessibilityTree = _PZL34OVOcjs.hideElementFromAccessibilityTree;

package/cjs/dialog/utils/disable-accessibility-tree-outside.d.cts

@@ -0,0 +1,4 @@
+type Elements = Array<Element | null>;
+export declare function hideElementFromAccessibilityTree(element: Element): () => void;
+export declare function disableAccessibilityTreeOutside(id: string, elements: Elements): () => void;
+export {};

package/cjs/dialog/utils/disable-tree.cjs

@@ -1,14 +1,15 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
 
 
-var _COHI5HTScjs = require('../../__chunks/COHI5HTS.cjs');
-require('../../__chunks/F4RJLWZG.cjs');
-require('../../__chunks/56NPFF7P.cjs');
-require('../../__chunks/Z3TLXRS7.cjs');
-require('../../__chunks/TLA46MN6.cjs');
-require('../../__chunks/BWQVQDGC.cjs');
-require('../../__chunks/72I2GWXF.cjs');
 
+var _DEZWSLIMcjs = require('../../__chunks/DEZWSLIM.cjs');
+require('../../__chunks/PZL34OVO.cjs');
+require('../../__chunks/6IUEXB4L.cjs');
+require('../../__chunks/7YLCVXZ7.cjs');
+require('../../__chunks/5GTNIPQ6.cjs');
+require('../../__chunks/V24PR4PW.cjs');
+require('../../__chunks/WYXAWBLE.cjs');
 
 
-exports.disableTree = _COHI5HTScjs.disableTree; exports.disableTreeOutside = _COHI5HTScjs.disableTreeOutside;
+
+exports.disableTree = _DEZWSLIMcjs.disableTree; exports.disableTreeOutside = _DEZWSLIMcjs.disableTreeOutside;

package/cjs/dialog/utils/disable-tree.d.cts

@@ -0,0 +1,5 @@
+import { noop } from "@ariakit/core/utils/misc";
+type Elements = Array<Element | null>;
+export declare function disableTree(element: Element | HTMLElement, ignoredElements?: Elements): typeof noop;
+export declare function disableTreeOutside(id: string, elements: Elements): () => void;
+export {};

package/cjs/dialog/utils/is-backdrop.cjs

@@ -1,7 +1,8 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
 
-var _Z3TLXRS7cjs = require('../../__chunks/Z3TLXRS7.cjs');
-require('../../__chunks/72I2GWXF.cjs');
 
+var _7YLCVXZ7cjs = require('../../__chunks/7YLCVXZ7.cjs');
+require('../../__chunks/WYXAWBLE.cjs');
 
-exports.isBackdrop = _Z3TLXRS7cjs.isBackdrop;
+
+exports.isBackdrop = _7YLCVXZ7cjs.isBackdrop;

package/cjs/dialog/utils/is-backdrop.d.cts

@@ -0,0 +1 @@
+export declare function isBackdrop(element?: Element | null, ...ids: Array<string | null | undefined>): boolean;