Scroll Area

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