@turingpaper/ui 0.0.1-test.6 → 0.0.1-test.7

package/dist/components/map.d.ts

@@ -0,0 +1,192 @@
+import { default as MapLibreGL, PopupOptions, MarkerOptions } from 'maplibre-gl';
+import { ReactNode } from 'react';
+type Theme = "light" | "dark";
+type MapContextValue = {
+    map: MapLibreGL.Map | null;
+    isLoaded: boolean;
+};
+declare function useMap(): MapContextValue;
+/** Map viewport state */
+type MapViewport = {
+    /** Center coordinates [longitude, latitude] */
+    center: [number, number];
+    /** Zoom level */
+    zoom: number;
+    /** Bearing (rotation) in degrees */
+    bearing: number;
+    /** Pitch (tilt) in degrees */
+    pitch: number;
+};
+type MapStyleOption = string | MapLibreGL.StyleSpecification;
+type MapRef = MapLibreGL.Map;
+declare const Map: import('react').ForwardRefExoticComponent<{
+    children?: ReactNode;
+    /** Additional CSS classes for the map container */
+    className?: string;
+    /**
+     * Theme for the map. If not provided, automatically detects system preference.
+     * Pass your theme value here.
+     */
+    theme?: Theme;
+    /** Custom map styles for light and dark themes. Overrides the default Carto styles. */
+    styles?: {
+        light?: MapStyleOption;
+        dark?: MapStyleOption;
+    };
+    /** Map projection type. Use `{ type: "globe" }` for 3D globe view. */
+    projection?: MapLibreGL.ProjectionSpecification;
+    /**
+     * Controlled viewport. When provided with onViewportChange,
+     * the map becomes controlled and viewport is driven by this prop.
+     */
+    viewport?: Partial<MapViewport>;
+    /**
+     * Callback fired continuously as the viewport changes (pan, zoom, rotate, pitch).
+     * Can be used standalone to observe changes, or with `viewport` prop
+     * to enable controlled mode where the map viewport is driven by your state.
+     */
+    onViewportChange?: (viewport: MapViewport) => void;
+    /** Show a loading indicator on the map */
+    loading?: boolean;
+} & Omit<MapLibreGL.MapOptions, "style" | "container"> & import('react').RefAttributes<MapLibreGL.Map>>;
+type MapMarkerProps = {
+    /** Longitude coordinate for marker position */
+    longitude: number;
+    /** Latitude coordinate for marker position */
+    latitude: number;
+    /** Marker subcomponents (MarkerContent, MarkerPopup, MarkerTooltip, MarkerLabel) */
+    children: ReactNode;
+    /** Callback when marker is clicked */
+    onClick?: (e: MouseEvent) => void;
+    /** Callback when mouse enters marker */
+    onMouseEnter?: (e: MouseEvent) => void;
+    /** Callback when mouse leaves marker */
+    onMouseLeave?: (e: MouseEvent) => void;
+    /** Callback when marker drag starts (requires draggable: true) */
+    onDragStart?: (lngLat: {
+        lng: number;
+        lat: number;
+    }) => void;
+    /** Callback during marker drag (requires draggable: true) */
+    onDrag?: (lngLat: {
+        lng: number;
+        lat: number;
+    }) => void;
+    /** Callback when marker drag ends (requires draggable: true) */
+    onDragEnd?: (lngLat: {
+        lng: number;
+        lat: number;
+    }) => void;
+} & Omit<MarkerOptions, "element">;
+declare function MapMarker({ longitude, latitude, children, onClick, onMouseEnter, onMouseLeave, onDragStart, onDrag, onDragEnd, draggable, ...markerOptions }: MapMarkerProps): import("react/jsx-runtime").JSX.Element;
+type MarkerContentProps = {
+    /** Custom marker content. Defaults to a blue dot if not provided */
+    children?: ReactNode;
+    /** Additional CSS classes for the marker container */
+    className?: string;
+};
+declare function MarkerContent({ children, className }: MarkerContentProps): import('react').ReactPortal;
+type MarkerPopupProps = {
+    /** Popup content */
+    children: ReactNode;
+    /** Additional CSS classes for the popup container */
+    className?: string;
+    /** Show a close button in the popup (default: false) */
+    closeButton?: boolean;
+} & Omit<PopupOptions, "className" | "closeButton">;
+declare function MarkerPopup({ children, className, closeButton, ...popupOptions }: MarkerPopupProps): import('react').ReactPortal;
+type MarkerTooltipProps = {
+    /** Tooltip content */
+    children: ReactNode;
+    /** Additional CSS classes for the tooltip container */
+    className?: string;
+} & Omit<PopupOptions, "className" | "closeButton" | "closeOnClick">;
+declare function MarkerTooltip({ children, className, ...popupOptions }: MarkerTooltipProps): import('react').ReactPortal;
+type MarkerLabelProps = {
+    /** Label text content */
+    children: ReactNode;
+    /** Additional CSS classes for the label */
+    className?: string;
+    /** Position of the label relative to the marker (default: "top") */
+    position?: "top" | "bottom";
+};
+declare function MarkerLabel({ children, className, position, }: MarkerLabelProps): import("react/jsx-runtime").JSX.Element;
+type MapControlsProps = {
+    /** Position of the controls on the map (default: "bottom-right") */
+    position?: "top-left" | "top-right" | "bottom-left" | "bottom-right";
+    /** Show zoom in/out buttons (default: true) */
+    showZoom?: boolean;
+    /** Show compass button to reset bearing (default: false) */
+    showCompass?: boolean;
+    /** Show locate button to find user's location (default: false) */
+    showLocate?: boolean;
+    /** Show fullscreen toggle button (default: false) */
+    showFullscreen?: boolean;
+    /** Additional CSS classes for the controls container */
+    className?: string;
+    /** Callback with user coordinates when located */
+    onLocate?: (coords: {
+        longitude: number;
+        latitude: number;
+    }) => void;
+};
+declare function MapControls({ position, showZoom, showCompass, showLocate, showFullscreen, className, onLocate, }: MapControlsProps): import("react/jsx-runtime").JSX.Element;
+type MapPopupProps = {
+    /** Longitude coordinate for popup position */
+    longitude: number;
+    /** Latitude coordinate for popup position */
+    latitude: number;
+    /** Callback when popup is closed */
+    onClose?: () => void;
+    /** Popup content */
+    children: ReactNode;
+    /** Additional CSS classes for the popup container */
+    className?: string;
+    /** Show a close button in the popup (default: false) */
+    closeButton?: boolean;
+} & Omit<PopupOptions, "className" | "closeButton">;
+declare function MapPopup({ longitude, latitude, onClose, children, className, closeButton, ...popupOptions }: MapPopupProps): import('react').ReactPortal;
+type MapRouteProps = {
+    /** Optional unique identifier for the route layer */
+    id?: string;
+    /** Array of [longitude, latitude] coordinate pairs defining the route */
+    coordinates: [number, number][];
+    /** Line color as CSS color value (default: "#4285F4") */
+    color?: string;
+    /** Line width in pixels (default: 3) */
+    width?: number;
+    /** Line opacity from 0 to 1 (default: 0.8) */
+    opacity?: number;
+    /** Dash pattern [dash length, gap length] for dashed lines */
+    dashArray?: [number, number];
+    /** Callback when the route line is clicked */
+    onClick?: () => void;
+    /** Callback when mouse enters the route line */
+    onMouseEnter?: () => void;
+    /** Callback when mouse leaves the route line */
+    onMouseLeave?: () => void;
+    /** Whether the route is interactive - shows pointer cursor on hover (default: true) */
+    interactive?: boolean;
+};
+declare function MapRoute({ id: propId, coordinates, color, width, opacity, dashArray, onClick, onMouseEnter, onMouseLeave, interactive, }: MapRouteProps): null;
+type MapClusterLayerProps<P extends GeoJSON.GeoJsonProperties = GeoJSON.GeoJsonProperties> = {
+    /** GeoJSON FeatureCollection data or URL to fetch GeoJSON from */
+    data: string | GeoJSON.FeatureCollection<GeoJSON.Point, P>;
+    /** Maximum zoom level to cluster points on (default: 14) */
+    clusterMaxZoom?: number;
+    /** Radius of each cluster when clustering points in pixels (default: 50) */
+    clusterRadius?: number;
+    /** Colors for cluster circles: [small, medium, large] based on point count (default: ["#22c55e", "#eab308", "#ef4444"]) */
+    clusterColors?: [string, string, string];
+    /** Point count thresholds for color/size steps: [medium, large] (default: [100, 750]) */
+    clusterThresholds?: [number, number];
+    /** Color for unclustered individual points (default: "#3b82f6") */
+    pointColor?: string;
+    /** Callback when an unclustered point is clicked */
+    onPointClick?: (feature: GeoJSON.Feature<GeoJSON.Point, P>, coordinates: [number, number]) => void;
+    /** Callback when a cluster is clicked. If not provided, zooms into the cluster */
+    onClusterClick?: (clusterId: number, coordinates: [number, number], pointCount: number) => void;
+};
+declare function MapClusterLayer<P extends GeoJSON.GeoJsonProperties = GeoJSON.GeoJsonProperties>({ data, clusterMaxZoom, clusterRadius, clusterColors, clusterThresholds, pointColor, onPointClick, onClusterClick, }: MapClusterLayerProps<P>): null;
+export { Map, useMap, MapMarker, MarkerContent, MarkerPopup, MarkerTooltip, MarkerLabel, MapPopup, MapControls, MapRoute, MapClusterLayer, };
+export type { MapRef, MapViewport };