Tabs

1// Base UI base tabs — TRANSCRIBED from upstream's `bases/base-ui/ui/tabs.tsx` (maintainer-supplied),
2// class strings verbatim. Runs on @octanejs/base-ui's `Tabs`, which was ported for this family:
3// Root / List / Tab / Panel.
4//
5// ONE DEPARTURE FROM THE SOURCE, FORCED BY A VERSION SKEW. Upstream writes its orientation variants
6// as `data-horizontal:` / `data-vertical:` — bare attributes. The pinned @octanejs/base-ui (v1.6.0)
7// converts the orientation state to `data-orientation="horizontal" | "vertical"` instead, so those
8// utilities would match nothing: the root would never switch to a column, and every
9// `group-data-horizontal/tabs:` and `group-data-vertical/tabs:` selector on the trigger would be
10// dead. They are written as `data-[orientation=…]:` here.
11//
12// This is the SAME skew the slider hit, and it is not a porting mistake in either layer — shadcn's
13// Base UI sources target a newer Base UI than the pin this package binds. The primitive stays
14// faithful to its pin; the adaptation belongs here. When the binding moves to a release that emits
15// the bare attributes, these revert to upstream's spelling.
16//
17// `data-active` on the trigger needs no such treatment: the pin emits it exactly as upstream's
18// classes expect (verified by rendering).
19//
20// Octane adaptations: no `"use client"`.
21import { cva, type VariantProps } from 'class-variance-authority';
22import { Tabs as TabsPrimitive } from '@octanejs/base-ui/tabs';
23 
24import { cn } from '@/lib/utils';
25 
26type Props = { className?: string } & Record<string, unknown>;
27 
28export interface TabsProps extends Props {
29	orientation?: 'horizontal' | 'vertical';
30}
31 
32export function Tabs({ className, orientation = 'horizontal', ...props }: TabsProps) @{
33	<TabsPrimitive.Root
34		data-slot="tabs"
35		data-orientation={orientation}
36		orientation={orientation}
37		className={cn('group/tabs flex gap-2 data-[orientation=horizontal]:flex-col', className)}
38		{...props}
39	/>
40}
41 
42export const tabsListVariants = cva(
43	'group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-[orientation=horizontal]/tabs:h-8 group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col data-[variant=line]:rounded-none',
44	{
45		variants: {
46			variant: {
47				default: 'bg-muted',
48				line: 'gap-1 bg-transparent',
49			},
50		},
51		defaultVariants: {
52			variant: 'default',
53		},
54	},
55);
56 
57export interface TabsListProps extends Props {
58// … truncated