virtual-ui-lib 1.0.62 → 1.0.63

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/index.js +347 -0
  2. package/dist/index.mjs +346 -0
  3. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -31,6 +31,7 @@ var index_exports = {};
31
31
  __export(index_exports, {
32
32
  Avatar: () => Avatar,
33
33
  AvatarCard: () => AvatarCard,
34
+ Charts: () => Charts,
34
35
  CodeBlock: () => CodeBlock,
35
36
  CustomInputField: () => CustomInputField,
36
37
  DividerLine: () => DividerLine,
@@ -1599,10 +1600,356 @@ var Sidebar = ({
1599
1600
  background: accent
1600
1601
  } }), /* @__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)));
1601
1602
  };
1603
+
1604
+ // src/components/Charts/Charts.jsx
1605
+ var import_react23 = __toESM(require("react"));
1606
+ var Charts = ({
1607
+ type = "bar",
1608
+ data = [
1609
+ { label: "Jan", value: 40 },
1610
+ { label: "Feb", value: 70 },
1611
+ { label: "Mar", value: 55 },
1612
+ { label: "Apr", value: 90 },
1613
+ { label: "May", value: 65 },
1614
+ { label: "Jun", value: 80 },
1615
+ { label: "Jul", value: 100 },
1616
+ { label: "Aug", value: 30 }
1617
+ ],
1618
+ title = "Monthly Stats",
1619
+ accent = "#6366f1",
1620
+ bg = "#0f172a",
1621
+ radius = "16px",
1622
+ showGrid = true,
1623
+ showValues = true
1624
+ }) => {
1625
+ const [hovered, setHovered] = (0, import_react23.useState)(null);
1626
+ const alpha = (hex, op) => {
1627
+ const r = parseInt(hex.slice(1, 3), 16);
1628
+ const g = parseInt(hex.slice(3, 5), 16);
1629
+ const b = parseInt(hex.slice(5, 7), 16);
1630
+ return `rgba(${r},${g},${b},${op})`;
1631
+ };
1632
+ const max = Math.max(...data.map((d) => d.value));
1633
+ const min = Math.min(...data.map((d) => d.value));
1634
+ const W = 320;
1635
+ const H = 160;
1636
+ const padL = 28;
1637
+ const padR = 12;
1638
+ const padT = 16;
1639
+ const padB = 28;
1640
+ const chartW = W - padL - padR;
1641
+ const chartH = H - padT - padB;
1642
+ const getX = (i) => padL + i / (data.length - 1) * chartW;
1643
+ const getY = (v) => padT + chartH - (v - min) / (max - min || 1) * chartH;
1644
+ const points = data.map((d, i) => `${getX(i)},${getY(d.value)}`).join(" ");
1645
+ const areaPoints = `${padL},${padT + chartH} ` + points + ` ${getX(data.length - 1)},${padT + chartH}`;
1646
+ const gridLines = [0, 0.25, 0.5, 0.75, 1].map((t) => ({
1647
+ y: padT + chartH * (1 - t),
1648
+ val: Math.round(min + t * (max - min))
1649
+ }));
1650
+ const BarChart = () => {
1651
+ const barW = Math.min(28, chartW / data.length * 0.55);
1652
+ 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(
1653
+ "line",
1654
+ {
1655
+ x1: padL,
1656
+ y1: g.y,
1657
+ x2: W - padR,
1658
+ y2: g.y,
1659
+ stroke: "rgba(255,255,255,0.05)",
1660
+ strokeWidth: "1"
1661
+ }
1662
+ ), /* @__PURE__ */ import_react23.default.createElement(
1663
+ "text",
1664
+ {
1665
+ x: padL - 4,
1666
+ y: g.y + 4,
1667
+ textAnchor: "end",
1668
+ fill: "rgba(255,255,255,0.25)",
1669
+ fontSize: "9"
1670
+ },
1671
+ g.val
1672
+ ))), data.map((d, i) => {
1673
+ const x = padL + i / data.length * chartW + (chartW / data.length - barW) / 2;
1674
+ const barH = (d.value - min) / (max - min || 1) * chartH;
1675
+ const y = padT + chartH - barH;
1676
+ const isH = hovered === i;
1677
+ return /* @__PURE__ */ import_react23.default.createElement("g", { key: i, onMouseEnter: () => setHovered(i), onMouseLeave: () => setHovered(null) }, /* @__PURE__ */ import_react23.default.createElement(
1678
+ "rect",
1679
+ {
1680
+ x,
1681
+ y: padT,
1682
+ width: barW,
1683
+ height: chartH,
1684
+ fill: "transparent",
1685
+ rx: "4"
1686
+ }
1687
+ ), /* @__PURE__ */ import_react23.default.createElement(
1688
+ "rect",
1689
+ {
1690
+ x,
1691
+ y,
1692
+ width: barW,
1693
+ height: barH,
1694
+ fill: isH ? accent : alpha(accent, 0.55),
1695
+ rx: "4",
1696
+ style: { transition: "fill 0.15s" }
1697
+ }
1698
+ ), showValues && isH && /* @__PURE__ */ import_react23.default.createElement(
1699
+ "text",
1700
+ {
1701
+ x: x + barW / 2,
1702
+ y: y - 5,
1703
+ textAnchor: "middle",
1704
+ fill: "#fff",
1705
+ fontSize: "9",
1706
+ fontWeight: "700"
1707
+ },
1708
+ d.value
1709
+ ), /* @__PURE__ */ import_react23.default.createElement(
1710
+ "text",
1711
+ {
1712
+ x: x + barW / 2,
1713
+ y: H - 6,
1714
+ textAnchor: "middle",
1715
+ fill: "rgba(255,255,255,0.3)",
1716
+ fontSize: "9"
1717
+ },
1718
+ d.label
1719
+ ));
1720
+ }));
1721
+ };
1722
+ 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(
1723
+ "line",
1724
+ {
1725
+ x1: padL,
1726
+ y1: g.y,
1727
+ x2: W - padR,
1728
+ y2: g.y,
1729
+ stroke: "rgba(255,255,255,0.05)",
1730
+ strokeWidth: "1"
1731
+ }
1732
+ ), /* @__PURE__ */ import_react23.default.createElement(
1733
+ "text",
1734
+ {
1735
+ x: padL - 4,
1736
+ y: g.y + 4,
1737
+ textAnchor: "end",
1738
+ fill: "rgba(255,255,255,0.25)",
1739
+ fontSize: "9"
1740
+ },
1741
+ g.val
1742
+ ))), /* @__PURE__ */ import_react23.default.createElement("polygon", { points: areaPoints, fill: "url(#lg)" }), /* @__PURE__ */ import_react23.default.createElement(
1743
+ "polyline",
1744
+ {
1745
+ points,
1746
+ fill: "none",
1747
+ stroke: accent,
1748
+ strokeWidth: "2",
1749
+ strokeLinejoin: "round",
1750
+ strokeLinecap: "round"
1751
+ }
1752
+ ), data.map((d, i) => {
1753
+ const isH = hovered === i;
1754
+ 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(
1755
+ "circle",
1756
+ {
1757
+ cx: getX(i),
1758
+ cy: getY(d.value),
1759
+ r: isH ? 5 : 3,
1760
+ fill: isH ? "#fff" : accent,
1761
+ stroke: accent,
1762
+ strokeWidth: "2",
1763
+ style: { transition: "all 0.15s" }
1764
+ }
1765
+ ), showValues && isH && /* @__PURE__ */ import_react23.default.createElement(
1766
+ "text",
1767
+ {
1768
+ x: getX(i),
1769
+ y: getY(d.value) - 10,
1770
+ textAnchor: "middle",
1771
+ fill: "#fff",
1772
+ fontSize: "9",
1773
+ fontWeight: "700"
1774
+ },
1775
+ d.value
1776
+ ), /* @__PURE__ */ import_react23.default.createElement(
1777
+ "text",
1778
+ {
1779
+ x: getX(i),
1780
+ y: H - 6,
1781
+ textAnchor: "middle",
1782
+ fill: "rgba(255,255,255,0.3)",
1783
+ fontSize: "9"
1784
+ },
1785
+ d.label
1786
+ ));
1787
+ }));
1788
+ const PieChart = () => {
1789
+ var _a, _b;
1790
+ const cx = W / 2, cy = H / 2 - 4, r = Math.min(H, W) / 2 - 24;
1791
+ const total = data.reduce((s, d) => s + d.value, 0);
1792
+ const colors = [
1793
+ accent,
1794
+ alpha(accent, 0.75),
1795
+ alpha(accent, 0.55),
1796
+ alpha(accent, 0.4),
1797
+ alpha(accent, 0.3),
1798
+ alpha(accent, 0.2),
1799
+ alpha(accent, 0.12)
1800
+ ];
1801
+ let startAngle = -Math.PI / 2;
1802
+ const slices = data.map((d, i) => {
1803
+ const angle = d.value / total * 2 * Math.PI;
1804
+ const x1 = cx + r * Math.cos(startAngle);
1805
+ const y1 = cy + r * Math.sin(startAngle);
1806
+ const x2 = cx + r * Math.cos(startAngle + angle);
1807
+ const y2 = cy + r * Math.sin(startAngle + angle);
1808
+ const lx = cx + (r + 14) * Math.cos(startAngle + angle / 2);
1809
+ const ly = cy + (r + 14) * Math.sin(startAngle + angle / 2);
1810
+ const large = angle > Math.PI ? 1 : 0;
1811
+ const path = `M ${cx} ${cy} L ${x1} ${y1} A ${r} ${r} 0 ${large} 1 ${x2} ${y2} Z`;
1812
+ const slice = { path, color: colors[i % colors.length], d, angle, lx, ly, i };
1813
+ startAngle += angle;
1814
+ return slice;
1815
+ });
1816
+ 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(
1817
+ "path",
1818
+ {
1819
+ d: s.path,
1820
+ fill: s.color,
1821
+ stroke: bg,
1822
+ strokeWidth: "2",
1823
+ transform: hovered === s.i ? `translate(${Math.cos(s.angle / 2 - Math.PI / 2) * 4}, ${Math.sin(s.angle / 2 - Math.PI / 2) * 4})` : "",
1824
+ style: { transition: "transform 0.15s", cursor: "pointer" }
1825
+ }
1826
+ ))), hovered !== null && /* @__PURE__ */ import_react23.default.createElement(import_react23.default.Fragment, null, /* @__PURE__ */ import_react23.default.createElement(
1827
+ "text",
1828
+ {
1829
+ x: cx,
1830
+ y: cy - 8,
1831
+ textAnchor: "middle",
1832
+ fill: "#fff",
1833
+ fontSize: "16",
1834
+ fontWeight: "800"
1835
+ },
1836
+ (_a = data[hovered]) == null ? void 0 : _a.value
1837
+ ), /* @__PURE__ */ import_react23.default.createElement(
1838
+ "text",
1839
+ {
1840
+ x: cx,
1841
+ y: cy + 10,
1842
+ textAnchor: "middle",
1843
+ fill: "rgba(255,255,255,0.4)",
1844
+ fontSize: "9"
1845
+ },
1846
+ (_b = data[hovered]) == null ? void 0 : _b.label
1847
+ )), hovered === null && /* @__PURE__ */ import_react23.default.createElement(
1848
+ "text",
1849
+ {
1850
+ x: cx,
1851
+ y: cy + 5,
1852
+ textAnchor: "middle",
1853
+ fill: "rgba(255,255,255,0.2)",
1854
+ fontSize: "9"
1855
+ },
1856
+ "Hover slice"
1857
+ ));
1858
+ };
1859
+ 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(
1860
+ "line",
1861
+ {
1862
+ x1: padL,
1863
+ y1: g.y,
1864
+ x2: W - padR,
1865
+ y2: g.y,
1866
+ stroke: "rgba(255,255,255,0.05)",
1867
+ strokeWidth: "1"
1868
+ }
1869
+ ), /* @__PURE__ */ import_react23.default.createElement(
1870
+ "text",
1871
+ {
1872
+ x: padL - 4,
1873
+ y: g.y + 4,
1874
+ textAnchor: "end",
1875
+ fill: "rgba(255,255,255,0.25)",
1876
+ fontSize: "9"
1877
+ },
1878
+ g.val
1879
+ ))), /* @__PURE__ */ import_react23.default.createElement("polygon", { points: areaPoints, fill: "url(#ag)" }), /* @__PURE__ */ import_react23.default.createElement(
1880
+ "polyline",
1881
+ {
1882
+ points,
1883
+ fill: "none",
1884
+ stroke: accent,
1885
+ strokeWidth: "1.5",
1886
+ strokeLinejoin: "round",
1887
+ strokeLinecap: "round"
1888
+ }
1889
+ ), 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(
1890
+ "line",
1891
+ {
1892
+ x1: getX(i),
1893
+ y1: padT,
1894
+ x2: getX(i),
1895
+ y2: padT + chartH,
1896
+ stroke: "rgba(255,255,255,0.1)",
1897
+ strokeWidth: "1",
1898
+ strokeDasharray: "3 3"
1899
+ }
1900
+ ), showValues && /* @__PURE__ */ import_react23.default.createElement(
1901
+ "text",
1902
+ {
1903
+ x: getX(i),
1904
+ y: getY(d.value) - 10,
1905
+ textAnchor: "middle",
1906
+ fill: "#fff",
1907
+ fontSize: "9",
1908
+ fontWeight: "700"
1909
+ },
1910
+ d.value
1911
+ )), /* @__PURE__ */ import_react23.default.createElement(
1912
+ "text",
1913
+ {
1914
+ x: getX(i),
1915
+ y: H - 6,
1916
+ textAnchor: "middle",
1917
+ fill: "rgba(255,255,255,0.3)",
1918
+ fontSize: "9"
1919
+ },
1920
+ d.label
1921
+ ))));
1922
+ const renderChart = () => {
1923
+ if (type === "line") return /* @__PURE__ */ import_react23.default.createElement(LineChart, null);
1924
+ if (type === "pie") return /* @__PURE__ */ import_react23.default.createElement(PieChart, null);
1925
+ if (type === "area") return /* @__PURE__ */ import_react23.default.createElement(AreaChart, null);
1926
+ return /* @__PURE__ */ import_react23.default.createElement(BarChart, null);
1927
+ };
1928
+ return /* @__PURE__ */ import_react23.default.createElement("div", { style: {
1929
+ background: bg,
1930
+ borderRadius: radius,
1931
+ padding: "20px",
1932
+ fontFamily: "system-ui, sans-serif",
1933
+ border: "1px solid rgba(255,255,255,0.07)",
1934
+ width: "100%",
1935
+ maxWidth: "360px",
1936
+ boxSizing: "border-box"
1937
+ } }, /* @__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: {
1938
+ fontSize: "10px",
1939
+ fontWeight: "700",
1940
+ padding: "3px 9px",
1941
+ borderRadius: "6px",
1942
+ background: alpha(accent, 0.12),
1943
+ color: accent,
1944
+ border: `1px solid ${alpha(accent, 0.25)}`,
1945
+ textTransform: "capitalize"
1946
+ } }, type)), renderChart());
1947
+ };
1602
1948
  // Annotate the CommonJS export names for ESM import in node:
1603
1949
  0 && (module.exports = {
1604
1950
  Avatar,
1605
1951
  AvatarCard,
1952
+ Charts,
1606
1953
  CodeBlock,
1607
1954
  CustomInputField,
1608
1955
  DividerLine,
package/dist/index.mjs CHANGED
@@ -1543,9 +1543,355 @@ var Sidebar = ({
1543
1543
  background: accent
1544
1544
  } }), /* @__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)));
1545
1545
  };
1546
+
1547
+ // src/components/Charts/Charts.jsx
1548
+ import React23, { useState as useState16 } from "react";
1549
+ var Charts = ({
1550
+ type = "bar",
1551
+ data = [
1552
+ { label: "Jan", value: 40 },
1553
+ { label: "Feb", value: 70 },
1554
+ { label: "Mar", value: 55 },
1555
+ { label: "Apr", value: 90 },
1556
+ { label: "May", value: 65 },
1557
+ { label: "Jun", value: 80 },
1558
+ { label: "Jul", value: 100 },
1559
+ { label: "Aug", value: 30 }
1560
+ ],
1561
+ title = "Monthly Stats",
1562
+ accent = "#6366f1",
1563
+ bg = "#0f172a",
1564
+ radius = "16px",
1565
+ showGrid = true,
1566
+ showValues = true
1567
+ }) => {
1568
+ const [hovered, setHovered] = useState16(null);
1569
+ const alpha = (hex, op) => {
1570
+ const r = parseInt(hex.slice(1, 3), 16);
1571
+ const g = parseInt(hex.slice(3, 5), 16);
1572
+ const b = parseInt(hex.slice(5, 7), 16);
1573
+ return `rgba(${r},${g},${b},${op})`;
1574
+ };
1575
+ const max = Math.max(...data.map((d) => d.value));
1576
+ const min = Math.min(...data.map((d) => d.value));
1577
+ const W = 320;
1578
+ const H = 160;
1579
+ const padL = 28;
1580
+ const padR = 12;
1581
+ const padT = 16;
1582
+ const padB = 28;
1583
+ const chartW = W - padL - padR;
1584
+ const chartH = H - padT - padB;
1585
+ const getX = (i) => padL + i / (data.length - 1) * chartW;
1586
+ const getY = (v) => padT + chartH - (v - min) / (max - min || 1) * chartH;
1587
+ const points = data.map((d, i) => `${getX(i)},${getY(d.value)}`).join(" ");
1588
+ const areaPoints = `${padL},${padT + chartH} ` + points + ` ${getX(data.length - 1)},${padT + chartH}`;
1589
+ const gridLines = [0, 0.25, 0.5, 0.75, 1].map((t) => ({
1590
+ y: padT + chartH * (1 - t),
1591
+ val: Math.round(min + t * (max - min))
1592
+ }));
1593
+ const BarChart = () => {
1594
+ const barW = Math.min(28, chartW / data.length * 0.55);
1595
+ 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(
1596
+ "line",
1597
+ {
1598
+ x1: padL,
1599
+ y1: g.y,
1600
+ x2: W - padR,
1601
+ y2: g.y,
1602
+ stroke: "rgba(255,255,255,0.05)",
1603
+ strokeWidth: "1"
1604
+ }
1605
+ ), /* @__PURE__ */ React23.createElement(
1606
+ "text",
1607
+ {
1608
+ x: padL - 4,
1609
+ y: g.y + 4,
1610
+ textAnchor: "end",
1611
+ fill: "rgba(255,255,255,0.25)",
1612
+ fontSize: "9"
1613
+ },
1614
+ g.val
1615
+ ))), data.map((d, i) => {
1616
+ const x = padL + i / data.length * chartW + (chartW / data.length - barW) / 2;
1617
+ const barH = (d.value - min) / (max - min || 1) * chartH;
1618
+ const y = padT + chartH - barH;
1619
+ const isH = hovered === i;
1620
+ return /* @__PURE__ */ React23.createElement("g", { key: i, onMouseEnter: () => setHovered(i), onMouseLeave: () => setHovered(null) }, /* @__PURE__ */ React23.createElement(
1621
+ "rect",
1622
+ {
1623
+ x,
1624
+ y: padT,
1625
+ width: barW,
1626
+ height: chartH,
1627
+ fill: "transparent",
1628
+ rx: "4"
1629
+ }
1630
+ ), /* @__PURE__ */ React23.createElement(
1631
+ "rect",
1632
+ {
1633
+ x,
1634
+ y,
1635
+ width: barW,
1636
+ height: barH,
1637
+ fill: isH ? accent : alpha(accent, 0.55),
1638
+ rx: "4",
1639
+ style: { transition: "fill 0.15s" }
1640
+ }
1641
+ ), showValues && isH && /* @__PURE__ */ React23.createElement(
1642
+ "text",
1643
+ {
1644
+ x: x + barW / 2,
1645
+ y: y - 5,
1646
+ textAnchor: "middle",
1647
+ fill: "#fff",
1648
+ fontSize: "9",
1649
+ fontWeight: "700"
1650
+ },
1651
+ d.value
1652
+ ), /* @__PURE__ */ React23.createElement(
1653
+ "text",
1654
+ {
1655
+ x: x + barW / 2,
1656
+ y: H - 6,
1657
+ textAnchor: "middle",
1658
+ fill: "rgba(255,255,255,0.3)",
1659
+ fontSize: "9"
1660
+ },
1661
+ d.label
1662
+ ));
1663
+ }));
1664
+ };
1665
+ 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(
1666
+ "line",
1667
+ {
1668
+ x1: padL,
1669
+ y1: g.y,
1670
+ x2: W - padR,
1671
+ y2: g.y,
1672
+ stroke: "rgba(255,255,255,0.05)",
1673
+ strokeWidth: "1"
1674
+ }
1675
+ ), /* @__PURE__ */ React23.createElement(
1676
+ "text",
1677
+ {
1678
+ x: padL - 4,
1679
+ y: g.y + 4,
1680
+ textAnchor: "end",
1681
+ fill: "rgba(255,255,255,0.25)",
1682
+ fontSize: "9"
1683
+ },
1684
+ g.val
1685
+ ))), /* @__PURE__ */ React23.createElement("polygon", { points: areaPoints, fill: "url(#lg)" }), /* @__PURE__ */ React23.createElement(
1686
+ "polyline",
1687
+ {
1688
+ points,
1689
+ fill: "none",
1690
+ stroke: accent,
1691
+ strokeWidth: "2",
1692
+ strokeLinejoin: "round",
1693
+ strokeLinecap: "round"
1694
+ }
1695
+ ), data.map((d, i) => {
1696
+ const isH = hovered === i;
1697
+ 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(
1698
+ "circle",
1699
+ {
1700
+ cx: getX(i),
1701
+ cy: getY(d.value),
1702
+ r: isH ? 5 : 3,
1703
+ fill: isH ? "#fff" : accent,
1704
+ stroke: accent,
1705
+ strokeWidth: "2",
1706
+ style: { transition: "all 0.15s" }
1707
+ }
1708
+ ), showValues && isH && /* @__PURE__ */ React23.createElement(
1709
+ "text",
1710
+ {
1711
+ x: getX(i),
1712
+ y: getY(d.value) - 10,
1713
+ textAnchor: "middle",
1714
+ fill: "#fff",
1715
+ fontSize: "9",
1716
+ fontWeight: "700"
1717
+ },
1718
+ d.value
1719
+ ), /* @__PURE__ */ React23.createElement(
1720
+ "text",
1721
+ {
1722
+ x: getX(i),
1723
+ y: H - 6,
1724
+ textAnchor: "middle",
1725
+ fill: "rgba(255,255,255,0.3)",
1726
+ fontSize: "9"
1727
+ },
1728
+ d.label
1729
+ ));
1730
+ }));
1731
+ const PieChart = () => {
1732
+ var _a, _b;
1733
+ const cx = W / 2, cy = H / 2 - 4, r = Math.min(H, W) / 2 - 24;
1734
+ const total = data.reduce((s, d) => s + d.value, 0);
1735
+ const colors = [
1736
+ accent,
1737
+ alpha(accent, 0.75),
1738
+ alpha(accent, 0.55),
1739
+ alpha(accent, 0.4),
1740
+ alpha(accent, 0.3),
1741
+ alpha(accent, 0.2),
1742
+ alpha(accent, 0.12)
1743
+ ];
1744
+ let startAngle = -Math.PI / 2;
1745
+ const slices = data.map((d, i) => {
1746
+ const angle = d.value / total * 2 * Math.PI;
1747
+ const x1 = cx + r * Math.cos(startAngle);
1748
+ const y1 = cy + r * Math.sin(startAngle);
1749
+ const x2 = cx + r * Math.cos(startAngle + angle);
1750
+ const y2 = cy + r * Math.sin(startAngle + angle);
1751
+ const lx = cx + (r + 14) * Math.cos(startAngle + angle / 2);
1752
+ const ly = cy + (r + 14) * Math.sin(startAngle + angle / 2);
1753
+ const large = angle > Math.PI ? 1 : 0;
1754
+ const path = `M ${cx} ${cy} L ${x1} ${y1} A ${r} ${r} 0 ${large} 1 ${x2} ${y2} Z`;
1755
+ const slice = { path, color: colors[i % colors.length], d, angle, lx, ly, i };
1756
+ startAngle += angle;
1757
+ return slice;
1758
+ });
1759
+ 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(
1760
+ "path",
1761
+ {
1762
+ d: s.path,
1763
+ fill: s.color,
1764
+ stroke: bg,
1765
+ strokeWidth: "2",
1766
+ transform: hovered === s.i ? `translate(${Math.cos(s.angle / 2 - Math.PI / 2) * 4}, ${Math.sin(s.angle / 2 - Math.PI / 2) * 4})` : "",
1767
+ style: { transition: "transform 0.15s", cursor: "pointer" }
1768
+ }
1769
+ ))), hovered !== null && /* @__PURE__ */ React23.createElement(React23.Fragment, null, /* @__PURE__ */ React23.createElement(
1770
+ "text",
1771
+ {
1772
+ x: cx,
1773
+ y: cy - 8,
1774
+ textAnchor: "middle",
1775
+ fill: "#fff",
1776
+ fontSize: "16",
1777
+ fontWeight: "800"
1778
+ },
1779
+ (_a = data[hovered]) == null ? void 0 : _a.value
1780
+ ), /* @__PURE__ */ React23.createElement(
1781
+ "text",
1782
+ {
1783
+ x: cx,
1784
+ y: cy + 10,
1785
+ textAnchor: "middle",
1786
+ fill: "rgba(255,255,255,0.4)",
1787
+ fontSize: "9"
1788
+ },
1789
+ (_b = data[hovered]) == null ? void 0 : _b.label
1790
+ )), hovered === null && /* @__PURE__ */ React23.createElement(
1791
+ "text",
1792
+ {
1793
+ x: cx,
1794
+ y: cy + 5,
1795
+ textAnchor: "middle",
1796
+ fill: "rgba(255,255,255,0.2)",
1797
+ fontSize: "9"
1798
+ },
1799
+ "Hover slice"
1800
+ ));
1801
+ };
1802
+ 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(
1803
+ "line",
1804
+ {
1805
+ x1: padL,
1806
+ y1: g.y,
1807
+ x2: W - padR,
1808
+ y2: g.y,
1809
+ stroke: "rgba(255,255,255,0.05)",
1810
+ strokeWidth: "1"
1811
+ }
1812
+ ), /* @__PURE__ */ React23.createElement(
1813
+ "text",
1814
+ {
1815
+ x: padL - 4,
1816
+ y: g.y + 4,
1817
+ textAnchor: "end",
1818
+ fill: "rgba(255,255,255,0.25)",
1819
+ fontSize: "9"
1820
+ },
1821
+ g.val
1822
+ ))), /* @__PURE__ */ React23.createElement("polygon", { points: areaPoints, fill: "url(#ag)" }), /* @__PURE__ */ React23.createElement(
1823
+ "polyline",
1824
+ {
1825
+ points,
1826
+ fill: "none",
1827
+ stroke: accent,
1828
+ strokeWidth: "1.5",
1829
+ strokeLinejoin: "round",
1830
+ strokeLinecap: "round"
1831
+ }
1832
+ ), 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(
1833
+ "line",
1834
+ {
1835
+ x1: getX(i),
1836
+ y1: padT,
1837
+ x2: getX(i),
1838
+ y2: padT + chartH,
1839
+ stroke: "rgba(255,255,255,0.1)",
1840
+ strokeWidth: "1",
1841
+ strokeDasharray: "3 3"
1842
+ }
1843
+ ), showValues && /* @__PURE__ */ React23.createElement(
1844
+ "text",
1845
+ {
1846
+ x: getX(i),
1847
+ y: getY(d.value) - 10,
1848
+ textAnchor: "middle",
1849
+ fill: "#fff",
1850
+ fontSize: "9",
1851
+ fontWeight: "700"
1852
+ },
1853
+ d.value
1854
+ )), /* @__PURE__ */ React23.createElement(
1855
+ "text",
1856
+ {
1857
+ x: getX(i),
1858
+ y: H - 6,
1859
+ textAnchor: "middle",
1860
+ fill: "rgba(255,255,255,0.3)",
1861
+ fontSize: "9"
1862
+ },
1863
+ d.label
1864
+ ))));
1865
+ const renderChart = () => {
1866
+ if (type === "line") return /* @__PURE__ */ React23.createElement(LineChart, null);
1867
+ if (type === "pie") return /* @__PURE__ */ React23.createElement(PieChart, null);
1868
+ if (type === "area") return /* @__PURE__ */ React23.createElement(AreaChart, null);
1869
+ return /* @__PURE__ */ React23.createElement(BarChart, null);
1870
+ };
1871
+ return /* @__PURE__ */ React23.createElement("div", { style: {
1872
+ background: bg,
1873
+ borderRadius: radius,
1874
+ padding: "20px",
1875
+ fontFamily: "system-ui, sans-serif",
1876
+ border: "1px solid rgba(255,255,255,0.07)",
1877
+ width: "100%",
1878
+ maxWidth: "360px",
1879
+ boxSizing: "border-box"
1880
+ } }, /* @__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: {
1881
+ fontSize: "10px",
1882
+ fontWeight: "700",
1883
+ padding: "3px 9px",
1884
+ borderRadius: "6px",
1885
+ background: alpha(accent, 0.12),
1886
+ color: accent,
1887
+ border: `1px solid ${alpha(accent, 0.25)}`,
1888
+ textTransform: "capitalize"
1889
+ } }, type)), renderChart());
1890
+ };
1546
1891
  export {
1547
1892
  Avatar,
1548
1893
  AvatarCard,
1894
+ Charts,
1549
1895
  CodeBlock,
1550
1896
  CustomInputField,
1551
1897
  DividerLine,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "virtual-ui-lib",
3
- "version": "1.0.62",
3
+ "version": "1.0.63",
4
4
  "description": "Virtual UI React Component Library",
5
5
  "author": "Ankush",
6
6
  "license": "ISC",