virtual-ui-lib 1.0.68 → 1.0.69

package/dist/index.js

@@ -35,6 +35,7 @@ __export(index_exports, {
   Footer: () => Footer,
   ImageCard: () => ImageCard,
   ImageSlider: () => ImageSlider,
+  InvoiceCard: () => InvoiceCard,
   Loader: () => Loader,
   Navbar: () => Navbar,
   NotificationToast: () => NotificationToast,
@@ -2272,6 +2273,227 @@ var OTPInput = ({
     resendTimer > 0 ? `${resendText} (${resendTimer}s)` : resendText
   )));
 };
+
+// src/components/InvoiceCard/InvoiceCard.jsx
+var import_react14 = __toESM(require("react"));
+var InvoiceCard = ({
+  invoiceNumber = "INV-2024-001",
+  date = "21 March 2024",
+  dueDate = "31 March 2024",
+  from = {
+    name: "VirtualAI Inc.",
+    email: "billing@virtualai.com",
+    address: "123 Tech Street, San Francisco, CA"
+  },
+  to = {
+    name: "Aryan Sharma",
+    email: "aryan@example.com",
+    address: "456 Dev Lane, Mumbai, India"
+  },
+  items = [
+    { name: "Pro Plan Subscription", qty: 1, price: 29 },
+    { name: "Extra AI Credits (500)", qty: 2, price: 9 },
+    { name: "Custom Domain Setup", qty: 1, price: 15 }
+  ],
+  taxRate = 18,
+  currency = "$",
+  accent = "#6366f1",
+  bg = "#0f172a",
+  radius = "20px",
+  status = "unpaid",
+  onPayClick = () => {
+  },
+  onDownloadClick = () => {
+  }
+}) => {
+  const [paid, setPaid] = (0, import_react14.useState)(status === "paid");
+  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})`;
+  };
+  const subtotal = items.reduce((s, i) => s + i.qty * i.price, 0);
+  const tax = parseFloat((subtotal * taxRate / 100).toFixed(2));
+  const total = parseFloat((subtotal + tax).toFixed(2));
+  const statusConfig = {
+    paid: { label: "Paid", bg: "rgba(16,185,129,0.15)", color: "#34d399", border: "rgba(16,185,129,0.3)" },
+    unpaid: { label: "Unpaid", bg: "rgba(239,68,68,0.12)", color: "#f87171", border: "rgba(239,68,68,0.3)" },
+    pending: { label: "Pending", bg: "rgba(245,158,11,0.12)", color: "#fbbf24", border: "rgba(245,158,11,0.3)" }
+  };
+  const sc = statusConfig[paid ? "paid" : status] || statusConfig.unpaid;
+  const Row = ({ label, value, bold, large, accentColor }) => /* @__PURE__ */ import_react14.default.createElement("div", { style: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    padding: "5px 0"
+  } }, /* @__PURE__ */ import_react14.default.createElement("span", { style: {
+    fontSize: large ? "14px" : "12px",
+    fontWeight: bold ? "700" : "400",
+    color: large ? "#fff" : "rgba(255,255,255,0.45)"
+  } }, label), /* @__PURE__ */ import_react14.default.createElement("span", { style: {
+    fontSize: large ? "16px" : "13px",
+    fontWeight: bold ? "800" : "600",
+    color: accentColor || (large ? "#fff" : "rgba(255,255,255,0.85)")
+  } }, currency, typeof value === "number" ? value.toFixed(2) : value));
+  return /* @__PURE__ */ import_react14.default.createElement("div", { style: {
+    background: bg,
+    borderRadius: radius,
+    padding: "24px",
+    width: "340px",
+    fontFamily: "system-ui, sans-serif",
+    border: "1px solid rgba(255,255,255,0.07)",
+    boxShadow: "0 10px 40px rgba(0,0,0,0.4)",
+    color: "#fff"
+  } }, /* @__PURE__ */ import_react14.default.createElement("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: "20px" } }, /* @__PURE__ */ import_react14.default.createElement("div", null, /* @__PURE__ */ import_react14.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: "7px", marginBottom: "4px" } }, /* @__PURE__ */ import_react14.default.createElement("div", { style: {
+    width: "24px",
+    height: "24px",
+    borderRadius: "6px",
+    background: `linear-gradient(135deg, ${accent}, ${alpha(accent, 0.6)})`,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    fontSize: "11px",
+    fontWeight: "800",
+    color: "#fff"
+  } }, "V"), /* @__PURE__ */ import_react14.default.createElement("span", { style: { fontSize: "14px", fontWeight: "800" } }, from.name)), /* @__PURE__ */ import_react14.default.createElement("p", { style: { fontSize: "11px", color: "rgba(255,255,255,0.3)", margin: 0 } }, invoiceNumber)), /* @__PURE__ */ import_react14.default.createElement("div", { style: {
+    padding: "4px 12px",
+    borderRadius: "20px",
+    fontSize: "11px",
+    fontWeight: "700",
+    background: sc.bg,
+    color: sc.color,
+    border: `1px solid ${sc.border}`,
+    textTransform: "uppercase",
+    letterSpacing: "0.5px"
+  } }, sc.label)), /* @__PURE__ */ import_react14.default.createElement("div", { style: {
+    display: "grid",
+    gridTemplateColumns: "1fr 1fr",
+    gap: "12px",
+    background: "rgba(255,255,255,0.03)",
+    border: "1px solid rgba(255,255,255,0.06)",
+    borderRadius: "12px",
+    padding: "14px",
+    marginBottom: "20px"
+  } }, [{ label: "From", info: from }, { label: "To", info: to }].map(({ label, info }) => /* @__PURE__ */ import_react14.default.createElement("div", { key: label }, /* @__PURE__ */ import_react14.default.createElement("p", { style: { fontSize: "10px", fontWeight: "700", color: "rgba(255,255,255,0.25)", textTransform: "uppercase", letterSpacing: "0.8px", marginBottom: "5px" } }, label), /* @__PURE__ */ import_react14.default.createElement("p", { style: { fontSize: "12px", fontWeight: "700", color: "#fff", margin: "0 0 2px" } }, info.name), /* @__PURE__ */ import_react14.default.createElement("p", { style: { fontSize: "11px", color: "rgba(255,255,255,0.35)", margin: "0 0 2px" } }, info.email), /* @__PURE__ */ import_react14.default.createElement("p", { style: { fontSize: "10px", color: "rgba(255,255,255,0.25)", margin: 0, lineHeight: 1.4 } }, info.address)))), /* @__PURE__ */ import_react14.default.createElement("div", { style: { display: "flex", gap: "10px", marginBottom: "20px" } }, [{ label: "Issue Date", val: date }, { label: "Due Date", val: dueDate }].map(({ label, val }) => /* @__PURE__ */ import_react14.default.createElement("div", { key: label, style: {
+    flex: 1,
+    background: "rgba(255,255,255,0.03)",
+    border: "1px solid rgba(255,255,255,0.06)",
+    borderRadius: "10px",
+    padding: "10px 12px"
+  } }, /* @__PURE__ */ import_react14.default.createElement("p", { style: { fontSize: "10px", color: "rgba(255,255,255,0.25)", textTransform: "uppercase", letterSpacing: "0.8px", margin: "0 0 3px", fontWeight: "700" } }, label), /* @__PURE__ */ import_react14.default.createElement("p", { style: { fontSize: "12px", fontWeight: "700", color: "#fff", margin: 0 } }, val)))), /* @__PURE__ */ import_react14.default.createElement("div", { style: { marginBottom: "16px" } }, /* @__PURE__ */ import_react14.default.createElement("div", { style: {
+    display: "grid",
+    gridTemplateColumns: "1fr auto auto",
+    gap: "8px",
+    padding: "6px 8px",
+    borderBottom: "1px solid rgba(255,255,255,0.06)",
+    marginBottom: "4px"
+  } }, ["Item", "Qty", "Amount"].map((h) => /* @__PURE__ */ import_react14.default.createElement("span", { key: h, style: { fontSize: "10px", fontWeight: "700", color: "rgba(255,255,255,0.25)", textTransform: "uppercase", letterSpacing: "0.8px", textAlign: h !== "Item" ? "right" : "left" } }, h))), items.map((item, i) => /* @__PURE__ */ import_react14.default.createElement("div", { key: i, style: {
+    display: "grid",
+    gridTemplateColumns: "1fr auto auto",
+    gap: "8px",
+    padding: "8px",
+    borderRadius: "8px",
+    background: i % 2 === 0 ? "rgba(255,255,255,0.02)" : "transparent"
+  } }, /* @__PURE__ */ import_react14.default.createElement("span", { style: { fontSize: "12px", color: "rgba(255,255,255,0.75)" } }, item.name), /* @__PURE__ */ import_react14.default.createElement("span", { style: { fontSize: "12px", color: "rgba(255,255,255,0.35)", textAlign: "right" } }, "\xD7", item.qty), /* @__PURE__ */ import_react14.default.createElement("span", { style: { fontSize: "12px", fontWeight: "600", color: "#fff", textAlign: "right" } }, currency, (item.qty * item.price).toFixed(2))))), /* @__PURE__ */ import_react14.default.createElement("div", { style: {
+    background: "rgba(255,255,255,0.03)",
+    border: "1px solid rgba(255,255,255,0.06)",
+    borderRadius: "12px",
+    padding: "12px 14px",
+    marginBottom: "20px"
+  } }, /* @__PURE__ */ import_react14.default.createElement(Row, { label: "Subtotal", value: subtotal }), /* @__PURE__ */ import_react14.default.createElement(Row, { label: `Tax (${taxRate}%)`, value: tax }), /* @__PURE__ */ import_react14.default.createElement("div", { style: { height: "1px", background: "rgba(255,255,255,0.07)", margin: "8px 0" } }), /* @__PURE__ */ import_react14.default.createElement(Row, { label: "Total", value: total, bold: true, large: true, accentColor: accent })), /* @__PURE__ */ import_react14.default.createElement("div", { style: { display: "flex", gap: "8px" } }, !paid && /* @__PURE__ */ import_react14.default.createElement(
+    "button",
+    {
+      onClick: () => {
+        setPaid(true);
+        onPayClick();
+      },
+      style: {
+        flex: 1,
+        padding: "11px",
+        borderRadius: "12px",
+        border: "none",
+        background: `linear-gradient(135deg, ${accent}, ${alpha(accent, 0.7)})`,
+        color: "#fff",
+        fontSize: "13px",
+        fontWeight: "700",
+        cursor: "pointer",
+        fontFamily: "inherit",
+        transition: "opacity 0.2s"
+      },
+      onMouseEnter: (e) => e.currentTarget.style.opacity = "0.85",
+      onMouseLeave: (e) => e.currentTarget.style.opacity = "1"
+    },
+    "Pay ",
+    currency,
+    total.toFixed(2)
+  ), paid && /* @__PURE__ */ import_react14.default.createElement("div", { style: {
+    flex: 1,
+    padding: "11px",
+    borderRadius: "12px",
+    background: "rgba(16,185,129,0.1)",
+    border: "1px solid rgba(16,185,129,0.25)",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: "6px",
+    fontSize: "13px",
+    fontWeight: "700",
+    color: "#34d399"
+  } }, /* @__PURE__ */ import_react14.default.createElement(
+    "svg",
+    {
+      width: "14",
+      height: "14",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2.5",
+      strokeLinecap: "round"
+    },
+    /* @__PURE__ */ import_react14.default.createElement("polyline", { points: "20 6 9 17 4 12" })
+  ), "Payment Done"), /* @__PURE__ */ import_react14.default.createElement(
+    "button",
+    {
+      onClick: onDownloadClick,
+      style: {
+        width: "42px",
+        padding: "11px",
+        borderRadius: "12px",
+        background: "rgba(255,255,255,0.05)",
+        border: "1px solid rgba(255,255,255,0.1)",
+        color: "rgba(255,255,255,0.5)",
+        cursor: "pointer",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        transition: "all 0.2s"
+      },
+      onMouseEnter: (e) => {
+        e.currentTarget.style.color = "#fff";
+        e.currentTarget.style.borderColor = "rgba(255,255,255,0.25)";
+      },
+      onMouseLeave: (e) => {
+        e.currentTarget.style.color = "rgba(255,255,255,0.5)";
+        e.currentTarget.style.borderColor = "rgba(255,255,255,0.1)";
+      }
+    },
+    /* @__PURE__ */ import_react14.default.createElement(
+      "svg",
+      {
+        width: "15",
+        height: "15",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      },
+      /* @__PURE__ */ import_react14.default.createElement("path", { d: "M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3" })
+    )
+  )));
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AvatarCard,
@@ -2280,6 +2502,7 @@ var OTPInput = ({
   Footer,
   ImageCard,
   ImageSlider,
+  InvoiceCard,
   Loader,
   Navbar,
   NotificationToast,

package/dist/index.mjs

@@ -2225,6 +2225,227 @@ var OTPInput = ({
     resendTimer > 0 ? `${resendText} (${resendTimer}s)` : resendText
   )));
 };
+
+// src/components/InvoiceCard/InvoiceCard.jsx
+import React14, { useState as useState12 } from "react";
+var InvoiceCard = ({
+  invoiceNumber = "INV-2024-001",
+  date = "21 March 2024",
+  dueDate = "31 March 2024",
+  from = {
+    name: "VirtualAI Inc.",
+    email: "billing@virtualai.com",
+    address: "123 Tech Street, San Francisco, CA"
+  },
+  to = {
+    name: "Aryan Sharma",
+    email: "aryan@example.com",
+    address: "456 Dev Lane, Mumbai, India"
+  },
+  items = [
+    { name: "Pro Plan Subscription", qty: 1, price: 29 },
+    { name: "Extra AI Credits (500)", qty: 2, price: 9 },
+    { name: "Custom Domain Setup", qty: 1, price: 15 }
+  ],
+  taxRate = 18,
+  currency = "$",
+  accent = "#6366f1",
+  bg = "#0f172a",
+  radius = "20px",
+  status = "unpaid",
+  onPayClick = () => {
+  },
+  onDownloadClick = () => {
+  }
+}) => {
+  const [paid, setPaid] = useState12(status === "paid");
+  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})`;
+  };
+  const subtotal = items.reduce((s, i) => s + i.qty * i.price, 0);
+  const tax = parseFloat((subtotal * taxRate / 100).toFixed(2));
+  const total = parseFloat((subtotal + tax).toFixed(2));
+  const statusConfig = {
+    paid: { label: "Paid", bg: "rgba(16,185,129,0.15)", color: "#34d399", border: "rgba(16,185,129,0.3)" },
+    unpaid: { label: "Unpaid", bg: "rgba(239,68,68,0.12)", color: "#f87171", border: "rgba(239,68,68,0.3)" },
+    pending: { label: "Pending", bg: "rgba(245,158,11,0.12)", color: "#fbbf24", border: "rgba(245,158,11,0.3)" }
+  };
+  const sc = statusConfig[paid ? "paid" : status] || statusConfig.unpaid;
+  const Row = ({ label, value, bold, large, accentColor }) => /* @__PURE__ */ React14.createElement("div", { style: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    padding: "5px 0"
+  } }, /* @__PURE__ */ React14.createElement("span", { style: {
+    fontSize: large ? "14px" : "12px",
+    fontWeight: bold ? "700" : "400",
+    color: large ? "#fff" : "rgba(255,255,255,0.45)"
+  } }, label), /* @__PURE__ */ React14.createElement("span", { style: {
+    fontSize: large ? "16px" : "13px",
+    fontWeight: bold ? "800" : "600",
+    color: accentColor || (large ? "#fff" : "rgba(255,255,255,0.85)")
+  } }, currency, typeof value === "number" ? value.toFixed(2) : value));
+  return /* @__PURE__ */ React14.createElement("div", { style: {
+    background: bg,
+    borderRadius: radius,
+    padding: "24px",
+    width: "340px",
+    fontFamily: "system-ui, sans-serif",
+    border: "1px solid rgba(255,255,255,0.07)",
+    boxShadow: "0 10px 40px rgba(0,0,0,0.4)",
+    color: "#fff"
+  } }, /* @__PURE__ */ React14.createElement("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: "20px" } }, /* @__PURE__ */ React14.createElement("div", null, /* @__PURE__ */ React14.createElement("div", { style: { display: "flex", alignItems: "center", gap: "7px", marginBottom: "4px" } }, /* @__PURE__ */ React14.createElement("div", { style: {
+    width: "24px",
+    height: "24px",
+    borderRadius: "6px",
+    background: `linear-gradient(135deg, ${accent}, ${alpha(accent, 0.6)})`,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    fontSize: "11px",
+    fontWeight: "800",
+    color: "#fff"
+  } }, "V"), /* @__PURE__ */ React14.createElement("span", { style: { fontSize: "14px", fontWeight: "800" } }, from.name)), /* @__PURE__ */ React14.createElement("p", { style: { fontSize: "11px", color: "rgba(255,255,255,0.3)", margin: 0 } }, invoiceNumber)), /* @__PURE__ */ React14.createElement("div", { style: {
+    padding: "4px 12px",
+    borderRadius: "20px",
+    fontSize: "11px",
+    fontWeight: "700",
+    background: sc.bg,
+    color: sc.color,
+    border: `1px solid ${sc.border}`,
+    textTransform: "uppercase",
+    letterSpacing: "0.5px"
+  } }, sc.label)), /* @__PURE__ */ React14.createElement("div", { style: {
+    display: "grid",
+    gridTemplateColumns: "1fr 1fr",
+    gap: "12px",
+    background: "rgba(255,255,255,0.03)",
+    border: "1px solid rgba(255,255,255,0.06)",
+    borderRadius: "12px",
+    padding: "14px",
+    marginBottom: "20px"
+  } }, [{ label: "From", info: from }, { label: "To", info: to }].map(({ label, info }) => /* @__PURE__ */ React14.createElement("div", { key: label }, /* @__PURE__ */ React14.createElement("p", { style: { fontSize: "10px", fontWeight: "700", color: "rgba(255,255,255,0.25)", textTransform: "uppercase", letterSpacing: "0.8px", marginBottom: "5px" } }, label), /* @__PURE__ */ React14.createElement("p", { style: { fontSize: "12px", fontWeight: "700", color: "#fff", margin: "0 0 2px" } }, info.name), /* @__PURE__ */ React14.createElement("p", { style: { fontSize: "11px", color: "rgba(255,255,255,0.35)", margin: "0 0 2px" } }, info.email), /* @__PURE__ */ React14.createElement("p", { style: { fontSize: "10px", color: "rgba(255,255,255,0.25)", margin: 0, lineHeight: 1.4 } }, info.address)))), /* @__PURE__ */ React14.createElement("div", { style: { display: "flex", gap: "10px", marginBottom: "20px" } }, [{ label: "Issue Date", val: date }, { label: "Due Date", val: dueDate }].map(({ label, val }) => /* @__PURE__ */ React14.createElement("div", { key: label, style: {
+    flex: 1,
+    background: "rgba(255,255,255,0.03)",
+    border: "1px solid rgba(255,255,255,0.06)",
+    borderRadius: "10px",
+    padding: "10px 12px"
+  } }, /* @__PURE__ */ React14.createElement("p", { style: { fontSize: "10px", color: "rgba(255,255,255,0.25)", textTransform: "uppercase", letterSpacing: "0.8px", margin: "0 0 3px", fontWeight: "700" } }, label), /* @__PURE__ */ React14.createElement("p", { style: { fontSize: "12px", fontWeight: "700", color: "#fff", margin: 0 } }, val)))), /* @__PURE__ */ React14.createElement("div", { style: { marginBottom: "16px" } }, /* @__PURE__ */ React14.createElement("div", { style: {
+    display: "grid",
+    gridTemplateColumns: "1fr auto auto",
+    gap: "8px",
+    padding: "6px 8px",
+    borderBottom: "1px solid rgba(255,255,255,0.06)",
+    marginBottom: "4px"
+  } }, ["Item", "Qty", "Amount"].map((h) => /* @__PURE__ */ React14.createElement("span", { key: h, style: { fontSize: "10px", fontWeight: "700", color: "rgba(255,255,255,0.25)", textTransform: "uppercase", letterSpacing: "0.8px", textAlign: h !== "Item" ? "right" : "left" } }, h))), items.map((item, i) => /* @__PURE__ */ React14.createElement("div", { key: i, style: {
+    display: "grid",
+    gridTemplateColumns: "1fr auto auto",
+    gap: "8px",
+    padding: "8px",
+    borderRadius: "8px",
+    background: i % 2 === 0 ? "rgba(255,255,255,0.02)" : "transparent"
+  } }, /* @__PURE__ */ React14.createElement("span", { style: { fontSize: "12px", color: "rgba(255,255,255,0.75)" } }, item.name), /* @__PURE__ */ React14.createElement("span", { style: { fontSize: "12px", color: "rgba(255,255,255,0.35)", textAlign: "right" } }, "\xD7", item.qty), /* @__PURE__ */ React14.createElement("span", { style: { fontSize: "12px", fontWeight: "600", color: "#fff", textAlign: "right" } }, currency, (item.qty * item.price).toFixed(2))))), /* @__PURE__ */ React14.createElement("div", { style: {
+    background: "rgba(255,255,255,0.03)",
+    border: "1px solid rgba(255,255,255,0.06)",
+    borderRadius: "12px",
+    padding: "12px 14px",
+    marginBottom: "20px"
+  } }, /* @__PURE__ */ React14.createElement(Row, { label: "Subtotal", value: subtotal }), /* @__PURE__ */ React14.createElement(Row, { label: `Tax (${taxRate}%)`, value: tax }), /* @__PURE__ */ React14.createElement("div", { style: { height: "1px", background: "rgba(255,255,255,0.07)", margin: "8px 0" } }), /* @__PURE__ */ React14.createElement(Row, { label: "Total", value: total, bold: true, large: true, accentColor: accent })), /* @__PURE__ */ React14.createElement("div", { style: { display: "flex", gap: "8px" } }, !paid && /* @__PURE__ */ React14.createElement(
+    "button",
+    {
+      onClick: () => {
+        setPaid(true);
+        onPayClick();
+      },
+      style: {
+        flex: 1,
+        padding: "11px",
+        borderRadius: "12px",
+        border: "none",
+        background: `linear-gradient(135deg, ${accent}, ${alpha(accent, 0.7)})`,
+        color: "#fff",
+        fontSize: "13px",
+        fontWeight: "700",
+        cursor: "pointer",
+        fontFamily: "inherit",
+        transition: "opacity 0.2s"
+      },
+      onMouseEnter: (e) => e.currentTarget.style.opacity = "0.85",
+      onMouseLeave: (e) => e.currentTarget.style.opacity = "1"
+    },
+    "Pay ",
+    currency,
+    total.toFixed(2)
+  ), paid && /* @__PURE__ */ React14.createElement("div", { style: {
+    flex: 1,
+    padding: "11px",
+    borderRadius: "12px",
+    background: "rgba(16,185,129,0.1)",
+    border: "1px solid rgba(16,185,129,0.25)",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: "6px",
+    fontSize: "13px",
+    fontWeight: "700",
+    color: "#34d399"
+  } }, /* @__PURE__ */ React14.createElement(
+    "svg",
+    {
+      width: "14",
+      height: "14",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2.5",
+      strokeLinecap: "round"
+    },
+    /* @__PURE__ */ React14.createElement("polyline", { points: "20 6 9 17 4 12" })
+  ), "Payment Done"), /* @__PURE__ */ React14.createElement(
+    "button",
+    {
+      onClick: onDownloadClick,
+      style: {
+        width: "42px",
+        padding: "11px",
+        borderRadius: "12px",
+        background: "rgba(255,255,255,0.05)",
+        border: "1px solid rgba(255,255,255,0.1)",
+        color: "rgba(255,255,255,0.5)",
+        cursor: "pointer",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        transition: "all 0.2s"
+      },
+      onMouseEnter: (e) => {
+        e.currentTarget.style.color = "#fff";
+        e.currentTarget.style.borderColor = "rgba(255,255,255,0.25)";
+      },
+      onMouseLeave: (e) => {
+        e.currentTarget.style.color = "rgba(255,255,255,0.5)";
+        e.currentTarget.style.borderColor = "rgba(255,255,255,0.1)";
+      }
+    },
+    /* @__PURE__ */ React14.createElement(
+      "svg",
+      {
+        width: "15",
+        height: "15",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      },
+      /* @__PURE__ */ React14.createElement("path", { d: "M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3" })
+    )
+  )));
+};
 export {
   AvatarCard,
   BackgoundImageSlider,
@@ -2232,6 +2453,7 @@ export {
   Footer,
   ImageCard,
   ImageSlider,
+  InvoiceCard,
   Loader,
   Navbar,
   NotificationToast,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "virtual-ui-lib",
-  "version": "1.0.68",
+  "version": "1.0.69",
   "description": "Virtual UI React Component Library",
   "author": "Ankush",
   "license": "ISC",