vanta-ui 1.0.0 → 1.0.1

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);
 
@@ -227,8 +228,93 @@ var Button = ({
     label
   );
 };
+
+// src/components/ProfileCard/ProfileCard.jsx
+var import_react3 = __toESM(require("react"));
+var ProfileCard = ({
+  name = "John Doe",
+  role = "Frontend Developer",
+  image = "https://via.placeholder.com/120",
+  bio = "Passionate about building modern web experiences.",
+  cardColor = "#ffffff",
+  textColor = "#111827",
+  accentColor = "#2563eb",
+  width = "320px",
+  showButton = true,
+  buttonText = "Follow"
+}) => {
+  const [isFollowing, setIsFollowing] = (0, import_react3.useState)(false);
+  const [hover, setHover] = (0, import_react3.useState)(false);
+  const styles = {
+    card: {
+      width,
+      backgroundColor: cardColor,
+      color: textColor,
+      padding: "20px",
+      borderRadius: "16px",
+      boxShadow: hover ? "0 10px 25px rgba(0,0,0,0.15)" : "0 4px 12px rgba(0,0,0,0.1)",
+      textAlign: "center",
+      transition: "0.3s ease",
+      transform: hover ? "translateY(-5px)" : "translateY(0)",
+      fontFamily: "Arial, sans-serif"
+    },
+    image: {
+      width: "100px",
+      height: "100px",
+      borderRadius: "50%",
+      objectFit: "cover",
+      marginBottom: "15px"
+    },
+    name: {
+      margin: "8px 0",
+      fontSize: "22px",
+      fontWeight: "700"
+    },
+    role: {
+      color: accentColor,
+      fontSize: "15px",
+      marginBottom: "10px"
+    },
+    bio: {
+      fontSize: "14px",
+      lineHeight: "1.5",
+      opacity: 0.8
+    },
+    button: {
+      marginTop: "15px",
+      padding: "10px 20px",
+      border: "none",
+      borderRadius: "8px",
+      backgroundColor: accentColor,
+      color: "#fff",
+      cursor: "pointer",
+      fontSize: "14px"
+    }
+  };
+  return /* @__PURE__ */ import_react3.default.createElement(
+    "div",
+    {
+      style: styles.card,
+      onMouseEnter: () => setHover(true),
+      onMouseLeave: () => setHover(false)
+    },
+    /* @__PURE__ */ import_react3.default.createElement("img", { src: image, alt: name, style: styles.image }),
+    /* @__PURE__ */ import_react3.default.createElement("h2", { style: styles.name }, name),
+    /* @__PURE__ */ import_react3.default.createElement("p", { style: styles.role }, role),
+    /* @__PURE__ */ import_react3.default.createElement("p", { style: styles.bio }, bio),
+    showButton && /* @__PURE__ */ import_react3.default.createElement(
+      "button",
+      {
+        style: styles.button,
+        onClick: () => setIsFollowing(!isFollowing)
+      },
+      isFollowing ? "Following" : buttonText
+    )
+  );
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Button,
-  Card
+  Card,
+  ProfileCard
 });

package/dist/index.mjs

@@ -191,7 +191,92 @@ var Button = ({
     label
   );
 };
+
+// src/components/ProfileCard/ProfileCard.jsx
+import React3, { useState as useState3 } from "react";
+var ProfileCard = ({
+  name = "John Doe",
+  role = "Frontend Developer",
+  image = "https://via.placeholder.com/120",
+  bio = "Passionate about building modern web experiences.",
+  cardColor = "#ffffff",
+  textColor = "#111827",
+  accentColor = "#2563eb",
+  width = "320px",
+  showButton = true,
+  buttonText = "Follow"
+}) => {
+  const [isFollowing, setIsFollowing] = useState3(false);
+  const [hover, setHover] = useState3(false);
+  const styles = {
+    card: {
+      width,
+      backgroundColor: cardColor,
+      color: textColor,
+      padding: "20px",
+      borderRadius: "16px",
+      boxShadow: hover ? "0 10px 25px rgba(0,0,0,0.15)" : "0 4px 12px rgba(0,0,0,0.1)",
+      textAlign: "center",
+      transition: "0.3s ease",
+      transform: hover ? "translateY(-5px)" : "translateY(0)",
+      fontFamily: "Arial, sans-serif"
+    },
+    image: {
+      width: "100px",
+      height: "100px",
+      borderRadius: "50%",
+      objectFit: "cover",
+      marginBottom: "15px"
+    },
+    name: {
+      margin: "8px 0",
+      fontSize: "22px",
+      fontWeight: "700"
+    },
+    role: {
+      color: accentColor,
+      fontSize: "15px",
+      marginBottom: "10px"
+    },
+    bio: {
+      fontSize: "14px",
+      lineHeight: "1.5",
+      opacity: 0.8
+    },
+    button: {
+      marginTop: "15px",
+      padding: "10px 20px",
+      border: "none",
+      borderRadius: "8px",
+      backgroundColor: accentColor,
+      color: "#fff",
+      cursor: "pointer",
+      fontSize: "14px"
+    }
+  };
+  return /* @__PURE__ */ React3.createElement(
+    "div",
+    {
+      style: styles.card,
+      onMouseEnter: () => setHover(true),
+      onMouseLeave: () => setHover(false)
+    },
+    /* @__PURE__ */ React3.createElement("img", { src: image, alt: name, style: styles.image }),
+    /* @__PURE__ */ React3.createElement("h2", { style: styles.name }, name),
+    /* @__PURE__ */ React3.createElement("p", { style: styles.role }, role),
+    /* @__PURE__ */ React3.createElement("p", { style: styles.bio }, bio),
+    showButton && /* @__PURE__ */ React3.createElement(
+      "button",
+      {
+        style: styles.button,
+        onClick: () => setIsFollowing(!isFollowing)
+      },
+      isFollowing ? "Following" : buttonText
+    )
+  );
+};
 export {
   Button,
-  Card
+  Card,
+  ProfileCard
 };

package/package.json

@@ -1,10 +1,12 @@
 {
   "name": "vanta-ui",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
-  "files": ["dist"],
+  "files": [
+    "dist"
+  ],
   "scripts": {
     "build": "tsup"
   },