{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "scroll-area",
  "title": "Scroll Area",
  "description": "A shadcn-style scroll area component built with Ark UI primitives.",
  "dependencies": ["@ark-ui/react"],
  "files": [
    {
      "path": "src/components/ui/scroll-area.tsx",
      "content": "\"use client\";\n\nimport {\n  ScrollArea as ScrollAreaPrimitive,\n  useScrollArea,\n  useScrollAreaContext,\n} from \"@ark-ui/react/scroll-area\";\nimport {\n  type ComponentProps,\n  createContext,\n  type ReactNode,\n  useContext,\n} from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport { useScrollArea, useScrollAreaContext };\n\nexport type ScrollAreaScrollbarVisibility = \"hover\" | \"always\";\n\nconst ScrollAreaScrollbarVisibilityContext =\n  createContext<ScrollAreaScrollbarVisibility>(\"hover\");\n\nconst viewportClassName = cn(\n  \"z-0 col-start-1 row-start-1 box-border block size-full min-h-0 min-w-0 rounded-[inherit] outline-none ring-offset-background\",\n  \"overscroll-contain [scrollbar-width:none] [&::-webkit-scrollbar]:hidden\",\n  \"focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\",\n);\n\nconst scrollbarBaseClassName = cn(\n  \"z-10 flex touch-none select-none rounded-full bg-muted/60 transition-opacity duration-150 ease-out\",\n  \"before:absolute before:content-['']\",\n  \"data-[orientation=vertical]:mx-1 data-[orientation=vertical]:my-2 data-[orientation=vertical]:w-1.5 data-[orientation=vertical]:flex-col\",\n  \"data-[orientation=vertical]:before:left-1/2 data-[orientation=vertical]:before:h-full data-[orientation=vertical]:before:w-5 data-[orientation=vertical]:before:-translate-x-1/2\",\n  \"data-[orientation=horizontal]:mx-2 data-[orientation=horizontal]:my-1 data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:flex-row\",\n  \"data-[orientation=horizontal]:before:h-5 data-[orientation=horizontal]:before:w-full\",\n  \"data-[orientation=vertical]:[&:not([data-overflow-y])]:hidden\",\n  \"data-[orientation=horizontal]:[&:not([data-overflow-x])]:hidden\",\n);\n\nconst scrollbarVisibilityClassName: Record<\n  ScrollAreaScrollbarVisibility,\n  string\n> = {\n  hover: cn(\n    \"opacity-0 pointer-events-none\",\n    \"group-hover/scroll-area:pointer-events-auto group-hover/scroll-area:opacity-100\",\n    \"group-focus-within/scroll-area:pointer-events-auto group-focus-within/scroll-area:opacity-100\",\n    \"data-hover:pointer-events-auto data-hover:opacity-100\",\n    \"data-scrolling:pointer-events-auto data-scrolling:opacity-100 data-scrolling:duration-0\",\n    \"data-dragging:pointer-events-auto data-dragging:opacity-100 data-dragging:duration-0\",\n  ),\n  always: cn(\"pointer-events-auto opacity-100\"),\n};\n\n/* No flex-1: Zag sets height/width from --thumb-* and translate3d on the thumb; flex-1 fills the track and breaks offsetHeight + drag. */\nconst thumbClassName = cn(\n  \"relative flex-none rounded-full bg-foreground/25 transition-colors\",\n  \"pointer-events-auto w-full max-w-full\",\n  \"data-[orientation=horizontal]:h-full data-[orientation=horizontal]:max-h-full\",\n  \"data-hover:bg-foreground/40 data-dragging:bg-foreground/55\",\n);\n\nexport type ScrollAreaRootProps = ComponentProps<\n  typeof ScrollAreaPrimitive.Root\n> & {\n  scrollbarVisibility?: ScrollAreaScrollbarVisibility;\n};\n\nexport const ScrollAreaRoot = ({\n  className,\n  scrollbarVisibility = \"hover\",\n  ...props\n}: ScrollAreaRootProps) => (\n  <ScrollAreaScrollbarVisibilityContext.Provider value={scrollbarVisibility}>\n    <ScrollAreaPrimitive.Root\n      className={cn(\n        \"group/scroll-area relative isolate grid min-h-0 min-w-0 grid-cols-[minmax(0,1fr)] grid-rows-[minmax(0,1fr)] overflow-hidden rounded-lg border border-border bg-card text-card-foreground\",\n        className,\n      )}\n      data-slot=\"scroll-area-root\"\n      {...props}\n    />\n  </ScrollAreaScrollbarVisibilityContext.Provider>\n);\n\nexport type ScrollAreaViewportProps = ComponentProps<\n  typeof ScrollAreaPrimitive.Viewport\n>;\n\nexport const ScrollAreaViewport = ({\n  className,\n  ...props\n}: ScrollAreaViewportProps) => (\n  <ScrollAreaPrimitive.Viewport\n    className={cn(viewportClassName, className)}\n    data-slot=\"scroll-area-viewport\"\n    {...props}\n  />\n);\n\nexport type ScrollAreaContentProps = ComponentProps<\n  typeof ScrollAreaPrimitive.Content\n>;\n\nexport const ScrollAreaContent = ({\n  className,\n  ...props\n}: ScrollAreaContentProps) => (\n  <ScrollAreaPrimitive.Content\n    className={cn(className)}\n    data-slot=\"scroll-area-content\"\n    {...props}\n  />\n);\n\nexport type ScrollAreaScrollbarProps = ComponentProps<\n  typeof ScrollAreaPrimitive.Scrollbar\n>;\n\nexport const ScrollAreaScrollbar = ({\n  className,\n  ...props\n}: ScrollAreaScrollbarProps) => {\n  const visibility = useContext(ScrollAreaScrollbarVisibilityContext);\n  return (\n    <ScrollAreaPrimitive.Scrollbar\n      className={cn(\n        scrollbarBaseClassName,\n        scrollbarVisibilityClassName[visibility],\n        className,\n      )}\n      data-slot=\"scroll-area-scrollbar\"\n      {...props}\n    />\n  );\n};\n\nexport type ScrollAreaThumbProps = ComponentProps<\n  typeof ScrollAreaPrimitive.Thumb\n>;\n\nexport const ScrollAreaThumb = ({\n  className,\n  ...props\n}: ScrollAreaThumbProps) => (\n  <ScrollAreaPrimitive.Thumb\n    className={cn(thumbClassName, className)}\n    data-slot=\"scroll-area-thumb\"\n    {...props}\n  />\n);\n\nexport type ScrollAreaCornerProps = ComponentProps<\n  typeof ScrollAreaPrimitive.Corner\n>;\n\nexport const ScrollAreaCorner = ({\n  className,\n  ...props\n}: ScrollAreaCornerProps) => (\n  <ScrollAreaPrimitive.Corner\n    className={cn(\"z-20 bg-transparent\", className)}\n    data-slot=\"scroll-area-corner\"\n    {...props}\n  />\n);\n\nexport type ScrollAreaRootProviderProps = ComponentProps<\n  typeof ScrollAreaPrimitive.RootProvider\n> & {\n  scrollbarVisibility?: ScrollAreaScrollbarVisibility;\n};\n\nexport const ScrollAreaRootProvider = ({\n  className,\n  scrollbarVisibility = \"hover\",\n  ...props\n}: ScrollAreaRootProviderProps) => (\n  <ScrollAreaScrollbarVisibilityContext.Provider value={scrollbarVisibility}>\n    <ScrollAreaPrimitive.RootProvider\n      className={cn(\n        \"group/scroll-area relative isolate grid min-h-0 min-w-0 grid-cols-[minmax(0,1fr)] grid-rows-[minmax(0,1fr)] overflow-hidden rounded-lg border border-border bg-card text-card-foreground\",\n        className,\n      )}\n      data-slot=\"scroll-area-root-provider\"\n      {...props}\n    />\n  </ScrollAreaScrollbarVisibilityContext.Provider>\n);\n\nexport type ScrollAreaContextProps = ComponentProps<\n  typeof ScrollAreaPrimitive.Context\n>;\n\nexport const ScrollAreaContext = (props: ScrollAreaContextProps) => (\n  <ScrollAreaPrimitive.Context {...props} />\n);\n\nexport type ScrollAreaProps = ScrollAreaRootProps & {\n  scrollFade?: boolean;\n  scrollbarGutter?: boolean;\n  children?: ReactNode;\n};\n\nexport const ScrollArea = ({\n  className,\n  children,\n  scrollFade,\n  scrollbarGutter,\n  ...props\n}: ScrollAreaProps) => (\n  <ScrollAreaRoot className={className} {...props}>\n    <ScrollAreaViewport\n      className={cn(\n        scrollbarGutter && \"pe-2.5\",\n        scrollFade &&\n          \"mask-[linear-gradient(to_bottom,transparent,black_12px,black_calc(100%-12px),transparent)]\",\n      )}\n    >\n      <ScrollAreaContent>{children}</ScrollAreaContent>\n    </ScrollAreaViewport>\n    <ScrollAreaScrollbar orientation=\"vertical\">\n      <ScrollAreaThumb />\n    </ScrollAreaScrollbar>\n    <ScrollAreaCorner />\n  </ScrollAreaRoot>\n);\n",
      "type": "registry:ui",
      "target": "src/components/ui/scroll-area.tsx"
    }
  ],
  "css": {
    "@layer base": {
      "[data-scope=\"scroll-area\"][data-part=\"viewport\"]": {
        "scrollbar-width": "none"
      },
      "[data-scope=\"scroll-area\"][data-part=\"viewport\"]::-webkit-scrollbar": {
        "display": "none"
      }
    }
  },
  "type": "registry:ui"
}