virtual-ui-lib 1.0.67 → 1.0.69

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 +654 -872
  2. package/dist/index.mjs +650 -855
  3. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -29,608 +29,25 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
29
29
  // src/index.js
30
30
  var index_exports = {};
31
31
  __export(index_exports, {
32
- Avatar: () => Avatar,
33
32
  AvatarCard: () => AvatarCard,
34
33
  BackgoundImageSlider: () => BackgoundImageSlider,
35
34
  Charts: () => Charts,
36
- CodeBlock: () => CodeBlock,
37
- CustomInputField: () => CustomInputField,
38
- DividerLine: () => DividerLine,
39
- FileUpload: () => FileUpload,
40
35
  Footer: () => Footer,
41
36
  ImageCard: () => ImageCard,
42
37
  ImageSlider: () => ImageSlider,
38
+ InvoiceCard: () => InvoiceCard,
43
39
  Loader: () => Loader,
44
- LoadingSpinner: () => LoadingSpinner,
45
40
  Navbar: () => Navbar,
46
41
  NotificationToast: () => NotificationToast,
47
- OtpInput: () => OtpInput,
42
+ OTPInput: () => OTPInput,
48
43
  PageLoader: () => PageLoader,
49
44
  PricingCard: () => PricingCard,
50
- ResponsiveNavbar: () => ResponsiveNavbar,
51
- SearchBar: () => SearchBar,
52
- Sidebar: () => Sidebar,
53
- SkeletonLoader: () => SkeletonLoader,
54
- SmartButton: () => SmartButton,
55
- StatCard: () => StatCard,
56
- Tabs: () => Tabs,
57
- TextArea: () => TextArea,
58
- ToastNotification: () => ToastNotification
45
+ Sidebar: () => Sidebar
59
46
  });
60
47
  module.exports = __toCommonJS(index_exports);
61
48
 
62
- // src/components/ToastNotification/ToastNotification.jsx
63
- var import_react = __toESM(require("react"));
64
- var ToastNotification = ({
65
- type = "success",
66
- title = "Success",
67
- message = "Your action was successful!",
68
- duration = 4e3,
69
- onClose
70
- }) => {
71
- const [visible, setVisible] = (0, import_react.useState)(false);
72
- const [progress, setProgress] = (0, import_react.useState)(0);
73
- (0, import_react.useEffect)(() => {
74
- setVisible(true);
75
- const interval = setInterval(() => {
76
- setProgress((prev) => {
77
- if (prev >= 100) {
78
- clearInterval(interval);
79
- onClose();
80
- return 100;
81
- }
82
- return prev + 100 / (duration / 100);
83
- });
84
- }, 100);
85
- return () => clearInterval(interval);
86
- }, [duration, onClose]);
87
- const getStyles = () => {
88
- let bg, icon;
89
- switch (type) {
90
- case "success":
91
- bg = "#059669";
92
- icon = "\u2713";
93
- break;
94
- case "error":
95
- bg = "#dc2626";
96
- icon = "\u2716";
97
- break;
98
- case "warning":
99
- bg = "#eab308";
100
- icon = "\u26A0\uFE0F";
101
- break;
102
- case "info":
103
- bg = "#2563eb";
104
- icon = "\u2139\uFE0F";
105
- break;
106
- default:
107
- bg = "#059669";
108
- icon = "\u2713";
109
- }
110
- return { background: bg, icon };
111
- };
112
- return /* @__PURE__ */ import_react.default.createElement("div", { style: {
113
- position: "fixed",
114
- bottom: "20px",
115
- right: "20px",
116
- opacity: visible ? 1 : 0,
117
- transform: visible ? "translateY(0)" : "translateY(20px)",
118
- transition: "opacity 0.3s, transform 0.3s",
119
- background: getStyles().background,
120
- borderRadius: "12px",
121
- padding: "16px",
122
- width: "300px",
123
- boxShadow: "0 4px 20px rgba(0,0,0,0.2)",
124
- fontFamily: "system-ui, sans-serif",
125
- zIndex: 9999
126
- } }, /* @__PURE__ */ import_react.default.createElement("div", { style: { display: "flex", alignItems: "center", marginBottom: "8px" } }, /* @__PURE__ */ import_react.default.createElement("div", { style: {
127
- width: "24px",
128
- height: "24px",
129
- borderRadius: "50%",
130
- background: "white",
131
- display: "flex",
132
- alignItems: "center",
133
- justifyContent: "center",
134
- marginRight: "8px"
135
- } }, /* @__PURE__ */ import_react.default.createElement("span", { style: { color: getStyles().background, fontSize: "16px" } }, getStyles().icon)), /* @__PURE__ */ import_react.default.createElement("h4", { style: { margin: 0, fontSize: "16px", fontWeight: "600", color: "white" } }, title)), /* @__PURE__ */ import_react.default.createElement("p", { style: { margin: "0 0 12px", fontSize: "14px", color: "#f1f5f9" } }, message), /* @__PURE__ */ import_react.default.createElement("button", { onClick: onClose, style: {
136
- background: "transparent",
137
- color: "white",
138
- border: "none",
139
- cursor: "pointer",
140
- fontSize: "14px",
141
- fontWeight: "600"
142
- } }, "Close"), /* @__PURE__ */ import_react.default.createElement("div", { style: {
143
- height: "4px",
144
- background: "rgba(255, 255, 255, 0.3)",
145
- borderRadius: "8px",
146
- overflow: "hidden",
147
- marginTop: "12px"
148
- } }, /* @__PURE__ */ import_react.default.createElement("div", { style: {
149
- width: progress + "%",
150
- height: "100%",
151
- background: "white",
152
- transition: "width 0.1s linear"
153
- } })));
154
- };
155
-
156
- // src/components/StatCard/StatCard.jsx
157
- var import_react2 = __toESM(require("react"));
158
- var StatCard = ({
159
- title = "Revenue",
160
- metric = 1200,
161
- change = 15,
162
- bg = "#0f172a",
163
- accent = "#059669",
164
- negativeAccent = "#ef4444",
165
- radius = "16px"
166
- }) => {
167
- const [count, setCount] = (0, import_react2.useState)(0);
168
- (0, import_react2.useEffect)(() => {
169
- let countUp = 0;
170
- const interval = setInterval(() => {
171
- if (countUp < metric) {
172
- countUp += Math.ceil(metric / 100);
173
- setCount(countUp);
174
- } else {
175
- clearInterval(interval);
176
- }
177
- }, 30);
178
- return () => clearInterval(interval);
179
- }, [metric]);
180
- 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: {
181
- display: "inline-block",
182
- padding: "5px 12px",
183
- borderRadius: "10px",
184
- background: change >= 0 ? accent : negativeAccent,
185
- color: "white",
186
- fontSize: "14px",
187
- margin: "10px 0"
188
- } }, 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" })));
189
- };
190
-
191
- // src/components/OtpInput/OtpInput.jsx
192
- var import_react3 = __toESM(require("react"));
193
- var OtpInput = ({
194
- length = 6,
195
- boxSize = "48px",
196
- borderColor = "#7c3aed",
197
- bgColor = "#1e293b",
198
- textColor = "#f1f5f9",
199
- radius = "8px",
200
- onComplete
201
- }) => {
202
- const [otp, setOtp] = (0, import_react3.useState)(Array(length).fill(""));
203
- const inputsRef = (0, import_react3.useRef)([]);
204
- const handleChange = (index, value) => {
205
- if (/\d/.test(value) || value === "") {
206
- const newOtp = [...otp];
207
- newOtp[index] = value;
208
- setOtp(newOtp);
209
- if (value !== "" && index < length - 1) {
210
- inputsRef.current[index + 1].focus();
211
- } else if (value === "" && index > 0) {
212
- inputsRef.current[index - 1].focus();
213
- }
214
- if (newOtp.join("").length === length) {
215
- onComplete(newOtp.join(""));
216
- }
217
- }
218
- };
219
- const handlePaste = (e) => {
220
- const pastedData = e.clipboardData.getData("text").slice(0, length).split("");
221
- const newOtp = Array(length).fill("").map((_, index) => pastedData[index] || "");
222
- setOtp(newOtp);
223
- if (newOtp.join("").length === length) {
224
- onComplete(newOtp.join(""));
225
- }
226
- e.preventDefault();
227
- };
228
- (0, import_react3.useEffect)(() => {
229
- inputsRef.current[0].focus();
230
- }, []);
231
- return /* @__PURE__ */ import_react3.default.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__ */ import_react3.default.createElement(
232
- "input",
233
- {
234
- key: index,
235
- ref: (el) => inputsRef.current[index] = el,
236
- type: "text",
237
- maxLength: "1",
238
- value,
239
- onChange: (e) => handleChange(index, e.target.value),
240
- onFocus: (e) => e.target.select(),
241
- onKeyDown: (e) => {
242
- if (e.key === "Backspace" && !value && index > 0) {
243
- inputsRef.current[index - 1].focus();
244
- }
245
- },
246
- style: {
247
- width: boxSize,
248
- height: boxSize,
249
- fontSize: "24px",
250
- textAlign: "center",
251
- borderRadius: radius,
252
- border: `2px solid ${borderColor}`,
253
- background: bgColor,
254
- color: textColor,
255
- transition: "border-color 0.2s",
256
- outline: "none"
257
- }
258
- }
259
- )), otp.join("").length === length && /* @__PURE__ */ import_react3.default.createElement("span", { style: { color: "#4ade80", fontSize: "20px" } }, "\u2705"));
260
- };
261
-
262
- // src/components/CodeBlock/CodeBlock.jsx
263
- var import_react4 = __toESM(require("react"));
264
- var CodeBlock = ({
265
- code = "const hello = 'Hello, world!';\nconsole.log(hello);",
266
- language = "JavaScript",
267
- filename = "example.js",
268
- bg = "#0d1117",
269
- textColor = "#c9d1d9",
270
- tokenColors = { string: "#a5d6e9", keyword: "#f9bc41", variable: "#a6e22e" },
271
- showLineNumbers = true,
272
- wrapWords = false
273
- }) => {
274
- const [copied, setCopied] = (0, import_react4.useState)(false);
275
- const handleCopy = () => {
276
- navigator.clipboard.writeText(code).then(() => {
277
- setCopied(true);
278
- setTimeout(() => setCopied(false), 2e3);
279
- });
280
- };
281
- const formatCode = () => {
282
- return code.split("\n").map((line, index) => /* @__PURE__ */ import_react4.default.createElement("div", { key: index, style: { display: "flex" } }, showLineNumbers && /* @__PURE__ */ import_react4.default.createElement("span", { style: { marginRight: "10px", color: "#58a6ff" } }, index + 1), /* @__PURE__ */ import_react4.default.createElement("span", { style: { color: tokenColors.string } }, line.replace(/(\'.*?\')/g, (match) => `<span style='color:${tokenColors.string}'>${match}</span>`))));
283
- };
284
- return /* @__PURE__ */ import_react4.default.createElement("div", { style: { background: bg, borderRadius: "8px", padding: "16px", fontFamily: "monospace", position: "relative" } }, filename && /* @__PURE__ */ import_react4.default.createElement("div", { style: { color: textColor, fontWeight: "bold", marginBottom: "8px" } }, filename), /* @__PURE__ */ import_react4.default.createElement("div", { style: { overflowX: wrapWords ? "auto" : "hidden", whiteSpace: wrapWords ? "normal" : "pre" } }, formatCode()), /* @__PURE__ */ import_react4.default.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__ */ import_react4.default.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"));
285
- };
286
-
287
- // src/components/SmartButton/SmartButton.jsx
288
- var import_react5 = __toESM(require("react"));
289
- var SmartButton = ({
290
- buttonText = "Submit",
291
- isLoading = false,
292
- isDisabled = false,
293
- icon = null,
294
- success = false,
295
- error = false,
296
- bg = "#7c3aed",
297
- textColor = "#fff",
298
- padding = "12px 20px",
299
- radius = "8px",
300
- onClick = () => {
301
- }
302
- }) => {
303
- const bgColor = success ? "#059669" : error ? "#ef4444" : bg;
304
- const cursorStyle = isDisabled ? "not-allowed" : "pointer";
305
- return /* @__PURE__ */ import_react5.default.createElement(
306
- "button",
307
- {
308
- onClick: !isDisabled && !isLoading ? onClick : () => {
309
- },
310
- disabled: isDisabled,
311
- style: {
312
- background: bgColor,
313
- color: textColor,
314
- padding,
315
- borderRadius: radius,
316
- border: "none",
317
- cursor: cursorStyle,
318
- transition: "background 0.3s ease"
319
- },
320
- onMouseEnter: (e) => {
321
- if (!isDisabled && !isLoading) {
322
- e.currentTarget.style.background = "#6d28d9";
323
- }
324
- },
325
- onMouseLeave: (e) => {
326
- e.currentTarget.style.background = bgColor;
327
- }
328
- },
329
- isLoading ? /* @__PURE__ */ import_react5.default.createElement("span", null, "Loading...") : /* @__PURE__ */ import_react5.default.createElement(import_react5.default.Fragment, null, icon && /* @__PURE__ */ import_react5.default.createElement("span", { style: { marginRight: "8px" } }, icon), buttonText)
330
- );
331
- };
332
-
333
- // src/components/CustomInputField/CustomInputField.jsx
334
- var import_react6 = __toESM(require("react"));
335
- var CustomInputField = ({
336
- label = "Label",
337
- placeholder = "Enter text...",
338
- errorMessage = "",
339
- helperText = "",
340
- value = "",
341
- bg = "#1e293b",
342
- textColor = "#f1f5f9",
343
- accent = "#7c3aed",
344
- padding = "10px",
345
- radius = "8px",
346
- onChange = () => {
347
- }
348
- }) => {
349
- const [isFocused, setIsFocused] = (0, import_react6.useState)(false);
350
- return /* @__PURE__ */ import_react6.default.createElement("div", { style: { margin: "16px 0" } }, /* @__PURE__ */ import_react6.default.createElement("label", { style: { color: textColor, marginBottom: "4px", display: "block" } }, label), /* @__PURE__ */ import_react6.default.createElement(
351
- "input",
352
- {
353
- type: "text",
354
- value,
355
- placeholder,
356
- onFocus: () => setIsFocused(true),
357
- onBlur: () => setIsFocused(false),
358
- onChange: (e) => onChange(e.target.value),
359
- style: {
360
- background: bg,
361
- color: textColor,
362
- padding,
363
- borderRadius: radius,
364
- border: isFocused ? `2px solid ${accent}` : "2px solid transparent",
365
- transition: "border-color 0.3s ease",
366
- width: "100%"
367
- }
368
- }
369
- ), errorMessage && /* @__PURE__ */ import_react6.default.createElement("p", { style: { color: "red", margin: "4px 0 0 0" } }, errorMessage), helperText && /* @__PURE__ */ import_react6.default.createElement("p", { style: { color: textColor, margin: "4px 0 0 0" } }, helperText));
370
- };
371
-
372
- // src/components/TextArea/TextArea.jsx
373
- var import_react7 = __toESM(require("react"));
374
- var TextArea = ({
375
- label = "Label",
376
- placeholder = "Type here...",
377
- value = "",
378
- bg = "#1e293b",
379
- textColor = "#f1f5f9",
380
- accent = "#2563eb",
381
- radius = "8px",
382
- padding = "12px",
383
- maxLength = 250,
384
- onChange = () => {
385
- }
386
- }) => {
387
- const [currentValue, setCurrentValue] = (0, import_react7.useState)(value);
388
- const handleChange = (e) => {
389
- setCurrentValue(e.target.value);
390
- onChange(e.target.value);
391
- };
392
- return /* @__PURE__ */ import_react7.default.createElement("div", { style: { margin: "16px 0" } }, /* @__PURE__ */ import_react7.default.createElement("label", { style: { color: textColor, marginBottom: "8px", display: "block" } }, label), /* @__PURE__ */ import_react7.default.createElement(
393
- "textarea",
394
- {
395
- value: currentValue,
396
- placeholder,
397
- maxLength,
398
- onChange: handleChange,
399
- style: {
400
- background: bg,
401
- color: textColor,
402
- padding,
403
- borderRadius: radius,
404
- border: `1px solid ${accent}`,
405
- width: "100%",
406
- minHeight: "100px",
407
- resize: "none",
408
- transition: "border-color 0.3s"
409
- }
410
- }
411
- ), /* @__PURE__ */ import_react7.default.createElement("div", { style: { color: textColor, marginTop: "8px" } }, currentValue.length, "/", maxLength));
412
- };
413
-
414
- // src/components/SearchBar/SearchBar.jsx
415
- var import_react8 = __toESM(require("react"));
416
- var SearchBar = ({
417
- placeholder = "Search...",
418
- bg = "#1e293b",
419
- textColor = "#f1f5f9",
420
- accent = "#7c3aed",
421
- loading = false,
422
- suggestions = [],
423
- onChange = () => {
424
- },
425
- onClear = () => {
426
- }
427
- }) => {
428
- const [query, setQuery] = (0, import_react8.useState)("");
429
- const handleInputChange = (e) => {
430
- setQuery(e.target.value);
431
- onChange(e.target.value);
432
- };
433
- const handleClear = () => {
434
- setQuery("");
435
- onClear();
436
- };
437
- return /* @__PURE__ */ import_react8.default.createElement("div", { style: { position: "relative", width: "100%" } }, /* @__PURE__ */ import_react8.default.createElement(
438
- "input",
439
- {
440
- value: query,
441
- placeholder,
442
- onChange: handleInputChange,
443
- style: {
444
- background: bg,
445
- color: textColor,
446
- padding: "10px",
447
- borderRadius: "8px",
448
- border: "1px solid #cbd5e1",
449
- width: "100%",
450
- transition: "border-color 0.3s",
451
- outline: "none"
452
- }
453
- }
454
- ), query && /* @__PURE__ */ import_react8.default.createElement("button", { onClick: handleClear, style: {
455
- position: "absolute",
456
- right: "10px",
457
- top: "50%",
458
- transform: "translateY(-50%)",
459
- background: "transparent",
460
- color: accent,
461
- border: "none",
462
- cursor: "pointer"
463
- } }, "Clear"), loading && /* @__PURE__ */ import_react8.default.createElement("div", { style: {
464
- position: "absolute",
465
- left: "10px",
466
- top: "50%",
467
- transform: "translateY(-50%)"
468
- } }, "Loading..."), suggestions.length > 0 && !loading && /* @__PURE__ */ import_react8.default.createElement("ul", { style: {
469
- listStyleType: "none",
470
- margin: 0,
471
- padding: "10px",
472
- background: bg,
473
- borderRadius: "8px",
474
- position: "absolute",
475
- zIndex: 1e3,
476
- width: "100%",
477
- maxHeight: "200px",
478
- overflowY: "auto"
479
- } }, suggestions.map((suggestion, index) => /* @__PURE__ */ import_react8.default.createElement("li", { key: index, style: {
480
- padding: "8px",
481
- color: textColor,
482
- cursor: "pointer",
483
- transition: "background 0.2s"
484
- }, onClick: () => {
485
- setQuery(suggestion);
486
- onChange(suggestion);
487
- } }, suggestion))));
488
- };
489
-
490
- // src/components/LoadingSpinner/LoadingSpinner.jsx
491
- var import_react9 = __toESM(require("react"));
492
- var LoadingSpinner = ({ size = "40px", color = "#7c3aed", speed = "1s" }) => {
493
- return /* @__PURE__ */ import_react9.default.createElement("div", { style: { border: `4px solid ${color}`, borderTop: `4px solid transparent`, borderRadius: "50%", width: size, height: size, animation: `spin ${speed} linear infinite` } });
494
- };
495
-
496
- // src/components/SkeletonLoader/SkeletonLoader.jsx
497
- var import_react10 = __toESM(require("react"));
498
- var SkeletonLoader = ({ width = "100%", height = "20px", bg = "#1e293b", accent = "#7c3aed", radius = "12px", padding = "0" }) => {
499
- const shimmerStyle = {
500
- background: `linear-gradient(90deg, ${accent} 25%, ${bg} 50%, ${accent} 75%)`,
501
- backgroundSize: "200% 100%",
502
- animation: "shimmer 1.5s infinite",
503
- borderRadius: radius
504
- };
505
- return /* @__PURE__ */ import_react10.default.createElement("div", { style: { padding } }, /* @__PURE__ */ import_react10.default.createElement("div", { style: { ...shimmerStyle, width, height, marginBottom: "10px" } }), /* @__PURE__ */ import_react10.default.createElement("div", { style: { ...shimmerStyle, width, height, marginBottom: "10px" } }), /* @__PURE__ */ import_react10.default.createElement("div", { style: { ...shimmerStyle, width, height } }), /* @__PURE__ */ import_react10.default.createElement("style", null, `@keyframes shimmer {
506
- 0% {
507
- background-position: 200% 0;
508
- }
509
- 100% {
510
- background-position: 0 0;
511
- }
512
- }`));
513
- };
514
-
515
- // src/components/ResponsiveNavbar/ResponsiveNavbar.jsx
516
- var import_react11 = __toESM(require("react"));
517
- var ResponsiveNavbar = ({
518
- logo = "Logo",
519
- navItems = [],
520
- bg = "#1e293b",
521
- textColor = "#f1f5f9",
522
- accent = "#7c3aed",
523
- padding = "10px 20px",
524
- radius = "8px",
525
- placeholder = "Search...",
526
- onNavItemClick = () => {
527
- },
528
- onSearchChange = () => {
529
- },
530
- profileAvatar = "https://via.placeholder.com/40"
531
- }) => {
532
- const [menuActive, setMenuActive] = (0, import_react11.useState)(false);
533
- const [searchValue, setSearchValue] = (0, import_react11.useState)("");
534
- const handleSearchChange = (e) => {
535
- setSearchValue(e.target.value);
536
- onSearchChange(e.target.value);
537
- };
538
- return /* @__PURE__ */ import_react11.default.createElement("nav", { style: { background: bg, color: textColor, padding, borderRadius: radius, display: "flex", justifyContent: "space-between", alignItems: "center" } }, /* @__PURE__ */ import_react11.default.createElement("div", { style: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ import_react11.default.createElement("div", { style: { fontSize: "24px", fontWeight: "bold" } }, logo), /* @__PURE__ */ import_react11.default.createElement("div", { style: { display: "flex", marginLeft: "20px" } }, navItems.map((item, index) => /* @__PURE__ */ import_react11.default.createElement("div", { key: index, onClick: () => onNavItemClick(item), style: { margin: "0 10px", cursor: "pointer", color: item.active ? accent : textColor } }, item.label)))), /* @__PURE__ */ import_react11.default.createElement("div", { style: { display: "flex", alignItems: "center" } }, /* @__PURE__ */ import_react11.default.createElement(
539
- "input",
540
- {
541
- type: "text",
542
- value: searchValue,
543
- placeholder,
544
- onChange: handleSearchChange,
545
- style: { background: "#0f172a", color: textColor, border: "none", borderRadius: radius, padding: "8px", marginRight: "20px" }
546
- }
547
- ), /* @__PURE__ */ import_react11.default.createElement("img", { src: profileAvatar, alt: "Profile", style: { borderRadius: "50%", width: "40px", height: "40px" } }), /* @__PURE__ */ import_react11.default.createElement("div", { onClick: () => setMenuActive(!menuActive), style: { cursor: "pointer", marginLeft: "20px" } }, "\u2630")), menuActive && /* @__PURE__ */ import_react11.default.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__ */ import_react11.default.createElement("div", { key: index, onClick: () => onNavItemClick(item), style: { padding: "10px", color: item.active ? accent : textColor } }, item.label))));
548
- };
549
-
550
- // src/components/FileUpload/FileUpload.jsx
551
- var import_react12 = __toESM(require("react"));
552
- var FileUpload = ({ bg = "#1e293b", textColor = "#f1f5f9", accent = "#7c3aed", radius = "12px", padding = "20px", placeholder = "Drag and drop files here or click to upload", onChange = () => {
553
- } }) => {
554
- const [file, setFile] = (0, import_react12.useState)(null);
555
- const [progress, setProgress] = (0, import_react12.useState)(0);
556
- const handleDrop = (event) => {
557
- event.preventDefault();
558
- const droppedFile = event.dataTransfer.files[0];
559
- if (droppedFile) {
560
- uploadFile(droppedFile);
561
- }
562
- };
563
- const handleClick = () => {
564
- document.getElementById("fileInput").click();
565
- };
566
- const handleFileChange = (event) => {
567
- const selectedFile = event.target.files[0];
568
- if (selectedFile) {
569
- uploadFile(selectedFile);
570
- }
571
- };
572
- const uploadFile = (selectedFile) => {
573
- setFile(selectedFile);
574
- const uploadProgress = setInterval(() => {
575
- setProgress((prev) => {
576
- if (prev >= 100) {
577
- clearInterval(uploadProgress);
578
- return 100;
579
- }
580
- return prev + 10;
581
- });
582
- }, 100);
583
- onChange(selectedFile);
584
- };
585
- const handleRemove = () => {
586
- setFile(null);
587
- setProgress(0);
588
- };
589
- return /* @__PURE__ */ import_react12.default.createElement(
590
- "div",
591
- {
592
- onDrop: handleDrop,
593
- onDragOver: (e) => e.preventDefault(),
594
- onClick: handleClick,
595
- style: {
596
- background: bg,
597
- color: textColor,
598
- border: `2px dashed ${accent}`,
599
- borderRadius: radius,
600
- padding,
601
- textAlign: "center",
602
- cursor: "pointer"
603
- }
604
- },
605
- /* @__PURE__ */ import_react12.default.createElement(
606
- "input",
607
- {
608
- id: "fileInput",
609
- type: "file",
610
- style: { display: "none" },
611
- onChange: handleFileChange
612
- }
613
- ),
614
- file ? /* @__PURE__ */ import_react12.default.createElement("div", null, /* @__PURE__ */ import_react12.default.createElement("p", null, file.name), /* @__PURE__ */ import_react12.default.createElement(
615
- "button",
616
- {
617
- onClick: handleRemove,
618
- style: {
619
- background: accent,
620
- color: "#fff",
621
- border: "none",
622
- borderRadius: radius,
623
- padding: "8px 16px",
624
- cursor: "pointer"
625
- }
626
- },
627
- "Remove"
628
- ), /* @__PURE__ */ import_react12.default.createElement("div", { style: { background: "#e2e8f0", borderRadius: radius, overflow: "hidden", marginTop: "10px" } }, /* @__PURE__ */ import_react12.default.createElement("div", { style: { width: `${progress}%`, background: accent, height: "8px" } }))) : /* @__PURE__ */ import_react12.default.createElement("p", null, placeholder)
629
- );
630
- };
631
-
632
49
  // src/components/Loader/Loader.jsx
633
- var import_react13 = __toESM(require("react"));
50
+ var import_react = __toESM(require("react"));
634
51
  var Loader = ({
635
52
  type = "spinner",
636
53
  size = 48,
@@ -639,15 +56,15 @@ var Loader = ({
639
56
  label = "",
640
57
  speed = 1
641
58
  }) => {
642
- const [dots, setDots] = (0, import_react13.useState)(0);
643
- const [progress, setProgress] = (0, import_react13.useState)(0);
59
+ const [dots, setDots] = (0, import_react.useState)(0);
60
+ const [progress, setProgress] = (0, import_react.useState)(0);
644
61
  const alpha = (hex, op) => {
645
62
  const r = parseInt(hex.slice(1, 3), 16);
646
63
  const g = parseInt(hex.slice(3, 5), 16);
647
64
  const b = parseInt(hex.slice(5, 7), 16);
648
65
  return `rgba(${r},${g},${b},${op})`;
649
66
  };
650
- (0, import_react13.useEffect)(() => {
67
+ (0, import_react.useEffect)(() => {
651
68
  if (type === "dots") {
652
69
  const t = setInterval(() => setDots((d) => (d + 1) % 4), 400 / speed);
653
70
  return () => clearInterval(t);
@@ -669,8 +86,8 @@ var Loader = ({
669
86
  borderRadius: "16px",
670
87
  fontFamily: "system-ui, sans-serif"
671
88
  };
672
- const labelEl = label ? /* @__PURE__ */ import_react13.default.createElement("span", { style: { fontSize: "13px", color: "rgba(255,255,255,0.45)", letterSpacing: "0.3px" } }, label) : null;
673
- if (type === "spinner") return /* @__PURE__ */ import_react13.default.createElement("div", { style: wrapStyle }, /* @__PURE__ */ import_react13.default.createElement("svg", { width: size, height: size, viewBox: "0 0 48 48" }, /* @__PURE__ */ import_react13.default.createElement(
89
+ const labelEl = label ? /* @__PURE__ */ import_react.default.createElement("span", { style: { fontSize: "13px", color: "rgba(255,255,255,0.45)", letterSpacing: "0.3px" } }, label) : null;
90
+ if (type === "spinner") return /* @__PURE__ */ import_react.default.createElement("div", { style: wrapStyle }, /* @__PURE__ */ import_react.default.createElement("svg", { width: size, height: size, viewBox: "0 0 48 48" }, /* @__PURE__ */ import_react.default.createElement(
674
91
  "circle",
675
92
  {
676
93
  cx: "24",
@@ -680,7 +97,7 @@ var Loader = ({
680
97
  stroke: alpha(accent, 0.15),
681
98
  strokeWidth: "4"
682
99
  }
683
- ), /* @__PURE__ */ import_react13.default.createElement(
100
+ ), /* @__PURE__ */ import_react.default.createElement(
684
101
  "circle",
685
102
  {
686
103
  cx: "24",
@@ -693,40 +110,40 @@ var Loader = ({
693
110
  strokeDasharray: "31.4 94.2",
694
111
  style: { transformOrigin: "center", animation: `spin ${dur} linear infinite` }
695
112
  }
696
- ), /* @__PURE__ */ import_react13.default.createElement("style", null, `@keyframes spin { to { transform: rotate(360deg); } }`)), labelEl);
697
- if (type === "pulse") return /* @__PURE__ */ import_react13.default.createElement("div", { style: wrapStyle }, /* @__PURE__ */ import_react13.default.createElement("div", { style: { position: "relative", width: size, height: size } }, /* @__PURE__ */ import_react13.default.createElement("div", { style: {
113
+ ), /* @__PURE__ */ import_react.default.createElement("style", null, `@keyframes spin { to { transform: rotate(360deg); } }`)), labelEl);
114
+ if (type === "pulse") return /* @__PURE__ */ import_react.default.createElement("div", { style: wrapStyle }, /* @__PURE__ */ import_react.default.createElement("div", { style: { position: "relative", width: size, height: size } }, /* @__PURE__ */ import_react.default.createElement("div", { style: {
698
115
  position: "absolute",
699
116
  inset: 0,
700
117
  borderRadius: "50%",
701
118
  background: alpha(accent, 0.2),
702
119
  animation: `pulse ${dur} ease-out infinite`
703
- } }), /* @__PURE__ */ import_react13.default.createElement("div", { style: {
120
+ } }), /* @__PURE__ */ import_react.default.createElement("div", { style: {
704
121
  position: "absolute",
705
122
  inset: "25%",
706
123
  borderRadius: "50%",
707
124
  background: accent
708
- } }), /* @__PURE__ */ import_react13.default.createElement("style", null, `@keyframes pulse { 0%{transform:scale(1);opacity:1} 100%{transform:scale(2);opacity:0} }`)), labelEl);
709
- if (type === "dots") return /* @__PURE__ */ import_react13.default.createElement("div", { style: wrapStyle }, /* @__PURE__ */ import_react13.default.createElement("div", { style: { display: "flex", gap: "8px", alignItems: "center" } }, [0, 1, 2].map((i) => /* @__PURE__ */ import_react13.default.createElement("div", { key: i, style: {
125
+ } }), /* @__PURE__ */ import_react.default.createElement("style", null, `@keyframes pulse { 0%{transform:scale(1);opacity:1} 100%{transform:scale(2);opacity:0} }`)), labelEl);
126
+ if (type === "dots") return /* @__PURE__ */ import_react.default.createElement("div", { style: wrapStyle }, /* @__PURE__ */ import_react.default.createElement("div", { style: { display: "flex", gap: "8px", alignItems: "center" } }, [0, 1, 2].map((i) => /* @__PURE__ */ import_react.default.createElement("div", { key: i, style: {
710
127
  width: size / 5,
711
128
  height: size / 5,
712
129
  borderRadius: "50%",
713
130
  background: dots === i ? accent : alpha(accent, 0.25),
714
131
  transition: "background 0.2s"
715
132
  } }))), labelEl);
716
- if (type === "bar") return /* @__PURE__ */ import_react13.default.createElement("div", { style: wrapStyle }, /* @__PURE__ */ import_react13.default.createElement("div", { style: {
133
+ if (type === "bar") return /* @__PURE__ */ import_react.default.createElement("div", { style: wrapStyle }, /* @__PURE__ */ import_react.default.createElement("div", { style: {
717
134
  width: size * 3,
718
135
  height: size / 8,
719
136
  background: alpha(accent, 0.15),
720
137
  borderRadius: "99px",
721
138
  overflow: "hidden"
722
- } }, /* @__PURE__ */ import_react13.default.createElement("div", { style: {
139
+ } }, /* @__PURE__ */ import_react.default.createElement("div", { style: {
723
140
  height: "100%",
724
141
  borderRadius: "99px",
725
142
  background: accent,
726
143
  width: `${progress}%`,
727
144
  transition: "width 0.03s linear"
728
145
  } })), labelEl);
729
- if (type === "ring") return /* @__PURE__ */ import_react13.default.createElement("div", { style: wrapStyle }, /* @__PURE__ */ import_react13.default.createElement("div", { style: {
146
+ if (type === "ring") return /* @__PURE__ */ import_react.default.createElement("div", { style: wrapStyle }, /* @__PURE__ */ import_react.default.createElement("div", { style: {
730
147
  width: size,
731
148
  height: size,
732
149
  borderRadius: "50%",
@@ -734,86 +151,12 @@ var Loader = ({
734
151
  borderTop: `4px solid ${accent}`,
735
152
  borderRight: `4px solid ${accent}`,
736
153
  animation: `spin ${dur} linear infinite`
737
- } }), /* @__PURE__ */ import_react13.default.createElement("style", null, `@keyframes spin { to { transform: rotate(360deg); } }`), labelEl);
154
+ } }), /* @__PURE__ */ import_react.default.createElement("style", null, `@keyframes spin { to { transform: rotate(360deg); } }`), labelEl);
738
155
  return null;
739
156
  };
740
157
 
741
- // src/components/Avatar/Avatar.jsx
742
- var import_react14 = __toESM(require("react"));
743
- var Avatar = ({
744
- image = "https://i.pravatar.cc/150?img=32",
745
- alt = "User Avatar",
746
- size = "60px",
747
- borderColor = "#7c3aed",
748
- borderWidth = "4px",
749
- radius = "50%"
750
- }) => {
751
- return /* @__PURE__ */ import_react14.default.createElement("div", { style: {
752
- width: size,
753
- height: size,
754
- borderRadius: radius,
755
- border: borderWidth + " solid " + borderColor,
756
- overflow: "hidden",
757
- display: "flex",
758
- alignItems: "center",
759
- justifyContent: "center",
760
- background: "#f3f4f6"
761
- } }, /* @__PURE__ */ import_react14.default.createElement("img", { src: image, alt, style: {
762
- width: "100%",
763
- height: "100%",
764
- objectFit: "cover"
765
- } }));
766
- };
767
-
768
- // src/components/DividerLine/DividerLine.jsx
769
- var import_react15 = __toESM(require("react"));
770
- var DividerLine = ({
771
- text = "Section",
772
- textColor = "#f1f5f9",
773
- lineColor = "#334155",
774
- spacing = "20px",
775
- thickness = "2px",
776
- borderRadius = "4px"
777
- }) => {
778
- return /* @__PURE__ */ import_react15.default.createElement("div", { style: { display: "flex", alignItems: "center", margin: spacing } }, /* @__PURE__ */ import_react15.default.createElement("div", { style: { flex: 1, height: thickness, background: lineColor, borderRadius } }), /* @__PURE__ */ import_react15.default.createElement("span", { style: { margin: "0 12px", color: textColor, fontSize: "14px", fontWeight: "600" } }, text), /* @__PURE__ */ import_react15.default.createElement("div", { style: { flex: 1, height: thickness, background: lineColor, borderRadius } }));
779
- };
780
-
781
- // src/components/Tabs/Tabs.jsx
782
- var import_react16 = __toESM(require("react"));
783
- var Tabs = ({
784
- tabs = [
785
- { label: "Tab 1", content: "Content for Tab 1" },
786
- { label: "Tab 2", content: "Content for Tab 2" },
787
- { label: "Tab 3", content: "Content for Tab 3" }
788
- ],
789
- bg = "#0f172a",
790
- accent = "#2563eb",
791
- textColor = "#f1f5f9",
792
- radius = "8px"
793
- }) => {
794
- const [activeTab, setActiveTab] = (0, import_react16.useState)(0);
795
- return /* @__PURE__ */ import_react16.default.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__ */ import_react16.default.createElement("div", { style: { display: "flex", borderBottom: `2px solid ${accent}` } }, tabs.map((tab, index) => /* @__PURE__ */ import_react16.default.createElement(
796
- "button",
797
- {
798
- key: index,
799
- onClick: () => setActiveTab(index),
800
- style: {
801
- padding: "10px 20px",
802
- background: activeTab === index ? accent : "transparent",
803
- color: activeTab === index ? "white" : textColor,
804
- border: "none",
805
- borderRadius: radius,
806
- cursor: "pointer",
807
- fontWeight: activeTab === index ? "700" : "400",
808
- transition: "background 0.3s, color 0.3s"
809
- }
810
- },
811
- tab.label
812
- ))), /* @__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)));
813
- };
814
-
815
158
  // src/components/NotificationToast/NotificationToast.jsx
816
- var import_react17 = __toESM(require("react"));
159
+ var import_react2 = __toESM(require("react"));
817
160
  var NotificationToast = ({
818
161
  title = "New Message",
819
162
  message = "You have a new notification from the team.",
@@ -824,8 +167,8 @@ var NotificationToast = ({
824
167
  radius = "14px",
825
168
  showProgress = true
826
169
  }) => {
827
- const [visible, setVisible] = (0, import_react17.useState)(true);
828
- const [progress, setProgress] = (0, import_react17.useState)(100);
170
+ const [visible, setVisible] = (0, import_react2.useState)(true);
171
+ const [progress, setProgress] = (0, import_react2.useState)(100);
829
172
  const typeColors = {
830
173
  success: "#10b981",
831
174
  error: "#ef4444",
@@ -839,7 +182,7 @@ var NotificationToast = ({
839
182
  info: "M13 16h-1v-4h-1m1-4h.01M12 2a10 10 0 100 20A10 10 0 0012 2z"
840
183
  };
841
184
  const color = typeColors[type] || accent;
842
- (0, import_react17.useEffect)(() => {
185
+ (0, import_react2.useEffect)(() => {
843
186
  if (!showProgress) return;
844
187
  const step = 100 / (duration / 50);
845
188
  const timer = setInterval(() => {
@@ -855,7 +198,7 @@ var NotificationToast = ({
855
198
  return () => clearInterval(timer);
856
199
  }, [duration, showProgress]);
857
200
  if (!visible) return null;
858
- return /* @__PURE__ */ import_react17.default.createElement("div", { style: {
201
+ return /* @__PURE__ */ import_react2.default.createElement("div", { style: {
859
202
  background: bg,
860
203
  borderRadius: radius,
861
204
  padding: "16px 18px",
@@ -866,7 +209,7 @@ var NotificationToast = ({
866
209
  border: `1px solid rgba(255,255,255,0.08)`,
867
210
  position: "relative",
868
211
  overflow: "hidden"
869
- } }, /* @__PURE__ */ import_react17.default.createElement("div", { style: { display: "flex", alignItems: "flex-start", gap: "12px" } }, /* @__PURE__ */ import_react17.default.createElement("div", { style: {
212
+ } }, /* @__PURE__ */ import_react2.default.createElement("div", { style: { display: "flex", alignItems: "flex-start", gap: "12px" } }, /* @__PURE__ */ import_react2.default.createElement("div", { style: {
870
213
  width: 36,
871
214
  height: 36,
872
215
  borderRadius: "10px",
@@ -876,7 +219,7 @@ var NotificationToast = ({
876
219
  display: "flex",
877
220
  alignItems: "center",
878
221
  justifyContent: "center"
879
- } }, /* @__PURE__ */ import_react17.default.createElement(
222
+ } }, /* @__PURE__ */ import_react2.default.createElement(
880
223
  "svg",
881
224
  {
882
225
  width: "16",
@@ -888,8 +231,8 @@ var NotificationToast = ({
888
231
  strokeLinecap: "round",
889
232
  strokeLinejoin: "round"
890
233
  },
891
- /* @__PURE__ */ import_react17.default.createElement("path", { d: typeIcons[type] || typeIcons.info })
892
- )), /* @__PURE__ */ import_react17.default.createElement("div", { style: { flex: 1, minWidth: 0 } }, /* @__PURE__ */ import_react17.default.createElement("div", { style: { fontSize: "14px", fontWeight: "700", marginBottom: "3px" } }, title), /* @__PURE__ */ import_react17.default.createElement("div", { style: { fontSize: "12px", color: "rgba(255,255,255,0.5)", lineHeight: 1.5 } }, message)), /* @__PURE__ */ import_react17.default.createElement(
234
+ /* @__PURE__ */ import_react2.default.createElement("path", { d: typeIcons[type] || typeIcons.info })
235
+ )), /* @__PURE__ */ import_react2.default.createElement("div", { style: { flex: 1, minWidth: 0 } }, /* @__PURE__ */ import_react2.default.createElement("div", { style: { fontSize: "14px", fontWeight: "700", marginBottom: "3px" } }, title), /* @__PURE__ */ import_react2.default.createElement("div", { style: { fontSize: "12px", color: "rgba(255,255,255,0.5)", lineHeight: 1.5 } }, message)), /* @__PURE__ */ import_react2.default.createElement(
893
236
  "button",
894
237
  {
895
238
  onClick: () => setVisible(false),
@@ -903,7 +246,7 @@ var NotificationToast = ({
903
246
  lineHeight: 1
904
247
  }
905
248
  },
906
- /* @__PURE__ */ import_react17.default.createElement(
249
+ /* @__PURE__ */ import_react2.default.createElement(
907
250
  "svg",
908
251
  {
909
252
  width: "14",
@@ -914,16 +257,16 @@ var NotificationToast = ({
914
257
  strokeWidth: "2.5",
915
258
  strokeLinecap: "round"
916
259
  },
917
- /* @__PURE__ */ import_react17.default.createElement("path", { d: "M18 6L6 18M6 6l12 12" })
260
+ /* @__PURE__ */ import_react2.default.createElement("path", { d: "M18 6L6 18M6 6l12 12" })
918
261
  )
919
- )), showProgress && /* @__PURE__ */ import_react17.default.createElement("div", { style: {
262
+ )), showProgress && /* @__PURE__ */ import_react2.default.createElement("div", { style: {
920
263
  position: "absolute",
921
264
  bottom: 0,
922
265
  left: 0,
923
266
  right: 0,
924
267
  height: "3px",
925
268
  background: "rgba(255,255,255,0.07)"
926
- } }, /* @__PURE__ */ import_react17.default.createElement("div", { style: {
269
+ } }, /* @__PURE__ */ import_react2.default.createElement("div", { style: {
927
270
  height: "100%",
928
271
  width: `${progress}%`,
929
272
  background: color,
@@ -933,7 +276,7 @@ var NotificationToast = ({
933
276
  };
934
277
 
935
278
  // src/components/AvatarCard/AvatarCard.jsx
936
- var import_react18 = __toESM(require("react"));
279
+ var import_react3 = __toESM(require("react"));
937
280
  var AvatarCard = ({
938
281
  name = "Aryan Sharma",
939
282
  role = "Frontend Developer",
@@ -946,7 +289,7 @@ var AvatarCard = ({
946
289
  bg = "#0f172a",
947
290
  radius = "20px"
948
291
  }) => {
949
- const [followed, setFollowed] = (0, import_react18.useState)(false);
292
+ const [followed, setFollowed] = (0, import_react3.useState)(false);
950
293
  const alpha = (hex, op) => {
951
294
  const r = parseInt(hex.slice(1, 3), 16);
952
295
  const g = parseInt(hex.slice(3, 5), 16);
@@ -959,7 +302,7 @@ var AvatarCard = ({
959
302
  { label: "Following", value: following },
960
303
  { label: "Projects", value: projects }
961
304
  ];
962
- return /* @__PURE__ */ import_react18.default.createElement("div", { style: {
305
+ return /* @__PURE__ */ import_react3.default.createElement("div", { style: {
963
306
  background: bg,
964
307
  borderRadius: radius,
965
308
  padding: "24px 20px",
@@ -970,14 +313,14 @@ var AvatarCard = ({
970
313
  border: "1px solid rgba(255,255,255,0.08)",
971
314
  position: "relative",
972
315
  overflow: "hidden"
973
- } }, /* @__PURE__ */ import_react18.default.createElement("div", { style: {
316
+ } }, /* @__PURE__ */ import_react3.default.createElement("div", { style: {
974
317
  position: "absolute",
975
318
  top: 0,
976
319
  left: 0,
977
320
  right: 0,
978
321
  height: "3px",
979
322
  background: `linear-gradient(90deg, ${accent}, ${alpha(accent, 0.3)})`
980
- } }), /* @__PURE__ */ import_react18.default.createElement("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", marginBottom: "16px" } }, /* @__PURE__ */ import_react18.default.createElement("div", { style: {
323
+ } }), /* @__PURE__ */ import_react3.default.createElement("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", marginBottom: "16px" } }, /* @__PURE__ */ import_react3.default.createElement("div", { style: {
981
324
  width: 72,
982
325
  height: 72,
983
326
  borderRadius: "50%",
@@ -990,7 +333,7 @@ var AvatarCard = ({
990
333
  color: "#fff",
991
334
  border: `3px solid ${alpha(accent, 0.4)}`,
992
335
  marginBottom: "12px"
993
- } }, !avatar && initials), /* @__PURE__ */ import_react18.default.createElement("div", { style: { fontSize: "16px", fontWeight: "700", marginBottom: "3px" } }, name), /* @__PURE__ */ import_react18.default.createElement("div", { style: {
336
+ } }, !avatar && initials), /* @__PURE__ */ import_react3.default.createElement("div", { style: { fontSize: "16px", fontWeight: "700", marginBottom: "3px" } }, name), /* @__PURE__ */ import_react3.default.createElement("div", { style: {
994
337
  fontSize: "12px",
995
338
  fontWeight: "600",
996
339
  color: accent,
@@ -998,14 +341,14 @@ var AvatarCard = ({
998
341
  padding: "2px 10px",
999
342
  borderRadius: "20px",
1000
343
  border: `1px solid ${alpha(accent, 0.3)}`
1001
- } }, role)), /* @__PURE__ */ import_react18.default.createElement("p", { style: {
344
+ } }, role)), /* @__PURE__ */ import_react3.default.createElement("p", { style: {
1002
345
  fontSize: "12px",
1003
346
  color: "rgba(255,255,255,0.45)",
1004
347
  textAlign: "center",
1005
348
  lineHeight: 1.6,
1006
349
  marginBottom: "18px",
1007
350
  padding: "0 4px"
1008
- } }, bio), /* @__PURE__ */ import_react18.default.createElement("div", { style: {
351
+ } }, bio), /* @__PURE__ */ import_react3.default.createElement("div", { style: {
1009
352
  display: "flex",
1010
353
  justifyContent: "space-around",
1011
354
  background: "rgba(255,255,255,0.04)",
@@ -1013,11 +356,11 @@ var AvatarCard = ({
1013
356
  borderRadius: "12px",
1014
357
  padding: "12px 8px",
1015
358
  marginBottom: "16px"
1016
- } }, stats.map((s) => /* @__PURE__ */ import_react18.default.createElement("div", { key: s.label, style: { textAlign: "center" } }, /* @__PURE__ */ import_react18.default.createElement("div", { style: { fontSize: "18px", fontWeight: "800" } }, s.value >= 1e3 ? (s.value / 1e3).toFixed(1) + "k" : s.value), /* @__PURE__ */ import_react18.default.createElement("div", { style: { fontSize: "10px", color: "rgba(255,255,255,0.4)", marginTop: "2px" } }, s.label)))));
359
+ } }, stats.map((s) => /* @__PURE__ */ import_react3.default.createElement("div", { key: s.label, style: { textAlign: "center" } }, /* @__PURE__ */ import_react3.default.createElement("div", { style: { fontSize: "18px", fontWeight: "800" } }, s.value >= 1e3 ? (s.value / 1e3).toFixed(1) + "k" : s.value), /* @__PURE__ */ import_react3.default.createElement("div", { style: { fontSize: "10px", color: "rgba(255,255,255,0.4)", marginTop: "2px" } }, s.label)))));
1017
360
  };
1018
361
 
1019
362
  // src/components/PricingCard/PricingCard.jsx
1020
- var import_react19 = __toESM(require("react"));
363
+ var import_react4 = __toESM(require("react"));
1021
364
  var PricingCard = ({
1022
365
  planName = "Pro Plan",
1023
366
  description = "For teams that need more power.",
@@ -1045,7 +388,7 @@ var PricingCard = ({
1045
388
  const b = parseInt(hex.slice(5, 7), 16);
1046
389
  return `rgba(${r},${g},${b},${op})`;
1047
390
  };
1048
- return /* @__PURE__ */ import_react19.default.createElement("div", { style: {
391
+ return /* @__PURE__ */ import_react4.default.createElement("div", { style: {
1049
392
  background: bg,
1050
393
  borderRadius: radius,
1051
394
  padding: "28px 24px",
@@ -1056,14 +399,14 @@ var PricingCard = ({
1056
399
  border: `1px solid ${alpha(accent, 0.25)}`,
1057
400
  position: "relative",
1058
401
  overflow: "hidden"
1059
- } }, /* @__PURE__ */ import_react19.default.createElement("div", { style: {
402
+ } }, /* @__PURE__ */ import_react4.default.createElement("div", { style: {
1060
403
  position: "absolute",
1061
404
  top: 0,
1062
405
  left: 0,
1063
406
  right: 0,
1064
407
  height: "3px",
1065
408
  background: `linear-gradient(90deg, ${accent}, ${alpha(accent, 0.3)})`
1066
- } }), badgeText && /* @__PURE__ */ import_react19.default.createElement("div", { style: {
409
+ } }), badgeText && /* @__PURE__ */ import_react4.default.createElement("div", { style: {
1067
410
  display: "inline-flex",
1068
411
  alignItems: "center",
1069
412
  gap: "6px",
@@ -1077,7 +420,7 @@ var PricingCard = ({
1077
420
  color: accent,
1078
421
  letterSpacing: "0.5px",
1079
422
  textTransform: "uppercase"
1080
- } }, /* @__PURE__ */ import_react19.default.createElement("div", { style: { width: 6, height: 6, borderRadius: "50%", background: accent } }), badgeText), /* @__PURE__ */ import_react19.default.createElement("div", { style: { fontSize: "20px", fontWeight: "800", marginBottom: "4px" } }, planName), /* @__PURE__ */ import_react19.default.createElement("div", { style: { fontSize: "13px", color: "rgba(255,255,255,0.45)", marginBottom: "20px", lineHeight: 1.5 } }, description), /* @__PURE__ */ import_react19.default.createElement("div", { style: { display: "flex", alignItems: "flex-end", gap: "3px", marginBottom: "4px" } }, /* @__PURE__ */ import_react19.default.createElement("span", { style: { fontSize: "18px", fontWeight: "700", color: "rgba(255,255,255,0.5)", lineHeight: 2 } }, currency), /* @__PURE__ */ import_react19.default.createElement("span", { style: { fontSize: "52px", fontWeight: "800", color: "#fff", lineHeight: 1 } }, Math.round(price))), /* @__PURE__ */ import_react19.default.createElement("div", { style: { fontSize: "12px", color: "rgba(255,255,255,0.35)", marginBottom: "20px" } }, period), /* @__PURE__ */ import_react19.default.createElement("div", { style: { height: "1px", background: "rgba(255,255,255,0.07)", marginBottom: "16px" } }), /* @__PURE__ */ import_react19.default.createElement("ul", { style: { listStyle: "none", padding: 0, margin: "0 0 22px", display: "flex", flexDirection: "column", gap: "10px" } }, features.map((f, i) => /* @__PURE__ */ import_react19.default.createElement("li", { key: i, style: { display: "flex", alignItems: "center", gap: "10px", fontSize: "13px", color: "rgba(255,255,255,0.75)" } }, /* @__PURE__ */ import_react19.default.createElement("div", { style: {
423
+ } }, /* @__PURE__ */ import_react4.default.createElement("div", { style: { width: 6, height: 6, borderRadius: "50%", background: accent } }), badgeText), /* @__PURE__ */ import_react4.default.createElement("div", { style: { fontSize: "20px", fontWeight: "800", marginBottom: "4px" } }, planName), /* @__PURE__ */ import_react4.default.createElement("div", { style: { fontSize: "13px", color: "rgba(255,255,255,0.45)", marginBottom: "20px", lineHeight: 1.5 } }, description), /* @__PURE__ */ import_react4.default.createElement("div", { style: { display: "flex", alignItems: "flex-end", gap: "3px", marginBottom: "4px" } }, /* @__PURE__ */ import_react4.default.createElement("span", { style: { fontSize: "18px", fontWeight: "700", color: "rgba(255,255,255,0.5)", lineHeight: 2 } }, currency), /* @__PURE__ */ import_react4.default.createElement("span", { style: { fontSize: "52px", fontWeight: "800", color: "#fff", lineHeight: 1 } }, Math.round(price))), /* @__PURE__ */ import_react4.default.createElement("div", { style: { fontSize: "12px", color: "rgba(255,255,255,0.35)", marginBottom: "20px" } }, period), /* @__PURE__ */ import_react4.default.createElement("div", { style: { height: "1px", background: "rgba(255,255,255,0.07)", marginBottom: "16px" } }), /* @__PURE__ */ import_react4.default.createElement("ul", { style: { listStyle: "none", padding: 0, margin: "0 0 22px", display: "flex", flexDirection: "column", gap: "10px" } }, features.map((f, i) => /* @__PURE__ */ import_react4.default.createElement("li", { key: i, style: { display: "flex", alignItems: "center", gap: "10px", fontSize: "13px", color: "rgba(255,255,255,0.75)" } }, /* @__PURE__ */ import_react4.default.createElement("div", { style: {
1081
424
  width: "18px",
1082
425
  height: "18px",
1083
426
  borderRadius: "50%",
@@ -1087,7 +430,7 @@ var PricingCard = ({
1087
430
  justifyContent: "center",
1088
431
  background: alpha(accent, 0.18),
1089
432
  border: `1px solid ${alpha(accent, 0.4)}`
1090
- } }, /* @__PURE__ */ import_react19.default.createElement(
433
+ } }, /* @__PURE__ */ import_react4.default.createElement(
1091
434
  "svg",
1092
435
  {
1093
436
  width: "10",
@@ -1099,8 +442,8 @@ var PricingCard = ({
1099
442
  strokeLinecap: "round",
1100
443
  strokeLinejoin: "round"
1101
444
  },
1102
- /* @__PURE__ */ import_react19.default.createElement("polyline", { points: "1.5,6 4.5,9 10.5,3" })
1103
- )), f))), /* @__PURE__ */ import_react19.default.createElement(
445
+ /* @__PURE__ */ import_react4.default.createElement("polyline", { points: "1.5,6 4.5,9 10.5,3" })
446
+ )), f))), /* @__PURE__ */ import_react4.default.createElement(
1104
447
  "button",
1105
448
  {
1106
449
  onClick: onCtaClick,
@@ -1125,7 +468,7 @@ var PricingCard = ({
1125
468
  };
1126
469
 
1127
470
  // src/components/Navbar/Navbar.jsx
1128
- var import_react20 = __toESM(require("react"));
471
+ var import_react5 = __toESM(require("react"));
1129
472
  var Navbar = ({
1130
473
  logo = "VirtualAI",
1131
474
  links = ["Home", "Features", "Pricing", "Blog"],
@@ -1137,28 +480,28 @@ var Navbar = ({
1137
480
  onLinkClick = () => {
1138
481
  }
1139
482
  }) => {
1140
- const [scrolled, setScrolled] = (0, import_react20.useState)(false);
1141
- const [menuOpen, setMenuOpen] = (0, import_react20.useState)(false);
1142
- const [active, setActive] = (0, import_react20.useState)("Home");
1143
- const [isMobile, setIsMobile] = (0, import_react20.useState)(false);
483
+ const [scrolled, setScrolled] = (0, import_react5.useState)(false);
484
+ const [menuOpen, setMenuOpen] = (0, import_react5.useState)(false);
485
+ const [active, setActive] = (0, import_react5.useState)("Home");
486
+ const [isMobile, setIsMobile] = (0, import_react5.useState)(false);
1144
487
  const alpha = (hex, op) => {
1145
488
  const r = parseInt(hex.slice(1, 3), 16);
1146
489
  const g = parseInt(hex.slice(3, 5), 16);
1147
490
  const b = parseInt(hex.slice(5, 7), 16);
1148
491
  return `rgba(${r},${g},${b},${op})`;
1149
492
  };
1150
- (0, import_react20.useEffect)(() => {
493
+ (0, import_react5.useEffect)(() => {
1151
494
  const checkMobile = () => setIsMobile(window.innerWidth < 768);
1152
495
  checkMobile();
1153
496
  window.addEventListener("resize", checkMobile);
1154
497
  return () => window.removeEventListener("resize", checkMobile);
1155
498
  }, []);
1156
- (0, import_react20.useEffect)(() => {
499
+ (0, import_react5.useEffect)(() => {
1157
500
  const handler = () => setScrolled(window.scrollY > 10);
1158
501
  window.addEventListener("scroll", handler);
1159
502
  return () => window.removeEventListener("scroll", handler);
1160
503
  }, []);
1161
- (0, import_react20.useEffect)(() => {
504
+ (0, import_react5.useEffect)(() => {
1162
505
  if (!isMobile) setMenuOpen(false);
1163
506
  }, [isMobile]);
1164
507
  const handleLink = (link) => {
@@ -1166,7 +509,7 @@ var Navbar = ({
1166
509
  setMenuOpen(false);
1167
510
  onLinkClick(link);
1168
511
  };
1169
- return /* @__PURE__ */ import_react20.default.createElement(import_react20.default.Fragment, null, /* @__PURE__ */ import_react20.default.createElement("style", null, `
512
+ return /* @__PURE__ */ import_react5.default.createElement(import_react5.default.Fragment, null, /* @__PURE__ */ import_react5.default.createElement("style", null, `
1170
513
  @keyframes nbSlideDown {
1171
514
  from { opacity: 0; transform: translateY(-8px); }
1172
515
  to { opacity: 1; transform: translateY(0); }
@@ -1175,7 +518,7 @@ var Navbar = ({
1175
518
  .nb-cta:hover { opacity: 0.85 !important; }
1176
519
  .nb-ham:hover { background: rgba(255,255,255,0.1) !important; }
1177
520
  .nb-mlink:hover { background: rgba(255,255,255,0.06) !important; }
1178
- `), /* @__PURE__ */ import_react20.default.createElement("nav", { style: {
521
+ `), /* @__PURE__ */ import_react5.default.createElement("nav", { style: {
1179
522
  position: "sticky",
1180
523
  top: 0,
1181
524
  left: 0,
@@ -1189,7 +532,7 @@ var Navbar = ({
1189
532
  fontFamily: "system-ui, -apple-system, sans-serif",
1190
533
  width: "100%",
1191
534
  boxSizing: "border-box"
1192
- } }, /* @__PURE__ */ import_react20.default.createElement("div", { style: {
535
+ } }, /* @__PURE__ */ import_react5.default.createElement("div", { style: {
1193
536
  maxWidth: "1200px",
1194
537
  margin: "0 auto",
1195
538
  padding: "0 20px",
@@ -1199,7 +542,7 @@ var Navbar = ({
1199
542
  justifyContent: "space-between",
1200
543
  gap: "16px",
1201
544
  boxSizing: "border-box"
1202
- } }, /* @__PURE__ */ import_react20.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: "8px", cursor: "pointer", flexShrink: 0 } }, /* @__PURE__ */ import_react20.default.createElement("div", { style: {
545
+ } }, /* @__PURE__ */ import_react5.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: "8px", cursor: "pointer", flexShrink: 0 } }, /* @__PURE__ */ import_react5.default.createElement("div", { style: {
1203
546
  width: isMobile ? "26px" : "30px",
1204
547
  height: isMobile ? "26px" : "30px",
1205
548
  borderRadius: "8px",
@@ -1211,12 +554,12 @@ var Navbar = ({
1211
554
  fontWeight: "800",
1212
555
  color: "#fff",
1213
556
  flexShrink: 0
1214
- } }, logo[0]), /* @__PURE__ */ import_react20.default.createElement("span", { style: {
557
+ } }, logo[0]), /* @__PURE__ */ import_react5.default.createElement("span", { style: {
1215
558
  fontSize: isMobile ? "14px" : "16px",
1216
559
  fontWeight: "800",
1217
560
  color: "#fff",
1218
561
  letterSpacing: "-0.3px"
1219
- } }, logo)), !isMobile && /* @__PURE__ */ import_react20.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: "2px", flex: 1, justifyContent: "center" } }, links.map((link) => /* @__PURE__ */ import_react20.default.createElement(
562
+ } }, logo)), !isMobile && /* @__PURE__ */ import_react5.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: "2px", flex: 1, justifyContent: "center" } }, links.map((link) => /* @__PURE__ */ import_react5.default.createElement(
1220
563
  "button",
1221
564
  {
1222
565
  key: link,
@@ -1237,7 +580,7 @@ var Navbar = ({
1237
580
  }
1238
581
  },
1239
582
  link
1240
- ))), /* @__PURE__ */ import_react20.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: "8px", flexShrink: 0 } }, /* @__PURE__ */ import_react20.default.createElement(
583
+ ))), /* @__PURE__ */ import_react5.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: "8px", flexShrink: 0 } }, /* @__PURE__ */ import_react5.default.createElement(
1241
584
  "button",
1242
585
  {
1243
586
  className: "nb-cta",
@@ -1257,7 +600,7 @@ var Navbar = ({
1257
600
  }
1258
601
  },
1259
602
  ctaText
1260
- ), isMobile && /* @__PURE__ */ import_react20.default.createElement(
603
+ ), isMobile && /* @__PURE__ */ import_react5.default.createElement(
1261
604
  "button",
1262
605
  {
1263
606
  className: "nb-ham",
@@ -1279,7 +622,7 @@ var Navbar = ({
1279
622
  padding: 0
1280
623
  }
1281
624
  },
1282
- /* @__PURE__ */ import_react20.default.createElement("div", { style: {
625
+ /* @__PURE__ */ import_react5.default.createElement("div", { style: {
1283
626
  width: "16px",
1284
627
  height: "1.5px",
1285
628
  background: "rgba(255,255,255,0.7)",
@@ -1287,7 +630,7 @@ var Navbar = ({
1287
630
  transform: menuOpen ? "rotate(45deg) translate(4px, 4px)" : "none",
1288
631
  transition: "transform 0.25s"
1289
632
  } }),
1290
- /* @__PURE__ */ import_react20.default.createElement("div", { style: {
633
+ /* @__PURE__ */ import_react5.default.createElement("div", { style: {
1291
634
  width: "16px",
1292
635
  height: "1.5px",
1293
636
  background: "rgba(255,255,255,0.7)",
@@ -1295,7 +638,7 @@ var Navbar = ({
1295
638
  opacity: menuOpen ? 0 : 1,
1296
639
  transition: "opacity 0.2s"
1297
640
  } }),
1298
- /* @__PURE__ */ import_react20.default.createElement("div", { style: {
641
+ /* @__PURE__ */ import_react5.default.createElement("div", { style: {
1299
642
  width: "16px",
1300
643
  height: "1.5px",
1301
644
  background: "rgba(255,255,255,0.7)",
@@ -1303,7 +646,7 @@ var Navbar = ({
1303
646
  transform: menuOpen ? "rotate(-45deg) translate(4px, -4px)" : "none",
1304
647
  transition: "transform 0.25s"
1305
648
  } })
1306
- ))), isMobile && menuOpen && /* @__PURE__ */ import_react20.default.createElement("div", { style: {
649
+ ))), isMobile && menuOpen && /* @__PURE__ */ import_react5.default.createElement("div", { style: {
1307
650
  animation: "nbSlideDown 0.2s ease",
1308
651
  borderTop: "1px solid rgba(255,255,255,0.06)",
1309
652
  padding: "10px 16px 16px",
@@ -1311,7 +654,7 @@ var Navbar = ({
1311
654
  flexDirection: "column",
1312
655
  gap: "3px",
1313
656
  background: alpha(bg, 0.98)
1314
- } }, links.map((link) => /* @__PURE__ */ import_react20.default.createElement(
657
+ } }, links.map((link) => /* @__PURE__ */ import_react5.default.createElement(
1315
658
  "button",
1316
659
  {
1317
660
  key: link,
@@ -1336,7 +679,7 @@ var Navbar = ({
1336
679
  }
1337
680
  },
1338
681
  link,
1339
- active === link && /* @__PURE__ */ import_react20.default.createElement(
682
+ active === link && /* @__PURE__ */ import_react5.default.createElement(
1340
683
  "svg",
1341
684
  {
1342
685
  width: "14",
@@ -1347,9 +690,9 @@ var Navbar = ({
1347
690
  strokeWidth: "2.5",
1348
691
  strokeLinecap: "round"
1349
692
  },
1350
- /* @__PURE__ */ import_react20.default.createElement("polyline", { points: "9 18 15 12 9 6" })
693
+ /* @__PURE__ */ import_react5.default.createElement("polyline", { points: "9 18 15 12 9 6" })
1351
694
  )
1352
- )), /* @__PURE__ */ import_react20.default.createElement("div", { style: { height: "1px", background: "rgba(255,255,255,0.07)", margin: "8px 0" } }), /* @__PURE__ */ import_react20.default.createElement(
695
+ )), /* @__PURE__ */ import_react5.default.createElement("div", { style: { height: "1px", background: "rgba(255,255,255,0.07)", margin: "8px 0" } }), /* @__PURE__ */ import_react5.default.createElement(
1353
696
  "button",
1354
697
  {
1355
698
  onClick: () => {
@@ -1374,7 +717,7 @@ var Navbar = ({
1374
717
  };
1375
718
 
1376
719
  // src/components/Footer/Footer.jsx
1377
- var import_react21 = __toESM(require("react"));
720
+ var import_react6 = __toESM(require("react"));
1378
721
  var Footer = ({
1379
722
  logo = "VirtualAI",
1380
723
  links = ["Home", "Features", "Pricing", "Blog", "Contact"],
@@ -1382,21 +725,21 @@ var Footer = ({
1382
725
  accent = "#6366f1",
1383
726
  bg = "#0f172a"
1384
727
  }) => {
1385
- return /* @__PURE__ */ import_react21.default.createElement("footer", { style: {
728
+ return /* @__PURE__ */ import_react6.default.createElement("footer", { style: {
1386
729
  background: bg,
1387
730
  borderTop: "1px solid rgba(255,255,255,0.06)",
1388
731
  fontFamily: "system-ui, sans-serif",
1389
732
  width: "100%",
1390
733
  boxSizing: "border-box",
1391
734
  padding: "28px 24px"
1392
- } }, /* @__PURE__ */ import_react21.default.createElement("div", { style: {
735
+ } }, /* @__PURE__ */ import_react6.default.createElement("div", { style: {
1393
736
  maxWidth: "900px",
1394
737
  margin: "0 auto",
1395
738
  display: "flex",
1396
739
  flexDirection: "column",
1397
740
  alignItems: "center",
1398
741
  gap: "20px"
1399
- } }, /* @__PURE__ */ import_react21.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: "8px" } }, /* @__PURE__ */ import_react21.default.createElement("div", { style: {
742
+ } }, /* @__PURE__ */ import_react6.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: "8px" } }, /* @__PURE__ */ import_react6.default.createElement("div", { style: {
1400
743
  width: "26px",
1401
744
  height: "26px",
1402
745
  borderRadius: "7px",
@@ -1407,7 +750,7 @@ var Footer = ({
1407
750
  fontSize: "12px",
1408
751
  fontWeight: "800",
1409
752
  color: "#fff"
1410
- } }, logo[0]), /* @__PURE__ */ import_react21.default.createElement("span", { style: { fontSize: "15px", fontWeight: "800", color: "#fff" } }, logo)), /* @__PURE__ */ import_react21.default.createElement("div", { style: { display: "flex", flexWrap: "wrap", justifyContent: "center", gap: "4px" } }, links.map((link) => /* @__PURE__ */ import_react21.default.createElement(
753
+ } }, logo[0]), /* @__PURE__ */ import_react6.default.createElement("span", { style: { fontSize: "15px", fontWeight: "800", color: "#fff" } }, logo)), /* @__PURE__ */ import_react6.default.createElement("div", { style: { display: "flex", flexWrap: "wrap", justifyContent: "center", gap: "4px" } }, links.map((link) => /* @__PURE__ */ import_react6.default.createElement(
1411
754
  "a",
1412
755
  {
1413
756
  key: link,
@@ -1424,11 +767,11 @@ var Footer = ({
1424
767
  onMouseLeave: (e) => e.currentTarget.style.color = "rgba(255,255,255,0.4)"
1425
768
  },
1426
769
  link
1427
- ))), /* @__PURE__ */ import_react21.default.createElement("div", { style: { width: "100%", height: "1px", background: "rgba(255,255,255,0.06)" } }), /* @__PURE__ */ import_react21.default.createElement("p", { style: { fontSize: "12px", color: "rgba(255,255,255,0.22)", margin: 0 } }, "\xA9 ", (/* @__PURE__ */ new Date()).getFullYear(), " ", copyright, ". All rights reserved.")));
770
+ ))), /* @__PURE__ */ import_react6.default.createElement("div", { style: { width: "100%", height: "1px", background: "rgba(255,255,255,0.06)" } }), /* @__PURE__ */ import_react6.default.createElement("p", { style: { fontSize: "12px", color: "rgba(255,255,255,0.22)", margin: 0 } }, "\xA9 ", (/* @__PURE__ */ new Date()).getFullYear(), " ", copyright, ". All rights reserved.")));
1428
771
  };
1429
772
 
1430
773
  // src/components/Sidebar/Sidebar.jsx
1431
- var import_react22 = __toESM(require("react"));
774
+ var import_react7 = __toESM(require("react"));
1432
775
  var Sidebar = ({
1433
776
  logo = "VirtualAI",
1434
777
  accent = "#6366f1",
@@ -1437,27 +780,27 @@ var Sidebar = ({
1437
780
  {
1438
781
  label: "Dashboard",
1439
782
  icon: "M3 3h7v7H3zM14 3h7v7h-7zM3 14h7v7H3zM14 14h7v7h-7z",
1440
- component: /* @__PURE__ */ import_react22.default.createElement("div", { style: { padding: "24px" } }, /* @__PURE__ */ import_react22.default.createElement("h2", { style: { color: "#fff", fontSize: "20px", fontWeight: "700", marginBottom: "8px" } }, "Dashboard"), /* @__PURE__ */ import_react22.default.createElement("p", { style: { color: "rgba(255,255,255,0.4)", fontSize: "14px" } }, "Welcome to your dashboard overview."))
783
+ component: /* @__PURE__ */ import_react7.default.createElement("div", { style: { padding: "24px" } }, /* @__PURE__ */ import_react7.default.createElement("h2", { style: { color: "#fff", fontSize: "20px", fontWeight: "700", marginBottom: "8px" } }, "Dashboard"), /* @__PURE__ */ import_react7.default.createElement("p", { style: { color: "rgba(255,255,255,0.4)", fontSize: "14px" } }, "Welcome to your dashboard overview."))
1441
784
  },
1442
785
  {
1443
786
  label: "Analytics",
1444
787
  icon: "M18 20V10M12 20V4M6 20v-6",
1445
- component: /* @__PURE__ */ import_react22.default.createElement("div", { style: { padding: "24px" } }, /* @__PURE__ */ import_react22.default.createElement("h2", { style: { color: "#fff", fontSize: "20px", fontWeight: "700", marginBottom: "8px" } }, "Analytics"), /* @__PURE__ */ import_react22.default.createElement("p", { style: { color: "rgba(255,255,255,0.4)", fontSize: "14px" } }, "View your stats and performance here."))
788
+ component: /* @__PURE__ */ import_react7.default.createElement("div", { style: { padding: "24px" } }, /* @__PURE__ */ import_react7.default.createElement("h2", { style: { color: "#fff", fontSize: "20px", fontWeight: "700", marginBottom: "8px" } }, "Analytics"), /* @__PURE__ */ import_react7.default.createElement("p", { style: { color: "rgba(255,255,255,0.4)", fontSize: "14px" } }, "View your stats and performance here."))
1446
789
  },
1447
790
  {
1448
791
  label: "Users",
1449
792
  icon: "M17 21v-2a4 4 0 00-4-4H5a4 4 0 00-4 4v2M9 11a4 4 0 100-8 4 4 0 000 8zM23 21v-2a4 4 0 00-3-3.87M16 3.13a4 4 0 010 7.75",
1450
- component: /* @__PURE__ */ import_react22.default.createElement("div", { style: { padding: "24px" } }, /* @__PURE__ */ import_react22.default.createElement("h2", { style: { color: "#fff", fontSize: "20px", fontWeight: "700", marginBottom: "8px" } }, "Users"), /* @__PURE__ */ import_react22.default.createElement("p", { style: { color: "rgba(255,255,255,0.4)", fontSize: "14px" } }, "Manage your users and permissions."))
793
+ component: /* @__PURE__ */ import_react7.default.createElement("div", { style: { padding: "24px" } }, /* @__PURE__ */ import_react7.default.createElement("h2", { style: { color: "#fff", fontSize: "20px", fontWeight: "700", marginBottom: "8px" } }, "Users"), /* @__PURE__ */ import_react7.default.createElement("p", { style: { color: "rgba(255,255,255,0.4)", fontSize: "14px" } }, "Manage your users and permissions."))
1451
794
  },
1452
795
  {
1453
796
  label: "Settings",
1454
797
  icon: "M12 15a3 3 0 100-6 3 3 0 000 6zM19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-4 0v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83-2.83l.06-.06A1.65 1.65 0 004.68 15a1.65 1.65 0 00-1.51-1H3a2 2 0 010-4h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 012.83-2.83l.06.06A1.65 1.65 0 009 4.68a1.65 1.65 0 001-1.51V3a2 2 0 014 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 2.83l-.06.06A1.65 1.65 0 0019.4 9a1.65 1.65 0 001.51 1H21a2 2 0 010 4h-.09a1.65 1.65 0 00-1.51 1z",
1455
- component: /* @__PURE__ */ import_react22.default.createElement("div", { style: { padding: "24px" } }, /* @__PURE__ */ import_react22.default.createElement("h2", { style: { color: "#fff", fontSize: "20px", fontWeight: "700", marginBottom: "8px" } }, "Settings"), /* @__PURE__ */ import_react22.default.createElement("p", { style: { color: "rgba(255,255,255,0.4)", fontSize: "14px" } }, "Configure your preferences here."))
798
+ component: /* @__PURE__ */ import_react7.default.createElement("div", { style: { padding: "24px" } }, /* @__PURE__ */ import_react7.default.createElement("h2", { style: { color: "#fff", fontSize: "20px", fontWeight: "700", marginBottom: "8px" } }, "Settings"), /* @__PURE__ */ import_react7.default.createElement("p", { style: { color: "rgba(255,255,255,0.4)", fontSize: "14px" } }, "Configure your preferences here."))
1456
799
  }
1457
800
  ]
1458
801
  }) => {
1459
- const [active, setActive] = (0, import_react22.useState)(0);
1460
- const [collapsed, setCollapsed] = (0, import_react22.useState)(false);
802
+ const [active, setActive] = (0, import_react7.useState)(0);
803
+ const [collapsed, setCollapsed] = (0, import_react7.useState)(false);
1461
804
  const alpha = (hex, op) => {
1462
805
  const r = parseInt(hex.slice(1, 3), 16);
1463
806
  const g = parseInt(hex.slice(3, 5), 16);
@@ -1465,14 +808,14 @@ var Sidebar = ({
1465
808
  return `rgba(${r},${g},${b},${op})`;
1466
809
  };
1467
810
  const activeItem = items[active];
1468
- return /* @__PURE__ */ import_react22.default.createElement("div", { style: {
811
+ return /* @__PURE__ */ import_react7.default.createElement("div", { style: {
1469
812
  display: "flex",
1470
813
  height: "480px",
1471
814
  fontFamily: "system-ui, sans-serif",
1472
815
  borderRadius: "16px",
1473
816
  overflow: "hidden",
1474
817
  border: "1px solid rgba(255,255,255,0.07)"
1475
- } }, /* @__PURE__ */ import_react22.default.createElement("div", { style: {
818
+ } }, /* @__PURE__ */ import_react7.default.createElement("div", { style: {
1476
819
  width: collapsed ? "60px" : "200px",
1477
820
  background: bg,
1478
821
  borderRight: "1px solid rgba(255,255,255,0.06)",
@@ -1481,7 +824,7 @@ var Sidebar = ({
1481
824
  transition: "width 0.25s ease",
1482
825
  flexShrink: 0,
1483
826
  overflow: "hidden"
1484
- } }, /* @__PURE__ */ import_react22.default.createElement("div", { style: {
827
+ } }, /* @__PURE__ */ import_react7.default.createElement("div", { style: {
1485
828
  height: "56px",
1486
829
  display: "flex",
1487
830
  alignItems: "center",
@@ -1490,7 +833,7 @@ var Sidebar = ({
1490
833
  borderBottom: "1px solid rgba(255,255,255,0.05)",
1491
834
  overflow: "hidden",
1492
835
  flexShrink: 0
1493
- } }, /* @__PURE__ */ import_react22.default.createElement("div", { style: {
836
+ } }, /* @__PURE__ */ import_react7.default.createElement("div", { style: {
1494
837
  width: "28px",
1495
838
  height: "28px",
1496
839
  borderRadius: "8px",
@@ -1502,7 +845,7 @@ var Sidebar = ({
1502
845
  fontSize: "13px",
1503
846
  fontWeight: "800",
1504
847
  color: "#fff"
1505
- } }, logo[0]), !collapsed && /* @__PURE__ */ import_react22.default.createElement("span", { style: { fontSize: "14px", fontWeight: "800", color: "#fff", whiteSpace: "nowrap" } }, logo)), /* @__PURE__ */ import_react22.default.createElement("nav", { style: { flex: 1, padding: "10px 8px", display: "flex", flexDirection: "column", gap: "3px", overflowY: "auto" } }, items.map((item, i) => /* @__PURE__ */ import_react22.default.createElement(
848
+ } }, logo[0]), !collapsed && /* @__PURE__ */ import_react7.default.createElement("span", { style: { fontSize: "14px", fontWeight: "800", color: "#fff", whiteSpace: "nowrap" } }, logo)), /* @__PURE__ */ import_react7.default.createElement("nav", { style: { flex: 1, padding: "10px 8px", display: "flex", flexDirection: "column", gap: "3px", overflowY: "auto" } }, items.map((item, i) => /* @__PURE__ */ import_react7.default.createElement(
1506
849
  "button",
1507
850
  {
1508
851
  key: i,
@@ -1537,7 +880,7 @@ var Sidebar = ({
1537
880
  }
1538
881
  }
1539
882
  },
1540
- /* @__PURE__ */ import_react22.default.createElement(
883
+ /* @__PURE__ */ import_react7.default.createElement(
1541
884
  "svg",
1542
885
  {
1543
886
  width: "16",
@@ -1550,10 +893,10 @@ var Sidebar = ({
1550
893
  strokeLinejoin: "round",
1551
894
  style: { flexShrink: 0 }
1552
895
  },
1553
- /* @__PURE__ */ import_react22.default.createElement("path", { d: item.icon })
896
+ /* @__PURE__ */ import_react7.default.createElement("path", { d: item.icon })
1554
897
  ),
1555
- !collapsed && /* @__PURE__ */ import_react22.default.createElement("span", { style: { fontSize: "13px", fontWeight: active === i ? "700" : "500", whiteSpace: "nowrap" } }, item.label)
1556
- ))), /* @__PURE__ */ import_react22.default.createElement("div", { style: { padding: "8px", borderTop: "1px solid rgba(255,255,255,0.05)" } }, /* @__PURE__ */ import_react22.default.createElement(
898
+ !collapsed && /* @__PURE__ */ import_react7.default.createElement("span", { style: { fontSize: "13px", fontWeight: active === i ? "700" : "500", whiteSpace: "nowrap" } }, item.label)
899
+ ))), /* @__PURE__ */ import_react7.default.createElement("div", { style: { padding: "8px", borderTop: "1px solid rgba(255,255,255,0.05)" } }, /* @__PURE__ */ import_react7.default.createElement(
1557
900
  "button",
1558
901
  {
1559
902
  onClick: () => setCollapsed((c) => !c),
@@ -1573,7 +916,7 @@ var Sidebar = ({
1573
916
  onMouseEnter: (e) => e.currentTarget.style.color = "rgba(255,255,255,0.7)",
1574
917
  onMouseLeave: (e) => e.currentTarget.style.color = "rgba(255,255,255,0.3)"
1575
918
  },
1576
- /* @__PURE__ */ import_react22.default.createElement(
919
+ /* @__PURE__ */ import_react7.default.createElement(
1577
920
  "svg",
1578
921
  {
1579
922
  width: "15",
@@ -1584,29 +927,29 @@ var Sidebar = ({
1584
927
  strokeWidth: "2",
1585
928
  strokeLinecap: "round"
1586
929
  },
1587
- /* @__PURE__ */ import_react22.default.createElement("path", { d: collapsed ? "M9 18l6-6-6-6" : "M15 18l-6-6 6-6" })
930
+ /* @__PURE__ */ import_react7.default.createElement("path", { d: collapsed ? "M9 18l6-6-6-6" : "M15 18l-6-6 6-6" })
1588
931
  )
1589
- ))), /* @__PURE__ */ import_react22.default.createElement("div", { style: {
932
+ ))), /* @__PURE__ */ import_react7.default.createElement("div", { style: {
1590
933
  flex: 1,
1591
934
  background: "rgba(255,255,255,0.02)",
1592
935
  overflow: "auto"
1593
- } }, /* @__PURE__ */ import_react22.default.createElement("div", { style: {
936
+ } }, /* @__PURE__ */ import_react7.default.createElement("div", { style: {
1594
937
  height: "56px",
1595
938
  display: "flex",
1596
939
  alignItems: "center",
1597
940
  padding: "0 20px",
1598
941
  borderBottom: "1px solid rgba(255,255,255,0.05)",
1599
942
  gap: "10px"
1600
- } }, /* @__PURE__ */ import_react22.default.createElement("div", { style: {
943
+ } }, /* @__PURE__ */ import_react7.default.createElement("div", { style: {
1601
944
  width: "6px",
1602
945
  height: "6px",
1603
946
  borderRadius: "50%",
1604
947
  background: accent
1605
- } }), /* @__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)));
948
+ } }), /* @__PURE__ */ import_react7.default.createElement("span", { style: { fontSize: "14px", fontWeight: "700", color: "#fff" } }, activeItem == null ? void 0 : activeItem.label)), /* @__PURE__ */ import_react7.default.createElement("div", { style: { color: "#fff" } }, activeItem == null ? void 0 : activeItem.component)));
1606
949
  };
1607
950
 
1608
951
  // src/components/Charts/Charts.jsx
1609
- var import_react23 = __toESM(require("react"));
952
+ var import_react8 = __toESM(require("react"));
1610
953
  var Charts = ({
1611
954
  type = "bar",
1612
955
  data = [
@@ -1626,7 +969,7 @@ var Charts = ({
1626
969
  showGrid = true,
1627
970
  showValues = true
1628
971
  }) => {
1629
- const [hovered, setHovered] = (0, import_react23.useState)(null);
972
+ const [hovered, setHovered] = (0, import_react8.useState)(null);
1630
973
  const alpha = (hex, op) => {
1631
974
  const r = parseInt(hex.slice(1, 3), 16);
1632
975
  const g = parseInt(hex.slice(3, 5), 16);
@@ -1653,7 +996,7 @@ var Charts = ({
1653
996
  }));
1654
997
  const BarChart = () => {
1655
998
  const barW = Math.min(28, chartW / data.length * 0.55);
1656
- 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(
999
+ return /* @__PURE__ */ import_react8.default.createElement("svg", { width: "100%", viewBox: `0 0 ${W} ${H}` }, showGrid && gridLines.map((g, i) => /* @__PURE__ */ import_react8.default.createElement("g", { key: i }, /* @__PURE__ */ import_react8.default.createElement(
1657
1000
  "line",
1658
1001
  {
1659
1002
  x1: padL,
@@ -1663,7 +1006,7 @@ var Charts = ({
1663
1006
  stroke: "rgba(255,255,255,0.05)",
1664
1007
  strokeWidth: "1"
1665
1008
  }
1666
- ), /* @__PURE__ */ import_react23.default.createElement(
1009
+ ), /* @__PURE__ */ import_react8.default.createElement(
1667
1010
  "text",
1668
1011
  {
1669
1012
  x: padL - 4,
@@ -1678,7 +1021,7 @@ var Charts = ({
1678
1021
  const barH = (d.value - min) / (max - min || 1) * chartH;
1679
1022
  const y = padT + chartH - barH;
1680
1023
  const isH = hovered === i;
1681
- return /* @__PURE__ */ import_react23.default.createElement("g", { key: i, onMouseEnter: () => setHovered(i), onMouseLeave: () => setHovered(null) }, /* @__PURE__ */ import_react23.default.createElement(
1024
+ return /* @__PURE__ */ import_react8.default.createElement("g", { key: i, onMouseEnter: () => setHovered(i), onMouseLeave: () => setHovered(null) }, /* @__PURE__ */ import_react8.default.createElement(
1682
1025
  "rect",
1683
1026
  {
1684
1027
  x,
@@ -1688,7 +1031,7 @@ var Charts = ({
1688
1031
  fill: "transparent",
1689
1032
  rx: "4"
1690
1033
  }
1691
- ), /* @__PURE__ */ import_react23.default.createElement(
1034
+ ), /* @__PURE__ */ import_react8.default.createElement(
1692
1035
  "rect",
1693
1036
  {
1694
1037
  x,
@@ -1699,7 +1042,7 @@ var Charts = ({
1699
1042
  rx: "4",
1700
1043
  style: { transition: "fill 0.15s" }
1701
1044
  }
1702
- ), showValues && isH && /* @__PURE__ */ import_react23.default.createElement(
1045
+ ), showValues && isH && /* @__PURE__ */ import_react8.default.createElement(
1703
1046
  "text",
1704
1047
  {
1705
1048
  x: x + barW / 2,
@@ -1710,7 +1053,7 @@ var Charts = ({
1710
1053
  fontWeight: "700"
1711
1054
  },
1712
1055
  d.value
1713
- ), /* @__PURE__ */ import_react23.default.createElement(
1056
+ ), /* @__PURE__ */ import_react8.default.createElement(
1714
1057
  "text",
1715
1058
  {
1716
1059
  x: x + barW / 2,
@@ -1723,7 +1066,7 @@ var Charts = ({
1723
1066
  ));
1724
1067
  }));
1725
1068
  };
1726
- 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(
1069
+ const LineChart = () => /* @__PURE__ */ import_react8.default.createElement("svg", { width: "100%", viewBox: `0 0 ${W} ${H}` }, /* @__PURE__ */ import_react8.default.createElement("defs", null, /* @__PURE__ */ import_react8.default.createElement("linearGradient", { id: "lg", x1: "0", y1: "0", x2: "0", y2: "1" }, /* @__PURE__ */ import_react8.default.createElement("stop", { offset: "0%", stopColor: accent, stopOpacity: "0.3" }), /* @__PURE__ */ import_react8.default.createElement("stop", { offset: "100%", stopColor: accent, stopOpacity: "0" }))), showGrid && gridLines.map((g, i) => /* @__PURE__ */ import_react8.default.createElement("g", { key: i }, /* @__PURE__ */ import_react8.default.createElement(
1727
1070
  "line",
1728
1071
  {
1729
1072
  x1: padL,
@@ -1733,7 +1076,7 @@ var Charts = ({
1733
1076
  stroke: "rgba(255,255,255,0.05)",
1734
1077
  strokeWidth: "1"
1735
1078
  }
1736
- ), /* @__PURE__ */ import_react23.default.createElement(
1079
+ ), /* @__PURE__ */ import_react8.default.createElement(
1737
1080
  "text",
1738
1081
  {
1739
1082
  x: padL - 4,
@@ -1743,7 +1086,7 @@ var Charts = ({
1743
1086
  fontSize: "9"
1744
1087
  },
1745
1088
  g.val
1746
- ))), /* @__PURE__ */ import_react23.default.createElement("polygon", { points: areaPoints, fill: "url(#lg)" }), /* @__PURE__ */ import_react23.default.createElement(
1089
+ ))), /* @__PURE__ */ import_react8.default.createElement("polygon", { points: areaPoints, fill: "url(#lg)" }), /* @__PURE__ */ import_react8.default.createElement(
1747
1090
  "polyline",
1748
1091
  {
1749
1092
  points,
@@ -1755,7 +1098,7 @@ var Charts = ({
1755
1098
  }
1756
1099
  ), data.map((d, i) => {
1757
1100
  const isH = hovered === i;
1758
- 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(
1101
+ return /* @__PURE__ */ import_react8.default.createElement("g", { key: i, onMouseEnter: () => setHovered(i), onMouseLeave: () => setHovered(null) }, /* @__PURE__ */ import_react8.default.createElement("circle", { cx: getX(i), cy: getY(d.value), r: "10", fill: "transparent" }), /* @__PURE__ */ import_react8.default.createElement(
1759
1102
  "circle",
1760
1103
  {
1761
1104
  cx: getX(i),
@@ -1766,7 +1109,7 @@ var Charts = ({
1766
1109
  strokeWidth: "2",
1767
1110
  style: { transition: "all 0.15s" }
1768
1111
  }
1769
- ), showValues && isH && /* @__PURE__ */ import_react23.default.createElement(
1112
+ ), showValues && isH && /* @__PURE__ */ import_react8.default.createElement(
1770
1113
  "text",
1771
1114
  {
1772
1115
  x: getX(i),
@@ -1777,7 +1120,7 @@ var Charts = ({
1777
1120
  fontWeight: "700"
1778
1121
  },
1779
1122
  d.value
1780
- ), /* @__PURE__ */ import_react23.default.createElement(
1123
+ ), /* @__PURE__ */ import_react8.default.createElement(
1781
1124
  "text",
1782
1125
  {
1783
1126
  x: getX(i),
@@ -1817,7 +1160,7 @@ var Charts = ({
1817
1160
  startAngle += angle;
1818
1161
  return slice;
1819
1162
  });
1820
- 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(
1163
+ return /* @__PURE__ */ import_react8.default.createElement("svg", { width: "100%", viewBox: `0 0 ${W} ${H}` }, slices.map((s) => /* @__PURE__ */ import_react8.default.createElement("g", { key: s.i, onMouseEnter: () => setHovered(s.i), onMouseLeave: () => setHovered(null) }, /* @__PURE__ */ import_react8.default.createElement(
1821
1164
  "path",
1822
1165
  {
1823
1166
  d: s.path,
@@ -1827,7 +1170,7 @@ var Charts = ({
1827
1170
  transform: hovered === s.i ? `translate(${Math.cos(s.angle / 2 - Math.PI / 2) * 4}, ${Math.sin(s.angle / 2 - Math.PI / 2) * 4})` : "",
1828
1171
  style: { transition: "transform 0.15s", cursor: "pointer" }
1829
1172
  }
1830
- ))), hovered !== null && /* @__PURE__ */ import_react23.default.createElement(import_react23.default.Fragment, null, /* @__PURE__ */ import_react23.default.createElement(
1173
+ ))), hovered !== null && /* @__PURE__ */ import_react8.default.createElement(import_react8.default.Fragment, null, /* @__PURE__ */ import_react8.default.createElement(
1831
1174
  "text",
1832
1175
  {
1833
1176
  x: cx,
@@ -1838,7 +1181,7 @@ var Charts = ({
1838
1181
  fontWeight: "800"
1839
1182
  },
1840
1183
  (_a = data[hovered]) == null ? void 0 : _a.value
1841
- ), /* @__PURE__ */ import_react23.default.createElement(
1184
+ ), /* @__PURE__ */ import_react8.default.createElement(
1842
1185
  "text",
1843
1186
  {
1844
1187
  x: cx,
@@ -1848,7 +1191,7 @@ var Charts = ({
1848
1191
  fontSize: "9"
1849
1192
  },
1850
1193
  (_b = data[hovered]) == null ? void 0 : _b.label
1851
- )), hovered === null && /* @__PURE__ */ import_react23.default.createElement(
1194
+ )), hovered === null && /* @__PURE__ */ import_react8.default.createElement(
1852
1195
  "text",
1853
1196
  {
1854
1197
  x: cx,
@@ -1860,7 +1203,7 @@ var Charts = ({
1860
1203
  "Hover slice"
1861
1204
  ));
1862
1205
  };
1863
- 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(
1206
+ const AreaChart = () => /* @__PURE__ */ import_react8.default.createElement("svg", { width: "100%", viewBox: `0 0 ${W} ${H}` }, /* @__PURE__ */ import_react8.default.createElement("defs", null, /* @__PURE__ */ import_react8.default.createElement("linearGradient", { id: "ag", x1: "0", y1: "0", x2: "0", y2: "1" }, /* @__PURE__ */ import_react8.default.createElement("stop", { offset: "0%", stopColor: accent, stopOpacity: "0.5" }), /* @__PURE__ */ import_react8.default.createElement("stop", { offset: "100%", stopColor: accent, stopOpacity: "0.02" }))), showGrid && gridLines.map((g, i) => /* @__PURE__ */ import_react8.default.createElement("g", { key: i }, /* @__PURE__ */ import_react8.default.createElement(
1864
1207
  "line",
1865
1208
  {
1866
1209
  x1: padL,
@@ -1870,7 +1213,7 @@ var Charts = ({
1870
1213
  stroke: "rgba(255,255,255,0.05)",
1871
1214
  strokeWidth: "1"
1872
1215
  }
1873
- ), /* @__PURE__ */ import_react23.default.createElement(
1216
+ ), /* @__PURE__ */ import_react8.default.createElement(
1874
1217
  "text",
1875
1218
  {
1876
1219
  x: padL - 4,
@@ -1880,7 +1223,7 @@ var Charts = ({
1880
1223
  fontSize: "9"
1881
1224
  },
1882
1225
  g.val
1883
- ))), /* @__PURE__ */ import_react23.default.createElement("polygon", { points: areaPoints, fill: "url(#ag)" }), /* @__PURE__ */ import_react23.default.createElement(
1226
+ ))), /* @__PURE__ */ import_react8.default.createElement("polygon", { points: areaPoints, fill: "url(#ag)" }), /* @__PURE__ */ import_react8.default.createElement(
1884
1227
  "polyline",
1885
1228
  {
1886
1229
  points,
@@ -1890,7 +1233,7 @@ var Charts = ({
1890
1233
  strokeLinejoin: "round",
1891
1234
  strokeLinecap: "round"
1892
1235
  }
1893
- ), 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(
1236
+ ), data.map((d, i) => /* @__PURE__ */ import_react8.default.createElement("g", { key: i, onMouseEnter: () => setHovered(i), onMouseLeave: () => setHovered(null) }, /* @__PURE__ */ import_react8.default.createElement("rect", { x: getX(i) - 12, y: padT, width: 24, height: chartH, fill: "transparent" }), hovered === i && /* @__PURE__ */ import_react8.default.createElement(import_react8.default.Fragment, null, /* @__PURE__ */ import_react8.default.createElement(
1894
1237
  "line",
1895
1238
  {
1896
1239
  x1: getX(i),
@@ -1901,7 +1244,7 @@ var Charts = ({
1901
1244
  strokeWidth: "1",
1902
1245
  strokeDasharray: "3 3"
1903
1246
  }
1904
- ), showValues && /* @__PURE__ */ import_react23.default.createElement(
1247
+ ), showValues && /* @__PURE__ */ import_react8.default.createElement(
1905
1248
  "text",
1906
1249
  {
1907
1250
  x: getX(i),
@@ -1912,7 +1255,7 @@ var Charts = ({
1912
1255
  fontWeight: "700"
1913
1256
  },
1914
1257
  d.value
1915
- )), /* @__PURE__ */ import_react23.default.createElement(
1258
+ )), /* @__PURE__ */ import_react8.default.createElement(
1916
1259
  "text",
1917
1260
  {
1918
1261
  x: getX(i),
@@ -1924,12 +1267,12 @@ var Charts = ({
1924
1267
  d.label
1925
1268
  ))));
1926
1269
  const renderChart = () => {
1927
- if (type === "line") return /* @__PURE__ */ import_react23.default.createElement(LineChart, null);
1928
- if (type === "pie") return /* @__PURE__ */ import_react23.default.createElement(PieChart, null);
1929
- if (type === "area") return /* @__PURE__ */ import_react23.default.createElement(AreaChart, null);
1930
- return /* @__PURE__ */ import_react23.default.createElement(BarChart, null);
1270
+ if (type === "line") return /* @__PURE__ */ import_react8.default.createElement(LineChart, null);
1271
+ if (type === "pie") return /* @__PURE__ */ import_react8.default.createElement(PieChart, null);
1272
+ if (type === "area") return /* @__PURE__ */ import_react8.default.createElement(AreaChart, null);
1273
+ return /* @__PURE__ */ import_react8.default.createElement(BarChart, null);
1931
1274
  };
1932
- return /* @__PURE__ */ import_react23.default.createElement("div", { style: {
1275
+ return /* @__PURE__ */ import_react8.default.createElement("div", { style: {
1933
1276
  background: bg,
1934
1277
  borderRadius: radius,
1935
1278
  padding: "20px",
@@ -1938,7 +1281,7 @@ var Charts = ({
1938
1281
  width: "100%",
1939
1282
  maxWidth: "360px",
1940
1283
  boxSizing: "border-box"
1941
- } }, /* @__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: {
1284
+ } }, /* @__PURE__ */ import_react8.default.createElement("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "16px" } }, /* @__PURE__ */ import_react8.default.createElement("p", { style: { fontSize: "14px", fontWeight: "700", color: "#fff", margin: 0 } }, title), /* @__PURE__ */ import_react8.default.createElement("span", { style: {
1942
1285
  fontSize: "10px",
1943
1286
  fontWeight: "700",
1944
1287
  padding: "3px 9px",
@@ -1951,7 +1294,7 @@ var Charts = ({
1951
1294
  };
1952
1295
 
1953
1296
  // src/components/ImageCard/ImageCard.jsx
1954
- var import_react24 = __toESM(require("react"));
1297
+ var import_react9 = __toESM(require("react"));
1955
1298
  var ImageCard = ({
1956
1299
  image = "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=600&q=80",
1957
1300
  tag = "Travel",
@@ -1964,14 +1307,14 @@ var ImageCard = ({
1964
1307
  onButtonClick = () => {
1965
1308
  }
1966
1309
  }) => {
1967
- const [hovered, setHovered] = (0, import_react24.useState)(false);
1310
+ const [hovered, setHovered] = (0, import_react9.useState)(false);
1968
1311
  const alpha = (hex, op) => {
1969
1312
  const r = parseInt(hex.slice(1, 3), 16);
1970
1313
  const g = parseInt(hex.slice(3, 5), 16);
1971
1314
  const b = parseInt(hex.slice(5, 7), 16);
1972
1315
  return `rgba(${r},${g},${b},${op})`;
1973
1316
  };
1974
- return /* @__PURE__ */ import_react24.default.createElement(
1317
+ return /* @__PURE__ */ import_react9.default.createElement(
1975
1318
  "div",
1976
1319
  {
1977
1320
  onMouseEnter: () => setHovered(true),
@@ -1988,7 +1331,7 @@ var ImageCard = ({
1988
1331
  boxShadow: hovered ? `0 16px 40px rgba(0,0,0,0.5)` : "0 4px 20px rgba(0,0,0,0.3)"
1989
1332
  }
1990
1333
  },
1991
- /* @__PURE__ */ import_react24.default.createElement("div", { style: { position: "relative", width: "100%", height: "180px", overflow: "hidden" } }, /* @__PURE__ */ import_react24.default.createElement(
1334
+ /* @__PURE__ */ import_react9.default.createElement("div", { style: { position: "relative", width: "100%", height: "180px", overflow: "hidden" } }, /* @__PURE__ */ import_react9.default.createElement(
1992
1335
  "img",
1993
1336
  {
1994
1337
  src: image,
@@ -2001,11 +1344,11 @@ var ImageCard = ({
2001
1344
  transition: "transform 0.4s ease"
2002
1345
  }
2003
1346
  }
2004
- ), /* @__PURE__ */ import_react24.default.createElement("div", { style: {
1347
+ ), /* @__PURE__ */ import_react9.default.createElement("div", { style: {
2005
1348
  position: "absolute",
2006
1349
  inset: 0,
2007
1350
  background: "linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 60%)"
2008
- } }), tag && /* @__PURE__ */ import_react24.default.createElement("div", { style: {
1351
+ } }), tag && /* @__PURE__ */ import_react9.default.createElement("div", { style: {
2009
1352
  position: "absolute",
2010
1353
  top: "12px",
2011
1354
  left: "12px",
@@ -2018,18 +1361,18 @@ var ImageCard = ({
2018
1361
  letterSpacing: "0.5px",
2019
1362
  textTransform: "uppercase"
2020
1363
  } }, tag)),
2021
- /* @__PURE__ */ import_react24.default.createElement("div", { style: { padding: "18px" } }, /* @__PURE__ */ import_react24.default.createElement("h3", { style: {
1364
+ /* @__PURE__ */ import_react9.default.createElement("div", { style: { padding: "18px" } }, /* @__PURE__ */ import_react9.default.createElement("h3", { style: {
2022
1365
  fontSize: "15px",
2023
1366
  fontWeight: "700",
2024
1367
  color: "#fff",
2025
1368
  margin: "0 0 8px",
2026
1369
  lineHeight: 1.4
2027
- } }, title), /* @__PURE__ */ import_react24.default.createElement("p", { style: {
1370
+ } }, title), /* @__PURE__ */ import_react9.default.createElement("p", { style: {
2028
1371
  fontSize: "13px",
2029
1372
  color: "rgba(255,255,255,0.45)",
2030
1373
  lineHeight: 1.65,
2031
1374
  margin: "0 0 18px"
2032
- } }, description), /* @__PURE__ */ import_react24.default.createElement(
1375
+ } }, description), /* @__PURE__ */ import_react9.default.createElement(
2033
1376
  "button",
2034
1377
  {
2035
1378
  onClick: onButtonClick,
@@ -2055,7 +1398,7 @@ var ImageCard = ({
2055
1398
  };
2056
1399
 
2057
1400
  // src/components/ImageSlider/ImageSlider.jsx
2058
- var import_react25 = __toESM(require("react"));
1401
+ var import_react10 = __toESM(require("react"));
2059
1402
  var ImageSlider = ({
2060
1403
  images = [
2061
1404
  {
@@ -2086,8 +1429,8 @@ var ImageSlider = ({
2086
1429
  showCaption = true,
2087
1430
  autoPlay = false
2088
1431
  }) => {
2089
- const [current, setCurrent] = (0, import_react25.useState)(0);
2090
- const [dir, setDir] = (0, import_react25.useState)(null);
1432
+ const [current, setCurrent] = (0, import_react10.useState)(0);
1433
+ const [dir, setDir] = (0, import_react10.useState)(null);
2091
1434
  const alpha = (hex, op) => {
2092
1435
  const r = parseInt(hex.slice(1, 3), 16);
2093
1436
  const g = parseInt(hex.slice(3, 5), 16);
@@ -2107,7 +1450,7 @@ var ImageSlider = ({
2107
1450
  setCurrent(i);
2108
1451
  };
2109
1452
  const img = images[current];
2110
- return /* @__PURE__ */ import_react25.default.createElement("div", { style: {
1453
+ return /* @__PURE__ */ import_react10.default.createElement("div", { style: {
2111
1454
  background: bg,
2112
1455
  borderRadius: radius,
2113
1456
  overflow: "hidden",
@@ -2115,7 +1458,7 @@ var ImageSlider = ({
2115
1458
  border: "1px solid rgba(255,255,255,0.07)",
2116
1459
  fontFamily: "system-ui, sans-serif",
2117
1460
  boxShadow: "0 10px 40px rgba(0,0,0,0.4)"
2118
- } }, /* @__PURE__ */ import_react25.default.createElement("div", { style: { position: "relative", width: "100%", height: "200px", overflow: "hidden", background: "#000" } }, /* @__PURE__ */ import_react25.default.createElement(
1461
+ } }, /* @__PURE__ */ import_react10.default.createElement("div", { style: { position: "relative", width: "100%", height: "200px", overflow: "hidden", background: "#000" } }, /* @__PURE__ */ import_react10.default.createElement(
2119
1462
  "img",
2120
1463
  {
2121
1464
  key: current,
@@ -2128,11 +1471,11 @@ var ImageSlider = ({
2128
1471
  animation: `sliderFade 0.35s ease`
2129
1472
  }
2130
1473
  }
2131
- ), /* @__PURE__ */ import_react25.default.createElement("style", null, `@keyframes sliderFade { from { opacity: 0; transform: scale(1.03); } to { opacity: 1; transform: scale(1); } }`), /* @__PURE__ */ import_react25.default.createElement("div", { style: {
1474
+ ), /* @__PURE__ */ import_react10.default.createElement("style", null, `@keyframes sliderFade { from { opacity: 0; transform: scale(1.03); } to { opacity: 1; transform: scale(1); } }`), /* @__PURE__ */ import_react10.default.createElement("div", { style: {
2132
1475
  position: "absolute",
2133
1476
  inset: 0,
2134
1477
  background: "linear-gradient(to top, rgba(0,0,0,0.65) 0%, transparent 55%)"
2135
- } }), img.tag && /* @__PURE__ */ import_react25.default.createElement("div", { style: {
1478
+ } }), img.tag && /* @__PURE__ */ import_react10.default.createElement("div", { style: {
2136
1479
  position: "absolute",
2137
1480
  top: "12px",
2138
1481
  left: "12px",
@@ -2144,7 +1487,7 @@ var ImageSlider = ({
2144
1487
  color: "#fff",
2145
1488
  letterSpacing: "0.5px",
2146
1489
  textTransform: "uppercase"
2147
- } }, img.tag), /* @__PURE__ */ import_react25.default.createElement("div", { style: {
1490
+ } }, img.tag), /* @__PURE__ */ import_react10.default.createElement("div", { style: {
2148
1491
  position: "absolute",
2149
1492
  top: "12px",
2150
1493
  right: "12px",
@@ -2154,7 +1497,7 @@ var ImageSlider = ({
2154
1497
  fontSize: "10px",
2155
1498
  fontWeight: "600",
2156
1499
  color: "rgba(255,255,255,0.7)"
2157
- } }, current + 1, " / ", images.length), /* @__PURE__ */ import_react25.default.createElement(
1500
+ } }, current + 1, " / ", images.length), /* @__PURE__ */ import_react10.default.createElement(
2158
1501
  "button",
2159
1502
  {
2160
1503
  onClick: prev,
@@ -2179,7 +1522,7 @@ var ImageSlider = ({
2179
1522
  onMouseEnter: (e) => e.currentTarget.style.background = alpha(accent, 0.8),
2180
1523
  onMouseLeave: (e) => e.currentTarget.style.background = "rgba(0,0,0,0.5)"
2181
1524
  },
2182
- /* @__PURE__ */ import_react25.default.createElement(
1525
+ /* @__PURE__ */ import_react10.default.createElement(
2183
1526
  "svg",
2184
1527
  {
2185
1528
  width: "14",
@@ -2190,9 +1533,9 @@ var ImageSlider = ({
2190
1533
  strokeWidth: "2.5",
2191
1534
  strokeLinecap: "round"
2192
1535
  },
2193
- /* @__PURE__ */ import_react25.default.createElement("polyline", { points: "15 18 9 12 15 6" })
1536
+ /* @__PURE__ */ import_react10.default.createElement("polyline", { points: "15 18 9 12 15 6" })
2194
1537
  )
2195
- ), /* @__PURE__ */ import_react25.default.createElement(
1538
+ ), /* @__PURE__ */ import_react10.default.createElement(
2196
1539
  "button",
2197
1540
  {
2198
1541
  onClick: next,
@@ -2217,7 +1560,7 @@ var ImageSlider = ({
2217
1560
  onMouseEnter: (e) => e.currentTarget.style.background = alpha(accent, 0.8),
2218
1561
  onMouseLeave: (e) => e.currentTarget.style.background = "rgba(0,0,0,0.5)"
2219
1562
  },
2220
- /* @__PURE__ */ import_react25.default.createElement(
1563
+ /* @__PURE__ */ import_react10.default.createElement(
2221
1564
  "svg",
2222
1565
  {
2223
1566
  width: "14",
@@ -2228,9 +1571,9 @@ var ImageSlider = ({
2228
1571
  strokeWidth: "2.5",
2229
1572
  strokeLinecap: "round"
2230
1573
  },
2231
- /* @__PURE__ */ import_react25.default.createElement("polyline", { points: "9 18 15 12 9 6" })
1574
+ /* @__PURE__ */ import_react10.default.createElement("polyline", { points: "9 18 15 12 9 6" })
2232
1575
  )
2233
- )), showCaption && /* @__PURE__ */ import_react25.default.createElement("div", { style: { padding: "14px 16px 4px" } }, /* @__PURE__ */ import_react25.default.createElement(
1576
+ )), showCaption && /* @__PURE__ */ import_react10.default.createElement("div", { style: { padding: "14px 16px 4px" } }, /* @__PURE__ */ import_react10.default.createElement(
2234
1577
  "p",
2235
1578
  {
2236
1579
  style: {
@@ -2244,12 +1587,12 @@ var ImageSlider = ({
2244
1587
  key: current + "-title"
2245
1588
  },
2246
1589
  img.title
2247
- )), showDots && /* @__PURE__ */ import_react25.default.createElement("div", { style: {
1590
+ )), showDots && /* @__PURE__ */ import_react10.default.createElement("div", { style: {
2248
1591
  display: "flex",
2249
1592
  justifyContent: "center",
2250
1593
  gap: "6px",
2251
1594
  padding: "12px 16px 16px"
2252
- } }, images.map((_, i) => /* @__PURE__ */ import_react25.default.createElement(
1595
+ } }, images.map((_, i) => /* @__PURE__ */ import_react10.default.createElement(
2253
1596
  "button",
2254
1597
  {
2255
1598
  key: i,
@@ -2269,7 +1612,7 @@ var ImageSlider = ({
2269
1612
  };
2270
1613
 
2271
1614
  // src/components/BackgoundImageSlider/BackgoundImageSlider.jsx
2272
- var import_react26 = __toESM(require("react"));
1615
+ var import_react11 = __toESM(require("react"));
2273
1616
  var BackgoundImageSlider = ({
2274
1617
  images = [
2275
1618
  {
@@ -2305,15 +1648,15 @@ var BackgoundImageSlider = ({
2305
1648
  autoPlay = false,
2306
1649
  autoPlayInterval = 4e3
2307
1650
  }) => {
2308
- const [current, setCurrent] = (0, import_react26.useState)(0);
2309
- const [animating, setAnimating] = (0, import_react26.useState)(false);
1651
+ const [current, setCurrent] = (0, import_react11.useState)(0);
1652
+ const [animating, setAnimating] = (0, import_react11.useState)(false);
2310
1653
  const alpha = (hex, op) => {
2311
1654
  const r = parseInt(hex.slice(1, 3), 16);
2312
1655
  const g = parseInt(hex.slice(3, 5), 16);
2313
1656
  const b = parseInt(hex.slice(5, 7), 16);
2314
1657
  return `rgba(${r},${g},${b},${op})`;
2315
1658
  };
2316
- const go = (0, import_react26.useCallback)((index) => {
1659
+ const go = (0, import_react11.useCallback)((index) => {
2317
1660
  if (animating) return;
2318
1661
  setAnimating(true);
2319
1662
  setCurrent((index + images.length) % images.length);
@@ -2321,17 +1664,17 @@ var BackgoundImageSlider = ({
2321
1664
  }, [animating, images.length]);
2322
1665
  const prev = () => go(current - 1);
2323
1666
  const next = () => go(current + 1);
2324
- (0, import_react26.useEffect)(() => {
1667
+ (0, import_react11.useEffect)(() => {
2325
1668
  if (!autoPlay) return;
2326
1669
  const t = setInterval(() => go(current + 1), autoPlayInterval);
2327
1670
  return () => clearInterval(t);
2328
1671
  }, [autoPlay, autoPlayInterval, current, go]);
2329
1672
  const img = images[current];
2330
- return /* @__PURE__ */ import_react26.default.createElement(import_react26.default.Fragment, null, /* @__PURE__ */ import_react26.default.createElement("style", null, `
1673
+ return /* @__PURE__ */ import_react11.default.createElement(import_react11.default.Fragment, null, /* @__PURE__ */ import_react11.default.createElement("style", null, `
2331
1674
  @keyframes hs-fade { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: scale(1); } }
2332
1675
  @keyframes hs-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
2333
1676
  .hs-prev:hover, .hs-next:hover { background: rgba(0,0,0,0.65) !important; border-color: rgba(255,255,255,0.35) !important; }
2334
- `), /* @__PURE__ */ import_react26.default.createElement("div", { style: {
1677
+ `), /* @__PURE__ */ import_react11.default.createElement("div", { style: {
2335
1678
  position: "relative",
2336
1679
  width,
2337
1680
  height,
@@ -2339,7 +1682,7 @@ var BackgoundImageSlider = ({
2339
1682
  overflow: "hidden",
2340
1683
  fontFamily: "system-ui, -apple-system, sans-serif",
2341
1684
  userSelect: "none"
2342
- } }, /* @__PURE__ */ import_react26.default.createElement(
1685
+ } }, /* @__PURE__ */ import_react11.default.createElement(
2343
1686
  "img",
2344
1687
  {
2345
1688
  key: current,
@@ -2354,11 +1697,11 @@ var BackgoundImageSlider = ({
2354
1697
  animation: "hs-fade 0.4s ease"
2355
1698
  }
2356
1699
  }
2357
- ), /* @__PURE__ */ import_react26.default.createElement("div", { style: {
1700
+ ), /* @__PURE__ */ import_react11.default.createElement("div", { style: {
2358
1701
  position: "absolute",
2359
1702
  inset: 0,
2360
1703
  background: "linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0.1) 100%)"
2361
- } }), img.tag && /* @__PURE__ */ import_react26.default.createElement(
1704
+ } }), img.tag && /* @__PURE__ */ import_react11.default.createElement(
2362
1705
  "div",
2363
1706
  {
2364
1707
  key: current + "-tag",
@@ -2378,7 +1721,7 @@ var BackgoundImageSlider = ({
2378
1721
  }
2379
1722
  },
2380
1723
  img.tag
2381
- ), /* @__PURE__ */ import_react26.default.createElement("div", { style: {
1724
+ ), /* @__PURE__ */ import_react11.default.createElement("div", { style: {
2382
1725
  position: "absolute",
2383
1726
  top: "24px",
2384
1727
  right: "28px",
@@ -2388,7 +1731,7 @@ var BackgoundImageSlider = ({
2388
1731
  fontSize: "11px",
2389
1732
  fontWeight: "600",
2390
1733
  color: "rgba(255,255,255,0.7)"
2391
- } }, current + 1, " / ", images.length), /* @__PURE__ */ import_react26.default.createElement(
1734
+ } }, current + 1, " / ", images.length), /* @__PURE__ */ import_react11.default.createElement(
2392
1735
  "button",
2393
1736
  {
2394
1737
  className: "hs-prev",
@@ -2413,7 +1756,7 @@ var BackgoundImageSlider = ({
2413
1756
  zIndex: 10
2414
1757
  }
2415
1758
  },
2416
- /* @__PURE__ */ import_react26.default.createElement(
1759
+ /* @__PURE__ */ import_react11.default.createElement(
2417
1760
  "svg",
2418
1761
  {
2419
1762
  width: "18",
@@ -2425,9 +1768,9 @@ var BackgoundImageSlider = ({
2425
1768
  strokeLinecap: "round",
2426
1769
  strokeLinejoin: "round"
2427
1770
  },
2428
- /* @__PURE__ */ import_react26.default.createElement("polyline", { points: "15 18 9 12 15 6" })
1771
+ /* @__PURE__ */ import_react11.default.createElement("polyline", { points: "15 18 9 12 15 6" })
2429
1772
  )
2430
- ), /* @__PURE__ */ import_react26.default.createElement(
1773
+ ), /* @__PURE__ */ import_react11.default.createElement(
2431
1774
  "button",
2432
1775
  {
2433
1776
  className: "hs-next",
@@ -2452,7 +1795,7 @@ var BackgoundImageSlider = ({
2452
1795
  zIndex: 10
2453
1796
  }
2454
1797
  },
2455
- /* @__PURE__ */ import_react26.default.createElement(
1798
+ /* @__PURE__ */ import_react11.default.createElement(
2456
1799
  "svg",
2457
1800
  {
2458
1801
  width: "18",
@@ -2464,15 +1807,15 @@ var BackgoundImageSlider = ({
2464
1807
  strokeLinecap: "round",
2465
1808
  strokeLinejoin: "round"
2466
1809
  },
2467
- /* @__PURE__ */ import_react26.default.createElement("polyline", { points: "9 18 15 12 9 6" })
1810
+ /* @__PURE__ */ import_react11.default.createElement("polyline", { points: "9 18 15 12 9 6" })
2468
1811
  )
2469
- ), /* @__PURE__ */ import_react26.default.createElement("div", { style: {
1812
+ ), /* @__PURE__ */ import_react11.default.createElement("div", { style: {
2470
1813
  position: "absolute",
2471
1814
  bottom: showDots ? "56px" : "28px",
2472
1815
  left: "28px",
2473
1816
  right: "28px",
2474
1817
  zIndex: 5
2475
- } }, /* @__PURE__ */ import_react26.default.createElement(
1818
+ } }, /* @__PURE__ */ import_react11.default.createElement(
2476
1819
  "h2",
2477
1820
  {
2478
1821
  key: current + "-title",
@@ -2488,7 +1831,7 @@ var BackgoundImageSlider = ({
2488
1831
  }
2489
1832
  },
2490
1833
  img.title
2491
- ), /* @__PURE__ */ import_react26.default.createElement(
1834
+ ), /* @__PURE__ */ import_react11.default.createElement(
2492
1835
  "p",
2493
1836
  {
2494
1837
  key: current + "-desc",
@@ -2503,7 +1846,7 @@ var BackgoundImageSlider = ({
2503
1846
  }
2504
1847
  },
2505
1848
  img.description
2506
- )), showDots && /* @__PURE__ */ import_react26.default.createElement("div", { style: {
1849
+ )), showDots && /* @__PURE__ */ import_react11.default.createElement("div", { style: {
2507
1850
  position: "absolute",
2508
1851
  bottom: "20px",
2509
1852
  left: 0,
@@ -2512,7 +1855,7 @@ var BackgoundImageSlider = ({
2512
1855
  justifyContent: "center",
2513
1856
  gap: "6px",
2514
1857
  zIndex: 5
2515
- } }, images.map((_, i) => /* @__PURE__ */ import_react26.default.createElement(
1858
+ } }, images.map((_, i) => /* @__PURE__ */ import_react11.default.createElement(
2516
1859
  "button",
2517
1860
  {
2518
1861
  key: i,
@@ -2532,7 +1875,7 @@ var BackgoundImageSlider = ({
2532
1875
  };
2533
1876
 
2534
1877
  // src/components/PageLoader/PageLoader.jsx
2535
- var import_react27 = __toESM(require("react"));
1878
+ var import_react12 = __toESM(require("react"));
2536
1879
  var PageLoader = ({
2537
1880
  logo = "VirtualAI",
2538
1881
  accent = "#6366f1",
@@ -2544,15 +1887,15 @@ var PageLoader = ({
2544
1887
  onComplete = () => {
2545
1888
  }
2546
1889
  }) => {
2547
- const [progress, setProgress] = (0, import_react27.useState)(0);
2548
- const [done, setDone] = (0, import_react27.useState)(false);
1890
+ const [progress, setProgress] = (0, import_react12.useState)(0);
1891
+ const [done, setDone] = (0, import_react12.useState)(false);
2549
1892
  const alpha = (hex, op) => {
2550
1893
  const r = parseInt(hex.slice(1, 3), 16);
2551
1894
  const g = parseInt(hex.slice(3, 5), 16);
2552
1895
  const b = parseInt(hex.slice(5, 7), 16);
2553
1896
  return `rgba(${r},${g},${b},${op})`;
2554
1897
  };
2555
- (0, import_react27.useEffect)(() => {
1898
+ (0, import_react12.useEffect)(() => {
2556
1899
  const steps = 100;
2557
1900
  const interval = duration / steps;
2558
1901
  let current = 0;
@@ -2570,13 +1913,13 @@ var PageLoader = ({
2570
1913
  return () => clearInterval(timer);
2571
1914
  }, [duration]);
2572
1915
  if (done) return null;
2573
- return /* @__PURE__ */ import_react27.default.createElement(import_react27.default.Fragment, null, /* @__PURE__ */ import_react27.default.createElement("style", null, `
1916
+ return /* @__PURE__ */ import_react12.default.createElement(import_react12.default.Fragment, null, /* @__PURE__ */ import_react12.default.createElement("style", null, `
2574
1917
  @keyframes pl-spin { to { transform: rotate(360deg); } }
2575
1918
  @keyframes pl-pulse { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.15);opacity:0.7} }
2576
1919
  @keyframes pl-dot { 0%,80%,100%{transform:scale(0.6);opacity:0.3} 40%{transform:scale(1);opacity:1} }
2577
1920
  @keyframes pl-fade { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
2578
1921
  @keyframes pl-bar { 0%{background-position:0% 50%} 100%{background-position:200% 50%} }
2579
- `), /* @__PURE__ */ import_react27.default.createElement("div", { style: {
1922
+ `), /* @__PURE__ */ import_react12.default.createElement("div", { style: {
2580
1923
  width: "100%",
2581
1924
  height: "100%",
2582
1925
  background: bg,
@@ -2587,7 +1930,7 @@ var PageLoader = ({
2587
1930
  gap: "28px",
2588
1931
  fontFamily: "system-ui, -apple-system, sans-serif",
2589
1932
  animation: "pl-fade 0.3s ease"
2590
- } }, /* @__PURE__ */ import_react27.default.createElement("div", { style: {
1933
+ } }, /* @__PURE__ */ import_react12.default.createElement("div", { style: {
2591
1934
  position: "absolute",
2592
1935
  top: "-100px",
2593
1936
  left: "-100px",
@@ -2597,7 +1940,7 @@ var PageLoader = ({
2597
1940
  background: `radial-gradient(circle, ${alpha(accent, 0.12)}, transparent 70%)`,
2598
1941
  filter: "blur(60px)",
2599
1942
  pointerEvents: "none"
2600
- } }), /* @__PURE__ */ import_react27.default.createElement("div", { style: {
1943
+ } }), /* @__PURE__ */ import_react12.default.createElement("div", { style: {
2601
1944
  position: "absolute",
2602
1945
  bottom: "-100px",
2603
1946
  right: "-100px",
@@ -2607,7 +1950,7 @@ var PageLoader = ({
2607
1950
  background: `radial-gradient(circle, ${alpha(accent, 0.08)}, transparent 70%)`,
2608
1951
  filter: "blur(60px)",
2609
1952
  pointerEvents: "none"
2610
- } }), /* @__PURE__ */ import_react27.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: "10px", animation: "pl-fade 0.4s ease" } }, /* @__PURE__ */ import_react27.default.createElement("div", { style: {
1953
+ } }), /* @__PURE__ */ import_react12.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: "10px", animation: "pl-fade 0.4s ease" } }, /* @__PURE__ */ import_react12.default.createElement("div", { style: {
2611
1954
  width: "36px",
2612
1955
  height: "36px",
2613
1956
  borderRadius: "10px",
@@ -2619,7 +1962,7 @@ var PageLoader = ({
2619
1962
  fontWeight: "800",
2620
1963
  color: "#fff",
2621
1964
  animation: type === "pulse" ? `pl-pulse 1.5s ease infinite` : "none"
2622
- } }, logo[0]), /* @__PURE__ */ import_react27.default.createElement("span", { style: { fontSize: "20px", fontWeight: "800", color: "#fff", letterSpacing: "-0.5px" } }, logo)), type === "spinner" && /* @__PURE__ */ import_react27.default.createElement("div", { style: { position: "relative", width: "56px", height: "56px" } }, /* @__PURE__ */ import_react27.default.createElement("svg", { width: "56", height: "56", viewBox: "0 0 56 56" }, /* @__PURE__ */ import_react27.default.createElement(
1965
+ } }, logo[0]), /* @__PURE__ */ import_react12.default.createElement("span", { style: { fontSize: "20px", fontWeight: "800", color: "#fff", letterSpacing: "-0.5px" } }, logo)), type === "spinner" && /* @__PURE__ */ import_react12.default.createElement("div", { style: { position: "relative", width: "56px", height: "56px" } }, /* @__PURE__ */ import_react12.default.createElement("svg", { width: "56", height: "56", viewBox: "0 0 56 56" }, /* @__PURE__ */ import_react12.default.createElement(
2623
1966
  "circle",
2624
1967
  {
2625
1968
  cx: "28",
@@ -2629,7 +1972,7 @@ var PageLoader = ({
2629
1972
  stroke: alpha(accent, 0.12),
2630
1973
  strokeWidth: "4"
2631
1974
  }
2632
- ), /* @__PURE__ */ import_react27.default.createElement(
1975
+ ), /* @__PURE__ */ import_react12.default.createElement(
2633
1976
  "circle",
2634
1977
  {
2635
1978
  cx: "28",
@@ -2642,7 +1985,7 @@ var PageLoader = ({
2642
1985
  strokeDasharray: "34.8 104.4",
2643
1986
  style: { transformOrigin: "center", animation: "pl-spin 0.9s linear infinite" }
2644
1987
  }
2645
- )), /* @__PURE__ */ import_react27.default.createElement("span", { style: {
1988
+ )), /* @__PURE__ */ import_react12.default.createElement("span", { style: {
2646
1989
  position: "absolute",
2647
1990
  inset: 0,
2648
1991
  display: "flex",
@@ -2651,26 +1994,26 @@ var PageLoader = ({
2651
1994
  fontSize: "11px",
2652
1995
  fontWeight: "700",
2653
1996
  color: accent
2654
- } }, Math.round(progress), "%")), type === "dots" && /* @__PURE__ */ import_react27.default.createElement("div", { style: { display: "flex", gap: "10px", alignItems: "center" } }, [0, 1, 2].map((i) => /* @__PURE__ */ import_react27.default.createElement("div", { key: i, style: {
1997
+ } }, Math.round(progress), "%")), type === "dots" && /* @__PURE__ */ import_react12.default.createElement("div", { style: { display: "flex", gap: "10px", alignItems: "center" } }, [0, 1, 2].map((i) => /* @__PURE__ */ import_react12.default.createElement("div", { key: i, style: {
2655
1998
  width: "12px",
2656
1999
  height: "12px",
2657
2000
  borderRadius: "50%",
2658
2001
  background: accent,
2659
2002
  animation: `pl-dot 1.2s ease infinite`,
2660
2003
  animationDelay: `${i * 0.2}s`
2661
- } }))), type === "pulse" && /* @__PURE__ */ import_react27.default.createElement("div", { style: { position: "relative", width: "56px", height: "56px" } }, [0, 1].map((i) => /* @__PURE__ */ import_react27.default.createElement("div", { key: i, style: {
2004
+ } }))), type === "pulse" && /* @__PURE__ */ import_react12.default.createElement("div", { style: { position: "relative", width: "56px", height: "56px" } }, [0, 1].map((i) => /* @__PURE__ */ import_react12.default.createElement("div", { key: i, style: {
2662
2005
  position: "absolute",
2663
2006
  inset: 0,
2664
2007
  borderRadius: "50%",
2665
2008
  background: alpha(accent, 0.3),
2666
2009
  animation: `pl-pulse 1.5s ease infinite`,
2667
2010
  animationDelay: `${i * 0.4}s`
2668
- } })), /* @__PURE__ */ import_react27.default.createElement("div", { style: {
2011
+ } })), /* @__PURE__ */ import_react12.default.createElement("div", { style: {
2669
2012
  position: "absolute",
2670
2013
  inset: "30%",
2671
2014
  borderRadius: "50%",
2672
2015
  background: accent
2673
- } })), type === "ring" && /* @__PURE__ */ import_react27.default.createElement("div", { style: {
2016
+ } })), type === "ring" && /* @__PURE__ */ import_react12.default.createElement("div", { style: {
2674
2017
  width: "52px",
2675
2018
  height: "52px",
2676
2019
  borderRadius: "50%",
@@ -2678,13 +2021,13 @@ var PageLoader = ({
2678
2021
  borderTop: `4px solid ${accent}`,
2679
2022
  borderRight: `4px solid ${accent}`,
2680
2023
  animation: "pl-spin 0.9s linear infinite"
2681
- } }), type === "bar" && /* @__PURE__ */ import_react27.default.createElement("div", { style: { width: "200px", display: "flex", flexDirection: "column", gap: "8px" } }, /* @__PURE__ */ import_react27.default.createElement("div", { style: {
2024
+ } }), type === "bar" && /* @__PURE__ */ import_react12.default.createElement("div", { style: { width: "200px", display: "flex", flexDirection: "column", gap: "8px" } }, /* @__PURE__ */ import_react12.default.createElement("div", { style: {
2682
2025
  width: "100%",
2683
2026
  height: "4px",
2684
2027
  background: alpha(accent, 0.15),
2685
2028
  borderRadius: "2px",
2686
2029
  overflow: "hidden"
2687
- } }, /* @__PURE__ */ import_react27.default.createElement("div", { style: {
2030
+ } }, /* @__PURE__ */ import_react12.default.createElement("div", { style: {
2688
2031
  height: "100%",
2689
2032
  width: `${progress}%`,
2690
2033
  borderRadius: "2px",
@@ -2692,40 +2035,479 @@ var PageLoader = ({
2692
2035
  backgroundSize: "200% 100%",
2693
2036
  animation: "pl-bar 1.2s linear infinite",
2694
2037
  transition: "width 0.03s linear"
2695
- } })), /* @__PURE__ */ import_react27.default.createElement("div", { style: {
2038
+ } })), /* @__PURE__ */ import_react12.default.createElement("div", { style: {
2696
2039
  display: "flex",
2697
2040
  justifyContent: "space-between",
2698
2041
  fontSize: "11px",
2699
2042
  color: "rgba(255,255,255,0.3)"
2700
- } }, /* @__PURE__ */ import_react27.default.createElement("span", null, loadingText), /* @__PURE__ */ import_react27.default.createElement("span", null, Math.round(progress), "%")), subText && /* @__PURE__ */ import_react27.default.createElement("p", { style: { fontSize: "12px", color: "rgba(255,255,255,0.18)", margin: "4px 0 0", textAlign: "center" } }, subText)), type !== "bar" && /* @__PURE__ */ import_react27.default.createElement("div", { style: { textAlign: "center" } }, /* @__PURE__ */ import_react27.default.createElement("p", { style: { fontSize: "13px", color: "rgba(255,255,255,0.3)", margin: "0 0 4px" } }, loadingText), subText && /* @__PURE__ */ import_react27.default.createElement("p", { style: { fontSize: "12px", color: "rgba(255,255,255,0.15)", margin: 0 } }, subText))));
2043
+ } }, /* @__PURE__ */ import_react12.default.createElement("span", null, loadingText), /* @__PURE__ */ import_react12.default.createElement("span", null, Math.round(progress), "%")), subText && /* @__PURE__ */ import_react12.default.createElement("p", { style: { fontSize: "12px", color: "rgba(255,255,255,0.18)", margin: "4px 0 0", textAlign: "center" } }, subText)), type !== "bar" && /* @__PURE__ */ import_react12.default.createElement("div", { style: { textAlign: "center" } }, /* @__PURE__ */ import_react12.default.createElement("p", { style: { fontSize: "13px", color: "rgba(255,255,255,0.3)", margin: "0 0 4px" } }, loadingText), subText && /* @__PURE__ */ import_react12.default.createElement("p", { style: { fontSize: "12px", color: "rgba(255,255,255,0.15)", margin: 0 } }, subText))));
2044
+ };
2045
+
2046
+ // src/components/OTPInput/OTPInput.jsx
2047
+ var import_react13 = __toESM(require("react"));
2048
+ var OTPInput = ({
2049
+ length = 6,
2050
+ onComplete = () => {
2051
+ },
2052
+ onCancel = () => {
2053
+ },
2054
+ accent = "#6366f1",
2055
+ bg = "#0f172a",
2056
+ radius = "16px",
2057
+ label = "Enter verification code",
2058
+ subLabel = "We sent a code to your email",
2059
+ errorText = "",
2060
+ resendText = "Resend code",
2061
+ onResend = () => {
2062
+ }
2063
+ }) => {
2064
+ const [otp, setOtp] = (0, import_react13.useState)(Array(length).fill(""));
2065
+ const [focused, setFocused] = (0, import_react13.useState)(0);
2066
+ const [completed, setCompleted] = (0, import_react13.useState)(false);
2067
+ const [resendTimer, setResendTimer] = (0, import_react13.useState)(30);
2068
+ const inputs = (0, import_react13.useRef)([]);
2069
+ const alpha = (hex, op) => {
2070
+ const r = parseInt(hex.slice(1, 3), 16);
2071
+ const g = parseInt(hex.slice(3, 5), 16);
2072
+ const b = parseInt(hex.slice(5, 7), 16);
2073
+ return `rgba(${r},${g},${b},${op})`;
2074
+ };
2075
+ (0, import_react13.useEffect)(() => {
2076
+ var _a;
2077
+ (_a = inputs.current[0]) == null ? void 0 : _a.focus();
2078
+ }, []);
2079
+ (0, import_react13.useEffect)(() => {
2080
+ if (resendTimer <= 0) return;
2081
+ const t = setInterval(() => setResendTimer((s) => s - 1), 1e3);
2082
+ return () => clearInterval(t);
2083
+ }, [resendTimer]);
2084
+ const handleChange = (e, i) => {
2085
+ var _a;
2086
+ const val = e.target.value.replace(/\D/g, "").slice(-1);
2087
+ const newOtp = [...otp];
2088
+ newOtp[i] = val;
2089
+ setOtp(newOtp);
2090
+ if (val && i < length - 1) {
2091
+ (_a = inputs.current[i + 1]) == null ? void 0 : _a.focus();
2092
+ setFocused(i + 1);
2093
+ }
2094
+ if (newOtp.every((v) => v !== "")) {
2095
+ setCompleted(true);
2096
+ onComplete(newOtp.join(""));
2097
+ } else {
2098
+ setCompleted(false);
2099
+ }
2100
+ };
2101
+ const handleKeyDown = (e, i) => {
2102
+ var _a, _b, _c;
2103
+ if (e.key === "Backspace") {
2104
+ const newOtp = [...otp];
2105
+ if (otp[i]) {
2106
+ newOtp[i] = "";
2107
+ setOtp(newOtp);
2108
+ } else if (i > 0) {
2109
+ newOtp[i - 1] = "";
2110
+ setOtp(newOtp);
2111
+ (_a = inputs.current[i - 1]) == null ? void 0 : _a.focus();
2112
+ setFocused(i - 1);
2113
+ }
2114
+ setCompleted(false);
2115
+ }
2116
+ if (e.key === "ArrowLeft" && i > 0) {
2117
+ (_b = inputs.current[i - 1]) == null ? void 0 : _b.focus();
2118
+ setFocused(i - 1);
2119
+ }
2120
+ if (e.key === "ArrowRight" && i < length - 1) {
2121
+ (_c = inputs.current[i + 1]) == null ? void 0 : _c.focus();
2122
+ setFocused(i + 1);
2123
+ }
2124
+ };
2125
+ const handlePaste = (e) => {
2126
+ var _a;
2127
+ e.preventDefault();
2128
+ const pasted = e.clipboardData.getData("text").replace(/\D/g, "").slice(0, length);
2129
+ if (!pasted) return;
2130
+ const newOtp = [...otp];
2131
+ pasted.split("").forEach((ch, i) => {
2132
+ newOtp[i] = ch;
2133
+ });
2134
+ setOtp(newOtp);
2135
+ const nextIndex = Math.min(pasted.length, length - 1);
2136
+ (_a = inputs.current[nextIndex]) == null ? void 0 : _a.focus();
2137
+ setFocused(nextIndex);
2138
+ if (newOtp.every((v) => v !== "")) {
2139
+ setCompleted(true);
2140
+ onComplete(newOtp.join(""));
2141
+ }
2142
+ };
2143
+ const handleResend = () => {
2144
+ var _a;
2145
+ setOtp(Array(length).fill(""));
2146
+ setCompleted(false);
2147
+ setResendTimer(30);
2148
+ (_a = inputs.current[0]) == null ? void 0 : _a.focus();
2149
+ setFocused(0);
2150
+ onResend();
2151
+ };
2152
+ return /* @__PURE__ */ import_react13.default.createElement("div", { style: {
2153
+ background: bg,
2154
+ borderRadius: radius,
2155
+ padding: "28px 24px",
2156
+ width: "fit-content",
2157
+ fontFamily: "system-ui, sans-serif",
2158
+ border: "1px solid rgba(255,255,255,0.07)",
2159
+ boxShadow: "0 10px 40px rgba(0,0,0,0.4)"
2160
+ } }, /* @__PURE__ */ import_react13.default.createElement("div", { style: { textAlign: "center", marginBottom: "24px" } }, /* @__PURE__ */ import_react13.default.createElement("div", { style: {
2161
+ width: "44px",
2162
+ height: "44px",
2163
+ borderRadius: "12px",
2164
+ background: alpha(accent, 0.12),
2165
+ border: `1px solid ${alpha(accent, 0.25)}`,
2166
+ display: "flex",
2167
+ alignItems: "center",
2168
+ justifyContent: "center",
2169
+ margin: "0 auto 14px"
2170
+ } }, /* @__PURE__ */ import_react13.default.createElement(
2171
+ "svg",
2172
+ {
2173
+ width: "20",
2174
+ height: "20",
2175
+ viewBox: "0 0 24 24",
2176
+ fill: "none",
2177
+ stroke: accent,
2178
+ strokeWidth: "2",
2179
+ strokeLinecap: "round",
2180
+ strokeLinejoin: "round"
2181
+ },
2182
+ /* @__PURE__ */ import_react13.default.createElement("rect", { x: "2", y: "7", width: "20", height: "14", rx: "2" }),
2183
+ /* @__PURE__ */ import_react13.default.createElement("path", { d: "M16 3l-4 4-4-4" })
2184
+ )), /* @__PURE__ */ import_react13.default.createElement("p", { style: { fontSize: "15px", fontWeight: "700", color: "#fff", margin: "0 0 5px" } }, label), /* @__PURE__ */ import_react13.default.createElement("p", { style: { fontSize: "12px", color: "rgba(255,255,255,0.35)", margin: 0 } }, subLabel)), /* @__PURE__ */ import_react13.default.createElement("div", { style: { display: "flex", gap: "10px", justifyContent: "center", marginBottom: "8px" } }, otp.map((val, i) => /* @__PURE__ */ import_react13.default.createElement(
2185
+ "input",
2186
+ {
2187
+ key: i,
2188
+ ref: (el) => inputs.current[i] = el,
2189
+ type: "text",
2190
+ inputMode: "numeric",
2191
+ maxLength: 1,
2192
+ value: val,
2193
+ onChange: (e) => handleChange(e, i),
2194
+ onKeyDown: (e) => handleKeyDown(e, i),
2195
+ onPaste: handlePaste,
2196
+ onFocus: () => setFocused(i),
2197
+ style: {
2198
+ width: "44px",
2199
+ height: "52px",
2200
+ textAlign: "center",
2201
+ fontSize: "20px",
2202
+ fontWeight: "700",
2203
+ color: "#fff",
2204
+ background: val ? alpha(accent, 0.1) : "rgba(255,255,255,0.04)",
2205
+ border: `1.5px solid ${errorText ? "rgba(239,68,68,0.6)" : focused === i ? accent : val ? alpha(accent, 0.4) : "rgba(255,255,255,0.1)"}`,
2206
+ borderRadius: "12px",
2207
+ outline: "none",
2208
+ caretColor: accent,
2209
+ transition: "all 0.2s",
2210
+ fontFamily: "inherit"
2211
+ }
2212
+ }
2213
+ ))), length === 6 && /* @__PURE__ */ import_react13.default.createElement("div", { style: { display: "flex", justifyContent: "center", marginBottom: "8px" } }, /* @__PURE__ */ import_react13.default.createElement("div", { style: { display: "flex", gap: "10px" } }, [0, 1, 2].map((i) => /* @__PURE__ */ import_react13.default.createElement("div", { key: i, style: { width: "44px" } })), /* @__PURE__ */ import_react13.default.createElement("div", { style: { width: "10px", display: "flex", alignItems: "center", justifyContent: "center" } }, /* @__PURE__ */ import_react13.default.createElement("div", { style: { width: "6px", height: "1.5px", background: "rgba(255,255,255,0.15)", borderRadius: "1px" } })), [0, 1, 2].map((i) => /* @__PURE__ */ import_react13.default.createElement("div", { key: i, style: { width: "44px" } })))), errorText && /* @__PURE__ */ import_react13.default.createElement("p", { style: {
2214
+ fontSize: "12px",
2215
+ color: "#f87171",
2216
+ textAlign: "center",
2217
+ margin: "6px 0 0",
2218
+ display: "flex",
2219
+ alignItems: "center",
2220
+ justifyContent: "center",
2221
+ gap: "5px"
2222
+ } }, /* @__PURE__ */ import_react13.default.createElement(
2223
+ "svg",
2224
+ {
2225
+ width: "12",
2226
+ height: "12",
2227
+ viewBox: "0 0 24 24",
2228
+ fill: "none",
2229
+ stroke: "currentColor",
2230
+ strokeWidth: "2.5",
2231
+ strokeLinecap: "round"
2232
+ },
2233
+ /* @__PURE__ */ import_react13.default.createElement("circle", { cx: "12", cy: "12", r: "10" }),
2234
+ /* @__PURE__ */ import_react13.default.createElement("line", { x1: "12", y1: "8", x2: "12", y2: "12" }),
2235
+ /* @__PURE__ */ import_react13.default.createElement("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" })
2236
+ ), errorText), /* @__PURE__ */ import_react13.default.createElement(
2237
+ "button",
2238
+ {
2239
+ onClick: () => completed && onComplete(otp.join("")),
2240
+ disabled: !completed,
2241
+ style: {
2242
+ width: "100%",
2243
+ padding: "12px",
2244
+ borderRadius: "12px",
2245
+ border: "none",
2246
+ marginTop: "20px",
2247
+ background: completed ? `linear-gradient(135deg, ${accent}, ${alpha(accent, 0.7)})` : "rgba(255,255,255,0.06)",
2248
+ color: completed ? "#fff" : "rgba(255,255,255,0.25)",
2249
+ fontSize: "14px",
2250
+ fontWeight: "700",
2251
+ cursor: completed ? "pointer" : "not-allowed",
2252
+ fontFamily: "inherit",
2253
+ transition: "all 0.25s"
2254
+ }
2255
+ },
2256
+ completed ? "Verify Code" : `Enter ${length - otp.filter((v) => v).length} more digit${length - otp.filter((v) => v).length !== 1 ? "s" : ""}`
2257
+ ), /* @__PURE__ */ import_react13.default.createElement("p", { style: { textAlign: "center", fontSize: "12px", color: "rgba(255,255,255,0.25)", margin: "14px 0 0" } }, "Didn't receive it?", " ", /* @__PURE__ */ import_react13.default.createElement(
2258
+ "button",
2259
+ {
2260
+ onClick: handleResend,
2261
+ disabled: resendTimer > 0,
2262
+ style: {
2263
+ background: "transparent",
2264
+ border: "none",
2265
+ padding: 0,
2266
+ fontSize: "12px",
2267
+ fontWeight: "700",
2268
+ color: resendTimer > 0 ? "rgba(255,255,255,0.25)" : accent,
2269
+ cursor: resendTimer > 0 ? "default" : "pointer",
2270
+ fontFamily: "inherit"
2271
+ }
2272
+ },
2273
+ resendTimer > 0 ? `${resendText} (${resendTimer}s)` : resendText
2274
+ )));
2275
+ };
2276
+
2277
+ // src/components/InvoiceCard/InvoiceCard.jsx
2278
+ var import_react14 = __toESM(require("react"));
2279
+ var InvoiceCard = ({
2280
+ invoiceNumber = "INV-2024-001",
2281
+ date = "21 March 2024",
2282
+ dueDate = "31 March 2024",
2283
+ from = {
2284
+ name: "VirtualAI Inc.",
2285
+ email: "billing@virtualai.com",
2286
+ address: "123 Tech Street, San Francisco, CA"
2287
+ },
2288
+ to = {
2289
+ name: "Aryan Sharma",
2290
+ email: "aryan@example.com",
2291
+ address: "456 Dev Lane, Mumbai, India"
2292
+ },
2293
+ items = [
2294
+ { name: "Pro Plan Subscription", qty: 1, price: 29 },
2295
+ { name: "Extra AI Credits (500)", qty: 2, price: 9 },
2296
+ { name: "Custom Domain Setup", qty: 1, price: 15 }
2297
+ ],
2298
+ taxRate = 18,
2299
+ currency = "$",
2300
+ accent = "#6366f1",
2301
+ bg = "#0f172a",
2302
+ radius = "20px",
2303
+ status = "unpaid",
2304
+ onPayClick = () => {
2305
+ },
2306
+ onDownloadClick = () => {
2307
+ }
2308
+ }) => {
2309
+ const [paid, setPaid] = (0, import_react14.useState)(status === "paid");
2310
+ const alpha = (hex, op) => {
2311
+ const r = parseInt(hex.slice(1, 3), 16);
2312
+ const g = parseInt(hex.slice(3, 5), 16);
2313
+ const b = parseInt(hex.slice(5, 7), 16);
2314
+ return `rgba(${r},${g},${b},${op})`;
2315
+ };
2316
+ const subtotal = items.reduce((s, i) => s + i.qty * i.price, 0);
2317
+ const tax = parseFloat((subtotal * taxRate / 100).toFixed(2));
2318
+ const total = parseFloat((subtotal + tax).toFixed(2));
2319
+ const statusConfig = {
2320
+ paid: { label: "Paid", bg: "rgba(16,185,129,0.15)", color: "#34d399", border: "rgba(16,185,129,0.3)" },
2321
+ unpaid: { label: "Unpaid", bg: "rgba(239,68,68,0.12)", color: "#f87171", border: "rgba(239,68,68,0.3)" },
2322
+ pending: { label: "Pending", bg: "rgba(245,158,11,0.12)", color: "#fbbf24", border: "rgba(245,158,11,0.3)" }
2323
+ };
2324
+ const sc = statusConfig[paid ? "paid" : status] || statusConfig.unpaid;
2325
+ const Row = ({ label, value, bold, large, accentColor }) => /* @__PURE__ */ import_react14.default.createElement("div", { style: {
2326
+ display: "flex",
2327
+ justifyContent: "space-between",
2328
+ alignItems: "center",
2329
+ padding: "5px 0"
2330
+ } }, /* @__PURE__ */ import_react14.default.createElement("span", { style: {
2331
+ fontSize: large ? "14px" : "12px",
2332
+ fontWeight: bold ? "700" : "400",
2333
+ color: large ? "#fff" : "rgba(255,255,255,0.45)"
2334
+ } }, label), /* @__PURE__ */ import_react14.default.createElement("span", { style: {
2335
+ fontSize: large ? "16px" : "13px",
2336
+ fontWeight: bold ? "800" : "600",
2337
+ color: accentColor || (large ? "#fff" : "rgba(255,255,255,0.85)")
2338
+ } }, currency, typeof value === "number" ? value.toFixed(2) : value));
2339
+ return /* @__PURE__ */ import_react14.default.createElement("div", { style: {
2340
+ background: bg,
2341
+ borderRadius: radius,
2342
+ padding: "24px",
2343
+ width: "340px",
2344
+ fontFamily: "system-ui, sans-serif",
2345
+ border: "1px solid rgba(255,255,255,0.07)",
2346
+ boxShadow: "0 10px 40px rgba(0,0,0,0.4)",
2347
+ color: "#fff"
2348
+ } }, /* @__PURE__ */ import_react14.default.createElement("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: "20px" } }, /* @__PURE__ */ import_react14.default.createElement("div", null, /* @__PURE__ */ import_react14.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: "7px", marginBottom: "4px" } }, /* @__PURE__ */ import_react14.default.createElement("div", { style: {
2349
+ width: "24px",
2350
+ height: "24px",
2351
+ borderRadius: "6px",
2352
+ background: `linear-gradient(135deg, ${accent}, ${alpha(accent, 0.6)})`,
2353
+ display: "flex",
2354
+ alignItems: "center",
2355
+ justifyContent: "center",
2356
+ fontSize: "11px",
2357
+ fontWeight: "800",
2358
+ color: "#fff"
2359
+ } }, "V"), /* @__PURE__ */ import_react14.default.createElement("span", { style: { fontSize: "14px", fontWeight: "800" } }, from.name)), /* @__PURE__ */ import_react14.default.createElement("p", { style: { fontSize: "11px", color: "rgba(255,255,255,0.3)", margin: 0 } }, invoiceNumber)), /* @__PURE__ */ import_react14.default.createElement("div", { style: {
2360
+ padding: "4px 12px",
2361
+ borderRadius: "20px",
2362
+ fontSize: "11px",
2363
+ fontWeight: "700",
2364
+ background: sc.bg,
2365
+ color: sc.color,
2366
+ border: `1px solid ${sc.border}`,
2367
+ textTransform: "uppercase",
2368
+ letterSpacing: "0.5px"
2369
+ } }, sc.label)), /* @__PURE__ */ import_react14.default.createElement("div", { style: {
2370
+ display: "grid",
2371
+ gridTemplateColumns: "1fr 1fr",
2372
+ gap: "12px",
2373
+ background: "rgba(255,255,255,0.03)",
2374
+ border: "1px solid rgba(255,255,255,0.06)",
2375
+ borderRadius: "12px",
2376
+ padding: "14px",
2377
+ marginBottom: "20px"
2378
+ } }, [{ label: "From", info: from }, { label: "To", info: to }].map(({ label, info }) => /* @__PURE__ */ import_react14.default.createElement("div", { key: label }, /* @__PURE__ */ import_react14.default.createElement("p", { style: { fontSize: "10px", fontWeight: "700", color: "rgba(255,255,255,0.25)", textTransform: "uppercase", letterSpacing: "0.8px", marginBottom: "5px" } }, label), /* @__PURE__ */ import_react14.default.createElement("p", { style: { fontSize: "12px", fontWeight: "700", color: "#fff", margin: "0 0 2px" } }, info.name), /* @__PURE__ */ import_react14.default.createElement("p", { style: { fontSize: "11px", color: "rgba(255,255,255,0.35)", margin: "0 0 2px" } }, info.email), /* @__PURE__ */ import_react14.default.createElement("p", { style: { fontSize: "10px", color: "rgba(255,255,255,0.25)", margin: 0, lineHeight: 1.4 } }, info.address)))), /* @__PURE__ */ import_react14.default.createElement("div", { style: { display: "flex", gap: "10px", marginBottom: "20px" } }, [{ label: "Issue Date", val: date }, { label: "Due Date", val: dueDate }].map(({ label, val }) => /* @__PURE__ */ import_react14.default.createElement("div", { key: label, style: {
2379
+ flex: 1,
2380
+ background: "rgba(255,255,255,0.03)",
2381
+ border: "1px solid rgba(255,255,255,0.06)",
2382
+ borderRadius: "10px",
2383
+ padding: "10px 12px"
2384
+ } }, /* @__PURE__ */ import_react14.default.createElement("p", { style: { fontSize: "10px", color: "rgba(255,255,255,0.25)", textTransform: "uppercase", letterSpacing: "0.8px", margin: "0 0 3px", fontWeight: "700" } }, label), /* @__PURE__ */ import_react14.default.createElement("p", { style: { fontSize: "12px", fontWeight: "700", color: "#fff", margin: 0 } }, val)))), /* @__PURE__ */ import_react14.default.createElement("div", { style: { marginBottom: "16px" } }, /* @__PURE__ */ import_react14.default.createElement("div", { style: {
2385
+ display: "grid",
2386
+ gridTemplateColumns: "1fr auto auto",
2387
+ gap: "8px",
2388
+ padding: "6px 8px",
2389
+ borderBottom: "1px solid rgba(255,255,255,0.06)",
2390
+ marginBottom: "4px"
2391
+ } }, ["Item", "Qty", "Amount"].map((h) => /* @__PURE__ */ import_react14.default.createElement("span", { key: h, style: { fontSize: "10px", fontWeight: "700", color: "rgba(255,255,255,0.25)", textTransform: "uppercase", letterSpacing: "0.8px", textAlign: h !== "Item" ? "right" : "left" } }, h))), items.map((item, i) => /* @__PURE__ */ import_react14.default.createElement("div", { key: i, style: {
2392
+ display: "grid",
2393
+ gridTemplateColumns: "1fr auto auto",
2394
+ gap: "8px",
2395
+ padding: "8px",
2396
+ borderRadius: "8px",
2397
+ background: i % 2 === 0 ? "rgba(255,255,255,0.02)" : "transparent"
2398
+ } }, /* @__PURE__ */ import_react14.default.createElement("span", { style: { fontSize: "12px", color: "rgba(255,255,255,0.75)" } }, item.name), /* @__PURE__ */ import_react14.default.createElement("span", { style: { fontSize: "12px", color: "rgba(255,255,255,0.35)", textAlign: "right" } }, "\xD7", item.qty), /* @__PURE__ */ import_react14.default.createElement("span", { style: { fontSize: "12px", fontWeight: "600", color: "#fff", textAlign: "right" } }, currency, (item.qty * item.price).toFixed(2))))), /* @__PURE__ */ import_react14.default.createElement("div", { style: {
2399
+ background: "rgba(255,255,255,0.03)",
2400
+ border: "1px solid rgba(255,255,255,0.06)",
2401
+ borderRadius: "12px",
2402
+ padding: "12px 14px",
2403
+ marginBottom: "20px"
2404
+ } }, /* @__PURE__ */ import_react14.default.createElement(Row, { label: "Subtotal", value: subtotal }), /* @__PURE__ */ import_react14.default.createElement(Row, { label: `Tax (${taxRate}%)`, value: tax }), /* @__PURE__ */ import_react14.default.createElement("div", { style: { height: "1px", background: "rgba(255,255,255,0.07)", margin: "8px 0" } }), /* @__PURE__ */ import_react14.default.createElement(Row, { label: "Total", value: total, bold: true, large: true, accentColor: accent })), /* @__PURE__ */ import_react14.default.createElement("div", { style: { display: "flex", gap: "8px" } }, !paid && /* @__PURE__ */ import_react14.default.createElement(
2405
+ "button",
2406
+ {
2407
+ onClick: () => {
2408
+ setPaid(true);
2409
+ onPayClick();
2410
+ },
2411
+ style: {
2412
+ flex: 1,
2413
+ padding: "11px",
2414
+ borderRadius: "12px",
2415
+ border: "none",
2416
+ background: `linear-gradient(135deg, ${accent}, ${alpha(accent, 0.7)})`,
2417
+ color: "#fff",
2418
+ fontSize: "13px",
2419
+ fontWeight: "700",
2420
+ cursor: "pointer",
2421
+ fontFamily: "inherit",
2422
+ transition: "opacity 0.2s"
2423
+ },
2424
+ onMouseEnter: (e) => e.currentTarget.style.opacity = "0.85",
2425
+ onMouseLeave: (e) => e.currentTarget.style.opacity = "1"
2426
+ },
2427
+ "Pay ",
2428
+ currency,
2429
+ total.toFixed(2)
2430
+ ), paid && /* @__PURE__ */ import_react14.default.createElement("div", { style: {
2431
+ flex: 1,
2432
+ padding: "11px",
2433
+ borderRadius: "12px",
2434
+ background: "rgba(16,185,129,0.1)",
2435
+ border: "1px solid rgba(16,185,129,0.25)",
2436
+ display: "flex",
2437
+ alignItems: "center",
2438
+ justifyContent: "center",
2439
+ gap: "6px",
2440
+ fontSize: "13px",
2441
+ fontWeight: "700",
2442
+ color: "#34d399"
2443
+ } }, /* @__PURE__ */ import_react14.default.createElement(
2444
+ "svg",
2445
+ {
2446
+ width: "14",
2447
+ height: "14",
2448
+ viewBox: "0 0 24 24",
2449
+ fill: "none",
2450
+ stroke: "currentColor",
2451
+ strokeWidth: "2.5",
2452
+ strokeLinecap: "round"
2453
+ },
2454
+ /* @__PURE__ */ import_react14.default.createElement("polyline", { points: "20 6 9 17 4 12" })
2455
+ ), "Payment Done"), /* @__PURE__ */ import_react14.default.createElement(
2456
+ "button",
2457
+ {
2458
+ onClick: onDownloadClick,
2459
+ style: {
2460
+ width: "42px",
2461
+ padding: "11px",
2462
+ borderRadius: "12px",
2463
+ background: "rgba(255,255,255,0.05)",
2464
+ border: "1px solid rgba(255,255,255,0.1)",
2465
+ color: "rgba(255,255,255,0.5)",
2466
+ cursor: "pointer",
2467
+ display: "flex",
2468
+ alignItems: "center",
2469
+ justifyContent: "center",
2470
+ transition: "all 0.2s"
2471
+ },
2472
+ onMouseEnter: (e) => {
2473
+ e.currentTarget.style.color = "#fff";
2474
+ e.currentTarget.style.borderColor = "rgba(255,255,255,0.25)";
2475
+ },
2476
+ onMouseLeave: (e) => {
2477
+ e.currentTarget.style.color = "rgba(255,255,255,0.5)";
2478
+ e.currentTarget.style.borderColor = "rgba(255,255,255,0.1)";
2479
+ }
2480
+ },
2481
+ /* @__PURE__ */ import_react14.default.createElement(
2482
+ "svg",
2483
+ {
2484
+ width: "15",
2485
+ height: "15",
2486
+ viewBox: "0 0 24 24",
2487
+ fill: "none",
2488
+ stroke: "currentColor",
2489
+ strokeWidth: "2",
2490
+ strokeLinecap: "round",
2491
+ strokeLinejoin: "round"
2492
+ },
2493
+ /* @__PURE__ */ import_react14.default.createElement("path", { d: "M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3" })
2494
+ )
2495
+ )));
2701
2496
  };
2702
2497
  // Annotate the CommonJS export names for ESM import in node:
2703
2498
  0 && (module.exports = {
2704
- Avatar,
2705
2499
  AvatarCard,
2706
2500
  BackgoundImageSlider,
2707
2501
  Charts,
2708
- CodeBlock,
2709
- CustomInputField,
2710
- DividerLine,
2711
- FileUpload,
2712
2502
  Footer,
2713
2503
  ImageCard,
2714
2504
  ImageSlider,
2505
+ InvoiceCard,
2715
2506
  Loader,
2716
- LoadingSpinner,
2717
2507
  Navbar,
2718
2508
  NotificationToast,
2719
- OtpInput,
2509
+ OTPInput,
2720
2510
  PageLoader,
2721
2511
  PricingCard,
2722
- ResponsiveNavbar,
2723
- SearchBar,
2724
- Sidebar,
2725
- SkeletonLoader,
2726
- SmartButton,
2727
- StatCard,
2728
- Tabs,
2729
- TextArea,
2730
- ToastNotification
2512
+ Sidebar
2731
2513
  });