{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "message",
  "type": "registry:ui",
  "title": "Message",
  "description": "Message primitives for Tile UI.",
  "devDependencies": [
    "sass"
  ],
  "registryDependencies": [
    "@tile-ui/core",
    "@tile-ui/styles"
  ],
  "files": [
    {
      "path": "packages/react/src/components/message/message.tsx",
      "type": "registry:ui",
      "target": "components/ui/message/message.tsx",
      "content": "import React from 'react';\nimport { getMessageStyleKeys, messageStyleKeys } from '../lib/core';\nimport type { MessageBaseProps } from '../lib/core';\nimport styles from './message.module.scss';\n\nexport interface MessageGroupProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nconst MessageGroup = React.forwardRef<HTMLDivElement, MessageGroupProps>(({ className = '', children, ...props }, ref) => {\n\treturn (\n\t\t<div ref={ref} data-slot=\"message-group\" className={[styles[messageStyleKeys.group], className].filter(Boolean).join(' ')} {...props}>\n\t\t\t{children}\n\t\t</div>\n\t);\n});\nMessageGroup.displayName = 'MessageGroup';\n\nexport interface MessageProps extends React.HTMLAttributes<HTMLDivElement>, MessageBaseProps {}\n\nconst Message = React.forwardRef<HTMLDivElement, MessageProps>(({ className = '', align = 'start', children, ...props }, ref) => {\n\tconst styleKeys = getMessageStyleKeys(align);\n\n\treturn (\n\t\t<div ref={ref} data-slot=\"message\" data-align={align} className={[styles[styleKeys.base], styles[styleKeys.align], className].filter(Boolean).join(' ')} {...props}>\n\t\t\t{children}\n\t\t</div>\n\t);\n});\nMessage.displayName = 'Message';\n\nexport interface MessageAvatarProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nconst MessageAvatar = React.forwardRef<HTMLDivElement, MessageAvatarProps>(({ className = '', children, ...props }, ref) => {\n\treturn (\n\t\t<div ref={ref} data-slot=\"message-avatar\" className={[styles[messageStyleKeys.avatar], className].filter(Boolean).join(' ')} {...props}>\n\t\t\t{children}\n\t\t</div>\n\t);\n});\nMessageAvatar.displayName = 'MessageAvatar';\n\nexport interface MessageContentProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nconst MessageContent = React.forwardRef<HTMLDivElement, MessageContentProps>(({ className = '', children, ...props }, ref) => {\n\treturn (\n\t\t<div ref={ref} data-slot=\"message-content\" className={[styles[messageStyleKeys.content], className].filter(Boolean).join(' ')} {...props}>\n\t\t\t{children}\n\t\t</div>\n\t);\n});\nMessageContent.displayName = 'MessageContent';\n\nexport interface MessageHeaderProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nconst MessageHeader = React.forwardRef<HTMLDivElement, MessageHeaderProps>(({ className = '', children, ...props }, ref) => {\n\treturn (\n\t\t<div ref={ref} data-slot=\"message-header\" className={[styles[messageStyleKeys.header], className].filter(Boolean).join(' ')} {...props}>\n\t\t\t{children}\n\t\t</div>\n\t);\n});\nMessageHeader.displayName = 'MessageHeader';\n\nexport interface MessageFooterProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nconst MessageFooter = React.forwardRef<HTMLDivElement, MessageFooterProps>(({ className = '', children, ...props }, ref) => {\n\treturn (\n\t\t<div ref={ref} data-slot=\"message-footer\" className={[styles[messageStyleKeys.footer], className].filter(Boolean).join(' ')} {...props}>\n\t\t\t{children}\n\t\t</div>\n\t);\n});\nMessageFooter.displayName = 'MessageFooter';\n\nexport { MessageGroup, Message, MessageAvatar, MessageContent, MessageHeader, MessageFooter };\nexport default Message;\n"
    },
    {
      "path": "packages/styles/scss/components/message.module.scss",
      "type": "registry:file",
      "target": "components/ui/message/message.module.scss",
      "content": "@use '../../../styles/variables/colors' as *;\n\n// 消息组\n.group {\n\tdisplay: flex;\n\twidth: 100%;\n\tmin-width: 0;\n\tflex-direction: column;\n\tgap: $spacing-2;\n}\n\n// 消息行\n.message {\n\tposition: relative;\n\tdisplay: flex;\n\twidth: 100%;\n\tmin-width: 0;\n\tgap: $spacing-2;\n\tfont-size: $text-sm;\n\n\t&.alignEnd {\n\t\tflex-direction: row-reverse;\n\t}\n}\n\n// 消息头像\n.avatar {\n\tdisplay: flex;\n\twidth: 2rem;\n\theight: 2rem;\n\tflex-shrink: 0;\n\talign-items: center;\n\tjustify-content: center;\n\talign-self: flex-end;\n\toverflow: hidden;\n\tborder-radius: $radius-full;\n\tbackground-color: var(--tile-message-avatar-background, $muted);\n}\n\n// 消息内容\n.content {\n\tdisplay: flex;\n\tflex: 1;\n\tmin-width: 0;\n\tflex-direction: column;\n\tgap: $spacing-2_5;\n\toverflow-wrap: anywhere;\n\tword-break: break-word;\n}\n\n// 消息头部\n.header {\n\tdisplay: flex;\n\tmax-width: 100%;\n\tmin-width: 0;\n\talign-items: center;\n\tpadding-inline: $spacing-3;\n\tfont-size: $text-xs;\n\tfont-weight: $font-medium;\n\tcolor: var(--tile-message-meta-color, $muted-foreground);\n}\n\n// 消息底部\n.footer {\n\tdisplay: flex;\n\tmax-width: 100%;\n\tmin-width: 0;\n\talign-items: center;\n\tpadding-inline: $spacing-3;\n\tfont-size: $text-xs;\n\tfont-weight: $font-medium;\n\tcolor: var(--tile-message-meta-color, $muted-foreground);\n\n\t.message.alignEnd & {\n\t\tjustify-content: flex-end;\n\t}\n}\n\n// 对齐到末端时，内容区内直接子元素右对齐\n.message.alignEnd .content > * {\n\talign-self: flex-end;\n}\n\n.message.alignEnd .content {\n\talign-items: flex-end;\n\ttext-align: end;\n}\n"
    },
    {
      "path": "packages/react/src/components/message/index.ts",
      "type": "registry:ui",
      "target": "components/ui/message/index.ts",
      "content": "export {\n\tMessageGroup,\n\tMessage,\n\tMessageAvatar,\n\tMessageContent,\n\tMessageHeader,\n\tMessageFooter,\n\ttype MessageGroupProps,\n\ttype MessageProps,\n\ttype MessageAvatarProps,\n\ttype MessageContentProps,\n\ttype MessageHeaderProps,\n\ttype MessageFooterProps,\n} from './message';\n"
    }
  ]
}