@bearmenu/ui 0.8.24 → 0.8.25

package/dist/components/party-counter.js

@@ -0,0 +1,61 @@
+import { cn } from '../chunk-FEK5XGZW.js';
+import '../chunk-MMUBH76A.js';
+import { Minus, Plus } from 'lucide-react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function PartyCounter({
+  value,
+  onValueChange,
+  min = 1,
+  max = 20,
+  labels,
+  disabled,
+  className
+}) {
+  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 /* @__PURE__ */ jsxs(
+    "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
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "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"),
+            children: /* @__PURE__ */ jsx(Minus, { "aria-hidden": true })
+          }
+        ),
+        /* @__PURE__ */ jsxs("output", { "aria-live": "polite", className: "flex-1 text-center", children: [
+          /* @__PURE__ */ jsx("b", { className: "text-[19px] font-bold tabular-nums text-foreground", children: value }),
+          /* @__PURE__ */ jsx("span", { className: "ml-1 text-xs text-muted-foreground", children: labels.unit(value) })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "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]"
+            ),
+            children: /* @__PURE__ */ jsx(Plus, { "aria-hidden": true })
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { PartyCounter };

package/dist/components/place-card.js

@@ -3,10 +3,10 @@ import { HOVER_IMAGE_MOTION, HOVER_IMAGE_WRAPPER, HOVER_MOTION, HOVER_LIFT_GRID_
 import { NEUTRAL_ICON_FILTER } from '../chunk-LQWGZIYA.js';
 import { GradeAtom } from '../chunk-YE4ZQUTI.js';
 import { showsGradeAtom } from '../chunk-I5V446BX.js';
-import { Separator } from '../chunk-NWZGSLPU.js';
 import { springSnappy } from '../chunk-OIV7B44M.js';
+import { Separator } from '../chunk-NWZGSLPU.js';
 import { Skeleton } from '../chunk-XBBEX4SF.js';
-import { Badge } from '../chunk-5XREWOBB.js';
+import { Badge } from '../chunk-IEIJP73R.js';
 import { cn } from '../chunk-FEK5XGZW.js';
 import { __objRest, __spreadValues } from '../chunk-MMUBH76A.js';
 import { forwardRef, memo, useState, useMemo } from 'react';

package/dist/components/place-details-mobile.js

@@ -3,7 +3,7 @@ import '../chunk-FMTJGO76.js';
 import '../chunk-MWB7S54O.js';
 import '../chunk-NWZGSLPU.js';
 import { Text } from '../chunk-ZLMRVBD7.js';
-import { Badge } from '../chunk-5XREWOBB.js';
+import { Badge } from '../chunk-IEIJP73R.js';
 import { cn } from '../chunk-FEK5XGZW.js';
 import '../chunk-MMUBH76A.js';
 import { useState } from 'react';

package/dist/components/poster-tape.d.ts

@@ -1,6 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ReactNode } from 'react';
-import { DriftRailLabels } from './drift-rail.js';
 
 /**
  * PosterTape — the closing marquee: small 4:5 posters drifting past at a
@@ -13,18 +12,8 @@ import { DriftRailLabels } from './drift-rail.js';
 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 />`. */
@@ -40,10 +29,8 @@ 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;
 };
-declare function PosterTape({ items, linkComponent: LinkComponent, durationSeconds, labels, className, }: PosterTapeProps): react_jsx_runtime.JSX.Element;
+declare function PosterTape({ items, linkComponent: LinkComponent, durationSeconds, className, }: PosterTapeProps): react_jsx_runtime.JSX.Element;
 
 export { PosterTape, type PosterTapeItem, type PosterTapeLinkProps, type PosterTapeProps };

package/dist/components/poster-tape.js

@@ -1,6 +1,4 @@
-import { DriftRail } from '../chunk-I4RUOAU7.js';
-import '../chunk-4OF4T4AI.js';
-import '../chunk-L3VEMP5A.js';
+import { DriftRail } from '../chunk-AHL45DD2.js';
 import { EventPosterFallback } from '../chunk-FDITZ2VM.js';
 import { cn } from '../chunk-FEK5XGZW.js';
 import { __objRest, __spreadValues } from '../chunk-MMUBH76A.js';
@@ -36,13 +34,7 @@ function PosterTapeItemCard({
       )
     ) : (_a = item.fallback) != null ? _a : /* @__PURE__ */ jsx(EventPosterFallback, {}) }),
     /* @__PURE__ */ jsx("div", { className: "mt-1.5 text-[11px] font-semibold leading-[1.3] sm:mt-[7px] sm:text-[11.5px]", children: item.title }),
-    /* @__PURE__ */ jsxs("div", { className: "mt-0.5 flex gap-1 font-mono text-[10px] text-muted-foreground sm:text-[10.5px]", children: [
-      /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: item.meta }),
-      item.time && /* @__PURE__ */ jsxs("span", { className: "shrink-0", children: [
-        "\xB7 ",
-        item.time
-      ] })
-    ] })
+    /* @__PURE__ */ jsx("div", { className: "mt-0.5 truncate font-mono text-[10px] text-muted-foreground sm:text-[10.5px]", children: item.meta })
   ] });
   const itemClasses = "block w-[132px] shrink-0";
   if (item.href) {
@@ -64,10 +56,9 @@ function PosterTape({
   items,
   linkComponent: LinkComponent = DefaultLink,
   durationSeconds = POSTER_TAPE_DEFAULT_DURATION_SECONDS,
-  labels,
   className
 }) {
-  return /* @__PURE__ */ jsx(DriftRail, { durationSeconds, labels, className, children: items.map((item) => /* @__PURE__ */ jsx(PosterTapeItemCard, { item, LinkComponent }, item.id)) });
+  return /* @__PURE__ */ jsx(DriftRail, { durationSeconds, className, children: items.map((item) => /* @__PURE__ */ jsx(PosterTapeItemCard, { item, LinkComponent }, item.id)) });
 }
 
 export { PosterTape };

package/dist/components/searchable-select.js

@@ -1,7 +1,7 @@
 import { Popover, PopoverTrigger, PopoverContent } from '../chunk-2ADCZXZJ.js';
 import { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem } from '../chunk-MCOHLWRS.js';
 import '../chunk-PDTPO6NG.js';
-import { Button } from '../chunk-5LTILG3L.js';
+import { Button } from '../chunk-5HHRVJOT.js';
 import '../chunk-RIH2IS7X.js';
 import '../chunk-5YNIQ2BL.js';
 import { cn } from '../chunk-FEK5XGZW.js';

package/dist/components/signature-chip.js

@@ -1,4 +1,4 @@
-export { SignatureChip } from '../chunk-BKKQ7GCZ.js';
-import '../chunk-5XREWOBB.js';
+export { SignatureChip } from '../chunk-QG6I2ILT.js';
+import '../chunk-IEIJP73R.js';
 import '../chunk-FEK5XGZW.js';
 import '../chunk-MMUBH76A.js';

package/dist/components/sliding-panels.js

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

package/dist/components/time-slot.d.ts

@@ -0,0 +1,73 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+/**
+ * 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.
+ */
+type TimeSlotTone = "default" | "waitlist";
+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;
+};
+declare function TimeSlot({ time, meta, tone, selected, unavailable, onSelect, "aria-label": ariaLabel, className, }: TimeSlotProps): react_jsx_runtime.JSX.Element;
+type TimeSlotGroup = {
+    /** Stable key — "early", "evening", "late". */
+    key: string;
+    /** "Early", "Evening", "Late" — already localised; rendered small-caps. */
+    label: string;
+    slots: (TimeSlotProps & {
+        key: string;
+    })[];
+};
+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;
+};
+declare function TimeSlotGroupLabel({ children, className, }: {
+    children: React.ReactNode;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function TimeSlotGroups({ groups, columns, className }: TimeSlotGroupsProps): react_jsx_runtime.JSX.Element;
+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.
+ */
+declare function TimeSlotGroupsSkeleton({ label, rows, columns, className, }: TimeSlotGroupsSkeletonProps): react_jsx_runtime.JSX.Element;
+
+export { TimeSlot, type TimeSlotGroup, TimeSlotGroupLabel, TimeSlotGroups, type TimeSlotGroupsProps, TimeSlotGroupsSkeleton, type TimeSlotGroupsSkeletonProps, type TimeSlotProps, type TimeSlotTone };

package/dist/components/time-slot.js

@@ -0,0 +1,106 @@
+import { Skeleton } from '../chunk-XBBEX4SF.js';
+import { cn } from '../chunk-FEK5XGZW.js';
+import { __objRest, __spreadValues } from '../chunk-MMUBH76A.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function TimeSlot({
+  time,
+  meta,
+  tone = "default",
+  selected,
+  unavailable,
+  onSelect,
+  "aria-label": ariaLabel,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "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"
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "b",
+          {
+            className: cn(
+              "block font-mono text-[14.5px] leading-none font-bold tabular-nums",
+              unavailable && "line-through"
+            ),
+            children: time
+          }
+        ),
+        meta && /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "mt-[3px] block text-[9.5px] leading-[1.2]",
+              selected ? "text-white/80" : tone === "waitlist" ? "text-muted-foreground" : "text-accent"
+            ),
+            children: meta
+          }
+        )
+      ]
+    }
+  );
+}
+var GRID_COLUMNS = { 2: "grid-cols-2", 3: "grid-cols-3" };
+function TimeSlotGroupLabel({
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "mb-[7px] font-mono text-[10px] leading-none font-semibold tracking-[0.08em] text-muted-foreground uppercase",
+        className
+      ),
+      children
+    }
+  );
+}
+function TimeSlotGroups({ groups, columns = 3, className }) {
+  return /* @__PURE__ */ jsx("div", { "data-slot": "time-slot-groups", className, children: groups.map((group) => (
+    // 14px between groups; the first sits flush with whatever is above.
+    /* @__PURE__ */ jsxs("section", { "aria-label": group.label, className: "[&+&]:mt-3.5", children: [
+      /* @__PURE__ */ jsx(TimeSlotGroupLabel, { children: group.label }),
+      /* @__PURE__ */ jsx("div", { className: cn("grid gap-[7px]", GRID_COLUMNS[columns]), children: group.slots.map((_a) => {
+        var _b = _a, { key } = _b, slot = __objRest(_b, ["key"]);
+        return /* @__PURE__ */ jsx(TimeSlot, __spreadValues({}, slot), key);
+      }) })
+    ] }, group.key)
+  )) });
+}
+function TimeSlotGroupsSkeleton({
+  label,
+  rows = 3,
+  columns = 3,
+  className
+}) {
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "time-slot-groups-skeleton", role: "status", "aria-live": "polite", className, children: [
+    /* @__PURE__ */ jsx(TimeSlotGroupLabel, { children: label }),
+    /* @__PURE__ */ jsx("div", { className: cn("grid gap-[7px]", GRID_COLUMNS[columns]), "aria-hidden": true, children: Array.from({ length: rows * columns }, (_, index) => /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: "block rounded-[11px] border border-dashed border-border bg-card px-1 py-2 opacity-60 dark:opacity-100",
+        children: /* @__PURE__ */ jsx(Skeleton, { className: "mx-auto h-[17px] w-[90%] rounded-md" })
+      },
+      index
+    )) })
+  ] });
+}
+
+export { TimeSlot, TimeSlotGroupLabel, TimeSlotGroups, TimeSlotGroupsSkeleton };

package/dist/components/toggle-group.js

@@ -1,4 +1,4 @@
-import { toggleVariants } from '../chunk-TIQNM4XD.js';
+import { toggleVariants } from '../chunk-VEGFQSZA.js';
 import { cn } from '../chunk-FEK5XGZW.js';
 import { __objRest, __spreadProps, __spreadValues } from '../chunk-MMUBH76A.js';
 import * as React from 'react';
@@ -32,6 +32,12 @@ function ToggleGroup(_a) {
         // 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), {
@@ -65,7 +71,14 @@ function ToggleGroupItem(_a) {
           size: context.size || size
         }),
         "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",
+        resolved === "segmented" ? "rounded-full px-0 data-[state=on]:shadow-[var(--shadow-card)]" : (
+          // 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/dist/components/toggle.d.ts

@@ -5,7 +5,7 @@ import * as TogglePrimitive from '@radix-ui/react-toggle';
 import { VariantProps } from 'class-variance-authority';
 
 declare const toggleVariants: (props?: ({
-    variant?: "default" | "outline" | "segmented" | null | undefined;
+    variant?: "tab" | "default" | "outline" | "chip" | "segmented" | null | undefined;
     size?: "default" | "sm" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare function Toggle({ className, variant, size, ...props }: React.ComponentProps<typeof TogglePrimitive.Root> & VariantProps<typeof toggleVariants>): react_jsx_runtime.JSX.Element;

package/dist/components/toggle.js

@@ -1,3 +1,3 @@
-export { Toggle, toggleVariants } from '../chunk-TIQNM4XD.js';
+export { Toggle, toggleVariants } from '../chunk-VEGFQSZA.js';
 import '../chunk-FEK5XGZW.js';
 import '../chunk-MMUBH76A.js';

package/dist/components/top-ranking-entry.js

@@ -1,8 +1,8 @@
-import { MenuItem } from '../chunk-SDWN6L4O.js';
-import '../chunk-BKKQ7GCZ.js';
+import { MenuItem } from '../chunk-AHHDC7ML.js';
+import '../chunk-QG6I2ILT.js';
 import { Separator } from '../chunk-NWZGSLPU.js';
 import { Skeleton } from '../chunk-XBBEX4SF.js';
-import '../chunk-5XREWOBB.js';
+import '../chunk-IEIJP73R.js';
 import { cn } from '../chunk-FEK5XGZW.js';
 import { __objRest, __spreadValues } from '../chunk-MMUBH76A.js';
 import { MapPin, Star, MessageSquareQuote } from 'lucide-react';

package/dist/components/weekday-chip.d.ts

@@ -0,0 +1,33 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+/**
+ * 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.
+ */
+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;
+};
+declare function WeekdayChip({ weekday, day, selected, unavailable, onSelect, "aria-label": ariaLabel, className, }: WeekdayChipProps): react_jsx_runtime.JSX.Element;
+
+export { WeekdayChip, type WeekdayChipProps };

package/dist/components/weekday-chip.js

@@ -0,0 +1,48 @@
+import { cn } from '../chunk-FEK5XGZW.js';
+import '../chunk-MMUBH76A.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function WeekdayChip({
+  weekday,
+  day,
+  selected,
+  unavailable,
+  onSelect,
+  "aria-label": ariaLabel,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "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
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "block text-[10px] tracking-[0.05em] uppercase",
+              selected ? "text-white/75" : "text-muted-foreground"
+            ),
+            children: weekday
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "mt-0.5 block text-[15px] font-bold tabular-nums", children: day })
+      ]
+    }
+  );
+}
+
+export { WeekdayChip };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bearmenu/ui",
-  "version": "0.8.24",
+  "version": "0.8.25",
   "description": "BearMenu design system — shared UI tokens, primitives, and components",
   "license": "UNLICENSED",
   "repository": {

package/src/components/badge.stories.tsx

@@ -68,6 +68,23 @@ export const OnPrimary: Story = {
   ),
 };
 
+/** A booking's status and its code, as in My bookings (B6). */
+export const BookingStatus: Story = {
+  render: () => (
+    <div className="flex flex-wrap items-center gap-2">
+      <Badge as="span" variant="confirmed">
+        Confirmed
+      </Badge>
+      <Badge as="span" variant="pending">
+        Pending
+      </Badge>
+      <Badge as="span" variant="code">
+        BM-8421
+      </Badge>
+    </div>
+  ),
+};
+
 export const AllVariants: Story = {
   render: () => (
     <div className="flex flex-wrap items-center gap-3">

package/src/components/badge.tsx

@@ -23,6 +23,21 @@ const badgeVariants = cva(
         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",
+        /**
+         * 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).