@ariakit/react-core 0.3.14 → 0.4.0

package/esm/radio/radio-provider.js

@@ -4,12 +4,12 @@ import {
 } from "../__chunks/LEIRFLRL.js";
 import {
   RadioContextProvider
-} from "../__chunks/XEV62JUQ.js";
+} from "../__chunks/ZVFJIYOE.js";
 import "../__chunks/7GBW5FLS.js";
 import "../__chunks/Y6GYTNQ2.js";
-import "../__chunks/IB7YUKH5.js";
-import "../__chunks/4UUKJZ4V.js";
-import "../__chunks/3ORBWXWF.js";
+import "../__chunks/3D6OCOHF.js";
+import "../__chunks/MADQZZRL.js";
+import "../__chunks/5M6RSQEC.js";
 import "../__chunks/EKQEJRUF.js";
 import "../__chunks/6O5OEQGF.js";
 import "../__chunks/XM66DUTO.js";

package/esm/radio/radio.d.ts

@@ -1,8 +1,11 @@
-import type { SyntheticEvent } from "react";
+import type { ChangeEvent, ElementType } from "react";
 import type { BivariantCallback } from "@ariakit/core/utils/types";
 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 { RadioStore } from "./radio-store.js";
+declare const TagName = "input";
+type TagName = typeof TagName;
+type HTMLType = HTMLElementTagNameMap[TagName];
 /**
  * Returns props to create a `Radio` component.
  * @see https://ariakit.org/components/radio
@@ -16,7 +19,7 @@ import type { RadioStore } from "./radio-store.js";
  * </RadioGroup>
  * ```
  */
-export declare const useRadio: import("../utils/types.js").Hook<RadioOptions<"input">>;
+export declare const useRadio: import("../utils/types.js").Hook<"input", RadioOptions<"input">>;
 /**
  * Renders a radio button element that's typically wrapped in a
  * [`RadioGroup`](https://ariakit.org/reference/radio-group) component.
@@ -31,8 +34,8 @@ export declare const useRadio: import("../utils/types.js").Hook<RadioOptions<"in
  * </RadioProvider>
  * ```
  */
-export declare const Radio: import("../utils/types.js").Component<RadioOptions<"input">>;
-export interface RadioOptions<T extends As = "input"> extends CompositeItemOptions<T> {
+export declare const Radio: (props: RadioProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export interface RadioOptions<T extends ElementType = TagName> extends CompositeItemOptions<T> {
     /**
      * Object returned by the
      * [`useRadioStore`](https://ariakit.org/reference/use-radio-store) hook. If
@@ -63,6 +66,7 @@ export interface RadioOptions<T extends As = "input"> extends CompositeItemOptio
     /**
      * Callback function that is called when the radio button state changes.
      */
-    onChange?: BivariantCallback<(event: SyntheticEvent<HTMLInputElement>) => void>;
+    onChange?: BivariantCallback<(event: ChangeEvent<HTMLType>) => void>;
 }
-export type RadioProps<T extends As = "input"> = Props<RadioOptions<T>>;
+export type RadioProps<T extends ElementType = TagName> = Props<T, RadioOptions<T>>;
+export {};

package/esm/radio/radio.js

@@ -2,17 +2,17 @@
 import {
   Radio,
   useRadio
-} from "../__chunks/JL6IRDFK.js";
-import "../__chunks/XEV62JUQ.js";
-import "../__chunks/QZLXIDNP.js";
-import "../__chunks/NWCBQ4CV.js";
-import "../__chunks/UH3I23HL.js";
+} from "../__chunks/WKBVQ2CE.js";
+import "../__chunks/ZVFJIYOE.js";
+import "../__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/KK7H3W2B.js";
+import "../__chunks/3D6OCOHF.js";
+import "../__chunks/MADQZZRL.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/role/role.d.ts

@@ -1,7 +1,10 @@
-import type { As, Component, Options, Props } from "../utils/types.js";
+import type { ElementType, FC } from "react";
+import type { Options, Props } from "../utils/types.js";
+declare const TagName = "div";
+type TagName = typeof TagName;
 declare const elements: readonly ["a", "button", "details", "dialog", "div", "form", "h1", "h2", "h3", "h4", "h5", "h6", "header", "img", "input", "label", "li", "nav", "ol", "p", "section", "select", "span", "textarea", "ul", "svg"];
 type RoleElements = {
-    [K in (typeof elements)[number]]: Component<RoleOptions<K>>;
+    [K in (typeof elements)[number]]: FC<RoleProps<K>>;
 };
 /**
  * Returns props to create a `Role` component.
@@ -12,7 +15,7 @@ type RoleElements = {
  * <Role {...props} />
  * ```
  */
-export declare const useRole: import("../utils/types.js").Hook<RoleOptions<"div">>;
+export declare const useRole: import("../utils/types.js").Hook<"div", RoleOptions<"div">>;
 /**
  * Renders an abstract element that supports the `render` prop and a
  * `wrapElement` prop that can be used to wrap the underlying element with React
@@ -23,7 +26,8 @@ export declare const useRole: import("../utils/types.js").Hook<RoleOptions<"div"
  * <Role render={<div />} />
  * ```
  */
-export declare const Role: Component<RoleOptions<"div">> & RoleElements;
-export type RoleOptions<T extends As = "div"> = Options<T>;
-export type RoleProps<T extends As = "div"> = Props<RoleOptions<T>>;
+export declare const Role: FC<RoleProps<"div">> & RoleElements;
+export interface RoleOptions<_T extends ElementType = TagName> extends Options {
+}
+export type RoleProps<T extends ElementType = TagName> = Props<T, RoleOptions<T>>;
 export {};

package/esm/role/role.js

@@ -2,8 +2,8 @@
 import {
   Role,
   useRole
-} from "../__chunks/FSFPRQFR.js";
-import "../__chunks/3ORBWXWF.js";
+} from "../__chunks/CBTO7DFZ.js";
+import "../__chunks/5M6RSQEC.js";
 import "../__chunks/6O5OEQGF.js";
 import "../__chunks/XM66DUTO.js";
 import "../__chunks/4R3V3JGP.js";

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

@@ -1,6 +1,9 @@
+import type { ElementType } from "react";
 import type { PopoverDisclosureArrowOptions } from "../popover/popover-disclosure-arrow.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 = "span";
+type TagName = typeof TagName;
 /**
  * Returns props to create a `SelectArrow` component.
  * @see https://ariakit.org/components/select
@@ -18,7 +21,7 @@ import type { SelectStore } from "./select-store.js";
  * </SelectPopover>
  * ```
  */
-export declare const useSelectArrow: import("../utils/types.js").Hook<SelectArrowOptions<"span">>;
+export declare const useSelectArrow: import("../utils/types.js").Hook<"span", SelectArrowOptions<"span">>;
 /**
  * Renders an arrow pointing to the select popover position. It's usually
  * rendered inside the [`Select`](https://ariakit.org/reference/select)
@@ -38,8 +41,8 @@ export declare const useSelectArrow: import("../utils/types.js").Hook<SelectArro
  * </SelectProvider>
  * ```
  */
-export declare const SelectArrow: import("../utils/types.js").Component<SelectArrowOptions<"span">>;
-export interface SelectArrowOptions<T extends As = "span"> extends PopoverDisclosureArrowOptions<T> {
+export declare const SelectArrow: (props: SelectArrowProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export interface SelectArrowOptions<T extends ElementType = TagName> extends PopoverDisclosureArrowOptions<T> {
     /**
      * Object returned by the
      * [`useSelectStore`](https://ariakit.org/reference/use-select-store) hook. If
@@ -49,4 +52,5 @@ export interface SelectArrowOptions<T extends As = "span"> extends PopoverDisclo
      */
     store?: SelectStore;
 }
-export type SelectArrowProps<T extends As = "span"> = Props<SelectArrowOptions<T>>;
+export type SelectArrowProps<T extends ElementType = TagName> = Props<T, SelectArrowOptions<T>>;
+export {};

package/esm/select/select-arrow.js

@@ -2,15 +2,15 @@
 import {
   SelectArrow,
   useSelectArrow
-} from "../__chunks/NUNVG4IK.js";
-import "../__chunks/JHO32H4J.js";
-import "../__chunks/5HVNGX6D.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";
+} from "../__chunks/6PC3IJNK.js";
+import "../__chunks/HA4U57LH.js";
+import "../__chunks/TKSBJDO3.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/6O5OEQGF.js";
 import "../__chunks/XM66DUTO.js";
 import "../__chunks/4R3V3JGP.js";

package/esm/select/select-context.js

@@ -6,13 +6,13 @@ import {
   useSelectContext,
   useSelectProviderContext,
   useSelectScopedContext
-} from "../__chunks/5HVNGX6D.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";
+} 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 "../__chunks/5M6RSQEC.js";
 import "../__chunks/6O5OEQGF.js";
 import "../__chunks/XM66DUTO.js";
 import "../__chunks/4R3V3JGP.js";

package/esm/select/select-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 { SelectStore } from "./select-store.js";
+declare const TagName = "div";
+type TagName = typeof TagName;
 /**
  * Returns props to create a `SelectGroupLabel` component. This hook must be
  * used in a component that's wrapped with `SelectGroup` so the
@@ -13,7 +16,7 @@ import type { SelectStore } from "./select-store.js";
  * <Role {...props}>Label</Role>
  * ```
  */
-export declare const useSelectGroupLabel: import("../utils/types.js").Hook<SelectGroupLabelOptions<"div">>;
+export declare const useSelectGroupLabel: import("../utils/types.js").Hook<"div", SelectGroupLabelOptions<"div">>;
 /**
  * Renders a label in a select group. This component must be wrapped with
  * [`SelectGroup`](https://ariakit.org/reference/select-group) so the
@@ -38,8 +41,8 @@ export declare const useSelectGroupLabel: import("../utils/types.js").Hook<Selec
  * </SelectProvider>
  * ```
  */
-export declare const SelectGroupLabel: import("../utils/types.js").Component<SelectGroupLabelOptions<"div">>;
-export interface SelectGroupLabelOptions<T extends As = "div"> extends CompositeGroupLabelOptions<T> {
+export declare const SelectGroupLabel: (props: SelectGroupLabelProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export interface SelectGroupLabelOptions<T extends ElementType = TagName> extends CompositeGroupLabelOptions<T> {
     /**
      * Object returned by the
      * [`useSelectStore`](https://ariakit.org/reference/use-select-store) hook. If
@@ -50,4 +53,5 @@ export interface SelectGroupLabelOptions<T extends As = "div"> extends Composite
      */
     store?: SelectStore;
 }
-export type SelectGroupLabelProps<T extends As = "div"> = Props<SelectGroupLabelOptions<T>>;
+export type SelectGroupLabelProps<T extends ElementType = TagName> = Props<T, SelectGroupLabelOptions<T>>;
+export {};

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

@@ -1,34 +1,30 @@
 "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/select/select-group-label.ts
+var TagName = "div";
 var useSelectGroupLabel = createHook(
-  (props) => {
+  function useSelectGroupLabel2(props) {
     props = useCompositeGroupLabel(props);
     return props;
   }
 );
-var SelectGroupLabel = createComponent(
-  (props) => {
-    const htmlProps = useSelectGroupLabel(props);
-    return createElement("div", htmlProps);
-  }
-);
-if (process.env.NODE_ENV !== "production") {
-  SelectGroupLabel.displayName = "SelectGroupLabel";
-}
+var SelectGroupLabel = forwardRef(function SelectGroupLabel2(props) {
+  const htmlProps = useSelectGroupLabel(props);
+  return createElement(TagName, htmlProps);
+});
 export {
   SelectGroupLabel,
   useSelectGroupLabel

package/esm/select/select-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 { SelectStore } from "./select-store.js";
+declare const TagName = "div";
+type TagName = typeof TagName;
 /**
  * Returns props to create a `SelectGroup` component.
  * @see https://ariakit.org/components/select
@@ -18,7 +21,7 @@ import type { SelectStore } from "./select-store.js";
  * </SelectPopover>
  * ```
  */
-export declare const useSelectGroup: import("../utils/types.js").Hook<SelectGroupOptions<"div">>;
+export declare const useSelectGroup: import("../utils/types.js").Hook<"div", SelectGroupOptions<"div">>;
 /**
  * Renders a group for [`SelectItem`](https://ariakit.org/reference/select-item)
  * elements. Optionally, a
@@ -39,8 +42,8 @@ export declare const useSelectGroup: import("../utils/types.js").Hook<SelectGrou
  * </SelectProvider>
  * ```
  */
-export declare const SelectGroup: import("../utils/types.js").Component<SelectGroupOptions<"div">>;
-export interface SelectGroupOptions<T extends As = "div"> extends CompositeGroupOptions<T> {
+export declare const SelectGroup: (props: SelectGroupProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export interface SelectGroupOptions<T extends ElementType = TagName> extends CompositeGroupOptions<T> {
     /**
      * Object returned by the
      * [`useSelectStore`](https://ariakit.org/reference/use-select-store) hook. If
@@ -51,4 +54,5 @@ export interface SelectGroupOptions<T extends As = "div"> extends CompositeGroup
      */
     store?: SelectStore;
 }
-export type SelectGroupProps<T extends As = "div"> = Props<SelectGroupOptions<T>>;
+export type SelectGroupProps<T extends ElementType = TagName> = Props<T, SelectGroupOptions<T>>;
+export {};

package/esm/select/select-group.js

@@ -1,30 +1,30 @@
 "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 {
-  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/select/select-group.ts
-var useSelectGroup = createHook((props) => {
-  props = useCompositeGroup(props);
-  return props;
-});
-var SelectGroup = createComponent((props) => {
+var TagName = "div";
+var useSelectGroup = createHook(
+  function useSelectGroup2(props) {
+    props = useCompositeGroup(props);
+    return props;
+  }
+);
+var SelectGroup = forwardRef(function SelectGroup2(props) {
   const htmlProps = useSelectGroup(props);
-  return createElement("div", htmlProps);
+  return createElement(TagName, htmlProps);
 });
-if (process.env.NODE_ENV !== "production") {
-  SelectGroup.displayName = "SelectGroup";
-}
 export {
   SelectGroup,
   useSelectGroup

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

@@ -1,6 +1,9 @@
+import type { ElementType } from "react";
 import type { CheckboxCheckOptions } from "../checkbox/checkbox-check.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 = "span";
+type TagName = typeof TagName;
 /**
  * Returns props to create a `SelectItemCheck` component. This hook must be used
  * in a component that's wrapped with `SelectItem` or the `checked` prop must be
@@ -12,7 +15,7 @@ import type { SelectStore } from "./select-store.js";
  * <Role {...props} />
  * ```
  */
-export declare const useSelectItemCheck: import("../utils/types.js").Hook<SelectItemCheckOptions<"span">>;
+export declare const useSelectItemCheck: import("../utils/types.js").Hook<"span", SelectItemCheckOptions<"span">>;
 /**
  * Renders a checkmark icon when the
  * [`checked`](https://ariakit.org/reference/select-item-check#checked) prop is
@@ -40,12 +43,13 @@ export declare const useSelectItemCheck: import("../utils/types.js").Hook<Select
  * </SelectProvider>
  * ```
  */
-export declare const SelectItemCheck: import("../utils/types.js").Component<SelectItemCheckOptions<"span">>;
-export interface SelectItemCheckOptions<T extends As = "span"> extends CheckboxCheckOptions<T> {
+export declare const SelectItemCheck: (props: SelectItemCheckProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export interface SelectItemCheckOptions<T extends ElementType = TagName> extends CheckboxCheckOptions<T> {
     /**
      * Object returned by the
      * [`useSelectStore`](https://ariakit.org/reference/use-select-store) hook.
      */
     store?: SelectStore;
 }
-export type SelectItemCheckProps<T extends As = "span"> = Props<SelectItemCheckOptions<T>>;
+export type SelectItemCheckProps<T extends ElementType = TagName> = Props<T, SelectItemCheckOptions<T>>;
+export {};

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

@@ -1,21 +1,21 @@
 "use client";
 import {
   useCheckboxCheck
-} from "../__chunks/MW2F7SEA.js";
+} from "../__chunks/BX7FFG2R.js";
 import "../__chunks/6XBVQI3K.js";
 import {
   SelectItemCheckedContext
-} 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 {
@@ -26,8 +26,9 @@ import {
 
 // src/select/select-item-check.ts
 import { useContext } from "react";
+var TagName = "span";
 var useSelectItemCheck = createHook(
-  (_a) => {
+  function useSelectItemCheck2(_a) {
     var _b = _a, { store, checked } = _b, props = __objRest(_b, ["store", "checked"]);
     const context = useContext(SelectItemCheckedContext);
     checked = checked != null ? checked : context;
@@ -35,15 +36,10 @@ var useSelectItemCheck = createHook(
     return props;
   }
 );
-var SelectItemCheck = createComponent(
-  (props) => {
-    const htmlProps = useSelectItemCheck(props);
-    return createElement("span", htmlProps);
-  }
-);
-if (process.env.NODE_ENV !== "production") {
-  SelectItemCheck.displayName = "SelectItemCheck";
-}
+var SelectItemCheck = forwardRef(function SelectItemCheck2(props) {
+  const htmlProps = useSelectItemCheck(props);
+  return createElement(TagName, htmlProps);
+});
 export {
   SelectItemCheck,
   useSelectItemCheck

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/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,
@@ -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