@campxdev/react-blueprint 2.3.1 → 2.3.3

package/dist/esm/types/src/components/Assets/Icons/IconComponents/ActivitiesIcon.d.ts

@@ -0,0 +1,5 @@
+export declare const ActivitiesIcon: ({ sx, color, size, }: {
+    sx?: any;
+    color?: string;
+    size?: number;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/src/components/Assets/Icons/Icons.d.ts

@@ -11,6 +11,7 @@ export type IconsType = {
     AcademicFeesIcon: IconComponent;
     ChallansIcon: IconComponent;
     AcademicsIcon: IconComponent;
+    ActivitiesIcon: IconComponent;
     AccordionArrow: IconComponent;
     ActiveDevicesIcon: IconComponent;
     ActivitylogsIcon: IconComponent;

package/dist/esm/types/src/components/Layout/AppHeader/AppHeader.d.ts

@@ -4,6 +4,7 @@ export type AppHeaderProps = {
     actions?: ReactNode[];
     profileActions?: ReactNode[];
     appsMenu?: ReactNode;
+    centerContent?: ReactNode;
     clientLogoUrl?: string;
     clientName?: string;
     userFullName: string;
@@ -19,4 +20,4 @@ export type AppHeaderProps = {
     onChangeInstitutionClick?: () => void;
     onAvatarClick?: () => void;
 };
-export declare const AppHeader: ({ actions, profileActions, profileSx, clientLogoUrl, onLogoutClick, designation, clientName, userFullName, collapsed, institutionsData, showActiveDevices, headerSx, onAccountClick, onActiveDevicesClick, onChangeInstitutionClick, onAvatarClick, }: AppHeaderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const AppHeader: ({ actions, profileActions, profileSx, clientLogoUrl, onLogoutClick, designation, clientName, userFullName, collapsed, institutionsData, showActiveDevices, headerSx, centerContent, onAccountClick, onActiveDevicesClick, onChangeInstitutionClick, onAvatarClick, }: AppHeaderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/esm/types/src/components/Layout/AppLayout/components/AppBar.d.ts

@@ -3,6 +3,8 @@ import { SideMenuItemProps } from './Sidebar/interfaces';
 interface AppBarProps {
     /** Right section component (actions, profile, etc.) */
     rightSection?: React.ReactNode;
+    /** Center section component (workspace switcher, etc.) */
+    centerSection?: React.ReactNode;
     /** Menu items for mobile drawer */
     menu?: SideMenuItemProps[];
     /** Custom className for the AppBar */

package/dist/esm/types/src/components/Layout/AppLayout/types.d.ts

@@ -17,6 +17,8 @@ export interface AppLayoutProps {
     menu: SideMenuItemProps[];
     /** AppBar customization - Primary approach */
     rightSection?: ReactNode;
+    /** AppBar center section customization */
+    centerSection?: ReactNode;
     /** Layout customization */
     mainContainerSx?: any;
     /** Help documentation configuration for route-based contextual help */

package/dist/index.d.ts

@@ -78,6 +78,7 @@ type IconsType = {
     AcademicFeesIcon: IconComponent;
     ChallansIcon: IconComponent;
     AcademicsIcon: IconComponent;
+    ActivitiesIcon: IconComponent;
     AccordionArrow: IconComponent;
     ActiveDevicesIcon: IconComponent;
     ActivitylogsIcon: IconComponent;
@@ -941,6 +942,8 @@ interface AppLayoutProps {
     menu: SideMenuItemProps$1[];
     /** AppBar customization - Primary approach */
     rightSection?: ReactNode;
+    /** AppBar center section customization */
+    centerSection?: ReactNode;
     /** Layout customization */
     mainContainerSx?: any;
     /** Help documentation configuration for route-based contextual help */
@@ -1056,6 +1059,7 @@ type AppHeaderProps = {
     actions?: ReactNode[];
     profileActions?: ReactNode[];
     appsMenu?: ReactNode;
+    centerContent?: ReactNode;
     clientLogoUrl?: string;
     clientName?: string;
     userFullName: string;
@@ -1071,7 +1075,7 @@ type AppHeaderProps = {
     onChangeInstitutionClick?: () => void;
     onAvatarClick?: () => void;
 };
-declare const AppHeader: ({ actions, profileActions, profileSx, clientLogoUrl, onLogoutClick, designation, clientName, userFullName, collapsed, institutionsData, showActiveDevices, headerSx, onAccountClick, onActiveDevicesClick, onChangeInstitutionClick, onAvatarClick, }: AppHeaderProps) => react_jsx_runtime.JSX.Element;
+declare const AppHeader: ({ actions, profileActions, profileSx, clientLogoUrl, onLogoutClick, designation, clientName, userFullName, collapsed, institutionsData, showActiveDevices, headerSx, centerContent, onAccountClick, onActiveDevicesClick, onChangeInstitutionClick, onAvatarClick, }: AppHeaderProps) => react_jsx_runtime.JSX.Element;
 
 declare const Sidebar: ({ menu, collapsed, setCollapsed, }: {
     menu: SideMenuItemProps[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campxdev/react-blueprint",
-  "version": "2.3.1",
+  "version": "2.3.3",
   "description": "React UI component library for CampX applications",
   "author": "CampX",
   "license": "MIT",

package/src/components/Assets/Icons/IconComponents/ActivitiesIcon.tsx

@@ -0,0 +1,47 @@
+import { useTheme } from '@mui/material';
+
+export const ActivitiesIcon = ({
+  sx = {},
+  color,
+  size = 20,
+}: {
+  sx?: any;
+  color?: string;
+  size?: number;
+}) => {
+  const theme = useTheme();
+  color = color ?? theme.palette.text.primary;
+
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      style={{
+        fill: color,
+        ...sx,
+      }}
+    >
+      <path
+        d="M9.9999 10.2058C9.62801 10.2045 9.26198 10.113 8.93323 9.93915L3.50857 7.01649C3.26556 6.87846 3.06348 6.67849 2.9229 6.43696C2.78231 6.19543 2.70825 5.92095 2.70825 5.64149C2.70825 5.36202 2.78231 5.08754 2.9229 4.84601C3.06348 4.60448 3.26556 4.40451 3.50857 4.26649L8.93323 1.33915C9.25964 1.16271 9.62485 1.07031 9.9959 1.07031C10.3669 1.07031 10.7322 1.16271 11.0586 1.33915L16.4832 4.26449C16.7262 4.40251 16.9283 4.60248 17.0689 4.84401C17.2095 5.08554 17.2835 5.36002 17.2835 5.63949C17.2835 5.91895 17.2095 6.19343 17.0689 6.43496C16.9283 6.6765 16.7262 6.87646 16.4832 7.01449L11.0586 9.93915C10.7345 10.1177 10.3699 10.2096 9.9999 10.2058ZM9.9999 2.31382C9.83348 2.31465 9.66997 2.35753 9.52457 2.43849L4.10857 5.35782C4.06027 5.38706 4.02081 5.42885 3.99439 5.47875C3.96798 5.52864 3.95559 5.58477 3.95857 5.64115C3.95496 5.69654 3.96714 5.75181 3.99369 5.80054C4.02024 5.84928 4.06008 5.88948 4.10857 5.91649L9.53323 8.84115C9.67797 8.91917 9.83981 8.96001 10.0042 8.96001C10.1687 8.96001 10.3305 8.91917 10.4752 8.84115L15.8999 5.91649C15.9459 5.88676 15.9837 5.846 16.0099 5.7979C16.0361 5.74981 16.0499 5.69592 16.0499 5.64115C16.0535 5.58577 16.0413 5.5305 16.0148 5.48176C15.9882 5.43303 15.9484 5.39282 15.8999 5.36582L10.4752 2.44115C10.3298 2.3602 10.1663 2.31732 9.9999 2.31649V2.31382Z"
+        fill={color}
+        stroke={color}
+        strokeWidth="0.4"
+      />
+      <path
+        d="M8.15 18.9331C7.90982 18.9313 7.67327 18.8743 7.45867 18.7664L2.40867 16.2511C1.9971 16.0451 1.65116 15.7284 1.40973 15.3366C1.1683 14.9448 1.04095 14.4933 1.042 14.0331V9.26645C1.04194 9.00247 1.10941 8.74287 1.238 8.51233C1.36659 8.2818 1.55202 8.08799 1.77665 7.94935C2.00129 7.8107 2.25766 7.73184 2.52138 7.72024C2.7851 7.70865 3.0474 7.76472 3.28333 7.88311L8.33333 10.3998C8.74523 10.605 9.09151 10.9213 9.33302 11.3131C9.57453 11.7048 9.70165 12.1563 9.7 12.6164V17.3844C9.70102 17.6484 9.63409 17.9082 9.50566 18.1388C9.37723 18.3694 9.19161 18.563 8.96667 18.7011C8.722 18.8544 8.43873 18.9349 8.15 18.9331ZM2.592 8.96645C2.53687 8.96801 2.48283 8.98215 2.434 9.00778C2.39013 9.03488 2.35405 9.0729 2.32928 9.11813C2.3045 9.16335 2.29189 9.21422 2.29267 9.26578V14.0324C2.29159 14.2604 2.35417 14.4842 2.47337 14.6785C2.59256 14.8729 2.76364 15.0301 2.96733 15.1324L8.00867 17.6578C8.05417 17.6805 8.10459 17.6916 8.15542 17.6901C8.20626 17.6886 8.25593 17.6745 8.3 17.6491C8.34399 17.6221 8.3802 17.5841 8.4051 17.5389C8.42999 17.4937 8.44271 17.4427 8.442 17.3911V12.6244C8.44301 12.3964 8.38033 12.1726 8.26101 11.9783C8.1417 11.7839 7.97049 11.6267 7.76667 11.5244L2.72533 8.99978C2.68426 8.978 2.63849 8.96656 2.592 8.96645Z"
+        fill={color}
+        stroke={color}
+        strokeWidth="0.4"
+      />
+      <path
+        d="M11.8501 18.9333C11.5612 18.9347 11.2779 18.8538 11.0334 18.7C10.8084 18.5619 10.6228 18.3682 10.4944 18.1376C10.366 17.907 10.299 17.6472 10.3001 17.3833V12.6166C10.2993 12.1566 10.4267 11.7055 10.6681 11.3139C10.9096 10.9224 11.2554 10.6059 11.6667 10.4L16.7081 7.8753C16.944 7.75691 17.2063 7.70084 17.47 7.71243C17.7337 7.72402 17.9901 7.80289 18.2147 7.94154C18.4394 8.08018 18.6248 8.27398 18.7534 8.50452C18.882 8.73506 18.9495 8.99466 18.9494 9.25863V14.0253C18.9502 14.4853 18.8227 14.9364 18.5813 15.328C18.3399 15.7196 17.9941 16.0361 17.5827 16.242L12.5414 18.7666C12.3282 18.8783 12.0907 18.9356 11.8501 18.9333ZM17.4081 8.96663C17.3616 8.96674 17.3158 8.97818 17.2747 8.99997L12.2334 11.5253C12.0289 11.6267 11.8571 11.7837 11.7376 11.9782C11.6182 12.1728 11.556 12.397 11.5581 12.6253V17.392C11.5572 17.4436 11.5697 17.4946 11.5945 17.54C11.6193 17.5853 11.6554 17.6235 11.6994 17.6506C11.7429 17.6781 11.7929 17.6933 11.8443 17.6947C11.8957 17.6961 11.9465 17.6837 11.9914 17.6586L17.0334 15.1333C17.2372 15.031 17.4084 14.8738 17.5277 14.6795C17.6471 14.4851 17.7097 14.2613 17.7087 14.0333V9.26663C17.7094 9.21501 17.6967 9.1641 17.6718 9.11887C17.6469 9.07364 17.6107 9.03566 17.5667 9.00863C17.5178 8.98267 17.4635 8.9683 17.4081 8.96663Z"
+        fill={color}
+        stroke={color}
+        strokeWidth="0.4"
+      />
+    </svg>
+  );
+};

package/src/components/Assets/Icons/Icons.tsx

@@ -1,5 +1,6 @@
 import { AcademicFeesIcon } from './IconComponents/AcademicFeesIcon';
 import { AcademicsIcon } from './IconComponents/AcademicIcon';
+import { ActivitiesIcon } from './IconComponents/ActivitiesIcon';
 import { AccordionArrow } from './IconComponents/AccordionArrow';
 import { ActiveDevicesIcon } from './IconComponents/ActiveDevicesIcon';
 import { ActivitylogsIcon } from './IconComponents/ActivityLogsIcon';
@@ -188,6 +189,7 @@ export type IconsType = {
   AcademicFeesIcon: IconComponent;
   ChallansIcon: IconComponent;
   AcademicsIcon: IconComponent;
+  ActivitiesIcon: IconComponent;
   AccordionArrow: IconComponent;
   ActiveDevicesIcon: IconComponent;
   ActivitylogsIcon: IconComponent;
@@ -363,6 +365,7 @@ export type IconsType = {
 export const Icons: IconsType = {
   AcademicFeesIcon,
   AcademicsIcon,
+  ActivitiesIcon,
   ChallansIcon,
   AccordionArrow,
   ActiveDevicesIcon,

package/src/components/Layout/AppHeader/AppHeader.tsx

@@ -8,6 +8,7 @@ export type AppHeaderProps = {
   actions?: ReactNode[];
   profileActions?: ReactNode[];
   appsMenu?: ReactNode;
+  centerContent?: ReactNode;
   clientLogoUrl?: string;
   clientName?: string;
   userFullName: string;
@@ -38,6 +39,7 @@ export const AppHeader = ({
   institutionsData,
   showActiveDevices = true,
   headerSx,
+  centerContent,
   // Destructuring the new onClick props
   onAccountClick,
   onActiveDevicesClick,
@@ -57,6 +59,13 @@ export const AppHeader = ({
         {clientName}
       </Typography>
 
+      {/* Center Content Section */}
+      {centerContent && (
+        <Stack alignItems={'center'} justifyContent={'center'} flex={1}>
+          {centerContent}
+        </Stack>
+      )}
+
       <Stack alignItems={'center'} gap={'12px'} flexDirection={'row'}>
         {actions.map((action) => action)}
 

package/src/components/Layout/AppLayout/AppLayout.tsx

@@ -8,6 +8,7 @@ export const AppLayout: React.FC<AppLayoutProps> = ({
   children,
   menu,
   rightSection,
+  centerSection,
   mainContainerSx = {},
   helpDocsConfig,
 }) => {
@@ -30,7 +31,11 @@ export const AppLayout: React.FC<AppLayoutProps> = ({
   return (
     <AppLayoutContainer>
       {/* AppBar - Full width at the top */}
-      <AppBar rightSection={rightSection} menu={menu} />
+      <AppBar
+        rightSection={rightSection}
+        centerSection={centerSection}
+        menu={menu}
+      />
 
       {/* Main Content - Single column, centered with max-width */}
       <MainContent

package/src/components/Layout/AppLayout/components/AppBar.tsx

@@ -17,6 +17,7 @@ const AppBarContainer = styled('header')(({ theme }: { theme?: any }) => ({
   flexDirection: 'row',
   alignItems: 'center',
   justifyContent: 'space-between',
+  position: 'relative', // Add relative positioning for absolute center positioning
   width: '100%',
   height: '64px',
   minHeight: '64px',
@@ -39,6 +40,8 @@ const AppBarContainer = styled('header')(({ theme }: { theme?: any }) => ({
 interface AppBarProps {
   /** Right section component (actions, profile, etc.) */
   rightSection?: React.ReactNode;
+  /** Center section component (workspace switcher, etc.) */
+  centerSection?: React.ReactNode;
   /** Menu items for mobile drawer */
   menu?: SideMenuItemProps[];
   /** Custom className for the AppBar */
@@ -49,6 +52,7 @@ interface AppBarProps {
 
 export const AppBar: React.FC<AppBarProps> = ({
   rightSection,
+  centerSection,
   menu = [],
   className = 'appHeaderV2',
   sx = {},
@@ -79,9 +83,31 @@ export const AppBar: React.FC<AppBarProps> = ({
         {isMobile ? <CampxIconV2 /> : <CampxFullLogoIconV2 size={28} />}
       </Stack>
 
+      {/* Center section - Custom content from props */}
+      {centerSection && (
+        <Stack
+          direction="row"
+          alignItems="center"
+          gap="12px"
+          sx={{
+            position: 'absolute',
+            left: '50%',
+            transform: 'translateX(-50%)',
+            zIndex: 1,
+          }}
+        >
+          {centerSection}
+        </Stack>
+      )}
+
       {/* Right section - Custom content from props */}
       {rightSection && (
-        <Stack direction="row" alignItems="center" gap="12px">
+        <Stack
+          direction="row"
+          alignItems="center"
+          gap="12px"
+          sx={{ zIndex: 2 }}
+        >
           {rightSection}
         </Stack>
       )}

package/src/components/Layout/AppLayout/types.ts

@@ -23,6 +23,9 @@ export interface AppLayoutProps {
   /** AppBar customization - Primary approach */
   rightSection?: ReactNode;
 
+  /** AppBar center section customization */
+  centerSection?: ReactNode;
+
   /** Layout customization */
   mainContainerSx?: any;