virtual-ui-lib 1.0.26 → 1.0.28

package/dist/index.js

@@ -42,7 +42,8 @@ __export(index_exports, {
   Navbar: () => Navbar,
   OTPInput: () => OTPInput,
   RatingStars: () => RatingStars,
-  UserAvatar: () => UserAvatar
+  UserAvatar: () => UserAvatar,
+  WishlistButton: () => WishlistButton
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -407,83 +408,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",
@@ -493,8 +419,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"];
@@ -514,7 +440,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",
@@ -526,7 +452,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,
@@ -538,14 +464,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",
@@ -562,23 +488,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,
@@ -603,7 +529,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,
@@ -612,11 +538,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: {
@@ -629,7 +555,7 @@ var Loader = ({
         opacity: fadeIn ? 1 : 0
       }
     },
-    /* @__PURE__ */ import_react11.default.createElement(
+    /* @__PURE__ */ import_react10.default.createElement(
       "div",
       {
         style: {
@@ -642,7 +568,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); }
@@ -652,7 +578,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",
@@ -666,9 +592,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) => {
@@ -698,7 +624,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,
@@ -725,7 +651,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",
@@ -733,8 +659,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);
   };
@@ -745,7 +671,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,
@@ -762,12 +688,12 @@ 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_react14 = __toESM(require("react"));
+var import_react13 = __toESM(require("react"));
 var UserAvatar = ({
   size = "50px",
   src = "",
@@ -780,7 +706,7 @@ var UserAvatar = ({
   statusColor = "#22c55e",
   borderColor = "#7c3aed"
 }) => {
-  return /* @__PURE__ */ import_react14.default.createElement(
+  return /* @__PURE__ */ import_react13.default.createElement(
     "div",
     {
       style: {
@@ -804,17 +730,17 @@ var UserAvatar = ({
         e.currentTarget.style.transform = "scale(1)";
       }
     },
-    src ? /* @__PURE__ */ import_react14.default.createElement("img", { src, alt: initials, style: {
+    src ? /* @__PURE__ */ import_react13.default.createElement("img", { src, alt: initials, style: {
       width: "100%",
       height: "100%",
       borderRadius: "50%",
       objectFit: "cover"
-    } }) : /* @__PURE__ */ import_react14.default.createElement("span", { style: {
+    } }) : /* @__PURE__ */ import_react13.default.createElement("span", { style: {
       color: textColor,
       fontSize: "20px",
       fontWeight: "700"
     } }, initials),
-    showStatus && /* @__PURE__ */ import_react14.default.createElement("span", { style: {
+    showStatus && /* @__PURE__ */ import_react13.default.createElement("span", { style: {
       position: "absolute",
       bottom: "0",
       right: "0",
@@ -826,6 +752,115 @@ var UserAvatar = ({
     } })
   );
 };
+
+// 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)))));
+};
+
+// src/components/WishlistButton/WishlistButton.jsx
+var import_react15 = __toESM(require("react"));
+var WishlistButton = ({
+  isActive = false,
+  size = "40px",
+  inactiveColor = "#d1d5db",
+  activeColor = "#ff3e30",
+  onToggle
+}) => {
+  const [active, setActive] = (0, import_react15.useState)(isActive);
+  const handleClick = () => {
+    setActive((prev) => !prev);
+    if (onToggle) onToggle(!active);
+  };
+  return /* @__PURE__ */ import_react15.default.createElement("div", { onClick: handleClick, style: { cursor: "pointer", width: size, height: size, display: "flex", alignItems: "center", justifyContent: "center" } }, /* @__PURE__ */ import_react15.default.createElement(
+    "svg",
+    {
+      width: "100%",
+      height: "100%",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      style: {
+        transition: "transform 0.2s",
+        transform: active ? "scale(1.2)" : "scale(1)",
+        fill: active ? activeColor : inactiveColor
+      }
+    },
+    /* @__PURE__ */ import_react15.default.createElement("path", { d: "M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" })
+  ));
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AlertBanner,
@@ -841,5 +876,6 @@ var UserAvatar = ({
   Navbar,
   OTPInput,
   RatingStars,
-  UserAvatar
+  UserAvatar,
+  WishlistButton
 });

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,12 +639,12 @@ 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 React14 from "react";
+import React13 from "react";
 var UserAvatar = ({
   size = "50px",
   src = "",
@@ -732,7 +657,7 @@ var UserAvatar = ({
   statusColor = "#22c55e",
   borderColor = "#7c3aed"
 }) => {
-  return /* @__PURE__ */ React14.createElement(
+  return /* @__PURE__ */ React13.createElement(
     "div",
     {
       style: {
@@ -756,17 +681,17 @@ var UserAvatar = ({
         e.currentTarget.style.transform = "scale(1)";
       }
     },
-    src ? /* @__PURE__ */ React14.createElement("img", { src, alt: initials, style: {
+    src ? /* @__PURE__ */ React13.createElement("img", { src, alt: initials, style: {
       width: "100%",
       height: "100%",
       borderRadius: "50%",
       objectFit: "cover"
-    } }) : /* @__PURE__ */ React14.createElement("span", { style: {
+    } }) : /* @__PURE__ */ React13.createElement("span", { style: {
       color: textColor,
       fontSize: "20px",
       fontWeight: "700"
     } }, initials),
-    showStatus && /* @__PURE__ */ React14.createElement("span", { style: {
+    showStatus && /* @__PURE__ */ React13.createElement("span", { style: {
       position: "absolute",
       bottom: "0",
       right: "0",
@@ -778,6 +703,115 @@ var UserAvatar = ({
     } })
   );
 };
+
+// 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)))));
+};
+
+// src/components/WishlistButton/WishlistButton.jsx
+import React15, { useState as useState11 } from "react";
+var WishlistButton = ({
+  isActive = false,
+  size = "40px",
+  inactiveColor = "#d1d5db",
+  activeColor = "#ff3e30",
+  onToggle
+}) => {
+  const [active, setActive] = useState11(isActive);
+  const handleClick = () => {
+    setActive((prev) => !prev);
+    if (onToggle) onToggle(!active);
+  };
+  return /* @__PURE__ */ React15.createElement("div", { onClick: handleClick, style: { cursor: "pointer", width: size, height: size, display: "flex", alignItems: "center", justifyContent: "center" } }, /* @__PURE__ */ React15.createElement(
+    "svg",
+    {
+      width: "100%",
+      height: "100%",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      style: {
+        transition: "transform 0.2s",
+        transform: active ? "scale(1.2)" : "scale(1)",
+        fill: active ? activeColor : inactiveColor
+      }
+    },
+    /* @__PURE__ */ React15.createElement("path", { d: "M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" })
+  ));
+};
 export {
   AlertBanner,
   Button,
@@ -792,5 +826,6 @@ export {
   Navbar,
   OTPInput,
   RatingStars,
-  UserAvatar
+  UserAvatar,
+  WishlistButton
 };

package/package.json

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