Motion Tabs

1'use client'
2 
3import * as React from 'react'
4 
5import { motion, type Transition, type HTMLMotionProps } from 'motion/react'
6 
7import { cn } from '@/lib/utils'
8import { MotionHighlight, MotionHighlightItem } from '@/components/ui/motion-highlight'
9 
10type TabsContextType<T extends string> = {
11  activeValue: T
12  handleValueChange: (value: T) => void
13  registerTrigger: (value: T, node: HTMLElement | null) => void
14}
15 
16// eslint-disable-next-line @typescript-eslint/no-explicit-any
17const TabsContext = React.createContext<TabsContextType<any> | undefined>(undefined)
18 
19function useTabs<T extends string = string>(): TabsContextType<T> {
20  const context = React.useContext(TabsContext)
21 
22  if (!context) {
23    throw new Error('useTabs must be used within a TabsProvider')
24  }
25 
26  return context
27}
28 
29type BaseTabsProps = React.ComponentProps<'div'> & {
30  children: React.ReactNode
31}
32 
33type UnControlledTabsProps<T extends string = string> = BaseTabsProps & {
34  defaultValue?: T
35  value?: never
36  onValueChange?: never
37}
38 
39type ControlledTabsProps<T extends string = string> = BaseTabsProps & {
40  value: T
41  onValueChange?: (value: T) => void
42  defaultValue?: never
43}
44 
45type TabsProps<T extends string = string> = UnControlledTabsProps<T> | ControlledTabsProps<T>
46 
47function Tabs<T extends string = string>({
48  defaultValue,
49  value,
50  onValueChange,
51  children,
52  className,
53  ...props
54}: TabsProps<T>) {
55  const [activeValue, setActiveValue] = React.useState<T | undefined>(defaultValue ?? undefined)
56  const triggersRef = React.useRef(new Map<string, HTMLElement>())
57  const initialSet = React.useRef(false)
58  const isControlled = value !== undefined
59 
60  React.useEffect(() => {
61    if (!isControlled && activeValue === undefined && triggersRef.current.size > 0 && !initialSet.current) {
62      const firstTab = Array.from(triggersRef.current.keys())[0]
63 
64      setActiveValue(firstTab as T)
65      initialSet.current = true
66    }
67  }, [activeValue, isControlled])
68 
69  const registerTrigger = (value: string, node: HTMLElement | null) => {
70    if (node) {
71      triggersRef.current.set(value, node)
72 
73      if (!isControlled && activeValue === undefined && !initialSet.current) {
74        setActiveValue(value as T)
75        initialSet.current = true
76      }
77    } else {
78      triggersRef.current.delete(value)
79    }
80  }
81 
82  const handleValueChange = (val: T) => {
83    if (!isControlled) setActiveValue(val)
84    else onValueChange?.(val)
85  }
86 
87  return (
88    <TabsContext.Provider
89      value={{
90// … truncated