@sfperusacdev/sf-ui 0.2.4 → 0.2.6

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.4",
+  "version": "0.2.6",
   "description": "SF UI — librería de componentes React (inputs, tablas, hooks) para aplicaciones SF Perú.",
   "type": "module",
   "main": "./dist/sf-ui.umd.cjs",