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('relative', className)}      data-slot="scroll-area"      {...props}    >      <ScrollAreaPrimitive.Viewport        className="size-full rounded-[inherit] outline-none transition-[color,box-shadow] focus-visible:outline-1 focus-visible:ring-[3px] focus-visible:ring-ring/50"        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(        'flex touch-none select-none p-px transition-colors',        orientation === 'vertical' && 'h-full w-2.5 border-l border-l-transparent',        orientation === 'horizontal' && 'h-2.5 flex-col border-t border-t-transparent',        className      )}      data-slot="scroll-area-scrollbar"      orientation={orientation}      {...props}    >      <ScrollAreaPrimitive.Thumb        className="relative flex-1 rounded-full bg-ring"        data-slot="scroll-area-thumb"      />    </ScrollAreaPrimitive.Scrollbar>  );}