ksm-ai-ui-lib 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);
 
@@ -249,8 +250,156 @@ var Card = ({
     footer && /* @__PURE__ */ import_react2.default.createElement("div", { style: styles.footer }, footer)
   );
 };
+
+// src/components/ProfileCard/ProfileCard.jsx
+var import_react3 = __toESM(require("react"));
+var SIZES3 = {
+  sm: { width: 240, avatar: 64, name: 16, text: 13, padding: 16 },
+  md: { width: 300, avatar: 88, name: 20, text: 14, padding: 24 },
+  lg: { width: 380, avatar: 112, name: 24, text: 16, padding: 32 }
+};
+var ProfileCard = ({
+  name = "John Doe",
+  role = "Frontend Developer",
+  bio = "Building clean and fast user interfaces with React.",
+  avatar = "",
+  stats = [
+    { label: "Posts", value: 128 },
+    { label: "Followers", value: "2.4k" },
+    { label: "Following", value: 180 }
+  ],
+  followText = "Follow",
+  followingText = "Following",
+  size = "md",
+  bgColor = "#ffffff",
+  textColor = "#1f2937",
+  mutedColor = "#6b7280",
+  accentColor = "#2563eb",
+  borderColor = "#e5e7eb",
+  borderRadius = 16,
+  hoverLift = true,
+  defaultFollowing = false,
+  onFollowChange = () => {
+  }
+}) => {
+  const [hovered, setHovered] = (0, import_react3.useState)(false);
+  const [btnHovered, setBtnHovered] = (0, import_react3.useState)(false);
+  const [following, setFollowing] = (0, import_react3.useState)(defaultFollowing);
+  const s = SIZES3[size] || SIZES3.md;
+  const initials = name.split(" ").map((w) => w[0]).join("").slice(0, 2).toUpperCase();
+  const styles = {
+    card: {
+      width: "100%",
+      maxWidth: s.width,
+      boxSizing: "border-box",
+      padding: s.padding,
+      textAlign: "center",
+      background: bgColor,
+      color: textColor,
+      border: `1px solid ${borderColor}`,
+      borderRadius,
+      fontFamily: "system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif",
+      boxShadow: hovered ? "0 12px 28px rgba(0, 0, 0, 0.12)" : "0 1px 3px rgba(0, 0, 0, 0.08)",
+      transform: hovered && hoverLift ? "translateY(-4px)" : "translateY(0)",
+      transition: "transform 0.2s ease, box-shadow 0.2s ease"
+    },
+    avatar: {
+      width: s.avatar,
+      height: s.avatar,
+      margin: "0 auto",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      fontSize: s.avatar / 2.8,
+      fontWeight: 600,
+      color: "#ffffff",
+      background: accentColor,
+      borderRadius: "50%",
+      objectFit: "cover",
+      border: `3px solid ${bgColor}`,
+      boxShadow: `0 0 0 2px ${accentColor}`
+    },
+    name: { margin: "14px 0 0", fontSize: s.name, fontWeight: 600 },
+    role: {
+      margin: "4px 0 0",
+      fontSize: s.text,
+      fontWeight: 500,
+      color: accentColor
+    },
+    bio: {
+      margin: "10px 0 0",
+      fontSize: s.text,
+      lineHeight: 1.6,
+      color: mutedColor
+    },
+    stats: {
+      display: "flex",
+      justifyContent: "space-around",
+      margin: "18px 0 0",
+      padding: "14px 0",
+      borderTop: `1px solid ${borderColor}`,
+      borderBottom: `1px solid ${borderColor}`
+    },
+    statValue: { display: "block", fontSize: s.name - 4, fontWeight: 600 },
+    statLabel: {
+      display: "block",
+      marginTop: 2,
+      fontSize: s.text - 2,
+      color: mutedColor
+    },
+    button: {
+      width: "100%",
+      marginTop: 18,
+      padding: "10px 16px",
+      fontSize: s.text,
+      fontWeight: 500,
+      color: following ? accentColor : "#ffffff",
+      background: following ? btnHovered ? `${accentColor}14` : "transparent" : accentColor,
+      border: `1px solid ${accentColor}`,
+      borderRadius: Math.max(borderRadius - 6, 6),
+      filter: !following && btnHovered ? "brightness(0.9)" : "none",
+      cursor: "pointer",
+      transition: "background 0.15s ease, filter 0.15s ease, color 0.15s ease"
+    }
+  };
+  return /* @__PURE__ */ import_react3.default.createElement(
+    "div",
+    {
+      style: styles.card,
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => setHovered(false)
+    },
+    avatar ? /* @__PURE__ */ import_react3.default.createElement(
+      "img",
+      {
+        src: avatar,
+        alt: name,
+        style: { ...styles.avatar, display: "block" }
+      }
+    ) : /* @__PURE__ */ import_react3.default.createElement("div", { style: styles.avatar }, initials),
+    /* @__PURE__ */ import_react3.default.createElement("h3", { style: styles.name }, name),
+    /* @__PURE__ */ import_react3.default.createElement("p", { style: styles.role }, role),
+    bio && /* @__PURE__ */ import_react3.default.createElement("p", { style: styles.bio }, bio),
+    stats.length > 0 && /* @__PURE__ */ import_react3.default.createElement("div", { style: styles.stats }, stats.map((stat) => /* @__PURE__ */ import_react3.default.createElement("div", { key: stat.label }, /* @__PURE__ */ import_react3.default.createElement("span", { style: styles.statValue }, stat.value), /* @__PURE__ */ import_react3.default.createElement("span", { style: styles.statLabel }, stat.label)))),
+    /* @__PURE__ */ import_react3.default.createElement(
+      "button",
+      {
+        type: "button",
+        style: styles.button,
+        onMouseEnter: () => setBtnHovered(true),
+        onMouseLeave: () => setBtnHovered(false),
+        onClick: () => {
+          setFollowing(!following);
+          onFollowChange(!following);
+        }
+      },
+      following ? followingText : followText
+    )
+  );
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Button,
-  Card
+  Card,
+  ProfileCard
 });

package/dist/index.mjs

@@ -213,7 +213,155 @@ var Card = ({
     footer && /* @__PURE__ */ React2.createElement("div", { style: styles.footer }, footer)
   );
 };
+
+// src/components/ProfileCard/ProfileCard.jsx
+import React3, { useState as useState3 } from "react";
+var SIZES3 = {
+  sm: { width: 240, avatar: 64, name: 16, text: 13, padding: 16 },
+  md: { width: 300, avatar: 88, name: 20, text: 14, padding: 24 },
+  lg: { width: 380, avatar: 112, name: 24, text: 16, padding: 32 }
+};
+var ProfileCard = ({
+  name = "John Doe",
+  role = "Frontend Developer",
+  bio = "Building clean and fast user interfaces with React.",
+  avatar = "",
+  stats = [
+    { label: "Posts", value: 128 },
+    { label: "Followers", value: "2.4k" },
+    { label: "Following", value: 180 }
+  ],
+  followText = "Follow",
+  followingText = "Following",
+  size = "md",
+  bgColor = "#ffffff",
+  textColor = "#1f2937",
+  mutedColor = "#6b7280",
+  accentColor = "#2563eb",
+  borderColor = "#e5e7eb",
+  borderRadius = 16,
+  hoverLift = true,
+  defaultFollowing = false,
+  onFollowChange = () => {
+  }
+}) => {
+  const [hovered, setHovered] = useState3(false);
+  const [btnHovered, setBtnHovered] = useState3(false);
+  const [following, setFollowing] = useState3(defaultFollowing);
+  const s = SIZES3[size] || SIZES3.md;
+  const initials = name.split(" ").map((w) => w[0]).join("").slice(0, 2).toUpperCase();
+  const styles = {
+    card: {
+      width: "100%",
+      maxWidth: s.width,
+      boxSizing: "border-box",
+      padding: s.padding,
+      textAlign: "center",
+      background: bgColor,
+      color: textColor,
+      border: `1px solid ${borderColor}`,
+      borderRadius,
+      fontFamily: "system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif",
+      boxShadow: hovered ? "0 12px 28px rgba(0, 0, 0, 0.12)" : "0 1px 3px rgba(0, 0, 0, 0.08)",
+      transform: hovered && hoverLift ? "translateY(-4px)" : "translateY(0)",
+      transition: "transform 0.2s ease, box-shadow 0.2s ease"
+    },
+    avatar: {
+      width: s.avatar,
+      height: s.avatar,
+      margin: "0 auto",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      fontSize: s.avatar / 2.8,
+      fontWeight: 600,
+      color: "#ffffff",
+      background: accentColor,
+      borderRadius: "50%",
+      objectFit: "cover",
+      border: `3px solid ${bgColor}`,
+      boxShadow: `0 0 0 2px ${accentColor}`
+    },
+    name: { margin: "14px 0 0", fontSize: s.name, fontWeight: 600 },
+    role: {
+      margin: "4px 0 0",
+      fontSize: s.text,
+      fontWeight: 500,
+      color: accentColor
+    },
+    bio: {
+      margin: "10px 0 0",
+      fontSize: s.text,
+      lineHeight: 1.6,
+      color: mutedColor
+    },
+    stats: {
+      display: "flex",
+      justifyContent: "space-around",
+      margin: "18px 0 0",
+      padding: "14px 0",
+      borderTop: `1px solid ${borderColor}`,
+      borderBottom: `1px solid ${borderColor}`
+    },
+    statValue: { display: "block", fontSize: s.name - 4, fontWeight: 600 },
+    statLabel: {
+      display: "block",
+      marginTop: 2,
+      fontSize: s.text - 2,
+      color: mutedColor
+    },
+    button: {
+      width: "100%",
+      marginTop: 18,
+      padding: "10px 16px",
+      fontSize: s.text,
+      fontWeight: 500,
+      color: following ? accentColor : "#ffffff",
+      background: following ? btnHovered ? `${accentColor}14` : "transparent" : accentColor,
+      border: `1px solid ${accentColor}`,
+      borderRadius: Math.max(borderRadius - 6, 6),
+      filter: !following && btnHovered ? "brightness(0.9)" : "none",
+      cursor: "pointer",
+      transition: "background 0.15s ease, filter 0.15s ease, color 0.15s ease"
+    }
+  };
+  return /* @__PURE__ */ React3.createElement(
+    "div",
+    {
+      style: styles.card,
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => setHovered(false)
+    },
+    avatar ? /* @__PURE__ */ React3.createElement(
+      "img",
+      {
+        src: avatar,
+        alt: name,
+        style: { ...styles.avatar, display: "block" }
+      }
+    ) : /* @__PURE__ */ React3.createElement("div", { style: styles.avatar }, initials),
+    /* @__PURE__ */ React3.createElement("h3", { style: styles.name }, name),
+    /* @__PURE__ */ React3.createElement("p", { style: styles.role }, role),
+    bio && /* @__PURE__ */ React3.createElement("p", { style: styles.bio }, bio),
+    stats.length > 0 && /* @__PURE__ */ React3.createElement("div", { style: styles.stats }, stats.map((stat) => /* @__PURE__ */ React3.createElement("div", { key: stat.label }, /* @__PURE__ */ React3.createElement("span", { style: styles.statValue }, stat.value), /* @__PURE__ */ React3.createElement("span", { style: styles.statLabel }, stat.label)))),
+    /* @__PURE__ */ React3.createElement(
+      "button",
+      {
+        type: "button",
+        style: styles.button,
+        onMouseEnter: () => setBtnHovered(true),
+        onMouseLeave: () => setBtnHovered(false),
+        onClick: () => {
+          setFollowing(!following);
+          onFollowChange(!following);
+        }
+      },
+      following ? followingText : followText
+    )
+  );
+};
 export {
   Button,
-  Card
+  Card,
+  ProfileCard
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ksm-ai-ui-lib",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "KSM-AI UI React Component Library",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -19,5 +19,8 @@
   "devDependencies": {
     "tsup": "^9.0.0",
     "typescript": "^7.0.2"
+  },
+  "dependencies": {
+    "ksm-ai-ui-lib": "^1.0.0"
   }
 }