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