Scroll Area

import { defineConfig, getSchema, type VariantProps } from 'cva';
import { twMerge } from 'tailwind-merge';

export const { cva, cx: cn } = defineConfig({
  hooks: {
    onComplete: (className: string) => twMerge(className),
  },
});

export type { VariantProps };
export { getSchema };

'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>
  );
}