@sfperusacdev/sf-ui 0.2.3 → 0.2.5

package/dist/theme/sf-tokens.css

@@ -480,6 +480,9 @@
   --sf-map-area-fill: var(--sf-info);
   --sf-map-route-stroke: #0f766e;
   --sf-map-route-fill: #14b8a6;
+  --sf-map-circle-stroke: var(--sf-success);
+  --sf-map-circle-fill: var(--sf-success);
+  --sf-map-pin-bg: var(--sf-success);
   --sf-map-panel-bg: var(--sf-network-panel-bg);
   --sf-map-vertex-border: var(--sf-white);
   --sf-map-vertex-shadow: var(--sf-network-marker-shadow);

package/dist/types/src/adapters/maps/google/google.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/src/adapters/maps/google/index.d.ts

@@ -1,13 +1,22 @@
-import { SfLatLng, SfPlace } from '../../../types/maps';
+import { SfAddressParts, SfLatLng, SfPlace } from '../../../types/maps';
 export type GoogleMapsLikeLatLng = {
     lat: () => number;
     lng: () => number;
 };
+export type GoogleMapsLikeAddressComponent = {
+    long_name?: string;
+    short_name?: string;
+    types?: string[];
+};
 export type GoogleMapsLikeGeocoderResult = {
     place_id?: string;
     formatted_address?: string;
+    types?: string[];
+    address_components?: GoogleMapsLikeAddressComponent[];
     geometry?: {
         location?: GoogleMapsLikeLatLng;
+        /** ROOFTOP | RANGE_INTERPOLATED | GEOMETRIC_CENTER | APPROXIMATE */
+        location_type?: string;
     };
 };
 export declare const googleLatLngToSfLatLng: (point: GoogleMapsLikeLatLng) => SfLatLng;
@@ -15,4 +24,18 @@ export declare const sfLatLngToGoogleLiteral: (point: SfLatLng) => {
     lat: number;
     lng: number;
 };
+/**
+ * Partes de la dirección a partir de uno o varios resultados de Google (los de una geocodificación inversa vienen
+ * del más al menos preciso). Vía y número salen del mismo resultado; el resto, del primero que lo traiga.
+ * En Perú Google da el distrito como `locality`, la provincia como nivel 2 y el departamento como nivel 1
+ * (en Lima Metropolitana el nivel 1 es "Provincia de Lima").
+ */
+export declare const googleAddressParts: (results: GoogleMapsLikeGeocoderResult[], conVia?: GoogleMapsLikeGeocoderResult | undefined) => SfAddressParts;
 export declare const googleGeocoderResultToSfPlace: (result: GoogleMapsLikeGeocoderResult) => SfPlace | null;
+/**
+ * Lo que hay en un punto según la geocodificación inversa de Google. La dirección sale del resultado con vía
+ * **más cercano** al punto: Google devuelve la dirección con número más cercana que conoce, que puede estar a una
+ * cuadra (calles sin numeración), y no siempre la pone primero. `parts.lineDistanceM` dice a cuántos metros está,
+ * para que quien la muestre la presente como referencia si no es exacta. La ubicación es el punto pedido.
+ */
+export declare const googleReverseResultsToSfPlace: (point: SfLatLng, results: GoogleMapsLikeGeocoderResult[]) => SfPlace | null;

package/dist/types/src/components/inputs/AsyncSearchSelect.d.ts

@@ -1,4 +1,5 @@
 import { FieldValues, Path, UseFormReturn } from 'react-hook-form';
+import { IconType } from 'react-icons';
 import { SelectOption } from './SelectOption';
 type AsyncSearchSelectProps<TFormValues extends FieldValues> = {
     form: UseFormReturn<TFormValues>;
@@ -15,6 +16,8 @@ type AsyncSearchSelectProps<TFormValues extends FieldValues> = {
     readOnly?: boolean;
     small?: boolean;
     onChange?: (value: string | string[]) => void;
+    /** Icono a la izquierda, en su propio compartimento. */
+    leadingIcon?: IconType;
 };
-export declare const AsyncSearchSelect: <TFormValues extends FieldValues>({ form, name, loadOptions, label, info, required, multiple, className, placeholder, searchPlaceholder, emptyMessage, readOnly, small, onChange, }: AsyncSearchSelectProps<TFormValues>) => import("react").JSX.Element;
+export declare const AsyncSearchSelect: <TFormValues extends FieldValues>({ form, name, loadOptions, label, info, required, multiple, className, placeholder, searchPlaceholder, emptyMessage, readOnly, small, onChange, leadingIcon, }: AsyncSearchSelectProps<TFormValues>) => import("react").JSX.Element;
 export {};

package/dist/types/src/components/inputs/FieldLeadingIcon.d.ts

@@ -0,0 +1,6 @@
+import { IconType } from 'react-icons';
+/** Icono a la izquierda del campo, en su propio compartimento con línea divisoria. */
+export declare const FieldLeadingIcon: ({ icon: Icon, small }: {
+    icon: IconType;
+    small?: boolean;
+}) => import("react").JSX.Element;

package/dist/types/src/components/inputs/Input.d.ts

@@ -18,6 +18,8 @@ type InputProps<TFormValues extends FieldValues> = {
     step?: number | string;
     onChange?: (value: string) => void;
     icon?: IconType;
+    /** Icono a la izquierda, en su propio compartimento. `icon` sigue siendo el de la derecha. */
+    leadingIcon?: IconType;
     small?: boolean;
     onIconClick?: () => Promise<void> | void;
     onRefresh?: () => Promise<void> | void;
@@ -26,6 +28,11 @@ type InputProps<TFormValues extends FieldValues> = {
      * para experiencias de una pregunta por pantalla. Usa clases propias de este componente; NO
      * modifica `fieldClassName.ts` ni afecta a ningún otro input. */
     variant?: InputVariant;
+    /**
+     * Valores que se ofrecen mientras se escribe (lista nativa del navegador, `<datalist>`). El texto sigue siendo
+     * libre: sirve para que un mismo valor no se escriba de tres formas ("Urb Primavera", "Urb. Primavera"…).
+     */
+    suggestions?: string[];
 };
-export declare const Input: <TFormValues extends FieldValues>({ form, name, label, info, required, type, className, placeholder, readOnly, min, max, step, onChange, icon, small, onIconClick, onRefresh, variant, }: InputProps<TFormValues>) => React.JSX.Element;
+export declare const Input: <TFormValues extends FieldValues>({ form, name, label, info, required, type, className, placeholder, readOnly, min, max, step, onChange, icon, leadingIcon, small, onIconClick, onRefresh, variant, suggestions, }: InputProps<TFormValues>) => React.JSX.Element;
 export {};

package/dist/types/src/components/inputs/SearchSelect.d.ts

@@ -1,4 +1,5 @@
 import { FieldValues, Path, UseFormReturn } from 'react-hook-form';
+import { IconType } from 'react-icons';
 import { SelectOption } from './SelectOption';
 type SearchSelectProps<TFormValues extends FieldValues> = {
     form: UseFormReturn<TFormValues>;
@@ -19,6 +20,8 @@ type SearchSelectProps<TFormValues extends FieldValues> = {
     onRefresh?: () => Promise<void> | void;
     loading?: boolean;
     onOpen?: () => void;
+    /** Icono a la izquierda, en su propio compartimento. */
+    leadingIcon?: IconType;
 };
-export declare const SearchSelect: <TFormValues extends FieldValues>({ form, name, options, label, info, required, multiple, className, placeholder, searchPlaceholder, emptyMessage, readOnly, small, maxChips, onChange, onRefresh, onOpen, loading, }: SearchSelectProps<TFormValues>) => import("react").JSX.Element;
+export declare const SearchSelect: <TFormValues extends FieldValues>({ form, name, options, label, info, required, multiple, className, placeholder, searchPlaceholder, emptyMessage, readOnly, small, maxChips, onChange, onRefresh, onOpen, loading, leadingIcon, }: SearchSelectProps<TFormValues>) => import("react").JSX.Element;
 export {};

package/dist/types/src/components/inputs/fieldClassName.d.ts

@@ -1,8 +1,10 @@
-export declare const fieldClassName: ({ small, error, className, withRightIcon, disabled, readOnly, }: {
+export declare const fieldClassName: ({ small, error, className, withRightIcon, withLeftIcon, disabled, readOnly, }: {
     small?: boolean;
     error?: boolean;
     className?: string;
     withRightIcon?: boolean;
+    /** Deja sitio al icono de la izquierda (`FieldLeadingIcon`). */
+    withLeftIcon?: boolean;
     disabled?: boolean;
     readOnly?: boolean;
 }) => string;

package/dist/types/src/components/maps/base/MapPointCard.d.ts

@@ -0,0 +1,22 @@
+import { ReactNode } from 'react';
+export type MapPointCardItem = {
+    key: string;
+    label: string;
+    /** Sin valor la fila no se pinta. */
+    value?: ReactNode;
+    /** Botón al lado del valor, p. ej. "Usar" cuando el campo ya tiene algo escrito a mano. */
+    actionLabel?: string;
+    onAction?: () => void;
+};
+export type MapPointCardProps = {
+    title?: string;
+    items: MapPointCardItem[];
+    loading?: boolean;
+    error?: string | null;
+    /** Aviso destacado al pie (p. ej. otro registro muy cerca). */
+    warning?: ReactNode;
+    onClose?: () => void;
+    className?: string;
+};
+/** Tarjeta con lo que hay en el punto pulsado de un mapa. Va en `MapView.panel`. */
+export declare const MapPointCard: ({ title, items, loading, error, warning, onClose, className, }: MapPointCardProps) => import("react").JSX.Element;

package/dist/types/src/components/maps/base/MapPointCard.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/src/components/maps/base/index.d.ts

@@ -8,3 +8,5 @@ export { MapToolbar } from './MapToolbar';
 export type { MapToolbarMapType, MapToolbarProps } from './MapToolbar';
 export { MapVehiclePopup } from './MapVehiclePopup';
 export type { MapVehiclePopupProps } from './MapVehiclePopup';
+export { MapPointCard } from './MapPointCard';
+export type { MapPointCardItem, MapPointCardProps } from './MapPointCard';

package/dist/types/src/components/maps/forms/AddressSearchInput.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/src/components/maps/renderers/geometria.d.ts

@@ -0,0 +1,5 @@
+import { SfLatLng, SfMapCircle } from '../../../types/maps';
+/** Punto del borde inferior-derecho del círculo, donde se ancla su etiqueta (igual en Leaflet y Google). */
+export declare const sfCircleLabelAnchor: (circle: SfMapCircle) => SfLatLng;
+/** Contorno cerrado del círculo (para trazarlo punteado donde el motor no sabe hacerlo). */
+export declare const sfCircleRing: (circle: SfMapCircle, lados?: number) => SfLatLng[];

package/dist/types/src/components/maps/renderers/google/GoogleMapRenderer.d.ts

@@ -2,5 +2,5 @@ import { SfGoogleMapsEngineConfig, SfMapRendererProps } from '../../../../types/
 type GoogleMapRendererProps = SfMapRendererProps & {
     config?: SfGoogleMapsEngineConfig;
 };
-export declare const GoogleMapRenderer: ({ config, center, zoom, markers, routes, areas, height, className, readOnly, onClick, onMarkerClick, onMarkerDoubleClick, onMarkerDrag, onMarkerDragEnd, }: GoogleMapRendererProps) => import("react").JSX.Element;
+export declare const GoogleMapRenderer: ({ config, center, zoom, markers, routes, areas, circles, mapType, view, onViewChange, zoomControl, height, className, readOnly, onClick, onMarkerClick, onMarkerDoubleClick, onMarkerDrag, onMarkerDragEnd, }: GoogleMapRendererProps) => import("react").JSX.Element;
 export {};

package/dist/types/src/components/maps/renderers/leaflet/LeafletMapRenderer.d.ts

@@ -3,5 +3,5 @@ type LeafletMapRendererProps = SfMapRendererProps & {
     tileUrl?: string;
     attribution?: string;
 };
-export declare const LeafletMapRenderer: ({ center, zoom, markers, routes, areas, height, className, readOnly, tileUrl, attribution, onClick, onMarkerClick, onMarkerDoubleClick, onMarkerDrag, onMarkerDragEnd, }: LeafletMapRendererProps) => import("react").JSX.Element;
+export declare const LeafletMapRenderer: ({ center, zoom, markers, routes, areas, circles, mapType, view, onViewChange, zoomControl, height, className, readOnly, tileUrl, attribution, onClick, onMarkerClick, onMarkerDoubleClick, onMarkerDrag, onMarkerDragEnd, }: LeafletMapRendererProps) => import("react").JSX.Element;
 export {};

package/dist/types/src/components/maps/views/MapView.d.ts

@@ -1,9 +1,26 @@
-import { SfMapMarker, SfMapRendererProps, SfMapShape } from '../../../types/maps';
-export type MapViewProps = Omit<SfMapRendererProps, "markers"> & {
+import { ReactNode } from 'react';
+import { SfLatLng, SfMapCircle, SfMapMarker, SfMapRendererProps, SfMapShape, SfMapType } from '../../../types/maps';
+export type MapViewProps = Omit<SfMapRendererProps, "markers" | "view" | "onViewChange" | "zoomControl"> & {
     title?: string;
     description?: string;
     markers?: SfMapMarker[];
     routes?: SfMapShape[];
     areas?: SfMapShape[];
+    circles?: SfMapCircle[];
+    /** Con `onMapTypeChange` se pinta el selector Mapa / Satélite arriba a la izquierda. */
+    mapType?: SfMapType;
+    onMapTypeChange?: (mapType: SfMapType) => void;
+    /** Controles propios arriba a la derecha: zoom, recentrar (si hay `recenterTo`) y capas (si hay `onMapTypeChange`). */
+    showControls?: boolean;
+    /** Destino del botón recentrar. */
+    recenterTo?: SfLatLng | null;
+    /** Cuando cambia, el mapa se centra ahí (p. ej. el resultado de una búsqueda). */
+    focus?: SfLatLng | null;
+    /** Zoom mínimo al recentrar o al ir a `focus`. */
+    focusZoom?: number;
+    /** Tarjeta abajo a la derecha (leyenda). */
+    legend?: ReactNode;
+    /** Panel arriba a la izquierda, bajo el selector de capas (p. ej. `MapPointCard`). */
+    panel?: ReactNode;
 };
-export declare const MapView: ({ title, description, center, zoom, markers, routes, areas, height, className, readOnly, onClick, onMarkerClick, onMarkerDoubleClick, onMarkerDrag, onMarkerDragEnd, }: MapViewProps) => import("react").JSX.Element;
+export declare const MapView: ({ title, description, center, zoom, markers, routes, areas, circles, mapType, onMapTypeChange, showControls, recenterTo, focus, focusZoom, legend, panel, height, className, readOnly, onClick, onMarkerClick, onMarkerDoubleClick, onMarkerDrag, onMarkerDragEnd, }: MapViewProps) => import("react").JSX.Element;

package/dist/types/src/components/maps/views/MapView.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/types/src/components/table/CustomTable.d.ts

@@ -11,6 +11,14 @@ import { CustomTableController } from './customTableController';
  * Todos se apoyan en tokens `--sf-*` para reaccionar al tema activo.
  */
 export type TableHeaderVariant = "default" | "brand" | "soft" | "neon" | "premium" | "matrix";
+/** Estado de una paginación que resuelve el backend (limit/offset). `page` es 1-based. */
+export type CustomTableServerPagination = {
+    totalItems: number;
+    page: number;
+    pageSize: number;
+    onPageChange: (page: number) => void;
+    onPageSizeChange: (pageSize: number) => void;
+};
 type BuiltInAggregation = "sum" | "min" | "max" | "mean" | "median" | "unique" | "uniqueCount" | "count";
 type TableAggregation = BuiltInAggregation | AggregationFn<unknown>;
 type CustomColumn<TData> = {
@@ -67,6 +75,13 @@ type CustomTableProps<TData extends Record<string, unknown>, TDetail extends Rec
     paginationVariant?: PaginationVariant | "legacy";
     /** Opciones del selector "Mostrar N registros por página". Default: 10/25/50/100/200. */
     pageSizeOptions?: number[];
+    /**
+     * Paginación en servidor: `data` ya es UNA página que trajo el backend. El
+     * CustomTable no la recorta y dibuja el mismo paginador dentro de la tarjeta
+     * con estos valores. Excluye a `enablePagination` (paginación en cliente).
+     * Las pantallas arrancan con `pageSize` 25 (regla del producto).
+     */
+    serverPagination?: CustomTableServerPagination;
     fillParentHeight?: boolean;
     maxBodyHeightPx?: number;
     className?: string;
@@ -122,5 +137,5 @@ type CustomTableProps<TData extends Record<string, unknown>, TDetail extends Rec
     detail?: CustomTableDetail<TData, TDetail>;
     controller?: CustomTableController<TData>;
 };
-export declare function CustomTable<TData extends Record<string, unknown>, TDetail extends Record<string, unknown> = Record<string, unknown>>({ id, stateStore, data, columns, grouping, defaultGrouping, enableGrouping, enableSorting, enableFiltering, enablePagination, pageSize, paginationVariant, pageSizeOptions, fillParentHeight, maxBodyHeightPx, className, emptyMessage, title, subtitle, sidePanel, onGroupingChange, toolbarSlot, belowToolbarSlot, loading, loadingMessage, isFetching, error, onRetry, onRefresh, onRowClick, enableRowSelection, getRowActions, getBulkActions, bulkActionsSlot, onSelectionChange, headerVariant, searchPlaceholder, embedded, detail, controller, }: CustomTableProps<TData, TDetail>): import("react").JSX.Element;
+export declare function CustomTable<TData extends Record<string, unknown>, TDetail extends Record<string, unknown> = Record<string, unknown>>({ id, stateStore, data, columns, grouping, defaultGrouping, enableGrouping, enableSorting, enableFiltering, enablePagination, pageSize, paginationVariant, pageSizeOptions, serverPagination, fillParentHeight, maxBodyHeightPx, className, emptyMessage, title, subtitle, sidePanel, onGroupingChange, toolbarSlot, belowToolbarSlot, loading, loadingMessage, isFetching, error, onRetry, onRefresh, onRowClick, enableRowSelection, getRowActions, getBulkActions, bulkActionsSlot, onSelectionChange, headerVariant, searchPlaceholder, embedded, detail, controller, }: CustomTableProps<TData, TDetail>): import("react").JSX.Element;
 export type { CustomColumn, CustomTableDetail, CustomTableProps, TableAggregation };

package/dist/types/src/components/table/index.d.ts

@@ -1,5 +1,5 @@
 export { CustomTable } from './CustomTable';
-export type { CustomColumn, CustomTableDetail, CustomTableProps, TableHeaderVariant } from './CustomTable';
+export type { CustomColumn, CustomTableDetail, CustomTableProps, CustomTableServerPagination, TableHeaderVariant, } from './CustomTable';
 export { AsyncCustomTable } from './AsyncCustomTable';
 export type { AsyncCustomTableProps } from './AsyncCustomTable';
 export { PaginationRangeInput } from './PaginationRangeInput';

package/dist/types/src/constants/maps/index.d.ts

@@ -4,5 +4,8 @@ export declare const SF_DEFAULT_MAP_CENTER: SfLatLng;
 export declare const SF_DEFAULT_MAP_ZOOM = 13;
 export declare const SF_OSM_TILE_URL = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
 export declare const SF_OSM_ATTRIBUTION = "&copy; <a href=\"https://www.openstreetmap.org/copyright\" target=\"_blank\" rel=\"noreferrer\">OpenStreetMap</a>";
+/** Imagen satelital de Esri World Imagery: sin clave, exige la atribución de abajo. */
+export declare const SF_SATELLITE_TILE_URL = "https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}";
+export declare const SF_SATELLITE_ATTRIBUTION = "Imagen &copy; <a href=\"https://www.esri.com\" target=\"_blank\" rel=\"noreferrer\">Esri</a>, Maxar, Earthstar Geographics";
 export declare const SF_LEAFLET_ENGINE_CAPABILITIES: SfMapEngineCapabilities;
 export declare const SF_GOOGLE_ENGINE_CAPABILITIES: SfMapEngineCapabilities;

package/dist/types/src/contracts/maps/index.d.ts

@@ -9,6 +9,8 @@ export interface IGeocoderService {
     capabilities: SfGeocodingCapabilities;
     geocode(query: string): Promise<SfPlace[]>;
     reverseGeocode(point: SfLatLng): Promise<SfPlace | null>;
+    /** Nombre y dirección de un lugar del mapa base (`SfMapClickEvent.placeId`). Solo lo ofrece Google. */
+    placeDetails?(placeId: string): Promise<SfPlace | null>;
 }
 export interface IRouteService {
     id: string;

package/dist/types/src/hooks/maps/index.d.ts

@@ -1,3 +1,4 @@
 export { useAddressSearch } from './useAddressSearch';
 export { useMapEngine } from './useMapEngine';
 export { useMapsConfig } from './useMapsConfig';
+export { useReverseGeocode } from './useReverseGeocode';

package/dist/types/src/hooks/maps/useReverseGeocode.d.ts

@@ -0,0 +1,14 @@
+import { SfLatLng, SfPlace } from '../../types/maps';
+/**
+ * Qué hay en un punto del mapa: dirección y partes (geocodificación inversa) y, si se pulsó un lugar del mapa
+ * base (`SfMapClickEvent.placeId`), su nombre. Solo vale la última consulta: `lookup` resuelve `null` si otra
+ * más nueva la reemplazó, así quien llama no pisa datos con una respuesta vieja.
+ */
+export declare const useReverseGeocode: () => {
+    place: SfPlace | null;
+    loading: boolean;
+    error: string | null;
+    lookup: (point: SfLatLng, placeId?: string) => Promise<SfPlace | null>;
+    show: (next: SfPlace | null) => void;
+    clear: () => void;
+};

package/dist/types/src/services/maps/googleMapsLoader.d.ts

@@ -8,11 +8,19 @@ export type GoogleMapInstance = {
         lng: number;
     }) => void;
     setZoom?: (zoom: number) => void;
+    setMapTypeId?: (mapTypeId: string) => void;
+    getCenter?: () => {
+        lat: () => number;
+        lng: () => number;
+    } | undefined;
+    getZoom?: () => number | undefined;
     addListener?: (eventName: string, handler: (event: {
         latLng?: {
             lat: () => number;
             lng: () => number;
         };
+        placeId?: string;
+        stop?: () => void;
     }) => void) => GoogleMapsListener;
 };
 type GoogleMapsNamespace = {
@@ -56,9 +64,21 @@ type GoogleMapsNamespace = {
                 lng: number;
             }[]) => void;
         };
+        Circle?: new (options: Record<string, unknown>) => {
+            setMap?: (map: unknown | null) => void;
+            setOptions?: (options: Record<string, unknown>) => void;
+        };
+        Point?: new (x: number, y: number) => unknown;
+        Size?: new (width: number, height: number) => unknown;
         event?: {
             clearInstanceListeners: (instance: unknown) => void;
         };
+        places?: {
+            PlacesService?: new (container: HTMLElement) => {
+                getDetails: (request: Record<string, unknown>, callback: (result: unknown | null, status: string) => void) => void;
+            };
+        };
+        importLibrary?: (name: string) => Promise<unknown>;
     };
 };
 export declare const getGoogleMapsNamespace: () => GoogleMapsNamespace | undefined;

package/dist/types/src/types/maps/index.d.ts

@@ -7,18 +7,61 @@ export type SfLatLng = {
     lat: number;
     lng: number;
 };
+/** Capa base del mapa: calles (`roadmap`) o imagen satelital. */
+export type SfMapType = "roadmap" | "satellite";
+/** Encuadre del mapa. Con `view` el mapa es controlado: sigue este encuadre y avisa con `onViewChange`. */
+export type SfMapView = {
+    center: SfLatLng;
+    zoom: number;
+};
+/** Círculo en metros reales (geocercas). `label` se pinta fijo junto al borde. */
+export type SfMapCircle = {
+    id: string;
+    center: SfLatLng;
+    radiusM: number;
+    color?: string;
+    fillColor?: string;
+    dashed?: boolean;
+    label?: string;
+};
 export type SfBounds = {
     north: number;
     south: number;
     east: number;
     west: number;
 };
+/** Partes de una dirección, con los nombres de la división política del Perú. */
+export type SfAddressParts = {
+    /** Vía: "Jirón Independencia", "Av. Larco". */
+    street?: string;
+    /** Número o cuadra: "179", "cuadra 4". */
+    number?: string;
+    /** Vía y número, listo para un campo Dirección. */
+    line?: string;
+    /**
+     * Metros entre el punto consultado y la dirección de `line` (geocodificación inversa). Google da la dirección con
+     * número más cercana que conoce: en calles sin numeración puede estar a una cuadra. Sin valor = no se sabe.
+     */
+    lineDistanceM?: number;
+    /** Urbanización, barrio o sector. */
+    neighborhood?: string;
+    /** Ciudad o localidad como se escribe en una dirección ("Chepén"); el distrito puede venir sin tildes ("Chepen"). */
+    locality?: string;
+    district?: string;
+    province?: string;
+    department?: string;
+    country?: string;
+    postalCode?: string;
+};
 export type SfPlace = {
     id: string;
     label: string;
     address?: string;
     location: SfLatLng;
     provider?: string;
+    /** Nombre del lugar (comercio, colegio, plaza) cuando el punto es uno. */
+    name?: string;
+    parts?: SfAddressParts;
     raw?: unknown;
 };
 export type SfAddress = SfPlace;
@@ -71,6 +114,15 @@ export type SfMapMarker = {
 export type SfMapMarkerOptions = {
     draggable?: boolean;
     selectable?: boolean;
+    /**
+     * `dot` (punto, el de siempre), `pin` (marcador de ubicación) o `badge` (círculo del color `color`, con `text`
+     * adentro si lo hay: p. ej. el orden de una parada; sin texto es un punto pequeño).
+     */
+    variant?: "dot" | "pin" | "badge";
+    /** Texto dentro del marcador `badge` (1–3 caracteres). */
+    text?: string;
+    /** Muestra `label` fijo sobre el marcador. */
+    showLabel?: boolean;
 };
 export type SfMapShape = {
     id: string;
@@ -81,6 +133,8 @@ export type SfMapShape = {
 };
 export type SfMapClickEvent = {
     location: SfLatLng;
+    /** Lugar del mapa base que se pulsó (comercio, colegio…). Solo lo informa el motor Google. */
+    placeId?: string;
 };
 export type SfMarkerClickEvent = {
     marker: SfMapMarker;
@@ -143,6 +197,13 @@ export type SfMapRendererProps = {
     markers?: SfMapMarker[];
     routes?: SfMapShape[];
     areas?: SfMapShape[];
+    circles?: SfMapCircle[];
+    mapType?: SfMapType;
+    /** Encuadre controlado. Sin `view`, `center`/`zoom` solo valen al montar (no recentra al mover puntos). */
+    view?: SfMapView;
+    onViewChange?: (view: SfMapView) => void;
+    /** Control de zoom propio del motor. `MapView` lo apaga cuando pinta sus propios controles. */
+    zoomControl?: boolean;
     height?: number | string;
     className?: string;
     readOnly?: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sfperusacdev/sf-ui",
-  "version": "0.2.3",
+  "version": "0.2.5",
   "description": "SF UI — librería de componentes React (inputs, tablas, hooks) para aplicaciones SF Perú.",
   "type": "module",
   "main": "./dist/sf-ui.umd.cjs",