@bearmenu/ui 0.8.24 → 0.8.26

package/dist/{chunk-5LTILG3L.js → chunk-5HHRVJOT.js}

@@ -56,7 +56,16 @@ var buttonVariants = cva(
         ink: "border border-white/20 bg-white/[0.16] text-white hover:bg-white/25 focus-visible:ring-white/70 focus-visible:ring-offset-0",
         brown: "bg-brown text-brown-foreground shadow-sm hover:bg-brown/85 hover:shadow",
         /** An ON state that is not the primary — a toggled mode, a guide running. */
-        warning: "bg-warning text-warning-foreground shadow-sm hover:bg-warning/90 hover:shadow"
+        warning: "bg-warning text-warning-foreground shadow-sm hover:bg-warning/90 hover:shadow",
+        /**
+         * The committing action of a flow: "Continue · 19:30", "Confirm
+         * booking", "Reserve", "See booking". The booking design draws every
+         * one of them on `--gradient-primary` with white type, in both themes —
+         * the gradient is warm in dark too, so the ink never inverts.
+         * `bg-[image:…]`, not `bg-[…]`: the token is a gradient, and only
+         * `background-image` accepts it. Pair with `size="cta"` / `"cta-sm"`.
+         */
+        cta: "bg-[image:var(--gradient-primary)] text-white hover:brightness-[0.94] active:brightness-90"
       },
       size: {
         xs: "h-8 rounded-lg px-3 text-xs [&_svg]:size-3.5",
@@ -65,6 +74,10 @@ var buttonVariants = cva(
         lg: "h-12 rounded-2xl px-8",
         /** The `ink` action's shape. Owns the radius so no variant fights it. */
         pill: "h-11 rounded-full px-5 text-[13.5px] font-bold",
+        /** The booking design's action: 46px, 12px radius, 15px semibold. */
+        cta: "h-[46px] rounded-xl px-5 text-[15px] font-semibold",
+        /** Its compact form, in dense footers and inline rows: 38px, 10px radius. */
+        "cta-sm": "h-[38px] rounded-[10px] px-4 text-[13.5px] font-semibold",
         icon: "h-11 w-11 rounded-full",
         "icon-xs": "h-8 w-8 rounded-full [&_svg]:size-3.5",
         "icon-sm": "h-9 w-9 rounded-full",

package/dist/{chunk-SDWN6L4O.js → chunk-AHHDC7ML.js}

@@ -1,4 +1,4 @@
-import { SignatureChip } from './chunk-BKKQ7GCZ.js';
+import { SignatureChip } from './chunk-QG6I2ILT.js';
 import { cn } from './chunk-FEK5XGZW.js';
 import { __objRest, __spreadValues } from './chunk-MMUBH76A.js';
 import { memo } from 'react';

package/dist/{chunk-I4RUOAU7.js → chunk-AHL45DD2.js}

@@ -1,7 +1,6 @@
-import { MotionPlayPause } from './chunk-4OF4T4AI.js';
 import { cn } from './chunk-FEK5XGZW.js';
 import { useRef, useState, useEffect } from 'react';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 
 var DRIFT_RAIL_DEFAULT_DURATION_SECONDS = 42;
 var DRIFT_RAIL_RESUME_DELAY_MS = 3e3;
@@ -10,7 +9,6 @@ function DriftRail({
   reverse = false,
   durationSeconds = DRIFT_RAIL_DEFAULT_DURATION_SECONDS,
   pauseOnHover = true,
-  labels,
   className
 }) {
   const scrollerRef = useRef(null);
@@ -18,8 +16,6 @@ function DriftRail({
   const [isHovered, setIsHovered] = useState(false);
   const [inView, setInView] = useState(true);
   const [reducedMotion, setReducedMotion] = useState(false);
-  const [isManuallyPaused, setIsManuallyPaused] = useState(false);
-  const [playPauseReplayToken, setPlayPauseReplayToken] = useState(0);
   const heldUntil = useRef(0);
   const mouseDrag = useRef(null);
   const position = useRef(0);
@@ -41,14 +37,14 @@ function DriftRail({
     return () => observer.disconnect();
   }, []);
   useEffect(() => {
-    const scroller2 = scrollerRef.current;
+    const scroller = scrollerRef.current;
     const track = trackRef.current;
-    if (!scroller2 || !track) return void 0;
+    if (!scroller || !track) return void 0;
     let frame = 0;
     let last = performance.now();
-    const drifting = !reducedMotion && !isManuallyPaused && inView && !(pauseOnHover && isHovered);
-    if (reverse && scroller2.scrollLeft === 0) scroller2.scrollLeft = track.scrollWidth / 2;
-    position.current = scroller2.scrollLeft;
+    const drifting = !reducedMotion && inView && !(pauseOnHover && isHovered);
+    if (reverse && scroller.scrollLeft === 0) scroller.scrollLeft = track.scrollWidth / 2;
+    position.current = scroller.scrollLeft;
     const tick = (now) => {
       const half = track.scrollWidth / 2;
       if (half > 0) {
@@ -58,7 +54,7 @@ function DriftRail({
           const delta = perSecond * (now - last) / 1e3;
           position.current += reverse ? -delta : delta;
         } else {
-          position.current = scroller2.scrollLeft;
+          position.current = scroller.scrollLeft;
         }
         let wrapped = false;
         if (position.current >= half) {
@@ -68,14 +64,14 @@ function DriftRail({
           position.current += half;
           wrapped = true;
         }
-        if (driftingNow || wrapped) scroller2.scrollLeft = position.current;
+        if (driftingNow || wrapped) scroller.scrollLeft = position.current;
       }
       last = now;
       frame = requestAnimationFrame(tick);
     };
     frame = requestAnimationFrame(tick);
     return () => cancelAnimationFrame(frame);
-  }, [durationSeconds, inView, isHovered, isManuallyPaused, pauseOnHover, reducedMotion, reverse]);
+  }, [durationSeconds, inView, isHovered, pauseOnHover, reducedMotion, reverse]);
   const hold = () => {
     heldUntil.current = Number.POSITIVE_INFINITY;
   };
@@ -118,7 +114,7 @@ function DriftRail({
       event.stopPropagation();
     }
   };
-  const scroller = /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(
     "div",
     {
       ref: scrollerRef,
@@ -140,33 +136,10 @@ function DriftRail({
       ),
       children: /* @__PURE__ */ jsxs("div", { ref: trackRef, className: "flex w-max items-stretch gap-3.5", children: [
         children,
-        /* @__PURE__ */ jsx("div", { className: "contents", "aria-hidden": "true", inert: true, children })
+        /* @__PURE__ */ jsx("div", { className: "contents", "aria-hidden": "true", children })
       ] })
     }
   );
-  if (!labels || reducedMotion) return scroller;
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    scroller,
-    /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        onClick: () => setIsManuallyPaused((current) => !current),
-        onPointerDown: () => setPlayPauseReplayToken((n) => n + 1),
-        "aria-label": isManuallyPaused ? labels.play : labels.pause,
-        "aria-pressed": isManuallyPaused,
-        className: "flex h-11 w-11 shrink-0 cursor-pointer items-center justify-center rounded-full text-muted-foreground transition-colors duration-150 hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 motion-reduce:transition-none",
-        children: /* @__PURE__ */ jsx(
-          MotionPlayPause,
-          {
-            active: !isManuallyPaused,
-            replayToken: playPauseReplayToken,
-            className: "size-4"
-          }
-        )
-      }
-    ) })
-  ] });
 }
 
 export { DriftRail };

package/dist/{chunk-TIQNM4XD.js → chunk-F3XK34DV.js}

@@ -17,7 +17,23 @@ var toggleVariants = cva(
          * (`ToggleGroup variant="segmented"`) supplies the capsule; the cell
          * never fills with the accent, which would read as a primary button.
          */
-        segmented: "h-10 w-11 rounded-full text-muted-foreground hover:bg-transparent hover:text-foreground data-[state=on]:bg-card data-[state=on]:text-foreground data-[state=on]:shadow-[var(--shadow-card)]"
+        segmented: "h-10 w-11 rounded-full text-muted-foreground hover:bg-transparent hover:text-foreground data-[state=on]:bg-card data-[state=on]:text-foreground data-[state=on]:shadow-[var(--shadow-card)]",
+        /**
+         * A choice among a few named options that sit in a wrapping row —
+         * the booking flow's seating preference ("No preference", "Terrace",
+         * "By the window"). Off: a card pill with a hairline. On: the accent
+         * hairline over an 8% accent wash and accent type — a selection, not
+         * a button, so it never fills.
+         */
+        chip: "h-auto min-w-0 rounded-full border border-border bg-card px-[13px] py-[7px] text-[12.5px] leading-[1.2] font-normal text-foreground hover:border-accent/40 hover:bg-card hover:text-foreground data-[state=on]:border-accent data-[state=on]:bg-accent/[0.08] data-[state=on]:font-semibold data-[state=on]:text-accent",
+        /**
+         * One tab of a two-or-three-way switch that shares the width — My
+         * bookings' Upcoming / Past. The group (`ToggleGroup variant="tab"`)
+         * supplies the muted capsule; the ON tab is a raised card. The type
+         * does not change colour between on and off — as drawn, the raised
+         * card alone says which tab is current.
+         */
+        tab: "h-auto min-w-0 flex-1 rounded-full px-3 py-[7px] text-[12.5px] leading-[1.2] font-semibold text-ink-secondary hover:bg-transparent hover:text-foreground data-[state=on]:bg-card data-[state=on]:text-ink-secondary data-[state=on]:shadow-[0_1px_2px_oklch(0.5_0_0/0.12)] dark:data-[state=on]:bg-surface-2 dark:data-[state=on]:text-foreground"
       },
       size: {
         default: "h-9 px-2 min-w-9",
@@ -25,6 +41,14 @@ var toggleVariants = cva(
         lg: "h-10 px-2.5 min-w-10"
       }
     },
+    // Chips and tabs size to their type. Restated here, after the size
+    // variants, so the default size's `h-9 px-2 min-w-9` never wins the
+    // merge — for a `Toggle`, a `ToggleGroupItem` or a bare `toggleVariants`
+    // call on another element alike.
+    compoundVariants: [
+      { variant: "chip", class: "h-auto min-w-0 px-[13px]" },
+      { variant: "tab", class: "h-auto min-w-0 px-3" }
+    ],
     defaultVariants: {
       variant: "default",
       size: "default"

package/dist/{chunk-5XREWOBB.js → chunk-IEIJP73R.js}

@@ -18,7 +18,20 @@ var badgeVariants = cva(
         warning: "border-transparent bg-warning text-warning-foreground",
         brown: "border-transparent bg-brown text-brown-foreground",
         /** A count sitting INSIDE a primary-filled control: its own ink, lifted a notch. */
-        onPrimary: "border-transparent bg-primary-foreground/20 text-primary-foreground"
+        onPrimary: "border-transparent bg-primary-foreground/20 text-primary-foreground",
+        /**
+         * Status pills of a booking — "Confirmed", "Pending" — and its code
+         * chip ("BM-8421"). A full pill at 10.5px bold, as the booking design
+         * draws them. The status type is darker than the solid tokens: `success`
+         * and `warning` sit at 0.48 / 0.72 lightness, which on their own 15–20%
+         * wash fall short of AA at this size, so light mode uses the design's
+         * 0.38 / 0.42 inks and dark mode the lifted tokens.
+         */
+        // `border-0`: the base's transparent hairline would add 2px to each
+        // side the design does not have.
+        confirmed: "rounded-full border-0 bg-success/15 px-[9px] py-[3px] text-[10.5px] leading-[1.2] font-bold text-[oklch(0.38_0.1_155)] dark:text-success",
+        pending: "rounded-full border-0 bg-warning/20 px-[9px] py-[3px] text-[10.5px] leading-[1.2] font-bold text-[oklch(0.42_0.1_70)] dark:text-warning",
+        code: "rounded-full border-0 bg-surface-2 px-[9px] py-[3px] font-mono text-[10.5px] leading-[1.2] font-bold tabular-nums text-ink-secondary"
       },
       // v1.0 motion: "live" surface signal — applies `live-pulse` archetype.
       // Pair with a colored variant (e.g. variant="destructive" live).

package/dist/chunk-L3CDXVEP.js

@@ -0,0 +1,56 @@
+import { cn } from './chunk-FEK5XGZW.js';
+import { __objRest, __spreadProps, __spreadValues } from './chunk-MMUBH76A.js';
+import * as React from 'react';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import { cva } from 'class-variance-authority';
+import { Minus, Check } from 'lucide-react';
+import { jsx } from 'react/jsx-runtime';
+
+var checkboxVariants = cva(
+  "peer size-5 shrink-0 rounded-md border border-border bg-background transition-all duration-150 ease-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-primary data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground data-[state=indeterminate]:border-primary hover:border-primary/50 aria-invalid:border-destructive aria-invalid:focus-visible:ring-destructive/40",
+  {
+    variants: {
+      /**
+       * The booking flow's opt-in ("Save these details for next time",
+       * booking flow.html): a 17px box with a 5px radius, a hairline on the
+       * soft ground when off, the brand gradient with an 11px white check
+       * when on.
+       */
+      appearance: {
+        default: "",
+        booking: "size-[17px] rounded-[5px] bg-surface-2 data-[state=checked]:border-transparent data-[state=checked]:bg-[image:var(--gradient-primary)] data-[state=checked]:text-white [&_svg]:size-[11px]"
+      }
+    },
+    defaultVariants: { appearance: "default" }
+  }
+);
+var Checkbox = React.forwardRef(
+  (_a, ref) => {
+    var _b = _a, { className, appearance } = _b, props = __objRest(_b, ["className", "appearance"]);
+    return /* @__PURE__ */ jsx(
+      CheckboxPrimitive.Root,
+      __spreadProps(__spreadValues({
+        ref,
+        "data-slot": "checkbox",
+        className: cn(checkboxVariants({ appearance }), className)
+      }, props), {
+        children: /* @__PURE__ */ jsx(CheckboxPrimitive.Indicator, { className: cn("flex items-center justify-center text-current"), children: props.checked === "indeterminate" ? /* @__PURE__ */ jsx(
+          Minus,
+          {
+            className: "size-3.5 animate-in fade-in-0 zoom-in-50 duration-200 ease-out",
+            strokeWidth: 3
+          }
+        ) : /* @__PURE__ */ jsx(
+          Check,
+          {
+            className: "size-3.5 animate-in fade-in-0 zoom-in-50 duration-200 ease-out",
+            strokeWidth: 3
+          }
+        ) })
+      })
+    );
+  }
+);
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+
+export { Checkbox, checkboxVariants };

package/dist/{chunk-BKKQ7GCZ.js → chunk-QG6I2ILT.js}

@@ -1,4 +1,4 @@
-import { Badge } from './chunk-5XREWOBB.js';
+import { Badge } from './chunk-IEIJP73R.js';
 import { cn } from './chunk-FEK5XGZW.js';
 import { jsx } from 'react/jsx-runtime';
 

package/dist/{chunk-CZK2MRS2.js → chunk-VEFKZIK6.js}

@@ -16,23 +16,33 @@ var inputVariants = cva(
       shape: {
         rounded: "rounded-xl focus-visible:ring-ring",
         pill: "rounded-full bg-background shadow-[var(--shadow-card)] focus-visible:ring-accent/30"
+      },
+      /**
+       * The booking flow's field (booking flow.html, `.in`): 46px on the card
+       * ground rather than the input wash, an 11px radius, 13px inset, 14px
+       * type. Last, so it wins over the size and shape it restates.
+       */
+      appearance: {
+        default: "",
+        booking: "h-[46px] rounded-[11px] bg-card px-[13px] py-0 text-[14px] leading-[1.2] focus-visible:bg-card focus-visible:ring-ring aria-invalid:border-[oklch(0.52_0.16_25)] dark:aria-invalid:border-destructive"
       }
     },
     defaultVariants: {
       size: "default",
-      shape: "rounded"
+      shape: "rounded",
+      appearance: "default"
     }
   }
 );
 var Input = React.forwardRef(
   (_a, ref) => {
-    var _b = _a, { className, type, size, shape } = _b, props = __objRest(_b, ["className", "type", "size", "shape"]);
+    var _b = _a, { className, type, size, shape, appearance } = _b, props = __objRest(_b, ["className", "type", "size", "shape", "appearance"]);
     return /* @__PURE__ */ jsx(
       "input",
       __spreadValues({
         type,
         "data-slot": "input",
-        className: cn(inputVariants({ size, shape }), className),
+        className: cn(inputVariants({ size, shape, appearance }), className),
         ref
       }, props)
     );

package/dist/components/alert-dialog.js

@@ -1,4 +1,4 @@
-import { buttonVariants } from '../chunk-5LTILG3L.js';
+import { buttonVariants } from '../chunk-5HHRVJOT.js';
 import '../chunk-RIH2IS7X.js';
 import '../chunk-5YNIQ2BL.js';
 import { cn } from '../chunk-FEK5XGZW.js';

package/dist/components/badge.d.ts

@@ -4,7 +4,7 @@ import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const badgeVariants: (props?: ({
-    variant?: "default" | "destructive" | "outline" | "secondary" | "glass" | "overlay" | "brown" | "warning" | "success" | "onPrimary" | null | undefined;
+    variant?: "code" | "default" | "destructive" | "outline" | "secondary" | "glass" | "overlay" | "brown" | "warning" | "success" | "onPrimary" | "confirmed" | "pending" | null | undefined;
     live?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {

package/dist/components/badge.js

@@ -1,3 +1,3 @@
-export { Badge, badgeVariants } from '../chunk-5XREWOBB.js';
+export { Badge, badgeVariants } from '../chunk-IEIJP73R.js';
 import '../chunk-FEK5XGZW.js';
 import '../chunk-MMUBH76A.js';

package/dist/components/banner.d.ts

@@ -0,0 +1,36 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React from 'react';
+import { VariantProps } from 'class-variance-authority';
+
+/**
+ * Banner — a short inline note inside a flow, not a page-level alert: the
+ * booking flow's "19:30 just went" when a time is taken mid-form, "No table
+ * was booked" when a confirm fails, "This venue does not take bookings"
+ * (booking flow.html, `.bnr`).
+ *
+ * Not `Alert`: that one is a bordered card for page-level status with a
+ * pinned icon column. This is borderless, sits in the flow of a form, and
+ * reads as part of the screen — a soft ground, an optional 16px icon, an
+ * optional bold title over the body.
+ *
+ * Measured from the design: 12px radius, 12px × 14px inset, 10px between
+ * icon and text; the title at 13px bold, the body at 12.5px (90% in the
+ * warning tone), both at 1.5 leading.
+ * - `info`: the soft surface and the secondary ink.
+ * - `warning`: a 16% amber wash with the design's amber ink — darker than
+ *   the solid `--warning`, which falls short of AA on its own wash at this
+ *   size; dark mode uses the lifted token.
+ */
+declare const bannerVariants: (props?: ({
+    tone?: "warning" | "info" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type BannerProps = Omit<React.HTMLAttributes<HTMLDivElement>, "title"> & VariantProps<typeof bannerVariants> & {
+    /** A lucide icon, drawn at 16px beside the text. */
+    icon?: React.ReactNode;
+    /** The bold first line — "19:30 just went". */
+    title?: React.ReactNode;
+};
+declare function Banner({ tone, icon, title, className, children, ...props }: BannerProps): react_jsx_runtime.JSX.Element;
+
+export { Banner, type BannerProps, bannerVariants };

package/dist/components/banner.js

@@ -0,0 +1,29 @@
+import { cn } from '../chunk-FEK5XGZW.js';
+import { __objRest, __spreadProps, __spreadValues } from '../chunk-MMUBH76A.js';
+import { cva } from 'class-variance-authority';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var bannerVariants = cva(
+  "flex gap-2.5 rounded-xl px-3.5 py-3 text-[12.5px] leading-normal [&>svg]:mt-0.5 [&>svg]:size-4 [&>svg]:shrink-0",
+  {
+    variants: {
+      tone: {
+        info: "bg-surface-2 text-ink-secondary",
+        warning: "bg-[oklch(0.62_0.15_70/0.16)] text-[oklch(0.42_0.1_70)] dark:bg-warning/15 dark:text-warning"
+      }
+    },
+    defaultVariants: { tone: "info" }
+  }
+);
+function Banner(_a) {
+  var _b = _a, { tone, icon, title, className, children } = _b, props = __objRest(_b, ["tone", "icon", "title", "className", "children"]);
+  return /* @__PURE__ */ jsxs("div", __spreadProps(__spreadValues({ "data-slot": "banner", className: cn(bannerVariants({ tone }), className) }, props), { children: [
+    icon,
+    /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+      title ? /* @__PURE__ */ jsx("b", { className: "block text-[13px] font-bold", children: title }) : null,
+      /* @__PURE__ */ jsx("div", { className: cn(tone === "warning" && title ? "opacity-90" : void 0), children })
+    ] })
+  ] }));
+}
+
+export { Banner, bannerVariants };

package/dist/components/booking-row.d.ts

@@ -0,0 +1,60 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+/**
+ * BookingRow and BookingRowList — the guest's bookings in "My bookings".
+ *
+ * Measured from the booking design (`.bkrow`, and the desktop list):
+ *
+ * Mobile (below `md`): rows 14px tall-padded, 12px gap, divided by a
+ * `line-soft` hairline. A 50px thumb with an 11px radius. Line one: the venue
+ * at 14px bold, the code chip pushed right. Line two: the venue type at 11.5px
+ * muted. Line three, 7px gaps: when at 12.5px medium, the party at 12px muted,
+ * then the status pill.
+ *
+ * Desktop (`md` and up): one card (14px radius, no inset), rows 14px × 18px
+ * with 14px gaps, divided by the same hairline. A 46px thumb, then the venue
+ * (bold) with its type inline and muted over "when · party" in the secondary
+ * ink, then the status pill, the code chip and a muted chevron. The row that
+ * is next up gets a 5% accent wash.
+ *
+ * The whole row is one link. Strings arrive formatted and localised; the thumb
+ * arrives rendered, so the app picks its own image component.
+ */
+type BookingRowStatus = "confirmed" | "pending";
+type BookingRowLinkProps = {
+    href: string;
+    className?: string;
+    children: React.ReactNode;
+};
+type BookingRowProps = {
+    venueName: string;
+    /** "Bistro", "Cocktail bar" */
+    venueType?: string;
+    /** "Fri 14 Aug · 19:30" */
+    when: string;
+    /** "2 people" */
+    party: string;
+    status: BookingRowStatus;
+    /** "Confirmed", "Pending" — already localised. */
+    statusLabel: string;
+    code: string;
+    href: string;
+    /** The venue photo, rendered by the app; a quiet placeholder when absent. */
+    thumbnail?: React.ReactNode;
+    /** The next booking up — tinted on desktop. */
+    highlighted?: boolean;
+    linkComponent?: React.ComponentType<BookingRowLinkProps>;
+    className?: string;
+};
+declare function BookingRow({ venueName, venueType, when, party, status, statusLabel, code, href, thumbnail, highlighted, linkComponent: LinkComponent, className, }: BookingRowProps): react_jsx_runtime.JSX.Element;
+type BookingRowListProps = {
+    children: React.ReactNode;
+    /** "Upcoming bookings" — names the list for assistive tech. */
+    "aria-label"?: string;
+    className?: string;
+};
+/** The list around the rows: hairlines between them on mobile, one card on desktop. */
+declare function BookingRowList({ children, "aria-label": ariaLabel, className }: BookingRowListProps): react_jsx_runtime.JSX.Element;
+
+export { BookingRow, type BookingRowLinkProps, BookingRowList, type BookingRowListProps, type BookingRowProps, type BookingRowStatus };

package/dist/components/booking-row.js

@@ -0,0 +1,103 @@
+import { Badge } from '../chunk-IEIJP73R.js';
+import { cn } from '../chunk-FEK5XGZW.js';
+import { __objRest, __spreadValues } from '../chunk-MMUBH76A.js';
+import * as React from 'react';
+import { ChevronRight } from 'lucide-react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function DefaultLink(_a) {
+  var _b = _a, { href } = _b, props = __objRest(_b, ["href"]);
+  return /* @__PURE__ */ jsx("a", __spreadValues({ href }, props));
+}
+function Thumb({ children, className }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": true,
+      className: cn(
+        // Dark: `surface-2` sits a notch from the card and vanishes; the
+        // accent-tinted step reads as a photo slot.
+        "block shrink-0 overflow-hidden rounded-[11px] bg-surface-2 dark:bg-accent-subtle [&_img]:size-full [&_img]:object-cover",
+        className
+      ),
+      children
+    }
+  );
+}
+function BookingRow({
+  venueName,
+  venueType,
+  when,
+  party,
+  status,
+  statusLabel,
+  code,
+  href,
+  thumbnail,
+  highlighted,
+  linkComponent: LinkComponent = DefaultLink,
+  className
+}) {
+  const statusPill = /* @__PURE__ */ jsx(Badge, { as: "span", variant: status, children: statusLabel });
+  const codeChip = /* @__PURE__ */ jsx(Badge, { as: "span", variant: "code", children: code });
+  return /* @__PURE__ */ jsxs(
+    LinkComponent,
+    {
+      href,
+      className: cn(
+        "flex gap-3 py-3.5 leading-[1.2] text-foreground",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset",
+        "md:items-center md:gap-3.5 md:px-[18px] md:hover:bg-accent/[0.03]",
+        highlighted && "md:bg-accent/5 md:hover:bg-accent/5",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(Thumb, { className: "size-[50px] md:size-[46px]", children: thumbnail }),
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 md:hidden", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+            /* @__PURE__ */ jsx("b", { className: "truncate text-sm font-bold", children: venueName }),
+            codeChip
+          ] }),
+          venueType && /* @__PURE__ */ jsx("div", { className: "text-[11.5px] text-muted-foreground", children: venueType }),
+          /* @__PURE__ */ jsxs("div", { className: "mt-2 flex flex-wrap items-center gap-[7px]", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-[12.5px] font-medium", children: when }),
+            /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: party }),
+            statusPill
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "hidden min-w-0 flex-1 md:block", children: [
+          /* @__PURE__ */ jsxs("div", { className: "truncate", children: [
+            /* @__PURE__ */ jsx("b", { className: "text-sm font-bold", children: venueName }),
+            venueType && /* @__PURE__ */ jsx("span", { className: "ml-1.5 text-xs text-muted-foreground", children: venueType })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "mt-0.5 truncate text-[12.5px] text-ink-secondary", children: [
+            when,
+            " \xB7 ",
+            party
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("span", { className: "hidden md:contents", children: [
+          statusPill,
+          codeChip,
+          /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": true, className: "size-[15px] shrink-0 text-muted-foreground" })
+        ] })
+      ]
+    }
+  );
+}
+function BookingRowList({ children, "aria-label": ariaLabel, className }) {
+  return /* @__PURE__ */ jsx(
+    "ul",
+    {
+      "aria-label": ariaLabel,
+      className: cn(
+        "divide-y divide-line-soft",
+        "md:overflow-hidden md:rounded-[14px] md:border md:border-border md:bg-card",
+        className
+      ),
+      children: React.Children.map(children, (child) => child ? /* @__PURE__ */ jsx("li", { children: child }) : null)
+    }
+  );
+}
+
+export { BookingRow, BookingRowList };

package/dist/components/booking-summary-card.d.ts

@@ -0,0 +1,38 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+/**
+ * BookingSummaryCard — the booking at a glance on the confirmation screen
+ * ("Your table is booked"): the venue, then when, how many, where you asked
+ * to sit and the address, then the booking code.
+ *
+ * Measured from the booking design (`.cardx` + `.rowi`): a card with a 1px
+ * hairline, 14px radius, 15px inset and a 1px/3px shadow. The venue at 16px
+ * bold. Rows 11px below it, 7px apart: a 14px icon (1.8 stroke, muted) in a
+ * 16px column, 10px gap, text at 13px in the secondary ink. Then a
+ * `line-soft` divider 13px below with 13px above the code row: "BOOKING CODE"
+ * at 10.5px uppercase, muted, and the code in mono at 15px bold, pushed right.
+ *
+ * Every string arrives formatted and localised; the card only lays them out.
+ */
+type BookingSummaryCardLabels = {
+    /** "Booking code" */
+    code: string;
+};
+type BookingSummaryCardProps = {
+    venueName: string;
+    /** "Fri 14 August" */
+    date: string;
+    /** "19:30 · 2 people" */
+    timeAndParty: string;
+    /** "Terrace (requested)" — omitted when there is no preference. */
+    seating?: string;
+    /** "Strada Iuliu Maniu 12" */
+    address?: string;
+    /** "BM-8421" */
+    code: string;
+    labels: BookingSummaryCardLabels;
+    className?: string;
+};
+declare function BookingSummaryCard({ venueName, date, timeAndParty, seating, address, code, labels, className, }: BookingSummaryCardProps): react_jsx_runtime.JSX.Element;
+
+export { BookingSummaryCard, type BookingSummaryCardLabels, type BookingSummaryCardProps };