@ariakit/react-components 0.1.0

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

@@ -0,0 +1,46 @@
+import { ComboboxListOptions } from "./combobox-list.js";
+import { n as PopoverOptions } from "../popover-CCqiRKqg.js";
+import { Props } from "@ariakit/react-utils";
+import { ElementType } from "react";
+
+//#region src/combobox/combobox-popover.d.ts
+declare const TagName = "div";
+type TagName = typeof TagName;
+/**
+ * Returns props to create a `ComboboxPopover` component.
+ * @see https://ariakit.com/components/combobox
+ * @example
+ * ```jsx
+ * const store = useComboboxStore();
+ * const props = useComboboxPopover({ store });
+ * <Role {...props}>
+ *   <ComboboxItem value="Item 1" />
+ *   <ComboboxItem value="Item 2" />
+ *   <ComboboxItem value="Item 3" />
+ * </Role>
+ * ```
+ */
+declare const useComboboxPopover: import("@ariakit/react-utils").Hook<"div", ComboboxPopoverOptions<"div">>;
+/**
+ * Renders a combobox popover. The `role` prop is set to `listbox` by default,
+ * but can be overriden by any other valid combobox popup role (`listbox`,
+ * `menu`, `tree`, `grid` or `dialog`).
+ * @see https://ariakit.com/components/combobox
+ * @example
+ * ```jsx {3-7}
+ * <ComboboxProvider>
+ *   <Combobox />
+ *   <ComboboxPopover>
+ *     <ComboboxItem value="Apple" />
+ *     <ComboboxItem value="Banana" />
+ *     <ComboboxItem value="Orange" />
+ *   </ComboboxPopover>
+ * </ComboboxProvider>
+ * ```
+ */
+declare const ComboboxPopover: (props: ComboboxPopoverProps<"div">) => import("react/jsx-runtime").JSX.Element | null;
+interface ComboboxPopoverOptions<T extends ElementType = TagName> extends ComboboxListOptions<T>, Omit<PopoverOptions<T>, "store"> {}
+type ComboboxPopoverProps<T extends ElementType = TagName> = Props<T, ComboboxPopoverOptions<T>>;
+//#endregion
+export { ComboboxPopover, ComboboxPopoverOptions, ComboboxPopoverProps, useComboboxPopover };
+//# sourceMappingURL=combobox-popover.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"combobox-popover.d.ts","names":["Props","ElementType","PopoverOptions","ComboboxListOptions","TagName","useComboboxPopover","ComboboxPopoverOptions","Hook","ComboboxPopover","ComboboxPopoverProps","props","JSX","Element","T","Omit"],"sources":["../../src/combobox/combobox-popover.d.ts"],"mappings":";;;;;;cAIcI,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAFkC;;;;AAC1C;AAAA;;;;AACQ;AAe7B;;;;AAjB+D,cAiB1CC,kBAAAA,iCAAmDE,IAAAA,QAAYD,sBAAsB;AAkB1G;;;;;;;;;AAAqH;AACrH;;;;;;;AADA,cAAqBE,eAAAA,GAAkBE,KAAAA,EAAOD,oBAAoB,wCAAwCE,GAAAA,CAAIC,OAAAA;AAAAA,UAC7FN,sBAAAA,WAAiCL,WAAAA,GAAcG,OAAAA,UAAiBD,mBAAAA,CAAoBU,CAAAA,GAAIC,IAAAA,CAAKZ,cAAAA,CAAeW,CAAAA;AAAAA,KAEjHJ,oBAAAA,WAA+BR,WAAAA,GAAcG,OAAAA,IAAWJ,KAAAA,CAAMa,CAAAA,EAAGP,sBAAAA,CAAuBO,CAAAA"}

package/dist/combobox/combobox-popover.js

@@ -0,0 +1,115 @@
+"use client";
+import { useComboboxProviderContext } from "./combobox-context.js";
+import { useComboboxList } from "./combobox-list.js";
+import { createDialogComponent } from "../dialog/dialog.js";
+import { usePopover } from "../popover/popover.js";
+import { createElement, createHook, forwardRef } from "@ariakit/react-utils";
+import { getDocument, invariant, isFalsyBooleanCallback } from "@ariakit/utils";
+import { useRef } from "react";
+import { useStoreState } from "@ariakit/react-store";
+//#region src/combobox/combobox-popover.tsx
+const TagName = "div";
+function isController(target, ...ids) {
+	if (!target) return false;
+	if ("id" in target) {
+		const selector = ids.filter(Boolean).map((id) => `[aria-controls~="${id}"]`).join(", ");
+		if (!selector) return false;
+		return target.matches(selector);
+	}
+	return false;
+}
+/**
+* Returns props to create a `ComboboxPopover` component.
+* @see https://ariakit.com/components/combobox
+* @example
+* ```jsx
+* const store = useComboboxStore();
+* const props = useComboboxPopover({ store });
+* <Role {...props}>
+*   <ComboboxItem value="Item 1" />
+*   <ComboboxItem value="Item 2" />
+*   <ComboboxItem value="Item 3" />
+* </Role>
+* ```
+*/
+const useComboboxPopover = createHook(function useComboboxPopover({ store, modal, tabIndex, alwaysVisible, autoFocusOnHide = true, hideOnInteractOutside = true, ...props }) {
+	const context = useComboboxProviderContext();
+	store = store || context;
+	invariant(store, "ComboboxPopover must receive a `store` prop or be wrapped in a ComboboxProvider component.");
+	const baseElement = useStoreState(store, "baseElement");
+	const hiddenByClickOutsideRef = useRef(false);
+	const treeSnapshotKey = useStoreState(store.tag, (state) => state?.renderedItems.length);
+	props = useComboboxList({
+		store,
+		alwaysVisible,
+		...props
+	});
+	props = usePopover({
+		store,
+		modal,
+		alwaysVisible,
+		backdrop: false,
+		autoFocusOnShow: false,
+		finalFocus: baseElement,
+		preserveTabOrderAnchor: null,
+		unstable_treeSnapshotKey: treeSnapshotKey,
+		...props,
+		getPersistentElements() {
+			const elements = props.getPersistentElements?.() || [];
+			if (!modal) return elements;
+			if (!store) return elements;
+			const { contentElement, baseElement } = store.getState();
+			if (!baseElement) return elements;
+			const doc = getDocument(baseElement);
+			const selectors = [];
+			if (contentElement?.id) selectors.push(`[aria-controls~="${contentElement.id}"]`);
+			if (baseElement?.id) selectors.push(`[aria-controls~="${baseElement.id}"]`);
+			if (!selectors.length) return [...elements, baseElement];
+			const selector = selectors.join(",");
+			const controlElements = doc.querySelectorAll(selector);
+			return [...elements, ...controlElements];
+		},
+		autoFocusOnHide(element) {
+			if (isFalsyBooleanCallback(autoFocusOnHide, element)) return false;
+			if (hiddenByClickOutsideRef.current) {
+				hiddenByClickOutsideRef.current = false;
+				return false;
+			}
+			return true;
+		},
+		hideOnInteractOutside(event) {
+			const state = store?.getState();
+			const contentId = state?.contentElement?.id;
+			const baseId = state?.baseElement?.id;
+			if (isController(event.target, contentId, baseId)) return false;
+			const result = typeof hideOnInteractOutside === "function" ? hideOnInteractOutside(event) : hideOnInteractOutside;
+			if (result) hiddenByClickOutsideRef.current = event.type === "click";
+			return result;
+		}
+	});
+	return props;
+});
+/**
+* Renders a combobox popover. The `role` prop is set to `listbox` by default,
+* but can be overriden by any other valid combobox popup role (`listbox`,
+* `menu`, `tree`, `grid` or `dialog`).
+* @see https://ariakit.com/components/combobox
+* @example
+* ```jsx {3-7}
+* <ComboboxProvider>
+*   <Combobox />
+*   <ComboboxPopover>
+*     <ComboboxItem value="Apple" />
+*     <ComboboxItem value="Banana" />
+*     <ComboboxItem value="Orange" />
+*   </ComboboxPopover>
+* </ComboboxProvider>
+* ```
+*/
+const ComboboxPopover = createDialogComponent(forwardRef(function ComboboxPopover(props) {
+	return createElement(TagName, useComboboxPopover(props));
+}), useComboboxProviderContext);
+//#endregion
+export { ComboboxPopover, useComboboxPopover };
+
+//# sourceMappingURL=combobox-popover.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"combobox-popover.js","names":[],"sources":["../../src/combobox/combobox-popover.tsx"],"sourcesContent":["import { useStoreState } from \"@ariakit/react-store\";\nimport { createElement, createHook, forwardRef } from \"@ariakit/react-utils\";\nimport type { Props } from \"@ariakit/react-utils\";\nimport { getDocument, invariant, isFalsyBooleanCallback } from \"@ariakit/utils\";\nimport type { ElementType } from \"react\";\nimport { useRef } from \"react\";\nimport { createDialogComponent } from \"../dialog/dialog.tsx\";\nimport type { PopoverOptions } from \"../popover/popover.tsx\";\nimport { usePopover } from \"../popover/popover.tsx\";\nimport { useComboboxProviderContext } from \"./combobox-context.tsx\";\nimport type { ComboboxListOptions } from \"./combobox-list.tsx\";\nimport { useComboboxList } from \"./combobox-list.tsx\";\n\nconst TagName = \"div\" satisfies ElementType;\ntype TagName = typeof TagName;\n\nfunction isController(\n  target: EventTarget | Element | null,\n  ...ids: Array<string | undefined>\n) {\n  if (!target) return false;\n  if (\"id\" in target) {\n    const selector = ids\n      .filter(Boolean)\n      .map((id) => `[aria-controls~=\"${id}\"]`)\n      .join(\", \");\n    if (!selector) return false;\n    return target.matches(selector);\n  }\n  return false;\n}\n\n/**\n * Returns props to create a `ComboboxPopover` component.\n * @see https://ariakit.com/components/combobox\n * @example\n * ```jsx\n * const store = useComboboxStore();\n * const props = useComboboxPopover({ store });\n * <Role {...props}>\n *   <ComboboxItem value=\"Item 1\" />\n *   <ComboboxItem value=\"Item 2\" />\n *   <ComboboxItem value=\"Item 3\" />\n * </Role>\n * ```\n */\nexport const useComboboxPopover = createHook<TagName, ComboboxPopoverOptions>(\n  function useComboboxPopover({\n    store,\n    modal,\n    tabIndex,\n    alwaysVisible,\n    autoFocusOnHide = true,\n    hideOnInteractOutside = true,\n    ...props\n  }) {\n    const context = useComboboxProviderContext();\n    store = store || context;\n\n    invariant(\n      store,\n      process.env.NODE_ENV !== \"production\" &&\n        \"ComboboxPopover must receive a `store` prop or be wrapped in a ComboboxProvider component.\",\n    );\n\n    const baseElement = useStoreState(store, \"baseElement\");\n    const hiddenByClickOutsideRef = useRef(false);\n\n    // When new tags are rendered while the combobox popover is open, they will\n    // be considered nested popups, and therefore the popover won't hide when\n    // interacting with them. We use the treeSnapshotKey to force the popover to\n    // take a new snapshot of the tree when new items are rendered.\n    const treeSnapshotKey = useStoreState(\n      store.tag,\n      (state) => state?.renderedItems.length,\n    );\n\n    props = useComboboxList({ store, alwaysVisible, ...props });\n\n    props = usePopover({\n      store,\n      modal,\n      alwaysVisible,\n      backdrop: false,\n      autoFocusOnShow: false,\n      finalFocus: baseElement,\n      preserveTabOrderAnchor: null,\n      unstable_treeSnapshotKey: treeSnapshotKey,\n      ...props,\n      // When the combobox popover is modal, we make sure to include the\n      // combobox input and all the combobox controls (cancel, disclosure) in\n      // the list of persistent elements so they make part of the modal context,\n      // allowing users to tab through them.\n      getPersistentElements() {\n        const elements = props.getPersistentElements?.() || [];\n        if (!modal) return elements;\n        if (!store) return elements;\n        const { contentElement, baseElement } = store.getState();\n        if (!baseElement) return elements;\n        const doc = getDocument(baseElement);\n        const selectors: string[] = [];\n        if (contentElement?.id) {\n          selectors.push(`[aria-controls~=\"${contentElement.id}\"]`);\n        }\n        if (baseElement?.id) {\n          selectors.push(`[aria-controls~=\"${baseElement.id}\"]`);\n        }\n        if (!selectors.length) return [...elements, baseElement];\n        const selector = selectors.join(\",\");\n        const controlElements = doc.querySelectorAll<HTMLElement>(selector);\n        return [...elements, ...controlElements];\n      },\n      // The combobox popover should focus on the combobox input when it hides,\n      // unless the event was triggered by a click outside the popover, in which\n      // case the input shouldn't be re-focused.\n      autoFocusOnHide(element) {\n        if (isFalsyBooleanCallback(autoFocusOnHide, element)) return false;\n        if (hiddenByClickOutsideRef.current) {\n          hiddenByClickOutsideRef.current = false;\n          return false;\n        }\n        return true;\n      },\n      // Make sure we don't hide the popover when the user interacts with the\n      // combobox cancel or the combobox disclosure buttons. They will have the\n      // aria-controls attribute pointing to either the combobox input or the\n      // combobox popover elements.\n      hideOnInteractOutside(event: Event) {\n        const state = store?.getState();\n        const contentId = state?.contentElement?.id;\n        const baseId = state?.baseElement?.id;\n        if (isController(event.target, contentId, baseId)) return false;\n        const result =\n          typeof hideOnInteractOutside === \"function\"\n            ? hideOnInteractOutside(event)\n            : hideOnInteractOutside;\n        if (result) {\n          hiddenByClickOutsideRef.current = event.type === \"click\";\n        }\n        return result;\n      },\n    });\n\n    return props;\n  },\n);\n\n/**\n * Renders a combobox popover. The `role` prop is set to `listbox` by default,\n * but can be overriden by any other valid combobox popup role (`listbox`,\n * `menu`, `tree`, `grid` or `dialog`).\n * @see https://ariakit.com/components/combobox\n * @example\n * ```jsx {3-7}\n * <ComboboxProvider>\n *   <Combobox />\n *   <ComboboxPopover>\n *     <ComboboxItem value=\"Apple\" />\n *     <ComboboxItem value=\"Banana\" />\n *     <ComboboxItem value=\"Orange\" />\n *   </ComboboxPopover>\n * </ComboboxProvider>\n * ```\n */\nexport const ComboboxPopover = createDialogComponent(\n  forwardRef(function ComboboxPopover(props: ComboboxPopoverProps) {\n    const htmlProps = useComboboxPopover(props);\n    return createElement(TagName, htmlProps);\n  }),\n  useComboboxProviderContext,\n);\n\nexport interface ComboboxPopoverOptions<T extends ElementType = TagName>\n  extends ComboboxListOptions<T>, Omit<PopoverOptions<T>, \"store\"> {}\n\nexport type ComboboxPopoverProps<T extends ElementType = TagName> = Props<\n  T,\n  ComboboxPopoverOptions<T>\n>;\n"],"mappings":";;;;;;;;;;AAgBA,MAAA,UAAS;SAIF,aAAe,QAAA,GAAA,KAAA;CACpB,IAAI,CAAA,QAAQ,OAAQ;KAClB,QAAM,QAAW;EAIjB,MAAK,WAAU,IAAA,OAAO,OAAA,EAAA,KAAA,OAAA,oBAAA,GAAA,GAAA,EAAA,KAAA,IAAA;EACtB,IAAA,CAAA,UAAc,OAAQ;EACxB,OAAA,OAAA,QAAA,QAAA;CACA;CACF,OAAA;;;;;;;;;;;;;;;;MA0BI,qBAAgB,WAAA,SAA2B,mBAAA,EAAA,OAAA,OAAA,UAAA,eAAA,kBAAA,MAAA,wBAAA,MAAA,GAAA,SAAA;CAC3C,MAAA,UAAQ,2BAAS;CAEjB,QAAA,SAGI;CAGJ,UAAM,OAAA,4FAAgD;CACtD,MAAM,cAAA,cAA0B,OAAO,aAAK;CAM5C,MAAM,0BAAkB,OACtB,KAAM;CAIR,MAAA,kBAAwB,cAAA,MAAA,MAAA,UAAA,OAAA,cAAA,MAAA;SAAE,gBAAA;EAAO;EAAe;EAAU,GAAA;CAE1D,CAAA;SACE,WAAA;EACA;EACA;EACA;EACA,UAAA;EACA,iBAAY;EACZ,YAAA;EACA,wBAAA;EACA,0BAAG;EAKH,GAAA;0BACyB;GACvB,MAAK,WAAO,MAAO,wBAAA,KAAA,CAAA;GACnB,IAAI,CAAC,OAAO,OAAO;GACnB,IAAA,CAAA,OAAQ,OAAA;GACR,MAAK,EAAA,gBAAa,gBAAO,MAAA,SAAA;GACzB,IAAA,CAAA,aAAY,OAAY;GACxB,MAAM,MAAA,YAAuB,WAAA;GAC7B,MAAI,YAAA,CAAA;GAGJ,IAAI,gBAAa,IACf,UAAU,KAAK,oBAAoB,eAAkB,GAAA,GAAA;GAEvD,IAAI,aAAW,IAAA,UAAgB,KAAG,oBAAqB,YAAA,GAAA,GAAA;GACvD,IAAA,CAAA,UAAM,QAAW,OAAU,CAAA,GAAK,UAAG,WAAA;GACnC,MAAM,WAAA,UAAkB,KAAI,GAAA;GAC5B,MAAA,kBAAwB,IAAA,iBAAe,QAAA;GACzC,OAAA,CAAA,GAAA,UAAA,GAAA,eAAA;EAIA;kBACM,SAAA;GACJ,IAAI,uBAAA,iBAAiC,OAAA,GAAA,OAAA;OACnC,wBAAwB,SAAU;IAClC,wBAAO,UAAA;IACT,OAAA;GACA;GACF,OAAA;EAKA;wBACuB,OAAA;GACrB,MAAM,QAAA,OAAY,SAAO;GACzB,MAAM,YAAS,OAAO,gBAAa;GACnC,MAAI,SAAA,OAAa,aAAc;GAC/B,IAAA,aACE,MAAO,QAAA,WAAA,MAA0B,GAAA,OAAA;GAGnC,MAAI,SACF,OAAA,0BAAkC,aAAe,sBAAA,KAAA,IAAA;GAEnD,IAAA,QAAO,wBAAA,UAAA,MAAA,SAAA;GACT,OAAA;EACD;CAED,CAAA;CAEJ,OAAA;;;;;;;;;;;;;;;;;;;MAsBI,kBAAqB,sBADH,WACqB,SAAA,gBAAA,OAAA;CACxC,OACD,cAAA,SACF,mBAAA,KAAA,CAAA"}

package/dist/combobox/combobox-provider.d.ts

@@ -0,0 +1,30 @@
+import { a as ComboboxStoreProps, o as ComboboxStoreSelectedValue } from "../combobox-store-DEVQ45mZ.js";
+import { ReactElement, ReactNode } from "react";
+import { PickRequired } from "@ariakit/utils";
+
+//#region src/combobox/combobox-provider.d.ts
+type Value = ComboboxStoreSelectedValue;
+/**
+ * Provides a combobox store that controls the state of
+ * [Combobox](https://ariakit.com/components/combobox) components.
+ * @see https://ariakit.com/components/combobox
+ * @example
+ * ```jsx
+ * <ComboboxProvider defaultValue="">
+ *   <Combobox />
+ *   <ComboboxPopover>
+ *     <ComboboxItem value="Apple" />
+ *     <ComboboxItem value="Banana" />
+ *     <ComboboxItem value="Orange" />
+ *   </ComboboxPopover>
+ * </ComboboxProvider>
+ * ```
+ */
+declare function ComboboxProvider<T extends Value = Value>(props: PickRequired<ComboboxProviderProps<T>, "selectedValue" | "defaultSelectedValue">): ReactElement;
+declare function ComboboxProvider(props?: ComboboxProviderProps): ReactElement;
+interface ComboboxProviderProps<T extends Value = Value> extends ComboboxStoreProps<T> {
+  children?: ReactNode;
+}
+//#endregion
+export { ComboboxProvider, ComboboxProviderProps };
+//# sourceMappingURL=combobox-provider.d.ts.map

package/dist/combobox/combobox-provider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox-provider.d.ts","names":["PickRequired","ReactElement","ReactNode","ComboboxStoreProps","ComboboxStoreSelectedValue","Value","ComboboxProvider","T","ComboboxProviderProps","props","children"],"sources":["../../src/combobox/combobox-provider.d.ts"],"mappings":";;;;;KAGKK,KAAAA,GAAQD,0BAA0B;;AADmD;;;;AACnD;AAiBvC;;;;;;;;;;iBAAwBE,gBAAAA,WAA2BD,KAAAA,GAAQA,KAAAA,CAAAA,CAAOI,KAAAA,EAAOT,YAAAA,CAAaQ,qBAAAA,CAAsBD,CAAAA,+CAAgDN,YAAAA;AAAAA,iBACpIK,gBAAAA,CAAiBG,KAAAA,GAAQD,qBAAAA,GAAwBP,YAAY;AAAA,UACpEO,qBAAAA,WAAgCH,KAAAA,GAAQA,KAAAA,UAAeF,kBAAAA,CAAmBI,CAAAA;EACvFG,QAAAA,GAAWR,SAAAA;AAAAA"}

package/dist/combobox/combobox-provider.js

@@ -0,0 +1,15 @@
+"use client";
+import { ComboboxContextProvider } from "./combobox-context.js";
+import { useComboboxStore } from "./combobox-store.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/combobox/combobox-provider.tsx
+function ComboboxProvider(props = {}) {
+	return /* @__PURE__ */ jsx(ComboboxContextProvider, {
+		value: useComboboxStore(props),
+		children: props.children
+	});
+}
+//#endregion
+export { ComboboxProvider };
+
+//# sourceMappingURL=combobox-provider.js.map

package/dist/combobox/combobox-provider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox-provider.js","names":[],"sources":["../../src/combobox/combobox-provider.tsx"],"sourcesContent":["import type { PickRequired } from \"@ariakit/utils\";\nimport type { ReactElement, ReactNode } from \"react\";\nimport { ComboboxContextProvider } from \"./combobox-context.tsx\";\nimport type {\n  ComboboxStoreProps,\n  ComboboxStoreSelectedValue,\n} from \"./combobox-store.ts\";\nimport { useComboboxStore } from \"./combobox-store.ts\";\n\ntype Value = ComboboxStoreSelectedValue;\n\n/**\n * Provides a combobox store that controls the state of\n * [Combobox](https://ariakit.com/components/combobox) components.\n * @see https://ariakit.com/components/combobox\n * @example\n * ```jsx\n * <ComboboxProvider defaultValue=\"\">\n *   <Combobox />\n *   <ComboboxPopover>\n *     <ComboboxItem value=\"Apple\" />\n *     <ComboboxItem value=\"Banana\" />\n *     <ComboboxItem value=\"Orange\" />\n *   </ComboboxPopover>\n * </ComboboxProvider>\n * ```\n */\nexport function ComboboxProvider<T extends Value = Value>(\n  props: PickRequired<\n    ComboboxProviderProps<T>,\n    \"selectedValue\" | \"defaultSelectedValue\"\n  >,\n): ReactElement;\n\nexport function ComboboxProvider(props?: ComboboxProviderProps): ReactElement;\n\nexport function ComboboxProvider(props: ComboboxProviderProps = {}) {\n  const store = useComboboxStore(props);\n  return (\n    <ComboboxContextProvider value={store}>\n      {props.children}\n    </ComboboxContextProvider>\n  );\n}\n\nexport interface ComboboxProviderProps<\n  T extends Value = Value,\n> extends ComboboxStoreProps<T> {\n  children?: ReactNode;\n}\n"],"mappings":";;;;;SAuCI,iBAAA,QAAC,CAAA,GAAA;QAFW,oBAAiB,yBAEO;0BAC3B,KAAA;EACgB,UAAA,MAAA;CAE7B,CAAA"}

package/dist/combobox/combobox-row.d.ts

@@ -0,0 +1,66 @@
+import { t as ComboboxStore } from "../combobox-store-DEVQ45mZ.js";
+import { CompositeRowOptions } from "../composite/composite-row.js";
+import { Props } from "@ariakit/react-utils";
+import { ElementType } from "react";
+
+//#region src/combobox/combobox-row.d.ts
+declare const TagName = "div";
+type TagName = typeof TagName;
+/**
+ * Returns props to create a `ComboboxRow` component.
+ * @see https://ariakit.com/components/combobox
+ * @example
+ * ```jsx
+ * const store = useComboboxStore();
+ * const props = useComboboxRow({ store });
+ * <ComboboxPopover store={store}>
+ *   <Role {...props}>
+ *     <ComboboxItem value="Item 1" />
+ *     <ComboboxItem value="Item 2" />
+ *     <ComboboxItem value="Item 3" />
+ *   </Role>
+ * </ComboboxPopover>
+ * ```
+ */
+declare const useComboboxRow: import("@ariakit/react-utils").Hook<"div", ComboboxRowOptions<"div">>;
+/**
+ * Renders a combobox row that allows two-dimensional arrow key navigation.
+ * [`ComboboxItem`](https://ariakit.com/reference/combobox-item) elements
+ * wrapped within this component will automatically receive a
+ * [`rowId`](https://ariakit.com/reference/combobox-item#rowid) prop.
+ * @see https://ariakit.com/components/combobox
+ * @example
+ * ```jsx {4-13}
+ * <ComboboxProvider>
+ *   <Combobox />
+ *   <ComboboxPopover>
+ *     <ComboboxRow>
+ *       <ComboboxItem value="Item 1.1" />
+ *       <ComboboxItem value="Item 1.2" />
+ *       <ComboboxItem value="Item 1.3" />
+ *     </ComboboxRow>
+ *     <ComboboxRow>
+ *       <ComboboxItem value="Item 2.1" />
+ *       <ComboboxItem value="Item 2.2" />
+ *       <ComboboxItem value="Item 2.3" />
+ *     </ComboboxRow>
+ *   </ComboboxPopover>
+ * </ComboboxProvider>
+ * ```
+ */
+declare const ComboboxRow: (props: ComboboxRowProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+interface ComboboxRowOptions<T extends ElementType = TagName> extends CompositeRowOptions<T> {
+  /**
+   * Object returned by the
+   * [`useComboboxStore`](https://ariakit.com/reference/use-combobox-store)
+   * hook. If not provided, the closest
+   * [`ComboboxList`](https://ariakit.com/reference/combobox-list) or
+   * [`ComboboxPopover`](https://ariakit.com/reference/combobox-popover)
+   * components' context will be used.
+   */
+  store?: ComboboxStore;
+}
+type ComboboxRowProps<T extends ElementType = TagName> = Props<T, ComboboxRowOptions<T>>;
+//#endregion
+export { ComboboxRow, ComboboxRowOptions, ComboboxRowProps, useComboboxRow };
+//# sourceMappingURL=combobox-row.d.ts.map

package/dist/combobox/combobox-row.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox-row.d.ts","names":["Props","ElementType","CompositeRowOptions","ComboboxStore","TagName","useComboboxRow","ComboboxRowOptions","Hook","ComboboxRow","ComboboxRowProps","props","ReactElement","JSXElementConstructor","T","store"],"sources":["../../src/combobox/combobox-row.d.ts"],"mappings":";;;;;;cAIcI,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAF4B;;;;AACpC;AAAA;;;;AACQ;AAiB7B;;;;AAAkG;AA0BlG;AA7CyD,cAmBpCC,cAAAA,iCAA+CE,IAAAA,QAAYD,kBAAkB;;;;;;;;AA0B6C;AAC/I;;;;;;;;;;;;;;;;;cADqBE,WAAAA,GAAcE,KAAAA,EAAOD,gBAAgB,qBAAqBE,YAAAA,+BAA2CC,qBAAAA;AAAAA,UACzGN,kBAAAA,WAA6BL,WAAAA,GAAcG,OAAAA,UAAiBF,mBAAAA,CAAoBW,CAAAA;EAWrFJ;;;;;;;;EAFRK,KAAAA,GAAQX,aAAAA;AAAAA;AAAAA,KAEAM,gBAAAA,WAA2BR,WAAAA,GAAcG,OAAAA,IAAWJ,KAAAA,CAAMa,CAAAA,EAAGP,kBAAAA,CAAmBO,CAAAA"}

package/dist/combobox/combobox-row.js

@@ -0,0 +1,70 @@
+"use client";
+import { useComboboxScopedContext } from "./combobox-context.js";
+import { useCompositeRow } from "../composite/composite-row.js";
+import { createElement, createHook, forwardRef } from "@ariakit/react-utils";
+import { getPopupRole, invariant } from "@ariakit/utils";
+import { useStoreState } from "@ariakit/react-store";
+//#region src/combobox/combobox-row.tsx
+const TagName = "div";
+/**
+* Returns props to create a `ComboboxRow` component.
+* @see https://ariakit.com/components/combobox
+* @example
+* ```jsx
+* const store = useComboboxStore();
+* const props = useComboboxRow({ store });
+* <ComboboxPopover store={store}>
+*   <Role {...props}>
+*     <ComboboxItem value="Item 1" />
+*     <ComboboxItem value="Item 2" />
+*     <ComboboxItem value="Item 3" />
+*   </Role>
+* </ComboboxPopover>
+* ```
+*/
+const useComboboxRow = createHook(function useComboboxRow({ store, ...props }) {
+	const context = useComboboxScopedContext();
+	store = store || context;
+	invariant(store, "ComboboxRow must be wrapped in a ComboboxList or ComboboxPopover component");
+	props = {
+		role: getPopupRole(useStoreState(store, "contentElement")) === "grid" ? "row" : "presentation",
+		...props
+	};
+	props = useCompositeRow({
+		store,
+		...props
+	});
+	return props;
+});
+/**
+* Renders a combobox row that allows two-dimensional arrow key navigation.
+* [`ComboboxItem`](https://ariakit.com/reference/combobox-item) elements
+* wrapped within this component will automatically receive a
+* [`rowId`](https://ariakit.com/reference/combobox-item#rowid) prop.
+* @see https://ariakit.com/components/combobox
+* @example
+* ```jsx {4-13}
+* <ComboboxProvider>
+*   <Combobox />
+*   <ComboboxPopover>
+*     <ComboboxRow>
+*       <ComboboxItem value="Item 1.1" />
+*       <ComboboxItem value="Item 1.2" />
+*       <ComboboxItem value="Item 1.3" />
+*     </ComboboxRow>
+*     <ComboboxRow>
+*       <ComboboxItem value="Item 2.1" />
+*       <ComboboxItem value="Item 2.2" />
+*       <ComboboxItem value="Item 2.3" />
+*     </ComboboxRow>
+*   </ComboboxPopover>
+* </ComboboxProvider>
+* ```
+*/
+const ComboboxRow = forwardRef(function ComboboxRow(props) {
+	return createElement(TagName, useComboboxRow(props));
+});
+//#endregion
+export { ComboboxRow, useComboboxRow };
+
+//# sourceMappingURL=combobox-row.js.map

package/dist/combobox/combobox-row.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox-row.js","names":[],"sources":["../../src/combobox/combobox-row.tsx"],"sourcesContent":["import { useStoreState } from \"@ariakit/react-store\";\nimport { createElement, createHook, forwardRef } from \"@ariakit/react-utils\";\nimport type { Props } from \"@ariakit/react-utils\";\nimport { getPopupRole, invariant } from \"@ariakit/utils\";\nimport type { ElementType } from \"react\";\nimport type { CompositeRowOptions } from \"../composite/composite-row.tsx\";\nimport { useCompositeRow } from \"../composite/composite-row.tsx\";\nimport { useComboboxScopedContext } from \"./combobox-context.tsx\";\nimport type { ComboboxStore } from \"./combobox-store.ts\";\n\nconst TagName = \"div\" satisfies ElementType;\ntype TagName = typeof TagName;\n\n/**\n * Returns props to create a `ComboboxRow` component.\n * @see https://ariakit.com/components/combobox\n * @example\n * ```jsx\n * const store = useComboboxStore();\n * const props = useComboboxRow({ store });\n * <ComboboxPopover store={store}>\n *   <Role {...props}>\n *     <ComboboxItem value=\"Item 1\" />\n *     <ComboboxItem value=\"Item 2\" />\n *     <ComboboxItem value=\"Item 3\" />\n *   </Role>\n * </ComboboxPopover>\n * ```\n */\nexport const useComboboxRow = createHook<TagName, ComboboxRowOptions>(\n  function useComboboxRow({ store, ...props }) {\n    const context = useComboboxScopedContext();\n    store = store || context;\n\n    invariant(\n      store,\n      process.env.NODE_ENV !== \"production\" &&\n        \"ComboboxRow must be wrapped in a ComboboxList or ComboboxPopover component\",\n    );\n\n    const contentElement = useStoreState(store, \"contentElement\");\n    const popupRole = getPopupRole(contentElement);\n    const role = popupRole === \"grid\" ? \"row\" : \"presentation\";\n\n    props = { role, ...props };\n\n    props = useCompositeRow({ store, ...props });\n\n    return props;\n  },\n);\n\n/**\n * Renders a combobox row that allows two-dimensional arrow key navigation.\n * [`ComboboxItem`](https://ariakit.com/reference/combobox-item) elements\n * wrapped within this component will automatically receive a\n * [`rowId`](https://ariakit.com/reference/combobox-item#rowid) prop.\n * @see https://ariakit.com/components/combobox\n * @example\n * ```jsx {4-13}\n * <ComboboxProvider>\n *   <Combobox />\n *   <ComboboxPopover>\n *     <ComboboxRow>\n *       <ComboboxItem value=\"Item 1.1\" />\n *       <ComboboxItem value=\"Item 1.2\" />\n *       <ComboboxItem value=\"Item 1.3\" />\n *     </ComboboxRow>\n *     <ComboboxRow>\n *       <ComboboxItem value=\"Item 2.1\" />\n *       <ComboboxItem value=\"Item 2.2\" />\n *       <ComboboxItem value=\"Item 2.3\" />\n *     </ComboboxRow>\n *   </ComboboxPopover>\n * </ComboboxProvider>\n * ```\n */\nexport const ComboboxRow = forwardRef(function ComboboxRow(\n  props: ComboboxRowProps,\n) {\n  const htmlProps = useComboboxRow(props);\n  return createElement(TagName, htmlProps);\n});\n\nexport interface ComboboxRowOptions<\n  T extends ElementType = TagName,\n> extends CompositeRowOptions<T> {\n  /**\n   * Object returned by the\n   * [`useComboboxStore`](https://ariakit.com/reference/use-combobox-store)\n   * hook. If not provided, the closest\n   * [`ComboboxList`](https://ariakit.com/reference/combobox-list) or\n   * [`ComboboxPopover`](https://ariakit.com/reference/combobox-popover)\n   * components' context will be used.\n   */\n  store?: ComboboxStore;\n}\n\nexport type ComboboxRowProps<T extends ElementType = TagName> = Props<\n  T,\n  ComboboxRowOptions<T>\n>;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;MA+BI,iBAAgB,WAAA,SAAyB,eAAA,EAAA,OAAA,GAAA,SAAA;CACzC,MAAA,UAAQ,yBAAS;CAEjB,QAAA,SAGI;CAOJ,UAAQ,OAAA,4EAAA;SAHU;EAGF,MAAG,aAAA,cAAA,OAAA,gBAAA,CAAA,MAAA,SAAA,QAAA;EAAM,GAAA;CAEzB;SAA0B,gBAAA;EAAO;EAAU,GAAA;CAE3C,CAAA;CAEJ,OAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;MA+BE,cAAO,WADW,SAAA,YACqB,OAAA;CACxC,OAAA,cAAA,SAAA,eAAA,KAAA,CAAA"}

package/dist/combobox/combobox-separator.d.ts

@@ -0,0 +1,61 @@
+import { t as ComboboxStore } from "../combobox-store-DEVQ45mZ.js";
+import { CompositeSeparatorOptions } from "../composite/composite-separator.js";
+import { Props } from "@ariakit/react-utils";
+import { ElementType } from "react";
+
+//#region src/combobox/combobox-separator.d.ts
+declare const TagName = "hr";
+type TagName = typeof TagName;
+/**
+ * Returns props a `ComboboxSeparator` component for combobox items.
+ * @deprecated Use `useComboboxGroup` with CSS borders instead.
+ * @see https://ariakit.com/components/combobox
+ * @example
+ * ```jsx
+ * const store = useComboboxStore();
+ * const props = useComboboxSeparator({ store });
+ * <ComboboxPopover store={store}>
+ *   <ComboboxItem value="Item 1" />
+ *   <Role {...props} />
+ *   <ComboboxItem value="Item 2" />
+ *   <ComboboxItem value="Item 3" />
+ * </ComboboxPopover>
+ * ```
+ */
+declare const useComboboxSeparator: import("@ariakit/react-utils").Hook<"hr", ComboboxSeparatorOptions<"hr">>;
+/**
+ * Renders a divider between
+ * [`ComboboxItem`](https://ariakit.com/reference/combobox-item) elements.
+ * @deprecated Use
+ * [`ComboboxGroup`](https://ariakit.com/reference/combobox-group) with CSS
+ * borders instead.
+ * @see https://ariakit.com/components/combobox
+ * @example
+ * ```jsx {5}
+ * <ComboboxProvider>
+ *   <Combobox />
+ *   <ComboboxPopover>
+ *     <ComboboxItem value="Item 1" />
+ *     <ComboboxSeparator />
+ *     <ComboboxItem value="Item 2" />
+ *     <ComboboxItem value="Item 3" />
+ *   </ComboboxPopover>
+ * </ComboboxProvider>
+ * ```
+ */
+declare const ComboboxSeparator: (props: ComboboxSeparatorProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+interface ComboboxSeparatorOptions<T extends ElementType = TagName> extends CompositeSeparatorOptions<T> {
+  /**
+   * Object returned by the
+   * [`useComboboxStore`](https://ariakit.com/reference/use-combobox-store)
+   * hook. If not provided, the closest
+   * [`ComboboxList`](https://ariakit.com/reference/combobox-list) or
+   * [`ComboboxPopover`](https://ariakit.com/reference/combobox-popover)
+   * components' context will be used.
+   */
+  store?: ComboboxStore;
+}
+type ComboboxSeparatorProps<T extends ElementType = TagName> = Props<T, ComboboxSeparatorOptions<T>>;
+//#endregion
+export { ComboboxSeparator, ComboboxSeparatorOptions, ComboboxSeparatorProps, useComboboxSeparator };
+//# sourceMappingURL=combobox-separator.d.ts.map

package/dist/combobox/combobox-separator.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox-separator.d.ts","names":["Props","ElementType","CompositeSeparatorOptions","ComboboxStore","TagName","useComboboxSeparator","ComboboxSeparatorOptions","Hook","ComboboxSeparator","ComboboxSeparatorProps","props","ReactElement","JSXElementConstructor","T","store"],"sources":["../../src/combobox/combobox-separator.d.ts"],"mappings":";;;;;;cAIcI,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAF4B;;;;AACpC;AAAA;;;;AACQ;AAiB7B;;;;AAA6G;AAqB7G;AAxCyD,cAmBpCC,oBAAAA,iCAAqDE,IAAAA,OAAWD,wBAAwB;;;;;;;;AAqB8C;AAC3J;;;;;;;;;;;;cADqBE,iBAAAA,GAAoBE,KAAAA,EAAOD,sBAAsB,qBAAqBE,YAAAA,+BAA2CC,qBAAAA;AAAAA,UACrHN,wBAAAA,WAAmCL,WAAAA,GAAcG,OAAAA,UAAiBF,yBAAAA,CAA0BW,CAAAA;EAAAA;;;;AASpF;AAEzB;;;EAFIC,KAAAA,GAAQX,aAAAA;AAAAA;AAAAA,KAEAM,sBAAAA,WAAiCR,WAAAA,GAAcG,OAAAA,IAAWJ,KAAAA,CAAMa,CAAAA,EAAGP,wBAAAA,CAAyBO,CAAAA"}

package/dist/combobox/combobox-separator.js

@@ -0,0 +1,60 @@
+"use client";
+import { useComboboxScopedContext } from "./combobox-context.js";
+import { useCompositeSeparator } from "../composite/composite-separator.js";
+import { createElement, createHook, forwardRef } from "@ariakit/react-utils";
+import { invariant } from "@ariakit/utils";
+//#region src/combobox/combobox-separator.tsx
+const TagName = "hr";
+/**
+* Returns props a `ComboboxSeparator` component for combobox items.
+* @deprecated Use `useComboboxGroup` with CSS borders instead.
+* @see https://ariakit.com/components/combobox
+* @example
+* ```jsx
+* const store = useComboboxStore();
+* const props = useComboboxSeparator({ store });
+* <ComboboxPopover store={store}>
+*   <ComboboxItem value="Item 1" />
+*   <Role {...props} />
+*   <ComboboxItem value="Item 2" />
+*   <ComboboxItem value="Item 3" />
+* </ComboboxPopover>
+* ```
+*/
+const useComboboxSeparator = createHook(function useComboboxSeparator({ store, ...props }) {
+	const context = useComboboxScopedContext();
+	store = store || context;
+	invariant(store, "ComboboxSeparator must be wrapped in a ComboboxList or ComboboxPopover component.");
+	props = useCompositeSeparator({
+		store,
+		...props
+	});
+	return props;
+});
+/**
+* Renders a divider between
+* [`ComboboxItem`](https://ariakit.com/reference/combobox-item) elements.
+* @deprecated Use
+* [`ComboboxGroup`](https://ariakit.com/reference/combobox-group) with CSS
+* borders instead.
+* @see https://ariakit.com/components/combobox
+* @example
+* ```jsx {5}
+* <ComboboxProvider>
+*   <Combobox />
+*   <ComboboxPopover>
+*     <ComboboxItem value="Item 1" />
+*     <ComboboxSeparator />
+*     <ComboboxItem value="Item 2" />
+*     <ComboboxItem value="Item 3" />
+*   </ComboboxPopover>
+* </ComboboxProvider>
+* ```
+*/
+const ComboboxSeparator = forwardRef(function ComboboxSeparator(props) {
+	return createElement(TagName, useComboboxSeparator(props));
+});
+//#endregion
+export { ComboboxSeparator, useComboboxSeparator };
+
+//# sourceMappingURL=combobox-separator.js.map

package/dist/combobox/combobox-separator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox-separator.js","names":[],"sources":["../../src/combobox/combobox-separator.tsx"],"sourcesContent":["import { createElement, createHook, forwardRef } from \"@ariakit/react-utils\";\nimport type { Props } from \"@ariakit/react-utils\";\nimport { invariant } from \"@ariakit/utils\";\nimport type { ElementType } from \"react\";\nimport type { CompositeSeparatorOptions } from \"../composite/composite-separator.tsx\";\nimport { useCompositeSeparator } from \"../composite/composite-separator.tsx\";\nimport { useComboboxScopedContext } from \"./combobox-context.tsx\";\nimport type { ComboboxStore } from \"./combobox-store.ts\";\n\nconst TagName = \"hr\" satisfies ElementType;\ntype TagName = typeof TagName;\n\n/**\n * Returns props a `ComboboxSeparator` component for combobox items.\n * @deprecated Use `useComboboxGroup` with CSS borders instead.\n * @see https://ariakit.com/components/combobox\n * @example\n * ```jsx\n * const store = useComboboxStore();\n * const props = useComboboxSeparator({ store });\n * <ComboboxPopover store={store}>\n *   <ComboboxItem value=\"Item 1\" />\n *   <Role {...props} />\n *   <ComboboxItem value=\"Item 2\" />\n *   <ComboboxItem value=\"Item 3\" />\n * </ComboboxPopover>\n * ```\n */\nexport const useComboboxSeparator = createHook<\n  TagName,\n  ComboboxSeparatorOptions\n>(function useComboboxSeparator({ store, ...props }) {\n  const context = useComboboxScopedContext();\n  store = store || context;\n\n  invariant(\n    store,\n    process.env.NODE_ENV !== \"production\" &&\n      \"ComboboxSeparator must be wrapped in a ComboboxList or ComboboxPopover component.\",\n  );\n\n  props = useCompositeSeparator({ store, ...props });\n  return props;\n});\n\n/**\n * Renders a divider between\n * [`ComboboxItem`](https://ariakit.com/reference/combobox-item) elements.\n * @deprecated Use\n * [`ComboboxGroup`](https://ariakit.com/reference/combobox-group) with CSS\n * borders instead.\n * @see https://ariakit.com/components/combobox\n * @example\n * ```jsx {5}\n * <ComboboxProvider>\n *   <Combobox />\n *   <ComboboxPopover>\n *     <ComboboxItem value=\"Item 1\" />\n *     <ComboboxSeparator />\n *     <ComboboxItem value=\"Item 2\" />\n *     <ComboboxItem value=\"Item 3\" />\n *   </ComboboxPopover>\n * </ComboboxProvider>\n * ```\n */\nexport const ComboboxSeparator = forwardRef(function ComboboxSeparator(\n  props: ComboboxSeparatorProps,\n) {\n  const htmlProps = useComboboxSeparator(props);\n  return createElement(TagName, htmlProps);\n});\n\nexport interface ComboboxSeparatorOptions<\n  T extends ElementType = TagName,\n> extends CompositeSeparatorOptions<T> {\n  /**\n   * Object returned by the\n   * [`useComboboxStore`](https://ariakit.com/reference/use-combobox-store)\n   * hook. If not provided, the closest\n   * [`ComboboxList`](https://ariakit.com/reference/combobox-list) or\n   * [`ComboboxPopover`](https://ariakit.com/reference/combobox-popover)\n   * components' context will be used.\n   */\n  store?: ComboboxStore;\n}\n\nexport type ComboboxSeparatorProps<T extends ElementType = TagName> = Props<\n  T,\n  ComboboxSeparatorOptions<T>\n>;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;MAgCE,uBAAgB,WAAA,SAAyB,qBAAA,EAAA,OAAA,GAAA,SAAA;CACzC,MAAA,UAAQ,yBAAS;CAEjB,QAAA,SAGI;CAGJ,UAAQ,OAAA,mFAAsB;SAAE,sBAAA;EAAO;EAAU,GAAA;CACjD,CAAA;CACD,OAAA;;;;;;;;;;;;;;;;;;;;;;MA0BC,oBAAqB,WADH,SAAA,kBACqB,OAAA;CACxC,OAAA,cAAA,SAAA,qBAAA,KAAA,CAAA"}

package/dist/combobox/combobox-store.d.ts

@@ -0,0 +1,2 @@
+import { a as ComboboxStoreProps, c as useComboboxStore, i as ComboboxStoreOptions, l as useComboboxStoreOptions, n as ComboboxStoreFunctions, o as ComboboxStoreSelectedValue, r as ComboboxStoreItem, s as ComboboxStoreState, t as ComboboxStore, u as useComboboxStoreProps } from "../combobox-store-DEVQ45mZ.js";
+export { ComboboxStore, ComboboxStoreFunctions, ComboboxStoreItem, ComboboxStoreOptions, ComboboxStoreProps, ComboboxStoreSelectedValue, ComboboxStoreState, useComboboxStore, useComboboxStoreOptions, useComboboxStoreProps };

package/dist/combobox/combobox-store.js

@@ -0,0 +1,33 @@
+"use client";
+import { useCompositeStoreOptions, useCompositeStoreProps } from "../composite/composite-store.js";
+import { usePopoverStoreProps } from "../popover/popover-store.js";
+import { useTagContext } from "../tag/tag-context.js";
+import { useUpdateEffect } from "@ariakit/react-utils";
+import { useStore, useStoreProps } from "@ariakit/react-store";
+import * as Core from "@ariakit/components/combobox/combobox-store";
+//#region src/combobox/combobox-store.ts
+function useComboboxStoreOptions(props) {
+	const tag = useTagContext();
+	props = {
+		...props,
+		tag: props.tag !== void 0 ? props.tag : tag
+	};
+	return useCompositeStoreOptions(props);
+}
+function useComboboxStoreProps(store, update, props) {
+	useUpdateEffect(update, [props.tag]);
+	useStoreProps(store, props, "value", "setValue");
+	useStoreProps(store, props, "selectedValue", "setSelectedValue");
+	useStoreProps(store, props, "resetValueOnHide");
+	useStoreProps(store, props, "resetValueOnSelect");
+	return Object.assign(useCompositeStoreProps(usePopoverStoreProps(store, update, props), update, props), { tag: props.tag });
+}
+function useComboboxStore(props = {}) {
+	props = useComboboxStoreOptions(props);
+	const [store, update] = useStore(Core.createComboboxStore, props);
+	return useComboboxStoreProps(store, update, props);
+}
+//#endregion
+export { useComboboxStore, useComboboxStoreOptions, useComboboxStoreProps };
+
+//# sourceMappingURL=combobox-store.js.map

package/dist/combobox/combobox-store.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox-store.js","names":[],"sources":["../../src/combobox/combobox-store.ts"],"sourcesContent":["import * as Core from \"@ariakit/components/combobox/combobox-store\";\nimport { useStore, useStoreProps } from \"@ariakit/react-store\";\nimport type { Store } from \"@ariakit/react-store\";\nimport { useUpdateEffect } from \"@ariakit/react-utils\";\nimport type { PickRequired } from \"@ariakit/utils\";\nimport type {\n  CompositeStoreFunctions,\n  CompositeStoreOptions,\n  CompositeStoreState,\n} from \"../composite/composite-store.ts\";\nimport {\n  useCompositeStoreOptions,\n  useCompositeStoreProps,\n} from \"../composite/composite-store.ts\";\nimport type {\n  PopoverStoreFunctions,\n  PopoverStoreOptions,\n  PopoverStoreState,\n} from \"../popover/popover-store.ts\";\nimport { usePopoverStoreProps } from \"../popover/popover-store.ts\";\nimport { useTagContext } from \"../tag/tag-context.tsx\";\nimport type { TagStore } from \"../tag/tag-store.ts\";\n\nexport function useComboboxStoreOptions<T extends Core.ComboboxStoreOptions>(\n  props: T,\n) {\n  const tag = useTagContext();\n  props = {\n    ...props,\n    tag: props.tag !== undefined ? props.tag : tag,\n  };\n  return useCompositeStoreOptions(props);\n}\n\nexport function useComboboxStoreProps<T extends Core.ComboboxStore>(\n  store: T,\n  update: () => void,\n  props: ComboboxStoreProps,\n) {\n  useUpdateEffect(update, [props.tag]);\n\n  useStoreProps(store, props, \"value\", \"setValue\");\n  useStoreProps(store, props, \"selectedValue\", \"setSelectedValue\");\n  useStoreProps(store, props, \"resetValueOnHide\");\n  useStoreProps(store, props, \"resetValueOnSelect\");\n\n  return Object.assign(\n    useCompositeStoreProps(\n      usePopoverStoreProps(store, update, props),\n      update,\n      props,\n    ),\n    { tag: props.tag },\n  );\n}\n\n/**\n * Creates a combobox store to control the state of\n * [Combobox](https://ariakit.com/components/combobox) components.\n * @see https://ariakit.com/components/combobox\n * @example\n * ```jsx\n * const combobox = useComboboxStore();\n *\n * <ComboboxProvider store={combobox}>\n *   <Combobox />\n *   <ComboboxPopover>\n *     <ComboboxItem value=\"Apple\" />\n *     <ComboboxItem value=\"Banana\" />\n *     <ComboboxItem value=\"Orange\" />\n *   </ComboboxPopover>\n * </ComboboxProvider>\n * ```\n */\nexport function useComboboxStore<\n  T extends ComboboxStoreSelectedValue = ComboboxStoreSelectedValue,\n>(\n  props: PickRequired<\n    ComboboxStoreProps<T>,\n    \"selectedValue\" | \"defaultSelectedValue\"\n  >,\n): ComboboxStore<T>;\n\nexport function useComboboxStore(props?: ComboboxStoreProps): ComboboxStore;\n\nexport function useComboboxStore(\n  props: ComboboxStoreProps = {},\n): ComboboxStore {\n  props = useComboboxStoreOptions(props);\n  const [store, update] = useStore(Core.createComboboxStore, props);\n  return useComboboxStoreProps(store, update, props);\n}\n\nexport type ComboboxStoreSelectedValue = Core.ComboboxStoreSelectedValue;\n\nexport interface ComboboxStoreItem extends Core.ComboboxStoreItem {}\n\nexport interface ComboboxStoreState<\n  T extends ComboboxStoreSelectedValue = ComboboxStoreSelectedValue,\n>\n  extends\n    Core.ComboboxStoreState<T>,\n    CompositeStoreState<ComboboxStoreItem>,\n    PopoverStoreState {}\n\nexport interface ComboboxStoreFunctions<\n  T extends ComboboxStoreSelectedValue = ComboboxStoreSelectedValue,\n>\n  extends\n    Pick<ComboboxStoreOptions<T>, \"tag\">,\n    Omit<Core.ComboboxStoreFunctions<T>, \"tag\" | \"disclosure\">,\n    CompositeStoreFunctions<ComboboxStoreItem>,\n    PopoverStoreFunctions {}\n\nexport interface ComboboxStoreOptions<\n  T extends ComboboxStoreSelectedValue = ComboboxStoreSelectedValue,\n>\n  extends\n    Omit<Core.ComboboxStoreOptions<T>, \"tag\" | \"disclosure\">,\n    CompositeStoreOptions<ComboboxStoreItem>,\n    PopoverStoreOptions {\n  /**\n   * A callback that gets called when the\n   * [`value`](https://ariakit.com/reference/combobox-provider#value) state\n   * changes.\n   *\n   * Live examples:\n   * - [Combobox with integrated\n   *   filter](https://ariakit.com/examples/combobox-filtering-integrated)\n   * - [ComboboxGroup](https://ariakit.com/examples/combobox-group)\n   * - [Combobox with links](https://ariakit.com/examples/combobox-links)\n   * - [Multi-selectable\n   *   Combobox](https://ariakit.com/examples/combobox-multiple)\n   * - [Menu with Combobox](https://ariakit.com/examples/menu-combobox)\n   * - [Select with Combobox](https://ariakit.com/examples/select-combobox)\n   */\n  setValue?: (value: ComboboxStoreState<T>[\"value\"]) => void;\n  /**\n   * A callback that's invoked when the\n   * [`selectedValue`](https://ariakit.com/reference/combobox-provider#selectedvalue)\n   * state changes, typically when the user selects an item. This can be used to\n   * implement behavior like `onSelect` or `onItemSelect`.\n   *\n   * Live examples:\n   * - [Multi-selectable\n   *   Combobox](https://ariakit.com/examples/combobox-multiple)\n   */\n  setSelectedValue?: (value: ComboboxStoreState<T>[\"selectedValue\"]) => void;\n  /**\n   * A reference to a [tag store](https://ariakit.com/apis/use-tag-store). It's\n   * automatically set when rendering a combobox within a tag list.\n   */\n  tag?: TagStore | null;\n}\n\nexport interface ComboboxStoreProps<\n  T extends ComboboxStoreSelectedValue = ComboboxStoreSelectedValue,\n>\n  extends\n    ComboboxStoreOptions<T>,\n    Omit<Core.ComboboxStoreProps<T>, \"tag\" | \"disclosure\"> {}\n\nexport interface ComboboxStore<\n  T extends ComboboxStoreSelectedValue = ComboboxStoreSelectedValue,\n>\n  extends\n    ComboboxStoreFunctions<T>,\n    Omit<Store<Core.ComboboxStore<T>>, \"tag\" | \"disclosure\"> {}\n"],"mappings":";;;;;;;;SA0BQ,wBAAoB,OAAA;CAC1B,MAAA,MAAQ,cAAA;SACH;EACH,GAAA;EACF,KAAA,MAAA,QAAA,KAAA,IAAA,MAAA,MAAA;CACA;CACF,OAAA,yBAAA,KAAA;AAEA;SAKE,sBAAyB,OAAU,QAAA,OAAA;CAEnC,gBAAc,QAAO,CAAA,MAAO,GAAA,CAAA;CAC5B,cAAc,OAAO,OAAO,SAAA,UAAiB;CAC7C,cAAc,OAAO,OAAO,iBAAA,kBAAkB;CAC9C,cAAc,OAAO,OAAO,kBAAA;CAE5B,cAAc,OACZ,OAAA,oBACE;CAMN,OAAA,OAAA,OAAA,uBAAA,qBAAA,OAAA,QAAA,KAAA,GAAA,QAAA,KAAA,GAAA,EAAA,KAAA,MAAA,IAAA,CAAA;AA+BA;SAGU,iBAAA,QAAwB,CAAA,GAAK;CACrC,QAAO,wBAAiB,KAAS;CACjC,MAAA,CAAO,OAAA,UAAA,SAAsB,KAAO,qBAAa,KAAA;CACnD,OAAA,sBAAA,OAAA,QAAA,KAAA"}

package/dist/combobox/combobox-value.d.ts

@@ -0,0 +1,49 @@
+import { s as ComboboxStoreState, t as ComboboxStore } from "../combobox-store-DEVQ45mZ.js";
+import { ReactNode } from "react";
+
+//#region src/combobox/combobox-value.d.ts
+/**
+ * Renders the current
+ * [`value`](https://ariakit.com/reference/use-combobox-store#value) state in
+ * the [combobox store](https://ariakit.com/reference/use-combobox-store).
+ *
+ * As a value component, it doesn't render any DOM elements and therefore
+ * doesn't accept HTML props.
+ *
+ * It takes a
+ * [`children`](https://ariakit.com/reference/combobox-value#children) function
+ * that gets called with the current value as an argument. This can be used as
+ * an uncontrolled API to render the combobox value in a custom way.
+ * @see https://ariakit.com/components/combobox
+ * @example
+ * ```jsx {3-5}
+ * <ComboboxProvider>
+ *   <Combobox />
+ *   <ComboboxValue>
+ *     {(value) => `Current value: ${value}`}
+ *   </ComboboxValue>
+ * </ComboboxProvider>
+ * ```
+ */
+declare function ComboboxValue({
+  store,
+  children
+}?: ComboboxValueProps): ReactNode;
+interface ComboboxValueProps {
+  /**
+   * Object returned by the
+   * [`useComboboxStore`](https://ariakit.com/reference/use-combobox-store)
+   * hook. If not provided, the closest
+   * [`ComboboxProvider`](https://ariakit.com/reference/combobox-provider)
+   * component's context will be used.
+   */
+  store?: ComboboxStore;
+  /**
+   * A function that gets called with the current value as an argument. It can
+   * be used to render the combobox value in a custom way.
+   */
+  children?: (value: ComboboxStoreState["value"]) => ReactNode;
+}
+//#endregion
+export { ComboboxValue, ComboboxValueProps };
+//# sourceMappingURL=combobox-value.d.ts.map