{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "elements-comparison-card",
  "type": "registry:component",
  "title": "Comparison",
  "description": "Two options weighed side by side, with the pick named and argued.",
  "registryDependencies": [
    "https://r.assistant-ui.com/elements-surfaces.json"
  ],
  "dependencies": [
    "lucide-react"
  ],
  "files": [
    {
      "type": "registry:component",
      "path": "components/assistant-ui/elements/comparison-card.tsx",
      "sourcePath": "packages/ui/src/components/react/assistant-ui/elements/comparison-card.tsx",
      "content": "\"use client\";\n\nimport type { ComponentProps } from \"react\";\nimport { CheckIcon, MinusIcon } from \"lucide-react\";\nimport { cn } from \"@/lib/utils\";\nimport { field, mono, paper } from \"./surfaces\";\n\nexport interface ComparisonOption {\n  id: string;\n  name: string;\n  headline: string;\n  traits: readonly (string | false)[];\n}\n\nexport function ComparisonCard({\n  traitLabels,\n  options,\n  recommendedId,\n  reason,\n  className,\n  ...props\n}: Omit<\n  ComponentProps<\"div\">,\n  \"children\" | \"traitLabels\" | \"options\" | \"recommendedId\" | \"reason\"\n> & {\n  traitLabels: readonly string[];\n  options: readonly ComparisonOption[];\n  recommendedId: string;\n  reason: string;\n}) {\n  return (\n    <div\n      data-slot=\"comparison-card\"\n      className={cn(\n        paper,\n        \"flex w-full max-w-md flex-col gap-3 rounded-2xl p-4\",\n        className,\n      )}\n\n      {...props}\n    >\n      <div className=\"flex gap-2\">\n        {options.map((option) => {\n          const recommended = option.id === recommendedId;\n          return (\n            <div\n              key={option.id}\n              className={cn(\n                \"flex min-w-0 flex-1 flex-col gap-2 rounded-xl p-3 transition-colors\",\n                recommended ? \"bg-blue-500/[0.07] dark:bg-blue-400/10\" : field,\n              )}\n            >\n              <div className=\"flex flex-col gap-0.5\">\n                <span className=\"flex items-baseline gap-1.5\">\n                  <span className=\"truncate text-[13px] font-medium\">\n                    {option.name}\n                  </span>\n                  {recommended && (\n                    <span\n                      className={cn(\n                        mono,\n                        \"shrink-0 text-blue-600 dark:text-blue-400\",\n                      )}\n                    >\n                      pick\n                    </span>\n                  )}\n                </span>\n                <span className=\"text-foreground/45 truncate text-xs\">\n                  {option.headline}\n                </span>\n              </div>\n\n              <div className=\"flex flex-col gap-1\">\n                {traitLabels.map((label, i) => {\n                  const trait = option.traits[i];\n                  const absent = !trait;\n                  return (\n                    <span\n                      key={`${i}-${label}`}\n                      className=\"flex items-center gap-1.5 text-xs\"\n                    >\n                      {absent ? (\n                        <MinusIcon className=\"text-foreground/20 size-3 shrink-0\" />\n                      ) : (\n                        <CheckIcon className=\"size-3 shrink-0 text-emerald-500\" />\n                      )}\n                      <span\n                        className={cn(\n                          \"min-w-0 truncate\",\n                          absent ? \"text-foreground/30\" : \"text-foreground/65\",\n                        )}\n                      >\n                        {absent ? label : trait}\n                      </span>\n                    </span>\n                  );\n                })}\n              </div>\n            </div>\n          );\n        })}\n      </div>\n\n      <p className=\"text-foreground/55 text-xs leading-relaxed\">{reason}</p>\n    </div>\n  );\n}\n"
    }
  ]
}