@expokit/cli 0.3.0 → 0.4.1

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

@@ -1,4 +1,4 @@
-import React, { createContext, useContext, useEffect, useId, useMemo, useRef, useState } from 'react';
+import React, { createContext, useContext, useEffect, useId, useMemo, useRef, useState, type ComponentRef } from 'react';
 import {
   AccessibilityInfo,
   Animated,
@@ -131,7 +131,7 @@ interface Frame {
 
 const GroupContext = createContext<{ frame: Frame | null } | null>(null);
 
-function measure(node: View | null, e: LayoutChangeEvent, done: (f: Frame) => void) {
+function measure(node: ComponentRef<typeof View> | null, e: LayoutChangeEvent, done: (f: Frame) => void) {
   const { x, y, width, height } = e.nativeEvent.layout;
   const fallback = () => done({ x, y, w: width, h: height });
   if (!node || typeof node.measureInWindow !== 'function') return fallback();
@@ -153,7 +153,7 @@ export interface SkeletonGroupProps {
  */
 export function SkeletonGroup({ children, style }: SkeletonGroupProps) {
   const parent = useContext(GroupContext);
-  const ref = useRef<View>(null);
+  const ref = useRef<ComponentRef<typeof View>>(null);
   const [frame, setFrame] = useState<Frame | null>(null);
   const value = useMemo(() => ({ frame }), [frame]);
   if (parent) return <View style={style}>{children}</View>;
@@ -182,7 +182,7 @@ export function Skeleton({ width = '100%', height = 14, radius = 'sm', variant =
   const t = useClock(moving);
   const group = useContext(GroupContext);
   const win = useWindowDimensions();
-  const ref = useRef<View>(null);
+  const ref = useRef<ComponentRef<typeof View>>(null);
   const [box, setBox] = useState<Frame | null>(null);
   const gid = 'sk' + useId().replace(/[^a-zA-Z0-9]/g, '');
 

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

@@ -1,11 +1,14 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import {
+  AccessibilityInfo,
   Animated,
+  Easing,
   PanResponder,
   Pressable,
   StyleSheet,
   Text,
   View,
+  useWindowDimensions,
   type AccessibilityActionEvent,
   type GestureResponderEvent,
   type StyleProp,
@@ -110,13 +113,22 @@ const SIZES: Record<SliderSize, { track: number; stepped: number; thumb: number;
   md: { track: 4, stepped: 8, thumb: 26, bar: 46, icon: 20, font: 13, hit: 44 },
   lg: { track: 6, stepped: 10, thumb: 30, bar: 58, icon: 24, font: 15, hit: 52 },
 };
+// 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 BUBBLE_H = 28;
 const BUBBLE_GAP = 10;
 const BUBBLE_W = 120;
 /** Below this many points per step the thumb follows the finger and snaps on release. */
 const SNAP_PX = 14;
+const SMOOTH = Easing.bezier(0.32, 0.72, 0, 1);
 
 const clamp = (n: number, lo: number, hi: number) => Math.min(hi, Math.max(lo, n));
+/** Native-driven move to `toValue`: a snappy spring, or a short ease when Reduce Motion is on. */
+const glide = (v: Animated.Value, toValue: number, reduce: boolean) =>
+  reduce
+    ? Animated.timing(v, { toValue, duration: 150, easing: SMOOTH, useNativeDriver: true })
+    : Animated.spring(v, { toValue, useNativeDriver: true, ...motion.snappy });
 const decimals = (n: number) => (String(n).split('.')[1] ?? '').length;
 
 /**
@@ -161,10 +173,14 @@ export function Slider(props: SliderProps) {
   const onSlidingStart = props.onSlidingStart as Callback;
   const onSlidingComplete = props.onSlidingComplete as Callback;
 
-  const { colors, radius, dark } = useKit();
+  const { colors, radius, dark, font } = useKit();
+  const ff = font.family ? { fontFamily: font.family } : null;
+  const reduce = useReduceMotion();
   const tint = accent ?? colors.accent;
   const onTint = accent ? readableOn(accent) : colors.accentForeground;
   const sz = SIZES[size];
+  // Text scale the capped labels actually render at, for the label row's height.
+  const fontScale = Math.min(useWindowDimensions().fontScale, FONT_CAP);
 
   const T = isBar ? 0 : sz.thumb; // thumb diameter
   const inset = T / 2; // thumb centre travels [inset, w - inset]
@@ -210,29 +226,24 @@ export function Slider(props: SliderProps) {
   const held = useRef(new Animated.Value(0)).current;
 
   // Everything the (once-created) PanResponder reads, kept fresh every render.
-  const live = useRef({ vals, w, inset, step, span, min, range, isBar, T, disabled, controlled, snap, ratioOf, fmt, out, onValueChange, onSlidingStart, onSlidingComplete });
-  live.current = { vals, w, inset, step, span, min, range, isBar, T, disabled, controlled, snap, ratioOf, fmt, out, onValueChange, onSlidingStart, onSlidingComplete };
+  const live = useRef({ vals, w, inset, step, span, min, range, isBar, T, disabled, controlled, reduce, snap, ratioOf, fmt, out, onValueChange, onSlidingStart, onSlidingComplete });
+  live.current = { vals, w, inset, step, span, min, range, isBar, T, disabled, controlled, reduce, snap, ratioOf, fmt, out, onValueChange, onSlidingStart, onSlidingComplete };
   const drag = useRef({ dragging: false, thumb: 0, startX: 0, origin: 0, relative: false, moved: false, cur: [] as number[], target: [-1, -1] });
 
   // Follow value changes from outside (controlled updates, a11y, icon taps) when nobody is dragging.
   const key = vals.join(',');
   useEffect(() => {
     if (drag.current.dragging) return;
-    vals.forEach((v, i) => Animated.spring(ratios[i], { toValue: ratioOf(v), useNativeDriver: true, ...motion.snappy }).start());
+    vals.forEach((v, i) => glide(ratios[i], ratioOf(v), reduce).start());
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [key, min, max]);
 
+  // With Reduce Motion these only fade (the scale / lift outputs below are flattened).
   useEffect(() => {
-    press.forEach((p, i) => Animated.spring(p, { toValue: active === i ? 1 : 0, useNativeDriver: true, ...motion.snappy }).start());
-    bubble.forEach((b, i) =>
-      Animated.spring(b, {
-        toValue: bubbleShown || (showValue === 'drag' && active === i) ? 1 : 0,
-        useNativeDriver: true,
-        ...motion.snappy,
-      }).start()
-    );
-    Animated.spring(held, { toValue: active !== null ? 1 : 0, useNativeDriver: true, ...motion.snappy }).start();
-  }, [active, bubbleShown, showValue, press, bubble, held]);
+    press.forEach((p, i) => glide(p, active === i ? 1 : 0, reduce).start());
+    bubble.forEach((b, i) => glide(b, bubbleShown || (showValue === 'drag' && active === i) ? 1 : 0, reduce).start());
+    glide(held, active !== null ? 1 : 0, reduce).start();
+  }, [active, bubbleShown, showValue, press, bubble, held, reduce]);
 
   const pan = useMemo(() => {
     const usableOf = () => Math.max(1, live.current.w - 2 * live.current.inset);
@@ -248,7 +259,7 @@ export function Slider(props: SliderProps) {
       const coarse = !!L.step && (L.step / L.span) * usableOf() >= SNAP_PX;
       const target = coarse ? L.ratioOf(snapped) : L.ratioOf(v);
       if (animate || coarse) {
-        if (target !== d.target[i]) Animated.spring(ratios[i], { toValue: target, useNativeDriver: true, ...motion.snappy }).start();
+        if (target !== d.target[i]) glide(ratios[i], target, L.reduce).start();
       } else {
         ratios[i].setValue(target);
       }
@@ -268,7 +279,7 @@ export function Slider(props: SliderProps) {
       const d = drag.current;
       if (!d.dragging) return;
       if (seek) moveTo(d.startX, true);
-      Animated.spring(ratios[d.thumb], { toValue: L.ratioOf(d.cur[d.thumb]), useNativeDriver: true, ...motion.snappy }).start();
+      glide(ratios[d.thumb], L.ratioOf(d.cur[d.thumb]), L.reduce).start();
       d.dragging = false;
       d.target = [-1, -1];
       if (!L.controlled) setInner(d.cur);
@@ -349,17 +360,18 @@ export function Slider(props: SliderProps) {
     };
   }, [w, inset, usable, range, slotW, ratios]);
 
+  // Reduce Motion: no swell, no pop-up — the halo and tooltip just fade.
   const anim = useMemo(
     () => ({
-      thumb: press.map((p) => [{ scale: p.interpolate({ inputRange: [0, 1], outputRange: [1, 1.14] }) }]),
-      halo: press.map((p) => [{ scale: p.interpolate({ inputRange: [0, 1], outputRange: [1, 1.75] }) }]),
+      thumb: press.map((p) => [{ scale: p.interpolate({ inputRange: [0, 1], outputRange: [1, reduce ? 1 : 1.14] }) }]),
+      halo: press.map((p) => [{ scale: p.interpolate({ inputRange: [0, 1], outputRange: [1, reduce ? 1 : 1.75] }) }]),
       bubble: bubble.map((b) => [
-        { translateY: b.interpolate({ inputRange: [0, 1], outputRange: [6, 0] }) },
-        { scale: b.interpolate({ inputRange: [0, 1], outputRange: [0.6, 1] }) },
+        { translateY: b.interpolate({ inputRange: [0, 1], outputRange: [reduce ? 0 : 6, 0] }) },
+        { scale: b.interpolate({ inputRange: [0, 1], outputRange: [reduce ? 1 : 0.6, 1] }) },
       ]),
-      held: [{ scale: held.interpolate({ inputRange: [0, 1], outputRange: [1, 1.025] }) }],
+      held: [{ scale: held.interpolate({ inputRange: [0, 1], outputRange: [1, reduce ? 1 : 1.025] }) }],
     }),
-    [press, bubble, held]
+    [press, bubble, held, reduce]
   );
 
   // ---- marks ----------------------------------------------------------------------------------
@@ -412,7 +424,7 @@ export function Slider(props: SliderProps) {
     <View style={[styles.barContent, { width: w, height: trackH, paddingHorizontal: Math.round(trackH * 0.32) }]}>
       <View>{icon !== undefined ? drawIcon(icon, iconColor) : null}</View>
       {showValue === 'always' ? (
-        <Text numberOfLines={1} selectable={false} style={[styles.barValue, { color: textColor, fontSize: sz.font + 1 }, labelStyle]}>
+        <Text numberOfLines={1} selectable={false} maxFontSizeMultiplier={FONT_CAP} style={[styles.barValue, ff, { color: textColor, fontSize: sz.font + 1 }, labelStyle]}>
           {range ? `${fmt(vals[0])} – ${fmt(vals[1])}` : fmt(vals[0])}
         </Text>
       ) : null}
@@ -424,7 +436,8 @@ export function Slider(props: SliderProps) {
       key={key}
       numberOfLines={1}
       selectable={false}
-      style={[styles.markLabel, place, { fontSize: sz.font - 1, color: lit ? colors.foreground : colors.mutedForeground }, labelStyle]}
+      maxFontSizeMultiplier={FONT_CAP}
+      style={[styles.markLabel, place, ff, { fontSize: sz.font - 1, color: lit ? colors.foreground : colors.mutedForeground }, labelStyle]}
     >
       {text}
     </Text>
@@ -569,7 +582,7 @@ export function Slider(props: SliderProps) {
                           ]}
                         >
                           <View style={[styles.bubble, { backgroundColor: colors.foreground, borderRadius: radius.capsule(BUBBLE_H) }]}>
-                            <Text numberOfLines={1} selectable={false} style={[styles.bubbleText, { color: colors.background, fontSize: sz.font }, labelStyle]}>
+                            <Text numberOfLines={1} selectable={false} maxFontSizeMultiplier={FONT_CAP} style={[styles.bubbleText, ff, { color: colors.background, fontSize: sz.font }, labelStyle]}>
                               {fmt(v)}
                             </Text>
                           </View>
@@ -582,7 +595,7 @@ export function Slider(props: SliderProps) {
           </View>
 
           {hasMarkLabels || minMax ? (
-            <View pointerEvents="none" style={[styles.labels, { height: sz.font + 8 }]}>
+            <View pointerEvents="none" style={[styles.labels, { height: Math.round(sz.font * fontScale) + 8 }]}>
               {hasMarkLabels
                 ? markList.map((m) => {
                     if (!m.label || !w) return null;
@@ -671,6 +684,22 @@ export function SliderIcon({ name, size = 20, color }: { name: SliderIconName; 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' },
   row: { flexDirection: 'row', alignItems: 'flex-start', gap: 12 },
@@ -699,7 +728,7 @@ const styles = StyleSheet.create({
   },
   bubbleWrap: { position: 'absolute', width: BUBBLE_W, alignItems: 'center', transformOrigin: 'bottom' },
   bubble: {
-    height: BUBBLE_H,
+    minHeight: BUBBLE_H,
     paddingHorizontal: 10,
     minWidth: 36,
     alignItems: 'center',

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

@@ -694,25 +694,30 @@ function Ellipsis({
   color: string;
   fontSize: number;
 }) {
+  const { font } = useKit();
+  const ff = font.family ? { fontFamily: font.family } : null;
   const t = useLoop(1400 / speed, linear, true, !reduce);
   const base = text.replace(/(…|\.{1,3})\s*$/, '');
   return (
     <View style={styles.ellipsis}>
-      <Text style={[styles.label, { color, fontSize }]}>{base}</Text>
+      <Text style={[styles.label, ff, { color, fontSize }]}>{base}</Text>
       {[0, 1, 2].map((i) => (
         <Animated.Text
           key={i}
-          style={{
-            color,
-            fontSize,
-            fontWeight: '400',
-            opacity: reduce
-              ? 1
-              : t.interpolate({
-                  inputRange: [0, 0.15 + i * 0.18, 0.3 + i * 0.18, 0.85, 1],
-                  outputRange: [0, 0, 1, 1, 0],
-                }),
-          }}
+          style={[
+            ff,
+            {
+              color,
+              fontSize,
+              fontWeight: '400',
+              opacity: reduce
+                ? 1
+                : t.interpolate({
+                    inputRange: [0, 0.15 + i * 0.18, 0.3 + i * 0.18, 0.85, 1],
+                    outputRange: [0, 0, 1, 1, 0],
+                  }),
+            },
+          ]}
         >
           .
         </Animated.Text>

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

@@ -6,6 +6,7 @@ import {
   Pressable,
   StyleSheet,
   View,
+  useWindowDimensions,
   type LayoutChangeEvent,
   type StyleProp,
   type TextStyle,
@@ -67,6 +68,9 @@ const SIZES: Record<StatefulButtonSize, { h: number; px: number; font: number; i
   lg: { h: 54, px: 22, font: 17, icon: 20, gap: 9 },
 };
 const STAGGER = 22;
+// 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 END = 1e6;
 // Connected scripts (Arabic, Indic, Thai…) roll as one piece instead of letter by letter.
 const CONNECTED = /[֐-ࣿऀ-෿฀-໿ༀ-࿿က-႟ក-៿יִ-﷿ﹰ-]/;
@@ -131,6 +135,7 @@ function Letters({ text, style, lh, space, anims, onLayout }: LettersProps) {
           <View key={i} style={{ height: lh, overflow: 'hidden' }}>
             <Animated.Text
               numberOfLines={1}
+              maxFontSizeMultiplier={FONT_CAP}
               style={[style, anims?.[i] && { opacity: anims[i].opacity, transform: [{ translateY: anims[i].translateY }] }]}
             >
               {ch}
@@ -252,8 +257,11 @@ export function StatefulButton({
   const reduce = useReduceMotion();
   const s = SIZES[size];
   const fontSize = StyleSheet.flatten(textStyle)?.fontSize ?? s.font;
-  const lh = Math.round(fontSize * 1.3);
-  const space = fontSize * 0.28;
+  // Letter boxes clip to one line, so they grow with the (capped) text size; the Text's own lineHeight scales itself.
+  const textScale = Math.min(Math.max(useWindowDimensions().fontScale || 1, 1), FONT_CAP);
+  const lineHeight = Math.round(fontSize * 1.3);
+  const lh = Math.ceil(lineHeight * textScale);
+  const space = fontSize * 0.28 * textScale;
 
   const [inner, setInner] = useState<StatefulButtonState>('idle');
   const current = state ?? inner;
@@ -421,7 +429,7 @@ export function StatefulButton({
     setWidths((prev) => (prev[text] === w ? prev : { ...prev, [text]: w }));
   };
 
-  const textBase: StyleProp<TextStyle> = [styles.label, { fontSize: s.font, fontFamily: font.family }, textStyle, { lineHeight: lh }];
+  const textBase: StyleProp<TextStyle> = [styles.label, { fontSize: s.font, fontFamily: font.family }, textStyle, { lineHeight }];
   // Press feedback: a light wash on dark fills, a faint shade on light or transparent ones.
   const wash = variant === 'primary' && readableOn(look[0].bg) === '#ffffff' ? alpha('#ffffff', 0.14) : alpha(colors.foreground, 0.07);
   const corner = pill ? radius.capsule(s.h) : radius.md;
@@ -444,7 +452,7 @@ export function StatefulButton({
             style={[
               styles.surface,
               {
-                height: s.h,
+                minHeight: s.h,
                 minWidth: s.h,
                 paddingHorizontal: s.px,
                 borderRadius: corner,

package/registry/stateful-button/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,
 };