@ariakit/react-core 0.3.14 → 0.4.1

package/esm/select/select-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 { SelectStore } from "./select-store.js";
+declare const TagName = "div";
+type TagName = typeof TagName;
 /**
  * Returns props to create a `SelectItem` component.
  * @see https://ariakit.org/components/select
@@ -14,7 +16,7 @@ import type { SelectStore } from "./select-store.js";
  * <Role {...props} />
  * ```
  */
-export declare const useSelectItem: import("../utils/types.js").Hook<SelectItemOptions<"div">>;
+export declare const useSelectItem: import("../utils/types.js").Hook<"div", SelectItemOptions<"div">>;
 /**
  * Renders a select item inside a
  * [`SelectList`](https://ariakit.org/reference/select-list) or
@@ -41,8 +43,8 @@ export declare const useSelectItem: import("../utils/types.js").Hook<SelectItemO
  * </SelectProvider>
  * ```
  */
-export declare const SelectItem: import("../utils/types.js").Component<SelectItemOptions<"div">>;
-export interface SelectItemOptions<T extends As = "div"> extends CompositeItemOptions<T>, CompositeHoverOptions<T> {
+export declare const SelectItem: (props: SelectItemProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export interface SelectItemOptions<T extends ElementType = TagName> extends CompositeItemOptions<T>, CompositeHoverOptions<T> {
     /**
      * Object returned by the
      * [`useSelectStore`](https://ariakit.org/reference/use-select-store) hook. If
@@ -94,4 +96,5 @@ export interface SelectItemOptions<T extends As = "div"> extends CompositeItemOp
      */
     setValueOnClick?: BooleanOrCallback<MouseEvent<HTMLElement>>;
 }
-export type SelectItemProps<T extends As = "div"> = Props<SelectItemOptions<T>>;
+export type SelectItemProps<T extends ElementType = TagName> = Props<T, SelectItemOptions<T>>;
+export {};

package/esm/select/select-item.js

@@ -1,29 +1,30 @@
 "use client";
 import {
   useCompositeHover
-} from "../__chunks/G6ONQ5EH.js";
+} from "../__chunks/WL6TTPTB.js";
 import {
   SelectItemCheckedContext,
   useSelectScopedContext
-} from "../__chunks/5HVNGX6D.js";
+} from "../__chunks/TKSBJDO3.js";
 import {
   useCompositeItem
-} from "../__chunks/QZLXIDNP.js";
-import "../__chunks/NWCBQ4CV.js";
-import "../__chunks/UH3I23HL.js";
+} from "../__chunks/C6OBNQ4F.js";
+import "../__chunks/KSZPJCUA.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/WAZE6NXP.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,
@@ -44,6 +45,7 @@ import { getPopupItemRole } from "@ariakit/core/utils/dom";
 import { isDownloading, isOpeningInNewTab } from "@ariakit/core/utils/events";
 import { disabledFromProps, invariant } from "@ariakit/core/utils/misc";
 import { jsx } from "react/jsx-runtime";
+var TagName = "div";
 function isSelected(storeValue, itemValue) {
   if (itemValue == null)
     return;
@@ -55,7 +57,7 @@ function isSelected(storeValue, itemValue) {
   return storeValue === itemValue;
 }
 var useSelectItem = createHook(
-  (_a) => {
+  function useSelectItem2(_a) {
     var _b = _a, {
       store,
       value,
@@ -164,7 +166,7 @@ var useSelectItem = createHook(
       // We have to disable focusOnHover when the popup is closed, otherwise
       // the active item will change to null (the container) when the popup is
       // closed by clicking on an item.
-      focusOnHover: (event) => {
+      focusOnHover(event) {
         if (!focusOnHoverProp(event))
           return false;
         const state = store == null ? void 0 : store.getState();
@@ -174,13 +176,12 @@ var useSelectItem = createHook(
     return props;
   }
 );
-var SelectItem = createMemoComponent((props) => {
-  const htmlProps = useSelectItem(props);
-  return createElement("div", htmlProps);
-});
-if (process.env.NODE_ENV !== "production") {
-  SelectItem.displayName = "SelectItem";
-}
+var SelectItem = memo(
+  forwardRef(function SelectItem2(props) {
+    const htmlProps = useSelectItem(props);
+    return createElement(TagName, htmlProps);
+  })
+);
 export {
   SelectItem,
   useSelectItem

package/esm/select/select-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 { SelectStore } from "./select-store.js";
+declare const TagName = "div";
+type TagName = typeof TagName;
 /**
  * Returns props to create a `SelectLabel` component. Since it's not a native
  * select element, we can't use the native label element. The `SelectLabel`
@@ -14,7 +17,7 @@ import type { SelectStore } from "./select-store.js";
  * <Select store={store} />
  * ```
  */
-export declare const useSelectLabel: import("../utils/types.js").Hook<SelectLabelOptions<"div">>;
+export declare const useSelectLabel: import("../utils/types.js").Hook<"div", SelectLabelOptions<"div">>;
 /**
  * Renders a label for the [`Select`](https://ariakit.org/reference/select)
  * component. Since it's not a native select element, we can't use the native
@@ -33,8 +36,8 @@ export declare const useSelectLabel: import("../utils/types.js").Hook<SelectLabe
  * </SelectProvider>
  * ```
  */
-export declare const SelectLabel: import("../utils/types.js").Component<SelectLabelOptions<"div">>;
-export interface SelectLabelOptions<T extends As = "div"> extends Options<T> {
+export declare const SelectLabel: (props: SelectLabelProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export interface SelectLabelOptions<_T extends ElementType = TagName> extends Options {
     /**
      * Object returned by the
      * [`useSelectStore`](https://ariakit.org/reference/use-select-store) hook. If
@@ -44,4 +47,5 @@ export interface SelectLabelOptions<T extends As = "div"> extends Options<T> {
      */
     store?: SelectStore;
 }
-export type SelectLabelProps<T extends As = "div"> = Props<SelectLabelOptions<T>>;
+export type SelectLabelProps<T extends ElementType = TagName> = Props<T, SelectLabelOptions<T>>;
+export {};

package/esm/select/select-label.js

@@ -1,17 +1,18 @@
 "use client";
 import {
   useSelectProviderContext
-} from "../__chunks/5HVNGX6D.js";
-import "../__chunks/IB7YUKH5.js";
-import "../__chunks/4UUKJZ4V.js";
-import "../__chunks/7H5KSHHF.js";
-import "../__chunks/G6BJYYBK.js";
-import "../__chunks/OAYFXAQ2.js";
+} from "../__chunks/TKSBJDO3.js";
+import "../__chunks/3D6OCOHF.js";
+import "../__chunks/MADQZZRL.js";
+import "../__chunks/TE637IA7.js";
+import "../__chunks/XXVAHUAO.js";
+import "../__chunks/J55AVALY.js";
 import {
   createElement,
   createHook,
-  createMemoComponent
-} from "../__chunks/3ORBWXWF.js";
+  forwardRef,
+  memo
+} from "../__chunks/5M6RSQEC.js";
 import {
   useEvent,
   useId,
@@ -25,9 +26,10 @@ import {
 } from "../__chunks/4R3V3JGP.js";
 
 // src/select/select-label.ts
-import { invariant } from "@ariakit/core/utils/misc";
+import { invariant, removeUndefinedValues } from "@ariakit/core/utils/misc";
+var TagName = "div";
 var useSelectLabel = createHook(
-  (_a) => {
+  function useSelectLabel2(_a) {
     var _b = _a, { store } = _b, props = __objRest(_b, ["store"]);
     const context = useSelectProviderContext();
     store = store || context;
@@ -56,16 +58,15 @@ var useSelectLabel = createHook(
         cursor: "default"
       }, props.style)
     });
-    return props;
+    return removeUndefinedValues(props);
   }
 );
-var SelectLabel = createMemoComponent((props) => {
-  const htmlProps = useSelectLabel(props);
-  return createElement("div", htmlProps);
-});
-if (process.env.NODE_ENV !== "production") {
-  SelectLabel.displayName = "SelectLabel";
-}
+var SelectLabel = memo(
+  forwardRef(function SelectLabel2(props) {
+    const htmlProps = useSelectLabel(props);
+    return createElement(TagName, htmlProps);
+  })
+);
 export {
   SelectLabel,
   useSelectLabel

package/esm/select/select-list.d.ts

@@ -1,10 +1,12 @@
-import type { KeyboardEvent } from "react";
+import type { ElementType, KeyboardEvent } from "react";
 import type { BooleanOrCallback } from "@ariakit/core/utils/types";
 import type { CompositeTypeaheadOptions } from "../composite/composite-typeahead.js";
 import type { CompositeOptions } from "../composite/composite.js";
 import type { DisclosureContentOptions } from "../disclosure/disclosure-content.js";
-import type { As, Props } from "../utils/types.js";
+import type { Props } from "../utils/types.js";
 import type { SelectStore } from "./select-store.js";
+declare const TagName = "div";
+type TagName = typeof TagName;
 /**
  * Returns props to create a `SelectList` component.
  * @see https://ariakit.org/components/select
@@ -18,7 +20,7 @@ import type { SelectStore } from "./select-store.js";
  * </Role>
  * ```
  */
-export declare const useSelectList: import("../utils/types.js").Hook<SelectListOptions<"div">>;
+export declare const useSelectList: import("../utils/types.js").Hook<"div", SelectListOptions<"div">>;
 /**
  * Renders a select list element. This is the primitive component used by the
  * [`SelectPopover`](https://ariakit.org/reference/select-popover) component.
@@ -41,8 +43,8 @@ export declare const useSelectList: import("../utils/types.js").Hook<SelectListO
  * </SelectProvider>
  * ```
  */
-export declare const SelectList: import("../utils/types.js").Component<SelectListOptions<"div">>;
-export interface SelectListOptions<T extends As = "div"> extends CompositeOptions<T>, CompositeTypeaheadOptions<T>, Pick<DisclosureContentOptions, "alwaysVisible"> {
+export declare const SelectList: (props: SelectListProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export interface SelectListOptions<T extends ElementType = TagName> extends CompositeOptions<T>, CompositeTypeaheadOptions<T>, Pick<DisclosureContentOptions, "alwaysVisible"> {
     /**
      * Object returned by the
      * [`useSelectStore`](https://ariakit.org/reference/use-select-store) hook. If
@@ -68,4 +70,5 @@ export interface SelectListOptions<T extends As = "div"> extends CompositeOption
      */
     hideOnEnter?: BooleanOrCallback<KeyboardEvent<HTMLElement>>;
 }
-export type SelectListProps<T extends As = "div"> = Props<SelectListOptions<T>>;
+export type SelectListProps<T extends ElementType = TagName> = Props<T, SelectListOptions<T>>;
+export {};

package/esm/select/select-list.js

@@ -2,20 +2,20 @@
 import {
   SelectList,
   useSelectList
-} from "../__chunks/SU2GU5JB.js";
-import "../__chunks/346FK57L.js";
-import "../__chunks/5HVNGX6D.js";
-import "../__chunks/7QTPYGNZ.js";
+} from "../__chunks/PDRDZB4I.js";
+import "../__chunks/DMSZFK7W.js";
+import "../__chunks/TKSBJDO3.js";
+import "../__chunks/FTNKYK65.js";
 import "../__chunks/3IEDWLST.js";
-import "../__chunks/IB7YUKH5.js";
-import "../__chunks/4UUKJZ4V.js";
-import "../__chunks/CLE7NTOY.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/RQZGFHI2.js";
+import "../__chunks/TE637IA7.js";
+import "../__chunks/XXVAHUAO.js";
+import "../__chunks/J55AVALY.js";
+import "../__chunks/WAZE6NXP.js";
 import "../__chunks/SHA3WOPI.js";
-import "../__chunks/3ORBWXWF.js";
+import "../__chunks/5M6RSQEC.js";
 import "../__chunks/EKQEJRUF.js";
 import "../__chunks/6O5OEQGF.js";
 import "../__chunks/XM66DUTO.js";

package/esm/select/select-popover.d.ts

@@ -1,6 +1,9 @@
+import type { ElementType } from "react";
 import type { PopoverOptions } from "../popover/popover.js";
-import type { As, Props } from "../utils/types.js";
+import type { Props } from "../utils/types.js";
 import type { SelectListOptions } from "./select-list.js";
+declare const TagName = "div";
+type TagName = typeof TagName;
 /**
  * Returns props to create a `SelectPopover` component.
  * @see https://ariakit.org/components/select
@@ -14,7 +17,7 @@ import type { SelectListOptions } from "./select-list.js";
  * </Role>
  * ```
  */
-export declare const useSelectPopover: import("../utils/types.js").Hook<SelectPopoverOptions<"div">>;
+export declare const useSelectPopover: import("../utils/types.js").Hook<"div", SelectPopoverOptions<"div">>;
 /**
  * Renders a select popover. The `role` attribute is set to `listbox` by
  * default, but can be overriden by any other valid select popup role
@@ -31,7 +34,8 @@ export declare const useSelectPopover: import("../utils/types.js").Hook<SelectPo
  * </SelectProvider>
  * ```
  */
-export declare const SelectPopover: import("../utils/types.js").Component<SelectPopoverOptions<"div">>;
-export interface SelectPopoverOptions<T extends As = "div"> extends SelectListOptions<T>, Omit<PopoverOptions<T>, "store"> {
+export declare const SelectPopover: (props: SelectPopoverProps<"div">) => import("react/jsx-runtime").JSX.Element | null;
+export interface SelectPopoverOptions<T extends ElementType = TagName> extends SelectListOptions<T>, Omit<PopoverOptions<T>, "store"> {
 }
-export type SelectPopoverProps<T extends As = "div"> = Props<SelectPopoverOptions<T>>;
+export type SelectPopoverProps<T extends ElementType = TagName> = Props<T, SelectPopoverOptions<T>>;
+export {};

package/esm/select/select-popover.js

@@ -1,23 +1,23 @@
 "use client";
 import {
   useSelectList
-} from "../__chunks/SU2GU5JB.js";
-import "../__chunks/346FK57L.js";
+} from "../__chunks/PDRDZB4I.js";
+import "../__chunks/DMSZFK7W.js";
 import {
   useSelectProviderContext
-} from "../__chunks/5HVNGX6D.js";
-import "../__chunks/7QTPYGNZ.js";
+} from "../__chunks/TKSBJDO3.js";
+import "../__chunks/FTNKYK65.js";
 import "../__chunks/3IEDWLST.js";
-import "../__chunks/IB7YUKH5.js";
-import "../__chunks/4UUKJZ4V.js";
+import "../__chunks/3D6OCOHF.js";
+import "../__chunks/MADQZZRL.js";
 import {
   usePopover
-} from "../__chunks/IRX7SFUJ.js";
+} from "../__chunks/BYD75WXE.js";
 import {
   createDialogComponent
-} from "../__chunks/NERBASET.js";
-import "../__chunks/LWHPHW7Q.js";
-import "../__chunks/TQYOGOE2.js";
+} from "../__chunks/KXSO5EFT.js";
+import "../__chunks/3N4FFVWW.js";
+import "../__chunks/NOYDL3YS.js";
 import "../__chunks/BULCTPRV.js";
 import "../__chunks/6BJGLK2C.js";
 import "../__chunks/CS347UVZ.js";
@@ -30,27 +30,27 @@ import "../__chunks/OOBDFMJL.js";
 import "../__chunks/X6WIMZJE.js";
 import "../__chunks/677M2CI3.js";
 import "../__chunks/6GXEOXGT.js";
-import "../__chunks/HPP6CWMY.js";
+import "../__chunks/WCIYB4YS.js";
 import "../__chunks/UYRJLDVS.js";
-import "../__chunks/JPXNJYSO.js";
-import "../__chunks/CHKJ74UC.js";
+import "../__chunks/CK3UW3AQ.js";
+import "../__chunks/WKWX2XLD.js";
 import "../__chunks/7452U3HH.js";
 import "../__chunks/XPF5GU3Q.js";
-import "../__chunks/FSFPRQFR.js";
-import "../__chunks/CLE7NTOY.js";
-import "../__chunks/7H5KSHHF.js";
-import "../__chunks/G6BJYYBK.js";
-import "../__chunks/OAYFXAQ2.js";
-import "../__chunks/KK7H3W2B.js";
+import "../__chunks/CBTO7DFZ.js";
+import "../__chunks/RQZGFHI2.js";
+import "../__chunks/TE637IA7.js";
+import "../__chunks/XXVAHUAO.js";
+import "../__chunks/J55AVALY.js";
+import "../__chunks/WAZE6NXP.js";
 import "../__chunks/SHA3WOPI.js";
-import "../__chunks/BG6HZDS7.js";
+import "../__chunks/IFT5JEUU.js";
 import {
-  createComponent,
   createElement,
-  createHook
-} from "../__chunks/3ORBWXWF.js";
-import "../__chunks/ZSELSBRM.js";
-import "../__chunks/SFCBA2JZ.js";
+  createHook,
+  forwardRef
+} from "../__chunks/5M6RSQEC.js";
+import "../__chunks/I62TROYO.js";
+import "../__chunks/HZJ2XALY.js";
 import "../__chunks/EKQEJRUF.js";
 import "../__chunks/6O5OEQGF.js";
 import "../__chunks/XM66DUTO.js";
@@ -60,8 +60,9 @@ import {
 } from "../__chunks/4R3V3JGP.js";
 
 // src/select/select-popover.ts
+var TagName = "div";
 var useSelectPopover = createHook(
-  (_a) => {
+  function useSelectPopover2(_a) {
     var _b = _a, { store, alwaysVisible } = _b, props = __objRest(_b, ["store", "alwaysVisible"]);
     const context = useSelectProviderContext();
     store = store || context;
@@ -71,15 +72,12 @@ var useSelectPopover = createHook(
   }
 );
 var SelectPopover = createDialogComponent(
-  createComponent((props) => {
+  forwardRef(function SelectPopover2(props) {
     const htmlProps = useSelectPopover(props);
-    return createElement("div", htmlProps);
+    return createElement(TagName, htmlProps);
   }),
   useSelectProviderContext
 );
-if (process.env.NODE_ENV !== "production") {
-  SelectPopover.displayName = "SelectPopover";
-}
 export {
   SelectPopover,
   useSelectPopover

package/esm/select/select-provider.js

@@ -1,22 +1,22 @@
 "use client";
 import {
   useSelectStore
-} from "../__chunks/FMVHAVXA.js";
-import "../__chunks/W76OTZCC.js";
+} from "../__chunks/SVBVYDIK.js";
+import "../__chunks/UNDSQXBK.js";
 import {
   SelectContextProvider
-} from "../__chunks/5HVNGX6D.js";
+} from "../__chunks/TKSBJDO3.js";
 import "../__chunks/7GBW5FLS.js";
 import "../__chunks/Y6GYTNQ2.js";
-import "../__chunks/IB7YUKH5.js";
-import "../__chunks/4UUKJZ4V.js";
-import "../__chunks/7H5KSHHF.js";
-import "../__chunks/G6BJYYBK.js";
-import "../__chunks/OAYFXAQ2.js";
-import "../__chunks/3ORBWXWF.js";
-import "../__chunks/MG4P3223.js";
-import "../__chunks/ZSELSBRM.js";
-import "../__chunks/SFCBA2JZ.js";
+import "../__chunks/3D6OCOHF.js";
+import "../__chunks/MADQZZRL.js";
+import "../__chunks/TE637IA7.js";
+import "../__chunks/XXVAHUAO.js";
+import "../__chunks/J55AVALY.js";
+import "../__chunks/5M6RSQEC.js";
+import "../__chunks/XWCFCD3Q.js";
+import "../__chunks/I62TROYO.js";
+import "../__chunks/HZJ2XALY.js";
 import "../__chunks/EKQEJRUF.js";
 import "../__chunks/6O5OEQGF.js";
 import "../__chunks/XM66DUTO.js";

package/esm/select/select-renderer.d.ts

@@ -1,7 +1,9 @@
-import type { ComponentPropsWithRef } from "react";
 import { getCompositeRendererItem, getCompositeRendererItemId } from "../composite/composite-renderer.js";
 import type { CompositeRendererBaseItemProps, CompositeRendererItem, CompositeRendererItemObject, CompositeRendererItemProps, CompositeRendererOptions } from "../composite/composite-renderer.js";
+import type { Props } from "../utils/types.js";
 import type { SelectStore, SelectStoreValue } from "./select-store.js";
+declare const TagName = "div";
+type TagName = typeof TagName;
 interface ItemObject extends CompositeRendererItemObject {
     value?: string;
 }
@@ -35,5 +37,5 @@ export interface SelectRendererOptions<T extends Item = any> extends Omit<Compos
      */
     value?: SelectStoreValue;
 }
-export interface SelectRendererProps<T extends Item = any> extends Omit<ComponentPropsWithRef<"div">, "children">, SelectRendererOptions<T> {
+export interface SelectRendererProps<T extends Item = any> extends Props<TagName, SelectRendererOptions<T>> {
 }

package/esm/select/select-renderer.js

@@ -1,23 +1,23 @@
 "use client";
 import {
   useCompositeRenderer
-} from "../__chunks/KSKI4NLV.js";
+} from "../__chunks/UPJMZO6L.js";
 import {
   getCollectionRendererItem,
   getCollectionRendererItemId
-} from "../__chunks/4HD64GHO.js";
+} from "../__chunks/UZMGSJE4.js";
 import {
   useSelectContext
-} from "../__chunks/5HVNGX6D.js";
-import "../__chunks/IB7YUKH5.js";
-import "../__chunks/4UUKJZ4V.js";
-import "../__chunks/7H5KSHHF.js";
-import "../__chunks/G6BJYYBK.js";
-import "../__chunks/OAYFXAQ2.js";
+} from "../__chunks/TKSBJDO3.js";
+import "../__chunks/3D6OCOHF.js";
+import "../__chunks/MADQZZRL.js";
+import "../__chunks/TE637IA7.js";
+import "../__chunks/XXVAHUAO.js";
+import "../__chunks/J55AVALY.js";
 import {
   createElement,
   forwardRef
-} from "../__chunks/3ORBWXWF.js";
+} from "../__chunks/5M6RSQEC.js";
 import {
   useStoreState
 } from "../__chunks/EKQEJRUF.js";
@@ -31,6 +31,7 @@ import {
 // src/select/select-renderer.tsx
 import { useMemo } from "react";
 import { toArray } from "@ariakit/core/utils/array";
+var TagName = "div";
 function getItemObject(item) {
   if (!item || typeof item !== "object") {
     return { value: `${item}` };
@@ -105,7 +106,7 @@ function useSelectRenderer(_a) {
 }
 var SelectRenderer = forwardRef(function SelectRenderer2(props) {
   const htmlProps = useSelectRenderer(props);
-  return createElement("div", htmlProps);
+  return createElement(TagName, htmlProps);
 });
 export {
   SelectRenderer,

package/esm/select/select-row.d.ts

@@ -1,6 +1,9 @@
+import type { ElementType } from "react";
 import type { CompositeRowOptions } from "../composite/composite-row.js";
-import type { As, Props } from "../utils/types.js";
+import type { Props } from "../utils/types.js";
 import type { SelectStore } from "./select-store.js";
+declare const TagName = "div";
+type TagName = typeof TagName;
 /**
  * Returns props to create a `SelectRow` component.
  * @see https://ariakit.org/components/select
@@ -16,7 +19,7 @@ import type { SelectStore } from "./select-store.js";
  * </SelectPopover>
  * ```
  */
-export declare const useSelectRow: import("../utils/types.js").Hook<SelectRowOptions<"div">>;
+export declare const useSelectRow: import("../utils/types.js").Hook<"div", SelectRowOptions<"div">>;
 /**
  * Renders a select row that allows two-dimensional arrow key navigation.
  * [`SelectItem`](https://ariakit.org/reference/select-item) elements wrapped
@@ -40,8 +43,8 @@ export declare const useSelectRow: import("../utils/types.js").Hook<SelectRowOpt
  * </SelectProvider>
  * ```
  */
-export declare const SelectRow: import("../utils/types.js").Component<SelectRowOptions<"div">>;
-export interface SelectRowOptions<T extends As = "div"> extends CompositeRowOptions<T> {
+export declare const SelectRow: (props: SelectRowProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export interface SelectRowOptions<T extends ElementType = TagName> extends CompositeRowOptions<T> {
     /**
      * Object returned by the
      * [`useSelectStore`](https://ariakit.org/reference/use-select-store) hook. If
@@ -52,4 +55,5 @@ export interface SelectRowOptions<T extends As = "div"> extends CompositeRowOpti
      */
     store?: SelectStore;
 }
-export type SelectRowProps<T extends As = "div"> = Props<SelectRowOptions<T>>;
+export type SelectRowProps<T extends ElementType = TagName> = Props<T, SelectRowOptions<T>>;
+export {};

package/esm/select/select-row.js

@@ -1,20 +1,20 @@
 "use client";
 import {
   useCompositeRow
-} from "../__chunks/BNUFNEVY.js";
+} from "../__chunks/2O7COXT7.js";
 import {
   useSelectContext
-} from "../__chunks/5HVNGX6D.js";
-import "../__chunks/IB7YUKH5.js";
-import "../__chunks/4UUKJZ4V.js";
-import "../__chunks/7H5KSHHF.js";
-import "../__chunks/G6BJYYBK.js";
-import "../__chunks/OAYFXAQ2.js";
+} from "../__chunks/TKSBJDO3.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 {
@@ -25,8 +25,9 @@ import {
 // src/select/select-row.ts
 import { getPopupRole } from "@ariakit/core/utils/dom";
 import { invariant } from "@ariakit/core/utils/misc";
+var TagName = "div";
 var useSelectRow = createHook(
-  (_a) => {
+  function useSelectRow2(_a) {
     var _b = _a, { store } = _b, props = __objRest(_b, ["store"]);
     const context = useSelectContext();
     store = store || context;
@@ -42,13 +43,10 @@ var useSelectRow = createHook(
     return props;
   }
 );
-var SelectRow = createComponent((props) => {
+var SelectRow = forwardRef(function SelectRow2(props) {
   const htmlProps = useSelectRow(props);
-  return createElement("div", htmlProps);
+  return createElement(TagName, htmlProps);
 });
-if (process.env.NODE_ENV !== "production") {
-  SelectRow.displayName = "SelectRow";
-}
 export {
   SelectRow,
   useSelectRow