@ariakit/react-core 0.3.14 → 0.4.0

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/3PDOEITM.js";
+import "../__chunks/EUN6HFWO.js";
 import "../__chunks/6XBVQI3K.js";
-import "../__chunks/NWCBQ4CV.js";
-import "../__chunks/KK7H3W2B.js";
+import "../__chunks/ZF6ZK5BT.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/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

package/esm/combobox/combobox-cancel.d.ts

@@ -1,6 +1,9 @@
+import type { ElementType } from "react";
 import type { ButtonOptions } from "../button/button.js";
-import type { As, Props } from "../utils/types.js";
+import type { Props } from "../utils/types.js";
 import type { ComboboxStore } from "./combobox-store.js";
+declare const TagName = "button";
+type TagName = typeof TagName;
 /**
  * Returns props to create a `ComboboxCancel` component that clears the combobox
  * input when clicked.
@@ -13,7 +16,7 @@ import type { ComboboxStore } from "./combobox-store.js";
  * <Role {...props} />
  * ```
  */
-export declare const useComboboxCancel: import("../utils/types.js").Hook<ComboboxCancelOptions<"button">>;
+export declare const useComboboxCancel: import("../utils/types.js").Hook<"button", ComboboxCancelOptions<"button">>;
 /**
  * Renders a combobox cancel button that clears the combobox input value when
  * clicked.
@@ -31,8 +34,8 @@ export declare const useComboboxCancel: import("../utils/types.js").Hook<Combobo
  * </ComboboxProvider>
  * ```
  */
-export declare const ComboboxCancel: import("../utils/types.js").Component<ComboboxCancelOptions<"button">>;
-export interface ComboboxCancelOptions<T extends As = "button"> extends ButtonOptions<T> {
+export declare const ComboboxCancel: (props: ComboboxCancelProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export interface ComboboxCancelOptions<T extends ElementType = TagName> extends ButtonOptions<T> {
     /**
      * Object returned by the
      * [`useComboboxStore`](https://ariakit.org/reference/use-combobox-store)
@@ -42,4 +45,5 @@ export interface ComboboxCancelOptions<T extends As = "button"> extends ButtonOp
      */
     store?: ComboboxStore;
 }
-export type ComboboxCancelProps<T extends As = "button"> = Props<ComboboxCancelOptions<T>>;
+export type ComboboxCancelProps<T extends ElementType = TagName> = Props<T, ComboboxCancelOptions<T>>;
+export {};

package/esm/combobox/combobox-cancel.js

@@ -1,23 +1,23 @@
 "use client";
 import {
   useButton
-} from "../__chunks/VDNZBO4W.js";
+} from "../__chunks/ID4VKXL5.js";
 import {
   useComboboxProviderContext
-} from "../__chunks/W76OTZCC.js";
-import "../__chunks/NWCBQ4CV.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";
+} from "../__chunks/UNDSQXBK.js";
+import "../__chunks/ZF6ZK5BT.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 {
-  createComponent,
   createElement,
-  createHook
-} from "../__chunks/3ORBWXWF.js";
+  createHook,
+  forwardRef
+} from "../__chunks/5M6RSQEC.js";
 import {
   useEvent
 } from "../__chunks/6O5OEQGF.js";
@@ -31,6 +31,7 @@ import {
 // src/combobox/combobox-cancel.tsx
 import { invariant } from "@ariakit/core/utils/misc";
 import { jsx, jsxs } from "react/jsx-runtime";
+var TagName = "button";
 var children = /* @__PURE__ */ jsxs(
   "svg",
   {
@@ -52,7 +53,7 @@ var children = /* @__PURE__ */ jsxs(
   }
 );
 var useComboboxCancel = createHook(
-  (_a) => {
+  function useComboboxCancel2(_a) {
     var _b = _a, { store } = _b, props = __objRest(_b, ["store"]);
     const context = useComboboxProviderContext();
     store = store || context;
@@ -86,15 +87,10 @@ var useComboboxCancel = createHook(
     return props;
   }
 );
-var ComboboxCancel = createComponent(
-  (props) => {
-    const htmlProps = useComboboxCancel(props);
-    return createElement("button", htmlProps);
-  }
-);
-if (process.env.NODE_ENV !== "production") {
-  ComboboxCancel.displayName = "ComboboxCancel";
-}
+var ComboboxCancel = forwardRef(function ComboboxCancel2(props) {
+  const htmlProps = useComboboxCancel(props);
+  return createElement(TagName, htmlProps);
+});
 export {
   ComboboxCancel,
   useComboboxCancel

package/esm/combobox/combobox-context.js

@@ -7,13 +7,13 @@ import {
   useComboboxContext,
   useComboboxProviderContext,
   useComboboxScopedContext
-} from "../__chunks/W76OTZCC.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/UNDSQXBK.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/combobox/combobox-disclosure.d.ts

@@ -1,6 +1,9 @@
+import type { ElementType } from "react";
 import type { DialogDisclosureOptions } from "../dialog/dialog-disclosure.js";
-import type { As, Props } from "../utils/types.js";
+import type { Props } from "../utils/types.js";
 import type { ComboboxStore } from "./combobox-store.js";
+declare const TagName = "button";
+type TagName = typeof TagName;
 /**
  * Returns props to create a `ComboboxDisclosure` component that toggles the
  * combobox popover visibility when clicked.
@@ -18,7 +21,7 @@ import type { ComboboxStore } from "./combobox-store.js";
  * </ComboboxPopover>
  * ```
  */
-export declare const useComboboxDisclosure: import("../utils/types.js").Hook<ComboboxDisclosureOptions<"button">>;
+export declare const useComboboxDisclosure: import("../utils/types.js").Hook<"button", ComboboxDisclosureOptions<"button">>;
 /**
  * Renders a combobox disclosure button that toggles the
  * [`ComboboxPopover`](https://ariakit.org/reference/combobox-popover) element's
@@ -41,8 +44,8 @@ export declare const useComboboxDisclosure: import("../utils/types.js").Hook<Com
  * </ComboboxProvider>
  * ```
  */
-export declare const ComboboxDisclosure: import("../utils/types.js").Component<ComboboxDisclosureOptions<"button">>;
-export interface ComboboxDisclosureOptions<T extends As = "button"> extends DialogDisclosureOptions<T> {
+export declare const ComboboxDisclosure: (props: ComboboxDisclosureProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export interface ComboboxDisclosureOptions<T extends ElementType = TagName> extends DialogDisclosureOptions<T> {
     /**
      * Object returned by the
      * [`useComboboxStore`](https://ariakit.org/reference/use-combobox-store)
@@ -52,4 +55,5 @@ export interface ComboboxDisclosureOptions<T extends As = "button"> extends Dial
      */
     store?: ComboboxStore;
 }
-export type ComboboxDisclosureProps<T extends As = "button"> = Props<ComboboxDisclosureOptions<T>>;
+export type ComboboxDisclosureProps<T extends ElementType = TagName> = Props<T, ComboboxDisclosureOptions<T>>;
+export {};

package/esm/combobox/combobox-disclosure.js

@@ -1,25 +1,25 @@
 "use client";
 import {
   useDialogDisclosure
-} from "../__chunks/H3TG2CZP.js";
-import "../__chunks/BHEJ6NUH.js";
-import "../__chunks/VDNZBO4W.js";
+} from "../__chunks/NNMCIH2I.js";
+import "../__chunks/TNUQLYBS.js";
+import "../__chunks/ID4VKXL5.js";
 import {
   useComboboxProviderContext
-} from "../__chunks/W76OTZCC.js";
-import "../__chunks/NWCBQ4CV.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";
+} from "../__chunks/UNDSQXBK.js";
+import "../__chunks/ZF6ZK5BT.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 {
-  createComponent,
   createElement,
-  createHook
-} from "../__chunks/3ORBWXWF.js";
+  createHook,
+  forwardRef
+} from "../__chunks/5M6RSQEC.js";
 import {
   useEvent
 } from "../__chunks/6O5OEQGF.js";
@@ -33,6 +33,7 @@ import {
 // src/combobox/combobox-disclosure.tsx
 import { invariant } from "@ariakit/core/utils/misc";
 import { jsx } from "react/jsx-runtime";
+var TagName = "button";
 var children = /* @__PURE__ */ jsx(
   "svg",
   {
@@ -50,54 +51,47 @@ var children = /* @__PURE__ */ jsx(
     children: /* @__PURE__ */ jsx("polyline", { points: "4,6 8,10 12,6" })
   }
 );
-var useComboboxDisclosure = createHook(
-  (_a) => {
-    var _b = _a, { store } = _b, props = __objRest(_b, ["store"]);
-    const context = useComboboxProviderContext();
-    store = store || context;
-    invariant(
-      store,
-      process.env.NODE_ENV !== "production" && "ComboboxDisclosure must receive a `store` prop or be wrapped in a ComboboxProvider component."
-    );
-    const onMouseDownProp = props.onMouseDown;
-    const onMouseDown = useEvent((event) => {
-      onMouseDownProp == null ? void 0 : onMouseDownProp(event);
-      event.preventDefault();
-      store == null ? void 0 : store.move(null);
-    });
-    const onClickProp = props.onClick;
-    const onClick = useEvent((event) => {
-      onClickProp == null ? void 0 : onClickProp(event);
-      if (event.defaultPrevented)
-        return;
-      if (!store)
-        return;
-      const { baseElement } = store.getState();
-      store.setDisclosureElement(baseElement);
-    });
-    const open = store.useState("open");
-    props = __spreadProps(__spreadValues({
-      children,
-      tabIndex: -1,
-      "aria-label": open ? "Hide popup" : "Show popup",
-      "aria-expanded": open
-    }, props), {
-      onMouseDown,
-      onClick
-    });
-    props = useDialogDisclosure(__spreadValues({ store }, props));
-    return props;
-  }
-);
-var ComboboxDisclosure = createComponent(
-  (props) => {
-    const htmlProps = useComboboxDisclosure(props);
-    return createElement("button", htmlProps);
-  }
-);
-if (process.env.NODE_ENV !== "production") {
-  ComboboxDisclosure.displayName = "ComboboxDisclosure";
-}
+var useComboboxDisclosure = createHook(function useComboboxDisclosure2(_a) {
+  var _b = _a, { store } = _b, props = __objRest(_b, ["store"]);
+  const context = useComboboxProviderContext();
+  store = store || context;
+  invariant(
+    store,
+    process.env.NODE_ENV !== "production" && "ComboboxDisclosure must receive a `store` prop or be wrapped in a ComboboxProvider component."
+  );
+  const onMouseDownProp = props.onMouseDown;
+  const onMouseDown = useEvent((event) => {
+    onMouseDownProp == null ? void 0 : onMouseDownProp(event);
+    event.preventDefault();
+    store == null ? void 0 : store.move(null);
+  });
+  const onClickProp = props.onClick;
+  const onClick = useEvent((event) => {
+    onClickProp == null ? void 0 : onClickProp(event);
+    if (event.defaultPrevented)
+      return;
+    if (!store)
+      return;
+    const { baseElement } = store.getState();
+    store.setDisclosureElement(baseElement);
+  });
+  const open = store.useState("open");
+  props = __spreadProps(__spreadValues({
+    children,
+    tabIndex: -1,
+    "aria-label": open ? "Hide popup" : "Show popup",
+    "aria-expanded": open
+  }, props), {
+    onMouseDown,
+    onClick
+  });
+  props = useDialogDisclosure(__spreadValues({ store }, props));
+  return props;
+});
+var ComboboxDisclosure = forwardRef(function ComboboxDisclosure2(props) {
+  const htmlProps = useComboboxDisclosure(props);
+  return createElement(TagName, htmlProps);
+});
 export {
   ComboboxDisclosure,
   useComboboxDisclosure