virtual-ui-project-lib 1.0.0 → 1.0.5

package/README.md

@@ -1,8 +1,4 @@
-# 🌐 Live Demo
 
-👉 https://virtual-ui-client.onrender.com
-
----
 
 # Virtual UI
 
@@ -13,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
 ```
 
 ---
@@ -28,7 +24,7 @@ import {
   PricingCard,
   Loader,
   OTPInput
-} from "virtual-ui-lib"
+} from "virtual-ui-project-lib"
 
 function App() {
   return (

package/dist/index.js

@@ -37,9 +37,12 @@ __export(index_exports, {
   Card: () => Card,
   Charts: () => Charts,
   ColorPicker: () => ColorPicker,
-  EcommerceCard: () => EcommerceCard,
+  DatePicker: () => DatePicker,
+  ECommerceCard: () => ECommerceCard,
+  FacebookPost: () => FacebookPost,
   FileUpload: () => FileUpload,
   Footer: () => Footer,
+  IDCard: () => IDCard,
   ImageCard: () => ImageCard,
   ImageSlider: () => ImageSlider,
   InvoiceCard: () => InvoiceCard,
@@ -3582,64 +3585,8 @@ var ProgressBar = ({
   return null;
 };
 
-// src/components/EcommerceCard/EcommerceCard.jsx
-var import_react20 = __toESM(require("react"));
-var EcommerceCard = ({
-  image = "https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=600&q=80",
-  title = "Wireless Headphones",
-  description = "Premium noise-cancelling headphones with 40 hours battery life.",
-  price = 199,
-  currency = "$",
-  accent = "#6366f1",
-  bg = "#0f172a",
-  onAddToCart = () => {
-  },
-  onViewDetails = () => {
-  }
-}) => {
-  const [hovered, setHovered] = (0, import_react20.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_react20.default.createElement(
-    "div",
-    {
-      onMouseEnter: () => setHovered(true),
-      onMouseLeave: () => setHovered(false),
-      style: {
-        background: bg,
-        borderRadius: "20px",
-        overflow: "hidden",
-        width: "300px",
-        border: "1px solid " + (hovered ? alpha(accent, 0.3) : "rgba(255,255,255,0.07)"),
-        fontFamily: "system-ui,sans-serif",
-        transition: "transform 0.25s, box-shadow 0.25s",
-        transform: hovered ? "translateY(-4px)" : "translateY(0px)",
-        boxShadow: hovered ? "0 16px 40px rgba(0,0,0,0.5)" : "0 4px 20px rgba(0,0,0,0.3)"
-      }
-    },
-    /* @__PURE__ */ import_react20.default.createElement("div", { style: { position: "relative", width: "100%", height: "200px", overflow: "hidden" } }, /* @__PURE__ */ import_react20.default.createElement("img", { src: image, alt: title, style: { width: "100%", height: "100%", objectFit: "cover", transform: hovered ? "scale(1.05)" : "scale(1)", transition: "transform 0.4s ease" } }), /* @__PURE__ */ import_react20.default.createElement("div", { style: { position: "absolute", inset: 0, background: "linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 60%)" } })),
-    /* @__PURE__ */ import_react20.default.createElement("div", { style: { padding: "18px" } }, /* @__PURE__ */ import_react20.default.createElement("h3", { style: { fontSize: "15px", fontWeight: "700", color: "#fff", margin: "0 0 8px", lineHeight: 1.4 } }, title), /* @__PURE__ */ import_react20.default.createElement("p", { style: { fontSize: "13px", color: "rgba(255,255,255,0.45)", lineHeight: 1.65, margin: "0 0 18px" } }, description), /* @__PURE__ */ import_react20.default.createElement("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "18px" } }, /* @__PURE__ */ import_react20.default.createElement("span", { style: { fontSize: "24px", fontWeight: "800", color: "#fff" } }, currency, price), /* @__PURE__ */ import_react20.default.createElement(
-      "button",
-      {
-        onClick: onAddToCart,
-        style: { padding: "8px 16px", borderRadius: "12px", border: "none", background: accent, color: "#fff", fontSize: "13px", fontWeight: "700", cursor: "pointer", fontFamily: "inherit" }
-      },
-      "Add to Cart"
-    )), /* @__PURE__ */ import_react20.default.createElement(
-      "button",
-      {
-        onClick: onViewDetails,
-        style: { width: "100%", padding: "11px", borderRadius: "12px", border: "1px solid " + alpha(accent, 0.3), background: "transparent", color: accent, fontSize: "13px", fontWeight: "700", cursor: "pointer", fontFamily: "inherit" }
-      },
-      "View Details"
-    ))
-  );
-};
-
 // src/components/AnimatedForm/AnimatedForm.jsx
-var import_react21 = __toESM(require("react"));
+var import_react20 = __toESM(require("react"));
 var AnimatedForm = ({
   title = "Contact Us",
   description = "We'll get back to you shortly",
@@ -3649,15 +3596,15 @@ var AnimatedForm = ({
   onSubmit = () => {
   }
 }) => {
-  const [name, setName] = (0, import_react21.useState)("");
-  const [email, setEmail] = (0, import_react21.useState)("");
-  const [message, setMessage] = (0, import_react21.useState)("");
-  const [hovered, setHovered] = (0, import_react21.useState)(false);
+  const [name, setName] = (0, import_react20.useState)("");
+  const [email, setEmail] = (0, import_react20.useState)("");
+  const [message, setMessage] = (0, import_react20.useState)("");
+  const [hovered, setHovered] = (0, import_react20.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_react21.default.createElement(
+  return /* @__PURE__ */ import_react20.default.createElement(
     "div",
     {
       onMouseEnter: () => setHovered(true),
@@ -3674,9 +3621,9 @@ var AnimatedForm = ({
         boxShadow: hovered ? "0 16px 40px rgba(0,0,0,0.5)" : "0 4px 20px rgba(0,0,0,0.3)"
       }
     },
-    /* @__PURE__ */ import_react21.default.createElement("h2", { style: { fontSize: "20px", fontWeight: "700", color: "#fff", margin: "0 0 8px" } }, title),
-    /* @__PURE__ */ import_react21.default.createElement("p", { style: { fontSize: "14px", color: "rgba(255,255,255,0.45)", margin: "0 0 24px" } }, description),
-    /* @__PURE__ */ import_react21.default.createElement(
+    /* @__PURE__ */ import_react20.default.createElement("h2", { style: { fontSize: "20px", fontWeight: "700", color: "#fff", margin: "0 0 8px" } }, title),
+    /* @__PURE__ */ import_react20.default.createElement("p", { style: { fontSize: "14px", color: "rgba(255,255,255,0.45)", margin: "0 0 24px" } }, description),
+    /* @__PURE__ */ import_react20.default.createElement(
       "input",
       {
         type: "text",
@@ -3698,7 +3645,7 @@ var AnimatedForm = ({
         }
       }
     ),
-    /* @__PURE__ */ import_react21.default.createElement(
+    /* @__PURE__ */ import_react20.default.createElement(
       "input",
       {
         type: "email",
@@ -3720,7 +3667,7 @@ var AnimatedForm = ({
         }
       }
     ),
-    /* @__PURE__ */ import_react21.default.createElement(
+    /* @__PURE__ */ import_react20.default.createElement(
       "textarea",
       {
         placeholder: "Your Message",
@@ -3743,7 +3690,7 @@ var AnimatedForm = ({
         }
       }
     ),
-    /* @__PURE__ */ import_react21.default.createElement(
+    /* @__PURE__ */ import_react20.default.createElement(
       "button",
       {
         onClick: () => onSubmit({ name, email, message }),
@@ -3766,7 +3713,7 @@ var AnimatedForm = ({
 };
 
 // src/components/ReviewCard/ReviewCard.jsx
-var import_react22 = __toESM(require("react"));
+var import_react21 = __toESM(require("react"));
 var ReviewCard = ({
   avatar = "https://images.unsplash.com/photo-1633332755192-727a05c4013d?w=800&q=80",
   name = "John Doe",
@@ -3782,11 +3729,11 @@ var ReviewCard = ({
     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_react22.default.createElement("div", { style: { background: bg, borderRadius: "16px", padding: "16px", width: "320px", fontFamily: "system-ui,sans-serif", border: "1px solid rgba(255,255,255,0.08)", boxShadow: "0 4px 16px rgba(0,0,0,0.3)" } }, /* @__PURE__ */ import_react22.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: "12px", marginBottom: "12px" } }, /* @__PURE__ */ import_react22.default.createElement("img", { src: avatar, alt: name, onClick: onProfileClick, style: { width: "40px", height: "40px", borderRadius: "50%", cursor: "pointer" } }), /* @__PURE__ */ import_react22.default.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "2px" } }, /* @__PURE__ */ import_react22.default.createElement("div", { style: { fontSize: "14px", fontWeight: "700", color: "#fff" } }, name), /* @__PURE__ */ import_react22.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: "4px" } }, Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ import_react22.default.createElement("svg", { key: i, width: "14", height: "14", viewBox: "0 0 24 24", fill: i < rating ? accent : "rgba(255,255,255,0.15)", stroke: "none" }, /* @__PURE__ */ import_react22.default.createElement("path", { d: "M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" })))))), /* @__PURE__ */ import_react22.default.createElement("div", { style: { fontSize: "13px", color: "rgba(255,255,255,0.7)", lineHeight: 1.5, marginBottom: "12px" } }, review), /* @__PURE__ */ import_react22.default.createElement("div", { style: { fontSize: "11px", color: "rgba(255,255,255,0.4)" } }, date));
+  return /* @__PURE__ */ import_react21.default.createElement("div", { style: { background: bg, borderRadius: "16px", padding: "16px", width: "320px", fontFamily: "system-ui,sans-serif", border: "1px solid rgba(255,255,255,0.08)", boxShadow: "0 4px 16px rgba(0,0,0,0.3)" } }, /* @__PURE__ */ import_react21.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: "12px", marginBottom: "12px" } }, /* @__PURE__ */ import_react21.default.createElement("img", { src: avatar, alt: name, onClick: onProfileClick, style: { width: "40px", height: "40px", borderRadius: "50%", cursor: "pointer" } }), /* @__PURE__ */ import_react21.default.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "2px" } }, /* @__PURE__ */ import_react21.default.createElement("div", { style: { fontSize: "14px", fontWeight: "700", color: "#fff" } }, name), /* @__PURE__ */ import_react21.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: "4px" } }, Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ import_react21.default.createElement("svg", { key: i, width: "14", height: "14", viewBox: "0 0 24 24", fill: i < rating ? accent : "rgba(255,255,255,0.15)", stroke: "none" }, /* @__PURE__ */ import_react21.default.createElement("path", { d: "M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" })))))), /* @__PURE__ */ import_react21.default.createElement("div", { style: { fontSize: "13px", color: "rgba(255,255,255,0.7)", lineHeight: 1.5, marginBottom: "12px" } }, review), /* @__PURE__ */ import_react21.default.createElement("div", { style: { fontSize: "11px", color: "rgba(255,255,255,0.4)" } }, date));
 };
 
 // src/components/Card/Card.jsx
-var import_react23 = __toESM(require("react"));
+var import_react22 = __toESM(require("react"));
 var Card = ({
   title = "Performance",
   description = "Real-time metrics with live dashboard updates every second.",
@@ -3794,8 +3741,8 @@ var Card = ({
   tag = "Active",
   onClick
 }) => {
-  const [hovered, setHovered] = (0, import_react23.useState)(false);
-  return /* @__PURE__ */ import_react23.default.createElement(
+  const [hovered, setHovered] = (0, import_react22.useState)(false);
+  return /* @__PURE__ */ import_react22.default.createElement(
     "div",
     {
       onMouseEnter: () => setHovered(true),
@@ -3815,7 +3762,7 @@ var Card = ({
         width: "260px"
       }
     },
-    /* @__PURE__ */ import_react23.default.createElement("div", { style: {
+    /* @__PURE__ */ import_react22.default.createElement("div", { style: {
       position: "absolute",
       top: 0,
       left: 0,
@@ -3824,7 +3771,7 @@ var Card = ({
       background: "#1D9E75",
       borderRadius: "12px 12px 0 0"
     } }),
-    /* @__PURE__ */ import_react23.default.createElement("div", { style: {
+    /* @__PURE__ */ import_react22.default.createElement("div", { style: {
       width: 40,
       height: 40,
       borderRadius: 8,
@@ -3835,22 +3782,22 @@ var Card = ({
       fontSize: 18,
       marginBottom: 14
     } }, icon),
-    /* @__PURE__ */ import_react23.default.createElement("p", { style: { fontSize: 15, fontWeight: 700, color: "#111", margin: "0 0 6px" } }, title),
-    /* @__PURE__ */ import_react23.default.createElement("p", { style: { fontSize: 13, color: "#666", lineHeight: 1.6, margin: "0 0 16px" } }, description),
-    /* @__PURE__ */ import_react23.default.createElement("div", { style: {
+    /* @__PURE__ */ import_react22.default.createElement("p", { style: { fontSize: 15, fontWeight: 700, color: "#111", margin: "0 0 6px" } }, title),
+    /* @__PURE__ */ import_react22.default.createElement("p", { style: { fontSize: 13, color: "#666", lineHeight: 1.6, margin: "0 0 16px" } }, description),
+    /* @__PURE__ */ import_react22.default.createElement("div", { style: {
       display: "flex",
       alignItems: "center",
       justifyContent: "space-between",
       borderTop: "0.5px solid #0000001a",
       paddingTop: 12
-    } }, /* @__PURE__ */ import_react23.default.createElement("span", { style: {
+    } }, /* @__PURE__ */ import_react22.default.createElement("span", { style: {
       fontSize: 11,
       fontWeight: 500,
       padding: "3px 9px",
       borderRadius: 20,
       background: "#E1F5EE",
       color: "#0F6E56"
-    } }, tag), /* @__PURE__ */ import_react23.default.createElement("span", { style: {
+    } }, tag), /* @__PURE__ */ import_react22.default.createElement("span", { style: {
       fontSize: 14,
       color: "#999",
       display: "inline-block",
@@ -3861,90 +3808,36 @@ var Card = ({
 };
 
 // src/components/Button/Button.jsx
-var import_react24 = __toESM(require("react"));
-var Button = ({
-  text = "Click Me",
-  variant = "gradient",
-  // primary | outline | ghost | gradient
-  size = "md",
-  // sm | md | lg
-  icon,
-  loading = false,
-  disabled = false,
-  onClick
-}) => {
-  const [hovered, setHovered] = (0, import_react24.useState)(false);
-  const variants = {
-    primary: {
-      background: "#2563eb",
-      color: "#fff",
-      border: "none"
-    },
-    outline: {
-      background: "transparent",
-      color: "#2563eb",
-      border: "1px solid #2563eb"
-    },
-    ghost: {
-      background: "transparent",
-      color: "#111",
-      border: "none"
-    },
-    gradient: {
-      background: "linear-gradient(135deg, #6366f1, #06b6d4)",
-      color: "#fff",
-      border: "none"
-    }
-  };
-  const sizes = {
-    sm: { padding: "6px 12px", fontSize: "12px" },
-    md: { padding: "10px 18px", fontSize: "14px" },
-    lg: { padding: "14px 24px", fontSize: "16px" }
-  };
-  return /* @__PURE__ */ import_react24.default.createElement(
+var import_react23 = __toESM(require("react"));
+var Button = ({ text = "Get Started", bg = "#7c3aed", color = "#fff", size = "md", disabled = false, loading = false, onClick = () => {
+} }) => {
+  const sizes = { sm: "8px 16px", md: "11px 24px", lg: "14px 32px" };
+  return /* @__PURE__ */ import_react23.default.createElement(
     "button",
     {
       onClick,
       disabled: disabled || loading,
-      onMouseEnter: () => setHovered(true),
-      onMouseLeave: () => setHovered(false),
       style: {
-        ...variants[variant],
-        ...sizes[size],
+        background: bg,
+        color,
+        padding: sizes[size],
         borderRadius: "10px",
+        border: "none",
         cursor: disabled ? "not-allowed" : "pointer",
-        display: "flex",
-        alignItems: "center",
-        gap: "8px",
-        fontWeight: 600,
-        fontFamily: "sans-serif",
-        // 🔥 Animation
-        transform: hovered ? "translateY(-2px) scale(1.02)" : "scale(1)",
-        boxShadow: hovered ? "0 10px 20px rgba(0,0,0,0.15)" : "0 2px 6px rgba(0,0,0,0.1)",
-        transition: "all 0.2s ease",
+        fontWeight: "700",
+        fontSize: "15px",
+        fontFamily: "system-ui,sans-serif",
+        boxShadow: "0 4px 14px rgba(124,58,237,0.4)",
         opacity: disabled ? 0.6 : 1,
-        position: "relative",
-        overflow: "hidden"
+        transition: "opacity 0.2s"
       }
     },
-    /* @__PURE__ */ import_react24.default.createElement(
-      "span",
-      {
-        style: {
-          position: "absolute",
-          inset: 0,
-          background: "rgba(255,255,255,0.2)",
-          opacity: hovered ? 1 : 0,
-          transition: "opacity 0.3s"
-        }
-      }
-    ),
-    loading ? /* @__PURE__ */ import_react24.default.createElement("span", null, "Loading...") : /* @__PURE__ */ import_react24.default.createElement(import_react24.default.Fragment, null, icon && /* @__PURE__ */ import_react24.default.createElement("span", null, icon), /* @__PURE__ */ import_react24.default.createElement("span", null, text))
+    loading ? "Loading..." : text
   );
 };
 
 // src/components/AnimatedButton/AnimatedButton.jsx
-var import_react25 = __toESM(require("react"));
+var import_react24 = __toESM(require("react"));
 var AnimatedButton = ({
   text = "Click Me!",
   bg = "#7c3aed",
@@ -3958,8 +3851,8 @@ var AnimatedButton = ({
   onClick
 }) => {
   const sizes = { sm: "8px 16px", md: "12px 24px", lg: "16px 32px" };
-  const [hovered, setHovered] = (0, import_react25.useState)(false);
-  return /* @__PURE__ */ import_react25.default.createElement(
+  const [hovered, setHovered] = (0, import_react24.useState)(false);
+  return /* @__PURE__ */ import_react24.default.createElement(
     "button",
     {
       onClick,
@@ -3988,6 +3881,150 @@ var AnimatedButton = ({
     text
   );
 };
+
+// src/components/ECommerceCard/ECommerceCard.jsx
+var import_react25 = __toESM(require("react"));
+var ECommerceCard = ({
+  title = "Wireless Headphones",
+  description = "Experience immersive sound with noise cancellation.",
+  price = 199.99,
+  currency = "$",
+  image = "https://images.unsplash.com/photo-1618366712010-f4ae9c647dc5?w=600&q=80",
+  rating = 4.5,
+  accent = "#6366f1",
+  bg = "#0f172a",
+  onAddToCart = () => {
+  },
+  onViewDetails = () => {
+  }
+}) => {
+  const [hovered, setHovered] = (0, import_react25.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_react25.default.createElement(
+    "div",
+    {
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => setHovered(false),
+      style: {
+        background: bg,
+        borderRadius: "20px",
+        overflow: "hidden",
+        width: "280px",
+        border: "1px solid " + (hovered ? alpha(accent, 0.3) : "rgba(255,255,255,0.07)"),
+        fontFamily: "system-ui,sans-serif",
+        transition: "transform 0.25s, box-shadow 0.25s",
+        transform: hovered ? "translateY(-4px)" : "translateY(0px)",
+        boxShadow: hovered ? "0 16px 40px rgba(0,0,0,0.5)" : "0 4px 20px rgba(0,0,0,0.3)"
+      }
+    },
+    /* @__PURE__ */ import_react25.default.createElement("div", { style: { position: "relative", width: "100%", height: "180px", overflow: "hidden" } }, /* @__PURE__ */ import_react25.default.createElement("img", { src: image, alt: title, style: { width: "100%", height: "100%", objectFit: "cover", transform: hovered ? "scale(1.05)" : "scale(1)", transition: "transform 0.4s ease" } }), /* @__PURE__ */ import_react25.default.createElement("div", { style: { position: "absolute", inset: 0, background: "linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 60%)" } }), /* @__PURE__ */ import_react25.default.createElement("div", { style: { position: "absolute", top: "12px", left: "12px", padding: "4px 10px", borderRadius: "20px", background: alpha(accent, 0.85), fontSize: "10px", fontWeight: "700", color: "#fff", textTransform: "uppercase", letterSpacing: "0.5px" } }, rating.toFixed(1), " \u2605")),
+    /* @__PURE__ */ import_react25.default.createElement("div", { style: { padding: "18px" } }, /* @__PURE__ */ import_react25.default.createElement("h3", { style: { fontSize: "15px", fontWeight: "700", color: "#fff", margin: "0 0 8px", lineHeight: 1.4 } }, title), /* @__PURE__ */ import_react25.default.createElement("p", { style: { fontSize: "13px", color: "rgba(255,255,255,0.45)", lineHeight: 1.65, margin: "0 0 18px" } }, description), /* @__PURE__ */ import_react25.default.createElement("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between" } }, /* @__PURE__ */ import_react25.default.createElement("div", { style: { fontSize: "24px", fontWeight: "800", color: accent } }, currency, Math.round(price)), /* @__PURE__ */ import_react25.default.createElement("div", { style: { display: "flex", gap: "8px" } }, /* @__PURE__ */ import_react25.default.createElement(
+      "button",
+      {
+        onClick: onViewDetails,
+        style: { padding: "8px 16px", borderRadius: "10px", border: "1px solid " + alpha(accent, 0.3), background: "transparent", color: accent, fontSize: "13px", fontWeight: "700", cursor: "pointer", fontFamily: "inherit" }
+      },
+      "Details"
+    ), /* @__PURE__ */ import_react25.default.createElement(
+      "button",
+      {
+        onClick: onAddToCart,
+        style: { padding: "8px 16px", borderRadius: "10px", border: "none", background: "linear-gradient(135deg, " + accent + ", " + alpha(accent, 0.7) + ")", color: "#fff", fontSize: "13px", fontWeight: "700", cursor: "pointer", fontFamily: "inherit" }
+      },
+      "Add to Cart"
+    ))))
+  );
+};
+
+// src/components/IDCard/IDCard.jsx
+var import_react26 = __toESM(require("react"));
+var IDCard = ({
+  name = "John Doe",
+  role = "Software Engineer",
+  company = "TechCorp",
+  photo = "https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=600&q=80",
+  accent = "#6366f1",
+  bg = "#0f172a",
+  onContactClick = () => {
+  }
+}) => {
+  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_react26.default.createElement("div", { style: { background: bg, borderRadius: "20px", padding: "24px", width: "300px", color: "#fff", fontFamily: "system-ui,sans-serif", boxShadow: "0 10px 40px rgba(0,0,0,0.5)", border: "1px solid " + alpha(accent, 0.25), position: "relative" } }, /* @__PURE__ */ import_react26.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: "16px", marginBottom: "20px" } }, /* @__PURE__ */ import_react26.default.createElement("div", { style: { width: "80px", height: "80px", borderRadius: "50%", overflow: "hidden", border: "2px solid " + alpha(accent, 0.5) } }, /* @__PURE__ */ import_react26.default.createElement("img", { src: photo, alt: name, style: { width: "100%", height: "100%", objectFit: "cover" } })), /* @__PURE__ */ import_react26.default.createElement("div", null, /* @__PURE__ */ import_react26.default.createElement("div", { style: { fontSize: "18px", fontWeight: "700", marginBottom: "4px" } }, name), /* @__PURE__ */ import_react26.default.createElement("div", { style: { fontSize: "13px", color: "rgba(255,255,255,0.5)" } }, role))), /* @__PURE__ */ import_react26.default.createElement("div", { style: { fontSize: "14px", color: "rgba(255,255,255,0.6)", marginBottom: "20px", paddingBottom: "20px", borderBottom: "1px solid " + alpha(accent, 0.1) } }, company), /* @__PURE__ */ import_react26.default.createElement("button", { onClick: onContactClick, style: { width: "100%", padding: "12px", borderRadius: "12px", border: "none", background: "linear-gradient(135deg, " + accent + ", " + alpha(accent, 0.7) + ")", color: "#fff", fontSize: "14px", fontWeight: "700", cursor: "pointer", fontFamily: "inherit" } }, "Contact"));
+};
+
+// src/components/DatePicker/DatePicker.jsx
+var import_react27 = __toESM(require("react"));
+var DatePicker = ({
+  selectedDate = /* @__PURE__ */ new Date(),
+  accent = "#6366f1",
+  bg = "#0f172a",
+  onDateChange = () => {
+  }
+}) => {
+  const [date, setDate] = (0, import_react27.useState)(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 + ")";
+  };
+  const handleDateChange = (e) => {
+    const newDate = new Date(e.target.value);
+    setDate(newDate);
+    onDateChange(newDate);
+  };
+  return /* @__PURE__ */ import_react27.default.createElement("div", { style: { background: bg, borderRadius: "12px", padding: "16px", width: "280px", fontFamily: "system-ui,sans-serif", boxShadow: "0 10px 40px rgba(0,0,0,0.5)", border: "1px solid rgba(255,255,255,0.07)" } }, /* @__PURE__ */ import_react27.default.createElement(
+    "input",
+    {
+      type: "date",
+      value: date.toISOString().split("T")[0],
+      onChange: handleDateChange,
+      style: {
+        width: "100%",
+        padding: "12px",
+        borderRadius: "8px",
+        border: "1px solid " + alpha(accent, 0.3),
+        background: "transparent",
+        color: "#fff",
+        fontFamily: "inherit",
+        fontSize: "14px",
+        outline: "none",
+        cursor: "pointer"
+      }
+    }
+  ));
+};
+
+// 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"))));
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AnimatedButton,
@@ -3998,9 +4035,12 @@ var AnimatedButton = ({
   Card,
   Charts,
   ColorPicker,
-  EcommerceCard,
+  DatePicker,
+  ECommerceCard,
+  FacebookPost,
   FileUpload,
   Footer,
+  IDCard,
   ImageCard,
   ImageSlider,
   InvoiceCard,

package/dist/index.mjs

@@ -3523,64 +3523,8 @@ var ProgressBar = ({
   return null;
 };
 
-// src/components/EcommerceCard/EcommerceCard.jsx
-import React20, { useState as useState18 } from "react";
-var EcommerceCard = ({
-  image = "https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=600&q=80",
-  title = "Wireless Headphones",
-  description = "Premium noise-cancelling headphones with 40 hours battery life.",
-  price = 199,
-  currency = "$",
-  accent = "#6366f1",
-  bg = "#0f172a",
-  onAddToCart = () => {
-  },
-  onViewDetails = () => {
-  }
-}) => {
-  const [hovered, setHovered] = useState18(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__ */ React20.createElement(
-    "div",
-    {
-      onMouseEnter: () => setHovered(true),
-      onMouseLeave: () => setHovered(false),
-      style: {
-        background: bg,
-        borderRadius: "20px",
-        overflow: "hidden",
-        width: "300px",
-        border: "1px solid " + (hovered ? alpha(accent, 0.3) : "rgba(255,255,255,0.07)"),
-        fontFamily: "system-ui,sans-serif",
-        transition: "transform 0.25s, box-shadow 0.25s",
-        transform: hovered ? "translateY(-4px)" : "translateY(0px)",
-        boxShadow: hovered ? "0 16px 40px rgba(0,0,0,0.5)" : "0 4px 20px rgba(0,0,0,0.3)"
-      }
-    },
-    /* @__PURE__ */ React20.createElement("div", { style: { position: "relative", width: "100%", height: "200px", overflow: "hidden" } }, /* @__PURE__ */ React20.createElement("img", { src: image, alt: title, style: { width: "100%", height: "100%", objectFit: "cover", transform: hovered ? "scale(1.05)" : "scale(1)", transition: "transform 0.4s ease" } }), /* @__PURE__ */ React20.createElement("div", { style: { position: "absolute", inset: 0, background: "linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 60%)" } })),
-    /* @__PURE__ */ React20.createElement("div", { style: { padding: "18px" } }, /* @__PURE__ */ React20.createElement("h3", { style: { fontSize: "15px", fontWeight: "700", color: "#fff", margin: "0 0 8px", lineHeight: 1.4 } }, title), /* @__PURE__ */ React20.createElement("p", { style: { fontSize: "13px", color: "rgba(255,255,255,0.45)", lineHeight: 1.65, margin: "0 0 18px" } }, description), /* @__PURE__ */ React20.createElement("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "18px" } }, /* @__PURE__ */ React20.createElement("span", { style: { fontSize: "24px", fontWeight: "800", color: "#fff" } }, currency, price), /* @__PURE__ */ React20.createElement(
-      "button",
-      {
-        onClick: onAddToCart,
-        style: { padding: "8px 16px", borderRadius: "12px", border: "none", background: accent, color: "#fff", fontSize: "13px", fontWeight: "700", cursor: "pointer", fontFamily: "inherit" }
-      },
-      "Add to Cart"
-    )), /* @__PURE__ */ React20.createElement(
-      "button",
-      {
-        onClick: onViewDetails,
-        style: { width: "100%", padding: "11px", borderRadius: "12px", border: "1px solid " + alpha(accent, 0.3), background: "transparent", color: accent, fontSize: "13px", fontWeight: "700", cursor: "pointer", fontFamily: "inherit" }
-      },
-      "View Details"
-    ))
-  );
-};
-
 // src/components/AnimatedForm/AnimatedForm.jsx
-import React21, { useState as useState19 } from "react";
+import React20, { useState as useState18 } from "react";
 var AnimatedForm = ({
   title = "Contact Us",
   description = "We'll get back to you shortly",
@@ -3590,15 +3534,15 @@ var AnimatedForm = ({
   onSubmit = () => {
   }
 }) => {
-  const [name, setName] = useState19("");
-  const [email, setEmail] = useState19("");
-  const [message, setMessage] = useState19("");
-  const [hovered, setHovered] = useState19(false);
+  const [name, setName] = useState18("");
+  const [email, setEmail] = useState18("");
+  const [message, setMessage] = useState18("");
+  const [hovered, setHovered] = useState18(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__ */ React21.createElement(
+  return /* @__PURE__ */ React20.createElement(
     "div",
     {
       onMouseEnter: () => setHovered(true),
@@ -3615,9 +3559,9 @@ var AnimatedForm = ({
         boxShadow: hovered ? "0 16px 40px rgba(0,0,0,0.5)" : "0 4px 20px rgba(0,0,0,0.3)"
       }
     },
-    /* @__PURE__ */ React21.createElement("h2", { style: { fontSize: "20px", fontWeight: "700", color: "#fff", margin: "0 0 8px" } }, title),
-    /* @__PURE__ */ React21.createElement("p", { style: { fontSize: "14px", color: "rgba(255,255,255,0.45)", margin: "0 0 24px" } }, description),
-    /* @__PURE__ */ React21.createElement(
+    /* @__PURE__ */ React20.createElement("h2", { style: { fontSize: "20px", fontWeight: "700", color: "#fff", margin: "0 0 8px" } }, title),
+    /* @__PURE__ */ React20.createElement("p", { style: { fontSize: "14px", color: "rgba(255,255,255,0.45)", margin: "0 0 24px" } }, description),
+    /* @__PURE__ */ React20.createElement(
       "input",
       {
         type: "text",
@@ -3639,7 +3583,7 @@ var AnimatedForm = ({
         }
       }
     ),
-    /* @__PURE__ */ React21.createElement(
+    /* @__PURE__ */ React20.createElement(
       "input",
       {
         type: "email",
@@ -3661,7 +3605,7 @@ var AnimatedForm = ({
         }
       }
     ),
-    /* @__PURE__ */ React21.createElement(
+    /* @__PURE__ */ React20.createElement(
       "textarea",
       {
         placeholder: "Your Message",
@@ -3684,7 +3628,7 @@ var AnimatedForm = ({
         }
       }
     ),
-    /* @__PURE__ */ React21.createElement(
+    /* @__PURE__ */ React20.createElement(
       "button",
       {
         onClick: () => onSubmit({ name, email, message }),
@@ -3707,7 +3651,7 @@ var AnimatedForm = ({
 };
 
 // src/components/ReviewCard/ReviewCard.jsx
-import React22 from "react";
+import React21 from "react";
 var ReviewCard = ({
   avatar = "https://images.unsplash.com/photo-1633332755192-727a05c4013d?w=800&q=80",
   name = "John Doe",
@@ -3723,11 +3667,11 @@ var ReviewCard = ({
     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__ */ React22.createElement("div", { style: { background: bg, borderRadius: "16px", padding: "16px", width: "320px", fontFamily: "system-ui,sans-serif", border: "1px solid rgba(255,255,255,0.08)", boxShadow: "0 4px 16px rgba(0,0,0,0.3)" } }, /* @__PURE__ */ React22.createElement("div", { style: { display: "flex", alignItems: "center", gap: "12px", marginBottom: "12px" } }, /* @__PURE__ */ React22.createElement("img", { src: avatar, alt: name, onClick: onProfileClick, style: { width: "40px", height: "40px", borderRadius: "50%", cursor: "pointer" } }), /* @__PURE__ */ React22.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "2px" } }, /* @__PURE__ */ React22.createElement("div", { style: { fontSize: "14px", fontWeight: "700", color: "#fff" } }, name), /* @__PURE__ */ React22.createElement("div", { style: { display: "flex", alignItems: "center", gap: "4px" } }, Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ React22.createElement("svg", { key: i, width: "14", height: "14", viewBox: "0 0 24 24", fill: i < rating ? accent : "rgba(255,255,255,0.15)", stroke: "none" }, /* @__PURE__ */ React22.createElement("path", { d: "M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" })))))), /* @__PURE__ */ React22.createElement("div", { style: { fontSize: "13px", color: "rgba(255,255,255,0.7)", lineHeight: 1.5, marginBottom: "12px" } }, review), /* @__PURE__ */ React22.createElement("div", { style: { fontSize: "11px", color: "rgba(255,255,255,0.4)" } }, date));
+  return /* @__PURE__ */ React21.createElement("div", { style: { background: bg, borderRadius: "16px", padding: "16px", width: "320px", fontFamily: "system-ui,sans-serif", border: "1px solid rgba(255,255,255,0.08)", boxShadow: "0 4px 16px rgba(0,0,0,0.3)" } }, /* @__PURE__ */ React21.createElement("div", { style: { display: "flex", alignItems: "center", gap: "12px", marginBottom: "12px" } }, /* @__PURE__ */ React21.createElement("img", { src: avatar, alt: name, onClick: onProfileClick, style: { width: "40px", height: "40px", borderRadius: "50%", cursor: "pointer" } }), /* @__PURE__ */ React21.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "2px" } }, /* @__PURE__ */ React21.createElement("div", { style: { fontSize: "14px", fontWeight: "700", color: "#fff" } }, name), /* @__PURE__ */ React21.createElement("div", { style: { display: "flex", alignItems: "center", gap: "4px" } }, Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ React21.createElement("svg", { key: i, width: "14", height: "14", viewBox: "0 0 24 24", fill: i < rating ? accent : "rgba(255,255,255,0.15)", stroke: "none" }, /* @__PURE__ */ React21.createElement("path", { d: "M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" })))))), /* @__PURE__ */ React21.createElement("div", { style: { fontSize: "13px", color: "rgba(255,255,255,0.7)", lineHeight: 1.5, marginBottom: "12px" } }, review), /* @__PURE__ */ React21.createElement("div", { style: { fontSize: "11px", color: "rgba(255,255,255,0.4)" } }, date));
 };
 
 // src/components/Card/Card.jsx
-import React23, { useState as useState20 } from "react";
+import React22, { useState as useState19 } from "react";
 var Card = ({
   title = "Performance",
   description = "Real-time metrics with live dashboard updates every second.",
@@ -3735,8 +3679,8 @@ var Card = ({
   tag = "Active",
   onClick
 }) => {
-  const [hovered, setHovered] = useState20(false);
-  return /* @__PURE__ */ React23.createElement(
+  const [hovered, setHovered] = useState19(false);
+  return /* @__PURE__ */ React22.createElement(
     "div",
     {
       onMouseEnter: () => setHovered(true),
@@ -3756,7 +3700,7 @@ var Card = ({
         width: "260px"
       }
     },
-    /* @__PURE__ */ React23.createElement("div", { style: {
+    /* @__PURE__ */ React22.createElement("div", { style: {
       position: "absolute",
       top: 0,
       left: 0,
@@ -3765,7 +3709,7 @@ var Card = ({
       background: "#1D9E75",
       borderRadius: "12px 12px 0 0"
     } }),
-    /* @__PURE__ */ React23.createElement("div", { style: {
+    /* @__PURE__ */ React22.createElement("div", { style: {
       width: 40,
       height: 40,
       borderRadius: 8,
@@ -3776,22 +3720,22 @@ var Card = ({
       fontSize: 18,
       marginBottom: 14
     } }, icon),
-    /* @__PURE__ */ React23.createElement("p", { style: { fontSize: 15, fontWeight: 700, color: "#111", margin: "0 0 6px" } }, title),
-    /* @__PURE__ */ React23.createElement("p", { style: { fontSize: 13, color: "#666", lineHeight: 1.6, margin: "0 0 16px" } }, description),
-    /* @__PURE__ */ React23.createElement("div", { style: {
+    /* @__PURE__ */ React22.createElement("p", { style: { fontSize: 15, fontWeight: 700, color: "#111", margin: "0 0 6px" } }, title),
+    /* @__PURE__ */ React22.createElement("p", { style: { fontSize: 13, color: "#666", lineHeight: 1.6, margin: "0 0 16px" } }, description),
+    /* @__PURE__ */ React22.createElement("div", { style: {
       display: "flex",
       alignItems: "center",
       justifyContent: "space-between",
       borderTop: "0.5px solid #0000001a",
       paddingTop: 12
-    } }, /* @__PURE__ */ React23.createElement("span", { style: {
+    } }, /* @__PURE__ */ React22.createElement("span", { style: {
       fontSize: 11,
       fontWeight: 500,
       padding: "3px 9px",
       borderRadius: 20,
       background: "#E1F5EE",
       color: "#0F6E56"
-    } }, tag), /* @__PURE__ */ React23.createElement("span", { style: {
+    } }, tag), /* @__PURE__ */ React22.createElement("span", { style: {
       fontSize: 14,
       color: "#999",
       display: "inline-block",
@@ -3802,90 +3746,36 @@ var Card = ({
 };
 
 // src/components/Button/Button.jsx
-import React24, { useState as useState21 } from "react";
-var Button = ({
-  text = "Click Me",
-  variant = "gradient",
-  // primary | outline | ghost | gradient
-  size = "md",
-  // sm | md | lg
-  icon,
-  loading = false,
-  disabled = false,
-  onClick
-}) => {
-  const [hovered, setHovered] = useState21(false);
-  const variants = {
-    primary: {
-      background: "#2563eb",
-      color: "#fff",
-      border: "none"
-    },
-    outline: {
-      background: "transparent",
-      color: "#2563eb",
-      border: "1px solid #2563eb"
-    },
-    ghost: {
-      background: "transparent",
-      color: "#111",
-      border: "none"
-    },
-    gradient: {
-      background: "linear-gradient(135deg, #6366f1, #06b6d4)",
-      color: "#fff",
-      border: "none"
-    }
-  };
-  const sizes = {
-    sm: { padding: "6px 12px", fontSize: "12px" },
-    md: { padding: "10px 18px", fontSize: "14px" },
-    lg: { padding: "14px 24px", fontSize: "16px" }
-  };
-  return /* @__PURE__ */ React24.createElement(
+import React23 from "react";
+var Button = ({ text = "Get Started", bg = "#7c3aed", color = "#fff", size = "md", disabled = false, loading = false, onClick = () => {
+} }) => {
+  const sizes = { sm: "8px 16px", md: "11px 24px", lg: "14px 32px" };
+  return /* @__PURE__ */ React23.createElement(
     "button",
     {
       onClick,
       disabled: disabled || loading,
-      onMouseEnter: () => setHovered(true),
-      onMouseLeave: () => setHovered(false),
       style: {
-        ...variants[variant],
-        ...sizes[size],
+        background: bg,
+        color,
+        padding: sizes[size],
         borderRadius: "10px",
+        border: "none",
         cursor: disabled ? "not-allowed" : "pointer",
-        display: "flex",
-        alignItems: "center",
-        gap: "8px",
-        fontWeight: 600,
-        fontFamily: "sans-serif",
-        // 🔥 Animation
-        transform: hovered ? "translateY(-2px) scale(1.02)" : "scale(1)",
-        boxShadow: hovered ? "0 10px 20px rgba(0,0,0,0.15)" : "0 2px 6px rgba(0,0,0,0.1)",
-        transition: "all 0.2s ease",
+        fontWeight: "700",
+        fontSize: "15px",
+        fontFamily: "system-ui,sans-serif",
+        boxShadow: "0 4px 14px rgba(124,58,237,0.4)",
         opacity: disabled ? 0.6 : 1,
-        position: "relative",
-        overflow: "hidden"
+        transition: "opacity 0.2s"
       }
     },
-    /* @__PURE__ */ React24.createElement(
-      "span",
-      {
-        style: {
-          position: "absolute",
-          inset: 0,
-          background: "rgba(255,255,255,0.2)",
-          opacity: hovered ? 1 : 0,
-          transition: "opacity 0.3s"
-        }
-      }
-    ),
-    loading ? /* @__PURE__ */ React24.createElement("span", null, "Loading...") : /* @__PURE__ */ React24.createElement(React24.Fragment, null, icon && /* @__PURE__ */ React24.createElement("span", null, icon), /* @__PURE__ */ React24.createElement("span", null, text))
+    loading ? "Loading..." : text
   );
 };
 
 // src/components/AnimatedButton/AnimatedButton.jsx
-import React25, { useState as useState22 } from "react";
+import React24, { useState as useState20 } from "react";
 var AnimatedButton = ({
   text = "Click Me!",
   bg = "#7c3aed",
@@ -3899,8 +3789,8 @@ var AnimatedButton = ({
   onClick
 }) => {
   const sizes = { sm: "8px 16px", md: "12px 24px", lg: "16px 32px" };
-  const [hovered, setHovered] = useState22(false);
-  return /* @__PURE__ */ React25.createElement(
+  const [hovered, setHovered] = useState20(false);
+  return /* @__PURE__ */ React24.createElement(
     "button",
     {
       onClick,
@@ -3929,6 +3819,150 @@ var AnimatedButton = ({
     text
   );
 };
+
+// src/components/ECommerceCard/ECommerceCard.jsx
+import React25, { useState as useState21 } from "react";
+var ECommerceCard = ({
+  title = "Wireless Headphones",
+  description = "Experience immersive sound with noise cancellation.",
+  price = 199.99,
+  currency = "$",
+  image = "https://images.unsplash.com/photo-1618366712010-f4ae9c647dc5?w=600&q=80",
+  rating = 4.5,
+  accent = "#6366f1",
+  bg = "#0f172a",
+  onAddToCart = () => {
+  },
+  onViewDetails = () => {
+  }
+}) => {
+  const [hovered, setHovered] = useState21(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__ */ React25.createElement(
+    "div",
+    {
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => setHovered(false),
+      style: {
+        background: bg,
+        borderRadius: "20px",
+        overflow: "hidden",
+        width: "280px",
+        border: "1px solid " + (hovered ? alpha(accent, 0.3) : "rgba(255,255,255,0.07)"),
+        fontFamily: "system-ui,sans-serif",
+        transition: "transform 0.25s, box-shadow 0.25s",
+        transform: hovered ? "translateY(-4px)" : "translateY(0px)",
+        boxShadow: hovered ? "0 16px 40px rgba(0,0,0,0.5)" : "0 4px 20px rgba(0,0,0,0.3)"
+      }
+    },
+    /* @__PURE__ */ React25.createElement("div", { style: { position: "relative", width: "100%", height: "180px", overflow: "hidden" } }, /* @__PURE__ */ React25.createElement("img", { src: image, alt: title, style: { width: "100%", height: "100%", objectFit: "cover", transform: hovered ? "scale(1.05)" : "scale(1)", transition: "transform 0.4s ease" } }), /* @__PURE__ */ React25.createElement("div", { style: { position: "absolute", inset: 0, background: "linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 60%)" } }), /* @__PURE__ */ React25.createElement("div", { style: { position: "absolute", top: "12px", left: "12px", padding: "4px 10px", borderRadius: "20px", background: alpha(accent, 0.85), fontSize: "10px", fontWeight: "700", color: "#fff", textTransform: "uppercase", letterSpacing: "0.5px" } }, rating.toFixed(1), " \u2605")),
+    /* @__PURE__ */ React25.createElement("div", { style: { padding: "18px" } }, /* @__PURE__ */ React25.createElement("h3", { style: { fontSize: "15px", fontWeight: "700", color: "#fff", margin: "0 0 8px", lineHeight: 1.4 } }, title), /* @__PURE__ */ React25.createElement("p", { style: { fontSize: "13px", color: "rgba(255,255,255,0.45)", lineHeight: 1.65, margin: "0 0 18px" } }, description), /* @__PURE__ */ React25.createElement("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between" } }, /* @__PURE__ */ React25.createElement("div", { style: { fontSize: "24px", fontWeight: "800", color: accent } }, currency, Math.round(price)), /* @__PURE__ */ React25.createElement("div", { style: { display: "flex", gap: "8px" } }, /* @__PURE__ */ React25.createElement(
+      "button",
+      {
+        onClick: onViewDetails,
+        style: { padding: "8px 16px", borderRadius: "10px", border: "1px solid " + alpha(accent, 0.3), background: "transparent", color: accent, fontSize: "13px", fontWeight: "700", cursor: "pointer", fontFamily: "inherit" }
+      },
+      "Details"
+    ), /* @__PURE__ */ React25.createElement(
+      "button",
+      {
+        onClick: onAddToCart,
+        style: { padding: "8px 16px", borderRadius: "10px", border: "none", background: "linear-gradient(135deg, " + accent + ", " + alpha(accent, 0.7) + ")", color: "#fff", fontSize: "13px", fontWeight: "700", cursor: "pointer", fontFamily: "inherit" }
+      },
+      "Add to Cart"
+    ))))
+  );
+};
+
+// src/components/IDCard/IDCard.jsx
+import React26 from "react";
+var IDCard = ({
+  name = "John Doe",
+  role = "Software Engineer",
+  company = "TechCorp",
+  photo = "https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=600&q=80",
+  accent = "#6366f1",
+  bg = "#0f172a",
+  onContactClick = () => {
+  }
+}) => {
+  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__ */ React26.createElement("div", { style: { background: bg, borderRadius: "20px", padding: "24px", width: "300px", color: "#fff", fontFamily: "system-ui,sans-serif", boxShadow: "0 10px 40px rgba(0,0,0,0.5)", border: "1px solid " + alpha(accent, 0.25), position: "relative" } }, /* @__PURE__ */ React26.createElement("div", { style: { display: "flex", alignItems: "center", gap: "16px", marginBottom: "20px" } }, /* @__PURE__ */ React26.createElement("div", { style: { width: "80px", height: "80px", borderRadius: "50%", overflow: "hidden", border: "2px solid " + alpha(accent, 0.5) } }, /* @__PURE__ */ React26.createElement("img", { src: photo, alt: name, style: { width: "100%", height: "100%", objectFit: "cover" } })), /* @__PURE__ */ React26.createElement("div", null, /* @__PURE__ */ React26.createElement("div", { style: { fontSize: "18px", fontWeight: "700", marginBottom: "4px" } }, name), /* @__PURE__ */ React26.createElement("div", { style: { fontSize: "13px", color: "rgba(255,255,255,0.5)" } }, role))), /* @__PURE__ */ React26.createElement("div", { style: { fontSize: "14px", color: "rgba(255,255,255,0.6)", marginBottom: "20px", paddingBottom: "20px", borderBottom: "1px solid " + alpha(accent, 0.1) } }, company), /* @__PURE__ */ React26.createElement("button", { onClick: onContactClick, style: { width: "100%", padding: "12px", borderRadius: "12px", border: "none", background: "linear-gradient(135deg, " + accent + ", " + alpha(accent, 0.7) + ")", color: "#fff", fontSize: "14px", fontWeight: "700", cursor: "pointer", fontFamily: "inherit" } }, "Contact"));
+};
+
+// src/components/DatePicker/DatePicker.jsx
+import React27, { useState as useState22 } from "react";
+var DatePicker = ({
+  selectedDate = /* @__PURE__ */ new Date(),
+  accent = "#6366f1",
+  bg = "#0f172a",
+  onDateChange = () => {
+  }
+}) => {
+  const [date, setDate] = useState22(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 + ")";
+  };
+  const handleDateChange = (e) => {
+    const newDate = new Date(e.target.value);
+    setDate(newDate);
+    onDateChange(newDate);
+  };
+  return /* @__PURE__ */ React27.createElement("div", { style: { background: bg, borderRadius: "12px", padding: "16px", width: "280px", fontFamily: "system-ui,sans-serif", boxShadow: "0 10px 40px rgba(0,0,0,0.5)", border: "1px solid rgba(255,255,255,0.07)" } }, /* @__PURE__ */ React27.createElement(
+    "input",
+    {
+      type: "date",
+      value: date.toISOString().split("T")[0],
+      onChange: handleDateChange,
+      style: {
+        width: "100%",
+        padding: "12px",
+        borderRadius: "8px",
+        border: "1px solid " + alpha(accent, 0.3),
+        background: "transparent",
+        color: "#fff",
+        fontFamily: "inherit",
+        fontSize: "14px",
+        outline: "none",
+        cursor: "pointer"
+      }
+    }
+  ));
+};
+
+// 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"))));
+};
 export {
   AnimatedButton,
   AnimatedForm,
@@ -3938,9 +3972,12 @@ export {
   Card,
   Charts,
   ColorPicker,
-  EcommerceCard,
+  DatePicker,
+  ECommerceCard,
+  FacebookPost,
   FileUpload,
   Footer,
+  IDCard,
   ImageCard,
   ImageSlider,
   InvoiceCard,

package/package.json

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