@bearmenu/ui 0.8.23 → 0.8.25

package/dist/components/time-slot.d.ts

@@ -0,0 +1,73 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+/**
+ * TimeSlot and TimeSlotGroups — the bookable times in the booking flow's
+ * "When are you coming?" screen, the reserve panel on the venue page, and
+ * "Change party size".
+ *
+ * Measured from the booking design (`.tsl`, `.tgrid`, `.grouplbl`):
+ *   - A slot is a card with a 1px hairline, 11px radius, 8px × 4px inset,
+ *     centred. The time in mono at 14.5px bold, line-height 1. An optional
+ *     meta line under it at 9.5px, 3px apart — "Popular", "2 left" in accent,
+ *     "Waitlist" muted.
+ *   - Selected fills with `--gradient-primary`, white type, the meta at 80%.
+ *   - Unavailable fades to 32% with the time struck through.
+ *   - Groups are "Early / Evening / Late": a mono 10px small-caps label
+ *     (0.08em tracking, 14px above, 7px below) over a three-column grid with
+ *     7px gaps.
+ *
+ * A slot is a button with `aria-pressed`: one of many times, picked once.
+ */
+type TimeSlotTone = "default" | "waitlist";
+type TimeSlotProps = {
+    /** The time as displayed, already formatted in the venue's timezone — "19:30". */
+    time: string;
+    /** "Popular", "2 left", "Waitlist" — already localised. */
+    meta?: string;
+    /** `waitlist` renders the meta muted: the slot books onto the list, not a table. */
+    tone?: TimeSlotTone;
+    selected?: boolean;
+    /** Taken or past: faded and struck through, not clickable. */
+    unavailable?: boolean;
+    onSelect?: () => void;
+    /** Full accessible name, when the visible text is not enough ("19:30, popular"). */
+    "aria-label"?: string;
+    className?: string;
+};
+declare function TimeSlot({ time, meta, tone, selected, unavailable, onSelect, "aria-label": ariaLabel, className, }: TimeSlotProps): react_jsx_runtime.JSX.Element;
+type TimeSlotGroup = {
+    /** Stable key — "early", "evening", "late". */
+    key: string;
+    /** "Early", "Evening", "Late" — already localised; rendered small-caps. */
+    label: string;
+    slots: (TimeSlotProps & {
+        key: string;
+    })[];
+};
+type TimeSlotGroupsProps = {
+    groups: TimeSlotGroup[];
+    /** Columns in each group's grid. The design uses 3 everywhere; 2 only in very narrow panels. */
+    columns?: 2 | 3;
+    className?: string;
+};
+declare function TimeSlotGroupLabel({ children, className, }: {
+    children: React.ReactNode;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function TimeSlotGroups({ groups, columns, className }: TimeSlotGroupsProps): react_jsx_runtime.JSX.Element;
+type TimeSlotGroupsSkeletonProps = {
+    /** The label above the grid while times load — "Checking availability for 4…". */
+    label: string;
+    rows?: number;
+    columns?: 2 | 3;
+    className?: string;
+};
+/**
+ * The grid while times load (S1). Same cells, same gaps, so nothing jumps when
+ * the real times land: a slot's footprint with a dashed hairline at 60%, a
+ * soft bar in place of the time. The label says what is being checked.
+ */
+declare function TimeSlotGroupsSkeleton({ label, rows, columns, className, }: TimeSlotGroupsSkeletonProps): react_jsx_runtime.JSX.Element;
+
+export { TimeSlot, type TimeSlotGroup, TimeSlotGroupLabel, TimeSlotGroups, type TimeSlotGroupsProps, TimeSlotGroupsSkeleton, type TimeSlotGroupsSkeletonProps, type TimeSlotProps, type TimeSlotTone };

package/dist/components/time-slot.js

@@ -0,0 +1,106 @@
+import { Skeleton } from '../chunk-XBBEX4SF.js';
+import { cn } from '../chunk-FEK5XGZW.js';
+import { __objRest, __spreadValues } from '../chunk-MMUBH76A.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function TimeSlot({
+  time,
+  meta,
+  tone = "default",
+  selected,
+  unavailable,
+  onSelect,
+  "aria-label": ariaLabel,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      "data-slot": "time-slot",
+      "aria-pressed": selected ? true : false,
+      "aria-label": ariaLabel,
+      disabled: unavailable,
+      onClick: onSelect,
+      className: cn(
+        // Content sits at the top: a slot without a meta line in a row with
+        // one is stretched by the grid, and the time must not drop to the middle.
+        "flex w-full cursor-pointer flex-col items-center justify-start rounded-[11px] border px-1 py-2 text-center leading-[1.2]",
+        "transition-[border-color,filter] duration-150 motion-reduce:transition-none",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+        selected ? "border-transparent bg-[image:var(--gradient-primary)] text-white hover:brightness-[0.94]" : "border-border bg-card text-foreground hover:border-accent/50",
+        unavailable && "cursor-not-allowed opacity-[0.32] hover:border-border"
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "b",
+          {
+            className: cn(
+              "block font-mono text-[14.5px] leading-none font-bold tabular-nums",
+              unavailable && "line-through"
+            ),
+            children: time
+          }
+        ),
+        meta && /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "mt-[3px] block text-[9.5px] leading-[1.2]",
+              selected ? "text-white/80" : tone === "waitlist" ? "text-muted-foreground" : "text-accent"
+            ),
+            children: meta
+          }
+        )
+      ]
+    }
+  );
+}
+var GRID_COLUMNS = { 2: "grid-cols-2", 3: "grid-cols-3" };
+function TimeSlotGroupLabel({
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "mb-[7px] font-mono text-[10px] leading-none font-semibold tracking-[0.08em] text-muted-foreground uppercase",
+        className
+      ),
+      children
+    }
+  );
+}
+function TimeSlotGroups({ groups, columns = 3, className }) {
+  return /* @__PURE__ */ jsx("div", { "data-slot": "time-slot-groups", className, children: groups.map((group) => (
+    // 14px between groups; the first sits flush with whatever is above.
+    /* @__PURE__ */ jsxs("section", { "aria-label": group.label, className: "[&+&]:mt-3.5", children: [
+      /* @__PURE__ */ jsx(TimeSlotGroupLabel, { children: group.label }),
+      /* @__PURE__ */ jsx("div", { className: cn("grid gap-[7px]", GRID_COLUMNS[columns]), children: group.slots.map((_a) => {
+        var _b = _a, { key } = _b, slot = __objRest(_b, ["key"]);
+        return /* @__PURE__ */ jsx(TimeSlot, __spreadValues({}, slot), key);
+      }) })
+    ] }, group.key)
+  )) });
+}
+function TimeSlotGroupsSkeleton({
+  label,
+  rows = 3,
+  columns = 3,
+  className
+}) {
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "time-slot-groups-skeleton", role: "status", "aria-live": "polite", className, children: [
+    /* @__PURE__ */ jsx(TimeSlotGroupLabel, { children: label }),
+    /* @__PURE__ */ jsx("div", { className: cn("grid gap-[7px]", GRID_COLUMNS[columns]), "aria-hidden": true, children: Array.from({ length: rows * columns }, (_, index) => /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: "block rounded-[11px] border border-dashed border-border bg-card px-1 py-2 opacity-60 dark:opacity-100",
+        children: /* @__PURE__ */ jsx(Skeleton, { className: "mx-auto h-[17px] w-[90%] rounded-md" })
+      },
+      index
+    )) })
+  ] });
+}
+
+export { TimeSlot, TimeSlotGroupLabel, TimeSlotGroups, TimeSlotGroupsSkeleton };

package/dist/components/toggle-group.js

@@ -1,4 +1,4 @@
-import { toggleVariants } from '../chunk-TIQNM4XD.js';
+import { toggleVariants } from '../chunk-VEGFQSZA.js';
 import { cn } from '../chunk-FEK5XGZW.js';
 import { __objRest, __spreadProps, __spreadValues } from '../chunk-MMUBH76A.js';
 import * as React from 'react';
@@ -32,6 +32,12 @@ function ToggleGroup(_a) {
         // The segmented control's capsule: muted ground, the on cell a raised
         // card inside it (see `toggleVariants.segmented`). 44px tall.
         "data-[variant=segmented]:gap-0.5 data-[variant=segmented]:rounded-full data-[variant=segmented]:bg-muted data-[variant=segmented]:p-0.5",
+        // Chips wrap onto as many rows as they need, 7px apart.
+        "data-[variant=chip]:flex-wrap data-[variant=chip]:gap-[7px] data-[variant=chip]:rounded-none",
+        // The tab bar spans its container: a muted capsule, 4px inset.
+        // Dark swaps the steps: the track takes the card, the ON tab the
+        // lighter `surface-2`, so the tab still reads as raised.
+        "data-[variant=tab]:w-full data-[variant=tab]:gap-1 data-[variant=tab]:rounded-full data-[variant=tab]:bg-surface-2 data-[variant=tab]:p-1 dark:data-[variant=tab]:bg-card",
         className
       )
     }, props), {
@@ -65,7 +71,14 @@ function ToggleGroupItem(_a) {
           size: context.size || size
         }),
         "min-w-0 flex-1 shrink-0 shadow-none focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l",
-        resolved === "segmented" ? "rounded-full px-0 data-[state=on]:shadow-[var(--shadow-card)]" : "rounded-none first:rounded-l-md last:rounded-r-md",
+        resolved === "segmented" ? "rounded-full px-0 data-[state=on]:shadow-[var(--shadow-card)]" : (
+          // Tabs and chips size to their type: the size variant's fixed
+          // height and min-width would otherwise win the merge.
+          resolved === "tab" ? "h-auto min-w-0 rounded-full px-3" : resolved === "chip" ? (
+            // A chip keeps its own width, so the row can wrap.
+            "h-auto min-w-0 flex-none rounded-full px-[13px]"
+          ) : "rounded-none first:rounded-l-md last:rounded-r-md"
+        ),
         className
       )
     }, props), {

package/dist/components/toggle.d.ts

@@ -5,7 +5,7 @@ import * as TogglePrimitive from '@radix-ui/react-toggle';
 import { VariantProps } from 'class-variance-authority';
 
 declare const toggleVariants: (props?: ({
-    variant?: "default" | "outline" | "segmented" | null | undefined;
+    variant?: "tab" | "default" | "outline" | "chip" | "segmented" | null | undefined;
     size?: "default" | "sm" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare function Toggle({ className, variant, size, ...props }: React.ComponentProps<typeof TogglePrimitive.Root> & VariantProps<typeof toggleVariants>): react_jsx_runtime.JSX.Element;

package/dist/components/toggle.js

@@ -1,3 +1,3 @@
-export { Toggle, toggleVariants } from '../chunk-TIQNM4XD.js';
+export { Toggle, toggleVariants } from '../chunk-VEGFQSZA.js';
 import '../chunk-FEK5XGZW.js';
 import '../chunk-MMUBH76A.js';

package/dist/components/top-ranking-entry.js

@@ -1,8 +1,8 @@
-import { MenuItem } from '../chunk-SDWN6L4O.js';
-import '../chunk-BKKQ7GCZ.js';
+import { MenuItem } from '../chunk-AHHDC7ML.js';
+import '../chunk-QG6I2ILT.js';
 import { Separator } from '../chunk-NWZGSLPU.js';
 import { Skeleton } from '../chunk-XBBEX4SF.js';
-import '../chunk-5XREWOBB.js';
+import '../chunk-IEIJP73R.js';
 import { cn } from '../chunk-FEK5XGZW.js';
 import { __objRest, __spreadValues } from '../chunk-MMUBH76A.js';
 import { MapPin, Star, MessageSquareQuote } from 'lucide-react';

package/dist/components/weekday-chip.d.ts

@@ -0,0 +1,33 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+/**
+ * WeekdayChip — one day in the booking flow's week rail on mobile
+ * ("MON 10 · TUE 11 · … · SUN 16" in "When are you coming?").
+ *
+ * Not `DayRailChip`: that one is the events timeline's day, with a single-line
+ * label and an event count. This one is a date picker's day — weekday stacked
+ * over the date, no count — and the rail shares the width equally.
+ *
+ * Measured from the booking design (`.dchip`): flexes to an equal share, 1px
+ * hairline, 11px radius, 7px vertical inset, centred. The weekday at 10px
+ * uppercase, 0.05em tracking, muted; the date at 15px bold, tabular, 2px
+ * below. Selected fills with `--gradient-primary`, white type, the weekday at
+ * 75%. A day that cannot be booked (closed, past the window) fades to 40% and
+ * is disabled.
+ */
+type WeekdayChipProps = {
+    /** "Mon", "Tue" — already localised; rendered uppercase. */
+    weekday: string;
+    /** Day of month as displayed — "14". */
+    day: string;
+    selected?: boolean;
+    /** Closed that day or outside the booking window. */
+    unavailable?: boolean;
+    onSelect?: () => void;
+    /** The full date for assistive tech — "Friday 14 August". */
+    "aria-label"?: string;
+    className?: string;
+};
+declare function WeekdayChip({ weekday, day, selected, unavailable, onSelect, "aria-label": ariaLabel, className, }: WeekdayChipProps): react_jsx_runtime.JSX.Element;
+
+export { WeekdayChip, type WeekdayChipProps };

package/dist/components/weekday-chip.js

@@ -0,0 +1,48 @@
+import { cn } from '../chunk-FEK5XGZW.js';
+import '../chunk-MMUBH76A.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function WeekdayChip({
+  weekday,
+  day,
+  selected,
+  unavailable,
+  onSelect,
+  "aria-label": ariaLabel,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      "data-slot": "weekday-chip",
+      "aria-pressed": selected ? true : false,
+      "aria-label": ariaLabel,
+      disabled: unavailable,
+      onClick: onSelect,
+      className: cn(
+        "min-w-0 flex-1 cursor-pointer rounded-[11px] border py-[7px] text-center leading-[1.2]",
+        "transition-[border-color,filter] duration-150 motion-reduce:transition-none",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+        selected ? "border-transparent bg-[image:var(--gradient-primary)] text-white" : "border-border bg-card text-foreground hover:border-accent/50",
+        unavailable && "cursor-not-allowed opacity-40 hover:border-border",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "block text-[10px] tracking-[0.05em] uppercase",
+              selected ? "text-white/75" : "text-muted-foreground"
+            ),
+            children: weekday
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "mt-0.5 block text-[15px] font-bold tabular-nums", children: day })
+      ]
+    }
+  );
+}
+
+export { WeekdayChip };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bearmenu/ui",
-  "version": "0.8.23",
+  "version": "0.8.25",
   "description": "BearMenu design system — shared UI tokens, primitives, and components",
   "license": "UNLICENSED",
   "repository": {

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/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>,
+};