@ariakit/react-core 0.0.1 → 0.1.1

package/esm/checkbox/checkbox.js

@@ -0,0 +1,15 @@
+import {
+  Checkbox,
+  useCheckbox
+} from "../__chunks/4RNONDN5.js";
+import "../__chunks/M5KYRTQG.js";
+import "../__chunks/SAVDGYCC.js";
+import "../__chunks/5TGAWEHD.js";
+import "../__chunks/JE5NWDDX.js";
+import "../__chunks/6DAEYZ43.js";
+import "../__chunks/B7MIN7YT.js";
+import "../__chunks/SXC6BPOF.js";
+export {
+  Checkbox,
+  useCheckbox
+};

package/esm/collection/collection-context.d.ts

@@ -0,0 +1,5 @@
+import type { CollectionStore } from "./collection-store.js";
+export declare const CollectionContext: import("react").Context<CollectionStore<{
+    id: string;
+    element?: HTMLElement | null | undefined;
+}> | undefined>;

package/esm/collection/collection-context.js

@@ -0,0 +1,6 @@
+import {
+  CollectionContext
+} from "../__chunks/T3DJZG63.js";
+export {
+  CollectionContext
+};

package/esm/collection/collection-item.d.ts

@@ -0,0 +1,55 @@
+import type { CollectionStoreItem } from "@ariakit/core/collection/collection-store";
+import type { As, Options, Props } from "../utils/types.js";
+import type { CollectionStore } from "./collection-store.js";
+/**
+ * Returns props to create a `CollectionItem` component. This hook will register
+ * the item in the collection store. If this hook is used in a component that is
+ * wrapped by `Collection` or a component that implements `useCollection`,
+ * there's no need to explicitly pass the `store` prop.
+ * @see https://ariakit.org/components/collection
+ * @example
+ * ```jsx
+ * const store = useCollectionStore();
+ * const props = useCollectionItem({ store });
+ * <Role {...props}>Item</Role>
+ * ```
+ */
+export declare const useCollectionItem: import("../utils/types.js").Hook<CollectionItemOptions<"div">>;
+/**
+ * Renders an item in a collection. The collection store can be passed
+ * explicitly through the `store` prop or implicitly through the parent
+ * `Collection` component.
+ * @see https://ariakit.org/components/collection
+ * @example
+ * ```jsx
+ * const store = useCollectionStore();
+ * <CollectionItem store={store}>Item 1</CollectionItem>
+ * <CollectionItem store={store}>Item 2</CollectionItem>
+ * <CollectionItem store={store}>Item 3</CollectionItem>
+ * ```
+ */
+export declare const CollectionItem: import("../utils/types.js").Component<CollectionItemOptions<"div">>;
+export interface CollectionItemOptions<T extends As = "div"> extends Options<T> {
+    /**
+     * Object returned by the `useCollectionStore` hook. If not provided, the
+     * parent `Collection` component's context will be used.
+     */
+    store?: CollectionStore;
+    /**
+     * Whether the item should be registered to the store.
+     * @default true
+     */
+    shouldRegisterItem?: boolean;
+    /**
+     * A memoized function that returns props that will be passed along with the
+     * item when it gets registered to the store.
+     * @example
+     * ```jsx
+     * const store = useCollectionStore();
+     * const getItem = useCallback((item) => ({ ...item, custom: true }), []);
+     * <CollectionItem store={store} getItem={getItem} />
+     * ```
+     */
+    getItem?: (props: CollectionStoreItem) => CollectionStoreItem;
+}
+export type CollectionItemProps<T extends As = "div"> = Props<CollectionItemOptions<T>>;

package/esm/collection/collection-item.js

@@ -0,0 +1,12 @@
+import {
+  CollectionItem,
+  useCollectionItem
+} from "../__chunks/OJNRBQKS.js";
+import "../__chunks/T3DJZG63.js";
+import "../__chunks/JE5NWDDX.js";
+import "../__chunks/B7MIN7YT.js";
+import "../__chunks/SXC6BPOF.js";
+export {
+  CollectionItem,
+  useCollectionItem
+};

package/esm/collection/collection-store.d.ts

@@ -0,0 +1,39 @@
+import * as Core from "@ariakit/core/collection/collection-store";
+import type { BivariantCallback, PickRequired } from "@ariakit/core/utils/types";
+import type { Store } from "../utils/store.js";
+type Item = Core.CollectionStoreItem;
+export declare function useCollectionStoreOptions<T extends Item = Item>(_props: CollectionStoreProps<T>): Partial<CollectionStoreOptions<T>>;
+export declare function useCollectionStoreProps<T extends CollectionStore>(store: T, props: CollectionStoreProps): T;
+/**
+ * Creates a collection store.
+ * @see https://ariakit.org/components/collection
+ * @example
+ * ```jsx
+ * const collection = useCollectionStore();
+ * <Collection store={collection}>
+ *   <CollectionItem>Item</CollectionItem>
+ *   <CollectionItem>Item</CollectionItem>
+ *   <CollectionItem>Item</CollectionItem>
+ * </Collection>
+ * ```
+ */
+export declare function useCollectionStore<T extends Item = Item>(props: PickRequired<CollectionStoreProps<T>, "items" | "defaultItems">): CollectionStore<T>;
+export declare function useCollectionStore(props?: CollectionStoreProps): CollectionStore;
+export type CollectionStoreItem = Core.CollectionStoreItem;
+export type CollectionStoreState<T extends Item = Item> = Core.CollectionStoreState<T>;
+export type CollectionStoreFunctions<T extends Item = Item> = Core.CollectionStoreFunctions<T>;
+export interface CollectionStoreOptions<T extends Item = Item> extends Core.CollectionStoreOptions<T> {
+    /**
+     * A callback that gets called when the `items` state changes.
+     * @param items The new items.
+     * @example
+     * const [items, setItems] = useState([]);
+     * const collection = useCollectionStore({ items, setItems });
+     */
+    setItems?: BivariantCallback<(items: CollectionStoreState<T>["items"]) => void>;
+}
+export interface CollectionStoreProps<T extends Item = Item> extends CollectionStoreOptions<T>, Core.CollectionStoreProps<T> {
+}
+export interface CollectionStore<T extends Item = Item> extends CollectionStoreFunctions<T>, Store<Core.CollectionStore<T>> {
+}
+export {};

package/esm/collection/collection-store.js

@@ -0,0 +1,13 @@
+import {
+  useCollectionStore,
+  useCollectionStoreOptions,
+  useCollectionStoreProps
+} from "../__chunks/56XURSTF.js";
+import "../__chunks/6DAEYZ43.js";
+import "../__chunks/B7MIN7YT.js";
+import "../__chunks/SXC6BPOF.js";
+export {
+  useCollectionStore,
+  useCollectionStoreOptions,
+  useCollectionStoreProps
+};

package/esm/collection/collection.d.ts

@@ -0,0 +1,42 @@
+import type { As, Options, Props } from "../utils/types.js";
+import type { CollectionStore } from "./collection-store.js";
+/**
+ * Returns props to create a `Collection` component. It receives the collection
+ * store through the `store` prop and provides context for `CollectionItem`
+ * components.
+ * @see https://ariakit.org/components/collection
+ * @example
+ * ```jsx
+ * const collection = useCollectionStore();
+ * const props = useCollection({ store });
+ * <Role {...props}>
+ *   <CollectionItem>Item 1</CollectionItem>
+ *   <CollectionItem>Item 2</CollectionItem>
+ *   <CollectionItem>Item 3</CollectionItem>
+ * </Role>
+ * ```
+ */
+export declare const useCollection: import("../utils/types.js").Hook<CollectionOptions<"div">>;
+/**
+ * Renders a simple wrapper for collection items. It receives the collection
+ * store through the `store` prop and provides context for `CollectionItem`
+ * components.
+ * @see https://ariakit.org/components/collection
+ * @example
+ * ```jsx
+ * const collection = useCollectionStore();
+ * <Collection store={collection}>
+ *   <CollectionItem>Item 1</CollectionItem>
+ *   <CollectionItem>Item 2</CollectionItem>
+ *   <CollectionItem>Item 3</CollectionItem>
+ * </Collection>
+ * ```
+ */
+export declare const Collection: import("../utils/types.js").Component<CollectionOptions<"div">>;
+export interface CollectionOptions<T extends As = "div"> extends Options<T> {
+    /**
+     * Object returned by the `useCollectionStore` hook.
+     */
+    store: CollectionStore;
+}
+export type CollectionProps<T extends As = "div"> = Props<CollectionOptions<T>>;

package/esm/collection/collection.js

@@ -0,0 +1,36 @@
+import {
+  CollectionContext
+} from "../__chunks/T3DJZG63.js";
+import {
+  createComponent,
+  createElement,
+  createHook
+} from "../__chunks/JE5NWDDX.js";
+import {
+  useWrapElement
+} from "../__chunks/B7MIN7YT.js";
+import "../__chunks/SXC6BPOF.js";
+
+// src/collection/collection.tsx
+import { jsx } from "react/jsx-runtime";
+var useCollection = createHook(
+  ({ store, ...props }) => {
+    props = useWrapElement(
+      props,
+      (element) => /* @__PURE__ */ jsx(CollectionContext.Provider, { value: store, children: element }),
+      [store]
+    );
+    return props;
+  }
+);
+var Collection = createComponent((props) => {
+  const htmlProps = useCollection(props);
+  return createElement("div", htmlProps);
+});
+if (process.env.NODE_ENV !== "production") {
+  Collection.displayName = "Collection";
+}
+export {
+  Collection,
+  useCollection
+};

package/esm/combobox/combobox-cancel.d.ts

@@ -0,0 +1,39 @@
+import type { ButtonOptions } from "../button/button.js";
+import type { As, Props } from "../utils/types.js";
+import type { ComboboxStore } from "./combobox-store.js";
+/**
+ * Returns props to create a `ComboboxCancel` component that clears the combobox
+ * input when clicked.
+ * @see https://ariakit.org/components/combobox
+ * @example
+ * ```jsx
+ * const store = useComboboxStore();
+ * const props = useComboboxCancel({ store });
+ * <Combobox store={store} />
+ * <Role {...props} />
+ * ```
+ */
+export declare const useComboboxCancel: import("../utils/types.js").Hook<ComboboxCancelOptions<"button">>;
+/**
+ * Renders a combobox cancel button that clears the combobox input when clicked.
+ * @see https://ariakit.org/components/combobox
+ * @example
+ * ```jsx
+ * const combobox = useComboboxStore();
+ * <Combobox store={combobox} />
+ * <ComboboxCancel store={combobox} />
+ * <ComboboxPopover store={combobox}>
+ *   <ComboboxItem value="Item 1" />
+ *   <ComboboxItem value="Item 2" />
+ *   <ComboboxItem value="Item 3" />
+ * </ComboboxPopover>
+ * ```
+ */
+export declare const ComboboxCancel: import("../utils/types.js").Component<ComboboxCancelOptions<"button">>;
+export interface ComboboxCancelOptions<T extends As = "button"> extends ButtonOptions<T> {
+    /**
+     * Object returned by the `useComboboxStore` hook.
+     */
+    store: ComboboxStore;
+}
+export type ComboboxCancelProps<T extends As = "button"> = Props<ComboboxCancelOptions<T>>;

package/esm/combobox/combobox-cancel.js

@@ -0,0 +1,75 @@
+import {
+  useButton
+} from "../__chunks/I4MLEPTM.js";
+import "../__chunks/SAVDGYCC.js";
+import "../__chunks/5TGAWEHD.js";
+import {
+  createComponent,
+  createElement,
+  createHook
+} from "../__chunks/JE5NWDDX.js";
+import {
+  useEvent
+} from "../__chunks/B7MIN7YT.js";
+import "../__chunks/SXC6BPOF.js";
+
+// src/combobox/combobox-cancel.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var children = /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    "aria-hidden": "true",
+    display: "block",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "1pt",
+    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" })
+    ]
+  }
+);
+var useComboboxCancel = createHook(
+  ({ store, ...props }) => {
+    const onClickProp = props.onClick;
+    const onClick = useEvent((event) => {
+      onClickProp?.(event);
+      if (event.defaultPrevented)
+        return;
+      store.setValue("");
+      store.move(null);
+    });
+    const comboboxId = store.useState((state) => state.baseElement?.id);
+    props = {
+      children,
+      "aria-label": "Clear input",
+      // This aria-controls will ensure the combobox popup remains visible when
+      // this element gets focused. This logic is done in the ComboboxPopover
+      // component.
+      "aria-controls": comboboxId,
+      ...props,
+      onClick
+    };
+    props = useButton(props);
+    return props;
+  }
+);
+var ComboboxCancel = createComponent(
+  (props) => {
+    const htmlProps = useComboboxCancel(props);
+    return createElement("button", htmlProps);
+  }
+);
+if (process.env.NODE_ENV !== "production") {
+  ComboboxCancel.displayName = "ComboboxCancel";
+}
+export {
+  ComboboxCancel,
+  useComboboxCancel
+};

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

@@ -0,0 +1,3 @@
+import type { ComboboxStore } from "./combobox-store.js";
+export declare const ComboboxContext: import("react").Context<ComboboxStore | undefined>;
+export declare const ComboboxItemValueContext: import("react").Context<string | undefined>;

package/esm/combobox/combobox-context.js

@@ -0,0 +1,8 @@
+import {
+  ComboboxContext,
+  ComboboxItemValueContext
+} from "../__chunks/5VGBBGF5.js";
+export {
+  ComboboxContext,
+  ComboboxItemValueContext
+};

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

@@ -0,0 +1,45 @@
+import type { DialogDisclosureOptions } from "../dialog/dialog-disclosure.js";
+import type { As, Props } from "../utils/types.js";
+import type { ComboboxStore } from "./combobox-store.js";
+/**
+ * Returns props to create a `ComboboxDisclosure` component that toggles the
+ * combobox popover visibility when clicked.
+ * @see https://ariakit.org/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>
+ * ```
+ */
+export declare const useComboboxDisclosure: import("../utils/types.js").Hook<ComboboxDisclosureOptions<"button">>;
+/**
+ * Renders a combobox disclosure button that toggles the combobox popover
+ * visibility when clicked.
+ * @see https://ariakit.org/components/combobox
+ * @example
+ * ```jsx
+ * const combobox = useComboboxStore();
+ * <Combobox store={combobox} />
+ * <ComboboxDisclosure store={combobox} />
+ * <ComboboxPopover store={combobox}>
+ *   <ComboboxItem value="Item 1" />
+ *   <ComboboxItem value="Item 2" />
+ *   <ComboboxItem value="Item 3" />
+ * </ComboboxPopover>
+ * ```
+ */
+export declare const ComboboxDisclosure: import("../utils/types.js").Component<ComboboxDisclosureOptions<"button">>;
+export interface ComboboxDisclosureOptions<T extends As = "button"> extends DialogDisclosureOptions<T> {
+    /**
+     * Object returned by the `useComboboxStore` hook.
+     */
+    store: ComboboxStore;
+}
+export type ComboboxDisclosureProps<T extends As = "button"> = Props<ComboboxDisclosureOptions<T>>;

package/esm/combobox/combobox-disclosure.js

@@ -0,0 +1,80 @@
+import {
+  useDialogDisclosure
+} from "../__chunks/NRA7DRSD.js";
+import "../__chunks/57UTLR6J.js";
+import "../__chunks/I4MLEPTM.js";
+import "../__chunks/SAVDGYCC.js";
+import "../__chunks/5TGAWEHD.js";
+import {
+  createComponent,
+  createElement,
+  createHook
+} from "../__chunks/JE5NWDDX.js";
+import {
+  useEvent
+} from "../__chunks/B7MIN7YT.js";
+import "../__chunks/SXC6BPOF.js";
+
+// src/combobox/combobox-disclosure.tsx
+import { jsx } from "react/jsx-runtime";
+var children = /* @__PURE__ */ jsx(
+  "svg",
+  {
+    "aria-hidden": "true",
+    display: "block",
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    strokeWidth: "1.5pt",
+    viewBox: "0 0 16 16",
+    height: "1em",
+    width: "1em",
+    pointerEvents: "none",
+    children: /* @__PURE__ */ jsx("polyline", { points: "4,6 8,10 12,6" })
+  }
+);
+var useComboboxDisclosure = createHook(
+  ({ store, ...props }) => {
+    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;
+      const { baseElement } = store.getState();
+      store.setDisclosureElement(baseElement);
+    });
+    const label = store.useState(
+      (state) => state.open ? "Hide popup" : "Show popup"
+    );
+    props = {
+      children,
+      tabIndex: -1,
+      "aria-label": label,
+      ...props,
+      onMouseDown,
+      onClick
+    };
+    props = useDialogDisclosure({ store, ...props });
+    return props;
+  }
+);
+var ComboboxDisclosure = createComponent(
+  (props) => {
+    const htmlProps = useComboboxDisclosure(props);
+    return createElement("button", htmlProps);
+  }
+);
+if (process.env.NODE_ENV !== "production") {
+  ComboboxDisclosure.displayName = "ComboboxDisclosure";
+}
+export {
+  ComboboxDisclosure,
+  useComboboxDisclosure
+};

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

@@ -0,0 +1,43 @@
+import type { CompositeGroupLabelOptions } from "../composite/composite-group-label.js";
+import type { As, Props } from "../utils/types.js";
+import type { ComboboxStore } from "./combobox-store.js";
+/**
+ * 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.org/components/combobox
+ * @example
+ * ```jsx
+ * // This component should be wrapped with ComboboxGroup
+ * const props = useComboboxGroupLabel();
+ * <Role {...props}>Label</Role>
+ * ```
+ */
+export declare const useComboboxGroupLabel: import("../utils/types.js").Hook<ComboboxGroupLabelOptions<"div">>;
+/**
+ * Renders a label in a combobox group. This component should be wrapped with
+ * `ComboboxGroup` so the `aria-labelledby` is correctly set on the combobox
+ * group element.
+ * @see https://ariakit.org/components/combobox
+ * @example
+ * ```jsx
+ * const combobox = useComboboxStore();
+ * <Combobox store={combobox} />
+ * <ComboboxPopover store={combobox}>
+ *   <ComboboxGroup>
+ *     <ComboboxGroupLabel>Label</ComboboxGroupLabel>
+ *     <ComboboxItem value="Item 1" />
+ *     <ComboboxItem value="Item 2" />
+ *   </ComboboxGroup>
+ * </ComboboxPopover>
+ * ```
+ */
+export declare const ComboboxGroupLabel: import("../utils/types.js").Component<ComboboxGroupLabelOptions<"div">>;
+export interface ComboboxGroupLabelOptions<T extends As = "div"> extends CompositeGroupLabelOptions<T> {
+    /**
+     * Object returned by the `useComboboxStore` hook. If not provided, the parent
+     * `ComboboxList` or `ComboboxPopover` components' context will be used.
+     */
+    store?: ComboboxStore;
+}
+export type ComboboxGroupLabelProps<T extends As = "div"> = Props<ComboboxGroupLabelOptions<T>>;

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

@@ -0,0 +1,33 @@
+import {
+  useCompositeGroupLabel
+} from "../__chunks/NYJYNUSY.js";
+import "../__chunks/SE7IFIBU.js";
+import "../__chunks/F5VAC7MB.js";
+import {
+  createComponent,
+  createElement,
+  createHook
+} from "../__chunks/JE5NWDDX.js";
+import "../__chunks/B7MIN7YT.js";
+import "../__chunks/SXC6BPOF.js";
+
+// src/combobox/combobox-group-label.ts
+var useComboboxGroupLabel = createHook(
+  (props) => {
+    props = useCompositeGroupLabel(props);
+    return props;
+  }
+);
+var ComboboxGroupLabel = createComponent(
+  (props) => {
+    const htmlProps = useComboboxGroupLabel(props);
+    return createElement("div", htmlProps);
+  }
+);
+if (process.env.NODE_ENV !== "production") {
+  ComboboxGroupLabel.displayName = "ComboboxGroupLabel";
+}
+export {
+  ComboboxGroupLabel,
+  useComboboxGroupLabel
+};

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

@@ -0,0 +1,46 @@
+import type { CompositeGroupOptions } from "../composite/composite-group.js";
+import type { As, Props } from "../utils/types.js";
+import type { ComboboxStore } from "./combobox-store.js";
+/**
+ * Returns props to create a `ComboboxGroup` component.
+ * @see https://ariakit.org/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>
+ * ```
+ */
+export declare const useComboboxGroup: import("../utils/types.js").Hook<ComboboxGroupOptions<"div">>;
+/**
+ * Renders a combobox group.
+ * @see https://ariakit.org/components/combobox
+ * @example
+ * ```jsx
+ * const combobox = useComboboxStore();
+ * <Combobox store={store} />
+ * <ComboboxPopover store={store}>
+ *   <ComboboxGroup>
+ *     <ComboboxGroupLabel>Label</ComboboxGroupLabel>
+ *     <ComboboxItem value="Item 1" />
+ *     <ComboboxItem value="Item 2" />
+ *   </ComboboxGroup>
+ * </ComboboxPopover>
+ * ```
+ */
+export declare const ComboboxGroup: import("../utils/types.js").Component<ComboboxGroupOptions<"div">>;
+export interface ComboboxGroupOptions<T extends As = "div"> extends CompositeGroupOptions<T> {
+    /**
+     * Object returned by the `useComboboxStore` hook. If not provided, the parent
+     * `ComboboxList` or `ComboboxPopover` components' context will be used.
+     */
+    store?: ComboboxStore;
+}
+export type ComboboxGroupProps<T extends As = "div"> = Props<ComboboxGroupOptions<T>>;

package/esm/combobox/combobox-group.js

@@ -0,0 +1,29 @@
+import {
+  useCompositeGroup
+} from "../__chunks/TCSUGBIK.js";
+import "../__chunks/SG5D3YRB.js";
+import "../__chunks/F5VAC7MB.js";
+import {
+  createComponent,
+  createElement,
+  createHook
+} from "../__chunks/JE5NWDDX.js";
+import "../__chunks/B7MIN7YT.js";
+import "../__chunks/SXC6BPOF.js";
+
+// src/combobox/combobox-group.ts
+var useComboboxGroup = createHook((props) => {
+  props = useCompositeGroup(props);
+  return props;
+});
+var ComboboxGroup = createComponent((props) => {
+  const htmlProps = useComboboxGroup(props);
+  return createElement("div", htmlProps);
+});
+if (process.env.NODE_ENV !== "production") {
+  ComboboxGroup.displayName = "ComboboxGroup";
+}
+export {
+  ComboboxGroup,
+  useComboboxGroup
+};