Animated Tabs

1"use client";
2 
3import * as React from "react";
4import {
5  AnimatePresence,
6  motion,
7  useReducedMotion,
8  type Transition,
9} from "motion/react";
10import * as TabsPrimitive from "@radix-ui/react-tabs";
11 
12import { cn } from "@/lib/utils";
13 
14type TransitionKind = "spring" | "tween";
15 
16const SPRING: Transition = { type: "spring", stiffness: 520, damping: 42, mass: 1 };
17const TWEEN: Transition = { duration: 0.24, ease: [0.2, 0, 0, 1] };
18 
19interface TabsAnimationContextValue {
20  /** Stable id so every List gets its own sliding indicator layout group. */
21  layoutId: string;
22  transition: TransitionKind;
23  directionAware: boolean;
24  value: string | undefined;
25  reduce: boolean;
26}
27 
28const TabsAnimationContext =
29  React.createContext<TabsAnimationContextValue | null>(null);
30 
31function useTabsAnimation() {
32  const ctx = React.useContext(TabsAnimationContext);
33  if (!ctx) {
34    throw new Error("AnimatedTabs.* must be rendered inside <AnimatedTabs>.");
35  }
36  return ctx;
37}
38 
39export interface AnimatedTabsProps
40  extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root> {
41  /** Slide content in the direction of travel between tabs. */
42  directionAware?: boolean;
43  /** Motion feel for the active indicator + content. */
44  transition?: TransitionKind;
45}
46 
47/**
48 * AnimatedTabs — Radix Tabs with a Motion `layoutId` sliding active indicator
49 * and cross-faded content.
50 *
51 * Accessibility: Radix owns roles (`tablist`/`tab`/`tabpanel`), arrow-key
52 * roving focus, and controlled/uncontrolled value — untouched here. The
53 * indicator is purely decorative. Under `prefers-reduced-motion` the indicator
54 * and content swap instantly. Content is keyed by active value inside
55 * AnimatePresence with `mode="wait"`, so rapid switching never leaves a stale
56 * panel mounted. Clean-room original.
57 */
58export function AnimatedTabs({
59  directionAware = false,
60  transition = "spring",
61  value: valueProp,
62  defaultValue,
63  onValueChange,
64  className,
65  children,
66  ...props
67}: AnimatedTabsProps) {
68  const reduce = useReducedMotion();
69  const reactId = React.useId();
70  const [value, setValue] = React.useState<string | undefined>(
71    valueProp ?? defaultValue,
72  );
73 
74  React.useEffect(() => {
75    if (valueProp !== undefined) setValue(valueProp);
76  }, [valueProp]);
77 
78  const handleValueChange = React.useCallback(
79    (next: string) => {
80      if (valueProp === undefined) setValue(next);
81      onValueChange?.(next);
82    },
83    [valueProp, onValueChange],
84  );
85 
86// … truncated