{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "scroll-area",
  "title": "Scroll Area",
  "description": "A native scroll container with custom scrollbars.",
  "dependencies": [
    "@base-ui/react"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/scroll-area.tsx",
      "content": "\"use client\";\n\nimport { ScrollArea as BaseScrollArea } from \"@base-ui/react/scroll-area\";\nimport { cn } from \"@/registry/lib/utils\";\n\nfunction ScrollAreaRoot({ className, ...props }: BaseScrollArea.Root.Props) {\n  return (\n    <BaseScrollArea.Root\n      className={cn(\"group/scroll-area relative overflow-hidden\", className)}\n      data-slot=\"scroll-area\"\n      {...props}\n    />\n  );\n}\n\nfunction ScrollAreaViewport({\n  className,\n  gradientScrollFade,\n  ...props\n}: BaseScrollArea.Viewport.Props & {\n  gradientScrollFade?: boolean;\n}) {\n  return (\n    <BaseScrollArea.Viewport\n      className={cn(\n        \"h-full w-full rounded-[inherit] overscroll-contain\",\n        \"focus-visible:outline focus-visible:outline-ring/50 focus-visible:outline-offset-2\",\n        gradientScrollFade &&\n          cn(\n            \"mask-[linear-gradient(to_bottom,transparent,black_min(1.2rem,var(--scroll-area-overflow-y-start)),black_calc(100%-min(1.2rem,var(--scroll-area-overflow-y-end,1.2rem))),transparent),linear-gradient(to_right,transparent,black_min(1.2rem,var(--scroll-area-overflow-x-start)),black_calc(100%-min(1.2rem,var(--scroll-area-overflow-x-end,1.2rem))),transparent)]\",\n            \"[mask-composite:intersect] [-webkit-mask-composite:source-in]\",\n          ),\n        className,\n      )}\n      data-slot=\"scroll-area-viewport\"\n      {...props}\n    />\n  );\n}\n\nfunction ScrollAreaCorner({\n  className,\n  ...props\n}: BaseScrollArea.Corner.Props) {\n  return (\n    <BaseScrollArea.Corner\n      className={cn(\"bg-transparent\", className)}\n      data-slot=\"scroll-area-corner\"\n      {...props}\n    />\n  );\n}\n\nfunction ScrollAreaContent({\n  className,\n  ...props\n}: BaseScrollArea.Content.Props) {\n  return (\n    <BaseScrollArea.Content\n      className={cn(\"flex-1\", className)}\n      data-slot=\"scroll-area-content\"\n      {...props}\n    />\n  );\n}\n\nfunction ScrollAreaScrollBar({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: BaseScrollArea.Scrollbar.Props) {\n  return (\n    <BaseScrollArea.Scrollbar\n      className={cn(\n        \"flex touch-none select-none transition-[colors,opacity]\",\n        \"absolute z-20 p-0.5\",\n        orientation === \"vertical\" &&\n          \"right-0 top-0 bottom-0 w-2 border-l border-l-transparent\",\n        orientation === \"horizontal\" &&\n          \"bottom-0 left-0 right-0 h-2 flex-col border-t border-t-transparent\",\n        \"opacity-0 duration-200 pointer-events-none\",\n        \"data-[hovering]:opacity-100 data-[hovering]:delay-0 data-[hovering]:pointer-events-auto\",\n        \"data-[scrolling]:opacity-100 data-[scrolling]:duration-0 data-[scrolling]:pointer-events-auto\",\n        orientation === \"vertical\" && \"data-[has-overflow-y=false]:hidden\",\n        orientation === \"horizontal\" && \"data-[has-overflow-x=false]:hidden\",\n        className,\n      )}\n      data-slot=\"scroll-area-scrollbar\"\n      orientation={orientation}\n      {...props}\n    >\n      <BaseScrollArea.Thumb\n        className=\"bg-border relative flex-1 rounded-full\"\n        data-slot=\"scroll-area-thumb\"\n      />\n    </BaseScrollArea.Scrollbar>\n  );\n}\n\nfunction ScrollArea({\n  className,\n  gradientScrollFade = false,\n  noScrollBar = false,\n  children,\n  ...props\n}: BaseScrollArea.Root.Props & {\n  gradientScrollFade?: boolean;\n  noScrollBar?: boolean;\n}) {\n  return (\n    <BaseScrollArea.Root\n      className={cn(\"flex flex-col h-full\", className)}\n      data-slot=\"scroll-area-root\"\n      {...props}\n    >\n      <ScrollAreaViewport\n        className=\"flex-1 min-h-0\"\n        gradientScrollFade={gradientScrollFade}\n      >\n        <BaseScrollArea.Content className=\"flex-1\" data-slot=\"scroll-area\">\n          {children}\n        </BaseScrollArea.Content>\n      </ScrollAreaViewport>\n      {!noScrollBar && (\n        <>\n          <ScrollAreaScrollBar orientation=\"vertical\" />\n          <ScrollAreaScrollBar orientation=\"horizontal\" />\n        </>\n      )}\n      <ScrollAreaCorner />\n    </BaseScrollArea.Root>\n  );\n}\n\nexport {\n  ScrollAreaRoot,\n  ScrollAreaScrollBar,\n  ScrollAreaContent,\n  ScrollAreaViewport,\n  ScrollAreaCorner,\n  // Composite component\n  ScrollArea,\n};\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}