@bearmenu/ui 0.8.24 → 0.8.25

package/src/components/calendar.tsx

@@ -7,23 +7,93 @@ import { DayPicker, getDefaultClassNames, type DayButton } from "react-day-picke
 import { cn } from "../lib/utils";
 import { Button, buttonVariants } from "./button";
 
+/**
+ * `appearance="booking"` is the month grid of the booking flow's "When are you
+ * coming?" (desktop), measured from its design (`.cal`): seven equal columns
+ * 3px apart; single-letter weekdays at 9.5px bold, muted; days as 32px round
+ * cells in mono 12.5px medium, secondary ink; the chosen day filled with
+ * `--gradient-primary`, white and bold; past days at 30%; a day the venue is
+ * closed struck through in a lighter ink. No outside days. Mark closed days
+ * with `modifiers={{ closed: … }}` — the appearance styles the `closed`
+ * modifier; `disabled` covers past days and the booking window.
+ */
+type CalendarAppearance = "default" | "booking";
+
+const BOOKING_CLASSNAMES = {
+  root: "w-full",
+  months: "relative flex flex-col",
+  month: "flex w-full flex-col",
+  // The caption row is 15px with 7px under it; the chevrons sit in that row.
+  nav: "absolute inset-x-0 top-0 flex h-[15px] w-full items-center justify-between",
+  button_previous:
+    "grid size-6 -m-[4.5px] cursor-pointer place-items-center rounded-full text-muted-foreground hover:bg-surface-2 hover:text-foreground aria-disabled:pointer-events-none aria-disabled:opacity-30 [&_svg]:size-3.5",
+  button_next:
+    "grid size-6 -m-[4.5px] cursor-pointer place-items-center rounded-full text-muted-foreground hover:bg-surface-2 hover:text-foreground aria-disabled:pointer-events-none aria-disabled:opacity-30 [&_svg]:size-3.5",
+  month_caption: "mb-[7px] flex h-[15px] w-full items-center justify-center",
+  caption_label: "text-[12.5px] leading-[15px] font-bold text-foreground select-none",
+  month_grid: "w-full border-collapse",
+  weekdays: "grid grid-cols-7 gap-[3px]",
+  weekday: "pb-[3px] text-center text-[9.5px] font-bold text-muted-foreground select-none",
+  week: "mt-[3px] grid grid-cols-7 gap-[3px]",
+  day: "p-0 text-center select-none",
+  today: "",
+  outside: "invisible",
+  disabled: "",
+  hidden: "invisible",
+} as const;
+
 function Calendar({
   className,
   classNames,
-  showOutsideDays = true,
+  showOutsideDays,
   captionLayout = "label",
   buttonVariant = "ghost",
+  appearance = "default",
   formatters,
   components,
+  modifiersClassNames,
   ...props
 }: React.ComponentProps<typeof DayPicker> & {
   buttonVariant?: React.ComponentProps<typeof Button>["variant"];
+  appearance?: CalendarAppearance;
 }) {
   const defaultClassNames = getDefaultClassNames();
 
+  if (appearance === "booking") {
+    return (
+      <DayPicker
+        showOutsideDays={showOutsideDays ?? false}
+        className={cn("group/calendar w-full", className)}
+        captionLayout="label"
+        formatters={{
+          formatWeekdayName: (date) =>
+            date.toLocaleString("default", { weekday: "narrow" }),
+          ...formatters,
+        }}
+        classNames={{ ...BOOKING_CLASSNAMES, ...classNames }}
+        modifiersClassNames={{ closed: "is-closed", ...modifiersClassNames }}
+        components={{
+          Root: ({ className, rootRef, ...rootProps }) => (
+            <div data-slot="calendar" data-appearance="booking" ref={rootRef} className={cn(className)} {...rootProps} />
+          ),
+          Chevron: ({ className, orientation, ...chevronProps }) =>
+            orientation === "left" ? (
+              <ChevronLeftIcon className={cn("size-4", className)} {...chevronProps} />
+            ) : (
+              <ChevronRightIcon className={cn("size-4", className)} {...chevronProps} />
+            ),
+          DayButton: BookingDayButton,
+          ...components,
+        }}
+        {...props}
+      />
+    );
+  }
+
   return (
     <DayPicker
-      showOutsideDays={showOutsideDays}
+      showOutsideDays={showOutsideDays ?? true}
+      modifiersClassNames={modifiersClassNames}
       className={cn(
         "group/calendar bg-background p-3 [--cell-size:--spacing(9)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
         String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
@@ -177,4 +247,41 @@ function CalendarDayButton({
   );
 }
 
-export { Calendar, CalendarDayButton };
+/** The booking appearance's day: a 32px round cell, see `BOOKING_CLASSNAMES`. */
+function BookingDayButton({
+  className,
+  day,
+  modifiers,
+  ...props
+}: React.ComponentProps<typeof DayButton>) {
+  const ref = React.useRef<HTMLButtonElement>(null);
+  React.useEffect(() => {
+    if (modifiers.focused) ref.current?.focus();
+  }, [modifiers.focused]);
+
+  const closed = Boolean(modifiers.closed);
+
+  return (
+    <button
+      ref={ref}
+      type="button"
+      data-day={day.date.toLocaleDateString()}
+      data-selected={modifiers.selected || undefined}
+      data-closed={closed || undefined}
+      className={cn(
+        "grid h-8 w-full cursor-pointer place-items-center rounded-full font-mono text-[12.5px] leading-none font-medium text-ink-secondary tabular-nums",
+        "transition-colors duration-150 hover:bg-surface-2 motion-reduce:transition-none",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background",
+        modifiers.selected &&
+          "bg-[image:var(--gradient-primary)] font-bold text-white hover:bg-transparent hover:brightness-[0.94]",
+        modifiers.disabled && !closed && "cursor-not-allowed opacity-30 hover:bg-transparent",
+        // A closed day is also disabled; it reads as closed, not as past.
+        closed && "cursor-not-allowed text-[oklch(0.7_0_0)] line-through hover:bg-transparent dark:text-ink-tertiary",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Calendar, CalendarDayButton, BookingDayButton };

package/src/components/drift-rail.stories.tsx

@@ -32,7 +32,7 @@ const meta: Meta<typeof DriftRail> = {
     docs: {
       description: {
         component:
-          "An infinite horizontal marquee the reader can take hold of. Duplicates its children once (the copy is `inert`) so the scroll loop is seamless — pass a fixed, ordered list. Pauses on hover, pauses when scrolled off-screen (`IntersectionObserver`), stops outright under `prefers-reduced-motion`, and with `labels` renders a pause/play latch (WCAG 2.2.2).",
+          "An infinite horizontal marquee. Duplicates its children once so a `translateX(-50%)` loop is seamless — pass a fixed, ordered list. Pauses on hover, pauses when scrolled off-screen (`IntersectionObserver`), and stops outright under `prefers-reduced-motion`.",
       },
     },
   },
@@ -90,31 +90,3 @@ export const WithFeaturedItems: Story = {
     </div>
   ),
 };
-
-/**
- * With `labels`, a pause/play toggle renders under the rail's right edge —
- * the same latch, glyph and 44px target as `WeekendPanel`'s (WCAG 2.2.2).
- * Pressing it holds the rail still until play is pressed; hover and touch
- * still pause it on their own. The control is not rendered under
- * `prefers-reduced-motion`, where nothing drifts. The duplicate pass is
- * `inert`, so Tab visits each item once.
- */
-export const WithPauseControl: Story = {
-  render: () => (
-    <div className="max-w-[420px]">
-      <DriftRail durationSeconds={30} labels={{ pause: "Pause the rail", play: "Play the rail" }}>
-        {["Warehouse Rave", "Jazz on the Rooftop", "Open Mic Night", "Street Food Market"].map(
-          (title) => (
-            <FeaturedRailItem
-              key={title}
-              title={title}
-              venue="Atelier Café"
-              note="Sat 5 · 20:00"
-              href={`/events/${title.toLowerCase().replace(/\s+/g, "-")}`}
-            />
-          )
-        )}
-      </DriftRail>
-    </div>
-  ),
-};

package/src/components/drift-rail.tsx

@@ -3,7 +3,6 @@
 import { useEffect, useRef, useState } from "react";
 import type { PointerEvent as ReactPointerEvent } from "react";
 import { cn } from "../lib/utils";
-import { MotionPlayPause } from "./motion-icon-controls";
 
 /**
  * DriftRail — an infinite horizontal marquee for logos, tag chips or small
@@ -31,29 +30,7 @@ import { MotionPlayPause } from "./motion-icon-controls";
  * work nobody can see. `prefers-reduced-motion` removes the drift entirely;
  * the rail stays scrollable by hand, which is more than the static strip it
  * used to collapse to.
- *
- * THE READER CAN STOP IT FOR GOOD. Hover and touch are holds; a rail that
- * drifts for longer than five seconds also needs a control the reader can
- * press (WCAG 2.2.2), and a low-vision reader who cannot follow the motion
- * needs it to stay stopped. Pass `labels` and the rail renders a pause/play
- * toggle under its right edge — the same latch, glyph and 44px target as
- * `WeekendPanel`'s, so the hub's rails all answer to one control. It is not
- * rendered under `prefers-reduced-motion`, where there is nothing to stop.
- *
- * THE DUPLICATE IS INERT. The second copy is what makes the loop seamless,
- * but its links are the same links again: `aria-hidden` kept them out of the
- * accessibility tree and left them in the tab order, so a keyboard reader
- * tabbed through every item twice. `inert` removes them from focus and
- * hit-testing as well.
  */
-/** Accessible names for the pause/play toggle, injected so the DS owns no copy. */
-export type DriftRailLabels = {
-  /** Name announced while the rail drifts (the button pauses it). */
-  pause: string;
-  /** Name announced while the rail is paused (the button resumes it). */
-  play: string;
-};
-
 export type DriftRailProps = {
   children: React.ReactNode;
   /** Runs the loop right-to-left instead of left-to-right. */
@@ -62,12 +39,6 @@ export type DriftRailProps = {
   durationSeconds?: number;
   /** Pauses the loop while the pointer hovers the rail. */
   pauseOnHover?: boolean;
-  /**
-   * Accessible names for the pause/play toggle. When given, the toggle
-   * renders whenever the rail drifts (never under `prefers-reduced-motion`);
-   * without it there is no control, as before.
-   */
-  labels?: DriftRailLabels;
   className?: string;
 };
 
@@ -80,7 +51,6 @@ export function DriftRail({
   reverse = false,
   durationSeconds = DRIFT_RAIL_DEFAULT_DURATION_SECONDS,
   pauseOnHover = true,
-  labels,
   className,
 }: DriftRailProps) {
   const scrollerRef = useRef<HTMLDivElement>(null);
@@ -88,9 +58,6 @@ export function DriftRail({
   const [isHovered, setIsHovered] = useState(false);
   const [inView, setInView] = useState(true);
   const [reducedMotion, setReducedMotion] = useState(false);
-  // A latch, not a hold: it only clears when the reader presses play.
-  const [isManuallyPaused, setIsManuallyPaused] = useState(false);
-  const [playPauseReplayToken, setPlayPauseReplayToken] = useState(0);
   // `heldUntil` is a timestamp rather than a boolean so a native touch scroll
   // that keeps going after the finger lifts is not fought by the drift.
   const heldUntil = useRef(0);
@@ -131,8 +98,7 @@ export function DriftRail({
 
     let frame = 0;
     let last = performance.now();
-    const drifting =
-      !reducedMotion && !isManuallyPaused && inView && !(pauseOnHover && isHovered);
+    const drifting = !reducedMotion && inView && !(pauseOnHover && isHovered);
 
     // Start the reverse loop inside the second copy so it has room to travel.
     if (reverse && scroller.scrollLeft === 0) scroller.scrollLeft = track.scrollWidth / 2;
@@ -166,7 +132,7 @@ export function DriftRail({
     };
     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;
@@ -212,7 +178,7 @@ export function DriftRail({
     }
   };
 
-  const scroller = (
+  return (
     <div
       ref={scrollerRef}
       onMouseEnter={() => setIsHovered(true)}
@@ -236,43 +202,10 @@ export function DriftRail({
     >
       <div ref={trackRef} className="flex w-max items-stretch gap-3.5">
         {children}
-        {/* `inert` as well as `aria-hidden`: the copy's links must leave the
-            tab order too, or a keyboard reader tabs every item twice. */}
-        <div className="contents" aria-hidden="true" inert>
+        <div className="contents" aria-hidden="true">
           {children}
         </div>
       </div>
     </div>
   );
-
-  // The toggle exists to stop a drift; under reduced motion there is none.
-  // A sibling row, not an overlay: a button floated over the rail's corner
-  // would sit on an item and intercept the grab that starts there.
-  if (!labels || reducedMotion) return scroller;
-
-  return (
-    <>
-      {scroller}
-      <div className="flex justify-end">
-        {/* `MotionPlayPause`, as in `WeekendPanel`: the triangle folding into
-            two bars IS the state change. `active` is the bars, so it is
-            `!isManuallyPaused`; `replayToken` bumps on pointer down so the
-            gesture answers the touch. */}
-        <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"
-        >
-          <MotionPlayPause
-            active={!isManuallyPaused}
-            replayToken={playPauseReplayToken}
-            className="size-4"
-          />
-        </button>
-      </div>
-    </>
-  );
 }

package/src/components/hold-countdown.stories.tsx

@@ -0,0 +1,68 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Button } from "./button";
+import { HoldCountdown, type HoldCountdownLabels } from "./hold-countdown";
+
+// A fixed clock so the story always reads 09:41 on first paint.
+const NOW = Date.UTC(2026, 7, 14, 16, 0, 0);
+const expiresAt = NOW + (9 * 60 + 41) * 1000;
+
+const stackedLabels: HoldCountdownLabels = {
+  held: "Held for you",
+  explanation: "then it goes to the next person",
+  remaining: (m, s) => `${m} minutes ${s} seconds left`,
+};
+
+const inlineLabels: HoldCountdownLabels = {
+  ...stackedLabels,
+  explanation: "After the countdown the table goes to the next person on the list.",
+};
+
+const meta: Meta<typeof HoldCountdown> = {
+  title: "Booking/HoldCountdown",
+  component: HoldCountdown,
+  tags: ["autodocs"],
+  args: { expiresAt, now: () => NOW },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "How long a table offered from the waitlist stays held (\"A table opened up\"). Stacked on mobile; inline with its action on desktop. Ticks once a second and calls onExpire once, at zero.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof HoldCountdown>;
+
+/** B5a mobile. */
+export const Stacked: Story = {
+  args: { labels: stackedLabels, layout: "stacked" },
+  decorators: [
+    (Story) => (
+      <div className="w-[343px]">
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+/** B5a desktop. */
+export const Inline: Story = {
+  args: {
+    labels: inlineLabels,
+    layout: "inline",
+    action: (
+      <Button variant="cta" size="cta-sm">
+        Confirm the table
+      </Button>
+    ),
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-[520px]">
+        <Story />
+      </div>
+    ),
+  ],
+};

package/src/components/hold-countdown.tsx

@@ -0,0 +1,140 @@
+"use client";
+
+import * as React from "react";
+import { cn } from "../lib/utils";
+
+/**
+ * HoldCountdown — "HELD FOR YOU 09:41": how long a table offered from the
+ * waitlist stays reserved for this guest (the booking flow's "A table opened
+ * up").
+ *
+ * Measured from the booking design: a card with a warning-colour hairline,
+ * 14px radius, 15px inset.
+ *   - `stacked` (mobile): centred. The label at 10.5px uppercase with 0.06em
+ *     tracking, muted; the remaining time in mono at 34px bold; a muted
+ *     11.5px line under it ("then it goes to the next person").
+ *   - `inline` (desktop): one row, 18px gaps. The label over the time at
+ *     30px, then the explanation at 12.5px muted taking the free width, then
+ *     the action.
+ *
+ * Counts down from `expiresAt` once a second and calls `onExpire` once, at
+ * zero. It never shows a negative time.
+ */
+
+export type HoldCountdownLabels = {
+  /** "Held for you" */
+  held: string;
+  /** Stacked: "then it goes to the next person". Inline: "After the countdown the table goes to the next person on the list." */
+  explanation: string;
+  /** Spoken form for assistive tech — "9 minutes 41 seconds left". */
+  remaining: (minutes: number, seconds: number) => string;
+};
+
+export type HoldCountdownProps = {
+  /** When the hold ends — ISO string or epoch milliseconds. */
+  expiresAt: string | number;
+  labels: HoldCountdownLabels;
+  layout?: "stacked" | "inline";
+  /** The inline layout's action, typically a `Button variant="cta" size="cta-sm"`. */
+  action?: React.ReactNode;
+  onExpire?: () => void;
+  /** Clock override for stories and tests. */
+  now?: () => number;
+  className?: string;
+};
+
+/**
+ * The design's hold amber (`--warnc`, oklch 0.62 0.15 70), deeper than the
+ * `--warning` token (0.72): on white the token reads as a yellow alert, the
+ * design's as a timer. Dark mode takes the lifted token, which already has
+ * the contrast against the dark card.
+ */
+const HOLD_BORDER = "border-[oklch(0.62_0.15_70)] dark:border-warning";
+
+function remainingSeconds(expiresAt: string | number, now: number): number {
+  const end = typeof expiresAt === "number" ? expiresAt : Date.parse(expiresAt);
+  return Math.max(0, Math.ceil((end - now) / 1000));
+}
+
+export function HoldCountdown({
+  expiresAt,
+  labels,
+  layout = "stacked",
+  action,
+  onExpire,
+  now = Date.now,
+  className,
+}: HoldCountdownProps) {
+  const [left, setLeft] = React.useState(() => remainingSeconds(expiresAt, now()));
+  const expired = React.useRef(false);
+  const onExpireRef = React.useRef(onExpire);
+  onExpireRef.current = onExpire;
+
+  React.useEffect(() => {
+    expired.current = false;
+    const tick = () => {
+      const next = remainingSeconds(expiresAt, now());
+      setLeft(next);
+      if (next === 0 && !expired.current) {
+        expired.current = true;
+        onExpireRef.current?.();
+      }
+    };
+    tick();
+    const id = window.setInterval(tick, 1000);
+    return () => window.clearInterval(id);
+  }, [expiresAt, now]);
+
+  const minutes = Math.floor(left / 60);
+  const seconds = left % 60;
+  const display = `${String(minutes).padStart(2, "0")}:${String(seconds).padStart(2, "0")}`;
+
+  const label = (
+    <div className="text-[10.5px] leading-[13px] tracking-[0.06em] text-muted-foreground uppercase">
+      {labels.held}
+    </div>
+  );
+  const time = (
+    <div
+      role="timer"
+      aria-label={labels.remaining(minutes, seconds)}
+      className={cn(
+        "font-mono font-bold tabular-nums text-foreground",
+        layout === "stacked" ? "mt-[5px] text-[34px] leading-[40px]" : "text-[30px] leading-[35px]"
+      )}
+    >
+      {display}
+    </div>
+  );
+
+  if (layout === "inline") {
+    return (
+      <div
+        data-slot="hold-countdown"
+        className={cn(
+          "flex items-center gap-[18px] rounded-[14px] border bg-card p-[15px] text-left",
+          HOLD_BORDER,
+          className
+        )}
+      >
+        <div className="shrink-0">
+          {label}
+          {time}
+        </div>
+        <p className="flex-1 text-[12.5px] leading-[15px] text-muted-foreground">{labels.explanation}</p>
+        {action}
+      </div>
+    );
+  }
+
+  return (
+    <div
+      data-slot="hold-countdown"
+      className={cn("rounded-[14px] border bg-card p-[15px] text-center", HOLD_BORDER, className)}
+    >
+      {label}
+      {time}
+      <p className="mt-1 text-[11.5px] leading-[14px] text-muted-foreground">{labels.explanation}</p>
+    </div>
+  );
+}

package/src/components/motion-icon-set.stories.tsx

@@ -4,6 +4,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import {
   MotionHouse,
   MotionUtensils,
+  MotionCompass,
   MotionMapPin,
   MotionCalendar,
   MotionLayoutGrid,
@@ -62,6 +63,7 @@ type Glyph = { name: string; Icon: React.ComponentType<MotionIconProps>; gesture
 const OBJECTS: Glyph[] = [
   { name: "House", Icon: MotionHouse, gesture: "roof jumps, walls take the impact" },
   { name: "Utensils", Icon: MotionUtensils, gesture: "uncrosses into a place setting · holds" },
+  { name: "Compass", Icon: MotionCompass, gesture: "needle spins a turn, overshoots, hunts, settles · fills held" },
   { name: "MapPin", Icon: MotionMapPin, gesture: "jumps, fills on the descent · holds" },
   { name: "Calendar", Icon: MotionCalendar, gesture: "rolls four pages" },
   { name: "LayoutGrid", Icon: MotionLayoutGrid, gesture: "tiles shuffle one slot round the board" },

package/src/components/motion-icon-set.tsx

@@ -149,6 +149,48 @@ export function MotionUtensils(props: MotionIconProps) {
   );
 }
 
+// ─── Compass — the needle spins hard, overshoots, wobbles, settles (cycle content)
+
+const COMPASS_TIMES = [0, 0.14, 0.58, 0.76, 0.9, 1];
+
+/**
+ * The dial holds still; the needle is the content that moves through it.
+ * It pulls back against the spin first (anticipation), goes round once and
+ * 20° past its bearing, swings back short of it, and settles — the way a
+ * real needle hunts for north. One full turn is what changes the silhouette
+ * at 22px: the diamond reads reversed at the half-way frame. Pivot at the
+ * dial's centre.
+ *
+ * The held poses sit at 360°, not 0°: the performance ends a full turn on
+ * from where it started, and a held pose at 0° would make the settle spin
+ * the needle backwards. 360° and 0° draw the same needle.
+ */
+const compassNeedle: Variants = {
+  rest: { rotate: 360, fillOpacity: 0, transition: returnTransition },
+  active: { rotate: 360, fillOpacity: 1, transition: returnTransition },
+  play: {
+    rotate: [0, -24, 380, 352, 364, 360],
+    // The fill lands with the needle: it takes as the swing dies.
+    fillOpacity: [0, 0, 0, 0.6, 1, 1],
+    transition: beats(COMPASS_TIMES, 0.7),
+  },
+};
+
+export function MotionCompass(props: MotionIconProps) {
+  return (
+    <MotionIcon {...props}>
+      <circle cx="12" cy="12" r="10" />
+      <motion.path
+        variants={compassNeedle}
+        style={pivot(12, 12)}
+        fill="currentColor"
+        fillOpacity={0}
+        d="m16.24 7.76-1.804 5.411a2 2 0 0 1-1.265 1.265L7.76 16.24l1.804-5.411a2 2 0 0 1 1.265-1.265z"
+      />
+    </MotionIcon>
+  );
+}
+
 // ─── Map pin — jumps, and fills on the way down (fall and land) ───────────────
 
 const PIN_TIMES = [0, 0.16, 0.44, 0.72, 1];

package/src/components/party-counter.stories.tsx

@@ -0,0 +1,57 @@
+import * as React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { PartyCounter, type PartyCounterLabels } from "./party-counter";
+
+const labels: PartyCounterLabels = {
+  decrease: "Fewer people",
+  increase: "More people",
+  unit: (count) => (count === 1 ? "person" : "people"),
+};
+
+const meta: Meta<typeof PartyCounter> = {
+  title: "Booking/PartyCounter",
+  component: PartyCounter,
+  tags: ["autodocs"],
+  args: { labels, min: 1, max: 8 },
+  decorators: [
+    (Story) => (
+      <div className="w-[335px]">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "How many people, in \"When are you coming?\" and \"Change party size\". The plus is filled: it is the direction the screen is asking about. At an end the button disables rather than hides, so the value never moves.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof PartyCounter>;
+
+function Controlled(args: React.ComponentProps<typeof PartyCounter>) {
+  const [value, setValue] = React.useState(args.value);
+  return <PartyCounter {...args} value={value} onValueChange={setValue} />;
+}
+
+/** B1: "2 people". */
+export const Default: Story = {
+  args: { value: 2 },
+  render: (args) => <Controlled {...args} />,
+};
+
+/** At the minimum the minus disables; the value stays put. */
+export const AtMinimum: Story = {
+  args: { value: 1 },
+  render: (args) => <Controlled {...args} />,
+};
+
+/** B9: "4 people". */
+export const FourPeople: Story = {
+  args: { value: 4 },
+  render: (args) => <Controlled {...args} />,
+};