import { TNode, Value } from '@tempots/dom';
import { IconSize } from '../theme';
import { ThemeColorName } from '../../tokens';
import { ForegroundTone } from '../theme/style-utils';
export declare const isIndexedDBAvailable: boolean;
/**
 * Stores an icon SVG string in the local cache (IndexedDB or in-memory fallback).
 *
 * @param id - The icon identifier (e.g., `'mdi/home'`)
 * @param svgString - The raw SVG markup to cache
 */
export declare function storeIconLocally(id: string, svgString: string): Promise<void>;
/**
 * Retrieves a cached icon SVG string from local storage (IndexedDB or in-memory fallback).
 *
 * @param id - The icon identifier (e.g., `'mdi/home'`)
 * @returns The cached SVG string, or `null` if not found
 */
export declare function getIconLocally(id: string): Promise<string | null>;
/**
 * Configuration options for the {@link Icon} component.
 */
export interface IconOptions {
    /** Icon name in Iconify format (e.g., `'mdi:home'`, `'line-md:loading-twotone-loop'`). */
    icon: Value<string>;
    /** Size of the icon. @default 'md' */
    size?: Value<IconSize>;
    /** Theme color applied to the icon. Uses foreground color values. */
    color?: Value<ThemeColorName>;
    /** Accessible title for informative icons. Also sets the tooltip. */
    title?: Value<string | undefined>;
    /**
     * Accessibility mode for the icon.
     * - `'decorative'`: Hidden from screen readers with `aria-hidden="true"`
     * - `'informative'`: Gets `aria-label` and `role="img"` for screen readers
     * - `'auto'`: Determined by the presence of a `title` prop
     * @default 'auto'
     */
    accessibility?: Value<'decorative' | 'informative' | 'auto'>;
    /** Foreground color tone: `'solid'` for vibrant or `'soft'` for muted. @default 'solid' */
    tone?: Value<ForegroundTone>;
}
/**
 * Renders an SVG icon from the Iconify icon library with lazy-loading and caching.
 *
 * Icons are fetched from the Iconify API on first use and cached in IndexedDB
 * (with an in-memory fallback) for subsequent loads. The icon is only loaded when
 * it enters the viewport (`WhenInViewport`), preventing unnecessary network requests.
 *
 * The component handles three states: pending (spinning placeholder), success (rendered SVG),
 * and failure (error indicator). Accessibility is configurable: decorative icons are hidden
 * from screen readers, while informative icons receive proper ARIA attributes.
 *
 * @param options - Configuration for icon name, size, color, and accessibility
 * @param children - Additional child nodes appended to the icon container
 * @returns A span element containing the rendered icon
 *
 * @example
 * ```typescript
 * Icon({ icon: 'mdi:home', size: 'lg', color: 'primary' })
 * ```
 *
 * @example
 * ```typescript
 * // Informative icon with accessible label
 * Icon({
 *   icon: 'mdi:alert',
 *   color: 'warning',
 *   title: 'Warning: unsaved changes',
 *   accessibility: 'informative'
 * })
 * ```
 */
export declare function Icon({ icon, size, color, title, accessibility, tone, }: IconOptions, ...children: TNode[]): import("@tempots/core").Renderable<import("@tempots/dom").DOMContext, typeof import("@tempots/dom").DOM_RENDERABLE_TYPE>;