@sakaniui/react 0.10.1 → 0.11.0

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

@@ -0,0 +1,49 @@
+import { default as React } from 'react';
+import { LatLng } from './geo';
+export { useMapContext } from './context';
+export type { LatLng } from './geo';
+export interface MapView {
+    center: LatLng;
+    zoom: number;
+}
+export interface MapProps {
+    /** Where the map starts, as [latitude, longitude]. Changing it later flies the map there. */
+    center?: LatLng;
+    /** Starting zoom, 0 (whole world) to maxZoom. Changing it later animates to it. */
+    zoom?: number;
+    minZoom?: number;
+    maxZoom?: number;
+    /** Called whenever the user pans or zooms. */
+    onViewChange?: (view: MapView) => void;
+    /** Tile URL template with {z}, {x} and {y}. Defaults to OpenStreetMap. */
+    tileUrl?: string;
+    /**
+     * Tiles to use in dark mode, from a provider that has a dark style. Without it the same tiles are
+     * darkened with `--map-tile-filter` (flat dark land, blue water, roads darker than the land).
+     */
+    tileUrlDark?: string;
+    /**
+     * "auto" follows the surrounding theme (a `.dark` class on <html> or any ancestor). "dark" makes this map dark
+     * wherever it sits, like the Figma "Dark" example: tiles, markers, controls and popups all switch.
+     */
+    theme?: 'auto' | 'dark';
+    /** Attribution text required by the tile provider. Pass null to hide it (only if your provider allows). */
+    attribution?: React.ReactNode | null;
+    /** Show the zoom controls. Defaults to true. */
+    controls?: boolean;
+    /** Show the locate button (uses the browser's geolocation). Defaults to false. */
+    locate?: boolean;
+    /** Called with the user's position after the locate button finds it. */
+    onLocate?: (position: LatLng) => void;
+    /** Called when the locate button cannot find the user (permission denied, no signal, no support). */
+    onLocateError?: (error: GeolocationPositionError | Error) => void;
+    /** Height in px or any CSS length. Defaults to 400. */
+    height?: number | string;
+    /** Accessible name for the map region. Defaults to "Map". */
+    'aria-label'?: string;
+    className?: string;
+    /** MapMarker and MapPopup elements. */
+    children?: React.ReactNode;
+}
+export declare const Map: React.FC<MapProps>;
+export default Map;

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

@@ -0,0 +1,22 @@
+import { default as React } from 'react';
+import { LatLng } from './geo';
+export interface MapClusterPoint {
+    id: string | number;
+    position: LatLng;
+}
+export interface MapClusterLayerProps<T extends MapClusterPoint = MapClusterPoint> {
+    points: T[];
+    /** Draws one place that is not clustered, usually a <MapMarker>. Give it the point's `id` as its key. */
+    renderPoint: (point: T) => React.ReactNode;
+    /** Grid size in px: larger groups more places together. Defaults to 56. */
+    radius?: number;
+    /** From this zoom up, nothing clusters. Defaults to 16. */
+    clusterMaxZoom?: number;
+    /** Called after a cluster is clicked, with the places in it. The map zooms to them first. */
+    onClusterClick?: (points: T[]) => void;
+}
+export declare function MapClusterLayer<T extends MapClusterPoint = MapClusterPoint>({ points, renderPoint, radius, clusterMaxZoom, onClusterClick, }: MapClusterLayerProps<T>): React.JSX.Element;
+export declare namespace MapClusterLayer {
+    var displayName: string;
+}
+export default MapClusterLayer;

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

@@ -0,0 +1,28 @@
+import { default as React } from 'react';
+import { IconComponent } from '../../icons/types';
+export interface MapControlButtonProps {
+    /** The icon, drawn at 16px. */
+    icon: IconComponent;
+    /** Accessible name; the button has no visible text. */
+    'aria-label': string;
+    disabled?: boolean;
+    /** Shows the hover appearance without a pointer (documentation and visual tests). */
+    hovered?: boolean;
+    onClick?: () => void;
+    className?: string;
+}
+export declare const MapControlButton: React.FC<MapControlButtonProps>;
+export interface MapControlsProps {
+    onZoomIn?: () => void;
+    onZoomOut?: () => void;
+    /** Disables the zoom-in button, e.g. at the map's maximum zoom. */
+    zoomInDisabled?: boolean;
+    zoomOutDisabled?: boolean;
+    /** Show the zoom group. Defaults to true. */
+    zoom?: boolean;
+    /** Show the locate button under it (Figma "Show locate"). Defaults to false. */
+    locate?: boolean;
+    onLocate?: () => void;
+    className?: string;
+}
+export declare const MapControls: React.FC<MapControlsProps>;

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

@@ -0,0 +1,50 @@
+import { default as React } from 'react';
+import { LatLng } from './geo';
+export interface MapGlobeMarker {
+    /** [latitude, longitude] */
+    position: LatLng;
+    /** Draws a pulsing ring around it. */
+    active?: boolean;
+    /** The larger halo, for the marker the user picked. */
+    selected?: boolean;
+    /** Shows the hover appearance without a pointer (documentation and visual tests). Real hover works on its own. */
+    hovered?: boolean;
+    /** Name shown in a small card above the marker while it is hovered or selected; also its accessible name. */
+    label?: string;
+}
+export interface MapGlobeArc {
+    from: LatLng;
+    to: LatLng;
+}
+export interface MapGlobeProps {
+    /** Which part gets the bright dots. Defaults to "land". */
+    variant?: 'land' | 'ocean';
+    /** The place facing the viewer at first, as [latitude, longitude]. */
+    center?: LatLng;
+    markers?: MapGlobeMarker[];
+    arcs?: MapGlobeArc[];
+    /** Spin on its own. Defaults to true (off under reduced motion). */
+    autoRotate?: boolean;
+    /** Degrees per second. Defaults to 6. */
+    rotationSpeed?: number;
+    /** Let people drag to spin it. Defaults to true. */
+    draggable?: boolean;
+    /** The soft halo past the edge. Defaults to true. */
+    atmosphere?: boolean;
+    /** Degrees between dots; smaller is denser. Defaults to 1.3. */
+    dotSpacing?: number;
+    /**
+     * "auto" follows the surrounding theme. "dark" draws light dots wherever the globe sits, for a globe on a
+     * dark surface inside a light page. (The globe has no background of its own; it takes the colour behind it.)
+     */
+    theme?: 'auto' | 'dark';
+    /** Called when a marker is clicked or activated from the keyboard (markers with a `label` get a hidden button). */
+    onMarkerClick?: (index: number, marker: MapGlobeMarker) => void;
+    /** Called when the pointer or keyboard focus moves onto a marker, and with null when it leaves. */
+    onMarkerHover?: (index: number | null) => void;
+    /** Accessible description. Defaults to "Globe". */
+    'aria-label'?: string;
+    className?: string;
+}
+export declare const MapGlobe: React.FC<MapGlobeProps>;
+export default MapGlobe;

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

@@ -0,0 +1,24 @@
+import { default as React } from 'react';
+import { LatLng } from './geo';
+export type MapMarkerVariant = 'pin' | 'dot' | 'cluster';
+export interface MapMarkerProps {
+    /** [latitude, longitude] */
+    position: LatLng;
+    variant?: MapMarkerVariant;
+    /** Number shown on a cluster. */
+    count?: number;
+    selected?: boolean;
+    /** Shows the hover appearance without a pointer (documentation and visual tests). Real hover works on its own. */
+    hovered?: boolean;
+    /**
+     * Milliseconds to slide to a new `position` instead of jumping, for markers fed by a live source
+     * (about the interval between updates reads as continuous). Off by default; reduced motion turns it off.
+     */
+    glide?: number;
+    /** Accessible name, e.g. the place's name. */
+    label?: string;
+    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    className?: string;
+}
+export declare const MapMarker: React.FC<MapMarkerProps>;
+export default MapMarker;

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

@@ -0,0 +1,21 @@
+import { default as React } from 'react';
+import { LatLng } from './geo';
+export interface MapPopupProps {
+    /** [latitude, longitude] the pointer points at. */
+    position: LatLng;
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    /** Shows a close button when given. */
+    onClose?: () => void;
+    /** Gap between the place and the pointer tip, in px. Defaults to 48 (above a pin); use 14 for a dot. */
+    offset?: number;
+    /** Show the pointer notch under the card (Figma "Show pointer"). Defaults to true. */
+    pointer?: boolean;
+    /** Milliseconds to follow a moving `position`; use the same value as the marker it points at. */
+    glide?: number;
+    /** Extra content under the description (actions, a thumbnail...). */
+    children?: React.ReactNode;
+    className?: string;
+}
+export declare const MapPopup: React.FC<MapPopupProps>;
+export default MapPopup;

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

@@ -0,0 +1,18 @@
+import { default as React } from 'react';
+import { LatLng } from './geo';
+export interface MapContextValue {
+    /** Container pixel position of a place, or null when it is far outside the view. */
+    project: (position: LatLng) => {
+        x: number;
+        y: number;
+    } | null;
+    zoom: number;
+    /** Ease the map to a place (and zoom). */
+    flyTo: (center: LatLng, zoom?: number) => void;
+    /** Ease the map so every place in the list is in view. */
+    fitBounds: (places: LatLng[], padding?: number) => void;
+    maxZoom: number;
+}
+export declare const MapContext: React.Context<MapContextValue | null>;
+/** For MapMarker / MapPopup / MapClusterLayer (and custom overlays): projects places into the map's pixels. */
+export declare function useMapContext(): MapContextValue;

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

@@ -0,0 +1,41 @@
+/**
+ * Map maths shared by Map (Web Mercator tiles) and MapGlobe (orthographic
+ * dotted sphere). Plain functions, no dependencies.
+ */
+/** [latitude, longitude] in degrees. */
+export type LatLng = [number, number];
+export declare const TILE_SIZE = 256;
+export declare const clamp: (v: number, lo: number, hi: number) => number;
+export declare const wrapLng: (lng: number) => number;
+export declare function toWorld([lat, lng]: LatLng, zoom: number): {
+    x: number;
+    y: number;
+};
+export declare function fromWorld(x: number, y: number, zoom: number): LatLng;
+export declare function isLand(lat: number, lng: number): boolean;
+export interface GlobeDot {
+    cp: number;
+    sp: number;
+    lam: number;
+    land: boolean;
+}
+/** Rings of latitude, with dots spaced evenly along each ring. */
+export declare function globeDots(step: number): GlobeDot[];
+/** Orthographic projection centred on [tilt, rotLng]: x right, y up, z toward the viewer. */
+export declare function orthographic(rotLng: number, tilt: number): (cp: number, sp: number, lam: number) => {
+    x: number;
+    y: number;
+    z: number;
+};
+export declare const sphere: ([lat, lng]: LatLng) => {
+    cp: number;
+    sp: number;
+    lam: number;
+};
+/** A great-circle arc between two places, lifted off the surface toward its middle. */
+export declare function arcPath(from: LatLng, to: LatLng, segments?: number, lift?: number): {
+    cp: number;
+    sp: number;
+    lam: number;
+    h: number;
+}[];

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

@@ -0,0 +1,13 @@
+export { Map, default } from './Map';
+export type { MapProps, MapView, LatLng } from './Map';
+export { useMapContext } from './context';
+export { MapMarker } from './MapMarker';
+export type { MapMarkerProps, MapMarkerVariant } from './MapMarker';
+export { MapPopup } from './MapPopup';
+export type { MapPopupProps } from './MapPopup';
+export { MapGlobe } from './MapGlobe';
+export type { MapGlobeProps, MapGlobeMarker, MapGlobeArc } from './MapGlobe';
+export { MapClusterLayer } from './MapClusterLayer';
+export type { MapClusterLayerProps, MapClusterPoint } from './MapClusterLayer';
+export { MapControlButton, MapControls } from './MapControls';
+export type { MapControlButtonProps, MapControlsProps } from './MapControls';

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

@@ -0,0 +1,9 @@
+/**
+ * Land mask for MapGlobe: Natural Earth 1:110m land (public domain), via the
+ * world-atlas package (ISC), rasterised to 1 degree cells. 360 x 180 bits,
+ * row-major from 89.5N, column 0 at 179.5W, most significant bit first.
+ * Generated; see THIRD_PARTY_NOTICES.md.
+ */
+export declare const LAND_MASK_W = 360;
+export declare const LAND_MASK_H = 180;
+export declare const LAND_MASK_B64: string;

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

@@ -0,0 +1,8 @@
+import { LatLng } from './geo';
+/**
+ * Eases a place from where it was to where it is now, in latitude and longitude, so a marker fed by
+ * a live source slides instead of jumping. Interpolating the place (not the pixels) keeps it correct
+ * while the map is also being panned or zoomed. Longitude takes the short way round the antimeridian.
+ * `ms` of 0, or reduced motion, returns the position untouched.
+ */
+export declare function useGlide(position: LatLng, ms?: number): LatLng;