@ariakit/react-core 0.3.14 → 0.4.1

package/cjs/radio/radio-provider.cjs

@@ -4,12 +4,12 @@
 var _VKHTDADAcjs = require('../__chunks/VKHTDADA.cjs');
 
 
-var _HEEQY4DZcjs = require('../__chunks/HEEQY4DZ.cjs');
+var _43LZBXXJcjs = require('../__chunks/43LZBXXJ.cjs');
 require('../__chunks/LUL2YWZ3.cjs');
 require('../__chunks/CDNJPIEG.cjs');
-require('../__chunks/UZNYSPKP.cjs');
-require('../__chunks/BZTDJIVT.cjs');
-require('../__chunks/RNZNGEL4.cjs');
+require('../__chunks/4XFLDG56.cjs');
+require('../__chunks/Q6CVYJBO.cjs');
+require('../__chunks/Q67LZMDT.cjs');
 require('../__chunks/OLOZ5JT2.cjs');
 require('../__chunks/EO6LS72H.cjs');
 require('../__chunks/CJDHQUBR.cjs');
@@ -19,7 +19,7 @@ require('../__chunks/AV6KTKLE.cjs');
 var _jsxruntime = require('react/jsx-runtime');
 function RadioProvider(props = {}) {
   const store = _VKHTDADAcjs.useRadioStore.call(void 0, props);
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _HEEQY4DZcjs.RadioContextProvider, { value: store, children: props.children });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _43LZBXXJcjs.RadioContextProvider, { value: store, children: props.children });
 }
 
 

package/cjs/radio/radio.cjs

@@ -2,17 +2,17 @@
 
 
 
-var _G2ZXRZ2Rcjs = require('../__chunks/G2ZXRZ2R.cjs');
-require('../__chunks/HEEQY4DZ.cjs');
-require('../__chunks/IO6J4PAN.cjs');
-require('../__chunks/DAJUUBUI.cjs');
-require('../__chunks/R5A2WTWB.cjs');
+var _NWGQLRRKcjs = require('../__chunks/NWGQLRRK.cjs');
+require('../__chunks/43LZBXXJ.cjs');
+require('../__chunks/VYKATRVC.cjs');
+require('../__chunks/Z7QK7V4M.cjs');
+require('../__chunks/XWCNZ2IP.cjs');
 require('../__chunks/6ZZYUFPW.cjs');
-require('../__chunks/UZNYSPKP.cjs');
-require('../__chunks/BZTDJIVT.cjs');
-require('../__chunks/Z3GCTNW4.cjs');
+require('../__chunks/4XFLDG56.cjs');
+require('../__chunks/Q6CVYJBO.cjs');
+require('../__chunks/XRZ2L7EA.cjs');
 require('../__chunks/75KXQZJX.cjs');
-require('../__chunks/RNZNGEL4.cjs');
+require('../__chunks/Q67LZMDT.cjs');
 require('../__chunks/OLOZ5JT2.cjs');
 require('../__chunks/EO6LS72H.cjs');
 require('../__chunks/CJDHQUBR.cjs');
@@ -20,4 +20,4 @@ require('../__chunks/AV6KTKLE.cjs');
 
 
 
-exports.Radio = _G2ZXRZ2Rcjs.Radio; exports.useRadio = _G2ZXRZ2Rcjs.useRadio;
+exports.Radio = _NWGQLRRKcjs.Radio; exports.useRadio = _NWGQLRRKcjs.useRadio;

package/cjs/radio/radio.d.cts

@@ -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/cjs/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/cjs/role/role.cjs

@@ -2,12 +2,12 @@
 
 
 
-var _LAUATD5Ocjs = require('../__chunks/LAUATD5O.cjs');
-require('../__chunks/RNZNGEL4.cjs');
+var _SFDUOV6Fcjs = require('../__chunks/SFDUOV6F.cjs');
+require('../__chunks/Q67LZMDT.cjs');
 require('../__chunks/EO6LS72H.cjs');
 require('../__chunks/CJDHQUBR.cjs');
 require('../__chunks/AV6KTKLE.cjs');
 
 
 
-exports.Role = _LAUATD5Ocjs.Role; exports.useRole = _LAUATD5Ocjs.useRole;
+exports.Role = _SFDUOV6Fcjs.Role; exports.useRole = _SFDUOV6Fcjs.useRole;

package/cjs/role/role.d.cts

@@ -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/cjs/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/cjs/select/select-arrow.cjs

@@ -2,19 +2,19 @@
 
 
 
-var _KQN7YDDZcjs = require('../__chunks/KQN7YDDZ.cjs');
-require('../__chunks/YU7XEYUJ.cjs');
-require('../__chunks/2WCJJQSK.cjs');
-require('../__chunks/UZNYSPKP.cjs');
-require('../__chunks/BZTDJIVT.cjs');
-require('../__chunks/UVBBMANL.cjs');
-require('../__chunks/F2A2ZQDB.cjs');
-require('../__chunks/S6UU7NA4.cjs');
-require('../__chunks/RNZNGEL4.cjs');
+var _BIK2473Zcjs = require('../__chunks/BIK2473Z.cjs');
+require('../__chunks/7UBOHCYJ.cjs');
+require('../__chunks/STYNL4LL.cjs');
+require('../__chunks/4XFLDG56.cjs');
+require('../__chunks/Q6CVYJBO.cjs');
+require('../__chunks/FNVFJ5AF.cjs');
+require('../__chunks/OLPMMKKO.cjs');
+require('../__chunks/XRJBC7H7.cjs');
+require('../__chunks/Q67LZMDT.cjs');
 require('../__chunks/EO6LS72H.cjs');
 require('../__chunks/CJDHQUBR.cjs');
 require('../__chunks/AV6KTKLE.cjs');
 
 
 
-exports.SelectArrow = _KQN7YDDZcjs.SelectArrow; exports.useSelectArrow = _KQN7YDDZcjs.useSelectArrow;
+exports.SelectArrow = _BIK2473Zcjs.SelectArrow; exports.useSelectArrow = _BIK2473Zcjs.useSelectArrow;

package/cjs/select/select-arrow.d.cts

@@ -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/cjs/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/cjs/select/select-context.cjs

@@ -6,13 +6,13 @@
 
 
 
-var _2WCJJQSKcjs = require('../__chunks/2WCJJQSK.cjs');
-require('../__chunks/UZNYSPKP.cjs');
-require('../__chunks/BZTDJIVT.cjs');
-require('../__chunks/UVBBMANL.cjs');
-require('../__chunks/F2A2ZQDB.cjs');
-require('../__chunks/S6UU7NA4.cjs');
-require('../__chunks/RNZNGEL4.cjs');
+var _STYNL4LLcjs = require('../__chunks/STYNL4LL.cjs');
+require('../__chunks/4XFLDG56.cjs');
+require('../__chunks/Q6CVYJBO.cjs');
+require('../__chunks/FNVFJ5AF.cjs');
+require('../__chunks/OLPMMKKO.cjs');
+require('../__chunks/XRJBC7H7.cjs');
+require('../__chunks/Q67LZMDT.cjs');
 require('../__chunks/EO6LS72H.cjs');
 require('../__chunks/CJDHQUBR.cjs');
 require('../__chunks/AV6KTKLE.cjs');
@@ -23,4 +23,4 @@ require('../__chunks/AV6KTKLE.cjs');
 
 
 
-exports.SelectContextProvider = _2WCJJQSKcjs.SelectContextProvider; exports.SelectItemCheckedContext = _2WCJJQSKcjs.SelectItemCheckedContext; exports.SelectScopedContextProvider = _2WCJJQSKcjs.SelectScopedContextProvider; exports.useSelectContext = _2WCJJQSKcjs.useSelectContext; exports.useSelectProviderContext = _2WCJJQSKcjs.useSelectProviderContext; exports.useSelectScopedContext = _2WCJJQSKcjs.useSelectScopedContext;
+exports.SelectContextProvider = _STYNL4LLcjs.SelectContextProvider; exports.SelectItemCheckedContext = _STYNL4LLcjs.SelectItemCheckedContext; exports.SelectScopedContextProvider = _STYNL4LLcjs.SelectScopedContextProvider; exports.useSelectContext = _STYNL4LLcjs.useSelectContext; exports.useSelectProviderContext = _STYNL4LLcjs.useSelectProviderContext; exports.useSelectScopedContext = _STYNL4LLcjs.useSelectScopedContext;

package/cjs/select/select-group-label.cjs

@@ -1,34 +1,30 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
 
 
-var _TUDQDX77cjs = require('../__chunks/TUDQDX77.cjs');
-require('../__chunks/QQCFY3MB.cjs');
+var _2CZCHCJMcjs = require('../__chunks/2CZCHCJM.cjs');
+require('../__chunks/GMXGH5P5.cjs');
 require('../__chunks/FE3YCURH.cjs');
 
 
 
 
-var _RNZNGEL4cjs = require('../__chunks/RNZNGEL4.cjs');
+var _Q67LZMDTcjs = require('../__chunks/Q67LZMDT.cjs');
 require('../__chunks/EO6LS72H.cjs');
 require('../__chunks/CJDHQUBR.cjs');
 require('../__chunks/AV6KTKLE.cjs');
 
 // src/select/select-group-label.ts
-var useSelectGroupLabel = _RNZNGEL4cjs.createHook.call(void 0, 
-  (props) => {
-    props = _TUDQDX77cjs.useCompositeGroupLabel.call(void 0, props);
+var TagName = "div";
+var useSelectGroupLabel = _Q67LZMDTcjs.createHook.call(void 0, 
+  function useSelectGroupLabel2(props) {
+    props = _2CZCHCJMcjs.useCompositeGroupLabel.call(void 0, props);
     return props;
   }
 );
-var SelectGroupLabel = _RNZNGEL4cjs.createComponent.call(void 0, 
-  (props) => {
-    const htmlProps = useSelectGroupLabel(props);
-    return _RNZNGEL4cjs.createElement.call(void 0, "div", htmlProps);
-  }
-);
-if (process.env.NODE_ENV !== "production") {
-  SelectGroupLabel.displayName = "SelectGroupLabel";
-}
+var SelectGroupLabel = _Q67LZMDTcjs.forwardRef.call(void 0, function SelectGroupLabel2(props) {
+  const htmlProps = useSelectGroupLabel(props);
+  return _Q67LZMDTcjs.createElement.call(void 0, TagName, htmlProps);
+});
 
 
 

package/cjs/select/select-group-label.d.cts

@@ -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/cjs/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/cjs/select/select-group.cjs

@@ -1,30 +1,30 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
 
 
-var _2KDFQUU7cjs = require('../__chunks/2KDFQUU7.cjs');
-require('../__chunks/KSAZE5E2.cjs');
+var _BTE5YB27cjs = require('../__chunks/BTE5YB27.cjs');
+require('../__chunks/47V4ED4R.cjs');
 require('../__chunks/FE3YCURH.cjs');
 
 
 
 
-var _RNZNGEL4cjs = require('../__chunks/RNZNGEL4.cjs');
+var _Q67LZMDTcjs = require('../__chunks/Q67LZMDT.cjs');
 require('../__chunks/EO6LS72H.cjs');
 require('../__chunks/CJDHQUBR.cjs');
 require('../__chunks/AV6KTKLE.cjs');
 
 // src/select/select-group.ts
-var useSelectGroup = _RNZNGEL4cjs.createHook.call(void 0, (props) => {
-  props = _2KDFQUU7cjs.useCompositeGroup.call(void 0, props);
-  return props;
-});
-var SelectGroup = _RNZNGEL4cjs.createComponent.call(void 0, (props) => {
+var TagName = "div";
+var useSelectGroup = _Q67LZMDTcjs.createHook.call(void 0, 
+  function useSelectGroup2(props) {
+    props = _BTE5YB27cjs.useCompositeGroup.call(void 0, props);
+    return props;
+  }
+);
+var SelectGroup = _Q67LZMDTcjs.forwardRef.call(void 0, function SelectGroup2(props) {
   const htmlProps = useSelectGroup(props);
-  return _RNZNGEL4cjs.createElement.call(void 0, "div", htmlProps);
+  return _Q67LZMDTcjs.createElement.call(void 0, TagName, htmlProps);
 });
-if (process.env.NODE_ENV !== "production") {
-  SelectGroup.displayName = "SelectGroup";
-}
 
 
 

package/cjs/select/select-group.d.cts

@@ -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/cjs/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 {};