@expokit/cli 0.4.0 → 0.4.2

package/registry/_docs/timeline-chart.json

@@ -25,6 +25,12 @@
       "(v) => string",
       "compact",
       "Axis labels."
+    ],
+    [
+      "accessibilityLabel",
+      "string",
+      "auto summary",
+      "What screen readers announce; defaults to a summary of the data."
     ]
   ],
   "behavior": [],

package/registry/_docs/timeline.json

@@ -136,17 +136,17 @@
     {
       "name": "OrderTracking",
       "title": "Order Tracking",
-      "code": "import { Text, View } from 'react-native';\nimport { Timeline } from '@/components/ui/timeline';\nimport { alpha, useKit } from '@/lib/kit';\n\nexport default function OrderTracking() {\n  const { colors, radius, dark } = useKit();\n  return (\n    <View style={{ gap: 18 }}>\n      <View style={{ flexDirection: 'row', alignItems: 'flex-end', justifyContent: 'space-between' }}>\n        <View style={{ gap: 2 }}>\n          <Text style={{ fontSize: 12.5, letterSpacing: 0.4, color: colors.mutedForeground }}>ORDER #4821</Text>\n          <Text style={{ fontSize: 20, letterSpacing: -0.4, color: colors.foreground }}>Arriving today</Text>\n        </View>\n        <View\n          style={{\n            paddingHorizontal: 10,\n            paddingVertical: 4,\n            borderRadius: radius.capsule(24),\n            backgroundColor: alpha(colors.accent, dark ? 0.2 : 0.1),\n          }}\n        >\n          <Text style={{ fontSize: 12.5, color: colors.accent }}>by 6 PM</Text>\n        </View>\n      </View>\n      <Timeline\n        items={[\n          { title: 'Ordered', time: 'Mon 9:12', description: 'Paid with Apple Pay · 2 items', icon: 'cart' },\n          { title: 'Packed', time: 'Tue 16:40', description: 'Left the Rotterdam warehouse', icon: 'package' },\n          {\n            title: 'Out for delivery',\n            time: '11:05',\n            description: 'Jonas is 6 stops away in a white van',\n            icon: 'truck',\n            status: 'current',\n          },\n          { title: 'Delivered', time: 'Est. 17:30', description: 'Leave at the front door if no one answers', icon: 'home', status: 'upcoming' },\n        ]}\n      />\n    </View>\n  );\n}\n"
+      "code": "import { Text, View } from 'react-native';\nimport { Timeline } from '@/components/ui/timeline';\nimport { alpha, useKit } from '@/lib/kit';\n\n/** Control text stops at iOS's largest standard size. */\nconst FONT_CAP = 1.35;\n\nexport default function OrderTracking() {\n  const { colors, radius, dark } = useKit();\n  return (\n    <View style={{ gap: 18 }}>\n      <View style={{ flexDirection: 'row', alignItems: 'flex-end', justifyContent: 'space-between' }}>\n        <View style={{ flexShrink: 1, gap: 2 }}>\n          <Text style={{ fontSize: 12.5, letterSpacing: 0.4, color: colors.mutedForeground }}>ORDER #4821</Text>\n          <Text style={{ fontSize: 20, letterSpacing: -0.4, color: colors.foreground }}>Arriving today</Text>\n        </View>\n        <View\n          style={{\n            paddingHorizontal: 10,\n            paddingVertical: 4,\n            borderRadius: radius.capsule(24),\n            backgroundColor: alpha(colors.accent, dark ? 0.2 : 0.1),\n          }}\n        >\n          <Text maxFontSizeMultiplier={FONT_CAP} style={{ fontSize: 12.5, color: colors.accent }}>by 6 PM</Text>\n        </View>\n      </View>\n      <Timeline\n        items={[\n          { title: 'Ordered', time: 'Mon 9:12', description: 'Paid with Apple Pay · 2 items', icon: 'cart' },\n          { title: 'Packed', time: 'Tue 16:40', description: 'Left the Rotterdam warehouse', icon: 'package' },\n          {\n            title: 'Out for delivery',\n            time: '11:05',\n            description: 'Jonas is 6 stops away in a white van',\n            icon: 'truck',\n            status: 'current',\n          },\n          { title: 'Delivered', time: 'Est. 17:30', description: 'Leave at the front door if no one answers', icon: 'home', status: 'upcoming' },\n        ]}\n      />\n    </View>\n  );\n}\n"
     },
     {
       "name": "Activity",
       "title": "Activity",
-      "code": "import { Text, View } from 'react-native';\nimport { Timeline } from '@/components/ui/timeline';\nimport { alpha, useKit } from '@/lib/kit';\n\nexport default function Activity() {\n  const { colors, radius, dark } = useKit();\n  return (\n    <Timeline\n      items={[\n        {\n          title: 'Priya Shah commented',\n          time: '2m',\n          avatar: { name: 'Priya Shah', src: 'https://i.pravatar.cc/120?img=32' },\n          status: 'current',\n          content: (\n            <View\n              style={{\n                padding: 12,\n                borderRadius: radius.md,\n                backgroundColor: alpha(colors.foreground, dark ? 0.06 : 0.035),\n              }}\n            >\n              <Text style={{ fontSize: 14, lineHeight: 20, color: colors.foreground }}>\n                Love the new onboarding — can we try the shorter headline on step two?\n              </Text>\n            </View>\n          ),\n        },\n        {\n          title: 'Marco Bianchi uploaded 3 photos',\n          time: '1h',\n          description: 'Moodboard · Autumn campaign',\n          avatar: { name: 'Marco Bianchi', src: 'https://i.pravatar.cc/120?img=15' },\n          image: { uri: 'https://picsum.photos/id/1043/800/450', aspectRatio: 16 / 9 },\n        },\n        {\n          title: 'Lena Fischer shared a file',\n          time: '3h',\n          avatar: { name: 'Lena Fischer' },\n          content: (\n            <View\n              style={{\n                flexDirection: 'row',\n                alignItems: 'center',\n                gap: 12,\n                padding: 12,\n                borderRadius: radius.md,\n                borderWidth: 1,\n                borderColor: alpha(colors.foreground, dark ? 0.1 : 0.06),\n                backgroundColor: colors.card,\n              }}\n            >\n              <View\n                style={{\n                  width: 36,\n                  height: 36,\n                  borderRadius: radius.sm,\n                  backgroundColor: alpha(colors.danger, 0.12),\n                  alignItems: 'center',\n                  justifyContent: 'center',\n                }}\n              >\n                <Text style={{ fontSize: 11, color: colors.danger }}>PDF</Text>\n              </View>\n              <View style={{ flex: 1 }}>\n                <Text numberOfLines={1} style={{ fontSize: 14, color: colors.foreground }}>Q4 brand guidelines.pdf</Text>\n                <Text style={{ fontSize: 12.5, color: colors.mutedForeground }}>4.2 MB · 18 pages</Text>\n              </View>\n            </View>\n          ),\n        },\n        { title: 'Nightly build failed', time: 'Yesterday', description: 'iOS · Signing certificate expired', status: 'error', icon: 'bug' },\n      ]}\n    />\n  );\n}\n"
+      "code": "import { Text, View } from 'react-native';\nimport { Timeline } from '@/components/ui/timeline';\nimport { alpha, useKit } from '@/lib/kit';\n\n/** Control text stops at iOS's largest standard size. */\nconst FONT_CAP = 1.35;\n\nexport default function Activity() {\n  const { colors, radius, dark } = useKit();\n  return (\n    <Timeline\n      items={[\n        {\n          title: 'Priya Shah commented',\n          time: '2m',\n          avatar: { name: 'Priya Shah', src: 'https://i.pravatar.cc/120?img=32' },\n          status: 'current',\n          content: (\n            <View\n              style={{\n                padding: 12,\n                borderRadius: radius.md,\n                backgroundColor: alpha(colors.foreground, dark ? 0.06 : 0.035),\n              }}\n            >\n              <Text style={{ fontSize: 14, lineHeight: 20, color: colors.foreground }}>\n                Love the new onboarding — can we try the shorter headline on step two?\n              </Text>\n            </View>\n          ),\n        },\n        {\n          title: 'Marco Bianchi uploaded 3 photos',\n          time: '1h',\n          description: 'Moodboard · Autumn campaign',\n          avatar: { name: 'Marco Bianchi', src: 'https://i.pravatar.cc/120?img=15' },\n          image: { uri: 'https://picsum.photos/id/1043/800/450', aspectRatio: 16 / 9 },\n        },\n        {\n          title: 'Lena Fischer shared a file',\n          time: '3h',\n          avatar: { name: 'Lena Fischer' },\n          content: (\n            <View\n              style={{\n                flexDirection: 'row',\n                alignItems: 'center',\n                gap: 12,\n                padding: 12,\n                borderRadius: radius.md,\n                borderWidth: 1,\n                borderColor: alpha(colors.foreground, dark ? 0.1 : 0.06),\n                backgroundColor: colors.card,\n              }}\n            >\n              <View\n                style={{\n                  width: 36,\n                  height: 36,\n                  borderRadius: radius.sm,\n                  backgroundColor: alpha(colors.danger, 0.12),\n                  alignItems: 'center',\n                  justifyContent: 'center',\n                }}\n              >\n                <Text maxFontSizeMultiplier={FONT_CAP} style={{ fontSize: 11, color: colors.danger }}>PDF</Text>\n              </View>\n              <View style={{ flex: 1 }}>\n                <Text numberOfLines={1} style={{ fontSize: 14, color: colors.foreground }}>Q4 brand guidelines.pdf</Text>\n                <Text style={{ fontSize: 12.5, color: colors.mutedForeground }}>4.2 MB · 18 pages</Text>\n              </View>\n            </View>\n          ),\n        },\n        { title: 'Nightly build failed', time: 'Yesterday', description: 'iOS · Signing certificate expired', status: 'error', icon: 'bug' },\n      ]}\n    />\n  );\n}\n"
     },
     {
       "name": "Release",
       "title": "Release",
-      "code": "import { Text, View } from 'react-native';\nimport { Timeline } from '@/components/ui/timeline';\nimport { alpha, useKit } from '@/lib/kit';\n\nexport default function Release() {\n  const { colors, radius, dark } = useKit();\n  return (\n    <Timeline\n      variant=\"card\"\n      items={[\n        { title: 'v3.0 — Widgets', time: 'Next week', description: 'Home-screen widgets for iOS and Android.', icon: 'rocket', status: 'upcoming' },\n        {\n          title: 'v2.4 — Offline mode',\n          time: 'Oct 8',\n          description: 'Edit notes without a connection; changes sync when you are back online.',\n          icon: 'star',\n          status: 'current',\n          content: (\n            <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 6 }}>\n              {['New', 'Sync', 'iOS', 'Android'].map((t) => (\n                <View\n                  key={t}\n                  style={{\n                    paddingHorizontal: 9,\n                    paddingVertical: 3,\n                    borderRadius: radius.capsule(22),\n                    backgroundColor: alpha(colors.accent, dark ? 0.2 : 0.1),\n                  }}\n                >\n                  <Text style={{ fontSize: 12, color: colors.accent }}>{t}</Text>\n                </View>\n              ))}\n            </View>\n          ),\n        },\n        { title: 'v2.3.2 — Fixes', time: 'Sep 29', description: 'Fixed a crash when sharing large PDFs.', icon: 'bug' },\n        { title: 'v2.3 — Shared folders', time: 'Sep 12', description: 'Invite people to a folder and edit together.', icon: 'user' },\n      ]}\n    />\n  );\n}\n"
+      "code": "import { Text, View } from 'react-native';\nimport { Timeline } from '@/components/ui/timeline';\nimport { alpha, useKit } from '@/lib/kit';\n\n/** Control text stops at iOS's largest standard size. */\nconst FONT_CAP = 1.35;\n\nexport default function Release() {\n  const { colors, radius, dark } = useKit();\n  return (\n    <Timeline\n      variant=\"card\"\n      items={[\n        { title: 'v3.0 — Widgets', time: 'Next week', description: 'Home-screen widgets for iOS and Android.', icon: 'rocket', status: 'upcoming' },\n        {\n          title: 'v2.4 — Offline mode',\n          time: 'Oct 8',\n          description: 'Edit notes without a connection; changes sync when you are back online.',\n          icon: 'star',\n          status: 'current',\n          content: (\n            <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 6 }}>\n              {['New', 'Sync', 'iOS', 'Android'].map((t) => (\n                <View\n                  key={t}\n                  style={{\n                    paddingHorizontal: 9,\n                    paddingVertical: 3,\n                    borderRadius: radius.capsule(22),\n                    backgroundColor: alpha(colors.accent, dark ? 0.2 : 0.1),\n                  }}\n                >\n                  <Text maxFontSizeMultiplier={FONT_CAP} style={{ fontSize: 12, color: colors.accent }}>{t}</Text>\n                </View>\n              ))}\n            </View>\n          ),\n        },\n        { title: 'v2.3.2 — Fixes', time: 'Sep 29', description: 'Fixed a crash when sharing large PDFs.', icon: 'bug' },\n        { title: 'v2.3 — Shared folders', time: 'Sep 12', description: 'Invite people to a folder and edit together.', icon: 'user' },\n      ]}\n    />\n  );\n}\n"
     },
     {
       "name": "Compact",
@@ -156,7 +156,7 @@
     {
       "name": "Support",
       "title": "Support",
-      "code": "import { Text, View } from 'react-native';\nimport { Avatar } from '@/components/ui/avatar';\nimport { Timeline } from '@/components/ui/timeline';\nimport { alpha, useKit } from '@/lib/kit';\n\nexport default function Support() {\n  const { colors } = useKit();\n  return (\n    <View style={{ gap: 14 }}>\n      <View style={{ flexDirection: 'row', alignItems: 'center', gap: 10 }}>\n        <Avatar size=\"sm\" name=\"Support\" status=\"online\" />\n        <Text style={{ fontSize: 15, color: colors.foreground }}>Refund request #RF-2207</Text>\n      </View>\n      <Timeline\n        variant=\"compact\"\n        accent={colors.success}\n        items={[\n          { title: 'Request received', time: 'Oct 9' },\n          { title: 'Return label sent', time: 'Oct 9' },\n          { title: 'Card refund declined', time: 'Oct 12', status: 'error' },\n          { title: 'Refund to store credit', time: 'Now', status: 'current' },\n        ]}\n      />\n    </View>\n  );\n}\n"
+      "code": "import { Text, View } from 'react-native';\nimport { Avatar } from '@/components/ui/avatar';\nimport { Timeline } from '@/components/ui/timeline';\nimport { alpha, useKit } from '@/lib/kit';\n\nexport default function Support() {\n  const { colors } = useKit();\n  return (\n    <View style={{ gap: 14 }}>\n      <View style={{ flexDirection: 'row', alignItems: 'center', gap: 10 }}>\n        <Avatar size=\"sm\" name=\"Support\" status=\"online\" />\n        <Text style={{ flexShrink: 1, fontSize: 15, color: colors.foreground }}>Refund request #RF-2207</Text>\n      </View>\n      <Timeline\n        variant=\"compact\"\n        accent={colors.success}\n        items={[\n          { title: 'Request received', time: 'Oct 9' },\n          { title: 'Return label sent', time: 'Oct 9' },\n          { title: 'Card refund declined', time: 'Oct 12', status: 'error' },\n          { title: 'Refund to store credit', time: 'Now', status: 'current' },\n        ]}\n      />\n    </View>\n  );\n}\n"
     },
     {
       "name": "Journey",

package/registry/_docs/treemap.json

@@ -25,6 +25,12 @@
       "string[]",
       "theme palette",
       "Tile colours."
+    ],
+    [
+      "accessibilityLabel",
+      "string",
+      "auto summary",
+      "What screen readers announce; defaults to a summary of the data."
     ]
   ],
   "behavior": [],

package/registry/_docs/waterfall.json

@@ -31,6 +31,12 @@
       "boolean",
       "true",
       "Change labels."
+    ],
+    [
+      "accessibilityLabel",
+      "string",
+      "auto summary",
+      "What screen readers announce; defaults to a summary of the data."
     ]
   ],
   "behavior": [],

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

@@ -1,5 +1,6 @@
 import React, { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import {
+  AccessibilityInfo,
   Animated,
   Pressable,
   StyleSheet,
@@ -36,6 +37,7 @@ interface Ctx {
   toggle: (v: string) => void;
   variant: AccordionVariant;
   tint: string;
+  reduce: boolean;
 }
 const AccordionContext = createContext<Ctx | null>(null);
 const PositionContext = createContext({ first: true, last: true });
@@ -53,6 +55,7 @@ export function Accordion({
   style,
 }: AccordionProps) {
   const { colors, radius } = useKit();
+  const reduce = useReduceMotion();
   const [inner, setInner] = useState(defaultValue);
   const open = value ?? inner;
   const openRef = useRef(open);
@@ -72,7 +75,10 @@ export function Accordion({
     [type, collapsible, value, onValueChange]
   );
 
-  const ctx = useMemo(() => ({ open, toggle, variant, tint: accent ?? colors.accent }), [open, toggle, variant, accent, colors.accent]);
+  const ctx = useMemo(
+    () => ({ open, toggle, variant, tint: accent ?? colors.accent, reduce }),
+    [open, toggle, variant, accent, colors.accent, reduce]
+  );
   const items = React.Children.toArray(children);
 
   return (
@@ -117,7 +123,7 @@ export interface AccordionItemProps {
 export function AccordionItem({ value, title, subtitle, icon, children, disabled, style }: AccordionItemProps) {
   const ctx = useContext(AccordionContext);
   if (!ctx) throw new Error('AccordionItem must be used inside <Accordion>');
-  const { open: openValues, toggle, variant, tint } = ctx;
+  const { open: openValues, toggle, variant, tint, reduce } = ctx;
   const { last } = useContext(PositionContext);
   const { colors, radius, dark, font } = useKit();
   const ff = font.family ? { fontFamily: font.family } : null;
@@ -129,9 +135,15 @@ export function AccordionItem({ value, title, subtitle, icon, children, disabled
   const turn = useRef(new Animated.Value(open ? 1 : 0)).current;
 
   useEffect(() => {
+    // Reduce Motion: open and close at once, chevron flips without turning.
+    if (reduce) {
+      progress.setValue(open ? 1 : 0);
+      turn.setValue(open ? 1 : 0);
+      return;
+    }
     Animated.spring(progress, { toValue: open ? 1 : 0, useNativeDriver: false, ...motion.gentle, overshootClamping: true }).start();
     Animated.spring(turn, { toValue: open ? 1 : 0, useNativeDriver: true, ...motion.snappy }).start();
-  }, [open, progress, turn]);
+  }, [open, progress, turn, reduce]);
 
   const onLayout = (e: LayoutChangeEvent) => {
     const h = Math.ceil(e.nativeEvent.layout.height);
@@ -222,6 +234,22 @@ export function AccordionItem({ value, title, subtitle, icon, children, disabled
 
 Accordion.Item = AccordionItem;
 
+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({
   separated: { gap: 10 },
   header: { flexDirection: 'row', alignItems: 'center', minHeight: 56, paddingVertical: 14, gap: 12 },

package/registry/action-sheet/files/src/components/ui/action-sheet.tsx

@@ -104,6 +104,9 @@ export interface ActionSheetProps {
   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 DEFAULT_BOTTOM_INSET = Platform.select({ ios: 20, android: 12, default: 16 }) ?? 16;
 
 /** iOS-style resistance: moves 1:1 at first, then ever more slowly towards `limit`. */
@@ -296,7 +299,7 @@ export function ActionSheet({
                   <View style={[styles.tileIcon, { backgroundColor: fill, borderRadius: radius.scale(16) }]}>
                     {icon(a, fg, 24)}
                   </View>
-                  <Text numberOfLines={2} style={[styles.tileLabel, ff, { color: a.destructive ? colors.danger : colors.foreground }]}>
+                  <Text maxFontSizeMultiplier={FONT_CAP} numberOfLines={2} style={[styles.tileLabel, ff, { color: a.destructive ? colors.danger : colors.foreground }]}>
                     {a.label}
                   </Text>
                 </Row>

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;
 
@@ -454,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, ff, { 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 },
@@ -119,6 +124,7 @@ export function Button({
   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;
@@ -145,11 +151,16 @@ 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}
+      maxFontSizeMultiplier={FONT_CAP}
       style={[styles.label, ff, { color: fg, fontSize: s.font }, variant === 'link' && styles.link, textStyle]}
     >
       {children}
@@ -185,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,
@@ -236,7 +248,7 @@ export function Button({
               <View style={styles.row}>
                 <ActivityIndicator size="small" color={fg} />
                 {size !== 'icon' && isTextNode(children) ? (
-                  <Text style={[styles.label, ff, { 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>
             ) : (
@@ -253,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/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. */
@@ -260,7 +260,7 @@ 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) },
               ],
             }}
           >

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;
@@ -512,6 +516,7 @@ function NavButton({ item, active, look, tint, idle, surface, fab, showLabels, r
               >
                 <Animated.Text
                   numberOfLines={1}
+                  maxFontSizeMultiplier={FONT_CAP}
                   style={[
                     styles.pillLabel,
                     ff,
@@ -531,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, ff]} 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>
@@ -561,6 +566,7 @@ function NavButton({ item, active, look, tint, idle, surface, fab, showLabels, r
         {showLabels ? (
           <Animated.Text
             numberOfLines={1}
+            maxFontSizeMultiplier={FONT_CAP}
             style={[
               styles.label,
               styles.floatLabel,
@@ -591,7 +597,7 @@ function NavButton({ item, active, look, tint, idle, surface, fab, showLabels, r
           {badge}
         </Animated.View>
         {showLabels ? (
-          <Text numberOfLines={1} style={[styles.label, ff, { color: active ? tint : idle }]}>
+          <Text numberOfLines={1} maxFontSizeMultiplier={FONT_CAP} style={[styles.label, ff, { color: active ? tint : idle }]}>
             {item.label}
           </Text>
         ) : null}
@@ -677,7 +683,7 @@ function CentreAction({
         </FabFace>
       </Animated.View>
       {showLabel ? (
-        <Text numberOfLines={1} style={[styles.label, styles.abs, ff, { top: labelTop, color: labelColor }]}>
+        <Text numberOfLines={1} maxFontSizeMultiplier={FONT_CAP} style={[styles.label, styles.abs, ff, { top: labelTop, color: labelColor }]}>
           {item.label}
         </Text>
       ) : null}
@@ -791,7 +797,7 @@ function Badge({ value, ring, reduce }: { value: true | number; ring: string; re
         },
       ]}
     >
-      {!dot && <Text style={[styles.badgeText, ff, { color: colors.dangerForeground }]}>{text}</Text>}
+      {!dot && <Text maxFontSizeMultiplier={FONT_CAP} style={[styles.badgeText, ff, { color: colors.dangerForeground }]}>{text}</Text>}
     </Animated.View>
   );
 }
@@ -1043,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/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 },
@@ -119,6 +124,7 @@ export function Button({
   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;
@@ -145,11 +151,16 @@ 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}
+      maxFontSizeMultiplier={FONT_CAP}
       style={[styles.label, ff, { color: fg, fontSize: s.font }, variant === 'link' && styles.link, textStyle]}
     >
       {children}
@@ -185,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,
@@ -236,7 +248,7 @@ export function Button({
               <View style={styles.row}>
                 <ActivityIndicator size="small" color={fg} />
                 {size !== 'icon' && isTextNode(children) ? (
-                  <Text style={[styles.label, ff, { 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>
             ) : (
@@ -253,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-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 },
@@ -106,6 +110,7 @@ export function Button3D({
   style,
 }: Button3DProps) {
   const { dark, font } = useKit();
+  const reduce = useReduceMotion();
   const ff = font.family ? { fontFamily: font.family } : null;
   const s = SIZES[size];
   const depth = depthProp ?? s.depth;
@@ -116,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' }, ff]}>
+    <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>
   ) : (
@@ -185,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] }) }],
             },
           ]}
         >
@@ -206,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 },