@ariakit/react-core 0.3.14 → 0.4.0

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/GYVFAVAN.js";
+import "../__chunks/DMSZFK7W.js";
+import "../__chunks/TKSBJDO3.js";
+import "../__chunks/6WQW7ZIA.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/SOGTNTQC.js";
+import "../__chunks/TE637IA7.js";
+import "../__chunks/XXVAHUAO.js";
+import "../__chunks/J55AVALY.js";
+import "../__chunks/VA234QKF.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/GYVFAVAN.js";
+import "../__chunks/DMSZFK7W.js";
 import {
   useSelectProviderContext
-} from "../__chunks/5HVNGX6D.js";
-import "../__chunks/7QTPYGNZ.js";
+} from "../__chunks/TKSBJDO3.js";
+import "../__chunks/6WQW7ZIA.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/KMWSQ7OZ.js";
 import {
   createDialogComponent
-} from "../__chunks/NERBASET.js";
-import "../__chunks/LWHPHW7Q.js";
-import "../__chunks/TQYOGOE2.js";
+} from "../__chunks/SSK5L4K7.js";
+import "../__chunks/CJ6B7ETA.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/SOGTNTQC.js";
+import "../__chunks/TE637IA7.js";
+import "../__chunks/XXVAHUAO.js";
+import "../__chunks/J55AVALY.js";
+import "../__chunks/VA234QKF.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

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

@@ -1,8 +1,12 @@
+import type { ElementType } from "react";
 import type { CompositeSeparatorOptions } from "../composite/composite-separator.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 = "hr";
+type TagName = typeof TagName;
 /**
  * Returns props to create a `SelectSeparator` component.
+ * @deprecated Use `useSelectGroup` with CSS borders instead.
  * @see https://ariakit.org/components/select
  * @example
  * ```jsx
@@ -16,10 +20,12 @@ import type { SelectStore } from "./select-store.js";
  * </SelectPopover>
  * ```
  */
-export declare const useSelectSeparator: import("../utils/types.js").Hook<SelectSeparatorOptions<"hr">>;
+export declare const useSelectSeparator: import("../utils/types.js").Hook<"hr", SelectSeparatorOptions<"hr">>;
 /**
  * Renders a divider between
  * [`SelectItem`](https://ariakit.org/reference/select-item) elements.
+ * @deprecated Use [`SelectGroup`](https://ariakit.org/reference/select-group)
+ * with CSS borders instead.
  * @see https://ariakit.org/components/select
  * @example
  * ```jsx {5}
@@ -34,8 +40,8 @@ export declare const useSelectSeparator: import("../utils/types.js").Hook<Select
  * </SelectProvider>
  * ```
  */
-export declare const SelectSeparator: import("../utils/types.js").Component<SelectSeparatorOptions<"hr">>;
-export interface SelectSeparatorOptions<T extends As = "hr"> extends CompositeSeparatorOptions<T> {
+export declare const SelectSeparator: (props: SelectSeparatorProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export interface SelectSeparatorOptions<T extends ElementType = TagName> extends CompositeSeparatorOptions<T> {
     /**
      * Object returned by the
      * [`useSelectStore`](https://ariakit.org/reference/use-select-store) hook. If
@@ -46,4 +52,5 @@ export interface SelectSeparatorOptions<T extends As = "hr"> extends CompositeSe
      */
     store?: SelectStore;
 }
-export type SelectSeparatorProps<T extends As = "hr"> = Props<SelectSeparatorOptions<T>>;
+export type SelectSeparatorProps<T extends ElementType = TagName> = Props<T, SelectSeparatorOptions<T>>;
+export {};

package/esm/select/select-separator.js

@@ -1,21 +1,21 @@
 "use client";
 import {
   useSelectContext
-} from "../__chunks/5HVNGX6D.js";
+} from "../__chunks/TKSBJDO3.js";
 import {
   useCompositeSeparator
-} from "../__chunks/ENRQQ6LK.js";
-import "../__chunks/YZEJGRDQ.js";
-import "../__chunks/IB7YUKH5.js";
-import "../__chunks/4UUKJZ4V.js";
-import "../__chunks/7H5KSHHF.js";
-import "../__chunks/G6BJYYBK.js";
-import "../__chunks/OAYFXAQ2.js";
+} from "../__chunks/A3BKKI3B.js";
+import "../__chunks/SDQLXKEV.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 {
@@ -24,8 +24,9 @@ import {
 } from "../__chunks/4R3V3JGP.js";
 
 // src/select/select-separator.ts
+var TagName = "hr";
 var useSelectSeparator = createHook(
-  (_a) => {
+  function useSelectSeparator2(_a) {
     var _b = _a, { store } = _b, props = __objRest(_b, ["store"]);
     const context = useSelectContext();
     store = store || context;
@@ -33,15 +34,10 @@ var useSelectSeparator = createHook(
     return props;
   }
 );
-var SelectSeparator = createComponent(
-  (props) => {
-    const htmlProps = useSelectSeparator(props);
-    return createElement("hr", htmlProps);
-  }
-);
-if (process.env.NODE_ENV !== "production") {
-  SelectSeparator.displayName = "SelectSeparator";
-}
+var SelectSeparator = forwardRef(function SelectSeparator2(props) {
+  const htmlProps = useSelectSeparator(props);
+  return createElement(TagName, htmlProps);
+});
 export {
   SelectSeparator,
   useSelectSeparator