world-map-svg 0.3.0 → 0.4.0

package/README.md

@@ -35,6 +35,10 @@ function App() {
 | `showConnections` | `boolean` | `true` | Show carved connection lines |
 | `connectionBase` | `string` | `BD` | ISO country code of the hub/base country |
 | `connectedCountries` | `string[]` | `['US', 'IN']` | ISO country codes to connect to the base |
+| `onCountryHover` | `(code, name, x, y) => void` | - | Fires when hovering a country path. Suppresses built-in tooltip. |
+| `onCountryClick` | `(code, name, x, y) => void` | - | Fires when clicking a country path. Suppresses built-in click tooltip. |
+| `onConnectionDotHover` | `(code, x, y) => void` | - | Fires when hovering a connection dot. |
+| `onConnectionDotClick` | `(code, x, y) => void` | - | Fires when clicking a connection dot. |
 | `className` | `string` | - | Additional CSS class for the container |
 
 ## Development

package/dist/WorldMap.d.ts

@@ -7,6 +7,10 @@ export type WorldMapProps = {
     showConnections?: boolean;
     connectionBase?: string;
     connectedCountries?: string[];
+    onCountryHover?: (countryCode: string, countryName: string, x: number, y: number) => void;
+    onCountryClick?: (countryCode: string, countryName: string, x: number, y: number) => void;
+    onConnectionDotHover?: (countryCode: string, x: number, y: number) => void;
+    onConnectionDotClick?: (countryCode: string, x: number, y: number) => void;
 };
-export declare function WorldMap({ backgroundColor, countryColor, svgUrl, className, showConnections, connectionBase, connectedCountries, }: WorldMapProps): import("react/jsx-runtime").JSX.Element;
+export declare function WorldMap({ backgroundColor, countryColor, svgUrl, className, showConnections, connectionBase, connectedCountries, onCountryHover, onCountryClick, onConnectionDotHover, onConnectionDotClick, }: WorldMapProps): import("react/jsx-runtime").JSX.Element;
 export default WorldMap;

package/dist/style.css

@@ -1,2 +1,2 @@
-.map-container{cursor:grab;background:var(--map-background,transparent);width:100%;height:100%;position:relative;overflow:hidden}.map-container.is-panning{cursor:grabbing}.map-viewport{transform-origin:50%;justify-content:center;align-items:center;width:100%;height:100%;transition:transform .2s;display:flex}.map-svg-wrap{width:100%}.map-svg{width:100%;height:auto;display:block}.map-svg .country{fill:var(--country-fill,#093c5d);stroke:var(--country-stroke,#1e40af);stroke-width:.6px;cursor:pointer;transform-origin:50%;transition:fill .2s,transform .2s}.map-svg .country:hover{fill:var(--country-hover,#3b82f6)}.map-svg .country.is-selected{fill:var(--country-selected,#1d4ed8);stroke:var(--country-selected,#1d4ed8)}.map-svg .country.is-default{fill:#16a34a;stroke:#16a34a}.map-svg .connection-line{stroke:#ef4444;stroke-width:2px;fill:none;pointer-events:none;opacity:.85}.map-svg .connection-dot{fill:#ef4444;stroke:#fff;stroke-width:1.5px;pointer-events:none}.map-svg .connection-dot-start{animation:1s ease-in-out infinite connectionBlink}.map-svg .connection-dot-end{fill:#22c55e;stroke:#fff;stroke-width:1.5px;animation:1s ease-in-out .5s infinite connectionBlinkEnd}@keyframes connectionBlinkEnd{0%,to{opacity:1;r:4;filter:drop-shadow(0 0 4px #22c55ee6)}50%{opacity:.15;r:9;filter:drop-shadow(0 0 12px #22c55e66)}}@keyframes connectionBlink{0%,to{opacity:1;r:4;filter:drop-shadow(0 0 4px #ef4444e6)}50%{opacity:.15;r:9;filter:drop-shadow(0 0 12px #ef444466)}}.map-tooltip{color:#111;pointer-events:none;white-space:nowrap;background:#fff;border-radius:6px;padding:6px 10px;font-size:13px;position:absolute;transform:translate(-50%,-120%);box-shadow:0 2px 8px #00000026}.map-tooltip.is-pinned{background:#f8f8f8}.map-loading{color:#666;font-size:14px}
+.map-container{cursor:grab;background:var(--map-background,transparent);width:100%;height:100%;position:relative;overflow:hidden}.map-container.is-panning{cursor:grabbing}.map-viewport{transform-origin:50%;justify-content:center;align-items:center;width:100%;height:100%;transition:transform .2s;display:flex}.map-svg-wrap{width:100%}.map-svg{width:100%;height:auto;display:block}.map-svg .country{fill:var(--country-fill,#093c5d);stroke:var(--country-stroke,#1e40af);stroke-width:.6px;cursor:pointer;transform-origin:50%;transition:fill .2s,transform .2s}.map-svg .country:hover{fill:var(--country-hover,#3b82f6)}.map-svg .country.is-selected{fill:var(--country-selected,#1d4ed8);stroke:var(--country-selected,#1d4ed8)}.map-svg .country.is-default{fill:#16a34a;stroke:#16a34a}.map-svg .connection-line{stroke:#ef4444;stroke-width:2px;fill:none;pointer-events:none;opacity:.85}.map-svg .connection-dot{fill:#ef4444;stroke:#fff;stroke-width:1.5px;cursor:pointer}.map-svg .connection-dot-start{animation:1s ease-in-out infinite connectionBlink}.map-svg .connection-dot-end{fill:#22c55e;stroke:#fff;stroke-width:1.5px;animation:1s ease-in-out .5s infinite connectionBlinkEnd}@keyframes connectionBlinkEnd{0%,to{opacity:1;r:4;filter:drop-shadow(0 0 4px #22c55ee6)}50%{opacity:.15;r:9;filter:drop-shadow(0 0 12px #22c55e66)}}@keyframes connectionBlink{0%,to{opacity:1;r:4;filter:drop-shadow(0 0 4px #ef4444e6)}50%{opacity:.15;r:9;filter:drop-shadow(0 0 12px #ef444466)}}.map-tooltip{color:#111;pointer-events:none;white-space:nowrap;background:#fff;border-radius:6px;padding:6px 10px;font-size:13px;position:absolute;transform:translate(-50%,-120%);box-shadow:0 2px 8px #00000026}.map-tooltip.is-pinned{background:#f8f8f8}.map-loading{color:#666;font-size:14px}
 /*$vite$:1*/

package/dist/world-map-svg.cjs.js

@@ -1035,4 +1035,4 @@ Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{val
      title="Zimbabwe"
      id="ZW" />
 </svg>
-`,r={AD:{x:479.3,y:331.5},AE:{x:626.4,y:392.9},AF:{x:664.9,y:361.8},AG:{x:301.5,y:413.8},AI:{x:297.9,y:411.2},AL:{x:531.5,y:336.6},AM:{x:601.2,y:340.6},AO:{x:525.1,y:494.6},AR:{x:296.3,y:586.5},AS:{x:1006.2,y:503.2},AT:{x:512.3,y:310.9},AU:{x:856.4,y:568.8},AW:{x:278.5,y:427.7},AX:{x:531.2,y:250.9},AZ:{x:608.4,y:340.3},BA:{x:524.5,y:326.1},BB:{x:307.8,y:425.8},BD:{x:728.4,y:394.8},BE:{x:487.4,y:299},BF:{x:470.5,y:428.5},BG:{x:546.4,y:330.7},BH:{x:616.7,y:387.7},BI:{x:558.8,y:472.4},BJ:{x:481.3,y:436.8},BL:{x:298.5,y:412.2},BN:{x:796.8,y:450.3},BO:{x:296.5,y:509.3},BM:{x:293.1,y:367.5},BQ:{x:290.6,y:421},BR:{x:322.2,y:505.6},BS:{x:262,y:394},BT:{x:728.6,y:383.1},BV:{x:484.5,y:644.8},BW:{x:544.1,y:527},BY:{x:553.3,y:284.1},BZ:{x:226.5,y:414.3},CA:{x:203.1,y:173.2},CC:{x:746.8,y:497.1},CD:{x:535.9,y:474.4},CF:{x:533.6,y:444.3},CG:{x:516.6,y:464.8},CH:{x:497.9,y:314.7},CI:{x:459.3,y:441.8},CK:{x:26.4,y:523.5},CL:{x:228.1,y:582.3},CM:{x:509.6,y:442.2},CN:{x:767.3,y:348.2},CO:{x:270.2,y:451.4},CR:{x:238.5,y:435.9},CU:{x:251.7,y:401.4},CV:{x:407.5,y:417.7},CW:{x:281.4,y:428.6},CX:{x:771.4,y:492.4},CY:{x:568.7,y:358.2},CZ:{x:518.3,y:302},DE:{x:504.2,y:295.3},DJ:{x:594.4,y:429.7},DK:{x:507.5,y:272.2},DM:{x:302.7,y:419.4},DO:{x:278,y:409.6},DZ:{x:479.5,y:380.2},EC:{x:240.7,y:467.9},EG:{x:561.3,y:384.9},EE:{x:545.1,y:259.8},EH:{x:438.7,y:393.1},ER:{x:586.5,y:420},ES:{x:455.5,y:354.7},ET:{x:588.5,y:437.2},FI:{x:548.1,y:218.7},FJ:{x:974.9,y:511.5},FK:{x:308,y:632.6},FM:{x:897.3,y:442.1},FO:{x:455.5,y:241.2},FR:{x:481.6,y:316.1},GA:{x:507.4,y:465.2},GB:{x:465.9,y:274.3},GE:{x:596.5,y:332.3},GD:{x:301.8,y:428.9},GF:{x:325.8,y:451.9},GG:{x:467.7,y:303.5},GH:{x:472,y:440.6},GI:{x:459.9,y:354.7},GL:{x:356.7,y:126.7},GM:{x:431.9,y:425.1},GN:{x:443,y:435},GO:{x:607.6,y:495.4},GP:{x:302.3,y:417.1},GQ:{x:502.6,y:456.3},GR:{x:542.1,y:346.6},GS:{x:384.7,y:654.1},GT:{x:221.7,y:418.3},GU:{x:881.3,y:425.1},GW:{x:432.3,y:429.8},GY:{x:309.5,y:449.3},HK:{x:795.1,y:398.9},HM:{x:681.3,y:638.5},HN:{x:232.8,y:421.3},HR:{x:521.1,y:323.9},HT:{x:269.8,y:408.7},HU:{x:529.6,y:313.2},ID:{x:806.3,y:470},IE:{x:451.9,y:285.6},IL:{x:573.3,y:370.3},IM:{x:462.1,y:281.9},IN:{x:707.1,y:400.5},IO:{x:678.2,y:483.4},IQ:{x:597.4,y:364.2},IR:{x:625.5,y:366.2},IS:{x:421.5,y:221.6},IT:{x:510.1,y:333.2},JE:{x:468.9,y:304.6},JM:{x:258,y:411.5},JO:{x:579.1,y:370.9},JP:{x:853.1,y:356.5},JU:{x:594.9,y:511.2},KE:{x:581.2,y:461.8},KG:{x:684.6,y:336.3},KH:{x:769.5,y:427.6},KI:{x:516.3,y:473.5},KM:{x:598,y:496.3},KN:{x:299,y:414.1},KP:{x:832.8,y:339.4},KR:{x:835.4,y:355.3},XK:{x:533.5,y:331.4},KW:{x:608.2,y:377.3},KY:{x:248.7,y:407.4},KZ:{x:662.8,y:307.5},LA:{x:766.4,y:411.1},LB:{x:575.5,y:362.4},LC:{x:303.8,y:423.8},LI:{x:501.7,y:313.2},LK:{x:701.6,y:440.9},LR:{x:448.4,y:444.9},LS:{x:554.1,y:549.5},LT:{x:541.8,y:277.4},LU:{x:492,y:302.1},LV:{x:544,y:268.8},LY:{x:523.3,y:386.1},MA:{x:454.9,y:369},MC:{x:495.7,y:326.8},MD:{x:554.5,y:314},MG:{x:606.4,y:516.8},ME:{x:529.3,y:330.8},MF:{x:297.9,y:411.6},MH:{x:950,y:439.2},MK:{x:535.9,y:335},ML:{x:463.6,y:412.7},MO:{x:793.5,y:399.3},MM:{x:746.2,y:407.6},MN:{x:766.3,y:313.4},MP:{x:883.2,y:416.3},MQ:{x:303.6,y:421.6},MR:{x:444.2,y:402.6},MS:{x:300.4,y:415.6},MT:{x:515.2,y:355.3},MU:{x:636.4,y:520.6},MV:{x:681,y:452.5},MW:{x:571.1,y:500.3},MX:{x:187.1,y:394.1},MY:{x:782.1,y:451.4},MZ:{x:574.6,y:516.5},NA:{x:526.8,y:529.1},NC:{x:935.3,y:522.5},NE:{x:497.5,y:412.7},NF:{x:946.2,y:547.7},NG:{x:499.2,y:437.4},NI:{x:235.2,y:426.7},NL:{x:489.7,y:291.4},NO:{x:525.1,y:219.1},NP:{x:710.9,y:380.3},NR:{x:943.4,y:464.4},NU:{x:1008.5,y:517.1},NZ:{x:965.7,y:600.7},OM:{x:631.8,y:401.3},PA:{x:250.1,y:439.4},PE:{x:264.4,y:489},PF:{x:71,y:505},PG:{x:891.4,y:481.1},PH:{x:816.7,y:426.1},PK:{x:669.4,y:373.1},PL:{x:528.5,y:292.2},PM:{x:317,y:314.2},PN:{x:114.8,y:533},PR:{x:287.9,y:411.2},PS:{x:572.8,y:369},PT:{x:422.3,y:349.7},PW:{x:847.9,y:447.9},PY:{x:310.9,y:530.3},QA:{x:618.5,y:389.8},RE:{x:630.8,y:523.2},RO:{x:545,y:317.9},RS:{x:533.6,y:325},RU:{x:769.4,y:187.8},RW:{x:558.7,y:468.3},SA:{x:601.5,y:392.4},SB:{x:927.6,y:488.8},SC:{x:630.6,y:476},SD:{x:559.7,y:419},SE:{x:524.4,y:234.6},SG:{x:766.3,y:459.1},SH:{x:446.7,y:496.6},SI:{x:516.8,y:317.4},SJ:{x:509.3,y:121.1},SK:{x:530.2,y:306.9},SL:{x:441.8,y:439.3},SM:{x:509.9,y:326.1},SN:{x:434.3,y:422},SO:{x:604.5,y:448.5},SR:{x:317.7,y:452},SS:{x:558.3,y:440.9},ST:{x:494.4,y:460.5},SV:{x:225.4,y:424.1},SX:{x:297.9,y:411.8},SY:{x:584.5,y:359.1},SZ:{x:563.2,y:539.7},TC:{x:272.9,y:400.5},TD:{x:527.4,y:418.8},TF:{x:646.4,y:616.3},TG:{x:477.3,y:438.8},TH:{x:759.8,y:425.9},TJ:{x:674.8,y:344.9},TK:{x:1003,y:488},TL:{x:827.6,y:487.6},TM:{x:642.1,y:344.3},TN:{x:501.6,y:362.4},TO:{x:995.1,y:519.9},TR:{x:573.8,y:344.4},TT:{x:303.1,y:432.9},TV:{x:973.8,y:483.4},TW:{x:812,y:395.1},TZ:{x:572.8,y:480.8},UA:{x:562.3,y:307.5},UG:{x:565.5,y:459.1},"UM-DQ":{x:25.8,y:464},"UM-FQ":{x:990,y:462.3},"UM-HQ":{x:989.5,y:460.7},"UM-JQ":{x:1009.4,y:415.6},"UM-MQ":{x:987.4,y:380.9},"UM-WQ":{x:942.6,y:408.1},US:{x:143.6,y:291},UY:{x:318.3,y:559},UZ:{x:656.1,y:335.4},VA:{x:509.8,y:333.9},VC:{x:303,y:426.3},VE:{x:288,y:444.9},VG:{x:293.9,y:410.2},VI:{x:293,y:411.8},VN:{x:771.8,y:417.4},VU:{x:947,y:511},WF:{x:988,y:501.7},WS:{x:1002.2,y:501.6},YE:{x:611.1,y:418.6},YT:{x:601.6,y:499},ZA:{x:551.1,y:569},ZM:{x:553,y:500},ZW:{x:556.6,y:517.1}},i=e=>/^#([0-9a-fA-F]{3}){1,2}$/.test(e),a=e=>e.toString(16).padStart(2,`0`),o=(e,t)=>{if(!i(e))return e;let n=e.replace(`#`,``),r=n.length===3?n.split(``).map(e=>e+e).join(``):n,o=parseInt(r,16),s=Math.min(255,Math.max(0,(o>>16&255)+t)),c=Math.min(255,Math.max(0,(o>>8&255)+t)),l=Math.min(255,Math.max(0,(o&255)+t));return`#${a(s)}${a(c)}${a(l)}`};function s(e,t){let n=t.x-e.x,r=t.y-e.y,i=Math.sqrt(n*n+r*r),a=(e.y+t.y)/2,o=Math.max(Math.min(i*.35,220),15),s=e.x+n*.25,c=a-o,l=e.x+n*.75,u=a-o;return`M ${e.x} ${e.y} C ${s},${c} ${l},${u} ${t.x} ${t.y}`}function c({backgroundColor:i,countryColor:a=`#093C5D`,svgUrl:c,className:l,showConnections:u=!0,connectionBase:d=`BD`,connectedCountries:f=[`US`,`IN`]}){let[p,m]=(0,e.useState)(``),[h,g]=(0,e.useState)({name:``,x:0,y:0,visible:!1}),[_,v]=(0,e.useState)({name:``,x:0,y:0,visible:!1}),[y,b]=(0,e.useState)(1),[x,S]=(0,e.useState)({x:0,y:0}),[C,w]=(0,e.useState)(!1),T=(0,e.useRef)(null),E=(0,e.useRef)({isPanning:!1,startX:0,startY:0,originX:0,originY:0,moved:!1}),D=(0,e.useMemo)(()=>({hover:o(a,24),selected:o(a,-24),stroke:o(a,-36)}),[a]);(0,e.useEffect)(()=>{let e=!0;return(async()=>{try{let t;if(c){let e=await fetch(c);if(!e.ok)throw Error(`Failed to fetch SVG: ${e.status}`);t=await e.text()}else t=n;if(!e)return;let i=new DOMParser().parseFromString(t,`image/svg+xml`),a=i.querySelector(`svg`);if(!a){m(``);return}if(!a.getAttribute(`viewBox`)){let e=parseFloat(a.getAttribute(`width`)||``),t=parseFloat(a.getAttribute(`height`)||``);Number.isFinite(e)&&Number.isFinite(t)&&a.setAttribute(`viewBox`,`0 0 ${e} ${t}`)}if(a.removeAttribute(`width`),a.removeAttribute(`height`),a.setAttribute(`class`,`map-svg`),a.querySelectorAll(`path[title]`).forEach(e=>{let t=e.getAttribute(`title`)||``;t&&(e.classList.add(`country`),e.setAttribute(`data-name`,t))}),u){let e=r[d];if(e){let t=e=>{let t=i.createElementNS(`http://www.w3.org/2000/svg`,`path`);return t.setAttribute(`d`,e),t.setAttribute(`class`,`connection-line`),t.setAttribute(`fill`,`none`),t},n=(e,t,n)=>{let r=i.createElementNS(`http://www.w3.org/2000/svg`,`circle`);return r.setAttribute(`cx`,String(e)),r.setAttribute(`cy`,String(t)),r.setAttribute(`r`,`3`),r.setAttribute(`class`,n),r},o=new Set;for(let i of f){let c=r[i];if(c&&i!==d){let r=s(c,e);a.appendChild(t(r)),o.has(i)||(a.appendChild(n(c.x,c.y,`connection-dot connection-dot-start`)),o.add(i))}}o.has(d)||(a.appendChild(n(e.x,e.y,`connection-dot connection-dot-end`)),o.add(d))}}m(new XMLSerializer().serializeToString(a))}catch{e&&m(``)}})(),()=>{e=!1}},[c,u,d,f]);let O=e=>!e||!(e instanceof Element)?null:e.closest(`[data-name]`),k=e=>{let t=T.current?.getBoundingClientRect();return t?{x:e.clientX-t.left,y:e.clientY-t.top}:{x:0,y:0}},A=()=>{let e=T.current;if(!e)return;let t=e.querySelector(`.country.is-selected`);t&&t.classList.remove(`is-selected`)},j=e=>{if(E.current.isPanning){let t=e.clientX-E.current.startX,n=e.clientY-E.current.startY;S({x:E.current.originX+t,y:E.current.originY+n}),E.current.moved=!0,g(e=>({...e,visible:!1}));return}let t=O(e.target)?.dataset.name;if(!t){g(e=>({...e,visible:!1}));return}let{x:n,y:r}=k(e);g({name:t,x:n,y:r,visible:!0})},M=()=>{g(e=>({...e,visible:!1})),E.current.isPanning=!1,w(!1)},N=e=>{if(E.current.moved){E.current.moved=!1;return}let t=O(e.target),n=t?.dataset.name;if(!n){A(),v(e=>({...e,visible:!1}));return}let{x:r,y:i}=k(e);v({name:n,x:r,y:i,visible:!0}),A(),t.classList.add(`is-selected`)},P=e=>{e.preventDefault();let t=e.deltaY>0?-1:1;b(e=>{let n=e+t*.1;return Math.min(3,Math.max(1,Number(n.toFixed(2))))})},F=e=>{e.button===0&&(e.currentTarget.setPointerCapture(e.pointerId),E.current.isPanning=!0,E.current.startX=e.clientX,E.current.startY=e.clientY,E.current.originX=x.x,E.current.originY=x.y,E.current.moved=!1,w(!0))},I=()=>{E.current.isPanning=!1,w(!1)},L={"--map-background":i||`transparent`,"--country-fill":a,"--country-hover":D.hover,"--country-selected":D.selected,"--country-stroke":D.stroke},R=[`map-container`,l].filter(Boolean).join(` `);return(0,t.jsxs)(`div`,{className:C?`${R} is-panning`.trim():R,style:L,ref:T,onPointerMove:j,onPointerLeave:M,onPointerDown:F,onPointerUp:I,onClick:N,onWheel:P,role:`img`,"aria-label":`World map with clickable countries`,children:[p?(0,t.jsx)(`div`,{className:`map-viewport`,style:{transform:`translate(${x.x}px, ${x.y}px) scale(${y})`},children:(0,t.jsx)(`div`,{className:`map-svg-wrap`,dangerouslySetInnerHTML:{__html:p}})}):(0,t.jsx)(`div`,{className:`map-loading`,children:`Loading map...`}),h.visible&&(0,t.jsx)(`div`,{className:`map-tooltip`,style:{left:h.x,top:h.y},role:`status`,children:h.name}),_.visible&&(0,t.jsx)(`div`,{className:`map-tooltip is-pinned`,style:{left:_.x,top:_.y},role:`status`,children:_.name})]})}exports.WorldMap=c,exports.default=c;
+`,r={AD:{x:479.3,y:331.5},AE:{x:626.4,y:392.9},AF:{x:664.9,y:361.8},AG:{x:301.5,y:413.8},AI:{x:297.9,y:411.2},AL:{x:531.5,y:336.6},AM:{x:601.2,y:340.6},AO:{x:525.1,y:494.6},AR:{x:296.3,y:586.5},AS:{x:1006.2,y:503.2},AT:{x:512.3,y:310.9},AU:{x:856.4,y:568.8},AW:{x:278.5,y:427.7},AX:{x:531.2,y:250.9},AZ:{x:608.4,y:340.3},BA:{x:524.5,y:326.1},BB:{x:307.8,y:425.8},BD:{x:728.4,y:394.8},BE:{x:487.4,y:299},BF:{x:470.5,y:428.5},BG:{x:546.4,y:330.7},BH:{x:616.7,y:387.7},BI:{x:558.8,y:472.4},BJ:{x:481.3,y:436.8},BL:{x:298.5,y:412.2},BN:{x:796.8,y:450.3},BO:{x:296.5,y:509.3},BM:{x:293.1,y:367.5},BQ:{x:290.6,y:421},BR:{x:322.2,y:505.6},BS:{x:262,y:394},BT:{x:728.6,y:383.1},BV:{x:484.5,y:644.8},BW:{x:544.1,y:527},BY:{x:553.3,y:284.1},BZ:{x:226.5,y:414.3},CA:{x:203.1,y:173.2},CC:{x:746.8,y:497.1},CD:{x:535.9,y:474.4},CF:{x:533.6,y:444.3},CG:{x:516.6,y:464.8},CH:{x:497.9,y:314.7},CI:{x:459.3,y:441.8},CK:{x:26.4,y:523.5},CL:{x:228.1,y:582.3},CM:{x:509.6,y:442.2},CN:{x:767.3,y:348.2},CO:{x:270.2,y:451.4},CR:{x:238.5,y:435.9},CU:{x:251.7,y:401.4},CV:{x:407.5,y:417.7},CW:{x:281.4,y:428.6},CX:{x:771.4,y:492.4},CY:{x:568.7,y:358.2},CZ:{x:518.3,y:302},DE:{x:504.2,y:295.3},DJ:{x:594.4,y:429.7},DK:{x:507.5,y:272.2},DM:{x:302.7,y:419.4},DO:{x:278,y:409.6},DZ:{x:479.5,y:380.2},EC:{x:240.7,y:467.9},EG:{x:561.3,y:384.9},EE:{x:545.1,y:259.8},EH:{x:438.7,y:393.1},ER:{x:586.5,y:420},ES:{x:455.5,y:354.7},ET:{x:588.5,y:437.2},FI:{x:548.1,y:218.7},FJ:{x:974.9,y:511.5},FK:{x:308,y:632.6},FM:{x:897.3,y:442.1},FO:{x:455.5,y:241.2},FR:{x:481.6,y:316.1},GA:{x:507.4,y:465.2},GB:{x:465.9,y:274.3},GE:{x:596.5,y:332.3},GD:{x:301.8,y:428.9},GF:{x:325.8,y:451.9},GG:{x:467.7,y:303.5},GH:{x:472,y:440.6},GI:{x:459.9,y:354.7},GL:{x:356.7,y:126.7},GM:{x:431.9,y:425.1},GN:{x:443,y:435},GO:{x:607.6,y:495.4},GP:{x:302.3,y:417.1},GQ:{x:502.6,y:456.3},GR:{x:542.1,y:346.6},GS:{x:384.7,y:654.1},GT:{x:221.7,y:418.3},GU:{x:881.3,y:425.1},GW:{x:432.3,y:429.8},GY:{x:309.5,y:449.3},HK:{x:795.1,y:398.9},HM:{x:681.3,y:638.5},HN:{x:232.8,y:421.3},HR:{x:521.1,y:323.9},HT:{x:269.8,y:408.7},HU:{x:529.6,y:313.2},ID:{x:806.3,y:470},IE:{x:451.9,y:285.6},IL:{x:573.3,y:370.3},IM:{x:462.1,y:281.9},IN:{x:707.1,y:400.5},IO:{x:678.2,y:483.4},IQ:{x:597.4,y:364.2},IR:{x:625.5,y:366.2},IS:{x:421.5,y:221.6},IT:{x:510.1,y:333.2},JE:{x:468.9,y:304.6},JM:{x:258,y:411.5},JO:{x:579.1,y:370.9},JP:{x:853.1,y:356.5},JU:{x:594.9,y:511.2},KE:{x:581.2,y:461.8},KG:{x:684.6,y:336.3},KH:{x:769.5,y:427.6},KI:{x:516.3,y:473.5},KM:{x:598,y:496.3},KN:{x:299,y:414.1},KP:{x:832.8,y:339.4},KR:{x:835.4,y:355.3},XK:{x:533.5,y:331.4},KW:{x:608.2,y:377.3},KY:{x:248.7,y:407.4},KZ:{x:662.8,y:307.5},LA:{x:766.4,y:411.1},LB:{x:575.5,y:362.4},LC:{x:303.8,y:423.8},LI:{x:501.7,y:313.2},LK:{x:701.6,y:440.9},LR:{x:448.4,y:444.9},LS:{x:554.1,y:549.5},LT:{x:541.8,y:277.4},LU:{x:492,y:302.1},LV:{x:544,y:268.8},LY:{x:523.3,y:386.1},MA:{x:454.9,y:369},MC:{x:495.7,y:326.8},MD:{x:554.5,y:314},MG:{x:606.4,y:516.8},ME:{x:529.3,y:330.8},MF:{x:297.9,y:411.6},MH:{x:950,y:439.2},MK:{x:535.9,y:335},ML:{x:463.6,y:412.7},MO:{x:793.5,y:399.3},MM:{x:746.2,y:407.6},MN:{x:766.3,y:313.4},MP:{x:883.2,y:416.3},MQ:{x:303.6,y:421.6},MR:{x:444.2,y:402.6},MS:{x:300.4,y:415.6},MT:{x:515.2,y:355.3},MU:{x:636.4,y:520.6},MV:{x:681,y:452.5},MW:{x:571.1,y:500.3},MX:{x:187.1,y:394.1},MY:{x:782.1,y:451.4},MZ:{x:574.6,y:516.5},NA:{x:526.8,y:529.1},NC:{x:935.3,y:522.5},NE:{x:497.5,y:412.7},NF:{x:946.2,y:547.7},NG:{x:499.2,y:437.4},NI:{x:235.2,y:426.7},NL:{x:489.7,y:291.4},NO:{x:525.1,y:219.1},NP:{x:710.9,y:380.3},NR:{x:943.4,y:464.4},NU:{x:1008.5,y:517.1},NZ:{x:965.7,y:600.7},OM:{x:631.8,y:401.3},PA:{x:250.1,y:439.4},PE:{x:264.4,y:489},PF:{x:71,y:505},PG:{x:891.4,y:481.1},PH:{x:816.7,y:426.1},PK:{x:669.4,y:373.1},PL:{x:528.5,y:292.2},PM:{x:317,y:314.2},PN:{x:114.8,y:533},PR:{x:287.9,y:411.2},PS:{x:572.8,y:369},PT:{x:422.3,y:349.7},PW:{x:847.9,y:447.9},PY:{x:310.9,y:530.3},QA:{x:618.5,y:389.8},RE:{x:630.8,y:523.2},RO:{x:545,y:317.9},RS:{x:533.6,y:325},RU:{x:769.4,y:187.8},RW:{x:558.7,y:468.3},SA:{x:601.5,y:392.4},SB:{x:927.6,y:488.8},SC:{x:630.6,y:476},SD:{x:559.7,y:419},SE:{x:524.4,y:234.6},SG:{x:766.3,y:459.1},SH:{x:446.7,y:496.6},SI:{x:516.8,y:317.4},SJ:{x:509.3,y:121.1},SK:{x:530.2,y:306.9},SL:{x:441.8,y:439.3},SM:{x:509.9,y:326.1},SN:{x:434.3,y:422},SO:{x:604.5,y:448.5},SR:{x:317.7,y:452},SS:{x:558.3,y:440.9},ST:{x:494.4,y:460.5},SV:{x:225.4,y:424.1},SX:{x:297.9,y:411.8},SY:{x:584.5,y:359.1},SZ:{x:563.2,y:539.7},TC:{x:272.9,y:400.5},TD:{x:527.4,y:418.8},TF:{x:646.4,y:616.3},TG:{x:477.3,y:438.8},TH:{x:759.8,y:425.9},TJ:{x:674.8,y:344.9},TK:{x:1003,y:488},TL:{x:827.6,y:487.6},TM:{x:642.1,y:344.3},TN:{x:501.6,y:362.4},TO:{x:995.1,y:519.9},TR:{x:573.8,y:344.4},TT:{x:303.1,y:432.9},TV:{x:973.8,y:483.4},TW:{x:812,y:395.1},TZ:{x:572.8,y:480.8},UA:{x:562.3,y:307.5},UG:{x:565.5,y:459.1},"UM-DQ":{x:25.8,y:464},"UM-FQ":{x:990,y:462.3},"UM-HQ":{x:989.5,y:460.7},"UM-JQ":{x:1009.4,y:415.6},"UM-MQ":{x:987.4,y:380.9},"UM-WQ":{x:942.6,y:408.1},US:{x:143.6,y:291},UY:{x:318.3,y:559},UZ:{x:656.1,y:335.4},VA:{x:509.8,y:333.9},VC:{x:303,y:426.3},VE:{x:288,y:444.9},VG:{x:293.9,y:410.2},VI:{x:293,y:411.8},VN:{x:771.8,y:417.4},VU:{x:947,y:511},WF:{x:988,y:501.7},WS:{x:1002.2,y:501.6},YE:{x:611.1,y:418.6},YT:{x:601.6,y:499},ZA:{x:551.1,y:569},ZM:{x:553,y:500},ZW:{x:556.6,y:517.1}},i=e=>/^#([0-9a-fA-F]{3}){1,2}$/.test(e),a=e=>e.toString(16).padStart(2,`0`),o=(e,t)=>{if(!i(e))return e;let n=e.replace(`#`,``),r=n.length===3?n.split(``).map(e=>e+e).join(``):n,o=parseInt(r,16),s=Math.min(255,Math.max(0,(o>>16&255)+t)),c=Math.min(255,Math.max(0,(o>>8&255)+t)),l=Math.min(255,Math.max(0,(o&255)+t));return`#${a(s)}${a(c)}${a(l)}`};function s(e,t){let n=t.x-e.x,r=t.y-e.y,i=Math.sqrt(n*n+r*r),a=(e.y+t.y)/2,o=Math.max(Math.min(i*.35,220),15),s=e.x+n*.25,c=a-o,l=e.x+n*.75,u=a-o;return`M ${e.x} ${e.y} C ${s},${c} ${l},${u} ${t.x} ${t.y}`}function c({backgroundColor:i,countryColor:a=`#093C5D`,svgUrl:c,className:l,showConnections:u=!0,connectionBase:d=`BD`,connectedCountries:f=[`US`,`IN`],onCountryHover:p,onCountryClick:m,onConnectionDotHover:h,onConnectionDotClick:g}){let[_,v]=(0,e.useState)(``),[y,b]=(0,e.useState)({name:``,x:0,y:0,visible:!1}),[x,S]=(0,e.useState)({name:``,x:0,y:0,visible:!1}),[C,w]=(0,e.useState)(1),[T,E]=(0,e.useState)({x:0,y:0}),[D,O]=(0,e.useState)(!1),k=(0,e.useRef)(null),A=(0,e.useRef)({isPanning:!1,startX:0,startY:0,originX:0,originY:0,moved:!1}),j=(0,e.useMemo)(()=>({hover:o(a,24),selected:o(a,-24),stroke:o(a,-36)}),[a]);(0,e.useEffect)(()=>{let e=!0;return(async()=>{try{let t;if(c){let e=await fetch(c);if(!e.ok)throw Error(`Failed to fetch SVG: ${e.status}`);t=await e.text()}else t=n;if(!e)return;let i=new DOMParser().parseFromString(t,`image/svg+xml`),a=i.querySelector(`svg`);if(!a){v(``);return}if(!a.getAttribute(`viewBox`)){let e=parseFloat(a.getAttribute(`width`)||``),t=parseFloat(a.getAttribute(`height`)||``);Number.isFinite(e)&&Number.isFinite(t)&&a.setAttribute(`viewBox`,`0 0 ${e} ${t}`)}if(a.removeAttribute(`width`),a.removeAttribute(`height`),a.setAttribute(`class`,`map-svg`),a.querySelectorAll(`path[title]`).forEach(e=>{let t=e.getAttribute(`title`)||``;t&&(e.classList.add(`country`),e.setAttribute(`data-name`,t))}),u){let e=r[d];if(e){let t=e=>{let t=i.createElementNS(`http://www.w3.org/2000/svg`,`path`);return t.setAttribute(`d`,e),t.setAttribute(`class`,`connection-line`),t.setAttribute(`fill`,`none`),t},n=(e,t,n,r)=>{let a=i.createElementNS(`http://www.w3.org/2000/svg`,`circle`);return a.setAttribute(`cx`,String(e)),a.setAttribute(`cy`,String(t)),a.setAttribute(`r`,`3`),a.setAttribute(`class`,n),a.setAttribute(`data-country-code`,r),a},o=new Set;for(let i of f){let c=r[i];if(c&&i!==d){let r=s(c,e);a.appendChild(t(r)),o.has(i)||(a.appendChild(n(c.x,c.y,`connection-dot connection-dot-start`,i)),o.add(i))}}o.has(d)||(a.appendChild(n(e.x,e.y,`connection-dot connection-dot-end`,d)),o.add(d))}}v(new XMLSerializer().serializeToString(a))}catch{e&&v(``)}})(),()=>{e=!1}},[c,u,d,f]);let M=e=>!e||!(e instanceof Element)?null:e.closest(`[data-name]`),N=e=>!e||!(e instanceof Element)?null:e.closest(`.connection-dot`),P=e=>{let t=k.current?.getBoundingClientRect();return t?{x:e.clientX-t.left,y:e.clientY-t.top}:{x:0,y:0}},F=()=>{let e=k.current;if(!e)return;let t=e.querySelector(`.country.is-selected`);t&&t.classList.remove(`is-selected`)},I=e=>{if(A.current.isPanning){let t=e.clientX-A.current.startX,n=e.clientY-A.current.startY;E({x:A.current.originX+t,y:A.current.originY+n}),A.current.moved=!0,b(e=>({...e,visible:!1}));return}let t=N(e.target)?.dataset.countryCode;if(t){if(h){let{x:n,y:r}=P(e);h(t,n,r)}b(e=>({...e,visible:!1}));return}let n=M(e.target),r=n?.dataset.name;if(!r){b(e=>({...e,visible:!1}));return}let{x:i,y:a}=P(e);if(p){p(n.getAttribute(`id`)||``,r,i,a),b(e=>({...e,visible:!1}));return}b({name:r,x:i,y:a,visible:!0})},L=()=>{b(e=>({...e,visible:!1})),A.current.isPanning=!1,O(!1)},R=e=>{if(A.current.moved){A.current.moved=!1;return}let t=N(e.target)?.dataset.countryCode;if(t){if(g){let{x:n,y:r}=P(e);g(t,n,r)}return}let n=M(e.target),r=n?.dataset.name;if(!r){F(),S(e=>({...e,visible:!1}));return}let{x:i,y:a}=P(e);if(m){m(n.getAttribute(`id`)||``,r,i,a),S(e=>({...e,visible:!1}));return}S({name:r,x:i,y:a,visible:!0}),F(),n.classList.add(`is-selected`)},z=e=>{e.preventDefault();let t=e.deltaY>0?-1:1;w(e=>{let n=e+t*.1;return Math.min(3,Math.max(1,Number(n.toFixed(2))))})},B=e=>{e.button===0&&(e.currentTarget.setPointerCapture(e.pointerId),A.current.isPanning=!0,A.current.startX=e.clientX,A.current.startY=e.clientY,A.current.originX=T.x,A.current.originY=T.y,A.current.moved=!1,O(!0))},V=()=>{A.current.isPanning=!1,O(!1)},H={"--map-background":i||`transparent`,"--country-fill":a,"--country-hover":j.hover,"--country-selected":j.selected,"--country-stroke":j.stroke},U=[`map-container`,l].filter(Boolean).join(` `);return(0,t.jsxs)(`div`,{className:D?`${U} is-panning`.trim():U,style:H,ref:k,onPointerMove:I,onPointerLeave:L,onPointerDown:B,onPointerUp:V,onClick:R,onWheel:z,role:`img`,"aria-label":`World map with clickable countries`,children:[_?(0,t.jsx)(`div`,{className:`map-viewport`,style:{transform:`translate(${T.x}px, ${T.y}px) scale(${C})`},children:(0,t.jsx)(`div`,{className:`map-svg-wrap`,dangerouslySetInnerHTML:{__html:_}})}):(0,t.jsx)(`div`,{className:`map-loading`,children:`Loading map...`}),y.visible&&(0,t.jsx)(`div`,{className:`map-tooltip`,style:{left:y.x,top:y.y},role:`status`,children:y.name}),x.visible&&(0,t.jsx)(`div`,{className:`map-tooltip is-pinned`,style:{left:x.x,top:x.y},role:`status`,children:x.name})]})}exports.WorldMap=c,exports.default=c;

package/dist/world-map-svg.es.js

@@ -1035,28 +1035,28 @@ function d(e, t) {
 	let n = t.x - e.x, r = t.y - e.y, i = Math.sqrt(n * n + r * r), a = (e.y + t.y) / 2, o = Math.max(Math.min(i * .35, 220), 15), s = e.x + n * .25, c = a - o, l = e.x + n * .75, u = a - o;
 	return `M ${e.x} ${e.y} C ${s},${c} ${l},${u} ${t.x} ${t.y}`;
 }
-function f({ backgroundColor: c, countryColor: l = "#093C5D", svgUrl: f, className: p, showConnections: m = !0, connectionBase: h = "BD", connectedCountries: g = ["US", "IN"] }) {
-	let [_, v] = r(""), [y, b] = r({
+function f({ backgroundColor: c, countryColor: l = "#093C5D", svgUrl: f, className: p, showConnections: m = !0, connectionBase: h = "BD", connectedCountries: g = ["US", "IN"], onCountryHover: _, onCountryClick: v, onConnectionDotHover: y, onConnectionDotClick: b }) {
+	let [x, S] = r(""), [C, w] = r({
 		name: "",
 		x: 0,
 		y: 0,
 		visible: !1
-	}), [x, S] = r({
+	}), [T, E] = r({
 		name: "",
 		x: 0,
 		y: 0,
 		visible: !1
-	}), [C, w] = r(1), [T, E] = r({
+	}), [D, O] = r(1), [k, A] = r({
 		x: 0,
 		y: 0
-	}), [D, O] = r(!1), k = n(null), A = n({
+	}), [j, M] = r(!1), N = n(null), P = n({
 		isPanning: !1,
 		startX: 0,
 		startY: 0,
 		originX: 0,
 		originY: 0,
 		moved: !1
-	}), j = t(() => ({
+	}), F = t(() => ({
 		hover: u(l, 24),
 		selected: u(l, -24),
 		stroke: u(l, -36)
@@ -1074,7 +1074,7 @@ function f({ backgroundColor: c, countryColor: l = "#093C5D", svgUrl: f, classNa
 				if (!e) return;
 				let n = new DOMParser().parseFromString(t, "image/svg+xml"), r = n.querySelector("svg");
 				if (!r) {
-					v("");
+					S("");
 					return;
 				}
 				if (!r.getAttribute("viewBox")) {
@@ -1090,23 +1090,23 @@ function f({ backgroundColor: c, countryColor: l = "#093C5D", svgUrl: f, classNa
 						let t = (e) => {
 							let t = n.createElementNS("http://www.w3.org/2000/svg", "path");
 							return t.setAttribute("d", e), t.setAttribute("class", "connection-line"), t.setAttribute("fill", "none"), t;
-						}, i = (e, t, r) => {
-							let i = n.createElementNS("http://www.w3.org/2000/svg", "circle");
-							return i.setAttribute("cx", String(e)), i.setAttribute("cy", String(t)), i.setAttribute("r", "3"), i.setAttribute("class", r), i;
+						}, i = (e, t, r, i) => {
+							let a = n.createElementNS("http://www.w3.org/2000/svg", "circle");
+							return a.setAttribute("cx", String(e)), a.setAttribute("cy", String(t)), a.setAttribute("r", "3"), a.setAttribute("class", r), a.setAttribute("data-country-code", i), a;
 						}, a = /* @__PURE__ */ new Set();
 						for (let n of g) {
 							let o = s[n];
 							if (o && n !== h) {
 								let s = d(o, e);
-								r.appendChild(t(s)), a.has(n) || (r.appendChild(i(o.x, o.y, "connection-dot connection-dot-start")), a.add(n));
+								r.appendChild(t(s)), a.has(n) || (r.appendChild(i(o.x, o.y, "connection-dot connection-dot-start", n)), a.add(n));
 							}
 						}
-						a.has(h) || (r.appendChild(i(e.x, e.y, "connection-dot connection-dot-end")), a.add(h));
+						a.has(h) || (r.appendChild(i(e.x, e.y, "connection-dot connection-dot-end", h)), a.add(h));
 					}
 				}
-				v(new XMLSerializer().serializeToString(r));
+				S(new XMLSerializer().serializeToString(r));
 			} catch {
-				e && v("");
+				e && S("");
 			}
 		})(), () => {
 			e = !1;
@@ -1117,8 +1117,8 @@ function f({ backgroundColor: c, countryColor: l = "#093C5D", svgUrl: f, classNa
 		h,
 		g
 	]);
-	let M = (e) => !e || !(e instanceof Element) ? null : e.closest("[data-name]"), N = (e) => {
-		let t = k.current?.getBoundingClientRect();
+	let I = (e) => !e || !(e instanceof Element) ? null : e.closest("[data-name]"), L = (e) => !e || !(e instanceof Element) ? null : e.closest(".connection-dot"), R = (e) => {
+		let t = N.current?.getBoundingClientRect();
 		return t ? {
 			x: e.clientX - t.left,
 			y: e.clientY - t.top
@@ -1126,122 +1126,156 @@ function f({ backgroundColor: c, countryColor: l = "#093C5D", svgUrl: f, classNa
 			x: 0,
 			y: 0
 		};
-	}, P = () => {
-		let e = k.current;
+	}, z = () => {
+		let e = N.current;
 		if (!e) return;
 		let t = e.querySelector(".country.is-selected");
 		t && t.classList.remove("is-selected");
-	}, F = (e) => {
-		if (A.current.isPanning) {
-			let t = e.clientX - A.current.startX, n = e.clientY - A.current.startY;
-			E({
-				x: A.current.originX + t,
-				y: A.current.originY + n
-			}), A.current.moved = !0, b((e) => ({
+	}, B = (e) => {
+		if (P.current.isPanning) {
+			let t = e.clientX - P.current.startX, n = e.clientY - P.current.startY;
+			A({
+				x: P.current.originX + t,
+				y: P.current.originY + n
+			}), P.current.moved = !0, w((e) => ({
 				...e,
 				visible: !1
 			}));
 			return;
 		}
-		let t = M(e.target)?.dataset.name;
-		if (!t) {
-			b((e) => ({
+		let t = L(e.target)?.dataset.countryCode;
+		if (t) {
+			if (y) {
+				let { x: n, y: r } = R(e);
+				y(t, n, r);
+			}
+			w((e) => ({
+				...e,
+				visible: !1
+			}));
+			return;
+		}
+		let n = I(e.target), r = n?.dataset.name;
+		if (!r) {
+			w((e) => ({
 				...e,
 				visible: !1
 			}));
 			return;
 		}
-		let { x: n, y: r } = N(e);
-		b({
-			name: t,
-			x: n,
-			y: r,
+		let { x: i, y: a } = R(e);
+		if (_) {
+			_(n.getAttribute("id") || "", r, i, a), w((e) => ({
+				...e,
+				visible: !1
+			}));
+			return;
+		}
+		w({
+			name: r,
+			x: i,
+			y: a,
 			visible: !0
 		});
-	}, I = () => {
-		b((e) => ({
+	}, V = () => {
+		w((e) => ({
 			...e,
 			visible: !1
-		})), A.current.isPanning = !1, O(!1);
-	}, L = (e) => {
-		if (A.current.moved) {
-			A.current.moved = !1;
+		})), P.current.isPanning = !1, M(!1);
+	}, H = (e) => {
+		if (P.current.moved) {
+			P.current.moved = !1;
+			return;
+		}
+		let t = L(e.target)?.dataset.countryCode;
+		if (t) {
+			if (b) {
+				let { x: n, y: r } = R(e);
+				b(t, n, r);
+			}
+			return;
+		}
+		let n = I(e.target), r = n?.dataset.name;
+		if (!r) {
+			z(), E((e) => ({
+				...e,
+				visible: !1
+			}));
 			return;
 		}
-		let t = M(e.target), n = t?.dataset.name;
-		if (!n) {
-			P(), S((e) => ({
+		let { x: i, y: a } = R(e);
+		if (v) {
+			v(n.getAttribute("id") || "", r, i, a), E((e) => ({
 				...e,
 				visible: !1
 			}));
 			return;
 		}
-		let { x: r, y: i } = N(e);
-		S({
-			name: n,
-			x: r,
-			y: i,
+		E({
+			name: r,
+			x: i,
+			y: a,
 			visible: !0
-		}), P(), t.classList.add("is-selected");
-	}, R = (e) => {
+		}), z(), n.classList.add("is-selected");
+	}, U = (e) => {
 		e.preventDefault();
 		let t = e.deltaY > 0 ? -1 : 1;
-		w((e) => {
+		O((e) => {
 			let n = e + t * .1;
 			return Math.min(3, Math.max(1, Number(n.toFixed(2))));
 		});
-	}, z = (e) => {
-		e.button === 0 && (e.currentTarget.setPointerCapture(e.pointerId), A.current.isPanning = !0, A.current.startX = e.clientX, A.current.startY = e.clientY, A.current.originX = T.x, A.current.originY = T.y, A.current.moved = !1, O(!0));
-	}, B = () => {
-		A.current.isPanning = !1, O(!1);
-	}, V = {
+	}, W = (e) => {
+		e.button === 0 && (e.currentTarget.setPointerCapture(e.pointerId), P.current.isPanning = !0, P.current.startX = e.clientX, P.current.startY = e.clientY, P.current.originX = k.x, P.current.originY = k.y, P.current.moved = !1, M(!0));
+	}, G = () => {
+		P.current.isPanning = !1, M(!1);
+	}, K = {
 		"--map-background": c || "transparent",
 		"--country-fill": l,
-		"--country-hover": j.hover,
-		"--country-selected": j.selected,
-		"--country-stroke": j.stroke
-	}, H = ["map-container", p].filter(Boolean).join(" ");
+		"--country-hover": F.hover,
+		"--country-selected": F.selected,
+		"--country-stroke": F.stroke
+	}, q = ["map-container", p].filter(Boolean).join(" ");
 	return /* @__PURE__ */ a("div", {
-		className: D ? `${H} is-panning`.trim() : H,
-		style: V,
-		ref: k,
-		onPointerMove: F,
-		onPointerLeave: I,
-		onPointerDown: z,
-		onPointerUp: B,
-		onClick: L,
-		onWheel: R,
+		className: j ? `${q} is-panning`.trim() : q,
+		style: K,
+		ref: N,
+		onPointerMove: B,
+		onPointerLeave: V,
+		onPointerDown: W,
+		onPointerUp: G,
+		onClick: H,
+		onWheel: U,
 		role: "img",
 		"aria-label": "World map with clickable countries",
 		children: [
-			_ ? /* @__PURE__ */ i("div", {
+			x ? /* @__PURE__ */ i("div", {
 				className: "map-viewport",
-				style: { transform: `translate(${T.x}px, ${T.y}px) scale(${C})` },
+				style: { transform: `translate(${k.x}px, ${k.y}px) scale(${D})` },
 				children: /* @__PURE__ */ i("div", {
 					className: "map-svg-wrap",
-					dangerouslySetInnerHTML: { __html: _ }
+					dangerouslySetInnerHTML: { __html: x }
 				})
 			}) : /* @__PURE__ */ i("div", {
 				className: "map-loading",
 				children: "Loading map..."
 			}),
-			y.visible && /* @__PURE__ */ i("div", {
+			C.visible && /* @__PURE__ */ i("div", {
 				className: "map-tooltip",
 				style: {
-					left: y.x,
-					top: y.y
+					left: C.x,
+					top: C.y
 				},
 				role: "status",
-				children: y.name
+				children: C.name
 			}),
-			x.visible && /* @__PURE__ */ i("div", {
+			T.visible && /* @__PURE__ */ i("div", {
 				className: "map-tooltip is-pinned",
 				style: {
-					left: x.x,
-					top: x.y
+					left: T.x,
+					top: T.y
 				},
 				role: "status",
-				children: x.name
+				children: T.name
 			})
 		]
 	});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "world-map-svg",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Interactive SVG world map React component",
   "license": "MIT",
   "keywords": [