@medalsocial/meda 3.9.0 → 3.10.0

package/dist/booking/time-screen.d.ts

@@ -1,4 +1,4 @@
-import { type ComponentType } from 'react';
+import { type ComponentType, type ReactNode } from 'react';
 import type { BookingDaypart, BookingFormat } from './format.js';
 import { type BookingLabel } from './labels.js';
 import { type SlotClassNames } from './slots.js';
@@ -70,8 +70,23 @@ export declare function dayFreeMarks(free: number): 0 | 1 | 2 | 3;
 export declare function DefaultDayChip({ label, selected, className, onSelect, free, freeLabel, }: DayChipProps): import("react").JSX.Element;
 export interface TimeChipProps {
     startTs: number;
-    /** «14:30», a party's «15:00 → 16:00», or the current hour's «15:00 · Current time». */
+    /**
+     * «14:30», a party's «15:00 → 16:00», a simultaneous party's
+     * «15:00 (Mia with Ada · Leo with Bo)», or the current hour's
+     * «15:00 · Current time». Always the chip's whole sentence.
+     */
     label: string;
+    /**
+     * `label` as elements, in the label pack's own order, with a simultaneous
+     * party's seating in a span that may wrap — so a long seating breaks onto
+     * the next line instead of widening the chip past the screen.
+     */
+    richLabel?: ReactNode;
+    /**
+     * What a week-grid column shows: too narrow for the seating, so only the
+     * hour, with `label` as the accessible name and the tooltip.
+     */
+    compactLabel?: string;
     /** One of the nearest alternatives to a slot that was just taken. */
     nearest: boolean;
     /** The screen-reader text that says so. */
@@ -83,7 +98,7 @@ export interface TimeChipProps {
     onPick: () => void;
 }
 /** One time chip. */
-export declare function DefaultTimeChip({ label, nearest, nearestLabel, current, className, onPick, }: TimeChipProps): import("react").JSX.Element;
+export declare function DefaultTimeChip({ label, richLabel, compactLabel, nearest, nearestLabel, current, className, onPick, }: TimeChipProps): import("react").JSX.Element;
 export interface TimeScreenComponents {
     DayChip?: ComponentType<DayChipProps>;
     TimeChip?: ComponentType<TimeChipProps>;

package/dist/booking/time-screen.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp, X } from 'lucide-react';
 import { useEffect, useId, useRef, useState } from 'react';
 import { cn } from '../lib/utils.js';
-import { renderLabel } from './internal/label-parts.js';
+import { labelParts, renderLabel } from './internal/label-parts.js';
 import { BookingButton, bookingButtonClass } from './internal/ui.js';
 import { visitName } from './internal/visit.js';
 import { fillLabel, labelText } from './labels.js';
@@ -123,11 +123,13 @@ export function DefaultDayChip({ label, selected, className, onSelect, free, fre
     return (_jsxs(BookingButton, { variant: "outline", size: "sm", "aria-pressed": selected, onClick: onSelect, className: cn('h-auto min-h-11 flex-col gap-1 py-1.5', free === 0 && !selected && 'text-muted-foreground', className), children: [_jsx("span", { children: label }), free === 0 && freeLabel ? (_jsx("span", { className: "text-[11px] font-medium leading-none", children: freeLabel })) : (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": "true", "data-testid": "day-free-marks", className: "flex gap-0.5", children: [1, 2, 3].map((mark) => (_jsx("span", { "data-filled": mark <= marks ? '' : undefined, className: cn('block h-[3px] w-2 rounded-full bg-current', mark > marks && 'opacity-25') }, mark))) }), freeLabel && _jsx("span", { className: "sr-only", children: freeLabel })] }))] }));
 }
 /** One time chip. */
-export function DefaultTimeChip({ label, nearest, nearestLabel, current, className, onPick, }) {
+export function DefaultTimeChip({ label, richLabel, compactLabel, nearest, nearestLabel, current, className, onPick, }) {
     if (current) {
         return (_jsx(BookingButton, { variant: "outline", size: "lg", disabled: true, "aria-current": "true", className: className, children: label }));
     }
-    return (_jsxs(BookingButton, { variant: "outline", size: "lg", onClick: onPick, className: className, children: [label, nearest && (_jsxs("span", { className: "sr-only", children: [" ", nearestLabel] }))] }));
+    // A compact chip draws less than its sentence, so the sentence becomes its name.
+    const compact = compactLabel !== undefined;
+    return (_jsxs(BookingButton, { variant: "outline", size: "lg", onClick: onPick, "aria-label": compact ? `${label}${nearest ? ` ${nearestLabel}` : ''}` : undefined, title: compact ? label : undefined, className: cn(!compact && richLabel !== undefined && 'h-auto max-w-full py-2 whitespace-normal', className), children: [compact && compactLabel, !compact && richLabel !== undefined && (_jsx("span", { className: "min-w-0 text-center", children: richLabel })), !compact && richLabel === undefined && label, nearest && !compact && (_jsxs("span", { className: "sr-only", children: [" ", nearestLabel] }))] }));
 }
 // ---------------------------------------------------------------------------
 // View logic
@@ -174,16 +176,19 @@ function buildDayStrip(clock, slots, days, takenSlotTs, currentSlotTs, openDays,
 /**
  * The one chip a family taps: `15:00 → 16:00`, or the parallel form
  * `15:00 (Name with Stylist · Name with Stylist)`. The parallel chip names the
- * people where the visitor has given a name and the service otherwise.
+ * people where the visitor has given a name and the service otherwise; its
+ * seating is drawn so it can wrap, and a week column shows the hour alone.
  */
-function partyChipLabel(labels, clock, slot, party) {
+function partyChipText(labels, clock, slot, party) {
     if (slot.mode === 'sequential') {
-        return fillLabel(labels['time.party.sequential'], {
-            start: clock.formatTime(slot.startTs),
-            end: clock.formatTime(party.chipEndTs(slot)),
-        });
+        return {
+            label: fillLabel(labels['time.party.sequential'], {
+                start: clock.formatTime(slot.startTs),
+                end: clock.formatTime(party.chipEndTs(slot)),
+            }),
+        };
     }
-    const seats = slot.seats.map((seat, index) => {
+    const names = slot.seats.map((seat, index) => {
         const item = party.items[index];
         const who = item?.bookedForName ?? (item ? visitName(item) : '');
         const stylist = party.resolveStylistName(seat.resourceId);
@@ -191,10 +196,16 @@ function partyChipLabel(labels, clock, slot, party) {
         // is a reload of the resource list, not a reason to hide the slot.
         return stylist === null ? who : fillLabel(labels['time.party.seat'], { who, stylist });
     });
-    return fillLabel(labels['time.party.parallel'], {
-        time: clock.formatTime(slot.startTs),
-        seats: seats.join(labelText(labels['time.party.seatSeparator'])),
-    });
+    const time = clock.formatTime(slot.startTs);
+    const seats = names.join(labelText(labels['time.party.seatSeparator']));
+    return {
+        label: fillLabel(labels['time.party.parallel'], { time, seats }),
+        richLabel: labelParts(labels['time.party.parallel'], {
+            time,
+            seats: _jsx("span", { className: "font-normal text-muted-foreground", children: seats }),
+        }),
+        compactLabel: time,
+    };
 }
 /**
  * The instants on offer — ONE per instant. Availability is per (start,
@@ -426,7 +437,7 @@ function WeekGrid({ labels, words, format, days, offered, currentSlotTs, nearest
                         const partySlot = partyByStart.get(slot.startTs);
                         const current = slot.startTs === currentSlotTs;
                         const isNearest = !current && nearest.has(slot.startTs);
-                        return (_jsx("li", { children: _jsx(TimeChip, { startTs: slot.startTs, label: chipLabel(labels, clock, slot, current, partySlot, party), nearest: isNearest, nearestLabel: labelText(labels['time.nearest']), current: current, onPick: () => (partySlot && party ? party.onPick(partySlot) : onPick(slot)), className: cn('h-auto min-h-11 w-full min-w-0 whitespace-normal px-1 tabular-nums', isNearest ? 'border-primary ring-2 ring-primary' : '', classNames?.chip, isNearest ? classNames?.chipNearest : undefined, current ? classNames?.chipCurrent : undefined) }) }, slot.startTs));
+                        return (_jsx("li", { children: _jsx(TimeChip, { startTs: slot.startTs, ...chipText(labels, clock, slot, current, partySlot, party), nearest: isNearest, nearestLabel: labelText(labels['time.nearest']), current: current, onPick: () => (partySlot && party ? party.onPick(partySlot) : onPick(slot)), className: cn('h-auto min-h-11 w-full min-w-0 whitespace-normal px-1 tabular-nums', isNearest ? 'border-primary ring-2 ring-primary' : '', classNames?.chip, isNearest ? classNames?.chipNearest : undefined, current ? classNames?.chipCurrent : undefined) }) }, slot.startTs));
                     }) })), more > 0 && (_jsx(BookingButton, { variant: "link", size: "sm", onClick: () => setUnfolded(key), className: "w-full", children: renderLabel(words.more, { count: more }) })), bookable === 0 &&
                     (alternative && party ? (_jsx(BookingButton, { size: "sm", onClick: () => party.onPick(alternative), className: "h-auto min-h-11 w-full whitespace-normal tabular-nums", children: renderLabel(labels['time.parallel.accept'], {
                             time: clock.formatTime(alternative.startTs),
@@ -435,13 +446,13 @@ function WeekGrid({ labels, words, format, days, offered, currentSlotTs, nearest
     return (_jsxs("div", { "data-testid": "time-week", className: cn('space-y-4', className), children: [_jsx("ol", { className: "grid grid-cols-7 gap-2", children: columns }), !anyBookable && empty, next, todayOpen && (_jsx(ShortNoticeLine, { labels: labels, format: format, phone: phone, className: classNames?.shortNotice }))] }));
 }
 /** A time chip's words: the hour, the held hour marked, or a family's whole visit. */
-function chipLabel(labels, clock, slot, current, partySlot, party) {
+function chipText(labels, clock, slot, current, partySlot, party) {
     const time = clock.formatTime(slot.startTs);
     if (current)
-        return fillLabel(labels['time.current'], { time });
+        return { label: fillLabel(labels['time.current'], { time }) };
     if (partySlot && party)
-        return partyChipLabel(labels, clock, partySlot, party);
-    return time;
+        return partyChipText(labels, clock, partySlot, party);
+    return { label: time };
 }
 /** The weekend note as one plain sentence, for a card that books without the notice on screen. */
 function weekendSentenceText(labels, format, note) {
@@ -594,7 +605,7 @@ function DaypartSections({ labels, clock, dayparts, daySlots, nearest, currentSl
                         const partySlot = partyByStart.get(slot.startTs);
                         const current = slot.startTs === currentSlotTs;
                         const isNearest = !current && nearest.has(slot.startTs);
-                        return (_jsx(TimeChip, { startTs: slot.startTs, label: chipLabel(labels, clock, slot, current, partySlot, party), nearest: isNearest, nearestLabel: labelText(labels['time.nearest']), current: current, onPick: () => (partySlot && party ? party.onPick(partySlot) : onPick(slot)), className: cn('min-w-20 tabular-nums', isNearest ? 'border-primary ring-2 ring-primary' : '', classNames?.chip, isNearest ? classNames?.chipNearest : undefined, current ? classNames?.chipCurrent : undefined) }, slot.startTs));
+                        return (_jsx(TimeChip, { startTs: slot.startTs, ...chipText(labels, clock, slot, current, partySlot, party), compactLabel: undefined, nearest: isNearest, nearestLabel: labelText(labels['time.nearest']), current: current, onPick: () => (partySlot && party ? party.onPick(partySlot) : onPick(slot)), className: cn('min-w-20 tabular-nums', isNearest ? 'border-primary ring-2 ring-primary' : '', classNames?.chip, isNearest ? classNames?.chipNearest : undefined, current ? classNames?.chipCurrent : undefined) }, slot.startTs));
                     }) })] }, daypart.key));
     });
 }

package/dist/booking/who-screen.d.ts

@@ -131,6 +131,13 @@ export interface WhoScreenProps {
         adult: WizardPerson & {
             adult: true;
         };
+        /**
+         * Start with nobody, rather than one child: for a salon where a grown-up
+         * booking for themselves is as common as a child. Children go down to 0
+         * and the grown-up's row is a free choice either way; «next» waits for an
+         * answer. Default `false`.
+         */
+        startEmpty?: boolean;
     };
     /** Shown under the heading for a guest — e.g. an offer to log in. */
     loginRow?: ReactNode;

package/dist/booking/who-screen.js

@@ -142,7 +142,8 @@ export function WhoScreen({ labels, format, people, family, guestChoices, addedC
  * A guest's party: how many children (a stepper) and whether the grown-up
  * comes too (a check row), so «a child and me» is one booking without an
  * account. Starts at one child, which is the common answer, so «next» is live
- * from the first frame.
+ * from the first frame — or, with `startEmpty`, at nobody, so a grown-up
+ * booking for themselves is one tap like anyone else.
  */
 function GuestParty({ party, people, maxPeople, labels, classNames, onChoose, }) {
     const adultOn = people.some((person) => person.key === party.adult.key);
@@ -154,8 +155,10 @@ function GuestParty({ party, people, maxPeople, labels, classNames, onChoose, })
     // stepper adds and removes the unnamed ones after them.
     const generatedKeys = new Set(Array.from({ length: maxPeople }, (_, index) => party.child(index + 1).key));
     const named = childSeats.filter((person) => !generatedKeys.has(person.key));
+    const startEmpty = party.startEmpty === true;
     // The stepper never takes a named child away: their own card does that.
-    const floor = Math.max(named.length, adultOn ? 0 : 1);
+    // Without `startEmpty` it never empties the booking either.
+    const floor = Math.max(named.length, adultOn || startEmpty ? 0 : 1);
     const answer = (count, withAdult) => {
         const kept = named;
         const used = new Set(kept.map((person) => person.key));
@@ -174,9 +177,11 @@ function GuestParty({ party, people, maxPeople, labels, classNames, onChoose, })
     const wasEmpty = useRef(false);
     useEffect(() => {
         const empty = people.length === 0;
-        if (empty && !wasEmpty.current)
+        if (empty && !wasEmpty.current && !startEmpty)
             answer(1, false);
-        wasEmpty.current = empty;
+        // An empty answer `startEmpty` left alone is not one already seen: if the
+        // flag goes, the child is still filled in.
+        wasEmpty.current = empty && !startEmpty;
     });
     const text = (key, values = {}) => {
         const label = labels[key];
@@ -184,8 +189,9 @@ function GuestParty({ party, people, maxPeople, labels, classNames, onChoose, })
     };
     const stepButton = 'flex size-11 shrink-0 items-center justify-center rounded-full border border-border bg-background text-foreground transition-colors hover:border-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary disabled:pointer-events-none disabled:opacity-40';
     return (_jsxs("div", { className: "space-y-3", children: [_jsxs("div", { className: cn('flex items-center gap-4 rounded-lg border border-border bg-card px-5 py-4', classNames?.card), children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("p", { className: "font-semibold", children: text('who.party.children') }), labels['who.party.childrenNote'] && (_jsx("p", { className: "text-sm text-muted-foreground", children: renderLabel(labels['who.party.childrenNote']) }))] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("button", { type: "button", "aria-label": text('who.party.fewer'), disabled: children <= floor, onClick: () => answer(children - 1, adultOn), className: stepButton, children: _jsx(Minus, { "aria-hidden": "true", className: "size-4" }) }), _jsxs("span", { "aria-live": "polite", "aria-atomic": "true", className: "w-6 text-center text-lg font-bold tabular-nums", children: [_jsx("span", { "aria-hidden": "true", children: children }), _jsx("span", { className: "sr-only", children: text('who.party.count', { count: children }) })] }), _jsx("button", { type: "button", "aria-label": text('who.party.more'), "aria-describedby": full ? LIMIT_ID : undefined, disabled: full, onClick: () => answer(children + 1, adultOn), className: stepButton, children: _jsx(Plus, { "aria-hidden": "true", className: "size-4" }) })] })] }), _jsxs(CheckRow, { checked: adultOn, 
-                // Never down to nobody: the last person in the booking stays.
-                disabled: (!adultOn && full) || (adultOn && children === 0), describedBy: !adultOn && full ? LIMIT_ID : undefined, onToggle: () => answer(children, !adultOn), className: cn('min-h-14 justify-between px-5 py-3 text-sm', classNames?.card), selectedClassName: classNames?.cardSelected, children: [_jsxs("span", { className: "flex min-w-0 flex-col text-left", children: [_jsx("span", { className: "font-medium", children: text('who.party.adult') }), labels['who.party.adultNote'] && (_jsx("span", { className: "text-muted-foreground", children: renderLabel(labels['who.party.adultNote']) }))] }), _jsx(CheckCircle, { checked: adultOn })] }), _jsx("p", { id: LIMIT_ID, "aria-live": "polite", className: slotClass(classNames, 'limit', 'min-h-5 text-sm text-muted-foreground'), children: full ? renderLabel(labels['who.family.limit'], { max: maxPeople }) : '' })] }));
+                // Never down to nobody: the last person in the booking stays — unless
+                // the booking may start (and so stand) empty.
+                disabled: (!adultOn && full) || (adultOn && children === 0 && !startEmpty), describedBy: !adultOn && full ? LIMIT_ID : undefined, onToggle: () => answer(children, !adultOn), className: cn('min-h-14 justify-between px-5 py-3 text-sm', classNames?.card), selectedClassName: classNames?.cardSelected, children: [_jsxs("span", { className: "flex min-w-0 flex-col text-left", children: [_jsx("span", { className: "font-medium", children: text('who.party.adult') }), labels['who.party.adultNote'] && children > 0 && (_jsx("span", { className: "text-muted-foreground", children: renderLabel(labels['who.party.adultNote']) }))] }), _jsx(CheckCircle, { checked: adultOn })] }), _jsx("p", { id: LIMIT_ID, "aria-live": "polite", className: slotClass(classNames, 'limit', 'min-h-5 text-sm text-muted-foreground'), children: full ? renderLabel(labels['who.family.limit'], { max: maxPeople }) : '' })] }));
 }
 /**
  * The guest chips as a radio group. Roving focus: one chip is in the tab

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@medalsocial/meda",
-  "version": "3.9.0",
+  "version": "3.10.0",
   "description": "Shared Meda UI shell and runtime package.",
   "license": "Apache-2.0",
   "repository": {