@bearmenu/ui 0.8.24 → 0.8.25

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" },
-  },
-};

package/src/components/poster-tape.tsx

@@ -3,7 +3,7 @@
 import { useState } from "react";
 import type { ReactNode } from "react";
 import { cn } from "../lib/utils";
-import { DriftRail, type DriftRailLabels } from "./drift-rail";
+import { DriftRail } from "./drift-rail";
 import { EventPosterFallback } from "./event-poster-fallback";
 
 /**
@@ -17,18 +17,8 @@ import { EventPosterFallback } from "./event-poster-fallback";
 export type PosterTapeItem = {
   id: string;
   title: string;
-  /**
-   * Caller-composed, e.g. "Sat 5" — or "Sat 5 · 20:00" when `time` is not
-   * given. Rendered as mono, small, and truncated at the tape's width.
-   */
+  /** Caller-composed, e.g. "Sat 5 · 20:00". Rendered as mono, small. */
   meta: string;
-  /**
-   * The time, e.g. "20:00", rendered after `meta` and never truncated. The
-   * tape is 132px wide and a long localised date ("sâm., 5 sept. · 17:00")
-   * used to clip to "17:…" — the one figure the reader came for. Split it out
-   * and the date is what gives way.
-   */
-  time?: string;
   posterUrl?: string;
   href?: string;
   /** Rendered instead of the poster when it's absent or failed to load. Defaults to `<EventPosterFallback />`. */
@@ -50,8 +40,6 @@ export type PosterTapeProps = {
   /** Defaults to a plain `<a>`. Pass `next/link` in a Next app. */
   linkComponent?: React.ComponentType<PosterTapeLinkProps>;
   durationSeconds?: number;
-  /** Forwarded to `<DriftRail>`: names for its pause/play toggle, which renders only when given. */
-  labels?: DriftRailLabels;
   className?: string;
 };
 
@@ -93,11 +81,8 @@ function PosterTapeItemCard({
       <div className="mt-1.5 text-[11px] font-semibold leading-[1.3] sm:mt-[7px] sm:text-[11.5px]">
         {item.title}
       </div>
-      {/* The date truncates; the time is `shrink-0` outside the truncating
-          span, so it is always whole. */}
-      <div className="mt-0.5 flex gap-1 font-mono text-[10px] text-muted-foreground sm:text-[10.5px]">
-        <span className="min-w-0 truncate">{item.meta}</span>
-        {item.time && <span className="shrink-0">· {item.time}</span>}
+      <div className="mt-0.5 truncate font-mono text-[10px] text-muted-foreground sm:text-[10.5px]">
+        {item.meta}
       </div>
     </>
   );
@@ -125,11 +110,10 @@ export function PosterTape({
   items,
   linkComponent: LinkComponent = DefaultLink,
   durationSeconds = POSTER_TAPE_DEFAULT_DURATION_SECONDS,
-  labels,
   className,
 }: PosterTapeProps) {
   return (
-    <DriftRail durationSeconds={durationSeconds} labels={labels} className={className}>
+    <DriftRail durationSeconds={durationSeconds} className={className}>
       {items.map((item) => (
         <PosterTapeItemCard key={item.id} item={item} LinkComponent={LinkComponent} />
       ))}

package/src/components/time-slot.stories.tsx

@@ -0,0 +1,85 @@
+import * as React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { TimeSlot, TimeSlotGroups, TimeSlotGroupsSkeleton, type TimeSlotGroup } from "./time-slot";
+
+const meta: Meta<typeof TimeSlot> = {
+  title: "Booking/TimeSlot",
+  component: TimeSlot,
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div className="w-[107px]">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "A bookable time. Mono, tabular, with an optional meta line — Popular and \"2 left\" in accent, Waitlist muted. Selected fills with the brand gradient; unavailable fades and strikes through.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof TimeSlot>;
+
+export const Plain: Story = { args: { time: "17:00" } };
+export const Popular: Story = { args: { time: "19:30", meta: "Popular" } };
+export const FewLeft: Story = { args: { time: "20:00", meta: "2 left" } };
+export const Waitlist: Story = { args: { time: "22:00", meta: "Waitlist", tone: "waitlist" } };
+export const Selected: Story = { args: { time: "19:30", meta: "Popular", selected: true } };
+export const SelectedPlain: Story = { args: { time: "20:30", selected: true } };
+export const Unavailable: Story = { args: { time: "18:00", unavailable: true } };
+
+function groupsFor(selected: string, onSelect: (time: string) => void): TimeSlotGroup[] {
+  const slot = (time: string, meta?: string, tone?: "waitlist") => ({
+    key: time,
+    time,
+    ...(meta ? { meta } : {}),
+    ...(tone ? { tone } : {}),
+    selected: selected === time,
+    onSelect: () => onSelect(time),
+  });
+  return [
+    { key: "early", label: "Early", slots: [slot("17:00"), slot("17:30"), slot("18:00")] },
+    {
+      key: "evening",
+      label: "Evening",
+      slots: [
+        slot("18:30"),
+        slot("19:00"),
+        slot("19:30", "Popular"),
+        slot("20:00", "2 left"),
+        slot("20:30"),
+        slot("21:00"),
+      ],
+    },
+    { key: "late", label: "Late", slots: [slot("21:30"), slot("22:00", "Waitlist", "waitlist")] },
+  ];
+}
+
+/** B1: the three groups, 19:30 chosen. */
+export const Groups: StoryObj<typeof TimeSlotGroups> = {
+  render: () => {
+    const [selected, setSelected] = React.useState("19:30");
+    return (
+      <div className="w-[335px]">
+        <TimeSlotGroups groups={groupsFor(selected, setSelected)} />
+      </div>
+    );
+  },
+  decorators: [(Story) => <Story />],
+};
+
+/** S1: checking availability — the grid keeps its shape. */
+export const Loading: StoryObj<typeof TimeSlotGroupsSkeleton> = {
+  render: () => (
+    <div className="w-[335px]">
+      <TimeSlotGroupsSkeleton label="Checking availability for 4…" />
+    </div>
+  ),
+  decorators: [(Story) => <Story />],
+};

package/src/components/time-slot.tsx

@@ -0,0 +1,186 @@
+"use client";
+
+import * as React from "react";
+import { cn } from "../lib/utils";
+import { Skeleton } from "./skeleton";
+
+/**
+ * TimeSlot and TimeSlotGroups — the bookable times in the booking flow's
+ * "When are you coming?" screen, the reserve panel on the venue page, and
+ * "Change party size".
+ *
+ * Measured from the booking design (`.tsl`, `.tgrid`, `.grouplbl`):
+ *   - A slot is a card with a 1px hairline, 11px radius, 8px × 4px inset,
+ *     centred. The time in mono at 14.5px bold, line-height 1. An optional
+ *     meta line under it at 9.5px, 3px apart — "Popular", "2 left" in accent,
+ *     "Waitlist" muted.
+ *   - Selected fills with `--gradient-primary`, white type, the meta at 80%.
+ *   - Unavailable fades to 32% with the time struck through.
+ *   - Groups are "Early / Evening / Late": a mono 10px small-caps label
+ *     (0.08em tracking, 14px above, 7px below) over a three-column grid with
+ *     7px gaps.
+ *
+ * A slot is a button with `aria-pressed`: one of many times, picked once.
+ */
+
+export type TimeSlotTone = "default" | "waitlist";
+
+export type TimeSlotProps = {
+  /** The time as displayed, already formatted in the venue's timezone — "19:30". */
+  time: string;
+  /** "Popular", "2 left", "Waitlist" — already localised. */
+  meta?: string;
+  /** `waitlist` renders the meta muted: the slot books onto the list, not a table. */
+  tone?: TimeSlotTone;
+  selected?: boolean;
+  /** Taken or past: faded and struck through, not clickable. */
+  unavailable?: boolean;
+  onSelect?: () => void;
+  /** Full accessible name, when the visible text is not enough ("19:30, popular"). */
+  "aria-label"?: string;
+  className?: string;
+};
+
+export function TimeSlot({
+  time,
+  meta,
+  tone = "default",
+  selected,
+  unavailable,
+  onSelect,
+  "aria-label": ariaLabel,
+  className,
+}: TimeSlotProps) {
+  return (
+    <button
+      type="button"
+      data-slot="time-slot"
+      aria-pressed={selected ? true : false}
+      aria-label={ariaLabel}
+      disabled={unavailable}
+      onClick={onSelect}
+      className={cn(
+        // Content sits at the top: a slot without a meta line in a row with
+        // one is stretched by the grid, and the time must not drop to the middle.
+        "flex w-full cursor-pointer flex-col items-center justify-start rounded-[11px] border px-1 py-2 text-center leading-[1.2]",
+        "transition-[border-color,filter] 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-background",
+        selected
+          ? "border-transparent bg-[image:var(--gradient-primary)] text-white hover:brightness-[0.94]"
+          : "border-border bg-card text-foreground hover:border-accent/50",
+        unavailable && "cursor-not-allowed opacity-[0.32] hover:border-border"
+      )}
+    >
+      <b
+        className={cn(
+          "block font-mono text-[14.5px] leading-none font-bold tabular-nums",
+          unavailable && "line-through"
+        )}
+      >
+        {time}
+      </b>
+      {meta && (
+        <span
+          className={cn(
+            "mt-[3px] block text-[9.5px] leading-[1.2]",
+            selected ? "text-white/80" : tone === "waitlist" ? "text-muted-foreground" : "text-accent"
+          )}
+        >
+          {meta}
+        </span>
+      )}
+    </button>
+  );
+}
+
+export type TimeSlotGroup = {
+  /** Stable key — "early", "evening", "late". */
+  key: string;
+  /** "Early", "Evening", "Late" — already localised; rendered small-caps. */
+  label: string;
+  slots: (TimeSlotProps & { key: string })[];
+};
+
+export type TimeSlotGroupsProps = {
+  groups: TimeSlotGroup[];
+  /** Columns in each group's grid. The design uses 3 everywhere; 2 only in very narrow panels. */
+  columns?: 2 | 3;
+  className?: string;
+};
+
+const GRID_COLUMNS = { 2: "grid-cols-2", 3: "grid-cols-3" } as const;
+
+export function TimeSlotGroupLabel({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <div
+      className={cn(
+        "mb-[7px] font-mono text-[10px] leading-none font-semibold tracking-[0.08em] text-muted-foreground uppercase",
+        className
+      )}
+    >
+      {children}
+    </div>
+  );
+}
+
+export function TimeSlotGroups({ groups, columns = 3, className }: TimeSlotGroupsProps) {
+  return (
+    <div data-slot="time-slot-groups" className={className}>
+      {groups.map((group) => (
+        // 14px between groups; the first sits flush with whatever is above.
+        <section key={group.key} aria-label={group.label} className="[&+&]:mt-3.5">
+          <TimeSlotGroupLabel>{group.label}</TimeSlotGroupLabel>
+          <div className={cn("grid gap-[7px]", GRID_COLUMNS[columns])}>
+            {group.slots.map(({ key, ...slot }) => (
+              <TimeSlot key={key} {...slot} />
+            ))}
+          </div>
+        </section>
+      ))}
+    </div>
+  );
+}
+
+export type TimeSlotGroupsSkeletonProps = {
+  /** The label above the grid while times load — "Checking availability for 4…". */
+  label: string;
+  rows?: number;
+  columns?: 2 | 3;
+  className?: string;
+};
+
+/**
+ * The grid while times load (S1). Same cells, same gaps, so nothing jumps when
+ * the real times land: a slot's footprint with a dashed hairline at 60%, a
+ * soft bar in place of the time. The label says what is being checked.
+ */
+export function TimeSlotGroupsSkeleton({
+  label,
+  rows = 3,
+  columns = 3,
+  className,
+}: TimeSlotGroupsSkeletonProps) {
+  return (
+    <div data-slot="time-slot-groups-skeleton" role="status" aria-live="polite" className={className}>
+      <TimeSlotGroupLabel>{label}</TimeSlotGroupLabel>
+      <div className={cn("grid gap-[7px]", GRID_COLUMNS[columns])} aria-hidden>
+        {Array.from({ length: rows * columns }, (_, index) => (
+          <span
+            key={index}
+            // Full opacity in dark: at 60% the dashed hairline disappears there.
+            className="block rounded-[11px] border border-dashed border-border bg-card px-1 py-2 opacity-60 dark:opacity-100"
+          >
+            {/* 17px: a plain slot's time line, so the cell is exactly a slot's 35px. */}
+            <Skeleton className="mx-auto h-[17px] w-[90%] rounded-md" />
+          </span>
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/components/toggle-group.stories.tsx

@@ -94,3 +94,30 @@ export const Segmented: Story = {
     </div>
   ),
 };
+
+/** Choice chips that wrap: the booking flow's seating preference (B2). */
+export const Chips: Story = {
+  render: () => (
+    <div className="w-[335px]">
+      <ToggleGroup type="single" variant="chip" defaultValue="terrace" aria-label="Seating preference">
+        <ToggleGroupItem value="none">No preference</ToggleGroupItem>
+        <ToggleGroupItem value="inside">Inside</ToggleGroupItem>
+        <ToggleGroupItem value="terrace">Terrace</ToggleGroupItem>
+        <ToggleGroupItem value="window">By the window</ToggleGroupItem>
+        <ToggleGroupItem value="quiet">Quiet corner</ToggleGroupItem>
+      </ToggleGroup>
+    </div>
+  ),
+};
+
+/** Tabs that share the width: My bookings' Upcoming / Past (B6). */
+export const Tabs: Story = {
+  render: () => (
+    <div className="w-[343px]">
+      <ToggleGroup type="single" variant="tab" defaultValue="upcoming" aria-label="Bookings">
+        <ToggleGroupItem value="upcoming">Upcoming</ToggleGroupItem>
+        <ToggleGroupItem value="past">Past</ToggleGroupItem>
+      </ToggleGroup>
+    </div>
+  ),
+};

package/src/components/toggle-group.tsx

@@ -29,6 +29,12 @@ function ToggleGroup({
         // The segmented control's capsule: muted ground, the on cell a raised
         // card inside it (see `toggleVariants.segmented`). 44px tall.
         "data-[variant=segmented]:gap-0.5 data-[variant=segmented]:rounded-full data-[variant=segmented]:bg-muted data-[variant=segmented]:p-0.5",
+        // Chips wrap onto as many rows as they need, 7px apart.
+        "data-[variant=chip]:flex-wrap data-[variant=chip]:gap-[7px] data-[variant=chip]:rounded-none",
+        // The tab bar spans its container: a muted capsule, 4px inset.
+        // Dark swaps the steps: the track takes the card, the ON tab the
+        // lighter `surface-2`, so the tab still reads as raised.
+        "data-[variant=tab]:w-full data-[variant=tab]:gap-1 data-[variant=tab]:rounded-full data-[variant=tab]:bg-surface-2 data-[variant=tab]:p-1 dark:data-[variant=tab]:bg-card",
         className
       )}
       {...props}
@@ -61,7 +67,14 @@ function ToggleGroupItem({
         "min-w-0 flex-1 shrink-0 shadow-none focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l",
         resolved === "segmented"
           ? "rounded-full px-0 data-[state=on]:shadow-[var(--shadow-card)]"
-          : "rounded-none first:rounded-l-md last:rounded-r-md",
+          : // Tabs and chips size to their type: the size variant's fixed
+            // height and min-width would otherwise win the merge.
+            resolved === "tab"
+            ? "h-auto min-w-0 rounded-full px-3"
+            : resolved === "chip"
+              ? // A chip keeps its own width, so the row can wrap.
+                "h-auto min-w-0 flex-none rounded-full px-[13px]"
+              : "rounded-none first:rounded-l-md last:rounded-r-md",
         className
       )}
       {...props}

package/src/components/toggle.tsx

@@ -22,6 +22,22 @@ const toggleVariants = cva(
          */
         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",

package/src/components/weekday-chip.stories.tsx

@@ -0,0 +1,54 @@
+import * as React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { WeekdayChip } from "./weekday-chip";
+
+const meta: Meta<typeof WeekdayChip> = {
+  title: "Booking/WeekdayChip",
+  component: WeekdayChip,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "One day in the booking flow's week rail on mobile. Weekday over date, sharing the rail's width equally. Not DayRailChip, which is the events timeline's day with a count.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof WeekdayChip>;
+
+export const Default: Story = { args: { weekday: "Mon", day: "10" } };
+export const Selected: Story = { args: { weekday: "Fri", day: "14", selected: true } };
+export const Unavailable: Story = { args: { weekday: "Tue", day: "11", unavailable: true } };
+
+const WEEK = [
+  ["Mon", "10"],
+  ["Tue", "11"],
+  ["Wed", "12"],
+  ["Thu", "13"],
+  ["Fri", "14"],
+  ["Sat", "15"],
+  ["Sun", "16"],
+] as const;
+
+/** B1 mobile: the week, Friday chosen. */
+export const Week: Story = {
+  render: () => {
+    const [selected, setSelected] = React.useState("14");
+    return (
+      <div className="flex w-[335px] gap-1.5">
+        {WEEK.map(([weekday, day]) => (
+          <WeekdayChip
+            key={day}
+            weekday={weekday}
+            day={day}
+            selected={selected === day}
+            onSelect={() => setSelected(day)}
+          />
+        ))}
+      </div>
+    );
+  },
+};

package/src/components/weekday-chip.tsx

@@ -0,0 +1,75 @@
+"use client";
+
+import * as React from "react";
+import { cn } from "../lib/utils";
+
+/**
+ * WeekdayChip — one day in the booking flow's week rail on mobile
+ * ("MON 10 · TUE 11 · … · SUN 16" in "When are you coming?").
+ *
+ * Not `DayRailChip`: that one is the events timeline's day, with a single-line
+ * label and an event count. This one is a date picker's day — weekday stacked
+ * over the date, no count — and the rail shares the width equally.
+ *
+ * Measured from the booking design (`.dchip`): flexes to an equal share, 1px
+ * hairline, 11px radius, 7px vertical inset, centred. The weekday at 10px
+ * uppercase, 0.05em tracking, muted; the date at 15px bold, tabular, 2px
+ * below. Selected fills with `--gradient-primary`, white type, the weekday at
+ * 75%. A day that cannot be booked (closed, past the window) fades to 40% and
+ * is disabled.
+ */
+
+export type WeekdayChipProps = {
+  /** "Mon", "Tue" — already localised; rendered uppercase. */
+  weekday: string;
+  /** Day of month as displayed — "14". */
+  day: string;
+  selected?: boolean;
+  /** Closed that day or outside the booking window. */
+  unavailable?: boolean;
+  onSelect?: () => void;
+  /** The full date for assistive tech — "Friday 14 August". */
+  "aria-label"?: string;
+  className?: string;
+};
+
+export function WeekdayChip({
+  weekday,
+  day,
+  selected,
+  unavailable,
+  onSelect,
+  "aria-label": ariaLabel,
+  className,
+}: WeekdayChipProps) {
+  return (
+    <button
+      type="button"
+      data-slot="weekday-chip"
+      aria-pressed={selected ? true : false}
+      aria-label={ariaLabel}
+      disabled={unavailable}
+      onClick={onSelect}
+      className={cn(
+        "min-w-0 flex-1 cursor-pointer rounded-[11px] border py-[7px] text-center leading-[1.2]",
+        "transition-[border-color,filter] 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-background",
+        selected
+          ? "border-transparent bg-[image:var(--gradient-primary)] text-white"
+          : "border-border bg-card text-foreground hover:border-accent/50",
+        unavailable && "cursor-not-allowed opacity-40 hover:border-border",
+        className
+      )}
+    >
+      <span
+        className={cn(
+          "block text-[10px] tracking-[0.05em] uppercase",
+          selected ? "text-white/75" : "text-muted-foreground"
+        )}
+      >
+        {weekday}
+      </span>
+      <span className="mt-0.5 block text-[15px] font-bold tabular-nums">{day}</span>
+    </button>
+  );
+}