Animated Tabs

1"use client"
2 
3import * as React from "react"
4import { motion, useReducedMotion, type Transition } from "motion/react"
5import { cn } from "@/lib/utils"
6 
7export interface AnimatedTab {
8  id: string
9  label: string
10}
11 
12export interface AnimatedTabsProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
13  /** Tab items, rendered in order. */
14  tabs: AnimatedTab[]
15  /** Controlled: id of the selected tab. */
16  value: string
17  /** Controlled: called with the id of the tab to select. */
18  onChange: (id: string) => void
19  variant?: "underline" | "pill"
20}
21 
22/**
23 * Tab strip only — panels belong to the consumer. The active indicator glides
24 * between tabs via motion's shared layout animation (one `layoutId` per
25 * instance, scoped with useId so multiple strips never cross-animate).
26 */
27export const AnimatedTabs = React.forwardRef<HTMLDivElement, AnimatedTabsProps>(
28  ({ tabs, value, onChange, variant = "underline", className, onKeyDown, ...props }, ref) => {
29    const uid = React.useId()
30    const tabRefs = React.useRef<(HTMLButtonElement | null)[]>([])
31    const reducedMotion = useReducedMotion()
32    const transition: Transition = reducedMotion
33      ? { duration: 0 }
34      : { type: "spring", stiffness: 500, damping: 40 }
35 
36    const activeIndex = tabs.findIndex(t => t.id === value)
37    // roving tabindex:活动 tab 可聚焦;value 不匹配时兜底到第一个,保证键盘可达
38    const focusIndex = activeIndex === -1 ? 0 : activeIndex
39 
40    const selectAndFocus = (index: number) => {
41      const tab = tabs[index]
42      if (!tab) return
43      onChange(tab.id)
44      tabRefs.current[index]?.focus()
45    }
46 
47    const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
48      onKeyDown?.(e)
49      if (e.defaultPrevented || tabs.length === 0) return
50      if (e.key === "ArrowRight") {
51        e.preventDefault()
52        selectAndFocus((focusIndex + 1) % tabs.length)
53      } else if (e.key === "ArrowLeft") {
54        e.preventDefault()
55        selectAndFocus((focusIndex - 1 + tabs.length) % tabs.length)
56      } else if (e.key === "Home") {
57        e.preventDefault()
58        selectAndFocus(0)
59      } else if (e.key === "End") {
60        e.preventDefault()
61        selectAndFocus(tabs.length - 1)
62      }
63    }
64 
65    return (
66      <div
67        className={cn(
68          "inline-flex max-w-full items-center overflow-x-auto",
69          variant === "underline" ? "gap-1 border-b" : "gap-1 rounded-lg bg-muted p-1",
70          className,
71        )}
72// … truncated