Scroll Area Glass

1/**
2 * ScrollAreaGlass Component
3 *
4 * Custom scrollable container with glass-themed scrollbars.
5 * Built on @radix-ui/react-scroll-area for cross-browser consistency.
6 *
7 * ## Features
8 * - Custom glass-styled scrollbars with theme-aware colors
9 * - Horizontal, vertical, or bidirectional scrolling support
10 * - Auto-hide scrollbars with smooth fade transitions
11 * - Cross-browser consistent scrollbar behavior via Radix UI
12 * - Theme-aware styling with CSS variables
13 * - Focus-visible states for keyboard navigation
14 * - Compound component API for advanced use cases
15 * - WCAG 2.1 AA compliant keyboard and screen reader support
16 *
17 * ## Sub-Components
18 * - `ScrollAreaGlass` - Main scroll container (Root + Viewport)
19 * - `ScrollBarGlass` - Individual scrollbar component
20 * - `ScrollAreaGlassViewport` - Inner viewport for manual composition
21 *
22 * ## CSS Variables
23 * Customize scrollbar appearance via theme CSS variables:
24 * - `--scroll-thumb-bg` - Scrollbar thumb background color
25 * - `--scroll-thumb-hover-bg` - Scrollbar thumb hover background color
26 * - `--scroll-thumb-border` - Scrollbar thumb border color
27 * - `--scroll-track-bg` - Scrollbar track/corner background color
28 *
29 * @example Vertical scrolling (default)
30 * ```tsx
31 * import { ScrollAreaGlass } from 'shadcn-glass-ui'
32 *
33 * function VerticalList() {
34 *   return (
35 *     <ScrollAreaGlass className="h-[400px] w-64">
36 *       <div className="space-y-2 p-4">
37 *         {items.map(item => (
38 *           <div key={item.id} className="p-2 rounded bg-[var(--card-bg)]">
39 *             {item.name}
40 *           </div>
41 *         ))}
42 *       </div>
43 *     </ScrollAreaGlass>
44 *   )
45 * }
46 * ```
47 *
48 * @example Horizontal scrolling
49 * ```tsx
50 * <ScrollAreaGlass className="w-96" orientation="horizontal">
51 *   <div className="flex space-x-4 p-4">
52 *     {cards.map(card => (
53 *       <div key={card.id} className="shrink-0 w-[200px]">
54 *         <Card {...card} />
55 *       </div>
56 *     ))}
57 *   </div>
58 * </ScrollAreaGlass>
59 * ```
60 *
61 * @example Both directions (2D scrolling)
62 * ```tsx
63 * <ScrollAreaGlass
64 *   className="h-[400px] w-full"
65 *   orientation="both"
66 * >
67 *   <div className="min-w-[800px] p-4">
68 *     <LargeDataTable />
69 *   </div>
70 * </ScrollAreaGlass>
71 * ```
72 *
73 * @example Inside a card with header and footer
74 * ```tsx
75 * function ActivityCard() {
76 *   return (
77 *     <div className="rounded-xl border border-[var(--card-border)] bg-[var(--card-bg)]">
78// … truncated