@arquimedes.co/eureka-forms 3.0.50-test → 3.0.52-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/ErkAutocompleteOption.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Option element for the searchable `ErkSmartSelect` (MUI `Autocomplete`). Replaces MUI `MenuItem`
+ * in `renderOption`: v9's `MenuItem` requires a surrounding `MenuList` context (it throws without
+ * one), but an Autocomplete's listbox is a plain `<ul>`, so a styled `<li>` is used instead.
+ * Hover/focus styling comes from MUI's own `.Erk-MuiAutocomplete-option` rules (the option props
+ * carry that class); this just ports the `ErkMenuItem` look (padding, wrapping, leading-icon layout)
+ * and the selected background.
+ */
+declare const ErkAutocompleteOption: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+    selected?: boolean;
+}, import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, {}>;
+export default ErkAutocompleteOption;

package/dist/Shared/ErkAutocompleteOption.js

@@ -0,0 +1,37 @@
+import { styled } from '@mui/material';
+/**
+ * Option element for the searchable `ErkSmartSelect` (MUI `Autocomplete`). Replaces MUI `MenuItem`
+ * in `renderOption`: v9's `MenuItem` requires a surrounding `MenuList` context (it throws without
+ * one), but an Autocomplete's listbox is a plain `<ul>`, so a styled `<li>` is used instead.
+ * Hover/focus styling comes from MUI's own `.Erk-MuiAutocomplete-option` rules (the option props
+ * carry that class); this just ports the `ErkMenuItem` look (padding, wrapping, leading-icon layout)
+ * and the selected background.
+ */
+const ErkAutocompleteOption = styled('li', {
+    // `ownerState` is injected by MUI v9 into the option props (spread here via Autocomplete's
+    // renderOption); a custom shouldForwardProp drops MUI's default exclusion, so filter it too or it
+    // leaks onto the <li> (React "unrecognized prop" warning).
+    shouldForwardProp: (prop) => prop !== 'selected' && prop !== 'ownerState',
+})(({ theme, selected }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    position: 'relative',
+    listStyle: 'none',
+    padding: '6px 12px',
+    whiteSpace: 'normal',
+    cursor: 'pointer',
+    backgroundColor: selected ? theme.palette.action.selected : undefined,
+    '&:has(.ErkIcon)': {
+        paddingLeft: '40px',
+        '& .ErkIcon': {
+            left: 12,
+            top: '50%',
+            position: 'absolute',
+            transform: 'translateY(-50%)',
+            fill: theme.palette.primary.main,
+            width: '20px',
+            height: '20px',
+        },
+    },
+}));
+export default ErkAutocompleteOption;

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

@@ -0,0 +1,28 @@
+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 reutilizable en una sola vista (persona · día · hora), con panel
+ * de resumen a la izquierda y barra de confirmación. Réplica del diseño del mockup.
+ */
+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,149 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useState } from 'react';
+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 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',
+};
+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 reutilizable en una sola vista (persona · día · hora), con panel
+ * de resumen a la izquierda y barra de confirmación. Réplica del diseño del mockup.
+ */
+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 [person, setPerson] = useState(undefined);
+    const [personTouched, setPersonTouched] = useState(false);
+    const [date, setDate] = useState(today);
+    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 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)
+            return;
+        if (needsPerson && !personsOptional && !personTouched)
+            return;
+        void loadSlots(date, person?.id);
+    }, [value, needsPerson, personsOptional, personTouched, date, person, loadSlots]);
+    const confirm = () => {
+        if (!slot)
+            return;
+        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);
+        setPerson(undefined);
+        setPersonTouched(false);
+        setSlot(undefined);
+        setContactName('');
+        setContactEmail('');
+    };
+    const pickPerson = (p) => {
+        setPerson(p);
+        setPersonTouched(true);
+        setSlot(undefined);
+    };
+    // Read-only / already booked → compact summary
+    if (readOnly || value) {
+        return (_jsx("div", { className: styles.container, children: _jsxs("div", { className: styles.booked, children: [_jsx("div", { className: styles.bookedIcon, children: "\u2713" }), _jsxs("div", { className: styles.bookedInfo, children: [_jsx("span", { className: styles.bookedLabel, 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("button", { type: "button", className: styles.changeBtn, onClick: reset, children: "Cambiar" }))] }) }));
+    }
+    // Stepper state
+    const steps = [...(needsPerson ? ['Persona'] : []), 'Día y hora', 'Confirmar'];
+    const current = needsPerson && !personTouched ? 0 : slot ? steps.length - 1 : needsPerson ? 1 : 0;
+    return (_jsxs("div", { className: styles.container, children: [_jsxs("div", { className: styles.card, children: [_jsxs("div", { className: 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' }), person && (_jsx("button", { type: "button", className: styles.change, onClick: () => pickPerson(undefined), children: "Cambiar persona" }))] })] }), _jsxs("div", { className: styles.meta, children: [_jsx("span", { className: styles.metaLbl, children: "Detalles" }), _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] })] }))] }), !!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("div", { className: styles.stepper, children: steps.map((s, i) => (_jsxs("span", { className: styles.stepGroup, children: [_jsxs("span", { className: i < current
+                                                        ? `${styles.stepItem} ${styles.stepDone}`
+                                                        : i === current
+                                                            ? `${styles.stepItem} ${styles.stepOn}`
+                                                            : styles.stepItem, children: [_jsx("span", { className: styles.stepNum, children: i < current ? '✓' : i + 1 }), s] }), i < steps.length - 1 && _jsx("span", { className: styles.stepSep })] }, s))) }), needsPerson && (_jsxs(_Fragment, { children: [_jsx("p", { className: styles.blockLbl, children: "\u00BFCon qui\u00E9n quieres agendar?" }), _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 })] })] }, 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" })] })] }))] })] })), _jsxs("div", { className: styles.pick, children: [_jsxs("div", { children: [_jsx("p", { className: styles.blockLbl, children: "Elige un d\u00EDa" }), _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", onClick: () => setViewMonth((m) => addMonths(m, -1)), children: "\u2039" }), _jsx("button", { type: "button", 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 = 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()));
+                                                            })] })] }), _jsxs("div", { children: [_jsx("p", { className: styles.blockLbl, children: "Horarios libres" }), _jsxs("div", { className: styles.slotsHead, children: [_jsx("b", { children: capitalize(longDate(date)) }), " \u00B7 ", 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." })) : (_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))) }))] })] })] })] }), _jsxs("div", { className: styles.confirm, children: [_jsx("div", { className: styles.selSummary, children: slot
+                                    ? [person?.name, capitalize(longDate(date)), `${slot.startTime}–${slot.endTime}`]
+                                        .filter(Boolean)
+                                        .join(' · ')
+                                    : 'Elige día y hora' }), collectContact && (_jsxs("div", { className: styles.cfields, children: [_jsx(ErkTextField, { label: "Nombre", value: contactName, onChange: setContactName }), _jsx(ErkTextField, { label: "Correo", value: contactEmail, onChange: setContactEmail })] })), _jsx("button", { type: "button", className: styles.cta, disabled: !slot, onClick: confirm, children: "Confirmar cita" })] })] }), error && _jsx("div", { className: styles.err, children: error })] }));
+}
+export default ErkBookingPicker;

package/dist/Shared/ErkBookingPicker/ErkBookingPicker.module.css

@@ -0,0 +1,113 @@
+.container { max-width: 100%; box-sizing: border-box; }
+
+.card {
+    border: 1px solid var(--eureka-outline, #d9dee6);
+    border-radius: 16px;
+    overflow: hidden;
+    background: var(--eureka-bg, #fff);
+    box-shadow: 0 12px 34px rgba(43, 65, 93, 0.08);
+}
+.book { display: grid; grid-template-columns: 290px 1fr; }
+
+/* ---------- Left: who + details ---------- */
+.who {
+    padding: 22px 20px;
+    border-right: 1px solid var(--eureka-outline, #eceff3);
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    background: color-mix(in srgb, var(--eureka-primary, #3d5a7f) 4%, #fff);
+}
+.brand { display: flex; align-items: center; gap: 11px; }
+.avatar { width: 46px; height: 46px; border-radius: 50%; background: var(--eureka-primary, #3d5a7f); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 17px; flex: none; }
+.brandName { margin: 0; font-size: 16px; font-weight: 800; color: var(--eureka-text, #22303f); }
+.brandRole { margin: 2px 0 0; font-size: 12.5px; color: #787878; }
+.change { margin-top: 2px; border: none; background: none; padding: 0; font-size: 12px; font-weight: 700; color: var(--eureka-primary, #3d5a7f); cursor: pointer; }
+.meta { display: flex; flex-direction: column; gap: 11px; }
+.metaLbl { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #9aa3b0; font-weight: 700; }
+.row { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--eureka-text, #22303f); }
+.ic { color: var(--eureka-primary, #3d5a7f); width: 16px; text-align: center; flex: none; }
+.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 20px; background: color-mix(in srgb, var(--eureka-primary, #3d5a7f) 10%, #fff); color: var(--eureka-primary, #3d5a7f); }
+.lock { margin-top: auto; font-size: 12px; color: #787878; background: #fff7ed; border: 1px solid #f4d9b0; border-radius: 9px; padding: 8px 10px; }
+.lock b { color: #b7791f; }
+
+/* ---------- Right ---------- */
+.right { padding: 18px 22px; min-width: 0; }
+
+.stepper { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #787878; margin-bottom: 16px; flex-wrap: wrap; }
+.stepGroup { display: inline-flex; align-items: center; gap: 8px; }
+.stepItem { display: inline-flex; align-items: center; gap: 7px; }
+.stepNum { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 800; background: color-mix(in srgb, var(--eureka-primary, #3d5a7f) 8%, #fff); color: #9aa3b0; }
+.stepDone { color: var(--eureka-text, #22303f); }
+.stepDone .stepNum { background: #2e9367; color: #fff; }
+.stepOn { color: var(--eureka-text, #22303f); font-weight: 700; }
+.stepOn .stepNum { background: var(--eureka-primary, #3d5a7f); color: #fff; }
+.stepSep { width: 22px; height: 1px; background: var(--eureka-outline, #d9dee6); }
+
+.blockLbl { margin: 0 0 9px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #787878; font-weight: 700; }
+
+/* persons */
+.persons { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
+.pcard { display: flex; align-items: center; gap: 10px; border: 1px solid var(--eureka-outline, #d9dee6); border-radius: 12px; padding: 8px 13px 8px 8px; background: #fff; cursor: pointer; text-align: left; min-width: 168px; }
+.pcard:hover { border-color: var(--eureka-primary, #3d5a7f); }
+.pcardOn { border-color: var(--eureka-primary, #3d5a7f); background: color-mix(in srgb, var(--eureka-primary, #3d5a7f) 8%, #fff); box-shadow: 0 0 0 3px color-mix(in srgb, var(--eureka-primary, #3d5a7f) 12%, transparent); }
+.pav { width: 34px; height: 34px; border-radius: 50%; background: #c9d4e2; color: #2b415d; display: grid; place-items: center; font-weight: 800; font-size: 13px; flex: none; }
+.pcardAny .pav { background: #eef1f6; color: var(--eureka-primary, #3d5a7f); }
+.pinfo { display: flex; flex-direction: column; }
+.pn { font-size: 13.5px; font-weight: 700; color: var(--eureka-text, #22303f); }
+.pr { font-size: 11.5px; color: #787878; }
+
+/* day (month grid) + slots */
+.pick { display: grid; grid-template-columns: 1.1fr 1fr; gap: 22px; }
+.monthHead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
+.monthTitle { font-size: 13.5px; font-weight: 700; color: var(--eureka-text, #22303f); }
+.monthNav button { border: none; background: none; color: #787878; cursor: pointer; font-size: 15px; padding: 2px 6px; border-radius: 6px; }
+.monthNav button:hover { background: color-mix(in srgb, var(--eureka-primary, #3d5a7f) 8%, #fff); }
+.mgrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; font-variant-numeric: tabular-nums; }
+.mdow { text-align: center; font-size: 10px; font-weight: 700; color: #9aa3b0; padding-bottom: 2px; }
+.mday { position: relative; aspect-ratio: 1; display: grid; place-items: center; font-size: 12.5px; border: none; background: none; border-radius: 9px; cursor: pointer; }
+.mdayFree { color: var(--eureka-text, #22303f); font-weight: 600; }
+.mdayFree::after { content: ""; position: absolute; bottom: 5px; width: 4px; height: 4px; border-radius: 50%; background: #2e9367; }
+.mdayFree:hover { background: color-mix(in srgb, var(--eureka-primary, #3d5a7f) 8%, #fff); }
+.mdayNone { color: #c8ced7; cursor: default; }
+.mdaySel { background: var(--eureka-primary, #3d5a7f); color: #fff; font-weight: 700; }
+
+.slotsHead { font-size: 12.5px; color: #787878; margin-bottom: 10px; }
+.slotsHead b { color: var(--eureka-text, #22303f); }
+.slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
+.slot { border: 1px solid var(--eureka-outline, #d9dee6); background: #fff; border-radius: 10px; padding: 9px 0; font-size: 13px; font-weight: 600; color: var(--eureka-primary, #3d5a7f); cursor: pointer; font-variant-numeric: tabular-nums; }
+.slot:hover { border-color: var(--eureka-primary, #3d5a7f); background: color-mix(in srgb, var(--eureka-primary, #3d5a7f) 7%, #fff); }
+.slotSel { background: var(--eureka-primary, #3d5a7f); color: #fff; border-color: var(--eureka-primary, #3d5a7f); }
+.slotTaken { color: #c3c9d2; border-style: dashed; cursor: not-allowed; text-decoration: line-through; }
+.empty { font-size: 13px; color: #787878; padding: 12px 0; }
+
+/* confirm bar */
+.confirm { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; padding: 16px 22px; border-top: 1px solid var(--eureka-outline, #eceff3); background: color-mix(in srgb, var(--eureka-primary, #3d5a7f) 3%, #fff); }
+.selSummary { font-size: 14px; font-weight: 700; color: var(--eureka-text, #22303f); }
+.cfields { display: flex; gap: 10px; flex: 1; min-width: 220px; }
+.cta { margin-left: auto; border: none; border-radius: 11px; padding: 11px 22px; font-size: 14px; font-weight: 800; color: #fff; background: var(--booking-accent, #c0417a); cursor: pointer; }
+.cta:hover { filter: brightness(0.95); }
+.cta:disabled { opacity: 0.45; cursor: not-allowed; }
+
+.err { font-size: 12px; color: #d0473f; margin-top: 6px; }
+
+/* booked / read-only summary */
+.booked { display: flex; align-items: center; gap: 12px; border: 1px solid var(--eureka-outline, #d9dee6); border-radius: 12px; padding: 12px 14px; background: var(--eureka-bg, #fff); }
+.bookedIcon { width: 30px; height: 30px; border-radius: 50%; background: #2e9367; color: #fff; display: grid; place-items: center; font-weight: 800; flex: none; }
+.bookedInfo { display: flex; flex-direction: column; min-width: 0; }
+.bookedLabel { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: #787878; font-weight: 700; }
+.bookedMain { font-size: 14px; font-weight: 700; color: var(--eureka-text, #22303f); }
+.changeBtn { margin-left: auto; border: 1px solid var(--eureka-outline, #d9dee6); background: #fff; border-radius: 8px; padding: 6px 12px; font-size: 12.5px; font-weight: 600; color: var(--eureka-primary, #3d5a7f); cursor: pointer; }
+
+/* responsive */
+@media (max-width: 760px) {
+    .book { grid-template-columns: 1fr; }
+    .who { border-right: none; border-bottom: 1px solid var(--eureka-outline, #eceff3); }
+    .lock { margin-top: 12px; }
+    .pick { grid-template-columns: 1fr; gap: 18px; }
+    .persons { flex-direction: column; }
+    .pcard { min-width: 0; width: 100%; }
+    .confirm { flex-direction: column; align-items: stretch; }
+    .cfields { min-width: 0; }
+    .cta { margin-left: 0; width: 100%; }
+}

package/dist/Shared/ErkDatePicker/ErkDatePicker.js

@@ -2,11 +2,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import React, { useMemo } from 'react';
 import { format as dateFnsFormat, isValid } from 'date-fns';
 import { InputAdornment, styled, Dialog as MuiDialog } from '@mui/material';
-import { MobileDatePicker as MuiDatePicker, MobileDateTimePicker as MuiDateTimePicker, DatePickerToolbar as MuiDatePickerToolbar, DateTimePickerToolbar as MuiDateTimePickerToolbar, usePickerContext, } from '@mui/x-date-pickers';
-import { PickerDay as MuiPickerDay } from '@mui/x-date-pickers/PickerDay';
+import { MobileDatePicker as MuiDatePicker, MobileDateTimePicker as MuiDateTimePicker, DatePickerToolbar as MuiDatePickerToolbar, DateTimePickerToolbar as MuiDateTimePickerToolbar, usePickerContext, PickerDay as MuiPickerDay, renderTimeViewClock, } from '@mui/x-date-pickers';
 import { StyledTextField } from '../ErkTextField/ErkTextField';
 import CalendarIcon from '../../Icons/CalendarIcon';
-import { renderTimeViewClock } from '@mui/x-date-pickers/timeViewRenderers';
 const StyledDateTimePicker = styled(MuiDateTimePicker, {
     shouldForwardProp: (propName) => propName !== 'size',
 })(({ disabled, readOnly, size }) => ({
@@ -170,13 +168,8 @@ function CustomPickerField({ error, required, helperText, size = 'small', labelM
 function CustomDatePicker({ error, required, disabled, readOnly, helperText, size = 'small', labelMargin = 5, pickTime = false, inputRef, label, 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 orientation: _orientation, ...others }) {
-    // MUI X v9 no longer forwards `required` to the field-slot label when the field is a Material
-    // TextField (the legacy `slots.field` shape used here), so the required asterisk never renders.
-    // The picker's `label` does propagate to the field via the picker context, so bake the marker
-    // into the label to keep the required indicator visible.
-    const displayLabel = required && typeof label === 'string' ? `${label} *` : label;
     if (pickTime) {
-        return (_jsx(StyledDateTimePicker, { ampm: true, size: size, reduceAnimations: true, ...others, label: displayLabel, disabled: disabled, readOnly: readOnly, defaultValue: required ? new Date() : undefined, showDaysOutsideCurrentMonth: true, slotProps: {
+        return (_jsx(StyledDateTimePicker, { ampm: true, size: size, reduceAnimations: true, ...others, label: label, disabled: disabled, readOnly: readOnly, showDaysOutsideCurrentMonth: true, slotProps: {
                 actionBar: {
                     actions: ['clear', 'accept'],
                 },
@@ -236,7 +229,7 @@ orientation: _orientation, ...others }) {
             } }));
     }
     else {
-        return (_jsx(StyledDatePicker, { ...others, label: displayLabel, size: size, reduceAnimations: true, readOnly: readOnly, disabled: disabled, defaultValue: required ? new Date() : undefined, showDaysOutsideCurrentMonth: true, views: ['year', 'month', 'day'], slotProps: {
+        return (_jsx(StyledDatePicker, { ...others, label: label, size: size, reduceAnimations: true, readOnly: readOnly, disabled: disabled, showDaysOutsideCurrentMonth: true, views: ['year', 'month', 'day'], slotProps: {
                 actionBar: {
                     actions: ['clear', 'accept'],
                 },

package/dist/Shared/ErkDatePicker/ErkDatePicker.required.test.d.ts

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