{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "scroll-area",
  "title": "Scroll Area",
  "description": "Custom-styled scroll container built on Base UI Scroll Area.",
  "dependencies": [
    "@base-ui/react@^1.8.0"
  ],
  "files": [
    {
      "path": "registry/rapid/ui/scroll-area/scroll-area.tsx",
      "content": "'use client'\n\nimport { ScrollArea as ScrollAreaPrimitive } from '@base-ui/react/scroll-area'\nimport { cn } from '@/lib/utils'\n\nfunction ScrollArea({ className, children, ...props }: ScrollAreaPrimitive.Root.Props) {\n\treturn (\n\t\t// `overflow-hidden` lets the root shrink below its content. Without it, a `flex-1` scroll area in a flex column\n\t\t// grows with its content and never scrolls. The viewport's focus ring is inset, so it isn't clipped.\n\t\t<ScrollAreaPrimitive.Root data-slot=\"scroll-area\" className={cn('relative overflow-hidden', className)} {...props}>\n\t\t\t<ScrollAreaPrimitive.Viewport\n\t\t\t\tdata-slot=\"scroll-area-viewport\"\n\t\t\t\tclassName=\"size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset\"\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</ScrollAreaPrimitive.Viewport>\n\t\t\t<ScrollBar />\n\t\t\t<ScrollAreaPrimitive.Corner />\n\t\t</ScrollAreaPrimitive.Root>\n\t)\n}\n\nfunction ScrollBar({ className, orientation = 'vertical', ...props }: ScrollAreaPrimitive.Scrollbar.Props) {\n\treturn (\n\t\t<ScrollAreaPrimitive.Scrollbar\n\t\t\tdata-slot=\"scroll-area-scrollbar\"\n\t\t\tdata-orientation={orientation}\n\t\t\torientation={orientation}\n\t\t\tclassName={cn(\n\t\t\t\t'flex touch-none p-px transition-colors select-none data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent',\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<ScrollAreaPrimitive.Thumb data-slot=\"scroll-area-thumb\" className=\"relative flex-1 rounded-full bg-border\" />\n\t\t</ScrollAreaPrimitive.Scrollbar>\n\t)\n}\n\nexport { ScrollArea, ScrollBar }\n",
      "type": "registry:ui",
      "target": "components/ui/scroll-area.tsx"
    }
  ],
  "type": "registry:ui"
}