virtual-ui-lib 1.0.52 → 1.0.54

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 +152 -0
  2. package/dist/index.mjs +203 -52
  3. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -42,6 +42,7 @@ __export(index_exports, {
42
42
  SkeletonLoader: () => SkeletonLoader,
43
43
  SmartButton: () => SmartButton,
44
44
  StatCard: () => StatCard,
45
+ StatsCard: () => StatsCard,
45
46
  Tabs: () => Tabs,
46
47
  TextArea: () => TextArea,
47
48
  ToastNotification: () => ToastNotification
@@ -697,6 +698,156 @@ var Tabs = ({
697
698
  tab.label
698
699
  ))), /* @__PURE__ */ import_react16.default.createElement("div", { style: { padding: "16px", color: textColor } }, /* @__PURE__ */ import_react16.default.createElement("h4", { style: { margin: "0 0 8px", fontSize: "16px", fontWeight: "600" } }, tabs[activeTab].label), /* @__PURE__ */ import_react16.default.createElement("p", { style: { margin: "0", fontSize: "14px" } }, tabs[activeTab].content)));
699
700
  };
701
+
702
+ // src/components/StatsCard/StatsCard.jsx
703
+ var StatsCard = ({
704
+ label = "Total Revenue",
705
+ value = "$48,295",
706
+ trend = 12.4,
707
+ progress = 72,
708
+ footerText = "vs last month",
709
+ accentColor = "#6366f1",
710
+ variant = "dark",
711
+ icon = "chart"
712
+ }) => {
713
+ const isUp = trend >= 0;
714
+ const variants = {
715
+ dark: { bg: "rgba(15,15,30,0.95)", border: "rgba(255,255,255,0.1)", text: "#fff" },
716
+ glass: { bg: "rgba(255,255,255,0.07)", border: "rgba(255,255,255,0.15)", text: "#fff" },
717
+ light: { bg: "rgba(255,255,255,0.95)", border: "rgba(0,0,0,0.08)", text: "#0f0f1e" }
718
+ };
719
+ const v = variants[variant] || variants.dark;
720
+ const alpha = (hex, op) => {
721
+ const r = parseInt(hex.slice(1, 3), 16);
722
+ const g = parseInt(hex.slice(3, 5), 16);
723
+ const b = parseInt(hex.slice(5, 7), 16);
724
+ return `rgba(${r},${g},${b},${op})`;
725
+ };
726
+ const icons = {
727
+ chart: "M3 3v18h18M7 16l4-4 4 4 4-4",
728
+ users: "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",
729
+ zap: "M13 2L3 14h9l-1 8 10-12h-9l1-8z",
730
+ box: "M21 16V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4A2 2 0 0021 16z"
731
+ };
732
+ const s = {
733
+ card: {
734
+ width: 240,
735
+ borderRadius: 20,
736
+ padding: 20,
737
+ position: "relative",
738
+ overflow: "hidden",
739
+ background: v.bg,
740
+ border: `1px solid ${v.border}`,
741
+ color: v.text,
742
+ backdropFilter: variant === "glass" ? "blur(12px)" : "none",
743
+ fontFamily: "'DM Sans', sans-serif"
744
+ },
745
+ glow: {
746
+ position: "absolute",
747
+ top: -30,
748
+ right: -30,
749
+ width: 100,
750
+ height: 100,
751
+ borderRadius: "50%",
752
+ background: alpha(accentColor, 0.4),
753
+ filter: "blur(30px)",
754
+ pointerEvents: "none",
755
+ opacity: 0.5
756
+ },
757
+ top: {
758
+ display: "flex",
759
+ alignItems: "flex-start",
760
+ justifyContent: "space-between",
761
+ marginBottom: 16
762
+ },
763
+ iconWrap: {
764
+ width: 40,
765
+ height: 40,
766
+ borderRadius: 12,
767
+ display: "flex",
768
+ alignItems: "center",
769
+ justifyContent: "center",
770
+ background: alpha(accentColor, 0.18),
771
+ border: `1px solid ${alpha(accentColor, 0.35)}`
772
+ },
773
+ trendBadge: {
774
+ display: "flex",
775
+ alignItems: "center",
776
+ gap: 3,
777
+ padding: "3px 8px",
778
+ borderRadius: 20,
779
+ fontSize: 11,
780
+ fontWeight: 700,
781
+ background: isUp ? "rgba(16,185,129,0.15)" : "rgba(244,63,94,0.15)",
782
+ color: isUp ? "#10b981" : "#f43f5e"
783
+ },
784
+ value: {
785
+ fontSize: 32,
786
+ fontWeight: 800,
787
+ marginBottom: 2,
788
+ lineHeight: 1,
789
+ color: v.text
790
+ },
791
+ label: {
792
+ fontSize: 12,
793
+ fontWeight: 500,
794
+ opacity: 0.6,
795
+ marginBottom: 12
796
+ },
797
+ barTrack: {
798
+ height: 4,
799
+ borderRadius: 2,
800
+ overflow: "hidden",
801
+ marginBottom: 12,
802
+ background: alpha(accentColor, 0.15)
803
+ },
804
+ barFill: {
805
+ height: "100%",
806
+ borderRadius: 2,
807
+ width: `${Math.min(100, Math.max(0, progress))}%`,
808
+ background: `linear-gradient(90deg, ${accentColor}, ${alpha(accentColor, 0.7)})`,
809
+ transition: "width 0.5s ease"
810
+ },
811
+ footer: {
812
+ display: "flex",
813
+ alignItems: "center",
814
+ justifyContent: "space-between"
815
+ },
816
+ footerText: { fontSize: 11, opacity: 0.5 },
817
+ dot: {
818
+ width: 6,
819
+ height: 6,
820
+ borderRadius: "50%",
821
+ background: accentColor,
822
+ opacity: 0.7
823
+ }
824
+ };
825
+ return /* @__PURE__ */ React.createElement("div", { style: s.card }, /* @__PURE__ */ React.createElement("div", { style: s.glow }), /* @__PURE__ */ React.createElement("div", { style: s.top }, /* @__PURE__ */ React.createElement("div", { style: s.iconWrap }, /* @__PURE__ */ React.createElement(
826
+ "svg",
827
+ {
828
+ width: "18",
829
+ height: "18",
830
+ viewBox: "0 0 24 24",
831
+ fill: "none",
832
+ stroke: accentColor,
833
+ strokeWidth: "2",
834
+ strokeLinecap: "round",
835
+ strokeLinejoin: "round"
836
+ },
837
+ /* @__PURE__ */ React.createElement("path", { d: icons[icon] || icons.chart })
838
+ )), /* @__PURE__ */ React.createElement("div", { style: s.trendBadge }, /* @__PURE__ */ React.createElement(
839
+ "svg",
840
+ {
841
+ width: "10",
842
+ height: "10",
843
+ viewBox: "0 0 24 24",
844
+ fill: "none",
845
+ stroke: "currentColor",
846
+ strokeWidth: "3"
847
+ },
848
+ /* @__PURE__ */ React.createElement("polyline", { points: isUp ? "18 15 12 9 6 15" : "6 9 12 15 18 9" })
849
+ ), Math.abs(trend).toFixed(1), "%")), /* @__PURE__ */ React.createElement("div", { style: s.value }, value), /* @__PURE__ */ React.createElement("div", { style: s.label }, label), /* @__PURE__ */ React.createElement("div", { style: s.barTrack }, /* @__PURE__ */ React.createElement("div", { style: s.barFill })), /* @__PURE__ */ React.createElement("div", { style: s.footer }, /* @__PURE__ */ React.createElement("span", { style: s.footerText }, footerText), /* @__PURE__ */ React.createElement("div", { style: s.dot })));
850
+ };
700
851
  // Annotate the CommonJS export names for ESM import in node:
701
852
  0 && (module.exports = {
702
853
  Avatar,
@@ -712,6 +863,7 @@ var Tabs = ({
712
863
  SkeletonLoader,
713
864
  SmartButton,
714
865
  StatCard,
866
+ StatsCard,
715
867
  Tabs,
716
868
  TextArea,
717
869
  ToastNotification
package/dist/index.mjs CHANGED
@@ -1,5 +1,5 @@
1
1
  // src/components/ToastNotification/ToastNotification.jsx
2
- import React, { useEffect, useState } from "react";
2
+ import React2, { useEffect, useState } from "react";
3
3
  var ToastNotification = ({
4
4
  type = "success",
5
5
  title = "Success",
@@ -48,7 +48,7 @@ var ToastNotification = ({
48
48
  }
49
49
  return { background: bg, icon };
50
50
  };
51
- return /* @__PURE__ */ React.createElement("div", { style: {
51
+ return /* @__PURE__ */ React2.createElement("div", { style: {
52
52
  position: "fixed",
53
53
  bottom: "20px",
54
54
  right: "20px",
@@ -62,7 +62,7 @@ var ToastNotification = ({
62
62
  boxShadow: "0 4px 20px rgba(0,0,0,0.2)",
63
63
  fontFamily: "system-ui, sans-serif",
64
64
  zIndex: 9999
65
- } }, /* @__PURE__ */ React.createElement("div", { style: { display: "flex", alignItems: "center", marginBottom: "8px" } }, /* @__PURE__ */ React.createElement("div", { style: {
65
+ } }, /* @__PURE__ */ React2.createElement("div", { style: { display: "flex", alignItems: "center", marginBottom: "8px" } }, /* @__PURE__ */ React2.createElement("div", { style: {
66
66
  width: "24px",
67
67
  height: "24px",
68
68
  borderRadius: "50%",
@@ -71,20 +71,20 @@ var ToastNotification = ({
71
71
  alignItems: "center",
72
72
  justifyContent: "center",
73
73
  marginRight: "8px"
74
- } }, /* @__PURE__ */ React.createElement("span", { style: { color: getStyles().background, fontSize: "16px" } }, getStyles().icon)), /* @__PURE__ */ React.createElement("h4", { style: { margin: 0, fontSize: "16px", fontWeight: "600", color: "white" } }, title)), /* @__PURE__ */ React.createElement("p", { style: { margin: "0 0 12px", fontSize: "14px", color: "#f1f5f9" } }, message), /* @__PURE__ */ React.createElement("button", { onClick: onClose, style: {
74
+ } }, /* @__PURE__ */ React2.createElement("span", { style: { color: getStyles().background, fontSize: "16px" } }, getStyles().icon)), /* @__PURE__ */ React2.createElement("h4", { style: { margin: 0, fontSize: "16px", fontWeight: "600", color: "white" } }, title)), /* @__PURE__ */ React2.createElement("p", { style: { margin: "0 0 12px", fontSize: "14px", color: "#f1f5f9" } }, message), /* @__PURE__ */ React2.createElement("button", { onClick: onClose, style: {
75
75
  background: "transparent",
76
76
  color: "white",
77
77
  border: "none",
78
78
  cursor: "pointer",
79
79
  fontSize: "14px",
80
80
  fontWeight: "600"
81
- } }, "Close"), /* @__PURE__ */ React.createElement("div", { style: {
81
+ } }, "Close"), /* @__PURE__ */ React2.createElement("div", { style: {
82
82
  height: "4px",
83
83
  background: "rgba(255, 255, 255, 0.3)",
84
84
  borderRadius: "8px",
85
85
  overflow: "hidden",
86
86
  marginTop: "12px"
87
- } }, /* @__PURE__ */ React.createElement("div", { style: {
87
+ } }, /* @__PURE__ */ React2.createElement("div", { style: {
88
88
  width: progress + "%",
89
89
  height: "100%",
90
90
  background: "white",
@@ -93,7 +93,7 @@ var ToastNotification = ({
93
93
  };
94
94
 
95
95
  // src/components/StatCard/StatCard.jsx
96
- import React2, { useEffect as useEffect2, useState as useState2 } from "react";
96
+ import React3, { useEffect as useEffect2, useState as useState2 } from "react";
97
97
  var StatCard = ({
98
98
  title = "Revenue",
99
99
  metric = 1200,
@@ -116,7 +116,7 @@ var StatCard = ({
116
116
  }, 30);
117
117
  return () => clearInterval(interval);
118
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: {
119
+ return /* @__PURE__ */ React3.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__ */ React3.createElement("h3", { style: { margin: "0 0 10px", fontSize: "16px", fontWeight: "600" } }, title), /* @__PURE__ */ React3.createElement("div", { style: { fontSize: "40px", fontWeight: "700" } }, count), /* @__PURE__ */ React3.createElement("span", { style: {
120
120
  display: "inline-block",
121
121
  padding: "5px 12px",
122
122
  borderRadius: "10px",
@@ -124,11 +124,11 @@ var StatCard = ({
124
124
  color: "white",
125
125
  fontSize: "14px",
126
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" })));
127
+ } }, change >= 0 ? "+" + change + "%" : change + "%"), /* @__PURE__ */ React3.createElement("svg", { style: { marginTop: "12px" }, width: "100%", height: "30", viewBox: "0 0 100 30", xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React3.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
128
  };
129
129
 
130
130
  // src/components/OtpInput/OtpInput.jsx
131
- import React3, { useEffect as useEffect3, useRef, useState as useState3 } from "react";
131
+ import React4, { useEffect as useEffect3, useRef, useState as useState3 } from "react";
132
132
  var OtpInput = ({
133
133
  length = 6,
134
134
  boxSize = "48px",
@@ -167,7 +167,7 @@ var OtpInput = ({
167
167
  useEffect3(() => {
168
168
  inputsRef.current[0].focus();
169
169
  }, []);
170
- return /* @__PURE__ */ React3.createElement("div", { style: { display: "flex", gap: "10px", justifyContent: "center", padding: "20px", background: bgColor, borderRadius: radius, border: "1px solid rgba(255,255,255,0.1)", boxShadow: "0 4px 20px rgba(0,0,0,0.6)" }, onPaste: handlePaste }, otp.map((value, index) => /* @__PURE__ */ React3.createElement(
170
+ return /* @__PURE__ */ React4.createElement("div", { style: { display: "flex", gap: "10px", justifyContent: "center", padding: "20px", background: bgColor, borderRadius: radius, border: "1px solid rgba(255,255,255,0.1)", boxShadow: "0 4px 20px rgba(0,0,0,0.6)" }, onPaste: handlePaste }, otp.map((value, index) => /* @__PURE__ */ React4.createElement(
171
171
  "input",
172
172
  {
173
173
  key: index,
@@ -195,11 +195,11 @@ var OtpInput = ({
195
195
  outline: "none"
196
196
  }
197
197
  }
198
- )), otp.join("").length === length && /* @__PURE__ */ React3.createElement("span", { style: { color: "#4ade80", fontSize: "20px" } }, "\u2705"));
198
+ )), otp.join("").length === length && /* @__PURE__ */ React4.createElement("span", { style: { color: "#4ade80", fontSize: "20px" } }, "\u2705"));
199
199
  };
200
200
 
201
201
  // src/components/CodeBlock/CodeBlock.jsx
202
- import React4, { useState as useState4 } from "react";
202
+ import React5, { useState as useState4 } from "react";
203
203
  var CodeBlock = ({
204
204
  code = "const hello = 'Hello, world!';\nconsole.log(hello);",
205
205
  language = "JavaScript",
@@ -218,13 +218,13 @@ var CodeBlock = ({
218
218
  });
219
219
  };
220
220
  const formatCode = () => {
221
- return code.split("\n").map((line, index) => /* @__PURE__ */ React4.createElement("div", { key: index, style: { display: "flex" } }, showLineNumbers && /* @__PURE__ */ React4.createElement("span", { style: { marginRight: "10px", color: "#58a6ff" } }, index + 1), /* @__PURE__ */ React4.createElement("span", { style: { color: tokenColors.string } }, line.replace(/(\'.*?\')/g, (match) => `<span style='color:${tokenColors.string}'>${match}</span>`))));
221
+ return code.split("\n").map((line, index) => /* @__PURE__ */ React5.createElement("div", { key: index, style: { display: "flex" } }, showLineNumbers && /* @__PURE__ */ React5.createElement("span", { style: { marginRight: "10px", color: "#58a6ff" } }, index + 1), /* @__PURE__ */ React5.createElement("span", { style: { color: tokenColors.string } }, line.replace(/(\'.*?\')/g, (match) => `<span style='color:${tokenColors.string}'>${match}</span>`))));
222
222
  };
223
- return /* @__PURE__ */ React4.createElement("div", { style: { background: bg, borderRadius: "8px", padding: "16px", fontFamily: "monospace", position: "relative" } }, filename && /* @__PURE__ */ React4.createElement("div", { style: { color: textColor, fontWeight: "bold", marginBottom: "8px" } }, filename), /* @__PURE__ */ React4.createElement("div", { style: { overflowX: wrapWords ? "auto" : "hidden", whiteSpace: wrapWords ? "normal" : "pre" } }, formatCode()), /* @__PURE__ */ React4.createElement("button", { onClick: handleCopy, style: { position: "absolute", top: "10px", right: "10px", background: copied ? "#28a745" : "#58a6ff", color: "white", border: "none", borderRadius: "4px", padding: "8px 12px", cursor: "pointer", fontSize: "14px", marginLeft: "10px" } }, copied ? "\u2713 Copied" : "Copy"), /* @__PURE__ */ React4.createElement("button", { onClick: () => wrapWords = !wrapWords, style: { position: "absolute", top: "10px", right: "90px", background: "#58a6ff", color: "white", border: "none", borderRadius: "4px", padding: "8px 12px", cursor: "pointer", fontSize: "14px" } }, wrapWords ? "Wrap Off" : "Wrap On"));
223
+ return /* @__PURE__ */ React5.createElement("div", { style: { background: bg, borderRadius: "8px", padding: "16px", fontFamily: "monospace", position: "relative" } }, filename && /* @__PURE__ */ React5.createElement("div", { style: { color: textColor, fontWeight: "bold", marginBottom: "8px" } }, filename), /* @__PURE__ */ React5.createElement("div", { style: { overflowX: wrapWords ? "auto" : "hidden", whiteSpace: wrapWords ? "normal" : "pre" } }, formatCode()), /* @__PURE__ */ React5.createElement("button", { onClick: handleCopy, style: { position: "absolute", top: "10px", right: "10px", background: copied ? "#28a745" : "#58a6ff", color: "white", border: "none", borderRadius: "4px", padding: "8px 12px", cursor: "pointer", fontSize: "14px", marginLeft: "10px" } }, copied ? "\u2713 Copied" : "Copy"), /* @__PURE__ */ React5.createElement("button", { onClick: () => wrapWords = !wrapWords, style: { position: "absolute", top: "10px", right: "90px", background: "#58a6ff", color: "white", border: "none", borderRadius: "4px", padding: "8px 12px", cursor: "pointer", fontSize: "14px" } }, wrapWords ? "Wrap Off" : "Wrap On"));
224
224
  };
225
225
 
226
226
  // src/components/SmartButton/SmartButton.jsx
227
- import React5 from "react";
227
+ import React6 from "react";
228
228
  var SmartButton = ({
229
229
  buttonText = "Submit",
230
230
  isLoading = false,
@@ -241,7 +241,7 @@ var SmartButton = ({
241
241
  }) => {
242
242
  const bgColor = success ? "#059669" : error ? "#ef4444" : bg;
243
243
  const cursorStyle = isDisabled ? "not-allowed" : "pointer";
244
- return /* @__PURE__ */ React5.createElement(
244
+ return /* @__PURE__ */ React6.createElement(
245
245
  "button",
246
246
  {
247
247
  onClick: !isDisabled && !isLoading ? onClick : () => {
@@ -265,12 +265,12 @@ var SmartButton = ({
265
265
  e.currentTarget.style.background = bgColor;
266
266
  }
267
267
  },
268
- isLoading ? /* @__PURE__ */ React5.createElement("span", null, "Loading...") : /* @__PURE__ */ React5.createElement(React5.Fragment, null, icon && /* @__PURE__ */ React5.createElement("span", { style: { marginRight: "8px" } }, icon), buttonText)
268
+ isLoading ? /* @__PURE__ */ React6.createElement("span", null, "Loading...") : /* @__PURE__ */ React6.createElement(React6.Fragment, null, icon && /* @__PURE__ */ React6.createElement("span", { style: { marginRight: "8px" } }, icon), buttonText)
269
269
  );
270
270
  };
271
271
 
272
272
  // src/components/CustomInputField/CustomInputField.jsx
273
- import React6, { useState as useState5 } from "react";
273
+ import React7, { useState as useState5 } from "react";
274
274
  var CustomInputField = ({
275
275
  label = "Label",
276
276
  placeholder = "Enter text...",
@@ -286,7 +286,7 @@ var CustomInputField = ({
286
286
  }
287
287
  }) => {
288
288
  const [isFocused, setIsFocused] = useState5(false);
289
- return /* @__PURE__ */ React6.createElement("div", { style: { margin: "16px 0" } }, /* @__PURE__ */ React6.createElement("label", { style: { color: textColor, marginBottom: "4px", display: "block" } }, label), /* @__PURE__ */ React6.createElement(
289
+ return /* @__PURE__ */ React7.createElement("div", { style: { margin: "16px 0" } }, /* @__PURE__ */ React7.createElement("label", { style: { color: textColor, marginBottom: "4px", display: "block" } }, label), /* @__PURE__ */ React7.createElement(
290
290
  "input",
291
291
  {
292
292
  type: "text",
@@ -305,11 +305,11 @@ var CustomInputField = ({
305
305
  width: "100%"
306
306
  }
307
307
  }
308
- ), errorMessage && /* @__PURE__ */ React6.createElement("p", { style: { color: "red", margin: "4px 0 0 0" } }, errorMessage), helperText && /* @__PURE__ */ React6.createElement("p", { style: { color: textColor, margin: "4px 0 0 0" } }, helperText));
308
+ ), errorMessage && /* @__PURE__ */ React7.createElement("p", { style: { color: "red", margin: "4px 0 0 0" } }, errorMessage), helperText && /* @__PURE__ */ React7.createElement("p", { style: { color: textColor, margin: "4px 0 0 0" } }, helperText));
309
309
  };
310
310
 
311
311
  // src/components/TextArea/TextArea.jsx
312
- import React7, { useState as useState6 } from "react";
312
+ import React8, { useState as useState6 } from "react";
313
313
  var TextArea = ({
314
314
  label = "Label",
315
315
  placeholder = "Type here...",
@@ -328,7 +328,7 @@ var TextArea = ({
328
328
  setCurrentValue(e.target.value);
329
329
  onChange(e.target.value);
330
330
  };
331
- return /* @__PURE__ */ React7.createElement("div", { style: { margin: "16px 0" } }, /* @__PURE__ */ React7.createElement("label", { style: { color: textColor, marginBottom: "8px", display: "block" } }, label), /* @__PURE__ */ React7.createElement(
331
+ return /* @__PURE__ */ React8.createElement("div", { style: { margin: "16px 0" } }, /* @__PURE__ */ React8.createElement("label", { style: { color: textColor, marginBottom: "8px", display: "block" } }, label), /* @__PURE__ */ React8.createElement(
332
332
  "textarea",
333
333
  {
334
334
  value: currentValue,
@@ -347,11 +347,11 @@ var TextArea = ({
347
347
  transition: "border-color 0.3s"
348
348
  }
349
349
  }
350
- ), /* @__PURE__ */ React7.createElement("div", { style: { color: textColor, marginTop: "8px" } }, currentValue.length, "/", maxLength));
350
+ ), /* @__PURE__ */ React8.createElement("div", { style: { color: textColor, marginTop: "8px" } }, currentValue.length, "/", maxLength));
351
351
  };
352
352
 
353
353
  // src/components/SearchBar/SearchBar.jsx
354
- import React8, { useState as useState7 } from "react";
354
+ import React9, { useState as useState7 } from "react";
355
355
  var SearchBar = ({
356
356
  placeholder = "Search...",
357
357
  bg = "#1e293b",
@@ -373,7 +373,7 @@ var SearchBar = ({
373
373
  setQuery("");
374
374
  onClear();
375
375
  };
376
- return /* @__PURE__ */ React8.createElement("div", { style: { position: "relative", width: "100%" } }, /* @__PURE__ */ React8.createElement(
376
+ return /* @__PURE__ */ React9.createElement("div", { style: { position: "relative", width: "100%" } }, /* @__PURE__ */ React9.createElement(
377
377
  "input",
378
378
  {
379
379
  value: query,
@@ -390,7 +390,7 @@ var SearchBar = ({
390
390
  outline: "none"
391
391
  }
392
392
  }
393
- ), query && /* @__PURE__ */ React8.createElement("button", { onClick: handleClear, style: {
393
+ ), query && /* @__PURE__ */ React9.createElement("button", { onClick: handleClear, style: {
394
394
  position: "absolute",
395
395
  right: "10px",
396
396
  top: "50%",
@@ -399,12 +399,12 @@ var SearchBar = ({
399
399
  color: accent,
400
400
  border: "none",
401
401
  cursor: "pointer"
402
- } }, "Clear"), loading && /* @__PURE__ */ React8.createElement("div", { style: {
402
+ } }, "Clear"), loading && /* @__PURE__ */ React9.createElement("div", { style: {
403
403
  position: "absolute",
404
404
  left: "10px",
405
405
  top: "50%",
406
406
  transform: "translateY(-50%)"
407
- } }, "Loading..."), suggestions.length > 0 && !loading && /* @__PURE__ */ React8.createElement("ul", { style: {
407
+ } }, "Loading..."), suggestions.length > 0 && !loading && /* @__PURE__ */ React9.createElement("ul", { style: {
408
408
  listStyleType: "none",
409
409
  margin: 0,
410
410
  padding: "10px",
@@ -415,7 +415,7 @@ var SearchBar = ({
415
415
  width: "100%",
416
416
  maxHeight: "200px",
417
417
  overflowY: "auto"
418
- } }, suggestions.map((suggestion, index) => /* @__PURE__ */ React8.createElement("li", { key: index, style: {
418
+ } }, suggestions.map((suggestion, index) => /* @__PURE__ */ React9.createElement("li", { key: index, style: {
419
419
  padding: "8px",
420
420
  color: textColor,
421
421
  cursor: "pointer",
@@ -427,13 +427,13 @@ var SearchBar = ({
427
427
  };
428
428
 
429
429
  // src/components/LoadingSpinner/LoadingSpinner.jsx
430
- import React9 from "react";
430
+ import React10 from "react";
431
431
  var LoadingSpinner = ({ size = "40px", color = "#7c3aed", speed = "1s" }) => {
432
- return /* @__PURE__ */ React9.createElement("div", { style: { border: `4px solid ${color}`, borderTop: `4px solid transparent`, borderRadius: "50%", width: size, height: size, animation: `spin ${speed} linear infinite` } });
432
+ return /* @__PURE__ */ React10.createElement("div", { style: { border: `4px solid ${color}`, borderTop: `4px solid transparent`, borderRadius: "50%", width: size, height: size, animation: `spin ${speed} linear infinite` } });
433
433
  };
434
434
 
435
435
  // src/components/SkeletonLoader/SkeletonLoader.jsx
436
- import React10 from "react";
436
+ import React11 from "react";
437
437
  var SkeletonLoader = ({ width = "100%", height = "20px", bg = "#1e293b", accent = "#7c3aed", radius = "12px", padding = "0" }) => {
438
438
  const shimmerStyle = {
439
439
  background: `linear-gradient(90deg, ${accent} 25%, ${bg} 50%, ${accent} 75%)`,
@@ -441,7 +441,7 @@ var SkeletonLoader = ({ width = "100%", height = "20px", bg = "#1e293b", accent
441
441
  animation: "shimmer 1.5s infinite",
442
442
  borderRadius: radius
443
443
  };
444
- return /* @__PURE__ */ React10.createElement("div", { style: { padding } }, /* @__PURE__ */ React10.createElement("div", { style: { ...shimmerStyle, width, height, marginBottom: "10px" } }), /* @__PURE__ */ React10.createElement("div", { style: { ...shimmerStyle, width, height, marginBottom: "10px" } }), /* @__PURE__ */ React10.createElement("div", { style: { ...shimmerStyle, width, height } }), /* @__PURE__ */ React10.createElement("style", null, `@keyframes shimmer {
444
+ return /* @__PURE__ */ React11.createElement("div", { style: { padding } }, /* @__PURE__ */ React11.createElement("div", { style: { ...shimmerStyle, width, height, marginBottom: "10px" } }), /* @__PURE__ */ React11.createElement("div", { style: { ...shimmerStyle, width, height, marginBottom: "10px" } }), /* @__PURE__ */ React11.createElement("div", { style: { ...shimmerStyle, width, height } }), /* @__PURE__ */ React11.createElement("style", null, `@keyframes shimmer {
445
445
  0% {
446
446
  background-position: 200% 0;
447
447
  }
@@ -452,7 +452,7 @@ var SkeletonLoader = ({ width = "100%", height = "20px", bg = "#1e293b", accent
452
452
  };
453
453
 
454
454
  // src/components/ResponsiveNavbar/ResponsiveNavbar.jsx
455
- import React11, { useState as useState8 } from "react";
455
+ import React12, { useState as useState8 } from "react";
456
456
  var ResponsiveNavbar = ({
457
457
  logo = "Logo",
458
458
  navItems = [],
@@ -474,7 +474,7 @@ var ResponsiveNavbar = ({
474
474
  setSearchValue(e.target.value);
475
475
  onSearchChange(e.target.value);
476
476
  };
477
- return /* @__PURE__ */ React11.createElement("nav", { style: { background: bg, color: textColor, padding, borderRadius: radius, display: "flex", justifyContent: "space-between", alignItems: "center" } }, /* @__PURE__ */ React11.createElement("div", { style: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ React11.createElement("div", { style: { fontSize: "24px", fontWeight: "bold" } }, logo), /* @__PURE__ */ React11.createElement("div", { style: { display: "flex", marginLeft: "20px" } }, navItems.map((item, index) => /* @__PURE__ */ React11.createElement("div", { key: index, onClick: () => onNavItemClick(item), style: { margin: "0 10px", cursor: "pointer", color: item.active ? accent : textColor } }, item.label)))), /* @__PURE__ */ React11.createElement("div", { style: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ React11.createElement(
477
+ return /* @__PURE__ */ React12.createElement("nav", { style: { background: bg, color: textColor, padding, borderRadius: radius, display: "flex", justifyContent: "space-between", alignItems: "center" } }, /* @__PURE__ */ React12.createElement("div", { style: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ React12.createElement("div", { style: { fontSize: "24px", fontWeight: "bold" } }, logo), /* @__PURE__ */ React12.createElement("div", { style: { display: "flex", marginLeft: "20px" } }, navItems.map((item, index) => /* @__PURE__ */ React12.createElement("div", { key: index, onClick: () => onNavItemClick(item), style: { margin: "0 10px", cursor: "pointer", color: item.active ? accent : textColor } }, item.label)))), /* @__PURE__ */ React12.createElement("div", { style: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ React12.createElement(
478
478
  "input",
479
479
  {
480
480
  type: "text",
@@ -483,11 +483,11 @@ var ResponsiveNavbar = ({
483
483
  onChange: handleSearchChange,
484
484
  style: { background: "#0f172a", color: textColor, border: "none", borderRadius: radius, padding: "8px", marginRight: "20px" }
485
485
  }
486
- ), /* @__PURE__ */ React11.createElement("img", { src: profileAvatar, alt: "Profile", style: { borderRadius: "50%", width: "40px", height: "40px" } }), /* @__PURE__ */ React11.createElement("div", { onClick: () => setMenuActive(!menuActive), style: { cursor: "pointer", marginLeft: "20px" } }, "\u2630")), menuActive && /* @__PURE__ */ React11.createElement("div", { style: { position: "absolute", top: "60px", right: "20px", background: bg, borderRadius: radius, boxShadow: "0 4px 8px rgba(0,0,0,0.3)", zIndex: 1 } }, navItems.map((item, index) => /* @__PURE__ */ React11.createElement("div", { key: index, onClick: () => onNavItemClick(item), style: { padding: "10px", color: item.active ? accent : textColor } }, item.label))));
486
+ ), /* @__PURE__ */ React12.createElement("img", { src: profileAvatar, alt: "Profile", style: { borderRadius: "50%", width: "40px", height: "40px" } }), /* @__PURE__ */ React12.createElement("div", { onClick: () => setMenuActive(!menuActive), style: { cursor: "pointer", marginLeft: "20px" } }, "\u2630")), menuActive && /* @__PURE__ */ React12.createElement("div", { style: { position: "absolute", top: "60px", right: "20px", background: bg, borderRadius: radius, boxShadow: "0 4px 8px rgba(0,0,0,0.3)", zIndex: 1 } }, navItems.map((item, index) => /* @__PURE__ */ React12.createElement("div", { key: index, onClick: () => onNavItemClick(item), style: { padding: "10px", color: item.active ? accent : textColor } }, item.label))));
487
487
  };
488
488
 
489
489
  // src/components/FileUpload/FileUpload.jsx
490
- import React12, { useState as useState9 } from "react";
490
+ import React13, { useState as useState9 } from "react";
491
491
  var FileUpload = ({ bg = "#1e293b", textColor = "#f1f5f9", accent = "#7c3aed", radius = "12px", padding = "20px", placeholder = "Drag and drop files here or click to upload", onChange = () => {
492
492
  } }) => {
493
493
  const [file, setFile] = useState9(null);
@@ -525,7 +525,7 @@ var FileUpload = ({ bg = "#1e293b", textColor = "#f1f5f9", accent = "#7c3aed", r
525
525
  setFile(null);
526
526
  setProgress(0);
527
527
  };
528
- return /* @__PURE__ */ React12.createElement(
528
+ return /* @__PURE__ */ React13.createElement(
529
529
  "div",
530
530
  {
531
531
  onDrop: handleDrop,
@@ -541,7 +541,7 @@ var FileUpload = ({ bg = "#1e293b", textColor = "#f1f5f9", accent = "#7c3aed", r
541
541
  cursor: "pointer"
542
542
  }
543
543
  },
544
- /* @__PURE__ */ React12.createElement(
544
+ /* @__PURE__ */ React13.createElement(
545
545
  "input",
546
546
  {
547
547
  id: "fileInput",
@@ -550,7 +550,7 @@ var FileUpload = ({ bg = "#1e293b", textColor = "#f1f5f9", accent = "#7c3aed", r
550
550
  onChange: handleFileChange
551
551
  }
552
552
  ),
553
- file ? /* @__PURE__ */ React12.createElement("div", null, /* @__PURE__ */ React12.createElement("p", null, file.name), /* @__PURE__ */ React12.createElement(
553
+ file ? /* @__PURE__ */ React13.createElement("div", null, /* @__PURE__ */ React13.createElement("p", null, file.name), /* @__PURE__ */ React13.createElement(
554
554
  "button",
555
555
  {
556
556
  onClick: handleRemove,
@@ -564,18 +564,18 @@ var FileUpload = ({ bg = "#1e293b", textColor = "#f1f5f9", accent = "#7c3aed", r
564
564
  }
565
565
  },
566
566
  "Remove"
567
- ), /* @__PURE__ */ React12.createElement("div", { style: { background: "#e2e8f0", borderRadius: radius, overflow: "hidden", marginTop: "10px" } }, /* @__PURE__ */ React12.createElement("div", { style: { width: `${progress}%`, background: accent, height: "8px" } }))) : /* @__PURE__ */ React12.createElement("p", null, placeholder)
567
+ ), /* @__PURE__ */ React13.createElement("div", { style: { background: "#e2e8f0", borderRadius: radius, overflow: "hidden", marginTop: "10px" } }, /* @__PURE__ */ React13.createElement("div", { style: { width: `${progress}%`, background: accent, height: "8px" } }))) : /* @__PURE__ */ React13.createElement("p", null, placeholder)
568
568
  );
569
569
  };
570
570
 
571
571
  // src/components/Loader/Loader.jsx
572
- import React13 from "react";
572
+ import React14 from "react";
573
573
  var Loader = ({ bg = "#0f172a", accent = "#7c3aed", size = "40px", borderRadius = "8px" }) => {
574
- return /* @__PURE__ */ React13.createElement("div", { style: { display: "flex", justifyContent: "center", alignItems: "center", background: bg, height: size, width: size, borderRadius } }, /* @__PURE__ */ React13.createElement("div", { style: { border: `4px solid ${bg}`, borderTop: `4px solid ${accent}`, borderRadius: "50%", width: "100%", height: "100%", animation: "spin 1s linear infinite" } }));
574
+ return /* @__PURE__ */ React14.createElement("div", { style: { display: "flex", justifyContent: "center", alignItems: "center", background: bg, height: size, width: size, borderRadius } }, /* @__PURE__ */ React14.createElement("div", { style: { border: `4px solid ${bg}`, borderTop: `4px solid ${accent}`, borderRadius: "50%", width: "100%", height: "100%", animation: "spin 1s linear infinite" } }));
575
575
  };
576
576
 
577
577
  // src/components/Avatar/Avatar.jsx
578
- import React14 from "react";
578
+ import React15 from "react";
579
579
  var Avatar = ({
580
580
  image = "https://i.pravatar.cc/150?img=32",
581
581
  alt = "User Avatar",
@@ -584,7 +584,7 @@ var Avatar = ({
584
584
  borderWidth = "4px",
585
585
  radius = "50%"
586
586
  }) => {
587
- return /* @__PURE__ */ React14.createElement("div", { style: {
587
+ return /* @__PURE__ */ React15.createElement("div", { style: {
588
588
  width: size,
589
589
  height: size,
590
590
  borderRadius: radius,
@@ -594,7 +594,7 @@ var Avatar = ({
594
594
  alignItems: "center",
595
595
  justifyContent: "center",
596
596
  background: "#f3f4f6"
597
- } }, /* @__PURE__ */ React14.createElement("img", { src: image, alt, style: {
597
+ } }, /* @__PURE__ */ React15.createElement("img", { src: image, alt, style: {
598
598
  width: "100%",
599
599
  height: "100%",
600
600
  objectFit: "cover"
@@ -602,7 +602,7 @@ var Avatar = ({
602
602
  };
603
603
 
604
604
  // src/components/DividerLine/DividerLine.jsx
605
- import React15 from "react";
605
+ import React16 from "react";
606
606
  var DividerLine = ({
607
607
  text = "Section",
608
608
  textColor = "#f1f5f9",
@@ -611,11 +611,11 @@ var DividerLine = ({
611
611
  thickness = "2px",
612
612
  borderRadius = "4px"
613
613
  }) => {
614
- return /* @__PURE__ */ React15.createElement("div", { style: { display: "flex", alignItems: "center", margin: spacing } }, /* @__PURE__ */ React15.createElement("div", { style: { flex: 1, height: thickness, background: lineColor, borderRadius } }), /* @__PURE__ */ React15.createElement("span", { style: { margin: "0 12px", color: textColor, fontSize: "14px", fontWeight: "600" } }, text), /* @__PURE__ */ React15.createElement("div", { style: { flex: 1, height: thickness, background: lineColor, borderRadius } }));
614
+ return /* @__PURE__ */ React16.createElement("div", { style: { display: "flex", alignItems: "center", margin: spacing } }, /* @__PURE__ */ React16.createElement("div", { style: { flex: 1, height: thickness, background: lineColor, borderRadius } }), /* @__PURE__ */ React16.createElement("span", { style: { margin: "0 12px", color: textColor, fontSize: "14px", fontWeight: "600" } }, text), /* @__PURE__ */ React16.createElement("div", { style: { flex: 1, height: thickness, background: lineColor, borderRadius } }));
615
615
  };
616
616
 
617
617
  // src/components/Tabs/Tabs.jsx
618
- import React16, { useState as useState10 } from "react";
618
+ import React17, { useState as useState10 } from "react";
619
619
  var Tabs = ({
620
620
  tabs = [
621
621
  { label: "Tab 1", content: "Content for Tab 1" },
@@ -628,7 +628,7 @@ var Tabs = ({
628
628
  radius = "8px"
629
629
  }) => {
630
630
  const [activeTab, setActiveTab] = useState10(0);
631
- return /* @__PURE__ */ React16.createElement("div", { style: { background: bg, borderRadius: radius, padding: "16px", boxShadow: "0 4px 20px rgba(0,0,0,0.5)", fontFamily: "system-ui, sans-serif" } }, /* @__PURE__ */ React16.createElement("div", { style: { display: "flex", borderBottom: `2px solid ${accent}` } }, tabs.map((tab, index) => /* @__PURE__ */ React16.createElement(
631
+ return /* @__PURE__ */ React17.createElement("div", { style: { background: bg, borderRadius: radius, padding: "16px", boxShadow: "0 4px 20px rgba(0,0,0,0.5)", fontFamily: "system-ui, sans-serif" } }, /* @__PURE__ */ React17.createElement("div", { style: { display: "flex", borderBottom: `2px solid ${accent}` } }, tabs.map((tab, index) => /* @__PURE__ */ React17.createElement(
632
632
  "button",
633
633
  {
634
634
  key: index,
@@ -645,7 +645,157 @@ var Tabs = ({
645
645
  }
646
646
  },
647
647
  tab.label
648
- ))), /* @__PURE__ */ React16.createElement("div", { style: { padding: "16px", color: textColor } }, /* @__PURE__ */ React16.createElement("h4", { style: { margin: "0 0 8px", fontSize: "16px", fontWeight: "600" } }, tabs[activeTab].label), /* @__PURE__ */ React16.createElement("p", { style: { margin: "0", fontSize: "14px" } }, tabs[activeTab].content)));
648
+ ))), /* @__PURE__ */ React17.createElement("div", { style: { padding: "16px", color: textColor } }, /* @__PURE__ */ React17.createElement("h4", { style: { margin: "0 0 8px", fontSize: "16px", fontWeight: "600" } }, tabs[activeTab].label), /* @__PURE__ */ React17.createElement("p", { style: { margin: "0", fontSize: "14px" } }, tabs[activeTab].content)));
649
+ };
650
+
651
+ // src/components/StatsCard/StatsCard.jsx
652
+ var StatsCard = ({
653
+ label = "Total Revenue",
654
+ value = "$48,295",
655
+ trend = 12.4,
656
+ progress = 72,
657
+ footerText = "vs last month",
658
+ accentColor = "#6366f1",
659
+ variant = "dark",
660
+ icon = "chart"
661
+ }) => {
662
+ const isUp = trend >= 0;
663
+ const variants = {
664
+ dark: { bg: "rgba(15,15,30,0.95)", border: "rgba(255,255,255,0.1)", text: "#fff" },
665
+ glass: { bg: "rgba(255,255,255,0.07)", border: "rgba(255,255,255,0.15)", text: "#fff" },
666
+ light: { bg: "rgba(255,255,255,0.95)", border: "rgba(0,0,0,0.08)", text: "#0f0f1e" }
667
+ };
668
+ const v = variants[variant] || variants.dark;
669
+ const alpha = (hex, op) => {
670
+ const r = parseInt(hex.slice(1, 3), 16);
671
+ const g = parseInt(hex.slice(3, 5), 16);
672
+ const b = parseInt(hex.slice(5, 7), 16);
673
+ return `rgba(${r},${g},${b},${op})`;
674
+ };
675
+ const icons = {
676
+ chart: "M3 3v18h18M7 16l4-4 4 4 4-4",
677
+ users: "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",
678
+ zap: "M13 2L3 14h9l-1 8 10-12h-9l1-8z",
679
+ box: "M21 16V8a2 2 0 00-1-1.73l-7-4a2 2 0 00-2 0l-7 4A2 2 0 003 8v8a2 2 0 001 1.73l7 4a2 2 0 002 0l7-4A2 2 0 0021 16z"
680
+ };
681
+ const s = {
682
+ card: {
683
+ width: 240,
684
+ borderRadius: 20,
685
+ padding: 20,
686
+ position: "relative",
687
+ overflow: "hidden",
688
+ background: v.bg,
689
+ border: `1px solid ${v.border}`,
690
+ color: v.text,
691
+ backdropFilter: variant === "glass" ? "blur(12px)" : "none",
692
+ fontFamily: "'DM Sans', sans-serif"
693
+ },
694
+ glow: {
695
+ position: "absolute",
696
+ top: -30,
697
+ right: -30,
698
+ width: 100,
699
+ height: 100,
700
+ borderRadius: "50%",
701
+ background: alpha(accentColor, 0.4),
702
+ filter: "blur(30px)",
703
+ pointerEvents: "none",
704
+ opacity: 0.5
705
+ },
706
+ top: {
707
+ display: "flex",
708
+ alignItems: "flex-start",
709
+ justifyContent: "space-between",
710
+ marginBottom: 16
711
+ },
712
+ iconWrap: {
713
+ width: 40,
714
+ height: 40,
715
+ borderRadius: 12,
716
+ display: "flex",
717
+ alignItems: "center",
718
+ justifyContent: "center",
719
+ background: alpha(accentColor, 0.18),
720
+ border: `1px solid ${alpha(accentColor, 0.35)}`
721
+ },
722
+ trendBadge: {
723
+ display: "flex",
724
+ alignItems: "center",
725
+ gap: 3,
726
+ padding: "3px 8px",
727
+ borderRadius: 20,
728
+ fontSize: 11,
729
+ fontWeight: 700,
730
+ background: isUp ? "rgba(16,185,129,0.15)" : "rgba(244,63,94,0.15)",
731
+ color: isUp ? "#10b981" : "#f43f5e"
732
+ },
733
+ value: {
734
+ fontSize: 32,
735
+ fontWeight: 800,
736
+ marginBottom: 2,
737
+ lineHeight: 1,
738
+ color: v.text
739
+ },
740
+ label: {
741
+ fontSize: 12,
742
+ fontWeight: 500,
743
+ opacity: 0.6,
744
+ marginBottom: 12
745
+ },
746
+ barTrack: {
747
+ height: 4,
748
+ borderRadius: 2,
749
+ overflow: "hidden",
750
+ marginBottom: 12,
751
+ background: alpha(accentColor, 0.15)
752
+ },
753
+ barFill: {
754
+ height: "100%",
755
+ borderRadius: 2,
756
+ width: `${Math.min(100, Math.max(0, progress))}%`,
757
+ background: `linear-gradient(90deg, ${accentColor}, ${alpha(accentColor, 0.7)})`,
758
+ transition: "width 0.5s ease"
759
+ },
760
+ footer: {
761
+ display: "flex",
762
+ alignItems: "center",
763
+ justifyContent: "space-between"
764
+ },
765
+ footerText: { fontSize: 11, opacity: 0.5 },
766
+ dot: {
767
+ width: 6,
768
+ height: 6,
769
+ borderRadius: "50%",
770
+ background: accentColor,
771
+ opacity: 0.7
772
+ }
773
+ };
774
+ return /* @__PURE__ */ React.createElement("div", { style: s.card }, /* @__PURE__ */ React.createElement("div", { style: s.glow }), /* @__PURE__ */ React.createElement("div", { style: s.top }, /* @__PURE__ */ React.createElement("div", { style: s.iconWrap }, /* @__PURE__ */ React.createElement(
775
+ "svg",
776
+ {
777
+ width: "18",
778
+ height: "18",
779
+ viewBox: "0 0 24 24",
780
+ fill: "none",
781
+ stroke: accentColor,
782
+ strokeWidth: "2",
783
+ strokeLinecap: "round",
784
+ strokeLinejoin: "round"
785
+ },
786
+ /* @__PURE__ */ React.createElement("path", { d: icons[icon] || icons.chart })
787
+ )), /* @__PURE__ */ React.createElement("div", { style: s.trendBadge }, /* @__PURE__ */ React.createElement(
788
+ "svg",
789
+ {
790
+ width: "10",
791
+ height: "10",
792
+ viewBox: "0 0 24 24",
793
+ fill: "none",
794
+ stroke: "currentColor",
795
+ strokeWidth: "3"
796
+ },
797
+ /* @__PURE__ */ React.createElement("polyline", { points: isUp ? "18 15 12 9 6 15" : "6 9 12 15 18 9" })
798
+ ), Math.abs(trend).toFixed(1), "%")), /* @__PURE__ */ React.createElement("div", { style: s.value }, value), /* @__PURE__ */ React.createElement("div", { style: s.label }, label), /* @__PURE__ */ React.createElement("div", { style: s.barTrack }, /* @__PURE__ */ React.createElement("div", { style: s.barFill })), /* @__PURE__ */ React.createElement("div", { style: s.footer }, /* @__PURE__ */ React.createElement("span", { style: s.footerText }, footerText), /* @__PURE__ */ React.createElement("div", { style: s.dot })));
649
799
  };
650
800
  export {
651
801
  Avatar,
@@ -661,6 +811,7 @@ export {
661
811
  SkeletonLoader,
662
812
  SmartButton,
663
813
  StatCard,
814
+ StatsCard,
664
815
  Tabs,
665
816
  TextArea,
666
817
  ToastNotification
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "virtual-ui-lib",
3
- "version": "1.0.52",
3
+ "version": "1.0.54",
4
4
  "description": "Virtual UI React Component Library",
5
5
  "author": "Ankush",
6
6
  "license": "ISC",