@ariakit/react-core 0.3.14 → 0.4.0

package/esm/menu/menu-dismiss.js

@@ -1,28 +1,28 @@
 "use client";
 import {
   useHovercardDismiss
-} from "../__chunks/FGMA3QUS.js";
+} from "../__chunks/CQJLVEBA.js";
 import {
   useMenuScopedContext
-} from "../__chunks/YGMEBI3A.js";
-import "../__chunks/KA4GX64Z.js";
-import "../__chunks/F6PRXTDU.js";
-import "../__chunks/NKXUN25E.js";
-import "../__chunks/VDNZBO4W.js";
-import "../__chunks/NWCBQ4CV.js";
-import "../__chunks/IB7YUKH5.js";
-import "../__chunks/4UUKJZ4V.js";
-import "../__chunks/TI7CMBHW.js";
-import "../__chunks/7H5KSHHF.js";
-import "../__chunks/G6BJYYBK.js";
-import "../__chunks/OAYFXAQ2.js";
-import "../__chunks/KK7H3W2B.js";
+} from "../__chunks/IG6NVGLB.js";
+import "../__chunks/VBF5EZBB.js";
+import "../__chunks/FY6FFKYI.js";
+import "../__chunks/G77JJQ4O.js";
+import "../__chunks/ID4VKXL5.js";
+import "../__chunks/ZF6ZK5BT.js";
+import "../__chunks/3D6OCOHF.js";
+import "../__chunks/MADQZZRL.js";
+import "../__chunks/TWDHCE7Y.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 "../__chunks/6O5OEQGF.js";
 import "../__chunks/XM66DUTO.js";
 import {
@@ -31,8 +31,9 @@ import {
 } from "../__chunks/4R3V3JGP.js";
 
 // src/menu/menu-dismiss.ts
+var TagName = "button";
 var useMenuDismiss = createHook(
-  (_a) => {
+  function useMenuDismiss2(_a) {
     var _b = _a, { store } = _b, props = __objRest(_b, ["store"]);
     const context = useMenuScopedContext();
     store = store || context;
@@ -40,13 +41,10 @@ var useMenuDismiss = createHook(
     return props;
   }
 );
-var MenuDismiss = createComponent((props) => {
+var MenuDismiss = forwardRef(function MenuDismiss2(props) {
   const htmlProps = useMenuDismiss(props);
-  return createElement("button", htmlProps);
+  return createElement(TagName, htmlProps);
 });
-if (process.env.NODE_ENV !== "production") {
-  MenuDismiss.displayName = "MenuDismiss";
-}
 export {
   MenuDismiss,
   useMenuDismiss

package/esm/menu/menu-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 { MenuStore } from "./menu-store.js";
+declare const TagName = "div";
+type TagName = typeof TagName;
 /**
  * Returns props to create a `MenuGroupLabel` component. This hook must be used
  * in a component that's wrapped with `MenuGroup` so the `aria-labelledby` prop
@@ -13,7 +16,7 @@ import type { MenuStore } from "./menu-store.js";
  * <Role {...props}>Label</Role>
  * ```
  */
-export declare const useMenuGroupLabel: import("../utils/types.js").Hook<MenuGroupLabelOptions<"div">>;
+export declare const useMenuGroupLabel: import("../utils/types.js").Hook<"div", MenuGroupLabelOptions<"div">>;
 /**
  * Renders a label in a menu group. This component should be wrapped with
  * [`MenuGroup`](https://ariakit.org/reference/menu-group) so the
@@ -33,8 +36,8 @@ export declare const useMenuGroupLabel: import("../utils/types.js").Hook<MenuGro
  * </MenuProvider>
  * ```
  */
-export declare const MenuGroupLabel: import("../utils/types.js").Component<MenuGroupLabelOptions<"div">>;
-export interface MenuGroupLabelOptions<T extends As = "div"> extends CompositeGroupLabelOptions<T> {
+export declare const MenuGroupLabel: (props: MenuGroupLabelProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export interface MenuGroupLabelOptions<T extends ElementType = TagName> extends CompositeGroupLabelOptions<T> {
     /**
      * Object returned by the
      * [`useMenuStore`](https://ariakit.org/reference/use-menu-store) hook. If not
@@ -44,4 +47,5 @@ export interface MenuGroupLabelOptions<T extends As = "div"> extends CompositeGr
      */
     store?: MenuStore;
 }
-export type MenuGroupLabelProps<T extends As = "div"> = Props<MenuGroupLabelOptions<T>>;
+export type MenuGroupLabelProps<T extends ElementType = TagName> = Props<T, MenuGroupLabelOptions<T>>;
+export {};

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

@@ -1,32 +1,30 @@
 "use client";
 import {
   useCompositeGroupLabel
-} from "../__chunks/5LK2LG7Q.js";
-import "../__chunks/NT7GEZQU.js";
+} from "../__chunks/ED7XMMMU.js";
+import "../__chunks/TH2YTBRW.js";
 import "../__chunks/3X3MDQGM.js";
 import {
-  createComponent,
   createElement,
-  createHook
-} from "../__chunks/3ORBWXWF.js";
+  createHook,
+  forwardRef
+} from "../__chunks/5M6RSQEC.js";
 import "../__chunks/6O5OEQGF.js";
 import "../__chunks/XM66DUTO.js";
 import "../__chunks/4R3V3JGP.js";
 
 // src/menu/menu-group-label.ts
-var useMenuGroupLabel = createHook((props) => {
-  props = useCompositeGroupLabel(props);
-  return props;
-});
-var MenuGroupLabel = createComponent(
-  (props) => {
-    const htmlProps = useMenuGroupLabel(props);
-    return createElement("div", htmlProps);
+var TagName = "div";
+var useMenuGroupLabel = createHook(
+  function useMenuGroupLabel2(props) {
+    props = useCompositeGroupLabel(props);
+    return props;
   }
 );
-if (process.env.NODE_ENV !== "production") {
-  MenuGroupLabel.displayName = "MenuGroupLabel";
-}
+var MenuGroupLabel = forwardRef(function MenuGroupLabel2(props) {
+  const htmlProps = useMenuGroupLabel(props);
+  return createElement(TagName, htmlProps);
+});
 export {
   MenuGroupLabel,
   useMenuGroupLabel

package/esm/menu/menu-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 { MenuStore } from "./menu-store.js";
+declare const TagName = "div";
+type TagName = typeof TagName;
 /**
  * Returns props to create a `MenuGroup` component.
  * @see https://ariakit.org/components/menu
@@ -18,7 +21,7 @@ import type { MenuStore } from "./menu-store.js";
  * </Menu>
  * ```
  */
-export declare const useMenuGroup: import("../utils/types.js").Hook<MenuGroupOptions<"div">>;
+export declare const useMenuGroup: import("../utils/types.js").Hook<"div", MenuGroupOptions<"div">>;
 /**
  * Renders a group for [`MenuItem`](https://ariakit.org/reference/menu-item)
  * elements. Optionally, a
@@ -39,8 +42,8 @@ export declare const useMenuGroup: import("../utils/types.js").Hook<MenuGroupOpt
  * </MenuProvider>
  * ```
  */
-export declare const MenuGroup: import("../utils/types.js").Component<MenuGroupOptions<"div">>;
-export interface MenuGroupOptions<T extends As = "div"> extends CompositeGroupOptions<T> {
+export declare const MenuGroup: (props: MenuGroupProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export interface MenuGroupOptions<T extends ElementType = TagName> extends CompositeGroupOptions<T> {
     /**
      * Object returned by the
      * [`useMenuStore`](https://ariakit.org/reference/use-menu-store) hook. If not
@@ -50,4 +53,5 @@ export interface MenuGroupOptions<T extends As = "div"> extends CompositeGroupOp
      */
     store?: MenuStore;
 }
-export type MenuGroupProps<T extends As = "div"> = Props<MenuGroupOptions<T>>;
+export type MenuGroupProps<T extends ElementType = TagName> = Props<T, MenuGroupOptions<T>>;
+export {};

package/esm/menu/menu-group.js

@@ -1,30 +1,30 @@
 "use client";
 import {
   useCompositeGroup
-} from "../__chunks/636A7WVS.js";
-import "../__chunks/R2QZ3KXH.js";
+} from "../__chunks/ZO6PSJHJ.js";
+import "../__chunks/CWDOOAGR.js";
 import "../__chunks/3X3MDQGM.js";
 import {
-  createComponent,
   createElement,
-  createHook
-} from "../__chunks/3ORBWXWF.js";
+  createHook,
+  forwardRef
+} from "../__chunks/5M6RSQEC.js";
 import "../__chunks/6O5OEQGF.js";
 import "../__chunks/XM66DUTO.js";
 import "../__chunks/4R3V3JGP.js";
 
 // src/menu/menu-group.ts
-var useMenuGroup = createHook((props) => {
-  props = useCompositeGroup(props);
-  return props;
-});
-var MenuGroup = createComponent((props) => {
+var TagName = "div";
+var useMenuGroup = createHook(
+  function useMenuGroup2(props) {
+    props = useCompositeGroup(props);
+    return props;
+  }
+);
+var MenuGroup = forwardRef(function MenuGroup2(props) {
   const htmlProps = useMenuGroup(props);
-  return createElement("div", htmlProps);
+  return createElement(TagName, htmlProps);
 });
-if (process.env.NODE_ENV !== "production") {
-  MenuGroup.displayName = "MenuGroup";
-}
 export {
   MenuGroup,
   useMenuGroup

package/esm/menu/menu-heading.d.ts

@@ -1,6 +1,9 @@
+import type { ElementType } from "react";
 import type { HovercardHeadingOptions } from "../hovercard/hovercard-heading.js";
-import type { As, Props } from "../utils/types.js";
+import type { Props } from "../utils/types.js";
 import type { MenuStore } from "./menu-store.js";
+declare const TagName = "h1";
+type TagName = typeof TagName;
 /**
  * Returns props to create a `MenuHeading` component. This hook must be used in
  * a component that's wrapped with `Menu` so the `aria-labelledby` prop is
@@ -13,7 +16,7 @@ import type { MenuStore } from "./menu-store.js";
  * <Role {...props}>Heading</Role>
  * ```
  */
-export declare const useMenuHeading: import("../utils/types.js").Hook<MenuHeadingOptions<"h1">>;
+export declare const useMenuHeading: import("../utils/types.js").Hook<"h1", MenuHeadingOptions<"h1">>;
 /**
  * Renders a heading in a menu. This component must be wrapped within
  * [`Menu`](https://ariakit.org/reference/menu) so the `aria-labelledby` prop is
@@ -28,8 +31,8 @@ export declare const useMenuHeading: import("../utils/types.js").Hook<MenuHeadin
  * </MenuProvider>
  * ```
  */
-export declare const MenuHeading: import("../utils/types.js").Component<MenuHeadingOptions<"h1">>;
-export interface MenuHeadingOptions<T extends As = "h1"> extends HovercardHeadingOptions<T> {
+export declare const MenuHeading: (props: MenuHeadingProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export interface MenuHeadingOptions<T extends ElementType = TagName> extends HovercardHeadingOptions<T> {
     /**
      * Object returned by the
      * [`useMenuStore`](https://ariakit.org/reference/use-menu-store) hook. If not
@@ -39,4 +42,5 @@ export interface MenuHeadingOptions<T extends As = "h1"> extends HovercardHeadin
      */
     store?: MenuStore;
 }
-export type MenuHeadingProps<T extends As = "h1"> = Props<MenuHeadingOptions<T>>;
+export type MenuHeadingProps<T extends ElementType = TagName> = Props<T, MenuHeadingOptions<T>>;
+export {};

package/esm/menu/menu-heading.js

@@ -1,34 +1,34 @@
 "use client";
 import {
   useHovercardHeading
-} from "../__chunks/6N2ESJUH.js";
-import "../__chunks/RJDEYIKS.js";
-import "../__chunks/XHRZYRZ5.js";
-import "../__chunks/P4FX6ZFL.js";
+} from "../__chunks/IBZ5GRML.js";
+import "../__chunks/ZXBIDNZ3.js";
+import "../__chunks/E47ASM2Y.js";
+import "../__chunks/7HFLDZTS.js";
 import "../__chunks/XPF5GU3Q.js";
-import "../__chunks/G6BJYYBK.js";
-import "../__chunks/OAYFXAQ2.js";
+import "../__chunks/XXVAHUAO.js";
+import "../__chunks/J55AVALY.js";
 import {
-  createComponent,
   createElement,
-  createHook
-} from "../__chunks/3ORBWXWF.js";
+  createHook,
+  forwardRef
+} from "../__chunks/5M6RSQEC.js";
 import "../__chunks/6O5OEQGF.js";
 import "../__chunks/XM66DUTO.js";
 import "../__chunks/4R3V3JGP.js";
 
 // src/menu/menu-heading.ts
-var useMenuHeading = createHook((props) => {
-  props = useHovercardHeading(props);
-  return props;
-});
-var MenuHeading = createComponent((props) => {
+var TagName = "h1";
+var useMenuHeading = createHook(
+  function useMenuHeading2(props) {
+    props = useHovercardHeading(props);
+    return props;
+  }
+);
+var MenuHeading = forwardRef(function MenuHeading2(props) {
   const htmlProps = useMenuHeading(props);
-  return createElement("h1", htmlProps);
+  return createElement(TagName, htmlProps);
 });
-if (process.env.NODE_ENV !== "production") {
-  MenuHeading.displayName = "MenuHeading";
-}
 export {
   MenuHeading,
   useMenuHeading

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

@@ -1,6 +1,9 @@
+import type { ElementType } from "react";
 import type { CheckboxCheckOptions } from "../checkbox/checkbox-check.js";
-import type { As, Props } from "../utils/types.js";
+import type { Props } from "../utils/types.js";
 import type { MenuStore } from "./menu-store.js";
+declare const TagName = "span";
+type TagName = typeof TagName;
 /**
  * Returns props to create a `MenuItemCheck` component.
  * @see https://ariakit.org/components/menu
@@ -10,7 +13,7 @@ import type { MenuStore } from "./menu-store.js";
  * <Role {...props} />
  * ```
  */
-export declare const useMenuItemCheck: import("../utils/types.js").Hook<MenuItemCheckOptions<"span">>;
+export declare const useMenuItemCheck: import("../utils/types.js").Hook<"span", MenuItemCheckOptions<"span">>;
 /**
  * Renders a checkmark icon when the
  * [`checked`](https://ariakit.org/reference/menu-item-check#checked) prop is
@@ -39,12 +42,13 @@ export declare const useMenuItemCheck: import("../utils/types.js").Hook<MenuItem
  * </MenuProvider>
  * ```
  */
-export declare const MenuItemCheck: import("../utils/types.js").Component<MenuItemCheckOptions<"span">>;
-export interface MenuItemCheckOptions<T extends As = "span"> extends Omit<CheckboxCheckOptions<T>, "store"> {
+export declare const MenuItemCheck: (props: MenuItemCheckProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export interface MenuItemCheckOptions<T extends ElementType = TagName> extends Omit<CheckboxCheckOptions<T>, "store"> {
     /**
      * Object returned by the
      * [`useMenuStore`](https://ariakit.org/reference/use-menu-store) hook.
      */
     store?: MenuStore;
 }
-export type MenuItemCheckProps<T extends As = "span"> = Props<MenuItemCheckOptions<T>>;
+export type MenuItemCheckProps<T extends ElementType = TagName> = Props<T, MenuItemCheckOptions<T>>;
+export {};

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

@@ -1,23 +1,23 @@
 "use client";
 import {
   MenuItemCheckedContext
-} from "../__chunks/YGMEBI3A.js";
-import "../__chunks/KA4GX64Z.js";
+} from "../__chunks/IG6NVGLB.js";
+import "../__chunks/VBF5EZBB.js";
 import {
   useCheckboxCheck
-} from "../__chunks/MW2F7SEA.js";
+} from "../__chunks/BX7FFG2R.js";
 import "../__chunks/6XBVQI3K.js";
-import "../__chunks/IB7YUKH5.js";
-import "../__chunks/4UUKJZ4V.js";
-import "../__chunks/TI7CMBHW.js";
-import "../__chunks/7H5KSHHF.js";
-import "../__chunks/G6BJYYBK.js";
-import "../__chunks/OAYFXAQ2.js";
+import "../__chunks/3D6OCOHF.js";
+import "../__chunks/MADQZZRL.js";
+import "../__chunks/TWDHCE7Y.js";
+import "../__chunks/TE637IA7.js";
+import "../__chunks/XXVAHUAO.js";
+import "../__chunks/J55AVALY.js";
 import {
-  createComponent,
   createElement,
-  createHook
-} from "../__chunks/3ORBWXWF.js";
+  createHook,
+  forwardRef
+} from "../__chunks/5M6RSQEC.js";
 import "../__chunks/6O5OEQGF.js";
 import "../__chunks/XM66DUTO.js";
 import {
@@ -28,8 +28,9 @@ import {
 
 // src/menu/menu-item-check.ts
 import { useContext } from "react";
+var TagName = "span";
 var useMenuItemCheck = createHook(
-  (_a) => {
+  function useMenuItemCheck2(_a) {
     var _b = _a, { store, checked } = _b, props = __objRest(_b, ["store", "checked"]);
     const context = useContext(MenuItemCheckedContext);
     checked = checked != null ? checked : context;
@@ -37,13 +38,10 @@ var useMenuItemCheck = createHook(
     return props;
   }
 );
-var MenuItemCheck = createComponent((props) => {
+var MenuItemCheck = forwardRef(function MenuItemCheck2(props) {
   const htmlProps = useMenuItemCheck(props);
-  return createElement("span", htmlProps);
+  return createElement(TagName, htmlProps);
 });
-if (process.env.NODE_ENV !== "production") {
-  MenuItemCheck.displayName = "MenuItemCheck";
-}
 export {
   MenuItemCheck,
   useMenuItemCheck

package/esm/menu/menu-item-checkbox.d.ts

@@ -1,7 +1,10 @@
+import type { ElementType } from "react";
 import type { CheckboxOptions } from "../checkbox/checkbox.js";
-import type { As, Props } from "../utils/types.js";
+import type { Props } from "../utils/types.js";
 import type { MenuItemOptions } from "./menu-item.js";
 import type { MenuStore } from "./menu-store.js";
+declare const TagName = "div";
+type TagName = typeof TagName;
 /**
  * Returns props to create a `MenuItemCheckbox` component.
  * @see https://ariakit.org/components/menu
@@ -15,7 +18,7 @@ import type { MenuStore } from "./menu-store.js";
  * </Menu>
  * ```
  */
-export declare const useMenuItemCheckbox: import("../utils/types.js").Hook<MenuItemCheckboxOptions<"div">>;
+export declare const useMenuItemCheckbox: import("../utils/types.js").Hook<"div", MenuItemCheckboxOptions<"div">>;
 /**
  * Renders a [`menuitemcheckbox`](https://w3c.github.io/aria/#menuitemcheckbox)
  * element within a [`Menu`](https://ariakit.org/reference/menu) component. The
@@ -58,8 +61,8 @@ export declare const useMenuItemCheckbox: import("../utils/types.js").Hook<MenuI
  * </MenuProvider>
  * ```
  */
-export declare const MenuItemCheckbox: import("../utils/types.js").Component<MenuItemCheckboxOptions<"div">>;
-export interface MenuItemCheckboxOptions<T extends As = "div"> extends MenuItemOptions<T>, Omit<CheckboxOptions<T>, "store"> {
+export declare const MenuItemCheckbox: (props: MenuItemCheckboxProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export interface MenuItemCheckboxOptions<T extends ElementType = TagName> extends MenuItemOptions<T>, Omit<CheckboxOptions<T>, "store"> {
     /**
      * Object returned by the
      * [`useMenuStore`](https://ariakit.org/reference/use-menu-store) hook. If not
@@ -93,4 +96,5 @@ export interface MenuItemCheckboxOptions<T extends As = "div"> extends MenuItemO
      */
     hideOnClick?: MenuItemOptions<T>["hideOnClick"];
 }
-export type MenuItemCheckboxProps<T extends As = "div"> = Props<MenuItemCheckboxOptions<T>>;
+export type MenuItemCheckboxProps<T extends ElementType = TagName> = Props<T, MenuItemCheckboxOptions<T>>;
+export {};

package/esm/menu/menu-item-checkbox.js

@@ -4,34 +4,35 @@ import {
 } from "../__chunks/JIZ5C2JK.js";
 import {
   useCheckbox
-} from "../__chunks/3AHQ6JCP.js";
-import "../__chunks/VPR2WHQV.js";
+} from "../__chunks/3PDOEITM.js";
+import "../__chunks/EUN6HFWO.js";
 import {
   useMenuItem
-} from "../__chunks/Y6467XPW.js";
+} from "../__chunks/IU2VX2AY.js";
 import {
   useMenuScopedContext
-} from "../__chunks/YGMEBI3A.js";
-import "../__chunks/KA4GX64Z.js";
-import "../__chunks/G6ONQ5EH.js";
+} from "../__chunks/IG6NVGLB.js";
+import "../__chunks/VBF5EZBB.js";
+import "../__chunks/WL6TTPTB.js";
 import "../__chunks/6XBVQI3K.js";
-import "../__chunks/QZLXIDNP.js";
-import "../__chunks/NWCBQ4CV.js";
-import "../__chunks/UH3I23HL.js";
+import "../__chunks/VVLSOSIG.js";
+import "../__chunks/ZF6ZK5BT.js";
+import "../__chunks/7YKLTEOQ.js";
 import "../__chunks/3IEDWLST.js";
-import "../__chunks/IB7YUKH5.js";
-import "../__chunks/4UUKJZ4V.js";
-import "../__chunks/TI7CMBHW.js";
-import "../__chunks/7H5KSHHF.js";
-import "../__chunks/G6BJYYBK.js";
-import "../__chunks/OAYFXAQ2.js";
-import "../__chunks/KK7H3W2B.js";
+import "../__chunks/3D6OCOHF.js";
+import "../__chunks/MADQZZRL.js";
+import "../__chunks/TWDHCE7Y.js";
+import "../__chunks/TE637IA7.js";
+import "../__chunks/XXVAHUAO.js";
+import "../__chunks/J55AVALY.js";
+import "../__chunks/VA234QKF.js";
 import "../__chunks/SHA3WOPI.js";
 import {
   createElement,
   createHook,
-  createMemoComponent
-} from "../__chunks/3ORBWXWF.js";
+  forwardRef,
+  memo
+} from "../__chunks/5M6RSQEC.js";
 import "../__chunks/EKQEJRUF.js";
 import {
   useInitialValue
@@ -45,6 +46,7 @@ import {
 // src/menu/menu-item-checkbox.ts
 import { useEffect } from "react";
 import { invariant, shallowEqual } from "@ariakit/core/utils/misc";
+var TagName = "div";
 function getPrimitiveValue(value) {
   if (Array.isArray(value)) {
     return value.toString();
@@ -73,7 +75,7 @@ function getValue(storeValue, value, checked) {
   return storeValue.filter((v) => v !== primitiveValue);
 }
 var useMenuItemCheckbox = createHook(
-  (_a) => {
+  function useMenuItemCheckbox2(_a) {
     var _b = _a, {
       store,
       name,
@@ -140,15 +142,12 @@ var useMenuItemCheckbox = createHook(
     return props;
   }
 );
-var MenuItemCheckbox = createMemoComponent(
-  (props) => {
+var MenuItemCheckbox = memo(
+  forwardRef(function MenuItemCheckbox2(props) {
     const htmlProps = useMenuItemCheckbox(props);
-    return createElement("div", htmlProps);
-  }
+    return createElement(TagName, htmlProps);
+  })
 );
-if (process.env.NODE_ENV !== "production") {
-  MenuItemCheckbox.displayName = "MenuItemCheckbox";
-}
 export {
   MenuItemCheckbox,
   useMenuItemCheckbox

package/esm/menu/menu-item-radio.d.ts

@@ -1,7 +1,10 @@
+import type { ElementType } from "react";
 import type { RadioOptions } from "../radio/radio.js";
-import type { As, Props } from "../utils/types.js";
+import type { Props } from "../utils/types.js";
 import type { MenuItemOptions } from "./menu-item.js";
 import type { MenuStore } from "./menu-store.js";
+declare const TagName = "div";
+type TagName = typeof TagName;
 /**
  * Returns props to create a `MenuItemRadio` component.
  * @see https://ariakit.org/components/menu
@@ -17,7 +20,7 @@ import type { MenuStore } from "./menu-store.js";
  * </Menu>
  * ```
  */
-export declare const useMenuItemRadio: import("../utils/types.js").Hook<MenuItemRadioOptions<"div">>;
+export declare const useMenuItemRadio: import("../utils/types.js").Hook<"div", MenuItemRadioOptions<"div">>;
 /**
  * Renders a [`menuitemradio`](https://w3c.github.io/aria/#menuitemradio)
  * element within a [`Menu`](https://ariakit.org/reference/menu) component. The
@@ -45,8 +48,8 @@ export declare const useMenuItemRadio: import("../utils/types.js").Hook<MenuItem
  * </MenuProvider>
  * ```
  */
-export declare const MenuItemRadio: import("../utils/types.js").Component<MenuItemRadioOptions<"div">>;
-export interface MenuItemRadioOptions<T extends As = "div"> extends MenuItemOptions<T>, Omit<RadioOptions<T>, "store"> {
+export declare const MenuItemRadio: (props: MenuItemRadioProps) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export interface MenuItemRadioOptions<T extends ElementType = TagName> extends MenuItemOptions<T>, Omit<RadioOptions<T>, "store"> {
     /**
      * Object returned by the
      * [`useMenuStore`](https://ariakit.org/reference/use-menu-store) hook. If not
@@ -80,4 +83,5 @@ export interface MenuItemRadioOptions<T extends As = "div"> extends MenuItemOpti
      */
     hideOnClick?: MenuItemOptions<T>["hideOnClick"];
 }
-export type MenuItemRadioProps<T extends As = "div"> = Props<MenuItemRadioOptions<T>>;
+export type MenuItemRadioProps<T extends ElementType = TagName> = Props<T, MenuItemRadioOptions<T>>;
+export {};