@tonyarbor/components 0.7.0 → 0.8.0

package/dist/chunk-HG2ORLLW.mjs

@@ -0,0 +1,116 @@
+import {
+  Logo
+} from "./chunk-NNYU4DPD.mjs";
+import {
+  Avatar
+} from "./chunk-JSG27ZZS.mjs";
+
+// src/AvatarLogoLockup/AvatarLogoLockup.tsx
+import * as React from "react";
+import { ChevronDown } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var AvatarLogoLockup = React.forwardRef(
+  ({
+    avatarSrc,
+    avatarInitials,
+    avatarAlt = "User avatar",
+    onAvatarClick,
+    onLogoClick,
+    className,
+    style
+  }, ref) => {
+    const [isHovered, setIsHovered] = React.useState(false);
+    const containerStyles = {
+      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__ */ jsxs(
+      "div",
+      {
+        ref,
+        className,
+        style: containerStyles,
+        onMouseEnter: () => setIsHovered(true),
+        onMouseLeave: () => setIsHovered(false),
+        children: [
+          /* @__PURE__ */ jsxs(
+            AvatarSection,
+            {
+              style: {
+                ...avatarSectionStyles,
+                ...onAvatarClick ? { outline: "none" } : {}
+              },
+              onClick: onAvatarClick,
+              ...onAvatarClick ? { type: "button" } : {},
+              children: [
+                /* @__PURE__ */ jsx(
+                  Avatar,
+                  {
+                    size: "medium",
+                    src: avatarSrc,
+                    initials: avatarInitials,
+                    alt: avatarAlt
+                  }
+                ),
+                /* @__PURE__ */ jsx(ChevronDown, { size: 12, color: "#2f2f2f", strokeWidth: 2 })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { style: dividerStyles }),
+          /* @__PURE__ */ jsx(
+            LogoSection,
+            {
+              style: {
+                ...logoSectionStyles,
+                ...onLogoClick ? { outline: "none", backgroundColor: "transparent", border: "none" } : {}
+              },
+              onClick: onLogoClick,
+              ...onLogoClick ? { type: "button" } : {},
+              children: /* @__PURE__ */ jsx(Logo, { withText: true, light: true, height: 25 })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+AvatarLogoLockup.displayName = "AvatarLogoLockup";
+
+export {
+  AvatarLogoLockup
+};
+//# sourceMappingURL=chunk-HG2ORLLW.mjs.map

package/dist/chunk-HG2ORLLW.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/AvatarLogoLockup/AvatarLogoLockup.tsx"],"sourcesContent":["import * as React from 'react';\nimport { ChevronDown } from 'lucide-react';\nimport { Avatar } from '../Avatar';\nimport { Logo } from '../Logo';\n\nexport interface AvatarLogoLockupProps {\n  /**\n   * Image source URL for the avatar\n   */\n  avatarSrc?: string;\n  /**\n   * Initials to display in avatar when no image is provided\n   */\n  avatarInitials?: string;\n  /**\n   * Alt text for the avatar image\n   */\n  avatarAlt?: string;\n  /**\n   * Click handler for the avatar section\n   */\n  onAvatarClick?: () => void;\n  /**\n   * Click handler for the logo section\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 * AvatarLogoLockup component - Arbor Design System\n *\n * A navigation component combining user avatar with Arbor logo,\n * typically used in the top navigation bar.\n */\nexport const AvatarLogoLockup = React.forwardRef<HTMLDivElement, AvatarLogoLockupProps>(\n  (\n    {\n      avatarSrc,\n      avatarInitials,\n      avatarAlt = 'User avatar',\n      onAvatarClick,\n      onLogoClick,\n      className,\n      style,\n    },\n    ref\n  ) => {\n    const [isHovered, setIsHovered] = React.useState(false);\n\n    const containerStyles: React.CSSProperties = {\n      display: 'inline-flex',\n      alignItems: 'center',\n      gap: '4px',\n      padding: '4px',\n      height: '40px',\n      backgroundColor: isHovered ? '#f8f8f8' : '#ffffff',\n      border: '1px solid #efefef',\n      borderRadius: '99px',\n      fontFamily: \"'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif\",\n      boxSizing: 'border-box',\n      transition: 'background-color 0.15s ease-in-out',\n      ...style,\n    };\n\n    const avatarSectionStyles: React.CSSProperties = {\n      display: 'flex',\n      alignItems: 'center',\n      gap: '4px',\n      borderRadius: '99px',\n      cursor: onAvatarClick ? 'pointer' : 'default',\n      backgroundColor: 'transparent',\n      border: 'none',\n      padding: 0,\n    };\n\n    const dividerStyles: React.CSSProperties = {\n      width: '1px',\n      height: '24px',\n      backgroundColor: '#efefef',\n      flexShrink: 0,\n    };\n\n    const logoSectionStyles: React.CSSProperties = {\n      display: 'flex',\n      alignItems: 'center',\n      cursor: onLogoClick ? 'pointer' : 'default',\n      padding: 0,\n    };\n\n    const AvatarSection = onAvatarClick ? 'button' : 'div';\n    const LogoSection = onLogoClick ? 'button' : 'div';\n\n    return (\n      <div\n        ref={ref}\n        className={className}\n        style={containerStyles}\n        onMouseEnter={() => setIsHovered(true)}\n        onMouseLeave={() => setIsHovered(false)}\n      >\n        <AvatarSection\n          style={{\n            ...avatarSectionStyles,\n            ...(onAvatarClick ? { outline: 'none' } : {}),\n          }}\n          onClick={onAvatarClick}\n          {...(onAvatarClick ? { type: 'button' } : {})}\n        >\n          <Avatar\n            size=\"medium\"\n            src={avatarSrc}\n            initials={avatarInitials}\n            alt={avatarAlt}\n          />\n          <ChevronDown size={12} color=\"#2f2f2f\" strokeWidth={2} />\n        </AvatarSection>\n\n        <div style={dividerStyles} />\n\n        <LogoSection\n          style={{\n            ...logoSectionStyles,\n            ...(onLogoClick ? { outline: 'none', backgroundColor: 'transparent', border: 'none' } : {}),\n          }}\n          onClick={onLogoClick}\n          {...(onLogoClick ? { type: 'button' } : {})}\n        >\n          <Logo withText={true} light={true} height={25} />\n        </LogoSection>\n      </div>\n    );\n  }\n);\n\nAvatarLogoLockup.displayName = 'AvatarLogoLockup';\n"],"mappings":";;;;;;;;AAAA,YAAY,WAAW;AACvB,SAAS,mBAAmB;AA2GpB,SAQE,KARF;AAlED,IAAM,mBAAyB;AAAA,EACpC,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,GACA,QACG;AACH,UAAM,CAAC,WAAW,YAAY,IAAU,eAAS,KAAK;AAEtD,UAAM,kBAAuC;AAAA,MAC3C,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,KAAK;AAAA,MACL,SAAS;AAAA,MACT,QAAQ;AAAA,MACR,iBAAiB,YAAY,YAAY;AAAA,MACzC,QAAQ;AAAA,MACR,cAAc;AAAA,MACd,YAAY;AAAA,MACZ,WAAW;AAAA,MACX,YAAY;AAAA,MACZ,GAAG;AAAA,IACL;AAEA,UAAM,sBAA2C;AAAA,MAC/C,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,KAAK;AAAA,MACL,cAAc;AAAA,MACd,QAAQ,gBAAgB,YAAY;AAAA,MACpC,iBAAiB;AAAA,MACjB,QAAQ;AAAA,MACR,SAAS;AAAA,IACX;AAEA,UAAM,gBAAqC;AAAA,MACzC,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,iBAAiB;AAAA,MACjB,YAAY;AAAA,IACd;AAEA,UAAM,oBAAyC;AAAA,MAC7C,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,QAAQ,cAAc,YAAY;AAAA,MAClC,SAAS;AAAA,IACX;AAEA,UAAM,gBAAgB,gBAAgB,WAAW;AACjD,UAAM,cAAc,cAAc,WAAW;AAE7C,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,OAAO;AAAA,QACP,cAAc,MAAM,aAAa,IAAI;AAAA,QACrC,cAAc,MAAM,aAAa,KAAK;AAAA,QAEtC;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,OAAO;AAAA,gBACL,GAAG;AAAA,gBACH,GAAI,gBAAgB,EAAE,SAAS,OAAO,IAAI,CAAC;AAAA,cAC7C;AAAA,cACA,SAAS;AAAA,cACR,GAAI,gBAAgB,EAAE,MAAM,SAAS,IAAI,CAAC;AAAA,cAE3C;AAAA;AAAA,kBAAC;AAAA;AAAA,oBACC,MAAK;AAAA,oBACL,KAAK;AAAA,oBACL,UAAU;AAAA,oBACV,KAAK;AAAA;AAAA,gBACP;AAAA,gBACA,oBAAC,eAAY,MAAM,IAAI,OAAM,WAAU,aAAa,GAAG;AAAA;AAAA;AAAA,UACzD;AAAA,UAEA,oBAAC,SAAI,OAAO,eAAe;AAAA,UAE3B;AAAA,YAAC;AAAA;AAAA,cACC,OAAO;AAAA,gBACL,GAAG;AAAA,gBACH,GAAI,cAAc,EAAE,SAAS,QAAQ,iBAAiB,eAAe,QAAQ,OAAO,IAAI,CAAC;AAAA,cAC3F;AAAA,cACA,SAAS;AAAA,cACR,GAAI,cAAc,EAAE,MAAM,SAAS,IAAI,CAAC;AAAA,cAEzC,8BAAC,QAAK,UAAU,MAAM,OAAO,MAAM,QAAQ,IAAI;AAAA;AAAA,UACjD;AAAA;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;AAEA,iBAAiB,cAAc;","names":[]}

package/dist/chunk-I4ZVW4AI.mjs

@@ -0,0 +1,100 @@
+// src/SideNavButton/SideNavButton.tsx
+import * as React from "react";
+import { Home, Menu, Star, Calendar, Bell, AlertTriangle, HelpCircle } from "lucide-react";
+import { jsx } from "react/jsx-runtime";
+var SideNavButton = React.forwardRef(
+  ({
+    icon,
+    selected = false,
+    focused = false,
+    onClick,
+    "aria-label": ariaLabel,
+    className,
+    style
+  }, ref) => {
+    const [isHovered, setIsHovered] = React.useState(false);
+    const [isActive, setIsActive] = React.useState(false);
+    const getIconColor = () => {
+      if (selected) return "#0e8a0e";
+      if (isActive || isHovered) return "#2f2f2f";
+      return "#7e7e7e";
+    };
+    const getBackgroundColor = () => {
+      if (selected) return "#f0faf3";
+      if (isActive) return "#efefef";
+      if (isHovered) return "#f8f8f8";
+      return "transparent";
+    };
+    const buttonStyles = {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      width: "42px",
+      height: "42px",
+      borderRadius: "99px",
+      border: "none",
+      backgroundColor: getBackgroundColor(),
+      cursor: "pointer",
+      padding: 0,
+      outline: "none",
+      transition: "background-color 150ms ease, box-shadow 150ms ease",
+      boxShadow: focused ? "0px 0px 0px 3px #3cad51" : "none",
+      ...style
+    };
+    const renderIcon = () => {
+      const iconColor = getIconColor();
+      const iconSize = 20;
+      const strokeWidth = 2;
+      const iconProps = {
+        size: iconSize,
+        color: iconColor,
+        strokeWidth
+      };
+      switch (icon) {
+        case "side-menu":
+          return /* @__PURE__ */ jsx(Menu, { ...iconProps });
+        case "home":
+          return /* @__PURE__ */ jsx(Home, { ...iconProps });
+        case "favourite":
+          return /* @__PURE__ */ jsx(Star, { ...iconProps });
+        case "calendar":
+          return /* @__PURE__ */ jsx(Calendar, { ...iconProps });
+        case "notifications":
+          return /* @__PURE__ */ jsx(Bell, { ...iconProps });
+        case "emergency-alert":
+          return /* @__PURE__ */ jsx(AlertTriangle, { ...iconProps });
+        case "help":
+          return /* @__PURE__ */ jsx(HelpCircle, { ...iconProps });
+        default:
+          return null;
+      }
+    };
+    const defaultAriaLabel = icon.charAt(0).toUpperCase() + icon.slice(1);
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref,
+        type: "button",
+        className,
+        style: buttonStyles,
+        onClick,
+        onMouseEnter: () => setIsHovered(true),
+        onMouseLeave: () => {
+          setIsHovered(false);
+          setIsActive(false);
+        },
+        onMouseDown: () => setIsActive(true),
+        onMouseUp: () => setIsActive(false),
+        "aria-label": ariaLabel || defaultAriaLabel,
+        "aria-pressed": selected,
+        children: renderIcon()
+      }
+    );
+  }
+);
+SideNavButton.displayName = "SideNavButton";
+
+export {
+  SideNavButton
+};
+//# sourceMappingURL=chunk-I4ZVW4AI.mjs.map

package/dist/chunk-I4ZVW4AI.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/SideNavButton/SideNavButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Home, Menu, Star, Calendar, Bell, AlertTriangle, HelpCircle } from 'lucide-react';\n\nexport type SideNavButtonIcon = 'side-menu' | 'home' | 'favourite' | 'calendar' | 'notifications' | 'emergency-alert' | 'help';\n\nexport interface SideNavButtonProps {\n  /**\n   * The icon to display\n   */\n  icon: SideNavButtonIcon;\n  /**\n   * Whether the button is selected/active\n   */\n  selected?: boolean;\n  /**\n   * Whether the button is focused (shows green ring)\n   */\n  focused?: boolean;\n  /**\n   * Click handler\n   */\n  onClick?: () => void;\n  /**\n   * Accessible label for the button\n   */\n  'aria-label'?: string;\n  /**\n   * Custom className\n   */\n  className?: string;\n  /**\n   * Custom style\n   */\n  style?: React.CSSProperties;\n}\n\n/**\n * SideNavButton component - Arbor Design System\n *\n * A circular navigation button used in the side navigation bar.\n * Supports different icons and states (default, hover, active, selected, focused).\n */\nexport const SideNavButton = React.forwardRef<HTMLButtonElement, SideNavButtonProps>(\n  (\n    {\n      icon,\n      selected = false,\n      focused = false,\n      onClick,\n      'aria-label': ariaLabel,\n      className,\n      style,\n    },\n    ref\n  ) => {\n    const [isHovered, setIsHovered] = React.useState(false);\n    const [isActive, setIsActive] = React.useState(false);\n\n    // Determine icon color based on state\n    const getIconColor = () => {\n      if (selected) return '#0e8a0e'; // Green for selected\n      if (isActive || isHovered) return '#2f2f2f'; // Dark gray for hover/active\n      return '#7e7e7e'; // Gray for default\n    };\n\n    // Determine background color based on state\n    const getBackgroundColor = () => {\n      if (selected) return '#f0faf3'; // Light green for selected\n      if (isActive) return '#efefef'; // Darker gray for active\n      if (isHovered) return '#f8f8f8'; // Light gray for hover\n      return 'transparent'; // Transparent for default\n    };\n\n    const buttonStyles: React.CSSProperties = {\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      width: '42px',\n      height: '42px',\n      borderRadius: '99px',\n      border: 'none',\n      backgroundColor: getBackgroundColor(),\n      cursor: 'pointer',\n      padding: 0,\n      outline: 'none',\n      transition: 'background-color 150ms ease, box-shadow 150ms ease',\n      boxShadow: focused ? '0px 0px 0px 3px #3cad51' : 'none',\n      ...style,\n    };\n\n    // Get the appropriate icon component\n    const renderIcon = () => {\n      const iconColor = getIconColor();\n      const iconSize = 20;\n      const strokeWidth = 2;\n\n      // All icons are stroke-only (outline), no fill - just color changes\n      const iconProps = {\n        size: iconSize,\n        color: iconColor,\n        strokeWidth,\n      };\n\n      switch (icon) {\n        case 'side-menu':\n          return <Menu {...iconProps} />;\n        case 'home':\n          return <Home {...iconProps} />;\n        case 'favourite':\n          return <Star {...iconProps} />;\n        case 'calendar':\n          return <Calendar {...iconProps} />;\n        case 'notifications':\n          return <Bell {...iconProps} />;\n        case 'emergency-alert':\n          return <AlertTriangle {...iconProps} />;\n        case 'help':\n          return <HelpCircle {...iconProps} />;\n        default:\n          return null;\n      }\n    };\n\n    // Default aria-label based on icon\n    const defaultAriaLabel = icon.charAt(0).toUpperCase() + icon.slice(1);\n\n    return (\n      <button\n        ref={ref}\n        type=\"button\"\n        className={className}\n        style={buttonStyles}\n        onClick={onClick}\n        onMouseEnter={() => setIsHovered(true)}\n        onMouseLeave={() => {\n          setIsHovered(false);\n          setIsActive(false);\n        }}\n        onMouseDown={() => setIsActive(true)}\n        onMouseUp={() => setIsActive(false)}\n        aria-label={ariaLabel || defaultAriaLabel}\n        aria-pressed={selected}\n      >\n        {renderIcon()}\n      </button>\n    );\n  }\n);\n\nSideNavButton.displayName = 'SideNavButton';\n"],"mappings":";AAAA,YAAY,WAAW;AACvB,SAAS,MAAM,MAAM,MAAM,UAAU,MAAM,eAAe,kBAAkB;AAwG3D;AA/DV,IAAM,gBAAsB;AAAA,EACjC,CACE;AAAA,IACE;AAAA,IACA,WAAW;AAAA,IACX,UAAU;AAAA,IACV;AAAA,IACA,cAAc;AAAA,IACd;AAAA,IACA;AAAA,EACF,GACA,QACG;AACH,UAAM,CAAC,WAAW,YAAY,IAAU,eAAS,KAAK;AACtD,UAAM,CAAC,UAAU,WAAW,IAAU,eAAS,KAAK;AAGpD,UAAM,eAAe,MAAM;AACzB,UAAI,SAAU,QAAO;AACrB,UAAI,YAAY,UAAW,QAAO;AAClC,aAAO;AAAA,IACT;AAGA,UAAM,qBAAqB,MAAM;AAC/B,UAAI,SAAU,QAAO;AACrB,UAAI,SAAU,QAAO;AACrB,UAAI,UAAW,QAAO;AACtB,aAAO;AAAA,IACT;AAEA,UAAM,eAAoC;AAAA,MACxC,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,gBAAgB;AAAA,MAChB,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,cAAc;AAAA,MACd,QAAQ;AAAA,MACR,iBAAiB,mBAAmB;AAAA,MACpC,QAAQ;AAAA,MACR,SAAS;AAAA,MACT,SAAS;AAAA,MACT,YAAY;AAAA,MACZ,WAAW,UAAU,4BAA4B;AAAA,MACjD,GAAG;AAAA,IACL;AAGA,UAAM,aAAa,MAAM;AACvB,YAAM,YAAY,aAAa;AAC/B,YAAM,WAAW;AACjB,YAAM,cAAc;AAGpB,YAAM,YAAY;AAAA,QAChB,MAAM;AAAA,QACN,OAAO;AAAA,QACP;AAAA,MACF;AAEA,cAAQ,MAAM;AAAA,QACZ,KAAK;AACH,iBAAO,oBAAC,QAAM,GAAG,WAAW;AAAA,QAC9B,KAAK;AACH,iBAAO,oBAAC,QAAM,GAAG,WAAW;AAAA,QAC9B,KAAK;AACH,iBAAO,oBAAC,QAAM,GAAG,WAAW;AAAA,QAC9B,KAAK;AACH,iBAAO,oBAAC,YAAU,GAAG,WAAW;AAAA,QAClC,KAAK;AACH,iBAAO,oBAAC,QAAM,GAAG,WAAW;AAAA,QAC9B,KAAK;AACH,iBAAO,oBAAC,iBAAe,GAAG,WAAW;AAAA,QACvC,KAAK;AACH,iBAAO,oBAAC,cAAY,GAAG,WAAW;AAAA,QACpC;AACE,iBAAO;AAAA,MACX;AAAA,IACF;AAGA,UAAM,mBAAmB,KAAK,OAAO,CAAC,EAAE,YAAY,IAAI,KAAK,MAAM,CAAC;AAEpE,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,MAAK;AAAA,QACL;AAAA,QACA,OAAO;AAAA,QACP;AAAA,QACA,cAAc,MAAM,aAAa,IAAI;AAAA,QACrC,cAAc,MAAM;AAClB,uBAAa,KAAK;AAClB,sBAAY,KAAK;AAAA,QACnB;AAAA,QACA,aAAa,MAAM,YAAY,IAAI;AAAA,QACnC,WAAW,MAAM,YAAY,KAAK;AAAA,QAClC,cAAY,aAAa;AAAA,QACzB,gBAAc;AAAA,QAEb,qBAAW;AAAA;AAAA,IACd;AAAA,EAEJ;AACF;AAEA,cAAc,cAAc;","names":[]}

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,11 @@ 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';
+export { SideNavButton, SideNavButtonIcon, SideNavButtonProps } from './SideNavButton.mjs';
+export { SideNavBar, SideNavBarIcon, SideNavBarProps } from './SideNavBar.mjs';
 import 'react';
 
 /**

package/dist/index.d.ts

@@ -34,6 +34,11 @@ 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';
+export { SideNavButton, SideNavButtonIcon, SideNavButtonProps } from './SideNavButton.js';
+export { SideNavBar, SideNavBarIcon, SideNavBarProps } from './SideNavBar.js';
 import 'react';
 
 /**