Tabs

1"use client";
2 
3import {
4  Children,
5  cloneElement,
6  createContext,
7  isValidElement,
8  useCallback,
9  useContext,
10  useEffect,
11  useLayoutEffect,
12  useRef,
13  useState,
14  type ReactElement,
15} from "react";
16import { Tabs as TabsPrimitive } from "@base-ui/react/tabs";
17import { motion, AnimatePresence, useReducedMotion } from "motion/react";
18 
19import { cn } from "@/lib/utils";
20import { spring } from "@/lib/springs";
21import { fontWeights } from "@/lib/font-weight";
22import {
23  useProximityHover,
24  proximityHoverWashClassName,
25  proximityHoverWashOpacity,
26  type ItemRect,
27} from "@/hooks/use-proximity-hover";
28 
29// ─── Contexts ────────────────────────────────────────────────────────────────
30// Base UI doesn't expose a public hook for "which value is active" to
31// arbitrary descendants (only its own Root/List/Tab/Panel/Indicator
32// components can see that internally) — TabsList needs it to resolve the
33// selected tab's index into `itemRects`, so Tabs tracks it itself instead.
34 
35interface TabsValueOrderContextValue {
36  valueOrder: string[];
37  setValueOrder: (order: string[]) => void;
38  selectedValue: string | undefined;
39}
40 
41const TabsValueOrderContext = createContext<TabsValueOrderContextValue | null>(null);
42 
43interface TabsListContextValue {
44  registerTab: (index: number, element: HTMLElement | null) => void;
45  hoveredIndex: number | null;
46  selectedValue: string | undefined;
47  /** Optimistically set on click so the indicator jumps immediately, without waiting for the controlled value to round-trip back. */
48  setOptimisticIndex: (index: number) => void;
49}
50 
51const TabsListContext = createContext<TabsListContextValue | null>(null);
52 
53function useTabsListContext() {
54  const ctx = useContext(TabsListContext);
55  if (!ctx) throw new Error("TabsTrigger must be used within a TabsList");
56  return ctx;
57}
58 
59// ─── Tabs ────────────────────────────────────────────────────────────────────
60 
61function Tabs({
62  value,
63  onValueChange,
64  defaultValue,
65  children,
66  className,
67  ...props
68}: TabsPrimitive.Root.Props) {
69  const [valueOrder, setValueOrder] = useState<string[]>([]);
70  const [uncontrolledValue, setUncontrolledValue] = useState<unknown>(defaultValue);
71 
72// … truncated