Tabs

1"use client";23import * as React from "react";4import { cva, type VariantProps } from "class-variance-authority";5import { Tabs as TabsPrimitive } from "@sprawlify/react/tabs";6import { cn } from "@/lib/utils";78function Tabs({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Root>) {9  return (10    <TabsPrimitive.Root11      data-slot="tabs"12      className={cn("gap-2 group/tabs flex data-[orientation=horizontal]:flex-col", className)}13      {...props}14    />15  );16}1718const tabsListVariants = cva(19  "rounded-lg p-[3px] group-data-[orientation=horizontal]/tabs:h-8 data-[variant=line]: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",20  {21    variants: {22      variant: {23        default: "bg-muted",24        line: "gap-1 bg-transparent",25      },26    },27    defaultVariants: {28      variant: "default",29    },30  },31);3233function TabsList({34  className,35  variant = "default",36  ...props37}: React.ComponentProps<typeof TabsPrimitive.List> & VariantProps<typeof tabsListVariants>) {38  return (39    <TabsPrimitive.List40      data-slot="tabs-list"41      data-variant={variant}42      className={cn(tabsListVariants({ variant }), className)}43      {...props}44    />45  );46}4748function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>) {49  return (50    <TabsPrimitive.Trigger51      data-slot="tabs-trigger"52      className={cn(53        "gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium group-data-[variant=default]/tabs-list:data-selected:shadow-sm group-data-[variant=line]/tabs-list:data-selected:shadow-none [&_svg:not([class*='size-'])]:size-4 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",54        "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-selected:bg-transparent dark:group-data-[variant=line]/tabs-list:data-selected:border-transparent dark:group-data-[variant=line]/tabs-list:data-selected:bg-transparent",55        "data-selected:bg-background dark:data-selected:text-foreground dark:data-selected:border-input dark:data-selected:bg-input/30 data-selected:text-foreground",56        "after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-selected:after:opacity-100",57        className,58      )}59      {...props}60    />61  );62}6364function TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>) {65  return (66    <TabsPrimitive.Content67      data-slot="tabs-content"68      className={cn("text-sm flex-1 outline-none", className)}69      {...props}70    />71  );72}7374export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants };75