1<script lang="ts">
 2	import { ScrollArea as ScrollAreaPrimitive } from 'bits-ui';
 3	import { Scrollbar } from './index.js';
 4	import { cn, type WithoutChild } from '$lib/components/ui/utils';
 5
 6	let {
 7		ref = $bindable(null),
 8		class: className,
 9		orientation = 'vertical',
10		scrollbarXClasses = '',
11		scrollbarYClasses = '',
12		children,
13		...restProps
14	}: WithoutChild<ScrollAreaPrimitive.RootProps> & {
15		orientation?: 'vertical' | 'horizontal' | 'both' | undefined;
16		scrollbarXClasses?: string | undefined;
17		scrollbarYClasses?: string | undefined;
18	} = $props();
19</script>
20
21<ScrollAreaPrimitive.Root
22	bind:ref
23	data-slot="scroll-area"
24	class={cn('relative', className)}
25	{...restProps}
26>
27	<ScrollAreaPrimitive.Viewport
28		data-slot="scroll-area-viewport"
29		class="size-full rounded-[inherit] ring-ring/10 outline-ring/50 transition-[color,box-shadow] focus-visible:ring-4 focus-visible:outline-1 dark:ring-ring/20 dark:outline-ring/40"
30	>
31		{@render children?.()}
32	</ScrollAreaPrimitive.Viewport>
33	{#if orientation === 'vertical' || orientation === 'both'}
34		<Scrollbar orientation="vertical" class={scrollbarYClasses} />
35	{/if}
36	{#if orientation === 'horizontal' || orientation === 'both'}
37		<Scrollbar orientation="horizontal" class={scrollbarXClasses} />
38	{/if}
39	<ScrollAreaPrimitive.Corner />
40</ScrollAreaPrimitive.Root>