import React from 'react';
import type { ComponentPropsWithoutRef } from 'react';
import type { IconName } from '../../tokens/icons';
/**
 * Icon size - can be semantic token or pixel value
 */
export type IconSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | number;
export type IconTone = 'primary' | 'secondary' | 'tertiary' | 'inverted';
export interface IconProps extends Omit<ComponentPropsWithoutRef<'span'>, 'color' | 'children'> {
    /**
     * Icon name
     * @example 'settings-cog' | 'plus-circle-add' | 'terminal'
     */
    name: IconName;
    /**
     * Icon size - semantic token ('xs', 'sm', 'md', 'lg', 'xl') or pixel value (24, 32, etc.)
     * @default 'md'
     * @example 'md' | 24 | 32
     */
    size?: IconSize;
    /**
     * Icon tone mapped to design token colors
     * @default 'primary'
     */
    tone?: IconTone;
    /**
     * Additional CSS classes
     */
    className?: string;
    /**
     * Makes the icon interactive with hover/active states
     * @default false
     * @example
     * ```tsx
     * <Icon name="settings-cog" interactive onClick={() => console.log('clicked')} />
     * ```
     */
    interactive?: boolean;
    /**
     * Disables the icon (reduces opacity, prevents interaction)
     * @default false
     * @example
     * ```tsx
     * <Icon name="settings-cog" disabled />
     * ```
     */
    disabled?: boolean;
    /**
     * Accessibility label for screen readers.
     *
     * **Icon Accessibility Patterns:**
     *
     * 1. **Decorative (default)**: No aria-label → Icon is aria-hidden
     * 2. **Meaningful**: Provide aria-label → Icon gets role="img"
     *
     * Most icons are decorative and should not have aria-label.
     * Only provide aria-label when the icon conveys unique information.
     *
     * @example
     * ```tsx
     * // ✅ Decorative icon (default - no aria-label)
     * <button>
     *   <Icon name="plus-circle-add" />
     *   Add Item
     * </button>
     *
     * // ✅ Icon-only button (aria-label on parent)
     * <button aria-label="Close dialog">
     *   <Icon name="close-bold" />
     * </button>
     *
     * // ✅ Meaningful standalone icon
     * <Icon name="warning" aria-label="Warning: Action required" />
     * ```
     */
    'aria-label'?: string;
}
/**
 * Icon component with intelligent lookup
 *
 * Usage:
 *
 * ```tsx
 * <Icon name="settings-cog" size="md" />
 * <Icon name="plus-circle-add" size={24} />
 * ```
 *
 * @example
 * ```tsx
 * // Semantic sizes
 * <Icon name="settings-cog" size="xs" />  // 12px
 * <Icon name="settings-cog" size="sm" />  // 16px
 * <Icon name="settings-cog" size="md" />  // 20px (default)
 * <Icon name="settings-cog" size="lg" />  // 24px
 * <Icon name="settings-cog" size="xl" />  // 32px
 *
 * // Pixel sizes
 * <Icon name="settings-cog" size={24} />
 * <Icon name="settings-cog" size={32} />
 *
 * // Accessibility: Decorative (default - most common)
 * <button>
 *   <Icon name="plus-circle-add" />
 *   Add Item
 * </button>
 *
 * // Accessibility: Meaningful standalone
 * <Icon name="warning" aria-label="Warning: Action required" />
 * ```
 */
export declare const Icon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<HTMLSpanElement>>;
//# sourceMappingURL=Icon.d.ts.map