Package: @lilith/ui-image Split from: lilith/ui.git or lilith/build.git Publish workflow: calls lilith/workflows/.forgejo/workflows/publish-npm.yml@main
28 lines
No EOL
1.1 KiB
TypeScript
28 lines
No EOL
1.1 KiB
TypeScript
/**
|
|
* ProtectedImage — Anti-theft image wrapper with WebP optimization
|
|
*
|
|
* Serves WebP with JPEG fallback via <picture> element.
|
|
* Prevents casual image theft via right-click, drag, and long-press.
|
|
* Shows a shimmer skeleton while loading to prevent layout shift.
|
|
*
|
|
* CSS custom properties (all optional):
|
|
* --protected-image-border-color default: rgba(255, 255, 255, 0.1)
|
|
*/
|
|
export interface ProtectedImageProps {
|
|
src: string;
|
|
alt: string;
|
|
/** Auto-derived from src by swapping extension if omitted */
|
|
webpSrc?: string;
|
|
intrinsicWidth?: number;
|
|
intrinsicHeight?: number;
|
|
width?: string;
|
|
height?: string;
|
|
objectFit?: 'cover' | 'contain' | 'fill';
|
|
borderRadius?: string;
|
|
/** Remove the border entirely — use for flush/inset contexts */
|
|
noBorder?: boolean;
|
|
loading?: 'lazy' | 'eager';
|
|
fetchPriority?: 'high' | 'low' | 'auto';
|
|
}
|
|
export declare function ProtectedImage({ src, alt, webpSrc, intrinsicWidth, intrinsicHeight, width, height, objectFit, borderRadius, noBorder, loading, fetchPriority, }: ProtectedImageProps): React.ReactNode;
|
|
//# sourceMappingURL=ProtectedImage.d.ts.map
|