Grid

1/** @jsxImportSource hono/jsx */
2import type { PropsWithChildren } from "hono/jsx"
3import { cn, type ClassValue } from "@/registry/lib/cn"
4 
5// Grid — shadcn-htmx, htmx v4 + Tailwind v4.
6//
7// An INTERACTIVE data grid: a single tab stop with 2-D arrow-key cell
8// navigation (roving tabindex). This is deliberately distinct from the
9// static <Table> component — Table is the right choice for read-only
10// tabular data (every focusable link/button stays in the tab sequence and
11// AT gets native row/column navigation). Reach for Grid only when you want
12// spreadsheet-style cell focus and a SHORTER tab sequence (the whole grid
13// is one tab stop). See the APG comparison of the two patterns.
14//
15// shadcn/ui has no Grid component — this maps to the WAI-ARIA APG Grid
16// pattern, built on a real <table> so we inherit the semantic table model
17// and only layer the grid roles + roving tabindex on top.
18//
19// Refs (read before editing):
20//   repos/aria-practices/content/patterns/grid/grid-pattern.html
21//     — keyboard contract + roles/states. Arrow keys move one cell; Home/End
22//       jump to row ends; Ctrl+Home/End jump to the grid's first/last cell.
23//   repos/aria-practices/content/patterns/grid/examples/js/dataGrid.js
24//     — the reference roving-tabindex implementation we model (one cell at
25//       tabindex="0", the rest at -1; setFocusPointer rolls the 0).
26//   repos/mdn/files/en-us/web/html/reference/elements/table/index.md
27//   repos/mdn/files/en-us/web/accessibility/aria/reference/roles/grid_role/index.md
28//
29// The ARIA contract:
30//   - The container is a <table role="grid"> with an accessible name
31//     (aria-label or aria-labelledby). role="grid" switches screen readers
32//     into application mode so the arrow-key contract is exposed.
33//   - Native <tr> carries the implicit role="row"; <th scope="col"> the
34//     implicit role="columnheader"; <td> the implicit role="gridcell". We
35//     keep the native elements and do NOT add aria-rowspan/colspan — per the
36//     APG note, a grid built from a <table> must use HTML rowspan/colspan.
37//   - Every focusable cell is marked [data-grid-cell] so the keyboard layer
38//     can build its 2-D map. Exactly one carries tabindex="0"; the rest -1.
39//   - If a cell contains a single interactive widget (link/button), grid
40//     navigation focuses that widget directly (APG "focus an element inside
41//     the cell"); otherwise it focuses the cell itself. We expose that via
42// … truncated