State Matrix

1import * as React from "react"
2
3import { cn } from "@/lib/utils"
4
5const defaultStates = [
6  "default",
7  "hover",
8  "focus",
9  "active",
10  "disabled",
11] as const
12
13export function StateMatrix<Row extends string>({
14  rows,
15  states = defaultStates,
16  render,
17  className,
18}: {
19  rows: readonly Row[]
20  states?: readonly string[]
21  render: (row: Row, state: string) => React.ReactNode
22  className?: string
23}) {
24  return (
25    <div className={cn("w-full overflow-x-auto", className)}>
26      <table className="w-full border-separate border-spacing-x-2 border-spacing-y-3">
27        <thead>
28          <tr>
29            <th />
30            {states.map((state) => (
31              <th
32                key={state}
33                scope="col"
34                className="text-left font-mono text-xs font-normal text-muted-foreground"
35              >
36                {state}
37              </th>
38            ))}
39          </tr>
40        </thead>
41        <tbody>
42          {rows.map((row) => (
43            <tr key={row}>
44              <th
45                scope="row"
46                className="pr-4 text-left font-mono text-xs font-normal text-muted-foreground"
47              >
48                {row}
49              </th>
50              {states.map((state) => (
51                <td key={state}>{render(row, state)}</td>
52              ))}
53            </tr>
54          ))}
55        </tbody>
56      </table>
57    </div>
58  )
59}
60
61// Spread onto a component to pin a state without interaction.
62export function previewState(state: string) {
63  if (state === "disabled") {
64    return { disabled: true }
65  }
66
67  if (["hover", "focus", "active"].includes(state)) {
68    return { "data-preview": state }
69  }
70
71  return {}
72}