Scroll Area

1"use client";
2 
3import * as React from "react";
4import { cn } from "@/lib/utils";
5 
6/* ================================================================== */
7/*  SCROLL AREA — Semantic, theme-aware scrollbar wrapper              */
8/* ================================================================== */
9 
10export interface ScrollAreaProps extends React.HTMLAttributes<HTMLDivElement> {
11  /** Maximum height before scrolling kicks in */
12  maxHeight?: string | number;
13  /** Orientation of the scrollbar */
14  orientation?: "vertical" | "horizontal" | "both";
15  /** Scrollbar size: track + thumb width / height */
16  scrollbarSize?: "sm" | "md" | "lg";
17}
18 
19/**
20 * Theme-aware scroll area with a soft scrollbar track and thumb.
21 *
22 * Uses pure CSS `scrollbar-*` properties (supported in Chrome 121+ / Firefox 64+)
23 * with a fallback for webkit browsers.
24 */
25const ScrollArea = React.forwardRef<HTMLDivElement, ScrollAreaProps>(
26  (
27    {
28      className,
29      children,
30      maxHeight = 320,
31      orientation = "vertical",
32      scrollbarSize = "md",
33      style,
34      ...props
35    },
36    ref,
37  ) => {
38    const sizeMap = { sm: 6, md: 10, lg: 14 };
39    const sz = sizeMap[scrollbarSize];
40 
41    const overflowClass =
42      orientation === "horizontal"
43        ? "overflow-x-auto overflow-y-hidden"
44        : orientation === "both"
45          ? "overflow-auto"
46          : "overflow-y-auto overflow-x-hidden";
47 
48    return (
49      <div
50        ref={ref}
51        data-slot="scroll-area"
52        data-orientation={orientation}
53        data-scrollbar-size={scrollbarSize}
54        className={cn("poyraz-scroll-area relative", overflowClass, className)}
55        style={
56          {
57            maxHeight: typeof maxHeight === "number" ? `${maxHeight}px` : maxHeight,
58            "--sb-size": `${sz}px`,
59            ...style,
60          } as React.CSSProperties
61        }
62        {...props}
63      >
64        {children}
65 
66        {/* Inline style block — scoped to this instance via the class name */}
67        <style
68          dangerouslySetInnerHTML={{
69            __html: `
70/* ── Modern standard ─────────────────────────────── */
71.poyraz-scroll-area {
72  scrollbar-width: thin;
73  scrollbar-color: var(--poyraz-input) transparent;
74}
75 
76/* ── Webkit (Chrome, Safari, Edge) ───────────────── */
77.poyraz-scroll-area::-webkit-scrollbar {
78  width: var(--sb-size, 10px);
79  height: var(--sb-size, 10px);
80}
81 
82// … truncated