@bearmenu/ui 0.8.56 → 0.8.58

package/src/components/time-slot.tsx

@@ -21,62 +21,158 @@ import { Skeleton } from "./skeleton";
  *     7px gaps.
  *
  * A slot is a button with `aria-pressed`: one of many times, picked once.
+ *
+ * ── size="touch" ──────────────────────────────────────────────────────────
+ * The default slot is 35px tall with a 9.5px meta line: under both the 44px
+ * touch floor and the 12px type floor, so a staff tool on a phone cannot use
+ * it. `touch` is `min-h-11`, 16px mono time, 12px meta, 12px radius. Selected
+ * is a FILL of `--accent` with `accent-foreground` type (the reasoning is
+ * DayRailChip's: the gradient's primary-foreground flips dark-on-gradient in
+ * dark mode), and the meta stays at full opacity.
+ *
+ * `fit` (touch only) says how well the slot suits the party, in words AND a
+ * dot, so nothing hangs on colour: `fits` (success), `tight` (warning, a join
+ * or a squeeze), `none` (dashed, muted — still tappable, the manager can
+ * override, so no strike-through and no fading).
+ *
+ * `disabled` means LOCKED, not taken: half opacity, not-allowed, no strike.
+ * It uses `aria-disabled` rather than the `disabled` attribute so a locked
+ * rail keeps focus where it was. `unavailable` is still the taken/past state.
  */
 
 export type TimeSlotTone = "default" | "waitlist";
+export type TimeSlotSize = "default" | "touch";
+export type TimeSlotFit = "fits" | "tight" | "none";
 
-export type TimeSlotProps = {
+/**
+ * `fit` needs a `meta`: the meta text says the fit in words, and the dot is
+ * aria-hidden, so a fit without one would hang on colour alone.
+ */
+export type TimeSlotFitProps =
+  | {
+      /** "Popular", "2 left", "Waitlist" — already localised. */
+      meta?: string;
+      fit?: undefined;
+    }
+  | {
+      /** Says the fit in words — "R1+R2", "Join R3+R4", "Full". */
+      meta: string;
+      /** Touch only. How well the slot suits the party. Requires `meta`. */
+      fit: TimeSlotFit;
+    };
+
+export type TimeSlotProps = TimeSlotFitProps & {
   /** 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;
+  /** `default` is the booking flow's 35px slot; `touch` meets the 44px / 12px floors. */
+  size?: TimeSlotSize;
+  /** Locked, not taken: dimmed, not-allowed, no strike-through, still focusable. */
+  disabled?: boolean;
   onSelect?: () => void;
-  /** Full accessible name, when the visible text is not enough ("19:30, popular"). */
+  /**
+   * Full accessible name, when the visible text is not enough ("19:30, popular").
+   * It REPLACES the visible text, so with `fit` it must say the fit in words
+   * ("19:30, fits at R1 and R2"): the dot is aria-hidden.
+   */
   "aria-label"?: string;
   className?: string;
 };
 
+const FIT_DOT = {
+  fits: "bg-success",
+  tight: "bg-warning-deep",
+} as const;
+
+const FIT_META = {
+  fits: "text-success-ink",
+  tight: "text-warning-ink",
+  none: "text-muted-foreground",
+} as const;
+
 export function TimeSlot({
   time,
   meta,
   tone = "default",
   selected,
   unavailable,
+  size = "default",
+  fit,
+  disabled,
   onSelect,
   "aria-label": ariaLabel,
   className,
 }: TimeSlotProps) {
+  const touch = size === "touch";
+  // `fit` is a touch-only vocabulary; the default slot ignores it.
+  const activeFit = touch ? fit : undefined;
+  const locked = disabled && !unavailable;
+  const interactive = !unavailable && !locked;
+  const dashed = activeFit === "none" && !selected;
+
+  const fitDot =
+    activeFit && activeFit !== "none" ? (
+      <span
+        aria-hidden
+        data-slot="time-slot-fit-dot"
+        className={cn(
+          "size-1.5 shrink-0 rounded-full",
+          selected ? "bg-accent-foreground" : FIT_DOT[activeFit]
+        )}
+      />
+    ) : null;
+
   return (
     <button
       type="button"
       data-slot="time-slot"
+      data-size={size}
+      data-fit={activeFit}
       aria-pressed={selected ? true : false}
       aria-label={ariaLabel}
+      aria-disabled={locked ? true : undefined}
       disabled={unavailable}
-      onClick={onSelect}
+      onClick={locked ? undefined : onSelect}
       className={cn(
+        "flex w-full flex-col items-center border text-center",
         // 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]",
+        touch
+          ? "min-h-11 justify-center gap-1 rounded-xl px-2 py-2 leading-[1.2]"
+          : "justify-start rounded-[11px] px-1 py-2 leading-[1.2]",
+        interactive ? "cursor-pointer" : "cursor-not-allowed",
         // A press state, not just hover: this is the most-tapped control in
         // the flow and the primary device has no hover at all, so without it
         // a tap gives nothing back until the fill repaints.
-        "transition-[border-color,filter,transform] duration-150 not-disabled:active:scale-[0.98] motion-reduce:transition-none",
+        touch
+          ? "transition-[background-color,border-color,color,transform] duration-150 motion-reduce:transition-none"
+          : "transition-[border-color,filter,transform] duration-150 motion-reduce:transition-none",
+        interactive && "active:scale-[0.98]",
         "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-primary-foreground hover:brightness-[0.94]"
-          : "border-border bg-card text-foreground hover:border-accent/50",
-        unavailable && "cursor-not-allowed opacity-[0.32] hover:border-border"
+          ? touch
+            ? "border-accent bg-accent text-accent-foreground"
+            : cn(
+                "border-transparent bg-[image:var(--gradient-primary)] text-primary-foreground",
+                interactive && "hover:brightness-[0.94]"
+              )
+          : dashed
+            ? "border-dashed border-border bg-transparent text-muted-foreground"
+            : "border-border bg-card text-foreground",
+        !selected && interactive && "hover:border-accent/50",
+        unavailable && "opacity-[0.32]",
+        locked && "opacity-50",
+        className
       )}
     >
       <b
         className={cn(
-          "block font-mono text-[14.5px] leading-none font-bold tabular-nums",
+          "block font-mono leading-none font-bold tabular-nums",
+          touch ? "text-base" : "text-[14.5px]",
           unavailable && "line-through"
         )}
       >
@@ -85,15 +181,22 @@ export function TimeSlot({
       {meta && (
         <span
           className={cn(
-            "mt-[3px] block text-[9.5px] leading-[1.2]",
+            touch
+              ? "flex max-w-full items-center justify-center gap-1 text-xs leading-4"
+              : "mt-[3px] block text-[9.5px] leading-[1.2]",
             selected
-              ? "text-primary-foreground/80"
-              : tone === "waitlist"
-                ? "text-muted-foreground"
-                : "text-accent"
+              ? touch
+                ? "text-accent-foreground"
+                : "text-primary-foreground/80"
+              : activeFit
+                ? FIT_META[activeFit]
+                : tone === "waitlist"
+                  ? "text-muted-foreground"
+                  : "text-accent"
           )}
         >
-          {meta}
+          {fitDot}
+          {touch ? <span className="line-clamp-2 break-words">{meta}</span> : meta}
         </span>
       )}
     </button>

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

@@ -22,6 +22,10 @@ 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 } };
+/** The events map's week picker: the day's event count under the date. */
+export const WithDetail: Story = {
+  args: { weekday: "Fri", day: "13", detail: "12", "aria-label": "Friday 13 November, 12 events" },
+};
 
 const WEEK = [
   ["Mon", "10"],

package/src/components/weekday-chip.tsx

@@ -12,11 +12,19 @@ import { cn } from "../lib/utils";
  * 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
+ * hairline, 11px radius, 7px vertical inset, centred. The weekday at 11px
  * 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.
+ *
+ * The weekday was 10px, under the HIG's 11pt floor for iPhone text; measured
+ * when the events map took this chip for its week picker (bearmenu-fe,
+ * 2026-11-10). 11px still holds a three-letter weekday in a 46px seventh of a
+ * phone's width.
+ *
+ * `detail` is an optional third line under the date: the events map prints
+ * that day's event count there. A chip without it keeps its booking height.
  */
 
 export type WeekdayChipProps = {
@@ -24,6 +32,9 @@ export type WeekdayChipProps = {
   weekday: string;
   /** Day of month as displayed — "14". */
   day: string;
+  /** A short line under the date — "12", that day's events. Give the button
+   *  an `aria-label` that says it with its unit; a bare number is unclear. */
+  detail?: string;
   selected?: boolean;
   /** Closed that day or outside the booking window. */
   unavailable?: boolean;
@@ -36,6 +47,7 @@ export type WeekdayChipProps = {
 export function WeekdayChip({
   weekday,
   day,
+  detail,
   selected,
   unavailable,
   onSelect,
@@ -63,13 +75,24 @@ export function WeekdayChip({
     >
       <span
         className={cn(
-          "block text-[10px] tracking-[0.05em] uppercase",
+          "block text-[11px] 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>
+      {detail !== undefined && (
+        <span
+          data-slot="weekday-chip-detail"
+          className={cn(
+            "mt-0.5 block font-mono text-[11px] tabular-nums",
+            selected ? "text-white/85" : "text-muted-foreground"
+          )}
+        >
+          {detail}
+        </span>
+      )}
     </button>
   );
 }