Scroll Area

1"use client";
2 
3import { ScrollArea as ScrollAreaPrimitive } from "radix-ui";
4import * as React from "react";
5 
6import { type MaterialAxisProps, materialSurface, splitAxisProps } from "@/lib/material";
7import { cn } from "@/lib/utils";
8 
9/* Role: bordered adaptive glass. */
10const ROLE = {
11  border: true,
12};
13 
14const ScrollArea = React.forwardRef<
15  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
16  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> &
17    MaterialAxisProps & {
18      variant?: "default" | "glass";
19    }
20>(({ className, variant = "glass", children, ...props }, ref) => {
21  const [axes, rest] = splitAxisProps(props);
22  /* Variant classes carry BEHAVIOR only; the surface comes from materialSurface. */
23  const variants = {
24    default: "relative overflow-hidden",
25    glass: "relative overflow-hidden rounded-lg",
26  };
27 
28  const m = materialSurface(variant === "default" ? null : ROLE, axes);
29 
30  return (
31    <ScrollAreaPrimitive.Root
32      ref={ref}
33      data-slot="scroll-area"
34      data-material={m?.["data-material"]}
35      className={cn(m?.className, variants[variant], className)}
36      {...rest}
37    >
38      <ScrollAreaPrimitive.Viewport
39        data-slot="scroll-area-viewport"
40        className="h-full w-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1"
41      >
42        {children}
43      </ScrollAreaPrimitive.Viewport>
44      <ScrollBar />
45      <ScrollAreaPrimitive.Corner />
46    </ScrollAreaPrimitive.Root>
47  );
48});
49ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
50 
51const ScrollBar = React.forwardRef<
52  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
53  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
54>(({ className, orientation = "vertical", ...props }, ref) => (
55  <ScrollAreaPrimitive.ScrollAreaScrollbar
56    ref={ref}
57    data-slot="scroll-area-scrollbar"
58    orientation={orientation}
59    className={cn(
60      "flex touch-none select-none transition-colors",
61      orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent p-[1px]",
62      orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent p-[1px]",
63      className,
64    )}
65    {...props}
66  >
67    <ScrollAreaPrimitive.ScrollAreaThumb data-slot="scroll-area-thumb" className="relative flex-1 rounded-full bg-border" />
68  </ScrollAreaPrimitive.ScrollAreaScrollbar>
69));
70// … truncated