@bearmenu/ui 0.8.33 → 0.8.35

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.

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/booking-row.tsx

@@ -52,6 +52,16 @@ export type BookingRowProps = {
   href: string;
   /** The venue photo, rendered by the app; a quiet placeholder when absent. */
   thumbnail?: React.ReactNode;
+  /**
+   * One more chip about this booking, beside the status — "on this phone" for
+   * a booking the signed-in guest has not put in their account yet.
+   *
+   * A node rather than a string because the app owns what it says and how it
+   * is marked; the row only owns where it sits. It rides with the status on
+   * both layouts, so the two read as one cluster of facts about the booking
+   * rather than a second row of chrome.
+   */
+  note?: React.ReactNode;
   /** The next booking up — tinted on desktop. */
   highlighted?: boolean;
   linkComponent?: React.ComponentType<BookingRowLinkProps>;
@@ -84,6 +94,7 @@ export function BookingRow({
   code,
   href,
   thumbnail,
+  note,
   highlighted,
   linkComponent: LinkComponent = DefaultLink,
   className,
@@ -127,6 +138,7 @@ export function BookingRow({
         <div className="mt-2 flex flex-wrap items-center gap-[7px]">
           <span className="text-[12.5px] font-medium">{when}</span>
           <span className="text-xs text-muted-foreground">{party}</span>
+          {note}
           {statusPill}
         </div>
       </div>
@@ -142,6 +154,7 @@ export function BookingRow({
         </div>
       </div>
       <span className="hidden md:contents">
+        {note}
         {statusPill}
         {codeChip}
         <ChevronRight aria-hidden className="size-[15px] shrink-0 text-muted-foreground" />

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"