{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "scroll-area",
  "title": "Scroll Area",
  "description": "A scrolling box with thin themed scrollbars that keeps native scrolling.",
  "dependencies": [
    "@radix-ui/react-scroll-area"
  ],
  "registryDependencies": [
    "@corsair-ui/utils"
  ],
  "files": [
    {
      "path": "registry/default/ui/scroll-area.tsx",
      "content": "\"use client\";\nimport * as ScrollAreaPrimitive from \"@radix-ui/react-scroll-area\";\nimport type { ComponentProps } from \"react\";\nimport { cn } from \"@/registry/default/lib/utils\";\n/**\n * A box that scrolls its content with thin, themed scrollbars instead of the\n * platform ones, while keeping native scrolling: wheel, touch, and the arrow\n * and Page keys once focus is inside. The scrollbars show on hover by\n * default; `type` switches to \"always\", \"scroll\" (while scrolling) or\n * \"auto\" (when the content overflows). The viewport shows a focus ring when\n * it takes keyboard focus: current Chrome and Firefox put an overflowing\n * scroll container in the Tab order on their own, Safari does not, so keep\n * something focusable inside (links, buttons) when keyboard users must reach\n * all of the content, and wrap it in a labelled `<section>` when it needs a\n * name. Scrolling itself has no animation.\n *\n * @example\n * <ScrollArea className=\"h-72 w-48 rounded-md border\">\n *   <div className=\"p-4\">{tags.map((tag) => <p key={tag}>{tag}</p>)}</div>\n * </ScrollArea>\n *\n * <ScrollArea className=\"w-96 whitespace-nowrap\">\n *   <div className=\"flex gap-4\">…</div>\n *   <ScrollBar orientation=\"horizontal\" />\n * </ScrollArea>\n */\nfunction ScrollArea({\n  className,\n  children,\n  type = \"hover\",\n  ...props\n}: ComponentProps<typeof ScrollAreaPrimitive.Root>) {\n  return (\n    <ScrollAreaPrimitive.Root\n      data-slot=\"scroll-area\"\n      type={type}\n      className={cn(\"relative\", className)}\n      {...props}\n    >\n      <ScrollAreaPrimitive.Viewport\n        data-slot=\"scroll-area-viewport\"\n        // Keyboard users can scroll it even when nothing inside takes focus.\n        tabIndex={0}\n        className={cn(\n          \"size-full rounded-[inherit] outline-none\",\n          \"transition-[color,box-shadow] motion-reduce:transition-none\",\n          \"focus-visible:ring-ring/50 focus-visible:ring-[3px]\"\n        )}\n      >\n        {children}\n      </ScrollAreaPrimitive.Viewport>\n      <ScrollBar />\n      <ScrollAreaPrimitive.Corner data-slot=\"scroll-area-corner\" />\n    </ScrollAreaPrimitive.Root>\n  );\n}\n/**\n * A scrollbar for one direction. ScrollArea already has a vertical one; add\n * `<ScrollBar orientation=\"horizontal\" />` inside it for sideways content.\n * The thumb can be dragged; it is hidden from screen readers, which scroll\n * the content directly.\n */\nfunction ScrollBar({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {\n  return (\n    <ScrollAreaPrimitive.ScrollAreaScrollbar\n      data-slot=\"scroll-area-scrollbar\"\n      orientation={orientation}\n      className={cn(\n        \"flex touch-none p-px transition-colors select-none motion-reduce:transition-none\",\n        \"data-[orientation=vertical]:h-full data-[orientation=vertical]:w-2.5 data-[orientation=vertical]:border-l data-[orientation=vertical]:border-l-transparent\",\n        \"data-[orientation=horizontal]:h-2.5 data-[orientation=horizontal]:flex-col data-[orientation=horizontal]:border-t data-[orientation=horizontal]:border-t-transparent\",\n        className\n      )}\n      {...props}\n    >\n      <ScrollAreaPrimitive.ScrollAreaThumb\n        data-slot=\"scroll-area-thumb\"\n        className=\"bg-border relative flex-1 rounded-full\"\n      />\n    </ScrollAreaPrimitive.ScrollAreaScrollbar>\n  );\n}\nexport { ScrollArea, ScrollBar };\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}