@expokit/cli 0.4.0 → 0.4.2

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

@@ -271,6 +271,9 @@ export interface ToasterProps {
 
 const PEEK = 12;
 const GUESS_HEIGHT = 64;
+// 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;
 
 /**
  * Hosts the toasts. It fills its parent absolutely (touches pass through), so drop it at the
@@ -595,7 +598,9 @@ function ToastItem({
                     { borderRadius: radius.capsule(32), backgroundColor: look.actionBg, opacity: pressed ? 0.7 : 1 },
                   ]}
                 >
-                  <Text style={[styles.actionText, ff, { color: look.actionFg }]}>{data.action.label}</Text>
+                  <Text maxFontSizeMultiplier={FONT_CAP} style={[styles.actionText, ff, { color: look.actionFg }]}>
+                    {data.action.label}
+                  </Text>
                 </Pressable>
               ) : null}
               {closeButton ? (
@@ -906,7 +911,9 @@ function IslandToaster({ store, toasts, duration, offset, haptics, reduceMotion,
                       </View>
                       {!expanded && shown.action ? (
                         <View style={[styles.islandChip, { borderRadius: radius.capsule(24), backgroundColor: alpha(fg, 0.14) }]}>
-                          <Text style={[styles.islandChipText, ff, { color: fg }]}>{shown.action.label}</Text>
+                          <Text maxFontSizeMultiplier={FONT_CAP} style={[styles.islandChipText, ff, { color: fg }]}>
+                            {shown.action.label}
+                          </Text>
                         </View>
                       ) : null}
                     </Pressable>
@@ -923,7 +930,9 @@ function IslandToaster({ store, toasts, duration, offset, haptics, reduceMotion,
                             { borderRadius: radius.capsule(44), backgroundColor: alpha(fg, pressed ? 0.24 : 0.16) },
                           ]}
                         >
-                          <Text style={[styles.title, ff, { color: fg }]}>{shown.action.label}</Text>
+                          <Text maxFontSizeMultiplier={FONT_CAP} style={[styles.title, ff, { color: fg }]}>
+                            {shown.action.label}
+                          </Text>
                         </Pressable>
                       </View>
                     ) : null}
@@ -1267,7 +1276,7 @@ const styles = StyleSheet.create({
   title: { fontSize: 14.5, fontWeight: '400', lineHeight: 20, letterSpacing: -0.1 },
   desc: { fontSize: 13.5, fontWeight: '400', lineHeight: 19 },
   descMinimal: { fontSize: 13, lineHeight: 17 },
-  action: { paddingHorizontal: 12, height: 32, alignItems: 'center', justifyContent: 'center' },
+  action: { paddingHorizontal: 12, minHeight: 32, alignItems: 'center', justifyContent: 'center' },
   actionText: { fontSize: 13, fontWeight: '400' },
   close: { alignSelf: 'flex-start', padding: 2, marginRight: -4 },
   bar: { position: 'absolute', left: 0, right: 0, bottom: 0, height: 2, transformOrigin: 'left' },
@@ -1277,10 +1286,10 @@ const styles = StyleSheet.create({
   islandPlace: { position: 'absolute', top: 0 },
   islandPad: { paddingVertical: 14, paddingHorizontal: 20 },
   islandPadIcon: { paddingTop: 13, paddingBottom: 15, paddingLeft: 14, paddingRight: 18 },
-  islandChip: { paddingHorizontal: 10, height: 24, justifyContent: 'center' },
+  islandChip: { paddingHorizontal: 10, minHeight: 24, justifyContent: 'center' },
   islandChipText: { fontSize: 12.5, fontWeight: '400' },
   islandActions: { paddingHorizontal: 14, paddingBottom: 16, marginTop: -2 },
-  islandAction: { height: 44, alignItems: 'center', justifyContent: 'center' },
+  islandAction: { minHeight: 44, alignItems: 'center', justifyContent: 'center' },
   islandTrack: { position: 'absolute', left: 28, right: 28, bottom: 6, height: 2, borderRadius: 1, overflow: 'hidden' },
   islandFill: { flex: 1, transformOrigin: 'left' },
 });