@expokit/cli 0.4.0 → 0.4.1

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

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { Animated, Easing, Pressable, StyleSheet, Text, View, type StyleProp, type ViewStyle } from 'react-native';
+import { AccessibilityInfo, Animated, Easing, Pressable, StyleSheet, Text, View, type StyleProp, type ViewStyle } from 'react-native';
 import Svg, { Defs, LinearGradient, Path, Rect, Stop } from 'react-native-svg';
 
 import { FlipCard, useFlipProgress } from '@/components/ui/flip-card';
@@ -170,6 +170,10 @@ function contrast(a: string, b: string) {
   return (Math.max(x, y) + 0.05) / (Math.min(x, y) + 0.05);
 }
 
+// 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 DAY = 86_400_000;
 const pad2 = (n: number) => String(n).padStart(2, '0');
 
@@ -197,7 +201,7 @@ function useRemaining(at?: Date | number) {
 }
 
 /** The promo code in a dashed chip; a tap copies it and flips the icon to a check for a moment. */
-function CodeChip({ code, color, ink, fontSize, onCopy, labels }: { code: string; color: string; ink: string; fontSize: number; onCopy?: (code: string) => void; labels: Required<CouponLabels> }) {
+function CodeChip({ code, color, ink, fontSize, onCopy, labels, reduce }: { code: string; color: string; ink: string; fontSize: number; onCopy?: (code: string) => void; labels: Required<CouponLabels>; reduce: boolean }) {
   const { font } = useKit();
   const ff = font.family ? { fontFamily: font.family } : null;
   const [copied, setCopied] = useState(false);
@@ -208,8 +212,10 @@ function CodeChip({ code, color, ink, fontSize, onCopy, labels }: { code: string
   const copy = () => {
     onCopy?.(code);
     setCopied(true);
-    pop.setValue(0.4);
-    Animated.spring(pop, { toValue: 1, ...motion.bouncy, useNativeDriver: true }).start();
+    if (!reduce) {
+      pop.setValue(0.4);
+      Animated.spring(pop, { toValue: 1, ...motion.bouncy, useNativeDriver: true }).start();
+    }
     clearTimeout(timer.current);
     timer.current = setTimeout(() => setCopied(false), 1600);
   };
@@ -228,7 +234,7 @@ function CodeChip({ code, color, ink, fontSize, onCopy, labels }: { code: string
           <Rect x={0.75} y={0.75} width={box.w - 1.5} height={box.h - 1.5} rx={8} fill="none" stroke={alpha(color, 0.75)} strokeWidth={1.5} strokeDasharray={[5, 4]} />
         </Svg>
       ) : null}
-      <Text numberOfLines={1} style={[{ color: ink, fontSize, fontWeight: '800', letterSpacing: 1, flexShrink: 1 }, ff]}>
+      <Text numberOfLines={1} maxFontSizeMultiplier={FONT_CAP} style={[{ color: ink, fontSize, fontWeight: '800', letterSpacing: 1, flexShrink: 1 }, ff]}>
         {code}
       </Text>
       {onCopy ? (
@@ -329,6 +335,7 @@ export function Coupon({
 }: CouponProps) {
   const { colors, dark, font } = useKit();
   const ff = font.family ? { fontFamily: font.family } : null;
+  const reduce = useReduceMotion();
   const theme = typeof themeProp === 'object' ? themeProp : couponThemes[themeProp];
   const fills = typeof theme.fill === 'string' ? [theme.fill] : theme.fill;
   const accent = theme.accent ?? fills[fills.length - 1];
@@ -424,7 +431,7 @@ export function Coupon({
     left !== undefined && left > 0 && !spent ? (
       <View style={[styles.timer, { backgroundColor: timerBg }]}>
         <Icon d={ICON.clock} size={11} color={timerInk} />
-        <Text style={[{ color: timerInk, fontSize: 10.5, fontWeight: '800', fontVariant: ['tabular-nums'] }, ff]}>
+        <Text maxFontSizeMultiplier={FONT_CAP} style={[{ color: timerInk, fontSize: 10.5, fontWeight: '800', fontVariant: ['tabular-nums'] }, ff]}>
           {labels.endsIn} {formatCountdown(left)}
         </Text>
       </View>
@@ -448,15 +455,15 @@ export function Coupon({
   // Value panel ------------------------------------------------------------------------------------
   const valueBlock = (
     <View style={{ alignItems: 'center' }}>
-      {prefix ? <Text style={[{ color: valueSoft, fontSize: 10.5, fontWeight: '900', letterSpacing: 1.6 }, ff, lift]}>{prefix.toUpperCase()}</Text> : null}
+      {prefix ? <Text maxFontSizeMultiplier={FONT_CAP} style={[{ color: valueSoft, fontSize: 10.5, fontWeight: '900', letterSpacing: 1.6 }, ff, lift]}>{prefix.toUpperCase()}</Text> : null}
       {locked ? <Icon d={ICON.lock} size={valueSize * 0.6} color={valueInk} /> : null}
       {/* Vertical coupons set "50% OFF" on one line when it fits, and stack a long unit ("CASHBACK"). */}
       <View style={{ flexDirection: inline ? 'row' : 'column', alignItems: inline ? 'flex-end' : 'center', gap: inline ? 6 : 0 }}>
-        <Text numberOfLines={1} adjustsFontSizeToFit style={[{ color: valueInk, fontSize: valueSize, lineHeight: valueSize * 1.08, fontWeight: '900', letterSpacing: -1.2 }, ff, lift]}>
+        <Text numberOfLines={1} adjustsFontSizeToFit maxFontSizeMultiplier={FONT_CAP} style={[{ color: valueInk, fontSize: valueSize, lineHeight: valueSize * 1.08, fontWeight: '900', letterSpacing: -1.2 }, ff, lift]}>
           {value}
         </Text>
         {unit ? (
-          <Text style={[{ color: valueInk, fontSize: horizontal ? 12.5 : 16, fontWeight: '900', letterSpacing: 2.4, marginBottom: inline ? valueSize * 0.14 : 0 }, ff, lift]}>
+          <Text maxFontSizeMultiplier={FONT_CAP} style={[{ color: valueInk, fontSize: horizontal ? 12.5 : 16, fontWeight: '900', letterSpacing: 2.4, marginBottom: inline ? valueSize * 0.14 : 0 }, ff, lift]}>
             {unit.toUpperCase()}
           </Text>
         ) : null}
@@ -508,13 +515,13 @@ export function Coupon({
         {
           marginLeft: 'auto',
           backgroundColor: applied ? '#16a34a' : locked || spent ? alpha(bodyInk, 0.12) : accent,
-          transform: [{ scale: pressed ? 0.95 : 1 }],
+          transform: [{ scale: pressed && !reduce ? 0.95 : 1 }],
           paddingHorizontal: size === 'sm' ? 11 : size === 'md' ? 13 : 16,
         },
       ]}
     >
       {applied || locked ? <Icon d={applied ? ICON.check : ICON.lock} size={13} color={applied ? '#ffffff' : bodySoft} /> : null}
-      <Text numberOfLines={1} style={[{ color: applied ? '#ffffff' : locked || spent ? bodySoft : readableOn(accent), fontSize: s.chip - 0.5, fontWeight: '800' }, ff]}>
+      <Text numberOfLines={1} maxFontSizeMultiplier={FONT_CAP} style={[{ color: applied ? '#ffffff' : locked || spent ? bodySoft : readableOn(accent), fontSize: s.chip - 0.5, fontWeight: '800' }, ff]}>
         {applied ? labels.applied : locked ? labels.locked : labels.apply}
       </Text>
     </Pressable>
@@ -523,11 +530,11 @@ export function Coupon({
   const footer =
     expires || canFlip ? (
       <View style={[styles.row, { justifyContent: 'flex-start', gap: 6 }]}>
-        {expires ? <Text style={[{ color: bodySoft, fontSize: 11, fontWeight: '600' }, ff]}>{expires}</Text> : null}
+        {expires ? <Text style={[{ color: bodySoft, fontSize: 11, fontWeight: '600', flexShrink: 1 }, ff]}>{expires}</Text> : null}
         {expires && canFlip ? <Text style={[{ color: bodySoft, fontSize: 11 }, ff]}>·</Text> : null}
         {canFlip ? (
           <Pressable onPress={toggle} hitSlop={10} accessibilityRole="button" accessibilityLabel={labels.termsTitle}>
-            <Text style={[{ color: textAccent, fontSize: 11, fontWeight: '800', textDecorationLine: 'underline' }, ff]}>{labels.terms}</Text>
+            <Text maxFontSizeMultiplier={FONT_CAP} style={[{ color: textAccent, fontSize: 11, fontWeight: '800', textDecorationLine: 'underline' }, ff]}>{labels.terms}</Text>
           </Pressable>
         ) : null}
       </View>
@@ -572,7 +579,7 @@ export function Coupon({
         // The code never gets cut short: when it and the button don't fit side by side, the button
         // wraps under it (and stays right-aligned).
         <View style={[styles.row, { gap: 8, marginTop: 2, flexWrap: 'wrap' }]}>
-          {code ? <CodeChip code={code} color={textAccent} ink={bodyInk} fontSize={s.chip} onCopy={spent || locked ? undefined : onCopy} labels={labels} /> : <View />}
+          {code ? <CodeChip code={code} color={textAccent} ink={bodyInk} fontSize={s.chip} onCopy={spent || locked ? undefined : onCopy} labels={labels} reduce={reduce} /> : <View />}
           {action}
         </View>
       ) : null}
@@ -582,7 +589,8 @@ export function Coupon({
 
   const { width: _w, height: _h, ...shape } = outline;
   const glareClip = measured ? ticketSafeRects(outline) : undefined;
-  const valueWindows = shine && measured && !spent && !locked
+  // The sweep is decorative, so Reduce Motion drops it.
+  const valueWindows = shine && !reduce && measured && !spent && !locked
     ? ticketSafeRects({ width: valueBox.width, height: valueBox.height, corners: valueCorners, edges: valueEdges, edgeSize: v.edgeSize })
     : null;
 
@@ -630,23 +638,23 @@ export function Coupon({
       <TicketShape {...shape} fill={body} style={StyleSheet.absoluteFill}>
         <Pressable onPress={toggle} accessibilityRole="button" accessibilityHint={labels.back} style={[StyleSheet.absoluteFill, { padding: s.pad + edgePad, gap: 6, flexDirection: horizontal ? 'row' : 'column' }]}>
           <View style={{ flex: 1, gap: 4 }}>
-            <Text style={[{ color: bodyInk, fontSize: 12, fontWeight: '800', letterSpacing: 0.3 }, ff]}>{labels.termsTitle}</Text>
+            <Text maxFontSizeMultiplier={FONT_CAP} style={[{ color: bodyInk, fontSize: 12, fontWeight: '800', letterSpacing: 0.3 }, ff]}>{labels.termsTitle}</Text>
             {terms!.slice(0, size === 'lg' ? 5 : 4).map((t, i) => (
               <View key={i} style={{ flexDirection: 'row', gap: 6 }}>
-                <Text style={[{ color: textAccent, fontSize: 11, fontWeight: '900' }, ff]}>•</Text>
-                <Text numberOfLines={2} style={[{ color: bodySoft, fontSize: 11, lineHeight: 14.5, flex: 1 }, ff]}>
+                <Text maxFontSizeMultiplier={FONT_CAP} style={[{ color: textAccent, fontSize: 11, fontWeight: '900' }, ff]}>•</Text>
+                <Text numberOfLines={2} maxFontSizeMultiplier={FONT_CAP} style={[{ color: bodySoft, fontSize: 11, lineHeight: 14.5, flex: 1 }, ff]}>
                   {t}
                 </Text>
               </View>
             ))}
-            <Text style={[{ color: alpha(bodyInk, 0.4), fontSize: 10, fontWeight: '700', marginTop: 'auto' }, ff]}>{labels.back}</Text>
+            <Text maxFontSizeMultiplier={FONT_CAP} style={[{ color: alpha(bodyInk, 0.4), fontSize: 10, fontWeight: '700', marginTop: 'auto' }, ff]}>{labels.back}</Text>
           </View>
           {code ? (
             <View style={{ alignItems: 'center', justifyContent: 'center', gap: 4 }}>
               <View style={styles.plate}>
                 <BarcodeLike code={code} width={horizontal ? 74 : 200} height={horizontal ? 54 : 46} />
               </View>
-              <Text style={[{ color: bodyInk, fontSize: 10, fontWeight: '800', letterSpacing: 1.2 }, ff]}>{code}</Text>
+              <Text maxFontSizeMultiplier={FONT_CAP} style={[{ color: bodyInk, fontSize: 10, fontWeight: '800', letterSpacing: 1.2 }, ff]}>{code}</Text>
             </View>
           ) : null}
         </Pressable>
@@ -668,7 +676,7 @@ export function Coupon({
   return (
     <Pressable onPress={onPress} disabled={!onPress} accessibilityRole={onPress ? 'button' : undefined} style={style}>
       {({ pressed }) => (
-        <View style={{ transform: [{ scale: pressed ? 0.985 : 1 }] }}>
+        <View style={{ transform: [{ scale: pressed && !reduce ? 0.985 : 1 }] }}>
           {/* The plate waits for the painted outline (no black flash on mount), and a dimmed (used /
               expired) coupon is see-through, so it gets none. */}
           {spent || !measured ? null : <View pointerEvents="none" style={[styles.shadow, { top: inset, bottom: inset - 4, left: inset, right: inset, borderRadius: v.r, shadowOpacity: dark ? 0.5 : 0.2 }]} />}
@@ -680,6 +688,22 @@ export function Coupon({
   );
 }
 
+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({
   row: { flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' },
   center: { alignItems: 'center', justifyContent: 'center' },

package/registry/coupon/files/src/components/ui/flip-card.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react';
-import { Animated, Pressable, StyleSheet, View, type StyleProp, type ViewStyle } from 'react-native';
+import { AccessibilityInfo, Animated, Pressable, StyleSheet, View, type StyleProp, type ViewStyle } from 'react-native';
 
 import { motion } from '@/lib/kit';
 
@@ -48,12 +48,15 @@ const SQUEEZE = {
  * The flip as an animated 0 → 1 value, springing like FlipCard's own, plus `shadowScaleX` — pass
  * `progress` to the FlipCard and `shadowScaleX` to a TiltCard wrapped round it, so the tilt
  * shadow narrows as the card turns edge-on instead of showing as a dark box behind it.
+ * With Reduce Motion on, the card turns over at once (no 3D turn).
  */
 export function useFlipProgress(flipped: boolean) {
+  const reduce = useReduceMotion();
   const progress = useRef(new Animated.Value(flipped ? 1 : 0)).current;
   useEffect(() => {
-    Animated.spring(progress, { toValue: flipped ? 1 : 0, ...motion.gentle, useNativeDriver: true }).start();
-  }, [flipped, progress]);
+    if (reduce) progress.setValue(flipped ? 1 : 0);
+    else Animated.spring(progress, { toValue: flipped ? 1 : 0, ...motion.gentle, useNativeDriver: true }).start();
+  }, [flipped, progress, reduce]);
   const shadowScaleX = useMemo(() => progress.interpolate(SQUEEZE), [progress]);
   return { progress, shadowScaleX };
 }
@@ -185,6 +188,22 @@ export function FlipCard({
   );
 }
 
+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({
   face: { overflow: 'hidden', backfaceVisibility: 'hidden' },
   back: { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 },

package/registry/coupon/files/src/components/ui/tilt-card.tsx

@@ -1,5 +1,6 @@
 import React, { createContext, useContext, useEffect, useMemo, useRef, useState, type ComponentRef } from 'react';
 import {
+  AccessibilityInfo,
   Animated,
   Easing,
   Image,
@@ -92,7 +93,8 @@ export interface TiltState {
   height: number;
 }
 
-const Ctx = createContext<TiltState | null>(null);
+// `reduce` (Reduce Motion) rides along privately so layers stay flat too; useTilt still returns a TiltState.
+const Ctx = createContext<(TiltState & { reduce: boolean }) | null>(null);
 
 /** The surrounding TiltCard's live tilt (null outside one) — for your own layers and effects. */
 export function useTilt() {
@@ -105,6 +107,8 @@ const PAINT = 96;
 
 // Six colour cycles across the paint, so a couple of bands cross the card like real foil. Cool
 // pinks, violets and cyans stay clean when blended over dark cards (yellow and green turn olive).
+const SMOOTH = Easing.bezier(0.32, 0.72, 0, 1);
+
 const HOLO = Array.from({ length: 37 }, (_, i) => ['#ff6bd6', '#b38cff', '#6fb6ff', '#5ff0ff', '#a7ffe0', '#ffc2ef'][i % 6]);
 
 function GlarePaint({ variant }: { variant: 'soft' | 'sharp' }) {
@@ -256,6 +260,7 @@ export function TiltCard({
   accessibilityLabel,
   style,
 }: TiltCardProps) {
+  const reduce = useReduceMotion();
   const [size, setSize] = useState({ w: 0, h: 0 });
   const sizeRef = useRef(size);
   sizeRef.current = size;
@@ -270,11 +275,13 @@ export function TiltCard({
   const viewRef = useRef<ComponentRef<typeof View>>(null);
   const disabledRef = useRef(disabled);
   disabledRef.current = disabled;
+  const reduceRef = useRef(reduce);
+  reduceRef.current = reduce;
 
   // Idle sway: a slow figure-eight while nobody is touching.
   const idleLoop = useRef<Animated.CompositeAnimation | null>(null);
   const startIdle = () => {
-    if (!idle) return;
+    if (!idle || reduce) return;
     const ease = Easing.inOut(Easing.sin);
     const leg = (v: Animated.Value, to: number, ms: number) =>
       Animated.timing(v, {
@@ -292,10 +299,15 @@ export function TiltCard({
     idleLoop.current.start();
   };
   useEffect(() => {
+    // Reduce Motion: no sway; settle where it stopped back at rest.
+    if (reduce && !touching.current) {
+      tx.setValue(0);
+      ty.setValue(0);
+    }
     startIdle();
     return () => idleLoop.current?.stop();
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [idle]);
+  }, [idle, reduce]);
 
   const aim = (pageX: number, pageY: number) => {
     const { w, h } = sizeRef.current;
@@ -307,6 +319,12 @@ export function TiltCard({
   const release = (tapped: boolean) => {
     touching.current = false;
     if (tapped && !moved.current) onPressRef.current?.();
+    if (reduce) {
+      // The card never leaves flat, so only the light has to settle: a short ease, no spring.
+      const settle = (v: Animated.Value) => Animated.timing(v, { toValue: 0, duration: 150, easing: SMOOTH, useNativeDriver: true });
+      Animated.parallel([settle(tx), settle(ty), settle(press)]).start();
+      return;
+    }
     Animated.parallel([
       Animated.spring(tx, {
         toValue: 0,
@@ -355,11 +373,15 @@ export function TiltCard({
             if (typeof px === 'number' && typeof py === 'number') origin.current = { x: px, y: py };
           });
           aim(pageX, pageY);
-          Animated.spring(press, {
-            toValue: 1,
-            ...motion.snappy,
-            useNativeDriver: true,
-          }).start();
+          if (reduceRef.current) {
+            Animated.timing(press, { toValue: 1, duration: 150, easing: SMOOTH, useNativeDriver: true }).start();
+          } else {
+            Animated.spring(press, {
+              toValue: 1,
+              ...motion.snappy,
+              useNativeDriver: true,
+            }).start();
+          }
         },
         onPanResponderMove: (e, g) => {
           if (Math.abs(g.dx) + Math.abs(g.dy) > 6) moved.current = true;
@@ -380,21 +402,24 @@ export function TiltCard({
     if (width !== size.w || height !== size.h) setSize({ w: width, h: height });
   };
 
+  // Reduce Motion keeps the card flat and still: no tilt, lift or parallax. The reflection (light,
+  // not movement of the content) still follows the finger.
+  const tilt = reduce ? 0 : maxTilt;
   const rotateY = tx.interpolate({
     inputRange: [-1, 1],
-    outputRange: [`${-maxTilt}deg`, `${maxTilt}deg`],
+    outputRange: [`${-tilt}deg`, `${tilt}deg`],
   });
   const rotateX = ty.interpolate({
     inputRange: [-1, 1],
-    outputRange: [`${maxTilt}deg`, `${-maxTilt}deg`],
+    outputRange: [`${tilt}deg`, `${-tilt}deg`],
   });
   const scale = press.interpolate({
     inputRange: [0, 1],
-    outputRange: [1, pressScale],
+    outputRange: [1, reduce ? 1 : pressScale],
   });
 
-  const ctx = useMemo(() => ({ tx, ty, press, width: size.w, height: size.h }), [tx, ty, press, size.w, size.h]);
-  const drift = Math.min(10, size.w * 0.03);
+  const ctx = useMemo(() => ({ tx, ty, press, width: size.w, height: size.h, reduce }), [tx, ty, press, size.w, size.h, reduce]);
+  const drift = reduce ? 0 : Math.min(10, size.w * 0.03);
   // The plate sits well inside the outline — far enough that it never shows through a notch or a
   // see-through corner, even at full tilt; the shadow offset does the downward shift.
   const body = shadowRect ?? { x: 0, y: 0, width: size.w, height: size.h };
@@ -433,7 +458,7 @@ export function TiltCard({
                 {
                   scale: press.interpolate({
                     inputRange: [0, 1],
-                    outputRange: [1, 1.035],
+                    outputRange: [1, reduce ? 1 : 1.035],
                   }),
                 },
                 { scaleX: shadowScaleX ?? 1 },
@@ -516,7 +541,7 @@ export function TiltCard({
 export function TiltLayer({ children, depth = 0.5, style }: TiltLayerProps) {
   const ctx = useContext(Ctx);
   if (!ctx) throw new Error('TiltLayer must be inside TiltCard');
-  const d = depth * 14;
+  const d = ctx.reduce ? 0 : depth * 14;
   return (
     <Animated.View
       pointerEvents="box-none"
@@ -539,7 +564,7 @@ export function TiltLayer({ children, depth = 0.5, style }: TiltLayerProps) {
             {
               scale: ctx.press.interpolate({
                 inputRange: [0, 1],
-                outputRange: [1, 1 + Math.max(0, depth) * 0.035],
+                outputRange: [1, ctx.reduce ? 1 : 1 + Math.max(0, depth) * 0.035],
               }),
             },
           ],
@@ -616,6 +641,22 @@ export function TiltFoil({ children, radius = 8, base = '#d7dbe2', style }: Tilt
   );
 }
 
+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({
   plate: {
     position: 'absolute',

package/registry/date-picker/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;
@@ -205,6 +210,7 @@ export function Calendar(props: CalendarProps) {
   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;
@@ -252,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
@@ -267,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 */
@@ -332,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;
@@ -381,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 ? (
@@ -392,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, ff, { 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)} />
@@ -404,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, ff, { color: colors.mutedForeground }]}>
+              <Text key={w.long} numberOfLines={1} maxFontSizeMultiplier={FONT_CAP} style={[styles.weekday, ff, { color: colors.mutedForeground }]}>
                 {w.short}
               </Text>
             ))}
@@ -422,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] }) }],
                   },
                 ]}
               >
@@ -446,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] }) }],
             },
           ]}
         >
@@ -488,7 +503,9 @@ export function Calendar(props: CalendarProps) {
                       },
                     ]}
                   >
-                    <Text style={[styles.pickText, ff, { 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>
@@ -520,6 +537,7 @@ interface MonthGridProps {
   manyKeys?: string;
   tint: string;
   fullLabel: (d: Date) => string;
+  reduce: boolean;
   onDayPress: (d: Date) => void;
 }
 
@@ -541,6 +559,7 @@ const MonthGrid = memo(function MonthGrid({
   manyKeys,
   tint,
   fullLabel,
+  reduce,
   onDayPress,
 }: MonthGridProps) {
   const weeks = useMemo(() => buildWeeks(month, weekStartsOn, fixedWeeks), [month, weekStartsOn, fixedWeeks]);
@@ -595,6 +614,7 @@ const MonthGrid = memo(function MonthGrid({
                 highlight={highlightedDates?.[key]}
                 tile={tiles && inMonth && !inBand}
                 tint={tint}
+                reduce={reduce}
                 onPress={onDayPress}
               />
             );
@@ -620,6 +640,7 @@ interface DayCellProps {
   highlight?: string;
   tile: boolean;
   tint: string;
+  reduce: boolean;
   onPress: (d: Date) => void;
 }
 
@@ -638,6 +659,7 @@ const DayCell = memo(function DayCell({
   highlight,
   tile,
   tint,
+  reduce,
   onPress,
 }: DayCellProps) {
   const { colors, radius, font } = useKit();
@@ -646,8 +668,10 @@ const DayCell = memo(function DayCell({
   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]);
@@ -714,12 +738,13 @@ 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,
@@ -772,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">
@@ -786,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 },
@@ -793,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 },
@@ -821,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' },
 });