@hzblj/kara-components 0.10.0 → 0.12.0

package/src/atoms/pressable/pressable.tsx

@@ -1,5 +1,14 @@
-import {useSplitSx} from '@hzblj/kara-sx'
-import {duration, opacity, useAppTheme, 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, withSpring, withTiming} from 'react-native-reanimated'
@@ -8,116 +17,171 @@ import {haptics} from '../../haptics'
 import {splitForRipple} from '../../ripple-clip'
 import type {PressableComponent, PressableProps} from './pressable.types'
 
-const SPRING = {damping: 20, stiffness: 400}
+/**
+ * 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 quickly and leaves a little slower, as UIKit's own highlight does. */
-const DIM_IN = {duration: duration.d100}
-const DIM_OUT = {duration: duration.d200}
+/** A dim comes in at once and leaves a little slower, as UIKit's own highlight does. */
+const DIM_IN = timing('micro', 'out')
+const DIM_OUT = timing('quick', 'out')
 
 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 [resolved, rest] = useSplitSx(props)
-  // 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 dimmed = opacity[pressedOpacity]
-
-  const theme = useAppTheme()
-  const isAndroid = Platform.OS === 'android'
-
-  const rStyle = useAnimatedStyle(() => {
-    if (pressEffect === '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 pressEffect === 'opacity' ? {opacity: 1 - (1 - dimmed) * pressed.value} : {}
-  }, [dimmed, pressEffect, 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 (pressEffect === 'scale') {
-      pressed.value = withSpring(1, SPRING)
-    } else if (pressEffect === 'opacity') {
-      pressed.value = withTiming(1, DIM_IN)
-    }
+const TRANSFORM_KEYS = new Set<AnimatableKey>(['offsetX', 'offsetY', 'rotate', 'scale'])
 
-    if (feedback) {
-      haptics.prepare(feedback)
-    }
-  }, [feedback, pressEffect, 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 = pressEffect === 'scale' ? withSpring(0, SPRING) : withTiming(0, DIM_OUT)
-  }, [pressEffect, 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
-          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
-      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,42 +1,45 @@
-import type {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'
 
-/** How the content answers a press: it springs down, it dims, or it stays still. */
+/** How the content answers a press: it eases down, it dims, or it stays still. */
 export type PressEffect = 'none' | 'opacity' | 'scale'
 
 /**
  * React Native's `Pressable`, styled through `sx` like a `Box`, taking touches 8 points past its edges. Each platform
- * presses its own way by default: iOS springs the content down to 96%, Android draws Material's ripple over it,
+ * 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`). The React Native
- * tier: it needs no host.
+ * 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. 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 & {
-  /** The pressable content. */
-  children?: ReactNode
-  /** Ignores presses: no `onPress`, no haptic, no press effect or ripple. */
-  disabled?: boolean
-  /** Played on press. `true` is a `light` impact; a name picks the haptic, e.g. `selection` for a choice. */
-  haptic?: boolean | Haptic
-  /** Called when the press is released, after the `haptic` plays. */
-  onPress?: () => void
-  /**
-   * How the content answers while it is held. `scale` springs it down to `pressedScale`, `opacity` dims it to
-   * `pressedOpacity`, `none` leaves it still. `scale` on iOS and `none` on Android by default, where the ripple is the
-   * press.
-   */
-  pressEffect?: PressEffect
-  /** What `opacity` dims to, an opacity token. `o60` by default. */
-  pressedOpacity?: OpacitySize
-  /** What `scale` springs down to. `0.96` by default. */
-  pressedScale?: number
-  /** Android's ripple: Material's pressed state layer over the content, clipped to the shape. On by default. iOS has none. */
-  ripple?: boolean
-  /** Test identifier, forwarded to the view. */
-  testID?: string
-}
+export type PressableProps = ResponsiveViewSx &
+  Omit<MotionProps, 'animated'> &
+  AccessibilityProps & {
+    /** The pressable content. */
+    children?: ReactNode
+    /** Ignores presses: no `onPress`, no haptic, no press effect or ripple. */
+    disabled?: boolean
+    /** Played on press. `true` is a `light` impact; a name picks the haptic, e.g. `selection` for a choice. */
+    haptic?: boolean | Haptic
+    /** Called when the press is released, after the `haptic` plays. */
+    onPress?: () => void
+    /**
+     * How the content answers while it is held. `scale` eases it down to `pressedScale`, `opacity` dims it to
+     * `pressedOpacity`, `none` leaves it still. `scale` on iOS and `none` on Android by default, where the ripple is the
+     * press. With motion reduced, `scale` dims instead: the press still shows, and nothing moves.
+     */
+    pressEffect?: PressEffect
+    /** What `opacity` dims to, an opacity token. `o60` by default. */
+    pressedOpacity?: OpacitySize
+    /** What `scale` eases down to. `0.96` by default: lower reads as a squash, not a press. */
+    pressedScale?: number
+    /** Android's ripple: Material's pressed state layer over the content, clipped to the shape. On by default. iOS has none. */
+    ripple?: boolean
+    /** Test identifier, forwarded to the view. */
+    testID?: string
+  }
 
 export type PressableComponent = (props: PressableProps) => ReactNode

package/src/atoms/progress/progress.android.tsx

@@ -1,17 +1,19 @@
 import {CircularProgressIndicator, LinearProgressIndicator} from '@expo/ui/jetpack-compose'
+import {useAccessibilityModifiers} from '@hzblj/kara-sx'
 import {useAppTheme} from '@hzblj/kara-theme'
 
 import {useHostGuard} from '../../host-context'
 import type {ProgressComponent, ProgressProps} from './progress.types'
 
-export const Progress: ProgressComponent = ({circular = false, value}: ProgressProps) => {
+export const Progress: ProgressComponent = ({accessibilityLabel, circular = false, value}: ProgressProps) => {
   useHostGuard('Progress')
   const theme = useAppTheme()
   const color = theme.color('fill.accent.primary')
+  const modifiers = useAccessibilityModifiers({accessibilityLabel})
 
   if (circular) {
-    return <CircularProgressIndicator color={color} progress={value} />
+    return <CircularProgressIndicator color={color} modifiers={modifiers} progress={value} />
   }
 
-  return <LinearProgressIndicator color={color} progress={value} />
+  return <LinearProgressIndicator color={color} modifiers={modifiers} progress={value} />
 }

package/src/atoms/progress/progress.ios.tsx

@@ -1,22 +1,25 @@
 import {Gauge, ProgressView} from '@expo/ui/swift-ui'
 import {gaugeStyle, progressViewStyle, tint} from '@expo/ui/swift-ui/modifiers'
+import {useAccessibilityModifiers} from '@hzblj/kara-sx'
 import {useAppTheme} from '@hzblj/kara-theme'
 import {useMemo} from 'react'
 
 import {useHostGuard} from '../../host-context'
 import type {ProgressComponent, ProgressProps} from './progress.types'
 
-export const Progress: ProgressComponent = ({circular = false, value}: ProgressProps) => {
+export const Progress: ProgressComponent = ({accessibilityLabel, circular = false, value}: ProgressProps) => {
   useHostGuard('Progress')
   const theme = useAppTheme()
+  const accessibilityModifiers = useAccessibilityModifiers({accessibilityLabel})
 
   const ring = circular && value !== undefined
   const modifiers = useMemo(
     () => [
       ring ? gaugeStyle('circularCapacity') : progressViewStyle(circular ? 'circular' : 'linear'),
       tint(theme.color('fill.accent.primary')),
+      ...accessibilityModifiers,
     ],
-    [circular, ring, theme]
+    [accessibilityModifiers, circular, ring, theme]
   )
 
   // SwiftUI's circular `ProgressView` ignores its value on iOS and spins; a ring that fills is a capacity `Gauge`.

package/src/atoms/progress/progress.types.ts

@@ -5,6 +5,8 @@ import type {ReactNode} from 'react'
  * value, which `ProgressView` cannot draw on iOS) / Compose's `LinearProgressIndicator` and `CircularProgressIndicator`.
  */
 export type ProgressProps = {
+  /** What is in progress, for VoiceOver and TalkBack: "Uploading". They read how far along it is themselves. */
+  accessibilityLabel?: string
   /** A circular indicator instead of a bar. Off by default. */
   circular?: boolean
   /** Between `0` and `1`. Leave it unset for an indeterminate indicator. */

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

@@ -1,36 +1,105 @@
-import {useSplitSx} from '@hzblj/kara-sx'
-import {MAX_FONT_SCALE, useAppTheme} from '@hzblj/kara-theme'
-import {Text as RNText, type TextStyle, useWindowDimensions} from 'react-native'
+import {
+  isAnimatedStyle,
+  markMotionComponent,
+  type SxMotion,
+  themeKey,
+  useAnimatedLatch,
+  useSplitSxMotion,
+} from '@hzblj/kara-sx'
+import {
+  type ColorToken,
+  MAX_FONT_SCALE,
+  type TextVariant,
+  type Theme,
+  useAppTheme,
+  useFontScale,
+} from '@hzblj/kara-theme'
+import {Platform, Text as RNText, type StyleProp, type TextStyle} from 'react-native'
+import Animated from 'react-native-reanimated'
 
 import type {RnTextComponent, RnTextProps} from './rn-text.types'
 
-export const RnText: RnTextComponent = ({
-  align,
-  color = 'content.primary',
-  variant = 'body',
-  ...props
-}: RnTextProps) => {
-  const theme = useAppTheme()
-  // A view style, which a text accepts whole — only React Native's types disagree, on `userSelect`'s width.
-  const [sx, rest] = useSplitSx(props) as [TextStyle, Record<string, unknown>]
-  const {fontScale} = useWindowDimensions()
-  const style = theme.typography[variant]
-
-  /**
-   * React Native scales `fontSize` for the user's setting but leaves `lineHeight` alone, so a grown glyph ends up in
-   * an ungrown line and clips. Scaling it here by the same factor keeps the ratio the variant was designed at — and
-   * by the same ceiling `maxFontSizeMultiplier` caps the glyph with, so the two cannot disagree.
-   *
-   * The native tiers need none of this: SwiftUI's `lineSpacing` is extra space *on top of* the font's own line
-   * height, which scales with it, and Compose reads `lineHeight` in `sp`.
-   */
-  const lineHeight = style.lineHeight * Math.min(fontScale, MAX_FONT_SCALE)
-
-  return (
-    <RNText
-      maxFontSizeMultiplier={MAX_FONT_SCALE}
-      style={[style, sx, {color: theme.color(color), lineHeight, textAlign: align}]}
-      {...rest}
-    />
-  )
+/**
+ * A hundredth of a point off every line on iOS, which no one can see and which keeps the last line on screen. React
+ * Native measures a paragraph and rounds the height up to the pixel grid, then draws it into the frame Yoga laid out,
+ * and that frame can come back a hair short of the exact height (`53.9998` for three 18 pt lines, depending on where
+ * the text sits on the page). With `lineHeight` fixed, the lines need exactly 54 and the text container drops the last
+ * one, cutting the line before it off mid-word. Lines a hair shorter leave the rounding room to absorb the error.
+ */
+const LINE_HEIGHT_SLACK = Platform.OS === 'ios' ? 0.01 : 0
+
+/** Variants, colours and alignments are few, so the text half of the style is shared like the `sx` half. */
+const MAX_TEXT_STYLES = 512
+
+const textStyles = new Map<string, TextStyle>()
+
+/**
+ * The variant at the user's text size, in its colour. React Native scales `fontSize` for the user's setting but leaves
+ * `lineHeight` alone, so a grown glyph ends up in an ungrown line and clips. Scaling it here by the same factor keeps
+ * the ratio the variant was designed at, and by the same ceiling `maxFontSizeMultiplier` caps the glyph with
+ * (`useFontScale` is capped already), so the two cannot disagree.
+ *
+ * The native tiers need none of this: SwiftUI's `lineSpacing` is extra space *on top of* the font's own line
+ * height, which scales with it, and Compose reads `lineHeight` in `sp`.
+ */
+const textStyle = (
+  theme: Theme,
+  variant: TextVariant,
+  color: ColorToken,
+  align: RnTextProps['align'],
+  fontScale: number
+): TextStyle => {
+  const key = `${themeKey(theme)}|${variant}|${color}|${align}|${fontScale}`
+  const existing = textStyles.get(key)
+
+  if (existing) {
+    return existing
+  }
+
+  if (textStyles.size >= MAX_TEXT_STYLES) {
+    textStyles.clear()
+  }
+
+  const typography = theme.typography[variant]
+  const style: TextStyle = {
+    ...typography,
+    color: theme.color(color),
+    lineHeight: typography.lineHeight * fontScale - LINE_HEIGHT_SLACK,
+  }
+
+  if (align) {
+    style.textAlign = align
+  }
+
+  textStyles.set(key, style)
+
+  return style
 }
+
+export const RnText: RnTextComponent = markMotionComponent(
+  ({align, color = 'content.primary', style, variant = 'body', ...props}: RnTextProps) => {
+    const theme = useAppTheme()
+    const fontScale = useFontScale()
+    // A view style, which a text accepts whole — only React Native's types disagree, on `userSelect`'s width.
+    const [sx, motion, rest] = useSplitSxMotion(props) as [TextStyle, SxMotion, Record<string, unknown>]
+    const animated = useAnimatedLatch(motion.animated || isAnimatedStyle(style), 'RnText')
+    const text = textStyle(theme, variant, color, align, fontScale)
+
+    if (!animated) {
+      return (
+        <RNText maxFontSizeMultiplier={MAX_FONT_SCALE} style={[text, sx, style as StyleProp<TextStyle>]} {...rest} />
+      )
+    }
+
+    return (
+      <Animated.Text
+        entering={motion.entering}
+        exiting={motion.exiting}
+        layout={motion.layout}
+        maxFontSizeMultiplier={MAX_FONT_SCALE}
+        style={[text, sx, motion.style, style]}
+        {...rest}
+      />
+    )
+  }
+)

package/src/atoms/rn-text/rn-text.types.ts

@@ -1,19 +1,23 @@
-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'> &
+  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/src/atoms/segmented-control/segmented-control.android.tsx

@@ -29,7 +29,7 @@ export const SegmentedControl: SegmentedControlComponent = ({
     () => ({
       activeBorderColor: theme.color('fill.accent.primary'),
       activeContainerColor: theme.color('fill.accent.primary'),
-      activeContentColor: theme.color('content.on.bg'),
+      activeContentColor: theme.color('content.on.accent'),
       disabledActiveBorderColor: theme.color('fill.accent.disabled'),
       disabledActiveContainerColor: theme.color('fill.accent.disabled'),
       disabledActiveContentColor: theme.color('btn.content.disabled'),

package/src/atoms/segmented-control/segmented-control.ios.tsx

@@ -33,7 +33,7 @@ export const SegmentedControl: SegmentedControlComponent = ({
   return (
     <NativeSegmentedControl
       activePillColor={theme.color('fill.accent.primary')}
-      activeTextColor={theme.color('content.on.bg')}
+      activeTextColor={theme.color('content.on.accent')}
       disabled={disabled}
       fontFamily={face.fontFamily}
       fontSize={face.fontSize}

package/src/atoms/skeleton/skeleton.tsx

@@ -1,21 +1,35 @@
-import {duration, opacity} from '@hzblj/kara-theme'
+import {timing} from '@hzblj/kara-sx'
+import {duration, opacity, useReducedMotion} from '@hzblj/kara-theme'
 import {useEffect} from 'react'
-import {useAnimatedStyle, useSharedValue, withRepeat, withTiming} from 'react-native-reanimated'
+import {cancelAnimation, useAnimatedStyle, useSharedValue, withRepeat, withTiming} from 'react-native-reanimated'
 
-import {ABox} from '../box'
+import {Box} from '../box'
 import type {SkeletonComponent, SkeletonProps} from './skeleton.types'
 
+/** A breath, not a transition, so it sits off the scale: `slow` twice each way, at constant speed. */
+const PULSE = {...timing('slow', 'linear'), duration: duration.slow * 2}
+
 export const Skeleton: SkeletonComponent = ({borderRadius = 'small', h, testID, w}: SkeletonProps) => {
+  const reduced = useReducedMotion()
   const pulse = useSharedValue<number>(opacity.o40)
 
+  // With motion reduced it holds still, halfway between the two ends of the pulse.
   useEffect(() => {
-    pulse.value = withRepeat(withTiming(opacity.o100, {duration: duration.d800}), -1, true)
-  }, [pulse])
+    if (reduced) {
+      cancelAnimation(pulse)
+      pulse.value = opacity.o70
+      return
+    }
+
+    pulse.value = opacity.o40
+    pulse.value = withRepeat(withTiming(opacity.o100, PULSE), -1, true)
+  }, [pulse, reduced])
 
   const rStyle = useAnimatedStyle(() => ({opacity: pulse.value}), [])
 
   return (
-    <ABox
+    <Box
+      aria-hidden
       bg="fill.quaternary"
       borderRadius={borderRadius}
       h={h}