{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "feature-matrix",
  "type": "registry:ui",
  "title": "FeatureMatrix",
  "description": "Dense matrix comparison table comparing engines, editions, or versions with status indicators.",
  "registryDependencies": [
    "https://ui.arpitbhayani.me/r/aui.json"
  ],
  "files": [
    {
      "path": "ui/feature-matrix.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\nexport interface FeatureMatrixColumn {\n  key: string;\n  label: string;\n}\n\nexport interface FeatureMatrixRow {\n  category?: string;\n  name?: string;\n  values?: Record<string, boolean | \"partial\" | string | React.ReactNode>;\n}\n\nexport interface FeatureMatrixProps extends React.HTMLAttributes<HTMLDivElement> {\n  columns: FeatureMatrixColumn[];\n  rows: FeatureMatrixRow[];\n}\n\nexport function FeatureMatrix({\n  columns,\n  rows,\n  className,\n  ...props\n}: FeatureMatrixProps) {\n  const renderCell = (val: boolean | \"partial\" | string | React.ReactNode) => {\n    if (val === true) {\n      return <span className=\"text-emerald-500 font-bold text-base\">✓</span>;\n    }\n    if (val === false) {\n      return <span className=\"text-muted-foreground/40 font-semibold text-sm\">✕</span>;\n    }\n    if (val === \"partial\") {\n      return (\n        <span className=\"font-mono text-[10px] font-medium text-amber-500 bg-amber-500/10 px-1.5 py-0.5 rounded\">\n          Partial\n        </span>\n      );\n    }\n    return <span>{val}</span>;\n  };\n\n  return (\n    <div\n      className={cn(\n        \"rounded-lg border border-border bg-card overflow-x-auto my-4 shadow-xs\",\n        className\n      )}\n      {...props}\n    >\n      <table className=\"w-full text-center text-sm border-collapse\">\n        <thead className=\"bg-muted/40 font-heading font-semibold text-xs border-b border-border\">\n          <tr>\n            <th className=\"px-4 py-3 text-left\">Feature</th>\n            {columns.map((col) => (\n              <th key={col.key} className=\"px-4 py-3 border-l border-border\">\n                {col.label}\n              </th>\n            ))}\n          </tr>\n        </thead>\n        <tbody className=\"divide-y divide-border\">\n          {rows.map((row, idx) => {\n            if (row.category) {\n              return (\n                <tr key={idx} className=\"bg-muted/20\">\n                  <td\n                    colSpan={columns.length + 1}\n                    className=\"px-4 py-2 text-left font-mono text-xs uppercase font-medium text-muted-foreground tracking-wider\"\n                  >\n                    {row.category}\n                  </td>\n                </tr>\n              );\n            }\n\n            return (\n              <tr key={idx} className=\"hover:bg-muted/30\">\n                <td className=\"px-4 py-2.5 text-left font-medium text-foreground text-xs\">\n                  {row.name}\n                </td>\n                {columns.map((col) => (\n                  <td key={col.key} className=\"px-4 py-2.5 border-l border-border text-xs\">\n                    {renderCell(row.values ? row.values[col.key] : false)}\n                  </td>\n                ))}\n              </tr>\n            );\n          })}\n        </tbody>\n      </table>\n    </div>\n  );\n}\n",
      "type": "registry:ui"
    }
  ]
}