{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "table",
  "title": "Table",
  "description": "Data table component with status badges, hover states, and action buttons. Perfect for user management, application tracking, and directory listings.",
  "registryDependencies": [
    "card",
    "button"
  ],
  "files": [
    {
      "path": "src/lib/kapwa/table/index.tsx",
      "content": "import { Card, CardContent, CardHeader } from '@kapwa/card';\nimport { Button } from '@kapwa/button';\n\ntype TableDataItem = {\n  id: number;\n  name: string;\n  email: string;\n  status: 'Active' | 'Pending' | 'Inactive';\n};\n\nconst Table = ({\n  title,\n  subtitle,\n  tableData,\n}: {\n  title: string;\n  subtitle: string;\n  tableData: TableDataItem[];\n}) => {\n  return (\n    <Card className='mb-8'>\n      <CardHeader>\n        <h2 className='text-2xl font-semibold'>{title}</h2>\n        <p className='text-gray-800'>{subtitle}</p>\n      </CardHeader>\n      <CardContent>\n        <div className='overflow-x-auto space-y-8'>\n          <table className='min-w-full divide-y divide-gray-200'>\n            <thead className='bg-gray-50'>\n              <tr>\n                <th className='px-6 py-3 text-left text-xs font-medium text-gray-800 uppercase tracking-wider'>\n                  Name\n                </th>\n                <th className='px-6 py-3 text-left text-xs font-medium text-gray-800 uppercase tracking-wider'>\n                  Email\n                </th>\n                <th className='px-6 py-3 text-left text-xs font-medium text-gray-800 uppercase tracking-wider'>\n                  Status\n                </th>\n                <th className='px-6 py-3 text-right text-xs font-medium text-gray-800 uppercase tracking-wider'>\n                  Actions\n                </th>\n              </tr>\n            </thead>\n            <tbody className='bg-white divide-y divide-gray-200'>\n              {tableData.map(row => (\n                <tr key={row.id} className='hover:bg-gray-50'>\n                  <td className='px-6 py-4 whitespace-nowrap'>\n                    <div className='text-sm font-medium text-gray-900'>\n                      {row.name}\n                    </div>\n                  </td>\n                  <td className='px-6 py-4 whitespace-nowrap'>\n                    <div className='text-sm text-gray-800'>{row.email}</div>\n                  </td>\n                  <td className='px-6 py-4 whitespace-nowrap'>\n                    <span\n                      className={`inline-flex px-2 py-1 text-xs font-medium rounded-full ${\n                        row.status === 'Active'\n                          ? 'bg-green-100 text-green-800'\n                          : row.status === 'Pending'\n                            ? 'bg-yellow-100 text-yellow-800'\n                            : 'bg-red-100 text-red-800'\n                      }`}\n                    >\n                      {row.status}\n                    </span>\n                  </td>\n                  <td className='px-6 py-4 whitespace-nowrap text-right text-sm font-medium'>\n                    <Button variant='ghost' size='sm'>\n                      Edit\n                    </Button>\n                  </td>\n                </tr>\n              ))}\n            </tbody>\n          </table>\n        </div>\n      </CardContent>\n    </Card>\n  );\n};\n\nexport { Table };\nexport type { TableDataItem };\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}