@expokit/cli 0.2.0 → 0.4.0

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

@@ -1,10 +1,20 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { Animated, Easing, StyleSheet, Text, View, type StyleProp, type ViewStyle } from 'react-native';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import {
+  AccessibilityInfo,
+  Animated,
+  Easing,
+  StyleSheet,
+  Text,
+  View,
+  type LayoutChangeEvent,
+  type StyleProp,
+  type ViewStyle,
+} from 'react-native';
 import Svg, { Circle, Path } from 'react-native-svg';
 
 import { alpha, isTextNode, motion, readableOn, type Colors, useKit } from '@/lib/kit';
 
-export type BadgeIconName = 'bell' | 'message' | 'package' | 'cart' | 'heart';
+export type BadgeIconName = 'bell' | 'message' | 'package' | 'cart' | 'heart' | 'clock' | 'refresh' | 'check' | 'alert';
 
 const ICON_STROKE = { strokeWidth: 1.85, strokeLinecap: 'round' as const, strokeLinejoin: 'round' as const, fill: 'none' as const };
 
@@ -37,6 +47,20 @@ export function BadgeIcon({ name, color, size = 22 }: { name: BadgeIconName; col
         <Path d="M6 6L5 3H2" {...p} />
       </>
     ),
+    clock: (
+      <>
+        <Circle cx={12} cy={12} r={8.5} {...p} />
+        <Path d="M12 7.5V12l3 2" {...p} />
+      </>
+    ),
+    refresh: <Path d="M19 12a7 7 0 1 1-2.05-4.95M19 4.5V8h-3.5" {...p} />,
+    check: <Path d="M5 12.5l4.5 4.5L19 7.5" {...p} />,
+    alert: (
+      <>
+        <Circle cx={12} cy={12} r={8.5} {...p} />
+        <Path d="M12 7.5v5M12 16.2v.3" {...p} />
+      </>
+    ),
     heart: <Path d="M12 20.5l-1.1-1C6.1 15.1 3 12.2 3 8.6A4.6 4.6 0 0 1 7.6 4c2 0 3.1 1.2 4.4 2.5C13.3 5.2 14.4 4 16.4 4A4.6 4.6 0 0 1 21 8.6c0 3.6-3.1 6.5-7.9 10.9L12 20.5z" {...p} />,
   };
   return (
@@ -101,6 +125,11 @@ export interface BadgeProps {
   shape?: 'pill' | 'rounded';
   /** Pulse the leading dot (dot variant) — "live" states. */
   pulse?: boolean;
+  /**
+   * When the label, icon or colour changes: roll the old label up and the new one in, pop the icon,
+   * cross-fade the colours and spring the width (default true). Never animates on mount.
+   */
+  animateChanges?: boolean;
   style?: StyleProp<ViewStyle>;
 }
 
@@ -114,7 +143,141 @@ function toneColor(colors: Colors, tone: BadgeTone) {
   return { neutral: colors.mutedForeground, accent: colors.accent, success: colors.success, warning: colors.warning, danger: colors.danger }[tone];
 }
 
-/** Small status label: solid, soft, outline or dot — five tones, three sizes. */
+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;
+}
+
+interface Look {
+  bg: string;
+  fg: string;
+  border: string;
+  dot: string;
+}
+
+interface Change {
+  /** Outgoing label rolling up and out; the current label rolls in under it. */
+  text?: { from: string; fg: string; perLetter: boolean; duration: number };
+  /** Outgoing icon (null when an icon was just added). */
+  icon?: { from: React.ReactNode };
+  /** Colours being faded from. */
+  look?: Look;
+}
+
+/** Short Latin labels roll letter by letter; anything else (CJK, emoji, long text) rolls as one piece. */
+const LATIN = /^[A-Za-z0-9À-ɏ .,:;'’&+\-!?#%()/]{1,18}$/;
+/** Roll timing in ms: delay between letters, one letter's travel, and how far the new label trails the old. */
+const STAGGER = 24;
+const ROLL = 320;
+const LEAD = 70;
+
+function labelText(node: React.ReactNode): string | null {
+  if (!isTextNode(node)) return null;
+  return Array.isArray(node) ? node.join('') : String(node);
+}
+
+function sameValue(a: unknown, b: unknown) {
+  if (Object.is(a, b)) return true;
+  if (!a || !b || typeof a !== 'object' || typeof b !== 'object' || React.isValidElement(a) || React.isValidElement(b)) return false;
+  try {
+    return JSON.stringify(a) === JSON.stringify(b);
+  } catch {
+    return false;
+  }
+}
+
+/** Icons compare by type, key and props (ignoring colour), so an inline `<BadgeIcon />` only "changes" with its glyph. */
+function sameIcon(a: React.ReactNode, b: React.ReactNode) {
+  if (Object.is(a, b)) return true;
+  if (!React.isValidElement(a) || !React.isValidElement(b)) return false;
+  if (a.type !== b.type || a.key !== b.key) return false;
+  const pa = a.props as Record<string, unknown>;
+  const pb = b.props as Record<string, unknown>;
+  for (const k of new Set([...Object.keys(pa), ...Object.keys(pb)])) {
+    if (k !== 'color' && !sameValue(pa[k], pb[k])) return false;
+  }
+  return true;
+}
+
+/** Eased move from `from` to `to` while `v` runs start → end (held outside), sampled for the native driver. */
+function span(v: Animated.Value, start: number, end: number, from: number, to: number, ease: (t: number) => number) {
+  const inputRange: number[] = [];
+  const outputRange: number[] = [];
+  for (let k = 0; k <= 10; k++) {
+    inputRange.push(start + ((end - start) * k) / 10);
+    outputRange.push(from + (to - from) * ease(k / 10));
+  }
+  return v.interpolate({ inputRange, outputRange, extrapolate: 'clamp' });
+}
+
+const easeIn = Easing.in(Easing.cubic);
+const easeBack = Easing.out(Easing.back(1.7));
+const easeLinear = Easing.linear;
+
+/** One side of a label roll: letters (or the whole label) slide up out of / up into the clipped slot. */
+function RollingLabel({
+  text,
+  color,
+  fontSize,
+  progress,
+  out,
+  perLetter,
+  duration,
+}: {
+  text: string;
+  color: string;
+  fontSize: number;
+  progress: Animated.Value;
+  out: boolean;
+  perLetter: boolean;
+  duration: number;
+}) {
+  const { font } = useKit();
+  const ff = font.family ? { fontFamily: font.family } : null;
+  const pieces = perLetter ? [...text].map((ch) => (ch === ' ' ? ' ' : ch)) : [text];
+  const distance = Math.ceil(fontSize * 1.35);
+  return (
+    <View pointerEvents="none" style={styles.roll}>
+      {pieces.map((piece, i) => {
+        const begin = ((out ? 0 : LEAD) + i * STAGGER) / duration;
+        const travel = (out ? ROLL * 0.7 : ROLL) / duration;
+        const end = Math.min(1, begin + travel);
+        const fade = Math.min(1, begin + travel * 0.5);
+        return (
+          <Animated.View
+            key={i}
+            style={{
+              opacity: out ? span(progress, begin, fade, 1, 0, easeLinear) : span(progress, begin, fade, 0, 1, easeLinear),
+              transform: [
+                { translateY: out ? span(progress, begin, end, 0, -distance, easeIn) : span(progress, begin, end, distance, 0, easeBack) },
+              ],
+            }}
+          >
+            <Text numberOfLines={1} allowFontScaling={false} style={[styles.label, ff, { color, fontSize }]}>
+              {piece}
+            </Text>
+          </Animated.View>
+        );
+      })}
+    </View>
+  );
+}
+
+/**
+ * Small status label: solid, soft, outline or dot — five tones, three sizes. When its text, icon or
+ * tone changes, the label rolls over, the icon pops, the colour cross-fades and the pill springs to size.
+ */
 export function Badge({
   children,
   variant = 'soft',
@@ -124,9 +287,12 @@ export function Badge({
   icon,
   shape = 'pill',
   pulse,
+  animateChanges = true,
   style,
 }: BadgeProps) {
-  const { colors, radius, dark } = useKit();
+  const { colors, radius, dark, font } = useKit();
+  const ff = font.family ? { fontFamily: font.family } : null;
+  const reduce = useReduceMotion();
   const s = SIZES[size];
   const c = color ?? toneColor(colors, tone);
   const neutral = !color && tone === 'neutral';
@@ -155,29 +321,167 @@ export function Badge({
   };
   const { bg, fg, border } = look[variant];
   const dotColor = neutral ? colors.mutedForeground : c;
+  const text = labelText(children);
+
+  // Change tracking: diff against the last render and start a transition — never on mount.
+  const [last, setLast] = useState({ seq: 0, text, icon, look: { bg, fg, border, dot: dotColor } as Look });
+  const [change, setChange] = useState<Change | null>(null);
+  // While set, the pill keeps this width (number), then springs (Animated.Value) to the new content.
+  const [pin, setPin] = useState<number | Animated.Value | null>(null);
+  const natural = useRef<number | null>(null);
+  const rowWidth = useRef<number | null>(null);
+  const widthV = useRef(new Animated.Value(0)).current;
+  const flat = flattenView(style);
+  const canSize = flat.width == null && flat.minWidth == null && flat.flex == null && flat.flexGrow == null && flat.alignSelf !== 'stretch';
+
+  const textChanged = text !== last.text;
+  const iconChanged = !sameIcon(icon, last.icon);
+  const lookChanged = bg !== last.look.bg || fg !== last.look.fg || border !== last.look.border || dotColor !== last.look.dot;
+  if (textChanged || iconChanged || lookChanged) {
+    setLast({ seq: last.seq + 1, text, icon, look: { bg, fg, border, dot: dotColor } });
+    const next: Change = {};
+    if (animateChanges && !reduce) {
+      if (textChanged && last.text != null && text != null) {
+        const perLetter = LATIN.test(last.text) && LATIN.test(text);
+        const n = perLetter ? Math.max(last.text.length, text.length) : 1;
+        next.text = { from: last.text, fg: last.look.fg, perLetter, duration: LEAD + (n - 1) * STAGGER + ROLL };
+      }
+      if (iconChanged && icon != null) next.icon = { from: last.icon ?? null };
+      if (lookChanged) next.look = last.look;
+    }
+    const animated = !!(next.text || next.icon || next.look);
+    setChange(animated ? next : null);
+    setPin(animated && (textChanged || iconChanged) && canSize && natural.current != null ? natural.current : null);
+  }
+
+  // Fresh values per change, so the first frame of a transition already sits at its start.
+  const anim = useMemo(
+    () => ({ seq: last.seq, roll: new Animated.Value(0), pop: new Animated.Value(0), mix: new Animated.Value(0) }),
+    [last.seq]
+  );
+
+  useEffect(() => {
+    if (!change) return;
+    const runs: Animated.CompositeAnimation[] = [];
+    if (change.text) {
+      runs.push(Animated.timing(anim.roll, { toValue: 1, duration: change.text.duration, easing: easeLinear, useNativeDriver: true }));
+    }
+    if (change.icon) runs.push(Animated.spring(anim.pop, { toValue: 1, useNativeDriver: true, ...motion.bouncy }));
+    if (change.look) {
+      runs.push(Animated.timing(anim.mix, { toValue: 1, duration: motion.normal, easing: Easing.out(Easing.quad), useNativeDriver: false }));
+    }
+    let left = runs.length;
+    runs.forEach((r) =>
+      r.start(({ finished }) => {
+        left -= 1;
+        if (finished && left === 0) setChange((cur) => (cur === change ? null : cur));
+      })
+    );
+    return () => runs.forEach((r) => r.stop());
+  }, [change, anim]);
+
+  const onRoot = (e: LayoutChangeEvent) => {
+    if (pin == null) natural.current = e.nativeEvent.layout.width;
+  };
+  // The icon + label row remounts on every change, so this always reports the new content's width.
+  const onRow = (e: LayoutChangeEvent) => {
+    const w = e.nativeEvent.layout.width;
+    const prev = rowWidth.current;
+    rowWidth.current = w;
+    if (typeof pin !== 'number') return;
+    if (prev == null || Math.abs(w - prev) < 0.5) {
+      setPin(null);
+      return;
+    }
+    const to = Math.max(0, pin + (w - prev));
+    widthV.setValue(pin);
+    natural.current = to;
+    setPin(widthV);
+    Animated.spring(widthV, { toValue: to, useNativeDriver: false, ...motion.snappy }).start(({ finished }) => {
+      if (finished) setPin((p) => (p === widthV ? null : p));
+    });
+  };
+
+  const from = change?.look;
+  const mix = (a: string, b: string) => (from ? anim.mix.interpolate({ inputRange: [0, 1], outputRange: [a, b] }) : b);
+  const roll = change?.text;
+
+  let label: React.ReactNode = children;
+  if (text != null) {
+    label = (
+      <View style={roll ? styles.clip : undefined}>
+        <Animated.Text
+          numberOfLines={1}
+          allowFontScaling={false}
+          style={[styles.label, ff, { color: from && !roll ? mix(from.fg, fg) : fg, fontSize: s.font }, roll ? styles.hidden : null]}
+        >
+          {text}
+        </Animated.Text>
+        {roll ? (
+          <>
+            <RollingLabel text={roll.from} color={roll.fg} fontSize={s.font} progress={anim.roll} out perLetter={roll.perLetter} duration={roll.duration} />
+            <RollingLabel text={text} color={fg} fontSize={s.font} progress={anim.roll} out={false} perLetter={roll.perLetter} duration={roll.duration} />
+          </>
+        ) : null}
+      </View>
+    );
+  }
 
-  const label =
-    isTextNode(children) ? (
-      <Text numberOfLines={1} allowFontScaling={false} style={[styles.label, { color: fg, fontSize: s.font }]}>
-        {children}
-      </Text>
+  const pop = anim.pop;
+  const iconNode =
+    icon != null && change?.icon ? (
+      <View>
+        {change.icon.from != null ? (
+          <Animated.View
+            pointerEvents="none"
+            style={[
+              styles.center,
+              {
+                opacity: pop.interpolate({ inputRange: [0, 0.4], outputRange: [1, 0], extrapolate: 'clamp' }),
+                transform: [
+                  { scale: pop.interpolate({ inputRange: [0, 0.5], outputRange: [1, 0.3], extrapolate: 'clamp' }) },
+                  { rotate: pop.interpolate({ inputRange: [0, 0.5], outputRange: ['0deg', '100deg'], extrapolate: 'clamp' }) },
+                ],
+              },
+            ]}
+          >
+            {change.icon.from}
+          </Animated.View>
+        ) : null}
+        <Animated.View
+          style={{
+            opacity: pop.interpolate({ inputRange: [0, 0.35], outputRange: [0, 1], extrapolate: 'clamp' }),
+            transform: [
+              { scale: pop.interpolate({ inputRange: [0, 1], outputRange: [0.3, 1] }) },
+              { rotate: pop.interpolate({ inputRange: [0, 1], outputRange: ['-100deg', '0deg'] }) },
+            ],
+          }}
+        >
+          {icon}
+        </Animated.View>
+      </View>
     ) : (
-      children
+      icon
     );
 
   return (
-    <View
+    <Animated.View
+      accessible={text != null ? true : undefined}
       accessibilityRole="text"
+      accessibilityLabel={text ?? undefined}
+      accessibilityLiveRegion={animateChanges && text != null ? 'polite' : undefined}
+      onLayout={animateChanges ? onRoot : undefined}
       style={[
         styles.base,
         {
           height: s.h,
           paddingHorizontal: s.px,
           gap: s.gap,
-          backgroundColor: bg,
-          borderColor: border,
+          backgroundColor: from ? mix(from.bg, bg) : bg,
+          borderColor: from ? mix(from.border, border) : border,
           borderRadius: shape === 'pill' ? radius.capsule(s.h) : radius.sm,
         },
+        pin != null ? { width: pin, overflow: 'hidden' as const } : null,
         style,
       ]}
     >
@@ -196,12 +500,15 @@ export function Badge({
               ]}
             />
           ) : null}
-          <View style={[styles.fill, { borderRadius: s.dot, backgroundColor: dotColor }]} />
+          {/* Colour fades on the JS driver, so it lives on this view — the pulse above owns the native transforms. */}
+          <Animated.View style={[styles.fill, { borderRadius: s.dot, backgroundColor: from ? mix(from.dot, dotColor) : dotColor }]} />
         </View>
       ) : null}
-      {icon}
-      {label}
-    </View>
+      <View key={last.seq} onLayout={animateChanges ? onRow : undefined} style={[styles.row, { gap: s.gap }]}>
+        {iconNode}
+        {label}
+      </View>
+    </Animated.View>
   );
 }
 
@@ -236,7 +543,8 @@ export function NotificationBadge({
   offset = [0, 0],
   style,
 }: NotificationBadgeProps) {
-  const { colors } = useKit();
+  const { colors, font } = useKit();
+  const ff = font.family ? { fontFamily: font.family } : null;
   const c = color ?? toneColor(colors, tone);
   const fg = !color && tone === 'accent' ? colors.accentForeground : readableOn(c);
   const visible = count > 0 || !!showZero;
@@ -252,7 +560,7 @@ export function NotificationBadge({
     Animated.spring(show, { toValue: visible ? 1 : 0, useNativeDriver: true, ...motion.bouncy }).start();
     if (visible && prev.current !== count && prev.current > 0) {
       pop.setValue(1.35);
-      Animated.spring(pop, { toValue: 1, useNativeDriver: true, damping: 9, stiffness: 320, mass: 0.6 }).start();
+      Animated.spring(pop, { toValue: 1, useNativeDriver: true, damping: 29, stiffness: 320, mass: 0.6 }).start();
     }
     prev.current = count;
   }, [count, visible, show, pop]);
@@ -283,7 +591,7 @@ export function NotificationBadge({
       ]}
     >
       {dot ? null : (
-        <Text allowFontScaling={false} numberOfLines={1} style={[styles.count, { color: fg, fontSize: size === 'sm' ? 10 : 11.5 }]}>
+        <Text allowFontScaling={false} numberOfLines={1} style={[styles.count, ff, { color: fg, fontSize: size === 'sm' ? 10 : 11.5 }]}>
           {text}
         </Text>
       )}
@@ -306,9 +614,25 @@ export function NotificationBadge({
   );
 }
 
+/**
+ * The user's root 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;
+}
+
 const styles = StyleSheet.create({
   base: { flexDirection: 'row', alignItems: 'center', alignSelf: 'flex-start', borderWidth: 1 },
   label: { fontWeight: '400', letterSpacing: 0.1 },
+  row: { flexDirection: 'row', alignItems: 'center' },
+  // Clips the roll; the 2pt slack (cancelled by negative margins) keeps overshoot and unkerned letters whole.
+  clip: { overflow: 'hidden', padding: 2, margin: -2 },
+  hidden: { opacity: 0 },
+  roll: { position: 'absolute', top: 2, left: 2, flexDirection: 'row' },
+  center: { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, alignItems: 'center', justifyContent: 'center' },
   fill: { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 },
   anchor: { alignSelf: 'flex-start' },
   bubble: { alignItems: 'center', justifyContent: 'center', borderWidth: 2 },

package/registry/badge/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/badge.json

@@ -2,7 +2,7 @@
   "name": "badge",
   "type": "component",
   "title": "Badge",
-  "description": "Status labels in solid, soft, outline and dot styles across five tones — plus NotificationBadge with BadgeIconTile/BadgeIcon anchors (or your own children), spring-in counts, and pop on change.",
+  "description": "Status labels in solid, soft, outline and dot styles across five tones — when the label changes it rolls over letter by letter, the icon pops, the colour cross-fades and the pill springs to its new width. Plus NotificationBadge with BadgeIconTile/BadgeIcon anchors (or your own children), spring-in counts, and pop on change.",
   "tier": "free",
   "dependencies": [
     "react-native-svg"

package/registry/bottom-nav/files/src/components/ui/bottom-nav.tsx

@@ -109,8 +109,8 @@ const PILL_H = 42;
 /** Flex weight of the active item in the `pill` look (the others are 1). */
 const PILL_GROW = 2.3;
 // Liquid move: the edge in the direction of travel leads, the other one trails behind.
-const LEAD = { damping: 22, stiffness: 320, mass: 0.7 };
-const TRAIL = { damping: 20, stiffness: 150, mass: 0.9 };
+const LEAD = { damping: 31, stiffness: 320, mass: 0.7 };
+const TRAIL = { damping: 24, stiffness: 150, mass: 0.9 };
 
 /**
  * Bottom navigation in five looks — minimal dot, floating capsule, expanding pill, notched centre
@@ -444,6 +444,8 @@ interface NavButtonProps {
 }
 
 function NavButton({ item, active, look, tint, idle, surface, fab, showLabels, reduce, onPress }: NavButtonProps) {
+  const { font } = useKit();
+  const ff = font.family ? { fontFamily: font.family } : null;
   const press = useRef(new Animated.Value(1)).current; // press squish (native)
   const pop = useRef(new Animated.Value(active ? 1 : 0)).current; // active state (native)
   const grow = useRef(new Animated.Value(active ? 1 : 0)).current; // pill width (JS — layout)
@@ -512,6 +514,7 @@ function NavButton({ item, active, look, tint, idle, surface, fab, showLabels, r
                   numberOfLines={1}
                   style={[
                     styles.pillLabel,
+                    ff,
                     {
                       width: labelW + 1,
                       color: tint,
@@ -528,7 +531,7 @@ function NavButton({ item, active, look, tint, idle, surface, fab, showLabels, r
           {/* Invisible measurer: the label's natural width, so it never ellipsizes while growing. */}
           {showLabels ? (
             <View pointerEvents="none" style={styles.measure} accessibilityElementsHidden importantForAccessibility="no-hide-descendants">
-              <Text style={[styles.pillLabel, styles.selfStart]} onLayout={(e) => setLabelW(Math.ceil(e.nativeEvent.layout.width))}>
+              <Text style={[styles.pillLabel, styles.selfStart, ff]} onLayout={(e) => setLabelW(Math.ceil(e.nativeEvent.layout.width))}>
                 {item.label}
               </Text>
             </View>
@@ -561,6 +564,7 @@ function NavButton({ item, active, look, tint, idle, surface, fab, showLabels, r
             style={[
               styles.label,
               styles.floatLabel,
+              ff,
               { color: tint, opacity: fadeIn, transform: [{ translateY: pop.interpolate({ inputRange: [0, 1], outputRange: [6, 0] }) }] },
             ]}
           >
@@ -587,7 +591,7 @@ function NavButton({ item, active, look, tint, idle, surface, fab, showLabels, r
           {badge}
         </Animated.View>
         {showLabels ? (
-          <Text numberOfLines={1} style={[styles.label, { color: active ? tint : idle }]}>
+          <Text numberOfLines={1} style={[styles.label, ff, { color: active ? tint : idle }]}>
             {item.label}
           </Text>
         ) : null}
@@ -653,6 +657,8 @@ function CentreAction({
   showLabel: boolean;
   onPress: () => void;
 }) {
+  const { font } = useKit();
+  const ff = font.family ? { fontFamily: font.family } : null;
   const press = useRef(new Animated.Value(1)).current;
   const pressTo = (v: number) =>
     Animated.spring(press, { toValue: v, useNativeDriver: true, ...(v < 1 ? motion.snappy : motion.bouncy) }).start();
@@ -671,7 +677,7 @@ function CentreAction({
         </FabFace>
       </Animated.View>
       {showLabel ? (
-        <Text numberOfLines={1} style={[styles.label, styles.abs, { top: labelTop, color: labelColor }]}>
+        <Text numberOfLines={1} style={[styles.label, styles.abs, ff, { top: labelTop, color: labelColor }]}>
           {item.label}
         </Text>
       ) : null}
@@ -758,7 +764,8 @@ function FabFace({
 
 /** Dot or count. Pops in with a spring when it appears or its value changes. */
 function Badge({ value, ring, reduce }: { value: true | number; ring: string; reduce: boolean }) {
-  const { colors, radius } = useKit();
+  const { colors, radius, font } = useKit();
+  const ff = font.family ? { fontFamily: font.family } : null;
   const s = useRef(new Animated.Value(reduce ? 1 : 0.3)).current;
   useEffect(() => {
     if (reduce) {
@@ -784,7 +791,7 @@ function Badge({ value, ring, reduce }: { value: true | number; ring: string; re
         },
       ]}
     >
-      {!dot && <Text style={[styles.badgeText, { color: colors.dangerForeground }]}>{text}</Text>}
+      {!dot && <Text style={[styles.badgeText, ff, { color: colors.dangerForeground }]}>{text}</Text>}
     </Animated.View>
   );
 }

package/registry/bottom-nav/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/bottom-sheet/files/src/components/ui/bottom-sheet.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,
@@ -75,7 +75,7 @@ export interface BottomSheetProps {
 
 const DEFAULT_BOTTOM_INSET = Platform.select({ ios: 20, android: 12, default: 16 }) ?? 16;
 /** Kit gentle, firmed up — glides between detents without bouncing past them. */
-const SNAP_SPRING = { ...motion.gentle, damping: 26, stiffness: 220, mass: 0.9 };
+const SNAP_SPRING = { ...motion.gentle, damping: 29, stiffness: 220, mass: 0.9 };
 /** Extra sheet below the screen edge, so pulling up past the top snap never shows a gap. */
 const OVERDRAG = 120;
 /** Never let the sheet's top go closer than this to the top of the screen. */
@@ -122,7 +122,8 @@ export function BottomSheet({
   style,
   contentStyle,
 }: BottomSheetProps) {
-  const { colors, radius, dark } = useKit();
+  const { colors, radius, dark, font } = useKit();
+  const ff = font.family ? { fontFamily: font.family } : null;
   const reduceMotion = useReduceMotion();
   const { height: screen } = useWindowDimensions();
 
@@ -164,7 +165,7 @@ export function BottomSheet({
   const shown = useRef(false); // auto: slid in once measured
   const index = useRef(initialSnap);
   const scrollY = useRef(0);
-  const rootRef = useRef<View>(null);
+  const rootRef = useRef<ComponentRef<typeof View>>(null);
 
   const bodyDrags = dragFromContent ?? scrollable;
   const live = useRef({ stops, closed, max, dismissible, onClose, onSnapChange, haptics, reduceMotion, scrollable, bodyDrags, expanded });
@@ -473,12 +474,12 @@ export function BottomSheet({
                   <View style={[styles.header, !handle && { paddingTop: 20 }]}>
                     <View style={styles.headerText}>
                       {title ? (
-                        <Text accessibilityRole="header" style={[styles.title, { color: colors.foreground }]} numberOfLines={1}>
+                        <Text accessibilityRole="header" style={[styles.title, ff, { color: colors.foreground }]} numberOfLines={1}>
                           {title}
                         </Text>
                       ) : null}
                       {subtitle ? (
-                        <Text style={[styles.subtitle, { color: colors.mutedForeground }]} numberOfLines={1}>
+                        <Text style={[styles.subtitle, ff, { color: colors.mutedForeground }]} numberOfLines={1}>
                           {subtitle}
                         </Text>
                       ) : null}