mui-image-alter 3.0.0

package/LICENSE.md

@@ -0,0 +1,17 @@
+ISC License
+
+Copyright (c) 2022 [benmneb](https://github.com/benmneb/)
+
+Copyright (c) 2023 [mddanish00](https://github.com/mddanish00)
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted, provided that the above
+copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.

package/README.md

@@ -0,0 +1,355 @@
+<div align="center">
+    <h1><span>🌅</span><br /><code>mui-image-alter</code></h1>
+</div>
+<p align="center">
+  The another Material UI image component to satisfy the Material Design guidelines for loading images.
+</p>
+<div align="center">
+
+ ![GitHub License](https://img.shields.io/github/license/mddanish00/mui-image-alter?style=flat-square) ![npm](https://img.shields.io/npm/v/mui-image-alter?style=flat-square)  ![npm bundle size](https://img.shields.io/bundlephobia/minzip/mui-image-alter%40latest?style=flat-square) ![GitHub Workflow Status](https://img.shields.io/github/actions/workflow/status/mddanish00/mui-image-alter/test.yml?style=flat-square) ![Coverage from badge.yml](https://img.shields.io/endpoint?url=https://gist.githubusercontent.com/mddanish00/83c2a74197bb80b661019a2747e71daa/raw/mui-image-alter_coverage__main.json) [![Buy Me A Coffee](https://img.shields.io/badge/mddanish00-black?style=flat-square&logo=buymeacoffee&logoColor=black&label=Buy%20Me%20A%20Coffee&labelColor=%23FFDD00)](https://www.buymeacoffee.com/mddanish00)
+
+</div>
+<p align="center">
+  The <b>fork</b> by mddanish00. Original project <a href="https://github.com/benmneb/mui-image">here</a>.
+</p>
+<p align="center">
+  <strong><a href="https://mddanish00.github.io/mui-image-alter/">Demo Playground ↗️</a></strong> <br />
+</p>
+
+### If you're already using [Material UI v5](https://material-ui.com), why not display your images according to the Material guidelines too?
+
+> Illustrations and photographs may load and transition in three phases at staggered durations, rather than relying on opacity changes alone.
+>
+> Visualize the image fading in, like a print during the photo development process.
+>
+> \- [Material guidelines](https://material.io/archive/guidelines/patterns/loading-images.html#loading-images-usage)
+
+## About the fork
+
+Alter from alternative.
+
+I actually just to make a fork with small modification for my website but somehow I ended changed many things... How it became like this?
+
+### Why should I use this?
+
+If you satisfied with original project, you probably not need this. This is for users with a specific need.
+
+To put it simply, you only needed this if:
+
+- You want to change the component root element, `img` with other component like `Image` from `next/image`.
+- You want to use `styled` function from `styled-components` or `emotion`  or `MUI` on `Image` component but noticed some style not working properly.[^1]
+
+[^1]: This happen on original project because the styles set using style prop. To correct this for original project, you need to use style or wrapperStyle or iconWrapperStyle that provided to overwrite the default style.
+
+### Changes in this fork
+
+- Breaking Changes
+  - Height and width prop forwarded to the component root element (by default, `img`) instead of using CSS to set height and width of component wrapper element. Some alternate image components like `next/image` actually need for height and width prop.
+  - Put all styles that set though style prop in styled for better compability with MUI's styled.
+  - No UMD build. Go post an issue if you want UMD to be added.
+  - Only named exports. Read this [article](https://esbuild.github.io/content-types/#default-interop).
+
+- Other Changes
+  - Rewritten fully in Typescript with types built-in based on MUI component types.
+  - Add support to MUI's component prop; That's means you can subtitute component root element with `Image` from `next/image` if you want. Component supported are `img`, `img`-derived HTML element and component with `src` prop.
+  - Properly export esm and cjs build via package.json exports.
+
+- Development Changes
+  - Use Vite instead of nwb for development and building the library for fast and better developer experience for me!
+  - Added unit tests for testing mui-image-alter component. Also, added new Github Action that will automatically run these tests every pull request.
+
+## Simple Q & A
+
+- **Q**: Why you created this fork?  
+  **A**: MUI's styled don't work very well with the original mui-image because some of default styling and it use style prop instead of using styled to set some of the styling. So, I want to modify a little bit... And I end up doing at lot.  
+  Originally, I want to just post an issue for this but I am suck in comunication. 😅
+
+- **Q**: Why you change nwb to Vite?  
+  **A**: I just wanted to fork for my own benefit. So, I thought maybe I can write this in TypeScript... but it don't work with nwb. I am so frustrated that I cannot find how to do it and try migarating to Vite instead. (Also, looks like nwb is abandoned too...) It took a lot of work but never thought it work so well...
+  Maybe there is actually a way to use Typescript with nwb but I never regret switching to Vite.
+
+  Vite is so fast!!! 😍
+
+- **Q**: Will you intergrate changes from the original project?  
+  **A**: Yeah. As many as possible. 💪
+
+---
+
+### 1. Install
+
+Install the `mui-image-alter` peer dependencies first. (Can skip if you already done it.)
+
+If you haven't yet install MUI, please follow the [official guide](https://mui.com/material-ui/getting-started/installation/).
+
+Now, you can install the `mui-image-alter`.
+
+#### Install from npm
+
+```bash
+npm install mui-image-alter
+```
+
+```bash
+yarn add mui-image-alter
+```
+
+#### Install from repository
+
+Recommended to specify a version tag like this for installation from the repository like below for stability.
+
+```bash
+npm install github:mddanish00/mui-image-alter#vx.x.xx
+```
+
+```bash
+yarn add mui-image-alter@github:mddanish00/mui-image-alter#vx.x.xx
+```
+
+Replace `x.x.xx` with actual tags from [here](https://github.com/mddanish00/mui-image-alter/tags).
+
+### 2. Use
+
+```jsx
+import { Image } from 'mui-image-alter';
+
+// then
+
+<Image src="my-image.png" />
+```
+
+### 3. Profit 💰
+
+_Note: Profits not guaranteed and Material UI v5 is a peer dependency. If you need to support legacy versions of Material UI, use [`material-ui-image`](https://github.com/TeamWertarbyte/material-ui-image) instead. See the [comparison chart](#comparison-with-similar-components) below for more._
+
+## Usage Examples
+
+You can use `mui-image-alter` like a regular image.
+
+```jsx
+<Image src="my-image.png" />
+```
+
+Except... it will fade and animate in as the Material guidelines recommend. 🤯
+
+Apply the `showLoading` prop to add a progress indicator to let your fans know something amazing is coming. You can use the default MUI indicator or bring your own. 😎
+
+```jsx
+<Image src="my-image.png" showLoading />
+<Image src="my-image.bmp" showLoading={<MyCustomSpinner />} />
+```
+
+If you want the image to fail silently you can disable the `errorIcon`, or you can add your own to suit your brand.
+
+```jsx
+<Image src="my-cats.png" errorIcon={null} />
+<Image src="my-dogs.png" errorIcon={<MyErrorIcon />} />
+```
+
+If you want to _disobey Google_ 😵 then you can customise the animation and speed via the `duration` and `easing` props to any valid CSS property. Duration is always milliseconds.
+
+```jsx
+<Image src="my-fish.png" duration={325} />
+<Image src="my-bird.jpg" easing="ease-in-out" />
+```
+
+To add that extra bit of spice 🌶 you can do exactly what Google suggests and apply a small position `shift` to images as they appear. The direction, distance, and duration (in milliseconds) are up to you.
+
+```jsx
+<Image src="my-lawd.png" shift="left" />
+<Image src="my-gawd.jpg" shift="bottom" distance={300} />
+<Image src="my-gosh.gif" shift="top" distance="2rem" shiftDuration={320} />
+```
+
+And of course, you can style `mui-image` like you would a regular image... but with the addition of the MUI v5 `sx` prop and [all the benefits](https://mui.com/system/the-sx-prop/) it brings. 😏
+
+```jsx
+<Image src="my-self.jpeg" style={{ borderRadius: 16 }} />
+<Image src="my-wife.webp" className="custom-class" />
+<Image src="my-exgf.tiff" sx={{ display: { sm: 'none', lg: 'inline' }}} />
+```
+
+If you want to get fancy 💃 you can also add inline styles and additional `className`'s to the root wrapper `div` and loading/error icon wrapper `div`, or just target their default `className`'s. This allows for complete customisation of every aspect of the component.
+
+### Fork Exclusive Usage
+
+With this fork, you can use MUI's styled normally like this. More info on MUI's [official doccumentation](https://mui.com/system/styled/).
+
+```ts
+import { styled } from '@mui/material/styles';
+import { Image } from 'mui-image-alter';
+
+const customImage = styled(Image)({
+    margin: 0 auto;
+    max-width: 100%;
+    display: block;
+    max-height: 500px;
+});
+```
+
+You also can use composition to create custom components.
+
+```ts
+import { Image, ImageProps } from 'mui-image-alter';
+
+const customImage = ({ className, ...props }: MuiImageProps) => (
+  <Image className="some-custom-class" {...props} />
+);
+```
+
+You also can extend the props by importing props.
+
+```ts
+import React from 'react';
+import { Image, ImageProps } from 'mui-image-alter';
+
+type CustomImageProps = ImageProps & {
+  customImage: string;
+};
+
+const customImage = ({ customImage, src, ...props }: CustomImageProps) => {
+  const imageSrc = () => {
+    if (customImage === 'grass') {
+      return 'https//www.picture.org/grass.png';
+    }
+
+    if (customImage === 'beach') {
+      return 'https//www.picture.org/beach.png';
+    }
+
+    return 'https//www.picture.org/none.png';
+  };
+  return <Image src={imageSrc()} {...props} />;
+};
+```
+
+You can also change the component root element like official MUI components. Only img or img-derived component are supported from time being.
+
+```ts
+import React, { ElementType } from 'react';
+import { Image, ImageProps } from 'mui-image-alter';
+import NextImage from 'next/image';
+
+type CustomImageProps = ImageProps<typeof NextImage> & {
+  customImage: string;
+};
+
+const customImage = ({
+  customImage,
+  src,
+  ...props
+}: CustomImageProps) => {
+  const imageSrc = () => {
+    if (customImage === 'grass') {
+      return 'https//www.picture.org/grass.png';
+    }
+
+    if (customImage === 'beach') {
+      return 'https//www.picture.org/beach.png';
+    }
+
+    return 'https//www.picture.org/none.png';
+  };
+  return <Image src={imageSrc()} component={NextImage} {...props} />;
+};
+```
+
+Like and subscribe below for more. ⏬
+
+## Props
+
+| Name                 | Type             | Default                      | Description                                                                                                                                                                                                                                                                                    |
+| -------------------- | ---------------- | ---------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| alt                  | string           | ""                           | Alternate text for the image, which is displayed if the image fails to load or is not available. This text is also used by screen readers to provide a textual representation of the image for users who are visually impaired.                                                                |
+| bgColor              | string           | "inherit"                    | Background color of the image when it first loads. This can be used to create a smooth transition between the loading state and the fully-loaded image.                                                                                                                                        |
+| className            | string           | ""              | Class name to be applied to the root element of the Image component.                                                                                                                                                                                                                           |
+| distance             | string / number  | 100                          | Distance (in any valid CSS length units) that the image should shift when it finishes loading. This prop is only used if the shift prop is set. Accept valid CSS [`length`](https://developer.mozilla.org/en-US/docs/Web/CSS/length#units) value.                                              |
+| duration             | number           | 3000                         | Duration of the transition (in milliseconds) when the image finishes loading. This prop is used to set the transition-duration CSS property on the image. Accept valid CSS [`transition-duration`](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-duration) in milliseconds.      |
+| easing               | string           | cubic-bezier(0.7, 0, 0.6, 1) | Easing function for the transition when the image finishes loading. This prop is used to set the transition-timing-function CSS property on the image. Accept valid CSS [`transition-timing-function`](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-timing-function) value.     |
+| errorIcon            | boolean / node   | true                         | Whether or not to display an error icon when the image fails to load. If set to true, the default error icon will be displayed. If set to false, no error icon will be displayed. If set to a JSX element, the specified element will be displayed as the error icon.                          |
+| fit                  | string           | "contain"                    | How the image should be resized to fit within its container. Accept valid CSS [`object-fit`](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit#syntax) value.                                                                                                                        |
+| iconWrapperClassName | string           | ""      | Class name to be applied to the `div` element that wraps the error or loading icon. This can be used to apply custom styles to the icon using CSS.                                                                                                                                             |
+| iconWrapperStyle     | object           | { }                          | Inline styles to be applied to the `div` element that wraps the error or loading icon.                                                                                                                                                                                                         |
+| position             | string           | "relative"                   | Positioning of the image within its container. Accept valid CSS [`position`](https://developer.mozilla.org/en-US/docs/Web/CSS/position) value.                                                                                                                                                 |
+| shift                | boolean / string | false                        | Direction in which the image should shift when it finishes loading. Possible values are "left", "right", "top", "bottom", null, or false. If set to null or false, no shift animation will be applied.                                                                                         |
+| shiftDuration        | number           | duration \* 0.3              | Duration of the shift animation (in milliseconds) when the image finishes loading. This prop is only used if the shift prop is set to a valid shift direction.                                                                                                                                 |
+| showLoading          | boolean / node   | false                        | Whether or not to display a loading indicator while the image is loading. If set to true, the default loading indicator will be displayed. If set to false, no loading indicator will be displayed. If set to a JSX element, the specified element will be displayed as the loading indicator. |
+| **_src_** \*         | string           |                              | Source of the image to be displayed. This value should be a valid URL or file path to the image.                                                                                                                                                                                               |
+| style                | object           |                              | Inline styles to be applied to the root element of the Image component.                                                                                                                                                                                                                        |
+| wrapperClassName     | string           | ""          | Class name to be applied to the root `div` element that wraps the Image component.                                                                                                                                                                                                             |
+| wrapperStyle         | object           |                              | Inline styles to be applied to the root `div` element that wraps the Image component.                                                                                                                                                                                                          |
+| sx                   | object           |                              | Allows the user to style the Image component using the theme and style props provided by the MUI library. Used in the same way as the sx prop in other MUI components. Check out [MUI official documentation](https://mui.com/system/getting-started/the-sx-prop/) of the `sx` prop.           |
+| component            | string / node    |                              | Allows the user to specify a custom element to use as the root element for the Image component. Used in the same way as the component prop in other MUI components. Should only be used with elements that are derived from the `img` element.                                                 |
+
+\* required prop
+
+Any other props (eg. `src`, `alt`, `onLoad`) are passed directly to the root image element like `img`.
+
+All the description on this table are generated using ChatGPT and edited by me. 👍
+
+## Material guidelines for loading images
+
+> #### ✅ Fade-in
+>
+> Visualize the image fading in, like a print during the photo development process.
+
+> #### ✅ Opacity, exposure, and saturation recommendations
+>
+> Images should begin loading with low contrast levels and desaturated color. Once image opacity reaches 100%, display the image with full-color saturation.
+
+> #### ✅ Duration
+>
+> A longer duration is recommended for loading images, and a shorter duration is recommended for transitions.
+
+> #### ✅ Animation
+>
+> Add a small position shift to loading images.
+
+[(Source)](https://material.io/archive/guidelines/patterns/loading-images.html#loading-images-behavior)
+
+## Comparison with similar components
+
+| Feature                       |                                                     `mui-image`                                                      |                                                    `mui-image-alter`                                                       |                                                     `material-ui-image`                                                      |
+| ----------------------------- | :------------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------------------: |
+| Size (minzipped)              | ![npm bundle size](https://img.shields.io/bundlephobia/minzip/mui-image?color=%2343a047&label=%20&style=flat-square) | ![npm bundle size](https://img.shields.io/bundlephobia/minzip/mui-image-alter?color=%23b71c1c&label=%20&style=flat-square) | ![npm bundle size](https://img.shields.io/bundlephobia/minzip/material-ui-image?color=%23b71c1c&label=%20&style=flat-square) |
+| Supports MUI v5               |                                                          ✅                                                          |                                                          ✅                                                          |                                                              ❌                                                              |
+| Supports MUI component prop               |                                                          ❌                                                          |                                                          ✅                                                          |                                                              ❌                                                              |
+| Built-in Typescript types               |                                                          ❌                                                          |                                                          ✅                                                          |                                                              ❌                                                              |
+| Fade-in                       |                                                          ✅                                                          |                                                          ✅                                                          |                                                              ✅                                                              |
+| Progressive level adjustments |                                                          ✅                                                          |                                                          ✅                                                          |                                                              ❌                                                              |
+| Suggested duration            |                                                          ✅                                                          |                                                          ✅                                                          |                                                              ✅                                                              |
+| Optional shift animation      |                                                          ✅                                                          |                                                          ✅                                                          |                                                              ❌                                                              |
+| Supports legacy MUI versions  |                                                          ❌                                                          |                                                          ❌                                                          |                                                              ✅                                                              |
+
+## Like this project?
+
+Star this project and also the original project too if it is useful for you.
+
+Also, consider buying me a coffee!
+
+[!["Buy Me A Coffee"](https://www.buymeacoffee.com/assets/img/custom_images/orange_img.png)](https://www.buymeacoffee.com/mddanish00)
+
+## License
+
+Copyright (c) 2022 [benmneb](https://github.com/benmneb/)
+
+Copyright (c) 2023 [mddanish00](https://github.com/mddanish00)
+
+[ISC License](https://choosealicense.com/licenses/isc/)
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted, provided that the above
+copyright notice and this permission notice appear in all copies.
+
+<!-- THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE. -->
+
+## Other License
+
+The mui-image types from [DefinitelyTyped](https://github.com/DefinitelyTyped/DefinitelyTyped) project is licensed under [MIT License](https://github.com/DefinitelyTyped/DefinitelyTyped/raw/master/LICENSE).
+
+This component types structure based on types of components created by [Material UI](https://github.com/mui/material-ui) under [MIT License](https://github.com/mui/material-ui/blob/master/LICENSE).

package/dist/index.cjs

@@ -0,0 +1 @@
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),V=require("react"),m=require("@mui/material/styles"),G=require("@mui/material/SvgIcon"),J=require("@mui/material/CircularProgress"),K=require("clsx"),Q=require("use-resize-observer"),u=e=>e&&e.__esModule?e:{default:e};function U(e){if(e&&e.__esModule)return e;const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const a in e)if(a!=="default"){const r=Object.getOwnPropertyDescriptor(e,a);Object.defineProperty(i,a,r.get?r:{enumerable:!0,get:()=>e[a]})}}return i.default=e,Object.freeze(i)}const t=U(V),X=u(G),Y=u(J),h=u(K),Z=u(Q),p=e=>o.jsx(X.default,{...e,children:o.jsx("path",{d:"M21 5v6.59l-2.29-2.3c-.39-.39-1.03-.39-1.42 0L14 12.59 10.71 9.3a.9959.9959 0 0 0-1.41 0L6 12.59 3 9.58V5c0-1.1.9-2 2-2h14c1.1 0 2 .9 2 2zm-3 6.42 3 3.01V19c0 1.1-.9 2-2 2H5c-1.1 0-2-.9-2-2v-6.58l2.29 2.29c.39.39 1.02.39 1.41 0l3.3-3.3 3.29 3.29c.39.39 1.02.39 1.41 0l3.3-3.28z"})}),ee=t.forwardRef(({src:e,alt:i="",position:a="relative",fit:r="cover",style:I,className:S="",showLoading:l=!1,errorIcon:c=!0,shift:n=!1,distance:M=100,shiftDuration:z=void 0,bgColor:w="inherit",wrapperStyle:C,iconWrapperStyle:k,wrapperClassName:B="",iconWrapperClassName:O="",duration:q=3e3,easing:R="cubic-bezier(0.7, 0, 0.6, 1)",onLoad:f,onError:g,sx:W,component:$="img",...s},P)=>{const[d,b]=t.useState(!1),[y,j]=t.useState(!1),{ref:D,width:_,height:x}=Z.default({ref:P}),F=s.height?s.height:"100%",H=s.width?s.width:"100%",N=t.useCallback(()=>{b(!0),j(!1),f&&f()},[f]),A=t.useCallback(()=>{j(!0),b(!1),g&&g()},[g]),E=n!==void 0&&n!==!1&&n!==null?{[n]:d?0:M}:{},T=typeof c!="boolean"&&c||o.jsx(p,{sx:{fontSize:56,color:"#bdbdbd"}}),L=typeof l!="boolean"&&l||o.jsx(Y.default,{size:56,thickness:6});return o.jsxs(ie,{className:h.default("MuiImageAlter-wrapper",B),sx:W,style:C,bgColor:w,rootHeight:x||F,rootWidth:_||H,children:[o.jsx(te,{ref:D,as:$,src:e,alt:i,style:I,className:h.default("MuiImageAlter-img",S),onLoad:N,onError:A,position:a,fit:r,shift:n,shiftDuration:z,shiftStyles:E,duration:q,easing:R,loaded:d,...s}),(!!l||!!c)&&o.jsxs(oe,{className:h.default("MuiImageAlter-iconWrapper",O),style:k,loaded:d,children:[!!c&&y&&T,!!l&&!y&&!d&&L]})]})}),v=(e,i)=>!i.includes(e),te=t.memo(m.styled("img",{shouldForwardProp:e=>v(e.toString(),["position","fit","shift","shiftDuration","shiftStyles","duration","easing","loaded","sx","as"])})(e=>({"@keyframes materialize":{"0%":{filter:"saturate(20%) contrast(50%) brightness(120%)"},"75%":{filter:"saturate(60%) contrast(100%) brightness(100%)"},"100%":{filter:"saturate(100%) contrast(100%) brightness(100%)"}},position:e.position,objectFit:e.fit,transitionProperty:`${e.shift?`${e.shift}, `:""}opacity`,transitionDuration:`${e.shift?`${e.shiftDuration||e.duration*.3}ms, `:""}${e.duration/2}ms`,transitionTimingFunction:e.easing,opacity:e.loaded?1:0,animation:e.loaded?`materialize ${e.duration}ms 1 ${e.easing}`:"",...!!e.shift&&e.shiftStyles}))),ie=t.memo(m.styled("div",{shouldForwardProp:e=>v(e.toString(),["bgColor","sx","rootHeight","rootWidth"])})(e=>({display:"flex",justifyContent:"center",alignItems:"center",backgroundColor:e.bgColor,height:e.rootHeight,width:e.rootWidth}))),oe=t.memo(m.styled("div",{shouldForwardProp:e=>e!=="loaded"})(e=>({width:"100%",marginLeft:"-100%",display:"flex",justifyContent:"center",alignItems:"center",opacity:e.loaded?0:1})));exports.Image=ee;

package/dist/index.d.cts

@@ -0,0 +1,138 @@
+/// <reference types="react" />
+
+import { OverridableComponent } from '@mui/types';
+import { OverridableTypeMap } from '@mui/types';
+import { OverrideProps } from '@mui/types';
+import { SxProps } from '@mui/material/styles';
+import { Theme } from '@mui/material/styles';
+
+/**
+ * A custom image component that satisfy the Material guidelines for loading images.
+ *
+ * Fork by mddanish00. Original by benmneb.
+ *
+ * API: https://github.com/mddanish00/mui-image/blob/master/README.md
+ */
+declare const Image_2: MuiImage<ImageTypeMap>;
+export { Image_2 as Image }
+
+export declare type ImageProps<D extends React.ElementType = ImageTypeMap['defaultComponent'], P = {}> = OverrideProps<ImageTypeMap<P, D>, D>;
+
+/**
+ * Based on MUI component types in @mui/material-next,
+ * Some of these props are directly copied from @types/mui-image.
+ *
+ * Below is the notice included in @types/mui-image:
+ *
+ * Type definitions for mui-image 1.0
+ *
+ * Project: https://github.com/benmneb/mui-image
+ *
+ * Definitions by: benmneb <https://github.com/benmneb>
+ *
+ * Definitions: https://github.com/DefinitelyTyped/mui-image
+ *
+ * (With a little help from Natalia <https://github.com/CodeMeNatalie>)
+ *
+ * All types packages by DefinitelyTyped licensed under MIT License.
+ */
+declare type ImageTypeMap<P = {}, D extends React.ElementType = 'img'> = {
+    props: P & {
+        /**
+         * Text description of the image.
+         */
+        alt?: string;
+        /**
+         * Color the image transitions in from.
+         */
+        bgColor?: React.CSSProperties['backgroundColor'];
+        /**
+         * ClassName for the component image root element.
+         */
+        className?: string;
+        /**
+         * CSS length value for the shift animation.
+         */
+        distance?: string | number;
+        /**
+         * CSS transition-duration value.
+         * Duration of the transition when the image finishes loading.
+         */
+        duration?: number;
+        /**
+         * CSS transition-timing-function value.
+         * Easing function for the transition when the image finishes loading.
+         */
+        easing?: React.CSSProperties['transitionTimingFunction'];
+        /**
+         * Display default error icon or a custom one.
+         */
+        errorIcon?: boolean | React.ReactElement;
+        /**
+         * CSS object-fit value.
+         * Specifies how the image should be resized to fit within its container.
+         */
+        fit?: React.CSSProperties['objectFit'];
+        /**
+         * ClassName for the icon wrapper.
+         */
+        iconWrapperClassName?: string;
+        /**
+         * Inline styles for the icon wrapper.
+         */
+        iconWrapperStyle?: React.CSSProperties;
+        onError?: (...args: any[]) => void;
+        onLoad?: (...args: any[]) => void;
+        /**
+         * CSS position value.
+         * Specifies the positioning of the image within its container.
+         */
+        position?: React.CSSProperties['position'];
+        /**
+         * Direction for the shift animation.
+         */
+        shift?: 'left' | 'right' | 'top' | 'bottom' | false | null;
+        /**
+         * Duration of the shift animation in milliseconds.
+         */
+        shiftDuration?: number;
+        /**
+         * Display default loading spinner or a custom one.
+         */
+        showLoading?: boolean | React.ReactElement;
+        /**
+         * Path to the image.
+         * Should be a valid URL or file path to the image.
+         */
+        src: string;
+        /**
+         * Inline styles for the component image root element.
+         */
+        style?: React.CSSProperties;
+        /**
+         * The className for the root wrapper.
+         */
+        wrapperClassName?: string;
+        /**
+         * Inline styles for the root wrapper.
+         */
+        wrapperStyle?: React.CSSProperties;
+        /**
+         * Defining system overrides as well as additional CSS styles.
+         * Works same as official MUI components.
+         */
+        sx?: SxProps<Theme>;
+    };
+    defaultComponent: D;
+};
+
+/**
+ * A custom image component that satisfy the Material guidelines for loading images.
+ *
+ * Fork by mddanish00. Original by benmneb.
+ *
+ * API: https://github.com/mddanish00/mui-image/blob/master/README.md
+ */
+declare type MuiImage<M extends OverridableTypeMap> = OverridableComponent<M>;
+
+export { }

package/dist/index.d.ts

@@ -0,0 +1,138 @@
+/// <reference types="react" />
+
+import { OverridableComponent } from '@mui/types';
+import { OverridableTypeMap } from '@mui/types';
+import { OverrideProps } from '@mui/types';
+import { SxProps } from '@mui/material/styles';
+import { Theme } from '@mui/material/styles';
+
+/**
+ * A custom image component that satisfy the Material guidelines for loading images.
+ *
+ * Fork by mddanish00. Original by benmneb.
+ *
+ * API: https://github.com/mddanish00/mui-image/blob/master/README.md
+ */
+declare const Image_2: MuiImage<ImageTypeMap>;
+export { Image_2 as Image }
+
+export declare type ImageProps<D extends React.ElementType = ImageTypeMap['defaultComponent'], P = {}> = OverrideProps<ImageTypeMap<P, D>, D>;
+
+/**
+ * Based on MUI component types in @mui/material-next,
+ * Some of these props are directly copied from @types/mui-image.
+ *
+ * Below is the notice included in @types/mui-image:
+ *
+ * Type definitions for mui-image 1.0
+ *
+ * Project: https://github.com/benmneb/mui-image
+ *
+ * Definitions by: benmneb <https://github.com/benmneb>
+ *
+ * Definitions: https://github.com/DefinitelyTyped/mui-image
+ *
+ * (With a little help from Natalia <https://github.com/CodeMeNatalie>)
+ *
+ * All types packages by DefinitelyTyped licensed under MIT License.
+ */
+declare type ImageTypeMap<P = {}, D extends React.ElementType = 'img'> = {
+    props: P & {
+        /**
+         * Text description of the image.
+         */
+        alt?: string;
+        /**
+         * Color the image transitions in from.
+         */
+        bgColor?: React.CSSProperties['backgroundColor'];
+        /**
+         * ClassName for the component image root element.
+         */
+        className?: string;
+        /**
+         * CSS length value for the shift animation.
+         */
+        distance?: string | number;
+        /**
+         * CSS transition-duration value.
+         * Duration of the transition when the image finishes loading.
+         */
+        duration?: number;
+        /**
+         * CSS transition-timing-function value.
+         * Easing function for the transition when the image finishes loading.
+         */
+        easing?: React.CSSProperties['transitionTimingFunction'];
+        /**
+         * Display default error icon or a custom one.
+         */
+        errorIcon?: boolean | React.ReactElement;
+        /**
+         * CSS object-fit value.
+         * Specifies how the image should be resized to fit within its container.
+         */
+        fit?: React.CSSProperties['objectFit'];
+        /**
+         * ClassName for the icon wrapper.
+         */
+        iconWrapperClassName?: string;
+        /**
+         * Inline styles for the icon wrapper.
+         */
+        iconWrapperStyle?: React.CSSProperties;
+        onError?: (...args: any[]) => void;
+        onLoad?: (...args: any[]) => void;
+        /**
+         * CSS position value.
+         * Specifies the positioning of the image within its container.
+         */
+        position?: React.CSSProperties['position'];
+        /**
+         * Direction for the shift animation.
+         */
+        shift?: 'left' | 'right' | 'top' | 'bottom' | false | null;
+        /**
+         * Duration of the shift animation in milliseconds.
+         */
+        shiftDuration?: number;
+        /**
+         * Display default loading spinner or a custom one.
+         */
+        showLoading?: boolean | React.ReactElement;
+        /**
+         * Path to the image.
+         * Should be a valid URL or file path to the image.
+         */
+        src: string;
+        /**
+         * Inline styles for the component image root element.
+         */
+        style?: React.CSSProperties;
+        /**
+         * The className for the root wrapper.
+         */
+        wrapperClassName?: string;
+        /**
+         * Inline styles for the root wrapper.
+         */
+        wrapperStyle?: React.CSSProperties;
+        /**
+         * Defining system overrides as well as additional CSS styles.
+         * Works same as official MUI components.
+         */
+        sx?: SxProps<Theme>;
+    };
+    defaultComponent: D;
+};
+
+/**
+ * A custom image component that satisfy the Material guidelines for loading images.
+ *
+ * Fork by mddanish00. Original by benmneb.
+ *
+ * API: https://github.com/mddanish00/mui-image/blob/master/README.md
+ */
+declare type MuiImage<M extends OverridableTypeMap> = OverridableComponent<M>;
+
+export { }

package/dist/index.js

@@ -0,0 +1,151 @@
+"use client";
+import { jsxs as I, jsx as a } from "react/jsx-runtime";
+import * as e from "react";
+import { styled as h } from "@mui/material/styles";
+import G from "@mui/material/SvgIcon";
+import J from "@mui/material/CircularProgress";
+import m from "clsx";
+import K from "use-resize-observer";
+const Q = (t) => /* @__PURE__ */ a(G, { ...t, children: /* @__PURE__ */ a("path", { d: "M21 5v6.59l-2.29-2.3c-.39-.39-1.03-.39-1.42 0L14 12.59 10.71 9.3a.9959.9959 0 0 0-1.41 0L6 12.59 3 9.58V5c0-1.1.9-2 2-2h14c1.1 0 2 .9 2 2zm-3 6.42 3 3.01V19c0 1.1-.9 2-2 2H5c-1.1 0-2-.9-2-2v-6.58l2.29 2.29c.39.39 1.02.39 1.41 0l3.3-3.3 3.29 3.29c.39.39 1.02.39 1.41 0l3.3-3.28z" }) }), ot = e.forwardRef(
+  ({
+    src: t,
+    alt: l = "",
+    position: x = "relative",
+    fit: S = "cover",
+    style: w,
+    className: z = "",
+    showLoading: n = !1,
+    errorIcon: r = !0,
+    shift: i = !1,
+    distance: B = 100,
+    shiftDuration: C = void 0,
+    bgColor: k = "inherit",
+    wrapperStyle: M,
+    iconWrapperStyle: W,
+    wrapperClassName: $ = "",
+    iconWrapperClassName: j = "",
+    duration: F = 3e3,
+    easing: H = "cubic-bezier(0.7, 0, 0.6, 1)",
+    // "heavy move" from https://sprawledoctopus.com/easing/,
+    onLoad: c,
+    onError: d,
+    sx: R,
+    component: A = "img",
+    ...o
+  }, D) => {
+    const [s, f] = e.useState(!1), [u, g] = e.useState(!1), { ref: E, width: b, height: y } = K({ ref: D }), N = o.height ? o.height : "100%", L = o.width ? o.width : "100%", P = e.useCallback(() => {
+      f(!0), g(!1), c && c();
+    }, [c]), V = e.useCallback(() => {
+      g(!0), f(!1), d && d();
+    }, [d]), O = i !== void 0 && i !== !1 && i !== null ? {
+      [i]: s ? 0 : B
+    } : {}, T = typeof r != "boolean" && r || /* @__PURE__ */ a(Q, { sx: { fontSize: 56, color: "#bdbdbd" } }), q = typeof n != "boolean" && n || /* @__PURE__ */ a(J, { size: 56, thickness: 6 });
+    return /* @__PURE__ */ I(
+      X,
+      {
+        className: m("MuiImageAlter-wrapper", $),
+        sx: R,
+        style: M,
+        bgColor: k,
+        rootHeight: y || N,
+        rootWidth: b || L,
+        children: [
+          /* @__PURE__ */ a(
+            U,
+            {
+              ref: E,
+              as: A,
+              src: t,
+              alt: l,
+              style: w,
+              className: m("MuiImageAlter-img", z),
+              onLoad: P,
+              onError: V,
+              position: x,
+              fit: S,
+              shift: i,
+              shiftDuration: C,
+              shiftStyles: O,
+              duration: F,
+              easing: H,
+              loaded: s,
+              ...o
+            }
+          ),
+          (!!n || !!r) && /* @__PURE__ */ I(
+            Y,
+            {
+              className: m("MuiImageAlter-iconWrapper", j),
+              style: W,
+              loaded: s,
+              children: [
+                !!r && u && T,
+                !!n && !u && !s && q
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+), v = (t, l) => !l.includes(t), U = e.memo(
+  h("img", {
+    shouldForwardProp: (t) => v(t.toString(), [
+      "position",
+      "fit",
+      "shift",
+      "shiftDuration",
+      "shiftStyles",
+      "duration",
+      "easing",
+      "loaded",
+      "sx",
+      "as"
+    ])
+  })((t) => ({
+    "@keyframes materialize": {
+      "0%": {
+        filter: "saturate(20%) contrast(50%) brightness(120%)"
+      },
+      "75%": {
+        filter: "saturate(60%) contrast(100%) brightness(100%)"
+      },
+      "100%": {
+        filter: "saturate(100%) contrast(100%) brightness(100%)"
+      }
+    },
+    position: t.position,
+    objectFit: t.fit,
+    transitionProperty: `${t.shift ? `${t.shift}, ` : ""}opacity`,
+    transitionDuration: `${t.shift ? `${t.shiftDuration || t.duration * 0.3}ms, ` : ""}${t.duration / 2}ms`,
+    transitionTimingFunction: t.easing,
+    opacity: t.loaded ? 1 : 0,
+    animation: t.loaded ? `materialize ${t.duration}ms 1 ${t.easing}` : "",
+    ...!!t.shift && t.shiftStyles
+  }))
+), X = e.memo(
+  h("div", {
+    shouldForwardProp: (t) => v(t.toString(), ["bgColor", "sx", "rootHeight", "rootWidth"])
+  })((t) => ({
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    backgroundColor: t.bgColor,
+    height: t.rootHeight,
+    width: t.rootWidth
+  }))
+), Y = e.memo(
+  h("div", {
+    shouldForwardProp: (t) => t !== "loaded"
+  })((t) => ({
+    width: "100%",
+    marginLeft: "-100%",
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+    opacity: t.loaded ? 0 : 1
+  }))
+);
+export {
+  ot as Image
+};

package/package.json

@@ -0,0 +1,100 @@
+{
+	"name": "mui-image-alter",
+	"version": "3.0.0",
+	"description": "Fork of mui-image. Display images as per the Material guidelines using Material-UI v5. With component prop support.",
+	"type": "module",
+	"main": "./dist/index.cjs",
+	"types": "./dist/index.d.cts",
+	"exports": {
+		".": {
+			"import": {
+				"types": "./dist/index.d.ts",
+				"default": "./dist/index.js"
+			},
+			"require": {
+				"types": "./dist/index.d.cts",
+				"default": "./dist/index.cjs"
+			}
+		}
+	},
+	"files": [
+		"dist"
+	],
+	"scripts": {
+		"dev": "vite",
+		"build": "vite build",
+		"build:demo": "vite --config vite.democonfig.ts build",
+		"preview": "vite preview",
+		"size": "size-limit",
+		"format": "prettier {demo,src}/**/*.{js,jsx,ts,tsx,json} --write",
+		"clean": "rimraf dist es lib umd coverage jest-setup.d.ts mui-image-alter-*",
+		"prepare": "npm run build",
+		"preversion": "npm run clean && npm run format",
+		"postversion": "git push && git push --tags",
+		"test": "vitest run",
+		"test:watch": "vitest",
+		"test:coverage": "vitest run --coverage",
+		"test:coverage-ci": "vitest run --coverage.enabled --coverage.reporter='text-summary'"
+	},
+	"peerDependencies": {
+		"@mui/material": "^5.0.1",
+		"react": "^17.0.2 || ^18.0.0"
+	},
+	"devDependencies": {
+		"@emotion/react": "^11.11.1",
+		"@emotion/styled": "^11.11.0",
+		"@fontsource/fira-code": "^5.0.15",
+		"@mui/types": "^7.2.10",
+		"@size-limit/preset-small-lib": "^11.0.0",
+		"@testing-library/jest-dom": "^6.1.5",
+		"@testing-library/react": "^14.1.2",
+		"@types/react": "^18.2.42",
+		"@types/react-dom": "^18.2.17",
+		"@vitejs/plugin-react": "^4.2.1",
+		"@vitest/coverage-v8": "^0.34.6",
+		"jsdom": "^22.1.0",
+		"prettier": "^3.1.0",
+		"react-dom": "^18.2.0",
+		"rimraf": "^5.0.5",
+		"size-limit": "^11.0.0",
+		"typeit-react": "^2.7.0",
+		"typescript": "^5.3.2",
+		"vite": "^5.0.5",
+		"vite-plugin-dts": "^3.6.4",
+		"vitest": "^0.34.6"
+	},
+	"size-limit": [
+		{
+			"name": "cjs",
+			"path": "dist/index.cjs",
+			"gzip": true
+		},
+		{
+			"name": "esm",
+			"path": "dist/index.js",
+			"gzip": true
+		}
+	],
+	"author": "mddanish00",
+	"contributors": [
+		"benmneb"
+	],
+	"homepage": "https://mddanish00.github.io/mui-image-alter",
+	"license": "ISC",
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/mddanish00/mui-image-alter.git"
+	},
+	"keywords": [
+		"material-ui",
+		"material-ui image",
+		"material-ui-image",
+		"material design",
+		"react",
+		"loading image"
+	],
+	"dependencies": {
+		"clsx": "^2.0.0",
+		"use-resize-observer": "^9.1.0"
+	}
+}