@yamada-ui/image - npm Package Compare versions

Comparing version 1.0.33 to 1.1.0-dev-20240723153523

dist/image.d.ts

 import * as _yamada_ui_core from '@yamada-ui/core';
-import { HTMLUIProps, CSSUIProps } from '@yamada-ui/core';
+import { HTMLUIProps, ThemeProps, CSSUIProps } from '@yamada-ui/core';
 import { ReactElement } from 'react';
@@ -20,2 +20,4 @@ import { UseImageProps } from './use-image.js';
      * The CSS `box-size` property.
+     *
+     * @deprecated Use `boxSize` instead.
      */
@@ -28,3 +30,3 @@ size?: CSSUIProps["boxSize"];
 };
-type ImageProps = Omit<HTMLUIProps<"img">, keyof UseImageProps> & UseImageProps & ImageOptions;
+type ImageProps = Omit<HTMLUIProps<"img">, keyof UseImageProps> & Omit<ThemeProps<"Image">, "size"> & UseImageProps & ImageOptions;
 /**
@@ -31,0 +33,0 @@ * `Image` is a component that displays images with fallback support.

dist/image.js

@@ -90,3 +90,8 @@ "use client"
 var Image2 = (0, import_core.forwardRef)((props, ref) => {
+  const [styles, { size: boxSize, ...mergedProps }] = (0, import_core.useComponentStyle)(
+    "Image",
+    props
+  );
   let {
+    fit: objectFit,
     fallback,
@@ -103,9 +108,10 @@ src,
     referrerPolicy,
-    size: boxSize,
-    fit: objectFit,
     ...rest
-  } = props;
+  } = (0, import_core.omitThemeProps)(mergedProps);
   ignoreFallback = loading != null || ignoreFallback || !fallback;
+  const css = (0, import_react2.useMemo)(
+    () => ({ ...styles, boxSize, objectFit }),
+    [styles, boxSize, objectFit]
+  );
   const status = useImage({ ...props, ignoreFallback });
-  const css = (0, import_react2.useMemo)(() => ({ boxSize, objectFit }), [boxSize, objectFit]);
   const isFallbackImage = shouldShowFallbackImage(status, fallbackStrategy);
@@ -112,0 +118,0 @@ if (isFallbackImage) {

dist/index.js

@@ -93,3 +93,8 @@ "use client"
 var Image2 = (0, import_core.forwardRef)((props, ref) => {
+  const [styles, { size: boxSize, ...mergedProps }] = (0, import_core.useComponentStyle)(
+    "Image",
+    props
+  );
   let {
+    fit: objectFit,
     fallback,
@@ -106,9 +111,10 @@ src,
     referrerPolicy,
-    size: boxSize,
-    fit: objectFit,
     ...rest
-  } = props;
+  } = (0, import_core.omitThemeProps)(mergedProps);
   ignoreFallback = loading != null || ignoreFallback || !fallback;
+  const css = (0, import_react2.useMemo)(
+    () => ({ ...styles, boxSize, objectFit }),
+    [styles, boxSize, objectFit]
+  );
   const status = useImage({ ...props, ignoreFallback });
-  const css = (0, import_react2.useMemo)(() => ({ boxSize, objectFit }), [boxSize, objectFit]);
   const isFallbackImage = shouldShowFallbackImage(status, fallbackStrategy);
@@ -115,0 +121,0 @@ if (isFallbackImage) {

package.json

 {
   "name": "@yamada-ui/image",
-  "version": "1.0.33",
+  "version": "1.1.0-dev-20240723153523",
   "description": "Yamada UI media and image component",
@@ -5,0 +5,0 @@ "keywords": [

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

55192

increased by3.72%

Lines of code

629

increased by4.14%

Worsened metrics

Number of low quality alerts

1

increased byInfinity%

No dependency changes