{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "table",
  "type": "registry:component",
  "title": "Table",
  "description": "Presents structured values in rows and columns. 1px row rules; total rows use 2px rules.",
  "registryDependencies": [
    "https://vlak.dev/r/vlak-base.json",
    "https://vlak.dev/r/inter.json",
    "https://vlak.dev/r/vlak-lib.json"
  ],
  "dependencies": [
    "@stylexjs/stylex"
  ],
  "devDependencies": [
    "@stylexjs/babel-plugin"
  ],
  "docs": "Vlak leaves are StyleX. Compile them with @stylexjs/babel-plugin (Vite: @stylexjs/unplugin, Next: @stylexjs/nextjs-plugin). If you would rather not run a compiler, import @noorddev/vlak-react instead: it ships precompiled with one stylesheet.",
  "files": [
    {
      "path": "vlak/table.tsx",
      "content": "import * as React from \"react\";\nimport * as stylex from \"@stylexjs/stylex\";\nimport { vlak, mq } from \"./tokens.stylex\";\nimport { rs } from \"./rs\";\n\nexport interface TableProps extends React.TableHTMLAttributes<HTMLTableElement> {}\nexport interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement> {\n  /** 2px rules, ink cells. */\n  total?: boolean;\n}\nexport interface TableCellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {\n  total?: boolean;\n}\nexport interface TableHeaderCellProps extends React.ThHTMLAttributes<HTMLTableCellElement> {}\n\n\nconst styles = stylex.create({\n  table: {\n    width: {\n      default: \"calc(100% + 40px)\",\n      [mq.phone]: \"calc(100% + 2 * var(--pad))\",\n    },\n    borderCollapse: \"collapse\",\n    marginTop: \"1rem\",\n    marginBottom: \"1.5rem\",\n    marginInlineStart: {\n      default: \"-1.25rem\",\n      [mq.phone]: \"calc(-1 * var(--pad))\",\n    },\n    marginInlineEnd: {\n      default: 0,\n      [mq.phone]: \"calc(-1 * var(--pad))\",\n    },\n    fontSize: {\n      default: \"0.875rem\",\n      [mq.phone]: \"1rem\",\n    },\n  },\n  th: {\n    textAlign: {\n      default: \"start\",\n      \":last-child\": \"end\",\n    },\n    fontWeight: 600,\n    color: \"var(--text)\",\n    letterSpacing: \"-0.01em\",\n    paddingTop: {\n      default: \"0.625rem\",\n      [mq.phone]: \"0.875rem\",\n    },\n    paddingBottom: {\n      default: \"0.625rem\",\n      [mq.phone]: \"0.875rem\",\n    },\n    paddingInlineStart: {\n      default: \"0.75rem\",\n      \":first-child\": \"1.25rem\",\n      [mq.phone]: \"0.75rem\",\n    },\n    paddingInlineEnd: {\n      default: \"1rem\",\n      \":last-child\": \"1.25rem\",\n      [mq.phone]: \"0.75rem\",\n    },\n    borderBottomWidth: 2,\n    borderBottomStyle: \"solid\",\n    borderBottomColor: vlak.divider,\n    fontSize: {\n      default: \"0.8125rem\",\n      [mq.phone]: \"0.9375rem\",\n    },\n  },\n  td: {\n    paddingTop: {\n      default: \"0.625rem\",\n      [mq.phone]: \"0.875rem\",\n    },\n    paddingBottom: {\n      default: \"0.625rem\",\n      [mq.phone]: \"0.875rem\",\n    },\n    paddingInlineStart: {\n      default: \"0.75rem\",\n      \":first-child\": \"1.25rem\",\n      [mq.phone]: \"0.75rem\",\n    },\n    paddingInlineEnd: {\n      default: \"1rem\",\n      \":last-child\": \"1.25rem\",\n      [mq.phone]: \"0.75rem\",\n    },\n    color: vlak.gray,\n    fontWeight: 500,\n    letterSpacing: \"-0.01em\",\n    borderBottomWidth: vlak.hairline,\n    borderBottomStyle: \"solid\",\n    borderBottomColor: vlak.divider,\n    verticalAlign: \"top\",\n    textAlign: {\n      default: \"start\",\n      \":last-child\": \"end\",\n    },\n  },\n  row: {\n    backgroundColor: {\n      default: \"transparent\",\n      \":nth-child(even)\": \"var(--table-alt)\",\n    },\n  },\n  total: {\n    fontWeight: 500,\n    color: \"var(--text)\",\n    borderTopWidth: 2,\n    borderTopStyle: \"solid\",\n    borderTopColor: vlak.divider,\n    borderBottomWidth: 2,\n    borderBottomStyle: \"solid\",\n    borderBottomColor: vlak.divider,\n    backgroundColor: \"transparent\",\n  },\n  totalCell: {\n    fontWeight: 500,\n    color: \"var(--text)\",\n    borderTopWidth: 2,\n    borderBottomWidth: 2,\n  },\n});\n\n/** Open grid, 1px row rules, last column right-aligned. */\nexport const Table = React.forwardRef<HTMLTableElement, TableProps>(function Table(\n  { className, style, ...props },\n  ref,\n) {\n  const sx = rs([\"rs-table\", className], styles.table);\n  return <table ref={ref} {...props} className={sx.className} style={{ ...sx.style, ...style }} />;\n});\n\nexport const TableHead = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(function TableHead(\n  { className, style, ...props },\n  ref,\n) {\n  return <thead ref={ref} className={className} style={style} {...props} />;\n});\n\nexport const TableBody = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(function TableBody(\n  { className, style, ...props },\n  ref,\n) {\n  return <tbody ref={ref} className={className} style={style} {...props} />;\n});\n\nexport const TableRow = React.forwardRef<HTMLTableRowElement, TableRowProps>(function TableRow(\n  { total, className, style, ...props },\n  ref,\n) {\n  const sx = rs([total && \"rs-total-row\", className, \"rs-table-row\"], styles.row, total && styles.total);\n  return <tr ref={ref} {...props} className={sx.className} style={{ ...sx.style, ...style }} />;\n});\n\nexport const TableTh = React.forwardRef<HTMLTableCellElement, TableHeaderCellProps>(function TableTh(\n  { className, style, ...props },\n  ref,\n) {\n  const sx = rs([className, \"rs-table-th\"], styles.th);\n  return <th ref={ref} {...props} className={sx.className} style={{ ...sx.style, ...style }} />;\n});\n\nexport const TableTd = React.forwardRef<HTMLTableCellElement, TableCellProps>(function TableTd(\n  { total, className, style, ...props },\n  ref,\n) {\n  const sx = rs([className, \"rs-table-td\", total && \"rs-table-total-cell\"], styles.td, total && styles.totalCell);\n  return <td ref={ref} {...props} className={sx.className} style={{ ...sx.style, ...style }} />;\n});\n",
      "type": "registry:component",
      "target": "components/vlak/table.tsx"
    },
    {
      "path": "vlak/styles/table.css",
      "content": "/* ── table: generated from packages/react/src/components/table.tsx ── */\n.rs-table{width:calc(100% + 40px);border-collapse:collapse;margin-top:1rem;margin-bottom:1.5rem;margin-inline-start:-1.25rem;margin-inline-end:0;font-size:0.875rem}\n@media (max-width: 640px){.rs-table{width:calc(100% + 2 * var(--pad));margin-inline-start:calc(-1 * var(--pad));margin-inline-end:calc(-1 * var(--pad));font-size:1rem}}\n.rs-table-th{text-align:start;font-weight:600;color:var(--text);letter-spacing:-0.01em;padding-top:0.625rem;padding-bottom:0.625rem;padding-inline-start:0.75rem;padding-inline-end:1rem;border-bottom-width:2px;border-bottom-style:solid;border-bottom-color:var(--divider);font-size:0.8125rem}\n.rs-table-th:last-child{text-align:end;padding-inline-end:1.25rem}\n.rs-table-th:first-child{padding-inline-start:1.25rem}\n@media (max-width: 640px){.rs-table-th{padding-top:0.875rem;padding-bottom:0.875rem;padding-inline-start:0.75rem;padding-inline-end:0.75rem;font-size:0.9375rem}}\n.rs-table-td{padding-top:0.625rem;padding-bottom:0.625rem;padding-inline-start:0.75rem;padding-inline-end:1rem;color:var(--text-secondary);font-weight:500;letter-spacing:-0.01em;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:var(--divider);vertical-align:top;text-align:start}\n.rs-table-td:first-child{padding-inline-start:1.25rem}\n.rs-table-td:last-child{padding-inline-end:1.25rem;text-align:end}\n@media (max-width: 640px){.rs-table-td{padding-top:0.875rem;padding-bottom:0.875rem;padding-inline-start:0.75rem;padding-inline-end:0.75rem}}\n.rs-table-row{background-color:transparent}\n.rs-table-row:nth-child(even){background-color:var(--table-alt)}\n.rs-total-row{font-weight:500;color:var(--text);border-top-width:2px;border-top-style:solid;border-top-color:var(--divider);border-bottom-width:2px;border-bottom-style:solid;border-bottom-color:var(--divider);background-color:transparent}\n.rs-table-total-cell{font-weight:500;color:var(--text);border-top-width:2px;border-bottom-width:2px}\n",
      "type": "registry:file",
      "target": "styles/vlak/table.css"
    }
  ],
  "meta": {
    "vlak": {
      "category": "content",
      "classes": [
        "rs-table",
        "rs-total-row",
        "rs-table-row",
        "rs-table-td",
        "rs-table-th",
        "rs-table-total-cell"
      ],
      "snippet": "<table class=\"rs-table\"><thead><tr><th>Phase</th><th>Weeks</th></tr></thead><tbody><tr><td>Strategy</td><td>2</td></tr><tr><td>Identity</td><td>4</td></tr></tbody></table>",
      "cssOnly": false,
      "registryDependencies": [
        "vlak-lib"
      ],
      "aliases": [
        "Table",
        "Static table",
        "Grid"
      ],
      "example": "import { Table, TableBody, TableHead, TableRow, TableTd, TableTh } from \"@noorddev/vlak-react\";\n\n<Table>\n  <TableHead>\n    <TableRow>\n      <TableTh scope=\"col\">Phase</TableTh>\n      <TableTh scope=\"col\">Weeks</TableTh>\n    </TableRow>\n  </TableHead>\n  <TableBody>\n    <TableRow>\n      <TableTd>Strategy</TableTd>\n      <TableTd>2</TableTd>\n    </TableRow>\n    <TableRow total>\n      <TableTd total>Total</TableTd>\n      <TableTd total>6</TableTd>\n    </TableRow>\n  </TableBody>\n</Table>",
      "usage": {
        "use": [
          "Static tabular data with a last column of numbers.",
          "total on the closing row and its cells for 2px rules."
        ],
        "avoid": [
          "Sorting and empty states; use DataTable.",
          "Layout; use the grid."
        ]
      },
      "a11y": [
        "A native <table>; use TableTh with scope for headers and add a <caption> when the table needs a name.",
        "The ref on Table is forwarded to the <table>."
      ]
    }
  }
}