@expokit/cli 0.4.0 → 0.4.2

package/registry/list-item/files/src/components/ui/list-item.tsx

@@ -104,6 +104,9 @@ const SIZES: Record<ListItemSize, { minH: number; tile: number; glyph: number; a
   lg: { minH: 68, tile: 38, glyph: 21, avatar: 48, title: 17, sub: 14, padY: 14 },
 };
 
+// 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 PAD_X = 16;
 const GAP = 12;
 const AVATAR_COLORS = ['#f97316', '#0ea5e9', '#22c55e', '#a855f7', '#ec4899', '#14b8a6', '#6366f1', '#eab308'];
@@ -219,7 +222,9 @@ export function ListItem({
           {badge === true ? <View style={[styles.dot, { backgroundColor: tint }]} /> : null}
           {badgeText ? (
             <View style={[styles.badge, { borderRadius: radius.capsule(22), backgroundColor: tint }]}>
-              <Text style={[styles.badgeText, ff, { color: readableOn(tint) }]}>{badgeText}</Text>
+              <Text maxFontSizeMultiplier={FONT_CAP} style={[styles.badgeText, ff, { color: readableOn(tint) }]}>
+                {badgeText}
+              </Text>
             </View>
           ) : null}
           {isTextNode(trailing) ? <Text style={[styles.value, ff, { color: colors.mutedForeground }]}>{trailing}</Text> : trailing}
@@ -360,7 +365,9 @@ function AvatarCircle({ src, name = '', color, online, size, ring }: ListItemAva
   return (
     <View style={{ width: size, height: size }}>
       <View style={[styles.avatar, { width: size, height: size, borderRadius: size / 2, backgroundColor: bg }]}>
-        <Text style={[{ color: readableOn(bg), fontSize: size * 0.38, fontWeight: '400' }, ff]}>{initials}</Text>
+        <Text maxFontSizeMultiplier={FONT_CAP} style={[{ color: readableOn(bg), fontSize: size * 0.38, fontWeight: '400' }, ff]}>
+          {initials}
+        </Text>
         {src && !failed ? (
           <Image source={{ uri: src }} onError={() => setFailed(true)} style={[StyleSheet.absoluteFill, { borderRadius: size / 2 }]} />
         ) : null}
@@ -499,7 +506,7 @@ const styles = StyleSheet.create({
   trailing: { flexDirection: 'row', alignItems: 'center', gap: 8, flexShrink: 0, maxWidth: '50%' },
   value: { fontSize: 15, flexShrink: 1 },
   dot: { width: 9, height: 9, borderRadius: 5 },
-  badge: { minWidth: 22, height: 22, paddingHorizontal: 7, alignItems: 'center', justifyContent: 'center' },
+  badge: { minWidth: 22, minHeight: 22, paddingHorizontal: 7, alignItems: 'center', justifyContent: 'center' },
   badgeText: { fontSize: 12, fontWeight: '400', fontVariant: ['tabular-nums'] },
   divider: { position: 'absolute', right: 0, bottom: 0, height: StyleSheet.hairlineWidth },
   avatar: { alignItems: 'center', justifyContent: 'center', overflow: 'hidden' },

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

@@ -1,5 +1,6 @@
 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,6 +88,7 @@ export function OtpInput({
   style,
 }: OtpInputProps) {
   const { colors } = useKit();
+  const reduce = useReduceMotion();
   const input = useRef<ComponentRef<typeof TextInput>>(null);
   const [inner, setInner] = useState('');
   const [focused, setFocused] = useState(false);
@@ -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,6 +209,7 @@ function Cell({
   variant: OtpInputVariant;
   w: number;
   h: number;
+  reduce: boolean;
 }) {
   const { colors, radius, font: kitFont } = useKit();
   const ff = kitFont.family ? { fontFamily: kitFont.family } : null;
@@ -214,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);
@@ -238,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';
@@ -289,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] }) }],
           },
         ]}
       />
@@ -306,7 +320,7 @@ function Cell({
             {secure ? (
               <View style={{ width: dot, height: dot, borderRadius: dot / 2, backgroundColor: fg }} />
             ) : (
-              <Text style={[styles.char, ff, { 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 ? (
@@ -317,8 +331,8 @@ function Cell({
   );
 }
 
-/** Helper / error / success line that fades and slides in whenever its text changes. */
-function Message({ text, kind }: { text: string; kind: CellState }) {
+/** 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;
@@ -326,12 +340,13 @@ function Message({ text, kind }: { text: string; kind: CellState }) {
 
   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 (
@@ -339,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' ? (
@@ -366,6 +381,22 @@ function Message({ text, kind }: { text: string; kind: CellState }) {
   );
 }
 
+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 },
@@ -377,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/password-input/files/src/components/ui/floating-input.tsx

@@ -1,5 +1,6 @@
 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 };
@@ -166,6 +170,7 @@ export const FloatingInput = forwardRef<ComponentRef<typeof TextInput>, Floating
   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.
@@ -200,29 +205,36 @@ export const FloatingInput = forwardRef<ComponentRef<typeof TextInput>, Floating
   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<ComponentRef<typeof TextInput>, Floating
                 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<ComponentRef<typeof TextInput>, Floating
                 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<ComponentRef<typeof TextInput>, Floating
                 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<ComponentRef<typeof TextInput>, Floating
             ) : 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<ComponentRef<typeof TextInput>, Floating
                   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<ComponentRef<typeof TextInput>, Floating
             {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<ComponentRef<typeof TextInput>, Floating
       {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<ComponentRef<typeof TextInput>, Floating
 
 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] }) }],
         },
       ]}
     >
@@ -510,11 +543,27 @@ function flattenView(style: StyleProp<ViewStyle>): 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 },

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

@@ -1,5 +1,5 @@
 import React, { forwardRef, useEffect, useMemo, useRef, useState, type ComponentRef } from 'react';
-import { Animated, Pressable, StyleSheet, Text, View, type TextInput } from 'react-native';
+import { AccessibilityInfo, Animated, Pressable, StyleSheet, Text, View, type TextInput } from 'react-native';
 import Svg, { Circle, Path } from 'react-native-svg';
 
 import { FloatingInput, type FloatingInputProps } from '@/components/ui/floating-input';
@@ -34,6 +34,10 @@ export interface PasswordInputProps extends Omit<FloatingInputProps, 'secureText
   mismatchMessage?: string;
 }
 
+// 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 LEVEL_LABELS = ['Too short', 'Weak', 'Okay', 'Strong', 'Very strong'];
 const ICON = { sm: 18, md: 22, lg: 24 };
 
@@ -70,6 +74,7 @@ export const PasswordInput = forwardRef<ComponentRef<typeof TextInput>, Password
   ref
 ) {
   const { colors } = useKit();
+  const reduce = useReduceMotion();
   const [hidden, setHidden] = useState(true);
   const [inner, setInner] = useState(defaultValue ?? '');
   const text = value ?? inner;
@@ -84,17 +89,21 @@ export const PasswordInput = forwardRef<ComponentRef<typeof TextInput>, Password
 
   const eye = useRef(new Animated.Value(hidden ? 0 : 1)).current; // native: 1 = visible
   useEffect(() => {
-    Animated.spring(eye, { toValue: hidden ? 0 : 1, useNativeDriver: true, ...motion.snappy }).start();
-  }, [hidden, eye]);
+    if (reduce) Animated.timing(eye, { toValue: hidden ? 0 : 1, duration: 150, useNativeDriver: true }).start();
+    else Animated.spring(eye, { toValue: hidden ? 0 : 1, useNativeDriver: true, ...motion.snappy }).start();
+  }, [hidden, eye, reduce]);
 
   const iconColor = iconColorProp ?? colors.mutedForeground;
   const iconSize = ICON[size];
   const fade = (on: 0 | 1) => ({
     opacity: eye.interpolate({ inputRange: [0, 1], outputRange: on ? [0, 1] : [1, 0], extrapolate: 'clamp' }),
-    transform: [
-      { scale: eye.interpolate({ inputRange: [0, 1], outputRange: on ? [0.6, 1] : [1, 0.6] }) },
-      { rotate: eye.interpolate({ inputRange: [0, 1], outputRange: on ? ['-45deg', '0deg'] : ['0deg', '45deg'] }) },
-    ],
+    // Reduce Motion: a plain cross-fade, no spin or scale.
+    transform: reduce
+      ? []
+      : [
+          { scale: eye.interpolate({ inputRange: [0, 1], outputRange: on ? [0.6, 1] : [1, 0.6] }) },
+          { rotate: eye.interpolate({ inputRange: [0, 1], outputRange: on ? ['-45deg', '0deg'] : ['0deg', '45deg'] }) },
+        ],
   });
 
   return (
@@ -137,8 +146,8 @@ export const PasswordInput = forwardRef<ComponentRef<typeof TextInput>, Password
           </Pressable>
         }
       />
-      {strength && !confirming && text.length > 0 ? <Meter level={level} /> : null}
-      {rules && !confirming ? <Checklist rules={rules} value={text} /> : null}
+      {strength && !confirming && text.length > 0 ? <Meter level={level} reduce={reduce} /> : null}
+      {rules && !confirming ? <Checklist rules={rules} value={text} reduce={reduce} /> : null}
     </View>
   );
 });
@@ -151,7 +160,7 @@ const EYE_OFF =
   'M2 2l20 20';
 
 /** Four segments that spring-fill left to right; the colour slides with the score. */
-function Meter({ level }: { level: number }) {
+function Meter({ level, reduce }: { level: number; reduce: boolean }) {
   const { colors, dark, font } = useKit();
   const palette = [colors.mutedForeground, colors.danger, colors.warning, colors.success, colors.success];
   const fills = useRef([0, 1, 2, 3].map(() => new Animated.Value(0))).current; // native: scaleX
@@ -159,16 +168,24 @@ function Meter({ level }: { level: number }) {
   const enter = useRef(new Animated.Value(0)).current; // native
 
   useEffect(() => {
-    Animated.spring(enter, { toValue: 1, useNativeDriver: true, ...motion.snappy }).start();
+    if (reduce) enter.setValue(1);
+    else Animated.spring(enter, { toValue: 1, useNativeDriver: true, ...motion.snappy }).start();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [enter]);
 
   useEffect(() => {
+    if (reduce) {
+      // Segments appear filled at once; the colour still fades.
+      fills.forEach((a, i) => a.setValue(i < level ? 1 : 0));
+      Animated.timing(tone, { toValue: level, duration: 150, useNativeDriver: false }).start();
+      return;
+    }
     Animated.stagger(
       50,
       fills.map((a, i) => Animated.spring(a, { toValue: i < level ? 1 : 0, useNativeDriver: true, ...motion.snappy }))
     ).start();
     Animated.timing(tone, { toValue: level, duration: 220, useNativeDriver: false }).start();
-  }, [level, fills, tone]);
+  }, [level, fills, tone, reduce]);
 
   const color = tone.interpolate({ inputRange: [0, 1, 2, 3, 4], outputRange: palette });
   const track = dark ? colors.muted : colors.border;
@@ -199,27 +216,28 @@ function Meter({ level }: { level: number }) {
           </View>
         ))}
       </View>
-      <Text style={[styles.level, font.family ? { fontFamily: font.family } : null, { color: palette[level] }]}>{LEVEL_LABELS[level]}</Text>
+      <Text maxFontSizeMultiplier={FONT_CAP} style={[styles.level, font.family ? { fontFamily: font.family } : null, { color: palette[level] }]}>{LEVEL_LABELS[level]}</Text>
     </Animated.View>
   );
 }
 
-function Checklist({ rules, value }: { rules: PasswordRequirement[]; value: string }) {
+function Checklist({ rules, value, reduce }: { rules: PasswordRequirement[]; value: string; reduce: boolean }) {
   return (
     <View style={styles.checklist} accessibilityRole="list">
       {rules.map((r) => (
-        <Requirement key={r.label} label={r.label} met={r.test(value)} />
+        <Requirement key={r.label} label={r.label} met={r.test(value)} reduce={reduce} />
       ))}
     </View>
   );
 }
 
-function Requirement({ label, met }: { label: string; met: boolean }) {
+function Requirement({ label, met, reduce }: { label: string; met: boolean; reduce: boolean }) {
   const { colors, dark, font } = useKit();
   const tick = useRef(new Animated.Value(met ? 1 : 0)).current; // native
   useEffect(() => {
-    Animated.spring(tick, { toValue: met ? 1 : 0, useNativeDriver: true, ...motion.bouncy }).start();
-  }, [met, tick]);
+    if (reduce) Animated.timing(tick, { toValue: met ? 1 : 0, duration: 150, useNativeDriver: true }).start();
+    else Animated.spring(tick, { toValue: met ? 1 : 0, useNativeDriver: true, ...motion.bouncy }).start();
+  }, [met, tick, reduce]);
 
   return (
     <View
@@ -237,7 +255,7 @@ function Requirement({ label, met }: { label: string; met: boolean }) {
             StyleSheet.absoluteFill,
             {
               opacity: tick.interpolate({ inputRange: [0, 1], outputRange: [0, 1], extrapolate: 'clamp' }),
-              transform: [{ scale: tick.interpolate({ inputRange: [0, 1], outputRange: [0.2, 1] }) }],
+              transform: reduce ? [] : [{ scale: tick.interpolate({ inputRange: [0, 1], outputRange: [0.2, 1] }) }],
             },
           ]}
         >
@@ -258,6 +276,22 @@ function Requirement({ label, met }: { label: string; met: boolean }) {
   );
 }
 
+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({
   meter: { flexDirection: 'row', alignItems: 'center', gap: 10, marginTop: 10, marginHorizontal: 4 },
   bars: { flex: 1, flexDirection: 'row', gap: 6 },