@arquimedes.co/eureka-forms 3.0.47-test → 3.0.49-new-steps

package/dist/Shared/ErkLocationInput/ErkLocationInput.js

@@ -0,0 +1,499 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState, useEffect, useRef, useMemo } from 'react';
+import { Autocomplete, CircularProgress, Typography, IconButton, Tooltip, Dialog, DialogTitle, DialogContent, DialogActions, } from '@mui/material';
+import { useAppSelector } from '../../hooks';
+import ErkButton from '../ErkButton/ErkButton';
+import { LocationInputMode } from '../../@Types/LocationFormStep';
+import { StyledTextField } from '../ErkTextField/ErkTextField';
+import ErkTextField from '../ErkTextField/ErkTextField';
+import LocationIcon from '../../Icons/LocationIcon';
+import EditIcon from '../../Icons/EditIcon';
+import CloseIcon from '../../Icons/CloseIcon';
+import styles from './ErkLocationInput.module.css';
+// ─── Script Loader ────────────────────────────────────────────────────────────
+let loadPromise = null;
+function loadGoogleMaps(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 = (err) => {
+            loadPromise = null;
+            reject(new Error(typeof err === 'string' ? err : 'Google Maps script failed to load.'));
+        };
+        document.head.appendChild(script);
+    });
+    return loadPromise;
+}
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+function parseAddressComponents(components) {
+    const detail = {};
+    for (const component of components) {
+        const types = component.types;
+        const longName = component.long_name ?? component.longText;
+        const shortName = component.short_name ?? component.shortText;
+        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;
+}
+// ─── Main Component ───────────────────────────────────────────────────────────
+export default function ErkLocationInput({ value, onChange, allowedModes, label, helperText, required = false, error = false, readOnly = false, inputRef, }) {
+    // Brand design theme
+    const { formStyle } = useAppSelector((state) => state.global);
+    // Google Maps API Key
+    const apiKey = import.meta.env.VITE_GOOGLE_MAPS_API_KEY ?? '';
+    // Autocomplete / Search States
+    const [loadingScript, setLoadingScript] = useState(false);
+    const [scriptError, setScriptError] = useState(false);
+    const [inputValue, setInputValue] = useState('');
+    const [options, setOptions] = useState([]);
+    const [searching, setSearching] = useState(false);
+    const [selectedPlace, setSelectedPlace] = useState(null);
+    // Modern Google Places Class References
+    const [autocompleteSuggestionClass, setAutocompleteSuggestionClass] = useState(null);
+    const [autocompleteSessionTokenClass, setAutocompleteSessionTokenClass] = useState(null);
+    const [geocoderClass, setGeocoderClass] = useState(null);
+    // Geolocation / GPS States
+    const [gpsLoading, setGpsLoading] = useState(false);
+    const [gpsError, setGpsError] = useState(null);
+    // Manual Modal States
+    const [manualModalOpen, setManualModalOpen] = useState(false);
+    const [localStreet, setLocalStreet] = useState('');
+    const [localStreetNumber, setLocalStreetNumber] = useState('');
+    const [localUnit, setLocalUnit] = useState('');
+    const [localNeighborhood, setLocalNeighborhood] = useState('');
+    const [localCity, setLocalCity] = useState('');
+    const [localState, setLocalState] = useState('');
+    const [localCountry, setLocalCountry] = useState('');
+    const [localPostalCode, setLocalPostalCode] = useState('');
+    // References for Google Services
+    const geocoderRef = useRef(null);
+    const sessionTokenRef = useRef(null);
+    // Load Google Maps Script if GOOGLE_PLACES is allowed
+    const isGooglePlacesAllowed = allowedModes.includes(LocationInputMode.GOOGLE_PLACES);
+    useEffect(() => {
+        const win = window;
+        if (isGooglePlacesAllowed && !readOnly) {
+            void Promise.resolve().then(() => {
+                setLoadingScript(true);
+            });
+            loadGoogleMaps(apiKey)
+                .then(async () => {
+                if (win.google?.maps?.importLibrary) {
+                    try {
+                        const { AutocompleteSuggestion, AutocompleteSessionToken } = await win.google.maps.importLibrary('places');
+                        const { Geocoder } = await win.google.maps.importLibrary('geocoding');
+                        setAutocompleteSuggestionClass(() => AutocompleteSuggestion);
+                        setAutocompleteSessionTokenClass(() => AutocompleteSessionToken);
+                        setGeocoderClass(() => Geocoder);
+                        geocoderRef.current = new Geocoder();
+                        sessionTokenRef.current = new AutocompleteSessionToken();
+                        setLoadingScript(false);
+                        setScriptError(false);
+                    }
+                    catch (err) {
+                        console.error('Error importing Google Maps libraries:', err);
+                        setLoadingScript(false);
+                        setScriptError(true);
+                    }
+                }
+                else if (win.google?.maps) {
+                    // Fallback if importLibrary doesn't exist
+                    geocoderRef.current = new win.google.maps.Geocoder();
+                    setLoadingScript(false);
+                    setScriptError(false);
+                }
+            })
+                .catch((err) => {
+                console.error('Error loading Google Maps:', err);
+                setLoadingScript(false);
+                setScriptError(true);
+            });
+        }
+    }, [isGooglePlacesAllowed, apiKey, readOnly]);
+    // Google Places Search Hook/Debounce (Supports new AutocompleteSuggestion & fallback)
+    useEffect(() => {
+        const win = window;
+        if (!win.google?.maps || !inputValue || inputValue.length < 3 || readOnly) {
+            void Promise.resolve().then(() => {
+                setOptions([]);
+            });
+            return;
+        }
+        void Promise.resolve().then(() => {
+            setSearching(true);
+        });
+        const timeout = setTimeout(() => {
+            // Check if modern AutocompleteSuggestion API is available
+            if (autocompleteSuggestionClass) {
+                const request = {
+                    input: inputValue,
+                };
+                if (sessionTokenRef.current) {
+                    request.sessionToken = sessionTokenRef.current;
+                }
+                autocompleteSuggestionClass
+                    .fetchAutocompleteSuggestions(request)
+                    .then((response) => {
+                    setSearching(false);
+                    if (response.suggestions) {
+                        const mapped = response.suggestions
+                            .filter((s) => s.placePrediction)
+                            .map((s) => ({
+                            description: s.placePrediction.text.text,
+                            place_id: s.placePrediction.placeId,
+                            mainText: s.placePrediction.mainText?.text ?? s.placePrediction.text.text,
+                            toPlace: () => s.placePrediction.toPlace(),
+                        }));
+                        setOptions(mapped);
+                    }
+                    else {
+                        setOptions([]);
+                    }
+                })
+                    .catch((err) => {
+                    console.error('Error fetching autocomplete suggestions:', err);
+                    setSearching(false);
+                    setOptions([]);
+                });
+            }
+            else if (win.google.maps.places?.AutocompleteService) {
+                // Fallback to legacy AutocompleteService
+                const service = new win.google.maps.places.AutocompleteService();
+                service.getPlacePredictions({ input: inputValue, types: ['geocode', 'establishment'] }, (predictions, status) => {
+                    setSearching(false);
+                    if (status === 'OK' && predictions) {
+                        setOptions(predictions.map((p) => ({
+                            description: p.description,
+                            place_id: p.place_id,
+                            mainText: p.structured_formatting.main_text,
+                        })));
+                    }
+                    else {
+                        setOptions([]);
+                    }
+                });
+            }
+            else {
+                setSearching(false);
+                setOptions([]);
+            }
+        }, 300);
+        return () => {
+            clearTimeout(timeout);
+        };
+    }, [inputValue, readOnly, autocompleteSuggestionClass]);
+    // Map current value to Autocomplete object if available
+    const autocompleteValue = useMemo(() => {
+        if (selectedPlace)
+            return selectedPlace;
+        if (value?.address && value.source === LocationInputMode.GOOGLE_PLACES) {
+            return {
+                description: value.address,
+                place_id: value.placeId ?? '',
+                mainText: value.name ?? value.address,
+            };
+        }
+        return null;
+    }, [selectedPlace, value]);
+    // Initialize Manual Modal states when opened
+    useEffect(() => {
+        if (manualModalOpen) {
+            void Promise.resolve().then(() => {
+                setLocalStreet(value?.addressDetail?.street ?? '');
+                setLocalStreetNumber(value?.addressDetail?.streetNumber ?? '');
+                setLocalUnit(value?.addressDetail?.unit ?? '');
+                setLocalNeighborhood(value?.addressDetail?.neighborhood ?? '');
+                setLocalCity(value?.addressDetail?.city ?? '');
+                setLocalState(value?.addressDetail?.state ?? '');
+                setLocalCountry(value?.addressDetail?.country ?? '');
+                setLocalPostalCode(value?.addressDetail?.postalCode ?? '');
+            });
+        }
+    }, [manualModalOpen, value]);
+    // Geolocation triggering
+    const handleGPSFetch = () => {
+        if (!navigator.geolocation) {
+            setGpsError('La geolocalización no es compatible con este navegador.');
+            return;
+        }
+        setGpsLoading(true);
+        setGpsError(null);
+        // Low accuracy fallback options to prevent VM/Desktop timeouts
+        const geoOptions = {
+            enableHighAccuracy: false,
+            timeout: 15000,
+            maximumAge: 300000, // Allow cached positions up to 5 minutes old
+        };
+        navigator.geolocation.getCurrentPosition((position) => {
+            const lat = position.coords.latitude;
+            const lng = position.coords.longitude;
+            const win = window;
+            const resolveLocation = () => {
+                const geocoderInstance = geocoderRef.current ??
+                    (geocoderClass
+                        ? new geocoderClass()
+                        : win.google?.maps?.Geocoder
+                            ? new win.google.maps.Geocoder()
+                            : null);
+                if (geocoderInstance) {
+                    geocoderInstance.geocode({ location: { lat, lng } }, (results, status) => {
+                        let address = undefined;
+                        let addressDetail = undefined;
+                        if (status === 'OK' && results?.[0]) {
+                            address = results[0].formatted_address;
+                            addressDetail = parseAddressComponents(results[0].address_components);
+                        }
+                        onChange?.({
+                            source: LocationInputMode.GPS,
+                            latitude: lat,
+                            longitude: lng,
+                            address: address ?? `${lat.toFixed(6)}, ${lng.toFixed(6)}`,
+                            addressDetail,
+                        });
+                        setGpsLoading(false);
+                    });
+                }
+                else {
+                    onChange?.({
+                        source: LocationInputMode.GPS,
+                        latitude: lat,
+                        longitude: lng,
+                        address: `${lat.toFixed(6)}, ${lng.toFixed(6)}`,
+                    });
+                    setGpsLoading(false);
+                }
+            };
+            if (!win.google?.maps && apiKey) {
+                loadGoogleMaps(apiKey)
+                    .then(() => {
+                    resolveLocation();
+                })
+                    .catch(() => {
+                    onChange?.({
+                        source: LocationInputMode.GPS,
+                        latitude: lat,
+                        longitude: lng,
+                        address: `${lat.toFixed(6)}, ${lng.toFixed(6)}`,
+                    });
+                    setGpsLoading(false);
+                });
+            }
+            else {
+                resolveLocation();
+            }
+        }, (err) => {
+            console.error('GPS error:', 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);
+        }, geoOptions);
+    };
+    // Save Manual fields
+    const handleSaveManual = () => {
+        if (!localStreet || !localCity || !localCountry) {
+            return;
+        }
+        const updatedDetail = {
+            street: localStreet,
+            streetNumber: localStreetNumber,
+            unit: localUnit,
+            neighborhood: localNeighborhood,
+            city: localCity,
+            state: localState,
+            country: localCountry,
+            postalCode: localPostalCode,
+        };
+        const parts = [
+            localStreet,
+            localStreetNumber,
+            localUnit ? `Apto/Int ${localUnit}` : '',
+            localNeighborhood,
+            localCity,
+            localState,
+            localCountry,
+        ].filter(Boolean);
+        const formattedAddress = parts.join(', ');
+        onChange?.({
+            source: LocationInputMode.MANUAL,
+            address: formattedAddress,
+            addressDetail: updatedDetail,
+        });
+        setManualModalOpen(false);
+    };
+    // Render Read-Only View
+    if (readOnly) {
+        return (_jsx("div", { className: styles.readOnlyContainer, style: {
+                '--eureka-outline': formStyle.outlineColor,
+                '--eureka-primary': formStyle.primaryColor,
+                '--eureka-text': formStyle.textColor,
+                '--eureka-bg': formStyle.standAloneBackgroundColor || '#fff',
+            }, 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: [_jsx(Typography, { className: styles.readOnlyLabel, children: label }), value?.name && _jsx(Typography, { className: styles.readOnlyName, children: value.name }), _jsx(Typography, { className: styles.readOnlyAddress, children: value?.address ?? 'Ubicación no proporcionada' }), value?.latitude !== undefined && value?.longitude !== undefined && (_jsxs(Typography, { className: styles.readOnlyCoords, children: ["Coordenadas: ", value.latitude.toFixed(6), ", ", value.longitude.toFixed(6)] }))] })] }) }));
+    }
+    const win = window;
+    return (_jsxs("div", { className: styles.container, style: {
+            '--eureka-outline': formStyle.outlineColor,
+            '--eureka-primary': formStyle.primaryColor,
+            '--eureka-text': formStyle.textColor,
+            '--eureka-bg': formStyle.standAloneBackgroundColor || '#fff',
+        }, children: [_jsxs(Typography, { variant: "subtitle2", color: "textSecondary", style: { fontWeight: 600, marginBottom: '2px', color: formStyle.textColor }, children: [label, " ", required && _jsx("span", { style: { color: formStyle.errorColor || 'red' }, children: "*" })] }), _jsx("div", { className: styles.inputRow, children: value?.address ? (_jsxs(_Fragment, { children: [_jsx("div", { style: { flex: 1 }, children: _jsx(ErkTextField, { label: "Ubicaci\u00F3n seleccionada", value: value.address, readOnly: true, error: error, helperText: helperText, required: required, inputRef: inputRef }) }), allowedModes.includes(LocationInputMode.MANUAL) && (_jsx(Tooltip, { title: "Editar direcci\u00F3n manualmente", children: _jsx(IconButton, { onClick: () => setManualModalOpen(true), className: styles.actionButton, children: _jsx(EditIcon, { fill: "currentColor" }) }) })), _jsx(Tooltip, { title: "Limpiar selecci\u00F3n", children: _jsx(IconButton, { onClick: () => {
+                                    onChange?.(null);
+                                    setSelectedPlace(null);
+                                    setInputValue('');
+                                    if (autocompleteSessionTokenClass) {
+                                        sessionTokenRef.current = new autocompleteSessionTokenClass();
+                                    }
+                                }, className: styles.actionButton, children: _jsx(CloseIcon, { fill: "currentColor" }) }) })] })) : (_jsxs(_Fragment, { children: [_jsx("div", { style: { flex: 1 }, children: loadingScript ? (_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '8px', height: '40px' }, children: [_jsx(CircularProgress, { size: 20 }), _jsx(Typography, { variant: "body2", children: "Cargando buscador..." })] })) : scriptError || !isGooglePlacesAllowed ? (_jsx(ErkTextField, { label: "Ingresa una ubicaci\u00F3n...", value: inputValue, onChange: (val) => {
+                                    setInputValue(val);
+                                    onChange?.({
+                                        source: LocationInputMode.MANUAL,
+                                        address: val,
+                                    });
+                                }, error: error, helperText: helperText, required: required, inputRef: inputRef })) : (_jsx(Autocomplete, { options: options, getOptionLabel: (option) => option.description, filterOptions: (x) => x, loading: searching, value: autocompleteValue, popupIcon: searching ? _jsx(CircularProgress, { color: "inherit", size: 20 }) : undefined, noOptionsText: inputValue.length >= 3 ? 'No se encontraron resultados' : 'Escribe para buscar...', onInputChange: (_, newInputValue) => {
+                                    setInputValue(newInputValue);
+                                }, onChange: (_, selection) => {
+                                    setSelectedPlace(selection);
+                                    if (selection) {
+                                        if (typeof selection.toPlace === 'function') {
+                                            const place = selection.toPlace();
+                                            place
+                                                .fetchFields({
+                                                fields: [
+                                                    'displayName',
+                                                    'formattedAddress',
+                                                    'location',
+                                                    'addressComponents',
+                                                ],
+                                            })
+                                                .then(() => {
+                                                const lat = place.location.lat();
+                                                const lng = place.location.lng();
+                                                const detail = parseAddressComponents(place.addressComponents ?? []);
+                                                onChange?.({
+                                                    source: LocationInputMode.GOOGLE_PLACES,
+                                                    latitude: lat,
+                                                    longitude: lng,
+                                                    name: place.displayName ?? selection.mainText,
+                                                    address: place.formattedAddress,
+                                                    placeId: selection.place_id,
+                                                    addressDetail: detail,
+                                                });
+                                                if (autocompleteSessionTokenClass) {
+                                                    sessionTokenRef.current = new autocompleteSessionTokenClass();
+                                                }
+                                            })
+                                                .catch((err) => {
+                                                console.error('Error fetching place fields:', err);
+                                            });
+                                        }
+                                        else {
+                                            const geocoderInstance = geocoderRef.current ??
+                                                (geocoderClass
+                                                    ? new geocoderClass()
+                                                    : win.google?.maps?.Geocoder
+                                                        ? new win.google.maps.Geocoder()
+                                                        : null);
+                                            if (geocoderInstance) {
+                                                geocoderInstance.geocode({ placeId: selection.place_id }, (results, status) => {
+                                                    if (status === 'OK' && results?.[0]) {
+                                                        const result = results[0];
+                                                        const lat = result.geometry.location.lat();
+                                                        const lng = result.geometry.location.lng();
+                                                        const detail = parseAddressComponents(result.address_components);
+                                                        onChange?.({
+                                                            source: LocationInputMode.GOOGLE_PLACES,
+                                                            latitude: lat,
+                                                            longitude: lng,
+                                                            name: selection.mainText ?? selection.description,
+                                                            address: result.formatted_address,
+                                                            placeId: selection.place_id,
+                                                            addressDetail: detail,
+                                                        });
+                                                        if (autocompleteSessionTokenClass) {
+                                                            sessionTokenRef.current =
+                                                                new autocompleteSessionTokenClass();
+                                                        }
+                                                    }
+                                                });
+                                            }
+                                        }
+                                    }
+                                    else {
+                                        onChange?.(null);
+                                        if (autocompleteSessionTokenClass) {
+                                            sessionTokenRef.current = new autocompleteSessionTokenClass();
+                                        }
+                                    }
+                                }, renderInput: (params) => (_jsx(StyledTextField, { ...params, label: "Buscar direcci\u00F3n...", error: error, helperText: helperText, required: required, inputRef: inputRef })) })) }), allowedModes.includes(LocationInputMode.GPS) && (_jsx(Tooltip, { title: "Obtener ubicaci\u00F3n por GPS", children: _jsx(IconButton, { onClick: handleGPSFetch, disabled: gpsLoading, className: styles.actionButton, children: gpsLoading ? _jsx(CircularProgress, { size: 18 }) : _jsx(LocationIcon, { fill: "currentColor" }) }) })), allowedModes.includes(LocationInputMode.MANUAL) && (_jsx(Tooltip, { title: "Ingresar direcci\u00F3n manualmente", children: _jsx(IconButton, { onClick: () => setManualModalOpen(true), className: styles.actionButton, children: _jsx(EditIcon, { fill: "currentColor" }) }) }))] })) }), gpsError && (_jsx(Typography, { variant: "caption", color: "error", style: { display: 'block', marginTop: '4px' }, children: gpsError })), _jsxs(Dialog, { open: manualModalOpen, onClose: () => setManualModalOpen(false), maxWidth: "sm", fullWidth: true, slotProps: {
+                    popper: { sx: { zIndex: 1400 } },
+                    paper: {
+                        style: {
+                            borderRadius: '20px',
+                            padding: '16px 24px',
+                            backgroundColor: formStyle.stepBackgroundColor || '#fff',
+                        },
+                    },
+                }, children: [_jsx(DialogTitle, { style: {
+                            fontWeight: 700,
+                            padding: '0 0 16px 0',
+                            color: formStyle.textColor,
+                            fontFamily: 'inherit',
+                        }, children: "Ingresar Direcci\u00F3n" }), _jsx(DialogContent, { style: {
+                            padding: '16px 0',
+                            borderTop: `1px solid ${formStyle.outlineColor}`,
+                            borderBottom: `1px solid ${formStyle.outlineColor}`,
+                        }, children: _jsxs("div", { className: styles.manualGrid, children: [_jsx("div", { className: styles.manualRow, children: _jsx("div", { className: styles.col12, children: _jsx(ErkTextField, { label: "Calle / Carrera / Avenida (L\u00EDnea 1)", value: localStreet, onChange: setLocalStreet, required: true }) }) }), _jsxs("div", { className: styles.manualRow, children: [_jsx("div", { className: styles.col6, children: _jsx(ErkTextField, { label: "N\u00FAmero / Portal", value: localStreetNumber, onChange: setLocalStreetNumber }) }), _jsx("div", { className: styles.col6, children: _jsx(ErkTextField, { label: "Apto / Oficina / Interior", value: localUnit, onChange: setLocalUnit }) })] }), _jsxs("div", { className: styles.manualRow, children: [_jsx("div", { className: styles.col6, children: _jsx(ErkTextField, { label: "Barrio / Zona", value: localNeighborhood, onChange: setLocalNeighborhood }) }), _jsx("div", { className: styles.col6, children: _jsx(ErkTextField, { label: "Ciudad", value: localCity, onChange: setLocalCity, required: true }) })] }), _jsxs("div", { className: styles.manualRow, children: [_jsx("div", { className: styles.col4, children: _jsx(ErkTextField, { label: "Estado / Provincia / Dpto", value: localState, onChange: setLocalState }) }), _jsx("div", { className: styles.col4, children: _jsx(ErkTextField, { label: "C\u00F3digo Postal", value: localPostalCode, onChange: setLocalPostalCode }) }), _jsx("div", { className: styles.col4, children: _jsx(ErkTextField, { label: "Pa\u00EDs", value: localCountry, onChange: setLocalCountry, required: true }) })] })] }) }), _jsxs(DialogActions, { style: { padding: '16px 0 0 0', gap: '12px' }, children: [_jsx(ErkButton, { text: "Cancelar", variant: "outlined", onClick: () => setManualModalOpen(false), sx: {
+                                    borderColor: formStyle.outlineColor,
+                                    color: formStyle.textColor,
+                                    '&:hover': {
+                                        borderColor: formStyle.textColor,
+                                        backgroundColor: 'rgba(0, 0, 0, 0.04)',
+                                    },
+                                } }), _jsx(ErkButton, { text: "Guardar", variant: "contained", onClick: handleSaveManual, disabled: !localStreet || !localCity || !localCountry })] })] })] }));
+}

package/dist/Shared/ErkLocationInput/ErkLocationInput.module.css

@@ -0,0 +1,115 @@
+.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%;
+}
+
+.actionButton {
+    border: 1px solid var(--eureka-outline) !important;
+    border-radius: 10px !important;
+    padding: 5px !important;
+    height: 33px !important;
+    width: 33px !important;
+    background-color: var(--eureka-bg) !important;
+    color: var(--eureka-text) !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) !important;
+    color: var(--eureka-primary) !important;
+}
+
+.actionButton:disabled {
+    opacity: 0.5;
+}
+
+.manualGrid {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    width: 100%;
+}
+
+.manualRow {
+    display: flex;
+    gap: 12px;
+    width: 100%;
+}
+
+.col12 { width: 100%; }
+.col8 { width: 66.666%; }
+.col6 { width: 50%; }
+.col4 { width: 33.333%; }
+.col3 { width: 25%; }
+
+@media (max-width: 600px) {
+    .manualRow {
+        flex-direction: column;
+        gap: 12px;
+    }
+    .col8, .col6, .col4, .col3 {
+        width: 100%;
+    }
+}
+
+.readOnlyContainer {
+    width: 100%;
+    box-sizing: border-box;
+}
+
+.readOnlyCard {
+    display: flex;
+    align-items: flex-start;
+    gap: 15px;
+    padding: 15px;
+    border: 1px solid var(--eureka-outline);
+    border-radius: 10px;
+    background-color: var(--eureka-bg);
+}
+
+.readOnlyIcon {
+    flex-shrink: 0;
+    margin-top: 2px;
+    width: 24px;
+    height: 24px;
+}
+
+.readOnlyDetails {
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+
+.readOnlyLabel {
+    font-size: 0.75rem !important;
+    color: #666;
+    font-weight: 500 !important;
+}
+
+.readOnlyName {
+    font-size: 1rem !important;
+    font-weight: 600 !important;
+}
+
+.readOnlyAddress {
+    font-size: 0.9rem !important;
+}
+
+.readOnlyCoords {
+    font-size: 0.8rem !important;
+    color: #888;
+    font-family: monospace;
+}

package/dist/Shared/ErkNumberField/ErkNumberField.d.ts

@@ -0,0 +1,42 @@
+import React from 'react';
+export interface ErkNumberFieldProps {
+    /** Controlled numeric value. null = empty field. */
+    value?: number | null;
+    onChange?: (value: number | null) => void;
+    label?: string;
+    min?: number;
+    max?: number;
+    /** Increment/decrement step. Defaults to 1. */
+    step?: number;
+    /**
+     * Maximum decimal places.
+     * - Blocks extra decimal input live (rejects the keystroke)
+     * - Formats display on blur via Intl.NumberFormat
+     * - 0 = integers only
+     */
+    decimals?: number;
+    required?: boolean;
+    error?: boolean;
+    /** Show red border on error. */
+    errorBorder?: boolean;
+    helperText?: React.ReactNode;
+    disabled?: boolean;
+    readOnly?: boolean;
+    placeholder?: string;
+    size?: 'small' | 'medium';
+    fullWidth?: boolean;
+    /** Static text at the end of the field (e.g. "%", "USD"). */
+    suffix?: React.ReactNode;
+    /** Show increment/decrement spinner buttons. */
+    spinner?: boolean;
+    inputRef?: React.Ref<HTMLInputElement>;
+}
+/**
+ * Pure number input built on Base UI NumberField + MUI styling.
+ * No form-step system dependency.
+ * Class wrapper for react-hook-form ref compatibility.
+ */
+declare class ErkNumberField extends React.Component<ErkNumberFieldProps> {
+    render(): JSX.Element;
+}
+export default ErkNumberField;