Tabs

1"use client"
2 
3import * as React from "react"
4import { cva, type VariantProps } from "class-variance-authority"
5import { Tabs as TabsPrimitive } from "radix-ui"
6 
7import { cn } from "@/lib/utils"
8 
9function Tabs({
10  className,
11  orientation = "horizontal",
12  ...props
13}: React.ComponentProps<typeof TabsPrimitive.Root>) {
14  return (
15    <TabsPrimitive.Root
16      data-slot="tabs"
17      data-orientation={orientation}
18      className={cn(
19        "gap-2 group/tabs flex data-[orientation=horizontal]:flex-col",
20        className
21      )}
22      {...props}
23    />
24  )
25}
26 
27const tabsListVariants = cva(
28  "rounded-lg p-[3px] group-data-horizontal/tabs:h-9 data-[variant=line]:rounded-none data-[variant=uswds]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col",
29  {
30    variants: {
31      variant: {
32        default: "bg-muted",
33        line: "gap-1 bg-transparent",
34        uswds: "w-full justify-start h-auto items-end relative gap-0 bg-transparent p-0 before:absolute before:inset-x-0 before:bottom-0 before:h-px before:bg-treasury-primary",
35      },
36    },
37    defaultVariants: {
38      variant: "default",
39    },
40  }
41)
42 
43function TabsList({
44  className,
45  variant = "default",
46  ...props
47}: React.ComponentProps<typeof TabsPrimitive.List> &
48  VariantProps<typeof tabsListVariants>) {
49  return (
50    <TabsPrimitive.List
51      data-slot="tabs-list"
52      data-variant={variant}
53      className={cn(tabsListVariants({ variant }), className)}
54      {...props}
55    />
56  )
57}
58 
59function TabsTrigger({
60  className,
61  ...props
62}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
63  return (
64    <TabsPrimitive.Trigger
65      data-slot="tabs-trigger"
66      className={cn(
67// … truncated