# Booking pill

One pill that reshapes through party size, date, time, and a ticket.

- ID: `booking-pill`
- Import: `animui/booking-pill`
- Category: Special
- Runtime exports: `BookingPill`
- Declaration: `types/pro/booking-pill.d.ts`
- Type provenance: reconstructed-from-docs-and-runtime
- Related: date-picker, time-picker, calendar, number-field, stepper

```tsx
import { BookingPill } from 'animui/booking-pill';
```

This import example is not a complete render recipe: read the declaration below and its local references for required props, data, callbacks and provider context. Use `animui info booking-pill` to resolve the local declaration graph. Global setup is in `llms.txt`.

```ts
/** Reconstructed from saved Arc documentation and runtime binding evidence; original TypeScript source was unavailable. */
import type { ComponentType, ReactNode, CSSProperties, Ref, ButtonHTMLAttributes, HTMLAttributes, ReactElement } from 'react';

export interface BookingPillProps {
  venue: string;
  venueDetail?: string;
  startDate: string;
  days?: number;
  times?: string[];
  isAvailable?: (date: string, time: string, partySize: number) => boolean;
  preferredTime?: string;
  minPartySize?: number;
  maxPartySize?: number;
  defaultPartySize?: number;
  onConfirm?: (booking: { date: string; time: string; partySize: number }) => Promise<void> | void;
  onStepChange?: (step: "start" | "party" | "date" | "time" | "review" | "booked") => void;
  hourCycle?: 12 | 24;
  label?: string;
  className?: string;
}

export declare const BookingPill: ComponentType<BookingPillProps>;

export default BookingPill;
```