@bearmenu/ui 0.8.24 → 0.8.26

package/src/components/field.tsx

@@ -5,12 +5,21 @@ import { Slot } from "@radix-ui/react-slot";
 import { cn } from "../lib/utils";
 import { Label } from "./label";
 
+/**
+ * `booking` — the booking flow's fields (booking flow.html, `.fld`): the
+ * label a 10.5px uppercase caption in the muted ink that stays muted when
+ * the field is invalid (the hairline and the line under it carry the error),
+ * the error at 11.5px, 5px between label, control and error.
+ */
+type FieldAppearance = "default" | "booking";
+
 const FieldContext = React.createContext<{
   id: string;
   descriptionId: string;
   errorId: string;
   hasError: boolean;
-}>({ id: "", descriptionId: "", errorId: "", hasError: false });
+  appearance: FieldAppearance;
+}>({ id: "", descriptionId: "", errorId: "", hasError: false, appearance: "default" });
 
 type FieldProps = React.HTMLAttributes<HTMLDivElement> & {
   /** Field id. Auto-generated if omitted. */
@@ -19,23 +28,38 @@ type FieldProps = React.HTMLAttributes<HTMLDivElement> & {
   invalid?: boolean;
   /** Lay out content horizontally instead of stacked. */
   orientation?: "vertical" | "horizontal";
+  appearance?: FieldAppearance;
 };
 
 const Field = React.forwardRef<HTMLDivElement, FieldProps>(
-  ({ id: providedId, invalid, orientation = "vertical", className, children, ...props }, ref) => {
+  (
+    {
+      id: providedId,
+      invalid,
+      orientation = "vertical",
+      appearance = "default",
+      className,
+      children,
+      ...props
+    },
+    ref
+  ) => {
     const generatedId = React.useId();
     const id = providedId ?? generatedId;
     const descriptionId = `${id}-description`;
     const errorId = `${id}-error`;
 
     return (
-      <FieldContext.Provider value={{ id, descriptionId, errorId, hasError: !!invalid }}>
+      <FieldContext.Provider
+        value={{ id, descriptionId, errorId, hasError: !!invalid, appearance }}
+      >
         <div
           ref={ref}
           data-slot="field"
           data-invalid={invalid || undefined}
           className={cn(
-            "flex gap-2",
+            "flex",
+            appearance === "booking" ? "gap-[5px]" : "gap-2",
             orientation === "vertical" ? "flex-col" : "flex-row items-center",
             className
           )}
@@ -53,19 +77,38 @@ const FieldLabel = React.forwardRef<
   HTMLLabelElement,
   React.ComponentPropsWithoutRef<typeof Label>
 >(({ className, ...props }, ref) => {
-  const { id, hasError } = React.useContext(FieldContext);
+  const { id, hasError, appearance } = React.useContext(FieldContext);
   return (
     <Label
       ref={ref}
       data-slot="field-label"
       htmlFor={id}
-      className={cn(hasError && "text-destructive", className)}
+      className={cn(
+        appearance === "booking"
+          ? "text-[10.5px] leading-[1.2] font-semibold tracking-[0.04em] text-muted-foreground uppercase"
+          : hasError && "text-destructive",
+        className
+      )}
       {...props}
     />
   );
 });
 FieldLabel.displayName = "FieldLabel";
 
+/**
+ * "(optional)" after a label's text — sentence case, regular weight, a
+ * shade quieter than the label (booking flow.html's EMAIL (optional)).
+ */
+function FieldOptional({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) {
+  return (
+    <span
+      data-slot="field-optional"
+      className={cn("font-normal normal-case opacity-70", className)}
+      {...props}
+    />
+  );
+}
+
 const FieldControl = React.forwardRef<HTMLElement, React.ComponentPropsWithoutRef<typeof Slot>>(
   ({ ...props }, ref) => {
     const { id, descriptionId, errorId, hasError } = React.useContext(FieldContext);
@@ -101,7 +144,7 @@ FieldDescription.displayName = "FieldDescription";
 
 const FieldError = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
   ({ className, children, ...props }, ref) => {
-    const { errorId, hasError } = React.useContext(FieldContext);
+    const { errorId, hasError, appearance } = React.useContext(FieldContext);
     if (!hasError || !children) return null;
     return (
       <p
@@ -109,7 +152,14 @@ const FieldError = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<H
         id={errorId}
         role="alert"
         data-slot="field-error"
-        className={cn("text-sm text-destructive", className)}
+        className={cn(
+          appearance === "booking"
+            ? // The design's error ink: the solid token is too bright for AA
+              // at 11.5px on white; dark mode's lifted token already clears it.
+              "m-0 text-[11.5px] leading-[1.2] text-[oklch(0.52_0.16_25)] dark:text-destructive"
+            : "text-sm text-destructive",
+          className
+        )}
         {...props}
       >
         {children}
@@ -143,4 +193,13 @@ const FieldLegend = React.forwardRef<HTMLLegendElement, React.HTMLAttributes<HTM
 );
 FieldLegend.displayName = "FieldLegend";
 
-export { Field, FieldLabel, FieldControl, FieldDescription, FieldError, FieldSet, FieldLegend };
+export {
+  Field,
+  FieldLabel,
+  FieldOptional,
+  FieldControl,
+  FieldDescription,
+  FieldError,
+  FieldSet,
+  FieldLegend,
+};

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/input.tsx

@@ -15,10 +15,21 @@ const inputVariants = cva(
         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",
+      appearance: "default",
     },
   }
 );
@@ -28,12 +39,12 @@ export interface InputProps
     VariantProps<typeof inputVariants> {}
 
 const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  ({ className, type, size, shape, ...props }, ref) => {
+  ({ className, type, size, shape, appearance, ...props }, ref) => {
     return (
       <input
         type={type}
         data-slot="input"
-        className={cn(inputVariants({ size, shape }), className)}
+        className={cn(inputVariants({ size, shape, appearance }), className)}
         ref={ref}
         {...props}
       />

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} />,
+};

package/src/components/party-counter.tsx

@@ -0,0 +1,93 @@
+"use client";
+
+import * as React from "react";
+import { Minus, Plus } from "lucide-react";
+import { cn } from "../lib/utils";
+
+/**
+ * PartyCounter — how many people, in the booking flow's "When are you
+ * coming?" and "Change party size" screens.
+ *
+ * Measured from the booking design (`.stepper`): a 52px bordered field on the
+ * card ground, 12px radius, 8px side inset. A round 36px minus on the muted
+ * surface at the left, a round 36px plus filled with `--gradient-primary` at
+ * the right — the plus is the direction the screen is asking about — and the
+ * count between them at 19px bold with its unit at 12px muted.
+ *
+ * At an end the button is disabled, not hidden, so the value never shifts.
+ * The value is announced politely on change; the buttons carry their own
+ * localised names, because a lone "−" reads as nothing to a screen reader.
+ */
+
+export type PartyCounterLabels = {
+  /** "Fewer people" */
+  decrease: string;
+  /** "More people" */
+  increase: string;
+  /** The unit after the number: "people" / "person" — already pluralised by the caller. */
+  unit: (count: number) => string;
+};
+
+export type PartyCounterProps = {
+  value: number;
+  onValueChange: (value: number) => void;
+  min?: number;
+  max?: number;
+  labels: PartyCounterLabels;
+  disabled?: boolean;
+  className?: string;
+};
+
+export function PartyCounter({
+  value,
+  onValueChange,
+  min = 1,
+  max = 20,
+  labels,
+  disabled,
+  className,
+}: PartyCounterProps) {
+  const atMin = value <= min;
+  const atMax = value >= max;
+
+  const roundButton =
+    "grid size-9 shrink-0 cursor-pointer place-items-center rounded-full transition-[filter,background-color,opacity] duration-150 motion-reduce:transition-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-card disabled:cursor-not-allowed disabled:opacity-40 [&_svg]:size-4";
+
+  return (
+    <div
+      data-slot="party-counter"
+      className={cn(
+        "flex h-[52px] items-center justify-between gap-2.5 rounded-xl border border-border bg-card px-2",
+        className
+      )}
+    >
+      <button
+        type="button"
+        aria-label={labels.decrease}
+        disabled={disabled || atMin}
+        onClick={() => onValueChange(Math.max(min, value - 1))}
+        className={cn(roundButton, "bg-surface-2 text-foreground hover:bg-muted")}
+      >
+        <Minus aria-hidden />
+      </button>
+
+      <output aria-live="polite" className="flex-1 text-center">
+        <b className="text-[19px] font-bold tabular-nums text-foreground">{value}</b>
+        <span className="ml-1 text-xs text-muted-foreground">{labels.unit(value)}</span>
+      </output>
+
+      <button
+        type="button"
+        aria-label={labels.increase}
+        disabled={disabled || atMax}
+        onClick={() => onValueChange(Math.min(max, value + 1))}
+        className={cn(
+          roundButton,
+          "bg-[image:var(--gradient-primary)] text-white hover:brightness-[0.94]"
+        )}
+      >
+        <Plus aria-hidden />
+      </button>
+    </div>
+  );
+}

package/src/components/poster-tape.stories.tsx

@@ -68,32 +68,3 @@ export const LongTitles: Story = {
     ],
   },
 };
-
-/**
- * A long localised date with the time split out into `time`. The date
- * truncates ("sâm., 5 sept." becomes "sâm., 5 se…" if it must); the time is
- * `shrink-0` outside the truncating span and is always whole. Before this the
- * whole line was one truncating string and clipped to "17:…".
- */
-export const LocalisedDateAndTime: Story = {
-  args: {
-    items: [
-      { id: "1", title: "Warehouse Rave", meta: "sâmbătă, 5 septembrie", time: "17:00" },
-      { id: "2", title: "Jazz on the Rooftop", meta: "vineri, 4 septembrie", time: "19:30" },
-      { id: "3", title: "Open Mic Night", meta: "joi, 3 sept.", time: "21:00" },
-      { id: "4", title: "Street Food Market", meta: "duminică, 6 septembrie", time: "12:00" },
-    ],
-  },
-};
-
-/**
- * With `labels`, a pause/play toggle renders under the tape's right edge —
- * `<DriftRail>`'s control, forwarded. Pressing it latches the tape still
- * until play is pressed again. It does not render under
- * `prefers-reduced-motion`, where nothing drifts.
- */
-export const WithPauseControl: Story = {
-  args: {
-    labels: { pause: "Pause the tape", play: "Play the tape" },
-  },
-};