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

package/dist/Shared/ErkBookingPicker/ErkBookingPicker.stories.js

@@ -0,0 +1,117 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import ErkBookingPicker from './ErkBookingPicker';
+import { withFormStepProviders } from '../../FormSteps/@StoryDecorators/FormStepDecorator';
+import { BookingMode, PersonSelectionMode } from '../../@Types/BookingFormStep';
+const SLOTS = [
+    { id: 's-1', startTime: '09:00', endTime: '09:50', available: true },
+    { id: 's-2', startTime: '10:00', endTime: '10:50', available: false },
+    { id: 's-3', startTime: '11:00', endTime: '11:50', available: true },
+    { id: 's-4', startTime: '14:00', endTime: '14:50', available: true },
+    { id: 's-5', startTime: '15:00', endTime: '15:50', available: false },
+    { id: 's-6', startTime: '16:00', endTime: '16:50', available: true },
+];
+function mockFetchSlots() {
+    return new Promise((resolve) => setTimeout(() => resolve(SLOTS), 300));
+}
+const PERSONS = [
+    { id: 'p-1', name: 'María González', role: 'Asesora' },
+    { id: 'p-2', name: 'Carlos Ruiz', role: 'Técnico' },
+];
+/** Controlled wrapper so the picker's value is interactive in Storybook. */
+function Interactive(args) {
+    const [value, setValue] = useState(args.value);
+    return (_jsx("div", { style: { maxWidth: 660 }, children: _jsx(ErkBookingPicker, { ...args, value: value, onChange: setValue }) }));
+}
+const meta = {
+    component: ErkBookingPicker,
+    tags: ['autodocs'],
+    decorators: [withFormStepProviders],
+    render: Interactive,
+    args: {
+        // Supplied by the Interactive wrapper; declared here so stories don't each repeat it.
+        onChange: () => undefined,
+    },
+};
+export default meta;
+/** Full flow: person → date → time. */
+export const WithPersonSelection = {
+    args: {
+        value: null,
+        label: 'Seleccionar cita',
+        description: 'Elige profesional, día y hora.',
+        durationMinutes: 50,
+        personSelectionMode: PersonSelectionMode.REQUIRED,
+        persons: PERSONS,
+        fetchSlots: mockFetchSlots,
+    },
+};
+/** Optional person — adds a "Cualquiera" option. */
+export const PersonOptional = {
+    args: {
+        value: null,
+        label: 'Reservar turno',
+        description: 'Puedes elegir o dejar que asignemos.',
+        durationMinutes: 30,
+        personSelectionMode: PersonSelectionMode.OPTIONAL,
+        persons: PERSONS,
+        fetchSlots: mockFetchSlots,
+    },
+};
+/** No person selection → straight to date + time. */
+export const NoPerson = {
+    args: {
+        value: null,
+        label: 'Seleccionar horario',
+        description: 'Elige tu día y hora.',
+        durationMinutes: 60,
+        personSelectionMode: PersonSelectionMode.NONE,
+        fetchSlots: mockFetchSlots,
+    },
+};
+/** Extra contact step (collectContact). */
+export const WithContact = {
+    args: {
+        value: null,
+        label: 'Agendar cita',
+        description: 'Elige y déjanos tus datos.',
+        durationMinutes: 45,
+        personSelectionMode: PersonSelectionMode.OPTIONAL,
+        persons: PERSONS,
+        collectContact: true,
+        fetchSlots: mockFetchSlots,
+    },
+};
+/** Full config: contact data, buffer, lock notice and in-person mode. */
+export const Complete = {
+    args: {
+        value: null,
+        label: 'Agendar cita',
+        description: 'Soporte postventa',
+        durationMinutes: 60,
+        bufferMinutes: 10,
+        bookingMode: BookingMode.IN_PERSON,
+        temporaryLockMinutes: 15,
+        personSelectionMode: PersonSelectionMode.OPTIONAL,
+        persons: PERSONS,
+        collectContact: true,
+        fetchSlots: mockFetchSlots,
+    },
+};
+/** Already booked / read-only summary. */
+export const ReadOnly = {
+    args: {
+        readOnly: true,
+        label: 'Cita confirmada',
+        durationMinutes: 50,
+        value: {
+            type: 'BOOKING_VALUE',
+            slotId: 's-3',
+            date: '2026-07-02',
+            startTime: '11:00',
+            endTime: '11:50',
+            personName: 'María González',
+            status: 'CONFIRMED',
+        },
+    },
+};

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

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/Shared/ErkBookingPicker/ErkBookingPicker.stories.test.js

@@ -0,0 +1,49 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { composeStories } from '@storybook/react-vite';
+import { describe, expect, it } from 'vitest';
+import '@testing-library/jest-dom';
+import { format } from 'date-fns';
+import * as stories from './ErkBookingPicker.stories';
+const { Complete } = composeStories(stories);
+function clickableToday() {
+    // El número de hoy puede aparecer también como día de un mes adyacente (deshabilitado).
+    const candidates = screen.getAllByRole('button', { name: format(new Date(), 'd') });
+    const enabled = candidates.find((b) => !b.disabled);
+    if (!enabled)
+        throw new Error('No selectable day found for today');
+    return enabled;
+}
+describe('ErkBookingPicker Complete story', () => {
+    it('opens the wizard in a modal, completes it, and confirming closes the modal leaving the summary', async () => {
+        const user = userEvent.setup();
+        render(_jsx(Complete, {}));
+        // Trigger → modal con el wizard
+        await user.click(screen.getByRole('button', { name: 'Agendar cita' }));
+        expect(await screen.findByRole('heading', { name: '¿Con quién quieres agendar?' })).toBeInTheDocument();
+        // Persona
+        await user.click(screen.getByText('María González'));
+        await user.click(screen.getByRole('button', { name: 'Siguiente' }));
+        // Día
+        await screen.findByRole('heading', { name: 'Elige un día' });
+        await user.click(clickableToday());
+        await user.click(screen.getByRole('button', { name: 'Siguiente' }));
+        // Hora (los slots del mock llegan con delay)
+        await screen.findByRole('heading', { name: 'Elige una hora' });
+        await user.click(await screen.findByRole('button', { name: '09:00' }));
+        await user.click(screen.getByRole('button', { name: 'Siguiente' }));
+        // Confirmar
+        await screen.findByRole('heading', { name: 'Revisa y confirma tu cita' });
+        await user.type(screen.getByLabelText('Nombre'), 'Juan Pérez');
+        await user.type(screen.getByLabelText('Correo'), 'juan@correo.com');
+        await user.click(screen.getByRole('button', { name: 'Confirmar cita' }));
+        // El modal se cierra y queda el resumen compacto con opción de cambiar
+        await waitFor(() => expect(screen.queryByRole('heading', { name: 'Revisa y confirma tu cita' })).not.toBeInTheDocument());
+        expect(screen.getByText(/María González .* 09:00–09:50/)).toBeInTheDocument();
+        expect(screen.getByRole('button', { name: 'Cambiar' })).toBeInTheDocument();
+        // "Cambiar" limpia el valor y vuelve al botón de agendar
+        await user.click(screen.getByRole('button', { name: 'Cambiar' }));
+        expect(screen.getByRole('button', { name: 'Agendar cita' })).toBeInTheDocument();
+    });
+});

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

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/dist/Shared/ErkBookingPicker/ErkBookingPicker.test.js

@@ -0,0 +1,107 @@
+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 { format } from 'date-fns';
+import ErkBookingPicker from './ErkBookingPicker';
+import MaterialProviders from '../../Utils/MaterialProviders';
+import InternalFormStyle from '../../constants/InternalFormStyle';
+import { PersonSelectionMode } from '../../@Types/BookingFormStep';
+const SLOTS = [
+    { id: 's-1', startTime: '09:00', endTime: '09:50', available: true },
+    { id: 's-2', startTime: '10:00', endTime: '10:50', available: false },
+    { id: 's-3', startTime: '11:00', endTime: '11:50', available: true },
+];
+const PERSONS = [
+    { id: 'p-1', name: 'María González', role: 'Asesora' },
+    { id: 'p-2', name: 'Carlos Ruiz', role: 'Técnico' },
+];
+function clickableToday() {
+    // El número de hoy puede aparecer también como día de un mes adyacente (deshabilitado).
+    const candidates = screen.getAllByRole('button', { name: format(new Date(), 'd') });
+    const enabled = candidates.find((b) => !b.disabled);
+    if (!enabled)
+        throw new Error('No selectable day found for today');
+    return enabled;
+}
+describe('ErkBookingPicker (wizard)', () => {
+    it('drives the full flow: person → day → hour → confirm', async () => {
+        const user = userEvent.setup();
+        const onChange = vi.fn();
+        const fetchSlots = vi.fn(() => Promise.resolve(SLOTS));
+        render(_jsx(MaterialProviders, { formStyle: InternalFormStyle, children: _jsx(ErkBookingPicker, { value: null, onChange: onChange, label: "Agendar cita", durationMinutes: 50, personSelectionMode: PersonSelectionMode.OPTIONAL, persons: PERSONS, collectContact: true, fetchSlots: fetchSlots }) }));
+        // La tarjeta de entrada abre el wizard en un modal
+        await user.click(screen.getByRole('button', { name: 'Agendar cita' }));
+        // Paso 1: persona — Siguiente bloqueado hasta elegir
+        expect(await screen.findByRole('heading', { name: '¿Con quién quieres agendar?' })).toBeInTheDocument();
+        const next = screen.getByRole('button', { name: 'Siguiente' });
+        expect(next).toBeDisabled();
+        await user.click(screen.getByText('María González'));
+        expect(next).toBeEnabled();
+        await user.click(next);
+        // Paso 2: día
+        expect(await screen.findByRole('heading', { name: 'Elige un día' })).toBeInTheDocument();
+        expect(screen.getByRole('button', { name: 'Siguiente' })).toBeDisabled();
+        await user.click(clickableToday());
+        await user.click(screen.getByRole('button', { name: 'Siguiente' }));
+        // Paso 3: hora — slots del fetch; ocupados deshabilitados
+        expect(await screen.findByRole('heading', { name: 'Elige una hora' })).toBeInTheDocument();
+        expect(fetchSlots).toHaveBeenCalledWith({ personId: 'p-1', date: format(new Date(), 'yyyy-MM-dd') });
+        const taken = await screen.findByRole('button', { name: '10:00' });
+        expect(taken).toBeDisabled();
+        await user.click(screen.getByRole('button', { name: '09:00' }));
+        await user.click(screen.getByRole('button', { name: 'Siguiente' }));
+        // Paso 4: confirmar — datos de contacto en la barra y CTA
+        expect(await screen.findByRole('heading', { name: 'Revisa y confirma tu cita' })).toBeInTheDocument();
+        await user.type(screen.getByLabelText('Nombre'), 'Juan Pérez');
+        await user.type(screen.getByLabelText('Correo'), 'juan@correo.com');
+        await user.click(screen.getByRole('button', { name: 'Confirmar cita' }));
+        expect(onChange).toHaveBeenCalledWith({
+            type: 'BOOKING_VALUE',
+            slotId: 's-1',
+            date: format(new Date(), 'yyyy-MM-dd'),
+            startTime: '09:00',
+            endTime: '09:50',
+            personId: 'p-1',
+            personName: 'María González',
+            contactName: 'Juan Pérez',
+            contactEmail: 'juan@correo.com',
+            status: 'PENDING',
+        });
+    });
+    it('skips the person step when personSelectionMode is NONE', async () => {
+        const user = userEvent.setup();
+        render(_jsx(MaterialProviders, { formStyle: InternalFormStyle, children: _jsx(ErkBookingPicker, { value: null, onChange: () => { }, label: "Agendar cita", durationMinutes: 30, personSelectionMode: PersonSelectionMode.NONE, fetchSlots: () => Promise.resolve(SLOTS) }) }));
+        await user.click(screen.getByRole('button', { name: 'Agendar cita' }));
+        expect(await screen.findByRole('heading', { name: 'Elige un día' })).toBeInTheDocument();
+        expect(screen.queryByText('¿Con quién quieres agendar?')).not.toBeInTheDocument();
+        expect(screen.queryByText('Persona')).not.toBeInTheDocument();
+    });
+    it('allows navigating back through the breadcrumb without losing the selection', async () => {
+        const user = userEvent.setup();
+        render(_jsx(MaterialProviders, { formStyle: InternalFormStyle, children: _jsx(ErkBookingPicker, { value: null, onChange: () => { }, label: "Agendar cita", durationMinutes: 50, personSelectionMode: PersonSelectionMode.REQUIRED, persons: PERSONS, fetchSlots: () => Promise.resolve(SLOTS) }) }));
+        await user.click(screen.getByRole('button', { name: 'Agendar cita' }));
+        await user.click(await screen.findByText('Carlos Ruiz'));
+        await user.click(screen.getByRole('button', { name: 'Siguiente' }));
+        expect(await screen.findByRole('heading', { name: 'Elige un día' })).toBeInTheDocument();
+        // Volver por el breadcrumb: el paso "Persona" completado es clicable
+        await user.click(screen.getByRole('button', { name: /Persona/ }));
+        expect(await screen.findByRole('heading', { name: '¿Con quién quieres agendar?' })).toBeInTheDocument();
+        // La selección se mantiene y permite avanzar de nuevo
+        expect(screen.getByRole('button', { name: 'Siguiente' })).toBeEnabled();
+    });
+    it('renders the compact summary when a value exists', () => {
+        render(_jsx(MaterialProviders, { formStyle: InternalFormStyle, children: _jsx(ErkBookingPicker, { value: {
+                    type: 'BOOKING_VALUE',
+                    slotId: 's-3',
+                    date: '2026-07-02',
+                    startTime: '11:00',
+                    endTime: '11:50',
+                    personName: 'María González',
+                    status: 'CONFIRMED',
+                }, onChange: () => { }, label: "Cita confirmada", durationMinutes: 50 }) }));
+        expect(screen.getByText(/María González .* 11:00–11:50/)).toBeInTheDocument();
+        expect(screen.getByRole('button', { name: 'Cambiar' })).toBeInTheDocument();
+    });
+});

package/dist/Shared/ErkCalendar/CalendarFunctions.d.ts

@@ -0,0 +1,28 @@
+import { CalendarEvent, CalendarEventCategory, CalendarEventTemplate } from '../../@Types/CalendarFormStep';
+/** Color base por categoría (paleta del app; navy = primario, coral = acento). */
+export declare const CATEGORY_COLORS: Record<CalendarEventCategory, string>;
+export declare const CATEGORY_LABELS: Record<CalendarEventCategory, string>;
+export declare function isAvailability(category: CalendarEventCategory): boolean;
+export declare function parseTime(hhmm: string): {
+    h: number;
+    m: number;
+};
+export declare function toMinutes(hhmm: string): number;
+export declare function minutesToHHMM(mins: number): string;
+/** "2026-07-14T09:30:00" → "09:30" */
+export declare function isoToHHMM(iso: string): string;
+/** Compone el ISO en hora local (sin corrimiento de zona horaria). */
+export declare function dateAndTimeToISO(date: Date, hhmm: string): string;
+/** Interpreta el ISO como hora local (sin corrimiento de zona horaria). */
+export declare function isoToDate(iso: string): Date;
+export declare function newEventId(): string;
+/**
+ * Si el evento ocurre en `day`, considerando su recurrencia RRULE (RFC 5545 —
+ * el mismo estándar de Google/Outlook/iCal). Soporta:
+ * - `FREQ=DAILY` (+ INTERVAL)
+ * - `FREQ=WEEKLY` (+ INTERVAL, BYDAY — ej: `BYDAY=MO,TU,WE,TH,FR` = días hábiles)
+ * - `FREQ=MONTHLY` (+ INTERVAL, mismo día del mes que el inicio)
+ */
+export declare function occursOnDay(event: CalendarEvent, day: Date): boolean;
+export declare function eventColor(event: CalendarEvent, templates?: CalendarEventTemplate[]): string;
+export declare function eventLabel(event: CalendarEvent, templates?: CalendarEventTemplate[]): string;

package/dist/Shared/ErkCalendar/CalendarFunctions.js

@@ -0,0 +1,121 @@
+import { differenceInCalendarDays, differenceInCalendarMonths, differenceInCalendarWeeks, format, isSameDay, startOfDay, } from 'date-fns';
+import { CalendarEventCategory, } from '../../@Types/CalendarFormStep';
+/** Color base por categoría (paleta del app; navy = primario, coral = acento). */
+export const CATEGORY_COLORS = {
+    [CalendarEventCategory.WORKING]: '#3d5a7f',
+    [CalendarEventCategory.PHYSICAL]: '#2e9367',
+    [CalendarEventCategory.VIRTUAL]: '#7b5ea7',
+    [CalendarEventCategory.SPECIFIC]: '#ee6c4d',
+    [CalendarEventCategory.MEETING]: '#d9822b',
+    [CalendarEventCategory.BUSY]: '#98a2b3',
+    [CalendarEventCategory.CUSTOM]: '#607d8b',
+};
+export const CATEGORY_LABELS = {
+    [CalendarEventCategory.WORKING]: 'Laboral',
+    [CalendarEventCategory.PHYSICAL]: 'Presencial',
+    [CalendarEventCategory.VIRTUAL]: 'Virtual',
+    [CalendarEventCategory.SPECIFIC]: 'Específico',
+    [CalendarEventCategory.MEETING]: 'Reunión',
+    [CalendarEventCategory.BUSY]: 'Ocupado',
+    [CalendarEventCategory.CUSTOM]: 'Personalizado',
+};
+/**
+ * Categorías que definen ventanas de disponibilidad: se pintan como franja rayada
+ * de fondo (se puede agendar encima), no como bloques sólidos.
+ */
+const AVAILABILITY_CATEGORIES = new Set([
+    CalendarEventCategory.WORKING,
+    CalendarEventCategory.PHYSICAL,
+    CalendarEventCategory.VIRTUAL,
+    CalendarEventCategory.SPECIFIC,
+]);
+export function isAvailability(category) {
+    return AVAILABILITY_CATEGORIES.has(category);
+}
+export function parseTime(hhmm) {
+    const [h, m] = hhmm.split(':').map(Number);
+    return { h: h ?? 0, m: m ?? 0 };
+}
+export function toMinutes(hhmm) {
+    const { h, m } = parseTime(hhmm);
+    return h * 60 + m;
+}
+export function minutesToHHMM(mins) {
+    const h = Math.floor(mins / 60);
+    const m = mins % 60;
+    return `${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}`;
+}
+/** "2026-07-14T09:30:00" → "09:30" */
+export function isoToHHMM(iso) {
+    return iso.slice(11, 16);
+}
+/** Compone el ISO en hora local (sin corrimiento de zona horaria). */
+export function dateAndTimeToISO(date, hhmm) {
+    const { h, m } = parseTime(hhmm);
+    const d = new Date(date);
+    d.setHours(h, m, 0, 0);
+    return `${format(d, 'yyyy-MM-dd')}T${format(d, 'HH:mm:ss')}`;
+}
+/** Interpreta el ISO como hora local (sin corrimiento de zona horaria). */
+export function isoToDate(iso) {
+    const [datePart, timePart] = iso.slice(0, 19).split('T');
+    const [y, mo, d] = datePart.split('-').map(Number);
+    const { h, m } = parseTime(timePart ?? '00:00');
+    return new Date(y, (mo ?? 1) - 1, d ?? 1, h, m, 0, 0);
+}
+export function newEventId() {
+    return `evt-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`;
+}
+/** Códigos de día RFC 5545 indexados por `Date.getDay()`. */
+const RRULE_DAY_CODES = ['SU', 'MO', 'TU', 'WE', 'TH', 'FR', 'SA'];
+/**
+ * Si el evento ocurre en `day`, considerando su recurrencia RRULE (RFC 5545 —
+ * el mismo estándar de Google/Outlook/iCal). Soporta:
+ * - `FREQ=DAILY` (+ INTERVAL)
+ * - `FREQ=WEEKLY` (+ INTERVAL, BYDAY — ej: `BYDAY=MO,TU,WE,TH,FR` = días hábiles)
+ * - `FREQ=MONTHLY` (+ INTERVAL, mismo día del mes que el inicio)
+ */
+export function occursOnDay(event, day) {
+    const start = isoToDate(event.start);
+    if (isSameDay(start, day))
+        return true;
+    if (!event.recurrence)
+        return false;
+    if (startOfDay(day) < startOfDay(start))
+        return false;
+    const rule = event.recurrence;
+    const interval = /INTERVAL=(\d+)/.exec(rule);
+    const every = interval ? parseInt(interval[1], 10) : 1;
+    if (rule.includes('FREQ=DAILY')) {
+        return differenceInCalendarDays(day, start) % every === 0;
+    }
+    if (rule.includes('FREQ=WEEKLY')) {
+        const byday = /BYDAY=([A-Z,]+)/.exec(rule);
+        if (byday) {
+            if (!byday[1].split(',').includes(RRULE_DAY_CODES[day.getDay()]))
+                return false;
+        }
+        else if (day.getDay() !== start.getDay()) {
+            return false;
+        }
+        return differenceInCalendarWeeks(day, start, { weekStartsOn: 1 }) % every === 0;
+    }
+    if (rule.includes('FREQ=MONTHLY')) {
+        if (day.getDate() !== start.getDate())
+            return false;
+        return differenceInCalendarMonths(day, start) % every === 0;
+    }
+    return false;
+}
+export function eventColor(event, templates) {
+    if (event.color)
+        return event.color;
+    const template = templates?.find((t) => t.id === event.eventTemplateId);
+    return template?.color ?? CATEGORY_COLORS[event.category];
+}
+export function eventLabel(event, templates) {
+    if (event.title)
+        return event.title;
+    const template = templates?.find((t) => t.id === event.eventTemplateId);
+    return template?.name ?? CATEGORY_LABELS[event.category];
+}

package/dist/Shared/ErkCalendar/CalendarPopovers.d.ts

@@ -0,0 +1,45 @@
+import { CalendarEvent, CalendarEventCategory, CalendarEventTemplate } from '../../@Types/CalendarFormStep';
+export interface CalendarCreateState {
+    anchorEl: HTMLElement;
+    date: Date;
+    /** Hora de inicio sugerida en formato HH:mm (según dónde se hizo clic). */
+    startHHMM: string;
+    /** Hora de fin sugerida en formato HH:mm. */
+    endHHMM: string;
+}
+interface CalendarCreatePopoverProps {
+    state: CalendarCreateState;
+    /** Categorías de disponibilidad permitidas (laboral/presencial/virtual). */
+    availabilityCategories: CalendarEventCategory[];
+    /** Categorías de evento permitidas (reunión/ocupado/personalizado). */
+    eventCategories: CalendarEventCategory[];
+    /** Plantillas de la organización: las `bookable` son tipos de espacio agendable. */
+    eventTemplates?: CalendarEventTemplate[];
+    allowRecurring: boolean;
+    allowAllDay: boolean;
+    onClose: () => void;
+    onCreate: (event: CalendarEvent) => void;
+}
+/**
+ * Popover anclado al slot clickeado, con dos modos:
+ * - Disponibilidad: crea ventanas agendables — "estoy libre para que me agenden"
+ *   (general/presencial/virtual, o un tipo de espacio de la organización).
+ * - Evento: reuniones, bloqueos y eventos personalizados.
+ */
+export declare function CalendarCreatePopover({ state, availabilityCategories, eventCategories, eventTemplates, allowRecurring, allowAllDay, onClose, onCreate, }: CalendarCreatePopoverProps): JSX.Element;
+export interface CalendarDetailState {
+    anchorEl: HTMLElement;
+    event: CalendarEvent;
+    /** Si el evento es del calendario propio (editable) o de una fuente compartida. */
+    own: boolean;
+}
+interface CalendarDetailPopoverProps {
+    state: CalendarDetailState;
+    eventTemplates?: CalendarEventTemplate[];
+    readOnly: boolean;
+    onClose: () => void;
+    onDelete: (id: string) => void;
+}
+/** Detalle de un evento: cuándo, categoría, notas y acciones. */
+export declare function CalendarDetailPopover({ state, eventTemplates, readOnly, onClose, onDelete, }: CalendarDetailPopoverProps): JSX.Element;
+export {};

package/dist/Shared/ErkCalendar/CalendarPopovers.js

@@ -0,0 +1,110 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Popover } from '@mui/material';
+import { format } from 'date-fns';
+import { es } from 'date-fns/locale';
+import { CalendarEventCategory, } from '../../@Types/CalendarFormStep';
+import ErkButton from '../ErkButton/ErkButton';
+import ErkTextField from '../ErkTextField/ErkTextField';
+import { CATEGORY_COLORS, CATEGORY_LABELS, dateAndTimeToISO, eventColor, eventLabel, isoToDate, isoToHHMM, newEventId, } from './CalendarFunctions';
+import styles from './ErkCalendar.module.css';
+/** L–V: el patrón "días hábiles" en RRULE estándar. */
+const BUSINESS_DAYS_RRULE = 'FREQ=WEEKLY;BYDAY=MO,TU,WE,TH,FR';
+const EVENT_RECURRENCE = [
+    { label: 'No se repite' },
+    { label: 'Cada semana', rrule: 'FREQ=WEEKLY' },
+    { label: 'Cada 2 semanas', rrule: 'FREQ=WEEKLY;INTERVAL=2' },
+];
+const AVAILABILITY_RECURRENCE = [
+    { label: 'Solo este día' },
+    { label: 'Cada día hábil (L–V)', rrule: BUSINESS_DAYS_RRULE },
+    { label: 'Cada semana', rrule: 'FREQ=WEEKLY' },
+    { label: 'Cada 2 semanas', rrule: 'FREQ=WEEKLY;INTERVAL=2' },
+];
+/** Etiqueta del chip de disponibilidad general (WORKING se lee mejor como "General"). */
+const AVAILABILITY_CHIP_LABELS = {
+    [CalendarEventCategory.WORKING]: 'General',
+};
+function capitalize(text) {
+    return text.charAt(0).toUpperCase() + text.slice(1);
+}
+function toInvalidRange(start, end) {
+    return !start || !end || end <= start;
+}
+/**
+ * Popover anclado al slot clickeado, con dos modos:
+ * - Disponibilidad: crea ventanas agendables — "estoy libre para que me agenden"
+ *   (general/presencial/virtual, o un tipo de espacio de la organización).
+ * - Evento: reuniones, bloqueos y eventos personalizados.
+ */
+export function CalendarCreatePopover({ state, availabilityCategories, eventCategories, eventTemplates, allowRecurring, allowAllDay, onClose, onCreate, }) {
+    const bookableTemplates = eventTemplates?.filter((t) => t.bookable) ?? [];
+    const otherTemplates = eventTemplates?.filter((t) => !t.bookable) ?? [];
+    const hasAvailability = availabilityCategories.length > 0 || bookableTemplates.length > 0;
+    const hasEvents = eventCategories.length > 0 || otherTemplates.length > 0;
+    const [mode, setMode] = useState(hasAvailability ? 'AVAILABILITY' : 'EVENT');
+    const [category, setCategory] = useState(availabilityCategories[0] ?? eventCategories[0] ?? CalendarEventCategory.WORKING);
+    const [templateId, setTemplateId] = useState(undefined);
+    const [title, setTitle] = useState('');
+    const [start, setStart] = useState(state.startHHMM);
+    const [end, setEnd] = useState(state.endHHMM);
+    const [allDay, setAllDay] = useState(false);
+    const [recurrence, setRecurrence] = useState(undefined);
+    const isAvailabilityMode = mode === 'AVAILABILITY';
+    const categoryOptions = isAvailabilityMode ? availabilityCategories : eventCategories;
+    const templateOptions = isAvailabilityMode ? bookableTemplates : otherTemplates;
+    const recurrenceOptions = isAvailabilityMode ? AVAILABILITY_RECURRENCE : EVENT_RECURRENCE;
+    const needsTitle = !isAvailabilityMode &&
+        !templateId &&
+        (category === CalendarEventCategory.MEETING || category === CalendarEventCategory.CUSTOM);
+    const activeColor = templateId
+        ? (eventTemplates?.find((t) => t.id === templateId)?.color ?? CATEGORY_COLORS[category])
+        : CATEGORY_COLORS[category];
+    const switchMode = (next) => {
+        setMode(next);
+        setTemplateId(undefined);
+        setCategory(next === 'AVAILABILITY'
+            ? (availabilityCategories[0] ?? CalendarEventCategory.WORKING)
+            : (eventCategories[0] ?? CalendarEventCategory.MEETING));
+        setRecurrence(undefined);
+    };
+    const pickCategory = (cat) => {
+        setCategory(cat);
+        setTemplateId(undefined);
+    };
+    const pickTemplate = (template) => {
+        setTemplateId(template.id);
+        setCategory(template.category);
+    };
+    const create = () => {
+        if (!allDay && toInvalidRange(start, end))
+            return;
+        onCreate({
+            id: newEventId(),
+            category,
+            eventTemplateId: templateId,
+            title: title || undefined,
+            start: dateAndTimeToISO(state.date, allDay ? '00:00' : start),
+            end: dateAndTimeToISO(state.date, allDay ? '23:59' : end),
+            isAllDay: allDay || undefined,
+            recurrence,
+        });
+    };
+    return (_jsxs(Popover, { open: true, anchorEl: state.anchorEl, onClose: onClose, anchorOrigin: { vertical: 'top', horizontal: 'right' }, transformOrigin: { vertical: 'top', horizontal: 'left' }, slotProps: { paper: { className: styles.pop } }, children: [_jsxs("div", { className: styles.popHead, children: [_jsx("span", { className: styles.popBar, style: { backgroundColor: activeColor } }), _jsxs("div", { children: [_jsx("h4", { className: styles.popTitle, children: isAvailabilityMode ? 'Nueva disponibilidad' : 'Nuevo evento' }), _jsx("span", { className: styles.popWhen, children: capitalize(format(state.date, 'EEE d MMM', { locale: es })) })] })] }), hasAvailability && hasEvents && (_jsxs("div", { className: styles.tabs, children: [_jsx("button", { type: "button", className: isAvailabilityMode ? `${styles.tab} ${styles.tabOn}` : styles.tab, onClick: () => switchMode('AVAILABILITY'), children: "Disponibilidad" }), _jsx("button", { type: "button", className: !isAvailabilityMode ? `${styles.tab} ${styles.tabOn}` : styles.tab, onClick: () => switchMode('EVENT'), children: "Evento" })] })), _jsxs("div", { className: styles.popBody, children: [isAvailabilityMode && (_jsx("p", { className: styles.popHint, children: "Estos espacios quedan libres para que te agenden citas." })), _jsxs("div", { className: styles.field, children: [_jsx("span", { className: styles.fieldLabel, children: isAvailabilityMode ? 'Disponible para' : 'Categoría' }), _jsxs("div", { className: styles.catRow, children: [categoryOptions.map((cat) => (_jsxs("button", { type: "button", className: !templateId && category === cat
+                                            ? `${styles.catChip} ${styles.catChipOn}`
+                                            : styles.catChip, onClick: () => pickCategory(cat), children: [_jsx("span", { className: styles.catDot, style: { backgroundColor: CATEGORY_COLORS[cat] } }), isAvailabilityMode
+                                                ? (AVAILABILITY_CHIP_LABELS[cat] ?? CATEGORY_LABELS[cat])
+                                                : CATEGORY_LABELS[cat]] }, cat))), templateOptions.map((template) => (_jsxs("button", { type: "button", className: templateId === template.id
+                                            ? `${styles.catChip} ${styles.catChipOn}`
+                                            : styles.catChip, onClick: () => pickTemplate(template), children: [_jsx("span", { className: styles.catDot, style: {
+                                                    backgroundColor: template.color ?? CATEGORY_COLORS[template.category],
+                                                } }), template.name] }, template.id)))] })] }), !isAvailabilityMode && (_jsx(ErkTextField, { label: needsTitle ? 'Título' : 'Título (opcional)', value: title, onChange: setTitle, placeholder: needsTitle ? 'Ej: Standup, Visita cliente…' : CATEGORY_LABELS[category], autoFocus: needsTitle })), allowAllDay && (_jsxs("label", { className: styles.checkRow, children: [_jsx("input", { type: "checkbox", checked: allDay, onChange: (e) => setAllDay(e.target.checked) }), "Todo el d\u00EDa"] })), !allDay && (_jsxs("div", { className: styles.timeRow, children: [_jsxs("label", { className: styles.field, children: [_jsx("span", { className: styles.fieldLabel, children: "Inicio" }), _jsx("input", { type: "time", className: styles.timeInput, value: start, onChange: (e) => setStart(e.target.value) })] }), _jsx("span", { className: styles.timeDash, children: "\u2013" }), _jsxs("label", { className: styles.field, children: [_jsx("span", { className: styles.fieldLabel, children: "Fin" }), _jsx("input", { type: "time", className: styles.timeInput, value: end, onChange: (e) => setEnd(e.target.value) })] })] })), allowRecurring && (_jsxs("label", { className: styles.field, children: [_jsx("span", { className: styles.fieldLabel, children: "Repetir" }), _jsx("select", { className: styles.selectInput, value: recurrence ?? '', onChange: (e) => setRecurrence(e.target.value || undefined), children: recurrenceOptions.map((opt) => (_jsx("option", { value: opt.rrule ?? '', children: opt.label }, opt.label))) })] }))] }), _jsxs("div", { className: styles.popActions, children: [_jsx(ErkButton, { text: isAvailabilityMode ? 'Crear disponibilidad' : 'Crear evento', disabled: (!allDay && toInvalidRange(start, end)) || (needsTitle && !title), onClick: create }), _jsx(ErkButton, { text: "Cancelar", variant: "outlined", onClick: onClose })] })] }));
+}
+/** Detalle de un evento: cuándo, categoría, notas y acciones. */
+export function CalendarDetailPopover({ state, eventTemplates, readOnly, onClose, onDelete, }) {
+    const { event } = state;
+    const day = isoToDate(event.start);
+    return (_jsxs(Popover, { open: true, anchorEl: state.anchorEl, onClose: onClose, anchorOrigin: { vertical: 'top', horizontal: 'right' }, transformOrigin: { vertical: 'top', horizontal: 'left' }, slotProps: { paper: { className: styles.pop } }, children: [_jsxs("div", { className: styles.popHead, children: [_jsx("span", { className: styles.popBar, style: { backgroundColor: eventColor(event, eventTemplates) } }), _jsxs("div", { children: [_jsx("h4", { className: styles.popTitle, children: eventLabel(event, eventTemplates) }), _jsxs("span", { className: styles.popWhen, children: [capitalize(format(day, 'EEE d MMM', { locale: es })), " \u00B7", ' ', event.isAllDay
+                                        ? 'Todo el día'
+                                        : `${isoToHHMM(event.start)} – ${isoToHHMM(event.end)}`, event.recurrence ? ' · se repite' : ''] })] })] }), _jsxs("div", { className: styles.popBody, children: [_jsx("span", { className: styles.detailChip, style: { color: eventColor(event, eventTemplates) }, children: CATEGORY_LABELS[event.category] }), event.notes && _jsx("p", { className: styles.detailNotes, children: event.notes })] }), !readOnly && (_jsxs("div", { className: styles.popActions, children: [_jsx(ErkButton, { text: "Eliminar", color: "error", variant: "outlined", onClick: () => onDelete(event.id) }), _jsx(ErkButton, { text: "Cerrar", variant: "outlined", onClick: onClose })] }))] }));
+}