virtual-ui-lib-clone 1.0.0 → 1.0.2

package/dist/index.js

@@ -1,6 +1,8 @@
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -14,13 +16,22 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.js
 var index_exports = {};
 __export(index_exports, {
   Button: () => Button_default,
-  Card: () => Card
+  Card: () => Card,
+  ProfileCard: () => ProfileCard
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -195,8 +206,74 @@ var Card = ({
     footer && /* @__PURE__ */ React.createElement("div", { style: footerStyle }, footer)
   );
 };
+
+// src/components/profileCard/ProfileCard.jsx
+var import_react3 = __toESM(require("react"));
+var ProfileCard = ({
+  name = "John Doe",
+  role = "Frontend Developer",
+  avatar = "https://via.placeholder.com/100",
+  bgColor = "#ffffff",
+  textColor = "#333",
+  accentColor = "#4CAF50",
+  width = "260px"
+}) => {
+  const [isHovered, setIsHovered] = (0, import_react3.useState)(false);
+  const styles = {
+    card: {
+      width,
+      backgroundColor: bgColor,
+      color: textColor,
+      padding: "20px",
+      borderRadius: "12px",
+      boxShadow: isHovered ? "0 8px 20px rgba(0,0,0,0.2)" : "0 4px 10px rgba(0,0,0,0.1)",
+      textAlign: "center",
+      transition: "0.3s",
+      cursor: "pointer"
+    },
+    avatar: {
+      width: "80px",
+      height: "80px",
+      borderRadius: "50%",
+      objectFit: "cover",
+      marginBottom: "10px",
+      border: `3px solid ${accentColor}`
+    },
+    name: {
+      fontSize: "18px",
+      fontWeight: "bold",
+      margin: "5px 0"
+    },
+    role: {
+      fontSize: "14px",
+      opacity: 0.7
+    },
+    button: {
+      marginTop: "12px",
+      padding: "8px 12px",
+      border: "none",
+      borderRadius: "6px",
+      backgroundColor: accentColor,
+      color: "#fff",
+      cursor: "pointer"
+    }
+  };
+  return /* @__PURE__ */ import_react3.default.createElement(
+    "div",
+    {
+      style: styles.card,
+      onMouseEnter: () => setIsHovered(true),
+      onMouseLeave: () => setIsHovered(false)
+    },
+    /* @__PURE__ */ import_react3.default.createElement("img", { src: avatar, alt: "avatar", style: styles.avatar }),
+    /* @__PURE__ */ import_react3.default.createElement("div", { style: styles.name }, name),
+    /* @__PURE__ */ import_react3.default.createElement("div", { style: styles.role }, role),
+    /* @__PURE__ */ import_react3.default.createElement("button", { style: styles.button }, "Follow")
+  );
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Button,
-  Card
+  Card,
+  ProfileCard
 });

package/dist/index.mjs

@@ -169,7 +169,73 @@ var Card = ({
     footer && /* @__PURE__ */ React.createElement("div", { style: footerStyle }, footer)
   );
 };
+
+// src/components/profileCard/ProfileCard.jsx
+import React2, { useState as useState3 } from "react";
+var ProfileCard = ({
+  name = "John Doe",
+  role = "Frontend Developer",
+  avatar = "https://via.placeholder.com/100",
+  bgColor = "#ffffff",
+  textColor = "#333",
+  accentColor = "#4CAF50",
+  width = "260px"
+}) => {
+  const [isHovered, setIsHovered] = useState3(false);
+  const styles = {
+    card: {
+      width,
+      backgroundColor: bgColor,
+      color: textColor,
+      padding: "20px",
+      borderRadius: "12px",
+      boxShadow: isHovered ? "0 8px 20px rgba(0,0,0,0.2)" : "0 4px 10px rgba(0,0,0,0.1)",
+      textAlign: "center",
+      transition: "0.3s",
+      cursor: "pointer"
+    },
+    avatar: {
+      width: "80px",
+      height: "80px",
+      borderRadius: "50%",
+      objectFit: "cover",
+      marginBottom: "10px",
+      border: `3px solid ${accentColor}`
+    },
+    name: {
+      fontSize: "18px",
+      fontWeight: "bold",
+      margin: "5px 0"
+    },
+    role: {
+      fontSize: "14px",
+      opacity: 0.7
+    },
+    button: {
+      marginTop: "12px",
+      padding: "8px 12px",
+      border: "none",
+      borderRadius: "6px",
+      backgroundColor: accentColor,
+      color: "#fff",
+      cursor: "pointer"
+    }
+  };
+  return /* @__PURE__ */ React2.createElement(
+    "div",
+    {
+      style: styles.card,
+      onMouseEnter: () => setIsHovered(true),
+      onMouseLeave: () => setIsHovered(false)
+    },
+    /* @__PURE__ */ React2.createElement("img", { src: avatar, alt: "avatar", style: styles.avatar }),
+    /* @__PURE__ */ React2.createElement("div", { style: styles.name }, name),
+    /* @__PURE__ */ React2.createElement("div", { style: styles.role }, role),
+    /* @__PURE__ */ React2.createElement("button", { style: styles.button }, "Follow")
+  );
+};
 export {
   Button_default as Button,
-  Card
+  Card,
+  ProfileCard
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "virtual-ui-lib-clone",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "author": "Vasu",
   "license": "ISC",
   "description": "Virtual Ui React Component Library",