@bearmenu/ui 0.8.33 → 0.8.34

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