@bearmenu/ui 0.8.32 → 0.8.34

package/dist/components/split-share-row.js

@@ -0,0 +1,101 @@
+import { CurrencyInput } from '../chunk-LY67SOFC.js';
+import '../chunk-GTQSGDYF.js';
+import { Checkbox } from '../chunk-L3CDXVEP.js';
+import { cn } from '../chunk-FEK5XGZW.js';
+import { __objRest, __spreadProps, __spreadValues } from '../chunk-MMUBH76A.js';
+import * as React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var SplitShareRow = React.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      className,
+      person,
+      amount,
+      editable = false,
+      amountValue = null,
+      onAmountChange,
+      currency = "lei",
+      locale,
+      checked,
+      onCheckedChange,
+      includeLabel,
+      amountLabel,
+      disabled = false
+    } = _b, props = __objRest(_b, [
+      "className",
+      "person",
+      "amount",
+      "editable",
+      "amountValue",
+      "onAmountChange",
+      "currency",
+      "locale",
+      "checked",
+      "onCheckedChange",
+      "includeLabel",
+      "amountLabel",
+      "disabled"
+    ]);
+    const amountId = React.useId();
+    return /* @__PURE__ */ jsxs(
+      "div",
+      __spreadProps(__spreadValues({
+        ref,
+        "data-slot": "split-share-row",
+        "data-checked": checked ? "" : void 0,
+        className: cn(
+          "flex items-center gap-3 rounded-xl border border-border bg-card px-3 py-2.5",
+          className
+        )
+      }, props), {
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1 order-2", children: person }),
+          editable ? /* @__PURE__ */ jsxs("span", { className: "order-3 shrink-0", children: [
+            /* @__PURE__ */ jsx("label", { htmlFor: amountId, className: "sr-only", children: amountLabel }),
+            /* @__PURE__ */ jsx(
+              CurrencyInput,
+              {
+                id: amountId,
+                value: amountValue,
+                onChange: (next) => onAmountChange == null ? void 0 : onAmountChange(next),
+                currency,
+                locale,
+                disabled,
+                className: "h-9 w-24 rounded-lg border border-border bg-surface-2 text-right text-[13px] font-bold tabular-nums focus-within:ring-2 focus-within:ring-ring"
+              }
+            )
+          ] }) : /* @__PURE__ */ jsx(
+            "span",
+            {
+              "data-slot": "split-share-amount",
+              className: cn(
+                "order-3 shrink-0 rounded-lg bg-surface-2 px-2.5 py-1 text-[13px] font-bold tabular-nums md:bg-transparent md:px-0",
+                // Only the amount goes quiet when someone is out of the split.
+                // Dimming the whole row takes the name under 4.5:1 with it.
+                checked === false && "text-muted-foreground"
+              ),
+              children: amount
+            }
+          ),
+          onCheckedChange ? /* @__PURE__ */ jsx(
+            Checkbox,
+            {
+              checked,
+              onCheckedChange: (next) => onCheckedChange(next === true),
+              disabled,
+              "aria-label": includeLabel,
+              className: cn(
+                "relative order-4 size-6 rounded-full md:order-1 md:size-5 md:rounded-md",
+                "before:absolute before:-inset-2.5 before:content-[''] md:before:-inset-3"
+              )
+            }
+          ) : null
+        ]
+      })
+    );
+  }
+);
+SplitShareRow.displayName = "SplitShareRow";
+
+export { SplitShareRow };

package/dist/components/table-ledger-card.d.ts

@@ -0,0 +1,80 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import { VariantProps } from 'class-variance-authority';
+
+/**
+ * TableLedgerCard — what one party at a shared table has against their name.
+ *
+ * The board draws this shape four times and it is one component
+ * (16-shared-table.html):
+ * - T2, a person's card — avatar, "Adrian · host", "2 items + share", their
+ *   total, and the items under it.
+ * - T2, the Shared card — the same card whose `lead` is a people glyph or an
+ *   `AvatarGroup` instead of one avatar, and whose rows carry "40 lei each".
+ * - X5, the same card the moment someone else changed it: `updated` rings it
+ *   and tints the header, so a remote write is marked in place and the ledger
+ *   never silently re-sorts under a reader.
+ * - T4 desktop, the drop targets — the header alone, no rows, `drop-idle`
+ *   until a drag is over it and `drop-active` while it is.
+ *
+ * Money slots are `font-bold tabular-nums`, so a column of totals lines up and
+ * does not shuffle when one changes. The board sets the NUMERAL in the bold
+ * sans and only the currency suffix in mono, small and muted — so a caller
+ * passes `96` followed by a `font-mono text-[11px] text-muted-foreground`
+ * "lei", and never wraps the whole amount in `font-mono`.
+ *
+ * Drag is an accelerator only. A card in `drop-active` must have a tap and
+ * keyboard path to the same outcome — every T4 row opens "Who had this?" —
+ * because a pointer that can drag is not a pointer everyone has.
+ */
+declare const tableLedgerCardVariants: (props?: ({
+    state?: "default" | "updated" | "drop-idle" | "drop-active" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type TableLedgerRow = {
+    /** React key. Falls back to the index when the caller has no id. */
+    id?: string;
+    /** The dish or drink. */
+    label: React.ReactNode;
+    /** Its price, formatted by the caller. */
+    amount: React.ReactNode;
+    /** The quiet trailing line — "40 lei each" on the Shared card. Replaces `amount` when set. */
+    trailing?: React.ReactNode;
+    /** A chip on the row — "just now" on the X5 card, "Queued" on X6. */
+    badge?: React.ReactNode;
+};
+type TableLedgerCardProps = Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & VariantProps<typeof tableLedgerCardVariants> & {
+    /** The leading slot: an `Avatar`, an `AvatarGroup`, or a glyph for "Shared". */
+    lead?: React.ReactNode;
+    /** The name — "Adrian · host", "Shared between everyone". */
+    person?: React.ReactNode;
+    /** The line under the name — "2 items + share". */
+    meta?: React.ReactNode;
+    /** Their running total, formatted by the caller. */
+    total?: React.ReactNode;
+    /** The items. Empty or omitted for a T4 drop target. */
+    rows?: TableLedgerRow[];
+    /** Accessible names. Injected; the design system holds no copy. */
+    labels?: {
+        rows?: string;
+    };
+};
+declare const TableLedgerCard: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & VariantProps<(props?: ({
+    state?: "default" | "updated" | "drop-idle" | "drop-active" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string> & {
+    /** The leading slot: an `Avatar`, an `AvatarGroup`, or a glyph for "Shared". */
+    lead?: React.ReactNode;
+    /** The name — "Adrian · host", "Shared between everyone". */
+    person?: React.ReactNode;
+    /** The line under the name — "2 items + share". */
+    meta?: React.ReactNode;
+    /** Their running total, formatted by the caller. */
+    total?: React.ReactNode;
+    /** The items. Empty or omitted for a T4 drop target. */
+    rows?: TableLedgerRow[];
+    /** Accessible names. Injected; the design system holds no copy. */
+    labels?: {
+        rows?: string;
+    };
+} & React.RefAttributes<HTMLDivElement>>;
+
+export { TableLedgerCard, type TableLedgerCardProps, type TableLedgerRow, tableLedgerCardVariants };

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?: "success" | "warning" | "default" | "destructive" | "outline" | "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?: "success" | "warning" | "default" | "destructive" | "outline" | "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?: "body" | "caption" | "h1" | "h2" | "h3" | "h4" | "label" | "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.32",
+  "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 };