{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "scroll-area",
  "type": "registry:ui",
  "title": "Scroll area",
  "description": "A region that scrolls with the system's own scrollbar: a slim thumb that fades in while scrolling and widens when reached for, and edge fades that show there is more.",
  "dependencies": [
    "@base-ui/react@^1.8.0"
  ],
  "registryDependencies": [
    "https://metalui.dev/r/tokens.json"
  ],
  "files": [
    {
      "path": "packages/metalui/src/components/scroll-area/scroll-area.tsx",
      "type": "registry:ui",
      "target": "components/metalui/scroll-area/scroll-area.tsx",
      "content": "'use client';\n\nimport * as React from 'react';\nimport { ScrollArea as BaseScrollArea } from '@base-ui/react/scroll-area';\n\n/* ─────────────────────────────────────────────────────────\n * SCROLL AREA, a region that scrolls with the system's own scrollbar, on Base UI ScrollArea\n *\n *   rest      no bar; content fades out at an edge only when there is more beyond it\n *   show      scrolling, or the pointer over the region: the bar fades in on the settle spring; the edge fades grow as you move away\n *             from an edge and shrink as you reach it\n *   stop      600 ms later the bar fades out on the release spring\n *   reach     the pointer on the bar itself widens the thumb from 4 to 8 on the part spring\n *   keys      the viewport takes focus: arrows, Page Up/Down, Home and End scroll it\n * Reduce Motion: the thumb's width snaps; the fades stay (they are not travel).\n * ───────────────────────────────────────────────────────── */\n\nconst ROOT = 'mu-scroll-area relative min-h-0 overflow-hidden';\nconst VIEWPORT = 'mu-scroll-area-viewport scroll-area-fill overscroll-contain outline-none focus-visible:focus-ring-flush scroll-area-fade';\nconst BAR = 'mu-scroll-area-bar absolute top-0 right-0 bottom-0 flex justify-center p-scroll-area-bar-inset data-[orientation=vertical]:w-scroll-area-bar-size scroll-area-bar';\nconst THUMB = 'mu-scroll-area-thumb scroll-area-thumb reduced-motion:transition-none';\n\nexport interface ScrollAreaProps extends Omit<BaseScrollArea.Root.Props, 'className'> {\n  className?: string;\n  /** Name the region for assistive tech when it is a landmark of its own. */\n  'aria-label'?: string;\n}\n\n/** A region that scrolls vertically with the system's scrollbar. Give it a height (or max-height). */\nexport function ScrollArea({ className, children, 'aria-label': label, ...props }: ScrollAreaProps) {\n  return (\n    <BaseScrollArea.Root className={className ? `${ROOT} ${className}` : ROOT} {...props}>\n      <BaseScrollArea.Viewport className={VIEWPORT} tabIndex={0} aria-label={label} role={label ? 'region' : undefined}>\n        <BaseScrollArea.Content>{children}</BaseScrollArea.Content>\n      </BaseScrollArea.Viewport>\n      <BaseScrollArea.Scrollbar orientation=\"vertical\" className={BAR}>\n        <BaseScrollArea.Thumb className={THUMB} />\n      </BaseScrollArea.Scrollbar>\n    </BaseScrollArea.Root>\n  );\n}\n"
    }
  ],
  "docs": "Agent guide: https://metalui.dev/r/scroll-area.md. SwiftUI: MetalScrollArea in the MetalUI Swift package."
}