Tabs

1"use client";
2 
3import {
4  useRef,
5  useState,
6  useCallback,
7  useEffect,
8  useLayoutEffect,
9  createContext,
10  useContext,
11  forwardRef,
12  Children,
13  cloneElement,
14  isValidElement,
15  type ComponentPropsWithoutRef,
16} from "react";
17import * as TabsPrimitive from "@radix-ui/react-tabs";
18import { motion, AnimatePresence } from "framer-motion";
19import type { IconComponent } from "@/lib/icon-context";
20import { cn } from "@/lib/utils";
21import { spring } from "@/lib/springs";
22import { fontWeights } from "@/lib/font-weight";
23import { useShape } from "@/lib/shape-context";
24import { useSurface } from "@/lib/surface-context";
25import { surfaceClasses } from "@/lib/surface-classes";
26import { useProximityHover } from "@/hooks/use-proximity-hover";
27 
28/* ─────────────────────── Contexts ─────────────────────── */
29 
30interface TabsValueOrderContextValue {
31  valueOrder: string[];
32  setValueOrder: (order: string[]) => void;
33  selectedValue: string | undefined;
34}
35 
36const TabsValueOrderContext = createContext<TabsValueOrderContextValue | null>(null);
37 
38interface TabsListContextValue {
39  registerTab: (index: number, value: string, el: HTMLElement | null) => void;
40  hoveredIndex: number | null;
41  selectedValue: string | undefined;
42  /** Optimistically set selectedIdx so the indicator moves immediately on click. */
43  setOptimisticIdx: (index: number) => void;
44}
45 
46const TabsListContext = createContext<TabsListContextValue | null>(null);
47 
48function useTabsList() {
49  const ctx = useContext(TabsListContext);
50  if (!ctx) throw new Error("TabItem must be used within a TabsList");
51  return ctx;
52}
53 
54/* ─────────────────────── Tabs (Root) ─────────────────────── */
55 
56interface TabsProps
57  extends Omit<
58    ComponentPropsWithoutRef<typeof TabsPrimitive.Root>,
59    "onValueChange" | "onSelect"
60  > {
61  /** Controlled value (takes precedence over selectedIndex). */
62  value?: string;
63  /** Called when the active tab changes. */
64  onValueChange?: (value: string) => void;
65  /** Index-based controlled alternative. */
66  selectedIndex?: number;
67  /** Called with the new index when the active tab changes. */
68  onSelect?: (index: number) => void;
69}
70 
71const Tabs = forwardRef<HTMLDivElement, TabsProps>(
72  (
73    {
74      value,
75      onValueChange,
76      selectedIndex,
77      onSelect,
78      defaultValue,
79      children,
80// … truncated