@health-samurai/react-components 0.0.0-alpha.2 → 0.0.0-alpha.21

package/src/shadcn/components/ui/tabs.tsx

@@ -1,52 +1,188 @@
+"use client";
 import * as TabsPrimitive from "@radix-ui/react-tabs";
 import { cva, type VariantProps } from "class-variance-authority";
-import { Plus, X } from "lucide-react";
-import type * as React from "react";
+import {
+	ChevronDownIcon,
+	ChevronLeft,
+	ChevronRight,
+	Plus,
+	X,
+} from "lucide-react";
+import * as React from "react";
 import { cn } from "#shadcn/lib/utils";
 import { Button } from "./button";
+import {
+	Command,
+	CommandEmpty,
+	CommandInput,
+	CommandItem,
+	CommandList,
+} from "./command";
+import { Popover, PopoverContent, PopoverTrigger } from "./popover";
+
+// Base tabs styles
+const baseTabsStyles = cn("flex", "flex-col", "h-full");
+
+// Tabs add button container styles
+const tabsAddButtonContainerStyles = cn(
+	"grow",
+	"h-full",
+	"bg-bg-secondary",
+	"border-l",
+	"border-b",
+);
+
+// Tabs list styles
+const tabsListStyles = cn(
+	"inline-flex",
+	"w-fit",
+	"items-center",
+	"no-scrollbar",
+);
+
+// Base tabs trigger styles
+const baseTabsTriggerStyles = cn(
+	// Layout & Sizing
+	"box-border",
+	"flex-1",
+	"h-10",
+	"inline-flex",
+	"items-center",
+	"justify-center",
+	"px-3",
+	"whitespace-nowrap",
+	// Spacing & Padding
+	"pb-2",
+	"pt-2.5",
+	// Typography
+	"typo-body",
+	// Colors & States
+	"cursor-pointer",
+	"text-text-tertiary",
+	"hover:bg-bg-secondary/60",
+	"hover:text-text-tertiary_hover",
+	"data-[state=active]:text-text-primary",
+	"data-[state=active]:border-b-border-brand",
+	"disabled:opacity-50",
+	"disabled:pointer-events-none",
+	// Borders
+	"border-b-2",
+	"border-b-transparent",
+	// Focus & Accessibility
+	"focus-visible:ring-2",
+	"focus-visible:ring-utility-blue/70",
+	"focus-visible:outline-1",
+	// Transitions
+	"transition-[color,box-shadow]",
+	// Icons
+	"[&_svg]:pointer-events-none",
+	"[&_svg]:shrink-0",
+	"[&_svg:not([class*='size-'])]:size-4",
+	// Groups
+	"group/tabs-trigger",
+);
+
+// Tabs content styles
+const tabsContentStyles = cn("grow", "outline-none", "overflow-auto");
 
 const tabsVariants = cva("", {
 	variants: {
 		variant: {
 			browser: cn(
 				// Tabs
-				`flex-row 
-				 items-center
-				 h-10
-				 `,
+				"flex-row",
+				"items-center",
+				"h-10",
+				// TabsList
+				"**:data-[slot=tabs-list]:overflow-x-auto",
+				"**:data-[slot=tabs-list]:divide-x",
+				// TabsTrigger
+				"**:data-[slot=tabs-trigger]:max-w-80",
+				"**:data-[slot=tabs-trigger]:w-60",
+				"**:data-[slot=tabs-trigger]:min-w-40",
+				"**:data-[slot=tabs-trigger]:data-[state=inactive]:text-text-secondary",
+				"**:data-[slot=tabs-trigger]:data-[state=inactive]:border-b-1",
+				"**:data-[slot=tabs-trigger]:data-[state=inactive]:border-b-border-secondary",
+				"**:data-[slot=tabs-trigger]:data-[state=inactive]:pt-[9px]", // TODO: Try to implement this without using pt-[9px].
+			),
+			secondary: cn(
+				// TabsList
+				"**:data-[slot=tabs-list]:h-10",
+				"**:data-[slot=tabs-list]:bg-bg-tertiary",
+				// TabsTrigger
+				"**:data-[slot=tabs-trigger]:h-10",
+				"**:data-[slot=tabs-trigger]:px-3",
+				"**:data-[slot=tabs-trigger]:pb-2",
+				"**:data-[slot=tabs-trigger]:pt-2",
+				"**:data-[slot=tabs-trigger]:text-text-secondary",
+				"**:data-[slot=tabs-trigger]:hover:text-text-primary",
+				"**:data-[slot=tabs-trigger]:data-[state=active]:border-b-2",
+				"**:data-[slot=tabs-trigger]:data-[state=active]:border-b-border-dark",
+				"**:data-[slot=tabs-trigger]:data-[state=active]:text-text-primary",
+			),
+			tertiary: cn(
 				// TabsList
-				`**:data-[slot=tabs-list]:overflow-x-auto
-				 **:data-[slot=tabs-list]:divide-x`,
+				"**:data-[slot=tabs-list]:bg-bg-secondary",
+				"**:data-[slot=tabs-list]:border-b",
+				"**:data-[slot=tabs-list]:border-b-border-separator",
+				"**:data-[slot=tabs-list]:gap-2",
+				"**:data-[slot=tabs-list]:px-4",
+				"**:data-[slot=tabs-list]:py-2",
 				// TabsTrigger
-				`**:data-[slot=tabs-trigger]:max-w-80 
-				 **:data-[slot=tabs-trigger]:min-w-40
-				 **:data-[slot=tabs-trigger]:data-[state=inactive]:border-b-1
-				 **:data-[slot=tabs-trigger]:data-[state=inactive]:border-b-border-secondary
-				 **:data-[slot=tabs-trigger]:data-[state=inactive]:pt-[9px]
-				 `, // TODO: Try to implement this without using pt-[9px].
+				"**:data-[slot=tabs-trigger]:h-7",
+				"**:data-[slot=tabs-trigger]:px-3",
+				"**:data-[slot=tabs-trigger]:rounded",
+				"**:data-[slot=tabs-trigger]:border-b-0",
+				"**:data-[slot=tabs-trigger]:pb-2",
+				"**:data-[slot=tabs-trigger]:pt-2",
+				"**:data-[slot=tabs-trigger]:border",
+				"**:data-[slot=tabs-trigger]:border-transparent",
+				"**:data-[slot=tabs-trigger]:text-text-secondary",
+				"**:data-[slot=tabs-trigger]:hover:text-text-primary",
+				"**:data-[slot=tabs-trigger]:data-[state=active]:bg-bg-primary",
+				"**:data-[slot=tabs-trigger]:data-[state=active]:border-border-secondary",
+				"**:data-[slot=tabs-trigger]:data-[state=active]:text-text-primary",
 			),
 		},
 	},
 });
 
-function Tabs({
+// Context for variant
+const TabsVariantContext = React.createContext<
+	VariantProps<typeof tabsVariants>["variant"] | undefined
+>(undefined);
+
+type TabsProps<T extends string> = Omit<
+	React.ComponentProps<typeof TabsPrimitive.Root> &
+		VariantProps<typeof tabsVariants>,
+	"value" | "defaultValue" | "onValueChange"
+> & {
+	value?: T;
+	defaultValue?: T;
+	onValueChange?: (value: T) => void;
+};
+
+function Tabs<T extends string = string>({
 	className,
 	variant,
 	...props
-}: React.ComponentProps<typeof TabsPrimitive.Root> &
-	VariantProps<typeof tabsVariants>) {
+}: TabsProps<T>) {
+	const tabProps = {
+		"data-slot": "tabs",
+		className: cn(baseTabsStyles, tabsVariants({ variant }), className),
+		...props,
+		onValueChange: (value: string) => props.onValueChange?.(value as T),
+	};
 	return (
-		<TabsPrimitive.Root
-			data-slot="tabs"
-			className={cn("flex flex-col", tabsVariants({ variant }), className)}
-			{...props}
-		/>
+		<TabsVariantContext.Provider value={variant}>
+			<TabsPrimitive.Root {...tabProps} />
+		</TabsVariantContext.Provider>
 	);
 }
 
 export function TabsAddButton(props: React.ComponentProps<typeof Button>) {
 	return (
-		<div className="grow h-full bg-bg-secondary border-l border-b">
+		<div className={tabsAddButtonContainerStyles}>
 			<Button
 				data-slot="tabs-add-button"
 				variant="link"
@@ -59,19 +195,542 @@ export function TabsAddButton(props: React.ComponentProps<typeof Button>) {
 	);
 }
 
+function horizontalScroll(event: React.WheelEvent) {
+	const mode = event.deltaMode;
+	let deltaPx = 0;
+
+	if (mode === 0) {
+		deltaPx = event.deltaY;
+	} else if (mode === 1) {
+		deltaPx = event.deltaY * 160;
+	} else if (mode === 2) {
+		deltaPx = event.currentTarget.clientWidth;
+	}
+
+	const newScrollLeft = event.currentTarget.scrollLeft + deltaPx;
+
+	event.currentTarget.scrollTo({
+		left: newScrollLeft,
+		behavior: "smooth",
+	});
+}
+
+function performHorizontalScroll(
+	tabsListRef: React.RefObject<HTMLDivElement | null>,
+	direction: "left" | "right",
+) {
+	if (!tabsListRef.current) return;
+	const scrollAmount = 160;
+	let newScrollLeft = tabsListRef.current.scrollLeft;
+
+	if (direction === "left") {
+		newScrollLeft -= scrollAmount;
+		newScrollLeft -= newScrollLeft % scrollAmount;
+	} else {
+		newScrollLeft += scrollAmount;
+
+		const rightCoord = newScrollLeft + tabsListRef.current.clientWidth;
+
+		if (rightCoord % scrollAmount !== 0) {
+			newScrollLeft += scrollAmount - (rightCoord % scrollAmount);
+		}
+	}
+
+	tabsListRef.current.scrollTo({
+		left: newScrollLeft,
+		behavior: "smooth",
+	});
+}
+
+type EdgeScrollPosition = "touch" | "depart";
+type FlowType = "overflow" | "underflow";
+
+type TabsListProps = {
+	onLeftEdge?: (position: EdgeScrollPosition) => void;
+	onRightEdge?: (position: EdgeScrollPosition) => void;
+	onFlow?: (flow: FlowType) => void;
+	onResize?: (entries: ResizeObserverEntry[]) => void;
+	onTabChange?: (mutationRecords: MutationRecord[]) => void;
+} & React.ComponentProps<typeof TabsPrimitive.List>;
+
 function TabsList({
 	className,
+	onLeftEdge,
+	onRightEdge,
+	onResize,
+	onFlow,
+	onTabChange,
 	...props
-}: React.ComponentProps<typeof TabsPrimitive.List>) {
+}: TabsListProps) {
+	const tabListRef = React.useRef<HTMLDivElement | null>(null);
+
+	const onLeftEdgeRef = React.useRef(onLeftEdge);
+	React.useEffect(() => {
+		onLeftEdgeRef.current = onLeftEdge;
+	}, [onLeftEdge]);
+
+	const onResizeRef = React.useRef(onResize);
+	React.useEffect(() => {
+		onResizeRef.current = onResize;
+	}, [onResize]);
+
+	const onRightEdgeRef = React.useRef(onRightEdge);
+	React.useEffect(() => {
+		onRightEdgeRef.current = onRightEdge;
+	}, [onRightEdge]);
+
+	const onFlowRef = React.useRef(onFlow);
+	React.useEffect(() => {
+		onFlowRef.current = onFlow;
+	}, [onFlow]);
+
+	const onTabChangeRef = React.useRef(onTabChange);
+	React.useEffect(() => {
+		onTabChangeRef.current = onTabChange;
+	}, [onTabChange]);
+
+	React.useEffect(() => {
+		if (tabListRef.current === null) {
+			return;
+		}
+		const tabList = tabListRef.current;
+
+		let last: {
+			scrollLeft: number;
+			scrollWidth: number;
+			clientWidth: number;
+		} | null = null;
+
+		const handleScroll = () => {
+			if (onLeftEdgeRef.current) {
+				const newState: EdgeScrollPosition =
+					tabList.scrollLeft < 1 ? "touch" : "depart";
+
+				if (last === null) {
+					onLeftEdgeRef.current(newState);
+				} else {
+					const lastState: EdgeScrollPosition =
+						last.scrollLeft < 1 ? "touch" : "depart";
+
+					if (lastState !== newState) {
+						onLeftEdgeRef.current(newState);
+					}
+				}
+			}
+
+			if (onRightEdgeRef.current) {
+				const newState: EdgeScrollPosition =
+					tabList.scrollWidth - tabList.clientWidth - tabList.scrollLeft < 1
+						? "touch"
+						: "depart";
+
+				if (last === null) {
+					onRightEdgeRef.current(newState);
+				} else {
+					const lastState: EdgeScrollPosition =
+						last.scrollWidth - last.clientWidth - last.scrollLeft < 1
+							? "touch"
+							: "depart";
+
+					if (lastState !== newState) {
+						onRightEdgeRef.current(newState);
+					}
+				}
+			}
+
+			if (onFlowRef.current) {
+				const newState: FlowType =
+					tabList.scrollWidth > tabList.clientWidth ? "overflow" : "underflow";
+
+				if (last === null) {
+					onFlowRef.current(newState);
+				} else {
+					const lastState =
+						last.scrollWidth > last.clientWidth ? "overflow" : "underflow";
+					if (lastState !== newState) {
+						onFlowRef.current(newState);
+					}
+				}
+			}
+
+			last = {
+				scrollLeft: tabList.scrollLeft,
+				scrollWidth: tabList.scrollWidth,
+				clientWidth: tabList.clientWidth,
+			};
+		};
+
+		const scrollCallback = (_ev: unknown) => handleScroll();
+		const resizeObserver = new ResizeObserver((entries) => {
+			handleScroll();
+			if (onResizeRef.current) {
+				onResizeRef.current(entries);
+			}
+		});
+		const mutationObserver = new MutationObserver((mutationRecords) => {
+			handleScroll();
+			if (onTabChangeRef.current) {
+				onTabChangeRef.current(mutationRecords);
+			}
+		});
+
+		tabList.addEventListener("scroll", scrollCallback, { passive: true });
+		resizeObserver.observe(tabList);
+		mutationObserver.observe(tabList, { childList: true });
+
+		return () => {
+			tabList.removeEventListener("scroll", scrollCallback);
+			resizeObserver.disconnect();
+			mutationObserver.disconnect();
+		};
+	}, []);
+
 	return (
 		<TabsPrimitive.List
 			data-slot="tabs-list"
 			className={cn("inline-flex w-fit items-center", className)}
 			{...props}
+			ref={(element) => {
+				tabListRef.current = element;
+				if (props.ref !== undefined && props.ref !== null) {
+					if (typeof props.ref === "function") {
+						props.ref(element);
+					} else {
+						props.ref.current = element;
+					}
+				}
+			}}
 		/>
 	);
 }
 
+type TabScrollButtonProps = {
+	disabled: boolean;
+	onClick: () => void;
+};
+
+function TabScrollLeftButton({
+	disabled,
+	onClick,
+}: TabScrollButtonProps): React.ReactElement {
+	return (
+		<Button
+			variant="link"
+			size="small"
+			disabled={disabled}
+			className="h-full border-r border-b bg-bg-secondary rounded-none"
+			onClick={onClick}
+		>
+			<ChevronLeft />
+		</Button>
+	);
+}
+
+function TabScrollRightButton({
+	disabled,
+	onClick,
+}: TabScrollButtonProps): React.ReactElement {
+	return (
+		<Button
+			variant="link"
+			size="small"
+			disabled={disabled}
+			className="h-full border-l border-b bg-bg-secondary rounded-none"
+			onClick={onClick}
+		>
+			<ChevronRight />
+		</Button>
+	);
+}
+
+type DragState = {
+	index: number;
+	startX: number;
+	offsetX: number;
+	currentIndex: number;
+	widths: number[];
+	lefts: number[];
+};
+
+const DRAG_THRESHOLD = 5;
+
+function useTabReorder(
+	onReorder: ((fromIndex: number, toIndex: number) => void) | undefined,
+) {
+	const [drag, setDrag] = React.useState<DragState | null>(null);
+	const dragRef = React.useRef<DragState | null>(null);
+	const pendingRef = React.useRef(false);
+	const itemsRef = React.useRef<(HTMLDivElement | null)[]>([]);
+
+	const handlePointerDown = React.useCallback(
+		(e: React.PointerEvent, index: number) => {
+			if (!onReorder || e.button !== 0) return;
+			const items = itemsRef.current;
+			const widths = items.map((el) => el?.offsetWidth ?? 0);
+			const lefts: number[] = [];
+			let acc = 0;
+			for (const w of widths) {
+				lefts.push(acc);
+				acc += w;
+			}
+			dragRef.current = {
+				index,
+				startX: e.clientX,
+				offsetX: 0,
+				currentIndex: index,
+				widths,
+				lefts,
+			};
+			pendingRef.current = true;
+			(e.target as HTMLElement).setPointerCapture(e.pointerId);
+		},
+		[onReorder],
+	);
+
+	const handlePointerMove = React.useCallback((e: React.PointerEvent) => {
+		const d = dragRef.current;
+		if (!d) return;
+		const dx = e.clientX - d.startX;
+		if (pendingRef.current) {
+			if (Math.abs(dx) < DRAG_THRESHOLD) return;
+			pendingRef.current = false;
+		}
+		const draggedLeft = d.lefts[d.index] ?? 0;
+		const draggedWidth = d.widths[d.index] ?? 0;
+		const draggedRightEdge = draggedLeft + draggedWidth + dx;
+		const draggedLeftEdge = draggedLeft + dx;
+		let newIndex = d.index;
+		const TRIGGER_RATIO = 0.3;
+		for (let i = 0; i < d.lefts.length; i++) {
+			if (i === d.index) continue;
+			const left = d.lefts[i] ?? 0;
+			const width = d.widths[i] ?? 0;
+			if (i > d.index) {
+				// Dragging right: trigger when right edge enters 30% of target
+				if (draggedRightEdge > left + width * TRIGGER_RATIO) newIndex = i;
+			} else {
+				// Dragging left: trigger when left edge enters 30% from right
+				if (draggedLeftEdge < left + width * (1 - TRIGGER_RATIO))
+					newIndex = Math.min(newIndex, i);
+			}
+		}
+		const next: DragState = { ...d, offsetX: dx, currentIndex: newIndex };
+		dragRef.current = next;
+		setDrag(next);
+	}, []);
+
+	const handlePointerUp = React.useCallback(() => {
+		const d = dragRef.current;
+		if (d && !pendingRef.current && d.index !== d.currentIndex) {
+			onReorder?.(d.index, d.currentIndex);
+		}
+		dragRef.current = null;
+		pendingRef.current = false;
+		setDrag(null);
+	}, [onReorder]);
+
+	const getTransform = React.useCallback(
+		(index: number): React.CSSProperties => {
+			if (!drag || pendingRef.current) return {};
+			if (index === drag.index) {
+				return {
+					transform: `translateX(${drag.offsetX}px)`,
+					zIndex: 10,
+					position: "relative",
+					background: "var(--color-bg-primary)",
+					borderLeft: "1px solid var(--color-border-default)",
+				};
+			}
+			const from = drag.index;
+			const to = drag.currentIndex;
+			const draggedWidth = drag.widths[from] ?? 0;
+			if (from < to && index > from && index <= to) {
+				return {
+					transform: `translateX(${-draggedWidth}px)`,
+					transition: "transform 200ms ease",
+				};
+			}
+			if (from > to && index >= to && index < from) {
+				return {
+					transform: `translateX(${draggedWidth}px)`,
+					transition: "transform 200ms ease",
+				};
+			}
+			return { transition: "transform 200ms ease" };
+		},
+		[drag],
+	);
+
+	return {
+		drag,
+		itemsRef,
+		handlePointerDown,
+		handlePointerMove,
+		handlePointerUp,
+		getTransform,
+	};
+}
+
+function TabsBrowserList({
+	className,
+	children,
+	onReorder,
+	...props
+}: React.ComponentProps<typeof TabsPrimitive.List> & {
+	onReorder?: (fromIndex: number, toIndex: number) => void;
+}) {
+	const tabsListRef = React.useRef<HTMLDivElement | null>(null);
+
+	const [showScrollButtons, setShowScrollButtons] = React.useState(false);
+	const [canScrollLeft, setCanScrollLeft] = React.useState(false);
+	const [canScrollRight, setCanScrollRight] = React.useState(false);
+
+	const {
+		drag,
+		itemsRef,
+		handlePointerDown,
+		handlePointerMove,
+		handlePointerUp,
+		getTransform,
+	} = useTabReorder(onReorder);
+
+	const wrappedChildren =
+		onReorder && React.Children.count(children) > 1
+			? React.Children.map(children, (child, index) => (
+					<div
+						ref={(el) => {
+							itemsRef.current[index] = el;
+						}}
+						style={getTransform(index)}
+						onPointerDown={(e) => handlePointerDown(e, index)}
+						onPointerMove={handlePointerMove}
+						onPointerUp={handlePointerUp}
+						className={cn(drag?.index === index && "cursor-grabbing")}
+					>
+						{child}
+					</div>
+				))
+			: children;
+
+	return (
+		<React.Fragment>
+			{showScrollButtons && (
+				<TabScrollLeftButton
+					disabled={!canScrollLeft}
+					onClick={() => performHorizontalScroll(tabsListRef, "left")}
+				/>
+			)}
+
+			<TabsList
+				onLeftEdge={(edgeState) => {
+					if (edgeState === "touch") {
+						setCanScrollLeft(false);
+					} else {
+						setCanScrollLeft(true);
+					}
+				}}
+				onRightEdge={(edgeState) => {
+					if (edgeState === "touch") {
+						setCanScrollRight(false);
+					} else {
+						setCanScrollRight(true);
+					}
+				}}
+				onFlow={(flow) => {
+					if (flow === "overflow") {
+						setShowScrollButtons(true);
+					} else {
+						setShowScrollButtons(false);
+					}
+				}}
+				onResize={() => {
+					tabsListRef.current
+						?.querySelector<HTMLButtonElement>('button[data-state="active"]')
+						?.scrollIntoView();
+				}}
+				onTabChange={(entries) => {
+					if (
+						entries.filter((entry) => entry.addedNodes.length !== 0).length !==
+						0
+					) {
+						tabsListRef.current
+							?.querySelector<HTMLButtonElement>('button[data-state="active"]')
+							?.scrollIntoView();
+					}
+				}}
+				data-slot="tabs-list"
+				className={cn(tabsListStyles, className)}
+				onWheel={(event) => horizontalScroll(event)}
+				{...props}
+				ref={tabsListRef}
+			>
+				{wrappedChildren}
+			</TabsList>
+
+			{showScrollButtons && (
+				<TabScrollRightButton
+					disabled={!canScrollRight}
+					onClick={() => performHorizontalScroll(tabsListRef, "right")}
+				/>
+			)}
+		</React.Fragment>
+	);
+}
+
+export function TabsListDropdown({
+	tabs,
+	handleTabSelect,
+	handleCloseTab,
+}: {
+	tabs: { id: string; content: React.ReactNode }[];
+	handleTabSelect?: (tabId: string) => void;
+	handleCloseTab?: (tabId: string) => void;
+}) {
+	const [isMenuOpen, setIsMenuOpen] = React.useState(false);
+	return (
+		<Popover open={isMenuOpen} onOpenChange={setIsMenuOpen}>
+			<PopoverTrigger asChild>
+				<Button variant="link" className="bg-bg-secondary h-full border-b pr-6">
+					<ChevronDownIcon className="size-4" />
+				</Button>
+			</PopoverTrigger>
+			<PopoverContent className="w-80 p-0 mr-3" align="end">
+				<Command>
+					<CommandInput placeholder="Search tabs..." />
+					<CommandList>
+						<CommandEmpty>Not tabs found.</CommandEmpty>
+						{tabs.map((tab) => (
+							<CommandItem
+								key={tab.id}
+								onSelect={() => {
+									handleTabSelect?.(tab.id);
+									setIsMenuOpen(false);
+								}}
+								className="group flex items-center justify-between"
+							>
+								{tab.content}
+								{tabs.length > 1 && (
+									<Button
+										variant="ghost"
+										size="small"
+										className="opacity-0 group-hover:opacity-100 transition-opacity p-1 ml-2"
+										onClick={(e) => {
+											e.stopPropagation();
+											handleCloseTab?.(tab.id);
+										}}
+									>
+										<X className="size-3" />
+									</Button>
+								)}
+							</CommandItem>
+						))}
+					</CommandList>
+				</Command>
+			</PopoverContent>
+		</Popover>
+	);
+}
+
 function TabsTrigger({
 	className,
 	onClose,
@@ -79,19 +738,18 @@ function TabsTrigger({
 }: React.ComponentProps<typeof TabsPrimitive.Trigger> & {
 	onClose?: (value: string) => void;
 }) {
+	const variant = React.useContext(TabsVariantContext);
+	const isSecondary = variant === "secondary";
+	const isTertiary = variant === "tertiary";
+
 	return (
 		<TabsPrimitive.Trigger
 			data-slot="tabs-trigger"
 			className={cn(
-				"group/tabs-trigger",
-				"box-border h-10 typo-body px-3 pb-2 pt-2.5 cursor-pointer text-text-tertiary data-[state=active]:text-text-primary",
-				"data-[state=active]:border-b-border-brand border-b-2 border-b-transparent hover:text-text-tertiary-hover focus-visible:border-ring",
-				"focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:text-muted-foreground",
-				"inline-flex flex-1 items-center justify-center whitespace-nowrap transition-[color,box-shadow]",
-				"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",
-				"hover:bg-bg-secondary/60",
-				onClose ? "justify-between" : "",
+				baseTabsTriggerStyles,
+				onClose ? "justify-between" : "justify-start",
+				isSecondary && ["body14", "data-[state=active]:body14bold"],
+				isTertiary && ["typo-body", "data-[state=active]:typo-label"],
 				className,
 			)}
 			{...props}
@@ -106,7 +764,7 @@ function TabsTrigger({
 					}}
 					variant="link"
 					size="small"
-					className="p-0 ml-2"
+					className="p-0 ml-2 opacity-0 group-hover/tabs-trigger:opacity-100 transition-opacity"
 					asChild
 				>
 					<span>
@@ -125,10 +783,10 @@ function TabsContent({
 	return (
 		<TabsPrimitive.Content
 			data-slot="tabs-content"
-			className={cn("flex-1 outline-none", className)}
+			className={cn(tabsContentStyles, className)}
 			{...props}
 		/>
 	);
 }
 
-export { Tabs, TabsList, TabsTrigger, TabsContent };
+export { Tabs, TabsList, TabsTrigger, TabsContent, TabsBrowserList };