{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "z-scroll-area",
  "title": "Z Scroll Area",
  "dependencies": [
    "@base-ui-components/react@1.0.0-beta.3"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://ui.orchid.ai/r/orchid-foundation.json",
    "https://ui.orchid.ai/r/orchid-theme.json"
  ],
  "files": [
    {
      "path": "registry/ui/orchid/spectrum/atoms/z-scroll-area/z-scroll-area.tsx",
      "content": "\"use client\";\nimport { ScrollArea } from '@base-ui-components/react/scroll-area';\nimport { cn } from \"../../../lib/ui-utils\";\nimport * as React from 'react';\ninterface ZScrollAreaProps {\n    children?: React.ReactNode;\n    className?: string;\n    orientation?: 'vertical' | 'horizontal' | 'both';\n    scrollbarSize?: number;\n    dir?: 'ltr' | 'rtl';\n}\nexport const ZScrollArea = React.forwardRef<React.ElementRef<typeof ScrollArea.Root>, ZScrollAreaProps>(({ children, className, orientation = 'vertical', scrollbarSize = 4, dir = 'ltr', ...props }, ref) => {\n    return (<ScrollArea.Root ref={ref} className={cn('relative', className)} dir={dir} {...props}>\n        <ScrollArea.Viewport className=\"size-full\">\n          <ScrollArea.Content>{children}</ScrollArea.Content>\n        </ScrollArea.Viewport>\n\n        {(orientation === 'vertical' || orientation === 'both') && (<ScrollArea.Scrollbar orientation=\"vertical\" className={cn('pointer-events-none absolute top-0 right-0 z-10 flex h-full justify-center rounded-md opacity-0', 'transition-opacity delay-300 duration-150', 'data-[hovering]:opacity-100 data-[hovering]:delay-0 data-[hovering]:duration-75', 'data-[scrolling]:opacity-100 data-[scrolling]:delay-0 data-[scrolling]:duration-75', 'data-[hovering]:pointer-events-auto data-[scrolling]:pointer-events-auto', 'before:absolute before:inset-y-0 before:-left-2 before:w-5 before:content-[\"\"]')} style={{\n                width: `${scrollbarSize}px`,\n            }}>\n            <ScrollArea.Thumb className=\"bg-neutral-subtle/50 w-full rounded-[inherit]\"/>\n          </ScrollArea.Scrollbar>)}\n\n        {(orientation === 'horizontal' || orientation === 'both') && (<ScrollArea.Scrollbar orientation=\"horizontal\" className={cn('pointer-events-none absolute right-0 bottom-0 z-10 flex w-full justify-center rounded-md opacity-0', 'transition-opacity delay-300 duration-150', 'data-[hovering]:opacity-100 data-[hovering]:delay-0 data-[hovering]:duration-75', 'data-[scrolling]:opacity-100 data-[scrolling]:delay-0 data-[scrolling]:duration-75', 'data-[hovering]:pointer-events-auto data-[scrolling]:pointer-events-auto', 'before:absolute before:inset-x-0 before:-top-2 before:h-5 before:content-[\"\"]')} style={{\n                height: `${scrollbarSize}px`,\n            }}>\n            <ScrollArea.Thumb className=\"bg-neutral-subtle/50 h-full rounded-[inherit]\"/>\n          </ScrollArea.Scrollbar>)}\n\n        {orientation === 'both' && <ScrollArea.Corner className=\"bg-surface-weak\"/>}\n      </ScrollArea.Root>);\n});\nZScrollArea.displayName = 'ZScrollArea';\n",
      "type": "registry:ui",
      "target": "@ui/orchid/spectrum/atoms/z-scroll-area/z-scroll-area.tsx"
    }
  ],
  "type": "registry:ui"
}