1<script lang="ts">
2 import { ScrollArea as ScrollAreaPrimitive } from 'bits-ui';
3 import { cn, type WithoutChild } from '$lib/components/ui/utils';
4
5 let {
6 ref = $bindable(null),
7 class: className,
8 orientation = 'vertical',
9 children,
10 ...restProps
11 }: WithoutChild<ScrollAreaPrimitive.ScrollbarProps> = $props();
12</script>
13
14<ScrollAreaPrimitive.Scrollbar
15 bind:ref
16 data-slot="scroll-area-scrollbar"
17 {orientation}
18 class={cn(
19 'flex touch-none p-px transition-colors select-none',
20 orientation === 'vertical' && 'h-full w-2.5 border-l border-l-transparent',
21 orientation === 'horizontal' && 'h-2.5 flex-col border-t border-t-transparent',
22 className
23 )}
24 {...restProps}
25>
26 {@render children?.()}
27 <ScrollAreaPrimitive.Thumb
28 data-slot="scroll-area-thumb"
29 class="relative flex-1 rounded-full bg-border"
30 />
31</ScrollAreaPrimitive.Scrollbar>