@expokit/cli 0.3.0 → 0.4.1

package/registry/otp-input/files/src/components/ui/otp-input.tsx

@@ -1,5 +1,6 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState, type ComponentRef } from 'react';
 import {
+  AccessibilityInfo,
   Animated,
   Easing,
   Platform,
@@ -55,6 +56,9 @@ export interface OtpInputProps {
 type CellState = 'idle' | 'error' | 'success';
 
 const GAP = 8;
+// Controls stop growing at iOS's largest standard text size (xxxL ≈ 1.35×) so they keep their shape;
+// content text scales all the way. A capped digit (1.35 × 0.46w, line 1.2×) still fits the shortest cell (pill, 1w).
+const FONT_CAP = 1.35;
 /** react-native-web draws the browser focus outline; our border + halo is the focus indicator. */
 const webNoOutline = Platform.OS === 'web' ? ({ outlineStyle: 'none', outlineWidth: 0 } as object) : null;
 const SEP = 22;
@@ -84,7 +88,8 @@ export function OtpInput({
   style,
 }: OtpInputProps) {
   const { colors } = useKit();
-  const input = useRef<TextInput>(null);
+  const reduce = useReduceMotion();
+  const input = useRef<ComponentRef<typeof TextInput>>(null);
   const [inner, setInner] = useState('');
   const [focused, setFocused] = useState(false);
   const [width, setWidth] = useState(0);
@@ -92,12 +97,13 @@ export function OtpInput({
   const shake = useRef(new Animated.Value(0)).current;
 
   useEffect(() => {
-    if (!error) return;
+    // Reduce Motion: no shake; the cells still turn the danger colour.
+    if (!error || reduce) return;
     shake.setValue(0);
     Animated.sequence(
       [10, -9, 7, -5, 3, 0].map((x) => Animated.timing(shake, { toValue: x, duration: 45, useNativeDriver: true }))
     ).start();
-  }, [error, shake]);
+  }, [error, shake, reduce]);
 
   const change = (raw: string) => {
     // No maxLength on the input, so pasting "123-456" or a longer SMS snippet still fills every cell.
@@ -152,6 +158,7 @@ export function OtpInput({
                 variant={variant}
                 w={cell}
                 h={cellH}
+                reduce={reduce}
               />
             </React.Fragment>
           ))}
@@ -176,7 +183,7 @@ export function OtpInput({
         importantForAccessibility="yes"
         style={[styles.hidden, webNoOutline]}
       />
-      {message ? <Message text={message} kind={state} /> : null}
+      {message ? <Message text={message} kind={state} reduce={reduce} /> : null}
     </View>
   );
 }
@@ -191,6 +198,7 @@ function Cell({
   variant,
   w,
   h,
+  reduce,
 }: {
   index: number;
   char?: string;
@@ -201,8 +209,10 @@ function Cell({
   variant: OtpInputVariant;
   w: number;
   h: number;
+  reduce: boolean;
 }) {
-  const { colors, radius } = useKit();
+  const { colors, radius, font: kitFont } = useKit();
+  const ff = kitFont.family ? { fontFamily: kitFont.family } : null;
   const filled = !!char;
   // Native driver: digit pop, caret blink, halo, success pulse.
   const pop = useRef(new Animated.Value(filled ? 1 : 0)).current;
@@ -213,17 +223,22 @@ function Cell({
   const ring = useRef(new Animated.Value(0)).current;
 
   useEffect(() => {
-    if (char) {
+    if (char && reduce) {
+      // Reduce Motion: the digit appears without the pop.
+      pop.setValue(1);
+    } else if (char) {
       pop.setValue(0.3);
       Animated.spring(pop, { toValue: 1, useNativeDriver: true, ...motion.bouncy }).start();
     } else {
       Animated.timing(pop, { toValue: 0, duration: 110, useNativeDriver: true }).start();
     }
-  }, [char, pop]);
+  }, [char, pop, reduce]);
 
   useEffect(() => {
     const to = active ? 1 : 0;
-    Animated.spring(halo, { toValue: to, useNativeDriver: true, ...motion.snappy }).start();
+    // Reduce Motion: the halo only fades (its scale is pinned below). The caret keeps blinking.
+    if (reduce) Animated.timing(halo, { toValue: to, duration: 150, useNativeDriver: true }).start();
+    else Animated.spring(halo, { toValue: to, useNativeDriver: true, ...motion.snappy }).start();
     Animated.timing(ring, { toValue: to, duration: motion.fast, useNativeDriver: false }).start();
     if (!active) return;
     caret.setValue(1);
@@ -237,17 +252,17 @@ function Cell({
     );
     blink.start();
     return () => blink.stop();
-  }, [active, halo, ring, caret]);
+  }, [active, halo, ring, caret, reduce]);
 
   useEffect(() => {
-    if (state !== 'success') return;
+    if (state !== 'success' || reduce) return;
     pulse.setValue(0);
     Animated.sequence([
       Animated.delay(index * 55),
       Animated.timing(pulse, { toValue: 1, duration: 140, easing: Easing.out(Easing.quad), useNativeDriver: true }),
       Animated.spring(pulse, { toValue: 0, useNativeDriver: true, ...motion.bouncy }),
     ]).start();
-  }, [state, index, pulse]);
+  }, [state, index, pulse, reduce]);
 
   const underline = variant === 'underline';
   const pill = variant === 'pill';
@@ -288,7 +303,7 @@ function Cell({
             borderRadius: underline ? 10 : r + 4,
             backgroundColor: alpha(tone, 0.18),
             opacity: halo,
-            transform: [{ scale: halo.interpolate({ inputRange: [0, 1], outputRange: [0.86, 1] }) }],
+            transform: [{ scale: halo.interpolate({ inputRange: [0, 1], outputRange: [reduce ? 1 : 0.86, 1] }) }],
           },
         ]}
       />
@@ -305,7 +320,7 @@ function Cell({
             {secure ? (
               <View style={{ width: dot, height: dot, borderRadius: dot / 2, backgroundColor: fg }} />
             ) : (
-              <Text style={[styles.char, { color: fg, fontSize: font, lineHeight: Math.round(font * 1.2) }]}>{char}</Text>
+              <Text maxFontSizeMultiplier={FONT_CAP} style={[styles.char, ff, { color: fg, fontSize: font, lineHeight: Math.round(font * 1.2) }]}>{char}</Text>
             )}
           </Animated.View>
         ) : active ? (
@@ -316,20 +331,22 @@ function Cell({
   );
 }
 
-/** Helper / error / success line that fades and slides in whenever its text changes. */
-function Message({ text, kind }: { text: string; kind: CellState }) {
-  const { colors } = useKit();
+/** Helper / error / success line that fades and slides in whenever its text changes (only fades with Reduce Motion). */
+function Message({ text, kind, reduce }: { text: string; kind: CellState; reduce: boolean }) {
+  const { colors, font } = useKit();
+  const ff = font.family ? { fontFamily: font.family } : null;
   const enter = useRef(new Animated.Value(0)).current;
   const draw = useRef(new Animated.Value(0)).current;
 
   useEffect(() => {
     enter.setValue(0);
-    Animated.timing(enter, { toValue: 1, duration: motion.normal, easing: Easing.out(Easing.cubic), useNativeDriver: true }).start();
-    draw.setValue(0);
-    if (kind === 'success') {
+    Animated.timing(enter, { toValue: 1, duration: reduce ? 150 : motion.normal, easing: Easing.out(Easing.cubic), useNativeDriver: true }).start();
+    // Reduce Motion: the tick is drawn at once.
+    draw.setValue(reduce ? 1 : 0);
+    if (kind === 'success' && !reduce) {
       Animated.timing(draw, { toValue: 1, duration: 360, delay: 120, easing: Easing.out(Easing.cubic), useNativeDriver: false }).start();
     }
-  }, [text, kind, enter, draw]);
+  }, [text, kind, enter, draw, reduce]);
 
   const color = kind === 'error' ? colors.danger : kind === 'success' ? colors.success : colors.mutedForeground;
   return (
@@ -337,7 +354,7 @@ function Message({ text, kind }: { text: string; kind: CellState }) {
       accessibilityLiveRegion="polite"
       style={[
         styles.message,
-        { opacity: enter, transform: [{ translateY: enter.interpolate({ inputRange: [0, 1], outputRange: [4, 0] }) }] },
+        { opacity: enter, transform: [{ translateY: enter.interpolate({ inputRange: [0, 1], outputRange: [reduce ? 0 : 4, 0] }) }] },
       ]}
     >
       {kind === 'error' ? (
@@ -359,11 +376,27 @@ function Message({ text, kind }: { text: string; kind: CellState }) {
           />
         </Svg>
       ) : null}
-      <Text style={[styles.messageText, { color }]}>{text}</Text>
+      <Text style={[styles.messageText, ff, { color }]}>{text}</Text>
     </Animated.View>
   );
 }
 
+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 },
@@ -375,6 +408,6 @@ const styles = StyleSheet.create({
   sep: { alignItems: 'center', justifyContent: 'center' },
   dash: { width: 10, height: 2, borderRadius: 1, opacity: 0.6 },
   message: { flexDirection: 'row', alignItems: 'center', justifyContent: 'center', gap: 6, marginTop: 6 },
-  messageText: { fontSize: 12.5, lineHeight: 17, fontWeight: '400' },
+  messageText: { flexShrink: 1, fontSize: 12.5, lineHeight: 17, fontWeight: '400' },
   hidden: { position: 'absolute', width: 1, height: 1, opacity: 0 },
 });

package/registry/otp-input/files/src/lib/kit.tsx

@@ -181,14 +181,17 @@ export function useKit(): Theme {
   return useMemo(() => build(scheme, ctx?.overrides), [scheme, ctx?.overrides]);
 }
 
-/** Shared motion presets so the whole kit moves the same way. */
+/**
+ * Shared motion presets so the whole kit moves the same way. Every spring is critically damped
+ * (damping ≥ 2·√(stiffness·mass)): it settles smoothly with no overshoot or wobble.
+ */
 export const motion = {
   /** Toggles, selection indicators. */
-  snappy: { damping: 18, stiffness: 260, mass: 0.8 },
-  /** Press feedback, pops. */
-  bouncy: { damping: 11, stiffness: 220, mass: 0.7 },
+  snappy: { damping: 30, stiffness: 260, mass: 0.8 },
+  /** Press feedback, pops. (Kept under its old name; it no longer bounces.) */
+  bouncy: { damping: 26, stiffness: 220, mass: 0.7 },
   /** Sheets, layout changes. */
-  gentle: { damping: 22, stiffness: 160, mass: 1 },
+  gentle: { damping: 27, stiffness: 160, mass: 1 },
   fast: 160,
   normal: 240,
 };

package/registry/password-input/files/src/components/ui/floating-input.tsx

@@ -1,5 +1,6 @@
-import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState, type ComponentRef } from 'react';
 import {
+  AccessibilityInfo,
   Animated,
   Easing,
   Platform,
@@ -85,6 +86,9 @@ export const FLOATING_INPUT_SIZES = {
   md: { height: 54, font: 16, floated: 12.5, padX: 16, icon: 18, radius: 0 },
   lg: { height: 64, font: 18, floated: 13.5, padX: 18, icon: 20, radius: 4 },
 };
+// 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 HALO = 4;
 /** Font size of the static label used when `floatingLabel` is false. */
 const LABEL_ABOVE_FONT = { sm: 13, md: 14, lg: 14.5 };
@@ -99,7 +103,7 @@ const NO_WEB_OUTLINE = Platform.OS === 'web' ? ({ outlineStyle: 'none', outlineW
 const AUTOFILL_CSS = `@keyframes ekAutofillOn{from{}to{}}@keyframes ekAutofillOff{from{}to{}}
 input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus{animation:ekAutofillOn 1ms;-webkit-text-fill-color:currentColor!important;caret-color:currentColor;transition:background-color 99999s 0s,color 99999s 0s!important}
 input:not(:-webkit-autofill){animation:ekAutofillOff 1ms}`;
-function useWebAutofill(inputRef: React.RefObject<TextInput | null>, onChange: (filled: boolean) => void) {
+function useWebAutofill(inputRef: React.RefObject<ComponentRef<typeof TextInput> | null>, onChange: (filled: boolean) => void) {
   useEffect(() => {
     if (Platform.OS !== 'web' || typeof document === 'undefined') return;
     if (!document.getElementById('expokit-autofill')) {
@@ -126,7 +130,7 @@ function useWebAutofill(inputRef: React.RefObject<TextInput | null>, onChange: (
  * cutting a notch in the outline (Material-style). Focus draws a soft halo, errors shake,
  * success pops a check — all spring-driven.
  */
-export const FloatingInput = forwardRef<TextInput, FloatingInputProps>(function FloatingInput(
+export const FloatingInput = forwardRef<ComponentRef<typeof TextInput>, FloatingInputProps>(function FloatingInput(
   {
     label,
     floatingLabel = true,
@@ -166,10 +170,11 @@ export const FloatingInput = forwardRef<TextInput, FloatingInputProps>(function
   ref
 ) {
   const { colors, radius, font } = useKit();
+  const reduce = useReduceMotion();
   const ff = font.family ? { fontFamily: font.family } : null;
   const S = FLOATING_INPUT_SIZES[size];
   // The user's border colour only replaces the resting one; numeric height / radius drive the layout maths.
-  const { borderColor: userBorder, ...userField } = StyleSheet.flatten(fieldStyle) ?? {};
+  const { borderColor: userBorder, ...userField } = flattenView(fieldStyle);
   const userLabelColor = StyleSheet.flatten(labelStyleProp)?.color;
   const HEIGHT = typeof userField.height === 'number' ? userField.height : S.height;
   // Floated size stays relative to the resting size, so a bigger label floats bigger at the same ratio.
@@ -179,8 +184,8 @@ export const FloatingInput = forwardRef<TextInput, FloatingInputProps>(function
   const slot = S.icon + 10; // room for the clear button / check
   const tint = accent ?? colors.accent;
   const bg = surface ?? colors.background;
-  const inputRef = useRef<TextInput>(null);
-  useImperativeHandle(ref, () => inputRef.current as TextInput);
+  const inputRef = useRef<ComponentRef<typeof TextInput>>(null);
+  useImperativeHandle(ref, () => inputRef.current as ComponentRef<typeof TextInput>);
 
   const [focused, setFocused] = useState(false);
   const [inner, setInner] = useState(defaultValue ?? '');
@@ -200,29 +205,36 @@ export const FloatingInput = forwardRef<TextInput, FloatingInputProps>(function
   const check = useRef(new Animated.Value(ok ? 1 : 0)).current; // native
 
   useEffect(() => {
-    Animated.spring(float, { toValue: floating ? 1 : 0, useNativeDriver: true, ...motion.snappy }).start();
-  }, [floating, float]);
+    if (reduce) float.setValue(floating ? 1 : 0);
+    else Animated.spring(float, { toValue: floating ? 1 : 0, useNativeDriver: true, ...motion.snappy }).start();
+  }, [floating, float, reduce]);
 
   useEffect(() => {
     Animated.timing(focus, { toValue: isFocused ? 1 : 0, duration: 180, easing: Easing.out(Easing.quad), useNativeDriver: false }).start();
-    Animated.spring(glow, { toValue: isFocused ? 1 : 0, useNativeDriver: true, ...motion.snappy }).start();
-  }, [isFocused, focus, glow]);
+    // Reduce Motion: halo and indicator bar only fade (their scales are pinned below).
+    if (reduce) Animated.timing(glow, { toValue: isFocused ? 1 : 0, duration: 150, useNativeDriver: true }).start();
+    else Animated.spring(glow, { toValue: isFocused ? 1 : 0, useNativeDriver: true, ...motion.snappy }).start();
+  }, [isFocused, focus, glow, reduce]);
 
   useEffect(() => {
-    Animated.spring(clear, { toValue: clearable && text && editable ? 1 : 0, useNativeDriver: true, ...motion.bouncy }).start();
-  }, [clearable, text, editable, clear]);
+    const to = clearable && text && editable ? 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();
+  }, [clearable, text, editable, clear, reduce]);
 
   useEffect(() => {
-    Animated.spring(check, { toValue: ok ? 1 : 0, useNativeDriver: true, ...motion.bouncy }).start();
-  }, [ok, check]);
+    if (reduce) Animated.timing(check, { toValue: ok ? 1 : 0, duration: 150, useNativeDriver: true }).start();
+    else Animated.spring(check, { toValue: ok ? 1 : 0, useNativeDriver: true, ...motion.bouncy }).start();
+  }, [ok, check, reduce]);
 
   useEffect(() => {
-    if (!error) return;
+    // Reduce Motion: no shake; the red border and message still flag the error.
+    if (!error || reduce) return;
     shake.setValue(0);
     Animated.sequence(
       [10, -8, 6, -4, 0].map((x) => Animated.timing(shake, { toValue: x, duration: 55, useNativeDriver: true }))
     ).start();
-  }, [error, shake]);
+  }, [error, shake, reduce]);
 
   const setText = (next: string) => {
     if (value === undefined) setInner(next);
@@ -310,23 +322,24 @@ export const FloatingInput = forwardRef<TextInput, FloatingInputProps>(function
                 borderRadius: corner + HALO,
                 backgroundColor: active,
                 opacity: glow.interpolate({ inputRange: [0, 1], outputRange: [0, 0.18], extrapolate: 'clamp' }),
-                transform: [{ scale: glow.interpolate({ inputRange: [0, 1], outputRange: [0.97, 1] }) }],
+                transform: [{ scale: glow.interpolate({ inputRange: [0, 1], outputRange: [reduce ? 1 : 0.97, 1] }) }],
               },
             ]}
           />
         )}
         <Pressable onPress={() => inputRef.current?.focus()} disabled={!editable} accessible={false}>
-          <Animated.View style={[styles.field, boxStyle, { height: HEIGHT }, userField, { borderColor }]}>
+          <Animated.View style={[styles.field, boxStyle, { minHeight: HEIGHT }, userField, { borderColor }]}>
             {left ? <View style={[styles.left, { left: underline ? 2 : S.padX - 2 }, underline && { top: contentTop }]}>{left}</View> : null}
             <View style={[styles.row, { paddingLeft: leftPad, paddingRight: rightPad, paddingTop: contentTop }]}>
               {prefix ? (
-                <Animated.Text style={[styles.affix, styles.prefix, ff, { fontSize: S.font }, { color: colors.mutedForeground }, prefixStyle, { opacity: affixOpacity }]}>
+                <Animated.Text maxFontSizeMultiplier={FONT_CAP} style={[styles.affix, styles.prefix, ff, { fontSize: S.font }, { color: colors.mutedForeground }, prefixStyle, { opacity: affixOpacity }]}>
                   {prefix}
                 </Animated.Text>
               ) : null}
               <TextInput
                 ref={inputRef}
                 accessibilityLabel={label}
+                maxFontSizeMultiplier={FONT_CAP}
                 {...props}
                 maxLength={maxLength}
                 editable={editable}
@@ -347,7 +360,7 @@ export const FloatingInput = forwardRef<TextInput, FloatingInputProps>(function
                 style={[styles.input, ff, { color: colors.foreground, fontSize: S.font }, inputStyle, NO_WEB_OUTLINE]}
               />
               {suffix ? (
-                <Animated.Text style={[styles.affix, styles.suffix, ff, { fontSize: S.font }, { color: colors.mutedForeground }, suffixStyle, { opacity: affixOpacity }]}>
+                <Animated.Text maxFontSizeMultiplier={FONT_CAP} style={[styles.affix, styles.suffix, ff, { fontSize: S.font }, { color: colors.mutedForeground }, suffixStyle, { opacity: affixOpacity }]}>
                   {suffix}
                 </Animated.Text>
               ) : null}
@@ -358,6 +371,7 @@ export const FloatingInput = forwardRef<TextInput, FloatingInputProps>(function
                 style={[styles.labelWrap, { left: leftPad, right: right ? adorn : S.padX - 4, top: contentTop, height: HEIGHT - contentTop }, labelStyle]}
               >
                 <Animated.Text
+                  maxFontSizeMultiplier={FONT_CAP}
                   numberOfLines={1}
                   style={[
                     styles.label,
@@ -380,7 +394,7 @@ export const FloatingInput = forwardRef<TextInput, FloatingInputProps>(function
             ) : null}
             {clearable ? (
               <Animated.View
-                style={[styles.slot, { right: edge, top: contentTop, opacity: clear, transform: [{ scale: clear }] }]}
+                style={[styles.slot, { right: edge, top: contentTop, opacity: clear, transform: [{ scale: reduce ? 1 : clear }] }]}
                 pointerEvents={text && editable ? 'box-none' : 'none'}
               >
                 <Pressable
@@ -408,8 +422,8 @@ export const FloatingInput = forwardRef<TextInput, FloatingInputProps>(function
                   top: contentTop,
                   opacity: check.interpolate({ inputRange: [0, 1], outputRange: [0, 1], extrapolate: 'clamp' }),
                   transform: [
-                    { scale: check.interpolate({ inputRange: [0, 1], outputRange: [0.3, 1] }) },
-                    { rotate: check.interpolate({ inputRange: [0, 1], outputRange: ['-30deg', '0deg'] }) },
+                    { scale: check.interpolate({ inputRange: [0, 1], outputRange: [reduce ? 1 : 0.3, 1] }) },
+                    { rotate: check.interpolate({ inputRange: [0, 1], outputRange: [reduce ? '0deg' : '-30deg', '0deg'] }) },
                   ],
                 },
               ]}
@@ -423,10 +437,14 @@ export const FloatingInput = forwardRef<TextInput, FloatingInputProps>(function
             {outlined ? null : (
               <>
                 <View pointerEvents="none" style={[styles.baseLine, { height: underline ? 1.5 : 1, backgroundColor: rest }]} />
-                {/* Grows out from the centre on focus. */}
+                {/* Grows out from the centre on focus (fades in with Reduce Motion). */}
                 <Animated.View
                   pointerEvents="none"
-                  style={[styles.bar, { backgroundColor: active, transform: [{ scaleX: glowClamped }] }]}
+                  style={[
+                    styles.bar,
+                    { backgroundColor: active },
+                    reduce ? { opacity: glowClamped } : { transform: [{ scaleX: glowClamped }] },
+                  ]}
                 />
               </>
             )}
@@ -436,10 +454,11 @@ export const FloatingInput = forwardRef<TextInput, FloatingInputProps>(function
       {message || showCounter ? (
         <View style={[styles.footer, underline && styles.footerFlush]}>
           <View style={styles.messageSlot}>
-            {message ? <FieldMessage key={tone + message} text={message} tone={tone} color={toneColor} style={messageStyle} /> : null}
+            {message ? <FieldMessage key={tone + message} text={message} tone={tone} color={toneColor} style={messageStyle} reduce={reduce} /> : null}
           </View>
           {showCounter ? (
             <Text
+              maxFontSizeMultiplier={FONT_CAP}
               style={[
                 styles.count,
                 ff,
@@ -459,13 +478,27 @@ export const FloatingInput = forwardRef<TextInput, FloatingInputProps>(function
 
 type MessageTone = 'error' | 'success' | 'helper';
 
-/** Helper / error / success line. Error and success slide up and fade in. */
-function FieldMessage({ text, tone, color, style }: { text: string; tone: MessageTone; color: string; style?: StyleProp<TextStyle> }) {
+/** Helper / error / success line. Error and success slide up and fade in (only fade with Reduce Motion). */
+function FieldMessage({
+  text,
+  tone,
+  color,
+  style,
+  reduce,
+}: {
+  text: string;
+  tone: MessageTone;
+  color: string;
+  style?: StyleProp<TextStyle>;
+  reduce: boolean;
+}) {
   const { font } = useKit();
   const enter = useRef(new Animated.Value(tone === 'helper' ? 1 : 0)).current; // native
   useEffect(() => {
-    if (tone !== 'helper') Animated.spring(enter, { toValue: 1, useNativeDriver: true, ...motion.snappy }).start();
-  }, [tone, enter]);
+    if (tone === 'helper') return;
+    if (reduce) Animated.timing(enter, { toValue: 1, duration: 150, useNativeDriver: true }).start();
+    else Animated.spring(enter, { toValue: 1, useNativeDriver: true, ...motion.snappy }).start();
+  }, [tone, enter, reduce]);
 
   return (
     <Animated.View
@@ -473,7 +506,7 @@ function FieldMessage({ text, tone, color, style }: { text: string; tone: Messag
         styles.message,
         {
           opacity: enter.interpolate({ inputRange: [0, 1], outputRange: [0, 1], extrapolate: 'clamp' }),
-          transform: [{ translateY: enter.interpolate({ inputRange: [0, 1], outputRange: [4, 0] }) }],
+          transform: [{ translateY: enter.interpolate({ inputRange: [0, 1], outputRange: [reduce ? 0 : 4, 0] }) }],
         },
       ]}
     >
@@ -500,11 +533,37 @@ function FieldMessage({ text, tone, color, style }: { text: string; tone: Messag
   );
 }
 
+/**
+ * The user's field style as one object. Not StyleSheet.flatten: with TypeScript 6 its RN 0.88 signature
+ * rejects a plain StyleProp<ViewStyle> once expo/types adds web-only keys to ViewStyle.
+ */
+function flattenView(style: StyleProp<ViewStyle>): ViewStyle {
+  if (!style || typeof style !== 'object') return {};
+  if (Array.isArray(style)) return Object.assign({}, ...style.map((s) => flattenView(s as StyleProp<ViewStyle>)));
+  return style as ViewStyle;
+}
+
+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({
   disabled: { opacity: 0.5 },
   halo: { position: 'absolute', top: -HALO, left: -HALO, right: -HALO, bottom: -HALO },
   field: { justifyContent: 'center' },
-  row: { flexDirection: 'row', alignItems: 'center', height: '100%' },
+  row: { flexDirection: 'row', alignItems: 'center', flexGrow: 1 },
   input: { flex: 1, alignSelf: 'stretch', paddingVertical: 0, paddingHorizontal: 0 },
   affix: { fontWeight: '400' },
   prefix: { marginRight: 4 },