1import * as React from "react"
 2import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
 3
 4import { cn } from "@marzneshin/utils"
 5
 6const ScrollArea = React.forwardRef<
 7  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
 8  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
 9>(({ className, children, ...props }, ref) => (
10  <ScrollAreaPrimitive.Root
11    ref={ref}
12    className={cn("relative overflow-hidden", className)}
13    {...props}
14  >
15    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
16      {children}
17    </ScrollAreaPrimitive.Viewport>
18    <ScrollBar />
19    <ScrollAreaPrimitive.Corner />
20  </ScrollAreaPrimitive.Root>
21))
22ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
23
24const ScrollBar = React.forwardRef<
25  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
26  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
27>(({ className, orientation = "vertical", ...props }, ref) => (
28  <ScrollAreaPrimitive.ScrollAreaScrollbar
29    ref={ref}
30    orientation={orientation}
31    className={cn(
32      "flex touch-none select-none transition-colors",
33      orientation === "vertical" &&
34        "h-full w-2.5 border-l border-l-transparent p-[1px]",
35      orientation === "horizontal" &&
36        "h-2.5 flex-col border-t border-t-transparent p-[1px]",
37      className
38    )}
39    {...props}
40  >
41    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
42  </ScrollAreaPrimitive.ScrollAreaScrollbar>
43))
44ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
45
46export { ScrollArea, ScrollBar }