virtual-ui-lib 1.0.61 → 1.0.63

package/dist/index.js

@@ -31,6 +31,7 @@ var index_exports = {};
 __export(index_exports, {
   Avatar: () => Avatar,
   AvatarCard: () => AvatarCard,
+  Charts: () => Charts,
   CodeBlock: () => CodeBlock,
   CustomInputField: () => CustomInputField,
   DividerLine: () => DividerLine,
@@ -44,6 +45,7 @@ __export(index_exports, {
   PricingCard: () => PricingCard,
   ResponsiveNavbar: () => ResponsiveNavbar,
   SearchBar: () => SearchBar,
+  Sidebar: () => Sidebar,
   SkeletonLoader: () => SkeletonLoader,
   SmartButton: () => SmartButton,
   StatCard: () => StatCard,
@@ -1420,10 +1422,534 @@ var Footer = ({
     link
   ))), /* @__PURE__ */ import_react21.default.createElement("div", { style: { width: "100%", height: "1px", background: "rgba(255,255,255,0.06)" } }), /* @__PURE__ */ import_react21.default.createElement("p", { style: { fontSize: "12px", color: "rgba(255,255,255,0.22)", margin: 0 } }, "\xA9 ", (/* @__PURE__ */ new Date()).getFullYear(), " ", copyright, ". All rights reserved.")));
 };
+
+// src/components/Sidebar/Sidebar.jsx
+var import_react22 = __toESM(require("react"));
+var Sidebar = ({
+  logo = "VirtualAI",
+  accent = "#6366f1",
+  bg = "#0f172a",
+  items = [
+    {
+      label: "Dashboard",
+      icon: "M3 3h7v7H3zM14 3h7v7h-7zM3 14h7v7H3zM14 14h7v7h-7z",
+      component: /* @__PURE__ */ import_react22.default.createElement("div", { style: { padding: "24px" } }, /* @__PURE__ */ import_react22.default.createElement("h2", { style: { color: "#fff", fontSize: "20px", fontWeight: "700", marginBottom: "8px" } }, "Dashboard"), /* @__PURE__ */ import_react22.default.createElement("p", { style: { color: "rgba(255,255,255,0.4)", fontSize: "14px" } }, "Welcome to your dashboard overview."))
+    },
+    {
+      label: "Analytics",
+      icon: "M18 20V10M12 20V4M6 20v-6",
+      component: /* @__PURE__ */ import_react22.default.createElement("div", { style: { padding: "24px" } }, /* @__PURE__ */ import_react22.default.createElement("h2", { style: { color: "#fff", fontSize: "20px", fontWeight: "700", marginBottom: "8px" } }, "Analytics"), /* @__PURE__ */ import_react22.default.createElement("p", { style: { color: "rgba(255,255,255,0.4)", fontSize: "14px" } }, "View your stats and performance here."))
+    },
+    {
+      label: "Users",
+      icon: "M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2M9 11a4 4 0 100-8 4 4 0 000 8zM23 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75",
+      component: /* @__PURE__ */ import_react22.default.createElement("div", { style: { padding: "24px" } }, /* @__PURE__ */ import_react22.default.createElement("h2", { style: { color: "#fff", fontSize: "20px", fontWeight: "700", marginBottom: "8px" } }, "Users"), /* @__PURE__ */ import_react22.default.createElement("p", { style: { color: "rgba(255,255,255,0.4)", fontSize: "14px" } }, "Manage your users and permissions."))
+    },
+    {
+      label: "Settings",
+      icon: "M12 15a3 3 0 100-6 3 3 0 000 6zM19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-4 0v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83-2.83l.06-.06A1.65 1.65 0 004.68 15a1.65 1.65 0 00-1.51-1H3a2 2 0 010-4h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 012.83-2.83l.06.06A1.65 1.65 0 009 4.68a1.65 1.65 0 001-1.51V3a2 2 0 014 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 2.83l-.06.06A1.65 1.65 0 0019.4 9a1.65 1.65 0 001.51 1H21a2 2 0 010 4h-.09a1.65 1.65 0 00-1.51 1z",
+      component: /* @__PURE__ */ import_react22.default.createElement("div", { style: { padding: "24px" } }, /* @__PURE__ */ import_react22.default.createElement("h2", { style: { color: "#fff", fontSize: "20px", fontWeight: "700", marginBottom: "8px" } }, "Settings"), /* @__PURE__ */ import_react22.default.createElement("p", { style: { color: "rgba(255,255,255,0.4)", fontSize: "14px" } }, "Configure your preferences here."))
+    }
+  ]
+}) => {
+  const [active, setActive] = (0, import_react22.useState)(0);
+  const [collapsed, setCollapsed] = (0, import_react22.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})`;
+  };
+  const activeItem = items[active];
+  return /* @__PURE__ */ import_react22.default.createElement("div", { style: {
+    display: "flex",
+    height: "480px",
+    fontFamily: "system-ui, sans-serif",
+    borderRadius: "16px",
+    overflow: "hidden",
+    border: "1px solid rgba(255,255,255,0.07)"
+  } }, /* @__PURE__ */ import_react22.default.createElement("div", { style: {
+    width: collapsed ? "60px" : "200px",
+    background: bg,
+    borderRight: "1px solid rgba(255,255,255,0.06)",
+    display: "flex",
+    flexDirection: "column",
+    transition: "width 0.25s ease",
+    flexShrink: 0,
+    overflow: "hidden"
+  } }, /* @__PURE__ */ import_react22.default.createElement("div", { style: {
+    height: "56px",
+    display: "flex",
+    alignItems: "center",
+    gap: "10px",
+    padding: collapsed ? "0 14px" : "0 16px",
+    borderBottom: "1px solid rgba(255,255,255,0.05)",
+    overflow: "hidden",
+    flexShrink: 0
+  } }, /* @__PURE__ */ import_react22.default.createElement("div", { style: {
+    width: "28px",
+    height: "28px",
+    borderRadius: "8px",
+    flexShrink: 0,
+    background: `linear-gradient(135deg, ${accent}, ${alpha(accent, 0.6)})`,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    fontSize: "13px",
+    fontWeight: "800",
+    color: "#fff"
+  } }, logo[0]), !collapsed && /* @__PURE__ */ import_react22.default.createElement("span", { style: { fontSize: "14px", fontWeight: "800", color: "#fff", whiteSpace: "nowrap" } }, logo)), /* @__PURE__ */ import_react22.default.createElement("nav", { style: { flex: 1, padding: "10px 8px", display: "flex", flexDirection: "column", gap: "3px", overflowY: "auto" } }, items.map((item, i) => /* @__PURE__ */ import_react22.default.createElement(
+    "button",
+    {
+      key: i,
+      onClick: () => setActive(i),
+      title: collapsed ? item.label : "",
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: "10px",
+        padding: collapsed ? "9px 0" : "9px 12px",
+        justifyContent: collapsed ? "center" : "flex-start",
+        borderRadius: "10px",
+        border: "none",
+        cursor: "pointer",
+        transition: "all 0.2s",
+        fontFamily: "inherit",
+        width: "100%",
+        background: active === i ? alpha(accent, 0.12) : "transparent",
+        color: active === i ? accent : "rgba(255,255,255,0.45)",
+        borderLeft: active === i ? `2px solid ${accent}` : "2px solid transparent"
+      },
+      onMouseEnter: (e) => {
+        if (active !== i) {
+          e.currentTarget.style.background = "rgba(255,255,255,0.04)";
+          e.currentTarget.style.color = "rgba(255,255,255,0.8)";
+        }
+      },
+      onMouseLeave: (e) => {
+        if (active !== i) {
+          e.currentTarget.style.background = "transparent";
+          e.currentTarget.style.color = "rgba(255,255,255,0.45)";
+        }
+      }
+    },
+    /* @__PURE__ */ import_react22.default.createElement(
+      "svg",
+      {
+        width: "16",
+        height: "16",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        style: { flexShrink: 0 }
+      },
+      /* @__PURE__ */ import_react22.default.createElement("path", { d: item.icon })
+    ),
+    !collapsed && /* @__PURE__ */ import_react22.default.createElement("span", { style: { fontSize: "13px", fontWeight: active === i ? "700" : "500", whiteSpace: "nowrap" } }, item.label)
+  ))), /* @__PURE__ */ import_react22.default.createElement("div", { style: { padding: "8px", borderTop: "1px solid rgba(255,255,255,0.05)" } }, /* @__PURE__ */ import_react22.default.createElement(
+    "button",
+    {
+      onClick: () => setCollapsed((c) => !c),
+      style: {
+        width: "100%",
+        padding: "8px",
+        borderRadius: "9px",
+        border: "none",
+        background: "rgba(255,255,255,0.04)",
+        cursor: "pointer",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        color: "rgba(255,255,255,0.3)",
+        transition: "all 0.2s"
+      },
+      onMouseEnter: (e) => e.currentTarget.style.color = "rgba(255,255,255,0.7)",
+      onMouseLeave: (e) => e.currentTarget.style.color = "rgba(255,255,255,0.3)"
+    },
+    /* @__PURE__ */ import_react22.default.createElement(
+      "svg",
+      {
+        width: "15",
+        height: "15",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round"
+      },
+      /* @__PURE__ */ import_react22.default.createElement("path", { d: collapsed ? "M9 18l6-6-6-6" : "M15 18l-6-6 6-6" })
+    )
+  ))), /* @__PURE__ */ import_react22.default.createElement("div", { style: {
+    flex: 1,
+    background: "rgba(255,255,255,0.02)",
+    overflow: "auto"
+  } }, /* @__PURE__ */ import_react22.default.createElement("div", { style: {
+    height: "56px",
+    display: "flex",
+    alignItems: "center",
+    padding: "0 20px",
+    borderBottom: "1px solid rgba(255,255,255,0.05)",
+    gap: "10px"
+  } }, /* @__PURE__ */ import_react22.default.createElement("div", { style: {
+    width: "6px",
+    height: "6px",
+    borderRadius: "50%",
+    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());
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Avatar,
   AvatarCard,
+  Charts,
   CodeBlock,
   CustomInputField,
   DividerLine,
@@ -1437,6 +1963,7 @@ var Footer = ({
   PricingCard,
   ResponsiveNavbar,
   SearchBar,
+  Sidebar,
   SkeletonLoader,
   SmartButton,
   StatCard,

package/dist/index.mjs

@@ -1365,9 +1365,533 @@ var Footer = ({
     link
   ))), /* @__PURE__ */ React21.createElement("div", { style: { width: "100%", height: "1px", background: "rgba(255,255,255,0.06)" } }), /* @__PURE__ */ React21.createElement("p", { style: { fontSize: "12px", color: "rgba(255,255,255,0.22)", margin: 0 } }, "\xA9 ", (/* @__PURE__ */ new Date()).getFullYear(), " ", copyright, ". All rights reserved.")));
 };
+
+// src/components/Sidebar/Sidebar.jsx
+import React22, { useState as useState15 } from "react";
+var Sidebar = ({
+  logo = "VirtualAI",
+  accent = "#6366f1",
+  bg = "#0f172a",
+  items = [
+    {
+      label: "Dashboard",
+      icon: "M3 3h7v7H3zM14 3h7v7h-7zM3 14h7v7H3zM14 14h7v7h-7z",
+      component: /* @__PURE__ */ React22.createElement("div", { style: { padding: "24px" } }, /* @__PURE__ */ React22.createElement("h2", { style: { color: "#fff", fontSize: "20px", fontWeight: "700", marginBottom: "8px" } }, "Dashboard"), /* @__PURE__ */ React22.createElement("p", { style: { color: "rgba(255,255,255,0.4)", fontSize: "14px" } }, "Welcome to your dashboard overview."))
+    },
+    {
+      label: "Analytics",
+      icon: "M18 20V10M12 20V4M6 20v-6",
+      component: /* @__PURE__ */ React22.createElement("div", { style: { padding: "24px" } }, /* @__PURE__ */ React22.createElement("h2", { style: { color: "#fff", fontSize: "20px", fontWeight: "700", marginBottom: "8px" } }, "Analytics"), /* @__PURE__ */ React22.createElement("p", { style: { color: "rgba(255,255,255,0.4)", fontSize: "14px" } }, "View your stats and performance here."))
+    },
+    {
+      label: "Users",
+      icon: "M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2M9 11a4 4 0 100-8 4 4 0 000 8zM23 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75",
+      component: /* @__PURE__ */ React22.createElement("div", { style: { padding: "24px" } }, /* @__PURE__ */ React22.createElement("h2", { style: { color: "#fff", fontSize: "20px", fontWeight: "700", marginBottom: "8px" } }, "Users"), /* @__PURE__ */ React22.createElement("p", { style: { color: "rgba(255,255,255,0.4)", fontSize: "14px" } }, "Manage your users and permissions."))
+    },
+    {
+      label: "Settings",
+      icon: "M12 15a3 3 0 100-6 3 3 0 000 6zM19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-4 0v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83-2.83l.06-.06A1.65 1.65 0 004.68 15a1.65 1.65 0 00-1.51-1H3a2 2 0 010-4h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 012.83-2.83l.06.06A1.65 1.65 0 009 4.68a1.65 1.65 0 001-1.51V3a2 2 0 014 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 2.83l-.06.06A1.65 1.65 0 0019.4 9a1.65 1.65 0 001.51 1H21a2 2 0 010 4h-.09a1.65 1.65 0 00-1.51 1z",
+      component: /* @__PURE__ */ React22.createElement("div", { style: { padding: "24px" } }, /* @__PURE__ */ React22.createElement("h2", { style: { color: "#fff", fontSize: "20px", fontWeight: "700", marginBottom: "8px" } }, "Settings"), /* @__PURE__ */ React22.createElement("p", { style: { color: "rgba(255,255,255,0.4)", fontSize: "14px" } }, "Configure your preferences here."))
+    }
+  ]
+}) => {
+  const [active, setActive] = useState15(0);
+  const [collapsed, setCollapsed] = useState15(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})`;
+  };
+  const activeItem = items[active];
+  return /* @__PURE__ */ React22.createElement("div", { style: {
+    display: "flex",
+    height: "480px",
+    fontFamily: "system-ui, sans-serif",
+    borderRadius: "16px",
+    overflow: "hidden",
+    border: "1px solid rgba(255,255,255,0.07)"
+  } }, /* @__PURE__ */ React22.createElement("div", { style: {
+    width: collapsed ? "60px" : "200px",
+    background: bg,
+    borderRight: "1px solid rgba(255,255,255,0.06)",
+    display: "flex",
+    flexDirection: "column",
+    transition: "width 0.25s ease",
+    flexShrink: 0,
+    overflow: "hidden"
+  } }, /* @__PURE__ */ React22.createElement("div", { style: {
+    height: "56px",
+    display: "flex",
+    alignItems: "center",
+    gap: "10px",
+    padding: collapsed ? "0 14px" : "0 16px",
+    borderBottom: "1px solid rgba(255,255,255,0.05)",
+    overflow: "hidden",
+    flexShrink: 0
+  } }, /* @__PURE__ */ React22.createElement("div", { style: {
+    width: "28px",
+    height: "28px",
+    borderRadius: "8px",
+    flexShrink: 0,
+    background: `linear-gradient(135deg, ${accent}, ${alpha(accent, 0.6)})`,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    fontSize: "13px",
+    fontWeight: "800",
+    color: "#fff"
+  } }, logo[0]), !collapsed && /* @__PURE__ */ React22.createElement("span", { style: { fontSize: "14px", fontWeight: "800", color: "#fff", whiteSpace: "nowrap" } }, logo)), /* @__PURE__ */ React22.createElement("nav", { style: { flex: 1, padding: "10px 8px", display: "flex", flexDirection: "column", gap: "3px", overflowY: "auto" } }, items.map((item, i) => /* @__PURE__ */ React22.createElement(
+    "button",
+    {
+      key: i,
+      onClick: () => setActive(i),
+      title: collapsed ? item.label : "",
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: "10px",
+        padding: collapsed ? "9px 0" : "9px 12px",
+        justifyContent: collapsed ? "center" : "flex-start",
+        borderRadius: "10px",
+        border: "none",
+        cursor: "pointer",
+        transition: "all 0.2s",
+        fontFamily: "inherit",
+        width: "100%",
+        background: active === i ? alpha(accent, 0.12) : "transparent",
+        color: active === i ? accent : "rgba(255,255,255,0.45)",
+        borderLeft: active === i ? `2px solid ${accent}` : "2px solid transparent"
+      },
+      onMouseEnter: (e) => {
+        if (active !== i) {
+          e.currentTarget.style.background = "rgba(255,255,255,0.04)";
+          e.currentTarget.style.color = "rgba(255,255,255,0.8)";
+        }
+      },
+      onMouseLeave: (e) => {
+        if (active !== i) {
+          e.currentTarget.style.background = "transparent";
+          e.currentTarget.style.color = "rgba(255,255,255,0.45)";
+        }
+      }
+    },
+    /* @__PURE__ */ React22.createElement(
+      "svg",
+      {
+        width: "16",
+        height: "16",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        style: { flexShrink: 0 }
+      },
+      /* @__PURE__ */ React22.createElement("path", { d: item.icon })
+    ),
+    !collapsed && /* @__PURE__ */ React22.createElement("span", { style: { fontSize: "13px", fontWeight: active === i ? "700" : "500", whiteSpace: "nowrap" } }, item.label)
+  ))), /* @__PURE__ */ React22.createElement("div", { style: { padding: "8px", borderTop: "1px solid rgba(255,255,255,0.05)" } }, /* @__PURE__ */ React22.createElement(
+    "button",
+    {
+      onClick: () => setCollapsed((c) => !c),
+      style: {
+        width: "100%",
+        padding: "8px",
+        borderRadius: "9px",
+        border: "none",
+        background: "rgba(255,255,255,0.04)",
+        cursor: "pointer",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        color: "rgba(255,255,255,0.3)",
+        transition: "all 0.2s"
+      },
+      onMouseEnter: (e) => e.currentTarget.style.color = "rgba(255,255,255,0.7)",
+      onMouseLeave: (e) => e.currentTarget.style.color = "rgba(255,255,255,0.3)"
+    },
+    /* @__PURE__ */ React22.createElement(
+      "svg",
+      {
+        width: "15",
+        height: "15",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round"
+      },
+      /* @__PURE__ */ React22.createElement("path", { d: collapsed ? "M9 18l6-6-6-6" : "M15 18l-6-6 6-6" })
+    )
+  ))), /* @__PURE__ */ React22.createElement("div", { style: {
+    flex: 1,
+    background: "rgba(255,255,255,0.02)",
+    overflow: "auto"
+  } }, /* @__PURE__ */ React22.createElement("div", { style: {
+    height: "56px",
+    display: "flex",
+    alignItems: "center",
+    padding: "0 20px",
+    borderBottom: "1px solid rgba(255,255,255,0.05)",
+    gap: "10px"
+  } }, /* @__PURE__ */ React22.createElement("div", { style: {
+    width: "6px",
+    height: "6px",
+    borderRadius: "50%",
+    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());
+};
 export {
   Avatar,
   AvatarCard,
+  Charts,
   CodeBlock,
   CustomInputField,
   DividerLine,
@@ -1381,6 +1905,7 @@ export {
   PricingCard,
   ResponsiveNavbar,
   SearchBar,
+  Sidebar,
   SkeletonLoader,
   SmartButton,
   StatCard,

package/package.json

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