{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "scroll-area",
  "type": "registry:ui",
  "title": "Scroll Area",
  "description": "A customizable scroll area component",
  "dependencies": [
    "@base-ui/react",
    "clsx",
    "tailwind-merge"
  ],
  "registryDependencies": [
    "classes"
  ],
  "files": [
    {
      "path": "src/registry/pure-ui/ui/scroll-area/index.tsx",
      "content": "import { ScrollArea as ScrollAreaPrimitive } from \"@base-ui/react/scroll-area\";\r\n\r\nimport { cn } from \"@/lib/classes\";\r\n\r\ninterface ScrollAreaProps extends ScrollAreaPrimitive.Root.Props {\r\n  orientation?: \"horizontal\" | \"vertical\" | \"both\";\r\n  scrollShadow?: \"vertical\" | \"horizontal\" | \"both\" | \"none\";\r\n}\r\n\r\nfunction ScrollArea({\r\n  className,\r\n  orientation = \"vertical\",\r\n  scrollShadow = \"none\",\r\n  children,\r\n  ...props\r\n}: ScrollAreaProps) {\r\n  return (\r\n    <ScrollAreaPrimitive.Root className=\"min-h-0\" {...props}>\r\n      <ScrollAreaPrimitive.Viewport\r\n        data-slot=\"scroll-area-viewport\"\r\n        className={cn(\r\n          \"border border-border\",\r\n          \"size-full overscroll-contain rounded-[inherit] outline-none transition-shadow focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background\",\r\n          className\r\n        )}\r\n      >\r\n        <div\r\n          data-slot=\"scroll-area-vertical-shadow\"\r\n          className={cn(\r\n            scrollShadow === \"vertical\" || scrollShadow === \"both\"\r\n              ? \"block\"\r\n              : \"hidden\",\r\n            [\r\n              \"absolute inset-0 pointer-events-none\",\r\n              \"before:content-[''] after:content-[''] before:block after:block before:absolute after:absolute before:left-0 after:left-0 before:w-full after:w-full before:pointer-events-none after:pointer-events-none\",\r\n              \"before:rounded-md before:rounded-b-none after:rounded-md after:rounded-t-none\",\r\n              \"before:transition-[height] after:transition-[height] before:duration-100 after:duration-100 before:ease-out after:ease-out\",\r\n              \"before:[--scroll-area-overflow-y-start:inherit]\",\r\n              \"after:[--scroll-area-overflow-y-end:inherit]\",\r\n              \"before:top-0 after:bottom-0 [--bg:var(--background)] before:bg-[linear-gradient(to_bottom,var(--bg),transparent)] after:bg-[linear-gradient(to_top,var(--bg),transparent)] before:h-[min(40px,var(--scroll-area-overflow-y-start))] after:h-[min(40px,var(--scroll-area-overflow-y-end,40px))]\",\r\n            ]\r\n          )}\r\n          style={\r\n            {\r\n              \"--scroll-area-overflow-y-start\": \"inherit\",\r\n              \"--scroll-area-overflow-y-end\": \"inherit\",\r\n            } as React.CSSProperties\r\n          }\r\n        />\r\n        <div\r\n          data-slot=\"scroll-area-horizontal-shadow\"\r\n          className={cn(\r\n            scrollShadow === \"horizontal\" || scrollShadow === \"both\"\r\n              ? \"block\"\r\n              : \"hidden\",\r\n            [\r\n              \"absolute inset-px pointer-events-none\",\r\n              \"before:content-[''] after:content-[''] before:block after:block before:absolute after:absolute before:top-0 after:top-0 before:h-full after:h-full before:pointer-events-none after:pointer-events-none\",\r\n              \"before:rounded-md before:rounded-r-none after:rounded-md after:rounded-l-none\",\r\n              \"before:transition-[height] after:transition-[height] before:duration-100 after:duration-100 before:ease-out after:ease-out\",\r\n              \"before:[--scroll-area-overflow-x-start:inherit]\",\r\n              \"after:[--scroll-area-overflow-x-end:inherit]\",\r\n              \"before:left-0 after:right-0 [--bg:var(--background)] dark:[--bg:var(--background)] before:bg-[linear-gradient(to_right,var(--bg),transparent)] after:bg-[linear-gradient(to_left,var(--bg),transparent)] before:w-[min(40px,var(--scroll-area-overflow-x-start))] after:w-[min(40px,var(--scroll-area-overflow-x-end,40px))]\",\r\n            ]\r\n          )}\r\n          style={\r\n            {\r\n              \"--scroll-area-overflow-x-start\": \"inherit\",\r\n              \"--scroll-area-overflow-x-end\": \"inherit\",\r\n            } as React.CSSProperties\r\n          }\r\n        />\r\n        {children}\r\n      </ScrollAreaPrimitive.Viewport>\r\n      {orientation === \"both\" ? (\r\n        <>\r\n          <ScrollBar orientation=\"vertical\" />\r\n          <ScrollBar orientation=\"horizontal\" />\r\n        </>\r\n      ) : (\r\n        <ScrollBar orientation={orientation} />\r\n      )}\r\n      <ScrollAreaPrimitive.Corner data-slot=\"scroll-area-corner\" />\r\n    </ScrollAreaPrimitive.Root>\r\n  );\r\n}\r\n\r\ninterface ScrollAreaContentProps extends ScrollAreaPrimitive.Viewport.Props {}\r\n\r\nfunction ScrollAreaContent({\r\n  className,\r\n  children,\r\n  ...props\r\n}: ScrollAreaContentProps) {\r\n  return (\r\n    <ScrollAreaPrimitive.Content\r\n      data-slot=\"scroll-area-content\"\r\n      className={cn(\"size-full\", className)}\r\n      {...props}\r\n    >\r\n      {children}\r\n    </ScrollAreaPrimitive.Content>\r\n  );\r\n}\r\n\r\ninterface ScrollBarProps extends ScrollAreaPrimitive.Scrollbar.Props {}\r\n\r\nfunction ScrollBar({\r\n  className,\r\n  orientation = \"vertical\",\r\n  ...props\r\n}: ScrollBarProps) {\r\n  return (\r\n    <ScrollAreaPrimitive.Scrollbar\r\n      className={cn(\r\n        \"m-1.5 flex opacity-0 bg-muted rounded-full transition-opacity delay-200 data-[orientation=horizontal]:h-1.5 data-[orientation=vertical]:w-1.5 data-[orientation=horizontal]:flex-col data-hovering:opacity-100 data-scrolling:opacity-100 data-hovering:delay-0 data-scrolling:delay-0 data-hovering:duration-100 data-scrolling:duration-100\",\r\n        className\r\n      )}\r\n      data-slot=\"scroll-area-scrollbar\"\r\n      orientation={orientation}\r\n      {...props}\r\n    >\r\n      <ScrollAreaPrimitive.Thumb\r\n        className=\"relative flex-1 rounded-full bg-muted-foreground/40\"\r\n        data-slot=\"scroll-area-thumb\"\r\n      />\r\n    </ScrollAreaPrimitive.Scrollbar>\r\n  );\r\n}\r\n\r\nexport { ScrollArea, ScrollAreaContent, ScrollBar };\r\n",
      "type": "registry:ui",
      "target": "components/ui/scroll-area.tsx"
    }
  ]
}