sage-nexus-ui 1.0.0

package/dist/src/components/ActionBar.d.ts

@@ -0,0 +1,8 @@
+import type { ReactNode, ReactElement } from "react";
+interface ActionBarProps {
+    title?: ReactNode;
+    extraLeft?: ReactNode;
+    extraRight?: ReactNode;
+}
+export declare const ActionBar: ({ title, extraLeft, extraRight, }: ActionBarProps) => ReactElement;
+export {};

package/dist/src/components/NexusHome.d.ts

@@ -0,0 +1 @@
+export declare const NexusHome: React.FC;

package/dist/src/components/TextHighlightAi.d.ts

@@ -0,0 +1,7 @@
+interface TextHighlightAiProps extends React.HTMLAttributes<HTMLElement> {
+    children?: React.ReactNode;
+    component?: React.ElementType;
+    style?: React.CSSProperties;
+}
+export declare const TextHighlightAi: React.FC<TextHighlightAiProps>;
+export {};

package/dist/src/components/ThemeToggle.d.ts

@@ -0,0 +1 @@
+export declare const ThemeToggle: React.FC;

package/dist/src/components/index.d.ts

@@ -0,0 +1,4 @@
+export { ActionBar } from "./ActionBar";
+export { NexusHome } from "./NexusHome";
+export { TextHighlightAi } from "./TextHighlightAi";
+export { ThemeToggle } from "./ThemeToggle";

package/dist/src/index.d.ts

@@ -0,0 +1 @@
+export * from "./components";

package/dist/src/stories/Button.d.ts

@@ -0,0 +1,15 @@
+import './button.css';
+export interface ButtonProps {
+    /** Is this the principal call to action on the page? */
+    primary?: boolean;
+    /** What background color to use */
+    backgroundColor?: string;
+    /** How large should the button be? */
+    size?: 'small' | 'medium' | 'large';
+    /** Button contents */
+    label: string;
+    /** Optional click handler */
+    onClick?: () => void;
+}
+/** Primary UI component for user interaction */
+export declare const Button: ({ primary, size, backgroundColor, label, ...props }: ButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/src/stories/Button.stories.d.ts

@@ -0,0 +1,23 @@
+import type { StoryObj } from "@storybook/react-vite";
+declare const meta: {
+    title: string;
+    component: ({ primary, size, backgroundColor, label, ...props }: import("./Button").ButtonProps) => import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        layout: string;
+    };
+    tags: string[];
+    argTypes: {
+        backgroundColor: {
+            control: "color";
+        };
+    };
+    args: {
+        onClick: import("storybook/test").Mock<(...args: any[]) => any>;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Primary: Story;
+export declare const Secondary: Story;
+export declare const Large: Story;
+export declare const Small: Story;

package/dist/src/stories/EmTestComponent.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { EmTestComponent } from "../components/EmTestComponent";
+declare const meta: Meta<typeof EmTestComponent>;
+export default meta;
+type Story = StoryObj<typeof EmTestComponent>;
+export declare const Default: Story;

package/dist/src/stories/Header.d.ts

@@ -0,0 +1,12 @@
+import './header.css';
+type User = {
+    name: string;
+};
+export interface HeaderProps {
+    user?: User;
+    onLogin?: () => void;
+    onLogout?: () => void;
+    onCreateAccount?: () => void;
+}
+export declare const Header: ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/stories/Header.stories.d.ts

@@ -0,0 +1,18 @@
+import type { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    component: ({ user, onLogin, onLogout, onCreateAccount }: import("./Header").HeaderProps) => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+    args: {
+        onLogin: import("storybook/test").Mock<(...args: any[]) => any>;
+        onLogout: import("storybook/test").Mock<(...args: any[]) => any>;
+        onCreateAccount: import("storybook/test").Mock<(...args: any[]) => any>;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const LoggedIn: Story;
+export declare const LoggedOut: Story;

package/dist/src/stories/Page.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import "./page.css";
+export declare const Page: React.FC;

package/dist/src/stories/Page.stories.d.ts

@@ -0,0 +1,12 @@
+import type { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    component: import("react").FC<{}>;
+    parameters: {
+        layout: string;
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const LoggedOut: Story;
+export declare const LoggedIn: Story;

package/dist/src/theme/MuiAppThemeProvider.d.ts

@@ -0,0 +1,7 @@
+import { type PropsWithChildren } from 'react';
+import { type ThemeMode } from './sageTheme';
+type MuiAppThemeProviderProps = PropsWithChildren<{
+    mode?: ThemeMode;
+}>;
+declare const MuiAppThemeProvider: ({ children, mode }: MuiAppThemeProviderProps) => import("react/jsx-runtime").JSX.Element;
+export default MuiAppThemeProvider;

package/dist/src/theme/ThemeContext.d.ts

@@ -0,0 +1,9 @@
+import { type PropsWithChildren } from 'react';
+import type { ThemeMode } from './sageTheme';
+type ThemeModeContextValue = {
+    mode: ThemeMode;
+    toggleMode: () => void;
+};
+export declare const useThemeMode: () => ThemeModeContextValue;
+export declare const ThemeModeProvider: ({ children }: PropsWithChildren) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/src/theme/sageTheme.d.ts

@@ -0,0 +1,49 @@
+import "@mui/x-data-grid/themeAugmentation";
+import { type Theme } from "@mui/material/styles";
+export type ThemeMode = "light" | "dark";
+export type GradientBorderOptions = {
+    borderRadius?: number;
+    padding?: number;
+};
+export declare const colours: {
+    readonly brilliantGreen: "#00D639";
+    readonly primaryGreenHover: "#00BE32";
+    readonly primaryGreenActive: "#00AA2D";
+    readonly jade: "#00A65C";
+    readonly teal: "#006362";
+    readonly navy: "#00293F";
+    readonly cherry: "#cc0f4b";
+    readonly terra: "#A13829";
+    readonly amber: "#E9875B";
+    readonly gold: "#F5C518";
+    readonly black: "#000000";
+    readonly white: "#FFFFFF";
+    readonly darkGrey: "#55616D";
+    readonly lightGrey: "#ffffffc2";
+};
+export declare const gradients: {
+    readonly brand: "linear-gradient(135deg, #00D639 0%, #00A65C 42%, #006362 100%)";
+    readonly nexus: "linear-gradient(135deg, #00D639 0%, #00D6DE 40%, #2D60FF 100%)";
+    readonly textHighlightAi: "linear-gradient(30deg, #00D639 0%, #00D6DE 40%, #9D60FF 90%)";
+    readonly mesh: `radial-gradient(circle at top right, ${string} 0%, transparent 34%), linear-gradient(135deg, ${string} 0%, ${string} 100%)`;
+};
+export declare const getGradientBorderStyles: (theme: Theme, options?: GradientBorderOptions) => {
+    position: string;
+    borderRadius: string | number;
+    border: string;
+    background: string;
+    backgroundClip: string;
+    "&::before": {
+        content: string;
+        position: string;
+        inset: number;
+        borderRadius: string;
+        padding: string;
+        background: "linear-gradient(135deg, #00D639 0%, #00A65C 42%, #006362 100%)";
+        WebkitMask: string;
+        WebkitMaskComposite: string;
+        maskComposite: string;
+        pointerEvents: string;
+    };
+};
+export declare const createSageTheme: (mode?: ThemeMode) => Theme;

package/dist/src/theme/sxHelpers.d.ts

@@ -0,0 +1,13 @@
+export declare const leftPipe: {
+    borderLeft: (theme: any) => string;
+    pl: number;
+};
+export declare const expandableText: (isExpanded: boolean) => {
+    color: string;
+    lineHeight: number;
+    whiteSpace: string;
+    overflow: string;
+    display: string;
+    WebkitBoxOrient: string;
+    WebkitLineClamp: string | number;
+};

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "sage-nexus-ui",
+  "version": "1.0.0",
+  "description": "Nexus core components",
+  "license": "ISC",
+  "author": "emsmart-sage",
+  "type": "module",
+  "main": "dist/index.mjs",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "rollup -c",
+    "storybook": "set BROWSER=\"google-chrome\" && storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^5.1.1",
+    "@rollup/plugin-commonjs": "^29.0.2",
+    "@rollup/plugin-node-resolve": "^16.0.3",
+    "@rollup/plugin-terser": "^1.0.0",
+    "@rollup/plugin-typescript": "^12.3.0",
+    "@storybook/addon-a11y": "^10.3.5",
+    "@storybook/addon-docs": "^10.3.5",
+    "@storybook/addon-onboarding": "^10.3.5",
+    "@storybook/addon-vitest": "^10.3.5",
+    "@storybook/react-vite": "^10.3.5",
+    "@types/node": "^25.6.0",
+    "@types/react": "^19.2.14",
+    "@types/rollup-plugin-peer-deps-external": "^2.2.6",
+    "@vitest/browser-playwright": "^4.1.4",
+    "@vitest/coverage-v8": "^4.1.4",
+    "playwright": "^1.59.1",
+    "react": "^19.2.5",
+    "react-dom": "^19.2.5",
+    "rollup": "^4.60.1",
+    "rollup-plugin-dts": "^6.4.1",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.2",
+    "storybook": "^10.3.5",
+    "tslib": "^2.8.1",
+    "typescript": "^6.0.2",
+    "vitest": "^4.1.4"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
+    "@mui/icons-material": "^9.0.0",
+    "@mui/material": "^9.0.0",
+    "@mui/x-data-grid": "^9.0.1",
+    "@vitejs/plugin-react": "^6.0.1"
+  }
+}

package/rollup-plugins.d.ts

@@ -0,0 +1,5 @@
+declare module "rollup-plugin-peer-deps-external" {
+  import { Plugin } from "rollup";
+  function peerDepsExternal(): Plugin;
+  export default peerDepsExternal;
+}

package/rollup.config.ts

@@ -0,0 +1,39 @@
+import peerDepsExternal from "rollup-plugin-peer-deps-external";
+import resolve from "@rollup/plugin-node-resolve";
+import commonjs from "@rollup/plugin-commonjs";
+import postcss from "rollup-plugin-postcss";
+import typescript from "@rollup/plugin-typescript";
+import terser from "@rollup/plugin-terser";
+import dts from "rollup-plugin-dts";
+import packageJson from "./package.json" with { type: "json" };
+
+export default [
+  {
+    input: "src/index.ts",
+    output: {
+      file: packageJson.module,
+      format: "esm",
+      sourcemap: true,
+    },
+    plugins: [
+      peerDepsExternal(),
+      resolve(),
+      commonjs(),
+      postcss(),
+      typescript({
+        tsconfig: "./tsconfig.json",
+        outDir: "dist",
+        declaration: true,
+        declarationDir: "dist",
+      }),
+      terser(),
+    ],
+    external: ["react", "react-dom"],
+  },
+  {
+    input: "src/index.ts",
+    output: { file: packageJson.types, format: "esm" },
+    plugins: [dts()],
+    external: [/\.css$/],
+  },
+];

package/src/assets/images/Logo.svg

@@ -0,0 +1,3 @@
+<svg width="68" height="38" viewBox="0 0 68 38" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.2062 6.9913C15.1288 2.92301 11.6876 0 7.46542 0C3.2388 0 0 3.16051 0 7.18922C0 11.6525 3.12093 13.2727 6.87343 14.6186C10.231 15.8043 11.8504 16.8704 11.8504 19.3985C11.8504 21.4524 10.231 23.151 7.78209 23.151C5.45107 23.151 3.39713 21.5316 3.39713 19.0035C3.39713 18.1877 3.61739 17.7237 3.80556 17.3274C3.94585 17.0319 4.06829 16.774 4.06829 16.4359C4.06829 15.5237 3.43672 14.8526 2.40931 14.8526C1.22445 14.8526 0 16.6303 0 19.1583C0 23.2266 3.51852 26.2288 7.78209 26.227C12.1266 26.227 15.2475 23.027 15.2475 19.0378C15.2475 14.4558 11.9691 12.9147 8.37408 11.6111C5.01389 10.3884 3.39713 9.32408 3.39537 6.91301C3.39537 4.70074 5.13704 3.08134 7.42408 3.08134C9.87385 3.08134 11.809 4.78343 11.8486 7.07047C11.8882 8.13746 12.6385 8.76903 13.5076 8.76903C14.4145 8.76903 15.2457 8.13482 15.2062 6.9913ZM16.8827 18.4467C16.8827 22.7921 20.4382 26.2288 24.7044 26.2288C26.6 26.2288 28.0619 25.5963 28.0619 24.3719C28.0619 23.4632 27.272 22.8317 26.5217 22.8317C26.2792 22.8317 26.0671 22.8771 25.8288 22.9282C25.5235 22.9936 25.1752 23.0683 24.6648 23.0683C22.215 23.0683 20.2798 20.9352 20.2798 18.4467C20.2798 15.7612 22.2555 13.6677 24.744 13.6677C27.5482 13.6677 29.326 15.8008 29.326 18.9208V24.5698C29.326 25.5568 30.1159 26.2288 31.0641 26.2288C31.971 26.2288 32.7627 25.5568 32.7627 24.5698V18.8021C32.7627 14.0626 29.4852 10.5863 24.8231 10.5863C20.4778 10.5863 16.8827 13.9439 16.8827 18.4467ZM42.4958 38C38.0713 38 34.3979 34.8395 34.3979 30.7316C34.3979 29.3488 35.1896 28.7173 36.0965 28.7173C37.0034 28.7173 37.7555 29.3101 37.7951 30.4554C37.8346 33.0231 39.8886 34.9187 42.4571 34.9187C45.184 34.9187 46.9599 33.1805 46.9599 30.9295C46.9599 28.3619 44.9852 27.2949 41.6276 26.2288C37.7168 24.9648 34.3988 23.2266 34.3988 18.4071C34.3988 13.9835 37.7959 10.5863 42.2205 10.5863C46.6837 10.5863 50.3571 13.8251 50.3571 18.0913C50.3571 20.6986 49.291 22.7129 47.829 22.7129C46.8421 22.7129 46.17 22.0022 46.17 21.1296C46.17 20.7404 46.3152 20.4455 46.4813 20.1083C46.7029 19.658 46.9617 19.1324 46.9617 18.2066C46.9617 15.4797 44.8295 13.6642 42.2618 13.6642C39.7725 13.6642 37.7977 15.5598 37.7977 18.0482C37.7977 20.8534 39.8121 22.0382 43.1309 23.1439C46.9617 24.408 50.3588 25.9878 50.3588 30.6093C50.3588 34.7577 47.0804 37.9982 42.4985 37.9982L42.4958 38ZM51.9923 18.4072C51.9923 22.7525 55.6261 26.2288 60.0506 26.2288H60.0533C62.2655 26.2288 64.0433 25.636 65.2281 24.8856C66.413 24.1353 66.8871 23.5029 66.8871 22.7921C66.8871 22.0418 66.3312 21.3698 65.3038 21.3698C64.8266 21.3698 64.3854 21.6398 63.847 21.9694C63.0039 22.4854 61.9223 23.1475 60.0902 23.1475C59.4694 23.1482 58.8545 23.0258 58.2813 22.7873C57.708 22.5489 57.1878 22.1991 56.7506 21.7583C56.3135 21.3174 55.9681 20.7943 55.7344 20.219C55.5008 19.6438 55.3835 19.028 55.3895 18.4072C55.3895 15.8008 57.4434 13.6281 59.9715 13.6281C62.6974 13.6281 64.1585 15.4076 64.1585 16.5511C64.1585 16.8669 63.9219 17.0253 63.6052 17.0253H60.2081C59.2968 17.0253 58.6247 17.6551 58.6247 18.4467C58.6247 19.2762 59.3003 19.9087 60.2081 19.9087H64.7514C66.4895 19.9087 67.5556 19 67.5556 17.4994C67.5556 13.6281 64.2377 10.5864 59.8527 10.5864C58.8224 10.5814 57.8013 10.78 56.8479 11.1708C55.8946 11.5615 55.0279 12.1368 54.2975 12.8635C53.5671 13.5902 52.9875 14.454 52.5919 15.4054C52.1963 16.3567 51.9925 17.3768 51.9923 18.4072Z" fill="#00D639"/>
+</svg>

package/src/assets/images/S-sage-logo-nobg.svg

@@ -0,0 +1,3 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M23.8299 4.5C17.6748 4.5 13 9.25863 13 15.366C13 22.0623 17.6748 24.645 22.8612 26.2321C27.7619 27.8164 30.0993 29.5802 30.0993 33.0462C30.0993 36.5682 27.5333 39.0358 24.1728 39.0358C20.8095 39.0358 17.9034 36.5682 17.9034 32.7517C17.9034 30.6374 18.8721 30.1074 18.8721 28.9325C18.8721 27.5809 17.9578 26.5854 16.4776 26.5854C14.7687 26.5854 13 29.2269 13 32.9845C13 39.0358 18.0748 43.5 24.1728 43.5C30.3279 43.5 35 38.7414 35 32.634C35 25.9966 30.3279 23.3522 25.0844 21.7679C20.2381 20.2425 17.9034 18.4198 17.9034 14.9538C17.9034 11.4907 20.4095 9.02308 23.7728 9.02308C27.2503 9.02308 30.0422 11.5496 30.0993 15.0127C30.1565 16.5999 31.2395 17.5393 32.4939 17.5393C33.8027 17.5393 35 16.5999 34.9429 14.895C34.8286 8.84641 29.8707 4.5 23.8299 4.5Z" fill="#00D639"/>
+</svg> 

package/src/assets/images/S-sage-logo.svg

@@ -0,0 +1,4 @@
+<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M42.4043 0H5.59573C2.50529 0 0 2.50529 0 5.59573V42.4043C0 45.4947 2.50529 48 5.59573 48H42.4043C45.4947 48 48 45.4947 48 42.4043V5.59573C48 2.50529 45.4947 0 42.4043 0Z" fill="black"/>
+<path d="M23.8299 4.5C17.6748 4.5 13 9.25863 13 15.366C13 22.0623 17.6748 24.645 22.8612 26.2321C27.7619 27.8164 30.0993 29.5802 30.0993 33.0462C30.0993 36.5682 27.5333 39.0358 24.1728 39.0358C20.8095 39.0358 17.9034 36.5682 17.9034 32.7517C17.9034 30.6374 18.8721 30.1074 18.8721 28.9325C18.8721 27.5809 17.9578 26.5854 16.4776 26.5854C14.7687 26.5854 13 29.2269 13 32.9845C13 39.0358 18.0748 43.5 24.1728 43.5C30.3279 43.5 35 38.7414 35 32.634C35 25.9966 30.3279 23.3522 25.0844 21.7679C20.2381 20.2425 17.9034 18.4198 17.9034 14.9538C17.9034 11.4907 20.4095 9.02308 23.7728 9.02308C27.2503 9.02308 30.0422 11.5496 30.0993 15.0127C30.1565 16.5999 31.2395 17.5393 32.4939 17.5393C33.8027 17.5393 35 16.5999 34.9429 14.895C34.8286 8.84641 29.8707 4.5 23.8299 4.5Z" fill="#00D639"/>
+</svg>

package/src/assets/images/nexus-logo-icon.svg

@@ -0,0 +1,31 @@
+<svg width="20" height="20" viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false">
+  <g id="nexus-icon" transform="translate(60, 60)" fill="#05D505">
+    <circle cx="0" cy="0" r="12"/>
+    <g stroke="#05D505" stroke-width="4.5">
+      <g transform="rotate(0)">
+        <line x1="12" y1="0" x2="36" y2="0" />
+        <circle cx="44" cy="0" r="8"/>
+      </g>
+      <g transform="rotate(60)">
+        <line x1="12" y1="0" x2="36" y2="0" />
+        <circle cx="44" cy="0" r="8"/>
+      </g>
+      <g transform="rotate(120)">
+        <line x1="12" y1="0" x2="36" y2="0" />
+        <circle cx="44" cy="0" r="8"/>
+      </g>
+      <g transform="rotate(180)">
+        <line x1="12" y1="0" x2="36" y2="0" />
+        <circle cx="44" cy="0" r="8"/>
+      </g>
+      <g transform="rotate(240)">
+        <line x1="12" y1="0" x2="36" y2="0" />
+        <circle cx="44" cy="0" r="8"/>
+      </g>
+      <g transform="rotate(300)">
+        <line x1="12" y1="0" x2="36" y2="0" />
+        <circle cx="44" cy="0" r="8"/>
+      </g>
+    </g>
+  </g>
+</svg>

package/src/components/ActionBar.tsx

@@ -0,0 +1,105 @@
+import { AppBar, Box, Toolbar, useMediaQuery, useTheme } from "@mui/material";
+import { NexusHome, TextHighlightAi, ThemeToggle } from ".";
+import SageLogo from "@/assets/images/Logo.svg";
+import type { ReactNode, ReactElement } from "react";
+import { useState, useEffect, useRef } from "react";
+
+interface ActionBarProps {
+  title?: ReactNode;
+  extraLeft?: ReactNode;
+  extraRight?: ReactNode;
+}
+
+export const ActionBar = ({
+  title,
+  extraLeft,
+  extraRight,
+}: ActionBarProps): ReactElement => {
+  const [isExpanded, setIsExpanded] = useState(true);
+  const lastScrollY = useRef(0);
+  const theme = useTheme();
+  const isMd = useMediaQuery(theme.breakpoints.up("md"));
+
+  useEffect(() => {
+    const handleScroll = () => {
+      const currentScrollY = window.scrollY;
+      if (currentScrollY > lastScrollY.current) {
+        setIsExpanded(false);
+      } else {
+        setIsExpanded(true);
+      }
+      lastScrollY.current = currentScrollY;
+    };
+
+    window.addEventListener("scroll", handleScroll, { passive: true });
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, []);
+
+  return (
+    <AppBar position="sticky" component="header">
+      <Toolbar
+        variant="dense"
+        sx={{
+          display: "flex",
+          flexDirection: { xs: "column", md: "row" },
+          flexWrap: "wrap",
+          alignItems: "center",
+          justifyContent: { xs: "center", md: "space-between" },
+          py: { xs: 1, md: 0 },
+        }}
+      >
+        <Box
+          sx={{
+            width: { xs: "100%", md: "auto" },
+            textAlign: "center",
+            display: { xs: "block", md: "none" },
+          }}
+        >
+          <TextHighlightAi component="h2">{title}</TextHighlightAi>
+        </Box>
+
+        <Box
+          sx={{
+            display: "block",
+            width: "100%",
+            maxHeight: { xs: isMd || isExpanded ? "300px" : "0px", md: "none" },
+            overflow: { xs: "hidden", md: "visible" },
+            transition: { xs: "max-height 0.2s ease-in-out", md: "none" },
+          }}
+        >
+          <Box
+            sx={{
+              display: "flex",
+              flexDirection: { xs: "column", md: "row" },
+              alignItems: "center",
+              justifyContent: { xs: "center", md: "space-between" },
+              width: "100%",
+              gap: { xs: 1, md: 0 },
+            }}
+          >
+            <Box sx={{ height: "38px", pt: 0.5 }}>
+              <img src={SageLogo} alt="Logo" />
+            </Box>
+            <Box>{extraLeft}</Box>
+            <Box sx={{ display: { xs: "none", md: "block" } }}>
+              <TextHighlightAi component="h2">{title}</TextHighlightAi>
+            </Box>
+            <Box>{extraRight}</Box>
+            <Box
+              sx={{
+                flex: "0 0 auto",
+                display: "flex",
+                alignItems: "center",
+                gap: 1,
+                ml: { xs: 0, sm: 2 },
+              }}
+            >
+              <NexusHome />
+              <ThemeToggle />
+            </Box>
+          </Box>
+        </Box>
+      </Toolbar>
+    </AppBar>
+  );
+};

package/src/components/NexusHome.tsx

@@ -0,0 +1,36 @@
+import { IconButton, Tooltip } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
+import nexusLogoIcon from "@/assets/images/nexus-logo-icon.svg";
+
+export const NexusHome: React.FC = () => {
+  const theme = useTheme();
+
+  return (
+    <Tooltip title="Go to Nexus Home" placement="bottom">
+      <IconButton
+        component="a"
+        href="https://ai-nexus.sage.com/"
+        size="small"
+        aria-label="Nexus home"
+        sx={{
+          width: 32,
+          height: 32,
+          borderRadius: "50%",
+          p: 0.5,
+          display: "inline-flex",
+          alignItems: "center",
+          justifyContent: "center",
+          "&:hover": {
+            backgroundColor: theme.palette.action.hover,
+          },
+        }}
+      >
+        <img
+          src={nexusLogoIcon}
+          alt="Nexus Logo"
+          style={{ width: 20, height: 20, display: "block" }}
+        />
+      </IconButton>
+    </Tooltip>
+  );
+};

package/src/components/TextHighlightAi.tsx

@@ -0,0 +1,34 @@
+import { gradients } from "@/theme/sageTheme";
+
+interface TextHighlightAiProps extends React.HTMLAttributes<HTMLElement> {
+  children?: React.ReactNode;
+  component?: React.ElementType;
+  style?: React.CSSProperties;
+}
+
+export const TextHighlightAi: React.FC<TextHighlightAiProps> = ({
+  children,
+  component = "h1",
+  style = {},
+  ...props
+}) => {
+  const Tag = component as any;
+  return (
+    <Tag
+      style={{
+        display: "inline-flex",
+        width: "fit-content",
+        maxWidth: "100%",
+        background: gradients.textHighlightAi,
+        backgroundClip: "text",
+        WebkitBackgroundClip: "text",
+        WebkitTextFillColor: "transparent",
+        color: "transparent",
+        ...style,
+      }}
+      {...props}
+    >
+      {children}
+    </Tag>
+  );
+};

package/src/components/ThemeToggle.tsx

@@ -0,0 +1,22 @@
+import { useThemeMode } from '@/theme/ThemeContext';
+import { IconButton, Tooltip, useTheme } from '@mui/material';
+import LightModeIcon from '@mui/icons-material/LightMode';
+import DarkModeIcon from '@mui/icons-material/DarkMode';
+
+export const ThemeToggle: React.FC = () => {
+  const { mode, toggleMode } = useThemeMode();
+  const theme = useTheme();
+
+  return (
+    <Tooltip title={`Switch to ${mode === 'dark' ? 'light' : 'dark'} mode`} placement="bottom">
+      <IconButton
+        onClick={toggleMode}
+        size="small"
+        aria-label={`Switch to ${mode === 'dark' ? 'light' : 'dark'} mode`}
+        sx={{ color: theme.palette.warning?.main ?? theme.palette.primary.main }}
+      >
+        {mode === 'dark' ? <LightModeIcon fontSize="small" /> : <DarkModeIcon fontSize="small" />}
+      </IconButton>
+    </Tooltip>
+  );
+};

package/src/components/index.ts

@@ -0,0 +1,11 @@
+export { ActionBar } from "./ActionBar";
+// export { CheckboxGroup } from './CheckboxGroup.tsx';
+// export { IconActionButton } from './IconActionButton.tsx';
+// export { LocationMultiSelect } from './LocationMultiSelect.tsx';
+export { NexusHome } from "./NexusHome";
+// export { SecondaryButton } from './SecondaryButton.tsx';
+// export { SearchInput } from './SearchInput.tsx';
+// export { SkillChip } from './SkillChip.tsx';
+// export { StatusChip } from './StatusChip.tsx';
+export { TextHighlightAi } from "./TextHighlightAi";
+export { ThemeToggle } from "./ThemeToggle";

package/src/index.ts

@@ -0,0 +1 @@
+export * from "./components";