Tabs

1import * as React from 'react';
2 
3import {
4  Tabs as TabsPrimitive,
5  TabsList as TabsListPrimitive,
6  TabsTab as TabsTabPrimitive,
7  TabsPanel as TabsPanelPrimitive,
8  TabsPanels as TabsPanelsPrimitive,
9  TabsHighlight as TabsHighlightPrimitive,
10  TabsHighlightItem as TabsHighlightItemPrimitive,
11  type TabsProps as TabsPrimitiveProps,
12  type TabsListProps as TabsListPrimitiveProps,
13  type TabsTabProps as TabsTabPrimitiveProps,
14  type TabsPanelProps as TabsPanelPrimitiveProps,
15  type TabsPanelsProps as TabsPanelsPrimitiveProps,
16} from '@/components/animate-ui/primitives/base/tabs';
17import { cn } from '@/lib/utils';
18 
19type TabsProps = TabsPrimitiveProps;
20 
21function Tabs({ className, ...props }: TabsProps) {
22  return (
23    <TabsPrimitive
24      className={cn('flex flex-col gap-2', className)}
25      {...props}
26    />
27  );
28}
29 
30type TabsListProps = TabsListPrimitiveProps;
31 
32function TabsList({ className, ...props }: TabsListProps) {
33  return (
34    <TabsHighlightPrimitive className="absolute z-0 inset-0 border border-transparent rounded-md bg-background dark:border-input dark:bg-input/30 shadow-sm">
35      <TabsListPrimitive
36        className={cn(
37          'bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]',
38          className,
39        )}
40        {...props}
41      />
42    </TabsHighlightPrimitive>
43  );
44}
45 
46type TabsTabProps = TabsTabPrimitiveProps;
47 
48function TabsTab({ className, ...props }: TabsTabProps) {
49  return (
50    <TabsHighlightItemPrimitive value={props.value} className="flex-1">
51      <TabsTabPrimitive
52        className={cn(
53          "data-[selected]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md w-full px-2 py-1 text-sm font-medium whitespace-nowrap transition-colors duration-500 ease-in-out focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
54          className,
55        )}
56        {...props}
57      />
58    </TabsHighlightItemPrimitive>
59  );
60}
61 
62type TabsPanelsProps = TabsPanelsPrimitiveProps;
63 
64function TabsPanels(props: TabsPanelsProps) {
65  return <TabsPanelsPrimitive {...props} />;
66}
67 
68type TabsPanelProps = TabsPanelPrimitiveProps;
69 
70function TabsPanel({ className, ...props }: TabsPanelProps) {
71  return (
72    <TabsPanelPrimitive
73// … truncated