virtuo-ui-library 1.0.9 → 1.0.10

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 +109 -2
  2. package/dist/index.mjs +107 -1
  3. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -33,7 +33,8 @@ __export(index_exports, {
33
33
  Card: () => Card,
34
34
  EcommerceCard: () => EcommerceCard,
35
35
  NavBar: () => NavBar,
36
- ProfileCard: () => ProfileCard
36
+ ProfileCard: () => ProfileCard,
37
+ SideBar: () => SideBar
37
38
  });
38
39
  module.exports = __toCommonJS(index_exports);
39
40
 
@@ -383,11 +384,117 @@ var NavBar = ({
383
384
  onLinkClick(link);
384
385
  }, style: { background: active === link ? alpha(accent, 0.12) : "transparent", border: "none", padding: "7px 16px", borderRadius: "9px", fontSize: "14px", fontWeight: active === link ? "700" : "500", color: active === link ? accent : "rgba(255,255,255,0.5)", cursor: "pointer", fontFamily: "inherit" } }, link))), /* @__PURE__ */ import_react5.default.createElement("button", { onClick: onCtaClick, style: { padding: "8px 18px", borderRadius: "10px", border: "none", background: "linear-gradient(135deg, " + accent + ", " + alpha(accent, 0.75) + ")", color: "#fff", fontSize: "13px", fontWeight: "700", cursor: "pointer", fontFamily: "inherit" } }, ctaText)));
385
386
  };
387
+
388
+ // src/components/SideBar/SideBar.jsx
389
+ var import_react6 = __toESM(require("react"));
390
+ var SideBar = ({
391
+ items = ["Dashboard", "Projects", "Team", "Calendar", "Messages"],
392
+ activeItem = "Dashboard",
393
+ logo = "Company",
394
+ accent = "#6366f1",
395
+ bg = "#0f172a",
396
+ width = "280px",
397
+ onItemClick = () => {
398
+ }
399
+ }) => {
400
+ const [hoveredItem, setHoveredItem] = (0, import_react6.useState)(null);
401
+ const alpha = (hex, op) => {
402
+ const r = parseInt(hex.slice(1, 3), 16), g = parseInt(hex.slice(3, 5), 16), b = parseInt(hex.slice(5, 7), 16);
403
+ return "rgba(" + r + "," + g + "," + b + "," + op + ")";
404
+ };
405
+ return /* @__PURE__ */ import_react6.default.createElement("div", { style: {
406
+ width,
407
+ background: bg,
408
+ height: "100vh",
409
+ borderRight: "1px solid rgba(255,255,255,0.08)",
410
+ fontFamily: "system-ui,sans-serif",
411
+ display: "flex",
412
+ flexDirection: "column",
413
+ padding: "24px 0"
414
+ } }, /* @__PURE__ */ import_react6.default.createElement("div", { style: {
415
+ display: "flex",
416
+ alignItems: "center",
417
+ gap: "10px",
418
+ padding: "0 24px",
419
+ marginBottom: "32px"
420
+ } }, /* @__PURE__ */ import_react6.default.createElement("div", { style: {
421
+ width: "32px",
422
+ height: "32px",
423
+ borderRadius: "8px",
424
+ background: "linear-gradient(135deg, " + accent + ", " + alpha(accent, 0.7) + ")",
425
+ display: "flex",
426
+ alignItems: "center",
427
+ justifyContent: "center",
428
+ color: "#fff",
429
+ fontWeight: "700",
430
+ fontSize: "14px"
431
+ } }, logo[0]), /* @__PURE__ */ import_react6.default.createElement("div", { style: { color: "#fff", fontWeight: "700", fontSize: "16px" } }, logo)), /* @__PURE__ */ import_react6.default.createElement("div", { style: {
432
+ display: "flex",
433
+ flexDirection: "column",
434
+ gap: "4px",
435
+ padding: "0 16px"
436
+ } }, items.map((item) => /* @__PURE__ */ import_react6.default.createElement(
437
+ "button",
438
+ {
439
+ key: item,
440
+ onClick: () => onItemClick(item),
441
+ onMouseEnter: () => setHoveredItem(item),
442
+ onMouseLeave: () => setHoveredItem(null),
443
+ style: {
444
+ background: activeItem === item ? alpha(accent, 0.15) : hoveredItem === item ? "rgba(255,255,255,0.03)" : "transparent",
445
+ border: "none",
446
+ padding: "10px 16px",
447
+ borderRadius: "8px",
448
+ display: "flex",
449
+ alignItems: "center",
450
+ gap: "10px",
451
+ cursor: "pointer",
452
+ color: activeItem === item ? accent : "rgba(255,255,255,0.7)",
453
+ fontWeight: activeItem === item ? "600" : "500",
454
+ fontSize: "14px",
455
+ transition: "all 0.2s"
456
+ }
457
+ },
458
+ /* @__PURE__ */ import_react6.default.createElement("div", { style: {
459
+ width: "24px",
460
+ height: "24px",
461
+ borderRadius: "6px",
462
+ background: activeItem === item ? alpha(accent, 0.2) : "rgba(255,255,255,0.05)",
463
+ display: "flex",
464
+ alignItems: "center",
465
+ justifyContent: "center"
466
+ } }, /* @__PURE__ */ import_react6.default.createElement("div", { style: {
467
+ width: "4px",
468
+ height: "4px",
469
+ borderRadius: "50%",
470
+ background: activeItem === item ? accent : "rgba(255,255,255,0.3)"
471
+ } })),
472
+ item
473
+ ))), /* @__PURE__ */ import_react6.default.createElement("div", { style: {
474
+ marginTop: "auto",
475
+ padding: "16px 24px",
476
+ borderTop: "1px solid rgba(255,255,255,0.08)"
477
+ } }, /* @__PURE__ */ import_react6.default.createElement("div", { style: {
478
+ display: "flex",
479
+ alignItems: "center",
480
+ gap: "10px",
481
+ padding: "8px 12px",
482
+ borderRadius: "8px",
483
+ background: "rgba(255,255,255,0.03)",
484
+ cursor: "pointer"
485
+ } }, /* @__PURE__ */ import_react6.default.createElement("div", { style: {
486
+ width: "32px",
487
+ height: "32px",
488
+ borderRadius: "50%",
489
+ background: "rgba(255,255,255,0.1)"
490
+ } }), /* @__PURE__ */ import_react6.default.createElement("div", null, /* @__PURE__ */ import_react6.default.createElement("div", { style: { color: "#fff", fontSize: "13px", fontWeight: "600" } }, "John Doe"), /* @__PURE__ */ import_react6.default.createElement("div", { style: { color: "rgba(255,255,255,0.4)", fontSize: "11px" } }, "Admin")))));
491
+ };
386
492
  // Annotate the CommonJS export names for ESM import in node:
387
493
  0 && (module.exports = {
388
494
  Button,
389
495
  Card,
390
496
  EcommerceCard,
391
497
  NavBar,
392
- ProfileCard
498
+ ProfileCard,
499
+ SideBar
393
500
  });
package/dist/index.mjs CHANGED
@@ -344,10 +344,116 @@ var NavBar = ({
344
344
  onLinkClick(link);
345
345
  }, style: { background: active === link ? alpha(accent, 0.12) : "transparent", border: "none", padding: "7px 16px", borderRadius: "9px", fontSize: "14px", fontWeight: active === link ? "700" : "500", color: active === link ? accent : "rgba(255,255,255,0.5)", cursor: "pointer", fontFamily: "inherit" } }, link))), /* @__PURE__ */ React5.createElement("button", { onClick: onCtaClick, style: { padding: "8px 18px", borderRadius: "10px", border: "none", background: "linear-gradient(135deg, " + accent + ", " + alpha(accent, 0.75) + ")", color: "#fff", fontSize: "13px", fontWeight: "700", cursor: "pointer", fontFamily: "inherit" } }, ctaText)));
346
346
  };
347
+
348
+ // src/components/SideBar/SideBar.jsx
349
+ import React6, { useState as useState5 } from "react";
350
+ var SideBar = ({
351
+ items = ["Dashboard", "Projects", "Team", "Calendar", "Messages"],
352
+ activeItem = "Dashboard",
353
+ logo = "Company",
354
+ accent = "#6366f1",
355
+ bg = "#0f172a",
356
+ width = "280px",
357
+ onItemClick = () => {
358
+ }
359
+ }) => {
360
+ const [hoveredItem, setHoveredItem] = useState5(null);
361
+ const alpha = (hex, op) => {
362
+ const r = parseInt(hex.slice(1, 3), 16), g = parseInt(hex.slice(3, 5), 16), b = parseInt(hex.slice(5, 7), 16);
363
+ return "rgba(" + r + "," + g + "," + b + "," + op + ")";
364
+ };
365
+ return /* @__PURE__ */ React6.createElement("div", { style: {
366
+ width,
367
+ background: bg,
368
+ height: "100vh",
369
+ borderRight: "1px solid rgba(255,255,255,0.08)",
370
+ fontFamily: "system-ui,sans-serif",
371
+ display: "flex",
372
+ flexDirection: "column",
373
+ padding: "24px 0"
374
+ } }, /* @__PURE__ */ React6.createElement("div", { style: {
375
+ display: "flex",
376
+ alignItems: "center",
377
+ gap: "10px",
378
+ padding: "0 24px",
379
+ marginBottom: "32px"
380
+ } }, /* @__PURE__ */ React6.createElement("div", { style: {
381
+ width: "32px",
382
+ height: "32px",
383
+ borderRadius: "8px",
384
+ background: "linear-gradient(135deg, " + accent + ", " + alpha(accent, 0.7) + ")",
385
+ display: "flex",
386
+ alignItems: "center",
387
+ justifyContent: "center",
388
+ color: "#fff",
389
+ fontWeight: "700",
390
+ fontSize: "14px"
391
+ } }, logo[0]), /* @__PURE__ */ React6.createElement("div", { style: { color: "#fff", fontWeight: "700", fontSize: "16px" } }, logo)), /* @__PURE__ */ React6.createElement("div", { style: {
392
+ display: "flex",
393
+ flexDirection: "column",
394
+ gap: "4px",
395
+ padding: "0 16px"
396
+ } }, items.map((item) => /* @__PURE__ */ React6.createElement(
397
+ "button",
398
+ {
399
+ key: item,
400
+ onClick: () => onItemClick(item),
401
+ onMouseEnter: () => setHoveredItem(item),
402
+ onMouseLeave: () => setHoveredItem(null),
403
+ style: {
404
+ background: activeItem === item ? alpha(accent, 0.15) : hoveredItem === item ? "rgba(255,255,255,0.03)" : "transparent",
405
+ border: "none",
406
+ padding: "10px 16px",
407
+ borderRadius: "8px",
408
+ display: "flex",
409
+ alignItems: "center",
410
+ gap: "10px",
411
+ cursor: "pointer",
412
+ color: activeItem === item ? accent : "rgba(255,255,255,0.7)",
413
+ fontWeight: activeItem === item ? "600" : "500",
414
+ fontSize: "14px",
415
+ transition: "all 0.2s"
416
+ }
417
+ },
418
+ /* @__PURE__ */ React6.createElement("div", { style: {
419
+ width: "24px",
420
+ height: "24px",
421
+ borderRadius: "6px",
422
+ background: activeItem === item ? alpha(accent, 0.2) : "rgba(255,255,255,0.05)",
423
+ display: "flex",
424
+ alignItems: "center",
425
+ justifyContent: "center"
426
+ } }, /* @__PURE__ */ React6.createElement("div", { style: {
427
+ width: "4px",
428
+ height: "4px",
429
+ borderRadius: "50%",
430
+ background: activeItem === item ? accent : "rgba(255,255,255,0.3)"
431
+ } })),
432
+ item
433
+ ))), /* @__PURE__ */ React6.createElement("div", { style: {
434
+ marginTop: "auto",
435
+ padding: "16px 24px",
436
+ borderTop: "1px solid rgba(255,255,255,0.08)"
437
+ } }, /* @__PURE__ */ React6.createElement("div", { style: {
438
+ display: "flex",
439
+ alignItems: "center",
440
+ gap: "10px",
441
+ padding: "8px 12px",
442
+ borderRadius: "8px",
443
+ background: "rgba(255,255,255,0.03)",
444
+ cursor: "pointer"
445
+ } }, /* @__PURE__ */ React6.createElement("div", { style: {
446
+ width: "32px",
447
+ height: "32px",
448
+ borderRadius: "50%",
449
+ background: "rgba(255,255,255,0.1)"
450
+ } }), /* @__PURE__ */ React6.createElement("div", null, /* @__PURE__ */ React6.createElement("div", { style: { color: "#fff", fontSize: "13px", fontWeight: "600" } }, "John Doe"), /* @__PURE__ */ React6.createElement("div", { style: { color: "rgba(255,255,255,0.4)", fontSize: "11px" } }, "Admin")))));
451
+ };
347
452
  export {
348
453
  Button,
349
454
  Card,
350
455
  EcommerceCard,
351
456
  NavBar,
352
- ProfileCard
457
+ ProfileCard,
458
+ SideBar
353
459
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "virtuo-ui-library",
3
- "version": "1.0.9",
3
+ "version": "1.0.10",
4
4
  "description": "Virtual UI React Component Library",
5
5
  "license": "ISC",
6
6
  "author": "Ritik Saini",