@oxy.so/bloom 5.4.1 → 6.0.0

package/src/map-marker/MapListingPreview.tsx

@@ -186,13 +186,13 @@ function MapListingPreviewComponent({
 
   const closeButton = onClose ? (
     <Button
-      variant="secondary"
+
       size="xs"
       iconOnly
       leadingIcon={RiCloseLine}
       accessibilityLabel={closeLabel}
       onPress={onClose}
-      testID={testID ? `${testID}-close` : undefined}
+      testID={testID ? `${testID}-close` : undefined} tone="neutral" appearance="outline"
     />
   ) : null;
 

package/src/map-marker/MapSearchAreaButton.tsx

@@ -81,7 +81,7 @@ function MapSearchAreaButtonComponent(props: MapSearchAreaButtonProps) {
         style={[pillStyle, style]}
       >
         <CheckboxGlyph
-          size="medium"
+          size="md"
           checked={checked}
           indeterminate={false}
           disabled={false}

package/src/media-card/EpisodeCard.tsx

@@ -93,7 +93,7 @@ function EpisodeCardComponent({
     row || progressLine || actions ? (
       <View style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }} pointerEvents="box-none">
         {row && onPlay ? (
-          <PlayButton playing={playing} loading={loading} onPress={onPlay} subject={title} size="small" testID={testID ? `${testID}-play` : undefined} />
+          <PlayButton playing={playing} loading={loading} onPress={onPlay} subject={title} size="sm" testID={testID ? `${testID}-play` : undefined} />
         ) : null}
         {progressLine}
         <View style={{ flex: 1 }} pointerEvents="none" />

package/src/media-card/MediaCard.tsx

@@ -259,7 +259,7 @@ function MediaCardComponent(props: MediaCardProps) {
           loading={loading}
           onPress={onPlay}
           subject={title}
-          size={row || size === 'small' ? 'small' : 'medium'}
+          size={row || size === 'small' ? 'sm' : 'md'}
           variant={row ? 'inverse' : 'accent'}
         />
       </View>

package/src/media-card/QuickAccessTile.tsx

@@ -131,7 +131,7 @@ function QuickAccessTileComponent({
               style={{ position: 'absolute', top: 0, left: 0 }}
               testID={testID ? `${testID}-play` : undefined}
             >
-              <PlayButton playing={playing} loading={loading} onPress={onPlay} subject={title} size="small" />
+              <PlayButton playing={playing} loading={loading} onPress={onPlay} subject={title} size="sm" />
             </View>
           ) : null}
         </View>

package/src/media-card/SongCard.tsx

@@ -88,7 +88,7 @@ function SongCardComponent({
     <>
       {onLikedChange ? (
         <View {...webDataSet(liked ? {} : { bloomMediaCardReveal: IS_WEB ? 'hover' : '' })}>
-          <LikeButton liked={liked} onLikedChange={onLikedChange} size="small" accessibilityLabel={controls.saveSubjectToLibrary(title)} />
+          <LikeButton liked={liked} onLikedChange={onLikedChange} size="sm" accessibilityLabel={controls.saveSubjectToLibrary(title)} />
         </View>
       ) : null}
       {duration ? (

package/src/media-controls/LikeButton.tsx

@@ -1,3 +1,4 @@
+import { useBloomAppearance } from '../appearance';
 import React, { memo, useEffect, useMemo, useState } from 'react';
 import { Pressable, View, type GestureResponderEvent } from 'react-native';
 
@@ -39,21 +40,24 @@ import { MEDIA_CONTROLS_MESSAGES } from './messages';
  */
 
 const SIZE_CONFIG: Record<LikeButtonSize, { glyph: number; box: number }> = {
-  small: { glyph: 16, box: 32 },
-  medium: { glyph: 20, box: 32 },
-  large: { glyph: 24, box: 40 },
+  sm: { glyph: 16, box: 32 },
+  md: { glyph: 20, box: 32 },
+  lg: { glyph: 24, box: 40 },
 };
 
 function LikeButtonComponent({
   liked,
   onLikedChange,
-  size = 'medium',
+  size: sizeProp,
   activeColor,
   disabled = false,
   accessibilityLabel: accessibilityLabelProp,
   style,
   testID,
 }: LikeButtonProps) {
+  const { size: inheritedSize } = useBloomAppearance({ size: sizeProp }, { size: 'md', tone: 'neutral' });
+  const size = inheritedSize === 'xs' ? 'sm' : inheritedSize;
+
   const { messages } = useMessages(MEDIA_CONTROLS_MESSAGES);
   const accessibilityLabel = accessibilityLabelProp ?? messages.saveToLibrary;
   const theme = useTheme();

package/src/media-controls/PlayButton.tsx

@@ -1,3 +1,4 @@
+import { useBloomAppearance } from '../appearance';
 import React, { memo, useEffect, useMemo, useState } from 'react';
 import { Pressable, View } from 'react-native';
 
@@ -51,16 +52,16 @@ import { MEDIA_CONTROLS_MESSAGES } from './messages';
  */
 
 const SIZE_CONFIG: Record<PlayButtonSize, { box: number; glyph: number }> = {
-  small: { box: 32, glyph: 16 },
-  medium: { box: 48, glyph: 24 },
-  large: { box: 56, glyph: 28 },
+  sm: { box: 32, glyph: 16 },
+  md: { box: 48, glyph: 24 },
+  lg: { box: 56, glyph: 28 },
 };
 
 function PlayButtonComponent({
   playing,
   onPress,
   interactive = true,
-  size = 'medium',
+  size: sizeProp,
   variant = 'accent',
   loading = false,
   disabled = false,
@@ -71,6 +72,9 @@ function PlayButtonComponent({
   style,
   testID,
 }: PlayButtonProps) {
+  const { size: inheritedSize } = useBloomAppearance({ size: sizeProp }, { size: 'md', tone: 'neutral' });
+  const size = inheritedSize === 'xs' ? 'sm' : inheritedSize;
+
   const { messages } = useMessages(MEDIA_CONTROLS_MESSAGES);
   const theme = useTheme();
   useEffect(() => {

package/src/media-controls/types.ts

@@ -1,7 +1,7 @@
 import type { StyleProp, ViewStyle } from 'react-native';
 
-/** `small` 32, `medium` 48 (default), `large` 56 — the diameter of the button. */
-export type PlayButtonSize = 'small' | 'medium' | 'large';
+/** `sm` 32, `md` 48 (default), `lg` 56 — the diameter of the button. */
+export type PlayButtonSize = 'sm' | 'md' | 'lg';
 
 /**
  * `accent` — a filled accent circle (the main transport button).
@@ -22,7 +22,7 @@ export interface PlayButtonProps {
   playing: boolean;
   /** Called on press. The button does not toggle anything itself. */
   onPress?: () => void;
-  /** Default `medium`. */
+  /** Default `md`. */
   size?: PlayButtonSize;
   /** Default `accent`. */
   variant?: PlayButtonVariant;
@@ -41,14 +41,14 @@ export interface PlayButtonProps {
   testID?: string;
 }
 
-/** Glyph size: `small` 16, `medium` 20 (default), `large` 24. The hit area is never under 32. */
-export type LikeButtonSize = 'small' | 'medium' | 'large';
+/** Glyph size: `sm` 16, `md` 20 (default), `lg` 24. The hit area is never under 32. */
+export type LikeButtonSize = 'sm' | 'md' | 'lg';
 
 export interface LikeButtonProps {
   liked: boolean;
   /** Called with the next state. */
   onLikedChange: (liked: boolean) => void;
-  /** Default `medium`. */
+  /** Default `md`. */
   size?: LikeButtonSize;
   /** The liked heart's colour. Default: the theme accent. */
   activeColor?: string;

package/src/media-header/EpisodeHeader.tsx

@@ -64,7 +64,7 @@ function EpisodeHeaderComponent({
         <PlayButton
           playing={playing}
           onPress={onPlayPress}
-          size="large"
+          size="lg"
           subject={title}
           testID={testID ? `${testID}-play` : undefined}
         />

package/src/media-header/MediaActionBar.tsx

@@ -1,3 +1,4 @@
+import { useBloomAppearance } from '../appearance';
 import React, { memo, useCallback, useEffect } from 'react';
 import { Pressable, View, type GestureResponderEvent } from 'react-native';
 import Animated, { useAnimatedStyle, useReducedMotion, useSharedValue, withSpring, withTiming } from 'react-native-reanimated';
@@ -294,13 +295,16 @@ function FollowButtonComponent({
   color,
   tone = 'support',
   iconOnly = false,
-  size = 'small',
+  size: sizeProp,
   disabled = false,
   loading = false,
   textStyle,
   style,
   testID,
 }: FollowButtonProps) {
+  const { size: inheritedSize } = useBloomAppearance({ size: sizeProp }, { size: 'sm', tone: 'neutral' });
+  const size = inheritedSize;
+
   const { messages } = useMessages(MEDIA_HEADER_MESSAGES);
   const label = labelProp ?? messages.follow;
   const followingLabel = followingLabelProp ?? messages.following;
@@ -395,7 +399,7 @@ function MediaActionBarComponent({
         <PlayButton
           playing={playing}
           onPress={onPlayPress}
-          size="large"
+          size="lg"
           subject={playSubject}
           disabled={playDisabled}
           style={{ marginRight: 8 }}
@@ -412,7 +416,7 @@ function MediaActionBarComponent({
           <LikeButton
             liked={liked}
             onLikedChange={onLikedChange}
-            size="large"
+            size="lg"
             testID={testID ? `${testID}-like` : undefined}
           />
         ) : null}

package/src/media-header/ProfileHeader.tsx

@@ -46,12 +46,12 @@ function ProfileHeaderComponent({
         <FollowButton
           following={following}
           onFollowChange={onFollowChange}
-          size="medium"
+          size="md"
           testID={testID ? `${testID}-follow` : undefined}
         />
       ) : null}
       {onEditPress ? (
-        <Button variant="secondary" size="medium" onPress={onEditPress} testID={testID ? `${testID}-edit` : undefined}>
+        <Button  size="md" onPress={onEditPress} testID={testID ? `${testID}-edit` : undefined} tone="neutral" appearance="outline">
           {editLabel}
         </Button>
       ) : null}

package/src/media-header/StickyMediaTopBar.tsx

@@ -89,7 +89,7 @@ function StickyMediaTopBarComponent({
         <PlayButton
           playing={playing}
           onPress={onPlayPress}
-          size="medium"
+          size="md"
           subject={title}
           testID={testID ? `${testID}-play` : undefined}
         />

package/src/media-header/parts.tsx

@@ -2,7 +2,7 @@ import React, { useMemo, type ReactNode } from 'react';
 import { Image, Pressable, View, type StyleProp, type ViewStyle } from 'react-native';
 
 import { Avatar } from '../avatar';
-import { Button } from '../button';
+import { LinkButton } from '../button';
 import { useInteractionState } from '../hooks/use-interaction-state';
 import { RiHeart3Fill } from '../icons/remix/RiHeart3Fill';
 import { RiMusic2Line } from '../icons/remix/RiMusic2Line';
@@ -282,10 +282,10 @@ export function InlineLink({
   }
   const style: WebCssStyle = { '--bloom-btn-ring': ring };
   return (
-    <Button
-      variant="link"
+    <LinkButton
+
       underline="hover"
-      size="small"
+      size="sm"
       textVariant={variant}
       accessibilityRole="link"
       accessibilityLabel={label}
@@ -295,7 +295,7 @@ export function InlineLink({
       testID={testID}
     >
       {label}
-    </Button>
+    </LinkButton>
   );
 }
 

package/src/media-header/types.ts

@@ -172,8 +172,8 @@ export interface FollowButtonProps extends ToggleBase {
   accessibilityHint?: string;
   /** Draw on a band: the pill takes the band's text colour. */
   color?: string;
-  /** Shared Button sizes; small by default. */
-  size?: 'small' | 'medium' | 'large';
+  /** Shared Button sizes; inherits the scope, then defaults to sm. */
+  size?: 'sm' | 'md' | 'lg';
   /** Reserves label geometry while showing the shared Button spinner. */
   loading?: boolean;
   /** Applied to both labels and their width-measuring copies. */

package/src/media-player/FullScreenPlayer.tsx

@@ -190,7 +190,7 @@ function FullScreenPlayerBody({
           />
         </View>
         {onLikedChange ? (
-          <LikeButton liked={liked} onLikedChange={onLikedChange} size="large" testID={id('like')} />
+          <LikeButton liked={liked} onLikedChange={onLikedChange} size="lg" testID={id('like')} />
         ) : null}
       </View>
       <PlaybackProgress
@@ -207,7 +207,7 @@ function FullScreenPlayerBody({
       <TransportControls
         {...transport}
         subject={transport.subject ?? track.title}
-        size="large"
+        size="lg"
         style={{ justifyContent: 'space-between' }}
         testID={id('transport')}
       />

package/src/media-player/MiniPlayer.tsx

@@ -1,8 +1,7 @@
-import { useCardFill } from '../card/use-card-fill';
-import { useSurfaceBacking } from '../surface/use-surface-backing';
+import { useResolvedSurface } from '../surface/use-resolved-surface';
 import { Surface } from '../surface';
 import React, { memo, useContext, useMemo, useRef } from 'react';
-import { PanResponder, Pressable, View } from 'react-native';
+import { PanResponder, Pressable, StyleSheet, View } from 'react-native';
 
 import { mixColor, resolveButtonRamps } from '../button/shared';
 import { LikeButton } from '../media-controls/LikeButton';
@@ -145,7 +144,7 @@ function MiniPlayerContent({
         playing={playing}
         onPress={onPlayPause}
         variant="plain"
-        size="small"
+        size="sm"
         subject={track.title}
         style={{ marginRight: 8 }}
         testID={id('play')}
@@ -199,8 +198,8 @@ function MiniPlayerComponent(props: MiniPlayerProps) {
     () => resolveMiniPlayerSurface(theme, ctx?.colorPreset ?? 'oxy', props.artworkColor),
     [theme, ctx?.colorPreset, props.artworkColor],
   );
-  const neutralFill = useCardFill(props.style);
-  const backing = useSurfaceBacking(surface.tinted ? surface.background : neutralFill, props.style);
+  const ownFill = StyleSheet.flatten(props.style)?.backgroundColor ?? (surface.tinted ? surface.background : undefined);
+  const material = useResolvedSurface({ fill: ownFill === undefined ? undefined : String(ownFill) });
   return (
     <Surface
       {...webDataSet({ bloomMiniPlayer: surface.tinted ? 'tinted' : 'neutral' })}
@@ -220,7 +219,7 @@ function MiniPlayerComponent(props: MiniPlayerProps) {
       testID={props.testID}
     >
       <ImmersiveTheme enabled={surface.tinted}>
-        <MiniPlayerContent {...props} {...surface} background={backing.fill} />
+        <MiniPlayerContent {...props} {...surface} background={material.publishedFill} />
       </ImmersiveTheme>
     </Surface>
   );

package/src/media-player/NowPlayingBar.tsx

@@ -166,7 +166,7 @@ function NowPlayingBarComponent({
           testID={id('track')}
         />
         {onLikedChange ? (
-          <LikeButton liked={liked} onLikedChange={onLikedChange} size="small" testID={id('like')} />
+          <LikeButton liked={liked} onLikedChange={onLikedChange} size="sm" testID={id('like')} />
         ) : null}
       </View>
 
@@ -177,7 +177,7 @@ function NowPlayingBarComponent({
         <TransportControls
           {...transport}
           subject={transport.subject ?? track.title}
-          size="compact"
+          size="sm"
           testID={id('transport')}
         />
         <PlaybackProgress

package/src/media-player/PlaybackSpeedMenu.tsx

@@ -63,7 +63,7 @@ function PlaybackSpeedMenuComponent({
   children,
   open,
   onOpenChange,
-  size = 'regular',
+  size = 'md',
   disabled,
   testID,
 }: PlaybackSpeedMenuProps) {

package/src/media-player/SleepTimerMenu.tsx

@@ -82,7 +82,7 @@ function SleepTimerMenuComponent({
   children,
   open,
   onOpenChange,
-  size = 'regular',
+  size = 'md',
   disabled,
   ...rows
 }: SleepTimerMenuProps) {

package/src/media-player/TransportControls.tsx

@@ -1,3 +1,4 @@
+import { useBloomAppearance } from '../appearance';
 import React, { memo, useMemo } from 'react';
 import { View } from 'react-native';
 
@@ -99,7 +100,7 @@ function TransportControlsComponent({
   loading,
   subject,
   variant = 'music',
-  size = 'regular',
+  size: sizeProp,
   onPrevious,
   onNext,
   previousDisabled,
@@ -120,6 +121,8 @@ function TransportControlsComponent({
   style,
   testID,
 }: TransportControlsProps) {
+  const { size: inheritedSize } = useBloomAppearance({ size: sizeProp }, { size: 'md', tone: 'neutral' });
+  const size = inheritedSize === 'xs' ? 'sm' : inheritedSize;
   const { messages } = useMessages(MEDIA_PLAYER_MESSAGES);
   const { messages: controls } = useMessages(MEDIA_CONTROLS_MESSAGES);
   const common = useCommonMessages();

package/src/media-player/shared.ts

@@ -1,6 +1,6 @@
 import { Platform } from 'react-native';
 
-import { parseRgba } from '../theme/color-utils';
+
 import type { WebCssStyle } from '../styles/web-view-style';
 import type { MediaArtist, RepeatMode, SleepTimerValue, TransportControlsSize } from './types';
 import {
@@ -54,7 +54,7 @@ export function artistNames(artists: string | MediaArtist[]): string {
 // ---------------------------------------------------------------------------
 
 export interface TransportGeometry {
-  play: 'small' | 'medium' | 'large';
+  play: 'sm' | 'md' | 'lg';
   /** Glyph of a secondary button. */
   glyph: number;
   /** Hit box of a secondary button. */
@@ -65,9 +65,9 @@ export interface TransportGeometry {
 }
 
 export const TRANSPORT_GEOMETRY: Record<TransportControlsSize, TransportGeometry> = {
-  compact: { play: 'small', glyph: 16, box: 32, skipGlyph: 20, gap: 8 },
-  regular: { play: 'medium', glyph: 20, box: 32, skipGlyph: 24, gap: 16 },
-  large: { play: 'large', glyph: 24, box: 40, skipGlyph: 32, gap: 24 },
+  sm: { play: 'sm', glyph: 16, box: 32, skipGlyph: 20, gap: 8 },
+  md: { play: 'md', glyph: 20, box: 32, skipGlyph: 24, gap: 16 },
+  lg: { play: 'lg', glyph: 24, box: 40, skipGlyph: 32, gap: 24 },
 };
 
 // ---------------------------------------------------------------------------

package/src/media-player/types.ts

@@ -4,8 +4,8 @@ import type { StyleProp, ViewStyle } from 'react-native';
 /** `off` → `all` → `one` → `off`. */
 export type RepeatMode = 'off' | 'all' | 'one';
 
-/** `compact` (play 32, glyphs 16), `regular` (play 48, glyphs 20, default), `large` (play 56, glyphs 24). */
-export type TransportControlsSize = 'compact' | 'regular' | 'large';
+/** `sm` (play 32, glyphs 16), `md` (play 48, glyphs 20, default), `lg` (play 56, glyphs 24). */
+export type TransportControlsSize = 'sm' | 'md' | 'lg';
 
 /** `music`: shuffle · previous · play · next · repeat. `podcast`: speed · back N · play · forward N · trailing. */
 export type TransportControlsVariant = 'music' | 'podcast';

package/src/media-shelf/Shelf.tsx

@@ -205,24 +205,24 @@ function ShelfComponent({
           {showArrows ? (
             <View {...webDataSet({ bloomShelfArrows: '' })} style={{ flexDirection: 'row', gap: 8 }}>
               <Button
-                variant="secondary"
-                size="small"
+
+                size="sm"
                 iconOnly
                 leadingIcon={RiArrowLeftSLine}
                 accessibilityLabel={`${previousLabel}: ${title}`}
                 disabled={!overflow.previous}
                 onPress={() => page(-1)}
-                testID={testID ? `${testID}-previous` : undefined}
+                testID={testID ? `${testID}-previous` : undefined} tone="neutral" appearance="outline"
               />
               <Button
-                variant="secondary"
-                size="small"
+
+                size="sm"
                 iconOnly
                 leadingIcon={RiArrowRightSLine}
                 accessibilityLabel={`${nextLabel}: ${title}`}
                 disabled={!overflow.next}
                 onPress={() => page(1)}
-                testID={testID ? `${testID}-next` : undefined}
+                testID={testID ? `${testID}-next` : undefined} tone="neutral" appearance="outline"
               />
             </View>
           ) : null}

package/src/menu-item/MenuItemOptions.tsx

@@ -203,12 +203,12 @@ function MenuItemOptionsComponent({
 
       {onSubmit ? (
         <Button
-          variant="primary"
-          size="large"
+
+          size="lg"
           fullWidth
           disabled={disabled || submitDisabled}
           onPress={onSubmit}
-          testID={testID ? `${testID}-submit` : undefined}
+          testID={testID ? `${testID}-submit` : undefined} tone="accent" appearance="solid"
         >
           {total ? `${submitLabel} · ${total}` : submitLabel}
         </Button>

package/src/menu-item/MenuItemRow.tsx

@@ -89,7 +89,7 @@ function MenuItemRowComponent(props: MenuItemRowProps) {
 
   const control = unavailable ? null : stepper ? (
     <Stepper
-      size="small"
+      size="sm"
       value={quantity}
       min={0}
       onValueChange={onQuantityChange!}
@@ -98,13 +98,13 @@ function MenuItemRowComponent(props: MenuItemRowProps) {
     />
   ) : onAdd ? (
     <Button
-      variant="secondary"
-      size="small"
+
+      size="sm"
       iconOnly
       leadingIcon={RiAddLine}
       accessibilityLabel={addLabel ?? messages.addItem(name)}
       onPress={onAdd}
-      testID={testID ? `${testID}-add` : undefined}
+      testID={testID ? `${testID}-add` : undefined} tone="neutral" appearance="outline"
     />
   ) : null;
 

package/src/message-media/VideoMessage.tsx

@@ -96,7 +96,7 @@ function PlayGlyph({ playing }: { playing: boolean }) {
       accessibilityElementsHidden
       importantForAccessibility="no-hide-descendants"
     >
-      <PlayButton playing={playing} size="medium" variant="inverse" interactive={false} />
+      <PlayButton playing={playing} size="md" variant="inverse" interactive={false} />
     </View>
   );
 }

package/src/message-media/VoiceMessage.tsx

@@ -372,7 +372,7 @@ function VoiceMessageComponent({
       <View style={{ flexDirection: 'row', alignItems: 'center', gap: space.md }}>
         <PlayButton
           playing={playing}
-          size="small"
+          size="sm"
           variant={tone === 'outgoing' ? 'inverse' : 'accent'}
           accessibilityLabel={playing ? messages.pauseVoiceMessage : messages.playVoiceMessage}
           onPress={onPlayPress}

package/src/motion/ScreenTransition.tsx

@@ -1,13 +1,14 @@
 import React from 'react';
-import { Platform, type StyleProp, type ViewStyle } from 'react-native';
+import { Platform } from 'react-native';
 import Animated, {
   Easing,
   FadeIn,
+  useReducedMotion,
   FadeOut,
   SlideInLeft,
   SlideInRight,
 } from 'react-native-reanimated';
-import type { ScreenTransitionDirection, ScreenTransitionProps } from './types';
+import type { ScreenTransitionProps } from './types';
 
 /** CSS-smooth deceleration for the native slide. */
 const SLIDE_EASING = Easing.out(Easing.exp);
@@ -30,6 +31,7 @@ export function ScreenTransition({
   children,
 }: ScreenTransitionProps) {
   const isWeb = Platform.OS === 'web';
+  const reducedMotion = useReducedMotion();
 
   const entering = isWeb
     ? enabledWeb
@@ -44,7 +46,7 @@ export function ScreenTransition({
     : FadeOut.duration(WEB_FADE_DURATION);
 
   return (
-    <Animated.View entering={entering} exiting={exiting} style={style}>
+    <Animated.View entering={reducedMotion ? undefined : entering} exiting={reducedMotion ? undefined : exiting} style={style}>
       {children}
     </Animated.View>
   );

package/src/motion/index.ts

@@ -1,3 +1,5 @@
 export { ScaleAndFadeIn, ScaleAndFadeOut, ShrinkAndPop } from './motion';
 export { ScreenTransition } from './ScreenTransition';
 export type { ScreenTransitionProps, ScreenTransitionDirection } from './types';
+export { MOTION_RECIPES, animateMotion } from './recipes';
+export type { MotionIntent } from './recipes';

package/src/motion/index.web.ts

@@ -6,3 +6,5 @@
 export { ScaleAndFadeIn, ScaleAndFadeOut, ShrinkAndPop } from './motion.web';
 export { ScreenTransition } from './ScreenTransition';
 export type { ScreenTransitionProps, ScreenTransitionDirection } from './types';
+export { MOTION_RECIPES, animateMotion } from './recipes';
+export type { MotionIntent } from './recipes';

package/src/motion/recipes.ts

@@ -0,0 +1,23 @@
+import { ReduceMotion, withSpring, withTiming, type SharedValue } from 'react-native-reanimated';
+
+/** Intent owns timing; geometry and gesture velocity remain with the component. */
+export const MOTION_RECIPES = {
+  press: { duration: 120, reduceMotion: ReduceMotion.System },
+  select: { duration: 420, dampingRatio: 0.82, reduceMotion: ReduceMotion.System },
+  expand: { duration: 380, dampingRatio: 1, reduceMotion: ReduceMotion.System },
+  present: { duration: 220, reduceMotion: ReduceMotion.System },
+  dismiss: { duration: 150, reduceMotion: ReduceMotion.System },
+} as const;
+export type MotionIntent = keyof typeof MOTION_RECIPES;
+
+/** Retarget the existing value: no reset, timer, or second animation owner. */
+export function animateMotion(value: SharedValue<number>, target: number, intent: MotionIntent, reducedMotion = false): void {
+  'worklet';
+  if (reducedMotion) {
+    value.value = target;
+  } else if (intent === 'select' || intent === 'expand') {
+    value.value = withSpring(target, MOTION_RECIPES[intent]);
+  } else {
+    value.value = withTiming(target, MOTION_RECIPES[intent]);
+  }
+}