scroll-area

1import * as React from "react"
2import { ScrollArea as BaseScrollArea } from "@base-ui/react/scroll-area"
3 
4import { cn } from "@/lib/utils"
5 
6function ScrollArea({
7	className,
8	children,
9	orientation,
10	...props
11}: React.ComponentProps<typeof BaseScrollArea.Root> & {
12	orientation?: "horizontal" | "vertical"
13}) {
14	return (
15		<BaseScrollArea.Root
16			data-slot="scroll-area"
17			className={cn("relative", className)}
18			{...props}
19		>
20			<BaseScrollArea.Viewport
21				data-slot="scroll-area-viewport"
22				className="focus-visible:ring-ring/50 size-full overscroll-contain rounded-[inherit] transition-[color,box-shadow] outline-none [--scroll-area-thumb-bg:inherit] [--scroll-area-thumb-hover-bg:inherit] focus-visible:ring-[3px] focus-visible:outline"
23			>
24				{children}
25			</BaseScrollArea.Viewport>
26			<ScrollBar orientation={orientation} />
27			<BaseScrollArea.Corner />
28		</BaseScrollArea.Root>
29	)
30}
31 
32function ScrollBar({
33	className,
34	orientation = "vertical",
35	...props
36}: React.ComponentProps<typeof BaseScrollArea.Scrollbar>) {
37	return (
38		<BaseScrollArea.Scrollbar
39			data-slot="scroll-area-scrollbar"
40			orientation={orientation}
41			className={cn(
42				"m-1 flex touch-none p-px opacity-0 transition-[border-color,opacity] delay-200 select-none data-hovering:opacity-100 data-hovering:delay-0 data-hovering:duration-100 data-scrolling:opacity-100 data-scrolling:delay-0 data-scrolling:duration-100",
43				orientation === "vertical" && "w-2.5 border-l border-l-transparent",
44				orientation === "horizontal" &&
45					"h-2.5 flex-col border-t border-t-transparent",
46				className
47			)}
48			{...props}
49		>
50			<BaseScrollArea.Thumb
51				data-slot="scroll-area-thumb"
52				className="bg-border relative flex-1 rounded-full"
53			/>
54		</BaseScrollArea.Scrollbar>
55	)
56}
57 
58export { ScrollArea }