@stacksjs/stx/dist/media/image/component.d.ts

A performant UI Framework. Powered by Bun.

import {  } from './placeholder';
import {  } from './srcset';
import type { ImageRenderContext, ImageRenderResult, ImgProps, EnhancedImgProps, TsImagesConfig, ProcessedImageResult, ResponsiveVariantSet,  } from '../types';
/**
 * Render an optimized <Img> component
 *
 * Supports both standard ImgProps and EnhancedImgProps with ts-images integration.
 *
 * @example
 * ```typescript
 * // Standard usage
 * const result = await renderImgComponent({
 *   src: '/images/hero.jpg',
 *   alt: 'Hero image',
 *   sizes: '(max-width: 768px) 100vw, 50vw',
 *   placeholder: 'thumbhash',
 *   lazy: true,
 * })
 *
 * // With ts-images processing
 * const result = await renderImgComponent({
 *   src: '/images/hero.jpg',
 *   alt: 'Hero image',
 *   process: true,
 *   preset: 'web',
 *   responsiveWidths: [320, 640, 1024, 1920],
 * }, { tsImagesConfig: { enabled: true, outputDir: 'dist/images' } })
 * ```
 */
export declare function renderImgComponent(props: ImgProps | EnhancedImgProps, context?: ImageRenderContext | ExtendedImageRenderContext): Promise<ImageRenderResult>;
/**
 * Parse <Img> component from template content
 */
export declare function parseImgComponent(content: string): ImgProps | null;
/**
 * Process all <Img> components in template content
 */
export declare function processImgComponents(content: string, context?: ImageRenderContext): Promise<{ html: string; preloadLinks: string[]; styles: string[]; scripts: string[] }>;
/**
 * Extended image render context with ts-images config
 */
export declare interface ExtendedImageRenderContext extends ImageRenderContext {
  tsImagesConfig?: TsImagesConfig
  processedResult?: ProcessedImageResult
  responsiveVariants?: ResponsiveVariantSet
}