virtuo-ui-library 1.0.1 → 1.0.2

package/dist/index.js

@@ -266,89 +266,72 @@ function shadeColor2(hex, percent) {
 var import_react3 = __toESM(require("react"));
 var ProfileCard = ({
   name = "John Doe",
-  role = "Frontend Developer",
-  avatar = "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=400&q=80",
-  bio = "Passionate about building modern, scalable, and user-friendly web applications.",
-  location = "New York, USA",
-  followers = "12.4K",
-  following = "480",
-  posts = "128",
-  primaryColor = "#2563eb",
-  buttonText = "Follow",
-  onButtonClick = () => {
-  }
+  role = "Software Engineer",
+  avatarUrl = "https://i.pravatar.cc/150?img=3",
+  color = "#4f46e5",
+  size = "medium"
 }) => {
-  const [hovered, setHovered] = (0, import_react3.useState)(false);
+  const [isHovered, setIsHovered] = (0, import_react3.useState)(false);
+  const [isFollowing, setIsFollowing] = (0, import_react3.useState)(false);
+  const sizeMap = {
+    small: { width: 220, avatar: 60, fontSize: 14 },
+    medium: { width: 280, avatar: 80, fontSize: 16 },
+    large: { width: 340, avatar: 100, fontSize: 18 }
+  };
+  const { width, avatar, fontSize } = sizeMap[size] || sizeMap.medium;
+  const cardStyle = {
+    width,
+    padding: "20px",
+    borderRadius: "16px",
+    textAlign: "center",
+    fontFamily: "Arial, sans-serif",
+    backgroundColor: "#ffffff",
+    boxShadow: isHovered ? "0 12px 24px rgba(0,0,0,0.15)" : "0 4px 12px rgba(0,0,0,0.08)",
+    transform: isHovered ? "translateY(-4px)" : "translateY(0)",
+    transition: "all 0.25s ease-in-out",
+    border: `1px solid ${color}20`
+  };
+  const avatarStyle = {
+    width: avatar,
+    height: avatar,
+    borderRadius: "50%",
+    objectFit: "cover",
+    border: `3px solid ${color}`,
+    marginBottom: "12px"
+  };
+  const nameStyle = {
+    margin: 0,
+    fontSize: fontSize + 4,
+    fontWeight: "bold",
+    color: "#1f2937"
+  };
+  const roleStyle = {
+    margin: "4px 0 16px",
+    fontSize,
+    color: "#6b7280"
+  };
+  const buttonStyle = {
+    padding: "8px 20px",
+    borderRadius: "999px",
+    cursor: "pointer",
+    fontSize,
+    fontWeight: 600,
+    color: isFollowing ? color : "#ffffff",
+    backgroundColor: isFollowing ? "#ffffff" : color,
+    border: `2px solid ${color}`,
+    transition: "all 0.2s ease-in-out"
+  };
   return /* @__PURE__ */ import_react3.default.createElement(
     "div",
     {
-      className: `w-full max-w-sm rounded-3xl bg-white shadow-lg overflow-hidden transition-all duration-300 ${hovered ? "scale-[1.02] shadow-2xl" : ""}`,
-      onMouseEnter: () => setHovered(true),
-      onMouseLeave: () => setHovered(false),
-      "aria-label": "Profile Card"
+      style: cardStyle,
+      onMouseEnter: () => setIsHovered(true),
+      onMouseLeave: () => setIsHovered(false)
     },
-    /* @__PURE__ */ import_react3.default.createElement(
-      "div",
-      {
-        className: "h-28",
-        style: {
-          background: `linear-gradient(135deg, ${primaryColor}, #7c3aed)`
-        }
-      }
-    ),
-    /* @__PURE__ */ import_react3.default.createElement("div", { className: "relative flex flex-col items-center px-6 pb-6" }, /* @__PURE__ */ import_react3.default.createElement(
-      "img",
-      {
-        src: avatar,
-        alt: `${name}'s avatar`,
-        className: "w-28 h-28 rounded-full border-4 border-white object-cover -mt-14 shadow-md"
-      }
-    ), /* @__PURE__ */ import_react3.default.createElement("h2", { className: "mt-4 text-2xl font-bold text-gray-900" }, name), /* @__PURE__ */ import_react3.default.createElement(
-      "p",
-      {
-        className: "mt-1 text-sm font-medium",
-        style: { color: primaryColor }
-      },
-      role
-    ), /* @__PURE__ */ import_react3.default.createElement("p", { className: "mt-3 text-center text-gray-500 text-sm" }, bio), /* @__PURE__ */ import_react3.default.createElement("div", { className: "mt-3 flex items-center gap-2 text-sm text-gray-500" }, /* @__PURE__ */ import_react3.default.createElement(
-      "svg",
-      {
-        xmlns: "http://www.w3.org/2000/svg",
-        className: "w-4 h-4",
-        fill: "none",
-        viewBox: "0 0 24 24",
-        stroke: "currentColor"
-      },
-      /* @__PURE__ */ import_react3.default.createElement(
-        "path",
-        {
-          strokeLinecap: "round",
-          strokeLinejoin: "round",
-          strokeWidth: 2,
-          d: "M17.657 16.657L13.414 20.9a2 2 0 01-2.828 0l-4.243-4.243a8 8 0 1111.314 0z"
-        }
-      ),
-      /* @__PURE__ */ import_react3.default.createElement(
-        "path",
-        {
-          strokeLinecap: "round",
-          strokeLinejoin: "round",
-          strokeWidth: 2,
-          d: "M15 11a3 3 0 11-6 0 3 3 0 016 0z"
-        }
-      )
-    ), location), /* @__PURE__ */ import_react3.default.createElement("div", { className: "mt-6 grid grid-cols-3 w-full text-center border-y border-gray-200 py-4" }, /* @__PURE__ */ import_react3.default.createElement("div", null, /* @__PURE__ */ import_react3.default.createElement("p", { className: "font-bold text-gray-900" }, posts), /* @__PURE__ */ import_react3.default.createElement("p", { className: "text-xs text-gray-500 mt-1" }, "Posts")), /* @__PURE__ */ import_react3.default.createElement("div", null, /* @__PURE__ */ import_react3.default.createElement("p", { className: "font-bold text-gray-900" }, followers), /* @__PURE__ */ import_react3.default.createElement("p", { className: "text-xs text-gray-500 mt-1" }, "Followers")), /* @__PURE__ */ import_react3.default.createElement("div", null, /* @__PURE__ */ import_react3.default.createElement("p", { className: "font-bold text-gray-900" }, following), /* @__PURE__ */ import_react3.default.createElement("p", { className: "text-xs text-gray-500 mt-1" }, "Following"))), /* @__PURE__ */ import_react3.default.createElement(
-      "button",
-      {
-        onClick: onButtonClick,
-        className: "mt-6 w-full rounded-xl px-5 py-3 text-white font-semibold transition-all duration-300 hover:opacity-90 hover:scale-[1.02] focus:outline-none focus:ring-4",
-        style: {
-          backgroundColor: primaryColor,
-          boxShadow: `0 10px 25px ${primaryColor}33`
-        }
-      },
-      buttonText
-    ))
+    /* @__PURE__ */ import_react3.default.createElement("img", { src: avatarUrl, alt: name, style: avatarStyle }),
+    /* @__PURE__ */ import_react3.default.createElement("h3", { style: nameStyle }, name),
+    /* @__PURE__ */ import_react3.default.createElement("p", { style: roleStyle }, role),
+    /* @__PURE__ */ import_react3.default.createElement("button", { style: buttonStyle, onClick: () => setIsFollowing(!isFollowing) }, isFollowing ? "Following" : "Follow")
   );
 };
 // Annotate the CommonJS export names for ESM import in node:

package/dist/index.mjs

@@ -229,89 +229,72 @@ function shadeColor2(hex, percent) {
 import React3, { useState as useState3 } from "react";
 var ProfileCard = ({
   name = "John Doe",
-  role = "Frontend Developer",
-  avatar = "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=400&q=80",
-  bio = "Passionate about building modern, scalable, and user-friendly web applications.",
-  location = "New York, USA",
-  followers = "12.4K",
-  following = "480",
-  posts = "128",
-  primaryColor = "#2563eb",
-  buttonText = "Follow",
-  onButtonClick = () => {
-  }
+  role = "Software Engineer",
+  avatarUrl = "https://i.pravatar.cc/150?img=3",
+  color = "#4f46e5",
+  size = "medium"
 }) => {
-  const [hovered, setHovered] = useState3(false);
+  const [isHovered, setIsHovered] = useState3(false);
+  const [isFollowing, setIsFollowing] = useState3(false);
+  const sizeMap = {
+    small: { width: 220, avatar: 60, fontSize: 14 },
+    medium: { width: 280, avatar: 80, fontSize: 16 },
+    large: { width: 340, avatar: 100, fontSize: 18 }
+  };
+  const { width, avatar, fontSize } = sizeMap[size] || sizeMap.medium;
+  const cardStyle = {
+    width,
+    padding: "20px",
+    borderRadius: "16px",
+    textAlign: "center",
+    fontFamily: "Arial, sans-serif",
+    backgroundColor: "#ffffff",
+    boxShadow: isHovered ? "0 12px 24px rgba(0,0,0,0.15)" : "0 4px 12px rgba(0,0,0,0.08)",
+    transform: isHovered ? "translateY(-4px)" : "translateY(0)",
+    transition: "all 0.25s ease-in-out",
+    border: `1px solid ${color}20`
+  };
+  const avatarStyle = {
+    width: avatar,
+    height: avatar,
+    borderRadius: "50%",
+    objectFit: "cover",
+    border: `3px solid ${color}`,
+    marginBottom: "12px"
+  };
+  const nameStyle = {
+    margin: 0,
+    fontSize: fontSize + 4,
+    fontWeight: "bold",
+    color: "#1f2937"
+  };
+  const roleStyle = {
+    margin: "4px 0 16px",
+    fontSize,
+    color: "#6b7280"
+  };
+  const buttonStyle = {
+    padding: "8px 20px",
+    borderRadius: "999px",
+    cursor: "pointer",
+    fontSize,
+    fontWeight: 600,
+    color: isFollowing ? color : "#ffffff",
+    backgroundColor: isFollowing ? "#ffffff" : color,
+    border: `2px solid ${color}`,
+    transition: "all 0.2s ease-in-out"
+  };
   return /* @__PURE__ */ React3.createElement(
     "div",
     {
-      className: `w-full max-w-sm rounded-3xl bg-white shadow-lg overflow-hidden transition-all duration-300 ${hovered ? "scale-[1.02] shadow-2xl" : ""}`,
-      onMouseEnter: () => setHovered(true),
-      onMouseLeave: () => setHovered(false),
-      "aria-label": "Profile Card"
+      style: cardStyle,
+      onMouseEnter: () => setIsHovered(true),
+      onMouseLeave: () => setIsHovered(false)
     },
-    /* @__PURE__ */ React3.createElement(
-      "div",
-      {
-        className: "h-28",
-        style: {
-          background: `linear-gradient(135deg, ${primaryColor}, #7c3aed)`
-        }
-      }
-    ),
-    /* @__PURE__ */ React3.createElement("div", { className: "relative flex flex-col items-center px-6 pb-6" }, /* @__PURE__ */ React3.createElement(
-      "img",
-      {
-        src: avatar,
-        alt: `${name}'s avatar`,
-        className: "w-28 h-28 rounded-full border-4 border-white object-cover -mt-14 shadow-md"
-      }
-    ), /* @__PURE__ */ React3.createElement("h2", { className: "mt-4 text-2xl font-bold text-gray-900" }, name), /* @__PURE__ */ React3.createElement(
-      "p",
-      {
-        className: "mt-1 text-sm font-medium",
-        style: { color: primaryColor }
-      },
-      role
-    ), /* @__PURE__ */ React3.createElement("p", { className: "mt-3 text-center text-gray-500 text-sm" }, bio), /* @__PURE__ */ React3.createElement("div", { className: "mt-3 flex items-center gap-2 text-sm text-gray-500" }, /* @__PURE__ */ React3.createElement(
-      "svg",
-      {
-        xmlns: "http://www.w3.org/2000/svg",
-        className: "w-4 h-4",
-        fill: "none",
-        viewBox: "0 0 24 24",
-        stroke: "currentColor"
-      },
-      /* @__PURE__ */ React3.createElement(
-        "path",
-        {
-          strokeLinecap: "round",
-          strokeLinejoin: "round",
-          strokeWidth: 2,
-          d: "M17.657 16.657L13.414 20.9a2 2 0 01-2.828 0l-4.243-4.243a8 8 0 1111.314 0z"
-        }
-      ),
-      /* @__PURE__ */ React3.createElement(
-        "path",
-        {
-          strokeLinecap: "round",
-          strokeLinejoin: "round",
-          strokeWidth: 2,
-          d: "M15 11a3 3 0 11-6 0 3 3 0 016 0z"
-        }
-      )
-    ), location), /* @__PURE__ */ React3.createElement("div", { className: "mt-6 grid grid-cols-3 w-full text-center border-y border-gray-200 py-4" }, /* @__PURE__ */ React3.createElement("div", null, /* @__PURE__ */ React3.createElement("p", { className: "font-bold text-gray-900" }, posts), /* @__PURE__ */ React3.createElement("p", { className: "text-xs text-gray-500 mt-1" }, "Posts")), /* @__PURE__ */ React3.createElement("div", null, /* @__PURE__ */ React3.createElement("p", { className: "font-bold text-gray-900" }, followers), /* @__PURE__ */ React3.createElement("p", { className: "text-xs text-gray-500 mt-1" }, "Followers")), /* @__PURE__ */ React3.createElement("div", null, /* @__PURE__ */ React3.createElement("p", { className: "font-bold text-gray-900" }, following), /* @__PURE__ */ React3.createElement("p", { className: "text-xs text-gray-500 mt-1" }, "Following"))), /* @__PURE__ */ React3.createElement(
-      "button",
-      {
-        onClick: onButtonClick,
-        className: "mt-6 w-full rounded-xl px-5 py-3 text-white font-semibold transition-all duration-300 hover:opacity-90 hover:scale-[1.02] focus:outline-none focus:ring-4",
-        style: {
-          backgroundColor: primaryColor,
-          boxShadow: `0 10px 25px ${primaryColor}33`
-        }
-      },
-      buttonText
-    ))
+    /* @__PURE__ */ React3.createElement("img", { src: avatarUrl, alt: name, style: avatarStyle }),
+    /* @__PURE__ */ React3.createElement("h3", { style: nameStyle }, name),
+    /* @__PURE__ */ React3.createElement("p", { style: roleStyle }, role),
+    /* @__PURE__ */ React3.createElement("button", { style: buttonStyle, onClick: () => setIsFollowing(!isFollowing) }, isFollowing ? "Following" : "Follow")
   );
 };
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "virtuo-ui-library",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "Virtual UI React Component Library",
   "license": "ISC",
   "author": "Ritik Saini",