{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "table-styled",
  "title": "Table essentials",
  "description": "Styled table: the essentials set. 5 decorative table variations (StripedTable, BorderedTable, HoverGlowTable, CompactTable, CardTable) on the ai2 token system, driven by CSS token transitions and sized sm to xl. Part of the free styled layer.",
  "dependencies": [],
  "registryDependencies": [
    "@ai2/tokens"
  ],
  "files": [
    {
      "path": "registry/ai2/styled/table-styled.tsx",
      "content": "\"use client\"\n\nimport type * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\n/* Styled data table family: 5 decorative variations that build a real <table> from\n   columns + rows. Color comes ONLY from semantic tokens (via alpha color-mix, never\n   var(--x)/0.4), and size sets the cell density (padding + text). Deterministic,\n   renders with no props too (3 columns / 4 rows of data by default). No animation,\n   pure CSS. */\n\nexport type StyledSize = \"sm\" | \"md\" | \"lg\" | \"xl\"\n\ntype Column = { key: string; label: React.ReactNode }\ntype Row = Record<string, React.ReactNode>\n\ntype TableProps = {\n  className?: string\n  size?: StyledSize\n  columns?: Column[]\n  rows?: Row[]\n}\n\n/* A sensible default data set so it renders without props. */\nconst defaultColumns: Column[] = [\n  { key: \"name\", label: \"Name\" },\n  { key: \"role\", label: \"Role\" },\n  { key: \"status\", label: \"Status\" },\n]\n\nconst defaultRows: Row[] = [\n  { name: \"Ada Lovelace\", role: \"Engineer\", status: \"Active\" },\n  { name: \"Alan Turing\", role: \"Researcher\", status: \"Active\" },\n  { name: \"Grace Hopper\", role: \"Architect\", status: \"Away\" },\n  { name: \"Katherine Johnson\", role: \"Analyst\", status: \"Active\" },\n]\n\n/* Hucre yogunlugu: padding + metin olcegi. */\nconst cell: Record<StyledSize, string> = {\n  sm: \"px-2.5 py-1.5 text-xs\",\n  md: \"px-3 py-2 text-sm\",\n  lg: \"px-4 py-2.5 text-sm\",\n  xl: \"px-5 py-3 text-base\",\n}\n\n/* Header cell density (the same horizontally as the body, slightly tightened vertically). */\nconst headCell: Record<StyledSize, string> = {\n  sm: \"px-2.5 py-1.5 text-xs\",\n  md: \"px-3 py-2 text-xs\",\n  lg: \"px-4 py-2.5 text-sm\",\n  xl: \"px-5 py-3 text-sm\",\n}\n\nconst tableBase = \"w-full border-collapse text-left align-middle text-foreground\"\nconst headBase = \"font-medium text-muted-foreground\"\n\nfunction resolve(columns?: Column[], rows?: Row[]) {\n  return {\n    cols: columns && columns.length > 0 ? columns : defaultColumns,\n    data: rows && rows.length > 0 ? rows : defaultRows,\n  }\n}\n\n/* Striped: alternatif satirlarda token yuzey tonuyla zebra deseni. */\nexport function StripedTable({ className, size = \"md\", columns, rows }: TableProps) {\n  const { cols, data } = resolve(columns, rows)\n  return (\n    <div\n      data-slot=\"styled-table\"\n      className={cn(\"w-full overflow-x-auto rounded-lg border border-border\", className)}\n    >\n      <table className={tableBase}>\n        <thead>\n          <tr className=\"border-b border-border bg-muted\">\n            {cols.map((col) => (\n              <th key={col.key} scope=\"col\" className={cn(headBase, headCell[size])}>\n                {col.label}\n              </th>\n            ))}\n          </tr>\n        </thead>\n        <tbody>\n          {data.map((row, i) => (\n            <tr\n              key={i}\n              className={cn(\n                \"border-b border-border/60 last:border-b-0\",\n                i % 2 === 1 && \"bg-[color-mix(in_oklab,var(--surface-2)_60%,transparent)]\"\n              )}\n            >\n              {cols.map((col) => (\n                <td key={col.key} className={cell[size]}>\n                  {row[col.key]}\n                </td>\n              ))}\n            </tr>\n          ))}\n        </tbody>\n      </table>\n    </div>\n  )\n}\n\n/* Bordered: tum hucrelerde token kenarlik - tam izgara / grid cizgileri. */\nexport function BorderedTable({ className, size = \"md\", columns, rows }: TableProps) {\n  const { cols, data } = resolve(columns, rows)\n  return (\n    <div data-slot=\"styled-table\" className={cn(\"w-full overflow-x-auto rounded-lg\", className)}>\n      <table className={cn(tableBase, \"border border-border\")}>\n        <thead>\n          <tr className=\"bg-muted\">\n            {cols.map((col) => (\n              <th\n                key={col.key}\n                scope=\"col\"\n                className={cn(headBase, headCell[size], \"border border-border\")}\n              >\n                {col.label}\n              </th>\n            ))}\n          </tr>\n        </thead>\n        <tbody>\n          {data.map((row, i) => (\n            <tr key={i}>\n              {cols.map((col) => (\n                <td key={col.key} className={cn(cell[size], \"border border-border\")}>\n                  {row[col.key]}\n                </td>\n              ))}\n            </tr>\n          ))}\n        </tbody>\n      </table>\n    </div>\n  )\n}\n\n/* HoverGlow: borderless rows that gain a token tone plus a light glow on hover. */\nexport function HoverGlowTable({ className, size = \"md\", columns, rows }: TableProps) {\n  const { cols, data } = resolve(columns, rows)\n  return (\n    <div data-slot=\"styled-table\" className={cn(\"w-full overflow-x-auto rounded-lg\", className)}>\n      <table className={tableBase}>\n        <thead>\n          <tr>\n            {cols.map((col) => (\n              <th key={col.key} scope=\"col\" className={cn(headBase, headCell[size])}>\n                {col.label}\n              </th>\n            ))}\n          </tr>\n        </thead>\n        <tbody>\n          {data.map((row, i) => (\n            <tr\n              key={i}\n              className=\"transition-colors duration-(--motion-fast) ease-(--motion-ease) hover:bg-[color-mix(in_oklab,var(--accent)_70%,transparent)] hover:shadow-[0_0_18px_-6px_color-mix(in_oklab,var(--accent-foreground)_35%,transparent)]\"\n            >\n              {cols.map((col) => (\n                <td key={col.key} className={cell[size]}>\n                  {row[col.key]}\n                </td>\n              ))}\n            </tr>\n          ))}\n        </tbody>\n      </table>\n    </div>\n  )\n}\n\n/* Compact: dense padding, small text, minimal chrome (bottom rules only). */\nexport function CompactTable({ className, size = \"sm\", columns, rows }: TableProps) {\n  const { cols, data } = resolve(columns, rows)\n  return (\n    <div data-slot=\"styled-table\" className={cn(\"w-full overflow-x-auto\", className)}>\n      <table className={cn(tableBase, \"text-xs\")}>\n        <thead>\n          <tr className=\"border-b border-border\">\n            {cols.map((col) => (\n              <th\n                key={col.key}\n                scope=\"col\"\n                className={cn(headBase, \"px-2 py-1 text-xs\")}\n              >\n                {col.label}\n              </th>\n            ))}\n          </tr>\n        </thead>\n        <tbody>\n          {data.map((row, i) => (\n            <tr key={i} className=\"border-b border-border/50 last:border-b-0\">\n              {cols.map((col) => (\n                <td key={col.key} className=\"px-2 py-1\">\n                  {row[col.key]}\n                </td>\n              ))}\n            </tr>\n          ))}\n        </tbody>\n      </table>\n    </div>\n  )\n}\n\n/* Card: every row reads as a rounded, separate token card (with gaps). */\nexport function CardTable({ className, size = \"md\", columns, rows }: TableProps) {\n  const { cols, data } = resolve(columns, rows)\n  return (\n    <div data-slot=\"styled-table\" className={cn(\"w-full overflow-x-auto\", className)}>\n      <table className={cn(tableBase, \"border-separate border-spacing-y-2\")}>\n        <thead>\n          <tr>\n            {cols.map((col) => (\n              <th key={col.key} scope=\"col\" className={cn(headBase, headCell[size])}>\n                {col.label}\n              </th>\n            ))}\n          </tr>\n        </thead>\n        <tbody>\n          {data.map((row, i) => (\n            <tr key={i} className=\"bg-card text-card-foreground shadow-sm\">\n              {cols.map((col, j) => (\n                <td\n                  key={col.key}\n                  className={cn(\n                    cell[size],\n                    \"border-y border-border first:border-l last:border-r\",\n                    j === 0 && \"rounded-l-lg\",\n                    j === cols.length - 1 && \"rounded-r-lg\"\n                  )}\n                >\n                  {row[col.key]}\n                </td>\n              ))}\n            </tr>\n          ))}\n        </tbody>\n      </table>\n    </div>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/ui/table-styled.tsx"
    }
  ],
  "categories": [
    "styled",
    "table"
  ],
  "type": "registry:component"
}