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