{
  "$schema": "https://abackui.com/schema/registry-item.json",
  "name": "scroll-area",
  "type": "registry:ui",
  "title": "Scroll Area",
  "description": "A focusable, themed scroll container for long lists and panels.",
  "dependencies": [
    "radix-ui"
  ],
  "registryDependencies": [
    "https://abackui.com/r/utils.json"
  ],
  "categories": [
    "Layout"
  ],
  "docs": "https://abackui.com/docs/components/scroll-area",
  "meta": {
    "status": "beta"
  },
  "files": [
    {
      "path": "components/ui/scroll-area.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { ScrollArea as ScrollAreaPrimitive } from \"radix-ui\";\n\nimport { cn } from \"@/lib/utils\";\n\ntype ScrollbarVisibility = NonNullable<\n  React.ComponentProps<typeof ScrollAreaPrimitive.Root>[\"type\"]\n>;\n\nexport interface ScrollAreaProps\n  extends React.ComponentProps<typeof ScrollAreaPrimitive.Root> {\n  /** When the custom scrollbar is visible. Defaults to Radix's hover behavior. */\n  scrollbarVisibility?: ScrollbarVisibility;\n}\n\nfunction ScrollArea({\n  className,\n  children,\n  scrollbarVisibility = \"hover\",\n  \"aria-label\": ariaLabel,\n  \"aria-labelledby\": ariaLabelledBy,\n  ...props\n}: ScrollAreaProps) {\n  return (\n    <ScrollAreaPrimitive.Root\n      data-slot=\"scroll-area\"\n      type={scrollbarVisibility}\n      className={cn(\"relative overflow-hidden\", className)}\n      {...props}\n    >\n      <ScrollAreaPrimitive.Viewport\n        data-slot=\"scroll-area-viewport\"\n        tabIndex={0}\n        role={ariaLabel || ariaLabelledBy ? \"region\" : undefined}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        className=\"size-full outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-focus-ring\"\n      >\n        {children}\n      </ScrollAreaPrimitive.Viewport>\n      <ScrollAreaPrimitive.Scrollbar\n        data-slot=\"scroll-area-scrollbar\"\n        orientation=\"vertical\"\n        className=\"flex touch-none select-none border-l border-transparent p-px transition-colors\"\n      >\n        <ScrollAreaPrimitive.Thumb\n          data-slot=\"scroll-area-thumb\"\n          className=\"relative flex-1 bg-scrollbar-thumb hover:bg-scrollbar-thumb-hover\"\n        />\n      </ScrollAreaPrimitive.Scrollbar>\n      <ScrollAreaPrimitive.Corner />\n    </ScrollAreaPrimitive.Root>\n  );\n}\n\nexport { ScrollArea };\n",
      "type": "registry:ui",
      "target": "components/ui/scroll-area.tsx"
    }
  ]
}