@campxdev/react-blueprint 2.3.1 → 2.3.2

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

@@ -941,6 +941,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 +1058,7 @@ type AppHeaderProps = {
     actions?: ReactNode[];
     profileActions?: ReactNode[];
     appsMenu?: ReactNode;
+    centerContent?: ReactNode;
     clientLogoUrl?: string;
     clientName?: string;
     userFullName: string;
@@ -1071,7 +1074,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.2",
   "description": "React UI component library for CampX applications",
   "author": "CampX",
   "license": "MIT",

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;