@bearmenu/ui 0.8.24 → 0.8.25

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 } };

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

@@ -0,0 +1,109 @@
+import * as React from "react";
+import { CalendarDays, Clock, MapPin } from "lucide-react";
+import { cn } from "../lib/utils";
+
+/**
+ * BookingSummaryCard — the booking at a glance on the confirmation screen
+ * ("Your table is booked"): the venue, then when, how many, where you asked
+ * to sit and the address, then the booking code.
+ *
+ * Measured from the booking design (`.cardx` + `.rowi`): a card with a 1px
+ * hairline, 14px radius, 15px inset and a 1px/3px shadow. The venue at 16px
+ * bold. Rows 11px below it, 7px apart: a 14px icon (1.8 stroke, muted) in a
+ * 16px column, 10px gap, text at 13px in the secondary ink. Then a
+ * `line-soft` divider 13px below with 13px above the code row: "BOOKING CODE"
+ * at 10.5px uppercase, muted, and the code in mono at 15px bold, pushed right.
+ *
+ * Every string arrives formatted and localised; the card only lays them out.
+ */
+
+export type BookingSummaryCardLabels = {
+  /** "Booking code" */
+  code: string;
+};
+
+export type BookingSummaryCardProps = {
+  venueName: string;
+  /** "Fri 14 August" */
+  date: string;
+  /** "19:30 · 2 people" */
+  timeAndParty: string;
+  /** "Terrace (requested)" — omitted when there is no preference. */
+  seating?: string;
+  /** "Strada Iuliu Maniu 12" */
+  address?: string;
+  /** "BM-8421" */
+  code: string;
+  labels: BookingSummaryCardLabels;
+  className?: string;
+};
+
+function Row({ icon, children }: { icon: React.ReactNode; children: React.ReactNode }) {
+  return (
+    <div className="flex items-center gap-2.5 text-[13px] leading-4 text-ink-secondary [&+&]:mt-[7px]">
+      <span className="flex w-4 shrink-0 justify-center text-muted-foreground" aria-hidden>
+        {icon}
+      </span>
+      <span>{children}</span>
+    </div>
+  );
+}
+
+const ICON = "size-3.5 [stroke-width:1.8]";
+
+/**
+ * The design's seating glyph, a low bench-sofa. Not in lucide (Armchair and
+ * Sofa both read as a different object), so drawn from the design's own paths.
+ */
+function SeatIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      className={className}
+      aria-hidden
+    >
+      <path d="M5 11V7a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v4" />
+      <path d="M5 11a2 2 0 0 0 0 4h14a2 2 0 0 0 0-4" />
+      <path d="M6 15v3M18 15v3M7 15h10" />
+    </svg>
+  );
+}
+
+export function BookingSummaryCard({
+  venueName,
+  date,
+  timeAndParty,
+  seating,
+  address,
+  code,
+  labels,
+  className,
+}: BookingSummaryCardProps) {
+  return (
+    <div
+      data-slot="booking-summary-card"
+      className={cn(
+        "rounded-[14px] border border-border bg-card p-[15px] leading-[1.2] shadow-[0_1px_3px_oklch(0.5_0_0/0.1)]",
+        className
+      )}
+    >
+      <b className="text-base leading-5 font-bold text-foreground">{venueName}</b>
+      <div className="mt-[11px]">
+        <Row icon={<CalendarDays className={ICON} />}>{date}</Row>
+        <Row icon={<Clock className={ICON} />}>{timeAndParty}</Row>
+        {seating && <Row icon={<SeatIcon className={ICON} />}>{seating}</Row>}
+        {address && <Row icon={<MapPin className={ICON} />}>{address}</Row>}
+      </div>
+      <div className="mt-[13px] flex items-center justify-between border-t border-line-soft pt-[13px]">
+        <span className="text-[10.5px] tracking-[0.05em] text-muted-foreground uppercase">
+          {labels.code}
+        </span>
+        <b className="font-mono text-[15px] font-bold tabular-nums text-foreground">{code}</b>
+      </div>
+    </div>
+  );
+}

package/src/components/button.stories.tsx

@@ -127,6 +127,29 @@ export const AllVariants: Story = {
   ),
 };
 
+/**
+ * The committing action of the booking flow, on the brand gradient. `cta` in
+ * the footers ("Continue · 19:30", "Confirm booking"), `cta-sm` inline
+ * ("Confirm the table" beside the hold countdown). Beside it, the quiet
+ * `outline` for Back / Cancel.
+ */
+export const Cta: Story = {
+  render: () => (
+    <div className="flex flex-wrap items-center gap-3">
+      <Button variant="outline">Back</Button>
+      <Button variant="cta" size="cta">
+        Continue · 19:30
+      </Button>
+      <Button variant="cta" size="cta-sm">
+        Confirm the table
+      </Button>
+      <Button variant="cta" size="cta" disabled>
+        Continue
+      </Button>
+    </div>
+  ),
+};
+
 export const AllSizes: Story = {
   render: () => (
     <div className="flex items-center gap-4">

package/src/components/button.tsx

@@ -62,6 +62,15 @@ const buttonVariants = cva(
         /** An ON state that is not the primary — a toggled mode, a guide running. */
         warning:
           "bg-warning text-warning-foreground shadow-sm hover:bg-warning/90 hover:shadow",
+        /**
+         * The committing action of a flow: "Continue · 19:30", "Confirm
+         * booking", "Reserve", "See booking". The booking design draws every
+         * one of them on `--gradient-primary` with white type, in both themes —
+         * the gradient is warm in dark too, so the ink never inverts.
+         * `bg-[image:…]`, not `bg-[…]`: the token is a gradient, and only
+         * `background-image` accepts it. Pair with `size="cta"` / `"cta-sm"`.
+         */
+        cta: "bg-[image:var(--gradient-primary)] text-white hover:brightness-[0.94] active:brightness-90",
       },
       size: {
         xs: "h-8 rounded-lg px-3 text-xs [&_svg]:size-3.5",
@@ -70,6 +79,10 @@ const buttonVariants = cva(
         lg: "h-12 rounded-2xl px-8",
         /** The `ink` action's shape. Owns the radius so no variant fights it. */
         pill: "h-11 rounded-full px-5 text-[13.5px] font-bold",
+        /** The booking design's action: 46px, 12px radius, 15px semibold. */
+        cta: "h-[46px] rounded-xl px-5 text-[15px] font-semibold",
+        /** Its compact form, in dense footers and inline rows: 38px, 10px radius. */
+        "cta-sm": "h-[38px] rounded-[10px] px-4 text-[13.5px] font-semibold",
         icon: "h-11 w-11 rounded-full",
         "icon-xs": "h-8 w-8 rounded-full [&_svg]:size-3.5",
         "icon-sm": "h-9 w-9 rounded-full",

package/src/components/calendar.stories.tsx

@@ -45,3 +45,30 @@ function CalendarRangeDemo() {
 export const Range: Story = {
   render: () => <CalendarRangeDemo />,
 };
+
+/**
+ * The booking flow's month grid (B1 desktop): 32px round cells in mono,
+ * the chosen day on the brand gradient, past days faded, a closed day struck
+ * through. Frozen on August 2026 so it matches the design frame.
+ */
+function BookingCalendarDemo() {
+  const [date, setDate] = useState<Date | undefined>(new Date(2026, 7, 14));
+  return (
+    <div className="w-[270px]">
+      <Calendar
+        appearance="booking"
+        mode="single"
+        weekStartsOn={1}
+        defaultMonth={new Date(2026, 7, 1)}
+        selected={date}
+        onSelect={setDate}
+        disabled={[{ before: new Date(2026, 7, 6) }, new Date(2026, 7, 25)]}
+        modifiers={{ closed: [new Date(2026, 7, 25)] }}
+      />
+    </div>
+  );
+}
+
+export const Booking: Story = {
+  render: () => <BookingCalendarDemo />,
+};