@ariakit/react-components 0.1.0

package/dist/combobox/combobox-cancel.js

@@ -0,0 +1,98 @@
+"use client";
+import { useButton } from "../button/button.js";
+import { useComboboxProviderContext } from "./combobox-context.js";
+import { createElement, createHook, forwardRef, useEvent, useWrapElement } from "@ariakit/react-utils";
+import { invariant } from "@ariakit/utils";
+import { Fragment } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useStoreState } from "@ariakit/react-store";
+//#region src/combobox/combobox-cancel.tsx
+const TagName = "button";
+const children = /* @__PURE__ */ jsxs("svg", {
+	"aria-hidden": "true",
+	display: "block",
+	viewBox: "0 0 16 16",
+	fill: "none",
+	stroke: "currentColor",
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	strokeWidth: 1.5,
+	width: "1em",
+	height: "1em",
+	pointerEvents: "none",
+	children: [/* @__PURE__ */ jsx("line", {
+		x1: "5",
+		y1: "5",
+		x2: "11",
+		y2: "11"
+	}), /* @__PURE__ */ jsx("line", {
+		x1: "5",
+		y1: "11",
+		x2: "11",
+		y2: "5"
+	})]
+});
+/**
+* Returns props to create a `ComboboxCancel` component that clears the combobox
+* input when clicked.
+* @see https://ariakit.com/components/combobox
+* @example
+* ```jsx
+* const store = useComboboxStore();
+* const props = useComboboxCancel({ store });
+* <Combobox store={store} />
+* <Role {...props} />
+* ```
+*/
+const useComboboxCancel = createHook(function useComboboxCancel({ store, hideWhenEmpty, ...props }) {
+	const context = useComboboxProviderContext();
+	store = store || context;
+	invariant(store, "ComboboxCancel must receive a `store` prop or be wrapped in a ComboboxProvider component.");
+	const onClickProp = props.onClick;
+	const onClick = useEvent((event) => {
+		onClickProp?.(event);
+		if (event.defaultPrevented) return;
+		store?.setValue("");
+		store?.move(null);
+	});
+	const comboboxId = useStoreState(store, (state) => state.baseElement?.id);
+	const empty = useStoreState(store, (state) => state.value === "");
+	props = useWrapElement(props, (element) => {
+		if (!hideWhenEmpty) return element;
+		if (empty) return /* @__PURE__ */ jsx(Fragment, {});
+		return element;
+	}, [hideWhenEmpty, empty]);
+	props = {
+		children,
+		"aria-label": "Clear input",
+		"aria-controls": comboboxId,
+		...props,
+		onClick
+	};
+	props = useButton(props);
+	return props;
+});
+/**
+* Renders a combobox cancel button that clears the combobox input value when
+* clicked.
+* @see https://ariakit.com/components/combobox
+* @example
+* ```jsx {3}
+* <ComboboxProvider>
+*   <Combobox />
+*   <ComboboxCancel />
+*   <ComboboxPopover>
+*     <ComboboxItem value="Apple" />
+*     <ComboboxItem value="Banana" />
+*     <ComboboxItem value="Orange" />
+*   </ComboboxPopover>
+* </ComboboxProvider>
+* ```
+*/
+const ComboboxCancel = forwardRef(function ComboboxCancel(props) {
+	return createElement(TagName, useComboboxCancel(props));
+});
+//#endregion
+export { ComboboxCancel, useComboboxCancel };
+
+//# sourceMappingURL=combobox-cancel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"combobox-cancel.js","names":[],"sources":["../../src/combobox/combobox-cancel.tsx"],"sourcesContent":["import { useStoreState } from \"@ariakit/react-store\";\nimport {\n  useEvent,\n  useWrapElement,\n  createElement,\n  createHook,\n  forwardRef,\n} from \"@ariakit/react-utils\";\nimport type { Props } from \"@ariakit/react-utils\";\nimport { invariant } from \"@ariakit/utils\";\nimport type { ElementType, MouseEvent } from \"react\";\nimport { Fragment } from \"react\";\nimport type { ButtonOptions } from \"../button/button.tsx\";\nimport { useButton } from \"../button/button.tsx\";\nimport { useComboboxProviderContext } from \"./combobox-context.tsx\";\nimport type { ComboboxStore } from \"./combobox-store.ts\";\n\nconst TagName = \"button\" satisfies ElementType;\ntype TagName = typeof TagName;\ntype HTMLType = HTMLElementTagNameMap[TagName];\n\nconst children = (\n  <svg\n    aria-hidden=\"true\"\n    display=\"block\"\n    viewBox=\"0 0 16 16\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n    strokeWidth={1.5}\n    width=\"1em\"\n    height=\"1em\"\n    pointerEvents=\"none\"\n  >\n    <line x1=\"5\" y1=\"5\" x2=\"11\" y2=\"11\" />\n    <line x1=\"5\" y1=\"11\" x2=\"11\" y2=\"5\" />\n  </svg>\n);\n\n/**\n * Returns props to create a `ComboboxCancel` component that clears the combobox\n * input when clicked.\n * @see https://ariakit.com/components/combobox\n * @example\n * ```jsx\n * const store = useComboboxStore();\n * const props = useComboboxCancel({ store });\n * <Combobox store={store} />\n * <Role {...props} />\n * ```\n */\nexport const useComboboxCancel = createHook<TagName, ComboboxCancelOptions>(\n  function useComboboxCancel({ store, hideWhenEmpty, ...props }) {\n    const context = useComboboxProviderContext();\n    store = store || context;\n\n    invariant(\n      store,\n      process.env.NODE_ENV !== \"production\" &&\n        \"ComboboxCancel must receive a `store` prop or be wrapped in a ComboboxProvider component.\",\n    );\n\n    const onClickProp = props.onClick;\n\n    const onClick = useEvent((event: MouseEvent<HTMLType>) => {\n      onClickProp?.(event);\n      if (event.defaultPrevented) return;\n      store?.setValue(\"\");\n      // Move focus to the combobox input.\n      store?.move(null);\n    });\n\n    const comboboxId = useStoreState(store, (state) => state.baseElement?.id);\n    const empty = useStoreState(store, (state) => state.value === \"\");\n\n    props = useWrapElement(\n      props,\n      (element) => {\n        if (!hideWhenEmpty) return element;\n        if (empty) return <Fragment />;\n        return element;\n      },\n      [hideWhenEmpty, empty],\n    );\n\n    props = {\n      children,\n      \"aria-label\": \"Clear input\",\n      // This aria-controls will ensure the combobox popup remains visible when\n      // this element gets focused. This logic is done in the ComboboxPopover\n      // component.\n      \"aria-controls\": comboboxId,\n      ...props,\n      onClick,\n    };\n\n    props = useButton(props);\n\n    return props;\n  },\n);\n\n/**\n * Renders a combobox cancel button that clears the combobox input value when\n * clicked.\n * @see https://ariakit.com/components/combobox\n * @example\n * ```jsx {3}\n * <ComboboxProvider>\n *   <Combobox />\n *   <ComboboxCancel />\n *   <ComboboxPopover>\n *     <ComboboxItem value=\"Apple\" />\n *     <ComboboxItem value=\"Banana\" />\n *     <ComboboxItem value=\"Orange\" />\n *   </ComboboxPopover>\n * </ComboboxProvider>\n * ```\n */\nexport const ComboboxCancel = forwardRef(function ComboboxCancel(\n  props: ComboboxCancelProps,\n) {\n  const htmlProps = useComboboxCancel(props);\n  return createElement(TagName, htmlProps);\n});\n\nexport interface ComboboxCancelOptions<\n  T extends ElementType = TagName,\n> extends ButtonOptions<T> {\n  /**\n   * Object returned by the\n   * [`useComboboxStore`](https://ariakit.com/reference/use-combobox-store)\n   * hook. If not provided, the closest\n   * [`ComboboxProvider`](https://ariakit.com/reference/combobox-provider)\n   * component's context will be used.\n   */\n  store?: ComboboxStore;\n  /**\n   * When enabled, the button won't be rendered when the combobox input value is\n   * empty.\n   *\n   * Live examples:\n   * - [Combobox with Tabs](https://ariakit.com/examples/combobox-tabs)\n   * @default false\n   */\n  hideWhenEmpty?: boolean;\n}\n\nexport type ComboboxCancelProps<T extends ElementType = TagName> = Props<\n  T,\n  ComboboxCancelOptions<T>\n>;\n"],"mappings":";;;;;;;;;AAqBA,MAAM,UAAA;MAEF,WAAY,qBAAA,OAAA;CACZ,eAAQ;CACR,SAAQ;CACR,SAAK;CACL,MAAA;CACA,QAAA;CACA,eAAA;CACA,gBAAa;CACb,aAAM;CACN,OAAA;CACA,QAAA;gBAEA;WAAS,CAAA,oBAAA,QAAA;EAAI,IAAG;EAAI,IAAG;EAAK,IAAG;EAAM,IACrC;EAAM,GAAG,oBAAA,QAAA;EAAI,IAAG;EAAK,IAAG;EAAK,IAAG;EAAK,IAClC;;;;;;;;;;;;;;;MAiBH,oBAAgB,WAAA,SAA2B,kBAAA,EAAA,OAAA,eAAA,GAAA,SAAA;CAC3C,MAAA,UAAQ,2BAAS;CAEjB,QAAA,SAGI;CAGJ,UAAM,OAAA,2FAAoB;CAE1B,MAAM,cAAU,MAAU;OACxB,UAAc,UAAK,UAAA;EACnB,cAAU,KAAA;EACV,IAAA,MAAO,kBAAW;EAElB,OAAO,SAAS,EAAA;EACjB,OAAA,KAAA,IAAA;CAED,CAAA;CACA,MAAM,aAAQ,cAAc,QAAQ,UAAU,MAAM,aAAY,EAAA;CAEhE,MAAA,QAAQ,cACN,QACC,UAAY,MAAA,UAAA,EAAA;SACN,eAAe,QAAO,YAAA;EAC3B,IAAI,CAAA,eAAc,OAAA;EAClB,IAAA,OAAO,OAAA,oBAAA,UAAA,CAAA,CAAA;EACT,OACC;CAGH,GAAA,CAAA,eAAQ,KAAA,CAAA;SACN;EACA;EAIA,cAAA;EACA,iBAAG;EACH,GAAA;EACF;CAEA;CAEA,QAAO,UAAA,KAAA;CAEX,OAAA;;;;;;;;;;;;;;;;;;;MAuBE,iBAAqB,WADH,SAAA,eACqB,OAAA;CACxC,OAAA,cAAA,SAAA,kBAAA,KAAA,CAAA"}

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

@@ -0,0 +1,27 @@
+import { t as ComboboxStore } from "../combobox-store-DEVQ45mZ.js";
+
+//#region src/combobox/combobox-context.d.ts
+declare const ComboboxListRoleContext: import("react").Context<string | undefined>;
+/**
+ * Returns the combobox store from the nearest combobox container.
+ * @example
+ * function Combobox() {
+ *   const store = useComboboxContext();
+ *
+ *   if (!store) {
+ *     throw new Error("Combobox must be wrapped in ComboboxProvider");
+ *   }
+ *
+ *   // Use the store...
+ * }
+ */
+declare const useComboboxContext: () => ComboboxStore<import("@ariakit/components/combobox/combobox-store").ComboboxStoreSelectedValue> | undefined;
+declare const useComboboxScopedContext: (onlyScoped?: boolean) => ComboboxStore<import("@ariakit/components/combobox/combobox-store").ComboboxStoreSelectedValue> | undefined;
+declare const useComboboxProviderContext: () => ComboboxStore<import("@ariakit/components/combobox/combobox-store").ComboboxStoreSelectedValue> | undefined;
+declare const ComboboxContextProvider: (props: import("react").ProviderProps<ComboboxStore<import("@ariakit/components/combobox/combobox-store").ComboboxStoreSelectedValue> | undefined>) => import("react/jsx-runtime").JSX.Element;
+declare const ComboboxScopedContextProvider: (props: import("react").ProviderProps<ComboboxStore<import("@ariakit/components/combobox/combobox-store").ComboboxStoreSelectedValue> | undefined>) => import("react/jsx-runtime").JSX.Element;
+declare const ComboboxItemValueContext: import("react").Context<string | undefined>;
+declare const ComboboxItemCheckedContext: import("react").Context<boolean>;
+//#endregion
+export { ComboboxContextProvider, ComboboxItemCheckedContext, ComboboxItemValueContext, ComboboxListRoleContext, ComboboxScopedContextProvider, useComboboxContext, useComboboxProviderContext, useComboboxScopedContext };
+//# sourceMappingURL=combobox-context.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"combobox-context.d.ts","names":["ComboboxStore","ComboboxListRoleContext","Context","useComboboxContext","ComboboxStoreSelectedValue","useComboboxScopedContext","onlyScoped","useComboboxProviderContext","ComboboxContextProvider","ProviderProps","props","JSX","Element","ComboboxScopedContextProvider","ComboboxItemValueContext","ComboboxItemCheckedContext"],"sources":["../../src/combobox/combobox-context.d.ts"],"mappings":";;;cACqBC,uBAAAA,kBAAyCC,OAAO;;AAArE;;;;AAAqE;AAcrE;;;;AAA6I;AAC7I;;cADqBC,kBAAAA,QAA0BH,aAAa,uDAAuDI,0BAA0B;AAAA,cACxHC,wBAAAA,GAA2BC,UAAAA,eAAyBN,aAAa,uDAAuDI,0BAAAA;AAAAA,cACxHG,0BAAAA,QAAkCP,aAAa,uDAAuDI,0BAA0B;AAAA,cAChII,uBAAAA,GAA0BE,KAAAA,kBAAuBD,aAAAA,CAAcT,aAAa,uDAAuDI,0BAAAA,+CAAyEO,GAAAA,CAAIC,OAAAA;AAAAA,cAChNC,6BAAAA,GAAgCH,KAAAA,kBAAuBD,aAAAA,CAAcT,aAAa,uDAAuDI,0BAAAA,+CAAyEO,GAAAA,CAAIC,OAAAA;AAAAA,cACtNE,wBAAAA,kBAA0CZ,OAAO;AAAA,cACjDa,0BAAAA,kBAA4Cb,OAAO"}

package/dist/combobox/combobox-context.js

@@ -0,0 +1,32 @@
+"use client";
+import { CompositeContextProvider, CompositeScopedContextProvider } from "../composite/composite-context.js";
+import { PopoverContextProvider, PopoverScopedContextProvider } from "../popover/popover-context.js";
+import { createStoreContext } from "@ariakit/react-utils";
+import { createContext } from "react";
+//#region src/combobox/combobox-context.tsx
+const ComboboxListRoleContext = createContext(void 0);
+const ctx = createStoreContext([PopoverContextProvider, CompositeContextProvider], [PopoverScopedContextProvider, CompositeScopedContextProvider]);
+/**
+* Returns the combobox store from the nearest combobox container.
+* @example
+* function Combobox() {
+*   const store = useComboboxContext();
+*
+*   if (!store) {
+*     throw new Error("Combobox must be wrapped in ComboboxProvider");
+*   }
+*
+*   // Use the store...
+* }
+*/
+const useComboboxContext = ctx.useContext;
+const useComboboxScopedContext = ctx.useScopedContext;
+const useComboboxProviderContext = ctx.useProviderContext;
+const ComboboxContextProvider = ctx.ContextProvider;
+const ComboboxScopedContextProvider = ctx.ScopedContextProvider;
+const ComboboxItemValueContext = createContext(void 0);
+const ComboboxItemCheckedContext = createContext(false);
+//#endregion
+export { ComboboxContextProvider, ComboboxItemCheckedContext, ComboboxItemValueContext, ComboboxListRoleContext, ComboboxScopedContextProvider, useComboboxContext, useComboboxProviderContext, useComboboxScopedContext };
+
+//# sourceMappingURL=combobox-context.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"combobox-context.js","names":[],"sources":["../../src/combobox/combobox-context.tsx"],"sourcesContent":["import { createStoreContext } from \"@ariakit/react-utils\";\nimport { createContext } from \"react\";\nimport {\n  CompositeContextProvider,\n  CompositeScopedContextProvider,\n} from \"../composite/composite-context.tsx\";\nimport {\n  PopoverContextProvider,\n  PopoverScopedContextProvider,\n} from \"../popover/popover-context.tsx\";\nimport type { ComboboxStore } from \"./combobox-store.ts\";\n\nexport const ComboboxListRoleContext = createContext<string | undefined>(\n  undefined,\n);\n\nconst ctx = createStoreContext<ComboboxStore>(\n  [PopoverContextProvider, CompositeContextProvider],\n  [PopoverScopedContextProvider, CompositeScopedContextProvider],\n);\n\n/**\n * Returns the combobox store from the nearest combobox container.\n * @example\n * function Combobox() {\n *   const store = useComboboxContext();\n *\n *   if (!store) {\n *     throw new Error(\"Combobox must be wrapped in ComboboxProvider\");\n *   }\n *\n *   // Use the store...\n * }\n */\nexport const useComboboxContext = ctx.useContext;\n\nexport const useComboboxScopedContext = ctx.useScopedContext;\n\nexport const useComboboxProviderContext = ctx.useProviderContext;\n\nexport const ComboboxContextProvider = ctx.ContextProvider;\n\nexport const ComboboxScopedContextProvider = ctx.ScopedContextProvider;\n\nexport const ComboboxItemValueContext = createContext<string | undefined>(\n  undefined,\n);\n\nexport const ComboboxItemCheckedContext = createContext(false);\n"],"mappings":";;;;;;AAgBA,MAAM,0BACH,cAAA,KAAA,CAAA;;;;;;;;;;;;;;;AAmBH,MAAa,qBAAA,IAAA;AAEb,MAAa,2BAAA,IAA6B;AAE1C,MAAa,6BAA0B,IAAI;AAE3C,MAAa,0BAAA,IAAA;AAEb,MAAa,gCAA2B,IAAA;AAIxC,MAAa,2BAAA,cAA6B,KAAc,CAAA"}

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

@@ -0,0 +1,63 @@
+import { t as ComboboxStore } from "../combobox-store-DEVQ45mZ.js";
+import { n as DialogDisclosureOptions } from "../dialog-disclosure-DLD10zlb.js";
+import { Props } from "@ariakit/react-utils";
+import { ElementType } from "react";
+
+//#region src/combobox/combobox-disclosure.d.ts
+declare const TagName = "button";
+type TagName = typeof TagName;
+/**
+ * Returns props to create a `ComboboxDisclosure` component that toggles the
+ * combobox popover visibility when clicked.
+ * @see https://ariakit.com/components/combobox
+ * @example
+ * ```jsx
+ * const store = useComboboxStore();
+ * const props = useComboboxDisclosure({ store });
+ * <Combobox store={store} />
+ * <Role {...props} />
+ * <ComboboxPopover store={store}>
+ *   <ComboboxItem value="Item 1" />
+ *   <ComboboxItem value="Item 2" />
+ *   <ComboboxItem value="Item 3" />
+ * </ComboboxPopover>
+ * ```
+ */
+declare const useComboboxDisclosure: import("@ariakit/react-utils").Hook<"button", ComboboxDisclosureOptions<"button">>;
+/**
+ * Renders a combobox disclosure button that toggles the
+ * [`ComboboxPopover`](https://ariakit.com/reference/combobox-popover) element's
+ * visibility when clicked.
+ *
+ * Although this button is not tabbable, it remains accessible to screen reader
+ * users. On clicking, it automatically shifts focus to the
+ * [`Combobox`](https://ariakit.com/reference/combobox) element.
+ * @see https://ariakit.com/components/combobox
+ * @example
+ * ```jsx {3}
+ * <ComboboxProvider>
+ *   <Combobox />
+ *   <ComboboxDisclosure />
+ *   <ComboboxPopover>
+ *     <ComboboxItem value="Apple" />
+ *     <ComboboxItem value="Banana" />
+ *     <ComboboxItem value="Orange" />
+ *   </ComboboxPopover>
+ * </ComboboxProvider>
+ * ```
+ */
+declare const ComboboxDisclosure: (props: ComboboxDisclosureProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+interface ComboboxDisclosureOptions<T extends ElementType = TagName> extends DialogDisclosureOptions<T> {
+  /**
+   * 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;
+}
+type ComboboxDisclosureProps<T extends ElementType = TagName> = Props<T, ComboboxDisclosureOptions<T>>;
+//#endregion
+export { ComboboxDisclosure, ComboboxDisclosureOptions, ComboboxDisclosureProps, useComboboxDisclosure };
+//# sourceMappingURL=combobox-disclosure.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"combobox-disclosure.d.ts","names":["Props","ElementType","DialogDisclosureOptions","ComboboxStore","TagName","useComboboxDisclosure","ComboboxDisclosureOptions","Hook","ComboboxDisclosure","ComboboxDisclosureProps","props","ReactElement","JSXElementConstructor","T","store"],"sources":["../../src/combobox/combobox-disclosure.d.ts"],"mappings":";;;;;;cAIcI,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAF4B;;;;AACpC;AAAA;;;;AACQ;AAkB7B;;;;AAAmH;AAuBnH;;AA3CyD,cAoBpCC,qBAAAA,iCAAsDE,IAAAA,WAAeD,yBAAyB;;;;;;;AAuB0C;AAC7J;;;;;;;;;;;;;;;cADqBE,kBAAAA,GAAqBE,KAAAA,EAAOD,uBAAuB,qBAAqBE,YAAAA,+BAA2CC,qBAAAA;AAAAA,UACvHN,yBAAAA,WAAoCL,WAAAA,GAAcG,OAAAA,UAAiBF,uBAAAA,CAAwBW,CAAAA;EAQnF;AAAA;AAEzB;;;;;EAFIC,KAAAA,GAAQX,aAAAA;AAAAA;AAAAA,KAEAM,uBAAAA,WAAkCR,WAAAA,GAAcG,OAAAA,IAAWJ,KAAAA,CAAMa,CAAAA,EAAGP,yBAAAA,CAA0BO,CAAAA"}

package/dist/combobox/combobox-disclosure.js

@@ -0,0 +1,108 @@
+"use client";
+import { useComboboxProviderContext } from "./combobox-context.js";
+import { useDialogDisclosure } from "../dialog/dialog-disclosure.js";
+import { createElement, createHook, forwardRef, useEvent, useSafeLayoutEffect } from "@ariakit/react-utils";
+import { invariant } from "@ariakit/utils";
+import { jsx } from "react/jsx-runtime";
+import { useStoreState } from "@ariakit/react-store";
+//#region src/combobox/combobox-disclosure.tsx
+const TagName = "button";
+const children = /* @__PURE__ */ jsx("svg", {
+	"aria-hidden": "true",
+	display: "block",
+	fill: "none",
+	stroke: "currentColor",
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	strokeWidth: 1.5,
+	viewBox: "0 0 16 16",
+	height: "1em",
+	width: "1em",
+	pointerEvents: "none",
+	children: /* @__PURE__ */ jsx("polyline", { points: "4,6 8,10 12,6" })
+});
+/**
+* Returns props to create a `ComboboxDisclosure` component that toggles the
+* combobox popover visibility when clicked.
+* @see https://ariakit.com/components/combobox
+* @example
+* ```jsx
+* const store = useComboboxStore();
+* const props = useComboboxDisclosure({ store });
+* <Combobox store={store} />
+* <Role {...props} />
+* <ComboboxPopover store={store}>
+*   <ComboboxItem value="Item 1" />
+*   <ComboboxItem value="Item 2" />
+*   <ComboboxItem value="Item 3" />
+* </ComboboxPopover>
+* ```
+*/
+const useComboboxDisclosure = createHook(function useComboboxDisclosure({ store, ...props }) {
+	const context = useComboboxProviderContext();
+	store = store || context;
+	invariant(store, "ComboboxDisclosure must receive a `store` prop or be wrapped in a ComboboxProvider component.");
+	const onMouseDownProp = props.onMouseDown;
+	const onMouseDown = useEvent((event) => {
+		onMouseDownProp?.(event);
+		event.preventDefault();
+		store?.move(null);
+	});
+	const onClickProp = props.onClick;
+	const onClick = useEvent((event) => {
+		onClickProp?.(event);
+		if (event.defaultPrevented) return;
+		if (!store) return;
+		const { baseElement } = store.getState();
+		store.setDisclosureElement(baseElement);
+	});
+	const baseElement = useStoreState(store, "baseElement");
+	const open = useStoreState(store, "open");
+	useSafeLayoutEffect(() => {
+		if (!baseElement) return;
+		store.setDisclosureElement(baseElement);
+	}, [store, baseElement]);
+	props = {
+		children,
+		tabIndex: -1,
+		"aria-label": open ? "Hide popup" : "Show popup",
+		"aria-expanded": open,
+		...props,
+		onMouseDown,
+		onClick
+	};
+	props = useDialogDisclosure({
+		store,
+		...props
+	});
+	return props;
+});
+/**
+* Renders a combobox disclosure button that toggles the
+* [`ComboboxPopover`](https://ariakit.com/reference/combobox-popover) element's
+* visibility when clicked.
+*
+* Although this button is not tabbable, it remains accessible to screen reader
+* users. On clicking, it automatically shifts focus to the
+* [`Combobox`](https://ariakit.com/reference/combobox) element.
+* @see https://ariakit.com/components/combobox
+* @example
+* ```jsx {3}
+* <ComboboxProvider>
+*   <Combobox />
+*   <ComboboxDisclosure />
+*   <ComboboxPopover>
+*     <ComboboxItem value="Apple" />
+*     <ComboboxItem value="Banana" />
+*     <ComboboxItem value="Orange" />
+*   </ComboboxPopover>
+* </ComboboxProvider>
+* ```
+*/
+const ComboboxDisclosure = forwardRef(function ComboboxDisclosure(props) {
+	return createElement(TagName, useComboboxDisclosure(props));
+});
+//#endregion
+export { ComboboxDisclosure, useComboboxDisclosure };
+
+//# sourceMappingURL=combobox-disclosure.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"combobox-disclosure.js","names":[],"sources":["../../src/combobox/combobox-disclosure.tsx"],"sourcesContent":["import { useStoreState } from \"@ariakit/react-store\";\nimport {\n  useEvent,\n  useSafeLayoutEffect,\n  createElement,\n  createHook,\n  forwardRef,\n} from \"@ariakit/react-utils\";\nimport type { Props } from \"@ariakit/react-utils\";\nimport { invariant } from \"@ariakit/utils\";\nimport type { ElementType, MouseEvent } from \"react\";\nimport type { DialogDisclosureOptions } from \"../dialog/dialog-disclosure.tsx\";\nimport { useDialogDisclosure } from \"../dialog/dialog-disclosure.tsx\";\nimport { useComboboxProviderContext } from \"./combobox-context.tsx\";\nimport type { ComboboxStore } from \"./combobox-store.ts\";\n\nconst TagName = \"button\" satisfies ElementType;\ntype TagName = typeof TagName;\ntype HTMLType = HTMLElementTagNameMap[TagName];\n\nconst children = (\n  <svg\n    aria-hidden=\"true\"\n    display=\"block\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    strokeLinecap=\"round\"\n    strokeLinejoin=\"round\"\n    strokeWidth={1.5}\n    viewBox=\"0 0 16 16\"\n    height=\"1em\"\n    width=\"1em\"\n    pointerEvents=\"none\"\n  >\n    <polyline points=\"4,6 8,10 12,6\" />\n  </svg>\n);\n\n/**\n * Returns props to create a `ComboboxDisclosure` component that toggles the\n * combobox popover visibility when clicked.\n * @see https://ariakit.com/components/combobox\n * @example\n * ```jsx\n * const store = useComboboxStore();\n * const props = useComboboxDisclosure({ store });\n * <Combobox store={store} />\n * <Role {...props} />\n * <ComboboxPopover store={store}>\n *   <ComboboxItem value=\"Item 1\" />\n *   <ComboboxItem value=\"Item 2\" />\n *   <ComboboxItem value=\"Item 3\" />\n * </ComboboxPopover>\n * ```\n */\nexport const useComboboxDisclosure = createHook<\n  TagName,\n  ComboboxDisclosureOptions\n>(function useComboboxDisclosure({ store, ...props }) {\n  const context = useComboboxProviderContext();\n  store = store || context;\n\n  invariant(\n    store,\n    process.env.NODE_ENV !== \"production\" &&\n      \"ComboboxDisclosure must receive a `store` prop or be wrapped in a ComboboxProvider component.\",\n  );\n\n  const onMouseDownProp = props.onMouseDown;\n\n  const onMouseDown = useEvent((event: MouseEvent<HTMLType>) => {\n    onMouseDownProp?.(event);\n    // We have to prevent the element from getting focused on mousedown.\n    event.preventDefault();\n    // This will immediately move focus to the combobox input.\n    store?.move(null);\n  });\n\n  const onClickProp = props.onClick;\n\n  const onClick = useEvent((event: MouseEvent<HTMLType>) => {\n    onClickProp?.(event);\n    if (event.defaultPrevented) return;\n    if (!store) return;\n    const { baseElement } = store.getState();\n    store.setDisclosureElement(baseElement);\n  });\n\n  const baseElement = useStoreState(store, \"baseElement\");\n  const open = useStoreState(store, \"open\");\n\n  // The combobox input should remain the disclosure element so focus and Escape\n  // handling keep working when the popover is already open on mount.\n  useSafeLayoutEffect(() => {\n    if (!baseElement) return;\n    store.setDisclosureElement(baseElement);\n  }, [store, baseElement]);\n\n  props = {\n    children,\n    tabIndex: -1,\n    \"aria-label\": open ? \"Hide popup\" : \"Show popup\",\n    \"aria-expanded\": open,\n    ...props,\n    onMouseDown,\n    onClick,\n  };\n\n  // We're using DialogDisclosure, and not PopoverDisclosure, because\n  // PopoverDisclosure will also update the `store.anchorRef` with the\n  // disclosure element. We need to keep the combobox input as the anchorRef.\n  props = useDialogDisclosure({ store, ...props });\n\n  return props;\n});\n\n/**\n * Renders a combobox disclosure button that toggles the\n * [`ComboboxPopover`](https://ariakit.com/reference/combobox-popover) element's\n * visibility when clicked.\n *\n * Although this button is not tabbable, it remains accessible to screen reader\n * users. On clicking, it automatically shifts focus to the\n * [`Combobox`](https://ariakit.com/reference/combobox) element.\n * @see https://ariakit.com/components/combobox\n * @example\n * ```jsx {3}\n * <ComboboxProvider>\n *   <Combobox />\n *   <ComboboxDisclosure />\n *   <ComboboxPopover>\n *     <ComboboxItem value=\"Apple\" />\n *     <ComboboxItem value=\"Banana\" />\n *     <ComboboxItem value=\"Orange\" />\n *   </ComboboxPopover>\n * </ComboboxProvider>\n * ```\n */\nexport const ComboboxDisclosure = forwardRef(function ComboboxDisclosure(\n  props: ComboboxDisclosureProps,\n) {\n  const htmlProps = useComboboxDisclosure(props);\n  return createElement(TagName, htmlProps);\n});\n\nexport interface ComboboxDisclosureOptions<\n  T extends ElementType = TagName,\n> extends DialogDisclosureOptions<T> {\n  /**\n   * Object returned by the\n   * [`useComboboxStore`](https://ariakit.com/reference/use-combobox-store)\n   * hook. If not provided, the closest\n   * [`ComboboxProvider`](https://ariakit.com/reference/combobox-provider)\n   * component's context will be used.\n   */\n  store?: ComboboxStore;\n}\n\nexport type ComboboxDisclosureProps<T extends ElementType = TagName> = Props<\n  T,\n  ComboboxDisclosureOptions<T>\n>;\n"],"mappings":";;;;;;;;AAoBA,MAAM,UAAA;MAEF,WAAY,oBAAA,OAAA;CACZ,eAAQ;CACR,SAAK;CACL,MAAA;CACA,QAAA;CACA,eAAA;CACA,gBAAa;CACb,aAAQ;CACR,SAAO;CACP,QAAM;CACN,OAAA;gBAEA;CACG,UAAA,oBAAA,YAAA,EAAA,QAAA,gBAAA,CAAA;;;;;;;;;;;;;;;;;;;MAwBL,wBAAgB,WAAA,SAA2B,sBAAA,EAAA,OAAA,GAAA,SAAA;CAC3C,MAAA,UAAQ,2BAAS;CAEjB,QAAA,SAGI;CAGJ,UAAM,OAAA,+FAAwB;CAE9B,MAAM,kBAAc,MAAU;OAC5B,cAAkB,UAAK,UAAA;EAEvB,kBAAM,KAAe;EAErB,MAAA,eAAgB;EACjB,OAAA,KAAA,IAAA;CAED,CAAA;CAEA,MAAM,cAAU,MAAU;OACxB,UAAc,UAAK,UAAA;EACnB,cAAU,KAAA;EACV,IAAI,MAAC,kBAAO;EACZ,IAAA,CAAA,OAAQ;EACR,MAAM,EAAA,gBAAA,MAAqB,SAAW;EACvC,MAAA,qBAAA,WAAA;CAED,CAAA;CACA,MAAM,cAAO,cAAqB,OAAM,aAAA;CAIxC,MAAA,OAAA,cAA0B,OAAA,MAAA;2BACN;EAClB,IAAA,CAAA,aAAM;EACR,MAAI,qBAAmB,WAAA;CAEvB,GAAA,CAAA,OAAQ,WAAA,CAAA;SACN;EACA;EACA,UAAA;EACA,cAAA,OAAiB,eAAA;EACjB,iBAAG;EACH,GAAA;EACA;EACF;CAKA;SAA8B,oBAAA;EAAO;EAAU,GAAA;CAE/C,CAAA;CACD,OAAA;;;;;;;;;;;;;;;;;;;;;;;;MA4BC,qBAAqB,WADH,SAAA,mBACqB,OAAA;CACxC,OAAA,cAAA,SAAA,sBAAA,KAAA,CAAA"}

package/dist/combobox/combobox-group-label.d.ts

@@ -0,0 +1,56 @@
+import { t as ComboboxStore } from "../combobox-store-DEVQ45mZ.js";
+import { CompositeGroupLabelOptions } from "../composite/composite-group-label.js";
+import { Props } from "@ariakit/react-utils";
+import { ElementType } from "react";
+
+//#region src/combobox/combobox-group-label.d.ts
+declare const TagName = "div";
+type TagName = typeof TagName;
+/**
+ * Returns props to create a `ComboboxGroupLabel` component. This hook should be
+ * used in a component that's wrapped with `ComboboxGroup` so the
+ * `aria-labelledby` is correctly set on the combobox group element.
+ * @see https://ariakit.com/components/combobox
+ * @example
+ * ```jsx
+ * // This component should be wrapped with ComboboxGroup
+ * const props = useComboboxGroupLabel();
+ * <Role {...props}>Label</Role>
+ * ```
+ */
+declare const useComboboxGroupLabel: import("@ariakit/react-utils").Hook<"div", ComboboxGroupLabelOptions<"div">>;
+/**
+ * Renders a label in a combobox group. This component should be wrapped with
+ * [`ComboboxGroup`](https://ariakit.com/reference/combobox-group) so the
+ * `aria-labelledby` is correctly set on the group element.
+ * @see https://ariakit.com/components/combobox
+ * @example
+ * ```jsx {5}
+ * <ComboboxProvider>
+ *   <Combobox />
+ *   <ComboboxPopover>
+ *     <ComboboxGroup>
+ *       <ComboboxGroupLabel>Fruits</ComboboxGroupLabel>
+ *       <ComboboxItem value="Apple" />
+ *       <ComboboxItem value="Banana" />
+ *     </ComboboxGroup>
+ *   </ComboboxPopover>
+ * </ComboboxProvider>
+ * ```
+ */
+declare const ComboboxGroupLabel: (props: ComboboxGroupLabelProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+interface ComboboxGroupLabelOptions<T extends ElementType = TagName> extends CompositeGroupLabelOptions<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 ComboboxGroupLabelProps<T extends ElementType = TagName> = Props<T, ComboboxGroupLabelOptions<T>>;
+//#endregion
+export { ComboboxGroupLabel, ComboboxGroupLabelOptions, ComboboxGroupLabelProps, useComboboxGroupLabel };
+//# sourceMappingURL=combobox-group-label.d.ts.map

package/dist/combobox/combobox-group-label.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox-group-label.d.ts","names":["Props","ElementType","CompositeGroupLabelOptions","ComboboxStore","TagName","useComboboxGroupLabel","ComboboxGroupLabelOptions","Hook","ComboboxGroupLabel","ComboboxGroupLabelProps","props","ReactElement","JSXElementConstructor","T","store"],"sources":["../../src/combobox/combobox-group-label.d.ts"],"mappings":";;;;;;cAIcI,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAF4B;;;;AACpC;AAAA;;;;AACQ;AAa7B;;AAfyD,cAepCC,qBAAAA,iCAAsDE,IAAAA,QAAYD,yBAAyB;;AAAA;AAoBhH;;;;;;;;;AAA6J;AAC7J;;;;;;;cADqBE,kBAAAA,GAAqBE,KAAAA,EAAOD,uBAAuB,qBAAqBE,YAAAA,+BAA2CC,qBAAAA;AAAAA,UACvHN,yBAAAA,WAAoCL,WAAAA,GAAcG,OAAAA,UAAiBF,0BAAAA,CAA2BW,CAAAA;EAAD;;;;;;;;EAS1GC,KAAAA,GAAQX,aAAAA;AAAAA;AAAAA,KAEAM,uBAAAA,WAAkCR,WAAAA,GAAcG,OAAAA,IAAWJ,KAAAA,CAAMa,CAAAA,EAAGP,yBAAAA,CAA0BO,CAAAA"}

package/dist/combobox/combobox-group-label.js

@@ -0,0 +1,47 @@
+"use client";
+import { useCompositeGroupLabel } from "../composite/composite-group-label.js";
+import { createElement, createHook, forwardRef } from "@ariakit/react-utils";
+//#region src/combobox/combobox-group-label.tsx
+const TagName = "div";
+/**
+* Returns props to create a `ComboboxGroupLabel` component. This hook should be
+* used in a component that's wrapped with `ComboboxGroup` so the
+* `aria-labelledby` is correctly set on the combobox group element.
+* @see https://ariakit.com/components/combobox
+* @example
+* ```jsx
+* // This component should be wrapped with ComboboxGroup
+* const props = useComboboxGroupLabel();
+* <Role {...props}>Label</Role>
+* ```
+*/
+const useComboboxGroupLabel = createHook(function useComboboxGroupLabel(props) {
+	props = useCompositeGroupLabel(props);
+	return props;
+});
+/**
+* Renders a label in a combobox group. This component should be wrapped with
+* [`ComboboxGroup`](https://ariakit.com/reference/combobox-group) so the
+* `aria-labelledby` is correctly set on the group element.
+* @see https://ariakit.com/components/combobox
+* @example
+* ```jsx {5}
+* <ComboboxProvider>
+*   <Combobox />
+*   <ComboboxPopover>
+*     <ComboboxGroup>
+*       <ComboboxGroupLabel>Fruits</ComboboxGroupLabel>
+*       <ComboboxItem value="Apple" />
+*       <ComboboxItem value="Banana" />
+*     </ComboboxGroup>
+*   </ComboboxPopover>
+* </ComboboxProvider>
+* ```
+*/
+const ComboboxGroupLabel = forwardRef(function ComboboxGroupLabel(props) {
+	return createElement(TagName, useComboboxGroupLabel(props));
+});
+//#endregion
+export { ComboboxGroupLabel, useComboboxGroupLabel };
+
+//# sourceMappingURL=combobox-group-label.js.map

package/dist/combobox/combobox-group-label.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox-group-label.js","names":[],"sources":["../../src/combobox/combobox-group-label.tsx"],"sourcesContent":["import { createElement, createHook, forwardRef } from \"@ariakit/react-utils\";\nimport type { Props } from \"@ariakit/react-utils\";\nimport type { ElementType } from \"react\";\nimport type { CompositeGroupLabelOptions } from \"../composite/composite-group-label.tsx\";\nimport { useCompositeGroupLabel } from \"../composite/composite-group-label.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 `ComboboxGroupLabel` component. This hook should be\n * used in a component that's wrapped with `ComboboxGroup` so the\n * `aria-labelledby` is correctly set on the combobox group element.\n * @see https://ariakit.com/components/combobox\n * @example\n * ```jsx\n * // This component should be wrapped with ComboboxGroup\n * const props = useComboboxGroupLabel();\n * <Role {...props}>Label</Role>\n * ```\n */\nexport const useComboboxGroupLabel = createHook<\n  TagName,\n  ComboboxGroupLabelOptions\n>(function useComboboxGroupLabel(props) {\n  props = useCompositeGroupLabel(props);\n  return props;\n});\n\n/**\n * Renders a label in a combobox group. This component should be wrapped with\n * [`ComboboxGroup`](https://ariakit.com/reference/combobox-group) so the\n * `aria-labelledby` is correctly set on the group element.\n * @see https://ariakit.com/components/combobox\n * @example\n * ```jsx {5}\n * <ComboboxProvider>\n *   <Combobox />\n *   <ComboboxPopover>\n *     <ComboboxGroup>\n *       <ComboboxGroupLabel>Fruits</ComboboxGroupLabel>\n *       <ComboboxItem value=\"Apple\" />\n *       <ComboboxItem value=\"Banana\" />\n *     </ComboboxGroup>\n *   </ComboboxPopover>\n * </ComboboxProvider>\n * ```\n */\nexport const ComboboxGroupLabel = forwardRef(function ComboboxGroupLabel(\n  props: ComboboxGroupLabelProps,\n) {\n  const htmlProps = useComboboxGroupLabel(props);\n  return createElement(TagName, htmlProps);\n});\n\nexport interface ComboboxGroupLabelOptions<\n  T extends ElementType = TagName,\n> extends CompositeGroupLabelOptions<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 ComboboxGroupLabelProps<T extends ElementType = TagName> = Props<\n  T,\n  ComboboxGroupLabelOptions<T>\n>;\n"],"mappings":";;;;;;;;;;;;;;;;;MA0BE,wBAAQ,WAA4B,SAAA,sBAAA,OAAA;CACpC,QAAO,uBAAA,KAAA;CACR,OAAA;;;;;;;;;;;;;;;;;;;;;MAyBC,qBAAqB,WADH,SAAA,mBACqB,OAAA;CACxC,OAAA,cAAA,SAAA,sBAAA,KAAA,CAAA"}

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

@@ -0,0 +1,63 @@
+import { t as ComboboxStore } from "../combobox-store-DEVQ45mZ.js";
+import { CompositeGroupOptions } from "../composite/composite-group.js";
+import { Props } from "@ariakit/react-utils";
+import { ElementType } from "react";
+
+//#region src/combobox/combobox-group.d.ts
+declare const TagName = "div";
+type TagName = typeof TagName;
+/**
+ * Returns props to create a `ComboboxGroup` component.
+ * @see https://ariakit.com/components/combobox
+ * @example
+ * ```jsx
+ * const store = useComboboxStore();
+ * const props = useComboboxGroup({ store });
+ * <Combobox store={store} />
+ * <ComboboxPopover store={store}>
+ *   <Role {...props}>
+ *     <ComboboxGroupLabel>Label</ComboboxGroupLabel>
+ *     <ComboboxItem value="Item 1" />
+ *     <ComboboxItem value="Item 2" />
+ *   </Role>
+ * </ComboboxPopover>
+ * ```
+ */
+declare const useComboboxGroup: import("@ariakit/react-utils").Hook<"div", ComboboxGroupOptions<"div">>;
+/**
+ * Renders a group for
+ * [`ComboboxItem`](https://ariakit.com/reference/combobox-item) elements.
+ * Optionally, a
+ * [`ComboboxGroupLabel`](https://ariakit.com/reference/combobox-group-label)
+ * can be rendered as a child to provide a label for the group.
+ * @see https://ariakit.com/components/combobox
+ * @example
+ * ```jsx {4-8}
+ * <ComboboxProvider>
+ *   <Combobox />
+ *   <ComboboxPopover>
+ *     <ComboboxGroup>
+ *       <ComboboxGroupLabel>Fruits</ComboboxGroupLabel>
+ *       <ComboboxItem value="Apple" />
+ *       <ComboboxItem value="Banana" />
+ *     </ComboboxGroup>
+ *   </ComboboxPopover>
+ * </ComboboxProvider>
+ * ```
+ */
+declare const ComboboxGroup: (props: ComboboxGroupProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+interface ComboboxGroupOptions<T extends ElementType = TagName> extends CompositeGroupOptions<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 ComboboxGroupProps<T extends ElementType = TagName> = Props<T, ComboboxGroupOptions<T>>;
+//#endregion
+export { ComboboxGroup, ComboboxGroupOptions, ComboboxGroupProps, useComboboxGroup };
+//# sourceMappingURL=combobox-group.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"combobox-group.d.ts","names":["Props","ElementType","CompositeGroupOptions","ComboboxStore","TagName","useComboboxGroup","ComboboxGroupOptions","Hook","ComboboxGroup","ComboboxGroupProps","props","ReactElement","JSXElementConstructor","T","store"],"sources":["../../src/combobox/combobox-group.d.ts"],"mappings":";;;;;;cAIcI,OAAAA;AAAAA,KACTA,OAAAA,UAAiBA,OAAO;AAF4B;;;;AACpC;AAAA;;;;AACQ;AAkB7B;;;;AAAsG;AAsBtG;;AA1CyD,cAoBpCC,gBAAAA,iCAAiDE,IAAAA,QAAYD,oBAAoB;;;;;;;AAsB6C;AACnJ;;;;;;;;;;;;;;cADqBE,aAAAA,GAAgBE,KAAAA,EAAOD,kBAAkB,qBAAqBE,YAAAA,+BAA2CC,qBAAAA;AAAAA,UAC7GN,oBAAAA,WAA+BL,WAAAA,GAAcG,OAAAA,UAAiBF,qBAAAA,CAAsBW,CAAAA;EASzFV;;AAAa;AAEzB;;;;;EAFIW,KAAAA,GAAQX,aAAAA;AAAAA;AAAAA,KAEAM,kBAAAA,WAA6BR,WAAAA,GAAcG,OAAAA,IAAWJ,KAAAA,CAAMa,CAAAA,EAAGP,oBAAAA,CAAqBO,CAAAA"}

package/dist/combobox/combobox-group.js

@@ -0,0 +1,67 @@
+"use client";
+import { useComboboxScopedContext } from "./combobox-context.js";
+import { useCompositeGroup } from "../composite/composite-group.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-group.tsx
+const TagName = "div";
+/**
+* Returns props to create a `ComboboxGroup` component.
+* @see https://ariakit.com/components/combobox
+* @example
+* ```jsx
+* const store = useComboboxStore();
+* const props = useComboboxGroup({ store });
+* <Combobox store={store} />
+* <ComboboxPopover store={store}>
+*   <Role {...props}>
+*     <ComboboxGroupLabel>Label</ComboboxGroupLabel>
+*     <ComboboxItem value="Item 1" />
+*     <ComboboxItem value="Item 2" />
+*   </Role>
+* </ComboboxPopover>
+* ```
+*/
+const useComboboxGroup = createHook(function useComboboxGroup({ store, ...props }) {
+	const context = useComboboxScopedContext();
+	store = store || context;
+	invariant(store, "ComboboxRow must be wrapped in a ComboboxList or ComboboxPopover component");
+	if (getPopupRole(useStoreState(store, "contentElement")) === "grid") props = {
+		role: "rowgroup",
+		...props
+	};
+	props = useCompositeGroup({
+		store,
+		...props
+	});
+	return props;
+});
+/**
+* Renders a group for
+* [`ComboboxItem`](https://ariakit.com/reference/combobox-item) elements.
+* Optionally, a
+* [`ComboboxGroupLabel`](https://ariakit.com/reference/combobox-group-label)
+* can be rendered as a child to provide a label for the group.
+* @see https://ariakit.com/components/combobox
+* @example
+* ```jsx {4-8}
+* <ComboboxProvider>
+*   <Combobox />
+*   <ComboboxPopover>
+*     <ComboboxGroup>
+*       <ComboboxGroupLabel>Fruits</ComboboxGroupLabel>
+*       <ComboboxItem value="Apple" />
+*       <ComboboxItem value="Banana" />
+*     </ComboboxGroup>
+*   </ComboboxPopover>
+* </ComboboxProvider>
+* ```
+*/
+const ComboboxGroup = forwardRef(function ComboboxGroup(props) {
+	return createElement(TagName, useComboboxGroup(props));
+});
+//#endregion
+export { ComboboxGroup, useComboboxGroup };
+
+//# sourceMappingURL=combobox-group.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"combobox-group.js","names":[],"sources":["../../src/combobox/combobox-group.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 { CompositeGroupOptions } from \"../composite/composite-group.tsx\";\nimport { useCompositeGroup } from \"../composite/composite-group.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 `ComboboxGroup` component.\n * @see https://ariakit.com/components/combobox\n * @example\n * ```jsx\n * const store = useComboboxStore();\n * const props = useComboboxGroup({ store });\n * <Combobox store={store} />\n * <ComboboxPopover store={store}>\n *   <Role {...props}>\n *     <ComboboxGroupLabel>Label</ComboboxGroupLabel>\n *     <ComboboxItem value=\"Item 1\" />\n *     <ComboboxItem value=\"Item 2\" />\n *   </Role>\n * </ComboboxPopover>\n * ```\n */\nexport const useComboboxGroup = createHook<TagName, ComboboxGroupOptions>(\n  function useComboboxGroup({ 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\n    if (popupRole === \"grid\") {\n      props = { role: \"rowgroup\", ...props };\n    }\n\n    props = useCompositeGroup({ store, ...props });\n\n    return props;\n  },\n);\n\n/**\n * Renders a group for\n * [`ComboboxItem`](https://ariakit.com/reference/combobox-item) elements.\n * Optionally, a\n * [`ComboboxGroupLabel`](https://ariakit.com/reference/combobox-group-label)\n * can be rendered as a child to provide a label for the group.\n * @see https://ariakit.com/components/combobox\n * @example\n * ```jsx {4-8}\n * <ComboboxProvider>\n *   <Combobox />\n *   <ComboboxPopover>\n *     <ComboboxGroup>\n *       <ComboboxGroupLabel>Fruits</ComboboxGroupLabel>\n *       <ComboboxItem value=\"Apple\" />\n *       <ComboboxItem value=\"Banana\" />\n *     </ComboboxGroup>\n *   </ComboboxPopover>\n * </ComboboxProvider>\n * ```\n */\nexport const ComboboxGroup = forwardRef(function ComboboxGroup(\n  props: ComboboxGroupProps,\n) {\n  const htmlProps = useComboboxGroup(props);\n  return createElement(TagName, htmlProps);\n});\n\nexport interface ComboboxGroupOptions<\n  T extends ElementType = TagName,\n> extends CompositeGroupOptions<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 ComboboxGroupProps<T extends ElementType = TagName> = Props<\n  T,\n  ComboboxGroupOptions<T>\n>;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;MAgCI,mBAAgB,WAAA,SAAyB,iBAAA,EAAA,OAAA,GAAA,SAAA;CACzC,MAAA,UAAQ,yBAAS;CAEjB,QAAA,SAGI;CAMJ,UAFkB,OADK,4EAIb;KAAE,aAAM,cAAA,OAAA,gBAAA,CAAA,MAAA,QAAA,QAAA;EAAY,MAAG;EAAM,GAAA;CAGvC;SAA4B,kBAAA;EAAO;EAAU,GAAA;CAE7C,CAAA;CAEJ,OAAA;;;;;;;;;;;;;;;;;;;;;;;MA2BE,gBAAqB,WADH,SAAA,cACqB,OAAA;CACxC,OAAA,cAAA,SAAA,iBAAA,KAAA,CAAA"}