@d3-maps/react 0.1.0 → 0.2.0

package/LICENCE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright © 2026 Georgii Bukharov
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -51,4 +51,4 @@ If you need strict stylesheet ordering, load your global reset/theme styles befo
 
 ## License
 
-MIT licensed. Copyright © 2020 Georgii Bukharov. See [LICENCE](../../LICENCE) for more details.
+MIT licensed. Copyright © 2020 Georgii Bukharov. See [LICENSE](./LICENSE) for more details.

package/dist/index.d.ts

@@ -1,12 +1,11 @@
 import "@d3-maps/core/index.css";
 import * as react0 from "react";
-import { CSSProperties, FocusEventHandler, MouseEventHandler, ReactElement, ReactNode, SVGProps } from "react";
-import { ExtendedFeature, ExtendedFeatureCollection, GeoPath, GeoProjection } from "d3-geo";
-import { mesh } from "topojson-client";
+import { CSSProperties, MouseEventHandler, ReactElement, ReactNode, SVGProps } from "react";
+import { ExtendedFeature, ExtendedFeatureCollection, GeoGraticuleGenerator, GeoPath, GeoProjection } from "d3-geo";
+import "topojson-client";
 import { D3ZoomEvent, ZoomBehavior } from "d3-zoom";
 
 //#region ../core/src/lib/mapObject.d.ts
-
 /**
  * Supported interaction states for map objects.
  */
@@ -27,8 +26,6 @@ type MapFeature$1 = (ExtendedFeature & Record<string, unknown>) | ExtendedFeatur
 interface MapFeatureProps$1<TStyle = unknown> {
   data: MapFeature$1;
   styles?: MapObjectStyles$1<TStyle>;
-  fill?: string;
-  stroke?: string;
 }
 //#endregion
 //#region ../../node_modules/.pnpm/@types+geojson@7946.0.16/node_modules/@types/geojson/index.d.ts
@@ -367,7 +364,6 @@ type ModifierArgs<P$1 extends unknown[]> = P$1 extends [infer Only] ? Only exten
 type MethodsToModifiers<T extends object> = { [K in OwnKeys<T> as Extract<T[K], AnyFn> extends never ? never : HasArgs<Extract<T[K], AnyFn>> extends true ? K : never]?: ModifierArgs<Extract<SetterArgs<Extract<T[K], AnyFn>>, unknown[]>> };
 //#endregion
 //#region ../core/src/lib/map.d.ts
-type MapMesh$1 = ReturnType<typeof mesh>;
 type MapData = ExtendedFeatureCollection | Topology;
 type DataTransformer = (features: MapFeature$1[]) => MapFeature$1[];
 /**
@@ -419,12 +415,21 @@ interface MapContext {
   height: number;
   projection?: GeoProjection;
   features: MapFeature$1[];
-  mesh?: MapMesh$1;
   path: GeoPath;
-  renderPath: (feature: MapFeature$1) => ReturnType<GeoPath>;
   renderMesh: () => ReturnType<GeoPath>;
 }
 //#endregion
+//#region ../core/src/lib/graticule.d.ts
+/**
+ * Extra graticule generator method calls to apply before rendering.
+ *
+ * Uses d3-geo `geoGraticule()` setter method names as keys.
+ * Example: `{ step: [[10, 10]], precision: 2.5 }`
+ *
+ * @see https://d3js.org/d3-geo/shape#geoGraticule
+ */
+interface GraticuleConfig extends MethodsToModifiers<GeoGraticuleGenerator> {}
+//#endregion
 //#region ../core/src/lib/marker.d.ts
 type MapMarkerCoordinates = [number, number];
 /**
@@ -478,15 +483,10 @@ interface MapFeatureProps extends MapFeatureProps$1<CSSProperties>, Omit<SVGProp
 declare function MapFeature({
   data,
   styles,
-  fill,
-  stroke,
   onMouseEnter,
   onMouseLeave,
   onMouseDown,
   onMouseUp,
-  onClick,
-  onFocus,
-  onBlur,
   ...pathProps
 }: MapFeatureProps): ReactElement | null;
 //#endregion
@@ -499,19 +499,13 @@ interface UseMapObjectOptions<TElement extends Element> {
   onMouseLeave?: MouseEventHandler<TElement>;
   onMouseDown?: MouseEventHandler<TElement>;
   onMouseUp?: MouseEventHandler<TElement>;
-  onClick?: MouseEventHandler<TElement>;
-  onFocus?: FocusEventHandler<TElement>;
-  onBlur?: FocusEventHandler<TElement>;
 }
 interface UseMapObjectResult<TElement extends Element> {
-  computedStyle: MapObjectStyle | undefined;
+  style: MapObjectStyle | undefined;
   onMouseEnter: MouseEventHandler<TElement>;
   onMouseLeave: MouseEventHandler<TElement>;
   onMouseDown: MouseEventHandler<TElement>;
   onMouseUp: MouseEventHandler<TElement>;
-  onClick: MouseEventHandler<TElement>;
-  onFocus: FocusEventHandler<TElement>;
-  onBlur: FocusEventHandler<TElement>;
 }
 declare function useMapObject<TElement extends Element>(options: UseMapObjectOptions<TElement>): UseMapObjectResult<TElement>;
 //#endregion
@@ -520,21 +514,38 @@ interface MapFeaturesRenderProps {
   features: MapFeature$1[];
 }
 type MapFeaturesChildren = ReactNode | ((props: MapFeaturesRenderProps) => ReactNode);
-interface MapFeaturesProps {
+type MapFeaturesElementProps = Omit<SVGProps<SVGGElement>, 'children'>;
+interface MapFeaturesProps extends MapFeaturesElementProps {
   idKey?: string;
-  fill?: string;
-  stroke?: string;
   styles?: MapObjectStyles;
   children?: MapFeaturesChildren;
 }
 declare function MapFeatures({
   idKey,
-  fill,
-  stroke,
   styles,
-  children
+  children,
+  ...groupProps
 }: MapFeaturesProps): ReactElement;
 //#endregion
+//#region src/components/MapGraticule.d.ts
+interface MapGraticuleProps extends Omit<SVGProps<SVGPathElement>, 'children' | 'd' | 'style' | 'fill'> {
+  config?: GraticuleConfig;
+  background?: boolean | string;
+  border?: boolean | string;
+  styles?: MapObjectStyles;
+}
+declare function MapGraticule({
+  config,
+  background,
+  border,
+  styles,
+  onMouseEnter,
+  onMouseLeave,
+  onMouseDown,
+  onMouseUp,
+  ...pathProps
+}: MapGraticuleProps): ReactElement | null;
+//#endregion
 //#region src/components/MapMarker.d.ts
 interface MapMarkerProps extends MapMarkerProps$1<CSSProperties>, Omit<SVGProps<SVGGElement>, 'style'> {}
 declare function MapMarker({
@@ -545,29 +556,19 @@ declare function MapMarker({
   onMouseLeave,
   onMouseDown,
   onMouseUp,
-  onClick,
-  onFocus,
-  onBlur,
   ...groupProps
 }: MapMarkerProps): ReactElement;
 //#endregion
 //#region src/components/MapMesh.d.ts
 interface MapMeshProps extends Omit<SVGProps<SVGPathElement>, 'children' | 'd' | 'style'> {
-  fill?: string;
-  stroke?: string;
   styles?: MapObjectStyles;
 }
 declare function MapMesh({
-  fill,
-  stroke,
   styles,
   onMouseEnter,
   onMouseLeave,
   onMouseDown,
   onMouseUp,
-  onClick,
-  onFocus,
-  onBlur,
   ...pathProps
 }: MapMeshProps): ReactElement | null;
 //#endregion
@@ -596,4 +597,4 @@ declare function MapZoom({
 declare const MapContextValue: react0.Context<MapContext | undefined>;
 declare function useMapContext(): MapContext | undefined;
 //#endregion
-export { Map, MapContextValue, MapFeature, MapFeatures, MapMarker, MapMesh, MapObjectStyle, MapObjectStyles, MapZoom, UseMapObjectOptions, UseMapObjectResult, useMapContext, useMapObject };
+export { Map, MapContextValue, MapFeature, MapFeatures, MapGraticule, MapMarker, MapMesh, MapObjectStyle, MapObjectStyles, MapZoom, UseMapObjectOptions, UseMapObjectResult, useMapContext, useMapObject };

package/dist/index.iife.js

@@ -1 +1 @@
-"use client";(function(e,t,n,r,i){let a=(0,r.createContext)(void 0);function o(){return(0,r.useContext)(a)}function s({context:e,children:t}){return(0,i.jsx)(a.Provider,{value:e,children:t})}function c(e){return typeof e==`function`}function l({width:e,height:t,aspectRatio:a,projection:o,projectionConfig:l,data:u,dataTransformer:d,children:f,className:p,...m}){let h=(0,r.useMemo)(()=>(0,n.makeMapContext)({width:e,height:t,aspectRatio:a,projection:o,projectionConfig:l,data:u,dataTransformer:d}),[e,t,a,o,l,u,d]),g=c(f)?f(h):f;return(0,i.jsx)(s,{context:h,children:(0,i.jsx)(`svg`,{...m,className:`d3-map ${p??``}`,viewBox:`0 0 ${h.width} ${h.height}`,children:g})})}function u(e){let t=(0,r.useRef)(e);return t.current=e,t}function d(e){let[t,i]=(0,r.useState)(`default`),a=u(e.onMouseEnter),o=u(e.onMouseLeave),s=u(e.onMouseDown),c=u(e.onMouseUp),l=u(e.onClick),d=u(e.onFocus),f=u(e.onBlur),p=(0,r.useCallback)(e=>{i(t=>{let r=(0,n.getObjectStateUpdate)(e);return t===r?t:r})},[]);return{computedStyle:(0,r.useMemo)(()=>(0,n.resolveObjectStyle)(t,e.styles),[t,e.styles]),onMouseEnter:(0,r.useCallback)(e=>{p(`mouseenter`),a.current?.(e)},[p]),onMouseLeave:(0,r.useCallback)(e=>{p(`mouseleave`),o.current?.(e)},[p]),onMouseDown:(0,r.useCallback)(e=>{p(`mousedown`),s.current?.(e)},[p]),onMouseUp:(0,r.useCallback)(e=>{p(`mouseup`),c.current?.(e)},[p]),onClick:(0,r.useCallback)(e=>{p(`mouseup`),l.current?.(e)},[p]),onFocus:(0,r.useCallback)(e=>{p(`focus`),d.current?.(e)},[p]),onBlur:(0,r.useCallback)(e=>{p(`blur`),f.current?.(e)},[p])}}function f({data:e,styles:t,fill:n,stroke:a,onMouseEnter:s,onMouseLeave:c,onMouseDown:l,onMouseUp:u,onClick:f,onFocus:p,onBlur:m,...h}){let g=o(),_=(0,r.useMemo)(()=>g?.renderPath(e)??null,[g,e]),{computedStyle:v,onMouseEnter:y,onMouseLeave:b,onMouseDown:x,onMouseUp:S,onClick:C,onFocus:w,onBlur:T}=d({styles:t,onMouseEnter:s,onMouseLeave:c,onMouseDown:l,onMouseUp:u,onClick:f,onFocus:p,onBlur:m});return _?(0,i.jsx)(`path`,{...h,d:_,style:v,fill:n,stroke:a,onMouseEnter:y,onMouseLeave:b,onMouseDown:x,onMouseUp:S,onClick:C,onFocus:w,onBlur:T}):null}function p(e){return typeof e==`function`}function m({idKey:e=`id`,fill:t,stroke:r,styles:a,children:s}){let c=o()?.features??[];return(0,i.jsx)(`g`,{children:(p(s)?s({features:c}):s)??c.map((o,s)=>(0,i.jsx)(f,{data:o,fill:t,stroke:r,styles:a},(0,n.getFeatureKey)(o,e,s)))})}let h=[0,0];function g({coordinates:e=h,styles:t,children:a,onMouseEnter:s,onMouseLeave:c,onMouseDown:l,onMouseUp:u,onClick:f,onFocus:p,onBlur:m,...g}){let _=o(),v=(0,r.useMemo)(()=>(0,n.getMarkerTransform)(_,e),[_,e[0],e[1]]),{computedStyle:y,onMouseEnter:b,onMouseLeave:x,onMouseDown:S,onMouseUp:C,onClick:w,onFocus:T,onBlur:E}=d({styles:t,onMouseEnter:s,onMouseLeave:c,onMouseDown:l,onMouseUp:u,onClick:f,onFocus:p,onBlur:m});return(0,i.jsx)(`g`,{...g,transform:v,style:y,onMouseEnter:b,onMouseLeave:x,onMouseDown:S,onMouseUp:C,onClick:w,onFocus:T,onBlur:E,children:a})}function _({fill:e=`none`,stroke:t,styles:n,onMouseEnter:a,onMouseLeave:s,onMouseDown:c,onMouseUp:l,onClick:u,onFocus:f,onBlur:p,...m}){let h=o(),g=(0,r.useMemo)(()=>h?.renderMesh()??null,[h]),{computedStyle:_,onMouseEnter:v,onMouseLeave:y,onMouseDown:b,onMouseUp:x,onClick:S,onFocus:C,onBlur:w}=d({styles:n,onMouseEnter:a,onMouseLeave:s,onMouseDown:c,onMouseUp:l,onClick:u,onFocus:f,onBlur:p});return g?(0,i.jsx)(`path`,{...m,d:g,style:_,fill:e,stroke:t,onMouseEnter:v,onMouseLeave:y,onMouseDown:b,onMouseUp:x,onClick:S,onFocus:C,onBlur:w}):null}function v({center:e,zoom:t,minZoom:a=n.ZOOM_DEFAULTS.minZoom,maxZoom:s=n.ZOOM_DEFAULTS.maxZoom,config:c,onZoomStart:l,onZoom:d,onZoomEnd:f,children:p,className:m,...h}){let g=(0,r.useRef)(null),_=(0,r.useRef)(!1),v=o(),y=u(l),b=u(d),x=u(f),S=e??n.ZOOM_DEFAULTS.center,C=t??n.ZOOM_DEFAULTS.zoom,w=S[0],T=S[1],E=(0,r.useMemo)(()=>(0,n.createZoomBehavior)(v,{minZoom:a,maxZoom:s,config:c,onZoomStart:e=>{y.current?.(e)},onZoom:e=>{(0,n.applyZoomGroupTransform)(g.current,e.transform),b.current?.(e)},onZoomEnd:e=>{x.current?.(e)}}),[v,a,s,c]);(0,r.useEffect)(()=>{_.current=!0,(0,n.setupZoom)({element:g.current,behavior:E,center:S,zoom:C})},[E]),(0,r.useEffect)(()=>{if(_.current){_.current=!1;return}(0,n.applyZoomTransform)({element:g.current,behavior:E,center:[w,T],zoom:C})},[E,w,T,C]);let D=m?`d3-map-zoom ${m}`:`d3-map-zoom`;return(0,i.jsx)(`g`,{...h,ref:g,className:D,children:p})}e.Map=l,e.MapContextValue=a,e.MapFeature=f,e.MapFeatures=m,e.MapMarker=g,e.MapMesh=_,e.MapZoom=v,e.useMapContext=o,e.useMapObject=d})(this.D3Maps=this.D3Maps||{},_d3_maps_core_index_css,D3Maps,React,ReactJSXRuntime);
+"use client";(function(e,t,n,r,i){let a=(0,r.createContext)(void 0);function o(){return(0,r.useContext)(a)}function s({context:e,children:t}){return(0,i.jsx)(a.Provider,{value:e,children:t})}function c(e){return typeof e==`function`}function l({width:e,height:t,aspectRatio:a,projection:o,projectionConfig:l,data:u,dataTransformer:d,children:f,className:p,...m}){let h=(0,r.useMemo)(()=>(0,n.makeMapContext)({width:e,height:t,aspectRatio:a,projection:o,projectionConfig:l,data:u,dataTransformer:d}),[e,t,a,o,l,u,d]),g=c(f)?f(h):f;return(0,i.jsx)(s,{context:h,children:(0,i.jsx)(`svg`,{...m,className:`d3-map ${p??``}`,viewBox:`0 0 ${h.width} ${h.height}`,children:g})})}function u(e){let t=(0,r.useRef)(e);return t.current=e,t}function d(e){let[t,i]=(0,r.useState)(`default`),a=u(e.onMouseEnter),o=u(e.onMouseLeave),s=u(e.onMouseDown),c=u(e.onMouseUp),l=(0,r.useCallback)(e=>{i(t=>{let r=(0,n.getObjectStateUpdate)(e);return t===r?t:r})},[]);return{style:(0,r.useMemo)(()=>(0,n.resolveObjectStyle)(t,e.styles),[t,e.styles]),onMouseEnter:(0,r.useCallback)(e=>{l(`mouseenter`),a.current?.(e)},[l]),onMouseLeave:(0,r.useCallback)(e=>{l(`mouseleave`),o.current?.(e)},[l]),onMouseDown:(0,r.useCallback)(e=>{l(`mousedown`),s.current?.(e)},[l]),onMouseUp:(0,r.useCallback)(e=>{l(`mouseup`),c.current?.(e)},[l])}}function f({data:e,styles:t,onMouseEnter:n,onMouseLeave:a,onMouseDown:s,onMouseUp:c,...l}){let u=o(),f=(0,r.useMemo)(()=>u?.path(e)??void 0,[u,e]),{style:p,...m}=d({styles:t,onMouseEnter:n,onMouseLeave:a,onMouseDown:s,onMouseUp:c});return(0,i.jsx)(`path`,{...l,d:f,style:p,name:`feature`,...m})}function p(e){return typeof e==`function`}function m({idKey:e=`id`,styles:t,children:r,...a}){let s=o()?.features??[],c=p(r)?r({features:s}):r;return(0,i.jsx)(`g`,{...a,name:`features`,children:c??s.map((r,a)=>(0,i.jsx)(f,{data:r,styles:t},(0,n.getFeatureKey)(r,e,a)))})}function h({config:e,background:t,border:a,styles:s,onMouseEnter:c,onMouseLeave:l,onMouseDown:u,onMouseUp:f,...p}){let m=o(),h=(0,r.useMemo)(()=>{if(m)return(0,n.renderGraticule)(m,e)??void 0},[m,e]),g=t===!0||typeof t==`string`,_=a===!0||typeof a==`string`,v=typeof t==`string`?t:void 0,y=typeof a==`string`?a:void 0,b=g||_,x=(0,r.useMemo)(()=>{if(!(!m||!b))return(0,n.renderOutline)(m)??void 0},[m,b]),{style:S,...C}=d({styles:s,onMouseEnter:c,onMouseLeave:l,onMouseDown:u,onMouseUp:f});return(0,i.jsxs)(`g`,{children:[g?(0,i.jsx)(`path`,{d:x??void 0,fill:v,name:`background`,pointerEvents:`none`}):null,(0,i.jsx)(`path`,{...p,d:h??void 0,style:S,fill:`none`,name:`graticule`,...C}),_?(0,i.jsx)(`path`,{d:x??void 0,fill:`none`,stroke:y,name:`border`,pointerEvents:`none`}):null]})}let g=[0,0];function _({coordinates:e=g,styles:t,children:a,onMouseEnter:s,onMouseLeave:c,onMouseDown:l,onMouseUp:u,...f}){let p=o(),m=(0,r.useMemo)(()=>(0,n.getMarkerTransform)(p,e),[p,e[0],e[1]]),{style:h,..._}=d({styles:t,onMouseEnter:s,onMouseLeave:c,onMouseDown:l,onMouseUp:u});return(0,i.jsx)(`g`,{...f,transform:m,style:h,name:`marker`,..._,children:a})}function v({styles:e,onMouseEnter:t,onMouseLeave:n,onMouseDown:a,onMouseUp:s,...c}){let l=o(),u=(0,r.useMemo)(()=>l?.renderMesh()??void 0,[l]),{style:f,...p}=d({styles:e,onMouseEnter:t,onMouseLeave:n,onMouseDown:a,onMouseUp:s}),m=c.fill??`none`;return(0,i.jsx)(`path`,{...c,d:u,style:f,fill:m,name:`mesh`,...p})}function y({center:e,zoom:t,minZoom:a=n.ZOOM_DEFAULTS.minZoom,maxZoom:s=n.ZOOM_DEFAULTS.maxZoom,config:c,onZoomStart:l,onZoom:d,onZoomEnd:f,children:p,className:m,...h}){let g=(0,r.useRef)(null),_=(0,r.useRef)(!1),v=o(),y=u(l),b=u(d),x=u(f),S=e??n.ZOOM_DEFAULTS.center,C=t??n.ZOOM_DEFAULTS.zoom,w=S[0],T=S[1],E=(0,r.useMemo)(()=>(0,n.createZoomBehavior)(v,{minZoom:a,maxZoom:s,config:c,onZoomStart:e=>{y.current?.(e)},onZoom:e=>{(0,n.applyZoomGroupTransform)(g.current,e.transform),b.current?.(e)},onZoomEnd:e=>{x.current?.(e)}}),[v,a,s,c]);(0,r.useEffect)(()=>{_.current=!0,(0,n.setupZoom)({element:g.current,behavior:E,center:S,zoom:C})},[E]),(0,r.useEffect)(()=>{if(_.current){_.current=!1;return}(0,n.applyZoomTransform)({element:g.current,behavior:E,center:[w,T],zoom:C})},[E,w,T,C]);let D=m?`d3-map-zoom ${m}`:`d3-map-zoom`;return(0,i.jsx)(`g`,{...h,ref:g,className:D,name:`zoom`,children:p})}e.Map=l,e.MapContextValue=a,e.MapFeature=f,e.MapFeatures=m,e.MapGraticule=h,e.MapMarker=_,e.MapMesh=v,e.MapZoom=y,e.useMapContext=o,e.useMapObject=d})(this.D3Maps=this.D3Maps||{},_d3_maps_core_index_css,D3Maps,React,ReactJSXRuntime);

package/dist/index.js

@@ -1,9 +1,9 @@
 'use client';
 
 import "@d3-maps/core/index.css";
-import { ZOOM_DEFAULTS, applyZoomGroupTransform, applyZoomTransform, createZoomBehavior, getFeatureKey, getMarkerTransform, getObjectStateUpdate, makeMapContext, resolveObjectStyle, setupZoom } from "@d3-maps/core";
+import { ZOOM_DEFAULTS, applyZoomGroupTransform, applyZoomTransform, createZoomBehavior, getFeatureKey, getMarkerTransform, getObjectStateUpdate, makeMapContext, renderGraticule, renderOutline, resolveObjectStyle, setupZoom } from "@d3-maps/core";
 import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/hooks/useMapContext.ts
 const MapContextValue = createContext(void 0);
@@ -73,9 +73,6 @@ function useMapObject(options) {
 	const onMouseLeaveRef = useLatest(options.onMouseLeave);
 	const onMouseDownRef = useLatest(options.onMouseDown);
 	const onMouseUpRef = useLatest(options.onMouseUp);
-	const onClickRef = useLatest(options.onClick);
-	const onFocusRef = useLatest(options.onFocus);
-	const onBlurRef = useLatest(options.onBlur);
 	const setStateForEvent = useCallback((eventName) => {
 		setState((currentState) => {
 			const nextState = getObjectStateUpdate(eventName);
@@ -83,7 +80,7 @@ function useMapObject(options) {
 		});
 	}, []);
 	return {
-		computedStyle: useMemo(() => {
+		style: useMemo(() => {
 			return resolveObjectStyle(state, options.styles);
 		}, [state, options.styles]),
 		onMouseEnter: useCallback((event) => {
@@ -101,53 +98,31 @@ function useMapObject(options) {
 		onMouseUp: useCallback((event) => {
 			setStateForEvent("mouseup");
 			onMouseUpRef.current?.(event);
-		}, [setStateForEvent]),
-		onClick: useCallback((event) => {
-			setStateForEvent("mouseup");
-			onClickRef.current?.(event);
-		}, [setStateForEvent]),
-		onFocus: useCallback((event) => {
-			setStateForEvent("focus");
-			onFocusRef.current?.(event);
-		}, [setStateForEvent]),
-		onBlur: useCallback((event) => {
-			setStateForEvent("blur");
-			onBlurRef.current?.(event);
 		}, [setStateForEvent])
 	};
 }
 
 //#endregion
 //#region src/components/MapFeature.tsx
-function MapFeature({ data, styles, fill, stroke, onMouseEnter, onMouseLeave, onMouseDown, onMouseUp, onClick, onFocus, onBlur, ...pathProps }) {
+function MapFeature({ data, styles, onMouseEnter, onMouseLeave, onMouseDown, onMouseUp, ...pathProps }) {
 	const context = useMapContext();
 	const path = useMemo(() => {
-		return context?.renderPath(data) ?? null;
+		return context?.path(data) ?? void 0;
 	}, [context, data]);
-	const { computedStyle, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onClick: handleClick, onFocus: handleFocus, onBlur: handleBlur } = useMapObject({
+	const { style, ...events } = useMapObject({
 		styles,
 		onMouseEnter,
 		onMouseLeave,
 		onMouseDown,
-		onMouseUp,
-		onClick,
-		onFocus,
-		onBlur
+		onMouseUp
 	});
-	return path ? /* @__PURE__ */ jsx("path", {
+	return /* @__PURE__ */ jsx("path", {
 		...pathProps,
 		d: path,
-		style: computedStyle,
-		fill,
-		stroke,
-		onMouseEnter: handleMouseEnter,
-		onMouseLeave: handleMouseLeave,
-		onMouseDown: handleMouseDown,
-		onMouseUp: handleMouseUp,
-		onClick: handleClick,
-		onFocus: handleFocus,
-		onBlur: handleBlur
-	}) : null;
+		style,
+		name: "feature",
+		...events
+	});
 }
 
 //#endregion
@@ -155,20 +130,72 @@ function MapFeature({ data, styles, fill, stroke, onMouseEnter, onMouseLeave, on
 function isRenderProp(children) {
 	return typeof children === "function";
 }
-function MapFeatures({ idKey = "id", fill, stroke, styles, children }) {
+function MapFeatures({ idKey = "id", styles, children, ...groupProps }) {
 	const features = useMapContext()?.features ?? [];
-	return /* @__PURE__ */ jsx("g", { children: (isRenderProp(children) ? children({ features }) : children) ?? features.map((feature, index) => /* @__PURE__ */ jsx(MapFeature, {
-		data: feature,
-		fill,
-		stroke,
-		styles
-	}, getFeatureKey(feature, idKey, index))) });
+	const resolvedChildren = isRenderProp(children) ? children({ features }) : children;
+	return /* @__PURE__ */ jsx("g", {
+		...groupProps,
+		name: "features",
+		children: resolvedChildren ?? features.map((feature, index) => /* @__PURE__ */ jsx(MapFeature, {
+			data: feature,
+			styles
+		}, getFeatureKey(feature, idKey, index)))
+	});
+}
+
+//#endregion
+//#region src/components/MapGraticule.tsx
+function MapGraticule({ config, background, border, styles, onMouseEnter, onMouseLeave, onMouseDown, onMouseUp, ...pathProps }) {
+	const context = useMapContext();
+	const graticulePath = useMemo(() => {
+		if (!context) return void 0;
+		return renderGraticule(context, config) ?? void 0;
+	}, [context, config]);
+	const showBackground = background === true || typeof background === "string";
+	const showBorder = border === true || typeof border === "string";
+	const backgroundColor = typeof background === "string" ? background : void 0;
+	const borderColor = typeof border === "string" ? border : void 0;
+	const shouldRenderOutline = showBackground || showBorder;
+	const outlinePath = useMemo(() => {
+		if (!context || !shouldRenderOutline) return void 0;
+		return renderOutline(context) ?? void 0;
+	}, [context, shouldRenderOutline]);
+	const { style, ...events } = useMapObject({
+		styles,
+		onMouseEnter,
+		onMouseLeave,
+		onMouseDown,
+		onMouseUp
+	});
+	return /* @__PURE__ */ jsxs("g", { children: [
+		showBackground ? /* @__PURE__ */ jsx("path", {
+			d: outlinePath ?? void 0,
+			fill: backgroundColor,
+			name: "background",
+			pointerEvents: "none"
+		}) : null,
+		/* @__PURE__ */ jsx("path", {
+			...pathProps,
+			d: graticulePath ?? void 0,
+			style,
+			fill: "none",
+			name: "graticule",
+			...events
+		}),
+		showBorder ? /* @__PURE__ */ jsx("path", {
+			d: outlinePath ?? void 0,
+			fill: "none",
+			stroke: borderColor,
+			name: "border",
+			pointerEvents: "none"
+		}) : null
+	] });
 }
 
 //#endregion
 //#region src/components/MapMarker.tsx
 const DEFAULT_COORDINATES = [0, 0];
-function MapMarker({ coordinates = DEFAULT_COORDINATES, styles, children, onMouseEnter, onMouseLeave, onMouseDown, onMouseUp, onClick, onFocus, onBlur, ...groupProps }) {
+function MapMarker({ coordinates = DEFAULT_COORDINATES, styles, children, onMouseEnter, onMouseLeave, onMouseDown, onMouseUp, ...groupProps }) {
 	const context = useMapContext();
 	const transform = useMemo(() => {
 		return getMarkerTransform(context, coordinates);
@@ -177,62 +204,46 @@ function MapMarker({ coordinates = DEFAULT_COORDINATES, styles, children, onMous
 		coordinates[0],
 		coordinates[1]
 	]);
-	const { computedStyle, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onClick: handleClick, onFocus: handleFocus, onBlur: handleBlur } = useMapObject({
+	const { style, ...events } = useMapObject({
 		styles,
 		onMouseEnter,
 		onMouseLeave,
 		onMouseDown,
-		onMouseUp,
-		onClick,
-		onFocus,
-		onBlur
+		onMouseUp
 	});
 	return /* @__PURE__ */ jsx("g", {
 		...groupProps,
 		transform,
-		style: computedStyle,
-		onMouseEnter: handleMouseEnter,
-		onMouseLeave: handleMouseLeave,
-		onMouseDown: handleMouseDown,
-		onMouseUp: handleMouseUp,
-		onClick: handleClick,
-		onFocus: handleFocus,
-		onBlur: handleBlur,
+		style,
+		name: "marker",
+		...events,
 		children
 	});
 }
 
 //#endregion
 //#region src/components/MapMesh.tsx
-function MapMesh({ fill = "none", stroke, styles, onMouseEnter, onMouseLeave, onMouseDown, onMouseUp, onClick, onFocus, onBlur, ...pathProps }) {
+function MapMesh({ styles, onMouseEnter, onMouseLeave, onMouseDown, onMouseUp, ...pathProps }) {
 	const context = useMapContext();
 	const path = useMemo(() => {
-		return context?.renderMesh() ?? null;
+		return context?.renderMesh() ?? void 0;
 	}, [context]);
-	const { computedStyle, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onClick: handleClick, onFocus: handleFocus, onBlur: handleBlur } = useMapObject({
+	const { style, ...events } = useMapObject({
 		styles,
 		onMouseEnter,
 		onMouseLeave,
 		onMouseDown,
-		onMouseUp,
-		onClick,
-		onFocus,
-		onBlur
+		onMouseUp
 	});
-	return path ? /* @__PURE__ */ jsx("path", {
+	const fill = pathProps.fill ?? "none";
+	return /* @__PURE__ */ jsx("path", {
 		...pathProps,
 		d: path,
-		style: computedStyle,
+		style,
 		fill,
-		stroke,
-		onMouseEnter: handleMouseEnter,
-		onMouseLeave: handleMouseLeave,
-		onMouseDown: handleMouseDown,
-		onMouseUp: handleMouseUp,
-		onClick: handleClick,
-		onFocus: handleFocus,
-		onBlur: handleBlur
-	}) : null;
+		name: "mesh",
+		...events
+	});
 }
 
 //#endregion
@@ -301,9 +312,10 @@ function MapZoom({ center, zoom, minZoom = ZOOM_DEFAULTS.minZoom, maxZoom = ZOOM
 		...groupProps,
 		ref: containerRef,
 		className: mergedClassName,
+		name: "zoom",
 		children
 	});
 }
 
 //#endregion
-export { Map, MapContextValue, MapFeature, MapFeatures, MapMarker, MapMesh, MapZoom, useMapContext, useMapObject };
+export { Map, MapContextValue, MapFeature, MapFeatures, MapGraticule, MapMarker, MapMesh, MapZoom, useMapContext, useMapObject };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@d3-maps/react",
   "type": "module",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "private": false,
   "description": "React bindings for @d3-maps/core to build reactive D3 SVG maps",
   "author": "Georgii Bukharov <souljorje@gmail.com>",
@@ -40,34 +40,34 @@
   "files": [
     "dist/*"
   ],
-  "scripts": {
-    "typecheck": "tsc --noEmit",
-    "typecheck:test": "tsc -p tsconfig.test.json --noEmit",
-    "build": "pnpm run typecheck && tsdown",
-    "test": "vitest run",
-    "test:watch": "vitest"
-  },
   "peerDependencies": {
     "react": ">=19 <20",
     "react-dom": ">=19 <20"
   },
   "dependencies": {
-    "@d3-maps/core": "workspace:*"
+    "@d3-maps/core": "0.5.0"
   },
   "devDependencies": {
-    "@testing-library/react": "catalog:",
-    "@types/geojson": "catalog:",
-    "@types/react": "catalog:",
-    "@types/react-dom": "catalog:",
-    "@types/topojson-client": "catalog:",
-    "@types/topojson-specification": "catalog:",
-    "@vitejs/plugin-react": "catalog:",
-    "jsdom": "catalog:",
-    "react": "catalog:",
-    "react-dom": "catalog:",
-    "tsdown": "catalog:",
-    "typescript": "catalog:",
-    "vite-tsconfig-paths": "catalog:",
-    "vitest": "catalog:"
+    "@testing-library/react": "^16.3.0",
+    "@types/geojson": "^7946.0.16",
+    "@types/react": "^19.2.2",
+    "@types/react-dom": "^19.2.2",
+    "@types/topojson-client": "^3.1.5",
+    "@types/topojson-specification": "^1.0.5",
+    "@vitejs/plugin-react": "^5.1.0",
+    "jsdom": "^27.3.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "tsdown": "0.19.0",
+    "typescript": "^5.9.3",
+    "vite-tsconfig-paths": "^6.1.1",
+    "vitest": "^4.0.15"
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "typecheck:test": "tsc -p tsconfig.test.json --noEmit",
+    "build": "pnpm run typecheck && tsdown",
+    "test": "vitest run",
+    "test:watch": "vitest"
   }
-}
+}