Scroll Area

1"use client";
2 
3import "./scroll-area.css";
4import { ScrollArea as BaseScrollArea } from "@base-ui/react/scroll-area";
5import type React from "react";
6import { cn } from "tailwind-variants";
7 
8import { ScrollAreaContext, useScrollAreaContext } from "./scroll-area.context";
9import { scrollAreaVariants, type ScrollAreaVariants } from "./scroll-area.variants";
10 
11export type ScrollAreaProps = ScrollAreaVariants & React.ComponentProps<typeof BaseScrollArea.Root>;
12 
13export const ScrollAreaRoot = ({ children, className, size, ...props }: ScrollAreaProps) => {
14  const slots = scrollAreaVariants({ size });
15 
16  return (
17    <ScrollAreaContext.Provider value={{ slots }}>
18      <BaseScrollArea.Root className={cn(slots.root(), className)} {...props}>
19        {children}
20      </BaseScrollArea.Root>
21    </ScrollAreaContext.Provider>
22  );
23};
24 
25export type ScrollAreaViewportProps = React.ComponentProps<typeof BaseScrollArea.Viewport>;
26 
27export const ScrollAreaViewport = ({ className, ...props }: ScrollAreaViewportProps) => {
28  const { slots } = useScrollAreaContext();
29  return <BaseScrollArea.Viewport className={cn(slots.viewport(), className)} {...props} />;
30};
31 
32export type ScrollAreaContentProps = React.ComponentProps<typeof BaseScrollArea.Content>;
33 
34export const ScrollAreaContent = ({ className, ...props }: ScrollAreaContentProps) => {
35  const { slots } = useScrollAreaContext();
36  return <BaseScrollArea.Content className={cn(slots.content(), className)} {...props} />;
37};
38 
39export type ScrollAreaScrollbarProps = React.ComponentProps<typeof BaseScrollArea.Scrollbar>;
40 
41export const ScrollAreaScrollbar = ({ className, ...props }: ScrollAreaScrollbarProps) => {
42  const { slots } = useScrollAreaContext();
43  return <BaseScrollArea.Scrollbar className={cn(slots.scrollbar(), className)} {...props} />;
44};
45 
46export type ScrollAreaThumbProps = React.ComponentProps<typeof BaseScrollArea.Thumb>;
47 
48export const ScrollAreaThumb = ({ className, ...props }: ScrollAreaThumbProps) => {
49  const { slots } = useScrollAreaContext();
50  return <BaseScrollArea.Thumb className={cn(slots.thumb(), className)} {...props} />;
51};
52 
53export type ScrollAreaCornerProps = React.ComponentProps<typeof BaseScrollArea.Corner>;
54 
55export const ScrollAreaCorner = ({ className, ...props }: ScrollAreaCornerProps) => {
56  const { slots } = useScrollAreaContext();
57  return <BaseScrollArea.Corner className={cn(slots.corner(), className)} {...props} />;
58};