import React from 'react';
/**
 * Available icon names in the icon library
 */
type IconName = 'send' | 'info' | 'moon' | 'sun' | 'phone' | 'video' | 'more' | 'attachment' | 'emoji' | 'thumbsup' | 'edit' | 'delete' | 'close' | 'chevronleft' | 'chevronright' | 'upload';
/**
 * Size options for icons
 */
type IconSize = 'sm' | 'md' | 'lg' | 'xl';
/**
 * Props for the Icon component
 */
export interface IconProps {
    /**
     * Name of the icon to display
     * Must be one of the predefined icon names in the icon library
     */
    name: IconName;
    /**
     * Size of the icon
     * - 'sm': 16px (w-4 h-4)
     * - 'md': 20px (w-5 h-5) - default
     * - 'lg': 24px (w-6 h-6)
     * - 'xl': 32px (w-8 h-8)
     * @default 'md'
     */
    size?: IconSize;
    /**
     * Additional CSS classes to apply to the icon
     */
    className?: string;
    /**
     * Accessible label for the icon
     * Required for interactive icons, optional for decorative icons
     */
    'aria-label'?: string;
    /**
     * Whether the icon is decorative only (hidden from screen readers)
     * @default false
     */
    'aria-hidden'?: boolean;
    /**
     * Color variant for the icon
     * @default 'current' - inherits current text color
     */
    color?: 'current' | 'primary' | 'secondary' | 'success' | 'warning' | 'error';
    /**
     * Click handler for interactive icons
     */
    onClick?: (event: React.MouseEvent<SVGSVGElement> | React.KeyboardEvent<SVGSVGElement>) => void;
    /**
     * Additional props to pass to the SVG element
     */
    svgProps?: React.SVGAttributes<SVGSVGElement>;
}
/**
 * Icon component renders SVG icons from a predefined icon library
 *
 * Features:
 * - Predefined icon library with common UI icons
 * - Multiple size options (sm, md, lg, xl)
 * - Accessibility support with proper ARIA attributes
 * - Interactive support with click handlers and keyboard navigation
 * - Consistent stroke-based design

 *
 * @example
 * // Basic usage
 * <Icon name="send" />
 *
 * @example
 * // Large icon with custom color
 * <Icon
 *   name="heart"
 *   size="lg"
 *   color="error"
 *   aria-label="Like this post"
 * />
 *
 * @example
 * // Interactive icon with click handler
 * <Icon
 *   name="close"
 *   onClick={() => setModalOpen(false)}
 *   aria-label="Close modal"
 *   className="cursor-pointer hover:text-red-500"
 * />
 *
 * @example
 * // Decorative icon (hidden from screen readers)
 * <Icon name="star" aria-hidden />
 */
export declare const Icon: ({ name, size, className, "aria-label": ariaLabel, "aria-hidden": ariaHidden, color, onClick, svgProps, }: IconProps) => import("react/jsx-runtime").JSX.Element;
export {};