{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "ScrollArea",
  "dependencies": [
    "@base-ui/react",
    "cn",
    "rescript-base-ui"
  ],
  "files": [
    {
      "path": "registry/base/ui/ScrollArea.res",
      "content": "@@directive(\"'use client'\")\n\nopen BaseUi.Types\n\n@module(\"cn\")\nexternal cn: (string, option<string>) => string = \"cn\"\n\n@react.componentWithProps(BaseUi.Types.BaseUIComponentProps.t)\nlet make = (props: BaseUi.Types.BaseUIComponentProps.t) => {\n  let children = props.children\n  <BaseUi.ScrollArea.Root\n    {...props}\n    dataSlot={props.dataSlot->Option.getOr(\"scroll-area\")}\n    className={cn(\" relative\", props.className)}\n  >\n    <BaseUi.ScrollArea.Viewport\n      dataSlot=\"scroll-area-viewport\"\n      className=\"focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1\"\n    >\n      <BaseUi.ScrollArea.Content ?children />\n    </BaseUi.ScrollArea.Viewport>\n    <BaseUi.ScrollArea.Scrollbar\n      dataSlot=\"scroll-area-scrollbar\"\n      orientation={Orientation.Vertical}\n      className=\"data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent flex touch-none p-px transition-colors select-none\"\n    >\n      <BaseUi.ScrollArea.Thumb\n        dataSlot=\"scroll-area-thumb\" className=\"rounded-full bg-border relative flex-1\"\n      />\n    </BaseUi.ScrollArea.Scrollbar>\n    <BaseUi.ScrollArea.Corner />\n  </BaseUi.ScrollArea.Root>\n}\n\nmodule ScrollBar = {\n  @react.componentWithProps(BaseUi.Types.BaseUIComponentProps.t)\n  let make = (props: BaseUi.Types.BaseUIComponentProps.t) => {\n    let children = props.children->Option.getOr(React.null)\n    let orientation = props.orientation->Option.getOr(Orientation.Vertical)\n    <BaseUi.ScrollArea.Scrollbar\n      {...props}\n      dataSlot={props.dataSlot->Option.getOr(\"scroll-area-scrollbar\")}\n      orientation\n      className={cn(\n        \"data-horizontal:h-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:h-full data-vertical:w-2.5 data-vertical:border-l data-vertical:border-l-transparent flex touch-none p-px transition-colors select-none\",\n        props.className,\n      )}\n    >\n      <BaseUi.ScrollArea.Thumb\n        dataSlot=\"scroll-area-thumb\" className=\"rounded-full bg-border relative flex-1\"\n      />\n      {children}\n    </BaseUi.ScrollArea.Scrollbar>\n  }\n}\n",
      "type": "registry:file",
      "target": "@ui/ScrollArea.res"
    }
  ],
  "type": "registry:ui"
}