@expokit/cli 0.4.0 → 0.4.1

package/registry/payment-card/files/src/components/ui/tilt-card.tsx

@@ -1,5 +1,6 @@
 import React, { createContext, useContext, useEffect, useMemo, useRef, useState, type ComponentRef } from 'react';
 import {
+  AccessibilityInfo,
   Animated,
   Easing,
   Image,
@@ -92,7 +93,8 @@ export interface TiltState {
   height: number;
 }
 
-const Ctx = createContext<TiltState | null>(null);
+// `reduce` (Reduce Motion) rides along privately so layers stay flat too; useTilt still returns a TiltState.
+const Ctx = createContext<(TiltState & { reduce: boolean }) | null>(null);
 
 /** The surrounding TiltCard's live tilt (null outside one) — for your own layers and effects. */
 export function useTilt() {
@@ -105,6 +107,8 @@ const PAINT = 96;
 
 // Six colour cycles across the paint, so a couple of bands cross the card like real foil. Cool
 // pinks, violets and cyans stay clean when blended over dark cards (yellow and green turn olive).
+const SMOOTH = Easing.bezier(0.32, 0.72, 0, 1);
+
 const HOLO = Array.from({ length: 37 }, (_, i) => ['#ff6bd6', '#b38cff', '#6fb6ff', '#5ff0ff', '#a7ffe0', '#ffc2ef'][i % 6]);
 
 function GlarePaint({ variant }: { variant: 'soft' | 'sharp' }) {
@@ -256,6 +260,7 @@ export function TiltCard({
   accessibilityLabel,
   style,
 }: TiltCardProps) {
+  const reduce = useReduceMotion();
   const [size, setSize] = useState({ w: 0, h: 0 });
   const sizeRef = useRef(size);
   sizeRef.current = size;
@@ -270,11 +275,13 @@ export function TiltCard({
   const viewRef = useRef<ComponentRef<typeof View>>(null);
   const disabledRef = useRef(disabled);
   disabledRef.current = disabled;
+  const reduceRef = useRef(reduce);
+  reduceRef.current = reduce;
 
   // Idle sway: a slow figure-eight while nobody is touching.
   const idleLoop = useRef<Animated.CompositeAnimation | null>(null);
   const startIdle = () => {
-    if (!idle) return;
+    if (!idle || reduce) return;
     const ease = Easing.inOut(Easing.sin);
     const leg = (v: Animated.Value, to: number, ms: number) =>
       Animated.timing(v, {
@@ -292,10 +299,15 @@ export function TiltCard({
     idleLoop.current.start();
   };
   useEffect(() => {
+    // Reduce Motion: no sway; settle where it stopped back at rest.
+    if (reduce && !touching.current) {
+      tx.setValue(0);
+      ty.setValue(0);
+    }
     startIdle();
     return () => idleLoop.current?.stop();
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [idle]);
+  }, [idle, reduce]);
 
   const aim = (pageX: number, pageY: number) => {
     const { w, h } = sizeRef.current;
@@ -307,6 +319,12 @@ export function TiltCard({
   const release = (tapped: boolean) => {
     touching.current = false;
     if (tapped && !moved.current) onPressRef.current?.();
+    if (reduce) {
+      // The card never leaves flat, so only the light has to settle: a short ease, no spring.
+      const settle = (v: Animated.Value) => Animated.timing(v, { toValue: 0, duration: 150, easing: SMOOTH, useNativeDriver: true });
+      Animated.parallel([settle(tx), settle(ty), settle(press)]).start();
+      return;
+    }
     Animated.parallel([
       Animated.spring(tx, {
         toValue: 0,
@@ -355,11 +373,15 @@ export function TiltCard({
             if (typeof px === 'number' && typeof py === 'number') origin.current = { x: px, y: py };
           });
           aim(pageX, pageY);
-          Animated.spring(press, {
-            toValue: 1,
-            ...motion.snappy,
-            useNativeDriver: true,
-          }).start();
+          if (reduceRef.current) {
+            Animated.timing(press, { toValue: 1, duration: 150, easing: SMOOTH, useNativeDriver: true }).start();
+          } else {
+            Animated.spring(press, {
+              toValue: 1,
+              ...motion.snappy,
+              useNativeDriver: true,
+            }).start();
+          }
         },
         onPanResponderMove: (e, g) => {
           if (Math.abs(g.dx) + Math.abs(g.dy) > 6) moved.current = true;
@@ -380,21 +402,24 @@ export function TiltCard({
     if (width !== size.w || height !== size.h) setSize({ w: width, h: height });
   };
 
+  // Reduce Motion keeps the card flat and still: no tilt, lift or parallax. The reflection (light,
+  // not movement of the content) still follows the finger.
+  const tilt = reduce ? 0 : maxTilt;
   const rotateY = tx.interpolate({
     inputRange: [-1, 1],
-    outputRange: [`${-maxTilt}deg`, `${maxTilt}deg`],
+    outputRange: [`${-tilt}deg`, `${tilt}deg`],
   });
   const rotateX = ty.interpolate({
     inputRange: [-1, 1],
-    outputRange: [`${maxTilt}deg`, `${-maxTilt}deg`],
+    outputRange: [`${tilt}deg`, `${-tilt}deg`],
   });
   const scale = press.interpolate({
     inputRange: [0, 1],
-    outputRange: [1, pressScale],
+    outputRange: [1, reduce ? 1 : pressScale],
   });
 
-  const ctx = useMemo(() => ({ tx, ty, press, width: size.w, height: size.h }), [tx, ty, press, size.w, size.h]);
-  const drift = Math.min(10, size.w * 0.03);
+  const ctx = useMemo(() => ({ tx, ty, press, width: size.w, height: size.h, reduce }), [tx, ty, press, size.w, size.h, reduce]);
+  const drift = reduce ? 0 : Math.min(10, size.w * 0.03);
   // The plate sits well inside the outline — far enough that it never shows through a notch or a
   // see-through corner, even at full tilt; the shadow offset does the downward shift.
   const body = shadowRect ?? { x: 0, y: 0, width: size.w, height: size.h };
@@ -433,7 +458,7 @@ export function TiltCard({
                 {
                   scale: press.interpolate({
                     inputRange: [0, 1],
-                    outputRange: [1, 1.035],
+                    outputRange: [1, reduce ? 1 : 1.035],
                   }),
                 },
                 { scaleX: shadowScaleX ?? 1 },
@@ -516,7 +541,7 @@ export function TiltCard({
 export function TiltLayer({ children, depth = 0.5, style }: TiltLayerProps) {
   const ctx = useContext(Ctx);
   if (!ctx) throw new Error('TiltLayer must be inside TiltCard');
-  const d = depth * 14;
+  const d = ctx.reduce ? 0 : depth * 14;
   return (
     <Animated.View
       pointerEvents="box-none"
@@ -539,7 +564,7 @@ export function TiltLayer({ children, depth = 0.5, style }: TiltLayerProps) {
             {
               scale: ctx.press.interpolate({
                 inputRange: [0, 1],
-                outputRange: [1, 1 + Math.max(0, depth) * 0.035],
+                outputRange: [1, ctx.reduce ? 1 : 1 + Math.max(0, depth) * 0.035],
               }),
             },
           ],
@@ -616,6 +641,22 @@ export function TiltFoil({ children, radius = 8, base = '#d7dbe2', style }: Tilt
   );
 }
 
+function useReduceMotion() {
+  const [reduce, setReduce] = useState(false);
+  useEffect(() => {
+    let alive = true;
+    AccessibilityInfo.isReduceMotionEnabled()
+      .then((r) => alive && setReduce(r))
+      .catch(() => {});
+    const sub = AccessibilityInfo.addEventListener('reduceMotionChanged', setReduce);
+    return () => {
+      alive = false;
+      sub.remove();
+    };
+  }, []);
+  return reduce;
+}
+
 const styles = StyleSheet.create({
   plate: {
     position: 'absolute',

package/registry/progress/files/src/components/ui/progress.tsx

@@ -53,6 +53,9 @@ const RING = {
   lg: { d: 112, w: 9, font: 24 },
 };
 const WHITE = '#ffffff';
+// Controls stop growing at iOS's largest standard text size (xxxL ≈ 1.35×) so they keep their shape;
+// content text scales all the way.
+const FONT_CAP = 1.35;
 
 const clamp = (n: number, lo: number, hi: number) => Math.min(hi, Math.max(lo, n));
 
@@ -838,9 +841,13 @@ function Ring({
               ],
             }}
           >
-            <Text style={[styles.ringValue, ff, { color: fg, fontSize: font }]}>
+            <Text maxFontSizeMultiplier={FONT_CAP} style={[styles.ringValue, ff, { color: fg, fontSize: font }]}>
               {format ? format() : <RingPercent fill={fill} initial={ratio} />}
-              {format ? null : <Text style={{ fontSize: font * 0.6, color: alpha(fg, 0.55) }}>%</Text>}
+              {format ? null : (
+                <Text maxFontSizeMultiplier={FONT_CAP} style={{ fontSize: font * 0.6, color: alpha(fg, 0.55) }}>
+                  %
+                </Text>
+              )}
             </Text>
           </Animated.View>
           {done ? (

package/registry/progress-steps/files/src/components/ui/progress-steps.tsx

@@ -46,6 +46,9 @@ export interface ProgressStepsProps {
   style?: StyleProp<ViewStyle>;
 }
 
+// Controls stop growing at iOS's largest standard text size (xxxL ≈ 1.35×) so they keep their shape;
+// content text scales all the way.
+const FONT_CAP = 1.35;
 const NODE = 28;
 const GAP = 6;
 const LINE = 3;
@@ -157,7 +160,7 @@ export function ProgressSteps({
           >
             {done ? 'All done' : items[shown]!.label}
           </Animated.Text>
-          <Text style={[styles.barStep, ff, { color: colors.mutedForeground }]}>
+          <Text maxFontSizeMultiplier={FONT_CAP} style={[styles.barStep, ff, { color: colors.mutedForeground }]}>
             {done ? `${n} of ${n}` : `Step ${shown + 1} of ${n}`}
           </Text>
         </View>
@@ -318,7 +321,7 @@ function Step({
   return (
     <Wrapper {...a11y} {...pressProps} style={styles.hCol}>
       <View style={styles.hTop}>{node}</View>
-      <Text numberOfLines={2} style={[styles.hLabel, ff, { color: labelColor }]}>
+      <Text maxFontSizeMultiplier={FONT_CAP} numberOfLines={2} style={[styles.hLabel, ff, { color: labelColor }]}>
         {step.label}
       </Text>
       {step.description ? (
@@ -374,7 +377,9 @@ function Node({
       <View
         style={[styles.node, round, { borderWidth: 1.5, borderColor: alpha(colors.foreground, dark ? 0.22 : 0.16) }]}
       >
-        <Text style={[styles.num, ff, { color: colors.mutedForeground }]}>{i + 1}</Text>
+        <Text maxFontSizeMultiplier={FONT_CAP} style={[styles.num, ff, { color: colors.mutedForeground }]}>
+          {i + 1}
+        </Text>
       </View>
 
       {/* Current: soft halo, a ring that breathes outwards, accent ring with a tinted core. */}
@@ -415,7 +420,9 @@ function Node({
         ]}
       >
         <View style={[StyleSheet.absoluteFill, round, { backgroundColor: alpha(color, 0.12) }]} />
-        <Text style={[styles.num, ff, { color }]}>{i + 1}</Text>
+        <Text maxFontSizeMultiplier={FONT_CAP} style={[styles.num, ff, { color }]}>
+          {i + 1}
+        </Text>
       </Animated.View>
 
       {/* Done: solid disc that pops in, then the check draws itself. */}

package/registry/radio-group/files/src/components/ui/radio-group.tsx

@@ -1,6 +1,6 @@
 import * as Haptics from 'expo-haptics';
 import React, { useEffect, useRef, useState } from 'react';
-import { Animated, Pressable, StyleSheet, Text, View, type StyleProp, type ViewStyle } from 'react-native';
+import { AccessibilityInfo, Animated, Pressable, StyleSheet, Text, View, type StyleProp, type ViewStyle } from 'react-native';
 import Svg, { Path } from 'react-native-svg';
 
 import { alpha, motion, readableOn, useKit } from '@/lib/kit';
@@ -58,6 +58,7 @@ export function RadioGroup({
   style,
 }: RadioGroupProps) {
   const { colors, radius } = useKit();
+  const reduce = useReduceMotion();
   const tint = accent ?? colors.accent;
   const [inner, setInner] = useState(defaultValue);
   const selected = value ?? inner;
@@ -95,6 +96,7 @@ export function RadioGroup({
           first={i === 0}
           tint={tint}
           disabled={disabled || o.disabled}
+          reduce={reduce}
         />
       ))}
     </View>
@@ -110,9 +112,10 @@ interface RadioItemProps {
   first: boolean;
   tint: string;
   disabled?: boolean;
+  reduce: boolean;
 }
 
-function RadioItem({ option, active, onPress, variant, horizontal, first, tint, disabled }: RadioItemProps) {
+function RadioItem({ option, active, onPress, variant, horizontal, first, tint, disabled, reduce }: RadioItemProps) {
   const { colors, radius, font } = useKit();
   const ff = font.family ? { fontFamily: font.family } : null;
   // p: colours + svg (JS driver). dot: scale/opacity pops (native). press: press feedback (native).
@@ -121,17 +124,24 @@ function RadioItem({ option, active, onPress, variant, horizontal, first, tint,
   const dot = useRef(new Animated.Value(active ? 1 : 0)).current;
   const press = useRef(new Animated.Value(1)).current;
   const ripple = useRef(new Animated.Value(1)).current;
-  const mounted = useRef(false);
+  const was = useRef(active);
 
   useEffect(() => {
+    const picked = active && !was.current;
+    was.current = active;
+    // Reduce Motion: colours and the check still fade in, the dot appears at once, no ripple.
+    if (reduce) {
+      Animated.timing(p, { toValue: active ? 1 : 0, duration: 150, useNativeDriver: false }).start();
+      dot.setValue(active ? 1 : 0);
+      return;
+    }
     Animated.spring(p, { toValue: active ? 1 : 0, useNativeDriver: false, ...motion.snappy }).start();
     Animated.spring(dot, { toValue: active ? 1 : 0, useNativeDriver: true, ...motion.bouncy }).start();
-    if (active && mounted.current) {
+    if (picked) {
       ripple.setValue(0);
       Animated.timing(ripple, { toValue: 1, duration: 560, useNativeDriver: true }).start();
     }
-    mounted.current = true;
-  }, [active, p, dot, ripple]);
+  }, [active, reduce, p, dot, ripple]);
 
   const rippleStyle = {
     backgroundColor: alpha(tint, 0.35),
@@ -139,8 +149,10 @@ function RadioItem({ option, active, onPress, variant, horizontal, first, tint,
     transform: [{ scale: ripple.interpolate({ inputRange: [0, 1], outputRange: [1, 2.3] }) }],
   };
 
-  const pressTo = (to: number) =>
+  const pressTo = (to: number) => {
+    if (reduce) return press.setValue(1);
     Animated.spring(press, { toValue: to, useNativeDriver: true, ...(to < 1 ? motion.snappy : motion.bouncy) }).start();
+  };
 
   const fg = colors.foreground;
   const muted = colors.mutedForeground;
@@ -287,7 +299,7 @@ function RadioItem({ option, active, onPress, variant, horizontal, first, tint,
         </Animated.View>
       </Animated.View>
       {horizontal && !option.description ? (
-        <Text style={[styles.label, ff, { color: fg }]}>{option.label}</Text>
+        <Text style={[styles.label, styles.shrink, ff, { color: fg }]}>{option.label}</Text>
       ) : (
         text
       )}
@@ -295,13 +307,31 @@ function RadioItem({ option, active, onPress, variant, horizontal, first, tint,
   );
 }
 
+function useReduceMotion() {
+  const [reduce, setReduce] = useState(false);
+  useEffect(() => {
+    let alive = true;
+    AccessibilityInfo.isReduceMotionEnabled()
+      .then((r) => alive && setReduce(r))
+      .catch(() => {});
+    const sub = AccessibilityInfo.addEventListener('reduceMotionChanged', setReduce);
+    return () => {
+      alive = false;
+      sub.remove();
+    };
+  }, []);
+  return reduce;
+}
+
 const styles = StyleSheet.create({
   vertical: { flexDirection: 'column' },
   horizontal: { flexDirection: 'row', flexWrap: 'wrap' },
   flex: { flex: 1, minWidth: 0 },
   flexGrow: { flexGrow: 1 },
   row: { flexDirection: 'row', alignItems: 'flex-start', gap: 12 },
-  rowCompact: { alignItems: 'center' },
+  // A long label wraps at a large text size instead of running past the edge.
+  rowCompact: { alignItems: 'center', flexShrink: 1 },
+  shrink: { flexShrink: 1 },
   ring: { width: 22, height: 22, borderRadius: 11, borderWidth: 1.5, alignItems: 'center', justifyContent: 'center' },
   dot: { width: 8, height: 8, borderRadius: 4 },
   ringSlot: { alignItems: 'center', justifyContent: 'center' },

package/registry/search-bar/files/src/components/ui/search-bar.tsx

@@ -1,5 +1,6 @@
 import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState, type ComponentRef } from 'react';
 import {
+  AccessibilityInfo,
   Animated,
   Easing,
   Platform,
@@ -59,6 +60,10 @@ export interface SearchBarProps extends Omit<TextInputProps, 'style'> {
   style?: StyleProp<ViewStyle>;
 }
 
+// Controls stop growing at iOS's largest standard text size (xxxL ≈ 1.35×) so they keep their shape;
+// content text scales all the way.
+const FONT_CAP = 1.35;
+
 /** Every dimension comes from one table so the sizes read clearly different. */
 const SIZES: Record<SearchBarSize, { h: number; font: number; icon: number; slot: number; r: number; clear: number; end: number }> = {
   sm: { h: 34, font: 14, icon: 14, slot: 30, r: 9, clear: 16, end: 6 },
@@ -105,6 +110,7 @@ export const SearchBar = forwardRef<ComponentRef<typeof TextInput>, SearchBarPro
   ref
 ) {
   const { colors, radius, font } = useKit();
+  const reduce = useReduceMotion();
   const ff = font.family ? { fontFamily: font.family } : null;
   const s = SIZES[size];
   const tint = accent ?? colors.accent;
@@ -140,28 +146,47 @@ export const SearchBar = forwardRef<ComponentRef<typeof TextInput>, SearchBarPro
   useEffect(() => {
     const to = focused ? 1 : 0;
     Animated.timing(focusJS, { toValue: to, duration: motion.fast, easing: Easing.out(Easing.quad), useNativeDriver: false }).start();
+    // Reduce Motion: the halo only fades (its scale is pinned below) and the magnifier doesn't pop.
+    if (reduce) {
+      Animated.timing(halo, { toValue: to, duration: 150, useNativeDriver: true }).start();
+      return;
+    }
     Animated.spring(halo, { toValue: to, useNativeDriver: true, ...motion.snappy }).start();
     if (focused) {
       icon.setValue(0.6);
       Animated.spring(icon, { toValue: 1, useNativeDriver: true, ...motion.bouncy }).start();
     }
-  }, [focused, focusJS, halo, icon]);
+  }, [focused, focusJS, halo, icon, reduce]);
 
   useEffect(() => {
     const to = cancelShown ? 1 : 0;
+    // Reduce Motion: the field narrows at once and Cancel fades in place.
+    if (reduce) {
+      cancelJS.setValue(to);
+      Animated.timing(cancelN, { toValue: to, duration: 150, useNativeDriver: true }).start();
+      return;
+    }
     Animated.spring(cancelJS, { toValue: to, useNativeDriver: false, ...motion.snappy }).start();
     Animated.spring(cancelN, { toValue: to, useNativeDriver: true, ...motion.snappy }).start();
-  }, [cancelShown, cancelJS, cancelN]);
+  }, [cancelShown, cancelJS, cancelN, reduce]);
 
   useEffect(() => {
     const to = open ? 1 : 0;
+    // Reduce Motion: 'minimal' snaps to its new width; the contents still fade.
+    if (reduce) {
+      openJS.setValue(to);
+      Animated.timing(openN, { toValue: to, duration: 150, useNativeDriver: true }).start();
+      return;
+    }
     Animated.spring(openJS, { toValue: to, useNativeDriver: false, ...motion.gentle }).start();
     Animated.timing(openN, { toValue: to, duration: open ? motion.normal : motion.fast, delay: open ? 80 : 0, useNativeDriver: true }).start();
-  }, [open, openJS, openN]);
+  }, [open, openJS, openN, reduce]);
 
   useEffect(() => {
-    Animated.spring(clear, { toValue: text && editable && open ? 1 : 0, useNativeDriver: true, ...motion.bouncy }).start();
-  }, [text, editable, open, clear]);
+    const to = text && editable && open ? 1 : 0;
+    if (reduce) Animated.timing(clear, { toValue: to, duration: 150, useNativeDriver: true }).start();
+    else Animated.spring(clear, { toValue: to, useNativeDriver: true, ...motion.bouncy }).start();
+  }, [text, editable, open, clear, reduce]);
 
   useEffect(() => {
     Animated.timing(busy, { toValue: loading ? 1 : 0, duration: motion.fast, useNativeDriver: true }).start();
@@ -230,7 +255,7 @@ export const SearchBar = forwardRef<ComponentRef<typeof TextInput>, SearchBarPro
         onLayout={(e) => setRowW(e.nativeEvent.layout.width)}
         style={[styles.row, minimal && { justifyContent: align === 'right' ? 'flex-end' : 'flex-start' }]}
       >
-        <Animated.View style={minimal ? { width: fieldW, height: s.h } : [styles.flex, { height: s.h }]}>
+        <Animated.View style={minimal ? { width: fieldW, minHeight: s.h } : [styles.flex, { minHeight: s.h }]}>
           <Animated.View
             pointerEvents="none"
             style={[
@@ -239,7 +264,7 @@ export const SearchBar = forwardRef<ComponentRef<typeof TextInput>, SearchBarPro
                 borderRadius: r + 4,
                 backgroundColor: alpha(tint, 0.18),
                 opacity: halo,
-                transform: [{ scale: halo.interpolate({ inputRange: [0, 1], outputRange: [0.96, 1] }) }],
+                transform: [{ scale: halo.interpolate({ inputRange: [0, 1], outputRange: [reduce ? 1 : 0.96, 1] }) }],
               },
             ]}
           />
@@ -276,6 +301,7 @@ export const SearchBar = forwardRef<ComponentRef<typeof TextInput>, SearchBarPro
                 autoCorrect={false}
                 accessibilityRole="search"
                 accessibilityLabel={props.accessibilityLabel ?? placeholder}
+                maxFontSizeMultiplier={FONT_CAP}
                 {...props}
                 autoFocus={autoFocus}
                 editable={editable}
@@ -294,12 +320,12 @@ export const SearchBar = forwardRef<ComponentRef<typeof TextInput>, SearchBarPro
                   if (minimal && !text) setExpanded(false);
                   onBlur?.(e);
                 }}
-                style={[styles.input, ff, { color: colors.foreground, fontSize: s.font, height: s.h - 3 }, webNoOutline]}
+                style={[styles.input, ff, { color: colors.foreground, fontSize: s.font, minHeight: s.h - 3 }, webNoOutline]}
               />
             </Animated.View>
             <Animated.View
               pointerEvents={text && open ? 'auto' : 'none'}
-              style={[styles.clear, { width: s.clear + 8, opacity: clear, transform: [{ scale: clear }] }]}
+              style={[styles.clear, { width: s.clear + 8, opacity: clear, transform: [{ scale: reduce ? 1 : clear }] }]}
             >
               <Pressable
                 hitSlop={12}
@@ -342,6 +368,7 @@ export const SearchBar = forwardRef<ComponentRef<typeof TextInput>, SearchBarPro
         {cancelEnabled ? (
           <>
             <Text
+              maxFontSizeMultiplier={FONT_CAP}
               pointerEvents="none"
               onLayout={(e) => setCancelW(Math.ceil(e.nativeEvent.layout.width) + 14)}
               style={[styles.cancelText, styles.measure, ff, { fontSize: s.font }]}
@@ -357,7 +384,7 @@ export const SearchBar = forwardRef<ComponentRef<typeof TextInput>, SearchBarPro
                   {
                     width: cancelW,
                     opacity: cancelN,
-                    transform: [{ translateX: cancelN.interpolate({ inputRange: [0, 1], outputRange: [24, 0] }) }],
+                    transform: [{ translateX: cancelN.interpolate({ inputRange: [0, 1], outputRange: [reduce ? 0 : 24, 0] }) }],
                   },
                 ]}
               >
@@ -367,7 +394,7 @@ export const SearchBar = forwardRef<ComponentRef<typeof TextInput>, SearchBarPro
                   accessibilityLabel={cancelLabel}
                   onPress={cancel}
                 >
-                  <Text numberOfLines={1} style={[styles.cancelText, ff, { color: tint, fontSize: s.font }]}>
+                  <Text maxFontSizeMultiplier={FONT_CAP} numberOfLines={1} style={[styles.cancelText, ff, { color: tint, fontSize: s.font }]}>
                     {cancelLabel}
                   </Text>
                 </Pressable>
@@ -378,24 +405,33 @@ export const SearchBar = forwardRef<ComponentRef<typeof TextInput>, SearchBarPro
       </View>
 
       {suggestions ? (
-        <SuggestionPanel open={panelOpen && open && visible.length > 0} items={visible} query={query} tint={tint} onSelect={select} />
+        <SuggestionPanel
+          open={panelOpen && open && visible.length > 0}
+          items={visible}
+          query={query}
+          tint={tint}
+          reduce={reduce}
+          onSelect={select}
+        />
       ) : null}
     </View>
   );
 });
 
-/** Dropdown list under the bar: drops in, rows show an icon, bolded match and a hint. */
+/** Dropdown list under the bar: drops in (fades with Reduce Motion), rows show an icon, bolded match and a hint. */
 function SuggestionPanel({
   open,
   items,
   query,
   tint,
+  reduce,
   onSelect,
 }: {
   open: boolean;
   items: SearchSuggestion[];
   query: string;
   tint: string;
+  reduce: boolean;
   onSelect: (item: SearchSuggestion) => void;
 }) {
   const { colors, radius, font } = useKit();
@@ -408,13 +444,14 @@ function SuggestionPanel({
   useEffect(() => {
     if (open) {
       setMounted(true);
-      Animated.spring(enter, { toValue: 1, useNativeDriver: true, ...motion.snappy }).start();
+      if (reduce) Animated.timing(enter, { toValue: 1, duration: 150, useNativeDriver: true }).start();
+      else Animated.spring(enter, { toValue: 1, useNativeDriver: true, ...motion.snappy }).start();
     } else {
       Animated.timing(enter, { toValue: 0, duration: motion.fast, useNativeDriver: true }).start(({ finished }) => {
         if (finished) setMounted(false);
       });
     }
-  }, [open, enter]);
+  }, [open, enter, reduce]);
 
   if (!mounted) return null;
   return (
@@ -428,8 +465,8 @@ function SuggestionPanel({
           borderRadius: radius.lg,
           opacity: enter,
           transform: [
-            { translateY: enter.interpolate({ inputRange: [0, 1], outputRange: [-6, 0] }) },
-            { scale: enter.interpolate({ inputRange: [0, 1], outputRange: [0.98, 1] }) },
+            { translateY: enter.interpolate({ inputRange: [0, 1], outputRange: [reduce ? 0 : -6, 0] }) },
+            { scale: enter.interpolate({ inputRange: [0, 1], outputRange: [reduce ? 1 : 0.98, 1] }) },
           ],
         },
       ]}
@@ -498,6 +535,22 @@ function Icon({ name, size, color }: { name: 'search' | 'recent' | 'trending'; s
   );
 }
 
+function useReduceMotion() {
+  const [reduce, setReduce] = useState(false);
+  useEffect(() => {
+    let alive = true;
+    AccessibilityInfo.isReduceMotionEnabled()
+      .then((r) => alive && setReduce(r))
+      .catch(() => {});
+    const sub = AccessibilityInfo.addEventListener('reduceMotionChanged', setReduce);
+    return () => {
+      alive = false;
+      sub.remove();
+    };
+  }, []);
+  return reduce;
+}
+
 const styles = StyleSheet.create({
   root: { alignSelf: 'stretch' },
   disabled: { opacity: 0.5 },