Table bookingPro

A restaurant table picked in the thread: party, seating, a week of days and times that fit the party.

On this page

ProDinner for four this week: change the party and the times that cannot seat it drop back; the asked for time is marked.

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/table-booking

Usage

tsx

import { TableBooking } from "@/components/ui/chatcn/pro/table-booking"

<TableBooking
  restaurant={{ name: "Casa Loureiro", cuisine: "Portuguese, small plates", area: "Principe Real" }}
  days={week}
  defaultParty={4}
  requested="19:30"
  onBook={(booking) => restaurant.book(booking)}
  onWaitlist={(day, party) => restaurant.waitlist(day, party)}
/>

Change the party and the times that cannot seat it step back and strike through instead of disappearing, so you see what a smaller group would get. Each day carries three small ticks for how much is free for this party, amber when only a couple of times remain, none when full. The time asked for (requested) is marked with a dot and named over the grid; times with few tables say how many are left. A day with nothing for the party says so and offers the waitlist. The button names the day, time and party, and the confirmation gives the reference.

Examples

States

ProA table taken while deciding, a fully booked day with a waitlist, the largest party, closed, loading, error and disabled.

Props

Prop	Type	Notes
`restaurant`	`{ name, image?, cuisine?, area?, price? }`	Header
`days`	`{ date, slots: { time, maxParty, area?, left? }[], closed? }[]`	ISO dates, 24 hour times
`party`, `defaultParty`, `onPartyChange`, `maxParty`	`number`	Max default 8
`selection`, `defaultSelection`, `onSelectionChange`	`{ date, time, area? }`	The pick
`requested`	`string`	The time asked for
`policy`	`ReactNode`	Deposit or no show rule over the button
`onBook`	`(booking) => { reference? } \| Promise<...>`	Reject with an Error to show it
`onWaitlist`	`(day, party) => unknown \| Promise<unknown>`	Offered on full days
`now`, `locale`	`Date`, `string`	Today and date formatting
`loading`, `error`, `onRetry`, `disabled`		States
`labels`	`Partial<TableBookingLabels>`	Every string, for translation

Keyboard

Key	Action
Tab	Party stepper, seating, the days (one stop), the times (one stop), then Book
Arrow keys	Move within seating, days or times (native radios)

Accessibility

Days and times are radio groups; each day is named with how many times are free.
Times that cannot seat the party are disabled and named too small for your party.
The confirmation is a status message with the reference; errors are alerts.

Motion

Selection rings fade in 150 ms; the confirmation fades up 4 px in 180 ms. Reduced motion keeps the fades only.