@expokit/cli 0.3.0 → 0.4.0

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

@@ -89,7 +89,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 +323,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 +444,8 @@ function Pill({
   bg: string;
   fg: string;
 }) {
+  const { font } = useKit();
+  const ff = font.family ? { fontFamily: font.family } : null;
   return (
     <Pressable
       accessibilityRole="button"
@@ -455,7 +458,7 @@ function Pill({
         pressed ? { opacity: 0.75, transform: [{ scale: 0.97 }] } : null,
       ]}
     >
-      <Text style={[styles.pillText, { color: fg }]} numberOfLines={1}>
+      <Text style={[styles.pillText, ff, { color: fg }]} numberOfLines={1}>
         {action.label}
       </Text>
     </Pressable>

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

@@ -116,7 +116,8 @@ 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 scale = useRef(new Animated.Value(1)).current;
   const isDisabled = disabled || loading;
@@ -149,7 +150,7 @@ export function Button({
   const label = isTextNode(children) ? (
     <Text
       numberOfLines={1}
-      style={[styles.label, { color: fg, fontSize: s.font }, variant === 'link' && styles.link, textStyle]}
+      style={[styles.label, ff, { color: fg, fontSize: s.font }, variant === 'link' && styles.link, textStyle]}
     >
       {children}
     </Text>
@@ -235,7 +236,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 style={[styles.label, ff, { color: fg, fontSize: s.font, opacity: 0.85 }]}>{children}</Text>
                 ) : null}
               </View>
             ) : (

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

@@ -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 (
@@ -262,7 +264,7 @@ function RollingLabel({
               ],
             }}
           >
-            <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

@@ -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}

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,
 };

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

@@ -116,7 +116,8 @@ 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 scale = useRef(new Animated.Value(1)).current;
   const isDisabled = disabled || loading;
@@ -149,7 +150,7 @@ export function Button({
   const label = isTextNode(children) ? (
     <Text
       numberOfLines={1}
-      style={[styles.label, { color: fg, fontSize: s.font }, variant === 'link' && styles.link, textStyle]}
+      style={[styles.label, ff, { color: fg, fontSize: s.font }, variant === 'link' && styles.link, textStyle]}
     >
       {children}
     </Text>
@@ -235,7 +236,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 style={[styles.label, ff, { color: fg, fontSize: s.font, opacity: 0.85 }]}>{children}</Text>
                 ) : null}
               </View>
             ) : (

package/registry/button/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/button-3d/files/src/components/ui/button-3d.tsx

@@ -105,7 +105,8 @@ export function Button3D({
   accessibilityLabel,
   style,
 }: Button3DProps) {
-  const { dark } = useKit();
+  const { dark, font } = useKit();
+  const ff = font.family ? { fontFamily: font.family } : null;
   const s = SIZES[size];
   const depth = depthProp ?? s.depth;
   const kind = appearance === 'auto' ? (dark ? 'light' : 'dark') : appearance;
@@ -122,7 +123,7 @@ export function Button3D({
   ) : isTextNode(children) ? (
     // No numberOfLines: on a narrow fixed-width key ("esc", "Q") the label may use the padding
     // instead of being cut to an ellipsis.
-    <Text style={{ color: m.ink, fontSize: round ? s.font + 4 : s.font, fontWeight: '600', letterSpacing: 0.1, flexShrink: 0, textAlign: 'center' }}>
+    <Text style={[{ color: m.ink, fontSize: round ? s.font + 4 : s.font, fontWeight: '600', letterSpacing: 0.1, flexShrink: 0, textAlign: 'center' }, ff]}>
       {children}
     </Text>
   ) : (

package/registry/button-3d/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,
 };