@bearmenu/ui 0.8.32 → 0.8.34

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

@@ -0,0 +1,78 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Users } from "lucide-react";
+import { ActivityList, ActivityRow } from "./activity-row";
+import { Avatar, AvatarFallback } from "./avatar";
+
+const meta: Meta<typeof ActivityRow> = {
+  title: "Shared table/ActivityRow",
+  component: ActivityRow,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "What happened at the table, newest first. The leading slot is the actor's avatar when an event has one and a quiet glyph disc when it does not — a split belongs to an item, not to a person.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ActivityRow>;
+
+function who(initial: string, tone: "brown" | "teal" | "green") {
+  return (
+    <Avatar size="sm" tone={tone}>
+      <AvatarFallback>{initial}</AvatarFallback>
+    </Avatar>
+  );
+}
+
+/** T9 — the whole feed, down to the event that opened the table. */
+export const Feed: Story = {
+  render: () => (
+    <ActivityList aria-label="Table activity">
+      <ActivityRow
+        avatar={who("A", "green")}
+        body={
+          <>
+            <b>Ana</b> joined the table
+          </>
+        }
+        time="2 min ago"
+      />
+      <ActivityRow
+        avatar={who("B", "teal")}
+        body={
+          <>
+            <b>Bruno</b> added Tochitură ardelenească
+          </>
+        }
+        time="9 min ago"
+      />
+      <ActivityRow
+        avatar={who("A", "green")}
+        body={
+          <>
+            <b>Ana</b> moved Papanași to herself
+          </>
+        }
+        time="14 min ago"
+      />
+      <ActivityRow
+        icon={<Users aria-hidden />}
+        body="Fetească Neagră split between 3"
+        time="18 min ago"
+      />
+      <ActivityRow
+        avatar={who("A", "brown")}
+        body={
+          <>
+            <b>Adrian</b> opened the table
+          </>
+        }
+        time="19:42"
+      />
+    </ActivityList>
+  ),
+};

package/src/components/activity-row.tsx

@@ -0,0 +1,65 @@
+import * as React from "react";
+import { cn } from "../lib/utils";
+
+/**
+ * ActivityRow / ActivityList — what happened at the table, newest first
+ * (16-shared-table.html T9): "Bruno added Tochitură ardelenească · 9 min ago",
+ * down to "Adrian opened the table · 19:42".
+ *
+ * The leading slot is the actor's avatar when an event has one and a quiet
+ * glyph disc when it does not — a split belongs to an item, not to a person.
+ * Both are 32px so the sentences stay on one left edge however the feed mixes.
+ *
+ * The rows come from an append-only log, not from the current state: state
+ * cannot say that Ana moved Papanași to herself, only that it is hers now.
+ */
+export type ActivityRowProps = Omit<React.LiHTMLAttributes<HTMLLIElement>, "children"> & {
+  /** The actor's `Avatar`. Wins over `icon` when both are given. */
+  avatar?: React.ReactNode;
+  /** A lucide glyph for an event with no actor. Sits in a muted disc. */
+  icon?: React.ReactNode;
+  /** The sentence — the caller bolds the actor inside it. */
+  body: React.ReactNode;
+  /** "9 min ago", "19:42". Formatted by the caller. */
+  time: React.ReactNode;
+};
+
+const ActivityRow = React.forwardRef<HTMLLIElement, ActivityRowProps>(
+  ({ className, avatar, icon, body, time, ...props }, ref) => (
+    <li
+      ref={ref}
+      data-slot="activity-row"
+      className={cn("flex items-start gap-3 py-3", className)}
+      {...props}
+    >
+      <div className="shrink-0">
+        {avatar ?? (
+          <span className="grid size-8 place-items-center rounded-full bg-muted text-muted-foreground [&>svg]:size-4">
+            {icon}
+          </span>
+        )}
+      </div>
+      <div className="min-w-0 flex-1">
+        <div className="text-[14px] leading-snug">{body}</div>
+        <div className="mt-0.5 text-[12.5px] text-muted-foreground">{time}</div>
+      </div>
+    </li>
+  )
+);
+ActivityRow.displayName = "ActivityRow";
+
+export type ActivityListProps = React.HTMLAttributes<HTMLUListElement>;
+
+const ActivityList = React.forwardRef<HTMLUListElement, ActivityListProps>(
+  ({ className, ...props }, ref) => (
+    <ul
+      ref={ref}
+      data-slot="activity-list"
+      className={cn("divide-y divide-border", className)}
+      {...props}
+    />
+  )
+);
+ActivityList.displayName = "ActivityList";
+
+export { ActivityRow, ActivityList };

package/src/components/avatar.stories.tsx

@@ -79,6 +79,61 @@ export const GroupSizes: Story = {
   ),
 };
 
+/**
+ * `tone` — a person's fixed hue at a shared table, so the same face is the same
+ * colour on the ledger card, the organise chip, the split row and the activity
+ * feed. The caller assigns it; the design system never hashes a name into a
+ * colour, because a hash re-colours everyone when one person joins and collides
+ * often enough to matter at a table of four.
+ *
+ * `muted` is the non-person disc — "Shared between everyone", an event with no
+ * actor. Check the dark story: the three hues lift a notch there so a disc keeps
+ * an edge against the card without giving up the white initial.
+ */
+const TONES = ["brown", "teal", "green", "blue", "violet", "rose", "muted"] as const;
+
+export const Tones: Story = {
+  render: () => (
+    <div className="flex items-center gap-3">
+      {TONES.map((tone) => (
+        <Avatar key={tone} tone={tone}>
+          <AvatarFallback>{tone.slice(0, 1).toUpperCase()}</AvatarFallback>
+        </Avatar>
+      ))}
+    </div>
+  ),
+};
+
+export const TonesDark: Story = {
+  parameters: { backgrounds: { default: "dark" } },
+  render: () => (
+    <div className="dark flex items-center gap-3 rounded-xl bg-card p-4">
+      {TONES.map((tone) => (
+        <Avatar key={tone} tone={tone}>
+          <AvatarFallback>{tone.slice(0, 1).toUpperCase()}</AvatarFallback>
+        </Avatar>
+      ))}
+    </div>
+  ),
+};
+
+/** The stack a shared table draws in its header and on its trigger band. */
+export const TonedStack: Story = {
+  render: () => (
+    <AvatarGroup spacing="tight" size="sm">
+      <Avatar tone="brown">
+        <AvatarFallback>A</AvatarFallback>
+      </Avatar>
+      <Avatar tone="teal">
+        <AvatarFallback>B</AvatarFallback>
+      </Avatar>
+      <Avatar tone="green">
+        <AvatarFallback>A</AvatarFallback>
+      </Avatar>
+    </AvatarGroup>
+  ),
+};
+
 /**
  * An individual `Avatar` can still opt out of the group size — useful for
  * highlighting "you" inside a roster.

package/src/components/avatar.tsx

@@ -16,6 +16,34 @@ const avatarVariants = cva(
         lg: "size-12 text-base",
         xl: "size-16 text-lg",
       },
+      /**
+       * A person's fixed hue at a shared table: the same face is the same
+       * colour on the ledger card, the organise chip, the split row and the
+       * activity feed, so a reader tracks people by colour and never has to
+       * re-read a name (16-shared-table.html, T2/T4/T6/T9).
+       *
+       * The caller assigns it — from join order, from the wire, from wherever
+       * it keeps its participants. The design system never hashes a name into
+       * a colour: a hash re-colours everyone when one person joins, and gives
+       * two people the same hue often enough to matter at a table of four.
+       *
+       * `muted` is the non-person disc — the "Shared between everyone" card's
+       * people glyph, an activity row with no actor.
+       *
+       * Six hues, assigned in the order listed. The board draws the first
+       * three; the rest space across the arc they leave free. Past six, cycle —
+       * at that size the initial and the name are doing the identifying, and
+       * colour is a support cue, never the only one.
+       */
+      tone: {
+        brown: "bg-avatar-brown",
+        teal: "bg-avatar-teal",
+        green: "bg-avatar-green",
+        blue: "bg-avatar-blue",
+        violet: "bg-avatar-violet",
+        rose: "bg-avatar-rose",
+        muted: "bg-muted",
+      },
     },
     defaultVariants: {
       size: "default",
@@ -24,14 +52,17 @@ const avatarVariants = cva(
 );
 
 type AvatarSize = NonNullable<VariantProps<typeof avatarVariants>["size"]>;
+type AvatarTone = NonNullable<VariantProps<typeof avatarVariants>["tone"]>;
 
 const AvatarContext = React.createContext<AvatarSize>("default");
+/** `null` = no tone set, so the fallback keeps its own muted ground. */
+const AvatarToneContext = React.createContext<AvatarTone | null>(null);
 
 const Avatar = React.forwardRef<
   React.ElementRef<typeof AvatarPrimitive.Root>,
   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root> &
     VariantProps<typeof avatarVariants>
->(({ className, size, ...props }, ref) => {
+>(({ className, size, tone, ...props }, ref) => {
   // An explicit `size` always wins; otherwise inherit from the nearest
   // AvatarGroup (context defaults to "default", so a standalone Avatar with no
   // size behaves exactly as before).
@@ -40,12 +71,15 @@ const Avatar = React.forwardRef<
 
   return (
     <AvatarContext.Provider value={resolvedSize}>
-      <AvatarPrimitive.Root
-        ref={ref}
-        data-slot="avatar"
-        className={cn(avatarVariants({ size: resolvedSize }), className)}
-        {...props}
-      />
+      <AvatarToneContext.Provider value={tone ?? null}>
+        <AvatarPrimitive.Root
+          ref={ref}
+          data-slot="avatar"
+          data-tone={tone ?? undefined}
+          className={cn(avatarVariants({ size: resolvedSize, tone }), className)}
+          {...props}
+        />
+      </AvatarToneContext.Provider>
     </AvatarContext.Provider>
   );
 });
@@ -67,17 +101,27 @@ AvatarImage.displayName = AvatarPrimitive.Image.displayName;
 const AvatarFallback = React.forwardRef<
   React.ElementRef<typeof AvatarPrimitive.Fallback>,
   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
->(({ className, ...props }, ref) => (
-  <AvatarPrimitive.Fallback
-    ref={ref}
-    data-slot="avatar-fallback"
-    className={cn(
-      "flex size-full items-center justify-center rounded-full bg-muted font-semibold text-muted-foreground",
-      className
-    )}
-    {...props}
-  />
-));
+>(({ className, ...props }, ref) => {
+  // The fallback paints its own ground, which would cover the Root's tone.
+  // With a tone set it steps aside and takes the ink that tone was measured
+  // for: white on the three hues (6.2–7.0:1 light, 4.8–5.4:1 dark), the muted
+  // ink on `muted`, which is not a person and stays quiet.
+  const tone = React.useContext(AvatarToneContext);
+  return (
+    <AvatarPrimitive.Fallback
+      ref={ref}
+      data-slot="avatar-fallback"
+      className={cn(
+        "flex size-full items-center justify-center rounded-full font-semibold",
+        tone === null && "bg-muted text-muted-foreground",
+        tone === "muted" && "text-muted-foreground",
+        tone !== null && tone !== "muted" && "text-white",
+        className
+      )}
+      {...props}
+    />
+  );
+});
 AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
 
 const badgeOffset = {
@@ -195,4 +239,4 @@ export {
   avatarVariants,
   avatarGroupOverflowVariants,
 };
-export type { AvatarSize };
+export type { AvatarSize, AvatarTone };

package/src/components/badge.stories.tsx

@@ -1,4 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
+import { ChevronDown, Users } from "lucide-react";
+import { Avatar, AvatarFallback, AvatarGroup } from "./avatar";
 import { Badge } from "./badge";
 import { Button } from "./button";
 
@@ -85,6 +87,45 @@ export const BookingStatus: Story = {
   ),
 };
 
+/**
+ * `assignee` — who an item belongs to, in the shared table's organise view. It
+ * is a control, not a status: the whole pill opens "Who had this?", so it keeps
+ * room either side for the avatar and the chevron the caller renders into it.
+ */
+export const Assignee: Story = {
+  render: () => (
+    <div className="flex flex-wrap items-center gap-3">
+      <Badge variant="assignee" as="span">
+        <Avatar size="xs" tone="brown">
+          <AvatarFallback>A</AvatarFallback>
+        </Avatar>
+        Adrian
+        <ChevronDown className="size-3.5 opacity-60" aria-hidden />
+      </Badge>
+      <Badge variant="assignee" as="span">
+        <AvatarGroup size="xs" spacing="tight">
+          <Avatar tone="brown">
+            <AvatarFallback>A</AvatarFallback>
+          </Avatar>
+          <Avatar tone="teal">
+            <AvatarFallback>B</AvatarFallback>
+          </Avatar>
+          <Avatar tone="green">
+            <AvatarFallback>A</AvatarFallback>
+          </Avatar>
+        </AvatarGroup>
+        Shared
+      </Badge>
+      <Badge variant="assignee" as="span">
+        <span className="grid size-6 place-items-center rounded-full bg-muted text-muted-foreground">
+          <Users className="size-3" aria-hidden />
+        </span>
+        Shared
+      </Badge>
+    </div>
+  ),
+};
+
 export const AllVariants: Story = {
   render: () => (
     <div className="flex flex-wrap items-center gap-3">

package/src/components/badge.tsx

@@ -45,6 +45,19 @@ const badgeVariants = cva(
          */
         completed:
           "rounded-full border-0 bg-muted px-[9px] py-[3px] text-[10.5px] leading-[1.2] font-bold text-muted-foreground",
+        /**
+         * Who an item belongs to, in the organise table (T4 desktop): a soft
+         * pill carrying an avatar (or an `AvatarGroup` for "Shared") and a
+         * chevron, because the whole pill opens "Who had this?".
+         *
+         * It is a control, not a status, so it keeps 6px of inset either side
+         * of its slots and `gap-1.5` between them; the caller renders the
+         * avatar and the chevron as children. Sized to clear 44px of tap
+         * target when it is the row's own control — see `MenuPickRow` for the
+         * same rule on the add toggle.
+         */
+        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",
       },
       /**
        * `status` is the taller pill the booking design draws beside a

package/src/components/button.tsx

@@ -80,7 +80,7 @@ const buttonVariants = cva(
         /** 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",
+        cta: "h-[46px] rounded-[12px] 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",

package/src/components/dialog.tsx

@@ -53,6 +53,12 @@ const dialogContentVariants = cva(
 type DialogContentProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> &
   VariantProps<typeof dialogContentVariants> & {
     showCloseButton?: boolean;
+    /**
+     * Classes for the scrim behind the dialog. The default `bg-black/50` is
+     * kept for every existing caller; pass `bg-scrim-overlay` for the themed
+     * dim (see `--scrim-overlay` in globals.css, and why it is not `--scrim`).
+     */
+    overlayClassName?: string;
   };
 
 const DialogContent = React.forwardRef<
@@ -60,11 +66,11 @@ const DialogContent = React.forwardRef<
   DialogContentProps
 >(
   (
-    { className, children, size, scrollBehavior, showCloseButton = true, ...props },
+    { className, children, size, scrollBehavior, showCloseButton = true, overlayClassName, ...props },
     ref
   ) => (
     <DialogPortal>
-      <DialogOverlay />
+      <DialogOverlay className={overlayClassName} />
       <DialogPrimitive.Content
         ref={ref}
         data-slot="dialog-content"

package/src/components/drawer.tsx

@@ -43,12 +43,18 @@ DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName;
 type DrawerContentProps = React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content> & {
   variant?: "flush" | "floating";
   showHandle?: boolean;
+  /**
+   * Classes for the scrim behind the sheet. The default `bg-black/60` is kept
+   * for every existing caller; pass `bg-scrim-overlay` for the themed dim (see
+   * `--scrim-overlay` in globals.css, and why it is not `--scrim`).
+   */
+  overlayClassName?: string;
 };
 
 const DrawerContent = React.forwardRef<
   React.ElementRef<typeof DrawerPrimitive.Content>,
   DrawerContentProps
->(({ className, variant = "flush", showHandle, children, ...props }, ref) => {
+>(({ className, variant = "flush", showHandle, overlayClassName, children, ...props }, ref) => {
   const direction = React.useContext(DrawerDirectionContext);
   const isVertical = direction === "top" || direction === "bottom";
   const handleEnabled = showHandle ?? (direction === "bottom");
@@ -64,7 +70,7 @@ const DrawerContent = React.forwardRef<
 
   return (
     <DrawerPortal>
-      <DrawerOverlay />
+      <DrawerOverlay className={overlayClassName} />
       <DrawerPrimitive.Content
         ref={ref}
         data-slot="drawer-content"

package/src/components/hold-countdown.tsx

@@ -49,7 +49,7 @@ export type HoldCountdownProps = {
  * design's as a timer. Dark mode takes the lifted token, which already has
  * the contrast against the dark card.
  */
-const HOLD_BORDER = "border-[oklch(0.62_0.15_70)] dark:border-warning";
+const HOLD_BORDER = "border-warning-deep";
 
 function remainingSeconds(expiresAt: string | number, now: number): number {
   const end = typeof expiresAt === "number" ? expiresAt : Date.parse(expiresAt);

package/src/components/menu-pick-row.stories.tsx

@@ -0,0 +1,71 @@
+import * as React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { MenuPickRow } from "./menu-pick-row";
+
+const meta: Meta<typeof MenuPickRow> = {
+  title: "Shared table/MenuPickRow",
+  component: MenuPickRow,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "A dish in the add-an-item overlay. The disc is the control, not the row: a whole-row target would make reading the menu and adding to the table the same gesture.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof MenuPickRow>;
+
+export const Unselected: Story = {
+  args: { label: "Mușchi de vită la grătar", price: "96 lei", addLabel: "Add Mușchi de vită la grătar" },
+};
+
+export const Selected: Story = {
+  args: {
+    label: "Tochitură ardelenească",
+    price: "54 lei",
+    selected: true,
+    removeLabel: "Remove Tochitură ardelenească",
+  },
+};
+
+/** T3 — a category of the venue's menu. */
+export const Category: Story = {
+  render: () => {
+    const [picked, setPicked] = React.useState<string[]>(["Tochitură ardelenească"]);
+    const dishes = [
+      { label: "Mușchi de vită la grătar", price: "96 lei" },
+      { label: "Tochitură ardelenească", price: "54 lei" },
+      { label: "Păstrăv la cuptor", price: "62 lei" },
+    ];
+    return (
+      <div>
+        <p className="mb-1 font-mono text-[11px] font-bold uppercase tracking-wider text-muted-foreground">
+          Main courses
+        </p>
+        <div className="divide-y divide-border">
+          {dishes.map((dish) => (
+            <MenuPickRow
+              key={dish.label}
+              label={dish.label}
+              price={dish.price}
+              selected={picked.includes(dish.label)}
+              onToggle={() =>
+                setPicked((prev) =>
+                  prev.includes(dish.label)
+                    ? prev.filter((d) => d !== dish.label)
+                    : [...prev, dish.label]
+                )
+              }
+              addLabel={`Add ${dish.label}`}
+              removeLabel={`Remove ${dish.label}`}
+            />
+          ))}
+        </div>
+      </div>
+    );
+  },
+};

package/src/components/menu-pick-row.tsx

@@ -0,0 +1,76 @@
+"use client";
+
+import * as React from "react";
+import { Plus } from "lucide-react";
+import { cn } from "../lib/utils";
+
+/**
+ * MenuPickRow — a dish in the add-an-item overlay (16-shared-table.html T3):
+ * its name, its price, and a disc that adds it.
+ *
+ * The disc is the control and the row is not: a whole-row target would make
+ * "read the menu" and "add this" the same gesture, and a reader scrolling a
+ * long menu would add things by accident. It is 44×44 as the accessibility
+ * floor asks, with the drawn 28px disc inside it.
+ *
+ * A tap adds one unit. There is no stepper and no quantity anywhere in the
+ * shared table — one row per unit, so removing one is removing one thing and
+ * never an arithmetic edit (the board's ruling 3). `selected` is therefore
+ * "this dish is on the table", not a count; a caller showing a second unit
+ * shows a second row.
+ */
+export type MenuPickRowProps = Omit<React.HTMLAttributes<HTMLDivElement>, "onToggle"> & {
+  /** The dish. */
+  label: React.ReactNode;
+  /** Its price, formatted by the caller. */
+  price: React.ReactNode;
+  /** Is it on the table already? Fills the disc. */
+  selected?: boolean;
+  onToggle?: () => void;
+  /** The disc's accessible name when it would add — "Add Papanași". Injected. */
+  addLabel?: string;
+  /** Its name when it would remove — "Remove Papanași". Injected. */
+  removeLabel?: string;
+  disabled?: boolean;
+};
+
+const MenuPickRow = React.forwardRef<HTMLDivElement, MenuPickRowProps>(
+  (
+    { className, label, price, selected = false, onToggle, addLabel, removeLabel, disabled = false, ...props },
+    ref
+  ) => (
+    <div
+      ref={ref}
+      data-slot="menu-pick-row"
+      data-selected={selected ? "" : undefined}
+      className={cn("flex items-center gap-3 py-2.5", className)}
+      {...props}
+    >
+      <span className="min-w-0 flex-1 truncate text-[14px] font-bold">{label}</span>
+      {/* The numeral is the bold sans; only the caller's currency suffix is mono. */}
+      <span className="shrink-0 text-[14px] font-bold tabular-nums">{price}</span>
+      <button
+        type="button"
+        onClick={onToggle}
+        disabled={disabled}
+        aria-pressed={selected}
+        aria-label={selected ? removeLabel : addLabel}
+        className="grid size-11 shrink-0 place-items-center rounded-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+      >
+        <span
+          className={cn(
+            "grid size-7 place-items-center rounded-full border transition-colors",
+            selected
+              ? "border-transparent bg-primary text-primary-foreground"
+              : "border-border bg-background text-muted-foreground"
+          )}
+        >
+          <Plus className="size-4" aria-hidden strokeWidth={2.5} />
+        </span>
+      </button>
+    </div>
+  )
+);
+MenuPickRow.displayName = "MenuPickRow";
+
+export { MenuPickRow };

package/src/components/qr-panel.stories.tsx

@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { QrPanel } from "./qr-panel";
+
+const meta: Meta<typeof QrPanel> = {
+  title: "Shared table/QrPanel",
+  component: QrPanel,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "The frame around the code that gets a phone onto a table. The code arrives as children — the design system imports no QR library. The plate stays white in dark mode because a reader needs the light module ground and the quiet zone to decode.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof QrPanel>;
+
+/** Stand-in for whatever the app's QR library renders. */
+const code = (
+  <svg viewBox="0 0 21 21" shapeRendering="crispEdges" aria-hidden>
+    <rect width="21" height="21" fill="#fff" />
+    {Array.from({ length: 21 }, (_, y) =>
+      Array.from({ length: 21 }, (_, x) =>
+        (x * 7 + y * 3) % 5 < 2 ? <rect key={`${x}-${y}`} x={x} y={y} width="1" height="1" /> : null
+      )
+    )}
+  </svg>
+);
+
+export const Default: Story = {
+  args: { children: code, caption: "Scan with a phone camera to join" },
+};
+
+export const WithoutCaption: Story = {
+  args: { children: code },
+};