Tabs

1"use client";
2 
3import "./tabs.css";
4import { Tabs as BaseTabs } from "@base-ui/react/tabs";
5import type React from "react";
6import { cn } from "tailwind-variants";
7 
8import { TabsContext, useTabsContext } from "./tabs.context";
9import { tabsVariants, type TabsVariants } from "./tabs.variants";
10 
11export type TabsProps = TabsVariants & React.ComponentProps<typeof BaseTabs.Root>;
12 
13export const TabsRoot = ({ children, className, variant, size, ...props }: TabsProps) => {
14  const slots = tabsVariants({ variant, size });
15 
16  return (
17    <TabsContext.Provider value={{ slots }}>
18      <BaseTabs.Root className={cn(slots.root(), className)} {...props}>
19        {children}
20      </BaseTabs.Root>
21    </TabsContext.Provider>
22  );
23};
24 
25export type TabsListProps = React.ComponentProps<typeof BaseTabs.List>;
26 
27export const TabsList = ({ className, ...props }: TabsListProps) => {
28  const { slots } = useTabsContext();
29  return <BaseTabs.List className={cn(slots.list(), className)} {...props} />;
30};
31 
32export type TabsTabProps = React.ComponentProps<typeof BaseTabs.Tab>;
33 
34export const TabsTab = ({ className, ...props }: TabsTabProps) => {
35  const { slots } = useTabsContext();
36  return <BaseTabs.Tab className={cn(slots.tab(), className)} {...props} />;
37};
38 
39export type TabsIndicatorProps = React.ComponentProps<typeof BaseTabs.Indicator>;
40 
41export const TabsIndicator = ({ className, ...props }: TabsIndicatorProps) => {
42  const { slots } = useTabsContext();
43  return <BaseTabs.Indicator className={cn(slots.indicator(), className)} {...props} />;
44};
45 
46export type TabsPanelProps = React.ComponentProps<typeof BaseTabs.Panel>;
47 
48export const TabsPanel = ({ className, ...props }: TabsPanelProps) => {
49  const { slots } = useTabsContext();
50  return <BaseTabs.Panel className={cn(slots.panel(), className)} {...props} />;
51};