@ariakit/react-core 0.3.7 → 0.3.9

package/cjs/combobox/combobox-disclosure.cjs

@@ -6,7 +6,7 @@ require('../__chunks/LFHNPG2L.cjs');
 require('../__chunks/5UTRYT6E.cjs');
 
 
-var _VEG6PRAGcjs = require('../__chunks/VEG6PRAG.cjs');
+var _3WCBE6SUcjs = require('../__chunks/3WCBE6SU.cjs');
 require('../__chunks/DAJUUBUI.cjs');
 require('../__chunks/UZNYSPKP.cjs');
 require('../__chunks/BZTDJIVT.cjs');
@@ -53,7 +53,7 @@ var children = /* @__PURE__ */ _jsxruntime.jsx.call(void 0,
 var useComboboxDisclosure = _RNZNGEL4cjs.createHook.call(void 0, 
   (_a) => {
     var _b = _a, { store } = _b, props = _AV6KTKLEcjs.__objRest.call(void 0, _b, ["store"]);
-    const context = _VEG6PRAGcjs.useComboboxProviderContext.call(void 0, );
+    const context = _3WCBE6SUcjs.useComboboxProviderContext.call(void 0, );
     store = store || context;
     _misc.invariant.call(void 0, 
       store,

package/cjs/combobox/combobox-group.cjs

@@ -6,18 +6,45 @@ require('../__chunks/KSAZE5E2.cjs');
 require('../__chunks/FE3YCURH.cjs');
 
 
+var _3WCBE6SUcjs = require('../__chunks/3WCBE6SU.cjs');
+require('../__chunks/UZNYSPKP.cjs');
+require('../__chunks/BZTDJIVT.cjs');
+require('../__chunks/UVBBMANL.cjs');
+require('../__chunks/F2A2ZQDB.cjs');
+require('../__chunks/S6UU7NA4.cjs');
+
+
 
 
 var _RNZNGEL4cjs = require('../__chunks/RNZNGEL4.cjs');
 require('../__chunks/EO6LS72H.cjs');
 require('../__chunks/CJDHQUBR.cjs');
-require('../__chunks/AV6KTKLE.cjs');
+
+
+
+var _AV6KTKLEcjs = require('../__chunks/AV6KTKLE.cjs');
 
 // src/combobox/combobox-group.ts
-var useComboboxGroup = _RNZNGEL4cjs.createHook.call(void 0, (props) => {
-  props = _2KDFQUU7cjs.useCompositeGroup.call(void 0, props);
-  return props;
-});
+var _dom = require('@ariakit/core/utils/dom');
+var _misc = require('@ariakit/core/utils/misc');
+var useComboboxGroup = _RNZNGEL4cjs.createHook.call(void 0, 
+  (_a) => {
+    var _b = _a, { store } = _b, props = _AV6KTKLEcjs.__objRest.call(void 0, _b, ["store"]);
+    const context = _3WCBE6SUcjs.useComboboxScopedContext.call(void 0, );
+    store = store || context;
+    _misc.invariant.call(void 0, 
+      store,
+      process.env.NODE_ENV !== "production" && "ComboboxRow must be wrapped in a ComboboxList or ComboboxPopover component"
+    );
+    const contentElement = store.useState("contentElement");
+    const popupRole = _dom.getPopupRole.call(void 0, contentElement);
+    if (popupRole === "grid") {
+      props = _AV6KTKLEcjs.__spreadValues.call(void 0, { role: "rowgroup" }, props);
+    }
+    props = _2KDFQUU7cjs.useCompositeGroup.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, { store }, props));
+    return props;
+  }
+);
 var ComboboxGroup = _RNZNGEL4cjs.createComponent.call(void 0, (props) => {
   const htmlProps = useComboboxGroup(props);
   return _RNZNGEL4cjs.createElement.call(void 0, "div", htmlProps);

package/cjs/combobox/combobox-item-check.cjs

@@ -0,0 +1,50 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
+
+
+var _T4KYZJUYcjs = require('../__chunks/T4KYZJUY.cjs');
+require('../__chunks/ERFHNHON.cjs');
+
+
+var _3WCBE6SUcjs = require('../__chunks/3WCBE6SU.cjs');
+require('../__chunks/UZNYSPKP.cjs');
+require('../__chunks/BZTDJIVT.cjs');
+require('../__chunks/UVBBMANL.cjs');
+require('../__chunks/F2A2ZQDB.cjs');
+require('../__chunks/S6UU7NA4.cjs');
+
+
+
+
+var _RNZNGEL4cjs = require('../__chunks/RNZNGEL4.cjs');
+require('../__chunks/EO6LS72H.cjs');
+require('../__chunks/CJDHQUBR.cjs');
+
+
+
+
+var _AV6KTKLEcjs = require('../__chunks/AV6KTKLE.cjs');
+
+// src/combobox/combobox-item-check.ts
+var _react = require('react');
+var useComboboxItemCheck = _RNZNGEL4cjs.createHook.call(void 0, 
+  (_a) => {
+    var _b = _a, { store, checked } = _b, props = _AV6KTKLEcjs.__objRest.call(void 0, _b, ["store", "checked"]);
+    const context = _react.useContext.call(void 0, _3WCBE6SUcjs.ComboboxItemCheckedContext);
+    checked = checked != null ? checked : context;
+    props = _T4KYZJUYcjs.useCheckboxCheck.call(void 0, _AV6KTKLEcjs.__spreadProps.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, {}, props), { checked }));
+    return props;
+  }
+);
+var ComboboxItemCheck = _RNZNGEL4cjs.createComponent.call(void 0, 
+  (props) => {
+    const htmlProps = useComboboxItemCheck(props);
+    return _RNZNGEL4cjs.createElement.call(void 0, "span", htmlProps);
+  }
+);
+if (process.env.NODE_ENV !== "production") {
+  ComboboxItemCheck.displayName = "ComboboxItemCheck";
+}
+
+
+
+exports.ComboboxItemCheck = ComboboxItemCheck; exports.useComboboxItemCheck = useComboboxItemCheck;

package/cjs/combobox/combobox-item-check.d.cts

@@ -0,0 +1,60 @@
+import type { CheckboxCheckOptions } from "../checkbox/checkbox-check.jsx";
+import type { As, Props } from "../utils/types.js";
+import type { ComboboxStore } from "./combobox-store.js";
+/**
+ * Returns props to create a `ComboboxItemCheck` component. This hook must be
+ * used in a component that's wrapped with `ComboboxItem` or the `checked` prop
+ * must be explicitly passed to the component.
+ * @see https://ariakit.org/components/combobox
+ * @example
+ * ```jsx
+ * const props = useComboboxItemCheck({ checked: true });
+ * <Role {...props} />
+ * ```
+ */
+export declare const useComboboxItemCheck: import("../utils/types.js").Hook<ComboboxItemCheckOptions<"span">>;
+/**
+ * Renders a checkmark inside a
+ * [`ComboboxItem`](https://ariakit.org/reference/combobox-item) component. This
+ * component must be wrapped with
+ * [`ComboboxItem`](https://ariakit.org/reference/combobox-item) or the
+ * [`checked`](https://ariakit.org/reference/combobox-item-check#checked) prop
+ * must be explicitly passed to the component.
+ * @see https://ariakit.org/components/combobox
+ * @example
+ * ```jsx {5,9}
+ * <ComboboxProvider>
+ *   <Combobox />
+ *   <ComboboxPopover>
+ *     <ComboboxItem value="Apple">
+ *       <ComboboxItemCheck />
+ *       Apple
+ *     </ComboboxItem>
+ *     <ComboboxItem value="Orange">
+ *       <ComboboxItemCheck />
+ *       Orange
+ *     </ComboboxItem>
+ *   </ComboboxPopover>
+ * </ComboboxProvider>
+ * ```
+ */
+export declare const ComboboxItemCheck: import("../utils/types.js").Component<ComboboxItemCheckOptions<"span">>;
+export interface ComboboxItemCheckOptions<T extends As = "span"> extends CheckboxCheckOptions<T> {
+    /**
+     * Object returned by the
+     * [`useComboboxStore`](https://ariakit.org/reference/use-combobox-store)
+     * hook. If not provided, the parent
+     * [`ComboboxList`](https://ariakit.org/reference/combobox-list) or
+     * [`ComboboxPopover`](https://ariakit.org/reference/combobox-popover)
+     * components' context will be used.
+     */
+    store?: ComboboxStore;
+    /**
+     * Whether the check mark should be shown. This value is automatically
+     * inferred from the parent
+     * [`ComboboxItem`](https://ariakit.org/reference/combobox-item) component.
+     * Manually setting this prop will override the inferred value.
+     */
+    checked?: boolean;
+}
+export type ComboboxItemCheckProps<T extends As = "span"> = Props<ComboboxItemCheckOptions<T>>;

package/cjs/combobox/combobox-item-check.d.ts

@@ -0,0 +1,60 @@
+import type { CheckboxCheckOptions } from "../checkbox/checkbox-check.jsx";
+import type { As, Props } from "../utils/types.js";
+import type { ComboboxStore } from "./combobox-store.js";
+/**
+ * Returns props to create a `ComboboxItemCheck` component. This hook must be
+ * used in a component that's wrapped with `ComboboxItem` or the `checked` prop
+ * must be explicitly passed to the component.
+ * @see https://ariakit.org/components/combobox
+ * @example
+ * ```jsx
+ * const props = useComboboxItemCheck({ checked: true });
+ * <Role {...props} />
+ * ```
+ */
+export declare const useComboboxItemCheck: import("../utils/types.js").Hook<ComboboxItemCheckOptions<"span">>;
+/**
+ * Renders a checkmark inside a
+ * [`ComboboxItem`](https://ariakit.org/reference/combobox-item) component. This
+ * component must be wrapped with
+ * [`ComboboxItem`](https://ariakit.org/reference/combobox-item) or the
+ * [`checked`](https://ariakit.org/reference/combobox-item-check#checked) prop
+ * must be explicitly passed to the component.
+ * @see https://ariakit.org/components/combobox
+ * @example
+ * ```jsx {5,9}
+ * <ComboboxProvider>
+ *   <Combobox />
+ *   <ComboboxPopover>
+ *     <ComboboxItem value="Apple">
+ *       <ComboboxItemCheck />
+ *       Apple
+ *     </ComboboxItem>
+ *     <ComboboxItem value="Orange">
+ *       <ComboboxItemCheck />
+ *       Orange
+ *     </ComboboxItem>
+ *   </ComboboxPopover>
+ * </ComboboxProvider>
+ * ```
+ */
+export declare const ComboboxItemCheck: import("../utils/types.js").Component<ComboboxItemCheckOptions<"span">>;
+export interface ComboboxItemCheckOptions<T extends As = "span"> extends CheckboxCheckOptions<T> {
+    /**
+     * Object returned by the
+     * [`useComboboxStore`](https://ariakit.org/reference/use-combobox-store)
+     * hook. If not provided, the parent
+     * [`ComboboxList`](https://ariakit.org/reference/combobox-list) or
+     * [`ComboboxPopover`](https://ariakit.org/reference/combobox-popover)
+     * components' context will be used.
+     */
+    store?: ComboboxStore;
+    /**
+     * Whether the check mark should be shown. This value is automatically
+     * inferred from the parent
+     * [`ComboboxItem`](https://ariakit.org/reference/combobox-item) component.
+     * Manually setting this prop will override the inferred value.
+     */
+    checked?: boolean;
+}
+export type ComboboxItemCheckProps<T extends As = "span"> = Props<ComboboxItemCheckOptions<T>>;

package/cjs/combobox/combobox-item-value.cjs

@@ -2,7 +2,7 @@
 
 
 
-var _VEG6PRAGcjs = require('../__chunks/VEG6PRAG.cjs');
+var _3WCBE6SUcjs = require('../__chunks/3WCBE6SU.cjs');
 require('../__chunks/UZNYSPKP.cjs');
 require('../__chunks/BZTDJIVT.cjs');
 require('../__chunks/UVBBMANL.cjs');
@@ -53,9 +53,9 @@ function splitValue(itemValue, userValue) {
 var useComboboxItemValue = _RNZNGEL4cjs.createHook.call(void 0, 
   (_a) => {
     var _b = _a, { store, value } = _b, props = _AV6KTKLEcjs.__objRest.call(void 0, _b, ["store", "value"]);
-    const context = _VEG6PRAGcjs.useComboboxScopedContext.call(void 0, );
+    const context = _3WCBE6SUcjs.useComboboxScopedContext.call(void 0, );
     store = store || context;
-    const itemContext = _react.useContext.call(void 0, _VEG6PRAGcjs.ComboboxItemValueContext);
+    const itemContext = _react.useContext.call(void 0, _3WCBE6SUcjs.ComboboxItemValueContext);
     const itemValue = value != null ? value : itemContext;
     _misc.invariant.call(void 0, 
       store,

package/cjs/combobox/combobox-item.cjs

@@ -5,10 +5,11 @@ var _IPYAEPOTcjs = require('../__chunks/IPYAEPOT.cjs');
 
 
 
-var _VEG6PRAGcjs = require('../__chunks/VEG6PRAG.cjs');
 
+var _3WCBE6SUcjs = require('../__chunks/3WCBE6SU.cjs');
 
-var _P43G7USHcjs = require('../__chunks/P43G7USH.cjs');
+
+var _PFQ3IPWTcjs = require('../__chunks/PFQ3IPWT.cjs');
 require('../__chunks/DAJUUBUI.cjs');
 require('../__chunks/R5A2WTWB.cjs');
 require('../__chunks/RV3PHHWM.cjs');
@@ -24,7 +25,7 @@ require('../__chunks/75KXQZJX.cjs');
 
 
 var _RNZNGEL4cjs = require('../__chunks/RNZNGEL4.cjs');
-require('../__chunks/OALXXRFM.cjs');
+require('../__chunks/B233QVZE.cjs');
 
 
 
@@ -44,13 +45,24 @@ var _events = require('@ariakit/core/utils/events');
 var _focus = require('@ariakit/core/utils/focus');
 var _misc = require('@ariakit/core/utils/misc');
 var _jsxruntime = require('react/jsx-runtime');
+function isSelected(storeValue, itemValue) {
+  if (itemValue == null)
+    return;
+  if (storeValue == null)
+    return false;
+  if (Array.isArray(storeValue)) {
+    return storeValue.includes(itemValue);
+  }
+  return storeValue === itemValue;
+}
 var useComboboxItem = _RNZNGEL4cjs.createHook.call(void 0, 
   (_a) => {
     var _b = _a, {
       store,
       value,
-      hideOnClick = value != null,
-      setValueOnClick = true,
+      hideOnClick,
+      selectValueOnClick = true,
+      setValueOnClick,
       focusOnHover = false,
       moveOnKeyPress = true,
       getItem: getItemProp
@@ -58,12 +70,13 @@ var useComboboxItem = _RNZNGEL4cjs.createHook.call(void 0,
       "store",
       "value",
       "hideOnClick",
+      "selectValueOnClick",
       "setValueOnClick",
       "focusOnHover",
       "moveOnKeyPress",
       "getItem"
     ]);
-    const context = _VEG6PRAGcjs.useComboboxScopedContext.call(void 0, );
+    const context = _3WCBE6SUcjs.useComboboxScopedContext.call(void 0, );
     store = store || context;
     _misc.invariant.call(void 0, 
       store,
@@ -79,8 +92,14 @@ var useComboboxItem = _RNZNGEL4cjs.createHook.call(void 0,
       },
       [value, getItemProp]
     );
+    const multiSelectable = store.useState(
+      (state) => Array.isArray(state.selectedValue)
+    );
+    setValueOnClick = setValueOnClick != null ? setValueOnClick : !multiSelectable;
+    hideOnClick = hideOnClick != null ? hideOnClick : value != null && !multiSelectable;
     const onClickProp = props.onClick;
     const setValueOnClickProp = _EO6LS72Hcjs.useBooleanEvent.call(void 0, setValueOnClick);
+    const selectValueOnClickProp = _EO6LS72Hcjs.useBooleanEvent.call(void 0, selectValueOnClick);
     const hideOnClickProp = _EO6LS72Hcjs.useBooleanEvent.call(void 0, hideOnClick);
     const onClick = _EO6LS72Hcjs.useEvent.call(void 0, (event) => {
       onClickProp == null ? void 0 : onClickProp(event);
@@ -90,8 +109,20 @@ var useComboboxItem = _RNZNGEL4cjs.createHook.call(void 0,
         return;
       if (_events.isOpeningInNewTab.call(void 0, event))
         return;
-      if (value != null && setValueOnClickProp(event)) {
-        store == null ? void 0 : store.setValue(value);
+      if (value != null) {
+        if (selectValueOnClickProp(event)) {
+          store == null ? void 0 : store.setSelectedValue((prevValue) => {
+            if (!Array.isArray(prevValue))
+              return value;
+            if (prevValue.includes(value)) {
+              return prevValue.filter((v) => v !== value);
+            }
+            return [...prevValue, value];
+          });
+        }
+        if (setValueOnClickProp(event)) {
+          store == null ? void 0 : store.setValue(value);
+        }
       }
       if (hideOnClickProp(event)) {
         store == null ? void 0 : store.move(null);
@@ -116,10 +147,16 @@ var useComboboxItem = _RNZNGEL4cjs.createHook.call(void 0,
         }
       }
     });
+    const selected = store.useState(
+      (state) => isSelected(state.selectedValue, value)
+    );
+    if (multiSelectable && selected != null) {
+      props["aria-selected"] = selected;
+    }
     props = _EO6LS72Hcjs.useWrapElement.call(void 0, 
       props,
-      (element) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _VEG6PRAGcjs.ComboboxItemValueContext.Provider, { value, children: element }),
-      [value]
+      (element) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _3WCBE6SUcjs.ComboboxItemValueContext.Provider, { value, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _3WCBE6SUcjs.ComboboxItemCheckedContext.Provider, { value: selected != null ? selected : false, children: element }) }),
+      [value, selected]
     );
     const contentElement = store.useState("contentElement");
     props = _AV6KTKLEcjs.__spreadProps.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, {
@@ -130,7 +167,7 @@ var useComboboxItem = _RNZNGEL4cjs.createHook.call(void 0,
       onKeyDown
     });
     const moveOnKeyPressProp = _EO6LS72Hcjs.useBooleanEvent.call(void 0, moveOnKeyPress);
-    props = _P43G7USHcjs.useCompositeItem.call(void 0, _AV6KTKLEcjs.__spreadProps.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, {
+    props = _PFQ3IPWTcjs.useCompositeItem.call(void 0, _AV6KTKLEcjs.__spreadProps.call(void 0, _AV6KTKLEcjs.__spreadValues.call(void 0, {
       store
     }, props), {
       getItem,

package/cjs/combobox/combobox-item.d.cts

@@ -52,15 +52,15 @@ export interface ComboboxItemOptions<T extends As = "div"> extends CompositeItem
     store?: ComboboxStore;
     /**
      * The value of the item. This will be rendered as the children by default.
-     *   - If
-     *     [`setValueOnClick`](https://ariakit.org/reference/combobox-item#setvalueonclick)
-     *     is set to `true`, this will be the value of the combobox input when the
-     *     user clicks on this item.
-     *   - If the
-     *     [`autoComplete`](https://ariakit.org/reference/combobox#autocomplete)
-     *     prop on the [`Combobox`](https://ariakit.org/reference/combobox)
-     *     component is set to `both` or `inline`, this will be the value of the
-     *     combobox input when the combobox loses focus.
+     * - If
+     *   [`setValueOnClick`](https://ariakit.org/reference/combobox-item#setvalueonclick)
+     *   is set to `true`, this will be the value of the combobox input when the
+     *   user clicks on this item.
+     * - If the
+     *   [`autoComplete`](https://ariakit.org/reference/combobox#autocomplete)
+     *   prop on the [`Combobox`](https://ariakit.org/reference/combobox)
+     *   component is set to `both` or `inline`, this will be the value of the
+     *   combobox input when the combobox loses focus.
      *
      * Live examples:
      * - [Animated Combobox](https://ariakit.org/examples/combobox-animated)
@@ -73,18 +73,36 @@ export interface ComboboxItemOptions<T extends As = "div"> extends CompositeItem
      */
     value?: string;
     /**
-     * Whether to hide the combobox when this item is clicked.
+     * Whether to hide the combobox when this item is clicked. By default, the
+     * combobox will be hidden when the user clicks on an item with a
+     * [`value`](https://ariakit.org/reference/combobox-item#value) prop, unless
+     * the combobox is
+     * [multi-selectable](https://ariakit.org/examples/combobox-multiple).
      *
      * Live examples:
      * - [Combobox with links](https://ariakit.org/examples/combobox-links)
-     * @default true
      */
     hideOnClick?: BooleanOrCallback<MouseEvent<HTMLElement>>;
     /**
-     * Whether to set the combobox value with this item's value when this item is
-     * clicked.
+     * Whether to set the
+     * [`selectedValue`](https://ariakit.org/reference/combobox-provider#selectedvalue)
+     * state using this item's
+     * [`value`](https://ariakit.org/reference/combobox-item#value) when the item
+     * is clicked.
      * @default true
      */
+    selectValueOnClick?: BooleanOrCallback<MouseEvent<HTMLElement>>;
+    /**
+     * Whether to set the combobox
+     * [`value`](https://ariakit.org/reference/combobox-provider#value) state
+     * using this item's
+     * [`value`](https://ariakit.org/reference/combobox-item#value) when the item
+     * is clicked. The default is `true`, unless the combobox is
+     * [multi-selectable](https://ariakit.org/examples/combobox-multiple).
+     *
+     * Live examples:
+     * - [Menu with Combobox](https://ariakit.org/examples/menu-combobox)
+     */
     setValueOnClick?: BooleanOrCallback<MouseEvent<HTMLElement>>;
     /**
      * @default false

package/cjs/combobox/combobox-item.d.ts

@@ -52,15 +52,15 @@ export interface ComboboxItemOptions<T extends As = "div"> extends CompositeItem
     store?: ComboboxStore;
     /**
      * The value of the item. This will be rendered as the children by default.
-     *   - If
-     *     [`setValueOnClick`](https://ariakit.org/reference/combobox-item#setvalueonclick)
-     *     is set to `true`, this will be the value of the combobox input when the
-     *     user clicks on this item.
-     *   - If the
-     *     [`autoComplete`](https://ariakit.org/reference/combobox#autocomplete)
-     *     prop on the [`Combobox`](https://ariakit.org/reference/combobox)
-     *     component is set to `both` or `inline`, this will be the value of the
-     *     combobox input when the combobox loses focus.
+     * - If
+     *   [`setValueOnClick`](https://ariakit.org/reference/combobox-item#setvalueonclick)
+     *   is set to `true`, this will be the value of the combobox input when the
+     *   user clicks on this item.
+     * - If the
+     *   [`autoComplete`](https://ariakit.org/reference/combobox#autocomplete)
+     *   prop on the [`Combobox`](https://ariakit.org/reference/combobox)
+     *   component is set to `both` or `inline`, this will be the value of the
+     *   combobox input when the combobox loses focus.
      *
      * Live examples:
      * - [Animated Combobox](https://ariakit.org/examples/combobox-animated)
@@ -73,18 +73,36 @@ export interface ComboboxItemOptions<T extends As = "div"> extends CompositeItem
      */
     value?: string;
     /**
-     * Whether to hide the combobox when this item is clicked.
+     * Whether to hide the combobox when this item is clicked. By default, the
+     * combobox will be hidden when the user clicks on an item with a
+     * [`value`](https://ariakit.org/reference/combobox-item#value) prop, unless
+     * the combobox is
+     * [multi-selectable](https://ariakit.org/examples/combobox-multiple).
      *
      * Live examples:
      * - [Combobox with links](https://ariakit.org/examples/combobox-links)
-     * @default true
      */
     hideOnClick?: BooleanOrCallback<MouseEvent<HTMLElement>>;
     /**
-     * Whether to set the combobox value with this item's value when this item is
-     * clicked.
+     * Whether to set the
+     * [`selectedValue`](https://ariakit.org/reference/combobox-provider#selectedvalue)
+     * state using this item's
+     * [`value`](https://ariakit.org/reference/combobox-item#value) when the item
+     * is clicked.
      * @default true
      */
+    selectValueOnClick?: BooleanOrCallback<MouseEvent<HTMLElement>>;
+    /**
+     * Whether to set the combobox
+     * [`value`](https://ariakit.org/reference/combobox-provider#value) state
+     * using this item's
+     * [`value`](https://ariakit.org/reference/combobox-item#value) when the item
+     * is clicked. The default is `true`, unless the combobox is
+     * [multi-selectable](https://ariakit.org/examples/combobox-multiple).
+     *
+     * Live examples:
+     * - [Menu with Combobox](https://ariakit.org/examples/menu-combobox)
+     */
     setValueOnClick?: BooleanOrCallback<MouseEvent<HTMLElement>>;
     /**
      * @default false

package/cjs/combobox/combobox-label.cjs

@@ -0,0 +1,55 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
+
+
+var _3WCBE6SUcjs = require('../__chunks/3WCBE6SU.cjs');
+require('../__chunks/UZNYSPKP.cjs');
+require('../__chunks/BZTDJIVT.cjs');
+require('../__chunks/UVBBMANL.cjs');
+require('../__chunks/F2A2ZQDB.cjs');
+require('../__chunks/S6UU7NA4.cjs');
+
+
+
+
+var _RNZNGEL4cjs = require('../__chunks/RNZNGEL4.cjs');
+require('../__chunks/EO6LS72H.cjs');
+require('../__chunks/CJDHQUBR.cjs');
+
+
+
+var _AV6KTKLEcjs = require('../__chunks/AV6KTKLE.cjs');
+
+// src/combobox/combobox-label.ts
+var _misc = require('@ariakit/core/utils/misc');
+var useComboboxLabel = _RNZNGEL4cjs.createHook.call(void 0, 
+  (_a) => {
+    var _b = _a, { store } = _b, props = _AV6KTKLEcjs.__objRest.call(void 0, _b, ["store"]);
+    const context = _3WCBE6SUcjs.useComboboxProviderContext.call(void 0, );
+    store = store || context;
+    _misc.invariant.call(void 0, 
+      store,
+      process.env.NODE_ENV !== "production" && "ComboboxLabel must receive a `store` prop or be wrapped in a ComboboxProvider component."
+    );
+    const comboboxId = store.useState((state) => {
+      var _a2;
+      return (_a2 = state.baseElement) == null ? void 0 : _a2.id;
+    });
+    props = _AV6KTKLEcjs.__spreadValues.call(void 0, {
+      htmlFor: comboboxId
+    }, props);
+    return props;
+  }
+);
+var ComboboxLabel = _RNZNGEL4cjs.createMemoComponent.call(void 0, 
+  (props) => {
+    const htmlProps = useComboboxLabel(props);
+    return _RNZNGEL4cjs.createElement.call(void 0, "label", htmlProps);
+  }
+);
+if (process.env.NODE_ENV !== "production") {
+  ComboboxLabel.displayName = "ComboboxLabel";
+}
+
+
+
+exports.ComboboxLabel = ComboboxLabel; exports.useComboboxLabel = useComboboxLabel;

package/cjs/combobox/combobox-label.d.cts

@@ -0,0 +1,42 @@
+import type { As, Options, Props } from "../utils/types.js";
+import type { ComboboxStore } from "./combobox-store.js";
+/**
+ * Returns props to create a `ComboboxLabel` component.
+ * @see https://ariakit.org/components/combobox
+ * @example
+ * ```jsx
+ * const store = useComboboxStore();
+ * const props = useComboboxLabel({ store });
+ * <Role {...props}>Favorite fruit</Role>
+ * <Combobox store={store} />
+ * ```
+ */
+export declare const useComboboxLabel: import("../utils/types.js").Hook<ComboboxLabelOptions<"label">>;
+/**
+ * Renders a label for the [`Combobox`](https://ariakit.org/reference/combobox)
+ * component.
+ * @see https://ariakit.org/components/combobox
+ * @example
+ * ```jsx {2}
+ * <ComboboxProvider>
+ *   <ComboboxLabel>Favorite fruit</ComboboxLabel>
+ *   <Combobox />
+ *   <ComboboxPopover>
+ *     <ComboboxItem value="Apple" />
+ *     <ComboboxItem value="Orange" />
+ *   </ComboboxPopover>
+ * </ComboboxProvider>
+ * ```
+ */
+export declare const ComboboxLabel: import("../utils/types.js").Component<ComboboxLabelOptions<"label">>;
+export interface ComboboxLabelOptions<T extends As = "label"> extends Options<T> {
+    /**
+     * Object returned by the
+     * [`useComboboxStore`](https://ariakit.org/reference/use-combobox-store)
+     * hook. If not provided, the closest
+     * [`ComboboxProvider`](https://ariakit.org/reference/combobox-provider)
+     * component's context will be used.
+     */
+    store?: ComboboxStore;
+}
+export type ComboboxLabelProps<T extends As = "label"> = Props<ComboboxLabelOptions<T>>;

package/cjs/combobox/combobox-label.d.ts

@@ -0,0 +1,42 @@
+import type { As, Options, Props } from "../utils/types.js";
+import type { ComboboxStore } from "./combobox-store.js";
+/**
+ * Returns props to create a `ComboboxLabel` component.
+ * @see https://ariakit.org/components/combobox
+ * @example
+ * ```jsx
+ * const store = useComboboxStore();
+ * const props = useComboboxLabel({ store });
+ * <Role {...props}>Favorite fruit</Role>
+ * <Combobox store={store} />
+ * ```
+ */
+export declare const useComboboxLabel: import("../utils/types.js").Hook<ComboboxLabelOptions<"label">>;
+/**
+ * Renders a label for the [`Combobox`](https://ariakit.org/reference/combobox)
+ * component.
+ * @see https://ariakit.org/components/combobox
+ * @example
+ * ```jsx {2}
+ * <ComboboxProvider>
+ *   <ComboboxLabel>Favorite fruit</ComboboxLabel>
+ *   <Combobox />
+ *   <ComboboxPopover>
+ *     <ComboboxItem value="Apple" />
+ *     <ComboboxItem value="Orange" />
+ *   </ComboboxPopover>
+ * </ComboboxProvider>
+ * ```
+ */
+export declare const ComboboxLabel: import("../utils/types.js").Component<ComboboxLabelOptions<"label">>;
+export interface ComboboxLabelOptions<T extends As = "label"> extends Options<T> {
+    /**
+     * Object returned by the
+     * [`useComboboxStore`](https://ariakit.org/reference/use-combobox-store)
+     * hook. If not provided, the closest
+     * [`ComboboxProvider`](https://ariakit.org/reference/combobox-provider)
+     * component's context will be used.
+     */
+    store?: ComboboxStore;
+}
+export type ComboboxLabelProps<T extends As = "label"> = Props<ComboboxLabelOptions<T>>;