{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "comparison",
  "type": "registry:component",
  "title": "Comparison",
  "description": "Side-by-side comparison layout for content or features.",
  "dependencies": [
    "@vllnt/ui@^0.2.1"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/default/comparison/comparison.tsx",
      "content": "\"use client\";\n\nimport { ArrowRight, Check, Minus, X } from \"lucide-react\";\nimport type { ReactNode } from \"react\";\n\nimport { cn } from \"@vllnt/ui\";\n\ntype ComparisonSide = {\n  items: string[];\n  title: string;\n  variant?: \"bad\" | \"good\" | \"neutral\";\n};\n\nexport type ComparisonProps = {\n  after: ComparisonSide;\n  before: ComparisonSide;\n  title?: string;\n};\n\nconst variantConfig = {\n  bad: {\n    className: \"border-red-500/30 bg-red-500/5\",\n    headerClass: \"bg-red-500/10 text-red-700 dark:text-red-300\",\n    icon: X,\n    iconClass: \"text-red-500\",\n  },\n  good: {\n    className: \"border-green-500/30 bg-green-500/5\",\n    headerClass: \"bg-green-500/10 text-green-700 dark:text-green-300\",\n    icon: Check,\n    iconClass: \"text-green-500\",\n  },\n  neutral: {\n    className: \"border-border bg-muted/30\",\n    headerClass: \"bg-muted text-muted-foreground\",\n    icon: Minus,\n    iconClass: \"text-muted-foreground\",\n  },\n};\n\nexport function Comparison({\n  after,\n  before,\n  title,\n  ...rest\n}: ComparisonProps & Record<string, unknown>) {\n  if (!before || !after) {\n    const hint =\n      \"left\" in rest || \"right\" in rest\n        ? ' Did you mean \"before\" / \"after\" instead of \"left\" / \"right\"?'\n        : \"\";\n    console.error(\n      `[Comparison] Missing required props \"before\" and \"after\".${hint}`,\n    );\n    return null;\n  }\n  const beforeConfig = variantConfig[before.variant || \"bad\"];\n  const afterConfig = variantConfig[after.variant || \"good\"];\n  const BeforeIcon = beforeConfig.icon;\n  const AfterIcon = afterConfig.icon;\n\n  return (\n    <div className=\"my-6\">\n      {title ? <h4 className=\"font-semibold mb-3\">{title}</h4> : null}\n      <div className=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\n        <div className={cn(\"rounded-lg border\", beforeConfig.className)}>\n          <div\n            className={cn(\n              \"px-4 py-2 rounded-t-lg font-medium text-sm\",\n              beforeConfig.headerClass,\n            )}\n          >\n            {before.title}\n          </div>\n          <ul className=\"p-4 space-y-2\">\n            {before.items.map((item) => (\n              <li className=\"flex items-start gap-2 text-sm\" key={item}>\n                <BeforeIcon\n                  className={cn(\n                    \"size-4 mt-0.5 flex-shrink-0\",\n                    beforeConfig.iconClass,\n                  )}\n                />\n                <span>{item}</span>\n              </li>\n            ))}\n          </ul>\n        </div>\n        <div className={cn(\"rounded-lg border\", afterConfig.className)}>\n          <div\n            className={cn(\n              \"px-4 py-2 rounded-t-lg font-medium text-sm\",\n              afterConfig.headerClass,\n            )}\n          >\n            {after.title}\n          </div>\n          <ul className=\"p-4 space-y-2\">\n            {after.items.map((item) => (\n              <li className=\"flex items-start gap-2 text-sm\" key={item}>\n                <AfterIcon\n                  className={cn(\n                    \"size-4 mt-0.5 flex-shrink-0\",\n                    afterConfig.iconClass,\n                  )}\n                />\n                <span>{item}</span>\n              </li>\n            ))}\n          </ul>\n        </div>\n      </div>\n    </div>\n  );\n}\n\nexport type BeforeAfterProps = {\n  after: ReactNode;\n  before: ReactNode;\n  title?: string;\n};\n\nexport function BeforeAfter({ after, before, title }: BeforeAfterProps) {\n  return (\n    <div className=\"my-6\">\n      {title ? <h4 className=\"font-semibold mb-3\">{title}</h4> : null}\n      <div className=\"grid grid-cols-1 md:grid-cols-[1fr_auto_1fr] gap-4 items-start\">\n        <div className=\"rounded-lg border border-red-500/30 bg-red-500/5 overflow-hidden\">\n          <div className=\"px-4 py-2 bg-red-500/10 text-red-700 dark:text-red-300 font-medium text-sm flex items-center gap-2\">\n            <X className=\"size-4\" />\n            Before\n          </div>\n          <div className=\"p-4 text-sm [&>pre]:my-0\">{before}</div>\n        </div>\n        <div className=\"hidden md:flex items-center justify-center h-full\">\n          <ArrowRight className=\"size-6 text-muted-foreground\" />\n        </div>\n        <div className=\"rounded-lg border border-green-500/30 bg-green-500/5 overflow-hidden\">\n          <div className=\"px-4 py-2 bg-green-500/10 text-green-700 dark:text-green-300 font-medium text-sm flex items-center gap-2\">\n            <Check className=\"size-4\" />\n            After\n          </div>\n          <div className=\"p-4 text-sm [&>pre]:my-0\">{after}</div>\n        </div>\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "version": "0.2.1",
  "stability": "stable"
}