@expokit/cli 0.3.0 → 0.4.1

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

@@ -53,6 +53,9 @@ const RING = {
   lg: { d: 112, w: 9, font: 24 },
 };
 const WHITE = '#ffffff';
+// 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 clamp = (n: number, lo: number, hi: number) => Math.min(hi, Math.max(lo, n));
 
@@ -104,7 +107,8 @@ export function Progress({
   striped = false,
   style,
 }: ProgressProps) {
-  const { colors, dark } = useKit();
+  const { colors, dark, font } = useKit();
+  const ff = font.family ? { fontFamily: font.family } : null;
   const reduce = useReduceMotion();
   const top = max ?? (variant === 'steps' ? steps : 100);
   const unknown = indeterminate || value === undefined;
@@ -137,7 +141,7 @@ export function Progress({
           done={done}
           reduce={reduce}
         />
-        {label ? <Text style={[styles.ringLabel, { color: colors.mutedForeground }]}>{label}</Text> : null}
+        {label ? <Text style={[styles.ringLabel, ff, { color: colors.mutedForeground }]}>{label}</Text> : null}
       </View>
     );
   }
@@ -147,13 +151,13 @@ export function Progress({
   const header =
     label || valueShown ? (
       <View style={styles.header}>
-        <Text numberOfLines={1} style={[styles.label, { color: colors.foreground }]}>
+        <Text numberOfLines={1} style={[styles.label, ff, { color: colors.foreground }]}>
           {label}
         </Text>
         {checkShown ? (
           <DrawnCheck color={tint} size={18} />
         ) : valueShown ? (
-          <Text style={[styles.value, { color: colors.mutedForeground }]}>{text}</Text>
+          <Text style={[styles.value, ff, { color: colors.mutedForeground }]}>{text}</Text>
         ) : null}
       </View>
     ) : null;
@@ -685,6 +689,8 @@ function Ring({
   reduce: boolean;
 }) {
   const { d, w, font } = RING[size];
+  const kit = useKit();
+  const ff = kit.font.family ? { fontFamily: kit.font.family } : null;
   const id = useId().replace(/[^a-zA-Z0-9]/g, '');
   const r = (d - w) / 2;
   const c = 2 * Math.PI * r;
@@ -835,9 +841,13 @@ function Ring({
               ],
             }}
           >
-            <Text style={[styles.ringValue, { color: fg, fontSize: font }]}>
+            <Text maxFontSizeMultiplier={FONT_CAP} style={[styles.ringValue, ff, { color: fg, fontSize: font }]}>
               {format ? format() : <RingPercent fill={fill} initial={ratio} />}
-              {format ? null : <Text style={{ fontSize: font * 0.6, color: alpha(fg, 0.55) }}>%</Text>}
+              {format ? null : (
+                <Text maxFontSizeMultiplier={FONT_CAP} style={{ fontSize: font * 0.6, color: alpha(fg, 0.55) }}>
+                  %
+                </Text>
+              )}
             </Text>
           </Animated.View>
           {done ? (

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

@@ -46,6 +46,9 @@ export interface ProgressStepsProps {
   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 NODE = 28;
 const GAP = 6;
 const LINE = 3;
@@ -70,7 +73,8 @@ export function ProgressSteps({
   accent,
   style,
 }: ProgressStepsProps) {
-  const { colors, dark } = useKit();
+  const { colors, dark, font } = useKit();
+  const ff = font.family ? { fontFamily: font.family } : null;
   const reduce = useReduceMotion();
   const tint = accent ?? colors.accent;
   const items = steps.map((s) => (typeof s === 'string' ? { label: s } : s));
@@ -118,7 +122,7 @@ export function ProgressSteps({
         Animated.timing(pulse, { toValue: 1, duration: 1500, easing: Easing.out(Easing.quad), useNativeDriver: true }),
         Animated.delay(250),
       ]),
-      { resetBeforeIteration: true }
+      { iterations: -1, resetBeforeIteration: true }
     );
     loop.start();
     return () => loop.stop();
@@ -146,6 +150,7 @@ export function ProgressSteps({
             numberOfLines={1}
             style={[
               styles.barLabel,
+              ff,
               { color: failed ? colors.danger : colors.foreground },
               {
                 opacity: labelIn,
@@ -155,7 +160,7 @@ export function ProgressSteps({
           >
             {done ? 'All done' : items[shown]!.label}
           </Animated.Text>
-          <Text style={[styles.barStep, { color: colors.mutedForeground }]}>
+          <Text maxFontSizeMultiplier={FONT_CAP} style={[styles.barStep, ff, { color: colors.mutedForeground }]}>
             {done ? `${n} of ${n}` : `Step ${shown + 1} of ${n}`}
           </Text>
         </View>
@@ -255,7 +260,8 @@ function Step({
   reduce: boolean;
   onPress?: () => void;
 }) {
-  const { colors } = useKit();
+  const { colors, font } = useKit();
+  const ff = font.family ? { fontFamily: font.family } : null;
   const press = useRef(new Animated.Value(0)).current;
   const pressTo = (v: number) =>
     Animated.spring(press, { toValue: v, useNativeDriver: true, ...(v ? motion.snappy : motion.bouncy) }).start();
@@ -301,9 +307,9 @@ function Step({
           {!last ? line(styles.vLine) : null}
         </View>
         <View style={[styles.vBody, !last && styles.vBodyGap]}>
-          <Text style={[styles.vLabel, { color: labelColor }]}>{step.label}</Text>
+          <Text style={[styles.vLabel, ff, { color: labelColor }]}>{step.label}</Text>
           {step.description ? (
-            <Text style={[styles.vDesc, { color: state === 'error' ? colors.danger : colors.mutedForeground }]}>
+            <Text style={[styles.vDesc, ff, { color: state === 'error' ? colors.danger : colors.mutedForeground }]}>
               {step.description}
             </Text>
           ) : null}
@@ -315,11 +321,11 @@ function Step({
   return (
     <Wrapper {...a11y} {...pressProps} style={styles.hCol}>
       <View style={styles.hTop}>{node}</View>
-      <Text numberOfLines={2} style={[styles.hLabel, { color: labelColor }]}>
+      <Text maxFontSizeMultiplier={FONT_CAP} numberOfLines={2} style={[styles.hLabel, ff, { color: labelColor }]}>
         {step.label}
       </Text>
       {step.description ? (
-        <Text numberOfLines={2} style={[styles.hDesc, { color: colors.mutedForeground }]}>
+        <Text numberOfLines={2} style={[styles.hDesc, ff, { color: colors.mutedForeground }]}>
           {step.description}
         </Text>
       ) : null}
@@ -344,7 +350,8 @@ function Node({
   color: string;
   reduce: boolean;
 }) {
-  const { colors, radius, dark } = useKit();
+  const { colors, radius, dark, font } = useKit();
+  const ff = font.family ? { fontFamily: font.family } : null;
   const clamp = 'clamp' as const;
   const round = { borderRadius: radius.capsule(NODE) };
   const activeIn = pNative.interpolate({ inputRange: [i - 0.3, i], outputRange: [0, 1], extrapolate: clamp });
@@ -370,7 +377,9 @@ function Node({
       <View
         style={[styles.node, round, { borderWidth: 1.5, borderColor: alpha(colors.foreground, dark ? 0.22 : 0.16) }]}
       >
-        <Text style={[styles.num, { color: colors.mutedForeground }]}>{i + 1}</Text>
+        <Text maxFontSizeMultiplier={FONT_CAP} style={[styles.num, ff, { color: colors.mutedForeground }]}>
+          {i + 1}
+        </Text>
       </View>
 
       {/* Current: soft halo, a ring that breathes outwards, accent ring with a tinted core. */}
@@ -411,7 +420,9 @@ function Node({
         ]}
       >
         <View style={[StyleSheet.absoluteFill, round, { backgroundColor: alpha(color, 0.12) }]} />
-        <Text style={[styles.num, { color }]}>{i + 1}</Text>
+        <Text maxFontSizeMultiplier={FONT_CAP} style={[styles.num, ff, { color }]}>
+          {i + 1}
+        </Text>
       </Animated.View>
 
       {/* Done: solid disc that pops in, then the check draws itself. */}

package/registry/progress-steps/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/qr-code-button.json

@@ -0,0 +1,18 @@
+{
+  "name": "qr-code-button",
+  "type": "component",
+  "title": "QR Code Button",
+  "description": "A \"Show QR Code\" pill that swells under your finger and morphs, on a smooth ease, into a white card holding a real, scannable QR code — Copy and close below it. The code is encoded inside the component (byte mode, error correction M, every version up to 40) and drawn as one crisp SVG path, so there's no QR library to install.",
+  "tier": "pro",
+  "dependencies": [
+    "react-native-svg",
+    "expo-haptics"
+  ],
+  "registryDependencies": [
+    "kit"
+  ],
+  "sharedFiles": [
+    "lib/kit.tsx"
+  ],
+  "filesDir": null
+}

package/registry/radio-group/files/src/components/ui/radio-group.tsx

@@ -1,6 +1,6 @@
 import * as Haptics from 'expo-haptics';
 import React, { useEffect, useRef, useState } from 'react';
-import { Animated, Pressable, StyleSheet, Text, View, type StyleProp, type ViewStyle } from 'react-native';
+import { AccessibilityInfo, Animated, Pressable, StyleSheet, Text, View, type StyleProp, type ViewStyle } from 'react-native';
 import Svg, { Path } from 'react-native-svg';
 
 import { alpha, motion, readableOn, useKit } from '@/lib/kit';
@@ -58,6 +58,7 @@ export function RadioGroup({
   style,
 }: RadioGroupProps) {
   const { colors, radius } = useKit();
+  const reduce = useReduceMotion();
   const tint = accent ?? colors.accent;
   const [inner, setInner] = useState(defaultValue);
   const selected = value ?? inner;
@@ -95,6 +96,7 @@ export function RadioGroup({
           first={i === 0}
           tint={tint}
           disabled={disabled || o.disabled}
+          reduce={reduce}
         />
       ))}
     </View>
@@ -110,27 +112,36 @@ interface RadioItemProps {
   first: boolean;
   tint: string;
   disabled?: boolean;
+  reduce: boolean;
 }
 
-function RadioItem({ option, active, onPress, variant, horizontal, first, tint, disabled }: RadioItemProps) {
-  const { colors, radius } = useKit();
+function RadioItem({ option, active, onPress, variant, horizontal, first, tint, disabled, reduce }: RadioItemProps) {
+  const { colors, radius, font } = useKit();
+  const ff = font.family ? { fontFamily: font.family } : null;
   // p: colours + svg (JS driver). dot: scale/opacity pops (native). press: press feedback (native).
   // ripple: a ring that expands and fades when the item gets selected, 0 → 1 (native, rests at 1).
   const p = useRef(new Animated.Value(active ? 1 : 0)).current;
   const dot = useRef(new Animated.Value(active ? 1 : 0)).current;
   const press = useRef(new Animated.Value(1)).current;
   const ripple = useRef(new Animated.Value(1)).current;
-  const mounted = useRef(false);
+  const was = useRef(active);
 
   useEffect(() => {
+    const picked = active && !was.current;
+    was.current = active;
+    // Reduce Motion: colours and the check still fade in, the dot appears at once, no ripple.
+    if (reduce) {
+      Animated.timing(p, { toValue: active ? 1 : 0, duration: 150, useNativeDriver: false }).start();
+      dot.setValue(active ? 1 : 0);
+      return;
+    }
     Animated.spring(p, { toValue: active ? 1 : 0, useNativeDriver: false, ...motion.snappy }).start();
     Animated.spring(dot, { toValue: active ? 1 : 0, useNativeDriver: true, ...motion.bouncy }).start();
-    if (active && mounted.current) {
+    if (picked) {
       ripple.setValue(0);
       Animated.timing(ripple, { toValue: 1, duration: 560, useNativeDriver: true }).start();
     }
-    mounted.current = true;
-  }, [active, p, dot, ripple]);
+  }, [active, reduce, p, dot, ripple]);
 
   const rippleStyle = {
     backgroundColor: alpha(tint, 0.35),
@@ -138,8 +149,10 @@ function RadioItem({ option, active, onPress, variant, horizontal, first, tint,
     transform: [{ scale: ripple.interpolate({ inputRange: [0, 1], outputRange: [1, 2.3] }) }],
   };
 
-  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 fg = colors.foreground;
   const muted = colors.mutedForeground;
@@ -154,17 +167,17 @@ function RadioItem({ option, active, onPress, variant, horizontal, first, tint,
 
   const text = (
     <View style={styles.text}>
-      <Text numberOfLines={2} style={[styles.label, { color: fg }]}>
+      <Text numberOfLines={2} style={[styles.label, ff, { color: fg }]}>
         {option.label}
       </Text>
-      {option.description ? <Text style={[styles.description, { color: muted }]}>{option.description}</Text> : null}
+      {option.description ? <Text style={[styles.description, ff, { color: muted }]}>{option.description}</Text> : null}
     </View>
   );
 
   if (variant === 'card') {
     const lit = (from: string, to: string) => p.interpolate({ inputRange: [0, 1], outputRange: [from, to], extrapolate: 'clamp' });
     const hint = option.hint ? (
-      <Animated.Text style={[styles.hint, horizontal && styles.hintColumn, { color: lit(fg, tint) }]}>{option.hint}</Animated.Text>
+      <Animated.Text style={[styles.hint, ff, horizontal && styles.hintColumn, { color: lit(fg, tint) }]}>{option.hint}</Animated.Text>
     ) : null;
     return (
       <Animated.View style={[horizontal && styles.flex, { opacity: disabled ? 0.5 : 1, transform: [{ scale: press }] }]}>
@@ -191,10 +204,10 @@ function RadioItem({ option, active, onPress, variant, horizontal, first, tint,
               </Animated.View>
             ) : null}
             <View style={[styles.text, horizontal && styles.cardTextColumn]}>
-              <Text numberOfLines={2} style={[styles.label, { color: fg }]}>
+              <Text numberOfLines={2} style={[styles.label, ff, { color: fg }]}>
                 {option.label}
               </Text>
-              {option.description ? <Text style={[styles.description, { color: muted }]}>{option.description}</Text> : null}
+              {option.description ? <Text style={[styles.description, ff, { color: muted }]}>{option.description}</Text> : null}
               {horizontal ? hint : null}
             </View>
             {horizontal ? null : hint}
@@ -241,11 +254,11 @@ function RadioItem({ option, active, onPress, variant, horizontal, first, tint,
         <View style={styles.text}>
           <Animated.Text
             numberOfLines={1}
-            style={[styles.label, { color: p.interpolate({ inputRange: [0, 1], outputRange: [fg, tint], extrapolate: 'clamp' }) }]}
+            style={[styles.label, ff, { color: p.interpolate({ inputRange: [0, 1], outputRange: [fg, tint], extrapolate: 'clamp' }) }]}
           >
             {option.label}
           </Animated.Text>
-          {option.description ? <Text style={[styles.description, { color: muted }]}>{option.description}</Text> : null}
+          {option.description ? <Text style={[styles.description, ff, { color: muted }]}>{option.description}</Text> : null}
         </View>
         <Svg width={20} height={20} viewBox="0 0 24 24">
           <AnimatedPath
@@ -286,7 +299,7 @@ function RadioItem({ option, active, onPress, variant, horizontal, first, tint,
         </Animated.View>
       </Animated.View>
       {horizontal && !option.description ? (
-        <Text style={[styles.label, { color: fg }]}>{option.label}</Text>
+        <Text style={[styles.label, styles.shrink, ff, { color: fg }]}>{option.label}</Text>
       ) : (
         text
       )}
@@ -294,13 +307,31 @@ function RadioItem({ option, active, onPress, variant, horizontal, first, tint,
   );
 }
 
+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({
   vertical: { flexDirection: 'column' },
   horizontal: { flexDirection: 'row', flexWrap: 'wrap' },
   flex: { flex: 1, minWidth: 0 },
   flexGrow: { flexGrow: 1 },
   row: { flexDirection: 'row', alignItems: 'flex-start', gap: 12 },
-  rowCompact: { alignItems: 'center' },
+  // A long label wraps at a large text size instead of running past the edge.
+  rowCompact: { alignItems: 'center', flexShrink: 1 },
+  shrink: { flexShrink: 1 },
   ring: { width: 22, height: 22, borderRadius: 11, borderWidth: 1.5, alignItems: 'center', justifyContent: 'center' },
   dot: { width: 8, height: 8, borderRadius: 4 },
   ringSlot: { alignItems: 'center', justifyContent: 'center' },

package/registry/radio-group/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,
 };