@heroui/image 0.0.0-canary-20250109194025

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Next UI
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,24 @@
+# @heroui/image
+
+The Image component is used to display images with support for fallback.
+
+Please refer to the [documentation](https://heroui.com/docs/components/image) for more information.
+
+## Installation
+
+```sh
+yarn add @heroui/image
+# or
+npm i @heroui/image
+```
+
+## Contribution
+
+Yes please! See the
+[contributing guidelines](https://github.com/frontio-ai/heroui/blob/master/CONTRIBUTING.md)
+for details.
+
+## License
+
+This project is licensed under the terms of the
+[MIT license](https://github.com/frontio-ai/heroui/blob/master/LICENSE).

package/dist/chunk-BWCZTRRG.mjs

@@ -0,0 +1,52 @@
+"use client";
+import {
+  useImage
+} from "./chunk-DSOLHU5M.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 = "HeorUI.Image";
+var image_default = Image;
+
+export {
+  image_default
+};

package/dist/chunk-DSOLHU5M.mjs

@@ -0,0 +1,124 @@
+"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: {
+        ...(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.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 { 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: {
+        ...(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 = "HeorUI.Image";
+var image_default = Image;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {});

package/dist/image.mjs

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

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,197 @@
+"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 src_exports = {};
+__export(src_exports, {
+  Image: () => image_default,
+  useImage: () => useImage
+});
+module.exports = __toCommonJS(src_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: {
+        ...(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 = "HeorUI.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-BWCZTRRG.mjs";
+import {
+  useImage
+} from "./chunk-DSOLHU5M.mjs";
+export {
+  image_default as Image,
+  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?: "none" | "sm" | "md" | "lg" | "full" | undefined;
+            shadow?: "none" | "sm" | "md" | "lg" | undefined;
+            isZoomed?: boolean | undefined;
+            showSkeleton?: boolean | undefined;
+            disableAnimation?: boolean | undefined;
+        } & tailwind_variants.ClassProp<ClassValue>) | undefined) => string;
+        zoomedWrapper: (slotProps?: ({
+            radius?: "none" | "sm" | "md" | "lg" | "full" | undefined;
+            shadow?: "none" | "sm" | "md" | "lg" | undefined;
+            isZoomed?: boolean | undefined;
+            showSkeleton?: boolean | undefined;
+            disableAnimation?: boolean | undefined;
+        } & tailwind_variants.ClassProp<ClassValue>) | undefined) => string;
+        img: (slotProps?: ({
+            radius?: "none" | "sm" | "md" | "lg" | "full" | undefined;
+            shadow?: "none" | "sm" | "md" | "lg" | undefined;
+            isZoomed?: boolean | undefined;
+            showSkeleton?: boolean | undefined;
+            disableAnimation?: boolean | undefined;
+        } & tailwind_variants.ClassProp<ClassValue>) | undefined) => string;
+        blurredImg: (slotProps?: ({
+            radius?: "none" | "sm" | "md" | "lg" | "full" | undefined;
+            shadow?: "none" | "sm" | "md" | "lg" | undefined;
+            isZoomed?: boolean | undefined;
+            showSkeleton?: boolean | undefined;
+            disableAnimation?: boolean | undefined;
+        } & tailwind_variants.ClassProp<ClassValue>) | undefined) => string;
+    } & {
+        wrapper: (slotProps?: ({
+            radius?: "none" | "sm" | "md" | "lg" | "full" | undefined;
+            shadow?: "none" | "sm" | "md" | "lg" | undefined;
+            isZoomed?: boolean | undefined;
+            showSkeleton?: boolean | undefined;
+            disableAnimation?: boolean | undefined;
+        } & tailwind_variants.ClassProp<ClassValue>) | undefined) => string;
+        zoomedWrapper: (slotProps?: ({
+            radius?: "none" | "sm" | "md" | "lg" | "full" | undefined;
+            shadow?: "none" | "sm" | "md" | "lg" | undefined;
+            isZoomed?: boolean | undefined;
+            showSkeleton?: boolean | undefined;
+            disableAnimation?: boolean | undefined;
+        } & tailwind_variants.ClassProp<ClassValue>) | undefined) => string;
+        img: (slotProps?: ({
+            radius?: "none" | "sm" | "md" | "lg" | "full" | undefined;
+            shadow?: "none" | "sm" | "md" | "lg" | undefined;
+            isZoomed?: boolean | undefined;
+            showSkeleton?: boolean | undefined;
+            disableAnimation?: boolean | undefined;
+        } & tailwind_variants.ClassProp<ClassValue>) | undefined) => string;
+        blurredImg: (slotProps?: ({
+            radius?: "none" | "sm" | "md" | "lg" | "full" | undefined;
+            shadow?: "none" | "sm" | "md" | "lg" | undefined;
+            isZoomed?: boolean | undefined;
+            showSkeleton?: boolean | undefined;
+            disableAnimation?: boolean | undefined;
+        } & tailwind_variants.ClassProp<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<Record<string, unknown>, _heroui_system.DOMAttributes<_heroui_system.DOMElement>>;
+    getWrapperProps: PropGetter<Record<string, unknown>, _heroui_system.DOMAttributes<_heroui_system.DOMElement>>;
+    getBlurredImgProps: PropGetter<Record<string, unknown>, _heroui_system.DOMAttributes<_heroui_system.DOMElement>>;
+};
+type UseImageReturn = ReturnType<typeof useImage>;
+
+export { UseImageProps, UseImageReturn, useImage };

package/dist/use-image.js

@@ -0,0 +1,147 @@
+"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: {
+        ...(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-DSOLHU5M.mjs";
+export {
+  useImage
+};

package/package.json

@@ -0,0 +1,56 @@
+{
+  "name": "@heroui/image",
+  "version": "0.0.0-canary-20250109194025",
+  "description": "A simple image component",
+  "keywords": [
+    "image"
+  ],
+  "author": "Junior Garcia <jrgarciadev@gmail.com>",
+  "homepage": "https://heroui.com",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/frontio-ai/heroui.git",
+    "directory": "packages/components/image"
+  },
+  "bugs": {
+    "url": "https://github.com/frontio-ai/heroui/issues"
+  },
+  "peerDependencies": {
+    "react": ">=18 || >=19.0.0-rc.0",
+    "react-dom": ">=18 || >=19.0.0-rc.0",
+    "@heroui/theme": "0.0.0-canary-20250109194025",
+    "@heroui/system": "0.0.0-canary-20250109194025"
+  },
+  "dependencies": {
+    "@heroui/react-utils": "0.0.0-canary-20250109194025",
+    "@heroui/shared-utils": "0.0.0-canary-20250109194025",
+    "@heroui/use-image": "0.0.0-canary-20250109194025"
+  },
+  "clean-package": "../../../clean-package.config.json",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "build": "tsup src --dts",
+    "build:fast": "tsup src",
+    "dev": "pnpm build:fast --watch",
+    "clean": "rimraf dist .turbo",
+    "typecheck": "tsc --noEmit"
+  }
+}