virtual-ui-lib 1.0.62 → 1.0.64

package/dist/index.js

@@ -31,11 +31,13 @@ var index_exports = {};
 __export(index_exports, {
   Avatar: () => Avatar,
   AvatarCard: () => AvatarCard,
+  Charts: () => Charts,
   CodeBlock: () => CodeBlock,
   CustomInputField: () => CustomInputField,
   DividerLine: () => DividerLine,
   FileUpload: () => FileUpload,
   Footer: () => Footer,
+  ImageCard: () => ImageCard,
   Loader: () => Loader,
   LoadingSpinner: () => LoadingSpinner,
   Navbar: () => Navbar,
@@ -1599,15 +1601,466 @@ var Sidebar = ({
     background: accent
   } }), /* @__PURE__ */ import_react22.default.createElement("span", { style: { fontSize: "14px", fontWeight: "700", color: "#fff" } }, activeItem == null ? void 0 : activeItem.label)), /* @__PURE__ */ import_react22.default.createElement("div", { style: { color: "#fff" } }, activeItem == null ? void 0 : activeItem.component)));
 };
+
+// src/components/Charts/Charts.jsx
+var import_react23 = __toESM(require("react"));
+var Charts = ({
+  type = "bar",
+  data = [
+    { label: "Jan", value: 40 },
+    { label: "Feb", value: 70 },
+    { label: "Mar", value: 55 },
+    { label: "Apr", value: 90 },
+    { label: "May", value: 65 },
+    { label: "Jun", value: 80 },
+    { label: "Jul", value: 100 },
+    { label: "Aug", value: 30 }
+  ],
+  title = "Monthly Stats",
+  accent = "#6366f1",
+  bg = "#0f172a",
+  radius = "16px",
+  showGrid = true,
+  showValues = true
+}) => {
+  const [hovered, setHovered] = (0, import_react23.useState)(null);
+  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 max = Math.max(...data.map((d) => d.value));
+  const min = Math.min(...data.map((d) => d.value));
+  const W = 320;
+  const H = 160;
+  const padL = 28;
+  const padR = 12;
+  const padT = 16;
+  const padB = 28;
+  const chartW = W - padL - padR;
+  const chartH = H - padT - padB;
+  const getX = (i) => padL + i / (data.length - 1) * chartW;
+  const getY = (v) => padT + chartH - (v - min) / (max - min || 1) * chartH;
+  const points = data.map((d, i) => `${getX(i)},${getY(d.value)}`).join(" ");
+  const areaPoints = `${padL},${padT + chartH} ` + points + ` ${getX(data.length - 1)},${padT + chartH}`;
+  const gridLines = [0, 0.25, 0.5, 0.75, 1].map((t) => ({
+    y: padT + chartH * (1 - t),
+    val: Math.round(min + t * (max - min))
+  }));
+  const BarChart = () => {
+    const barW = Math.min(28, chartW / data.length * 0.55);
+    return /* @__PURE__ */ import_react23.default.createElement("svg", { width: "100%", viewBox: `0 0 ${W} ${H}` }, showGrid && gridLines.map((g, i) => /* @__PURE__ */ import_react23.default.createElement("g", { key: i }, /* @__PURE__ */ import_react23.default.createElement(
+      "line",
+      {
+        x1: padL,
+        y1: g.y,
+        x2: W - padR,
+        y2: g.y,
+        stroke: "rgba(255,255,255,0.05)",
+        strokeWidth: "1"
+      }
+    ), /* @__PURE__ */ import_react23.default.createElement(
+      "text",
+      {
+        x: padL - 4,
+        y: g.y + 4,
+        textAnchor: "end",
+        fill: "rgba(255,255,255,0.25)",
+        fontSize: "9"
+      },
+      g.val
+    ))), data.map((d, i) => {
+      const x = padL + i / data.length * chartW + (chartW / data.length - barW) / 2;
+      const barH = (d.value - min) / (max - min || 1) * chartH;
+      const y = padT + chartH - barH;
+      const isH = hovered === i;
+      return /* @__PURE__ */ import_react23.default.createElement("g", { key: i, onMouseEnter: () => setHovered(i), onMouseLeave: () => setHovered(null) }, /* @__PURE__ */ import_react23.default.createElement(
+        "rect",
+        {
+          x,
+          y: padT,
+          width: barW,
+          height: chartH,
+          fill: "transparent",
+          rx: "4"
+        }
+      ), /* @__PURE__ */ import_react23.default.createElement(
+        "rect",
+        {
+          x,
+          y,
+          width: barW,
+          height: barH,
+          fill: isH ? accent : alpha(accent, 0.55),
+          rx: "4",
+          style: { transition: "fill 0.15s" }
+        }
+      ), showValues && isH && /* @__PURE__ */ import_react23.default.createElement(
+        "text",
+        {
+          x: x + barW / 2,
+          y: y - 5,
+          textAnchor: "middle",
+          fill: "#fff",
+          fontSize: "9",
+          fontWeight: "700"
+        },
+        d.value
+      ), /* @__PURE__ */ import_react23.default.createElement(
+        "text",
+        {
+          x: x + barW / 2,
+          y: H - 6,
+          textAnchor: "middle",
+          fill: "rgba(255,255,255,0.3)",
+          fontSize: "9"
+        },
+        d.label
+      ));
+    }));
+  };
+  const LineChart = () => /* @__PURE__ */ import_react23.default.createElement("svg", { width: "100%", viewBox: `0 0 ${W} ${H}` }, /* @__PURE__ */ import_react23.default.createElement("defs", null, /* @__PURE__ */ import_react23.default.createElement("linearGradient", { id: "lg", x1: "0", y1: "0", x2: "0", y2: "1" }, /* @__PURE__ */ import_react23.default.createElement("stop", { offset: "0%", stopColor: accent, stopOpacity: "0.3" }), /* @__PURE__ */ import_react23.default.createElement("stop", { offset: "100%", stopColor: accent, stopOpacity: "0" }))), showGrid && gridLines.map((g, i) => /* @__PURE__ */ import_react23.default.createElement("g", { key: i }, /* @__PURE__ */ import_react23.default.createElement(
+    "line",
+    {
+      x1: padL,
+      y1: g.y,
+      x2: W - padR,
+      y2: g.y,
+      stroke: "rgba(255,255,255,0.05)",
+      strokeWidth: "1"
+    }
+  ), /* @__PURE__ */ import_react23.default.createElement(
+    "text",
+    {
+      x: padL - 4,
+      y: g.y + 4,
+      textAnchor: "end",
+      fill: "rgba(255,255,255,0.25)",
+      fontSize: "9"
+    },
+    g.val
+  ))), /* @__PURE__ */ import_react23.default.createElement("polygon", { points: areaPoints, fill: "url(#lg)" }), /* @__PURE__ */ import_react23.default.createElement(
+    "polyline",
+    {
+      points,
+      fill: "none",
+      stroke: accent,
+      strokeWidth: "2",
+      strokeLinejoin: "round",
+      strokeLinecap: "round"
+    }
+  ), data.map((d, i) => {
+    const isH = hovered === i;
+    return /* @__PURE__ */ import_react23.default.createElement("g", { key: i, onMouseEnter: () => setHovered(i), onMouseLeave: () => setHovered(null) }, /* @__PURE__ */ import_react23.default.createElement("circle", { cx: getX(i), cy: getY(d.value), r: "10", fill: "transparent" }), /* @__PURE__ */ import_react23.default.createElement(
+      "circle",
+      {
+        cx: getX(i),
+        cy: getY(d.value),
+        r: isH ? 5 : 3,
+        fill: isH ? "#fff" : accent,
+        stroke: accent,
+        strokeWidth: "2",
+        style: { transition: "all 0.15s" }
+      }
+    ), showValues && isH && /* @__PURE__ */ import_react23.default.createElement(
+      "text",
+      {
+        x: getX(i),
+        y: getY(d.value) - 10,
+        textAnchor: "middle",
+        fill: "#fff",
+        fontSize: "9",
+        fontWeight: "700"
+      },
+      d.value
+    ), /* @__PURE__ */ import_react23.default.createElement(
+      "text",
+      {
+        x: getX(i),
+        y: H - 6,
+        textAnchor: "middle",
+        fill: "rgba(255,255,255,0.3)",
+        fontSize: "9"
+      },
+      d.label
+    ));
+  }));
+  const PieChart = () => {
+    var _a, _b;
+    const cx = W / 2, cy = H / 2 - 4, r = Math.min(H, W) / 2 - 24;
+    const total = data.reduce((s, d) => s + d.value, 0);
+    const colors = [
+      accent,
+      alpha(accent, 0.75),
+      alpha(accent, 0.55),
+      alpha(accent, 0.4),
+      alpha(accent, 0.3),
+      alpha(accent, 0.2),
+      alpha(accent, 0.12)
+    ];
+    let startAngle = -Math.PI / 2;
+    const slices = data.map((d, i) => {
+      const angle = d.value / total * 2 * Math.PI;
+      const x1 = cx + r * Math.cos(startAngle);
+      const y1 = cy + r * Math.sin(startAngle);
+      const x2 = cx + r * Math.cos(startAngle + angle);
+      const y2 = cy + r * Math.sin(startAngle + angle);
+      const lx = cx + (r + 14) * Math.cos(startAngle + angle / 2);
+      const ly = cy + (r + 14) * Math.sin(startAngle + angle / 2);
+      const large = angle > Math.PI ? 1 : 0;
+      const path = `M ${cx} ${cy} L ${x1} ${y1} A ${r} ${r} 0 ${large} 1 ${x2} ${y2} Z`;
+      const slice = { path, color: colors[i % colors.length], d, angle, lx, ly, i };
+      startAngle += angle;
+      return slice;
+    });
+    return /* @__PURE__ */ import_react23.default.createElement("svg", { width: "100%", viewBox: `0 0 ${W} ${H}` }, slices.map((s) => /* @__PURE__ */ import_react23.default.createElement("g", { key: s.i, onMouseEnter: () => setHovered(s.i), onMouseLeave: () => setHovered(null) }, /* @__PURE__ */ import_react23.default.createElement(
+      "path",
+      {
+        d: s.path,
+        fill: s.color,
+        stroke: bg,
+        strokeWidth: "2",
+        transform: hovered === s.i ? `translate(${Math.cos(s.angle / 2 - Math.PI / 2) * 4}, ${Math.sin(s.angle / 2 - Math.PI / 2) * 4})` : "",
+        style: { transition: "transform 0.15s", cursor: "pointer" }
+      }
+    ))), hovered !== null && /* @__PURE__ */ import_react23.default.createElement(import_react23.default.Fragment, null, /* @__PURE__ */ import_react23.default.createElement(
+      "text",
+      {
+        x: cx,
+        y: cy - 8,
+        textAnchor: "middle",
+        fill: "#fff",
+        fontSize: "16",
+        fontWeight: "800"
+      },
+      (_a = data[hovered]) == null ? void 0 : _a.value
+    ), /* @__PURE__ */ import_react23.default.createElement(
+      "text",
+      {
+        x: cx,
+        y: cy + 10,
+        textAnchor: "middle",
+        fill: "rgba(255,255,255,0.4)",
+        fontSize: "9"
+      },
+      (_b = data[hovered]) == null ? void 0 : _b.label
+    )), hovered === null && /* @__PURE__ */ import_react23.default.createElement(
+      "text",
+      {
+        x: cx,
+        y: cy + 5,
+        textAnchor: "middle",
+        fill: "rgba(255,255,255,0.2)",
+        fontSize: "9"
+      },
+      "Hover slice"
+    ));
+  };
+  const AreaChart = () => /* @__PURE__ */ import_react23.default.createElement("svg", { width: "100%", viewBox: `0 0 ${W} ${H}` }, /* @__PURE__ */ import_react23.default.createElement("defs", null, /* @__PURE__ */ import_react23.default.createElement("linearGradient", { id: "ag", x1: "0", y1: "0", x2: "0", y2: "1" }, /* @__PURE__ */ import_react23.default.createElement("stop", { offset: "0%", stopColor: accent, stopOpacity: "0.5" }), /* @__PURE__ */ import_react23.default.createElement("stop", { offset: "100%", stopColor: accent, stopOpacity: "0.02" }))), showGrid && gridLines.map((g, i) => /* @__PURE__ */ import_react23.default.createElement("g", { key: i }, /* @__PURE__ */ import_react23.default.createElement(
+    "line",
+    {
+      x1: padL,
+      y1: g.y,
+      x2: W - padR,
+      y2: g.y,
+      stroke: "rgba(255,255,255,0.05)",
+      strokeWidth: "1"
+    }
+  ), /* @__PURE__ */ import_react23.default.createElement(
+    "text",
+    {
+      x: padL - 4,
+      y: g.y + 4,
+      textAnchor: "end",
+      fill: "rgba(255,255,255,0.25)",
+      fontSize: "9"
+    },
+    g.val
+  ))), /* @__PURE__ */ import_react23.default.createElement("polygon", { points: areaPoints, fill: "url(#ag)" }), /* @__PURE__ */ import_react23.default.createElement(
+    "polyline",
+    {
+      points,
+      fill: "none",
+      stroke: accent,
+      strokeWidth: "1.5",
+      strokeLinejoin: "round",
+      strokeLinecap: "round"
+    }
+  ), data.map((d, i) => /* @__PURE__ */ import_react23.default.createElement("g", { key: i, onMouseEnter: () => setHovered(i), onMouseLeave: () => setHovered(null) }, /* @__PURE__ */ import_react23.default.createElement("rect", { x: getX(i) - 12, y: padT, width: 24, height: chartH, fill: "transparent" }), hovered === i && /* @__PURE__ */ import_react23.default.createElement(import_react23.default.Fragment, null, /* @__PURE__ */ import_react23.default.createElement(
+    "line",
+    {
+      x1: getX(i),
+      y1: padT,
+      x2: getX(i),
+      y2: padT + chartH,
+      stroke: "rgba(255,255,255,0.1)",
+      strokeWidth: "1",
+      strokeDasharray: "3 3"
+    }
+  ), showValues && /* @__PURE__ */ import_react23.default.createElement(
+    "text",
+    {
+      x: getX(i),
+      y: getY(d.value) - 10,
+      textAnchor: "middle",
+      fill: "#fff",
+      fontSize: "9",
+      fontWeight: "700"
+    },
+    d.value
+  )), /* @__PURE__ */ import_react23.default.createElement(
+    "text",
+    {
+      x: getX(i),
+      y: H - 6,
+      textAnchor: "middle",
+      fill: "rgba(255,255,255,0.3)",
+      fontSize: "9"
+    },
+    d.label
+  ))));
+  const renderChart = () => {
+    if (type === "line") return /* @__PURE__ */ import_react23.default.createElement(LineChart, null);
+    if (type === "pie") return /* @__PURE__ */ import_react23.default.createElement(PieChart, null);
+    if (type === "area") return /* @__PURE__ */ import_react23.default.createElement(AreaChart, null);
+    return /* @__PURE__ */ import_react23.default.createElement(BarChart, null);
+  };
+  return /* @__PURE__ */ import_react23.default.createElement("div", { style: {
+    background: bg,
+    borderRadius: radius,
+    padding: "20px",
+    fontFamily: "system-ui, sans-serif",
+    border: "1px solid rgba(255,255,255,0.07)",
+    width: "100%",
+    maxWidth: "360px",
+    boxSizing: "border-box"
+  } }, /* @__PURE__ */ import_react23.default.createElement("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "16px" } }, /* @__PURE__ */ import_react23.default.createElement("p", { style: { fontSize: "14px", fontWeight: "700", color: "#fff", margin: 0 } }, title), /* @__PURE__ */ import_react23.default.createElement("span", { style: {
+    fontSize: "10px",
+    fontWeight: "700",
+    padding: "3px 9px",
+    borderRadius: "6px",
+    background: alpha(accent, 0.12),
+    color: accent,
+    border: `1px solid ${alpha(accent, 0.25)}`,
+    textTransform: "capitalize"
+  } }, type)), renderChart());
+};
+
+// src/components/ImageCard/ImageCard.jsx
+var import_react24 = __toESM(require("react"));
+var ImageCard = ({
+  image = "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=600&q=80",
+  tag = "Travel",
+  title = "Discover the Hidden Peaks of the Himalayas",
+  description = "A breathtaking journey through untouched landscapes, ancient monasteries, and snow-capped summits that few have ever seen.",
+  buttonText = "Read More",
+  accent = "#6366f1",
+  bg = "#0f172a",
+  radius = "20px",
+  onButtonClick = () => {
+  }
+}) => {
+  const [hovered, setHovered] = (0, import_react24.useState)(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})`;
+  };
+  return /* @__PURE__ */ import_react24.default.createElement(
+    "div",
+    {
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => setHovered(false),
+      style: {
+        background: bg,
+        borderRadius: radius,
+        overflow: "hidden",
+        width: "300px",
+        border: `1px solid ${hovered ? alpha(accent, 0.3) : "rgba(255,255,255,0.07)"}`,
+        fontFamily: "system-ui, sans-serif",
+        transition: "border-color 0.25s, transform 0.25s",
+        transform: hovered ? "translateY(-4px)" : "none",
+        boxShadow: hovered ? `0 16px 40px rgba(0,0,0,0.5)` : "0 4px 20px rgba(0,0,0,0.3)"
+      }
+    },
+    /* @__PURE__ */ import_react24.default.createElement("div", { style: { position: "relative", width: "100%", height: "180px", overflow: "hidden" } }, /* @__PURE__ */ import_react24.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_react24.default.createElement("div", { style: {
+      position: "absolute",
+      inset: 0,
+      background: "linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 60%)"
+    } }), tag && /* @__PURE__ */ import_react24.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",
+      letterSpacing: "0.5px",
+      textTransform: "uppercase"
+    } }, tag)),
+    /* @__PURE__ */ import_react24.default.createElement("div", { style: { padding: "18px" } }, /* @__PURE__ */ import_react24.default.createElement("h3", { style: {
+      fontSize: "15px",
+      fontWeight: "700",
+      color: "#fff",
+      margin: "0 0 8px",
+      lineHeight: 1.4
+    } }, title), /* @__PURE__ */ import_react24.default.createElement("p", { style: {
+      fontSize: "13px",
+      color: "rgba(255,255,255,0.45)",
+      lineHeight: 1.65,
+      margin: "0 0 18px"
+    } }, description), /* @__PURE__ */ import_react24.default.createElement(
+      "button",
+      {
+        onClick: onButtonClick,
+        style: {
+          width: "100%",
+          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"
+      },
+      buttonText
+    ))
+  );
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Avatar,
   AvatarCard,
+  Charts,
   CodeBlock,
   CustomInputField,
   DividerLine,
   FileUpload,
   Footer,
+  ImageCard,
   Loader,
   LoadingSpinner,
   Navbar,

package/dist/index.mjs

@@ -1543,14 +1543,465 @@ var Sidebar = ({
     background: accent
   } }), /* @__PURE__ */ React22.createElement("span", { style: { fontSize: "14px", fontWeight: "700", color: "#fff" } }, activeItem == null ? void 0 : activeItem.label)), /* @__PURE__ */ React22.createElement("div", { style: { color: "#fff" } }, activeItem == null ? void 0 : activeItem.component)));
 };
+
+// src/components/Charts/Charts.jsx
+import React23, { useState as useState16 } from "react";
+var Charts = ({
+  type = "bar",
+  data = [
+    { label: "Jan", value: 40 },
+    { label: "Feb", value: 70 },
+    { label: "Mar", value: 55 },
+    { label: "Apr", value: 90 },
+    { label: "May", value: 65 },
+    { label: "Jun", value: 80 },
+    { label: "Jul", value: 100 },
+    { label: "Aug", value: 30 }
+  ],
+  title = "Monthly Stats",
+  accent = "#6366f1",
+  bg = "#0f172a",
+  radius = "16px",
+  showGrid = true,
+  showValues = true
+}) => {
+  const [hovered, setHovered] = useState16(null);
+  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 max = Math.max(...data.map((d) => d.value));
+  const min = Math.min(...data.map((d) => d.value));
+  const W = 320;
+  const H = 160;
+  const padL = 28;
+  const padR = 12;
+  const padT = 16;
+  const padB = 28;
+  const chartW = W - padL - padR;
+  const chartH = H - padT - padB;
+  const getX = (i) => padL + i / (data.length - 1) * chartW;
+  const getY = (v) => padT + chartH - (v - min) / (max - min || 1) * chartH;
+  const points = data.map((d, i) => `${getX(i)},${getY(d.value)}`).join(" ");
+  const areaPoints = `${padL},${padT + chartH} ` + points + ` ${getX(data.length - 1)},${padT + chartH}`;
+  const gridLines = [0, 0.25, 0.5, 0.75, 1].map((t) => ({
+    y: padT + chartH * (1 - t),
+    val: Math.round(min + t * (max - min))
+  }));
+  const BarChart = () => {
+    const barW = Math.min(28, chartW / data.length * 0.55);
+    return /* @__PURE__ */ React23.createElement("svg", { width: "100%", viewBox: `0 0 ${W} ${H}` }, showGrid && gridLines.map((g, i) => /* @__PURE__ */ React23.createElement("g", { key: i }, /* @__PURE__ */ React23.createElement(
+      "line",
+      {
+        x1: padL,
+        y1: g.y,
+        x2: W - padR,
+        y2: g.y,
+        stroke: "rgba(255,255,255,0.05)",
+        strokeWidth: "1"
+      }
+    ), /* @__PURE__ */ React23.createElement(
+      "text",
+      {
+        x: padL - 4,
+        y: g.y + 4,
+        textAnchor: "end",
+        fill: "rgba(255,255,255,0.25)",
+        fontSize: "9"
+      },
+      g.val
+    ))), data.map((d, i) => {
+      const x = padL + i / data.length * chartW + (chartW / data.length - barW) / 2;
+      const barH = (d.value - min) / (max - min || 1) * chartH;
+      const y = padT + chartH - barH;
+      const isH = hovered === i;
+      return /* @__PURE__ */ React23.createElement("g", { key: i, onMouseEnter: () => setHovered(i), onMouseLeave: () => setHovered(null) }, /* @__PURE__ */ React23.createElement(
+        "rect",
+        {
+          x,
+          y: padT,
+          width: barW,
+          height: chartH,
+          fill: "transparent",
+          rx: "4"
+        }
+      ), /* @__PURE__ */ React23.createElement(
+        "rect",
+        {
+          x,
+          y,
+          width: barW,
+          height: barH,
+          fill: isH ? accent : alpha(accent, 0.55),
+          rx: "4",
+          style: { transition: "fill 0.15s" }
+        }
+      ), showValues && isH && /* @__PURE__ */ React23.createElement(
+        "text",
+        {
+          x: x + barW / 2,
+          y: y - 5,
+          textAnchor: "middle",
+          fill: "#fff",
+          fontSize: "9",
+          fontWeight: "700"
+        },
+        d.value
+      ), /* @__PURE__ */ React23.createElement(
+        "text",
+        {
+          x: x + barW / 2,
+          y: H - 6,
+          textAnchor: "middle",
+          fill: "rgba(255,255,255,0.3)",
+          fontSize: "9"
+        },
+        d.label
+      ));
+    }));
+  };
+  const LineChart = () => /* @__PURE__ */ React23.createElement("svg", { width: "100%", viewBox: `0 0 ${W} ${H}` }, /* @__PURE__ */ React23.createElement("defs", null, /* @__PURE__ */ React23.createElement("linearGradient", { id: "lg", x1: "0", y1: "0", x2: "0", y2: "1" }, /* @__PURE__ */ React23.createElement("stop", { offset: "0%", stopColor: accent, stopOpacity: "0.3" }), /* @__PURE__ */ React23.createElement("stop", { offset: "100%", stopColor: accent, stopOpacity: "0" }))), showGrid && gridLines.map((g, i) => /* @__PURE__ */ React23.createElement("g", { key: i }, /* @__PURE__ */ React23.createElement(
+    "line",
+    {
+      x1: padL,
+      y1: g.y,
+      x2: W - padR,
+      y2: g.y,
+      stroke: "rgba(255,255,255,0.05)",
+      strokeWidth: "1"
+    }
+  ), /* @__PURE__ */ React23.createElement(
+    "text",
+    {
+      x: padL - 4,
+      y: g.y + 4,
+      textAnchor: "end",
+      fill: "rgba(255,255,255,0.25)",
+      fontSize: "9"
+    },
+    g.val
+  ))), /* @__PURE__ */ React23.createElement("polygon", { points: areaPoints, fill: "url(#lg)" }), /* @__PURE__ */ React23.createElement(
+    "polyline",
+    {
+      points,
+      fill: "none",
+      stroke: accent,
+      strokeWidth: "2",
+      strokeLinejoin: "round",
+      strokeLinecap: "round"
+    }
+  ), data.map((d, i) => {
+    const isH = hovered === i;
+    return /* @__PURE__ */ React23.createElement("g", { key: i, onMouseEnter: () => setHovered(i), onMouseLeave: () => setHovered(null) }, /* @__PURE__ */ React23.createElement("circle", { cx: getX(i), cy: getY(d.value), r: "10", fill: "transparent" }), /* @__PURE__ */ React23.createElement(
+      "circle",
+      {
+        cx: getX(i),
+        cy: getY(d.value),
+        r: isH ? 5 : 3,
+        fill: isH ? "#fff" : accent,
+        stroke: accent,
+        strokeWidth: "2",
+        style: { transition: "all 0.15s" }
+      }
+    ), showValues && isH && /* @__PURE__ */ React23.createElement(
+      "text",
+      {
+        x: getX(i),
+        y: getY(d.value) - 10,
+        textAnchor: "middle",
+        fill: "#fff",
+        fontSize: "9",
+        fontWeight: "700"
+      },
+      d.value
+    ), /* @__PURE__ */ React23.createElement(
+      "text",
+      {
+        x: getX(i),
+        y: H - 6,
+        textAnchor: "middle",
+        fill: "rgba(255,255,255,0.3)",
+        fontSize: "9"
+      },
+      d.label
+    ));
+  }));
+  const PieChart = () => {
+    var _a, _b;
+    const cx = W / 2, cy = H / 2 - 4, r = Math.min(H, W) / 2 - 24;
+    const total = data.reduce((s, d) => s + d.value, 0);
+    const colors = [
+      accent,
+      alpha(accent, 0.75),
+      alpha(accent, 0.55),
+      alpha(accent, 0.4),
+      alpha(accent, 0.3),
+      alpha(accent, 0.2),
+      alpha(accent, 0.12)
+    ];
+    let startAngle = -Math.PI / 2;
+    const slices = data.map((d, i) => {
+      const angle = d.value / total * 2 * Math.PI;
+      const x1 = cx + r * Math.cos(startAngle);
+      const y1 = cy + r * Math.sin(startAngle);
+      const x2 = cx + r * Math.cos(startAngle + angle);
+      const y2 = cy + r * Math.sin(startAngle + angle);
+      const lx = cx + (r + 14) * Math.cos(startAngle + angle / 2);
+      const ly = cy + (r + 14) * Math.sin(startAngle + angle / 2);
+      const large = angle > Math.PI ? 1 : 0;
+      const path = `M ${cx} ${cy} L ${x1} ${y1} A ${r} ${r} 0 ${large} 1 ${x2} ${y2} Z`;
+      const slice = { path, color: colors[i % colors.length], d, angle, lx, ly, i };
+      startAngle += angle;
+      return slice;
+    });
+    return /* @__PURE__ */ React23.createElement("svg", { width: "100%", viewBox: `0 0 ${W} ${H}` }, slices.map((s) => /* @__PURE__ */ React23.createElement("g", { key: s.i, onMouseEnter: () => setHovered(s.i), onMouseLeave: () => setHovered(null) }, /* @__PURE__ */ React23.createElement(
+      "path",
+      {
+        d: s.path,
+        fill: s.color,
+        stroke: bg,
+        strokeWidth: "2",
+        transform: hovered === s.i ? `translate(${Math.cos(s.angle / 2 - Math.PI / 2) * 4}, ${Math.sin(s.angle / 2 - Math.PI / 2) * 4})` : "",
+        style: { transition: "transform 0.15s", cursor: "pointer" }
+      }
+    ))), hovered !== null && /* @__PURE__ */ React23.createElement(React23.Fragment, null, /* @__PURE__ */ React23.createElement(
+      "text",
+      {
+        x: cx,
+        y: cy - 8,
+        textAnchor: "middle",
+        fill: "#fff",
+        fontSize: "16",
+        fontWeight: "800"
+      },
+      (_a = data[hovered]) == null ? void 0 : _a.value
+    ), /* @__PURE__ */ React23.createElement(
+      "text",
+      {
+        x: cx,
+        y: cy + 10,
+        textAnchor: "middle",
+        fill: "rgba(255,255,255,0.4)",
+        fontSize: "9"
+      },
+      (_b = data[hovered]) == null ? void 0 : _b.label
+    )), hovered === null && /* @__PURE__ */ React23.createElement(
+      "text",
+      {
+        x: cx,
+        y: cy + 5,
+        textAnchor: "middle",
+        fill: "rgba(255,255,255,0.2)",
+        fontSize: "9"
+      },
+      "Hover slice"
+    ));
+  };
+  const AreaChart = () => /* @__PURE__ */ React23.createElement("svg", { width: "100%", viewBox: `0 0 ${W} ${H}` }, /* @__PURE__ */ React23.createElement("defs", null, /* @__PURE__ */ React23.createElement("linearGradient", { id: "ag", x1: "0", y1: "0", x2: "0", y2: "1" }, /* @__PURE__ */ React23.createElement("stop", { offset: "0%", stopColor: accent, stopOpacity: "0.5" }), /* @__PURE__ */ React23.createElement("stop", { offset: "100%", stopColor: accent, stopOpacity: "0.02" }))), showGrid && gridLines.map((g, i) => /* @__PURE__ */ React23.createElement("g", { key: i }, /* @__PURE__ */ React23.createElement(
+    "line",
+    {
+      x1: padL,
+      y1: g.y,
+      x2: W - padR,
+      y2: g.y,
+      stroke: "rgba(255,255,255,0.05)",
+      strokeWidth: "1"
+    }
+  ), /* @__PURE__ */ React23.createElement(
+    "text",
+    {
+      x: padL - 4,
+      y: g.y + 4,
+      textAnchor: "end",
+      fill: "rgba(255,255,255,0.25)",
+      fontSize: "9"
+    },
+    g.val
+  ))), /* @__PURE__ */ React23.createElement("polygon", { points: areaPoints, fill: "url(#ag)" }), /* @__PURE__ */ React23.createElement(
+    "polyline",
+    {
+      points,
+      fill: "none",
+      stroke: accent,
+      strokeWidth: "1.5",
+      strokeLinejoin: "round",
+      strokeLinecap: "round"
+    }
+  ), data.map((d, i) => /* @__PURE__ */ React23.createElement("g", { key: i, onMouseEnter: () => setHovered(i), onMouseLeave: () => setHovered(null) }, /* @__PURE__ */ React23.createElement("rect", { x: getX(i) - 12, y: padT, width: 24, height: chartH, fill: "transparent" }), hovered === i && /* @__PURE__ */ React23.createElement(React23.Fragment, null, /* @__PURE__ */ React23.createElement(
+    "line",
+    {
+      x1: getX(i),
+      y1: padT,
+      x2: getX(i),
+      y2: padT + chartH,
+      stroke: "rgba(255,255,255,0.1)",
+      strokeWidth: "1",
+      strokeDasharray: "3 3"
+    }
+  ), showValues && /* @__PURE__ */ React23.createElement(
+    "text",
+    {
+      x: getX(i),
+      y: getY(d.value) - 10,
+      textAnchor: "middle",
+      fill: "#fff",
+      fontSize: "9",
+      fontWeight: "700"
+    },
+    d.value
+  )), /* @__PURE__ */ React23.createElement(
+    "text",
+    {
+      x: getX(i),
+      y: H - 6,
+      textAnchor: "middle",
+      fill: "rgba(255,255,255,0.3)",
+      fontSize: "9"
+    },
+    d.label
+  ))));
+  const renderChart = () => {
+    if (type === "line") return /* @__PURE__ */ React23.createElement(LineChart, null);
+    if (type === "pie") return /* @__PURE__ */ React23.createElement(PieChart, null);
+    if (type === "area") return /* @__PURE__ */ React23.createElement(AreaChart, null);
+    return /* @__PURE__ */ React23.createElement(BarChart, null);
+  };
+  return /* @__PURE__ */ React23.createElement("div", { style: {
+    background: bg,
+    borderRadius: radius,
+    padding: "20px",
+    fontFamily: "system-ui, sans-serif",
+    border: "1px solid rgba(255,255,255,0.07)",
+    width: "100%",
+    maxWidth: "360px",
+    boxSizing: "border-box"
+  } }, /* @__PURE__ */ React23.createElement("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "16px" } }, /* @__PURE__ */ React23.createElement("p", { style: { fontSize: "14px", fontWeight: "700", color: "#fff", margin: 0 } }, title), /* @__PURE__ */ React23.createElement("span", { style: {
+    fontSize: "10px",
+    fontWeight: "700",
+    padding: "3px 9px",
+    borderRadius: "6px",
+    background: alpha(accent, 0.12),
+    color: accent,
+    border: `1px solid ${alpha(accent, 0.25)}`,
+    textTransform: "capitalize"
+  } }, type)), renderChart());
+};
+
+// src/components/ImageCard/ImageCard.jsx
+import React24, { useState as useState17 } from "react";
+var ImageCard = ({
+  image = "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=600&q=80",
+  tag = "Travel",
+  title = "Discover the Hidden Peaks of the Himalayas",
+  description = "A breathtaking journey through untouched landscapes, ancient monasteries, and snow-capped summits that few have ever seen.",
+  buttonText = "Read More",
+  accent = "#6366f1",
+  bg = "#0f172a",
+  radius = "20px",
+  onButtonClick = () => {
+  }
+}) => {
+  const [hovered, setHovered] = useState17(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})`;
+  };
+  return /* @__PURE__ */ React24.createElement(
+    "div",
+    {
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => setHovered(false),
+      style: {
+        background: bg,
+        borderRadius: radius,
+        overflow: "hidden",
+        width: "300px",
+        border: `1px solid ${hovered ? alpha(accent, 0.3) : "rgba(255,255,255,0.07)"}`,
+        fontFamily: "system-ui, sans-serif",
+        transition: "border-color 0.25s, transform 0.25s",
+        transform: hovered ? "translateY(-4px)" : "none",
+        boxShadow: hovered ? `0 16px 40px rgba(0,0,0,0.5)` : "0 4px 20px rgba(0,0,0,0.3)"
+      }
+    },
+    /* @__PURE__ */ React24.createElement("div", { style: { position: "relative", width: "100%", height: "180px", overflow: "hidden" } }, /* @__PURE__ */ React24.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__ */ React24.createElement("div", { style: {
+      position: "absolute",
+      inset: 0,
+      background: "linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 60%)"
+    } }), tag && /* @__PURE__ */ React24.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",
+      letterSpacing: "0.5px",
+      textTransform: "uppercase"
+    } }, tag)),
+    /* @__PURE__ */ React24.createElement("div", { style: { padding: "18px" } }, /* @__PURE__ */ React24.createElement("h3", { style: {
+      fontSize: "15px",
+      fontWeight: "700",
+      color: "#fff",
+      margin: "0 0 8px",
+      lineHeight: 1.4
+    } }, title), /* @__PURE__ */ React24.createElement("p", { style: {
+      fontSize: "13px",
+      color: "rgba(255,255,255,0.45)",
+      lineHeight: 1.65,
+      margin: "0 0 18px"
+    } }, description), /* @__PURE__ */ React24.createElement(
+      "button",
+      {
+        onClick: onButtonClick,
+        style: {
+          width: "100%",
+          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"
+      },
+      buttonText
+    ))
+  );
+};
 export {
   Avatar,
   AvatarCard,
+  Charts,
   CodeBlock,
   CustomInputField,
   DividerLine,
   FileUpload,
   Footer,
+  ImageCard,
   Loader,
   LoadingSpinner,
   Navbar,

package/package.json

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