import { ImageCdn, ProviderOperations, ProviderOptions, Operations, TransformerFunction } from 'unpic'; export { Operations } from 'unpic'; /** * Core HTML image attributes common across frameworks. * For React and similar frameworks, attribute names are converted to camelCase. */ interface CoreImageAttributes> { src?: string | number | null; width?: string | number | null; height?: string | number | null; alt?: string | number | null; loading?: "eager" | "lazy" | null; decoding?: "sync" | "async" | "auto" | null; style?: TStyle; srcset?: string | number | null; role?: "presentation" | "img" | "none" | "figure" | (string & {}) | null; sizes?: string | number | null; fetchpriority?: "high" | "low" | "auto" | null; } /** * Common options for CDN-based image components including layout preferences, * CDN configuration, and styling options. */ interface BaseOptions { src: string; cdn?: ImageCdn; fallback?: ImageCdn; operations?: Partial; options?: Partial; breakpoints?: number[]; priority?: boolean; fetchpriority?: "high" | "low"; background?: string; objectFit?: ObjectFit; unstyled?: boolean; } /** * Common options for transformer-based image components that use direct URL transformations * instead of a CDN configuration. */ interface BaseTransformerOptions { src: string; transformer: TransformerFunction; operations?: TOperations & { width?: never; height?: never; }; options?: TOptions; breakpoints?: number[]; priority?: boolean; fetchpriority?: "high" | "low"; background?: string; objectFit?: ObjectFit; unstyled?: boolean; } /** * Configuration options for image sources using CDN-based transformations. * Provides basic image parameters and CDN configuration without layout constraints. */ interface ImageSourceOptions { src: string; width?: number; height?: number; aspectRatio?: number; layout?: Layout; breakpoints?: number[]; cdn?: ImageCdn; fallback?: ImageCdn; operations?: Partial; options?: Partial; } /** * Configuration options for image sources using URL transformer-based transformations. * Provides basic image parameters and transformer configuration without layout constraints. */ interface BaseImageSourceOptions { src: string; width?: number; height?: number; aspectRatio?: number; layout?: Layout; breakpoints?: number[]; transformer?: TransformerFunction; operations?: TOperations & { width?: never; height?: never; }; options?: TOptions; } type WithWidthHeight = { width: number; height: number; aspectRatio?: never; }; type WithAspectRatioAndWidth = { width: number; aspectRatio: number; height?: never; }; type WithAspectRatioAndHeight = { height: number; aspectRatio: number; width?: never; }; type DimensionRequirements = WithWidthHeight | WithAspectRatioAndWidth | WithAspectRatioAndHeight; type FixedLayout = { layout: "fixed"; } & DimensionRequirements; type ConstrainedLayout = { layout?: "constrained"; } & DimensionRequirements; type FullWidthLayout = { layout: "fullWidth"; width?: never; height?: number; aspectRatio?: number; }; /** * Props for CDN-based image components with layout-specific dimension requirements. * Supports fixed, constrained, and full-width layouts with appropriate dimension constraints. */ type UnpicImageProps, TStyle = TImageAttributes["style"]> = Omit & BaseOptions & (FixedLayout | ConstrainedLayout | FullWidthLayout); /** * Props for transformer-based image components with layout-specific dimension requirements. * Uses direct URL transformations instead of CDN configurations. */ type UnpicBaseImageProps, TStyle = TImageAttributes["style"]> = Omit & BaseTransformerOptions & (FixedLayout | ConstrainedLayout | FullWidthLayout); /** * Core attributes for HTML source elements used in picture elements. */ interface CoreSourceAttributes { srcset?: string | null; type?: string | null; sizes?: string | null; media?: string | null; } /** * Props for CDN-based source elements with layout-specific dimension requirements. */ type UnpicSourceProps = Omit & BaseOptions & (FixedLayout | ConstrainedLayout | FullWidthLayout); /** * Props for transformer-based source elements with layout-specific dimension requirements. * Uses direct URL transformations instead of CDN configurations. */ type UnpicBaseSourceProps = Omit & BaseTransformerOptions & (FixedLayout | ConstrainedLayout | FullWidthLayout); /** * Available layout modes for image components. * - fixed: Image maintains exact dimensions * - constrained: Image maintains aspect ratio and fits within given dimensions * - fullWidth: Image spans full width of container with optional height constraint */ type Layout = "fixed" | "constrained" | "fullWidth"; /** * Object-fit options for controlling how the image fills its container. */ type ObjectFit = "contain" | "cover" | "fill" | "none" | "scale-down" | "inherit" | "initial"; /** * Gets the `sizes` attribute for an image, based on the layout and width */ declare const getSizes: (width?: number, layout?: Layout) => string | undefined; /** * Gets the styles for an image */ declare const getStyle: , TStyle = Record>({ width, height, aspectRatio, layout, objectFit, background, }: Pick, "width" | "height" | "aspectRatio" | "layout" | "objectFit" | "background">) => TImageAttributes["style"]; declare const DEFAULT_RESOLUTIONS: number[]; /** * Gets the breakpoints for an image, based on the layout and width */ declare const getBreakpoints: ({ width, layout, resolutions, }: { width?: number; layout: Layout; resolutions?: Array; }) => number[]; type SrcSetOptions = Omit, "src"> & { src: URL | string; format?: string; }; interface UrlTransformerOptions extends Pick { /** The image URL to transform */ url: string | URL; } declare const getSrcSetEntries: ({ src, width, layout, height, aspectRatio, breakpoints, format, }: SrcSetOptions) => Array; /** * Generate an image srcset */ declare const getSrcSet: (options: SrcSetOptions) => string; declare function transformSharedProps, TStyle = Record>({ width, height, priority, layout, aspectRatio, ...props }: UnpicBaseImageProps): UnpicBaseImageProps & Pick; /** * Generates the props for an img element */ declare function transformBaseImageProps, TStyle = TImageAttributes["style"]>(props: UnpicBaseImageProps): TImageAttributes; declare function normalizeImageType(type?: string | null): { format?: string; mimeType?: string; }; /** * Generates the props for a `` element */ declare function transformBaseSourceProps({ media, type, ...props }: UnpicBaseSourceProps): TSourceAttributes; interface ImageSizeMetadata { width: number; height: number; } declare function inferImageDimensions(props: { width?: number; height?: number; aspectRatio?: number; }, imageData: ImageSizeMetadata): { width: number; height: number; }; export { type BaseImageSourceOptions, type CoreImageAttributes, type CoreSourceAttributes, DEFAULT_RESOLUTIONS, type ImageSizeMetadata, type ImageSourceOptions, type Layout, type ObjectFit, type SrcSetOptions, type UnpicBaseImageProps, type UnpicBaseSourceProps, type UnpicImageProps, type UnpicSourceProps, getBreakpoints, getSizes, getSrcSet, getSrcSetEntries, getStyle, inferImageDimensions, normalizeImageType, transformBaseImageProps, transformBaseSourceProps, transformSharedProps };