@heroui/image 2.2.6 → 2.2.7

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2020 Next UI
+Copyright (c) 2020 Next UI Inc.
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -15,10 +15,10 @@ npm i @heroui/image
 ## Contribution
 
 Yes please! See the
-[contributing guidelines](https://github.com/frontio-ai/heroui/blob/master/CONTRIBUTING.md)
+[contributing guidelines](https://github.com/heroui-inc/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).
+[MIT license](https://github.com/heroui-inc/heroui/blob/master/LICENSE).

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@heroui/image",
-  "version": "2.2.6",
+  "version": "2.2.7",
   "description": "A simple image component",
   "keywords": [
     "image"
   ],
-  "author": "Junior Garcia <jrgarciadev@gmail.com>",
+  "author": "HeroUI <support@heroui.com>",
   "homepage": "https://heroui.com",
   "license": "MIT",
   "main": "dist/index.js",
@@ -27,13 +27,13 @@
   "peerDependencies": {
     "react": ">=18 || >=19.0.0-rc.0",
     "react-dom": ">=18 || >=19.0.0-rc.0",
-    "@heroui/theme": ">=2.4.0",
-    "@heroui/system": ">=2.4.0"
+    "@heroui/theme": ">=2.4.6",
+    "@heroui/system": ">=2.4.7"
   },
   "dependencies": {
-    "@heroui/shared-utils": "2.1.3",
-    "@heroui/react-utils": "2.1.4",
-    "@heroui/use-image": "2.1.3"
+    "@heroui/shared-utils": "2.1.4",
+    "@heroui/react-utils": "2.1.5",
+    "@heroui/use-image": "2.1.4"
   },
   "clean-package": "../../../clean-package.config.json",
   "module": "dist/index.mjs",

package/dist/chunk-DSOLHU5M.mjs

@@ -1,124 +0,0 @@
-"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/chunk-MLPFQTYO.mjs

@@ -1,52 +0,0 @@
-"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 = "HeroUI.Image";
-var image_default = Image;
-
-export {
-  image_default
-};

package/dist/image.d.ts

@@ -1,12 +0,0 @@
-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

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

package/dist/image.mjs

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

package/dist/index.d.ts

@@ -1,7 +0,0 @@
-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

@@ -1,197 +0,0 @@
-"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 = "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

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

package/dist/use-image.d.ts

@@ -1,142 +0,0 @@
-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

@@ -1,147 +0,0 @@
-"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

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