virtual-ui-lib 1.0.25 → 1.0.26

package/dist/index.js

@@ -41,7 +41,8 @@ __export(index_exports, {
   Loader: () => Loader,
   Navbar: () => Navbar,
   OTPInput: () => OTPInput,
-  RatingStars: () => RatingStars
+  RatingStars: () => RatingStars,
+  UserAvatar: () => UserAvatar
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -764,6 +765,67 @@ var RatingStars = ({
     /* @__PURE__ */ import_react13.default.createElement("polygon", { points: "12 2 15.09 8.26 22 9.27 17 14.14 18.18 21 12 17.77 5.82 21 7 14.14 2 9.27 8.91 8.26 12 2" })
   )));
 };
+
+// src/components/UserAvatar/UserAvatar.jsx
+var import_react14 = __toESM(require("react"));
+var UserAvatar = ({
+  size = "50px",
+  src = "",
+  initials = "AB",
+  online = false,
+  busy = false,
+  showStatus = true,
+  bgColor = "#1e293b",
+  textColor = "#f1f5f9",
+  statusColor = "#22c55e",
+  borderColor = "#7c3aed"
+}) => {
+  return /* @__PURE__ */ import_react14.default.createElement(
+    "div",
+    {
+      style: {
+        position: "relative",
+        width: size,
+        height: size,
+        borderRadius: "50%",
+        backgroundColor: bgColor,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        transition: "transform 0.2s",
+        cursor: "pointer",
+        overflow: "hidden",
+        boxShadow: "0 4px 14px rgba(0, 0, 0, 0.2)"
+      },
+      onMouseEnter: (e) => {
+        e.currentTarget.style.transform = "scale(1.1)";
+      },
+      onMouseLeave: (e) => {
+        e.currentTarget.style.transform = "scale(1)";
+      }
+    },
+    src ? /* @__PURE__ */ import_react14.default.createElement("img", { src, alt: initials, style: {
+      width: "100%",
+      height: "100%",
+      borderRadius: "50%",
+      objectFit: "cover"
+    } }) : /* @__PURE__ */ import_react14.default.createElement("span", { style: {
+      color: textColor,
+      fontSize: "20px",
+      fontWeight: "700"
+    } }, initials),
+    showStatus && /* @__PURE__ */ import_react14.default.createElement("span", { style: {
+      position: "absolute",
+      bottom: "0",
+      right: "0",
+      width: "12px",
+      height: "12px",
+      borderRadius: "50%",
+      backgroundColor: busy ? "#fbbf24" : online ? statusColor : "#9ca3af",
+      border: "2px solid " + borderColor
+    } })
+  );
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AlertBanner,
@@ -778,5 +840,6 @@ var RatingStars = ({
   Loader,
   Navbar,
   OTPInput,
-  RatingStars
+  RatingStars,
+  UserAvatar
 });

package/dist/index.mjs

@@ -717,6 +717,67 @@ var RatingStars = ({
     /* @__PURE__ */ React13.createElement("polygon", { points: "12 2 15.09 8.26 22 9.27 17 14.14 18.18 21 12 17.77 5.82 21 7 14.14 2 9.27 8.91 8.26 12 2" })
   )));
 };
+
+// src/components/UserAvatar/UserAvatar.jsx
+import React14 from "react";
+var UserAvatar = ({
+  size = "50px",
+  src = "",
+  initials = "AB",
+  online = false,
+  busy = false,
+  showStatus = true,
+  bgColor = "#1e293b",
+  textColor = "#f1f5f9",
+  statusColor = "#22c55e",
+  borderColor = "#7c3aed"
+}) => {
+  return /* @__PURE__ */ React14.createElement(
+    "div",
+    {
+      style: {
+        position: "relative",
+        width: size,
+        height: size,
+        borderRadius: "50%",
+        backgroundColor: bgColor,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        transition: "transform 0.2s",
+        cursor: "pointer",
+        overflow: "hidden",
+        boxShadow: "0 4px 14px rgba(0, 0, 0, 0.2)"
+      },
+      onMouseEnter: (e) => {
+        e.currentTarget.style.transform = "scale(1.1)";
+      },
+      onMouseLeave: (e) => {
+        e.currentTarget.style.transform = "scale(1)";
+      }
+    },
+    src ? /* @__PURE__ */ React14.createElement("img", { src, alt: initials, style: {
+      width: "100%",
+      height: "100%",
+      borderRadius: "50%",
+      objectFit: "cover"
+    } }) : /* @__PURE__ */ React14.createElement("span", { style: {
+      color: textColor,
+      fontSize: "20px",
+      fontWeight: "700"
+    } }, initials),
+    showStatus && /* @__PURE__ */ React14.createElement("span", { style: {
+      position: "absolute",
+      bottom: "0",
+      right: "0",
+      width: "12px",
+      height: "12px",
+      borderRadius: "50%",
+      backgroundColor: busy ? "#fbbf24" : online ? statusColor : "#9ca3af",
+      border: "2px solid " + borderColor
+    } })
+  );
+};
 export {
   AlertBanner,
   Button,
@@ -730,5 +791,6 @@ export {
   Loader,
   Navbar,
   OTPInput,
-  RatingStars
+  RatingStars,
+  UserAvatar
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "virtual-ui-lib",
-  "version": "1.0.25",
+  "version": "1.0.26",
   "description": "Virtual UI React Component Library",
   "author": "Ankush",
   "license": "ISC",