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