@medalsocial/meda 2.8.1 → 3.2.0

package/dist/booking/details-screen.js

@@ -0,0 +1,314 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useRef, useState } from 'react';
+import { Checkbox } from '../primitives/checkbox.js';
+import { Field } from '../primitives/field.js';
+import { Input } from '../primitives/input.js';
+import { Textarea } from '../primitives/textarea.js';
+import { BOOKING_CHECKBOX_CLASS, BOOKING_INPUT_CLASS, BOOKING_TEXTAREA_CLASS, BookingButton, } from './internal/ui.js';
+import { fillLabel } from './labels.js';
+import { slotClass } from './slots.js';
+/**
+ * The last step of the booking wizard: contact details, who each seat is for,
+ * the consents, and the button that books.
+ *
+ * Presentational, with the same bargain the other steps make: every answer
+ * leaves as an action (`onChange`) and the caller's machine decides what it
+ * means. What stays here is local UI state that is not an answer about the
+ * booking — the keystrokes behind the per-child fields, which field has focus,
+ * whether submit has been pressed, and a fallback submission nonce.
+ */
+// ---------------------------------------------------------------------------
+// Labels
+// ---------------------------------------------------------------------------
+export const DETAILS_SCREEN_LABEL_KEYS = [
+    'details.heading',
+    'details.phone.label',
+    /** The country code shown (not typed) before the number. Empty string hides it. */
+    'details.phone.prefix',
+    'details.phone.error',
+    'details.name.label',
+    /** Accessible name of the list of seats step 1 already named. */
+    'details.known.label',
+    /** `{who}` follows the bold service name: «for {who}». */
+    'details.known.for',
+    'details.known.self',
+    'details.known.adult',
+    'details.known.child',
+    'details.child.name',
+    'details.child.year',
+    'details.child.yearPlaceholder',
+    'details.email.label',
+    'details.email.help',
+    'details.email.error',
+    'details.notes.label',
+    'details.notes.placeholder',
+    'details.terms.text',
+    /** Link text after the terms sentence; only drawn when `termsHref` is set. */
+    'details.terms.link',
+    'details.marketing.text',
+    'details.error.maxParty',
+    'details.error.slotTaken',
+    'details.error.conflict',
+    'details.error.invalidInput',
+    'details.error.unconfigured',
+    'details.error.upstreamError',
+    'details.error.inProgress',
+    /** `{phone}` — visible text and accessible name of the call link. */
+    'details.call.link',
+    /** The rescue sentence when there is no phone number to link. */
+    'details.call.none',
+    /** `{price}` — the total, already formatted. */
+    'details.submit',
+];
+/**
+ * The label key for each failure the wizard can carry. Exported because some
+ * of them (e.g. `maxParty`) are raised on earlier steps, where the shell shows
+ * the same sentence — one map, so one refusal is never explained two ways.
+ */
+export const DETAILS_ERROR_LABEL_KEYS = {
+    maxParty: 'details.error.maxParty',
+    slotTaken: 'details.error.slotTaken',
+    conflict: 'details.error.conflict',
+    invalidInput: 'details.error.invalidInput',
+    unconfigured: 'details.error.unconfigured',
+    upstreamError: 'details.error.upstreamError',
+    inProgress: 'details.error.inProgress',
+};
+/** One saved child offered as a single tap above the child fields. */
+export function DefaultFamilyChip({ member, pressed, onPick }) {
+    return (_jsx(BookingButton, { variant: "outline", size: "sm", "aria-pressed": pressed, className: "rounded-full", onClick: onPick, children: member.name }));
+}
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+/**
+ * Deliberately loose: one `@`, something on each side, a dot in the domain,
+ * no spaces. The field is optional, so the only job is to catch an address
+ * that cannot receive anything. Not RFC 5322 — a stricter pattern rejects real
+ * addresses.
+ */
+/**
+ * A random submission id. `crypto.randomUUID` only exists in secure contexts
+ * (https, localhost); a plain-http origin falls back to `getRandomValues`,
+ * which is available everywhere, shaped as a v4 UUID.
+ */
+function mintNonce() {
+    if (typeof crypto.randomUUID === 'function')
+        return crypto.randomUUID();
+    const bytes = crypto.getRandomValues(new Uint8Array(16));
+    bytes[6] = (bytes[6] & 0x0f) | 0x40;
+    bytes[8] = (bytes[8] & 0x3f) | 0x80;
+    const hex = Array.from(bytes, (byte) => byte.toString(16).padStart(2, '0')).join('');
+    return `${hex.slice(0, 8)}-${hex.slice(8, 12)}-${hex.slice(12, 16)}-${hex.slice(16, 20)}-${hex.slice(20)}`;
+}
+/** Blank is fine (the field is optional). Anything else has to be reachable. */
+export function looksLikeEmail(value) {
+    const trimmed = value.trim();
+    if (trimmed.length === 0)
+        return true;
+    // Hand-rolled rather than a regex: linear on any input, same rule as
+    // /^[^\s@]+@[^\s@]+\.[^\s@]+$/.
+    if (/\s/.test(trimmed))
+        return false;
+    const at = trimmed.indexOf('@');
+    if (at < 1 || at !== trimmed.lastIndexOf('@'))
+        return false;
+    const domain = trimmed.slice(at + 1);
+    for (let index = 1; index < domain.length - 1; index += 1) {
+        if (domain[index] === '.')
+            return true;
+    }
+    return false;
+}
+const NO_CHILD = { name: '', birthYear: '' };
+function seedChildren(items) {
+    return Object.fromEntries(items.map((item, index) => [
+        index,
+        {
+            name: item.bookedForName ?? '',
+            birthYear: item.bookedForBirthYear === undefined ? '' : String(item.bookedForBirthYear),
+        },
+    ]));
+}
+/** Four digits and nothing else — `parseInt` would accept a numeric prefix. */
+const FOUR_DIGITS = /^\d{4}$/;
+const EARLIEST_BIRTH_YEAR = 1900;
+const LATEST_BIRTH_YEAR = 2200;
+/** The year as a number, or `null` for «nothing usable typed». */
+function parseBirthYear(raw) {
+    const trimmed = raw.trim();
+    if (!FOUR_DIGITS.test(trimmed))
+        return null;
+    const year = Number(trimmed);
+    return year >= EARLIEST_BIRTH_YEAR && year <= LATEST_BIRTH_YEAR ? year : null;
+}
+/** Spread into an object literal, so «nothing typed» is an absent key, not `''`. */
+function present(key, value) {
+    const trimmed = value.trim();
+    return trimmed.length > 0 ? { [key]: trimmed } : undefined;
+}
+/** Who a seat step 1 already named is for, in words. */
+function knownWho(state, index, labels) {
+    const item = state.items[index];
+    if (item?.adult) {
+        return state.people[index]?.key === 'self'
+            ? labels['details.known.self']
+            : labels['details.known.adult'];
+    }
+    return item?.bookedForName ?? labels['details.known.child'];
+}
+/**
+ * Whether step 1 already said who sits in this seat: a saved person's card
+ * (`p:` / `n:`), the logged-in guardian (`self`) or a guest adult (`adult`).
+ */
+function isKnownChair(state, index) {
+    const key = state.people[index]?.key ?? '';
+    return key.startsWith('p:') || key.startsWith('n:') || key === 'self' || key === 'adult';
+}
+// ---------------------------------------------------------------------------
+// Screen
+// ---------------------------------------------------------------------------
+export function DetailsScreen({ state, onChange, onSubmit, lines, totalOre, phoneLooksValid, normalisePhone, submitting = false, phone = null, submissionNonce: nonceProp, family, guardianPhone = null, termsHref = null, marketingConsent = false, format, labels, classNames, components, }) {
+    const ids = useId();
+    const field = (name) => `${ids}-${name}`;
+    const phoneRef = useRef(null);
+    const emailRef = useRef(null);
+    const termsRef = useRef(null);
+    // The text on the way to the machine's answers. Seeded from the items so a
+    // visitor who steps back and returns finds the names still in the boxes;
+    // keyed by index because two lines can share a service.
+    const [children, setChildren] = useState(() => seedChildren(state.items));
+    const childAt = (index) => children[index] ?? NO_CHILD;
+    // Minted once per mount (a lazy initialiser), never per press: a
+    // double-tapped submit must carry the same nonce twice.
+    // Only minted when the caller does not pass one (lazily, once per mount).
+    const ownNonce = useRef(null);
+    if (nonceProp === undefined && ownNonce.current === null)
+        ownNonce.current = mintNonce();
+    const submissionNonce = nonceProp ?? ownNonce.current ?? '';
+    // Which field has focus: the phone error is held back while the visitor is
+    // still typing and appears the moment the field is left.
+    const [focused, setFocused] = useState(null);
+    // Submit is never disabled for validation, so pressing it is what explains a refusal.
+    const [attempted, setAttempted] = useState(false);
+    const phoneTyped = state.contact.phone.trim().length > 0;
+    const phoneValid = phoneLooksValid(state.contact.phone);
+    const emailValid = looksLikeEmail(state.contact.email);
+    const showPhoneError = !phoneValid && (attempted || (phoneTyped && focused !== 'phone'));
+    const showEmailError = !emailValid && (attempted || focused !== 'email');
+    const showTermsError = attempted && !state.consentTerms;
+    const price = format.price(totalOre);
+    const phonePrefix = labels['details.phone.prefix'];
+    const FamilyChip = components?.FamilyChip ?? DefaultFamilyChip;
+    function setContact(name, value) {
+        onChange({ type: 'setContact', field: name, value });
+    }
+    /** Written to the buffer (what the field shows) and to the machine (the answer). */
+    function setChild(index, patch, personId) {
+        setChildren((previous) => ({
+            ...previous,
+            [index]: { ...(previous[index] ?? NO_CHILD), ...patch },
+        }));
+        if (patch.name !== undefined) {
+            onChange({ type: 'setItemField', index, field: 'bookedForName', value: patch.name });
+            // A family chip names a saved person; a name typed by hand may be someone
+            // the business does not know.
+            onChange({
+                type: 'setItemField',
+                index,
+                field: 'bookedForPersonId',
+                value: personId ?? null,
+            });
+        }
+        if (patch.birthYear !== undefined) {
+            onChange({
+                type: 'setItemField',
+                index,
+                field: 'bookedForBirthYear',
+                value: parseBirthYear(patch.birthYear),
+            });
+        }
+    }
+    function submissionItems(startTs) {
+        // A saved person's id is only valid under the number of the guardian who owns them.
+        const ownPhone = guardianPhone !== null &&
+            normalisePhone(guardianPhone) === normalisePhone(state.contact.phone);
+        return state.items.map((item, index) => {
+            const child = childAt(index);
+            const birthYear = parseBirthYear(child.birthYear);
+            const line = lines[index];
+            const resourceId = line?.resourceId ?? null;
+            return {
+                serviceId: item.service.id,
+                ...(resourceId === null ? {} : { resourceId }),
+                startTs: line?.startTs ?? startTs,
+                ...present('bookedForName', isKnownChair(state, index) ? (item.bookedForName ?? '') : child.name),
+                ...(birthYear === null ? {} : { bookedForBirthYear: birthYear }),
+                ...(ownPhone && item.bookedForPersonId
+                    ? { bookedForPersonId: item.bookedForPersonId }
+                    : {}),
+            };
+        });
+    }
+    function handleSubmit() {
+        setAttempted(true);
+        // Unreachable through the wizard, but submitting without a slot would book 1970.
+        if (state.startTs === null)
+            return;
+        // Focus rather than scroll: it moves the viewport, puts the caret where the
+        // fix is needed, and works for whoever is not looking at the screen.
+        if (!phoneValid) {
+            phoneRef.current?.focus();
+            return;
+        }
+        if (!emailValid) {
+            emailRef.current?.focus();
+            return;
+        }
+        if (!state.consentTerms) {
+            termsRef.current?.focus();
+            return;
+        }
+        onSubmit({
+            items: submissionItems(state.startTs),
+            contact: {
+                phone: normalisePhone(state.contact.phone),
+                ...present('name', state.contact.name),
+                ...present('email', state.contact.email),
+            },
+            ...present('notes', state.notes),
+            consentTerms: state.consentTerms,
+            consentMarketing: state.consentMarketing,
+            submissionNonce,
+        });
+    }
+    const inputClass = (...extra) => slotClass(classNames, 'input', BOOKING_INPUT_CLASS, ...extra);
+    const fieldClass = slotClass(classNames, 'field');
+    return (_jsxs("section", { "aria-labelledby": "booking-details-heading", className: slotClass(classNames, 'root', 'space-y-6'), children: [_jsx("h2", { id: "booking-details-heading", tabIndex: -1, className: slotClass(classNames, 'heading', 'font-sans text-2xl font-bold outline-none md:text-3xl'), children: labels['details.heading'] }), _jsxs(Field, { className: fieldClass, children: [_jsx(Field.Label, { htmlFor: field('phone'), children: labels['details.phone.label'] }), _jsxs("div", { className: "flex items-stretch", children: [phonePrefix && (_jsx("span", { id: field('phone-prefix'), className: "flex h-12 items-center rounded-l-[4px] border border-r-0 border-input bg-muted px-4 text-base text-muted-foreground", children: phonePrefix })), _jsx(Input, { id: field('phone'), ref: phoneRef, type: "tel", inputMode: "numeric", autoComplete: "tel-national", className: inputClass(phonePrefix ? 'rounded-l-none' : ''), value: state.contact.phone, "aria-describedby": phonePrefix ? field('phone-prefix') : undefined, "aria-invalid": showPhoneError || undefined, onFocus: () => setFocused('phone'), onBlur: () => setFocused(null), onChange: (event) => setContact('phone', event.target.value) })] }), showPhoneError && _jsx(Field.Error, { children: labels['details.phone.error'] })] }), _jsxs(Field, { className: fieldClass, children: [_jsx(Field.Label, { htmlFor: field('name'), children: labels['details.name.label'] }), _jsx(Input, { id: field('name'), autoComplete: "name", className: inputClass(), value: state.contact.name, onChange: (event) => setContact('name', event.target.value) })] }), state.items.some((_, index) => isKnownChair(state, index)) && (_jsx("ul", { "aria-label": labels['details.known.label'], className: "space-y-1 text-sm", children: state.items.map((item, index) => isKnownChair(state, index) ? (_jsxs("li", { children: [_jsx("span", { className: "font-semibold", children: item.service.name }), ' ', fillLabel(labels['details.known.for'], { who: knownWho(state, index, labels) })] }, index)) : null) })), state.items.map((item, index) => 
+            // A seat step 1 already named is not asked again: a second answer could disagree.
+            isKnownChair(state, index) ? null : (_jsx(ChildFields
+            // biome-ignore lint/suspicious/noArrayIndexKey: two lines can share a service; the index is the identity
+            , { legend: state.items.length > 1 ? item.service.name : null, nameId: field(`child-name-${index}`), yearId: field(`child-year-${index}`), value: childAt(index), family: family, labels: labels, classNames: classNames, FamilyChip: FamilyChip, onChange: (patch, personId) => setChild(index, patch, personId) }, index))), _jsxs(Field, { className: fieldClass, children: [_jsx(Field.Label, { htmlFor: field('email'), children: labels['details.email.label'] }), _jsx(Input, { id: field('email'), ref: emailRef, type: "email", autoComplete: "email", className: inputClass(), value: state.contact.email, "aria-describedby": field('email-help'), "aria-invalid": showEmailError || undefined, onFocus: () => setFocused('email'), onBlur: () => setFocused(null), onChange: (event) => setContact('email', event.target.value) }), _jsx(Field.Description, { id: field('email-help'), children: labels['details.email.help'] }), showEmailError && _jsx(Field.Error, { children: labels['details.email.error'] })] }), _jsxs(Field, { className: fieldClass, children: [_jsx(Field.Label, { htmlFor: field('notes'), children: labels['details.notes.label'] }), _jsx(Textarea, { id: field('notes'), rows: 3, className: slotClass(classNames, 'input', BOOKING_TEXTAREA_CLASS), placeholder: labels['details.notes.placeholder'], value: state.notes, onChange: (event) => onChange({ type: 'setNotes', value: event.target.value }) })] }), _jsxs(Field, { orientation: "horizontal", className: slotClass(classNames, 'consent'), children: [_jsx(Checkbox, { id: field('terms'), ref: termsRef, className: BOOKING_CHECKBOX_CLASS, checked: state.consentTerms, "aria-invalid": showTermsError || undefined, onCheckedChange: (accepted) => onChange({ type: 'setConsent', which: 'terms', accepted }) }), _jsx(Field.Label, { htmlFor: field('terms'), className: "cursor-pointer font-normal", children: labels['details.terms.text'] }), termsHref && (_jsx("a", { href: termsHref, className: "col-start-2 text-sm font-semibold text-primary underline underline-offset-4", children: labels['details.terms.link'] }))] }), marketingConsent && (_jsxs(Field, { orientation: "horizontal", className: slotClass(classNames, 'consent'), children: [_jsx(Checkbox, { id: field('marketing'), className: BOOKING_CHECKBOX_CLASS, checked: state.consentMarketing, onCheckedChange: (accepted) => onChange({ type: 'setConsent', which: 'marketing', accepted }) }), _jsx(Field.Label, { htmlFor: field('marketing'), className: "cursor-pointer font-normal", children: labels['details.marketing.text'] })] })), state.error && (_jsx(SubmitFailure, { error: state.error, phone: phone, format: format, labels: labels, className: slotClass(classNames, 'error', 'rounded-lg border border-destructive/40 bg-destructive/10 px-5 py-3 text-sm') })), _jsx(BookingButton, { size: "lg", className: slotClass(classNames, 'submit', 'w-full'), disabled: submitting, "aria-busy": submitting || undefined, onClick: handleSubmit, children: fillLabel(labels['details.submit'], { price }) })] }));
+}
+/**
+ * The name and birth year for one line. Wrapped in a fieldset only when there
+ * is more than one line: two identically labelled fields with nothing between
+ * them is how one child's name lands on the other's booking.
+ */
+function ChildFields({ legend, nameId, yearId, value, family, labels, classNames, FamilyChip, onChange, }) {
+    const fields = (_jsxs("div", { className: "grid grid-cols-[1fr_7rem] gap-3", children: [_jsxs(Field, { className: slotClass(classNames, 'field'), children: [_jsx(Field.Label, { htmlFor: nameId, children: labels['details.child.name'] }), _jsx(Input, { id: nameId, className: slotClass(classNames, 'input', BOOKING_INPUT_CLASS), value: value.name, onChange: (event) => onChange({ name: event.target.value }) })] }), _jsxs(Field, { className: slotClass(classNames, 'field'), children: [_jsx(Field.Label, { htmlFor: yearId, children: labels['details.child.year'] }), _jsx(Input, { id: yearId, inputMode: "numeric", maxLength: 4, className: slotClass(classNames, 'input', BOOKING_INPUT_CLASS), placeholder: labels['details.child.yearPlaceholder'], value: value.birthYear, onChange: (event) => onChange({ birthYear: event.target.value }) })] })] }));
+    const withSuggestions = (_jsxs("div", { className: "space-y-3", children: [family !== undefined && family.length > 0 && (_jsx("div", { className: "flex flex-wrap gap-2", children: family.map((member) => (_jsx(FamilyChip, { member: member, pressed: value.name === member.name && value.birthYear === String(member.birthYear), onPick: () => onChange({ name: member.name, birthYear: String(member.birthYear) }, member.personId) }, `${member.name}-${member.birthYear}`))) })), fields] }));
+    if (legend === null)
+        return withSuggestions;
+    return (_jsxs("fieldset", { className: slotClass(classNames, 'childGroup', 'space-y-2 rounded-lg border border-border px-5 py-4'), children: [_jsx("legend", { className: "px-1 font-sans text-sm font-bold text-muted-foreground", children: legend }), withSuggestions] }));
+}
+/**
+ * A failed submit must not be silent: announced (nothing else on the screen
+ * moved), and it offers the phone, because what reaches here is what the
+ * visitor cannot fix by trying harder.
+ */
+function SubmitFailure({ error, phone, format, labels, className, }) {
+    const call = phone ? fillLabel(labels['details.call.link'], { phone }) : null;
+    return (_jsxs("p", { role: "alert", className: className, children: [labels[DETAILS_ERROR_LABEL_KEYS[error]], ' ', phone && call ? (_jsx("a", { href: format.telHref(phone), "aria-label": call, className: "font-semibold text-primary underline underline-offset-4", children: call })) : (labels['details.call.none'])] }));
+}

package/dist/booking/format.d.ts

@@ -0,0 +1,64 @@
+import type { AgeRange } from './types.js';
+/**
+ * The business's calendar, injected.
+ *
+ * Every date a booking screen draws is a date *where the business is*, not
+ * where the visitor's browser is — so the screens never call `Date` getters or
+ * `Intl` themselves. The booking package builds one of these per config
+ * (`createClock({ timeZone, locale, dayparts })`) and passes it in; a test or a
+ * story can hand in any implementation with the same shape.
+ */
+export interface BookingClock {
+    /** `YYYY-MM-DD` of the business-local date `ts` falls on. */
+    dayKey(ts: number): string;
+    /** An instant at the start of the business-local day `offsetDays` after `ts`'s. DST-safe. */
+    dayStart(ts: number, offsetDays?: number): number;
+    /** «14:30». */
+    formatTime(ts: number): string;
+    /** Business-local hour 0–23. */
+    hour(ts: number): number;
+    isWeekend(ts: number): boolean;
+    /** Whole business-local calendar days from `from` to `to` (can be negative). */
+    daysBetween(from: number, to: number): number;
+    /** Key of the daypart `ts` falls in (e.g. `morning`). */
+    daypartOf(ts: number): string;
+    /** «today» / «tomorrow» / «Thursday 3 September». */
+    dayLabel(ts: number, now?: number): string;
+    /** The short chip form: «Today», «Thu 3». */
+    dayChip(ts: number, now?: number): string;
+    /** «today 14:30» / «Thu 3 Sep 14:30». */
+    when(ts: number, now?: number): string;
+    /** The short date with weekday: «tor. 3. sep.» / «Thu 3 Sept». */
+    date(ts: number): string;
+    /** `date` plus the time: «tor. 3. sep. kl. 14:30». */
+    dateTime(ts: number): string;
+    /** «Thursday». */
+    weekday(ts: number): string;
+    /** Month name, 1–12, lower-case where the locale writes it so («september»). */
+    monthName(month: number): string;
+    /** Seven short weekday heads, Monday first («Mo» … «Su»). */
+    weekdayHeads(): readonly string[];
+}
+/**
+ * Everything locale- or business-dependent a screen formats, in one object.
+ * Screens take it as their `format` prop. Nothing here is copy: the words come
+ * through `labels`.
+ */
+export interface BookingFormat {
+    clock: BookingClock;
+    /** Minor units → display, e.g. `186000` → «1 860 kr». */
+    price(minor: number): string;
+    /** A `tel:` href for a phone number as written. */
+    telHref(phone: string): string;
+    /** A stylist's name as customers should see it (trimmed of internal suffixes). */
+    stylistName(name: string): string;
+    /** One or two initials for an avatar fallback. */
+    initials(name: string): string;
+    /** «7 år» / «6–7 years». */
+    ageLabel(range: AgeRange): string;
+}
+/** A named part of the day for the time step, in display order (`clock.daypartOf` returns the key). */
+export interface BookingDaypart {
+    key: string;
+    label: string;
+}

package/dist/booking/format.js

@@ -0,0 +1 @@
+export {};

package/dist/booking/index.d.ts

@@ -0,0 +1,35 @@
+export * from './add-child-sheet.js';
+export * from './booking-skeleton.js';
+export * from './confirmation.js';
+export * from './details-screen.js';
+export type { BookingClock, BookingDaypart, BookingFormat } from './format.js';
+export * from './internal/ui.js';
+export * from './label-keys.js';
+export { fillLabel } from './labels.js';
+export * from './live-status.js';
+export * from './login-panel.js';
+export * from './login-sheet.js';
+export * from './manage-screen.js';
+export * from './otp-slots.js';
+export * from './portal/account-card.js';
+export * from './portal/action-result.js';
+export * from './portal/age-confirm-card.js';
+export * from './portal/child-cards.js';
+export * from './portal/data-controls.js';
+export * from './portal/family-editor.js';
+export * from './portal/logout-button.js';
+export * from './portal/portal-shell.js';
+export * from './portal/portal-unreachable.js';
+export * from './portal/profile-form.js';
+export * from './portal/rebook-cards.js';
+export * from './portal/upcoming-bookings.js';
+export * from './portal/vipps-link-row.js';
+export * from './portal/visit-history.js';
+export * from './service-screen.js';
+export type { ScreenComponents, SlotClassNames } from './slots.js';
+export * from './stylist-screen.js';
+export * from './summary-bar.js';
+export * from './time-screen.js';
+export type * from './types.js';
+export * from './vipps-button.js';
+export * from './who-screen.js';

package/dist/booking/index.js

@@ -0,0 +1,40 @@
+// @medalsocial/meda/booking — unbranded, presentational booking screens.
+//
+// Props in, callbacks out: nothing here fetches, routes, or touches storage.
+// Copy arrives through `labels`, dates/prices through `format`, look through
+// the shadcn variables the theme bridge maps. Override ladder, cheapest first:
+// CSS variables → labels → classNames (per slot) → components (card renderers).
+// Styles: import `@medalsocial/meda/booking/styles.css` and
+// `@medalsocial/meda/primitives/styles.css` after the bridge.
+export * from './add-child-sheet.js';
+export * from './booking-skeleton.js';
+export * from './confirmation.js';
+export * from './details-screen.js';
+export * from './internal/ui.js';
+export * from './label-keys.js';
+export { fillLabel } from './labels.js';
+export * from './live-status.js';
+export * from './login-panel.js';
+export * from './login-sheet.js';
+export * from './manage-screen.js';
+export * from './otp-slots.js';
+export * from './portal/account-card.js';
+export * from './portal/action-result.js';
+export * from './portal/age-confirm-card.js';
+export * from './portal/child-cards.js';
+export * from './portal/data-controls.js';
+export * from './portal/family-editor.js';
+export * from './portal/logout-button.js';
+export * from './portal/portal-shell.js';
+export * from './portal/portal-unreachable.js';
+export * from './portal/profile-form.js';
+export * from './portal/rebook-cards.js';
+export * from './portal/upcoming-bookings.js';
+export * from './portal/vipps-link-row.js';
+export * from './portal/visit-history.js';
+export * from './service-screen.js';
+export * from './stylist-screen.js';
+export * from './summary-bar.js';
+export * from './time-screen.js';
+export * from './vipps-button.js';
+export * from './who-screen.js';

package/dist/booking/internal/label-parts.d.ts

@@ -0,0 +1,8 @@
+import { type ReactNode } from 'react';
+/**
+ * `fillLabel` for templates whose placeholders are elements (a link, a
+ * button) rather than strings: `'Have an account? {trigger} – …'` with
+ * `{ trigger: <button>…</button> }`. Text parts stay text; unknown
+ * placeholders are left as written.
+ */
+export declare function labelParts(template: string, parts: Readonly<Record<string, ReactNode>>): ReactNode;

package/dist/booking/internal/label-parts.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment } from 'react';
+/**
+ * `fillLabel` for templates whose placeholders are elements (a link, a
+ * button) rather than strings: `'Have an account? {trigger} – …'` with
+ * `{ trigger: <button>…</button> }`. Text parts stay text; unknown
+ * placeholders are left as written.
+ */
+export function labelParts(template, parts) {
+    const pieces = template.split(/(\{\w+\})/g);
+    return pieces.map((piece, index) => {
+        const match = /^\{(\w+)\}$/.exec(piece);
+        if (match && Object.hasOwn(parts, match[1])) {
+            // biome-ignore lint/suspicious/noArrayIndexKey: the pieces of a fixed template never reorder
+            return _jsx(Fragment, { children: parts[match[1]] }, index);
+        }
+        return piece;
+    });
+}

package/dist/booking/internal/ui.d.ts

@@ -0,0 +1,33 @@
+import type { ComponentProps } from 'react';
+/**
+ * The booking screens' control look, in one place.
+ *
+ * Booking has its own proportions — 48 px fields, 1.5 px borders, near-square
+ * corners, a tall primary button — tuned for a parent booking on a phone. The
+ * screens build on meda's primitives (`Input`, `Textarea`, `Checkbox`,
+ * `Field`, `Sheet`) and pass these classes as overrides; tailwind-merge makes
+ * them win over the primitive defaults they conflict with. Colours are bridge
+ * variables only, so a site's own `--primary` / `--border` / … re-theme them.
+ */
+export type BookingButtonVariant = 'default' | 'outline' | 'secondary' | 'ghost' | 'destructive' | 'link';
+export type BookingButtonSize = 'default' | 'sm' | 'lg' | 'icon' | 'icon-sm';
+/** Classes for a booking button — also for a link that should look like one. */
+export declare function bookingButtonClass({ variant, size, className, }?: {
+    variant?: BookingButtonVariant;
+    size?: BookingButtonSize;
+    className?: string;
+}): string;
+export interface BookingButtonProps extends ComponentProps<'button'> {
+    variant?: BookingButtonVariant;
+    size?: BookingButtonSize;
+}
+/** The booking screens' button. A native `<button type="button">` unless told otherwise. */
+export declare function BookingButton({ variant, size, className, type, ...props }: BookingButtonProps): import("react").JSX.Element;
+/** Override for meda `Input` in booking forms. */
+export declare const BOOKING_INPUT_CLASS = "h-12 rounded-[4px] border-[1.5px] border-input bg-background px-4 py-3 text-base transition-[color,border-color] focus-visible:border-primary focus-visible:ring-0 aria-invalid:border-destructive sm:text-base md:text-base dark:aria-invalid:border-destructive/50";
+/** Override for meda `Textarea` in booking forms. */
+export declare const BOOKING_TEXTAREA_CLASS = "min-h-16 rounded-[4px] border-[1.5px] border-input bg-background px-4 py-3 text-base transition-[color,border-color] focus-visible:border-primary focus-visible:ring-0 aria-invalid:border-destructive sm:text-base md:text-base dark:aria-invalid:border-destructive/50";
+/** Override for meda `Checkbox` in booking forms. */
+export declare const BOOKING_CHECKBOX_CLASS = "shadow-xs transition-shadow focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:ring-[3px] aria-invalid:ring-destructive/20 dark:bg-input/30";
+/** A native `<select>` sized like a booking input. */
+export declare const BOOKING_SELECT_CLASS = "h-12 w-full rounded-[4px] border border-input bg-transparent px-3 text-base outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50";

package/dist/booking/internal/ui.js

@@ -0,0 +1,35 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from '../../lib/utils.js';
+const BUTTON_BASE = 'group/button inline-flex shrink-0 select-none items-center justify-center whitespace-nowrap rounded-[3px] border border-transparent bg-clip-padding text-sm font-semibold transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-[3px] aria-invalid:ring-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*="size-"])]:size-4';
+const BUTTON_VARIANTS = {
+    default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+    outline: 'border-[1.5px] border-primary/35 bg-transparent text-primary hover:border-primary hover:bg-primary/5 aria-expanded:bg-primary/5 aria-expanded:text-primary',
+    secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground',
+    ghost: 'hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50',
+    destructive: 'bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30',
+    link: 'text-primary underline-offset-4 hover:underline',
+};
+const BUTTON_SIZES = {
+    default: 'h-10 gap-1.5 px-5 text-[15px]',
+    sm: 'h-8 gap-1 rounded-[min(var(--radius-md),10px)] px-2.5',
+    lg: 'h-auto gap-1.5 px-7 py-[15px] text-[15px]',
+    icon: 'size-9',
+    'icon-sm': 'size-8 rounded-[min(var(--radius-md),10px)]',
+};
+/** Classes for a booking button — also for a link that should look like one. */
+export function bookingButtonClass({ variant = 'default', size = 'default', className, } = {}) {
+    return cn(BUTTON_BASE, BUTTON_VARIANTS[variant], BUTTON_SIZES[size], className);
+}
+/** The booking screens' button. A native `<button type="button">` unless told otherwise. */
+export function BookingButton({ variant, size, className, type = 'button', ...props }) {
+    return (_jsx("button", { type: type, "data-slot": "button", className: bookingButtonClass({ variant, size, className }), ...props }));
+}
+/** Override for meda `Input` in booking forms. */
+export const BOOKING_INPUT_CLASS = 'h-12 rounded-[4px] border-[1.5px] border-input bg-background px-4 py-3 text-base transition-[color,border-color] focus-visible:border-primary focus-visible:ring-0 aria-invalid:border-destructive sm:text-base md:text-base dark:aria-invalid:border-destructive/50';
+/** Override for meda `Textarea` in booking forms. */
+export const BOOKING_TEXTAREA_CLASS = 'min-h-16 rounded-[4px] border-[1.5px] border-input bg-background px-4 py-3 text-base transition-[color,border-color] focus-visible:border-primary focus-visible:ring-0 aria-invalid:border-destructive sm:text-base md:text-base dark:aria-invalid:border-destructive/50';
+/** Override for meda `Checkbox` in booking forms. */
+export const BOOKING_CHECKBOX_CLASS = 'shadow-xs transition-shadow focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:ring-[3px] aria-invalid:ring-destructive/20 dark:bg-input/30';
+/** A native `<select>` sized like a booking input. */
+export const BOOKING_SELECT_CLASS = 'h-12 w-full rounded-[4px] border border-input bg-transparent px-3 text-base outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50';

package/dist/booking/label-keys.d.ts

@@ -0,0 +1,34 @@
+import { ADD_CHILD_SHEET_LABEL_KEYS } from './add-child-sheet.js';
+import { BOOKING_SKELETON_LABEL_KEYS } from './booking-skeleton.js';
+import { CONFIRMATION_LABEL_KEYS } from './confirmation.js';
+import { DETAILS_SCREEN_LABEL_KEYS } from './details-screen.js';
+import { LOGIN_SHEET_LABEL_KEYS } from './login-sheet.js';
+import { MANAGE_SCREEN_LABEL_KEYS } from './manage-screen.js';
+import { CHILD_CARDS_LABEL_KEYS } from './portal/child-cards.js';
+import { DATA_CONTROLS_LABEL_KEYS } from './portal/data-controls.js';
+import { FAMILY_EDITOR_LABEL_KEYS } from './portal/family-editor.js';
+import { LOGOUT_BUTTON_LABEL_KEYS } from './portal/logout-button.js';
+import { PORTAL_SHELL_LABEL_KEYS } from './portal/portal-shell.js';
+import { PORTAL_UNREACHABLE_LABEL_KEYS } from './portal/portal-unreachable.js';
+import { PROFILE_FORM_LABEL_KEYS } from './portal/profile-form.js';
+import { REBOOK_CARDS_LABEL_KEYS } from './portal/rebook-cards.js';
+import { UPCOMING_BOOKINGS_LABEL_KEYS } from './portal/upcoming-bookings.js';
+import { VIPPS_LINK_ROW_LABEL_KEYS } from './portal/vipps-link-row.js';
+import { VISIT_HISTORY_LABEL_KEYS } from './portal/visit-history.js';
+import { SERVICE_SCREEN_LABEL_KEYS } from './service-screen.js';
+import { STYLIST_SCREEN_LABEL_KEYS } from './stylist-screen.js';
+import { SUMMARY_BAR_LABEL_KEYS } from './summary-bar.js';
+import { TIME_SCREEN_LABEL_KEYS } from './time-screen.js';
+import { WHO_SCREEN_LABEL_KEYS } from './who-screen.js';
+/**
+ * Every label key any booking screen reads, once. A complete pack for a
+ * locale is a `BookingLabels`; each screen's `labels` prop is a subset of it,
+ * so the same merged pack can be handed to every screen.
+ *
+ * (Screens that embed another screen already include its keys, e.g. the
+ * login sheet carries the login panel's, OTP slots' and Vipps button's.)
+ */
+export declare const BOOKING_LABEL_KEYS: readonly ("addChild.trigger" | "addChild.title" | "addChild.description.saved" | "addChild.description.local" | "addChild.name" | "addChild.birthYear" | "addChild.birthYearPlaceholder" | "addChild.birthMonth" | "addChild.birthMonthUnknown" | "addChild.notes" | "addChild.missing" | "addChild.submit" | "addChild.close" | "bookingSkeleton.opening" | "confirmation.heading" | "confirmation.serviceFor" | "confirmation.when" | "confirmation.party.heading" | "confirmation.party.line" | "confirmation.party.stylist" | "confirmation.party.total" | "confirmation.calendar" | "confirmation.manage" | "confirmation.manageFor" | "confirmation.portal" | "confirmation.startOver" | "details.heading" | "details.phone.label" | "details.phone.prefix" | "details.phone.error" | "details.name.label" | "details.known.label" | "details.known.for" | "details.known.self" | "details.known.adult" | "details.known.child" | "details.child.name" | "details.child.year" | "details.child.yearPlaceholder" | "details.email.label" | "details.email.help" | "details.email.error" | "details.notes.label" | "details.notes.placeholder" | "details.terms.text" | "details.terms.link" | "details.marketing.text" | "details.error.maxParty" | "details.error.slotTaken" | "details.error.conflict" | "details.error.invalidInput" | "details.error.unconfigured" | "details.error.upstreamError" | "details.error.inProgress" | "details.call.link" | "details.call.none" | "details.submit" | "otp.label" | "vipps.button" | "vipps.unavailable" | "vipps.throttled" | "login.heading" | "login.codeHeading" | "login.or" | "login.emailIntro" | "login.emailLabel" | "login.sendCode" | "login.codeLabel" | "login.submitCode" | "login.codeHelp" | "login.codeHelpVipps" | "login.vippsSentTo" | "login.vippsSentToUnknown" | "login.cooldownWait" | "login.cooldownReady" | "login.resendIn" | "login.resend" | "login.switchEmail" | "login.useEmailInstead" | "login.notice.sent" | "login.notice.resent" | "login.notice.unreachable" | "login.notice.badEmail" | "login.notice.invalid" | "login.notice.throttled" | "login.notice.vippsInvalid" | "login.notice.vippsConflict" | "loginSheet.prompt" | "loginSheet.trigger" | "loginSheet.intro" | "loginSheet.vipps" | "loginSheet.close" | "time.heading" | "time.dayStrip.legend" | "time.nearest" | "time.current" | "time.nextFree" | "time.shortNotice" | "time.weekend.pct" | "time.weekend.mixed" | "time.month.show" | "time.month.hide" | "time.month.previous" | "time.month.next" | "time.month.heading" | "time.month.note" | "time.party.sequential" | "time.party.parallel" | "time.party.seat" | "time.party.seatSeparator" | "time.parallel.offer.two" | "time.parallel.offer.other" | "time.parallel.accept" | "time.empty.closed" | "time.empty.over" | "time.empty.full" | "time.empty.stylist" | "time.empty.unknown" | "time.empty.callLink" | "time.empty.callLinkAria" | "time.empty.callSuffix" | "time.empty.callPlain" | "time.loading" | "time.skeleton.dayPlaceholder" | "time.taken.message" | "time.taken.close" | "manage.heading" | "manage.serviceFallback" | "manage.card.named" | "manage.card.when" | "manage.card.whenWithStylist" | "manage.appointment.named" | "manage.appointment.namedSibilant" | "manage.appointment.unnamed" | "manage.ringUs" | "manage.ringUsOn" | "manage.callUs" | "manage.callUsOn" | "manage.error.windowPassed" | "manage.error.slotTaken" | "manage.error.notFound" | "manage.error.conflict" | "manage.error.invalidInput" | "manage.error.unavailable" | "manage.freeUntil" | "manage.remaining.in" | "manage.remaining.daysAndHours" | "manage.remaining.underMinute" | "manage.remaining.day.one" | "manage.remaining.day.other" | "manage.remaining.hour.one" | "manage.remaining.hour.other" | "manage.remaining.minute.one" | "manage.remaining.minute.other" | "manage.change" | "manage.cancel" | "manage.callToChange" | "manage.callToCancel" | "manage.blocked" | "manage.blocked.suffix" | "manage.blocked.plain" | "manage.calendar" | "manage.closed.cancelled" | "manage.closed.completed" | "manage.closed.noShow" | "manage.closed.pending" | "manage.closed.pendingCall" | "manage.closed.pendingCallPlain" | "manage.bookNew" | "manage.party.heading" | "manage.party.justThisOne" | "manage.party.unnamed" | "manage.party.note" | "manage.party.noteSuffix" | "manage.back" | "manage.reschedule.lead" | "manage.reschedule.leadWithStylist" | "manage.reschedule.failed" | "manage.reschedule.failedSuffix" | "manage.reschedule.loading" | "manage.move.question" | "manage.move.questionWithStylist" | "manage.move.surcharge" | "manage.move.confirm" | "manage.move.pickAnother" | "manage.cancel.question" | "manage.cancel.reasonLegend" | "manage.cancel.reason.illness" | "manage.cancel.reason.noLongerSuits" | "manage.cancel.reason.other" | "manage.cancel.confirm" | "manage.cancel.keep" | "manage.cancelled" | "manage.cancelled.findNew" | "manage.moved" | "manage.movedTo" | "manage.moved.view" | "manage.moved.noLink" | "manage.moved.noLinkSuffix" | "manage.portal" | "childCards.empty" | "childCards.neverVisited" | "childCards.lastVisit" | "childCards.lastVisitNoService" | "childCards.book" | "childCards.stylist" | "childCards.next" | "childCards.none" | "dataControls.heading" | "dataControls.export" | "dataControls.delete" | "dataControls.confirmHeading" | "dataControls.consequences" | "dataControls.confirmLabel" | "dataControls.confirmHelp" | "dataControls.wrongWord" | "dataControls.deleteForever" | "dataControls.cancel" | "dataControls.unreachable" | "dataControls.confirmWord" | "ageConfirm.heading" | "ageConfirm.lead" | "ageConfirm.legend" | "ageConfirm.birthYear" | "ageConfirm.birthMonth" | "ageConfirm.birthMonthUnknown" | "ageConfirm.confirm" | "ageConfirm.dismiss" | "familyEditor.heading" | "familyEditor.lead" | "familyEditor.empty" | "familyEditor.legend" | "familyEditor.add" | "familyEditor.name" | "familyEditor.birthYear" | "familyEditor.birthYearPlaceholder" | "familyEditor.birthMonth" | "familyEditor.birthMonthUnknown" | "familyEditor.stylist" | "familyEditor.stylistNone" | "familyEditor.stylistFormer" | "familyEditor.notes" | "familyEditor.notesPlaceholder" | "familyEditor.newRow" | "familyEditor.save" | "familyEditor.remove" | "familyEditor.removeNamed" | "familyEditor.removeRow" | "familyEditor.saved" | "familyEditor.savedNoDetails" | "familyEditor.partial" | "familyEditor.removed" | "familyEditor.unreachable" | "familyEditor.ageConfirmed" | "familyEditor.ageSaved" | "logout.button" | "logout.unreachable" | "portalShell.nav" | "portalShell.navBar" | "portalUnreachable.heading" | "portalUnreachable.body" | "portalUnreachable.retry" | "portalUnreachable.call" | "profileForm.heading" | "profileForm.firstName" | "profileForm.lastName" | "profileForm.phone" | "profileForm.email" | "profileForm.emailHelp" | "profileForm.save" | "profileForm.saved" | "profileForm.restored" | "profileForm.marketing" | "profileForm.unreachable" | "rebook.heading" | "rebook.empty" | "rebook.serviceFallback" | "rebook.anyStylist" | "rebook.cta" | "upcoming.heading" | "upcoming.empty" | "upcoming.book" | "upcoming.next" | "upcoming.today" | "upcoming.tomorrow" | "upcoming.inDays" | "upcoming.when" | "upcoming.serviceFallback" | "upcoming.anyStylist" | "upcoming.manage" | "upcoming.noManage" | "upcoming.noManageWithPhone" | "upcoming.call" | "vippsLink.heading" | "vippsLink.linked" | "vippsLink.pitch" | "vippsLink.button" | "vippsLink.success" | "vippsLink.conflict" | "vippsLink.failed" | "vippsLink.unavailable" | "vippsLink.throttled" | "history.heading" | "history.empty" | "history.serviceFallback" | "history.count.one" | "history.count.other" | "history.unknownAmount" | "service.heading" | "service.categoriesLegend" | "service.sameAsLast" | "service.chooseOther" | "service.duration" | "service.phoneOnly" | "service.phoneOnlyLinkLabel" | "service.ageDivider.named" | "service.ageDivider.unnamed" | "service.party.listLabel" | "service.party.adultAlone" | "service.party.nothingFits" | "service.party.remove" | "stylist.heading" | "stylist.firstAvailable" | "stylist.firstAvailableSubtitle" | "stylist.firstAvailableBadge" | "stylist.pendingName" | "stylist.nextAvailable" | "stylist.loading" | "stylist.party.legend" | "stylist.party.sequential" | "stylist.party.sequentialMinutes" | "stylist.party.parallel.two" | "stylist.party.parallel.three" | "stylist.party.parallel.other" | "stylist.party.parallelMinutes" | "stylist.party.parallelNote.two" | "stylist.party.parallelNote.three" | "stylist.party.parallelNote.other" | "summary.placeholder.who" | "summary.placeholder.service" | "summary.next" | "who.heading" | "who.guest.groupLabel" | "who.guest.children.one" | "who.guest.children.other" | "who.guest.adult" | "who.guest.addedList" | "who.family.legend" | "who.family.self" | "who.family.limit")[];
+export type BookingLabelKey = (typeof WHO_SCREEN_LABEL_KEYS)[number] | (typeof ADD_CHILD_SHEET_LABEL_KEYS)[number] | (typeof SERVICE_SCREEN_LABEL_KEYS)[number] | (typeof STYLIST_SCREEN_LABEL_KEYS)[number] | (typeof TIME_SCREEN_LABEL_KEYS)[number] | (typeof MANAGE_SCREEN_LABEL_KEYS)[number] | (typeof DETAILS_SCREEN_LABEL_KEYS)[number] | (typeof SUMMARY_BAR_LABEL_KEYS)[number] | (typeof CONFIRMATION_LABEL_KEYS)[number] | (typeof BOOKING_SKELETON_LABEL_KEYS)[number] | (typeof LOGIN_SHEET_LABEL_KEYS)[number] | (typeof PORTAL_SHELL_LABEL_KEYS)[number] | (typeof PORTAL_UNREACHABLE_LABEL_KEYS)[number] | (typeof UPCOMING_BOOKINGS_LABEL_KEYS)[number] | (typeof VISIT_HISTORY_LABEL_KEYS)[number] | (typeof REBOOK_CARDS_LABEL_KEYS)[number] | (typeof CHILD_CARDS_LABEL_KEYS)[number] | (typeof FAMILY_EDITOR_LABEL_KEYS)[number] | (typeof PROFILE_FORM_LABEL_KEYS)[number] | (typeof DATA_CONTROLS_LABEL_KEYS)[number] | (typeof LOGOUT_BUTTON_LABEL_KEYS)[number] | (typeof VIPPS_LINK_ROW_LABEL_KEYS)[number];
+/** A complete label pack for one locale. */
+export type BookingLabels = Record<BookingLabelKey, string>;