@ariakit/react-components 0.1.0

package/dist/menubar/menubar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menubar.js","names":[],"sources":["../../src/menubar/menubar.tsx"],"sourcesContent":["import { useStoreState } from \"@ariakit/react-store\";\nimport {\n  useWrapElement,\n  createElement,\n  createHook,\n  forwardRef,\n} from \"@ariakit/react-utils\";\nimport type { Props } from \"@ariakit/react-utils\";\nimport type { ElementType } from \"react\";\nimport type { CompositeOptions } from \"../composite/composite.tsx\";\nimport { useComposite } from \"../composite/composite.tsx\";\nimport {\n  MenubarScopedContextProvider,\n  useMenubarProviderContext,\n} from \"./menubar-context.tsx\";\nimport type { MenubarStore, MenubarStoreProps } from \"./menubar-store.ts\";\nimport { useMenubarStore } from \"./menubar-store.ts\";\n\nconst TagName = \"div\" satisfies ElementType;\ntype TagName = typeof TagName;\n\n/**\n * Returns props to create a `Menubar` component.\n * @see https://ariakit.com/components/menubar\n * @example\n * ```jsx\n * const store = useMenubarStore();\n * const menubarProps = useMenubar({ store });\n * const fileProps = useMenuItem({ store });\n * const fileMenu = useMenuStore();\n * <Role {...menubarProps}>\n *   <MenuButton {...fileProps} store={fileMenu}>\n *     File\n *   </MenuButton>\n *   <Menu store={fileMenu}>\n *     <MenuItem>New File</MenuItem>\n *     <MenuItem>New Window</MenuItem>\n *   </Menu>\n * </Role>\n * ```\n */\nexport const useMenubar = createHook<TagName, MenubarOptions>(\n  function useMenubar({\n    store: storeProp,\n    composite = true,\n    orientation: orientationProp,\n    virtualFocus,\n    focusLoop,\n    rtl,\n    ...props\n  }) {\n    const context = useMenubarProviderContext();\n    storeProp = storeProp || context;\n\n    const store = useMenubarStore({\n      store: storeProp,\n      orientation: orientationProp,\n      virtualFocus,\n      focusLoop,\n      rtl,\n    });\n\n    const orientation = useStoreState(store, (state) =>\n      !composite || state.orientation === \"both\"\n        ? undefined\n        : state.orientation,\n    );\n\n    props = useWrapElement(\n      props,\n      (element) => (\n        <MenubarScopedContextProvider value={store}>\n          {element}\n        </MenubarScopedContextProvider>\n      ),\n      [store],\n    );\n\n    if (composite) {\n      props = {\n        role: \"menubar\",\n        \"aria-orientation\": orientation,\n        ...props,\n      };\n    }\n\n    props = useComposite({ store, composite, ...props });\n\n    return props;\n  },\n);\n\n/**\n * Renders a menubar that may contain a group of\n * [`MenuItem`](https://ariakit.com/reference/menu-item) elements that control\n * other submenus.\n * @see https://ariakit.com/components/menubar\n * @example\n * ```jsx\n * <Menubar>\n *   <MenuProvider>\n *     <MenuItem render={<MenuButton />}>File</MenuItem>\n *     <Menu>\n *       <MenuItem>New File</MenuItem>\n *       <MenuItem>New Window</MenuItem>\n *     </Menu>\n *   </MenuProvider>\n *   <MenuProvider>\n *     <MenuItem render={<MenuButton />}>Edit</MenuItem>\n *     <Menu>\n *       <MenuItem>Undo</MenuItem>\n *       <MenuItem>Redo</MenuItem>\n *     </Menu>\n *   </MenuProvider>\n * </Menubar>\n * ```\n */\nexport const Menubar = forwardRef(function Menubar(props: MenubarProps) {\n  const htmlProps = useMenubar(props);\n  return createElement(TagName, htmlProps);\n});\n\nexport interface MenubarOptions<T extends ElementType = TagName>\n  extends\n    CompositeOptions<T>,\n    Pick<\n      MenubarStoreProps,\n      \"focusLoop\" | \"orientation\" | \"rtl\" | \"virtualFocus\"\n    > {\n  /**\n   * Object returned by the\n   * [`useMenubarStore`](https://ariakit.com/reference/use-menubar-store) hook.\n   * If not provided, the closest\n   * [`MenubarProvider`](https://ariakit.com/reference/menubar-provider)\n   * component context will be used. If the component is not wrapped in a\n   * [`MenubarProvider`](https://ariakit.com/reference/menubar-provider)\n   * component, an internal store will be used.\n   */\n  store?: MenubarStore;\n}\n\nexport type MenubarProps<T extends ElementType = TagName> = Props<\n  T,\n  MenubarOptions<T>\n>;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAmDI,aAAgB,WAAA,SAAA,WAA0B,EAAA,OAAA,WAAA,YAAA,MAAA,aAAA,iBAAA,cAAA,WAAA,KAAA,GAAA,SAAA;CAC1C,MAAA,UAAY,0BAAa;CAEzB,YAAM,aAAQ;OACZ,QAAO,gBAAA;EACP,OAAA;EACA,aAAA;EACA;EACA;EACD;CAED,CAAA;CAMA,MAAA,cAAQ,cAEL,QAAA,UACC,CAAA,aAAC,MAAA,gBAAA,SAAD,KAAA,IAAA,MAAA,WAAA;SAAqC,eAAA,QAAA,YAAA,oBAAA,8BAAA;;EAEP,UAGlC;CAEA,CAAA,GAAI,CAAA,KAAA,CAAA;KAEA,WAAM,QAAA;EACN,MAAA;EACA,oBAAG;EACL,GAAA;CAGF;SAAuB,aAAA;EAAO;EAAW;EAAU,GAAA;CAEnD,CAAA;CAEJ,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;MA6BE,UAAO,WAAc,SADH,QAAW,OACU;CACxC,OAAA,cAAA,SAAA,WAAA,KAAA,CAAA"}

package/dist/menubar-store-3h0eNIbS.d.ts

@@ -0,0 +1,26 @@
+import { i as CompositeStoreOptions, n as CompositeStoreFunctions, o as CompositeStoreState } from "./composite-store-DyJc-XRA.js";
+import { Store } from "@ariakit/react-store";
+import * as Core from "@ariakit/components/menubar/menubar-store";
+
+//#region src/menubar/menubar-store.d.ts
+declare function useMenubarStoreProps<T extends Core.MenubarStore>(store: T, update: () => void, props: MenubarStoreProps): T;
+/**
+ * Creates a menubar store to control the state of
+ * [Menubar](https://ariakit.com/components/menubar) components.
+ * @see https://ariakit.com/components/menubar
+ * @example
+ * ```jsx
+ * const menu = useMenubarStore();
+ *
+ * <Menubar store={menu} />
+ * ```
+ */
+declare function useMenubarStore(props?: MenubarStoreProps): MenubarStore;
+interface MenubarStoreState extends Core.MenubarStoreState, CompositeStoreState {}
+interface MenubarStoreFunctions extends Core.MenubarStoreFunctions, CompositeStoreFunctions {}
+interface MenubarStoreOptions extends Core.MenubarStoreOptions, CompositeStoreOptions {}
+interface MenubarStoreProps extends MenubarStoreOptions, Core.MenubarStoreProps {}
+interface MenubarStore extends MenubarStoreFunctions, Store<Core.MenubarStore> {}
+//#endregion
+export { MenubarStoreState as a, MenubarStoreProps as i, MenubarStoreFunctions as n, useMenubarStore as o, MenubarStoreOptions as r, useMenubarStoreProps as s, MenubarStore as t };
+//# sourceMappingURL=menubar-store-3h0eNIbS.d.ts.map

package/dist/menubar-store-3h0eNIbS.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menubar-store-3h0eNIbS.d.ts","names":["Core","Store","CompositeStoreFunctions","CompositeStoreOptions","CompositeStoreState","useMenubarStoreProps","T","MenubarStore","MenubarStoreProps","store","update","props","useMenubarStore","MenubarStoreState","MenubarStoreFunctions","MenubarStoreOptions"],"sources":["../src/menubar/menubar-store.d.ts"],"mappings":";;;;;iBAGwBK,oBAAAA,WAA+BL,IAAAA,CAAKO,YAAAA,CAAAA,CAAcE,KAAAA,EAAOH,CAAAA,EAAGI,MAAAA,cAAoBC,KAAAA,EAAOH,iBAAAA,GAAoBF,CAAAA;;AAAnI;;;;;;;;;;iBAYwBM,eAAAA,CAAgBD,KAAAA,GAAQH,iBAAAA,GAAoBD,YAAY;AAAA,UAC/DM,iBAAAA,SAA0Bb,IAAAA,CAAKa,iBAAAA,EAAmBT,mBAAmB;AAAA,UAErEU,qBAAAA,SAA8Bd,IAAAA,CAAKc,qBAAAA,EAAuBZ,uBAAuB;AAAA,UAEjFa,mBAAAA,SAA4Bf,IAAAA,CAAKe,mBAAAA,EAAqBZ,qBAAqB;AAAA,UAE3EK,iBAAAA,SAA0BO,mBAAAA,EAAqBf,IAAAA,CAAKQ,iBAAiB;AAAA,UAErED,YAAAA,SAAqBO,qBAAAA,EAAuBb,KAAAA,CAAMD,IAAAA,CAAKO,YAAAA"}

package/dist/popover/popover-anchor.d.ts

@@ -0,0 +1,2 @@
+import { i as usePopoverAnchor, n as PopoverAnchorOptions, r as PopoverAnchorProps, t as PopoverAnchor } from "../popover-anchor-PgfeXyzs.js";
+export { PopoverAnchor, PopoverAnchorOptions, PopoverAnchorProps, usePopoverAnchor };

package/dist/popover/popover-anchor.js

@@ -0,0 +1,45 @@
+"use client";
+import { usePopoverProviderContext } from "./popover-context.js";
+import { createElement, createHook, forwardRef, useMergeRefs } from "@ariakit/react-utils";
+//#region src/popover/popover-anchor.tsx
+const TagName = "div";
+/**
+* Returns props to create a `PopoverAnchor` component.
+* @see https://ariakit.com/components/popover
+* @example
+* ```jsx
+* const store = usePopoverStore();
+* const props = usePopoverAnchor({ store });
+* <Role {...props}>Anchor</Role>
+* <Popover store={store}>Popover</Popover>
+* ```
+*/
+const usePopoverAnchor = createHook(function usePopoverAnchor({ store, ...props }) {
+	const context = usePopoverProviderContext();
+	store = store || context;
+	props = {
+		...props,
+		ref: useMergeRefs(store?.setAnchorElement, props.ref)
+	};
+	return props;
+});
+/**
+* Renders an element that acts as the anchor for the popover. The
+* [`Popover`](https://ariakit.com/reference/popover) component will be
+* positioned in relation to this element.
+* @see https://ariakit.com/components/popover
+* @example
+* ```jsx {2}
+* <PopoverProvider>
+*   <PopoverAnchor>Anchor</PopoverAnchor>
+*   <Popover>Popover</Popover>
+* </PopoverProvider>
+* ```
+*/
+const PopoverAnchor = forwardRef(function PopoverAnchor(props) {
+	return createElement(TagName, usePopoverAnchor(props));
+});
+//#endregion
+export { PopoverAnchor, usePopoverAnchor };
+
+//# sourceMappingURL=popover-anchor.js.map

package/dist/popover/popover-anchor.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover-anchor.js","names":[],"sources":["../../src/popover/popover-anchor.tsx"],"sourcesContent":["import {\n  useMergeRefs,\n  createElement,\n  createHook,\n  forwardRef,\n} from \"@ariakit/react-utils\";\nimport type { Options, Props } from \"@ariakit/react-utils\";\nimport type { ElementType } from \"react\";\nimport { usePopoverProviderContext } from \"./popover-context.tsx\";\nimport type { PopoverStore } from \"./popover-store.ts\";\n\nconst TagName = \"div\" satisfies ElementType;\ntype TagName = typeof TagName;\n\n/**\n * Returns props to create a `PopoverAnchor` component.\n * @see https://ariakit.com/components/popover\n * @example\n * ```jsx\n * const store = usePopoverStore();\n * const props = usePopoverAnchor({ store });\n * <Role {...props}>Anchor</Role>\n * <Popover store={store}>Popover</Popover>\n * ```\n */\nexport const usePopoverAnchor = createHook<TagName, PopoverAnchorOptions>(\n  function usePopoverAnchor({ store, ...props }) {\n    const context = usePopoverProviderContext();\n    store = store || context;\n    props = {\n      ...props,\n      ref: useMergeRefs(store?.setAnchorElement, props.ref),\n    };\n    return props;\n  },\n);\n\n/**\n * Renders an element that acts as the anchor for the popover. The\n * [`Popover`](https://ariakit.com/reference/popover) component will be\n * positioned in relation to this element.\n * @see https://ariakit.com/components/popover\n * @example\n * ```jsx {2}\n * <PopoverProvider>\n *   <PopoverAnchor>Anchor</PopoverAnchor>\n *   <Popover>Popover</Popover>\n * </PopoverProvider>\n * ```\n */\nexport const PopoverAnchor = forwardRef(function PopoverAnchor(\n  props: PopoverAnchorProps,\n) {\n  const htmlProps = usePopoverAnchor(props);\n  return createElement(TagName, htmlProps);\n});\n\nexport interface PopoverAnchorOptions<\n  _T extends ElementType = TagName,\n> extends Options {\n  /**\n   * Object returned by the\n   * [`usePopoverStore`](https://ariakit.com/reference/use-popover-store) hook.\n   * If not provided, the closest\n   * [`PopoverProvider`](https://ariakit.com/reference/popover-provider)\n   * component's context will be used.\n   */\n  store?: PopoverStore;\n}\n\nexport type PopoverAnchorProps<T extends ElementType = TagName> = Props<\n  T,\n  PopoverAnchorOptions<T>\n>;\n"],"mappings":";;;;;;;;;;;;;;;;MA2BI,mBAAgB,WAAA,SAA0B,iBAAA,EAAA,OAAA,GAAA,SAAA;CAC1C,MAAA,UAAQ,0BAAS;CACjB,QAAQ,SAAA;SACH;EACH,GAAA;EACF,KAAA,aAAA,OAAA,kBAAA,MAAA,GAAA;CACA;CAEJ,OAAA;;;;;;;;;;;;;;;MAmBE,gBAAqB,WADH,SAAA,cACqB,OAAA;CACxC,OAAA,cAAA,SAAA,iBAAA,KAAA,CAAA"}

package/dist/popover/popover-arrow-path.d.ts

@@ -0,0 +1,5 @@
+//#region src/popover/popover-arrow-path.d.ts
+declare const POPOVER_ARROW_PATH = "M23 27.8C24.1 29 26.4 30 28 30H30H0H2C3.7 30 5.9 29 7 27.8L14 20.6C14.7 19.8 15.3 19.8 16 20.6L23 27.8Z";
+//#endregion
+export { POPOVER_ARROW_PATH };
+//# sourceMappingURL=popover-arrow-path.d.ts.map

package/dist/popover/popover-arrow-path.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover-arrow-path.d.ts","names":["POPOVER_ARROW_PATH"],"sources":["../../src/popover/popover-arrow-path.d.ts"],"mappings":";cAAqBA,kBAAAA"}

package/dist/popover/popover-arrow-path.js

@@ -0,0 +1,7 @@
+"use client";
+//#region src/popover/popover-arrow-path.ts
+const POPOVER_ARROW_PATH = "M23 27.8C24.1 29 26.4 30 28 30H30H0H2C3.7 30 5.9 29 7 27.8L14 20.6C14.7 19.8 15.3 19.8 16 20.6L23 27.8Z";
+//#endregion
+export { POPOVER_ARROW_PATH };
+
+//# sourceMappingURL=popover-arrow-path.js.map

package/dist/popover/popover-arrow-path.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover-arrow-path.js","names":[],"sources":["../../src/popover/popover-arrow-path.ts"],"sourcesContent":["/*\n * Copyright 2017 Palantir Technologies, Inc. All rights reserved.\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *     http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n * Modifications Copyright 2019 - present by Diego Haz.\n *\n * Extracted the SVG path and made the tip more angled.\n */\nexport const POPOVER_ARROW_PATH =\n  \"M23 27.8C24.1 29 26.4 30 28 30H30H0H2C3.7 30 5.9 29 7 27.8L14 20.6C14.7 19.8 15.3 19.8 16 20.6L23 27.8Z\";\n"],"mappings":""}

package/dist/popover/popover-arrow.d.ts

@@ -0,0 +1,65 @@
+import { t as PopoverStore } from "../popover-store-Bc-l5VVO.js";
+import { Options, Props } from "@ariakit/react-utils";
+import { ElementType } from "react";
+
+//#region src/popover/popover-arrow.d.ts
+declare const TagName = "div";
+type TagName = typeof TagName;
+/**
+ * Returns props to create a `PopoverArrow` component.
+ * @see https://ariakit.com/components/popover
+ * @example
+ * ```jsx
+ * const store = usePopoverStore();
+ * const props = usePopoverArrow({ store });
+ * <Popover store={store}>
+ *   <Role {...props} />
+ *   Popover
+ * </Popover>
+ * ```
+ */
+declare const usePopoverArrow: import("@ariakit/react-utils").Hook<"div", PopoverArrowOptions<"div">>;
+/**
+ * Renders an arrow inside a [`Popover`](https://ariakit.com/reference/popover)
+ * component pointing to the anchor element.
+ * @see https://ariakit.com/components/popover
+ * @example
+ * ```jsx {4}
+ * <PopoverProvider>
+ *   <PopoverAnchor />
+ *   <Popover>
+ *     <PopoverArrow />
+ *     Popover
+ *   </Popover>
+ * </PopoverProvider>
+ * ```
+ */
+declare const PopoverArrow: (props: PopoverArrowProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+interface PopoverArrowOptions<_T extends ElementType = TagName> extends Options {
+  /**
+   * Object returned by the
+   * [`usePopoverStore`](https://ariakit.com/reference/use-popover-store) hook.
+   * If not provided, the closest
+   * [`Popover`](https://ariakit.com/reference/popover) or
+   * [`PopoverProvider`](https://ariakit.com/reference/popover-provider)
+   * components' context will be used.
+   */
+  store?: PopoverStore;
+  /**
+   * The size of the arrow.
+   *
+   * Live examples:
+   * - [Selection Popover](https://ariakit.com/examples/popover-selection)
+   * @default 30
+   */
+  size?: number;
+  /**
+   * The arrow's border width. If not specified, Ariakit will infer it from the
+   * popover `contentElement`'s style.
+   */
+  borderWidth?: number;
+}
+type PopoverArrowProps<T extends ElementType = TagName> = Props<T, PopoverArrowOptions<T>>;
+//#endregion
+export { PopoverArrow, PopoverArrowOptions, PopoverArrowProps, usePopoverArrow };
+//# sourceMappingURL=popover-arrow.d.ts.map

package/dist/popover/popover-arrow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover-arrow.d.ts","names":["Options","Props","ElementType","PopoverStore","TagName","usePopoverArrow","PopoverArrowOptions","Hook","PopoverArrow","PopoverArrowProps","props","ReactElement","JSXElementConstructor","_T","store","size","borderWidth","T"],"sources":["../../src/popover/popover-arrow.d.ts"],"mappings":";;;;;cAGcI,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAF0B;;;;AAClC;AAAA;;;;AACQ;AAc7B;;;AAhBuD,cAgBlCC,eAAAA,iCAAgDE,IAAAA,QAAYD,mBAAmB;AAAA;AAgBpG;;;;;;;;;AAAiJ;AACjJ;;;;AAjBoG,cAgB/EE,YAAAA,GAAeE,KAAAA,EAAOD,iBAAiB,qBAAqBE,YAAAA,+BAA2CC,qBAAAA;AAAAA,UAC3GN,mBAAAA,YAA+BJ,WAAAA,GAAcE,OAAAA,UAAiBJ,OAAAA;EAAAA;;;;;;;;EAS3Ec,KAAAA,GAAQX,YAAAA;EAQRY;;;AAKW;AAEf;;;EAPIA,IAAAA;EAOkDX;;;;EAFlDY,WAAAA;AAAAA;AAAAA,KAEQP,iBAAAA,WAA4BP,WAAAA,GAAcE,OAAAA,IAAWH,KAAAA,CAAMgB,CAAAA,EAAGX,mBAAAA,CAAoBW,CAAAA"}

package/dist/popover/popover-arrow.js

@@ -0,0 +1,160 @@
+"use client";
+import { usePopoverContext } from "./popover-context.js";
+import { POPOVER_ARROW_PATH } from "./popover-arrow-path.js";
+import { createElement, createHook, forwardRef, memo, useId, useMergeRefs, useSafeLayoutEffect } from "@ariakit/react-utils";
+import { getWindow, invariant, removeUndefinedValues } from "@ariakit/utils";
+import { useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useStoreState } from "@ariakit/react-store";
+//#region src/popover/popover-arrow.tsx
+const TagName = "div";
+const defaultSize = 30;
+const halfDefaultSize = defaultSize / 2;
+const rotateMap = {
+	top: `rotate(180 ${halfDefaultSize} ${halfDefaultSize})`,
+	right: `rotate(-90 ${halfDefaultSize} ${halfDefaultSize})`,
+	bottom: `rotate(0 ${halfDefaultSize} ${halfDefaultSize})`,
+	left: `rotate(90 ${halfDefaultSize} ${halfDefaultSize})`
+};
+function useComputedStyle(store) {
+	const [style, setStyle] = useState();
+	const contentElement = useStoreState(store, "contentElement");
+	useSafeLayoutEffect(() => {
+		if (!contentElement) return;
+		setStyle(getWindow(contentElement).getComputedStyle(contentElement));
+	}, [contentElement]);
+	return style;
+}
+function getRingWidth(style) {
+	if (!style) return;
+	return style.getPropertyValue("box-shadow").match(/0px 0px 0px ([^0]+px)/)?.[1];
+}
+function getBorderColor(dir, style) {
+	if (!style) return;
+	const borderColor = style.getPropertyValue(`border-${dir}-color`);
+	if (borderColor) return borderColor;
+	const match = style.getPropertyValue("box-shadow").match(/0px 0px 0px [^,]+/);
+	if (!match) return;
+	return match[0].replace(/^0px 0px 0px\s+[^\s,]+/, "").trim() || void 0;
+}
+/**
+* Returns props to create a `PopoverArrow` component.
+* @see https://ariakit.com/components/popover
+* @example
+* ```jsx
+* const store = usePopoverStore();
+* const props = usePopoverArrow({ store });
+* <Popover store={store}>
+*   <Role {...props} />
+*   Popover
+* </Popover>
+* ```
+*/
+const usePopoverArrow = createHook(function usePopoverArrow({ store, size = defaultSize, borderWidth: borderWidthProp, ...props }) {
+	const context = usePopoverContext();
+	store = store || context;
+	invariant(store, "PopoverArrow must be wrapped in a Popover component.");
+	const dir = useStoreState(store, (state) => state.currentPlacement.split("-")[0]);
+	const maskId = useId();
+	const style = useComputedStyle(store);
+	const stroke = getBorderColor(dir, style) || "none";
+	const fill = style?.getPropertyValue("background-color") || "none";
+	const [borderWidth, isRing] = useMemo(() => {
+		if (borderWidthProp != null) return [borderWidthProp, false];
+		if (!style) return [0, false];
+		const ringWidth = getRingWidth(style);
+		if (ringWidth) return [Number.parseInt(ringWidth, 10), true];
+		const borderWidth = style.getPropertyValue(`border-${dir}-width`);
+		if (borderWidth) {
+			const parsed = Number.parseFloat(borderWidth);
+			if (!Number.isNaN(parsed)) return [Math.ceil(parsed), false];
+		}
+		return [0, false];
+	}, [
+		borderWidthProp,
+		style,
+		dir
+	]);
+	const strokeWidth = borderWidth * 2 * (defaultSize / size);
+	const transform = rotateMap[dir];
+	props = {
+		children: useMemo(() => /* @__PURE__ */ jsx("svg", {
+			display: "block",
+			viewBox: "0 0 30 30",
+			children: /* @__PURE__ */ jsxs("g", {
+				transform,
+				children: [
+					!isRing && /* @__PURE__ */ jsx("path", {
+						fill: "none",
+						stroke: `var(--ak-layer, ${fill})`,
+						d: "M23 27.8C24.1 29 26.4 30 28 30H30H0H2C3.7 30 5.9 29 7 27.8L14 20.6C14.7 19.8 15.3 19.8 16 20.6L23 27.8Z",
+						mask: `url(#${maskId})`
+					}),
+					/* @__PURE__ */ jsx("path", {
+						fill: "none",
+						d: POPOVER_ARROW_PATH,
+						mask: `url(#${maskId})`
+					}),
+					/* @__PURE__ */ jsx("path", {
+						stroke: "none",
+						d: POPOVER_ARROW_PATH
+					}),
+					/* @__PURE__ */ jsx("mask", {
+						id: maskId,
+						maskUnits: "userSpaceOnUse",
+						children: /* @__PURE__ */ jsx("rect", {
+							x: "-15",
+							y: "0",
+							width: "60",
+							height: "30",
+							fill: "white",
+							stroke: "black"
+						})
+					})
+				]
+			})
+		}), [
+			transform,
+			isRing,
+			fill,
+			maskId
+		]),
+		"aria-hidden": true,
+		...props,
+		ref: useMergeRefs(store.setArrowElement, props.ref),
+		style: {
+			position: "absolute",
+			fontSize: size,
+			width: "1em",
+			height: "1em",
+			pointerEvents: "none",
+			fill: `var(--ak-layer, ${fill})`,
+			stroke: `var(--ak-layer-border, ${stroke})`,
+			strokeWidth,
+			...props.style
+		}
+	};
+	return removeUndefinedValues(props);
+});
+/**
+* Renders an arrow inside a [`Popover`](https://ariakit.com/reference/popover)
+* component pointing to the anchor element.
+* @see https://ariakit.com/components/popover
+* @example
+* ```jsx {4}
+* <PopoverProvider>
+*   <PopoverAnchor />
+*   <Popover>
+*     <PopoverArrow />
+*     Popover
+*   </Popover>
+* </PopoverProvider>
+* ```
+*/
+const PopoverArrow = memo(forwardRef(function PopoverArrow(props) {
+	return createElement(TagName, usePopoverArrow(props));
+}));
+//#endregion
+export { PopoverArrow, usePopoverArrow };
+
+//# sourceMappingURL=popover-arrow.js.map

package/dist/popover/popover-arrow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover-arrow.js","names":[],"sources":["../../src/popover/popover-arrow.tsx"],"sourcesContent":["import { useStoreState } from \"@ariakit/react-store\";\nimport {\n  useId,\n  useMergeRefs,\n  useSafeLayoutEffect,\n  createElement,\n  createHook,\n  forwardRef,\n  memo,\n} from \"@ariakit/react-utils\";\nimport type { Options, Props } from \"@ariakit/react-utils\";\nimport { getWindow, invariant, removeUndefinedValues } from \"@ariakit/utils\";\nimport type { ElementType } from \"react\";\nimport { useMemo, useState } from \"react\";\nimport { POPOVER_ARROW_PATH } from \"./popover-arrow-path.ts\";\nimport { usePopoverContext } from \"./popover-context.tsx\";\nimport type { PopoverStore } from \"./popover-store.ts\";\n\nconst TagName = \"div\" satisfies ElementType;\ntype TagName = typeof TagName;\ntype BasePlacement = \"top\" | \"bottom\" | \"left\" | \"right\";\n\nconst defaultSize = 30;\nconst halfDefaultSize = defaultSize / 2;\n\nconst rotateMap = {\n  top: `rotate(180 ${halfDefaultSize} ${halfDefaultSize})`,\n  right: `rotate(-90 ${halfDefaultSize} ${halfDefaultSize})`,\n  bottom: `rotate(0 ${halfDefaultSize} ${halfDefaultSize})`,\n  left: `rotate(90 ${halfDefaultSize} ${halfDefaultSize})`,\n};\n\nfunction useComputedStyle(store: PopoverStore) {\n  const [style, setStyle] = useState<CSSStyleDeclaration>();\n  const contentElement = useStoreState(store, \"contentElement\");\n  useSafeLayoutEffect(() => {\n    if (!contentElement) return;\n    const win = getWindow(contentElement);\n    const computedStyle = win.getComputedStyle(contentElement);\n    setStyle(computedStyle);\n  }, [contentElement]);\n  return style;\n}\n\nfunction getRingWidth(style?: CSSStyleDeclaration) {\n  if (!style) return;\n  const boxShadow = style.getPropertyValue(\"box-shadow\");\n  const ringWidth = boxShadow.match(/0px 0px 0px ([^0]+px)/)?.[1];\n  return ringWidth;\n}\n\nfunction getBorderColor(dir: BasePlacement, style?: CSSStyleDeclaration) {\n  if (!style) return;\n  const borderColor = style.getPropertyValue(`border-${dir}-color`);\n  if (borderColor) return borderColor;\n  const boxShadow = style.getPropertyValue(\"box-shadow\");\n  const match = boxShadow.match(/0px 0px 0px [^,]+/);\n  if (!match) return;\n  const segment = match[0];\n  const ringColor = segment.replace(/^0px 0px 0px\\s+[^\\s,]+/, \"\").trim();\n  return ringColor || undefined;\n}\n\n/**\n * Returns props to create a `PopoverArrow` component.\n * @see https://ariakit.com/components/popover\n * @example\n * ```jsx\n * const store = usePopoverStore();\n * const props = usePopoverArrow({ store });\n * <Popover store={store}>\n *   <Role {...props} />\n *   Popover\n * </Popover>\n * ```\n */\nexport const usePopoverArrow = createHook<TagName, PopoverArrowOptions>(\n  function usePopoverArrow({\n    store,\n    size = defaultSize,\n    borderWidth: borderWidthProp,\n    ...props\n  }) {\n    const context = usePopoverContext();\n    store = store || context;\n\n    invariant(\n      store,\n      process.env.NODE_ENV !== \"production\" &&\n        \"PopoverArrow must be wrapped in a Popover component.\",\n    );\n\n    const dir = useStoreState(\n      store,\n      (state) => state.currentPlacement.split(\"-\")[0] as BasePlacement,\n    );\n\n    const maskId = useId();\n    const style = useComputedStyle(store);\n    const stroke = getBorderColor(dir, style) || \"none\";\n    const fill = style?.getPropertyValue(\"background-color\") || \"none\";\n\n    const [borderWidth, isRing] = useMemo(() => {\n      if (borderWidthProp != null) return [borderWidthProp, false];\n      if (!style) return [0, false];\n      const ringWidth = getRingWidth(style);\n      if (ringWidth) return [Number.parseInt(ringWidth, 10), true];\n      const borderWidth = style.getPropertyValue(`border-${dir}-width`);\n      if (borderWidth) {\n        const parsed = Number.parseFloat(borderWidth);\n        if (!Number.isNaN(parsed)) {\n          return [Math.ceil(parsed), false];\n        }\n      }\n      return [0, false];\n    }, [borderWidthProp, style, dir]);\n\n    const strokeWidth = borderWidth * 2 * (defaultSize / size);\n    const transform = rotateMap[dir];\n\n    const children = useMemo(\n      () => (\n        <svg display=\"block\" viewBox=\"0 0 30 30\">\n          <g transform={transform}>\n            {!isRing && (\n              // When using the CSS border property, set the fill color to match\n              // the background behind the stroke so transparent strokes match\n              // the appearance of borders on HTML elements.\n              <path\n                fill=\"none\"\n                stroke={`var(--ak-layer, ${fill})`}\n                d={POPOVER_ARROW_PATH}\n                mask={`url(#${maskId})`}\n              />\n            )}\n            <path fill=\"none\" d={POPOVER_ARROW_PATH} mask={`url(#${maskId})`} />\n            <path stroke=\"none\" d={POPOVER_ARROW_PATH} />\n            <mask id={maskId} maskUnits=\"userSpaceOnUse\">\n              <rect\n                x=\"-15\"\n                y=\"0\"\n                width=\"60\"\n                height=\"30\"\n                fill=\"white\"\n                stroke=\"black\"\n              />\n            </mask>\n          </g>\n        </svg>\n      ),\n      [transform, isRing, fill, maskId],\n    );\n\n    props = {\n      children,\n      \"aria-hidden\": true,\n      ...props,\n      ref: useMergeRefs(store.setArrowElement, props.ref),\n      style: {\n        position: \"absolute\",\n        fontSize: size,\n        width: \"1em\",\n        height: \"1em\",\n        pointerEvents: \"none\",\n        fill: `var(--ak-layer, ${fill})`,\n        stroke: `var(--ak-layer-border, ${stroke})`,\n        strokeWidth,\n        ...props.style,\n      },\n    };\n\n    return removeUndefinedValues(props);\n  },\n);\n\n/**\n * Renders an arrow inside a [`Popover`](https://ariakit.com/reference/popover)\n * component pointing to the anchor element.\n * @see https://ariakit.com/components/popover\n * @example\n * ```jsx {4}\n * <PopoverProvider>\n *   <PopoverAnchor />\n *   <Popover>\n *     <PopoverArrow />\n *     Popover\n *   </Popover>\n * </PopoverProvider>\n * ```\n */\nexport const PopoverArrow = memo(\n  forwardRef(function PopoverArrow(props: PopoverArrowProps) {\n    const htmlProps = usePopoverArrow(props);\n    return createElement(TagName, htmlProps);\n  }),\n);\n\nexport interface PopoverArrowOptions<\n  _T extends ElementType = TagName,\n> extends Options {\n  /**\n   * Object returned by the\n   * [`usePopoverStore`](https://ariakit.com/reference/use-popover-store) hook.\n   * If not provided, the closest\n   * [`Popover`](https://ariakit.com/reference/popover) or\n   * [`PopoverProvider`](https://ariakit.com/reference/popover-provider)\n   * components' context will be used.\n   */\n  store?: PopoverStore;\n  /**\n   * The size of the arrow.\n   *\n   * Live examples:\n   * - [Selection Popover](https://ariakit.com/examples/popover-selection)\n   * @default 30\n   */\n  size?: number;\n  /**\n   * The arrow's border width. If not specified, Ariakit will infer it from the\n   * popover `contentElement`'s style.\n   */\n  borderWidth?: number;\n}\n\nexport type PopoverArrowProps<T extends ElementType = TagName> = Props<\n  T,\n  PopoverArrowOptions<T>\n>;\n"],"mappings":";;;;;;;;;AAsBA,MAAM,UAAA;AACN,MAAM,cAAA;AAEN,MAAM,kBAAY,cAAA;MACX,YAAA;CACL,KAAA,cAAO,gBAAc,GAAgB,gBAAG;CACxC,OAAA,cAAoB,gBAAgB,GAAG,gBAAgB;CACvD,QAAM,YAAa,gBAAgB,GAAG,gBAAgB;CACxD,MAAA,aAAA,gBAAA,GAAA,gBAAA;AAEA;SACS,iBAAO,OAAY;CAC1B,MAAM,CAAA,OAAA,YAAiB,SAAA;CACvB,MAAA,iBAAA,cAA0B,OAAA,gBAAA;2BACH;EAGrB,IAAA,CAAA,gBAFsB;EAGxB,SAAI,UAAe,cAAA,EAAA,iBAAA,cAAA,CAAA;CACnB,GAAA,CAAA,cAAO,CAAA;CACT,OAAA;AAEA;SACO,aAAO,OAAA;CAGZ,IAAA,CAAA,OAFkB;CAGpB,OAAA,MAAA,iBAAA,YAAA,EAAA,MAAA,uBAAA,IAAA;AAEA;SACO,eAAO,KAAA,OAAA;CACZ,IAAA,CAAA,OAAM;CACN,MAAI,cAAa,MAAO,iBAAA,UAAA,IAAA,OAAA;CAExB,IAAA,aADkB,OAAM;CAExB,MAAK,QAAO,MAAA,iBAAA,YAAA,EAAA,MAAA,mBAAA;CAGZ,IAAA,CAAA,OAFgB;CAGlB,OAAA,MAAA,GAAA,QAAA,0BAAA,EAAA,EAAA,KAAA,KAAA,KAAA;;;;;;;;;;;;;;;MAsBI,kBAAgB,WAAkB,SAAA,gBAAA,EAAA,OAAA,OAAA,aAAA,aAAA,iBAAA,GAAA,SAAA;CAClC,MAAA,UAAQ,kBAAS;CAEjB,QAAA,SAGI;CAGJ,UAAM,OAAM,sDAEwB;CAGpC,MAAM,MAAA,cAAe,QAAA,UAAA,MAAA,iBAAA,MAAA,GAAA,EAAA,EAAA;CACrB,MAAM,SAAQ,MAAA;CACd,MAAM,QAAA,iBAAwB,KAAK;CACnC,MAAM,SAAO,eAAO,KAAA,KAAiB,KAAA;CAErC,MAAM,OAAC,OAAa,iBAAU,kBAAc,KAAA;OACtC,CAAA,aAAA,UAAyB,cAAQ;EACrC,IAAI,mBAAmB,MAAK,OAAA,CAAA,iBAAA,KAAA;EAC5B,IAAA,CAAA,OAAM,OAAY,CAAA,GAAA,KAAA;EAClB,MAAI,YAAW,aAAe,KAAA;EAC9B,IAAA,WAAM,OAAc,CAAA,OAAM,SAAA,WAAiB,EAAA,GAAU,IAAI;EACzD,MAAI,cAAa,MAAA,iBAAA,UAAA,IAAA,OAAA;MACf,aAAe;GACf,MAAK,SAAO,OAAM,WAChB,WAAa;GAEjB,IAAA,CAAA,OAAA,MAAA,MAAA,GAAA,OAAA,CAAA,KAAA,KAAA,MAAA,GAAA,KAAA;EACA;EACF,OAAG,CAAA,GAAA,KAAA;IAAC;EAAiB;EAAO;EAAI;CAEhC,CAAA;CACA,MAAM,cAAY,cAAU,KAAA,cAAA;CAmC5B,MAAA,YAAQ,UAAA;SACN;YAhCe,cAAA,oBAAA,OAAA;GAAQ,SAAQ;;aACb,qBAAA,KAAA;;cACV;MAKE,UAAK,oBAAA,QAAA;MACL,MAAA;MACA,QAAA,mBAAA,KAAA;MACA,GAAA;MACD,MAAA,QAAA,OAAA;KAEH,CAAA;KAAW,oBAAA,QAAA;MAAO,MAAG;MAAoB,GAAA;MAA0B,MAAA,QAAA,OAAA;KACnE,CAAA;KAAa,oBAAA,QAAA;MAAO,QAAG;MAAqB,GAAA;KAC5C,CAAA;KAAU,oBAAA,QAAA;MAAQ,IAAA;iBAChB;gBACI,oBAAA,QAAA;OACF,GAAE;OACF,GAAA;OACA,OAAA;OACA,QAAK;OACL,MAAA;OACD,QAAA;MACG,CAAA;KACL,CAAA;;GACA,CAAA;GAEN,GAAA;GAAW;GAAQ;GAAM;GAInB;EACP,CAAA;EACA,eAAG;EACH,GAAA;EACA,KAAA,aAAO,MAAA,iBAAA,MAAA,GAAA;SACL;GACA,UAAU;GACV,UAAO;GACP,OAAA;GACA,QAAA;GACA,eAAM;GACN,MAAA,mBAAQ,KAAA;GACR,QAAA,0BAAA,OAAA;GACA;GACF,GAAA,MAAA;EACF;CAEA;CAEJ,OAAA,sBAAA,KAAA;;;;;;;;;;;;;;;;;MAoBI,eAAO,KAAc,WADH,SAAA,aACqB,OAAA;CACxC,OACH,cAAA,SAAA,gBAAA,KAAA,CAAA"}

package/dist/popover/popover-context.d.ts

@@ -0,0 +1,24 @@
+import { t as PopoverStore } from "../popover-store-Bc-l5VVO.js";
+
+//#region src/popover/popover-context.d.ts
+/**
+ * Returns the popover store from the nearest popover container.
+ * @example
+ * function Popover() {
+ *   const store = usePopoverContext();
+ *
+ *   if (!store) {
+ *     throw new Error("Popover must be wrapped in PopoverProvider");
+ *   }
+ *
+ *   // Use the store...
+ * }
+ */
+declare const usePopoverContext: () => PopoverStore | undefined;
+declare const usePopoverScopedContext: (onlyScoped?: boolean) => PopoverStore | undefined;
+declare const usePopoverProviderContext: () => PopoverStore | undefined;
+declare const PopoverContextProvider: (props: import("react").ProviderProps<PopoverStore | undefined>) => import("react/jsx-runtime").JSX.Element;
+declare const PopoverScopedContextProvider: (props: import("react").ProviderProps<PopoverStore | undefined>) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { PopoverContextProvider, PopoverScopedContextProvider, usePopoverContext, usePopoverProviderContext, usePopoverScopedContext };
+//# sourceMappingURL=popover-context.d.ts.map

package/dist/popover/popover-context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover-context.d.ts","names":["PopoverStore","usePopoverContext","usePopoverScopedContext","onlyScoped","usePopoverProviderContext","PopoverContextProvider","ProviderProps","props","JSX","Element","PopoverScopedContextProvider"],"sources":["../../src/popover/popover-context.d.ts"],"mappings":";;;;;AAcA;;;;AAA0D;AAC1D;;;;AAAoF;AACpF;cAFqBC,iBAAAA,QAAyBD,YAAY;AAAA,cACrCE,uBAAAA,GAA0BC,UAAAA,eAAyBH,YAAY;AAAA,cAC/DI,yBAAAA,QAAiCJ,YAAY;AAAA,cAC7CK,sBAAAA,GAAyBE,KAAAA,kBAAuBD,aAAAA,CAAcN,YAAY,8CAA8CQ,GAAAA,CAAIC,OAAAA;AAAAA,cAC5HC,4BAAAA,GAA+BH,KAAAA,kBAAuBD,aAAAA,CAAcN,YAAY,8CAA8CQ,GAAAA,CAAIC,OAAAA"}

package/dist/popover/popover-context.js

@@ -0,0 +1,27 @@
+"use client";
+import { DialogContextProvider, DialogScopedContextProvider } from "../dialog/dialog-context.js";
+import { createStoreContext } from "@ariakit/react-utils";
+//#region src/popover/popover-context.tsx
+const ctx = createStoreContext([DialogContextProvider], [DialogScopedContextProvider]);
+/**
+* Returns the popover store from the nearest popover container.
+* @example
+* function Popover() {
+*   const store = usePopoverContext();
+*
+*   if (!store) {
+*     throw new Error("Popover must be wrapped in PopoverProvider");
+*   }
+*
+*   // Use the store...
+* }
+*/
+const usePopoverContext = ctx.useContext;
+const usePopoverScopedContext = ctx.useScopedContext;
+const usePopoverProviderContext = ctx.useProviderContext;
+const PopoverContextProvider = ctx.ContextProvider;
+const PopoverScopedContextProvider = ctx.ScopedContextProvider;
+//#endregion
+export { PopoverContextProvider, PopoverScopedContextProvider, usePopoverContext, usePopoverProviderContext, usePopoverScopedContext };
+
+//# sourceMappingURL=popover-context.js.map

package/dist/popover/popover-context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover-context.js","names":[],"sources":["../../src/popover/popover-context.tsx"],"sourcesContent":["import { createStoreContext } from \"@ariakit/react-utils\";\nimport {\n  DialogContextProvider,\n  DialogScopedContextProvider,\n} from \"../dialog/dialog-context.tsx\";\nimport type { PopoverStore } from \"./popover-store.ts\";\n\nconst ctx = createStoreContext<PopoverStore>(\n  [DialogContextProvider],\n  [DialogScopedContextProvider],\n);\n\n/**\n * Returns the popover store from the nearest popover container.\n * @example\n * function Popover() {\n *   const store = usePopoverContext();\n *\n *   if (!store) {\n *     throw new Error(\"Popover must be wrapped in PopoverProvider\");\n *   }\n *\n *   // Use the store...\n * }\n */\nexport const usePopoverContext = ctx.useContext;\n\nexport const usePopoverScopedContext = ctx.useScopedContext;\n\nexport const usePopoverProviderContext = ctx.useProviderContext;\n\nexport const PopoverContextProvider = ctx.ContextProvider;\n\nexport const PopoverScopedContextProvider = ctx.ScopedContextProvider;\n"],"mappings":";;;;;;;;;;;;;;;;;;AA2BA,MAAa,oBAAA,IAAA;AAEb,MAAa,0BAAA,IAA4B;AAEzC,MAAa,4BAAyB,IAAI;AAE1C,MAAa,yBAAA,IAAA"}

package/dist/popover/popover-description.d.ts

@@ -0,0 +1,2 @@
+import { i as usePopoverDescription, n as PopoverDescriptionOptions, r as PopoverDescriptionProps, t as PopoverDescription } from "../popover-description-DU753dah.js";
+export { PopoverDescription, PopoverDescriptionOptions, PopoverDescriptionProps, usePopoverDescription };

package/dist/popover/popover-description.js

@@ -0,0 +1,42 @@
+"use client";
+import { useDialogDescription } from "../dialog/dialog-description.js";
+import { createElement, createHook, forwardRef } from "@ariakit/react-utils";
+//#region src/popover/popover-description.tsx
+const TagName = "p";
+/**
+* Returns props to create a `PopoverDescription` component. This hook must be
+* used in a component that's wrapped with `Popover` so the `aria-describedby`
+* prop is properly set on the popover element.
+* @see https://ariakit.com/components/popover
+* @example
+* ```jsx
+* // This component must be wrapped with Popover
+* const props = usePopoverDescription();
+* <Role {...props}>Description</Role>
+* ```
+*/
+const usePopoverDescription = createHook(function usePopoverDescription(props) {
+	props = useDialogDescription(props);
+	return props;
+});
+/**
+* Renders a description in a popover. This component must be wrapped with
+* [`Popover`](https://ariakit.com/reference/popover) so the `aria-describedby`
+* prop is properly set on the popover element.
+* @see https://ariakit.com/components/popover
+* @example
+* ```jsx {3}
+* <PopoverProvider>
+*   <Popover>
+*     <PopoverDescription>Description</PopoverDescription>
+*   </Popover>
+* </PopoverProvider>
+* ```
+*/
+const PopoverDescription = forwardRef(function PopoverDescription(props) {
+	return createElement(TagName, usePopoverDescription(props));
+});
+//#endregion
+export { PopoverDescription, usePopoverDescription };
+
+//# sourceMappingURL=popover-description.js.map

package/dist/popover/popover-description.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover-description.js","names":[],"sources":["../../src/popover/popover-description.tsx"],"sourcesContent":["import { createElement, createHook, forwardRef } from \"@ariakit/react-utils\";\nimport type { Props } from \"@ariakit/react-utils\";\nimport type { ElementType } from \"react\";\nimport type { DialogDescriptionOptions } from \"../dialog/dialog-description.tsx\";\nimport { useDialogDescription } from \"../dialog/dialog-description.tsx\";\nimport type { PopoverStore } from \"./popover-store.ts\";\n\nconst TagName = \"p\" satisfies ElementType;\ntype TagName = typeof TagName;\n\n/**\n * Returns props to create a `PopoverDescription` component. This hook must be\n * used in a component that's wrapped with `Popover` so the `aria-describedby`\n * prop is properly set on the popover element.\n * @see https://ariakit.com/components/popover\n * @example\n * ```jsx\n * // This component must be wrapped with Popover\n * const props = usePopoverDescription();\n * <Role {...props}>Description</Role>\n * ```\n */\nexport const usePopoverDescription = createHook<\n  TagName,\n  PopoverDescriptionOptions\n>(function usePopoverDescription(props) {\n  props = useDialogDescription(props);\n  return props;\n});\n\n/**\n * Renders a description in a popover. This component must be wrapped with\n * [`Popover`](https://ariakit.com/reference/popover) so the `aria-describedby`\n * prop is properly set on the popover element.\n * @see https://ariakit.com/components/popover\n * @example\n * ```jsx {3}\n * <PopoverProvider>\n *   <Popover>\n *     <PopoverDescription>Description</PopoverDescription>\n *   </Popover>\n * </PopoverProvider>\n * ```\n */\nexport const PopoverDescription = forwardRef(function PopoverDescription(\n  props: PopoverDescriptionProps,\n) {\n  const htmlProps = usePopoverDescription(props);\n  return createElement(TagName, htmlProps);\n});\n\nexport interface PopoverDescriptionOptions<\n  T extends ElementType = TagName,\n> extends DialogDescriptionOptions<T> {\n  /**\n   * Object returned by the\n   * [`usePopoverStore`](https://ariakit.com/reference/use-popover-store) hook.\n   * If not provided, the closest\n   * [`Popover`](https://ariakit.com/reference/popover) or\n   * [`PopoverProvider`](https://ariakit.com/reference/popover-provider)\n   * components' context will be used.\n   */\n  store?: PopoverStore;\n}\n\nexport type PopoverDescriptionProps<T extends ElementType = TagName> = Props<\n  T,\n  PopoverDescriptionOptions<T>\n>;\n"],"mappings":";;;;;;;;;;;;;;;;;MA0BE,wBAA6B,WAAK,SAAA,sBAAA,OAAA;CAClC,QAAO,qBAAA,KAAA;CACR,OAAA;;;;;;;;;;;;;;;;MAoBC,qBAAqB,WADH,SAAA,mBACqB,OAAA;CACxC,OAAA,cAAA,SAAA,sBAAA,KAAA,CAAA"}

package/dist/popover/popover-disclosure-arrow.d.ts

@@ -0,0 +1,62 @@
+import { a as PopoverStoreState, t as PopoverStore } from "../popover-store-Bc-l5VVO.js";
+import { Options, Props } from "@ariakit/react-utils";
+import { ElementType } from "react";
+
+//#region src/popover/popover-disclosure-arrow.d.ts
+declare const TagName = "span";
+type TagName = typeof TagName;
+/**
+ * Returns props to create a `PopoverDisclosureArrow` component.
+ * @see https://ariakit.com/components/popover
+ * @example
+ * ```jsx
+ * const store = usePopoverStore();
+ * const props = usePopoverDisclosureArrow({ store });
+ * <PopoverDisclosure store={store}>
+ *   Disclosure
+ *   <Role {...props} />
+ * </PopoverDisclosure>
+ * ```
+ */
+declare const usePopoverDisclosureArrow: import("@ariakit/react-utils").Hook<"span", PopoverDisclosureArrowOptions<"span">>;
+/**
+ * Renders an arrow pointing to the popover position. It's usually rendered
+ * inside the
+ * [`PopoverDisclosure`](https://ariakit.com/reference/popover-disclosure)
+ * component.
+ * @see https://ariakit.com/components/popover
+ * @example
+ * ```jsx {4}
+ * <PopoverProvider>
+ *   <PopoverDisclosure>
+ *     Disclosure
+ *     <PopoverDisclosureArrow />
+ *   </PopoverDisclosure>
+ *   <Popover>Popover</Popover>
+ * </PopoverProvider>
+ * ```
+ */
+declare const PopoverDisclosureArrow: (props: PopoverDisclosureArrowProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+interface PopoverDisclosureArrowOptions<_T extends ElementType = TagName> extends Options {
+  /**
+   * Object returned by the
+   * [`usePopoverStore`](https://ariakit.com/reference/use-popover-store) hook.
+   * If not provided, the closest
+   * [`PopoverDisclosure`](https://ariakit.com/reference/popover-disclosure) or
+   * [`PopoverProvider`](https://ariakit.com/reference/popover-provider)
+   * components' context will be used.
+   */
+  store?: PopoverStore;
+  /**
+   * Arrow's placement direction. If not provided, it will be inferred from the
+   * context.
+   *
+   * Live examples:
+   * - [Sliding Menu](https://ariakit.com/examples/menu-slide)
+   */
+  placement?: PopoverStoreState["placement"];
+}
+type PopoverDisclosureArrowProps<T extends ElementType = TagName> = Props<T, PopoverDisclosureArrowOptions<T>>;
+//#endregion
+export { PopoverDisclosureArrow, PopoverDisclosureArrowOptions, PopoverDisclosureArrowProps, usePopoverDisclosureArrow };
+//# sourceMappingURL=popover-disclosure-arrow.d.ts.map

package/dist/popover/popover-disclosure-arrow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover-disclosure-arrow.d.ts","names":["Options","Props","ElementType","PopoverStore","PopoverStoreState","TagName","usePopoverDisclosureArrow","PopoverDisclosureArrowOptions","Hook","PopoverDisclosureArrow","PopoverDisclosureArrowProps","props","ReactElement","JSXElementConstructor","_T","store","placement","T"],"sources":["../../src/popover/popover-disclosure-arrow.d.ts"],"mappings":";;;;;cAGcK,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAF6C;;;;AACrD;AAAA;;;;AACQ;AAc7B;;;AAhB0E,cAgBrDC,yBAAAA,iCAA0DE,IAAAA,SAAaD,6BAA6B;AAAA;AAkBzH;;;;;;;;;AAAqK;AACrK;;;;;;AAnByH,cAkBpGE,sBAAAA,GAAyBE,KAAAA,EAAOD,2BAA2B,qBAAqBE,YAAAA,+BAA2CC,qBAAAA;AAAAA,UAC/HN,6BAAAA,YAAyCL,WAAAA,GAAcG,OAAAA,UAAiBL,OAAAA;EAAO;;;;;;;;EAS5Fe,KAAAA,GAAQZ,YAAAA;EAQIC;;AAAiB;AAEjC;;;;EAFIY,SAAAA,GAAYZ,iBAAAA;AAAAA;AAAAA,KAEJM,2BAAAA,WAAsCR,WAAAA,GAAcG,OAAAA,IAAWJ,KAAAA,CAAMgB,CAAAA,EAAGV,6BAAAA,CAA8BU,CAAAA"}