@expokit/cli 0.3.0 → 0.4.1

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

@@ -1,10 +1,12 @@
 import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import {
+  AccessibilityInfo,
   Animated,
   Pressable,
   StyleSheet,
   Text,
   View,
+  useWindowDimensions,
   type AccessibilityActionEvent,
   type LayoutChangeEvent,
   type StyleProp,
@@ -65,6 +67,10 @@ export interface StepperProps {
   valueStyle?: StyleProp<TextStyle>;
 }
 
+// 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 in one table so the sizes read clearly different. */
 const SIZES: Record<StepperSize | 'xs', { btn: number; font: number; icon: number; num: number }> = {
   xs: { btn: 28, font: 15, icon: 12, num: 26 },
@@ -118,7 +124,9 @@ export function Stepper({
   buttonStyle,
   valueStyle,
 }: StepperProps) {
-  const { colors, radius } = useKit();
+  const { colors, radius, font } = useKit();
+  const ff = font.family ? { fontFamily: font.family } : null;
+  const reduce = useReduceMotion();
   const variant: StepperVariant = variantProp in LEGACY ? LEGACY[variantProp as StepperLegacyVariant] : (variantProp as StepperVariant);
   const vertical = variant !== 'cart' && (orientation ? orientation === 'vertical' : variantProp === 'vertical');
   const tint = accent ?? colors.accent;
@@ -133,9 +141,11 @@ export function Stepper({
   const [track, setTrack] = useState({ v: current, dir: 1 });
   if (track.v !== current) setTrack({ v: current, dir: current > track.v ? 1 : -1 });
 
-  // Press past a limit: the number nudges toward the wall and springs back.
+  // Press past a limit: the number nudges toward the wall and springs back (not with Reduce Motion;
+  // the dimmed button already says it's the limit).
   const bump = useRef(new Animated.Value(0)).current;
   const nudge = (dir: 1 | -1) => {
+    if (reduce) return;
     Animated.sequence([
       Animated.timing(bump, { toValue: dir * 4, duration: 60, useNativeDriver: true }),
       Animated.spring(bump, { toValue: 0, useNativeDriver: true, ...motion.bouncy }),
@@ -199,6 +209,7 @@ export function Stepper({
     fontSize,
     lineHeight: Math.round(fontSize * 1.3),
     color: numColor,
+    ...ff,
     ...flatValue,
   };
 
@@ -236,6 +247,7 @@ export function Stepper({
       limit={dir === 1 ? atMax : atMin}
       disabled={!!disabled}
       label={a11y ?? `${dir === 1 ? 'Increase' : 'Decrease'}${title ? ` ${title}` : ''}`}
+      reduce={reduce}
       style={buttonStyle}
       onPressIn={() => startRepeat(dir)}
       onPressOut={stopRepeat}
@@ -244,9 +256,9 @@ export function Stepper({
 
   const number = (
     <View style={styles.roll}>
-      <RollingText text={text} dir={track.dir} style={numStyle} />
+      <RollingText text={text} dir={track.dir} style={numStyle} reduce={reduce} />
       {suffixText ? (
-        <Text style={[styles.num, styles.suffix, numStyle, { fontSize: fontSize * 0.82, color: isCart ? alpha(onCart, 0.8) : colors.mutedForeground }]}>
+        <Text maxFontSizeMultiplier={FONT_CAP} style={[styles.num, styles.suffix, numStyle, { fontSize: fontSize * 0.82, color: isCart ? alpha(onCart, 0.8) : colors.mutedForeground }]}>
           {suffixText}
         </Text>
       ) : null}
@@ -285,6 +297,7 @@ export function Stepper({
       addLabel={addLabel}
       bump={bump}
       disabled={!!disabled}
+      reduce={reduce}
       dec={button(-1, removes ? ICON.trash : ICON.minus, removes ? `Remove${title ? ` ${title}` : ''}` : undefined)}
       inc={button(1)}
       onAdd={() => startRepeat(1)}
@@ -298,7 +311,7 @@ export function Stepper({
           styles.value,
           vertical
             ? { minHeight: s.num, minWidth: s.btn, paddingVertical: 2 }
-            : { minWidth: s.num, height: s.btn, paddingHorizontal: variant === 'outline' ? 8 : 4 },
+            : { minWidth: s.num, minHeight: s.btn, paddingHorizontal: variant === 'outline' ? 8 : 4 },
           { transform: [vertical ? { translateY: Animated.multiply(bump, -1) } : { translateX: bump }] },
         ]}
       >
@@ -312,8 +325,8 @@ export function Stepper({
   return (
     <View style={[styles.labelled, style]}>
       <View style={styles.texts}>
-        {title ? <Text style={[styles.label, { color: colors.foreground }]}>{title}</Text> : null}
-        {description ? <Text style={[styles.description, { color: colors.mutedForeground }]}>{description}</Text> : null}
+        {title ? <Text style={[styles.label, ff, { color: colors.foreground }]}>{title}</Text> : null}
+        {description ? <Text style={[styles.description, ff, { color: colors.mutedForeground }]}>{description}</Text> : null}
       </View>
       {control}
     </View>
@@ -338,6 +351,7 @@ function CartControl({
   addLabel,
   bump,
   disabled,
+  reduce,
   dec,
   inc,
   onAdd,
@@ -356,11 +370,14 @@ function CartControl({
   addLabel?: string;
   bump: Animated.Value;
   disabled: boolean;
+  reduce: boolean;
   dec: React.ReactNode;
   inc: React.ReactNode;
   onAdd: () => void;
   onAddEnd: () => void;
 } & React.ComponentProps<typeof View>) {
+  const { font } = useKit();
+  const ff = font.family ? { fontFamily: font.family } : null;
   // Natural widths, measured off-screen so the spring always lands on the real size.
   const [textW, setTextW] = useState(0);
   const [addW, setAddW] = useState(0);
@@ -376,18 +393,20 @@ function CartControl({
 
   const measured = textW > 0 && (!addLabel || addW > 0);
   useEffect(() => {
-    // Snap until the rulers have reported; after that every change springs.
-    if (!settled.current) {
+    // Snap until the rulers have reported; after that every change springs (or snaps, with Reduce Motion).
+    if (!settled.current || reduce) {
       width.setValue(target);
       settled.current = measured;
       return;
     }
     Animated.spring(width, { toValue: target, useNativeDriver: false, ...motion.snappy }).start();
-  }, [target, measured, width]);
+  }, [target, measured, width, reduce]);
 
   useEffect(() => {
-    Animated.spring(open, { toValue: collapsed ? 0 : 1, useNativeDriver: true, ...motion.snappy }).start();
-  }, [collapsed, open]);
+    // Reduce Motion: − and the number only fade in (their slide is flattened below).
+    if (reduce) Animated.timing(open, { toValue: collapsed ? 0 : 1, duration: 150, useNativeDriver: true }).start();
+    else Animated.spring(open, { toValue: collapsed ? 0 : 1, useNativeDriver: true, ...motion.snappy }).start();
+  }, [collapsed, open, reduce]);
 
   const measure = (set: (n: number) => void) => (e: LayoutChangeEvent) => set(Math.ceil(e.nativeEvent.layout.width));
 
@@ -403,15 +422,15 @@ function CartControl({
       {/* Off-screen rulers inside a wide box, so nothing squeezes them. */}
       <View pointerEvents="none" style={[styles.ruler, styles.hidden]}>
         <View onLayout={measure(setTextW)} style={styles.row}>
-          <Text style={[styles.num, numStyle]}>{text}</Text>
-          {suffixText ? <Text style={[styles.num, styles.suffix, numStyle, { fontSize: (numStyle.fontSize ?? s.font) * 0.82 }]}>{suffixText}</Text> : null}
+          <Text maxFontSizeMultiplier={FONT_CAP} style={[styles.num, numStyle]}>{text}</Text>
+          {suffixText ? <Text maxFontSizeMultiplier={FONT_CAP} style={[styles.num, styles.suffix, numStyle, { fontSize: (numStyle.fontSize ?? s.font) * 0.82 }]}>{suffixText}</Text> : null}
         </View>
       </View>
 
       <View style={[styles.cartRow, { width: openW }]} pointerEvents="box-none">
         <Animated.View
           pointerEvents={collapsed ? 'none' : 'auto'}
-          style={[styles.row, { opacity: open, transform: [{ translateX: open.interpolate({ inputRange: [0, 1], outputRange: [s.btn * 0.5, 0] }) }] }]}
+          style={[styles.row, { opacity: open, transform: [{ translateX: open.interpolate({ inputRange: [0, 1], outputRange: [reduce ? 0 : s.btn * 0.5, 0] }) }] }]}
         >
           {dec}
           <Animated.View style={[styles.value, { width: valueW, height: s.btn, transform: [{ translateX: bump }] }]}>{number}</Animated.View>
@@ -437,8 +456,8 @@ function CartControl({
               onPressOut={onAddEnd}
               style={({ pressed }) => [styles.add, { height: s.btn, paddingHorizontal: Math.round(s.btn * 0.36) }, pressed && { backgroundColor: alpha(fg, 0.16) }]}
             >
-              <Glyph d={ICON.plus} size={s.icon} color={fg} />
-              <Text style={[styles.addText, { color: fg, fontSize: s.font - 2 }]}>{addLabel}</Text>
+              <Glyph d={ICON.plus} size={s.icon} color={fg} reduce={reduce} />
+              <Text maxFontSizeMultiplier={FONT_CAP} style={[styles.addText, ff, { color: fg, fontSize: s.font - 2 }]}>{addLabel}</Text>
             </Pressable>
           </Animated.View>
         </View>
@@ -466,6 +485,7 @@ function StepButton({
   limit,
   disabled,
   label,
+  reduce,
   style,
   onPressIn,
   onPressOut,
@@ -481,6 +501,7 @@ function StepButton({
   limit: boolean;
   disabled: boolean;
   label: string;
+  reduce: boolean;
   style?: StyleProp<ViewStyle>;
   onPressIn: () => void;
   onPressOut: () => void;
@@ -488,7 +509,11 @@ function StepButton({
   // Scale and dim share one native-driven view; nothing JS-driven touches it.
   const scale = useRef(new Animated.Value(1)).current;
   const dim = useRef(new Animated.Value(limit ? 0.32 : 1)).current;
-  const spring = (to: number) => Animated.spring(scale, { toValue: to, useNativeDriver: true, ...motion.bouncy }).start();
+  // Reduce Motion: no press squeeze; the pressed background still shows the press.
+  const spring = (to: number) => {
+    if (reduce) scale.setValue(1);
+    else Animated.spring(scale, { toValue: to, useNativeDriver: true, ...motion.bouncy }).start();
+  };
 
   useEffect(() => {
     Animated.timing(dim, { toValue: limit ? 0.32 : 1, duration: motion.fast, useNativeDriver: true }).start();
@@ -529,22 +554,23 @@ function StepButton({
           style,
         ]}
       >
-        <Glyph d={glyph} size={icon} color={fg} />
+        <Glyph d={glyph} size={icon} color={fg} reduce={reduce} />
       </Pressable>
     </Animated.View>
   );
 }
 
 /** Stroked icon; pops in when its shape changes (− ↔ trash). */
-function Glyph({ d, size, color }: { d: string; size: number; color: string }) {
+function Glyph({ d, size, color, reduce }: { d: string; size: number; color: string; reduce: boolean }) {
   const pop = useRef(new Animated.Value(1)).current;
   const prev = useRef(d);
   useEffect(() => {
     if (prev.current === d) return;
     prev.current = d;
+    if (reduce) return;
     pop.setValue(0.55);
     Animated.spring(pop, { toValue: 1, useNativeDriver: true, ...motion.bouncy }).start();
-  }, [d, pop]);
+  }, [d, pop, reduce]);
   const trash = d === ICON.trash;
   return (
     <Animated.View style={{ transform: [{ scale: pop }] }}>
@@ -555,37 +581,48 @@ function Glyph({ d, size, color }: { d: string; size: number; color: string }) {
   );
 }
 
-/** Text where every changed character slides out and its replacement slides in. */
-function RollingText({ text, dir, style }: { text: string; dir: number; style: TextStyle }) {
+/** Text where every changed character slides out and its replacement slides in (swaps at once with Reduce Motion). */
+function RollingText({ text, dir, style, reduce }: { text: string; dir: number; style: TextStyle; reduce: boolean }) {
   const chars = [...text];
   return (
     <View style={styles.roll}>
       {chars.map((c, i) => (
         // Keyed from the right so the ones digit stays the ones digit when the number grows.
-        <RollingChar key={chars.length - i} char={c} dir={dir} style={style} />
+        <RollingChar key={chars.length - i} char={c} dir={dir} style={style} reduce={reduce} />
       ))}
     </View>
   );
 }
 
-function RollingChar({ char, dir, style }: { char: string; dir: number; style: TextStyle }) {
+function RollingChar({ char, dir, style, reduce }: { char: string; dir: number; style: TextStyle; reduce: boolean }) {
   const [pair, setPair] = useState<{ cur: string; prev: string | null; dir: number }>({ cur: char, prev: null, dir });
   if (pair.cur !== char) setPair({ cur: char, prev: pair.cur, dir });
   const t = useRef(new Animated.Value(1)).current;
-  const h = (style.lineHeight as number) ?? 24;
+  // The digit window follows the text's own (capped) Dynamic Type scale, so a scaled digit isn't cropped.
+  const { fontScale } = useWindowDimensions();
+  const h = ((style.lineHeight as number) ?? 24) * Math.min(fontScale, FONT_CAP);
 
+  // Each change rolls once (a Reduce Motion toggle alone doesn't replay it).
+  const played = useRef(pair);
   useLayoutEffect(() => {
-    if (pair.prev === null) return;
+    if (pair.prev === null || played.current === pair) return;
+    played.current = pair;
+    if (reduce) {
+      // At 1 the old character is gone and the new one is in place: the final value, no roll.
+      t.setValue(1);
+      return;
+    }
     t.setValue(0);
     Animated.spring(t, { toValue: 1, useNativeDriver: true, ...motion.snappy }).start();
-  }, [pair, t]);
+  }, [pair, t, reduce]);
 
   const d = pair.dir * h * 0.8;
   return (
     <View style={[styles.charBox, { height: h }]}>
-      <Text style={[styles.num, style, styles.hidden]}>{pair.cur}</Text>
+      <Text maxFontSizeMultiplier={FONT_CAP} style={[styles.num, style, styles.hidden]}>{pair.cur}</Text>
       {pair.prev !== null ? (
         <Animated.Text
+          maxFontSizeMultiplier={FONT_CAP}
           style={[
             styles.num,
             styles.layer,
@@ -603,6 +640,7 @@ function RollingChar({ char, dir, style }: { char: string; dir: number; style: T
         </Animated.Text>
       ) : null}
       <Animated.Text
+        maxFontSizeMultiplier={FONT_CAP}
         style={[
           styles.num,
           styles.layer,
@@ -619,6 +657,22 @@ function RollingChar({ char, dir, style }: { char: string; dir: number; style: T
   );
 }
 
+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({
   // Hugs its content in a column without hijacking the cross-axis alignment of a row.
   self: { alignItems: 'flex-start', justifyContent: 'center' },

package/registry/stepper/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/switch/files/src/components/ui/switch.tsx

@@ -1,6 +1,6 @@
 import * as Haptics from 'expo-haptics';
 import React, { useEffect, useId, useMemo, useRef, useState } from 'react';
-import { Animated, PanResponder, Pressable, StyleSheet, Text, View, type StyleProp, type ViewStyle } from 'react-native';
+import { AccessibilityInfo, Animated, PanResponder, Pressable, StyleSheet, Text, View, type StyleProp, type ViewStyle } from 'react-native';
 import Svg, { Circle, Defs, LinearGradient, Path, Rect, Stop } from 'react-native-svg';
 
 import { alpha, motion, readableOn, useKit } from '@/lib/kit';
@@ -63,8 +63,10 @@ export function Switch({
   accessibilityLabel,
   style,
 }: SwitchProps) {
-  const { colors, dark } = useKit();
+  const { colors, dark, font } = useKit();
+  const ff = font.family ? { fontFamily: font.family } : null;
   const gid = 'sw' + useId().replace(/[^a-zA-Z0-9]/g, '');
+  const reduce = useReduceMotion();
   const tint = accent ?? colors.accent;
   const [inner, setInner] = useState(defaultValue);
   const on = value ?? inner;
@@ -87,18 +89,21 @@ export function Switch({
   const stretch = useRef(new Animated.Value(0)).current;
   const glyph = useRef(new Animated.Value(on ? 1 : 0)).current;
   const halo = useRef(new Animated.Value(0)).current;
+  // Reduce Motion: the thumb jumps, so the colours follow this instead and still fade (JS driver).
+  const tone = useRef(new Animated.Value(on ? 1 : 0)).current;
 
   useEffect(() => {
-    Animated.spring(pos, { toValue: on ? 1 : 0, useNativeDriver: false, ...motion.snappy }).start();
-    Animated.spring(glyph, { toValue: on ? 1 : 0, useNativeDriver: true, ...motion.bouncy }).start();
-  }, [on, pos, glyph]);
-
-  // Halo: 0 hidden · 1 held (glow around the thumb) · 2 released (expands and fades out).
-  const press = (to: number) => {
-    Animated.spring(stretch, { toValue: to, useNativeDriver: false, ...(to ? motion.snappy : motion.bouncy) }).start();
-    if (to) Animated.spring(halo, { toValue: 1, useNativeDriver: true, ...motion.snappy }).start();
-    else Animated.timing(halo, { toValue: 2, duration: 420, useNativeDriver: true }).start(({ finished }) => finished && halo.setValue(0));
-  };
+    const to = on ? 1 : 0;
+    if (reduce) {
+      pos.setValue(to);
+      glyph.setValue(to);
+      Animated.timing(tone, { toValue: to, duration: 150, useNativeDriver: false }).start();
+      return;
+    }
+    tone.setValue(to);
+    Animated.spring(pos, { toValue: to, useNativeDriver: false, ...motion.snappy }).start();
+    Animated.spring(glyph, { toValue: to, useNativeDriver: true, ...motion.bouncy }).start();
+  }, [on, reduce, pos, glyph, tone]);
 
   const toggle = () => {
     if (haptics) Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light).catch(() => {});
@@ -113,8 +118,24 @@ export function Switch({
   // Drag the thumb across: pos follows the finger, release settles on the nearer side.
   // A touch that never moves is a tap and just toggles. On web the wrapping Pressable also
   // gets a click after the gesture, so it ignores presses right after one (`endedAt`).
-  const live = useRef({ on, toggle, travel: c1 - c0 });
-  live.current = { on, toggle, travel: c1 - c0 };
+  const live = useRef({ on, toggle, travel: c1 - c0, reduce });
+  live.current = { on, toggle, travel: c1 - c0, reduce };
+
+  // Halo: 0 hidden · 1 held (glow around the thumb) · 2 released (expands and fades out).
+  // Reduce Motion: no squash & stretch, and the halo only fades (its scale is pinned below).
+  const press = (to: number) => {
+    const still = live.current.reduce;
+    if (!still) Animated.spring(stretch, { toValue: to, useNativeDriver: false, ...(to ? motion.snappy : motion.bouncy) }).start();
+    if (to) Animated.spring(halo, { toValue: 1, useNativeDriver: true, ...motion.snappy }).start();
+    else
+      Animated.timing(halo, { toValue: 2, duration: still ? 150 : 420, useNativeDriver: true }).start(
+        ({ finished }) => finished && halo.setValue(0)
+      );
+  };
+  const settle = (to: number) => {
+    if (live.current.reduce) pos.setValue(to);
+    else Animated.spring(pos, { toValue: to, useNativeDriver: false, ...motion.snappy }).start();
+  };
   const drag = useRef({ from: 0, moved: false, endedAt: 0 });
   const responder = useMemo(
     () =>
@@ -137,12 +158,12 @@ export function Switch({
           press(0);
           if (!drag.current.moved) return flip();
           const next = clamp01(drag.current.from + g.dx / live.current.travel) > 0.5;
-          Animated.spring(pos, { toValue: next ? 1 : 0, useNativeDriver: false, ...motion.snappy }).start();
+          settle(next ? 1 : 0);
           if (next !== now) flip();
         },
         onPanResponderTerminate: () => {
           press(0);
-          Animated.spring(pos, { toValue: live.current.on ? 1 : 0, useNativeDriver: false, ...motion.snappy }).start();
+          settle(live.current.on ? 1 : 0);
         },
       }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -163,12 +184,13 @@ export function Switch({
     Animated.multiply(stretch, growH / 2)
   );
 
+  const paint = reduce ? tone : pos;
   const offTrack = material ? alpha(colors.mutedForeground, 0.12) : alpha(colors.foreground, dark ? 0.16 : 0.1);
-  const trackBg = pos.interpolate({ inputRange: [0, 1], outputRange: [offTrack, tint], extrapolate: 'clamp' });
-  const trackBorder = pos.interpolate({ inputRange: [0, 1], outputRange: [colors.mutedForeground, tint], extrapolate: 'clamp' });
+  const trackBg = paint.interpolate({ inputRange: [0, 1], outputRange: [offTrack, tint], extrapolate: 'clamp' });
+  const trackBorder = paint.interpolate({ inputRange: [0, 1], outputRange: [colors.mutedForeground, tint], extrapolate: 'clamp' });
   const onFg = readableOn(tint);
   const thumbBg = material
-    ? pos.interpolate({ inputRange: [0, 1], outputRange: [colors.mutedForeground, onFg], extrapolate: 'clamp' })
+    ? paint.interpolate({ inputRange: [0, 1], outputRange: [colors.mutedForeground, onFg], extrapolate: 'clamp' })
     : '#ffffff';
 
   const iconSize = dOn * 0.62;
@@ -221,7 +243,7 @@ export function Switch({
               borderRadius: haloSize / 2,
               backgroundColor: alpha(on ? tint : colors.mutedForeground, 0.2),
               opacity: halo.interpolate({ inputRange: [0, 1, 2], outputRange: [0, 1, 0] }),
-              transform: [{ scale: halo.interpolate({ inputRange: [0, 1, 2], outputRange: [0.5, 1, 1.45] }) }],
+              transform: [{ scale: halo.interpolate({ inputRange: [0, 1, 2], outputRange: reduce ? [1, 1, 1] : [0.5, 1, 1.45] }) }],
             },
           ]}
         />
@@ -315,14 +337,30 @@ export function Switch({
   return (
     <Pressable {...a11y} style={[styles.row, { opacity: disabled ? 0.45 : 1 }, style]}>
       <View style={styles.text}>
-        <Text style={[styles.label, { color: colors.foreground }]}>{label}</Text>
-        {description ? <Text style={[styles.description, { color: colors.mutedForeground }]}>{description}</Text> : null}
+        <Text style={[styles.label, ff, { color: colors.foreground }]}>{label}</Text>
+        {description ? <Text style={[styles.description, ff, { color: colors.mutedForeground }]}>{description}</Text> : null}
       </View>
       {control}
     </Pressable>
   );
 }
 
+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({
   row: { flexDirection: 'row', alignItems: 'center', gap: 16, minHeight: 44 },
   text: { flex: 1 },

package/registry/switch/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/tabs/files/src/components/ui/tabs.tsx

@@ -1,5 +1,5 @@
 import * as Haptics from 'expo-haptics';
-import React, { useEffect, useMemo, useRef, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState, type ComponentRef } from 'react';
 import {
   AccessibilityInfo,
   Animated,
@@ -64,8 +64,11 @@ type Box = { x: number; w: number };
 
 // Liquid move: the edge in the direction of travel leads, the other one trails behind.
 const LEAD = motion.snappy;
-const TRAIL = { damping: 20, stiffness: 150, mass: 0.9 };
+const TRAIL = { damping: 24, stiffness: 150, mass: 0.9 };
 const UNDERLINE = 3;
+// 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;
 
 /**
  * Underline tabs with swipeable content panes. The underline is measured to each label and moves
@@ -123,7 +126,7 @@ export function Tabs({
   const release = useRef({ v: 0, dragged: false });
   const paging = useRef(false); // pager spring in flight (its JS value is stale until it ends)
   const [settle, setSettle] = useState(0);
-  const scrollRef = useRef<ScrollView>(null);
+  const scrollRef = useRef<ComponentRef<typeof ScrollView>>(null);
 
   const edgesOf = (i: number): [number, number] | null => {
     const t = tabs.current[i];
@@ -173,7 +176,7 @@ export function Tabs({
         Animated.timing(pan, { toValue: to, duration: 180, useNativeDriver: true }).start();
       } else {
         paging.current = true;
-        Animated.spring(pan, { toValue: to, velocity: v, useNativeDriver: true, ...motion.snappy, damping: 24 }).start(
+        Animated.spring(pan, { toValue: to, velocity: v, useNativeDriver: true, ...motion.snappy, damping: 30 }).start(
           ({ finished }) => {
             if (finished) paging.current = false;
           }
@@ -425,7 +428,8 @@ interface TabProps {
 }
 
 function Tab({ item, active, mode, height, fontSize, tint, reduce, onPress, onLayout, onLabelLayout }: TabProps) {
-  const { colors } = useKit();
+  const { colors, font } = useKit();
+  const ff = font.family ? { fontFamily: font.family } : null;
   const a = useRef(new Animated.Value(active ? 1 : 0)).current; // label colour (JS)
   const press = useRef(new Animated.Value(1)).current; // squish (native)
 
@@ -454,7 +458,7 @@ function Tab({ item, active, mode, height, fontSize, tint, reduce, onPress, onLa
       hitSlop={slop ? { top: slop, bottom: slop } : undefined}
       style={[
         styles.tab,
-        { height, paddingHorizontal: mode === 'fill' ? 8 : 14, opacity: item.disabled ? 0.4 : 1 },
+        { minHeight: height, paddingHorizontal: mode === 'fill' ? 8 : 14, opacity: item.disabled ? 0.4 : 1 },
         mode === 'fill' && styles.fill,
         mode === 'auto' && styles.grow,
       ]}
@@ -462,7 +466,7 @@ function Tab({ item, active, mode, height, fontSize, tint, reduce, onPress, onLa
       {/* Measured: the underline spans exactly this (icon + label). */}
       <Animated.View onLayout={onLabelLayout} style={[styles.labelRow, { transform: [{ scale: press }] }]}>
         {icon}
-        <Animated.Text numberOfLines={1} style={[styles.label, { color, fontSize }]}>
+        <Animated.Text maxFontSizeMultiplier={FONT_CAP} numberOfLines={1} style={[styles.label, ff, { color, fontSize }]}>
           {item.label}
         </Animated.Text>
       </Animated.View>
@@ -473,7 +477,8 @@ function Tab({ item, active, mode, height, fontSize, tint, reduce, onPress, onLa
 
 /** Count bubble: accent when its tab is active, muted otherwise. Pops when the value changes. */
 function TabBadge({ value, active, tint, reduce }: { value: number | string; active: boolean; tint: string; reduce: boolean }) {
-  const { colors, radius, dark } = useKit();
+  const { colors, radius, dark, font } = useKit();
+  const ff = font.family ? { fontFamily: font.family } : null;
   const s = useRef(new Animated.Value(1)).current;
   const first = useRef(true);
   useEffect(() => {
@@ -496,7 +501,7 @@ function TabBadge({ value, active, tint, reduce }: { value: number | string; act
         },
       ]}
     >
-      <Animated.Text style={[styles.badgeText, { color: active ? readableOn(tint) : colors.mutedForeground }]}>{text}</Animated.Text>
+      <Animated.Text maxFontSizeMultiplier={FONT_CAP} style={[styles.badgeText, ff, { color: active ? readableOn(tint) : colors.mutedForeground }]}>{text}</Animated.Text>
     </Animated.View>
   );
 }
@@ -531,7 +536,7 @@ const styles = StyleSheet.create({
   labelRow: { flexDirection: 'row', alignItems: 'center', gap: 6 },
   label: { fontWeight: '400', letterSpacing: -0.1 },
   underline: { position: 'absolute', bottom: 0, height: UNDERLINE },
-  badge: { minWidth: 18, height: 18, paddingHorizontal: 5, alignItems: 'center', justifyContent: 'center' },
+  badge: { minWidth: 18, minHeight: 18, paddingHorizontal: 5, alignItems: 'center', justifyContent: 'center' },
   badgeText: { fontSize: 11, fontWeight: '400', fontVariant: ['tabular-nums'] },
   viewport: { overflow: 'hidden' },
   pager: { flexDirection: 'row', alignItems: 'flex-start' },

package/registry/tabs/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,
 };