@bearmenu/ui 0.8.24 → 0.8.26

package/src/components/badge.stories.tsx

@@ -68,6 +68,23 @@ export const OnPrimary: Story = {
   ),
 };
 
+/** A booking's status and its code, as in My bookings (B6). */
+export const BookingStatus: Story = {
+  render: () => (
+    <div className="flex flex-wrap items-center gap-2">
+      <Badge as="span" variant="confirmed">
+        Confirmed
+      </Badge>
+      <Badge as="span" variant="pending">
+        Pending
+      </Badge>
+      <Badge as="span" variant="code">
+        BM-8421
+      </Badge>
+    </div>
+  ),
+};
+
 export const AllVariants: Story = {
   render: () => (
     <div className="flex flex-wrap items-center gap-3">

package/src/components/badge.tsx

@@ -23,6 +23,21 @@ const badgeVariants = cva(
         brown: "border-transparent bg-brown text-brown-foreground",
         /** A count sitting INSIDE a primary-filled control: its own ink, lifted a notch. */
         onPrimary: "border-transparent bg-primary-foreground/20 text-primary-foreground",
+        /**
+         * Status pills of a booking — "Confirmed", "Pending" — and its code
+         * chip ("BM-8421"). A full pill at 10.5px bold, as the booking design
+         * draws them. The status type is darker than the solid tokens: `success`
+         * and `warning` sit at 0.48 / 0.72 lightness, which on their own 15–20%
+         * wash fall short of AA at this size, so light mode uses the design's
+         * 0.38 / 0.42 inks and dark mode the lifted tokens.
+         */
+        // `border-0`: the base's transparent hairline would add 2px to each
+        // side the design does not have.
+        confirmed:
+          "rounded-full border-0 bg-success/15 px-[9px] py-[3px] text-[10.5px] leading-[1.2] font-bold text-[oklch(0.38_0.1_155)] dark:text-success",
+        pending:
+          "rounded-full border-0 bg-warning/20 px-[9px] py-[3px] text-[10.5px] leading-[1.2] font-bold text-[oklch(0.42_0.1_70)] dark:text-warning",
+        code: "rounded-full border-0 bg-surface-2 px-[9px] py-[3px] font-mono text-[10.5px] leading-[1.2] font-bold tabular-nums text-ink-secondary",
       },
       // v1.0 motion: "live" surface signal — applies `live-pulse` archetype.
       // Pair with a colored variant (e.g. variant="destructive" live).

package/src/components/banner.stories.tsx

@@ -0,0 +1,36 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { TriangleAlert } from "lucide-react";
+import { Banner } from "./banner";
+
+const meta: Meta<typeof Banner> = {
+  title: "Booking/Banner",
+  component: Banner,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "A short inline note inside a flow: the booking flow's 'time just went', 'no table was booked', 'this venue does not take bookings'. Borderless, unlike Alert.",
+      },
+    },
+  },
+  decorators: [(Story) => <div className="w-[335px]">{Story()}</div>],
+};
+
+export default meta;
+type Story = StoryObj<typeof Banner>;
+
+/** S5: the time went while the guest was typing. */
+export const Warning: Story = {
+  args: {
+    tone: "warning",
+    icon: <TriangleAlert aria-hidden />,
+    title: "19:30 just went",
+    children: "Someone booked it while you were filling this in. Your details are kept — pick another time.",
+  },
+};
+
+/** B0c: a venue that takes no bookings. */
+export const Info: Story = {
+  args: { tone: "info", children: "This venue does not take bookings. Walk-ins only." },
+};

package/src/components/banner.tsx

@@ -0,0 +1,58 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../lib/utils";
+
+/**
+ * Banner — a short inline note inside a flow, not a page-level alert: the
+ * booking flow's "19:30 just went" when a time is taken mid-form, "No table
+ * was booked" when a confirm fails, "This venue does not take bookings"
+ * (booking flow.html, `.bnr`).
+ *
+ * Not `Alert`: that one is a bordered card for page-level status with a
+ * pinned icon column. This is borderless, sits in the flow of a form, and
+ * reads as part of the screen — a soft ground, an optional 16px icon, an
+ * optional bold title over the body.
+ *
+ * Measured from the design: 12px radius, 12px × 14px inset, 10px between
+ * icon and text; the title at 13px bold, the body at 12.5px (90% in the
+ * warning tone), both at 1.5 leading.
+ * - `info`: the soft surface and the secondary ink.
+ * - `warning`: a 16% amber wash with the design's amber ink — darker than
+ *   the solid `--warning`, which falls short of AA on its own wash at this
+ *   size; dark mode uses the lifted token.
+ */
+const bannerVariants = cva(
+  "flex gap-2.5 rounded-xl px-3.5 py-3 text-[12.5px] leading-normal [&>svg]:mt-0.5 [&>svg]:size-4 [&>svg]:shrink-0",
+  {
+    variants: {
+      tone: {
+        info: "bg-surface-2 text-ink-secondary",
+        warning:
+          "bg-[oklch(0.62_0.15_70/0.16)] text-[oklch(0.42_0.1_70)] dark:bg-warning/15 dark:text-warning",
+      },
+    },
+    defaultVariants: { tone: "info" },
+  }
+);
+
+export type BannerProps = Omit<React.HTMLAttributes<HTMLDivElement>, "title"> &
+  VariantProps<typeof bannerVariants> & {
+    /** A lucide icon, drawn at 16px beside the text. */
+    icon?: React.ReactNode;
+    /** The bold first line — "19:30 just went". */
+    title?: React.ReactNode;
+  };
+
+function Banner({ tone, icon, title, className, children, ...props }: BannerProps) {
+  return (
+    <div data-slot="banner" className={cn(bannerVariants({ tone }), className)} {...props}>
+      {icon}
+      <div className="min-w-0">
+        {title ? <b className="block text-[13px] font-bold">{title}</b> : null}
+        <div className={cn(tone === "warning" && title ? "opacity-90" : undefined)}>{children}</div>
+      </div>
+    </div>
+  );
+}
+
+export { Banner, bannerVariants };

package/src/components/booking-details-primitives.test.tsx

@@ -0,0 +1,75 @@
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { TriangleAlert } from "lucide-react";
+import { cn } from "../lib/utils";
+import { Banner } from "./banner";
+import { Checkbox } from "./checkbox";
+import { Field, FieldControl, FieldError, FieldLabel, FieldOptional } from "./field";
+import { Input } from "./input";
+import { Textarea } from "./textarea";
+import { toggleVariants } from "./toggle";
+
+describe("toggleVariants chip and tab", () => {
+  it("keeps the chip's own sizing when called bare, with the default size", () => {
+    const classes = cn(toggleVariants({ variant: "chip" })).split(" ");
+    expect(classes).toContain("h-auto");
+    expect(classes).toContain("px-[13px]");
+    expect(classes).not.toContain("h-9");
+    expect(classes).not.toContain("px-2");
+  });
+
+  it("keeps the tab's own sizing too", () => {
+    const classes = cn(toggleVariants({ variant: "tab", size: "lg" })).split(" ");
+    expect(classes).toContain("h-auto");
+    expect(classes).toContain("px-3");
+    expect(classes).not.toContain("h-10");
+  });
+});
+
+describe("booking field", () => {
+  it("labels its control, marks it invalid and describes it by the error", () => {
+    render(
+      <Field appearance="booking" invalid>
+        <FieldLabel>
+          Phone <FieldOptional>(optional)</FieldOptional>
+        </FieldLabel>
+        <FieldControl>
+          <Input appearance="booking" defaultValue="0712 34" />
+        </FieldControl>
+        <FieldError>That number looks too short.</FieldError>
+      </Field>
+    );
+    const input = screen.getByLabelText(/Phone/);
+    expect(input).toHaveAttribute("aria-invalid", "true");
+    expect(input).toHaveAccessibleDescription(/That number looks too short\./);
+    expect(input.className).toContain("h-[46px]");
+    // The booking label stays muted when the field is invalid.
+    expect(screen.getByText(/Phone/).className).not.toContain("text-destructive");
+  });
+
+  it("gives the note field and the opt-in their booking shapes", () => {
+    render(
+      <>
+        <Textarea appearance="booking" aria-label="Anything we should know" />
+        <Checkbox appearance="booking" aria-label="Save these details" defaultChecked />
+      </>
+    );
+    expect(screen.getByRole("textbox").className).toContain("min-h-[66px]");
+    const box = screen.getByRole("checkbox");
+    expect(box).toHaveAttribute("data-state", "checked");
+    expect(box.className).toContain("size-[17px]");
+  });
+});
+
+describe("Banner", () => {
+  it("reads as its title over its body, with the icon beside", () => {
+    render(
+      <Banner tone="warning" icon={<TriangleAlert aria-hidden />} title="19:30 just went">
+        Someone booked it while you were filling this in.
+      </Banner>
+    );
+    const banner = screen.getByText("19:30 just went").closest("[data-slot=banner]");
+    expect(banner).toHaveTextContent("19:30 just wentSomeone booked it");
+    expect(banner?.querySelector("svg")).not.toBeNull();
+  });
+});

package/src/components/booking-primitives.test.tsx

@@ -0,0 +1,180 @@
+import { describe, it, expect, vi, afterEach } from "vitest";
+import { act, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { PartyCounter } from "./party-counter";
+import { TimeSlot, TimeSlotGroups, TimeSlotGroupsSkeleton } from "./time-slot";
+import { WeekdayChip } from "./weekday-chip";
+import { HoldCountdown } from "./hold-countdown";
+import { BookingSummaryCard } from "./booking-summary-card";
+import { BookingRow, BookingRowList } from "./booking-row";
+import { Calendar } from "./calendar";
+
+const counterLabels = {
+  decrease: "Fewer people",
+  increase: "More people",
+  unit: (count: number) => (count === 1 ? "person" : "people"),
+};
+
+describe("PartyCounter", () => {
+  it("steps the count within its range", async () => {
+    const user = userEvent.setup();
+    const onValueChange = vi.fn();
+    render(<PartyCounter value={2} min={1} max={8} onValueChange={onValueChange} labels={counterLabels} />);
+    await user.click(screen.getByRole("button", { name: "More people" }));
+    expect(onValueChange).toHaveBeenLastCalledWith(3);
+    await user.click(screen.getByRole("button", { name: "Fewer people" }));
+    expect(onValueChange).toHaveBeenLastCalledWith(1);
+  });
+
+  it("disables the end it has reached, keeping the value in place", () => {
+    render(<PartyCounter value={1} min={1} max={8} onValueChange={() => {}} labels={counterLabels} />);
+    expect(screen.getByRole("button", { name: "Fewer people" })).toBeDisabled();
+    expect(screen.getByRole("button", { name: "More people" })).toBeEnabled();
+    expect(screen.getByRole("status")).toHaveTextContent("1person");
+  });
+});
+
+describe("TimeSlot", () => {
+  it("is a pressed button when selected and reports the pick", async () => {
+    const user = userEvent.setup();
+    const onSelect = vi.fn();
+    render(<TimeSlot time="19:30" meta="Popular" onSelect={onSelect} />);
+    const slot = screen.getByRole("button", { name: /19:30/ });
+    expect(slot).toHaveAttribute("aria-pressed", "false");
+    await user.click(slot);
+    expect(onSelect).toHaveBeenCalledOnce();
+  });
+
+  it("cannot be picked when unavailable", async () => {
+    const user = userEvent.setup();
+    const onSelect = vi.fn();
+    render(<TimeSlot time="18:00" unavailable onSelect={onSelect} />);
+    await user.click(screen.getByRole("button", { name: "18:00" }));
+    expect(onSelect).not.toHaveBeenCalled();
+  });
+
+  it("labels each group so the grid reads as sections", () => {
+    render(
+      <TimeSlotGroups
+        groups={[
+          { key: "early", label: "Early", slots: [{ key: "17:00", time: "17:00" }] },
+          { key: "late", label: "Late", slots: [{ key: "21:30", time: "21:30", selected: true }] },
+        ]}
+      />
+    );
+    expect(screen.getByRole("region", { name: "Early" })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "21:30" })).toHaveAttribute("aria-pressed", "true");
+  });
+
+  it("announces what is being checked while times load", () => {
+    render(<TimeSlotGroupsSkeleton label="Checking availability for 4…" />);
+    expect(screen.getByRole("status")).toHaveTextContent("Checking availability for 4…");
+  });
+});
+
+describe("WeekdayChip", () => {
+  it("carries the full date for assistive tech and its pressed state", () => {
+    render(<WeekdayChip weekday="Fri" day="14" selected aria-label="Friday 14 August" />);
+    expect(screen.getByRole("button", { name: "Friday 14 August" })).toHaveAttribute("aria-pressed", "true");
+  });
+
+  it("cannot be picked when the venue is closed", () => {
+    render(<WeekdayChip weekday="Tue" day="11" unavailable />);
+    expect(screen.getByRole("button")).toBeDisabled();
+  });
+});
+
+describe("HoldCountdown", () => {
+  afterEach(() => vi.useRealTimers());
+
+  const labels = {
+    held: "Held for you",
+    explanation: "then it goes to the next person",
+    remaining: (m: number, s: number) => `${m} minutes ${s} seconds left`,
+  };
+
+  it("counts down and calls onExpire once at zero", () => {
+    vi.useFakeTimers();
+    let now = 0;
+    const onExpire = vi.fn();
+    render(<HoldCountdown expiresAt={2000} now={() => now} labels={labels} onExpire={onExpire} />);
+    expect(screen.getByRole("timer")).toHaveTextContent("00:02");
+    act(() => {
+      now = 2500;
+      vi.advanceTimersByTime(1000);
+    });
+    expect(screen.getByRole("timer")).toHaveTextContent("00:00");
+    act(() => {
+      now = 4000;
+      vi.advanceTimersByTime(2000);
+    });
+    expect(onExpire).toHaveBeenCalledOnce();
+  });
+
+  it("never shows a negative time", () => {
+    render(<HoldCountdown expiresAt={0} now={() => 60_000} labels={labels} />);
+    expect(screen.getByRole("timer")).toHaveTextContent("00:00");
+  });
+});
+
+describe("BookingSummaryCard", () => {
+  it("leaves out rows it has nothing for", () => {
+    render(
+      <BookingSummaryCard
+        venueName="Sălcii Bistro"
+        date="Fri 14 August"
+        timeAndParty="19:30 · 2 people"
+        code="BM-8421"
+        labels={{ code: "Booking code" }}
+      />
+    );
+    expect(screen.getByText("BM-8421")).toBeInTheDocument();
+    expect(screen.queryByText(/requested/)).not.toBeInTheDocument();
+  });
+});
+
+describe("BookingRow", () => {
+  it("is one link to the booking, with its status and code", () => {
+    render(
+      <BookingRowList aria-label="Upcoming bookings">
+        <BookingRow
+          venueName="Kane"
+          venueType="Bistro"
+          when="Sun 30 Aug · 18:30"
+          party="3 people"
+          status="pending"
+          statusLabel="Pending"
+          code="BM-6403"
+          href="/bookings/BM-6403"
+        />
+      </BookingRowList>
+    );
+    const list = screen.getByRole("list", { name: "Upcoming bookings" });
+    const link = screen.getByRole("link");
+    expect(list).toContainElement(link);
+    expect(link).toHaveAttribute("href", "/bookings/BM-6403");
+    expect(screen.getAllByText("Pending").length).toBeGreaterThan(0);
+  });
+});
+
+describe("Calendar booking appearance", () => {
+  it("marks a closed day and does not let it be picked", async () => {
+    const user = userEvent.setup();
+    const onSelect = vi.fn();
+    const closed = new Date(2026, 7, 25);
+    render(
+      <Calendar
+        appearance="booking"
+        mode="single"
+        defaultMonth={new Date(2026, 7, 1)}
+        onSelect={onSelect}
+        disabled={[closed]}
+        modifiers={{ closed: [closed] }}
+      />
+    );
+    const day = screen.getByRole("button", { name: /August 25/ });
+    expect(day).toHaveAttribute("data-closed", "true");
+    await user.click(day);
+    expect(onSelect).not.toHaveBeenCalled();
+  });
+});

package/src/components/booking-row.stories.tsx

@@ -0,0 +1,66 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { BookingRow, BookingRowList } from "./booking-row";
+
+const meta: Meta<typeof BookingRow> = {
+  title: "Booking/BookingRow",
+  component: BookingRow,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "A booking in My bookings. Three stacked lines on mobile; one line with the status, the code and a chevron on desktop, where the next booking up is tinted. The whole row is one link.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof BookingRow>;
+
+const rows = (
+  <BookingRowList aria-label="Upcoming bookings">
+    <BookingRow
+      venueName="Sălcii Bistro"
+      venueType="Bistro"
+      when="Fri 14 Aug · 19:30"
+      party="2 people"
+      status="confirmed"
+      statusLabel="Confirmed"
+      code="BM-8421"
+      href="#bm-8421"
+      highlighted
+    />
+    <BookingRow
+      venueName="Vatra"
+      venueType="Cocktail bar"
+      when="Thu 20 Aug · 20:00"
+      party="4 people"
+      status="confirmed"
+      statusLabel="Confirmed"
+      code="BM-7712"
+      href="#bm-7712"
+    />
+    <BookingRow
+      venueName="Kane"
+      venueType="Bistro"
+      when="Sun 30 Aug · 18:30"
+      party="3 people"
+      status="pending"
+      statusLabel="Pending"
+      code="BM-6403"
+      href="#bm-6403"
+    />
+  </BookingRowList>
+);
+
+/** B6 mobile. */
+export const Mobile: Story = {
+  render: () => <div className="w-[343px]">{rows}</div>,
+  parameters: { viewport: { defaultViewport: "mobile1" } },
+};
+
+/** B6 desktop. */
+export const Desktop: Story = {
+  render: () => <div className="w-[467px]">{rows}</div>,
+};

package/src/components/booking-row.tsx

@@ -0,0 +1,168 @@
+import * as React from "react";
+import { ChevronRight } from "lucide-react";
+import { cn } from "../lib/utils";
+import { Badge } from "./badge";
+
+/**
+ * BookingRow and BookingRowList — the guest's bookings in "My bookings".
+ *
+ * Measured from the booking design (`.bkrow`, and the desktop list):
+ *
+ * Mobile (below `md`): rows 14px tall-padded, 12px gap, divided by a
+ * `line-soft` hairline. A 50px thumb with an 11px radius. Line one: the venue
+ * at 14px bold, the code chip pushed right. Line two: the venue type at 11.5px
+ * muted. Line three, 7px gaps: when at 12.5px medium, the party at 12px muted,
+ * then the status pill.
+ *
+ * Desktop (`md` and up): one card (14px radius, no inset), rows 14px × 18px
+ * with 14px gaps, divided by the same hairline. A 46px thumb, then the venue
+ * (bold) with its type inline and muted over "when · party" in the secondary
+ * ink, then the status pill, the code chip and a muted chevron. The row that
+ * is next up gets a 5% accent wash.
+ *
+ * The whole row is one link. Strings arrive formatted and localised; the thumb
+ * arrives rendered, so the app picks its own image component.
+ */
+
+export type BookingRowStatus = "confirmed" | "pending";
+
+export type BookingRowLinkProps = {
+  href: string;
+  className?: string;
+  children: React.ReactNode;
+};
+
+function DefaultLink({ href, ...props }: BookingRowLinkProps) {
+  return <a href={href} {...props} />;
+}
+
+export type BookingRowProps = {
+  venueName: string;
+  /** "Bistro", "Cocktail bar" */
+  venueType?: string;
+  /** "Fri 14 Aug · 19:30" */
+  when: string;
+  /** "2 people" */
+  party: string;
+  status: BookingRowStatus;
+  /** "Confirmed", "Pending" — already localised. */
+  statusLabel: string;
+  code: string;
+  href: string;
+  /** The venue photo, rendered by the app; a quiet placeholder when absent. */
+  thumbnail?: React.ReactNode;
+  /** The next booking up — tinted on desktop. */
+  highlighted?: boolean;
+  linkComponent?: React.ComponentType<BookingRowLinkProps>;
+  className?: string;
+};
+
+function Thumb({ children, className }: { children?: React.ReactNode; className?: string }) {
+  return (
+    <span
+      aria-hidden
+      className={cn(
+        // Dark: `surface-2` sits a notch from the card and vanishes; the
+        // accent-tinted step reads as a photo slot.
+        "block shrink-0 overflow-hidden rounded-[11px] bg-surface-2 dark:bg-accent-subtle [&_img]:size-full [&_img]:object-cover",
+        className
+      )}
+    >
+      {children}
+    </span>
+  );
+}
+
+export function BookingRow({
+  venueName,
+  venueType,
+  when,
+  party,
+  status,
+  statusLabel,
+  code,
+  href,
+  thumbnail,
+  highlighted,
+  linkComponent: LinkComponent = DefaultLink,
+  className,
+}: BookingRowProps) {
+  const statusPill = (
+    <Badge as="span" variant={status}>
+      {statusLabel}
+    </Badge>
+  );
+  const codeChip = (
+    <Badge as="span" variant="code">
+      {code}
+    </Badge>
+  );
+
+  return (
+    <LinkComponent
+      href={href}
+      className={cn(
+        "flex gap-3 py-3.5 leading-[1.2] text-foreground",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset",
+        "md:items-center md:gap-3.5 md:px-[18px] md:hover:bg-accent/[0.03]",
+        highlighted && "md:bg-accent/5 md:hover:bg-accent/5",
+        className
+      )}
+    >
+      <Thumb className="size-[50px] md:size-[46px]">{thumbnail}</Thumb>
+
+      {/* Mobile: three stacked lines. */}
+      <div className="min-w-0 flex-1 md:hidden">
+        <div className="flex items-center justify-between gap-2">
+          <b className="truncate text-sm font-bold">{venueName}</b>
+          {codeChip}
+        </div>
+        {venueType && <div className="text-[11.5px] text-muted-foreground">{venueType}</div>}
+        <div className="mt-2 flex flex-wrap items-center gap-[7px]">
+          <span className="text-[12.5px] font-medium">{when}</span>
+          <span className="text-xs text-muted-foreground">{party}</span>
+          {statusPill}
+        </div>
+      </div>
+
+      {/* Desktop: one line. */}
+      <div className="hidden min-w-0 flex-1 md:block">
+        <div className="truncate">
+          <b className="text-sm font-bold">{venueName}</b>
+          {venueType && <span className="ml-1.5 text-xs text-muted-foreground">{venueType}</span>}
+        </div>
+        <div className="mt-0.5 truncate text-[12.5px] text-ink-secondary">
+          {when} · {party}
+        </div>
+      </div>
+      <span className="hidden md:contents">
+        {statusPill}
+        {codeChip}
+        <ChevronRight aria-hidden className="size-[15px] shrink-0 text-muted-foreground" />
+      </span>
+    </LinkComponent>
+  );
+}
+
+export type BookingRowListProps = {
+  children: React.ReactNode;
+  /** "Upcoming bookings" — names the list for assistive tech. */
+  "aria-label"?: string;
+  className?: string;
+};
+
+/** The list around the rows: hairlines between them on mobile, one card on desktop. */
+export function BookingRowList({ children, "aria-label": ariaLabel, className }: BookingRowListProps) {
+  return (
+    <ul
+      aria-label={ariaLabel}
+      className={cn(
+        "divide-y divide-line-soft",
+        "md:overflow-hidden md:rounded-[14px] md:border md:border-border md:bg-card",
+        className
+      )}
+    >
+      {React.Children.map(children, (child) => (child ? <li>{child}</li> : null))}
+    </ul>
+  );
+}

package/src/components/booking-summary-card.stories.tsx

@@ -0,0 +1,41 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { BookingSummaryCard } from "./booking-summary-card";
+
+const meta: Meta<typeof BookingSummaryCard> = {
+  title: "Booking/BookingSummaryCard",
+  component: BookingSummaryCard,
+  tags: ["autodocs"],
+  args: {
+    venueName: "Sălcii Bistro",
+    date: "Fri 14 August",
+    timeAndParty: "19:30 · 2 people",
+    seating: "Terrace (requested)",
+    address: "Strada Iuliu Maniu 12",
+    code: "BM-8421",
+    labels: { code: "Booking code" },
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-[343px]">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "The booking at a glance on the confirmation screen: venue, when, party, seating asked for, address, and the code to give at the door.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof BookingSummaryCard>;
+
+/** B3. */
+export const Confirmed: Story = {};
+
+/** No seating preference: the row is left out, not shown empty. */
+export const NoPreference: Story = { args: { seating: undefined } };