@bearmenu/ui 0.8.32 → 0.8.34

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();
+  });
+});

package/src/components/responsive-overlay.tsx

@@ -0,0 +1,232 @@
+"use client";
+
+import * as React from "react";
+import { X } from "lucide-react";
+import { useMediaQuery } from "../hooks/use-media-query";
+import { cn } from "../lib/utils";
+import { Dialog, DialogContent, DialogDescription, DialogTitle } from "./dialog";
+import { Drawer, DrawerContent, DrawerDescription, DrawerTitle } from "./drawer";
+
+/** The board switches container at Tailwind's `md`, not at the library's `lg`. */
+const MD_MEDIA_QUERY = "(min-width: 768px)";
+
+/**
+ * Sends focus back to whatever opened the overlay once it closes.
+ *
+ * Radix restores focus to its own `DialogTrigger`, and this overlay is
+ * controlled — the opener is an ordinary button somewhere else on the page, or
+ * a URL that was already carrying `?add=1` on arrival. Left to the primitives,
+ * focus lands on `document.body` and a keyboard user starts again from the top
+ * of the page. The shared table's brief asks for the opposite in as many words:
+ * "focus returns to the control that opened an overlay or a sheet".
+ *
+ * The opener is tracked while the overlay is CLOSED rather than captured when
+ * it opens: by the time an effect could run on the opening render, the dialog
+ * has already mounted and pulled focus into itself.
+ */
+function useFocusReturn(open: boolean) {
+  const openerRef = React.useRef<HTMLElement | null>(null);
+  const wasOpen = React.useRef(false);
+
+  React.useEffect(() => {
+    if (open) {
+      wasOpen.current = true;
+      return;
+    }
+
+    if (wasOpen.current) {
+      wasOpen.current = false;
+      const opener = openerRef.current;
+      // The overlay is still unmounting on this tick, and it takes focus with
+      // it; restoring on the next frame lands after that.
+      if (opener && opener.isConnected) {
+        requestAnimationFrame(() => opener.focus());
+      }
+    }
+
+    const track = (event: FocusEvent) => {
+      const target = event.target;
+      if (target instanceof HTMLElement) openerRef.current = target;
+    };
+    if (document.activeElement instanceof HTMLElement && document.activeElement !== document.body) {
+      openerRef.current = document.activeElement;
+    }
+    document.addEventListener("focusin", track);
+    return () => document.removeEventListener("focusin", track);
+  }, [open]);
+}
+
+export type ResponsiveOverlayProps = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  /** The overlay's name — "Add an item", "Split this item", "Invite people". */
+  title: React.ReactNode;
+  /** The one line under it — "Table 18 · from the menu". Optional, never two lines. */
+  subtitle?: React.ReactNode;
+  /** The scrolling body. */
+  children: React.ReactNode;
+  /** The closing band — an `ActionBar`, usually. */
+  footer?: React.ReactNode;
+  /**
+   * The close button's accessible name. Injected, like every label here: the
+   * design system holds no copy and no i18n.
+   */
+  closeLabel?: string;
+  /** Widths for the desktop dialog. Mobile is always the full-width drawer. */
+  size?: React.ComponentPropsWithoutRef<typeof DialogContent>["size"];
+  /** Classes for the panel itself — the dialog box or the drawer sheet. */
+  className?: string;
+  /** Classes for the scrolling body. */
+  bodyClassName?: string;
+};
+
+/**
+ * ResponsiveOverlay — one overlay authored once: a `Drawer` under md, a
+ * `Dialog` from md.
+ *
+ * The shared-table board draws the same chrome on T1, T3, T5, T6 and T8
+ * (16-shared-table.html) and the two widths never disagree about it: the
+ * title and its one-line subtitle top left, a round close top right, the body,
+ * and a footer band carrying the note and the actions. What differs is the
+ * container — a sheet that a thumb drags down, or a box in the middle of the
+ * screen — and that is the only thing this component switches.
+ *
+ * The scrim is `--scrim-overlay`. bearmenu-fe's `globals.css` loads after the
+ * design system's and defines a `--scrim` of its own — an opaque photo hue —
+ * so an overlay that reached for `bg-scrim` would paint that colour over the
+ * whole page at full alpha. The two drawer/dialog primitives still carry their
+ * older `bg-black/…`; this component states the token explicitly rather than
+ * changing theirs underneath every other caller.
+ *
+ * It resolves the width with `useMediaQuery`, which is mobile-first: the
+ * drawer is what the server and the first client frame render. A wide screen
+ * that arrives with the overlay already open — an invite link opened on a
+ * laptop — therefore shows the sheet for one frame before the dialog replaces
+ * it. That is the library's documented convention for every breakpoint-
+ * switching component, and a second breakpoint hook with different semantics
+ * would be a worse thing to own than one frame.
+ */
+const ResponsiveOverlay = React.forwardRef<HTMLDivElement, ResponsiveOverlayProps>(
+  (
+    {
+      open,
+      onOpenChange,
+      title,
+      subtitle,
+      children,
+      footer,
+      closeLabel = "Close",
+      size = "lg",
+      className,
+      bodyClassName,
+    },
+    ref
+  ) => {
+    const isWide = useMediaQuery(MD_MEDIA_QUERY);
+    const titleId = React.useId();
+    const subtitleId = React.useId();
+    useFocusReturn(open);
+
+    const header = (
+      <div data-slot="responsive-overlay-header" className="flex items-start gap-3 px-5 pt-5">
+        <div className="min-w-0 flex-1">
+          {isWide ? (
+            <DialogTitle id={titleId} className="text-[19px] font-bold leading-tight">
+              {title}
+            </DialogTitle>
+          ) : (
+            <DrawerTitle id={titleId} className="text-[19px] font-bold leading-tight">
+              {title}
+            </DrawerTitle>
+          )}
+          {subtitle ? (
+            isWide ? (
+              <DialogDescription id={subtitleId} className="mt-1 text-[13px] text-muted-foreground">
+                {subtitle}
+              </DialogDescription>
+            ) : (
+              <DrawerDescription id={subtitleId} className="mt-1 text-[13px] text-muted-foreground">
+                {subtitle}
+              </DrawerDescription>
+            )
+          ) : null}
+        </div>
+        <button
+          type="button"
+          data-slot="responsive-overlay-close"
+          onClick={() => onOpenChange(false)}
+          // 32px disc, 44px of tap target around it — the frames draw the disc,
+          // the accessibility floor asks for the target.
+          className="-m-1.5 grid size-11 shrink-0 place-items-center rounded-full text-muted-foreground transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+        >
+          <span className="grid size-8 place-items-center rounded-full bg-surface-2 transition-colors hover:bg-muted">
+            <X className="size-4" aria-hidden />
+          </span>
+          <span className="sr-only">{closeLabel}</span>
+        </button>
+      </div>
+    );
+
+    const body = (
+      <div
+        data-slot="responsive-overlay-body"
+        className={cn("min-h-0 flex-1 overflow-y-auto px-5 py-4", bodyClassName)}
+      >
+        {children}
+      </div>
+    );
+
+    const foot = footer ? (
+      <div
+        data-slot="responsive-overlay-footer"
+        className="shrink-0 border-t border-border bg-surface-2"
+      >
+        {footer}
+      </div>
+    ) : null;
+
+    if (isWide) {
+      return (
+        <Dialog open={open} onOpenChange={onOpenChange}>
+          <DialogContent
+            ref={ref}
+            size={size}
+            showCloseButton={false}
+            overlayClassName="bg-scrim-overlay backdrop-blur-none"
+            aria-labelledby={titleId}
+            aria-describedby={subtitle ? subtitleId : undefined}
+            className={cn(
+              // The dialog's own `grid gap-4 p-6` would put air between the
+              // header, the body and the band the frames draw flush.
+              "flex max-h-[85vh] flex-col gap-0 overflow-hidden p-0",
+              className
+            )}
+          >
+            {header}
+            {body}
+            {foot}
+          </DialogContent>
+        </Dialog>
+      );
+    }
+
+    return (
+      <Drawer open={open} onOpenChange={onOpenChange}>
+        <DrawerContent
+          ref={ref}
+          overlayClassName="bg-scrim-overlay"
+          aria-labelledby={titleId}
+          aria-describedby={subtitle ? subtitleId : undefined}
+          className={cn("flex max-h-[85vh] flex-col p-0", className)}
+        >
+          {header}
+          {body}
+          {foot}
+        </DrawerContent>
+      </Drawer>
+    );
+  }
+);
+ResponsiveOverlay.displayName = "ResponsiveOverlay";
+
+export { ResponsiveOverlay };