@rationalbloks/frontblok-components 0.2.5 → 0.2.6

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 (6) hide show
  1. package/dist/index.cjs +258 -240
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.d.ts +6 -0
  4. package/dist/index.js +258 -240
  5. package/dist/index.js.map +1 -1
  6. package/package.json +1 -1
package/dist/index.cjs CHANGED
@@ -373,7 +373,8 @@ function createNavbar(config) {
373
373
  userRoleLabel = "User",
374
374
  authRoute = "/auth",
375
375
  settingsRoute = "/settings",
376
- isActiveOverride
376
+ isActiveOverride,
377
+ subToolbar: SubToolbar
377
378
  } = config;
378
379
  const Navbar = () => {
379
380
  const navigate = reactRouterDom.useNavigate();
@@ -414,7 +415,7 @@ function createNavbar(config) {
414
415
  };
415
416
  const navigationItems = getNavigationItems();
416
417
  const isMenuOpen = Boolean(anchorEl);
417
- return /* @__PURE__ */ jsxRuntime.jsx(
418
+ return /* @__PURE__ */ jsxRuntime.jsxs(
418
419
  material.AppBar,
419
420
  {
420
421
  position: "fixed",
@@ -425,267 +426,284 @@ function createNavbar(config) {
425
426
  top: 0,
426
427
  zIndex: 1100
427
428
  },
428
- children: /* @__PURE__ */ jsxRuntime.jsxs(material.Toolbar, { sx: { px: 3 }, children: [
429
- /* @__PURE__ */ jsxRuntime.jsxs(
430
- material.Box,
431
- {
432
- sx: {
433
- display: "flex",
434
- alignItems: "center",
435
- flexGrow: 1,
436
- cursor: "pointer",
437
- "&:hover": {
438
- opacity: 0.85
429
+ children: [
430
+ /* @__PURE__ */ jsxRuntime.jsxs(material.Toolbar, { sx: { px: 3 }, children: [
431
+ /* @__PURE__ */ jsxRuntime.jsxs(
432
+ material.Box,
433
+ {
434
+ sx: {
435
+ display: "flex",
436
+ alignItems: "center",
437
+ flexGrow: 1,
438
+ cursor: "pointer",
439
+ "&:hover": {
440
+ opacity: 0.85
441
+ },
442
+ transition: "opacity 0.2s ease"
439
443
  },
440
- transition: "opacity 0.2s ease"
444
+ onClick: () => navigate("/"),
445
+ children: [
446
+ /* @__PURE__ */ jsxRuntime.jsx(
447
+ material.Box,
448
+ {
449
+ component: "img",
450
+ src: brand.logo,
451
+ alt: brand.name,
452
+ sx: {
453
+ width: 36,
454
+ height: 36,
455
+ borderRadius: "8px",
456
+ mr: 2,
457
+ boxShadow: "0 2px 8px rgba(96, 165, 250, 0.3)"
458
+ }
459
+ }
460
+ ),
461
+ /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "h6", component: "div", sx: {
462
+ fontWeight: 700,
463
+ fontSize: "1.25rem",
464
+ letterSpacing: "-0.5px",
465
+ color: "white"
466
+ }, children: brand.name })
467
+ ]
468
+ }
469
+ ),
470
+ /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: {
471
+ display: { xs: "none", md: "flex" },
472
+ alignItems: "center",
473
+ gap: 1,
474
+ mr: 3
475
+ }, children: navigationItems.slice(1).map((item) => /* @__PURE__ */ jsxRuntime.jsx(
476
+ material.Button,
477
+ {
478
+ color: "inherit",
479
+ component: reactRouterDom.Link,
480
+ to: item.id,
481
+ startIcon: React.cloneElement(item.icon, { sx: { fontSize: "18px" } }),
482
+ sx: {
483
+ textTransform: "none",
484
+ fontWeight: 500,
485
+ px: 2,
486
+ py: 1,
487
+ borderRadius: "8px",
488
+ backgroundColor: isActive(item.id) ? "rgba(255, 255, 255, 0.15)" : "transparent",
489
+ "&:hover": {
490
+ backgroundColor: "rgba(255, 255, 255, 0.1)",
491
+ transform: "translateY(-1px)"
492
+ },
493
+ transition: "all 0.2s ease",
494
+ textDecoration: "none"
495
+ },
496
+ children: item.label
441
497
  },
442
- onClick: () => navigate("/"),
443
- children: [
444
- /* @__PURE__ */ jsxRuntime.jsx(
445
- material.Box,
498
+ item.id
499
+ )) }),
500
+ /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { display: "flex", alignItems: "center", gap: 2 }, children: !isAuthenticated ? /* @__PURE__ */ jsxRuntime.jsx(
501
+ material.Button,
502
+ {
503
+ variant: "contained",
504
+ onClick: () => navigate(authRoute),
505
+ sx: {
506
+ bgcolor: "white",
507
+ color: "primary.main",
508
+ textTransform: "none",
509
+ fontWeight: 700,
510
+ px: 3,
511
+ "&:hover": {
512
+ bgcolor: "rgba(255, 255, 255, 0.9)",
513
+ transform: "translateY(-1px)"
514
+ },
515
+ transition: "all 0.2s ease"
516
+ },
517
+ children: "Access Portal"
518
+ }
519
+ ) : /* @__PURE__ */ jsxRuntime.jsx(
520
+ material.IconButton,
521
+ {
522
+ size: "large",
523
+ onClick: handleMenuOpen,
524
+ color: "inherit",
525
+ sx: {
526
+ "&:hover": { backgroundColor: "rgba(255, 255, 255, 0.1)" }
527
+ },
528
+ children: /* @__PURE__ */ jsxRuntime.jsx(
529
+ material.Avatar,
446
530
  {
447
- component: "img",
448
- src: brand.logo,
449
- alt: brand.name,
450
531
  sx: {
451
532
  width: 36,
452
533
  height: 36,
453
- borderRadius: "8px",
454
- mr: 2,
455
- boxShadow: "0 2px 8px rgba(96, 165, 250, 0.3)"
456
- }
534
+ bgcolor: "rgba(255, 255, 255, 0.2)",
535
+ fontSize: "1rem",
536
+ fontWeight: 600,
537
+ border: "2px solid rgba(255, 255, 255, 0.2)"
538
+ },
539
+ children: (user == null ? void 0 : user.first_name) ? user.first_name.charAt(0).toUpperCase() : "U"
457
540
  }
458
- ),
459
- /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "h6", component: "div", sx: {
460
- fontWeight: 700,
461
- fontSize: "1.25rem",
462
- letterSpacing: "-0.5px",
463
- color: "white"
464
- }, children: brand.name })
465
- ]
466
- }
467
- ),
468
- /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: {
469
- display: { xs: "none", md: "flex" },
470
- alignItems: "center",
471
- gap: 1,
472
- mr: 3
473
- }, children: navigationItems.slice(1).map((item) => /* @__PURE__ */ jsxRuntime.jsx(
474
- material.Button,
475
- {
476
- color: "inherit",
477
- component: reactRouterDom.Link,
478
- to: item.id,
479
- startIcon: React.cloneElement(item.icon, { sx: { fontSize: "18px" } }),
480
- sx: {
481
- textTransform: "none",
482
- fontWeight: 500,
483
- px: 2,
484
- py: 1,
485
- borderRadius: "8px",
486
- backgroundColor: isActive(item.id) ? "rgba(255, 255, 255, 0.15)" : "transparent",
487
- "&:hover": {
488
- backgroundColor: "rgba(255, 255, 255, 0.1)",
489
- transform: "translateY(-1px)"
541
+ )
542
+ }
543
+ ) }),
544
+ isAuthenticated && /* @__PURE__ */ jsxRuntime.jsxs(
545
+ material.Menu,
546
+ {
547
+ anchorEl,
548
+ open: isMenuOpen,
549
+ onClose: handleMenuClose,
550
+ disableScrollLock: true,
551
+ anchorOrigin: {
552
+ vertical: "bottom",
553
+ horizontal: "right"
490
554
  },
491
- transition: "all 0.2s ease",
492
- textDecoration: "none"
493
- },
494
- children: item.label
495
- },
496
- item.id
497
- )) }),
498
- /* @__PURE__ */ jsxRuntime.jsx(material.Box, { sx: { display: "flex", alignItems: "center", gap: 2 }, children: !isAuthenticated ? /* @__PURE__ */ jsxRuntime.jsx(
499
- material.Button,
500
- {
501
- variant: "contained",
502
- onClick: () => navigate(authRoute),
503
- sx: {
504
- bgcolor: "white",
505
- color: "primary.main",
506
- textTransform: "none",
507
- fontWeight: 700,
508
- px: 3,
509
- "&:hover": {
510
- bgcolor: "rgba(255, 255, 255, 0.9)",
511
- transform: "translateY(-1px)"
555
+ transformOrigin: {
556
+ vertical: "top",
557
+ horizontal: "right"
512
558
  },
513
- transition: "all 0.2s ease"
514
- },
515
- children: "Access Portal"
516
- }
517
- ) : /* @__PURE__ */ jsxRuntime.jsx(
518
- material.IconButton,
519
- {
520
- size: "large",
521
- onClick: handleMenuOpen,
522
- color: "inherit",
523
- sx: {
524
- "&:hover": { backgroundColor: "rgba(255, 255, 255, 0.1)" }
525
- },
526
- children: /* @__PURE__ */ jsxRuntime.jsx(
527
- material.Avatar,
528
- {
559
+ PaperProps: {
529
560
  sx: {
530
- width: 36,
531
- height: 36,
532
- bgcolor: "rgba(255, 255, 255, 0.2)",
533
- fontSize: "1rem",
534
- fontWeight: 600,
535
- border: "2px solid rgba(255, 255, 255, 0.2)"
536
- },
537
- children: (user == null ? void 0 : user.first_name) ? user.first_name.charAt(0).toUpperCase() : "U"
538
- }
539
- )
540
- }
541
- ) }),
542
- isAuthenticated && /* @__PURE__ */ jsxRuntime.jsxs(
543
- material.Menu,
544
- {
545
- anchorEl,
546
- open: isMenuOpen,
547
- onClose: handleMenuClose,
548
- disableScrollLock: true,
549
- anchorOrigin: {
550
- vertical: "bottom",
551
- horizontal: "right"
552
- },
553
- transformOrigin: {
554
- vertical: "top",
555
- horizontal: "right"
556
- },
557
- PaperProps: {
558
- sx: {
559
- mt: 1.5,
560
- minWidth: 280,
561
- maxWidth: 320,
562
- borderRadius: "16px",
563
- boxShadow: "0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08)",
564
- border: "1px solid rgba(0, 0, 0, 0.06)",
565
- overflow: "hidden",
566
- backdropFilter: "blur(10px)",
567
- "& .MuiList-root": {
568
- py: 1
569
- },
570
- "& .MuiMenuItem-root": {
571
- py: 1.25,
572
- px: 2.5,
573
- mx: 1,
574
- my: 0.25,
575
- borderRadius: "10px",
576
- fontSize: "0.9375rem",
577
- transition: "all 0.15s cubic-bezier(0.4, 0, 0.2, 1)",
578
- "&:hover": {
579
- backgroundColor: "rgba(59, 130, 246, 0.08)",
580
- transform: "translateX(2px)"
561
+ mt: 1.5,
562
+ minWidth: 280,
563
+ maxWidth: 320,
564
+ borderRadius: "16px",
565
+ boxShadow: "0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08)",
566
+ border: "1px solid rgba(0, 0, 0, 0.06)",
567
+ overflow: "hidden",
568
+ backdropFilter: "blur(10px)",
569
+ "& .MuiList-root": {
570
+ py: 1
571
+ },
572
+ "& .MuiMenuItem-root": {
573
+ py: 1.25,
574
+ px: 2.5,
575
+ mx: 1,
576
+ my: 0.25,
577
+ borderRadius: "10px",
578
+ fontSize: "0.9375rem",
579
+ transition: "all 0.15s cubic-bezier(0.4, 0, 0.2, 1)",
580
+ "&:hover": {
581
+ backgroundColor: "rgba(59, 130, 246, 0.08)",
582
+ transform: "translateX(2px)"
583
+ }
581
584
  }
582
585
  }
583
- }
584
- },
585
- slotProps: {
586
- paper: {
587
- elevation: 0
588
- }
589
- },
590
- children: [
591
- /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: {
592
- px: 3,
593
- py: 2.5,
594
- background: "linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(147, 51, 234, 0.05) 100%)",
595
- borderBottom: "1px solid rgba(0, 0, 0, 0.06)"
596
- }, children: [
597
- /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { display: "flex", alignItems: "center", mb: 1.5 }, children: [
598
- /* @__PURE__ */ jsxRuntime.jsx(
599
- material.Avatar,
600
- {
601
- sx: {
602
- width: 44,
603
- height: 44,
604
- bgcolor: "primary.main",
605
- fontSize: "1.1rem",
606
- fontWeight: 700,
607
- mr: 1.5,
608
- boxShadow: "0 2px 8px rgba(59, 130, 246, 0.25)"
609
- },
610
- children: (user == null ? void 0 : user.first_name) ? user.first_name.charAt(0).toUpperCase() : "U"
611
- }
612
- ),
613
- /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { flex: 1, minWidth: 0 }, children: [
586
+ },
587
+ slotProps: {
588
+ paper: {
589
+ elevation: 0
590
+ }
591
+ },
592
+ children: [
593
+ /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: {
594
+ px: 3,
595
+ py: 2.5,
596
+ background: "linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(147, 51, 234, 0.05) 100%)",
597
+ borderBottom: "1px solid rgba(0, 0, 0, 0.06)"
598
+ }, children: [
599
+ /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { display: "flex", alignItems: "center", mb: 1.5 }, children: [
614
600
  /* @__PURE__ */ jsxRuntime.jsx(
615
- material.Typography,
601
+ material.Avatar,
616
602
  {
617
- variant: "subtitle1",
618
- fontWeight: "600",
619
603
  sx: {
620
- mb: 0.25,
621
- overflow: "hidden",
622
- textOverflow: "ellipsis",
623
- whiteSpace: "nowrap"
604
+ width: 44,
605
+ height: 44,
606
+ bgcolor: "primary.main",
607
+ fontSize: "1.1rem",
608
+ fontWeight: 700,
609
+ mr: 1.5,
610
+ boxShadow: "0 2px 8px rgba(59, 130, 246, 0.25)"
624
611
  },
625
- children: user ? `${user.first_name} ${user.last_name}` : "User"
612
+ children: (user == null ? void 0 : user.first_name) ? user.first_name.charAt(0).toUpperCase() : "U"
626
613
  }
627
614
  ),
628
- /* @__PURE__ */ jsxRuntime.jsx(
629
- material.Typography,
630
- {
631
- variant: "caption",
632
- color: "text.secondary",
633
- sx: {
634
- display: "block",
635
- overflow: "hidden",
636
- textOverflow: "ellipsis",
637
- whiteSpace: "nowrap"
638
- },
639
- children: (user == null ? void 0 : user.email) || "user@example.com"
615
+ /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { flex: 1, minWidth: 0 }, children: [
616
+ /* @__PURE__ */ jsxRuntime.jsx(
617
+ material.Typography,
618
+ {
619
+ variant: "subtitle1",
620
+ fontWeight: "600",
621
+ sx: {
622
+ mb: 0.25,
623
+ overflow: "hidden",
624
+ textOverflow: "ellipsis",
625
+ whiteSpace: "nowrap"
626
+ },
627
+ children: user ? `${user.first_name} ${user.last_name}` : "User"
628
+ }
629
+ ),
630
+ /* @__PURE__ */ jsxRuntime.jsx(
631
+ material.Typography,
632
+ {
633
+ variant: "caption",
634
+ color: "text.secondary",
635
+ sx: {
636
+ display: "block",
637
+ overflow: "hidden",
638
+ textOverflow: "ellipsis",
639
+ whiteSpace: "nowrap"
640
+ },
641
+ children: (user == null ? void 0 : user.email) || "user@example.com"
642
+ }
643
+ )
644
+ ] })
645
+ ] }),
646
+ /* @__PURE__ */ jsxRuntime.jsx(
647
+ material.Chip,
648
+ {
649
+ size: "small",
650
+ label: userRoleLabel,
651
+ color: "primary",
652
+ sx: {
653
+ height: 24,
654
+ fontSize: "0.75rem",
655
+ fontWeight: 600,
656
+ borderRadius: "6px"
640
657
  }
641
- )
642
- ] })
643
- ] }),
644
- /* @__PURE__ */ jsxRuntime.jsx(
645
- material.Chip,
646
- {
647
- size: "small",
648
- label: userRoleLabel,
649
- color: "primary",
650
- sx: {
651
- height: 24,
652
- fontSize: "0.75rem",
653
- fontWeight: 600,
654
- borderRadius: "6px"
655
658
  }
656
- }
657
- )
658
- ] }),
659
- /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { py: 0.5 }, children: [
660
- /* @__PURE__ */ jsxRuntime.jsxs(material.MenuItem, { onClick: () => {
661
- navigate(settingsRoute);
662
- handleMenuClose();
663
- }, children: [
664
- /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.Settings, { sx: { mr: 2, fontSize: 20, color: "text.secondary" } }),
665
- /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "body2", fontWeight: "500", children: "Settings" })
659
+ )
666
660
  ] }),
667
- /* @__PURE__ */ jsxRuntime.jsx(material.Divider, { sx: { my: 0.5, mx: 1 } }),
668
- /* @__PURE__ */ jsxRuntime.jsxs(
669
- material.MenuItem,
670
- {
671
- onClick: handleLogout,
672
- sx: {
673
- color: "error.main",
674
- "&:hover": {
675
- backgroundColor: "rgba(239, 68, 68, 0.08)"
676
- }
677
- },
678
- children: [
679
- /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.ExitToApp, { sx: { mr: 2, fontSize: 20 } }),
680
- /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "body2", fontWeight: "500", children: "Sign Out" })
681
- ]
682
- }
683
- )
684
- ] })
685
- ]
661
+ /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { py: 0.5 }, children: [
662
+ /* @__PURE__ */ jsxRuntime.jsxs(material.MenuItem, { onClick: () => {
663
+ navigate(settingsRoute);
664
+ handleMenuClose();
665
+ }, children: [
666
+ /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.Settings, { sx: { mr: 2, fontSize: 20, color: "text.secondary" } }),
667
+ /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "body2", fontWeight: "500", children: "Settings" })
668
+ ] }),
669
+ /* @__PURE__ */ jsxRuntime.jsx(material.Divider, { sx: { my: 0.5, mx: 1 } }),
670
+ /* @__PURE__ */ jsxRuntime.jsxs(
671
+ material.MenuItem,
672
+ {
673
+ onClick: handleLogout,
674
+ sx: {
675
+ color: "error.main",
676
+ "&:hover": {
677
+ backgroundColor: "rgba(239, 68, 68, 0.08)"
678
+ }
679
+ },
680
+ children: [
681
+ /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.ExitToApp, { sx: { mr: 2, fontSize: 20 } }),
682
+ /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "body2", fontWeight: "500", children: "Sign Out" })
683
+ ]
684
+ }
685
+ )
686
+ ] })
687
+ ]
688
+ }
689
+ )
690
+ ] }),
691
+ SubToolbar && /* @__PURE__ */ jsxRuntime.jsx(
692
+ material.Box,
693
+ {
694
+ sx: {
695
+ display: "flex",
696
+ alignItems: "center",
697
+ px: 3,
698
+ py: 0.5,
699
+ minHeight: 40,
700
+ borderTop: "1px solid rgba(255, 255, 255, 0.08)",
701
+ background: "rgba(0, 0, 0, 0.12)"
702
+ },
703
+ children: /* @__PURE__ */ jsxRuntime.jsx(SubToolbar, {})
686
704
  }
687
705
  )
688
- ] })
706
+ ]
689
707
  }
690
708
  );
691
709
  };