@rationalbloks/frontblok-components 0.2.6 → 0.2.8

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