@yakad/ui 1.3.152 → 1.3.154

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/Avatar/default-avatar.svg

@@ -0,0 +1,8 @@
+<!-- default-avatar.svg -->
+<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 256 256" role="img" aria-label="Default avatar">
+  <rect width="100%" height="100%" rx="24" fill="#E6EEF8"/>
+  <g transform="translate(48,40)" fill="none" fill-rule="evenodd">
+    <circle cx="80" cy="56" r="40" fill="#CBDFF6"/>
+    <path d="M0 152c0-44.18 35.82-80 80-80s80 35.82 80 80v8H0v-8z" fill="#B6D0FB"/>
+  </g>
+</svg>

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.154",
     "private": false,
     "author": "Natiq",
     "description": "UI components for NextJS/React",
@@ -23,8 +23,9 @@
     "homepage": "https://yakad.natiq.net",
     "scripts": {
         "clean": "rimraf dist/",
-        "copy-files": "copyfiles -u 1 src/*.css src/**/*.css dist/",
-        "build": "npm run clean && tsc && npm run copy-files",
+        "copy-files:css": "copyfiles -u 1 src/*.css src/**/*.css dist/",
+        "copy-files:svg": "copyfiles -u 1 src/*.svg src/**/*.svg dist/",
+        "build": "npm run clean && tsc && npm run copy-files:css && npm run copy-files:svg",
         "typecheck": "tsc --noEmit",
         "lint": "eslint src/**/*.{ts,tsx}",
         "test": "echo \"No tests specified\" && exit 0",