@webstudio-is/image 0.1.0 → 0.15.0

package/lib/cjs/image-dev.stories.d.ts

@@ -1,35 +0,0 @@
-import React from "react";
-import type { ComponentMeta, ComponentStory } from "@storybook/react";
-declare const _default: ComponentMeta<React.ForwardRefExoticComponent<Pick<React.ClassAttributes<HTMLImageElement> & React.ImgHTMLAttributes<HTMLImageElement> & {
-    quality?: number | undefined;
-    optimize?: boolean | undefined;
-    loader: import("./image-optimize").ImageLoader;
-}, "quality" | "loader" | "key" | keyof React.ImgHTMLAttributes<HTMLImageElement> | "optimize"> & React.RefAttributes<HTMLImageElement>>>;
-export default _default;
-/**
- * Load images depending on image width and device per pixel ratio.
- **/
-export declare const FixedWidthImage: ComponentStory<React.FunctionComponent>;
-/**
- * Preserve ratio using object-fit: cover. Load images depending on image width and device per pixel ratio.
- **/
-export declare const FixedWidthImageCover: ComponentStory<React.FunctionComponent>;
-/**
- * Load images depending on the viewport width.
- **/
-export declare const UnknownWidthImage: ComponentStory<React.FunctionComponent>;
-/**
- * Fit width of the parent container, has own aspect-ratio and object-fit=cover.
- * Load images depending on the viewport width.
- **/
-export declare const AspectRatioImage: ComponentStory<React.FunctionComponent>;
-/**
- * Fill width and height of the relative parent container, object-fit=cover. Load images depending on the viewport width.
- **/
-export declare const FillParentImage: ComponentStory<React.FunctionComponent>;
-/**
- * "sizes" attribute explicitly equal to 100vw allowing to skip the default behavior.
- * See DEFAULT_SIZES in the Image component. Load images depending on the viewport width.
- **/
-export declare const HeroImage: ComponentStory<React.FunctionComponent>;
-//# sourceMappingURL=image-dev.stories.d.ts.map

package/lib/cjs/image-dev.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"image-dev.stories.d.ts","sourceRoot":"","sources":["../../src/image-dev.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmD,MAAM,OAAO,CAAC;AACxE,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;;;;;;AAQtE,wBAE0C;AA0C1C;;IAEI;AACJ,eAAO,MAAM,eAAe,EAAE,cAAc,CAAC,KAAK,CAAC,iBAAiB,CAEnE,CAAC;AAEF;;IAEI;AACJ,eAAO,MAAM,oBAAoB,EAAE,cAAc,CAC/C,KAAK,CAAC,iBAAiB,CAQxB,CAAC;AAEF;;IAEI;AACJ,eAAO,MAAM,iBAAiB,EAAE,cAAc,CAC5C,KAAK,CAAC,iBAAiB,CACa,CAAC;AAEvC;;;IAGI;AACJ,eAAO,MAAM,gBAAgB,EAAE,cAAc,CAAC,KAAK,CAAC,iBAAiB,CAOpE,CAAC;AAEF;;IAEI;AACJ,eAAO,MAAM,eAAe,EAAE,cAAc,CAAC,KAAK,CAAC,iBAAiB,CAYnE,CAAC;AAEF;;;IAGI;AACJ,eAAO,MAAM,SAAS,EAAE,cAAc,CAAC,KAAK,CAAC,iBAAiB,CAU7D,CAAC"}

package/lib/cjs/image-loaders.d.ts

@@ -1,14 +0,0 @@
-import { type ImageLoader } from "./image-optimize";
-export declare type CloudflareImageLoaderOptions = {
-    resizeOrigin?: string | null;
-};
-/**
- * Default image loader in case of no loader provided
- * https://developers.cloudflare.com/images/image-resizing/url-format/
- **/
-export declare const cloudflareImageLoader: (ops: CloudflareImageLoaderOptions | null) => ImageLoader;
-/**
- * Fake pseudo loader for local testing purposes
- **/
-export declare const localImageLoader: () => ImageLoader;
-//# sourceMappingURL=image-loaders.d.ts.map

package/lib/cjs/image-loaders.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"image-loaders.d.ts","sourceRoot":"","sources":["../../src/image-loaders.ts"],"names":[],"mappings":"AACA,OAAO,EAAY,KAAK,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAE9D,oBAAY,4BAA4B,GAAG;IACzC,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC9B,CAAC;AAEF;;;IAGI;AACJ,eAAO,MAAM,qBAAqB,EAAE,CAClC,GAAG,EAAE,4BAA4B,GAAG,IAAI,KACrC,WAoBF,CAAC;AAEJ;;IAEI;AACJ,eAAO,MAAM,gBAAgB,EAAE,MAAM,WAQlC,CAAC"}

package/lib/cjs/image-optimize.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"image-optimize.d.ts","sourceRoot":"","sources":["../../src/image-optimize.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAsFI;AAEJ,oBAAY,WAAW,GAAG,CAAC,KAAK,EAAE;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,GAAG,EAAE,MAAM,CAAC;CACb,KAAK,MAAM,CAAC;AAQb,eAAO,MAAM,QAAQ,UAAkC,CAAC;AA4GxD,eAAO,MAAM,kBAAkB,UAAW;IACxC,GAAG,EAAE,MAAM,GAAG,SAAS,CAAC;IACxB,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IACnC,OAAO,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IACrC,MAAM,EAAE,WAAW,CAAC;IACpB,QAAQ,EAAE,OAAO,CAAC;CACnB,KAAG;IACF,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,GAAG,IAuCH,CAAC"}

package/lib/cjs/image-optimize.test.cjs

@@ -1,157 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const image_optimize_1 = require("./image-optimize");
-const image_loaders_1 = require("./image-loaders");
-describe("Image optimizations applied", () => {
-    test("width is number, create pixel density descriptor 'x'", () => {
-        const imgAttr = (0, image_optimize_1.getImageAttributes)({
-            optimize: true,
-            width: 100,
-            src: "https://webstudio.is/logo.webp",
-            srcSet: undefined,
-            sizes: undefined,
-            quality: 100,
-            loader: (0, image_loaders_1.cloudflareImageLoader)({ resizeOrigin: null }),
-        });
-        expect(imgAttr).toMatchInlineSnapshot(`
-      {
-        "sizes": undefined,
-        "src": "/cdn-cgi/image/width=256,quality=100,format=auto/https://webstudio.is/logo.webp",
-        "srcSet": "/cdn-cgi/image/width=128,quality=100,format=auto/https://webstudio.is/logo.webp 1x, /cdn-cgi/image/width=256,quality=100,format=auto/https://webstudio.is/logo.webp 2x",
-      }
-    `);
-    });
-    test("width is undefined, create 'w' descriptor and sizes prop", () => {
-        const imgAttr = (0, image_optimize_1.getImageAttributes)({
-            optimize: true,
-            width: undefined,
-            src: "https://webstudio.is/logo.webp",
-            srcSet: undefined,
-            sizes: undefined,
-            quality: 90,
-            loader: (0, image_loaders_1.cloudflareImageLoader)({ resizeOrigin: null }),
-        });
-        expect(imgAttr).toMatchInlineSnapshot(`
-      {
-        "sizes": "(min-width: 1280px) 50vw, 100vw",
-        "src": "/cdn-cgi/image/width=3840,quality=90,format=auto/https://webstudio.is/logo.webp",
-        "srcSet": "/cdn-cgi/image/width=384,quality=90,format=auto/https://webstudio.is/logo.webp 384w, /cdn-cgi/image/width=640,quality=90,format=auto/https://webstudio.is/logo.webp 640w, /cdn-cgi/image/width=750,quality=90,format=auto/https://webstudio.is/logo.webp 750w, /cdn-cgi/image/width=828,quality=90,format=auto/https://webstudio.is/logo.webp 828w, /cdn-cgi/image/width=1080,quality=90,format=auto/https://webstudio.is/logo.webp 1080w, /cdn-cgi/image/width=1200,quality=90,format=auto/https://webstudio.is/logo.webp 1200w, /cdn-cgi/image/width=1920,quality=90,format=auto/https://webstudio.is/logo.webp 1920w, /cdn-cgi/image/width=2048,quality=90,format=auto/https://webstudio.is/logo.webp 2048w, /cdn-cgi/image/width=3840,quality=90,format=auto/https://webstudio.is/logo.webp 3840w",
-      }
-    `);
-    });
-    test("width is undefined and size defined, creates 'w' descriptor and use input sizes props", () => {
-        const imgAttr = (0, image_optimize_1.getImageAttributes)({
-            optimize: true,
-            width: undefined,
-            src: "https://webstudio.is/logo.webp",
-            srcSet: undefined,
-            sizes: "100vw",
-            quality: 70,
-            loader: (0, image_loaders_1.cloudflareImageLoader)({ resizeOrigin: null }),
-        });
-        expect(imgAttr).toMatchInlineSnapshot(`
-      {
-        "sizes": "100vw",
-        "src": "/cdn-cgi/image/width=3840,quality=70,format=auto/https://webstudio.is/logo.webp",
-        "srcSet": "/cdn-cgi/image/width=640,quality=70,format=auto/https://webstudio.is/logo.webp 640w, /cdn-cgi/image/width=750,quality=70,format=auto/https://webstudio.is/logo.webp 750w, /cdn-cgi/image/width=828,quality=70,format=auto/https://webstudio.is/logo.webp 828w, /cdn-cgi/image/width=1080,quality=70,format=auto/https://webstudio.is/logo.webp 1080w, /cdn-cgi/image/width=1200,quality=70,format=auto/https://webstudio.is/logo.webp 1200w, /cdn-cgi/image/width=1920,quality=70,format=auto/https://webstudio.is/logo.webp 1920w, /cdn-cgi/image/width=2048,quality=70,format=auto/https://webstudio.is/logo.webp 2048w, /cdn-cgi/image/width=3840,quality=70,format=auto/https://webstudio.is/logo.webp 3840w",
-      }
-    `);
-    });
-    test("width is undefined and size defined, creates 'w' descriptor and use input sizes props, resizeOrigin defined", () => {
-        const imgAttr = (0, image_optimize_1.getImageAttributes)({
-            optimize: true,
-            width: undefined,
-            src: "https://webstudio.is/logo.webp",
-            srcSet: undefined,
-            sizes: "100vw",
-            quality: 70,
-            loader: (0, image_loaders_1.cloudflareImageLoader)({
-                resizeOrigin: "https://resize-origin.is",
-            }),
-        });
-        expect(imgAttr).toMatchInlineSnapshot(`
-      {
-        "sizes": "100vw",
-        "src": "https://resize-origin.is/cdn-cgi/image/width=3840,quality=70,format=auto/https://webstudio.is/logo.webp",
-        "srcSet": "https://resize-origin.is/cdn-cgi/image/width=640,quality=70,format=auto/https://webstudio.is/logo.webp 640w, https://resize-origin.is/cdn-cgi/image/width=750,quality=70,format=auto/https://webstudio.is/logo.webp 750w, https://resize-origin.is/cdn-cgi/image/width=828,quality=70,format=auto/https://webstudio.is/logo.webp 828w, https://resize-origin.is/cdn-cgi/image/width=1080,quality=70,format=auto/https://webstudio.is/logo.webp 1080w, https://resize-origin.is/cdn-cgi/image/width=1200,quality=70,format=auto/https://webstudio.is/logo.webp 1200w, https://resize-origin.is/cdn-cgi/image/width=1920,quality=70,format=auto/https://webstudio.is/logo.webp 1920w, https://resize-origin.is/cdn-cgi/image/width=2048,quality=70,format=auto/https://webstudio.is/logo.webp 2048w, https://resize-origin.is/cdn-cgi/image/width=3840,quality=70,format=auto/https://webstudio.is/logo.webp 3840w",
-      }
-    `);
-    });
-    test("custom loader", () => {
-        const imgAttr = (0, image_optimize_1.getImageAttributes)({
-            optimize: true,
-            width: undefined,
-            src: "https://webstudio.is/logo.webp",
-            srcSet: undefined,
-            sizes: "100vw",
-            quality: 70,
-            loader: ({ width, src, quality }) => `${new URL(src).pathname}?w=${width}&q=${quality}`,
-        });
-        expect(imgAttr).toMatchInlineSnapshot(`
-      {
-        "sizes": "100vw",
-        "src": "/logo.webp?w=3840&q=70",
-        "srcSet": "/logo.webp?w=640&q=70 640w, /logo.webp?w=750&q=70 750w, /logo.webp?w=828&q=70 828w, /logo.webp?w=1080&q=70 1080w, /logo.webp?w=1200&q=70 1200w, /logo.webp?w=1920&q=70 1920w, /logo.webp?w=2048&q=70 2048w, /logo.webp?w=3840&q=70 3840w",
-      }
-    `);
-    });
-});
-describe("Image optimizations not applied", () => {
-    test("optimize is false", () => {
-        const imgAttr = (0, image_optimize_1.getImageAttributes)({
-            optimize: false,
-            width: 100,
-            src: "https://webstudio.is/logo.webp",
-            srcSet: undefined,
-            sizes: undefined,
-            quality: 100,
-            loader: (0, image_loaders_1.cloudflareImageLoader)({ resizeOrigin: null }),
-        });
-        expect(imgAttr).toMatchInlineSnapshot(`
-      {
-        "src": "https://webstudio.is/logo.webp",
-      }
-    `);
-    });
-    test("srcSet is defined", () => {
-        const imgAttr = (0, image_optimize_1.getImageAttributes)({
-            optimize: true,
-            width: 100,
-            src: "https://webstudio.is/logo.webp",
-            srcSet: "user-defined-srcset",
-            sizes: undefined,
-            quality: 100,
-            loader: (0, image_loaders_1.cloudflareImageLoader)({ resizeOrigin: null }),
-        });
-        expect(imgAttr).toMatchInlineSnapshot(`
-      {
-        "src": "https://webstudio.is/logo.webp",
-        "srcSet": "user-defined-srcset",
-      }
-    `);
-    });
-    test("src is empty", () => {
-        const imgAttr = (0, image_optimize_1.getImageAttributes)({
-            optimize: true,
-            width: 100,
-            src: "",
-            srcSet: undefined,
-            sizes: undefined,
-            quality: 100,
-            loader: (0, image_loaders_1.cloudflareImageLoader)({ resizeOrigin: null }),
-        });
-        expect(imgAttr).toMatchInlineSnapshot(`null`);
-    });
-    test("src is undefined", () => {
-        const imgAttr = (0, image_optimize_1.getImageAttributes)({
-            optimize: true,
-            width: 100,
-            src: undefined,
-            srcSet: undefined,
-            sizes: undefined,
-            quality: 100,
-            loader: (0, image_loaders_1.cloudflareImageLoader)({ resizeOrigin: null }),
-        });
-        expect(imgAttr).toMatchInlineSnapshot(`null`);
-    });
-});

package/lib/cjs/image-optimize.test.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=image-optimize.test.d.ts.map

package/lib/cjs/image-optimize.test.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"image-optimize.test.d.ts","sourceRoot":"","sources":["../../src/image-optimize.test.ts"],"names":[],"mappings":""}

package/lib/cjs/image.d.ts

@@ -1,11 +0,0 @@
-import { type ComponentProps } from "react";
-import { type ImageLoader } from "./image-optimize";
-declare const defaultTag = "img";
-declare type ImageProps = ComponentProps<typeof defaultTag> & {
-    quality?: number;
-    optimize?: boolean;
-    loader: ImageLoader;
-};
-export declare const Image: import("react").ForwardRefExoticComponent<Pick<ImageProps, "quality" | "loader" | "key" | keyof import("react").ImgHTMLAttributes<HTMLImageElement> | "optimize"> & import("react").RefAttributes<HTMLImageElement>>;
-export {};
-//# sourceMappingURL=image.d.ts.map

package/lib/cjs/image.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../src/image.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+B,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AACzE,OAAO,EAAsB,KAAK,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAExE,QAAA,MAAM,UAAU,QAAQ,CAAC;AAEzB,aAAK,UAAU,GAAG,cAAc,CAAC,OAAO,UAAU,CAAC,GAAG;IACpD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,EAAE,WAAW,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,KAAK,sNAmBjB,CAAC"}

package/lib/cjs/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,YAAY,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AACpD,OAAO,KAAK,OAAO,MAAM,iBAAiB,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,kCAAkC,CAAC"}

package/lib/image-dev.stories.d.ts

@@ -1,35 +0,0 @@
-import React from "react";
-import type { ComponentMeta, ComponentStory } from "@storybook/react";
-declare const _default: ComponentMeta<React.ForwardRefExoticComponent<Pick<React.ClassAttributes<HTMLImageElement> & React.ImgHTMLAttributes<HTMLImageElement> & {
-    quality?: number | undefined;
-    optimize?: boolean | undefined;
-    loader: import("./image-optimize").ImageLoader;
-}, "quality" | "loader" | "key" | keyof React.ImgHTMLAttributes<HTMLImageElement> | "optimize"> & React.RefAttributes<HTMLImageElement>>>;
-export default _default;
-/**
- * Load images depending on image width and device per pixel ratio.
- **/
-export declare const FixedWidthImage: ComponentStory<React.FunctionComponent>;
-/**
- * Preserve ratio using object-fit: cover. Load images depending on image width and device per pixel ratio.
- **/
-export declare const FixedWidthImageCover: ComponentStory<React.FunctionComponent>;
-/**
- * Load images depending on the viewport width.
- **/
-export declare const UnknownWidthImage: ComponentStory<React.FunctionComponent>;
-/**
- * Fit width of the parent container, has own aspect-ratio and object-fit=cover.
- * Load images depending on the viewport width.
- **/
-export declare const AspectRatioImage: ComponentStory<React.FunctionComponent>;
-/**
- * Fill width and height of the relative parent container, object-fit=cover. Load images depending on the viewport width.
- **/
-export declare const FillParentImage: ComponentStory<React.FunctionComponent>;
-/**
- * "sizes" attribute explicitly equal to 100vw allowing to skip the default behavior.
- * See DEFAULT_SIZES in the Image component. Load images depending on the viewport width.
- **/
-export declare const HeroImage: ComponentStory<React.FunctionComponent>;
-//# sourceMappingURL=image-dev.stories.d.ts.map

package/lib/image-dev.stories.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"image-dev.stories.d.ts","sourceRoot":"","sources":["../src/image-dev.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmD,MAAM,OAAO,CAAC;AACxE,OAAO,KAAK,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;;;;;;AAQtE,wBAE0C;AA0C1C;;IAEI;AACJ,eAAO,MAAM,eAAe,EAAE,cAAc,CAAC,KAAK,CAAC,iBAAiB,CAEnE,CAAC;AAEF;;IAEI;AACJ,eAAO,MAAM,oBAAoB,EAAE,cAAc,CAC/C,KAAK,CAAC,iBAAiB,CAQxB,CAAC;AAEF;;IAEI;AACJ,eAAO,MAAM,iBAAiB,EAAE,cAAc,CAC5C,KAAK,CAAC,iBAAiB,CACa,CAAC;AAEvC;;;IAGI;AACJ,eAAO,MAAM,gBAAgB,EAAE,cAAc,CAAC,KAAK,CAAC,iBAAiB,CAOpE,CAAC;AAEF;;IAEI;AACJ,eAAO,MAAM,eAAe,EAAE,cAAc,CAAC,KAAK,CAAC,iBAAiB,CAYnE,CAAC;AAEF;;;IAGI;AACJ,eAAO,MAAM,SAAS,EAAE,cAAc,CAAC,KAAK,CAAC,iBAAiB,CAU7D,CAAC"}

package/lib/image-dev.stories.js

@@ -1,65 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Image as ImagePrimitive, loaders } from "./";
-// to not allow include local assets everywhere, just enable it for this file
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
-import localLogoImage from "../storybook-assets/logo.webp";
-export default {
-    title: "Components/ImageDev",
-};
-/**
- * In case you need to test img with real cloudflare trasforms
- * set  USE_CLOUDFLARE_IMAGE_TRANSFORM = true
- **/
-const USE_CLOUDFLARE_IMAGE_TRANSFORM = false;
-// For cloudflare image transform testing, logo should be the most consistent image on the site
-const REMOTE_SELF_DOMAIN_IMAGE = "https://webstudio.is/logo.webp";
-const imageSrc = USE_CLOUDFLARE_IMAGE_TRANSFORM
-    ? REMOTE_SELF_DOMAIN_IMAGE
-    : localLogoImage;
-const imageLoader = USE_CLOUDFLARE_IMAGE_TRANSFORM
-    ? loaders.cloudflareImageLoader({ resizeOrigin: "https://webstudio.is" })
-    : loaders.localImageLoader();
-const ImageBase = (args) => {
-    const style = {
-        maxWidth: "100%",
-        display: "block",
-        ...args.style,
-    };
-    return (_jsx(ImagePrimitive, { ...args, optimize: true, loader: imageLoader, style: style }));
-};
-/**
- * Load images depending on image width and device per pixel ratio.
- **/
-export const FixedWidthImage = () => (_jsx(ImageBase, { src: imageSrc, width: "300", height: "400" }));
-/**
- * Preserve ratio using object-fit: cover. Load images depending on image width and device per pixel ratio.
- **/
-export const FixedWidthImageCover = () => (_jsx(ImageBase, { src: imageSrc, width: "300", height: "400", style: { objectFit: "cover" } }));
-/**
- * Load images depending on the viewport width.
- **/
-export const UnknownWidthImage = () => _jsx(ImageBase, { src: imageSrc });
-/**
- * Fit width of the parent container, has own aspect-ratio and object-fit=cover.
- * Load images depending on the viewport width.
- **/
-export const AspectRatioImage = () => (_jsx("div", { style: { width: "50%" }, children: _jsx(ImageBase, { src: imageSrc, style: { aspectRatio: "2/1", objectFit: "cover", width: "100%" } }) }));
-/**
- * Fill width and height of the relative parent container, object-fit=cover. Load images depending on the viewport width.
- **/
-export const FillParentImage = () => (_jsx("div", { style: { width: "50%", aspectRatio: "2/1", position: "relative" }, children: _jsx(ImageBase, { src: imageSrc, style: {
-            objectFit: "cover",
-            position: "absolute",
-            width: "100%",
-            height: "100%",
-        } }) }));
-/**
- * "sizes" attribute explicitly equal to 100vw allowing to skip the default behavior.
- * See DEFAULT_SIZES in the Image component. Load images depending on the viewport width.
- **/
-export const HeroImage = () => (_jsx(ImageBase, { src: imageSrc, sizes: "100vw", style: {
-        aspectRatio: "3/1",
-        objectFit: "cover",
-        width: "100%",
-    } }));

package/lib/image-loaders.d.ts

@@ -1,14 +0,0 @@
-import { type ImageLoader } from "./image-optimize";
-export declare type CloudflareImageLoaderOptions = {
-    resizeOrigin?: string | null;
-};
-/**
- * Default image loader in case of no loader provided
- * https://developers.cloudflare.com/images/image-resizing/url-format/
- **/
-export declare const cloudflareImageLoader: (ops: CloudflareImageLoaderOptions | null) => ImageLoader;
-/**
- * Fake pseudo loader for local testing purposes
- **/
-export declare const localImageLoader: () => ImageLoader;
-//# sourceMappingURL=image-loaders.d.ts.map

package/lib/image-loaders.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"image-loaders.d.ts","sourceRoot":"","sources":["../src/image-loaders.ts"],"names":[],"mappings":"AACA,OAAO,EAAY,KAAK,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAE9D,oBAAY,4BAA4B,GAAG;IACzC,YAAY,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC9B,CAAC;AAEF;;;IAGI;AACJ,eAAO,MAAM,qBAAqB,EAAE,CAClC,GAAG,EAAE,4BAA4B,GAAG,IAAI,KACrC,WAoBF,CAAC;AAEJ;;IAEI;AACJ,eAAO,MAAM,gBAAgB,EAAE,MAAM,WAQlC,CAAC"}

package/lib/image-optimize.d.ts

@@ -1,107 +0,0 @@
-/**
- * # Responsive Image component helpers.
- *
- * ## Quick summary about img srcset and sizes attributes:
- *
- * There are 2 ways to define what image will be loaded in the img property srcset.
- *
- * 1. via pixel density descriptor 'x', like `srcset="photo-small.jpg 1x, photo-medium.jpg 1.5x, photo-huge.jpg 2x"`
- *   src will be selected depending on `device-pixel-ratio`.
- *
- * 2. via viewport width descriptor 'w' and sizes property containing source size descriptors, like
- *   `srcset="photo-small.jpg 320w, photo-medium.jpg 640w, photo-huge.jpg 1280w"`
- *   `sizes="(max-width: 600px) 400px, (max-width: 1200px) 70vw, 50vw"`
- *
- *   The browser finds the first matching media query from source size descriptors,
- *   then use source size value to generate internally srcset
- *   with pixel density descriptors dividing width descriptor value by source size value.
- *
- *   Using the example above for viewport width 800px.
- *   The first matching media query is (max-width: 1200px)
- *   source size value is 70vw  equal to 800px * 0,7 = 560px
- *
- *   browser internal srcset will be (we divide `w` descriptor by source size value):
- *   photo-small.jpg 320/560x, photo-medium.jpg 640/560x, photo-huge.jpg 1280/560x =>
- *   photo-small.jpg 0.57x, photo-medium.jpg 1.14x, photo-huge.jpg 2.28x
- *
- *   Finally same rules as for pixel density descriptor 'x' are applied.
- *
- * ## Algorithm (without optimizations):
- *
- * We have a predefined array of all supported image sizes allSizes, this is the real width of an image in pixels.
- * This is good for caching, as we can cache image with specific width and then use it for different devices.
- *
- * > allSizes array is a tradeoff between cache and the best possible image size you deliver to the user.
- * > If allSizes.length is too small, you will deliver too big images to the user,
- * > if allSizes.length is too big, you will have many caches misses.
- *
- * If img has a defined width property.
- *   1. find the first value from allSizes which is greater or equal to the width property
- *   2. use found value to generate srcset with pixel density descriptor 'x'
- *
- *
- * If img has no defined width property.
- *   1. Generate srcset = allSizes.map((w) => `${getImageSrcAtWidth(w)} ${w}w`)
- *   2. Use sizes property, or if it is not defined use opinionated DEFAULT_SIZES = "(min-width: 1280px) 50vw, 100vw";
- *
- * Optimizations applied now:
- *
- * - If the sizes property is defined, we can exclude from `srcsets` all images
- *   which are smaller than the `smallestRatio * smallesDeviceSize`
- *
- * Future (not implemented) optimizations and improvements:
- *
- * - Knowing image size on different viewport widths we can provide nondefault sizes property
- * - Knowledge of Image aspect-ratio would allow cropping images serverside.
- * - Early hints for high priority images https://blog.cloudflare.com/early-hints/
- * - Slow networks optimizations
- * - 404 etc processing with CSS - https://bitsofco.de/styling-broken-images/ (has some opinionated issues) or js solution with custom user fallback.
- *
- * # Attributions
- *
- * The MIT License (MIT)
- *
- * applies to:
- *
- * - https://github.com/vercel/next.js, Copyright (c) 2022 Vercel, Inc.
- *
- * The MIT License (MIT)
- *
- * Copyright (c) 2022 Vercel, Inc.
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
- * and associated documentation files (the "Software"), to deal in the Software without restriction,
- * including without limitation the rights to use, copy, modify, merge, publish, distribute,
- * sublicense, and/or sell copies of the Software, and to permit persons to whom the Software
- * is furnished to do so, subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all copies
- * or substantial portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
- * INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
- * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
- * IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,
- * DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
- * ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- **/
-export declare type ImageLoader = (props: {
-    width: number;
-    quality: number;
-    src: string;
-}) => string;
-export declare const allSizes: number[];
-export declare const getImageAttributes: (props: {
-    src: string | undefined;
-    srcSet: string | undefined;
-    sizes: string | undefined;
-    width: string | number | undefined;
-    quality: string | number | undefined;
-    loader: ImageLoader;
-    optimize: boolean;
-}) => {
-    src: string;
-    srcSet?: string;
-    sizes?: string;
-} | null;
-//# sourceMappingURL=image-optimize.d.ts.map

package/lib/image-optimize.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"image-optimize.d.ts","sourceRoot":"","sources":["../src/image-optimize.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAsFI;AAEJ,oBAAY,WAAW,GAAG,CAAC,KAAK,EAAE;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,GAAG,EAAE,MAAM,CAAC;CACb,KAAK,MAAM,CAAC;AAQb,eAAO,MAAM,QAAQ,UAAkC,CAAC;AA4GxD,eAAO,MAAM,kBAAkB,UAAW;IACxC,GAAG,EAAE,MAAM,GAAG,SAAS,CAAC;IACxB,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,KAAK,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IACnC,OAAO,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC;IACrC,MAAM,EAAE,WAAW,CAAC;IACpB,QAAQ,EAAE,OAAO,CAAC;CACnB,KAAG;IACF,GAAG,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,GAAG,IAuCH,CAAC"}

package/lib/image-optimize.test.d.ts

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=image-optimize.test.d.ts.map

package/lib/image-optimize.test.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"image-optimize.test.d.ts","sourceRoot":"","sources":["../src/image-optimize.test.ts"],"names":[],"mappings":""}

package/lib/image.d.ts

@@ -1,11 +0,0 @@
-import { type ComponentProps } from "react";
-import { type ImageLoader } from "./image-optimize";
-declare const defaultTag = "img";
-declare type ImageProps = ComponentProps<typeof defaultTag> & {
-    quality?: number;
-    optimize?: boolean;
-    loader: ImageLoader;
-};
-export declare const Image: import("react").ForwardRefExoticComponent<Pick<ImageProps, "quality" | "loader" | "key" | keyof import("react").ImgHTMLAttributes<HTMLImageElement> | "optimize"> & import("react").RefAttributes<HTMLImageElement>>;
-export {};
-//# sourceMappingURL=image.d.ts.map

package/lib/image.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../src/image.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+B,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AACzE,OAAO,EAAsB,KAAK,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAExE,QAAA,MAAM,UAAU,QAAQ,CAAC;AAEzB,aAAK,UAAU,GAAG,cAAc,CAAC,OAAO,UAAU,CAAC,GAAG;IACpD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,EAAE,WAAW,CAAC;CACrB,CAAC;AAEF,eAAO,MAAM,KAAK,sNAmBjB,CAAC"}

package/lib/index.d.ts

@@ -1,5 +0,0 @@
-export { Image } from "./image";
-export type { ImageLoader } from "./image-optimize";
-export * as loaders from "./image-loaders";
-export { default as imageProps } from "./__generated__/image.props.json";
-//# sourceMappingURL=index.d.ts.map

package/lib/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,YAAY,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AACpD,OAAO,KAAK,OAAO,MAAM,iBAAiB,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,kCAAkC,CAAC"}