@bearmenu/ui 0.8.33 → 0.8.35

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

package/src/components/qr-panel.tsx

@@ -0,0 +1,52 @@
+import * as React from "react";
+import { cn } from "../lib/utils";
+
+/**
+ * QrPanel — the frame around the code that gets a phone onto a shared table
+ * (16-shared-table.html T8).
+ *
+ * The code arrives as `children`: an `img` with a data URL, an inline `svg`,
+ * whatever the caller's QR library returns. The design system imports no QR
+ * library — a dependency that ships in every consumer's bundle to serve one
+ * sheet is the wrong trade, and the app already has `qrcode`.
+ *
+ * The white plate is not decoration. A QR reader needs the quiet zone and the
+ * light module ground to decode, so the plate stays white in dark mode too and
+ * the padding is the quiet zone, not padding taste. Its hairline is a neutral
+ * alpha rather than `--border`: the plate is always white, so a themed border
+ * would put a dark ring on it in dark mode.
+ *
+ * The caption sits OUTSIDE the plate, on the sheet's own ground (T8), which is
+ * also what lets it use `--muted-foreground` instead of an ink picked to work
+ * on white.
+ */
+export type QrPanelProps = React.HTMLAttributes<HTMLDivElement> & {
+  /** The line under the code — "Scan with a phone camera to join". */
+  caption?: React.ReactNode;
+};
+
+const QrPanel = React.forwardRef<HTMLDivElement, QrPanelProps>(
+  ({ className, caption, children, ...props }, ref) => (
+    <div
+      ref={ref}
+      data-slot="qr-panel"
+      className={cn("flex flex-col items-center gap-3", className)}
+      {...props}
+    >
+      <div
+        data-slot="qr-panel-plate"
+        className="rounded-2xl border border-black/10 bg-white p-5"
+      >
+        <div data-slot="qr-panel-code" className="[&>*]:block [&>*]:size-full max-w-[220px]">
+          {children}
+        </div>
+      </div>
+      {caption ? (
+        <p className="text-center text-[12.5px] leading-normal text-muted-foreground">{caption}</p>
+      ) : null}
+    </div>
+  )
+);
+QrPanel.displayName = "QrPanel";
+
+export { QrPanel };

package/src/components/reconcile-bar.stories.tsx

@@ -0,0 +1,57 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { ReconcileBar } from "./reconcile-bar";
+
+const meta: Meta<typeof ReconcileBar> = {
+  title: "Shared table/ReconcileBar",
+  component: ReconcileBar,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Does the split add up? The running figure and the target side by side, so the reader never does the subtraction. Figures are tabular so the bar does not twitch while someone types.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ReconcileBar>;
+
+/** T6 — the shares come to the line total exactly. */
+export const Ok: Story = {
+  args: {
+    tone: "ok",
+    message: <b>The amounts add up</b>,
+    current: "120",
+    target: "120",
+  },
+};
+
+/** X10 — the shortfall is named in money, and Save is blocked until it balances. */
+export const Short: Story = {
+  args: {
+    tone: "short",
+    message: (
+      <>
+        <b>10 lei short</b> of the item total
+      </>
+    ),
+    current: "110",
+    target: "120",
+  },
+};
+
+/** An overshoot takes the same treatment — the bar says the figure, not the sign. */
+export const Over: Story = {
+  args: {
+    tone: "short",
+    message: (
+      <>
+        <b>15 lei over</b> the item total
+      </>
+    ),
+    current: "135",
+    target: "120",
+  },
+};

package/src/components/reconcile-bar.tsx

@@ -0,0 +1,80 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { Check, TriangleAlert } from "lucide-react";
+import { cn } from "../lib/utils";
+
+/**
+ * ReconcileBar — does the split add up? The shared-table board puts it under
+ * every split, in both states (16-shared-table.html T6, X10): "The amounts add
+ * up · 120 / 120" on a green ground, "10 lei short of the item total ·
+ * 110 / 120" on the warning one.
+ *
+ * It is the whole answer to "can I save this", so it says the running figure
+ * and the target side by side and never makes the reader do the subtraction.
+ * The numbers are `tabular-nums`: they change on every keystroke in the custom
+ * mode, and proportional digits make the bar twitch while someone types.
+ *
+ * `message` is injected — the shortfall is money and money is formatted in the
+ * caller's locale, which the design system does not know.
+ */
+const reconcileBarVariants = cva(
+  "flex items-center gap-2.5 rounded-xl px-3.5 py-3 text-[12.5px] leading-normal [&>svg]:size-4 [&>svg]:shrink-0",
+  {
+    variants: {
+      tone: {
+        ok: "bg-success/15 text-success-ink",
+        // `--warning-deep` and `--warning-ink` are the tokens for exactly this:
+        // the solid `--warning` is tuned as a fill and falls short of AA as ink
+        // on its own wash. Both have dark twins, so there is no `dark:` branch.
+        short: "bg-warning-deep/15 text-warning-ink",
+      },
+    },
+    defaultVariants: { tone: "ok" },
+  }
+);
+
+export type ReconcileBarProps = Omit<React.HTMLAttributes<HTMLDivElement>, "children"> &
+  VariantProps<typeof reconcileBarVariants> & {
+    /**
+     * "The amounts add up", "**10 lei short** of the item total". The caller
+     * carries the weight — the shortfall is bold, the rest is not.
+     */
+    message: React.ReactNode;
+    /** What the shares come to now, formatted by the caller. */
+    current: React.ReactNode;
+    /** What they have to come to — the item's line total. */
+    target: React.ReactNode;
+  };
+
+const TONE_ICON = {
+  ok: <Check aria-hidden strokeWidth={3} />,
+  short: <TriangleAlert aria-hidden />,
+} as const;
+
+const ReconcileBar = React.forwardRef<HTMLDivElement, ReconcileBarProps>(
+  ({ className, tone, message, current, target, ...props }, ref) => (
+    <div
+      ref={ref}
+      data-slot="reconcile-bar"
+      data-tone={tone ?? "ok"}
+      className={cn(reconcileBarVariants({ tone }), className)}
+      {...props}
+    >
+      {TONE_ICON[tone ?? "ok"]}
+      {/* Weight is the caller's: X10 draws "10 lei short" bold and "of the item
+          total" regular, which a blanket `font-semibold` here would flatten. */}
+      <span className="min-w-0 flex-1">{message}</span>
+      <span
+        data-slot="reconcile-bar-figures"
+        className="shrink-0 text-[12px] font-bold tabular-nums"
+      >
+        {current}
+        <span className="px-1.5 opacity-60">/</span>
+        {target}
+      </span>
+    </div>
+  )
+);
+ReconcileBar.displayName = "ReconcileBar";
+
+export { ReconcileBar, reconcileBarVariants };

package/src/components/responsive-overlay.stories.tsx

@@ -0,0 +1,91 @@
+import * as React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { ActionBar } from "./action-bar";
+import { Button } from "./button";
+import { MenuPickRow } from "./menu-pick-row";
+import { ResponsiveOverlay } from "./responsive-overlay";
+
+const meta: Meta<typeof ResponsiveOverlay> = {
+  title: "Shared table/ResponsiveOverlay",
+  component: ResponsiveOverlay,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "One overlay authored once: a Drawer under md, a Dialog from md. The chrome is the same at both widths — title, one-line subtitle, round close, body, footer band. Resize the preview across 768px to see it change container. The scrim is `--scrim-overlay`, never `--scrim`.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ResponsiveOverlay>;
+
+/** T3 — add an item. */
+export const AddAnItem: Story = {
+  render: () => {
+    const [open, setOpen] = React.useState(false);
+    return (
+      <>
+        <Button variant="cta" onClick={() => setOpen(true)}>
+          Add item
+        </Button>
+        <ResponsiveOverlay
+          open={open}
+          onOpenChange={setOpen}
+          title="Add an item"
+          subtitle="Table 18 · from the Sălcii Bistro menu"
+          closeLabel="Close"
+          footer={
+            <ActionBar
+              note="Added items can be assigned afterwards."
+              primary={<Button variant="cta">Add 1 item</Button>}
+            />
+          }
+        >
+          <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">
+            <MenuPickRow label="Mușchi de vită la grătar" price="96 lei" addLabel="Add it" />
+            <MenuPickRow label="Tochitură ardelenească" price="54 lei" selected removeLabel="Remove it" />
+            <MenuPickRow label="Păstrăv la cuptor" price="62 lei" addLabel="Add it" />
+          </div>
+        </ResponsiveOverlay>
+      </>
+    );
+  },
+};
+
+/** T1 — an overlay with no footer note: the two actions divide the band. */
+export const JoinTheTable: Story = {
+  render: () => {
+    const [open, setOpen] = React.useState(false);
+    return (
+      <>
+        <Button variant="cta" onClick={() => setOpen(true)}>
+          Open the join overlay
+        </Button>
+        <ResponsiveOverlay
+          open={open}
+          onOpenChange={setOpen}
+          title="Join this table"
+          subtitle="Table 18 · Sălcii Bistro"
+          size="sm"
+          closeLabel="Close"
+          footer={
+            <ActionBar
+              secondary={<Button variant="outline">Not now</Button>}
+              primary={<Button variant="cta">Join the table</Button>}
+            />
+          }
+        >
+          <p className="text-[14px] text-muted-foreground">
+            Only the people at this table see it. No account needed.
+          </p>
+        </ResponsiveOverlay>
+      </>
+    );
+  },
+};

package/src/components/responsive-overlay.test.tsx

@@ -0,0 +1,162 @@
+import * as React from "react";
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { ActionBar } from "./action-bar";
+import { ResponsiveOverlay } from "./responsive-overlay";
+
+/**
+ * jsdom has no matchMedia, so each test states the width it is testing. The
+ * component's own fallback (innerWidth) is covered by its own case below.
+ */
+function setWidth(wide: boolean) {
+  window.matchMedia = ((query: string) =>
+    ({
+      matches: wide,
+      media: query,
+      onchange: null,
+      addEventListener: () => {},
+      removeEventListener: () => {},
+      addListener: () => {},
+      removeListener: () => {},
+      dispatchEvent: () => false,
+    }) as unknown as MediaQueryList) as typeof window.matchMedia;
+}
+
+const original = window.matchMedia;
+beforeEach(() => setWidth(false));
+afterEach(() => {
+  window.matchMedia = original;
+  vi.restoreAllMocks();
+});
+
+function open(props: Partial<React.ComponentProps<typeof ResponsiveOverlay>> = {}) {
+  return render(
+    <ResponsiveOverlay
+      open
+      onOpenChange={() => {}}
+      title="Add an item"
+      subtitle="Table 18 · from the menu"
+      closeLabel="Close"
+      {...props}
+    >
+      <p>body</p>
+    </ResponsiveOverlay>
+  );
+}
+
+describe("ResponsiveOverlay", () => {
+  it("is a drawer under md", () => {
+    open();
+    expect(document.querySelector('[data-slot="drawer-content"]')).toBeInTheDocument();
+    expect(document.querySelector('[data-slot="dialog-content"]')).toBeNull();
+  });
+
+  it("is a dialog from md", () => {
+    setWidth(true);
+    open();
+    expect(document.querySelector('[data-slot="dialog-content"]')).toBeInTheDocument();
+    expect(document.querySelector('[data-slot="drawer-content"]')).toBeNull();
+  });
+
+  it("carries the same chrome at both widths", () => {
+    for (const wide of [false, true]) {
+      setWidth(wide);
+      const view = open();
+      expect(screen.getByText("Add an item")).toBeInTheDocument();
+      expect(screen.getByText("Table 18 · from the menu")).toBeInTheDocument();
+      expect(screen.getByRole("button", { name: "Close" })).toBeInTheDocument();
+      view.unmount();
+    }
+  });
+
+  it("names the overlay by its title and describes it by its subtitle", () => {
+    setWidth(true);
+    open();
+    const dialog = screen.getByRole("dialog");
+    expect(dialog).toHaveAccessibleName("Add an item");
+    expect(dialog).toHaveAccessibleDescription("Table 18 · from the menu");
+  });
+
+  it("closes through the round button", async () => {
+    const onOpenChange = vi.fn();
+    open({ onOpenChange });
+    await userEvent.click(screen.getByRole("button", { name: "Close" }));
+    expect(onOpenChange).toHaveBeenCalledWith(false);
+  });
+
+  it("dims with the overlay token, never the app-shadowed --scrim", () => {
+    setWidth(true);
+    open();
+    const scrim = document.querySelector('[data-slot="dialog-overlay"]');
+    const classes = (scrim?.className ?? "").split(" ");
+    expect(classes).toContain("bg-scrim-overlay");
+    // `--scrim` is an opaque photo hue in bearmenu-fe's globals.css, which
+    // loads after ours. A bare `bg-scrim` here would paint it over the page.
+    expect(classes).not.toContain("bg-scrim");
+    expect(classes).not.toContain("bg-black/50");
+  });
+
+  it("renders the footer band when one is given", () => {
+    open({
+      footer: <ActionBar primary={<button type="button">Add 1 item</button>} />,
+    });
+    expect(screen.getByRole("button", { name: "Add 1 item" })).toBeInTheDocument();
+    expect(document.querySelector('[data-slot="responsive-overlay-footer"]')).toBeInTheDocument();
+  });
+
+  it("falls back to the phone variant when there is no matchMedia at all", () => {
+    // `useMediaQuery` is mobile-first: the server, the first client frame and
+    // an environment without matchMedia (jsdom) all get the drawer. Deterministic
+    // beats clever — a test that wants the dialog says so by mocking the query.
+    delete (window as { matchMedia?: unknown }).matchMedia;
+    open();
+    expect(document.querySelector('[data-slot="drawer-content"]')).toBeInTheDocument();
+  });
+
+  it("closes on Escape", async () => {
+    setWidth(true);
+    const onOpenChange = vi.fn();
+    open({ onOpenChange });
+    await userEvent.keyboard("{Escape}");
+    expect(onOpenChange).toHaveBeenCalledWith(false);
+  });
+
+  it("returns focus to the control that opened it", async () => {
+    setWidth(true);
+
+    function Harness() {
+      const [isOpen, setIsOpen] = React.useState(false);
+      return (
+        <>
+          <button type="button" onClick={() => setIsOpen(true)}>
+            Add item
+          </button>
+          <ResponsiveOverlay
+            open={isOpen}
+            onOpenChange={setIsOpen}
+            title="Add an item"
+            closeLabel="Close"
+          >
+            <p>body</p>
+          </ResponsiveOverlay>
+        </>
+      );
+    }
+
+    render(<Harness />);
+    const opener = screen.getByRole("button", { name: "Add item" });
+    await userEvent.click(opener);
+    await userEvent.click(screen.getByRole("button", { name: "Close" }));
+    await waitFor(() => expect(opener).toHaveFocus());
+  });
+
+  it("stays out of the DOM while closed", () => {
+    render(
+      <ResponsiveOverlay open={false} onOpenChange={() => {}} title="Add an item">
+        <p>body</p>
+      </ResponsiveOverlay>
+    );
+    expect(screen.queryByText("body")).toBeNull();
+  });
+});