Tabs

1"use client";
2
3import { createContext, useContext, useEffect, useRef, useState } from "react";
4import { Tabs as TabsPrimitive } from "@base-ui/react/tabs";
5
6import { cn } from "@/lib/classes";
7
8type TabsVariant = "segmented" | "underline" | "card";
9
10function isValidVariant(variant: TabsVariant): variant is TabsVariant {
11  return (
12    variant === "segmented" || variant === "underline" || variant === "card"
13  );
14}
15
16interface TabsContextType {
17  variant?: TabsVariant;
18}
19
20const TabsContext = createContext<TabsContextType>({
21  variant: "segmented",
22});
23
24function useTabs() {
25  const context = useContext(TabsContext);
26  if (!context) {
27    throw new Error("useTabs must be used within a Tabs component");
28  }
29  return context;
30}
31
32interface TabsProps extends TabsPrimitive.Root.Props {
33  variant?: TabsVariant;
34}
35
36function Tabs({ className, variant = "segmented", ...props }: TabsProps) {
37  const finalVariant = isValidVariant(variant) ? variant : "segmented";
38
39  return (
40    <TabsContext.Provider value={{ variant: finalVariant }}>
41      <TabsPrimitive.Root
42        data-slot="tabs"
43        className={cn(
44          "flex gap-2 data-[orientation=vertical]:flex-row data-[orientation=horizontal]:flex-col",
45          className
46        )}
47        {...props}
48      />
49    </TabsContext.Provider>
50  );
51}
52
53interface TabsListProps extends TabsPrimitive.List.Props {}
54
55function TabsList({ className, children, ...props }: TabsListProps) {
56  const { variant } = useTabs();
57
58  return (
59    <TabsPrimitive.List
60      data-slot="tabs-list"
61      className={cn(
62        "relative z-0 flex max-w-full w-fit items-center justify-start gap-x-0.5 text-muted-foreground data-[orientation=vertical]:flex-col max-sm:data-[orientation=horizontal]:overflow-x-auto max-sm:data-[orientation=horizontal]:overflow-y-hidden",
63        variant === "segmented" && "rounded-[12px] bg-muted p-1",
64        variant === "underline" &&
65          "data-[orientation=vertical]:px-1 data-[orientation=horizontal]:py-1",
66        variant === "card" && "p-1",
67        className
68      )}
69      {...props}
70    >
71      {children}
72      <TabsPrimitive.Indicator
73        data-slot="tabs-indicator"
74        className={cn(
75// … truncated