{
  "name": "scroll-area",
  "type": "registry:ui",
  "title": "Scroll Area",
  "description": "Bounded overflow regions with keyboard scrolling, overlay scrollbars and optional edge fades.",
  "registryDependencies": [
    "@siteplane/base"
  ],
  "dependencies": [
    "@base-ui/react@1.5.0"
  ],
  "files": [
    {
      "path": "src/components/ui/scroll-area.tsx",
      "type": "registry:ui",
      "content": "\"use client\";\n\nimport { ScrollArea as ScrollAreaPrimitive } from \"@base-ui/react/scroll-area\";\nimport type React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport function ScrollArea({\n  className,\n  children,\n  scrollFade = false,\n  scrollbarGutter = false,\n  fill = false,\n  clampContentMinWidth = true,\n  ...props\n}: ScrollAreaPrimitive.Root.Props & {\n  scrollFade?: boolean;\n  scrollbarGutter?: boolean;\n  fill?: boolean;\n  clampContentMinWidth?: boolean;\n}): React.ReactElement {\n  return (\n    <ScrollAreaPrimitive.Root\n      className={cn(\"size-full min-h-0\", className)}\n      {...props}\n    >\n      <ScrollAreaPrimitive.Viewport\n        className={cn(\n          \"h-full rounded-[inherit] outline-none transition-shadow focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background data-has-overflow-y:overscroll-y-contain data-has-overflow-x:overscroll-x-contain\",\n          scrollFade &&\n            \"mask-t-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-y-start)))] mask-b-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-y-end)))] mask-l-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-x-start)))] mask-r-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-x-end)))] [--fade-size:1.5rem]\",\n          scrollbarGutter &&\n            \"data-has-overflow-y:pe-2.5 data-has-overflow-x:pb-2.5\",\n        )}\n        data-slot=\"scroll-area-viewport\"\n      >\n        <ScrollAreaPrimitive.Content\n          className={cn(fill && \"size-full\")}\n          data-slot=\"scroll-area-content\"\n          style={clampContentMinWidth ? { minWidth: 0 } : undefined}\n        >\n          {children}\n        </ScrollAreaPrimitive.Content>\n      </ScrollAreaPrimitive.Viewport>\n      <ScrollBar orientation=\"vertical\" />\n      <ScrollBar orientation=\"horizontal\" />\n      <ScrollAreaPrimitive.Corner data-slot=\"scroll-area-corner\" />\n    </ScrollAreaPrimitive.Root>\n  );\n}\n\nexport function ScrollBar({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: ScrollAreaPrimitive.Scrollbar.Props): React.ReactElement {\n  return (\n    <ScrollAreaPrimitive.Scrollbar\n      className={cn(\n        \"m-1 flex opacity-0 transition-opacity delay-300 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-(--motion-duration-micro) data-scrolling:duration-(--motion-duration-micro) motion-reduce:delay-0 motion-reduce:transition-none\",\n        className,\n      )}\n      data-slot=\"scroll-area-scrollbar\"\n      orientation={orientation}\n      {...props}\n    >\n      <ScrollAreaPrimitive.Thumb\n        className=\"relative flex-1 rounded-full bg-foreground/20\"\n        data-slot=\"scroll-area-thumb\"\n      />\n    </ScrollAreaPrimitive.Scrollbar>\n  );\n}\n\nexport { ScrollAreaPrimitive };\n"
    }
  ],
  "categories": [
    "layout"
  ],
  "docs": "# Scroll Area\n\n> Siteplane UI release `0.1.1`.\n\n## Public Purpose\n\nUse Scroll Area when content must overflow a deliberately bounded region while retaining Siteplane overlay scrollbars and keyboard scrolling.\n\n## Import\n\n`import { ScrollArea, ScrollBar } from \"@/components/ui/scroll-area\";`\n\n`import { Separator } from \"@/components/ui/separator\";`\n\n`import { Badge } from \"@/components/ui/badge\";`\n\n`import { Button } from \"@/components/ui/button\";`\n\n## Public API\n\n- `ScrollArea` accepts `scrollFade`, `scrollbarGutter`, `fill` and `clampContentMinWidth` in addition to the Base UI root props.\n- `fill` makes the content fill the viewport, which is useful for full-height children and centered empty states.\n- `clampContentMinWidth` defaults to `true`; set it to `false` when intrinsic-width content should create horizontal scrolling instead of shrinking.\n- `ScrollBar` is exported for custom composition and accepts `orientation=\"vertical\" | \"horizontal\"`.\n\n## Public Motion\n\n- Scrollbars fade through the native Siteplane Scroll Area transition. Content itself does not animate as it scrolls.\n- The operating-system reduced-motion preference removes the scrollbar fade and its delay. The forced `reducedMotionPreset` sets the active fade duration to 0ms while keeping scrolling and the scrollbar usable.\n\n## Public Accessibility\n\n- Give the region an accessible name and a real bounded height or width.\n- Preserve the focusable viewport and visible focus ring for keyboard scrolling.\n- Do not hide required actions beyond an undiscoverable scroll boundary, and use pagination for very large datasets.\n\n## Public Agent Guidance\n\n- Avoid nested scroll areas on the same axis.\n- Choose `clampContentMinWidth={false}` for wide tables or rows that must retain intrinsic width.\n- Do not replace large-data pagination with one indefinitely growing Scroll Area.\n\n## Public Links\n\n- [Documentation and preview](https://ui.siteplane.io/docs/components/layout/scroll-area)\n\n- [Registry source](https://ui.siteplane.io/r/scroll-area.json)\n",
  "meta": {
    "siteplane:agentContractVersion": 1,
    "siteplane:docs": "https://ui.siteplane.io/docs/components/layout/scroll-area",
    "siteplane:releaseVersion": "0.1.1",
    "siteplane:sourceOwned": true
  },
  "devDependencies": []
}