virtual-ui-project-lib 1.0.4 → 1.0.6

package/README.md

@@ -9,7 +9,7 @@ A modern and customizable **React UI Component Library** designed for fast devel
 ## 📦 Install
 
 ```bash
-npm install virtual-ui-lib
+npm install virtual-ui-project-lib
 ```
 
 ---
@@ -24,7 +24,7 @@ import {
   PricingCard,
   Loader,
   OTPInput
-} from "virtual-ui-lib"
+} from "virtual-ui-project-lib"
 
 function App() {
   return (

package/dist/index.js

@@ -39,6 +39,7 @@ __export(index_exports, {
   ColorPicker: () => ColorPicker,
   DatePicker: () => DatePicker,
   ECommerceCard: () => ECommerceCard,
+  FacebookPost: () => FacebookPost,
   FileUpload: () => FileUpload,
   Footer: () => Footer,
   IDCard: () => IDCard,
@@ -55,7 +56,8 @@ __export(index_exports, {
   RatingStars: () => RatingStars,
   ReviewCard: () => ReviewCard,
   Sidebar: () => Sidebar,
-  StatCard: () => StatCard
+  StatCard: () => StatCard,
+  TwitterPost: () => TwitterPost
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -3997,6 +3999,55 @@ var DatePicker = ({
     }
   ));
 };
+
+// src/components/FacebookPost/FacebookPost.jsx
+var import_react28 = __toESM(require("react"));
+var FacebookPost = ({
+  profileImage = "https://randomuser.me/api/portraits/men/1.jpg",
+  username = "John Doe",
+  timestamp = "2 hours ago",
+  content = "Just had an amazing weekend getaway! The mountains were breathtaking. \u{1F304} #NatureLovers",
+  image = "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=600&q=80",
+  likes = 123,
+  comments = 45,
+  shares = 12,
+  accent = "#6366f1",
+  bg = "#0f172a",
+  onLikeClick = () => {
+  },
+  onCommentClick = () => {
+  },
+  onShareClick = () => {
+  }
+}) => {
+  const alpha = (hex, op) => {
+    const r = parseInt(hex.slice(1, 3), 16), g = parseInt(hex.slice(3, 5), 16), b = parseInt(hex.slice(5, 7), 16);
+    return "rgba(" + r + "," + g + "," + b + "," + op + ")";
+  };
+  return /* @__PURE__ */ import_react28.default.createElement("div", { style: { background: bg, borderRadius: "16px", padding: "16px", width: "500px", fontFamily: "system-ui,sans-serif", color: "#fff", boxShadow: "0 10px 40px rgba(0,0,0,0.4)", border: "1px solid rgba(255,255,255,0.08)" } }, /* @__PURE__ */ import_react28.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: "12px", marginBottom: "16px" } }, /* @__PURE__ */ import_react28.default.createElement("img", { src: profileImage, alt: username, style: { width: "40px", height: "40px", borderRadius: "50%", objectFit: "cover" } }), /* @__PURE__ */ import_react28.default.createElement("div", { style: { flex: 1 } }, /* @__PURE__ */ import_react28.default.createElement("div", { style: { fontSize: "14px", fontWeight: "700" } }, username), /* @__PURE__ */ import_react28.default.createElement("div", { style: { fontSize: "12px", color: "rgba(255,255,255,0.5)" } }, timestamp))), /* @__PURE__ */ import_react28.default.createElement("div", { style: { fontSize: "14px", lineHeight: 1.5, marginBottom: "16px" } }, content), image && /* @__PURE__ */ import_react28.default.createElement("div", { style: { width: "100%", height: "300px", borderRadius: "12px", overflow: "hidden", marginBottom: "16px" } }, /* @__PURE__ */ import_react28.default.createElement("img", { src: image, alt: "Post", style: { width: "100%", height: "100%", objectFit: "cover" } })), /* @__PURE__ */ import_react28.default.createElement("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", fontSize: "12px", color: "rgba(255,255,255,0.5)" } }, /* @__PURE__ */ import_react28.default.createElement("div", null, likes, " likes \xB7 ", comments, " comments \xB7 ", shares, " shares"), /* @__PURE__ */ import_react28.default.createElement("div", { style: { display: "flex", gap: "16px" } }, /* @__PURE__ */ import_react28.default.createElement("button", { onClick: onLikeClick, style: { background: "none", border: "none", color: "rgba(255,255,255,0.5)", cursor: "pointer", padding: "4px 8px", borderRadius: "6px", fontSize: "12px", fontWeight: "700", display: "flex", alignItems: "center", gap: "4px" } }, /* @__PURE__ */ import_react28.default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "rgba(255,255,255,0.5)", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react28.default.createElement("path", { d: "M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" })), "Like"), /* @__PURE__ */ import_react28.default.createElement("button", { onClick: onCommentClick, style: { background: "none", border: "none", color: "rgba(255,255,255,0.5)", cursor: "pointer", padding: "4px 8px", borderRadius: "6px", fontSize: "12px", fontWeight: "700", display: "flex", alignItems: "center", gap: "4px" } }, /* @__PURE__ */ import_react28.default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "rgba(255,255,255,0.5)", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react28.default.createElement("path", { d: "M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z" })), "Comment"), /* @__PURE__ */ import_react28.default.createElement("button", { onClick: onShareClick, style: { background: "none", border: "none", color: "rgba(255,255,255,0.5)", cursor: "pointer", padding: "4px 8px", borderRadius: "6px", fontSize: "12px", fontWeight: "700", display: "flex", alignItems: "center", gap: "4px" } }, /* @__PURE__ */ import_react28.default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "rgba(255,255,255,0.5)", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react28.default.createElement("path", { d: "M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8" }), /* @__PURE__ */ import_react28.default.createElement("polyline", { points: "16 6 12 2 8 6" }), /* @__PURE__ */ import_react28.default.createElement("line", { x1: "12", y1: "2", x2: "12", y2: "15" })), "Share"))));
+};
+
+// src/components/TwitterPost/TwitterPost.jsx
+var import_react29 = __toESM(require("react"));
+var TwitterPost = ({
+  username = "johndoe",
+  handle = "@johndoe",
+  avatar = "https://randomuser.me/api/portraits/men/1.jpg",
+  content = "Excited to share my thoughts on React components! \u{1F680}",
+  timestamp = "2h",
+  likes = 123,
+  retweets = 45,
+  replies = 12,
+  accent = "#1d9bf0",
+  bg = "#0f172a"
+}) => {
+  const [liked, setLiked] = (0, import_react29.useState)(false);
+  const alpha = (hex, op) => {
+    const r = parseInt(hex.slice(1, 3), 16), g = parseInt(hex.slice(3, 5), 16), b = parseInt(hex.slice(5, 7), 16);
+    return "rgba(" + r + "," + g + "," + b + "," + op + ")";
+  };
+  return /* @__PURE__ */ import_react29.default.createElement("div", { style: { background: bg, borderRadius: "16px", padding: "16px", width: "400px", color: "#fff", fontFamily: "system-ui,sans-serif", boxShadow: "0 10px 40px rgba(0,0,0,0.5)", border: "1px solid rgba(255,255,255,0.08)" } }, /* @__PURE__ */ import_react29.default.createElement("div", { style: { display: "flex", gap: "12px" } }, /* @__PURE__ */ import_react29.default.createElement("img", { src: avatar, alt: username, style: { width: "48px", height: "48px", borderRadius: "50%" } }), /* @__PURE__ */ import_react29.default.createElement("div", { style: { flex: 1 } }, /* @__PURE__ */ import_react29.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: "6px" } }, /* @__PURE__ */ import_react29.default.createElement("span", { style: { fontSize: "15px", fontWeight: "700", color: "#fff" } }, username), /* @__PURE__ */ import_react29.default.createElement("span", { style: { fontSize: "14px", color: "rgba(255,255,255,0.5)" } }, handle), /* @__PURE__ */ import_react29.default.createElement("span", { style: { fontSize: "14px", color: "rgba(255,255,255,0.5)" } }, "\xB7"), /* @__PURE__ */ import_react29.default.createElement("span", { style: { fontSize: "14px", color: "rgba(255,255,255,0.5)" } }, timestamp)), /* @__PURE__ */ import_react29.default.createElement("p", { style: { fontSize: "15px", color: "rgba(255,255,255,0.8)", lineHeight: 1.5, margin: "8px 0" } }, content), /* @__PURE__ */ import_react29.default.createElement("div", { style: { display: "flex", gap: "20px", marginTop: "12px" } }, /* @__PURE__ */ import_react29.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: "6px", color: "rgba(255,255,255,0.5)", fontSize: "14px", cursor: "pointer" } }, /* @__PURE__ */ import_react29.default.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react29.default.createElement("path", { d: "M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z" })), replies), /* @__PURE__ */ import_react29.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: "6px", color: "rgba(255,255,255,0.5)", fontSize: "14px", cursor: "pointer" } }, /* @__PURE__ */ import_react29.default.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react29.default.createElement("path", { d: "M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z" })), retweets), /* @__PURE__ */ import_react29.default.createElement("div", { onClick: () => setLiked(!liked), style: { display: "flex", alignItems: "center", gap: "6px", color: liked ? accent : "rgba(255,255,255,0.5)", fontSize: "14px", cursor: "pointer" } }, /* @__PURE__ */ import_react29.default.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: liked ? accent : "none", stroke: liked ? accent : "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react29.default.createElement("path", { d: "M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" })), likes + (liked ? 1 : 0))))));
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AnimatedButton,
@@ -4009,6 +4060,7 @@ var DatePicker = ({
   ColorPicker,
   DatePicker,
   ECommerceCard,
+  FacebookPost,
   FileUpload,
   Footer,
   IDCard,
@@ -4025,5 +4077,6 @@ var DatePicker = ({
   RatingStars,
   ReviewCard,
   Sidebar,
-  StatCard
+  StatCard,
+  TwitterPost
 });

package/dist/index.mjs

@@ -3936,6 +3936,55 @@ var DatePicker = ({
     }
   ));
 };
+
+// src/components/FacebookPost/FacebookPost.jsx
+import React28 from "react";
+var FacebookPost = ({
+  profileImage = "https://randomuser.me/api/portraits/men/1.jpg",
+  username = "John Doe",
+  timestamp = "2 hours ago",
+  content = "Just had an amazing weekend getaway! The mountains were breathtaking. \u{1F304} #NatureLovers",
+  image = "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=600&q=80",
+  likes = 123,
+  comments = 45,
+  shares = 12,
+  accent = "#6366f1",
+  bg = "#0f172a",
+  onLikeClick = () => {
+  },
+  onCommentClick = () => {
+  },
+  onShareClick = () => {
+  }
+}) => {
+  const alpha = (hex, op) => {
+    const r = parseInt(hex.slice(1, 3), 16), g = parseInt(hex.slice(3, 5), 16), b = parseInt(hex.slice(5, 7), 16);
+    return "rgba(" + r + "," + g + "," + b + "," + op + ")";
+  };
+  return /* @__PURE__ */ React28.createElement("div", { style: { background: bg, borderRadius: "16px", padding: "16px", width: "500px", fontFamily: "system-ui,sans-serif", color: "#fff", boxShadow: "0 10px 40px rgba(0,0,0,0.4)", border: "1px solid rgba(255,255,255,0.08)" } }, /* @__PURE__ */ React28.createElement("div", { style: { display: "flex", alignItems: "center", gap: "12px", marginBottom: "16px" } }, /* @__PURE__ */ React28.createElement("img", { src: profileImage, alt: username, style: { width: "40px", height: "40px", borderRadius: "50%", objectFit: "cover" } }), /* @__PURE__ */ React28.createElement("div", { style: { flex: 1 } }, /* @__PURE__ */ React28.createElement("div", { style: { fontSize: "14px", fontWeight: "700" } }, username), /* @__PURE__ */ React28.createElement("div", { style: { fontSize: "12px", color: "rgba(255,255,255,0.5)" } }, timestamp))), /* @__PURE__ */ React28.createElement("div", { style: { fontSize: "14px", lineHeight: 1.5, marginBottom: "16px" } }, content), image && /* @__PURE__ */ React28.createElement("div", { style: { width: "100%", height: "300px", borderRadius: "12px", overflow: "hidden", marginBottom: "16px" } }, /* @__PURE__ */ React28.createElement("img", { src: image, alt: "Post", style: { width: "100%", height: "100%", objectFit: "cover" } })), /* @__PURE__ */ React28.createElement("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center", fontSize: "12px", color: "rgba(255,255,255,0.5)" } }, /* @__PURE__ */ React28.createElement("div", null, likes, " likes \xB7 ", comments, " comments \xB7 ", shares, " shares"), /* @__PURE__ */ React28.createElement("div", { style: { display: "flex", gap: "16px" } }, /* @__PURE__ */ React28.createElement("button", { onClick: onLikeClick, style: { background: "none", border: "none", color: "rgba(255,255,255,0.5)", cursor: "pointer", padding: "4px 8px", borderRadius: "6px", fontSize: "12px", fontWeight: "700", display: "flex", alignItems: "center", gap: "4px" } }, /* @__PURE__ */ React28.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "rgba(255,255,255,0.5)", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ React28.createElement("path", { d: "M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" })), "Like"), /* @__PURE__ */ React28.createElement("button", { onClick: onCommentClick, style: { background: "none", border: "none", color: "rgba(255,255,255,0.5)", cursor: "pointer", padding: "4px 8px", borderRadius: "6px", fontSize: "12px", fontWeight: "700", display: "flex", alignItems: "center", gap: "4px" } }, /* @__PURE__ */ React28.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "rgba(255,255,255,0.5)", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ React28.createElement("path", { d: "M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z" })), "Comment"), /* @__PURE__ */ React28.createElement("button", { onClick: onShareClick, style: { background: "none", border: "none", color: "rgba(255,255,255,0.5)", cursor: "pointer", padding: "4px 8px", borderRadius: "6px", fontSize: "12px", fontWeight: "700", display: "flex", alignItems: "center", gap: "4px" } }, /* @__PURE__ */ React28.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "rgba(255,255,255,0.5)", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ React28.createElement("path", { d: "M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8" }), /* @__PURE__ */ React28.createElement("polyline", { points: "16 6 12 2 8 6" }), /* @__PURE__ */ React28.createElement("line", { x1: "12", y1: "2", x2: "12", y2: "15" })), "Share"))));
+};
+
+// src/components/TwitterPost/TwitterPost.jsx
+import React29, { useState as useState23 } from "react";
+var TwitterPost = ({
+  username = "johndoe",
+  handle = "@johndoe",
+  avatar = "https://randomuser.me/api/portraits/men/1.jpg",
+  content = "Excited to share my thoughts on React components! \u{1F680}",
+  timestamp = "2h",
+  likes = 123,
+  retweets = 45,
+  replies = 12,
+  accent = "#1d9bf0",
+  bg = "#0f172a"
+}) => {
+  const [liked, setLiked] = useState23(false);
+  const alpha = (hex, op) => {
+    const r = parseInt(hex.slice(1, 3), 16), g = parseInt(hex.slice(3, 5), 16), b = parseInt(hex.slice(5, 7), 16);
+    return "rgba(" + r + "," + g + "," + b + "," + op + ")";
+  };
+  return /* @__PURE__ */ React29.createElement("div", { style: { background: bg, borderRadius: "16px", padding: "16px", width: "400px", color: "#fff", fontFamily: "system-ui,sans-serif", boxShadow: "0 10px 40px rgba(0,0,0,0.5)", border: "1px solid rgba(255,255,255,0.08)" } }, /* @__PURE__ */ React29.createElement("div", { style: { display: "flex", gap: "12px" } }, /* @__PURE__ */ React29.createElement("img", { src: avatar, alt: username, style: { width: "48px", height: "48px", borderRadius: "50%" } }), /* @__PURE__ */ React29.createElement("div", { style: { flex: 1 } }, /* @__PURE__ */ React29.createElement("div", { style: { display: "flex", alignItems: "center", gap: "6px" } }, /* @__PURE__ */ React29.createElement("span", { style: { fontSize: "15px", fontWeight: "700", color: "#fff" } }, username), /* @__PURE__ */ React29.createElement("span", { style: { fontSize: "14px", color: "rgba(255,255,255,0.5)" } }, handle), /* @__PURE__ */ React29.createElement("span", { style: { fontSize: "14px", color: "rgba(255,255,255,0.5)" } }, "\xB7"), /* @__PURE__ */ React29.createElement("span", { style: { fontSize: "14px", color: "rgba(255,255,255,0.5)" } }, timestamp)), /* @__PURE__ */ React29.createElement("p", { style: { fontSize: "15px", color: "rgba(255,255,255,0.8)", lineHeight: 1.5, margin: "8px 0" } }, content), /* @__PURE__ */ React29.createElement("div", { style: { display: "flex", gap: "20px", marginTop: "12px" } }, /* @__PURE__ */ React29.createElement("div", { style: { display: "flex", alignItems: "center", gap: "6px", color: "rgba(255,255,255,0.5)", fontSize: "14px", cursor: "pointer" } }, /* @__PURE__ */ React29.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ React29.createElement("path", { d: "M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z" })), replies), /* @__PURE__ */ React29.createElement("div", { style: { display: "flex", alignItems: "center", gap: "6px", color: "rgba(255,255,255,0.5)", fontSize: "14px", cursor: "pointer" } }, /* @__PURE__ */ React29.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ React29.createElement("path", { d: "M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z" })), retweets), /* @__PURE__ */ React29.createElement("div", { onClick: () => setLiked(!liked), style: { display: "flex", alignItems: "center", gap: "6px", color: liked ? accent : "rgba(255,255,255,0.5)", fontSize: "14px", cursor: "pointer" } }, /* @__PURE__ */ React29.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: liked ? accent : "none", stroke: liked ? accent : "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ React29.createElement("path", { d: "M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" })), likes + (liked ? 1 : 0))))));
+};
 export {
   AnimatedButton,
   AnimatedForm,
@@ -3947,6 +3996,7 @@ export {
   ColorPicker,
   DatePicker,
   ECommerceCard,
+  FacebookPost,
   FileUpload,
   Footer,
   IDCard,
@@ -3963,5 +4013,6 @@ export {
   RatingStars,
   ReviewCard,
   Sidebar,
-  StatCard
+  StatCard,
+  TwitterPost
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "virtual-ui-project-lib",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "description": "Virtual UI React Component Library",
   "author": "Rahul Kumar",
   "license": "ISC",