Scroll Area

import { defineConfig, type VariantProps } from 'cva';import { twMerge } from 'tailwind-merge';export const {  compose,  cva,  cx: cn,} = defineConfig({  hooks: {    onComplete: (className: string) => twMerge(className),  },});export type { VariantProps };

'use client';import { ScrollArea as ScrollAreaPrimitive } from '@base-ui/react/scroll-area';import type * as React from 'react';import { cn } from '@/lib/utils';/** * Groups all parts of the scroll area. * Renders a `<div>` element. * * Documentation: [Caprice UI Scroll Area](https://caprice-ui.com/docs/components/scroll-area) * * API Reference: [Base UI Scroll Area](https://base-ui.com/react/components/scroll-area#root) */export namespace ScrollArea {  export type State = ScrollAreaPrimitive.Root.State;  export type Props = React.ComponentProps<typeof ScrollAreaPrimitive.Root>;}export function ScrollArea({ className, children, ...props }: ScrollArea.Props) {  return (    <ScrollAreaPrimitive.Root className={cn('', className)} data-slot="scroll-area" {...props}>      <ScrollAreaPrimitive.Viewport className="" data-slot="scroll-area-viewport">        {children}      </ScrollAreaPrimitive.Viewport>      <ScrollBar data-slot="scroll-area-scrollbar" />      <ScrollAreaPrimitive.Corner data-slot="scroll-area-corner" />    </ScrollAreaPrimitive.Root>  );}/** * A vertical or horizontal scrollbar for the scroll area. * Renders a `<div>` element. * * Documentation: [Caprice UI Scroll Area](https://caprice-ui.com/docs/components/scroll-area) * * API Reference: [Base UI Scroll Area](https://base-ui.com/react/components/scroll-area#scrollbar) */export namespace ScrollBar {  export type State = ScrollAreaPrimitive.Scrollbar.State;  export type Props = React.ComponentProps<typeof ScrollAreaPrimitive.Scrollbar>;}export function ScrollBar({ className, orientation = 'vertical', ...props }: ScrollBar.Props) {  return (    <ScrollAreaPrimitive.Scrollbar      className={cn('', className)}      data-slot="scroll-area-scrollbar"      orientation={orientation}      {...props}    >      <ScrollAreaPrimitive.Thumb className="" data-slot="scroll-area-thumb" />    </ScrollAreaPrimitive.Scrollbar>  );}