## Seat Map (S—208)

A theatre seat map: pick up to N seats, taken seats are struck out, price tiers by row, and a running total.

- URL: https://sundaeui.dev/components/seat-map
- Category: Checkout & payments · Art direction: Refined
- Access: Sundae Pro (authenticated install)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/seat-map.json`
- Tags: seats, theatre, tickets, booking, seat-picker, cinema

Rows are lettered and seats numbered, with an aisle gap. Choose seats up to the ticket limit; the oldest pick drops off when you go over.
Premium rows cost more and are marked with a ring. The footer lists the chosen seats and the total.

### Usage

```tsx
import { SeatMap } from '@/components/sundae/seat-map'

<SeatMap />
```

### Props

- `rows` (`string[]`): Row letters.
- `perRow` (`number`, default `10`): Seats per row.
- `taken` (`string[]`): Unavailable seats, like “C4”.
- `max` (`number`, default `4`): Ticket limit.
- `prices` (`Record<string, number>`): Price per row.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- Cinema, theatre, event and transport seating.

### When not to use

- General admission: use a quantity stepper.

### Accessibility

- The map is a grid; each seat is a toggle button labelled “Row C, seat 4, $18”.
- Arrow keys move between seats; taken seats are disabled.
- Reduced motion removes the movement and keeps every state change.

### Keyboard

- Arrow keys: Move between seats
- Space / Enter: Pick a seat