@lonik/oh-image 2.2.1 → 2.2.2

package/dist/cloudflare.d.ts

@@ -1,30 +1,34 @@
-import { s as ImageLoaderOptions } from "./index-Dk2EZWhe.js";
+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";
 
 //#region src/loaders/cloudflare/cloudflare-options.d.ts
 type CloudflareTransforms = BaseLoaderTransforms & Partial<{
-  anim?: boolean;
-  background?: string;
-  blur?: number;
-  brightness?: number;
-  compression?: boolean;
-  contrast?: number;
-  dpr?: number;
-  dprs?: number[];
-  fit?: "scale-down" | "contain" | "cover" | "crop" | "pad";
-  format?: "auto" | "avif" | "webp" | "json";
-  gamma?: number;
-  gravity?: "auto" | "left" | "right" | "top" | "bottom" | string;
-  height?: number;
-  width?: number;
-  widths?: number[];
-  maxWidth?: number;
-  metadata?: "keep" | "copyright" | "none";
-  quality?: number;
-  rotate?: number;
-  sharpen?: number;
-  trim?: string;
+  anim: boolean;
+  background: string;
+  blur: number;
+  brightness: number;
+  compression: "fast";
+  contrast: number;
+  dpr: number;
+  flip: "h" | "v" | "hv";
+  fit: "scale-down" | "contain" | "cover" | "crop" | "pad" | "squeeze";
+  format: "auto" | "avif" | "webp" | "jpeg" | "baseline-jpeg";
+  gamma: number;
+  gravity: "auto" | "left" | "right" | "top" | "bottom" | string;
+  height: number;
+  width: number;
+  maxWidth: number;
+  metadata: "keep" | "copyright" | "none";
+  quality: number | "high" | "medium-high" | "medium-low" | "low";
+  rotate: number;
+  sharpen: number;
+  trim: [number, number, number, number];
+  zoom: number;
+  saturation: number;
+  segment: "foreground";
+  onerror: "redirect";
+  "slow-connection-quality": number;
 }>;
 type CloudflareOptions = BaseLoaderOptions<CloudflareTransforms>;
 type CloudflareGlobalOptions = BaseGlobalLoaderOptions<CloudflareTransforms>;

package/dist/cloudflare.js

@@ -1,4 +1,4 @@
-import { t as loaderFactory } from "./loader-factory-dkIeg239.js";
+import { t as loaderFactory } from "./loader-factory-C1301CZd.js";
 
 //#region src/loaders/cloudflare/cloudflare-loader.tsx
 const { useLoaderContext: useCloudflareContext, LoaderProvider: CloudflareLoaderProvider, useLoader: useCloudflareLoader } = loaderFactory({
@@ -9,7 +9,9 @@ const { useLoaderContext: useCloudflareContext, LoaderProvider: CloudflareLoader
 	}
 }, {
 	optionSeparator: "=",
-	paramSeparator: ","
+	paramSeparator: ",",
+	passBooleanValue: true,
+	customResolver: { trim: (key, value) => `${key}=${value.join(";")}` }
 }, ({ path, params, imageOptions }) => `${path}/cdn-cgi/image/${params}/${imageOptions.src}`);
 
 //#endregion

package/dist/cloudinary.d.ts

@@ -1,6 +1,6 @@
-import { s as ImageLoaderOptions } from "./index-Dk2EZWhe.js";
+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_runtime3 from "react/jsx-runtime";
+import * as react_jsx_runtime0 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";
@@ -106,6 +106,6 @@ declare const useCloudinaryContext: () => CloudinaryGlobalOptions, CloudinaryLoa
     ...props
   }: {
     children: React.ReactNode;
-  } & Partial<CloudinaryGlobalOptions>) => react_jsx_runtime3.JSX.Element, useCloudinaryLoader: (options?: CloudinaryGlobalOptions | undefined) => (() => undefined) | ((imageOptions: ImageLoaderOptions) => string);
+  } & Partial<CloudinaryGlobalOptions>) => react_jsx_runtime0.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-dkIeg239.js";
+import { t as loaderFactory } from "./loader-factory-C1301CZd.js";
 
 //#region src/loaders/cloudinary/cloudinary-loader.tsx
 function customResolver(key, value) {
@@ -17,13 +17,13 @@ const { useLoaderContext: useCloudinaryContext, LoaderProvider: CloudinaryLoader
 	widthKey: "w",
 	heightKey: "h",
 	orders: {
-		b_auto: [
+		b_auto: { orders: [
 			"mode",
 			"number",
 			"direction",
 			"color"
-		],
-		b_gen_fill: ["prompt", "seed"]
+		] },
+		b_gen_fill: { orders: ["prompt", "seed"] }
 	},
 	customResolver: {
 		art: customResolver,

package/dist/imgproxy.d.ts

@@ -1,11 +1,12 @@
-import { s as ImageLoaderOptions } from "./index-Dk2EZWhe.js";
+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_runtime4 from "react/jsx-runtime";
+import * as react_jsx_runtime1 from "react/jsx-runtime";
 
 //#region src/loaders/imgproxy/imgproxy-options.d.ts
 type ResizeType = "fit" | "fill" | "fill-down" | "force" | "auto";
 type ResizeAlgorithm = "nearest" | "linear" | "cubic" | "lanczos2" | "lanczos3";
 type GravityType = "no" | "so" | "ea" | "we" | "noea" | "nowe" | "soea" | "sowe" | "ce";
+type HashSumTypes = "none" | "md5" | "sha1" | "sha256" | "sha512";
 interface ResizeOptions {
   resizing_type?: ResizeType;
   width?: number;
@@ -31,7 +32,7 @@ interface GravityOptions {
 interface CropOptions {
   width: number;
   height: number;
-  gravity?: GravityType;
+  gravity?: GravityOptions;
 }
 interface TrimOptions {
   threshold: number;
@@ -57,11 +58,11 @@ interface AdjustOptions {
 }
 interface BlurDetectionsOptions {
   sigma: number;
-  class_names: string[];
+  class_names?: string[];
 }
 interface DrawDetectionsOptions {
   draw: boolean;
-  class_names: string[];
+  class_names?: string[];
 }
 interface WatermarkOptions {
   opacity: number;
@@ -75,7 +76,7 @@ interface WatermarkSizeOptions {
   height: number;
 }
 interface UnsharpeningOptions {
-  mode?: string;
+  mode: "auto" | "sharpen" | "none" | "always";
   weight?: number;
   dividor?: number;
 }
@@ -104,47 +105,47 @@ type ImgproxyTransforms = BaseLoaderTransforms & Partial<{
    * Defines the resizing type, width, height, enlarge, and extend.
    * All arguments are optional and can be omitted to use their default values.
    */
-  resize?: ResizeOptions;
+  resize: ResizeOptions;
   /**
    * Defines the width, height, enlarge, and extend.
    * All arguments are optional and can be omitted to use their default values.
    */
-  size?: SizeOptions;
+  size: SizeOptions;
   /**
    * Defines how imgproxy will resize the source image.
    * Default: fit
    */
-  resizing_type?: ResizeType;
+  resizing_type: ResizeType;
   /**
    * Defines the algorithm that imgproxy will use for resizing.
    * Default: lanczos3
    */
-  resizing_algorithm?: ResizeAlgorithm;
+  resizing_algorithm: ResizeAlgorithm;
   /**
    * Defines the width of the resulting image.
    * Default: 0
    */
-  width?: number;
+  width: number;
   /**
    * Defines the height of the resulting image.
    * Default: 0
    */
-  height?: number;
+  height: number;
   /**
    * Defines the minimum width of the resulting image.
    * Default: 0
    */
-  "min-width"?: number;
+  "min-width": number;
   /**
    * Defines the minimum height of the resulting image.
    * Default: 0
    */
-  "min-height"?: number;
+  "min-height": number;
   /**
    * When set, imgproxy will multiply the image dimensions according to these factors.
    * Default: 1
    */
-  zoom?: number | {
+  zoom: number | {
     x: number;
     y: number;
   };
@@ -152,215 +153,226 @@ type ImgproxyTransforms = BaseLoaderTransforms & Partial<{
    * When set, imgproxy will multiply the image dimensions according to this factor for HiDPI (Retina) devices.
    * Default: 1
    */
-  dpr?: number;
+  dpr: number;
   /**
    * When set to true, imgproxy will enlarge the image if it is smaller than the given size.
    * Default: false
    */
-  enlarge?: boolean;
+  enlarge: boolean;
   /**
    * When set to true, imgproxy will extend the image if it is smaller than the given size.
    * Can also specify gravity.
    * Default: false:ce:0:0
    */
-  extend?: boolean | ExtendOptions;
-  /**
-   * When imgproxy needs to cut some parts of the image, it is guided by the gravity option.
-   * Default: ce:0:0
-   */
-  gravity?: GravityOptions;
-  /**
-   * Defines an area of the image to be processed (crop before resize).
-   */
-  crop?: CropOptions;
+  extend: boolean | ExtendOptions;
+  gravity: GravityOptions;
+  crop: CropOptions;
   /**
    * Removes surrounding background.
    */
-  trim?: TrimOptions;
+  trim: TrimOptions;
   /**
    * Defines padding size.
    */
-  padding?: PaddingOptions;
+  padding: PaddingOptions;
   /**
    * When set to true, imgproxy will automatically rotate images based on the EXIF Orientation parameter.
    */
-  auto_rotate?: boolean;
+  auto_rotate: boolean;
   /**
    * Rotates the image on the specified angle.
    * Default: 0
    */
-  rotate?: number;
+  rotate: number;
   /**
    * When set, imgproxy will fill the resulting image background with the specified color.
    * Default: disabled
    */
-  background?: string | BackgroundOptions;
+  background: string | BackgroundOptions;
   /**
    * Adds an alpha channel to background.
    * Default: 1
    */
-  background_alpha?: number;
+  background_alpha: number;
   /**
    * Defines the brightness, contrast, and saturation.
    */
-  adjust?: AdjustOptions;
+  adjust: AdjustOptions;
   /**
    * When set, imgproxy will adjust brightness of the resulting image.
    * Default: 0
    */
-  brightness?: number;
+  brightness: number;
   /**
    * When set, imgproxy will adjust the contrast of the resulting image.
    * Default: 1
    */
-  contrast?: number;
+  contrast: number;
   /**
    * When set, imgproxy will adjust saturation of the resulting image.
    * Default: 1
    */
-  saturation?: number;
+  saturation: number;
   /**
    * When set, imgproxy will apply a gaussian blur filter to the resulting image.
    * Default: disabled
    */
-  blur?: number;
+  blur: number;
   /**
    * When set, imgproxy will apply the sharpen filter to the resulting image.
    * Default: disabled
    */
-  sharpen?: number;
+  sharpen: number;
   /**
    * When set, imgproxy will apply the pixelate filter to the resulting image.
    * Default: disabled
    */
-  pixelate?: number;
+  pixelate: number;
   /**
    * Allows redefining unsharpening options.
    */
-  unsharpening?: UnsharpeningOptions;
+  unsharpening: UnsharpeningOptions;
   /**
    * imgproxy detects objects of the provided classes and blurs them.
    */
-  blur_detections?: BlurDetectionsOptions;
+  blur_detections: BlurDetectionsOptions;
   /**
    * When draw is set to true, imgproxy detects objects of the provided classes and draws their bounding boxes.
    */
-  draw_detections?: DrawDetectionsOptions;
+  draw_detections: DrawDetectionsOptions;
   /**
    * Places a watermark on the processed image.
    * Default: disabled
    */
-  watermark?: WatermarkOptions;
+  watermark: WatermarkOptions;
   /**
    * When set, imgproxy will use the image from the specified URL as a watermark.
    * Default: blank
    */
-  watermark_url?: string;
+  watermark_url: string;
   /**
    * When set, imgproxy will generate an image from the provided text and use it as a watermark.
    * Default: blank
    */
-  watermark_text?: string;
+  watermark_text: string;
   /**
    * Defines the desired width and height of the watermark.
    * Default: 0:0
    */
-  watermark_size?: WatermarkSizeOptions;
-  /**
-   * When set, imgproxy will prepend a <style> node with the provided content to the <svg> node.
-   * Default: blank
-   */
-  style?: string;
+  watermark_size: WatermarkSizeOptions;
+  style: string;
   /**
    * When set to true, imgproxy will strip the metadata (EXIF, IPTC, etc.) on JPEG and WebP output images.
    */
-  strip_metadata?: boolean;
+  strip_metadata: boolean;
   /**
    * When set to true, imgproxy will not remove copyright info while stripping metadata.
    */
-  keep_copyright?: boolean;
+  keep_copyright: boolean;
   /**
    * When set to true, imgproxy will transform the embedded color profile (ICC) to sRGB and remove it from the image.
    */
-  strip_color_profile?: boolean;
+  strip_color_profile: boolean;
   /**
    * When set to true and the source image has an embedded thumbnail, imgproxy will always use the embedded thumbnail.
    */
-  enforce_thumbnail?: boolean;
+  enforce_thumbnail: boolean;
   /**
    * When set to true, imgproxy will return attachment in the Content-Disposition header.
    */
-  return_attachment?: boolean;
+  return_attachment: boolean;
   /**
    * Redefines quality of the resulting image, as a percentage.
    * Default: 0
    */
-  quality?: number;
+  quality: number;
   /**
    * Adds or redefines IMGPROXY_FORMAT_QUALITY values.
    */
-  format_quality?: Record<string, number>;
+  format_quality: Record<string, number>;
   /**
    * Redefines autoquality settings.
    */
-  autoquality?: AutoqualityOptions;
+  autoquality: AutoqualityOptions;
   /**
    * When set, imgproxy automatically degrades the quality of the image until the image size is under the specified amount of bytes.
    * Default: 0
    */
-  max_bytes?: number;
+  max_bytes: number;
   /**
    * Allows redefining JPEG saving options.
    */
-  jpeg_options?: JpegOptions;
+  jpeg_options: JpegOptions;
   /**
    * Allows redefining PNG saving options.
    */
-  png_options?: PngOptions;
+  png_options: PngOptions;
   /**
    * Specifies the resulting image format.
    * Default: jpg
    */
-  format?: string;
-  /**
-   * When a source image supports pagination or animation, this option allows specifying the page to use it on.
-   * Default: 0
-   */
-  page?: number;
+  format: string;
   /**
    * Allows redefining IMGPROXY_VIDEO_THUMBNAIL_SECOND config.
    */
-  video_thumbnail_second?: number;
+  video_thumbnail_second: number;
   /**
    * You can use a custom fallback image by specifying its URL.
    * Default: blank
    */
-  fallback_image_url?: string;
+  fallback_image_url: string;
   /**
    * When set, imgproxy will skip the processing of the listed formats.
    * Default: empty
    */
-  skip_processing?: string[];
+  skip_processing: string[];
   /**
    * Cache buster doesn't affect image processing but its changing allows for bypassing the CDN, proxy server and browser cache.
    * Default: empty
    */
-  cachebuster?: string;
+  cachebuster: string;
   /**
    * When set, imgproxy will check the provided unix timestamp and return 404 when expired.
    * Default: empty
    */
-  expires?: number;
+  expires: number;
   /**
    * Defines a filename for the Content-Disposition header.
    * Default: empty
    */
-  filename?: string;
+  filename: string;
   /**
    * Defines a list of presets to be used by imgproxy.
    * Default: empty
    */
-  preset?: string[];
+  preset: string[];
+  dpi: number;
+  duotone: {
+    intensity?: number;
+    color1?: string;
+    color2?: string;
+  };
+  extend_aspect_ratio: {
+    extend: boolean;
+    gravity?: GravityOptions;
+  };
+  gradient: {
+    opacity: number;
+    color?: string;
+    direction?: string;
+    start?: number;
+    stop?: number;
+  };
+  hashsum: {
+    type: HashSumTypes;
+    hashsum: string;
+  };
+  monochrome: {
+    intensity: number;
+    color?: string;
+  };
+  raw: boolean;
+  watermark_shadow: number;
 }>;
 type ImgproxyOptions = BaseLoaderOptions<ImgproxyTransforms>;
 type ImgproxyGlobalOptions = BaseGlobalLoaderOptions<ImgproxyTransforms>;
@@ -371,6 +383,6 @@ declare const useImgproxyContext: () => ImgproxyGlobalOptions, ImgproxyLoaderPro
     ...props
   }: {
     children: React.ReactNode;
-  } & Partial<ImgproxyGlobalOptions>) => react_jsx_runtime4.JSX.Element, useImgproxyLoader: (options?: ImgproxyGlobalOptions | undefined) => (() => undefined) | ((imageOptions: ImageLoaderOptions) => string);
+  } & Partial<ImgproxyGlobalOptions>) => react_jsx_runtime1.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-dkIeg239.js";
+import { t as loaderFactory } from "./loader-factory-C1301CZd.js";
 
 //#region src/loaders/imgproxy/imgproxy-loader.tsx
 const { useLoaderContext: useImgproxyContext, LoaderProvider: ImgproxyLoaderProvider, useLoader: useImgproxyLoader } = loaderFactory({
@@ -8,91 +8,124 @@ const { useLoaderContext: useImgproxyContext, LoaderProvider: ImgproxyLoaderProv
 		format: "webp"
 	}
 }, {
+	passBooleanValue: true,
 	optionSeparator: ":",
 	paramSeparator: "/",
+	customResolver: { format_quality: (key, value) => {
+		return `${key}:${Object.entries(value).flatMap((entry) => entry).join(":")}`;
+	} },
 	orders: {
-		resize: [
+		hashsum: { orders: ["type", "hashsum"] },
+		duotone: { orders: [
+			"intensity",
+			"color1",
+			"color2"
+		] },
+		gradient: { orders: [
+			"opacity",
+			"color",
+			"direction",
+			"start",
+			"stop"
+		] },
+		monochrome: { orders: ["intensity", "color"] },
+		extend_aspect_ratio: {
+			orders: ["extend", "gravity"],
+			childrenOrders: { gravity: { orders: [
+				"type",
+				"x_offset",
+				"y_offset"
+			] } }
+		},
+		resize: { orders: [
 			"resizing_type",
 			"width",
 			"height",
 			"enlarge",
 			"extend"
-		],
-		size: [
+		] },
+		size: { orders: [
 			"width",
 			"height",
 			"enlarge",
 			"extend"
-		],
-		extend: ["extend", "gravity"],
-		gravity: [
+		] },
+		extend: { orders: ["extend", "gravity"] },
+		gravity: { orders: [
 			"type",
 			"x_offset",
 			"y_offset"
-		],
-		crop: [
-			"width",
-			"height",
-			"gravity"
-		],
-		trim: [
+		] },
+		crop: {
+			orders: [
+				"width",
+				"height",
+				"gravity"
+			],
+			childrenOrders: { gravity: { orders: [
+				"type",
+				"x_offset",
+				"y_offset"
+			] } }
+		},
+		trim: { orders: [
 			"threshold",
 			"color",
 			"equal_hor",
 			"equal_ver"
-		],
-		padding: [
+		] },
+		padding: { orders: [
 			"top",
 			"right",
 			"bottom",
 			"left"
-		],
-		background: [
+		] },
+		background: { orders: [
 			"r",
 			"g",
 			"b"
-		],
-		adjust: [
+		] },
+		adjust: { orders: [
 			"brightness",
 			"contrast",
 			"saturation"
-		],
-		blur_detections: ["sigma", "class_names"],
-		draw_detections: ["draw", "class_names"],
-		watermark: [
+		] },
+		blur_detections: { orders: ["sigma", "class_names"] },
+		draw_detections: { orders: ["draw", "class_names"] },
+		watermark: { orders: [
 			"opacity",
 			"position",
 			"x_offset",
 			"y_offset",
 			"scale"
-		],
-		watermark_size: ["width", "height"],
-		unsharpening: [
+		] },
+		watermark_size: { orders: ["width", "height"] },
+		unsharpening: { orders: [
 			"mode",
 			"weight",
 			"dividor"
-		],
-		autoquality: [
+		] },
+		autoquality: { orders: [
 			"method",
 			"target",
 			"min_quality",
 			"max_quality",
 			"allowed_error"
-		],
-		jpeg_options: [
+		] },
+		jpeg_options: { orders: [
 			"progressive",
 			"no_subsample",
 			"trellis_quant",
 			"overshoot_deringing",
 			"optimize_scans",
 			"quant_table"
-		],
-		png_options: [
+		] },
+		png_options: { orders: [
 			"interlaced",
 			"quantize",
 			"quantization_colors"
-		],
-		zoom: ["x", "y"]
+		] },
+		zoom: { orders: ["x", "y"] }
 	}
 }, ({ path, params, imageOptions }) => `${path}/${params}/plain/${imageOptions.src}`);
 

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

@@ -1,5 +1,5 @@
 import { ImgHTMLAttributes } from "react";
-import * as react_jsx_runtime1 from "react/jsx-runtime";
+import * as react_jsx_runtime4 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_runtime1.JSX.Element;
+declare function Image(props: ImageProps): react_jsx_runtime4.JSX.Element;
 //#endregion
 //#region src/react/image-factory.d.ts
-declare function __imageFactory(defaultProps: any): (props: any) => react_jsx_runtime1.JSX.Element;
+declare function __imageFactory(defaultProps: any): (props: any) => react_jsx_runtime4.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_runtime1.JSX.Element;
+} & Partial<ImageContextValue>): react_jsx_runtime4.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/{loader-factory-dkIeg239.js → loader-factory-C1301CZd.js}

@@ -3,11 +3,26 @@ import { jsx } from "react/jsx-runtime";
 
 //#region src/loaders/transforms-resolver.ts
 const stringifyOptions = (opCode, values, separator) => {
-	return [opCode, ...values.map((v) => v == null ? "" : encodeURIComponent(v))].join(separator);
+	return [opCode, ...values.map((v) => {
+		if (v == null) return "";
+		if (Array.isArray(v)) return v.map((val) => encodeURIComponent(val)).join(separator);
+		return encodeURIComponent(v);
+	})].join(separator);
 };
-const resolveObjectParam = (key, value, order, separator) => {
-	if (!order) return;
-	return stringifyOptions(key, order.map((k) => value[k]), separator);
+const resolveObjectParam = (key, value, orderConfig, separator) => {
+	if (!orderConfig) return;
+	const { orders, childrenOrders } = orderConfig;
+	return [key, ...orders.map((k) => {
+		const val = value[k];
+		if (val === void 0 || val === null) return "";
+		if (childrenOrders && childrenOrders[k] && typeof val === "object" && !Array.isArray(val)) return childrenOrders[k].orders.map((childKey) => val[childKey]).map((v) => {
+			if (v == null) return "";
+			if (Array.isArray(v)) return v.map((val$1) => encodeURIComponent(String(val$1))).join(separator);
+			return encodeURIComponent(String(v));
+		}).join(separator);
+		if (Array.isArray(val)) return val.map((v) => encodeURIComponent(String(v))).join(separator);
+		return encodeURIComponent(String(val));
+	})].join(separator);
 };
 function resolveTransform(transforms, config) {
 	if (!transforms) return [];
@@ -26,13 +41,16 @@ function resolveTransform(transforms, config) {
 		}
 		switch (type) {
 			case "boolean":
-				if (value === true) params.push(key);
+				if (value === true) if (config.passBooleanValue) params.push(stringifyOptions(key, [value], config.optionSeparator));
+				else params.push(key);
 				break;
-			case "object": {
-				const objectParams = resolveObjectParam(key, value, config?.orders?.[key], config.optionSeparator);
-				if (objectParams) params.push(objectParams);
+			case "object":
+				if (Array.isArray(value)) params.push(stringifyOptions(key, [value], config.optionSeparator));
+				else {
+					const objectParams = resolveObjectParam(key, value, config?.orders?.[key], config.optionSeparator);
+					if (objectParams) params.push(objectParams);
+				}
 				break;
-			}
 			default:
 				params.push(stringifyOptions(key, [value], config.optionSeparator));
 				break;

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-Dk2EZWhe.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-BXVRSiZA.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.1",
+  "version": "2.2.2",
   "description": "A React component library for optimized image handling.",
   "author": "Luka Onikadze <lukonik@gmail.com>",
   "license": "MIT",
@@ -97,9 +97,11 @@
     "vite": "^7.3.0",
     "vite-plugin-inspect": "^11.3.3",
     "vite-tsconfig-paths": "^6.1.1",
-    "vitest": "^4.0.16"
+    "vitest": "^4.0.16",
+    "vitest-browser-react": "^2.0.5"
   },
   "dependencies": {
+    "@vitest/browser-playwright": "^4.0.18",
     "p-limit": "^7.3.0",
     "query-string": "^9.3.1"
   },