@expokit/cli 0.3.0 → 0.4.1

package/registry/search-bar/files/src/components/ui/search-bar.tsx

@@ -1,5 +1,6 @@
-import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState, type ComponentRef } from 'react';
 import {
+  AccessibilityInfo,
   Animated,
   Easing,
   Platform,
@@ -59,6 +60,10 @@ export interface SearchBarProps extends Omit<TextInputProps, 'style'> {
   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;
+
 /** Every dimension comes from one table so the sizes read clearly different. */
 const SIZES: Record<SearchBarSize, { h: number; font: number; icon: number; slot: number; r: number; clear: number; end: number }> = {
   sm: { h: 34, font: 14, icon: 14, slot: 30, r: 9, clear: 16, end: 6 },
@@ -75,7 +80,7 @@ const webNoOutline = Platform.OS === 'web' ? ({ outlineStyle: 'none', outlineWid
  * panel drops down while focused. The 'minimal' variant rests as a round icon and expands
  * into a full field when tapped.
  */
-export const SearchBar = forwardRef<TextInput, SearchBarProps>(function SearchBar(
+export const SearchBar = forwardRef<ComponentRef<typeof TextInput>, SearchBarProps>(function SearchBar(
   {
     variant = 'default',
     size = 'md',
@@ -104,14 +109,16 @@ export const SearchBar = forwardRef<TextInput, SearchBarProps>(function SearchBa
   },
   ref
 ) {
-  const { colors, radius } = useKit();
+  const { colors, radius, font } = useKit();
+  const reduce = useReduceMotion();
+  const ff = font.family ? { fontFamily: font.family } : null;
   const s = SIZES[size];
   const tint = accent ?? colors.accent;
   const minimal = variant === 'minimal';
   const cancelEnabled = !minimal && (showCancel ?? true);
 
-  const inputRef = useRef<TextInput>(null);
-  useImperativeHandle(ref, () => inputRef.current as TextInput);
+  const inputRef = useRef<ComponentRef<typeof TextInput>>(null);
+  useImperativeHandle(ref, () => inputRef.current as ComponentRef<typeof TextInput>);
 
   const [focused, setFocused] = useState(false);
   const [inner, setInner] = useState(defaultValue ?? '');
@@ -139,28 +146,47 @@ export const SearchBar = forwardRef<TextInput, SearchBarProps>(function SearchBa
   useEffect(() => {
     const to = focused ? 1 : 0;
     Animated.timing(focusJS, { toValue: to, duration: motion.fast, easing: Easing.out(Easing.quad), useNativeDriver: false }).start();
+    // Reduce Motion: the halo only fades (its scale is pinned below) and the magnifier doesn't pop.
+    if (reduce) {
+      Animated.timing(halo, { toValue: to, duration: 150, useNativeDriver: true }).start();
+      return;
+    }
     Animated.spring(halo, { toValue: to, useNativeDriver: true, ...motion.snappy }).start();
     if (focused) {
       icon.setValue(0.6);
       Animated.spring(icon, { toValue: 1, useNativeDriver: true, ...motion.bouncy }).start();
     }
-  }, [focused, focusJS, halo, icon]);
+  }, [focused, focusJS, halo, icon, reduce]);
 
   useEffect(() => {
     const to = cancelShown ? 1 : 0;
+    // Reduce Motion: the field narrows at once and Cancel fades in place.
+    if (reduce) {
+      cancelJS.setValue(to);
+      Animated.timing(cancelN, { toValue: to, duration: 150, useNativeDriver: true }).start();
+      return;
+    }
     Animated.spring(cancelJS, { toValue: to, useNativeDriver: false, ...motion.snappy }).start();
     Animated.spring(cancelN, { toValue: to, useNativeDriver: true, ...motion.snappy }).start();
-  }, [cancelShown, cancelJS, cancelN]);
+  }, [cancelShown, cancelJS, cancelN, reduce]);
 
   useEffect(() => {
     const to = open ? 1 : 0;
+    // Reduce Motion: 'minimal' snaps to its new width; the contents still fade.
+    if (reduce) {
+      openJS.setValue(to);
+      Animated.timing(openN, { toValue: to, duration: 150, useNativeDriver: true }).start();
+      return;
+    }
     Animated.spring(openJS, { toValue: to, useNativeDriver: false, ...motion.gentle }).start();
     Animated.timing(openN, { toValue: to, duration: open ? motion.normal : motion.fast, delay: open ? 80 : 0, useNativeDriver: true }).start();
-  }, [open, openJS, openN]);
+  }, [open, openJS, openN, reduce]);
 
   useEffect(() => {
-    Animated.spring(clear, { toValue: text && editable && open ? 1 : 0, useNativeDriver: true, ...motion.bouncy }).start();
-  }, [text, editable, open, clear]);
+    const to = text && editable && open ? 1 : 0;
+    if (reduce) Animated.timing(clear, { toValue: to, duration: 150, useNativeDriver: true }).start();
+    else Animated.spring(clear, { toValue: to, useNativeDriver: true, ...motion.bouncy }).start();
+  }, [text, editable, open, clear, reduce]);
 
   useEffect(() => {
     Animated.timing(busy, { toValue: loading ? 1 : 0, duration: motion.fast, useNativeDriver: true }).start();
@@ -229,7 +255,7 @@ export const SearchBar = forwardRef<TextInput, SearchBarProps>(function SearchBa
         onLayout={(e) => setRowW(e.nativeEvent.layout.width)}
         style={[styles.row, minimal && { justifyContent: align === 'right' ? 'flex-end' : 'flex-start' }]}
       >
-        <Animated.View style={minimal ? { width: fieldW, height: s.h } : [styles.flex, { height: s.h }]}>
+        <Animated.View style={minimal ? { width: fieldW, minHeight: s.h } : [styles.flex, { minHeight: s.h }]}>
           <Animated.View
             pointerEvents="none"
             style={[
@@ -238,7 +264,7 @@ export const SearchBar = forwardRef<TextInput, SearchBarProps>(function SearchBa
                 borderRadius: r + 4,
                 backgroundColor: alpha(tint, 0.18),
                 opacity: halo,
-                transform: [{ scale: halo.interpolate({ inputRange: [0, 1], outputRange: [0.96, 1] }) }],
+                transform: [{ scale: halo.interpolate({ inputRange: [0, 1], outputRange: [reduce ? 1 : 0.96, 1] }) }],
               },
             ]}
           />
@@ -275,6 +301,7 @@ export const SearchBar = forwardRef<TextInput, SearchBarProps>(function SearchBa
                 autoCorrect={false}
                 accessibilityRole="search"
                 accessibilityLabel={props.accessibilityLabel ?? placeholder}
+                maxFontSizeMultiplier={FONT_CAP}
                 {...props}
                 autoFocus={autoFocus}
                 editable={editable}
@@ -293,12 +320,12 @@ export const SearchBar = forwardRef<TextInput, SearchBarProps>(function SearchBa
                   if (minimal && !text) setExpanded(false);
                   onBlur?.(e);
                 }}
-                style={[styles.input, { color: colors.foreground, fontSize: s.font, height: s.h - 3 }, webNoOutline]}
+                style={[styles.input, ff, { color: colors.foreground, fontSize: s.font, minHeight: s.h - 3 }, webNoOutline]}
               />
             </Animated.View>
             <Animated.View
               pointerEvents={text && open ? 'auto' : 'none'}
-              style={[styles.clear, { width: s.clear + 8, opacity: clear, transform: [{ scale: clear }] }]}
+              style={[styles.clear, { width: s.clear + 8, opacity: clear, transform: [{ scale: reduce ? 1 : clear }] }]}
             >
               <Pressable
                 hitSlop={12}
@@ -341,9 +368,10 @@ export const SearchBar = forwardRef<TextInput, SearchBarProps>(function SearchBa
         {cancelEnabled ? (
           <>
             <Text
+              maxFontSizeMultiplier={FONT_CAP}
               pointerEvents="none"
               onLayout={(e) => setCancelW(Math.ceil(e.nativeEvent.layout.width) + 14)}
-              style={[styles.cancelText, styles.measure, { fontSize: s.font }]}
+              style={[styles.cancelText, styles.measure, ff, { fontSize: s.font }]}
             >
               {cancelLabel}
             </Text>
@@ -356,7 +384,7 @@ export const SearchBar = forwardRef<TextInput, SearchBarProps>(function SearchBa
                   {
                     width: cancelW,
                     opacity: cancelN,
-                    transform: [{ translateX: cancelN.interpolate({ inputRange: [0, 1], outputRange: [24, 0] }) }],
+                    transform: [{ translateX: cancelN.interpolate({ inputRange: [0, 1], outputRange: [reduce ? 0 : 24, 0] }) }],
                   },
                 ]}
               >
@@ -366,7 +394,7 @@ export const SearchBar = forwardRef<TextInput, SearchBarProps>(function SearchBa
                   accessibilityLabel={cancelLabel}
                   onPress={cancel}
                 >
-                  <Text numberOfLines={1} style={[styles.cancelText, { color: tint, fontSize: s.font }]}>
+                  <Text maxFontSizeMultiplier={FONT_CAP} numberOfLines={1} style={[styles.cancelText, ff, { color: tint, fontSize: s.font }]}>
                     {cancelLabel}
                   </Text>
                 </Pressable>
@@ -377,27 +405,37 @@ export const SearchBar = forwardRef<TextInput, SearchBarProps>(function SearchBa
       </View>
 
       {suggestions ? (
-        <SuggestionPanel open={panelOpen && open && visible.length > 0} items={visible} query={query} tint={tint} onSelect={select} />
+        <SuggestionPanel
+          open={panelOpen && open && visible.length > 0}
+          items={visible}
+          query={query}
+          tint={tint}
+          reduce={reduce}
+          onSelect={select}
+        />
       ) : null}
     </View>
   );
 });
 
-/** Dropdown list under the bar: drops in, rows show an icon, bolded match and a hint. */
+/** Dropdown list under the bar: drops in (fades with Reduce Motion), rows show an icon, bolded match and a hint. */
 function SuggestionPanel({
   open,
   items,
   query,
   tint,
+  reduce,
   onSelect,
 }: {
   open: boolean;
   items: SearchSuggestion[];
   query: string;
   tint: string;
+  reduce: boolean;
   onSelect: (item: SearchSuggestion) => void;
 }) {
-  const { colors, radius } = useKit();
+  const { colors, radius, font } = useKit();
+  const ff = font.family ? { fontFamily: font.family } : null;
   const [mounted, setMounted] = useState(open);
   const enter = useRef(new Animated.Value(0)).current;
   const last = useRef(items);
@@ -406,13 +444,14 @@ function SuggestionPanel({
   useEffect(() => {
     if (open) {
       setMounted(true);
-      Animated.spring(enter, { toValue: 1, useNativeDriver: true, ...motion.snappy }).start();
+      if (reduce) Animated.timing(enter, { toValue: 1, duration: 150, useNativeDriver: true }).start();
+      else Animated.spring(enter, { toValue: 1, useNativeDriver: true, ...motion.snappy }).start();
     } else {
       Animated.timing(enter, { toValue: 0, duration: motion.fast, useNativeDriver: true }).start(({ finished }) => {
         if (finished) setMounted(false);
       });
     }
-  }, [open, enter]);
+  }, [open, enter, reduce]);
 
   if (!mounted) return null;
   return (
@@ -426,8 +465,8 @@ function SuggestionPanel({
           borderRadius: radius.lg,
           opacity: enter,
           transform: [
-            { translateY: enter.interpolate({ inputRange: [0, 1], outputRange: [-6, 0] }) },
-            { scale: enter.interpolate({ inputRange: [0, 1], outputRange: [0.98, 1] }) },
+            { translateY: enter.interpolate({ inputRange: [0, 1], outputRange: [reduce ? 0 : -6, 0] }) },
+            { scale: enter.interpolate({ inputRange: [0, 1], outputRange: [reduce ? 1 : 0.98, 1] }) },
           ],
         },
       ]}
@@ -443,11 +482,11 @@ function SuggestionPanel({
           <View style={[styles.optionIcon, { backgroundColor: colors.muted }]}>
             <Icon name={item.icon ?? 'search'} size={15} color={item.icon === 'trending' ? tint : colors.mutedForeground} />
           </View>
-          <Text numberOfLines={1} style={[styles.optionText, { color: colors.mutedForeground }]}>
+          <Text numberOfLines={1} style={[styles.optionText, ff, { color: colors.mutedForeground }]}>
             <Highlight label={item.label} query={query} color={colors.foreground} />
           </Text>
           {item.hint ? (
-            <Text numberOfLines={1} style={[styles.hint, { color: colors.mutedForeground }]}>
+            <Text numberOfLines={1} style={[styles.hint, ff, { color: colors.mutedForeground }]}>
               {item.hint}
             </Text>
           ) : null}
@@ -496,6 +535,22 @@ function Icon({ name, size, color }: { name: 'search' | 'recent' | 'trending'; s
   );
 }
 
+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' },
   disabled: { opacity: 0.5 },

package/registry/search-bar/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/segmented-control/files/src/components/ui/segmented-control.tsx

@@ -1,6 +1,7 @@
 import * as Haptics from 'expo-haptics';
 import React, { useEffect, useId, useMemo, useRef, useState } from 'react';
 import {
+  AccessibilityInfo,
   Animated,
   PanResponder,
   Pressable,
@@ -48,6 +49,10 @@ export interface SegmentedControlProps {
   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: Record<SegmentedControlSize, { h: number; font: number; px: number; icon: number }> = {
   sm: { h: 32, font: 13, px: 12, icon: 14 },
   md: { h: 40, font: 14.5, px: 16, icon: 16 },
@@ -57,7 +62,7 @@ const SIZES: Record<SegmentedControlSize, { h: number; font: number; px: number;
 const INSET = 3;
 // Liquid move: the edge in the direction of travel leads, the other one trails behind.
 const LEAD = motion.snappy;
-const TRAIL = { damping: 20, stiffness: 150, mass: 0.9 };
+const TRAIL = { damping: 24, stiffness: 150, mass: 0.9 };
 
 /**
  * Segmented control with a liquid indicator: its leading edge springs ahead and the trailing
@@ -81,6 +86,7 @@ export function SegmentedControl({
 }: SegmentedControlProps) {
   const { colors, radius, dark } = useKit();
   const gid = 'sc' + useId().replace(/[^a-zA-Z0-9]/g, '');
+  const reduce = useReduceMotion();
   const items: SegmentOption[] = options.map((o) => (typeof o === 'string' ? { value: o, label: o } : o));
   const [inner, setInner] = useState(defaultValue ?? items[0]?.value);
   const selected = value ?? inner;
@@ -98,7 +104,8 @@ export function SegmentedControl({
   useEffect(() => {
     const l = layouts.current[index];
     if (!l) return;
-    if (!placed.current) {
+    // Reduce Motion: the indicator jumps to the new segment instead of sliding.
+    if (!placed.current || reduce) {
       lx.setValue(l.x);
       rx.setValue(l.x + l.width);
       placed.current = true;
@@ -111,7 +118,7 @@ export function SegmentedControl({
       Animated.spring(lx, { toValue: l.x, useNativeDriver: false, ...(right ? TRAIL : LEAD) }),
       Animated.spring(rx, { toValue: l.x + l.width, useNativeDriver: false, ...(right ? LEAD : TRAIL) }),
     ]).start();
-  }, [index, measured, lx, rx]);
+  }, [index, measured, reduce, lx, rx]);
 
   const onSegmentLayout = (i: number) => (e: LayoutChangeEvent) => {
     const { x: lx, width } = e.nativeEvent.layout;
@@ -253,6 +260,7 @@ export function SegmentedControl({
           activeFg={activeFg}
           idleFg={idleFg}
           disabled={disabled || o.disabled}
+          reduce={reduce}
         />
       ))}
     </View>
@@ -271,9 +279,12 @@ interface SegmentProps {
   activeFg: string;
   idleFg: string;
   disabled?: boolean;
+  reduce: boolean;
 }
 
-function Segment({ option, active, onPress, onPressIn, onLayout, fullWidth, size, height, activeFg, idleFg, disabled }: SegmentProps) {
+function Segment({ option, active, onPress, onPressIn, onLayout, fullWidth, size, height, activeFg, idleFg, disabled, reduce }: SegmentProps) {
+  const { font } = useKit();
+  const ff = font.family ? { fontFamily: font.family } : null;
   // a: text colour (JS). press: content squish, pop: little bounce on selection (native, same view).
   const a = useRef(new Animated.Value(active ? 1 : 0)).current;
   const press = useRef(new Animated.Value(1)).current;
@@ -281,16 +292,19 @@ function Segment({ option, active, onPress, onPressIn, onLayout, fullWidth, size
   const mounted = useRef(false);
 
   useEffect(() => {
-    Animated.timing(a, { toValue: active ? 1 : 0, duration: 180, useNativeDriver: false }).start();
-    if (active && mounted.current) {
+    Animated.timing(a, { toValue: active ? 1 : 0, duration: reduce ? 150 : 180, useNativeDriver: false }).start();
+    // Reduce Motion: no selection pop and no press squish; the label colour still fades.
+    if (active && mounted.current && !reduce) {
       pop.setValue(0.9);
       Animated.spring(pop, { toValue: 1, useNativeDriver: true, ...motion.bouncy }).start();
     }
     mounted.current = true;
-  }, [active, a, pop]);
+  }, [active, reduce, a, pop]);
 
-  const pressTo = (to: number) =>
+  const pressTo = (to: number) => {
+    if (reduce) return press.setValue(1);
     Animated.spring(press, { toValue: to, useNativeDriver: true, ...(to < 1 ? motion.snappy : motion.bouncy) }).start();
+  };
 
   const color = a.interpolate({ inputRange: [0, 1], outputRange: [idleFg, activeFg] });
   const icon =
@@ -310,12 +324,12 @@ function Segment({ option, active, onPress, onPressIn, onLayout, fullWidth, size
       onPressOut={() => pressTo(1)}
       onLayout={onLayout}
       hitSlop={height < 44 ? { top: (44 - height) / 2, bottom: (44 - height) / 2 } : undefined}
-      style={[styles.segment, fullWidth && styles.flex, { height, paddingHorizontal: size.px }]}
+      style={[styles.segment, fullWidth && styles.flex, { minHeight: height, paddingHorizontal: size.px }]}
     >
       <Animated.View style={[styles.content, { transform: [{ scale: Animated.multiply(press, pop) }] }]}>
         {icon ? <View style={{ minWidth: size.icon, alignItems: 'center' }}>{icon}</View> : null}
         {option.label ? (
-          <Animated.Text numberOfLines={1} style={[styles.label, { fontSize: size.font, color }]}>
+          <Animated.Text numberOfLines={1} maxFontSizeMultiplier={FONT_CAP} style={[styles.label, ff, { fontSize: size.font, color }]}>
             {option.label}
           </Animated.Text>
         ) : null}
@@ -324,6 +338,22 @@ function Segment({ option, active, onPress, onPressIn, onLayout, fullWidth, size
   );
 }
 
+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({
   track: { flexDirection: 'row', alignItems: 'center' },
   flex: { flex: 1 },

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