{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "comparison-table",
  "title": "Comparison Table",
  "author": "Ballmac <https://ui.ballmac.com>",
  "description": "A semantic feature matrix with a highlighted choice and accessible boolean values.",
  "dependencies": [
    "lucide-react"
  ],
  "registryDependencies": [
    "utils",
    "https://ui.ballmac.com/r/i18n.json"
  ],
  "files": [
    {
      "path": "registry/ballmac/components/comparison-table.tsx",
      "content": "// Ballmac UI: Comparison Table. https://ui.ballmac.com/components/comparison-table\n\"use client\"\n\nimport * as React from \"react\"\nimport { Check, Minus, X } from \"lucide-react\"\nimport { cn } from \"@/lib/utils\"\nimport { useMessages } from \"@/lib/ballmac/i18n\"\n\ntype ComparisonColumn = {\n  /** Stable key. */ key: string\n  /** Display heading. */ title: string\n  /** Optional short description. */ description?: string\n  /** Highlight as the recommended choice. */ featured?: boolean\n}\ntype ComparisonRow = {\n  /** Feature name. */ label: string\n  /** Optional extra context. */ description?: string\n  /** Values keyed by column. Booleans render as available/unavailable. */ values: Record<\n    string,\n    React.ReactNode | boolean\n  >\n}\ntype ComparisonTableProps = React.ComponentProps<\"div\"> & {\n  /** Accessible table caption. */ caption: string\n  /** Compared choices. */ columns: ComparisonColumn[]\n  /** Features or criteria. */ rows: ComparisonRow[]\n}\nfunction ComparisonTable({\n  className,\n  caption,\n  columns,\n  rows,\n  ...props\n}: ComparisonTableProps) {\n  const msg = useMessages()\n  return (\n    <div\n      data-slot=\"comparison-table\"\n      className={cn(\n        \"relative w-full max-w-full overflow-x-auto rounded-xl border border-border\",\n        className,\n      )}\n      tabIndex={0}\n      role=\"region\"\n      aria-label={caption}\n      {...props}\n    >\n      <table className=\"w-full min-w-full border-collapse text-sm\">\n        <caption className=\"sr-only\">{caption}</caption>\n        <thead>\n          <tr className=\"bg-muted/50\">\n            <th\n              scope=\"col\"\n              className=\"text-muted-foreground min-w-28 p-3 text-start font-medium sm:p-4\"\n            >\n              {msg(\"comparison-table.feature\", \"Feature\")}\n            </th>\n            {columns.map((column) => (\n              <th\n                key={column.key}\n                scope=\"col\"\n                className={cn(\n                  \"min-w-24 p-3 text-center font-semibold sm:p-4\",\n                  column.featured && \"bg-primary/5 text-primary\",\n                )}\n              >\n                {column.title}\n                {column.description && (\n                  <span className=\"text-muted-foreground mt-1 block text-xs font-normal\">\n                    {column.description}\n                  </span>\n                )}\n              </th>\n            ))}\n          </tr>\n        </thead>\n        <tbody>\n          {rows.map((row) => (\n            <tr key={row.label} className=\"border-t border-border\">\n              <th scope=\"row\" className=\"p-3 text-start font-medium sm:p-4\">\n                {row.label}\n                {row.description && (\n                  <span className=\"text-muted-foreground mt-1 block text-xs font-normal\">\n                    {row.description}\n                  </span>\n                )}\n              </th>\n              {columns.map((column) => {\n                const value = row.values[column.key]\n                return (\n                  <td\n                    key={column.key}\n                    className={cn(\n                      \"p-3 text-center sm:p-4\",\n                      column.featured && \"bg-primary/5\",\n                    )}\n                  >\n                    {typeof value === \"boolean\" ? (\n                      <span role=\"img\" aria-label={value ? msg(\"comparison-table.available\", \"Available\") : msg(\"comparison-table.unavailable\", \"Unavailable\")} className=\"inline-flex items-center justify-center gap-1\">\n                        {value ? (\n                          <Check\n                            aria-hidden=\"true\"\n                            className=\"text-primary size-4\"\n                          />\n                        ) : (\n                          <X\n                            aria-hidden=\"true\"\n                            className=\"text-muted-foreground size-4\"\n                          />\n                        )}\n                      </span>\n                    ) : (\n                      (value ?? (\n                        <Minus\n                          aria-label={msg(\"comparison-table.notSpecified\", \"Not specified\")}\n                          className=\"text-muted-foreground mx-auto size-4\"\n                        />\n                      ))\n                    )}\n                  </td>\n                )\n              })}\n            </tr>\n          ))}\n        </tbody>\n      </table>\n    </div>\n  )\n}\nexport {\n  ComparisonTable,\n  type ComparisonTableProps,\n  type ComparisonColumn,\n  type ComparisonRow,\n}\n",
      "type": "registry:ui",
      "target": "@components/ballmac/comparison-table.tsx"
    }
  ],
  "meta": {
    "schema": 1,
    "tier": "free",
    "tags": [
      "comparison",
      "pricing",
      "features"
    ],
    "version": "1.0.0",
    "updated": "2026-09-30",
    "ai": {
      "summary": "A semantic feature matrix with a highlighted choice and accessible boolean values.",
      "whenToUse": [
        "Compare capabilities across choices"
      ],
      "whenNotToUse": [
        "Use Description List for one object"
      ],
      "composesWith": [
        "description-list"
      ],
      "a11y": [
        {
          "keys": "Tab / Arrow keys",
          "action": "Focuses and scrolls the comparison region when narrow"
        }
      ],
      "customization": [
        "Content, layout, and token-based className styling"
      ]
    },
    "examples": [
      "comparison-table-demo",
      "comparison-table-states"
    ],
    "url": "https://ui.ballmac.com/components/comparison-table"
  },
  "categories": [
    "data-display"
  ],
  "type": "registry:ui"
}