Tabs

1'use client';
2 
3import { Tabs as TabsPrimitive } from '@base-ui/react/tabs';
4import * as React from 'react';
5 
6import { cn } from '@/lib/utils';
7 
8export type TabSize = 'default' | 'lg' | 'xl';
9 
10export interface TabsTriggerProps extends React.ComponentProps<
11  typeof TabsPrimitive.Tab
12> {
13  size?: TabSize;
14}
15 
16export type TabsContentProps = React.ComponentProps<typeof TabsPrimitive.Panel>;
17 
18export interface TabsProps extends React.ComponentProps<
19  typeof TabsPrimitive.Root
20> {
21  size?: TabSize;
22  /** Hides the full-width divider under the tab row. Default shows the tertiary baseline from Tab-Group. */
23  hideBaseline?: boolean;
24  /** When true, triggers use horizontal padding and sit flush with no gap. When false, compact triggers with gap between tabs. */
25  padded?: boolean;
26}
27 
28export type TabsListProps = React.ComponentProps<typeof TabsPrimitive.List>;
29 
30interface TabsSizeContextValue {
31  size?: TabSize;
32}
33 
34const TabsSizeContext = React.createContext<TabsSizeContextValue | undefined>(
35  undefined,
36);
37 
38const useTabsSizeContext = () => {
39  const context = React.useContext(TabsSizeContext);
40 
41  return context;
42};
43 
44interface TabsLayoutContextValue {
45  hideBaseline?: boolean;
46  padded?: boolean;
47}
48 
49const TabsLayoutContext = React.createContext<
50  TabsLayoutContextValue | undefined
51>(undefined);
52 
53const useTabsLayoutContext = () => {
54  const context = React.useContext(TabsLayoutContext);
55 
56  return context;
57};
58 
59const defaultStyles = {
60  tabs: 'w-full',
61  tabList: {
62    base: 'flex relative box-border',
63    baseline:
64      "before:absolute before:bottom-0 before:left-0 before:w-full before:h-px before:bg-stroke-tertiary before:content-['']",
65    hideBaseline: 'before:content-none',
66    compact: {
67      default: 'gap-3',
68      lg: 'gap-3',
69      xl: 'gap-5',
70    },
71    scrollbar:
72      'scrollbar-none [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:w-0 [&::-webkit-scrollbar]:h-0',
73  },
74  tab: {
75    base: 'box-border relative align-top text-center text-ellipsis overflow-visible inline-flex items-center justify-center gap-1 select-none outline-none transition-all duration-200',
76    padding: {
77      default: 'px-3 py-2',
78      lg: 'px-4 pt-2 pb-3',
79      xl: 'px-6 py-3',
80    },
81    paddingCompact: {
82      default: 'py-2',
83      lg: 'pt-2 pb-3',
84      xl: 'py-3',
85    },
86    font: {
87      default: 'paragraph-regular-primary',
88      lg: 'label-large-primary',
89      xl: 'headings-h4-regular',
90    },
91    animatedHoverBorder:
92// … truncated