@rationalbloks/frontblok-components 0.2.4 → 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 -239
  2. package/dist/index.cjs.map +1 -1
  3. package/dist/index.d.ts +6 -0
  4. package/dist/index.js +258 -239
  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,266 +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
- anchorOrigin: {
549
- vertical: "bottom",
550
- horizontal: "right"
551
- },
552
- transformOrigin: {
553
- vertical: "top",
554
- horizontal: "right"
555
- },
556
- PaperProps: {
557
- sx: {
558
- mt: 1.5,
559
- minWidth: 280,
560
- maxWidth: 320,
561
- borderRadius: "16px",
562
- boxShadow: "0 8px 32px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08)",
563
- border: "1px solid rgba(0, 0, 0, 0.06)",
564
- overflow: "hidden",
565
- backdropFilter: "blur(10px)",
566
- "& .MuiList-root": {
567
- py: 1
568
- },
569
- "& .MuiMenuItem-root": {
570
- py: 1.25,
571
- px: 2.5,
572
- mx: 1,
573
- my: 0.25,
574
- borderRadius: "10px",
575
- fontSize: "0.9375rem",
576
- transition: "all 0.15s cubic-bezier(0.4, 0, 0.2, 1)",
577
- "&:hover": {
578
- backgroundColor: "rgba(59, 130, 246, 0.08)",
579
- 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
+ }
580
584
  }
581
585
  }
582
- }
583
- },
584
- slotProps: {
585
- paper: {
586
- elevation: 0
587
- }
588
- },
589
- children: [
590
- /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: {
591
- px: 3,
592
- py: 2.5,
593
- background: "linear-gradient(135deg, rgba(59, 130, 246, 0.05) 0%, rgba(147, 51, 234, 0.05) 100%)",
594
- borderBottom: "1px solid rgba(0, 0, 0, 0.06)"
595
- }, children: [
596
- /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { display: "flex", alignItems: "center", mb: 1.5 }, children: [
597
- /* @__PURE__ */ jsxRuntime.jsx(
598
- material.Avatar,
599
- {
600
- sx: {
601
- width: 44,
602
- height: 44,
603
- bgcolor: "primary.main",
604
- fontSize: "1.1rem",
605
- fontWeight: 700,
606
- mr: 1.5,
607
- boxShadow: "0 2px 8px rgba(59, 130, 246, 0.25)"
608
- },
609
- children: (user == null ? void 0 : user.first_name) ? user.first_name.charAt(0).toUpperCase() : "U"
610
- }
611
- ),
612
- /* @__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: [
613
600
  /* @__PURE__ */ jsxRuntime.jsx(
614
- material.Typography,
601
+ material.Avatar,
615
602
  {
616
- variant: "subtitle1",
617
- fontWeight: "600",
618
603
  sx: {
619
- mb: 0.25,
620
- overflow: "hidden",
621
- textOverflow: "ellipsis",
622
- 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)"
623
611
  },
624
- 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"
625
613
  }
626
614
  ),
627
- /* @__PURE__ */ jsxRuntime.jsx(
628
- material.Typography,
629
- {
630
- variant: "caption",
631
- color: "text.secondary",
632
- sx: {
633
- display: "block",
634
- overflow: "hidden",
635
- textOverflow: "ellipsis",
636
- whiteSpace: "nowrap"
637
- },
638
- 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"
639
657
  }
640
- )
641
- ] })
642
- ] }),
643
- /* @__PURE__ */ jsxRuntime.jsx(
644
- material.Chip,
645
- {
646
- size: "small",
647
- label: userRoleLabel,
648
- color: "primary",
649
- sx: {
650
- height: 24,
651
- fontSize: "0.75rem",
652
- fontWeight: 600,
653
- borderRadius: "6px"
654
658
  }
655
- }
656
- )
657
- ] }),
658
- /* @__PURE__ */ jsxRuntime.jsxs(material.Box, { sx: { py: 0.5 }, children: [
659
- /* @__PURE__ */ jsxRuntime.jsxs(material.MenuItem, { onClick: () => {
660
- navigate(settingsRoute);
661
- handleMenuClose();
662
- }, children: [
663
- /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.Settings, { sx: { mr: 2, fontSize: 20, color: "text.secondary" } }),
664
- /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "body2", fontWeight: "500", children: "Settings" })
659
+ )
665
660
  ] }),
666
- /* @__PURE__ */ jsxRuntime.jsx(material.Divider, { sx: { my: 0.5, mx: 1 } }),
667
- /* @__PURE__ */ jsxRuntime.jsxs(
668
- material.MenuItem,
669
- {
670
- onClick: handleLogout,
671
- sx: {
672
- color: "error.main",
673
- "&:hover": {
674
- backgroundColor: "rgba(239, 68, 68, 0.08)"
675
- }
676
- },
677
- children: [
678
- /* @__PURE__ */ jsxRuntime.jsx(iconsMaterial.ExitToApp, { sx: { mr: 2, fontSize: 20 } }),
679
- /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { variant: "body2", fontWeight: "500", children: "Sign Out" })
680
- ]
681
- }
682
- )
683
- ] })
684
- ]
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, {})
685
704
  }
686
705
  )
687
- ] })
706
+ ]
688
707
  }
689
708
  );
690
709
  };