@tonyarbor/components 0.6.0 → 0.7.1

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,
@@ -43,6 +44,10 @@ __export(src_exports, {
   ListRow: () => ListRow,
   ListRowMultiLine: () => ListRowMultiLine,
   Logo: () => Logo,
+  Modal: () => Modal,
+  ModalContent: () => ModalContent,
+  ModalFooter: () => ModalFooter,
+  ModalHeader: () => ModalHeader,
   NumericInput: () => NumericInput,
   Pagination: () => Pagination,
   Radio: () => Radio,
@@ -62,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);
 
@@ -134,6 +141,32 @@ var buttonStyles = {
         cursor: "not-allowed"
       }
     },
+    tertiary: {
+      backgroundColor: "#efefef",
+      // grey-100
+      color: "#2f2f2f",
+      // grey-900
+      ":hover": {
+        backgroundColor: "#dfdfdf"
+        // grey-200
+      },
+      ":active": {
+        backgroundColor: "#d1d1d1"
+        // grey-300
+      },
+      ":focus-visible": {
+        outline: "3px solid #3cad51",
+        // brand-500
+        outlineOffset: "0px"
+      },
+      ":disabled": {
+        backgroundColor: "#f8f8f8",
+        // grey-050
+        color: "#b3b3b3",
+        // grey-400
+        cursor: "not-allowed"
+      }
+    },
     destructive: {
       backgroundColor: "#c93232",
       // destructive-500
@@ -156,6 +189,36 @@ var buttonStyles = {
         cursor: "not-allowed"
       }
     },
+    "destructive-secondary": {
+      backgroundColor: "#ffffff",
+      color: "#a62323",
+      // destructive-600
+      border: "1px solid #c93232",
+      // destructive-500
+      ":hover": {
+        backgroundColor: "#a62323",
+        // destructive-600
+        color: "#ffffff",
+        border: "1px solid #a62323"
+      },
+      ":active": {
+        backgroundColor: "#920a0a",
+        // destructive-700
+        color: "#ffffff",
+        border: "1px solid #920a0a"
+      },
+      ":focus-visible": {
+        outline: "3px solid #3cad51",
+        // brand-500 (green focus ring)
+        outlineOffset: "0px"
+      },
+      ":disabled": {
+        backgroundColor: "#ffffff",
+        color: "#b3b3b3",
+        border: "1px solid #d1d1d1",
+        cursor: "not-allowed"
+      }
+    },
     ghost: {
       backgroundColor: "transparent",
       color: "#0b800b",
@@ -6130,9 +6193,566 @@ var Section = React33.forwardRef(
   }
 );
 Section.displayName = "Section";
+
+// src/ModalHeader/ModalHeader.tsx
+var React34 = __toESM(require("react"));
+var import_clsx29 = require("clsx");
+var import_jsx_runtime34 = require("react/jsx-runtime");
+var CloseIcon = () => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+  "svg",
+  {
+    width: "10",
+    height: "10",
+    viewBox: "0 0 10 10",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+      "path",
+      {
+        d: "M1 1L9 9M9 1L1 9",
+        stroke: "#2f2f2f",
+        strokeWidth: "1.5",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    )
+  }
+);
+var modalHeaderStyles = {
+  container: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    width: "100%",
+    padding: "16px",
+    backgroundColor: "#ffffff",
+    boxSizing: "border-box",
+    fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+    minHeight: "56px"
+  },
+  leftContent: {
+    display: "flex",
+    alignItems: "center",
+    gap: "16px",
+    flex: 1
+  },
+  title: {
+    fontSize: "22px",
+    fontWeight: "600",
+    color: "#2f2f2f",
+    lineHeight: "1.25",
+    margin: 0
+  },
+  closeButton: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: "32px",
+    height: "32px",
+    borderRadius: "16px",
+    backgroundColor: "#ffffff",
+    border: "none",
+    cursor: "pointer",
+    padding: 0,
+    flexShrink: 0,
+    transition: "background-color 0.15s ease-in-out"
+  },
+  closeButtonHover: {
+    backgroundColor: "#f8f8f8"
+  },
+  closeButtonFocus: {
+    outline: "3px solid #3cad51",
+    outlineOffset: "-3px"
+  }
+};
+var ModalHeader = React34.forwardRef(
+  ({ title, icon, onClose, className, style, ...props }, ref) => {
+    const [isHovered, setIsHovered] = React34.useState(false);
+    const [isFocused, setIsFocused] = React34.useState(false);
+    const closeButtonStyle = {
+      ...modalHeaderStyles.closeButton,
+      ...isHovered && modalHeaderStyles.closeButtonHover,
+      ...isFocused && modalHeaderStyles.closeButtonFocus
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+      "div",
+      {
+        ref,
+        className: (0, import_clsx29.clsx)("arbor-modal-header", className),
+        style: { ...modalHeaderStyles.container, ...style },
+        ...props,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { style: modalHeaderStyles.leftContent, children: [
+            icon && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(SectionIcon, { variant: icon }),
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("h2", { style: modalHeaderStyles.title, children: title })
+          ] }),
+          onClose && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+            "button",
+            {
+              type: "button",
+              onClick: onClose,
+              onMouseEnter: () => setIsHovered(true),
+              onMouseLeave: () => setIsHovered(false),
+              onFocus: () => setIsFocused(true),
+              onBlur: () => setIsFocused(false),
+              style: closeButtonStyle,
+              "aria-label": "Close modal",
+              children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(CloseIcon, {})
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+ModalHeader.displayName = "ModalHeader";
+
+// src/ModalFooter/ModalFooter.tsx
+var React35 = __toESM(require("react"));
+var import_clsx30 = require("clsx");
+var import_jsx_runtime35 = require("react/jsx-runtime");
+var modalFooterStyles = {
+  container: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "flex-end",
+    gap: "16px",
+    width: "100%",
+    padding: "16px",
+    backgroundColor: "#ffffff",
+    boxSizing: "border-box",
+    maxHeight: "56px"
+  }
+};
+var ModalFooter = React35.forwardRef(
+  ({ children, className, style, ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+      "div",
+      {
+        ref,
+        className: (0, import_clsx30.clsx)("arbor-modal-footer", className),
+        style: { ...modalFooterStyles.container, ...style },
+        ...props,
+        children
+      }
+    );
+  }
+);
+ModalFooter.displayName = "ModalFooter";
+
+// src/Modal/Modal.tsx
+var React36 = __toESM(require("react"));
+var import_clsx31 = require("clsx");
+var import_jsx_runtime36 = require("react/jsx-runtime");
+var modalStyles = {
+  container: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "flex-start",
+    backgroundColor: "#f8f8f8",
+    // grey-050
+    borderRadius: "8px",
+    boxShadow: "0px 8px 24px 0px rgba(32, 32, 32, 0.12)",
+    overflow: "hidden",
+    boxSizing: "border-box",
+    fontFamily: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"
+  },
+  content: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: "100%",
+    padding: "32px 16px",
+    backgroundColor: "#f8f8f8",
+    // grey-050
+    boxSizing: "border-box"
+  },
+  contentText: {
+    flex: 1,
+    fontSize: "13px",
+    fontWeight: "400",
+    color: "#2f2f2f",
+    lineHeight: "1.5"
+  }
+};
+var Modal = React36.forwardRef(
+  ({ children, width = 584, className, style, ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+      "div",
+      {
+        ref,
+        className: (0, import_clsx31.clsx)("arbor-modal", className),
+        style: {
+          ...modalStyles.container,
+          width: typeof width === "number" ? `${width}px` : width,
+          ...style
+        },
+        role: "dialog",
+        "aria-modal": "true",
+        ...props,
+        children
+      }
+    );
+  }
+);
+Modal.displayName = "Modal";
+var ModalContent = React36.forwardRef(
+  ({ children, className, style, ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+      "div",
+      {
+        ref,
+        className: (0, import_clsx31.clsx)("arbor-modal-content", className),
+        style: { ...modalStyles.content, ...style },
+        ...props,
+        children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { style: modalStyles.contentText, children })
+      }
+    );
+  }
+);
+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,
@@ -6145,6 +6765,10 @@ Section.displayName = "Section";
   ListRow,
   ListRowMultiLine,
   Logo,
+  Modal,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
   NumericInput,
   Pagination,
   Radio,
@@ -6164,6 +6788,8 @@ Section.displayName = "Section";
   TextArea,
   Toast,
   Toggle,
-  Tooltip
+  Tooltip,
+  TopNavBar,
+  TopNavItem
 });
 //# sourceMappingURL=index.js.map