virtual-ui-lib 1.0.60 → 1.0.62

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 +236 -0
  2. package/dist/index.mjs +234 -0
  3. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -35,6 +35,7 @@ __export(index_exports, {
35
35
  CustomInputField: () => CustomInputField,
36
36
  DividerLine: () => DividerLine,
37
37
  FileUpload: () => FileUpload,
38
+ Footer: () => Footer,
38
39
  Loader: () => Loader,
39
40
  LoadingSpinner: () => LoadingSpinner,
40
41
  Navbar: () => Navbar,
@@ -43,6 +44,7 @@ __export(index_exports, {
43
44
  PricingCard: () => PricingCard,
44
45
  ResponsiveNavbar: () => ResponsiveNavbar,
45
46
  SearchBar: () => SearchBar,
47
+ Sidebar: () => Sidebar,
46
48
  SkeletonLoader: () => SkeletonLoader,
47
49
  SmartButton: () => SmartButton,
48
50
  StatCard: () => StatCard,
@@ -1365,6 +1367,238 @@ var Navbar = ({
1365
1367
  ctaText
1366
1368
  ))));
1367
1369
  };
1370
+
1371
+ // src/components/Footer/Footer.jsx
1372
+ var import_react21 = __toESM(require("react"));
1373
+ var Footer = ({
1374
+ logo = "VirtualAI",
1375
+ links = ["Home", "Features", "Pricing", "Blog", "Contact"],
1376
+ copyright = "VirtualAI",
1377
+ accent = "#6366f1",
1378
+ bg = "#0f172a"
1379
+ }) => {
1380
+ return /* @__PURE__ */ import_react21.default.createElement("footer", { style: {
1381
+ background: bg,
1382
+ borderTop: "1px solid rgba(255,255,255,0.06)",
1383
+ fontFamily: "system-ui, sans-serif",
1384
+ width: "100%",
1385
+ boxSizing: "border-box",
1386
+ padding: "28px 24px"
1387
+ } }, /* @__PURE__ */ import_react21.default.createElement("div", { style: {
1388
+ maxWidth: "900px",
1389
+ margin: "0 auto",
1390
+ display: "flex",
1391
+ flexDirection: "column",
1392
+ alignItems: "center",
1393
+ gap: "20px"
1394
+ } }, /* @__PURE__ */ import_react21.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: "8px" } }, /* @__PURE__ */ import_react21.default.createElement("div", { style: {
1395
+ width: "26px",
1396
+ height: "26px",
1397
+ borderRadius: "7px",
1398
+ background: `linear-gradient(135deg, ${accent}, rgba(99,102,241,0.5))`,
1399
+ display: "flex",
1400
+ alignItems: "center",
1401
+ justifyContent: "center",
1402
+ fontSize: "12px",
1403
+ fontWeight: "800",
1404
+ color: "#fff"
1405
+ } }, 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(
1406
+ "a",
1407
+ {
1408
+ key: link,
1409
+ href: "#",
1410
+ style: {
1411
+ fontSize: "13px",
1412
+ color: "rgba(255,255,255,0.4)",
1413
+ textDecoration: "none",
1414
+ padding: "4px 12px",
1415
+ borderRadius: "8px",
1416
+ transition: "color 0.2s"
1417
+ },
1418
+ onMouseEnter: (e) => e.currentTarget.style.color = "rgba(255,255,255,0.85)",
1419
+ onMouseLeave: (e) => e.currentTarget.style.color = "rgba(255,255,255,0.4)"
1420
+ },
1421
+ link
1422
+ ))), /* @__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.")));
1423
+ };
1424
+
1425
+ // src/components/Sidebar/Sidebar.jsx
1426
+ var import_react22 = __toESM(require("react"));
1427
+ var Sidebar = ({
1428
+ logo = "VirtualAI",
1429
+ accent = "#6366f1",
1430
+ bg = "#0f172a",
1431
+ items = [
1432
+ {
1433
+ label: "Dashboard",
1434
+ icon: "M3 3h7v7H3zM14 3h7v7h-7zM3 14h7v7H3zM14 14h7v7h-7z",
1435
+ 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."))
1436
+ },
1437
+ {
1438
+ label: "Analytics",
1439
+ icon: "M18 20V10M12 20V4M6 20v-6",
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" } }, "Analytics"), /* @__PURE__ */ import_react22.default.createElement("p", { style: { color: "rgba(255,255,255,0.4)", fontSize: "14px" } }, "View your stats and performance here."))
1441
+ },
1442
+ {
1443
+ label: "Users",
1444
+ 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",
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" } }, "Users"), /* @__PURE__ */ import_react22.default.createElement("p", { style: { color: "rgba(255,255,255,0.4)", fontSize: "14px" } }, "Manage your users and permissions."))
1446
+ },
1447
+ {
1448
+ label: "Settings",
1449
+ 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",
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" } }, "Settings"), /* @__PURE__ */ import_react22.default.createElement("p", { style: { color: "rgba(255,255,255,0.4)", fontSize: "14px" } }, "Configure your preferences here."))
1451
+ }
1452
+ ]
1453
+ }) => {
1454
+ const [active, setActive] = (0, import_react22.useState)(0);
1455
+ const [collapsed, setCollapsed] = (0, import_react22.useState)(false);
1456
+ const alpha = (hex, op) => {
1457
+ const r = parseInt(hex.slice(1, 3), 16);
1458
+ const g = parseInt(hex.slice(3, 5), 16);
1459
+ const b = parseInt(hex.slice(5, 7), 16);
1460
+ return `rgba(${r},${g},${b},${op})`;
1461
+ };
1462
+ const activeItem = items[active];
1463
+ return /* @__PURE__ */ import_react22.default.createElement("div", { style: {
1464
+ display: "flex",
1465
+ height: "480px",
1466
+ fontFamily: "system-ui, sans-serif",
1467
+ borderRadius: "16px",
1468
+ overflow: "hidden",
1469
+ border: "1px solid rgba(255,255,255,0.07)"
1470
+ } }, /* @__PURE__ */ import_react22.default.createElement("div", { style: {
1471
+ width: collapsed ? "60px" : "200px",
1472
+ background: bg,
1473
+ borderRight: "1px solid rgba(255,255,255,0.06)",
1474
+ display: "flex",
1475
+ flexDirection: "column",
1476
+ transition: "width 0.25s ease",
1477
+ flexShrink: 0,
1478
+ overflow: "hidden"
1479
+ } }, /* @__PURE__ */ import_react22.default.createElement("div", { style: {
1480
+ height: "56px",
1481
+ display: "flex",
1482
+ alignItems: "center",
1483
+ gap: "10px",
1484
+ padding: collapsed ? "0 14px" : "0 16px",
1485
+ borderBottom: "1px solid rgba(255,255,255,0.05)",
1486
+ overflow: "hidden",
1487
+ flexShrink: 0
1488
+ } }, /* @__PURE__ */ import_react22.default.createElement("div", { style: {
1489
+ width: "28px",
1490
+ height: "28px",
1491
+ borderRadius: "8px",
1492
+ flexShrink: 0,
1493
+ background: `linear-gradient(135deg, ${accent}, ${alpha(accent, 0.6)})`,
1494
+ display: "flex",
1495
+ alignItems: "center",
1496
+ justifyContent: "center",
1497
+ fontSize: "13px",
1498
+ fontWeight: "800",
1499
+ color: "#fff"
1500
+ } }, 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(
1501
+ "button",
1502
+ {
1503
+ key: i,
1504
+ onClick: () => setActive(i),
1505
+ title: collapsed ? item.label : "",
1506
+ style: {
1507
+ display: "flex",
1508
+ alignItems: "center",
1509
+ gap: "10px",
1510
+ padding: collapsed ? "9px 0" : "9px 12px",
1511
+ justifyContent: collapsed ? "center" : "flex-start",
1512
+ borderRadius: "10px",
1513
+ border: "none",
1514
+ cursor: "pointer",
1515
+ transition: "all 0.2s",
1516
+ fontFamily: "inherit",
1517
+ width: "100%",
1518
+ background: active === i ? alpha(accent, 0.12) : "transparent",
1519
+ color: active === i ? accent : "rgba(255,255,255,0.45)",
1520
+ borderLeft: active === i ? `2px solid ${accent}` : "2px solid transparent"
1521
+ },
1522
+ onMouseEnter: (e) => {
1523
+ if (active !== i) {
1524
+ e.currentTarget.style.background = "rgba(255,255,255,0.04)";
1525
+ e.currentTarget.style.color = "rgba(255,255,255,0.8)";
1526
+ }
1527
+ },
1528
+ onMouseLeave: (e) => {
1529
+ if (active !== i) {
1530
+ e.currentTarget.style.background = "transparent";
1531
+ e.currentTarget.style.color = "rgba(255,255,255,0.45)";
1532
+ }
1533
+ }
1534
+ },
1535
+ /* @__PURE__ */ import_react22.default.createElement(
1536
+ "svg",
1537
+ {
1538
+ width: "16",
1539
+ height: "16",
1540
+ viewBox: "0 0 24 24",
1541
+ fill: "none",
1542
+ stroke: "currentColor",
1543
+ strokeWidth: "2",
1544
+ strokeLinecap: "round",
1545
+ strokeLinejoin: "round",
1546
+ style: { flexShrink: 0 }
1547
+ },
1548
+ /* @__PURE__ */ import_react22.default.createElement("path", { d: item.icon })
1549
+ ),
1550
+ !collapsed && /* @__PURE__ */ import_react22.default.createElement("span", { style: { fontSize: "13px", fontWeight: active === i ? "700" : "500", whiteSpace: "nowrap" } }, item.label)
1551
+ ))), /* @__PURE__ */ import_react22.default.createElement("div", { style: { padding: "8px", borderTop: "1px solid rgba(255,255,255,0.05)" } }, /* @__PURE__ */ import_react22.default.createElement(
1552
+ "button",
1553
+ {
1554
+ onClick: () => setCollapsed((c) => !c),
1555
+ style: {
1556
+ width: "100%",
1557
+ padding: "8px",
1558
+ borderRadius: "9px",
1559
+ border: "none",
1560
+ background: "rgba(255,255,255,0.04)",
1561
+ cursor: "pointer",
1562
+ display: "flex",
1563
+ alignItems: "center",
1564
+ justifyContent: "center",
1565
+ color: "rgba(255,255,255,0.3)",
1566
+ transition: "all 0.2s"
1567
+ },
1568
+ onMouseEnter: (e) => e.currentTarget.style.color = "rgba(255,255,255,0.7)",
1569
+ onMouseLeave: (e) => e.currentTarget.style.color = "rgba(255,255,255,0.3)"
1570
+ },
1571
+ /* @__PURE__ */ import_react22.default.createElement(
1572
+ "svg",
1573
+ {
1574
+ width: "15",
1575
+ height: "15",
1576
+ viewBox: "0 0 24 24",
1577
+ fill: "none",
1578
+ stroke: "currentColor",
1579
+ strokeWidth: "2",
1580
+ strokeLinecap: "round"
1581
+ },
1582
+ /* @__PURE__ */ import_react22.default.createElement("path", { d: collapsed ? "M9 18l6-6-6-6" : "M15 18l-6-6 6-6" })
1583
+ )
1584
+ ))), /* @__PURE__ */ import_react22.default.createElement("div", { style: {
1585
+ flex: 1,
1586
+ background: "rgba(255,255,255,0.02)",
1587
+ overflow: "auto"
1588
+ } }, /* @__PURE__ */ import_react22.default.createElement("div", { style: {
1589
+ height: "56px",
1590
+ display: "flex",
1591
+ alignItems: "center",
1592
+ padding: "0 20px",
1593
+ borderBottom: "1px solid rgba(255,255,255,0.05)",
1594
+ gap: "10px"
1595
+ } }, /* @__PURE__ */ import_react22.default.createElement("div", { style: {
1596
+ width: "6px",
1597
+ height: "6px",
1598
+ borderRadius: "50%",
1599
+ background: accent
1600
+ } }), /* @__PURE__ */ import_react22.default.createElement("span", { style: { fontSize: "14px", fontWeight: "700", color: "#fff" } }, activeItem == null ? void 0 : activeItem.label)), /* @__PURE__ */ import_react22.default.createElement("div", { style: { color: "#fff" } }, activeItem == null ? void 0 : activeItem.component)));
1601
+ };
1368
1602
  // Annotate the CommonJS export names for ESM import in node:
1369
1603
  0 && (module.exports = {
1370
1604
  Avatar,
@@ -1373,6 +1607,7 @@ var Navbar = ({
1373
1607
  CustomInputField,
1374
1608
  DividerLine,
1375
1609
  FileUpload,
1610
+ Footer,
1376
1611
  Loader,
1377
1612
  LoadingSpinner,
1378
1613
  Navbar,
@@ -1381,6 +1616,7 @@ var Navbar = ({
1381
1616
  PricingCard,
1382
1617
  ResponsiveNavbar,
1383
1618
  SearchBar,
1619
+ Sidebar,
1384
1620
  SkeletonLoader,
1385
1621
  SmartButton,
1386
1622
  StatCard,
package/dist/index.mjs CHANGED
@@ -1311,6 +1311,238 @@ var Navbar = ({
1311
1311
  ctaText
1312
1312
  ))));
1313
1313
  };
1314
+
1315
+ // src/components/Footer/Footer.jsx
1316
+ import React21 from "react";
1317
+ var Footer = ({
1318
+ logo = "VirtualAI",
1319
+ links = ["Home", "Features", "Pricing", "Blog", "Contact"],
1320
+ copyright = "VirtualAI",
1321
+ accent = "#6366f1",
1322
+ bg = "#0f172a"
1323
+ }) => {
1324
+ return /* @__PURE__ */ React21.createElement("footer", { style: {
1325
+ background: bg,
1326
+ borderTop: "1px solid rgba(255,255,255,0.06)",
1327
+ fontFamily: "system-ui, sans-serif",
1328
+ width: "100%",
1329
+ boxSizing: "border-box",
1330
+ padding: "28px 24px"
1331
+ } }, /* @__PURE__ */ React21.createElement("div", { style: {
1332
+ maxWidth: "900px",
1333
+ margin: "0 auto",
1334
+ display: "flex",
1335
+ flexDirection: "column",
1336
+ alignItems: "center",
1337
+ gap: "20px"
1338
+ } }, /* @__PURE__ */ React21.createElement("div", { style: { display: "flex", alignItems: "center", gap: "8px" } }, /* @__PURE__ */ React21.createElement("div", { style: {
1339
+ width: "26px",
1340
+ height: "26px",
1341
+ borderRadius: "7px",
1342
+ background: `linear-gradient(135deg, ${accent}, rgba(99,102,241,0.5))`,
1343
+ display: "flex",
1344
+ alignItems: "center",
1345
+ justifyContent: "center",
1346
+ fontSize: "12px",
1347
+ fontWeight: "800",
1348
+ color: "#fff"
1349
+ } }, logo[0]), /* @__PURE__ */ React21.createElement("span", { style: { fontSize: "15px", fontWeight: "800", color: "#fff" } }, logo)), /* @__PURE__ */ React21.createElement("div", { style: { display: "flex", flexWrap: "wrap", justifyContent: "center", gap: "4px" } }, links.map((link) => /* @__PURE__ */ React21.createElement(
1350
+ "a",
1351
+ {
1352
+ key: link,
1353
+ href: "#",
1354
+ style: {
1355
+ fontSize: "13px",
1356
+ color: "rgba(255,255,255,0.4)",
1357
+ textDecoration: "none",
1358
+ padding: "4px 12px",
1359
+ borderRadius: "8px",
1360
+ transition: "color 0.2s"
1361
+ },
1362
+ onMouseEnter: (e) => e.currentTarget.style.color = "rgba(255,255,255,0.85)",
1363
+ onMouseLeave: (e) => e.currentTarget.style.color = "rgba(255,255,255,0.4)"
1364
+ },
1365
+ link
1366
+ ))), /* @__PURE__ */ React21.createElement("div", { style: { width: "100%", height: "1px", background: "rgba(255,255,255,0.06)" } }), /* @__PURE__ */ React21.createElement("p", { style: { fontSize: "12px", color: "rgba(255,255,255,0.22)", margin: 0 } }, "\xA9 ", (/* @__PURE__ */ new Date()).getFullYear(), " ", copyright, ". All rights reserved.")));
1367
+ };
1368
+
1369
+ // src/components/Sidebar/Sidebar.jsx
1370
+ import React22, { useState as useState15 } from "react";
1371
+ var Sidebar = ({
1372
+ logo = "VirtualAI",
1373
+ accent = "#6366f1",
1374
+ bg = "#0f172a",
1375
+ items = [
1376
+ {
1377
+ label: "Dashboard",
1378
+ icon: "M3 3h7v7H3zM14 3h7v7h-7zM3 14h7v7H3zM14 14h7v7h-7z",
1379
+ component: /* @__PURE__ */ React22.createElement("div", { style: { padding: "24px" } }, /* @__PURE__ */ React22.createElement("h2", { style: { color: "#fff", fontSize: "20px", fontWeight: "700", marginBottom: "8px" } }, "Dashboard"), /* @__PURE__ */ React22.createElement("p", { style: { color: "rgba(255,255,255,0.4)", fontSize: "14px" } }, "Welcome to your dashboard overview."))
1380
+ },
1381
+ {
1382
+ label: "Analytics",
1383
+ icon: "M18 20V10M12 20V4M6 20v-6",
1384
+ component: /* @__PURE__ */ React22.createElement("div", { style: { padding: "24px" } }, /* @__PURE__ */ React22.createElement("h2", { style: { color: "#fff", fontSize: "20px", fontWeight: "700", marginBottom: "8px" } }, "Analytics"), /* @__PURE__ */ React22.createElement("p", { style: { color: "rgba(255,255,255,0.4)", fontSize: "14px" } }, "View your stats and performance here."))
1385
+ },
1386
+ {
1387
+ label: "Users",
1388
+ 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",
1389
+ component: /* @__PURE__ */ React22.createElement("div", { style: { padding: "24px" } }, /* @__PURE__ */ React22.createElement("h2", { style: { color: "#fff", fontSize: "20px", fontWeight: "700", marginBottom: "8px" } }, "Users"), /* @__PURE__ */ React22.createElement("p", { style: { color: "rgba(255,255,255,0.4)", fontSize: "14px" } }, "Manage your users and permissions."))
1390
+ },
1391
+ {
1392
+ label: "Settings",
1393
+ 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",
1394
+ component: /* @__PURE__ */ React22.createElement("div", { style: { padding: "24px" } }, /* @__PURE__ */ React22.createElement("h2", { style: { color: "#fff", fontSize: "20px", fontWeight: "700", marginBottom: "8px" } }, "Settings"), /* @__PURE__ */ React22.createElement("p", { style: { color: "rgba(255,255,255,0.4)", fontSize: "14px" } }, "Configure your preferences here."))
1395
+ }
1396
+ ]
1397
+ }) => {
1398
+ const [active, setActive] = useState15(0);
1399
+ const [collapsed, setCollapsed] = useState15(false);
1400
+ const alpha = (hex, op) => {
1401
+ const r = parseInt(hex.slice(1, 3), 16);
1402
+ const g = parseInt(hex.slice(3, 5), 16);
1403
+ const b = parseInt(hex.slice(5, 7), 16);
1404
+ return `rgba(${r},${g},${b},${op})`;
1405
+ };
1406
+ const activeItem = items[active];
1407
+ return /* @__PURE__ */ React22.createElement("div", { style: {
1408
+ display: "flex",
1409
+ height: "480px",
1410
+ fontFamily: "system-ui, sans-serif",
1411
+ borderRadius: "16px",
1412
+ overflow: "hidden",
1413
+ border: "1px solid rgba(255,255,255,0.07)"
1414
+ } }, /* @__PURE__ */ React22.createElement("div", { style: {
1415
+ width: collapsed ? "60px" : "200px",
1416
+ background: bg,
1417
+ borderRight: "1px solid rgba(255,255,255,0.06)",
1418
+ display: "flex",
1419
+ flexDirection: "column",
1420
+ transition: "width 0.25s ease",
1421
+ flexShrink: 0,
1422
+ overflow: "hidden"
1423
+ } }, /* @__PURE__ */ React22.createElement("div", { style: {
1424
+ height: "56px",
1425
+ display: "flex",
1426
+ alignItems: "center",
1427
+ gap: "10px",
1428
+ padding: collapsed ? "0 14px" : "0 16px",
1429
+ borderBottom: "1px solid rgba(255,255,255,0.05)",
1430
+ overflow: "hidden",
1431
+ flexShrink: 0
1432
+ } }, /* @__PURE__ */ React22.createElement("div", { style: {
1433
+ width: "28px",
1434
+ height: "28px",
1435
+ borderRadius: "8px",
1436
+ flexShrink: 0,
1437
+ background: `linear-gradient(135deg, ${accent}, ${alpha(accent, 0.6)})`,
1438
+ display: "flex",
1439
+ alignItems: "center",
1440
+ justifyContent: "center",
1441
+ fontSize: "13px",
1442
+ fontWeight: "800",
1443
+ color: "#fff"
1444
+ } }, logo[0]), !collapsed && /* @__PURE__ */ React22.createElement("span", { style: { fontSize: "14px", fontWeight: "800", color: "#fff", whiteSpace: "nowrap" } }, logo)), /* @__PURE__ */ React22.createElement("nav", { style: { flex: 1, padding: "10px 8px", display: "flex", flexDirection: "column", gap: "3px", overflowY: "auto" } }, items.map((item, i) => /* @__PURE__ */ React22.createElement(
1445
+ "button",
1446
+ {
1447
+ key: i,
1448
+ onClick: () => setActive(i),
1449
+ title: collapsed ? item.label : "",
1450
+ style: {
1451
+ display: "flex",
1452
+ alignItems: "center",
1453
+ gap: "10px",
1454
+ padding: collapsed ? "9px 0" : "9px 12px",
1455
+ justifyContent: collapsed ? "center" : "flex-start",
1456
+ borderRadius: "10px",
1457
+ border: "none",
1458
+ cursor: "pointer",
1459
+ transition: "all 0.2s",
1460
+ fontFamily: "inherit",
1461
+ width: "100%",
1462
+ background: active === i ? alpha(accent, 0.12) : "transparent",
1463
+ color: active === i ? accent : "rgba(255,255,255,0.45)",
1464
+ borderLeft: active === i ? `2px solid ${accent}` : "2px solid transparent"
1465
+ },
1466
+ onMouseEnter: (e) => {
1467
+ if (active !== i) {
1468
+ e.currentTarget.style.background = "rgba(255,255,255,0.04)";
1469
+ e.currentTarget.style.color = "rgba(255,255,255,0.8)";
1470
+ }
1471
+ },
1472
+ onMouseLeave: (e) => {
1473
+ if (active !== i) {
1474
+ e.currentTarget.style.background = "transparent";
1475
+ e.currentTarget.style.color = "rgba(255,255,255,0.45)";
1476
+ }
1477
+ }
1478
+ },
1479
+ /* @__PURE__ */ React22.createElement(
1480
+ "svg",
1481
+ {
1482
+ width: "16",
1483
+ height: "16",
1484
+ viewBox: "0 0 24 24",
1485
+ fill: "none",
1486
+ stroke: "currentColor",
1487
+ strokeWidth: "2",
1488
+ strokeLinecap: "round",
1489
+ strokeLinejoin: "round",
1490
+ style: { flexShrink: 0 }
1491
+ },
1492
+ /* @__PURE__ */ React22.createElement("path", { d: item.icon })
1493
+ ),
1494
+ !collapsed && /* @__PURE__ */ React22.createElement("span", { style: { fontSize: "13px", fontWeight: active === i ? "700" : "500", whiteSpace: "nowrap" } }, item.label)
1495
+ ))), /* @__PURE__ */ React22.createElement("div", { style: { padding: "8px", borderTop: "1px solid rgba(255,255,255,0.05)" } }, /* @__PURE__ */ React22.createElement(
1496
+ "button",
1497
+ {
1498
+ onClick: () => setCollapsed((c) => !c),
1499
+ style: {
1500
+ width: "100%",
1501
+ padding: "8px",
1502
+ borderRadius: "9px",
1503
+ border: "none",
1504
+ background: "rgba(255,255,255,0.04)",
1505
+ cursor: "pointer",
1506
+ display: "flex",
1507
+ alignItems: "center",
1508
+ justifyContent: "center",
1509
+ color: "rgba(255,255,255,0.3)",
1510
+ transition: "all 0.2s"
1511
+ },
1512
+ onMouseEnter: (e) => e.currentTarget.style.color = "rgba(255,255,255,0.7)",
1513
+ onMouseLeave: (e) => e.currentTarget.style.color = "rgba(255,255,255,0.3)"
1514
+ },
1515
+ /* @__PURE__ */ React22.createElement(
1516
+ "svg",
1517
+ {
1518
+ width: "15",
1519
+ height: "15",
1520
+ viewBox: "0 0 24 24",
1521
+ fill: "none",
1522
+ stroke: "currentColor",
1523
+ strokeWidth: "2",
1524
+ strokeLinecap: "round"
1525
+ },
1526
+ /* @__PURE__ */ React22.createElement("path", { d: collapsed ? "M9 18l6-6-6-6" : "M15 18l-6-6 6-6" })
1527
+ )
1528
+ ))), /* @__PURE__ */ React22.createElement("div", { style: {
1529
+ flex: 1,
1530
+ background: "rgba(255,255,255,0.02)",
1531
+ overflow: "auto"
1532
+ } }, /* @__PURE__ */ React22.createElement("div", { style: {
1533
+ height: "56px",
1534
+ display: "flex",
1535
+ alignItems: "center",
1536
+ padding: "0 20px",
1537
+ borderBottom: "1px solid rgba(255,255,255,0.05)",
1538
+ gap: "10px"
1539
+ } }, /* @__PURE__ */ React22.createElement("div", { style: {
1540
+ width: "6px",
1541
+ height: "6px",
1542
+ borderRadius: "50%",
1543
+ background: accent
1544
+ } }), /* @__PURE__ */ React22.createElement("span", { style: { fontSize: "14px", fontWeight: "700", color: "#fff" } }, activeItem == null ? void 0 : activeItem.label)), /* @__PURE__ */ React22.createElement("div", { style: { color: "#fff" } }, activeItem == null ? void 0 : activeItem.component)));
1545
+ };
1314
1546
  export {
1315
1547
  Avatar,
1316
1548
  AvatarCard,
@@ -1318,6 +1550,7 @@ export {
1318
1550
  CustomInputField,
1319
1551
  DividerLine,
1320
1552
  FileUpload,
1553
+ Footer,
1321
1554
  Loader,
1322
1555
  LoadingSpinner,
1323
1556
  Navbar,
@@ -1326,6 +1559,7 @@ export {
1326
1559
  PricingCard,
1327
1560
  ResponsiveNavbar,
1328
1561
  SearchBar,
1562
+ Sidebar,
1329
1563
  SkeletonLoader,
1330
1564
  SmartButton,
1331
1565
  StatCard,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "virtual-ui-lib",
3
- "version": "1.0.60",
3
+ "version": "1.0.62",
4
4
  "description": "Virtual UI React Component Library",
5
5
  "author": "Ankush",
6
6
  "license": "ISC",