{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "Message",
  "dependencies": [
    "cn",
    "rescript-base-ui"
  ],
  "files": [
    {
      "path": "registry/base/ui/Message.res",
      "content": "@@jsxConfig({version: 4, mode: \"automatic\", module_: \"BaseUi.BaseUiJsxDOM\"})\n\n@module(\"cn\")\nexternal cn: (string, option<string>) => string = \"cn\"\n\nmodule Align = {\n  @unboxed\n  type t =\n    | @as(\"start\") Start\n    | @as(\"end\") End\n}\n\ntype props = {\n  ...BaseUi.Types.DomProps.t,\n  align?: Align.t,\n}\n\nlet toBaseUiProps: props => BaseUi.Types.DomProps.t = %raw(`({align, ...props}) => props`)\n\n@react.componentWithProps(props)\nlet make = (props: props) => {\n  let align = props.align->Option.getOr(Align.Start)\n  <div\n    {...props->toBaseUiProps}\n    dataSlot={props.dataSlot->Option.getOr(\"message\")}\n    dataAlign={props.dataAlign->Option.getOr((align :> string))}\n    className={cn(\n      \"text-sm gap-2 group/message relative flex w-full min-w-0 data-[align=end]:flex-row-reverse\",\n      props.className,\n    )}\n  />\n}\n\nmodule Group = {\n  @react.componentWithProps(BaseUi.Types.DomProps.t)\n  let make = (props: BaseUi.Types.DomProps.t) =>\n    <div\n      {...props}\n      dataSlot={props.dataSlot->Option.getOr(\"message-group\")}\n      className={cn(\"gap-2 flex min-w-0 flex-col\", props.className)}\n    />\n}\n\nmodule Avatar = {\n  @react.componentWithProps(BaseUi.Types.DomProps.t)\n  let make = (props: BaseUi.Types.DomProps.t) =>\n    <div\n      {...props}\n      dataSlot={props.dataSlot->Option.getOr(\"message-avatar\")}\n      className={cn(\n        \"min-w-8 group-has-data-[slot=message-footer]/message:-translate-y-8 flex w-fit shrink-0 items-center justify-center self-end overflow-hidden rounded-full bg-muted\",\n        props.className,\n      )}\n    />\n}\n\nmodule Content = {\n  @react.componentWithProps(BaseUi.Types.DomProps.t)\n  let make = (props: BaseUi.Types.DomProps.t) =>\n    <div\n      {...props}\n      dataSlot={props.dataSlot->Option.getOr(\"message-content\")}\n      className={cn(\n        \"gap-2.5 group-data-[align=end]/message:*:data-slot:self-end flex w-full min-w-0 flex-col wrap-break-word\",\n        props.className,\n      )}\n    />\n}\n\nmodule Header = {\n  @react.componentWithProps(BaseUi.Types.DomProps.t)\n  let make = (props: BaseUi.Types.DomProps.t) =>\n    <div\n      {...props}\n      dataSlot={props.dataSlot->Option.getOr(\"message-header\")}\n      className={cn(\n        \"text-xs font-medium text-muted-foreground px-3 group-has-data-[variant=ghost]/message:px-0 flex max-w-full min-w-0 items-center\",\n        props.className,\n      )}\n    />\n}\n\nmodule Footer = {\n  @react.componentWithProps(BaseUi.Types.DomProps.t)\n  let make = (props: BaseUi.Types.DomProps.t) =>\n    <div\n      {...props}\n      dataSlot={props.dataSlot->Option.getOr(\"message-footer\")}\n      className={cn(\n        \"text-xs font-medium text-muted-foreground px-3 group-has-data-[variant=ghost]/message:px-0 flex max-w-full min-w-0 items-center group-data-[align=end]/message:justify-end\",\n        props.className,\n      )}\n    />\n}\n",
      "type": "registry:file",
      "target": "@ui/Message.res"
    }
  ],
  "type": "registry:ui"
}