@ariakit/react-core 0.3.3 → 0.3.5

package/cjs/menu/menu-group.cjs

@@ -1,25 +1,26 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
 
-var _7VE7IIRWcjs = require('../__chunks/7VE7IIRW.cjs');
-require('../__chunks/ZMSJUL55.cjs');
-require('../__chunks/K56WQU76.cjs');
 
+var _5NKFHQZ2cjs = require('../__chunks/5NKFHQZ2.cjs');
+require('../__chunks/4NC3T4TV.cjs');
+require('../__chunks/FE3YCURH.cjs');
 
 
 
-var _Z5PUIG6Acjs = require('../__chunks/Z5PUIG6A.cjs');
-require('../__chunks/5WLTMVVQ.cjs');
-require('../__chunks/7WUTS26Y.cjs');
-require('../__chunks/72I2GWXF.cjs');
+
+var _VKYTJKYNcjs = require('../__chunks/VKYTJKYN.cjs');
+require('../__chunks/JTVNRMAC.cjs');
+require('../__chunks/LNE2FWJO.cjs');
+require('../__chunks/WYXAWBLE.cjs');
 
 // src/menu/menu-group.ts
-var useMenuGroup = _Z5PUIG6Acjs.createHook.call(void 0, (props) => {
-  props = _7VE7IIRWcjs.useCompositeGroup.call(void 0, props);
+var useMenuGroup = _VKYTJKYNcjs.createHook.call(void 0, (props) => {
+  props = _5NKFHQZ2cjs.useCompositeGroup.call(void 0, props);
   return props;
 });
-var MenuGroup = _Z5PUIG6Acjs.createComponent.call(void 0, (props) => {
+var MenuGroup = _VKYTJKYNcjs.createComponent.call(void 0, (props) => {
   const htmlProps = useMenuGroup(props);
-  return _Z5PUIG6Acjs.createElement.call(void 0, "div", htmlProps);
+  return _VKYTJKYNcjs.createElement.call(void 0, "div", htmlProps);
 });
 if (process.env.NODE_ENV !== "production") {
   MenuGroup.displayName = "MenuGroup";

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

@@ -0,0 +1,50 @@
+import type { CompositeGroupOptions } from "../composite/composite-group.js";
+import type { As, Props } from "../utils/types.js";
+import type { MenuStore } from "./menu-store.js";
+/**
+ * Returns props to create a `MenuGroup` component.
+ * @see https://ariakit.org/components/menu
+ * @example
+ * ```jsx
+ * const store = useMenuStore();
+ * const props = useMenuGroup({ store });
+ * <MenuButton store={store}>Recent Items</MenuButton>
+ * <Menu store={store}>
+ *   <Role {...props}>
+ *     <MenuGroupLabel>Applications</MenuGroupLabel>
+ *     <MenuItem>Google Chrome.app</MenuItem>
+ *     <MenuItem>Safari.app</MenuItem>
+ *   </Role>
+ * </Menu>
+ * ```
+ */
+export declare const useMenuGroup: import("../utils/types.js").Hook<MenuGroupOptions<"div">>;
+/**
+ * Renders a menu group inside a menu.
+ * @see https://ariakit.org/components/menu
+ * @example
+ * ```jsx
+ * <MenuProvider>
+ *   <MenuButton>Recent Items</MenuButton>
+ *   <Menu>
+ *     <MenuGroup>
+ *       <MenuGroupLabel>Applications</MenuGroupLabel>
+ *       <MenuItem>Google Chrome.app</MenuItem>
+ *       <MenuItem>Safari.app</MenuItem>
+ *     </MenuGroup>
+ *   </Menu>
+ * </MenuProvider>
+ * ```
+ */
+export declare const MenuGroup: import("../utils/types.js").Component<MenuGroupOptions<"div">>;
+export interface MenuGroupOptions<T extends As = "div"> extends CompositeGroupOptions<T> {
+    /**
+     * Object returned by the
+     * [`useMenuStore`](https://ariakit.org/reference/use-menu-store) hook. If not
+     * provided, the closest [`Menu`](https://ariakit.org/reference/menu) or
+     * [`MenuProvider`](https://ariakit.org/reference/menu-provider) components'
+     * context will be used.
+     */
+    store?: MenuStore;
+}
+export type MenuGroupProps<T extends As = "div"> = Props<MenuGroupOptions<T>>;

package/cjs/menu/menu-heading.cjs

@@ -1,29 +1,30 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
 
-var _OKMDKM3Mcjs = require('../__chunks/OKMDKM3M.cjs');
-require('../__chunks/4YBHDRLG.cjs');
-require('../__chunks/SW2AH2YO.cjs');
-require('../__chunks/FGAN5BEK.cjs');
-require('../__chunks/CQSUIL2D.cjs');
-require('../__chunks/W6ZRSMO5.cjs');
-require('../__chunks/A2NMYLCG.cjs');
 
+var _L2N2X3HZcjs = require('../__chunks/L2N2X3HZ.cjs');
+require('../__chunks/HSIFMSHW.cjs');
+require('../__chunks/VSO45UA5.cjs');
+require('../__chunks/3BMU6SYC.cjs');
+require('../__chunks/2BIO7R5N.cjs');
+require('../__chunks/QKKT6RXX.cjs');
+require('../__chunks/SMKW5GKS.cjs');
 
 
 
-var _Z5PUIG6Acjs = require('../__chunks/Z5PUIG6A.cjs');
-require('../__chunks/5WLTMVVQ.cjs');
-require('../__chunks/7WUTS26Y.cjs');
-require('../__chunks/72I2GWXF.cjs');
+
+var _VKYTJKYNcjs = require('../__chunks/VKYTJKYN.cjs');
+require('../__chunks/JTVNRMAC.cjs');
+require('../__chunks/LNE2FWJO.cjs');
+require('../__chunks/WYXAWBLE.cjs');
 
 // src/menu/menu-heading.ts
-var useMenuHeading = _Z5PUIG6Acjs.createHook.call(void 0, (props) => {
-  props = _OKMDKM3Mcjs.useHovercardHeading.call(void 0, props);
+var useMenuHeading = _VKYTJKYNcjs.createHook.call(void 0, (props) => {
+  props = _L2N2X3HZcjs.useHovercardHeading.call(void 0, props);
   return props;
 });
-var MenuHeading = _Z5PUIG6Acjs.createComponent.call(void 0, (props) => {
+var MenuHeading = _VKYTJKYNcjs.createComponent.call(void 0, (props) => {
   const htmlProps = useMenuHeading(props);
-  return _Z5PUIG6Acjs.createElement.call(void 0, "h1", htmlProps);
+  return _VKYTJKYNcjs.createElement.call(void 0, "h1", htmlProps);
 });
 if (process.env.NODE_ENV !== "production") {
   MenuHeading.displayName = "MenuHeading";

package/cjs/menu/menu-heading.d.cts

@@ -0,0 +1,41 @@
+import type { HovercardHeadingOptions } from "../hovercard/hovercard-heading.js";
+import type { As, Props } from "../utils/types.js";
+import type { MenuStore } from "./menu-store.js";
+/**
+ * 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
+ * properly set on the menu element.
+ * @see https://ariakit.org/components/menu
+ * @example
+ * ```jsx
+ * // This component must be wrapped with Menu
+ * const props = useMenuHeading();
+ * <Role {...props}>Heading</Role>
+ * ```
+ */
+export declare const useMenuHeading: import("../utils/types.js").Hook<MenuHeadingOptions<"h1">>;
+/**
+ * Renders a heading in a menu. This component must be wrapped with `Menu` so
+ * the `aria-labelledby` prop is properly set on the menu element.
+ * @see https://ariakit.org/components/menu
+ * @example
+ * ```jsx
+ * <MenuProvider>
+ *   <Menu>
+ *     <MenuHeading>Heading</MenuHeading>
+ *   </Menu>
+ * </MenuProvider>
+ * ```
+ */
+export declare const MenuHeading: import("../utils/types.js").Component<MenuHeadingOptions<"h1">>;
+export interface MenuHeadingOptions<T extends As = "h1"> extends HovercardHeadingOptions<T> {
+    /**
+     * Object returned by the
+     * [`useMenuStore`](https://ariakit.org/reference/use-menu-store) hook. If not
+     * provided, the closest [`Menu`](https://ariakit.org/reference/menu) or
+     * [`MenuProvider`](https://ariakit.org/reference/menu-provider) components'
+     * context will be used.
+     */
+    store?: MenuStore;
+}
+export type MenuHeadingProps<T extends As = "h1"> = Props<MenuHeadingOptions<T>>;

package/cjs/menu/menu-item-check.cjs

@@ -1,43 +1,44 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
 
-var _6RYSMHQYcjs = require('../__chunks/6RYSMHQY.cjs');
 
+var _YRDDHZT7cjs = require('../__chunks/YRDDHZT7.cjs');
 
-var _P4F26HLTcjs = require('../__chunks/P4F26HLT.cjs');
-require('../__chunks/FO6MB5HF.cjs');
-require('../__chunks/H7R5D2FR.cjs');
-require('../__chunks/NHZBX2RS.cjs');
-require('../__chunks/Q6W7IWNJ.cjs');
-require('../__chunks/AKOG5S2T.cjs');
-require('../__chunks/W6ZRSMO5.cjs');
-require('../__chunks/A2NMYLCG.cjs');
 
+var _Q4NPNRJZcjs = require('../__chunks/Q4NPNRJZ.cjs');
+require('../__chunks/ERFHNHON.cjs');
+require('../__chunks/FQGSRSYD.cjs');
+require('../__chunks/JVORNAMD.cjs');
+require('../__chunks/ORT5QOHH.cjs');
+require('../__chunks/KZA6P235.cjs');
+require('../__chunks/QKKT6RXX.cjs');
+require('../__chunks/SMKW5GKS.cjs');
 
 
 
-var _Z5PUIG6Acjs = require('../__chunks/Z5PUIG6A.cjs');
-require('../__chunks/5WLTMVVQ.cjs');
-require('../__chunks/7WUTS26Y.cjs');
 
+var _VKYTJKYNcjs = require('../__chunks/VKYTJKYN.cjs');
+require('../__chunks/JTVNRMAC.cjs');
+require('../__chunks/LNE2FWJO.cjs');
 
 
 
-var _72I2GWXFcjs = require('../__chunks/72I2GWXF.cjs');
+
+var _WYXAWBLEcjs = require('../__chunks/WYXAWBLE.cjs');
 
 // src/menu/menu-item-check.ts
 var _react = require('react');
-var useMenuItemCheck = _Z5PUIG6Acjs.createHook.call(void 0, 
+var useMenuItemCheck = _VKYTJKYNcjs.createHook.call(void 0, 
   (_a) => {
-    var _b = _a, { store, checked } = _b, props = _72I2GWXFcjs.__objRest.call(void 0, _b, ["store", "checked"]);
-    const context = _react.useContext.call(void 0, _6RYSMHQYcjs.MenuItemCheckedContext);
+    var _b = _a, { store, checked } = _b, props = _WYXAWBLEcjs.__objRest.call(void 0, _b, ["store", "checked"]);
+    const context = _react.useContext.call(void 0, _YRDDHZT7cjs.MenuItemCheckedContext);
     checked = checked != null ? checked : context;
-    props = _P4F26HLTcjs.useCheckboxCheck.call(void 0, _72I2GWXFcjs.__spreadProps.call(void 0, _72I2GWXFcjs.__spreadValues.call(void 0, {}, props), { checked }));
+    props = _Q4NPNRJZcjs.useCheckboxCheck.call(void 0, _WYXAWBLEcjs.__spreadProps.call(void 0, _WYXAWBLEcjs.__spreadValues.call(void 0, {}, props), { checked }));
     return props;
   }
 );
-var MenuItemCheck = _Z5PUIG6Acjs.createComponent.call(void 0, (props) => {
+var MenuItemCheck = _VKYTJKYNcjs.createComponent.call(void 0, (props) => {
   const htmlProps = useMenuItemCheck(props);
-  return _Z5PUIG6Acjs.createElement.call(void 0, "span", htmlProps);
+  return _VKYTJKYNcjs.createElement.call(void 0, "span", htmlProps);
 });
 if (process.env.NODE_ENV !== "production") {
   MenuItemCheck.displayName = "MenuItemCheck";

package/cjs/menu/menu-item-check.d.cts

@@ -0,0 +1,44 @@
+import type { CheckboxCheckOptions } from "../checkbox/checkbox-check.js";
+import type { As, Props } from "../utils/types.js";
+import type { MenuStore } from "./menu-store.js";
+/**
+ * Returns props to create a `MenuItemCheck` component.
+ * @see https://ariakit.org/components/menu
+ * @example
+ * ```jsx
+ * const props = useMenuItemCheck({ checked: true });
+ * <Role {...props} />
+ * ```
+ */
+export declare const useMenuItemCheck: import("../utils/types.js").Hook<MenuItemCheckOptions<"span">>;
+/**
+ * Renders a checkmark inside a `MenuItemCheckbox` or `MenuItemRadio`
+ * components. This component must be wrapped with one of those components or
+ * the `checked` prop must be explicitly passed to the component.
+ * @see https://ariakit.org/components/menu
+ * @example
+ * ```jsx
+ * <MenuProvider defaultValues={{ apple: true, orange: false }}>
+ *   <MenuButton>Fruits</MenuButton>
+ *   <Menu>
+ *     <MenuItemCheckbox name="apple">
+ *       <MenuItemCheck />
+ *       Apple
+ *     </MenuItemCheckbox>
+ *     <MenuItemCheckbox name="orange">
+ *       <MenuItemCheck />
+ *       Orange
+ *     </MenuItemCheckbox>
+ *   </Menu>
+ * </MenuProvider>
+ * ```
+ */
+export declare const MenuItemCheck: import("../utils/types.js").Component<MenuItemCheckOptions<"span">>;
+export interface MenuItemCheckOptions<T extends As = "span"> 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>>;

package/cjs/menu/menu-item-checkbox.cjs

@@ -1,71 +1,149 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
 
-var _H562FOJ4cjs = require('../__chunks/H562FOJ4.cjs');
 
+var _UL3EZVAKcjs = require('../__chunks/UL3EZVAK.cjs');
 
-var _ORDLD4QXcjs = require('../__chunks/ORDLD4QX.cjs');
-require('../__chunks/NER6RNCQ.cjs');
 
+var _QXQFY7FWcjs = require('../__chunks/QXQFY7FW.cjs');
+require('../__chunks/KU7YLZWT.cjs');
 
-var _BMAPXRQVcjs = require('../__chunks/BMAPXRQV.cjs');
-require('../__chunks/KFXK3MNI.cjs');
 
+var _OQTZAPK7cjs = require('../__chunks/OQTZAPK7.cjs');
+require('../__chunks/6HAYK3MK.cjs');
 
-var _6RYSMHQYcjs = require('../__chunks/6RYSMHQY.cjs');
-require('../__chunks/LPFT4ZFH.cjs');
-require('../__chunks/FO6MB5HF.cjs');
-require('../__chunks/D3SPQ2OY.cjs');
-require('../__chunks/FXRXBA2Y.cjs');
-require('../__chunks/FMI5QF7N.cjs');
-require('../__chunks/KLZID3QO.cjs');
-require('../__chunks/H7R5D2FR.cjs');
-require('../__chunks/NHZBX2RS.cjs');
-require('../__chunks/Q6W7IWNJ.cjs');
-require('../__chunks/AKOG5S2T.cjs');
-require('../__chunks/W6ZRSMO5.cjs');
-require('../__chunks/A2NMYLCG.cjs');
-require('../__chunks/GQAB4M3B.cjs');
-require('../__chunks/LHHW5ZQP.cjs');
 
+var _YRDDHZT7cjs = require('../__chunks/YRDDHZT7.cjs');
+require('../__chunks/QWH4QBHA.cjs');
+require('../__chunks/ERFHNHON.cjs');
+require('../__chunks/H2TTW65Q.cjs');
+require('../__chunks/F7HB6RYG.cjs');
+require('../__chunks/HY2NPBHW.cjs');
+require('../__chunks/RV3PHHWM.cjs');
+require('../__chunks/FQGSRSYD.cjs');
+require('../__chunks/JVORNAMD.cjs');
+require('../__chunks/ORT5QOHH.cjs');
+require('../__chunks/KZA6P235.cjs');
+require('../__chunks/QKKT6RXX.cjs');
+require('../__chunks/SMKW5GKS.cjs');
+require('../__chunks/7ARL6QHN.cjs');
+require('../__chunks/75KXQZJX.cjs');
 
 
 
-var _Z5PUIG6Acjs = require('../__chunks/Z5PUIG6A.cjs');
-require('../__chunks/UHRHLHM2.cjs');
-require('../__chunks/5WLTMVVQ.cjs');
-require('../__chunks/7WUTS26Y.cjs');
 
+var _VKYTJKYNcjs = require('../__chunks/VKYTJKYN.cjs');
+require('../__chunks/WLJVTO7A.cjs');
 
 
-var _72I2GWXFcjs = require('../__chunks/72I2GWXF.cjs');
+var _JTVNRMACcjs = require('../__chunks/JTVNRMAC.cjs');
+require('../__chunks/LNE2FWJO.cjs');
+
+
+
+var _WYXAWBLEcjs = require('../__chunks/WYXAWBLE.cjs');
 
 // src/menu/menu-item-checkbox.ts
+var _react = require('react');
 var _misc = require('@ariakit/core/utils/misc');
-var useMenuItemCheckbox = _Z5PUIG6Acjs.createHook.call(void 0, 
+function getPrimitiveValue(value) {
+  if (Array.isArray(value)) {
+    return value.toString();
+  }
+  return value;
+}
+function getValue(storeValue, value, checked) {
+  if (value === void 0) {
+    if (Array.isArray(storeValue))
+      return storeValue;
+    return !!checked;
+  }
+  const primitiveValue = getPrimitiveValue(value);
+  if (!Array.isArray(storeValue)) {
+    if (checked) {
+      return primitiveValue;
+    }
+    return storeValue === primitiveValue ? false : storeValue;
+  }
+  if (checked) {
+    if (storeValue.includes(primitiveValue)) {
+      return storeValue;
+    }
+    return [...storeValue, primitiveValue];
+  }
+  return storeValue.filter((v) => v !== primitiveValue);
+}
+var useMenuItemCheckbox = _VKYTJKYNcjs.createHook.call(void 0, 
   (_a) => {
-    var _b = _a, { store, name, checked, defaultChecked, hideOnClick = false } = _b, props = _72I2GWXFcjs.__objRest.call(void 0, _b, ["store", "name", "checked", "defaultChecked", "hideOnClick"]);
-    const context = _6RYSMHQYcjs.useMenuScopedContext.call(void 0, );
+    var _b = _a, {
+      store,
+      name,
+      value,
+      checked,
+      defaultChecked: defaultCheckedProp,
+      hideOnClick = false
+    } = _b, props = _WYXAWBLEcjs.__objRest.call(void 0, _b, [
+      "store",
+      "name",
+      "value",
+      "checked",
+      "defaultChecked",
+      "hideOnClick"
+    ]);
+    const context = _YRDDHZT7cjs.useMenuScopedContext.call(void 0, );
     store = store || context;
     _misc.invariant.call(void 0, 
       store,
       process.env.NODE_ENV !== "production" && "MenuItemCheckbox must be wrapped in a MenuList or Menu component"
     );
-    const checkboxStore = _ORDLD4QXcjs.useCheckboxStore.call(void 0, {
+    const defaultChecked = _JTVNRMACcjs.useInitialValue.call(void 0, defaultCheckedProp);
+    _react.useEffect.call(void 0, () => {
+      store == null ? void 0 : store.setValue(name, (prevValue = []) => {
+        if (!defaultChecked)
+          return prevValue;
+        return getValue(prevValue, value, true);
+      });
+    }, [store, name, value, defaultChecked]);
+    _react.useEffect.call(void 0, () => {
+      if (checked === void 0)
+        return;
+      store == null ? void 0 : store.setValue(name, (prevValue) => {
+        return getValue(prevValue, value, checked);
+      });
+    }, [store, name, value, checked]);
+    const checkboxStore = _QXQFY7FWcjs.useCheckboxStore.call(void 0, {
       value: store.useState((state) => state.values[name]),
-      setValue: (value) => store == null ? void 0 : store.setValue(name, value)
+      setValue(internalValue) {
+        store == null ? void 0 : store.setValue(name, () => {
+          if (checked === void 0)
+            return internalValue;
+          const nextValue = getValue(internalValue, value, checked);
+          if (!Array.isArray(nextValue))
+            return nextValue;
+          if (!Array.isArray(internalValue))
+            return nextValue;
+          if (_misc.shallowEqual.call(void 0, internalValue, nextValue))
+            return internalValue;
+          return nextValue;
+        });
+      }
     });
-    props = _72I2GWXFcjs.__spreadValues.call(void 0, {
+    props = _WYXAWBLEcjs.__spreadValues.call(void 0, {
       role: "menuitemcheckbox"
     }, props);
-    props = _H562FOJ4cjs.useCheckbox.call(void 0, _72I2GWXFcjs.__spreadValues.call(void 0, { store: checkboxStore, checked }, props));
-    props = _BMAPXRQVcjs.useMenuItem.call(void 0, _72I2GWXFcjs.__spreadValues.call(void 0, { store, hideOnClick }, props));
+    props = _UL3EZVAKcjs.useCheckbox.call(void 0, _WYXAWBLEcjs.__spreadValues.call(void 0, {
+      store: checkboxStore,
+      name,
+      value,
+      checked
+    }, props));
+    props = _OQTZAPK7cjs.useMenuItem.call(void 0, _WYXAWBLEcjs.__spreadValues.call(void 0, { store, hideOnClick }, props));
     return props;
   }
 );
-var MenuItemCheckbox = _Z5PUIG6Acjs.createMemoComponent.call(void 0, 
+var MenuItemCheckbox = _VKYTJKYNcjs.createMemoComponent.call(void 0, 
   (props) => {
     const htmlProps = useMenuItemCheckbox(props);
-    return _Z5PUIG6Acjs.createElement.call(void 0, "div", htmlProps);
+    return _VKYTJKYNcjs.createElement.call(void 0, "div", htmlProps);
   }
 );
 if (process.env.NODE_ENV !== "production") {

package/cjs/menu/menu-item-checkbox.d.cts

@@ -0,0 +1,64 @@
+import type { CheckboxOptions } from "../checkbox/checkbox.js";
+import type { As, Props } from "../utils/types.js";
+import type { MenuItemOptions } from "./menu-item.js";
+import type { MenuStore } from "./menu-store.js";
+/**
+ * Returns props to create a `MenuItemCheckbox` component.
+ * @see https://ariakit.org/components/menu
+ * @example
+ * ```jsx
+ * const store = useMenuStore({ defaultValues: { apple: false } });
+ * const props = useMenuItemCheckbox({ store, name: "apple" });
+ * <MenuButton store={store}>Fruits</MenuButton>
+ * <Menu store={store}>
+ *   <Role {...props}>Apple</Role>
+ * </Menu>
+ * ```
+ */
+export declare const useMenuItemCheckbox: import("../utils/types.js").Hook<MenuItemCheckboxOptions<"div">>;
+/**
+ * Renders a menu item checkbox inside a menu.
+ * @see https://ariakit.org/components/menu
+ * @example
+ * ```jsx
+ * <MenuProvider defaultValues={{ apple: false }}>
+ *   <MenuButton>Fruits</MenuButton>
+ *   <Menu>
+ *     <MenuItemCheckbox name="apple">Apple</MenuItemCheckbox>
+ *   </Menu>
+ * </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"> {
+    /**
+     * Object returned by the
+     * [`useMenuStore`](https://ariakit.org/reference/use-menu-store) hook. If not
+     * provided, the closest [`Menu`](https://ariakit.org/reference/menu) or
+     * [`MenuProvider`](https://ariakit.org/reference/menu-provider) components'
+     * context will be used.
+     */
+    store?: MenuStore;
+    /**
+     * MenuItemCheckbox's name as specified in the
+     * [`values`](https://ariakit.org/reference/menu-provider#values) state.
+     */
+    name: string;
+    /**
+     * The controlled checked state of the element. It will set the menu
+     * [`values`](https://ariakit.org/reference/menu-provider#values) state if
+     * provided.
+     */
+    checked?: boolean;
+    /**
+     * The default checked state of the element. It will set the default value in
+     * the menu [`values`](https://ariakit.org/reference/menu-provider#values)
+     * state if provided.
+     */
+    defaultChecked?: boolean;
+    /**
+     * @default false
+     */
+    hideOnClick?: MenuItemOptions<T>["hideOnClick"];
+}
+export type MenuItemCheckboxProps<T extends As = "div"> = Props<MenuItemCheckboxOptions<T>>;

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

@@ -44,6 +44,18 @@ export interface MenuItemCheckboxOptions<T extends As = "div"> extends MenuItemO
      * [`values`](https://ariakit.org/reference/menu-provider#values) state.
      */
     name: string;
+    /**
+     * The controlled checked state of the element. It will set the menu
+     * [`values`](https://ariakit.org/reference/menu-provider#values) state if
+     * provided.
+     */
+    checked?: boolean;
+    /**
+     * The default checked state of the element. It will set the default value in
+     * the menu [`values`](https://ariakit.org/reference/menu-provider#values)
+     * state if provided.
+     */
+    defaultChecked?: boolean;
     /**
      * @default false
      */