{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "scroll-area",
  "title": "Scroll Area",
  "description": "Scrollable region with custom scrollbars and a keyboard tab stop, built on Radix.",
  "dependencies": [
    "radix-ui@^1.6.7"
  ],
  "registryDependencies": [
    "@pestoui/style",
    "@pestoui/utils"
  ],
  "files": [
    {
      "path": "pestoui/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\nfunction ScrollArea({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {\n  return (\n    <ScrollAreaPrimitive.Root\n      data-slot=\"scroll-area\"\n      className={cn(\"relative\", className)}\n      {...props}\n    >\n      {/* A tab stop of its own. A viewport holding only text has nothing\n          focusable inside it, so without one the keyboard has no way in to\n          scroll; the focus ring below was already written for it. */}\n      <ScrollAreaPrimitive.Viewport\n        data-slot=\"scroll-area-viewport\"\n        tabIndex={0}\n        className=\"size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1\"\n      >\n        {children}\n      </ScrollAreaPrimitive.Viewport>\n      <ScrollBar />\n      <ScrollAreaPrimitive.Corner />\n    </ScrollAreaPrimitive.Root>\n  )\n}\n\n/* Motion: the scrollbar is mounted and unmounted rather than dimmed. On the\n   default `hover` type the primitive keeps it out of the tree entirely until\n   the pointer enters, so its opacity *is* the hover affordance and a plain\n   transition has nothing to run on — hence a keyframe pair rather than a\n   transition, which is also what lets the primitive hold the unmount open\n   until the fade has finished.\n\n   Opacity with no travel, on purpose. This is chrome sitting on the edge of\n   someone else's content: a scrollbar that slides in announces itself while\n   the eye is trying to read what it is scrolling past. Fading is enough to\n   say \"this appeared because you are here\" without becoming the subject.\n\n   `duration-slow` in, `duration-exit` out — the same pairing the overlays use\n   for their scrims, which is the closest relative this has in the system. The\n   enter only sounds leisurely: `ease-out-expo` is front-loaded hard enough\n   that it is most of the way opaque inside the first quarter, so it still\n   answers the pointer immediately while the tail keeps it from snapping.\n\n   Nothing here touches the resting thumb, which stays exactly as opaque as it\n   ever was; the appearing is the whole effect. */\nfunction ScrollBar({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {\n  return (\n    <ScrollAreaPrimitive.ScrollAreaScrollbar\n      data-slot=\"scroll-area-scrollbar\"\n      data-orientation={orientation}\n      orientation={orientation}\n      className={cn(\n        \"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 data-[state=visible]:animate-in data-[state=visible]:fade-in-0 data-[state=visible]:anim-slow data-[state=visible]:ease-out-expo data-[state=hidden]:animate-out data-[state=hidden]:fade-out-0 data-[state=hidden]:anim-exit data-[state=hidden]:ease-out-expo\",\n        className\n      )}\n      {...props}\n    >\n      <ScrollAreaPrimitive.ScrollAreaThumb\n        data-slot=\"scroll-area-thumb\"\n        className=\"relative flex-1 rounded-full bg-border\"\n      />\n    </ScrollAreaPrimitive.ScrollAreaScrollbar>\n  )\n}\n\nexport { ScrollArea, ScrollBar }\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}