50:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 51:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 52:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 53:T462f,'use client' import { cn } from '@/lib/utils' import { type PointerEvent as ReactPointerEvent, type ReactNode, useCallback, useEffect, useId, useMemo, useRef, useState, } from 'react' import { MapProvider, useMapContext } from './map-context' import { MapListbox } from './map-listbox' import { MapMarker } from './map-marker' import { MapRegion } from './map-region' import { MapTooltip } from './map-tooltip' import type { MapData, MapMarkerData, MapRegionData, MarkerEvent, RegionEvent, RegionOverride, ZoomConfig, } from './types' export interface MapProps { data: MapData selectedRegion?: string | null regions?: RegionOverride[] markers?: MapMarkerData[] disabledRegions?: string[] onRegionClick?: (event: RegionEvent) => void onRegionEnter?: (event: RegionEvent) => void onRegionLeave?: (event: RegionEvent) => void onMarkerClick?: (event: MarkerEvent) => void showLabels?: boolean showTooltips?: boolean renderTooltip?: (region: MapRegionData) => ReactNode className?: string children?: ReactNode 'aria-label'?: string enableZoom?: boolean zoomConfig?: Partial controls?: ReactNode } function getPointerPosition( nativeEvent: unknown ): { x: number; y: number } | null { if ( typeof nativeEvent === 'object' && nativeEvent !== null && 'clientX' in nativeEvent && 'clientY' in nativeEvent && typeof nativeEvent.clientX === 'number' && typeof nativeEvent.clientY === 'number' ) { return { x: nativeEvent.clientX, y: nativeEvent.clientY } } const maybeTouches = ( nativeEvent as { touches?: { length: number item?: (index: number) => unknown [index: number]: unknown } } ).touches if (maybeTouches && maybeTouches.length > 0) { const touch = typeof maybeTouches.item === 'function' ? maybeTouches.item(0) : maybeTouches[0] if ( typeof touch === 'object' && touch !== null && 'clientX' in touch && 'clientY' in touch && typeof touch.clientX === 'number' && typeof touch.clientY === 'number' ) { return { x: touch.clientX, y: touch.clientY } } } return null } function parseViewBox(viewBox: string) { const parts = viewBox.split(/\s+/).map(Number) return { x: parts[0], y: parts[1], width: parts[2], height: parts[3] } } function MapInner({ data, regions, markers, disabledRegions, onRegionClick, onRegionEnter, onRegionLeave, onMarkerClick, showLabels = true, showTooltips = true, renderTooltip, className, children, 'aria-label': ariaLabel, enableZoom = false, }: MapProps) { const { selectedRegion, setSelectedRegion, focusedRegion, setTooltipState, zoomState, setZoomState, zoomConfig, } = useMapContext() const descId = useId() const [announcement, setAnnouncement] = useState('') const svgRef = useRef(null) const isPanningRef = useRef(false) const [isGesture, setIsGesture] = useState(false) const dragStartRef = useRef<{ x: number y: number tx: number ty: number } | null>(null) const pinchStartRef = useRef<{ dist: number; scale: number } | null>(null) const regionOverrides = useMemo(() => { return new Map(regions?.map((region) => [region.id, region]) ?? []) }, [regions]) const disabledRegionSet = useMemo(() => { return new Set(disabledRegions ?? []) }, [disabledRegions]) const mergedRegions = useMemo(() => { return data.regions.map((baseRegion) => { const override = regionOverrides.get(baseRegion.id) return { ...baseRegion, ...override, } }) }, [data.regions, regionOverrides]) const mapLabel = ariaLabel ?? data.name const viewBox = useMemo(() => parseViewBox(data.viewBox), [data.viewBox]) const clampTranslate = useCallback( (tx: number, ty: number, scale: number) => { const maxPanX = (viewBox.width * (scale - 1)) / 2 + viewBox.width * 0.5 const maxPanY = (viewBox.height * (scale - 1)) / 2 + viewBox.height * 0.5 return { tx: Math.max(-maxPanX, Math.min(maxPanX, tx)), ty: Math.max(-maxPanY, Math.min(maxPanY, ty)), } }, [viewBox] ) // Wheel zoom useEffect(() => { if (!enableZoom) return const svg = svgRef.current if (!svg) return const handleWheel = (e: WheelEvent) => { e.preventDefault() const delta = e.deltaY > 0 ? -zoomConfig.zoomStep : zoomConfig.zoomStep setZoomState((prev) => { const newScale = Math.max( zoomConfig.minZoom, Math.min(zoomConfig.maxZoom, prev.scale + delta) ) if (newScale === prev.scale) return prev // Auto-center when fully zoomed out if (newScale === zoomConfig.minZoom) { return { scale: newScale, translateX: 0, translateY: 0 } } // Zoom toward cursor position const rect = svg.getBoundingClientRect() const cursorX = e.clientX - rect.left const cursorY = e.clientY - rect.top const svgX = (cursorX / rect.width) * viewBox.width + viewBox.x const svgY = (cursorY / rect.height) * viewBox.height + viewBox.y const scaleRatio = newScale / prev.scale const newTx = svgX - scaleRatio * (svgX - prev.translateX) const newTy = svgY - scaleRatio * (svgY - prev.translateY) const clamped = clampTranslate(newTx, newTy, newScale) return { scale: newScale, translateX: clamped.tx, translateY: clamped.ty, } }) } svg.addEventListener('wheel', handleWheel, { passive: false }) return () => svg.removeEventListener('wheel', handleWheel) }, [enableZoom, zoomConfig, setZoomState, viewBox, clampTranslate]) // Click-and-drag pan — use document-level move/up so we don't steal // pointer events from child elements (setPointerCapture would // prevent region clicks from firing). const handlePointerDown = useCallback( (e: ReactPointerEvent) => { if (!enableZoom || e.button !== 0) return // Only start drag from the SVG background or zoom layer, not from regions const target = e.target as Element if (target.closest('[data-slot="map-region"]')) { // Store start position so we can detect drag even from a region isPanningRef.current = false setIsGesture(true) dragStartRef.current = { x: e.clientX, y: e.clientY, tx: zoomState.translateX, ty: zoomState.translateY, } return } isPanningRef.current = false setIsGesture(true) dragStartRef.current = { x: e.clientX, y: e.clientY, tx: zoomState.translateX, ty: zoomState.translateY, } }, [enableZoom, zoomState.translateX, zoomState.translateY] ) // Document-level pointermove/pointerup for drag panning useEffect(() => { if (!enableZoom) return const handlePointerMove = (e: PointerEvent) => { if (!dragStartRef.current) return const dx = e.clientX - dragStartRef.current.x const dy = e.clientY - dragStartRef.current.y // Movement threshold to distinguish from click if (!isPanningRef.current && Math.hypot(dx, dy) < 3) return isPanningRef.current = true const svg = svgRef.current if (!svg) return const rect = svg.getBoundingClientRect() const svgDx = (dx / rect.width) * viewBox.width * zoomState.scale const svgDy = (dy / rect.height) * viewBox.height * zoomState.scale const newTx = dragStartRef.current.tx + svgDx const newTy = dragStartRef.current.ty + svgDy const clamped = clampTranslate(newTx, newTy, zoomState.scale) setZoomState((prev) => ({ ...prev, translateX: clamped.tx, translateY: clamped.ty, })) } const handlePointerUp = () => { if (!dragStartRef.current) return dragStartRef.current = null // Delay clearing so click handlers can check isPanning requestAnimationFrame(() => { isPanningRef.current = false setIsGesture(false) }) } document.addEventListener('pointermove', handlePointerMove) document.addEventListener('pointerup', handlePointerUp) return () => { document.removeEventListener('pointermove', handlePointerMove) document.removeEventListener('pointerup', handlePointerUp) } }, [enableZoom, viewBox, zoomState.scale, setZoomState, clampTranslate]) // Touch pinch-to-zoom useEffect(() => { if (!enableZoom) return const svg = svgRef.current if (!svg) return const getTouchDist = (e: TouchEvent) => { if (e.touches.length < 2) return null const dx = e.touches[0].clientX - e.touches[1].clientX const dy = e.touches[0].clientY - e.touches[1].clientY return Math.hypot(dx, dy) } const handleTouchStart = (e: TouchEvent) => { if (e.touches.length === 2) { e.preventDefault() const dist = getTouchDist(e) if (dist !== null) { pinchStartRef.current = { dist, scale: zoomState.scale } } } } const handleTouchMove = (e: TouchEvent) => { if (e.touches.length === 2 && pinchStartRef.current) { e.preventDefault() const dist = getTouchDist(e) if (dist !== null) { const scaleRatio = dist / pinchStartRef.current.dist const newScale = Math.max( zoomConfig.minZoom, Math.min( zoomConfig.maxZoom, pinchStartRef.current.scale * scaleRatio ) ) setZoomState((prev) => ({ ...prev, scale: newScale })) } } } const handleTouchEnd = (e: TouchEvent) => { if (e.touches.length < 2) { pinchStartRef.current = null } } svg.addEventListener('touchstart', handleTouchStart, { passive: false }) svg.addEventListener('touchmove', handleTouchMove, { passive: false }) svg.addEventListener('touchend', handleTouchEnd) return () => { svg.removeEventListener('touchstart', handleTouchStart) svg.removeEventListener('touchmove', handleTouchMove) svg.removeEventListener('touchend', handleTouchEnd) } }, [enableZoom, zoomConfig, zoomState.scale, setZoomState]) const shouldSuppressClick = useCallback(() => { return enableZoom && isPanningRef.current }, [enableZoom]) const svgContent = ( <> {mergedRegions.map((region) => { const disabled = region.disabled || disabledRegionSet.has(region.id) const tooltipContent = renderTooltip?.(region) ?? region.tooltipContent ?? region.name return ( { if (shouldSuppressClick()) return const isCurrentlySelected = selectedRegion === region.id setSelectedRegion(isCurrentlySelected ? null : region.id) setAnnouncement( isCurrentlySelected ? `${region.name} deselected` : `${region.name} selected` ) onRegionClick?.(event) if (showTooltips) { setTooltipState({ visible: true, content: tooltipContent, position: getPointerPosition(event.nativeEvent), }) } }} onEnter={(event) => { onRegionEnter?.(event) if (showTooltips) { setTooltipState((current) => ({ visible: true, content: tooltipContent, position: getPointerPosition(event.nativeEvent) ?? current.position, })) } }} onMove={(event) => { if (!showTooltips) { return } setTooltipState((current) => ({ ...current, visible: true, content: tooltipContent, position: getPointerPosition(event.nativeEvent) ?? current.position, })) }} onLeave={(event) => { onRegionLeave?.(event) if (showTooltips) { setTooltipState((current) => ({ ...current, visible: false })) } }} /> ) })} {markers?.map((marker) => ( { if (shouldSuppressClick()) return onMarkerClick?.(event) if (showTooltips && marker.tooltipContent) { setTooltipState({ visible: true, content: marker.tooltipContent, position: getPointerPosition(event.nativeEvent), }) } }} onEnter={(event) => { if (showTooltips && marker.tooltipContent) { setTooltipState({ visible: true, content: marker.tooltipContent, position: getPointerPosition(event.nativeEvent), }) } }} onMove={(event) => { if (!showTooltips || !marker.tooltipContent) { return } setTooltipState((current) => ({ ...current, visible: true, content: marker.tooltipContent, position: getPointerPosition(event.nativeEvent) ?? current.position, })) }} onLeave={() => { if (showTooltips) { setTooltipState((current) => ({ ...current, visible: false })) } }} /> ))} {children} ) return ( <> { const isCurrentlySelected = selectedRegion === region.id setAnnouncement( isCurrentlySelected ? `${region.name} deselected` : `${region.name} selected` ) onRegionClick?.({ region, nativeEvent: null }) }} />

{announcement}

{showTooltips ? : null} ) } function FocusRingOverlay({ focusedRegion, regions, }: { focusedRegion: string | null regions: MapRegionData[] }) { if (!focusedRegion) return null const region = regions.find((r) => r.id === focusedRegion) if (!region) return null return ( ) } function MapTooltipContainer() { const { tooltipState } = useMapContext() if (!tooltipState.content) { return null } return ( ) } function MapRoot({ enableZoom, zoomConfig, controls, selectedRegion: selectedRegionProp, ...props }: MapProps) { const viewBox = useMemo( () => parseViewBox(props.data.viewBox), [props.data.viewBox] ) return (

{controls}

) } export { MapRoot as Map } 54:T128e,'use client' import { createContext, type Dispatch, type ReactNode, type RefObject, type SetStateAction, useCallback, useContext, useMemo, useRef, useState, } from 'react' import type { ZoomConfig, ZoomState } from './types' export interface TooltipState { visible: boolean content: ReactNode | null position: { x: number; y: number } | null } const DEFAULT_ZOOM_STATE: ZoomState = { scale: 1, translateX: 0, translateY: 0, } const DEFAULT_ZOOM_CONFIG: ZoomConfig = { minZoom: 1, maxZoom: 8, zoomStep: 0.5, panStep: 50, } interface MapContextValue { selectedRegion: string | null setSelectedRegion: Dispatch> hoveredRegion: string | null setHoveredRegion: Dispatch> focusedRegion: string | null setFocusedRegion: Dispatch> tooltipState: TooltipState setTooltipState: Dispatch> zoomState: ZoomState setZoomState: Dispatch> zoomConfig: ZoomConfig zoomIn: () => void zoomOut: () => void resetZoom: () => void containerRef: RefObject } const MapContext = createContext(null) interface MapProviderProps { children: ReactNode selectedRegion?: string | null zoomConfig?: Partial viewBox?: { x: number; y: number; width: number; height: number } } function zoomTowardCenter( prev: ZoomState, newScale: number, viewBox: { x: number; y: number; width: number; height: number } ): ZoomState { const cx = viewBox.x + viewBox.width / 2 const cy = viewBox.y + viewBox.height / 2 const scaleRatio = newScale / prev.scale return { scale: newScale, translateX: cx - scaleRatio * (cx - prev.translateX), translateY: cy - scaleRatio * (cy - prev.translateY), } } export function MapProvider({ children, selectedRegion: selectedRegionProp, zoomConfig: zoomConfigProp, viewBox, }: MapProviderProps) { const isControlled = selectedRegionProp !== undefined const [uncontrolledRegion, setUncontrolledRegion] = useState( null ) const selectedRegion = isControlled ? selectedRegionProp : uncontrolledRegion const noop = useCallback< Dispatch> >(() => {}, []) const setSelectedRegion = isControlled ? noop : setUncontrolledRegion const [hoveredRegion, setHoveredRegion] = useState(null) const [focusedRegion, setFocusedRegion] = useState(null) const [tooltipState, setTooltipState] = useState({ visible: false, content: null, position: null, }) const [zoomState, setZoomState] = useState(DEFAULT_ZOOM_STATE) const containerRef = useRef(null) const zoomConfig = useMemo( () => ({ ...DEFAULT_ZOOM_CONFIG, ...zoomConfigProp }), [zoomConfigProp] ) const zoomIn = useCallback(() => { setZoomState((prev) => { const newScale = Math.min( prev.scale + zoomConfig.zoomStep, zoomConfig.maxZoom ) if (!viewBox || newScale === prev.scale) return { ...prev, scale: newScale } return zoomTowardCenter(prev, newScale, viewBox) }) }, [zoomConfig, viewBox]) const zoomOut = useCallback(() => { setZoomState((prev) => { const newScale = Math.max( prev.scale - zoomConfig.zoomStep, zoomConfig.minZoom ) if (newScale === prev.scale) return prev // Auto-center when fully zoomed out if (newScale === zoomConfig.minZoom) { return { scale: newScale, translateX: 0, translateY: 0 } } if (!viewBox) return { ...prev, scale: newScale } return zoomTowardCenter(prev, newScale, viewBox) }) }, [zoomConfig, viewBox]) const resetZoom = useCallback(() => { setZoomState(DEFAULT_ZOOM_STATE) }, []) const value = useMemo( () => ({ selectedRegion, setSelectedRegion, hoveredRegion, setHoveredRegion, focusedRegion, setFocusedRegion, tooltipState, setTooltipState, zoomState, setZoomState, zoomConfig, zoomIn, zoomOut, resetZoom, containerRef, }), [ focusedRegion, hoveredRegion, selectedRegion, setSelectedRegion, tooltipState, zoomState, zoomConfig, zoomIn, zoomOut, resetZoom, ] ) return {children} } export function useMapContext() { const context = useContext(MapContext) if (!context) { throw new Error('useMapContext must be used within a MapProvider.') } return context } 55:Tc16,'use client' import { cn } from '@/lib/utils' import { useMapContext } from './map-context' import type { MapRegionData, RegionEvent } from './types' export interface MapRegionProps extends MapRegionData { selected?: boolean hovered?: boolean disabled?: boolean className?: string labelClassName?: string onClick?: (event: RegionEvent) => void onEnter?: (event: RegionEvent) => void onLeave?: (event: RegionEvent) => void onMove?: (event: RegionEvent) => void } export function MapRegion({ id, path, name, abbreviation, labelX, labelY, metadata, selected, hovered, disabled, className, labelClassName, onClick, onEnter, onLeave, onMove, }: MapRegionProps) { const { hoveredRegion, selectedRegion, setHoveredRegion } = useMapContext() const isSelected = selected ?? selectedRegion === id const isHovered = hovered ?? hoveredRegion === id const regionData: MapRegionData = { id, path, name, abbreviation, labelX, labelY, metadata, } return ( <> { if (disabled) { return } onClick?.({ region: regionData, nativeEvent }) }} onMouseEnter={(nativeEvent) => { if (disabled) { return } setHoveredRegion(id) onEnter?.({ region: regionData, nativeEvent }) }} onMouseLeave={(nativeEvent) => { if (disabled) { return } setHoveredRegion((current) => (current === id ? null : current)) onLeave?.({ region: regionData, nativeEvent }) }} onMouseMove={(nativeEvent) => { if (disabled) { return } onMove?.({ region: regionData, nativeEvent }) }} /> {abbreviation && labelX !== undefined && labelY !== undefined ? ( ) : null} ) } 56:T685,'use client' import { cn } from '@/lib/utils' import { type ReactNode, useCallback, useRef } from 'react' import { createPortal } from 'react-dom' export interface MapTooltipProps { visible: boolean content: ReactNode position?: { x: number; y: number } | null className?: string } const OFFSET_Y = 10 export function MapTooltip({ visible, content, position, className, }: MapTooltipProps) { const ref = useRef(null) const clamp = useCallback( (node: HTMLDivElement | null) => { ref.current = node if (!node) return const rect = node.getBoundingClientRect() const clampedLeft = Math.min( Math.max(rect.width / 2, node.offsetLeft), window.innerWidth - rect.width / 2 ) if (clampedLeft !== node.offsetLeft) { node.style.left = `${clampedLeft}px` } if (rect.top < 0) { node.style.transform = 'translate(-50%, 0)' node.style.top = `${(position?.y ?? 0) + OFFSET_Y}px` } }, [position] ) if (typeof document === 'undefined' || !position) { return null } return createPortal(

{content}

, document.body ) } 57:T967,'use client' import { cn } from '@/lib/utils' import type { KeyboardEvent, ReactNode } from 'react' import type { MarkerEvent } from './types' export interface MapMarkerProps { id: string x: number y: number content: ReactNode label?: string disabled?: boolean className?: string onClick?: (event: MarkerEvent) => void onEnter?: (event: MarkerEvent) => void onLeave?: (event: MarkerEvent) => void onMove?: (event: MarkerEvent) => void } export function MapMarker({ id, x, y, content, label, disabled, className, onClick, onEnter, onLeave, onMove, }: MapMarkerProps) { const handleKeyDown = (event: KeyboardEvent) => { if (disabled) { return } if (event.key === 'Enter' || event.key === ' ') { event.preventDefault() onClick?.({ id, nativeEvent: event as unknown as MarkerEvent['nativeEvent'], }) } } return ( { if (disabled) { return } onClick?.({ id, nativeEvent }) }} onMouseEnter={(nativeEvent) => { if (disabled) { return } onEnter?.({ id, nativeEvent }) }} onMouseLeave={(nativeEvent) => { if (disabled) { return } onLeave?.({ id, nativeEvent }) }} onMouseMove={(nativeEvent) => { if (disabled) { return } onMove?.({ id, nativeEvent }) }} onFocus={(nativeEvent) => { if (disabled) { return } onEnter?.({ id, nativeEvent: nativeEvent as unknown as MarkerEvent['nativeEvent'], }) }} onBlur={(nativeEvent) => { if (disabled) { return } onLeave?.({ id, nativeEvent: nativeEvent as unknown as MarkerEvent['nativeEvent'], }) }} onKeyDown={handleKeyDown} > {content} ) } 58:T15b2,'use client' import { useEffect, useId, useRef } from 'react' import { useMapContext } from './map-context' import type { MapRegionData } from './types' export interface MapListboxProps { regions: MapRegionData[] disabledRegions: Set label: string onSelect: (region: MapRegionData) => void } export function MapListbox({ regions, disabledRegions, label, onSelect, }: MapListboxProps) { const { selectedRegion, setSelectedRegion, focusedRegion, setFocusedRegion } = useMapContext() const typeaheadRef = useRef('') const typeaheadTimer = useRef | null>(null) const optionRefs = useRef(new Map()) const listboxRef = useRef(null) const id = useId() useEffect(() => { return () => { if (typeaheadTimer.current) clearTimeout(typeaheadTimer.current) } }, []) const activeRegions = regions.filter((r) => !disabledRegions.has(r.id)) const focusedIndex = activeRegions.findIndex((r) => r.id === focusedRegion) // The option that should be tabbable (tabIndex=0) const focusableId = focusedRegion && !disabledRegions.has(focusedRegion) ? focusedRegion : selectedRegion && !disabledRegions.has(selectedRegion) ? selectedRegion : activeRegions[0]?.id // Move DOM focus when focusedRegion changes useEffect(() => { if (!focusedRegion) return const el = optionRefs.current.get(focusedRegion) if (el && document.activeElement !== el) { el.focus() } }, [focusedRegion]) // If focusedRegion becomes disabled, move to nearest active region useEffect(() => { if (!focusedRegion) return if (!disabledRegions.has(focusedRegion)) return // Find nearest active region const allIndex = regions.findIndex((r) => r.id === focusedRegion) if (allIndex < 0) { setFocusedRegion(activeRegions[0]?.id ?? null) return } // Search forward then backward for nearest active for (let offset = 1; offset < regions.length; offset++) { const fwd = regions[(allIndex + offset) % regions.length] if (fwd && !disabledRegions.has(fwd.id)) { setFocusedRegion(fwd.id) return } } setFocusedRegion(null) }, [focusedRegion, disabledRegions, regions, activeRegions, setFocusedRegion]) function moveTo(index: number) { const region = activeRegions[index] if (region) setFocusedRegion(region.id) } function handleKeyDown(event: React.KeyboardEvent) { const idx = focusedIndex < 0 ? 0 : focusedIndex switch (event.key) { case 'ArrowDown': case 'ArrowRight': event.preventDefault() moveTo(focusedIndex < activeRegions.length - 1 ? focusedIndex + 1 : 0) break case 'ArrowUp': case 'ArrowLeft': event.preventDefault() moveTo(focusedIndex > 0 ? focusedIndex - 1 : activeRegions.length - 1) break case 'Home': event.preventDefault() moveTo(0) break case 'End': event.preventDefault() moveTo(activeRegions.length - 1) break case 'Enter': case ' ': { event.preventDefault() const region = activeRegions[idx] if (!region) break setSelectedRegion((prev) => (prev === region.id ? null : region.id)) onSelect(region) break } case 'Escape': { event.preventDefault() const selected = selectedRegion ? activeRegions.find((r) => r.id === selectedRegion) : undefined setSelectedRegion(null) if (selected) onSelect(selected) break } default: if (event.key.length === 1) { typeaheadRef.current += event.key.toLowerCase() if (typeaheadTimer.current) clearTimeout(typeaheadTimer.current) typeaheadTimer.current = setTimeout(() => { typeaheadRef.current = '' }, 500) const query = typeaheadRef.current const match = activeRegions.findIndex((r) => r.name.toLowerCase().startsWith(query) ) if (match >= 0) moveTo(match) } } } function handleBlur(event: React.FocusEvent) { // Only clear focus when focus leaves the listbox entirely if ( !listboxRef.current || !event.relatedTarget || !listboxRef.current.contains(event.relatedTarget as Node) ) { setFocusedRegion(null) } } return ( ) } 59:T159e,'use client' import { cn } from '@/lib/utils' import { useCallback } from 'react' import { useMapContext } from './map-context' export interface MapControlsProps { position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' showPanButtons?: boolean className?: string } const positionClasses: Record = { 'top-left': 'top-2 left-2', 'top-right': 'top-2 right-2', 'bottom-left': 'bottom-2 left-2', 'bottom-right': 'bottom-2 right-2', } function ControlButton({ onClick, disabled, 'aria-label': ariaLabel, children, }: { onClick: () => void disabled?: boolean 'aria-label': string children: React.ReactNode }) { return ( ) } function PlusIcon() { return ( ) } function MinusIcon() { return ( ) } function HomeIcon() { return ( ) } function ChevronUp() { return ( ) } function ChevronDown() { return ( ) } function ChevronLeft() { return ( ) } function ChevronRight() { return ( ) } export function MapControls({ position = 'top-right', showPanButtons = true, className, }: MapControlsProps) { const { zoomIn, zoomOut, resetZoom, zoomState, zoomConfig, setZoomState } = useMapContext() const panUp = useCallback(() => { setZoomState((prev) => ({ ...prev, translateY: prev.translateY + zoomConfig.panStep, })) }, [setZoomState, zoomConfig.panStep]) const panDown = useCallback(() => { setZoomState((prev) => ({ ...prev, translateY: prev.translateY - zoomConfig.panStep, })) }, [setZoomState, zoomConfig.panStep]) const panLeft = useCallback(() => { setZoomState((prev) => ({ ...prev, translateX: prev.translateX + zoomConfig.panStep, })) }, [setZoomState, zoomConfig.panStep]) const panRight = useCallback(() => { setZoomState((prev) => ({ ...prev, translateX: prev.translateX - zoomConfig.panStep, })) }, [setZoomState, zoomConfig.panStep]) const atMaxZoom = zoomState.scale >= zoomConfig.maxZoom const atMinZoom = zoomState.scale <= zoomConfig.minZoom return (

{showPanButtons ? ( <>

) : null}

) } 5a:Tb2f,import type { FocusEvent, KeyboardEvent, MouseEvent, ReactNode, TouchEvent, } from 'react' /** Unique identifier for the region (e.g., "AL", "CA", "FR-IDF") */ export interface MapRegionData { id: string /** Human-readable display name */ name: string /** SVG path d attribute */ path: string /** Short abbreviation (e.g., "AL") */ abbreviation?: string /** X coordinate for the abbreviation label within the SVG viewBox */ labelX?: number /** Y coordinate for the abbreviation label within the SVG viewBox */ labelY?: number /** Arbitrary metadata attached to the region, passed back in event callbacks */ metadata?: Record } export interface MapData { /** Unique map identifier (e.g., "usa", "world", "france") */ id: string /** Human-readable map name */ name: string /** SVG viewBox string (e.g., "0 0 930 590") */ viewBox: string /** Array of region path data */ regions: MapRegionData[] } export interface MapMarkerData { /** Unique identifier */ id: string /** X coordinate in the map's SVG coordinate system */ x: number /** Y coordinate in the map's SVG coordinate system */ y: number /** SVG content to render at (x, y) */ content: ReactNode /** Tooltip content shown on hover/click */ tooltipContent?: ReactNode /** Accessible label */ label?: string /** When true, the marker is not interactive */ disabled?: boolean } export interface RegionEvent { /** The region's static data from MapRegionData */ region: MapRegionData /** The native React synthetic event (null for programmatic selection via keyboard listbox) */ nativeEvent: | MouseEvent | TouchEvent | FocusEvent | KeyboardEvent | null } export interface MarkerEvent { /** The marker's id */ id: string /** The native React synthetic event */ nativeEvent: | MouseEvent | TouchEvent | FocusEvent | KeyboardEvent } export interface RegionOverride { id: string /** Override display name (e.g. for localization) */ name?: string /** Override abbreviation label */ abbreviation?: string /** Override label X position */ labelX?: number /** Override label Y position */ labelY?: number /** Attach arbitrary metadata */ metadata?: Record /** Extra CSS classes for fill/stroke */ className?: string /** Extra CSS classes for the abbreviation label */ labelClassName?: string /** Custom tooltip content */ tooltipContent?: ReactNode /** Disable interaction */ disabled?: boolean } export interface ZoomState { scale: number translateX: number translateY: number } export interface ZoomConfig { minZoom: number maxZoom: number zoomStep: number panStep: number } 4c:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[]}],["$","$L50",null,{"registryDependencies":[]}]]}],["$","$L51",null,{"sourceUrl":"https://shadcnmaps.com/r/map.json","proxyUrl":"https://shadcnregistry.com/r/shadcnmaps/map","itemId":"@shadcnmaps/map"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L52",null,{"files":[{"path":"registry/shadcnmaps/map.tsx","content":"$53","type":"registry:file","target":"components/shadcnmaps/map.tsx"},{"path":"registry/shadcnmaps/map-context.tsx","content":"$54","type":"registry:file","target":"components/shadcnmaps/map-context.tsx"},{"path":"registry/shadcnmaps/map-region.tsx","content":"$55","type":"registry:file","target":"components/shadcnmaps/map-region.tsx"},{"path":"registry/shadcnmaps/map-tooltip.tsx","content":"$56","type":"registry:file","target":"components/shadcnmaps/map-tooltip.tsx"},{"path":"registry/shadcnmaps/map-marker.tsx","content":"$57","type":"registry:file","target":"components/shadcnmaps/map-marker.tsx"},{"path":"registry/shadcnmaps/map-listbox.tsx","content":"$58","type":"registry:file","target":"components/shadcnmaps/map-listbox.tsx"},{"path":"registry/shadcnmaps/map-controls.tsx","content":"$59","type":"registry:file","target":"components/shadcnmaps/map-controls.tsx"},{"path":"registry/shadcnmaps/types.ts","content":"$5a","type":"registry:file","target":"components/shadcnmaps/types.ts"}]}]]}],"$L5b"]}]

Map

Installation

Files

components

Styles