virtual-ui-lib 1.0.52 → 1.0.53
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 +2 -0
- package/dist/index.mjs +54 -52
- 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: () => void 0,
|
|
45
46
|
Tabs: () => Tabs,
|
|
46
47
|
TextArea: () => TextArea,
|
|
47
48
|
ToastNotification: () => ToastNotification
|
|
@@ -712,6 +713,7 @@ var Tabs = ({
|
|
|
712
713
|
SkeletonLoader,
|
|
713
714
|
SmartButton,
|
|
714
715
|
StatCard,
|
|
716
|
+
Statscard,
|
|
715
717
|
Tabs,
|
|
716
718
|
TextArea,
|
|
717
719
|
ToastNotification
|
package/dist/index.mjs
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
// src/components/ToastNotification/ToastNotification.jsx
|
|
2
|
-
import
|
|
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__ */
|
|
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__ */
|
|
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__ */
|
|
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__ */
|
|
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__ */
|
|
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
|
|
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__ */
|
|
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__ */
|
|
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
|
|
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__ */
|
|
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__ */
|
|
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
|
|
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__ */
|
|
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__ */
|
|
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
|
|
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__ */
|
|
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__ */
|
|
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
|
|
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__ */
|
|
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__ */
|
|
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
|
|
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__ */
|
|
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__ */
|
|
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
|
|
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__ */
|
|
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__ */
|
|
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__ */
|
|
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__ */
|
|
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__ */
|
|
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
|
|
430
|
+
import React10 from "react";
|
|
431
431
|
var LoadingSpinner = ({ size = "40px", color = "#7c3aed", speed = "1s" }) => {
|
|
432
|
-
return /* @__PURE__ */
|
|
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
|
|
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__ */
|
|
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
|
|
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__ */
|
|
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__ */
|
|
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
|
|
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__ */
|
|
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__ */
|
|
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__ */
|
|
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__ */
|
|
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
|
|
572
|
+
import React14 from "react";
|
|
573
573
|
var Loader = ({ bg = "#0f172a", accent = "#7c3aed", size = "40px", borderRadius = "8px" }) => {
|
|
574
|
-
return /* @__PURE__ */
|
|
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
|
|
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__ */
|
|
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__ */
|
|
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
|
|
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__ */
|
|
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
|
|
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__ */
|
|
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,8 +645,9 @@ var Tabs = ({
|
|
|
645
645
|
}
|
|
646
646
|
},
|
|
647
647
|
tab.label
|
|
648
|
-
))), /* @__PURE__ */
|
|
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
649
|
};
|
|
650
|
+
var export_Statscard = void 0;
|
|
650
651
|
export {
|
|
651
652
|
Avatar,
|
|
652
653
|
CodeBlock,
|
|
@@ -661,6 +662,7 @@ export {
|
|
|
661
662
|
SkeletonLoader,
|
|
662
663
|
SmartButton,
|
|
663
664
|
StatCard,
|
|
665
|
+
export_Statscard as Statscard,
|
|
664
666
|
Tabs,
|
|
665
667
|
TextArea,
|
|
666
668
|
ToastNotification
|