@expokit/cli 0.2.0 → 0.4.0

package/registry/text-animation/files/src/lib/kit.tsx

@@ -0,0 +1,222 @@
+import React, { createContext, useContext, useMemo } from 'react';
+import { Platform, useColorScheme, type TextStyle } from 'react-native';
+
+/**
+ * ExpoKit design tokens. Every component reads them through useKit(), so one
+ * <KitProvider> (optional) re-skins the whole kit: light / dark, accent colour, radius.
+ * Without a provider, components follow the system colour scheme.
+ */
+
+/**
+ * Bumped whenever components start using a new kit API (2: radius.scale / radius.capsule).
+ * The CLI won't keep an edited kit.tsx older than the component being added needs.
+ */
+export const KIT_VERSION = 2;
+
+export type ColorScheme = 'light' | 'dark';
+
+export interface Colors {
+  background: string;
+  foreground: string;
+  /** Cards, sheets, inputs. */
+  card: string;
+  cardForeground: string;
+  /** Raised surfaces: popovers, toasts. */
+  popover: string;
+  muted: string;
+  mutedForeground: string;
+  border: string;
+  input: string;
+  primary: string;
+  primaryForeground: string;
+  secondary: string;
+  secondaryForeground: string;
+  accent: string;
+  accentForeground: string;
+  success: string;
+  warning: string;
+  danger: string;
+  dangerForeground: string;
+  ring: string;
+  overlay: string;
+}
+
+export interface Theme {
+  dark: boolean;
+  colors: Colors;
+  /** Corner radius scale. `radius.full` makes pills. */
+  radius: {
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+    full: number;
+    /** A corner designed at the default radius (12), scaled to the current one: `radius.scale(16)` is 16 at 12, 0 at 0. */
+    scale: (n: number) => number;
+    /** Corner for a bar or chip of height `h`: a pill at radius ≥ 12, softer below, square at 0. */
+    capsule: (h: number) => number;
+  };
+  /** 4pt spacing scale: space(4) === 16. */
+  space: (n: number) => number;
+  font: { family?: string; mono: string };
+  text: Record<'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl', TextStyle>;
+}
+
+const light: Colors = {
+  background: '#ffffff',
+  foreground: '#09090b',
+  card: '#ffffff',
+  cardForeground: '#09090b',
+  popover: '#ffffff',
+  muted: '#f4f4f5',
+  mutedForeground: '#71717a',
+  border: '#e4e4e7',
+  input: '#d4d4d8',
+  primary: '#18181b',
+  primaryForeground: '#fafafa',
+  secondary: '#f4f4f5',
+  secondaryForeground: '#18181b',
+  accent: '#18181b',
+  accentForeground: '#ffffff',
+  success: '#16a34a',
+  warning: '#f59e0b',
+  danger: '#e5484d',
+  dangerForeground: '#ffffff',
+  ring: '#18181b',
+  overlay: 'rgba(0,0,0,0.4)',
+};
+
+const dark: Colors = {
+  background: '#09090b',
+  foreground: '#fafafa',
+  card: '#111113',
+  cardForeground: '#fafafa',
+  popover: '#18181b',
+  muted: '#1c1c20',
+  mutedForeground: '#a1a1aa',
+  border: '#27272a',
+  input: '#34343a',
+  primary: '#fafafa',
+  primaryForeground: '#18181b',
+  secondary: '#1f1f23',
+  secondaryForeground: '#fafafa',
+  accent: '#fafafa',
+  accentForeground: '#09090b',
+  success: '#3dd68c',
+  warning: '#ffb224',
+  danger: '#ff6369',
+  dangerForeground: '#ffffff',
+  ring: '#d4d4d8',
+  overlay: 'rgba(0,0,0,0.6)',
+};
+
+export const palettes = { light, dark };
+
+function build(scheme: ColorScheme, overrides?: ThemeOverrides): Theme {
+  const base = scheme === 'dark' ? dark : light;
+  const accent = overrides?.accent;
+  const colors: Colors = {
+    ...base,
+    ...(accent ? { accent, ring: accent, accentForeground: readableOn(accent) } : null),
+    ...overrides?.colors?.[scheme],
+  };
+  const r = overrides?.radius ?? 12;
+  return {
+    dark: scheme === 'dark',
+    colors,
+    radius: {
+      sm: Math.round(r * 0.5),
+      md: r,
+      lg: Math.round(r * 1.35),
+      xl: Math.round(r * 1.8),
+      full: 999,
+      scale: (n) => Math.round((n * r) / 12),
+      capsule: (h) => Math.round((h / 2) * Math.min(1, r / 12)),
+    },
+    space: (n) => n * 4,
+    font: {
+      family: overrides?.fontFamily,
+      mono: Platform.select({ ios: 'Menlo', android: 'monospace', default: 'ui-monospace, SFMono-Regular, Menlo, monospace' })!,
+    },
+    text: {
+      xs: { fontSize: 12, lineHeight: 16 },
+      sm: { fontSize: 14, lineHeight: 20 },
+      md: { fontSize: 16, lineHeight: 22 },
+      lg: { fontSize: 18, lineHeight: 24, fontWeight: '400' },
+      xl: { fontSize: 22, lineHeight: 28, fontWeight: '400', letterSpacing: -0.3 },
+      xxl: { fontSize: 30, lineHeight: 36, fontWeight: '400', letterSpacing: -0.8 },
+    },
+  };
+}
+
+export interface ThemeOverrides {
+  /** Brand colour used for focus rings, selected states and accent buttons. */
+  accent?: string;
+  /** Base corner radius in points (default 12). */
+  radius?: number;
+  fontFamily?: string;
+  /** Override any token per scheme. */
+  colors?: Partial<Record<ColorScheme, Partial<Colors>>>;
+}
+
+const KitContext = createContext<{ scheme?: ColorScheme; overrides?: ThemeOverrides } | null>(null);
+
+export function KitProvider({
+  scheme,
+  children,
+  ...overrides
+}: ThemeOverrides & { scheme?: ColorScheme | 'system'; children: React.ReactNode }) {
+  const value = useMemo(
+    () => ({ scheme: scheme === 'system' ? undefined : scheme, overrides }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [scheme, overrides.accent, overrides.radius, overrides.fontFamily, overrides.colors]
+  );
+  return <KitContext.Provider value={value}>{children}</KitContext.Provider>;
+}
+
+export function useKit(): Theme {
+  const ctx = useContext(KitContext);
+  const system = useColorScheme();
+  const scheme: ColorScheme = ctx?.scheme ?? (system === 'dark' ? 'dark' : 'light');
+  return useMemo(() => build(scheme, ctx?.overrides), [scheme, ctx?.overrides]);
+}
+
+/**
+ * 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: 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: 27, stiffness: 160, mass: 1 },
+  fast: 160,
+  normal: 240,
+};
+
+/** Adds alpha to a #rrggbb colour: alpha('#6366f1', 0.2). */
+export function alpha(hex: string, a: number) {
+  if (!hex.startsWith('#') || (hex.length !== 7 && hex.length !== 4)) return hex;
+  const full = hex.length === 4 ? '#' + [...hex.slice(1)].map((c) => c + c).join('') : hex;
+  return full + Math.round(Math.max(0, Math.min(1, a)) * 255).toString(16).padStart(2, '0');
+}
+
+/** Black or white, whichever reads better on `hex`. */
+export function readableOn(hex: string) {
+  const full = hex.length === 4 ? '#' + [...hex.slice(1)].map((c) => c + c).join('') : hex;
+  const n = parseInt(full.slice(1, 7), 16);
+  if (Number.isNaN(n)) return '#ffffff';
+  const [r, g, b] = [(n >> 16) & 255, (n >> 8) & 255, n & 255];
+  return (r * 299 + g * 587 + b * 114) / 1000 > 150 ? '#09090b' : '#ffffff';
+}
+
+/**
+ * True for children that must be wrapped in <Text>: strings, numbers and arrays of them —
+ * `{count} new` is the array [3, ' new'], and raw text outside <Text> crashes on native.
+ */
+export function isTextNode(node: React.ReactNode): node is string | number | (string | number)[] {
+  if (typeof node === 'string' || typeof node === 'number') return true;
+  return Array.isArray(node) && node.length > 0 && node.every((n) => typeof n === 'string' || typeof n === 'number');
+}

package/registry/text-animation.json

@@ -0,0 +1,15 @@
+{
+  "name": "text-animation",
+  "type": "component",
+  "title": "Text Animation",
+  "description": "Five text effects in one component: words rising on a soft spring, a looping shimmer for \"Thinking…\" states, letters rolling between values, a glyph scramble and a typewriter with a caret. Everything staggers letter by letter on the native driver, and screen readers still hear one clean string.",
+  "tier": "free",
+  "dependencies": [],
+  "registryDependencies": [
+    "kit"
+  ],
+  "sharedFiles": [
+    "lib/kit.tsx"
+  ],
+  "filesDir": "text-animation/files"
+}

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

@@ -1,4 +1,4 @@
-import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState, type ComponentRef } from 'react';
 import {
   Animated,
   Easing,
@@ -97,7 +97,7 @@ const AnimatedCircle = Animated.createAnimatedComponent(Circle);
  * optional floating label, a focus halo, a counter that morphs into a progress ring near
  * `maxLength`, and a `toolbar` slot for chat composers.
  */
-export const Textarea = forwardRef<TextInput, TextareaProps>(function Textarea(
+export const Textarea = forwardRef<ComponentRef<typeof TextInput>, TextareaProps>(function Textarea(
   {
     label,
     floatingLabel = true,
@@ -143,16 +143,18 @@ export const Textarea = forwardRef<TextInput, TextareaProps>(function Textarea(
   const LINE = typeof userInput.lineHeight === 'number' ? userInput.lineHeight : Math.round((FONT * S.line) / S.font);
   const corner = typeof userField.borderRadius === 'number' ? userField.borderRadius : radius.md;
   // The hidden mirror must measure text exactly like the input does.
-  const metrics: TextStyle = { ...ff };
-  if (userInput.fontFamily !== undefined) metrics.fontFamily = userInput.fontFamily;
-  if (userInput.fontWeight !== undefined) metrics.fontWeight = userInput.fontWeight;
-  if (userInput.fontStyle !== undefined) metrics.fontStyle = userInput.fontStyle;
-  if (userInput.letterSpacing !== undefined) metrics.letterSpacing = userInput.letterSpacing;
+  const metrics: TextStyle = {
+    ...ff,
+    ...(userInput.fontFamily !== undefined ? { fontFamily: userInput.fontFamily } : null),
+    ...(userInput.fontWeight !== undefined ? { fontWeight: userInput.fontWeight } : null),
+    ...(userInput.fontStyle !== undefined ? { fontStyle: userInput.fontStyle } : null),
+    ...(userInput.letterSpacing !== undefined ? { letterSpacing: userInput.letterSpacing } : null),
+  };
   const tint = accent ?? colors.accent;
   const bg = surface ?? colors.background;
   const filled = variant === 'filled';
-  const inputRef = useRef<TextInput>(null);
-  useImperativeHandle(ref, () => inputRef.current as TextInput);
+  const inputRef = useRef<ComponentRef<typeof TextInput>>(null);
+  useImperativeHandle(ref, () => inputRef.current as ComponentRef<typeof TextInput>);
 
   const [focused, setFocused] = useState(false);
   const [inner, setInner] = useState(defaultValue ?? '');

package/registry/textarea/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/ticket-shape/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/tilt-card/files/src/components/ui/tilt-card.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import React, { createContext, useContext, useEffect, useMemo, useRef, useState, type ComponentRef } from 'react';
 import {
   Animated,
   Easing,
@@ -267,7 +267,7 @@ export function TiltCard({
   const touching = useRef(false);
   const origin = useRef({ x: 0, y: 0 });
   const moved = useRef(false);
-  const viewRef = useRef<View>(null);
+  const viewRef = useRef<ComponentRef<typeof View>>(null);
   const disabledRef = useRef(disabled);
   disabledRef.current = disabled;
 

package/registry/tilt-card/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/time-picker/files/src/components/ui/time-picker.tsx

@@ -1,4 +1,4 @@
-import React, { memo, useEffect, useMemo, useRef, useState } from 'react';
+import React, { memo, useEffect, useMemo, useRef, useState, type ComponentRef } from 'react';
 import {
   Animated,
   Easing,
@@ -255,7 +255,7 @@ const WheelColumn = memo(function WheelColumn({ items, index, onIndexChange, lab
   const { colors, font } = useKit();
   const ff = font.family ? { fontFamily: font.family } : null;
   const scrollY = useRef(new Animated.Value(index * ITEM)).current; // native, driven by the scroll view
-  const ref = useRef<ScrollView>(null);
+  const ref = useRef<ComponentRef<typeof ScrollView>>(null);
   const settled = useRef(index);
   const dragging = useRef(false);
   const lastY = useRef(index * ITEM);

package/registry/time-picker/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/timeline/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/timeline/files/src/components/ui/timeline.tsx

@@ -244,7 +244,7 @@ function ScrollTimeline({
   const dottedFrom = Math.max(0, reach);
   const dottedH = measured && reach < n - 1 ? nodes[n - 1] - nodes[dottedFrom] : 0;
 
-  let fillStyle: Animated.WithAnimatedObject<ViewStyle> | null = null;
+  let fillStyle: Animated.WithAnimatedValue<ViewStyle> | null = null;
   if (fillH > 0) {
     if (frozen) {
       fillStyle = {};
@@ -379,7 +379,8 @@ function Row({
   lit,
   onNode,
 }: RowProps) {
-  const { colors, radius, dark } = useKit();
+  const { colors, radius, dark, font } = useKit();
+  const ff = font.family ? { fontFamily: font.family } : null;
   const compact = variant === 'compact';
   const card = variant === 'card';
   const scroll = variant === 'scroll';
@@ -454,21 +455,21 @@ function Row({
       <View style={[styles.titleRow, compact && styles.compactRow]}>
         <Text
           numberOfLines={compact ? 1 : 2}
-          style={[styles.title, { fontSize: titleSize, lineHeight: titleLine, color: titleColor }]}
+          style={[styles.title, ff, { fontSize: titleSize, lineHeight: titleLine, color: titleColor }]}
         >
           {item.title}
         </Text>
         {item.time ? (
           <Text
             numberOfLines={1}
-            style={[styles.time, { lineHeight: titleLine, color: current ? tint : colors.mutedForeground }]}
+            style={[styles.time, ff, { lineHeight: titleLine, color: current ? tint : colors.mutedForeground }]}
           >
             {item.time}
           </Text>
         ) : null}
       </View>
       {item.description && !compact ? (
-        <Text style={[styles.desc, { color: colors.mutedForeground }]}>{item.description}</Text>
+        <Text style={[styles.desc, ff, { color: colors.mutedForeground }]}>{item.description}</Text>
       ) : null}
       {photos.length ? <TimelineGallery images={photos} dim={muted} /> : null}
       {item.tags?.length || hasLinks ? (
@@ -478,7 +479,7 @@ function Row({
               key={`t-${t}`}
               style={[styles.tag, { borderRadius: radius.capsule(22), backgroundColor: alpha(tint, dark ? 0.2 : 0.1) }]}
             >
-              <Text style={[styles.tagText, { color: tint }]}>{t}</Text>
+              <Text style={[styles.tagText, ff, { color: tint }]}>{t}</Text>
             </View>
           ))}
           {item.links?.map((l) => (
@@ -490,14 +491,14 @@ function Row({
               hitSlop={12}
               style={({ pressed }) => [styles.link, { opacity: pressed ? 0.55 : 1 }]}
             >
-              <Text style={[styles.linkText, { color: tint }]}>{l.label} →</Text>
+              <Text style={[styles.linkText, ff, { color: tint }]}>{l.label} →</Text>
             </Pressable>
           ))}
         </View>
       ) : null}
       {item.content ? (
         <View style={styles.content}>
-          {isTextNode(item.content) ? <Text style={{ color: colors.foreground }}>{item.content}</Text> : item.content}
+          {isTextNode(item.content) ? <Text style={[ff, { color: colors.foreground }]}>{item.content}</Text> : item.content}
         </View>
       ) : null}
     </>
@@ -927,7 +928,8 @@ function TimelineGallery({ images, dim }: { images: TimelineImageSource[]; dim:
 }
 
 function Photo({ uri, delay, style, more }: { uri: string; delay: number; style: StyleProp<ViewStyle>; more: number }) {
-  const { colors } = useKit();
+  const { colors, font } = useKit();
+  const ff = font.family ? { fontFamily: font.family } : null;
   const shown = useRef(new Animated.Value(0)).current;
   return (
     <View style={[styles.photo, { backgroundColor: colors.muted }, style]}>
@@ -939,7 +941,7 @@ function Photo({ uri, delay, style, more }: { uri: string; delay: number; style:
       />
       {more > 0 ? (
         <View style={[StyleSheet.absoluteFill, styles.more]}>
-          <Text style={styles.moreText}>+{more}</Text>
+          <Text style={[styles.moreText, ff]}>+{more}</Text>
         </View>
       ) : null}
     </View>

package/registry/timeline/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/toast/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>
             ) : (