omui-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);
 
@@ -304,8 +305,185 @@ var Card = ({
     /* @__PURE__ */ import_react2.default.createElement("div", { style: contentStyles }, /* @__PURE__ */ import_react2.default.createElement("div", { style: titleStyles }, title), /* @__PURE__ */ import_react2.default.createElement("div", { style: textStyles }, description))
   );
 };
+
+// src/components/ProfileCard/ProfileCard.jsx
+var import_react3 = __toESM(require("react"));
+var ProfileCard = ({
+  name = "John Doe",
+  role = "Frontend Developer",
+  bio = "Passionate developer who loves building clean UI components.",
+  avatar = "https://via.placeholder.com/150",
+  variant = "elevated",
+  // elevated | outlined | flat
+  size = "md",
+  // sm | md | lg
+  palette = "primary",
+  // primary | secondary | danger | success
+  clickable = false,
+  hoverable = true,
+  fullWidth = false,
+  onFollow = () => {
+  },
+  onMessage = () => {
+  }
+}) => {
+  const [isHovered, setIsHovered] = (0, import_react3.useState)(false);
+  const [isFollowing, setIsFollowing] = (0, import_react3.useState)(false);
+  const palettes = {
+    primary: {
+      border: "#4CAF50",
+      accent: "#4CAF50",
+      text: "#333",
+      subText: "#666",
+      bg: "#ffffff"
+    },
+    secondary: {
+      border: "#2196F3",
+      accent: "#2196F3",
+      text: "#333",
+      subText: "#666",
+      bg: "#ffffff"
+    },
+    danger: {
+      border: "#f44336",
+      accent: "#f44336",
+      text: "#333",
+      subText: "#666",
+      bg: "#ffffff"
+    },
+    success: {
+      border: "#00897b",
+      accent: "#00897b",
+      text: "#333",
+      subText: "#666",
+      bg: "#ffffff"
+    }
+  };
+  const sizes = {
+    sm: {
+      padding: "12px",
+      name: "14px",
+      role: "12px",
+      bio: "12px",
+      avatar: "60px"
+    },
+    md: {
+      padding: "16px",
+      name: "18px",
+      role: "14px",
+      bio: "13px",
+      avatar: "80px"
+    },
+    lg: {
+      padding: "20px",
+      name: "22px",
+      role: "16px",
+      bio: "14px",
+      avatar: "100px"
+    }
+  };
+  const selectedPalette = palettes[palette] || palettes.primary;
+  const selectedSize = sizes[size] || sizes.md;
+  const getVariantStyles = () => {
+    switch (variant) {
+      case "outlined":
+        return {
+          border: `2px solid ${selectedPalette.border}`,
+          boxShadow: "none"
+        };
+      case "flat":
+        return {
+          border: "none",
+          boxShadow: "none"
+        };
+      default:
+        return {
+          border: "none",
+          boxShadow: "0 6px 16px rgba(0,0,0,0.15)"
+        };
+    }
+  };
+  const hoverStyles = hoverable && isHovered ? {
+    transform: "translateY(-6px)",
+    boxShadow: "0 10px 22px rgba(0,0,0,0.2)"
+  } : {};
+  const containerStyles = {
+    width: fullWidth ? "100%" : "300px",
+    backgroundColor: selectedPalette.bg,
+    borderRadius: "14px",
+    textAlign: "center",
+    padding: selectedSize.padding,
+    cursor: clickable ? "pointer" : "default",
+    transition: "all 0.3s ease",
+    ...getVariantStyles(),
+    ...hoverStyles
+  };
+  const avatarStyles = {
+    width: selectedSize.avatar,
+    height: selectedSize.avatar,
+    borderRadius: "50%",
+    objectFit: "cover",
+    marginBottom: "12px",
+    border: `3px solid ${selectedPalette.border}`
+  };
+  const nameStyles = {
+    fontSize: selectedSize.name,
+    fontWeight: "600",
+    color: selectedPalette.text
+  };
+  const roleStyles = {
+    fontSize: selectedSize.role,
+    color: selectedPalette.accent,
+    marginBottom: "8px"
+  };
+  const bioStyles = {
+    fontSize: selectedSize.bio,
+    color: selectedPalette.subText,
+    marginBottom: "12px",
+    lineHeight: "1.4"
+  };
+  const buttonBase = {
+    padding: "8px 14px",
+    margin: "4px",
+    borderRadius: "6px",
+    border: "none",
+    cursor: "pointer",
+    fontSize: "12px",
+    fontWeight: "500",
+    transition: "0.2s"
+  };
+  const followBtn = {
+    ...buttonBase,
+    backgroundColor: isFollowing ? "#ccc" : selectedPalette.accent,
+    color: isFollowing ? "#333" : "#fff"
+  };
+  const messageBtn = {
+    ...buttonBase,
+    backgroundColor: "transparent",
+    border: `1px solid ${selectedPalette.accent}`,
+    color: selectedPalette.accent
+  };
+  const handleFollow = () => {
+    setIsFollowing(!isFollowing);
+    onFollow();
+  };
+  return /* @__PURE__ */ import_react3.default.createElement(
+    "div",
+    {
+      style: containerStyles,
+      onMouseEnter: () => setIsHovered(true),
+      onMouseLeave: () => setIsHovered(false)
+    },
+    /* @__PURE__ */ import_react3.default.createElement("img", { src: avatar, alt: "avatar", style: avatarStyles }),
+    /* @__PURE__ */ import_react3.default.createElement("div", { style: nameStyles }, name),
+    /* @__PURE__ */ import_react3.default.createElement("div", { style: roleStyles }, role),
+    /* @__PURE__ */ import_react3.default.createElement("div", { style: bioStyles }, bio),
+    /* @__PURE__ */ import_react3.default.createElement("div", null, /* @__PURE__ */ import_react3.default.createElement("button", { style: followBtn, onClick: handleFollow }, isFollowing ? "Following" : "Follow"), /* @__PURE__ */ import_react3.default.createElement("button", { style: messageBtn, onClick: onMessage }, "Message"))
+  );
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Button,
-  Card
+  Card,
+  ProfileCard
 });

package/dist/index.mjs

@@ -268,7 +268,184 @@ var Card = ({
     /* @__PURE__ */ React2.createElement("div", { style: contentStyles }, /* @__PURE__ */ React2.createElement("div", { style: titleStyles }, title), /* @__PURE__ */ React2.createElement("div", { style: textStyles }, description))
   );
 };
+
+// src/components/ProfileCard/ProfileCard.jsx
+import React3, { useState as useState3 } from "react";
+var ProfileCard = ({
+  name = "John Doe",
+  role = "Frontend Developer",
+  bio = "Passionate developer who loves building clean UI components.",
+  avatar = "https://via.placeholder.com/150",
+  variant = "elevated",
+  // elevated | outlined | flat
+  size = "md",
+  // sm | md | lg
+  palette = "primary",
+  // primary | secondary | danger | success
+  clickable = false,
+  hoverable = true,
+  fullWidth = false,
+  onFollow = () => {
+  },
+  onMessage = () => {
+  }
+}) => {
+  const [isHovered, setIsHovered] = useState3(false);
+  const [isFollowing, setIsFollowing] = useState3(false);
+  const palettes = {
+    primary: {
+      border: "#4CAF50",
+      accent: "#4CAF50",
+      text: "#333",
+      subText: "#666",
+      bg: "#ffffff"
+    },
+    secondary: {
+      border: "#2196F3",
+      accent: "#2196F3",
+      text: "#333",
+      subText: "#666",
+      bg: "#ffffff"
+    },
+    danger: {
+      border: "#f44336",
+      accent: "#f44336",
+      text: "#333",
+      subText: "#666",
+      bg: "#ffffff"
+    },
+    success: {
+      border: "#00897b",
+      accent: "#00897b",
+      text: "#333",
+      subText: "#666",
+      bg: "#ffffff"
+    }
+  };
+  const sizes = {
+    sm: {
+      padding: "12px",
+      name: "14px",
+      role: "12px",
+      bio: "12px",
+      avatar: "60px"
+    },
+    md: {
+      padding: "16px",
+      name: "18px",
+      role: "14px",
+      bio: "13px",
+      avatar: "80px"
+    },
+    lg: {
+      padding: "20px",
+      name: "22px",
+      role: "16px",
+      bio: "14px",
+      avatar: "100px"
+    }
+  };
+  const selectedPalette = palettes[palette] || palettes.primary;
+  const selectedSize = sizes[size] || sizes.md;
+  const getVariantStyles = () => {
+    switch (variant) {
+      case "outlined":
+        return {
+          border: `2px solid ${selectedPalette.border}`,
+          boxShadow: "none"
+        };
+      case "flat":
+        return {
+          border: "none",
+          boxShadow: "none"
+        };
+      default:
+        return {
+          border: "none",
+          boxShadow: "0 6px 16px rgba(0,0,0,0.15)"
+        };
+    }
+  };
+  const hoverStyles = hoverable && isHovered ? {
+    transform: "translateY(-6px)",
+    boxShadow: "0 10px 22px rgba(0,0,0,0.2)"
+  } : {};
+  const containerStyles = {
+    width: fullWidth ? "100%" : "300px",
+    backgroundColor: selectedPalette.bg,
+    borderRadius: "14px",
+    textAlign: "center",
+    padding: selectedSize.padding,
+    cursor: clickable ? "pointer" : "default",
+    transition: "all 0.3s ease",
+    ...getVariantStyles(),
+    ...hoverStyles
+  };
+  const avatarStyles = {
+    width: selectedSize.avatar,
+    height: selectedSize.avatar,
+    borderRadius: "50%",
+    objectFit: "cover",
+    marginBottom: "12px",
+    border: `3px solid ${selectedPalette.border}`
+  };
+  const nameStyles = {
+    fontSize: selectedSize.name,
+    fontWeight: "600",
+    color: selectedPalette.text
+  };
+  const roleStyles = {
+    fontSize: selectedSize.role,
+    color: selectedPalette.accent,
+    marginBottom: "8px"
+  };
+  const bioStyles = {
+    fontSize: selectedSize.bio,
+    color: selectedPalette.subText,
+    marginBottom: "12px",
+    lineHeight: "1.4"
+  };
+  const buttonBase = {
+    padding: "8px 14px",
+    margin: "4px",
+    borderRadius: "6px",
+    border: "none",
+    cursor: "pointer",
+    fontSize: "12px",
+    fontWeight: "500",
+    transition: "0.2s"
+  };
+  const followBtn = {
+    ...buttonBase,
+    backgroundColor: isFollowing ? "#ccc" : selectedPalette.accent,
+    color: isFollowing ? "#333" : "#fff"
+  };
+  const messageBtn = {
+    ...buttonBase,
+    backgroundColor: "transparent",
+    border: `1px solid ${selectedPalette.accent}`,
+    color: selectedPalette.accent
+  };
+  const handleFollow = () => {
+    setIsFollowing(!isFollowing);
+    onFollow();
+  };
+  return /* @__PURE__ */ React3.createElement(
+    "div",
+    {
+      style: containerStyles,
+      onMouseEnter: () => setIsHovered(true),
+      onMouseLeave: () => setIsHovered(false)
+    },
+    /* @__PURE__ */ React3.createElement("img", { src: avatar, alt: "avatar", style: avatarStyles }),
+    /* @__PURE__ */ React3.createElement("div", { style: nameStyles }, name),
+    /* @__PURE__ */ React3.createElement("div", { style: roleStyles }, role),
+    /* @__PURE__ */ React3.createElement("div", { style: bioStyles }, bio),
+    /* @__PURE__ */ React3.createElement("div", null, /* @__PURE__ */ React3.createElement("button", { style: followBtn, onClick: handleFollow }, isFollowing ? "Following" : "Follow"), /* @__PURE__ */ React3.createElement("button", { style: messageBtn, onClick: onMessage }, "Message"))
+  );
+};
 export {
   Button,
-  Card
+  Card,
+  ProfileCard
 };

package/package.json

@@ -1,12 +1,14 @@
 {
   "name": "omui-lib",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "omUI react component library",
   "license": "ISC",
   "author": "Om Mohanty",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
-  "files": ["dist"],
+  "files": [
+    "dist"
+  ],
   "scripts": {
     "build": "tsup"
   },