feat(motion): generate <Presence.In> and <Presence.Out> one-way motio…

…n components

packages/react-components/react-motion/library/src/factories/createPresenceComponent.ts

@@ -9,6 +9,7 @@ import { useIsReducedMotion } from '../hooks/useIsReducedMotion';
 import { getChildElement } from '../utils/getChildElement';
 import type { MotionParam, PresenceMotion, MotionImperativeRef, PresenceMotionFn, PresenceDirection } from '../types';
 import { useMotionBehaviourContext } from '../contexts/MotionBehaviourContext';
+import { createMotionComponent, MotionComponentProps } from './createMotionComponent';
 
 /**
  * @internal A private symbol to store the motion definition on the component for variants.
@@ -70,6 +71,8 @@ export type PresenceComponentProps = {
 export type PresenceComponent<MotionParams extends Record<string, MotionParam> = {}> = {
   (props: PresenceComponentProps & MotionParams): React.ReactElement | null;
   [MOTION_DEFINITION]: PresenceMotionFn<MotionParams>;
+  In: React.FC<MotionComponentProps & MotionParams>;
+  Out: React.FC<MotionComponentProps & MotionParams>;
 };
 
 export function createPresenceComponent<MotionParams extends Record<string, MotionParam> = {}>(
@@ -197,5 +200,13 @@ export function createPresenceComponent<MotionParams extends Record<string, Moti
       // Always normalize it to a function to simplify types
       [MOTION_DEFINITION]: typeof value === 'function' ? value : () => value,
     },
+    {
+      In: createMotionComponent(
+        typeof value !== 'function' ? value.enter : (...args: Parameters<typeof value>) => value(...args).enter,
+      ),
+      Out: createMotionComponent(
+        typeof value !== 'function' ? value.exit : (...args: Parameters<typeof value>) => value(...args).exit,
+      ),
+    },
   );
 }