@yakad/ui 1.3.152 → 1.3.153

package/dist/Avatar/Avatar.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+export interface AvatarProps extends React.HTMLAttributes<HTMLDivElement> {
+    src?: string;
+}
+export declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLDivElement>>;
+export default Avatar;

package/dist/Avatar/Avatar.js

@@ -0,0 +1,23 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import classNames from "classnames";
+import styles from "./Avatar.module.css";
+import { Symbol } from "@yakad/symbols";
+export const Avatar = forwardRef(function Avatar(_a, ref) {
+    var { src, className } = _a, restProps = __rest(_a, ["src", "className"]);
+    const joinedClassNames = classNames(styles.profileContainer, className);
+    const backgroundImage = src ? `url(${src})` : `url("./default-avatar.svg")`;
+    return (_jsx("div", Object.assign({ ref: ref }, restProps, { className: joinedClassNames, style: { backgroundImage }, children: _jsx("div", { className: styles.editOverlay, children: _jsx(Symbol, { icon: "edit" }) }) })));
+});
+export default Avatar;

package/dist/Avatar/Avatar.module.css

@@ -0,0 +1,31 @@
+.profileContainer {
+    position: relative;
+    width: 60px;
+    height: 60px;
+    cursor: pointer;
+    border-radius: 50%;
+    overflow: hidden;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background-size: cover;
+    background-position: center;
+    transition: all 0.3s ease;
+}
+
+
+.editOverlay {
+    position: absolute;
+    inset: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+    color: white;
+}
+
+.profileContainer:hover .editOverlay {
+    opacity: 1;
+}

package/dist/WithOverlay/WithOverlay.js

@@ -29,7 +29,7 @@ export const WithOverlay = forwardRef(function WithOverlay(_a, forwardedRef) {
         };
     }, [showOverlay]);
     // Teleport Overlay to portalRoot or body
-    const portalRoot = document.getElementsByClassName("portalRoot")[0] || document.body;
+    const portalRoot = document.getElementsByClassName("portalRoot")[0] || document;
     const teleport = overlay &&
         portalRoot &&
         createPortal(cloneElement(overlay, {

package/dist/index.d.ts

@@ -34,3 +34,4 @@ export * from "./RenderByScroll/RenderByScroll";
 export * from "./ActiveOnVisible/ActiveOnVisible";
 export * from "./Dropdown/Dropdown";
 export * from "./Popup/Popup";
+export * from "./Avatar/Avatar";

package/dist/index.js

@@ -40,3 +40,4 @@ export * from "./ActiveOnVisible/ActiveOnVisible"; // Stack Based
 // Overlays
 export * from "./Dropdown/Dropdown"; // Card Based
 export * from "./Popup/Popup"; // Card Based
+export * from "./Avatar/Avatar";

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@yakad/ui",
-    "version": "1.3.152",
+    "version": "1.3.153",
     "private": false,
     "author": "Natiq",
     "description": "UI components for NextJS/React",