virtuo-ui-library 1.0.0 → 1.0.2

package/dist/index.js

@@ -30,7 +30,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   Button: () => Button,
-  Card: () => Card
+  Card: () => Card,
+  ProfileCard: () => ProfileCard
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -260,8 +261,82 @@ function shadeColor2(hex, percent) {
   const b = Math.min(255, Math.max(0, (num & 255) + percent));
   return `rgb(${r},${g},${b})`;
 }
+
+// src/components/ProfileCard/ProfileCard.jsx
+var import_react3 = __toESM(require("react"));
+var ProfileCard = ({
+  name = "John Doe",
+  role = "Software Engineer",
+  avatarUrl = "https://i.pravatar.cc/150?img=3",
+  color = "#4f46e5",
+  size = "medium"
+}) => {
+  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",
+    {
+      style: cardStyle,
+      onMouseEnter: () => setIsHovered(true),
+      onMouseLeave: () => setIsHovered(false)
+    },
+    /* @__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:
 0 && (module.exports = {
   Button,
-  Card
+  Card,
+  ProfileCard
 });

package/dist/index.mjs

@@ -224,7 +224,81 @@ function shadeColor2(hex, percent) {
   const b = Math.min(255, Math.max(0, (num & 255) + percent));
   return `rgb(${r},${g},${b})`;
 }
+
+// src/components/ProfileCard/ProfileCard.jsx
+import React3, { useState as useState3 } from "react";
+var ProfileCard = ({
+  name = "John Doe",
+  role = "Software Engineer",
+  avatarUrl = "https://i.pravatar.cc/150?img=3",
+  color = "#4f46e5",
+  size = "medium"
+}) => {
+  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",
+    {
+      style: cardStyle,
+      onMouseEnter: () => setIsHovered(true),
+      onMouseLeave: () => setIsHovered(false)
+    },
+    /* @__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 {
   Button,
-  Card
+  Card,
+  ProfileCard
 };

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "virtuo-ui-library",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "Virtual UI React Component Library",
   "license": "ISC",
   "author": "Ritik Saini",
   "main": "dist/index.js",
-  "module" : "dist/index.mjs",
-  "files": ["dist"],
-
+  "module": "dist/index.mjs",
+  "files": [
+    "dist"
+  ],
   "scripts": {
     "build": "tsup"
   },