@bearmenu/ui 0.8.33 → 0.8.34

package/dist/components/table-ledger-card.js

@@ -0,0 +1,84 @@
+import { cn } from '../chunk-FEK5XGZW.js';
+import { __objRest, __spreadProps, __spreadValues } from '../chunk-MMUBH76A.js';
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var tableLedgerCardVariants = cva(
+  "overflow-hidden rounded-2xl border bg-card transition-colors",
+  {
+    variants: {
+      state: {
+        default: "border-border",
+        updated: "border-primary",
+        "drop-idle": "border-dashed border-border",
+        "drop-active": "border-dashed border-primary bg-accent-subtle"
+      }
+    },
+    defaultVariants: { state: "default" }
+  }
+);
+var TableLedgerCard = React.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { className, state, lead, person, meta, total, rows, labels } = _b, props = __objRest(_b, ["className", "state", "lead", "person", "meta", "total", "rows", "labels"]);
+    return /* @__PURE__ */ jsxs(
+      "div",
+      __spreadProps(__spreadValues({
+        ref,
+        "data-slot": "table-ledger-card",
+        "data-state": state != null ? state : "default",
+        className: cn(tableLedgerCardVariants({ state }), className)
+      }, props), {
+        children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              "data-slot": "table-ledger-header",
+              className: cn(
+                "flex items-center gap-3 px-3.5 py-3",
+                // The header takes its own ground only when there are items under it,
+                // so it reads as their heading. A card with no rows — a drop target,
+                // a person who has had nothing yet — is one plain block, and tinting
+                // it would also paint over `drop-active`'s accent.
+                (rows == null ? void 0 : rows.length) ? state === "updated" ? "bg-accent-subtle" : "bg-surface-2/60" : void 0
+              ),
+              children: [
+                lead ? /* @__PURE__ */ jsx("div", { className: "shrink-0", children: lead }) : null,
+                /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+                  person ? /* @__PURE__ */ jsx("div", { className: "truncate text-[15px] font-bold leading-tight", children: person }) : null,
+                  meta ? /* @__PURE__ */ jsx("div", { className: "mt-0.5 truncate text-[12.5px] text-muted-foreground", children: meta }) : null
+                ] }),
+                total ? /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    "data-slot": "table-ledger-total",
+                    className: "shrink-0 text-[15px] font-bold tabular-nums",
+                    children: total
+                  }
+                ) : null
+              ]
+            }
+          ),
+          rows && rows.length > 0 ? /* @__PURE__ */ jsx("ul", { "data-slot": "table-ledger-rows", "aria-label": labels == null ? void 0 : labels.rows, className: "divide-y divide-border", children: rows.map((row, index) => {
+            var _a2;
+            return /* @__PURE__ */ jsxs(
+              "li",
+              {
+                className: "flex items-center gap-3 px-3.5 py-2.5 text-[14px]",
+                children: [
+                  /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: row.label }),
+                  row.badge,
+                  row.trailing ? /* @__PURE__ */ jsx("span", { className: "shrink-0 text-[12.5px] text-muted-foreground", children: row.trailing }) : /* @__PURE__ */ jsx("span", { className: "shrink-0 text-[14px] font-bold tabular-nums", children: row.amount })
+                ]
+              },
+              (_a2 = row.id) != null ? _a2 : index
+            );
+          }) }) : null
+        ]
+      })
+    );
+  }
+);
+TableLedgerCard.displayName = "TableLedgerCard";
+
+export { TableLedgerCard, tableLedgerCardVariants };

package/dist/components/table-trigger-band.d.ts

@@ -0,0 +1,56 @@
+import * as React from 'react';
+
+/**
+ * TableTriggerBand — the way back to a live shared table from the venue's own
+ * pages: "You're at Table 18 · 3 people · 367 lei so far" (16-shared-table.html
+ * T0c), and the same band offering to start one when none is live (T0e).
+ *
+ * It is one target, not a card with a button in it. The frames draw a chevron
+ * under md and an "Open the table" button from md, but both mean "this band
+ * goes to the table", so the band is the link at both widths and `action`
+ * renders inside it as the wide screen's affordance — a span that looks like a
+ * button, `aria-hidden`, because the link already carries the name. A real
+ * button nested in a link is invalid HTML and gives a screen reader two
+ * controls where a reader sees one.
+ *
+ * `linkComponent` takes the app's router link (`next/link`); it falls back to
+ * `a`, so the design system imports no router.
+ */
+type TableTriggerBandProps = {
+    /** "You're at Table 18", "Start a table". */
+    title: React.ReactNode;
+    /** "3 people · 367 lei so far"; desktop draws the longer "Adrian, Bruno and you · opened 19:42". */
+    meta?: React.ReactNode;
+    /** The avatar stack — an `AvatarGroup`, or nothing when no table is live. */
+    people?: React.ReactNode;
+    /**
+     * The wide screen's call to action. Decorative: the band is the control, so
+     * this must NOT be a real `button` — a button inside an anchor is invalid
+     * HTML. Pass `<Button asChild><span>…</span></Button>`.
+     */
+    action?: React.ReactNode;
+    href: string;
+    /** The app's link component. Defaults to `a`. */
+    linkComponent?: React.ElementType;
+    className?: string;
+} & Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "href" | "title" | "action">;
+declare const TableTriggerBand: React.ForwardRefExoticComponent<{
+    /** "You're at Table 18", "Start a table". */
+    title: React.ReactNode;
+    /** "3 people · 367 lei so far"; desktop draws the longer "Adrian, Bruno and you · opened 19:42". */
+    meta?: React.ReactNode;
+    /** The avatar stack — an `AvatarGroup`, or nothing when no table is live. */
+    people?: React.ReactNode;
+    /**
+     * The wide screen's call to action. Decorative: the band is the control, so
+     * this must NOT be a real `button` — a button inside an anchor is invalid
+     * HTML. Pass `<Button asChild><span>…</span></Button>`.
+     */
+    action?: React.ReactNode;
+    href: string;
+    /** The app's link component. Defaults to `a`. */
+    linkComponent?: React.ElementType;
+    className?: string;
+} & Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, "title" | "href" | "action"> & React.RefAttributes<HTMLAnchorElement>>;
+
+export { TableTriggerBand, type TableTriggerBandProps };

package/dist/components/table-trigger-band.js

@@ -0,0 +1,43 @@
+import { cn } from '../chunk-FEK5XGZW.js';
+import { __objRest, __spreadProps, __spreadValues } from '../chunk-MMUBH76A.js';
+import * as React from 'react';
+import { ChevronRight } from 'lucide-react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var TableTriggerBand = React.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { title, meta, people, action, href, linkComponent, className } = _b, props = __objRest(_b, ["title", "meta", "people", "action", "href", "linkComponent", "className"]);
+    const Link = linkComponent != null ? linkComponent : "a";
+    return /* @__PURE__ */ jsxs(
+      Link,
+      __spreadProps(__spreadValues({
+        ref,
+        href,
+        "data-slot": "table-trigger-band",
+        className: cn(
+          "flex items-center gap-3 rounded-2xl border border-primary bg-card px-3.5 py-3 transition-colors hover:bg-accent-subtle focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+          className
+        )
+      }, props), {
+        children: [
+          people ? /* @__PURE__ */ jsx("div", { className: "shrink-0", children: people }) : null,
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsx("div", { className: "truncate text-[15px] font-bold leading-tight", children: title }),
+            meta ? /* @__PURE__ */ jsx("div", { className: "mt-0.5 truncate text-[12.5px] text-muted-foreground", children: meta }) : null
+          ] }),
+          action ? /* @__PURE__ */ jsx("span", { "data-slot": "table-trigger-action", "aria-hidden": true, className: "hidden shrink-0 md:block", children: action }) : null,
+          /* @__PURE__ */ jsx(
+            ChevronRight,
+            {
+              "aria-hidden": true,
+              className: cn("size-5 shrink-0 text-muted-foreground", action && "md:hidden")
+            }
+          )
+        ]
+      })
+    );
+  }
+);
+TableTriggerBand.displayName = "TableTriggerBand";
+
+export { TableTriggerBand };

package/dist/components/tag.d.ts

@@ -3,11 +3,11 @@ import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const tagVariants: (props?: ({
-    variant?: "default" | "destructive" | "outline" | "warning" | "success" | "primary" | "quiet" | null | undefined;
+    variant?: "default" | "primary" | "success" | "warning" | "destructive" | "outline" | "quiet" | null | undefined;
     size?: "default" | "sm" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const Tag: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & VariantProps<(props?: ({
-    variant?: "default" | "destructive" | "outline" | "warning" | "success" | "primary" | "quiet" | null | undefined;
+    variant?: "default" | "primary" | "success" | "warning" | "destructive" | "outline" | "quiet" | null | undefined;
     size?: "default" | "sm" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string> & {
     onRemove?: () => void;

package/dist/components/text.d.ts

@@ -22,8 +22,8 @@ import { VariantProps } from 'class-variance-authority';
  * Weights are 400 / 600 / 700. 500 is not in the system.
  */
 declare const textVariants: (props?: ({
-    variant?: "h2" | "h3" | "label" | "body" | "caption" | "h1" | "h4" | "small" | "display" | "body-lg" | "body-sm" | "overline" | null | undefined;
-    color?: "inherit" | "default" | "destructive" | "muted" | "primary" | "primary-foreground" | null | undefined;
+    variant?: "body" | "small" | "display" | "h2" | "h3" | "label" | "caption" | "h1" | "h4" | "body-lg" | "body-sm" | "overline" | null | undefined;
+    color?: "default" | "inherit" | "primary" | "destructive" | "muted" | "primary-foreground" | null | undefined;
     weight?: "bold" | "medium" | "normal" | "semibold" | null | undefined;
     leading?: "none" | "normal" | "tight" | "snug" | "relaxed" | "loose" | null | undefined;
     tracking?: "normal" | "tight" | "wide" | "wider" | null | undefined;

package/dist/components/toggle.d.ts

@@ -5,7 +5,7 @@ import * as TogglePrimitive from '@radix-ui/react-toggle';
 import { VariantProps } from 'class-variance-authority';
 
 declare const toggleVariants: (props?: ({
-    variant?: "tab" | "default" | "outline" | "chip" | "segmented" | null | undefined;
+    variant?: "default" | "tab" | "outline" | "chip" | "segmented" | null | undefined;
     size?: "default" | "sm" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare function Toggle({ className, variant, size, ...props }: React.ComponentProps<typeof TogglePrimitive.Root> & VariantProps<typeof toggleVariants>): react_jsx_runtime.JSX.Element;

package/dist/components/top-ranking-entry.js

@@ -1,8 +1,8 @@
-import { MenuItem } from '../chunk-VSRGEB36.js';
-import '../chunk-GESB7GCF.js';
+import { MenuItem } from '../chunk-XNBDACL7.js';
+import '../chunk-6W25S5CF.js';
 import { Separator } from '../chunk-NWZGSLPU.js';
 import { Skeleton } from '../chunk-XBBEX4SF.js';
-import '../chunk-ZU4NAYN7.js';
+import '../chunk-NIAL4ZU2.js';
 import { cn } from '../chunk-FEK5XGZW.js';
 import { __objRest, __spreadValues } from '../chunk-MMUBH76A.js';
 import { MapPin, Star, MessageSquareQuote } from 'lucide-react';

package/dist/components/venue-events-block.js

@@ -1,6 +1,6 @@
 import { Separator } from '../chunk-NWZGSLPU.js';
-import { Card } from '../chunk-FVSKGCK3.js';
 import { Skeleton } from '../chunk-XBBEX4SF.js';
+import { Card } from '../chunk-FVSKGCK3.js';
 import '../chunk-ZLMRVBD7.js';
 import { cn } from '../chunk-FEK5XGZW.js';
 import { __objRest, __spreadValues } from '../chunk-MMUBH76A.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bearmenu/ui",
-  "version": "0.8.33",
+  "version": "0.8.34",
   "packageManager": "pnpm@10.28.1",
   "description": "BearMenu design system — shared UI tokens, primitives, and components",
   "license": "UNLICENSED",
@@ -18,6 +18,8 @@
   ],
   "exports": {
     "./components/accordion": "./src/components/accordion.tsx",
+    "./components/action-bar": "./src/components/action-bar.tsx",
+    "./components/activity-row": "./src/components/activity-row.tsx",
     "./components/alert": "./src/components/alert.tsx",
     "./components/alert-dialog": "./src/components/alert-dialog.tsx",
     "./components/aspect-ratio": "./src/components/aspect-ratio.tsx",
@@ -102,6 +104,7 @@
     "./components/menu-index-list": "./src/components/menu-index-list.tsx",
     "./components/menu-intent-hero": "./src/components/menu-intent-hero.tsx",
     "./components/menu-item": "./src/components/menu-item.tsx",
+    "./components/menu-pick-row": "./src/components/menu-pick-row.tsx",
     "./components/menu-kitchen-list": "./src/components/menu-kitchen-list.tsx",
     "./components/menu-mocks": "./src/components/menu-mocks.ts",
     "./components/menu-types": "./src/components/menu-types.ts",
@@ -128,8 +131,11 @@
     "./components/poster-wall": "./src/components/poster-wall.tsx",
     "./components/progress": "./src/components/progress.tsx",
     "./components/qa-block": "./src/components/qa-block.tsx",
+    "./components/qr-panel": "./src/components/qr-panel.tsx",
     "./components/quiet-stretch": "./src/components/quiet-stretch.tsx",
     "./components/radio-group": "./src/components/radio-group.tsx",
+    "./components/reconcile-bar": "./src/components/reconcile-bar.tsx",
+    "./components/responsive-overlay": "./src/components/responsive-overlay.tsx",
     "./components/rating": "./src/components/rating.tsx",
     "./components/scroll-area": "./src/components/scroll-area.tsx",
     "./components/scroll-fade": "./src/components/scroll-fade.tsx",
@@ -149,12 +155,15 @@
     "./components/sonner": "./src/components/sonner.tsx",
     "./components/sort-option-list": "./src/components/sort-option-list.tsx",
     "./components/spinner": "./src/components/spinner.tsx",
+    "./components/split-share-row": "./src/components/split-share-row.tsx",
     "./components/stat-banner": "./src/components/stat-banner.tsx",
     "./components/stepper": "./src/components/stepper.tsx",
     "./components/sticky-container": "./src/components/sticky-container.tsx",
     "./components/story": "./src/components/story.tsx",
     "./components/switch": "./src/components/switch.tsx",
     "./components/table": "./src/components/table.tsx",
+    "./components/table-ledger-card": "./src/components/table-ledger-card.tsx",
+    "./components/table-trigger-band": "./src/components/table-trigger-band.tsx",
     "./components/tabs": "./src/components/tabs.tsx",
     "./components/tag": "./src/components/tag.tsx",
     "./components/tag-group": "./src/components/tag-group.tsx",

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

@@ -0,0 +1,78 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { ActionBar } from "./action-bar";
+import { Button } from "./button";
+
+const meta: Meta<typeof ActionBar> = {
+  title: "Shared table/ActionBar",
+  component: ActionBar,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "The band that closes a screen or an overlay. With a note, the note takes the left and the actions sit right; without one, the actions divide the width and the primary takes the trailing edge. The bar owns the home-indicator inset.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ActionBar>;
+
+/** T2 — the table overview's pair, over the bottom nav. The one split bar. */
+export const Split: Story = {
+  args: {
+    layout: "split",
+    secondary: <Button variant="outline">Add item</Button>,
+    primary: <Button variant="cta">Organise</Button>,
+  },
+};
+
+/** T6 desktop — two actions at their own width, on the trailing edge. */
+export const TwoActions: Story = {
+  args: {
+    secondary: <Button variant="outline">Cancel</Button>,
+    primary: <Button variant="cta">Save split</Button>,
+  },
+};
+
+/** T3 — the add-item overlay: the qualifier is read before the commit. */
+export const WithNote: Story = {
+  args: {
+    note: "Added items can be assigned afterwards.",
+    primary: <Button variant="cta">Add 1 item</Button>,
+  },
+};
+
+/** T6 mobile — the split sheet commits and nothing else. */
+export const PrimaryOnly: Story = {
+  args: {
+    primary: <Button variant="cta">Save split</Button>,
+  },
+};
+
+/** X10 — a split that does not balance cannot be saved. */
+export const DisabledPrimary: Story = {
+  args: {
+    note: "10 lei short of the item total.",
+    primary: (
+      <Button variant="cta" disabled className="bg-muted text-muted-foreground">
+        Save split
+      </Button>
+    ),
+  },
+};
+
+export const Sticky: Story = {
+  args: {
+    sticky: true,
+    secondary: <Button variant="outline">Cancel</Button>,
+    primary: <Button variant="cta">Review</Button>,
+  },
+  render: (args) => (
+    <div className="h-64 overflow-y-auto rounded-xl border border-border">
+      <div className="h-80 bg-surface-2 p-4 text-sm text-muted-foreground">Scroll me.</div>
+      <ActionBar {...args} />
+    </div>
+  ),
+};

package/src/components/action-bar.tsx

@@ -0,0 +1,80 @@
+import * as React from "react";
+import { cn } from "../lib/utils";
+
+/**
+ * ActionBar — the band that closes a screen or an overlay: the note that
+ * qualifies the action on one side, the actions on the other.
+ *
+ * The shared-table board draws it three ways and they are one component
+ * (16-shared-table.html): the table overview's "Add item · Organise" pair
+ * over the bottom nav (T2), the add-item overlay's "Added items can be
+ * assigned afterwards." beside "Add 1 item" (T3), and the split sheet's lone
+ * "Save split" (T6). The booking flow draws the same band under its steps.
+ *
+ * Two rules the frames are consistent about:
+ * - The actions sit on the trailing edge at their own width, and `primary` is
+ *   last. A `note` takes the left, so the qualifier is read before the commit.
+ *   Only the table overview divides the bar between two equal buttons — that
+ *   is `layout="split"`, not the default. (T5 and T6 draw a lone Save on the
+ *   trailing edge; T6 and X10 draw Cancel + Save split right-aligned.)
+ * - The bar owns the home-indicator inset. `pb-[max(env(safe-area-inset-bottom),12px)]`
+ *   is here and nowhere else, so no caller has to remember it.
+ *
+ * App-only offsets — bearmenu-fe's `--bottom-nav-offset`, `--page-gutter` —
+ * arrive through `className`. The design system does not know the app's
+ * chrome and must not guess at it.
+ */
+export type ActionBarProps = Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & {
+  /** The commit. Trailing edge, always last in the DOM. */
+  primary: React.ReactNode;
+  /** The way out — Cancel, Keep organising. Sits before the primary. */
+  secondary?: React.ReactNode;
+  /** The line that qualifies the action. Takes the left when present. */
+  note?: React.ReactNode;
+  /**
+   * `end` (the default) keeps the actions at their own width on the trailing
+   * edge. `split` divides the bar between them — the table overview's
+   * "Add item · Organise" pair, and nothing else the board draws.
+   */
+  layout?: "end" | "split";
+  /**
+   * Pins the bar to the bottom of its scroll container with the band's own
+   * ground and hairline. Off by default: inside an overlay the footer is
+   * already the last row of a flex column and does not need to stick.
+   */
+  sticky?: boolean;
+};
+
+const ActionBar = React.forwardRef<HTMLDivElement, ActionBarProps>(
+  ({ className, primary, secondary, note, layout = "end", sticky = false, ...props }, ref) => (
+    <div
+      ref={ref}
+      data-slot="action-bar"
+      className={cn(
+        "flex items-center gap-3 px-4 pt-3 pb-[max(env(safe-area-inset-bottom),12px)]",
+        sticky && "sticky bottom-0 z-10 border-t border-border bg-card",
+        className
+      )}
+      {...props}
+    >
+      {note ? (
+        <div data-slot="action-bar-note" className="min-w-0 flex-1 text-[12.5px] leading-normal text-muted-foreground">
+          {note}
+        </div>
+      ) : null}
+      <div
+        data-slot="action-bar-actions"
+        className={cn(
+          "flex items-center gap-3",
+          layout === "split" ? "flex-1 [&>*]:flex-1" : "ml-auto shrink-0"
+        )}
+      >
+        {secondary}
+        {primary}
+      </div>
+    </div>
+  )
+);
+ActionBar.displayName = "ActionBar";
+
+export { ActionBar };

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.