Scroll Area

1import { ScrollArea as ScrollAreaPrimitive } from "@base-ui/react/scroll-area"
2 
3import { cn } from "@/registry/lib/surface"
4 
5function ScrollArea({
6  className,
7  children,
8  ...props
9}: ScrollAreaPrimitive.Root.Props) {
10  return (
11    <ScrollAreaPrimitive.Root
12      data-slot="scroll-area"
13      className={cn("relative", className)}
14      {...props}
15    >
16      <ScrollAreaPrimitive.Viewport
17        data-slot="scroll-area-viewport"
18        className="size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:outline focus-visible:outline-offset-2 focus-visible:outline-ring"
19      >
20        {children}
21      </ScrollAreaPrimitive.Viewport>
22      <ScrollBar />
23      <ScrollAreaPrimitive.Corner />
24    </ScrollAreaPrimitive.Root>
25  )
26}
27 
28function ScrollBar({
29  className,
30  orientation = "vertical",
31  ...props
32}: ScrollAreaPrimitive.Scrollbar.Props) {
33  return (
34    <ScrollAreaPrimitive.Scrollbar
35      data-slot="scroll-area-scrollbar"
36      data-orientation={orientation}
37      orientation={orientation}
38      className={cn(
39        "flex touch-none p-px transition-colors select-none data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent",
40        className
41      )}
42      {...props}
43    >
44      <ScrollAreaPrimitive.Thumb
45        data-slot="scroll-area-thumb"
46        className="relative flex-1 rounded-full bg-border"
47      />
48    </ScrollAreaPrimitive.Scrollbar>
49  )
50}
51 
52export { ScrollArea, ScrollBar }