Animated Tabs

1'use client'
2 
3import * as React from 'react'
4import { motion, useReducedMotion } from 'motion/react'
5import { useControllableState } from '@radix-ui/react-use-controllable-state'
6 
7import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
8import { cn } from '@/lib/utils'
9 
10type AnimatedTabsContextValue = {
11  value: string
12  previousValue: string | null
13  direction: number
14  activationMode: 'automatic' | 'manual'
15  shouldReduceMotion: boolean
16  setValue: (value: string) => void
17  registerTrigger: (value: string) => () => void
18}
19 
20const AnimatedTabsContext = React.createContext<AnimatedTabsContextValue | null>(null)
21 
22function useAnimatedTabs() {
23  const context = React.useContext(AnimatedTabsContext)
24 
25  if (!context) {
26    throw new Error('AnimatedTabs components must be used within <AnimatedTabs>.')
27  }
28 
29  return context
30}
31 
32function AnimatedTabs({
33  value: valueProp,
34  defaultValue,
35  onValueChange,
36  activationMode = 'automatic',
37  className,
38  children,
39  ...props
40}: React.ComponentProps<typeof Tabs>) {
41  const triggerValues = React.useRef<string[]>([])
42  const shouldReduceMotion = useReducedMotion()
43  const lastValue = React.useRef(valueProp ?? defaultValue ?? '')
44  const [previousValue, setPreviousValue] = React.useState<string | null>(null)
45  const [direction, setDirection] = React.useState(0)
46  const [value = '', setValue] = useControllableState({
47    prop: valueProp,
48    defaultProp: defaultValue ?? '',
49    onChange: onValueChange,
50  })
51 
52  const registerTrigger = React.useCallback((triggerValue: string) => {
53    if (!triggerValues.current.includes(triggerValue)) {
54      triggerValues.current.push(triggerValue)
55    }
56 
57    return () => {
58      triggerValues.current = triggerValues.current.filter((value) => value !== triggerValue)
59    }
60  }, [])
61 
62  React.useLayoutEffect(() => {
63    const previous = lastValue.current
64 
65    if (!value || previous === value) return
66 
67    const previousIndex = triggerValues.current.indexOf(previous)
68    const nextIndex = triggerValues.current.indexOf(value)
69 
70    setPreviousValue(previous || null)
71    setDirection(previousIndex === -1 || nextIndex === -1 ? 0 : nextIndex > previousIndex ? 1 : -1)
72    lastValue.current = value
73  }, [value])
74 
75  React.useEffect(() => {
76    if (!previousValue) return
77 
78    const timeout = window.setTimeout(() => setPreviousValue(null), 240)
79 
80    return () => window.clearTimeout(timeout)
81  }, [previousValue])
82 
83  return (
84    <AnimatedTabsContext.Provider
85      value={{
86// … truncated