@hzblj/kara-components 0.11.0 → 0.13.0

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

@@ -1,20 +1,12 @@
+import type { NativeIconName } from '@hzblj/expo-native-icons';
 import type { ColorToken, SpaceSize } from '@hzblj/kara-theme';
 import type { ReactNode } from 'react';
-declare global {
-    /**
-     * The app's icon names, one key per SVG in its icon folder. Written by the config plugin
-     * (`plugins: [['@hzblj/kara-ui', {icons: {source: './assets/icons'}}]]`) into `kara-icons.d.ts`, or by
-     * `npx kara-icons`. Empty until then. Global, so the declaration reaches it without resolving any kara package.
-     */
-    interface KaraIcons {
-    }
-}
-type DeclaredIconName = keyof KaraIcons & string;
 /**
- * One of the app's icons. Once the plugin has written `kara-icons.d.ts` only those names type-check: an icon removed
- * from the folder fails at every call site. Before that, any string, so a project can adopt icons gradually.
+ * One of the app's icons: a key of the global `NativeIcons`, which the config plugin writes into `native-icons.d.ts`
+ * (`plugins: [['@hzblj/kara-ui', {icons: {source: './assets/icons'}}]]`) or `npx kara-icons` does. Once it exists only
+ * those names type-check, so an icon removed from the folder fails at every call site; before that, any string.
  */
-export type IconName = [DeclaredIconName] extends [never] ? string : DeclaredIconName;
+export type IconName = NativeIconName;
 /**
  * One of the app's icons, in a host: SwiftUI `Image` from the asset catalog on iOS, Material's `Icon` with the vector
  * drawable on Android. `RnIcon` draws the same asset outside one.
@@ -24,7 +16,7 @@ export type IconProps = {
     accessibilityLabel?: string;
     /** The icon's tint. `content.primary` by default. */
     color?: ColorToken;
-    /** Which of the app's icons, a key of `KaraIcons`. */
+    /** Which of the app's icons: a key of `NativeIcons`, one per SVG in the icon folder. */
     name: IconName;
     /** Its width and height, a spacing token. `s24` by default. */
     size?: SpaceSize;
@@ -32,4 +24,3 @@ export type IconProps = {
     testID?: string;
 };
 export type IconComponent = (props: IconProps) => ReactNode;
-export {};

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,7 +1,7 @@
-import type { AccessibilityProps, ResponsiveViewSx } from '@hzblj/kara-sx';
+import type { Haptic } from '@hzblj/expo-rich-haptics';
+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';
 /** How the content answers a press: it eases down, it dims, or it stays still. */
 export type PressEffect = 'none' | 'opacity' | 'scale';
 /**
@@ -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-icon/rn-icon.d.ts

@@ -1 +1,6 @@
-export * from './rn-icon.ios';
+import type { RnIconComponent } from './rn-icon.types';
+/**
+ * `@hzblj/expo-native-icons`' `NativeIcon`: a `UIImageView` over the app's asset-catalog icon on iOS, one view drawing
+ * its vector drawable on Android. What a list row wants, rather than a SwiftUI or Compose host per row.
+ */
+export declare const RnIcon: RnIconComponent;

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/index.d.ts

@@ -1,5 +1,4 @@
 export * from './atoms';
-export * from './haptics';
 export * from './molecules';
 export * from './organisms';
 export * from './templates';

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.13.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,11 @@
     ]
   },
   "dependencies": {
-    "@hzblj/kara-native": "^0.11.0",
-    "@hzblj/kara-sx": "^0.11.0",
-    "@hzblj/kara-theme": "^0.11.0",
+    "@hzblj/expo-native-icons": "^0.1.0",
+    "@hzblj/expo-rich-haptics": "^0.1.0",
+    "@hzblj/kara-native": "^0.13.0",
+    "@hzblj/kara-sx": "^0.13.0",
+    "@hzblj/kara-theme": "^0.13.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/icon/icon.android.tsx

@@ -1,4 +1,4 @@
-import {iconResourceName} from '@hzblj/kara-native'
+import {iconResourceName} from '@hzblj/expo-native-icons'
 import {DrawableIcon} from '@hzblj/kara-native/jetpack-compose'
 import {spacing, useAppTheme} from '@hzblj/kara-theme'
 

package/src/atoms/icon/icon.ios.tsx

@@ -1,6 +1,6 @@
 import {Image} from '@expo/ui/swift-ui'
 import {accessibilityHidden, frame, accessibilityLabel as labelModifier, resizable} from '@expo/ui/swift-ui/modifiers'
-import {iconResourceName} from '@hzblj/kara-native'
+import {iconResourceName} from '@hzblj/expo-native-icons'
 import {spacing, useAppTheme} from '@hzblj/kara-theme'
 import {useMemo} from 'react'
 

package/src/atoms/icon/icon.types.ts

@@ -1,22 +1,13 @@
+import type {NativeIconName} from '@hzblj/expo-native-icons'
 import type {ColorToken, SpaceSize} from '@hzblj/kara-theme'
 import type {ReactNode} from 'react'
 
-declare global {
-  /**
-   * The app's icon names, one key per SVG in its icon folder. Written by the config plugin
-   * (`plugins: [['@hzblj/kara-ui', {icons: {source: './assets/icons'}}]]`) into `kara-icons.d.ts`, or by
-   * `npx kara-icons`. Empty until then. Global, so the declaration reaches it without resolving any kara package.
-   */
-  interface KaraIcons {}
-}
-
-type DeclaredIconName = keyof KaraIcons & string
-
 /**
- * One of the app's icons. Once the plugin has written `kara-icons.d.ts` only those names type-check: an icon removed
- * from the folder fails at every call site. Before that, any string, so a project can adopt icons gradually.
+ * One of the app's icons: a key of the global `NativeIcons`, which the config plugin writes into `native-icons.d.ts`
+ * (`plugins: [['@hzblj/kara-ui', {icons: {source: './assets/icons'}}]]`) or `npx kara-icons` does. Once it exists only
+ * those names type-check, so an icon removed from the folder fails at every call site; before that, any string.
  */
-export type IconName = [DeclaredIconName] extends [never] ? string : DeclaredIconName
+export type IconName = NativeIconName
 
 /**
  * One of the app's icons, in a host: SwiftUI `Image` from the asset catalog on iOS, Material's `Icon` with the vector
@@ -27,7 +18,7 @@ export type IconProps = {
   accessibilityLabel?: string
   /** The icon's tint. `content.primary` by default. */
   color?: ColorToken
-  /** Which of the app's icons, a key of `KaraIcons`. */
+  /** Which of the app's icons: a key of `NativeIcons`, one per SVG in the icon folder. */
   name: IconName
   /** Its width and height, a spacing token. `s24` by default. */
   size?: SpaceSize

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 {haptics} from '@hzblj/expo-rich-haptics'
+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,9 +1,8 @@
-import type {AccessibilityProps, ResponsiveViewSx} from '@hzblj/kara-sx'
+import type {Haptic} from '@hzblj/expo-rich-haptics'
+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'
-
 /** How the content answers a press: it eases down, it dims, or it stays still. */
 export type PressEffect = 'none' | 'opacity' | 'scale'
 
@@ -12,9 +11,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

package/src/atoms/rn-icon/rn-icon.tsx

@@ -0,0 +1,28 @@
+import {NativeIcon} from '@hzblj/expo-native-icons'
+import {spacing, useAppTheme} from '@hzblj/kara-theme'
+
+import type {RnIconComponent, RnIconProps} from './rn-icon.types'
+
+/**
+ * `@hzblj/expo-native-icons`' `NativeIcon`: a `UIImageView` over the app's asset-catalog icon on iOS, one view drawing
+ * its vector drawable on Android. What a list row wants, rather than a SwiftUI or Compose host per row.
+ */
+export const RnIcon: RnIconComponent = ({
+  accessibilityLabel,
+  color = 'content.primary',
+  name,
+  size = 's24',
+  testID,
+}: RnIconProps) => {
+  const theme = useAppTheme()
+
+  return (
+    <NativeIcon
+      accessibilityLabel={accessibilityLabel}
+      color={theme.color(color)}
+      name={name}
+      size={spacing[size]}
+      testID={testID}
+    />
+  )
+}