@hzblj/kara-components 0.11.0 → 0.12.0

package/lib/module/organisms/snackbar/snackbar.js

@@ -1,14 +1,14 @@
 "use strict";
 
-import { duration as durations, easing, spacing, useReducedMotion } from '@hzblj/kara-theme';
+import { timing } from '@hzblj/kara-sx';
+import { spacing, useReducedMotion } from '@hzblj/kara-theme';
 import { useEffect, useRef } from 'react';
 import { AccessibilityInfo, Platform } from 'react-native';
-import { Easing, FadeIn, FadeInDown, FadeInUp, FadeOut, FadeOutDown, FadeOutUp, ReduceMotion, withTiming } from 'react-native-reanimated';
-import { ABox, Box } from "../../atoms/box/index.js";
+import { withTiming } from 'react-native-reanimated';
+import { Box } from "../../atoms/box/index.js";
 import { Pressable } from "../../atoms/pressable/index.js";
 import { RnText } from "../../atoms/rn-text/index.js";
 import { RnGlyph } from "../../glyph/index.js";
-import { timing } from "../../motion.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /** Material's `SnackbarDuration.Short` and `Long`. */
 const DURATIONS = {
@@ -19,10 +19,9 @@ const PLATFORM_ANIMATION = Platform.OS === 'android' ? 'scale' : 'slide';
 
 /** The close glyph at the label's height: an SF Symbol fills its box, Material's icon sits inside a padded one. */
 const CLOSE_SIZE = Platform.OS === 'ios' ? 's12' : 's16';
-const SMOOTH_OUT = Easing.bezier(...easing.smoothOut);
 const GROW = timing('quick');
 
-/** Material's snackbar enter: it fades in while it grows from 80 %, in 150 ms. */
+/** Material's snackbar enter: it fades in while it grows from 80 %, in 150 ms. Further than kara's `scale` preset. */
 const scaleIn = () => {
   'worklet';
 
@@ -41,29 +40,42 @@ const scaleIn = () => {
     }
   };
 };
-
 /**
- * The presets in and out: arriving in `fast`, leaving in `quick`, both on `smoothOut`. `ReduceMotion.Never`, because
- * `useReducedMotion` has already picked the fade by then, and a fade is what should still run.
+ * kara's motion presets, which arrive in `fast`, leave in `quick` and fade with motion reduced by themselves. A slide
+ * travels further than a preset's default: in from the edge it sits on, and back out toward it.
  */
 const TRANSITIONS = {
   fade: {
-    entering: FadeIn.duration(durations.fast).easing(SMOOTH_OUT).reduceMotion(ReduceMotion.Never),
-    exiting: FadeOut.duration(durations.quick).easing(SMOOTH_OUT).reduceMotion(ReduceMotion.Never)
+    entering: 'fade',
+    exiting: 'fade'
   },
   // Material's exit is a 75 ms fade: `micro`.
   scale: {
     entering: scaleIn,
-    exiting: FadeOut.duration(durations.micro).reduceMotion(ReduceMotion.Never)
+    exiting: {
+      duration: 'micro',
+      preset: 'fade'
+    }
   },
-  // Slide: in from the edge it sits on, and back out toward it.
   slideBottom: {
-    entering: FadeInDown.duration(durations.fast).easing(SMOOTH_OUT).reduceMotion(ReduceMotion.Never),
-    exiting: FadeOutDown.duration(durations.quick).easing(SMOOTH_OUT).reduceMotion(ReduceMotion.Never)
+    entering: {
+      distance: 's24',
+      preset: 'fadeUp'
+    },
+    exiting: {
+      distance: 's24',
+      preset: 'fadeDown'
+    }
   },
   slideTop: {
-    entering: FadeInUp.duration(durations.fast).easing(SMOOTH_OUT).reduceMotion(ReduceMotion.Never),
-    exiting: FadeOutUp.duration(durations.quick).easing(SMOOTH_OUT).reduceMotion(ReduceMotion.Never)
+    entering: {
+      distance: 's24',
+      preset: 'fadeDown'
+    },
+    exiting: {
+      distance: 's24',
+      preset: 'fadeUp'
+    }
   }
 };
 const transitionsFor = (animation, position) => {
@@ -118,9 +130,9 @@ export const Snackbar = ({
     bottom: spacing[offset]
   };
   const hasTrailing = Boolean(actionLabel) || dismissible;
-  // With motion reduced it only fades: nothing slides or grows.
-  const preset = transitionsFor(reduced ? 'fade' : animation, position);
-  return /*#__PURE__*/_jsxs(ABox, {
+  // The presets fade with motion reduced by themselves; Material's scale is a worklet of its own, so it is picked out.
+  const preset = transitionsFor(reduced && animation === 'scale' ? 'fade' : animation, position);
+  return /*#__PURE__*/_jsxs(Box, {
     align: actionOnNewLine ? 'stretch' : 'center',
     bg: "surface.high.contrast",
     borderRadius: "medium",

package/lib/module/organisms/snackbar/snackbar.js.map

@@ -1 +1 @@
-{"version":3,"names":["duration","durations","easing","spacing","useReducedMotion","useEffect","useRef","AccessibilityInfo","Platform","Easing","FadeIn","FadeInDown","FadeInUp","FadeOut","FadeOutDown","FadeOutUp","ReduceMotion","withTiming","ABox","Box","Pressable","RnText","RnGlyph","timing","jsx","_jsx","jsxs","_jsxs","DURATIONS","long","short","PLATFORM_ANIMATION","OS","CLOSE_SIZE","SMOOTH_OUT","bezier","smoothOut","GROW","scaleIn","animations","opacity","transform","scale","initialValues","TRANSITIONS","fade","entering","fast","reduceMotion","Never","exiting","quick","micro","slideBottom","slideTop","transitionsFor","animation","position","millisecondsOf","undefined","Snackbar","actionLabel","actionOnNewLine","dismissible","message","offset","onAction","onDismiss","visible","reduced","dismiss","current","milliseconds","timer","setTimeout","clearTimeout","announceForAccessibility","edge","top","bottom","hasTrailing","Boolean","preset","align","bg","borderRadius","flexDirection","gap","left","s16","px","py","right","shadow","children","color","flex","variant","alignSelf","onPress","pressEffect","ripple","accessibilityLabel","name","size"],"sourceRoot":"../../../../src","sources":["organisms/snackbar/snackbar.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["timing","spacing","useReducedMotion","useEffect","useRef","AccessibilityInfo","Platform","withTiming","Box","Pressable","RnText","RnGlyph","jsx","_jsx","jsxs","_jsxs","DURATIONS","long","short","PLATFORM_ANIMATION","OS","CLOSE_SIZE","GROW","scaleIn","animations","opacity","transform","scale","initialValues","TRANSITIONS","fade","entering","exiting","duration","preset","slideBottom","distance","slideTop","transitionsFor","animation","position","millisecondsOf","undefined","Snackbar","actionLabel","actionOnNewLine","dismissible","message","offset","onAction","onDismiss","visible","reduced","dismiss","current","milliseconds","timer","setTimeout","clearTimeout","announceForAccessibility","edge","top","bottom","hasTrailing","Boolean","align","bg","borderRadius","flexDirection","gap","left","s16","px","py","right","shadow","children","color","flex","variant","alignSelf","onPress","pressEffect","ripple","accessibilityLabel","name","size"],"sourceRoot":"../../../../src","sources":["organisms/snackbar/snackbar.tsx"],"mappings":"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","ignoreList":[]}

package/lib/typescript/atoms/box/box.d.ts

@@ -2,6 +2,9 @@ import { View } from 'react-native';
 /**
  * A React Native `View` that takes the design system's `sx` props. The `sx()` HOC is the whole
  * implementation — Box is just its first caller, and any other style-taking component gets the same.
+ *
+ * That includes motion: `entering`, `exiting`, `layout`, `animate` or an animated `style` make it an `Animated.View`
+ * from its first frame, and without them it stays a plain `View`.
  */
 export declare const Box: import("react").MemoExoticComponent<{
     ({ style, ...props }: import("@hzblj/kara-sx").SxProps<import("react-native").ViewProps & import("react").RefAttributes<View>>): import("react").JSX.Element;

package/lib/typescript/atoms/box/index.d.ts

@@ -1,3 +1,2 @@
-export * from './a-box';
 export * from './box';
 export * from './box.types';

package/lib/typescript/atoms/index.d.ts

@@ -32,6 +32,7 @@ export * from './segmented-control';
 export * from './skeleton';
 export * from './slider';
 export * from './spacer';
+export * from './stagger';
 export * from './surface';
 export * from './switch';
 export * from './text';

package/lib/typescript/atoms/pressable/pressable.types.d.ts

@@ -1,4 +1,4 @@
-import type { AccessibilityProps, ResponsiveViewSx } from '@hzblj/kara-sx';
+import type { AccessibilityProps, MotionProps, ResponsiveViewSx } from '@hzblj/kara-sx';
 import type { OpacitySize } from '@hzblj/kara-theme';
 import type { ReactNode } from 'react';
 import type { Haptic } from '../../haptics';
@@ -9,9 +9,10 @@ export type PressEffect = 'none' | 'opacity' | 'scale';
  * presses its own way by default: iOS eases the content down to 96%, Android draws Material's ripple over it,
  * clipped to the pressable's shape. `pressEffect` picks the same answer on both, and Android keeps its ripple on top
  * unless `ripple` is off. Give it the `borderRadius` of what it wraps (`full` around a `GlassView`). Screen readers read
- * it as a button unless `accessibilityRole` names another role. The React Native tier: it needs no host.
+ * it as a button unless `accessibilityRole` names another role. It takes the motion props a `Box` does: `animate` a
+ * selected state's `bg`, or let it arrive with `entering`. The React Native tier: it needs no host.
  */
-export type PressableProps = ResponsiveViewSx & AccessibilityProps & {
+export type PressableProps = ResponsiveViewSx & Omit<MotionProps, 'animated'> & AccessibilityProps & {
     /** The pressable content. */
     children?: ReactNode;
     /** Ignores presses: no `onPress`, no haptic, no press effect or ripple. */

package/lib/typescript/atoms/rn-text/rn-text.types.d.ts

@@ -1,17 +1,20 @@
-import type { ResponsiveViewSx } from '@hzblj/kara-sx';
+import type { MotionProps, ResponsiveViewSx } from '@hzblj/kara-sx';
 import type { ColorToken, TextVariant } from '@hzblj/kara-theme';
 import type { ReactNode } from 'react';
-import type { TextProps as RNTextProps } from 'react-native';
+import type { TextProps as RNTextProps, StyleProp, TextStyle } from 'react-native';
+import type { AnimatedStyle } from 'react-native-reanimated';
 /**
  * React Native's `Text` in a theme typography variant: the React Native tier, for text outside a native host. It takes
  * `Box`'s `sx` surface for its own box (margins, flex, padding, a background), all but `align`, which here aligns the
- * lines.
+ * lines, and the motion props a `Box` takes: `entering="fadeUp"` makes it an `Animated.Text` by itself.
  */
-export type RnTextProps = Omit<RNTextProps, 'style'> & Omit<ResponsiveViewSx, 'align'> & {
+export type RnTextProps = Omit<RNTextProps, 'style'> & MotionProps & Omit<ResponsiveViewSx, 'align'> & {
     /** Horizontal alignment, as React Native's `textAlign`. */
     align?: 'center' | 'left' | 'right';
     /** The text's colour. `content.primary` by default. */
     color?: ColorToken;
+    /** Goes last, over the variant and the `sx`: an animated style from `useAnimatedStyle`, which it renders through Reanimated for. */
+    style?: StyleProp<AnimatedStyle<TextStyle>>;
     /** The typography variant. `body` by default. */
     variant?: TextVariant;
 };

package/lib/typescript/atoms/stagger/index.d.ts

@@ -0,0 +1,2 @@
+export * from './stagger';
+export * from './stagger.types';

package/lib/typescript/atoms/stagger/stagger.d.ts

@@ -0,0 +1,2 @@
+import type { StaggerComponent } from './stagger.types';
+export declare const Stagger: StaggerComponent;

package/lib/typescript/atoms/stagger/stagger.types.d.ts

@@ -0,0 +1,32 @@
+import type { MotionPreset, MotionPresetConfig, ResponsiveViewSx } from '@hzblj/kara-sx';
+import type { DurationSize, SpringName } from '@hzblj/kara-theme';
+import type { ReactNode } from 'react';
+/** A preset by name, or one adjusted: `{preset: 'fadeUp', duration: 'slow'}`. Its `delay` is where the first one starts. */
+export type StaggerMotion = MotionPreset | MotionPresetConfig;
+/**
+ * A `Box` whose children arrive one after another: each takes `entering` a step later than the one before. Children
+ * that arrive together are staggered among themselves, the first ones as much as a later batch (the next page of a
+ * list), while a single child added later arrives at once. A `Box`, `RnText` or `Pressable` child takes the motion
+ * itself; any other child is wrapped in a `Box` that does. With motion reduced every child fades, still one after
+ * another. The React Native tier: it needs no host.
+ */
+export type StaggerProps = ResponsiveViewSx & {
+    /** What arrives. A child with an `entering` preset of its own keeps it and only takes the delay. */
+    children?: ReactNode;
+    /** How each child arrives. `fadeUp` by default. */
+    entering?: StaggerMotion;
+    /** How a child leaves when it is removed. They leave together, not one after another; none by default. */
+    exiting?: StaggerMotion;
+    /** Which end arrives first. `start` by default. */
+    from?: 'end' | 'start';
+    /** The step between one child and the next, a duration token. `stagger` (40 ms) by default, `micro` for a slower one. */
+    interval?: DurationSize;
+    /**
+     * Moves the other children into place when one arrives or leaves, and the stagger itself to its new size: `true` on
+     * the `smooth` spring, or a spring token. Off by default. Give what sits after it `layout` too, so it follows.
+     */
+    layout?: boolean | SpringName;
+    /** Test identifier, forwarded to the view. */
+    testID?: string;
+};
+export type StaggerComponent = (props: StaggerProps) => ReactNode;

package/lib/typescript/organisms/snackbar/snackbar.types.d.ts

@@ -1,7 +1,6 @@
+import type { SxEntryExit } from '@hzblj/kara-sx';
 import type { SpaceSize } from '@hzblj/kara-theme';
-import type { ComponentProps, ReactNode } from 'react';
-import type Animated from 'react-native-reanimated';
-type LayoutAnimation = ComponentProps<typeof Animated.View>['entering'];
+import type { ReactNode } from 'react';
 /** How it comes and goes. */
 export type SnackbarAnimation = 'fade' | 'scale' | 'slide';
 /** How long it stays: Material's short (4 s) and long (10 s), never, or a number of milliseconds. */
@@ -28,10 +27,10 @@ export type SnackbarProps = {
     dismissible?: boolean;
     /** How long it stays up before `onDismiss` is called. `indefinite` by default: it never hides itself. */
     duration?: SnackbarDuration;
-    /** A Reanimated entering animation of your own, e.g. `FadeInDown.springify()`. It wins over `animation`. */
-    entering?: LayoutAnimation;
-    /** A Reanimated exiting animation of your own. It wins over `animation`. */
-    exiting?: LayoutAnimation;
+    /** How it arrives instead: a motion preset (`'scale'`), or Reanimated's own, e.g. `FadeInDown.springify()`. It wins over `animation`. */
+    entering?: SxEntryExit;
+    /** How it leaves instead: a motion preset, or Reanimated's own. It wins over `animation`. */
+    exiting?: SxEntryExit;
     /** The message. */
     message: string;
     /** Between the snackbar and its edge, a space token. `s24` by default; raise it above a tab bar. */
@@ -46,4 +45,3 @@ export type SnackbarProps = {
     visible: boolean;
 };
 export type SnackbarComponent = (props: SnackbarProps) => ReactNode;
-export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hzblj/kara-components",
-  "version": "0.11.0",
+  "version": "0.12.0",
   "description": "The atoms, molecules, organisms and templates of @hzblj/kara-ui — real SwiftUI and Jetpack Compose views through @expo/ui.",
   "author": "Jan Blazej",
   "license": "MIT",
@@ -59,9 +59,9 @@
     ]
   },
   "dependencies": {
-    "@hzblj/kara-native": "^0.11.0",
-    "@hzblj/kara-sx": "^0.11.0",
-    "@hzblj/kara-theme": "^0.11.0",
+    "@hzblj/kara-native": "^0.12.0",
+    "@hzblj/kara-sx": "^0.12.0",
+    "@hzblj/kara-theme": "^0.12.0",
     "sf-symbols-typescript": "^2.2.0"
   },
   "peerDependencies": {

package/src/atoms/box/box.tsx

@@ -4,5 +4,8 @@ import {View} from 'react-native'
 /**
  * A React Native `View` that takes the design system's `sx` props. The `sx()` HOC is the whole
  * implementation — Box is just its first caller, and any other style-taking component gets the same.
+ *
+ * That includes motion: `entering`, `exiting`, `layout`, `animate` or an animated `style` make it an `Animated.View`
+ * from its first frame, and without them it stays a plain `View`.
  */
 export const Box = sx(View)

package/src/atoms/box/index.ts

@@ -1,3 +1,2 @@
-export * from './a-box'
 export * from './box'
 export * from './box.types'

package/src/atoms/index.ts

@@ -32,6 +32,7 @@ export * from './segmented-control'
 export * from './skeleton'
 export * from './slider'
 export * from './spacer'
+export * from './stagger'
 export * from './surface'
 export * from './switch'
 export * from './text'

package/src/atoms/pressable/pressable.tsx

@@ -1,17 +1,29 @@
-import {accessibilityProps, splitAccessibility, useSplitSx} from '@hzblj/kara-sx'
-import {opacity, useAppTheme, useReducedMotion, withOpacity} from '@hzblj/kara-theme'
+import {
+  type AnimatableKey,
+  accessibilityProps,
+  markMotionComponent,
+  type SxAnimate,
+  splitAccessibility,
+  spring,
+  timing,
+  useSplitSxMotion,
+} from '@hzblj/kara-sx'
+import {opacity, type SpringName, springs, useAppTheme, useReducedMotion, withOpacity} from '@hzblj/kara-theme'
 import {useCallback, useMemo} from 'react'
 import {Platform, Pressable as RNPressable, type ViewStyle} from 'react-native'
-import Animated, {useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated'
+import Animated, {useAnimatedStyle, useSharedValue, withSpring, withTiming} from 'react-native-reanimated'
 
 import {haptics} from '../../haptics'
-import {timing} from '../../motion'
 import {splitForRipple} from '../../ripple-clip'
 import type {PressableComponent, PressableProps} from './pressable.types'
 
-/** The scale eases down and settles back a little slower, with no bounce: a press is not a toy. */
-const SCALE_IN = timing('quick')
-const SCALE_OUT = timing('fast')
+/**
+ * The scale follows the finger on springs, as UIKit's own presses do: down on `interactive`, back on `smooth`, neither
+ * with a bounce (a press is not a toy). A spring keeps the speed it has, so a tap let go halfway down eases back instead
+ * of turning on the spot, which a timed curve restarted from rest cannot do.
+ */
+const SCALE_IN = spring('interactive')
+const SCALE_OUT = spring('smooth')
 
 /** A dim comes in at once and leaves a little slower, as UIKit's own highlight does. */
 const DIM_IN = timing('micro', 'out')
@@ -21,111 +33,155 @@ const PLATFORM_EFFECT = Platform.OS === 'ios' ? 'scale' : 'none'
 
 const AnimatedPressable = Animated.createAnimatedComponent(RNPressable)
 
-export const Pressable: PressableComponent = ({
-  children,
-  disabled = false,
-  haptic = false,
-  onPress,
-  pressEffect = PLATFORM_EFFECT,
-  pressedOpacity = 'o60',
-  pressedScale = 0.96,
-  ripple: withRipple = true,
-  testID,
-  ...props
-}: PressableProps) => {
-  const [accessibility, ownProps] = splitAccessibility(props)
-  const [resolved, rest] = useSplitSx(ownProps)
-  const reduced = useReducedMotion()
-  // With motion reduced the press still shows, and nothing moves: a scale dims instead.
-  const effect = reduced && pressEffect === 'scale' ? 'opacity' : pressEffect
-  // 0 at rest, 1 held: one value drives whichever effect is picked, so a change of effect needs no second animation.
-  const pressed = useSharedValue(0)
-  const feedback = haptic === true ? 'light' : haptic || undefined
-  const a11y = accessibilityProps(accessibility, 'button')
-  const dimmed = opacity[pressedOpacity]
-
-  const theme = useAppTheme()
-  const isAndroid = Platform.OS === 'android'
-
-  const rStyle = useAnimatedStyle(() => {
-    if (effect === 'scale') {
-      return {transform: [{scale: 1 - (1 - pressedScale) * pressed.value}]}
-    }
+/** What `animate` covers by default, less the transform. */
+const VISUAL_KEYS: readonly AnimatableKey[] = ['bg', 'borderColor', 'opacity']
 
-    return effect === 'opacity' ? {opacity: 1 - (1 - dimmed) * pressed.value} : {}
-  }, [dimmed, effect, pressedScale])
-
-  // Android's press is Material's: a ripple over the content (the pressed state layer, `onSurface` at 10 %) clipped to
-  // the shape by an outer view (`splitForRipple`). The effect, when there is one, moves that outer view, ripple and all.
-  const ripple = useMemo(
-    () =>
-      isAndroid && withRipple
-        ? {color: withOpacity(String(theme.color('content.primary')), 'o10'), foreground: true}
-        : undefined,
-    [isAndroid, theme, withRipple]
-  )
-  const androidStyle = useMemo(
-    () => (isAndroid ? splitForRipple(resolved as ViewStyle) : undefined),
-    [isAndroid, resolved]
-  )
-
-  // The finger is down: the Taptic Engine has until the release to wake, so the haptic lands with the press.
-  const onPressIn = useCallback(() => {
-    if (effect !== 'none') {
-      pressed.value = withTiming(1, effect === 'scale' ? SCALE_IN : DIM_IN)
-    }
+const TRANSFORM_KEYS = new Set<AnimatableKey>(['offsetX', 'offsetY', 'rotate', 'scale'])
 
-    if (feedback) {
-      haptics.prepare(feedback)
-    }
-  }, [effect, feedback, pressed])
+/**
+ * The press scale owns the transform, so `animate` leaves it alone: a transition on the same transform would take it
+ * back from the press at every re-render. A duration or spring token keeps its timing.
+ */
+const withoutTransform = (animate: SxAnimate | undefined): SxAnimate | undefined => {
+  if (animate === undefined || animate === false) {
+    return animate
+  }
 
-  const onPressOut = useCallback(() => {
-    pressed.value = withTiming(0, effect === 'scale' ? SCALE_OUT : DIM_OUT)
-  }, [effect, pressed])
+  if (animate === true) {
+    return {keys: VISUAL_KEYS}
+  }
 
-  const onPressWithHaptic = useCallback(() => {
-    if (feedback) {
-      haptics.play(feedback)
-    }
+  if (typeof animate === 'string') {
+    return animate in springs
+      ? {keys: VISUAL_KEYS, spring: animate as SpringName}
+      : {duration: animate as Exclude<typeof animate, SpringName>, keys: VISUAL_KEYS}
+  }
 
-    onPress?.()
-  }, [feedback, onPress])
+  return {...animate, keys: (animate.keys ?? VISUAL_KEYS).filter(key => !TRANSFORM_KEYS.has(key))}
+}
 
-  if (androidStyle) {
-    return (
-      <Animated.View style={[androidStyle.outer, rStyle]}>
-        <RNPressable
-          {...a11y}
-          android_ripple={ripple}
-          disabled={disabled}
-          hitSlop={8}
-          onPress={onPressWithHaptic}
-          onPressIn={onPressIn}
-          onPressOut={onPressOut}
-          style={androidStyle.inner}
-          testID={testID}
-          {...rest}
+export const Pressable: PressableComponent = markMotionComponent(
+  ({
+    children,
+    disabled = false,
+    haptic = false,
+    onPress,
+    pressEffect = PLATFORM_EFFECT,
+    pressedOpacity = 'o60',
+    pressedScale = 0.96,
+    ripple: withRipple = true,
+    testID,
+    ...props
+  }: PressableProps) => {
+    const [accessibility, ownProps] = splitAccessibility(props)
+    const reduced = useReducedMotion()
+    // With motion reduced the press still shows, and nothing moves: a scale dims instead.
+    const effect = reduced && pressEffect === 'scale' ? 'opacity' : pressEffect
+    // Always a Reanimated view (the press effect is one), so the motion props need no latch here.
+    const [resolved, motion, rest] = useSplitSxMotion(
+      effect === 'scale' && ownProps.animate !== undefined
+        ? {...ownProps, animate: withoutTransform(ownProps.animate as SxAnimate)}
+        : ownProps
+    )
+    // 0 at rest, 1 held: one value drives whichever effect is picked, so a change of effect needs no second animation.
+    const pressed = useSharedValue(0)
+    const feedback = haptic === true ? 'light' : haptic || undefined
+    const a11y = accessibilityProps(accessibility, 'button')
+    const dimmed = opacity[pressedOpacity]
+
+    const theme = useAppTheme()
+    const isAndroid = Platform.OS === 'android'
+
+    const rStyle = useAnimatedStyle(() => {
+      if (effect === 'scale') {
+        return {transform: [{scale: 1 - (1 - pressedScale) * pressed.value}]}
+      }
+
+      return effect === 'opacity' ? {opacity: 1 - (1 - dimmed) * pressed.value} : {}
+    }, [dimmed, effect, pressedScale])
+
+    // Android's press is Material's: a ripple over the content (the pressed state layer, `onSurface` at 10 %) clipped to
+    // the shape by an outer view (`splitForRipple`). The effect, when there is one, moves that outer view, ripple and all.
+    const ripple = useMemo(
+      () =>
+        isAndroid && withRipple
+          ? {color: withOpacity(String(theme.color('content.primary')), 'o10'), foreground: true}
+          : undefined,
+      [isAndroid, theme, withRipple]
+    )
+    const androidStyle = useMemo(
+      () => (isAndroid ? splitForRipple(resolved as ViewStyle) : undefined),
+      [isAndroid, resolved]
+    )
+
+    // The finger is down: the Taptic Engine has until the release to wake, so the haptic lands with the press.
+    const onPressIn = useCallback(() => {
+      if (effect === 'scale') {
+        pressed.value = withSpring(1, SCALE_IN)
+      } else if (effect === 'opacity') {
+        pressed.value = withTiming(1, DIM_IN)
+      }
+
+      if (feedback) {
+        haptics.prepare(feedback)
+      }
+    }, [effect, feedback, pressed])
+
+    const onPressOut = useCallback(() => {
+      pressed.value = effect === 'scale' ? withSpring(0, SCALE_OUT) : withTiming(0, DIM_OUT)
+    }, [effect, pressed])
+
+    const onPressWithHaptic = useCallback(() => {
+      if (feedback) {
+        haptics.play(feedback)
+      }
+
+      onPress?.()
+    }, [feedback, onPress])
+
+    if (androidStyle) {
+      return (
+        <Animated.View
+          entering={motion.entering}
+          exiting={motion.exiting}
+          layout={motion.layout}
+          style={[androidStyle.outer, motion.style, rStyle]}
         >
-          {children}
-        </RNPressable>
-      </Animated.View>
+          <RNPressable
+            {...a11y}
+            android_ripple={ripple}
+            disabled={disabled}
+            hitSlop={8}
+            onPress={onPressWithHaptic}
+            onPressIn={onPressIn}
+            onPressOut={onPressOut}
+            style={androidStyle.inner}
+            testID={testID}
+            {...rest}
+          >
+            {children}
+          </RNPressable>
+        </Animated.View>
+      )
+    }
+
+    return (
+      <AnimatedPressable
+        {...a11y}
+        disabled={disabled}
+        entering={motion.entering}
+        exiting={motion.exiting}
+        hitSlop={8}
+        layout={motion.layout}
+        onPress={onPressWithHaptic}
+        onPressIn={onPressIn}
+        onPressOut={onPressOut}
+        style={[resolved, motion.style, rStyle]}
+        testID={testID}
+        {...rest}
+      >
+        {children}
+      </AnimatedPressable>
     )
   }
-
-  return (
-    <AnimatedPressable
-      {...a11y}
-      disabled={disabled}
-      hitSlop={8}
-      onPress={onPressWithHaptic}
-      onPressIn={onPressIn}
-      onPressOut={onPressOut}
-      style={[resolved, rStyle]}
-      testID={testID}
-      {...rest}
-    >
-      {children}
-    </AnimatedPressable>
-  )
-}
+)

package/src/atoms/pressable/pressable.types.ts

@@ -1,4 +1,4 @@
-import type {AccessibilityProps, ResponsiveViewSx} from '@hzblj/kara-sx'
+import type {AccessibilityProps, MotionProps, ResponsiveViewSx} from '@hzblj/kara-sx'
 import type {OpacitySize} from '@hzblj/kara-theme'
 import type {ReactNode} from 'react'
 
@@ -12,9 +12,11 @@ export type PressEffect = 'none' | 'opacity' | 'scale'
  * presses its own way by default: iOS eases the content down to 96%, Android draws Material's ripple over it,
  * clipped to the pressable's shape. `pressEffect` picks the same answer on both, and Android keeps its ripple on top
  * unless `ripple` is off. Give it the `borderRadius` of what it wraps (`full` around a `GlassView`). Screen readers read
- * it as a button unless `accessibilityRole` names another role. The React Native tier: it needs no host.
+ * it as a button unless `accessibilityRole` names another role. It takes the motion props a `Box` does: `animate` a
+ * selected state's `bg`, or let it arrive with `entering`. The React Native tier: it needs no host.
  */
 export type PressableProps = ResponsiveViewSx &
+  Omit<MotionProps, 'animated'> &
   AccessibilityProps & {
     /** The pressable content. */
     children?: ReactNode