{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "scroll-area",
  "type": "registry:ui",
  "title": "Scroll Area",
  "description": "Cross-browser custom scrollbars for overflow regions, keeping native scroll performance.",
  "dependencies": [
    "@radix-ui/react-scroll-area",
    "@saasflare/ui"
  ],
  "files": [
    {
      "path": "components/ui/scroll-area.tsx",
      "type": "registry:ui",
      "content": "// @toreview\n\"use client\"\n\n/**\n * @fileoverview ScrollArea primitive — custom scrollable container with styled scrollbar thumb.\n * Built on Radix UI ScrollArea. Part of the Saasflare base component layer.\n * @module packages/ui/components/ui/scroll-area\n * @layer core\n *\n * @component\n * @example\n * import { ScrollArea } from '@saasflare/ui';\n * <ScrollArea className=\"h-72\">\n *   <div>Scrollable content here</div>\n * </ScrollArea>\n */\n\nimport * as React from \"react\"\nimport * as ScrollAreaPrimitive from \"@radix-ui/react-scroll-area\"\n\nimport { cn } from \"@saasflare/ui\"\nimport { useSaasflareProps, type SaasflareComponentProps } from \"@saasflare/ui\"\n\n/**\n * Props for {@link ScrollArea}.\n *\n * Extends the Radix ScrollArea root props with {@link SaasflareComponentProps}.\n */\ninterface ScrollAreaProps\n  extends Omit<React.ComponentProps<typeof ScrollAreaPrimitive.Root>, keyof SaasflareComponentProps>,\n    SaasflareComponentProps {}\n\n/**\n * Scrollable container that replaces native scrollbars with a styled,\n * cross-browser thumb, built on Radix UI ScrollArea. Constrain it with a\n * height or width class and place overflowing content inside.\n *\n * @component\n * @layer core\n */\nfunction ScrollArea({\n  className,\n  children,\n  surface,\n  radius,\n  animated,\n  iconWeight,\n  ...props\n}: ScrollAreaProps) {\n  const sf = useSaasflareProps({ surface, radius, animated, iconWeight })\n\n  return (\n    <ScrollAreaPrimitive.Root\n      {...props}\n      data-slot=\"scroll-area\"\n      data-surface={sf.surface}\n      data-radius={sf.radius}\n      data-animated={String(sf.animated)}\n      className={cn(\"relative\", className)}\n    >\n      <ScrollAreaPrimitive.Viewport\n        data-slot=\"scroll-area-viewport\"\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/**\n * Styled scrollbar for {@link ScrollArea}. A vertical instance is rendered\n * automatically; add one with `orientation=\"horizontal\"` for horizontal\n * scrolling.\n *\n * @component\n * @layer core\n */\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      orientation={orientation}\n      className={cn(\n        \"flex touch-none p-px transition-colors select-none\",\n        orientation === \"vertical\" &&\n          \"h-full w-2.5 border-l border-l-transparent\",\n        orientation === \"horizontal\" &&\n          \"h-2.5 flex-col border-t border-t-transparent\",\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, type ScrollAreaProps }\n",
      "target": "components/ui/scroll-area.tsx"
    }
  ],
  "$meta": {
    "source": "https://ui.saasflare.io/r/scroll-area.json"
  }
}