@vibe-labs/design-components-images

Image component TypeScript types for the Vibe Design System. Provides framework-agnostic type contracts for image and background image components.

Usage

import { ImageFits, ImagePositions, ImageStatuses } from "@vibe-labs/design-components-images/types";
import type { ImageStyleProps, BgImageStyleProps, PictureSource } from "@vibe-labs/design-components-images/types";

Contents

TypeScript Types (types/)

Image Fit & Position

ImageFits; // ["cover", "contain", "fill", "none", "scale-down"]
ImagePositions; // ["center", "top", "bottom", "left", "right",
//  "top-left", "top-right", "bottom-left", "bottom-right"]

Background Fit & Position

BgFits; // ["cover", "contain", "auto"]
BgPositions; // ["center", "top", "bottom", "left", "right"]

Loading & Performance

ImageLoadingStrategies; // ["lazy", "eager"]
FetchPriorities; // ["high", "low", "auto"]
ImageDecodings; // ["async", "sync", "auto"]

Status

ImageStatuses; // ["idle", "loading", "loaded", "error"]

Interfaces

interface ImageDimensions {
  naturalWidth: number;
  naturalHeight: number;
}

interface PictureSource {
  media?: string;
  srcset: string;
  type?: string;
  sizes?: string;
}

interface ImageStyleProps {
  fit?: ImageFit;
  position?: ImagePosition;
  aspect?: string;
  radius?: string;
}

interface BgImageStyleProps {
  fit?: BgFit;
  position?: BgPosition;
  fixed?: boolean;
  aspect?: string;
  radius?: string;
}

interface ImageQueueOptions {
  maxConcurrent?: number;
}

Dist Structure

File	Description
index.css	Empty (reserved for future component styles)
index.js / index.d.ts	TypeScript types + runtime constants

Dependencies

None — this package is self-contained.

Build

npm run build