import React from 'react';
import { USAStateAbbreviation } from '../types/index';
import '../styles.css';
/**
 * Callback function type for state click events
 * @param state - The abbreviation of the clicked state
 */
type OnStateClick = (state: USAStateAbbreviation) => void;
/**
 * Configuration for individual state appearance and behavior
 */
interface State {
    /** Fill color for the state. Default: '#d3d3d3' */
    fill?: string;
    /** Stroke (border) color for the state. Default: '#a5a5a5' */
    stroke?: string;
    /** Label configuration for the state */
    label?: {
        /** Whether to show the label. Default: true */
        enabled?: boolean;
        /** Render function for the label. Default: () => state name */
        render?: (state: USAStateAbbreviation) => React.ReactNode;
    };
    /** Tooltip configuration for the state */
    tooltip?: {
        /** Whether to show the tooltip. Default: true */
        enabled?: boolean;
        /** Render function for the tooltip. Default: () => state abbreviation */
        render?: (state: USAStateAbbreviation) => React.ReactNode;
    };
    /** Click handler for the state */
    onClick?: OnStateClick;
    /** Hover handler for the state */
    onHover?: OnStateClick;
    /** Leave handler for the state */
    onLeave?: OnStateClick;
    /** Focus handler for the state */
    onFocus?: OnStateClick;
    /** Blur handler for the state */
    onBlur?: OnStateClick;
}
/**
 * Configuration for the map's dimensions and title
 */
interface MapSettings {
    /** Width of the map. Can be a number (pixels) or string (e.g., '100%'). Default: '100%' */
    width?: string | number;
    /** Height of the map. Can be a number (pixels) or string (e.g., 'fit-content'). Default: 'fit-content' */
    height?: string | number;
    /** Title attribute for the map SVG */
    title?: string;
}
/**
 * Props for the USAMap component
 */
interface Props {
    /** Default styling and behavior for all states. Applied when no custom state configuration is provided */
    defaultState?: State;
    /** Custom configurations for specific states. Keys are state abbreviations (e.g., 'CA', 'NY') */
    customStates?: {
        [key in USAStateAbbreviation]?: State;
    };
    /**
     * Array of state abbreviations to hide from the map
     * @default []
     */
    hiddenStates?: USAStateAbbreviation[];
    /** Map dimensions and title settings */
    mapSettings?: MapSettings;
    /** Additional CSS class name for the map SVG */
    className?: string;
}
/**
 * A customizable and interactive USA map component for React
 *
 * @example
 * ```tsx
 * // Basic usage with default styling
 * <USAMap />
 *
 * // Custom styling for all states
 * <USAMap defaultState={{ fill: '#f0f0f0', stroke: '#000' }} />
 *
 * // Custom styling and click handler for specific states
 * <USAMap customStates={{
 *   CA: { fill: 'blue', onClick: () => console.log('California clicked!') },
 *   NY: { fill: 'red', onClick: () => console.log('New York clicked!') }
 * }} />
 *
 * // Hide specific states from the map
 * <USAMap hiddenStates={['AK', 'HI', 'DC']} />
 *
 * // Add labels and event handlers
 * <USAMap
 *   defaultState={{
 *     label: { enabled: true },
 *     onHover: (state) => console.log(`Hovered ${state}`),
 *     onLeave: (state) => console.log(`Left ${state}`)
 *   }}
 *   customStates={{
 *     CA: {
 *       fill: 'blue',
 *       label: { render: () => 'CA' },
 *       onClick: () => console.log('California clicked!')
 *     }
 *   }}
 * />
 * ```
 */
declare const USAMap: React.FC<Props>;
export { USAMap };