scroll-area

1import { cn } from "~/lib/utils.ts";
2 
3import { type Component, type ComponentProps, splitProps } from "solid-js";
4 
5// Kobalte ships no scroll-area primitive, so this follows upstream's
6// react-aria base rather than the radix one: the native scrollbar is styled
7// with scrollbar-width and scrollbar-color instead of a rendered viewport,
8// scrollbar and thumb. There is no ScrollBar export for the same reason.
9const ScrollArea: Component<ComponentProps<"div">> = (props) => {
10  const [local, others] = splitProps(props, ["class"]);
11 
12  return (
13    <div
14      data-slot="scroll-area"
15      class={cn(
16        "[scrollbar-color:var(--color-border)_transparent] [scrollbar-width:thin] relative overflow-auto outline-none focus-visible:outline-1 focus-visible:ring-ring/50 focus-visible:ring-[3px]",
17        local.class,
18      )}
19      {...others}
20    />
21  );
22};
23 
24export { ScrollArea };