{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "scroll-area-glass",
  "type": "registry:ui",
  "title": "Scroll Area Glass",
  "description": "Custom scrollable container with glass-themed scrollbars.\n * Built on @radix-ui/react-scroll-area for cross-browser consistency.\n *\n * ## Features",
  "dependencies": [
    "@radix-ui/react-scroll-area",
    "react",
    "shadcn-glass-ui"
  ],
  "registryDependencies": [
    "cn"
  ],
  "files": [
    {
      "path": "components/glass/ui/scroll-area-glass.tsx",
      "type": "registry:component",
      "content": "/**\n * ScrollAreaGlass Component\n *\n * Custom scrollable container with glass-themed scrollbars.\n * Built on @radix-ui/react-scroll-area for cross-browser consistency.\n *\n * ## Features\n * - Custom glass-styled scrollbars with theme-aware colors\n * - Horizontal, vertical, or bidirectional scrolling support\n * - Auto-hide scrollbars with smooth fade transitions\n * - Cross-browser consistent scrollbar behavior via Radix UI\n * - Theme-aware styling with CSS variables\n * - Focus-visible states for keyboard navigation\n * - Compound component API for advanced use cases\n * - WCAG 2.1 AA compliant keyboard and screen reader support\n *\n * ## Sub-Components\n * - `ScrollAreaGlass` - Main scroll container (Root + Viewport)\n * - `ScrollBarGlass` - Individual scrollbar component\n * - `ScrollAreaGlassViewport` - Inner viewport for manual composition\n *\n * ## CSS Variables\n * Customize scrollbar appearance via theme CSS variables:\n * - `--scroll-thumb-bg` - Scrollbar thumb background color\n * - `--scroll-thumb-hover-bg` - Scrollbar thumb hover background color\n * - `--scroll-thumb-border` - Scrollbar thumb border color\n * - `--scroll-track-bg` - Scrollbar track/corner background color\n *\n * @example Vertical scrolling (default)\n * ```tsx\n * import { ScrollAreaGlass } from 'shadcn-glass-ui'\n *\n * function VerticalList() {\n *   return (\n *     <ScrollAreaGlass className=\"h-[400px] w-64\">\n *       <div className=\"space-y-2 p-4\">\n *         {items.map(item => (\n *           <div key={item.id} className=\"p-2 rounded bg-[var(--card-bg)]\">\n *             {item.name}\n *           </div>\n *         ))}\n *       </div>\n *     </ScrollAreaGlass>\n *   )\n * }\n * ```\n *\n * @example Horizontal scrolling\n * ```tsx\n * <ScrollAreaGlass className=\"w-96\" orientation=\"horizontal\">\n *   <div className=\"flex space-x-4 p-4\">\n *     {cards.map(card => (\n *       <div key={card.id} className=\"shrink-0 w-[200px]\">\n *         <Card {...card} />\n *       </div>\n *     ))}\n *   </div>\n * </ScrollAreaGlass>\n * ```\n *\n * @example Both directions (2D scrolling)\n * ```tsx\n * <ScrollAreaGlass\n *   className=\"h-[400px] w-full\"\n *   orientation=\"both\"\n * >\n *   <div className=\"min-w-[800px] p-4\">\n *     <LargeDataTable />\n *   </div>\n * </ScrollAreaGlass>\n * ```\n *\n * @example Inside a card with header and footer\n * ```tsx\n * function ActivityCard() {\n *   return (\n *     <div className=\"rounded-xl border border-[var(--card-border)] bg-[var(--card-bg)]\">\n *       <div className=\"p-4 border-b border-[var(--card-border)]\">\n *         <h3>Recent Activity</h3>\n *       </div>\n *       <ScrollAreaGlass className=\"h-[300px]\">\n *         <div className=\"p-4 space-y-2\">\n *           {activities.map(activity => (\n *             <ActivityItem key={activity.id} {...activity} />\n *           ))}\n *         </div>\n *       </ScrollAreaGlass>\n *       <div className=\"p-4 border-t border-[var(--card-border)]\">\n *         <button>View All</button>\n *       </div>\n *     </div>\n *   )\n * }\n * ```\n *\n * @accessibility\n * - Viewport is keyboard focusable with visible focus ring\n * - Scrollbars automatically hidden from screen readers (managed by Radix UI)\n * - Supports arrow keys, Page Up/Down, Home/End for keyboard scrolling\n * - Maintains semantic HTML structure for assistive technologies\n * - Smooth scrolling respects user's motion preferences\n *\n * @since v1.0.0\n */\n\nimport * as React from 'react';\nimport * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';\nimport { cn } from '@/lib/utils';\nimport '@/glass-theme.css';\n\n// ========================================\n// TYPES\n// ========================================\n\n/**\n * Props for ScrollAreaGlass component.\n *\n * Extends Radix UI ScrollArea.Root props with custom orientation support.\n *\n * @example\n * ```tsx\n * const props: ScrollAreaGlassProps = {\n *   orientation: 'both',\n *   className: 'h-[400px] w-full',\n *   children: <LargeContent />,\n * };\n * ```\n */\nexport interface ScrollAreaGlassProps extends React.ComponentPropsWithoutRef<\n  typeof ScrollAreaPrimitive.Root\n> {\n  /**\n   * Which scrollbars to display.\n   *\n   * - `vertical`: Show only vertical scrollbar (default)\n   * - `horizontal`: Show only horizontal scrollbar\n   * - `both`: Show both vertical and horizontal scrollbars\n   *\n   * @default 'vertical'\n   * @example\n   * ```tsx\n   * // Vertical scrolling for long lists\n   * <ScrollAreaGlass orientation=\"vertical\" className=\"h-96\" />\n   *\n   * // Horizontal scrolling for wide content\n   * <ScrollAreaGlass orientation=\"horizontal\" className=\"w-96\" />\n   *\n   * // Both directions for large tables\n   * <ScrollAreaGlass orientation=\"both\" className=\"h-96 w-full\" />\n   * ```\n   */\n  orientation?: 'vertical' | 'horizontal' | 'both';\n}\n\n/**\n * Props for ScrollBarGlass component.\n *\n * Extends Radix UI ScrollAreaScrollbar props with orientation support.\n * Typically used for manual composition with compound pattern.\n *\n * @example\n * ```tsx\n * const props: ScrollBarGlassProps = {\n *   orientation: 'vertical',\n *   className: 'custom-scrollbar',\n * };\n * ```\n */\nexport interface ScrollBarGlassProps extends React.ComponentPropsWithoutRef<\n  typeof ScrollAreaPrimitive.ScrollAreaScrollbar\n> {\n  /**\n   * Scrollbar orientation.\n   *\n   * - `vertical`: Vertical scrollbar on the right edge\n   * - `horizontal`: Horizontal scrollbar on the bottom edge\n   *\n   * @default 'vertical'\n   * @example\n   * ```tsx\n   * <ScrollBarGlass orientation=\"vertical\" />\n   * <ScrollBarGlass orientation=\"horizontal\" />\n   * ```\n   */\n  orientation?: 'vertical' | 'horizontal';\n}\n\n// ========================================\n// STYLES\n// ========================================\n\n/** Generate inline styles for scrollbar thumb */\nfunction getThumbStyles(): React.CSSProperties {\n  return {\n    background: 'var(--scroll-thumb-bg)',\n    border: '1px solid var(--scroll-thumb-border)',\n  };\n}\n\n// ========================================\n// COMPONENTS\n// ========================================\n\n/**\n * ScrollBarGlass - Glass-themed scrollbar component\n *\n * Individual scrollbar element with glass styling and smooth transitions.\n * Used internally by ScrollAreaGlass or manually for compound patterns.\n *\n * @example\n * ```tsx\n * // Manual composition (advanced usage)\n * <ScrollAreaPrimitive.Root>\n *   <ScrollAreaPrimitive.Viewport>\n *     {content}\n *   </ScrollAreaPrimitive.Viewport>\n *   <ScrollBarGlass orientation=\"vertical\" />\n * </ScrollAreaPrimitive.Root>\n * ```\n */\nconst ScrollBarGlass = React.forwardRef<\n  React.ComponentRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,\n  ScrollBarGlassProps\n>(({ className, orientation = 'vertical', ...props }, ref) => (\n  <ScrollAreaPrimitive.ScrollAreaScrollbar\n    ref={ref}\n    data-slot=\"scroll-area-scrollbar-glass\"\n    orientation={orientation}\n    className={cn(\n      'flex touch-none select-none transition-colors',\n\n      // Vertical scrollbar\n      orientation === 'vertical' && 'h-full w-2.5 border-l border-l-transparent p-[2px]',\n\n      // Horizontal scrollbar\n      orientation === 'horizontal' && 'h-2.5 flex-col border-t border-t-transparent p-[2px]',\n\n      className\n    )}\n    {...props}\n  >\n    <ScrollAreaPrimitive.ScrollAreaThumb\n      data-slot=\"scroll-area-thumb-glass\"\n      className={cn(\n        'relative flex-1 rounded-full',\n        'transition-colors duration-150',\n        'hover:bg-[var(--scroll-thumb-hover-bg)]'\n      )}\n      style={getThumbStyles()}\n    />\n  </ScrollAreaPrimitive.ScrollAreaScrollbar>\n));\n\nScrollBarGlass.displayName = 'ScrollBarGlass';\n\n/**\n * ScrollAreaGlass - Main glass-themed scroll container\n *\n * Complete scrollable area with auto-hide glass scrollbars.\n * Combines Root, Viewport, Scrollbars, and Corner into a single component.\n *\n * @example Basic vertical scrolling\n * ```tsx\n * <ScrollAreaGlass className=\"h-[300px]\">\n *   <div className=\"p-4 space-y-2\">\n *     {items.map(item => <Item key={item.id} {...item} />)}\n *   </div>\n * </ScrollAreaGlass>\n * ```\n *\n * @example Horizontal gallery\n * ```tsx\n * <ScrollAreaGlass orientation=\"horizontal\" className=\"w-96\">\n *   <div className=\"flex space-x-4 p-4\">\n *     {images.map(img => <Image key={img.id} {...img} />)}\n *   </div>\n * </ScrollAreaGlass>\n * ```\n */\nconst ScrollAreaGlass = React.forwardRef<\n  React.ComponentRef<typeof ScrollAreaPrimitive.Root>,\n  ScrollAreaGlassProps\n>(({ className, children, orientation = 'vertical', ...props }, ref) => (\n  <ScrollAreaPrimitive.Root\n    ref={ref}\n    data-slot=\"scroll-area-glass\"\n    className={cn('relative overflow-hidden', className)}\n    {...props}\n  >\n    <ScrollAreaPrimitive.Viewport\n      data-slot=\"scroll-area-viewport-glass\"\n      className={cn(\n        'size-full rounded-[inherit]',\n        'focus-visible:ring-[var(--focus-ring)] focus-visible:ring-2 focus-visible:outline-none'\n      )}\n    >\n      {children}\n    </ScrollAreaPrimitive.Viewport>\n\n    {/* Vertical scrollbar */}\n    {(orientation === 'vertical' || orientation === 'both') && (\n      <ScrollBarGlass orientation=\"vertical\" />\n    )}\n\n    {/* Horizontal scrollbar */}\n    {(orientation === 'horizontal' || orientation === 'both') && (\n      <ScrollBarGlass orientation=\"horizontal\" />\n    )}\n\n    <ScrollAreaPrimitive.Corner\n      data-slot=\"scroll-area-corner-glass\"\n      style={{ background: 'var(--scroll-track-bg)' }}\n    />\n  </ScrollAreaPrimitive.Root>\n));\n\nScrollAreaGlass.displayName = 'ScrollAreaGlass';\n\n// ========================================\n// VIEWPORT EXPORT (for compound pattern)\n// ========================================\n\nconst ScrollAreaGlassViewport = ScrollAreaPrimitive.Viewport;\nScrollAreaGlassViewport.displayName = 'ScrollAreaGlassViewport';\n\n// ========================================\n// EXPORTS\n// ========================================\n\nexport { ScrollAreaGlass, ScrollBarGlass, ScrollAreaGlassViewport };\n\n// shadcn/ui compatible aliases\nexport { ScrollAreaGlass as ScrollArea, ScrollBarGlass as ScrollBar };\n"
    }
  ],
  "categories": [
    "ui"
  ],
  "cssVars": {
    "light": {
      "--glass-bg": "rgba(255, 255, 255, 0.1)",
      "--glass-border": "rgba(255, 255, 255, 0.2)",
      "--blur-sm": "8px",
      "--blur-md": "16px",
      "--blur-lg": "24px"
    },
    "dark": {
      "--glass-bg": "rgba(255, 255, 255, 0.05)",
      "--glass-border": "rgba(255, 255, 255, 0.1)",
      "--blur-sm": "8px",
      "--blur-md": "16px",
      "--blur-lg": "24px"
    }
  }
}