@ariakit/react-core 0.3.14 → 0.4.0

package/cjs/checkbox/checkbox-check.d.cts

@@ -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 { CheckboxStore } from "./checkbox-store.js";
+declare const TagName = "span";
+type TagName = typeof TagName;
 /**
  * Returns props to create a `CheckboxCheck` component, that's usually rendered
  * inside a `Checkbox` component.
@@ -10,7 +13,7 @@ import type { CheckboxStore } from "./checkbox-store.js";
  * <Role {...props} />
  * ```
  */
-export declare const useCheckboxCheck: import("../utils/types.js").Hook<CheckboxCheckOptions<"span">>;
+export declare const useCheckboxCheck: import("../utils/types.js").Hook<"span", CheckboxCheckOptions<"span">>;
 /**
  * Renders a checkmark icon when the
  * [`checked`](https://ariakit.org/reference/checkbox-check#checked) prop is
@@ -26,8 +29,8 @@ export declare const useCheckboxCheck: import("../utils/types.js").Hook<Checkbox
  * <CheckboxCheck checked />
  * ```
  */
-export declare const CheckboxCheck: import("../utils/types.js").Component<CheckboxCheckOptions<"span">>;
-export interface CheckboxCheckOptions<T extends As = "span"> extends Options<T> {
+export declare const CheckboxCheck: (props: CheckboxCheckProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export interface CheckboxCheckOptions<_T extends ElementType = TagName> extends Options {
     /**
      * Object returned by the
      * [`useCheckboxStore`](https://ariakit.org/reference/use-checkbox-store)
@@ -45,4 +48,5 @@ export interface CheckboxCheckOptions<T extends As = "span"> extends Options<T>
      */
     checked?: boolean;
 }
-export type CheckboxCheckProps<T extends As = "span"> = Props<CheckboxCheckOptions<T>>;
+export type CheckboxCheckProps<T extends ElementType = TagName> = Props<T, CheckboxCheckOptions<T>>;
+export {};

package/cjs/checkbox/checkbox-check.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 { CheckboxStore } from "./checkbox-store.js";
+declare const TagName = "span";
+type TagName = typeof TagName;
 /**
  * Returns props to create a `CheckboxCheck` component, that's usually rendered
  * inside a `Checkbox` component.
@@ -10,7 +13,7 @@ import type { CheckboxStore } from "./checkbox-store.js";
  * <Role {...props} />
  * ```
  */
-export declare const useCheckboxCheck: import("../utils/types.js").Hook<CheckboxCheckOptions<"span">>;
+export declare const useCheckboxCheck: import("../utils/types.js").Hook<"span", CheckboxCheckOptions<"span">>;
 /**
  * Renders a checkmark icon when the
  * [`checked`](https://ariakit.org/reference/checkbox-check#checked) prop is
@@ -26,8 +29,8 @@ export declare const useCheckboxCheck: import("../utils/types.js").Hook<Checkbox
  * <CheckboxCheck checked />
  * ```
  */
-export declare const CheckboxCheck: import("../utils/types.js").Component<CheckboxCheckOptions<"span">>;
-export interface CheckboxCheckOptions<T extends As = "span"> extends Options<T> {
+export declare const CheckboxCheck: (props: CheckboxCheckProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export interface CheckboxCheckOptions<_T extends ElementType = TagName> extends Options {
     /**
      * Object returned by the
      * [`useCheckboxStore`](https://ariakit.org/reference/use-checkbox-store)
@@ -45,4 +48,5 @@ export interface CheckboxCheckOptions<T extends As = "span"> extends Options<T>
      */
     checked?: boolean;
 }
-export type CheckboxCheckProps<T extends As = "span"> = Props<CheckboxCheckOptions<T>>;
+export type CheckboxCheckProps<T extends ElementType = TagName> = Props<T, CheckboxCheckOptions<T>>;
+export {};

package/cjs/checkbox/checkbox-context.cjs

@@ -5,8 +5,8 @@
 
 
 
-var _63UPRTFZcjs = require('../__chunks/63UPRTFZ.cjs');
-require('../__chunks/RNZNGEL4.cjs');
+var _OIGGI6DIcjs = require('../__chunks/OIGGI6DI.cjs');
+require('../__chunks/Q67LZMDT.cjs');
 require('../__chunks/EO6LS72H.cjs');
 require('../__chunks/CJDHQUBR.cjs');
 require('../__chunks/AV6KTKLE.cjs');
@@ -16,4 +16,4 @@ require('../__chunks/AV6KTKLE.cjs');
 
 
 
-exports.CheckboxContextProvider = _63UPRTFZcjs.CheckboxContextProvider; exports.CheckboxScopedContextProvider = _63UPRTFZcjs.CheckboxScopedContextProvider; exports.useCheckboxContext = _63UPRTFZcjs.useCheckboxContext; exports.useCheckboxProviderContext = _63UPRTFZcjs.useCheckboxProviderContext; exports.useCheckboxScopedContext = _63UPRTFZcjs.useCheckboxScopedContext;
+exports.CheckboxContextProvider = _OIGGI6DIcjs.CheckboxContextProvider; exports.CheckboxScopedContextProvider = _OIGGI6DIcjs.CheckboxScopedContextProvider; exports.useCheckboxContext = _OIGGI6DIcjs.useCheckboxContext; exports.useCheckboxProviderContext = _OIGGI6DIcjs.useCheckboxProviderContext; exports.useCheckboxScopedContext = _OIGGI6DIcjs.useCheckboxScopedContext;

package/cjs/checkbox/checkbox-provider.cjs

@@ -4,8 +4,8 @@
 var _VPQQSYH7cjs = require('../__chunks/VPQQSYH7.cjs');
 
 
-var _63UPRTFZcjs = require('../__chunks/63UPRTFZ.cjs');
-require('../__chunks/RNZNGEL4.cjs');
+var _OIGGI6DIcjs = require('../__chunks/OIGGI6DI.cjs');
+require('../__chunks/Q67LZMDT.cjs');
 require('../__chunks/OLOZ5JT2.cjs');
 require('../__chunks/EO6LS72H.cjs');
 require('../__chunks/CJDHQUBR.cjs');
@@ -15,7 +15,7 @@ require('../__chunks/AV6KTKLE.cjs');
 var _jsxruntime = require('react/jsx-runtime');
 function CheckboxProvider(props = {}) {
   const store = _VPQQSYH7cjs.useCheckboxStore.call(void 0, props);
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _63UPRTFZcjs.CheckboxContextProvider, { value: store, children: props.children });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _OIGGI6DIcjs.CheckboxContextProvider, { value: store, children: props.children });
 }
 
 

package/cjs/checkbox/checkbox.cjs

@@ -2,13 +2,13 @@
 
 
 
-var _BBS4RP44cjs = require('../__chunks/BBS4RP44.cjs');
-require('../__chunks/63UPRTFZ.cjs');
+var _OUTZPTLJcjs = require('../__chunks/OUTZPTLJ.cjs');
+require('../__chunks/OIGGI6DI.cjs');
 require('../__chunks/ERFHNHON.cjs');
-require('../__chunks/DAJUUBUI.cjs');
-require('../__chunks/Z3GCTNW4.cjs');
+require('../__chunks/ZMTZTMRS.cjs');
+require('../__chunks/5QD55NKL.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');
@@ -16,4 +16,4 @@ require('../__chunks/AV6KTKLE.cjs');
 
 
 
-exports.Checkbox = _BBS4RP44cjs.Checkbox; exports.useCheckbox = _BBS4RP44cjs.useCheckbox;
+exports.Checkbox = _OUTZPTLJcjs.Checkbox; exports.useCheckbox = _OUTZPTLJcjs.useCheckbox;

package/cjs/checkbox/checkbox.d.cts

@@ -1,7 +1,9 @@
-import type { ChangeEvent, InputHTMLAttributes } from "react";
+import type { ComponentPropsWithoutRef, ElementType } from "react";
 import type { CommandOptions } from "../command/command.js";
-import type { As, Props } from "../utils/types.js";
+import type { Props } from "../utils/types.js";
 import type { CheckboxStore } from "./checkbox-store.js";
+declare const TagName = "input";
+type TagName = typeof TagName;
 /**
  * Returns props to create a `Checkbox` component. If the element is not a
  * native checkbox, the hook will return additional props to make sure it's
@@ -13,7 +15,7 @@ import type { CheckboxStore } from "./checkbox-store.js";
  * <Role {...props}>Accessible checkbox</Role>
  * ```
  */
-export declare const useCheckbox: import("../utils/types.js").Hook<CheckboxOptions<"input">>;
+export declare const useCheckbox: import("../utils/types.js").Hook<"input", CheckboxOptions<"input">>;
 /**
  * Renders an accessible checkbox element. If the underlying element is not a
  * native checkbox, this component will pass additional attributes to make sure
@@ -24,8 +26,8 @@ export declare const useCheckbox: import("../utils/types.js").Hook<CheckboxOptio
  * <Checkbox render={<div />}>Accessible checkbox</Checkbox>
  * ```
  */
-export declare const Checkbox: import("../utils/types.js").Component<CheckboxOptions<"input">>;
-export interface CheckboxOptions<T extends As = "input"> extends CommandOptions<T> {
+export declare const Checkbox: (props: CheckboxProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export interface CheckboxOptions<T extends ElementType = TagName> extends CommandOptions<T> {
     /**
      * Object returned by the
      * [`useCheckboxStore`](https://ariakit.org/reference/use-checkbox-store)
@@ -62,7 +64,7 @@ export interface CheckboxOptions<T extends As = "input"> extends CommandOptions<
      * </CheckboxProvider>
      * ```
      */
-    value?: InputHTMLAttributes<HTMLInputElement>["value"];
+    value?: ComponentPropsWithoutRef<TagName>["value"];
     /**
      * The default checked state of the checkbox. This prop is ignored if the
      * [`checked`](https://ariakit.org/reference/checkbox#checked) or the
@@ -79,6 +81,7 @@ export interface CheckboxOptions<T extends As = "input"> extends CommandOptions<
     /**
      * A function that is called when the checkbox's checked state changes.
      */
-    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+    onChange?: ComponentPropsWithoutRef<TagName>["onChange"];
 }
-export type CheckboxProps<T extends As = "input"> = Props<CheckboxOptions<T>>;
+export type CheckboxProps<T extends ElementType = TagName> = Props<T, CheckboxOptions<T>>;
+export {};

package/cjs/checkbox/checkbox.d.ts

@@ -1,7 +1,9 @@
-import type { ChangeEvent, InputHTMLAttributes } from "react";
+import type { ComponentPropsWithoutRef, ElementType } from "react";
 import type { CommandOptions } from "../command/command.js";
-import type { As, Props } from "../utils/types.js";
+import type { Props } from "../utils/types.js";
 import type { CheckboxStore } from "./checkbox-store.js";
+declare const TagName = "input";
+type TagName = typeof TagName;
 /**
  * Returns props to create a `Checkbox` component. If the element is not a
  * native checkbox, the hook will return additional props to make sure it's
@@ -13,7 +15,7 @@ import type { CheckboxStore } from "./checkbox-store.js";
  * <Role {...props}>Accessible checkbox</Role>
  * ```
  */
-export declare const useCheckbox: import("../utils/types.js").Hook<CheckboxOptions<"input">>;
+export declare const useCheckbox: import("../utils/types.js").Hook<"input", CheckboxOptions<"input">>;
 /**
  * Renders an accessible checkbox element. If the underlying element is not a
  * native checkbox, this component will pass additional attributes to make sure
@@ -24,8 +26,8 @@ export declare const useCheckbox: import("../utils/types.js").Hook<CheckboxOptio
  * <Checkbox render={<div />}>Accessible checkbox</Checkbox>
  * ```
  */
-export declare const Checkbox: import("../utils/types.js").Component<CheckboxOptions<"input">>;
-export interface CheckboxOptions<T extends As = "input"> extends CommandOptions<T> {
+export declare const Checkbox: (props: CheckboxProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export interface CheckboxOptions<T extends ElementType = TagName> extends CommandOptions<T> {
     /**
      * Object returned by the
      * [`useCheckboxStore`](https://ariakit.org/reference/use-checkbox-store)
@@ -62,7 +64,7 @@ export interface CheckboxOptions<T extends As = "input"> extends CommandOptions<
      * </CheckboxProvider>
      * ```
      */
-    value?: InputHTMLAttributes<HTMLInputElement>["value"];
+    value?: ComponentPropsWithoutRef<TagName>["value"];
     /**
      * The default checked state of the checkbox. This prop is ignored if the
      * [`checked`](https://ariakit.org/reference/checkbox#checked) or the
@@ -79,6 +81,7 @@ export interface CheckboxOptions<T extends As = "input"> extends CommandOptions<
     /**
      * A function that is called when the checkbox's checked state changes.
      */
-    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+    onChange?: ComponentPropsWithoutRef<TagName>["onChange"];
 }
-export type CheckboxProps<T extends As = "input"> = Props<CheckboxOptions<T>>;
+export type CheckboxProps<T extends ElementType = TagName> = Props<T, CheckboxOptions<T>>;
+export {};

package/cjs/collection/collection-context.cjs

@@ -5,8 +5,8 @@
 
 
 
-var _BZTDJIVTcjs = require('../__chunks/BZTDJIVT.cjs');
-require('../__chunks/RNZNGEL4.cjs');
+var _Q6CVYJBOcjs = require('../__chunks/Q6CVYJBO.cjs');
+require('../__chunks/Q67LZMDT.cjs');
 require('../__chunks/EO6LS72H.cjs');
 require('../__chunks/CJDHQUBR.cjs');
 require('../__chunks/AV6KTKLE.cjs');
@@ -16,4 +16,4 @@ require('../__chunks/AV6KTKLE.cjs');
 
 
 
-exports.CollectionContextProvider = _BZTDJIVTcjs.CollectionContextProvider; exports.CollectionScopedContextProvider = _BZTDJIVTcjs.CollectionScopedContextProvider; exports.useCollectionContext = _BZTDJIVTcjs.useCollectionContext; exports.useCollectionProviderContext = _BZTDJIVTcjs.useCollectionProviderContext; exports.useCollectionScopedContext = _BZTDJIVTcjs.useCollectionScopedContext;
+exports.CollectionContextProvider = _Q6CVYJBOcjs.CollectionContextProvider; exports.CollectionScopedContextProvider = _Q6CVYJBOcjs.CollectionScopedContextProvider; exports.useCollectionContext = _Q6CVYJBOcjs.useCollectionContext; exports.useCollectionProviderContext = _Q6CVYJBOcjs.useCollectionProviderContext; exports.useCollectionScopedContext = _Q6CVYJBOcjs.useCollectionScopedContext;

package/cjs/collection/collection-item.cjs

@@ -2,13 +2,13 @@
 
 
 
-var _R5A2WTWBcjs = require('../__chunks/R5A2WTWB.cjs');
-require('../__chunks/BZTDJIVT.cjs');
-require('../__chunks/RNZNGEL4.cjs');
+var _XWCNZ2IPcjs = require('../__chunks/XWCNZ2IP.cjs');
+require('../__chunks/Q6CVYJBO.cjs');
+require('../__chunks/Q67LZMDT.cjs');
 require('../__chunks/EO6LS72H.cjs');
 require('../__chunks/CJDHQUBR.cjs');
 require('../__chunks/AV6KTKLE.cjs');
 
 
 
-exports.CollectionItem = _R5A2WTWBcjs.CollectionItem; exports.useCollectionItem = _R5A2WTWBcjs.useCollectionItem;
+exports.CollectionItem = _XWCNZ2IPcjs.CollectionItem; exports.useCollectionItem = _XWCNZ2IPcjs.useCollectionItem;

package/cjs/collection/collection-item.d.cts

@@ -1,6 +1,9 @@
+import type { ElementType } from "react";
 import type { CollectionStoreItem } from "@ariakit/core/collection/collection-store";
-import type { As, Options, Props } from "../utils/types.js";
+import type { Options, Props } from "../utils/types.js";
 import type { CollectionStore } from "./collection-store.js";
+declare const TagName = "div";
+type TagName = typeof TagName;
 /**
  * Returns props to create a `CollectionItem` component. This hook will register
  * the item in the collection store. If this hook is used in a component that is
@@ -14,7 +17,7 @@ import type { CollectionStore } from "./collection-store.js";
  * <Role {...props}>Item</Role>
  * ```
  */
-export declare const useCollectionItem: import("../utils/types.js").Hook<CollectionItemOptions<"div">>;
+export declare const useCollectionItem: import("../utils/types.js").Hook<"div", CollectionItemOptions<"div">>;
 /**
  * Renders an item in a collection. The collection store can be passed
  * explicitly through the
@@ -30,8 +33,8 @@ export declare const useCollectionItem: import("../utils/types.js").Hook<Collect
  * <CollectionItem store={store}>Item 3</CollectionItem>
  * ```
  */
-export declare const CollectionItem: import("../utils/types.js").Component<CollectionItemOptions<"div">>;
-export interface CollectionItemOptions<T extends As = "div"> extends Options<T> {
+export declare const CollectionItem: (props: CollectionItemProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export interface CollectionItemOptions<_T extends ElementType = TagName> extends Options {
     /**
      * Object returned by the
      * [`useCollectionStore`](https://ariakit.org/reference/use-collection-store)
@@ -73,4 +76,5 @@ export interface CollectionItemOptions<T extends As = "div"> extends Options<T>
      */
     getItem?: (props: CollectionStoreItem) => CollectionStoreItem;
 }
-export type CollectionItemProps<T extends As = "div"> = Props<CollectionItemOptions<T>>;
+export type CollectionItemProps<T extends ElementType = TagName> = Props<T, CollectionItemOptions<T>>;
+export {};

package/cjs/collection/collection-item.d.ts

@@ -1,6 +1,9 @@
+import type { ElementType } from "react";
 import type { CollectionStoreItem } from "@ariakit/core/collection/collection-store";
-import type { As, Options, Props } from "../utils/types.js";
+import type { Options, Props } from "../utils/types.js";
 import type { CollectionStore } from "./collection-store.js";
+declare const TagName = "div";
+type TagName = typeof TagName;
 /**
  * Returns props to create a `CollectionItem` component. This hook will register
  * the item in the collection store. If this hook is used in a component that is
@@ -14,7 +17,7 @@ import type { CollectionStore } from "./collection-store.js";
  * <Role {...props}>Item</Role>
  * ```
  */
-export declare const useCollectionItem: import("../utils/types.js").Hook<CollectionItemOptions<"div">>;
+export declare const useCollectionItem: import("../utils/types.js").Hook<"div", CollectionItemOptions<"div">>;
 /**
  * Renders an item in a collection. The collection store can be passed
  * explicitly through the
@@ -30,8 +33,8 @@ export declare const useCollectionItem: import("../utils/types.js").Hook<Collect
  * <CollectionItem store={store}>Item 3</CollectionItem>
  * ```
  */
-export declare const CollectionItem: import("../utils/types.js").Component<CollectionItemOptions<"div">>;
-export interface CollectionItemOptions<T extends As = "div"> extends Options<T> {
+export declare const CollectionItem: (props: CollectionItemProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export interface CollectionItemOptions<_T extends ElementType = TagName> extends Options {
     /**
      * Object returned by the
      * [`useCollectionStore`](https://ariakit.org/reference/use-collection-store)
@@ -73,4 +76,5 @@ export interface CollectionItemOptions<T extends As = "div"> extends Options<T>
      */
     getItem?: (props: CollectionStoreItem) => CollectionStoreItem;
 }
-export type CollectionItemProps<T extends As = "div"> = Props<CollectionItemOptions<T>>;
+export type CollectionItemProps<T extends ElementType = TagName> = Props<T, CollectionItemOptions<T>>;
+export {};

package/cjs/collection/collection-provider.cjs

@@ -4,8 +4,8 @@
 var _CDNJPIEGcjs = require('../__chunks/CDNJPIEG.cjs');
 
 
-var _BZTDJIVTcjs = require('../__chunks/BZTDJIVT.cjs');
-require('../__chunks/RNZNGEL4.cjs');
+var _Q6CVYJBOcjs = require('../__chunks/Q6CVYJBO.cjs');
+require('../__chunks/Q67LZMDT.cjs');
 require('../__chunks/OLOZ5JT2.cjs');
 require('../__chunks/EO6LS72H.cjs');
 require('../__chunks/CJDHQUBR.cjs');
@@ -15,7 +15,7 @@ require('../__chunks/AV6KTKLE.cjs');
 var _jsxruntime = require('react/jsx-runtime');
 function CollectionProvider(props = {}) {
   const store = _CDNJPIEGcjs.useCollectionStore.call(void 0, props);
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _BZTDJIVTcjs.CollectionContextProvider, { value: store, children: props.children });
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Q6CVYJBOcjs.CollectionContextProvider, { value: store, children: props.children });
 }
 
 

package/cjs/collection/collection-renderer.cjs

@@ -4,9 +4,9 @@
 
 
 
-var _6LVRCU4Jcjs = require('../__chunks/6LVRCU4J.cjs');
-require('../__chunks/BZTDJIVT.cjs');
-require('../__chunks/RNZNGEL4.cjs');
+var _C6G4FIVIcjs = require('../__chunks/C6G4FIVI.cjs');
+require('../__chunks/Q6CVYJBO.cjs');
+require('../__chunks/Q67LZMDT.cjs');
 require('../__chunks/OLOZ5JT2.cjs');
 require('../__chunks/EO6LS72H.cjs');
 require('../__chunks/CJDHQUBR.cjs');
@@ -16,4 +16,4 @@ require('../__chunks/AV6KTKLE.cjs');
 
 
 
-exports.CollectionRenderer = _6LVRCU4Jcjs.CollectionRenderer; exports.getCollectionRendererItem = _6LVRCU4Jcjs.getCollectionRendererItem; exports.getCollectionRendererItemId = _6LVRCU4Jcjs.getCollectionRendererItemId; exports.useCollectionRenderer = _6LVRCU4Jcjs.useCollectionRenderer;
+exports.CollectionRenderer = _C6G4FIVIcjs.CollectionRenderer; exports.getCollectionRendererItem = _C6G4FIVIcjs.getCollectionRendererItem; exports.getCollectionRendererItemId = _C6G4FIVIcjs.getCollectionRendererItemId; exports.useCollectionRenderer = _C6G4FIVIcjs.useCollectionRenderer;

package/cjs/collection/collection-renderer.d.cts

@@ -1,7 +1,9 @@
-import type { CSSProperties, ComponentPropsWithRef, ReactElement, ReactNode, RefCallback, RefObject } from "react";
+import type { CSSProperties, ReactNode, RefCallback, RefObject } from "react";
 import type { AnyObject, BooleanOrCallback, EmptyObject } from "@ariakit/core/utils/types";
-import type { RenderProp } from "../utils/types.js";
+import type { Options, Props } from "../utils/types.js";
 import type { CollectionStore, CollectionStoreItem } from "./collection-store.js";
+declare const TagName = "div";
+type TagName = typeof TagName;
 type NestedRendererItemProps = Pick<CollectionRendererOptions, "gap" | "orientation" | "itemSize" | "estimatedItemSize" | "padding" | "paddingStart" | "paddingEnd">;
 interface ItemObject extends AnyObject, NestedRendererItemProps {
     /**
@@ -46,6 +48,8 @@ declare function getItemId(item: Item, index: number, baseId?: string): string;
 declare function getItem<T extends Item = any>(items: Items<T>, index: number): RawItemProps<T> | null;
 export declare function useCollectionRenderer<T extends Item = any>({ store, items: itemsProp, initialItems, gap, itemSize, estimatedItemSize, overscan: overscanProp, orientation: orientationProp, padding, paddingStart, paddingEnd, persistentIndices, renderOnScroll, renderOnResize, children: renderItem, ...props }: CollectionRendererProps<T>): {
     children: ReactNode[];
+    wrapElement?: import("../utils/types.js").WrapElement | undefined;
+    render?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("../utils/types.js").RenderProp<import("react").HTMLAttributes<any> & import("react").RefAttributes<any>> | undefined;
     ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
     defaultChecked?: boolean | undefined;
     defaultValue?: string | number | readonly string[] | undefined;
@@ -93,7 +97,7 @@ export declare function useCollectionRenderer<T extends Item = any>({ store, ite
     results?: number | undefined;
     security?: string | undefined;
     unselectable?: "on" | "off" | undefined;
-    inputMode?: "search" | "none" | "text" | "email" | "tel" | "url" | "numeric" | "decimal" | undefined;
+    inputMode?: "search" | "none" | "text" | "url" | "tel" | "email" | "numeric" | "decimal" | undefined;
     is?: string | undefined;
     "aria-activedescendant"?: string | undefined;
     "aria-atomic"?: (boolean | "false" | "true") | undefined;
@@ -107,7 +111,7 @@ export declare function useCollectionRenderer<T extends Item = any>({ store, ite
     "aria-colindextext"?: string | undefined;
     "aria-colspan"?: number | undefined;
     "aria-controls"?: string | undefined;
-    "aria-current"?: boolean | "page" | "false" | "true" | "time" | "date" | "step" | "location" | undefined;
+    "aria-current"?: boolean | "page" | "false" | "true" | "time" | "step" | "date" | "location" | undefined;
     "aria-describedby"?: string | undefined;
     "aria-description"?: string | undefined;
     "aria-details"?: string | undefined;
@@ -314,16 +318,15 @@ export declare function useCollectionRenderer<T extends Item = any>({ store, ite
     onTransitionEnd?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
     onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
     key?: import("react").Key | null | undefined;
-    render?: ReactElement<any, string | import("react").JSXElementConstructor<any>> | RenderProp | undefined;
 };
-export declare const CollectionRenderer: <T extends Item = any>(props: CollectionRendererProps<T>) => ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export declare const CollectionRenderer: <T extends Item = any>(props: CollectionRendererProps<T>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
 export declare const getCollectionRendererItem: typeof getItem;
 export declare const getCollectionRendererItemId: typeof getItemId;
 export type CollectionRendererItemObject = ItemObject;
 export type CollectionRendererItem = Item;
 export type CollectionRendererBaseItemProps = BaseItemProps;
 export type CollectionRendererItemProps<T extends Item, P extends BaseItemProps = BaseItemProps> = ItemProps<T, P>;
-export interface CollectionRendererOptions<T extends Item = any> {
+export interface CollectionRendererOptions<T extends Item = any> extends Options {
     /**
      * Object returned by the
      * [`useCollectionStore`](https://ariakit.org/reference/use-collection-store)
@@ -441,8 +444,7 @@ export interface CollectionRendererOptions<T extends Item = any> {
      * renders the item.
      */
     children?: (item: ItemProps<T>) => ReactNode;
-    render?: RenderProp | ReactElement;
 }
-export interface CollectionRendererProps<T extends Item = any> extends Omit<ComponentPropsWithRef<"div">, "children">, CollectionRendererOptions<T> {
+export interface CollectionRendererProps<T extends Item = any> extends Props<TagName, CollectionRendererOptions<T>> {
 }
 export {};

package/cjs/collection/collection-renderer.d.ts

@@ -1,7 +1,9 @@
-import type { CSSProperties, ComponentPropsWithRef, ReactElement, ReactNode, RefCallback, RefObject } from "react";
+import type { CSSProperties, ReactNode, RefCallback, RefObject } from "react";
 import type { AnyObject, BooleanOrCallback, EmptyObject } from "@ariakit/core/utils/types";
-import type { RenderProp } from "../utils/types.js";
+import type { Options, Props } from "../utils/types.js";
 import type { CollectionStore, CollectionStoreItem } from "./collection-store.js";
+declare const TagName = "div";
+type TagName = typeof TagName;
 type NestedRendererItemProps = Pick<CollectionRendererOptions, "gap" | "orientation" | "itemSize" | "estimatedItemSize" | "padding" | "paddingStart" | "paddingEnd">;
 interface ItemObject extends AnyObject, NestedRendererItemProps {
     /**
@@ -46,6 +48,8 @@ declare function getItemId(item: Item, index: number, baseId?: string): string;
 declare function getItem<T extends Item = any>(items: Items<T>, index: number): RawItemProps<T> | null;
 export declare function useCollectionRenderer<T extends Item = any>({ store, items: itemsProp, initialItems, gap, itemSize, estimatedItemSize, overscan: overscanProp, orientation: orientationProp, padding, paddingStart, paddingEnd, persistentIndices, renderOnScroll, renderOnResize, children: renderItem, ...props }: CollectionRendererProps<T>): {
     children: ReactNode[];
+    wrapElement?: import("../utils/types.js").WrapElement | undefined;
+    render?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("../utils/types.js").RenderProp<import("react").HTMLAttributes<any> & import("react").RefAttributes<any>> | undefined;
     ref?: ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined;
     defaultChecked?: boolean | undefined;
     defaultValue?: string | number | readonly string[] | undefined;
@@ -93,7 +97,7 @@ export declare function useCollectionRenderer<T extends Item = any>({ store, ite
     results?: number | undefined;
     security?: string | undefined;
     unselectable?: "on" | "off" | undefined;
-    inputMode?: "search" | "none" | "text" | "email" | "tel" | "url" | "numeric" | "decimal" | undefined;
+    inputMode?: "search" | "none" | "text" | "url" | "tel" | "email" | "numeric" | "decimal" | undefined;
     is?: string | undefined;
     "aria-activedescendant"?: string | undefined;
     "aria-atomic"?: (boolean | "false" | "true") | undefined;
@@ -107,7 +111,7 @@ export declare function useCollectionRenderer<T extends Item = any>({ store, ite
     "aria-colindextext"?: string | undefined;
     "aria-colspan"?: number | undefined;
     "aria-controls"?: string | undefined;
-    "aria-current"?: boolean | "page" | "false" | "true" | "time" | "date" | "step" | "location" | undefined;
+    "aria-current"?: boolean | "page" | "false" | "true" | "time" | "step" | "date" | "location" | undefined;
     "aria-describedby"?: string | undefined;
     "aria-description"?: string | undefined;
     "aria-details"?: string | undefined;
@@ -314,16 +318,15 @@ export declare function useCollectionRenderer<T extends Item = any>({ store, ite
     onTransitionEnd?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
     onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
     key?: import("react").Key | null | undefined;
-    render?: ReactElement<any, string | import("react").JSXElementConstructor<any>> | RenderProp | undefined;
 };
-export declare const CollectionRenderer: <T extends Item = any>(props: CollectionRendererProps<T>) => ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export declare const CollectionRenderer: <T extends Item = any>(props: CollectionRendererProps<T>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
 export declare const getCollectionRendererItem: typeof getItem;
 export declare const getCollectionRendererItemId: typeof getItemId;
 export type CollectionRendererItemObject = ItemObject;
 export type CollectionRendererItem = Item;
 export type CollectionRendererBaseItemProps = BaseItemProps;
 export type CollectionRendererItemProps<T extends Item, P extends BaseItemProps = BaseItemProps> = ItemProps<T, P>;
-export interface CollectionRendererOptions<T extends Item = any> {
+export interface CollectionRendererOptions<T extends Item = any> extends Options {
     /**
      * Object returned by the
      * [`useCollectionStore`](https://ariakit.org/reference/use-collection-store)
@@ -441,8 +444,7 @@ export interface CollectionRendererOptions<T extends Item = any> {
      * renders the item.
      */
     children?: (item: ItemProps<T>) => ReactNode;
-    render?: RenderProp | ReactElement;
 }
-export interface CollectionRendererProps<T extends Item = any> extends Omit<ComponentPropsWithRef<"div">, "children">, CollectionRendererOptions<T> {
+export interface CollectionRendererProps<T extends Item = any> extends Props<TagName, CollectionRendererOptions<T>> {
 }
 export {};

package/cjs/collection/collection.cjs

@@ -2,12 +2,12 @@
 
 
 
-var _BZTDJIVTcjs = require('../__chunks/BZTDJIVT.cjs');
+var _Q6CVYJBOcjs = require('../__chunks/Q6CVYJBO.cjs');
 
 
 
 
-var _RNZNGEL4cjs = require('../__chunks/RNZNGEL4.cjs');
+var _Q67LZMDTcjs = require('../__chunks/Q67LZMDT.cjs');
 
 
 var _EO6LS72Hcjs = require('../__chunks/EO6LS72H.cjs');
@@ -17,27 +17,26 @@ require('../__chunks/CJDHQUBR.cjs');
 var _AV6KTKLEcjs = require('../__chunks/AV6KTKLE.cjs');
 
 // src/collection/collection.tsx
+var _misc = require('@ariakit/core/utils/misc');
 var _jsxruntime = require('react/jsx-runtime');
-var useCollection = _RNZNGEL4cjs.createHook.call(void 0, 
-  (_a) => {
+var TagName = "div";
+var useCollection = _Q67LZMDTcjs.createHook.call(void 0, 
+  function useCollection2(_a) {
     var _b = _a, { store } = _b, props = _AV6KTKLEcjs.__objRest.call(void 0, _b, ["store"]);
-    const context = _BZTDJIVTcjs.useCollectionProviderContext.call(void 0, );
+    const context = _Q6CVYJBOcjs.useCollectionProviderContext.call(void 0, );
     store = store || context;
     props = _EO6LS72Hcjs.useWrapElement.call(void 0, 
       props,
-      (element) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _BZTDJIVTcjs.CollectionScopedContextProvider, { value: store, children: element }),
+      (element) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Q6CVYJBOcjs.CollectionScopedContextProvider, { value: store, children: element }),
       [store]
     );
-    return props;
+    return _misc.removeUndefinedValues.call(void 0, props);
   }
 );
-var Collection = _RNZNGEL4cjs.createComponent.call(void 0, (props) => {
+var Collection = _Q67LZMDTcjs.forwardRef.call(void 0, function Collection2(props) {
   const htmlProps = useCollection(props);
-  return _RNZNGEL4cjs.createElement.call(void 0, "div", htmlProps);
+  return _Q67LZMDTcjs.createElement.call(void 0, TagName, htmlProps);
 });
-if (process.env.NODE_ENV !== "production") {
-  Collection.displayName = "Collection";
-}
 
 
 

package/cjs/collection/collection.d.cts

@@ -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 { CollectionStore } from "./collection-store.js";
+declare const TagName = "div";
+type TagName = typeof TagName;
 /**
  * Returns props to create a `Collection` component. It receives the collection
  * store through the `store` prop and provides context for `CollectionItem`
@@ -16,7 +19,7 @@ import type { CollectionStore } from "./collection-store.js";
  * </Role>
  * ```
  */
-export declare const useCollection: import("../utils/types.js").Hook<CollectionOptions<"div">>;
+export declare const useCollection: import("../utils/types.js").Hook<"div", CollectionOptions<"div">>;
 /**
  * Renders a simple wrapper for collection items. It accepts a collection store
  * through the [`store`](https://ariakit.org/reference/collection#store) prop
@@ -33,8 +36,8 @@ export declare const useCollection: import("../utils/types.js").Hook<CollectionO
  * </Collection>
  * ```
  */
-export declare const Collection: import("../utils/types.js").Component<CollectionOptions<"div">>;
-export interface CollectionOptions<T extends As = "div"> extends Options<T> {
+export declare const Collection: (props: CollectionProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export interface CollectionOptions<_T extends ElementType = TagName> extends Options {
     /**
      * Object returned by the
      * [`useCollectionStore`](https://ariakit.org/reference/use-collection-store)
@@ -44,4 +47,5 @@ export interface CollectionOptions<T extends As = "div"> extends Options<T> {
      */
     store?: CollectionStore;
 }
-export type CollectionProps<T extends As = "div"> = Props<CollectionOptions<T>>;
+export type CollectionProps<T extends ElementType = TagName> = Props<T, CollectionOptions<T>>;
+export {};