{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "data-table",
  "type": "registry:component",
  "title": "Data table",
  "description": "The ledger register: token-driven row pitch, hairline-only header, right-aligned tabular money, em-dash empties, no zebra, no shadow.",
  "registryDependencies": [
    "@venlyfinance/venly-tokens"
  ],
  "files": [
    {
      "path": "registry/components/data-table.tsx",
      "type": "registry:component",
      "target": "~/components/venly/components/data-table.tsx",
      "content": "import { useState, type CSSProperties, type ReactElement, type ReactNode } from \"react\";\n\n/**\n * Data table – the ledger register.\n *\n * Design contract encoded by this component:\n * - Density is the diagnostic number: row pitch ÷ body size targets\n *   2.4–3.8×. Pitch comes from --row-pitch; never inflate with padding.\n * - Header: hairline-only, no fill, micro-size grey sentence case, ~32px.\n * - Money right-aligned tabular; two numeric columns share a right edge.\n * - Hover = full-row ~3% neutral tint, never a border or shadow.\n * - Empty cells render an em-dash – blank reads as a load failure.\n * - Cells truncate with ellipsis; wrapping rows destroy scanability.\n * - No zebra striping: hairline separators only.\n * - Grouped mode: section bands at ~60% of a data row ([chevron] name ·\n *   count). Empty groups are still DRAWN, collapsed to the single band –\n *   \"Pending: 0\" is a state, not a missing feature. Needs-attention groups\n *   carry a small dot; the count is the signal, absence of a count means\n *   nothing to do.\n */\nexport interface DataTableColumn<Row> {\n  key: string;\n  header: string;\n  /** Money columns set this: right-aligns and applies tabular figures. */\n  money?: boolean;\n  align?: \"left\" | \"right\";\n  width?: string;\n  cell: (row: Row) => ReactNode;\n}\n\nexport interface DataTableGroup<Row> {\n  key: string;\n  label: string;\n  rows: Row[];\n  /** Renders the small dot beside the label when the group has rows. */\n  attention?: boolean;\n}\n\nexport interface DataTableProps<Row> {\n  columns: DataTableColumn<Row>[];\n  rows: Row[];\n  rowKey: (row: Row) => string;\n  onRowClick?: (row: Row) => void;\n  /** Row currently opened in a side panel; stays tinted. */\n  selectedKey?: string;\n  /**\n   * Sectioned rendering: rows come from the groups, in order, each under\n   * its own collapsible band. `rows` is ignored while groups are set.\n   */\n  groups?: DataTableGroup<Row>[];\n  /**\n   * Controlled collapse state per group key. Provide it (with\n   * onGroupToggle) when anything OUTSIDE the table depends on which rows\n   * are actually rendered – e.g. a keyboard row-stepper must never select\n   * a row whose group is collapsed. Uncontrolled when omitted.\n   */\n  collapsedGroups?: Record<string, boolean>;\n  onGroupToggle?: (key: string, collapsed: boolean) => void;\n  emptyMessage?: string;\n  style?: CSSProperties;\n  className?: string;\n}\n\nconst EMPTY = \"—\";\n\nfunction cellContent(value: ReactNode): ReactNode {\n  return value === null || value === undefined || value === \"\" ? EMPTY : value;\n}\n\nexport function DataTable<Row>({\n  columns,\n  rows,\n  rowKey,\n  onRowClick,\n  selectedKey,\n  groups,\n  collapsedGroups,\n  onGroupToggle,\n  emptyMessage = \"Nothing here yet\",\n  style,\n  className,\n}: DataTableProps<Row>): ReactElement {\n  const [internalCollapsed, setInternalCollapsed] = useState<Record<string, boolean>>({});\n  const collapsed = collapsedGroups ?? internalCollapsed;\n  const toggleGroup = (key: string, next: boolean) => {\n    if (collapsedGroups === undefined) setInternalCollapsed((c) => ({ ...c, [key]: next }));\n    onGroupToggle?.(key, next);\n  };\n\n  const renderRow = (row: Row): ReactElement => {\n    const key = rowKey(row);\n    const selected = key === selectedKey;\n    return (\n      <tr\n        key={key}\n        data-selected={selected || undefined}\n        onClick={onRowClick ? () => onRowClick(row) : undefined}\n        style={{\n          height: \"var(--row-pitch)\",\n          borderBottom: \"var(--border-w-hairline) solid var(--border-hairline)\",\n          background: selected ? \"var(--selected-tint)\" : undefined,\n          cursor: onRowClick ? \"pointer\" : undefined,\n        }}\n      >\n        {columns.map((col) => (\n          <td\n            key={col.key}\n            style={{\n              padding: \"var(--cell-pad-y) var(--cell-pad-x)\",\n              textAlign: col.money ? \"right\" : (col.align ?? \"left\"),\n              fontVariantNumeric: col.money ? \"tabular-nums\" : undefined,\n              maxWidth: 0,\n              overflow: \"hidden\",\n              textOverflow: \"ellipsis\",\n              whiteSpace: \"nowrap\",\n            }}\n          >\n            {cellContent(col.cell(row))}\n          </td>\n        ))}\n      </tr>\n    );\n  };\n\n  return (\n    <table\n      className={className}\n      style={{\n        width: \"100%\",\n        borderCollapse: \"collapse\",\n        fontSize: \"var(--font-size-body)\",\n        fontFamily: \"var(--font-family)\",\n        color: \"var(--text-primary)\",\n        background: \"var(--surface-raised)\",\n        ...style,\n      }}\n    >\n      <thead>\n        <tr style={{ height: \"var(--header-pitch)\", borderBottom: \"var(--border-w-hairline) solid var(--border-hairline)\" }}>\n          {columns.map((col) => (\n            <th\n              key={col.key}\n              scope=\"col\"\n              style={{\n                textAlign: col.money ? \"right\" : (col.align ?? \"left\"),\n                fontSize: \"var(--font-size-micro)\",\n                fontWeight: 400,\n                color: \"var(--text-tertiary)\",\n                padding: \"0 var(--cell-pad-x)\",\n                width: col.width,\n                whiteSpace: \"nowrap\",\n              }}\n            >\n              {col.header}\n            </th>\n          ))}\n        </tr>\n      </thead>\n      <tbody>\n        {groups ? (\n          groups.flatMap((group) => {\n            const isEmpty = group.rows.length === 0;\n            const isCollapsed = isEmpty || (collapsed[group.key] ?? false);\n            const band = (\n              <tr key={`group-${group.key}`} data-group={group.key}>\n                <td colSpan={columns.length} style={{ padding: 0, borderBottom: \"var(--border-w-hairline) solid var(--border-hairline)\" }}>\n                  <button\n                    type=\"button\"\n                    aria-expanded={!isCollapsed}\n                    onClick={isEmpty ? undefined : () => toggleGroup(group.key, !isCollapsed)}\n                    style={{\n                      display: \"flex\",\n                      alignItems: \"center\",\n                      gap: \"var(--space-xs)\",\n                      width: \"100%\",\n                      height: \"var(--group-header-pitch)\",\n                      border: \"none\",\n                      background: \"none\",\n                      cursor: isEmpty ? \"default\" : \"pointer\",\n                      padding: \"0 var(--cell-pad-x)\",\n                      fontFamily: \"var(--font-family)\",\n                      fontSize: \"var(--font-size-micro)\",\n                      fontWeight: 500,\n                      color: \"var(--text-secondary)\",\n                      textAlign: \"left\",\n                    }}\n                  >\n                    <span aria-hidden=\"true\">{isCollapsed ? \"▸\" : \"▾\"}</span>\n                    <span>{group.label}</span>\n                    <span style={{ color: \"var(--text-tertiary)\", fontWeight: 400 }}>\n                      {group.rows.length}\n                    </span>\n                    {group.attention && group.rows.length > 0 ? (\n                      <span\n                        aria-label=\"needs attention\"\n                        style={{\n                          width: \"var(--attention-dot)\",\n                          height: \"var(--attention-dot)\",\n                          borderRadius: \"var(--radius-pill)\",\n                          background: \"var(--accent)\",\n                        }}\n                      />\n                    ) : null}\n                  </button>\n                </td>\n              </tr>\n            );\n            return isCollapsed ? [band] : [band, ...group.rows.map(renderRow)];\n          })\n        ) : rows.length === 0 ? (\n          <tr>\n            <td\n              colSpan={columns.length}\n              style={{\n                padding: \"var(--space-2xl) var(--cell-pad-x)\",\n                color: \"var(--text-secondary)\",\n                textAlign: \"center\",\n              }}\n            >\n              {emptyMessage}\n            </td>\n          </tr>\n        ) : (\n          rows.map(renderRow)\n        )}\n      </tbody>\n    </table>\n  );\n}\n\n/**\n * Row content helper: primary 14px medium + secondary micro-size one tonal\n * step down. Secondary is de-emphasised by BOTH size and colour; invert to a\n * state colour only for warnings (\"Overdue 17 hours\").\n */\nexport function RowText({\n  primary,\n  secondary,\n  warn,\n}: {\n  primary: ReactNode;\n  secondary?: ReactNode;\n  warn?: boolean;\n}): ReactElement {\n  return (\n    <span style={{ display: \"inline-flex\", flexDirection: \"column\", lineHeight: 1.35 }}>\n      <span style={{ fontWeight: 500 }}>{primary}</span>\n      {secondary !== undefined ? (\n        <span\n          style={{\n            fontSize: \"var(--font-size-micro)\",\n            color: warn ? \"var(--state-danger-fg)\" : \"var(--text-tertiary)\",\n          }}\n        >\n          {secondary}\n        </span>\n      ) : null}\n    </span>\n  );\n}\n"
    }
  ]
}