@lonik/oh-image 2.2.2 → 2.3.1

package/dist/{base-loader-options-C1EZVxmE.d.ts → base-loader-options-BzrruYJ4.d.ts}

@@ -1,13 +1,13 @@
 //#region src/loaders/base-loader-options.d.ts
 interface BaseLoaderOptions<T> {
   path?: string;
-  transforms?: T;
+  transforms?: T & BaseLoaderTransforms;
 }
 interface BaseGlobalLoaderOptions<T> extends BaseLoaderOptions<T> {
-  placeholder?: T;
+  placeholder?: T & BaseLoaderTransforms;
 }
 interface BaseLoaderTransforms {
   [futureKey: string]: any;
 }
 //#endregion
-export { BaseLoaderOptions as n, BaseLoaderTransforms as r, BaseGlobalLoaderOptions as t };
+export { BaseLoaderOptions as n, BaseGlobalLoaderOptions as t };

package/dist/cloudflare.d.ts

@@ -1,9 +1,9 @@
-import { s as ImageLoaderOptions } from "./index-BXVRSiZA.js";
-import { n as BaseLoaderOptions, r as BaseLoaderTransforms, t as BaseGlobalLoaderOptions } from "./base-loader-options-C1EZVxmE.js";
+import { s as ImageLoaderOptions } from "./index-5t1nN_1J.js";
+import { n as BaseLoaderOptions, t as BaseGlobalLoaderOptions } from "./base-loader-options-BzrruYJ4.js";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/loaders/cloudflare/cloudflare-options.d.ts
-type CloudflareTransforms = BaseLoaderTransforms & Partial<{
+type CloudflareTransforms = Partial<{
   anim: boolean;
   background: string;
   blur: number;

package/dist/cloudflare.js

@@ -1,4 +1,4 @@
-import { t as loaderFactory } from "./loader-factory-C1301CZd.js";
+import { t as loaderFactory } from "./loader-factory-JhrhUvkg.js";
 
 //#region src/loaders/cloudflare/cloudflare-loader.tsx
 const { useLoaderContext: useCloudflareContext, LoaderProvider: CloudflareLoaderProvider, useLoader: useCloudflareLoader } = loaderFactory({

package/dist/cloudinary.d.ts

@@ -1,6 +1,6 @@
-import { s as ImageLoaderOptions } from "./index-BXVRSiZA.js";
-import { n as BaseLoaderOptions, r as BaseLoaderTransforms, t as BaseGlobalLoaderOptions } from "./base-loader-options-C1EZVxmE.js";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { s as ImageLoaderOptions } from "./index-5t1nN_1J.js";
+import { n as BaseLoaderOptions, t as BaseGlobalLoaderOptions } from "./base-loader-options-BzrruYJ4.js";
+import * as react_jsx_runtime4 from "react/jsx-runtime";
 
 //#region src/loaders/cloudinary/cloudinary-options.d.ts
 type BACKGROUND_MODE = "border" | "predominant" | "border_contrast" | "predominant_contrast" | "predominant_gradient" | "predominant_gradient_contrast" | "border_gradient" | "border_gradient_contrast";
@@ -9,7 +9,7 @@ type CROP_MODE = "auto" | "auto_pad" | "crop" | "fill" | "fill_pad" | "fit" | "i
 type COLOR_SPACE = "sRGB" | "tinysrgb" | "cmyk" | "no_cmyk" | "keep_cmyk" | "truecolor";
 type ART_FILTER = "al_dente" | "athena" | "audrey" | "aurora" | "daguerre" | "eucalyptus" | "fes" | "frost" | "hairspray" | "hokusai" | "incognito" | "linen" | "peacock" | "primavera" | "quartz" | "red_rock" | "refresh" | "sizzle" | "sonnet" | "ukulele" | "zorro";
 type FORMAT_TYPE = "3ds" | "ai" | "avif" | "bmp" | "bw" | "djvu" | "dng" | "eps" | "fbx" | "flif" | "gif" | "glb" | "gltf" | "heif" | "heic" | "ico" | "indd" | "jp2" | "jpg" | "jpeg" | "jxl" | "obj" | "pdf" | "ply" | "png" | "psd" | "raw" | "svg" | "tga" | "tif" | "tiff" | "u3ma" | "usdz" | "wdp" | "webp";
-type CloudinaryTransforms = BaseLoaderTransforms & Partial<{
+type CloudinaryTransforms = Partial<{
   a?: number | ANGLE_MODE | string;
   mode?: string;
   ar?: string | number;
@@ -106,6 +106,6 @@ declare const useCloudinaryContext: () => CloudinaryGlobalOptions, CloudinaryLoa
     ...props
   }: {
     children: React.ReactNode;
-  } & Partial<CloudinaryGlobalOptions>) => react_jsx_runtime0.JSX.Element, useCloudinaryLoader: (options?: CloudinaryGlobalOptions | undefined) => (() => undefined) | ((imageOptions: ImageLoaderOptions) => string);
+  } & Partial<CloudinaryGlobalOptions>) => react_jsx_runtime4.JSX.Element, useCloudinaryLoader: (options?: CloudinaryGlobalOptions | undefined) => (() => undefined) | ((imageOptions: ImageLoaderOptions) => string);
 //#endregion
 export { CloudinaryGlobalOptions, CloudinaryLoaderProvider, CloudinaryOptions, CloudinaryTransforms, useCloudinaryContext, useCloudinaryLoader };

package/dist/cloudinary.js

@@ -1,4 +1,4 @@
-import { t as loaderFactory } from "./loader-factory-C1301CZd.js";
+import { t as loaderFactory } from "./loader-factory-JhrhUvkg.js";
 
 //#region src/loaders/cloudinary/cloudinary-loader.tsx
 function customResolver(key, value) {

package/dist/imgproxy.d.ts

@@ -1,6 +1,6 @@
-import { s as ImageLoaderOptions } from "./index-BXVRSiZA.js";
-import { n as BaseLoaderOptions, r as BaseLoaderTransforms, t as BaseGlobalLoaderOptions } from "./base-loader-options-C1EZVxmE.js";
-import * as react_jsx_runtime1 from "react/jsx-runtime";
+import { s as ImageLoaderOptions } from "./index-5t1nN_1J.js";
+import { n as BaseLoaderOptions, t as BaseGlobalLoaderOptions } from "./base-loader-options-BzrruYJ4.js";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/loaders/imgproxy/imgproxy-options.d.ts
 type ResizeType = "fit" | "fill" | "fill-down" | "force" | "auto";
@@ -100,7 +100,7 @@ interface PngOptions {
   quantize?: boolean;
   quantization_colors?: number;
 }
-type ImgproxyTransforms = BaseLoaderTransforms & Partial<{
+type ImgproxyTransforms = Partial<{
   /**
    * Defines the resizing type, width, height, enlarge, and extend.
    * All arguments are optional and can be omitted to use their default values.
@@ -383,6 +383,6 @@ declare const useImgproxyContext: () => ImgproxyGlobalOptions, ImgproxyLoaderPro
     ...props
   }: {
     children: React.ReactNode;
-  } & Partial<ImgproxyGlobalOptions>) => react_jsx_runtime1.JSX.Element, useImgproxyLoader: (options?: ImgproxyGlobalOptions | undefined) => (() => undefined) | ((imageOptions: ImageLoaderOptions) => string);
+  } & Partial<ImgproxyGlobalOptions>) => react_jsx_runtime0.JSX.Element, useImgproxyLoader: (options?: ImgproxyGlobalOptions | undefined) => (() => undefined) | ((imageOptions: ImageLoaderOptions) => string);
 //#endregion
 export { ImgproxyGlobalOptions, ImgproxyLoaderProvider, ImgproxyOptions, ImgproxyTransforms, useImgproxyContext, useImgproxyLoader };

package/dist/imgproxy.js

@@ -1,4 +1,4 @@
-import { t as loaderFactory } from "./loader-factory-C1301CZd.js";
+import { t as loaderFactory } from "./loader-factory-JhrhUvkg.js";
 
 //#region src/loaders/imgproxy/imgproxy-loader.tsx
 const { useLoaderContext: useImgproxyContext, LoaderProvider: ImgproxyLoaderProvider, useLoader: useImgproxyLoader } = loaderFactory({

package/dist/{index-BXVRSiZA.d.ts → index-5t1nN_1J.d.ts}

@@ -1,5 +1,5 @@
 import { ImgHTMLAttributes } from "react";
-import * as react_jsx_runtime4 from "react/jsx-runtime";
+import * as react_jsx_runtime2 from "react/jsx-runtime";
 
 //#region src/react/types.d.ts
 interface ImageLoaderOptions {
@@ -30,10 +30,10 @@ interface ImageProps extends Partial<Pick<ImgHTMLAttributes<HTMLImageElement>, "
 }
 //#endregion
 //#region src/react/image.d.ts
-declare function Image(props: ImageProps): react_jsx_runtime4.JSX.Element;
+declare function Image(props: ImageProps): react_jsx_runtime2.JSX.Element;
 //#endregion
 //#region src/react/image-factory.d.ts
-declare function __imageFactory(defaultProps: any): (props: any) => react_jsx_runtime4.JSX.Element;
+declare function __imageFactory(defaultProps: any): (props: any) => react_jsx_runtime2.JSX.Element;
 //#endregion
 //#region src/react/use-img-loaded.d.ts
 /**
@@ -75,6 +75,6 @@ declare function ImageProvider({
   ...props
 }: {
   children: React.ReactNode;
-} & Partial<ImageContextValue>): react_jsx_runtime4.JSX.Element;
+} & Partial<ImageContextValue>): react_jsx_runtime2.JSX.Element;
 //#endregion
 export { Image as a, ImageProps as c, __imageFactory as i, useImageContext as n, ImageLoader as o, useImgLoaded as r, ImageLoaderOptions as s, ImageProvider as t };

package/dist/kontent.d.ts

@@ -0,0 +1,48 @@
+import { s as ImageLoaderOptions } from "./index-5t1nN_1J.js";
+import { n as BaseLoaderOptions, t as BaseGlobalLoaderOptions } from "./base-loader-options-BzrruYJ4.js";
+import * as react_jsx_runtime5 from "react/jsx-runtime";
+
+//#region src/loaders/kontent/kontent-options.d.ts
+type KontentTransforms = Partial<{
+  /** Resize the width of the image in pixels. */
+  w?: number;
+  /** Resize the height of the image in pixels. */
+  h?: number;
+  /** Serve correctly sized images for devices that expose a device pixel ratio. */
+  dpr?: number;
+  /** Set how the image will fit within the size bounds provided. */
+  fit?: "clamp" | "clip" | "crop" | "facearea" | "fill" | "fillmax" | "max" | "min" | "scale";
+  /** * Select a sub-region of the source image to use for processing.
+   * Expected format: "x,y,width,height"
+   */
+  rect?: [number, number, number, number];
+  /** * Focal point crop: Choose the point of interest (x, y coordinates and zoom).
+   * fp-x and fp-y are typically 0.0 to 1.0.
+   */
+  "fp-x"?: number;
+  "fp-y"?: number;
+  "fp-z"?: number;
+  smart?: boolean | "face" | "edges" | "objects";
+  /** Fill transparent areas of the image with the specified color (e.g., 'FFF' or 'red'). */
+  bg?: string;
+  /** Specify the output format to convert the image to. */
+  fm?: "webp" | "jpg" | "png" | "gif" | "avif" | "jp2";
+  /** Optimize image compression (1-100) for lossy formats. */
+  q?: number;
+  /** Enable delivery of lossless images in supported formats. */
+  lossless?: boolean;
+  /** Automatic delivery of optimized formats like WebP based on browser support. */
+  auto?: "format" | "compress" | "enhance";
+}>;
+type KontentOptions = BaseLoaderOptions<KontentTransforms>;
+type KontentGlobalOptions = BaseGlobalLoaderOptions<KontentTransforms>;
+//#endregion
+//#region src/loaders/kontent/kontent-loader.d.ts
+declare const useKontentContext: () => KontentGlobalOptions, KontentLoaderProvider: ({
+    children,
+    ...props
+  }: {
+    children: React.ReactNode;
+  } & Partial<KontentGlobalOptions>) => react_jsx_runtime5.JSX.Element, useKontentLoader: (options?: KontentGlobalOptions | undefined) => (() => undefined) | ((imageOptions: ImageLoaderOptions) => string);
+//#endregion
+export { KontentGlobalOptions, KontentLoaderProvider, KontentOptions, KontentTransforms, useKontentContext, useKontentLoader };

package/dist/kontent.js

@@ -0,0 +1,18 @@
+import { t as loaderFactory } from "./loader-factory-JhrhUvkg.js";
+
+//#region src/loaders/kontent/kontent-loader.tsx
+const { useLoaderContext: useKontentContext, LoaderProvider: KontentLoaderProvider, useLoader: useKontentLoader } = loaderFactory({
+	transforms: { auto: "format" },
+	placeholder: {
+		q: 10,
+		auto: "format"
+	}
+}, {
+	optionSeparator: "=",
+	paramSeparator: "&",
+	passBooleanValue: true,
+	customResolver: { rect: (key, value) => `${key}=${value.join(",")}` }
+}, ({ path, params, imageOptions }) => `${path}/${imageOptions.src}?${params}`);
+
+//#endregion
+export { KontentLoaderProvider, useKontentContext, useKontentLoader };

package/dist/plugin.js

@@ -342,8 +342,7 @@ function ohImage(options) {
 						height: src.height,
 						src: src.src,
 						srcSet: src.srcSet,
-						placeholder: src.placeholder,
-						alt: ""
+						placeholder: src.placeholder
 					})})
 `;
 				} catch (err) {

package/dist/react.d.ts

@@ -1,2 +1,2 @@
-import { a as Image, c as ImageProps, i as __imageFactory, n as useImageContext, o as ImageLoader, r as useImgLoaded, s as ImageLoaderOptions, t as ImageProvider } from "./index-BXVRSiZA.js";
+import { a as Image, c as ImageProps, i as __imageFactory, n as useImageContext, o as ImageLoader, r as useImgLoaded, s as ImageLoaderOptions, t as ImageProvider } from "./index-5t1nN_1J.js";
 export { Image, ImageLoader, ImageLoaderOptions, ImageProps, ImageProvider, __imageFactory, useImageContext, useImgLoaded };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lonik/oh-image",
   "type": "module",
-  "version": "2.2.2",
+  "version": "2.3.1",
   "description": "A React component library for optimized image handling.",
   "author": "Luka Onikadze <lukonik@gmail.com>",
   "license": "MIT",
@@ -36,6 +36,10 @@
       "types": "./dist/imgproxy.d.ts",
       "default": "./dist/imgproxy.js"
     },
+    "./kontent": {
+      "types": "./dist/kontent.d.ts",
+      "default": "./dist/kontent.js"
+    },
     "./client": {
       "types": "./dist/client.d.ts"
     }