@limonify/zest-ui 0.1.5 → 0.3.0

package/lib/tooltip/root/TooltipTransitionContext.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import type { TransitionStatus } from '../../internals/useTransitionStatus';
+export interface TooltipTransitionContext {
+    transitionStatus: TransitionStatus;
+}
+export declare const TooltipTransitionContext: React.Context<TooltipTransitionContext | undefined>;
+export declare function useTooltipTransitionContext(): TooltipTransitionContext | undefined;
+//# sourceMappingURL=TooltipTransitionContext.d.ts.map

package/lib/tooltip/root/TooltipTransitionContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TooltipTransitionContext.d.ts","sourceRoot":"","sources":["../../../src/tooltip/root/TooltipTransitionContext.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,qCAAqC,CAAC;AAE5E,MAAM,WAAW,wBAAwB;IACvC,gBAAgB,EAAE,gBAAgB,CAAC;CACpC;AAED,eAAO,MAAM,wBAAwB,qDAEpC,CAAC;AAEF,wBAAgB,2BAA2B,yCAE1C"}

package/lib/tooltip/root/TooltipTransitionContext.js

@@ -0,0 +1,44 @@
+"use strict";
+'use client';
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TooltipTransitionContext = void 0;
+exports.useTooltipTransitionContext = useTooltipTransitionContext;
+const React = __importStar(require("react"));
+exports.TooltipTransitionContext = React.createContext(undefined);
+function useTooltipTransitionContext() {
+    return React.useContext(exports.TooltipTransitionContext);
+}
+//# sourceMappingURL=TooltipTransitionContext.js.map

package/lib/tooltip/root/TooltipTransitionContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TooltipTransitionContext.js","sourceRoot":"","sources":["../../../src/tooltip/root/TooltipTransitionContext.ts"],"names":[],"mappings":";AAAA,YAAY,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYb,kEAEC;AAbD,6CAA+B;AAOlB,QAAA,wBAAwB,GAAG,KAAK,CAAC,aAAa,CACzD,SAAS,CACV,CAAC;AAEF,SAAgB,2BAA2B;IACzC,OAAO,KAAK,CAAC,UAAU,CAAC,gCAAwB,CAAC,CAAC;AACpD,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@limonify/zest-ui",
-  "version": "0.1.5",
+  "version": "0.3.0",
   "description": "Base UI for React Native — headless, unstyled, accessible primitive components.",
   "license": "MIT",
   "repository": {
@@ -21,6 +21,176 @@
       "types": "./lib/index.d.ts",
       "react-native": "./src/index.ts",
       "default": "./lib/index.js"
+    },
+    "./accordion": {
+      "types": "./lib/accordion/index.d.ts",
+      "react-native": "./src/accordion/index.ts",
+      "default": "./lib/accordion/index.js"
+    },
+    "./alert-dialog": {
+      "types": "./lib/alert-dialog/index.d.ts",
+      "react-native": "./src/alert-dialog/index.ts",
+      "default": "./lib/alert-dialog/index.js"
+    },
+    "./autocomplete": {
+      "types": "./lib/autocomplete/index.d.ts",
+      "react-native": "./src/autocomplete/index.ts",
+      "default": "./lib/autocomplete/index.js"
+    },
+    "./avatar": {
+      "types": "./lib/avatar/index.d.ts",
+      "react-native": "./src/avatar/index.ts",
+      "default": "./lib/avatar/index.js"
+    },
+    "./button": {
+      "types": "./lib/button/index.d.ts",
+      "react-native": "./src/button/index.ts",
+      "default": "./lib/button/index.js"
+    },
+    "./checkbox": {
+      "types": "./lib/checkbox/index.d.ts",
+      "react-native": "./src/checkbox/index.ts",
+      "default": "./lib/checkbox/index.js"
+    },
+    "./checkbox-group": {
+      "types": "./lib/checkbox-group/index.d.ts",
+      "react-native": "./src/checkbox-group/index.ts",
+      "default": "./lib/checkbox-group/index.js"
+    },
+    "./collapsible": {
+      "types": "./lib/collapsible/index.d.ts",
+      "react-native": "./src/collapsible/index.ts",
+      "default": "./lib/collapsible/index.js"
+    },
+    "./combobox": {
+      "types": "./lib/combobox/index.d.ts",
+      "react-native": "./src/combobox/index.ts",
+      "default": "./lib/combobox/index.js"
+    },
+    "./context-menu": {
+      "types": "./lib/context-menu/index.d.ts",
+      "react-native": "./src/context-menu/index.ts",
+      "default": "./lib/context-menu/index.js"
+    },
+    "./dialog": {
+      "types": "./lib/dialog/index.d.ts",
+      "react-native": "./src/dialog/index.ts",
+      "default": "./lib/dialog/index.js"
+    },
+    "./drawer": {
+      "types": "./lib/drawer/index.d.ts",
+      "react-native": "./src/drawer/index.ts",
+      "default": "./lib/drawer/index.js"
+    },
+    "./field": {
+      "types": "./lib/field/index.d.ts",
+      "react-native": "./src/field/index.ts",
+      "default": "./lib/field/index.js"
+    },
+    "./fieldset": {
+      "types": "./lib/fieldset/index.d.ts",
+      "react-native": "./src/fieldset/index.ts",
+      "default": "./lib/fieldset/index.js"
+    },
+    "./input": {
+      "types": "./lib/input/index.d.ts",
+      "react-native": "./src/input/index.ts",
+      "default": "./lib/input/index.js"
+    },
+    "./menu": {
+      "types": "./lib/menu/index.d.ts",
+      "react-native": "./src/menu/index.ts",
+      "default": "./lib/menu/index.js"
+    },
+    "./meter": {
+      "types": "./lib/meter/index.d.ts",
+      "react-native": "./src/meter/index.ts",
+      "default": "./lib/meter/index.js"
+    },
+    "./number-field": {
+      "types": "./lib/number-field/index.d.ts",
+      "react-native": "./src/number-field/index.ts",
+      "default": "./lib/number-field/index.js"
+    },
+    "./otp-field": {
+      "types": "./lib/otp-field/index.d.ts",
+      "react-native": "./src/otp-field/index.ts",
+      "default": "./lib/otp-field/index.js"
+    },
+    "./popover": {
+      "types": "./lib/popover/index.d.ts",
+      "react-native": "./src/popover/index.ts",
+      "default": "./lib/popover/index.js"
+    },
+    "./progress": {
+      "types": "./lib/progress/index.d.ts",
+      "react-native": "./src/progress/index.ts",
+      "default": "./lib/progress/index.js"
+    },
+    "./radio": {
+      "types": "./lib/radio/index.d.ts",
+      "react-native": "./src/radio/index.ts",
+      "default": "./lib/radio/index.js"
+    },
+    "./radio-group": {
+      "types": "./lib/radio-group/index.d.ts",
+      "react-native": "./src/radio-group/index.ts",
+      "default": "./lib/radio-group/index.js"
+    },
+    "./select": {
+      "types": "./lib/select/index.d.ts",
+      "react-native": "./src/select/index.ts",
+      "default": "./lib/select/index.js"
+    },
+    "./separator": {
+      "types": "./lib/separator/index.d.ts",
+      "react-native": "./src/separator/index.ts",
+      "default": "./lib/separator/index.js"
+    },
+    "./slider": {
+      "types": "./lib/slider/index.d.ts",
+      "react-native": "./src/slider/index.ts",
+      "default": "./lib/slider/index.js"
+    },
+    "./switch": {
+      "types": "./lib/switch/index.d.ts",
+      "react-native": "./src/switch/index.ts",
+      "default": "./lib/switch/index.js"
+    },
+    "./tabs": {
+      "types": "./lib/tabs/index.d.ts",
+      "react-native": "./src/tabs/index.ts",
+      "default": "./lib/tabs/index.js"
+    },
+    "./toast": {
+      "types": "./lib/toast/index.d.ts",
+      "react-native": "./src/toast/index.ts",
+      "default": "./lib/toast/index.js"
+    },
+    "./toggle": {
+      "types": "./lib/toggle/index.d.ts",
+      "react-native": "./src/toggle/index.ts",
+      "default": "./lib/toggle/index.js"
+    },
+    "./toggle-group": {
+      "types": "./lib/toggle-group/index.d.ts",
+      "react-native": "./src/toggle-group/index.ts",
+      "default": "./lib/toggle-group/index.js"
+    },
+    "./tooltip": {
+      "types": "./lib/tooltip/index.d.ts",
+      "react-native": "./src/tooltip/index.ts",
+      "default": "./lib/tooltip/index.js"
+    },
+    "./hooks": {
+      "types": "./lib/hooks/index.d.ts",
+      "react-native": "./src/hooks/index.ts",
+      "default": "./lib/hooks/index.js"
+    },
+    "./store": {
+      "types": "./lib/store/index.d.ts",
+      "react-native": "./src/store/index.ts",
+      "default": "./lib/store/index.js"
     }
   },
   "files": [
@@ -34,6 +204,7 @@
   "scripts": {
     "typecheck": "tsc --noEmit",
     "test": "jest",
+    "test:coverage": "jest --coverage",
     "lint": "eslint src",
     "build": "tsc -p tsconfig.build.json",
     "clean": "rm -rf lib",
@@ -46,6 +217,7 @@
   },
   "devDependencies": {
     "@babel/runtime": "^8.0.0",
+    "@size-limit/preset-small-lib": "^12.1.0",
     "@testing-library/react-native": "^14.0.1",
     "@types/jest": "^29.5.14",
     "@types/react": "~19.2.2",
@@ -55,6 +227,7 @@
     "react": "19.2.3",
     "react-native": "0.86.0",
     "react-native-gesture-handler": "~3.1.0",
+    "size-limit": "^12.1.0",
     "typescript": "~6.0.3"
   },
   "dependencies": {
@@ -64,5 +237,12 @@
     "react-native-gesture-handler": {
       "optional": true
     }
-  }
+  },
+  "size-limit": [
+    {
+      "name": "full",
+      "path": "lib/index.js",
+      "limit": "500 KB"
+    }
+  ]
 }

package/src/avatar/root/AvatarRoot.tsx

@@ -14,7 +14,10 @@ export function AvatarRoot(componentProps: AvatarRoot.Props) {
 
   const [imageLoadingStatus, setImageLoadingStatus] = React.useState<ImageLoadingStatus>('idle');
 
-  const state: AvatarRootState = { imageLoadingStatus };
+  const state: AvatarRootState = React.useMemo(
+    () => ({ imageLoadingStatus }),
+    [imageLoadingStatus],
+  );
 
   const contextValue: AvatarRootContext = React.useMemo(
     () => ({ imageLoadingStatus, setImageLoadingStatus }),

package/src/button/Button.tsx

@@ -19,7 +19,10 @@ export function Button(componentProps: Button.Props) {
 
   const { getButtonProps } = useButton({ disabled });
 
-  const state: ButtonState = { disabled, pressed };
+  const state: ButtonState = React.useMemo(
+    () => ({ disabled, pressed }),
+    [disabled, pressed],
+  );
 
   return useRenderElement(Pressable, componentProps, {
     state,

package/src/checkbox/index.ts

@@ -1,4 +1,5 @@
 export * as Checkbox from './index.parts';
 
+export { useCheckboxRootContext } from './root/CheckboxRootContext';
 export type * from './root/CheckboxRoot';
 export type * from './indicator/CheckboxIndicator';

package/src/checkbox-group/CheckboxGroup.tsx

@@ -52,7 +52,10 @@ export function CheckboxGroup(componentProps: CheckboxGroup.Props) {
 
   const parent = useCheckboxGroupParent({ allValues, value, onValueChange: setValue });
 
-  const state: CheckboxGroupState = { disabled };
+  const state: CheckboxGroupState = React.useMemo(
+    () => ({ disabled }),
+    [disabled],
+  );
 
   const contextValue: CheckboxGroupContext = React.useMemo(
     () => ({

package/src/collapsible/panel/useCollapsiblePanel.tsx

@@ -35,6 +35,7 @@ export function useCollapsiblePanel(parameters: UseCollapsiblePanelParameters) {
 
   const handleContentLayout = React.useCallback((event: LayoutChangeEvent) => {
     const { height, width } = event.nativeEvent.layout;
+    if (height <= 0) return;
     setDimensions((previous) =>
       previous.height === height && previous.width === width ? previous : { height, width },
     );

package/src/dialog/index.ts

@@ -2,6 +2,7 @@ export * as Dialog from './index.parts';
 
 export type * from './root/DialogRoot';
 export { createDialogHandle, DialogHandle } from './store/DialogHandle';
+export { useDialogRootContext } from './root/DialogRootContext';
 export type * from './trigger/DialogTrigger';
 export type * from './portal/DialogPortal';
 export type * from './backdrop/DialogBackdrop';

package/src/dialog/popup/DialogPopup.tsx

@@ -2,6 +2,7 @@
 import { View } from 'react-native';
 import { useRenderElement } from '../../use-render/useRenderElement';
 import type { ZestUIComponentProps } from '../../types';
+import type { TransitionStatus } from '../../internals/useTransitionStatus';
 import { useDialogPopupProps } from './useDialogPopupProps';
 
 /**
@@ -11,9 +12,9 @@ import { useDialogPopupProps } from './useDialogPopupProps';
 export function DialogPopup(componentProps: DialogPopup.Props) {
   const { render, className, style, ref, ...elementProps } = componentProps;
 
-  const { open, props } = useDialogPopupProps();
+  const { open, transitionStatus, props } = useDialogPopupProps();
 
-  const state: DialogPopupState = { open };
+  const state: DialogPopupState = { open, transitionStatus };
 
   return useRenderElement(View, componentProps, {
     state,
@@ -27,6 +28,11 @@ export interface DialogPopupState {
    * Whether the dialog is currently open.
    */
   open: boolean;
+  /**
+   * The transition status of the dialog: `'starting'` as it opens (auto-clears
+   * to `undefined` after one frame), `'ending'` once it is closing.
+   */
+  transitionStatus: TransitionStatus;
 }
 
 export interface DialogPopupProps extends ZestUIComponentProps<typeof View, DialogPopupState> {}

package/src/dialog/popup/useDialogPopupProps.ts

@@ -1,6 +1,7 @@
 'use client';
 import { useDialogRootContext } from '../root/DialogRootContext';
 import { useDialogPortalContext } from '../portal/DialogPortalContext';
+import { useDialogTransitionContext } from '../root/DialogTransitionContext';
 
 /**
  * The state and element props shared by every popup built on the dialog store —
@@ -9,6 +10,7 @@ import { useDialogPortalContext } from '../portal/DialogPortalContext';
 export function useDialogPopupProps() {
   useDialogPortalContext();
   const store = useDialogRootContext();
+  const transitionContext = useDialogTransitionContext();
 
   const open = store.useState('open');
   const titleElementId = store.useState('titleElementId');
@@ -18,6 +20,7 @@ export function useDialogPopupProps() {
   return {
     store,
     open,
+    transitionStatus: transitionContext?.transitionStatus,
     props: {
       role,
       accessibilityViewIsModal: true,

package/src/dialog/root/DialogTransitionContext.ts

@@ -0,0 +1,15 @@
+'use client';
+import * as React from 'react';
+import type { TransitionStatus } from '../../internals/useTransitionStatus';
+
+export interface DialogTransitionContext {
+  transitionStatus: TransitionStatus;
+}
+
+export const DialogTransitionContext = React.createContext<DialogTransitionContext | undefined>(
+  undefined,
+);
+
+export function useDialogTransitionContext() {
+  return React.useContext(DialogTransitionContext);
+}

package/src/dialog/root/useRenderDialogRoot.tsx

@@ -1,10 +1,12 @@
 'use client';
 import * as React from 'react';
 import { useRefWithInit } from '../../hooks/useRefWithInit';
+import { useTransitionStatus } from '../../internals/useTransitionStatus';
 import { usePopupRootHandle } from '../../utils/popups/usePopupRootHandle';
 import { DialogStore } from '../store/DialogStore';
 import type { DialogRootProps } from './DialogRoot';
 import { DialogRootContext } from './DialogRootContext';
+import { DialogTransitionContext } from './DialogTransitionContext';
 
 export type DialogRootMode = 'dialog' | 'alert-dialog';
 
@@ -53,11 +55,21 @@ export function useRenderDialogRoot<Payload = unknown>(
 
   usePopupRootHandle({ store, handle, actionsRef });
 
+  const resolvedOpen = store.useState('open');
+  const { transitionStatus } = useTransitionStatus(resolvedOpen, false, true);
+
   const payload = store.useState('payload') as Payload;
 
+  const transitionContextValue = React.useMemo(
+    () => ({ transitionStatus }),
+    [transitionStatus],
+  );
+
   return (
     <DialogRootContext.Provider value={store}>
-      {typeof children === 'function' ? children(payload) : children}
+      <DialogTransitionContext.Provider value={transitionContextValue}>
+        {typeof children === 'function' ? children(payload) : children}
+      </DialogTransitionContext.Provider>
     </DialogRootContext.Provider>
   );
 }

package/src/drawer/popup/DrawerPopup.tsx

@@ -6,6 +6,7 @@ import { useDialogPopupProps } from '../../dialog/popup/useDialogPopupProps';
 import { useRenderElement } from '../../use-render/useRenderElement';
 import { useStableCallback } from '../../hooks/useStableCallback';
 import type { ZestUIComponentProps } from '../../types';
+import type { TransitionStatus } from '../../internals/useTransitionStatus';
 import { createChangeEventDetails } from '../../utils/createChangeEventDetails';
 import { REASONS } from '../../utils/reasons';
 import { useDrawerRootContext, type DrawerSnapPoint, type DrawerSwipeDirection } from '../root/DrawerRootContext';
@@ -59,7 +60,7 @@ export function DrawerPopup(componentProps: DrawerPopup.Props) {
     setActiveSnapPoint,
     snapToSequentialPoints,
   } = useDrawerSnapPoints();
-  const { store, open, props } = useDialogPopupProps();
+  const { store, open, transitionStatus, props } = useDialogPopupProps();
 
   const [swiping, setSwiping] = React.useState(false);
   const [swipeMovement, setSwipeMovement] = React.useState(0);
@@ -157,6 +158,7 @@ export function DrawerPopup(componentProps: DrawerPopup.Props) {
 
   const state: DrawerPopupState = {
     open,
+    transitionStatus,
     swiping,
     swipeMovement,
     swipeDirection,
@@ -192,6 +194,11 @@ export interface DrawerPopupState {
    * Whether the drawer is currently open.
    */
   open: boolean;
+  /**
+   * The transition status of the drawer: `'starting'` as it opens (auto-clears
+   * to `undefined` after one frame), `'ending'` once it is closing.
+   */
+  transitionStatus: TransitionStatus;
   /**
    * Whether a swipe is currently in progress.
    */

package/src/input/Input.tsx

@@ -1,4 +1,5 @@
 'use client';
+import * as React from 'react';
 import { TextInput } from 'react-native';
 import { useRenderElement } from '../use-render/useRenderElement';
 import { useFieldControl } from '../field/control/useFieldControl';
@@ -32,7 +33,10 @@ export function Input(componentProps: Input.Props) {
     requireField: false,
   });
 
-  const state: Input.State = { disabled: field?.disabled ?? false };
+  const state: Input.State = React.useMemo(
+    () => ({ disabled: field?.disabled ?? false }),
+    [field?.disabled],
+  );
 
   return useRenderElement(TextInput, componentProps, {
     state,

package/src/menu/item/MenuItem.tsx

@@ -43,7 +43,10 @@ export function MenuItem(componentProps: MenuItem.Props) {
 
   const { getButtonProps } = useButton({ disabled });
 
-  const state: MenuItemState = { disabled, pressed, index };
+  const state: MenuItemState = React.useMemo(
+    () => ({ disabled, pressed, index }),
+    [disabled, pressed, index],
+  );
 
   return useRenderElement(Pressable, componentProps, {
     state,

package/src/menu/popup/MenuPopup.tsx

@@ -2,9 +2,11 @@
 import { View } from 'react-native';
 import { useMenuRootContext } from '../root/MenuRootContext';
 import { useMenuPositionerContext } from '../positioner/MenuPositionerContext';
+import { useMenuTransitionContext } from '../root/MenuTransitionContext';
 import { useRenderElement } from '../../use-render/useRenderElement';
 import { CompositeList } from '../../internals/composite/list/CompositeList';
 import type { Align, Side } from '../../utils/useAnchorPositioning';
+import type { TransitionStatus } from '../../internals/useTransitionStatus';
 import type { ZestUIComponentProps } from '../../types';
 
 /**
@@ -16,10 +18,11 @@ export function MenuPopup(componentProps: MenuPopup.Props) {
 
   const store = useMenuRootContext();
   const { side, align } = useMenuPositionerContext();
+  const { transitionStatus } = useMenuTransitionContext() ?? { transitionStatus: undefined };
 
   const open = store.useState('open');
 
-  const state: MenuPopupState = { open, side, align };
+  const state: MenuPopupState = { open, transitionStatus, side, align };
 
   const element = useRenderElement(View, componentProps, {
     state,
@@ -40,8 +43,22 @@ export function MenuPopup(componentProps: MenuPopup.Props) {
 }
 
 export interface MenuPopupState {
+  /**
+   * Whether the menu is currently open.
+   */
   open: boolean;
+  /**
+   * The transition status of the menu: `'starting'` as it opens (auto-clears
+   * to `undefined` after one frame), `'ending'` once it is closing.
+   */
+  transitionStatus: TransitionStatus;
+  /**
+   * The side the popup was actually placed on, after collision handling.
+   */
   side: Side;
+  /**
+   * The alignment the popup was actually placed with.
+   */
   align: Align;
 }
 

package/src/menu/root/MenuRoot.tsx

@@ -1,12 +1,14 @@
 'use client';
-import type * as React from 'react';
+import * as React from 'react';
 import { useRefWithInit } from '../../hooks/useRefWithInit';
+import { useTransitionStatus } from '../../internals/useTransitionStatus';
 import { usePopupRootHandle } from '../../utils/popups/usePopupRootHandle';
 import type { ZestChangeEventDetails } from '../../utils/createChangeEventDetails';
 import type { REASONS } from '../../utils/reasons';
 import { MenuStore } from '../store/MenuStore';
 import type { MenuHandle } from '../store/MenuHandle';
 import { MenuRootContext } from './MenuRootContext';
+import { MenuTransitionContext } from './MenuTransitionContext';
 
 /**
  * Groups all parts of the menu.
@@ -49,11 +51,21 @@ export function MenuRoot<Payload = unknown>(props: MenuRoot.Props<Payload>) {
 
   usePopupRootHandle({ store, handle, actionsRef });
 
+  const resolvedOpen = store.useState('open');
+  const { transitionStatus } = useTransitionStatus(resolvedOpen, false, true);
+
   const payload = store.useState('payload') as Payload;
 
+  const transitionContextValue = React.useMemo(
+    () => ({ transitionStatus }),
+    [transitionStatus],
+  );
+
   return (
     <MenuRootContext.Provider value={store}>
-      {typeof children === 'function' ? children(payload) : children}
+      <MenuTransitionContext.Provider value={transitionContextValue}>
+        {typeof children === 'function' ? children(payload) : children}
+      </MenuTransitionContext.Provider>
     </MenuRootContext.Provider>
   );
 }

package/src/menu/root/MenuTransitionContext.ts

@@ -0,0 +1,15 @@
+'use client';
+import * as React from 'react';
+import type { TransitionStatus } from '../../internals/useTransitionStatus';
+
+export interface MenuTransitionContext {
+  transitionStatus: TransitionStatus;
+}
+
+export const MenuTransitionContext = React.createContext<MenuTransitionContext | undefined>(
+  undefined,
+);
+
+export function useMenuTransitionContext() {
+  return React.useContext(MenuTransitionContext);
+}