{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "dependencies": [
    "@base-ui/react"
  ],
  "files": [
    {
      "content": "export * as ScrollArea from \"./namespace\";\nexport * from \"./scroll-area\";\nexport * from \"./styles\";\n",
      "path": "src/registry/ui/scroll-area/index.ts",
      "type": "registry:ui"
    },
    {
      "content": "\"use client\";\n\nimport { ScrollArea } from \"@base-ui/react/scroll-area\";\nimport { composeRenderProps } from \"react-aria-components\";\nimport { ScrollAreaStyles } from \"./styles\";\n\nexport interface ScrollAreaRootProps\n  extends React.ComponentProps<typeof ScrollArea.Root> {}\n\nexport function ScrollAreaRoot({ className, ...props }: ScrollAreaRootProps) {\n  return (\n    <ScrollArea.Root\n      {...props}\n      className={composeRenderProps(className, (className) =>\n        ScrollAreaStyles.Root({ className })\n      )}\n      data-slot=\"scroll-area-root\"\n    />\n  );\n}\n\nexport interface ScrollAreaViewportProps\n  extends React.ComponentProps<typeof ScrollArea.Viewport> {\n  scrollbarGutter?: boolean;\n  scrollFade?: boolean;\n}\n\nexport function ScrollAreaViewport({\n  className,\n  scrollFade = false,\n  scrollbarGutter = false,\n  ...props\n}: ScrollAreaViewportProps) {\n  return (\n    <ScrollArea.Viewport\n      {...props}\n      className={composeRenderProps(className, (className) =>\n        ScrollAreaStyles.Viewport({ className, scrollFade, scrollbarGutter })\n      )}\n      data-slot=\"scroll-area-viewport\"\n    />\n  );\n}\n\nexport interface ScrollAreaScrollbarProps\n  extends React.ComponentProps<typeof ScrollArea.Scrollbar> {}\n\nexport function ScrollAreaScrollbar({\n  className,\n  orientation,\n  ...props\n}: ScrollAreaScrollbarProps) {\n  return (\n    <ScrollArea.Scrollbar\n      {...props}\n      className={composeRenderProps(className, (className) =>\n        ScrollAreaStyles.Scrollbar({ className, orientation })\n      )}\n      data-slot=\"scroll-area-scrollbar\"\n      orientation={orientation}\n    />\n  );\n}\n\nexport interface ScrollAreaThumbProps\n  extends React.ComponentProps<typeof ScrollArea.Thumb> {}\n\nexport function ScrollAreaThumb({ className, ...props }: ScrollAreaThumbProps) {\n  return (\n    <ScrollArea.Thumb\n      {...props}\n      className={composeRenderProps(className, (className) =>\n        ScrollAreaStyles.Thumb({ className })\n      )}\n      data-slot=\"scroll-area-thumb\"\n    />\n  );\n}\n",
      "path": "src/registry/ui/scroll-area/scroll-area.tsx",
      "type": "registry:ui"
    },
    {
      "content": "import { cva } from \"~/registry/lib/cva\";\n\nexport const ScrollAreaStyles = {\n  Root: cva({\n    base: [\"size-full min-h-0\"],\n  }),\n  Scrollbar: cva({\n    base: [\n      \"m-1 flex opacity-0 transition-opacity delay-300\",\n      \"data-hovering:opacity-100 data-scrolling:opacity-100\",\n      \"data-hovering:delay-0 data-scrolling:delay-0\",\n      \"data-hovering:duration-100 data-scrolling:duration-100\",\n    ],\n    variants: {\n      orientation: {\n        horizontal: [\"h-1.5 flex-col\"],\n        vertical: [\"w-1.5\"],\n      },\n    },\n  }),\n  Thumb: cva({\n    base: [\"relative flex-1 rounded-full bg-foreground/20\"],\n  }),\n  Viewport: cva({\n    base: [\n      \"h-full overscroll-contain rounded-[inherit] outline-none transition-shadows\",\n      \"focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background\",\n    ],\n    variants: {\n      scrollFade: {\n        true: [\n          \"mask-t-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-y-start)))]\",\n          \"mask-b-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-y-end)))]\",\n          \"mask-l-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-x-start)))]\",\n          \"mask-r-from-[calc(100%-min(var(--fade-size),var(--scroll-area-overflow-x-end)))]\",\n          \"[--fade-size:1.5rem]\",\n        ],\n        false: [],\n      },\n      scrollbarGutter: {\n        true: [\"data-has-overflow-y:pe-2.5 data-has-overflow-x:pb-2.5\"],\n        false: [],\n      },\n    },\n    defaultVariants: {\n      scrollFade: false,\n      scrollbarGutter: false,\n    },\n  }),\n};\n",
      "path": "src/registry/ui/scroll-area/styles.ts",
      "type": "registry:ui"
    },
    {
      "content": "export {\n  ScrollAreaRoot as Root,\n  ScrollAreaScrollbar as Scrollbar,\n  ScrollAreaThumb as Thumb,\n  ScrollAreaViewport as Viewport,\n} from \"./scroll-area\";\n",
      "path": "src/registry/ui/scroll-area/namespace.ts",
      "type": "registry:ui"
    }
  ],
  "name": "scroll-area",
  "registryDependencies": [
    "@kanpeki/cva"
  ],
  "type": "registry:ui"
}