Scroll Area

1import { ScrollArea as ScrollAreaPrimitive } from "@base-ui/react/scroll-area";
2
3import { cn } from "@/lib/classes";
4
5interface ScrollAreaProps extends ScrollAreaPrimitive.Root.Props {
6  orientation?: "horizontal" | "vertical" | "both";
7  scrollShadow?: "vertical" | "horizontal" | "both" | "none";
8}
9
10function ScrollArea({
11  className,
12  orientation = "vertical",
13  scrollShadow = "none",
14  children,
15  ...props
16}: ScrollAreaProps) {
17  return (
18    <ScrollAreaPrimitive.Root className="min-h-0" {...props}>
19      <ScrollAreaPrimitive.Viewport
20        data-slot="scroll-area-viewport"
21        className={cn(
22          "border border-border",
23          "size-full overscroll-contain rounded-[inherit] outline-none transition-shadow focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background",
24          className
25        )}
26      >
27        <div
28          data-slot="scroll-area-vertical-shadow"
29          className={cn(
30            scrollShadow === "vertical" || scrollShadow === "both"
31              ? "block"
32              : "hidden",
33            [
34              "absolute inset-0 pointer-events-none",
35              "before:content-[''] after:content-[''] before:block after:block before:absolute after:absolute before:left-0 after:left-0 before:w-full after:w-full before:pointer-events-none after:pointer-events-none",
36              "before:rounded-md before:rounded-b-none after:rounded-md after:rounded-t-none",
37              "before:transition-[height] after:transition-[height] before:duration-100 after:duration-100 before:ease-out after:ease-out",
38              "before:[--scroll-area-overflow-y-start:inherit]",
39              "after:[--scroll-area-overflow-y-end:inherit]",
40              "before:top-0 after:bottom-0 [--bg:var(--background)] before:bg-[linear-gradient(to_bottom,var(--bg),transparent)] after:bg-[linear-gradient(to_top,var(--bg),transparent)] before:h-[min(40px,var(--scroll-area-overflow-y-start))] after:h-[min(40px,var(--scroll-area-overflow-y-end,40px))]",
41            ]
42          )}
43          style={
44            {
45              "--scroll-area-overflow-y-start": "inherit",
46              "--scroll-area-overflow-y-end": "inherit",
47            } as React.CSSProperties
48          }
49        />
50        <div
51          data-slot="scroll-area-horizontal-shadow"
52          className={cn(
53            scrollShadow === "horizontal" || scrollShadow === "both"
54// … truncated