@arquimedes.co/eureka-forms 3.0.52-test → 3.0.53-new-steps

package/dist/Shared/ErkAddressAutocomplete/ErkAddressAutocomplete.module.css

@@ -0,0 +1,82 @@
+.input {
+    width: 100%;
+    box-sizing: border-box;
+    height: 40px;
+    padding: 6px 12px;
+    font-size: 1rem;
+    color: var(--eureka-text, #333);
+    background-color: var(--eureka-bg, #fff);
+    border: 1px solid var(--eureka-outline, #ccc);
+    border-radius: 10px;
+    outline: none;
+}
+
+.input:hover:not(:disabled) {
+    border-color: var(--eureka-primary, #1976d2);
+}
+
+.input:focus {
+    border-color: var(--eureka-primary, #1976d2);
+    border-width: 2px;
+    padding: 5px 11px;
+}
+
+.input:disabled {
+    opacity: 0.5;
+}
+
+.inputError {
+    border-color: var(--eureka-error, #e53935);
+}
+
+.positioner {
+    z-index: 1400;
+    width: var(--anchor-width);
+}
+
+.popup {
+    box-sizing: border-box;
+    max-height: 320px;
+    overflow-y: auto;
+    padding: 4px;
+    background-color: var(--eureka-bg, #fff);
+    border: 1px solid var(--eureka-outline, #ccc);
+    border-radius: 10px;
+    box-shadow: 0 4px 16px rgb(0 0 0 / 12%);
+}
+
+.list {
+    display: flex;
+    flex-direction: column;
+}
+
+.status {
+    padding: 10px 12px;
+    font-size: 0.875rem;
+    color: var(--eureka-text, #666);
+    opacity: 0.7;
+}
+
+.item {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+    padding: 8px 12px;
+    border-radius: 8px;
+    cursor: pointer;
+}
+
+.item[data-highlighted],
+.item:hover {
+    background-color: var(--eureka-primary, #1976d2);
+    color: #fff;
+}
+
+.optionLabel {
+    font-size: 0.9375rem;
+}
+
+.optionDescription {
+    font-size: 0.8125rem;
+    opacity: 0.7;
+}

package/dist/Shared/ErkAddressAutocomplete/googlePlaces.d.ts

@@ -0,0 +1,29 @@
+import { LocationAddressDetail, LocationStepValue } from '../../@Types/LocationFormStep';
+/** Asegura el script cargado y las clases de Places listas. Idempotente. */
+export declare function loadPlaces(apiKey: string): Promise<void>;
+/** Token de sesión nuevo (mejora el billing/relevancia de Google). */
+export declare function newSessionToken(): any;
+/** Reverse-geocoding para el modo GPS: coordenadas → dirección estructurada. */
+export declare function reverseGeocode(apiKey: string, lat: number, lng: number): Promise<{
+    address?: string;
+    addressDetail: LocationAddressDetail;
+}>;
+export interface AddressPrediction {
+    placeId: string;
+    label: string;
+    description: string;
+    toPlace: () => any;
+}
+export interface FetchSuggestionsOptions {
+    sessionToken?: any;
+    /** ISO-2, ej. ['co'] */
+    regionCodes?: string[];
+}
+export declare function fetchAddressSuggestions(input: string, options?: FetchSuggestionsOptions): Promise<AddressPrediction[]>;
+/**
+ * Descompone los `addressComponents` de un Place en el shape estructurado del step.
+ * Acepta el formato nuevo (`longText`/`shortText`) y el legacy (`long_name`/`short_name`).
+ */
+export declare function parseAddressComponents(components: any[] | null | undefined): LocationAddressDetail;
+/** Resuelve una predicción a un `LocationStepValue` completo (fetchFields + parse). */
+export declare function resolvePrediction(prediction: AddressPrediction): Promise<LocationStepValue>;

package/dist/Shared/ErkAddressAutocomplete/googlePlaces.js

@@ -0,0 +1,139 @@
+import { LocationInputMode } from '../../@Types/LocationFormStep';
+/**
+ * Carga y consulta de Google Places (nueva API `AutocompleteSuggestion`).
+ * Encapsula el script loader + importLibrary que antes vivía inline en ErkLocationInput,
+ * para reutilizarlo desde el autocomplete de Base UI sin duplicar lógica.
+ */
+// Google's new Places classes (AutocompleteSuggestion/SessionToken) are untyped in the
+// installed @types/google.maps, so they're kept as `any` — same approach as ErkLocationInput.
+let loadPromise = null;
+let suggestionClass = null;
+let sessionTokenClass = null;
+let geocoderClass = null;
+function loadScript(apiKey) {
+    if (typeof window === 'undefined')
+        return Promise.resolve();
+    const win = window;
+    if (win.google?.maps?.importLibrary)
+        return Promise.resolve();
+    if (loadPromise)
+        return loadPromise;
+    loadPromise = new Promise((resolve, reject) => {
+        const script = document.createElement('script');
+        script.src = `https://maps.googleapis.com/maps/api/js?key=${apiKey}&loading=async`;
+        script.async = true;
+        script.defer = true;
+        script.onload = () => resolve();
+        script.onerror = () => {
+            loadPromise = null;
+            reject(new Error('Google Maps script failed to load.'));
+        };
+        document.head.appendChild(script);
+    });
+    return loadPromise;
+}
+/** Asegura el script cargado y las clases de Places listas. Idempotente. */
+export async function loadPlaces(apiKey) {
+    await loadScript(apiKey);
+    const win = window;
+    if (win.google?.maps?.importLibrary && !suggestionClass) {
+        const places = await win.google.maps.importLibrary('places');
+        suggestionClass = places.AutocompleteSuggestion;
+        sessionTokenClass = places.AutocompleteSessionToken;
+    }
+}
+/** Token de sesión nuevo (mejora el billing/relevancia de Google). */
+export function newSessionToken() {
+    return sessionTokenClass ? new sessionTokenClass() : undefined;
+}
+/** Reverse-geocoding para el modo GPS: coordenadas → dirección estructurada. */
+export async function reverseGeocode(apiKey, lat, lng) {
+    await loadScript(apiKey);
+    const win = window;
+    if (win.google?.maps?.importLibrary && !geocoderClass) {
+        const geocoding = await win.google.maps.importLibrary('geocoding');
+        geocoderClass = geocoding.Geocoder;
+    }
+    else if (!geocoderClass && win.google?.maps?.Geocoder) {
+        geocoderClass = win.google.maps.Geocoder;
+    }
+    if (!geocoderClass)
+        return { addressDetail: {} };
+    const geocoder = new geocoderClass();
+    return new Promise((resolve) => {
+        geocoder.geocode({ location: { lat, lng } }, (results, status) => {
+            if (status === 'OK' && results?.[0]) {
+                resolve({
+                    address: results[0].formatted_address,
+                    addressDetail: parseAddressComponents(results[0].address_components),
+                });
+            }
+            else {
+                resolve({ addressDetail: {} });
+            }
+        });
+    });
+}
+export async function fetchAddressSuggestions(input, options) {
+    if (!suggestionClass)
+        return [];
+    const request = { input };
+    if (options?.sessionToken)
+        request.sessionToken = options.sessionToken;
+    if (options?.regionCodes)
+        request.includedRegionCodes = options.regionCodes;
+    const { suggestions } = await suggestionClass.fetchAutocompleteSuggestions(request);
+    return suggestions
+        .filter((s) => s.placePrediction)
+        .map((s) => ({
+        placeId: s.placePrediction.placeId,
+        label: s.placePrediction.mainText?.text ?? s.placePrediction.text.text,
+        description: s.placePrediction.secondaryText?.text ?? s.placePrediction.text.text,
+        toPlace: () => s.placePrediction.toPlace(),
+    }));
+}
+/**
+ * Descompone los `addressComponents` de un Place en el shape estructurado del step.
+ * Acepta el formato nuevo (`longText`/`shortText`) y el legacy (`long_name`/`short_name`).
+ */
+export function parseAddressComponents(components) {
+    const detail = {};
+    for (const component of components ?? []) {
+        const types = component.types;
+        const longName = component.longText ?? component.long_name;
+        const shortName = component.shortText ?? component.short_name;
+        if (types.includes('route'))
+            detail.street = longName;
+        else if (types.includes('street_number'))
+            detail.streetNumber = longName;
+        else if (types.includes('subpremise'))
+            detail.unit = longName;
+        else if (types.includes('neighborhood') || types.includes('sublocality'))
+            detail.neighborhood = longName;
+        else if (types.includes('locality'))
+            detail.city = longName;
+        else if (types.includes('administrative_area_level_1'))
+            detail.state = longName;
+        else if (types.includes('country')) {
+            detail.country = longName;
+            detail.countryCode = shortName;
+        }
+        else if (types.includes('postal_code'))
+            detail.postalCode = longName;
+    }
+    return detail;
+}
+/** Resuelve una predicción a un `LocationStepValue` completo (fetchFields + parse). */
+export async function resolvePrediction(prediction) {
+    const place = prediction.toPlace();
+    await place.fetchFields({ fields: ['displayName', 'formattedAddress', 'location', 'addressComponents'] });
+    return {
+        source: LocationInputMode.GOOGLE_PLACES,
+        latitude: place.location?.lat(),
+        longitude: place.location?.lng(),
+        name: place.displayName ?? prediction.label,
+        address: place.formattedAddress ?? undefined,
+        placeId: prediction.placeId,
+        addressDetail: parseAddressComponents(place.addressComponents),
+    };
+}

package/dist/Shared/ErkBookingPicker/ErkBookingPicker.d.ts

@@ -0,0 +1,31 @@
+import { BookablePerson, BookingMode, BookingSlot, BookingValue, PersonSelectionMode } from '../../@Types/BookingFormStep';
+export interface ErkBookingPickerProps {
+    value: BookingValue | null;
+    onChange: (value: BookingValue | null) => void;
+    label: string;
+    description?: string | null;
+    durationMinutes: number;
+    bufferMinutes?: number;
+    bookingMode?: BookingMode;
+    temporaryLockMinutes?: number;
+    personSelectionMode?: PersonSelectionMode;
+    persons?: BookablePerson[];
+    /** Recopila nombre/correo del que agenda. */
+    collectContact?: boolean;
+    /** Provee los slots disponibles para una persona + día. */
+    fetchSlots?: (args: {
+        personId?: string;
+        date: string;
+    }) => Promise<BookingSlot[]>;
+    readOnly?: boolean;
+    error?: string;
+}
+/**
+ * Selector de cita: una tarjeta de entrada ("Agendar cita") abre el wizard en un modal —
+ * una decisión por pantalla (persona → día → hora → confirmar), con panel izquierdo de
+ * resumen que se va llenando, breadcrumb navegable arriba y barra inferior Atrás / Siguiente.
+ * En el paso final el panel derecho desaparece y el resumen se expande en una columna
+ * centrada (cross-fade corto). Confirmar cierra el modal y deja el resumen compacto.
+ */
+declare function ErkBookingPicker({ value, onChange, label, description, durationMinutes, bufferMinutes, bookingMode, temporaryLockMinutes, personSelectionMode, persons, collectContact, fetchSlots, readOnly, error, }: ErkBookingPickerProps): JSX.Element;
+export default ErkBookingPicker;

package/dist/Shared/ErkBookingPicker/ErkBookingPicker.js

@@ -0,0 +1,223 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { Dialog } from '@mui/material';
+import { addDays, addMonths, format, isBefore, isSameDay, isSameMonth, startOfDay, startOfMonth, startOfWeek, } from 'date-fns';
+import { es } from 'date-fns/locale';
+import { BookingMode, PersonSelectionMode, } from '../../@Types/BookingFormStep';
+import ErkButton from '../ErkButton/ErkButton';
+import ErkTextField from '../ErkTextField/ErkTextField';
+import styles from './ErkBookingPicker.module.css';
+const WEEK_STARTS_ON = 1;
+const DOW = ['L', 'M', 'M', 'J', 'V', 'S', 'D'];
+const MODE_LABEL = {
+    [BookingMode.IN_PERSON]: 'Presencial',
+    [BookingMode.VIRTUAL]: 'Virtual',
+    [BookingMode.HYBRID]: 'Híbrida',
+};
+const STEP_LABEL = {
+    person: 'Persona',
+    day: 'Día',
+    hour: 'Hora',
+    confirm: 'Confirmar',
+};
+const STEP_HINT = {
+    person: 'Elige con quién agendar',
+    day: 'Elige un día',
+    hour: 'Elige una hora libre',
+    confirm: 'Confirma tu cita',
+};
+/** Duración del fade al reestructurarse el layout (entrar/salir del paso final). */
+const XFADE_MS = 160;
+/** El CTA de confirmar usa el acento del form (secondaryContrastColor vía --booking-accent). */
+const ACCENT_SX = {
+    backgroundColor: 'var(--booking-accent, #ee6c4d)',
+    '&:hover': { backgroundColor: 'var(--booking-accent, #ee6c4d)', filter: 'brightness(0.95)' },
+    '&:disabled': { backgroundColor: 'var(--booking-accent, #ee6c4d)', color: '#fff' },
+};
+function fmtDate(date) {
+    return format(date, 'yyyy-MM-dd');
+}
+function longDate(date) {
+    return format(date, 'EEEE d MMM', { locale: es });
+}
+function initials(name) {
+    return name
+        .split(' ')
+        .map((p) => p[0])
+        .filter(Boolean)
+        .slice(0, 2)
+        .join('')
+        .toUpperCase();
+}
+function capitalize(text) {
+    return text.charAt(0).toUpperCase() + text.slice(1);
+}
+/**
+ * Selector de cita: una tarjeta de entrada ("Agendar cita") abre el wizard en un modal —
+ * una decisión por pantalla (persona → día → hora → confirmar), con panel izquierdo de
+ * resumen que se va llenando, breadcrumb navegable arriba y barra inferior Atrás / Siguiente.
+ * En el paso final el panel derecho desaparece y el resumen se expande en una columna
+ * centrada (cross-fade corto). Confirmar cierra el modal y deja el resumen compacto.
+ */
+function ErkBookingPicker({ value, onChange, label, description, durationMinutes, bufferMinutes, bookingMode, temporaryLockMinutes, personSelectionMode, persons, collectContact = false, fetchSlots, readOnly = false, error, }) {
+    const needsPerson = !!personSelectionMode && personSelectionMode !== PersonSelectionMode.NONE;
+    const personsOptional = personSelectionMode === PersonSelectionMode.OPTIONAL;
+    const today = startOfDay(new Date());
+    const wizardKeys = useMemo(() => (needsPerson ? ['person', 'day', 'hour', 'confirm'] : ['day', 'hour', 'confirm']), [needsPerson]);
+    const finalIdx = wizardKeys.length - 1;
+    const [open, setOpen] = useState(false);
+    const [wizStep, setWizStep] = useState(0);
+    const [xfade, setXfade] = useState(false);
+    const [person, setPerson] = useState(undefined);
+    const [personTouched, setPersonTouched] = useState(false);
+    const [date, setDate] = useState(undefined);
+    const [viewMonth, setViewMonth] = useState(() => startOfMonth(today));
+    const [slot, setSlot] = useState(undefined);
+    const [slots, setSlots] = useState([]);
+    const [loading, setLoading] = useState(false);
+    const [contactName, setContactName] = useState('');
+    const [contactEmail, setContactEmail] = useState('');
+    const reduceMotion = useMemo(() => typeof window !== 'undefined' && !!window.matchMedia?.('(prefers-reduced-motion: reduce)').matches, []);
+    const monthCells = useMemo(() => {
+        const first = startOfWeek(startOfMonth(viewMonth), { weekStartsOn: WEEK_STARTS_ON });
+        return Array.from({ length: 42 }, (_, i) => addDays(first, i));
+    }, [viewMonth]);
+    const loadSlots = useCallback(async (day, personId) => {
+        if (!fetchSlots)
+            return;
+        setLoading(true);
+        setSlots([]);
+        try {
+            setSlots(await fetchSlots({ personId, date: fmtDate(day) }));
+        }
+        catch {
+            setSlots([]);
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [fetchSlots]);
+    useEffect(() => {
+        if (value || !date)
+            return;
+        void loadSlots(date, person?.id);
+    }, [value, date, person, loadSlots]);
+    // Al entrar/salir del paso final el layout se reestructura; el reacomodo
+    // ocurre mientras la tarjeta está invisible (fade corto en dos fases).
+    const goToStep = (target) => {
+        const crossesFinal = (wizStep === finalIdx) !== (target === finalIdx);
+        if (!crossesFinal || reduceMotion) {
+            setWizStep(target);
+            return;
+        }
+        setXfade(true);
+        window.setTimeout(() => {
+            setWizStep(target);
+            requestAnimationFrame(() => requestAnimationFrame(() => setXfade(false)));
+        }, XFADE_MS);
+    };
+    const currentKey = wizardKeys[wizStep];
+    const canAdvance = (() => {
+        switch (currentKey) {
+            case 'person':
+                return personsOptional ? personTouched : !!person;
+            case 'day':
+                return !!date;
+            case 'hour':
+                return !!slot;
+            default:
+                return true;
+        }
+    })();
+    const confirm = () => {
+        if (!slot || !date)
+            return;
+        setOpen(false);
+        onChange({
+            type: 'BOOKING_VALUE',
+            slotId: slot.id,
+            date: fmtDate(date),
+            startTime: slot.startTime,
+            endTime: slot.endTime,
+            personId: person?.id,
+            personName: person?.name,
+            contactName: contactName || undefined,
+            contactEmail: contactEmail || undefined,
+            status: 'PENDING',
+        });
+    };
+    const reset = () => {
+        onChange(null);
+        setWizStep(0);
+        setPerson(undefined);
+        setPersonTouched(false);
+        setDate(undefined);
+        setSlot(undefined);
+        setContactName('');
+        setContactEmail('');
+    };
+    const pickPerson = (p) => {
+        setPerson(p);
+        setPersonTouched(true);
+        setSlot(undefined);
+    };
+    // Read-only / already booked → compact summary with the same card aesthetic
+    if (readOnly || value) {
+        return (_jsx("div", { className: styles.container, children: _jsxs("div", { className: styles.entry, children: [_jsx("div", { className: styles.bookedIcon, children: "\u2713" }), _jsxs("div", { className: styles.entryInfo, children: [_jsx("span", { className: styles.entryLabel, children: label }), _jsx("span", { className: styles.bookedMain, children: value
+                                    ? [
+                                        value.personName,
+                                        capitalize(longDate(new Date(value.date + 'T00:00:00'))),
+                                        `${value.startTime}–${value.endTime}`,
+                                    ]
+                                        .filter(Boolean)
+                                        .join(' · ')
+                                    : 'Sin cita' })] }), value && !readOnly && _jsx(ErkButton, { text: "Cambiar", variant: "outlined", onClick: reset })] }) }));
+    }
+    const isFinal = wizStep === finalIdx;
+    const personLabel = person?.name ?? (personTouched && personsOptional ? 'Cualquiera' : undefined);
+    const dayText = date ? capitalize(longDate(date)) : undefined;
+    const hourText = slot ? `${slot.startTime} – ${slot.endTime}` : undefined;
+    const summaryRows = [
+        ...(needsPerson ? [{ key: 'person', placeholder: 'Persona', text: personLabel }] : []),
+        { key: 'day', placeholder: 'Día', text: dayText },
+        { key: 'hour', placeholder: 'Hora', text: hourText },
+    ];
+    const navParts = [];
+    if (personLabel)
+        navParts.push(_jsx("b", { children: personLabel }, "p"));
+    if (dayText)
+        navParts.push(_jsx("span", { children: dayText }, "d"));
+    if (hourText)
+        navParts.push(_jsx("span", { className: styles.navHl, children: hourText }, "h"));
+    return (_jsxs("div", { className: styles.container, children: [_jsxs("div", { className: styles.entry, children: [_jsx("div", { className: styles.avatar, children: "\uD83D\uDCC5" }), _jsxs("div", { className: styles.entryInfo, children: [_jsx("span", { className: styles.entryLabel, children: label }), _jsx("span", { className: styles.entrySub, children: description ?? 'Agenda tu cita' })] }), _jsx(ErkButton, { text: "Agendar cita", onClick: () => setOpen(true) })] }), _jsx(Dialog, { open: open, onClose: () => setOpen(false), maxWidth: "md", fullWidth: true, slotProps: { paper: { style: { borderRadius: 16, background: 'transparent', boxShadow: 'none' } } }, children: _jsxs("div", { className: `${styles.card}${isFinal ? ` ${styles.cardFinal}` : ''}${xfade ? ` ${styles.xfade}` : ''}`, children: [_jsxs("div", { className: isFinal ? `${styles.book} ${styles.bookFinal}` : styles.book, children: [_jsxs("aside", { className: styles.who, children: [_jsxs("div", { className: styles.brand, children: [_jsx("div", { className: styles.avatar, children: person ? initials(person.name) : '📅' }), _jsxs("div", { children: [_jsx("h2", { className: styles.brandName, children: person?.name ?? label }), _jsx("p", { className: styles.brandRole, children: person?.role ?? description ?? 'Agenda tu cita' })] })] }), _jsxs("div", { className: styles.meta, children: [_jsxs("div", { className: styles.row, children: [_jsx("span", { className: styles.ic, children: "\u25F7" }), durationMinutes, " min", bufferMinutes ? ` · buffer ${bufferMinutes} min` : ''] }), bookingMode && (_jsxs("div", { className: styles.row, children: [_jsx("span", { className: styles.ic, children: "\u25F1" }), _jsx("span", { className: styles.pill, children: MODE_LABEL[bookingMode] })] }))] }), _jsx("div", { className: styles.sum, "aria-live": "polite", children: summaryRows.map((r) => (_jsxs("div", { className: r.text ? `${styles.srow} ${styles.srowOn}` : styles.srow, children: [_jsx("span", { className: styles.dot, children: "\u2713" }), _jsx("span", { children: r.text ?? r.placeholder })] }, r.key))) }), isFinal && collectContact && (_jsxs("div", { className: styles.cfields, children: [_jsx(ErkTextField, { label: "Nombre", value: contactName, onChange: setContactName }), _jsx(ErkTextField, { label: "Correo", value: contactEmail, onChange: setContactEmail })] })), !!temporaryLockMinutes && (_jsxs("div", { className: styles.lock, children: ["\u23F3 Reservaremos el horario ", _jsxs("b", { children: [temporaryLockMinutes, " min"] }), " mientras confirmas."] }))] }), _jsxs("div", { className: styles.right, children: [_jsx("nav", { className: styles.stepper, "aria-label": "Progreso", children: wizardKeys.map((key, i) => (_jsxs("span", { className: styles.stepGroup, children: [_jsxs("button", { type: "button", disabled: i >= wizStep, onClick: () => goToStep(i), className: i < wizStep
+                                                            ? `${styles.stepItem} ${styles.stepDone}`
+                                                            : i === wizStep
+                                                                ? `${styles.stepItem} ${styles.stepOn}`
+                                                                : styles.stepItem, children: [_jsx("span", { className: styles.stepNum, children: i < wizStep ? '✓' : i + 1 }), STEP_LABEL[key]] }), i < wizardKeys.length - 1 && _jsx("span", { className: styles.stepSep })] }, key))) }), currentKey === 'person' && (_jsxs("section", { className: styles.pane, children: [_jsx("h3", { className: styles.q, children: "\u00BFCon qui\u00E9n quieres agendar?" }), _jsx("p", { className: styles.qsub, children: personsOptional
+                                                        ? 'Elige una persona o deja que el sistema asigne a quien esté disponible.'
+                                                        : 'Elige la persona con la que quieres tu cita.' }), _jsxs("div", { className: styles.persons, children: [(persons ?? []).map((p) => (_jsxs("button", { type: "button", className: person?.id === p.id ? `${styles.pcard} ${styles.pcardOn}` : styles.pcard, onClick: () => pickPerson(p), children: [_jsx("span", { className: styles.pav, children: initials(p.name) }), _jsxs("span", { className: styles.pinfo, children: [_jsx("span", { className: styles.pn, children: p.name }), p.role && _jsx("span", { className: styles.pr, children: p.role })] }), _jsx("span", { className: styles.chk, children: "\u2713" })] }, p.id))), personsOptional && (_jsxs("button", { type: "button", className: personTouched && !person
+                                                                ? `${styles.pcard} ${styles.pcardAny} ${styles.pcardOn}`
+                                                                : `${styles.pcard} ${styles.pcardAny}`, onClick: () => pickPerson(undefined), children: [_jsx("span", { className: styles.pav, children: "\u2726" }), _jsxs("span", { className: styles.pinfo, children: [_jsx("span", { className: styles.pn, children: "Cualquiera" }), _jsx("span", { className: styles.pr, children: "El sistema asigna" })] }), _jsx("span", { className: styles.chk, children: "\u2713" })] }))] })] }, "person")), currentKey === 'day' && (_jsxs("section", { className: styles.pane, children: [_jsx("h3", { className: styles.q, children: "Elige un d\u00EDa" }), _jsx("p", { className: styles.qsub, children: "Solo se muestran fechas a partir de hoy." }), _jsxs("div", { className: styles.monthWrap, children: [_jsxs("div", { className: styles.monthHead, children: [_jsx("span", { className: styles.monthTitle, children: capitalize(format(viewMonth, 'MMMM yyyy', { locale: es })) }), _jsxs("span", { className: styles.monthNav, children: [_jsx("button", { type: "button", "aria-label": "Mes anterior", onClick: () => setViewMonth((m) => addMonths(m, -1)), children: "\u2039" }), _jsx("button", { type: "button", "aria-label": "Mes siguiente", onClick: () => setViewMonth((m) => addMonths(m, 1)), children: "\u203A" })] })] }), _jsxs("div", { className: styles.mgrid, children: [DOW.map((d, i) => (_jsx("span", { className: styles.mdow, children: d }, i))), monthCells.map((d) => {
+                                                                    const outside = !isSameMonth(d, viewMonth);
+                                                                    const past = isBefore(d, today);
+                                                                    const selectable = !outside && !past;
+                                                                    const cls = date && isSameDay(d, date)
+                                                                        ? `${styles.mday} ${styles.mdaySel}`
+                                                                        : selectable
+                                                                            ? `${styles.mday} ${styles.mdayFree}`
+                                                                            : `${styles.mday} ${styles.mdayNone}`;
+                                                                    return (_jsx("button", { type: "button", disabled: !selectable, className: cls, onClick: () => {
+                                                                            setDate(d);
+                                                                            setSlot(undefined);
+                                                                        }, children: format(d, 'd') }, d.toISOString()));
+                                                                })] })] })] }, "day")), currentKey === 'hour' && (_jsxs("section", { className: styles.pane, children: [_jsx("h3", { className: styles.q, children: "Elige una hora" }), _jsxs("p", { className: styles.qsub, children: [dayText, " \u00B7 citas de ", durationMinutes, " min"] }), loading ? (_jsx("div", { className: styles.empty, children: "Buscando horarios\u2026" })) : slots.length === 0 ? (_jsx("div", { className: styles.empty, children: "No hay horarios disponibles ese d\u00EDa." })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: styles.slots, children: slots.map((s) => (_jsx("button", { type: "button", disabled: !s.available, className: slot?.id === s.id
+                                                                    ? `${styles.slot} ${styles.slotSel}`
+                                                                    : s.available
+                                                                        ? styles.slot
+                                                                        : `${styles.slot} ${styles.slotTaken}`, onClick: () => s.available && setSlot(s), children: s.startTime }, s.id))) }), _jsx("p", { className: styles.takenNote, children: "Tachados = ocupados por otro evento o cita." })] }))] }, "hour")), currentKey === 'confirm' && (_jsxs("section", { className: `${styles.pane} ${styles.paneFinal}`, children: [_jsx("h3", { className: styles.q, children: "Revisa y confirma tu cita" }), _jsx("p", { className: styles.qsub, children: collectContact
+                                                        ? 'Si todo está bien, completa tus datos y confirma.'
+                                                        : 'Si todo está bien, confirma tu cita.' })] }, "confirm"))] })] }), _jsxs("div", { className: styles.navbar, children: [_jsx("div", { className: styles.navSummary, children: isFinal || !canAdvance || navParts.length === 0
+                                        ? STEP_HINT[currentKey]
+                                        : navParts.reduce((acc, part, i) => (i === 0 ? [part] : [...acc, _jsx("span", { children: " \u00B7 " }, `s${i}`), part]), []) }), wizStep > 0 && (_jsx(ErkButton, { text: "Atr\u00E1s", variant: "outlined", onClick: () => goToStep(wizStep - 1) })), isFinal ? (_jsx(ErkButton, { text: "Confirmar cita", sx: ACCENT_SX, disabled: !slot, onClick: confirm })) : (_jsx(ErkButton, { text: "Siguiente", disabled: !canAdvance, onClick: () => goToStep(wizStep + 1) }))] })] }) }), error && _jsx("div", { className: styles.err, children: error })] }));
+}
+export default ErkBookingPicker;