@heroui/image 2.2.6 → 2.2.9

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/dist/{chunk-MLPFQTYO.mjs → chunk-3TCFMHK3.mjs}

@@ -1,7 +1,7 @@
 "use client";
 import {
   useImage
-} from "./chunk-DSOLHU5M.mjs";
+} from "./chunk-Q3TXVV4U.mjs";
 
 // src/image.tsx
 import { cloneElement } from "react";

package/dist/{chunk-DSOLHU5M.mjs → chunk-Q3TXVV4U.mjs}

@@ -77,6 +77,8 @@ function useImage(originalProps) {
       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

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

@@ -9,4 +9,4 @@ interface ImageProps extends Omit<UseImageProps, "showSkeleton"> {
 }
 declare const Image: _heroui_system.InternalForwardRefRenderFunction<"img", ImageProps, never>;
 
-export { ImageProps, Image as default };
+export { type ImageProps, Image as default };

package/dist/image.js

@@ -104,6 +104,8 @@ function useImage(originalProps) {
       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
@@ -187,5 +189,3 @@ var Image = (0, import_system2.forwardRef)((props, ref) => {
 });
 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 +1,8 @@
 "use client";
 import {
   image_default
-} from "./chunk-MLPFQTYO.mjs";
-import "./chunk-DSOLHU5M.mjs";
+} 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.js

@@ -19,12 +19,12 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
-var src_exports = {};
-__export(src_exports, {
+var index_exports = {};
+__export(index_exports, {
   Image: () => image_default,
   useImage: () => useImage
 });
-module.exports = __toCommonJS(src_exports);
+module.exports = __toCommonJS(index_exports);
 
 // src/image.tsx
 var import_react3 = require("react");
@@ -107,6 +107,8 @@ function useImage(originalProps) {
       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

package/dist/index.mjs

@@ -1,10 +1,10 @@
 "use client";
 import {
   image_default
-} from "./chunk-MLPFQTYO.mjs";
+} from "./chunk-3TCFMHK3.mjs";
 import {
   useImage
-} from "./chunk-DSOLHU5M.mjs";
+} 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<"img" | "wrapper" | "zoomedWrapper" | "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

@@ -69,74 +69,74 @@ declare function useImage(originalProps: UseImageProps): {
     domRef: react.RefObject<HTMLImageElement>;
     slots: {
         wrapper: (slotProps?: ({
-            radius?: "none" | "sm" | "md" | "lg" | "full" | undefined;
-            shadow?: "none" | "sm" | "md" | "lg" | undefined;
+            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<ClassValue>) | undefined) => string;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
         zoomedWrapper: (slotProps?: ({
-            radius?: "none" | "sm" | "md" | "lg" | "full" | undefined;
-            shadow?: "none" | "sm" | "md" | "lg" | undefined;
+            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<ClassValue>) | undefined) => string;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
         img: (slotProps?: ({
-            radius?: "none" | "sm" | "md" | "lg" | "full" | undefined;
-            shadow?: "none" | "sm" | "md" | "lg" | undefined;
+            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<ClassValue>) | undefined) => string;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
         blurredImg: (slotProps?: ({
-            radius?: "none" | "sm" | "md" | "lg" | "full" | undefined;
-            shadow?: "none" | "sm" | "md" | "lg" | undefined;
+            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<ClassValue>) | undefined) => string;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
     } & {
         wrapper: (slotProps?: ({
-            radius?: "none" | "sm" | "md" | "lg" | "full" | undefined;
-            shadow?: "none" | "sm" | "md" | "lg" | undefined;
+            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<ClassValue>) | undefined) => string;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
         zoomedWrapper: (slotProps?: ({
-            radius?: "none" | "sm" | "md" | "lg" | "full" | undefined;
-            shadow?: "none" | "sm" | "md" | "lg" | undefined;
+            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<ClassValue>) | undefined) => string;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
         img: (slotProps?: ({
-            radius?: "none" | "sm" | "md" | "lg" | "full" | undefined;
-            shadow?: "none" | "sm" | "md" | "lg" | undefined;
+            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<ClassValue>) | undefined) => string;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
         blurredImg: (slotProps?: ({
-            radius?: "none" | "sm" | "md" | "lg" | "full" | undefined;
-            shadow?: "none" | "sm" | "md" | "lg" | undefined;
+            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<ClassValue>) | undefined) => string;
+        } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
     } & {};
-    classNames: SlotsToClasses<"wrapper" | "zoomedWrapper" | "img" | "blurredImg"> | undefined;
+    classNames: SlotsToClasses<"img" | "wrapper" | "zoomedWrapper" | "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>>;
+    getImgProps: PropGetter;
+    getWrapperProps: PropGetter;
+    getBlurredImgProps: PropGetter;
 };
 type UseImageReturn = ReturnType<typeof useImage>;
 
-export { UseImageProps, UseImageReturn, useImage };
+export { type UseImageProps, type UseImageReturn, useImage };

package/dist/use-image.js

@@ -100,6 +100,8 @@ function useImage(originalProps) {
       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

package/dist/use-image.mjs

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

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@heroui/image",
-  "version": "2.2.6",
+  "version": "2.2.9",
   "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.6",
+    "@heroui/react-utils": "2.1.7",
+    "@heroui/use-image": "2.1.6"
   },
   "clean-package": "../../../clean-package.config.json",
   "module": "dist/index.mjs",