@heroui/image 2.2.7 → 2.2.10

package/dist/chunk-3TCFMHK3.mjs

@@ -0,0 +1,52 @@
+"use client";
+import {
+  useImage
+} from "./chunk-Q3TXVV4U.mjs";
+
+// src/image.tsx
+import { cloneElement } from "react";
+import { forwardRef } from "@heroui/system";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Image = forwardRef((props, ref) => {
+  const {
+    Component,
+    domRef,
+    slots,
+    classNames,
+    isBlurred,
+    isZoomed,
+    fallbackSrc,
+    removeWrapper,
+    disableSkeleton,
+    getImgProps,
+    getWrapperProps,
+    getBlurredImgProps
+  } = useImage({
+    ...props,
+    ref
+  });
+  const img = /* @__PURE__ */ jsx(Component, { ref: domRef, ...getImgProps() });
+  if (removeWrapper) {
+    return img;
+  }
+  const zoomed = /* @__PURE__ */ jsx("div", { className: slots.zoomedWrapper({ class: classNames == null ? void 0 : classNames.zoomedWrapper }), children: img });
+  if (isBlurred) {
+    return /* @__PURE__ */ jsxs("div", { ...getWrapperProps(), children: [
+      isZoomed ? zoomed : img,
+      cloneElement(img, getBlurredImgProps())
+    ] });
+  }
+  if (isZoomed || !disableSkeleton || fallbackSrc) {
+    return /* @__PURE__ */ jsxs("div", { ...getWrapperProps(), children: [
+      " ",
+      isZoomed ? zoomed : img
+    ] });
+  }
+  return img;
+});
+Image.displayName = "HeroUI.Image";
+var image_default = Image;
+
+export {
+  image_default
+};

package/dist/chunk-Q3TXVV4U.mjs

@@ -0,0 +1,126 @@
+"use client";
+
+// src/use-image.ts
+import { useCallback } from "react";
+import { mapPropsVariants, useProviderContext } from "@heroui/system";
+import { image } from "@heroui/theme";
+import { useDOMRef } from "@heroui/react-utils";
+import { clsx, dataAttr, objectToDeps } from "@heroui/shared-utils";
+import { useImage as useImageBase } from "@heroui/use-image";
+import { useMemo } from "react";
+function useImage(originalProps) {
+  var _a, _b;
+  const globalContext = useProviderContext();
+  const [props, variantProps] = mapPropsVariants(originalProps, image.variantKeys);
+  const {
+    ref,
+    as,
+    src,
+    className,
+    classNames,
+    loading,
+    isBlurred,
+    fallbackSrc,
+    isLoading: isLoadingProp,
+    disableSkeleton = !!fallbackSrc,
+    removeWrapper = false,
+    onError,
+    onLoad,
+    srcSet,
+    sizes,
+    crossOrigin,
+    ...otherProps
+  } = props;
+  const imageStatus = useImageBase({
+    src,
+    loading,
+    onError,
+    onLoad,
+    ignoreFallback: false,
+    srcSet,
+    sizes,
+    crossOrigin
+  });
+  const disableAnimation = (_b = (_a = originalProps.disableAnimation) != null ? _a : globalContext == null ? void 0 : globalContext.disableAnimation) != null ? _b : false;
+  const isImgLoaded = imageStatus === "loaded" && !isLoadingProp;
+  const isLoading = imageStatus === "loading" || isLoadingProp;
+  const isZoomed = originalProps.isZoomed;
+  const Component = as || "img";
+  const domRef = useDOMRef(ref);
+  const { w, h } = useMemo(() => {
+    return {
+      w: props.width ? typeof props.width === "number" ? `${props.width}px` : props.width : "fit-content",
+      h: props.height ? typeof props.height === "number" ? `${props.height}px` : props.height : "auto"
+    };
+  }, [props == null ? void 0 : props.width, props == null ? void 0 : props.height]);
+  const showFallback = (!src || !isImgLoaded) && !!fallbackSrc;
+  const showSkeleton = isLoading && !disableSkeleton;
+  const slots = useMemo(
+    () => image({
+      ...variantProps,
+      disableAnimation,
+      showSkeleton
+    }),
+    [objectToDeps(variantProps), disableAnimation, showSkeleton]
+  );
+  const baseStyles = clsx(className, classNames == null ? void 0 : classNames.img);
+  const getImgProps = (props2 = {}) => {
+    const imgStyles = clsx(baseStyles, props2 == null ? void 0 : props2.className);
+    return {
+      src,
+      ref: domRef,
+      "data-loaded": dataAttr(isImgLoaded),
+      className: slots.img({ class: imgStyles }),
+      loading,
+      srcSet,
+      sizes,
+      crossOrigin,
+      ...otherProps,
+      style: {
+        // img has `height: auto` by default
+        // passing the custom height here to override if it is specified
+        ...(otherProps == null ? void 0 : otherProps.height) && { height: h },
+        ...props2.style,
+        ...otherProps.style
+      }
+    };
+  };
+  const getWrapperProps = useCallback(() => {
+    const fallbackStyle = showFallback ? {
+      backgroundImage: `url(${fallbackSrc})`
+    } : {};
+    return {
+      className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }),
+      style: {
+        ...fallbackStyle,
+        maxWidth: w
+      }
+    };
+  }, [slots, showFallback, fallbackSrc, classNames == null ? void 0 : classNames.wrapper, w]);
+  const getBlurredImgProps = useCallback(() => {
+    return {
+      src,
+      "aria-hidden": dataAttr(true),
+      className: slots.blurredImg({ class: classNames == null ? void 0 : classNames.blurredImg })
+    };
+  }, [slots, src, classNames == null ? void 0 : classNames.blurredImg]);
+  return {
+    Component,
+    domRef,
+    slots,
+    classNames,
+    isBlurred,
+    disableSkeleton,
+    fallbackSrc,
+    removeWrapper,
+    isZoomed,
+    isLoading,
+    getImgProps,
+    getWrapperProps,
+    getBlurredImgProps
+  };
+}
+
+export {
+  useImage
+};

package/dist/image.d.mts

@@ -0,0 +1,12 @@
+import * as _heroui_system from '@heroui/system';
+import { UseImageProps } from './use-image.mjs';
+import 'tailwind-variants';
+import 'react';
+import '@heroui/theme';
+import '@heroui/react-utils';
+
+interface ImageProps extends Omit<UseImageProps, "showSkeleton"> {
+}
+declare const Image: _heroui_system.InternalForwardRefRenderFunction<"img", ImageProps, never>;
+
+export { type ImageProps, Image as default };

package/dist/image.d.ts

@@ -0,0 +1,12 @@
+import * as _heroui_system from '@heroui/system';
+import { UseImageProps } from './use-image.js';
+import 'tailwind-variants';
+import 'react';
+import '@heroui/theme';
+import '@heroui/react-utils';
+
+interface ImageProps extends Omit<UseImageProps, "showSkeleton"> {
+}
+declare const Image: _heroui_system.InternalForwardRefRenderFunction<"img", ImageProps, never>;
+
+export { type ImageProps, Image as default };

package/dist/image.js

@@ -0,0 +1,191 @@
+"use client";
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/image.tsx
+var image_exports = {};
+__export(image_exports, {
+  default: () => image_default
+});
+module.exports = __toCommonJS(image_exports);
+var import_react3 = require("react");
+var import_system2 = require("@heroui/system");
+
+// src/use-image.ts
+var import_react = require("react");
+var import_system = require("@heroui/system");
+var import_theme = require("@heroui/theme");
+var import_react_utils = require("@heroui/react-utils");
+var import_shared_utils = require("@heroui/shared-utils");
+var import_use_image = require("@heroui/use-image");
+var import_react2 = require("react");
+function useImage(originalProps) {
+  var _a, _b;
+  const globalContext = (0, import_system.useProviderContext)();
+  const [props, variantProps] = (0, import_system.mapPropsVariants)(originalProps, import_theme.image.variantKeys);
+  const {
+    ref,
+    as,
+    src,
+    className,
+    classNames,
+    loading,
+    isBlurred,
+    fallbackSrc,
+    isLoading: isLoadingProp,
+    disableSkeleton = !!fallbackSrc,
+    removeWrapper = false,
+    onError,
+    onLoad,
+    srcSet,
+    sizes,
+    crossOrigin,
+    ...otherProps
+  } = props;
+  const imageStatus = (0, import_use_image.useImage)({
+    src,
+    loading,
+    onError,
+    onLoad,
+    ignoreFallback: false,
+    srcSet,
+    sizes,
+    crossOrigin
+  });
+  const disableAnimation = (_b = (_a = originalProps.disableAnimation) != null ? _a : globalContext == null ? void 0 : globalContext.disableAnimation) != null ? _b : false;
+  const isImgLoaded = imageStatus === "loaded" && !isLoadingProp;
+  const isLoading = imageStatus === "loading" || isLoadingProp;
+  const isZoomed = originalProps.isZoomed;
+  const Component = as || "img";
+  const domRef = (0, import_react_utils.useDOMRef)(ref);
+  const { w, h } = (0, import_react2.useMemo)(() => {
+    return {
+      w: props.width ? typeof props.width === "number" ? `${props.width}px` : props.width : "fit-content",
+      h: props.height ? typeof props.height === "number" ? `${props.height}px` : props.height : "auto"
+    };
+  }, [props == null ? void 0 : props.width, props == null ? void 0 : props.height]);
+  const showFallback = (!src || !isImgLoaded) && !!fallbackSrc;
+  const showSkeleton = isLoading && !disableSkeleton;
+  const slots = (0, import_react2.useMemo)(
+    () => (0, import_theme.image)({
+      ...variantProps,
+      disableAnimation,
+      showSkeleton
+    }),
+    [(0, import_shared_utils.objectToDeps)(variantProps), disableAnimation, showSkeleton]
+  );
+  const baseStyles = (0, import_shared_utils.clsx)(className, classNames == null ? void 0 : classNames.img);
+  const getImgProps = (props2 = {}) => {
+    const imgStyles = (0, import_shared_utils.clsx)(baseStyles, props2 == null ? void 0 : props2.className);
+    return {
+      src,
+      ref: domRef,
+      "data-loaded": (0, import_shared_utils.dataAttr)(isImgLoaded),
+      className: slots.img({ class: imgStyles }),
+      loading,
+      srcSet,
+      sizes,
+      crossOrigin,
+      ...otherProps,
+      style: {
+        // img has `height: auto` by default
+        // passing the custom height here to override if it is specified
+        ...(otherProps == null ? void 0 : otherProps.height) && { height: h },
+        ...props2.style,
+        ...otherProps.style
+      }
+    };
+  };
+  const getWrapperProps = (0, import_react.useCallback)(() => {
+    const fallbackStyle = showFallback ? {
+      backgroundImage: `url(${fallbackSrc})`
+    } : {};
+    return {
+      className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }),
+      style: {
+        ...fallbackStyle,
+        maxWidth: w
+      }
+    };
+  }, [slots, showFallback, fallbackSrc, classNames == null ? void 0 : classNames.wrapper, w]);
+  const getBlurredImgProps = (0, import_react.useCallback)(() => {
+    return {
+      src,
+      "aria-hidden": (0, import_shared_utils.dataAttr)(true),
+      className: slots.blurredImg({ class: classNames == null ? void 0 : classNames.blurredImg })
+    };
+  }, [slots, src, classNames == null ? void 0 : classNames.blurredImg]);
+  return {
+    Component,
+    domRef,
+    slots,
+    classNames,
+    isBlurred,
+    disableSkeleton,
+    fallbackSrc,
+    removeWrapper,
+    isZoomed,
+    isLoading,
+    getImgProps,
+    getWrapperProps,
+    getBlurredImgProps
+  };
+}
+
+// src/image.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var Image = (0, import_system2.forwardRef)((props, ref) => {
+  const {
+    Component,
+    domRef,
+    slots,
+    classNames,
+    isBlurred,
+    isZoomed,
+    fallbackSrc,
+    removeWrapper,
+    disableSkeleton,
+    getImgProps,
+    getWrapperProps,
+    getBlurredImgProps
+  } = useImage({
+    ...props,
+    ref
+  });
+  const img = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { ref: domRef, ...getImgProps() });
+  if (removeWrapper) {
+    return img;
+  }
+  const zoomed = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: slots.zoomedWrapper({ class: classNames == null ? void 0 : classNames.zoomedWrapper }), children: img });
+  if (isBlurred) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ...getWrapperProps(), children: [
+      isZoomed ? zoomed : img,
+      (0, import_react3.cloneElement)(img, getBlurredImgProps())
+    ] });
+  }
+  if (isZoomed || !disableSkeleton || fallbackSrc) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ...getWrapperProps(), children: [
+      " ",
+      isZoomed ? zoomed : img
+    ] });
+  }
+  return img;
+});
+Image.displayName = "HeroUI.Image";
+var image_default = Image;

package/dist/image.mjs

@@ -0,0 +1,8 @@
+"use client";
+import {
+  image_default
+} from "./chunk-3TCFMHK3.mjs";
+import "./chunk-Q3TXVV4U.mjs";
+export {
+  image_default as default
+};

package/dist/index.d.mts

@@ -0,0 +1,7 @@
+export { default as Image, ImageProps } from './image.mjs';
+export { useImage } from './use-image.mjs';
+import '@heroui/system';
+import 'tailwind-variants';
+import 'react';
+import '@heroui/theme';
+import '@heroui/react-utils';

package/dist/index.d.ts

@@ -0,0 +1,7 @@
+export { default as Image, ImageProps } from './image.js';
+export { useImage } from './use-image.js';
+import '@heroui/system';
+import 'tailwind-variants';
+import 'react';
+import '@heroui/theme';
+import '@heroui/react-utils';

package/dist/index.js

@@ -0,0 +1,199 @@
+"use client";
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  Image: () => image_default,
+  useImage: () => useImage
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/image.tsx
+var import_react3 = require("react");
+var import_system2 = require("@heroui/system");
+
+// src/use-image.ts
+var import_react = require("react");
+var import_system = require("@heroui/system");
+var import_theme = require("@heroui/theme");
+var import_react_utils = require("@heroui/react-utils");
+var import_shared_utils = require("@heroui/shared-utils");
+var import_use_image = require("@heroui/use-image");
+var import_react2 = require("react");
+function useImage(originalProps) {
+  var _a, _b;
+  const globalContext = (0, import_system.useProviderContext)();
+  const [props, variantProps] = (0, import_system.mapPropsVariants)(originalProps, import_theme.image.variantKeys);
+  const {
+    ref,
+    as,
+    src,
+    className,
+    classNames,
+    loading,
+    isBlurred,
+    fallbackSrc,
+    isLoading: isLoadingProp,
+    disableSkeleton = !!fallbackSrc,
+    removeWrapper = false,
+    onError,
+    onLoad,
+    srcSet,
+    sizes,
+    crossOrigin,
+    ...otherProps
+  } = props;
+  const imageStatus = (0, import_use_image.useImage)({
+    src,
+    loading,
+    onError,
+    onLoad,
+    ignoreFallback: false,
+    srcSet,
+    sizes,
+    crossOrigin
+  });
+  const disableAnimation = (_b = (_a = originalProps.disableAnimation) != null ? _a : globalContext == null ? void 0 : globalContext.disableAnimation) != null ? _b : false;
+  const isImgLoaded = imageStatus === "loaded" && !isLoadingProp;
+  const isLoading = imageStatus === "loading" || isLoadingProp;
+  const isZoomed = originalProps.isZoomed;
+  const Component = as || "img";
+  const domRef = (0, import_react_utils.useDOMRef)(ref);
+  const { w, h } = (0, import_react2.useMemo)(() => {
+    return {
+      w: props.width ? typeof props.width === "number" ? `${props.width}px` : props.width : "fit-content",
+      h: props.height ? typeof props.height === "number" ? `${props.height}px` : props.height : "auto"
+    };
+  }, [props == null ? void 0 : props.width, props == null ? void 0 : props.height]);
+  const showFallback = (!src || !isImgLoaded) && !!fallbackSrc;
+  const showSkeleton = isLoading && !disableSkeleton;
+  const slots = (0, import_react2.useMemo)(
+    () => (0, import_theme.image)({
+      ...variantProps,
+      disableAnimation,
+      showSkeleton
+    }),
+    [(0, import_shared_utils.objectToDeps)(variantProps), disableAnimation, showSkeleton]
+  );
+  const baseStyles = (0, import_shared_utils.clsx)(className, classNames == null ? void 0 : classNames.img);
+  const getImgProps = (props2 = {}) => {
+    const imgStyles = (0, import_shared_utils.clsx)(baseStyles, props2 == null ? void 0 : props2.className);
+    return {
+      src,
+      ref: domRef,
+      "data-loaded": (0, import_shared_utils.dataAttr)(isImgLoaded),
+      className: slots.img({ class: imgStyles }),
+      loading,
+      srcSet,
+      sizes,
+      crossOrigin,
+      ...otherProps,
+      style: {
+        // img has `height: auto` by default
+        // passing the custom height here to override if it is specified
+        ...(otherProps == null ? void 0 : otherProps.height) && { height: h },
+        ...props2.style,
+        ...otherProps.style
+      }
+    };
+  };
+  const getWrapperProps = (0, import_react.useCallback)(() => {
+    const fallbackStyle = showFallback ? {
+      backgroundImage: `url(${fallbackSrc})`
+    } : {};
+    return {
+      className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }),
+      style: {
+        ...fallbackStyle,
+        maxWidth: w
+      }
+    };
+  }, [slots, showFallback, fallbackSrc, classNames == null ? void 0 : classNames.wrapper, w]);
+  const getBlurredImgProps = (0, import_react.useCallback)(() => {
+    return {
+      src,
+      "aria-hidden": (0, import_shared_utils.dataAttr)(true),
+      className: slots.blurredImg({ class: classNames == null ? void 0 : classNames.blurredImg })
+    };
+  }, [slots, src, classNames == null ? void 0 : classNames.blurredImg]);
+  return {
+    Component,
+    domRef,
+    slots,
+    classNames,
+    isBlurred,
+    disableSkeleton,
+    fallbackSrc,
+    removeWrapper,
+    isZoomed,
+    isLoading,
+    getImgProps,
+    getWrapperProps,
+    getBlurredImgProps
+  };
+}
+
+// src/image.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var Image = (0, import_system2.forwardRef)((props, ref) => {
+  const {
+    Component,
+    domRef,
+    slots,
+    classNames,
+    isBlurred,
+    isZoomed,
+    fallbackSrc,
+    removeWrapper,
+    disableSkeleton,
+    getImgProps,
+    getWrapperProps,
+    getBlurredImgProps
+  } = useImage({
+    ...props,
+    ref
+  });
+  const img = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Component, { ref: domRef, ...getImgProps() });
+  if (removeWrapper) {
+    return img;
+  }
+  const zoomed = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: slots.zoomedWrapper({ class: classNames == null ? void 0 : classNames.zoomedWrapper }), children: img });
+  if (isBlurred) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ...getWrapperProps(), children: [
+      isZoomed ? zoomed : img,
+      (0, import_react3.cloneElement)(img, getBlurredImgProps())
+    ] });
+  }
+  if (isZoomed || !disableSkeleton || fallbackSrc) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ...getWrapperProps(), children: [
+      " ",
+      isZoomed ? zoomed : img
+    ] });
+  }
+  return img;
+});
+Image.displayName = "HeroUI.Image";
+var image_default = Image;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Image,
+  useImage
+});

package/dist/index.mjs

@@ -0,0 +1,11 @@
+"use client";
+import {
+  image_default
+} from "./chunk-3TCFMHK3.mjs";
+import {
+  useImage
+} from "./chunk-Q3TXVV4U.mjs";
+export {
+  image_default as Image,
+  useImage
+};

package/dist/use-image.d.mts

@@ -0,0 +1,142 @@
+import * as tailwind_variants from 'tailwind-variants';
+import * as react from 'react';
+import { ImgHTMLAttributes } from 'react';
+import * as _heroui_system from '@heroui/system';
+import { PropGetter, HTMLHeroUIProps } from '@heroui/system';
+import { ImageVariantProps, SlotsToClasses, ImageSlots } from '@heroui/theme';
+import { ReactRef } from '@heroui/react-utils';
+
+type NativeImageProps = ImgHTMLAttributes<HTMLImageElement>;
+interface Props extends HTMLHeroUIProps<"img"> {
+    /**
+     * Ref to the DOM node.
+     */
+    ref?: ReactRef<HTMLImageElement | null>;
+    /**
+     * Whether to add a blurred effect to the image.
+     * @default false
+     */
+    isBlurred?: boolean;
+    /**
+     * A fallback image.
+     */
+    fallbackSrc?: React.ReactNode;
+    /**
+     * Whether to disable the loading skeleton.
+     * @default false
+     */
+    disableSkeleton?: boolean;
+    /**
+     * A callback for when the image `src` has been loaded
+     */
+    onLoad?: NativeImageProps["onLoad"];
+    /**
+     * A loading strategy to use for the image.
+     */
+    loading?: NativeImageProps["loading"];
+    /**
+     * Whether to remove the wrapper element. This will cause the image to be rendered as a direct child of the parent element.
+     * If you set this prop as `true` neither the skeleton nor the zoom effect will work.
+     * @default false
+     */
+    removeWrapper?: boolean;
+    /**
+     * Controlled loading state.
+     */
+    isLoading?: boolean;
+    /**
+     * Function called when image failed to load
+     */
+    onError?: () => void;
+    /**
+     * Classname or List of classes to change the classNames of the element.
+     * if `className` is passed, it will be added to the base slot.
+     *
+     * @example
+     * ```ts
+     * <Image classNames={{
+     *    base:"base-classes", // image classes
+     *    wrapper: "wrapper-classes",
+     *    blurredImg: "blurredImg-classes", // this is a cloned version of the img
+     * }} />
+     * ```
+     */
+    classNames?: SlotsToClasses<ImageSlots>;
+}
+type UseImageProps = Props & ImageVariantProps;
+declare function useImage(originalProps: UseImageProps): {
+    Component: _heroui_system.As<any>;
+    domRef: react.RefObject<HTMLImageElement>;
+    slots: {
+        wrapper: (slotProps?: ({
+            radius?: "lg" | "none" | "full" | "sm" | "md" | undefined;
+            shadow?: "lg" | "none" | "sm" | "md" | undefined;
+            isZoomed?: boolean | undefined;
+            showSkeleton?: boolean | undefined;
+            disableAnimation?: boolean | undefined;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
+        zoomedWrapper: (slotProps?: ({
+            radius?: "lg" | "none" | "full" | "sm" | "md" | undefined;
+            shadow?: "lg" | "none" | "sm" | "md" | undefined;
+            isZoomed?: boolean | undefined;
+            showSkeleton?: boolean | undefined;
+            disableAnimation?: boolean | undefined;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
+        img: (slotProps?: ({
+            radius?: "lg" | "none" | "full" | "sm" | "md" | undefined;
+            shadow?: "lg" | "none" | "sm" | "md" | undefined;
+            isZoomed?: boolean | undefined;
+            showSkeleton?: boolean | undefined;
+            disableAnimation?: boolean | undefined;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
+        blurredImg: (slotProps?: ({
+            radius?: "lg" | "none" | "full" | "sm" | "md" | undefined;
+            shadow?: "lg" | "none" | "sm" | "md" | undefined;
+            isZoomed?: boolean | undefined;
+            showSkeleton?: boolean | undefined;
+            disableAnimation?: boolean | undefined;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
+    } & {
+        wrapper: (slotProps?: ({
+            radius?: "lg" | "none" | "full" | "sm" | "md" | undefined;
+            shadow?: "lg" | "none" | "sm" | "md" | undefined;
+            isZoomed?: boolean | undefined;
+            showSkeleton?: boolean | undefined;
+            disableAnimation?: boolean | undefined;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
+        zoomedWrapper: (slotProps?: ({
+            radius?: "lg" | "none" | "full" | "sm" | "md" | undefined;
+            shadow?: "lg" | "none" | "sm" | "md" | undefined;
+            isZoomed?: boolean | undefined;
+            showSkeleton?: boolean | undefined;
+            disableAnimation?: boolean | undefined;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
+        img: (slotProps?: ({
+            radius?: "lg" | "none" | "full" | "sm" | "md" | undefined;
+            shadow?: "lg" | "none" | "sm" | "md" | undefined;
+            isZoomed?: boolean | undefined;
+            showSkeleton?: boolean | undefined;
+            disableAnimation?: boolean | undefined;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
+        blurredImg: (slotProps?: ({
+            radius?: "lg" | "none" | "full" | "sm" | "md" | undefined;
+            shadow?: "lg" | "none" | "sm" | "md" | undefined;
+            isZoomed?: boolean | undefined;
+            showSkeleton?: boolean | undefined;
+            disableAnimation?: boolean | undefined;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
+    } & {};
+    classNames: SlotsToClasses<"wrapper" | "zoomedWrapper" | "img" | "blurredImg"> | undefined;
+    isBlurred: boolean | undefined;
+    disableSkeleton: boolean;
+    fallbackSrc: react.ReactNode;
+    removeWrapper: boolean;
+    isZoomed: boolean | undefined;
+    isLoading: boolean | undefined;
+    getImgProps: PropGetter;
+    getWrapperProps: PropGetter;
+    getBlurredImgProps: PropGetter;
+};
+type UseImageReturn = ReturnType<typeof useImage>;
+
+export { type UseImageProps, type UseImageReturn, useImage };

package/dist/use-image.d.ts

@@ -0,0 +1,142 @@
+import * as tailwind_variants from 'tailwind-variants';
+import * as react from 'react';
+import { ImgHTMLAttributes } from 'react';
+import * as _heroui_system from '@heroui/system';
+import { PropGetter, HTMLHeroUIProps } from '@heroui/system';
+import { ImageVariantProps, SlotsToClasses, ImageSlots } from '@heroui/theme';
+import { ReactRef } from '@heroui/react-utils';
+
+type NativeImageProps = ImgHTMLAttributes<HTMLImageElement>;
+interface Props extends HTMLHeroUIProps<"img"> {
+    /**
+     * Ref to the DOM node.
+     */
+    ref?: ReactRef<HTMLImageElement | null>;
+    /**
+     * Whether to add a blurred effect to the image.
+     * @default false
+     */
+    isBlurred?: boolean;
+    /**
+     * A fallback image.
+     */
+    fallbackSrc?: React.ReactNode;
+    /**
+     * Whether to disable the loading skeleton.
+     * @default false
+     */
+    disableSkeleton?: boolean;
+    /**
+     * A callback for when the image `src` has been loaded
+     */
+    onLoad?: NativeImageProps["onLoad"];
+    /**
+     * A loading strategy to use for the image.
+     */
+    loading?: NativeImageProps["loading"];
+    /**
+     * Whether to remove the wrapper element. This will cause the image to be rendered as a direct child of the parent element.
+     * If you set this prop as `true` neither the skeleton nor the zoom effect will work.
+     * @default false
+     */
+    removeWrapper?: boolean;
+    /**
+     * Controlled loading state.
+     */
+    isLoading?: boolean;
+    /**
+     * Function called when image failed to load
+     */
+    onError?: () => void;
+    /**
+     * Classname or List of classes to change the classNames of the element.
+     * if `className` is passed, it will be added to the base slot.
+     *
+     * @example
+     * ```ts
+     * <Image classNames={{
+     *    base:"base-classes", // image classes
+     *    wrapper: "wrapper-classes",
+     *    blurredImg: "blurredImg-classes", // this is a cloned version of the img
+     * }} />
+     * ```
+     */
+    classNames?: SlotsToClasses<ImageSlots>;
+}
+type UseImageProps = Props & ImageVariantProps;
+declare function useImage(originalProps: UseImageProps): {
+    Component: _heroui_system.As<any>;
+    domRef: react.RefObject<HTMLImageElement>;
+    slots: {
+        wrapper: (slotProps?: ({
+            radius?: "lg" | "none" | "full" | "sm" | "md" | undefined;
+            shadow?: "lg" | "none" | "sm" | "md" | undefined;
+            isZoomed?: boolean | undefined;
+            showSkeleton?: boolean | undefined;
+            disableAnimation?: boolean | undefined;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
+        zoomedWrapper: (slotProps?: ({
+            radius?: "lg" | "none" | "full" | "sm" | "md" | undefined;
+            shadow?: "lg" | "none" | "sm" | "md" | undefined;
+            isZoomed?: boolean | undefined;
+            showSkeleton?: boolean | undefined;
+            disableAnimation?: boolean | undefined;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
+        img: (slotProps?: ({
+            radius?: "lg" | "none" | "full" | "sm" | "md" | undefined;
+            shadow?: "lg" | "none" | "sm" | "md" | undefined;
+            isZoomed?: boolean | undefined;
+            showSkeleton?: boolean | undefined;
+            disableAnimation?: boolean | undefined;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
+        blurredImg: (slotProps?: ({
+            radius?: "lg" | "none" | "full" | "sm" | "md" | undefined;
+            shadow?: "lg" | "none" | "sm" | "md" | undefined;
+            isZoomed?: boolean | undefined;
+            showSkeleton?: boolean | undefined;
+            disableAnimation?: boolean | undefined;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
+    } & {
+        wrapper: (slotProps?: ({
+            radius?: "lg" | "none" | "full" | "sm" | "md" | undefined;
+            shadow?: "lg" | "none" | "sm" | "md" | undefined;
+            isZoomed?: boolean | undefined;
+            showSkeleton?: boolean | undefined;
+            disableAnimation?: boolean | undefined;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
+        zoomedWrapper: (slotProps?: ({
+            radius?: "lg" | "none" | "full" | "sm" | "md" | undefined;
+            shadow?: "lg" | "none" | "sm" | "md" | undefined;
+            isZoomed?: boolean | undefined;
+            showSkeleton?: boolean | undefined;
+            disableAnimation?: boolean | undefined;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
+        img: (slotProps?: ({
+            radius?: "lg" | "none" | "full" | "sm" | "md" | undefined;
+            shadow?: "lg" | "none" | "sm" | "md" | undefined;
+            isZoomed?: boolean | undefined;
+            showSkeleton?: boolean | undefined;
+            disableAnimation?: boolean | undefined;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
+        blurredImg: (slotProps?: ({
+            radius?: "lg" | "none" | "full" | "sm" | "md" | undefined;
+            shadow?: "lg" | "none" | "sm" | "md" | undefined;
+            isZoomed?: boolean | undefined;
+            showSkeleton?: boolean | undefined;
+            disableAnimation?: boolean | undefined;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
+    } & {};
+    classNames: SlotsToClasses<"wrapper" | "zoomedWrapper" | "img" | "blurredImg"> | undefined;
+    isBlurred: boolean | undefined;
+    disableSkeleton: boolean;
+    fallbackSrc: react.ReactNode;
+    removeWrapper: boolean;
+    isZoomed: boolean | undefined;
+    isLoading: boolean | undefined;
+    getImgProps: PropGetter;
+    getWrapperProps: PropGetter;
+    getBlurredImgProps: PropGetter;
+};
+type UseImageReturn = ReturnType<typeof useImage>;
+
+export { type UseImageProps, type UseImageReturn, useImage };

package/dist/use-image.js

@@ -0,0 +1,149 @@
+"use client";
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/use-image.ts
+var use_image_exports = {};
+__export(use_image_exports, {
+  useImage: () => useImage
+});
+module.exports = __toCommonJS(use_image_exports);
+var import_react = require("react");
+var import_system = require("@heroui/system");
+var import_theme = require("@heroui/theme");
+var import_react_utils = require("@heroui/react-utils");
+var import_shared_utils = require("@heroui/shared-utils");
+var import_use_image = require("@heroui/use-image");
+var import_react2 = require("react");
+function useImage(originalProps) {
+  var _a, _b;
+  const globalContext = (0, import_system.useProviderContext)();
+  const [props, variantProps] = (0, import_system.mapPropsVariants)(originalProps, import_theme.image.variantKeys);
+  const {
+    ref,
+    as,
+    src,
+    className,
+    classNames,
+    loading,
+    isBlurred,
+    fallbackSrc,
+    isLoading: isLoadingProp,
+    disableSkeleton = !!fallbackSrc,
+    removeWrapper = false,
+    onError,
+    onLoad,
+    srcSet,
+    sizes,
+    crossOrigin,
+    ...otherProps
+  } = props;
+  const imageStatus = (0, import_use_image.useImage)({
+    src,
+    loading,
+    onError,
+    onLoad,
+    ignoreFallback: false,
+    srcSet,
+    sizes,
+    crossOrigin
+  });
+  const disableAnimation = (_b = (_a = originalProps.disableAnimation) != null ? _a : globalContext == null ? void 0 : globalContext.disableAnimation) != null ? _b : false;
+  const isImgLoaded = imageStatus === "loaded" && !isLoadingProp;
+  const isLoading = imageStatus === "loading" || isLoadingProp;
+  const isZoomed = originalProps.isZoomed;
+  const Component = as || "img";
+  const domRef = (0, import_react_utils.useDOMRef)(ref);
+  const { w, h } = (0, import_react2.useMemo)(() => {
+    return {
+      w: props.width ? typeof props.width === "number" ? `${props.width}px` : props.width : "fit-content",
+      h: props.height ? typeof props.height === "number" ? `${props.height}px` : props.height : "auto"
+    };
+  }, [props == null ? void 0 : props.width, props == null ? void 0 : props.height]);
+  const showFallback = (!src || !isImgLoaded) && !!fallbackSrc;
+  const showSkeleton = isLoading && !disableSkeleton;
+  const slots = (0, import_react2.useMemo)(
+    () => (0, import_theme.image)({
+      ...variantProps,
+      disableAnimation,
+      showSkeleton
+    }),
+    [(0, import_shared_utils.objectToDeps)(variantProps), disableAnimation, showSkeleton]
+  );
+  const baseStyles = (0, import_shared_utils.clsx)(className, classNames == null ? void 0 : classNames.img);
+  const getImgProps = (props2 = {}) => {
+    const imgStyles = (0, import_shared_utils.clsx)(baseStyles, props2 == null ? void 0 : props2.className);
+    return {
+      src,
+      ref: domRef,
+      "data-loaded": (0, import_shared_utils.dataAttr)(isImgLoaded),
+      className: slots.img({ class: imgStyles }),
+      loading,
+      srcSet,
+      sizes,
+      crossOrigin,
+      ...otherProps,
+      style: {
+        // img has `height: auto` by default
+        // passing the custom height here to override if it is specified
+        ...(otherProps == null ? void 0 : otherProps.height) && { height: h },
+        ...props2.style,
+        ...otherProps.style
+      }
+    };
+  };
+  const getWrapperProps = (0, import_react.useCallback)(() => {
+    const fallbackStyle = showFallback ? {
+      backgroundImage: `url(${fallbackSrc})`
+    } : {};
+    return {
+      className: slots.wrapper({ class: classNames == null ? void 0 : classNames.wrapper }),
+      style: {
+        ...fallbackStyle,
+        maxWidth: w
+      }
+    };
+  }, [slots, showFallback, fallbackSrc, classNames == null ? void 0 : classNames.wrapper, w]);
+  const getBlurredImgProps = (0, import_react.useCallback)(() => {
+    return {
+      src,
+      "aria-hidden": (0, import_shared_utils.dataAttr)(true),
+      className: slots.blurredImg({ class: classNames == null ? void 0 : classNames.blurredImg })
+    };
+  }, [slots, src, classNames == null ? void 0 : classNames.blurredImg]);
+  return {
+    Component,
+    domRef,
+    slots,
+    classNames,
+    isBlurred,
+    disableSkeleton,
+    fallbackSrc,
+    removeWrapper,
+    isZoomed,
+    isLoading,
+    getImgProps,
+    getWrapperProps,
+    getBlurredImgProps
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  useImage
+});

package/dist/use-image.mjs

@@ -0,0 +1,7 @@
+"use client";
+import {
+  useImage
+} from "./chunk-Q3TXVV4U.mjs";
+export {
+  useImage
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@heroui/image",
-  "version": "2.2.7",
+  "version": "2.2.10",
   "description": "A simple image component",
   "keywords": [
     "image"
@@ -31,9 +31,9 @@
     "@heroui/system": ">=2.4.7"
   },
   "dependencies": {
-    "@heroui/shared-utils": "2.1.4",
-    "@heroui/react-utils": "2.1.5",
-    "@heroui/use-image": "2.1.4"
+    "@heroui/shared-utils": "2.1.7",
+    "@heroui/react-utils": "2.1.8",
+    "@heroui/use-image": "2.1.7"
   },
   "clean-package": "../../../clean-package.config.json",
   "module": "dist/index.mjs",