Tabs

1"use client";
2 
3import { Tabs as TabsPrimitive } from "@base-ui/react/tabs";
4import { createContext, useContext, useId } from "react";
5import type * as React from "react";
6import { cn } from "@/lib/utils";
7import { selectionFocus } from "@/lib/recipes";
8import { Tooltip } from "@/components/ui/tooltip";
9 
10type TabsOrientation = "horizontal" | "vertical";
11 
12const TabsOrientationContext = createContext<TabsOrientation>("horizontal");
13 
14/* ---------------------------------- Root --------------------------------- */
15 
16export interface TabsProps
17  extends Omit<
18    React.ComponentProps<typeof TabsPrimitive.Root>,
19    "value" | "defaultValue" | "onValueChange"
20  > {
21  value?: string;
22  defaultValue?: string;
23  onValueChange?: (value: string) => void;
24  orientation?: TabsOrientation;
25}
26 
27export function Tabs({
28  value,
29  defaultValue,
30  onValueChange,
31  orientation = "horizontal",
32  className,
33  children,
34  ...props
35}: TabsProps): React.ReactElement {
36  return (
37    <TabsOrientationContext.Provider value={orientation}>
38      <TabsPrimitive.Root
39        value={value}
40        defaultValue={defaultValue}
41        onValueChange={
42          onValueChange ? (next) => onValueChange(String(next)) : undefined
43        }
44        orientation={orientation}
45        data-slot="tabs"
46        className={cn(
47          orientation === "vertical" && "flex gap-0",
48          className,
49        )}
50        {...props}
51      >
52        {children}
53      </TabsPrimitive.Root>
54    </TabsOrientationContext.Provider>
55  );
56}
57 
58/* --------------------------------- List --------------------------------- */
59 
60export interface TabsListProps
61  extends React.ComponentProps<typeof TabsPrimitive.List> {
62  /** Horizontal overflow strategy. Default scroll. */
63  overflow?: "scroll" | "wrap";
64}
65 
66export function TabsList({
67  overflow = "scroll",
68  className,
69  children,
70  ...props
71}: TabsListProps): React.ReactElement {
72  const orientation = useContext(TabsOrientationContext);
73 
74  return (
75    <TabsPrimitive.List
76      data-slot="tabs-list"
77      data-orientation={orientation}
78      className={cn(
79        "relative flex",
80        orientation === "horizontal"
81          ? cn(
82              "items-center gap-1",
83              overflow === "scroll"
84                ? "max-w-full overflow-x-auto overscroll-x-contain [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
85                : "flex-wrap",
86            )
87          : "flex-col items-stretch gap-1",
88        className,
89      )}
90      {...props}
91    >
92      {children}
93// … truncated