@yamada-ui/avatar - npm Package Compare versions

Comparing version 0.0.0-dev-20231224084558 to 0.0.0-dev-20231224222706

dist/avatar-badge.d.ts

 import * as _yamada_ui_core from '@yamada-ui/core';
-import { HTMLUIProps } from '@yamada-ui/core';
+import { HTMLUIProps, AnimationStyle } from '@yamada-ui/core';
 
@@ -11,2 +11,32 @@ type AvatarBadgeOptions = {
     placement?: "top-start" | "top-end" | "bottom-start" | "bottom-end";
+    /**
+     * If `true`, make an element scale and fade like a radar ping or ripple of water.
+     *
+     * @default false
+     */
+    ping?: boolean;
+    /**
+     * It is used for the color of the ping animation.
+     *
+     * @default '["blackAlpha.400", "whiteAlpha.500"]''
+     */
+    pingColor?: HTMLUIProps<"div">["backgroundColor"];
+    /**
+     * It is used for the scale of the ping animation.
+     *
+     * @default 1.8
+     */
+    pingScale?: number;
+    /**
+     * It is used for the count of the ping animation.
+     *
+     * @default "infinite"
+     */
+    pingCount?: AnimationStyle["iterationCount"];
+    /**
+     * It is used for the duration of the ping animation.
+     *
+     * @default "1.4s"
+     */
+    pingDuration?: AnimationStyle["direction"];
 };
@@ -13,0 +43,0 @@ type AvatarBadgeProps = HTMLUIProps<"div"> & AvatarBadgeOptions;

dist/avatar-badge.js

@@ -28,2 +28,3 @@ "use client"
 var import_core3 = require("@yamada-ui/core");
+var import_use_animation = require("@yamada-ui/use-animation");
 var import_utils2 = require("@yamada-ui/utils");
@@ -235,4 +236,27 @@
 var AvatarBadge = (0, import_core3.forwardRef)(
-  ({ className, boxSize = "1em", placement = "bottom-end", ...rest }, ref) => {
+  ({
+    className,
+    boxSize = "1em",
+    placement = "bottom-end",
+    ping,
+    pingColor = ["blackAlpha.400", "whiteAlpha.500"],
+    pingDuration = "1.4s",
+    pingCount = "infinite",
+    pingScale = 1.8,
+    children,
+    ...rest
+  }, ref) => {
     const styles = useAvatarContext();
+    const animation = (0, import_use_animation.useAnimation)({
+      keyframes: {
+        "75%, 100%": {
+          transform: `scale(${pingScale})`,
+          opacity: 0
+        }
+      },
+      fillMode: "forwards",
+      duration: pingDuration,
+      timingFunction: "cubic-bezier(0, 0, 0.2, 1)",
+      iterationCount: pingCount
+    });
     const css = {
@@ -246,3 +270,3 @@ position: "absolute",
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
       import_core3.ui.div,
@@ -254,3 +278,21 @@ {
         __css: css,
-        ...rest
+        ...rest,
+        children: [
+          children,
+          ping ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            import_core3.ui.div,
+            {
+              className: "ui-avatar__badge__ping",
+              __css: {
+                position: "absolute",
+                boxSize: "full",
+                rounded: "full",
+                opacity: 0.75,
+                zIndex: -1,
+                bg: pingColor
+              },
+              animation
+            }
+          ) : null
+        ]
       }
@@ -257,0 +299,0 @@ );

dist/index.js

@@ -288,2 +288,3 @@ "use client"
 var import_core4 = require("@yamada-ui/core");
+var import_use_animation = require("@yamada-ui/use-animation");
 var import_utils3 = require("@yamada-ui/utils");
@@ -314,4 +315,27 @@ var import_jsx_runtime5 = require("react/jsx-runtime");
 var AvatarBadge = (0, import_core4.forwardRef)(
-  ({ className, boxSize = "1em", placement = "bottom-end", ...rest }, ref) => {
+  ({
+    className,
+    boxSize = "1em",
+    placement = "bottom-end",
+    ping,
+    pingColor = ["blackAlpha.400", "whiteAlpha.500"],
+    pingDuration = "1.4s",
+    pingCount = "infinite",
+    pingScale = 1.8,
+    children,
+    ...rest
+  }, ref) => {
     const styles = useAvatarContext();
+    const animation = (0, import_use_animation.useAnimation)({
+      keyframes: {
+        "75%, 100%": {
+          transform: `scale(${pingScale})`,
+          opacity: 0
+        }
+      },
+      fillMode: "forwards",
+      duration: pingDuration,
+      timingFunction: "cubic-bezier(0, 0, 0.2, 1)",
+      iterationCount: pingCount
+    });
     const css = {
@@ -325,3 +349,3 @@ position: "absolute",
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
       import_core4.ui.div,
@@ -333,3 +357,21 @@ {
         __css: css,
-        ...rest
+        ...rest,
+        children: [
+          children,
+          ping ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            import_core4.ui.div,
+            {
+              className: "ui-avatar__badge__ping",
+              __css: {
+                position: "absolute",
+                boxSize: "full",
+                rounded: "full",
+                opacity: 0.75,
+                zIndex: -1,
+                bg: pingColor
+              },
+              animation
+            }
+          ) : null
+        ]
       }
@@ -336,0 +378,0 @@ );

package.json

 {
   "name": "@yamada-ui/avatar",
-  "version": "0.0.0-dev-20231224084558",
+  "version": "0.0.0-dev-20231224222706",
   "description": "Yamada UI avatar component",
@@ -39,6 +39,7 @@ "keywords": [
   "dependencies": {
-    "@yamada-ui/core": "0.0.0-dev-20231224084558",
-    "@yamada-ui/utils": "0.0.0-dev-20231224084558",
-    "@yamada-ui/image": "0.0.0-dev-20231224084558",
-    "@yamada-ui/icon": "0.0.0-dev-20231224084558"
+    "@yamada-ui/core": "1.0.0",
+    "@yamada-ui/utils": "1.0.0",
+    "@yamada-ui/image": "1.0.0",
+    "@yamada-ui/icon": "1.0.0",
+    "@yamada-ui/use-animation": "1.0.0"
   },
@@ -45,0 +46,0 @@ "devDependencies": {

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

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

135966

increased by9.54%

Lines of code

1814

increased by9.41%

Worsened metrics

Dependency count

6

increased by20%

Dependency changes

• + Added@yamada-ui/use-animation@1.0.0

• + Added@yamada-ui/core@1.0.0(transitive)

• + Added@yamada-ui/icon@1.0.0(transitive)

• + Added@yamada-ui/image@1.0.0(transitive)

• + Added@yamada-ui/portal@1.0.0(transitive)

• + Added@yamada-ui/use-animation@1.0.0(transitive)

• + Added@yamada-ui/use-boolean@1.0.0(transitive)

• + Added@yamada-ui/use-event-listener@1.0.0(transitive)

• + Added@yamada-ui/use-token@1.0.0(transitive)

• + Added@yamada-ui/utils@1.0.0(transitive)

• - Removed@yamada-ui/core@0.0.0-dev-20231224084558(transitive)

• - Removed@yamada-ui/icon@0.0.0-dev-20231224084558(transitive)

• - Removed@yamada-ui/image@0.0.0-dev-20231224084558(transitive)

• - Removed@yamada-ui/portal@0.0.0-dev-20231224084558(transitive)

• - Removed@yamada-ui/use-token@0.0.0-dev-20231224084558(transitive)

• - Removed@yamada-ui/utils@0.0.0-dev-20231224084558(transitive)

• Updated@yamada-ui/core@1.0.0

• Updated@yamada-ui/icon@1.0.0

• Updated@yamada-ui/image@1.0.0

• Updated@yamada-ui/utils@1.0.0