@medalsocial/meda 3.0.0 → 3.3.0

package/dist/booking/details-screen.js

@@ -0,0 +1,316 @@
+'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 { renderLabel } from './internal/label-parts.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 }), ' ', renderLabel(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: renderLabel(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 template = labels['details.call.link'];
+    const call = phone ? fillLabel(template, { 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: renderLabel(template, { phone }) })) : (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,36 @@
+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 { joinLabelParts, labelParts, renderLabel } from './internal/label-parts.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,41 @@
+// @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 { joinLabelParts, labelParts, renderLabel } from './internal/label-parts.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,28 @@
+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;
+/**
+ * A filled label as element children: the template split around its
+ * `{placeholders}`, so React renders one text node per literal run and one
+ * per value — the same DOM as writing the sentence out in JSX
+ * (`Total {total} · paid at the salon`). Prefer it over `fillLabel` wherever
+ * a label is rendered as children; a browser lays text out per text node, so
+ * one joined string can land a line's glyphs a sub-pixel away from the same
+ * sentence composed in JSX.
+ *
+ * Text-only targets (`aria-label`, `title`, a file name) keep `fillLabel`.
+ * Empty literal runs and empty values render nothing, as in JSX; a label
+ * that fills to nothing at all is `null`.
+ */
+export declare function renderLabel(template: string, values: Readonly<Record<string, string | number>>): ReactNode;
+/**
+ * `parts.filter(Boolean).join(separator)` as element children: every part
+ * and every separator its own text piece. Blank parts drop out, so an absent
+ * one closes the gap rather than leaving a doubled separator.
+ */
+export declare function joinLabelParts(parts: ReadonlyArray<ReactNode>, separator: string): ReactNode;

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

@@ -0,0 +1,57 @@
+import { jsx as _jsx, jsxs as _jsxs } 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;
+    });
+}
+/**
+ * A filled label as element children: the template split around its
+ * `{placeholders}`, so React renders one text node per literal run and one
+ * per value — the same DOM as writing the sentence out in JSX
+ * (`Total {total} · paid at the salon`). Prefer it over `fillLabel` wherever
+ * a label is rendered as children; a browser lays text out per text node, so
+ * one joined string can land a line's glyphs a sub-pixel away from the same
+ * sentence composed in JSX.
+ *
+ * Text-only targets (`aria-label`, `title`, a file name) keep `fillLabel`.
+ * Empty literal runs and empty values render nothing, as in JSX; a label
+ * that fills to nothing at all is `null`.
+ */
+export function renderLabel(template, values) {
+    const pieces = template.split(/(\{\w+\})/g);
+    const nodes = [];
+    for (const piece of pieces) {
+        const match = /^\{(\w+)\}$/.exec(piece);
+        const value = match && Object.hasOwn(values, match[1]) ? values[match[1]] : piece;
+        if (value !== '')
+            nodes.push(value);
+    }
+    return nodes.length > 0 ? nodes : null;
+}
+/**
+ * `parts.filter(Boolean).join(separator)` as element children: every part
+ * and every separator its own text piece. Blank parts drop out, so an absent
+ * one closes the gap rather than leaving a doubled separator.
+ */
+export function joinLabelParts(parts, separator) {
+    return parts
+        .filter((part) => part !== null &&
+        part !== undefined &&
+        part !== false &&
+        part !== '' &&
+        !(Array.isArray(part) && part.length === 0))
+        .map((part, index) => (_jsxs(Fragment, { children: [index > 0 && separator, part] }, index)));
+}

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';