@optimum-intelligence/opti-ui 0.6.2 → 0.7.1

package/CHANGELOG.md

@@ -3,6 +3,37 @@
 All notable changes to `@optimum-intelligence/opti-ui`. Versions follow [semver](https://semver.org/); while
 the version is `0.x`, minor releases may contain breaking changes, which are marked **Breaking**.
 
+## 0.7.1 (2026-11-03)
+
+### Fixed
+
+- `Map.Root` works in any app without bundler config: MapLibre's worker is now bundled into the library
+  and started from a `blob:` URL instead of a `?url` import that only Vite could resolve. A strict
+  Content-Security-Policy needs `worker-src blob:`.
+
+### Changed
+
+- `maplibre-gl` is pinned to `6.16.0`, so the bundled worker always matches the installed MapLibre.
+
+## 0.7.0 (2026-11-03)
+
+### Added
+
+- Map components in a new `@optimum-intelligence/opti-ui/map` entry, on MapLibre (`maplibre-gl` and
+  `@vis.gl/react-maplibre` are installed with the package; import `@optimum-intelligence/opti-ui/map.css`
+  once): `Map.Root`, `Map.Routes`, `Map.Areas`,
+  `Map.Points`, `Map.Marker`, `Map.Popup`, `Map.Tooltip`, `Map.Overlay`, `Map.Legend`,
+  `Map.BaseLayerSwitch`, plus `rasterStyle()` and `useResolvedColors()`. `Map.Root expandable` adds a
+  button that expands the map over the window, and `Map.Marker dimmed` fades a pin with the selection.
+- `seriesColor(index)` for the chart palette, and the `--oui-map-route-weight`, `--oui-map-casing-color`
+  and `--oui-map-dim-opacity` tokens.
+
+### Changed
+
+- **Breaking:** the chart palette has eight tokens, `--oui-color-chart-1` to `-8`, taken from the colour
+  tones (blue, warning, green, pink, cyan, purple, yellow, accent) and following dark mode. The values of
+  `-1` to `-5` change.
+
 ## 0.6.2 (2026-10-27)
 
 ### Fixed

package/README.md

@@ -78,7 +78,8 @@ so the components work in Next.js App Router.
 | Overlays | `Dialog.*` (modal, or a sheet with `placement`), `AlertDialog.*`, `Drawer` (detail side panel), `Popover.*`, `PreviewCard.*`, `Tooltip`, `ToastProvider` + `useToast()`, `CommandPalette` |
 | Disclosure & navigation | `Tabs.*`, `Accordion.*`, `Collapsible.*`, `Breadcrumbs` + `Breadcrumb`, `Pagination`, `Stepper` |
 | Feedback & data | `Alert`, `Badge`, `Tag`, `Avatar`, `AvatarGroup`, `Progress`, `Meter`, `Skeleton`, `SkeletonText`, `Spinner`, `Table` (+ parts), `DataTable`, `EmptyState`, `Heading`, `Text`, `Eyebrow`, `Link` |
-| Theme | `ThemeProvider`, `createTheme`, `themeToStyle`, `DateConfigProvider`, `useDateConfig`, icons (`CheckIcon`, `ChevronDownIcon`, …) |
+| Maps (`/map` entry) | `Map.Root`, `Map.Routes`, `Map.Areas`, `Map.Points`, `Map.Marker`, `Map.Popup`, `Map.Tooltip`, `Map.Overlay`, `Map.Legend`, `Map.BaseLayerSwitch`, `rasterStyle`, `useResolvedColors` (see [Maps](#maps)) |
+| Theme | `ThemeProvider`, `createTheme`, `themeToStyle`, `seriesColor`, `DateConfigProvider`, `useDateConfig`, icons (`CheckIcon`, `ChevronDownIcon`, …) |
 
 Components with a common one-line form can be called directly, and their parts are attached for full
 control: `<Select items={…} />` or `<Select.Root>…<Select.Trigger/>…</Select.Root>`; the same applies to
@@ -201,6 +202,49 @@ components the same table.
 `Calendar`, `FileUpload`, `Stepper`) take a `labels` prop for translation, and the date components take a
 `locale`.
 
+## Maps
+
+Map components live in a separate entry, `@optimum-intelligence/opti-ui/map`, so apps without maps never
+load MapLibre. `maplibre-gl` and `@vis.gl/react-maplibre` are installed with the package. Import the map
+stylesheet once; it holds MapLibre's CSS in a cascade layer below the library's, so the oui map styles win.
+`Map.Root` starts MapLibre's web worker itself from a bundled copy, so no bundler config is needed. The
+worker runs from a `blob:` URL: with a strict Content-Security-Policy, allow `worker-src blob:`.
+
+```tsx
+import '@optimum-intelligence/opti-ui/map.css';
+import { seriesColor } from '@optimum-intelligence/opti-ui';
+import { Map } from '@optimum-intelligence/opti-ui/map';
+
+const baseLayers = [
+  {
+    id: 'streets',
+    label: 'Streets',
+    style: 'https://tiles.openfreemap.org/styles/bright',
+    darkStyle: 'https://tiles.openfreemap.org/styles/dark',
+  },
+];
+
+<Map.Root baseLayers={baseLayers} fit="selected">
+  <Map.Routes items={trips} selectedIds={selected} onItemClick={(trip) => setSelected([trip.id])} />
+  <Map.Marker kind="depot" position={[19.06, 47.49]} />
+  <Map.Overlay position="top-left">
+    <Map.Legend
+      items={trips.map((trip, i) => ({ id: trip.id, label: trip.name, color: seriesColor(i) }))}
+      selectionMode="single"
+      selectedIds={selected}
+      onSelectedIdsChange={setSelected}
+    />
+  </Map.Overlay>
+</Map.Root>
+```
+
+The library hardcodes no tile provider: every base map comes from `baseLayers`, as a style URL, a style
+object, or `rasterStyle(tilesUrl, attribution)` for a raster tile template. [OpenFreeMap](https://openfreemap.org)
+styles work without an API key. Check the terms of any imagery provider before using it in production;
+the satellite layer in the showcase is for the demo only. Data parts (`Map.Routes`, `Map.Areas`,
+`Map.Points`) take arrays and draw each array as one layer set, so thousands of items are fine; their
+colours follow the `--oui-*` tokens and dark mode.
+
 ## Customization
 
 Start with the simplest option that does what you need:

package/dist/components/map/Map.d.ts

@@ -0,0 +1,374 @@
+import * as React from 'react';
+import { type ControlPosition, type MapLayerMouseEvent, type MapProps, type MapRef, type PopupProps, type StyleSpecification } from '@vis.gl/react-maplibre';
+import { type SegmentedControlProps } from '../toggle/Toggle';
+/** A `[longitude, latitude]` pair. */
+export type MapPosition = [number, number];
+/** Status tone for areas, points and markers. */
+export type MapTone = 'neutral' | 'accent' | 'success' | 'warning' | 'danger';
+/** What `Map.Root` zooms to: all data, the selected items (all data when nothing is selected), or nothing. */
+export type MapFit = 'data' | 'selected' | 'none';
+/** Corner of the map for `Map.Overlay`. */
+export type MapOverlayPosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+/** Pin shape of `Map.Marker`. */
+export type MapMarkerKind = 'stop' | 'depot' | 'vehicle' | 'point';
+/** Selection behaviour of `Map.Legend`. */
+export type MapLegendSelectionMode = 'none' | 'single' | 'multi';
+/** One switchable base map. */
+export interface MapBaseLayer {
+    /** Stable id, used by `baseLayer` and `Map.BaseLayerSwitch`. */
+    id: string;
+    /** Name shown in `Map.BaseLayerSwitch`. */
+    label: React.ReactNode;
+    /** Style URL or a full style object. Use `rasterStyle()` for a raster tile template. */
+    style: string | StyleSpecification;
+    /** Style used instead of `style` when the map sits in dark mode. */
+    darkStyle?: string | StyleSpecification;
+    /** Extra attribution text shown with the style's own. */
+    attribution?: string;
+}
+/** Texts built into the map components. */
+export interface MapLabels {
+    /** Zoom-in button. */
+    zoomIn: string;
+    /** Zoom-out button. */
+    zoomOut: string;
+    /** Legend button that shows every item. */
+    showAll: string;
+    /** Legend button that hides every item. */
+    hideAll: string;
+    /** Prefix of a legend item's show button, e.g. "Show Trip 1". */
+    show: string;
+    /** Prefix of a legend item's hide button. */
+    hide: string;
+    /** Accessible name of depot markers. */
+    depot: string;
+    /** Shown over the map when every data part is empty. */
+    noData: string;
+    /** Button that expands the map to fill the window (`expandable`). */
+    expand: string;
+    /** Button that returns the expanded map to its place. */
+    collapse: string;
+}
+/** A GeoJSON `Polygon`: an outer ring and optional holes, each a list of `[longitude, latitude]`. */
+export interface MapPolygon {
+    /** GeoJSON geometry type. */
+    type: 'Polygon';
+    /** Rings of positions; the first is the outline, the rest are holes. */
+    coordinates: number[][][];
+}
+/** A GeoJSON `MultiPolygon`: several polygons drawn as one area. */
+export interface MapMultiPolygon {
+    /** GeoJSON geometry type. */
+    type: 'MultiPolygon';
+    /** One list of rings per polygon. */
+    coordinates: number[][][][];
+}
+/** Starting camera: a centre and zoom, or bounds to fit. */
+export type MapView = {
+    longitude: number;
+    latitude: number;
+    zoom: number;
+} | {
+    bounds: [MapPosition, MapPosition];
+};
+/**
+ * Builds a MapLibre style from a raster tile URL template (`{z}`, `{x}`, `{y}`), for `MapBaseLayer.style`.
+ *
+ * @example
+ * const satellite = rasterStyle('https://tiles.example.com/{z}/{x}/{y}.jpg', '© Example');
+ */
+export declare function rasterStyle(tiles: string | string[], attribution?: string, tileSize?: number): StyleSpecification;
+export interface MapRootProps extends Omit<MapProps, 'mapStyle' | 'initialViewState' | 'interactiveLayerIds' | 'cursor' | 'locale' | 'style' | 'children' | 'id' | 'attributionControl' | 'workerUrl' | 'mapLib'> {
+    /** Ref to the map instance (`flyTo`, `getMap()`, …), set once the map has loaded MapLibre. */
+    ref?: React.Ref<MapRef>;
+    /** Base maps to choose from. The first is shown unless `baseLayer` or `defaultBaseLayer` says otherwise. */
+    baseLayers: MapBaseLayer[];
+    /** Id of the shown base map (controlled). */
+    baseLayer?: string;
+    /** Id of the initially shown base map when uncontrolled. */
+    defaultBaseLayer?: string;
+    /** Called with the base map id that `Map.BaseLayerSwitch` picked. */
+    onBaseLayerChange?: (id: string) => void;
+    /** Starting camera, used until `fit` moves it. */
+    initialView?: MapView;
+    /**
+     * Zooms to the data (`data`) or to the selection, falling back to the data (`selected`). Data changes
+     * refit until the user pans or zooms the map; selection changes always refit with `selected`.
+     */
+    fit?: MapFit;
+    /** Translations of the built-in texts; also passed to MapLibre's control strings. */
+    labels?: Partial<MapLabels>;
+    /** Corner of the zoom buttons, or `false` to hide them. */
+    controlsPosition?: ControlPosition | false;
+    /**
+     * Adds a button, next to the zoom buttons, that expands the map over the whole window (not browser
+     * fullscreen) above the page, at the dialog z-index. Escape or the button returns it.
+     */
+    expandable?: boolean;
+    /** Classes for the map container. Set its height in CSS (`--oui-map-height`, default 24rem). */
+    className?: string;
+    /** Inline styles for the map container. */
+    style?: React.CSSProperties;
+    /** Data parts (`Map.Routes`, `Map.Areas`, …), markers, popups and overlays. */
+    children?: React.ReactNode;
+}
+/**
+ * A MapLibre map styled and themed with the library tokens. Holds the base layer state and routes clicks
+ * and hovers to the data parts inside it. `Map.Root` › data parts (`Map.Areas`, `Map.Routes`,
+ * `Map.Points`) and `Map.Marker`s, with `Map.Overlay`s for legends, switches and cards on top.
+ * Needs `@optimum-intelligence/opti-ui/map.css` imported. MapLibre's worker is bundled and runs from a blob URL, so a
+ * strict Content-Security-Policy needs `worker-src blob:`.
+ *
+ * @example
+ * <Map.Root
+ *   baseLayers={[{ id: 'streets', label: 'Streets', style: 'https://tiles.openfreemap.org/styles/bright' }]}
+ *   initialView={{ longitude: 19.04, latitude: 47.5, zoom: 10 }}
+ * >
+ *   <Map.Routes
+ *     items={[{ id: 'trip-1', coordinates: [[19.0, 47.48], [19.08, 47.52]] }]}
+ *     selectedIds={selected}
+ *     onItemClick={(trip) => setSelected([trip.id])}
+ *   />
+ *   <Map.Marker kind="depot" position={[19.0, 47.48]} />
+ * </Map.Root>
+ */
+declare function MapRoot({ ref, baseLayers, baseLayer, defaultBaseLayer, onBaseLayerChange, initialView, fit, labels, controlsPosition, expandable, className, style, children, onClick, onMouseMove, onMouseOut, ...props }: MapRootProps): React.JSX.Element;
+export interface MapRouteItem {
+    /** Unique id; reported back by `onItemClick` and used in `selectedIds`. */
+    id: string;
+    /** Line vertices as `[longitude, latitude]`. */
+    coordinates: MapPosition[];
+    /** Any CSS colour, `var(--oui-…)` included. Wins over `colorIndex`. */
+    color?: string;
+    /**
+     * Series index for `seriesColor()`. Defaults to the item's index in `items`, so pass it (or `color`)
+     * when you filter `items`; otherwise colours shift and stop matching the legend.
+     */
+    colorIndex?: number;
+    /** Draws a dashed line, e.g. for a planned or return leg. */
+    dashed?: boolean;
+}
+export interface MapRoutesProps {
+    /** Routes to draw. All of them go into one GeoJSON source, so thousands are fine. */
+    items: MapRouteItem[];
+    /** Ids of selected routes. While it is not empty, other routes fade to `--oui-map-dim-opacity`. */
+    selectedIds?: string[];
+    /** Called with the clicked route. */
+    onItemClick?: (item: MapRouteItem, event: MapLayerMouseEvent) => void;
+    /** Called with the route under the pointer, and with `null` when the pointer leaves it. */
+    onItemHover?: (item: MapRouteItem | null, event: MapLayerMouseEvent) => void;
+}
+/**
+ * Lines such as trips or tracks, drawn as one source with a casing, a solid and a dashed layer. Selected
+ * routes get a halo in the surface colour; hover and selection use feature state, so they never rebuild
+ * the data. Colours come from `color` or the chart palette.
+ *
+ * @example
+ * <Map.Routes
+ *   items={trips.map((t) => ({ id: t.id, coordinates: t.path, dashed: t.planned }))}
+ *   selectedIds={selected}
+ *   onItemClick={(trip) => setSelected([trip.id])}
+ * />
+ */
+declare function MapRoutes({ items, selectedIds, onItemClick, onItemHover }: MapRoutesProps): React.JSX.Element;
+export interface MapAreaItem {
+    /** Unique id; reported back by `onItemClick` and used in `selectedIds`. */
+    id: string;
+    /** Outline of the area, in `[longitude, latitude]` coordinates. */
+    geometry: MapPolygon | MapMultiPolygon;
+    /** Fill and outline colour from the status tokens (`-subtle` fill, `-border` outline). */
+    tone?: MapTone;
+}
+export interface MapAreasProps {
+    /** Areas to draw, all in one GeoJSON source. */
+    items: MapAreaItem[];
+    /** Ids of selected areas. While it is not empty, other areas fade to `--oui-map-dim-opacity`. */
+    selectedIds?: string[];
+    /** Called with the clicked area. */
+    onItemClick?: (item: MapAreaItem, event: MapLayerMouseEvent) => void;
+    /** Called with the area under the pointer, and with `null` when the pointer leaves it. */
+    onItemHover?: (item: MapAreaItem | null, event: MapLayerMouseEvent) => void;
+}
+/**
+ * Polygons such as fields, zones or service areas, as one fill and one outline layer. Selected and
+ * hovered areas get a heavier outline.
+ *
+ * @example
+ * <Map.Areas items={fields.map((f) => ({ id: f.id, geometry: f.shape, tone: f.late ? 'warning' : 'success' }))} />
+ */
+declare function MapAreas({ items, selectedIds, onItemClick, onItemHover }: MapAreasProps): React.JSX.Element;
+export interface MapPointItem {
+    /** Unique id; reported back by `onItemClick` and used in `selectedIds`. */
+    id: string;
+    /** `[longitude, latitude]`. */
+    coordinates: MapPosition;
+    /** Any CSS colour, `var(--oui-…)` included. Wins over `tone` and `colorIndex`. */
+    color?: string;
+    /** Status colour. Wins over `colorIndex`. */
+    tone?: MapTone;
+    /**
+     * Series index for `seriesColor()`. Defaults to the item's index in `items`, so pass it (or `color`)
+     * when you filter `items`; otherwise colours shift and stop matching the legend.
+     */
+    colorIndex?: number;
+}
+export interface MapPointsProps {
+    /** Points to draw, all in one GeoJSON source and one circle layer. */
+    items: MapPointItem[];
+    /** Ids of selected points. While it is not empty, other points fade to `--oui-map-dim-opacity`. */
+    selectedIds?: string[];
+    /** Called with the clicked point. */
+    onItemClick?: (item: MapPointItem, event: MapLayerMouseEvent) => void;
+    /** Called with the point under the pointer, and with `null` when the pointer leaves it. */
+    onItemHover?: (item: MapPointItem | null, event: MapLayerMouseEvent) => void;
+}
+/**
+ * Many simple points (sensors, stops, events) as one circle layer. For a few dozen styled pins with HTML
+ * content, use `Map.Marker` instead.
+ *
+ * @example
+ * <Map.Points items={sensors.map((s) => ({ id: s.id, coordinates: s.position, tone: s.ok ? 'success' : 'danger' }))} />
+ */
+declare function MapPoints({ items, selectedIds, onItemClick, onItemHover }: MapPointsProps): React.JSX.Element;
+export interface MapMarkerProps {
+    /** `[longitude, latitude]` of the pin. */
+    position: MapPosition;
+    /** Pin shape: a numbered `stop`, a `depot`, a `vehicle` or a small `point`. */
+    kind?: MapMarkerKind;
+    /** Number shown in a `stop` pin. */
+    sequence?: number;
+    /** Any CSS colour for the pin. Wins over `tone`. */
+    color?: string;
+    /** Status colour for the pin. */
+    tone?: MapTone;
+    /** Accessible name and tooltip text. Depots default to the `depot` label. */
+    label?: string;
+    /** Marks the pin as selected (larger, with a ring). */
+    selected?: boolean;
+    /** Fades the pin to `--oui-map-dim-opacity`, e.g. for stops of trips that are not selected. */
+    dimmed?: boolean;
+    /** Called when the pin is clicked. */
+    onClick?: () => void;
+    /** Custom pin content, replacing the built-in shape. */
+    children?: React.ReactNode;
+    /** Classes for the pin element. */
+    className?: string;
+}
+/**
+ * An HTML pin at one position: numbered stops, depots, vehicles. Each marker is a DOM element, so use it
+ * for dozens of pins, not thousands (use `Map.Points` for those).
+ *
+ * @example
+ * <Map.Marker kind="stop" sequence={3} position={[19.05, 47.5]} color={seriesColor(0)} />
+ */
+declare function MapMarker({ position, kind, sequence, color, tone, label, selected, dimmed, onClick, children, className, }: MapMarkerProps): React.JSX.Element;
+export interface MapPopupProps extends Omit<PopupProps, 'longitude' | 'latitude'> {
+    /** `[longitude, latitude]` the popup points at. */
+    position: MapPosition;
+}
+/**
+ * A popup anchored to a position, styled as a library card. Render it while something is selected and
+ * close it from `onClose`.
+ *
+ * @example
+ * {picked && (
+ *   <Map.Popup position={picked.position} onClose={() => setPicked(null)}>
+ *     <strong>{picked.name}</strong>
+ *   </Map.Popup>
+ * )}
+ */
+declare function MapPopup({ position, className, offset, maxWidth, ...props }: MapPopupProps): React.JSX.Element;
+/**
+ * Hover content: a popup without a close button that stays open on map clicks. Show it from
+ * `onItemHover` and hide it when the item is `null`.
+ *
+ * @example
+ * {hovered && <Map.Tooltip position={hovered.position}>{hovered.name}</Map.Tooltip>}
+ */
+declare function MapTooltip({ position, className, offset, ...props }: MapPopupProps): React.JSX.Element;
+export interface MapOverlayProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Ref to the overlay element. */
+    ref?: React.Ref<HTMLDivElement>;
+    /** Corner the overlay sits in. Overlays in the same corner as the zoom buttons cover them. */
+    position?: MapOverlayPosition;
+}
+/** Content floating over a corner of the map: stat cards, selects, a legend or `Map.BaseLayerSwitch`. */
+declare function MapOverlay({ position, className, ref, ...props }: MapOverlayProps): React.JSX.Element;
+export interface MapLegendItem {
+    /** Id matching the data items it stands for. */
+    id: string;
+    /** Text of the entry. */
+    label: React.ReactNode;
+    /** Swatch colour: any CSS colour, e.g. `seriesColor(i)`. */
+    color: string;
+    /** Whether the entry's data is shown. Defaults to `true`. */
+    visible?: boolean;
+    /** Number shown at the end of the entry. */
+    count?: React.ReactNode;
+}
+export interface MapLegendProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    /** Ref to the legend element. */
+    ref?: React.Ref<HTMLDivElement>;
+    /** Entries in order. */
+    items: MapLegendItem[];
+    /** Whether clicking an entry selects it: `single` keeps one, `multi` toggles each. */
+    selectionMode?: MapLegendSelectionMode;
+    /** Ids of the selected entries (controlled). */
+    selectedIds?: string[];
+    /** Called with the new selected ids. */
+    onSelectedIdsChange?: (ids: string[]) => void;
+    /** Called with the ids to show or hide. Adds an eye button to every entry. */
+    onVisibilityChange?: (ids: string[], visible: boolean) => void;
+    /** Adds a show all / hide all button when `onVisibilityChange` is set. */
+    showAllToggle?: boolean;
+}
+/**
+ * The key to a map's colours, with optional selection and show/hide per entry. Plain DOM, so it also
+ * works outside the map; inside `Map.Root` it takes the root's labels. Put it in a `Map.Overlay`.
+ *
+ * @example
+ * <Map.Legend
+ *   items={trips.map((t, i) => ({ id: t.id, label: t.name, color: seriesColor(i), visible: !hidden.includes(t.id) }))}
+ *   selectionMode="multi"
+ *   selectedIds={selected}
+ *   onSelectedIdsChange={setSelected}
+ *   onVisibilityChange={(ids, visible) => setHidden((h) => (visible ? h.filter((id) => !ids.includes(id)) : [...h, ...ids]))}
+ *   showAllToggle
+ * />
+ */
+declare function MapLegend({ items, selectionMode, selectedIds, onSelectedIdsChange, onVisibilityChange, showAllToggle, className, ref, ...props }: MapLegendProps): React.JSX.Element;
+export interface MapBaseLayerSwitchProps extends Omit<SegmentedControlProps, 'options' | 'value' | 'defaultValue' | 'onValueChange'> {
+}
+/** Segmented switch between the root's `baseLayers` (e.g. streets and satellite). Put it in a `Map.Overlay`. */
+declare function MapBaseLayerSwitch({ size, ...props }: MapBaseLayerSwitchProps): React.JSX.Element;
+/**
+ * Map components on MapLibre, from `@optimum-intelligence/opti-ui/map`. `Map.Root` holds the map; inside
+ * it, `Map.Areas`, `Map.Routes` and `Map.Points` draw arrays of items as single GeoJSON layers,
+ * `Map.Marker` adds HTML pins, `Map.Popup` and `Map.Tooltip` show content at a position, and
+ * `Map.Overlay` floats `Map.Legend`, `Map.BaseLayerSwitch` or cards over a corner.
+ *
+ * @example
+ * <Map.Root baseLayers={baseLayers} fit="selected">
+ *   <Map.Areas items={zones} />
+ *   <Map.Routes items={trips} selectedIds={selected} onItemClick={(t) => setSelected([t.id])} />
+ *   <Map.Overlay position="top-left">
+ *     <Map.Legend items={legend} selectionMode="single" selectedIds={selected} onSelectedIdsChange={setSelected} />
+ *   </Map.Overlay>
+ *   <Map.Overlay position="bottom-left">
+ *     <Map.BaseLayerSwitch />
+ *   </Map.Overlay>
+ * </Map.Root>
+ */
+export declare const Map: {
+    Root: typeof MapRoot;
+    Routes: typeof MapRoutes;
+    Areas: typeof MapAreas;
+    Points: typeof MapPoints;
+    Marker: typeof MapMarker;
+    Popup: typeof MapPopup;
+    Tooltip: typeof MapTooltip;
+    Overlay: typeof MapOverlay;
+    Legend: typeof MapLegend;
+    BaseLayerSwitch: typeof MapBaseLayerSwitch;
+};
+export {};