@ariakit/react-core 0.3.14 → 0.4.1

package/esm/__chunks/Z72LDQLY.js

@@ -0,0 +1,64 @@
+"use client";
+import {
+  useDialogDisclosure
+} from "./5SF76VVA.js";
+import {
+  usePopoverAnchor
+} from "./NLT7LY5Y.js";
+import {
+  PopoverScopedContextProvider,
+  usePopoverProviderContext
+} from "./TE637IA7.js";
+import {
+  createElement,
+  createHook,
+  forwardRef
+} from "./5M6RSQEC.js";
+import {
+  useEvent,
+  useWrapElement
+} from "./6O5OEQGF.js";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "./4R3V3JGP.js";
+
+// src/popover/popover-disclosure.tsx
+import { invariant } from "@ariakit/core/utils/misc";
+import { jsx } from "react/jsx-runtime";
+var TagName = "button";
+var usePopoverDisclosure = createHook(function usePopoverDisclosure2(_a) {
+  var _b = _a, { store } = _b, props = __objRest(_b, ["store"]);
+  const context = usePopoverProviderContext();
+  store = store || context;
+  invariant(
+    store,
+    process.env.NODE_ENV !== "production" && "PopoverDisclosure must receive a `store` prop or be wrapped in a PopoverProvider component."
+  );
+  const onClickProp = props.onClick;
+  const onClick = useEvent((event) => {
+    store == null ? void 0 : store.setAnchorElement(event.currentTarget);
+    onClickProp == null ? void 0 : onClickProp(event);
+  });
+  props = useWrapElement(
+    props,
+    (element) => /* @__PURE__ */ jsx(PopoverScopedContextProvider, { value: store, children: element }),
+    [store]
+  );
+  props = __spreadProps(__spreadValues({}, props), {
+    onClick
+  });
+  props = usePopoverAnchor(__spreadValues({ store }, props));
+  props = useDialogDisclosure(__spreadValues({ store }, props));
+  return props;
+});
+var PopoverDisclosure = forwardRef(function PopoverDisclosure2(props) {
+  const htmlProps = usePopoverDisclosure(props);
+  return createElement(TagName, htmlProps);
+});
+
+export {
+  usePopoverDisclosure,
+  PopoverDisclosure
+};

package/esm/__chunks/{FGMA3QUS.js → ZK5NO24C.js}

@@ -1,23 +1,24 @@
 "use client";
 import {
   usePopoverDismiss
-} from "./F6PRXTDU.js";
+} from "./IKMNNZAH.js";
 import {
   useHovercardScopedContext
-} from "./TI7CMBHW.js";
+} from "./TWDHCE7Y.js";
 import {
-  createComponent,
   createElement,
-  createHook
-} from "./3ORBWXWF.js";
+  createHook,
+  forwardRef
+} from "./5M6RSQEC.js";
 import {
   __objRest,
   __spreadValues
 } from "./4R3V3JGP.js";
 
 // src/hovercard/hovercard-dismiss.ts
+var TagName = "button";
 var useHovercardDismiss = createHook(
-  (_a) => {
+  function useHovercardDismiss2(_a) {
     var _b = _a, { store } = _b, props = __objRest(_b, ["store"]);
     const context = useHovercardScopedContext();
     store = store || context;
@@ -25,15 +26,10 @@ var useHovercardDismiss = createHook(
     return props;
   }
 );
-var HovercardDismiss = createComponent(
-  (props) => {
-    const htmlProps = useHovercardDismiss(props);
-    return createElement("button", htmlProps);
-  }
-);
-if (process.env.NODE_ENV !== "production") {
-  HovercardDismiss.displayName = "HovercardDismiss";
-}
+var HovercardDismiss = forwardRef(function HovercardDismiss2(props) {
+  const htmlProps = useHovercardDismiss(props);
+  return createElement(TagName, htmlProps);
+});
 
 export {
   useHovercardDismiss,

package/esm/__chunks/{636A7WVS.js → ZO6PSJHJ.js}

@@ -1,33 +1,29 @@
 "use client";
 import {
   useGroup
-} from "./R2QZ3KXH.js";
+} from "./CWDOOAGR.js";
 import {
-  createComponent,
   createElement,
-  createHook
-} from "./3ORBWXWF.js";
+  createHook,
+  forwardRef
+} from "./5M6RSQEC.js";
 import {
   __objRest
 } from "./4R3V3JGP.js";
 
 // src/composite/composite-group.ts
+var TagName = "div";
 var useCompositeGroup = createHook(
-  (_a) => {
+  function useCompositeGroup2(_a) {
     var _b = _a, { store } = _b, props = __objRest(_b, ["store"]);
     props = useGroup(props);
     return props;
   }
 );
-var CompositeGroup = createComponent(
-  (props) => {
-    const htmlProps = useCompositeGroup(props);
-    return createElement("div", htmlProps);
-  }
-);
-if (process.env.NODE_ENV !== "production") {
-  CompositeGroup.displayName = "CompositeGroup";
-}
+var CompositeGroup = forwardRef(function CompositeGroup2(props) {
+  const htmlProps = useCompositeGroup(props);
+  return createElement(TagName, htmlProps);
+});
 
 export {
   useCompositeGroup,

package/esm/__chunks/{XEV62JUQ.js → ZVFJIYOE.js}

@@ -2,10 +2,10 @@
 import {
   CompositeContextProvider,
   CompositeScopedContextProvider
-} from "./IB7YUKH5.js";
+} from "./3D6OCOHF.js";
 import {
   createStoreContext
-} from "./3ORBWXWF.js";
+} from "./5M6RSQEC.js";
 
 // src/radio/radio-context.tsx
 var ctx = createStoreContext(

package/esm/__chunks/ZXBIDNZ3.js

@@ -0,0 +1,27 @@
+"use client";
+import {
+  useDialogHeading
+} from "./E47ASM2Y.js";
+import {
+  createElement,
+  createHook,
+  forwardRef
+} from "./5M6RSQEC.js";
+
+// src/popover/popover-heading.ts
+var TagName = "h1";
+var usePopoverHeading = createHook(
+  function usePopoverHeading2(props) {
+    props = useDialogHeading(props);
+    return props;
+  }
+);
+var PopoverHeading = forwardRef(function PopoverHeading2(props) {
+  const htmlProps = usePopoverHeading(props);
+  return createElement(TagName, htmlProps);
+});
+
+export {
+  usePopoverHeading,
+  PopoverHeading
+};

package/esm/button/button.d.ts

@@ -1,5 +1,8 @@
+import type { 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";
+declare const TagName = "button";
+type TagName = typeof TagName;
 /**
  * Returns props to create a `Button` component. If the element is not a native
  * button, the hook will return additional props to make sure it's accessible.
@@ -10,7 +13,7 @@ import type { As, Props } from "../utils/types.js";
  * <Role {...props}>Accessible button</Role>
  * ```
  */
-export declare const useButton: import("../utils/types.js").Hook<ButtonOptions<"button">>;
+export declare const useButton: import("../utils/types.js").Hook<"button", ButtonOptions<"button">>;
 /**
  * Renders an accessible button element. If the underlying element is not a
  * native button, this component will pass additional attributes to make sure
@@ -21,6 +24,8 @@ export declare const useButton: import("../utils/types.js").Hook<ButtonOptions<"
  * <Button>Button</Button>
  * ```
  */
-export declare const Button: import("../utils/types.js").Component<ButtonOptions<"button">>;
-export type ButtonOptions<T extends As = "button"> = CommandOptions<T>;
-export type ButtonProps<T extends As = "button"> = Props<ButtonOptions<T>>;
+export declare const Button: (props: ButtonProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export interface ButtonOptions<T extends ElementType = TagName> extends CommandOptions<T> {
+}
+export type ButtonProps<T extends ElementType = TagName> = Props<T, ButtonOptions<T>>;
+export {};

package/esm/button/button.js

@@ -2,11 +2,11 @@
 import {
   Button,
   useButton
-} from "../__chunks/VDNZBO4W.js";
-import "../__chunks/NWCBQ4CV.js";
-import "../__chunks/KK7H3W2B.js";
+} from "../__chunks/JJ3MV4KB.js";
+import "../__chunks/KSZPJCUA.js";
+import "../__chunks/WAZE6NXP.js";
 import "../__chunks/SHA3WOPI.js";
-import "../__chunks/3ORBWXWF.js";
+import "../__chunks/5M6RSQEC.js";
 import "../__chunks/6O5OEQGF.js";
 import "../__chunks/XM66DUTO.js";
 import "../__chunks/4R3V3JGP.js";

package/esm/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/esm/checkbox/checkbox-check.js

@@ -2,9 +2,9 @@
 import {
   CheckboxCheck,
   useCheckboxCheck
-} from "../__chunks/MW2F7SEA.js";
+} from "../__chunks/BX7FFG2R.js";
 import "../__chunks/6XBVQI3K.js";
-import "../__chunks/3ORBWXWF.js";
+import "../__chunks/5M6RSQEC.js";
 import "../__chunks/6O5OEQGF.js";
 import "../__chunks/XM66DUTO.js";
 import "../__chunks/4R3V3JGP.js";

package/esm/checkbox/checkbox-context.js

@@ -5,8 +5,8 @@ import {
   useCheckboxContext,
   useCheckboxProviderContext,
   useCheckboxScopedContext
-} from "../__chunks/VPR2WHQV.js";
-import "../__chunks/3ORBWXWF.js";
+} from "../__chunks/EUN6HFWO.js";
+import "../__chunks/5M6RSQEC.js";
 import "../__chunks/6O5OEQGF.js";
 import "../__chunks/XM66DUTO.js";
 import "../__chunks/4R3V3JGP.js";

package/esm/checkbox/checkbox-provider.js

@@ -4,8 +4,8 @@ import {
 } from "../__chunks/JIZ5C2JK.js";
 import {
   CheckboxContextProvider
-} from "../__chunks/VPR2WHQV.js";
-import "../__chunks/3ORBWXWF.js";
+} from "../__chunks/EUN6HFWO.js";
+import "../__chunks/5M6RSQEC.js";
 import "../__chunks/EKQEJRUF.js";
 import "../__chunks/6O5OEQGF.js";
 import "../__chunks/XM66DUTO.js";

package/esm/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/esm/checkbox/checkbox.js

@@ -2,13 +2,13 @@
 import {
   Checkbox,
   useCheckbox
-} from "../__chunks/3AHQ6JCP.js";
-import "../__chunks/VPR2WHQV.js";
+} from "../__chunks/VYNLQCY5.js";
+import "../__chunks/EUN6HFWO.js";
 import "../__chunks/6XBVQI3K.js";
-import "../__chunks/NWCBQ4CV.js";
-import "../__chunks/KK7H3W2B.js";
+import "../__chunks/KSZPJCUA.js";
+import "../__chunks/WAZE6NXP.js";
 import "../__chunks/SHA3WOPI.js";
-import "../__chunks/3ORBWXWF.js";
+import "../__chunks/5M6RSQEC.js";
 import "../__chunks/EKQEJRUF.js";
 import "../__chunks/6O5OEQGF.js";
 import "../__chunks/XM66DUTO.js";

package/esm/collection/collection-context.js

@@ -5,8 +5,8 @@ import {
   useCollectionContext,
   useCollectionProviderContext,
   useCollectionScopedContext
-} from "../__chunks/4UUKJZ4V.js";
-import "../__chunks/3ORBWXWF.js";
+} from "../__chunks/MADQZZRL.js";
+import "../__chunks/5M6RSQEC.js";
 import "../__chunks/6O5OEQGF.js";
 import "../__chunks/XM66DUTO.js";
 import "../__chunks/4R3V3JGP.js";

package/esm/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/esm/collection/collection-item.js

@@ -2,9 +2,9 @@
 import {
   CollectionItem,
   useCollectionItem
-} from "../__chunks/UH3I23HL.js";
-import "../__chunks/4UUKJZ4V.js";
-import "../__chunks/3ORBWXWF.js";
+} from "../__chunks/7YKLTEOQ.js";
+import "../__chunks/MADQZZRL.js";
+import "../__chunks/5M6RSQEC.js";
 import "../__chunks/6O5OEQGF.js";
 import "../__chunks/XM66DUTO.js";
 import "../__chunks/4R3V3JGP.js";

package/esm/collection/collection-provider.js

@@ -4,8 +4,8 @@ import {
 } from "../__chunks/Y6GYTNQ2.js";
 import {
   CollectionContextProvider
-} from "../__chunks/4UUKJZ4V.js";
-import "../__chunks/3ORBWXWF.js";
+} from "../__chunks/MADQZZRL.js";
+import "../__chunks/5M6RSQEC.js";
 import "../__chunks/EKQEJRUF.js";
 import "../__chunks/6O5OEQGF.js";
 import "../__chunks/XM66DUTO.js";

package/esm/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/esm/collection/collection-renderer.js

@@ -4,9 +4,9 @@ import {
   getCollectionRendererItem,
   getCollectionRendererItemId,
   useCollectionRenderer
-} from "../__chunks/4HD64GHO.js";
-import "../__chunks/4UUKJZ4V.js";
-import "../__chunks/3ORBWXWF.js";
+} from "../__chunks/UZMGSJE4.js";
+import "../__chunks/MADQZZRL.js";
+import "../__chunks/5M6RSQEC.js";
 import "../__chunks/EKQEJRUF.js";
 import "../__chunks/6O5OEQGF.js";
 import "../__chunks/XM66DUTO.js";

package/esm/collection/collection.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 { 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 {};

package/esm/collection/collection.js

@@ -2,12 +2,12 @@
 import {
   CollectionScopedContextProvider,
   useCollectionProviderContext
-} from "../__chunks/4UUKJZ4V.js";
+} from "../__chunks/MADQZZRL.js";
 import {
-  createComponent,
   createElement,
-  createHook
-} from "../__chunks/3ORBWXWF.js";
+  createHook,
+  forwardRef
+} from "../__chunks/5M6RSQEC.js";
 import {
   useWrapElement
 } from "../__chunks/6O5OEQGF.js";
@@ -17,9 +17,11 @@ import {
 } from "../__chunks/4R3V3JGP.js";
 
 // src/collection/collection.tsx
+import { removeUndefinedValues } from "@ariakit/core/utils/misc";
 import { jsx } from "react/jsx-runtime";
+var TagName = "div";
 var useCollection = createHook(
-  (_a) => {
+  function useCollection2(_a) {
     var _b = _a, { store } = _b, props = __objRest(_b, ["store"]);
     const context = useCollectionProviderContext();
     store = store || context;
@@ -28,16 +30,13 @@ var useCollection = createHook(
       (element) => /* @__PURE__ */ jsx(CollectionScopedContextProvider, { value: store, children: element }),
       [store]
     );
-    return props;
+    return removeUndefinedValues(props);
   }
 );
-var Collection = createComponent((props) => {
+var Collection = forwardRef(function Collection2(props) {
   const htmlProps = useCollection(props);
-  return createElement("div", htmlProps);
+  return createElement(TagName, htmlProps);
 });
-if (process.env.NODE_ENV !== "production") {
-  Collection.displayName = "Collection";
-}
 export {
   Collection,
   useCollection