react-native-ai-animations 0.0.0-stage → 0.8.0

package/src/chat/reasoning.ts

@@ -0,0 +1,30 @@
+export type ReasoningEffort = "low" | "medium" | "high";
+
+export type ReasoningLevel = {
+  label: string;
+  value: ReasoningEffort;
+  budget: number;
+  description: string;
+};
+
+export const REASONING_EFFORTS: ReasoningLevel[] = [
+  { label: "Low", value: "low", budget: 0.2, description: "About 20% of max tokens go to reasoning. Fastest replies." },
+  { label: "Medium", value: "medium", budget: 0.5, description: "About half of max tokens go to reasoning. The default." },
+  { label: "High", value: "high", budget: 0.8, description: "About 80% of max tokens go to reasoning. Slowest, most thorough." },
+];
+
+export const DEFAULT_REASONING_EFFORT: ReasoningEffort = "medium";
+
+export function reasoningRequest(effort: ReasoningEffort, options?: { exclude?: boolean }) {
+  return { reasoning: { effort, ...(options?.exclude ? { exclude: true } : {}) } };
+}
+
+export function reasoningBudget(effort: ReasoningEffort, maxTokens: number) {
+  const level = REASONING_EFFORTS.find((item) => item.value === effort) ?? REASONING_EFFORTS[1];
+  return Math.max(Math.min(Math.floor(maxTokens * level.budget), 128000), 1024);
+}
+
+export function reasoningIndex(effort: ReasoningEffort) {
+  const index = REASONING_EFFORTS.findIndex((item) => item.value === effort);
+  return index < 0 ? 1 : index;
+}

package/src/chat/status-row.tsx

@@ -0,0 +1,127 @@
+import { useEffect, type ReactNode } from "react";
+import { Text, View, type StyleProp, type TextStyle, type ViewStyle } from "react-native";
+import Animated, {
+  cancelAnimation,
+  Easing,
+  FadeInDown,
+  FadeOutUp,
+  useAnimatedStyle,
+  useReducedMotion,
+  useSharedValue,
+  withRepeat,
+  withSequence,
+  withTiming,
+} from "react-native-reanimated";
+import { formatElapsed, useElapsed } from "../internal/use-elapsed";
+import { ShimmerText } from "../text/shimmer-text";
+import { type MotionPalette } from "../theme/palette";
+import { useMotionPalette } from "../theme/provider";
+
+const DEFAULT_TEXT_STYLE: TextStyle = { fontSize: 14, lineHeight: 20, fontWeight: "500" };
+
+export type StatusRowIconMotion = "pulse" | "spin" | "none";
+
+export type StatusRowProps = {
+  label: string;
+  icon?: ReactNode;
+  iconMotion?: StatusRowIconMotion;
+  iconSize?: number;
+  active?: boolean;
+  startedAt?: number;
+  showTimer?: boolean;
+  formatTimer?: (seconds: number) => string;
+  textStyle?: StyleProp<TextStyle>;
+  timerStyle?: StyleProp<TextStyle>;
+  colors?: Partial<MotionPalette>;
+  style?: StyleProp<ViewStyle>;
+};
+
+export function StatusRow({
+  label,
+  icon,
+  iconMotion = "pulse",
+  iconSize = 18,
+  active = true,
+  startedAt,
+  showTimer = true,
+  formatTimer = formatElapsed,
+  textStyle = DEFAULT_TEXT_STYLE,
+  timerStyle,
+  colors,
+  style,
+}: StatusRowProps) {
+  const palette = useMotionPalette(colors);
+  const reduceMotion = useReducedMotion();
+  const seconds = useElapsed(startedAt, active);
+
+  return (
+    <View
+      accessible
+      accessibilityRole="progressbar"
+      accessibilityLabel={label}
+      accessibilityState={{ busy: active }}
+      style={[{ flexDirection: "row", alignItems: "center", gap: 8 }, style]}
+    >
+      <StatusIcon size={iconSize} motion={active && !reduceMotion ? iconMotion : "none"}>
+        {icon ?? <View style={{ width: 8, height: 8, borderRadius: 4, backgroundColor: palette.accent }} />}
+      </StatusIcon>
+      <View style={{ flexShrink: 1, overflow: "hidden" }}>
+        <Animated.View
+          key={label}
+          entering={reduceMotion ? undefined : FadeInDown.duration(240)}
+          exiting={reduceMotion ? undefined : FadeOutUp.duration(180)}
+        >
+          {active ? (
+            <ShimmerText
+              text={label}
+              activeColor={palette.text}
+              mutedColor={palette.textTertiary}
+              textStyle={textStyle}
+            />
+          ) : (
+            <Text style={[textStyle, { color: palette.textSecondary }]}>{label}</Text>
+          )}
+        </Animated.View>
+      </View>
+      {showTimer && startedAt !== undefined && (
+        <Text style={[textStyle, { color: palette.textTertiary, fontVariant: ["tabular-nums"] }, timerStyle]}>
+          {formatTimer(seconds)}
+        </Text>
+      )}
+    </View>
+  );
+}
+
+function StatusIcon({ size, motion, children }: { size: number; motion: StatusRowIconMotion; children: ReactNode }) {
+  const progress = useSharedValue(0);
+
+  useEffect(() => {
+    cancelAnimation(progress);
+    progress.value = 0;
+    if (motion === "pulse") {
+      const curve = Easing.inOut(Easing.sin);
+      progress.value = withRepeat(
+        withSequence(withTiming(1, { duration: 700, easing: curve }), withTiming(0, { duration: 700, easing: curve })),
+        -1,
+        false,
+      );
+    } else if (motion === "spin") {
+      progress.value = withRepeat(withTiming(1, { duration: 1200, easing: Easing.linear }), -1, false);
+    }
+    return () => cancelAnimation(progress);
+  }, [motion, progress]);
+
+  const animatedStyle = useAnimatedStyle(() => {
+    if (motion === "pulse") {
+      return { opacity: 0.45 + progress.value * 0.55, transform: [{ scale: 0.88 + progress.value * 0.12 }] };
+    }
+    if (motion === "spin") return { opacity: 1, transform: [{ rotate: `${progress.value * 360}deg` }] };
+    return { opacity: 1, transform: [] };
+  });
+
+  return (
+    <Animated.View style={[{ width: size, height: size, alignItems: "center", justifyContent: "center" }, animatedStyle]}>
+      {children}
+    </Animated.View>
+  );
+}

package/src/chat/thinking-block.tsx

@@ -0,0 +1,250 @@
+import { useEffect, useRef, useState, type ReactNode } from "react";
+import {
+  type LayoutChangeEvent,
+  Pressable,
+  Text,
+  View,
+  type StyleProp,
+  type TextStyle,
+  type ViewStyle,
+} from "react-native";
+import Animated, {
+  cancelAnimation,
+  Easing,
+  FadeIn,
+  FadeInDown,
+  useAnimatedStyle,
+  useReducedMotion,
+  useSharedValue,
+  withRepeat,
+  withSequence,
+  withSpring,
+  withTiming,
+} from "react-native-reanimated";
+import { useElapsed } from "../internal/use-elapsed";
+import { ShimmerText } from "../text/shimmer-text";
+import { type MotionPalette } from "../theme/palette";
+import { useMotionPalette } from "../theme/provider";
+
+const DEFAULT_TEXT_STYLE: TextStyle = { fontSize: 14, lineHeight: 20, fontWeight: "500" };
+const DEFAULT_DETAIL_STYLE: TextStyle = { fontSize: 14, lineHeight: 21 };
+const OPEN_SPRING = { damping: 22, stiffness: 210, mass: 0.9 };
+const DOT = 7;
+
+export type ThinkingStepStatus = "done" | "active" | "pending";
+
+export type ThinkingStep = {
+  key?: string;
+  title: string;
+  detail?: string;
+  status?: ThinkingStepStatus;
+};
+
+export type ThinkingBlockLabels = {
+  thinking: string;
+  done: (seconds: number) => string;
+};
+
+export type ThinkingBlockProps = {
+  thinking: boolean;
+  startedAt?: number;
+  seconds?: number;
+  title?: string;
+  labels?: Partial<ThinkingBlockLabels>;
+  icon?: ReactNode;
+  chevron?: ReactNode;
+  steps?: ThinkingStep[];
+  renderStep?: (step: ThinkingStep, index: number) => ReactNode;
+  children?: ReactNode;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  textStyle?: StyleProp<TextStyle>;
+  detailStyle?: StyleProp<TextStyle>;
+  colors?: Partial<MotionPalette>;
+  style?: StyleProp<ViewStyle>;
+};
+
+const DEFAULT_LABELS: ThinkingBlockLabels = {
+  thinking: "Thinking",
+  done: (seconds) => (seconds < 1 ? "Thought for a moment" : `Thought for ${seconds}s`),
+};
+
+export function ThinkingBlock({
+  thinking,
+  startedAt,
+  seconds,
+  title,
+  labels,
+  icon,
+  chevron,
+  steps,
+  renderStep,
+  children,
+  open: controlledOpen,
+  defaultOpen = false,
+  onOpenChange,
+  textStyle = DEFAULT_TEXT_STYLE,
+  detailStyle = DEFAULT_DETAIL_STYLE,
+  colors,
+  style,
+}: ThinkingBlockProps) {
+  const palette = useMotionPalette(colors);
+  const reduceMotion = useReducedMotion();
+  const copy = { ...DEFAULT_LABELS, ...labels };
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+  const open = controlledOpen ?? uncontrolledOpen;
+  const elapsed = useElapsed(startedAt, thinking);
+  const frozen = useRef(0);
+  if (thinking) frozen.current = elapsed;
+  const totalSeconds = seconds ?? frozen.current;
+  const hasBody = !!children || (steps?.length ?? 0) > 0;
+
+  const [contentHeight, setContentHeight] = useState(0);
+  const height = useSharedValue(0);
+  const turn = useSharedValue(open ? 1 : 0);
+
+  useEffect(() => {
+    const target = open ? contentHeight : 0;
+    height.value = reduceMotion ? target : withSpring(target, OPEN_SPRING);
+    turn.value = reduceMotion ? (open ? 1 : 0) : withTiming(open ? 1 : 0, { duration: 220 });
+  }, [contentHeight, height, open, reduceMotion, turn]);
+
+  const toggle = () => {
+    if (!hasBody) return;
+    const next = !open;
+    if (controlledOpen === undefined) setUncontrolledOpen(next);
+    onOpenChange?.(next);
+  };
+
+  const bodyStyle = useAnimatedStyle(() => ({ height: height.value, opacity: Math.min(1, height.value / 24) }));
+  const chevronStyle = useAnimatedStyle(() => ({ transform: [{ rotate: `${turn.value * 90}deg` }] }));
+
+  const handleContentLayout = (event: LayoutChangeEvent) => {
+    const next = Math.ceil(event.nativeEvent.layout.height);
+    if (next !== contentHeight) setContentHeight(next);
+  };
+
+  const heading = title ?? (thinking ? copy.thinking : copy.done(totalSeconds));
+
+  return (
+    <View style={style}>
+      <Pressable
+        onPress={toggle}
+        disabled={!hasBody}
+        accessibilityRole="button"
+        accessibilityLabel={heading}
+        accessibilityState={{ expanded: open, busy: thinking }}
+        hitSlop={8}
+        style={{ flexDirection: "row", alignItems: "center", gap: 8, alignSelf: "flex-start" }}
+      >
+        {icon !== undefined && <View style={{ alignItems: "center", justifyContent: "center" }}>{icon}</View>}
+        <Animated.View key={thinking ? "thinking" : "done"} entering={reduceMotion ? undefined : FadeIn.duration(220)}>
+          {thinking && !reduceMotion ? (
+            <ShimmerText
+              text={thinking && startedAt !== undefined ? `${heading} ${elapsed}s` : heading}
+              activeColor={palette.text}
+              mutedColor={palette.textTertiary}
+              textStyle={textStyle}
+            />
+          ) : (
+            <Text style={[textStyle, { color: palette.textSecondary }]}>{heading}</Text>
+          )}
+        </Animated.View>
+        {hasBody && (
+          <Animated.View style={chevronStyle}>
+            {chevron ?? <Text style={[textStyle, { color: palette.textTertiary }]}>›</Text>}
+          </Animated.View>
+        )}
+      </Pressable>
+      {hasBody && (
+        <Animated.View style={[{ overflow: "hidden" }, bodyStyle]}>
+          <View
+            onLayout={handleContentLayout}
+            style={{ position: "absolute", left: 0, right: 0, top: 0, paddingTop: 10 }}
+          >
+            {steps && steps.length > 0 && (
+              <View>
+                {steps.map((step, index) => (
+                  <Animated.View
+                    key={step.key ?? `${index}`}
+                    entering={reduceMotion ? undefined : FadeInDown.duration(260).delay(index * 40)}
+                  >
+                    {renderStep ? (
+                      renderStep(step, index)
+                    ) : (
+                      <TimelineStep
+                        step={step}
+                        last={index === steps.length - 1}
+                        palette={palette}
+                        textStyle={textStyle}
+                        detailStyle={detailStyle}
+                        animate={!reduceMotion}
+                      />
+                    )}
+                  </Animated.View>
+                ))}
+              </View>
+            )}
+            {children}
+          </View>
+        </Animated.View>
+      )}
+    </View>
+  );
+}
+
+type TimelineStepProps = {
+  step: ThinkingStep;
+  last: boolean;
+  palette: MotionPalette;
+  textStyle: StyleProp<TextStyle>;
+  detailStyle: StyleProp<TextStyle>;
+  animate: boolean;
+};
+
+function TimelineStep({ step, last, palette, textStyle, detailStyle, animate }: TimelineStepProps) {
+  const status = step.status ?? "done";
+  return (
+    <View style={{ flexDirection: "row", gap: 12 }}>
+      <View style={{ width: DOT, alignItems: "center" }}>
+        <TimelineDot status={status} palette={palette} animate={animate} />
+        {!last && <View style={{ flex: 1, width: 1, marginVertical: 4, backgroundColor: palette.raised }} />}
+      </View>
+      <View style={{ flex: 1, paddingBottom: last ? 0 : 14, marginTop: -6 }}>
+        <Text style={[textStyle, { color: status === "pending" ? palette.textTertiary : palette.text }]}>{step.title}</Text>
+        {step.detail ? (
+          <Text style={[detailStyle, { color: palette.textSecondary, marginTop: 2 }]}>{step.detail}</Text>
+        ) : null}
+      </View>
+    </View>
+  );
+}
+
+function TimelineDot({ status, palette, animate }: { status: ThinkingStepStatus; palette: MotionPalette; animate: boolean }) {
+  const pulse = useSharedValue(1);
+
+  useEffect(() => {
+    if (status !== "active" || !animate) {
+      cancelAnimation(pulse);
+      pulse.value = 1;
+      return;
+    }
+    const curve = Easing.inOut(Easing.sin);
+    pulse.value = withRepeat(
+      withSequence(withTiming(0.35, { duration: 650, easing: curve }), withTiming(1, { duration: 650, easing: curve })),
+      -1,
+      false,
+    );
+    return () => cancelAnimation(pulse);
+  }, [animate, pulse, status]);
+
+  const animatedStyle = useAnimatedStyle(() => ({ opacity: pulse.value }));
+  const color = status === "pending" ? palette.raised : status === "active" ? palette.accent : palette.textTertiary;
+
+  return (
+    <Animated.View
+      style={[{ width: DOT, height: DOT, borderRadius: DOT / 2, backgroundColor: color, marginTop: 1 }, animatedStyle]}
+    />
+  );
+}

package/src/index.ts

@@ -0,0 +1,2 @@
+export * from "./theme";
+export * from "./text";

package/src/internal/color.ts

@@ -0,0 +1,18 @@
+export function withAlpha(color: string, alpha: number): string {
+  if (color.startsWith("rgb")) {
+    const parts = color.replace(/rgba?\(|\)/g, "").split(",").map((part) => part.trim());
+    return `rgba(${parts[0]}, ${parts[1]}, ${parts[2]}, ${alpha})`;
+  }
+  const hex = color.replace("#", "");
+  const full =
+    hex.length === 3
+      ? hex
+          .split("")
+          .map((char) => char + char)
+          .join("")
+      : hex.slice(0, 6);
+  const r = parseInt(full.slice(0, 2), 16);
+  const g = parseInt(full.slice(2, 4), 16);
+  const b = parseInt(full.slice(4, 6), 16);
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}

package/src/internal/use-elapsed.ts

@@ -0,0 +1,21 @@
+import { useEffect, useState } from "react";
+
+export function useElapsed(startedAt: number | undefined, running: boolean, interval = 1000) {
+  const [now, setNow] = useState(() => Date.now());
+
+  useEffect(() => {
+    if (!running || startedAt === undefined) return;
+    setNow(Date.now());
+    const id = setInterval(() => setNow(Date.now()), interval);
+    return () => clearInterval(id);
+  }, [interval, running, startedAt]);
+
+  if (startedAt === undefined) return 0;
+  return Math.max(0, Math.floor((now - startedAt) / 1000));
+}
+
+export function formatElapsed(seconds: number) {
+  const minutes = Math.floor(seconds / 60);
+  const rest = seconds % 60;
+  return minutes > 0 ? `${minutes}:${String(rest).padStart(2, "0")}` : `${rest}s`;
+}