{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "checkbox-10",
  "title": "Table row selection",
  "description": "Data table with a select-all header, per-row checkboxes, and a count.",
  "dependencies": [],
  "registryDependencies": [
    "checkbox",
    "table"
  ],
  "files": [
    {
      "path": "registry/patterns/checkbox/checkbox-10.tsx",
      "content": "'use client'\n\nimport { Checkbox } from '@/components/ui/checkbox'\nimport {\n  Table,\n  TableBody,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from '@/components/ui/table'\nimport { useState } from 'react'\n\nconst invoices = [\n  { id: 'INV-001', customer: 'Acme Inc.', status: 'Paid', amount: '$1,200.00' },\n  { id: 'INV-002', customer: 'Globex', status: 'Pending', amount: '$640.00' },\n  { id: 'INV-003', customer: 'Soylent', status: 'Paid', amount: '$320.00' },\n  { id: 'INV-004', customer: 'Initech', status: 'Overdue', amount: '$980.00' },\n]\n\nexport function Checkbox10() {\n  const [selected, setSelected] = useState<string[]>(['INV-002'])\n\n  const allChecked = selected.length === invoices.length\n  const someChecked = selected.length > 0 && !allChecked\n\n  const toggleAll = (next: boolean) =>\n    setSelected(next ? invoices.map((invoice) => invoice.id) : [])\n\n  const toggleRow = (id: string) =>\n    setSelected((prev) =>\n      prev.includes(id) ? prev.filter((row) => row !== id) : [...prev, id],\n    )\n\n  return (\n    <div className=\"w-full max-w-xl\">\n      <Table>\n        <TableHeader>\n          <TableRow>\n            <TableHead className=\"w-10\">\n              <Checkbox\n                aria-label=\"Select all\"\n                checked={allChecked}\n                indeterminate={someChecked && !allChecked}\n                onCheckedChange={(value) => toggleAll(value === true)}\n              />\n            </TableHead>\n            <TableHead>Invoice</TableHead>\n            <TableHead>Customer</TableHead>\n            <TableHead>Status</TableHead>\n            <TableHead className=\"text-right\">Amount</TableHead>\n          </TableRow>\n        </TableHeader>\n        <TableBody>\n          {invoices.map((invoice) => {\n            const isSelected = selected.includes(invoice.id)\n            return (\n              <TableRow\n                key={invoice.id}\n                data-state={isSelected ? 'selected' : undefined}\n              >\n                <TableCell>\n                  <Checkbox\n                    aria-label={`Select ${invoice.id}`}\n                    checked={isSelected}\n                    onCheckedChange={() => toggleRow(invoice.id)}\n                  />\n                </TableCell>\n                <TableCell className=\"font-medium\">{invoice.id}</TableCell>\n                <TableCell>{invoice.customer}</TableCell>\n                <TableCell className=\"text-muted-foreground\">\n                  {invoice.status}\n                </TableCell>\n                <TableCell className=\"text-right tabular-nums\">\n                  {invoice.amount}\n                </TableCell>\n              </TableRow>\n            )\n          })}\n        </TableBody>\n      </Table>\n      <p className=\"text-muted-foreground mt-3 text-sm\">\n        {selected.length} of {invoices.length} row(s) selected.\n      </p>\n    </div>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/flx/patterns/checkbox/checkbox-10.tsx"
    }
  ],
  "type": "registry:block"
}