virtual-ui-project-lib 1.0.5 → 1.0.7

package/dist/index.js

@@ -56,117 +56,54 @@ __export(index_exports, {
   RatingStars: () => RatingStars,
   ReviewCard: () => ReviewCard,
   Sidebar: () => Sidebar,
-  StatCard: () => StatCard
+  StatCard: () => StatCard,
+  TwitterPost: () => TwitterPost
 });
 module.exports = __toCommonJS(index_exports);
 
 // src/components/Loader/Loader.jsx
 var import_react = __toESM(require("react"));
 var Loader = ({
-  type = "spinner",
-  size = 48,
-  accent = "#6366f1",
-  bg = "transparent",
-  label = "",
-  speed = 1
+  size = 40,
+  thickness = 5,
+  speed = 1,
+  color = "#6366f1",
+  bgColor = "rgba(255,255,255,0.1)"
 }) => {
-  const [dots, setDots] = (0, import_react.useState)(0);
-  const [progress, setProgress] = (0, import_react.useState)(0);
-  const alpha = (hex, op) => {
-    const r = parseInt(hex.slice(1, 3), 16);
-    const g = parseInt(hex.slice(3, 5), 16);
-    const b = parseInt(hex.slice(5, 7), 16);
-    return `rgba(${r},${g},${b},${op})`;
-  };
-  (0, import_react.useEffect)(() => {
-    if (type === "dots") {
-      const t = setInterval(() => setDots((d) => (d + 1) % 4), 400 / speed);
-      return () => clearInterval(t);
-    }
-    if (type === "bar") {
-      const t = setInterval(() => setProgress((p) => p >= 100 ? 0 : p + 2), 30 / speed);
-      return () => clearInterval(t);
-    }
-  }, [type, speed]);
-  const dur = `${1 / speed}s`;
-  const wrapStyle = {
-    display: "inline-flex",
-    flexDirection: "column",
-    alignItems: "center",
-    justifyContent: "center",
-    gap: "12px",
-    background: bg,
-    padding: bg !== "transparent" ? "24px" : "0",
-    borderRadius: "16px",
-    fontFamily: "system-ui, sans-serif"
-  };
-  const labelEl = label ? /* @__PURE__ */ import_react.default.createElement("span", { style: { fontSize: "13px", color: "rgba(255,255,255,0.45)", letterSpacing: "0.3px" } }, label) : null;
-  if (type === "spinner") return /* @__PURE__ */ import_react.default.createElement("div", { style: wrapStyle }, /* @__PURE__ */ import_react.default.createElement("svg", { width: size, height: size, viewBox: "0 0 48 48" }, /* @__PURE__ */ import_react.default.createElement(
-    "circle",
+  return /* @__PURE__ */ import_react.default.createElement("div", { style: { width: size + "px", height: size + "px", position: "relative" } }, /* @__PURE__ */ import_react.default.createElement(
+    "div",
     {
-      cx: "24",
-      cy: "24",
-      r: "20",
-      fill: "none",
-      stroke: alpha(accent, 0.15),
-      strokeWidth: "4"
+      style: {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        width: "100%",
+        height: "100%",
+        borderRadius: "50%",
+        border: thickness + "px solid " + bgColor,
+        boxSizing: "border-box"
+      }
     }
   ), /* @__PURE__ */ import_react.default.createElement(
-    "circle",
+    "div",
     {
-      cx: "24",
-      cy: "24",
-      r: "20",
-      fill: "none",
-      stroke: accent,
-      strokeWidth: "4",
-      strokeLinecap: "round",
-      strokeDasharray: "31.4 94.2",
-      style: { transformOrigin: "center", animation: `spin ${dur} linear infinite` }
+      style: {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        width: "100%",
+        height: "100%",
+        borderRadius: "50%",
+        border: thickness + "px solid transparent",
+        borderTopColor: color,
+        boxSizing: "border-box",
+        animation: "spin " + speed + "s linear infinite"
+      }
     }
-  ), /* @__PURE__ */ import_react.default.createElement("style", null, `@keyframes spin { to { transform: rotate(360deg); } }`)), labelEl);
-  if (type === "pulse") return /* @__PURE__ */ import_react.default.createElement("div", { style: wrapStyle }, /* @__PURE__ */ import_react.default.createElement("div", { style: { position: "relative", width: size, height: size } }, /* @__PURE__ */ import_react.default.createElement("div", { style: {
-    position: "absolute",
-    inset: 0,
-    borderRadius: "50%",
-    background: alpha(accent, 0.2),
-    animation: `pulse ${dur} ease-out infinite`
-  } }), /* @__PURE__ */ import_react.default.createElement("div", { style: {
-    position: "absolute",
-    inset: "25%",
-    borderRadius: "50%",
-    background: accent
-  } }), /* @__PURE__ */ import_react.default.createElement("style", null, `@keyframes pulse { 0%{transform:scale(1);opacity:1} 100%{transform:scale(2);opacity:0} }`)), labelEl);
-  if (type === "dots") return /* @__PURE__ */ import_react.default.createElement("div", { style: wrapStyle }, /* @__PURE__ */ import_react.default.createElement("div", { style: { display: "flex", gap: "8px", alignItems: "center" } }, [0, 1, 2].map((i) => /* @__PURE__ */ import_react.default.createElement("div", { key: i, style: {
-    width: size / 5,
-    height: size / 5,
-    borderRadius: "50%",
-    background: dots === i ? accent : alpha(accent, 0.25),
-    transition: "background 0.2s"
-  } }))), labelEl);
-  if (type === "bar") return /* @__PURE__ */ import_react.default.createElement("div", { style: wrapStyle }, /* @__PURE__ */ import_react.default.createElement("div", { style: {
-    width: size * 3,
-    height: size / 8,
-    background: alpha(accent, 0.15),
-    borderRadius: "99px",
-    overflow: "hidden"
-  } }, /* @__PURE__ */ import_react.default.createElement("div", { style: {
-    height: "100%",
-    borderRadius: "99px",
-    background: accent,
-    width: `${progress}%`,
-    transition: "width 0.03s linear"
-  } })), labelEl);
-  if (type === "ring") return /* @__PURE__ */ import_react.default.createElement("div", { style: wrapStyle }, /* @__PURE__ */ import_react.default.createElement("div", { style: {
-    width: size,
-    height: size,
-    borderRadius: "50%",
-    border: `4px solid ${alpha(accent, 0.15)}`,
-    borderTop: `4px solid ${accent}`,
-    borderRight: `4px solid ${accent}`,
-    animation: `spin ${dur} linear infinite`
-  } }), /* @__PURE__ */ import_react.default.createElement("style", null, `@keyframes spin { to { transform: rotate(360deg); } }`), labelEl);
-  return null;
+  ), /* @__PURE__ */ import_react.default.createElement("style", null, `@keyframes spin {
+          0% { transform: rotate(0deg); }
+          100% { transform: rotate(360deg); }
+        }`));
 };
 
 // src/components/NotificationToast/NotificationToast.jsx
@@ -4025,6 +3962,28 @@ var FacebookPost = ({
   };
   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,
@@ -4054,5 +4013,6 @@ var FacebookPost = ({
   RatingStars,
   ReviewCard,
   Sidebar,
-  StatCard
+  StatCard,
+  TwitterPost
 });

package/dist/index.mjs

@@ -1,114 +1,50 @@
 // src/components/Loader/Loader.jsx
-import React, { useEffect, useState } from "react";
+import React from "react";
 var Loader = ({
-  type = "spinner",
-  size = 48,
-  accent = "#6366f1",
-  bg = "transparent",
-  label = "",
-  speed = 1
+  size = 40,
+  thickness = 5,
+  speed = 1,
+  color = "#6366f1",
+  bgColor = "rgba(255,255,255,0.1)"
 }) => {
-  const [dots, setDots] = useState(0);
-  const [progress, setProgress] = useState(0);
-  const alpha = (hex, op) => {
-    const r = parseInt(hex.slice(1, 3), 16);
-    const g = parseInt(hex.slice(3, 5), 16);
-    const b = parseInt(hex.slice(5, 7), 16);
-    return `rgba(${r},${g},${b},${op})`;
-  };
-  useEffect(() => {
-    if (type === "dots") {
-      const t = setInterval(() => setDots((d) => (d + 1) % 4), 400 / speed);
-      return () => clearInterval(t);
-    }
-    if (type === "bar") {
-      const t = setInterval(() => setProgress((p) => p >= 100 ? 0 : p + 2), 30 / speed);
-      return () => clearInterval(t);
-    }
-  }, [type, speed]);
-  const dur = `${1 / speed}s`;
-  const wrapStyle = {
-    display: "inline-flex",
-    flexDirection: "column",
-    alignItems: "center",
-    justifyContent: "center",
-    gap: "12px",
-    background: bg,
-    padding: bg !== "transparent" ? "24px" : "0",
-    borderRadius: "16px",
-    fontFamily: "system-ui, sans-serif"
-  };
-  const labelEl = label ? /* @__PURE__ */ React.createElement("span", { style: { fontSize: "13px", color: "rgba(255,255,255,0.45)", letterSpacing: "0.3px" } }, label) : null;
-  if (type === "spinner") return /* @__PURE__ */ React.createElement("div", { style: wrapStyle }, /* @__PURE__ */ React.createElement("svg", { width: size, height: size, viewBox: "0 0 48 48" }, /* @__PURE__ */ React.createElement(
-    "circle",
+  return /* @__PURE__ */ React.createElement("div", { style: { width: size + "px", height: size + "px", position: "relative" } }, /* @__PURE__ */ React.createElement(
+    "div",
     {
-      cx: "24",
-      cy: "24",
-      r: "20",
-      fill: "none",
-      stroke: alpha(accent, 0.15),
-      strokeWidth: "4"
+      style: {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        width: "100%",
+        height: "100%",
+        borderRadius: "50%",
+        border: thickness + "px solid " + bgColor,
+        boxSizing: "border-box"
+      }
     }
   ), /* @__PURE__ */ React.createElement(
-    "circle",
+    "div",
     {
-      cx: "24",
-      cy: "24",
-      r: "20",
-      fill: "none",
-      stroke: accent,
-      strokeWidth: "4",
-      strokeLinecap: "round",
-      strokeDasharray: "31.4 94.2",
-      style: { transformOrigin: "center", animation: `spin ${dur} linear infinite` }
+      style: {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        width: "100%",
+        height: "100%",
+        borderRadius: "50%",
+        border: thickness + "px solid transparent",
+        borderTopColor: color,
+        boxSizing: "border-box",
+        animation: "spin " + speed + "s linear infinite"
+      }
     }
-  ), /* @__PURE__ */ React.createElement("style", null, `@keyframes spin { to { transform: rotate(360deg); } }`)), labelEl);
-  if (type === "pulse") return /* @__PURE__ */ React.createElement("div", { style: wrapStyle }, /* @__PURE__ */ React.createElement("div", { style: { position: "relative", width: size, height: size } }, /* @__PURE__ */ React.createElement("div", { style: {
-    position: "absolute",
-    inset: 0,
-    borderRadius: "50%",
-    background: alpha(accent, 0.2),
-    animation: `pulse ${dur} ease-out infinite`
-  } }), /* @__PURE__ */ React.createElement("div", { style: {
-    position: "absolute",
-    inset: "25%",
-    borderRadius: "50%",
-    background: accent
-  } }), /* @__PURE__ */ React.createElement("style", null, `@keyframes pulse { 0%{transform:scale(1);opacity:1} 100%{transform:scale(2);opacity:0} }`)), labelEl);
-  if (type === "dots") return /* @__PURE__ */ React.createElement("div", { style: wrapStyle }, /* @__PURE__ */ React.createElement("div", { style: { display: "flex", gap: "8px", alignItems: "center" } }, [0, 1, 2].map((i) => /* @__PURE__ */ React.createElement("div", { key: i, style: {
-    width: size / 5,
-    height: size / 5,
-    borderRadius: "50%",
-    background: dots === i ? accent : alpha(accent, 0.25),
-    transition: "background 0.2s"
-  } }))), labelEl);
-  if (type === "bar") return /* @__PURE__ */ React.createElement("div", { style: wrapStyle }, /* @__PURE__ */ React.createElement("div", { style: {
-    width: size * 3,
-    height: size / 8,
-    background: alpha(accent, 0.15),
-    borderRadius: "99px",
-    overflow: "hidden"
-  } }, /* @__PURE__ */ React.createElement("div", { style: {
-    height: "100%",
-    borderRadius: "99px",
-    background: accent,
-    width: `${progress}%`,
-    transition: "width 0.03s linear"
-  } })), labelEl);
-  if (type === "ring") return /* @__PURE__ */ React.createElement("div", { style: wrapStyle }, /* @__PURE__ */ React.createElement("div", { style: {
-    width: size,
-    height: size,
-    borderRadius: "50%",
-    border: `4px solid ${alpha(accent, 0.15)}`,
-    borderTop: `4px solid ${accent}`,
-    borderRight: `4px solid ${accent}`,
-    animation: `spin ${dur} linear infinite`
-  } }), /* @__PURE__ */ React.createElement("style", null, `@keyframes spin { to { transform: rotate(360deg); } }`), labelEl);
-  return null;
+  ), /* @__PURE__ */ React.createElement("style", null, `@keyframes spin {
+          0% { transform: rotate(0deg); }
+          100% { transform: rotate(360deg); }
+        }`));
 };
 
 // src/components/NotificationToast/NotificationToast.jsx
-import React2, { useState as useState2, useEffect as useEffect2 } from "react";
+import React2, { useState, useEffect } from "react";
 var NotificationToast = ({
   title = "New Message",
   message = "You have a new notification from the team.",
@@ -119,8 +55,8 @@ var NotificationToast = ({
   radius = "14px",
   showProgress = true
 }) => {
-  const [visible, setVisible] = useState2(true);
-  const [progress, setProgress] = useState2(100);
+  const [visible, setVisible] = useState(true);
+  const [progress, setProgress] = useState(100);
   const typeColors = {
     success: "#10b981",
     error: "#ef4444",
@@ -134,7 +70,7 @@ var NotificationToast = ({
     info: "M13 16h-1v-4h-1m1-4h.01M12 2a10 10 0 100 20A10 10 0 0012 2z"
   };
   const color = typeColors[type] || accent;
-  useEffect2(() => {
+  useEffect(() => {
     if (!showProgress) return;
     const step = 100 / (duration / 50);
     const timer = setInterval(() => {
@@ -228,7 +164,7 @@ var NotificationToast = ({
 };
 
 // src/components/AvatarCard/AvatarCard.jsx
-import React3, { useState as useState3 } from "react";
+import React3, { useState as useState2 } from "react";
 var AvatarCard = ({
   name = "Aryan Sharma",
   role = "Frontend Developer",
@@ -241,7 +177,7 @@ var AvatarCard = ({
   bg = "#0f172a",
   radius = "20px"
 }) => {
-  const [followed, setFollowed] = useState3(false);
+  const [followed, setFollowed] = useState2(false);
   const alpha = (hex, op) => {
     const r = parseInt(hex.slice(1, 3), 16);
     const g = parseInt(hex.slice(3, 5), 16);
@@ -420,7 +356,7 @@ var PricingCard = ({
 };
 
 // src/components/Navbar/Navbar.jsx
-import React5, { useState as useState4, useEffect as useEffect3 } from "react";
+import React5, { useState as useState3, useEffect as useEffect2 } from "react";
 var Navbar = ({
   logo = "VirtualAI",
   links = ["Home", "Features", "Pricing", "Blog"],
@@ -432,28 +368,28 @@ var Navbar = ({
   onLinkClick = () => {
   }
 }) => {
-  const [scrolled, setScrolled] = useState4(false);
-  const [menuOpen, setMenuOpen] = useState4(false);
-  const [active, setActive] = useState4("Home");
-  const [isMobile, setIsMobile] = useState4(false);
+  const [scrolled, setScrolled] = useState3(false);
+  const [menuOpen, setMenuOpen] = useState3(false);
+  const [active, setActive] = useState3("Home");
+  const [isMobile, setIsMobile] = useState3(false);
   const alpha = (hex, op) => {
     const r = parseInt(hex.slice(1, 3), 16);
     const g = parseInt(hex.slice(3, 5), 16);
     const b = parseInt(hex.slice(5, 7), 16);
     return `rgba(${r},${g},${b},${op})`;
   };
-  useEffect3(() => {
+  useEffect2(() => {
     const checkMobile = () => setIsMobile(window.innerWidth < 768);
     checkMobile();
     window.addEventListener("resize", checkMobile);
     return () => window.removeEventListener("resize", checkMobile);
   }, []);
-  useEffect3(() => {
+  useEffect2(() => {
     const handler = () => setScrolled(window.scrollY > 10);
     window.addEventListener("scroll", handler);
     return () => window.removeEventListener("scroll", handler);
   }, []);
-  useEffect3(() => {
+  useEffect2(() => {
     if (!isMobile) setMenuOpen(false);
   }, [isMobile]);
   const handleLink = (link) => {
@@ -723,7 +659,7 @@ var Footer = ({
 };
 
 // src/components/Sidebar/Sidebar.jsx
-import React7, { useState as useState5 } from "react";
+import React7, { useState as useState4 } from "react";
 var Sidebar = ({
   logo = "VirtualAI",
   accent = "#6366f1",
@@ -751,8 +687,8 @@ var Sidebar = ({
     }
   ]
 }) => {
-  const [active, setActive] = useState5(0);
-  const [collapsed, setCollapsed] = useState5(false);
+  const [active, setActive] = useState4(0);
+  const [collapsed, setCollapsed] = useState4(false);
   const alpha = (hex, op) => {
     const r = parseInt(hex.slice(1, 3), 16);
     const g = parseInt(hex.slice(3, 5), 16);
@@ -901,7 +837,7 @@ var Sidebar = ({
 };
 
 // src/components/Charts/Charts.jsx
-import React8, { useState as useState6 } from "react";
+import React8, { useState as useState5 } from "react";
 var Charts = ({
   type = "bar",
   data = [
@@ -921,7 +857,7 @@ var Charts = ({
   showGrid = true,
   showValues = true
 }) => {
-  const [hovered, setHovered] = useState6(null);
+  const [hovered, setHovered] = useState5(null);
   const alpha = (hex, op) => {
     const r = parseInt(hex.slice(1, 3), 16);
     const g = parseInt(hex.slice(3, 5), 16);
@@ -1246,7 +1182,7 @@ var Charts = ({
 };
 
 // src/components/ImageCard/ImageCard.jsx
-import React9, { useState as useState7 } from "react";
+import React9, { useState as useState6 } from "react";
 var ImageCard = ({
   image = "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=600&q=80",
   tag = "Travel",
@@ -1259,7 +1195,7 @@ var ImageCard = ({
   onButtonClick = () => {
   }
 }) => {
-  const [hovered, setHovered] = useState7(false);
+  const [hovered, setHovered] = useState6(false);
   const alpha = (hex, op) => {
     const r = parseInt(hex.slice(1, 3), 16);
     const g = parseInt(hex.slice(3, 5), 16);
@@ -1350,7 +1286,7 @@ var ImageCard = ({
 };
 
 // src/components/ImageSlider/ImageSlider.jsx
-import React10, { useState as useState8 } from "react";
+import React10, { useState as useState7 } from "react";
 var ImageSlider = ({
   images = [
     {
@@ -1381,8 +1317,8 @@ var ImageSlider = ({
   showCaption = true,
   autoPlay = false
 }) => {
-  const [current, setCurrent] = useState8(0);
-  const [dir, setDir] = useState8(null);
+  const [current, setCurrent] = useState7(0);
+  const [dir, setDir] = useState7(null);
   const alpha = (hex, op) => {
     const r = parseInt(hex.slice(1, 3), 16);
     const g = parseInt(hex.slice(3, 5), 16);
@@ -1564,7 +1500,7 @@ var ImageSlider = ({
 };
 
 // src/components/BackgoundImageSlider/BackgoundImageSlider.jsx
-import React11, { useState as useState9, useEffect as useEffect4, useCallback } from "react";
+import React11, { useState as useState8, useEffect as useEffect3, useCallback } from "react";
 var BackgoundImageSlider = ({
   images = [
     {
@@ -1600,8 +1536,8 @@ var BackgoundImageSlider = ({
   autoPlay = false,
   autoPlayInterval = 4e3
 }) => {
-  const [current, setCurrent] = useState9(0);
-  const [animating, setAnimating] = useState9(false);
+  const [current, setCurrent] = useState8(0);
+  const [animating, setAnimating] = useState8(false);
   const alpha = (hex, op) => {
     const r = parseInt(hex.slice(1, 3), 16);
     const g = parseInt(hex.slice(3, 5), 16);
@@ -1616,7 +1552,7 @@ var BackgoundImageSlider = ({
   }, [animating, images.length]);
   const prev = () => go(current - 1);
   const next = () => go(current + 1);
-  useEffect4(() => {
+  useEffect3(() => {
     if (!autoPlay) return;
     const t = setInterval(() => go(current + 1), autoPlayInterval);
     return () => clearInterval(t);
@@ -1827,7 +1763,7 @@ var BackgoundImageSlider = ({
 };
 
 // src/components/PageLoader/PageLoader.jsx
-import React12, { useState as useState10, useEffect as useEffect5 } from "react";
+import React12, { useState as useState9, useEffect as useEffect4 } from "react";
 var PageLoader = ({
   logo = "VirtualAI",
   accent = "#6366f1",
@@ -1839,15 +1775,15 @@ var PageLoader = ({
   onComplete = () => {
   }
 }) => {
-  const [progress, setProgress] = useState10(0);
-  const [done, setDone] = useState10(false);
+  const [progress, setProgress] = useState9(0);
+  const [done, setDone] = useState9(false);
   const alpha = (hex, op) => {
     const r = parseInt(hex.slice(1, 3), 16);
     const g = parseInt(hex.slice(3, 5), 16);
     const b = parseInt(hex.slice(5, 7), 16);
     return `rgba(${r},${g},${b},${op})`;
   };
-  useEffect5(() => {
+  useEffect4(() => {
     const steps = 100;
     const interval = duration / steps;
     let current = 0;
@@ -1996,7 +1932,7 @@ var PageLoader = ({
 };
 
 // src/components/OTPInput/OTPInput.jsx
-import React13, { useState as useState11, useRef, useEffect as useEffect6 } from "react";
+import React13, { useState as useState10, useRef, useEffect as useEffect5 } from "react";
 var OTPInput = ({
   length = 6,
   onComplete = () => {
@@ -2013,10 +1949,10 @@ var OTPInput = ({
   onResend = () => {
   }
 }) => {
-  const [otp, setOtp] = useState11(Array(length).fill(""));
-  const [focused, setFocused] = useState11(0);
-  const [completed, setCompleted] = useState11(false);
-  const [resendTimer, setResendTimer] = useState11(30);
+  const [otp, setOtp] = useState10(Array(length).fill(""));
+  const [focused, setFocused] = useState10(0);
+  const [completed, setCompleted] = useState10(false);
+  const [resendTimer, setResendTimer] = useState10(30);
   const inputs = useRef([]);
   const alpha = (hex, op) => {
     const r = parseInt(hex.slice(1, 3), 16);
@@ -2024,11 +1960,11 @@ var OTPInput = ({
     const b = parseInt(hex.slice(5, 7), 16);
     return `rgba(${r},${g},${b},${op})`;
   };
-  useEffect6(() => {
+  useEffect5(() => {
     var _a;
     (_a = inputs.current[0]) == null ? void 0 : _a.focus();
   }, []);
-  useEffect6(() => {
+  useEffect5(() => {
     if (resendTimer <= 0) return;
     const t = setInterval(() => setResendTimer((s) => s - 1), 1e3);
     return () => clearInterval(t);
@@ -2227,7 +2163,7 @@ var OTPInput = ({
 };
 
 // src/components/InvoiceCard/InvoiceCard.jsx
-import React14, { useState as useState12 } from "react";
+import React14, { useState as useState11 } from "react";
 var InvoiceCard = ({
   invoiceNumber = "INV-2024-001",
   date = "21 March 2024",
@@ -2258,7 +2194,7 @@ var InvoiceCard = ({
   onDownloadClick = () => {
   }
 }) => {
-  const [paid, setPaid] = useState12(status === "paid");
+  const [paid, setPaid] = useState11(status === "paid");
   const alpha = (hex, op) => {
     const r = parseInt(hex.slice(1, 3), 16);
     const g = parseInt(hex.slice(3, 5), 16);
@@ -2448,7 +2384,7 @@ var InvoiceCard = ({
 };
 
 // src/components/FileUpload/FileUpload.jsx
-import React15, { useState as useState13, useRef as useRef2 } from "react";
+import React15, { useState as useState12, useRef as useRef2 } from "react";
 var FileUpload = ({
   accept = "*",
   multiple = true,
@@ -2461,9 +2397,9 @@ var FileUpload = ({
   onUpload = () => {
   }
 }) => {
-  const [files, setFiles] = useState13([]);
-  const [dragging, setDragging] = useState13(false);
-  const [error, setError] = useState13("");
+  const [files, setFiles] = useState12([]);
+  const [dragging, setDragging] = useState12(false);
+  const [error, setError] = useState12("");
   const inputRef = useRef2(null);
   const alpha = (hex, op) => {
     const r = parseInt(hex.slice(1, 3), 16);
@@ -2711,7 +2647,7 @@ var FileUpload = ({
 };
 
 // src/components/ColorPicker/ColorPicker.jsx
-import React16, { useState as useState14 } from "react";
+import React16, { useState as useState13 } from "react";
 var ColorPicker = ({
   defaultColor = "#6366f1",
   showOpacity = true,
@@ -2745,11 +2681,11 @@ var ColorPicker = ({
     "#000000"
   ]
 }) => {
-  const [color, setColor] = useState14(defaultColor);
-  const [hex, setHex] = useState14(defaultColor);
-  const [opacity, setOpacity] = useState14(100);
-  const [inputErr, setInputErr] = useState14(false);
-  const [copied, setCopied] = useState14(false);
+  const [color, setColor] = useState13(defaultColor);
+  const [hex, setHex] = useState13(defaultColor);
+  const [opacity, setOpacity] = useState13(100);
+  const [inputErr, setInputErr] = useState13(false);
+  const [copied, setCopied] = useState13(false);
   const alpha = (hexVal, op) => {
     const r = parseInt(hexVal.slice(1, 3), 16);
     const g = parseInt(hexVal.slice(3, 5), 16);
@@ -2945,7 +2881,7 @@ var ColorPicker = ({
 };
 
 // src/components/RatingStars/RatingStars.jsx
-import React17, { useState as useState15 } from "react";
+import React17, { useState as useState14 } from "react";
 var RatingStars = ({
   defaultRating = 0,
   total = 5,
@@ -2961,8 +2897,8 @@ var RatingStars = ({
   onChange = () => {
   }
 }) => {
-  const [rating, setRating] = useState15(defaultRating);
-  const [hovered, setHovered] = useState15(0);
+  const [rating, setRating] = useState14(defaultRating);
+  const [hovered, setHovered] = useState14(0);
   const labels = ["", "Terrible", "Bad", "Okay", "Good", "Excellent"];
   const halfLabels = { 0.5: "Awful", 1: "Terrible", 1.5: "Very Bad", 2: "Bad", 2.5: "Below Average", 3: "Okay", 3.5: "Above Average", 4: "Good", 4.5: "Great", 5: "Excellent" };
   const alpha = (hex, op) => {
@@ -3061,7 +2997,7 @@ var RatingStars = ({
 };
 
 // src/components/StatCard/StatCard.jsx
-import React18, { useEffect as useEffect7, useRef as useRef3, useState as useState16 } from "react";
+import React18, { useEffect as useEffect6, useRef as useRef3, useState as useState15 } from "react";
 var StatCard = ({
   title = "Active Users",
   value = "128K",
@@ -3076,12 +3012,12 @@ var StatCard = ({
   showIcon = true,
   barPercent = 68
 }) => {
-  const [count, setCount] = useState16(0);
-  const [barWidth, setBarWidth] = useState16(0);
-  const [visible, setVisible] = useState16(false);
-  const [entered, setEntered] = useState16(false);
+  const [count, setCount] = useState15(0);
+  const [barWidth, setBarWidth] = useState15(0);
+  const [visible, setVisible] = useState15(false);
+  const [entered, setEntered] = useState15(false);
   const ref = useRef3(null);
-  useEffect7(() => {
+  useEffect6(() => {
     const observer = new IntersectionObserver(
       ([entry]) => {
         if (entry.isIntersecting) {
@@ -3094,7 +3030,7 @@ var StatCard = ({
     if (ref.current) observer.observe(ref.current);
     return () => observer.disconnect();
   }, []);
-  useEffect7(() => {
+  useEffect6(() => {
     if (!visible) return;
     setEntered(true);
     const duration = 1400;
@@ -3107,7 +3043,7 @@ var StatCard = ({
     };
     requestAnimationFrame(step);
   }, [visible, numericValue]);
-  useEffect7(() => {
+  useEffect6(() => {
     if (!visible) return;
     const t = setTimeout(() => setBarWidth(barPercent), 200);
     return () => clearTimeout(t);
@@ -3277,7 +3213,7 @@ var StatCard = ({
 };
 
 // src/components/ProgressBar/ProgressBar.jsx
-import React19, { useEffect as useEffect8, useRef as useRef4, useState as useState17 } from "react";
+import React19, { useEffect as useEffect7, useRef as useRef4, useState as useState16 } from "react";
 var ProgressBar = ({
   label = "Progress",
   percentage = 75,
@@ -3291,10 +3227,10 @@ var ProgressBar = ({
   steps = 5
   // only for type="steps"
 }) => {
-  const [filled, setFilled] = useState17(0);
-  const [visible, setVisible] = useState17(false);
+  const [filled, setFilled] = useState16(0);
+  const [visible, setVisible] = useState16(false);
   const ref = useRef4(null);
-  useEffect8(() => {
+  useEffect7(() => {
     const obs = new IntersectionObserver(
       ([e]) => {
         if (e.isIntersecting) {
@@ -3307,7 +3243,7 @@ var ProgressBar = ({
     if (ref.current) obs.observe(ref.current);
     return () => obs.disconnect();
   }, []);
-  useEffect8(() => {
+  useEffect7(() => {
     if (!visible) return;
     const duration = 1200;
     const start = performance.now();
@@ -3524,7 +3460,7 @@ var ProgressBar = ({
 };
 
 // src/components/AnimatedForm/AnimatedForm.jsx
-import React20, { useState as useState18 } from "react";
+import React20, { useState as useState17 } from "react";
 var AnimatedForm = ({
   title = "Contact Us",
   description = "We'll get back to you shortly",
@@ -3534,10 +3470,10 @@ var AnimatedForm = ({
   onSubmit = () => {
   }
 }) => {
-  const [name, setName] = useState18("");
-  const [email, setEmail] = useState18("");
-  const [message, setMessage] = useState18("");
-  const [hovered, setHovered] = useState18(false);
+  const [name, setName] = useState17("");
+  const [email, setEmail] = useState17("");
+  const [message, setMessage] = useState17("");
+  const [hovered, setHovered] = useState17(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 + ")";
@@ -3671,7 +3607,7 @@ var ReviewCard = ({
 };
 
 // src/components/Card/Card.jsx
-import React22, { useState as useState19 } from "react";
+import React22, { useState as useState18 } from "react";
 var Card = ({
   title = "Performance",
   description = "Real-time metrics with live dashboard updates every second.",
@@ -3679,7 +3615,7 @@ var Card = ({
   tag = "Active",
   onClick
 }) => {
-  const [hovered, setHovered] = useState19(false);
+  const [hovered, setHovered] = useState18(false);
   return /* @__PURE__ */ React22.createElement(
     "div",
     {
@@ -3775,7 +3711,7 @@ var Button = ({ text = "Get Started", bg = "#7c3aed", color = "#fff", size = "md
 };
 
 // src/components/AnimatedButton/AnimatedButton.jsx
-import React24, { useState as useState20 } from "react";
+import React24, { useState as useState19 } from "react";
 var AnimatedButton = ({
   text = "Click Me!",
   bg = "#7c3aed",
@@ -3789,7 +3725,7 @@ var AnimatedButton = ({
   onClick
 }) => {
   const sizes = { sm: "8px 16px", md: "12px 24px", lg: "16px 32px" };
-  const [hovered, setHovered] = useState20(false);
+  const [hovered, setHovered] = useState19(false);
   return /* @__PURE__ */ React24.createElement(
     "button",
     {
@@ -3821,7 +3757,7 @@ var AnimatedButton = ({
 };
 
 // src/components/ECommerceCard/ECommerceCard.jsx
-import React25, { useState as useState21 } from "react";
+import React25, { useState as useState20 } from "react";
 var ECommerceCard = ({
   title = "Wireless Headphones",
   description = "Experience immersive sound with noise cancellation.",
@@ -3836,7 +3772,7 @@ var ECommerceCard = ({
   onViewDetails = () => {
   }
 }) => {
-  const [hovered, setHovered] = useState21(false);
+  const [hovered, setHovered] = useState20(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 + ")";
@@ -3897,7 +3833,7 @@ var IDCard = ({
 };
 
 // src/components/DatePicker/DatePicker.jsx
-import React27, { useState as useState22 } from "react";
+import React27, { useState as useState21 } from "react";
 var DatePicker = ({
   selectedDate = /* @__PURE__ */ new Date(),
   accent = "#6366f1",
@@ -3905,7 +3841,7 @@ var DatePicker = ({
   onDateChange = () => {
   }
 }) => {
-  const [date, setDate] = useState22(selectedDate);
+  const [date, setDate] = useState21(selectedDate);
   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 + ")";
@@ -3963,6 +3899,28 @@ var FacebookPost = ({
   };
   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 useState22 } 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] = useState22(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,
@@ -3991,5 +3949,6 @@ export {
   RatingStars,
   ReviewCard,
   Sidebar,
-  StatCard
+  StatCard,
+  TwitterPost
 };

package/package.json

@@ -1,22 +1,22 @@
-{
-  "name": "virtual-ui-project-lib",
-  "version": "1.0.5",
-  "description": "Virtual UI React Component Library",
-  "author": "Rahul Kumar",
-  "license": "ISC",
-  "main": "dist/index.js",
-  "module": "dist/index.mjs",
-  "files": [
-    "dist"
-  ],
-  "scripts": {
-    "build": "tsup"
-  },
-  "peerDependencies": {
-    "react": ">=18"
-  },
-  "devDependencies": {
-    "tsup": "^8.5.1",
-    "typescript": "^5.9.3"
-  }
-}
+{
+  "name": "virtual-ui-project-lib",
+  "version": "1.0.7",
+  "description": "Virtual UI React Component Library",
+  "author": "Rahul Kumar",
+  "license": "ISC",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup"
+  },
+  "peerDependencies": {
+    "react": ">=18"
+  },
+  "devDependencies": {
+    "tsup": "^8.5.1",
+    "typescript": "^5.9.3"
+  }
+}

package/README.md

@@ -1,361 +0,0 @@
-
-
-# Virtual UI
-
-A modern and customizable **React UI Component Library** designed for fast development and clean design systems.
-
----
-
-## 📦 Install
-
-```bash
-npm install virtual-ui-project-lib
-```
-
----
-
-## 🚀 Usage
-
-```jsx
-import {
-  Navbar,
-  Sidebar,
-  AvatarCard,
-  PricingCard,
-  Loader,
-  OTPInput
-} from "virtual-ui-project-lib"
-
-function App() {
-  return (
-    <>
-      <Navbar />
-      <Sidebar />
-
-      <div style={{ padding: "20px" }}>
-        <AvatarCard />
-        <PricingCard />
-        <OTPInput />
-        <Loader />
-      </div>
-    </>
-  )
-}
-```
-
----
-
-# 🧩 Components
-
-Virtual UI includes the following components:
-
-* AvatarCard
-* BackgroundImageSlider
-* Charts
-* ColorPicker
-* FileUpload
-* Footer
-* ImageCard
-* ImageSlider
-* InvoiceCard
-* Loader
-* Navbar
-* NotificationToast
-* OTPInput
-* PageLoader
-* PricingCard
-* RatingStars
-* Sidebar
-
----
-
-# 📘 Component Details
-
----
-
-## AvatarCard
-
-```jsx
-<AvatarCard />
-```
-
-### Props
-
-| Prop  | Description  |
-| ----- | ------------ |
-| name  | User name    |
-| image | Avatar image |
-| role  | User role    |
-| size  | Card size    |
-
----
-
-## Navbar
-
-```jsx
-<Navbar />
-```
-
-### Props
-
-| Prop  | Description      |
-| ----- | ---------------- |
-| logo  | Logo text/image  |
-| links | Navigation links |
-| fixed | Sticky navbar    |
-
----
-
-## Sidebar
-
-```jsx
-<Sidebar />
-```
-
-### Props
-
-| Prop      | Description    |
-| --------- | -------------- |
-| items     | Sidebar items  |
-| collapsed | Collapse state |
-
----
-
-## PricingCard
-
-```jsx
-<PricingCard />
-```
-
-### Props
-
-| Prop        | Description      |
-| ----------- | ---------------- |
-| title       | Plan name        |
-| price       | Plan price       |
-| features    | List of features |
-| highlighted | Highlight plan   |
-
----
-
-## OTPInput
-
-```jsx
-<OTPInput length={6} />
-```
-
-### Props
-
-| Prop     | Description        |
-| -------- | ------------------ |
-| length   | Number of digits   |
-| onChange | OTP change handler |
-
----
-
-## Loader
-
-```jsx
-<Loader />
-```
-
-### Props
-
-| Prop  | Description  |
-| ----- | ------------ |
-| size  | Loader size  |
-| color | Loader color |
-
----
-
-## NotificationToast
-
-```jsx
-<NotificationToast message="Saved!" />
-```
-
-### Props
-
-| Prop    | Description            |
-| ------- | ---------------------- |
-| message | Toast text             |
-| type    | success / error / info |
-
----
-
-## Charts
-
-```jsx
-<Charts />
-```
-
-### Props
-
-| Prop | Description      |
-| ---- | ---------------- |
-| type | bar / line / pie |
-| data | Chart data       |
-
----
-
-## ColorPicker
-
-```jsx
-<ColorPicker />
-```
-
-### Props
-
-| Prop     | Description    |
-| -------- | -------------- |
-| value    | Selected color |
-| onChange | Change handler |
-
----
-
-## FileUpload
-
-```jsx
-<FileUpload />
-```
-
-### Props
-
-| Prop     | Description          |
-| -------- | -------------------- |
-| onUpload | Upload handler       |
-| multiple | Allow multiple files |
-
----
-
-## ImageCard
-
-```jsx
-<ImageCard />
-```
-
-### Props
-
-| Prop  | Description  |
-| ----- | ------------ |
-| src   | Image source |
-| title | Image title  |
-
----
-
-## ImageSlider
-
-```jsx
-<ImageSlider />
-```
-
-### Props
-
-| Prop     | Description |
-| -------- | ----------- |
-| images   | Image array |
-| autoPlay | Auto slide  |
-
----
-
-## BackgroundImageSlider
-
-```jsx
-<BackgroundImageSlider />
-```
-
-### Props
-
-| Prop    | Description       |
-| ------- | ----------------- |
-| images  | Background images |
-| overlay | Overlay color     |
-
----
-
-## InvoiceCard
-
-```jsx
-<InvoiceCard />
-```
-
-### Props
-
-| Prop      | Description    |
-| --------- | -------------- |
-| invoiceId | Invoice ID     |
-| amount    | Amount         |
-| status    | Paid / Pending |
-
----
-
-## RatingStars
-
-```jsx
-<RatingStars rating={4} />
-```
-
-### Props
-
-| Prop     | Description     |
-| -------- | --------------- |
-| rating   | Number of stars |
-| onChange | Change handler  |
-
----
-
-## PageLoader
-
-```jsx
-<PageLoader />
-```
-
-### Props
-
-| Prop       | Description      |
-| ---------- | ---------------- |
-| fullScreen | Full page loader |
-
----
-
-## Footer
-
-```jsx
-<Footer />
-```
-
-### Props
-
-| Prop  | Description  |
-| ----- | ------------ |
-| text  | Footer text  |
-| links | Footer links |
-
----
-
-# 🤝 Contributing
-
-Contributions are welcome!
-
-* Fork the repo
-* Create a new branch
-* Submit a pull request
-
----
-
-# 📄 License
-
-MIT License
-
----
-
-# 💡 Future Improvements
-
-* Theme system (dark/light mode)
-* Animation presets
-* Accessibility improvements
-* More enterprise components
-
----
-
-Made with ❤️ for developers