@expokit/cli 0.2.0 → 0.4.0

package/registry/payment-card/files/src/components/ui/payment-card.tsx

@@ -13,6 +13,7 @@ import Svg, { Circle, ClipPath, Defs, G, Line, LinearGradient, Path, Rect, Stop
 
 import { FlipCard, useFlipProgress } from '@/components/ui/flip-card';
 import { TiltCard } from '@/components/ui/tilt-card';
+import { useKit } from '@/lib/kit';
 
 export type PaymentCardBrand = 'visa' | 'mastercard' | 'amex' | 'rupay' | 'none';
 
@@ -30,8 +31,8 @@ export interface PaymentCardProps {
   bank?: string;
   /** Small label top-right, e.g. "Debit", "World Elite". */
   label?: string;
-  /** Card art — a photo or texture (`require('./card.jpg')` or `{ uri }`). Default: brushed graphite. */
-  image?: ImageSourcePropType;
+  /** Card art — a photo or texture (`require('./card.jpg')` or `{ uri }`). Or any element drawn as the art, e.g. `<GrainGradient palette=\"ocean\" style={{ flex: 1 }} />`. Default: brushed graphite. */
+  image?: ImageSourcePropType | React.ReactElement;
   /** `light` text for dark art (default), `dark` text for pale art. */
   tone?: 'light' | 'dark';
   /** EMV chip finish. */
@@ -222,6 +223,8 @@ export function PaymentCard({
   labels,
   style,
 }: PaymentCardProps) {
+  const { font } = useKit();
+  const ff = font.family ? { fontFamily: font.family } : null;
   const controlled = flippedProp !== undefined;
   const [own, setOwn] = useState(defaultFlipped);
   // A frozen card always shows its front (where the frost and the label are).
@@ -253,7 +256,17 @@ export function PaymentCard({
 
   const art = (darken: number) => (
     <>
-      {image ? <Image alt="" source={image} style={StyleSheet.absoluteFill} resizeMode="cover" accessibilityIgnoresInvertColors /> : <Graphite />}
+      {image ? (
+        React.isValidElement(image) ? (
+          <View style={StyleSheet.absoluteFill} pointerEvents="none">
+            {image}
+          </View>
+        ) : (
+          <Image alt="" source={image} style={StyleSheet.absoluteFill} resizeMode="cover" accessibilityIgnoresInvertColors />
+        )
+      ) : (
+        <Graphite />
+      )}
       {darken > 0 ? <View style={[StyleSheet.absoluteFill, { backgroundColor: `rgba(0,0,0,${darken})` }]} /> : null}
     </>
   );
@@ -265,28 +278,28 @@ export function PaymentCard({
       {tone === 'light' ? <Shade strength={image ? 0.38 : 0.2} /> : null}
       <View style={styles.inner}>
         <View style={styles.row}>
-          <Text style={[{ color: ink, fontSize: 16, fontWeight: '700', letterSpacing: -0.2 }, emboss]}>{bank ?? ''}</Text>
-          {label ? <Text style={[{ color: soft, fontSize: 11, fontWeight: '600', letterSpacing: 1 }, emboss]}>{label.toUpperCase()}</Text> : null}
+          <Text style={[{ color: ink, fontSize: 16, fontWeight: '700', letterSpacing: -0.2 }, ff, emboss]}>{bank ?? ''}</Text>
+          {label ? <Text style={[{ color: soft, fontSize: 11, fontWeight: '600', letterSpacing: 1 }, ff, emboss]}>{label.toUpperCase()}</Text> : null}
         </View>
         <View style={{ flexDirection: 'row', alignItems: 'center', gap: 10 }}>
           <Chip finish={chip} />
           <Contactless ink={ink} />
         </View>
         <View style={{ gap: 10 }}>
-          <Text style={[{ color: ink, fontSize: 19, fontWeight: '500', letterSpacing: 2, fontVariant: ['tabular-nums'] }, emboss]}>
+          <Text style={[{ color: ink, fontSize: 19, fontWeight: '500', letterSpacing: 2, fontVariant: ['tabular-nums'] }, ff, emboss]}>
             {formatNumber(number, brand, masked)}
           </Text>
           <View style={[styles.row, { alignItems: 'flex-end' }]}>
             <View style={{ flexDirection: 'row', gap: 20, flexShrink: 1 }}>
               <View style={{ flexShrink: 1 }}>
-                <Text style={[styles.tiny, { color: soft }]}>{text.cardholder}</Text>
-                <Text style={[{ color: ink, fontSize: 13, fontWeight: '600', letterSpacing: 0.8 }, emboss]} numberOfLines={1}>
+                <Text style={[styles.tiny, ff, { color: soft }]}>{text.cardholder}</Text>
+                <Text style={[{ color: ink, fontSize: 13, fontWeight: '600', letterSpacing: 0.8 }, ff, emboss]} numberOfLines={1}>
                   {name.toUpperCase()}
                 </Text>
               </View>
               <View>
-                <Text style={[styles.tiny, { color: soft }]}>{text.validThru}</Text>
-                <Text style={[{ color: ink, fontSize: 13, fontWeight: '600', fontVariant: ['tabular-nums'] }, emboss]}>{expiry}</Text>
+                <Text style={[styles.tiny, ff, { color: soft }]}>{text.validThru}</Text>
+                <Text style={[{ color: ink, fontSize: 13, fontWeight: '600', fontVariant: ['tabular-nums'] }, ff, emboss]}>{expiry}</Text>
               </View>
             </View>
             <BrandMark brand={brand} ink={ink} />
@@ -296,7 +309,7 @@ export function PaymentCard({
       {frozen ? (
         <View style={[StyleSheet.absoluteFill, styles.center, { backgroundColor: 'rgba(214,232,255,0.28)' }]}>
           <View style={styles.frozenPill}>
-            <Text style={{ color: '#ffffff', fontSize: 13, fontWeight: '700', letterSpacing: 0.4 }}>❄︎  {text.frozen}</Text>
+            <Text style={[{ color: '#ffffff', fontSize: 13, fontWeight: '700', letterSpacing: 0.4 }, ff]}>❄︎  {text.frozen}</Text>
           </View>
         </View>
       ) : null}
@@ -317,15 +330,15 @@ export function PaymentCard({
           </Svg>
         </View>
         <View style={styles.cvv}>
-          <Text style={{ color: '#111', fontSize: 15, fontWeight: '700', fontStyle: 'italic', letterSpacing: 1.5, fontVariant: ['tabular-nums'] }}>{cvv ?? '•••'}</Text>
+          <Text style={[{ color: '#111', fontSize: 15, fontWeight: '700', fontStyle: 'italic', letterSpacing: 1.5, fontVariant: ['tabular-nums'] }, ff]}>{cvv ?? '•••'}</Text>
         </View>
       </View>
       <View style={styles.backFoot}>
         <View style={{ flex: 1, gap: 3 }}>
-          <Text style={{ color: 'rgba(255,255,255,0.78)', fontSize: 9, lineHeight: 12 }}>
+          <Text style={[{ color: 'rgba(255,255,255,0.78)', fontSize: 9, lineHeight: 12 }, ff]}>
             {fill(text.legal)}
           </Text>
-          <Text style={{ color: 'rgba(255,255,255,0.9)', fontSize: 10, fontWeight: '600' }}>{fill(text.back)}</Text>
+          <Text style={[{ color: 'rgba(255,255,255,0.9)', fontSize: 10, fontWeight: '600' }, ff]}>{fill(text.back)}</Text>
         </View>
         {/* Security hologram. */}
         <Svg width={40} height={30} viewBox="0 0 40 30">

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

@@ -1,4 +1,4 @@
-import React, { createContext, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import React, { createContext, useContext, useEffect, useMemo, useRef, useState, type ComponentRef } from 'react';
 import {
   Animated,
   Easing,
@@ -267,7 +267,7 @@ 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;
 

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

@@ -104,7 +104,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 +138,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 +148,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 +686,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,7 +838,7 @@ function Ring({
               ],
             }}
           >
-            <Text style={[styles.ringValue, { color: fg, fontSize: font }]}>
+            <Text 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>}
             </Text>

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

@@ -70,7 +70,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 +119,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 +147,7 @@ export function ProgressSteps({
             numberOfLines={1}
             style={[
               styles.barLabel,
+              ff,
               { color: failed ? colors.danger : colors.foreground },
               {
                 opacity: labelIn,
@@ -155,7 +157,7 @@ export function ProgressSteps({
           >
             {done ? 'All done' : items[shown]!.label}
           </Animated.Text>
-          <Text style={[styles.barStep, { color: colors.mutedForeground }]}>
+          <Text style={[styles.barStep, ff, { color: colors.mutedForeground }]}>
             {done ? `${n} of ${n}` : `Step ${shown + 1} of ${n}`}
           </Text>
         </View>
@@ -255,7 +257,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 +304,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 +318,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 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 +347,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 +374,7 @@ 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 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 +415,7 @@ function Node({
         ]}
       >
         <View style={[StyleSheet.absoluteFill, round, { backgroundColor: alpha(color, 0.12) }]} />
-        <Text style={[styles.num, { color }]}>{i + 1}</Text>
+        <Text 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

@@ -113,7 +113,8 @@ interface RadioItemProps {
 }
 
 function RadioItem({ option, active, onPress, variant, horizontal, first, tint, disabled }: RadioItemProps) {
-  const { colors, radius } = useKit();
+  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;
@@ -154,17 +155,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 +192,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 +242,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 +287,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, ff, { color: fg }]}>{option.label}</Text>
       ) : (
         text
       )}

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,
 };

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

@@ -1,4 +1,4 @@
-import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import React, { forwardRef, useEffect, useImperativeHandle, useRef, useState, type ComponentRef } from 'react';
 import {
   Animated,
   Easing,
@@ -75,7 +75,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 +104,15 @@ export const SearchBar = forwardRef<TextInput, SearchBarProps>(function SearchBa
   },
   ref
 ) {
-  const { colors, radius } = useKit();
+  const { colors, radius, font } = useKit();
+  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 ?? '');
@@ -293,7 +294,7 @@ 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, height: s.h - 3 }, webNoOutline]}
               />
             </Animated.View>
             <Animated.View
@@ -343,7 +344,7 @@ export const SearchBar = forwardRef<TextInput, SearchBarProps>(function SearchBa
             <Text
               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>
@@ -366,7 +367,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 numberOfLines={1} style={[styles.cancelText, ff, { color: tint, fontSize: s.font }]}>
                     {cancelLabel}
                   </Text>
                 </Pressable>
@@ -397,7 +398,8 @@ function SuggestionPanel({
   tint: string;
   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);
@@ -443,11 +445,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}

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

@@ -57,7 +57,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
@@ -274,6 +274,8 @@ interface SegmentProps {
 }
 
 function Segment({ option, active, onPress, onPressIn, onLayout, fullWidth, size, height, activeFg, idleFg, disabled }: 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;
@@ -315,7 +317,7 @@ function Segment({ option, active, onPress, onPressIn, onLayout, fullWidth, size
       <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} style={[styles.label, ff, { fontSize: size.font, color }]}>
             {option.label}
           </Animated.Text>
         ) : null}

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,
 };

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

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState, type ComponentRef } from 'react';
 import {
   Animated,
   Dimensions,
@@ -219,8 +219,8 @@ export function Select<T extends string | number = string>({
   const [anchor, setAnchor] = useState({ x: 0, y: 0, w: 0, h: 0 });
   const [hi, setHi] = useState(-1); // highlighted row (keyboard / hover, web)
   const [kb, setKb] = useState(0); // on-screen keyboard height while the dropdown is open
-  const fieldRef = useRef<View>(null);
-  const scrollRef = useRef<ScrollView>(null);
+  const fieldRef = useRef<ComponentRef<typeof View>>(null);
+  const scrollRef = useRef<ComponentRef<typeof ScrollView>>(null);
   const rowBox = useRef<Record<string, { y: number; h: number }>>({});
   const scrollY = useRef(0);
   const viewH = useRef(0);