virtual-ui-lib 1.0.25 → 1.0.27

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);
 
@@ -406,83 +407,8 @@ var GridLayout = ({
   return /* @__PURE__ */ import_react7.default.createElement("div", { style: { display: "grid", gridTemplateColumns: `repeat(${cols}, 1fr)`, gap: spacing } }, items.map(renderItem));
 };
 
-// src/components/Navbar/Navbar.jsx
-var import_react8 = __toESM(require("react"));
-var Navbar = ({
-  logo = "Logo",
-  links = [{ name: "Home", href: "#" }, { name: "About", href: "#" }, { name: "Services", href: "#" }, { name: "Contact", href: "#" }],
-  bgColor = "#0f172a",
-  linkColor = "#f1f5f9",
-  hoverColor = "#7c3aed",
-  stickyColor = "#1e293b",
-  radius = "8px"
-}) => {
-  const [isMobileMenuOpen, setMobileMenuOpen] = (0, import_react8.useState)(false);
-  const [isSticky, setSticky] = (0, import_react8.useState)(false);
-  (0, import_react8.useEffect)(() => {
-    const handleScroll = () => {
-      setSticky(window.scrollY > 50);
-    };
-    window.addEventListener("scroll", handleScroll);
-    return () => window.removeEventListener("scroll", handleScroll);
-  }, []);
-  return /* @__PURE__ */ import_react8.default.createElement("nav", { style: {
-    background: isSticky ? stickyColor : bgColor,
-    position: isSticky ? "fixed" : "relative",
-    width: "100%",
-    padding: "10px 20px",
-    boxShadow: isSticky ? "0 2px 10px rgba(0,0,0,0.2)" : "none",
-    transition: "background 0.3s ease"
-  } }, /* @__PURE__ */ import_react8.default.createElement("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" } }, /* @__PURE__ */ import_react8.default.createElement("div", { style: { color: linkColor, fontSize: "20px", fontWeight: "600" } }, logo), /* @__PURE__ */ import_react8.default.createElement("div", { style: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ import_react8.default.createElement("ul", { style: { display: "flex", listStyle: "none", gap: "20px", margin: 0, padding: 0 } }, links.map((link) => /* @__PURE__ */ import_react8.default.createElement("li", { key: link.name }, /* @__PURE__ */ import_react8.default.createElement("a", { href: link.href, style: {
-    textDecoration: "none",
-    color: linkColor,
-    position: "relative",
-    fontSize: "16px",
-    transition: "color 0.3s"
-  }, onMouseOver: (e) => e.currentTarget.style.color = hoverColor, onMouseOut: (e) => e.currentTarget.style.color = linkColor }, link.name, /* @__PURE__ */ import_react8.default.createElement("span", { style: {
-    position: "absolute",
-    bottom: "-3px",
-    left: 0,
-    width: "100%",
-    height: "2px",
-    background: hoverColor,
-    transform: "scaleX(0)",
-    transition: "transform 0.3s ease"
-  }, className: "underline" }))))), /* @__PURE__ */ import_react8.default.createElement("button", { onClick: () => setMobileMenuOpen(true), style: {
-    background: "transparent",
-    color: linkColor,
-    border: "none",
-    cursor: "pointer",
-    fontSize: "16px",
-    marginLeft: "20px"
-  } }, "\u2630"))), isMobileMenuOpen && /* @__PURE__ */ import_react8.default.createElement("div", { style: {
-    position: "fixed",
-    top: 0,
-    right: 0,
-    width: "250px",
-    height: "100%",
-    background: bgColor,
-    boxShadow: "-4px 0 10px rgba(0,0,0,0.5)",
-    padding: "20px",
-    transform: "translateX(0)",
-    transition: "transform 0.3s ease"
-  } }, /* @__PURE__ */ import_react8.default.createElement("button", { onClick: () => setMobileMenuOpen(false), style: {
-    background: "transparent",
-    color: linkColor,
-    border: "none",
-    cursor: "pointer",
-    fontSize: "16px",
-    marginBottom: "20px"
-  } }, "\u2716"), /* @__PURE__ */ import_react8.default.createElement("ul", { style: { listStyle: "none", padding: 0 } }, links.map((link) => /* @__PURE__ */ import_react8.default.createElement("li", { key: link.name, style: { margin: "10px 0" } }, /* @__PURE__ */ import_react8.default.createElement("a", { href: link.href, style: {
-    textDecoration: "none",
-    color: linkColor,
-    fontSize: "18px",
-    transition: "color 0.3s"
-  }, onMouseOver: (e) => e.currentTarget.style.color = hoverColor, onMouseOut: (e) => e.currentTarget.style.color = linkColor }, link.name))))));
-};
-
 // src/components/ImageUploadPreview/ImageUploadPreview.jsx
-var import_react9 = __toESM(require("react"));
+var import_react8 = __toESM(require("react"));
 var ImageUploadPreview = ({
   width = "300px",
   height = "200px",
@@ -492,8 +418,8 @@ var ImageUploadPreview = ({
   borderRadius = "12px",
   onImageChange
 }) => {
-  const [image, setImage] = (0, import_react9.useState)(null);
-  const [error, setError] = (0, import_react9.useState)(false);
+  const [image, setImage] = (0, import_react8.useState)(null);
+  const [error, setError] = (0, import_react8.useState)(false);
   const handleImageChange = (e) => {
     const file = e.target.files[0];
     const validTypes = ["image/png", "image/jpeg", "image/jpg"];
@@ -513,7 +439,7 @@ var ImageUploadPreview = ({
     setImage(null);
     setError(false);
   };
-  return /* @__PURE__ */ import_react9.default.createElement("div", { style: {
+  return /* @__PURE__ */ import_react8.default.createElement("div", { style: {
     display: "flex",
     justifyContent: "center",
     alignItems: "center",
@@ -525,7 +451,7 @@ var ImageUploadPreview = ({
     position: "relative",
     overflow: "hidden",
     transition: "border-color 0.3s"
-  } }, !image && !error && /* @__PURE__ */ import_react9.default.createElement("input", { type: "file", onChange: handleImageChange, style: { display: "none" }, id: "file-input" }), !image && !error && /* @__PURE__ */ import_react9.default.createElement("label", { htmlFor: "file-input", style: { color: "#f1f5f9", cursor: "pointer", textAlign: "center" } }, "Upload Image"), error && /* @__PURE__ */ import_react9.default.createElement("p", { style: { color: errorColor, fontSize: "14px", textAlign: "center" } }, "Invalid image type!"), image && /* @__PURE__ */ import_react9.default.createElement("div", { style: {
+  } }, !image && !error && /* @__PURE__ */ import_react8.default.createElement("input", { type: "file", onChange: handleImageChange, style: { display: "none" }, id: "file-input" }), !image && !error && /* @__PURE__ */ import_react8.default.createElement("label", { htmlFor: "file-input", style: { color: "#f1f5f9", cursor: "pointer", textAlign: "center" } }, "Upload Image"), error && /* @__PURE__ */ import_react8.default.createElement("p", { style: { color: errorColor, fontSize: "14px", textAlign: "center" } }, "Invalid image type!"), image && /* @__PURE__ */ import_react8.default.createElement("div", { style: {
     position: "absolute",
     top: 0,
     left: 0,
@@ -537,14 +463,14 @@ var ImageUploadPreview = ({
     background: "rgba(0,0,0,0.6)",
     transition: "opacity 0.3s",
     opacity: 1
-  } }, /* @__PURE__ */ import_react9.default.createElement("img", { src: image, alt: "Preview", style: {
+  } }, /* @__PURE__ */ import_react8.default.createElement("img", { src: image, alt: "Preview", style: {
     maxWidth: "100%",
     maxHeight: "100%",
     objectFit: "cover",
     transition: "transform 0.3s",
     borderRadius,
     cursor: "zoom-in"
-  }, onMouseEnter: (e) => e.currentTarget.style.transform = "scale(1.05)", onMouseLeave: (e) => e.currentTarget.style.transform = "scale(1)" })), image && /* @__PURE__ */ import_react9.default.createElement("button", { onClick: handleRemove, style: {
+  }, onMouseEnter: (e) => e.currentTarget.style.transform = "scale(1.05)", onMouseLeave: (e) => e.currentTarget.style.transform = "scale(1)" })), image && /* @__PURE__ */ import_react8.default.createElement("button", { onClick: handleRemove, style: {
     position: "absolute",
     top: "10px",
     right: "10px",
@@ -561,23 +487,23 @@ var ImageUploadPreview = ({
 };
 
 // src/components/CopyButton/CopyButton.jsx
-var import_react10 = __toESM(require("react"));
+var import_react9 = __toESM(require("react"));
 var CopyButton = ({
   text = "Copy",
   bg = "#2563eb",
   color = "white",
   radius = "8px",
-  icon = /* @__PURE__ */ import_react10.default.createElement("span", { role: "img", "aria-label": "copy" }, "\u{1F4CB}"),
+  icon = /* @__PURE__ */ import_react9.default.createElement("span", { role: "img", "aria-label": "copy" }, "\u{1F4CB}"),
   padding = "10px 15px",
   shadow = "0 4px 14px rgba(37,99,235,0.4)"
 }) => {
-  const [copied, setCopied] = (0, import_react10.useState)(false);
+  const [copied, setCopied] = (0, import_react9.useState)(false);
   const handleCopy = () => {
     navigator.clipboard.writeText(text);
     setCopied(true);
     setTimeout(() => setCopied(false), 2e3);
   };
-  return /* @__PURE__ */ import_react10.default.createElement(
+  return /* @__PURE__ */ import_react9.default.createElement(
     "button",
     {
       onClick: handleCopy,
@@ -602,7 +528,7 @@ var CopyButton = ({
 };
 
 // src/components/Loader/Loader.jsx
-var import_react11 = __toESM(require("react"));
+var import_react10 = __toESM(require("react"));
 var Loader = ({
   size = "medium",
   fullScreen = false,
@@ -611,11 +537,11 @@ var Loader = ({
   duration = "1s"
 }) => {
   const sizes = { small: "40px", medium: "60px", large: "80px" };
-  const [fadeIn, setFadeIn] = (0, import_react11.useState)(false);
-  (0, import_react11.useEffect)(() => {
+  const [fadeIn, setFadeIn] = (0, import_react10.useState)(false);
+  (0, import_react10.useEffect)(() => {
     setFadeIn(true);
   }, []);
-  return /* @__PURE__ */ import_react11.default.createElement(
+  return /* @__PURE__ */ import_react10.default.createElement(
     "div",
     {
       style: {
@@ -628,7 +554,7 @@ var Loader = ({
         opacity: fadeIn ? 1 : 0
       }
     },
-    /* @__PURE__ */ import_react11.default.createElement(
+    /* @__PURE__ */ import_react10.default.createElement(
       "div",
       {
         style: {
@@ -641,7 +567,7 @@ var Loader = ({
         }
       }
     ),
-    /* @__PURE__ */ import_react11.default.createElement("style", null, `
+    /* @__PURE__ */ import_react10.default.createElement("style", null, `
         @keyframes spin {
           0% { transform: rotate(0deg); }
           100% { transform: rotate(360deg); }
@@ -651,7 +577,7 @@ var Loader = ({
 };
 
 // src/components/OTPInput/OTPInput.jsx
-var import_react12 = __toESM(require("react"));
+var import_react11 = __toESM(require("react"));
 var OTPInput = ({
   length = 4,
   bg = "#0f172a",
@@ -665,9 +591,9 @@ var OTPInput = ({
   error = false,
   success = false
 }) => {
-  const [otp, setOtp] = (0, import_react12.useState)(Array(length).fill(""));
-  const inputRefs = (0, import_react12.useRef)(Array(length).fill().map(() => import_react12.default.createRef()));
-  (0, import_react12.useEffect)(() => {
+  const [otp, setOtp] = (0, import_react11.useState)(Array(length).fill(""));
+  const inputRefs = (0, import_react11.useRef)(Array(length).fill().map(() => import_react11.default.createRef()));
+  (0, import_react11.useEffect)(() => {
     inputRefs.current[0].current.focus();
   }, []);
   const handleChange = (index, value) => {
@@ -697,7 +623,7 @@ var OTPInput = ({
     onChange(newOtp.join(""));
     event.preventDefault();
   };
-  return /* @__PURE__ */ import_react12.default.createElement("div", { style: { display: "flex", justifyContent: "center", gap: "10px" }, onPaste: handlePaste }, otp.map((value, index) => /* @__PURE__ */ import_react12.default.createElement(
+  return /* @__PURE__ */ import_react11.default.createElement("div", { style: { display: "flex", justifyContent: "center", gap: "10px" }, onPaste: handlePaste }, otp.map((value, index) => /* @__PURE__ */ import_react11.default.createElement(
     "input",
     {
       key: index,
@@ -724,7 +650,7 @@ var OTPInput = ({
 };
 
 // src/components/RatingStars/RatingStars.jsx
-var import_react13 = __toESM(require("react"));
+var import_react12 = __toESM(require("react"));
 var RatingStars = ({
   totalStars = 5,
   selectedColor = "#ffc107",
@@ -732,8 +658,8 @@ var RatingStars = ({
   size = "24px",
   onSelect
 }) => {
-  const [hovered, setHovered] = (0, import_react13.useState)(0);
-  const [selected, setSelected] = (0, import_react13.useState)(0);
+  const [hovered, setHovered] = (0, import_react12.useState)(0);
+  const [selected, setSelected] = (0, import_react12.useState)(0);
   const handleMouseEnter = (index) => {
     setHovered(index + 1);
   };
@@ -744,7 +670,7 @@ var RatingStars = ({
     setSelected(index + 1);
     if (onSelect) onSelect(index + 1);
   };
-  return /* @__PURE__ */ import_react13.default.createElement("div", { style: { display: "flex", gap: "4px" } }, [...Array(totalStars)].map((_, index) => /* @__PURE__ */ import_react13.default.createElement(
+  return /* @__PURE__ */ import_react12.default.createElement("div", { style: { display: "flex", gap: "4px" } }, [...Array(totalStars)].map((_, index) => /* @__PURE__ */ import_react12.default.createElement(
     "svg",
     {
       key: index,
@@ -761,9 +687,147 @@ var RatingStars = ({
       onClick: () => handleClick(index),
       style: { transition: "color 0.2s ease" }
     },
-    /* @__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" })
+    /* @__PURE__ */ import_react12.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_react13 = __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_react13.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_react13.default.createElement("img", { src, alt: initials, style: {
+      width: "100%",
+      height: "100%",
+      borderRadius: "50%",
+      objectFit: "cover"
+    } }) : /* @__PURE__ */ import_react13.default.createElement("span", { style: {
+      color: textColor,
+      fontSize: "20px",
+      fontWeight: "700"
+    } }, initials),
+    showStatus && /* @__PURE__ */ import_react13.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
+    } })
+  );
+};
+
+// src/components/Navbar/Navbar.jsx
+var import_react14 = __toESM(require("react"));
+var Navbar = ({
+  logo = "https://via.placeholder.com/150",
+  links = [{ name: "Home", href: "#" }, { name: "About", href: "#" }, { name: "Services", href: "#" }, { name: "Contact", href: "#" }],
+  bgColor = "#0f172a",
+  textColor = "#f1f5f9",
+  linkColor = "#7c3aed",
+  hoverColor = "#818cf8",
+  sticky = false,
+  radius = "8px"
+}) => {
+  const [scrolled, setScrolled] = (0, import_react14.useState)(false);
+  const [isOpen, setIsOpen] = (0, import_react14.useState)(false);
+  (0, import_react14.useEffect)(() => {
+    const handleScroll = () => {
+      setScrolled(window.scrollY > 50);
+    };
+    window.addEventListener("scroll", handleScroll);
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, []);
+  return /* @__PURE__ */ import_react14.default.createElement("nav", { style: {
+    position: sticky || scrolled ? "sticky" : "relative",
+    top: 0,
+    background: bgColor,
+    padding: "10px 20px",
+    borderRadius: radius,
+    boxShadow: scrolled ? "0 4px 10px rgba(0,0,0,0.2)" : "none",
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    transition: "box-shadow 0.3s ease"
+  } }, /* @__PURE__ */ import_react14.default.createElement("img", { src: logo, alt: "Logo", style: { width: "120px" } }), /* @__PURE__ */ import_react14.default.createElement("div", { style: { display: "none", gap: "20px", fontFamily: "system-ui, sans-serif", color: textColor, fontSize: "16px", cursor: "pointer" }, id: "nav-links" }, links.map((link) => /* @__PURE__ */ import_react14.default.createElement("a", { key: link.name, href: link.href, style: {
+    color: textColor,
+    textDecoration: "none",
+    position: "relative"
+  }, onMouseEnter: (e) => e.target.style.color = hoverColor, onMouseLeave: (e) => e.target.style.color = textColor }, link.name, /* @__PURE__ */ import_react14.default.createElement("span", { style: {
+    position: "absolute",
+    width: "100%",
+    height: "2px",
+    background: hoverColor,
+    bottom: "-4px",
+    left: 0,
+    transform: "scaleX(0)",
+    transition: "transform 0.3s ease"
+  }, className: "underline" })))), /* @__PURE__ */ import_react14.default.createElement("div", { style: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ import_react14.default.createElement("button", { onClick: () => setIsOpen(true), style: {
+    background: "transparent",
+    border: "none",
+    color: textColor,
+    cursor: "pointer",
+    fontSize: "16px"
+  } }, "\u2630")), isOpen && /* @__PURE__ */ import_react14.default.createElement("div", { style: {
+    position: "fixed",
+    top: 0,
+    right: 0,
+    width: "250px",
+    height: "100%",
+    background: bgColor,
+    transform: isOpen ? "translateX(0)" : "translateX(100%)",
+    transition: "transform 0.3s ease",
+    padding: "20px",
+    boxShadow: "-3px 0 10px rgba(0,0,0,0.5)",
+    zIndex: 1e3
+  } }, /* @__PURE__ */ import_react14.default.createElement("button", { onClick: () => setIsOpen(false), style: {
+    color: textColor,
+    background: "none",
+    border: "none",
+    fontSize: "24px",
+    cursor: "pointer"
+  } }, "\u2716"), /* @__PURE__ */ import_react14.default.createElement("div", { style: { marginTop: "30px" } }, links.map((link) => /* @__PURE__ */ import_react14.default.createElement("a", { key: link.name, href: link.href, style: {
+    display: "block",
+    color: textColor,
+    textDecoration: "none",
+    margin: "15px 0"
+  } }, link.name)))));
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AlertBanner,
@@ -778,5 +842,6 @@ var RatingStars = ({
   Loader,
   Navbar,
   OTPInput,
-  RatingStars
+  RatingStars,
+  UserAvatar
 });

package/dist/index.mjs

@@ -359,83 +359,8 @@ var GridLayout = ({
   return /* @__PURE__ */ React7.createElement("div", { style: { display: "grid", gridTemplateColumns: `repeat(${cols}, 1fr)`, gap: spacing } }, items.map(renderItem));
 };
 
-// src/components/Navbar/Navbar.jsx
-import React8, { useState as useState5, useEffect as useEffect4 } from "react";
-var Navbar = ({
-  logo = "Logo",
-  links = [{ name: "Home", href: "#" }, { name: "About", href: "#" }, { name: "Services", href: "#" }, { name: "Contact", href: "#" }],
-  bgColor = "#0f172a",
-  linkColor = "#f1f5f9",
-  hoverColor = "#7c3aed",
-  stickyColor = "#1e293b",
-  radius = "8px"
-}) => {
-  const [isMobileMenuOpen, setMobileMenuOpen] = useState5(false);
-  const [isSticky, setSticky] = useState5(false);
-  useEffect4(() => {
-    const handleScroll = () => {
-      setSticky(window.scrollY > 50);
-    };
-    window.addEventListener("scroll", handleScroll);
-    return () => window.removeEventListener("scroll", handleScroll);
-  }, []);
-  return /* @__PURE__ */ React8.createElement("nav", { style: {
-    background: isSticky ? stickyColor : bgColor,
-    position: isSticky ? "fixed" : "relative",
-    width: "100%",
-    padding: "10px 20px",
-    boxShadow: isSticky ? "0 2px 10px rgba(0,0,0,0.2)" : "none",
-    transition: "background 0.3s ease"
-  } }, /* @__PURE__ */ React8.createElement("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" } }, /* @__PURE__ */ React8.createElement("div", { style: { color: linkColor, fontSize: "20px", fontWeight: "600" } }, logo), /* @__PURE__ */ React8.createElement("div", { style: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ React8.createElement("ul", { style: { display: "flex", listStyle: "none", gap: "20px", margin: 0, padding: 0 } }, links.map((link) => /* @__PURE__ */ React8.createElement("li", { key: link.name }, /* @__PURE__ */ React8.createElement("a", { href: link.href, style: {
-    textDecoration: "none",
-    color: linkColor,
-    position: "relative",
-    fontSize: "16px",
-    transition: "color 0.3s"
-  }, onMouseOver: (e) => e.currentTarget.style.color = hoverColor, onMouseOut: (e) => e.currentTarget.style.color = linkColor }, link.name, /* @__PURE__ */ React8.createElement("span", { style: {
-    position: "absolute",
-    bottom: "-3px",
-    left: 0,
-    width: "100%",
-    height: "2px",
-    background: hoverColor,
-    transform: "scaleX(0)",
-    transition: "transform 0.3s ease"
-  }, className: "underline" }))))), /* @__PURE__ */ React8.createElement("button", { onClick: () => setMobileMenuOpen(true), style: {
-    background: "transparent",
-    color: linkColor,
-    border: "none",
-    cursor: "pointer",
-    fontSize: "16px",
-    marginLeft: "20px"
-  } }, "\u2630"))), isMobileMenuOpen && /* @__PURE__ */ React8.createElement("div", { style: {
-    position: "fixed",
-    top: 0,
-    right: 0,
-    width: "250px",
-    height: "100%",
-    background: bgColor,
-    boxShadow: "-4px 0 10px rgba(0,0,0,0.5)",
-    padding: "20px",
-    transform: "translateX(0)",
-    transition: "transform 0.3s ease"
-  } }, /* @__PURE__ */ React8.createElement("button", { onClick: () => setMobileMenuOpen(false), style: {
-    background: "transparent",
-    color: linkColor,
-    border: "none",
-    cursor: "pointer",
-    fontSize: "16px",
-    marginBottom: "20px"
-  } }, "\u2716"), /* @__PURE__ */ React8.createElement("ul", { style: { listStyle: "none", padding: 0 } }, links.map((link) => /* @__PURE__ */ React8.createElement("li", { key: link.name, style: { margin: "10px 0" } }, /* @__PURE__ */ React8.createElement("a", { href: link.href, style: {
-    textDecoration: "none",
-    color: linkColor,
-    fontSize: "18px",
-    transition: "color 0.3s"
-  }, onMouseOver: (e) => e.currentTarget.style.color = hoverColor, onMouseOut: (e) => e.currentTarget.style.color = linkColor }, link.name))))));
-};
-
 // src/components/ImageUploadPreview/ImageUploadPreview.jsx
-import React9, { useState as useState6 } from "react";
+import React8, { useState as useState5 } from "react";
 var ImageUploadPreview = ({
   width = "300px",
   height = "200px",
@@ -445,8 +370,8 @@ var ImageUploadPreview = ({
   borderRadius = "12px",
   onImageChange
 }) => {
-  const [image, setImage] = useState6(null);
-  const [error, setError] = useState6(false);
+  const [image, setImage] = useState5(null);
+  const [error, setError] = useState5(false);
   const handleImageChange = (e) => {
     const file = e.target.files[0];
     const validTypes = ["image/png", "image/jpeg", "image/jpg"];
@@ -466,7 +391,7 @@ var ImageUploadPreview = ({
     setImage(null);
     setError(false);
   };
-  return /* @__PURE__ */ React9.createElement("div", { style: {
+  return /* @__PURE__ */ React8.createElement("div", { style: {
     display: "flex",
     justifyContent: "center",
     alignItems: "center",
@@ -478,7 +403,7 @@ var ImageUploadPreview = ({
     position: "relative",
     overflow: "hidden",
     transition: "border-color 0.3s"
-  } }, !image && !error && /* @__PURE__ */ React9.createElement("input", { type: "file", onChange: handleImageChange, style: { display: "none" }, id: "file-input" }), !image && !error && /* @__PURE__ */ React9.createElement("label", { htmlFor: "file-input", style: { color: "#f1f5f9", cursor: "pointer", textAlign: "center" } }, "Upload Image"), error && /* @__PURE__ */ React9.createElement("p", { style: { color: errorColor, fontSize: "14px", textAlign: "center" } }, "Invalid image type!"), image && /* @__PURE__ */ React9.createElement("div", { style: {
+  } }, !image && !error && /* @__PURE__ */ React8.createElement("input", { type: "file", onChange: handleImageChange, style: { display: "none" }, id: "file-input" }), !image && !error && /* @__PURE__ */ React8.createElement("label", { htmlFor: "file-input", style: { color: "#f1f5f9", cursor: "pointer", textAlign: "center" } }, "Upload Image"), error && /* @__PURE__ */ React8.createElement("p", { style: { color: errorColor, fontSize: "14px", textAlign: "center" } }, "Invalid image type!"), image && /* @__PURE__ */ React8.createElement("div", { style: {
     position: "absolute",
     top: 0,
     left: 0,
@@ -490,14 +415,14 @@ var ImageUploadPreview = ({
     background: "rgba(0,0,0,0.6)",
     transition: "opacity 0.3s",
     opacity: 1
-  } }, /* @__PURE__ */ React9.createElement("img", { src: image, alt: "Preview", style: {
+  } }, /* @__PURE__ */ React8.createElement("img", { src: image, alt: "Preview", style: {
     maxWidth: "100%",
     maxHeight: "100%",
     objectFit: "cover",
     transition: "transform 0.3s",
     borderRadius,
     cursor: "zoom-in"
-  }, onMouseEnter: (e) => e.currentTarget.style.transform = "scale(1.05)", onMouseLeave: (e) => e.currentTarget.style.transform = "scale(1)" })), image && /* @__PURE__ */ React9.createElement("button", { onClick: handleRemove, style: {
+  }, onMouseEnter: (e) => e.currentTarget.style.transform = "scale(1.05)", onMouseLeave: (e) => e.currentTarget.style.transform = "scale(1)" })), image && /* @__PURE__ */ React8.createElement("button", { onClick: handleRemove, style: {
     position: "absolute",
     top: "10px",
     right: "10px",
@@ -514,23 +439,23 @@ var ImageUploadPreview = ({
 };
 
 // src/components/CopyButton/CopyButton.jsx
-import React10, { useState as useState7 } from "react";
+import React9, { useState as useState6 } from "react";
 var CopyButton = ({
   text = "Copy",
   bg = "#2563eb",
   color = "white",
   radius = "8px",
-  icon = /* @__PURE__ */ React10.createElement("span", { role: "img", "aria-label": "copy" }, "\u{1F4CB}"),
+  icon = /* @__PURE__ */ React9.createElement("span", { role: "img", "aria-label": "copy" }, "\u{1F4CB}"),
   padding = "10px 15px",
   shadow = "0 4px 14px rgba(37,99,235,0.4)"
 }) => {
-  const [copied, setCopied] = useState7(false);
+  const [copied, setCopied] = useState6(false);
   const handleCopy = () => {
     navigator.clipboard.writeText(text);
     setCopied(true);
     setTimeout(() => setCopied(false), 2e3);
   };
-  return /* @__PURE__ */ React10.createElement(
+  return /* @__PURE__ */ React9.createElement(
     "button",
     {
       onClick: handleCopy,
@@ -555,7 +480,7 @@ var CopyButton = ({
 };
 
 // src/components/Loader/Loader.jsx
-import React11, { useEffect as useEffect5, useState as useState8 } from "react";
+import React10, { useEffect as useEffect4, useState as useState7 } from "react";
 var Loader = ({
   size = "medium",
   fullScreen = false,
@@ -564,11 +489,11 @@ var Loader = ({
   duration = "1s"
 }) => {
   const sizes = { small: "40px", medium: "60px", large: "80px" };
-  const [fadeIn, setFadeIn] = useState8(false);
-  useEffect5(() => {
+  const [fadeIn, setFadeIn] = useState7(false);
+  useEffect4(() => {
     setFadeIn(true);
   }, []);
-  return /* @__PURE__ */ React11.createElement(
+  return /* @__PURE__ */ React10.createElement(
     "div",
     {
       style: {
@@ -581,7 +506,7 @@ var Loader = ({
         opacity: fadeIn ? 1 : 0
       }
     },
-    /* @__PURE__ */ React11.createElement(
+    /* @__PURE__ */ React10.createElement(
       "div",
       {
         style: {
@@ -594,7 +519,7 @@ var Loader = ({
         }
       }
     ),
-    /* @__PURE__ */ React11.createElement("style", null, `
+    /* @__PURE__ */ React10.createElement("style", null, `
         @keyframes spin {
           0% { transform: rotate(0deg); }
           100% { transform: rotate(360deg); }
@@ -604,7 +529,7 @@ var Loader = ({
 };
 
 // src/components/OTPInput/OTPInput.jsx
-import React12, { useEffect as useEffect6, useRef as useRef2, useState as useState9 } from "react";
+import React11, { useEffect as useEffect5, useRef as useRef2, useState as useState8 } from "react";
 var OTPInput = ({
   length = 4,
   bg = "#0f172a",
@@ -618,9 +543,9 @@ var OTPInput = ({
   error = false,
   success = false
 }) => {
-  const [otp, setOtp] = useState9(Array(length).fill(""));
-  const inputRefs = useRef2(Array(length).fill().map(() => React12.createRef()));
-  useEffect6(() => {
+  const [otp, setOtp] = useState8(Array(length).fill(""));
+  const inputRefs = useRef2(Array(length).fill().map(() => React11.createRef()));
+  useEffect5(() => {
     inputRefs.current[0].current.focus();
   }, []);
   const handleChange = (index, value) => {
@@ -650,7 +575,7 @@ var OTPInput = ({
     onChange(newOtp.join(""));
     event.preventDefault();
   };
-  return /* @__PURE__ */ React12.createElement("div", { style: { display: "flex", justifyContent: "center", gap: "10px" }, onPaste: handlePaste }, otp.map((value, index) => /* @__PURE__ */ React12.createElement(
+  return /* @__PURE__ */ React11.createElement("div", { style: { display: "flex", justifyContent: "center", gap: "10px" }, onPaste: handlePaste }, otp.map((value, index) => /* @__PURE__ */ React11.createElement(
     "input",
     {
       key: index,
@@ -677,7 +602,7 @@ var OTPInput = ({
 };
 
 // src/components/RatingStars/RatingStars.jsx
-import React13, { useState as useState10 } from "react";
+import React12, { useState as useState9 } from "react";
 var RatingStars = ({
   totalStars = 5,
   selectedColor = "#ffc107",
@@ -685,8 +610,8 @@ var RatingStars = ({
   size = "24px",
   onSelect
 }) => {
-  const [hovered, setHovered] = useState10(0);
-  const [selected, setSelected] = useState10(0);
+  const [hovered, setHovered] = useState9(0);
+  const [selected, setSelected] = useState9(0);
   const handleMouseEnter = (index) => {
     setHovered(index + 1);
   };
@@ -697,7 +622,7 @@ var RatingStars = ({
     setSelected(index + 1);
     if (onSelect) onSelect(index + 1);
   };
-  return /* @__PURE__ */ React13.createElement("div", { style: { display: "flex", gap: "4px" } }, [...Array(totalStars)].map((_, index) => /* @__PURE__ */ React13.createElement(
+  return /* @__PURE__ */ React12.createElement("div", { style: { display: "flex", gap: "4px" } }, [...Array(totalStars)].map((_, index) => /* @__PURE__ */ React12.createElement(
     "svg",
     {
       key: index,
@@ -714,9 +639,147 @@ var RatingStars = ({
       onClick: () => handleClick(index),
       style: { transition: "color 0.2s ease" }
     },
-    /* @__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" })
+    /* @__PURE__ */ React12.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 React13 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__ */ React13.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__ */ React13.createElement("img", { src, alt: initials, style: {
+      width: "100%",
+      height: "100%",
+      borderRadius: "50%",
+      objectFit: "cover"
+    } }) : /* @__PURE__ */ React13.createElement("span", { style: {
+      color: textColor,
+      fontSize: "20px",
+      fontWeight: "700"
+    } }, initials),
+    showStatus && /* @__PURE__ */ React13.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
+    } })
+  );
+};
+
+// src/components/Navbar/Navbar.jsx
+import React14, { useState as useState10, useEffect as useEffect6 } from "react";
+var Navbar = ({
+  logo = "https://via.placeholder.com/150",
+  links = [{ name: "Home", href: "#" }, { name: "About", href: "#" }, { name: "Services", href: "#" }, { name: "Contact", href: "#" }],
+  bgColor = "#0f172a",
+  textColor = "#f1f5f9",
+  linkColor = "#7c3aed",
+  hoverColor = "#818cf8",
+  sticky = false,
+  radius = "8px"
+}) => {
+  const [scrolled, setScrolled] = useState10(false);
+  const [isOpen, setIsOpen] = useState10(false);
+  useEffect6(() => {
+    const handleScroll = () => {
+      setScrolled(window.scrollY > 50);
+    };
+    window.addEventListener("scroll", handleScroll);
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, []);
+  return /* @__PURE__ */ React14.createElement("nav", { style: {
+    position: sticky || scrolled ? "sticky" : "relative",
+    top: 0,
+    background: bgColor,
+    padding: "10px 20px",
+    borderRadius: radius,
+    boxShadow: scrolled ? "0 4px 10px rgba(0,0,0,0.2)" : "none",
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    transition: "box-shadow 0.3s ease"
+  } }, /* @__PURE__ */ React14.createElement("img", { src: logo, alt: "Logo", style: { width: "120px" } }), /* @__PURE__ */ React14.createElement("div", { style: { display: "none", gap: "20px", fontFamily: "system-ui, sans-serif", color: textColor, fontSize: "16px", cursor: "pointer" }, id: "nav-links" }, links.map((link) => /* @__PURE__ */ React14.createElement("a", { key: link.name, href: link.href, style: {
+    color: textColor,
+    textDecoration: "none",
+    position: "relative"
+  }, onMouseEnter: (e) => e.target.style.color = hoverColor, onMouseLeave: (e) => e.target.style.color = textColor }, link.name, /* @__PURE__ */ React14.createElement("span", { style: {
+    position: "absolute",
+    width: "100%",
+    height: "2px",
+    background: hoverColor,
+    bottom: "-4px",
+    left: 0,
+    transform: "scaleX(0)",
+    transition: "transform 0.3s ease"
+  }, className: "underline" })))), /* @__PURE__ */ React14.createElement("div", { style: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ React14.createElement("button", { onClick: () => setIsOpen(true), style: {
+    background: "transparent",
+    border: "none",
+    color: textColor,
+    cursor: "pointer",
+    fontSize: "16px"
+  } }, "\u2630")), isOpen && /* @__PURE__ */ React14.createElement("div", { style: {
+    position: "fixed",
+    top: 0,
+    right: 0,
+    width: "250px",
+    height: "100%",
+    background: bgColor,
+    transform: isOpen ? "translateX(0)" : "translateX(100%)",
+    transition: "transform 0.3s ease",
+    padding: "20px",
+    boxShadow: "-3px 0 10px rgba(0,0,0,0.5)",
+    zIndex: 1e3
+  } }, /* @__PURE__ */ React14.createElement("button", { onClick: () => setIsOpen(false), style: {
+    color: textColor,
+    background: "none",
+    border: "none",
+    fontSize: "24px",
+    cursor: "pointer"
+  } }, "\u2716"), /* @__PURE__ */ React14.createElement("div", { style: { marginTop: "30px" } }, links.map((link) => /* @__PURE__ */ React14.createElement("a", { key: link.name, href: link.href, style: {
+    display: "block",
+    color: textColor,
+    textDecoration: "none",
+    margin: "15px 0"
+  } }, link.name)))));
+};
 export {
   AlertBanner,
   Button,
@@ -730,5 +793,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.27",
   "description": "Virtual UI React Component Library",
   "author": "Ankush",
   "license": "ISC",