{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "scroll-area",
  "title": "scroll-area",
  "description": "Content that scrolls inside a fixed height, with a thin bar in the line colour. type auto shows the bar while the content overflows; overscroll contain keeps the wheel in a panel at its end.",
  "dependencies": [
    "@radix-ui/react-scroll-area",
    "class-variance-authority@^0.7"
  ],
  "registryDependencies": [
    "@dwellir/dwellir-theme",
    "@dwellir/utils"
  ],
  "files": [
    {
      "path": "components/ui/scroll-area.tsx",
      "content": "'use client';\n\nimport * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport type { ComponentProps } from 'react';\nimport { cn } from '@/lib/utils';\n\n/*\n * Radix wraps the content in a div with display: table. The wrapper stays a\n * block here: a table would grow to the widest child, such as a wide table,\n * and clip it instead of letting the child scroll on its own.\n */\nconst scrollAreaViewportVariants = cva(\n  'size-full rounded-[inherit] outline-none focus-visible:outline-solid focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-ring [&>div]:block!',\n  {\n    variants: {\n      overscroll: {\n        auto: '',\n        /* A panel inside the page keeps the wheel at its end, so the page does not scroll on. */\n        contain: 'overscroll-contain',\n      },\n    },\n    defaultVariants: { overscroll: 'auto' },\n  },\n);\n\nfunction ScrollArea({\n  className,\n  children,\n  overscroll,\n  ...props\n}: ComponentProps<typeof ScrollAreaPrimitive.Root> &\n  VariantProps<typeof scrollAreaViewportVariants>) {\n  return (\n    <ScrollAreaPrimitive.Root\n      data-slot=\"scroll-area\"\n      className={cn('relative', className)}\n      {...props}\n    >\n      {/* Focusable, so a keyboard reader can scroll content that holds no link or button. */}\n      <ScrollAreaPrimitive.Viewport\n        data-slot=\"scroll-area-viewport\"\n        tabIndex={0}\n        className={scrollAreaViewportVariants({ overscroll })}\n      >\n        {children}\n      </ScrollAreaPrimitive.Viewport>\n      <ScrollBar />\n      <ScrollAreaPrimitive.Corner />\n    </ScrollAreaPrimitive.Root>\n  );\n}\n\nfunction ScrollBar({\n  className,\n  orientation = 'vertical',\n  ...props\n}: 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' && 'h-full w-2.5 border-l border-l-transparent',\n        orientation === 'horizontal' && '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, scrollAreaViewportVariants };\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}