@bearmenu/ui 0.8.34 → 0.8.36

package/src/components/badge.stories.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { ChevronDown, Users } from "lucide-react";
+import { Armchair, Check, ChevronDown, CircleHelp, Clock, Users } from "lucide-react";
 import { Avatar, AvatarFallback, AvatarGroup } from "./avatar";
 import { Badge } from "./badge";
 import { Button } from "./button";
@@ -22,6 +22,10 @@ const meta = {
         "warning",
         "brown",
         "onPrimary",
+        "softSuccess",
+        "softWarning",
+        "softDestructive",
+        "softNeutral",
       ],
     },
   },
@@ -126,6 +130,33 @@ export const Assignee: Story = {
   ),
 };
 
+/**
+ * Soft tones with an icon — a booking's live status in a table row
+ * (calendar/11-dp): a wash of the status colour, its ink on top, a 14px glyph
+ * so the status never rests on colour alone.
+ */
+export const SoftTones: Story = {
+  render: () => (
+    <div className="flex flex-wrap items-center gap-2">
+      <Badge as="span" variant="softSuccess" icon={<Armchair />}>
+        Seated
+      </Badge>
+      <Badge as="span" variant="softDestructive" icon={<Clock />}>
+        25 min late
+      </Badge>
+      <Badge as="span" variant="softWarning" icon={<CircleHelp />}>
+        Needs an answer
+      </Badge>
+      <Badge as="span" variant="softNeutral" icon={<Check />}>
+        Confirmed
+      </Badge>
+      <Badge as="span" variant="softNeutral">
+        Now
+      </Badge>
+    </div>
+  ),
+};
+
 export const AllVariants: Story = {
   render: () => (
     <div className="flex flex-wrap items-center gap-3">

package/src/components/badge.test.tsx

@@ -0,0 +1,45 @@
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { Armchair } from "lucide-react";
+import { Badge } from "./badge";
+
+describe("Badge", () => {
+  it("renders the icon before the label and hides it from assistive tech", () => {
+    render(
+      <Badge variant="softSuccess" icon={<Armchair data-testid="glyph" />}>
+        Seated
+      </Badge>
+    );
+    const badge = screen.getByText("Seated");
+    const icon = badge.querySelector('[data-slot="badge-icon"]');
+    expect(icon).toHaveAttribute("aria-hidden", "true");
+    expect(icon).toContainElement(screen.getByTestId("glyph"));
+    expect(badge.firstElementChild).toBe(icon);
+    expect(badge).toHaveClass("gap-1");
+  });
+
+  it("renders no icon slot and no gap when there is no icon", () => {
+    render(<Badge variant="softNeutral">Confirmed</Badge>);
+    const badge = screen.getByText("Confirmed");
+    expect(badge.querySelector('[data-slot="badge-icon"]')).toBeNull();
+    expect(badge).not.toHaveClass("gap-1");
+  });
+
+  it.each([
+    ["softSuccess", "bg-success/15", "text-success-ink"],
+    ["softWarning", "bg-warning/20", "text-warning-ink"],
+    ["softDestructive", "bg-destructive/12", "text-destructive-ink"],
+    ["softNeutral", "bg-surface-2", "text-ink-secondary"],
+  ] as const)("%s paints a wash with the tone's ink token", (variant, wash, ink) => {
+    render(<Badge variant={variant}>Status</Badge>);
+    const badge = screen.getByText("Status");
+    expect(badge).toHaveClass(wash, ink);
+    // The solid fill tokens fall short of AA as text on their own wash.
+    expect(badge.className).not.toMatch(/\btext-(success|warning|destructive)\b(?!-)/);
+  });
+
+  it("keeps an existing variant unchanged", () => {
+    render(<Badge variant="success">Solid</Badge>);
+    expect(screen.getByText("Solid")).toHaveClass("bg-success", "text-success-foreground");
+  });
+});

package/src/components/badge.tsx

@@ -58,6 +58,22 @@ const badgeVariants = cva(
          */
         assignee:
           "rounded-full border-0 bg-surface-2 py-1 pl-1 pr-2 gap-1.5 text-[12px] leading-[1.2] font-semibold text-foreground",
+        /**
+         * Soft tones — a wash of the status colour with its INK on top, for a
+         * status that sits in a list and should not shout: the booking
+         * design's "Seated" (success), "25 min late" (destructive), "Needs an
+         * answer" (warning) and "Confirmed" (neutral) pills in a table row
+         * (calendar/11-dp, floor/14-w1, queue/02-q0).
+         *
+         * The ink tokens, not the solid ones: `--success` / `--warning` /
+         * `--destructive` are tuned as fills and fall short of AA as text on
+         * their own wash; `--*-ink` exists for exactly that. Usually paired
+         * with an `icon`, so the status does not rest on colour alone.
+         */
+        softSuccess: "rounded-md border-0 bg-success/15 px-2 py-1 text-success-ink",
+        softWarning: "rounded-md border-0 bg-warning/20 px-2 py-1 text-warning-ink",
+        softDestructive: "rounded-md border-0 bg-destructive/12 px-2 py-1 text-destructive-ink",
+        softNeutral: "rounded-md border-0 bg-surface-2 px-2 py-1 text-ink-secondary",
       },
       /**
        * `status` is the taller pill the booking design draws beside a
@@ -94,15 +110,37 @@ export interface BadgeProps
    * clickable row.
    */
   as?: "div" | "span";
+  /**
+   * A lucide glyph drawn at 14px before the label — the armchair on
+   * "Seated", the clock on "25 min late". Decorative: the label carries the
+   * meaning, so the slot is `aria-hidden`.
+   */
+  icon?: React.ReactNode;
 }
 
-function Badge({ className, variant, size, live, as: Tag = "div", ...props }: BadgeProps) {
+function Badge({
+  className,
+  variant,
+  size,
+  live,
+  as: Tag = "div",
+  icon,
+  children,
+  ...props
+}: BadgeProps) {
   return (
     <Tag
       data-slot="badge"
-      className={cn(badgeVariants({ variant, size, live }), className)}
+      className={cn(badgeVariants({ variant, size, live }), icon ? "gap-1" : undefined, className)}
       {...props}
-    />
+    >
+      {icon ? (
+        <span data-slot="badge-icon" aria-hidden className="inline-flex shrink-0 [&>svg]:size-3.5">
+          {icon}
+        </span>
+      ) : null}
+      {children}
+    </Tag>
   );
 }
 

package/src/components/banner.stories.tsx

@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { TriangleAlert } from "lucide-react";
 import { Banner } from "./banner";
+import { Button } from "./button";
 
 const meta: Meta<typeof Banner> = {
   title: "Booking/Banner",
@@ -30,6 +31,37 @@ export const Warning: Story = {
   },
 };
 
+/** today/04-d3: a read that failed, on a page that is otherwise live. */
+export const Destructive: Story = {
+  args: {
+    tone: "destructive",
+    children: (
+      <>
+        <b className="font-bold">The queue didn&apos;t load.</b> This is on our side; everything
+        else is live.
+      </>
+    ),
+  },
+};
+
+/** reports/03-p9: the failure carries its own way out. */
+export const DestructiveWithAction: Story = {
+  args: {
+    tone: "destructive",
+    children: (
+      <>
+        <b className="font-bold">Walk-ins didn&apos;t load.</b> Covers and walk-in figures read —
+        until they do.
+      </>
+    ),
+    action: (
+      <Button variant="link" className="h-auto p-0 font-bold text-destructive-ink">
+        Retry
+      </Button>
+    ),
+  },
+};
+
 /** 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.test.tsx

@@ -0,0 +1,58 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { Banner } from "./banner";
+
+describe("Banner", () => {
+  it("paints the destructive tone with the ink token and a hairline", () => {
+    render(<Banner tone="destructive">The queue didn&apos;t load.</Banner>);
+    const banner = document.querySelector('[data-slot="banner"]');
+    expect(banner).toHaveClass("bg-destructive/10", "text-destructive-ink", "border");
+  });
+
+  it("draws the destructive tone's own glyph unless told otherwise", () => {
+    const { rerender } = render(<Banner tone="destructive">Failed</Banner>);
+    const banner = document.querySelector('[data-slot="banner"]');
+    expect(banner?.querySelector("svg")).toHaveAttribute("aria-hidden", "true");
+    rerender(
+      <Banner tone="destructive" icon={null}>
+        Failed
+      </Banner>
+    );
+    expect(banner?.querySelector("svg")).toBeNull();
+  });
+
+  it("places the action after the text and leaves it working", async () => {
+    const onRetry = vi.fn();
+    render(
+      <Banner
+        tone="destructive"
+        action={
+          <button type="button" onClick={onRetry}>
+            Retry
+          </button>
+        }
+      >
+        Walk-ins didn&apos;t load.
+      </Banner>
+    );
+    const banner = document.querySelector('[data-slot="banner"]');
+    const slot = document.querySelector('[data-slot="banner-action"]');
+    expect(banner?.lastElementChild).toBe(slot);
+    await userEvent.click(screen.getByRole("button", { name: "Retry" }));
+    expect(onRetry).toHaveBeenCalledOnce();
+  });
+
+  it("renders no action slot without an action", () => {
+    render(<Banner>Walk-ins only.</Banner>);
+    expect(document.querySelector('[data-slot="banner-action"]')).toBeNull();
+  });
+
+  it("keeps the info and warning tones borderless", () => {
+    const { rerender } = render(<Banner tone="info">Note</Banner>);
+    const banner = document.querySelector('[data-slot="banner"]');
+    expect(banner).not.toHaveClass("border");
+    rerender(<Banner tone="warning">Note</Banner>);
+    expect(banner).not.toHaveClass("border");
+  });
+});

package/src/components/banner.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { cva, type VariantProps } from "class-variance-authority";
-import { Info, TriangleAlert } from "lucide-react";
+import { CircleAlert, Info, TriangleAlert } from "lucide-react";
 import { cn } from "../lib/utils";
 
 /**
@@ -21,6 +21,14 @@ import { cn } from "../lib/utils";
  * - `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.
+ * - `destructive`: something did not load or did not happen — "The queue
+ *   didn't load", "Walk-ins didn't load" (today/04-d3, floor/02-s2,
+ *   reports/03-p9). A red wash with `--destructive-ink`, and the one tone
+ *   with a hairline: the booking frames draw it, because a failure has to
+ *   read as a boundary on a page already full of soft grounds.
+ *
+ * `action` takes the trailing control — the frames' "Retry". It sits on the
+ * right edge, centred on the text, and never wraps under it.
  */
 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",
@@ -30,6 +38,7 @@ const bannerVariants = cva(
         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",
+        destructive: "border border-destructive/25 bg-destructive/10 text-destructive-ink",
       },
     },
     defaultVariants: { tone: "info" },
@@ -45,22 +54,37 @@ export type BannerProps = Omit<React.HTMLAttributes<HTMLDivElement>, "title"> &
     icon?: React.ReactNode;
     /** The bold first line — "19:30 just went". */
     title?: React.ReactNode;
+    /**
+     * A trailing control — "Retry". Pass a real button (a `Button
+     * variant="link"` reads as the frames draw it); the banner only places it.
+     * A banner that announces a failure the user did not just cause is
+     * usually worth `role="status"` from the caller.
+     */
+    action?: React.ReactNode;
   };
 
 /** Each tone's own glyph, so a caller never has to remember which. */
 const TONE_ICON = {
   info: <Info aria-hidden />,
   warning: <TriangleAlert aria-hidden />,
+  destructive: <CircleAlert aria-hidden />,
 } as const;
 
-function Banner({ tone, icon, title, className, children, ...props }: BannerProps) {
+function Banner({ tone, icon, title, action, className, children, ...props }: BannerProps) {
   return (
     <div data-slot="banner" className={cn(bannerVariants({ tone }), className)} {...props}>
       {icon === undefined ? TONE_ICON[tone ?? "info"] : icon}
-      <div className="min-w-0">
+      <div className="min-w-0 flex-1">
         {title ? <b className="mb-[3px] block text-[13px] font-bold">{title}</b> : null}
-        <div className={cn(tone === "warning" && title ? "opacity-90" : undefined)}>{children}</div>
+        <div className={cn((tone === "warning" || tone === "destructive") && title ? "opacity-90" : undefined)}>
+          {children}
+        </div>
       </div>
+      {action ? (
+        <div data-slot="banner-action" className="shrink-0 self-center">
+          {action}
+        </div>
+      ) : null}
     </div>
   );
 }

package/src/components/booking-row.tsx

@@ -52,6 +52,16 @@ export type BookingRowProps = {
   href: string;
   /** The venue photo, rendered by the app; a quiet placeholder when absent. */
   thumbnail?: React.ReactNode;
+  /**
+   * One more chip about this booking, beside the status — "on this phone" for
+   * a booking the signed-in guest has not put in their account yet.
+   *
+   * A node rather than a string because the app owns what it says and how it
+   * is marked; the row only owns where it sits. It rides with the status on
+   * both layouts, so the two read as one cluster of facts about the booking
+   * rather than a second row of chrome.
+   */
+  note?: React.ReactNode;
   /** The next booking up — tinted on desktop. */
   highlighted?: boolean;
   linkComponent?: React.ComponentType<BookingRowLinkProps>;
@@ -84,6 +94,7 @@ export function BookingRow({
   code,
   href,
   thumbnail,
+  note,
   highlighted,
   linkComponent: LinkComponent = DefaultLink,
   className,
@@ -127,6 +138,7 @@ export function BookingRow({
         <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>
+          {note}
           {statusPill}
         </div>
       </div>
@@ -142,6 +154,7 @@ export function BookingRow({
         </div>
       </div>
       <span className="hidden md:contents">
+        {note}
         {statusPill}
         {codeChip}
         <ChevronRight aria-hidden className="size-[15px] shrink-0 text-muted-foreground" />

package/src/components/multi-select-combobox.tsx

@@ -93,7 +93,13 @@ export function MultiSelectCombobox({
           align="start"
         >
           <Command shouldFilter={shouldFilter}>
-            <CommandInput placeholder={searchPlaceholder} onValueChange={onSearchChange} />
+            {/* Spread rather than `onValueChange={onSearchChange}`: under a
+                consumer's `exactOptionalPropertyTypes`, passing a possibly
+                `undefined` value to cmdk's optional prop does not typecheck. */}
+            <CommandInput
+              placeholder={searchPlaceholder}
+              {...(onSearchChange ? { onValueChange: onSearchChange } : {})}
+            />
             <CommandList>
               <CommandEmpty>{loading ? "Loading…" : emptyText}</CommandEmpty>
               <CommandGroup>

package/src/components/pan-zoom-viewport.stories.tsx

@@ -0,0 +1,134 @@
+import * as React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Button } from "./button";
+import { PanZoomViewport, type PanZoomViewportHandle } from "./pan-zoom-viewport";
+
+const labels = {
+  viewport: "Floor plan, Inside",
+  instructions: "Arrow keys move the plan. Plus and minus zoom; 0 fits it.",
+  zoomIn: "Zoom in",
+  zoomOut: "Zoom out",
+  fit: "Fit",
+  controls: "Zoom",
+  zoomLevel: (percent: number) => `${percent}%`,
+};
+
+/** A stand-in plan, painted with tokens only: the real canvas is the app's. */
+const TABLES = [
+  { id: "T1", x: 120, y: 240, w: 90, h: 90, round: true },
+  { id: "T2", x: 270, y: 240, w: 90, h: 90, round: true },
+  { id: "T3", x: 420, y: 240, w: 90, h: 90, round: false },
+  { id: "T4", x: 120, y: 420, w: 120, h: 120, round: false },
+  { id: "T5", x: 300, y: 420, w: 220, h: 90, round: false },
+  { id: "T6", x: 300, y: 600, w: 180, h: 90, round: false },
+  { id: "T7", x: 900, y: 220, w: 180, h: 120, round: false },
+  { id: "T8", x: 700, y: 240, w: 120, h: 120, round: false },
+  { id: "T9", x: 700, y: 420, w: 120, h: 120, round: false },
+  { id: "T12", x: 900, y: 600, w: 180, h: 90, round: false },
+];
+
+function DemoPlan({ onPick }: { onPick?: (id: string) => void }) {
+  return (
+    <div className="relative size-full rounded-sm border border-border bg-[length:24px_24px] bg-[linear-gradient(to_right,var(--line-soft)_1px,transparent_1px),linear-gradient(to_bottom,var(--line-soft)_1px,transparent_1px)]">
+      <div className="absolute left-16 top-16 grid h-20 w-96 place-items-center border border-border text-xs text-muted-foreground">
+        Bar counter
+      </div>
+      {TABLES.map((table) => (
+        <button
+          key={table.id}
+          type="button"
+          onClick={() => onPick?.(table.id)}
+          aria-label={`Table ${table.id}`}
+          className={
+            "absolute grid place-items-center border border-border bg-card text-sm font-semibold focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring " +
+            (table.round ? "rounded-full" : "rounded-md")
+          }
+          style={{ left: table.x, top: table.y, width: table.w, height: table.h }}
+        >
+          {table.id}
+        </button>
+      ))}
+    </div>
+  );
+}
+
+const meta: Meta<typeof PanZoomViewport> = {
+  title: "Booking/PanZoomViewport",
+  component: PanZoomViewport,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "A window onto a plan that pans and zooms: drag, pinch, trackpad pinch or ctrl-wheel, arrows / + / − / 0 on the focused viewport, and the + / − / Fit controls. Fit never goes below `minScale`; past the floor the plan anchors top-left and the edges it runs past are shaded. Every string is injected through `labels`.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof PanZoomViewport>;
+
+/** floor/07-f0 desktop: the plan fits the viewport. Tap a table: the click still lands. */
+export const Desktop: Story = {
+  render: () => {
+    const [picked, setPicked] = React.useState<string | null>(null);
+    return (
+      <div className="flex flex-col gap-2">
+        <PanZoomViewport
+          contentWidth={1200}
+          contentHeight={800}
+          labels={labels}
+          className="h-[560px] w-[900px] rounded-xl border border-border bg-background"
+        >
+          <DemoPlan onPick={setPicked} />
+        </PanZoomViewport>
+        <p className="text-sm text-muted-foreground">Picked: {picked ?? "none"}</p>
+      </div>
+    );
+  },
+};
+
+/** floor/07-f0 phone: the fit would be unreadable, so it stops at the floor and pans. */
+export const PhoneAtTheFloor: Story = {
+  render: () => (
+    <PanZoomViewport
+      contentWidth={1200}
+      contentHeight={800}
+      minScale={0.55}
+      labels={labels}
+      className="h-[480px] w-[390px] border-y border-border bg-background"
+    >
+      <DemoPlan />
+    </PanZoomViewport>
+  ),
+};
+
+/** Driving it from outside: a "Show T12" link, a reset. */
+export const Imperative: Story = {
+  render: () => {
+    const api = React.useRef<PanZoomViewportHandle>(null);
+    return (
+      <div className="flex flex-col gap-2">
+        <div className="flex gap-2">
+          <Button variant="outline" size="sm" onClick={() => api.current?.centerOn(990, 645)}>
+            Show T12
+          </Button>
+          <Button variant="outline" size="sm" onClick={() => api.current?.fit()}>
+            Reset
+          </Button>
+        </div>
+        <PanZoomViewport
+          apiRef={api}
+          contentWidth={1200}
+          contentHeight={800}
+          minScale={0.8}
+          labels={labels}
+          className="h-[420px] w-[640px] rounded-xl border border-border bg-background"
+        >
+          <DemoPlan />
+        </PanZoomViewport>
+      </div>
+    );
+  },
+};