<script lang="ts" module>
import { tv, type VariantProps } from 'tailwind-variants';
export const tabsListVariants = tv({
base: 'rounded-lg p-[3px] group-data-horizontal/tabs:h-8 data-[variant=line]:rounded-none group/tabs-list inline-flex w-fit items-center justify-center text-muted-foreground group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col',
variants: {
variant: {
default: 'cn-tabs-list-variant-default bg-muted',
line: 'cn-tabs-list-variant-line gap-1 bg-transparent',
},
},
defaultVariants: {
variant: 'default',
},
});
export type TabsListVariant = VariantProps<typeof tabsListVariants>['variant'];
</script>
<script lang="ts">
import { Tabs as TabsPrimitive } from 'bits-ui';
import { cn } from '#lib/utils.js';
let {
ref = $bindable(null),
variant = 'default',
class: className,
...restProps
}: TabsPrimitive.ListProps & {
variant?: TabsListVariant;
} = $props();
</script>
<TabsPrimitive.List
bind:ref
data-slot="tabs-list"
data-variant={variant}
class={cn(tabsListVariants({ variant }), className)}
{...restProps}
/>