@expokit/cli 0.3.0 → 0.4.1

package/registry/button/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/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

@@ -1,5 +1,5 @@
-import React, { useRef } from 'react';
-import { ActivityIndicator, Animated, Platform, Pressable, StyleSheet, Text, View, type StyleProp, type ViewStyle } from 'react-native';
+import React, { useEffect, useRef, useState } from 'react';
+import { AccessibilityInfo, ActivityIndicator, Animated, Platform, Pressable, StyleSheet, Text, View, type StyleProp, type ViewStyle } from 'react-native';
 import * as Haptics from 'expo-haptics';
 import Svg, { Defs, LinearGradient, Rect, Stop } from 'react-native-svg';
 
@@ -38,6 +38,10 @@ export interface Button3DProps {
   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 SIZES = {
   sm: { h: 36, px: 14, font: 13, depth: 4, gap: 6 },
   md: { h: 46, px: 18, font: 15, depth: 5, gap: 8 },
@@ -105,7 +109,9 @@ export function Button3D({
   accessibilityLabel,
   style,
 }: Button3DProps) {
-  const { dark } = useKit();
+  const { dark, font } = useKit();
+  const reduce = useReduceMotion();
+  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;
@@ -115,14 +121,17 @@ export function Button3D({
   const gid = `b3d-${color ? color.replace('#', '') : kind}`;
 
   const press = useRef(new Animated.Value(0)).current;
-  const to = (v: number) => Animated.spring(press, { toValue: v, ...(v ? motion.snappy : motion.bouncy), useNativeDriver: true }).start();
+  const to = (v: number) =>
+    reduce
+      ? Animated.timing(press, { toValue: v, duration: 120, useNativeDriver: true }).start()
+      : Animated.spring(press, { toValue: v, ...(v ? motion.snappy : motion.bouncy), useNativeDriver: true }).start();
 
   const label = loading ? (
     <ActivityIndicator color={m.ink} size="small" />
   ) : 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 maxFontSizeMultiplier={FONT_CAP} style={[{ color: m.ink, fontSize: round ? s.font + 4 : s.font, fontWeight: '600', letterSpacing: 0.1, flexShrink: 0, textAlign: 'center' }, ff]}>
       {children}
     </Text>
   ) : (
@@ -184,12 +193,15 @@ export function Button3D({
           style={[
             styles.face,
             {
-              height: s.h,
+              // A circle keeps its fixed size; other keys may grow taller for a large text size.
+              minHeight: s.h,
+              height: round ? s.h : undefined,
               paddingHorizontal: round ? 0 : s.px,
               gap: s.gap,
               borderRadius: corner,
               elevation: 4,
-              transform: [{ translateY: press.interpolate({ inputRange: [0, 1], outputRange: [0, depth] }) }],
+              // Reduce Motion: the key doesn't sink; only the contact shadow dims.
+              transform: reduce ? [] : [{ translateY: press.interpolate({ inputRange: [0, 1], outputRange: [0, depth] }) }],
             },
           ]}
         >
@@ -205,6 +217,22 @@ export function Button3D({
   );
 }
 
+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({
   fill: { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 },
   shadow: { shadowColor: '#000', shadowRadius: 8, shadowOffset: { width: 0, height: 5 }, elevation: 3 },

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

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

@@ -1,6 +1,8 @@
 import React, { memo, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import {
+  AccessibilityInfo,
   Animated,
+  Easing,
   PanResponder,
   Pressable,
   StyleSheet,
@@ -98,6 +100,9 @@ type FlatProps = CalendarBaseProps & {
   onChange?: (value: CalendarValue) => void;
 };
 
+// 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 CELL_H = 48;
 const CIRCLE = 38;
 const CIRCLE_TOP = 2;
@@ -201,9 +206,11 @@ export function Calendar(props: CalendarProps) {
     accent,
     style,
   } = props as unknown as FlatProps;
-  const { colors, radius } = useKit();
+  const { colors, radius, font } = useKit();
+  const ff = font.family ? { fontFamily: font.family } : null;
   const tint = accent ?? colors.accent;
   const fmt = useFormatters(locale);
+  const reduce = useReduceMotion();
 
   const [inner, setInner] = useState<CalendarValue>(defaultValue ?? null);
   const current = value !== undefined ? value : inner;
@@ -251,7 +258,11 @@ export function Calendar(props: CalendarProps) {
     setLeaving({ month: prev, dir });
     slide.stopAnimation();
     slide.setValue(0);
-    Animated.spring(slide, { toValue: 1, useNativeDriver: true, ...motion.gentle }).start(({ finished }) => {
+    // Reduce Motion: a short cross-fade in place (the translate interpolations are flat).
+    const anim = reduce
+      ? Animated.timing(slide, { toValue: 1, duration: 150, easing: Easing.bezier(0.32, 0.72, 0, 1), useNativeDriver: true })
+      : Animated.spring(slide, { toValue: 1, useNativeDriver: true, ...motion.gentle });
+    anim.start(({ finished }) => {
       if (finished) setLeaving(null);
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -266,7 +277,8 @@ export function Calendar(props: CalendarProps) {
     if (next !== 'days' && view === 'days') setPickYear(visible.getFullYear());
     setView(next);
     viewAnim.setValue(0);
-    Animated.spring(viewAnim, { toValue: 1, useNativeDriver: true, ...motion.snappy }).start();
+    if (reduce) Animated.timing(viewAnim, { toValue: 1, duration: 150, useNativeDriver: true }).start();
+    else Animated.spring(viewAnim, { toValue: 1, useNativeDriver: true, ...motion.snappy }).start();
   };
 
   /* selection */
@@ -331,11 +343,13 @@ export function Calendar(props: CalendarProps) {
     manyKeys: many ? many.map(toDateKey).join('|') : undefined,
     tint,
     fullLabel: fmt.full,
+    reduce,
     onDayPress,
   };
 
   const W = width || 320;
-  const dir = dirRef.current;
+  // Reduce Motion: months swap with a fade only, no sideways slide.
+  const dir = reduce ? 0 : dirRef.current;
   const prevDisabled = view === 'days' ? monthIndex(visible) - 1 < minM : view === 'months' ? pickYear * 12 - 1 < minM : false;
   const nextDisabled = view === 'days' ? monthIndex(visible) + 1 > maxM : view === 'months' ? (pickYear + 1) * 12 > maxM : false;
   const decadeStart = Math.floor(pickYear / 12) * 12;
@@ -368,6 +382,7 @@ export function Calendar(props: CalendarProps) {
             numberOfLines={1}
             style={[
               styles.title,
+              ff,
               { color: view === 'days' ? colors.foreground : tint },
               view === 'days'
                 ? {
@@ -379,7 +394,7 @@ export function Calendar(props: CalendarProps) {
           >
             {title}
           </Animated.Text>
-          {monthPicker ? <Chevron turned={view !== 'days'} color={view === 'days' ? colors.mutedForeground : tint} /> : null}
+          {monthPicker ? <Chevron turned={view !== 'days'} color={view === 'days' ? colors.mutedForeground : tint} reduce={reduce} /> : null}
         </Pressable>
         <View style={styles.navs}>
           {showJump ? (
@@ -390,7 +405,9 @@ export function Calendar(props: CalendarProps) {
               hitSlop={4}
               style={({ pressed }) => [styles.todayBtn, { borderRadius: radius.capsule(32), backgroundColor: pressed ? colors.secondary : colors.muted }]}
             >
-              <Text style={[styles.todayText, { color: tint }]}>Today</Text>
+              <Text maxFontSizeMultiplier={FONT_CAP} style={[styles.todayText, ff, { color: tint }]}>
+                Today
+              </Text>
             </Pressable>
           ) : null}
           <NavButton dir={-1} disabled={prevDisabled} onPress={() => step(-1)} />
@@ -402,12 +419,12 @@ export function Calendar(props: CalendarProps) {
         <Animated.View
           style={{
             opacity: viewAnim.interpolate({ inputRange: [0, 1], outputRange: [0, 1], extrapolate: 'clamp' }),
-            transform: [{ scale: viewAnim.interpolate({ inputRange: [0, 1], outputRange: [1.04, 1] }) }],
+            transform: [{ scale: viewAnim.interpolate({ inputRange: [0, 1], outputRange: [reduce ? 1 : 1.04, 1] }) }],
           }}
         >
           <View style={styles.weekRow} accessibilityElementsHidden importantForAccessibility="no-hide-descendants">
             {weekdays.map((w) => (
-              <Text key={w.long} numberOfLines={1} style={[styles.weekday, { color: colors.mutedForeground }]}>
+              <Text key={w.long} numberOfLines={1} maxFontSizeMultiplier={FONT_CAP} style={[styles.weekday, ff, { color: colors.mutedForeground }]}>
                 {w.short}
               </Text>
             ))}
@@ -420,7 +437,7 @@ export function Calendar(props: CalendarProps) {
                   styles.leaving,
                   {
                     opacity: slide.interpolate({ inputRange: [0, 0.7], outputRange: [1, 0], extrapolate: 'clamp' }),
-                    transform: [{ translateX: slide.interpolate({ inputRange: [0, 1], outputRange: [0, -leaving.dir * W * 0.6] }) }],
+                    transform: [{ translateX: slide.interpolate({ inputRange: [0, 1], outputRange: [0, reduce ? 0 : -leaving.dir * W * 0.6] }) }],
                   },
                 ]}
               >
@@ -444,7 +461,7 @@ export function Calendar(props: CalendarProps) {
             { minHeight: gridH ? gridH + 28 : undefined },
             {
               opacity: viewAnim.interpolate({ inputRange: [0, 1], outputRange: [0, 1], extrapolate: 'clamp' }),
-              transform: [{ scale: viewAnim.interpolate({ inputRange: [0, 1], outputRange: [0.94, 1] }) }],
+              transform: [{ scale: viewAnim.interpolate({ inputRange: [0, 1], outputRange: [reduce ? 1 : 0.94, 1] }) }],
             },
           ]}
         >
@@ -486,7 +503,9 @@ export function Calendar(props: CalendarProps) {
                       },
                     ]}
                   >
-                    <Text style={[styles.pickText, { color: selected ? readableOn(tint) : isNow ? tint : colors.foreground }]}>{label}</Text>
+                    <Text maxFontSizeMultiplier={FONT_CAP} style={[styles.pickText, ff, { color: selected ? readableOn(tint) : isNow ? tint : colors.foreground }]}>
+                      {label}
+                    </Text>
                   </View>
                 )}
               </Pressable>
@@ -518,6 +537,7 @@ interface MonthGridProps {
   manyKeys?: string;
   tint: string;
   fullLabel: (d: Date) => string;
+  reduce: boolean;
   onDayPress: (d: Date) => void;
 }
 
@@ -539,6 +559,7 @@ const MonthGrid = memo(function MonthGrid({
   manyKeys,
   tint,
   fullLabel,
+  reduce,
   onDayPress,
 }: MonthGridProps) {
   const weeks = useMemo(() => buildWeeks(month, weekStartsOn, fixedWeeks), [month, weekStartsOn, fixedWeeks]);
@@ -593,6 +614,7 @@ const MonthGrid = memo(function MonthGrid({
                 highlight={highlightedDates?.[key]}
                 tile={tiles && inMonth && !inBand}
                 tint={tint}
+                reduce={reduce}
                 onPress={onDayPress}
               />
             );
@@ -618,6 +640,7 @@ interface DayCellProps {
   highlight?: string;
   tile: boolean;
   tint: string;
+  reduce: boolean;
   onPress: (d: Date) => void;
 }
 
@@ -636,15 +659,19 @@ const DayCell = memo(function DayCell({
   highlight,
   tile,
   tint,
+  reduce,
   onPress,
 }: DayCellProps) {
-  const { colors, radius } = useKit();
+  const { colors, radius, font } = useKit();
+  const ff = font.family ? { fontFamily: font.family } : null;
   const r = tileRadius(radius.md);
   const pop = useRef(new Animated.Value(selected ? 1 : 0)).current; // native: circle scale + opacity
   const bandIn = useRef(new Animated.Value(band === 'none' ? 0 : 1)).current; // native: band opacity
   useEffect(() => {
-    Animated.spring(pop, { toValue: selected ? 1 : 0, useNativeDriver: true, ...motion.bouncy }).start();
-  }, [selected, pop]);
+    // Reduce Motion: the selection fills in with a quick fade, no scale pop.
+    if (reduce) Animated.timing(pop, { toValue: selected ? 1 : 0, duration: 150, useNativeDriver: true }).start();
+    else Animated.spring(pop, { toValue: selected ? 1 : 0, useNativeDriver: true, ...motion.bouncy }).start();
+  }, [selected, pop, reduce]);
   useEffect(() => {
     Animated.timing(bandIn, { toValue: band === 'none' ? 0 : 1, duration: motion.normal, useNativeDriver: true }).start();
   }, [band, bandIn]);
@@ -711,14 +738,16 @@ const DayCell = memo(function DayCell({
                 borderRadius: r,
                 backgroundColor: tint,
                 opacity: pop.interpolate({ inputRange: [0, 0.4], outputRange: [0, 1], extrapolate: 'clamp' }),
-                transform: [{ scale: pop.interpolate({ inputRange: [0, 1], outputRange: [0.45, 1] }) }],
+                transform: [{ scale: pop.interpolate({ inputRange: [0, 1], outputRange: [reduce ? 1 : 0.45, 1] }) }],
               },
             ]}
           />
           <View pointerEvents="none" style={styles.label}>
             <Text
+              maxFontSizeMultiplier={FONT_CAP}
               style={[
                 styles.day,
+                ff,
                 { color: textColor },
                 (today || selected) && styles.dayStrong,
                 outside && !selected && styles.outside,
@@ -768,11 +797,15 @@ function NavButton({ dir, disabled, onPress }: { dir: 1 | -1; disabled: boolean;
   );
 }
 
-function Chevron({ turned, color }: { turned: boolean; color: string }) {
+function Chevron({ turned, color, reduce }: { turned: boolean; color: string; reduce: boolean }) {
   const turn = useRef(new Animated.Value(turned ? 1 : 0)).current; // native
   useEffect(() => {
+    if (reduce) {
+      turn.setValue(turned ? 1 : 0);
+      return;
+    }
     Animated.spring(turn, { toValue: turned ? 1 : 0, useNativeDriver: true, ...motion.snappy }).start();
-  }, [turned, turn]);
+  }, [turned, turn, reduce]);
   return (
     <Animated.View style={{ transform: [{ rotate: turn.interpolate({ inputRange: [0, 1], outputRange: ['0deg', '180deg'] }) }] }}>
       <Svg width={16} height={16} viewBox="0 0 24 24" fill="none">
@@ -782,6 +815,22 @@ function Chevron({ turned, color }: { turned: boolean; color: string }) {
   );
 }
 
+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({
   root: { alignSelf: 'stretch' },
   header: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', marginBottom: 10, minHeight: 40 },
@@ -789,7 +838,7 @@ const styles = StyleSheet.create({
   title: { fontSize: 17, fontWeight: '400', letterSpacing: -0.3, flexShrink: 1 },
   navs: { flexDirection: 'row', alignItems: 'center', gap: 6 },
   nav: { width: 32, height: 32, borderRadius: 16, alignItems: 'center', justifyContent: 'center' },
-  todayBtn: { height: 32, paddingHorizontal: 12, alignItems: 'center', justifyContent: 'center' },
+  todayBtn: { minHeight: 32, paddingHorizontal: 12, alignItems: 'center', justifyContent: 'center' },
   todayText: { fontSize: 13, fontWeight: '400' },
   weekRow: { flexDirection: 'row', marginBottom: 6 },
   weekday: { flex: 1, textAlign: 'center', fontSize: 13, fontWeight: '400', letterSpacing: 0.2 },
@@ -817,6 +866,6 @@ const styles = StyleSheet.create({
   dot: { width: 5, height: 5, borderRadius: 2.5 },
   pickGrid: { flexDirection: 'row', flexWrap: 'wrap', alignContent: 'center', paddingTop: 4 },
   pickCell: { width: '33.333%', height: 56, alignItems: 'center', justifyContent: 'center' },
-  pickInner: { minWidth: 76, height: 40, paddingHorizontal: 14, alignItems: 'center', justifyContent: 'center', borderWidth: 1.5 },
+  pickInner: { minWidth: 76, minHeight: 40, paddingHorizontal: 14, alignItems: 'center', justifyContent: 'center', borderWidth: 1.5 },
   pickText: { fontSize: 15, fontWeight: '400' },
 });

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

@@ -1,5 +1,6 @@
-import React, { createContext, useContext, useId, useRef, useState } from 'react';
+import React, { createContext, useContext, useEffect, useId, useRef, useState, type ComponentRef } from 'react';
 import {
+  AccessibilityInfo,
   Animated,
   Image,
   Platform,
@@ -67,6 +68,7 @@ export function Card({
   const interactive = !!(onPress || onLongPress || pressable);
   const corner = radius.scale(18);
   const gid = 'card' + useId().replace(/[^a-zA-Z0-9]/g, '');
+  const reduce = useReduceMotion();
 
   const scale = useRef(new Animated.Value(1)).current;
   const glow = useRef(new Animated.Value(0)).current;
@@ -87,18 +89,20 @@ export function Card({
 
   const border = (surfaces[variant].borderWidth as number | undefined) ?? 0;
 
+  // Reduce Motion: no press squish and the spotlight doesn't grow; the glow still fades in and out.
   const pressIn = (e: GestureResponderEvent) => {
-    Animated.spring(scale, { toValue: 0.975, useNativeDriver: true, ...motion.snappy }).start();
+    if (!reduce) Animated.spring(scale, { toValue: 0.975, useNativeDriver: true, ...motion.snappy }).start();
     if (highlight === 'none') return;
     moveSpot(e);
     Animated.spring(glow, { toValue: 1, useNativeDriver: true, ...motion.gentle }).start();
   };
   const pressOut = () => {
-    Animated.spring(scale, { toValue: 1, useNativeDriver: true, ...motion.bouncy }).start();
-    if (highlight !== 'none') Animated.timing(glow, { toValue: 0, duration: 420, useNativeDriver: true }).start();
+    if (reduce) scale.setValue(1);
+    else Animated.spring(scale, { toValue: 1, useNativeDriver: true, ...motion.bouncy }).start();
+    if (highlight !== 'none') Animated.timing(glow, { toValue: 0, duration: reduce ? 150 : 420, useNativeDriver: true }).start();
   };
   // Touch coordinates are relative to whichever child was hit, so work from page coordinates.
-  const clipRef = useRef<View>(null);
+  const clipRef = useRef<ComponentRef<typeof View>>(null);
   const origin = useRef({ x: 0, y: 0 });
   const placeSpot = (pageX: number, pageY: number) =>
     spot.setValue({ x: pageX - origin.current.x - spotD / 2, y: pageY - origin.current.y - spotD / 2 });
@@ -125,7 +129,7 @@ export function Card({
               transform: [
                 { translateX: spot.x },
                 { translateY: spot.y },
-                { scale: glow.interpolate({ inputRange: [0, 1], outputRange: [0.4, 1] }) },
+                { scale: glow.interpolate({ inputRange: [0, 1], outputRange: reduce ? [1, 1] : [0.4, 1] }) },
               ],
             },
           ]}
@@ -215,18 +219,20 @@ export interface CardTextProps {
 }
 
 export function CardTitle({ children, numberOfLines, style }: CardTextProps) {
-  const { colors } = useKit();
+  const { colors, font } = useKit();
+  const ff = font.family ? { fontFamily: font.family } : null;
   return (
-    <Text accessibilityRole="header" numberOfLines={numberOfLines} style={[styles.title, { color: colors.cardForeground }, style]}>
+    <Text accessibilityRole="header" numberOfLines={numberOfLines} style={[styles.title, ff, { color: colors.cardForeground }, style]}>
       {children}
     </Text>
   );
 }
 
 export function CardDescription({ children, numberOfLines, style }: CardTextProps) {
-  const { colors } = useKit();
+  const { colors, font } = useKit();
+  const ff = font.family ? { fontFamily: font.family } : null;
   return (
-    <Text numberOfLines={numberOfLines} style={[styles.description, { color: colors.mutedForeground }, style]}>
+    <Text numberOfLines={numberOfLines} style={[styles.description, ff, { color: colors.mutedForeground }, style]}>
       {children}
     </Text>
   );
@@ -286,6 +292,22 @@ function shadow(opacity: number, y: number, blur: number, elevation = 2): ViewSt
   return { shadowColor: '#000', shadowOpacity: opacity, shadowRadius: blur / 2, shadowOffset: { width: 0, height: y }, elevation };
 }
 
+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({
   clip: { overflow: 'hidden' },
   spot: { position: 'absolute', top: 0, left: 0 },

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