virtual-ui-lib 1.0.37 → 1.0.38
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.
- package/dist/index.js +37 -0
- package/dist/index.mjs +36 -0
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -29,6 +29,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
|
|
|
29
29
|
// src/index.js
|
|
30
30
|
var index_exports = {};
|
|
31
31
|
__export(index_exports, {
|
|
32
|
+
StatCard: () => StatCard,
|
|
32
33
|
ToastNotification: () => ToastNotification
|
|
33
34
|
});
|
|
34
35
|
module.exports = __toCommonJS(index_exports);
|
|
@@ -126,7 +127,43 @@ var ToastNotification = ({
|
|
|
126
127
|
transition: "width 0.1s linear"
|
|
127
128
|
} })));
|
|
128
129
|
};
|
|
130
|
+
|
|
131
|
+
// src/components/StatCard/StatCard.jsx
|
|
132
|
+
var import_react2 = __toESM(require("react"));
|
|
133
|
+
var StatCard = ({
|
|
134
|
+
title = "Revenue",
|
|
135
|
+
metric = 1200,
|
|
136
|
+
change = 15,
|
|
137
|
+
bg = "#0f172a",
|
|
138
|
+
accent = "#059669",
|
|
139
|
+
negativeAccent = "#ef4444",
|
|
140
|
+
radius = "16px"
|
|
141
|
+
}) => {
|
|
142
|
+
const [count, setCount] = (0, import_react2.useState)(0);
|
|
143
|
+
(0, import_react2.useEffect)(() => {
|
|
144
|
+
let countUp = 0;
|
|
145
|
+
const interval = setInterval(() => {
|
|
146
|
+
if (countUp < metric) {
|
|
147
|
+
countUp += Math.ceil(metric / 100);
|
|
148
|
+
setCount(countUp);
|
|
149
|
+
} else {
|
|
150
|
+
clearInterval(interval);
|
|
151
|
+
}
|
|
152
|
+
}, 30);
|
|
153
|
+
return () => clearInterval(interval);
|
|
154
|
+
}, [metric]);
|
|
155
|
+
return /* @__PURE__ */ import_react2.default.createElement("div", { style: { background: bg, borderRadius: radius, padding: "24px", width: "300px", color: "white", boxShadow: "0 10px 30px rgba(0,0,0,0.5)", fontFamily: "system-ui, sans-serif", textAlign: "center" } }, /* @__PURE__ */ import_react2.default.createElement("h3", { style: { margin: "0 0 10px", fontSize: "16px", fontWeight: "600" } }, title), /* @__PURE__ */ import_react2.default.createElement("div", { style: { fontSize: "40px", fontWeight: "700" } }, count), /* @__PURE__ */ import_react2.default.createElement("span", { style: {
|
|
156
|
+
display: "inline-block",
|
|
157
|
+
padding: "5px 12px",
|
|
158
|
+
borderRadius: "10px",
|
|
159
|
+
background: change >= 0 ? accent : negativeAccent,
|
|
160
|
+
color: "white",
|
|
161
|
+
fontSize: "14px",
|
|
162
|
+
margin: "10px 0"
|
|
163
|
+
} }, change >= 0 ? "+" + change + "%" : change + "%"), /* @__PURE__ */ import_react2.default.createElement("svg", { style: { marginTop: "12px" }, width: "100%", height: "30", viewBox: "0 0 100 30", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ import_react2.default.createElement("polyline", { fill: "none", stroke: change >= 0 ? accent : negativeAccent, strokeWidth: "2", points: "0,15 10,10 20,20 30,15 40,22 50,8 60,18 70,15 80,18 90,10 100,15" })));
|
|
164
|
+
};
|
|
129
165
|
// Annotate the CommonJS export names for ESM import in node:
|
|
130
166
|
0 && (module.exports = {
|
|
167
|
+
StatCard,
|
|
131
168
|
ToastNotification
|
|
132
169
|
});
|
package/dist/index.mjs
CHANGED
|
@@ -91,6 +91,42 @@ var ToastNotification = ({
|
|
|
91
91
|
transition: "width 0.1s linear"
|
|
92
92
|
} })));
|
|
93
93
|
};
|
|
94
|
+
|
|
95
|
+
// src/components/StatCard/StatCard.jsx
|
|
96
|
+
import React2, { useEffect as useEffect2, useState as useState2 } from "react";
|
|
97
|
+
var StatCard = ({
|
|
98
|
+
title = "Revenue",
|
|
99
|
+
metric = 1200,
|
|
100
|
+
change = 15,
|
|
101
|
+
bg = "#0f172a",
|
|
102
|
+
accent = "#059669",
|
|
103
|
+
negativeAccent = "#ef4444",
|
|
104
|
+
radius = "16px"
|
|
105
|
+
}) => {
|
|
106
|
+
const [count, setCount] = useState2(0);
|
|
107
|
+
useEffect2(() => {
|
|
108
|
+
let countUp = 0;
|
|
109
|
+
const interval = setInterval(() => {
|
|
110
|
+
if (countUp < metric) {
|
|
111
|
+
countUp += Math.ceil(metric / 100);
|
|
112
|
+
setCount(countUp);
|
|
113
|
+
} else {
|
|
114
|
+
clearInterval(interval);
|
|
115
|
+
}
|
|
116
|
+
}, 30);
|
|
117
|
+
return () => clearInterval(interval);
|
|
118
|
+
}, [metric]);
|
|
119
|
+
return /* @__PURE__ */ React2.createElement("div", { style: { background: bg, borderRadius: radius, padding: "24px", width: "300px", color: "white", boxShadow: "0 10px 30px rgba(0,0,0,0.5)", fontFamily: "system-ui, sans-serif", textAlign: "center" } }, /* @__PURE__ */ React2.createElement("h3", { style: { margin: "0 0 10px", fontSize: "16px", fontWeight: "600" } }, title), /* @__PURE__ */ React2.createElement("div", { style: { fontSize: "40px", fontWeight: "700" } }, count), /* @__PURE__ */ React2.createElement("span", { style: {
|
|
120
|
+
display: "inline-block",
|
|
121
|
+
padding: "5px 12px",
|
|
122
|
+
borderRadius: "10px",
|
|
123
|
+
background: change >= 0 ? accent : negativeAccent,
|
|
124
|
+
color: "white",
|
|
125
|
+
fontSize: "14px",
|
|
126
|
+
margin: "10px 0"
|
|
127
|
+
} }, change >= 0 ? "+" + change + "%" : change + "%"), /* @__PURE__ */ React2.createElement("svg", { style: { marginTop: "12px" }, width: "100%", height: "30", viewBox: "0 0 100 30", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React2.createElement("polyline", { fill: "none", stroke: change >= 0 ? accent : negativeAccent, strokeWidth: "2", points: "0,15 10,10 20,20 30,15 40,22 50,8 60,18 70,15 80,18 90,10 100,15" })));
|
|
128
|
+
};
|
|
94
129
|
export {
|
|
130
|
+
StatCard,
|
|
95
131
|
ToastNotification
|
|
96
132
|
};
|