@lonik/oh-image 2.6.0 → 2.8.0

package/dist/contentful.d.ts

@@ -1,6 +1,7 @@
-import { s as ImageLoaderOptions } from "./index-DMC2sGIO.js";
-import { n as BaseLoaderOptions, t as BaseGlobalLoaderOptions } from "./base-loader-options-DScvwZAJ.js";
-import * as react_jsx_runtime5 from "react/jsx-runtime";
+import { n as ImageLoaderOptions } from "./types-BEgZ3W30.js";
+import "./index-CTQWBPPA.js";
+import { n as BaseLoaderOptions, t as BaseGlobalLoaderOptions } from "./base-loader-options-DCLkYppY.js";
+import * as react_jsx_runtime1 from "react/jsx-runtime";
 
 //#region src/loaders/contentful/contentful-options.d.ts
 type ContentfulTransforms = Partial<{
@@ -38,6 +39,6 @@ declare const useContentfulContext: () => ContentfulGlobalOptions, ContentfulLoa
     ...props
   }: {
     children: React.ReactNode;
-  } & Partial<ContentfulGlobalOptions>) => react_jsx_runtime5.JSX.Element, useContentfulLoader: (options?: ContentfulGlobalOptions | undefined) => (() => undefined) | ((imageOptions: ImageLoaderOptions) => string);
+  } & Partial<ContentfulGlobalOptions>) => react_jsx_runtime1.JSX.Element, useContentfulLoader: (options?: ContentfulGlobalOptions | undefined) => (() => undefined) | ((imageOptions: ImageLoaderOptions) => string);
 //#endregion
 export { ContentfulGlobalOptions, ContentfulLoaderProvider, ContentfulOptions, ContentfulTransforms, useContentfulContext, useContentfulLoader };

package/dist/imgproxy.d.ts

@@ -1,6 +1,7 @@
-import { s as ImageLoaderOptions } from "./index-DMC2sGIO.js";
-import { n as BaseLoaderOptions, t as BaseGlobalLoaderOptions } from "./base-loader-options-DScvwZAJ.js";
-import * as react_jsx_runtime1 from "react/jsx-runtime";
+import { n as ImageLoaderOptions } from "./types-BEgZ3W30.js";
+import "./index-CTQWBPPA.js";
+import { n as BaseLoaderOptions, t as BaseGlobalLoaderOptions } from "./base-loader-options-DCLkYppY.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";
@@ -383,6 +384,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/index-CTQWBPPA.d.ts

@@ -0,0 +1,52 @@
+import { r as ImageProps, t as ImageLoader } from "./types-BEgZ3W30.js";
+import * as react_jsx_runtime5 from "react/jsx-runtime";
+
+//#region src/react/image.d.ts
+declare function Image(props: ImageProps): react_jsx_runtime5.JSX.Element;
+//#endregion
+//#region src/react/image-factory.d.ts
+declare function __imageFactory(defaultProps: any): (props: any) => react_jsx_runtime5.JSX.Element;
+//#endregion
+//#region src/react/use-img-loaded.d.ts
+/**
+ * A hook that tracks whether an image element has finished loading.
+ *
+ * Handles all edge cases:
+ * - Image already cached/complete on mount
+ * - Normal load via event listener
+ * - Errors (resets to `false`)
+ * - `src` changes (resets to `false` until the new source loads)
+ * - Element unmount / ref set to `null`
+ *
+ * @returns `[ref, isLoaded]` — attach the ref callback to an `<img>` element.
+ *
+ * @example
+ * ```tsx
+ * function Avatar({ src }: { src: string }) {
+ *   const [imgRef, isLoaded] = useImgLoaded(src);
+ *   return (
+ *     <img
+ *       ref={imgRef}
+ *       src={src}
+ *       style={{ opacity: isLoaded ? 1 : 0 }}
+ *     />
+ *   );
+ * }
+ * ```
+ */
+declare function useImgLoaded(src: string | undefined): [(img: HTMLImageElement | null) => void, boolean];
+//#endregion
+//#region src/react/image-context.d.ts
+interface ImageContextValue extends Pick<ImageProps, "placeholder" | "breakpoints" | "loader"> {
+  breakpoints: number[];
+  loader: ImageLoader | null;
+}
+declare function useImageContext(): ImageContextValue;
+declare function ImageProvider({
+  children,
+  ...props
+}: {
+  children: React.ReactNode;
+} & Partial<ImageContextValue>): react_jsx_runtime5.JSX.Element;
+//#endregion
+export { Image as a, __imageFactory as i, useImageContext as n, useImgLoaded as r, ImageProvider as t };

package/dist/kontent.d.ts

@@ -1,5 +1,6 @@
-import { s as ImageLoaderOptions } from "./index-DMC2sGIO.js";
-import { n as BaseLoaderOptions, t as BaseGlobalLoaderOptions } from "./base-loader-options-DScvwZAJ.js";
+import { n as ImageLoaderOptions } from "./types-BEgZ3W30.js";
+import "./index-CTQWBPPA.js";
+import { n as BaseLoaderOptions, t as BaseGlobalLoaderOptions } from "./base-loader-options-DCLkYppY.js";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/loaders/kontent/kontent-options.d.ts

package/dist/netlify.d.ts

@@ -1,6 +1,7 @@
-import { s as ImageLoaderOptions } from "./index-DMC2sGIO.js";
-import { n as BaseLoaderOptions, t as BaseGlobalLoaderOptions } from "./base-loader-options-DScvwZAJ.js";
-import * as react_jsx_runtime2 from "react/jsx-runtime";
+import { n as ImageLoaderOptions } from "./types-BEgZ3W30.js";
+import "./index-CTQWBPPA.js";
+import { n as BaseLoaderOptions, t as BaseGlobalLoaderOptions } from "./base-loader-options-DCLkYppY.js";
+import * as react_jsx_runtime8 from "react/jsx-runtime";
 
 //#region src/loaders/netlify/netlify-options.d.ts
 type NetlifyTransforms = Partial<{
@@ -20,6 +21,6 @@ declare const useNetlifyContext: () => NetlifyGlobalOptions, NetlifyLoaderProvid
     ...props
   }: {
     children: React.ReactNode;
-  } & Partial<NetlifyGlobalOptions>) => react_jsx_runtime2.JSX.Element, useNetlifyLoader: (options?: NetlifyGlobalOptions | undefined) => (() => undefined) | ((imageOptions: ImageLoaderOptions) => string);
+  } & Partial<NetlifyGlobalOptions>) => react_jsx_runtime8.JSX.Element, useNetlifyLoader: (options?: NetlifyGlobalOptions | undefined) => (() => undefined) | ((imageOptions: ImageLoaderOptions) => string);
 //#endregion
 export { NetlifyGlobalOptions, NetlifyLoaderProvider, NetlifyOptions, NetlifyTransforms, useNetlifyContext, useNetlifyLoader };

package/dist/plugin.d.ts

@@ -16,7 +16,7 @@ interface ImageOptions {
   /** Whether to generate a placeholder image for lazy loading */
   placeholder?: boolean;
   /** Breakpoints array - widths in pixels for responsive srcSet generation */
-  breakpoints?: number[];
+  breakpoints?: number[] | null;
   /** Blur the image */
   blur?: number | null;
   /** Flip the image vertically */

package/dist/plugin.js

@@ -18,6 +18,10 @@ function queryToOptions(processKey, uri) {
 		parseNumbers: true,
 		arrayFormat: "comma",
 		types: {
+			width: "number",
+			height: "number",
+			format: "string",
+			placeholder: "boolean",
 			breakpoints: "number[]",
 			blur: "number",
 			flip: "boolean",
@@ -39,7 +43,7 @@ function queryToOptions(processKey, uri) {
 	};
 	else return {
 		shouldProcess: false,
-		path,
+		path: "",
 		queryString: query
 	};
 }

package/dist/react.d.ts

@@ -1,2 +1,3 @@
-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-DMC2sGIO.js";
+import { n as ImageLoaderOptions, r as ImageProps, t as ImageLoader } from "./types-BEgZ3W30.js";
+import { a as Image, i as __imageFactory, n as useImageContext, r as useImgLoaded, t as ImageProvider } from "./index-CTQWBPPA.js";
 export { Image, ImageLoader, ImageLoaderOptions, ImageProps, ImageProvider, __imageFactory, useImageContext, useImgLoaded };

package/dist/types-BEgZ3W30.d.ts

@@ -0,0 +1,31 @@
+import { ImgHTMLAttributes } from "react";
+
+//#region src/react/types.d.ts
+interface ImageLoaderOptions {
+  src: string;
+  width?: number | null | undefined;
+  height?: number | null | undefined;
+  isPlaceholder?: boolean;
+}
+type ImageLoader = (options: ImageLoaderOptions) => string | undefined;
+interface ImageProps extends Partial<Pick<ImgHTMLAttributes<HTMLImageElement>, "fetchPriority" | "decoding" | "loading" | "srcSet" | "className" | "sizes" | "style">> {
+  /** Alternative text for the image, required for accessibility. Use an empty string for decorative images. */
+  alt: string;
+  /** Configures the Image component to load the image immediately. */
+  priority?: boolean;
+  /** */
+  src: string;
+  /** The URL of the placeholder image to display while loading. */
+  placeholder?: string | undefined | boolean | null;
+  /**
+   * Sets the image to "fill mode", which eliminates the height/width requirement and adds
+   * styles such that the image fills its containing element.
+   */
+  fill?: boolean;
+  loader?: ImageLoader | null;
+  width?: number | undefined;
+  height?: number | undefined;
+  breakpoints?: number[];
+}
+//#endregion
+export { ImageLoaderOptions as n, ImageProps as r, ImageLoader as t };

package/dist/wordpress.d.ts

@@ -1,6 +1,7 @@
-import { s as ImageLoaderOptions } from "./index-DMC2sGIO.js";
-import { n as BaseLoaderOptions, t as BaseGlobalLoaderOptions } from "./base-loader-options-DScvwZAJ.js";
-import * as react_jsx_runtime3 from "react/jsx-runtime";
+import { n as ImageLoaderOptions } from "./types-BEgZ3W30.js";
+import "./index-CTQWBPPA.js";
+import { n as BaseLoaderOptions, t as BaseGlobalLoaderOptions } from "./base-loader-options-DCLkYppY.js";
+import * as react_jsx_runtime2 from "react/jsx-runtime";
 
 //#region src/loaders/wordpress/wordpress-options.d.ts
 type WordpressTransforms = Partial<{
@@ -30,6 +31,6 @@ declare const useWordpressContext: () => WordpressGlobalOptions, WordpressLoader
     ...props
   }: {
     children: React.ReactNode;
-  } & Partial<WordpressGlobalOptions>) => react_jsx_runtime3.JSX.Element, useWordpressLoader: (options?: WordpressGlobalOptions | undefined) => (() => undefined) | ((imageOptions: ImageLoaderOptions) => string);
+  } & Partial<WordpressGlobalOptions>) => react_jsx_runtime2.JSX.Element, useWordpressLoader: (options?: WordpressGlobalOptions | undefined) => (() => undefined) | ((imageOptions: ImageLoaderOptions) => string);
 //#endregion
 export { WordpressGlobalOptions, WordpressLoaderProvider, WordpressOptions, WordpressTransforms, useWordpressContext, useWordpressLoader };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lonik/oh-image",
   "type": "module",
-  "version": "2.6.0",
+  "version": "2.8.0",
   "description": "A React component library for optimized image handling.",
   "author": "Luka Onikadze <lukonik@gmail.com>",
   "license": "MIT",
@@ -81,6 +81,7 @@
     "sharp": ">=0.34.5"
   },
   "devDependencies": {
+    "@cloudinary/url-gen": "^1.22.0",
     "@commitlint/config-conventional": "^20.4.1",
     "@eslint/js": "^9.39.2",
     "@tailwindcss/vite": "^4.1.18",

package/dist/index-DMC2sGIO.d.ts

@@ -1,80 +0,0 @@
-import { ImgHTMLAttributes } from "react";
-import * as react_jsx_runtime7 from "react/jsx-runtime";
-
-//#region src/react/types.d.ts
-interface ImageLoaderOptions {
-  src: string;
-  width?: number | null | undefined;
-  height?: number | null | undefined;
-  isPlaceholder?: boolean;
-}
-type ImageLoader = (options: ImageLoaderOptions) => string | undefined;
-interface ImageProps extends Partial<Pick<ImgHTMLAttributes<HTMLImageElement>, "fetchPriority" | "decoding" | "loading" | "srcSet" | "className" | "sizes" | "style">> {
-  /** Alternative text for the image, required for accessibility. Use an empty string for decorative images. */
-  alt: string;
-  /** Configures the Image component to load the image immediately. */
-  priority?: boolean;
-  /** */
-  src: string;
-  /** The URL of the placeholder image to display while loading. */
-  placeholder?: string | undefined | boolean | null;
-  /**
-   * Sets the image to "fill mode", which eliminates the height/width requirement and adds
-   * styles such that the image fills its containing element.
-   */
-  fill?: boolean;
-  loader?: ImageLoader | null;
-  width?: number | undefined;
-  height?: number | undefined;
-  breakpoints?: number[];
-}
-//#endregion
-//#region src/react/image.d.ts
-declare function Image(props: ImageProps): react_jsx_runtime7.JSX.Element;
-//#endregion
-//#region src/react/image-factory.d.ts
-declare function __imageFactory(defaultProps: any): (props: any) => react_jsx_runtime7.JSX.Element;
-//#endregion
-//#region src/react/use-img-loaded.d.ts
-/**
- * A hook that tracks whether an image element has finished loading.
- *
- * Handles all edge cases:
- * - Image already cached/complete on mount
- * - Normal load via event listener
- * - Errors (resets to `false`)
- * - `src` changes (resets to `false` until the new source loads)
- * - Element unmount / ref set to `null`
- *
- * @returns `[ref, isLoaded]` — attach the ref callback to an `<img>` element.
- *
- * @example
- * ```tsx
- * function Avatar({ src }: { src: string }) {
- *   const [imgRef, isLoaded] = useImgLoaded(src);
- *   return (
- *     <img
- *       ref={imgRef}
- *       src={src}
- *       style={{ opacity: isLoaded ? 1 : 0 }}
- *     />
- *   );
- * }
- * ```
- */
-declare function useImgLoaded(src: string | undefined): [(img: HTMLImageElement | null) => void, boolean];
-//#endregion
-//#region src/react/image-context.d.ts
-interface ImageContextValue extends Pick<ImageProps, "placeholder" | "breakpoints" | "loader"> {
-  breakpoints: number[];
-  loader: ImageLoader | null;
-}
-declare function useImageContext(): ImageContextValue;
-declare function ImageProvider({
-  children,
-  ...props
-}: {
-  children: React.ReactNode;
-} & Partial<ImageContextValue>): react_jsx_runtime7.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 };