@ariakit/react-components 0.1.0

package/dist/dialog/utils/use-previous-mouse-down-ref.js

@@ -0,0 +1,22 @@
+"use client";
+import { addGlobalEventListener } from "@ariakit/utils";
+import { useEffect, useRef } from "react";
+//#region src/dialog/utils/use-previous-mouse-down-ref.ts
+function usePreviousMouseDownRef(enabled, scope) {
+	const previousMouseDownRef = useRef(null);
+	useEffect(() => {
+		if (!enabled) {
+			previousMouseDownRef.current = null;
+			return;
+		}
+		const onMouseDown = (event) => {
+			previousMouseDownRef.current = event.target;
+		};
+		return addGlobalEventListener("mousedown", onMouseDown, true, scope);
+	}, [enabled, scope]);
+	return previousMouseDownRef;
+}
+//#endregion
+export { usePreviousMouseDownRef };
+
+//# sourceMappingURL=use-previous-mouse-down-ref.js.map

package/dist/dialog/utils/use-previous-mouse-down-ref.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-previous-mouse-down-ref.js","names":[],"sources":["../../../src/dialog/utils/use-previous-mouse-down-ref.ts"],"sourcesContent":["import { addGlobalEventListener } from \"@ariakit/utils\";\nimport { useEffect, useRef } from \"react\";\n\nexport function usePreviousMouseDownRef(enabled?: boolean, scope?: Window) {\n  const previousMouseDownRef = useRef<EventTarget | null>(null);\n\n  useEffect(() => {\n    if (!enabled) {\n      previousMouseDownRef.current = null;\n      return;\n    }\n    const onMouseDown = (event: MouseEvent) => {\n      previousMouseDownRef.current = event.target;\n    };\n    return addGlobalEventListener(\"mousedown\", onMouseDown, true, scope);\n  }, [enabled, scope]);\n\n  return previousMouseDownRef;\n}\n"],"mappings":";;;;SAIQ,wBAAuB,SAA+B,OAAA;CAE5D,MAAA,uBAAgB,OAAA,IAAA;iBACA;MACZ,CAAA,SAAA;GACA,qBAAA,UAAA;GACF;EACA;QACE,eAAA,UAAqB;GACvB,qBAAA,UAAA,MAAA;EACA;EACF,OAAI,uBAAe,aAAA,aAAA,MAAA,KAAA;CAEnB,GAAA,CAAA,SAAO,KAAA,CAAA;CACT,OAAA"}

package/dist/dialog/utils/use-root-dialog.d.ts

@@ -0,0 +1,16 @@
+//#region src/dialog/utils/use-root-dialog.d.ts
+interface Props {
+  attribute: string;
+  contentId?: string;
+  contentElement?: HTMLElement | null;
+  enabled?: boolean;
+}
+declare function useRootDialog({
+  attribute,
+  contentId,
+  contentElement,
+  enabled
+}: Props): () => boolean;
+//#endregion
+export { useRootDialog };
+//# sourceMappingURL=use-root-dialog.d.ts.map

package/dist/dialog/utils/use-root-dialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-root-dialog.d.ts","names":["Props","HTMLElement","attribute","contentId","contentElement","enabled","useRootDialog"],"sources":["../../../src/dialog/utils/use-root-dialog.d.ts"],"mappings":";UAAUA,KAAAA;EACNE,SAAAA;EACAC,SAAAA;EACAC,cAAAA,GAAiBH,WAAW;EAC5BI,OAAAA;AAAAA;AAAAA,iBAEoBC,aAAAA,CAAAA;EAAgBJ,SAAAA;EAAWC,SAAAA;EAAWC,cAAAA;EAAgBC;AAAAA,GAAYL,KAAAA"}

package/dist/dialog/utils/use-root-dialog.js

@@ -0,0 +1,47 @@
+"use client";
+import { useForceUpdate } from "@ariakit/react-utils";
+import { getDocument } from "@ariakit/utils";
+import { useCallback, useEffect } from "react";
+import { flushSync } from "react-dom";
+//#region src/dialog/utils/use-root-dialog.ts
+function useRootDialog({ attribute, contentId, contentElement, enabled }) {
+	const [updated, retry] = useForceUpdate();
+	const isRootDialog = useCallback(() => {
+		if (!enabled) return false;
+		if (!contentElement) return false;
+		const { body } = getDocument(contentElement);
+		const id = body.getAttribute(attribute);
+		return !id || id === contentId;
+	}, [
+		updated,
+		enabled,
+		contentElement,
+		attribute,
+		contentId
+	]);
+	useEffect(() => {
+		if (!enabled) return;
+		if (!contentId) return;
+		if (!contentElement) return;
+		const { body } = getDocument(contentElement);
+		if (isRootDialog()) {
+			body.setAttribute(attribute, contentId);
+			return () => body.removeAttribute(attribute);
+		}
+		const observer = new MutationObserver(() => flushSync(retry));
+		observer.observe(body, { attributeFilter: [attribute] });
+		return () => observer.disconnect();
+	}, [
+		updated,
+		enabled,
+		contentId,
+		contentElement,
+		isRootDialog,
+		attribute
+	]);
+	return isRootDialog;
+}
+//#endregion
+export { useRootDialog };
+
+//# sourceMappingURL=use-root-dialog.js.map

package/dist/dialog/utils/use-root-dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-root-dialog.js","names":[],"sources":["../../../src/dialog/utils/use-root-dialog.ts"],"sourcesContent":["import { useForceUpdate } from \"@ariakit/react-utils\";\nimport { getDocument } from \"@ariakit/utils\";\nimport { useCallback, useEffect } from \"react\";\nimport { flushSync } from \"react-dom\";\n\ninterface Props {\n  attribute: string;\n  contentId?: string;\n  contentElement?: HTMLElement | null;\n  enabled?: boolean;\n}\n\nexport function useRootDialog({\n  attribute,\n  contentId,\n  contentElement,\n  enabled,\n}: Props) {\n  const [updated, retry] = useForceUpdate();\n\n  const isRootDialog = useCallback(() => {\n    if (!enabled) return false;\n    if (!contentElement) return false;\n    const { body } = getDocument(contentElement);\n    const id = body.getAttribute(attribute);\n    return !id || id === contentId;\n    // oxlint-disable-next-line exhaustive-deps\n  }, [updated, enabled, contentElement, attribute, contentId]);\n\n  useEffect(() => {\n    if (!enabled) return;\n    if (!contentId) return;\n    if (!contentElement) return;\n    const { body } = getDocument(contentElement);\n    if (isRootDialog()) {\n      body.setAttribute(attribute, contentId);\n      return () => body.removeAttribute(attribute);\n    }\n    // If the dialog is not the root, there may be another dialog that will be\n    // closed soon, which will remove the root attribute from the body. We\n    // observe this change and retry to see if this dialog is now the root.\n    const observer = new MutationObserver(() => flushSync(retry));\n    observer.observe(body, { attributeFilter: [attribute] });\n    return () => observer.disconnect();\n    // oxlint-disable-next-line exhaustive-deps\n  }, [updated, enabled, contentId, contentElement, isRootDialog, attribute]);\n\n  return isRootDialog;\n}\n"],"mappings":";;;;;;SAkBS,cAAS,EAAA,WAAS,WAAe,gBAAA,WAAA;CAExC,MAAM,CAAA,SAAA,SAAe,eAAkB;OAChC,eAAS,kBAAO;EACrB,IAAI,CAAC,SAAA,OAAgB;EACrB,IAAA,CAAA,gBAAiB,OAAA;EACjB,MAAM,EAAA,SAAU,YAAa,cAAS;EACtC,MAAA,KAAQ,KAAM,aAAO,SAAA;EAEvB,OAAG,CAAA,MAAA,OAAA;IAAC;EAAS;EAAS;EAAgB;EAAW;EAAU;CAE3D,CAAA;iBACgB;EACd,IAAI,CAAC,SAAA;EACL,IAAI,CAAC,WAAA;EACL,IAAA,CAAA,gBAAiB;EACjB,MAAI,EAAA,SAAa,YAAG,cAAA;MAClB,aAAK,GAAa;GAClB,KAAA,aAAkB,WAAA,SAAgB;GACpC,aAAA,KAAA,gBAAA,SAAA;EAIA;EACA,MAAA,WAAiB,IAAA,uBAA0B,UAAW,KAAC,CAAA;EACvD,SAAA,QAAa,MAAS,EAAA,iBAAW,CAAA,SAAA,EAAA,CAAA;EAEnC,aAAG,SAAA,WAAA;IAAC;EAAS;EAAS;EAAW;EAAgB;EAAc;EAAU;CAEzE,CAAA;CACF,OAAA"}

package/dist/dialog/utils/walk-tree-outside.d.ts

@@ -0,0 +1,8 @@
+//#region src/dialog/utils/walk-tree-outside.d.ts
+type Elements = Array<Element | null>;
+declare function isValidElement(id: string, element: Element, ignoredElements: Elements): boolean;
+declare function walkTreeOutside(id: string, elements: Elements, callback: (element: Element, originalElement: Element) => void, ancestorCallback?: (element: Element, originalElement: Element) => void): void;
+declare function createWalkTreeSnapshot(id: string, elements: Elements): () => void;
+//#endregion
+export { createWalkTreeSnapshot, isValidElement, walkTreeOutside };
+//# sourceMappingURL=walk-tree-outside.d.ts.map

package/dist/dialog/utils/walk-tree-outside.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"walk-tree-outside.d.ts","names":["Elements","Element","Array","isValidElement","id","element","ignoredElements","walkTreeOutside","elements","originalElement","callback","ancestorCallback","createWalkTreeSnapshot"],"sources":["../../../src/dialog/utils/walk-tree-outside.d.ts"],"mappings":";KAAKA,QAAAA,GAAWE,KAAK,CAACD,OAAAA;AAAAA,iBACEE,cAAAA,CAAeC,EAAAA,UAAYC,OAAAA,EAASJ,OAAAA,EAASK,eAAAA,EAAiBN,QAAQ;AAAA,iBACtEO,eAAAA,CAAgBH,EAAAA,UAAYI,QAAAA,EAAUR,QAAAA,EAAUU,QAAAA,GAAWL,OAAAA,EAASJ,OAAAA,EAASQ,eAAAA,EAAiBR,OAAAA,WAAkBU,gBAAAA,IAAoBN,OAAAA,EAASJ,OAAAA,EAASQ,eAAAA,EAAiBR,OAAAA;AAAAA,iBACvKW,sBAAAA,CAAuBR,EAAAA,UAAYI,QAAAA,EAAUR,QAAQ"}

package/dist/dialog/utils/walk-tree-outside.js

@@ -0,0 +1,58 @@
+"use client";
+import { setProperty } from "./orchestrate.js";
+import { chain, contains, getDocument } from "@ariakit/utils";
+//#region src/dialog/utils/walk-tree-outside.ts
+const ignoreTags = ["SCRIPT", "STYLE"];
+function getSnapshotPropertyName(id) {
+	return `__ariakit-dialog-snapshot-${id}`;
+}
+function inSnapshot(id, element) {
+	const doc = getDocument(element);
+	const propertyName = getSnapshotPropertyName(id);
+	if (!doc.body[propertyName]) return true;
+	do {
+		if (element === doc.body) return false;
+		if (element[propertyName]) return true;
+		if (!element.parentElement) return false;
+		element = element.parentElement;
+	} while (true);
+}
+function isValidElement(id, element, ignoredElements) {
+	if (ignoreTags.includes(element.tagName)) return false;
+	if (!inSnapshot(id, element)) return false;
+	return !ignoredElements.some((enabledElement) => enabledElement && contains(element, enabledElement));
+}
+function walkTreeOutside(id, elements, callback, ancestorCallback) {
+	for (let element of elements) {
+		if (!element?.isConnected) continue;
+		const hasAncestorAlready = elements.some((maybeAncestor) => {
+			if (!maybeAncestor) return false;
+			if (maybeAncestor === element) return false;
+			return maybeAncestor.contains(element);
+		});
+		const doc = getDocument(element);
+		const originalElement = element;
+		while (element.parentElement && element !== doc.body) {
+			ancestorCallback?.(element.parentElement, originalElement);
+			if (!hasAncestorAlready) {
+				for (const child of element.parentElement.children) if (isValidElement(id, child, elements)) callback(child, originalElement);
+			}
+			element = element.parentElement;
+		}
+	}
+}
+function createWalkTreeSnapshot(id, elements) {
+	const { body } = getDocument(elements[0]);
+	const cleanups = [];
+	const markElement = (element) => {
+		cleanups.push(setProperty(element, getSnapshotPropertyName(id), true));
+	};
+	walkTreeOutside(id, elements, markElement);
+	return chain(setProperty(body, getSnapshotPropertyName(id), true), () => {
+		for (const cleanup of cleanups) cleanup();
+	});
+}
+//#endregion
+export { createWalkTreeSnapshot, isValidElement, walkTreeOutside };
+
+//# sourceMappingURL=walk-tree-outside.js.map

package/dist/dialog/utils/walk-tree-outside.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"walk-tree-outside.js","names":[],"sources":["../../../src/dialog/utils/walk-tree-outside.ts"],"sourcesContent":["import { contains, getDocument, chain } from \"@ariakit/utils\";\nimport { setProperty } from \"./orchestrate.ts\";\n\ntype Elements = Array<Element | null>;\n\n// We don't need to walk through certain tags.\nconst ignoreTags = [\"SCRIPT\", \"STYLE\"];\n\nfunction getSnapshotPropertyName(id: string) {\n  return `__ariakit-dialog-snapshot-${id}` as keyof Element;\n}\n\nfunction inSnapshot(id: string, element: Element) {\n  const doc = getDocument(element);\n  const propertyName = getSnapshotPropertyName(id);\n  if (!doc.body[propertyName]) return true;\n  do {\n    if (element === doc.body) return false;\n    if (element[propertyName]) return true;\n    if (!element.parentElement) return false;\n    element = element.parentElement;\n    // oxlint-disable-next-line no-constant-condition\n  } while (true);\n}\n\nexport function isValidElement(\n  id: string,\n  element: Element,\n  ignoredElements: Elements,\n) {\n  if (ignoreTags.includes(element.tagName)) return false;\n  if (!inSnapshot(id, element)) return false;\n  return !ignoredElements.some(\n    (enabledElement) => enabledElement && contains(element, enabledElement),\n  );\n}\n\nexport function walkTreeOutside(\n  id: string,\n  elements: Elements,\n  callback: (element: Element, originalElement: Element) => void,\n  ancestorCallback?: (element: Element, originalElement: Element) => void,\n) {\n  for (let element of elements) {\n    if (!element?.isConnected) continue;\n    // If the element has already an ancestor element in the list, we skip it.\n    const hasAncestorAlready = elements.some((maybeAncestor) => {\n      if (!maybeAncestor) return false;\n      if (maybeAncestor === element) return false;\n      return maybeAncestor.contains(element);\n    });\n    const doc = getDocument(element);\n    const originalElement = element;\n    // Loops through the parent elements and then through each of their\n    // children.\n    while (element.parentElement && element !== doc.body) {\n      ancestorCallback?.(element.parentElement, originalElement);\n      if (!hasAncestorAlready) {\n        for (const child of element.parentElement.children) {\n          if (isValidElement(id, child, elements)) {\n            callback(child, originalElement);\n          }\n        }\n      }\n      element = element.parentElement;\n    }\n  }\n}\n\nexport function createWalkTreeSnapshot(id: string, elements: Elements) {\n  const { body } = getDocument(elements[0]);\n  const cleanups: Array<() => void> = [];\n\n  const markElement = (element: Element) => {\n    cleanups.push(setProperty(element, getSnapshotPropertyName(id), true));\n  };\n\n  walkTreeOutside(id, elements, markElement);\n\n  return chain(setProperty(body, getSnapshotPropertyName(id), true), () => {\n    for (const cleanup of cleanups) {\n      cleanup();\n    }\n  });\n}\n"],"mappings":";;;;AAQA,MAAA,aAAS,CAAA,UAAA,OAAoC;SACpC,wBAAA,IAA6B;CACtC,OAAA,6BAAA;AAEA;SACQ,WAAM,IAAA,SAAmB;CAC/B,MAAM,MAAA,YAAe,OAAA;CACrB,MAAK,eAAS,wBAAsB,EAAA;CACpC,IAAG,CAAA,IAAA,KAAA,eAAA,OAAA;IACD;EACA,IAAI,YAAQ,IAAA,MAAA,OAAe;EAC3B,IAAI,QAAC,eAAQ,OAAe;EAC5B,IAAA,CAAA,QAAU,eAAQ,OAAA;EAEpB,UAAS,QAAA;CACX,SAAA;AAEA;SAKM,eAAW,IAAS,SAAQ,iBAAiB;CACjD,IAAI,WAAC,SAAe,QAAU,OAAO,GAAA,OAAA;CACrC,IAAA,CAAA,WAAQ,IAAA,OAAgB,GACrB,OAAA;CAEL,OAAA,CAAA,gBAAA,MAAA,mBAAA,kBAAA,SAAA,SAAA,cAAA,CAAA;AAEA;SAMO,gBAAe,IAAA,UAAU,UAAA,kBAAA;MACxB,IAAC,WAAS,UAAa;EAE3B,IAAA,CAAA,SAAM,aAAqB;QACpB,qBAAe,SAAO,MAAA,kBAAA;GAC3B,IAAI,CAAA,eAAA,OAAkB;GACtB,IAAA,kBAAqB,SAAS,OAAO;GACtC,OAAA,cAAA,SAAA,OAAA;EACD,CAAA;EACA,MAAM,MAAA,YAAkB,OAAA;EAGxB,MAAA,kBAAe;SACb,QAAA,iBAA2B,YAAe,IAAA,MAAA;GAC1C,mBAAK,QACH,eAAA,eAAA;4BAIA;SAAA,MAAA,SAAA,QAAA,cAAA,UAAA,IAAA,eAAA,IAAA,OAAA,QAAA,GAAA,SAAA,OAAA,eAAA;GAAA;GAGJ,UAAA,QAAA;EACF;CACF;AAEA;SACU,uBAAqB,IAAA,UAAW;CACxC,MAAM,EAAA,SAA8B,YAAC,SAAA,EAAA;CAErC,MAAM,WAAA,CAAA;OACJ,eAAc,YAAY;EAC5B,SAAA,KAAA,YAAA,SAAA,wBAAA,EAAA,GAAA,IAAA,CAAA;CAEA;CAEA,gBAAa,IAAA,UAAY,WAAM;QACxB,MAAM,YAAW,MAAA,wBACZ,EAAA,GAAA,IAAA,SAAA;EAEX,KAAA,MAAA,WAAA,UAAA,QAAA;CACH,CAAA"}

package/dist/dialog-C__C-zX2.d.ts

@@ -0,0 +1,267 @@
+import { n as FocusableOptions } from "./focusable-B00tOxtB.js";
+import { t as DialogStore } from "./dialog-store-Cjt12T_Y.js";
+import { n as DisclosureContentOptions } from "./disclosure-content-BbPkZgAc.js";
+import { n as PortalOptions } from "./portal-CMBWiayp.js";
+import { Props } from "@ariakit/react-utils";
+import { ComponentPropsWithRef, ElementType, FC, KeyboardEvent as KeyboardEvent$1, ReactElement, RefObject, SyntheticEvent } from "react";
+import { BooleanOrCallback } from "@ariakit/utils";
+
+//#region src/dialog/dialog.d.ts
+declare const TagName = "div";
+type TagName = typeof TagName;
+/**
+ * Returns props to create a `Dialog` component.
+ * @see https://ariakit.com/components/dialog
+ * @example
+ * ```jsx
+ * const store = useDialogStore();
+ * const props = useDialog({ store });
+ * <Role {...props}>Dialog</Role>
+ * ```
+ */
+declare const useDialog: import("@ariakit/react-utils").Hook<"div", DialogOptions<"div">>;
+declare function createDialogComponent<T extends DialogOptions>(Component: FC<T>, useProviderContext?: () => DialogStore | undefined): (props: T) => import("react/jsx-runtime").JSX.Element | null;
+/**
+ * Renders a dialog similar to the native `dialog` element that's rendered in a
+ * [`portal`](https://ariakit.com/reference/dialog#portal) by default.
+ *
+ * The dialog can be either
+ * [`modal`](https://ariakit.com/reference/dialog#modal) or non-modal. The
+ * visibility state can be controlled with the
+ * [`open`](https://ariakit.com/reference/dialog#open) and
+ * [`onClose`](https://ariakit.com/reference/dialog#onclose) props.
+ * @see https://ariakit.com/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>
+ * ```
+ */
+declare const Dialog: (props: DialogProps<"div">) => import("react/jsx-runtime").JSX.Element | null;
+interface DialogOptions<T extends ElementType = TagName> extends FocusableOptions<T>, PortalOptions<T>, DisclosureContentOptions<T> {
+  /**
+   * Object returned by the
+   * [`useDialogStore`](https://ariakit.com/reference/use-dialog-store) hook. If
+   * not provided, the closest
+   * [`DialogProvider`](https://ariakit.com/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.com/examples/dialog-backdrop-scrollable)
+   * - [Dialog with details &
+   *   summary](https://ariakit.com/examples/dialog-details)
+   * - [Warning on Dialog
+   *   hide](https://ariakit.com/examples/dialog-hide-warning)
+   * - [Dialog with Menu](https://ariakit.com/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 canceled 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.com/reference/use-dialog-store#open) state is set
+   * to `false`. If the controlled
+   * [`open`](https://ariakit.com/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.com/examples/dialog-backdrop-scrollable)
+   * - [Dialog with details &
+   *   summary](https://ariakit.com/examples/dialog-details)
+   * - [Warning on Dialog
+   *   hide](https://ariakit.com/examples/dialog-hide-warning)
+   * - [Dialog with Menu](https://ariakit.com/examples/dialog-menu)
+   */
+  onClose?: (event: Event) => void;
+  /**
+   * Determines whether the dialog is modal. Modal dialogs have distinct states
+   * and behaviors:
+   * - The [`portal`](https://ariakit.com/reference/dialog#portal) and
+   *   [`preventBodyScroll`](https://ariakit.com/reference/dialog#preventbodyscroll)
+   *   props are set to `true`. They can still be manually set to `false`.
+   * - When using the [`Heading`](https://ariakit.com/reference/heading) or
+   *   [`DialogHeading`](https://ariakit.com/reference/dialog-heading)
+   *   components within the dialog, their level will be reset so they start
+   *   with `h1`.
+   * - A visually hidden dismiss button will be rendered if the
+   *   [`DialogDismiss`](https://ariakit.com/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 inert.
+   *
+   * Live examples:
+   * - [Combobox with Tabs](https://ariakit.com/examples/combobox-tabs)
+   * - [Dialog with details &
+   *   summary](https://ariakit.com/examples/dialog-details)
+   * - [Form with Select](https://ariakit.com/examples/form-select)
+   * - [Context menu](https://ariakit.com/examples/menu-context-menu)
+   * - [Responsive Popover](https://ariakit.com/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.
+   *
+   * **Note**: If a custom component is used, it must [accept ref and spread all
+   * props to its underlying DOM
+   * element](https://ariakit.com/guide/composition#custom-components-must-be-open-for-extension),
+   * the same way a native element would.
+   *
+   * Live examples:
+   * - [Animated Dialog](https://ariakit.com/examples/dialog-animated)
+   * - [Dialog with scrollable
+   *   backdrop](https://ariakit.com/examples/dialog-backdrop-scrollable)
+   * - [Dialog with
+   *   Motion](https://ariakit.com/examples/dialog-framer-motion)
+   * - [Dialog with Menu](https://ariakit.com/examples/dialog-menu)
+   * - [Nested Dialog](https://ariakit.com/examples/dialog-nested)
+   * - [Dialog with Next.js App
+   *   Router](https://ariakit.com/examples/dialog-next-router)
+   * @example
+   * ```jsx
+   * <Dialog backdrop={<div className="backdrop" />} />
+   * ```
+   */
+  backdrop?: boolean | ReactElement<ComponentPropsWithRef<"div">> | ElementType<ComponentPropsWithRef<"div">>;
+  /**
+   * Determines if the dialog will hide when the user presses the Escape key.
+   *
+   * This prop can be either a boolean or a function that accepts an event as an
+   * argument and returns a boolean. The event object represents the keydown
+   * event that initiated the hide action, which could be either a native
+   * keyboard event or a React synthetic event.
+   *
+   * **Note**: When placing Ariakit dialogs inside third-party dialogs, using
+   * `event.stopPropagation()` within this function will stop the event from
+   * reaching the third-party dialog, closing only the Ariakit dialog.
+   * @default true
+   */
+  hideOnEscape?: BooleanOrCallback<KeyboardEvent | KeyboardEvent$1>;
+  /**
+   * Determines if the dialog should hide when the user clicks or focuses on an
+   * element outside the dialog.
+   *
+   * This prop can be either a boolean or a function that takes an event as an
+   * argument and returns a boolean. The event object represents the event that
+   * triggered the action, which could be a native event or a React synthetic
+   * event of various types.
+   *
+   * Live examples:
+   * - [Selection Popover](https://ariakit.com/examples/popover-selection)
+   * @default true
+   */
+  hideOnInteractOutside?: BooleanOrCallback<Event | SyntheticEvent>;
+  /**
+   * When a dialog is open, the elements outside of it are disabled to prevent
+   * interaction if the dialog is
+   * [`modal`](https://ariakit.com/reference/dialog#modal). For non-modal
+   * dialogs, interacting with elements outside the dialog prompts it to close.
+   *
+   * This function allows you to return an iterable collection of elements that
+   * will be considered as part of the dialog, thus excluding them from this
+   * behavior.
+   *
+   * **Note**: The elements returned by this function must exist in the DOM when
+   * the dialog opens.
+   *
+   * Live examples:
+   * - [Dialog with
+   *   React-Toastify](https://ariakit.com/examples/dialog-react-toastify)
+   */
+  getPersistentElements?: () => Iterable<Element>;
+  /**
+   * Determines whether the body scrolling will be prevented when the dialog is
+   * shown. This is automatically set to `true` when the dialog is
+   * [`modal`](https://ariakit.com/reference/dialog#modal). You can disable this
+   * prop if you want to implement your own logic.
+   */
+  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`](https://ariakit.com/reference/dialog#initialfocus) prop
+   * can be used to set a different element to receive focus.
+   *
+   * Live examples:
+   * - [Warning on Dialog
+   *   hide](https://ariakit.com/examples/dialog-hide-warning)
+   * - [Sliding Menu](https://ariakit.com/examples/menu-slide)
+   * - [Selection Popover](https://ariakit.com/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.com/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.com/examples/dialog-next-router)
+   * - [Sliding menu](https://ariakit.com/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.com/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.com/components/focusable) element with an
+   *    [`autoFocus`](https://ariakit.com/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> | 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.com/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> | null;
+  /**
+   * @private
+   */
+  unstable_treeSnapshotKey?: string | number | boolean | null;
+}
+type DialogProps<T extends ElementType = TagName> = Props<T, DialogOptions<T>>;
+//#endregion
+export { useDialog as a, createDialogComponent as i, DialogOptions as n, DialogProps as r, Dialog as t };
+//# sourceMappingURL=dialog-C__C-zX2.d.ts.map

package/dist/dialog-C__C-zX2.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog-C__C-zX2.d.ts","names":["Props","BooleanOrCallback","ComponentPropsWithRef","ElementType","FC","ReactElement","KeyboardEvent","ReactKeyboardEvent","RefObject","SyntheticEvent","DisclosureContentOptions","FocusableOptions","PortalOptions","DialogStore","TagName","useDialog","DialogOptions","Hook","createDialogComponent","T","Component","useProviderContext","props","JSX","Element","Dialog","DialogProps","Event","Iterable","HTMLElement","store","open","onClose","event","modal","backdrop","hideOnEscape","hideOnInteractOutside","getPersistentElements","preventBodyScroll","autoFocusOnShow","autoFocusOnHide","initialFocus","finalFocus","unstable_treeSnapshotKey"],"sources":["../src/dialog/dialog.d.ts"],"mappings":";;;;;;;;;cAOcc,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAFwB;;;;AAChC;AAAA;;;;AACQ;AAFwB,cAahCC,SAAAA,iCAA0CE,IAAAA,QAAYD,aAAa;AAAA,iBAChEE,qBAAAA,WAAgCF,aAAAA,CAAAA,CAAeI,SAAAA,EAAWhB,EAAAA,CAAGe,CAAAA,GAAIE,kBAAAA,SAA2BR,WAAAA,gBAA2BS,KAAAA,EAAOH,CAAAA,iCAAkCI,GAAAA,CAAIC,OAAAA;;;AADpG;AACxF;;;;;;;;;;;;;;;;;cAqBqBC,MAAAA,GAASH,KAAAA,EAAOI,WAAW,wCAAwCH,GAAAA,CAAIC,OAAAA;AAAAA,UAC3ER,aAAAA,WAAwBb,WAAAA,GAAcW,OAAAA,UAAiBH,gBAAAA,CAAiBQ,CAAAA,GAAIP,aAAAA,CAAcO,CAAAA,GAAIT,wBAAAA,CAAyBS,CAAAA;EAtBgDI;;;AAAW;AAqBnM;;;;EAUIO,KAAAA,GAAQjB,WAAAA;EAVkBS;;;;AAAqE;AACnG;;;;;;;;;EAwBIS,IAAAA;EA4EkC7B;;;;;;;;;;;;;;;;;;;;;;;;EAnDlC8B,OAAAA,IAAWC,KAAAA,EAAON,KAAAA;EAjDiH;;;;;;;;;;;;;;;;;;;;;;;;EA0EnIO,KAAAA;EAwCiC5B;;;;;;;;;;;;;;;;;;;;;;;;;EAdjC6B,QAAAA,aAAqB9B,YAAAA,CAAaH,qBAAAA,WAAgCC,WAAAA,CAAYD,qBAAAA;EAqHtD;AAE5B;;;;;;;;;;;;EAzGIkC,YAAAA,GAAenC,iBAAAA,CAAkBK,aAAAA,GAAgBC,eAAAA;EAyGLO;;;;;;AAAmC;;;;;;;EA3F/EuB,qBAAAA,GAAwBpC,iBAAAA,CAAkB0B,KAAAA,GAAQlB,cAAAA;;;;;;;;;;;;;;;;;;EAkBlD6B,qBAAAA,SAA8BV,QAAAA,CAASJ,OAAAA;;;;;;;EAOvCe,iBAAAA;;;;;;;;;;;;;;;EAeAC,eAAAA,GAAkBvC,iBAAAA,CAAkB4B,WAAAA;;;;;;;;;;;;;;;;;EAiBpCY,eAAAA,GAAkBxC,iBAAAA,CAAkB4B,WAAAA;;;;;;;;;;;;;;;;EAgBpCa,YAAAA,GAAeb,WAAAA,GAAcrB,SAAAA,CAAUqB,WAAAA;;;;;;;;;;;;EAYvCc,UAAAA,GAAad,WAAAA,GAAcrB,SAAAA,CAAUqB,WAAAA;;;;EAIrCe,wBAAAA;AAAAA;AAAAA,KAEQlB,WAAAA,WAAsBvB,WAAAA,GAAcW,OAAAA,IAAWd,KAAAA,CAAMmB,CAAAA,EAAGH,aAAAA,CAAcG,CAAAA"}

package/dist/dialog-description-BCZJ1Kyd.d.ts

@@ -0,0 +1,48 @@
+import { t as DialogStore } from "./dialog-store-Cjt12T_Y.js";
+import { Options, Props } from "@ariakit/react-utils";
+import { ElementType } from "react";
+
+//#region src/dialog/dialog-description.d.ts
+declare const TagName = "p";
+type TagName = typeof TagName;
+/**
+ * Returns props to create a `DialogDescription` component. This hook must be
+ * used in a component that's wrapped with `Dialog` so the `aria-describedby`
+ * prop is properly set on the dialog element.
+ * @see https://ariakit.com/components/dialog
+ * @example
+ * ```jsx
+ * // This component must be wrapped with Dialog
+ * const props = useDialogDescription();
+ * <Role {...props}>Description</Role>
+ * ```
+ */
+declare const useDialogDescription: import("@ariakit/react-utils").Hook<"p", DialogDescriptionOptions<"p">>;
+/**
+ * Renders a description in a dialog. This component must be wrapped with
+ * [`Dialog`](https://ariakit.com/reference/dialog) so the `aria-describedby`
+ * prop is properly set on the dialog element.
+ * @see https://ariakit.com/components/dialog
+ * @example
+ * ```jsx {4}
+ * const [open, setOpen] = useState(false);
+ *
+ * <Dialog open={open} onClose={() => setOpen(false)}>
+ *   <DialogDescription>Description</DialogDescription>
+ * </Dialog>
+ * ```
+ */
+declare const DialogDescription: (props: DialogDescriptionProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+interface DialogDescriptionOptions<_T extends ElementType = TagName> extends Options {
+  /**
+   * Object returned by the
+   * [`useDialogStore`](https://ariakit.com/reference/use-dialog-store) hook. If
+   * not provided, the closest [`Dialog`](https://ariakit.com/reference/dialog)
+   * component's context will be used.
+   */
+  store?: DialogStore;
+}
+type DialogDescriptionProps<T extends ElementType = TagName> = Props<T, DialogDescriptionOptions<T>>;
+//#endregion
+export { useDialogDescription as i, DialogDescriptionOptions as n, DialogDescriptionProps as r, DialogDescription as t };
+//# sourceMappingURL=dialog-description-BCZJ1Kyd.d.ts.map

package/dist/dialog-description-BCZJ1Kyd.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog-description-BCZJ1Kyd.d.ts","names":["Options","Props","ElementType","DialogStore","TagName","useDialogDescription","DialogDescriptionOptions","Hook","DialogDescription","DialogDescriptionProps","props","ReactElement","JSXElementConstructor","_T","store","T"],"sources":["../src/dialog/dialog-description.d.ts"],"mappings":";;;;;cAGcI,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAFwB;;;;AAChC;AAAA;;;;AACQ;AAa7B;;AAfqD,cAehCC,oBAAAA,iCAAqDE,IAAAA,MAAUD,wBAAwB;;AAAA;AAe5G;;;;;;;;;AAA2J;AAC3J;;cADqBE,iBAAAA,GAAoBE,KAAAA,EAAOD,sBAAsB,qBAAqBE,YAAAA,+BAA2CC,qBAAAA;AAAAA,UACrHN,wBAAAA,YAAoCJ,WAAAA,GAAcE,OAAAA,UAAiBJ,OAAAA;EAAjBI;;;;;;EAO/DU,KAAAA,GAAQX,WAAAA;AAAAA;AAAAA,KAEAM,sBAAAA,WAAiCP,WAAAA,GAAcE,OAAAA,IAAWH,KAAAA,CAAMc,CAAAA,EAAGT,wBAAAA,CAAyBS,CAAAA"}

package/dist/dialog-disclosure-DLD10zlb.d.ts

@@ -0,0 +1,47 @@
+import { t as DialogStore } from "./dialog-store-Cjt12T_Y.js";
+import { n as DisclosureOptions } from "./disclosure-CQ37hPVP.js";
+import { Props } from "@ariakit/react-utils";
+import { ElementType } from "react";
+
+//#region src/dialog/dialog-disclosure.d.ts
+declare const TagName = "button";
+type TagName = typeof TagName;
+/**
+ * Returns props to create a `DialogDisclosure` component.
+ * @see https://ariakit.com/components/dialog
+ * @example
+ * ```jsx
+ * const store = useDialogStore();
+ * const props = useDialogDisclosure({ store });
+ * <Role {...props}>Disclosure</Role>
+ * <Dialog store={store}>Content</Dialog>
+ * ```
+ */
+declare const useDialogDisclosure: import("@ariakit/react-utils").Hook<"button", DialogDisclosureOptions<"button">>;
+/**
+ * Renders a button that toggles the visibility of a
+ * [`Dialog`](https://ariakit.com/reference/dialog) component when clicked.
+ * @see https://ariakit.com/components/dialog
+ * @example
+ * ```jsx {2}
+ * <DialogProvider>
+ *   <DialogDisclosure>Disclosure</DialogDisclosure>
+ *   <Dialog>Content</Dialog>
+ * </DialogProvider>
+ * ```
+ */
+declare const DialogDisclosure: (props: DialogDisclosureProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+interface DialogDisclosureOptions<T extends ElementType = TagName> extends DisclosureOptions<T> {
+  /**
+   * Object returned by the
+   * [`useDialogStore`](https://ariakit.com/reference/use-dialog-store) hook. If
+   * not provided, the closest
+   * [`DialogProvider`](https://ariakit.com/reference/dialog-provider)
+   * component's context will be used.
+   */
+  store?: DialogStore;
+}
+type DialogDisclosureProps<T extends ElementType = TagName> = Props<T, DialogDisclosureOptions<T>>;
+//#endregion
+export { useDialogDisclosure as i, DialogDisclosureOptions as n, DialogDisclosureProps as r, DialogDisclosure as t };
+//# sourceMappingURL=dialog-disclosure-DLD10zlb.d.ts.map

package/dist/dialog-disclosure-DLD10zlb.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog-disclosure-DLD10zlb.d.ts","names":["Props","ElementType","DisclosureOptions","DialogStore","TagName","useDialogDisclosure","DialogDisclosureOptions","Hook","DialogDisclosure","DialogDisclosureProps","props","ReactElement","JSXElementConstructor","T","store"],"sources":["../src/dialog/dialog-disclosure.d.ts"],"mappings":";;;;;;cAIcI,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAFwB;;;;AAChC;AAAA;;;;AACQ;AAY7B;AAdqD,cAchCC,mBAAAA,iCAAoDE,IAAAA,WAAeD,uBAAuB;;;AAAA;AAa/G;;;;;;;;;cAAqBE,gBAAAA,GAAmBE,KAAAA,EAAOD,qBAAqB,qBAAqBE,YAAAA,+BAA2CC,qBAAAA;AAAAA,UACnHN,uBAAAA,WAAkCL,WAAAA,GAAcG,OAAAA,UAAiBF,iBAAAA,CAAkBW,CAAAA;EAA5D;;;;;;;EAQpCC,KAAAA,GAAQX,WAAAA;AAAAA;AAAAA,KAEAM,qBAAAA,WAAgCR,WAAAA,GAAcG,OAAAA,IAAWJ,KAAAA,CAAMa,CAAAA,EAAGP,uBAAAA,CAAwBO,CAAAA"}

package/dist/dialog-dismiss-CnwEbzc6.d.ts

@@ -0,0 +1,48 @@
+import { n as ButtonOptions } from "./button-Cp853csH.js";
+import { t as DialogStore } from "./dialog-store-Cjt12T_Y.js";
+import { Props } from "@ariakit/react-utils";
+import { ElementType } from "react";
+
+//#region src/dialog/dialog-dismiss.d.ts
+declare const TagName = "button";
+type TagName = typeof TagName;
+/**
+ * Returns props to create a `DialogDismiss` component.
+ * @see https://ariakit.com/components/dialog
+ * @example
+ * ```jsx
+ * const store = useDialogStore();
+ * const props = useDialogDismiss({ store });
+ * <Dialog store={store}>
+ *   <Role {...props} />
+ * </Dialog>
+ * ```
+ */
+declare const useDialogDismiss: import("@ariakit/react-utils").Hook<"button", DialogDismissOptions<"button">>;
+/**
+ * Renders a button that hides a
+ * [`Dialog`](https://ariakit.com/reference/dialog) when clicked.
+ * @see https://ariakit.com/components/dialog
+ * @example
+ * ```jsx {4}
+ * const [open, setOpen] = useState(false);
+ *
+ * <Dialog open={open} onClose={() => setOpen(false)}>
+ *   <DialogDismiss />
+ * </Dialog>
+ * ```
+ */
+declare const DialogDismiss: (props: DialogDismissProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+interface DialogDismissOptions<T extends ElementType = TagName> extends ButtonOptions<T> {
+  /**
+   * Object returned by the
+   * [`useDialogStore`](https://ariakit.com/reference/use-dialog-store) hook. If
+   * not provided, the closest [`Dialog`](https://ariakit.com/reference/dialog)
+   * component's context will be used.
+   */
+  store?: DialogStore;
+}
+type DialogDismissProps<T extends ElementType = TagName> = Props<T, DialogDismissOptions<T>>;
+//#endregion
+export { useDialogDismiss as i, DialogDismissOptions as n, DialogDismissProps as r, DialogDismiss as t };
+//# sourceMappingURL=dialog-dismiss-CnwEbzc6.d.ts.map

package/dist/dialog-dismiss-CnwEbzc6.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog-dismiss-CnwEbzc6.d.ts","names":["Props","ElementType","ButtonOptions","DialogStore","TagName","useDialogDismiss","DialogDismissOptions","Hook","DialogDismiss","DialogDismissProps","props","ReactElement","JSXElementConstructor","T","store"],"sources":["../src/dialog/dialog-dismiss.d.ts"],"mappings":";;;;;;cAIcI,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAFwB;;;;AAChC;AAAA;;;;AACQ;AAa7B;;AAfqD,cAehCC,gBAAAA,iCAAiDE,IAAAA,WAAeD,oBAAoB;;AAAA;AAczG;;;;;;;;;AAAmJ;AACnJ;cADqBE,aAAAA,GAAgBE,KAAAA,EAAOD,kBAAkB,qBAAqBE,YAAAA,+BAA2CC,qBAAAA;AAAAA,UAC7GN,oBAAAA,WAA+BL,WAAAA,GAAcG,OAAAA,UAAiBF,aAAAA,CAAcW,CAAAA;EAA7CZ;;;;;;EAO5Ca,KAAAA,GAAQX,WAAAA;AAAAA;AAAAA,KAEAM,kBAAAA,WAA6BR,WAAAA,GAAcG,OAAAA,IAAWJ,KAAAA,CAAMa,CAAAA,EAAGP,oBAAAA,CAAqBO,CAAAA"}