@tonyarbor/components 0.7.0 → 0.7.1

package/dist/chunk-YUXQQX7M.mjs

@@ -0,0 +1,182 @@
+import {
+  AvatarLogoLockup
+} from "./chunk-HG2ORLLW.mjs";
+import {
+  TopNavItem
+} from "./chunk-AVYGOALO.mjs";
+import {
+  SearchGlobal
+} from "./chunk-UPBHDBAK.mjs";
+import {
+  Button
+} from "./chunk-NOUFR6W2.mjs";
+
+// src/TopNavBar/TopNavBar.tsx
+import * as React from "react";
+import { Sparkles } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var TopNavBar = React.forwardRef(
+  ({
+    schoolLogoSrc,
+    schoolLogoAlt = "School logo",
+    onSchoolLogoClick,
+    navItems = [],
+    onNavItemClick,
+    searchValue = "",
+    onSearchChange,
+    onSearchSubmit,
+    onSearchClear,
+    actionButtonLabel = "Ask Arbor",
+    onActionButtonClick,
+    showActionButton = true,
+    avatarSrc,
+    avatarInitials,
+    avatarAlt = "User avatar",
+    onAvatarClick,
+    onLogoClick,
+    className,
+    style
+  }, ref) => {
+    const containerStyles = {
+      position: "fixed",
+      top: 0,
+      left: 0,
+      right: 0,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      padding: "4px 8px",
+      backgroundColor: "#ffffff",
+      boxShadow: "0px 1px 2px 0px rgba(0, 0, 0, 0.08)",
+      fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+      boxSizing: "border-box",
+      zIndex: 1e3,
+      height: "48px",
+      ...style
+    };
+    const leftSectionStyles = {
+      display: "flex",
+      alignItems: "center",
+      gap: "16px"
+    };
+    const schoolLogoContainerStyles = {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      width: "64px",
+      height: "40px",
+      backgroundColor: "#ffffff",
+      border: "1px solid #efefef",
+      borderRadius: "8px",
+      overflow: "hidden",
+      padding: "2px",
+      boxSizing: "border-box",
+      cursor: onSchoolLogoClick ? "pointer" : "default"
+    };
+    const schoolLogoImageStyles = {
+      maxWidth: "100%",
+      maxHeight: "100%",
+      objectFit: "contain"
+    };
+    const placeholderStyles = {
+      width: "100%",
+      height: "100%",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      backgroundColor: "#f8f8f8",
+      color: "#949494",
+      fontSize: "10px",
+      fontWeight: 500,
+      textAlign: "center"
+    };
+    const navItemsGroupStyles = {
+      display: "flex",
+      alignItems: "center",
+      gap: "8px"
+    };
+    const rightSectionStyles = {
+      display: "flex",
+      alignItems: "center",
+      gap: "16px"
+    };
+    const actionButtonStyles = {
+      display: "flex",
+      alignItems: "center",
+      gap: "8px"
+    };
+    const SchoolLogoElement = onSchoolLogoClick ? "button" : "div";
+    return /* @__PURE__ */ jsxs("nav", { ref, className, style: containerStyles, children: [
+      /* @__PURE__ */ jsxs("div", { style: leftSectionStyles, children: [
+        /* @__PURE__ */ jsx(
+          SchoolLogoElement,
+          {
+            style: {
+              ...schoolLogoContainerStyles,
+              ...onSchoolLogoClick ? { outline: "none", border: "1px solid #efefef" } : {}
+            },
+            onClick: onSchoolLogoClick,
+            ...onSchoolLogoClick ? { type: "button" } : {},
+            children: schoolLogoSrc ? /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: schoolLogoSrc,
+                alt: schoolLogoAlt,
+                style: schoolLogoImageStyles
+              }
+            ) : /* @__PURE__ */ jsx("div", { style: placeholderStyles, children: "Logo" })
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { style: navItemsGroupStyles, children: navItems.map((item) => /* @__PURE__ */ jsx(
+          TopNavItem,
+          {
+            active: item.active,
+            onClick: () => onNavItemClick?.(item),
+            children: item.label
+          },
+          item.id
+        )) })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { style: rightSectionStyles, children: [
+        /* @__PURE__ */ jsx(
+          SearchGlobal,
+          {
+            value: searchValue,
+            onChange: onSearchChange,
+            onSubmit: onSearchSubmit,
+            onClear: onSearchClear
+          }
+        ),
+        showActionButton && /* @__PURE__ */ jsxs(
+          Button,
+          {
+            variant: "secondary",
+            size: "small",
+            onClick: onActionButtonClick,
+            style: actionButtonStyles,
+            children: [
+              /* @__PURE__ */ jsx(Sparkles, { size: 16, strokeWidth: 2 }),
+              actionButtonLabel
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          AvatarLogoLockup,
+          {
+            avatarSrc,
+            avatarInitials,
+            avatarAlt,
+            onAvatarClick,
+            onLogoClick
+          }
+        )
+      ] })
+    ] });
+  }
+);
+TopNavBar.displayName = "TopNavBar";
+
+export {
+  TopNavBar
+};
+//# sourceMappingURL=chunk-YUXQQX7M.mjs.map

package/dist/chunk-YUXQQX7M.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/TopNavBar/TopNavBar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Sparkles } from 'lucide-react';\nimport { TopNavItem } from '../TopNavItem';\nimport { SearchGlobal } from '../SearchGlobal';\nimport { Button } from '../Button';\nimport { AvatarLogoLockup } from '../AvatarLogoLockup';\n\nexport interface NavItem {\n  /**\n   * Unique identifier for the nav item\n   */\n  id: string;\n  /**\n   * Display label for the nav item\n   */\n  label: string;\n  /**\n   * Whether this nav item is currently active\n   */\n  active?: boolean;\n}\n\nexport interface TopNavBarProps {\n  /**\n   * School logo image source URL\n   */\n  schoolLogoSrc?: string;\n  /**\n   * Alt text for school logo\n   */\n  schoolLogoAlt?: string;\n  /**\n   * Click handler for school logo\n   */\n  onSchoolLogoClick?: () => void;\n  /**\n   * Array of navigation items\n   */\n  navItems?: NavItem[];\n  /**\n   * Callback when a nav item is clicked\n   */\n  onNavItemClick?: (item: NavItem) => void;\n  /**\n   * Search value\n   */\n  searchValue?: string;\n  /**\n   * Search change handler\n   */\n  onSearchChange?: (value: string) => void;\n  /**\n   * Search submit handler\n   */\n  onSearchSubmit?: (value: string) => void;\n  /**\n   * Search clear handler\n   */\n  onSearchClear?: () => void;\n  /**\n   * Action button label (e.g., \"Ask Arbor\")\n   */\n  actionButtonLabel?: string;\n  /**\n   * Action button click handler\n   */\n  onActionButtonClick?: () => void;\n  /**\n   * Whether to show the action button\n   */\n  showActionButton?: boolean;\n  /**\n   * User avatar image source URL\n   */\n  avatarSrc?: string;\n  /**\n   * User avatar initials (fallback when no image)\n   */\n  avatarInitials?: string;\n  /**\n   * User avatar alt text\n   */\n  avatarAlt?: string;\n  /**\n   * Avatar section click handler\n   */\n  onAvatarClick?: () => void;\n  /**\n   * Logo section click handler\n   */\n  onLogoClick?: () => void;\n  /**\n   * Custom className\n   */\n  className?: string;\n  /**\n   * Custom style\n   */\n  style?: React.CSSProperties;\n}\n\n/**\n * TopNavBar component - Arbor Design System\n *\n * A full-width navigation bar fixed to the top of the page.\n * Contains school logo, navigation items, search, action button, and avatar-logo lockup.\n */\nexport const TopNavBar = React.forwardRef<HTMLElement, TopNavBarProps>(\n  (\n    {\n      schoolLogoSrc,\n      schoolLogoAlt = 'School logo',\n      onSchoolLogoClick,\n      navItems = [],\n      onNavItemClick,\n      searchValue = '',\n      onSearchChange,\n      onSearchSubmit,\n      onSearchClear,\n      actionButtonLabel = 'Ask Arbor',\n      onActionButtonClick,\n      showActionButton = true,\n      avatarSrc,\n      avatarInitials,\n      avatarAlt = 'User avatar',\n      onAvatarClick,\n      onLogoClick,\n      className,\n      style,\n    },\n    ref\n  ) => {\n    const containerStyles: React.CSSProperties = {\n      position: 'fixed',\n      top: 0,\n      left: 0,\n      right: 0,\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'space-between',\n      padding: '4px 8px',\n      backgroundColor: '#ffffff',\n      boxShadow: '0px 1px 2px 0px rgba(0, 0, 0, 0.08)',\n      fontFamily: \"'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif\",\n      boxSizing: 'border-box',\n      zIndex: 1000,\n      height: '48px',\n      ...style,\n    };\n\n    const leftSectionStyles: React.CSSProperties = {\n      display: 'flex',\n      alignItems: 'center',\n      gap: '16px',\n    };\n\n    const schoolLogoContainerStyles: React.CSSProperties = {\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      width: '64px',\n      height: '40px',\n      backgroundColor: '#ffffff',\n      border: '1px solid #efefef',\n      borderRadius: '8px',\n      overflow: 'hidden',\n      padding: '2px',\n      boxSizing: 'border-box',\n      cursor: onSchoolLogoClick ? 'pointer' : 'default',\n    };\n\n    const schoolLogoImageStyles: React.CSSProperties = {\n      maxWidth: '100%',\n      maxHeight: '100%',\n      objectFit: 'contain',\n    };\n\n    const placeholderStyles: React.CSSProperties = {\n      width: '100%',\n      height: '100%',\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      backgroundColor: '#f8f8f8',\n      color: '#949494',\n      fontSize: '10px',\n      fontWeight: 500,\n      textAlign: 'center',\n    };\n\n    const navItemsGroupStyles: React.CSSProperties = {\n      display: 'flex',\n      alignItems: 'center',\n      gap: '8px',\n    };\n\n    const rightSectionStyles: React.CSSProperties = {\n      display: 'flex',\n      alignItems: 'center',\n      gap: '16px',\n    };\n\n    const actionButtonStyles: React.CSSProperties = {\n      display: 'flex',\n      alignItems: 'center',\n      gap: '8px',\n    };\n\n    const SchoolLogoElement = onSchoolLogoClick ? 'button' : 'div';\n\n    return (\n      <nav ref={ref} className={className} style={containerStyles}>\n        {/* Left section: School logo + Nav items */}\n        <div style={leftSectionStyles}>\n          <SchoolLogoElement\n            style={{\n              ...schoolLogoContainerStyles,\n              ...(onSchoolLogoClick ? { outline: 'none', border: '1px solid #efefef' } : {}),\n            }}\n            onClick={onSchoolLogoClick}\n            {...(onSchoolLogoClick ? { type: 'button' } : {})}\n          >\n            {schoolLogoSrc ? (\n              <img\n                src={schoolLogoSrc}\n                alt={schoolLogoAlt}\n                style={schoolLogoImageStyles}\n              />\n            ) : (\n              <div style={placeholderStyles}>Logo</div>\n            )}\n          </SchoolLogoElement>\n\n          <div style={navItemsGroupStyles}>\n            {navItems.map((item) => (\n              <TopNavItem\n                key={item.id}\n                active={item.active}\n                onClick={() => onNavItemClick?.(item)}\n              >\n                {item.label}\n              </TopNavItem>\n            ))}\n          </div>\n        </div>\n\n        {/* Right section: Search + Action button + Avatar-Logo lockup */}\n        <div style={rightSectionStyles}>\n          <SearchGlobal\n            value={searchValue}\n            onChange={onSearchChange}\n            onSubmit={onSearchSubmit}\n            onClear={onSearchClear}\n          />\n\n          {showActionButton && (\n            <Button\n              variant=\"secondary\"\n              size=\"small\"\n              onClick={onActionButtonClick}\n              style={actionButtonStyles}\n            >\n              <Sparkles size={16} strokeWidth={2} />\n              {actionButtonLabel}\n            </Button>\n          )}\n\n          <AvatarLogoLockup\n            avatarSrc={avatarSrc}\n            avatarInitials={avatarInitials}\n            avatarAlt={avatarAlt}\n            onAvatarClick={onAvatarClick}\n            onLogoClick={onLogoClick}\n          />\n        </div>\n      </nav>\n    );\n  }\n);\n\nTopNavBar.displayName = 'TopNavBar';\n"],"mappings":"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","names":[]}

package/dist/index.d.mts

@@ -34,6 +34,9 @@ export { Section, SectionProps } from './Section.mjs';
 export { ModalHeader, ModalHeaderProps } from './ModalHeader.mjs';
 export { ModalFooter, ModalFooterProps } from './ModalFooter.mjs';
 export { Modal, ModalContent, ModalContentProps, ModalProps } from './Modal.mjs';
+export { AvatarLogoLockup, AvatarLogoLockupProps } from './AvatarLogoLockup.mjs';
+export { TopNavItem, TopNavItemProps } from './TopNavItem.mjs';
+export { NavItem, TopNavBar, TopNavBarProps } from './TopNavBar.mjs';
 import 'react';
 
 /**

package/dist/index.d.ts

@@ -34,6 +34,9 @@ export { Section, SectionProps } from './Section.js';
 export { ModalHeader, ModalHeaderProps } from './ModalHeader.js';
 export { ModalFooter, ModalFooterProps } from './ModalFooter.js';
 export { Modal, ModalContent, ModalContentProps, ModalProps } from './Modal.js';
+export { AvatarLogoLockup, AvatarLogoLockupProps } from './AvatarLogoLockup.js';
+export { TopNavItem, TopNavItemProps } from './TopNavItem.js';
+export { NavItem, TopNavBar, TopNavBarProps } from './TopNavBar.js';
 import 'react';
 
 /**

package/dist/index.js

@@ -31,6 +31,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var src_exports = {};
 __export(src_exports, {
   Avatar: () => Avatar,
+  AvatarLogoLockup: () => AvatarLogoLockup,
   Banner: () => Banner,
   Breadcrumbs: () => Breadcrumbs,
   Button: () => Button,
@@ -66,7 +67,9 @@ __export(src_exports, {
   TextArea: () => TextArea,
   Toast: () => Toast,
   Toggle: () => Toggle,
-  Tooltip: () => Tooltip
+  Tooltip: () => Tooltip,
+  TopNavBar: () => TopNavBar,
+  TopNavItem: () => TopNavItem
 });
 module.exports = __toCommonJS(src_exports);
 
@@ -6408,9 +6411,348 @@ var ModalContent = React36.forwardRef(
   }
 );
 ModalContent.displayName = "ModalContent";
+
+// src/AvatarLogoLockup/AvatarLogoLockup.tsx
+var React37 = __toESM(require("react"));
+var import_lucide_react14 = require("lucide-react");
+var import_jsx_runtime37 = require("react/jsx-runtime");
+var AvatarLogoLockup = React37.forwardRef(
+  ({
+    avatarSrc,
+    avatarInitials,
+    avatarAlt = "User avatar",
+    onAvatarClick,
+    onLogoClick,
+    className,
+    style
+  }, ref) => {
+    const [isHovered, setIsHovered] = React37.useState(false);
+    const containerStyles6 = {
+      display: "inline-flex",
+      alignItems: "center",
+      gap: "4px",
+      padding: "4px",
+      height: "40px",
+      backgroundColor: isHovered ? "#f8f8f8" : "#ffffff",
+      border: "1px solid #efefef",
+      borderRadius: "99px",
+      fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+      boxSizing: "border-box",
+      transition: "background-color 0.15s ease-in-out",
+      ...style
+    };
+    const avatarSectionStyles = {
+      display: "flex",
+      alignItems: "center",
+      gap: "4px",
+      borderRadius: "99px",
+      cursor: onAvatarClick ? "pointer" : "default",
+      backgroundColor: "transparent",
+      border: "none",
+      padding: 0
+    };
+    const dividerStyles = {
+      width: "1px",
+      height: "24px",
+      backgroundColor: "#efefef",
+      flexShrink: 0
+    };
+    const logoSectionStyles = {
+      display: "flex",
+      alignItems: "center",
+      cursor: onLogoClick ? "pointer" : "default",
+      padding: 0
+    };
+    const AvatarSection = onAvatarClick ? "button" : "div";
+    const LogoSection = onLogoClick ? "button" : "div";
+    return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+      "div",
+      {
+        ref,
+        className,
+        style: containerStyles6,
+        onMouseEnter: () => setIsHovered(true),
+        onMouseLeave: () => setIsHovered(false),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+            AvatarSection,
+            {
+              style: {
+                ...avatarSectionStyles,
+                ...onAvatarClick ? { outline: "none" } : {}
+              },
+              onClick: onAvatarClick,
+              ...onAvatarClick ? { type: "button" } : {},
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+                  Avatar,
+                  {
+                    size: "medium",
+                    src: avatarSrc,
+                    initials: avatarInitials,
+                    alt: avatarAlt
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_lucide_react14.ChevronDown, { size: 12, color: "#2f2f2f", strokeWidth: 2 })
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { style: dividerStyles }),
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+            LogoSection,
+            {
+              style: {
+                ...logoSectionStyles,
+                ...onLogoClick ? { outline: "none", backgroundColor: "transparent", border: "none" } : {}
+              },
+              onClick: onLogoClick,
+              ...onLogoClick ? { type: "button" } : {},
+              children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Logo, { withText: true, light: true, height: 25 })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+AvatarLogoLockup.displayName = "AvatarLogoLockup";
+
+// src/TopNavItem/TopNavItem.tsx
+var React38 = __toESM(require("react"));
+var import_lucide_react15 = require("lucide-react");
+var import_jsx_runtime38 = require("react/jsx-runtime");
+var TopNavItem = React38.forwardRef(
+  ({
+    children,
+    active = false,
+    onClick,
+    className,
+    style
+  }, ref) => {
+    const [isHovered, setIsHovered] = React38.useState(false);
+    const [isFocused, setIsFocused] = React38.useState(false);
+    const textColor = active ? "#005700" : "#474747";
+    const iconColor = active ? "#005700" : "#474747";
+    const getBackgroundColor = () => {
+      if (active) return "#f0faf3";
+      if (isHovered) return "#f8f8f8";
+      return "transparent";
+    };
+    const containerStyles6 = {
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      gap: "4px",
+      padding: "4px 8px",
+      backgroundColor: getBackgroundColor(),
+      borderRadius: "8px",
+      border: "none",
+      cursor: "pointer",
+      fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+      boxSizing: "border-box",
+      transition: "background-color 0.15s ease-in-out",
+      outline: "none",
+      boxShadow: isFocused ? "0px 0px 0px 3px #3cad51" : "none",
+      ...style
+    };
+    const textStyles3 = {
+      fontSize: "13px",
+      fontWeight: 600,
+      color: textColor,
+      lineHeight: 1.5,
+      textAlign: "center",
+      whiteSpace: "nowrap"
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+      "button",
+      {
+        ref,
+        className,
+        style: containerStyles6,
+        onClick,
+        onMouseEnter: () => setIsHovered(true),
+        onMouseLeave: () => setIsHovered(false),
+        onFocus: () => setIsFocused(true),
+        onBlur: () => setIsFocused(false),
+        type: "button",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { style: textStyles3, children }),
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_lucide_react15.ChevronDown, { size: 12, color: iconColor, strokeWidth: 2 })
+        ]
+      }
+    );
+  }
+);
+TopNavItem.displayName = "TopNavItem";
+
+// src/TopNavBar/TopNavBar.tsx
+var React39 = __toESM(require("react"));
+var import_lucide_react16 = require("lucide-react");
+var import_jsx_runtime39 = require("react/jsx-runtime");
+var TopNavBar = React39.forwardRef(
+  ({
+    schoolLogoSrc,
+    schoolLogoAlt = "School logo",
+    onSchoolLogoClick,
+    navItems = [],
+    onNavItemClick,
+    searchValue = "",
+    onSearchChange,
+    onSearchSubmit,
+    onSearchClear,
+    actionButtonLabel = "Ask Arbor",
+    onActionButtonClick,
+    showActionButton = true,
+    avatarSrc,
+    avatarInitials,
+    avatarAlt = "User avatar",
+    onAvatarClick,
+    onLogoClick,
+    className,
+    style
+  }, ref) => {
+    const containerStyles6 = {
+      position: "fixed",
+      top: 0,
+      left: 0,
+      right: 0,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      padding: "4px 8px",
+      backgroundColor: "#ffffff",
+      boxShadow: "0px 1px 2px 0px rgba(0, 0, 0, 0.08)",
+      fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+      boxSizing: "border-box",
+      zIndex: 1e3,
+      height: "48px",
+      ...style
+    };
+    const leftSectionStyles = {
+      display: "flex",
+      alignItems: "center",
+      gap: "16px"
+    };
+    const schoolLogoContainerStyles = {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      width: "64px",
+      height: "40px",
+      backgroundColor: "#ffffff",
+      border: "1px solid #efefef",
+      borderRadius: "8px",
+      overflow: "hidden",
+      padding: "2px",
+      boxSizing: "border-box",
+      cursor: onSchoolLogoClick ? "pointer" : "default"
+    };
+    const schoolLogoImageStyles = {
+      maxWidth: "100%",
+      maxHeight: "100%",
+      objectFit: "contain"
+    };
+    const placeholderStyles = {
+      width: "100%",
+      height: "100%",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      backgroundColor: "#f8f8f8",
+      color: "#949494",
+      fontSize: "10px",
+      fontWeight: 500,
+      textAlign: "center"
+    };
+    const navItemsGroupStyles = {
+      display: "flex",
+      alignItems: "center",
+      gap: "8px"
+    };
+    const rightSectionStyles = {
+      display: "flex",
+      alignItems: "center",
+      gap: "16px"
+    };
+    const actionButtonStyles2 = {
+      display: "flex",
+      alignItems: "center",
+      gap: "8px"
+    };
+    const SchoolLogoElement = onSchoolLogoClick ? "button" : "div";
+    return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("nav", { ref, className, style: containerStyles6, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { style: leftSectionStyles, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+          SchoolLogoElement,
+          {
+            style: {
+              ...schoolLogoContainerStyles,
+              ...onSchoolLogoClick ? { outline: "none", border: "1px solid #efefef" } : {}
+            },
+            onClick: onSchoolLogoClick,
+            ...onSchoolLogoClick ? { type: "button" } : {},
+            children: schoolLogoSrc ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+              "img",
+              {
+                src: schoolLogoSrc,
+                alt: schoolLogoAlt,
+                style: schoolLogoImageStyles
+              }
+            ) : /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { style: placeholderStyles, children: "Logo" })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { style: navItemsGroupStyles, children: navItems.map((item) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+          TopNavItem,
+          {
+            active: item.active,
+            onClick: () => onNavItemClick?.(item),
+            children: item.label
+          },
+          item.id
+        )) })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { style: rightSectionStyles, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+          SearchGlobal,
+          {
+            value: searchValue,
+            onChange: onSearchChange,
+            onSubmit: onSearchSubmit,
+            onClear: onSearchClear
+          }
+        ),
+        showActionButton && /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
+          Button,
+          {
+            variant: "secondary",
+            size: "small",
+            onClick: onActionButtonClick,
+            style: actionButtonStyles2,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_lucide_react16.Sparkles, { size: 16, strokeWidth: 2 }),
+              actionButtonLabel
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+          AvatarLogoLockup,
+          {
+            avatarSrc,
+            avatarInitials,
+            avatarAlt,
+            onAvatarClick,
+            onLogoClick
+          }
+        )
+      ] })
+    ] });
+  }
+);
+TopNavBar.displayName = "TopNavBar";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Avatar,
+  AvatarLogoLockup,
   Banner,
   Breadcrumbs,
   Button,
@@ -6446,6 +6788,8 @@ ModalContent.displayName = "ModalContent";
   TextArea,
   Toast,
   Toggle,
-  Tooltip
+  Tooltip,
+  TopNavBar,
+  TopNavItem
 });
 //# sourceMappingURL=index.js.map