@ariakit/react-core 0.3.14 → 0.4.0

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

@@ -1,6 +1,9 @@
+import type { ElementType } from "react";
 import type { CompositeGroupLabelOptions } from "../composite/composite-group-label.js";
-import type { As, Props } from "../utils/types.js";
+import type { Props } from "../utils/types.js";
 import type { ComboboxStore } from "./combobox-store.js";
+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
@@ -13,7 +16,7 @@ import type { ComboboxStore } from "./combobox-store.js";
  * <Role {...props}>Label</Role>
  * ```
  */
-export declare const useComboboxGroupLabel: import("../utils/types.js").Hook<ComboboxGroupLabelOptions<"div">>;
+export declare const useComboboxGroupLabel: import("../utils/types.js").Hook<"div", ComboboxGroupLabelOptions<"div">>;
 /**
  * Renders a label in a combobox group. This component should be wrapped with
  * [`ComboboxGroup`](https://ariakit.org/reference/combobox-group) so the
@@ -33,8 +36,8 @@ export declare const useComboboxGroupLabel: import("../utils/types.js").Hook<Com
  * </ComboboxProvider>
  * ```
  */
-export declare const ComboboxGroupLabel: import("../utils/types.js").Component<ComboboxGroupLabelOptions<"div">>;
-export interface ComboboxGroupLabelOptions<T extends As = "div"> extends CompositeGroupLabelOptions<T> {
+export declare const ComboboxGroupLabel: (props: ComboboxGroupLabelProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export interface ComboboxGroupLabelOptions<T extends ElementType = TagName> extends CompositeGroupLabelOptions<T> {
     /**
      * Object returned by the
      * [`useComboboxStore`](https://ariakit.org/reference/use-combobox-store)
@@ -45,4 +48,5 @@ export interface ComboboxGroupLabelOptions<T extends As = "div"> extends Composi
      */
     store?: ComboboxStore;
 }
-export type ComboboxGroupLabelProps<T extends As = "div"> = Props<ComboboxGroupLabelOptions<T>>;
+export type ComboboxGroupLabelProps<T extends ElementType = TagName> = Props<T, ComboboxGroupLabelOptions<T>>;
+export {};

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

@@ -1,34 +1,28 @@
 "use client";
 import {
   useCompositeGroupLabel
-} from "../__chunks/5LK2LG7Q.js";
-import "../__chunks/NT7GEZQU.js";
+} from "../__chunks/ED7XMMMU.js";
+import "../__chunks/TH2YTBRW.js";
 import "../__chunks/3X3MDQGM.js";
 import {
-  createComponent,
   createElement,
-  createHook
-} from "../__chunks/3ORBWXWF.js";
+  createHook,
+  forwardRef
+} from "../__chunks/5M6RSQEC.js";
 import "../__chunks/6O5OEQGF.js";
 import "../__chunks/XM66DUTO.js";
 import "../__chunks/4R3V3JGP.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";
-}
+var TagName = "div";
+var useComboboxGroupLabel = createHook(function useComboboxGroupLabel2(props) {
+  props = useCompositeGroupLabel(props);
+  return props;
+});
+var ComboboxGroupLabel = forwardRef(function ComboboxGroupLabel2(props) {
+  const htmlProps = useComboboxGroupLabel(props);
+  return createElement(TagName, htmlProps);
+});
 export {
   ComboboxGroupLabel,
   useComboboxGroupLabel

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

@@ -1,6 +1,9 @@
+import type { ElementType } from "react";
 import type { CompositeGroupOptions } from "../composite/composite-group.js";
-import type { As, Props } from "../utils/types.js";
+import type { Props } from "../utils/types.js";
 import type { ComboboxStore } from "./combobox-store.js";
+declare const TagName = "div";
+type TagName = typeof TagName;
 /**
  * Returns props to create a `ComboboxGroup` component.
  * @see https://ariakit.org/components/combobox
@@ -18,7 +21,7 @@ import type { ComboboxStore } from "./combobox-store.js";
  * </ComboboxPopover>
  * ```
  */
-export declare const useComboboxGroup: import("../utils/types.js").Hook<ComboboxGroupOptions<"div">>;
+export declare const useComboboxGroup: import("../utils/types.js").Hook<"div", ComboboxGroupOptions<"div">>;
 /**
  * Renders a group for
  * [`ComboboxItem`](https://ariakit.org/reference/combobox-item) elements.
@@ -40,8 +43,8 @@ export declare const useComboboxGroup: import("../utils/types.js").Hook<Combobox
  * </ComboboxProvider>
  * ```
  */
-export declare const ComboboxGroup: import("../utils/types.js").Component<ComboboxGroupOptions<"div">>;
-export interface ComboboxGroupOptions<T extends As = "div"> extends CompositeGroupOptions<T> {
+export declare const ComboboxGroup: (props: ComboboxGroupProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export interface ComboboxGroupOptions<T extends ElementType = TagName> extends CompositeGroupOptions<T> {
     /**
      * Object returned by the
      * [`useComboboxStore`](https://ariakit.org/reference/use-combobox-store)
@@ -52,4 +55,5 @@ export interface ComboboxGroupOptions<T extends As = "div"> extends CompositeGro
      */
     store?: ComboboxStore;
 }
-export type ComboboxGroupProps<T extends As = "div"> = Props<ComboboxGroupOptions<T>>;
+export type ComboboxGroupProps<T extends ElementType = TagName> = Props<T, ComboboxGroupOptions<T>>;
+export {};

package/esm/combobox/combobox-group.js

@@ -1,22 +1,22 @@
 "use client";
 import {
   useCompositeGroup
-} from "../__chunks/636A7WVS.js";
-import "../__chunks/R2QZ3KXH.js";
+} from "../__chunks/ZO6PSJHJ.js";
+import "../__chunks/CWDOOAGR.js";
 import "../__chunks/3X3MDQGM.js";
 import {
   useComboboxScopedContext
-} from "../__chunks/W76OTZCC.js";
-import "../__chunks/IB7YUKH5.js";
-import "../__chunks/4UUKJZ4V.js";
-import "../__chunks/7H5KSHHF.js";
-import "../__chunks/G6BJYYBK.js";
-import "../__chunks/OAYFXAQ2.js";
+} from "../__chunks/UNDSQXBK.js";
+import "../__chunks/3D6OCOHF.js";
+import "../__chunks/MADQZZRL.js";
+import "../__chunks/TE637IA7.js";
+import "../__chunks/XXVAHUAO.js";
+import "../__chunks/J55AVALY.js";
 import {
-  createComponent,
   createElement,
-  createHook
-} from "../__chunks/3ORBWXWF.js";
+  createHook,
+  forwardRef
+} from "../__chunks/5M6RSQEC.js";
 import "../__chunks/6O5OEQGF.js";
 import "../__chunks/XM66DUTO.js";
 import {
@@ -27,8 +27,9 @@ import {
 // src/combobox/combobox-group.ts
 import { getPopupRole } from "@ariakit/core/utils/dom";
 import { invariant } from "@ariakit/core/utils/misc";
+var TagName = "div";
 var useComboboxGroup = createHook(
-  (_a) => {
+  function useComboboxGroup2(_a) {
     var _b = _a, { store } = _b, props = __objRest(_b, ["store"]);
     const context = useComboboxScopedContext();
     store = store || context;
@@ -45,13 +46,10 @@ var useComboboxGroup = createHook(
     return props;
   }
 );
-var ComboboxGroup = createComponent((props) => {
+var ComboboxGroup = forwardRef(function ComboboxGroup2(props) {
   const htmlProps = useComboboxGroup(props);
-  return createElement("div", htmlProps);
+  return createElement(TagName, htmlProps);
 });
-if (process.env.NODE_ENV !== "production") {
-  ComboboxGroup.displayName = "ComboboxGroup";
-}
 export {
   ComboboxGroup,
   useComboboxGroup

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

@@ -1,6 +1,9 @@
+import type { ElementType } from "react";
 import type { CheckboxCheckOptions } from "../checkbox/checkbox-check.jsx";
-import type { As, Props } from "../utils/types.js";
+import type { Props } from "../utils/types.js";
 import type { ComboboxStore } from "./combobox-store.js";
+declare const TagName = "span";
+type TagName = typeof TagName;
 /**
  * Returns props to create a `ComboboxItemCheck` component. This hook must be
  * used in a component that's wrapped with `ComboboxItem` or the `checked` prop
@@ -12,7 +15,7 @@ import type { ComboboxStore } from "./combobox-store.js";
  * <Role {...props} />
  * ```
  */
-export declare const useComboboxItemCheck: import("../utils/types.js").Hook<ComboboxItemCheckOptions<"span">>;
+export declare const useComboboxItemCheck: import("../utils/types.js").Hook<"span", ComboboxItemCheckOptions<"span">>;
 /**
  * Renders a checkmark icon when the
  * [`checked`](https://ariakit.org/reference/combobox-item-check#checked) prop
@@ -41,8 +44,8 @@ export declare const useComboboxItemCheck: import("../utils/types.js").Hook<Comb
  * </ComboboxProvider>
  * ```
  */
-export declare const ComboboxItemCheck: import("../utils/types.js").Component<ComboboxItemCheckOptions<"span">>;
-export interface ComboboxItemCheckOptions<T extends As = "span"> extends CheckboxCheckOptions<T> {
+export declare const ComboboxItemCheck: (props: ComboboxItemCheckProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export interface ComboboxItemCheckOptions<T extends ElementType = TagName> extends CheckboxCheckOptions<T> {
     /**
      * Object returned by the
      * [`useComboboxStore`](https://ariakit.org/reference/use-combobox-store)
@@ -50,4 +53,5 @@ export interface ComboboxItemCheckOptions<T extends As = "span"> extends Checkbo
      */
     store?: ComboboxStore;
 }
-export type ComboboxItemCheckProps<T extends As = "span"> = Props<ComboboxItemCheckOptions<T>>;
+export type ComboboxItemCheckProps<T extends ElementType = TagName> = Props<T, ComboboxItemCheckOptions<T>>;
+export {};

package/esm/combobox/combobox-item-check.js

@@ -1,21 +1,21 @@
 "use client";
 import {
   useCheckboxCheck
-} from "../__chunks/MW2F7SEA.js";
+} from "../__chunks/BX7FFG2R.js";
 import "../__chunks/6XBVQI3K.js";
 import {
   ComboboxItemCheckedContext
-} from "../__chunks/W76OTZCC.js";
-import "../__chunks/IB7YUKH5.js";
-import "../__chunks/4UUKJZ4V.js";
-import "../__chunks/7H5KSHHF.js";
-import "../__chunks/G6BJYYBK.js";
-import "../__chunks/OAYFXAQ2.js";
+} from "../__chunks/UNDSQXBK.js";
+import "../__chunks/3D6OCOHF.js";
+import "../__chunks/MADQZZRL.js";
+import "../__chunks/TE637IA7.js";
+import "../__chunks/XXVAHUAO.js";
+import "../__chunks/J55AVALY.js";
 import {
-  createComponent,
   createElement,
-  createHook
-} from "../__chunks/3ORBWXWF.js";
+  createHook,
+  forwardRef
+} from "../__chunks/5M6RSQEC.js";
 import "../__chunks/6O5OEQGF.js";
 import "../__chunks/XM66DUTO.js";
 import {
@@ -26,24 +26,18 @@ import {
 
 // src/combobox/combobox-item-check.ts
 import { useContext } from "react";
-var useComboboxItemCheck = createHook(
-  (_a) => {
-    var _b = _a, { store, checked } = _b, props = __objRest(_b, ["store", "checked"]);
-    const context = useContext(ComboboxItemCheckedContext);
-    checked = checked != null ? checked : context;
-    props = useCheckboxCheck(__spreadProps(__spreadValues({}, props), { checked }));
-    return props;
-  }
-);
-var ComboboxItemCheck = createComponent(
-  (props) => {
-    const htmlProps = useComboboxItemCheck(props);
-    return createElement("span", htmlProps);
-  }
-);
-if (process.env.NODE_ENV !== "production") {
-  ComboboxItemCheck.displayName = "ComboboxItemCheck";
-}
+var TagName = "span";
+var useComboboxItemCheck = createHook(function useComboboxItemCheck2(_a) {
+  var _b = _a, { store, checked } = _b, props = __objRest(_b, ["store", "checked"]);
+  const context = useContext(ComboboxItemCheckedContext);
+  checked = checked != null ? checked : context;
+  props = useCheckboxCheck(__spreadProps(__spreadValues({}, props), { checked }));
+  return props;
+});
+var ComboboxItemCheck = forwardRef(function ComboboxItemCheck2(props) {
+  const htmlProps = useComboboxItemCheck(props);
+  return createElement(TagName, htmlProps);
+});
 export {
   ComboboxItemCheck,
   useComboboxItemCheck

package/esm/combobox/combobox-item-value.d.ts

@@ -1,5 +1,8 @@
-import type { As, Options, Props } from "../utils/types.js";
+import type { ElementType, ReactElement } from "react";
+import type { Options, Props } from "../utils/types.js";
 import type { ComboboxStore } from "./combobox-store.js";
+declare const TagName = "span";
+type TagName = typeof TagName;
 /**
  * Returns props to create a `ComboboxItemValue` component that displays a value
  * element inside a combobox item. The value will be split into span elements
@@ -21,7 +24,7 @@ import type { ComboboxStore } from "./combobox-store.js";
  * </span>
  * ```
  */
-export declare const useComboboxItemValue: import("../utils/types.js").Hook<ComboboxItemValueOptions<"span">>;
+export declare const useComboboxItemValue: import("../utils/types.js").Hook<"span", ComboboxItemValueOptions<"span">>;
 /**
  * Renders a value element inside a
  * [`ComboboxItem`](https://ariakit.org/reference/combobox-item). The value will
@@ -51,8 +54,8 @@ export declare const useComboboxItemValue: import("../utils/types.js").Hook<Comb
  * </span>
  * ```
  */
-export declare const ComboboxItemValue: import("../utils/types.js").Component<ComboboxItemValueOptions<"span">>;
-export interface ComboboxItemValueOptions<T extends As = "span"> extends Options<T> {
+export declare const ComboboxItemValue: (props: ComboboxItemValueProps) => ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export interface ComboboxItemValueOptions<_T extends ElementType = TagName> extends Options {
     /**
      * Object returned by the
      * [`useComboboxStore`](https://ariakit.org/reference/use-combobox-store)
@@ -70,4 +73,5 @@ export interface ComboboxItemValueOptions<T extends As = "span"> extends Options
      */
     value?: string;
 }
-export type ComboboxItemValueProps<T extends As = "span"> = Props<ComboboxItemValueOptions<T>>;
+export type ComboboxItemValueProps<T extends ElementType = TagName> = Props<T, ComboboxItemValueOptions<T>>;
+export {};

package/esm/combobox/combobox-item-value.js

@@ -2,17 +2,17 @@
 import {
   ComboboxItemValueContext,
   useComboboxScopedContext
-} from "../__chunks/W76OTZCC.js";
-import "../__chunks/IB7YUKH5.js";
-import "../__chunks/4UUKJZ4V.js";
-import "../__chunks/7H5KSHHF.js";
-import "../__chunks/G6BJYYBK.js";
-import "../__chunks/OAYFXAQ2.js";
+} from "../__chunks/UNDSQXBK.js";
+import "../__chunks/3D6OCOHF.js";
+import "../__chunks/MADQZZRL.js";
+import "../__chunks/TE637IA7.js";
+import "../__chunks/XXVAHUAO.js";
+import "../__chunks/J55AVALY.js";
 import {
-  createComponent,
   createElement,
-  createHook
-} from "../__chunks/3ORBWXWF.js";
+  createHook,
+  forwardRef
+} from "../__chunks/5M6RSQEC.js";
 import "../__chunks/6O5OEQGF.js";
 import "../__chunks/XM66DUTO.js";
 import {
@@ -22,8 +22,13 @@ import {
 
 // src/combobox/combobox-item-value.tsx
 import { useContext, useMemo } from "react";
-import { invariant, normalizeString } from "@ariakit/core/utils/misc";
+import {
+  invariant,
+  normalizeString,
+  removeUndefinedValues
+} from "@ariakit/core/utils/misc";
 import { jsx } from "react/jsx-runtime";
+var TagName = "span";
 function normalizeValue(value) {
   return normalizeString(value).toLowerCase();
 }
@@ -50,39 +55,32 @@ function splitValue(itemValue, userValue) {
   }
   return parts;
 }
-var useComboboxItemValue = createHook(
-  (_a) => {
-    var _b = _a, { store, value } = _b, props = __objRest(_b, ["store", "value"]);
-    const context = useComboboxScopedContext();
-    store = store || context;
-    const itemContext = useContext(ComboboxItemValueContext);
-    const itemValue = value != null ? value : itemContext;
-    invariant(
-      store,
-      process.env.NODE_ENV !== "production" && "ComboboxItemValue must be wrapped in a ComboboxItem component."
-    );
-    const stateValue = store.useState(
-      (state) => itemValue && state.value ? state.value : void 0
-    );
-    const children = useMemo(
-      () => itemValue && stateValue ? splitValue(itemValue, stateValue) : itemValue,
-      [itemValue, stateValue]
-    );
-    props = __spreadValues({
-      children
-    }, props);
-    return props;
-  }
-);
-var ComboboxItemValue = createComponent(
-  (props) => {
-    const htmlProps = useComboboxItemValue(props);
-    return createElement("span", htmlProps);
-  }
-);
-if (process.env.NODE_ENV !== "production") {
-  ComboboxItemValue.displayName = "ComboboxItemValue";
-}
+var useComboboxItemValue = createHook(function useComboboxItemValue2(_a) {
+  var _b = _a, { store, value } = _b, props = __objRest(_b, ["store", "value"]);
+  const context = useComboboxScopedContext();
+  store = store || context;
+  const itemContext = useContext(ComboboxItemValueContext);
+  const itemValue = value != null ? value : itemContext;
+  invariant(
+    store,
+    process.env.NODE_ENV !== "production" && "ComboboxItemValue must be wrapped in a ComboboxItem component."
+  );
+  const stateValue = store.useState(
+    (state) => itemValue && state.value ? state.value : void 0
+  );
+  const children = useMemo(
+    () => itemValue && stateValue ? splitValue(itemValue, stateValue) : itemValue,
+    [itemValue, stateValue]
+  );
+  props = __spreadValues({
+    children
+  }, props);
+  return removeUndefinedValues(props);
+});
+var ComboboxItemValue = forwardRef(function ComboboxItemValue2(props) {
+  const htmlProps = useComboboxItemValue(props);
+  return createElement(TagName, htmlProps);
+});
 export {
   ComboboxItemValue,
   useComboboxItemValue

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

@@ -1,9 +1,11 @@
-import type { MouseEvent } from "react";
+import type { ElementType, MouseEvent } from "react";
 import type { BooleanOrCallback } from "@ariakit/core/utils/types";
 import type { CompositeHoverOptions } from "../composite/composite-hover.js";
 import type { CompositeItemOptions } from "../composite/composite-item.js";
-import type { As, Props } from "../utils/types.js";
+import type { Props } from "../utils/types.js";
 import type { ComboboxStore } from "./combobox-store.js";
+declare const TagName = "div";
+type TagName = typeof TagName;
 /**
  * Returns props to create a `ComboboxItem` component.
  * @see https://ariakit.org/components/combobox
@@ -14,7 +16,7 @@ import type { ComboboxStore } from "./combobox-store.js";
  * <Role {...props} />
  * ```
  */
-export declare const useComboboxItem: import("../utils/types.js").Hook<ComboboxItemOptions<"div">>;
+export declare const useComboboxItem: import("../utils/types.js").Hook<"div", ComboboxItemOptions<"div">>;
 /**
  * Renders a combobox item inside
  * [`ComboboxList`](https://ariakit.org/reference/combobox-list) or
@@ -36,8 +38,8 @@ export declare const useComboboxItem: import("../utils/types.js").Hook<ComboboxI
  * </ComboboxProvider>
  * ```
  */
-export declare const ComboboxItem: import("../utils/types.js").Component<ComboboxItemOptions<"div">>;
-export interface ComboboxItemOptions<T extends As = "div"> extends CompositeItemOptions<T>, CompositeHoverOptions<T> {
+export declare const ComboboxItem: (props: ComboboxItemProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export interface ComboboxItemOptions<T extends ElementType = TagName> extends CompositeItemOptions<T>, CompositeHoverOptions<T> {
     /**
      * Object returned by the
      * [`useComboboxStore`](https://ariakit.org/reference/use-combobox-store)
@@ -123,4 +125,5 @@ export interface ComboboxItemOptions<T extends As = "div"> extends CompositeItem
      */
     focusOnHover?: CompositeHoverOptions["focusOnHover"];
 }
-export type ComboboxItemProps<T extends As = "div"> = Props<ComboboxItemOptions<T>>;
+export type ComboboxItemProps<T extends ElementType = TagName> = Props<T, ComboboxItemOptions<T>>;
+export {};

package/esm/combobox/combobox-item.js

@@ -1,30 +1,31 @@
 "use client";
 import {
   useCompositeHover
-} from "../__chunks/G6ONQ5EH.js";
+} from "../__chunks/WL6TTPTB.js";
 import {
   ComboboxItemCheckedContext,
   ComboboxItemValueContext,
   useComboboxScopedContext
-} from "../__chunks/W76OTZCC.js";
+} from "../__chunks/UNDSQXBK.js";
 import {
   useCompositeItem
-} from "../__chunks/QZLXIDNP.js";
-import "../__chunks/NWCBQ4CV.js";
-import "../__chunks/UH3I23HL.js";
+} from "../__chunks/VVLSOSIG.js";
+import "../__chunks/ZF6ZK5BT.js";
+import "../__chunks/7YKLTEOQ.js";
 import "../__chunks/3IEDWLST.js";
-import "../__chunks/IB7YUKH5.js";
-import "../__chunks/4UUKJZ4V.js";
-import "../__chunks/7H5KSHHF.js";
-import "../__chunks/G6BJYYBK.js";
-import "../__chunks/OAYFXAQ2.js";
-import "../__chunks/KK7H3W2B.js";
+import "../__chunks/3D6OCOHF.js";
+import "../__chunks/MADQZZRL.js";
+import "../__chunks/TE637IA7.js";
+import "../__chunks/XXVAHUAO.js";
+import "../__chunks/J55AVALY.js";
+import "../__chunks/VA234QKF.js";
 import "../__chunks/SHA3WOPI.js";
 import {
   createElement,
   createHook,
-  createMemoComponent
-} from "../__chunks/3ORBWXWF.js";
+  forwardRef,
+  memo
+} from "../__chunks/5M6RSQEC.js";
 import "../__chunks/EKQEJRUF.js";
 import {
   useBooleanEvent,
@@ -45,6 +46,7 @@ import { isDownloading, isOpeningInNewTab } from "@ariakit/core/utils/events";
 import { hasFocus } from "@ariakit/core/utils/focus";
 import { invariant } from "@ariakit/core/utils/misc";
 import { jsx } from "react/jsx-runtime";
+var TagName = "div";
 function isSelected(storeValue, itemValue) {
   if (itemValue == null)
     return;
@@ -56,7 +58,7 @@ function isSelected(storeValue, itemValue) {
   return storeValue === itemValue;
 }
 var useComboboxItem = createHook(
-  (_a) => {
+  function useComboboxItem2(_a) {
     var _b = _a, {
       store,
       value,
@@ -189,15 +191,12 @@ var useComboboxItem = createHook(
     return props;
   }
 );
-var ComboboxItem = createMemoComponent(
-  (props) => {
+var ComboboxItem = memo(
+  forwardRef(function ComboboxItem2(props) {
     const htmlProps = useComboboxItem(props);
-    return createElement("div", htmlProps);
-  }
+    return createElement(TagName, htmlProps);
+  })
 );
-if (process.env.NODE_ENV !== "production") {
-  ComboboxItem.displayName = "ComboboxItem";
-}
 export {
   ComboboxItem,
   useComboboxItem

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

@@ -1,5 +1,8 @@
-import type { As, Options, Props } from "../utils/types.js";
+import type { ElementType } from "react";
+import type { Options, Props } from "../utils/types.js";
 import type { ComboboxStore } from "./combobox-store.js";
+declare const TagName = "label";
+type TagName = typeof TagName;
 /**
  * Returns props to create a `ComboboxLabel` component.
  * @see https://ariakit.org/components/combobox
@@ -11,7 +14,7 @@ import type { ComboboxStore } from "./combobox-store.js";
  * <Combobox store={store} />
  * ```
  */
-export declare const useComboboxLabel: import("../utils/types.js").Hook<ComboboxLabelOptions<"label">>;
+export declare const useComboboxLabel: import("../utils/types.js").Hook<"label", ComboboxLabelOptions<"label">>;
 /**
  * Renders a label for the [`Combobox`](https://ariakit.org/reference/combobox)
  * component.
@@ -28,8 +31,8 @@ export declare const useComboboxLabel: import("../utils/types.js").Hook<Combobox
  * </ComboboxProvider>
  * ```
  */
-export declare const ComboboxLabel: import("../utils/types.js").Component<ComboboxLabelOptions<"label">>;
-export interface ComboboxLabelOptions<T extends As = "label"> extends Options<T> {
+export declare const ComboboxLabel: (props: ComboboxLabelProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export interface ComboboxLabelOptions<_T extends ElementType = TagName> extends Options {
     /**
      * Object returned by the
      * [`useComboboxStore`](https://ariakit.org/reference/use-combobox-store)
@@ -39,4 +42,5 @@ export interface ComboboxLabelOptions<T extends As = "label"> extends Options<T>
      */
     store?: ComboboxStore;
 }
-export type ComboboxLabelProps<T extends As = "label"> = Props<ComboboxLabelOptions<T>>;
+export type ComboboxLabelProps<T extends ElementType = TagName> = Props<T, ComboboxLabelOptions<T>>;
+export {};