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

package/dist/@Types/AvailabilityFormStep.d.ts

@@ -3,7 +3,7 @@
  * Este archivo existe solo para compatibilidad retroactiva.
  * Usar `CalendarFormStep.ts` directamente.
  */
-export type { CalendarStep as AvailabilityStep } from './CalendarFormStep';
+export type { AvailabilityStep } from './CalendarFormStep';
 export type { CalendarValue as AvailabilityValue } from './CalendarFormStep';
 export { CalendarEventCategory as AvailabilityEventCategory } from './CalendarFormStep';
 export { CalendarDefaultView } from './CalendarFormStep';

package/dist/@Types/BookingFormStep.d.ts

@@ -117,7 +117,7 @@ export interface BookingStep extends GBaseStep {
      * se usa para filtrar los slots. Útil cuando el dueño del calendario también
      * llena el formulario y define su disponibilidad en el mismo flujo.
      */
-    calendarRef?: DynamicRef<CalendarValue, 'CALENDAR'>;
+    availabilityRef?: DynamicRef<CalendarValue, 'AVAILABILITY'>;
     size: 1 | 2 | 3 | 4;
 }
 /**

package/dist/@Types/CalendarFormStep.d.ts

@@ -1,12 +1,9 @@
 /**
- * CalendarFormStep — paso de calendario completo (powered by MUI X Scheduler).
+ * Tipos del paso AVAILABILITY (pregunta de disponibilidad) y del valor de
+ * calendario compartido con el paso BOOKING.
  *
- * Permite al usuario (el dueño del formulario o quien lo responde) gestionar
- * su calendario: definir horarios de trabajo, crear eventos nombrados, marcar
- * bloques de disponibilidad por modalidad, bloquear horas y más.
- *
- * Renombrado desde `AvailabilityFormStep`. El archivo anterior re-exporta
- * desde aquí por compatibilidad retroactiva.
+ * El calendario completo (Google-like) vive en el admin; el form solo captura
+ * ventanas de disponibilidad con `ErkAvailabilityPicker` (grid semanal compacto).
  */
 import { GBaseStep } from './GenericFormSteps';
 import FormStepTypes from '../constants/FormStepTypes';
@@ -94,11 +91,11 @@ export interface CalendarEventTemplate {
     maxConcurrentBookings?: number;
 }
 /**
- * Paso de tipo `CALENDAR`.
- * Renderiza un MUI X Scheduler completo donde el usuario gestiona su agenda.
+ * Paso de tipo `AVAILABILITY`: pregunta de disponibilidad compacta (grid
+ * semanal día × hora). Las ventanas capturadas pueden alimentar un paso BOOKING.
  */
-export interface CalendarStep extends GBaseStep {
-    type: FormStepTypes.CALENDAR;
+export interface AvailabilityStep extends GBaseStep {
+    type: FormStepTypes.AVAILABILITY;
     label: string;
     description: string | null;
     required: boolean;
@@ -208,5 +205,5 @@ export interface CalendarValue {
     /** Zona horaria en la que se capturaron los datos. */
     timezone?: string;
 }
-export type { CalendarStep as AvailabilityStep };
+export type { AvailabilityStep as CalendarStep };
 export type { CalendarValue as AvailabilityValue };

package/dist/@Types/CalendarFormStep.js

@@ -1,12 +1,9 @@
 /**
- * CalendarFormStep — paso de calendario completo (powered by MUI X Scheduler).
+ * Tipos del paso AVAILABILITY (pregunta de disponibilidad) y del valor de
+ * calendario compartido con el paso BOOKING.
  *
- * Permite al usuario (el dueño del formulario o quien lo responde) gestionar
- * su calendario: definir horarios de trabajo, crear eventos nombrados, marcar
- * bloques de disponibilidad por modalidad, bloquear horas y más.
- *
- * Renombrado desde `AvailabilityFormStep`. El archivo anterior re-exporta
- * desde aquí por compatibilidad retroactiva.
+ * El calendario completo (Google-like) vive en el admin; el form solo captura
+ * ventanas de disponibilidad con `ErkAvailabilityPicker` (grid semanal compacto).
  */
 // ===========================================================================
 // Enums

package/dist/FormSteps/AvailabilityStep/AvailabilityStep.d.ts

@@ -0,0 +1,7 @@
+import { AvailabilityStep } from '../../@Types/CalendarFormStep';
+import { StepProps } from '../Step';
+export interface AvailabilityStepProps extends StepProps {
+    step: AvailabilityStep;
+}
+declare function AvailabilityStepComponent(props: AvailabilityStepProps): JSX.Element;
+export default AvailabilityStepComponent;

package/dist/FormSteps/{CalendarStep/CalendarStep.js → AvailabilityStep/AvailabilityStep.js}

@@ -1,14 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { FormStyleTypes } from '../../constants/FormStepTypes';
-import MaterialCalendarStep from './MaterialCalendarStep/MaterialCalendarStep';
+import MaterialAvailabilityStep from './MaterialAvailabilityStep/MaterialAvailabilityStep';
 import { useAppSelector } from '../../hooks';
-function CalendarStepComponent(props) {
+function AvailabilityStepComponent(props) {
     const { formStyle } = useAppSelector((state) => state.global);
     switch (formStyle.type) {
         case FormStyleTypes.MATERIAL:
         default: {
-            return _jsx(MaterialCalendarStep, { ...props });
+            return _jsx(MaterialAvailabilityStep, { ...props });
         }
     }
 }
-export default CalendarStepComponent;
+export default AvailabilityStepComponent;

package/dist/FormSteps/AvailabilityStep/MaterialAvailabilityStep/MaterialAvailabilityStep.d.ts

@@ -0,0 +1,8 @@
+import { AvailabilityStepProps } from '../AvailabilityStep';
+/**
+ * Conector del paso AVAILABILITY: pregunta de disponibilidad compacta
+ * (grid semanal día × hora). El calendario completo vive en el admin; el form
+ * solo captura ventanas disponibles que un paso BOOKING puede consumir.
+ */
+declare function MaterialAvailabilityStep({ step, editable }: AvailabilityStepProps): JSX.Element;
+export default MaterialAvailabilityStep;

package/dist/FormSteps/{CalendarStep/MaterialCalendarStep/MaterialCalendarStep.js → AvailabilityStep/MaterialAvailabilityStep/MaterialAvailabilityStep.js}

@@ -6,11 +6,11 @@ import { selectBreakPoint, useAppSelector } from '../../../hooks';
 import { calcStepWidth } from '../../StepFunctions';
 import ErkAvailabilityPicker from '../../../Shared/ErkAvailabilityPicker/ErkAvailabilityPicker';
 /**
- * Conector del paso CALENDAR/Availability: pregunta de disponibilidad compacta
+ * Conector del paso AVAILABILITY: pregunta de disponibilidad compacta
  * (grid semanal día × hora). El calendario completo vive en el admin; el form
  * solo captura ventanas disponibles que un paso BOOKING puede consumir.
  */
-function MaterialCalendarStep({ step, editable }) {
+function MaterialAvailabilityStep({ step, editable }) {
     const currentBreakPoint = useAppSelector(selectBreakPoint);
     const { postview, formStyle } = useAppSelector((state) => state.global);
     const formCtx = useContext(FormContext);
@@ -29,4 +29,4 @@ function MaterialCalendarStep({ step, editable }) {
     });
     return (_jsx("div", { ref: ref, style: cssVars, children: _jsx(ErkAvailabilityPicker, { value: value, onChange: onChange, label: step.label, description: step.description, minTime: step.minTime, maxTime: step.maxTime, showWeekends: step.showWeekends, timezone: step.timezone, readOnly: isReadOnly, error: error?.message }) }));
 }
-export default MaterialCalendarStep;
+export default MaterialAvailabilityStep;

package/dist/FormSteps/LocationStep/MaterialLocationStep/MaterialLocationStep.js

@@ -11,7 +11,7 @@ import { validateRestrictions } from '../../../Shared/ErkLocationField/locationR
 import styles from './MaterialLocationStep.module.css';
 function MaterialLocationStep({ step, editable }) {
     const currentBreakPoint = useAppSelector(selectBreakPoint);
-    const { postview } = useAppSelector((state) => state.global);
+    const { postview, formStyle } = useAppSelector((state) => state.global);
     const form = useContext(FormContext);
     const isReadOnly = !editable || postview;
     const widthStyle = currentBreakPoint <= step.size ? '100%' : calcStepWidth(step.size, form.size);
@@ -42,6 +42,13 @@ function MaterialLocationStep({ step, editable }) {
             },
         },
     });
-    return (_jsxs("div", { className: styles.container, style: { width: widthStyle }, children: [step.label && _jsxs("div", { className: styles.label, children: [step.label, step.required && _jsx("span", { className: styles.required, children: " *" })] }), _jsx(ErkLocationField, { value: value, onChange: onChange, allowedModes: step.allowedModes, defaultMode: step.defaultMode, addressFields: step.addressFields, helperText: error?.message ?? step.description, required: step.required, error: !!error, readOnly: isReadOnly, inputRef: ref })] }));
+    return (_jsxs("div", { className: styles.container, style: {
+            width: widthStyle,
+            '--eureka-outline': formStyle.outlineColor,
+            '--eureka-primary': formStyle.primaryColor,
+            '--eureka-text': formStyle.textColor,
+            '--eureka-error': formStyle.errorColor,
+            '--eureka-bg': formStyle.standAloneBackgroundColor ?? '#fff',
+        }, children: [step.label && _jsxs("div", { className: styles.label, children: [step.label, step.required && _jsx("span", { className: styles.required, children: " *" })] }), _jsx(ErkLocationField, { value: value, onChange: onChange, allowedModes: step.allowedModes, defaultMode: step.defaultMode, addressFields: step.addressFields, helperText: error?.message ?? step.description, required: step.required, error: !!error, readOnly: isReadOnly, inputRef: ref })] }));
 }
 export default MaterialLocationStep;

package/dist/FormSteps/Step.js

@@ -27,7 +27,7 @@ import PhoneInputStep from './PhoneInputStep/PhoneInputStep';
 import LocationStepComponent from './LocationStep/LocationStep';
 import NumberStepComponent from './NumberStep/NumberStep';
 import BookingStepComponent from './BookingStep/BookingStep';
-import CalendarStepComponent from './CalendarStep/CalendarStep';
+import AvailabilityStepComponent from './AvailabilityStep/AvailabilityStep';
 function StepComponent({ step, ...props }) {
     const { postview, partial } = useAppSelector((state) => state.global);
     const { customSteps, customClientInfoStep } = useContext(CustomContext);
@@ -87,8 +87,8 @@ function StepComponent({ step, ...props }) {
         case FormStepTypes.BOOKING: {
             return _jsx(BookingStepComponent, { ...props, step: step, editable: editable });
         }
-        case FormStepTypes.CALENDAR: {
-            return _jsx(CalendarStepComponent, { ...props, step: step, editable: editable });
+        case FormStepTypes.AVAILABILITY: {
+            return _jsx(AvailabilityStepComponent, { ...props, step: step, editable: editable });
         }
         case FormStepTypes.DATEPICKER_RANGE: {
             return _jsx(DatePickerRangeStep, { ...props, step: step, editable: editable });

package/dist/Shared/ErkLocationField/ErkLocationField.d.ts

@@ -15,9 +15,10 @@ export interface ErkLocationFieldProps {
     inputRef?: React.Ref<HTMLInputElement>;
 }
 /**
- * Campo de ubicación (rehecho con Base UI). Ofrece los modos habilitados
- * (buscador de Google Places, GPS, entrada manual) y aplica la config por campo
- * (fijo / omitir) al valor resultante.
+ * Campo de ubicación: una sola fila con el buscador de direcciones (Base UI +
+ * Google Places) y botones de acción — GPS y edición manual (en modal). Al
+ * seleccionar, el campo muestra la dirección con opciones de editar/limpiar.
+ * La config por campo (fijo / omitir) se aplica a todos los modos.
  */
-declare function ErkLocationField({ value, onChange, allowedModes, defaultMode, addressFields, regionCodes, error, helperText, required, readOnly, inputRef, }: ErkLocationFieldProps): JSX.Element;
+declare function ErkLocationField({ value, onChange, allowedModes, addressFields, regionCodes, error, helperText, required, readOnly, inputRef, }: ErkLocationFieldProps): JSX.Element;
 export default ErkLocationField;

package/dist/Shared/ErkLocationField/ErkLocationField.js

@@ -1,29 +1,47 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useCallback, useState } from 'react';
+import { CircularProgress, Dialog, DialogActions, DialogContent, DialogTitle, IconButton, Tooltip } from '@mui/material';
 import { AddressFieldMode, LocationInputMode, } from '../../@Types/LocationFormStep';
 import ErkAddressAutocomplete from '../ErkAddressAutocomplete/ErkAddressAutocomplete';
 import { reverseGeocode } from '../ErkAddressAutocomplete/googlePlaces';
-import { ADDRESS_FIELDS, applyAddressFields, fieldConfig } from './addressFields';
+import { applyAddressFields, fieldConfig } from './addressFields';
 import ErkTextField from '../ErkTextField/ErkTextField';
 import ErkButton from '../ErkButton/ErkButton';
 import LocationIcon from '../../Icons/LocationIcon';
+import EditIcon from '../../Icons/EditIcon';
+import CloseIcon from '../../Icons/CloseIcon';
 import styles from './ErkLocationField.module.css';
-const MODE_LABELS = {
-    [LocationInputMode.GOOGLE_PLACES]: 'Buscar',
-    [LocationInputMode.GPS]: 'Mi ubicación',
-    [LocationInputMode.MANUAL]: 'Manual',
-};
+/** Claves que el formulario manual exige (si no están omitidas ni fijas). */
+const MANUAL_REQUIRED_KEYS = ['street', 'city', 'country'];
+/** Dirección legible a partir del desglose, en el orden natural de una dirección. */
+function composeAddress(detail) {
+    return [
+        detail.street,
+        detail.streetNumber,
+        detail.unit ? `Apto/Int ${detail.unit}` : '',
+        detail.neighborhood,
+        detail.city,
+        detail.state,
+        detail.country,
+    ]
+        .filter(Boolean)
+        .join(', ');
+}
 /**
- * Campo de ubicación (rehecho con Base UI). Ofrece los modos habilitados
- * (buscador de Google Places, GPS, entrada manual) y aplica la config por campo
- * (fijo / omitir) al valor resultante.
+ * Campo de ubicación: una sola fila con el buscador de direcciones (Base UI +
+ * Google Places) y botones de acción — GPS y edición manual (en modal). Al
+ * seleccionar, el campo muestra la dirección con opciones de editar/limpiar.
+ * La config por campo (fijo / omitir) se aplica a todos los modos.
  */
-function ErkLocationField({ value, onChange, allowedModes, defaultMode, addressFields, regionCodes = ['co'], error = false, helperText, required = false, readOnly = false, inputRef, }) {
+function ErkLocationField({ value, onChange, allowedModes, addressFields, regionCodes = ['co'], error = false, helperText, required = false, readOnly = false, inputRef, }) {
     const apiKey = import.meta.env.VITE_GOOGLE_MAPS_API_KEY ?? '';
-    const initialMode = defaultMode && allowedModes.includes(defaultMode) ? defaultMode : allowedModes[0];
-    const [mode, setMode] = useState(initialMode);
+    const canGoogle = allowedModes.includes(LocationInputMode.GOOGLE_PLACES);
+    const canGps = allowedModes.includes(LocationInputMode.GPS);
+    const canManual = allowedModes.includes(LocationInputMode.MANUAL);
     const [gpsLoading, setGpsLoading] = useState(false);
     const [gpsError, setGpsError] = useState(null);
+    const [manualOpen, setManualOpen] = useState(false);
+    const [manualDetail, setManualDetail] = useState({});
     const handleGoogle = useCallback((resolved) => {
         onChange({ ...resolved, addressDetail: applyAddressFields(resolved.addressDetail ?? {}, addressFields) });
     }, [onChange, addressFields]);
@@ -48,26 +66,60 @@ function ErkLocationField({ value, onChange, allowedModes, defaultMode, addressF
                 });
             })
                 .finally(() => setGpsLoading(false));
-        }, () => {
-            setGpsError('No se pudo obtener la ubicación.');
+        }, (err) => {
+            let message = 'No se pudo obtener la ubicación GPS.';
+            if (err.code === err.PERMISSION_DENIED) {
+                message =
+                    'Permiso denegado para acceder a la ubicación. Asegúrate de habilitar los permisos en tu navegador y en los Ajustes del Sistema (Privacidad y seguridad > Localización).';
+            }
+            else if (err.code === err.TIMEOUT) {
+                message =
+                    'Tiempo de espera agotado al obtener la ubicación. Si estás en Mac, asegúrate de activar el Wi-Fi para ayudar a la localización, o introduce la dirección manualmente.';
+            }
+            setGpsError(message);
             setGpsLoading(false);
         }, { enableHighAccuracy: false, timeout: 15000, maximumAge: 300000 });
     }, [apiKey, onChange, addressFields]);
-    const updateManualField = useCallback((key, text) => {
-        const base = value?.source === LocationInputMode.MANUAL ? (value.addressDetail ?? {}) : {};
-        const nextDetail = applyAddressFields({ ...base, [key]: text || undefined }, addressFields);
-        const address = ADDRESS_FIELDS.map(({ key: k }) => nextDetail[k])
-            .filter(Boolean)
-            .join(', ');
-        onChange({ source: LocationInputMode.MANUAL, address, addressDetail: nextDetail });
-    }, [value, onChange, addressFields]);
-    const manualDetail = value?.source === LocationInputMode.MANUAL ? (value.addressDetail ?? {}) : {};
-    return (_jsxs("div", { className: styles.container, children: [allowedModes.length > 1 && (_jsx("div", { className: styles.modeSwitch, children: allowedModes.map((m) => (_jsx(ErkButton, { color: m === mode ? 'primary' : 'secondary', disabled: readOnly, onClick: () => setMode(m), children: MODE_LABELS[m] }, m))) })), mode === LocationInputMode.GOOGLE_PLACES && (_jsx(ErkAddressAutocomplete, { value: value, onChange: handleGoogle, regionCodes: regionCodes, error: error, required: required, readOnly: readOnly, inputRef: inputRef })), mode === LocationInputMode.GPS && (_jsxs(ErkButton, { color: "primary", loading: gpsLoading, disabled: readOnly, onClick: handleGps, children: [_jsx(LocationIcon, { fill: "currentColor" }), " Usar mi ubicaci\u00F3n actual"] })), mode === LocationInputMode.MANUAL && (_jsx("div", { className: styles.manualGrid, children: ADDRESS_FIELDS.map(({ key, label }) => {
-                    const config = fieldConfig(addressFields, key);
-                    if (config.mode === AddressFieldMode.OMIT)
-                        return null;
-                    const fixed = config.mode === AddressFieldMode.FIXED;
-                    return (_jsx(ErkTextField, { label: fixed ? `${label} (fijo)` : label, value: fixed ? (config.fixedValue ?? '') : (manualDetail[key] ?? ''), readOnly: fixed || readOnly, onChange: (text) => updateManualField(key, text) }, key));
-                }) })), (gpsError ?? helperText) && (_jsx("div", { className: error || gpsError ? styles.errorText : styles.helperText, children: gpsError ?? helperText }))] }));
+    const openManual = useCallback(() => {
+        setManualDetail(value?.addressDetail ?? {});
+        setManualOpen(true);
+    }, [value]);
+    const manualFieldValue = useCallback((key) => {
+        const config = fieldConfig(addressFields, key);
+        if (config.mode === AddressFieldMode.FIXED)
+            return config.fixedValue ?? '';
+        return manualDetail[key] ?? '';
+    }, [addressFields, manualDetail]);
+    const canSaveManual = MANUAL_REQUIRED_KEYS.every((key) => {
+        const config = fieldConfig(addressFields, key);
+        if (config.mode === AddressFieldMode.OMIT)
+            return true;
+        if (config.mode === AddressFieldMode.FIXED)
+            return !!config.fixedValue;
+        return !!manualDetail[key];
+    });
+    const saveManual = () => {
+        if (!canSaveManual)
+            return;
+        const detail = applyAddressFields(manualDetail, addressFields);
+        onChange({ source: LocationInputMode.MANUAL, address: composeAddress(detail), addressDetail: detail });
+        setManualOpen(false);
+    };
+    const clearValue = () => {
+        onChange(null);
+        setGpsError(null);
+    };
+    const manualField = (key, label, requiredField = false) => {
+        const config = fieldConfig(addressFields, key);
+        if (config.mode === AddressFieldMode.OMIT)
+            return null;
+        const fixed = config.mode === AddressFieldMode.FIXED;
+        return (_jsx(ErkTextField, { label: fixed ? `${label} (fijo)` : label, value: manualFieldValue(key), readOnly: fixed, required: requiredField && !fixed, onChange: (text) => setManualDetail((detail) => ({ ...detail, [key]: text || undefined })) }));
+    };
+    // Vista de solo lectura: tarjeta con el resumen de la ubicación
+    if (readOnly) {
+        return (_jsx("div", { className: styles.readOnlyContainer, children: _jsxs("div", { className: styles.readOnlyCard, children: [_jsx("div", { className: styles.readOnlyIcon, children: _jsx(LocationIcon, { fill: "var(--eureka-primary)" }) }), _jsxs("div", { className: styles.readOnlyDetails, children: [value?.name && _jsx("span", { className: styles.readOnlyName, children: value.name }), _jsx("span", { className: styles.readOnlyAddress, children: value?.address ?? 'Ubicación no proporcionada' }), value?.latitude !== undefined && value?.longitude !== undefined && (_jsxs("span", { className: styles.readOnlyCoords, children: ["Coordenadas: ", value.latitude.toFixed(6), ", ", value.longitude.toFixed(6)] }))] })] }) }));
+    }
+    return (_jsxs("div", { className: styles.container, children: [_jsx("div", { className: styles.inputRow, children: value?.address ? (_jsxs(_Fragment, { children: [_jsx("div", { className: styles.grow, children: _jsx(ErkTextField, { label: "Ubicaci\u00F3n seleccionada", value: value.address, readOnly: true, error: error, helperText: helperText, required: required, inputRef: inputRef }) }), canManual && (_jsx(Tooltip, { title: "Editar direcci\u00F3n manualmente", children: _jsx(IconButton, { "aria-label": "Editar direcci\u00F3n manualmente", className: styles.actionButton, onClick: openManual, children: _jsx(EditIcon, { fill: "currentColor" }) }) })), _jsx(Tooltip, { title: "Limpiar selecci\u00F3n", children: _jsx(IconButton, { "aria-label": "Limpiar selecci\u00F3n", className: styles.actionButton, onClick: clearValue, children: _jsx(CloseIcon, { fill: "currentColor" }) }) })] })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: styles.grow, children: canGoogle ? (_jsx(ErkAddressAutocomplete, { value: value, onChange: handleGoogle, regionCodes: regionCodes, error: error, required: required, inputRef: inputRef })) : canManual ? (_jsx(ErkTextField, { label: "Ingresa una ubicaci\u00F3n...", value: value?.address ?? '', onChange: (text) => onChange(text ? { source: LocationInputMode.MANUAL, address: text } : null), error: error, helperText: helperText, required: required, inputRef: inputRef })) : (_jsx(ErkTextField, { label: "Usa el bot\u00F3n para obtener tu ubicaci\u00F3n", value: "", readOnly: true, error: error, helperText: helperText, required: required, inputRef: inputRef })) }), canGps && (_jsx(Tooltip, { title: "Obtener ubicaci\u00F3n por GPS", children: _jsx(IconButton, { "aria-label": "Obtener ubicaci\u00F3n por GPS", className: styles.actionButton, disabled: gpsLoading, onClick: handleGps, children: gpsLoading ? _jsx(CircularProgress, { size: 18 }) : _jsx(LocationIcon, { fill: "currentColor" }) }) })), canManual && (_jsx(Tooltip, { title: "Ingresar direcci\u00F3n manualmente", children: _jsx(IconButton, { "aria-label": "Ingresar direcci\u00F3n manualmente", className: styles.actionButton, onClick: openManual, children: _jsx(EditIcon, { fill: "currentColor" }) }) }))] })) }), (gpsError ?? (!value?.address && canGoogle && helperText)) && (_jsx("div", { className: error || gpsError ? styles.errorText : styles.helperText, children: gpsError ?? helperText })), _jsxs(Dialog, { open: manualOpen, onClose: () => setManualOpen(false), maxWidth: "sm", fullWidth: true, slotProps: { paper: { className: styles.dialogPaper } }, children: [_jsx(DialogTitle, { className: styles.dialogTitle, children: "Ingresar Direcci\u00F3n" }), _jsx(DialogContent, { className: styles.dialogContent, children: _jsxs("div", { className: styles.manualGrid, children: [_jsx("div", { className: styles.manualRow, children: _jsx("div", { className: styles.col12, children: manualField('street', 'Calle / Carrera / Avenida (Línea 1)', true) }) }), _jsxs("div", { className: styles.manualRow, children: [_jsx("div", { className: styles.col6, children: manualField('streetNumber', 'Número / Portal') }), _jsx("div", { className: styles.col6, children: manualField('unit', 'Apto / Oficina / Interior') })] }), _jsxs("div", { className: styles.manualRow, children: [_jsx("div", { className: styles.col6, children: manualField('neighborhood', 'Barrio / Zona') }), _jsx("div", { className: styles.col6, children: manualField('city', 'Ciudad', true) })] }), _jsxs("div", { className: styles.manualRow, children: [_jsx("div", { className: styles.col4, children: manualField('state', 'Estado / Provincia / Dpto') }), _jsx("div", { className: styles.col4, children: manualField('postalCode', 'Código Postal') }), _jsx("div", { className: styles.col4, children: manualField('country', 'País', true) })] })] }) }), _jsxs(DialogActions, { style: { padding: '16px 0 0 0', gap: '12px' }, children: [_jsx(ErkButton, { text: "Cancelar", variant: "outlined", onClick: () => setManualOpen(false) }), _jsx(ErkButton, { text: "Guardar", variant: "contained", disabled: !canSaveManual, onClick: saveManual })] })] })] }));
 }
 export default ErkLocationField;

package/dist/Shared/ErkLocationField/ErkLocationField.module.css

@@ -1,20 +1,44 @@
 .container {
+    width: 100%;
     display: flex;
     flex-direction: column;
+    gap: 8px;
+    box-sizing: border-box;
+}
+
+.inputRow {
+    display: flex;
+    align-items: flex-start;
     gap: 10px;
     width: 100%;
 }
 
-.modeSwitch {
-    display: flex;
-    gap: 8px;
-    flex-wrap: wrap;
+.grow {
+    flex: 1;
+    min-width: 0;
 }
 
-.manualGrid {
-    display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    gap: 10px;
+.actionButton {
+    border: 1px solid var(--eureka-outline, #d9dee6) !important;
+    border-radius: 10px !important;
+    padding: 5px !important;
+    height: 33px !important;
+    width: 33px !important;
+    background-color: var(--eureka-bg, #fff) !important;
+    color: var(--eureka-text, #333) !important;
+    flex-shrink: 0;
+    transition: all 0.2s ease-in-out;
+    margin-top: 5px !important;
+}
+
+.actionButton:hover:not(:disabled) {
+    background-color: rgba(0, 0, 0, 0.04) !important;
+    border-color: var(--eureka-primary, #1976d2) !important;
+    color: var(--eureka-primary, #1976d2) !important;
+}
+
+.actionButton:disabled {
+    opacity: 0.5;
 }
 
 .helperText {
@@ -27,3 +51,103 @@
     font-size: 12px;
     color: var(--eureka-error, #e53935);
 }
+
+/* Formulario manual (modal) */
+.manualGrid {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    width: 100%;
+}
+
+.manualRow {
+    display: flex;
+    gap: 12px;
+    width: 100%;
+}
+
+.col12 {
+    width: 100%;
+}
+.col6 {
+    width: 50%;
+}
+.col4 {
+    width: 33.333%;
+}
+
+@media (max-width: 600px) {
+    .manualRow {
+        flex-direction: column;
+        gap: 12px;
+    }
+    .col6,
+    .col4 {
+        width: 100%;
+    }
+}
+
+/* Vista de solo lectura */
+.readOnlyContainer {
+    width: 100%;
+    box-sizing: border-box;
+}
+
+.readOnlyCard {
+    display: flex;
+    align-items: flex-start;
+    gap: 15px;
+    padding: 15px;
+    border: 1px solid var(--eureka-outline, #d9dee6);
+    border-radius: 10px;
+    background-color: var(--eureka-bg, #fff);
+}
+
+.readOnlyIcon {
+    flex-shrink: 0;
+    margin-top: 2px;
+    width: 24px;
+    height: 24px;
+}
+
+.readOnlyDetails {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    color: var(--eureka-text, #333);
+}
+
+.readOnlyName {
+    font-size: 1rem;
+    font-weight: 600;
+}
+
+.readOnlyAddress {
+    font-size: 0.9rem;
+}
+
+.readOnlyCoords {
+    font-size: 0.8rem;
+    opacity: 0.65;
+    font-family: monospace;
+}
+
+/* Modal de dirección manual (portal: usa fallbacks del theme del form) */
+.dialogPaper {
+    border-radius: 20px !important;
+    padding: 16px 24px;
+    background-color: var(--eureka-bg, #fff) !important;
+}
+
+.dialogTitle {
+    font-weight: 700 !important;
+    padding: 0 0 16px 0 !important;
+    color: var(--eureka-text, #333);
+    font-family: inherit !important;
+}
+
+.dialogContent {
+    padding: 16px 0 !important;
+    border-top: 1px solid var(--eureka-outline, #d9dee6);
+    border-bottom: 1px solid var(--eureka-outline, #d9dee6);
+}

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

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

package/dist/Shared/ErkLocationField/ErkLocationField.test.js

@@ -0,0 +1,82 @@
+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 ErkLocationField from './ErkLocationField';
+import MaterialProviders from '../../Utils/MaterialProviders';
+import InternalFormStyle from '../../constants/InternalFormStyle';
+import { AddressFieldMode, LocationInputMode } from '../../@Types/LocationFormStep';
+const ALL_MODES = [LocationInputMode.GOOGLE_PLACES, LocationInputMode.GPS, LocationInputMode.MANUAL];
+function renderField(props = {}) {
+    const onChange = vi.fn();
+    render(_jsx(MaterialProviders, { formStyle: InternalFormStyle, children: _jsx(ErkLocationField, { value: null, onChange: onChange, allowedModes: ALL_MODES, ...props }) }));
+    return { onChange };
+}
+describe('ErkLocationField', () => {
+    it('renders the single-row search with GPS and manual action buttons', () => {
+        renderField();
+        expect(screen.getByPlaceholderText('Buscar dirección…')).toBeInTheDocument();
+        expect(screen.getByRole('button', { name: 'Obtener ubicación por GPS' })).toBeInTheDocument();
+        expect(screen.getByRole('button', { name: 'Ingresar dirección manualmente' })).toBeInTheDocument();
+    });
+    it('saves a manual address from the dialog, composing the readable address', async () => {
+        const user = userEvent.setup();
+        const { onChange } = renderField();
+        await user.click(screen.getByRole('button', { name: 'Ingresar dirección manualmente' }));
+        expect(await screen.findByText('Ingresar Dirección')).toBeInTheDocument();
+        // Guardar bloqueado hasta llenar calle/ciudad/país
+        expect(screen.getByRole('button', { name: 'Guardar' })).toBeDisabled();
+        await user.type(screen.getByLabelText(/Calle \/ Carrera/), 'Calle 100');
+        await user.type(screen.getByLabelText(/^Ciudad/), 'Bogotá');
+        await user.type(screen.getByLabelText(/^País/), 'Colombia');
+        await user.click(screen.getByRole('button', { name: 'Guardar' }));
+        expect(onChange).toHaveBeenCalledWith({
+            source: LocationInputMode.MANUAL,
+            address: 'Calle 100, Bogotá, Colombia',
+            addressDetail: { street: 'Calle 100', city: 'Bogotá', country: 'Colombia' },
+        });
+    });
+    it('respects fixed and omitted fields in the manual dialog', async () => {
+        const user = userEvent.setup();
+        renderField({
+            addressFields: {
+                country: { mode: AddressFieldMode.FIXED, fixedValue: 'Colombia' },
+                postalCode: { mode: AddressFieldMode.OMIT },
+            },
+        });
+        await user.click(screen.getByRole('button', { name: 'Ingresar dirección manualmente' }));
+        await screen.findByText('Ingresar Dirección');
+        expect(screen.getByLabelText('País (fijo)')).toHaveValue('Colombia');
+        expect(screen.queryByLabelText('Código Postal')).not.toBeInTheDocument();
+    });
+    it('shows the selected address with edit and clear actions', async () => {
+        const user = userEvent.setup();
+        const value = {
+            source: LocationInputMode.GOOGLE_PLACES,
+            address: 'Carrera 7 # 71-21, Bogotá',
+            latitude: 4.65,
+            longitude: -74.05,
+        };
+        const { onChange } = renderField({ value });
+        expect(screen.getByDisplayValue('Carrera 7 # 71-21, Bogotá')).toBeInTheDocument();
+        expect(screen.getByRole('button', { name: 'Editar dirección manualmente' })).toBeInTheDocument();
+        await user.click(screen.getByRole('button', { name: 'Limpiar selección' }));
+        expect(onChange).toHaveBeenCalledWith(null);
+    });
+    it('renders the read-only summary card', () => {
+        renderField({
+            readOnly: true,
+            value: {
+                source: LocationInputMode.GPS,
+                name: 'Oficina',
+                address: 'Calle 93 # 12-34, Bogotá',
+                latitude: 4.678901,
+                longitude: -74.048123,
+            },
+        });
+        expect(screen.getByText('Oficina')).toBeInTheDocument();
+        expect(screen.getByText('Calle 93 # 12-34, Bogotá')).toBeInTheDocument();
+        expect(screen.getByText(/Coordenadas: 4.678901, -74.048123/)).toBeInTheDocument();
+    });
+});

package/dist/constants/FormStepTypes.d.ts

@@ -24,7 +24,7 @@ export declare enum FormStepTypes {
     API_SELECTOR = "API_SELECTOR",
     LOCATION = "LOCATION",
     NUMBER = "NUMBER",
-    CALENDAR = "CALENDAR",
+    AVAILABILITY = "AVAILABILITY",
     BOOKING = "BOOKING"
 }
 export declare enum OptionTypes {

package/dist/constants/FormStepTypes.js

@@ -27,7 +27,7 @@ export var FormStepTypes;
     FormStepTypes["API_SELECTOR"] = "API_SELECTOR";
     FormStepTypes["LOCATION"] = "LOCATION";
     FormStepTypes["NUMBER"] = "NUMBER";
-    FormStepTypes["CALENDAR"] = "CALENDAR";
+    FormStepTypes["AVAILABILITY"] = "AVAILABILITY";
     FormStepTypes["BOOKING"] = "BOOKING";
 })(FormStepTypes || (FormStepTypes = {}));
 export var OptionTypes;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@arquimedes.co/eureka-forms",
   "repository": "git://github.com/Arquimede5/Eureka-Forms.git",
-  "version":"3.0.55-new-steps",
+  "version":"3.0.57-new-steps",
   "scripts": {
     "watch": "tsgo --noEmit --watch --project tsconfig.app.json",
     "start": "vite",

package/dist/FormSteps/CalendarStep/CalendarStep.d.ts

@@ -1,7 +0,0 @@
-import { CalendarStep } from '../../@Types/CalendarFormStep';
-import { StepProps } from '../Step';
-export interface CalendarStepProps extends StepProps {
-    step: CalendarStep;
-}
-declare function CalendarStepComponent(props: CalendarStepProps): JSX.Element;
-export default CalendarStepComponent;

package/dist/FormSteps/CalendarStep/MaterialCalendarStep/MaterialCalendarStep.d.ts

@@ -1,8 +0,0 @@
-import { CalendarStepProps } from '../CalendarStep';
-/**
- * Conector del paso CALENDAR/Availability: pregunta de disponibilidad compacta
- * (grid semanal día × hora). El calendario completo vive en el admin; el form
- * solo captura ventanas disponibles que un paso BOOKING puede consumir.
- */
-declare function MaterialCalendarStep({ step, editable }: CalendarStepProps): JSX.Element;
-export default MaterialCalendarStep;