tabs

1"use client"
2 
3import * as React from "react"
4 
5import { cn } from "@/lib/utils"
6 
7type TabVariant = "default" | "underline" | "ghost"
8type TabSize = "sm" | "small" | "default" | "lg" | "large"
9 
10interface TabItem {
11  id: string
12  label: React.ReactNode
13  icon?: React.ReactNode
14  disabled?: boolean
15}
16 
17interface TabsContextValue {
18  activeTab: string
19  setActiveTab: (id: string) => void
20  variant: TabVariant
21  size: TabSize
22  indicatorThickness?: string
23  indicatorClassName?: string
24  concentric?: boolean
25  hoveredIndex: number | null
26  setHoveredIndex: (index: number | null) => void
27  activeIndex: number
28  setActiveIndex: (index: number) => void
29  tabRefs: React.MutableRefObject<(HTMLButtonElement | null)[]>
30}
31 
32const TabsContext = React.createContext<TabsContextValue | null>(null)
33 
34function useTabs() {
35  const context = React.useContext(TabsContext)
36  if (!context) {
37    throw new Error("useTabs must be used within an Tabs component")
38  }
39  return context
40}
41 
42interface TabsProps {
43  defaultValue?: string
44  value?: string
45  onValueChange?: (value: string) => void
46  children: React.ReactNode
47  className?: string
48  variant?: TabVariant
49  size?: TabSize
50  /** Override the underline indicator thickness (e.g. "2px", "4px") */
51  indicatorThickness?: string
52  /** Override the active indicator className (e.g. "bg-muted") */
53  indicatorClassName?: string
54  /** Use concentric border radius (outer = inner + padding) for default variant */
55  concentric?: boolean
56}
57 
58function Tabs({
59  defaultValue,
60  value,
61  onValueChange,
62  children,
63  className,
64  variant = "default",
65  size = "default",
66  indicatorThickness,
67  indicatorClassName,
68  concentric = false,
69}: TabsProps) {
70  const [internalValue, setInternalValue] = React.useState(defaultValue ?? "")
71  const [hoveredIndex, setHoveredIndex] = React.useState<number | null>(null)
72  const [activeIndex, setActiveIndex] = React.useState<number>(0)
73  const tabRefs = React.useRef<(HTMLButtonElement | null)[]>([])
74 
75  const activeTab = value ?? internalValue
76  const setActiveTab = React.useCallback(
77    (id: string) => {
78      if (value === undefined) {
79        setInternalValue(id)
80      }
81      onValueChange?.(id)
82    },
83    [value, onValueChange]
84  )
85 
86  return (
87    <TabsContext.Provider
88      value={{
89        activeTab,
90        setActiveTab,
91        variant,
92        size,
93        indicatorThickness,
94        indicatorClassName,
95        concentric,
96        hoveredIndex,
97        setHoveredIndex,
98        activeIndex,
99// … truncated