@expokit/cli 0.3.0 → 0.4.1

package/registry/action-sheet/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/alert/files/src/components/ui/alert.tsx

@@ -64,6 +64,9 @@ export interface AlertProps {
   style?: StyleProp<ViewStyle>;
 }
 
+// Controls stop growing at iOS's largest standard text size (xxxL ≈ 1.35×) so they keep their shape;
+// content text scales all the way.
+const FONT_CAP = 1.35;
 const HALO = 34;
 const HALO_COMPACT = 28;
 
@@ -89,7 +92,8 @@ export function Alert({
   color,
   style,
 }: AlertProps) {
-  const { colors, radius, dark } = useKit();
+  const { colors, radius, dark, font } = useKit();
+  const ff = font.family ? { fontFamily: font.family } : null;
   const uid = useId().replace(/[^a-zA-Z0-9]/g, '');
   const reduceMotion = useReduceMotion();
   const tones: Record<AlertVariant, string> = {
@@ -322,9 +326,9 @@ export function Alert({
     <>
       {iconNode}
       <View style={[styles.body, { paddingTop: textTop }]}>
-        {title ? <Text style={[styles.title, { color: fg }]}>{title}</Text> : null}
+        {title ? <Text style={[styles.title, ff, { color: fg }]}>{title}</Text> : null}
         {typeof description === 'string' ? (
-          <Text style={[styles.desc, { color: title ? sub : fg }]}>{description}</Text>
+          <Text style={[styles.desc, ff, { color: title ? sub : fg }]}>{description}</Text>
         ) : (
           description
         )}
@@ -443,6 +447,8 @@ function Pill({
   bg: string;
   fg: string;
 }) {
+  const { font } = useKit();
+  const ff = font.family ? { fontFamily: font.family } : null;
   return (
     <Pressable
       accessibilityRole="button"
@@ -451,11 +457,11 @@ function Pill({
       hitSlop={(44 - height) / 2}
       style={({ pressed }) => [
         styles.pill,
-        { height, borderRadius: radius, backgroundColor: bg, paddingHorizontal: height >= 32 ? 14 : 12 },
+        { minHeight: height, borderRadius: radius, backgroundColor: bg, paddingHorizontal: height >= 32 ? 14 : 12 },
         pressed ? { opacity: 0.75, transform: [{ scale: 0.97 }] } : null,
       ]}
     >
-      <Text style={[styles.pillText, { color: fg }]} numberOfLines={1}>
+      <Text maxFontSizeMultiplier={FONT_CAP} style={[styles.pillText, ff, { color: fg }]} numberOfLines={1}>
         {action.label}
       </Text>
     </Pressable>

package/registry/alert/files/src/components/ui/button.tsx

@@ -1,6 +1,7 @@
 import * as Haptics from 'expo-haptics';
-import React, { useId, useRef } from 'react';
+import React, { useEffect, useId, useRef, useState } from 'react';
 import {
+  AccessibilityInfo,
   ActivityIndicator,
   Animated,
   Pressable,
@@ -55,6 +56,10 @@ export interface ButtonProps extends Omit<PressableProps, 'style' | 'children'>
   textStyle?: 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;
+
 const SIZES: Record<ButtonSize, { h: number; px: number; font: number; gap: number }> = {
   sm: { h: 36, px: 14, font: 14, gap: 6 },
   md: { h: 46, px: 18, font: 15.5, gap: 8 },
@@ -116,8 +121,10 @@ export function Button({
   onPressOut,
   ...props
 }: ButtonProps) {
-  const { colors, radius, dark } = useKit();
+  const { colors, radius, dark, font } = useKit();
+  const ff = font.family ? { fontFamily: font.family } : null;
   const gid = 'btn' + useId().replace(/[^a-zA-Z0-9]/g, '');
+  const reduce = useReduceMotion();
   const scale = useRef(new Animated.Value(1)).current;
   const isDisabled = disabled || loading;
   const tint = color ?? colors.accent;
@@ -144,12 +151,17 @@ export function Button({
   const solid = bg !== 'transparent';
   const quiet = variant === 'ghost' || variant === 'outline' || variant === 'link';
 
-  const spring = (to: number) => Animated.spring(scale, { toValue: to, useNativeDriver: true, ...motion.bouncy }).start();
+  // Reduce Motion: no squish; the pressed wash / opacity still marks the press.
+  const spring = (to: number) => {
+    if (reduce) return scale.setValue(1);
+    Animated.spring(scale, { toValue: to, useNativeDriver: true, ...motion.bouncy }).start();
+  };
 
   const label = isTextNode(children) ? (
     <Text
       numberOfLines={1}
-      style={[styles.label, { color: fg, fontSize: s.font }, variant === 'link' && styles.link, textStyle]}
+      maxFontSizeMultiplier={FONT_CAP}
+      style={[styles.label, ff, { color: fg, fontSize: s.font }, variant === 'link' && styles.link, textStyle]}
     >
       {children}
     </Text>
@@ -184,7 +196,8 @@ export function Button({
         style={({ pressed }) => [
           styles.base,
           {
-            height: s.h,
+            minHeight: s.h,
+            height: size === 'icon' ? s.h : undefined,
             width: size === 'icon' ? s.h : undefined,
             paddingHorizontal: variant === 'link' ? 0 : s.px,
             gap: s.gap,
@@ -235,7 +248,7 @@ export function Button({
               <View style={styles.row}>
                 <ActivityIndicator size="small" color={fg} />
                 {size !== 'icon' && isTextNode(children) ? (
-                  <Text style={[styles.label, { color: fg, fontSize: s.font, opacity: 0.85 }]}>{children}</Text>
+                  <Text maxFontSizeMultiplier={FONT_CAP} style={[styles.label, ff, { color: fg, fontSize: s.font, opacity: 0.85 }]}>{children}</Text>
                 ) : null}
               </View>
             ) : (
@@ -252,6 +265,22 @@ export function Button({
   );
 }
 
+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({
   base: { flexDirection: 'row', alignItems: 'center', justifyContent: 'center' },
   row: { flexDirection: 'row', alignItems: 'center', gap: 8 },

package/registry/alert/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/assistant-app.json

@@ -0,0 +1,49 @@
+{
+  "name": "assistant-app",
+  "type": "template",
+  "title": "AI assistant app",
+  "description": "A complete Expo Router app for an AI chat assistant: onboarding once, Apple / Google / email-code sign in, a streaming chat with suggestions and stop, conversation history, profile and settings.",
+  "tier": "pro",
+  "dependencies": [
+    "react-native-svg",
+    "expo-haptics",
+    "expo-router",
+    "expo-splash-screen",
+    "expo-status-bar",
+    "react-native-safe-area-context",
+    "react-native-screens",
+    "@react-native-async-storage/async-storage"
+  ],
+  "registryDependencies": [
+    "kit",
+    "bottom-nav",
+    "onboarding",
+    "sign-in",
+    "chat",
+    "inbox",
+    "profile",
+    "settings"
+  ],
+  "sharedFiles": [
+    "lib/kit.tsx",
+    "components/ui/bottom-nav.tsx",
+    "components/blocks/onboarding.tsx",
+    "components/ui/button.tsx",
+    "components/ui/floating-input.tsx",
+    "components/ui/password-input.tsx",
+    "components/ui/otp-input.tsx",
+    "components/blocks/sign-in.tsx",
+    "components/blocks/chat.tsx",
+    "components/ui/avatar.tsx",
+    "components/ui/badge.tsx",
+    "components/ui/chip-group.tsx",
+    "components/ui/search-bar.tsx",
+    "components/ui/swipeable-row.tsx",
+    "components/blocks/inbox.tsx",
+    "components/blocks/profile.tsx",
+    "components/ui/segmented-control.tsx",
+    "components/ui/switch.tsx",
+    "components/blocks/settings.tsx"
+  ],
+  "filesDir": null
+}

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

@@ -131,7 +131,8 @@ export function Avatar({
   haptics = true,
   style,
 }: AvatarProps) {
-  const { colors, radius, dark } = useKit();
+  const { colors, radius, dark, font } = useKit();
+  const ff = font.family ? { fontFamily: font.family } : null;
   const reduceMotion = useReduceMotion();
   const uid = useId().replace(/[^a-zA-Z0-9]/g, '');
   const px = resolveSize(size);
@@ -280,6 +281,7 @@ export function Avatar({
             numberOfLines={1}
             style={[
               styles.initials,
+              ff,
               {
                 color: ink,
                 fontSize: Math.max(9, px * (initials.length > 1 ? 0.37 : 0.42)),
@@ -448,7 +450,7 @@ export function Avatar({
           {badgeText ? (
             <Text
               allowFontScaling={false}
-              style={[styles.badgeText, { color: colors.dangerForeground, fontSize: Math.max(9, badgeH * 0.6) }]}
+              style={[styles.badgeText, ff, { color: colors.dangerForeground, fontSize: Math.max(9, badgeH * 0.6) }]}
             >
               {badgeText}
             </Text>
@@ -623,7 +625,8 @@ export function AvatarGroup({
   onPressMore,
   style,
 }: AvatarGroupProps) {
-  const { colors, radius, dark } = useKit();
+  const { colors, radius, dark, font } = useKit();
+  const ff = font.family ? { fontFamily: font.family } : null;
   const reduceMotion = useReduceMotion();
   const px = resolveSize(size);
   const bg = surface ?? colors.background;
@@ -699,7 +702,7 @@ export function AvatarGroup({
         <Text
           allowFontScaling={false}
           numberOfLines={1}
-          style={[styles.moreText, { color: colors.foreground, fontSize: Math.max(8, px * (extraText.length <= 2 ? 0.34 : extraText.length === 3 ? 0.29 : 0.24)) }]}
+          style={[styles.moreText, ff, { color: colors.foreground, fontSize: Math.max(8, px * (extraText.length <= 2 ? 0.34 : extraText.length === 3 ? 0.29 : 0.24)) }]}
         >
           +{extraText}
         </Text>

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

@@ -222,7 +222,7 @@ function span(v: Animated.Value, start: number, end: number, from: number, to: n
 }
 
 const easeIn = Easing.in(Easing.cubic);
-const easeBack = Easing.out(Easing.back(1.7));
+const easeSettle = Easing.bezier(0.32, 0.72, 0, 1);
 const easeLinear = Easing.linear;
 
 /** One side of a label roll: letters (or the whole label) slide up out of / up into the clipped slot. */
@@ -243,6 +243,8 @@ function RollingLabel({
   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 (
@@ -258,11 +260,11 @@ function RollingLabel({
             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) },
+                { translateY: out ? span(progress, begin, end, 0, -distance, easeIn) : span(progress, begin, end, distance, 0, easeSettle) },
               ],
             }}
           >
-            <Text numberOfLines={1} allowFontScaling={false} style={[styles.label, { color, fontSize }]}>
+            <Text numberOfLines={1} allowFontScaling={false} style={[styles.label, ff, { color, fontSize }]}>
               {piece}
             </Text>
           </Animated.View>
@@ -288,7 +290,8 @@ export function Badge({
   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);
@@ -328,7 +331,7 @@ export function Badge({
   const natural = useRef<number | null>(null);
   const rowWidth = useRef<number | null>(null);
   const widthV = useRef(new Animated.Value(0)).current;
-  const flat = StyleSheet.flatten(style) ?? {};
+  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;
@@ -410,7 +413,7 @@ export function Badge({
         <Animated.Text
           numberOfLines={1}
           allowFontScaling={false}
-          style={[styles.label, { color: from && !roll ? mix(from.fg, fg) : fg, fontSize: s.font }, roll ? styles.hidden : null]}
+          style={[styles.label, ff, { color: from && !roll ? mix(from.fg, fg) : fg, fontSize: s.font }, roll ? styles.hidden : null]}
         >
           {text}
         </Animated.Text>
@@ -540,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;
@@ -556,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]);
@@ -587,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>
       )}
@@ -610,6 +614,16 @@ 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 },

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/bottom-nav/files/src/components/ui/bottom-nav.tsx

@@ -99,6 +99,10 @@ export interface BottomNavProps {
   style?: StyleProp<ViewStyle>;
 }
 
+// Controls stop growing at iOS's largest standard text size (xxxL ≈ 1.35×) so they keep their shape;
+// content text scales all the way.
+const FONT_CAP = 1.35;
+
 const ROW_H = 60;
 const PAD_X = 6;
 const PAD_TOP = 6;
@@ -109,8 +113,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 +448,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)
@@ -510,8 +516,10 @@ function NavButton({ item, active, look, tint, idle, surface, fab, showLabels, r
               >
                 <Animated.Text
                   numberOfLines={1}
+                  maxFontSizeMultiplier={FONT_CAP}
                   style={[
                     styles.pillLabel,
+                    ff,
                     {
                       width: labelW + 1,
                       color: tint,
@@ -528,7 +536,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 maxFontSizeMultiplier={FONT_CAP} style={[styles.pillLabel, styles.selfStart, ff]} onLayout={(e) => setLabelW(Math.ceil(e.nativeEvent.layout.width))}>
                 {item.label}
               </Text>
             </View>
@@ -558,9 +566,11 @@ function NavButton({ item, active, look, tint, idle, surface, fab, showLabels, r
         {showLabels ? (
           <Animated.Text
             numberOfLines={1}
+            maxFontSizeMultiplier={FONT_CAP}
             style={[
               styles.label,
               styles.floatLabel,
+              ff,
               { color: tint, opacity: fadeIn, transform: [{ translateY: pop.interpolate({ inputRange: [0, 1], outputRange: [6, 0] }) }] },
             ]}
           >
@@ -587,7 +597,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} maxFontSizeMultiplier={FONT_CAP} style={[styles.label, ff, { color: active ? tint : idle }]}>
             {item.label}
           </Text>
         ) : null}
@@ -653,6 +663,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 +683,7 @@ function CentreAction({
         </FabFace>
       </Animated.View>
       {showLabel ? (
-        <Text numberOfLines={1} style={[styles.label, styles.abs, { top: labelTop, color: labelColor }]}>
+        <Text numberOfLines={1} maxFontSizeMultiplier={FONT_CAP} style={[styles.label, styles.abs, ff, { top: labelTop, color: labelColor }]}>
           {item.label}
         </Text>
       ) : null}
@@ -758,7 +770,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 +797,7 @@ function Badge({ value, ring, reduce }: { value: true | number; ring: string; re
         },
       ]}
     >
-      {!dot && <Text style={[styles.badgeText, { color: colors.dangerForeground }]}>{text}</Text>}
+      {!dot && <Text maxFontSizeMultiplier={FONT_CAP} style={[styles.badgeText, ff, { color: colors.dangerForeground }]}>{text}</Text>}
     </Animated.View>
   );
 }
@@ -1036,7 +1049,7 @@ const styles = StyleSheet.create({
     top: -6,
     right: -11,
     minWidth: 19,
-    height: 19,
+    minHeight: 19,
     paddingHorizontal: 4,
     alignItems: 'center',
     justifyContent: 'center',

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}

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