@tonyarbor/components 0.7.0 → 0.8.0

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,
@@ -56,6 +57,8 @@ __export(src_exports, {
   SectionHeading: () => SectionHeading,
   SectionHeadingInteractive: () => SectionHeadingInteractive,
   SectionIcon: () => SectionIcon,
+  SideNavBar: () => SideNavBar,
+  SideNavButton: () => SideNavButton,
   SubSectionHeading: () => SubSectionHeading,
   SubSectionInteractive: () => SubSectionInteractive,
   Table: () => Table,
@@ -66,7 +69,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 +6413,543 @@ 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";
+
+// src/SideNavButton/SideNavButton.tsx
+var React40 = __toESM(require("react"));
+var import_lucide_react17 = require("lucide-react");
+var import_jsx_runtime40 = require("react/jsx-runtime");
+var SideNavButton = React40.forwardRef(
+  ({
+    icon,
+    selected = false,
+    focused = false,
+    onClick,
+    "aria-label": ariaLabel,
+    className,
+    style
+  }, ref) => {
+    const [isHovered, setIsHovered] = React40.useState(false);
+    const [isActive, setIsActive] = React40.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 buttonStyles4 = {
+      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__ */ (0, import_jsx_runtime40.jsx)(import_lucide_react17.Menu, { ...iconProps });
+        case "home":
+          return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_lucide_react17.Home, { ...iconProps });
+        case "favourite":
+          return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_lucide_react17.Star, { ...iconProps });
+        case "calendar":
+          return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_lucide_react17.Calendar, { ...iconProps });
+        case "notifications":
+          return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_lucide_react17.Bell, { ...iconProps });
+        case "emergency-alert":
+          return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_lucide_react17.AlertTriangle, { ...iconProps });
+        case "help":
+          return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_lucide_react17.HelpCircle, { ...iconProps });
+        default:
+          return null;
+      }
+    };
+    const defaultAriaLabel = icon.charAt(0).toUpperCase() + icon.slice(1);
+    return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+      "button",
+      {
+        ref,
+        type: "button",
+        className,
+        style: buttonStyles4,
+        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";
+
+// src/SideNavBar/SideNavBar.tsx
+var import_jsx_runtime41 = require("react/jsx-runtime");
+var SideNavBar = ({
+  selectedIcon,
+  onIconClick,
+  className,
+  style
+}) => {
+  const containerStyles6 = {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "space-between",
+    backgroundColor: "#ffffff",
+    padding: "8px",
+    borderTopLeftRadius: "8px",
+    borderBottomLeftRadius: "8px",
+    height: "100%",
+    width: "58px",
+    boxSizing: "border-box",
+    ...style
+  };
+  const topSectionStyles = {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    gap: "16px"
+  };
+  const dividerStyles = {
+    width: "24.5px",
+    height: "1px",
+    backgroundColor: "#efefef"
+  };
+  const handleClick = (icon) => {
+    onIconClick?.(icon);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className, style: containerStyles6, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { style: topSectionStyles, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+        SideNavButton,
+        {
+          icon: "side-menu",
+          selected: selectedIcon === "side-menu",
+          onClick: () => handleClick("side-menu"),
+          "aria-label": "Side menu"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { style: dividerStyles }),
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+        SideNavButton,
+        {
+          icon: "favourite",
+          selected: selectedIcon === "favourite",
+          onClick: () => handleClick("favourite"),
+          "aria-label": "Favourites"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+        SideNavButton,
+        {
+          icon: "notifications",
+          selected: selectedIcon === "notifications",
+          onClick: () => handleClick("notifications"),
+          "aria-label": "Notifications"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+        SideNavButton,
+        {
+          icon: "calendar",
+          selected: selectedIcon === "calendar",
+          onClick: () => handleClick("calendar"),
+          "aria-label": "Calendar"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { style: dividerStyles }),
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+        SideNavButton,
+        {
+          icon: "emergency-alert",
+          selected: selectedIcon === "emergency-alert",
+          onClick: () => handleClick("emergency-alert"),
+          "aria-label": "Emergency alerts"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+      SideNavButton,
+      {
+        icon: "help",
+        selected: selectedIcon === "help",
+        onClick: () => handleClick("help"),
+        "aria-label": "Help"
+      }
+    )
+  ] });
+};
+SideNavBar.displayName = "SideNavBar";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Avatar,
+  AvatarLogoLockup,
   Banner,
   Breadcrumbs,
   Button,
@@ -6436,6 +6975,8 @@ ModalContent.displayName = "ModalContent";
   SectionHeading,
   SectionHeadingInteractive,
   SectionIcon,
+  SideNavBar,
+  SideNavButton,
   SubSectionHeading,
   SubSectionInteractive,
   Table,
@@ -6446,6 +6987,8 @@ ModalContent.displayName = "ModalContent";
   TextArea,
   Toast,
   Toggle,
-  Tooltip
+  Tooltip,
+  TopNavBar,
+  TopNavItem
 });
 //# sourceMappingURL=index.js.map