"use client" import * as React from "react" import { ScrollArea as ScrollAreaPrimitive } from "@base-ui/react/scroll-area" import { cn } from "@/lib/utils" import { ScrollArea as NativeScrollArea, ScrollBar, } from "@/components/ui/scroll-area" type ScrollAreaProps = ScrollAreaPrimitive.Root.Props & { orientation?: "vertical" | "horizontal" | "both" scrollFade?: boolean scrollbarGutter?: boolean scrollbarOverflowOnly?: boolean viewportClassName?: string viewportProps?: ScrollAreaPrimitive.Viewport.Props viewportRef?: React.Ref } export function ScrollArea({ className, children, orientation = "both", scrollFade = false, scrollbarGutter = false, scrollbarOverflowOnly = false, viewportClassName, viewportProps, viewportRef, ...props }: ScrollAreaProps) { const { className: viewportPropsClassName, ref: viewportPropsRef, ...resolvedViewportProps } = viewportProps ?? {} const composedViewportRef = React.useMemo( () => composeRefs(viewportPropsRef, viewportRef), [viewportPropsRef, viewportRef] ) if ( !viewportProps && !viewportRef && !viewportClassName && !scrollFade && !scrollbarGutter && !scrollbarOverflowOnly ) { return ( [data-orientation=vertical]]:hidden", className )} > {children} {orientation !== "vertical" ? ( ) : null} ) } return ( {children} {orientation !== "horizontal" ? ( ) : null} {orientation !== "vertical" ? ( ) : null} {orientation === "both" ? : null} ) } export function ScrollAreaContent(props: ScrollAreaPrimitive.Content.Props) { return } function composeRefs(...refs: Array | undefined>) { return (node: T | null) => { for (const ref of refs) { if (!ref) continue if (typeof ref === "function") ref(node) else ref.current = node } } }