@expokit/cli 0.3.0 → 0.4.1

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

@@ -1,5 +1,6 @@
-import React, { createContext, useContext, useEffect, useMemo, useRef, useState } from 'react';
+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;
@@ -267,14 +272,16 @@ export function TiltCard({
   const touching = useRef(false);
   const origin = useRef({ x: 0, y: 0 });
   const moved = useRef(false);
-  const viewRef = useRef<View>(null);
+  const viewRef = useRef<ComponentRef<typeof View>>(null);
   const disabledRef = useRef(disabled);
   disabledRef.current = disabled;
+  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/coupon/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/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;
@@ -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' },
 });