tabs

1"use client"
2 
3import * as React from "react"
4 
5import { Tabs as TabsPrimitive } from "@ark-ui/react/tabs"
6 
7import { cn } from "@/lib/utils"
8 
9const Tabs = React.forwardRef<
10  React.ElementRef<typeof TabsPrimitive.Root>,
11  TabsPrimitive.RootProps
12>(({ className, ...props }, ref) => (
13  <TabsPrimitive.Root
14    ref={ref}
15    className={cn("flex flex-col gap-2", className)}
16    {...props}
17  />
18))
19Tabs.displayName = "Tabs"
20 
21const TabsContent = React.forwardRef<
22  React.ElementRef<typeof TabsPrimitive.Content>,
23  TabsPrimitive.ContentProps
24>(({ className, ...props }, ref) => (
25  <TabsPrimitive.Content
26    ref={ref}
27    className={cn("flex-1 outline-none", className)}
28    {...props}
29  />
30))
31TabsContent.displayName = "TabsContent"
32 
33const TabsContext = TabsPrimitive.Context
34 
35const TabsIndicator = React.forwardRef<
36  React.ElementRef<typeof TabsPrimitive.Indicator>,
37  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Indicator>
38>(({ className, ...props }, ref) => (
39  <TabsPrimitive.Indicator
40    ref={ref}
41    className={cn(
42      "h-(--height) w-(--width) rounded-sm bg-background text-foreground shadow-xs",
43      className
44    )}
45    {...props}
46  />
47))
48TabsIndicator.displayName = "TabsIndicator"
49 
50const TabsList = React.forwardRef<
51  React.ElementRef<typeof TabsPrimitive.List>,
52  TabsPrimitive.ListProps
53>(({ className, ...props }, ref) => (
54  <TabsPrimitive.List
55    ref={ref}
56    className={cn(
57      "relative inline-flex items-center justify-center rounded-md bg-muted p-0.5 text-muted-foreground/70 data-[orientation=vertical]:flex-col",
58      className
59    )}
60    {...props}
61  />
62))
63TabsList.displayName = "TabsList"
64 
65const TabsRootProvider = TabsPrimitive.RootProvider
66 
67const TabsTrigger = React.forwardRef<
68  React.ElementRef<typeof TabsPrimitive.Trigger>,
69  TabsPrimitive.TriggerProps
70>(({ className, ...props }, ref) => (
71  <TabsPrimitive.Trigger
72    ref={ref}
73    className={cn(
74      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 font-medium text-sm outline-none transition-all hover:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 data-[selected]:z-10 data-[orientation=vertical]:w-full data-[selected]:text-foreground [&_svg]:shrink-0",
75      className
76    )}
77    {...props}
78  />
79))
80TabsTrigger.displayName = "TabsTrigger"
81 
82export {
83  Tabs,
84  TabsContent,
85  TabsContext,
86  TabsIndicator,
87  TabsList,
88  TabsRootProvider,
89  TabsTrigger,
90}
91 
92// … truncated