{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "MessageScroller",
  "dependencies": [
    "@shadcn/react",
    "cn",
    "lucide-react",
    "rescript-base-ui",
    "rescript-shadcn-react"
  ],
  "registryDependencies": [
    "@rescript-shadcn/Button",
    "@rescript-shadcn/Icons"
  ],
  "files": [
    {
      "path": "registry/base/ui/MessageScroller.res",
      "content": "@@jsxConfig({version: 4, mode: \"automatic\", module_: \"BaseUi.BaseUiJsxDOM\"})\n\n@module(\"cn\")\nexternal cn: (string, option<string>) => string = \"cn\"\n\nmodule Direction = {\n  @unboxed\n  type t = ShadcnReact.MessageScroller.Direction.t =\n    | @as(\"start\") Start\n    | @as(\"end\") End\n}\n\nmodule DefaultScrollPosition = {\n  @unboxed\n  type t = ShadcnReact.MessageScroller.DefaultScrollPosition.t =\n    | @as(\"start\") Start\n    | @as(\"end\") End\n    | @as(\"last-anchor\") LastAnchor\n}\n\nmodule ScrollBehavior = {\n  @unboxed\n  type t = ShadcnReact.MessageScroller.ScrollBehavior.t =\n    | @as(\"auto\") Auto\n    | @as(\"instant\") Instant\n    | @as(\"smooth\") Smooth\n}\n\nmodule ScrollAlign = {\n  @unboxed\n  type t = ShadcnReact.MessageScroller.ScrollAlign.t =\n    | @as(\"start\") Start\n    | @as(\"center\") Center\n    | @as(\"end\") End\n    | @as(\"nearest\") Nearest\n}\n\nmodule UiButton = Button\n\nlet useMessageScroller = ShadcnReact.MessageScroller.useMessageScroller\nlet useMessageScrollerScrollable = ShadcnReact.MessageScroller.useMessageScrollerScrollable\nlet useMessageScrollerVisibility = ShadcnReact.MessageScroller.useMessageScrollerVisibility\n\nmodule Provider = {\n  @react.componentWithProps(ShadcnReact.MessageScroller.Provider.props)\n  let make = (props: ShadcnReact.MessageScroller.Provider.props) =>\n    <ShadcnReact.MessageScroller.Provider {...props} />\n}\n\n@react.componentWithProps(ShadcnReact.MessageScroller.Root.props)\nlet make = (props: ShadcnReact.MessageScroller.Root.props) =>\n  <ShadcnReact.MessageScroller.Root\n    {...props}\n    dataSlot={props.dataSlot->Option.getOr(\"message-scroller\")}\n    className={cn(\n      \"group/message-scroller relative flex size-full min-h-0 flex-col overflow-hidden\",\n      props.className,\n    )}\n  />\n\nmodule Viewport = {\n  @react.componentWithProps(ShadcnReact.MessageScroller.Viewport.props)\n  let make = (props: ShadcnReact.MessageScroller.Viewport.props) =>\n    <ShadcnReact.MessageScroller.Viewport\n      {...props}\n      dataSlot={props.dataSlot->Option.getOr(\"message-scroller-viewport\")}\n      className={cn(\n        \"size-full min-h-0 min-w-0 scroll-fade-b scrollbar-thin scrollbar-gutter-stable overflow-y-auto overscroll-contain contain-content data-autoscrolling:scrollbar-thumb-transparent data-autoscrolling:scrollbar-track-transparent data-pending-scroll:invisible\",\n        props.className,\n      )}\n    />\n}\n\nmodule Content = {\n  @react.componentWithProps(ShadcnReact.MessageScroller.Content.props)\n  let make = (props: ShadcnReact.MessageScroller.Content.props) =>\n    <ShadcnReact.MessageScroller.Content\n      {...props}\n      dataSlot={props.dataSlot->Option.getOr(\"message-scroller-content\")}\n      className={cn(\"gap-6 flex h-max min-h-full flex-col\", props.className)}\n    />\n}\n\nmodule Item = {\n  @react.componentWithProps(ShadcnReact.MessageScroller.Item.props)\n  let make = (props: ShadcnReact.MessageScroller.Item.props) =>\n    <ShadcnReact.MessageScroller.Item\n      {...props}\n      scrollAnchor={props.scrollAnchor->Option.getOr(false)}\n      dataSlot={props.dataSlot->Option.getOr(\"message-scroller-item\")}\n      className={cn(\n        \"min-w-0 shrink-0 [contain-intrinsic-size:auto_10rem] [content-visibility:auto]\",\n        props.className,\n      )}\n    />\n}\n\nmodule Button = {\n  type props = {\n    variant?: UiButton.Variant.t,\n    size?: UiButton.Size.t,\n    ...ShadcnReact.MessageScroller.Button.props,\n  }\n  let primitiveProps: props => ShadcnReact.MessageScroller.Button.props = %raw(`({variant, size, ...props}) => props`)\n\n  @react.componentWithProps(props)\n  let make = (props: props) => {\n    let direction = props.direction->Option.getOr(End)\n    let variant = props.variant->Option.getOr(Secondary)\n    let size = props.size->Option.getOr(IconSm)\n    <ShadcnReact.MessageScroller.Button\n      {...props->primitiveProps}\n      render={props.render->Option.getOr(<UiButton variant size />)}\n      dataDirection={props.dataDirection->Option.getOr(direction)}\n      dataVariant={props.dataVariant->Option.getOr((variant :> string))}\n      dataSize={props.dataSize->Option.getOr((size :> string))}\n      direction\n      type_={props.type_->Option.getOr(\"button\")}\n      dataSlot={props.dataSlot->Option.getOr(\"message-scroller-button\")}\n      className={cn(\n        \" absolute inset-s-1/2 -translate-x-1/2 border-border bg-background text-foreground transition-[translate,scale,opacity] duration-200 hover:bg-muted hover:text-foreground data-[active=false]:pointer-events-none data-[active=false]:scale-95 data-[active=false]:opacity-0 data-[active=false]:duration-400 data-[active=false]:ease-[cubic-bezier(0.7,0,0.84,0)] data-[active=true]:translate-y-0 data-[active=true]:scale-100 data-[active=true]:opacity-100 data-[active=true]:ease-[cubic-bezier(0.23,1,0.32,1)] data-[direction=end]:bottom-4 data-[direction=end]:data-[active=false]:translate-y-full data-[direction=start]:top-4 data-[direction=start]:data-[active=false]:-translate-y-full rtl:translate-x-1/2 data-[direction=start]:[&_svg]:rotate-180\",\n        props.className,\n      )}\n    >\n      {props.children->Option.getOr(\n        React.array([\n          <Icons.ArrowDown key=\"icon\" />,\n          <span key=\"label\" className=\"sr-only\">\n            {switch direction {\n            | End => \"Scroll to end\"\n            | Start => \"Scroll to start\"\n            }->React.string}\n          </span>,\n        ]),\n      )}\n    </ShadcnReact.MessageScroller.Button>\n  }\n}\n",
      "type": "registry:file",
      "target": "@ui/MessageScroller.res"
    }
  ],
  "type": "registry:ui"
}