@texturehq/edges 1.2.1 → 1.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components.manifest.json +32 -4
- package/dist/index.cjs +18 -18
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +285 -4
- package/dist/index.d.ts +285 -4
- package/dist/index.js +18 -18
- package/dist/index.js.map +1 -1
- package/dist/{server-C1hypeJ9.d.cts → server-iqeQRrwF.d.cts} +463 -159
- package/dist/{server-C1hypeJ9.d.ts → server-iqeQRrwF.d.ts} +463 -159
- package/dist/server.cjs +1 -1
- package/dist/server.cjs.map +1 -1
- package/dist/server.d.cts +1 -1
- package/dist/server.d.ts +1 -1
- package/dist/server.js +1 -1
- package/dist/server.js.map +1 -1
- package/dist/styles.css +53 -70
- package/dist/utilities.manifest.json +2 -2
- package/package.json +1 -1
|
@@ -628,221 +628,489 @@ interface LogoProps {
|
|
|
628
628
|
*/
|
|
629
629
|
declare const Logo: ({ className, showWordmark, width, fill }: LogoProps) => react_jsx_runtime.JSX.Element;
|
|
630
630
|
|
|
631
|
-
|
|
631
|
+
/**
|
|
632
|
+
* Layer System Types
|
|
633
|
+
*
|
|
634
|
+
* A clean, developer-friendly API for defining map layers that abstracts
|
|
635
|
+
* away Mapbox jargon while supporting vector tiles, GeoJSON, and custom markers.
|
|
636
|
+
*/
|
|
637
|
+
/**
|
|
638
|
+
* Color specification - supports design tokens, hex values, or property-based mapping
|
|
639
|
+
*/
|
|
640
|
+
type ColorSpec = {
|
|
641
|
+
token: string;
|
|
642
|
+
} | {
|
|
643
|
+
hex: string;
|
|
644
|
+
} | {
|
|
645
|
+
by: string;
|
|
646
|
+
mapping: Record<string, ColorSpec>;
|
|
647
|
+
};
|
|
648
|
+
/**
|
|
649
|
+
* Zoom-based interpolation for numeric values
|
|
650
|
+
*/
|
|
651
|
+
type ZoomStops<T extends number | string> = {
|
|
652
|
+
byZoom: [zoom: number, value: T][];
|
|
653
|
+
};
|
|
654
|
+
/**
|
|
655
|
+
* Numeric value that can be static or zoom-based
|
|
656
|
+
*/
|
|
657
|
+
type NumericValue = number | ZoomStops<number>;
|
|
658
|
+
/**
|
|
659
|
+
* Color value that can be static, token-based, or property-driven
|
|
660
|
+
*/
|
|
661
|
+
type ColorValue = ColorSpec | string;
|
|
662
|
+
/**
|
|
663
|
+
* Style configuration for rendering layers
|
|
664
|
+
*/
|
|
665
|
+
interface LayerStyle {
|
|
666
|
+
/** Line/border/fill color */
|
|
667
|
+
color?: ColorValue;
|
|
668
|
+
/** Line width in pixels */
|
|
669
|
+
width?: NumericValue;
|
|
670
|
+
/** Circle radius in pixels */
|
|
671
|
+
radius?: NumericValue;
|
|
672
|
+
/** Overall opacity (0-1) */
|
|
673
|
+
opacity?: number;
|
|
674
|
+
/** Fill opacity for polygons (0-1) */
|
|
675
|
+
fillOpacity?: number;
|
|
676
|
+
/** Border width for fills */
|
|
677
|
+
borderWidth?: number;
|
|
678
|
+
/** Border color for fills */
|
|
679
|
+
borderColor?: ColorValue;
|
|
680
|
+
}
|
|
681
|
+
/**
|
|
682
|
+
* How to render the layer geometry
|
|
683
|
+
*/
|
|
684
|
+
type RenderType = "line" | "fill" | "circle" | "symbol" | "heatmap";
|
|
685
|
+
/**
|
|
686
|
+
* Base properties common to all layer types
|
|
687
|
+
*/
|
|
688
|
+
interface BaseLayerSpec {
|
|
689
|
+
/** Unique identifier for this layer */
|
|
632
690
|
id: string;
|
|
633
|
-
|
|
634
|
-
|
|
635
|
-
|
|
691
|
+
/** Z-index for layer ordering (higher = on top) */
|
|
692
|
+
z?: number;
|
|
693
|
+
/** Whether layer is currently visible */
|
|
694
|
+
visible?: boolean;
|
|
695
|
+
/** Minimum zoom level to show layer */
|
|
696
|
+
minZoom?: number;
|
|
697
|
+
/** Maximum zoom level to show layer */
|
|
698
|
+
maxZoom?: number;
|
|
699
|
+
/** Legend configuration for UI */
|
|
700
|
+
legend?: {
|
|
701
|
+
label: string;
|
|
702
|
+
swatch: "line" | "dot" | "polygon" | "pin";
|
|
703
|
+
/** Color for the swatch (hex string or design token) */
|
|
704
|
+
color?: string;
|
|
705
|
+
/** Optional grouping for organizing layers in the control */
|
|
706
|
+
group?: string;
|
|
707
|
+
};
|
|
708
|
+
/** Event handlers for user interactions */
|
|
709
|
+
events?: {
|
|
710
|
+
/** Called when a feature in this layer is clicked */
|
|
711
|
+
onClick?: (feature: LayerFeature) => void;
|
|
712
|
+
/** Called when mouse enters a feature in this layer */
|
|
713
|
+
onMouseEnter?: (feature: LayerFeature) => void;
|
|
714
|
+
/** Called when mouse leaves a feature in this layer */
|
|
715
|
+
onMouseLeave?: () => void;
|
|
716
|
+
};
|
|
717
|
+
/** Tooltip configuration for this layer */
|
|
718
|
+
tooltip?: {
|
|
719
|
+
/** When to show the tooltip */
|
|
720
|
+
trigger: "hover" | "click";
|
|
721
|
+
/** Tooltip content - can be a function or static ReactNode */
|
|
722
|
+
content: ((feature: LayerFeature) => React.ReactNode) | React.ReactNode;
|
|
723
|
+
};
|
|
724
|
+
}
|
|
725
|
+
/**
|
|
726
|
+
* Feature data passed to event handlers
|
|
727
|
+
*/
|
|
728
|
+
interface LayerFeature {
|
|
729
|
+
id: string | number | undefined;
|
|
730
|
+
lngLat: [number, number];
|
|
731
|
+
properties: Record<string, any>;
|
|
732
|
+
layerId: string;
|
|
733
|
+
}
|
|
734
|
+
/**
|
|
735
|
+
* Vector tile layer (Mapbox Vector Tiles)
|
|
736
|
+
*/
|
|
737
|
+
interface VectorLayerSpec extends BaseLayerSpec {
|
|
738
|
+
kind: "vector";
|
|
739
|
+
/** Mapbox tileset URL (mapbox://...) or HTTP template */
|
|
740
|
+
tileset: string;
|
|
741
|
+
/** Source layer name within the tileset */
|
|
742
|
+
sourceLayer: string;
|
|
743
|
+
/** How to render the geometry */
|
|
744
|
+
renderAs: RenderType;
|
|
745
|
+
/** Visual styling */
|
|
746
|
+
style?: LayerStyle;
|
|
747
|
+
/** Mapbox filter expression (escape hatch for advanced filtering) */
|
|
748
|
+
filter?: any;
|
|
749
|
+
}
|
|
750
|
+
/**
|
|
751
|
+
* GeoJSON layer (client-side data or URL)
|
|
752
|
+
*/
|
|
753
|
+
interface GeoJsonLayerSpec extends BaseLayerSpec {
|
|
754
|
+
kind: "geojson";
|
|
755
|
+
/** GeoJSON object or URL returning GeoJSON */
|
|
756
|
+
data: GeoJSON.FeatureCollection | GeoJSON.Feature | string;
|
|
757
|
+
/** How to render the geometry */
|
|
758
|
+
renderAs: RenderType;
|
|
759
|
+
/** Visual styling */
|
|
760
|
+
style?: LayerStyle;
|
|
761
|
+
/** Whether to cluster point features */
|
|
762
|
+
cluster?: {
|
|
763
|
+
enabled: boolean;
|
|
764
|
+
radius?: number;
|
|
765
|
+
maxZoom?: number;
|
|
766
|
+
};
|
|
767
|
+
}
|
|
768
|
+
/**
|
|
769
|
+
* Custom marker layer using React components
|
|
770
|
+
*/
|
|
771
|
+
interface CustomPinsSpec<T = any> extends BaseLayerSpec {
|
|
772
|
+
kind: "customPins";
|
|
773
|
+
/**
|
|
774
|
+
* Array of data items to render as pins
|
|
775
|
+
* Note: Async functions are not yet supported - fetch data in your component
|
|
776
|
+
*/
|
|
777
|
+
data: T[];
|
|
778
|
+
/** Extract [lng, lat] from data item */
|
|
779
|
+
getPosition: (item: T) => [number, number];
|
|
780
|
+
/** React component to render for each marker */
|
|
781
|
+
pin: React.ComponentType<any>;
|
|
782
|
+
/** Props to pass to pin component */
|
|
783
|
+
pinProps?: (item: T) => Record<string, any>;
|
|
784
|
+
/** Client-side clustering configuration */
|
|
785
|
+
cluster?: {
|
|
786
|
+
enabled: boolean;
|
|
787
|
+
radius?: number;
|
|
788
|
+
maxZoom?: number;
|
|
789
|
+
};
|
|
790
|
+
}
|
|
791
|
+
/**
|
|
792
|
+
* Raster layer (images from tile servers)
|
|
793
|
+
*
|
|
794
|
+
* Used for satellite imagery, weather overlays, heatmaps from tile servers, etc.
|
|
795
|
+
*/
|
|
796
|
+
interface RasterLayerSpec extends BaseLayerSpec {
|
|
797
|
+
kind: "raster";
|
|
798
|
+
/**
|
|
799
|
+
* Raster tileset URL or tile template
|
|
800
|
+
* Examples:
|
|
801
|
+
* - "mapbox://mapbox.satellite"
|
|
802
|
+
* - "https://tile.openweathermap.org/map/temp_new/{z}/{x}/{y}.png?appid=..."
|
|
803
|
+
*/
|
|
804
|
+
tileset: string;
|
|
805
|
+
/** Tile size in pixels (256 or 512) */
|
|
806
|
+
tileSize?: 256 | 512;
|
|
807
|
+
/** Raster-specific styling */
|
|
808
|
+
style?: {
|
|
809
|
+
/** Overall opacity (0-1) */
|
|
810
|
+
opacity?: number;
|
|
811
|
+
/** Minimum brightness (-1 to 1, default 0) */
|
|
812
|
+
brightnessMin?: number;
|
|
813
|
+
/** Maximum brightness (-1 to 1, default 1) */
|
|
814
|
+
brightnessMax?: number;
|
|
815
|
+
/** Contrast adjustment (-1 to 1, default 0) */
|
|
816
|
+
contrast?: number;
|
|
817
|
+
/** Saturation adjustment (-1 to 1, default 0) */
|
|
818
|
+
saturation?: number;
|
|
819
|
+
/** Hue rotation in degrees (0-360) */
|
|
820
|
+
hueRotate?: number;
|
|
821
|
+
/** Fade duration when new tiles appear (ms, default 300) */
|
|
822
|
+
fadeDuration?: number;
|
|
823
|
+
};
|
|
636
824
|
}
|
|
637
|
-
|
|
638
825
|
/**
|
|
639
|
-
*
|
|
640
|
-
* Centralized configuration for theme and color mode handling
|
|
826
|
+
* Union of all layer types
|
|
641
827
|
*/
|
|
828
|
+
type LayerSpec = VectorLayerSpec | GeoJsonLayerSpec | CustomPinsSpec | RasterLayerSpec;
|
|
829
|
+
|
|
642
830
|
/**
|
|
643
|
-
*
|
|
831
|
+
* Unified map style configuration for all map components
|
|
644
832
|
*
|
|
645
|
-
*
|
|
646
|
-
*
|
|
833
|
+
* This module provides semantic map types (streets, satellite, neutral) that
|
|
834
|
+
* automatically adapt to light/dark mode based on the global ColorModeProvider.
|
|
647
835
|
*/
|
|
648
|
-
|
|
649
|
-
|
|
650
|
-
|
|
651
|
-
|
|
836
|
+
/**
|
|
837
|
+
* Semantic map types available for both InteractiveMap and StaticMap
|
|
838
|
+
* These are map TYPES, not themes - the actual light/dark theme is determined
|
|
839
|
+
* automatically by the ColorModeProvider.
|
|
840
|
+
*/
|
|
841
|
+
declare const MAP_TYPES: {
|
|
842
|
+
readonly streets: "streets";
|
|
843
|
+
readonly satellite: "satellite";
|
|
844
|
+
readonly neutral: "neutral";
|
|
652
845
|
};
|
|
846
|
+
/**
|
|
847
|
+
* Map type - represents the visual style of the map (roads vs satellite vs minimal)
|
|
848
|
+
*/
|
|
849
|
+
type MapType = keyof typeof MAP_TYPES;
|
|
653
850
|
|
|
654
|
-
|
|
655
|
-
|
|
656
|
-
|
|
657
|
-
|
|
658
|
-
|
|
659
|
-
|
|
660
|
-
|
|
661
|
-
|
|
662
|
-
|
|
663
|
-
|
|
851
|
+
/**
|
|
852
|
+
* Control position type
|
|
853
|
+
*/
|
|
854
|
+
type ControlPosition = "top-left" | "top-right" | "bottom-left" | "bottom-right";
|
|
855
|
+
/**
|
|
856
|
+
* Base control configuration
|
|
857
|
+
*/
|
|
858
|
+
interface BaseControl {
|
|
859
|
+
/**
|
|
860
|
+
* Optional unique identifier for the control
|
|
861
|
+
* Useful when rendering multiple controls of the same type
|
|
862
|
+
* @default auto-generated from type and index
|
|
863
|
+
*/
|
|
864
|
+
id?: string;
|
|
865
|
+
/**
|
|
866
|
+
* Position of the control on the map
|
|
867
|
+
* @default varies by control type
|
|
868
|
+
*/
|
|
869
|
+
position?: ControlPosition;
|
|
870
|
+
/**
|
|
871
|
+
* Custom inline styles for the control
|
|
872
|
+
*/
|
|
873
|
+
style?: React.CSSProperties;
|
|
874
|
+
/**
|
|
875
|
+
* Additional CSS classes
|
|
876
|
+
*/
|
|
664
877
|
className?: string;
|
|
665
|
-
|
|
666
|
-
|
|
667
|
-
|
|
668
|
-
|
|
669
|
-
|
|
670
|
-
|
|
671
|
-
state?: string[];
|
|
672
|
-
search?: string;
|
|
673
|
-
};
|
|
674
|
-
serverSideClusteringEnabled?: boolean;
|
|
878
|
+
}
|
|
879
|
+
/**
|
|
880
|
+
* Navigation control configuration (compass + geolocate + optional reset zoom)
|
|
881
|
+
*/
|
|
882
|
+
interface NavigationControl extends BaseControl {
|
|
883
|
+
type: "navigation";
|
|
675
884
|
/**
|
|
676
|
-
*
|
|
677
|
-
* @default
|
|
885
|
+
* Show compass button (mobile only)
|
|
886
|
+
* @default true
|
|
678
887
|
*/
|
|
679
|
-
|
|
680
|
-
mapboxAccessToken?: string;
|
|
681
|
-
transformRequest?: (url: string, resourceType?: string) => {
|
|
682
|
-
url: string;
|
|
683
|
-
headers?: Record<string, string>;
|
|
684
|
-
};
|
|
888
|
+
showCompass?: boolean;
|
|
685
889
|
/**
|
|
686
|
-
* Show
|
|
890
|
+
* Show geolocate button
|
|
891
|
+
* @default true
|
|
892
|
+
*/
|
|
893
|
+
showGeolocate?: boolean;
|
|
894
|
+
/**
|
|
895
|
+
* Show reset zoom button at the top of the control group
|
|
687
896
|
* @default false
|
|
688
897
|
*/
|
|
689
|
-
|
|
898
|
+
showResetZoom?: boolean;
|
|
690
899
|
/**
|
|
691
|
-
*
|
|
900
|
+
* Callback when reset zoom is clicked
|
|
692
901
|
*/
|
|
693
|
-
|
|
694
|
-
/**
|
|
695
|
-
* Show navigation control (compass and geolocate)
|
|
696
|
-
* @default true
|
|
697
|
-
*/
|
|
698
|
-
navigation?: boolean;
|
|
699
|
-
/**
|
|
700
|
-
* Show layers control
|
|
701
|
-
* @default false
|
|
702
|
-
*/
|
|
703
|
-
layers?: boolean;
|
|
704
|
-
/**
|
|
705
|
-
* Show search control
|
|
706
|
-
* @default false
|
|
707
|
-
*/
|
|
708
|
-
search?: boolean;
|
|
709
|
-
/**
|
|
710
|
-
* Show list control
|
|
711
|
-
* @default false
|
|
712
|
-
*/
|
|
713
|
-
list?: boolean;
|
|
714
|
-
/**
|
|
715
|
-
* Show reset zoom control
|
|
716
|
-
* @default true
|
|
717
|
-
*/
|
|
718
|
-
resetZoom?: boolean;
|
|
719
|
-
};
|
|
902
|
+
onResetZoom?: () => void;
|
|
720
903
|
/**
|
|
721
|
-
*
|
|
904
|
+
* Callback when compass is clicked
|
|
722
905
|
*/
|
|
723
|
-
|
|
724
|
-
id: string;
|
|
725
|
-
name: string;
|
|
726
|
-
visible: boolean;
|
|
727
|
-
onToggle: (id: string, visible: boolean) => void;
|
|
728
|
-
}>;
|
|
906
|
+
onCompassClick?: () => void;
|
|
729
907
|
/**
|
|
730
|
-
*
|
|
908
|
+
* Callback when geolocate is clicked
|
|
731
909
|
*/
|
|
732
|
-
|
|
733
|
-
|
|
734
|
-
|
|
735
|
-
|
|
736
|
-
|
|
910
|
+
onGeolocateClick?: () => void;
|
|
911
|
+
}
|
|
912
|
+
/**
|
|
913
|
+
* Layers control configuration (map type + layer toggles)
|
|
914
|
+
*/
|
|
915
|
+
interface LayersControl extends BaseControl {
|
|
916
|
+
type: "layers";
|
|
737
917
|
/**
|
|
738
|
-
*
|
|
918
|
+
* Current map type
|
|
739
919
|
*/
|
|
740
|
-
|
|
920
|
+
currentMapType?: MapType;
|
|
921
|
+
/**
|
|
922
|
+
* Callback when map type is changed
|
|
923
|
+
*/
|
|
924
|
+
onMapTypeChange?: (mapType: MapType) => void;
|
|
741
925
|
/**
|
|
742
|
-
*
|
|
926
|
+
* Layers with legend definitions that should appear in the control
|
|
927
|
+
* Only layers with a `legend` property will be shown
|
|
743
928
|
*/
|
|
744
|
-
|
|
929
|
+
layers?: LayerSpec[];
|
|
745
930
|
/**
|
|
746
|
-
* Callback when
|
|
931
|
+
* Callback when a layer's visibility is toggled
|
|
747
932
|
*/
|
|
748
|
-
|
|
933
|
+
onLayerToggle?: (layerId: string) => void;
|
|
934
|
+
}
|
|
935
|
+
/**
|
|
936
|
+
* Search control configuration
|
|
937
|
+
*/
|
|
938
|
+
interface SearchControl extends BaseControl {
|
|
939
|
+
type: "search";
|
|
749
940
|
/**
|
|
750
|
-
*
|
|
941
|
+
* Callback when search is triggered
|
|
751
942
|
*/
|
|
752
|
-
|
|
943
|
+
onSearch?: (query: string) => void;
|
|
753
944
|
/**
|
|
754
|
-
*
|
|
945
|
+
* Placeholder text for search input
|
|
946
|
+
* @default "Search places..."
|
|
755
947
|
*/
|
|
756
|
-
|
|
948
|
+
placeholder?: string;
|
|
757
949
|
/**
|
|
758
|
-
*
|
|
950
|
+
* Show search input field
|
|
951
|
+
* @default true
|
|
759
952
|
*/
|
|
760
|
-
|
|
953
|
+
showSearchInput?: boolean;
|
|
954
|
+
}
|
|
955
|
+
/**
|
|
956
|
+
* List toggle control configuration
|
|
957
|
+
*/
|
|
958
|
+
interface ListControl extends BaseControl {
|
|
959
|
+
type: "list";
|
|
761
960
|
/**
|
|
762
|
-
* Callback when
|
|
961
|
+
* Callback when list toggle button is clicked
|
|
763
962
|
*/
|
|
764
|
-
|
|
963
|
+
onToggle?: () => void;
|
|
765
964
|
/**
|
|
766
|
-
*
|
|
965
|
+
* Whether the list view is currently active (for visual feedback)
|
|
966
|
+
* @default false
|
|
767
967
|
*/
|
|
768
|
-
|
|
968
|
+
isActive?: boolean;
|
|
969
|
+
}
|
|
970
|
+
/**
|
|
971
|
+
* Custom control configuration
|
|
972
|
+
*/
|
|
973
|
+
interface CustomControl extends BaseControl {
|
|
974
|
+
type: "custom";
|
|
769
975
|
/**
|
|
770
|
-
*
|
|
976
|
+
* Custom render function for the control
|
|
771
977
|
*/
|
|
772
|
-
|
|
978
|
+
render: (context: {
|
|
979
|
+
mapRef: React.RefObject<any>;
|
|
980
|
+
}) => React.ReactNode;
|
|
981
|
+
}
|
|
982
|
+
/**
|
|
983
|
+
* Map control discriminated union
|
|
984
|
+
*
|
|
985
|
+
* Use this type to configure which controls appear on the map.
|
|
986
|
+
* Each control type has its own specific configuration options.
|
|
987
|
+
*
|
|
988
|
+
* @example
|
|
989
|
+
* const controls: MapControl[] = [
|
|
990
|
+
* { type: 'navigation', position: 'bottom-right', showResetZoom: true },
|
|
991
|
+
* { type: 'search', position: 'top-left', onSearch: handleSearch },
|
|
992
|
+
* { type: 'list', position: 'top-right', onToggle: toggleList }
|
|
993
|
+
* ];
|
|
994
|
+
*/
|
|
995
|
+
type MapControl = NavigationControl | LayersControl | SearchControl | ListControl | CustomControl;
|
|
996
|
+
|
|
997
|
+
interface InteractiveMapProps {
|
|
773
998
|
/**
|
|
774
|
-
*
|
|
999
|
+
* Initial camera position
|
|
775
1000
|
*/
|
|
776
|
-
|
|
1001
|
+
initialViewState?: Partial<ViewState>;
|
|
777
1002
|
/**
|
|
778
|
-
*
|
|
1003
|
+
* Controlled view state (for controlled component pattern)
|
|
779
1004
|
*/
|
|
780
|
-
|
|
1005
|
+
viewState?: ViewState;
|
|
781
1006
|
/**
|
|
782
|
-
*
|
|
1007
|
+
* Callback when view state changes
|
|
783
1008
|
*/
|
|
784
|
-
|
|
1009
|
+
onViewStateChange?: (viewState: ViewState) => void;
|
|
785
1010
|
/**
|
|
786
|
-
*
|
|
1011
|
+
* Enable/disable scroll zoom
|
|
1012
|
+
* @default true
|
|
787
1013
|
*/
|
|
788
|
-
|
|
1014
|
+
scrollEnabled?: boolean;
|
|
789
1015
|
/**
|
|
790
|
-
*
|
|
791
|
-
* @default 8
|
|
1016
|
+
* Container CSS class
|
|
792
1017
|
*/
|
|
793
|
-
|
|
1018
|
+
className?: string;
|
|
794
1019
|
/**
|
|
795
|
-
*
|
|
796
|
-
* @default
|
|
1020
|
+
* Preview mode - disables all interactions and shows overlay CTA
|
|
1021
|
+
* @default false
|
|
797
1022
|
*/
|
|
798
|
-
|
|
1023
|
+
previewMode?: boolean;
|
|
799
1024
|
/**
|
|
800
|
-
*
|
|
801
|
-
* @default 12
|
|
1025
|
+
* CTA component to show in preview mode
|
|
802
1026
|
*/
|
|
803
|
-
|
|
1027
|
+
previewModeCta?: React__default.ReactNode;
|
|
804
1028
|
/**
|
|
805
|
-
*
|
|
806
|
-
* @default 12
|
|
1029
|
+
* Click handler for preview mode
|
|
807
1030
|
*/
|
|
808
|
-
|
|
1031
|
+
onPreviewModePress?: () => void;
|
|
809
1032
|
/**
|
|
810
|
-
*
|
|
811
|
-
*
|
|
1033
|
+
* Map type - the visual style of the map
|
|
1034
|
+
* Automatically adapts to light/dark mode via ColorModeProvider
|
|
1035
|
+
*
|
|
1036
|
+
* - "streets": Street map with roads and labels
|
|
1037
|
+
* - "satellite": Satellite imagery with street overlays
|
|
1038
|
+
* - "neutral": Minimal/clean map design
|
|
1039
|
+
*
|
|
1040
|
+
* @default "streets"
|
|
812
1041
|
*/
|
|
813
|
-
|
|
1042
|
+
mapType?: MapType;
|
|
1043
|
+
/**
|
|
1044
|
+
* Layers to render on the map
|
|
1045
|
+
*
|
|
1046
|
+
* Use the layers API for clean, type-safe layer configuration:
|
|
1047
|
+
*
|
|
1048
|
+
* @example
|
|
1049
|
+
* ```tsx
|
|
1050
|
+
* import { layer } from '@texturehq/edges';
|
|
1051
|
+
*
|
|
1052
|
+
* <InteractiveMap
|
|
1053
|
+
* layers={[
|
|
1054
|
+
* layer.vector({
|
|
1055
|
+
* id: 'feeders',
|
|
1056
|
+
* tileset: 'mapbox://texture.feeders',
|
|
1057
|
+
* sourceLayer: 'feeders',
|
|
1058
|
+
* renderAs: 'line',
|
|
1059
|
+
* style: { color: { token: 'brand-primary' } },
|
|
1060
|
+
* z: 10
|
|
1061
|
+
* })
|
|
1062
|
+
* ]}
|
|
1063
|
+
* />
|
|
1064
|
+
* ```
|
|
1065
|
+
*/
|
|
1066
|
+
layers?: LayerSpec[];
|
|
814
1067
|
/**
|
|
815
|
-
*
|
|
1068
|
+
* Mapbox access token
|
|
1069
|
+
* @default getMapboxTokenFromEnv()
|
|
816
1070
|
*/
|
|
817
|
-
|
|
818
|
-
navigation?: React__default.CSSProperties;
|
|
819
|
-
layers?: React__default.CSSProperties;
|
|
820
|
-
search?: React__default.CSSProperties;
|
|
821
|
-
list?: React__default.CSSProperties;
|
|
822
|
-
};
|
|
1071
|
+
mapboxAccessToken?: string;
|
|
823
1072
|
/**
|
|
824
|
-
* Custom
|
|
1073
|
+
* Custom request transform function
|
|
825
1074
|
*/
|
|
826
|
-
|
|
827
|
-
id: string;
|
|
1075
|
+
transformRequest?: (url: string, resourceType?: string) => {
|
|
828
1076
|
url: string;
|
|
829
|
-
|
|
830
|
-
layers?: Array<{
|
|
831
|
-
id: string;
|
|
832
|
-
type: "circle" | "fill" | "line" | "symbol" | "raster";
|
|
833
|
-
paint?: Record<string, any>;
|
|
834
|
-
layout?: Record<string, any>;
|
|
835
|
-
}>;
|
|
1077
|
+
headers?: Record<string, string>;
|
|
836
1078
|
};
|
|
1079
|
+
/**
|
|
1080
|
+
* Show loading state overlay
|
|
1081
|
+
* @default false
|
|
1082
|
+
*/
|
|
1083
|
+
isLoading?: boolean;
|
|
1084
|
+
/**
|
|
1085
|
+
* Map controls configuration
|
|
1086
|
+
*
|
|
1087
|
+
* Configure which controls appear on the map and their behavior.
|
|
1088
|
+
* - Pass an array of control configs for full customization
|
|
1089
|
+
* - Pass "default" or omit for sensible defaults (navigation + reset-zoom)
|
|
1090
|
+
* - Pass false or empty array to hide all controls
|
|
1091
|
+
*
|
|
1092
|
+
* @default "default"
|
|
1093
|
+
*
|
|
1094
|
+
* @example
|
|
1095
|
+
* // Use defaults
|
|
1096
|
+
* controls="default"
|
|
1097
|
+
*
|
|
1098
|
+
* @example
|
|
1099
|
+
* // Custom controls
|
|
1100
|
+
* controls={[
|
|
1101
|
+
* { type: 'navigation', position: 'bottom-right' },
|
|
1102
|
+
* { type: 'search', position: 'top-left', onSearch: handleSearch },
|
|
1103
|
+
* { type: 'layers', position: 'bottom-left', onMapTypeChange: setMapType }
|
|
1104
|
+
* ]}
|
|
1105
|
+
*
|
|
1106
|
+
* @example
|
|
1107
|
+
* // No controls
|
|
1108
|
+
* controls={false}
|
|
1109
|
+
*/
|
|
1110
|
+
controls?: MapControl[] | "default" | false;
|
|
837
1111
|
}
|
|
838
|
-
declare function InteractiveMap({
|
|
1112
|
+
declare function InteractiveMap({ initialViewState, viewState, onViewStateChange, scrollEnabled, className, previewMode, previewModeCta, onPreviewModePress, mapType, layers, mapboxAccessToken, transformRequest, isLoading, controls, }: InteractiveMapProps): react_jsx_runtime.JSX.Element;
|
|
839
1113
|
|
|
840
|
-
declare const MAPBOX_THEMES: {
|
|
841
|
-
dark: string;
|
|
842
|
-
light: string;
|
|
843
|
-
streets: string;
|
|
844
|
-
satellite: string;
|
|
845
|
-
};
|
|
846
1114
|
interface StaticMapProps {
|
|
847
1115
|
/**
|
|
848
1116
|
* Map width
|
|
@@ -857,22 +1125,48 @@ interface StaticMapProps {
|
|
|
857
1125
|
/**
|
|
858
1126
|
* Initial viewport configuration
|
|
859
1127
|
*/
|
|
860
|
-
initialViewState?:
|
|
861
|
-
longitude: number;
|
|
862
|
-
latitude: number;
|
|
863
|
-
zoom: number;
|
|
864
|
-
};
|
|
1128
|
+
initialViewState?: Partial<ViewState>;
|
|
865
1129
|
/**
|
|
866
1130
|
* Show loading skeleton
|
|
867
1131
|
*/
|
|
868
1132
|
isLoading?: boolean;
|
|
869
1133
|
/**
|
|
870
|
-
* Map
|
|
1134
|
+
* Map type - the visual style of the map
|
|
1135
|
+
* Automatically adapts to light/dark mode via ColorModeProvider
|
|
1136
|
+
*
|
|
1137
|
+
* - "streets": Street map with roads and labels
|
|
1138
|
+
* - "satellite": Satellite imagery with street overlays
|
|
1139
|
+
* - "neutral": Minimal/clean map design
|
|
1140
|
+
*
|
|
871
1141
|
* @default "streets"
|
|
872
1142
|
*/
|
|
873
|
-
|
|
1143
|
+
mapType?: MapType;
|
|
1144
|
+
/**
|
|
1145
|
+
* Layers to render on the map
|
|
1146
|
+
*
|
|
1147
|
+
* Use the layers API for clean, type-safe layer configuration.
|
|
1148
|
+
* Same API as InteractiveMap for consistency.
|
|
1149
|
+
*
|
|
1150
|
+
* @example
|
|
1151
|
+
* ```tsx
|
|
1152
|
+
* import { layer } from '@texturehq/edges';
|
|
1153
|
+
*
|
|
1154
|
+
* <StaticMap
|
|
1155
|
+
* layers={[
|
|
1156
|
+
* layer.geojson({
|
|
1157
|
+
* id: 'points',
|
|
1158
|
+
* data: myGeoJson,
|
|
1159
|
+
* renderAs: 'circle',
|
|
1160
|
+
* style: { color: { token: 'brand-primary' } }
|
|
1161
|
+
* })
|
|
1162
|
+
* ]}
|
|
1163
|
+
* />
|
|
1164
|
+
* ```
|
|
1165
|
+
*/
|
|
1166
|
+
layers?: LayerSpec[];
|
|
874
1167
|
/**
|
|
875
1168
|
* Mapbox access token
|
|
1169
|
+
* @default getMapboxTokenFromEnv()
|
|
876
1170
|
*/
|
|
877
1171
|
mapboxAccessToken?: string;
|
|
878
1172
|
/**
|
|
@@ -890,8 +1184,18 @@ interface StaticMapProps {
|
|
|
890
1184
|
*
|
|
891
1185
|
* A non-interactive map component for displaying a location.
|
|
892
1186
|
* Perfect for showing addresses, store locations, or any single point of interest.
|
|
1187
|
+
*
|
|
1188
|
+
* Automatically adapts to light/dark mode using the global ColorModeProvider.
|
|
1189
|
+
*/
|
|
1190
|
+
declare function StaticMap({ width, height, initialViewState, isLoading, mapType, layers, mapboxAccessToken, showMarker, className, }: StaticMapProps): react_jsx_runtime.JSX.Element;
|
|
1191
|
+
|
|
1192
|
+
/**
|
|
1193
|
+
* Represents a geographic point with coordinates
|
|
893
1194
|
*/
|
|
894
|
-
|
|
1195
|
+
interface MapPoint {
|
|
1196
|
+
latitude: number;
|
|
1197
|
+
longitude: number;
|
|
1198
|
+
}
|
|
895
1199
|
|
|
896
1200
|
interface MeterProps extends MeterProps$1 {
|
|
897
1201
|
/** Label displayed above the meter */
|
|
@@ -1052,4 +1356,4 @@ declare const isLightColor: (color: string) => boolean;
|
|
|
1052
1356
|
*/
|
|
1053
1357
|
declare const getContrastingTextColor: (backgroundColor: string) => string;
|
|
1054
1358
|
|
|
1055
|
-
export {
|
|
1359
|
+
export { SideNav as $, type ActionItem as A, type BaseDataPoint as B, type CustomPinsSpec as C, type DateFieldProps as D, MAP_TYPES as E, type FileUploadProps as F, type GeoJsonLayerSpec as G, Heading as H, Icon as I, StaticMap as J, type MeterProps as K, type LayerSpec as L, type MapPoint as M, Meter as N, type RichTextEditorProps as O, RichTextEditor as P, type SegmentedControlProps as Q, type RasterLayerSpec as R, type StaticMapProps as S, type TooltipData as T, type SegmentOption as U, type VectorLayerSpec as V, SegmentedControl as W, type SideNavItem as X, type YFormatType as Y, type ZoomStops as Z, type SideNavProps as _, type IconName as a, TextLink as a0, type TopNavProps as a1, TopNav as a2, type TooltipSeries as a3, ChartContext as a4, useChartContext as a5, type ChartMargin as a6, createXScale as a7, createYScale as a8, defaultMargin as a9, getYFormatSettings as aa, type YFormatSettings as ab, clearColorCache as ac, createCategoryColorMap as ad, getContrastingTextColor as ae, getDefaultChartColor as af, getDefaultColors as ag, getResolvedColor as ah, getThemeCategoricalColors as ai, isLightColor as aj, type ActionMenuProps as b, ActionMenu as c, type AppShellProps as d, AppShell as e, type AvatarProps as f, Avatar as g, type BadgeProps as h, Badge as i, type CardProps as j, type CardVariant as k, Card as l, type CodeEditorProps as m, type CodeLanguage as n, type CodeTheme as o, CodeEditor as p, DateField as q, FileUpload as r, Loader as s, Logo as t, type ColorSpec as u, type InteractiveMapProps as v, type LayerFeature as w, type LayerStyle as x, type RenderType as y, InteractiveMap as z };
|