@arquimedes.co/eureka-forms 3.0.57-new-steps → 3.0.57

package/dist/Shared/ErkAvailabilityPicker/ErkAvailabilityPicker.js

@@ -1,112 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from 'react';
-import { addDays, format, startOfWeek } from 'date-fns';
-import { CalendarEventCategory, } from '../../@Types/CalendarFormStep';
-import styles from './ErkAvailabilityPicker.module.css';
-const DOW_LABELS = ['L', 'M', 'M', 'J', 'V', 'S', 'D'];
-const DOW_NAMES = ['Lunes', 'Martes', 'Miércoles', 'Jueves', 'Viernes', 'Sábado', 'Domingo'];
-function parseHour(hhmm) {
-    return Number(hhmm.split(':')[0]) || 0;
-}
-/** Ancla del día `dayIdx` (0=Lun … 6=Dom) en la semana actual. */
-function anchorDate(dayIdx) {
-    return addDays(startOfWeek(new Date(), { weekStartsOn: 1 }), dayIdx);
-}
-function cellISO(dayIdx, hour) {
-    const day = anchorDate(dayIdx);
-    return `${format(day, 'yyyy-MM-dd')}T${String(hour).padStart(2, '0')}:00:00`;
-}
-/** `Date.getDay()` → índice de columna (0=Lun … 6=Dom). */
-function dayToIdx(day) {
-    return (day + 6) % 7;
-}
-const RRULE_DAY_CODES = ['SU', 'MO', 'TU', 'WE', 'TH', 'FR', 'SA'];
-/**
- * Expande el value a celdas marcadas. Soporta las ventanas que el propio picker
- * genera (semanales por día) y BYDAY (ej: L–V) por si el valor viene de otra fuente.
- */
-function valueToCells(value) {
-    const cells = new Set();
-    for (const event of value?.events ?? []) {
-        const startHour = parseHour(event.start.slice(11, 16));
-        const endHour = parseHour(event.end.slice(11, 16)) || 24;
-        const byday = /BYDAY=([A-Z,]+)/.exec(event.recurrence ?? '');
-        const dayIdxs = byday
-            ? byday[1]
-                .split(',')
-                .map((code) => RRULE_DAY_CODES.indexOf(code))
-                .filter((d) => d >= 0)
-                .map(dayToIdx)
-            : [dayToIdx(new Date(`${event.start.slice(0, 10)}T00:00:00`).getDay())];
-        for (const dayIdx of dayIdxs) {
-            for (let h = startHour; h < endHour; h++)
-                cells.add(`${dayIdx}:${h}`);
-        }
-    }
-    return cells;
-}
-/** Convierte las celdas marcadas en ventanas semanales contiguas por día. */
-function cellsToEvents(cells, hours) {
-    const events = [];
-    for (let dayIdx = 0; dayIdx < 7; dayIdx++) {
-        let windowStart = null;
-        for (const h of hours) {
-            const marked = cells.has(`${dayIdx}:${h}`);
-            if (marked && windowStart === null)
-                windowStart = h;
-            if (!marked && windowStart !== null) {
-                events.push(windowEvent(dayIdx, windowStart, h));
-                windowStart = null;
-            }
-        }
-        if (windowStart !== null) {
-            events.push(windowEvent(dayIdx, windowStart, hours[hours.length - 1] + 1));
-        }
-    }
-    return events;
-}
-function windowEvent(dayIdx, startHour, endHour) {
-    return {
-        id: `avail-${dayIdx}-${startHour}-${endHour}`,
-        category: CalendarEventCategory.WORKING,
-        start: cellISO(dayIdx, startHour),
-        end: cellISO(dayIdx, endHour),
-        recurrence: 'FREQ=WEEKLY',
-    };
-}
-/**
- * Picker compacto de disponibilidad para el paso CALENDAR/Availability del form:
- * un grid semanal pequeño (día × hora) donde quien responde marca sus ventanas
- * disponibles. Produce ventanas WORKING con recurrencia semanal (RRULE), las que
- * un paso BOOKING puede usar como disponibilidad.
- */
-function ErkAvailabilityPicker({ value, onChange, label, description, minTime = '07:00', maxTime = '19:00', showWeekends = true, timezone, readOnly = false, error, }) {
-    const minHour = parseHour(minTime);
-    const maxHour = parseHour(maxTime);
-    const hours = useMemo(() => Array.from({ length: Math.max(maxHour - minHour, 1) }, (_, i) => minHour + i), [minHour, maxHour]);
-    const dayIdxs = showWeekends ? [0, 1, 2, 3, 4, 5, 6] : [0, 1, 2, 3, 4];
-    const cells = useMemo(() => valueToCells(value), [value]);
-    const toggle = (dayIdx, hour) => {
-        if (readOnly)
-            return;
-        const next = new Set(cells);
-        const key = `${dayIdx}:${hour}`;
-        if (next.has(key))
-            next.delete(key);
-        else
-            next.add(key);
-        onChange({
-            type: 'CALENDAR_VALUE',
-            events: cellsToEvents(next, hours),
-            timezone: value?.timezone ?? timezone,
-        });
-    };
-    const markedCount = cells.size;
-    return (_jsxs("div", { className: styles.container, children: [_jsx("span", { className: styles.label, children: label }), description && _jsx("p", { className: styles.description, children: description }), _jsxs("div", { className: styles.card, children: [_jsxs("div", { className: styles.grid, style: { gridTemplateColumns: `44px repeat(${dayIdxs.length}, 1fr)` }, children: [_jsx("span", { className: styles.corner }), dayIdxs.map((d) => (_jsx("span", { className: styles.dow, children: DOW_LABELS[d] }, d))), hours.map((h) => (_jsxs("div", { className: styles.row, children: [_jsxs("span", { className: styles.hour, children: [h, ":00"] }), dayIdxs.map((d) => {
-                                        const on = cells.has(`${d}:${h}`);
-                                        return (_jsx("button", { type: "button", disabled: readOnly, "aria-pressed": on, "aria-label": `${DOW_NAMES[d]} ${h}:00`, className: on ? `${styles.cell} ${styles.cellOn}` : styles.cell, onClick: () => toggle(d, h) }, d));
-                                    })] }, h)))] }), _jsx("div", { className: styles.footer, children: markedCount > 0
-                            ? 'Disponible cada semana en las horas marcadas.'
-                            : 'Marca las horas en las que estás disponible cada semana.' })] }), error && _jsx("div", { className: styles.err, children: error })] }));
-}
-export default ErkAvailabilityPicker;

package/dist/Shared/ErkAvailabilityPicker/ErkAvailabilityPicker.module.css

@@ -1,88 +0,0 @@
-.container {
-    max-width: 100%;
-    box-sizing: border-box;
-    display: flex;
-    flex-direction: column;
-    gap: 4px;
-}
-.label {
-    font-size: 14.5px;
-    font-weight: 700;
-    color: var(--eureka-text, #293241);
-}
-.description {
-    margin: 0 0 4px;
-    font-size: 12.5px;
-    color: #787878;
-}
-
-.card {
-    border: 1px solid var(--eureka-outline, #d9dee6);
-    border-radius: 12px;
-    overflow: hidden;
-    background: var(--eureka-bg, #fff);
-    max-width: 460px;
-}
-.grid {
-    display: grid;
-    padding: 10px 12px 4px;
-    gap: 2px;
-    font-variant-numeric: tabular-nums;
-}
-.corner {
-    grid-column: 1;
-}
-.dow {
-    text-align: center;
-    font-size: 10.5px;
-    font-weight: 700;
-    color: #787878;
-    text-transform: uppercase;
-    padding-bottom: 2px;
-}
-.row {
-    display: contents;
-}
-.hour {
-    font-size: 10.5px;
-    color: #787878;
-    text-align: right;
-    padding-right: 6px;
-    align-self: center;
-}
-.cell {
-    height: 26px;
-    border: 1px solid var(--eureka-outline, #eceff3);
-    border-radius: 6px;
-    background: #fbfcfd;
-    cursor: pointer;
-    padding: 0;
-}
-.cell:hover {
-    border-color: var(--eureka-primary, #3d5a7f);
-}
-.cell:disabled {
-    cursor: default;
-}
-.cellOn {
-    background: repeating-linear-gradient(
-        -45deg,
-        color-mix(in srgb, var(--eureka-primary, #3d5a7f) 30%, #fff),
-        color-mix(in srgb, var(--eureka-primary, #3d5a7f) 30%, #fff) 5px,
-        color-mix(in srgb, var(--eureka-primary, #3d5a7f) 18%, #fff) 5px,
-        color-mix(in srgb, var(--eureka-primary, #3d5a7f) 18%, #fff) 10px
-    );
-    border-color: var(--eureka-primary, #3d5a7f);
-}
-.footer {
-    padding: 8px 12px 10px;
-    font-size: 11.5px;
-    color: #787878;
-    border-top: 1px solid var(--eureka-outline, #eceff3);
-    background: color-mix(in srgb, var(--eureka-primary, #3d5a7f) 2%, #fff);
-}
-.err {
-    font-size: 12px;
-    color: #d0473f;
-    margin-top: 2px;
-}

package/dist/Shared/ErkAvailabilityPicker/ErkAvailabilityPicker.test.js

@@ -1,75 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { describe, expect, it, vi } from 'vitest';
-import '@testing-library/jest-dom';
-import { addDays, format, startOfWeek } from 'date-fns';
-import ErkAvailabilityPicker from './ErkAvailabilityPicker';
-import MaterialProviders from '../../Utils/MaterialProviders';
-import InternalFormStyle from '../../constants/InternalFormStyle';
-import { CalendarEventCategory } from '../../@Types/CalendarFormStep';
-function iso(dayIdx, hhmm) {
-    const day = addDays(startOfWeek(new Date(), { weekStartsOn: 1 }), dayIdx);
-    return `${format(day, 'yyyy-MM-dd')}T${hhmm}:00`;
-}
-describe('ErkAvailabilityPicker', () => {
-    it('marks a cell and emits a weekly WORKING window', async () => {
-        const user = userEvent.setup();
-        const onChange = vi.fn();
-        render(_jsx(MaterialProviders, { formStyle: InternalFormStyle, children: _jsx(ErkAvailabilityPicker, { value: null, onChange: onChange, label: "Disponibilidad", minTime: "08:00", maxTime: "12:00" }) }));
-        await user.click(screen.getByRole('button', { name: 'Lunes 9:00' }));
-        expect(onChange).toHaveBeenCalledWith({
-            type: 'CALENDAR_VALUE',
-            events: [
-                expect.objectContaining({
-                    category: CalendarEventCategory.WORKING,
-                    start: iso(0, '09:00'),
-                    end: iso(0, '10:00'),
-                    recurrence: 'FREQ=WEEKLY',
-                }),
-            ],
-            timezone: undefined,
-        });
-    });
-    it('merges contiguous marked hours into a single window', async () => {
-        const user = userEvent.setup();
-        const onChange = vi.fn();
-        const value = {
-            type: 'CALENDAR_VALUE',
-            events: [
-                {
-                    id: 'avail-0-9-10',
-                    category: CalendarEventCategory.WORKING,
-                    start: iso(0, '09:00'),
-                    end: iso(0, '10:00'),
-                    recurrence: 'FREQ=WEEKLY',
-                },
-            ],
-        };
-        render(_jsx(MaterialProviders, { formStyle: InternalFormStyle, children: _jsx(ErkAvailabilityPicker, { value: value, onChange: onChange, label: "Disponibilidad", minTime: "08:00", maxTime: "12:00" }) }));
-        await user.click(screen.getByRole('button', { name: 'Lunes 10:00' }));
-        expect(onChange).toHaveBeenCalledWith(expect.objectContaining({
-            events: [
-                expect.objectContaining({ start: iso(0, '09:00'), end: iso(0, '11:00') }),
-            ],
-        }));
-    });
-    it('renders existing windows as pressed cells and blocks toggling when readOnly', () => {
-        const value = {
-            type: 'CALENDAR_VALUE',
-            events: [
-                {
-                    id: 'avail-2-14-16',
-                    category: CalendarEventCategory.WORKING,
-                    start: iso(2, '14:00'),
-                    end: iso(2, '16:00'),
-                    recurrence: 'FREQ=WEEKLY',
-                },
-            ],
-        };
-        render(_jsx(MaterialProviders, { formStyle: InternalFormStyle, children: _jsx(ErkAvailabilityPicker, { value: value, onChange: () => { }, label: "Disponibilidad", minTime: "13:00", maxTime: "17:00", readOnly: true }) }));
-        expect(screen.getByRole('button', { name: 'Miércoles 14:00', pressed: true })).toBeDisabled();
-        expect(screen.getByRole('button', { name: 'Miércoles 15:00', pressed: true })).toBeInTheDocument();
-        expect(screen.getByRole('button', { name: 'Miércoles 16:00', pressed: false })).toBeInTheDocument();
-    });
-});

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

@@ -1,31 +0,0 @@
-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

@@ -1,223 +0,0 @@
-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;