@lonik/oh-image 2.5.0 → 2.7.0

package/dist/contentful.d.ts

@@ -1,6 +1,7 @@
-import { s as ImageLoaderOptions } from "./index-DObZcazO.js";
-import { n as BaseLoaderOptions, t as BaseGlobalLoaderOptions } from "./base-loader-options-CVQjMJcC.js";
-import * as react_jsx_runtime2 from "react/jsx-runtime";
+import { n as ImageLoaderOptions } from "./types-BEgZ3W30.js";
+import "./index-C-1t5-gk.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/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_runtime2.JSX.Element, useContentfulLoader: (options?: ContentfulGlobalOptions | undefined) => (() => undefined) | ((imageOptions: ImageLoaderOptions) => string);
+  } & Partial<ContentfulGlobalOptions>) => react_jsx_runtime8.JSX.Element, useContentfulLoader: (options?: ContentfulGlobalOptions | undefined) => (() => undefined) | ((imageOptions: ImageLoaderOptions) => string);
 //#endregion
 export { ContentfulGlobalOptions, ContentfulLoaderProvider, ContentfulOptions, ContentfulTransforms, useContentfulContext, useContentfulLoader };

package/dist/contentful.js

@@ -1,4 +1,4 @@
-import { t as loaderFactory } from "./loader-factory-C6GaON4i.js";
+import { t as loaderFactory } from "./loader-factory-6EOKnqj1.js";
 
 //#region src/loaders/contentful/contentful-loader.tsx
 const { useLoaderContext: useContentfulContext, LoaderProvider: ContentfulLoaderProvider, useLoader: useContentfulLoader } = loaderFactory({

package/dist/imgproxy.d.ts

@@ -1,5 +1,6 @@
-import { s as ImageLoaderOptions } from "./index-DObZcazO.js";
-import { n as BaseLoaderOptions, t as BaseGlobalLoaderOptions } from "./base-loader-options-CVQjMJcC.js";
+import { n as ImageLoaderOptions } from "./types-BEgZ3W30.js";
+import "./index-C-1t5-gk.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

package/dist/imgproxy.js

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

package/dist/index-C-1t5-gk.d.ts

@@ -0,0 +1,52 @@
+import { r as ImageProps, t as ImageLoader } from "./types-BEgZ3W30.js";
+import * as react_jsx_runtime6 from "react/jsx-runtime";
+
+//#region src/react/image.d.ts
+declare function Image(props: ImageProps): react_jsx_runtime6.JSX.Element;
+//#endregion
+//#region src/react/image-factory.d.ts
+declare function __imageFactory(defaultProps: any): (props: any) => react_jsx_runtime6.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_runtime6.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-DObZcazO.js";
-import { n as BaseLoaderOptions, t as BaseGlobalLoaderOptions } from "./base-loader-options-CVQjMJcC.js";
+import { n as ImageLoaderOptions } from "./types-BEgZ3W30.js";
+import "./index-C-1t5-gk.js";
+import { n as BaseLoaderOptions, t as BaseGlobalLoaderOptions } from "./base-loader-options-DCLkYppY.js";
 import * as react_jsx_runtime7 from "react/jsx-runtime";
 
 //#region src/loaders/kontent/kontent-options.d.ts

package/dist/kontent.js

@@ -1,4 +1,4 @@
-import { t as loaderFactory } from "./loader-factory-C6GaON4i.js";
+import { t as loaderFactory } from "./loader-factory-6EOKnqj1.js";
 
 //#region src/loaders/kontent/kontent-loader.tsx
 const { useLoaderContext: useKontentContext, LoaderProvider: KontentLoaderProvider, useLoader: useKontentLoader } = loaderFactory({

package/dist/netlify.d.ts

@@ -0,0 +1,26 @@
+import { n as ImageLoaderOptions } from "./types-BEgZ3W30.js";
+import "./index-C-1t5-gk.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/netlify/netlify-options.d.ts
+type NetlifyTransforms = Partial<{
+  w: number;
+  h: number;
+  fit: "contain" | "cover" | "fill";
+  position: "top" | "bottom" | "left" | "right" | "center";
+  fm: "avif" | "webp" | "jpg" | "png" | "gif" | "blurhash";
+  q: number;
+}>;
+type NetlifyOptions = BaseLoaderOptions<NetlifyTransforms>;
+type NetlifyGlobalOptions = BaseGlobalLoaderOptions<NetlifyTransforms>;
+//#endregion
+//#region src/loaders/netlify/netlify-loader.d.ts
+declare const useNetlifyContext: () => NetlifyGlobalOptions, NetlifyLoaderProvider: ({
+    children,
+    ...props
+  }: {
+    children: React.ReactNode;
+  } & Partial<NetlifyGlobalOptions>) => react_jsx_runtime0.JSX.Element, useNetlifyLoader: (options?: NetlifyGlobalOptions | undefined) => (() => undefined) | ((imageOptions: ImageLoaderOptions) => string);
+//#endregion
+export { NetlifyGlobalOptions, NetlifyLoaderProvider, NetlifyOptions, NetlifyTransforms, useNetlifyContext, useNetlifyLoader };

package/dist/netlify.js

@@ -0,0 +1,20 @@
+import { t as loaderFactory } from "./loader-factory-6EOKnqj1.js";
+
+//#region src/loaders/netlify/netlify-loader.tsx
+const { useLoaderContext: useNetlifyContext, LoaderProvider: NetlifyLoaderProvider, useLoader: useNetlifyLoader } = loaderFactory({
+	path: "/.netlify/images",
+	transforms: { fm: "webp" },
+	placeholder: { fm: "blurhash" }
+}, {
+	optionSeparator: "=",
+	paramSeparator: "&",
+	widthKey: "w",
+	heightKey: "h"
+}, ({ path, params, imageOptions }) => {
+	const searchParams = new URLSearchParams(params);
+	searchParams.set("url", imageOptions.src);
+	return `${path}?${searchParams.toString()}`;
+});
+
+//#endregion
+export { NetlifyLoaderProvider, useNetlifyContext, useNetlifyLoader };

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-DObZcazO.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-C-1t5-gk.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-DObZcazO.js";
-import { n as BaseLoaderOptions, t as BaseGlobalLoaderOptions } from "./base-loader-options-CVQjMJcC.js";
-import * as react_jsx_runtime6 from "react/jsx-runtime";
+import { n as ImageLoaderOptions } from "./types-BEgZ3W30.js";
+import "./index-C-1t5-gk.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/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_runtime6.JSX.Element, useWordpressLoader: (options?: WordpressGlobalOptions | undefined) => (() => undefined) | ((imageOptions: ImageLoaderOptions) => string);
+  } & Partial<WordpressGlobalOptions>) => react_jsx_runtime1.JSX.Element, useWordpressLoader: (options?: WordpressGlobalOptions | undefined) => (() => undefined) | ((imageOptions: ImageLoaderOptions) => string);
 //#endregion
 export { WordpressGlobalOptions, WordpressLoaderProvider, WordpressOptions, WordpressTransforms, useWordpressContext, useWordpressLoader };

package/dist/wordpress.js

@@ -1,4 +1,4 @@
-import { t as loaderFactory } from "./loader-factory-C6GaON4i.js";
+import { t as loaderFactory } from "./loader-factory-6EOKnqj1.js";
 
 //#region src/loaders/wordpress/wordpress-loader.tsx
 const { useLoaderContext: useWordpressContext, LoaderProvider: WordpressLoaderProvider, useLoader: useWordpressLoader } = loaderFactory({

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lonik/oh-image",
   "type": "module",
-  "version": "2.5.0",
+  "version": "2.7.0",
   "description": "A React component library for optimized image handling.",
   "author": "Luka Onikadze <lukonik@gmail.com>",
   "license": "MIT",
@@ -48,6 +48,10 @@
       "types": "./dist/wordpress.d.ts",
       "default": "./dist/wordpress.js"
     },
+    "./netlify": {
+      "types": "./dist/netlify.d.ts",
+      "default": "./dist/netlify.js"
+    },
     "./client": {
       "types": "./dist/client.d.ts"
     }
@@ -77,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-DObZcazO.d.ts

@@ -1,80 +0,0 @@
-import { ImgHTMLAttributes } from "react";
-import * as react_jsx_runtime3 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_runtime3.JSX.Element;
-//#endregion
-//#region src/react/image-factory.d.ts
-declare function __imageFactory(defaultProps: any): (props: any) => react_jsx_runtime3.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_runtime3.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 };