{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "comment-thread",
  "type": "registry:ui",
  "title": "Comment Thread",
  "description": "Threaded comment component with nested replies, colored avatars, and collapsible reply chains.",
  "registryDependencies": [
    "accordion"
  ],
  "files": [
    {
      "path": "registry/ruixenui/comment-thread.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n} from \"@/components/ui/accordion\";\nimport { cn } from \"@/lib/utils\";\n\nfunction CommentThread({\n  className,\n  ...props\n}: React.ComponentProps<typeof Accordion>) {\n  return (\n    <Accordion\n      data-slot=\"comment-thread\"\n      className={cn(\"flex flex-col gap-0\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction Comment({\n  className,\n  ...props\n}: React.ComponentProps<typeof AccordionItem>) {\n  return (\n    <AccordionItem\n      data-slot=\"comment\"\n      className={cn(\n        \"group/comment relative mt-4 border-none pl-4 first:mt-0 before:absolute before:bottom-0 before:left-8 before:top-9 before:w-px before:bg-foreground/[0.08] before:transition-colors before:duration-300 hover:before:bg-foreground/[0.12]\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction CommentAvatar({\n  name,\n  src,\n  className,\n  color,\n}: {\n  name: string;\n  src?: string;\n  className?: string;\n  color?: string;\n}) {\n  const initials = name\n    .split(\" \")\n    .map((n) => n[0])\n    .join(\"\")\n    .slice(0, 2)\n    .toUpperCase();\n\n  return (\n    <div\n      data-slot=\"comment-avatar\"\n      className={cn(\n        \"flex size-8 shrink-0 items-center justify-center overflow-hidden rounded-full text-xs font-medium\",\n        !src && (color || \"bg-muted text-foreground/50\"),\n        className,\n      )}\n    >\n      {src ? (\n        <img src={src} alt={name} className=\"size-full object-cover\" />\n      ) : (\n        initials\n      )}\n    </div>\n  );\n}\n\nfunction CommentHeader({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"comment-header\"\n      className={cn(\"flex gap-3\", className)}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n}\n\nfunction CommentBody({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"comment-body\"\n      className={cn(\n        \"text-[13px] leading-[1.7] text-foreground/60 transition-colors duration-300 group-hover/comment:text-foreground/65 selection:bg-foreground/[0.06]\",\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </p>\n  );\n}\n\nfunction CommentToggle({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof AccordionTrigger>) {\n  return (\n    <AccordionTrigger\n      data-slot=\"comment-toggle\"\n      className={cn(\n        \"w-fit flex-initial justify-start gap-1 border-none py-1 text-xs font-normal text-foreground/25 transition-colors duration-300 ease-[cubic-bezier(0.16,1,0.3,1)] hover:text-foreground/50 hover:no-underline [&>svg]:hidden\",\n        className,\n      )}\n      {...props}\n    >\n      {children ?? \"Show Replies\"}\n    </AccordionTrigger>\n  );\n}\n\nfunction CommentReplies({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof AccordionContent>) {\n  return (\n    <AccordionContent\n      data-slot=\"comment-replies\"\n      className={cn(\"pb-0 pl-8\", className)}\n      {...props}\n    >\n      {children}\n    </AccordionContent>\n  );\n}\n\nexport {\n  CommentThread,\n  Comment,\n  CommentAvatar,\n  CommentHeader,\n  CommentBody,\n  CommentToggle,\n  CommentReplies,\n};\n",
      "type": "registry:ui",
      "target": "components/ruixen/comment-thread.tsx"
    }
  ]
}